/* ============================================================
   kristapatrick.com - components and layout
   Hand-written CSS, no build step, no framework. Netlify static.
   ============================================================ */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:104px}

/* The hidden attribute must beat every component display rule below it.
   Without this, .btn's display:inline-flex renders [hidden] buttons anyway. */
[hidden]{display:none !important}
body{
  margin:0; background:var(--ground); color:var(--ink);
  font-family:var(--text); font-size:var(--t-body); line-height:var(--lh-body);
  font-weight:400; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
img{max-width:100%; height:auto; display:block}
h1,h2,h3{margin:0; font-family:var(--display); font-weight:400; letter-spacing:-.012em;
         line-height:var(--lh-display); text-wrap:balance}
p{margin:0 0 var(--s-4)}
ul,ol{margin:0 0 var(--s-4); padding-left:1.25em}
li{margin-bottom:var(--s-2)}
li::marker{color:var(--ink-faint)}
em{font-style:italic}
strong{font-weight:600}
a{color:inherit}

/* focus: visible on every interactive element, never removed */
:focus-visible{outline:3px solid var(--signal); outline-offset:3px; border-radius:2px}
.skip{position:absolute; left:var(--s-4); top:-64px; z-index:var(--z-skip);
      background:var(--signal); color:var(--ground); padding:12px 18px; font-weight:600;
      text-decoration:none; transition:top var(--d-fast) var(--e-out)}
.skip:focus{top:var(--s-4)}

/* ---------- shell ---------- */
.shell{max-width:var(--shell); margin-inline:auto; padding-inline:var(--page-x)}
.measure{max-width:var(--measure)}
.sec{padding-block:clamp(72px,10vw,140px); position:relative}
.sec--tight{padding-block:clamp(56px,7vw,96px)}
.band{background:var(--ground); color:var(--ink)}

/* ---------- type roles ---------- */
.eyebrow{font-size:var(--t-eyebrow); font-weight:600; letter-spacing:.16em;
         text-transform:uppercase; color:var(--ink-faint); margin:0 0 var(--s-4)}
.eyebrow--signal{color:var(--signal)}
.d1{font-size:var(--t-d1); margin-bottom:var(--s-5)}
.d2{font-size:var(--t-d2); margin-bottom:var(--s-4)}
.d3{font-size:var(--t-d3); line-height:1.16; margin-bottom:var(--s-3)}
.lede{font-size:var(--t-lede); line-height:1.55; color:var(--ink-soft)}
.small{font-size:var(--t-small); line-height:1.6; color:var(--ink-soft)}
.micro{font-size:var(--t-micro); line-height:1.55; color:var(--ink-faint)}
.tnum{font-variant-numeric:tabular-nums}
.rule{height:1px; background:var(--rule); border:0; margin:0}

/* ---------- buttons: 48px min target ---------- */
.btn{display:inline-flex; align-items:center; justify-content:center; gap:10px;
     min-height:52px; padding:14px 26px; font-family:var(--text); font-size:16px;
     font-weight:600; letter-spacing:.005em; text-decoration:none; cursor:pointer;
     border:1px solid transparent; background:none; color:inherit;
     transition:background var(--d-fast) var(--e-out), color var(--d-fast) var(--e-out),
                border-color var(--d-fast) var(--e-out), transform var(--d-fast) var(--e-out)}
.btn:active{transform:translateY(1px)}
.btn--primary{background:var(--signal); color:#211A13; border-color:var(--signal)}
.btn--primary:hover{background:#BCC7A6; border-color:#BCC7A6}
.btn--ghost{border-color:var(--rule); color:var(--ink)}
.btn--ghost:hover{border-color:var(--ink-soft); background:var(--surface)}
.btn-row{display:flex; flex-wrap:wrap; gap:var(--s-3)}

.tlink{display:inline-flex; align-items:center; gap:8px; min-height:44px;
       font-weight:600; font-size:16px; color:var(--signal); text-decoration:none;
       border-bottom:1px solid transparent; transition:border-color var(--d-fast) var(--e-out)}
.tlink:hover{border-bottom-color:var(--signal)}
.tlink .arw{transition:transform var(--d-fast) var(--e-out)}
.tlink:hover .arw{transform:translateX(3px)}

/* ---------- nav: shrink + blur on scroll ---------- */
.nav{position:sticky; top:0; z-index:var(--z-nav); background:rgba(33,26,19,.72);
     backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
     border-bottom:1px solid transparent;
     transition:border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out)}
.nav.is-stuck{border-bottom-color:var(--rule); background:rgba(33,26,19,.94)}
.nav-in{display:flex; align-items:center; justify-content:space-between; gap:var(--s-5);
        max-width:var(--shell); margin-inline:auto; padding:var(--s-3) var(--page-x);
        transition:padding var(--d-base) var(--e-out)}
.nav.is-stuck .nav-in{padding-block:10px}
.brand{display:flex; align-items:center; gap:10px; text-decoration:none; min-height:44px}
.brand-mark{width:30px; height:30px; flex:0 0 30px}
.brand-name{font-family:var(--text); font-size:16px; font-weight:600; letter-spacing:.055em;
            text-transform:uppercase; color:var(--ink)}
.nav-links{display:flex; align-items:center; gap:var(--s-5); list-style:none; margin:0; padding:0}
.nav-links li{margin:0}
.nav-links a{font-size:15px; font-weight:500; color:var(--ink-soft); text-decoration:none;
             min-height:44px; display:inline-flex; align-items:center;
             transition:color var(--d-fast) var(--e-out)}
.nav-links a:hover{color:var(--ink)}
.nav-cta{padding:11px 20px; min-height:44px; font-size:15px}
@media (max-width:900px){ .nav-links{display:none} }

/* ---------- chapter rail (secondary, never the primary nav) ---------- */
.rail{position:fixed; right:18px; top:50%; transform:translateY(-50%); z-index:var(--z-rail);
      display:flex; flex-direction:column; gap:2px; align-items:flex-end}
.rail a{display:flex; align-items:center; gap:10px; padding:6px 2px; text-decoration:none;
        font-size:10.5px; font-weight:600; letter-spacing:.12em; text-transform:uppercase;
        color:var(--ink-faint); opacity:.6; min-height:28px;
        transition:opacity var(--d-base) var(--e-out), color var(--d-base) var(--e-out)}
.rail .lab{max-width:0; overflow:hidden; white-space:nowrap;
           transition:max-width var(--d-base) var(--e-out)}
.rail .tick{width:20px; height:2px; background:currentColor; flex:0 0 auto;
            transition:width var(--d-base) var(--e-out)}
.rail a:hover,.rail a:focus-visible{opacity:1; color:var(--ink)}
.rail a:hover .lab,.rail a:focus-visible .lab{max-width:170px}
.rail a[aria-current="true"]{opacity:1; color:var(--signal)}
.rail a[aria-current="true"] .tick{width:36px}
.rail a[aria-current="true"] .lab{max-width:170px}
@media (max-width:1180px){ .rail{display:none} }

/* ============================================================
   BEAT 1 - hero, the melt reveal
   Two stacked DOM plates. The top plate is masked away under the
   pointer to reveal the marked-up read beneath it.
   ============================================================ */
.hero{padding-top:clamp(48px,7vw,86px); padding-bottom:clamp(56px,8vw,110px)}
.hero-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr);
           gap:clamp(32px,5vw,72px); align-items:center}
@media (max-width:980px){ .hero-grid{grid-template-columns:1fr; gap:var(--s-7)} }

.hero h1{font-size:var(--t-hero); margin-bottom:var(--s-5)}
.hero h1 em{font-style:italic}
.hero .lede{max-width:46ch; margin-bottom:var(--s-6)}
.hero .btn-row{margin-bottom:var(--s-6)}

.byline{display:flex; align-items:center; gap:14px; padding-top:var(--s-5);
        border-top:1px solid var(--rule)}
.byline img{width:52px; height:52px; border-radius:50%; object-fit:cover; object-position:50% 22%;
            flex:0 0 52px; filter:saturate(.92)}
.byline-txt{font-size:var(--t-micro); color:var(--ink-faint); line-height:1.5}
.byline-txt b{display:block; font-size:15px; color:var(--ink); font-weight:600; letter-spacing:.01em}

/* --- the plates --- */
.reveal-stage{position:relative; aspect-ratio:4/4.5; border:1px solid var(--rule);
              background:var(--surface); overflow:hidden; cursor:crosshair;
              --mx:50%; --my:42%; --r:0px}
/* Both plates share one grid so every block sits in the SAME box on both
   layers. Without this the melt reveals text at a different height and the
   two layers read as garble instead of as an x-ray. */
.plate{position:absolute; inset:0; padding:clamp(18px,2.4vw,30px);
       display:grid; grid-template-rows:auto minmax(0,1fr) minmax(0,1.45fr); gap:12px}
.plate--cold{background:#261E15; z-index:2;
  -webkit-mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my), transparent 0 62%, #000 100%);
  mask-image:radial-gradient(circle var(--r) at var(--mx) var(--my), transparent 0 62%, #000 100%)}
.plate--read{background:var(--surface); z-index:1}

.plate-label{font-size:10.5px; font-weight:600; letter-spacing:.15em; text-transform:uppercase}
.plate--cold .plate-label{color:#7C736A}
.plate--read .plate-label{color:var(--signal)}

.mock{background:#1E170F; border:1px solid #362C20; padding:14px 16px}
.plate--read .mock{background:#251D14; border-color:#443828}
.mock-t{font-size:14px; font-weight:600; color:#8C8377; margin-bottom:5px; letter-spacing:.01em}
.plate--read .mock-t{color:var(--ink)}
.mock-u{font-size:11.5px; color:#5F584F; margin-bottom:8px; letter-spacing:.02em}
.mock-b{font-size:13px; line-height:1.55; color:#6B6459; margin:0}
.plate--read .mock-b{color:var(--ink-soft)}
.plate--read .mock-b mark{background:none; color:var(--ink);
  border-bottom:2px solid var(--signal); padding-bottom:1px}

.find{display:flex; gap:11px; align-items:flex-start; padding:9px 0;
      border-top:1px solid var(--rule-soft)}
.find-n{flex:0 0 22px; height:22px; border-radius:50%; background:var(--signal); color:#211A13;
        font-size:11.5px; font-weight:700; display:flex; align-items:center;
        justify-content:center; font-variant-numeric:tabular-nums; margin-top:1px}
.find-t{font-size:13px; line-height:1.5; color:var(--ink-soft); margin:0}
.find-t b{color:var(--ink); font-weight:600}

.reveal-hint{position:absolute; left:0; right:0; bottom:0; z-index:3; padding:9px 14px;
             background:linear-gradient(transparent,rgba(26,20,14,.94)); text-align:center;
             font-size:11.5px; letter-spacing:.1em; text-transform:uppercase;
             font-weight:600; color:var(--ink-faint); pointer-events:none}

/* toggle fallback, shown when the mask is unavailable or motion is reduced */
.reveal-toggle{display:none; margin-top:var(--s-3)}
.reveal-toggle .btn{min-height:44px; padding:10px 18px; font-size:14px}

@supports not ((mask-image:radial-gradient(#000,#000)) or (-webkit-mask-image:radial-gradient(#000,#000))){
  .plate--cold{display:none}
  .reveal-hint{display:none}
}
@media (prefers-reduced-motion:reduce){
  .reveal-stage{cursor:default}
  .plate--cold{-webkit-mask-image:none; mask-image:none; position:relative; inset:auto}
  .plate--read{position:relative; inset:auto}
  .reveal-stage{aspect-ratio:auto; display:grid; grid-template-columns:1fr 1fr}
  .reveal-hint{display:none}
}
@media (max-width:640px){
  .reveal-stage{aspect-ratio:3/4.3}
  .reveal-hint{font-size:10.5px}
}

/* ============================================================
   BEAT 2 - the line
   ============================================================ */
.line-sec{text-align:center}
.line-sec .d1{max-width:20ch; margin-inline:auto}
.line-draw{width:min(360px,60%); height:1px; background:var(--rule); margin:var(--s-7) auto 0;
           transform-origin:left center}
.js .line-draw{transform:scaleX(0); transition:transform 900ms var(--e-out)}
.js .line-draw.in{transform:scaleX(1)}

/* ============================================================
   BEAT 3 - symptoms
   ============================================================ */
.sym-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:var(--s-4);
          margin-block:var(--s-7)}
.sym{border-top:2px solid var(--rule); padding-top:var(--s-4)}
.sym .n{font-family:var(--display); font-size:30px; color:var(--signal); display:block;
        margin-bottom:6px; font-variant-numeric:tabular-nums}
.sym p{font-size:17px; color:var(--ink); margin:0}
.turn{border-left:2px solid var(--signal); padding-left:var(--s-5); max-width:54ch}
.turn .d3{margin-bottom:var(--s-3)}

/* ============================================================
   BEAT 4 - what the machine says + email capture
   ============================================================ */
.ev{display:grid; grid-template-columns:repeat(auto-fit,minmax(268px,1fr)); gap:var(--s-4);
    margin-block:var(--s-7)}
.ev-card{background:var(--surface); border:1px solid var(--rule); padding:var(--s-5);
         display:flex; flex-direction:column; gap:var(--s-3)}
.ev-card .hair{height:1px; background:var(--signal); width:34px}
.ev-q{font-size:var(--t-micro); font-weight:600; letter-spacing:.13em; text-transform:uppercase;
      color:var(--ink-faint); margin:0}
.ev-a{font-size:16px; line-height:1.55; color:var(--ink-soft); margin:0}
.ev-a b{color:var(--ink); font-weight:600}
.ev-belief{font-size:var(--t-micro); color:var(--ink-faint); margin:0; padding-top:var(--s-3);
           border-top:1px solid var(--rule-soft)}

.capture{background:var(--surface); border:1px solid var(--rule); border-left:3px solid var(--signal);
         padding:clamp(24px,3.4vw,44px); margin-top:var(--s-7)}
.capture .d3{margin-bottom:var(--s-3); max-width:24ch}
/* One grid for the whole row, three explicit bands: labels, boxes, hints.
   The fields dissolve into it so a hint under one box cannot shove that
   box out of line with its neighbour. */
.form-row{display:grid; grid-template-columns:1fr 1fr auto;
          column-gap:var(--s-3); row-gap:6px; margin-top:var(--s-5)}
.form-row .field{display:contents}
.form-row .field label{grid-row:1}
.form-row .field input{grid-row:2}
.form-row .field .hint{grid-row:3}
.form-row .f-site  label,.form-row .f-site  input,.form-row .f-site  .hint{grid-column:1}
.form-row .f-email label,.form-row .f-email input,.form-row .f-email .hint{grid-column:2}
.form-row>.btn{grid-column:3; grid-row:2}

@media (max-width:820px){
  .form-row{display:flex; flex-direction:column; gap:var(--s-4)}
  .form-row .field{display:flex; flex-direction:column; gap:6px}
  .form-row>.btn{width:100%}
}
.field{display:flex; flex-direction:column; gap:6px}
.field label{font-size:var(--t-micro); font-weight:600; letter-spacing:.09em;
             text-transform:uppercase; color:var(--ink-faint)}
.field input{min-height:52px; padding:13px 15px; font-family:var(--text); font-size:16px;
             color:var(--ink); background:var(--ground); border:1px solid var(--rule);
             border-radius:0; transition:border-color var(--d-fast) var(--e-out)}
.field input::placeholder{color:#6E665C}
.field input:hover{border-color:var(--ink-faint)}
.field input:focus{border-color:var(--signal); outline-offset:1px}
.field .hint{font-size:var(--t-micro); color:var(--ink-faint)}
.form-note{margin:var(--s-4) 0 0; font-size:var(--t-micro); color:var(--ink-faint)}

/* ============================================================
   BEAT 5 - the seven stages, scroll-snap
   ============================================================ */
.stages{display:flex; gap:var(--s-4); overflow-x:auto; scroll-snap-type:x mandatory;
        padding-block:var(--s-2) var(--s-5); margin-top:var(--s-7);
        scrollbar-width:thin; scrollbar-color:var(--rule) transparent}
.stage{scroll-snap-align:start; flex:0 0 min(320px,78vw); background:var(--surface);
       border:1px solid var(--rule); padding:var(--s-5); display:flex; flex-direction:column; gap:var(--s-3);
       transition:transform var(--d-base) var(--e-out), border-color var(--d-base) var(--e-out),
                  background var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out)}
.stage:hover,.stage:focus-within{transform:translateY(-6px); border-color:var(--signal);
       background:var(--surface-2); box-shadow:0 18px 44px -22px rgba(0,0,0,.75)}
@media (prefers-reduced-motion:reduce){
  .stage{transition:border-color var(--d-base) var(--e-out), background var(--d-base) var(--e-out)}
  .stage:hover,.stage:focus-within{transform:none; box-shadow:none}
}
.stage-n{font-family:var(--display); font-size:44px; line-height:1; color:var(--signal);
         font-variant-numeric:tabular-nums}
.stage h3{font-size:20px; font-family:var(--text); font-weight:600; letter-spacing:0; line-height:1.35}
.stage p{font-size:15px; color:var(--ink-soft); margin:0}
.stages-hint{font-size:var(--t-micro); color:var(--ink-faint); margin:0}

/* ============================================================
   BEAT 6 - proof, on paper
   ============================================================ */
.on-paper{background:var(--paper); color:var(--paper-ink)}
.proof-grid{display:grid; grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr); gap:clamp(28px,4vw,64px);
            align-items:start}
@media (max-width:900px){ .proof-grid{grid-template-columns:1fr} }
.proof-sticky{position:sticky; top:112px}
@media (max-width:900px){ .proof-sticky{position:static} }
.quote{border-left:2px solid var(--signal); padding-left:var(--s-4); margin:0 0 var(--s-6);
       font-family:var(--display); font-size:28px; line-height:1.34; color:var(--ink)}
.quote cite{display:block; margin-top:10px; font-family:var(--text); font-size:var(--t-micro);
            font-style:normal; font-weight:600; letter-spacing:.09em; text-transform:uppercase;
            color:var(--ink-faint)}
.spread{background:var(--surface); border:1px solid var(--rule); padding:var(--s-5);
        margin-bottom:var(--s-4)}
.spread-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4);
             padding-bottom:var(--s-3); margin-bottom:var(--s-4); border-bottom:1px solid var(--rule)}
.spread-head h3{font-family:var(--text); font-size:17px; font-weight:600; letter-spacing:0}
.badge{font-size:10.5px; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
       padding:4px 9px; border:1px solid currentColor; white-space:nowrap}
.badge--flag{color:var(--marker)}
.badge--work{color:var(--support)}
.spread p{font-size:15.5px; color:var(--ink-soft); margin:0 0 var(--s-3)}
.spread .src{font-size:var(--t-micro); color:var(--ink-faint); margin:0}

/* Client voices. Body face throughout - these run too small for the
   display face, which never goes below 28px. The quote marks are
   generated, so the markup stays clean and they always hug the text. */
.voices{margin-top:var(--s-6); border-top:1px solid var(--rule)}
.voices blockquote{margin:0; padding:var(--s-5) 0; border-bottom:1px solid var(--rule-soft)}
.voices blockquote:last-child{border-bottom:0; padding-bottom:0}
.voices p{margin:0; font-size:16.5px; line-height:1.6; color:var(--ink); text-wrap:pretty}
.voices p::before{content:"\201C"; color:var(--signal)}
.voices p::after{content:"\201D"; color:var(--signal)}
.voices cite{display:block; margin-top:9px; font-size:var(--t-micro); font-style:normal;
             font-weight:600; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-faint)}
.stat-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(140px,1fr)); gap:var(--s-4);
          margin-top:var(--s-6); padding-top:var(--s-5); border-top:1px solid var(--rule)}
.stat b{display:block; font-family:var(--display); font-size:38px; line-height:1; color:var(--ink);
        font-variant-numeric:tabular-nums; margin-bottom:5px}
.stat span{font-size:var(--t-micro); color:var(--ink-faint); line-height:1.45; display:block}

/* ============================================================
   BEAT 7 - origin
   ============================================================ */
.origin-grid{display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr);
             gap:clamp(30px,5vw,72px); align-items:center}
@media (max-width:860px){ .origin-grid{grid-template-columns:1fr} }
.origin-portrait{border:1px solid var(--rule); filter:saturate(.94) contrast(1.02)}
.origin p{max-width:56ch}
.origin .pull{font-family:var(--display); font-size:30px; line-height:1.32; color:var(--ink);
              border-left:2px solid var(--signal); padding-left:var(--s-4); margin:var(--s-6) 0}

/* ============================================================
   BEAT 8 - pricing + VSL
   ============================================================ */
.vsl{aspect-ratio:16/9; background:var(--surface); border:1px solid var(--rule);
     position:relative; overflow:hidden; margin-bottom:var(--s-6)}
.vsl-still{position:absolute; inset:0; width:100%; height:100%; object-fit:cover;
           object-position:50% 30%; opacity:.34; filter:grayscale(.25)}
.vsl-body{position:relative; z-index:2; height:100%; display:flex; flex-direction:column;
          justify-content:center; gap:var(--s-3); padding:clamp(20px,3.4vw,44px);
          background:linear-gradient(90deg,rgba(33,26,19,.94) 42%,rgba(30,26,22,.55))}
.vsl-body .eyebrow{margin-bottom:0}
.vsl-body h3{font-size:var(--t-d3)}
.vsl-points{display:grid; gap:7px; margin:var(--s-2) 0 0; padding:0; list-style:none;
            max-width:52ch}
.vsl-points li{display:flex; gap:10px; font-size:15px; color:var(--ink-soft); margin:0}
.vsl-points li::before{content:""; flex:0 0 6px; height:6px; background:var(--signal);
                       margin-top:9px}
.vsl[data-state="video"] .vsl-body{display:none}

.tiers{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s-4)}
.tier{background:var(--surface); border:1px solid var(--rule); padding:var(--s-5);
      display:flex; flex-direction:column; gap:var(--s-3)}
/* Outranks .js .r's slower reveal transition, so hover eases at hover speed. */
.tiers article.tier{transition:transform var(--d-base) var(--e-out),
                    border-color var(--d-base) var(--e-out),
                    background var(--d-base) var(--e-out), box-shadow var(--d-base) var(--e-out)}
.tier--pick{border-color:var(--signal); background:var(--surface-2)}

/* Hover takes a card to the same state the VSL gives the highlighted tier:
   lifted, brass edge, brighter ground, brass price.
   The selector is deliberately heavier than .js .r.in{transform:none},
   which reveals these cards and would otherwise cancel the lift. */
.tiers article.tier:hover,.tiers article.tier:focus-within{
      transform:translateY(-6px) scale(1.022);
      border-color:var(--signal); background:var(--surface-2);
      box-shadow:0 18px 44px -22px rgba(0,0,0,.75)}
.tier:hover .tier-name,.tier:focus-within .tier-name{color:var(--signal)}
.tier:hover .tier-price,.tier:focus-within .tier-price{color:var(--signal)}
@media (prefers-reduced-motion:reduce){
  .tiers article.tier{transition:border-color var(--d-base) var(--e-out),
                      background var(--d-base) var(--e-out)}
  .tiers article.tier:hover,.tiers article.tier:focus-within{transform:none; box-shadow:none}
}
.tier-top{display:flex; align-items:center; justify-content:space-between; gap:var(--s-3);
          min-height:26px}
.tier-name{font-size:var(--t-micro); font-weight:600; letter-spacing:.13em;
           text-transform:uppercase; color:var(--ink-faint); margin:0}
.tier--pick .tier-name{color:var(--signal)}
.tier-price{font-family:var(--display); font-size:44px; line-height:1; color:var(--ink);
            font-variant-numeric:tabular-nums}
.tier-what{font-size:15.5px; color:var(--ink-soft); margin:0; flex:1}
.tier-meta{font-size:var(--t-micro); color:var(--ink-faint); margin:0; padding-top:var(--s-3);
           border-top:1px solid var(--rule-soft)}
.tier .btn{width:100%}

/* ============================================================
   BEAT 9 - objections
   ============================================================ */
.faq{border-top:1px solid var(--rule); margin-top:var(--s-7)}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer; list-style:none; padding:var(--s-5) 40px var(--s-5) 0;
             position:relative; font-size:18px; font-weight:600; color:var(--ink);
             min-height:44px; display:flex; align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; position:absolute; right:8px; top:50%; width:12px; height:2px;
                    background:var(--signal); transition:transform var(--d-base) var(--e-out)}
.faq summary::before{content:""; position:absolute; right:13px; top:50%; width:2px; height:12px;
                     background:var(--signal); margin-top:-5px;
                     transition:opacity var(--d-base) var(--e-out)}
.faq details[open] summary::before{opacity:0}
.faq .ans{padding:0 0 var(--s-5); max-width:62ch}
.faq .ans p:last-child{margin-bottom:0}

/* ============================================================
   BEAT 10 - close
   ============================================================ */
.close{position:relative; overflow:hidden; text-align:center}
.close-bg{position:absolute; inset:0; opacity:.14; pointer-events:none;
          display:flex; align-items:center; justify-content:center}
.close-in{position:relative; z-index:2}
.close .d1{max-width:22ch; margin-inline:auto; margin-bottom:var(--s-5)}
.close .lede{max-width:52ch; margin-inline:auto; margin-bottom:var(--s-6)}
.close .btn-row{justify-content:center}

/* ============================================================
   BEAT 11 - footer
   ============================================================ */
.foot{background:var(--sunk); border-top:1px solid var(--rule);
      padding-block:var(--s-8) var(--s-6)}
.foot-grid{display:grid; grid-template-columns:1.5fr repeat(3,minmax(0,1fr));
           gap:var(--s-6) var(--s-5)}
@media (max-width:820px){ .foot-grid{grid-template-columns:1fr 1fr} }
@media (max-width:520px){ .foot-grid{grid-template-columns:1fr} }
.foot h3{font-family:var(--text); font-size:var(--t-micro); font-weight:600; letter-spacing:.13em;
         text-transform:uppercase; color:var(--ink-faint); margin:0 0 var(--s-4)}
.foot ul{list-style:none; margin:0; padding:0}
.foot li{margin-bottom:10px}
.foot a{font-size:15px; color:var(--ink-soft); text-decoration:none;
        display:inline-flex; align-items:center; min-height:32px;
        transition:color var(--d-fast) var(--e-out)}
.foot a:hover{color:var(--ink)}
.foot-give{font-size:var(--t-micro); color:var(--ink-faint); max-width:34ch; margin:var(--s-4) 0 0}
.foot-base{display:flex; flex-wrap:wrap; gap:var(--s-3) var(--s-5); justify-content:space-between;
           margin-top:var(--s-8); padding-top:var(--s-5); border-top:1px solid var(--rule);
           font-size:var(--t-micro); color:var(--ink-faint)}

/* ============================================================
   scroll reveal - JS-added only, so no-JS renders fully visible
   ============================================================ */
.js .r{opacity:0; transform:translateY(12px);
       transition:opacity var(--d-slow) var(--e-out), transform var(--d-slow) var(--e-out)}
.js .r.in{opacity:1; transform:none}
.js .r-d1{transition-delay:70ms} .js .r-d2{transition-delay:140ms}
.js .r-d3{transition-delay:210ms} .js .r-d4{transition-delay:280ms}
.js .r-d5{transition-delay:350ms}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .js .r,.js .line-draw{opacity:1 !important; transform:none !important; transition:none !important}
  *{animation-duration:.01ms !important; animation-iteration-count:1 !important;
    transition-duration:.01ms !important}
}

/* ---------- comparison table (audit page) ---------- */
.cmp-wrap{overflow-x:auto; border:1px solid var(--rule); background:var(--surface); margin-top:var(--s-6)}
.cmp{border-collapse:collapse; width:100%; min-width:560px; font-size:15px}
.cmp th,.cmp td{text-align:left; padding:14px 16px; border-bottom:1px solid var(--rule-soft);
                vertical-align:top; color:var(--ink-soft)}
.cmp thead th{font-size:var(--t-micro); font-weight:600; letter-spacing:.12em;
              text-transform:uppercase; color:var(--ink-faint); border-bottom:1px solid var(--rule);
              white-space:nowrap}
.cmp tbody tr:last-child td{border-bottom:0}
.cmp td:first-child{color:var(--ink); font-weight:600}
.cmp .is-me{color:var(--signal)}

/* ---------- page header (interior pages) ---------- */
.phead{padding-top:clamp(48px,6vw,80px); padding-bottom:clamp(28px,4vw,48px)}
.phead .d1{max-width:18ch}
.phead .lede{max-width:56ch}

/* ---------- sample links ---------- */
.samples{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--s-4);
         margin-top:var(--s-6)}
.sample{display:flex; flex-direction:column; gap:var(--s-2); padding:var(--s-5);
        border:1px solid var(--rule); background:var(--surface); text-decoration:none;
        min-height:44px; transition:border-color var(--d-fast) var(--e-out),
        background var(--d-fast) var(--e-out)}
.sample:hover{border-color:var(--signal); background:var(--surface-2)}
.sample .t{font-size:17px; font-weight:600; color:var(--ink)}
.sample .d{font-size:14.5px; color:var(--ink-soft)}
.sample .m{font-size:var(--t-micro); color:var(--signal); font-weight:600; letter-spacing:.08em;
           text-transform:uppercase; margin-top:auto; padding-top:var(--s-3)}

/* plate blocks fill their grid row so the two layers register exactly */
.mock{display:flex; flex-direction:column; justify-content:center; overflow:hidden}
.mock--find{justify-content:flex-start; gap:2px}
.mock--find .find:first-of-type{border-top:0; padding-top:2px}

/* ---------- footer seal (the original KP mark, recoloured) ---------- */
.foot-seal{width:116px; height:116px; margin-bottom:var(--s-4); opacity:.95}

/* ---------- melt: make the intent obvious before anyone touches it ---------- */
.reveal-cap{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s-4);
            margin-bottom:var(--s-3); flex-wrap:wrap}
.reveal-cap .t{font-size:var(--t-micro); font-weight:600; letter-spacing:.13em;
               text-transform:uppercase; color:var(--ink-faint); margin:0}
.reveal-cap .h{font-size:var(--t-micro); color:var(--signal); font-weight:600; margin:0}
@media (prefers-reduced-motion:reduce){ .reveal-cap .h{display:none} }

/* ============================================================
   GOLD FOIL
   A gradient, not a colour. Two ramps: --foil is safe at any size,
   --foil-rich is display-only (its darkest stop clears 3:1, not 4.5:1).
   Text uses background-clip, which fails invisible if the paint is
   dropped - so colour is set FIRST and only overridden where supported.
   ============================================================ */
.foil{color:var(--signal)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .foil{background-image:var(--foil-rich); background-size:180% 100%; background-position:20% 0;
        -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
}
@media (forced-colors:active){
  .foil{background-image:none; -webkit-text-fill-color:currentColor; color:CanvasText}
}
.on-paper .foil{background-image:none; -webkit-text-fill-color:currentColor; color:var(--signal)}

/* buttons take the safe ramp, and catch the light on hover */
.btn--primary{background-image:var(--foil); background-size:190% 100%; background-position:22% 0;
              color:#211A13; border-color:transparent;
              transition:background-position 520ms var(--e-out), transform var(--d-fast) var(--e-out)}
.btn--primary:hover{background-color:transparent; background-position:78% 0}
.on-paper .btn--primary{background-image:none; background-color:var(--signal); color:var(--paper)}

/* the numbered finding pills */
.find-n{background-image:var(--foil); background-size:200% 100%; color:#211A13}

/* display numerals and the big price - large text, so the rich ramp is allowed */
.stage-n,.tier-price,.beat .n,.sym .n{background-image:var(--foil-rich); background-size:170% 100%;
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--signal)}
@media (forced-colors:active){
  .stage-n,.tier-price,.beat .n,.sym .n{background-image:none;
    -webkit-text-fill-color:currentColor; color:CanvasText}
}
.on-paper .stage-n,.on-paper .tier-price{background-image:none;
  -webkit-text-fill-color:currentColor; color:var(--signal)}

/* hairlines catch it too */
.ev-card .hair{background-image:var(--foil); background-color:transparent; height:2px; width:38px}

@media (prefers-reduced-motion:reduce){
  .btn--primary{transition:none}
  .btn--primary:hover{background-position:22% 0}
}

/* ============================================================
   ABOUT + SPEAKING
   ============================================================ */
.figure{margin:0}
.figure img{border:1px solid var(--rule); filter:saturate(.94) contrast(1.02)}
.figure figcaption{margin-top:var(--s-3); font-size:var(--t-micro); color:var(--ink-faint);
                   max-width:36ch}

/* narrative blocks: text column with an optional image beside it */
.tell{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,.78fr);
      gap:clamp(30px,5vw,72px); align-items:start}
.tell--flip>.figure{order:-1}
@media (max-width:880px){ .tell{grid-template-columns:1fr} .tell--flip>.figure{order:0} }
.tell p{max-width:58ch}

/* A run of prose that continues under a .tell row at full shell width.
   Two columns keeps the line length readable at 1200px. */
.run{margin-top:clamp(30px,4vw,56px)}
.run-lead{font-size:var(--t-lede); line-height:1.55; color:var(--ink); max-width:52ch; margin:0}
.quote--wide{max-width:34ch; margin-block:var(--s-7)}
.run-cols{columns:2; column-gap:clamp(30px,5vw,72px)}
/* deliberately NOT break-inside:avoid - one paragraph here is long and one
   is short, so forcing each into its own column leaves the pair lopsided.
   Letting the text flow balances the two columns. */
.run-cols p{margin:0 0 var(--s-4)}
.run-cols p:last-child{margin-bottom:0}
@media (max-width:880px){
  .run-cols{columns:1}
  .quote--wide{max-width:none}
}

/* tick list - the host kit, what an audience leaves with */
.ticks{list-style:none; margin:var(--s-4) 0 0; padding:0; display:grid; gap:10px}
.ticks li{display:flex; gap:12px; margin:0; font-size:16.5px; color:var(--ink-soft)}
.ticks li::before{content:""; flex:0 0 7px; height:7px; margin-top:10px;
                  background-image:var(--foil); background-color:var(--signal)}
.ticks li b{color:var(--ink); font-weight:600}
.on-paper .ticks li::before{background-image:none; background-color:var(--signal)}

/* topic cards reuse .ev-card, with a running number */
.topic-n{font-family:var(--display); font-size:30px; line-height:1; color:var(--signal);
         font-variant-numeric:tabular-nums; margin:0}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .topic-n{background-image:var(--foil-rich); background-size:170% 100%;
           -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent}
}
@media (forced-colors:active){
  .topic-n{background-image:none; -webkit-text-fill-color:currentColor; color:CanvasText}
}

/* format rows */
.formats{border-top:1px solid var(--rule); margin-top:var(--s-6)}
.fmt{display:grid; grid-template-columns:minmax(0,.34fr) minmax(0,1fr); gap:var(--s-3) var(--s-5);
     padding:var(--s-5) 0; border-bottom:1px solid var(--rule-soft)}
@media (max-width:640px){ .fmt{grid-template-columns:1fr; gap:6px} }
.fmt dt{font-size:17px; font-weight:600; color:var(--ink); margin:0}
.fmt dd{margin:0; font-size:15.5px; color:var(--ink-soft)}
.fmt .len{display:block; font-size:var(--t-micro); color:var(--ink-faint); font-weight:500;
          letter-spacing:.08em; text-transform:uppercase; margin-top:4px}

/* a plain honest note, not a badge */
.note-plain{border-left:2px solid var(--rule); padding-left:var(--s-4); max-width:58ch;
            font-size:15.5px; color:var(--ink-soft)}

/* ---------- narrow-width guards ----------
   At <=400px the nav was breaking "Krista Patrick" and "Free snapshot"
   onto two lines, which reads as a broken layout rather than a tight one. */
.brand-name{white-space:nowrap}
.btn{white-space:nowrap}
@media (max-width:430px){
  .nav-in{gap:var(--s-3); padding-inline:16px}
  .brand-mark{width:26px; height:26px; flex-basis:26px}
  .brand-name{font-size:17px}
  .nav-cta{padding:10px 14px; font-size:14px; min-height:44px}
}
@media (max-width:340px){
  .brand-name{display:none}          /* the seal alone carries it below this */
}

/* two-up form row. Must be a class, not an inline style - an inline
   grid-template-columns beats the media query below and the row never
   collapses, which overflows the page on a phone. */
.form-row--2{grid-template-columns:1fr 1fr}
@media (max-width:820px){ .form-row--2{grid-template-columns:1fr} }

/* ============================================================
   LONG FORMS - intake.html and apply.html
   Shared so the purchase path can never drift from the rest
   of the site the way the old pages did.
   ============================================================ */

/* progress: intake -> payment -> delivered */
.progress{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s-3);
          margin:0 0 var(--s-8); padding-bottom:var(--s-5);
          border-bottom:1px solid var(--rule)}
.progress-step{display:flex; align-items:center; gap:9px; font-size:var(--t-micro);
               font-weight:600; letter-spacing:.11em; text-transform:uppercase;
               color:var(--ink-faint)}
.progress-step .dot{display:grid; place-items:center; width:24px; height:24px; flex:0 0 24px;
                    border:1px solid var(--rule); border-radius:50%; font-size:11px;
                    letter-spacing:0; color:var(--ink-faint)}
.progress-step.is-here{color:var(--signal)}
.progress-step.is-here .dot{border-color:var(--signal); color:var(--signal)}
.progress-arrow{color:var(--rule)}

/* sections */
.fsec{padding-block:var(--s-7); border-top:1px solid var(--rule)}
.fsec:first-of-type{border-top:0; padding-top:0}
.fsec-title{font-family:var(--text); font-size:20px; font-weight:600; letter-spacing:0;
            line-height:1.35; margin:0 0 var(--s-2); color:var(--ink)}
.fsec-desc{font-size:var(--t-small); color:var(--ink-soft); margin:0 0 var(--s-5); max-width:62ch}

/* fields. .field itself is defined up in the snapshot form block. */
.fgrid{display:grid; grid-template-columns:1fr 1fr; gap:var(--s-4) var(--s-4);
       margin-bottom:var(--s-4)}
@media (max-width:760px){ .fgrid{grid-template-columns:1fr} }
.field textarea,.field select{width:100%; padding:13px 15px; font-family:var(--text);
       font-size:16px; color:var(--ink); background:var(--ground);
       border:1px solid var(--rule); border-radius:0;
       transition:border-color var(--d-fast) var(--e-out)}
.field textarea{min-height:132px; line-height:1.6; resize:vertical}
.field select{min-height:52px; appearance:none;
       background-image:linear-gradient(45deg,transparent 50%,var(--ink-faint) 50%),
                        linear-gradient(135deg,var(--ink-faint) 50%,transparent 50%);
       background-position:calc(100% - 20px) 22px, calc(100% - 14px) 22px;
       background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:44px}
.field textarea::placeholder{color:#6E665C}
.field textarea:hover,.field select:hover{border-color:var(--ink-faint)}
.field textarea:focus,.field select:focus{border-color:var(--signal); outline-offset:1px}
.field .optional{margin-left:7px; font-weight:400; letter-spacing:.04em;
                 text-transform:none; color:var(--ink-faint); font-size:11.5px}
.field--full{margin-bottom:var(--s-4)}

/* tier picker: the radio is the label, the card is the target */
.picks{display:grid; gap:var(--s-4)}
.pick{position:relative}
.pick input{position:absolute; inset:0; width:100%; height:100%; margin:0;
            opacity:0; cursor:pointer; z-index:2}
.pick-card{display:block; background:var(--surface); border:1px solid var(--rule);
           padding:var(--s-5); cursor:pointer;
           transition:border-color var(--d-base) var(--e-out),
                      background var(--d-base) var(--e-out),
                      transform var(--d-base) var(--e-out)}
.pick input:hover + .pick-card{border-color:var(--ink-faint); background:var(--surface-2)}
.pick input:checked + .pick-card{border-color:var(--signal); background:var(--surface-2)}
.pick input:focus-visible + .pick-card{outline:3px solid var(--signal); outline-offset:3px}
.pick-head{display:flex; align-items:baseline; justify-content:space-between;
           gap:var(--s-4); flex-wrap:wrap; margin-bottom:var(--s-3)}
.pick-name{font-size:var(--t-micro); font-weight:600; letter-spacing:.13em;
           text-transform:uppercase; color:var(--ink-faint); margin:0}
.pick input:checked + .pick-card .pick-name{color:var(--signal)}
.pick-price{font-family:var(--display); font-size:34px; line-height:1; color:var(--ink);
            font-variant-numeric:tabular-nums}
.pick-card p{font-size:15.5px; color:var(--ink-soft); margin:0 0 var(--s-3)}
.pick-meta{font-size:var(--t-micro); color:var(--ink-faint); margin:0 !important;
           padding-top:var(--s-3); border-top:1px solid var(--rule-soft)}
@media (prefers-reduced-motion:reduce){ .pick-card{transition:none} }

/* submit */
.submit-area{padding-top:var(--s-7); border-top:1px solid var(--rule)}
.submit-note{font-size:var(--t-small); color:var(--ink-soft); margin:0 0 var(--s-5); max-width:66ch}
.submit-area .btn{min-width:260px}
.form-error{display:none; margin:var(--s-4) 0 0; padding:13px 16px;
            border:1px solid var(--marker); color:var(--marker);
            font-size:var(--t-small); font-weight:500}
.form-error.is-on{display:block}

/* callout: a framed aside inside a long form */
.callout{background:var(--surface); border:1px solid var(--rule);
         border-left:2px solid var(--signal); padding:var(--s-5);
         margin:0 0 var(--s-8); font-size:15.5px; line-height:1.62; color:var(--ink-soft)}
.callout b,.callout strong{color:var(--ink)}
.callout p:last-child{margin-bottom:0}

/* post-submit confirmation panel, swapped in where the form was */
.confirm{padding:var(--s-7) 0 var(--s-8)}

/* grouped FAQ + policy blocks (faq.html, privacy.html) */
.fgroup{margin-bottom:var(--s-8)}
.fgroup:last-child{margin-bottom:0}
.fgroup .fsec-title{margin-bottom:var(--s-4)}
.pol{margin-bottom:var(--s-8)}
.pol:last-child{margin-bottom:0}
.pol h2{margin-bottom:var(--s-4)}
.pol p:last-child{margin-bottom:0}

/* Topic cards size to their content. Forcing equal heights across a row was
   leaving 361px of dead space under the short cards once topic 06 grew. */
.ev--natural{align-items:start}

/* VSL play control. Must live OUTSIDE .vsl-body: that block is placeholder
   copy and is hidden the moment data-state flips to "video", which silently
   took the play button with it. */
.vsl-play{position:absolute; inset:0; z-index:4; display:grid; place-items:center;
          width:100%; height:100%; padding:0; border:0; background:none; cursor:pointer;
          min-height:0}
.vsl-play::before{content:""; position:absolute; inset:0;
          background:radial-gradient(ellipse at center, rgba(33,26,19,.30), rgba(33,26,19,.62));
          transition:background var(--d-base) var(--e-out)}
.vsl-play .disc{position:relative; display:grid; place-items:center;
          width:88px; height:88px; border-radius:50%;
          background:var(--signal); color:#211A13;
          box-shadow:0 12px 40px -10px rgba(0,0,0,.65);
          transition:transform var(--d-base) var(--e-out), background var(--d-base) var(--e-out)}
.vsl-play .disc svg{width:30px; height:30px; margin-left:5px}
.vsl-play .lab{position:relative; margin-top:14px; font-size:var(--t-micro); font-weight:600;
          letter-spacing:.12em; text-transform:uppercase; color:var(--ink);
          text-shadow:0 1px 12px rgba(0,0,0,.8)}
.vsl-play:hover .disc,.vsl-play:focus-visible .disc{transform:scale(1.07); background:#E4C98A}
.vsl-play:hover::before{background:radial-gradient(ellipse at center, rgba(33,26,19,.18), rgba(33,26,19,.52))}
.vsl[data-state="placeholder"] .vsl-play{display:none}
@media (prefers-reduced-motion:reduce){ .vsl-play .disc{transition:none} }