/* critsmith.com stylesheet. The export's <style> is kept verbatim in the middle section. */

/* Cinzel 600, latin subset, self-hosted (SIL Open Font License, fonts/OFL.txt) */
@font-face {
  font-family: 'Cinzel';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/cinzel-latin-600-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- Breakpoints: the export's viewport switches at 640, 900 and 1100px ---- */
:root {
  --contentPad: 16px;
  --barPad: 16px;
  --moreSpan: auto;
  --moreCols: minmax(0, 1fr);
  --socialJustify: center;
  --socialOffset: 0px;
  --priceCols: minmax(0, 1fr);
  --featMax: 760px;
  --featCols: minmax(0, 1fr);
  --featColsPl: repeat(auto-fit, minmax(260px, 1fr));
  --featGap: 18px;
  --featGapPl: 24px;
  --aboutDir: column;
  --aboutAlign: center;
  --aboutText: center;
  --aboutGap: 16px;
  --aboutImg: 120px;
  --featAlign: center;
  --featText: center;
  --featOrderR: 0;
  --featBody: 14px;
  --heroCols: minmax(0, 1fr);
  --heroAlign: center;
  --heroText: center;
  --tabPad: 7px 12px;
  --tabFont: 13px;
}
@media (min-width: 640px) {
  :root {
    --barPad: 24px;
    --moreCols: repeat(2, minmax(0, 1fr));
    --socialJustify: flex-start;
    --socialOffset: -12px;
    --priceCols: repeat(3, minmax(0, 1fr));
    --aboutDir: row;
    --aboutAlign: flex-start;
    --aboutText: left;
    --aboutGap: 28px;
    --aboutImg: 160px;
    --tabPad: 9px 18px;
    --tabFont: 14px;
  }
}
@media (min-width: 900px) {
  :root {
    --contentPad: 16%;
  }
}
@media (min-width: 1100px) {
  :root {
    --moreSpan: span 2;
    --moreCols: repeat(3, minmax(0, 1fr));
    --featMax: 1040px;
    --featCols: minmax(0, 0.9fr) minmax(0, 1.1fr);
    --featColsPl: minmax(0, 1fr) minmax(0, 1fr);
    --featGap: 40px;
    --featGapPl: 40px;
    --featAlign: flex-start;
    --featText: left;
    --featOrderR: 2;
    --featBody: 16px;
    --heroCols: minmax(0, 1.1fr) minmax(0, 0.9fr);
    --heroAlign: flex-start;
    --heroText: left;
  }
}

/* ---- From the export (Critsmith Landing v3, 2026-10-26) ---- */
html, body { margin: 0; padding: 0; background: #0b0b0c; }
  body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }
  a { color: #38bdf8; font-weight: 700; text-decoration: none; }
  a:hover { color: #7dd3fc; }
  ::selection { background: rgba(245, 158, 11, 0.35); color: #fff; }
  details > summary::-webkit-details-marker { display: none; }
  details[open] > summary [data-chev] { transform: rotate(180deg); }
  details > summary:focus-visible { outline: 2px solid rgba(245, 158, 11, 0.7); outline-offset: 2px; }
  [data-anim="off"], [data-anim="off"] * { animation-play-state: paused !important; }
  [data-anim="reset"] * { animation: none !important; }
  [data-anim="done"], [data-anim="done"] * { animation-play-state: paused !important; animation-delay: -8.8s !important; }
  #remember [data-anim="done"], #remember [data-anim="done"] * { animation-delay: -5.87s !important; }
  @keyframes progress { from { width: 0%; } to { width: 100%; } }
  @keyframes in20 { 0%, 18% { opacity: 0; } 22%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
  @keyframes out20 { 0%, 18% { opacity: 1; } 22%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
  @keyframes in33 { 0%, 31% { opacity: 0; } 35%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
  @keyframes out33 { 0%, 31% { opacity: 1; } 35%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
  @keyframes in45 { 0%, 43% { opacity: 0; } 47%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
  @keyframes out45 { 0%, 43% { opacity: 1; } 47%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
  @keyframes in58 { 0%, 56% { opacity: 0; } 60%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
  @keyframes out58 { 0%, 56% { opacity: 1; } 60%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
  @keyframes in66 { 0%, 64% { opacity: 0; } 68%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
  @keyframes out66 { 0%, 64% { opacity: 1; } 68%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
  @keyframes out10 { 0%, 8% { opacity: 1; } 12%, 92% { opacity: 0; } 97%, 100% { opacity: 1; } }
  @keyframes w20_33 { 0%, 18% { opacity: 0; } 22%, 31% { opacity: 1; } 35%, 100% { opacity: 0; } }
  @keyframes w33_45 { 0%, 31% { opacity: 0; } 35%, 43% { opacity: 1; } 47%, 100% { opacity: 0; } }
  @keyframes budgetFill { 0%, 31% { width: 0%; } 37%, 43% { width: 78%; } 49%, 92% { width: 96%; } 97%, 100% { width: 0%; } }
  @keyframes partyIn { 0%, 9% { opacity: 0; } 13%, 92% { opacity: 1; } 97%, 100% { opacity: 0; } }
  @keyframes partyMove { 0%, 22% { left: 15%; top: 77%; } 26%, 35% { left: 38%; top: 77%; } 39%, 47% { left: 40%; top: 31%; } 51%, 60% { left: 65%; top: 25%; } 64%, 92% { left: 69%; top: 63%; } 97%, 100% { left: 15%; top: 77%; } }
  @keyframes w20_45 { 0%, 18% { opacity: 0; } 22%, 43% { opacity: 1; } 47%, 100% { opacity: 0; } }
  @keyframes w45_58 { 0%, 43% { opacity: 0; } 47%, 56% { opacity: 1; } 60%, 100% { opacity: 0; } }
  @keyframes w33_66 { 0%, 31% { opacity: 0; } 35%, 64% { opacity: 1; } 68%, 100% { opacity: 0; } }
  @keyframes glow58 { 0%, 56% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } 61% { box-shadow: 0 0 0 2px rgba(245,158,11,0.5), 0 0 28px rgba(245,158,11,0.35); } 80%, 100% { box-shadow: 0 0 0 0 rgba(245,158,11,0); } }
  @keyframes flash66 { 0%, 64% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } 69% { box-shadow: 0 0 0 2px rgba(239,68,68,0.5), 0 0 24px rgba(239,68,68,0.3); } 85%, 100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); } }
  @keyframes hpDrop { 0%, 43% { width: 71%; } 49%, 92% { width: 52%; } 97%, 100% { width: 71%; } }
  @keyframes floatUp { 0%, 43% { opacity: 0; transform: translateY(4px); } 47% { opacity: 1; transform: translateY(0); } 56% { opacity: 1; transform: translateY(-6px); } 60%, 100% { opacity: 0; transform: translateY(-10px); } }
  @keyframes press20 { 0%, 16% { background-color: rgba(56,189,248,0); } 19%, 24% { background-color: rgba(56,189,248,0.28); } 32%, 100% { background-color: rgba(56,189,248,0); } }
  @keyframes slideIn20 { 0%, 20% { opacity: 0; transform: translateX(18px); } 27%, 90% { opacity: 1; transform: translateX(0); } 96%, 100% { opacity: 0; transform: translateX(18px); } }
  @keyframes tileIn { 0% { opacity: 0; transform: translateY(8px) scale(0.98); } 5%, 88% { opacity: 1; transform: none; } 94%, 100% { opacity: 0; transform: translateY(8px) scale(0.98); } }
  @keyframes noteIn33 { 0%, 31% { opacity: 0; transform: translateY(6px); background-color: rgba(245,158,11,0.2); } 38% { opacity: 1; transform: none; background-color: rgba(245,158,11,0.2); } 56%, 92% { opacity: 1; transform: none; background-color: rgba(245,158,11,0); } 97%, 100% { opacity: 0; transform: translateY(6px); background-color: rgba(245,158,11,0); } }
  @keyframes toast { 0%, 18% { opacity: 0; transform: translateY(-8px); } 22%, 42% { opacity: 1; transform: none; } 47%, 100% { opacity: 0; transform: translateY(-8px); } }
  @keyframes bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } }
  @keyframes typeIn { 0% { max-width: 0; } 50%, 100% { max-width: 17ch; } }
  [data-anim="done"] [data-type] { animation: none !important; max-width: 17ch !important; }
  @keyframes bubIn { from { opacity: 0; transform: translate(-50%, 6px) scale(0.96); } to { opacity: 1; transform: translate(-50%, 0) scale(1); } }
  @keyframes bb1 { 0%, 4% { opacity: 0; transform: translateY(4px); } 12%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes bb2 { 0%, 24% { opacity: 0; transform: translateY(4px); } 32%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes bb3 { 0%, 44% { opacity: 0; transform: translateY(4px); } 52%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes bb4 { 0%, 64% { opacity: 0; transform: translateY(4px); } 72%, 90% { opacity: 1; transform: none; } 97%, 100% { opacity: 0; transform: none; } }
  @keyframes bbOut2 { 0%, 24% { opacity: 1; } 32%, 100% { opacity: 0; } }
  @keyframes bbLit1 { 0%, 14% { background-color: rgba(38,38,38,0.8); color: #737373; border-color: #404040; } 20%, 90% { background-color: rgba(69,26,3,0.6); color: #fde68a; border-color: #b45309; } 97%, 100% { background-color: rgba(38,38,38,0.8); color: #737373; border-color: #404040; } }
  @keyframes bbLit2 { 0%, 30% { background-color: rgba(38,38,38,0.8); color: #737373; border-color: #404040; } 36%, 90% { background-color: rgba(69,26,3,0.6); color: #fde68a; border-color: #b45309; } 97%, 100% { background-color: rgba(38,38,38,0.8); color: #737373; border-color: #404040; } }
  @keyframes bbLit3 { 0%, 46% { background-color: rgba(38,38,38,0.8); color: #737373; border-color: #404040; } 52%, 90% { background-color: rgba(69,26,3,0.6); color: #fde68a; border-color: #b45309; } 97%, 100% { background-color: rgba(38,38,38,0.8); color: #737373; border-color: #404040; } }
  @keyframes bbPress { 0%, 6% { background-color: #262626; } 9%, 14% { background-color: rgba(56,189,248,0.3); } 20%, 100% { background-color: #262626; } }
  @keyframes eq { 0%, 100% { height: 25%; } 50% { height: 100%; } }
  @keyframes hb0_24 { 0%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
  @keyframes hb25_49 { 0%, 24% { opacity: 0; } 25%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  @keyframes hb50_74 { 0%, 49% { opacity: 0; } 50%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
  @keyframes hb75_99 { 0%, 74% { opacity: 0; } 75%, 99% { opacity: 1; } 100%, 100% { opacity: 0; } }
  @keyframes hb0_11 { 0%, 11% { opacity: 1; } 12%, 100% { opacity: 0; } }
  @keyframes hb12_24 { 0%, 11% { opacity: 0; } 12%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
  @keyframes hb2_24 { 0%, 1% { opacity: 0; } 2%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
  @keyframes hb5_24 { 0%, 4% { opacity: 0; } 5%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
  @keyframes hb8_24 { 0%, 7% { opacity: 0; } 8%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
  @keyframes hb9_24 { 0%, 8% { opacity: 0; } 9%, 24% { opacity: 1; } 25%, 100% { opacity: 0; } }
  @keyframes hbpress11 { 0%, 10% { box-shadow: none; transform: none; } 11%, 12.5% { box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.45); transform: scale(0.96); } 13.5%, 100% { box-shadow: none; transform: none; } }
  @keyframes hb25_38 { 0%, 24% { opacity: 0; } 25%, 38% { opacity: 1; } 39%, 100% { opacity: 0; } }
  @keyframes hb39_49 { 0%, 38% { opacity: 0; } 39%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  @keyframes hbpress37 { 0%, 36% { box-shadow: none; transform: none; } 37%, 38.5% { box-shadow: 0 0 0 3px rgba(110, 231, 183, 0.45); transform: scale(0.96); } 39.5%, 100% { box-shadow: none; transform: none; } }
  @keyframes hb40_49 { 0%, 39% { opacity: 0; } 40%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  @keyframes hbglow { 0%, 38% { border-color: rgba(64, 64, 64, 0.7); } 40%, 49% { border-color: #047857; } 50%, 100% { border-color: rgba(64, 64, 64, 0.7); } }
  @keyframes hb52_74 { 0%, 51% { opacity: 0; } 52%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
  @keyframes hb56_74 { 0%, 55% { opacity: 0; } 56%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
  @keyframes hb60_74 { 0%, 59% { opacity: 0; } 60%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
  @keyframes hb64_74 { 0%, 63% { opacity: 0; } 64%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
  @keyframes hb68_74 { 0%, 67% { opacity: 0; } 68%, 74% { opacity: 1; } 75%, 100% { opacity: 0; } }
  @keyframes hb78_99 { 0%, 77% { opacity: 0; } 78%, 99% { opacity: 1; } 100%, 100% { opacity: 0; } }
  @keyframes hb83_99 { 0%, 82% { opacity: 0; } 83%, 99% { opacity: 1; } 100%, 100% { opacity: 0; } }
  @keyframes hb88_99 { 0%, 87% { opacity: 0; } 88%, 99% { opacity: 1; } 100%, 100% { opacity: 0; } }
  @keyframes hb93_99 { 0%, 92% { opacity: 0; } 93%, 99% { opacity: 1; } 100%, 100% { opacity: 0; } }
  @keyframes hb25_99 { 0%, 24% { opacity: 0; } 25%, 99% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes hb50_99 { 0%, 49% { opacity: 0; } 50%, 99% { opacity: 1; } 100% { opacity: 0; } }
  @keyframes hbType { 0%, 1% { max-width: 0; } 7%, 24% { max-width: 19ch; } 25%, 100% { max-width: 0; } }
  @keyframes hbBar { 0% { width: 0; } 100% { width: 100%; } }
  @keyframes hbStamp { 0%, 38% { opacity: 0; transform: scale(1.5) rotate(-8deg); } 40%, 49% { opacity: 1; transform: scale(1) rotate(-8deg); } 50%, 100% { opacity: 0; transform: scale(1) rotate(-8deg); } }
  @keyframes hb50_59 { 0%, 49% { opacity: 0; } 50%, 59% { opacity: 1; } 60%, 100% { opacity: 0; } }
  @keyframes hbWis { 0%, 59% { border-color: rgba(64, 64, 64, 0.7); } 61%, 70% { border-color: #047857; } 74%, 100% { border-color: rgba(64, 64, 64, 0.7); } }
  @keyframes hbRise { 0%, 79% { opacity: 0; transform: translateY(-6px); } 82%, 99% { opacity: 1; transform: none; } 100% { opacity: 0; } }
  #homebrew [data-anim="done"], #homebrew [data-anim="done"] * { animation-delay: -14.6s !important; }
  @keyframes caret { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  @keyframes typeline { 0%, 4% { max-width: 0; } 30%, 90% { max-width: 26ch; } 95%, 100% { max-width: 0; } }
  @keyframes tagOn { 0%, 30% { background-color: rgba(10,10,10,0.7); border-color: rgba(64,64,64,0.5); color: #a3a3a3; } 36%, 90% { background-color: rgba(69,26,3,0.5); border-color: rgba(180,83,9,0.6); color: #fde68a; } 95%, 100% { background-color: rgba(10,10,10,0.7); border-color: rgba(64,64,64,0.5); color: #a3a3a3; } }
  @keyframes noteIn { 0%, 40% { opacity: 0; transform: translateY(6px); background-color: rgba(245,158,11,0.18); } 48% { opacity: 1; transform: none; background-color: rgba(245,158,11,0.18); } 64%, 90% { opacity: 1; transform: none; background-color: rgba(245,158,11,0); } 95%, 100% { opacity: 0; transform: translateY(6px); background-color: rgba(245,158,11,0); } }

/* ---- From the export's style-hover attributes ---- */
.h1:hover { background: #262626 !important; color: #e5e5e5 !important; }
.h2:hover { color: #fff7d6 !important; }
.h3:hover { background: #262626 !important; }
.h4:hover { background: #fde68a !important; }
.h5:hover { color: #f5f5f5 !important; }

/* ---- Port rules (not in the export): what the export did in script, done in CSS ---- */

/* Phone and wider variants of the top bar buttons (export: isPhone / notPhone) */
.if-wide { display: none; }
.if-phone { display: contents; }
@media (min-width: 640px) {
  .if-wide { display: contents; }
  .if-phone { display: none; }
}

/* The about photo's <picture> wrapper must not add a flex item (Chromium gives <source> a box) */
picture > source { display: none; }

/* Left icon menu: site.js shows it when it fits beside the content */
.pillars { display: contents; }
.pillars[hidden] { display: none; }

/* Carousel: one slide on phones, all three stacked in one cell (only one visible) from 900px */
.slide { display: none; visibility: hidden; }
.slide.cur { display: grid; visibility: visible; }
@media (min-width: 900px) { .slide { display: grid; } }
.car-progress[hidden] { display: none; }

/* "More features" bubbles: hover or keyboard focus (export: en0..en6 / lv) */
.more-card .bub { display: none; }
.more-card:hover, .more-card:focus-visible { z-index: 30; }
.more-card:hover .bub, .more-card:focus-visible .bub { display: contents; }

/* Keyboard focus on the carousel controls and the icon menu */
.car-nav button:focus-visible, .pillars a:focus-visible { outline: 2px solid rgba(245, 158, 11, 0.7); outline-offset: 2px; }

/* Without script: every slide shown, one under another, at its finished frame; dead controls hidden */
html:not(.js) .slide { display: grid; visibility: visible; grid-area: auto !important; }
html:not(.js) .slides { row-gap: 32px; }
html:not(.js) .car-nav { display: none !important; }