/* ============================================================
   elecart.us — main.css  (design tokens from elecart_DESIGN.md)
   ============================================================ */

/* ---------- Fonts (self-hosted, latin subsets) ---------- */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/bricolage-grotesque-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;src:url('../fonts/bricolage-grotesque-latin-800-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('../fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('../fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('../fonts/inter-latin-600-normal.woff2') format('woff2')}

/* ---------- Tokens ---------- */
:root{
  --ink:#0E1B2C; --primary:#123D5C; --primary-soft:#E8F0F6;
  --accent:#F0A028; --accent-ink:#1A1206;
  --paper:#FFFFFF; --paper-warm:#F7F9FB;
  --grey-600:#55606C; --grey-300:#D6DDE4;
  --positive:#1E7A4E; --negative:#B3362B;
  --shadow:0 8px 30px rgba(14,27,44,.10);
  /* tint ladder (sRGB fallbacks) */
  --primary-t1:#0E3149; --primary-t2:#3A6480; --accent-t1:#D98F1E;
  --ease:cubic-bezier(.22,.61,.36,1);
  --display:'Bricolage Grotesque',system-ui,sans-serif;
  --body:'Inter',system-ui,sans-serif;
  --maxw:1140px;
}

/* ---------- Base ---------- */
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font-family:var(--body);font-size:16px;line-height:1.6;-webkit-font-smoothing:antialiased}
/* height:auto globally: every image carries width/height attributes to reserve
   space, and without this the height attribute applies as a presentational hint
   the moment any rule constrains the width. That is what distorted the gallery
   stage into a portrait box. */
img,svg{display:block;max-width:100%;height:auto}
a{color:var(--primary);text-decoration:none}
.sub,.section-sub,.card-benefit,.po-item span,.tabrow-info p,.feature p,.step p,.why p,.faq p,.prose p{text-wrap:pretty}
p a:hover,li a:hover{color:var(--ink);text-decoration:underline;text-decoration-color:var(--accent);text-decoration-thickness:2px;text-underline-offset:4px}
h1,h2,h3{font-family:var(--display);letter-spacing:-0.02em;line-height:1.12;margin:0 0 .5em;text-wrap:balance}
h1{font-weight:800;font-size:clamp(34px,5vw,58px);line-height:1.08}
h2{font-weight:800;font-size:clamp(28px,4vw,36px)}
h3{font-weight:600;font-size:clamp(18px,2.4vw,22px);letter-spacing:-0.01em}
.num,.price{font-variant-numeric:tabular-nums}
.muted{color:var(--grey-600)}
.small{font-size:14px}
input{font-family:var(--body)}
input:focus,button:focus-visible,a:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:var(--maxw);margin:0 auto;padding-left:24px;padding-right:24px}
.section{padding:clamp(56px,8vw,96px) 0}
.section--tight{padding:clamp(40px,6vw,72px) 0}
.section--warm{background:var(--paper-warm)}
.section--soft{background:var(--primary-soft)}
.section-sub{color:var(--grey-600);margin:0 0 40px;max-width:56ch}
.eyebrow{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--primary);margin-bottom:14px}

/* ---------- Header ---------- */
.site-header{position:sticky;top:0;z-index:50;background:rgba(255,255,255,.92);backdrop-filter:blur(8px);border-bottom:1px solid var(--grey-300)}
.site-header .bar{max-width:var(--maxw);margin:0 auto;padding:0 24px;height:60px;display:flex;align-items:center;justify-content:space-between;gap:16px}
.logo{font-family:var(--display);font-weight:800;font-size:22px;letter-spacing:-0.02em;color:var(--primary);display:inline-flex;align-items:center;gap:9px}
/* Mark is decorative: the wordmark beside it already carries the name, so the
   img has empty alt rather than repeating 'elecart' to a screen reader. */
.logo-mark{width:28px;height:28px;border-radius:7px;flex:none;display:block}
.logo:hover{text-decoration:none}
/* Optical cap-height correction for the wordmark. In Bricolage Grotesque the
   lowercase ascender (72/100em) overshoots the capital height (66/100em), so at
   the same font-size the 'E' of Elecart reads as shorter than the 'l' beside it.
   Scaling the initial by 72/66 lines the two tops up exactly. Uniform scale, not
   scaleY, so the stem and bar weights grow together and the letter stays on
   model. Lockups only: headings and running text use the face as drawn. */
.logo span::first-letter{font-size:1.0909em}
.site-nav{display:flex;align-items:center;gap:28px;font-size:14px;font-weight:500}
.site-nav a{color:var(--ink)}
.site-nav a:hover{color:var(--primary)}
.nav-toggle{display:none;background:none;border:none;padding:8px;cursor:pointer}
.nav-toggle svg{stroke:var(--ink)}
@media (max-width:680px){
  .nav-toggle{display:block}
  .site-nav{display:none;position:absolute;top:60px;left:0;right:0;flex-direction:column;align-items:stretch;gap:0;background:var(--paper);border-bottom:1px solid var(--grey-300)}
  .site-nav.open{display:flex}
  .site-nav a{padding:14px 24px;border-top:1px solid var(--grey-300)}
}

/* ---------- Buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;background:var(--accent);color:var(--accent-ink);font-weight:600;font-size:16px;padding:14px 28px;border:none;border-radius:8px;cursor:pointer;font-family:var(--body);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
.btn:hover{transform:translateY(-2px);color:var(--accent-ink);text-decoration:none;box-shadow:0 6px 20px rgba(240,160,40,.35)}
.btn--lg{font-size:17px;padding:16px 32px;min-height:52px}
.btn--sm{min-height:40px;font-size:14px;padding:8px 18px}
.link-underline{font-size:14px;font-weight:500;color:var(--primary);border-bottom:2px solid var(--accent);padding-bottom:1px}

/* ---------- Trust strip ---------- */
.trust{border-top:1px solid var(--grey-300);border-bottom:1px solid var(--grey-300);background:var(--paper-warm);padding:16px 24px}
.trust .row,.trust-row{max-width:var(--maxw);margin:0 auto;display:flex;gap:14px 28px;flex-wrap:wrap;align-items:center;justify-content:center;font-size:14px;color:var(--grey-600)}
.trust-item{display:inline-flex;align-items:center;gap:8px}
.trust-inline{display:flex;gap:10px 22px;flex-wrap:wrap;font-size:13.5px;color:var(--grey-600)}
.trust-inline .trust-item{gap:7px}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(180deg,var(--primary-soft) 0%,rgba(232,240,246,0) 75%);padding:clamp(48px,7vw,88px) 0 clamp(36px,5vw,60px)}
.hero .wrap{display:flex;flex-wrap:wrap;gap:44px;align-items:center}
.hero-copy{flex:1 1 380px;min-width:290px}
.hero-copy .sub{font-size:clamp(16px,2vw,18px);color:var(--grey-600);margin:0 0 28px;max-width:46ch}
.hero-cta{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.hero-price{font-family:var(--display);font-weight:800;font-size:24px;letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.hero-price .per{font-family:var(--body);font-weight:400;font-size:14px;color:var(--grey-600);letter-spacing:0}
.hero-visual{flex:1 1 420px;min-width:290px}

/* ---------- Living Ledger frame ---------- */
.ledger{background:var(--paper);border:1px solid var(--grey-300);border-radius:16px;overflow:hidden;box-shadow:var(--shadow)}
.ledger-chrome{display:flex;align-items:center;gap:6px;padding:11px 14px;border-bottom:1px solid var(--grey-300)}
.ledger-chrome .dot{width:9px;height:9px;border-radius:50%;background:var(--grey-300)}
.ledger-chrome .fname{margin-left:10px;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--grey-600)}
.ledger-body{padding:20px;display:flex;flex-direction:column;gap:14px}
.ledger-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.stat{background:var(--paper-warm);border:1px solid var(--grey-300);border-radius:8px;padding:12px 14px;min-width:0}
.stat .label{font-size:10.5px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;color:var(--grey-600);white-space:nowrap}
.stat .value{font-family:var(--display);font-weight:800;font-size:clamp(17px,2.2vw,24px);letter-spacing:-0.02em;font-variant-numeric:tabular-nums}
.stat .value.pos{color:var(--positive)}
.stat .value.neg{color:var(--negative)}
.ledger-tabs{display:flex;gap:8px;font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--grey-600);flex-wrap:wrap}
.ledger-tabs .on{background:var(--primary-soft);border-radius:4px;padding:3px 8px;color:var(--primary);font-weight:600}
.ledger-tabs span:not(.on){padding:3px 8px}
/* chart animation */
.ledger .bar{transform-origin:center 122px;transform:scaleY(0);transition:transform .45s var(--ease)}
.ledger.play .bar{transform:scaleY(1)}
.ledger .trend{stroke-dasharray:600;stroke-dashoffset:600;transition:stroke-dashoffset .9s var(--ease) .45s}
.ledger.play .trend{stroke-dashoffset:0}

/* ---------- Cards ---------- */
.grid{display:grid;gap:24px}
.grid--2{grid-template-columns:repeat(auto-fit,minmax(280px,1fr))}
.grid--3{grid-template-columns:repeat(auto-fit,minmax(260px,1fr))}
.grid--4{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.card{display:block;background:var(--paper);border:1px solid var(--grey-300);border-radius:12px;overflow:hidden;color:var(--ink);transition:transform .2s var(--ease),box-shadow .2s var(--ease)}
a.card:hover{transform:translateY(-3px);box-shadow:var(--shadow);text-decoration:none;color:var(--ink)}
.card-shot{background:var(--primary-soft);padding:18px 18px 0}
.card-shot--lg{padding:24px 24px 0}
.mini-frame{background:var(--paper);border:1px solid var(--grey-300);border-radius:8px 8px 0 0;border-bottom:none;overflow:hidden}
.mini-chrome{display:flex;gap:5px;padding:7px 9px;border-bottom:1px solid var(--grey-300)}
.mini-chrome .dot{width:6px;height:6px;border-radius:50%;background:var(--grey-300)}
.card-body{padding:18px 20px 20px}
.card-body--lg{padding:24px}
.card-title{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-0.01em}
.card-title--lg{font-size:22px}
.card-benefit{font-size:14px;color:var(--grey-600);margin:6px 0 14px}
.card-foot{display:flex;justify-content:space-between;align-items:baseline}
.card-foot .price{font-weight:600}

/* ---------- Feature / step blocks ---------- */
.feature{background:var(--paper);border:1px solid var(--grey-300);border-radius:12px;padding:24px;display:flex;flex-direction:column;gap:10px}
.feature .t{font-weight:600;font-size:16px}
.feature p{margin:0;font-size:14px;color:var(--grey-600)}
.step{background:var(--paper);border:1px solid var(--grey-300);border-radius:12px;padding:28px}
.step-head{display:flex;align-items:center;gap:14px;margin-bottom:14px}
.step-num{font-family:var(--display);font-weight:800;font-size:22px;color:var(--primary);font-variant-numeric:tabular-nums}
.step .t{font-weight:600;font-size:16px;margin-bottom:6px}
.step p{margin:0;font-size:14px;color:var(--grey-600)}
.why{display:flex;flex-direction:column;gap:12px}
.why .t{font-weight:600;font-size:16px}
.why p{margin:0;font-size:14px;color:var(--grey-600)}

/* ---------- Pain / outcome ---------- */
.po-card{background:var(--paper);border:1px solid var(--grey-300);border-radius:12px;padding:28px}
.po-tag{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;margin-bottom:18px}
.po-tag.bad{color:var(--negative)}
.po-tag.good{color:var(--positive)}
.po-list{display:flex;flex-direction:column;gap:16px}
.po-item{display:flex;gap:12px;align-items:flex-start}
.po-item svg{flex:none;margin-top:3px}
.po-item span{font-size:15px;color:var(--grey-600)}

/* ---------- Tab walkthrough ---------- */
.tabrow{display:flex;gap:24px;align-items:center;flex-wrap:wrap;background:var(--paper);border:1px solid var(--grey-300);border-radius:12px;padding:20px}
.tabrow-shot{flex:0 1 260px;min-width:210px}
.tabrow-shot .mini-frame{border-radius:8px;border-bottom:1px solid var(--grey-300)}
.tabrow-info{flex:1 1 300px;min-width:250px}
.tabrow-head{display:flex;align-items:baseline;gap:12px;margin-bottom:6px}
.tabrow-num{font-family:var(--body);font-size:11px;font-weight:600;letter-spacing:.02em;color:var(--primary);background:var(--primary-soft);border-radius:4px;padding:3px 9px;white-space:nowrap}
.tabrow-name{font-family:var(--display);font-weight:600;font-size:20px;letter-spacing:-0.01em}
.tabrow-info p{margin:0;font-size:15px;color:var(--grey-600);max-width:52ch}

/* ---------- Demo placeholder ---------- */
.demo-box{position:relative;background:repeating-linear-gradient(45deg,#F7F9FB 0,#F7F9FB 14px,#EFF3F7 14px,#EFF3F7 28px);border:1px solid var(--grey-300);border-radius:16px;overflow:hidden;aspect-ratio:16/9;display:flex;align-items:center;justify-content:center;flex-direction:column;gap:16px}
.demo-play{width:72px;height:72px;border-radius:50%;background:var(--paper);border:1px solid var(--grey-300);box-shadow:var(--shadow);display:flex;align-items:center;justify-content:center}
.demo-note{font-family:ui-monospace,Menlo,monospace;font-size:13px;color:var(--grey-600);text-align:center;padding:0 24px}
.demo-cap{text-align:center;font-size:14px;color:var(--grey-600);margin:16px 0 0}
.demo-video{display:block;width:100%;border:1px solid var(--grey-300);border-radius:16px;box-shadow:var(--shadow)}

/* ---------- FAQ ---------- */
.faq{background:var(--paper);border:1px solid var(--grey-300);border-radius:12px;overflow:hidden}
.faq details{border-bottom:1px solid var(--grey-300)}
.faq details:last-child{border-bottom:none}
.faq summary{cursor:pointer;padding:18px 24px;font-weight:600;font-size:16px;display:flex;justify-content:space-between;align-items:center;gap:16px;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;transition:transform .2s var(--ease)}
.faq details[open] summary svg{transform:rotate(180deg)}
.faq p{margin:0;padding:0 24px 18px;color:var(--grey-600);font-size:15px}

/* ---------- Email band ---------- */
.email-band{max-width:720px;margin:0 auto;text-align:center;padding:0 24px}
.email-band h2{font-size:clamp(26px,3.5vw,32px);margin-bottom:10px}
.email-band .sub{color:var(--grey-600);margin:0 0 28px}
.email-form{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.email-form input{flex:1 1 240px;max-width:340px;min-height:48px;padding:0 16px;font-size:16px;border:1px solid var(--grey-300);border-radius:8px;color:var(--ink);background:var(--paper)}

/* ---------- Footer ---------- */
.site-footer{background:var(--ink);color:#fff;padding:56px 24px 40px}
.site-footer .cols{max-width:var(--maxw);margin:0 auto;display:flex;justify-content:space-between;gap:32px;flex-wrap:wrap;margin-bottom:40px}
.site-footer .tagline{font-size:14px;color:#8A95A3;margin-top:6px;max-width:32ch}
.foot-groups{display:flex;gap:56px;flex-wrap:wrap}
.foot-group{display:flex;flex-direction:column;gap:10px;font-size:14px}
.foot-label{font-size:12px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:#8A95A3}
.foot-group a{color:var(--grey-300)}
.foot-group a:hover{color:#fff}
.site-footer .legal{max-width:var(--maxw);margin:0 auto;border-top:1px solid rgba(214,221,228,.18);padding-top:24px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;font-size:13px;color:#8A95A3}
.site-footer .logo{color:#fff}

/* ---------- Sticky buy bar ---------- */
.buybar{position:fixed;left:0;right:0;bottom:0;z-index:60;background:var(--paper);border-top:1px solid var(--grey-300);box-shadow:var(--shadow);padding:10px 16px;display:flex;align-items:center;gap:12px;transform:translateY(110%);transition:transform .45s var(--ease)}
.buybar.show{transform:translateY(0)}
.buybar .info{min-width:0;flex:1}
.buybar .t{font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.buybar .p{font-size:13px;color:var(--grey-600);font-variant-numeric:tabular-nums}
@media (min-width:900px){.buybar{display:none}}

/* ---------- Reveal on scroll ---------- */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .45s var(--ease),transform .45s var(--ease)}
.reveal.in{opacity:1;transform:translateY(0)}
.reveal.d1{transition-delay:.09s}
.reveal.d2{transition-delay:.18s}

/* ---------- Prose (about/legal) ---------- */
.prose{max-width:720px}
.prose p,.prose li{color:var(--grey-600);font-size:16px}
.prose h2{font-size:clamp(22px,3vw,28px);margin-top:1.6em}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
  .reveal{opacity:1;transform:none}
  .ledger .bar{transform:scaleY(1)}
  .ledger .trend{stroke-dashoffset:0}
  .buybar{transition:none}
}


/* ---------- OKLCH tint ladder (wide-gamut engines) ---------- */
@supports (color: oklch(50% 0.1 200)) {
  :root{
    --primary-t1:color-mix(in oklch, var(--primary), black 18%);   /* pressed/hover deep */
    --primary-t2:color-mix(in oklch, var(--primary), white 28%);   /* light accents */
    --accent-t1:color-mix(in oklch, var(--accent), black 12%);     /* button hover */
  }
}
.btn:hover{background:var(--accent-t1)}
a.card:hover .link-underline{color:var(--primary-t1)}

/* ---------- Scroll-driven reveals (zero-JS engines path) ---------- */
@supports (animation-timeline: view()) {
  @keyframes reveal-in{
    from{opacity:0;transform:translateY(16px)}
    to{opacity:1;transform:translateY(0)}
  }
  .reveal{
    opacity:1;transform:none;              /* neutral base; keyframes drive it */
    transition:none;
    animation:reveal-in .45s var(--ease) both;
    animation-timeline:view();
    animation-range:entry 0% entry 45%;
  }
  .reveal.d1{animation-range:entry 5% entry 50%}
  .reveal.d2{animation-range:entry 10% entry 55%}
  @media (prefers-reduced-motion:reduce){
    .reveal{animation:none;opacity:1;transform:none}
  }
}


/* ---------- v2.1 fixes ---------- */
/* #2: never let forced-dark browsers invert the design */
:root{color-scheme:light}
html{background:var(--paper)}

/* #1 + #3: template-page header on mobile — drop the CTA (sticky bar covers it),
   keep header height stable, never overlap content */
.site-header .bar{flex-wrap:nowrap;min-height:60px;height:auto}
@media (max-width:680px){
  .site-nav .btn{display:none}                 /* header CTA gone on phones */
  .site-nav{gap:16px}
}
@media (max-width:400px){
  .site-nav a:not(.btn){font-size:13px}
}


/* ---------- v2.2 preview fixes ---------- */
/* Bulletproof white canvas: element-level layer that force-dark tools
   (iOS Quick Look, Android force-dark) do not invert */
body::before{content:'';position:fixed;inset:0;background:#FFFFFF;z-index:-1}
.hero{background-color:#FFFFFF}   /* solid fallback beneath the gradient */

/* Eyebrow / hero breathing room under the sticky header on phones */
@media (max-width:680px){
  .hero{padding-top:clamp(56px,10vw,72px)}
}


/* ---------- v2.3: email form states ---------- */
.email-form{align-items:flex-start}
.email-field{flex:1 1 240px;max-width:340px;display:flex;flex-direction:column;gap:6px}
.email-field input{width:100%}
.form-msg{display:none;font-size:13.5px;text-align:left;line-height:1.45}
.form-msg.show{display:block}
.form-msg.error{color:var(--negative)}
.form-msg.ok{color:var(--positive)}
.email-form input[aria-invalid="true"]{border-color:var(--negative);outline-color:var(--negative)}
@media (max-width:560px){
  .email-form{flex-direction:column;align-items:stretch}
  .email-field{max-width:none}
  .email-form .btn{width:100%}
}


/* ================= v2.4 ================= */

/* ---------- Tab status chips ---------- */
.tabrow-head{flex-wrap:wrap;gap:8px 12px}
.chip{display:inline-flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;
  letter-spacing:.02em;padding:3px 9px;border-radius:100px;border:1px solid;white-space:nowrap}
.chip::before{content:'';width:6px;height:6px;border-radius:2px;flex:none}
.chip--input{color:#8A5A05;background:#FDF3E3;border-color:#F3D9AC}
.chip--input::before{background:var(--accent)}
.chip--auto{color:#155F3D;background:#E8F5EE;border-color:#B9DFCB}
.chip--auto::before{background:var(--positive)}
.chip--setup{color:var(--grey-600);background:var(--paper-warm);border-color:var(--grey-300)}
.chip--ref{color:var(--primary);background:var(--primary-soft);border-color:#C5D8E5}
.chip--ref::before{background:var(--primary)}
.chip--setup::before{background:var(--grey-300)}

/* legend above the tab list */
.chip-legend{display:flex;gap:10px 18px;flex-wrap:wrap;margin:-24px 0 32px}

/* ---------- Decimal section spine ---------- */
.spine{display:block;font-family:var(--display);font-weight:600;font-size:13px;
  letter-spacing:.04em;color:var(--primary);opacity:.75;margin-bottom:10px;
  font-variant-numeric:tabular-nums}
.tabrow-num,.step-num{font-variant-numeric:tabular-nums}

/* ---------- Hero secondary CTA ---------- */
.cta-secondary{display:inline-flex;align-items:center;gap:7px;font-size:15px;font-weight:600;
  color:var(--primary);border-bottom:2px solid transparent;padding-bottom:2px;
  transition:border-color .2s var(--ease),color .2s var(--ease)}
.cta-secondary:hover{color:var(--primary-t1);border-bottom-color:var(--accent);text-decoration:none}
.cta-secondary svg{transition:transform .2s var(--ease)}
.cta-secondary:hover svg{transform:translateY(2px)}

/* ---------- Living Ledger stat deltas ---------- */
.stat .delta{display:flex;align-items:center;gap:4px;margin-top:3px;font-size:11px;
  font-weight:600;color:var(--grey-600);font-variant-numeric:tabular-nums}
.stat .delta.up{color:var(--positive)}
.stat .delta.down{color:var(--negative)}

/* ---------- Spreadsheet word-search ---------- */
.sheet-find{background:var(--paper);border:1px solid var(--grey-300);border-radius:12px;
  overflow:hidden;box-shadow:var(--shadow)}
.sheet-find .chrome{display:flex;align-items:center;gap:6px;padding:11px 14px;
  border-bottom:1px solid var(--grey-300)}
.sheet-find .chrome .dot{width:9px;height:9px;border-radius:50%;background:var(--grey-300)}
.sheet-find .chrome .fname{margin-left:10px;font-family:ui-monospace,Menlo,monospace;
  font-size:11px;color:var(--grey-600)}
.sheet-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.sheet-grid{border-collapse:collapse;font-family:ui-monospace,Menlo,monospace;
  font-size:13px;margin:0 auto;table-layout:fixed}
.sheet-grid th,.sheet-grid td{width:30px;height:28px;text-align:center;
  border:1px solid var(--grey-300);padding:0;color:var(--ink);font-weight:400}
.sheet-grid th{background:var(--paper-warm);color:var(--grey-600);font-size:10.5px;
  font-weight:600;position:sticky;left:0}
.sheet-grid thead th{position:static}
.sheet-grid td{color:#9BA6B2}
.sheet-grid td.hit{background:var(--accent);color:var(--accent-ink);font-weight:700}
.sheet-legend{display:flex;flex-wrap:wrap;gap:8px 10px;margin-top:22px;justify-content:center}
.sheet-word{font-family:ui-monospace,Menlo,monospace;font-size:12px;font-weight:600;
  letter-spacing:.04em;color:var(--primary);background:var(--primary-soft);
  border-radius:100px;padding:5px 12px}
@media (max-width:680px){
  .sheet-grid th,.sheet-grid td{width:25px;height:24px;font-size:11.5px}
}

/* ---------- TL;DR block (SEO-BUILD-SPEC 1.3: self-contained answer under H1) ---------- */
.tldr{margin:18px 0 26px;padding:16px 18px;background:var(--primary-soft);
  border-left:3px solid var(--primary);border-radius:0 8px 8px 0;max-width:60ch}
.tldr .tldr-lead{margin:0 0 10px;font-size:15.5px;line-height:1.5;color:var(--ink);font-weight:500}
.tldr ul{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px}
.tldr li{font-size:14px;line-height:1.5;color:var(--grey-600)}
.tldr li strong{color:var(--primary);font-weight:600}

/* ---------- Brand facts (repeated verbatim on every surface) ---------- */
.site-footer .brand-facts{font-size:12.5px;line-height:1.6;color:#7C8794;
  margin:12px 0 0;max-width:46ch}

/* ---------- Topic line (in-body links to topic hubs) ---------- */
.topic-line{font-size:13px;color:var(--grey-600);margin:14px 0 0}
.topic-line a{color:var(--primary);text-decoration:underline;text-underline-offset:2px}

/* Breadcrumb. Added 2026-09-14: the audit found no breadcrumb, visible or
   marked up, which was the only failing check in the internal-link dimension.
   Kept quiet on purpose, it is orientation rather than navigation. */
.crumbs{display:flex;flex-wrap:wrap;align-items:center;gap:7px;
  font-size:13px;line-height:1.4;color:var(--grey-600);margin-bottom:14px}
.crumbs a{color:var(--grey-600);text-decoration:none}
.crumbs a:hover{color:var(--primary);text-decoration:underline}
.crumbs [aria-current="page"]{color:var(--ink);font-weight:500}
.crumb-sep{color:var(--grey-300)}
@media (max-width:520px){.crumbs{font-size:12px;gap:5px}}

/* --- product title -------------------------------------------------------
   The h1 used to be the marketing headline, so "Paycheck Budget Spreadsheet"
   appeared nowhere prominent: it was in <title>, in the breadcrumb at 13px, and
   inside the answer block. The name someone actually searches for was the one
   thing the page did not say loudly. The h1 is now the product name and the
   headline sits under it as a deck. */
.product-h1{font-size:clamp(30px,4.2vw,46px);line-height:1.08;margin:0 0 10px;
  letter-spacing:-0.02em}
.hero-deck{font-family:var(--display);font-weight:600;
  font-size:clamp(19px,2.4vw,25px);line-height:1.25;letter-spacing:-0.01em;
  color:var(--primary);margin:0 0 16px;max-width:24ch;text-wrap:balance}
@media (max-width:640px){.hero-deck{max-width:none}}

/* Hero product shot, replacing the fabricated ledger mock. */
.hero-shot{margin:0;flex:1 1 460px;min-width:280px}
.hero-shot img{display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--grey-300);box-shadow:var(--shadow)}

/* --- product gallery ------------------------------------------------------
   Main stage plus a horizontal thumbnail strip. No library: every lightbox
   worth having is an off-domain script, which the build gate blocks.
   The stage is a fixed 4:3 box so swapping frames cannot shift layout
   (§9b blocker 1), and the strip scrolls rather than wrapping on narrow
   screens so it never pushes the buy button below the fold. */
.gallery{flex:1 1 520px;min-width:280px}
.gal-stage{margin:0;position:relative}
/* height:auto is load-bearing. The markup carries width/height attributes for
   CLS, and without height:auto the height attribute applies as a presentational
   hint: the box became 560x750 portrait, object-fit:cover then cropped the sides
   off every frame, and the stage ran absurdly long on a phone.
   contain, not cover: these frames are infographics with text in them, so any
   crop cuts words. Every frame is 4:3, so contain letterboxes nothing today and
   protects the layout if a future frame is not. */
.gal-stage img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:contain;
  background:var(--paper-warm);border-radius:14px;border:1px solid var(--grey-300);
  box-shadow:var(--shadow)}
.gal-cap{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  font-size:13px;color:var(--grey-600);margin-top:10px;line-height:1.4}
.gal-count{flex:none;font-variant-numeric:tabular-nums;color:var(--grey-600)}

.gal-strip{list-style:none;display:flex;gap:8px;margin:12px 0 0;padding:2px 2px 6px;
  overflow-x:auto;scroll-behavior:smooth;scrollbar-width:thin}
.gal-strip::-webkit-scrollbar{height:6px}
.gal-strip::-webkit-scrollbar-thumb{background:var(--grey-300);border-radius:3px}
.gal-strip li{flex:none}
.gal-thumb{display:block;width:62px;border-radius:7px;overflow:hidden;
  border:2px solid transparent;outline-offset:2px;
  transition:border-color .16s var(--ease),opacity .16s var(--ease);opacity:.72}
.gal-thumb img{display:block;width:100%;height:auto;aspect-ratio:4/3;object-fit:cover}
.gal-thumb:hover,.gal-thumb:focus-visible{opacity:1;border-color:var(--grey-300)}
.gal-thumb.is-active{opacity:1;border-color:var(--primary)}

/* Arrows appear only once the script is driving the gallery, so they are never
   shown as controls that do nothing. */
.gal-nav{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;
  display:none;align-items:center;justify-content:center;border:1px solid var(--grey-300);
  background:rgba(255,255,255,.94);border-radius:50%;cursor:pointer;color:var(--primary);
  box-shadow:0 2px 10px rgba(14,27,44,.12)}
[data-gallery].is-live .gal-nav{display:flex}
.gal-nav:hover{background:#fff;border-color:var(--primary)}
.gal-prev{left:10px}
.gal-next{right:10px}

@media (max-width:640px){
  .gal-thumb{width:54px}
  .gal-cap{font-size:12px}
}
@media (prefers-reduced-motion:reduce){
  .gal-strip{scroll-behavior:auto}
  .gal-thumb{transition:none}
}

/* --- gallery lightbox -----------------------------------------------------
   The frames are infographics with real text in them, so at 327px on a phone
   the words inside are unreadable. Etsy and Shopify both answer this the same
   way: the stage shows the whole frame, tapping it opens a full-screen viewer.

   Built on <dialog>, which gives Escape, the backdrop and focus return for free
   rather than reimplementing them. */
.gal-stage button.gal-open{display:block;width:100%;padding:0;border:0;background:none;
  cursor:zoom-in;border-radius:14px;outline-offset:3px}
/* The enlarge hint sits in the caption row, not on the artwork. Overlaid on the
   image it covered the frame's own text, and every frame in this catalogue is a
   text-bearing infographic, so there is no safe corner to put it in. Etsy and
   Zara show no badge at all; Amazon puts the wording below the image. This is
   the Amazon position.
   It is a label, not a control: the stage itself is the button, and a second
   control doing the same job would only add a duplicate tab stop. */
.gal-zoomhint{display:inline-flex;align-items:center;gap:5px;flex:none;
  font-size:12px;font-weight:500;color:var(--primary);
  background:var(--primary-soft);border-radius:999px;padding:3px 9px;
  pointer-events:none;margin-left:auto}
.gal-cap .gal-count{margin-left:10px}

.gal-lb{border:0;padding:0;background:transparent;max-width:100vw;max-height:100vh;
  width:100%;height:100%}
.gal-lb::backdrop{background:rgba(9,18,28,.88)}
.gal-lb-inner{display:flex;flex-direction:column;height:100%;gap:10px;
  padding:14px 14px 18px}
/* The viewer holds a 4:3 frame on a portrait phone, so stretching the image to
   fill the column leaves it letterboxed inside a box twice its height. Size it
   to its own ratio and centre it in the space instead.
   .is-zoom is the second tap: the frames are infographics, and fit-to-width on a
   375px screen is too small to read, so actual size with panning is the point of
   opening the viewer at all. */
.gal-lb-stage{flex:1 1 auto;min-height:0;display:flex;align-items:center;
  justify-content:center;overflow:auto;-webkit-overflow-scrolling:touch}
.gal-lb img{max-width:100%;max-height:100%;width:auto;height:auto;
  border-radius:10px;cursor:zoom-in}
.gal-lb-stage.is-zoom{align-items:flex-start;justify-content:flex-start}
.gal-lb-stage.is-zoom img{max-width:none;max-height:none;width:1000px;
  cursor:zoom-out;border-radius:0}
.gal-lb-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  color:#fff;font-size:13px}
.gal-lb-close{flex:none;width:38px;height:38px;display:flex;align-items:center;
  justify-content:center;border-radius:50%;border:1px solid rgba(255,255,255,.35);
  background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:19px;line-height:1}
.gal-lb-close:hover{background:rgba(255,255,255,.2)}
.gal-lb-strip{display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;flex:none}
.gal-lb-strip button{flex:none;width:52px;padding:0;border:2px solid transparent;
  border-radius:6px;overflow:hidden;background:none;cursor:pointer;opacity:.6}
.gal-lb-strip button.is-active{opacity:1;border-color:#fff}
.gal-lb-strip img{width:100%;height:auto;aspect-ratio:4/3;object-fit:cover;border-radius:0}
@media (min-width:760px){
  .gal-lb-inner{padding:26px 26px 22px;max-width:1100px;margin:0 auto}
}

/* --- browse by category ---------------------------------------------------
   The homepage offered no way to browse from the body: one category in the nav,
   three in the footer, none in the page itself. */
.cat-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.cat-card{display:flex;flex-direction:column;gap:7px;padding:22px 22px 20px;
  background:var(--paper);border:1px solid var(--grey-300);border-radius:12px;
  text-decoration:none;color:inherit;
  transition:border-color .18s var(--ease),transform .18s var(--ease)}
.cat-card:hover{border-color:var(--primary);transform:translateY(-2px);text-decoration:none}
.cat-name{font-family:var(--display);font-weight:600;font-size:18px;letter-spacing:-.01em;
  color:var(--primary)}
.cat-blurb{font-size:14px;color:var(--grey-600);line-height:1.5}
.cat-count{font-size:12px;font-weight:600;letter-spacing:.05em;text-transform:uppercase;
  color:var(--grey-600);margin-top:auto;padding-top:8px}
/* Announced but not stocked. Muted rather than hidden: it signals range without
   competing with a category you can actually buy from today. */
.cat-card.is-soon{background:var(--paper-warm);border-style:dashed}
.cat-card.is-soon .cat-name{color:var(--grey-600)}
.cat-card.is-soon .cat-count{color:var(--accent-t1)}

/* Homepage hero shot, replacing the invented dashboard mock. */
.hero-shot{display:block;text-decoration:none;color:inherit}
.hero-shot img{display:block;width:100%;height:auto;border-radius:14px;
  border:1px solid var(--grey-300);box-shadow:var(--shadow)}
.hero-shot-cap{display:inline-block;margin-top:10px;font-size:13px;font-weight:500;
  color:var(--primary)}
.hero-shot:hover .hero-shot-cap{text-decoration:underline}

/* --- free calculator ------------------------------------------------------
   Benchmark §8. Open on its own URL, never gated: a form in front of it would
   make it unrankable, unlinkable and uncitable, which is the whole point of
   building it. */
.calc-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}
.calc-field{display:flex;flex-direction:column;gap:6px}
.calc-field label{font-family:var(--display);font-weight:600;font-size:14px;color:var(--primary)}
.calc-field input{font-family:var(--body);font-size:20px;font-variant-numeric:tabular-nums;
  padding:11px 13px;border:1px solid var(--grey-300);border-radius:9px;background:var(--paper);
  color:var(--ink);width:100%}
.calc-field input:focus-visible{outline:2px solid var(--primary);outline-offset:1px;
  border-color:var(--primary)}
.calc-hint{font-size:12.5px;color:var(--grey-600);line-height:1.5}
.calc-rate{display:flex;align-items:center;gap:0}
.calc-prefix{font-size:20px;color:var(--grey-600);padding:11px 2px 11px 13px;
  border:1px solid var(--grey-300);border-right:0;border-radius:9px 0 0 9px;background:var(--paper)}
.calc-rate input{border-radius:0 9px 9px 0}
.rate-preset{font:inherit;font-size:12px;font-weight:600;color:var(--primary);
  background:var(--primary-soft);border:0;border-radius:999px;padding:2px 9px;margin-right:4px;
  cursor:pointer}
.rate-preset:hover{background:var(--grey-300)}

.calc-out{display:grid;gap:1px;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  background:var(--grey-300);border:1px solid var(--grey-300);border-radius:12px;
  overflow:hidden;margin:26px 0 20px}
.calc-out > div{background:var(--primary-soft);padding:17px 19px}
.calc-out dt{font-size:12px;font-weight:600;letter-spacing:.06em;text-transform:uppercase;
  color:var(--grey-600);margin:0 0 6px}
.calc-out dd{margin:0;font-family:var(--display);font-weight:800;font-size:26px;
  letter-spacing:-.01em;color:var(--primary);font-variant-numeric:tabular-nums}
.calc-note{font-size:13.5px;color:var(--grey-600);line-height:1.6;
  border-left:3px solid var(--accent);padding-left:15px;margin:0}

/* Current deal. A statement about the destination, not a reference price:
   the list price here is almost never charged, so a struck-through "was"
   figure would be a claim the site cannot substantiate. */
.deal{display:inline-flex;align-items:center;gap:5px;margin-left:10px;
  font-size:12.5px;font-weight:600;letter-spacing:.01em;
  color:var(--accent-t1);background:#FDF3E3;border:1px solid #F5DDB4;
  border-radius:999px;padding:3px 10px;white-space:nowrap}
@media (max-width:520px){.deal{margin-left:0;margin-top:8px}}