/* Landing page components. Mobile first, dark only. Needs css/tokens.css. Fifteen components:
   top bar, portrait chip, eyebrow, display heading, lede, buttons, text link, proof tile, artifact card,
   step rail, fit cards, engagement card, quote card, form fields, FAQ, sticky bar, consent strip, footer.
   The block between the critical markers is inlined into the landing page head by tests/t4-inline-critical.mjs. */

/*critical:start*/
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:80px}
body{margin:0;background:var(--c-bg);color:var(--c-body);font:400 var(--fs-body)/var(--lh-body) var(--f-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
[hidden]{display:none!important}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,figure,blockquote{margin:0}
ul,ol{padding:0;list-style:none}
a{color:var(--c-amber);text-underline-offset:.2em}
a:hover{color:var(--c-amber-hover)}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset);border-radius:4px}
.skip{position:absolute;left:var(--sp-4);top:-80px;z-index:var(--z-overlay);background:var(--c-amber);color:var(--c-on-amber);padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);font-weight:600}
.skip:focus{top:var(--sp-3)}
.wrap{width:100%;max-width:calc(var(--container) + 2*var(--gutter));margin-inline:auto;padding-inline:var(--gutter)}

.topbar{position:sticky;top:0;z-index:var(--z-bar);height:64px;background:rgba(10,10,11,.92);border-bottom:1px solid var(--c-border);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.topbar .wrap{height:100%;display:flex;align-items:center;justify-content:space-between;gap:var(--sp-4)}
.brand{font:500 20px/1 var(--f-display);color:var(--c-ink);letter-spacing:-.01em}
.brand i{font-style:normal;color:var(--c-amber)}

.btn{display:inline-flex;align-items:center;justify-content:center;text-align:center;gap:var(--sp-2);min-height:48px;padding:12px 24px;border:0;border-radius:var(--r-pill);background:var(--c-amber);color:var(--c-on-amber);font:600 16px/1.25 var(--f-body);text-decoration:none;cursor:pointer;transition:background var(--dur-1) var(--ease),box-shadow var(--dur-1) var(--ease)}
.btn:hover{background:var(--c-amber-hover);color:var(--c-on-amber)}
.btn:focus-visible{outline-offset:4px}
.btn--primary{min-height:56px;padding-inline:28px}
.btn--sm{min-height:44px;padding:10px 20px;font-size:15px}
.btn--block{display:flex;width:100%}

.hero{padding:var(--sp-5) 0 var(--sp-6)}
.hero__grid{display:grid;gap:var(--sp-7)}
.chip{display:flex;align-items:center;gap:var(--sp-3);margin-bottom:var(--sp-4)}
.chip img{width:48px;height:48px;border-radius:50%;border:1px solid rgba(232,182,90,.45);object-fit:cover}
.chip p{display:grid;line-height:1.3;font-size:var(--fs-small)}
.chip strong{color:var(--c-ink);font-weight:600;font-size:15px}
.eyebrow{font:600 var(--fs-eyebrow)/1.3 var(--f-body);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--c-amber);margin-bottom:var(--sp-3)}
h1,.h1{font:500 var(--fs-h1)/var(--lh-display) var(--f-display);letter-spacing:var(--track-display);color:var(--c-ink);text-wrap:balance}
h1 em,h2 em{font-style:italic;color:var(--c-amber)}
.lede{font-size:var(--fs-lede);line-height:var(--lh-lede);color:var(--c-body);margin-top:var(--sp-4);max-width:34em}
.hero__cta{margin-top:var(--sp-5)}
.micro{margin-top:var(--sp-3);font-size:var(--fs-small);color:var(--c-faint);text-align:center}
.hero__card{display:none}
@media (min-width:480px){.hero .btn--primary{width:auto}.micro{text-align:left}}
@media (max-width:479px){.hero .btn--primary{width:100%}}
@media (min-width:1100px){
  .hero{padding:var(--sp-8) 0 var(--sp-9)}
  .hero__grid{grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:center;gap:var(--sp-8)}
  .chip{display:none}
  .hero__card{display:block;position:relative;border:1px solid rgba(232,182,90,.35);border-radius:var(--r-md);overflow:hidden;background:var(--c-card);box-shadow:var(--sh-1)}
  .hero__card img{width:100%}
  .hero__card figcaption{position:absolute;left:0;right:0;bottom:0;padding:var(--sp-7) var(--sp-5) var(--sp-5);background:linear-gradient(to top,rgba(10,10,11,.92),rgba(10,10,11,0));display:grid;gap:2px;font-size:var(--fs-small)}
  .hero__card strong{font:500 22px/1.2 var(--f-display);color:var(--c-ink)}
}

/* proof tile */
.proof{padding:var(--sp-7) 0}
.proof__grid{display:grid;gap:var(--sp-4)}
.tile{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--sp-5);display:grid;gap:var(--sp-2);align-content:start}
.tile p{color:var(--c-ink);font-size:17px;line-height:1.45}
.tile .label{font:600 12px/1.3 var(--f-body);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--c-faint)}
.tile[hidden]{display:none}
@media (min-width:768px){.proof__grid{grid-template-columns:repeat(3,1fr)}}
/*critical:end*/

/* sections */
.section{padding:var(--section-y) 0;border-top:1px solid var(--c-border)}
.section--raised{background:var(--c-raised)}
.head{max-width:var(--reading);margin-bottom:var(--sp-7)}
.head .eyebrow{margin-bottom:var(--sp-3)}
h2{font:500 var(--fs-h2)/var(--lh-heading) var(--f-display);letter-spacing:var(--track-display);color:var(--c-ink);text-wrap:balance}
h3,.h3{font:500 var(--fs-h3)/1.25 var(--f-display);color:var(--c-ink)}
.h3{letter-spacing:normal}
.head p{margin-top:var(--sp-4);font-size:var(--fs-lede);line-height:var(--lh-lede)}
.note{font-size:var(--fs-small);color:var(--c-faint)}
.note.after{margin-top:var(--sp-5)}
.plain .alt{margin-top:var(--sp-6)}

/* problem list */
.said{display:grid;gap:var(--sp-5);counter-reset:s}
.said li{counter-increment:s;display:grid;grid-template-columns:auto 1fr;gap:var(--sp-4);align-items:baseline;padding-bottom:var(--sp-5);border-bottom:1px solid var(--c-border)}
.said li::before{content:counter(s,decimal-leading-zero);font:600 var(--fs-numeral)/1 var(--f-display);color:var(--c-amber)}
.said p{font:500 clamp(20px,17.5px + .7vw,26px)/1.3 var(--f-display);color:var(--c-ink)}

/* artifact card */
.cards{display:grid;gap:var(--sp-4)}
.card{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--sp-5);display:grid;gap:var(--sp-3);align-content:start}
.card .tag{justify-self:start;font:600 12px/1 var(--f-body);letter-spacing:var(--track-eyebrow);text-transform:uppercase;color:var(--c-amber);border:1px solid rgba(232,182,90,.4);border-radius:var(--r-pill);padding:6px 10px}
.card p{font-size:16px}

/* numbered step rail */
.steps{display:grid;gap:0;counter-reset:st}
.steps li{counter-increment:st;position:relative;padding:0 0 var(--sp-6) 64px}
.steps li::before{content:counter(st);position:absolute;left:0;top:-4px;width:44px;text-align:center;font:600 36px/1 var(--f-display);color:var(--c-amber)}
.steps li::after{content:"";position:absolute;left:22px;top:44px;bottom:var(--sp-3);width:1px;background:var(--c-border-strong)}
.steps li:last-child{padding-bottom:0}
.steps li:last-child::after{display:none}
.steps h3{margin-bottom:var(--sp-2)}
.facts{margin-top:var(--sp-6);display:grid;gap:var(--sp-2)}
.facts li{padding-left:var(--sp-5);position:relative}
.facts li::before{content:"";position:absolute;left:0;top:.7em;width:10px;height:1px;background:var(--c-amber)}

/* fit card pair */
.fit{display:grid;gap:var(--sp-4)}
.fit .card h3{display:flex;align-items:center;gap:var(--sp-2)}
.fit ul{display:grid;gap:var(--sp-3)}
.fit li{padding-left:var(--sp-5);position:relative}
.fit li::before{content:"";position:absolute;left:0;top:.72em;width:10px;height:2px;border-radius:2px;background:var(--c-amber)}
.fit .not li::before{background:var(--c-faint)}
.fit .not{background:transparent}

/* engagement card */
.engage{max-width:var(--reading);background:var(--c-card);border:1px solid rgba(232,182,90,.35);border-radius:var(--r-md);padding:var(--sp-6);display:grid;gap:var(--sp-3)}
.engage .price{font:500 var(--fs-h3)/1.3 var(--f-display);color:var(--c-ink)}

/* quote card */
.quote{background:var(--c-card);border:1px solid var(--c-border);border-radius:var(--r-md);padding:var(--sp-6)}
.quote blockquote{font:italic 400 clamp(22px,19.5px + .7vw,26px)/1.35 var(--f-display);color:var(--c-ink)}
.quote blockquote::before{content:"\201C";display:block;font:600 56px/.6 var(--f-display);color:var(--c-amber);margin-bottom:var(--sp-3)}
.quote figcaption{margin-top:var(--sp-4);font-size:var(--fs-small)}

/* founder */
.founder{display:grid;gap:var(--sp-6);align-items:center}
.founder img{width:100%;max-width:360px;border-radius:var(--r-md);border:1px solid rgba(232,182,90,.35);background:var(--c-card)}
.founder h2{margin-bottom:var(--sp-4)}
.founder p+p{margin-top:var(--sp-4)}
.founder .where{color:var(--c-ink)}

/* form card and fields */
.formcard{max-width:var(--reading);margin-inline:auto;background:var(--c-card);border:1px solid var(--c-border-strong);border-radius:var(--r-md);padding:var(--sp-5);box-shadow:var(--sh-1)}
.formcard h2{margin-bottom:var(--sp-2)}
.fields{display:grid;gap:var(--sp-5);margin-top:var(--sp-5)}
.field{display:grid;gap:var(--sp-2)}
.field label{font:600 15px/1.3 var(--f-body);color:var(--c-ink)}
.field .opt{font-weight:400;color:var(--c-faint)}
.field input,.field select,.field textarea{width:100%;min-height:52px;padding:12px 14px;border:1px solid var(--c-border-strong);border-radius:var(--r-md);background:var(--c-raised);color:var(--c-ink);font:400 16px/1.4 var(--f-body);-webkit-appearance:none;appearance:none}
.field textarea{min-height:104px;resize:vertical}
.field select{padding-right:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' fill='none' stroke='%23e8b65a' stroke-width='2'%3E%3Cpath d='m1 1 5 5 5-5'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 16px center}
.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:0;border-color:var(--c-amber);box-shadow:var(--sh-focus)}
.field__err{display:none;font-size:var(--fs-small);color:var(--c-danger)}
.field input:user-invalid,.field select:user-invalid,.field textarea:user-invalid,.field .is-invalid{border-color:var(--c-danger)}
.field input:user-invalid~.field__err,.field select:user-invalid~.field__err,.field textarea:user-invalid~.field__err,.field .is-invalid~.field__err{display:block}
.hp{position:absolute!important;left:-9999px;width:1px;height:1px;overflow:hidden}
.formcard .btn{margin-top:var(--sp-6)}
.assure{margin-top:var(--sp-3);font-size:var(--fs-small);color:var(--c-faint);text-align:center}
.status{margin-top:var(--sp-3);font-size:15px;color:var(--c-ink)}
.status:empty{display:none}
.mailalt{margin-top:var(--sp-4);font-size:15px;text-align:center;color:var(--c-body)}
.warn{margin-top:var(--sp-4);padding:var(--sp-3) var(--sp-4);border:1px solid rgba(232,90,90,.5);border-radius:var(--r-md);color:var(--c-ink);font-size:15px}

/* FAQ on native details */
.faq{max-width:var(--reading)}
.faq details{border-bottom:1px solid var(--c-border-strong)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;align-items:center;gap:var(--sp-4);min-height:56px;padding:var(--sp-3) 0;font:500 19px/1.3 var(--f-display);color:var(--c-ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";flex:none;font:400 28px/1 var(--f-body);color:var(--c-amber)}
.faq details[open] summary::after{content:"\2212"}
.faq details p{padding:0 var(--sp-7) var(--sp-5) 0}

/* dock: sticky CTA at the bottom with the consent strip stacked above it; never over the hero button */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:var(--z-dock);display:flex;flex-direction:column-reverse;pointer-events:none}
.dock>*{pointer-events:auto}
.sticky{padding:var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));background:rgba(10,10,11,.96);border-top:1px solid var(--c-border-strong)}
.consent{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-3) var(--sp-4);padding:var(--sp-3) var(--gutter) calc(var(--sp-3) + env(safe-area-inset-bottom));background:var(--c-raised);border-top:1px solid var(--c-border-strong);font-size:var(--fs-small)}
.sticky:not([hidden])+.consent{padding-bottom:var(--sp-3)}
.consent p{flex:1 1 220px}
.consent div{display:flex;gap:var(--sp-2)}
.consent .btn{min-height:44px;padding:8px 18px;font-size:15px}
.btn--ghost{background:transparent;color:var(--c-ink);box-shadow:inset 0 0 0 1px var(--c-border-strong)}
.btn--ghost:hover{background:rgba(244,239,230,.06);color:var(--c-ink)}
.consent[hidden],.sticky[hidden]{display:none}
@media (min-width:768px){.sticky{display:none!important}}

/* footer */
.foot{padding:var(--sp-7) 0 calc(var(--sp-9) + env(safe-area-inset-bottom));border-top:1px solid var(--c-border);font-size:var(--fs-small)}
.foot .wrap{display:grid;gap:var(--sp-4)}
.foot ul{display:flex;flex-wrap:wrap;gap:0 var(--sp-5)}
.foot a,.foot button{display:inline-flex;align-items:center;min-height:44px;color:var(--c-body);text-decoration:underline;text-underline-offset:.2em}
.foot a:hover,.foot button:hover{color:var(--c-ink)}
.foot button{background:none;border:0;padding:0;font:inherit;cursor:pointer}

/* plain text pages (book, thanks) */
.plain{padding:var(--sp-8) 0 var(--sp-9)}
.plain .wrap{max-width:calc(var(--reading) + 2*var(--gutter))}
.plain h1{font-size:clamp(34px,26px + 2.2vw,52px)}
.plain .list{margin-top:var(--sp-6);display:grid;gap:var(--sp-5)}
.sched{margin-top:var(--sp-6);min-height:640px;border:1px solid var(--c-border-strong);border-radius:var(--r-md);overflow:hidden;background:var(--c-card)}
.sched iframe{width:100%;height:680px;border:0;display:block;background:#fff}
iframe.sched{display:block;width:100%;height:680px;border:1px solid var(--c-border-strong);border-radius:var(--r-md);background:#fff}
.sched[hidden]{display:none}
.plain .card+.card{margin-top:var(--sp-4)}

@media (min-width:768px){
  .proof__grid,.cards,.fit{grid-template-columns:repeat(3,1fr)}
  .fit{grid-template-columns:repeat(2,1fr)}
  .founder{grid-template-columns:5fr 7fr;gap:var(--sp-8)}
  .formcard{padding:var(--sp-7)}
  .fields .row{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5)}
  .steps{grid-template-columns:repeat(2,1fr);column-gap:var(--sp-7)}
  .steps li:nth-last-child(2)::after{display:none}
  .said{grid-template-columns:repeat(3,1fr);gap:var(--sp-6)}
  .said li{grid-template-columns:1fr;border-bottom:0;border-top:1px solid var(--c-border-strong);padding:var(--sp-5) 0 0}
}
@media (min-width:1100px){
  .steps{grid-template-columns:repeat(4,1fr);column-gap:var(--sp-5)}
  .steps li{padding:64px 0 0}
  .steps li::before{top:0;width:auto;text-align:left}
  .steps li::after{left:48px;right:calc(-1*var(--sp-5));top:22px;bottom:auto;width:auto;height:1px}
  .steps li:nth-last-child(2)::after{display:block}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important;animation:none!important}
}