@import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;1,300&family=Jost:wght@300;400;500&display=swap');


/* ===== tokens/colors.css ===== */
/* ============================================================
   Keisha Kells — Color system
   Two tiers. Tier 1 (The Core) is always present. Tier 2
   (The Guests) appears sparingly — each guest has ONE permanent
   job: it represents a Permission Pattern.

   Cardinal rule: Terra is the only loud color. At rest it appears
   only as the arc mark + ONE primary CTA per page. Everything else
   earns terra through interaction (hover/focus).
   ============================================================ */

:root{
  /* ---- Tier 1 · The Core ------------------------------------ */
  --white:        #FFFFFF;   /* primary page background        */
  --offwhite:     #E5E6E1;   /* alternating section background */
  --soft:         #F7F7F4;   /* intermediate soft surface      */
  --charcoal:     #282A2C;   /* all text, footers, slim bands  */
  --sand:         #DB9E6D;   /* warm accent — generous, small  */
  --terra:        #B15F2D;   /* the spark — strictly rationed  */
  --terra-deep:   #9D5226;   /* terra hover / press            */

  /* supporting text tones */
  --ink-60:       #6E706B;   /* muted body                     */
  --ink-40:       #8A8C87;   /* captions / labels / eyebrows   */
  --hairline:     #E9EAE5;   /* hairline borders               */
  --hairline-2:   #CFD0CB;   /* input hover border             */
  --hairline-hover:#CFD0CB;  /* alias of --hairline-2          */

  /* ---- Tier 2 · The Guests (one job each) ------------------- */
  --blush:        #ECC8BD;   /* The Keeper                     */
  --eucalyptus:   #A9B5A4;   /* The Curator                    */
  --oat:          #E8DCC9;   /* The Negotiator                 */
  --seastone:     #A4B2AE;   /* The Quiet Authority            */

  /* ---- Dark-surface text (charcoal grounds) ----------------- */
  --on-dark:      #E5E6E1;   /* off-white text on charcoal     */
  --on-dark-soft: #B9BBB5;   /* muted text on charcoal         */
  --on-dark-faint:#858782;   /* legal / fineprint on charcoal  */
  --on-dark-line: rgba(229,230,225,.14); /* hairline on charcoal */

  /* ---- Semantic aliases ------------------------------------- */
  --bg-page:        var(--white);
  --bg-alt:         var(--offwhite);
  --bg-soft:        var(--soft);
  --bg-dark:        var(--charcoal);
  --surface-card:   var(--white);
  --text-strong:    var(--charcoal);
  --text-body:      var(--ink-60);
  --text-muted:     var(--ink-40);
  --border-hair:    var(--hairline);
  --accent:         var(--terra);
  --accent-hover:   var(--terra-deep);
  --accent-warm:    var(--sand);
  --focus-ring:     var(--terra);
}

/* ===== tokens/typography.css ===== */
/* ============================================================
   Keisha Kells — Typography
   The signature move is extreme scale contrast: one enormous
   light serif moment + one micro tracked-caps moment per
   composition. That contrast — not color — creates the drama.

     · Display  — Cormorant Garamond 300 (italic 300 for emphasis)
     · Body/UI  — Jost 300 (400 for emphasis, never above 500)
     · Eyebrow  — Jost 400, 11px, 3px tracking, ALL CAPS
   ============================================================ */

:root{
  /* ---- Families -------------------------------------------- */
  --serif: 'Cormorant Garamond', Georgia, 'Times New Roman', serif; /* @kind font */
  --sans:  'Jost', Helvetica, Arial, sans-serif; /* @kind font */
  --font-display: var(--serif); /* @kind font */
  --font-body:    var(--sans); /* @kind font */

  /* ---- Weights (never bolder than 500) --------------------- */
  --fw-light:   300; /* @kind font */
  --fw-regular: 400; /* @kind font */
  --fw-medium:  500; /* @kind font */

  /* ---- Display scale (fluid clamps from the live site) ------ */
  --fs-h1:   clamp(38px, 5.4vw, 62px);   /* @kind font */
  --fs-h2:   clamp(30px, 4vw,   44px); /* @kind font */
  --fs-h3:   clamp(21px, 2.4vw, 26px); /* @kind font */
  --fs-display-xl: clamp(54px, 7vw, 84px); /* @kind font */
  --lh-display: 1.12; /* @kind font */

  /* ---- Body scale ------------------------------------------ */
  --fs-body:      17px;   /* @kind font */
  --fs-body-sm:   15px;   /* @kind font */
  --fs-lede:      clamp(18px, 2vw, 21px); /* @kind font */
  --lh-body:      1.7; /* @kind font */
  --lh-relaxed:   1.75; /* @kind font */

  /* ---- Eyebrow / label (micro tracked caps) ---------------- */
  --fs-label:     11px; /* @kind font */
  --ls-label:     3px; /* @kind font */
  --fs-button:    12px; /* @kind font */
  --ls-button:    2px; /* @kind font */
}

/* ===== tokens/spacing.css ===== */
/* ============================================================
   Keisha Kells — Spacing, radius, motion & elevation
   The brand breathes: ~90% of any composition is white space.
   Generous section padding (~110px web). Corners are nearly
   square (2px). There is essentially no shadow system — depth
   comes from hairline borders and photography, not elevation.
   ============================================================ */

:root{
  /* ---- Spacing scale --------------------------------------- */
  --space-1:  6px;
  --space-2:  10px;
  --space-3:  14px;
  --space-4:  20px;
  --space-5:  28px;
  --space-6:  40px;
  --space-7:  56px;
  --space-8:  72px;
  --space-9:  110px;   /* the signature section rhythm */

  /* section padding (vertical · horizontal) */
  --section-pad-y:    110px;
  --section-pad-y-sm: 80px;
  --page-gutter:      6vw;
  --measure:          640px;  /* ideal reading column */
  --wrap-max:         1100px; /* content max width    */

  /* ---- Radius (nearly square — this is a square brand) ----- */
  --radius-sm: 2px;   /* buttons, inputs, cards, media */
  --radius-md: 2px;
  --radius: 2px;      /* default alias — the brand is near-square */
  --radius-pill: 999px;

  /* ---- Borders --------------------------------------------- */
  --border-hairline: 0.5px solid var(--hairline);
  --border-card-top: 3px;     /* pattern-card guest top border */
  --stroke-arc: 1.5px;        /* the arc mark stroke weight    */

  /* ---- Motion — quiet, never bouncy ------------------------ */
  --ease: cubic-bezier(.4, 0, .2, 1); /* @kind other */
  --dur-fast:  .18s;          /* @kind other */
  --dur-rise:  .8s;           /* @kind other */
  --transition-base: all var(--dur-fast) ease;

  /* ---- Elevation — intentionally minimal ------------------- */
  --shadow-none: none;
  /* The single permissible lift: a barely-there card hover.    */
  --shadow-soft: 0 1px 2px rgba(40,42,44,.04);
}

/* ===== tokens/base.css ===== */
/* ============================================================
   Keisha Kells — Base element styles
   The brand's defaults applied to bare HTML: reset, body type,
   headings, links, eyebrows, the arc mark, and entrance motion.
   These mirror the live site exactly so any consuming page that
   links styles.css inherits the real Keisha Kells voice.
   ============================================================ */

*{ margin:0; padding:0; box-sizing:border-box; }
html{ scroll-behavior:smooth; }

body{
  font-family: var(--sans);
  font-weight: var(--fw-light);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--charcoal);
  background: var(--white);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img{ max-width:100%; display:block; }

a{
  color: var(--charcoal);
  text-decoration: none;
  transition: color var(--dur-fast) ease;
}
a:hover{ color: var(--terra); }
a:focus-visible,
button:focus-visible{ outline:2px solid var(--terra); outline-offset:3px; }

/* ---------- headings — the serif moment ---------- */
h1,h2,h3,h4{
  font-family: var(--serif);
  font-weight: var(--fw-light);
  line-height: var(--lh-display);
  color: var(--charcoal);
  text-wrap: balance;
}
h1{ font-size: var(--fs-h1); }
h2{ font-size: var(--fs-h2); }
h3{ font-size: var(--fs-h3); }

p{ text-wrap: pretty; }
p + p{ margin-top: 1.1em; }

/* ---------- the serif italic lede ---------- */
.lede{
  font-family: var(--serif);
  font-style: italic;
  font-weight: var(--fw-light);
  font-size: var(--fs-lede);
  color: var(--ink-60);
  line-height: 1.55;
}

/* ---------- eyebrow / label — the micro-caps moment ---------- */
.label{
  font-family: var(--sans);
  font-weight: var(--fw-regular);
  font-size: var(--fs-label);
  letter-spacing: var(--ls-label);
  text-transform: uppercase;
  color: var(--ink-40);
}
.label--terra{ color: var(--terra); }

/* ---------- reading helpers ---------- */
.measure{ max-width: var(--measure); }
.center{ text-align:center; }
.center .measure{ margin-left:auto; margin-right:auto; }

/* ---------- the arc mark ---------- */
.arc{ display:inline-block; vertical-align:middle; }

/* ---------- entrance motion — a quiet rise, never a bounce ---------- */
.fade{ opacity:0; transform:translateY(14px); animation:kk-rise var(--dur-rise) ease .1s forwards; }
@keyframes kk-rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){
  .fade{ animation:none; opacity:1; transform:none; }
  html{ scroll-behavior:auto; }
}

/* ===== website/kit.css ===== */
/* ============================================================
   Keisha Kells — Website UI kit · page-level layout
   Section rhythm, nav, hero, splits, the offer ladder, footer.
   Tokens + base utilities come from the design system (styles.css);
   this file holds only the marketing-page composition classes.
   ============================================================ */

/* ---- the worksheet/library auto-save bar must never appear on the marketing site
   (it ships inside the design-system bundle as a self-running script) ---- */
.vl-bar, .kk-bar{ display:none !important; }

/* ---- nav ---- */
.nav{ display:flex; align-items:center; justify-content:space-between; gap:24px; padding:26px 6vw; border-bottom:0.5px solid var(--hairline); background:var(--white); position:relative; z-index:5; }
.nav__mark{ display:flex; align-items:baseline; gap:10px; font-weight:400; font-size:13px; letter-spacing:2.5px; text-transform:uppercase; cursor:pointer; }
.nav__links{ display:flex; align-items:center; gap:30px; flex-wrap:wrap; font-size:13px; letter-spacing:.5px; }
.nav__links a{ cursor:pointer; }
.nav__links a.is-active{ color:var(--terra); }
.nav__cta{ font-size:11px; letter-spacing:2px; text-transform:uppercase; border:1px solid var(--charcoal); padding:9px 18px; border-radius:2px; transition:all .18s ease; cursor:pointer; }
.nav__cta:hover{ background:var(--terra); border-color:var(--terra); color:var(--white); }

/* ---- sections ---- */
.section{ padding:110px 6vw; }
.section--alt{ background:var(--offwhite); }
.section--soft{ background:var(--soft); }
.section--tight{ padding:80px 6vw; }
.wrap{ max-width:1100px; margin:0 auto; }
.eyebrow{ margin-bottom:26px; }
.section h2{ margin-bottom:22px; }

/* ---- hero ---- */
.hero{ padding:130px 6vw 120px; background:var(--white); }
.hero .lede{ margin:26px 0 14px; }
.hero__meta{ font-size:13px; letter-spacing:1px; color:var(--ink-40); margin-top:34px; }
.hero__actions{ display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:44px; }

/* ---- splits ---- */
.split{ display:grid; grid-template-columns:1.15fr .85fr; gap:72px; align-items:center; }
.split--rev{ grid-template-columns:.85fr 1.15fr; }

/* ---- media / photos ---- */
.media{ margin:0; position:relative; overflow:hidden; border-radius:2px; background:var(--soft); }
.media img{ width:100%; height:100%; object-fit:cover; display:block; }
.media--portrait{ aspect-ratio:4/5; }
.media--wide{ aspect-ratio:16/10; }
.photo-band{ padding:0 6vw; }
.photo-band .media--wide{ aspect-ratio:21/9; }
.media-note{ font-family:var(--sans); font-weight:400; font-size:11px; letter-spacing:2px; text-transform:uppercase; color:var(--ink-40); margin-top:14px; }

/* ---- pattern grids ---- */
.patterns{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:20px; margin-top:54px; }

/* ---- method moves ---- */
.moves{ display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:48px 40px; margin-top:60px; }
.move .label{ display:block; margin-bottom:16px; }
.move h3{ margin-bottom:12px; }
.move p{ font-size:15px; color:var(--ink-60); }

/* ---- inside showcase: fanned materials behind a central screen ---- */
.pg-fan{ position:relative; width:100%; max-width:560px; margin:0 auto; height:520px; }
.pg-fan-pages{ position:absolute; inset:0; }
.pg-page{ position:absolute; left:50%; bottom:142px; width:172px; height:226px; margin-left:-86px;
  object-fit:cover; object-position:top center;
  background:var(--white); border:1px solid var(--hairline); border-radius:3px;
  box-shadow:0 16px 34px rgba(40,42,44,.12); transform-origin:bottom center; }
.pg-page.p1{ transform:rotate(-22deg) translateY(30px); }
.pg-page.p2{ transform:rotate(-11deg) translateY(7px); }
.pg-page.p3{ transform:rotate(0deg) translateY(-2px); z-index:2; }
.pg-page.p4{ transform:rotate(11deg) translateY(7px); }
.pg-page.p5{ transform:rotate(22deg) translateY(30px); }
.pg-screen{ position:absolute; left:50%; bottom:0; transform:translateX(-50%); width:66%; z-index:5; }
.pg-screen-bezel{ background:var(--charcoal); border-radius:10px; padding:14px 14px 16px; box-shadow:0 26px 50px rgba(40,42,44,.22); }
.pg-screen-bezel img{ width:100%; display:block; border-radius:2px; background:var(--white); }
.pg-screen-stand{ width:64px; height:34px; margin:0 auto; background:linear-gradient(180deg,#d9dad5,#c4c6c0); }
.pg-screen-base{ width:150px; height:9px; margin:0 auto; border-radius:4px; background:#c4c6c0; box-shadow:0 6px 14px rgba(40,42,44,.14); }
/* ---- inside showcase: assembled bundle graphic ---- */
.pg-bundle{ width:100%; }
.pg-bundle img{ width:100%; height:auto; display:block; }
@media (max-width:640px){
  .pg-fan{ height:420px; }
  .pg-page{ width:128px; height:168px; margin-left:-64px; bottom:118px; }
  .pg-screen{ width:78%; }
}
@media (prefers-reduced-motion: no-preference){
  .pg-page{ transition:transform .5s cubic-bezier(.4,0,.2,1); }
  .pg-fan:hover .pg-page.p1{ transform:rotate(-32deg) translateY(20px); }
  .pg-fan:hover .pg-page.p5{ transform:rotate(32deg) translateY(20px); }
}

/* ---- inside: editorial two-column + results + artifacts ---- */
.pg-inside-grid{ display:grid; grid-template-columns:1fr 1fr; gap:60px; align-items:center; margin-top:18px; }
.pg-inside-copy h2{ margin:10px 0 18px; }
.pg-inside-copy p{ color:var(--ink-60); font-size:16px; line-height:1.7; max-width:42ch; }
.pg-inside-copy p + p{ margin-top:14px; }
.pg-results{ list-style:none; margin:28px 0 0; padding:0; display:grid; gap:14px; }
.pg-results li{ position:relative; padding-left:30px; font-family:var(--serif); font-size:21px; color:var(--charcoal); line-height:1.3; }
.pg-results li::before{ content:''; position:absolute; left:0; top:8px; width:11px; height:6px; border:2px solid var(--terra); border-top:none; border-right:none; transform:rotate(-45deg); }
.pg-artifacts{ margin-top:64px; display:grid; grid-template-columns:repeat(2,1fr); gap:2px 48px; }
.pg-artifact{ display:flex; gap:18px; align-items:flex-start; padding:24px 0; border-top:0.5px solid var(--hairline); }
.pg-artifact-no{ font-family:var(--serif); font-size:20px; color:var(--sand); line-height:1.1; flex:none; }
.pg-artifact h3{ font-size:19px; margin-bottom:6px; }
.pg-artifact p{ font-size:14px; color:var(--ink-60); line-height:1.55; }

/* ---- pull line (Why This Is Different) ---- */
.pg-pull{ font-family:var(--serif); font-style:italic; font-size:30px; line-height:1.32; color:var(--charcoal); margin-top:1.5em; padding-top:1.2em; border-top:0.5px solid var(--hairline); max-width:24ch; }

/* ---- what you build: the asset collection ---- */
.pg-build{ display:grid; grid-template-columns:repeat(2,1fr); gap:0 56px; }
.pg-build-item{ display:flex; gap:18px; align-items:baseline; padding:22px 0; border-top:0.5px solid var(--hairline); }
.pg-build-no{ font-family:var(--serif); font-size:20px; color:var(--sand); line-height:1.1; flex:none; min-width:30px; }
.pg-build-item h3{ font-size:21px; margin-bottom:3px; }
.pg-build-item p{ font-size:14px; color:var(--ink-60); line-height:1.5; }

/* ---- centered variant of What You Build ---- */
.pgb-center{ text-align:center; }
.pgb-center .eyebrow{ display:block; }
.pgb-center .measure{ margin-left:auto; margin-right:auto; }
.pgb-center .pg-bundle{ max-width:880px; margin-left:auto; margin-right:auto; }
.pgb-center .pg-build{ max-width:780px; margin-left:auto; margin-right:auto; }
.pgb-center .pg-build-item{ flex-direction:column; align-items:center; text-align:center; gap:4px; }
.pgb-center .pg-build-no{ min-width:0; margin-bottom:2px; }

/* ---- The product suite shot ---- */
.suite-shot{ width:100%; max-width:780px; margin:30px auto 8px; }
.suite-shot img{ display:block; width:100%; height:auto; }

@media (max-width:760px){
  .pg-inside-grid{ grid-template-columns:1fr; gap:44px; }
  .pg-inside-copy{ order:1; } .pg-fan{ order:2; }
  .pg-artifacts{ grid-template-columns:1fr; }
  .pg-build{ grid-template-columns:1fr; }
  .pg-pull{ font-size:25px; }
}

/* ---- before / after shift ---- */
.shift{ display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:50px; text-align:left; }
.shift__col{ background:var(--white); border:0.5px solid var(--hairline); border-top:3px solid var(--ink-40); padding:38px 36px 34px; }
.shift__col--after{ border-top-color:var(--terra); background:var(--soft); }
.shift__col .label{ display:block; margin-bottom:22px; }
.shift__list{ list-style:none; margin:0; padding:0; }
.shift__list li{ font-family:var(--serif); font-weight:300; font-size:21px; line-height:1.35; color:var(--charcoal); padding:14px 0; border-top:0.5px solid var(--hairline); }
.shift__list li:first-child{ border-top:none; padding-top:0; }
.shift__col--before .shift__list li{ color:var(--ink-60); }

/* ---- quote grid ---- */
.quote-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:20px; margin-top:60px; }

/* ---- offer ladder ---- */
.ladder{ margin-top:54px; border-top:0.5px solid var(--hairline); }
.ladder a:hover{ background:var(--soft); }

/* ---- checklist ---- */
.list{ list-style:none; margin-top:28px; }
.list li{ position:relative; padding:10px 0 10px 34px; border-bottom:0.5px solid var(--hairline); }
.list li::before{ content:"\2192"; position:absolute; left:0; color:var(--terra); font-family:var(--sans); }
.list--plain li{ border-bottom:none; padding-top:6px; padding-bottom:6px; }

/* ---- emblem (four patterns) ---- */
.emblem{ display:flex; align-items:flex-end; justify-content:center; gap:16px; margin:0 auto 22px; line-height:0; }
.emblem svg{ display:block; }

/* ---- recognition list ---- */
.recognize{ max-width:880px; margin:46px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:0 56px; text-align:left; }
.rec-item{ display:grid; grid-template-columns:auto 1fr; gap:16px; align-items:start; padding:20px 0; border-top:0.5px solid var(--hairline); }
.rec-item svg{ margin-top:7px; }
.rec-item p{ font-family:var(--serif); font-weight:300; font-size:20px; line-height:1.4; color:var(--charcoal); }

/* ---- dark band & footer ---- */
.band{ background:var(--charcoal); color:var(--offwhite); padding:64px 6vw; position:relative; isolation:isolate; }
.band > *{ position:relative; z-index:1; }
.band::before{ content:""; position:absolute; inset:0; background:url(../../assets/arc-pattern-dark.svg) center top/300px auto; opacity:.3; z-index:0; }
.band h2{ color:var(--offwhite); }
.band .lede{ color:#B9BBB5; }
.band .label{ color:var(--sand); }
.footer{ background:var(--charcoal); color:#B9BBB5; padding:80px 6vw 48px; font-size:14px; }
.footer a{ color:#B9BBB5; cursor:pointer; }
.footer a:hover{ color:var(--sand); }
.footer__grid{ display:grid; grid-template-columns:2fr 1fr 1fr; gap:48px; max-width:1100px; margin:0 auto; }
.footer__mark{ display:flex; align-items:baseline; gap:10px; color:var(--offwhite); font-size:13px; letter-spacing:2.5px; text-transform:uppercase; margin-bottom:18px; }
.footer__legal{ max-width:1100px; margin:56px auto 0; padding-top:28px; border-top:0.5px solid rgba(229,230,225,.14); font-size:12px; letter-spacing:1px; color:#858782; display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; }

/* ---- email + pricing ---- */
.email-form{ display:flex; gap:12px; flex-wrap:wrap; margin-top:34px; }
.email-form input{ flex:1; min-width:240px; font-family:var(--sans); font-weight:300; font-size:15px; padding:14px 18px; border:1px solid var(--charcoal); border-radius:2px; background:var(--white); color:var(--charcoal); }
.email-form input:focus{ outline:2px solid var(--terra); outline-offset:2px; }
.fineprint{ font-size:12px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-40); margin-top:16px; }
.invest{ text-align:center; }
.invest__price{ font-family:var(--serif); font-weight:300; font-size:clamp(54px,7vw,84px); line-height:1; }
.invest__meta{ font-size:13px; letter-spacing:1.5px; text-transform:uppercase; color:var(--ink-40); margin:20px 0 36px; }

/* ---- arc field ---- */
.arc-field{ position:relative; isolation:isolate; }
.arc-field > *{ position:relative; z-index:1; }
.arc-field::before{ content:""; position:absolute; inset:0; background:url(../../assets/arc-pattern-light.svg) center top/300px auto; opacity:.22; z-index:0; pointer-events:none; }

/* ---- assessment engine ---- */
.assess-qnum{ font-family:var(--sans); font-weight:400; font-size:11px; letter-spacing:3px; text-transform:uppercase; color:var(--ink-40); margin-bottom:20px; }
.assess-qtext{ font-family:var(--serif); font-weight:300; font-size:clamp(26px,3.4vw,34px); line-height:1.2; color:var(--charcoal); margin-bottom:34px; }
.aopt{ display:flex; align-items:center; gap:18px; width:100%; text-align:left; background:var(--white); border:0.5px solid var(--hairline); border-radius:2px; padding:20px 22px; margin-top:12px; cursor:pointer; font-family:var(--sans); font-weight:300; font-size:16px; line-height:1.5; color:var(--charcoal); transition:border-color .18s ease, background .18s ease; }
.aopt:hover{ border-color:var(--terra); }
.aopt.selected{ border-color:var(--charcoal); background:var(--soft); }
.aopt svg{ flex:none; }
.assess-nav{ display:flex; align-items:center; justify-content:space-between; gap:20px; margin-top:38px; flex-wrap:wrap; }
.adots{ display:flex; gap:10px; align-items:flex-end; }
.gate-card{ background:var(--white); border:0.5px solid var(--hairline); padding:50px 40px; text-align:center; }
.gate-skip,.retake{ background:none; border:none; font-family:var(--sans); font-weight:300; font-size:14px; color:var(--ink-60); cursor:pointer; border-bottom:1px solid var(--hairline); padding:0 0 2px; transition:color .18s ease, border-color .18s ease; }
.gate-skip:hover,.retake:hover{ color:var(--terra); border-color:var(--terra); }
.rhead{ background:var(--white); border:0.5px solid var(--hairline); border-top-width:3px; padding:54px 40px; text-align:center; }
.rname{ font-family:var(--serif); font-weight:300; font-size:clamp(36px,5vw,52px); line-height:1.1; margin:14px 0 10px; }
.rtag{ font-family:var(--serif); font-style:italic; font-weight:300; font-size:clamp(17px,2vw,20px); color:var(--ink-60); }
.rgreet{ font-family:var(--serif); font-style:italic; font-size:15px; color:var(--ink-40); margin-top:18px; }
.rblock{ border-bottom:0.5px solid var(--hairline); padding:34px 0; }
.rblock .label{ display:block; margin-bottom:14px; }
.rnext{ background:var(--soft); padding:40px; margin-top:44px; text-align:center; }
.ractions{ display:flex; align-items:center; justify-content:center; gap:22px; flex-wrap:wrap; margin-top:36px; }

/* ---- entrance ---- */
.fade{ opacity:0; transform:translateY(14px); animation:rise .8s ease .1s forwards; }
@keyframes rise{ to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .fade{ animation:none; opacity:1; transform:none; } }

/* ============================================================
   RESPONSIVE LAYER
   Breakpoints: 860 (tablet / collapse two-column), 600 (stack
   the offer ladder + email form), 480 (phone — tighten padding,
   scale display headings below their clamp floor). Most visitors
   are on phones, so this is load-bearing.
   ============================================================ */
@media (max-width:860px){
  .split,.split--rev{ grid-template-columns:1fr; gap:44px; }
  .section,.section--tight{ padding:74px 6vw; }
  .hero{ padding:84px 6vw 72px; }
  .footer__grid{ grid-template-columns:1fr; gap:32px; }
  .nav{ flex-wrap:wrap; row-gap:14px; }
  .nav__links{ gap:18px 20px; }
  .recognize{ grid-template-columns:1fr; gap:0; }
  .shift{ grid-template-columns:1fr; }
  .pg-inside-grid{ grid-template-columns:1fr; gap:40px; }
  .pg-artifacts,.pg-build{ grid-template-columns:1fr; }
  /* media images shouldn't tower on a phone-width single column */
  .media--portrait{ aspect-ratio:4/4.4; }
  .photo-band .media--wide{ aspect-ratio:16/10; }
}

@media (max-width:600px){
  /* offer ladder — OfferRow sets its grid inline, so override hard */
  .ladder a, .ladder > div{
    grid-template-columns:1fr !important;
    gap:4px 0 !important;
    align-items:start !important;
    padding:22px 4px !important;
  }
  .ladder a > span:nth-child(3), .ladder > div > span:nth-child(3){
    margin-top:6px; /* price drops below the question */
  }
  /* email capture stacks full width */
  .email-form{ flex-direction:column; gap:10px; }
  .email-form input{ min-width:0; width:100%; }
  /* hero actions: comfortable tap targets */
  .hero__actions{ gap:14px; }
  .quote-grid,.patterns,.moves{ gap:18px; }
}

@media (max-width:480px){
  .section,.section--tight{ padding:60px 22px; }
  .hero{ padding:64px 22px 56px; }
  .band{ padding:52px 22px; }
  .footer{ padding:60px 22px 40px; }
  .nav{ padding:20px 22px; }
  .photo-band{ padding:0 22px; }
  /* scale the big serif moments below their clamp floor on phones */
  .hero h1, h1{ font-size:34px; line-height:1.12; }
  .section h2, h2{ font-size:26px; }
  .invest__price{ font-size:48px; }
  .pg-pull{ font-size:23px; }
  /* nav: let the row breathe; CTA wraps under links cleanly */
  .nav__links{ gap:14px 18px; font-size:12.5px; }
  .nav__cta{ padding:8px 14px; }
  /* assessment option rows a touch tighter */
  .aopt{ padding:16px 16px; font-size:15px; gap:14px; }
  .gate-card,.rhead{ padding:36px 22px; }
  .rblock{ padding:26px 0; }
}


/* ---- 3D book mockup (Book page) ---- */
.book3d-stage{ perspective:2000px; padding:24px 0 40px; position:relative; }
.book3d{ position:relative; width:300px; height:450px; margin:0 auto; transform-style:preserve-3d; transform:rotateY(-26deg) rotateX(4deg); transition:transform .7s cubic-bezier(.4,0,.2,1); }
.book3d:hover{ transform:rotateY(-14deg) rotateX(2deg); }
.book3d__cover{ position:absolute; inset:0; background:#282A2C; border-radius:2px 5px 5px 2px; overflow:hidden; box-shadow:14px 16px 34px rgba(40,42,44,.34); }
.book3d__spine{ position:absolute; top:0; left:0; width:24px; height:100%; transform-origin:left center; transform:rotateY(90deg); background:linear-gradient(90deg,#34373a,#1b1c1e); display:flex; flex-direction:column; align-items:center; justify-content:space-between; padding:26px 0; border-radius:2px 0 0 2px; }
.book3d__pages{ position:absolute; top:4px; right:0; width:24px; height:calc(100% - 8px); transform-origin:right center; transform:rotateY(-90deg); background:repeating-linear-gradient(0deg,#efe9dd 0 1px,#d8d0bf 1px 2px); border-radius:0 1px 1px 0; }
.book3d__shadow{ position:absolute; left:50%; bottom:6px; width:300px; height:34px; transform:translateX(-50%); background:radial-gradient(ellipse at center, rgba(40,42,44,.26), rgba(40,42,44,0) 70%); filter:blur(2px); z-index:-1; }
.b3-spine-title{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--serif); font-weight:500; font-size:11px; color:#E5E6E1; letter-spacing:.5px; }
.b3-spine-author{ writing-mode:vertical-rl; transform:rotate(180deg); font-family:var(--sans); font-weight:400; font-size:7px; letter-spacing:1.5px; text-transform:uppercase; color:#b9bbb5; }
.b3-author{ position:absolute; top:30px; left:0; right:0; text-align:center; font-family:var(--sans); font-weight:400; font-size:9px; letter-spacing:3.5px; text-transform:uppercase; color:#ECC8BD; z-index:2; }
.b3-title{ position:absolute; top:72px; left:0; right:0; text-align:center; padding:0 22px; z-index:2; }
.b3-the{ display:block; font-family:var(--serif); font-style:italic; font-weight:400; font-size:17px; color:#cdccc6; }
.b3-main{ display:block; font-family:var(--serif); font-weight:500; font-size:34px; line-height:1.0; margin-top:2px; color:#E5E6E1; }
.b3-sub{ position:absolute; bottom:32px; left:0; right:0; text-align:center; padding:0 42px; font-family:var(--sans); font-weight:400; font-size:6.5px; letter-spacing:1.4px; text-transform:uppercase; color:#2a1a12; line-height:1.8; z-index:2; }
.b3-portal{ position:absolute; left:50%; bottom:-46px; transform:translateX(-50%); width:208px; height:226px; border-radius:104px 104px 0 0; background:linear-gradient(180deg,#ECC8BD,#C9743B); z-index:1; }

/* ---- presale price card ---- */
.pricecard{ max-width:540px; margin:0 auto; border:0.5px solid var(--hairline,#E9EAE5); border-radius:3px; overflow:hidden; background:#fff; text-align:left; }
.pricecard__row{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding:22px 26px; border-bottom:0.5px solid #efece5; }
.pricecard__row:last-child{ border-bottom:none; }
.pricecard__row--feature{ border-left:3px solid var(--terra,#B15F2D); }
.pricecard__row--soon{ background:#FAF8F3; }
.pc-name{ font-family:var(--serif); font-weight:500; font-size:22px; color:#282A2C; }
.pc-meta{ font-size:11px; letter-spacing:1px; text-transform:uppercase; color:#8A8C87; margin-top:4px; }
.pc-right{ display:flex; flex-direction:column; align-items:flex-end; gap:8px; }
.pc-price{ font-family:var(--serif); font-weight:500; font-size:26px; color:#282A2C; }
.pc-price--muted{ color:#8A8C87; }
.pc-soon{ font-size:10px; letter-spacing:1.5px; text-transform:uppercase; color:#8A8C87; }


/* ---- reflection hero emblem ---- */
.reflect-emblem{ display:flex; justify-content:center; margin-bottom:30px; }
.reflect-emblem svg{ overflow:visible; }
@media (prefers-reduced-motion: no-preference){
  .reflect-emblem path{ opacity:0; animation:kk-arc-rise .9s ease forwards; }
  .reflect-emblem path:nth-child(1){ animation-delay:.05s; }
  .reflect-emblem path:nth-child(2){ animation-delay:.18s; }
  .reflect-emblem path:nth-child(3){ animation-delay:.31s; }
  .reflect-emblem path:nth-child(4){ animation-delay:.44s; }
  .reflect-emblem path:nth-child(5){ animation-delay:.57s; }
}
@keyframes kk-arc-rise{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:none; } }


/* ---- reflection scroll cue ---- */
.reflect-cue{ display:flex; justify-content:center; margin-top:38px; }
.reflect-cue svg{ overflow:visible; opacity:.85; }
@media (prefers-reduced-motion: no-preference){
  .reflect-cue svg{ animation:kk-cue-bob 2.4s ease-in-out infinite; }
}
@keyframes kk-cue-bob{ 0%,100%{ transform:translateY(0); opacity:.5; } 50%{ transform:translateY(7px); opacity:.9; } }

/* ---- single-screen reflection: stage transitions ---- */
@keyframes kkReflectIn{ from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ [style*="kkReflectIn"]{ animation:none !important; } }
/* small persistent emblem during the quiz — no staggered redraw */
.reflect-emblem-sm .reflect-emblem{ margin-bottom:0; }
.reflect-emblem-sm .reflect-emblem path{ opacity:1 !important; animation:none !important; }