/* ==========================================================================
   CorePBS design system
   Geist throughout, one violet accent. Hierarchy comes from weight and tracking.
   Sections: tokens, base, type, layout, header, footer, buttons, cards,
   pricing, documents, ladder, steps, forms, disclosure, tables, motion,
   responsive.
   ========================================================================== */

/* --- Fonts ----------------------------------------------------------------
   Three faces, self-hosted, matching the interactive courses exactly so the
   marketing site and the product a person buys are visibly the same object.

   Newsreader carries every heading. It is a text serif with an optical size
   axis; that axis is pinned at 32 here because the site only ever sets it at
   display sizes, which halves the file. Inter Tight sets everything else, at
   300 in running copy, where its narrow grotesque forms keep long lines
   compact without feeling condensed. JetBrains Mono is used only for module
   addresses and counts, and is subset to the characters those actually need.

   All three are Open Font License; licence texts sit beside the files. Each is
   subset to the characters the site sets, so a first visit fetches 71KB of
   type in total rather than the 400KB the full families would cost.
   -------------------------------------------------------------------------- */
@font-face{
  font-family:'Newsreader'; font-style:normal; font-weight:200 800; font-display:swap;
  src:url('/assets/fonts/newsreader.woff2') format('woff2-variations');
}
@font-face{
  font-family:'Inter Tight'; font-style:normal; font-weight:100 900; font-display:swap;
  src:url('/assets/fonts/inter-tight.woff2') format('woff2-variations');
}
@font-face{
  font-family:'JetBrains Mono'; font-style:normal; font-weight:100 800; font-display:swap;
  src:url('/assets/fonts/jetbrains-mono.woff2') format('woff2-variations');
}

/* --- Tokens --------------------------------------------------------------- */
:root{
  /* Ground. The course palette exactly: near black with a violet cast, lifted
     off pure black so raised surfaces have somewhere to go. */
  --ink-900:#050309; --ink-800:#0a0712; --ink-700:#14101f; --ink-600:#1c1730;

  /* One accent. Violet marks actions and emphasis words, nothing else.
     Gold is reserved for founding tiers. */
  --accent:#a779ff; --accent-lift:#c0a0ff; --accent-deep:#6b4fb8;
  /* The dark end of the primary button's sheen. It cannot be --accent-deep:
     the sweep carries every stop under the label, and #0d0716 on #6b4fb8 is
     3.24:1. This is the darkest violet on that ramp that still clears 4.5:1. */
  --accent-sheen:#8b68d6;
  --gold:#ddb96a; --positive:#7fd8a4;

  /* Text. Every value clears 4.5:1 on --ink-900. The course sets its dimmest
     tone at #5a556e, which measures 2.89:1; it is lifted here because this
     site sets real copy in it, not just decorative meta. */
  --text:#f0eef7; --text-2:#c8c3d8; --muted:#8b85a3; --dim:#807b9d;  /* lifted again: cards sit on a violet wash, which costs .2 */

  /* Rules. Violet tinted, as the courses set them, so a rule reads as part of
     the same surface rather than as a neutral edge laid over it. */
  --line:rgba(167,121,255,.12);
  --line-2:rgba(167,121,255,.18);
  --line-3:rgba(167,121,255,.26);
  --line-accent:rgba(167,121,255,.35);
  --line-gold:rgba(221,185,106,.3);

  /* Surfaces. Flat. Depth comes from shadow and the inset top highlight. */
  --surface:rgba(167,121,255,.04);
  --surface-2:rgba(167,121,255,.07);
  --surface-3:rgba(167,121,255,.1);
  --wash-accent:rgba(167,121,255,.06);
  --wash-gold:rgba(221,185,106,.05);

  --edge:inset 0 1px 0 rgba(255,255,255,.05);
  --sh-1:0 1px 2px rgba(0,0,0,.5);
  --sh-2:0 6px 22px rgba(0,0,0,.4);
  --sh-3:0 22px 60px rgba(0,0,0,.5);
  --sh-4:0 44px 110px rgba(0,0,0,.62);

  --r-xs:6px; --r-sm:10px; --r-md:14px; --r-lg:18px; --r-xl:24px; --r-2xl:32px; --r-pill:999px;

  /* 8px scale */
  --s1:.5rem; --s2:.75rem; --s3:1rem; --s4:1.5rem; --s5:2rem;
  --s6:3rem; --s7:4rem; --s8:6rem; --s9:8rem;

  --display:'Newsreader',Georgia,'Times New Roman',serif;
  --sans:'Inter Tight',system-ui,-apple-system,'Segoe UI',Arial,sans-serif;
  --mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;

  --fs-hero:clamp(2.9rem,6vw,5rem);
  --fs-h1:clamp(2.4rem,4.6vw,3.6rem);
  --fs-h2:clamp(1.9rem,3.4vw,2.75rem);
  --fs-h3:clamp(1.4rem,2.2vw,1.85rem);
  --fs-h4:clamp(1.15rem,1.6vw,1.35rem);
  --fs-lead:clamp(1.05rem,1.3vw,1.2rem);
  --fs-body:.975rem;
  --fs-sm:.875rem;
  --fs-xs:.8rem;
  --fs-2xs:.7rem;

  --col:1200px;
  --col-narrow:820px;
  --ease:cubic-bezier(.22,.61,.36,1);
  --ease-out:cubic-bezier(.16,1,.3,1);
  --t-fast:150ms; --t-mid:200ms; --t-slow:250ms;
}

/* --- Base ----------------------------------------------------------------- */
*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:92px;-webkit-text-size-adjust:100%}
body{
  margin:0; position:relative;
  background:var(--ink-900); color:var(--text);
  font-family:var(--sans); font-size:var(--fs-body); font-weight:300; line-height:1.65;
  letter-spacing:0; font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}
/* The courses' two-lobe wash: a violet bloom above the masthead and a cooler
   one carried low and right. Anchored to the document rather than the viewport
   so it does not track the scroll, and constrained to 100% width because a
   viewport-width bloom overflows the page on every narrow screen. The grain
   over it stops large dark fields banding on wide gamut displays. */
body::before{
  content:''; position:absolute; left:0; right:0; top:-30vw;
  width:100%; height:min(150vw,1600px); pointer-events:none; z-index:0;
  background:
    radial-gradient(ellipse 80% 42% at 50% 8%,rgba(167,121,255,.16),transparent 65%),
    radial-gradient(ellipse 55% 30% at 88% 72%,rgba(107,79,184,.12),transparent 60%);
  filter:blur(40px);
}
body::after{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:1; opacity:.06;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E");
  mix-blend-mode:overlay;
}
body>*{position:relative;z-index:2}
a{color:inherit;text-decoration:none}
img,svg{display:block;max-width:100%}
::selection{background:rgba(167,121,255,.3);color:var(--text)}
:where(a,button,input,select,textarea,summary,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:3px; border-radius:var(--r-xs);
}
.visually-hidden{
  position:absolute!important; width:1px!important; height:1px!important;
  margin:-1px!important; padding:0!important; border:0!important;
  clip:rect(0 0 0 0)!important; clip-path:inset(50%)!important;
  overflow:hidden!important; white-space:nowrap!important;
}
.skip-link{
  position:absolute; left:var(--s3); top:-64px; z-index:200;
  padding:.7rem 1.1rem; border-radius:var(--r-pill);
  background:var(--accent); color:#0d0716; font-weight:600; font-size:var(--fs-sm);
  transition:top var(--t-mid) var(--ease);
}
.skip-link:focus{top:var(--s3)}

/* --- Type ----------------------------------------------------------------- */
/* Newsreader carries the headings. A serif does not want the heavy negative
   tracking a grotesque needs at display size, so the optical correction here is
   a tenth of what Geist took, and weight stays near the regular where the
   letterforms are drawn to sit. h4 and the footer headings stay in the sans:
   they are labels, not statements. */
h1,h2,h3{margin:0;font-family:var(--display);font-weight:400;line-height:1.13;letter-spacing:-.012em;color:var(--text)}
h3{font-weight:500;line-height:1.2}
h4{margin:0;font-family:var(--display);font-size:var(--fs-h4);font-weight:500;line-height:1.25;letter-spacing:-.008em;color:var(--text)}
/* h5 is the only heading left in the sans: it sets the footer column labels,
   which are set in caps at wide tracking and are labels rather than titles. */
h5{margin:0;font-family:var(--sans);font-weight:600;line-height:1.2;letter-spacing:-.01em;color:var(--text)}
h1{font-size:var(--fs-h1)}
h2{font-size:var(--fs-h2)}
h3{font-size:var(--fs-h3)}
p{margin:0 0 var(--s3)}
p:last-child{margin-bottom:0}
strong{font-weight:600;color:var(--text)}
em{font-style:italic;color:var(--text)}
/* Module addresses, counts and anything else that should line up as data. */
.mono{font-family:var(--mono);font-variant-numeric:tabular-nums;letter-spacing:.04em}
/* The rule either side is the courses' signature. It is drawn on the element
   itself rather than as a separate span so every existing eyebrow inherits it. */
.eyebrow{
  display:inline-flex; align-items:center; gap:.85rem; vertical-align:middle;
  font-size:var(--fs-2xs); font-weight:600;
  letter-spacing:.22em; text-transform:uppercase; color:var(--accent);
}
.eyebrow::before,.eyebrow::after{
  content:''; flex:0 0 34px; height:1px; background:var(--line-accent);
}
.eyebrow::before{display:none}
.eyebrow-center{display:flex;justify-content:center}
.eyebrow-center::before{display:block}
.eyebrow-gold{color:var(--gold)}
.eyebrow-gold::before,.eyebrow-gold::after{background:var(--line-gold)}
.lead{font-size:var(--fs-lead);line-height:1.68;color:var(--muted);max-width:62ch}
.prose p{color:var(--muted);line-height:1.75;max-width:70ch}
.prose strong{color:var(--text)}
.tabular{font-variant-numeric:tabular-nums}

/* --- Layout --------------------------------------------------------------- */
.shell{width:min(calc(100% - 48px),var(--col));margin-inline:auto}
.shell-narrow{width:min(calc(100% - 48px),var(--col-narrow));margin-inline:auto}
.band{padding:clamp(4.5rem,8vw,var(--s8)) 0}
.band+.band{border-top:1px solid var(--line)}
.band-tight{padding:clamp(3rem,5vw,var(--s7)) 0}
.band-tight+.band-tight{padding-top:0}
.split{display:grid;grid-template-columns:1.05fr .85fr;gap:clamp(32px,5vw,72px);align-items:end}
.split-top{align-items:start}
.grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4)}
.grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s4)}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s3)}
.stack{display:grid;gap:var(--s3)}
.section-head{margin-bottom:clamp(2.5rem,4.5vw,3.5rem)}
.section-head h2{margin-top:var(--s3)}
.section-head .lead{margin-top:var(--s3)}

/* --- Header --------------------------------------------------------------- */
.masthead{
  position:sticky; top:0; z-index:80;
  background:color-mix(in srgb,var(--ink-900) 80%,transparent);
  backdrop-filter:blur(22px) saturate(1.5); -webkit-backdrop-filter:blur(22px) saturate(1.5);
  border-bottom:1px solid var(--line);
}
.masthead-in{display:flex;align-items:center;gap:var(--s4);height:68px}
.wordmark{display:flex;align-items:center;gap:.65rem;flex:none}
.wordmark svg{width:32px;height:32px;border-radius:9px}
.wordmark b{font-size:.8rem;font-weight:700;letter-spacing:.24em;text-transform:uppercase}
.primary-nav{display:flex;align-items:center;gap:.35rem;margin-left:var(--s4)}
.primary-nav a{
  padding:.55rem .8rem; border-radius:var(--r-sm);
  color:var(--muted); font-size:var(--fs-sm); font-weight:500;
  transition:color var(--t-mid) var(--ease),background-color var(--t-mid) var(--ease);
}
.primary-nav a:hover{color:var(--text);background:var(--surface-2)}
.primary-nav a[aria-current="page"]{color:var(--text);background:var(--surface-2)}
.masthead .cta{margin-left:auto;flex:none}
.nav-toggle{display:none}

/* --- Footer --------------------------------------------------------------- */
.footer{border-top:1px solid var(--line);padding:var(--s7) 0 var(--s5);margin-top:var(--s6)}
.footer-grid{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(28px,4vw,56px)}
/* Footer column labels are h2 so the document outline never skips a level.
   They are styled as labels, which is what they look like, but they are real
   headings, which is what a screen reader needs them to be. */
.footer h2{font-family:var(--sans);font-size:var(--fs-2xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:var(--s3)}
.footer ul{list-style:none;margin:0;padding:0;display:grid;gap:.55rem}
.footer a{color:var(--muted);font-size:var(--fs-sm);transition:color var(--t-mid) var(--ease)}
.footer a:hover{color:var(--accent)}
.footer-blurb{color:var(--muted);font-size:var(--fs-sm);line-height:1.7;max-width:44ch}
.footer-legal{
  margin-top:var(--s6); padding-top:var(--s4); border-top:1px solid var(--line);
  display:flex; justify-content:space-between; gap:var(--s5); flex-wrap:wrap;
  color:var(--dim); font-size:var(--fs-xs); line-height:1.7;
}
.footer-legal p{max-width:78ch;margin:0}

/* --- Buttons -------------------------------------------------------------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
  min-height:48px; padding:.85rem 1.5rem; border-radius:var(--r-pill);
  border:1px solid var(--line-2); background:var(--surface); color:var(--text);
  box-shadow:var(--edge); cursor:pointer; white-space:nowrap;
  font-family:var(--sans); font-size:var(--fs-sm); font-weight:650; letter-spacing:-.008em;
  transition:background-color var(--t-mid) var(--ease),border-color var(--t-mid) var(--ease),
             color var(--t-mid) var(--ease),transform var(--t-fast) var(--ease);
}
.btn:hover{border-color:var(--line-3);background:var(--surface-3)}
.btn:active{transform:translateY(1px)}
/* The slow sheen across the primary action is the one animated thing in the
   design system. It is a background-position shift, so it costs no layout and
   no paint outside the button, and it stops entirely under reduced motion. */
.btn-primary{
  border-color:transparent; color:#0d0716; font-weight:600;
  background:linear-gradient(120deg,var(--accent-sheen),var(--accent) 50%,var(--accent-sheen));
  background-size:220% 100%;
  box-shadow:0 0 24px rgba(167,121,255,.25);
  animation:sheen 5s linear infinite;
}
.btn-primary:hover{border-color:transparent;color:#0d0716;box-shadow:0 0 36px rgba(167,121,255,.45)}
@keyframes sheen{from{background-position:0 0}to{background-position:220% 0}}
.btn-ghost{background:transparent}
.btn-ghost:hover{border-color:var(--accent);background:var(--wash-accent)}
.btn-sm{min-height:42px;padding:.6rem 1.1rem;font-size:var(--fs-xs)}
.btn-block{width:100%}
.btn-row{display:flex;gap:var(--s2);flex-wrap:wrap}
.btn-row-center{justify-content:center}
.textlink{
  color:var(--accent); font-weight:600; font-size:var(--fs-sm);
  border-bottom:1px solid transparent; transition:border-color var(--t-mid) var(--ease);
}
.textlink:hover{border-bottom-color:var(--accent)}

/* --- Cards ---------------------------------------------------------------- */
.card{
  background:linear-gradient(180deg,rgba(167,121,255,.055),rgba(167,121,255,.015));
  border:1px solid var(--line); border-radius:var(--r-xl);
  box-shadow:var(--edge); padding:clamp(1.5rem,3vw,2.25rem);
  transition:border-color var(--t-slow) var(--ease),background-color var(--t-slow) var(--ease),
             box-shadow var(--t-slow) var(--ease);
}
.card-hover:hover{border-color:var(--line-2);background:var(--surface-2);box-shadow:var(--edge),var(--sh-2)}
.card-accent{border-color:var(--line-accent);background:var(--wash-accent)}
.card-gold{border-color:var(--line-gold);background:var(--wash-gold)}
.card-flow{display:flex;flex-direction:column;height:100%}
.card-flow .btn-row{margin-top:auto;padding-top:var(--s4)}
.chip{
  display:inline-flex; align-items:center; justify-self:start; align-self:flex-start;
  padding:.35rem .75rem; border:1px solid var(--line-2); border-radius:var(--r-pill);
  color:var(--muted); font-size:var(--fs-2xs); font-weight:650;
  letter-spacing:.12em; text-transform:uppercase;
}
.chip-gold{color:var(--gold);border-color:var(--line-gold)}
.chip-accent{color:var(--accent);border-color:var(--line-accent)}
.ticks{list-style:none;margin:var(--s4) 0 0;padding:0}
.ticks li{
  position:relative; padding:.55rem 0 .55rem 1.6rem;
  color:var(--muted); font-size:var(--fs-sm); line-height:1.6;
  border-bottom:1px solid var(--line);
}
.ticks li:last-child{border-bottom:0}
.ticks li::before{
  content:''; position:absolute; left:0; top:1.05rem;
  width:5px; height:5px; border-radius:50%; background:var(--accent);
}
.callout{
  padding:var(--s3) var(--s4); border-left:2px solid var(--accent);
  border-radius:0 var(--r-sm) var(--r-sm) 0; background:var(--wash-accent);
  color:var(--muted); font-size:var(--fs-sm); line-height:1.65;
}
.callout strong{color:var(--text)}
.note{color:var(--dim);font-size:var(--fs-xs);line-height:1.65}

/* Trust strip. Sits near every buy decision, not only in the hero. */
.trust{
  display:flex; flex-wrap:wrap; gap:.6rem 1.6rem; align-items:center;
  margin-top:var(--s4); padding-top:var(--s4); border-top:1px solid var(--line);
}
.trust span{display:inline-flex;align-items:center;gap:.5rem;color:var(--muted);font-size:var(--fs-xs)}
.trust svg{width:14px;height:14px;flex:none;color:var(--positive)}
.trust-center{justify-content:center}

/* --- Pricing -------------------------------------------------------------- */
.price{display:flex;flex-wrap:wrap;align-items:baseline;gap:.6rem;margin:var(--s3) 0 var(--s2)}
.price .now{
  font-family:var(--display); font-size:clamp(2.1rem,3.6vw,2.9rem); font-weight:400;
  line-height:1; letter-spacing:-.015em; font-variant-numeric:tabular-nums;
}
.price .was{color:var(--dim);font-size:var(--fs-sm);text-decoration:line-through;font-variant-numeric:tabular-nums}
.price .unit{color:var(--dim);font-size:var(--fs-sm)}
.price-terms{color:var(--dim);font-size:var(--fs-xs);line-height:1.6}
.instalments{
  display:flex; gap:.6rem; align-items:flex-start;
  margin:var(--s3) 0 var(--s4); padding-top:var(--s3); border-top:1px solid var(--line);
  color:var(--muted); font-size:var(--fs-xs); line-height:1.6;
}
.instalments svg{width:14px;height:14px;flex:none;margin-top:.2rem;color:var(--positive)}
.instalments strong{color:var(--text)}
.places{
  display:inline-flex; align-items:center; gap:.5rem;
  padding:.4rem .85rem; border:1px solid var(--line-gold); border-radius:var(--r-pill);
  background:var(--wash-gold); color:var(--gold);
  font-size:var(--fs-2xs); font-weight:700; letter-spacing:.1em; text-transform:uppercase;
}

/* Sticky purchase bar on product pages. */
.buybar{
  position:fixed; left:0; right:0; bottom:0; z-index:70; display:none;
  align-items:center; gap:var(--s3);
  padding:.7rem calc(env(safe-area-inset-left) + 1rem) calc(env(safe-area-inset-bottom) + .7rem);
  background:color-mix(in srgb,var(--ink-800) 95%,transparent);
  backdrop-filter:blur(20px); -webkit-backdrop-filter:blur(20px);
  border-top:1px solid var(--line-2);
}
.buybar.is-visible{display:flex}
.buybar-price{display:grid;line-height:1.2}
.buybar-price b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.buybar-price span{color:var(--dim);font-size:var(--fs-2xs)}
.buybar .btn{margin-left:auto;flex:none}
@media(min-width:861px){.buybar{display:none!important}}

/* --- Document artefacts --------------------------------------------------- */
/* The products are documents, so previews are rendered as paper rather than as
   icons. A slight rotation behind the sheet reads as a physical set. */
.doc-row{display:grid;grid-template-columns:200px 1fr;gap:clamp(24px,4vw,48px);align-items:center}
.paper-stack{position:relative;width:200px}
.paper-stack::before{
  content:''; position:absolute; inset:10px -8px -10px 8px;
  background:rgba(255,255,255,.055); border-radius:12px; transform:rotate(2.2deg);
}
.paper{
  position:relative; display:flex; flex-direction:column; min-height:250px;
  padding:1rem 1rem .85rem; border-radius:11px;
  background:linear-gradient(168deg,#fcfbf8,#f0ede5);
  color:#231c31; box-shadow:var(--sh-3);
}
.paper-head{
  display:flex; justify-content:space-between; gap:6px;
  padding-bottom:.5rem; margin-bottom:.7rem; border-bottom:1px solid #e5e1d7;
  font-family:var(--sans); font-size:.44rem; letter-spacing:.14em; text-transform:uppercase; color:#68617d;
}
.paper-head b{color:#231c31;font-weight:700}
.paper-title{font-family:var(--display);font-weight:600;letter-spacing:-.02em;font-size:.95rem;line-height:1.18;margin-bottom:.4rem}
.paper-sub{font-family:var(--sans);font-size:.5rem;line-height:1.5;color:#68617d;margin-bottom:.7rem}
.paper-fields{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:auto}
.paper-fields div{border:1px solid #e3dfd4;border-radius:6px;padding:.42rem .48rem;background:#fdfcfa}
.paper-fields b{display:block;font-family:var(--sans);font-size:.46rem;font-weight:650;color:#231c31;margin-bottom:4px}
.paper-fields i{display:block;height:3px;width:76%;border-radius:99px;background:#e6e2d6}
.paper-foot{
  display:flex; justify-content:space-between; gap:6px; margin-top:.7rem; padding-top:.5rem;
  border-top:1px solid #e5e1d7; font-family:var(--sans); font-size:.42rem;
  letter-spacing:.1em; text-transform:uppercase; color:#68617d;
}
.paper-exemplar .paper{background:linear-gradient(168deg,#fdfaf2,#f2ecdd)}
.paper-exemplar .paper-head b{color:#8a6a25}

/* Screen artefact for the interactive tools. */
.screenshot{
  border:1px solid var(--line-2); border-radius:var(--r-lg); overflow:hidden;
  background:var(--ink-800); box-shadow:var(--sh-3);
}
.screenshot-bar{
  display:flex; align-items:center; gap:.4rem; height:34px; padding:0 .8rem;
  border-bottom:1px solid var(--line); background:var(--surface);
}
.screenshot-bar i{width:6px;height:6px;border-radius:50%;background:var(--line-3);display:block}
.screenshot-body{padding:var(--s3);display:grid;gap:.5rem}
.screenshot-body i{display:block;height:6px;border-radius:99px;background:var(--line-2)}
.screenshot-body i.accent{background:var(--accent);width:38%}
.screenshot-body i.w70{width:70%}
.screenshot-body i.w85{width:85%}
.screenshot-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:.4rem;margin-top:.4rem}
.screenshot-tiles span{display:block;height:38px;border:1px solid var(--line);border-radius:var(--r-xs);background:var(--surface)}

/* --- Ladder --------------------------------------------------------------- */
.ladder{display:grid;grid-template-columns:repeat(5,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.ladder>div{padding:var(--s4);border-left:1px solid var(--line)}
.ladder>div:first-child{border-left:0}
.ladder b{display:block;font-size:var(--fs-sm);font-weight:650;margin-bottom:.3rem}
.ladder span{display:block;color:var(--dim);font-size:var(--fs-xs);line-height:1.55}
.ladder .is-live{background:var(--wash-accent)}
.ladder .is-live b{color:var(--accent)}

/* --- Steps ---------------------------------------------------------------- */
.steps{display:grid;grid-template-columns:repeat(4,1fr);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden}
.steps>div{padding:var(--s4);border-left:1px solid var(--line)}
.steps>div:first-child{border-left:0}
.steps b{display:block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:.5rem}
.steps span{display:block;color:var(--muted);font-size:var(--fs-xs);line-height:1.6}

/* --- Forms ---------------------------------------------------------------- */
.field{display:grid;gap:.4rem}
.field label{color:var(--dim);font-size:var(--fs-2xs);font-weight:650;letter-spacing:.12em;text-transform:uppercase}
input,select,textarea{
  width:100%; min-height:48px; padding:.85rem 1rem;
  border:1px solid var(--line-2); border-radius:var(--r-md);
  background:rgba(255,255,255,.035); color:var(--text);
  font:400 var(--fs-sm)/1.5 var(--sans); outline:none;
  transition:border-color var(--t-mid) var(--ease),background-color var(--t-mid) var(--ease),box-shadow var(--t-mid) var(--ease);
}
input::placeholder,textarea::placeholder{color:var(--dim)}
input:focus,select:focus,textarea:focus{
  border-color:var(--accent); background:rgba(255,255,255,.055);
  box-shadow:0 0 0 3px rgba(167,121,255,.15);
}
textarea{min-height:120px;resize:vertical}
option{background:var(--ink-600);color:var(--text)}
input[type=file]{padding:.62rem 1rem;cursor:pointer}
input[type=file]::file-selector-button{
  margin-right:var(--s2); padding:.5rem 1rem; cursor:pointer;
  border:1px solid var(--line-2); border-radius:var(--r-pill);
  background:var(--surface); color:var(--text); font:650 var(--fs-xs) var(--sans);
}
.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--s4) var(--s3)}
.form-grid .span-2{grid-column:1/-1}
.inline-form{display:flex;gap:.5rem;flex-wrap:wrap}
.inline-form input{flex:1;min-width:220px}
.form-note{color:var(--dim);font-size:var(--fs-xs);line-height:1.6;margin-top:var(--s2)}
.form-status{margin-top:var(--s3);font-size:var(--fs-sm);color:var(--positive)}

/* --- Disclosure ----------------------------------------------------------- */
.qa{border-bottom:1px solid var(--line)}
.qa summary{
  display:flex; justify-content:space-between; align-items:center; gap:var(--s3);
  padding:var(--s4) 0; cursor:pointer; list-style:none;
  font-size:var(--fs-body); font-weight:650; letter-spacing:-.012em;
  transition:color var(--t-mid) var(--ease);
}
.qa summary::-webkit-details-marker{display:none}
.qa summary:hover{color:var(--accent)}
.qa summary i{flex:none;width:18px;height:18px;position:relative;transition:transform var(--t-slow) var(--ease)}
.qa summary i::before,.qa summary i::after{
  content:''; position:absolute; left:50%; top:50%; background:var(--accent);
  transform:translate(-50%,-50%); border-radius:2px;
}
.qa summary i::before{width:12px;height:1.5px}
.qa summary i::after{width:1.5px;height:12px}
.qa[open] summary i{transform:rotate(45deg)}
.qa[open] summary{color:var(--accent)}
.qa-body{padding:0 0 var(--s4);color:var(--muted);font-size:var(--fs-sm);line-height:1.75;max-width:74ch}

/* --- Tables --------------------------------------------------------------- */
.spec{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.spec th,.spec td{padding:.85rem 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.spec th{color:var(--dim);font-weight:650;font-size:var(--fs-2xs);letter-spacing:.12em;text-transform:uppercase}
.spec td{color:var(--muted)}
.spec td:first-child{color:var(--text);font-weight:600;width:34%}

/* --- Motion --------------------------------------------------------------- */
[data-reveal]{opacity:0;transform:translateY(12px);transition:opacity 600ms var(--ease-out),transform 600ms var(--ease-out)}
[data-reveal].is-in{opacity:1;transform:none}

/* --- Responsive ----------------------------------------------------------- */
@media(max-width:1020px){
  .grid-4{grid-template-columns:repeat(2,1fr)}
  .ladder,.steps{grid-template-columns:repeat(2,1fr)}
  .ladder>div:nth-child(odd),.steps>div:nth-child(odd){border-left:0}
  .ladder>div:nth-child(n+3),.steps>div:nth-child(n+3){border-top:1px solid var(--line)}
  .footer-grid{grid-template-columns:1fr 1fr}
}
@media(max-width:860px){
  .shell,.shell-narrow{width:min(calc(100% - 36px),var(--col))}
  .masthead-in{height:62px}
  .primary-nav{
    position:fixed; inset:62px 0 auto 0; z-index:79;
    display:none; flex-direction:column; align-items:stretch; gap:0; margin:0;
    padding:var(--s3) 24px var(--s4);
    background:color-mix(in srgb,var(--ink-900) 97%,transparent);
    backdrop-filter:blur(24px); border-bottom:1px solid var(--line);
  }
  .primary-nav.is-open{display:flex}
  .primary-nav a{padding:.95rem .4rem;border-bottom:1px solid var(--line);border-radius:0;font-size:1rem}
  .nav-toggle{
    display:inline-flex; align-items:center; justify-content:center; gap:.5rem;
    margin-left:auto; min-height:42px; padding:.5rem .9rem;
    border:1px solid var(--line-2); border-radius:var(--r-pill);
    background:var(--surface); color:var(--text); cursor:pointer;
    font:650 var(--fs-xs) var(--sans);
  }
  .masthead .cta{display:none}
  .split,.grid-2,.grid-3,.doc-row{grid-template-columns:1fr}
  .doc-row{gap:var(--s4)}
  .form-grid{grid-template-columns:1fr}
  .form-grid .span-2{grid-column:auto}
}
@media(max-width:620px){
  .shell,.shell-narrow{width:min(calc(100% - 28px),var(--col))}
  .grid-4,.ladder,.steps{grid-template-columns:1fr}
  .ladder>div,.steps>div{border-left:0;border-top:1px solid var(--line)}
  .ladder>div:first-child,.steps>div:first-child{border-top:0}
  .footer-grid{grid-template-columns:1fr;gap:var(--s5)}
  .btn-row .btn{width:100%}
  .paper-stack{width:min(230px,100%)}
  body.has-buybar{padding-bottom:80px}
}
@media(max-width:640px){
  /* A centred eyebrow that wraps leaves its rules stranded against the screen
     edges, a long way from the words they are meant to flank. */
  .eyebrow-center::before,.eyebrow-center::after{display:none}
  .eyebrow-center{text-align:center}
}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  [data-reveal]{opacity:1;transform:none;transition:none}
  *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
  /* An infinite animation clamped to .01ms repaints forever rather than
     stopping, so the sheen is removed rather than shortened. */
  .btn-primary{animation:none;background-position:50% 0}
}

/* --- Free module reader ---------------------------------------------------
   The three sections of Foundations, plus the knowledge check. Sections are a
   stepper rather than one long scroll, which is what makes it read as a module
   rather than an article.
   -------------------------------------------------------------------------- */
.module{margin-top:var(--s2)}
.stepper{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s1);margin-bottom:var(--s5)}
.step{
  display:flex; flex-direction:column; gap:.3rem; padding:var(--s3) var(--s4);
  border:1px solid var(--line); border-radius:var(--r-md); background:var(--surface);
  box-shadow:var(--edge); color:var(--muted); text-align:left; cursor:pointer;
  font-family:var(--sans); font-size:var(--fs-sm);
  transition:border-color var(--t-mid) var(--ease),background-color var(--t-mid) var(--ease),color var(--t-mid) var(--ease);
}
.step b{font-size:var(--fs-2xs);font-weight:700;letter-spacing:.16em;color:var(--dim)}
.step span{font-weight:600;letter-spacing:-.015em}
.step:hover{border-color:var(--line-2);background:var(--surface-2);color:var(--text)}
.step.is-active{border-color:var(--line-accent);background:var(--wash-accent);color:var(--text)}
.step.is-active b{color:var(--accent)}
.pane{display:none}
.pane.is-active{display:block}
.sub-head{margin:var(--s5) 0 var(--s3);font-size:var(--fs-h4)}
.pull{
  margin:var(--s5) 0; padding:var(--s4) var(--s5);
  border-left:2px solid var(--accent); border-radius:0 var(--r-md) var(--r-md) 0;
  background:var(--wash-accent);
}
.pull b{display:block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:var(--s2)}
.pull p{margin:0;color:var(--text);font-size:var(--fs-body);line-height:1.7}
.pull-accent{border-left-color:var(--gold);background:var(--wash-gold)}
.pull-accent b{color:var(--gold)}
.module-list{display:grid;gap:var(--s2);margin-top:var(--s3)}
.module-list>div{padding:var(--s3) var(--s4);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface)}
.module-list b{display:block;font-size:var(--fs-sm);font-weight:650;margin-bottom:.3rem}
.module-list span{display:block;color:var(--muted);font-size:var(--fs-sm);line-height:1.65}

.quiz{padding:clamp(1.6rem,3vw,2.25rem);border:1px solid var(--line-accent);border-radius:var(--r-xl);background:var(--wash-accent);box-shadow:var(--edge)}
.opts{display:grid;gap:var(--s2)}
.opt{
  display:flex; gap:var(--s3); align-items:flex-start; text-align:left; cursor:pointer;
  padding:var(--s3) var(--s4); border:1px solid var(--line-2); border-radius:var(--r-md);
  background:var(--surface); color:var(--text); font-family:var(--sans); font-size:var(--fs-sm);
  transition:border-color var(--t-mid) var(--ease),background-color var(--t-mid) var(--ease);
}
.opt b{flex:none;color:var(--dim);font-weight:700}
.opt:hover{border-color:var(--line-3);background:var(--surface-2)}
.opt.is-right{border-color:rgba(87,217,139,.5);background:rgba(87,217,139,.08)}
.opt.is-right b{color:var(--positive)}
.opt.is-wrong{border-color:rgba(221,185,106,.45);background:var(--wash-gold)}
.opt.is-wrong b{color:var(--gold)}
.quiz-feedback{margin-top:var(--s4);padding-top:var(--s3);border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-sm);line-height:1.7}

/* Preview of the module, shown on the training pages. */
.sample-peek{position:relative;border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--ink-800);box-shadow:var(--sh-3);overflow:hidden}
.peek-bar{display:flex;align-items:center;gap:.4rem;height:34px;padding:0 .8rem;border-bottom:1px solid var(--line);background:var(--surface)}
.peek-bar i{width:6px;height:6px;border-radius:50%;background:var(--line-3);display:block}
.peek-bar span{margin-left:auto;color:var(--dim);font-size:var(--fs-2xs);letter-spacing:.08em}
.peek-body{position:relative;padding:var(--s4);max-height:230px;overflow:hidden}
.peek-body b{display:block;font-size:1.05rem;font-weight:650;letter-spacing:-.02em;margin-bottom:.5rem}
.peek-body p{color:var(--muted);font-size:var(--fs-sm);line-height:1.65;margin:0 0 var(--s3)}
.peek-pull{padding:var(--s3);border-left:2px solid var(--accent);background:var(--wash-accent);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--text);font-size:var(--fs-sm);line-height:1.6}
.peek-pull span{display:block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent);margin-bottom:.35rem}
.peek-fade{position:absolute;left:0;right:0;bottom:0;height:70px;background:linear-gradient(transparent,var(--ink-800))}

/* --- The Functional Assessment course, shown as it is built --------------- */
.progs{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--s3);margin-bottom:var(--s5)}
.prog{padding:var(--s4);border:1px solid var(--line);border-radius:var(--r-lg);background:var(--surface)}
.prog-label{display:block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--accent)}
.prog b{display:block;margin:.6rem 0 .5rem;font-size:1.35rem;font-weight:650;letter-spacing:-.02em}
.prog-note{display:block;color:var(--muted);font-size:var(--fs-sm);line-height:1.65}

.course-frame{border:1px solid var(--line-2);border-radius:var(--r-lg);background:var(--ink-800);box-shadow:var(--sh-3);overflow:hidden}
.course-body{display:grid;grid-template-columns:minmax(0,15.5rem) minmax(0,1fr)}
.course-nav{padding:var(--s4);border-right:1px solid var(--line);background:var(--surface)}
.course-nav-head{display:block;font-size:var(--fs-2xs);font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:var(--s3)}
.course-nav ol{list-style:none;margin:0;padding:0;counter-reset:none}
.course-nav li{display:flex;gap:.7rem;padding:.5rem 0;color:var(--muted);font-size:var(--fs-sm);line-height:1.5}
.course-nav li span{flex:none;color:var(--dim);font-variant-numeric:tabular-nums;font-size:var(--fs-xs);padding-top:.1rem}
/* On a gated module page each item is a link, so the anchor has to be the
   flex container: the gap on the li only separates the li's own children, and
   the number and the title both live inside the anchor. The marketing course
   anatomy has no anchors and is unaffected. */
.course-nav li a{
  display:flex;gap:.7rem;width:100%;color:inherit;
  padding:.15rem .4rem;margin:-.15rem -.4rem;border-radius:var(--r-sm);
  transition:background-color var(--t-mid) var(--ease),color var(--t-mid) var(--ease);
}
.course-nav li a:hover{background:var(--surface-2);color:var(--text)}
.course-nav li.is-here{color:var(--text);font-weight:600}
.course-nav li.is-here span{color:var(--accent)}
.course-main{padding:clamp(1.5rem,3vw,2.25rem);min-width:0}
.course-main h3{margin:0;font-size:var(--fs-h3)}
.course-table{width:100%;border-collapse:collapse;font-size:var(--fs-sm)}
.course-table th,.course-table td{padding:.7rem 0;border-bottom:1px solid var(--line);text-align:left;line-height:1.6;vertical-align:top}
.course-table th{width:14rem;color:var(--dim);font-weight:600}
.course-table td{color:var(--text)}
.course-table tr:last-child th,.course-table tr:last-child td{border-bottom:0}
.course-main{display:flex;flex-direction:column}
.course-main .note{margin-top:var(--s4)}
.course-more{margin:auto 0 0;padding-top:var(--s4);border-top:1px solid var(--line);color:var(--dim);font-size:var(--fs-sm);line-height:1.7}
.crumb{margin:var(--s2) 0 0;color:var(--muted);font-size:var(--fs-sm)}
.scope-note{
  margin:var(--s4) 0 0; padding:var(--s3) var(--s4);
  border-left:2px solid var(--accent); border-radius:0 var(--r-sm) var(--r-sm) 0;
  background:var(--wash-accent); color:var(--muted); font-size:var(--fs-sm); line-height:1.7;
}
.scope-note strong{color:var(--text)}
.course-main .course-table{margin-top:var(--s4)}
.marking{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)}
.marking li{color:var(--muted);font-size:var(--fs-sm);line-height:1.7;max-width:70ch}
.course-modules{grid-template-columns:repeat(3,1fr)}
.course-modules>div{display:flex;flex-direction:column}
.course-modules b{color:var(--accent);font-size:var(--fs-2xs)}
.course-modules i{margin-top:auto;padding-top:var(--s2);color:var(--dim);font-size:var(--fs-2xs);font-style:normal}

@media(max-width:980px){.course-modules{grid-template-columns:repeat(2,1fr)}}
@media(max-width:860px){
  .progs{grid-template-columns:1fr}
  .course-body{grid-template-columns:1fr}
  /* Lead with the module on a phone. Thirteen section names ahead of it is a
     long scroll before anything is shown. */
  .course-main{order:1}
  .course-nav{order:2;border-right:0;border-top:1px solid var(--line)}
  .course-nav li{padding:.4rem 0}
  .course-more{margin-top:var(--s4)}
  .course-table th{width:auto;display:block;padding-bottom:.2rem;border-bottom:0}
  .course-table td{display:block;padding-top:0}
  .course-modules{grid-template-columns:1fr}
}

@media(max-width:860px){.stepper{grid-template-columns:1fr}}

/* --- Member platform ------------------------------------------------------
   Sign in, the dashboard and the gated module pages. Nothing here introduces a
   colour, a size or a radius: every value is a token already defined above, so
   these pages are the same object as the marketing site rather than a
   lookalike of it.
   -------------------------------------------------------------------------- */

/* Sign in, callback, welcome. One centred card, generous and quiet. */
.auth-shell{display:flex;justify-content:center;padding:clamp(1rem,4vw,3rem) 0}
.auth-card{width:100%;max-width:34rem;text-align:center}
.auth-card .lead{max-width:42ch}
.auth-form{display:grid;gap:var(--s3);text-align:left;margin-top:var(--s4)}
.field{display:grid;gap:.5rem}
.field>span{font-size:var(--fs-xs);font-weight:600;letter-spacing:.02em;color:var(--muted)}
.field input{
  width:100%;min-height:52px;padding:.85rem 1.05rem;
  border:1px solid var(--line-2);border-radius:var(--r-md);
  background:var(--ink-800);color:var(--text);
  font-family:var(--sans);font-size:1rem;font-weight:400;
}
.field input::placeholder{color:var(--dim)}
.field input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px rgba(167,121,255,.15)}
.field-error{
  margin:0;padding:.7rem .9rem;border-radius:var(--r-sm);
  border:1px solid rgba(232,138,138,.4);background:rgba(232,138,138,.07);
  color:#e8a0a0;font-size:var(--fs-sm);line-height:1.6;text-align:left;
}
.auth-foot{margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line)}
.auth-sent{text-align:center}
.auth-tick{
  width:52px;height:52px;margin:0 auto var(--s4);border-radius:50%;
  display:grid;place-items:center;font-size:1.4rem;color:var(--positive);
  border:1px solid rgba(127,216,164,.4);background:rgba(127,216,164,.08);
}
.auth-sent .prose{max-width:44ch;margin-inline:auto}
.auth-notes{text-align:left;margin-top:var(--s5);display:grid;gap:var(--s3)}
.auth-notes p{
  margin:0;padding-left:1.3rem;position:relative;
  color:var(--muted);font-size:var(--fs-sm);line-height:1.7;
}
.auth-notes p::before{
  content:'';position:absolute;left:0;top:.62rem;width:5px;height:5px;
  border-radius:50%;background:var(--accent);
}
.auth-notes b{color:var(--text);font-weight:600}

/* Three dots rather than a spinning ring: quieter, and it reads as considered
   rather than as a page that is struggling. */
.auth-spinner{display:flex;gap:.4rem;justify-content:center}
.auth-spinner i{
  width:7px;height:7px;border-radius:50%;background:var(--accent);
  animation:auth-pulse 1.2s ease-in-out infinite;
}
.auth-spinner i:nth-child(2){animation-delay:.15s}
.auth-spinner i:nth-child(3){animation-delay:.3s}
@keyframes auth-pulse{0%,100%{opacity:.25;transform:scale(.8)}50%{opacity:1;transform:scale(1)}}

/* Completion rings. */
.ring{position:relative;flex:none}
.ring svg{transform:rotate(-90deg);display:block}
.ring-track{stroke:var(--line-2)}
.ring-bar{stroke:var(--accent);stroke-linecap:round;transition:stroke-dashoffset .6s var(--ease-out)}
.ring-num{
  position:absolute;inset:0;display:grid;place-items:center;
  font-size:var(--fs-2xs);color:var(--text);letter-spacing:0;
}

/* Dashboard. */
.resume{display:grid;grid-template-columns:1fr auto;gap:var(--s5);align-items:center}
.resume-act{display:flex;align-items:center;gap:var(--s4)}
.account-grid{align-items:start}
.program-card{gap:var(--s4);height:auto}
.program-card .btn-row{margin-top:var(--s4);padding-top:0}
.program-head{display:flex;gap:var(--s3);align-items:center}
.module-track{list-style:none;margin:var(--s4) 0 0;padding:0;display:grid;gap:1px}
.module-track a{
  display:flex;align-items:center;gap:.75rem;padding:.6rem .7rem;
  border-radius:var(--r-sm);color:var(--muted);font-size:var(--fs-sm);line-height:1.45;
  transition:background-color var(--t-mid) var(--ease),color var(--t-mid) var(--ease);
}
.module-track a:hover{background:var(--surface-2);color:var(--text)}
.module-track span{flex:none;color:var(--dim);font-size:var(--fs-2xs)}
.module-track b{font-weight:400}
.module-track i{margin-left:auto;font-style:normal;color:var(--positive)}
.module-track .is-done b{color:var(--text-2)}
.module-track li.is-done span{color:var(--positive)}
.owned{list-style:none;margin:0;padding:0;display:grid;gap:1px}
.owned li{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  padding:.85rem 0;border-bottom:1px solid var(--line);
  color:var(--text);font-size:var(--fs-sm);
}
.owned li:last-child{border-bottom:0}
.owned i{font-style:normal;color:var(--dim);font-size:var(--fs-2xs);letter-spacing:.06em}
.membership{display:grid;grid-template-columns:1fr auto;gap:var(--s4);align-items:center}

/* Gated module page. */
.mark-complete{
  display:flex;align-items:center;gap:var(--s3);flex-wrap:wrap;
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);
}
.done-note{color:var(--positive);font-size:var(--fs-xs)}
/* Previous and next, pushed to opposite ends. Empty spans hold the position
   when a module is first or last, so a single link does not drift to centre. */
.pager{
  display:flex;justify-content:space-between;align-items:center;gap:var(--s3);
  margin-top:var(--s5);padding-top:var(--s4);border-top:1px solid var(--line);
}
.pager>span{flex:1}
.module-body{margin-top:var(--s4)}
.course-nav li[data-done] span{color:var(--positive)}

@media(max-width:860px){
  .resume,.membership{grid-template-columns:1fr;gap:var(--s4)}
  .resume-act{justify-content:space-between}
  .account-grid{grid-template-columns:1fr}
}