/* RA Solutions — sign-up site
   Direction 02 "Cut": near-black page, cream type, champagne as the only accent.
   Candi's palette, measured:
     champagne #BF9F77 on near-black = 8.0:1  → safe as text here
     champagne #BF9F77 on cream      = 2.3:1  → rules and blocks only
     #8A6B3E   on cream              = 4.6:1  → champagne as TEXT on light
     #A8A29A   on near-black         = 6.9:1  → dim body copy
     #5C5851   on cream              = 6.5:1  → dim body copy on light
   Her supplied gray #8A8A8A is 3.2:1 on cream and is deliberately unused for text. */

:root{
  --deep:#0A0A0A;
  --char:#2D2D2D;
  --paper:#FAF6F0;
  --dim:#A8A29A;
  --dim-ink:#5C5851;
  --champagne:#BF9F77;
  --champ-ink:#8A6B3E;
  --hair:rgba(250,246,240,.14);
  --hair-ink:#E2DCD2;
  --ink-hair:#E2DCD2;   /* same value, read as 'hairline on ink-on-paper' */
  --display:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --read:"Instrument Sans",ui-sans-serif,system-ui,sans-serif;
  --gut:clamp(20px,5vw,80px);
  --max:1360px;
}

*{box-sizing:border-box}
/* Smooth scrolling under a 64px sticky masthead buried the top of every anchor
   target - all four nav links and all four CTAs landed with the heading hidden. */
[id]{scroll-margin-top:84px}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{margin:0;background:var(--deep);color:var(--paper);
  font:400 17px/1.65 var(--read);-webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility}
img{max-width:100%}
a{color:inherit}
h1,h2,h3{text-wrap:balance}
p{text-wrap:pretty}

.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gut)}
.mono{font:600 11px/1 var(--read);letter-spacing:.2em;text-transform:uppercase}

/* every interactive thing gets a visible ring on both papers */
a:focus-visible,button:focus-visible,summary:focus-visible{
  outline:2px solid var(--champagne);outline-offset:3px}
.on-paper a:focus-visible,.on-paper button:focus-visible,
.on-paper summary:focus-visible{outline-color:var(--champ-ink)}

/* The colour is pinned with a class-plus-element selector because the legal
   pages' `.doc a` rule otherwise recolours the skip link champagne-on-champagne
   (1.98:1). Verified with the contrast audit, not by eye. */
body a.skip{position:absolute;left:-9999px;top:0;z-index:100;background:var(--champagne);
  color:var(--deep);padding:0 18px;min-height:44px;display:inline-flex;
  align-items:center;font:600 14px/1 var(--read);text-decoration:none}
body a.skip:focus{left:12px;top:12px}

/* ─────────────────────────── buttons ─────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:54px;
  padding:0 30px;text-decoration:none;background:var(--champagne);color:var(--deep);
  border:1px solid var(--champagne);font:600 14px/1 var(--read);letter-spacing:.06em;
  text-transform:uppercase;transition:background .14s,border-color .14s,color .14s}
.btn:hover{background:var(--paper);border-color:var(--paper)}
.btn.line{background:transparent;color:var(--paper);border-color:var(--hair)}
.btn.line:hover{background:var(--paper);color:var(--deep);border-color:var(--paper)}
.btn.ink{background:var(--char);color:var(--paper);border-color:var(--char)}
.btn.ink:hover{background:var(--deep);border-color:var(--deep)}
/* Applied by site.js while SIGNUP_URL is null. aria-disabled alone blocks nothing
   and changes nothing visually, so the biggest element on the page looked live
   while going nowhere. */
.btn[aria-disabled="true"]{background:transparent;color:var(--dim);
  border-color:var(--hair);cursor:not-allowed}
.btn[aria-disabled="true"]:hover{background:transparent;color:var(--dim);
  border-color:var(--hair)}
.on-paper .btn[aria-disabled="true"]{color:var(--dim-ink);border-color:var(--hair-ink);
  background:transparent}
.on-paper .btn[aria-disabled="true"]:hover{color:var(--dim-ink);
  border-color:var(--hair-ink);background:transparent}
/* While sign-up is pending the primary CTA ghosts out, which left the hero with
   two identical outline buttons and no visual primary. Promote the secondary so
   the page still has one obvious next move. */
.acts:has(.btn[aria-disabled="true"]) .btn.line{background:var(--champagne);
  color:var(--deep);border-color:var(--champagne)}
.acts:has(.btn[aria-disabled="true"]) .btn.line:hover{background:var(--paper);
  border-color:var(--paper);color:var(--deep)}

/* ─────────────────────────── masthead ─────────────────────────── */
.top{position:sticky;top:0;z-index:30;background:var(--deep);
  border-bottom:1px solid var(--hair)}
.top .wrap{display:flex;align-items:center;gap:clamp(14px,3vw,40px);height:64px}
.top .brand{display:flex;align-items:center;flex:none;min-height:44px}
.top .brand img{height:22px;width:auto;display:block}
.top nav{margin-left:auto;display:none;gap:clamp(14px,2vw,30px);align-items:center}
.top nav a{text-decoration:none;color:var(--dim);padding:20px 0;
  font:500 12px/1 var(--read);letter-spacing:.14em;text-transform:uppercase}
.top nav a:hover{color:var(--paper)}
.top .join{color:var(--deep);background:var(--champagne);padding:0 18px;min-height:44px;
  display:inline-flex;align-items:center;flex:none;text-decoration:none;
  font:600 12px/1 var(--read);letter-spacing:.12em;text-transform:uppercase;
  margin-left:auto}
.top .join:hover{background:var(--paper)}
@media(min-width:900px){
  .top nav{display:flex}
  /* only give up the auto margin when a nav is actually there to carry it -
     404.html has no nav and the button ended up jammed against the wordmark */
  .top nav + .join{margin-left:0}
}

/* ─────────────────────────── hero ─────────────────────────────── */
/* The one moment on this page: her RA monogram at full page height, clipped off
   the left edge, with the headline sitting over it. */
.hero{position:relative;display:flex;align-items:center;overflow:clip;
  min-height:clamp(560px,86vh,940px);border-bottom:1px solid var(--hair)}
.hero .mark{position:absolute;left:-14vw;top:50%;height:130%;width:auto;
  opacity:.1;pointer-events:none;
  animation:settle 1.2s cubic-bezier(.16,1,.3,1) both}
@keyframes settle{
  from{opacity:0;transform:translateY(-50%) scale(1.14)}
  to{opacity:.1;transform:translateY(-50%) scale(1.02)}}
.hero .wrap{position:relative;width:100%;
  padding-block:clamp(56px,9vw,120px)}
.tag{display:inline-flex;align-items:center;gap:10px;color:var(--champagne);
  margin-bottom:28px}
.tag::before{content:"";width:34px;height:1px;background:var(--champagne)}
.hero h1{margin:0;font:800 clamp(44px,8.2vw,128px)/.94 var(--display);
  letter-spacing:-.035em;max-width:17ch}
.hero h1 .thin{font-weight:500;color:var(--dim)}
.hero .cols{display:grid;gap:30px;margin-top:clamp(30px,4vw,54px)}
.hero p{margin:0;font-size:clamp(17px,1.25vw,19px);color:var(--dim);max-width:46ch}
.hero p b{color:var(--paper);font-weight:600}
.acts{display:flex;flex-wrap:wrap;gap:12px}
.note{margin-top:16px!important;font-size:14px!important;color:var(--dim)}
@media(min-width:940px){
  .hero .cols{grid-template-columns:minmax(0,.58fr) minmax(0,.42fr);
    gap:clamp(40px,6vw,96px);align-items:start}
}

/* ─────────────────────────── spec strip ──────────────────────── */
.strip{border-bottom:1px solid var(--hair)}
.strip .wrap{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  padding-block:0}
.strip div{padding:clamp(22px,3vw,40px) clamp(14px,2vw,32px);
  border-right:1px solid var(--hair);border-bottom:1px solid var(--hair)}
.strip div:first-child{padding-left:0}
.strip div:nth-child(2n){border-right:0}
.strip div:nth-last-child(-n+2){border-bottom:0}
.strip dt{color:var(--champagne);margin:0 0 12px}
.strip dd{margin:0;font:500 clamp(17px,1.5vw,21px)/1.3 var(--display);
  letter-spacing:-.01em}
@media(min-width:940px){
  .strip .wrap{grid-template-columns:repeat(4,minmax(0,1fr))}
  .strip div{border-bottom:0}
  .strip div:nth-child(2n){border-right:1px solid var(--hair)}
  .strip div:last-child{border-right:0}
}

/* ─────────────── the split: dark list against a cream slab ─────────────── */
.split{display:grid}
.split .dark{padding-block:clamp(48px,7vw,112px)}
/* The split is full-bleed, so its left column has to reproduce .wrap's optical
   left edge by hand - otherwise the list sits indented from the nav and hero
   above it, which reads as a floating block rather than a page. */
.split .dark .inner{max-width:720px;
  padding-right:clamp(20px,4vw,64px);
  padding-left:max(var(--gut), calc((100vw - var(--max)) / 2 + var(--gut)))}
@media(min-width:940px){
  .split{grid-template-columns:minmax(0,.56fr) minmax(0,.44fr)}
}
h2.big{margin:0 0 clamp(22px,3vw,38px);font:700 clamp(29px,4.2vw,58px)/1.03 var(--display);
  letter-spacing:-.03em;max-width:20ch}

.list{list-style:none;margin:0;padding:0;counter-reset:n}
.list li{counter-increment:n;padding:20px 0;border-top:1px solid var(--hair);
  display:grid;grid-template-columns:auto 1fr;gap:4px 18px}
.list li:last-child{border-bottom:1px solid var(--hair)}
.list li::before{content:counter(n,decimal-leading-zero);
  font:500 13px/1.6 var(--read);letter-spacing:.1em;color:var(--champagne)}
.list h3{margin:0;font:600 clamp(18px,1.5vw,21px)/1.3 var(--read);letter-spacing:-.01em}
.list p{margin:6px 0 0;grid-column:2;color:var(--dim);font-size:16px;max-width:52ch}

/* the cream slab carries pricing — it is what keeps a near-black page warm */
.slab{background:var(--paper);color:var(--char);
  padding:clamp(40px,6vw,80px) clamp(22px,4vw,56px)}
.slab .eyebrow{color:var(--champ-ink);margin:0 0 20px}
.slab .fig{margin:0;font:800 clamp(72px,10vw,142px)/.82 var(--display);
  letter-spacing:-.05em;display:flex;align-items:flex-start;gap:.04em}
.slab .fig .cur{font-size:.34em;line-height:1.55;font-weight:700}
.slab .per{display:block;margin-top:10px;font:500 14px/1.4 var(--read);
  color:var(--dim-ink)}
.slab .tbd{display:inline-block;margin-top:16px;padding:6px 12px;background:var(--char);
  color:var(--paper);font:600 11px/1.4 var(--read);letter-spacing:.14em;
  text-transform:uppercase}
.slab ul{list-style:none;margin:26px 0 0;padding:0}
.slab li{padding:12px 0;border-top:1px solid var(--hair-ink);display:flex;gap:14px;
  font-size:16px}
.slab li:last-child{border-bottom:1px solid var(--hair-ink)}
.slab li span:first-child{color:var(--champ-ink);flex:none}
.slab .btn{margin-top:28px;width:100%}
.slab .fine{margin:16px 0 0;font-size:14px;color:var(--dim-ink)}

/* ────────────── week one: a measured timeline, not a card grid ────────── */
.week{padding-block:clamp(48px,7vw,104px);border-top:1px solid var(--hair)}
.week .head{display:grid;gap:14px;margin-bottom:clamp(30px,4vw,52px)}
.week .head span{color:var(--champagne)}
.rail{display:grid;gap:0}
.step{display:grid;grid-template-columns:1fr;gap:0 clamp(18px,3vw,40px);
  padding-bottom:clamp(26px,3.4vw,44px)}
.step .when{font:500 12px/1 var(--read);letter-spacing:.16em;text-transform:uppercase;
  color:var(--champagne);padding-top:6px;min-width:6.5em}
.step .body{position:relative;border-left:1px solid var(--hair);
  padding-left:clamp(18px,3vw,40px);padding-bottom:4px}
.step:last-child .body{border-left-color:transparent}
.step .body::before{content:"";position:absolute;left:0;top:8px;width:9px;height:9px;
  background:var(--champagne);transform:translateX(-5px)}   /* on .body's own rule */
.step h3{margin:0;font:600 clamp(19px,1.7vw,24px)/1.25 var(--display);
  letter-spacing:-.015em}
.step p{margin:8px 0 0;color:var(--dim);max-width:56ch}
@media(min-width:800px){
  /* two children, two columns - and the dot needs no coordinate because it is
     positioned against .body, which owns the rule it sits on */
  .step{grid-template-columns:minmax(0,9em) minmax(0,1fr)}
}
@media(max-width:799px){
  .step .when{padding-left:26px;padding-bottom:6px}
  .step .body{padding-left:26px}
  .step .body::before{top:2px}
}

/* ────────────── claim plate: the rhythm break ────────────── */
.plate{background:var(--paper);color:var(--char);
  padding-block:clamp(52px,8vw,124px)}
.plate .wrap{display:grid;gap:22px}
.plate span{color:var(--champ-ink)}
.plate p{margin:0;font:500 clamp(26px,4.4vw,66px)/1.06 var(--display);
  letter-spacing:-.03em;max-width:24ch}
.plate p em{font-style:normal;color:var(--champ-ink)}
@media(min-width:980px){
  .plate .wrap{grid-template-columns:minmax(0,.32fr) minmax(0,.68fr);
    gap:clamp(30px,5vw,80px);align-items:start}
}

/* ────────────── leads add-on ────────────── */
.leads{padding-block:clamp(48px,7vw,104px);border-bottom:1px solid var(--hair)}
.leads .wrap{display:grid;gap:clamp(26px,4vw,64px)}
.leads .aside{border-top:1px solid var(--hair);padding-top:22px}
.leads .aside p{margin:0;color:var(--dim);font-size:16px}
.leads .aside p + p{margin-top:14px}
.leads span{color:var(--champagne)}
@media(min-width:940px){
  .leads .wrap{grid-template-columns:minmax(0,.54fr) minmax(0,.46fr);align-items:start}
}

.lede-dim{margin:0;color:var(--dim);max-width:52ch}
.leads .acts{margin-top:26px}

/* ────────────── contact: a cream reversal near the bottom, which also
   breaks what was a run of four near-black sections ────────────── */
.contact{background:var(--paper);color:var(--char);
  padding-block:clamp(44px,6vw,96px)}
.contact .wrap{display:grid;gap:clamp(22px,3vw,56px)}
.contact span.mono{color:var(--champ-ink)}
.contact h2{color:var(--char)}
.contact p{margin:0 0 16px;color:var(--dim-ink);max-width:48ch}
.contact .addr{margin:0;font:600 clamp(18px,1.8vw,24px)/1.4 var(--display)}
@media(min-width:940px){
  .contact .wrap{grid-template-columns:minmax(0,.52fr) minmax(0,.48fr);
    align-items:start}
}

/* ────────────── questions: native details, no library ────────────── */
.faq{padding-block:clamp(48px,7vw,104px)}
.faq details{border-top:1px solid var(--hair)}
.faq details:last-of-type{border-bottom:1px solid var(--hair)}
.faq summary{list-style:none;cursor:pointer;display:flex;gap:18px;align-items:baseline;
  padding:22px 0;font:600 clamp(17px,1.5vw,21px)/1.35 var(--read);letter-spacing:-.01em}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";margin-left:auto;color:var(--champagne);
  font:400 26px/1 var(--display);flex:none;transition:transform .16s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:var(--champagne)}
.faq .a{margin:0 0 24px;color:var(--dim);max-width:70ch}

/* ────────────── closing + footer ────────────── */
.end{padding-block:clamp(60px,10vw,146px);border-top:1px solid var(--hair)}
.end h2{margin:0 0 clamp(26px,4vw,44px);font:800 clamp(36px,7vw,112px)/.96 var(--display);
  letter-spacing:-.04em;max-width:18ch}
.end h2 em{font-style:normal;color:var(--champagne)}
.foot{border-top:1px solid var(--hair)}
.foot .wrap{display:flex;flex-wrap:wrap;gap:4px 20px;align-items:center;
  padding-block:14px;font:400 13px/1.6 var(--read);color:var(--dim)}
.foot img{height:16px;width:auto;opacity:.8}
.foot .sp{margin-left:auto}
/* footer links are real tap targets, not 21px of text */
.foot a{text-decoration:none;display:inline-flex;align-items:center;min-height:44px;
  padding:0 2px}
.foot a:hover{color:var(--paper)}

/* ────────────── mobile: the action is a pinned bar ────────────── */
.bar{display:none}
/* This breakpoint MUST stay matched to .top nav's 900px. When the bar stopped at
   699px and the nav started at 900px, tablets and landscape phones got no section
   nav and no primary action at all. */
@media(max-width:899px){
  .bar{position:fixed;left:0;right:0;bottom:0;z-index:40;padding:10px 14px;
    background:rgba(10,10,10,.96);border-top:1px solid var(--hair);display:flex}
  .bar .btn{flex:1}
  body{padding-bottom:88px}
  /* the pinned bar already carries this exact action - two identical champagne
     buttons in one viewport read as a duplicate render */
  .hero .acts .btn:not(.line){display:none}
  /* oversized type IS the identity here; 8.2vw never engages below 536px, so the
     phone was getting the clamp floor */
  .hero h1{font-size:clamp(52px,9.4vw,128px)}
  /* the monogram has to come back inside the viewport on a phone */
  .hero .mark{left:-32vw;height:92%;opacity:.08}
  @keyframes settle{from{opacity:0}to{opacity:.08}}
}

/* ────────────── legal pages (cream, read like a document) ────────────── */
.doc{background:var(--paper);color:var(--char)}
.doc .page{max-width:760px;margin:0 auto;padding:clamp(40px,7vw,96px) var(--gut)
  clamp(60px,9vw,120px)}
.doc h1{margin:0 0 10px;font:700 clamp(32px,5vw,58px)/1.02 var(--display);
  letter-spacing:-.03em}
.doc .updated{margin:0 0 clamp(30px,4vw,48px);color:var(--dim-ink);font-size:15px}
.doc h2{margin:clamp(34px,4vw,52px) 0 12px;font:600 clamp(20px,2vw,26px)/1.25 var(--display);
  letter-spacing:-.015em;padding-top:18px;border-top:1px solid var(--hair-ink)}
.doc p,.doc li{color:var(--dim-ink)}
.doc p{margin:0 0 16px}
.doc ul{margin:0 0 16px;padding-left:20px}
.doc li{margin-bottom:8px}
.doc a{color:var(--champ-ink)}
.doc .back{display:inline-flex;align-items:center;gap:8px;margin-bottom:22px;min-height:44px;
  text-decoration:none;color:var(--champ-ink);font:600 12px/1 var(--read);
  letter-spacing:.14em;text-transform:uppercase}
.doc-foot{display:flex;flex-wrap:wrap;gap:0 24px;margin-top:48px}
.doc-foot a{display:inline-flex;align-items:center;min-height:44px;
  text-decoration:none;color:var(--champ-ink);font:600 12px/1 var(--read);
  letter-spacing:.14em;text-transform:uppercase}
.doc-foot a:hover{text-decoration:underline}
.doc .lede{font-size:19px;color:var(--char);margin-bottom:18px;max-width:62ch}
.doc .toc{border-top:1px solid var(--hair-ink);border-bottom:1px solid var(--hair-ink);
  padding:22px 0;margin:0 0 8px}
.doc .toc h4{margin:0 0 12px;font:600 11px/1 var(--read);letter-spacing:.2em;
  text-transform:uppercase;color:var(--champ-ink)}
/* the entries already carry their own "1." etc, so the list must not add a
   second marker */
.doc .toc ol{margin:0;padding-left:0;list-style:none;columns:2;column-gap:32px}
.doc .toc li{margin-bottom:0;break-inside:avoid}
/* each entry is a full tap target - a 20px line of text is not */
.doc .toc a{text-decoration:none;color:var(--dim-ink);display:flex;align-items:center;
  min-height:44px}
.doc .toc a:hover{color:var(--char);text-decoration:underline}
@media(max-width:560px){.doc .toc ol{columns:1}}
/* an unresolved value that must never ship unnoticed */
.tbd-inline{background:var(--champagne);color:var(--deep);padding:1px 6px;
  font-weight:600;border-radius:0}

/* 404 */
.lost{min-height:70vh;display:flex;align-items:center}
/* without this the wrap shrinks to its content and margin:0 auto centres it,
   so the headline floated off the gutter the logos sit on */
.lost .wrap{width:100%}
.lost h1{margin:0 0 18px;font:800 clamp(56px,12vw,150px)/.9 var(--display);
  letter-spacing:-.05em}
.lost p{margin:0 0 30px;color:var(--dim);max-width:44ch}

@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;
    transition-duration:.01ms!important}
  .hero .mark{opacity:.1}
}

/* ═══════════════════════════════════════════════════════════════════════════
   AGENT PAGES (the "embed" lane)

   support / course / nextsteps / snapshotrequest / zoom load inside HighLevel
   through a custom menu link. HighLevel supplies the navigation and the frame, so
   these pages carry NO site header, no nav and no footer links — a marketing
   header inside that frame is duplicate chrome that lets an agent navigate out of
   the CRM. A page title block and one copyright line are fine.

   They also run on CREAM rather than the marketing pages' near-black: HighLevel's
   workspace is a light UI, and dropping a near-black page into it reads as broken.
   Dark to sell, light to work in — a deliberate split.
   ═══════════════════════════════════════════════════════════════════════════ */

.embed{background:var(--paper);color:var(--char)}
/* a champagne hairline at the very top is the only brand chrome these pages get */
.embed::before{content:"";display:block;height:3px;background:var(--champagne)}
.embed .page{max-width:1080px;margin:0 auto;
  padding:clamp(30px,5vw,64px) clamp(20px,5vw,72px) clamp(52px,8vw,104px)}
.embed .phead{margin:0 0 clamp(26px,3.4vw,44px);padding-bottom:clamp(20px,3vw,32px);
  border-bottom:1px solid var(--ink-hair)}
/* the first ruled row after the header would otherwise draw a second line a gap
   below the first, which reads as a rendering fault rather than a composition */
.embed .phead + .rows > :first-child,
.embed .phead + .vlist > :first-child{border-top:0;padding-top:0}
.embed .phead .mono{color:var(--champ-ink);display:block;margin-bottom:14px}
.embed h1{margin:0;font:700 clamp(32px,5.4vw,64px)/1.02 var(--display);
  letter-spacing:-.035em;max-width:22ch;color:var(--char)}
.embed h1 .thin{font-weight:500;color:var(--dim-ink)}
.embed .phead p{margin:18px 0 0;color:var(--dim-ink);max-width:58ch;
  font-size:clamp(16px,1.2vw,18px)}
.embed h2{margin:clamp(40px,5vw,72px) 0 clamp(18px,2.4vw,28px);
  font:700 clamp(23px,2.8vw,34px)/1.12 var(--display);letter-spacing:-.025em;
  color:var(--char);max-width:26ch}
.embed h2:first-of-type{margin-top:0}
.embed .back{display:inline-flex;align-items:center;gap:8px;min-height:44px;
  text-decoration:none;color:var(--champ-ink);font:600 12px/1 var(--read);
  letter-spacing:.14em;text-transform:uppercase;margin-bottom:8px}
.embed .back:hover{text-decoration:underline}
.embed .efoot{margin-top:clamp(44px,6vw,80px);padding-top:20px;
  border-top:1px solid var(--ink-hair);font:400 13px/1.6 var(--read);
  color:var(--dim-ink)}

/* ── glyphs ─────────────────────────────────────────────────────────────────
   Hand-drawn, not a library: 24px box, 1.25 stroke, square joins and caps, so
   they read as the same hand that drew the thin geometric monogram. They mark
   what a row IS — they are never decoration, and never sit in a rounded tile. */
.g{width:28px;height:28px;flex:none;stroke:var(--champ-ink);fill:none;
  stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;
  vector-effect:non-scaling-stroke}
.on-dark .g{stroke:var(--champagne);stroke-width:1.35}

/* ── ruled rows: the shape every agent page uses instead of a card grid ──── */
.rows{margin:0;padding:0;list-style:none}
.row2{display:grid;grid-template-columns:26px 1fr;gap:6px 18px;
  padding:clamp(22px,2.6vw,30px) 0;border-top:1px solid var(--ink-hair);
  align-items:start}
.rows > :last-child{border-bottom:1px solid var(--ink-hair)}
.row2 h3{margin:0;font:600 clamp(18px,1.6vw,22px)/1.28 var(--read);
  letter-spacing:-.012em;align-self:center}
.row2 .rbody{grid-column:2}
.row2 p{margin:8px 0 0;color:var(--dim-ink);max-width:62ch}
.row2 .act{margin-top:16px}
.textlink{display:inline-flex;align-items:center;gap:9px;min-height:44px;
  text-decoration:none;color:var(--char);font:600 13px/1 var(--read);
  letter-spacing:.1em;text-transform:uppercase;padding-bottom:2px;
  box-shadow:inset 0 -1px 0 var(--champagne)}
.textlink:hover{color:var(--champ-ink);box-shadow:inset 0 -1px 0 var(--champ-ink)}
.textlink[aria-disabled="true"]{color:var(--dim-ink);cursor:not-allowed;
  box-shadow:inset 0 -1px 0 var(--ink-hair)}
.textlink .arr{transition:transform .14s}
.textlink:hover .arr{transform:translateX(3px)}
.on-dark .textlink{color:var(--paper)}
.on-dark .textlink:hover{color:var(--champagne)}
@media(min-width:860px){
  .row2{grid-template-columns:26px minmax(0,260px) minmax(0,1fr);
    gap:0 clamp(22px,3vw,48px);align-items:baseline}
  .row2 .rbody{grid-column:3}
  .row2 p{margin:0}
  .row2 .g{align-self:center}
}

/* ── four-up fact block: hairline quadrants, no tiles ───────────────────── */
.quad{display:grid;grid-template-columns:1fr;border-top:1px solid var(--ink-hair)}
.quad div{padding:clamp(20px,2.4vw,28px) clamp(16px,2vw,28px) clamp(20px,2.4vw,28px) 0;
  border-bottom:1px solid var(--ink-hair)}
.quad dt{margin:0 0 10px;font:600 clamp(16px,1.4vw,19px)/1.3 var(--display);
  letter-spacing:-.01em}
.quad dd{margin:0;color:var(--dim-ink);font-size:16px;max-width:44ch}
@media(min-width:760px){
  .quad{grid-template-columns:repeat(2,minmax(0,1fr))}
  .quad div:nth-child(odd){border-right:1px solid var(--ink-hair);
    padding-right:clamp(24px,3vw,44px)}
  .quad div:nth-child(even){padding-left:clamp(24px,3vw,44px)}
}

/* ── verticals: index numerals on hairlines, same device as the home list ── */
.vlist{margin:0;padding:0;list-style:none;counter-reset:v}
.vlist li{counter-increment:v;display:grid;grid-template-columns:auto 1fr;
  gap:6px 20px;padding:clamp(22px,2.6vw,30px) 0;
  border-top:1px solid var(--ink-hair)}
.vlist li:last-child{border-bottom:1px solid var(--ink-hair)}
.vlist li::before{content:counter(v,decimal-leading-zero);
  font:400 clamp(24px,2.8vw,38px)/1 var(--display);color:var(--champ-ink);
  letter-spacing:-.02em;min-width:2.4ch}
.vlist h3{margin:0;font:600 clamp(19px,1.7vw,24px)/1.22 var(--read);
  letter-spacing:-.012em}
.vlist p{margin:8px 0 0;grid-column:2;color:var(--dim-ink);max-width:66ch}
.vlist .act{grid-column:2;margin-top:14px}
@media(min-width:900px){
  .vlist li{grid-template-columns:auto minmax(0,240px) minmax(0,1fr);
    gap:0 clamp(24px,3.4vw,52px);align-items:baseline}
  .vlist p,.vlist .act{grid-column:3}
  .vlist p{margin:0}
  .vlist .act{margin-top:16px}
}

/* ── course: sections of ruled lesson rows, with an honest empty state ──── */
.csec{margin-top:clamp(40px,5vw,72px)}
.csec .chead{padding-bottom:16px;border-bottom:1px solid var(--char)}
.csec .chead .mono{color:var(--champ-ink)}
.csec .chead h2{margin:12px 0 0}
.csec .chead p{margin:12px 0 0;color:var(--dim-ink);max-width:56ch}
.lessons{margin:0;padding:0;list-style:none;counter-reset:l}
.lesson{counter-increment:l;display:grid;
  grid-template-columns:auto minmax(0,1fr) auto;gap:4px 16px;align-items:center;
  padding:18px 0;border-bottom:1px solid var(--ink-hair)}
.lesson::before{content:counter(l,decimal-leading-zero);
  font:500 13px/1 var(--read);letter-spacing:.1em;color:var(--champ-ink);
  min-width:2.6ch}
.lesson h3{margin:0;font:500 clamp(16px,1.35vw,19px)/1.35 var(--read);
  letter-spacing:-.008em}
.lesson .state{font:600 11px/1 var(--read);letter-spacing:.16em;
  text-transform:uppercase;color:var(--dim-ink);white-space:nowrap}
.lesson[data-ready="yes"]{cursor:pointer}
.lesson[data-ready="yes"]:hover{background:rgba(191,159,119,.1)}
.lesson[data-ready="yes"] .state{color:var(--champ-ink)}
@media(max-width:620px){
  .lesson{grid-template-columns:auto minmax(0,1fr);gap:4px 12px}
  .lesson .state{grid-column:2;justify-self:start;margin-top:4px}
}

/* ── zoom: one plate, the room, nothing else competing ─────────────────── */
.room{margin-top:clamp(26px,3vw,40px);background:var(--char);color:var(--paper);
  padding:clamp(30px,4.4vw,60px);max-width:780px}
.room h2{margin:0;color:var(--paper);max-width:24ch}
.room p{margin:16px 0 0;color:#D7D1C7;max-width:52ch}
.room .btn{margin-top:clamp(24px,3vw,36px)}
.room .id{margin-top:clamp(26px,3vw,38px);padding-top:20px;
  border-top:1px solid var(--hair);font:500 14px/1.5 var(--read);color:#D7D1C7}
.room .id b{display:block;margin-top:10px;
  font:700 clamp(30px,5vw,64px)/1.05 var(--display);
  letter-spacing:-.01em;color:var(--champagne);
  /* people read this one out loud on a call - it must not break across lines */
  white-space:nowrap}
.tip{margin-top:clamp(26px,3vw,40px);padding:20px 0 0;
  border-top:1px solid var(--ink-hair);color:var(--dim-ink);font-size:16px}
.tip{display:flow-root}
/* the rule spans the column; the text inside it stays measured */
.tip > .m{display:block;max-width:62ch}
.tip b{color:var(--char);font-weight:600}

/* ── nextsteps: the same measured rail the home page uses ───────────────── */
.embed .rail .step .body{border-left-color:var(--ink-hair)}
.embed .rail .step .body::before{background:var(--champagne)}
.embed .rail .step .when{color:var(--champ-ink)}
.embed .rail .step h3{color:var(--char)}
.embed .rail .step p{color:var(--dim-ink)}
.embed .note-box{margin-top:16px;padding:16px 18px;background:rgba(191,159,119,.14);
  border-left:3px solid var(--champagne);color:var(--dim-ink);font-size:16px;
  max-width:60ch}
.embed .note-box b{color:var(--char);font-weight:600}

/* video slot: real player when there is a file, honest placeholder when not */
.vslot{margin:clamp(22px,2.6vw,32px) 0 0;border:1px solid var(--ink-hair);
  background:#F1EBE1;display:flex;align-items:center;justify-content:center;
  text-align:center;padding:22px;min-height:96px}
/* only give it 16:9 once there is actually a file to play - an empty box does not
   deserve half the first screen */
.vslot:has(video){aspect-ratio:16/9;padding:0;min-height:0}
.vslot video{width:100%;height:100%;display:block;object-fit:cover}
.vslot .ph{color:var(--dim-ink);font:600 12px/1.6 var(--read);letter-spacing:.16em;
  text-transform:uppercase;max-width:30ch}

/* ── signup page ────────────────────────────────────────────────────────── */
.plan{border-top:1px solid var(--hair);margin-top:clamp(30px,4vw,54px)}
.plan .wrap{display:grid;gap:clamp(28px,4vw,64px);padding-block:clamp(40px,6vw,88px)}
@media(min-width:940px){
  .plan .wrap{grid-template-columns:minmax(0,.46fr) minmax(0,.54fr);align-items:start}
}
.plan .fig{margin:0;font:800 clamp(76px,11vw,156px)/.82 var(--display);
  letter-spacing:-.05em;display:flex;align-items:flex-start;gap:.04em}
.plan .fig .cur{font-size:.34em;line-height:1.55;font-weight:700}
.plan .per{display:block;margin-top:10px;color:var(--dim);font:500 14px/1.4 var(--read)}
.plan .tbd{display:inline-block;margin-top:16px;padding:6px 12px;
  background:var(--champagne);color:var(--deep);font:600 11px/1.4 var(--read);
  letter-spacing:.14em;text-transform:uppercase}
.plan .mono{color:var(--champagne)}
.on-dark .rows > *,.on-dark .row2{border-color:var(--hair)}
.on-dark .row2 h3{color:var(--paper)}
.on-dark .row2 p{color:var(--dim)}
.on-dark .quad div{border-color:var(--hair)}
.on-dark .quad dd{color:var(--dim)}
.on-dark .quad div:nth-child(odd){border-right-color:var(--hair)}

/* small inline glyph for text links — a class, not an inline style attribute */
.g--sm{width:18px;height:18px}

/* ── course search + player ─────────────────────────────────────────────── */
.csearch{margin-top:clamp(24px,3vw,34px);max-width:420px}
.csearch label{display:block;color:var(--champ-ink);margin-bottom:10px}
.csearch input{width:100%;min-height:48px;padding:0 14px;font:400 16px/1 var(--read);
  color:var(--char);background:#F3EDE3;border:1px solid var(--ink-hair);
  border-radius:0;-webkit-appearance:none;appearance:none}
.csearch input::placeholder{color:#8F8A82}
.csearch input:focus-visible{outline:2px solid var(--champ-ink);outline-offset:2px;
  border-color:var(--champ-ink)}

.lesson .lsn{appearance:none;background:none;border:0;padding:0;margin:0;
  font:inherit;color:inherit;text-align:left;cursor:pointer;
  border-bottom:1px solid transparent}
.lesson .lsn:hover{border-bottom-color:var(--champagne)}
.empty,.empty-all{margin:18px 0 0;color:var(--dim-ink);font-size:16px}
.empty-all{margin-top:26px}

#player{width:min(92vw,980px);max-width:none;padding:0;border:0;
  background:var(--deep);color:var(--paper)}
#player::backdrop{background:rgba(10,10,10,.82)}
.pl-head{display:flex;align-items:center;gap:16px;padding:16px 18px;
  border-bottom:1px solid var(--hair)}
.pl-head .mono{margin:0;color:var(--champagne);letter-spacing:.14em}
.pl-head button{margin-left:auto;appearance:none;background:none;border:0;
  padding:0;min-width:44px;min-height:44px;display:inline-flex;align-items:center;
  justify-content:center;cursor:pointer}
.pl-head button .g{stroke:var(--dim)}
.pl-head button:hover .g{stroke:var(--paper)}
#player video{display:block;width:100%;aspect-ratio:16/9;background:#000}

/* ── nextsteps rail spacing without an inline style ────────────────────── */
.embed .rail{margin-top:clamp(34px,4.5vw,64px)}
.embed .lede-ink{margin:0 0 6px;color:var(--dim-ink);max-width:58ch}

/* ═══ inner marketing pages (verticals, signup) ═══════════════════════════ */
/* A shorter hero than the home page on purpose — these pages are read after the
   decision to look, so the job is orientation, not a moment. */
.phero{padding-block:clamp(44px,7vw,104px) clamp(30px,4vw,56px);
  border-bottom:1px solid var(--hair)}
.phero h1{margin:0;font:800 clamp(38px,6.6vw,96px)/.98 var(--display);
  letter-spacing:-.035em;max-width:20ch}
.phero h1 .thin{font-weight:500;color:var(--dim)}
.lede{margin:clamp(22px,3vw,34px) 0 0;color:var(--dim);max-width:54ch;
  font-size:clamp(17px,1.25vw,19px)}
.lede a{color:var(--champagne)}
.end .lede{margin-bottom:clamp(26px,3.4vw,38px)}

.quadwrap{padding-block:clamp(40px,6vw,88px);border-bottom:1px solid var(--hair)}
.quadwrap .mono{color:var(--champagne)}
.quadwrap h2{margin:14px 0 clamp(24px,3vw,40px)}

.vsec{padding-block:clamp(40px,6vw,88px)}
.vsec .mono{color:var(--champagne)}
.vsec h2{margin:14px 0 clamp(24px,3vw,40px)}
/* the vertical list runs on the dark lane here, light on the agent pages */
.on-dark .vlist li{border-color:var(--hair)}
.on-dark .vlist li::before{color:var(--champagne)}
.on-dark .vlist p{color:var(--dim)}
.on-dark .quad dt,.on-dark .row2 h3{color:var(--paper)}
.on-dark .note-box,.note-box.on-dark-note{background:rgba(191,159,119,.14);
  border-left-color:var(--champagne);color:var(--dim)}
.note-box.on-dark-note b{color:var(--paper)}
.plan .fine{margin:16px 0 0;font-size:14px;color:var(--dim);max-width:46ch}
.plan .fine a{color:var(--champagne)}
.contact-body p a{color:var(--champ-ink)}

/* current page in the nav gets a champagne rule, not a colour-only cue */
.top nav a[aria-current="page"]{color:var(--paper);
  box-shadow:inset 0 -2px 0 var(--champagne)}

/* signup's plan list sits on the dark lane */
.plan .rows > :last-child{border-bottom:1px solid var(--hair)}
.plan .acts{margin-top:clamp(26px,3.4vw,38px)}

/* ═══ usage pricing ════════════════════════════════════════════════════════
   Rates match the ones NextLevel publishes. Set as a ruled rate sheet rather
   than four boxes: the numbers are the content, so they get the display face
   at size and the labels stay small. */
.usage{padding-block:clamp(44px,6.5vw,104px);border-top:1px solid var(--hair);
  border-bottom:1px solid var(--hair)}
.usage .uhead{max-width:60ch}
.usage .uhead .mono{color:var(--champagne)}
.usage .uhead h2{margin:14px 0 0}
.usage .uhead .lede{margin-top:18px}

.rates{margin:clamp(30px,4vw,54px) 0 0;display:grid;grid-template-columns:1fr}
.rates > div{display:grid;grid-template-columns:1fr;gap:6px;
  padding:clamp(20px,2.6vw,28px) 0;border-top:1px solid var(--hair)}
.rates > div:last-child{border-bottom:1px solid var(--hair)}
.rates dt{margin:0;font:600 clamp(17px,1.5vw,21px)/1.3 var(--read);
  letter-spacing:-.012em;color:var(--paper)}
.rates dd{margin:0}
.rates .r{font:700 clamp(30px,3.6vw,50px)/1 var(--display);letter-spacing:-.03em;
  color:var(--champagne)}
/* the unit always sits on its own line - inline it wrapped on the longer figures
   only, so the four rows did not line up */
.rates .r span{display:block;margin-top:8px;font:500 13px/1.4 var(--read);
  letter-spacing:.04em;text-transform:uppercase;color:var(--dim)}
.rates .n{color:var(--dim);font-size:16px;max-width:48ch}
@media(min-width:880px){
  .rates > div{grid-template-columns:minmax(0,230px) minmax(0,260px) minmax(0,1fr);
    gap:0 clamp(24px,3.4vw,52px);align-items:baseline}
}
.ufine{margin:clamp(24px,3vw,36px) 0 0;color:var(--dim);font-size:14px;max-width:70ch}

/* on the cream lane the rate figure needs the readable champagne */
.on-paper .rates .r,.embed .rates .r{color:var(--champ-ink)}
.on-paper .rates dt,.embed .rates dt{color:var(--char)}
.on-paper .rates .n,.embed .rates .n,.on-paper .ufine,.embed .ufine{color:var(--dim-ink)}