/* ==========================================================================
   Grafters Global Creator Network
   Black · Gold · Red · White. Didone display, wide-tracked geometric sans.
   Red is rationed: live tags, one section, and interactive edges only.
   ========================================================================== */

:root{
  --void:#050403;
  --night:#0A0807;
  --night-2:#100D0A;

  --gold:#C9A050;
  --gold-lit:#F2DFAF;
  --gold-deep:#7A5A1E;
  --gold-hair:rgba(201,160,80,.26);
  --gold-hair-soft:rgba(201,160,80,.13);

  --red:#C4161C;
  --red-lit:#E8434A;
  --red-deep:#7C0D11;

  --white:#FFFFFF;
  --cream:#F6F1E8;
  --paper:#FFFFFF;          /* the light section is true white */
  --ink:#0C0A08;
  /* body text — solid, not low-opacity. All pass WCAG AA on the black ground. */
  --smoke:#D3CCC1;          /* 12.4:1 — main body copy */
  --smoke-2:#ABA298;        /* 7.6:1  — secondary copy and small labels */
  --smoke-3:#8E867C;        /* 5.2:1  — fine print only */

  /* ------------------------------------------------------------------
     TYPEFACES — swap these two lines to change the whole site.
     Current: Fraunces (display) + Inter Tight (body).
     Fraunces has sturdy strokes that hold up on screen, unlike a Didone
     such as Bodoni, whose hairlines thin out and read as fussy.
     Alternatives are listed in the README with their font links.
     ------------------------------------------------------------------ */
  --serif:"Fraunces",Georgia,serif;
  --sans:"Inter Tight",system-ui,sans-serif;

  --gutter:clamp(22px,5vw,80px);
  --shell:1480px;
  --frame:clamp(10px,1.4vw,22px);
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  background:var(--void);color:var(--cream);
  font-family:var(--sans);font-weight:400;font-size:18px;line-height:1.72;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;overflow-wrap:break-word;
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;
  background:
    radial-gradient(1200px 660px at 50% -10%,rgba(201,160,80,.14),transparent 62%),
    radial-gradient(700px 480px at 92% 92%,rgba(196,22,28,.055),transparent 70%);
}
a{color:inherit;text-decoration:none}
img{display:block;max-width:100%}
ol,ul{list-style:none}
:focus-visible{outline:1px solid var(--gold-lit);outline-offset:4px}

.shell{max-width:var(--shell);margin:0 auto;padding-left:var(--gutter);padding-right:var(--gutter);position:relative;z-index:1}
.sec-mid{max-width:980px}
.sec-narrow{max-width:820px}
.center{text-align:center;margin-left:auto;margin-right:auto}
.skip{position:absolute;left:-9999px;background:var(--gold);color:#120D04;padding:10px 16px;z-index:300}
.skip:focus{left:14px;top:14px}

/* frame */
.frame{position:fixed;inset:var(--frame);border:1px solid var(--gold-hair-soft);pointer-events:none;z-index:90}
.frame .c{position:absolute;width:12px;height:12px;border:0 solid var(--gold-hair)}
.frame .tl{top:-1px;left:-1px;border-top-width:1px;border-left-width:1px}
.frame .tr{top:-1px;right:-1px;border-top-width:1px;border-right-width:1px}
.frame .bl{bottom:-1px;left:-1px;border-bottom-width:1px;border-left-width:1px}
.frame .br{bottom:-1px;right:-1px;border-bottom-width:1px;border-right-width:1px}

/* ---- type ---- */
.serif{
  font-family:var(--serif);font-weight:600;
  font-variation-settings:"opsz" 144,"SOFT" 24,"WONK" 0;
  letter-spacing:-.016em;
}
.serif em{font-style:italic;font-variation-settings:"opsz" 144,"SOFT" 60,"WONK" 1;color:var(--gold-lit)}

.ovl{font-size:11.5px;letter-spacing:.22em;font-weight:500;text-transform:uppercase;color:var(--smoke-2);display:flex;align-items:center;gap:12px}
.center .ovl,.ovl.center{justify-content:center}
.ovl.gold{color:var(--gold)}
.ovl.red{color:var(--red)}
.ovl .dot{width:6px;height:6px;border-radius:50%;background:var(--red);flex:none;box-shadow:0 0 10px rgba(196,22,28,.8);animation:pulse 2.4s ease-in-out infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}

.h2{font-size:clamp(28px,3.9vw,50px);line-height:1.1;margin:20px 0 24px;text-wrap:balance;color:var(--white)}
.h2.big{font-size:clamp(32px,4.8vw,60px)}
.h2.dark{color:var(--ink)}
.lede{font-size:clamp(17px,1.5vw,21px);line-height:1.6;color:var(--smoke);max-width:48ch;font-weight:400}
.body-lg{font-size:clamp(16.5px,1.4vw,19px);line-height:1.7;color:var(--smoke);max-width:58ch;font-weight:400}
.center .body-lg{margin-left:auto;margin-right:auto}
.note{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke-2);margin-top:clamp(26px,3vw,36px)}

.orn{display:flex;align-items:center;justify-content:center;gap:14px;margin:clamp(26px,3.4vw,40px) auto;max-width:300px}
.orn-l{flex:1;height:1px;background:linear-gradient(90deg,transparent,var(--gold-hair) 40%,var(--gold))}
.orn-l:last-child{background:linear-gradient(90deg,var(--gold),var(--gold-hair) 60%,transparent)}
.orn-d{width:7px;height:7px;flex:none;transform:rotate(45deg);border:1px solid var(--gold);box-shadow:0 0 12px rgba(201,160,80,.35)}

/* ---- buttons ---- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;
  font-family:var(--sans);font-weight:500;font-size:12.5px;
  letter-spacing:.16em;text-transform:uppercase;
  padding:18px 38px;border:1px solid transparent;
  transition:background .32s ease,color .32s ease,border-color .32s ease,letter-spacing .32s ease;
}
.btn.sm{padding:13px 22px;font-size:11.5px;letter-spacing:.12em}
.btn.lg{padding:22px 54px}
.btn-gold{background:linear-gradient(102deg,#E3C883,var(--gold) 54%,#A67F2E);color:#141006}
.btn-gold:hover{background:linear-gradient(102deg,var(--gold-lit),#E3C883 54%,var(--gold));letter-spacing:.2em}
.btn-line{background:none;color:var(--white);border-color:var(--gold-hair)}
.btn-line:hover{border-color:var(--gold);color:var(--gold-lit);letter-spacing:.2em}
.btn-ink{background:var(--ink);color:var(--paper);border-color:var(--ink);margin-top:30px}
.btn-ink:hover{background:var(--red);border-color:var(--red);letter-spacing:.2em}

/* ---- bar ---- */
/* The bar runs to the screen edges and pads itself in by --frame, so its contents
   stay inside the frame line but nothing can scroll into a strip above or beside it. */
.bar{position:fixed;top:0;left:0;right:0;padding:var(--frame) var(--frame) 0;z-index:95;
  background:rgba(5,4,3,.74);
  -webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);
  border-bottom:1px solid var(--gold-hair-soft);}
.bar-in{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:clamp(18px,3vw,44px);height:94px}
.brand{display:flex;align-items:center;gap:14px}
.brand img{width:clamp(46px,4vw,58px);height:auto;flex:none}
.brand-txt{display:flex;flex-direction:column;line-height:1;gap:5px}
.brand-name{font-family:var(--serif);font-weight:700;font-variation-settings:"opsz" 60,"SOFT" 10,"WONK" 0;
  font-size:clamp(22px,2vw,27px);letter-spacing:-.005em;color:var(--gold-lit)}
.brand-sub{font-size:clamp(9.5px,.85vw,11px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--smoke-2);font-weight:500;white-space:nowrap}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .brand-name{background:linear-gradient(100deg,var(--gold-lit),var(--gold) 52%,var(--gold-deep));
    -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
}
.bar nav{display:flex;gap:clamp(16px,2.2vw,32px);justify-content:flex-end;flex-wrap:nowrap;min-width:0}
.bar nav a{font-size:12px;letter-spacing:.12em;font-weight:400;text-transform:uppercase;color:var(--smoke-2);transition:color .3s}
.bar nav a:hover{color:var(--gold-lit)}
.menu-btn{display:none;grid-column:3;justify-self:end;background:none;border:1px solid var(--gold-hair);color:var(--white);
  padding:11px 16px;font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;cursor:pointer}

/* ---- hero ---- */
.hero{min-height:100vh;min-height:min(100svh,960px);display:flex;flex-direction:column;justify-content:center;padding:clamp(120px,16vh,190px) 0 0}
.hero-in{max-width:1240px}
.hero-h{
  font-size:clamp(38px,7vw,96px);line-height:1.02;margin:clamp(24px,3vw,36px) 0 0;
  color:var(--gold-lit);text-wrap:balance;
}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .hero-h{
    background:linear-gradient(102deg,#FBF3E2 0%,#E7CE94 26%,#C9A050 48%,#EFE0B8 74%,#FBF3E2 100%);
    background-size:220% 100%;background-position:0 0;
    -webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;
    animation:sheen 12s ease-in-out infinite;
  }
  .hero-h em{-webkit-text-fill-color:transparent;color:transparent}
}
@keyframes sheen{0%,100%{background-position:0 0}50%{background-position:100% 0}}
.hero-foot{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:clamp(24px,4vw,60px);align-items:end;
  margin-top:clamp(34px,4.4vw,54px);padding-top:clamp(26px,3vw,34px);border-top:1px solid var(--gold-hair-soft)}
.acts{display:flex;gap:14px;flex-wrap:wrap}
.center-acts{justify-content:center;margin-top:clamp(30px,4vw,42px)}

/* ticker */
.ticker{margin-top:auto;overflow:hidden;border-top:1px solid var(--gold-hair-soft);border-bottom:1px solid var(--gold-hair-soft);padding:20px 0;position:relative;z-index:1}
.tick-track{display:flex;align-items:center;width:max-content;animation:roll 55s linear infinite}
.tick-set{display:flex;align-items:center;gap:clamp(22px,3vw,44px);padding-right:clamp(22px,3vw,44px)}
.tick-set span{font-size:12.5px;letter-spacing:.14em;font-weight:500;text-transform:uppercase;color:var(--smoke-2);white-space:nowrap}
.tick-set i{width:5px;height:5px;flex:none;transform:rotate(45deg);border:1px solid var(--gold);display:block}
@keyframes roll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
.ticker:hover .tick-track{animation-play-state:paused}

/* ---- proof ---- */
.proof{border-bottom:1px solid var(--gold-hair-soft);background:rgba(10,8,7,.6)}
.proof-in{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));text-align:center}
.pf{padding:clamp(30px,4vw,48px) 12px;border-left:1px solid var(--gold-hair-soft);position:relative}
.pf:first-child{border-left:0}
.pf-n{display:block;font-size:clamp(32px,3.8vw,50px);line-height:1;color:var(--gold-lit)}
.pf-l{display:block;margin-top:16px;font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke-2);font-weight:500}

/* ---- sections ---- */
.sec{padding:clamp(76px,11vh,150px) 0;position:relative;scroll-margin-top:96px}
.sec-alt{background:linear-gradient(180deg,rgba(10,8,7,0),rgba(10,8,7,.85) 20%,rgba(10,8,7,.85) 80%,rgba(10,8,7,0))}
.sec-head{max-width:720px;margin-bottom:clamp(42px,5.4vw,68px)}
.sec-head.center{margin-left:auto;margin-right:auto}

/* reasons */
.reasons{border-top:1px solid var(--gold-hair-soft)}
.reasons li{display:grid;grid-template-columns:88px minmax(0,1fr);gap:clamp(14px,2.4vw,34px);
  padding:clamp(24px,3vw,34px) 4px;border-bottom:1px solid var(--gold-hair-soft);position:relative;transition:background .4s ease}
.reasons li::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;
  background:linear-gradient(90deg,var(--red),var(--gold) 60%,transparent);transition:width .6s cubic-bezier(.2,.7,.3,1)}
.reasons li:hover{background:rgba(201,160,80,.03)}
.reasons li:hover::after{width:100%}
.r-n{font-family:var(--serif);font-size:22px;color:var(--gold);letter-spacing:.06em}
.r-h{font-size:clamp(20px,2.1vw,27px);line-height:1.2;margin-bottom:10px;color:var(--white)}
.reasons p{font-size:17px;line-height:1.72;color:var(--smoke);max-width:62ch}

/* plates */
.plates{display:grid;gap:clamp(14px,1.8vw,20px)}
.plates.two{grid-template-columns:repeat(2,minmax(0,1fr))}
.plate{position:relative;padding:clamp(26px,3vw,38px);border:1px solid var(--gold-hair-soft);
  background:linear-gradient(168deg,rgba(201,160,80,.05),rgba(10,8,7,.4) 60%);
  transition:border-color .45s ease,background .45s ease,transform .45s cubic-bezier(.2,.7,.3,1);display:block}
.plate::before,.plate::after{content:"";position:absolute;width:10px;height:10px;border:0 solid var(--gold);opacity:.5;transition:opacity .45s ease}
.plate::before{top:8px;left:8px;border-top-width:1px;border-left-width:1px}
.plate::after{bottom:8px;right:8px;border-bottom-width:1px;border-right-width:1px}
.plate:hover{border-color:var(--gold-hair);transform:translateY(-3px);background:linear-gradient(168deg,rgba(201,160,80,.085),rgba(10,8,7,.45) 60%)}
.plate:hover::before,.plate:hover::after{opacity:1}
.pl-n{font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:500}
.p-h{font-size:clamp(19px,1.9vw,24px);line-height:1.22;color:var(--gold-lit);margin:14px 0 12px}
.plate p{font-size:16.5px;line-height:1.68;color:var(--smoke);max-width:54ch}
.plate.link:hover{border-color:rgba(196,22,28,.4)}
.pl-go{display:inline-block;margin-top:20px;font-size:12px;letter-spacing:.12em;font-weight:500;text-transform:uppercase;color:var(--red-lit);
  border-bottom:1px solid rgba(196,22,28,.4);padding-bottom:3px}

/* platforms */
.plat{border-top:1px solid var(--gold-hair-soft)}
.plat li{display:grid;grid-template-columns:minmax(0,240px) 96px minmax(0,1fr);gap:clamp(14px,2.4vw,32px);
  align-items:baseline;padding:clamp(22px,2.8vw,30px) 4px;border-bottom:1px solid var(--gold-hair-soft);transition:background .4s ease}
.plat li:hover{background:rgba(201,160,80,.03)}
.pt-name{font-size:clamp(21px,2.2vw,28px);color:var(--white);letter-spacing:-.01em}
.pt-tag{font-size:11px;letter-spacing:.1em;font-weight:500;text-transform:uppercase;color:var(--smoke-2);
  border:1px solid var(--gold-hair-soft);padding:5px 9px;text-align:center;white-space:nowrap}
.pt-tag.live{color:var(--red-lit);border-color:rgba(196,22,28,.42)}
.plat p{font-size:16.5px;line-height:1.68;color:var(--smoke);max-width:56ch}

/* ---- light section: The Graft Room ---- */
.light{background:var(--white);color:var(--ink);padding:clamp(72px,10vh,140px) 0;scroll-margin-top:96px;position:relative;z-index:1}
/* Nothing in here inherits a light-on-dark colour. Every value is measured on white. */
.light h2,.light h3,.light p,.light span,.light li{color:var(--ink)}
.light .h2,.light .g-t{color:#0A0806}
.light .serif em{color:var(--red)}
.light::before{content:"";position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,var(--red),var(--gold) 45%,var(--gold-deep))}
.light .ovl.red{color:#A5121A;font-weight:600}
.gr-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(34px,6vw,80px);align-items:start}
.light .prose-dark{font-size:18px;line-height:1.72;color:#241F19;max-width:52ch;margin-bottom:20px;font-weight:400}
.gr-list{border-top:1px solid rgba(12,10,8,.18)}
.gr-list li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:6px 18px;padding:20px 0;border-bottom:1px solid rgba(12,10,8,.18)}
.light .g-d{font-size:12.5px;letter-spacing:.08em;text-transform:uppercase;color:#A5121A;font-weight:600;padding-top:7px}
.g-t{font-family:var(--serif);font-size:21px;color:var(--ink)}
.light .g-x{grid-column:2;font-size:16.5px;line-height:1.62;color:#3A342C}

/* steps */
.steps{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(18px,2.4vw,32px)}
.steps li{padding-top:26px;border-top:1px solid var(--gold-hair)}
.s-n{display:block;font-size:26px;color:var(--gold);letter-spacing:.08em;font-style:italic}
.s-h{font-size:clamp(19px,1.9vw,23px);margin:12px 0;color:var(--white)}
.steps p{font-size:16.5px;line-height:1.68;color:var(--smoke)}

/* quotes */
.quote{padding:clamp(14px,2vw,20px) 0}
.quote blockquote{font-size:clamp(21px,2.8vw,34px);font-style:italic;line-height:1.32;letter-spacing:-.018em;color:var(--white);max-width:22ch;margin:0 auto}
.quote blockquote::before{content:"“";color:var(--gold);margin-left:-.4em}
.quote figcaption{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--smoke-2);margin-top:clamp(18px,2.4vw,26px)}

/* faq */
.faq{border-top:1px solid var(--gold-hair-soft)}
.faq details{border-bottom:1px solid var(--gold-hair-soft)}
.faq summary{display:flex;align-items:center;gap:20px;justify-content:space-between;padding:clamp(20px,2.4vw,26px) 4px;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover .q{color:var(--gold-lit)}
.faq .q{font-size:clamp(18px,1.7vw,22px);line-height:1.35;letter-spacing:-.01em;color:var(--white);transition:color .3s ease}
.faq .mk{position:relative;flex:none;width:14px;height:14px}
.faq .mk::before,.faq .mk::after{content:"";position:absolute;background:var(--gold);transition:transform .35s cubic-bezier(.2,.7,.3,1),opacity .35s ease}
.faq .mk::before{top:6.5px;left:0;width:14px;height:1px}
.faq .mk::after{left:6.5px;top:0;width:1px;height:14px}
.faq details[open] .mk::before{background:var(--red)}
.faq details[open] .mk::after{transform:scaleY(0);opacity:0}
.faq details[open] .q{color:var(--gold-lit)}
.faq .a{padding:0 4px clamp(22px,2.6vw,28px);max-width:70ch}
.faq .a p{font-size:17px;line-height:1.75;color:var(--smoke)}

/* join + seo */
.join{padding-bottom:clamp(86px,13vh,170px)}
.fine{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--smoke-2);margin-top:clamp(26px,3.4vw,36px)}
.seo{border-top:1px solid var(--gold-hair-soft);padding:clamp(56px,7vh,92px) 0;background:rgba(10,8,7,.45)}
.seo-h{font-size:clamp(20px,2.1vw,27px);line-height:1.3;color:var(--gold-lit);margin-bottom:24px;max-width:34ch}
.seo p{font-size:16.5px;line-height:1.8;color:var(--smoke);max-width:70ch;margin-bottom:18px}
.seo p:last-child{margin-bottom:0}

/* footer */
footer{border-top:1px solid var(--gold-hair-soft);padding:clamp(56px,8vh,92px) 0 clamp(34px,5vh,52px);position:relative;z-index:1}
.f-mark img{width:clamp(72px,7vw,92px);height:auto;margin:0 auto 20px}
.f-sub{font-size:12.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-top:10px;font-weight:500}
.f-mark .ovl{justify-content:center;margin-top:12px}
.f-name{font-size:clamp(30px,3vw,38px);letter-spacing:-.01em;color:var(--gold-lit);font-weight:700}
.f-tag{font-size:16.5px;color:var(--smoke);margin-top:20px}
.f-mail{display:inline-block;margin-top:12px;font-size:14.5px;color:var(--gold);border-bottom:1px solid var(--gold-hair);padding-bottom:3px}
.f-mail:hover{color:var(--gold-lit)}
.f-nav{display:flex;flex-wrap:wrap;justify-content:center;gap:14px;margin:clamp(38px,5vw,56px) 0 26px;
  padding-top:clamp(30px,4vw,42px);border-top:1px solid var(--gold-hair-soft);
  font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke-2)}
.f-nav a{transition:color .3s}
.f-nav a:hover{color:var(--gold-lit)}
.f-nav span{color:var(--gold-deep)}
.f-bot{text-align:center;font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke-3)}

/* reveal */
.rv{opacity:0;transform:translateY(18px);transition:opacity 1s cubic-bezier(.2,.7,.3,1),transform 1s cubic-bezier(.2,.7,.3,1)}
.rv.in{opacity:1;transform:none}

/* ---- responsive ---- */

@media (max-width:1080px){
  .hero-foot,.gr-grid{grid-template-columns:1fr;align-items:start}
  .steps{grid-template-columns:repeat(2,minmax(0,1fr))}
  .proof-in{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pf:nth-child(3){border-left:0}
  .pf:nth-child(n+3){border-top:1px solid var(--gold-hair-soft)}
  .plat li{grid-template-columns:minmax(0,1fr) 96px}
  .plat p{grid-column:1/-1}
  .reasons li{grid-template-columns:56px minmax(0,1fr)}
}
@media (max-width:1000px){
  .split-form{grid-template-columns:1fr!important}
}
@media (max-width:900px){
  /* Without JS the nav stays visible and wraps — never a dead end. */
  .js .bar nav{display:none}
  .js .bar-in .btn{display:none}
  .js .menu-btn{display:block}
  .js .bar-in{grid-template-columns:auto 1fr;height:78px}
  .bar nav{flex-wrap:wrap;justify-content:flex-start;gap:14px 18px;padding-bottom:12px}
  .bar-in{height:auto;padding-top:14px;padding-bottom:14px;row-gap:10px}
  /* No JS: logo and button share the first row (the button drops below the logo
     if the two cannot fit), and the links get a full-width row of their own. */
  html:not(.js) .bar-in{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;column-gap:18px}
  html:not(.js) .bar nav{order:3;flex:1 0 100%}
}
@media (max-width:720px){
  .hero{min-height:auto;padding:120px 0 0}
  .plates.two,.steps{grid-template-columns:1fr}
  .proof-in{grid-template-columns:1fr}
  .pf{border-left:0;border-top:1px solid var(--gold-hair-soft)}
  .pf:first-child{border-top:0}
  .acts{flex-direction:column;align-items:stretch}
  .btn{padding:17px 24px;letter-spacing:.2em}
  .btn.lg{padding:19px 28px}
  .btn-gold:hover,.btn-line:hover,.btn-ink:hover{letter-spacing:.2em}
  .quote blockquote{max-width:none}
  .gr-list li{grid-template-columns:1fr}
  .g-x{grid-column:1}
}

@media (prefers-reduced-motion:reduce){
  *{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .rv{opacity:1;transform:none}
  .tick-track{width:100%;flex-wrap:wrap;justify-content:center}
  .tick-set:last-child{display:none}
  .tick-set{flex-wrap:wrap;justify-content:center}
}

/* ==========================================================================
   Inner pages
   ========================================================================== */

.page-hero{padding:clamp(140px,18vh,210px) 0 clamp(46px,6vh,76px);border-bottom:1px solid var(--gold-hair-soft);position:relative}
.page-hero .shell{max-width:1000px}
.crumb{font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke-3);margin-bottom:22px}
.crumb a{color:var(--smoke-2);transition:color .3s}
.crumb a:hover{color:var(--gold-lit)}
.crumb span{color:var(--gold-deep);margin:0 8px}
.page-h{font-size:clamp(34px,5.4vw,66px);line-height:1.04;color:var(--white);text-wrap:balance;margin:16px 0 22px}
.page-hero .lede{max-width:56ch}

.prose{max-width:70ch}
.prose h2{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 60,"SOFT" 24,"WONK" 0;
  font-size:clamp(24px,2.6vw,32px);line-height:1.18;color:var(--white);margin:clamp(38px,5vw,56px) 0 18px;letter-spacing:-.014em}
.prose h3{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 40,"SOFT" 16,"WONK" 0;
  font-size:clamp(19px,2vw,23px);color:var(--gold-lit);margin:30px 0 12px}
.prose p{font-size:17px;line-height:1.78;color:var(--smoke);margin-bottom:18px}
.prose ul,.prose ol{margin:0 0 22px}
.prose li{position:relative;padding:8px 0 8px 28px;font-size:17px;line-height:1.7;color:var(--smoke)}
.prose li::before{content:"";position:absolute;left:4px;top:19px;width:6px;height:6px;transform:rotate(45deg);border:1px solid var(--gold)}
.prose ol{counter-reset:n}
.prose ol li{counter-increment:n}
.prose ol li::before{content:counter(n,decimal-leading-zero);border:0;transform:none;top:8px;left:0;width:auto;height:auto;
  font-family:var(--sans);font-size:12px;letter-spacing:.1em;color:var(--gold);font-weight:600}
.prose a:not(.btn){color:var(--gold-lit);border-bottom:1px solid var(--gold-hair);padding-bottom:1px}
.prose a:not(.btn):hover{border-color:var(--gold)}
.prose strong{color:var(--white);font-weight:600}
.prose hr{border:0;height:1px;background:var(--gold-hair-soft);margin:clamp(38px,5vw,54px) 0}
.prose h4{font-family:var(--sans);font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:26px 0 10px}
.prose blockquote{border-left:2px solid var(--gold);padding:4px 0 4px 22px;margin:0 0 22px;font-size:17px;line-height:1.78;color:var(--smoke);font-style:italic}
/* Legal tables scroll inside their own box on a phone rather than widening the page (same rule as the pricing comparison). */
.prose .tbl{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:0 0 26px}
.prose table{width:100%;min-width:520px;border-collapse:collapse;font-size:15px;line-height:1.55;color:var(--smoke)}
.prose th,.prose td{text-align:left;vertical-align:top;padding:10px 16px 10px 0;border-bottom:1px solid var(--gold-hair-soft)}
.prose th{font-family:var(--sans);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600}

.callout{border:1px solid var(--gold-hair);background:rgba(201,160,80,.05);padding:clamp(22px,2.6vw,30px);margin:28px 0}
.callout p:last-child{margin-bottom:0}
.callout.warn{border-color:rgba(196,22,28,.4);background:rgba(196,22,28,.06)}
.callout .c-t{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:600;margin-bottom:10px;display:block}
.callout.warn .c-t{color:var(--red-lit)}

/* pricing */
.tiers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(14px,1.6vw,18px);align-items:stretch}
.tier{position:relative;display:flex;flex-direction:column;padding:clamp(26px,2.8vw,34px);
  border:1px solid var(--gold-hair-soft);background:linear-gradient(168deg,rgba(201,160,80,.05),rgba(10,8,7,.4) 60%)}
.tier.feature{border-color:var(--gold-hair);background:linear-gradient(168deg,rgba(201,160,80,.11),rgba(10,8,7,.45) 60%)}
.tier-lvl{font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);font-weight:500}
.tier h3{font-family:var(--serif);font-weight:700;font-variation-settings:"opsz" 60,"SOFT" 16,"WONK" 0;
  font-size:clamp(24px,2.3vw,30px);color:var(--white);margin:10px 0 16px;letter-spacing:-.014em}
.tier-p{font-family:var(--serif);font-weight:700;font-size:clamp(32px,3.2vw,42px);line-height:1;color:var(--gold-lit)}
.tier-p small{display:block;font-family:var(--sans);font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--smoke-2);font-weight:500;margin-top:10px}
.tier ul{margin:24px 0 30px;display:grid;gap:12px}
.tier li{position:relative;padding-left:26px;font-size:16px;line-height:1.5;color:var(--smoke)}
.tier li::before{content:"";position:absolute;left:2px;top:8px;width:6px;height:10px;transform:rotate(45deg);
  border-right:1px solid var(--gold);border-bottom:1px solid var(--gold)}
.tier .btn{margin-top:auto;width:100%;padding:16px 14px;font-size:11.5px;letter-spacing:.1em;text-align:center}
.tier-flag{position:absolute;top:-1px;right:-1px;background:var(--gold);color:#141006;
  font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;font-weight:600;padding:6px 12px}

/* billing toggle */
.bill{display:inline-flex;gap:4px;margin:0 auto clamp(24px,3vw,34px);padding:5px;
  border:1px solid var(--gold-hair-soft);border-radius:2px;background:rgba(10,8,7,.4)}
/* max-content is 321px on one line; below ~365px screens it pushed the page wider
   than the phone (Blueprint 1.6). Capped to the column, the badge drops under
   "Annual" as one piece instead. Wider screens still fit on one line, unchanged. */
.bill{display:flex;width:max-content;max-width:100%;margin-left:auto;margin-right:auto}
.bill-opt{background:none;border:0;color:var(--smoke-2);cursor:pointer;font-family:var(--sans);
  font-size:12px;letter-spacing:.12em;text-transform:uppercase;font-weight:500;padding:11px 20px;
  display:inline-flex;align-items:center;gap:8px;transition:color .3s ease,background .3s ease;
  flex-wrap:wrap;justify-content:center}
.bill-opt:hover{color:var(--gold-lit)}
.bill-opt.is-on{background:linear-gradient(102deg,#E3C883,var(--gold) 54%,#A67F2E);color:#141006}
.bill-save{font-size:10px;letter-spacing:.1em;padding:3px 7px;border:1px solid currentColor;opacity:.85;white-space:nowrap}
.bill-opt.is-on .bill-save{border-color:rgba(20,16,6,.4)}

/* forms */
.form{max-width:640px}
.field{margin-bottom:22px}
.field label{display:block;font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--smoke-2);
  font-weight:500;margin-bottom:9px}
.field input,.field select,.field textarea{
  width:100%;background:rgba(255,255,255,.045);border:1px solid var(--gold-hair-soft);color:var(--white);
  font-family:var(--sans);font-size:16.5px;padding:15px 16px;border-radius:0;transition:border-color .3s ease}
.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);outline:none}
.field input::placeholder,.field textarea::placeholder{color:var(--smoke-3)}
.field textarea{min-height:150px;resize:vertical}
.field .hint{font-size:13.5px;color:var(--smoke-3);margin-top:8px;line-height:1.5}

/* Two fields side by side on a wide screen, stacked on a phone. */
.field-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 18px}
@media (max-width:560px){.field-pair{grid-template-columns:1fr}}

/* ---------------------------------------------------------------------------
   The apply form's channel picker.

   EVERY STATE HERE IS GATED ON `.js`, and that is the whole design. With no
   JavaScript the chooser never appears and every channel box simply is —
   visible, enabled and submittable — which is exactly how the platform's own
   apply page degrades. The script only flips data-channel-added; it builds no
   markup and holds no copy of the platform list.
   --------------------------------------------------------------------------- */
.ch-chooser{display:none}
.js .ch-chooser{display:flex;gap:12px;align-items:flex-end;margin-bottom:26px}
.ch-chooser .field{flex:1 1 auto;min-width:0;margin-bottom:0}
.ch-add{flex:none;padding:15px 24px;line-height:1}
.ch-empty{display:none}
.js .ch-empty{display:block;margin-bottom:22px}
.js .ch-empty[hidden]{display:none}
/* Hidden by CSS, DISABLED by script: a disabled field does not submit, so a
   platform nobody added genuinely does not reach the server. */
.js .ch-block[data-channel-added="0"]{display:none}
.ch-remove{display:none;background:none;border:0;padding:0;margin-top:10px;
  font-family:var(--sans);font-size:13px;color:var(--smoke-3);text-decoration:underline;
  cursor:pointer;transition:color .3s ease}
.ch-remove:hover{color:var(--gold-lit)}
.js .ch-block[data-channel-added="1"] .ch-remove{display:inline-block}

/* The optional block that exists to make the review better. Set apart with a
   rule so it reads as "these are extra", not as more required questions. */
.qs-block{border-top:1px solid var(--gold-hair-soft);padding-top:clamp(26px,3.4vw,36px);margin-top:4px}
.qs-head{font-size:12.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);font-weight:600;margin:0}

/* "Where do you stream?" follows "do you stream at all?". Same posture as the
   picker: with no script the fieldset is simply there and every tick submits.
   The server drops the platforms unless the answer is "yes", so a tick left
   behind by a change of mind cannot contradict the yes/no beside it. */
.live-where{border:0;padding:0;margin:0 0 22px}
.live-where legend{display:block;padding:0;font-size:12.5px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--smoke-2);font-weight:500;margin-bottom:9px}
.js .live-where[data-show="0"]{display:none}
.tickgrid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px 16px}
@media (max-width:640px){.tickgrid{grid-template-columns:repeat(2,minmax(0,1fr))}}
.tick{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--smoke);
  text-transform:none;letter-spacing:0;font-weight:400;margin:0;cursor:pointer}
.tick input{width:17px;height:17px;flex:none;margin:0;accent-color:var(--gold)}

/* The age declaration. It is the WHOLE gate now — there is no date of birth on
   the form — so it is stated as a fact about the agency before anyone is asked
   to agree to anything. Emphatic in gold, not a red warning: this is a rule,
   not a telling-off. */
.age-gate{border:1px solid var(--gold-hair);background:linear-gradient(168deg,rgba(201,160,80,.07),rgba(10,8,7,.4) 60%);
  padding:clamp(20px,2.6vw,26px);margin:8px 0 24px}
.age-rule{font-size:clamp(16px,1.5vw,18px);line-height:1.45;color:var(--white);font-weight:600;margin:0}
.age-sub{font-size:14px;line-height:1.55;color:var(--smoke-2);margin:8px 0 0}
.check{display:flex;gap:12px;align-items:flex-start;margin-bottom:24px}
.check input{width:18px;height:18px;flex:none;margin-top:3px;accent-color:var(--gold)}
.check label{font-size:15px;color:var(--smoke);text-transform:none;letter-spacing:0;font-weight:400;margin:0}
.form-status{margin-top:18px;font-size:15px;line-height:1.6;color:var(--smoke)}
.form-status.is-err{color:var(--red-lit)}
.form-status.is-ok{color:var(--gold-lit)}
.form-done{padding:26px 28px;border:1px solid var(--gold-hair);background:linear-gradient(168deg,rgba(201,160,80,.06),rgba(10,8,7,.4) 60%)}
.form-done p{margin:0}
.field-err{font-size:13.5px;color:var(--red-lit);margin-top:8px;line-height:1.5}
.field input.has-err,.field select.has-err,.field textarea.has-err{border-color:var(--red-lit)}
.field .opt{color:var(--smoke-3);text-transform:none;letter-spacing:0;font-weight:400}

/* guide cards */
.guides{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,20px)}
.guide{display:block;padding:clamp(26px,3vw,34px);border:1px solid var(--gold-hair-soft);
  background:linear-gradient(168deg,rgba(201,160,80,.05),rgba(10,8,7,.4) 60%);
  transition:border-color .4s ease,transform .4s cubic-bezier(.2,.7,.3,1)}
.guide:hover{border-color:rgba(196,22,28,.4);transform:translateY(-3px)}
.guide .g-k{font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--gold);font-weight:500}
.guide h3{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 60,"SOFT" 16,"WONK" 0;
  font-size:clamp(20px,2vw,25px);color:var(--white);margin:14px 0 12px;line-height:1.2;letter-spacing:-.012em}
.guide p{font-size:16px;line-height:1.65;color:var(--smoke);max-width:52ch}
.guide .g-go{display:inline-block;margin-top:18px;font-size:12px;letter-spacing:.12em;text-transform:uppercase;
  color:var(--red-lit);font-weight:500;border-bottom:1px solid rgba(196,22,28,.4);padding-bottom:3px}

/* platform hub */
.phub{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.8vw,20px)}
.pcard{display:block;padding:clamp(24px,2.8vw,32px);border:1px solid var(--gold-hair-soft);
  background:linear-gradient(168deg,rgba(201,160,80,.05),rgba(10,8,7,.4) 60%);
  transition:border-color .4s ease,transform .4s cubic-bezier(.2,.7,.3,1)}
.pcard:hover{border-color:var(--gold-hair);transform:translateY(-3px)}
.pcard h3{font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 60,"SOFT" 16,"WONK" 0;
  font-size:clamp(21px,2vw,26px);color:var(--white);margin-bottom:10px;letter-spacing:-.012em}
.pcard p{font-size:15.5px;line-height:1.6;color:var(--smoke)}
.pcard .pt-tag{display:inline-block;margin-bottom:14px}

/* 404 */
.big404{font-family:var(--serif);font-weight:700;font-size:clamp(80px,18vw,200px);line-height:1;color:var(--gold-deep)}

/* Four pricing cards need ~270px each to sit properly. Below that, two. */
@media (max-width:1180px){
  .tiers{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:1080px){
  .phub{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:860px){
  .plates.two,.guides{grid-template-columns:1fr}
}
@media (max-width:720px){
  .tiers,.guides,.phub{grid-template-columns:1fr}
}


/* ==========================================================================
   Mobile menu panel
   ========================================================================== */

.menu-open{overflow:hidden}

.mnav{
  position:fixed;inset:0;z-index:120;
  background:rgba(5,4,3,.97);
  -webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);
  display:flex;align-items:center;justify-content:center;
  padding:calc(var(--frame) + 90px) var(--gutter) calc(var(--frame) + 40px);
  opacity:0;transition:opacity .3s ease;
  overflow-y:auto;
}
.mnav.is-open{opacity:1}
.mnav[hidden]{display:none}

.mnav-in{
  width:100%;max-width:460px;
  display:flex;flex-direction:column;align-items:stretch;gap:6px;
}
.mnav ul{display:flex;flex-direction:column;gap:2px;margin-bottom:26px}
.mnav li{border-bottom:1px solid var(--gold-hair-soft)}
.mnav li:first-child{border-top:1px solid var(--gold-hair-soft)}
.mnav a:not(.btn):not(.mnav-mail){
  display:block;padding:20px 4px;
  font-family:var(--serif);font-weight:600;
  font-variation-settings:"opsz" 60,"SOFT" 20,"WONK" 0;
  font-size:clamp(24px,7vw,32px);line-height:1.15;letter-spacing:-.014em;
  color:var(--white);text-transform:none;
  transform:translateY(14px);opacity:0;
  transition:color .25s ease,transform .45s cubic-bezier(.2,.7,.3,1),opacity .45s ease;
}
.mnav a:not(.btn):not(.mnav-mail):hover,
.mnav a:not(.btn):not(.mnav-mail):focus-visible{color:var(--gold-lit)}
.mnav.is-open a:not(.btn):not(.mnav-mail){transform:none;opacity:1}
.mnav.is-open li:nth-child(1) a{transition-delay:.05s}
.mnav.is-open li:nth-child(2) a{transition-delay:.10s}
.mnav.is-open li:nth-child(3) a{transition-delay:.15s}
.mnav.is-open li:nth-child(4) a{transition-delay:.20s}
.mnav.is-open li:nth-child(5) a{transition-delay:.25s}
.mnav.is-open li:nth-child(6) a{transition-delay:.30s}

.mnav .btn{width:100%;justify-content:center;opacity:0;transform:translateY(14px);
  transition:opacity .45s ease .32s,transform .45s cubic-bezier(.2,.7,.3,1) .32s,background .3s ease}
.mnav.is-open .btn{opacity:1;transform:none}

.mnav-mail{
  display:block;text-align:center;margin-top:22px;
  font-size:14.5px;letter-spacing:.04em;color:var(--gold);
  opacity:0;transition:opacity .45s ease .38s,color .25s ease;
}
.mnav.is-open .mnav-mail{opacity:1}
.mnav-mail:hover{color:var(--gold-lit)}

/* the button sits above the panel so it can still be pressed to close */
.menu-btn{position:relative;z-index:130}
.menu-open .bar{background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;border-bottom-color:transparent}
.menu-open .bar .brand{position:relative;z-index:130}

@media (prefers-reduced-motion:reduce){
  .mnav{transition:none}
  .mnav a:not(.btn):not(.mnav-mail),.mnav .btn,.mnav-mail{opacity:1!important;transform:none!important;transition:none!important}
}

/* ==========================================================================
   Audience split — the apex router (creator vs business)
   Reuses tokens only; no new colours. Added v2 (Kit).
   ========================================================================== */
.paths{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(14px,1.8vw,22px)}
.path{position:relative;display:flex;flex-direction:column;padding:clamp(30px,3.6vw,48px);
  border:1px solid var(--gold-hair-soft);
  background:linear-gradient(168deg,rgba(201,160,80,.06),rgba(10,8,7,.42) 62%);
  transition:border-color .45s ease,transform .45s cubic-bezier(.2,.7,.3,1),background .45s ease}
.path:hover{border-color:var(--gold-hair);transform:translateY(-3px);
  background:linear-gradient(168deg,rgba(201,160,80,.1),rgba(10,8,7,.48) 62%)}
.path .pl-n{color:var(--gold)}
.path h3{font-family:var(--serif);font-weight:700;font-variation-settings:"opsz" 60,"SOFT" 16,"WONK" 0;
  font-size:clamp(24px,2.6vw,34px);color:var(--gold-lit);margin:14px 0 14px;letter-spacing:-.014em;line-height:1.1}
.path p{font-size:16.5px;line-height:1.68;color:var(--smoke);max-width:46ch;margin-bottom:8px}
.path .path-cta{margin-top:auto;padding-top:26px}
.path .path-cta .btn{width:100%}
@media (max-width:820px){.paths{grid-template-columns:1fr}}

/* Pricing source seam marker — visible only in review, harmless in prod */
.srcnote{font-size:12px;letter-spacing:.06em;color:var(--smoke-3);margin-top:22px;font-style:italic}

/* readable compliance disclaimers (sentence copy, not the uppercase .fine chips) */
.hero-fine{max-width:62ch;margin-top:clamp(18px,2vw,24px);text-transform:none;letter-spacing:0;
  font-size:12.5px;line-height:1.55;color:var(--smoke-3)}
.tier-note{display:block;text-transform:none;letter-spacing:0;font-size:11.5px;line-height:1.5;
  color:var(--smoke-3);margin:0 0 22px}

/* ==========================================================================
   About — brand story ("How we got here")
   Extends the existing language only: gold hairlines, the serif display and
   its sheen, the diamond ornament, the corner-marked plate cards.
   No new colours, no new motifs. New class names only — nothing above is touched.
   ========================================================================== */
.story{max-width:1040px;margin:0 auto}

/* the reading beats: a slim serif numeral rail against a measured column */
.story-beat{display:grid;grid-template-columns:clamp(52px,8vw,110px) minmax(0,1fr);
  gap:clamp(16px,3vw,44px);max-width:900px;margin:0 auto}
.story-beat + .story-beat{margin-top:clamp(26px,3.4vw,40px)}
.story-num{grid-column:1;justify-self:end;text-align:right;padding-top:.32em;
  font-family:var(--serif);font-weight:600;font-variation-settings:"opsz" 144,"SOFT" 24,"WONK" 0;
  font-size:clamp(24px,3vw,40px);line-height:1;letter-spacing:.01em;color:var(--gold)}
.story-body{grid-column:2;max-width:64ch}
.story-body p{font-size:17px;line-height:1.78;color:var(--smoke);margin-bottom:18px}
.story-body p:last-child{margin-bottom:0}
.story-first{font-family:var(--serif);font-weight:400;
  font-variation-settings:"opsz" 90,"SOFT" 30,"WONK" 0;letter-spacing:-.012em;
  font-size:clamp(20px,2.1vw,27px)!important;line-height:1.42!important;color:var(--cream)!important}
.story-first strong{color:var(--gold-lit);font-weight:600}
.story-h3{font-size:clamp(21px,2.3vw,29px);line-height:1.16;color:var(--gold-lit);
  margin:0 0 14px;letter-spacing:-.016em}

/* the number, as a moment — the visual hero of the section */
.stat-hero{text-align:center;max-width:760px;margin:clamp(48px,6.5vw,96px) auto}
.stat-hero .ovl{justify-content:center;margin-bottom:clamp(14px,2vw,22px)}
.stat-n{display:block;font-family:var(--serif);font-weight:700;
  font-variation-settings:"opsz" 144,"SOFT" 6,"WONK" 0;
  font-size:clamp(74px,19vw,224px);line-height:.86;letter-spacing:-.03em;color:var(--gold-lit)}
@supports ((-webkit-background-clip:text) or (background-clip:text)){
  .stat-n{background:linear-gradient(102deg,#FBF3E2 0%,#E7CE94 26%,#C9A050 50%,#EFE0B8 74%,#FBF3E2 100%);
    background-size:220% 100%;-webkit-background-clip:text;background-clip:text;
    -webkit-text-fill-color:transparent;color:transparent;animation:sheen 12s ease-in-out infinite}
}
.stat-rule{display:block;width:1px;height:clamp(30px,4.4vw,54px);
  margin:clamp(20px,2.6vw,30px) auto;background:linear-gradient(180deg,var(--gold),transparent)}
.stat-l{font-size:clamp(12.5px,1.2vw,14.5px);letter-spacing:.2em;text-transform:uppercase;
  color:var(--smoke-2);font-weight:500}

/* the two arms, as paired plates (reuses .plates.two / .plate) */
.story-split{max-width:900px;margin:clamp(28px,3.6vw,46px) auto 0}

/* the belief — the closing statement, set as display type */
.story-close{max-width:780px;margin:clamp(42px,5.6vw,78px) auto 0;text-align:center;
  font-weight:400;font-variation-settings:"opsz" 144,"SOFT" 34,"WONK" 0;
  font-size:clamp(19px,2.3vw,29px);line-height:1.42;letter-spacing:-.014em;color:var(--cream)}

@media (max-width:720px){
  .story-beat{grid-template-columns:1fr;gap:6px;max-width:none}
  .story-num{justify-self:start;text-align:left;padding-top:0;margin-bottom:2px;
    font-size:clamp(22px,7vw,30px)}
  .story-body{grid-column:1;max-width:none}
}

/* ==========================================================================
   Membership — two-dial cards + full plan-comparison table
   Extends the existing tier/gold language only. New class names, no restyle.
   ========================================================================== */

/* the breadth/depth dials that sit under each card price */
.tier-dials{display:grid;gap:8px;margin:18px 0 4px}
.tier-dial{display:flex;align-items:baseline;gap:10px;font-size:14px;line-height:1.35;color:var(--white)}
.tier-dial-k{flex:0 0 auto;min-width:56px;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);font-weight:600}

/* comparison table — premium panel
   Container reads as a designed component (rounded, bordered, inner contrast),
   not a bare HTML table. Master is the hero column: a real <col> carries a gold
   stripe that runs unbroken behind the group-divider rows too. */
.cmp-wrap{position:relative;overflow-x:auto;-webkit-overflow-scrolling:touch;
  margin-top:clamp(26px,3.4vw,40px);border:1px solid var(--gold-hair);border-radius:6px;
  background:linear-gradient(168deg,rgba(201,160,80,.06),rgba(10,8,7,.5) 62%);
  box-shadow:0 40px 90px -50px rgba(0,0,0,.95),inset 0 1px 0 rgba(242,223,175,.05)}
@media (min-width:1180px){
  .cmp-wrap{overflow:visible}
  .cmp thead tr th:first-child{border-top-left-radius:6px}
  .cmp thead tr th:last-child{border-top-right-radius:6px}
}
.cmp{width:100%;min-width:720px;border-collapse:collapse;font-family:var(--sans)}
.cmp th,.cmp td{padding:16px 18px;text-align:center;vertical-align:middle;
  border-bottom:1px solid var(--gold-hair-soft)}

.cmp .cmp-col-feature{background:linear-gradient(180deg,rgba(201,160,80,.18),rgba(201,160,80,.045));
  border-left:1px solid var(--gold-hair);border-right:1px solid var(--gold-hair)}

/* header — sticky below the floating top bar */
.cmp thead th{position:sticky;top:calc(var(--frame) + 94px);z-index:2;background:var(--night-2);
  padding-top:22px;padding-bottom:20px;border-bottom:1px solid var(--gold-hair)}
.cmp thead .cmp-feat{text-align:left;font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  color:var(--smoke-3);font-weight:600}
.cmp thead th.cmp-hero{background:linear-gradient(180deg,rgba(201,160,80,.24),rgba(16,13,10,.92));
  border-top:2px solid var(--gold)}
.cmp-tag{display:inline-block;margin-bottom:9px;padding:4px 11px;border-radius:999px;
  background:linear-gradient(102deg,#E3C883,var(--gold) 54%,#A67F2E);color:#141006;
  font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;font-weight:700;
  box-shadow:0 4px 14px -6px rgba(201,160,80,.8)}
.cmp-plan-name{display:block;font-family:var(--serif);font-weight:700;
  font-variation-settings:"opsz" 40,"SOFT" 16,"WONK" 0;
  font-size:clamp(17px,1.6vw,21px);line-height:1.1;letter-spacing:-.01em;color:var(--gold-lit)}
.cmp-plan-price{display:block;margin-top:8px;font-size:13px;color:var(--smoke-2);letter-spacing:.01em}
.cmp-plan-price small{color:var(--smoke-3);font-size:11px}

/* body rows — gentle zebra + hover tracking */
.cmp tbody th{text-align:left;font-weight:500;color:var(--smoke);font-size:14.5px;
  line-height:1.45;padding-right:24px}
.cmp tbody td{font-size:14.5px}
.cmp tbody tr:not(.cmp-group):nth-child(odd){background:rgba(242,223,175,.018)}
.cmp tbody tr:not(.cmp-group):hover{background:rgba(201,160,80,.07)}

/* group dividers — gold eyebrow, diamond ornament, hairline rule, air above */
.cmp .cmp-group th{position:relative;text-align:left;background:transparent;
  padding:32px 18px 13px;border-bottom:1px solid var(--gold-hair);
  font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold);font-weight:600}
.cmp .cmp-group th::before{content:"";display:inline-block;width:6px;height:6px;margin-right:12px;
  transform:rotate(45deg);border:1px solid var(--gold);vertical-align:middle}
.cmp tbody tr.cmp-group:first-child th{padding-top:22px}

/* confident value cells + breadth pills */
.cmp .cmp-val{color:var(--gold-lit);font-weight:600;letter-spacing:.01em}
.cmp-pill{display:inline-block;padding:6px 14px;border-radius:999px;border:1px solid var(--gold-hair);
  background:rgba(201,160,80,.12);color:var(--gold-lit);font-weight:600;font-size:13px;
  letter-spacing:.02em;white-space:nowrap}

/* tick / dash marks — gold disc with a dark check; muted dash for "not included".
   The literal glyph stays in the DOM (font-size:0) so assistive tech still reads it. */
.cmp .is-yes,.cmp .is-no{position:relative;font-size:0;color:transparent}
.cmp .is-yes::before{content:"";display:inline-block;width:22px;height:22px;border-radius:50%;
  background:radial-gradient(circle at 34% 30%,#F7EAC6,var(--gold) 56%,#9A742A);
  box-shadow:0 0 0 1px rgba(201,160,80,.4),0 5px 14px -5px rgba(201,160,80,.7);vertical-align:middle}
.cmp .is-yes::after{content:"";position:absolute;top:50%;left:50%;width:5px;height:9px;
  border:solid #241a06;border-width:0 2px 2px 0;transform:translate(-50%,-62%) rotate(45deg)}
.cmp .is-no::before{content:"";display:inline-block;width:14px;height:2px;border-radius:2px;
  background:var(--smoke-3);opacity:.65;vertical-align:middle}

/* scroll affordance */
.cmp-scroll-note{display:none;font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--smoke-3);margin-top:16px;text-align:center}
@media (max-width:800px){
  .cmp-scroll-note{display:block}
}
@media (max-width:820px){
  .cmp th,.cmp td{padding:14px 13px}
}
@media (max-width:600px){
  .cmp th,.cmp td{padding:13px 11px}
  .cmp-plan-price small{display:block;margin-top:2px}
}

.visually-hidden{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* ==========================================================================
   Membership — 14-day guarantee band + footer compliance line
   Extends existing tokens only (gold hairline, gold wash, serif display).
   ========================================================================== */
.guarantee{display:flex;gap:clamp(20px,3vw,40px);align-items:center;justify-content:center;
  flex-wrap:wrap;max-width:840px;margin:clamp(6px,1.5vw,16px) auto 0;
  padding:clamp(24px,3vw,38px) clamp(26px,4vw,48px);
  border:1px solid var(--gold-hair);background:rgba(201,160,80,.06);position:relative}
.guarantee-badge{flex:none;display:flex;flex-direction:column;align-items:center;justify-content:center;
  width:clamp(98px,12vw,130px);height:clamp(98px,12vw,130px);border-radius:50%;
  border:2px solid var(--gold);background:rgba(201,160,80,.08);text-align:center}
.guarantee-badge b{font-family:var(--serif);font-weight:600;
  font-variation-settings:"opsz" 144,"SOFT" 24,"WONK" 0;
  font-size:clamp(40px,5vw,54px);line-height:1;color:var(--gold-lit)}
.guarantee-badge span{font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;
  margin-top:5px;color:var(--gold)}
.guarantee-txt{max-width:48ch}
.guarantee-txt .ovl{margin-bottom:10px}
.guarantee-txt h2{font-family:var(--serif);font-weight:600;
  font-variation-settings:"opsz" 60,"SOFT" 24,"WONK" 0;
  font-size:clamp(23px,2.7vw,32px);line-height:1.1;margin:0 0 10px;color:var(--cream)}
.guarantee-txt p{font-size:15.5px;line-height:1.62;color:var(--smoke);margin:0}
.guarantee-txt strong{color:var(--white);font-weight:600}
@media (max-width:560px){.guarantee{text-align:center}}

.f-legal{max-width:70ch;margin:18px auto 0;font-size:12px;line-height:1.55;
  color:var(--smoke-3);text-align:center}