/* Beniwal Systems — landing page v2 · design system v3.0 "Structure & Thread"
   Every value is a token from tokens.css (generated by 02-brand/color-type/build_tokens.py).
   No hex in this file. Light-first; the closing band is the one asset-mode (navy) surface. */

*{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--text-body-family);
     font-size:var(--text-body-size);line-height:var(--text-body-line);-webkit-font-smoothing:antialiased}
p{margin:0}
h1,h2,h3{font-family:var(--font-display);margin:0;letter-spacing:-.01em;color:var(--ink)}
.wrap{max-width:var(--layout-max);margin:0 auto;padding-left:var(--layout-pad-mobile);padding-right:var(--layout-pad-mobile)}
@media(min-width:760px){.wrap{padding-left:var(--layout-pad-tablet);padding-right:var(--layout-pad-tablet)}}
@media(min-width:1100px){.wrap{padding-left:var(--layout-pad-desktop);padding-right:var(--layout-pad-desktop)}}

.label{font-family:var(--font-data);font-size:var(--text-label-size);line-height:var(--text-label-line);
       font-weight:var(--text-label-weight);letter-spacing:var(--text-label-tracking);text-transform:uppercase;color:var(--ink-muted)}
a{color:var(--link);text-decoration-color:var(--link-line);text-underline-offset:3px}
a:hover{text-decoration-color:var(--ink)}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
[tabindex="-1"]:focus{outline:none}
.skip{position:absolute;left:-9999px;top:0;z-index:10;background:var(--surface);padding:var(--space-2) var(--space-3)}
.skip:focus{left:var(--space-4);top:var(--space-4)}
.thread{position:absolute;left:0;top:0;bottom:0;width:var(--line-thread);background:var(--thread)}

/* ── top ─────────────────────────────────────────────────────────────── */
.top{padding-top:var(--space-5);padding-bottom:var(--space-5)}
.top img{display:block;height:40px;width:auto}

/* ── hero: headline + the tool ───────────────────────────────────────── */
.hero{position:relative;border-top:1px solid var(--border);border-bottom:1px solid var(--border)}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,480px);gap:var(--space-8);align-items:start;
           padding-top:var(--space-8);padding-bottom:var(--space-9)}
@media(max-width:980px){.hero-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-6);
                                   padding-top:var(--space-6);padding-bottom:var(--space-8)}}
.pitch .label{margin-bottom:var(--space-4)}
h1{font-size:var(--text-display-size);line-height:var(--text-display-line);font-weight:var(--text-display-weight);
   max-width:18ch;text-wrap:balance}
@media(max-width:760px){h1{font-size:var(--text-h1-size);line-height:var(--text-h1-line)}}
.lede{font-size:var(--text-body-lg-size);line-height:var(--text-body-lg-line);color:var(--ink-muted);max-width:52ch;margin-top:var(--space-5)}
.needs{margin:var(--space-7) 0 0;display:grid}
.needs div{display:grid;grid-template-columns:96px 1fr;gap:var(--space-4);align-items:baseline;
           padding:var(--space-3) 0;border-top:1px solid var(--border)}
.needs div:last-child{border-bottom:1px solid var(--border)}
.needs dd{margin:0}
@media(max-width:980px){.needs{display:none}}      /* on a phone the tool follows the headline directly */

.tool{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6)}
@media(max-width:760px){.tool{padding:var(--space-5)}}
.privacy{margin:var(--space-3) 0 var(--space-5);padding:var(--space-3) 0;border-top:1px solid var(--border);
         border-bottom:1px solid var(--border);font-weight:600}
.fields{display:flex;flex-direction:column;gap:var(--space-4)}
.field label{display:flex;gap:var(--space-2);align-items:baseline;font-weight:600}
.field .n{font-family:var(--font-data);font-weight:500;font-size:var(--text-label-size);color:var(--ink-muted);min-width:2em}
.help{font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--ink-muted);margin:2px 0 var(--space-2)}
.inp{width:100%;height:44px;padding:0 14px;border:1px solid var(--border-control);border-radius:var(--radius-sm);
     background:var(--surface);color:var(--ink);font-family:var(--font-data);font-size:var(--text-body-size);
     font-variant-numeric:tabular-nums}
.inp-text{font-family:var(--font-text);margin-top:var(--space-2)}
.inp::placeholder{color:var(--ink-muted)}
.inp:focus{outline:2px solid var(--focus);outline-offset:2px}
.inp[aria-invalid="true"]{border:2px solid var(--critical-line)}
.echo{font-family:var(--font-data);font-size:var(--text-label-size);line-height:var(--text-label-line);
      color:var(--ink-muted);min-height:var(--text-label-line);margin-top:var(--space-1);font-variant-numeric:tabular-nums}
.err,.status{display:flex;gap:var(--space-2);align-items:baseline;margin-top:var(--space-1);
             font-size:var(--text-small-size);line-height:var(--text-small-line)}
.err{color:var(--critical-fg)}
.tag{font-family:var(--font-data);font-weight:500;font-size:var(--text-label-size);letter-spacing:var(--text-label-tracking);
     text-transform:uppercase;white-space:nowrap}
.actions{display:flex;flex-wrap:wrap;gap:var(--space-3) var(--space-5);align-items:center;margin-top:var(--space-5)}
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:10px var(--space-5);border:none;
     line-height:1.3;text-align:center;
     border-radius:var(--radius-sm);cursor:pointer;background:var(--action);color:var(--action-ink);
     font-family:var(--font-text);font-weight:600;font-size:var(--text-body-size);text-decoration:none;
     transition:background var(--motion-fast) var(--ease-settle)}
.btn:hover{background:var(--action-hover);color:var(--action-ink)}
.btn:active{background:var(--action-pressed)}
.btn[disabled]{opacity:.55;cursor:default}
.actions .btn{flex:1 1 200px}
.linkbtn{background:none;border:none;padding:var(--space-2) 0;cursor:pointer;font-family:var(--font-text);
         font-size:var(--text-small-size);color:var(--link);text-decoration:underline;
         text-decoration-color:var(--link-line);text-underline-offset:3px}
.toolfoot{margin-top:var(--space-5);padding-top:var(--space-4);border-top:1px solid var(--border);
          font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--ink-muted)}

/* ── result ──────────────────────────────────────────────────────────── */
.result{padding-top:var(--space-8);padding-bottom:var(--space-9);border-bottom:1px solid var(--border);
        animation:reveal var(--motion-slow) var(--ease-settle)}
@keyframes reveal{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.result-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,400px);gap:var(--space-8);align-items:start}
@media(max-width:1060px){.result-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-7)}}
.read h2{font-size:var(--text-h3-size);line-height:var(--text-h3-line);font-weight:var(--text-h3-weight);margin:var(--space-2) 0 var(--space-4)}
.figure{font-family:var(--font-display);font-weight:700;font-size:var(--text-display-size);line-height:var(--text-display-line);letter-spacing:-.02em}
.figcap{margin:var(--space-1) 0 var(--space-5)}
.sample-note{margin:0 0 var(--space-4)}
.read p{max-width:var(--layout-text);margin-bottom:var(--space-4)}
.read b,.read strong{font-weight:600}
.scope{padding-left:var(--space-4);border-left:var(--line-thread) solid var(--thread)}
.tablewrap{overflow-x:auto;margin-top:var(--space-6)}
.bk{border-collapse:collapse;width:100%;min-width:600px;background:var(--surface)}
.bk caption{text-align:left;padding-bottom:var(--space-3)}
.bk th{font-family:var(--font-data);font-size:var(--text-label-size);font-weight:500;letter-spacing:var(--text-label-tracking);
       text-transform:uppercase;color:var(--ink-muted);text-align:left;padding:var(--space-3);
       border-bottom:var(--line-rule) solid var(--thread)}
.bk td{padding:var(--space-3);border-bottom:1px solid var(--border);vertical-align:top}
.bk .no{font-family:var(--font-data);font-size:var(--text-small-size);color:var(--ink-muted);width:3.5em}
.bk .n{text-align:right;font-family:var(--font-data);font-variant-numeric:tabular-nums;white-space:nowrap}
.bk .basis{font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--ink-muted);width:38%}
.bk tr.sum td{font-weight:600}
.bk tr.sum td.basis,.bk tr.sum td.no{font-weight:400}
.bk .basis-inline{display:none}
/* phone: three columns that fit — the basis folds in under each line instead of scrolling off-screen */
@media(max-width:620px){
  .bk{min-width:0}
  .bk th:nth-child(4),.bk td.basis{display:none}
  .bk th,.bk td{padding:var(--space-3) var(--space-2)}
  .bk .no{width:2.5em}
  .bk .basis-inline{display:block;margin-top:var(--space-1);font-weight:400;font-size:var(--text-small-size);
                    line-height:var(--text-small-line);color:var(--ink-muted)}
}

.capture{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-6)}
@media(max-width:760px){.capture{padding:var(--space-5)}}
.capture h2{font-size:var(--text-h3-size);line-height:var(--text-h3-line);font-weight:var(--text-h3-weight);margin:var(--space-2) 0 var(--space-3)}
.capture-lede{color:var(--ink-muted);margin-bottom:var(--space-3)}
.capture-note{font-size:var(--text-small-size);line-height:var(--text-small-line);margin-bottom:var(--space-5)}
.capture .btn{width:100%;margin-top:var(--space-2)}
.status.ok{color:var(--success-fg)}
.status.err{color:var(--critical-fg)}
.fine{margin-top:var(--space-4);font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--ink-muted)}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}

/* ── sections ────────────────────────────────────────────────────────── */
.section{padding-top:var(--space-9);padding-bottom:var(--space-9)}
.section + .section{border-top:1px solid var(--border)}
@media(max-width:760px){.section{padding-top:var(--space-8);padding-bottom:var(--space-8)}}
h2.sec{font-size:var(--text-h2-size);line-height:var(--text-h2-line);font-weight:var(--text-h2-weight);
       margin:var(--space-2) 0 var(--space-5);max-width:24ch}
.seclede{font-size:var(--text-body-lg-size);line-height:var(--text-body-lg-line);color:var(--ink-muted);
         max-width:var(--layout-text);margin-bottom:var(--space-6)}
.proof{list-style:none;margin:0;padding:0;max-width:var(--layout-text)}
.proof li{display:grid;grid-template-columns:96px 1fr;gap:var(--space-4);padding:var(--space-4) 0;border-top:1px solid var(--border)}
.proof li:last-child{border-bottom:1px solid var(--border)}
.proof .label{padding-top:4px}
.notfor{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:var(--space-7);max-width:1000px}
@media(max-width:760px){.notfor{grid-template-columns:minmax(0,1fr)}}
.notfor li{position:relative;padding:var(--space-3) 0 var(--space-3) var(--space-6);border-top:1px solid var(--border)}
.notfor li::before{content:"";position:absolute;left:0;top:calc(var(--space-3) + 12px);width:12px;height:var(--line-rule);background:var(--ink-muted)}
.sheets{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5)}
@media(max-width:1100px){.sheets{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.sheets{grid-template-columns:minmax(0,1fr)}}
.sheets li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);padding:var(--space-5)}
.sheets h3{font-size:var(--text-h4-size);line-height:var(--text-h4-line);font-weight:var(--text-h4-weight);margin:var(--space-3) 0 var(--space-2)}
.sheets li p:last-child{color:var(--ink-muted)}
.after{margin-top:var(--space-7)}

/* ── the navy band ───────────────────────────────────────────────────── */
.band{position:relative;overflow:hidden;background:var(--bg);color:var(--ink)}
.band .structure{position:absolute;right:0;top:0;width:50%;height:100%;pointer-events:none}
.band .structure line{stroke:var(--draw-hairline);stroke-width:2;vector-effect:non-scaling-stroke}
.band .structure rect{fill:var(--surface)}
@media(max-width:860px){.band .structure{display:none}}
.band-inner{position:relative;padding-top:var(--space-9);padding-bottom:var(--space-9)}
.band h2{font-size:var(--text-h1-size);line-height:var(--text-h1-line);font-weight:700;max-width:16ch;margin:var(--space-3) 0 var(--space-6)}
@media(max-width:760px){.band h2{font-size:var(--text-h2-size);line-height:var(--text-h2-line)}}

/* ── footer ──────────────────────────────────────────────────────────── */
footer{border-top:1px solid var(--border);background:var(--surface)}
.foot{display:flex;justify-content:space-between;align-items:flex-end;gap:var(--space-5);flex-wrap:wrap;
      padding-top:var(--space-6);padding-bottom:var(--space-4)}
.foot p:not(.label){font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--ink-muted);margin-bottom:var(--space-1)}
.social a{white-space:nowrap}
.disclaimer{padding-bottom:var(--space-7);font-size:var(--text-small-size);line-height:var(--text-small-line);color:var(--ink-muted)}

/* ── v3 · hero, problem cards, offer blocks (30 Sep 2026) ─────────────────
   v3 moved the tool out of the hero, so the hero is single-column and the tool now shares an
   .offer-grid with its own explainer, the same shape the Playbook and Billing OS blocks use.
   Square by default, radius 4 on cards, hairline rules, mono caps labels — design system v3.0. */
.hero-single{padding-top:var(--space-8);padding-bottom:var(--space-9)}
@media(max-width:980px){.hero-single{padding-top:var(--space-6);padding-bottom:var(--space-8)}}
.hero-single h1{max-width:24ch}
.cta-row{display:flex;flex-wrap:wrap;gap:var(--space-4) var(--space-6);align-items:center;margin-top:var(--space-7)}

/* six problem cards — three up, two up at 1100, one up on a phone */
.cards{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--space-5)}
@media(max-width:1100px){.cards{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:620px){.cards{grid-template-columns:minmax(0,1fr)}}
.cards li{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius-md);
          padding:var(--space-5);display:flex;flex-direction:column}
.cards h3{font-size:var(--text-h4-size);line-height:var(--text-h4-line);font-weight:var(--text-h4-weight);
          margin:var(--space-3) 0 var(--space-2)}
.cards li > p:not(.fix):not(.label){color:var(--ink-muted)}
/* the answer sits at the bottom of every card, on a hairline, so the six line up across the row */
.cards li > p.fix{margin-top:auto;padding-top:var(--space-4);border-top:1px solid var(--border)}
.cards .fix .label{display:block;margin-bottom:var(--space-1)}

/* an offer block: explainer left, the form (or the tool) right */
.offer-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,440px);gap:var(--space-8);align-items:start}
@media(max-width:1060px){.offer-grid{grid-template-columns:minmax(0,1fr);gap:var(--space-6)}}
.offer-grid .seclede + .seclede{margin-top:var(--space-4)}

/* ── v3.1 · nav + the systems table (2 Oct 2026) ──────────────────────────
   Nav replaces the old "no nav bar" rule with its intent: max 3 text links, no dropdown, no
   sticky, and every page keeps exactly one primary CTA (marked data-cta="primary").
   check-landing.py enforces all of that on every page. */
.top{display:flex;align-items:center;justify-content:space-between;gap:var(--space-5);flex-wrap:wrap}
.nav{display:flex;gap:var(--space-5);align-items:center}
.nav a{font-family:var(--font-data);font-size:var(--text-label-size);letter-spacing:.06em;
       text-transform:uppercase;color:var(--ink-muted);text-decoration:none}
.nav a:hover,.nav a[aria-current="page"]{color:var(--ink)}
.nav a[aria-current="page"]{box-shadow:inset 0 -2px 0 var(--thread)}
@media(max-width:520px){.nav{gap:var(--space-4)}}

/* status rows — one line per system, status as a mono tag, never colour alone */
.pillar{margin-top:var(--space-8)}
.pillar + .pillar{margin-top:var(--space-9)}
.sys{list-style:none;margin:var(--space-5) 0 0;padding:0}
.sys li{display:grid;grid-template-columns:200px 150px minmax(0,1fr);gap:var(--space-5);
        padding:var(--space-4) 0;border-top:1px solid var(--border);align-items:baseline}
.sys li:last-child{border-bottom:1px solid var(--border)}
@media(max-width:860px){.sys li{grid-template-columns:minmax(0,1fr);gap:var(--space-2)}}
.sys h3{font-size:var(--text-body-size);line-height:var(--text-body-line);font-weight:600;margin:0}
.sys p{margin:0;color:var(--ink-muted)}
.stat{font-family:var(--font-data);font-size:var(--text-label-size);letter-spacing:.06em;
      text-transform:uppercase;color:var(--ink);white-space:nowrap}
.stat::before{content:"";display:inline-block;width:10px;height:var(--line-rule);
              background:var(--ink-muted);margin-right:var(--space-2);vertical-align:middle}
.stat-built::before{background:var(--thread);height:var(--line-member)}
.stat-planned{color:var(--ink-muted)}
/* the status key — defined once, above the pillars */
.key{list-style:none;margin:var(--space-5) 0 0;padding:0;display:grid;
     grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--space-5);max-width:1000px}
@media(max-width:860px){.key{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.key{grid-template-columns:minmax(0,1fr)}}
.key li{border-top:1px solid var(--border);padding-top:var(--space-3)}
.key p{margin:var(--space-2) 0 0;color:var(--ink-muted);font-size:var(--text-small-size);
       line-height:var(--text-small-line)}
/* prose blocks on /about and the Life note */
.prose{max-width:var(--layout-text)}
.prose p + p{margin-top:var(--space-4)}
.rule-list{list-style:none;margin:var(--space-5) 0 0;padding:0;max-width:var(--layout-text)}
.rule-list li{padding:var(--space-4) 0;border-top:1px solid var(--border)}
.rule-list li:last-child{border-bottom:1px solid var(--border)}
.rule-list b{display:block;margin-bottom:var(--space-1)}