/* ============================================================
   Chasing Perspectives, design system (v2, enriched)
   Font: Work Sans 400/700 (matches original)
   Signature: blue→purple→pink gradient + per-course gradients
   ============================================================ */

/* ---- self-hosted fonts -------------------------------------------------
   These used to come from fonts.googleapis.com on every page. That handed
   Google the IP address and referring page of every visitor to all 129 pages,
   was never disclosed in our privacy policy, and is the exact pattern a Munich
   court awarded damages over in January 2022. We grant UK/EEA rights in the
   policy and run European trips, so EU visitors are not hypothetical. Hosting
   the files ourselves removes the problem instead of documenting it.

   Two things fall out of it for free: the CSP no longer needs to allow
   fonts.googleapis.com or fonts.gstatic.com at all, and a render-blocking
   request to a third-party origin disappears from every page load.

   Work Sans ships as ONE variable font per style. Google served the same file
   for 400/500/700/800/900 and we were downloading it five times over; declaring
   the weight RANGE means one file covers every weight we use. Six files, 212 KB,
   where the naive static-instance version was sixteen files and 617 KB.

   The unicode-range split is Google's own and is kept deliberately: a visitor
   who never renders an accented character never downloads the latin-ext file.
   latin-ext is not optional here, it is what makes Jökulsárlón and the Faroese
   and Icelandic place names render correctly.
   ------------------------------------------------------------------------ */
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/work-sans-var-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Work Sans';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/work-sans-var-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/work-sans-var-italic-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Work Sans';
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: url('fonts/work-sans-var-italic-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Square Peg';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/square-peg-400-latin-ext.woff2') format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Square Peg';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('fonts/square-peg-400-latin.woff2') format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --green:        #17a34a;
  --green-dark:   #0f7d39;
  --green-tint:   #e8f8ee;
  --yellow:       #ffd859;
  --blue:         #2e91fc;
  --ink:          #1d2630;
  --ink-soft:     #474747;
  --grey:         #7b7b7b;
  --line:         #e6e8eb;
  --bg-soft:      #f6f7f8;
  --white:        #ffffff;
  --charcoal:     #12161c;
  --charcoal-2:   #1a2029;

  /* official brand gradients (135deg, top-left → bottom-right) */
  --grad-brand:   linear-gradient(135deg, #7895f3 0%, #eb5381 100%);   /* About & Library */
  /* Chaser Pro pill. Brand colours, but 90deg not 135deg: on a wide short pill a
     diagonal ramp is shorter than the pill is wide, so the colour swings through the
     middle and both ends go flat, which reads as a hard edge. Across the long axis it
     uses the full width and stays smooth. Upgraded to OKLAB below where supported,
     which keeps the midpoint saturated instead of passing through a muddy grey.
     ONE definition: site/app/index.html loads this file, so web and app share it. */
  --grad-pro:     linear-gradient(90deg, #7895f3 0%, #eb5381 100%);
  --grad-learn:   linear-gradient(135deg, #d1f390 0%, #61b8be 100%);   /* lime → teal */
  --grad-build:   linear-gradient(135deg, #c962ef 0%, #56dbed 100%);   /* purple → cyan */
  --grad-explore: linear-gradient(135deg, #3787ed 0%, #a1eddd 100%);   /* blue → mint */

  --radius:       18px;
  --radius-sm:    12px;
  --shadow:       0 10px 30px rgba(20,30,40,.08);
  --shadow-lg:    0 30px 70px rgba(20,30,40,.18);
  --maxw:         1180px;
  --pad:          clamp(20px, 5vw, 44px);
  --font:         'Work Sans', system-ui, -apple-system, sans-serif;
}

/* Smoother Chaser Pro ramp where the browser can interpolate in OKLAB (Safari 16.4+,
   Chrome 111+). Inside @supports rather than a second declaration on :root, because a
   custom property holding an unsupported function is not dropped at parse time: it
   fails later, at use, and takes the whole background with it. This way an older
   browser simply keeps the sRGB value above. */
@supports (background: linear-gradient(90deg in oklab, red, blue)) {
  :root { --grad-pro: linear-gradient(90deg in oklab, #7895f3 0%, #eb5381 100%); }
}

* { box-sizing: border-box; margin: 0; padding: 0; }
/* The browser's own [hidden] rule is display:none at plain attribute weight, so any
   class that sets a display value (.btn is flex) silently un-hides the element. That
   shipped a live "Remove photo" button on the signed-out account page. */
[hidden] { display: none !important; }
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  font-family: var(--font);
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { max-width: 100%; height: auto; display: block; }
a { color: inherit; text-decoration: none; }

h1, h2, h3, h4 { font-weight: 700; line-height: 1.08; letter-spacing: -.02em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 6vw, 4.4rem); }
h2 { font-size: clamp(2rem, 4.2vw, 3.2rem); }
h3 { font-size: clamp(1.3rem, 2.4vw, 1.7rem); }
p  { color: var(--ink-soft); text-wrap: pretty; }

/* Avoid single-word orphans sitewide: headings balance across lines, body copy
   avoids a lone last word. Both degrade gracefully on older browsers and never
   force an awkward break when a line genuinely can't fit. */
h5, h6, .htext, .big-q, .script-text, .eyebrow, blockquote, figcaption { text-wrap: balance; }
.lead, .home-lede, li, .prose p { text-wrap: pretty; }
strong, b { font-weight: 700; }

.accent { color: var(--green); }
.muted  { color: var(--grey); }

/* gradient text utility (brand signature) */
.gtext {
  background: linear-gradient(90deg, #7895f3 0%, #eb5381 100%);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  display: inline;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
}
.gtext-learn   { background: var(--grad-learn);   -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.gtext-build   { background: var(--grad-build);   -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.gtext-explore { background: var(--grad-explore); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }

/* heading gradients sampled pixel-exact from the original brand PNGs */
.gh-brand, .gh-learn, .gh-build, .gh-explore {
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  padding-bottom:.08em; /* room so background-clip:text doesn't clip descenders (g, y, p) */
}
.gh-brand   { background-image: linear-gradient(90deg, #7895f3 0%, #eb5381 100%); display: inline; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.gh-learn   { background-image: var(--grad-learn); }
.gh-build   { background-image: var(--grad-build); }
.gh-explore { background-image: var(--grad-explore); }
.htext-ink  { color:#474747; -webkit-text-fill-color:#474747; }

/* ---------- layout ---------- */
.container { max-width: var(--maxw); margin: 0 auto; padding-inline: var(--pad); }
section { padding-block: clamp(60px, 8vw, 120px); position: relative; }
.section-soft { background: var(--bg-soft); }
.section-tint { background: var(--green-tint); }
.section-dark { background: var(--charcoal); color: #e8edf2; }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: #aeb8c2; }

/* brand trust bar */
.brandbar { text-align:center; }
.brandbar .eyebrow { color:#9fb0c0; }
.brandbar h2 { font-size: clamp(1.1rem,2.4vw,1.5rem); margin: 6px 0 0; }
.brand-logos { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap: clamp(24px,5vw,64px); margin-top: 34px; }
.brand-logos span { font-weight:700; font-size: clamp(1rem,2.2vw,1.45rem); letter-spacing:.04em; color:#cdd6df; opacity:.78; white-space:nowrap; }

/* soft radial glow behind sections for depth */
.glow { position: relative; }
.glow::before {
  content: ""; position: absolute; z-index: 0; pointer-events: none;
  width: 60vw; max-width: 720px; aspect-ratio: 1;
  background: radial-gradient(circle, rgba(176,106,208,.16), transparent 62%);
  top: -10%; left: 50%; transform: translateX(-50%); filter: blur(10px);
}
.glow > * { position: relative; z-index: 1; }

.eyebrow {
  display: block; width: fit-content;
  font-size: .8rem; font-weight: 700; letter-spacing: .16em;
  text-transform: uppercase; color: var(--green);
  margin-bottom: 16px;
}
.hero .eyebrow { margin-inline: auto; }
.lead { font-size: clamp(1.05rem, 1.6vw, 1.28rem); max-width: 60ch; color: var(--ink-soft); }
.center { text-align: center; }
.center .lead, .center .eyebrow { margin-inline: auto; }
/* Narrative section: centered headline over a left-aligned body column (Apple pattern) */
.prose-head { text-align: center; max-width: 760px; margin-inline: auto; }
.prose-head .eyebrow { margin-inline: auto; }
.center .lead { margin-top: 10px; }

/* headline graphic lockups (brand PNGs) */
.lockup { display: block; height: auto; }
.lockup-hero  { width: min(760px, 86%); margin: 0 auto; }
.lockup-script{ width: min(360px, 64%); margin: 18px auto 0; }
.lockup-head  { width: min(720px, 90%); margin: 0 auto; }
.lockup-head-sm { width: min(440px, 80%); margin: 0 auto; }

/* ---------- text replacements for brand PNG lockups ---------- */
.htext { font-weight: 900; letter-spacing: -.02em; line-height: 1.04; text-align: center; margin: 0 auto; width: fit-content; max-width: 100%; }
.htext-hero    { font-size: clamp(2.6rem, 6.4vw, 4.6rem); max-width: 16ch; color: #fff; }
.htext-level   { font-size: clamp(2.6rem, 6vw, 4.4rem);   max-width: 17ch; color: #fff; }
.htext-head    { font-size: clamp(2rem, 4.4vw, 3.4rem);   max-width: 20ch; }
.htext-head-sm { font-size: clamp(1.7rem, 3.4vw, 2.6rem); max-width: 16ch; }
.htext-dive    { font-size: clamp(1.9rem, 3.8vw, 3rem);   max-width: 18ch; margin: 0 0 6px;  text-align: left; }
.htext-home    { font-size: clamp(1.9rem, 3.8vw, 3rem);   max-width: 16ch; margin: 0 0 18px; text-align: left; }
.htext-teach   { font-size: clamp(1.6rem, 3vw, 2.4rem);   max-width: 26ch; color: #fff; }
/* cursive (Caveat) script replacements */
.script-text  { font-family: "Square Peg", cursive; font-weight: 400; line-height: 1.1; color: #fff; text-align: center; }
.script-text.script-hero  { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin: 8px auto 0; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
.script-text.script-level { font-size: clamp(2.1rem, 4.6vw, 3.4rem); margin: 10px auto 0; text-shadow: 0 2px 18px rgba(0,0,0,.5); }
/* compound hero lockup: bold word + cursive tagline */
.htext-dive.script-left, .script-left { text-align: left; margin-inline: 0; }
/* ---------- course hero hierarchy: kicker → gradient name → tagline → quote ---------- */
.hero .eyebrow { margin-bottom: 14px; }
.hero .course-title {
  font-weight:900; line-height:1.12; letter-spacing:-.025em; padding-bottom:.12em;
  font-size:clamp(2.8rem,7vw,5.2rem); max-width:18ch; width:fit-content; margin:0 auto;
  background-image:linear-gradient(90deg,#3787ed 0%,#a1eddd 100%);
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  filter:drop-shadow(0 3px 22px rgba(0,0,0,.4));
}
.hero .course-title.learn   { background-image:linear-gradient(90deg,#d1f390 0%,#61b8be 100%); }
.hero .course-title.build   { background-image:linear-gradient(90deg,#c962ef 0%,#56dbed 100%); }
.hero .course-title.explore { background-image:linear-gradient(90deg,#3787ed 0%,#a1eddd 100%); }
.hero .course-title.brand   { background-image:linear-gradient(90deg,#7895f3 0%,#eb5381 100%); }
.hero .hero-tagline {
  color:#fff; font-weight:600; line-height:1.18;
  font-size:clamp(1.2rem,2vw,1.6rem); max-width:24ch; margin:18px auto 0;
}
.hero .hero-quote {
  color:rgba(255,255,255,.9); font-style:italic;
  font-size:clamp(1.02rem,1.6vw,1.2rem); max-width:52ch; margin:16px auto 0;
}

/* ---------- buttons ---------- */
/* Sized like a native control, not a landing-page hero button (Josh, 2026-08-18:
   "these large buttons ... isn't very apple like"). It was 15/30 padding at weight
   700 inside a 2px border — about 50px tall, so a pair of them dominated any card
   they sat in. Apple's equivalents land near 36-40px at weight 600 with a hairline
   edge. The brand gradient is unchanged; only the scale and the theatrics around it. */
.btn {
  display: inline-flex; align-items: center; gap: .5em;
  font-weight: 600; font-size: .94rem;
  padding: 11px 20px; border-radius: 999px;
  border: 1px solid transparent; cursor: pointer;
  transition: transform .15s ease, box-shadow .2s ease, background .2s ease, color .2s ease, border-color .2s ease;
  white-space: nowrap;
}
.btn:hover { transform: translateY(-1px); }
.btn-primary {
  background: #17a34a; color: #fff; border-color: transparent;
}
.btn-primary:hover { filter: brightness(1.05); }
.hero .btn-primary, .section-dark .btn-primary, .cta-banner .btn-primary { background: rgba(23,163,74,.5); box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.3); }
/* Glass buttons, base tuned for LIGHT surfaces (near-solid, high legibility) */
/* The gradient stays; the glow, the blur and the text-shadow go. Those three were
   what made it read as a web CTA rather than a control: a coloured halo under every
   button, plus a blur the button never needed because it is opaque anyway. */
.btn-grad {
  background: linear-gradient(135deg, #7895f3, #eb5381);
  color: #fff; border-color: transparent;
}
.btn-grad.learn   { background: linear-gradient(135deg, rgba(150,205,90,.96), rgba(64,168,178,.96)); }
.btn-grad.build   { background: linear-gradient(135deg, rgba(170,80,225,.96), rgba(60,182,220,.96)); }
.btn-grad.explore { background: linear-gradient(135deg, rgba(40,115,225,.97), rgba(64,176,170,.96)); }
/* On DARK surfaces, more see-through frosted glass */
.hero .btn-grad,         .section-dark .btn-grad,         .cohort .btn-grad         { background: linear-gradient(135deg, rgba(120,149,243,.4), rgba(235,83,129,.4)); box-shadow: 0 10px 30px rgba(0,0,0,.25), inset 0 1px 0 rgba(255,255,255,.32); }
.hero .btn-grad.learn,   .section-dark .btn-grad.learn,   .cohort .btn-grad.learn   { background: linear-gradient(135deg, rgba(150,205,90,.4), rgba(70,175,185,.4)); }
.hero .btn-grad.build,   .section-dark .btn-grad.build,   .cohort .btn-grad.build   { background: linear-gradient(135deg, rgba(170,80,225,.4), rgba(70,190,225,.4)); }
.hero .btn-grad.explore, .section-dark .btn-grad.explore, .cohort .btn-grad.explore { background: linear-gradient(135deg, rgba(45,120,225,.42), rgba(95,195,185,.4)); }
.btn-grad:hover { filter: brightness(1.05); }
.btn-grad, .btn-grad.learn, .btn-grad.build, .btn-grad.explore { background-origin: border-box; }
/* Frosted-glass secondary buttons, same light/dark legibility rules as .btn-grad */
/* The quiet secondary. It was a blurred translucent white with its own drop shadow,
   which on a DARK card rendered as a heavy grey slab competing with the primary
   (Josh: "id also like the grey button to be redone"). A secondary should recede:
   plain fill, hairline edge, no blur and no shadow. The dark-surface variant is
   below, because one translucent white cannot serve both grounds. */
.btn-ghost {
  /* A TINT of the ground, not white — a white secondary on a white card is invisible,
     which is exactly what the first pass produced. This is Apple's grey secondary:
     legible on white, still obviously the quieter of the two. */
  background: rgba(20,30,50,.06); color: var(--ink); border-color: rgba(20,30,50,.12);
}
.btn-ghost:hover { border-color: var(--green); color: var(--green); background: rgba(20,30,50,.09); }
/* On dark grounds it tints the ground itself rather than laying white over it. */
.hero .btn-ghost, .section-dark .btn-ghost, .cta-banner .btn-ghost, .cohort .btn-ghost {
  background: rgba(255,255,255,.10); color: #e8edf3; border-color: rgba(255,255,255,.18);
}
.hero .btn-ghost:hover, .section-dark .btn-ghost:hover, .cta-banner .btn-ghost:hover, .cohort .btn-ghost:hover {
  background: rgba(255,255,255,.16); color: #fff; border-color: rgba(255,255,255,.28);
}
.btn-light {
  background: rgba(255,255,255,.82); color: var(--ink); border-color: rgba(255,255,255,.6);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 10px 26px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.7);
}
.btn-light:hover { background: rgba(255,255,255,.92); box-shadow: 0 14px 32px rgba(0,0,0,.2), inset 0 1px 0 rgba(255,255,255,.85); }
.btn-outline-light {
  background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.4);
  -webkit-backdrop-filter: blur(10px) saturate(150%); backdrop-filter: blur(10px) saturate(150%);
  box-shadow: 0 8px 22px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.28);
  text-shadow: 0 1px 2px rgba(0,0,0,.22);
}
.btn-outline-light:hover { background: rgba(255,255,255,.24); }
/* On DARK surfaces, the white-fill button goes more see-through */
.hero .btn-light, .section-dark .btn-light, .cta-banner .btn-light { background: rgba(255,255,255,.7); border-color: rgba(255,255,255,.45); }
.hero .btn-light:hover, .section-dark .btn-light:hover, .cta-banner .btn-light:hover { background: rgba(255,255,255,.82); }
.btn-arrow::after { content: "→"; transition: transform .2s ease; }
.btn-arrow:hover::after { transform: translateX(4px); }
.btn-row { display: flex; gap: 14px; flex-wrap: wrap; }
.center .btn-row, .btn-row.center { justify-content: center; }

/* ============================================================
   HEADER
   ============================================================ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  background: transparent;
  transition: background .3s ease, box-shadow .3s ease;
}
/* Back-link anchor targets land below the fixed header, not under it */
#tours, #sessions, #stack, #products, #safari, #lessons { scroll-margin-top: 104px; }
@media (max-width: 880px) {
  #tours, #sessions, #stack, #products, #safari, #lessons { scroll-margin-top: 80px; }
}
.site-header.scrolled {
  background: rgba(0,0,0,.85);
  backdrop-filter: saturate(140%) blur(6px);
}
.nav { display: grid; grid-template-columns: auto auto auto; justify-content: center; align-items: center; height: 84px; }
/* On roomy desktop widths, equal side columns (1fr) pin the logo column to the true
   viewport centre, so the right-hand search + sign-in icons extend rightward without
   shifting the logo. Only above 1080px, where the right cluster fits its half without
   starving the centre column (which would crush the logo on narrow screens). */
@media (min-width: 1080px) { .nav { grid-template-columns: 1fr auto 1fr; } }
/* Between the mobile breakpoint and 1080px the full menu + search + sign-in is a tight fit,
   so trim the link padding to keep everything on one row (and the logo at full size). */
@media (min-width: 881px) and (max-width: 1079px) {
  .nav-links a { padding-left: 11px; padding-right: 11px; }
  .nav-search-btn { padding-left: 9px; padding-right: 9px; }
}
.nav-menu { display: contents; }
.nav-logo { justify-self: center; grid-column: 2; grid-row: 1; min-width: 90px; }
.nav-logo img { width: 90px; height: auto; display:block; }
.nav-links { display: flex; align-items: center; gap: 0; list-style: none; margin:0; padding:0; }
.nav-left  { justify-self: end;   grid-column: 1; grid-row: 1; padding-right: 26px; }
.nav-right { justify-self: start; grid-column: 3; grid-row: 1; padding-left: 26px; }
/* Optical spacing: the centered nav group sits with its wider right cluster nearer the
   wordmark, so Journal reads ~17px closer to the logo than Explore is, and Journal->Library
   reads ~8px tighter than the (approved) Library->About gap. These two leading right-side
   items are nudged right to equalise the VISIBLE gaps. Desktop only (mobile nav is a
   vertical list). Calibrated at 1440px: logo->Journal ~71px == Explore->logo; Journal->Library
   ~56px == Library->About. The two knobs are independent (each margin pushes only the items
   to its right, so logo->Journal and Journal->Library are set separately). */
@media (min-width: 881px) {
  .nav-right > li:has(> a[href="blog.html"])    { margin-left: 25px; } /* logo -> Journal  (+17) */
  .nav-right > li:has(> a[href="library.html"]) { margin-left: 16px; } /* Journal -> Library (+8) */
}
.nav-links a { color: #f0f0f0; font-weight: 500; font-size: .9rem; padding: 8px 20px; display:block; letter-spacing:.02em; transition: opacity .2s ease; }
.nav-links a:hover { text-decoration: underline; }
.nav-links a.active { text-decoration: underline; }
.nav-toggle { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; flex-direction: column; gap: 5px; justify-content: center; align-items: center; grid-column: 3; justify-self:end; }
.nav-toggle span { width: 24px; height: 2px; background: #fff; transition: .25s; }

/* header search trigger (discreet magnifier at the end of the right nav) */
.nav-search-li { display: flex; align-items: center; }
.nav-search-btn {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; cursor: pointer; color: #f0f0f0;
  padding: 8px 12px; margin-left: 6px; border-radius: 999px;
  font-family: inherit; font-weight: 500; font-size: .9rem; letter-spacing: .02em;
  opacity: .92; transition: opacity .2s ease, background .2s ease;
}
.nav-search-btn:hover { opacity: 1; background: rgba(255,255,255,.10); }
.nav-search-btn svg { display: block; }
.nav-search-label { display: none; }
.nav-account-btn[data-signed="1"] { color: #61b8be; }   /* signed in: teal accent on the sign-out symbol */
/* Signed-in member: avatar button (initials or photo) that opens a dropdown account
   menu (portal shortcuts + Log out). One control, replaces the separate sign-out icon. */
.nav-acct-li { display: flex; align-items: center; }
.nav-acct { position: relative; display: flex; align-items: center; }
.nav-avatar {
  display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
  background: none; border: 0; padding: 0; margin-left: 6px; font: inherit; color: inherit;
}
.nav-avatar-face {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 50%; flex: none; overflow: hidden;
  background: linear-gradient(135deg, #7895f3, #56dbed); color: #fff;
  font-weight: 700; font-size: .72rem; letter-spacing: .02em; line-height: 1;
  box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.22);
  transition: transform .15s ease, box-shadow .15s ease;
}
.nav-avatar:hover .nav-avatar-face,
.nav-avatar[aria-expanded="true"] .nav-avatar-face { transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px rgba(255,255,255,.6), 0 3px 10px rgba(0,0,0,.3); }
.nav-avatar-face img { width: 100%; height: 100%; object-fit: cover; }
/* dropdown card */
.nav-acct-menu {
  position: absolute; top: calc(100% + 12px); right: 0; min-width: 232px;
  background: #fff; border-radius: 14px; padding: 8px; border: 1px solid rgba(0,0,0,.06);
  box-shadow: 0 16px 40px rgba(0,0,0,.28);
  opacity: 0; visibility: hidden; transform: translateY(-8px) scale(.98); transform-origin: top right;
  transition: opacity .16s ease, transform .16s ease, visibility .16s; z-index: 60;
}
.nav-acct-menu.open { opacity: 1; visibility: visible; transform: none; }
.nav-acct-head { display: flex; align-items: center; gap: 10px; padding: 8px 10px 12px; border-bottom: 1px solid #eef0f2; margin-bottom: 6px; }
.nav-acct-id { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.nav-acct-id b { color: #1a1a1a; font-size: .92rem; }
.nav-acct-id span { color: #6b7280; font-size: .78rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 170px; }
.nav-acct-menu a, .nav-acct-logout {
  display: block; width: 100%; text-align: left; box-sizing: border-box;
  padding: 9px 12px; border-radius: 9px; border: 0; background: none; cursor: pointer;
  color: #2a2a2a; font: 500 .9rem/1.2 inherit; letter-spacing: 0; text-decoration: none;
}
.nav-acct-menu a:hover, .nav-acct-logout:hover { background: #f1f3f5; text-decoration: none; }
.nav-acct-logout { margin-top: 6px; border-top: 1px solid #eef0f2; color: #c0392b; font-weight: 600; }

/* ===========================================================
   Pillar nav: hover "spin" label + Apple-style mega dropdown
   =========================================================== */
.nav-has-mega { position: relative; align-self: stretch; display: flex; align-items: center; }
/* The accordion chevron is a mobile-only affordance; on desktop the mega is hover-driven. */
.mega-toggle { display: none; }
.nav-links a.nav-flip-link:hover { text-decoration: none; }
.nav-links a.nav-flip-link.active .flip-front { text-decoration: underline; text-underline-offset: 5px; }

/* the spinning label: two stacked faces flipped on the X axis.
   NO 3D CONTEXT (Josh, 17 Sep 2026: a gentle trackpad scroll and every menu word vanished,
   while the search and avatar stayed and the words' space stayed empty). The faces used to
   be hidden with preserve-3d + backface-visibility, which puts each one on its own
   compositing layer inside a fixed header that toggles backdrop-filter at 40px, and Safari
   can drop those layers and never repaint them. Now the faces are flat and the one turned
   away is simply transparent: the swap happens when the spin passes edge-on, at about 14%
   of this easing (0.07s), so it cannot be seen. */
.nav-flip { display: inline-grid; perspective: 600px; vertical-align: middle; }
.flip-inner {
  display: inline-grid;
  transition: transform .5s cubic-bezier(.2,.7,.2,1);
}
.flip-front, .flip-back { grid-area: 1 / 1; white-space: nowrap; transition: opacity 0s linear .07s; }
.flip-back { transform: rotateX(180deg); opacity: 0; }
.nav-has-mega:hover .flip-inner,
.nav-has-mega:focus-within .flip-inner { transform: rotateX(180deg); }
.nav-has-mega:hover .flip-front,
.nav-has-mega:focus-within .flip-front { opacity: 0; }
.nav-has-mega:hover .flip-back,
.nav-has-mega:focus-within .flip-back { opacity: 1; }

/* the dropdown panel */
.mega {
  position: absolute; top: 100%; left: -8px;
  transform: translateY(10px);
  min-width: 230px; max-width: 92vw; padding-top: 14px; /* padding-top bridges the hover gap */
  opacity: 0; visibility: hidden; pointer-events: none; z-index: 60;
  transition: opacity .28s ease, transform .28s ease, visibility 0s linear .28s;
}
.nav-has-mega:hover .mega,
.nav-has-mega:focus-within .mega {
  opacity: 1; visibility: visible; pointer-events: auto;
  transform: translateY(0);
  transition: opacity .28s ease, transform .28s ease, visibility 0s;
}
/* right-cluster menus (Library, About) open leftward so they stay on-screen */
.nav-has-mega.align-right .mega { left: auto; right: -8px; }
.mega-list {
  list-style: none; margin: 0; padding: 10px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0,0,0,.06); border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(10,18,40,.35), 0 6px 18px -10px rgba(10,18,40,.22);
}
.mega-list li + li { margin-top: 1px; }
.nav-links .mega-list a {
  display: block; padding: 10px 14px; border-radius: 10px;
  color: #1b2230; font-weight: 600; font-size: .92rem; letter-spacing: 0; white-space: nowrap;
  transition: background .18s ease, color .18s ease, transform .18s ease;
}
.nav-links .mega-list a:hover { background: var(--mega-tint, rgba(97,184,190,.12)); color: var(--mega-ink, #15264d); transform: translateX(2px); text-decoration: none; }

/* per-pillar colourway: each open dropdown tints its own hover to match the
   pillar's gradient (Learn teal, Build purple, Explore blue, Journal green,
   Library pink, More awards gold). Consumed by the base hover above. */
.mega[aria-label="Learn"]   { --mega-tint: rgba(97,184,190,.16); --mega-ink: #1b6e74; }
.mega[aria-label="Build"]   { --mega-tint: rgba(201,98,239,.14);  --mega-ink: #8a2bb5; }
.mega[aria-label="Explore"] { --mega-tint: rgba(55,135,237,.14);  --mega-ink: #205fb0; }
.mega[aria-label="Journal"] { --mega-tint: rgba(23,163,74,.14);   --mega-ink: #0f7d39; }
.mega[aria-label="Library"] { --mega-tint: rgba(235,83,129,.14);  --mega-ink: #c23062; }
.mega[aria-label="More"]    { --mega-tint: rgba(202,165,61,.20);  --mega-ink: #8a6a16; }

/* wide grouped mega (Journal): two labelled columns + footer link, one glass panel */
.mega-wide { min-width: 470px; }
.mega-wide .mega-panel {
  padding: 12px;
  background: rgba(255,255,255,.92);
  -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px);
  border: 1px solid rgba(0,0,0,.06); border-radius: 16px;
  box-shadow: 0 24px 60px -20px rgba(10,18,40,.35), 0 6px 18px -10px rgba(10,18,40,.22);
}
.mega-wide .mega-cols { display: flex; gap: 6px; }
.mega-wide .mega-col { flex: 1 1 0; min-width: 170px; }
.mega-wide .mega-col-title {
  display: block; padding: 4px 14px 6px;
  font-size: .68rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: #8089a0;
}
/* inside the wide panel the lists are bare; the panel itself carries the glass */
.mega-wide .mega-list {
  background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.nav-links .mega-foot {
  display: block; margin: 8px 6px 0; padding: 10px 14px;
  border-top: 1px solid rgba(0,0,0,.08);
  color: #15264d; font-weight: 700; font-size: .85rem; transition: color .18s ease;
}
.nav-links .mega-foot:hover { color: var(--mega-ink, #2aa37f); text-decoration: none; }

@media (prefers-reduced-motion: reduce) {
  .flip-inner, .flip-front, .flip-back, .mega, .nav-links .mega-list a { transition: none; }
}

/* search overlay (command-palette style) */
.cp-search { position: fixed; inset: 0; z-index: 120; display: flex; justify-content: center; align-items: flex-start; }
.cp-search[hidden] { display: none; }
.cp-search-backdrop { position: absolute; inset: 0; background: rgba(8,11,16,.62); backdrop-filter: blur(3px); opacity: 0; transition: opacity .18s ease; }
.cp-search.is-open .cp-search-backdrop { opacity: 1; }
.cp-search-panel {
  position: relative; width: min(640px, calc(100vw - 32px));
  margin-top: clamp(64px, 12vh, 140px);
  background: #fff; border-radius: 16px; box-shadow: var(--shadow-lg);
  overflow: hidden; transform: translateY(-10px) scale(.98); opacity: 0;
  transition: transform .2s ease, opacity .2s ease;
}
.cp-search.is-open .cp-search-panel { transform: translateY(0) scale(1); opacity: 1; }
.cp-search-bar { display: flex; align-items: center; gap: 12px; padding: 16px 18px; border-bottom: 1px solid var(--line); color: var(--grey); }
.cp-search-bar input {
  flex: 1; border: 0; outline: 0; background: none;
  font-family: inherit; font-size: 1.05rem; color: var(--ink); font-weight: 500;
}
.cp-search-bar input::placeholder { color: var(--grey); font-weight: 400; }
.cp-search-esc { border: 1px solid var(--line); background: var(--bg-soft); color: var(--grey); border-radius: 7px; padding: 3px 8px; font: inherit; font-size: .72rem; font-weight: 600; cursor: pointer; letter-spacing: .04em; }
.cp-search-esc:hover { color: var(--ink); }
.cp-search-results { max-height: min(56vh, 440px); overflow-y: auto; padding: 8px; }
.cp-search-empty { padding: 28px 18px; text-align: center; color: var(--grey); font-size: .95rem; }
.cp-search-item {
  display: flex; align-items: center; gap: 14px; padding: 10px 12px;
  border-radius: 11px; color: var(--ink); transition: background .15s ease;
}
.cp-search-item:hover, .cp-search-item.is-active { background: var(--bg-soft); }
.cp-search-thumb { flex: 0 0 auto; width: 54px; height: 42px; border-radius: 8px; overflow: hidden; background: var(--bg-soft); }
.cp-search-thumb img { width: 100%; height: 100%; object-fit: cover; }
.cp-search-text { flex: 1 1 auto; min-width: 0; }
.cp-search-name { display: block; font-weight: 600; font-size: .98rem; line-height: 1.2; }
.cp-search-meta { display: block; color: var(--grey); font-size: .82rem; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cp-search-price { flex: 0 0 auto; font-weight: 700; font-size: .9rem; color: var(--ink); }
body.cp-search-open { overflow: hidden; }

/* header "back" arrow on product/course pages, mirrors the search magnifier.
   Selector matches the global `.nav-links a` specificity so its padding wins
   (otherwise the arrow inherits the wider nav-link padding and sits a few px off). */
.nav-back-li { display: flex; align-items: center; }
.nav-links a.nav-back-btn {
  display: inline-flex; align-items: center; gap: 8px;
  color: #f0f0f0; padding: 8px 12px; margin-right: 6px; border-radius: 999px;
  font-family: inherit; font-weight: 500; font-size: .9rem; letter-spacing: .02em;
  opacity: .92; transition: opacity .2s ease, background .2s ease, transform .2s ease;
}
.nav-links a.nav-back-btn:hover { opacity: 1; background: rgba(255,255,255,.10); transform: translateX(-2px); text-decoration: none; }
.nav-back-btn svg { display: block; }
.nav-back-label { display: none; }
@media (max-width: 880px) {
  .nav-links a.nav-back-btn { width: 100%; justify-content: flex-start; padding: 15px 0; margin-right: 0; border-radius: 0; }
  .nav-links a.nav-back-btn:hover { background: none; transform: none; }
  .nav-back-label { display: inline; }
}

/* ============================================================
   BUCKET LIST star.
   A line-icon star in the same family as the header search and
   back-arrow glyphs. On product/course pages it is a labelled
   button under the hero CTA; on listing tiles it floats on the
   card image; in the portal it marks saved items. Fills gold when
   saved and fires a subtle multi-colour burst. Saving needs a
   signed-in member, handled by the cp-auth modal below.
   ============================================================ */
.cp-bucket-star { position: relative; display: inline-flex; align-items: center; justify-content: center; }
.cp-bucket-ic { display: block; width: 20px; height: 20px; overflow: visible; transition: fill .2s ease, stroke .2s ease, transform .2s ease; }
.cp-bucket-burst { position: absolute; inset: 0; pointer-events: none; }
.cp-bucket-burst i { position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; opacity: 0; }

/* a vivid multi-colour gradient shared by the saved-state border + effects */
:root { --grad-bucket: linear-gradient(120deg,#7895f3,#56dbed,#d1f390,#ffce54,#eb5381,#c962ef); }

/* hero button: discreet labelled pill, centred under the hero CTA */
.cp-bucket-cta { margin-top: 14px; display: flex; justify-content: center; }
.cp-bucket-btn {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 17px; border: 1px solid transparent; border-radius: 999px;
  background: transparent; color: rgba(255,255,255,.88); cursor: pointer;
  font-family: inherit; font-weight: 600; font-size: .85rem; letter-spacing: .01em;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease;
}
.cp-bucket-btn .cp-bucket-ic { width: 17px; height: 17px; }
.cp-bucket-btn:hover { color: #fff; transform: translateY(-1px); }
.cp-bucket-btn:active { transform: scale(.98); }
.cp-bucket-btn:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
/* colourful gradient border ring, only shown once the star is on */
.cp-bucket-btn::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.6px;
  background: var(--grad-bucket);
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  opacity: 0; transition: opacity .4s ease .35s; pointer-events: none;
}
.cp-bucket-btn.is-on { border-color: transparent; background: rgba(255,255,255,.08); color: #fff; }
.cp-bucket-btn.is-on::before { opacity: 1; }
.cp-bucket-btn.is-on .cp-bucket-ic { fill: #ffc83d; stroke: #ffc83d; filter: drop-shadow(0 1px 6px rgba(255,200,61,.5)); }

/* tile star: softened so it sits quietly on the card image */
.cp-bucket-host { position: relative; }
.cp-bucket-tile {
  position: absolute; top: 10px; right: 10px; z-index: 4;
  width: 33px; height: 33px; padding: 0; border: 0; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: rgba(12,15,22,.28); color: rgba(255,255,255,.92); cursor: pointer;
  box-shadow: 0 1px 5px rgba(0,0,0,.2); backdrop-filter: blur(2px); opacity: .9;
  -webkit-tap-highlight-color: transparent;
  transition: background .2s ease, transform .15s ease, opacity .2s ease;
}
.cp-bucket-tile .cp-bucket-ic { width: 17px; height: 17px; }
.cp-bucket-tile:hover { background: rgba(12,15,22,.5); opacity: 1; transform: scale(1.06); }
.cp-bucket-tile:active { transform: scale(.92); }
.cp-bucket-tile:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.cp-bucket-tile.is-on { background: rgba(12,15,22,.4); opacity: 1; }
.cp-bucket-tile.is-on .cp-bucket-ic { fill: #ffc83d; stroke: #ffc83d; filter: drop-shadow(0 1px 5px rgba(0,0,0,.5)); }

/* Saved-client signal: a soft brand gradient washing down from the top of the
   booking card / modal, with a small integrated caption. No boxed pill. */
.enrol-box.is-bucketed {
  background-image: linear-gradient(180deg, rgba(118,140,235,.16), rgba(86,219,237,.07) 24%, rgba(255,255,255,0) 56%);
}
.cp-card-body.is-bucketed {
  background-image: linear-gradient(180deg, rgba(118,140,235,.15), rgba(201,98,239,.06) 26%, rgba(255,255,255,0) 60%);
}
.cp-bucket-promo {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: inherit; font-weight: 700; font-size: .76rem; letter-spacing: .015em;
  line-height: 1; color: #6f74e0; white-space: nowrap;
  animation: cpPromoIn .5s cubic-bezier(.22,.61,.36,1);
}
.cp-bucket-promo .cp-promo-star { width: 14px; height: 14px; flex: 0 0 auto; fill: #7e88ef; stroke: none; }
.cp-bucket-promo[hidden] { display: none; }
.enrol-box .cp-bucket-promo { display: flex; justify-content: center; margin: 12px 0 0; }
.cp-card-body .cp-bucket-promo { margin: 0 0 12px; }
@keyframes cpPromoIn { 0% { opacity: 0; transform: translateY(4px); } 100% { opacity: 1; transform: none; } }

/* shared one-shot animations (class lives on the button, glyph wrapper inside) */
.is-bursting .cp-bucket-ic { animation: cpBucketPop .45s ease; }
.is-bursting .cp-bucket-burst i { animation: cpBucketParticle .62s cubic-bezier(.25,.7,.35,1) forwards; }
.cp-bucket-star::after {
  content: ""; position: absolute; top: 50%; left: 50%; width: 26px; height: 26px;
  margin: -13px 0 0 -13px; border-radius: 50%; border: 2px solid #ffd166;
  transform: scale(.4); opacity: 0; pointer-events: none;
}
.is-bursting .cp-bucket-star::after { animation: cpBucketRing .6s ease-out forwards; }
@keyframes cpBucketPop { 0% { transform: scale(1); } 28% { transform: scale(.75); } 60% { transform: scale(1.3); } 100% { transform: scale(1); } }
@keyframes cpBucketRing { 0% { transform: scale(.4); opacity: .85; } 100% { transform: scale(2); opacity: 0; } }
@keyframes cpBucketParticle { 0% { transform: translate(0,0) scale(.4); opacity: 1; } 70% { opacity: 1; } 100% { transform: translate(var(--tx,0), var(--ty,0)) scale(1); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .is-bursting .cp-bucket-ic, .is-bursting .cp-bucket-star::after, .is-bursting .cp-bucket-burst i { animation: none !important; }
}

/* ---- sign-in / sign-up modal (Luma-style card, mockup auth) ---- */
/* ABOVE THE BOOKING CARD, BECAUSE IT OPENS ON TOP OF IT.

   This sat at 130, which was above everything in this file and below the one
   thing that mattered: booking.css puts the booking overlay at 1000. So when a
   signed-out buyer pressed Pay, the sign-in opened -- visible:visible,
   display:grid, correctly filled in -- entirely behind the card they were
   looking at, and the button simply appeared to do nothing.

   2000 clears the booking overlay with room to spare, and stays under the
   9999 reserved for toasts, which have to be readable over everything
   including this. */
/* The OVERLAY scrolls, not the card. With the card capped at 92vh and the overlay unscrollable, the iOS
   keyboard (or the Passwords sheet) shrank the visible area, Safari shoved the page to show the input, and
   the card's top was left under the status bar with nothing to swipe to reach it (Josh, 14 Sep 2026).
   Flex + margin:auto centres a short card and top-aligns a tall one so every part of it can be reached;
   overscroll-behavior stops the swipe chaining to the page. */
.cp-auth { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; align-items: center; padding: 20px;
  overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
  opacity: 0; pointer-events: none; transition: opacity .28s ease; }
.cp-auth.open { opacity: 1; pointer-events: auto; }
.cp-auth[hidden] { display: none; }
.cp-auth-scrim { position: fixed; inset: 0; background: rgba(10,11,16,.55);   /* fixed, not absolute: the overlay scrolls now and the scrim must not scroll away with it */
  -webkit-backdrop-filter: blur(9px); backdrop-filter: blur(9px); }

/* soft, slowly drifting glow (above the blur, behind the card) */
.cp-auth-glow { position: fixed; inset: 0; overflow: hidden; }
.cp-auth-glow span { position: absolute; border-radius: 50%; filter: blur(60px); opacity: .55;
  will-change: transform; mix-blend-mode: screen; }
.cp-auth-glow .g1 { width: 46vw; height: 46vw; left: 8%;  top: 6%;   background: #7895f3;
  animation: cpAuthDrift1 22s ease-in-out infinite alternate; }
.cp-auth-glow .g2 { width: 42vw; height: 42vw; right: 6%; top: 14%;  background: #56dbed;
  animation: cpAuthDrift2 26s ease-in-out infinite alternate; }
.cp-auth-glow .g3 { width: 40vw; height: 40vw; left: 24%; bottom: 2%; background: #eb5381;
  animation: cpAuthDrift3 30s ease-in-out infinite alternate; }
.cp-auth-glow .g4 { width: 34vw; height: 34vw; right: 18%; bottom: 6%; background: #ffce54;
  animation: cpAuthDrift4 24s ease-in-out infinite alternate; }
@keyframes cpAuthDrift1 { from{ transform: translate3d(0,0,0) scale(1); }   to{ transform: translate3d(8vw,6vh,0) scale(1.15); } }
@keyframes cpAuthDrift2 { from{ transform: translate3d(0,0,0) scale(1.1); } to{ transform: translate3d(-7vw,5vh,0) scale(.92); } }
@keyframes cpAuthDrift3 { from{ transform: translate3d(0,0,0) scale(.95); } to{ transform: translate3d(6vw,-7vh,0) scale(1.2); } }
@keyframes cpAuthDrift4 { from{ transform: translate3d(0,0,0) scale(1.05); }to{ transform: translate3d(-6vw,-5vh,0) scale(.9); } }
@media (prefers-reduced-motion: reduce) { .cp-auth-glow span { animation: none; } }

.cp-auth-card {
  position: relative; z-index: 1; width: min(420px,100%); margin: auto 0; flex: 0 0 auto;   /* the overlay scrolls; see .cp-auth */
  background: #fff; color: var(--ink); border-radius: 22px; box-shadow: 0 30px 80px rgba(0,0,0,.45);
  text-align: center; transform: translateY(14px) scale(.98); opacity: 0;
  transition: transform .3s cubic-bezier(.22,.61,.36,1), opacity .3s ease;
}
.cp-auth.open .cp-auth-card { transform: translateY(0) scale(1); opacity: 1; }

.cp-auth-media { height: 132px; background: var(--grad-bucket) center/cover no-repeat; position: relative; }
.cp-auth-media::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg,rgba(0,0,0,.04),rgba(0,0,0,.42)); }
/* enquiry header: the looping paper plane on a night gradient (no photo, no scrim) */
.cp-enq-media { background: linear-gradient(148deg, #101a2e 0%, #182a45 46%, #0d1524 100%); }
.cp-enq-media::after { display: none; }
.cp-enq-plane { position: absolute; inset: 0; width: 100%; height: 100%; }
.cp-auth-x { position: absolute; top: 12px; right: 12px; z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  background: rgba(255,255,255,.92); border: 0; cursor: pointer; font-size: 1.2rem; line-height: 1; color: #222;
  display: grid; place-items: center; box-shadow: 0 3px 10px rgba(0,0,0,.25); }
.cp-auth-x:hover { background: #fff; }
.cp-auth-emblem { position: absolute; left: 50%; bottom: -28px; transform: translateX(-50%);
  width: 56px; height: 56px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: var(--grad-brand); box-shadow: 0 10px 24px rgba(235,83,129,.4); border: 3px solid #fff; }
.cp-auth-emblem svg { width: 24px; height: 24px; fill: #fff; stroke: #fff; }

.cp-auth-body { padding: 40px 30px 26px; }
.cp-auth-eyebrow { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: #8a93a0; margin-bottom: 6px; }
.cp-auth-card h2 { font-size: 1.4rem; margin: 0 0 6px; }
.cp-auth-sub { color: var(--grey); font-size: .95rem; margin: 0 0 20px; }
.cp-auth-tabs { display: inline-flex; background: var(--bg-soft); border-radius: 999px; padding: 4px; margin-bottom: 18px; }
.cp-auth-tabs button { border: 0; background: transparent; padding: 8px 18px; border-radius: 999px; font-family: inherit; font-weight: 600; font-size: .9rem; color: var(--grey); cursor: pointer; transition: background .2s, color .2s; }
.cp-auth-tabs button.active { background: #fff; color: var(--ink); box-shadow: 0 2px 8px rgba(0,0,0,.1); }
/* ---- Continue with Apple -----------------------------------------------------
   Apple's own black-button styling rather than our brand green, on purpose: people
   recognise this button by sight and trust it because it looks the same everywhere.
   Dressing it up in house colours would make it read as an ordinary form button and
   lose the one thing it has going for it. Used by the site-wide auth modal and by
   signup.html, so both routes in look identical. */
.cp-sso { width: 100%; display: flex; align-items: center; justify-content: center; gap: 9px;
  padding: 12px 16px; border-radius: 12px; border: 1px solid transparent; cursor: pointer;
  font-family: inherit; font-size: .96rem; font-weight: 600; line-height: 1.2;
  transition: opacity .18s ease, transform .18s ease, box-shadow .18s ease; }
.cp-sso svg { width: 18px; height: 18px; flex: none; margin-top: -2px; }   /* the mark sits optically low */
.cp-sso + .cp-sso { margin-top: 9px; }
.cp-sso-apple { background: #000; color: #fff; }
.cp-sso-apple:hover { box-shadow: 0 6px 18px rgba(0,0,0,.22); transform: translateY(-1px); }
/* Google's button is white with a hairline border and the mark in its own four
   colours — that is Google's published styling, and like Apple's the recognition
   is the point. Its mark keeps its colours, so no currentColor here. */
.cp-sso-google { background: #fff; color: #1f1f1f; border-color: #dadce0; }
.cp-sso-google:hover { box-shadow: 0 4px 14px rgba(60,64,67,.2); transform: translateY(-1px); }
.cp-sso:disabled { cursor: default; transform: none; box-shadow: none; }
/* "or" rule. A line either side of the word, drawn with the row itself so it stays
   centred whatever the card width. */
.cp-sso-or { display: flex; align-items: center; gap: 12px; margin: 14px 0; color: var(--grey); font-size: .8rem; }
.cp-sso-or::before, .cp-sso-or::after { content: ''; flex: 1; height: 1px; background: var(--line, #dce0e6); }

.cp-auth-form { text-align: left; display: grid; gap: 12px; }
.cp-auth-field { display: grid; gap: 5px; }
.cp-auth-field span { font-size: .82rem; font-weight: 600; color: var(--ink-soft, #555); }
.cp-auth-field input { width: 100%; padding: 11px 13px; border: 1px solid var(--line, #dce0e6); border-radius: 11px; font-family: inherit; font-size: .95rem; }
.cp-auth-field input:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,163,74,.15); }
.cp-auth-submit { width: 100%; justify-content: center; margin-top: 4px; }
/* The bot check inside the sign-in modal. :not(:empty) is what keeps the layout
   identical when there is no site key: the div is still in the markup, but with
   nothing rendered inside it there is no gap where a widget would have been. */
.cp-auth-form .au-captcha:not(:empty) { display: flex; justify-content: center; margin: 2px 0 0; }
.cp-auth.mode-signin .cp-auth-name { display: none; }
.cp-auth-fine { font-size: .76rem; color: var(--grey); margin: 14px 0 0; }
.cp-auth-err { background: #fdecea; color: #b3261e; border: 1px solid #f5c6c2; border-radius: 10px;
  padding: 9px 12px; font-size: .85rem; font-weight: 600; margin-bottom: 14px; text-align: left; }
/* GOOD NEWS IN THE SAME BOX. "Reset link sent" was being shown in the red error
   slot, so the one message that means it worked was the one thing on screen
   dressed as a failure. It goes in this slot on purpose -- it is the spot the eye
   is already on -- so the slot has to be able to say yes as well as no. */
.cp-auth-err.ok { background: var(--green-tint, #e8f8ee); color: var(--green-dark, #0f7d39); border-color: #b8e6c9; }
.cp-auth-field textarea { width: 100%; padding: 11px 13px; border: 1px solid var(--line, #dce0e6); border-radius: 11px;
  font-family: inherit; font-size: .95rem; resize: vertical; min-height: 92px; }
.cp-auth-field textarea:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(23,163,74,.15); }
.cp-enq-done { text-align: center; padding: 6px 0 2px; }
.cp-enq-tick { width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 50%;
  background: var(--green-tint, #e7f6ee); color: var(--green, #17a34a); display: grid; place-items: center; }
.cp-enq-tick svg { width: 26px; height: 26px; }
.cp-enq-done h3 { margin: 0 0 6px; font-size: 1.2rem; }
.cp-enq-done p { color: var(--grey); margin: 0 0 18px; }
body.cp-auth-open { overflow: hidden; }
/* iOS Safari ignores overflow:hidden on body: a swipe on the modal scrolled the page underneath it. Pin the
   body in place instead; cpLockPage() records the scroll position and cpUnlockPage() puts it back. */
body.cp-auth-open.cp-auth-pinned { position: fixed; left: 0; right: 0; width: 100%; }

@media (max-width: 880px) {
  /* Long-labelled buttons (eg the masterclass upsell) must wrap rather than
     overflow the viewport, which would stretch the fixed header off-screen. */
  .btn { white-space: normal; text-align: center; max-width: 100%; }
  .nav { grid-template-columns: auto 1fr; justify-content: normal; height: 64px; }
  .nav-logo { grid-column: 1; justify-self: start; }
  .nav-logo img { width: 64px; }
  .nav-toggle { display: flex; grid-column: 2; }
  .nav-menu {
    display: flex; flex-direction: column; align-items: stretch; gap: 0;
    /* fixed + full height so the page behind is fully covered: swipes land on the
       panel (which contains its own scroll), never on the page underneath. */
    position: fixed; top: 64px; left: 0; right: 0; bottom: 0;
    background: #0c0e12; padding: 6px var(--pad) calc(96px + env(safe-area-inset-bottom, 0px));   /* Log out clears Safari's bottom bar */
    border-bottom: 1px solid rgba(255,255,255,.08);
    overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain;
    /* Hidden = transform AND visibility: iOS Safari can misplace a fixed panel hidden only by a
       percentage translate after a back-swipe/bfcache restore (the menu's top row wedged under
       the header). visibility:hidden makes the closed panel unpaintable no matter what the
       transform resolves to; it flips after the slide on close, instantly on open. */
    transform: translateY(-130%); visibility: hidden; pointer-events: none;
    transition: transform .3s ease, visibility 0s linear .3s;
  }
  .nav.open .nav-menu { transform: translateY(0); visibility: visible; pointer-events: auto; transition: transform .3s ease; }
  /* Lock the page while the menu is open so scrolling can't bleed to the screen behind. */
  body.cp-nav-open { overflow: hidden; }
  /* The dropped menu lives INSIDE the fixed header's stacking context, so it can never rise above the
     header's own z-index (50) whatever it is given -- and page chrome that sits above 50 (a course page's
     sticky booking bar) painted over the open menu on the phone (Josh, 14 Sep 2026). Lift the header
     itself while the menu is open; the sign-in modal (2000) still wins. */
  body.cp-nav-open .site-header { z-index: 1000; }
  /* THE ACTUAL COLLAPSE (measured: open menu 31px tall with the header scrolled, 416px without). The
     scrolled header's backdrop-filter makes the header the containing block for its fixed descendants,
     so the menu's top:64px/bottom:0 resolve against the 64px header and the panel shrinks to a sliver
     with the page showing beneath it. No blur while the menu is open: the panel is opaque anyway. */
  body.cp-nav-open .site-header { -webkit-backdrop-filter: none; backdrop-filter: none; background: #0c0e12; }
  .nav-links { flex-direction: column; gap: 0; align-items: stretch; }
  .nav-links li { border-bottom: 1px solid rgba(255,255,255,.07); }
  .nav-links a { display: block; padding: 15px 0; }
  /* One column, one left edge (Josh, 19 Oct 2026: "the mobile menu is a mess"). The right-hand list kept its
     desktop 26px gap from the logo, so Journal, Membership, More and the account block sat indented, and the
     account block stopped short of the edge. */
  .nav-left, .nav-right { padding-left: 0; padding-right: 0; }
  .nav-acct-li, .nav-acct-li .nav-acct { display: block; width: 100%; }
  .nav-acct-menu a { border-bottom: 1px solid rgba(255,255,255,.07); }
  .nav.open .nav-toggle span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
  .nav.open .nav-toggle span:nth-child(2) { opacity: 0; }
  .nav.open .nav-toggle span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
  .nav-search-btn { width: 100%; justify-content: flex-start; padding: 15px 0; margin-left: 0; border-radius: 0; }
  .nav-search-btn:hover { background: none; }
  /* signed-in account: show the menu inline in the dropdown (no popover toggle) */
  .nav-acct { display: block; }
  .nav-avatar { display: none; }
  .nav-acct-menu { position: static; opacity: 1; visibility: visible; transform: none; min-width: 0; background: none; box-shadow: none; border: 0; border-radius: 0; padding: 0; }
  .nav-acct-head { display: flex; padding: 14px 0 12px; border-bottom-color: rgba(255,255,255,.1); }
  .nav-acct-id b { color: #fff; }
  .nav-acct-id span { color: #aeb8c2; }
  .nav-acct-menu a, .nav-acct-logout { color: #f0f0f0; padding: 14px 0; border-radius: 0; }
  .nav-acct-menu a:hover, .nav-acct-logout:hover { background: none; }
  .nav-acct-logout { color: #ff8a80; border-top: 1px solid rgba(255,255,255,.1); margin-top: 0; }
  .nav-search-label { display: inline; }
  /* pillar items on mobile: no spin; dropdown becomes an indented sublist so
     every destination (incl. Contact, Blog, member pages) stays reachable */
  /* label + chevron on one row; the sublist wraps to a full-width row below it */
  .nav-has-mega { display: flex; flex-wrap: wrap; align-items: center; position: static; align-self: auto; }
  .nav-has-mega > .nav-flip-link { flex: 1 1 auto; }
  .nav-flip { display: inline; perspective: none; }
  .flip-inner { transform: none !important; }
  .flip-front { opacity: 1 !important; }   /* a tap leaves :hover/:focus-within behind; the label stays */
  .flip-back { display: none; }
  /* the accordion chevron (mobile only) */
  .mega-toggle {
    display: flex; align-items: center; justify-content: center;
    flex: none; width: 48px; align-self: stretch; margin: 0; padding: 0;
    background: none; border: 0; color: #8891a0; cursor: pointer;
  }
  .mega-toggle svg { transition: transform .25s ease; }
  .nav-has-mega.mega-open > .mega-toggle { color: #fff; }
  .nav-has-mega.mega-open > .mega-toggle svg { transform: rotate(180deg); }
  /* sublist collapsed by default; revealed only when its row is expanded */
  .mega {
    flex-basis: 100%; display: none;
    position: static; left: auto; right: auto; opacity: 1; visibility: visible;
    pointer-events: auto; transform: none; min-width: 0; max-width: none; padding: 0 0 6px; z-index: auto;
  }
  .nav-has-mega.mega-open > .mega { display: block; }
  .mega-list {
    background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .mega-list li { border-bottom: 0; }
  .mega-list li + li { margin-top: 0; }
  .nav-links .mega-list a {
    color: #b9bec8; font-weight: 500; font-size: .86rem;
    padding: 10px 0 10px 16px; border-radius: 0; white-space: normal;
  }
  .nav-links .mega-list a:hover { background: none; color: #fff; transform: none; }
  /* wide Journal mega collapses to the same dark, stacked sublist on mobile */
  .mega-wide { min-width: 0; }
  .mega-wide .mega-panel {
    background: none; border: 0; box-shadow: none; border-radius: 0; padding: 0;
    -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .mega-wide .mega-cols { display: block; gap: 0; }
  .mega-wide .mega-col-title { padding: 12px 0 2px 16px; color: #8089a0; }
  .nav-links .mega-foot { margin: 0; padding: 12px 0 10px 16px; border-top: 0; color: #b9bec8; }
  .nav-links .mega-foot:hover { color: #fff; }
}

/* ============================================================
   HERO
   ============================================================ */
.hero {
  position: relative; min-height: 92vh;
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  color: #fff; text-align: center; background: var(--charcoal); overflow: hidden;
}
.hero-bg { position: absolute; inset: 0; }
.hero-bg img { width: 100%; height: 100%; object-fit: cover; }
.hero-bg::after {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(120% 80% at 50% 0%, rgba(109,139,255,.18), transparent 55%),
    linear-gradient(180deg, rgba(10,13,18,.35) 0%, rgba(10,13,18,.30) 35%, rgba(10,13,18,.82) 100%);
}
.hero-inner { position: relative; z-index: 2; max-width: 920px; margin: 0 auto; padding: 120px var(--pad); }
.hero h1 { color: #fff; }
.hero p { color: rgba(255,255,255,.92); font-size: clamp(1.1rem,2vw,1.4rem); margin-top: 20px; }
.hero .btn-row { margin-top: 38px; justify-content: center; }
.hero-sub {
  position: absolute; bottom: 28px; left: 0; z-index: 2; width: 100%; text-align: center;
  font-size: .82rem; letter-spacing: .14em; text-transform: uppercase; color: rgba(255,255,255,.78);
}
.hero-sub .gold { color: var(--yellow); letter-spacing: 2px; }
.hero-rating { margin-top:24px; font-size:.82rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:rgba(255,255,255,.82); }
.hero-rating .gold { color: var(--yellow); letter-spacing:2px; margin-right:8px; }
.hero .btn-row { margin-top: 22px; }

/* page hero (inner pages) — controlled height so the next section peeks (Apple-style),
   capped on large screens so the photo never feels oversized */
.page-hero { min-height: clamp(520px, 78vh, 720px); }
.page-hero .hero-inner { padding-block: 96px; }

/* ============================================================
   GRID / PILLAR CARDS
   ============================================================ */
.grid { display: grid; gap: 28px; }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
@media (max-width: 940px) { .grid-3 { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; } }
@media (max-width: 780px) { .grid-2 { grid-template-columns: 1fr; } }

.card {
  position: relative; background: #fff; border: 1px solid var(--line);
  border-radius: var(--radius); padding: 36px 32px; box-shadow: var(--shadow);
  transition: transform .22s ease, box-shadow .28s ease, border-color .22s ease;
  display: flex; flex-direction: column; overflow: hidden;
}
.card::before { /* gradient top accent bar */
  content: ""; position: absolute; top: 0; left: 0; right: 0; height: 5px;
  background: var(--grad-brand); opacity: .9;
}
.card.learn::before   { background: var(--grad-learn); }
.card.build::before   { background: var(--grad-build); }
.card.explore::before { background: var(--grad-explore); }
.card:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }

.card-icon {
  width: 76px; height: 76px; border-radius: 20px;
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px; box-shadow: 0 12px 26px rgba(20,30,40,.16);
}
.card-icon img { width: 42px; height: 42px; object-fit: contain; filter: brightness(0) invert(1); }
.card.learn   .card-icon { background: var(--grad-learn); }
.card.build   .card-icon { background: var(--grad-build); }
.card.explore .card-icon { background: var(--grad-explore); }

.card h3 { margin-bottom: 12px; font-size: 1.5rem; }
.card p { margin-bottom: 20px; }
.card ul { list-style: none; margin: 0 0 26px; display: grid; gap: 11px; }
.card li { position: relative; padding-left: 28px; color: var(--ink-soft); font-size: .98rem; }
.card li::before { content: "✓"; position: absolute; left: 0; top: 0; font-weight: 700; }
.card.learn   li::before { color: #14b8a6; }
.card.build   li::before { color: #ec4899; }
.card.explore li::before { color: #3a7bd5; }
.card .btn { margin-top: auto; align-self: flex-start; }

/* Clickable cards that route to a landing page */
.card-link { text-decoration: none; color: inherit; cursor: pointer; }
.card-link h3 { color: var(--ink); }
.card-cta { margin-top: auto; font-weight: 700; font-size: .98rem; }
.card-link.learn   .card-cta { color: #14b8a6; }
.card-link.build   .card-cta { color: #ec4899; }
.card-link.explore .card-cta { color: #3a7bd5; }
.card-link:not(.learn):not(.build):not(.explore) .card-cta { color: var(--accent, #6d5efc); }

/* ============================================================
   SPLIT (image + text)
   ============================================================ */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(32px, 5vw, 72px); align-items: center; }
.split.reverse .split-media { order: 2; }
.split-media { position: relative; }
.split-media img { border-radius: var(--radius); box-shadow: var(--shadow-lg); width: 100%; }
.split-media.glow-card::after {
  content: ""; position: absolute; inset: -8% -8% auto auto; width: 55%; aspect-ratio: 1; z-index: -1;
  background: var(--grad-brand); filter: blur(60px); opacity: .35; border-radius: 50%;
}
.split-body h2 { margin-bottom: 18px; }
.split-body p + p { margin-top: 16px; }
.split-body .btn { margin-top: 28px; }
@media (max-width: 880px) {
  .split { grid-template-columns: 1fr; }
  .split.reverse .split-media { order: 0; }
}

/* value props */
.values { display: grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 40px; }
.value h4 { margin-bottom: 6px; font-size: 1.15rem; }
.value p { font-size: .96rem; }
@media (max-width: 780px) { .values { grid-template-columns: 1fr; } }

/* ============================================================
   PRODUCTS
   ============================================================ */
.product { position: relative; background:#fff; border:1px solid var(--line); border-radius: var(--radius); overflow:hidden; box-shadow: var(--shadow); transition: transform .22s ease, box-shadow .28s ease; display:flex; flex-direction:column; }
.product:hover { transform: translateY(-8px); box-shadow: var(--shadow-lg); }
.product-img { aspect-ratio: 4/3; overflow:hidden; background: var(--bg-soft); }
.product-img img { width:100%; height:100%; object-fit: cover; transition: transform .4s ease; }
.product:hover .product-img img { transform: scale(1.05); }
.product-body { padding: 26px; display:flex; flex-direction:column; flex:1; }
.product-body h3 { font-size: 1.3rem; margin-bottom: 8px; }
.product-body p { font-size: .95rem; margin-bottom: 18px; }
.product-body p.bonus { font-weight:700; color:var(--ink); margin-bottom:14px; font-size:.9rem; }
.price { font-weight: 700; font-size: 1.5rem; margin-bottom: 18px; }
.price small { color: var(--grey); font-weight: 600; font-size: .85rem; }
.product .btn { margin-top: auto; }

/* ============================================================
   SOCIAL PROOF / STATS
   ============================================================ */
.proof { text-align:center; }
.stars { color: var(--yellow); font-size: 1.5rem; letter-spacing: 3px; }
.stats { display:flex; justify-content:center; flex-wrap:wrap; gap: clamp(30px,6vw,84px); margin-top: 38px; }
.stat .num { font-size: clamp(2.2rem,4vw,3.2rem); font-weight:700; }
.stat .label { color: var(--grey); font-weight:600; font-size:.95rem; }

/* testimonials */
.quotes { display:grid; grid-template-columns: repeat(3,1fr); gap: 24px; margin-top: 44px; }
@media (max-width: 940px){ .quotes{ grid-template-columns:1fr; max-width:560px; margin-inline:auto; } }
.quotes.duo { grid-template-columns:repeat(2,1fr); max-width:880px; margin-inline:auto; }
@media (max-width: 720px){ .quotes.duo { grid-template-columns:1fr; max-width:560px; } }
.quote { background:#fff; border:1px solid var(--line); border-radius: var(--radius); padding: 30px; box-shadow: var(--shadow); }
.quote .stars { font-size: 1.05rem; }
.quote p { margin: 14px 0 20px; color: var(--ink); font-style: italic; }
.quote .who { display:flex; align-items:center; gap:12px; }
.quote .who span { width:44px;height:44px;border-radius:50%;background:var(--grad-brand);display:flex;align-items:center;justify-content:center;font-weight:700;color:#fff; }
.quote .who b { font-size:.96rem; }
.quote .who small { color: var(--grey); display:block; font-weight:600; }

/* ============================================================
   CTA BANNER
   ============================================================ */
.cta-banner { position: relative; overflow: hidden; background: var(--grad-brand); color:#fff; text-align:center; border-radius: 24px; padding: clamp(48px,7vw,80px) var(--pad); }
.cta-banner::after { content:""; position:absolute; inset:0; background: radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.18), transparent 50%); pointer-events:none; }
.cta-banner > * { position: relative; z-index: 1; }
.cta-banner h2 { color:#fff; }
.cta-banner p { color: rgba(255,255,255,.94); max-width: 54ch; margin: 16px auto 0; }
.cta-banner .btn-row { margin-top: 32px; justify-content:center; }

/* ============================================================
   FORMS
   ============================================================ */
.form { display:grid; gap:18px; max-width: 620px; }
.field label { display:block; font-weight:700; margin-bottom:6px; font-size:.95rem; }
.field input, .field textarea { width:100%; padding:14px 16px; border:1px solid var(--line); border-radius: var(--radius-sm); font-family:inherit; font-size:1rem; background:#fff; color:var(--ink); }
.field input:focus, .field textarea:focus { outline:none; border-color: var(--green); box-shadow:0 0 0 3px rgba(23,163,74,.15); }
.field textarea { resize: vertical; min-height: 140px; }
.form-row { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
@media (max-width:600px){ .form-row{ grid-template-columns:1fr; } }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer { background:#212121; color:#aeb8c2; }
/* embed mode (?embed=1): shown inside the app's overlay iframe — hide the site chrome so only the article shows */
body.cp-embed .site-header, body.cp-embed .site-footer, body.cp-embed #site-header, body.cp-embed #site-footer { display:none !important; }
/* In the app the presets are not sold through in-app purchase, so an embedded page (a Journal article) hides its link to the presets page (App Store 3.1.1). The website is untouched.
   The same for every page that sells something to download or watch: the eBook and Media Kit page, the business courses, Chaser Pro on
   the website, and Learn, which carries a Digital Products section (the masterclass pages' "All lessons" led there). Workshops stay. */
body.cp-embed a[href^="presets.html"], body.cp-embed a[href^="digital-products.html"], body.cp-embed a[href^="focus-stacking-ebook.html"],
body.cp-embed a[href^="build.html"], body.cp-embed a[href^="masterclass.html"], body.cp-embed a[href^="wedding-course.html"],
body.cp-embed a[href^="travel-course.html"], body.cp-embed a[href^="print-sales-course.html"], body.cp-embed a[href^="property-corporate-course.html"],
body.cp-embed a[href^="online-presence-course.html"], body.cp-embed a[href^="membership.html"], body.cp-embed a[href^="learn.html"] { display:none !important; }
/* The same rule for words: a sentence that points at something the website sells (marked cp-web-only) is left out when the page is shown inside the app. The website shows it as before. */
body.cp-embed .cp-web-only { display:none !important; }
/* The app's floating tab bar is deliberately lifted ABOVE these full-screen overlays (app.css:
   body.hb-open .nav-bar) so its buttons stay tappable, which leaves it parked over the last ~116px
   of every embedded page: 66px tall, sitting 16px clear of the bottom, plus the home-indicator
   inset. Josh hit it on the terms page, where the contact line was under the bar. env() reads 0
   inside an iframe because the inset belongs to the host document, so the number carries it. */
body.cp-embed { padding-top:0 !important; padding-bottom:calc(env(safe-area-inset-bottom, 0px) + 132px) !important; }
.site-footer-min { padding-block: 56px; }
.footer-min { display:flex; flex-direction:column; align-items:center; text-align:center; gap:22px; }
.footer-logo img { height:46px; }
.footer-nav { display:flex; flex-wrap:wrap; justify-content:center; gap:30px; }
.footer-nav a { color:#e4e4e5; font-weight:700; font-size:.95rem; }
.footer-nav a:hover { color:#fff; }
.footer-social { display:flex; flex-wrap:wrap; justify-content:center; gap:24px; }
.footer-social a { color:#9a9a9b; font-size:.9rem; }
.footer-social a:hover { color:#fff; }
.footer-copy { font-size:.82rem; color:#7d7d7e; margin-top:4px; }

/* reveal on scroll */
.reveal { opacity:0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1); }
.reveal.in { opacity:1; transform:none; }

/* gentle staggered cascade for grouped reveals */
.golden .gp:nth-child(2){ transition-delay:.1s; }
.golden .gp:nth-child(3){ transition-delay:.2s; }
.quotes .quote:nth-child(3n+2){ transition-delay:.08s; }
.quotes .quote:nth-child(3n+3){ transition-delay:.16s; }

/* clean, conflict-free hover lifts (shadow + image only, so reveal transform is untouched) */
.gp { transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
.gp:hover { box-shadow: 0 26px 60px rgba(0,0,0,.16); }
.quote { transition: opacity .7s cubic-bezier(.22,.61,.36,1), transform .7s cubic-bezier(.22,.61,.36,1), box-shadow .3s ease; }
.quote:hover { box-shadow: 0 20px 46px rgba(0,0,0,.12); }
.cv img { transition: transform .35s ease, box-shadow .35s ease; }
.cv:hover img { transform: translateY(-5px) scale(1.02); box-shadow: 0 22px 46px rgba(0,0,0,.26); }

/* visually hidden (SEO headings behind graphics) */
.vh { position:absolute!important; width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0; }

/* ============================================================
   LANDING PAGES (courses / workshops / products)
   ============================================================ */

/* cohort / dates banner strip */
.cohort { background: var(--charcoal); color:#e8edf2; }
/* auto 1fr let the points column take every remaining pixel, so a band with two
   short lines sat hard left against a wide empty gutter. Capping the second
   column and centring the pair keeps the divider near the middle whatever the
   content length. This is the shape .cohort-grid described but no page used. */
/* auto 1fr let the points column take every remaining pixel, so a band with two
   short lines sat hard left against a wide empty gutter. Capping it at a fixed
   520px was not enough either: justify-content centres the TRACKS, and a track
   wider than the text inside it leaves the visible content off centre by the
   difference. Both tracks size to their own content, so what you see is what
   gets centred; the cap moves to the points themselves for long copy. */
.cohort .container { display:grid; grid-template-columns: auto auto; gap: clamp(24px,5vw,56px); align-items:center; justify-content:center; }
.cohort-date { text-align:center; padding-right: clamp(24px,4vw,48px); border-right:1px solid rgba(255,255,255,.12); }
.cohort-date .eyebrow { color: #7CE2A4; margin-inline: auto; }
#overview .prose p { color:#e3e9f0; }
.cohort-date .big { font-size: clamp(1.5rem,3vw,2.1rem); font-weight:700; color:#fff; line-height:1.1; }
/* "Dates announced soon" is a sentence, not a date. Rendering it at .big size
   turns the column into a wall of text that collides with the button under it,
   so the placeholder gets its own modest size and a real gap below. */
.cohort-date .soon { font-size:clamp(1.02rem,1.7vw,1.22rem); font-weight:700; color:#fff;
  line-height:1.35; max-width:14ch; margin:4px auto 0; }
.cohort-date .cohort-wl { margin-top:18px; }
.cohort-grid { display:grid; grid-template-columns:auto minmax(0,500px); gap:clamp(24px,5vw,56px); align-items:center; justify-content:center; max-width:940px; margin:0 auto; }
.cohort-points { display:grid; gap:14px; max-width:520px; }
.cohort-points .pt { display:flex; gap:12px; align-items:flex-start; color:#aeb8c2; font-size:.98rem; }
/* The same class runs in a second city, which is a real second chance to sell and
   was styled as a footnote: an underlined link inside a tick bullet, reading as
   fine print. Given its own box it reads as the alternative it is. */
.cohort-alt { display:inline-flex; justify-self:start; align-items:center; gap:10px; margin-top:4px; padding:11px 16px;
  border:1px solid rgba(255,255,255,.22); border-radius:999px; background:rgba(255,255,255,.04);
  color:#fff; text-decoration:none; font-size:.95rem; font-weight:600; transition:background .18s, border-color .18s; }
.cohort-alt:hover { background:rgba(255,255,255,.10); border-color:rgba(255,255,255,.42); }
.cohort-alt .city { color:#7CE2A4; }
.cohort-alt .when { color:#aeb8c2; font-weight:500; }
/* the city and the date are separate spans, so they need a separator of their own */
/* :not(:empty) because the date is filled in by altRun() from the sibling's real
   departures. Before that runs, and on a page whose sibling has no upcoming run,
   .when is empty and a bare separator would hang there on its own. */
.cohort-alt .when:not(:empty)::before { content:'\00B7'; margin:0 8px 0 0; color:rgba(255,255,255,.45); }
.cohort-points .pt::before { content:"✓"; color:#7CE2A4; font-weight:700; flex:0 0 auto; }
.cohort-points .spots-left { justify-self:start; margin-top:6px; padding:7px 15px; border-radius:999px; background:rgba(229,57,127,.16); color:#ff7da9; font-size:.78rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
/* Multi-departure list (a workshop that runs on several dates/years) */
.dep-list { display:flex; flex-direction:column; gap:10px; margin:6px 0 4px; text-align:left; width:min(400px,100%); }
.dep-row { display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; padding:11px 14px; border:1px solid rgba(255,255,255,.14); border-radius:12px; background:rgba(255,255,255,.05); }
.dep-row.sold { opacity:.6; }
.dep-row .dep-date { font-weight:700; color:#fff; font-size:1rem; }
.dep-row .dep-note { font-size:.76rem; color:#aeb8c2; }
.dep-row .dep-spots { margin-left:auto; font-size:.75rem; font-weight:800; letter-spacing:.02em; color:#08130d; background:#7CE2A4; padding:4px 11px; border-radius:999px; white-space:nowrap; }
.dep-row .dep-spots.sold { background:transparent; color:#ff7da9; border:1px solid rgba(255,125,169,.5); }
@media (max-width:760px){
  .cohort .container { grid-template-columns:1fr; gap:24px; }
  .cohort-grid { grid-template-columns:1fr; gap:24px; }
  .cohort-date { border-right:0; border-bottom:1px solid rgba(255,255,255,.12); padding:0 0 20px; }
  /* On phones, lift the scarcity pill above the checklist and centre it. */
  .cohort-points .spots-left { order:-1; justify-self:center; margin:0 0 4px; }
}

/* "you'll learn" / for-you checklists (two col) */
.checks2 { display:grid; grid-template-columns:1fr 1fr; gap:14px 30px; margin-top:26px; }
.checks2 li { list-style:none; position:relative; padding-left:30px; color:var(--ink-soft); }
.checks2 li::before { content:"✓"; position:absolute; left:0; top:0; font-weight:700; color:var(--green); }
.checks2.build li::before { color:#ec4899; }
.checks2.explore li::before { color:#3a7bd5; }
@media (max-width:680px){ .checks2 { grid-template-columns:1fr; } }

/* feature trio (themed h3 + copy, no card) */
.trio { display:grid; grid-template-columns:repeat(3,1fr); gap:30px; margin-top:46px; }
.trio .t h3 { margin-bottom:10px; }
@media (max-width:840px){ .trio { grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }

/* Focus Frameworks grid */
.frameworks { display:grid; grid-template-columns:repeat(2,1fr); gap:20px; margin-top:42px; }
.fw { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:28px; box-shadow:var(--shadow); position:relative; overflow:hidden; }
.fw::before { content:""; position:absolute; inset:0 auto 0 0; width:5px; background:var(--grad-build); }
.fw h4 { font-size:1.15rem; margin-bottom:8px; }
.fw p { font-size:.95rem; }
@media (max-width:760px){ .frameworks { grid-template-columns:1fr; } }

/* vault callout */
.vault { background: linear-gradient(135deg,#12161c,#241433); color:#fff; border-radius:24px; padding:clamp(40px,6vw,64px); text-align:center; position:relative; overflow:hidden; }
.vault::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 100% at 50% 0%, rgba(176,106,208,.30), transparent 60%); pointer-events:none; }
.vault > * { position:relative; z-index:1; }
.vault .stack { font-size:clamp(2.2rem,6vw,3.6rem); font-weight:700; line-height:.98; letter-spacing:-.02em; }
.vault .stack span { display:block; }

/* Lifetime Resource Vault: near-black stage, safe on the left, gradient
   wordmark on the right. A MODIFIER, not a change to .vault, because
   masterclass.html reuses .vault for the Creative Growth Compass, which has no
   image: turning the base class into a two-column grid would have left that
   section with an empty column and its copy squeezed into half the width. */
/* Full-bleed band. The DARK runs edge to edge while the content inside stays
   centred and capped, so on a wide monitor the safe and the wordmark stay a
   readable pair instead of drifting to opposite ends of the screen. */
/* The global `section` rule adds 60-120px of padding-block, which sat UNDER the
   band and left a strip of background below the image no matter what padding
   .vault.split used. The band supplies its own spacing via .vault.split, so it
   opts out entirely and its bottom edge can meet the image's crop line. */
.vault-band { background:#06080b; position:relative; overflow:hidden; padding-block:0; }
.vault-band::after { content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(46% 90% at 30% 50%, rgba(120,150,190,.17), transparent 64%); }

.vault.split { position:relative; z-index:1; text-align:left;
  background:none; border-radius:0; overflow:visible;
  max-width:1320px; margin-inline:auto;
  padding:clamp(34px,5.5vw,80px) clamp(20px,5vw,48px) 0;
  display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);
  gap:clamp(18px,4vw,52px);
  /* Bottom-aligned, with no padding under the media column, so the hard cut at
     the base of the cut-out lands exactly on the band's own bottom edge. Left
     floating inside the band that cut reads as a mistake in the artwork; sitting
     on the edge it reads as the edge. */
  align-items:end; }
/* The copy still needs breathing room, so it keeps the padding the band gave up. */
.vault.split .vault-body { padding-bottom:clamp(34px,5.5vw,80px); align-self:center; }
/* The band owns the glow now, so the panel must not paint a second one. */
.vault.split::after { content:none; }
/* A real alpha cut-out now, safe and reflection on transparency, so no blend
   trick is needed and no faint box survives where the old render's black was
   not quite black. Portrait, so it is capped rather than filling the column. */
.vault.split .vault-media img { display:block; width:100%; height:auto;
  max-width:300px; margin-inline:auto; }
.vault.split .stack { font-size:clamp(2rem,5vw,4.1rem); font-weight:800; line-height:1.03;
                      letter-spacing:-.005em; text-transform:uppercase; }
.vault.split p { max-width:34ch; margin:18px 0 0; color:#c7cfda; font-size:.98rem; line-height:1.55; }
@media (max-width:820px){
  .vault.split { grid-template-columns:1fr; text-align:center; gap:20px; }
  .vault.split p { margin-inline:auto; }
}

/* investment / pricing cards */
.pricing { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:44px; align-items:stretch; }
@media (max-width:900px){ .pricing { grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }
.tier { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px 28px; box-shadow:var(--shadow); display:flex; flex-direction:column; position:relative; }
.tier.featured { border-color:transparent; box-shadow:var(--shadow-lg); }
.tier.featured::before { content:""; position:absolute; inset:0; border-radius:var(--radius); padding:2px; background:var(--grad-build); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.tier .badge { position:absolute; top:-13px; left:50%; transform:translateX(-50%); background:var(--grad-build); color:#fff; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; padding:6px 16px; border-radius:999px; white-space:nowrap; }
.tier h3 { font-size:1.2rem; margin-bottom:6px; }
.tier .amt { font-size:2.4rem; font-weight:700; margin:8px 0 2px; }
.tier .amt small { font-size:.9rem; color:var(--grey); font-weight:600; }
.tier .note { font-size:.88rem; color:var(--grey); margin-bottom:18px; }
.tier ul { list-style:none; display:grid; gap:10px; margin:6px 0 24px; }
.tier li { position:relative; padding-left:26px; font-size:.95rem; color:var(--ink-soft); }
.tier li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700; }
.tier .btn { margin-top:auto; }

/* guarantee badge band */
.guarantee { display:grid; grid-template-columns:auto 1fr; gap:30px; align-items:center; background:var(--green-tint); border-radius:24px; padding:clamp(30px,4vw,48px); }
.guarantee .seal { width:120px;height:120px;border-radius:50%; background:var(--grad-learn); color:#fff; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; font-weight:700; line-height:1.05; box-shadow:0 16px 34px rgba(20,184,166,.32); }
.guarantee .seal b { font-size:1.9rem; }
.guarantee .seal small { font-size:.66rem; letter-spacing:.08em; text-transform:uppercase; }
@media (max-width:600px){ .guarantee { grid-template-columns:1fr; text-align:center; justify-items:center; } }
.guarantee .seal-img { width:130px; height:130px; flex:0 0 auto; object-fit:contain; filter:drop-shadow(0 12px 26px rgba(0,0,0,.16)); }

/* framework cards with book-cover imagery */
.fw-covers { display:grid; grid-template-columns:repeat(2,1fr); gap:24px; margin-top:42px; }
@media (max-width:760px){ .fw-covers { grid-template-columns:1fr; } }
.fwc { display:grid; grid-template-columns:120px 1fr; gap:22px; align-items:center; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:24px; box-shadow:var(--shadow); }
.fwc img { width:120px; aspect-ratio:3/4; object-fit:cover; border-radius:10px; box-shadow:0 12px 26px rgba(0,0,0,.18); }
.fwc h4 { font-size:1.1rem; margin-bottom:6px; }
.fwc p { font-size:.93rem; }
@media (max-width:480px){ .fwc { grid-template-columns:90px 1fr; gap:16px; padding:18px; } .fwc img { width:90px; } }

/* ---------- course page: intro pull-quote, text-only expect block, enrol box, upsell ---------- */
.pull-quote { margin-top:22px; padding-left:20px; border-left:4px solid #ec4899; font-style:italic; font-size:1.12rem; line-height:1.5; color:var(--ink); }
.intro-block { text-align:center; }
.intro-lead { margin:14px auto 0; }
.intro-media { max-width:840px; margin:34px auto 0; }
.intro-media img { width:100%; border-radius:18px; box-shadow:var(--shadow-lg); display:block; }
.intro-quote { max-width:40ch; margin:30px auto 0; font-weight:700; font-size:clamp(1.3rem,2.2vw,1.7rem); line-height:1.32; color:var(--ink); }
.prose { max-width:74ch; margin:0 auto; display:grid; gap:18px; }
.prose p { font-size:1.05rem; line-height:1.7; }
.learn-list { max-width:74ch; margin:34px auto 0; }
.learn-list h3 { font-size:1.15rem; margin-bottom:6px; }

.foryou { display:grid; grid-template-columns:1fr 1fr; gap:34px; max-width:900px; margin:30px auto 0; }
.foryou .col h3 { font-size:1.15rem; margin-bottom:4px; }
.foryou .col .checks2 { grid-template-columns:1fr; margin-top:14px; }
@media (max-width:680px){ .foryou { grid-template-columns:1fr; gap:24px; } }

.enrol-box { max-width:680px; margin:42px auto 0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); box-shadow:var(--shadow-lg); padding:clamp(28px,4vw,44px); position:relative; }
.enrol-box::before { content:""; position:absolute; inset:0; border-radius:var(--radius); padding:2px; background:var(--grad-build); -webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0); -webkit-mask-composite:xor; mask-composite:exclude; pointer-events:none; }
.enrol-flag { display:inline-block; background:var(--grad-build); color:#fff; font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 14px; border-radius:999px; }
.enrol-date { margin-top:16px; font-weight:700; color:var(--ink); }
/* Subtle "an earlier run already sold out" scarcity line under the next-date, on the white booking card. */
.enrol-scarcity { margin-top:6px; font-size:.72rem; font-weight:700; letter-spacing:.04em; text-transform:uppercase; color:#9aa3af; }
.enrol-scarcity::before { content:""; display:inline-block; width:5px; height:5px; border-radius:50%; background:#e5397f; vertical-align:middle; margin:-2px 6px 0 0; }
.enrol-head h3 { font-size:1.6rem; margin:6px 0 10px; }
.enrol-head p { font-size:.98rem; line-height:1.6; }
.enrol-price { margin:24px 0 4px; padding-top:22px; border-top:1px solid var(--line); }
.enrol-price .amt { font-size:2.8rem; font-weight:700; line-height:1; }
.enrol-price .amt small { font-size:1rem; color:var(--grey); font-weight:600; }
.enrol-price .note { color:var(--grey); font-size:.92rem; margin-top:4px; }
.enrol-incl { margin-top:22px; }
.enrol-incl li em { font-style:normal; color:var(--grey); font-size:.86rem; }
.enrol-cta { width:100%; justify-content:center; margin-top:28px; }
.enrol-foot { margin-top:18px; display:grid; gap:6px; text-align:center; color:var(--grey); font-size:.86rem; }
.enrol-box.explore::before { background: var(--grad-explore); }
.enrol-box.explore .enrol-flag { background: var(--grad-explore); }

/* Availability scarcity colours (auto-applied by site.js). Solid fills + white text so they
   read clearly on both the dark dates band (.spots-left) and the white booking card (.enrol-flag). */
.spots-left.scarce-ok,  .enrol-flag.scarce-ok  { background:linear-gradient(135deg,#17a34a,#0e7a64) !important; color:#fff !important; }
.spots-left.scarce-low, .enrol-flag.scarce-low { background:linear-gradient(135deg,#f59e0b,#ea7a17) !important; color:#fff !important; }
.spots-left.scarce-out, .enrol-flag.scarce-out { background:linear-gradient(135deg,#ef4444,#d61f5b) !important; color:#fff !important; }

/* Auto "Event ended" state (set by CP_ENDED once a workshop's date passes). Muted grey so it
   reads as past, not urgent, on both the dark dates band and the white booking card. */
.ended-badge { display:inline-block; margin-top:10px; background:rgba(255,255,255,.1); color:#cfd6de; border:1px solid rgba(255,255,255,.2); font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; padding:6px 14px; border-radius:999px; }
.spots-left.ended { background:rgba(255,255,255,.08) !important; color:#cfd6de !important; }
.enrol-flag.ended { background:#6b7280 !important; color:#fff !important; }
.enrol-flag.prerelease { background:linear-gradient(135deg,#2f74d0,#1f5fa8) !important; color:#fff !important; }
.eyebrow.ended { color:#9aa3ad !important; }
#invest .enrol-head { text-align:center; }
#invest .enrol-head p { max-width:48ch; margin-inline:auto; }
#invest .enrol-price { text-align:center; }
#invest .enrol-incl { max-width:520px; margin-inline:auto; }

/* quick-facts chips (used under the dates band) */
.facts { display:flex; flex-wrap:wrap; justify-content:center; gap:10px 12px; margin-top:24px; }
.facts .fact { background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.15); color:#cdd5dd; border-radius:999px; padding:8px 16px; font-size:.9rem; }
.facts .fact strong { color:#fff; font-weight:700; }

/* day-by-day itinerary */
.itinerary { max-width:980px; margin:34px auto 0; display:grid; grid-template-columns:1fr 1fr; gap:14px; }
@media (max-width:760px){ .itinerary { grid-template-columns:1fr; } }
.itin-day { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); overflow:hidden; }
.itin-photo { height:158px; background-size:cover; background-position:center; background-color:#eef1f4; }
.itin-main { display:grid; grid-template-columns:auto 1fr; gap:20px; padding:22px 26px; }
.itin-num { text-align:center; min-width:64px; }
.itin-num .n { font-size:1.6rem; font-weight:800; line-height:1; background:var(--grad-explore); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:transparent; }
.itin-num .lbl { display:block; font-size:.7rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--grey); margin-top:4px; }
.itin-body h4 { font-size:1.08rem; margin:0 0 6px; }
.itin-body p { font-size:.96rem; line-height:1.55; margin:0; }
.itin-body .stay { display:inline-block; margin-top:10px; font-size:.82rem; font-weight:600; color:var(--grey); }
/* The build wraps JPEGs in <picture> so browsers can take a WebP. display:contents
   removes that wrapper from layout entirely, so an <img> that was a flex or grid
   child stays one and no card shifts. Without it every wrapped image gains an
   inline, zero-size parent and the layouts move. */
picture { display: contents; }
/* ...but display:contents unboxes EVERY child, and <source> is not one of the
   elements the HTML spec gives display:none. It therefore defaults to inline, and
   a grid or flex parent blockifies it into a REAL item that occupies the first
   cell. On the business course pages that pushed the cover into column 2 and the
   text down into the 120px column, so every title wrapped after two words.
   <source> carries no content and must never take a slot. */
picture > source { display: none; }

.itin-body .stay::before { content:"🛏 "; }

/* Square day cards, with EVERY image the same height.
   The photo takes a fixed 52% of the square rather than "whatever the text leaves",
   because the text block varies a lot — titles wrap to one or two lines and bodies
   to three to five — and letting the photo absorb that produced six different image
   heights on the Iceland page alone (289-360px). A fixed share means one height for
   every card, and .itin-main flex-grows to take the rest so short copy just sits in
   a slightly taller white block instead of resizing its neighbour's photo.

   align-self:start is load-bearing: a grid item stretches by default, and a
   stretched item ignores aspect-ratio entirely.

   Why 52%: the tallest natural text block measured anywhere is 192px (Iceland), and
   48% of a 483px card is 232px, so there is ~40px spare, about 1.7 extra lines of
   body copy. flex-shrink stays enabled so a freak overlong day shrinks its own photo
   rather than clipping Josh's words — that breaks uniformity for that one card, which
   is the lesser evil, and the margin above makes it unlikely.

   Only from 1000px, where the grid has reached its 980px max and cards are ~450-483px.
   Narrower than that the card shrinks but the copy does not, so a square would starve
   the text. Below this the original fixed-height photo already gives uniform images,
   and the card is close to square anyway (at 375px it is 335 wide by ~350 tall). */
@media (min-width:1000px){
  .itin-day.has-photo { align-self:start; aspect-ratio:1/1; }
  .itin-day.has-photo .itin-photo { height:auto; flex:0 1 52%; min-height:0; }
  /* Centre the text in whatever space is left. Because the photo height is now
     fixed, a short day leaves slack, and top-aligning dumped all of it under the
     text (22px above, 87px below). Centring splits it evenly (41/42) so the card
     reads as deliberate rather than bottom-heavy.

     The extra right padding is for measure, not decoration. The day number sits in
     a 64px rail on the left, so text began 111px from the left edge but ended only
     26px from the right — it read as stretched hard against the right side. 48px
     brings the line length to ~40 characters and gives the text a real right margin.
     It costs 6px of the clipping headroom (40 -> 34), which the budget absorbs. */
  .itin-day.has-photo .itin-main  { flex:1 1 auto; min-height:0; align-content:center; padding-right:48px; }
}
@media (max-width:560px){ .itin-main { grid-template-columns:1fr; gap:8px; } .itin-num { text-align:left; display:flex; align-items:baseline; gap:8px; } .itin-num .lbl { margin-top:0; } }
/* On a phone the day card is full width, and a fixed height (158px, 130px under 560px) made a ~3:1 strip
   that cropped most of the photo (Josh, 11 Oct 2026). A camera frame's 3:2 instead; the builder's framing
   (background-position) still decides what stays in view. Desktop keeps 158px in its two columns. */
@media (max-width:760px){ .itin-photo { height:auto; aspect-ratio:3 / 2; } }

.upsell-card { max-width:760px; margin:34px auto 0; background:var(--charcoal); color:#e8edf2; border-radius:var(--radius); padding:clamp(28px,4vw,44px); text-align:center; }
.upsell-flag { display:inline-block; color:#c9a8ff; font-size:.72rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase; }
.upsell-card h3 { color:#fff; font-size:1.5rem; margin:12px 0 10px; }
.upsell-card > p { color:#aeb8c2; max-width:54ch; margin:0 auto; font-size:.98rem; line-height:1.6; }
.upsell-grid { display:grid; grid-template-columns:1fr 1fr; gap:6px 40px; max-width:620px; margin:26px auto; text-align:left; }
.upsell-grid .checks2 { margin-top:0; grid-template-columns:1fr; }
.upsell-grid .checks2 li { color:#d4dbe3; }
.upsell-card .btn-ghost { background:rgba(255,255,255,.06); color:#fff; border-color:rgba(255,255,255,.35); }
.upsell-card .btn-ghost:hover { background:rgba(255,255,255,.14); border-color:rgba(255,255,255,.55); }
.upsell-note { color:#8b96a3; font-size:.85rem; margin-top:14px; }
@media (max-width:560px){ .upsell-grid { grid-template-columns:1fr; gap:6px; } }

/* social-media testimonial shots */
.social-shots { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; max-width:760px; margin:0 auto; }
.social-shots figure { margin:0; border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow-lg); }
.social-shots img { width:100%; height:100%; object-fit:cover; display:block; }
@media (max-width:680px){ .social-shots { grid-template-columns:1fr; max-width:420px; } }

/* framework vault cover grid (masterclass) */
.genre-group { margin-top:38px; }
.genre-group .genre-label { font-size:.78rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#d6489a; margin-bottom:18px; }
.cover-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:22px; }
@media (max-width:820px){ .cover-grid { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .cover-grid { grid-template-columns:repeat(2,1fr); } }
.cv { text-align:center; }
.cv img { width:100%; aspect-ratio:3/4; object-fit:cover; border-radius:10px; box-shadow:0 14px 30px rgba(0,0,0,.18); }
.cv span { display:block; margin-top:10px; font-size:.85rem; font-weight:700; color:var(--ink-soft); line-height:1.25; }

/* destination cards (photo adventures) */
.dest-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:28px; margin-top:46px; }
@media (max-width:840px){ .dest-grid { grid-template-columns:1fr; } }
.dest { position:relative; border-radius:var(--radius); overflow:hidden; min-height:340px; display:flex; align-items:flex-end; box-shadow:var(--shadow); color:#fff; }
.dest img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.dest:hover img { transform:scale(1.06); }
.dest::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,13,18,0) 30%,rgba(10,13,18,.88) 100%); }
.dest-body { position:relative; z-index:1; padding:28px; width:100%; }
.dest-body .eyebrow { color:#7CE2A4; margin-bottom:8px; }
.dest-avail-row { display:flex; flex-wrap:wrap; gap:6px; margin:0 0 10px; }
.dest-avail { display:inline-block; padding:3px 11px; border-radius:999px; font-size:.72rem;
  font-weight:800; letter-spacing:.02em; }
/* Only two colours on these cards: green = spots available (open OR filling),
   red = sold out. The exact count still rides along in the pill's hover title. */
.dest-avail-open, .dest-avail-low, .dest-avail-new { background:rgba(124,226,164,.18); color:#7CE2A4; border:1px solid rgba(124,226,164,.42); }
.dest-avail-sold { background:rgba(229,57,127,.2); color:#ff8fb4; border:1px solid rgba(229,57,127,.55); }
/* amber = pre-release, dates not set yet -> the card is a waitlist */
.dest-avail-soon { background:rgba(202,165,61,.18); color:#e6c869; border:1px solid rgba(202,165,61,.5); }
/* "Completed Workshops" showcase: smaller, lighter cards than the upcoming grid. */
.done-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:18px; margin-top:26px; }
.done-card { display:block; border-radius:16px; overflow:hidden; background:#fff; box-shadow:0 8px 24px rgba(16,24,40,.08);
  text-decoration:none; transition:transform .2s ease, box-shadow .2s ease; }
.done-card:hover { transform:translateY(-3px); box-shadow:0 14px 34px rgba(16,24,40,.14); }
.done-media { position:relative; aspect-ratio:4/3; background-size:cover; background-position:center; }
.done-media::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(9,17,13,.34),rgba(9,17,13,0) 44%); }
.done-tag { position:absolute; top:12px; left:12px; z-index:1; display:inline-block; padding:5px 11px; border-radius:999px;
  background:rgba(11,31,24,.72); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  color:#eafff4; font-size:.66rem; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.done-body { padding:14px 16px 16px; }
.done-body h3 { font-size:1.06rem; margin:0 0 4px; color:var(--ink,#0b1f18); }
.done-link { font-size:.82rem; font-weight:700; color:#0e7a64; }
.done-card:hover .done-link { text-decoration:underline; }
@media (max-width:600px){ .done-grid { grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; } .done-body h3 { font-size:.95rem; } }
.dest-body h3 { color:#fff; margin-bottom:10px; }
.dest-body ul { list-style:none; display:flex; flex-wrap:wrap; gap:6px 14px; }
.dest-body li { font-size:.86rem; color:rgba(255,255,255,.86); position:relative; padding-left:14px; }
.dest-body li::before { content:"•"; position:absolute; left:0; color:#7CE2A4; }
/* "Years on offer" ribbon (rendered by site.js from CP_WORKSHOPS[slug].years) */
.dest-ribbon {
  position:absolute; top:14px; left:14px; z-index:3;
  display:inline-flex; align-items:center; gap:7px;
  padding:6px 12px 6px 11px; border-radius:999px;
  background:rgba(11,31,24,.82); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  border:1px solid rgba(124,226,164,.38);
  color:#eafff4; font-weight:700; font-size:.76rem; letter-spacing:.02em; line-height:1;
  box-shadow:0 6px 18px rgba(0,0,0,.34); pointer-events:none;
}
.dest-ribbon .dot { width:7px; height:7px; border-radius:50%; background:#7CE2A4; box-shadow:0 0 0 3px rgba(124,226,164,.22); flex:0 0 auto; }
/* "New Release" badge: a filled green tag so it reads as a marketing flag, not the
   translucent availability pills. Sits in the (now free) top-left ribbon slot. */
.dest-ribbon-new { background:linear-gradient(135deg,#17a34a,#0e7a64); border-color:rgba(255,255,255,.28); color:#fff; }
.dest-ribbon-new .dot { background:#fff; box-shadow:0 0 0 3px rgba(255,255,255,.3); }
.split-media { position:relative; }

/* simple prose (terms) */
.prose { max-width:760px; }
.prose h2 { font-size:1.5rem; margin:36px 0 12px; }
.prose h3 { font-size:1.15rem; margin:24px 0 8px; }
.prose p, .prose li { color:var(--ink-soft); margin-bottom:12px; }
.prose ul { padding-left:22px; margin-bottom:16px; }

/* ============================================================
   MARKETING FLOW COMPONENTS (deep landing pages)
   ============================================================ */

/* slim star/credibility bar (top of inner pages, under hero copy) */
.starbar { display:inline-flex; align-items:center; gap:12px; justify-content:center; }
.starbar .s { color: var(--yellow); letter-spacing:2px; font-size:1rem; }
.starbar .t { font-size:.82rem; letter-spacing:.12em; text-transform:uppercase; color:rgba(255,255,255,.82); font-weight:700; }
.hero-inner .starbar { margin-bottom:22px; }

/* trust pillars (Guarantee / Resource Vault / Dedicated App) */
.trust3 { display:grid; grid-template-columns:repeat(3,1fr); gap:48px; max-width:1000px; margin-inline:auto; margin-top:44px; }
.trust3 .tp { background:none; border:0; box-shadow:none; padding:0; text-align:center; }
.trust3 .tp .ic { width:64px; height:64px; border-radius:18px; display:flex; align-items:center; justify-content:center; margin:0 auto 22px; background:rgba(29,38,48,.05); color:var(--ink); box-shadow:none; font-size:1.5rem; }
.trust3 .tp .ic svg { width:28px; height:28px; }
.trust3.build .tp .ic { background:rgba(177,90,216,.12); color:#a24fd0; }
.trust3.learn .tp .ic { background:rgba(58,154,163,.12); color:#2f8a93; }
.trust3.explore .tp .ic { background:rgba(47,127,214,.12); color:#2f7fd6; }
.trust3.brand .tp .ic { background:rgba(176,106,208,.12); color:#9d52c4; }
.trust3 .tp h4 { font-size:1.22rem; margin-bottom:10px; letter-spacing:-.01em; }
.trust3 .tp p { font-size:.97rem; color:var(--grey); max-width:34ch; margin-inline:auto; line-height:1.6; }
.section-dark .trust3 .tp h4 { color:#fff; }
.section-dark .trust3 .tp p { color:#aeb6c0; }
.section-dark .trust3 .tp .ic { background:rgba(255,255,255,.08); color:#cdb7e6; }
@media (max-width:840px){ .trust3 { grid-template-columns:1fr; max-width:380px; gap:40px; } }

/* origin story (narrative with mini-headings) */
.story-steps { display:grid; gap:26px; margin-top:8px; }
.story-step h4 { font-size:1.05rem; color:var(--green); letter-spacing:.02em; margin-bottom:6px; }
.story-step.build h4 { color:#d6489a; }
.story-step p { font-size:1.05rem; color:var(--ink-soft); }
.story-step p strong { color:var(--ink); }

/* big pull quote */
.pull-quote { max-width:880px; margin:0 auto; text-align:center; }
.pull-quote p { font-size:clamp(1.4rem,3vw,2.1rem); font-weight:700; line-height:1.3; letter-spacing:-.01em; color:var(--ink); }
.pull-quote .mark { font-size:3rem; line-height:0; color:#d8a0e6; }
.section-dark .pull-quote p { color:#fff; }

/* problem / agitation list */
.problem { max-width:760px; }
.problem ul { list-style:none; display:grid; gap:14px; margin-top:24px; }
.problem li { position:relative; padding-left:38px; font-size:1.05rem; color:var(--ink-soft); }
.problem li::before { content:"✕"; position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:#fde7ef; color:#e5397f; font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.section-dark .problem li { color:#c3ccd6; }
.section-dark .problem li::before { background:rgba(229,57,127,.18); }

/* golden / mechanism pillars (numbered) */
.golden { display:grid; grid-template-columns:repeat(3,1fr); gap:26px; margin-top:46px; }
.gp { background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:34px 28px; box-shadow:var(--shadow); position:relative; }
.gp .n { font-size:.85rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; background:var(--grad-build); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.gp h3 { font-size:1.4rem; margin:6px 0 10px; color:var(--ink); }
.gp p { font-size:.97rem; color:var(--ink-soft); }
@media (max-width:840px){ .golden { grid-template-columns:1fr; max-width:480px; margin-inline:auto; } }

/* qualification, for you / not for you */
.qualify { display:grid; grid-template-columns:1fr 1fr; gap:24px; margin-top:44px; }
.q-col { border-radius:var(--radius); padding:34px 30px; box-shadow:var(--shadow); }
.q-col h3 { font-size:1.25rem; margin-bottom:18px; display:flex; align-items:center; gap:10px; }
.q-col ul { list-style:none; display:grid; gap:13px; }
.q-col li { position:relative; padding-left:30px; color:var(--ink-soft); font-size:.99rem; }
.q-no { background:#fff; border:1px solid var(--line); }
.q-no h3 { color:#c23b67; }
.q-no li::before { content:"✕"; position:absolute; left:0; color:#e5397f; font-weight:700; }
.q-yes { background:var(--green-tint); border:1px solid #bce8cd; }
.q-yes h3 { color:#13863f; }
.q-yes li::before { content:"✓"; position:absolute; left:0; color:var(--green); font-weight:700; }
@media (max-width:780px){ .qualify { grid-template-columns:1fr; } }

/* rich offer / cohort cards */
.offers { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:46px; }
@media (max-width:880px){ .offers { grid-template-columns:1fr; max-width:560px; margin-inline:auto; } }
.offer { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:32px 30px; box-shadow:var(--shadow); transition:transform .22s ease, box-shadow .28s ease; }
.offer:hover { transform:translateY(-6px); box-shadow:var(--shadow-lg); }
.offer-top { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:16px; }
.offer-date { font-size:.74rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--ink); background:var(--bg-soft); border:1px solid var(--line); padding:6px 12px; border-radius:999px; }
.offer-pill { font-size:.7rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; padding:6px 12px; border-radius:999px; }
.offer-pill.open { background:var(--grad-build); color:#fff; }
.offer-pill.sold { background:#eef0f2; color:#8a95a1; }
.offer h3 { font-size:1.45rem; margin-bottom:10px; }
.offer .desc { font-size:.98rem; margin-bottom:16px; }
.offer .perfect { font-weight:700; font-size:.9rem; color:var(--ink); margin-bottom:10px; }
.offer ul { list-style:none; display:grid; gap:9px; margin-bottom:24px; }
.offer li { position:relative; padding-left:26px; font-size:.95rem; color:var(--ink-soft); }
.offer li::before { content:"✓"; position:absolute; left:0; color:#ec4899; font-weight:700; }
.offer .btn { margin-top:auto; align-self:flex-start; }
.offers.learn .offer-pill.open { background:var(--grad-learn); }
.offers.learn .offer li::before { color:var(--green); }
.offers.explore .offer-pill.open { background:var(--grad-explore); }
.offers.explore .offer li::before { color:#2f9fd6; }
.gp.learn .n { background:var(--grad-learn); -webkit-background-clip:text; background-clip:text; }
.gp.explore .n { background:var(--grad-explore); -webkit-background-clip:text; background-clip:text; }

/* green/teal check list */
.checks { list-style:none; display:grid; gap:13px; margin:22px 0 26px; }
.checks li { position:relative; padding-left:32px; font-size:1.02rem; color:var(--ink-soft); }
.checks li::before { content:"✓"; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background:var(--green-tint); color:var(--green); font-size:.78rem; font-weight:700; display:flex; align-items:center; justify-content:center; }
.checks.explore li::before { background:#e3f1fb; color:#2f9fd6; }
.checks.build li::before { background:#fce4f1; color:#d6489a; }

/* FAQ accordion */
.faq { max-width:820px; margin:36px auto 0; display:grid; gap:14px; }
.faq details { background:#fff; border:1px solid var(--line); border-radius:var(--radius-sm); box-shadow:var(--shadow); overflow:hidden; }
.faq summary { cursor:pointer; list-style:none; padding:22px 26px; font-weight:700; font-size:1.06rem; display:flex; justify-content:space-between; align-items:center; gap:16px; }
.faq summary::-webkit-details-marker { display:none; }
.faq summary::after { content:"+"; font-size:1.5rem; font-weight:400; color:var(--green); transition:transform .2s ease; flex:0 0 auto; }
.faq details[open] summary::after { transform:rotate(45deg); }
.faq details p { padding:0 26px 24px; color:var(--ink-soft); font-size:.99rem; }

/* email capture band */

/* credibility strip */
.cred { text-align:center; }
.cred .eyebrow { color:var(--grey); }
.cred .row { display:flex; flex-wrap:wrap; justify-content:center; gap:14px 38px; margin-top:18px; }
.cred .row span { font-weight:700; font-size:clamp(1rem,1.6vw,1.25rem); color:var(--ink); opacity:.55; letter-spacing:.01em; }
.section-dark .cred .row span { color:#e4eaf0; opacity:.8; }
.section-dark .cred .row span:hover { opacity:1; }

/* section intro helper */
.s-head { max-width:680px; }
.center .s-head { margin-inline:auto; }

/* ============================================================
   HOME PAGE, exact rebuild (light hero + pillar cards +
   stats bar + deep-dive sections + product cards)
   ============================================================ */

/* ---- aurora hero ---- */
.home-hero {
  position:relative; text-align:center; overflow:hidden;
  background:#1b2230;
  min-height: clamp(520px, 78vh, 720px);
  display:flex; flex-direction:column; justify-content:center; align-items:center;
  /* fixed header is ~84px tall and overlaps the hero top; offset the top
     padding so the content sits optically centred rather than top-heavy */
  padding-top: calc(clamp(48px,7vw,90px) + 84px);
  padding-bottom: clamp(48px,7vw,90px);
}
.hero-slides { position:absolute; inset:0; z-index:0; }
.hero-slide {
  position:absolute; inset:0; background-size:cover; background-position:center; opacity:0;
  animation: heroFade 21s infinite; transform:scale(1.04);
}
.hero-slide:nth-child(1){ animation-delay:0s; }
.hero-slide:nth-child(2){ animation-delay:7s; }
.hero-slide:nth-child(3){ animation-delay:14s; }
@keyframes heroFade {
  0%   { opacity:0; transform:scale(1.04); }
  4%   { opacity:1; }
  29%  { opacity:1; }
  34%  { opacity:0; transform:scale(1.10); }
  100% { opacity:0; transform:scale(1.04); }
}
@media (prefers-reduced-motion: reduce){
  .hero-slide { animation:none; transform:none; }
  .hero-slide:nth-child(1){ opacity:1; }
  .reveal { transition-duration:.01ms; transition-delay:0 !important; }
  .cv:hover img { transform:none; }
  .brand-marquee .marquee-track { animation:none; justify-content:center; flex-wrap:wrap; gap:clamp(30px,5vw,60px); }
  .brand-marquee .marquee-group[aria-hidden="true"] { display:none; }
}
.home-hero::before {
  content:""; position:absolute; inset:0; z-index:1;
  background:linear-gradient(180deg, rgba(10,14,22,.55) 0%, rgba(10,14,22,.42) 45%, rgba(10,14,22,.66) 100%);
}
.home-hero > .container { position:relative; z-index:2; width:100%; }
.home-hero .lockup-level { width:min(880px,90%); margin:0 auto; }
.home-hero .lockup-script2 { width:min(420px,68%); margin:10px auto 0; }
.home-hero .star-badge {
  display:inline-flex; align-items:center; gap:10px; margin:22px auto 0;
  background:rgba(20,24,32,.55); color:#fff; border:1px solid rgba(255,255,255,.18);
  -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  border-radius:999px; padding:9px 20px; font-weight:700; font-size:.92rem; letter-spacing:.01em;
}
.home-hero .star-badge .stars { color:#ffd859; letter-spacing:2px; }

/* ---- hero promise lockup (clarity-first) ---- */
.home-hero .hero-eyebrow { display:block; color:#7CE2A4; margin:0 auto 16px; }
.htext-level.hero-triad { max-width:none; }
/* "Or build a business." always begins its own line */
.hero-triad .ht-or { display:block; }
/* On phones, give each sentence its own line at a size that fits, so no
   sentence wraps mid-thought */
@media (max-width:560px){
  .htext-level.hero-triad { font-size:clamp(1.8rem,8.4vw,2.4rem); }
  .hero-triad .ht-s { display:block; }
}
.home-lede {
  color:#e3e9f0; font-size:clamp(1.05rem,1.55vw,1.28rem); line-height:1.5;
  max-width:60ch; margin:22px auto 0; text-shadow:0 1px 12px rgba(0,0,0,.45);
}
.hero-cta { display:flex; flex-wrap:wrap; gap:14px; justify-content:center; margin-top:32px; }
.hero-proof {
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:8px 16px; margin-top:28px; color:#e6ebf1; font-size:.95rem; font-weight:600;
  text-shadow:0 1px 8px rgba(0,0,0,.4);
}
.hero-proof strong { color:#fff; font-weight:800; }
.hero-proof .hp-stars { color:#ffd859; letter-spacing:2px; }
.hero-proof .hp-dot { opacity:.4; }

/* ---- choose-your-path band ---- */
.paths-section { padding-block: clamp(48px,7vw,80px); }
.paths-section .pillars { margin-top:34px; }

/* ---- 3 pillar cards (glass) ---- */
.pillar h3 { color:#fff; font-size:1.18rem; font-weight:800; line-height:1.22; margin:0; max-width:18ch; }
.promise-band { background:#141a24; padding-block: clamp(40px,5.5vw,68px); border-top:1px solid rgba(255,255,255,.06); }
.guarantee-seal { width:138px; height:138px; display:block; margin:0 auto 20px; filter: drop-shadow(0 0 18px rgba(127,176,238,.35)) drop-shadow(0 8px 18px rgba(0,0,0,.4)); }
.promise-band .promise-h { color:#fff; margin:6px 0 10px; }
.promise-band .promise-p { color:#c2c9d2; max-width:60ch; margin-inline:auto; }
.final-cta { padding-block: clamp(64px,9vw,110px); }
.final-cta h2 { color:#fff; margin-bottom:14px; }
.final-cta .lead { color:#d7dde4; max-width:54ch; }
.final-cta .guarantee-seal { width:104px; height:104px; margin:0 auto 20px; }
.final-guarantee { margin-top:20px; color:#aeb8c2; font-size:.9rem; font-weight:600; }
.p-verb { display:block; font-size:.72rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; margin:2px 0 6px; }
.pv-learn { color:#61b8be; }
.pv-build { color:#ec8fc0; }
.pv-explore { color:#5a93e0; }
.pillars { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:40px; max-width:1060px; margin-inline:auto; }
.pillar {
  background:rgba(255,255,255,.10); border:1px solid rgba(255,255,255,.20);
  -webkit-backdrop-filter:blur(12px); backdrop-filter:blur(12px);
  border-radius:20px; padding:30px 26px 28px; text-align:center;
  display:flex; flex-direction:column; align-items:center; gap:16px;
  transition:transform .22s ease, box-shadow .22s ease, background .22s ease;
}
.pillar:hover { transform:translateY(-4px); background:rgba(255,255,255,.16); box-shadow:0 18px 40px rgba(0,0,0,.28); }
.pillar img.p-icon { width:72px; height:72px; object-fit:contain; }
.pillar p { color:#fff; font-size:1.08rem; max-width:22ch; margin:0 auto; }
.pillar p strong { color:#fff; }
.pillar .btn, .pillar .pill-btn { margin-top:auto; }
.pill-btn {
  display:inline-flex; align-items:center; gap:8px; background:#fff; color:var(--ink);
  font-weight:700; font-size:.92rem; border-radius:999px; padding:11px 22px; transition:.2s ease;
}
.pill-btn::after { content:"→"; transition:transform .2s ease; }
.pill-btn:hover { background:#eaeaea; }
.pill-btn:hover::after { transform:translateX(4px); }

/* ---- intro (Josh) ---- */
.intro-split { display:grid; grid-template-columns:1.05fr .95fr; gap:clamp(32px,5vw,72px); align-items:center; }
.intro-split .lockup-home { width:min(560px,100%); margin:0 0 22px; }
.intro-split img.josh { border-radius:20px; box-shadow:var(--shadow-lg); width:100%; }

/* ---- stats bar ---- */
.stats-bar {
  display:grid; grid-template-columns:repeat(6,1fr); gap:8px;
  background:#f0f0f1; border-radius:22px; padding:34px clamp(20px,4vw,44px); margin-top:6px;
}
.stat-cell { text-align:center; padding:6px 8px; position:relative; }
.stat-cell + .stat-cell::before { content:""; position:absolute; left:0; top:18%; height:64%; width:1px; background:rgba(0,0,0,.10); }
.stat-cell .num { font-weight:700; font-size:clamp(1.6rem,2.6vw,2.3rem); line-height:1; color:var(--ink); letter-spacing:-.02em; }
.stat-cell .lbl { display:block; margin-top:8px; font-size:.82rem; color:var(--grey); line-height:1.35; }

/* ---- deep-dive sections ---- */
.dive .lockup-dive { width:min(560px,100%); margin:0 0 18px; }
.dive.section-dark { position:relative; overflow:hidden; }
.dive .dive-bg { position:absolute; inset:0; z-index:0; background-size:cover; background-position:center; }
.dive .dive-bg.scroll-fixed { background-attachment:fixed; }
.dive .dive-bg img { width:100%; height:100%; object-fit:cover; opacity:.22; }
.dive .dive-bg::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(14,18,24,.62),rgba(14,18,24,.74)); }
.dive .dive-bg.scroll-fixed::after { background:linear-gradient(180deg,rgba(14,18,24,.34),rgba(14,18,24,.46)); }
.dive .dive-bg.scroll-fixed.bg-learn::after { background:linear-gradient(180deg,rgba(14,18,24,.24),rgba(14,18,24,.36)); }
.dive .container { position:relative; z-index:1; }
.dive .checks2 li { color:var(--ink-soft); }
.section-dark.dive .checks2 li { color:#cfd6de; }
.dive .mic { border-radius:18px; box-shadow:var(--shadow-lg); width:100%; filter:brightness(.8); }

/* ---- digital products cards ---- */
.prod-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:48px; }
.prod-card { background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); transition:transform .22s ease, box-shadow .22s ease; }
.prod-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.prod-card .pimg { aspect-ratio:1/1; overflow:hidden; background:var(--bg-soft); }
.prod-card .pimg img { width:100%; height:100%; object-fit:cover; }
.prod-card .pbody { padding:24px 24px 28px; display:flex; flex-direction:column; gap:10px; flex:1; }
.prod-card h3 { font-size:1.25rem; }
.prod-card .price { font-weight:700; color:var(--green); font-size:1.05rem; }
.prod-card p { font-size:.95rem; flex:1; }
.prod-card .btn { margin-top:8px; align-self:flex-start; }

/* ---- responsive ---- */
@media (max-width:900px){
  .pillars { grid-template-columns:1fr; max-width:460px; }
  .intro-split { grid-template-columns:1fr; }
  .stats-bar { grid-template-columns:repeat(2,1fr); gap:22px 8px; }
  .stat-cell:nth-child(odd)::before { display:none; }
  .prod-grid { grid-template-columns:1fr; max-width:440px; margin-inline:auto; }
}

/* ============================================================
   SHARED PATTERNS for inner pages (lessons, features, capture)
   ============================================================ */

/* mini feature strip (icon + title + blurb) */
.feat-strip { display:grid; grid-template-columns:repeat(2,1fr); gap:clamp(28px,5vw,72px); max-width:760px; margin:0 auto; text-align:center; }
.feat { display:flex; flex-direction:column; align-items:center; gap:10px; }
.feat img { width:42px; height:42px; object-fit:contain; }
.feat h4 { font-size:1.05rem; }
.feat p { font-size:.92rem; color:var(--grey); max-width:30ch; }
.feat-strip.center-1 { grid-template-columns:1fr; max-width:420px; }

/* lesson / offer cards */
.lesson-grid { display:grid; grid-template-columns:repeat(2,1fr); gap:26px; margin-top:48px; }
.lesson-card { background:#fff; border:1px solid var(--line); border-radius:20px; overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--shadow); }
.lesson-card .limg { position:relative; aspect-ratio:16/10; overflow:hidden; background:var(--bg-soft); }
.lesson-card .lvl { position:absolute; top:12px; left:12px; z-index:2; background:rgba(12,15,22,.55); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); color:#fff; font-size:.7rem; font-weight:800; letter-spacing:.09em; text-transform:uppercase; padding:6px 12px; border-radius:999px; border:1px solid rgba(255,255,255,.22); }
.lesson-card .limg img { width:100%; height:100%; object-fit:cover; }
.lesson-card .lbody { padding:26px 26px 28px; display:flex; flex-direction:column; gap:12px; flex:1; }
.lesson-card h3 { font-size:1.35rem; color:var(--ink); }
.lesson-card .tagline { font-weight:700; color:var(--ink); margin-top:-4px; }
.lesson-card p { font-size:.94rem; color:var(--grey); }
.lesson-card .meta { display:flex; flex-direction:column; gap:8px; margin-top:4px; }
.lesson-card .meta-row { display:flex; align-items:center; gap:9px; font-size:.88rem; font-weight:700; color:var(--ink); }
.lesson-card .meta-row .mi { width:18px; height:18px; flex:none; display:inline-flex; align-items:center; justify-content:center; color:#3a9aa3; }
.lesson-card .meta-row .mi svg { width:16px; height:16px; }
.lesson-card .btn { margin-top:auto; }
/* On a white card the buttons need the full-opacity pillar gradient, not the
   washed-out version used when a button sits directly on a dark section. */
.section-dark .lesson-card .btn-grad.learn   { background:linear-gradient(135deg, rgba(150,205,90,.96), rgba(64,168,178,.96)); }
.section-dark .lesson-card .btn-grad.build   { background:linear-gradient(135deg, rgba(170,80,225,.96), rgba(60,182,220,.96)); }
.section-dark .lesson-card .btn-grad.explore { background:linear-gradient(135deg, rgba(40,115,225,.97), rgba(64,176,170,.96)); }
@media (max-width:760px){ .lesson-grid { grid-template-columns:1fr; } .feat-strip { grid-template-columns:1fr; } }
.lesson-grid.cols-3 { grid-template-columns:repeat(3,1fr); }
@media (max-width:980px){ .lesson-grid.cols-3 { grid-template-columns:1fr; max-width:460px; margin-inline:auto; } }

/* device / digital-stack showcase (dark section) */
.showcase { display:grid; grid-template-columns:1fr 1fr; gap:clamp(30px,5vw,64px); align-items:center; }
.showcase .stack-img { width:100%; filter:drop-shadow(0 30px 60px rgba(0,0,0,.4)); }
@media (max-width:820px){ .showcase { grid-template-columns:1fr; } }

/* email capture card */
.capture { background:var(--bg-soft); border:1px solid var(--line); border-radius:24px; padding:clamp(40px,6vw,68px) var(--pad); text-align:center; }
.capture h2 { margin-bottom:8px; }
.capture p { max-width:48ch; margin:0 auto 26px; }
.capture-form { display:flex; gap:12px; max-width:560px; margin:0 auto; flex-wrap:wrap; }
.capture-form input { flex:1; min-width:180px; padding:14px 18px; border:1px solid var(--line); border-radius:12px; font-family:inherit; font-size:1rem; background:#fff; }
.capture-form .btn { flex:none; }
.capture-done { max-width:560px; margin:0 auto; font-weight:700; color:var(--green-dark, #0f7d39); }
#free-guide .capture-form { max-width:720px; flex-wrap:nowrap; }
#free-guide .capture-form input { min-width:0; }
@media (max-width:640px){ #free-guide .capture-form { flex-wrap:wrap; } #free-guide .capture-form .btn { width:100%; } }
.capture .small { font-size:.82rem; color:var(--grey); margin:16px auto 0; }

/* Free Guide two-column (aurora guide) */
.guide-split { display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,1fr); gap:clamp(28px,5vw,68px); align-items:center; }
.guide-art img { width:100%; height:auto; display:block; }
.guide-copy { text-align:left; }
.guide-copy .eyebrow { margin-bottom:14px; }
.guide-copy h2 { margin-bottom:12px; }
.guide-copy > p { max-width:48ch; margin:0 0 18px; }
.guide-list { list-style:none; margin:0 0 26px; padding:0; display:grid; gap:10px; }
.guide-list li { position:relative; padding-left:30px; color:var(--ink); line-height:1.5; }
.guide-list li::before { content:""; position:absolute; left:0; top:.34em; width:18px; height:18px; border-radius:50%; background:linear-gradient(135deg,#61b8be,#5a93e0); -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='black' d='M9 16.2 4.8 12l-1.4 1.4L9 19 21 7l-1.4-1.4z'/%3E%3C/svg%3E") center/14px no-repeat; }
.guide-copy .capture-form { max-width:560px; margin:0; }
.guide-copy .small { margin:16px 0 0; }
@media (max-width:860px){
  .guide-split { grid-template-columns:1fr; gap:28px; }
  .guide-art { max-width:460px; margin:0 auto; order:-1; }
  .guide-copy { text-align:center; }
  .guide-copy .eyebrow { margin-inline:auto; }
  .guide-copy > p { margin-inline:auto; }
  .guide-list { max-width:420px; margin-inline:auto; margin-bottom:26px; text-align:left; }
  .guide-copy .capture-form { margin:0 auto; }
}

/* ============ BUILD PAGE EXTRAS ============ */
.feat-strip-3 { grid-template-columns:repeat(3,1fr); max-width:1040px; }
@media (max-width:760px){ .feat-strip-3 { grid-template-columns:1fr; } }

/* hero mini reviews */
.mini-revs { display:grid; grid-template-columns:repeat(4,1fr); gap:30px; margin-top:42px; max-width:1060px; margin-inline:auto; }
.mini-rev { margin:0; text-align:center; color:#e7ebf0; display:flex; flex-direction:column; align-items:center; }
.mini-rev .av { width:62px; height:62px; border-radius:50%; margin:0 0 16px; display:flex; align-items:center; justify-content:center; font-weight:700; font-size:1rem; color:#fff; background:var(--grad-build); box-shadow:0 8px 22px rgba(124,58,237,.4); border:2px solid rgba(255,255,255,.28); overflow:hidden; transition:transform .35s ease; }
.mini-rev .av img { width:100%; height:100%; object-fit:cover; display:block; }
.mini-rev:hover .av { transform:translateY(-4px) scale(1.05); }
.mini-rev blockquote { margin:0; flex:1 0 auto; font-size:.92rem; line-height:1.5; color:#eef1f5; text-shadow:0 2px 12px rgba(0,0,0,.6); }
.mini-rev blockquote::before { content:"\201C"; color:rgba(167,139,250,.7); font-size:1.5rem; font-weight:700; line-height:0; vertical-align:-.35em; margin-right:1px; }
.mini-rev blockquote::after { content:"\201D"; color:rgba(167,139,250,.7); font-size:1.5rem; font-weight:700; line-height:0; vertical-align:-.35em; margin-left:1px; }
.mini-rev .stars { color:var(--yellow); font-size:.92rem; letter-spacing:3px; margin:16px 0 9px; }
.mini-rev figcaption { font-weight:700; font-size:.9rem; color:#fff; }
.mini-rev figcaption span { display:block; font-weight:500; font-size:.74rem; color:#9aa6b4; margin-top:3px; letter-spacing:.02em; }
@media (max-width:760px){ .mini-revs { grid-template-columns:repeat(2,1fr); gap:26px; } }
@media (max-width:440px){ .mini-revs { grid-template-columns:1fr; } }

/* big dream question */
.big-q { font-size:clamp(1.7rem,3.6vw,2.7rem); max-width:40ch; margin:0 auto; line-height:1.18; text-wrap:balance; }

/* origin profile */
.profile-circle { width:min(360px,80%); border-radius:50%; box-shadow:var(--shadow-lg); }

/* eager-to-teach lockup + arrows */
.lockup-teach { width:min(820px,92%); margin:6px auto; display:block; }
.green-arrow { display:block; margin:0 auto; width:90px; height:auto; }
.green-arrow.ga-top { margin-bottom:8px; }
.green-arrow.ga-bot { margin-top:8px; }

/* inline mini pull quote */
.mini-pull { margin-top:22px; font-weight:700; color:#7CE2A4; font-style:italic; }

/* banner quote */
.banner-quote { background:var(--grad-build); }
.banner-quote .bq-text { color:#fff; font-size:clamp(1.15rem,2.2vw,1.6rem); font-weight:700; max-width:34ch; margin:0 auto; line-height:1.35; }
.banner-quote .bq-who { display:block; margin-top:16px; color:rgba(255,255,255,.85); font-weight:700; letter-spacing:.04em; }
.dive .bq-text { color:#fff; font-size:clamp(1.05rem,2vw,1.4rem); font-weight:700; font-style:italic; }
.dive .bq-who { display:block; margin-top:14px; color:#cfd6de; font-weight:700; }

/* brand row */
.brand-row span { font-size:1.2rem; font-weight:700; letter-spacing:.04em; color:#aeb8c4; opacity:.9; }

/* tick list (white ticks) */
.ticklist { list-style:none; padding:0; margin:18px 0 26px; display:grid; gap:16px; }
.ticklist li { position:relative; padding-left:38px; color:#cfd6de; line-height:1.55; }
.ticklist li::before { content:"✓"; position:absolute; left:0; top:0; width:24px; height:24px; border-radius:50%; background:var(--grad-build); color:#fff; font-size:.8rem; font-weight:700; display:flex; align-items:center; justify-content:center; }

/* what's included list */
.incl-list { display:grid; gap:22px; margin-top:14px; }
.incl h4 { color:#fff; font-size:1.12rem; margin-bottom:6px; }
.incl p { color:#cfd6de; font-size:.96rem; }

/* course cards */
.course-list { display:grid; gap:34px; margin-top:40px; }
.course-card { display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(24px,4vw,52px); align-items:center; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.10); border-radius:24px; padding:clamp(22px,3vw,40px); }
.course-card.reverse { grid-template-columns:1.1fr 0.9fr; }
.course-card.reverse .cc-media { order:2; }
.course-card .cc-media img { width:100%; border-radius:18px; box-shadow:var(--shadow-lg); object-fit:cover; aspect-ratio:4/3; }
.course-card .cc-body h3 { color:#fff; font-size:clamp(1.4rem,2.4vw,1.9rem); margin:6px 0 8px; }
.course-card .cc-body p { color:#cfd6de; font-size:.97rem; margin-bottom:12px; }
.course-card .cc-body .tagline { color:#fff; font-weight:600; }
.course-card .cc-body .btn { margin-top:8px; }
@media (max-width:820px){ .course-card, .course-card.reverse { grid-template-columns:1fr; } .course-card.reverse .cc-media { order:0; } }

/* masterclass button image link */
.mc-btn-link img { width:min(320px,80%); height:auto; transition:transform .2s ease; }
.mc-btn-link:hover img { transform:translateY(-2px); }

/* ============ EXPLORE PAGE HERO ============ */
.explore-hero-h { font-size:clamp(3.2rem,9vw,7rem); line-height:.95; margin:0; letter-spacing:-.02em; font-weight:900; }
.hero .hero-script { font-family:"Square Peg",cursive; font-weight:400; font-size:clamp(2.1rem,4.6vw,3.4rem); color:#fff; line-height:1.15; margin:14px auto 0; text-shadow:0 2px 18px rgba(0,0,0,.5); }
.dive .split-body .checks2 li { color:#cfd6de; }

/* ============ ABOUT PAGE ============ */
.about-hero, .dark-hero { padding-block:clamp(48px,7vw,90px); }
.about-hero .lockup-hero, .dark-hero .lockup-hero { width:min(620px,82%); }
.trusted-h { font-size:clamp(1.3rem,2.4vw,1.9rem); color:var(--ink); margin-bottom:30px; }
.brand-row { display:flex; flex-wrap:wrap; gap:clamp(26px,5vw,60px); align-items:center; justify-content:center; }
.trust-band { padding-block:clamp(28px,4vw,46px); background:#141a24; }
.trust-band .trust-eyebrow { text-transform:uppercase; letter-spacing:.08em; font-size:.78rem; font-weight:700; color:#8c97a6; margin-bottom:20px; }
.trust-band .brand-row span { color:#cdd6df; opacity:.85; }
.trust-band .trusted-h { color:#fff; }
.stats-section { padding-block: clamp(40px,5.5vw,72px); }
.brand-logo { width:auto; display:block; opacity:.85; }
.brand-logo.b-microsoft { height:24px; }
.brand-logo.b-samsung { height:86px; margin-block:-30px; }
.brand-logo.b-nikon { height:66px; margin-block:-20px; }

/* Sliding brand marquee */
.brand-marquee { margin-top:30px; overflow:hidden; width:100%;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 9%,#000 91%,transparent 100%); }
.brand-marquee .marquee-track { display:flex; width:max-content; animation:brand-scroll 32s linear infinite; }
.brand-marquee:hover .marquee-track { animation-play-state:paused; }
.brand-marquee .marquee-group { display:flex; align-items:center; flex:0 0 auto; gap:clamp(40px,7vw,84px); padding-right:clamp(40px,7vw,84px); }
.brand-marquee .marquee-group span { font-size:1.2rem; font-weight:700; letter-spacing:.04em; color:#cdd6df; opacity:.82; white-space:nowrap; }
.brand-marquee .brand-logo { opacity:.82; }
@keyframes brand-scroll { from { transform:translateX(0); } to { transform:translateX(-50%); } }

/* Five income streams tile grid (reverse pyramid: 3 over centered 2) */
.stream-grid { display:grid; grid-template-columns:repeat(6,1fr); gap:16px; margin-top:38px; }
.stream-card { position:relative; border-radius:14px; overflow:hidden; box-shadow:0 16px 40px rgba(0,0,0,.18); grid-column:span 2; }
.stream-card:nth-child(4) { grid-column:2 / span 2; }
.stream-card:nth-child(5) { grid-column:4 / span 2; }
.stream-card img { width:100%; height:230px; object-fit:cover; display:block; transition:transform .5s ease; }
.stream-card:hover img { transform:scale(1.04); }
.stream-cap { position:absolute; inset:auto 0 0 0; padding:16px 16px; background:linear-gradient(transparent,rgba(0,0,0,.82)); color:#fff; }
.stream-cap b { display:block; font-size:1rem; }
.stream-cap span { font-size:.82rem; color:#d4dbe3; }
@media (max-width:620px){
  .stream-grid { grid-template-columns:1fr 1fr; }
  .stream-card, .stream-card:nth-child(4), .stream-card:nth-child(5) { grid-column:span 1; }
  .stream-card:last-child { grid-column:1 / -1; }
  .stream-card img { height:200px; }
}
@media (max-width:400px){
  .stream-grid { grid-template-columns:1fr; }
  .stream-card, .stream-card:nth-child(4), .stream-card:nth-child(5) { grid-column:1 / -1; }
}
.fullshot { width:100%; border-radius:var(--radius); box-shadow:var(--shadow-lg); display:block; }
.filmstrip { display:flex; gap:14px; justify-content:center; align-items:center; flex-wrap:nowrap; max-width:1100px; margin:0 auto; padding:0 var(--pad); }
.filmstrip img { width:24%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; box-shadow:var(--shadow-lg); }
@media (max-width:720px){ .filmstrip { flex-wrap:wrap; } .filmstrip img { width:46%; } }

.gallery-band { display:grid; grid-template-columns:repeat(5,1fr); gap:6px; width:100%; margin-top:34px; }
.gallery-band img { width:100%; height:clamp(150px,18vw,260px); object-fit:cover; display:block; }
@media (max-width:980px){ .gallery-band { grid-template-columns:repeat(3,1fr); } }
@media (max-width:560px){ .gallery-band { grid-template-columns:repeat(2,1fr); } }

.skillset { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; }
.skill-card { background:#fff; border:1px solid var(--line); border-radius:18px; padding:30px 26px; box-shadow:var(--shadow); }
.skill-card h3 { margin-bottom:16px; font-size:1.2rem; }
.skill-card ul { list-style:none; display:grid; gap:11px; }
.skill-card li { position:relative; padding-left:26px; font-size:.95rem; color:var(--ink-soft); line-height:1.45; }
.skill-card li::before { content:"✓"; position:absolute; left:0; top:0; color:var(--green); font-weight:700; }
@media (max-width:840px){ .skillset { grid-template-columns:1fr; max-width:520px; margin-inline:auto; } }

/* ============ CONTACT PAGE ============ */
.connect-card { background:#fff; border-radius:24px; box-shadow:var(--shadow-lg); padding:clamp(28px,4vw,56px); display:grid; grid-template-columns:0.9fr 1.1fr; gap:clamp(24px,4vw,48px); align-items:center; margin-top:-90px; position:relative; z-index:3; }
.connect-art { display:flex; align-items:center; justify-content:center; }
.connect-art img { width:min(320px,90%); height:auto; }
.connect-form p { color:var(--ink-soft); margin:8px 0 20px; }
.contact-form { display:flex; flex-direction:column; gap:16px; }
.contact-form input, .contact-form textarea { width:100%; padding:14px 4px; border:none; border-bottom:1px solid #d4d9e0; background:transparent; font:inherit; color:var(--ink); }
.contact-form input:focus, .contact-form textarea:focus { outline:none; border-bottom-color:var(--ink); }
.contact-form textarea { resize:vertical; }
.contact-form .btn { align-self:flex-start; margin-top:8px; }
@media (max-width:760px){ .connect-card { grid-template-columns:1fr; margin-top:-60px; } }

/* ============ DIGITAL PRODUCTS PAGE ============ */
.price { display:block; color:var(--ink-soft); font-weight:700; letter-spacing:.04em; margin-bottom:6px; }
.product-h { font-size:clamp(1.8rem,3.4vw,2.6rem); margin-bottom:14px; }
.bonus { color:var(--green); font-weight:700; margin:14px 0 18px; }
.bonus span { letter-spacing:.04em; }
.price .gold { color:var(--yellow); letter-spacing:2px; }

/* ============ TERMS / LEGAL PAGE ============ */
.legal .container { max-width:920px; }
.legal p { color:#cfd6de; margin-bottom:16px; line-height:1.7; }
.legal p strong { color:#fff; }
.legal h2 { color:var(--green); font-size:clamp(1.3rem,2.4vw,1.7rem); margin:38px 0 14px; }
.legal h3 { color:#fff; font-size:1.1rem; margin:20px 0 8px; }
.legal ul { list-style:none; display:grid; gap:10px; margin-bottom:16px; }
.legal ul li { position:relative; padding-left:22px; color:#cfd6de; line-height:1.65; }
.legal ul li::before { content:"•"; position:absolute; left:4px; color:var(--green); }
.legal ul li strong { color:#fff; }

/* ============================================================
   BLOG  (index listing + article templates)
   ============================================================ */

/* ---- index listing ---- */
.blog-featured { display:grid; grid-template-columns:1.15fr 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin-top:8px; }
.blog-featured .thumb { position:relative; min-height:340px; overflow:hidden; }
.blog-featured .thumb img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; transition:transform .6s ease; }
.blog-featured:hover .thumb img { transform:scale(1.04); }
.blog-featured .fbody { padding:clamp(28px,4vw,52px); display:flex; flex-direction:column; justify-content:center; }
.blog-featured h2 { font-size:clamp(1.6rem,3vw,2.4rem); margin:12px 0 14px; }
.blog-featured p { color:var(--ink-soft); margin-bottom:20px; }
@media (max-width:760px){ .blog-featured { grid-template-columns:1fr; } .blog-featured .thumb { min-height:240px; } }

.blog-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:28px; margin-top:34px; }
@media (max-width:980px){ .blog-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:620px){ .blog-grid { grid-template-columns:1fr; } }
.blog-card { display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); transition:transform .3s ease, box-shadow .3s ease; }
.blog-card:hover { transform:translateY(-4px); box-shadow:var(--shadow-lg); }
.blog-card .thumb { aspect-ratio:3/2; overflow:hidden; }
.blog-card .thumb img { width:100%; height:100%; object-fit:cover; transition:transform .5s ease; }
.blog-card:hover .thumb img { transform:scale(1.05); }
.blog-card .cbody { padding:22px 22px 26px; display:flex; flex-direction:column; flex:1; }
.blog-card h3 { font-size:1.16rem; line-height:1.22; margin:10px 0; }
.blog-card p { font-size:.94rem; color:var(--ink-soft); margin-bottom:16px; }
.blog-card .post-meta { margin-top:auto; }

.cat-tag { font-size:.72rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; }
.cat-tag.guide { color:#3787ed; }
.cat-tag.tutorial { color:#3f8d96; }

.post-meta { font-size:.82rem; color:var(--grey); display:flex; gap:9px; align-items:center; flex-wrap:wrap; }
.post-meta .dot { width:3px; height:3px; border-radius:50%; background:currentColor; display:inline-block; opacity:.6; }

/* ---- article body ---- */
.post-wrap { padding:clamp(40px,6vw,72px) 0; }
.post-body { max-width:760px; margin:0 auto; }
.post-body > p { font-size:1.08rem; line-height:1.75; margin-bottom:20px; color:#33404d; }
.post-body h2 { font-size:clamp(1.5rem,2.8vw,2.05rem); margin:46px 0 14px; }
.post-body h3 { font-size:1.24rem; margin:30px 0 10px; }
.post-body ul, .post-body ol { padding-left:24px; margin:0 0 22px; }
.post-body li { margin-bottom:9px; color:#33404d; line-height:1.7; }
.post-body figure { margin:30px 0; }
.post-body figure img { border-radius:var(--radius); box-shadow:var(--shadow); width:100%; }
.post-body figcaption { font-size:.84rem; color:var(--grey); text-align:center; margin-top:10px; }
.post-body a:not(.btn) { color:#2e7bd6; text-decoration:underline; text-underline-offset:2px; font-weight:600; }
.post-body strong { color:var(--ink); }
.post-intro { font-size:1.2rem; line-height:1.7; color:#2a3540; font-weight:500; margin-bottom:26px; }

/* TL;DR / short-answer (featured-snippet bait) */
.tldr { background:linear-gradient(135deg,#f1f7f8,#eef4ff); border:1px solid #dce9ef; border-left:4px solid #61b8be; border-radius:12px; padding:22px 24px; margin:0 0 30px; }
.tldr .lbl { font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:#3f8d96; margin-bottom:8px; }
.tldr p { margin:0; font-size:1.02rem; color:#2a3540; line-height:1.6; }

/* table of contents */
.toc { background:var(--bg-soft); border:1px solid var(--line); border-radius:14px; padding:20px 24px; margin:0 0 30px; }
.toc .lbl { font-size:.74rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; color:var(--grey); margin-bottom:10px; }
.toc ol { margin:0; padding-left:20px; }
.toc li { margin-bottom:6px; color:var(--ink-soft); }
.toc a { color:#2e7bd6; text-decoration:none; font-weight:600; }
.toc a:hover { text-decoration:underline; }

/* settings / spec callout */
.settings-box { background:#0f1620; color:#e7edf3; border-radius:14px; padding:22px 24px; margin:26px 0; }
.settings-box h4 { color:#fff; font-size:1rem; letter-spacing:.01em; margin-bottom:14px; }
.settings-box dl { display:grid; grid-template-columns:auto 1fr; gap:9px 18px; margin:0; }
.settings-box dt { color:#7fd4dd; font-weight:700; font-size:.92rem; }
.settings-box dd { color:#cdd7e1; font-size:.92rem; margin:0; }

/* location cards */
.loc { display:grid; grid-template-columns:300px 1fr; gap:0; background:#fff; border:1px solid var(--line); border-radius:var(--radius); overflow:hidden; box-shadow:var(--shadow); margin:24px 0; }
.loc .loc-img { position:relative; min-height:230px; overflow:hidden; }
.loc .loc-img img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.loc .loc-body { padding:26px 28px; }
.loc .loc-num { font-size:.76rem; font-weight:800; letter-spacing:.1em; text-transform:uppercase; color:#3787ed; }
.loc .loc-body h3 { margin:4px 0 8px; }
.loc .loc-specs { list-style:none; padding:0; margin:14px 0 0; display:grid; gap:7px; }
.loc .loc-specs li { font-size:.92rem; color:var(--ink-soft); }
.loc .loc-specs b { color:var(--ink); }
.loc.text-only { grid-template-columns:1fr; }
@media (max-width:680px){ .loc { grid-template-columns:1fr; } .loc .loc-img { min-height:200px; } }

/* numbered steps */
.steps { counter-reset:step; list-style:none; padding:0; margin:26px 0; }
.steps > li { position:relative; padding:0 0 4px 58px; margin-bottom:26px; }
.steps > li::before { counter-increment:step; content:counter(step); position:absolute; left:0; top:-4px; width:40px; height:40px; border-radius:50%; background:var(--grad-explore); color:#fff; font-weight:800; display:flex; align-items:center; justify-content:center; }
.steps > li h3 { margin:6px 0 6px; }
.steps > li p { margin-bottom:0; }

/* pro tip / warning notes */
.note { border-radius:12px; padding:18px 22px; margin:26px 0; font-size:.98rem; color:#33404d; line-height:1.6; }
.note.tip { background:#eafaf0; border:1px solid #c5ecd3; }
.note.warn { background:#fff5ea; border:1px solid #f3ddc0; }
.note b { display:block; margin-bottom:4px; color:var(--ink); }

/* email capture / lead magnet */
.email-capture { position:relative; overflow:hidden; background:var(--grad-brand); border-radius:24px; padding:clamp(32px,5vw,52px); text-align:center; color:#fff; margin:48px 0; }
.email-capture::after { content:""; position:absolute; inset:0; background:radial-gradient(120% 120% at 0% 0%, rgba(255,255,255,.18), transparent 50%); pointer-events:none; }
.email-capture > * { position:relative; z-index:1; }
.email-capture h3 { color:#fff; font-size:clamp(1.4rem,2.6vw,2rem); margin-bottom:10px; }
.email-capture p { color:rgba(255,255,255,.92); max-width:48ch; margin:0 auto 22px; }
.email-form { display:flex; gap:10px; max-width:460px; margin:0 auto; flex-wrap:wrap; }
.email-form input { flex:1; min-width:200px; padding:14px 18px; border-radius:999px; border:0; font:inherit; color:var(--ink); }
.email-form .btn { white-space:nowrap; }
.email-capture .fineprint { font-size:.78rem; color:rgba(255,255,255,.78); margin-top:14px; }

/* author bio */
.author-bio { display:flex; gap:20px; align-items:center; background:var(--bg-soft); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; margin:44px 0; }
.author-bio img { width:88px; height:88px; border-radius:50%; object-fit:cover; flex:0 0 auto; }
.author-bio .ab-name { font-size:1.12rem; font-weight:700; margin-bottom:4px; }
.author-bio p { font-size:.93rem; margin:0; color:var(--ink-soft); }
@media (max-width:520px){ .author-bio { flex-direction:column; text-align:center; } }

/* post hero meta row (on dark hero) */
.page-hero .post-meta { color:rgba(255,255,255,.85); justify-content:center; margin-top:16px; }

/* ============================================================================
   PER-DEVICE IMAGE FRAMING (focal point)
   The builder's "Adjust framing" mode drags an image in the live preview to set
   how it sits inside its crop frame, separately for desktop / iPad / mobile.
   product-render.js writes the chosen focal points as inline custom properties
   (--op-d desktop, --op-t tablet, --op-m mobile). These rules read them with a
   graceful fallback so an unset device inherits the next size up
   (mobile <- tablet <- desktop <- centre). Breakpoints 1024 / 600 line up with
   the builder's device widths (1280 / 820 / 390) so the preview matches live.
   ============================================================================ */
.cp-op  { object-position: var(--op-d, 50% 50%); }
.dive .dive-bg.cp-opbg, .itin-photo.cp-opbg { background-position: var(--op-d, 50% 50%); }
@media (max-width:1024px){
  .cp-op  { object-position: var(--op-t, var(--op-d, 50% 50%)); }
  .dive .dive-bg.cp-opbg, .itin-photo.cp-opbg { background-position: var(--op-t, var(--op-d, 50% 50%)); }
}
@media (max-width:600px){
  .cp-op  { object-position: var(--op-m, var(--op-t, var(--op-d, 50% 50%))); }
  .dive .dive-bg.cp-opbg, .itin-photo.cp-opbg { background-position: var(--op-m, var(--op-t, var(--op-d, 50% 50%))); }
}
/* Intro & guide images show at their natural height by default (no crop frame),
   so framing only does something once the user actually frames them. data-framed
   (added by the renderer / on first drag) gives them a capped frame so the focal
   point has an effect, while untouched images on existing pages stay unchanged. */
.intro-media img.cp-op[data-framed] { object-fit:cover; max-height:620px; }
.split-media img.cp-op[data-framed] { object-fit:cover; max-height:640px; }
@media (max-width:1024px){
  .intro-media img.cp-op[data-framed] { max-height:520px; }
  .split-media img.cp-op[data-framed] { max-height:540px; }
}
@media (max-width:600px){
  .intro-media img.cp-op[data-framed] { max-height:430px; }
  .split-media img.cp-op[data-framed] { max-height:460px; }
}

/* ---- renewals notice (admin) ------------------------------------------------
   Colour carries the urgency because that is what gets read at a glance, but the
   text says the same thing on its own — a date and a day count — so it still
   works for anyone who cannot separate the greens from the reds. */
.cp-renew { display: grid; gap: 10px; margin: 0 0 22px; }
.cp-renew-row { display: flex; gap: 12px; align-items: flex-start; padding: 13px 15px;
  border: 1px solid var(--line, #dce0e6); border-left-width: 4px; border-radius: 12px; background: #fff; }
.cp-renew-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; margin-top: 6px; background: #8a93a0; }
.cp-renew-tx { display: grid; gap: 3px; min-width: 0; }
.cp-renew-tx b { font-size: .96rem; }
.cp-renew-when { font-size: .85rem; font-weight: 700; }
.cp-renew-what, .cp-renew-how { font-size: .83rem; color: var(--grey); line-height: 1.5; }
.cp-renew-row.is-watch   { border-left-color: #d99b17; }
.cp-renew-row.is-watch   .cp-renew-dot, .cp-renew-row.is-watch .cp-renew-when { background: #d99b17; color: #8a6210; }
.cp-renew-row.is-watch   .cp-renew-dot { background: #d99b17; }
.cp-renew-row.is-soon    { border-left-color: #b42318; background: #fff8f7; }
.cp-renew-row.is-soon    .cp-renew-dot { background: #b42318; }
.cp-renew-row.is-soon    .cp-renew-when { color: #b42318; }
.cp-renew-row.is-expired { border-left-color: #b42318; background: #fdecea; }
.cp-renew-row.is-expired .cp-renew-dot { background: #b42318; }
.cp-renew-row.is-expired .cp-renew-when { color: #b42318; }
.cp-renew-row.is-unknown .cp-renew-when { color: var(--grey); }
/* ---------------------------------------------------------------------------
   WIDOWS. A single word stranded on its own last line costs a whole row and
   reads as a mistake rather than as a line break. `pretty` pulls that word back
   up; `balance` evens out a short heading across its lines.
   Chat and post bodies are deliberately exempt: those are somebody else own
   words in a bubble that sizes to them, and re-breaking them there is fussier
   than the problem (Josh). Unsupported engines simply ignore both values.
   --------------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 { text-wrap: balance; }
p, li, dd, figcaption, blockquote, label, summary, .sub, .subtitle, .lead, .note, .hint, .tag, .card p { text-wrap: pretty; }
.cm-body, .cm-post-tx, .cm-comment-tx, .rv-text { text-wrap: wrap; }


/* ---- asking about the partner rate, inside the booking card --------------
   Quiet by default: it is an aside for the few people it applies to, not a
   second call to action competing with the button that takes the money. */
.cp-partner-ask{display:block;width:100%;margin:10px 0 0;padding:11px 12px;border:1px dashed rgba(255,255,255,.22);
  border-radius:12px;background:transparent;color:#c9d2dc;font:inherit;font-size:.84rem;line-height:1.45;
  cursor:pointer;text-align:center;transition:border-color .18s,color .18s}
.cp-partner-ask:hover{border-color:rgba(255,255,255,.4);color:#fff}
.cp-partner-form{margin-top:10px;display:flex;flex-direction:column;gap:8px}
.cp-inp{width:100%;padding:11px 12px;border-radius:12px;border:1px solid rgba(255,255,255,.18);
  background:rgba(255,255,255,.06);color:#fff;font:inherit;font-size:.9rem}
.cp-inp::placeholder{color:#8e9aa6}
.cp-inp:focus{outline:none;border-color:rgba(124,226,164,.6)}
.cp-partner-note{margin:2px 0 0;font-size:.82rem;line-height:1.45}
.cp-partner-note.ok{color:#7ce2a4}
.cp-partner-note.bad{color:#ff9aa2}

/* ---- bringing a partner, in the booking card ----------------------------- */
.cp-bring{display:flex;gap:10px;align-items:flex-start;margin:12px 0 0;padding:12px;
  border:1px solid rgba(255,255,255,.16);border-radius:12px;background:rgba(255,255,255,.04);cursor:pointer}
.cp-bring input{width:19px;height:19px;margin:1px 0 0;accent-color:#7ce2a4;flex:0 0 auto;cursor:pointer}
.cp-bring > span{display:flex;flex-direction:column;gap:3px;min-width:0}
.cp-bring b{font-size:.92rem;color:#fff}
.cp-bring > span > span{font-size:.8rem;line-height:1.45;color:#9aa6b2}
.cp-partner-who{display:flex;flex-direction:column;gap:8px;margin-top:8px}

/* ============================================================================
   SIGNING-IN VEIL (site-wide, for the walk back from Apple)
   ----------------------------------------------------------------------------
   signup.html has had one of these in its <head> for a while. Every OTHER page
   had nothing: sign in from a workshop page, approve Apple, and you came back to
   the same marketing page, still logged out, for several seconds with no sign
   anything was happening. Worse than signup.html, because this path fetches the
   account stack (about 270KB) on demand, so the wait is LONGER on the pages where
   somebody is partway through buying.

   Same treatment as signup.html's veil so the two paths feel like one product.
   The ring turns because a still screen reads as a hung one, and the wait here is
   genuinely several seconds: Supabase has to ask Apple to trade the code for a
   session before there is anything to find. We cannot make it quick, so it has to
   at least look alive. */
.cp-signin-veil {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; gap: 10px;
  background: #07080b; color: #b3c1c0;
  font-size: .95rem; letter-spacing: .01em;
}
.cp-signin-veil::before {
  content: ''; width: 15px; height: 15px; border-radius: 50%; flex: 0 0 auto;
  border: 2px solid rgba(179,193,192,.25); border-top-color: #7ce2a4;
  animation: cpSigninSpin .7s linear infinite;
}
@keyframes cpSigninSpin { to { transform: rotate(360deg); } }
/* Slowed rather than stopped: a frozen ring is the exact thing this fixes. */
@media (prefers-reduced-motion: reduce) { .cp-signin-veil::before { animation-duration: 2.4s; } }