/* Assisted Academy — site styles.
   Ported from the approved preview. Font paths are relative to this file
   (assets/css/), hence ../fonts/. Enqueued in functions.php with filemtime
   versioning so edits bust the cache without bumping AA_VERSION. */

/* Assisted Academy — sales page
   Direction: airy/fluid atmosphere (C2) + editorial structure (B3)
   Brand colors: Blue #0077c8, Amber #fbba18, Sky #afd0eb, Paper #fdfbfb, Ink #191919
   Page type: Sora. Archivo is preserved inside the logo lockup only (brand rule:
   never re-typeset the wordmark). */

/* Fonts are self-hosted rather than loaded from Google. A Google Fonts <link>
   sends every visitor's IP and user-agent to a third party before they interact
   with the page — an undisclosed transfer that sits badly with the Privacy
   Policy's "no analytics or marketing tracking tools". Self-hosting also removes
   two DNS lookups and TLS handshakes from the critical path. 64KB total. */
@font-face{
  font-family:'Sora';
  src:url('../fonts/sora-variable.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}
@font-face{
  font-family:'Archivo';
  src:url('../fonts/archivo-variable.woff2') format('woff2');
  font-weight:100 900; font-style:normal; font-display:swap;
}

:root{
  /* brand */
  --blue:#0077c8;
  --amber:#fbba18;
  --sky:#afd0eb;
  --paper:#fdfbfb;
  --ink:#191919;
  /* extended — all text pairings verified to WCAG AA (see COMPLIANCE notes) */
  --blue-deep:#00456f;
  --blue-mid:#005d9e;
  --blue-panel:#0072be;   /* lightest gradient stop; kept dark enough for legible text on it */
  --blue-text:#0069b0;    /* brand blue darkened for small text: 5.3:1 on --soft */
  --blue-lift:#2e93d8;    /* light end of the headline gradient: 3.2:1, passes large-text AA */
  --amber-text:#8f6300;   /* amber darkened for small text on light grounds */
  --amber-lift:#fdcf5c;   /* amber lightened for small text on the blue panels: 4.7:1 */
  --soft:#f2f6fb;
  --muted:#5b6470;
  --line:#e6e8ec;
  --white:#ffffff;
  --panel-soft:#eaf4fc;   /* secondary text inside the blue panel */

  --font:'Sora', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --maxw:1140px;

  --r-sm:10px;
  --r-md:18px;
  --r-lg:24px;
  --r-pill:100px;

  --shadow-card:0 20px 50px rgba(0,69,111,.08);
  --shadow-amber:0 8px 24px rgba(251,186,24,.38);
  --shadow-amber-hi:0 12px 30px rgba(251,186,24,.5);

  --step--1:clamp(.82rem,.79rem + .14vw,.92rem);
  --step-0:clamp(1rem,.97rem + .18vw,1.08rem);
  --step-1:clamp(1.1rem,1.04rem + .3vw,1.3rem);
  --step-2:clamp(1.35rem,1.2rem + .7vw,1.85rem);
  --step-3:clamp(1.8rem,1.5rem + 1.3vw,2.6rem);
  --step-4:clamp(2.4rem,1.85rem + 2.4vw,3.85rem);
}

*,*::before,*::after{ box-sizing:border-box; }

/* The `hidden` attribute must win over any author `display` rule, or elements
   toggled by script (the waitlist form) stay on screen. */
[hidden]{ display:none !important; }
html{
  -webkit-text-size-adjust:100%;
  scroll-behavior:smooth;
  color-scheme:light;
}
body{
  margin:0;
  font-family:var(--font);
  background:var(--paper);
  color:var(--ink);
  font-size:var(--step-0);
  line-height:1.62;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
img,svg{ max-width:100%; display:block; }
h1,h2,h3,h4{
  font-weight:800;
  line-height:1.13;
  letter-spacing:-.02em;
  margin:0 0 .5em;
  text-wrap:balance;
}
p{ margin:0 0 1em; color:var(--muted); }
ul{ margin:0; padding:0; list-style:none; }
a{ color:var(--blue); }
:focus-visible{ outline:2px solid var(--blue); outline-offset:3px; border-radius:4px; }

@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition-duration:.01ms !important; animation-duration:.01ms !important; }
}

.wrap{ max-width:var(--maxw); margin-inline:auto; padding-inline:30px; }
.visually-hidden{
  position:absolute; width:1px; height:1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap;
}
.eyebrow{
  display:block;
  font-size:.74rem; font-weight:700;
  letter-spacing:.15em; text-transform:uppercase;
  color:var(--blue-text);
  margin:0 0 .85em;
}
.ph{ color:var(--muted); font-style:italic; }

.skip-link{
  position:absolute; left:-9999px; top:0;
  background:var(--ink); color:var(--paper);
  padding:.75em 1em; z-index:100; border-radius:0 0 var(--r-sm) 0;
}
.skip-link:focus{ left:0; top:0; }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  font-family:var(--font); font-weight:700; font-size:.94rem;
  padding:14px 28px;
  min-height:44px;              /* touch target floor — audience is mostly mobile */
  border:none; border-radius:var(--r-pill);
  cursor:pointer; text-decoration:none;
  transition:transform .15s ease, box-shadow .25s ease, background .2s ease, color .2s ease, border-color .2s ease;
}
.btn-amber{ background:var(--amber); color:var(--ink); box-shadow:var(--shadow-amber); }
.btn-amber:hover{ transform:translateY(-2px); box-shadow:var(--shadow-amber-hi); }
.btn-ghost{ background:var(--white); color:var(--ink); border:1px solid var(--line); }
.btn-ghost:hover{ border-color:var(--blue); color:var(--blue); }
.btn-sm{ padding:11px 22px; font-size:.88rem; }

/* ---------- header ---------- */
.site-header{
  position:sticky; top:0; z-index:60;
  background:rgba(253,251,251,.82);
  backdrop-filter:blur(14px) saturate(160%);
  border-bottom:1px solid var(--line);
}
.header-row{
  display:flex; align-items:center; justify-content:space-between; gap:20px;
  height:76px;
}
.brand-lockup{ display:flex; align-items:center; flex:0 0 auto; padding-block:9px; }
.brand-lockup svg{ width:186px; height:auto; }

.site-nav{ display:flex; gap:32px; margin-left:auto; }
.site-nav a{
  color:#333; text-decoration:none;
  font-size:.92rem; font-weight:600;
}
.site-nav a:hover{ color:var(--blue); }
.header-cta{ flex:0 0 auto; }

.nav-toggle{
  display:none;
  flex-direction:column; justify-content:center; gap:5px;
  width:44px; height:44px;
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-sm);
  cursor:pointer;
}
.nav-toggle span{ display:block; height:2px; width:18px; background:var(--ink); margin-inline:auto; border-radius:2px; }

@media (max-width:900px){
  .site-nav{
    position:absolute; top:100%; left:0; right:0;
    display:none;
    flex-direction:column; gap:0;
    background:var(--paper);
    border-bottom:1px solid var(--line);
    padding:6px 30px 18px;
    box-shadow:var(--shadow-card);
  }
  .site-nav.is-open{ display:flex; }
  .site-nav a{ padding:14px 0; border-bottom:1px solid var(--line); }
  .nav-toggle{ display:flex; order:3; }
  .header-cta{ margin-left:auto; }
}
@media (max-width:520px){
  .brand-lockup svg{ width:150px; }
  .header-cta{ display:none; }
}

/* ---------- hero ---------- */
.hero{ position:relative; overflow:hidden; padding:78px 0 88px; }
.hero-blob{ position:absolute; border-radius:50%; filter:blur(80px); z-index:0; pointer-events:none; }
.hero-blob-1{ width:560px; height:560px; background:var(--sky); opacity:.5; top:-190px; left:-150px; }
.hero-blob-2{ width:420px; height:420px; background:#cfe6f7; opacity:.55; bottom:-170px; left:24%; }
.hero-blob-3{ width:300px; height:300px; background:#ffe6a8; opacity:.45; top:10px; right:6%; }

.hero-grid{
  position:relative; z-index:1;
  display:grid; grid-template-columns:1.05fr .95fr; gap:56px; align-items:center;
}
.hero h1{ font-size:var(--step-4); margin:0 0 20px; }
.hero h1 .grad{
  background:linear-gradient(90deg,var(--blue-text),var(--blue-lift));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
}
.hero-lead{ font-size:1.14rem; max-width:480px; margin-bottom:28px; }
.hero-meta{ font-size:.9rem; color:var(--muted); margin:0; }
.hero-meta strong{ color:var(--ink); font-weight:700; }

/* fluid course panel — one organic corner */
.course-panel{
  position:relative; overflow:hidden;
  background:linear-gradient(150deg,var(--blue-panel),var(--blue-mid) 55%,var(--blue-deep));
  border-radius:28px 28px 28px 72px;
  padding:40px;
  color:var(--white);
  box-shadow:0 40px 90px rgba(0,79,133,.25);
}
/* content sits above the glows; the child selector must not out-rank the
   glow's own `position:absolute` — hence the explicit `> .course-panel-glow` */
.course-panel > *{ position:relative; z-index:1; }
.course-panel > .course-panel-glow{
  position:absolute; z-index:0;
  border-radius:50%; filter:blur(50px); pointer-events:none;
}
.course-panel-glow-a{ width:220px; height:220px; background:rgba(251,186,24,.3); bottom:-60px; right:-40px; }
.course-panel-glow-b{ width:180px; height:180px; background:rgba(175,208,235,.4); top:-50px; left:-30px; }
.course-panel h2{ font-size:1.45rem; color:var(--white); margin:0 0 20px; }
.course-panel-rows li{
  display:flex; justify-content:space-between; gap:16px;
  padding:11px 0; font-size:.93rem;
  border-bottom:1px solid rgba(255,255,255,.18);
  color:var(--panel-soft);
}
.course-panel-rows li:last-child{ border-bottom:none; }
.course-panel-rows .v{ font-weight:700; color:var(--white); text-align:right; }
.course-panel-price{ display:flex; align-items:baseline; gap:9px; margin:20px 0 16px; }
.course-panel-price .amt{ font-size:2.2rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }
.course-panel-price .lbl{ font-size:.85rem; color:var(--panel-soft); }
.course-panel .btn{ width:100%; }

@media (max-width:900px){
  .hero{ padding:56px 0 68px; }
  .hero-grid{ grid-template-columns:1fr; gap:40px; }
  .hero-lead{ max-width:none; }
  .course-panel{ padding:32px 26px; border-radius:24px 24px 24px 56px; }
}

/* ---------- trust strip ---------- */
.trust{ background:var(--white); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
.trust-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  padding-block:24px;
}
.trust-grid li{
  display:flex; align-items:center; gap:10px;
  font-size:.9rem; font-weight:600; color:#3d444d;
}
.trust-grid svg{ width:21px; height:21px; color:var(--blue); flex:0 0 auto; }

@media (max-width:900px){ .trust-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:540px){ .trust-grid{ grid-template-columns:1fr; gap:14px; } }

/* ---------- shared section furniture ---------- */
.section{ padding-block:88px; }
.section-soft{ background:var(--soft); }
.section-head{ max-width:640px; margin-bottom:40px; }
.section-head h2{ font-size:var(--step-3); margin:0 0 12px; }
.section-head p{ font-size:1.02rem; margin:0; }

@media (max-width:900px){ .section{ padding-block:64px; } }

/* ---------- requirement ---------- */
.req-grid{ display:grid; grid-template-columns:.9fr 1.35fr; gap:48px; align-items:start; }
.req-grid > .section-head{ margin-bottom:0; }
.req-intro{ margin-bottom:24px; }

.req-flow{ display:grid; grid-template-columns:1fr auto 1fr auto 1fr; gap:12px; align-items:stretch; }
.req-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  padding:22px 20px;
  display:flex; flex-direction:column; gap:3px;
  box-shadow:var(--shadow-card);
}
.req-card .tag{
  font-size:.7rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--blue-text); margin-bottom:6px;
}
.req-card .hrs{ font-size:1.7rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1.1; }
.req-card .desc{ font-size:.88rem; color:var(--muted); }
.req-card-soon{ border-style:dashed; box-shadow:none; background:rgba(255,255,255,.6); }
.req-card-soon .tag{ color:var(--amber-text); }
.req-card-total{
  background:linear-gradient(140deg,var(--blue-mid),var(--blue-deep));
  border-color:transparent; color:var(--white);
  box-shadow:0 20px 44px rgba(0,69,111,.22);
}
.req-card-total .tag{ color:var(--amber-lift); }
.req-card-total .desc{ color:var(--panel-soft); }
.req-op{
  display:flex; align-items:center; justify-content:center;
  font-size:1.5rem; font-weight:700; color:var(--muted);
}

@media (max-width:900px){
  .req-grid{ grid-template-columns:1fr; gap:28px; }
}
@media (max-width:620px){
  .req-flow{ grid-template-columns:1fr; }
  .req-op{ padding:2px 0; }
}

/* ---------- enroll / spec bar ---------- */
.enroll-bar{
  background:var(--white); border:1px solid var(--line);
  /* flat bottom — the attendee panel butts directly against this */
  border-radius:var(--r-md) var(--r-md) 0 0;
  /* col 2 carries "8:00 AM – 6:30 PM", which needs ~158px on one line; col 4 is
     the seats select, whose widest option ("5 seats") needs 57px of text plus a
     30px arrow gutter — at .8fr it clipped to "5 seat". */
  display:grid; grid-template-columns:1.45fr .85fr .6fr 1fr auto;
  overflow:hidden;
  margin-top:8px;
}
.enroll-cell{ padding:22px 24px; border-right:1px solid var(--line); }
.enroll-cell .k{
  font-size:.71rem; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  color:var(--muted); margin-bottom:8px;
}
/* keep the headline value on one line so "PM" never orphans; the sub-label below
   it is still free to wrap */
.enroll-cell .v{ font-size:1.02rem; font-weight:800; line-height:1.25; white-space:nowrap; }
.enroll-cell .v small{ display:block; font-size:.8rem; font-weight:500; color:var(--muted); white-space:normal; }

.enroll-select{
  width:100%;
  font-family:var(--font); font-size:.98rem; font-weight:700; color:var(--ink);
  padding:12px 38px 12px 14px;
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--white) url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20"><path d="M5 8l5 5 5-5" fill="none" stroke="%230077c8" stroke-width="2.2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat right 12px center;
  background-size:15px;
  appearance:none; cursor:pointer;
  transition:border-color .2s ease;
}
.enroll-select:hover{ border-color:var(--blue); }
/* the seats options are short — reclaim some of the arrow gutter for text */
.enroll-select-seats{ padding-right:30px; }

.enroll-buy{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
  padding:20px 28px; background:var(--soft);
  border-right:none;
}
.enroll-buy .amt{ font-size:1.75rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }

/* The moved price and submit — see the note in front-page.php.
   Hidden here and switched on below 980px, where the bar's own buy cell is
   hidden instead, so the action follows the fields it requires rather than
   preceding them. Exactly one of the two is visible at any width. */
.enroll-submit{ display:none; }
.enroll-submit .amt{ font-size:1.75rem; font-weight:800; font-variant-numeric:tabular-nums; line-height:1; }

.enroll-next{ margin:16px 0 0; font-size:.9rem; color:var(--muted); }
.enroll-note{ margin:10px 0 0; font-size:.86rem; }

/* shown when aa_handle_enrol() bounces a submission back */
.enroll-error{
  display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;
  margin:0 0 14px;
  padding:14px 18px;
  font-size:.92rem; font-weight:500; color:#7a2718;
  background:#fdeeea; border:1px solid #f3c9bf; border-radius:var(--r-sm);
}
.enroll-error a{ color:#7a2718; font-weight:700; }

/* shown when aa_handle_clear_cart() bounces back here */
.enroll-cleared{
  margin:0 0 14px;
  padding:14px 18px;
  font-size:.92rem; font-weight:500; color:#0a4f85;
  background:#eef6fc; border:1px solid var(--sky); border-radius:var(--r-sm);
}

/* ---------- clear the cart, under the checkout ---------- */
/* Appended after the checkout block by aa_checkout_clear_control(). Sized as a
   secondary action on purpose: leaving is not the thing this page is for. */
.aa-clear-cart{
  max-width:1180px;
  margin:0 auto;
  padding:8px 24px 48px;
}
.aa-clear-cart p{
  margin:0;
  font-size:.86rem; color:var(--muted);
}
.aa-clear-cart button{
  appearance:none; -webkit-appearance:none;
  background:none; border:0; padding:0;
  font:inherit; color:var(--blue); font-weight:700;
  text-decoration:underline; text-underline-offset:2px;
  cursor:pointer;
}
.aa-clear-cart button:hover,
.aa-clear-cart button:focus-visible{ color:var(--ink); }

/* ---------- attendee details ---------- */
/* One block per seat. Every block is rendered server-side and marked required;
   script.js hides and un-requires the ones beyond the chosen seat count, so with
   JavaScript off the form still submits validly (all blocks shown, all required). */
.attendees{
  background:var(--white); border:1px solid var(--line); border-top:none;
  border-radius:0 0 var(--r-md) var(--r-md);
  box-shadow:var(--shadow-card);
  padding:26px;
}
.attendees-head h3{ font-size:1.05rem; margin:0 0 6px; }
.attendees-head p{ font-size:.9rem; margin:0 0 20px; max-width:64ch; }
.attendee-row{
  display:grid; grid-template-columns:110px 1fr 1fr; gap:12px; align-items:center;
  margin-bottom:12px;
}
.attendee-row:last-child{ margin-bottom:0; }
.attendee-num{
  font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  color:var(--muted);
}
.attendee-row input{
  width:100%;
  font-family:var(--font); font-size:.95rem; color:var(--ink);
  padding:11px 14px;
  border:1.5px solid var(--line); border-radius:var(--r-sm);
  background:var(--white);
  transition:border-color .2s ease;
}
.attendee-row input:hover{ border-color:var(--sky); }
.attendee-row input:focus{ border-color:var(--blue); }
.attendee-row input::placeholder{ color:#98a1ab; }
/* hidden seats are removed from the layout and from the tab order */
.attendee-row[hidden]{ display:none; }

@media (max-width:720px){
  .attendees{ padding:22px 18px; }
  .attendee-row{ grid-template-columns:1fr; gap:8px; padding:14px 0; border-top:1px solid var(--line); }
  .attendee-row:first-of-type{ border-top:none; padding-top:0; }
}

/* Below 980px the bar stops being one row, and from here down the price and the
   submit move out of it and below the attendee fields. Same reason as on phones:
   inside the bar they sit above the name and email they require, so the biggest
   thing on the card asks to be pressed before the fields it needs have been
   shown. Above 980px the bar is a single row and the whole form is visible at
   once, so the buy cell stays where it is. */
@media (max-width:980px){
  .enroll-bar{ grid-template-columns:1fr 1fr; }
  .enroll-cell:nth-child(2n){ border-right:none; }
  .enroll-cell{ border-bottom:1px solid var(--line); }
  .enroll-buy{ display:none; }
  .enroll-submit{
    display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:var(--soft); border:1px solid var(--line); border-top:none;
    border-radius:0 0 var(--r-md) var(--r-md);
    box-shadow:var(--shadow-card);
    padding:20px 24px;
    /* .attendees owns the rounded bottom at full width; here this does */
    margin-top:-1px;
  }
  .enroll-submit .btn{ flex:0 0 auto; }
  .attendees{ border-radius:0; }
}

/* Tablet: the two controls share the top row, the two read-only facts the second.
   Grouping by row rather than by column — choose the dates, choose the seats,
   then be told the hours and the total. The alternative, Seats under Session
   dates in the left column, puts one control and one fact in each row, which
   reads as two unrelated pairs. Side by side the selects also come out the same
   width, which the 1fr 1fr columns make free.

   `order` rather than explicit grid placement, because grid auto-placement
   honours it and it therefore cannot leave a hole or spill into an implicit
   column the way a hard-coded row/column would if a cell were ever added. Scoped
   above 560px so the phone layout below — which pairs these same two cells on one
   row on its own terms — is untouched. */
@media (min-width:561px) and (max-width:980px){
  .enroll-cell:nth-child(1){ order:1; }   /* session dates */
  .enroll-cell:nth-child(4){ order:2; }   /* seats */
  .enroll-cell:nth-child(2){ order:3; }   /* daily hours */
  .enroll-cell:nth-child(3){ order:4; }   /* total */
  /* redraw the dividers for the new arrangement: a vertical rule down the left
     column only, and a horizontal one under the top row only. The bar's own
     border closes the bottom. */
  .enroll-cell{ border-right:none; border-bottom:none; }
  .enroll-cell:nth-child(1),
  .enroll-cell:nth-child(2){ border-right:1px solid var(--line); }
  .enroll-cell:nth-child(1),
  .enroll-cell:nth-child(4){ border-bottom:1px solid var(--line); }
}

@media (max-width:560px){
  .enroll-bar{ grid-template-columns:1fr; }
  .enroll-cell{ border-right:none; }
}

/* Pair the two read-only cells on one row.
   Stacking all five put most of a phone screen of restated facts between
   "Select dates" and the Enroll button: cell 2 is the daily hours and cell 3 the
   20-hour total, both of which the hero, the trust strip, the course panel, the
   format specs and the curriculum footer already state. Worth keeping beside the
   control — someone choosing a weekend wants to know how long the days are — but
   not worth a screenful, so they share a row and the three cells that are
   actually interactive (dates, seats, buy) stay full width and closer together.

   THE LOWER BOUND IS LOAD-BEARING, NOT A ROUND NUMBER.
   Grid columns default to min-width:auto, and cell 2 cannot shrink below the
   158px that `.enroll-cell .v{white-space:nowrap}` reserves for
   "8:00 AM – 6:30 PM". Measured min-content is 207px for cell 2 and 120px for
   cell 3 at the design's 24px side padding — 327px against the 315px the bar
   actually gets at 375px, so an unconditional pairing overflowed into
   `.enroll-bar{overflow:hidden}` and quietly cut the right edge off the Total
   cell. It was 67px of clipping at 320px. Trimming the side padding to 16px on
   these two brings the pair to 295px, which fits from 365px up; below that they
   stack, which is the only thing that fits. Re-measure both numbers before
   touching the padding, the breakpoint, or that nowrap. */
@media (min-width:365px) and (max-width:560px){
  .enroll-bar{ grid-template-columns:1fr 1fr; }
  .enroll-cell:nth-child(1),
  .enroll-cell:nth-child(4),
  .enroll-buy{ grid-column:1/-1; }
  .enroll-cell:nth-child(2),
  .enroll-cell:nth-child(3){ padding-left:16px; padding-right:16px; }
  .enroll-cell:nth-child(2){ border-right:1px solid var(--line); }
}

/* ---------- curriculum ---------- */
/* align-items:start so each card sizes to its own content — Day 1 has six
   blocks and Day 2 has four, and stretching would leave dead space in Day 2 */
.curriculum-grid{ display:grid; grid-template-columns:1fr 1fr; gap:24px; align-items:start; }
.day-card{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  overflow:hidden;
  box-shadow:var(--shadow-card);
}
.day-head{
  display:flex; align-items:center; gap:14px;
  padding:22px 26px;
  border-bottom:1px solid var(--line);
  background:linear-gradient(120deg,rgba(175,208,235,.22),rgba(242,246,251,0));
}
.day-num{
  font-size:1.5rem; font-weight:800; color:var(--blue-text);
  font-variant-numeric:tabular-nums; line-height:1;
}
.day-head h3{ font-size:1.05rem; margin:0; }
.day-head .hrs{
  margin-left:auto;
  font-size:.76rem; font-weight:700; color:var(--blue-text);
  background:var(--soft); padding:6px 12px; border-radius:8px; white-space:nowrap;
}
.day-topics li{
  display:flex; align-items:baseline; justify-content:space-between; gap:16px;
  padding:14px 26px;
  border-bottom:1px solid var(--line);
  font-size:.95rem; font-weight:500;
  transition:background .15s ease;
}
.day-topics li:last-child{ border-bottom:none; }
.day-topics li:hover{ background:var(--soft); }
/* tinted rather than --soft so the chip stays visible on the --soft row hover */
.topic-hrs{
  flex:0 0 auto;
  font-size:.76rem; font-weight:700; color:var(--blue-deep);
  background:rgba(0,119,200,.09);
  padding:5px 10px; border-radius:7px;
  white-space:nowrap; font-variant-numeric:tabular-nums;
}
.curriculum-foot{ margin:22px 0 0; font-size:.86rem; }

@media (max-width:820px){ .curriculum-grid{ grid-template-columns:1fr; } }
/* Phones: trim the gutters and gap so long course titles get more width. Keeping
   the chip on the same line is deliberate — stacking it below gained a line of
   title but cost ~37px per row, making the list 25% taller overall. */
@media (max-width:560px){
  .day-topics li{ padding:13px 18px; gap:10px; }
  .topic-hrs{ padding:5px 8px; }
  .day-head{ padding:20px 18px; }
}

/* ---------- format ---------- */
.format-grid{ display:grid; grid-template-columns:.9fr 1.1fr; gap:48px; align-items:start; }
.format-grid > .section-head{ margin-bottom:0; }
.format-specs{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.format-specs li{
  display:flex; justify-content:space-between; align-items:baseline; gap:20px;
  padding:17px 26px; border-bottom:1px solid var(--line);
}
.format-specs li:last-child{ border-bottom:none; }
.format-specs .k{ font-weight:700; font-size:.95rem; flex:0 0 auto; }
.format-specs .v{ color:var(--muted); font-size:.93rem; text-align:right; }

@media (max-width:900px){ .format-grid{ grid-template-columns:1fr; gap:30px; } }

/* ---------- faq ---------- */
.faq-list{
  background:var(--white); border:1px solid var(--line); border-radius:var(--r-md);
  box-shadow:var(--shadow-card); overflow:hidden;
}
.faq-item{ border-bottom:1px solid var(--line); }
.faq-item:last-child{ border-bottom:none; }
.faq-item summary{
  cursor:pointer; list-style:none;
  padding:20px 56px 20px 26px;
  font-weight:700; font-size:1rem;
  position:relative;
  transition:background .15s ease;
}
.faq-item summary::-webkit-details-marker{ display:none; }
.faq-item summary:hover{ background:var(--soft); }
.faq-item summary::after{
  content:""; position:absolute; right:26px; top:50%;
  width:11px; height:11px; margin-top:-6px;
  border-right:2.2px solid var(--blue); border-bottom:2.2px solid var(--blue);
  transform:rotate(45deg); transform-origin:center;
  transition:transform .2s ease;
}
.faq-item[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.faq-item p{ margin:0; padding:0 26px 22px; max-width:70ch; font-size:.95rem; }

/* ---------- waitlist ---------- */
/* symmetric: the blue box needs equal breathing room above and below */
.waitlist{ padding-block:88px; }
.waitlist-box{
  position:relative; overflow:hidden;
  background:linear-gradient(135deg,var(--blue-mid),var(--blue-deep));
  border-radius:var(--r-lg);
  padding:56px 48px;
  color:var(--white);
}
.waitlist-box::after{
  content:""; position:absolute;
  width:380px; height:380px; border-radius:50%;
  background:rgba(251,186,24,.22); filter:blur(80px);
  bottom:-170px; right:12%;
  pointer-events:none;
}
.waitlist-inner{ position:relative; z-index:1; max-width:600px; }
.waitlist .eyebrow{ color:var(--amber-lift); }
.waitlist h2{ font-size:var(--step-3); color:var(--white); margin:0 0 12px; }
.waitlist p{ color:var(--panel-soft); margin:0 0 24px; }
.waitlist-form{ display:flex; gap:12px; flex-wrap:wrap; }
.waitlist-form input{
  flex:1 1 260px;
  font-family:var(--font); font-size:1rem; color:var(--white);
  padding:14px 18px;
  border:1.5px solid rgba(175,208,235,.5); border-radius:var(--r-pill);
  background:rgba(255,255,255,.08);
  transition:border-color .2s ease, background .2s ease;
}
.waitlist-form input::placeholder{ color:rgba(253,251,251,.72); }
.waitlist-form input:hover{ border-color:var(--sky); }
.waitlist-form input:focus{ background:rgba(255,255,255,.14); }
/* selector must out-rank `.waitlist p`, which would otherwise set the colour and margin */
.waitlist .waitlist-confirm{
  position:relative; z-index:1;
  display:flex; align-items:flex-start; gap:10px;
  margin:0; color:var(--amber-lift); font-weight:700;
}
.waitlist .waitlist-confirm svg{ width:20px; height:20px; flex:0 0 auto; margin-top:3px; }

@media (max-width:900px){
  .waitlist{ padding-block:64px; }   /* matches .section at this breakpoint */
}
@media (max-width:640px){
  .waitlist-box{ padding:40px 26px; border-radius:var(--r-md); }
  .waitlist-form .btn{ width:100%; }
}

/* ---------- policy / long-form document pages ---------- */
.doc-page{ padding-block:56px 88px; }
.doc{ max-width:760px; }
.doc-back{ margin:0 0 28px; font-size:.9rem; }
.doc-back a{ text-decoration:none; font-weight:600; }
.doc-back a:hover{ text-decoration:underline; }
.doc h1{ font-size:var(--step-3); margin:0 0 10px; }
.doc-meta{ font-size:.9rem; color:var(--muted); margin:0 0 32px; }
.doc h2{
  font-size:1.12rem; margin:38px 0 12px;
  padding-top:26px; border-top:1px solid var(--line);
}
.doc p{ font-size:1rem; line-height:1.72; max-width:70ch; }
.doc-list{ margin:0 0 1em; padding-left:0; }
.doc-list li{
  position:relative; padding-left:26px; margin-bottom:12px;
  font-size:1rem; line-height:1.72; color:var(--muted); max-width:70ch;
}
.doc-list li::before{
  content:""; position:absolute; left:6px; top:.62em;
  width:6px; height:6px; border-radius:50%; background:var(--blue);
}
@media (max-width:640px){
  .doc-page{ padding-block:40px 64px; }
  .doc h2{ margin-top:30px; padding-top:22px; }
}

/* ---------- phone buy bar ---------- */
/* Hidden entirely above 520px, where the header CTA is still on screen.
   visibility (not just transform) so it leaves the tab order and the
   accessibility tree while parked off-screen. */
.buy-bar{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:70;
  align-items:center; justify-content:space-between; gap:14px;
  padding:12px 18px; padding-bottom:calc(12px + env(safe-area-inset-bottom, 0px));
  background:rgba(253,251,251,.94);
  backdrop-filter:blur(14px) saturate(160%);
  border-top:1px solid var(--line);
  box-shadow:0 -6px 24px rgba(0,69,111,.1);
  transform:translateY(110%);
  transition:transform .25s ease;
}
.buy-bar.is-visible{ transform:translateY(0); }
/* Keyboard and screen-reader exclusion is handled in JS via `inert`, not by
   transitioning visibility — a CSS-timed flip depends on the paint loop, which
   makes it both untestable and unreliable in a backgrounded tab. */
.buy-bar[inert]{ pointer-events:none; }
.buy-bar-price{ display:flex; align-items:baseline; gap:7px; }
.buy-bar-price .amt{ font-size:1.25rem; font-weight:800; font-variant-numeric:tabular-nums; }
.buy-bar-price .lbl{ font-size:.78rem; color:var(--muted); }
.buy-bar .btn{ padding:12px 22px; font-size:.9rem; }

@media (max-width:520px){
  .buy-bar{ display:flex; }
  /* keep the bar from covering the last of the footer */
  body{ padding-bottom:74px; }
}

/* ---------- WooCommerce cart / checkout / account ---------- */
/* Full measure, not the .doc prose column — a checkout form squeezed to 760px
   wraps its billing fields badly. */
.commerce-page{ padding-block:48px 80px; }
.commerce-title{ font-size:var(--step-3); margin:0 0 28px; }
.commerce .wc-block-components-title,
.commerce .wp-block-woocommerce-checkout-order-summary-block{ font-family:var(--font); }
.commerce a{ color:var(--blue); }

/* ---------- the "no payment methods" flash ---------- */
/* WooCommerce assembles the checkout in the browser, and Stripe — the only
   gateway on this site — registers itself late. Measured on the live checkout
   2026-08-17: the page is ready at 0.8s and Stripe's payment box does not land
   until 2.8-4.2s. In that gap WooCommerce looks at an empty method list and
   prints its own red "There are no payment methods available. Please contact us
   for help placing your order." on the one page where money changes hands, and
   it is untrue for those three seconds. Reported by the user 2026-08-17.

   Delaying that one notice hides the flash without hiding a real failure. In the
   normal case Stripe arrives and WooCommerce removes the element well before the
   delay elapses, so it never paints; if payment genuinely were unavailable the
   message still appears, four seconds later. The delay counts from when the
   element is inserted, which is exactly the moment we want to measure from.

   CSS rather than JS deliberately — the money path has to be unaffected by a
   file failing to load, and a browser too old for this rule simply behaves as
   the site does today. The class is WooCommerce's own and is unique to the
   checkout block, so it is left unscoped rather than hung off .commerce. DO NOT
   widen the selector to .wc-block-components-notice-banner: that class also
   carries genuine checkout errors, which must never be delayed. */
.wc-block-checkout__no-payment-methods-notice{ animation:aa-late-notice 0s 4s both; }
@keyframes aa-late-notice{ from{ visibility:hidden; } to{ visibility:visible; } }

@media (max-width:640px){
  .commerce-page{ padding-block:32px 56px; }
}

/* ---------- footer ---------- */
.site-footer{ background:var(--ink); color:#cfd3d8; padding:56px 0 28px; }
.footer-top{
  display:grid; grid-template-columns:1.7fr 1fr 1.1fr; gap:40px;
  margin-bottom:36px;
}
.footer-brand svg{ width:170px; height:auto; margin-bottom:16px; }
.footer-brand p{ font-size:.9rem; color:#8b929b; margin:0; max-width:34ch; }
.footer-col h3{
  font-size:.73rem; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:#8b929b; margin:0 0 14px;
}
.footer-col p{ display:block; font-size:.92rem; color:#cfd3d8; margin:0 0 8px; }
.footer-col a{
  display:block; font-size:.92rem; color:#cfd3d8;
  margin:0; padding-block:11px;   /* 44px touch target */
  text-decoration:none;
}
.footer-col a:hover{ color:var(--white); }
.footer-bottom{
  border-top:1px solid #333; padding-top:22px;
  display:flex; justify-content:space-between; flex-wrap:wrap; gap:10px;
  font-size:.84rem; color:#8b929b;
}
.footer-bottom p{ margin:0; color:#8b929b; }
/* the base blue link colour fails contrast on the ink footer */
.footer-bottom a{ color:#cfd3d8; text-decoration:underline; }
.footer-bottom a:hover{ color:var(--white); }

@media (max-width:900px){ .footer-top{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .footer-top{ grid-template-columns:1fr; gap:28px; } }