/* Edgard Maroun · Modern Earner — "Atelier" design system.
   Classic and quiet: ivory paper, charcoal ink, deep red accents, an editorial serif,
   hairline rules, black cards with bone type. Motion is slow, subtle and optional.
   Brand palette: charcoal #1A1A1A · bone #EDE7DB · deep red #9B1B1B. */

:root {
  --paper: #f8f5ef;
  --paper-2: #f1ebe1;
  --card: #fffdf9;
  --bone: #ede7db;
  --line: #e2d9cb;
  --line-2: #cfc3b1;
  --ink: #1a1a1a;
  --ink-2: #3c3732;
  --muted: #655e56;
  --red: #9b1b1b;
  --red-hi: #7e1414;
  --red-fill: #9b1b1b;
  --red-fill-hi: #7e1414;
  --red-soft: #f4e6e2;
  --rose: #e0a79f;
  --noir: #161514;
  --serif: 'Cormorant Garamond', 'Playfair Display', Georgia, 'Times New Roman', serif;
  --sans: 'Manrope', 'Segoe UI', system-ui, -apple-system, sans-serif;
  --radius: 18px;
  --radius-sm: 12px;
  --gutter: clamp(18px, 4vw, 44px);
  --max: 1160px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
  --shadow: 0 1px 1px rgba(26, 26, 26, 0.03), 0 18px 40px -24px rgba(26, 26, 26, 0.22);
  --shadow-lg: 0 2px 4px rgba(26, 26, 26, 0.04), 0 40px 80px -40px rgba(26, 26, 26, 0.35);
  color-scheme: light;
  --display: var(--serif);
  --body: var(--sans);
  --mono: var(--sans);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--paper); }
body { margin: 0; min-height: 100dvh; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 17px; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
img { max-width: 100%; height: auto; display: block; }
a { color: var(--red); text-underline-offset: 4px; text-decoration-thickness: 1px; }
a:hover { color: var(--red-hi); }
p { margin: 0 0 1em; }
h1, h2, h3 { margin: 0; font-weight: 500; }
strong { font-weight: 700; }
:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; border-radius: 6px; }
[tabindex='-1']:focus { outline: none; }
::selection { background: var(--red-soft); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip-link { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: var(--paper); padding: 10px 14px; border-radius: 8px; font-weight: 600; }
.skip-link:focus { top: 12px; color: var(--paper); }
.wrap { width: 100%; max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.narrow { max-width: 780px; }
.above { position: relative; z-index: 2; }

.demo-banner { position: relative; z-index: 70; background: #fbf1d6; border-bottom: 1px solid #e6cf8f; color: #5b4400; font: 500 13px/1.4 var(--sans); text-align: center; padding: 7px var(--gutter); }
.demo-banner a { color: #5b4400; font-weight: 700; }

/* Header / footer */
.site-header { position: sticky; top: 0; z-index: 50; background: rgba(17, 19, 21, 0.92); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); }
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 16px; }
.mark { display: inline-flex; align-items: baseline; gap: 12px; color: var(--ink); text-decoration: none; }
.mark b { font-family: var(--serif); font-weight: 600; font-size: 23px; letter-spacing: 0.02em; }
.mark span { font: 600 11px var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); }
.mark:hover { color: var(--ink); }
.header-nav { display: flex; align-items: center; gap: 24px; font-size: 14.5px; }
.header-nav a { color: var(--ink-2); text-decoration: none; font-weight: 600; }
.header-nav a:hover { color: var(--red); }
@media (max-width: 560px) { .mark span, .header-nav .hide-sm { display: none; } }
.site-footer { border-top: 1px solid var(--line); margin-top: 80px; color: var(--muted); font-size: 14px; }
.site-footer .wrap { padding-block: 30px 44px; display: flex; flex-wrap: wrap; gap: 12px 24px; justify-content: space-between; align-items: center; }
.site-footer a { color: var(--ink-2); text-decoration: none; }
.site-footer a:hover { color: var(--red); }
.footer-links { display: flex; flex-wrap: wrap; gap: 8px 22px; }

/* Type */
.mono { font-family: var(--sans); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; font-size: 11.5px; }
.eyebrow { display: inline-flex; align-items: center; gap: 12px; font: 600 11.5px/1.4 var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); margin: 0 0 6px; }
.eyebrow::before { content: ''; width: 28px; height: 1px; background: currentColor; }
.display { font-family: var(--serif); font-weight: 500; letter-spacing: -0.01em; line-height: 1.05; color: var(--ink); }
.h-xl { font-size: clamp(42px, 6.4vw, 84px); line-height: 1.02; }
.h-lg { font-size: clamp(34px, 4.6vw, 58px); }
.h-md { font-size: clamp(28px, 3.3vw, 42px); }
.h-sm { font-size: clamp(23px, 2.4vw, 30px); }
.accent { color: var(--red); }
.grad { color: var(--red); font-style: italic; }
.lede { font-size: clamp(17.5px, 1.5vw, 20px); color: var(--ink-2); max-width: 62ch; line-height: 1.65; }
.muted { color: var(--muted); }
.small { font-size: 14.5px; }
.card-title { font-family: var(--serif); font-size: 26px; font-weight: 600; margin: 0 0 12px; line-height: 1.15; }
.mt { margin-top: 16px; }
.mt-lg { margin-top: 34px; }

/* Buttons */
.btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 54px; padding: 15px 28px; border-radius: 999px; border: 1px solid var(--ink); background: var(--ink); color: var(--paper); font: 600 15.5px/1.25 var(--sans); letter-spacing: 0.02em; text-decoration: none; text-align: center; cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease), border-color 200ms var(--ease), transform 200ms var(--ease); box-shadow: 0 14px 30px -18px rgba(26, 26, 26, 0.55); }
.btn:hover { background: var(--red-fill); border-color: var(--red); color: #fff; transform: translateY(-1px); }
.btn .arrow { transition: transform 200ms var(--ease); }
.btn:hover .arrow { transform: translateX(4px); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); box-shadow: none; }
.btn-ghost:hover { background: var(--card); color: var(--ink); border-color: var(--ink); }
.btn[disabled] { background: var(--paper-2); color: var(--muted); border-color: var(--line); box-shadow: none; cursor: not-allowed; transform: none; }
.btn-block { width: 100%; }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.reassure { margin-top: 16px; font-size: 13.5px; letter-spacing: 0.04em; color: var(--muted); }

/* Surfaces */
.card { position: relative; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: clamp(22px, 3vw, 34px); box-shadow: var(--shadow); }
.section { position: relative; padding-block: clamp(64px, 9vw, 120px); }
.section-alt { background: var(--paper-2); }
.section-dark { background: var(--noir); color: var(--bone); }
.section-dark .display, .section-dark h2, .section-dark h3 { color: var(--bone); }
.section-dark .lede, .section-dark p { color: rgba(237, 231, 219, 0.82); }
.section-dark .eyebrow { color: var(--rose); }
.section-dark .caplist li { background: rgba(255, 255, 255, 0.04); border-color: rgba(237, 231, 219, 0.14); }
.section-dark .caplist .desc { color: rgba(237, 231, 219, 0.78); }
.section-head { max-width: 760px; margin-bottom: clamp(26px, 4vw, 44px); }
.section-head .display { margin-top: 12px; }
.section-head .lede { margin-top: 16px; }
.grid-3 { display: grid; gap: 18px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.tag { display: inline-block; font: 600 11px/1 var(--sans); letter-spacing: 0.16em; text-transform: uppercase; padding: 8px 12px; border-radius: 999px; border: 1px solid var(--line-2); color: var(--ink-2); background: var(--card); }
.tag-gold, .tag-brand { border-color: rgba(155, 27, 27, 0.35); color: var(--red); background: var(--red-soft); }
.kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.preview-note { border: 1px dashed #d1b061; background: #fcf5e1; color: #4f3b00; border-radius: var(--radius-sm); padding: 12px 16px; font-size: 14px; }
.preview-note strong { color: #3d2d00; }
.preview-note ul { margin: 8px 0 0; padding-left: 20px; }
.definition { font-family: var(--serif); font-size: clamp(24px, 2.7vw, 34px); line-height: 1.3; font-style: italic; padding-left: 24px; border-left: 2px solid var(--red); }
.definition small { display: block; margin-top: 14px; font: 600 11.5px var(--sans); font-style: normal; letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); }

/* Motion: slow and quiet */
.pre-reveal { opacity: 0; transform: translateY(18px); }
.revealed { opacity: 1; transform: none; transition: opacity 1200ms var(--ease), transform 1200ms var(--ease); }
@keyframes rise { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.rise { animation: rise 1100ms var(--ease) both; }
.rise-2 { animation-delay: 140ms; }
.rise-3 { animation-delay: 280ms; }
.rise-4 { animation-delay: 420ms; }

/* ---------- Landing: intro + video ---------- */
.intro { text-align: center; padding-block: clamp(34px, 6vw, 70px) clamp(18px, 3vw, 30px); }
.intro h1 { margin: 0 auto; max-width: 18ch; }
.intro h1 .second { display: block; }
.intro .video-stage { max-width: 920px; margin: clamp(24px, 4vw, 42px) auto 0; }
.video-shell { position: relative; border-radius: 20px; padding: 10px; background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-lg); }
.video-inner { position: relative; aspect-ratio: 16 / 9; border-radius: 12px; overflow: hidden; background: linear-gradient(160deg, #22201e, #121110); }
.video-inner iframe, .video-inner video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-inner .corner { display: none; }
.video-play { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 16px; width: 100%; border: 0; cursor: pointer; background: transparent; color: var(--bone); font: 600 15px var(--sans); letter-spacing: 0.04em; }
.video-play .disc, .video-placeholder .disc { width: 78px; height: 78px; border-radius: 50%; display: grid; place-items: center; margin: 0 auto; background: var(--bone); color: var(--ink); font-size: 22px; box-shadow: 0 0 0 10px rgba(237, 231, 219, 0.12); transition: transform 600ms var(--ease); }
.video-play:hover .disc { transform: scale(1.06); }
/* With a picture: a large glass play button sits where the config says (Edgard, 2026-09-26: on his face, highlighted, not solid red). */
.video-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.video-inner.has-poster { container-type: inline-size; }
.video-inner.has-poster .video-play { display: block; padding: 0; }
.video-inner.has-poster .video-play > span:not(.disc) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.video-inner.has-poster .video-play .disc { position: absolute; left: var(--play-x, 50%); top: var(--play-y, 50%); translate: -50% -50%; width: var(--play-size, 20cqw); height: auto; aspect-ratio: 1; margin: 0; padding-left: .14em; background: rgba(22, 21, 20, .28); -webkit-backdrop-filter: blur(7px) saturate(1.15); backdrop-filter: blur(7px) saturate(1.15); border: .5cqw solid rgba(237, 231, 219, .95); color: var(--bone); font-size: calc(var(--play-size, 20cqw) * .3); text-shadow: 0 1px 8px rgba(0, 0, 0, .45); box-shadow: 0 0 3cqw rgba(155, 27, 27, .75), 0 0 0 0 rgba(155, 27, 27, .6); animation: me-play-pulse 2.4s ease-out infinite; }
.video-inner.has-poster .video-play:hover .disc, .video-inner.has-poster .video-play:focus-visible .disc { background: rgba(155, 27, 27, .5); }
@keyframes me-play-pulse { 0% { box-shadow: 0 0 3cqw rgba(155, 27, 27, .75), 0 0 0 0 rgba(155, 27, 27, .6); } 70%, 100% { box-shadow: 0 0 3cqw rgba(155, 27, 27, .75), 0 0 0 4cqw rgba(155, 27, 27, 0); } }
@media (prefers-reduced-motion: reduce) { .video-inner.has-poster .video-play .disc { animation: none; } }
.video-placeholder { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: 10px; padding: 24px; color: var(--bone); }
.video-placeholder .mono, .video-placeholder .muted { color: rgba(237, 231, 219, 0.72); }
@media (max-width: 560px) {
  .video-placeholder { gap: 6px; padding: 12px; font-size: 14px; }
  .video-placeholder .small { display: none; }
  .video-play .disc, .video-placeholder .disc { width: 54px; height: 54px; font-size: 16px; box-shadow: 0 0 0 6px rgba(237, 231, 219, 0.12); }
  .video-shell { padding: 6px; border-radius: 16px; }
}
.video-slot { border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); background: var(--card); }
.video-frame { position: relative; aspect-ratio: 16 / 9; background: #111; }
.video-frame iframe, .video-frame video { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-text { padding: clamp(20px, 3vw, 30px); }
.video-text p:last-child { margin-bottom: 0; }

/* ---------- Landing: the shift, as eight turning cards ---------- */
.hook { text-align: center; padding-block: clamp(30px, 5vw, 64px) clamp(40px, 6vw, 90px); }
.hook h2 { max-width: 20ch; margin: 10px auto 10px; }
.hook .hint { font-size: 13.5px; color: var(--muted); margin: 0 0 22px; }
.shift-grid { list-style: none; margin: 0 auto; padding: 0; max-width: 980px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; perspective: 1600px; }
@media (max-width: 860px) { .shift-grid { grid-template-columns: repeat(2, 1fr); gap: 10px; } }
.tile3d { position: relative; min-height: 158px; }
.tile3d button { all: unset; box-sizing: border-box; display: block; width: 100%; height: 100%; min-height: 158px; cursor: pointer; border-radius: 16px; }
.tile3d button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.tile3d .spin { display: block; position: relative; width: 100%; height: 100%; min-height: 158px; transform-style: preserve-3d; transition: transform 1300ms var(--ease); }
.tile3d.turned .spin { transform: rotateY(180deg); }
.tile3d .side { position: absolute; inset: 0; display: grid; align-content: space-between; gap: 10px; padding: 16px 16px 18px; border-radius: 16px; text-align: left; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.tile3d .side small, .tile3d .side span { display: block; }
.tile3d .side small { font: 600 10.5px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; }
.tile3d .side span { font-family: var(--serif); font-size: clamp(19px, 1.8vw, 22px); line-height: 1.18; }
.tile3d .was { background: linear-gradient(170deg, #fbf9f5, #efe9df); border: 1px solid var(--line); color: var(--muted); box-shadow: var(--shadow); }
.tile3d .was small { color: var(--muted); }
.tile3d .was span { text-decoration: line-through; text-decoration-color: rgba(155, 27, 27, 0.45); text-decoration-thickness: 1px; }
.tile3d .now { transform: rotateY(180deg); background: linear-gradient(165deg, #242220, #121110); color: var(--bone); box-shadow: 0 26px 50px -30px rgba(26, 26, 26, 0.8); }
.tile3d .now small { color: var(--rose); }
.tile3d .now::after { content: ''; position: absolute; left: 16px; right: 16px; bottom: 0; height: 2px; background: var(--red-fill); }
.hook-line { font-family: var(--serif); font-size: clamp(23px, 2.7vw, 34px); line-height: 1.3; max-width: 30ch; margin: clamp(30px, 4vw, 46px) auto 0; }
.hook-line em { color: var(--red); }
.hook .btn { margin-top: 28px; }
.shift-arrow { display: none; }

/* ---------- Assessment ---------- */
.quiz { min-height: calc(100dvh - 70px); display: grid; grid-template-rows: auto 1fr; }
.quiz-head { padding: 22px var(--gutter) 0; max-width: 860px; margin: 0 auto; width: 100%; }
.orbit { display: flex; align-items: center; gap: 16px; }
.orbit svg { width: 58px; height: 58px; flex: none; transform: rotate(-90deg); }
.orbit .track { fill: none; stroke: var(--line); stroke-width: 3; }
.orbit .val { fill: none; stroke: var(--red); stroke-width: 3; stroke-linecap: round; transition: stroke-dasharray 900ms var(--ease); }
.orbit .meta { display: grid; gap: 2px; }
.orbit .meta b { font-family: var(--serif); font-size: 22px; font-weight: 600; }
.orbit .meta span { font: 600 11px var(--sans); letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); }
.ticks { display: flex; gap: 6px; margin-top: 18px; }
.ticks i { flex: 1; height: 2px; background: var(--line); transition: background 600ms; }
.ticks i.done { background: var(--ink); }
.ticks i.now { background: var(--red-fill); }
.quiz-body { max-width: 860px; width: 100%; margin: 0 auto; padding: clamp(28px, 5vh, 60px) var(--gutter) 170px; }
.q-card { transition: transform 700ms var(--ease), opacity 600ms var(--ease); }
.q-card.out-fwd { transform: translateX(-24px); opacity: 0; }
.q-card.out-back { transform: translateX(24px); opacity: 0; }
.q-card.in-fwd { transform: translateX(24px); opacity: 0; transition: none; }
.q-card.in-back { transform: translateX(-24px); opacity: 0; transition: none; }
.q-label { font: 600 11.5px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; }
.q-legend { font-family: var(--serif); font-size: clamp(28px, 3.6vw, 42px); font-weight: 500; line-height: 1.15; margin-bottom: 26px; padding: 0; color: var(--ink); }
.q-note { font-size: 14.5px; color: var(--muted); margin: -12px 0 18px; }
fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.options { display: grid; gap: 10px; }
.opt { position: relative; display: block; }
.opt input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.opt label { position: relative; display: grid; grid-template-columns: 34px 1fr; gap: 16px; align-items: center; min-height: 64px; padding: 16px 20px; border-radius: 14px; cursor: pointer; background: var(--card); border: 1px solid var(--line); color: var(--ink); font-size: 16.5px; line-height: 1.45; font-weight: 500; transition: border-color 200ms var(--ease), box-shadow 200ms var(--ease), transform 200ms var(--ease); }
.opt label:hover { border-color: var(--line-2); box-shadow: var(--shadow); transform: translateY(-1px); }
.opt .key { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; font: 600 14px var(--serif); color: var(--muted); border: 1px solid var(--line-2); transition: all 200ms var(--ease); }
.opt input:checked + label { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink), var(--shadow); }
.opt input:checked + label .key { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.opt input:focus-visible + label { outline: 2px solid var(--red); outline-offset: 3px; }
.perspective { margin-top: 20px; padding: 20px 24px; border-radius: 14px; background: var(--noir); color: var(--bone); animation: rise 900ms var(--ease) both; }
.perspective .mono { color: var(--rose); }
.perspective p { margin: 8px 0 0; font-family: var(--serif); font-size: clamp(19px, 2vw, 22px); line-height: 1.45; color: var(--bone); }
.field-error, .form-error { color: var(--red); font-size: 15px; margin-top: 12px; font-weight: 600; }
.form-error { background: var(--red-soft); border: 1px solid rgba(155, 27, 27, 0.3); padding: 12px 14px; border-radius: 12px; }
.form-error:empty, .field-error:empty { display: none; }
.quiz-nav { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: linear-gradient(180deg, rgba(17, 19, 21, 0), rgba(17, 19, 21, 0.97) 34%); padding-bottom: env(safe-area-inset-bottom); }
.quiz-nav .wrap { max-width: 860px; display: flex; justify-content: space-between; gap: 12px; padding-block: 28px 18px; }
.quiz-nav .btn { min-width: 130px; }
.quiz-nav .btn-next { flex: 0 1 260px; }
@media (max-width: 520px) { .quiz-nav .btn-next { flex: 1; } }

/* Chapter flip cards */
.chapter { text-align: center; }
.chapter h1 { margin: 12px auto 24px; max-width: 18ch; }
.flip { perspective: 1800px; max-width: 580px; margin: 0 auto; }
.flip-inner { position: relative; min-height: 240px; transform-style: preserve-3d; transition: transform 1200ms var(--ease); }
.flip.flipped .flip-inner { transform: rotateY(180deg); }
.flip .face { position: absolute; inset: 0; display: grid; align-content: center; gap: 14px; border-radius: 20px; padding: 32px; backface-visibility: hidden; -webkit-backface-visibility: hidden; text-align: left; }
.flip .face .label { font: 600 11px var(--sans); letter-spacing: 0.22em; text-transform: uppercase; }
.flip .face p { margin: 0; font-family: var(--serif); font-size: clamp(25px, 2.8vw, 33px); line-height: 1.22; }
.flip .old { background: linear-gradient(170deg, #fbf9f5, #efe9df); border: 1px solid var(--line); color: var(--ink-2); box-shadow: var(--shadow); }
.flip .old .label { color: var(--muted); }
.flip .new { transform: rotateY(180deg); background: linear-gradient(165deg, #242220, #121110); color: var(--bone); box-shadow: 0 40px 80px -40px rgba(26, 26, 26, 0.7); }
.flip .new .label { color: var(--rose); }
.flip .new::after { content: ''; position: absolute; left: 32px; right: 32px; bottom: 0; height: 2px; background: var(--red-fill); }
.flip-toggle { margin-top: 14px; min-height: 44px; padding: 10px 18px; font-size: 14px; }
.chapter .note { max-width: 50ch; margin: 22px auto 0; color: var(--ink-2); }
.chapter .btn-row { justify-content: center; margin-top: 24px; }

/* Gate */
.gate-reveal { text-align: center; }
.sigil { position: relative; width: 120px; height: 120px; margin: 0 auto 18px; }
.sigil i { position: absolute; inset: 0; border-radius: 50%; border: 1px solid var(--line-2); }
.sigil i:nth-child(2) { inset: 15px; border-color: rgba(155, 27, 27, 0.35); animation: breathe 5s ease-in-out infinite; }
.sigil i:nth-child(3) { inset: 30px; border-color: var(--line-2); }
.sigil b { position: absolute; inset: 45px; border-radius: 50%; background: var(--red-fill); }
@keyframes breathe { 50% { transform: scale(1.06); opacity: 0.6; } }
.score-line { display: flex; flex-wrap: wrap; justify-content: center; align-items: baseline; gap: 6px 14px; margin-top: 18px; }
.score-line b { font-family: var(--serif); font-size: 60px; font-weight: 600; line-height: 1; }
.score-line span { color: var(--ink-2); }
.reveal-list { list-style: none; margin: 18px 0; padding: 0; display: grid; text-align: left; }
.reveal-list li { display: grid; grid-template-columns: 22px 1fr; gap: 12px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--line); font-weight: 500; }
.reveal-list li::before { content: '—'; color: var(--red); }
.field { margin-bottom: 16px; text-align: left; }
.field-label { display: block; font-weight: 600; margin-bottom: 7px; font-size: 14.5px; }
.optional { font-weight: 500; color: var(--muted); }
.input { width: 100%; min-height: 56px; padding: 13px 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); color: var(--ink); font: 17px var(--sans); transition: border-color 300ms, box-shadow 300ms; }
.input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 4px rgba(26, 26, 26, 0.08); }
.input[aria-invalid='true'] { border-color: var(--red); }
.check { display: grid; grid-template-columns: 26px 1fr; gap: 12px; align-items: start; padding: 10px 0; cursor: pointer; font-size: 15px; color: var(--ink-2); text-align: left; }
.check input { width: 20px; height: 20px; margin: 3px 0 0; accent-color: var(--red); }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.service-note { font-size: 14px; color: var(--muted); margin: 6px 0 12px; text-align: left; }
.spinner { width: 18px; height: 18px; border-radius: 50%; border: 2px solid rgba(17, 19, 21, 0.35); border-top-color: var(--paper); animation: spin 900ms linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Ready ---------- */
.ready-hero { text-align: center; padding-block: clamp(44px, 7vw, 96px) 26px; }
.ready-hero .display { max-width: 22ch; margin: 18px auto; }
.ready-hero .display .lead { display: block; font: 600 11.5px var(--sans); letter-spacing: 0.22em; text-transform: uppercase; color: var(--red); margin-bottom: 14px; }
.ready-hero .lede { margin-inline: auto; }
.check-badge { width: 78px; height: 78px; margin: 0 auto; }
.check-badge circle { fill: none; stroke: var(--red); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 1200ms var(--ease) forwards; }
.check-badge path { fill: none; stroke: var(--ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: draw 800ms var(--ease) 900ms forwards; }
@keyframes draw { to { stroke-dashoffset: 0; } }
.inbox-steps { counter-reset: s; list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.inbox-steps li { counter-increment: s; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: start; }
.inbox-steps li::before { content: counter(s, upper-roman); font-family: var(--serif); font-size: 20px; color: var(--red); line-height: 1.4; }
details.correct { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
details.correct summary { cursor: pointer; font-weight: 600; min-height: 44px; display: flex; align-items: center; }
.wrap.narrow > .preview-note { margin-top: 18px; }

/* ---------- Result ---------- */
.result-hero { padding-block: clamp(44px, 7vw, 96px) 34px; }
.result-hero .pattern-name { font-family: var(--serif); font-size: clamp(46px, 7vw, 96px); font-weight: 500; line-height: 0.98; margin: 16px 0 22px; }
.result-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 900px) { .result-grid { grid-template-columns: 1fr; } }
.dial { max-width: 340px; margin: 0 auto; text-align: center; }
.dial-ring { position: relative; max-width: 300px; margin: 0 auto; filter: drop-shadow(0 30px 40px rgba(26, 26, 26, 0.12)); }
.dial svg { width: 100%; height: auto; display: block; }
.dial .track { fill: var(--card); stroke: var(--line); stroke-width: 7; }
.dial .val { fill: none; stroke: var(--red); stroke-width: 7; stroke-linecap: round; transition: stroke-dasharray 2000ms var(--ease) 300ms; }
.dial .readout { position: absolute; inset: 0; display: grid; place-content: center; }
.dial .readout b { display: block; font-family: var(--serif); font-size: clamp(58px, 7vw, 76px); font-weight: 600; line-height: 1; }
.dial .readout span { display: block; font: 600 11px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 8px; }
.dial .togo { margin: 18px 0 0; font-family: var(--serif); font-size: 23px; color: var(--ink-2); }
.pattern-video-sec { border-top: 0; padding-top: 0; }
.pattern-video { max-width: 780px; margin: 0 auto; }
.stage-list { list-style: none; margin: 0; padding: 0; display: grid; }
.stage-list li { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; padding: 12px 2px; border-bottom: 1px solid var(--line); font-weight: 500; font-size: 15.5px; }
.stage-list li span { font: 600 11px var(--sans); letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); display: inline-flex; align-items: center; gap: 10px; }
.stage-list li span::before { content: ''; display: inline-block; width: 38px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, var(--ink) var(--fill, 0%), var(--line) var(--fill, 0%)); }
.stage-list li.s0 span::before { --fill: 8%; } .stage-list li.s1 span::before { --fill: 36%; } .stage-list li.s2 span::before { --fill: 68%; } .stage-list li.s3 span::before { --fill: 100%; }
.stage-list li.s3 span { color: var(--ink); }
.r-section { padding-block: clamp(44px, 6vw, 76px); border-top: 1px solid var(--line); }
.r-section .display { margin: 12px 0 18px; }
.evidence { display: grid; gap: 10px; margin: 14px 0 20px; }
.evidence .card { padding: 16px 20px; box-shadow: none; }
.evidence .q { font-size: 14px; color: var(--muted); margin-bottom: 4px; }
.evidence .a { font-family: var(--serif); font-size: 21px; margin: 0; }
.contrast { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-top: 20px; }
@media (max-width: 680px) { .contrast { grid-template-columns: 1fr; } }
.contrast .card p { margin: 0; font-family: var(--serif); font-size: 21px; line-height: 1.4; }
.contrast .card .lbl { font: 600 11px var(--sans); letter-spacing: 0.2em; text-transform: uppercase; margin-bottom: 12px; }
.contrast .before { background: var(--paper-2); box-shadow: none; }
.contrast .before .lbl { color: var(--muted); }
.contrast .after { background: var(--noir); border-color: var(--noir); color: var(--bone); }
.contrast .after p { color: var(--bone); }
.contrast .after .lbl { color: var(--rose); }
.first-move { background: var(--noir); border-color: var(--noir); color: var(--bone); }
.first-move .mono { color: var(--rose); }
.first-move p { font-family: var(--serif); font-size: clamp(24px, 2.6vw, 32px); line-height: 1.3; margin: 12px 0 0; color: var(--bone); }
.perspectives details { border-bottom: 1px solid var(--line); }
.perspectives summary { cursor: pointer; list-style: none; padding: 16px 2px; font-weight: 500; min-height: 52px; display: grid; grid-template-columns: 38px 1fr auto; gap: 10px; align-items: center; }
.perspectives summary::-webkit-details-marker { display: none; }
.perspectives summary i { font-family: var(--serif); font-style: normal; font-size: 18px; color: var(--red); }
.perspectives summary::after { content: '+'; color: var(--red); font-size: 22px; transition: transform 200ms var(--ease); }
.perspectives details[open] summary::after { transform: rotate(45deg); }
.perspectives .body { padding: 0 2px 18px 50px; color: var(--ink-2); }
.perspectives .body p { margin: 0 0 8px; }
.learn-list { list-style: none; margin: 16px 0; padding: 0; display: grid; }
.learn-list li { padding: 16px 2px; border-bottom: 1px solid var(--line); }
.learn-list h3 { font-family: var(--serif); font-size: 22px; margin-bottom: 4px; }
.learn-list p { margin: 0; color: var(--ink-2); }
.soft-offer { background: var(--noir); border-color: var(--noir); color: var(--bone); box-shadow: var(--shadow-lg); }
.soft-offer .display { color: var(--bone); }
.soft-offer .lede, .soft-offer p { color: rgba(237, 231, 219, 0.85); }
.soft-offer .tag { background: transparent; color: var(--rose); border-color: rgba(224, 167, 159, 0.4); }
.soft-offer .btn { background: var(--bone); color: var(--ink); border-color: var(--bone); margin-top: 8px; }
.soft-offer .btn:hover { background: var(--red-fill); border-color: var(--red); color: #fff; }
.soft-offer .video-slot { border-color: rgba(237, 231, 219, 0.14); background: rgba(255, 255, 255, 0.04); margin-top: 20px; }
.soft-offer .video-text { color: rgba(237, 231, 219, 0.82); }
.signoff { font-family: var(--serif); font-style: italic; font-size: 34px; margin-top: 6px; }
.state-box { text-align: center; padding-block: 14vh; }
.state-box .display { margin: 14px 0; }
.skeleton { height: 16px; border-radius: 8px; background: linear-gradient(90deg, var(--paper-2), #fff, var(--paper-2)); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; margin: 12px 0; }
@keyframes shimmer { to { background-position: -200% 0; } }

/* ---------- Membership page ---------- */
.hero { padding-block: clamp(36px, 6vw, 80px) clamp(40px, 6vw, 70px); }
.hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
@media (max-width: 960px) { .hero-grid { grid-template-columns: 1fr; } }
.hero .lede { margin: 22px 0 28px; }
.capmap { width: 100%; max-width: 480px; aspect-ratio: 1; margin-inline: auto; }
.capmap svg { width: 100%; height: 100%; overflow: visible; }
.capmap .ring { stroke: var(--line); fill: none; }
.capmap .edge { stroke: var(--line); stroke-width: 1; fill: none; stroke-dasharray: 1; stroke-dashoffset: 1; }
.capmap.drawn .edge { stroke-dashoffset: 0; transition: stroke-dashoffset 2000ms var(--ease); }
.capmap .node-g { opacity: 0; }
.capmap.drawn .node-g { opacity: 1; transition: opacity 1200ms var(--ease); }
.capmap .node { fill: var(--card); stroke: var(--line-2); stroke-width: 1; }
.capmap .node-label { fill: var(--ink); font: 600 11.5px var(--sans); }
.capmap .hub { fill: var(--ink); stroke: var(--ink); }
.capmap .hub-text { fill: var(--paper); font: 600 11px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; }
.hero-map-caption { margin-top: 10px; text-align: center; font-size: 14.5px; color: var(--muted); }
.caplist { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.caplist li { display: grid; grid-template-columns: auto 1fr; gap: 2px 14px; padding: 14px 16px; border-radius: 12px; border: 1px solid var(--line); background: var(--card); }
.caplist .dot { width: 8px; height: 8px; margin-top: 10px; border-radius: 50%; background: var(--red-fill); }
.caplist .name { font-weight: 700; }
.caplist .desc { grid-column: 2; font-size: 15px; color: var(--ink-2); }
.audience { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.audience .card h3 { font-family: var(--serif); font-size: 23px; margin-bottom: 6px; }
.audience .card p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.journey { list-style: none; counter-reset: j; margin: 0; padding: 0; display: grid; gap: 20px; }
.journey > li { counter-increment: j; display: grid; grid-template-columns: 48px 1fr; gap: 14px; }
.journey > li::before { content: counter(j, upper-roman); font-family: var(--serif); font-size: 24px; color: var(--red); line-height: 1.2; }
.journey h3 { font-family: var(--serif); font-size: 24px; margin-bottom: 4px; }
.journey p { color: var(--ink-2); margin: 0 0 6px; }
.area-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.area-grid h3 { font-family: var(--serif); font-size: 22px; margin-bottom: 6px; }
.area-grid p { margin: 0; font-size: 15px; color: var(--ink-2); }
.benefits { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.benefits h3 { font-family: var(--serif); font-size: 24px; margin-bottom: 12px; }
.benefits ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.benefits li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; font-size: 15px; color: var(--ink-2); }
.benefits li::before { content: '—'; color: var(--red); }
.benefits li.is-call { color: var(--ink); font-weight: 700; }
.call-feature { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; }
@media (max-width: 860px) { .call-feature { grid-template-columns: 1fr; } }
.offer { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(20px, 4vw, 48px); align-items: start; }
@media (max-width: 900px) { .offer { grid-template-columns: 1fr; } }
.price-card { position: sticky; top: 96px; }
.price-lines { list-style: none; margin: 16px 0; padding: 0; }
.price-lines li { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--line); font-variant-numeric: tabular-nums; }
.price-lines li.total { border-bottom: 0; padding-top: 18px; align-items: baseline; font-weight: 600; }
.price-lines li.total b { font-family: var(--serif); font-size: 46px; font-weight: 600; }
.price-lines .saving { color: var(--red); font-weight: 600; }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; padding: 18px 0; font-weight: 600; min-height: 48px; }
.faq details p { color: var(--ink-2); }

/* ---------- Simple / legal pages ---------- */
.simple-hero { padding-block: clamp(50px, 9vw, 120px) 30px; }
.simple-hero .display { max-width: 20ch; margin: 16px 0 22px; }
.portrait { display: flex; align-items: center; gap: 18px; margin: 28px 0; }
.portrait img { width: 92px; height: 92px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); padding: 3px; background: var(--card); }
.prose { max-width: 740px; }
.prose p, .prose li { color: var(--ink-2); font-size: 17px; }
.prose h2 { font-family: var(--serif); font-size: clamp(28px, 3vw, 36px); font-weight: 500; margin: 48px 0 12px; }
.prose h3 { font-family: var(--serif); font-size: 23px; margin: 26px 0 8px; }
.prose table { width: 100%; border-collapse: collapse; margin: 14px 0; font-size: 15px; }
.prose th, .prose td { text-align: left; padding: 11px 8px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-2); }
.prose th { font: 600 11px var(--sans); letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.table-wrap { overflow-x: auto; }
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 10px; }
.toc a { text-decoration: none; }

/* ---------- Income Audit ---------- */
.audit { max-width: 720px; margin: 0 auto; padding: clamp(28px, 5vh, 60px) var(--gutter) 120px; }
.audit-screen { display: none; }
.audit-screen.on { display: block; animation: rise 900ms var(--ease) both; }
.audit .q { font-family: var(--serif); font-size: clamp(30px, 3.6vw, 42px); font-weight: 500; line-height: 1.15; margin: 12px 0; }
.srow { display: grid; grid-template-columns: 1fr auto auto; gap: 10px; align-items: center; margin-bottom: 10px; }
@media (max-width: 520px) { .srow { grid-template-columns: 1fr auto; } .srow .del { grid-column: 2; grid-row: 1; } .srow .tog { grid-column: 1 / -1; } }
.amt { display: flex; align-items: center; gap: 8px; padding: 0 16px; border-radius: 12px; border: 1px solid var(--line-2); background: var(--card); }
.amt span { font-family: var(--serif); color: var(--muted); font-size: 22px; }
.amt input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ink); font: 500 22px var(--serif); padding: 12px 0; }
.amt:focus-within { border-color: var(--ink); }
.tog { display: flex; border: 1px solid var(--line-2); border-radius: 999px; overflow: hidden; background: var(--card); }
.tog button { all: unset; cursor: pointer; padding: 10px 14px; font: 600 13px var(--sans); color: var(--muted); }
.tog button.on { background: var(--ink); color: var(--paper); }
.tog button:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.del { all: unset; cursor: pointer; width: 44px; height: 44px; display: grid; place-items: center; color: var(--muted); border-radius: 50%; font-size: 22px; }
.del:hover { color: var(--red); background: var(--red-soft); }
.del:focus-visible { outline: 2px solid var(--red); }
.addbtn { width: 100%; min-height: 50px; border-radius: 12px; border: 1px dashed var(--line-2); background: transparent; color: var(--ink-2); font: 600 14px var(--sans); cursor: pointer; }
.addbtn:hover { border-color: var(--ink); color: var(--ink); }
.liveread { margin: 24px 0; padding: 18px 22px; border-radius: 14px; background: var(--card); border: 1px solid var(--line); display: flex; align-items: baseline; gap: 14px; }
.liveread b { font-family: var(--serif); font-size: 50px; font-weight: 600; line-height: 1; }
.liveread small { color: var(--muted); font-size: 14.5px; }
.bigmoney { display: flex; align-items: center; gap: 10px; padding: 0 20px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); margin-top: 16px; }
.bigmoney span { font-family: var(--serif); font-size: 36px; color: var(--muted); }
.bigmoney input { flex: 1; min-width: 0; background: transparent; border: 0; outline: none; color: var(--ink); font: 500 40px var(--serif); padding: 14px 0; }
.bigmoney:focus-within { border-color: var(--ink); }
.tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 18px; }
.tile { all: unset; box-sizing: border-box; cursor: pointer; padding: 20px; border-radius: 14px; border: 1px solid var(--line); background: var(--card); display: grid; gap: 6px; transition: border-color 400ms, box-shadow 400ms; }
.tile b { font-family: var(--serif); font-size: 32px; font-weight: 600; }
.tile small { color: var(--muted); font-size: 13.5px; }
.tile:hover { border-color: var(--line-2); box-shadow: var(--shadow); }
.tile[aria-pressed='true'] { border-color: var(--ink); box-shadow: 0 0 0 1px var(--ink); }
.tile:focus-visible { outline: 2px solid var(--red); }
.audit-stats { display: grid; margin: 20px 0; }
.audit-stats div { display: flex; justify-content: space-between; gap: 16px; align-items: baseline; padding: 14px 2px; border-bottom: 1px solid var(--line); }
.audit-stats span { color: var(--ink-2); font-size: 15px; }
.audit-stats b { font-family: var(--serif); font-size: 26px; font-weight: 600; white-space: nowrap; }
.audit-stats b.warn { color: var(--red); }
.headnum { font-family: var(--serif); font-size: clamp(84px, 13vw, 140px); font-weight: 600; line-height: 0.9; }
.headnum small { font-size: 0.42em; color: var(--muted); }
.audit-reveal { transition: filter 800ms var(--ease), opacity 800ms var(--ease); }
.audit-reveal.locked { filter: blur(9px); opacity: 0.45; pointer-events: none; user-select: none; }
.audit .ticks { margin: 0 0 8px; }
.audit .liveread + .field-error { margin-top: -8px; }
.gate-reveal .lede { margin-inline: auto; }
.gate-reveal .card { text-align: left; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 1ms !important; animation-delay: 0ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; }
  .pre-reveal { opacity: 1; transform: none; }
  .flip-inner { min-height: 0; display: grid; gap: 12px; transform: none !important; }
  .flip .face { position: relative; transform: none; backface-visibility: visible; }
  .flip.flipped .face.old, .flip:not(.flipped) .face.new { display: none; } /* one face at a time */
  .tile3d .spin { min-height: 0; display: grid; gap: 8px; transform: none !important; }
  .tile3d .side { position: relative; transform: none; backface-visibility: visible; }
  .q-card.out-fwd, .q-card.out-back, .q-card.in-fwd, .q-card.in-back { transform: none; }
}
@media print { .demo-banner, .site-header, .site-footer, .quiz-nav { display: none !important; } }
@media (max-width: 560px) {
  .tile3d, .tile3d button, .tile3d .spin { min-height: 128px; }
  .tile3d .side { padding: 13px 13px 15px; gap: 6px; }
  .tile3d .side span { font-size: 17.5px; }
  .tile3d .side small { letter-spacing: 0.14em; }
}
.check-badge { display: block; margin-bottom: 18px; }
.ready-hero .eyebrow { justify-content: center; }
.score-line span { flex-basis: 100%; }
@media (max-width: 560px) {
  .audit-stats div { flex-wrap: wrap; gap: 2px 16px; }
  .audit-stats span { flex: 1 1 100%; }
  .audit-stats b { font-size: 24px; }
}
/* Landing: keep headline and video together in the first view on desktop */
.intro h1.h-xl { font-size: clamp(40px, 5vw, 66px); max-width: 20ch; }
.intro .video-stage { max-width: min(820px, calc((100dvh - 290px) * 16 / 9)); min-width: min(100%, 520px); }
.dial .togo { line-height: 1.3; }
.dial + .small { text-align: center; max-width: 42ch; margin-inline: auto; }
.audit .headnum { margin: 18px 0 0; line-height: 0.8; }
.audit .headnum + .lede { margin-top: 18px; }
.card .video-slot { border: 0; background: transparent; }
.card .video-slot .video-text { padding: 0; }
/* Form field boundaries meet the 3:1 non-text contrast minimum. */
.input, .amt, .bigmoney, .tog, .check input, .opt .key { border-color: #8c8173; }

/* Keep the landing hero self-contained on a phone: message, video, and next step. */
.intro-start { margin-top: 28px; }
@media (max-width: 560px) {
  .intro {
    min-height: calc(100dvh - 132px);
    display: flex;
    align-items: center;
    padding-block: 22px 26px;
  }
  .intro .wrap { display: flex; flex-direction: column; align-items: center; }
  .intro h1.h-xl { font-size: clamp(34px, 10vw, 40px); line-height: 0.98; max-width: 17ch; }
  .intro .video-stage { width: 100%; max-width: none; min-width: 0; margin-top: 18px; }
  .intro-start { width: 100%; margin-top: 18px; }
}

/* ===== Launch polish: compact chrome, first-screen hero, refined details ===== */
:root { --header-h: 58px; --banner-h: 0px; }
body:has(.demo-banner) { --banner-h: 30px; }
.demo-banner { height: var(--banner-h); padding: 7px var(--gutter); font-size: 12px; line-height: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.site-header .wrap { padding-block: 0; min-height: var(--header-h); }
.mark b { font-size: 21px; }
.btn { min-height: 50px; padding: 13px 24px; font-size: 15px; letter-spacing: 0.01em; box-shadow: 0 1px 0 rgba(255,255,255,.08) inset, 0 10px 24px -16px rgba(26,26,26,.6); }
.btn:active { transform: translateY(0) scale(0.99); }
.btn-lg { min-height: 54px; padding: 15px 28px; font-size: 15.5px; }
.btn:focus-visible, a:focus-visible, button:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
.card { box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 12px 32px -22px rgba(26,26,26,.25); }
.lede, p, li { text-wrap: pretty; }
.display, h1, h2 { text-wrap: balance; }

/* Hero: header + headline + video + start button share the first screen. */
.hero-intro { display: flex; min-height: calc(100svh - var(--header-h) - var(--banner-h)); }
.hero-stack { flex: 1; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(12px, 2.4svh, 26px); padding-block: clamp(14px, 3.2svh, 40px) clamp(18px, 3.6svh, 40px); }
.hero-title { margin: 0; max-width: 24ch; font-size: clamp(30px, min(5.4vw, 6.4svh), 64px); line-height: 1.04; }
.hero-title .grad { display: block; }
.video-stage { flex: 1 1 0; width: 100%; min-height: 168px; container-type: size; display: grid; place-items: center; margin: 0; max-width: none; }
.hero-intro .video-shell { width: min(100cqw, calc(100cqh * 16 / 9), 960px); padding: 0; border-radius: 16px; overflow: hidden; border: 1px solid var(--line); box-shadow: 0 30px 60px -40px rgba(26,26,26,.55); }
.hero-intro .video-inner { border-radius: 0; }
.hero-cta { display: grid; justify-items: center; gap: 8px; }
.hero-meta { margin: 0; font-size: 13px; letter-spacing: .04em; color: var(--muted); }
@media (max-width: 560px) { .hero-cta .btn { width: 100%; } }

/* Intentional empty video state (no fake controls). */
.video-empty { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 4px; padding: 16px; text-align: center; color: var(--bone); container-type: size; background: radial-gradient(120% 90% at 50% 0%, #2a2724 0%, #141312 70%); }
.video-empty img { width: clamp(44px, 18cqh, 76px); height: clamp(44px, 18cqh, 76px); border-radius: 50%; object-fit: cover; border: 1px solid rgba(237,231,219,.35); margin-bottom: 6px; }
.ve-kicker { margin: 0; font: 600 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--rose); }
.ve-title { margin: 0; font-family: var(--serif); font-size: clamp(22px, 9cqh, 40px); line-height: 1.1; color: var(--bone); }
.ve-line { margin: 4px 0 0; max-width: 46ch; font-size: clamp(13px, 4cqh, 16px); line-height: 1.5; color: rgba(237,231,219,.78); }
@container (max-height: 210px) { .ve-line { display: none; } }

/* Definition block with analogy */
.definition-block { max-width: 680px; margin: 0 auto clamp(40px, 6vw, 72px); text-align: center; }
.definition-block .eyebrow { justify-content: center; }
.define-lead { font-family: var(--serif); font-size: clamp(26px, 3vw, 36px); line-height: 1.2; margin: 8px 0 10px; color: var(--ink); }
.define-analogy { color: var(--ink-2); margin: 0; }
.hook .btn-ghost { margin-top: 24px; }
.tile3d .side span { font-size: clamp(17px, 1.6vw, 20px); }

/* Result details */
.analogy { margin: 18px 0 0; padding: 16px 20px; border-left: 2px solid var(--red); background: var(--card); border-radius: 0 12px 12px 0; }
.analogy b { display: block; font-family: var(--serif); font-size: 21px; font-weight: 500; line-height: 1.35; }
.analogy span { display: block; margin-top: 6px; color: var(--ink-2); font-size: 15.5px; }
.score-explain { max-width: 52ch; margin: 8px auto 0; font-size: 14px; color: var(--muted); }
.hero-title { max-width: 32ch; }
@media (max-width: 700px) {
  .hero-stack { justify-content: center; }
  .video-stage { flex: 0 0 auto; min-height: 0; container-type: normal; }
  .hero-intro .video-shell { width: 100%; }
}

/* ===== Main site: navigation, lessons, help, subscribe ===== */
.nav-toggle { display: none; min-height: 44px; padding: 8px 16px; border-radius: 999px; border: 1px solid var(--line-2); background: transparent; font: 600 14px var(--sans); color: var(--ink); cursor: pointer; }
@media (max-width: 860px) {
  .site-header .wrap { position: relative; }
  .nav-toggle { display: inline-flex; align-items: center; }
  .header-nav#site-nav { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 8px var(--gutter) 16px; background: var(--paper); border-bottom: 1px solid var(--line); box-shadow: 0 20px 30px -24px rgba(26,26,26,.4); }
  .header-nav#site-nav.open { display: flex; }
  .header-nav#site-nav a { padding: 12px 0; border-bottom: 1px solid var(--line); font-size: 16px; }
}
.header-nav#site-nav a { min-height: 44px; display: inline-flex; align-items: center; }
.hero-kicker { margin: 0; font: 600 11.5px/1.4 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.hero-meta a { color: var(--ink); font-weight: 600; white-space: nowrap; }
.hero-meta { max-width: 60ch; line-height: 1.6; }
.lesson-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.lesson { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 26px 24px; box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 12px 32px -24px rgba(26,26,26,.25); scroll-margin-top: 80px; transition: transform 200ms var(--ease), box-shadow 200ms var(--ease); }
.lesson:hover { transform: translateY(-2px); box-shadow: 0 2px 4px rgba(26,26,26,.05), 0 20px 40px -26px rgba(26,26,26,.35); }
.lesson-n { margin: 0 0 8px; font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.lesson h3 { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin: 0 0 12px; }
.lesson-analogy { font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--ink); border-left: 2px solid var(--red); padding-left: 14px; }
.lesson p { font-size: 15.5px; color: var(--ink-2); }
.lesson-try { margin: 14px 0 0; padding: 12px 14px; border-radius: 12px; background: var(--paper-2); font-size: 15px !important; }
.lesson-try b { color: var(--ink); }
.follow-card { margin-top: 28px; padding: 22px 24px; border-radius: var(--radius); border: 1px dashed var(--line-2); }
.help-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.tick-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.tick-list li { position: relative; padding-left: 22px; color: var(--ink-2); font-size: 15.5px; }
.tick-list li::before { content: ''; position: absolute; left: 0; top: .7em; width: 8px; height: 8px; border-radius: 50%; background: var(--red-fill); }
.edgard-grid { display: grid; grid-template-columns: 200px 1fr; gap: clamp(20px, 4vw, 48px); align-items: center; max-width: 900px; }
.edgard-photo { width: 200px; height: 200px; border-radius: 50%; object-fit: cover; border: 1px solid var(--line-2); padding: 5px; background: var(--card); }
@media (max-width: 640px) { .edgard-grid { grid-template-columns: 1fr; } .edgard-photo { width: 120px; height: 120px; } }
.subscribe-form .field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 0 16px; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 12px; }
.chips legend { margin-bottom: 8px; }
.chip-check { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid #8c8173; border-radius: 999px; background: var(--card); font-size: 14.5px; cursor: pointer; }
.chip-check:has(input:checked) { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.chip-check input { accent-color: var(--red); width: 18px; height: 18px; margin: 0; }
.success-note { padding: 16px 18px; border-radius: 12px; background: #eef5ee; border: 1px solid #b9d3bb; color: #1f3d22; }
.section-head .eyebrow + .display { margin-top: 10px; }
.stage-list li > div { display: grid; }
.area-topics { font-size: 12.5px; color: var(--muted); font-weight: 500; }
.stage-list li.na span { color: var(--muted); font-style: italic; }
.stage-list li.na span::before { background: repeating-linear-gradient(90deg, var(--line-2) 0 4px, transparent 4px 7px); }
.result-hero .dial .small { text-align: center; }
.roles { display: grid; gap: 14px; }
.roles .card p:last-child { margin-bottom: 0; color: var(--ink-2); }
.map-table { width: 100%; border-collapse: collapse; font-size: 15px; background: var(--card); border-radius: 12px; overflow: hidden; }
.map-table th, .map-table td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.map-table thead th { font: 600 11px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--muted); }
.table-wrap { overflow-x: auto; }
.steps-list { padding-left: 20px; color: var(--ink-2); }
.steps-list li { margin-bottom: 8px; }
.disclosure-card { border-color: var(--ink); }
#personal-intro:not(:empty) { margin: 8px 0 20px; }

/* ===== On-screen result ===== */
.gate-reveal.result-screen { text-align: left; }
.result-screen > .eyebrow { display: flex; }
.result-screen .lede { margin-inline: 0; }
.insight-block { margin-top: 16px; padding: 22px 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--line); box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 12px 32px -24px rgba(26,26,26,.22); }
.insight-block.pattern { border-color: var(--ink); }
.insight-block.move { background: var(--noir); border-color: var(--noir); color: var(--bone); }
.insight-block.move .insight-label { color: var(--rose); }
.insight-block.move .insight-title { color: var(--bone); }
.insight-block p:last-child { margin-bottom: 0; }
.insight-label { margin: 0 0 6px; font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.insight-title { margin: 0 0 6px; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); line-height: 1.25; }
.insight-block h1 { margin: 0 0 8px; font-size: clamp(34px, 4.4vw, 52px); }
.evidence-line { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.evidence-line p { margin: 0 0 6px; font-size: 15px; }
.result-screen .analogy { margin-top: 14px; }
.score-block { margin-top: 16px; padding: 16px 4px 4px; border-top: 1px solid var(--line); }
.result-screen .score-line { justify-content: flex-start; align-items: baseline; margin: 0; }
.result-screen .score-line b { font-size: 46px; }
.result-screen .score-line span { flex: 1 1 240px; }
.result-screen .score-explain { margin: 6px 0 0; max-width: none; text-align: left; }
.link-btn { background: none; border: 0; padding: 10px 4px; min-height: 44px; font: 600 14.5px var(--sans); color: var(--ink-2); text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.link-btn:hover { color: var(--red); }
.finish-card { margin-top: 24px; }
.coverage-note { font-size: 14.5px; color: var(--muted); margin-top: 10px; }
.evidence-line p.insight-label { font-size: 11px; margin-bottom: 6px; }
.suit-card { max-width: 820px; }
.suit-list { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 10px 24px; }
.journey-name { margin: 12px 0 8px; font-family: var(--serif); font-style: italic; font-size: clamp(24px, 3vw, 34px); line-height: 1.2; color: var(--red); }
.definition-block { max-width: 760px; }
.define-body { text-align: left; max-width: 68ch; margin: 0 auto; }
.define-body p { color: var(--ink-2); }
.define-body p:last-child { font-weight: 600; color: var(--ink); margin-bottom: 0; }
.hook h2 .grad { display: block; }

/* ===== Tighter homepage rhythm ===== */
.section { padding-block: clamp(40px, 5.5vw, 76px); }
.hook { padding-block: clamp(40px, 5.5vw, 76px); }
.section-head { margin-bottom: clamp(18px, 2.6vw, 28px); }
.section-head .display { margin-top: 6px; }
.section-head .lede { margin-top: 10px; }
.site-footer { margin-top: 0; }
.hero-stack { padding-block: clamp(10px, 2.4svh, 28px) clamp(14px, 2.8svh, 30px); }
.lesson-grid { gap: 12px; }
.lesson { padding: 20px 20px 18px; }
.lesson h3 { font-size: 23px; margin-bottom: 8px; }
.lesson p { margin-bottom: .7em; }
.lesson-analogy { font-size: 18px; }
.lesson-try { margin-top: 10px; }
.hook h2 { margin: 6px auto 6px; }
.hook .hint { margin-bottom: 14px; }
.hook-line { margin-top: clamp(22px, 3vw, 32px); }
.hook .btn { margin-top: 16px; }
#help .mt-lg { margin-top: 20px; }
.suit-card { padding: 20px 22px; }
.edgard-grid { gap: clamp(16px, 3vw, 32px); }

/* Definition: scannable, easy to finish */
.definition-block { max-width: 1000px; margin: 0 auto clamp(30px, 4vw, 44px); }
.define-lead { font-size: clamp(26px, 3vw, 36px); max-width: 30ch; margin: 6px auto 18px; }
.define-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 12px; text-align: left; }
.define-point { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: 14px; padding: 16px 18px; }
.define-point p { margin: 0; font-size: 15.5px; line-height: 1.6; color: var(--ink-2); }
.define-point .define-tag { margin-bottom: 6px; font: 600 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); }
.define-close { max-width: 62ch; margin: 18px auto 0; padding: 14px 0 0; border-top: 1px solid var(--line-2); font-family: var(--serif); font-size: clamp(19px, 2vw, 23px); line-height: 1.4; color: var(--ink-2); }
.define-close b { display: block; font-weight: 600; color: var(--ink); }

/* Black cards: label in a small box, sentence right under it */
.tile3d, .tile3d button, .tile3d .spin { min-height: 112px; }
.tile3d .side { align-content: start; gap: 8px; padding: 12px 14px 14px; }
.tile3d .side small { justify-self: start; padding: 3px 8px; border-radius: 6px; font-size: 10px; letter-spacing: .14em; line-height: 1.4; }
.tile3d .was small { background: var(--paper-2); border: 1px solid var(--line); }
.tile3d .now small { background: rgba(224, 167, 159, .12); border: 1px solid rgba(224, 167, 159, .35); }
.tile3d .side span:not(.visually-hidden) { font-size: clamp(16.5px, 1.5vw, 19px); line-height: 1.25; }
.shift-grid { gap: 10px; }
@media (max-width: 560px) {
  .tile3d, .tile3d button, .tile3d .spin { min-height: 118px; }
  .tile3d .side { padding: 10px 11px 12px; gap: 6px; }
  .tile3d .side span:not(.visually-hidden) { font-size: 15.5px; }
}
.hook h2 { max-width: none; font-size: clamp(30px, 3.6vw, 46px); line-height: 1.1; }
.hook-line { max-width: 44ch; font-size: clamp(20px, 2.2vw, 27px); }
.tile3d, .tile3d button, .tile3d .spin { min-height: 128px; }
@media (max-width: 560px) {
  .tile3d, .tile3d button, .tile3d .spin { min-height: 124px; }
  .tile3d .side small { letter-spacing: .08em; }
}
/* Definition titles: filled badge that stands out from the text */
.define-point { position: relative; border-top: 1px solid var(--line); padding: 28px 18px 16px; margin-top: 14px; }
.define-point .define-tag { position: absolute; top: -13px; left: 16px; display: inline-block; margin: 0; padding: 6px 12px; border-radius: 8px; background: var(--red-fill); color: #fff; font: 700 11px/1.2 var(--sans); letter-spacing: .12em; box-shadow: 0 6px 14px -8px rgba(155, 27, 27, .7); }

/* ===== Soft colour highlights to break up the plain background ===== */
.hero-intro { background:
  radial-gradient(60% 55% at 12% 18%, rgba(155, 27, 27, .10), transparent 70%),
  radial-gradient(50% 50% at 90% 80%, rgba(201, 150, 70, .14), transparent 70%),
  var(--paper); }
.lessons { background:
  radial-gradient(45% 60% at 100% 0%, rgba(224, 167, 159, .28), transparent 70%),
  radial-gradient(40% 50% at 0% 100%, rgba(201, 150, 70, .12), transparent 70%),
  var(--paper); }
.hook.section-alt { background:
  radial-gradient(55% 40% at 50% 0%, rgba(155, 27, 27, .09), transparent 75%),
  radial-gradient(40% 45% at 0% 70%, rgba(224, 167, 159, .30), transparent 70%),
  radial-gradient(40% 45% at 100% 90%, rgba(201, 150, 70, .16), transparent 70%),
  linear-gradient(180deg, #15181b, #111315); }
#help { background:
  radial-gradient(50% 60% at 95% 20%, rgba(155, 27, 27, .08), transparent 70%),
  radial-gradient(45% 55% at 5% 85%, rgba(224, 167, 159, .24), transparent 70%),
  var(--paper); }
#about-edgard.section-alt { background:
  radial-gradient(50% 70% at 0% 50%, rgba(201, 150, 70, .16), transparent 70%),
  radial-gradient(45% 60% at 100% 40%, rgba(155, 27, 27, .08), transparent 70%),
  var(--paper-2); }
#subscribe { background:
  radial-gradient(60% 70% at 50% 100%, rgba(224, 167, 159, .26), transparent 70%),
  var(--paper); }
.simple-hero, .hero { background:
  radial-gradient(55% 60% at 10% 10%, rgba(155, 27, 27, .08), transparent 70%),
  radial-gradient(45% 55% at 95% 90%, rgba(201, 150, 70, .14), transparent 70%); }
.quiz { background:
  radial-gradient(40% 40% at 100% 0%, rgba(224, 167, 159, .22), transparent 70%),
  radial-gradient(40% 45% at 0% 100%, rgba(201, 150, 70, .10), transparent 70%); }
/* Slightly stronger highlights; lessons in a balanced grid */
.lessons { background:
  radial-gradient(45% 60% at 100% 0%, rgba(224, 167, 159, .40), transparent 70%),
  radial-gradient(40% 55% at 0% 100%, rgba(201, 150, 70, .20), transparent 70%),
  var(--paper); }
.hook.section-alt { background:
  radial-gradient(55% 40% at 50% 0%, rgba(155, 27, 27, .13), transparent 75%),
  radial-gradient(40% 45% at 0% 70%, rgba(224, 167, 159, .42), transparent 70%),
  radial-gradient(40% 45% at 100% 90%, rgba(201, 150, 70, .24), transparent 70%),
  linear-gradient(180deg, #15181b, #111315); }
#help { background:
  radial-gradient(50% 60% at 95% 20%, rgba(155, 27, 27, .12), transparent 70%),
  radial-gradient(45% 55% at 5% 85%, rgba(224, 167, 159, .34), transparent 70%),
  var(--paper); }
@media (min-width: 1100px) { .lesson-grid { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 640px) and (max-width: 1099px) { .lesson-grid { grid-template-columns: repeat(2, 1fr); } }

/* Lessons: two roomy columns for the longer text */
@media (min-width: 1100px) { .lesson-grid { grid-template-columns: repeat(2, 1fr); } }
.lesson-analogy { font-style: normal; }

/* Footer links as small cards */
.footer-links { gap: 8px; }
.footer-links a { display: inline-flex; align-items: center; min-height: 40px; padding: 8px 16px; border: 1px solid var(--line-2); border-radius: 10px; background: var(--card); color: var(--ink); font-weight: 600; font-size: 14px; box-shadow: 0 1px 2px rgba(26,26,26,.04); transition: border-color 200ms var(--ease), color 200ms var(--ease), transform 200ms var(--ease); }
.footer-links a:hover { border-color: var(--red); color: var(--red); transform: translateY(-1px); }
.lesson .lesson-analogy { font-size: clamp(17px, 1.5vw, 19px); line-height: 1.45; color: var(--ink); }
.lesson-grid { align-items: start; }

/* The Modern Earner Shift */
.hook .shift-eyebrow { display: flex; justify-content: center; margin-top: 8px; }
.hook h2#hook-title { margin: 4px auto 4px; }
.shift-sub { max-width: 46ch; margin: 0 auto 18px; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); line-height: 1.3; color: var(--red); }
.tile3d, .tile3d button, .tile3d .spin { min-height: 150px; }
@media (max-width: 560px) { .tile3d, .tile3d button, .tile3d .spin { min-height: 168px; } }
.hero-audience { margin: -4px auto 0; max-width: 52ch; font-size: clamp(15px, 1.4vw, 17.5px); line-height: 1.45; color: var(--ink-2); }

/* ===== Homepage structure additions ===== */
.center { text-align: center; }
.section-head.center { margin-inline: auto; text-align: center; }
.section-head.center .eyebrow { justify-content: center; }
.define-section .definition-block { margin-bottom: 0; }
.cards-section { background:
  radial-gradient(45% 50% at 0% 20%, rgba(224, 167, 159, .30), transparent 70%),
  radial-gradient(40% 45% at 100% 90%, rgba(201, 150, 70, .18), transparent 70%),
  var(--paper); }
.define-section { background:
  radial-gradient(55% 45% at 50% 0%, rgba(155, 27, 27, .10), transparent 75%),
  radial-gradient(40% 50% at 100% 100%, rgba(224, 167, 159, .30), transparent 70%),
  linear-gradient(180deg, #15181b, #111315); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 14px; }
.why-item { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px; }
.why-item h3 { font-family: var(--serif); font-size: 24px; line-height: 1.2; margin: 0 0 8px; }
.why-item p:last-child { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.why-n { margin: 0 0 6px; font: 600 12px var(--sans); letter-spacing: .14em; color: var(--red); }
.why-close { margin: 20px auto 0; max-width: 50ch; text-align: center; font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); color: var(--red); }
.pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px; }
.pillar { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--red); border-radius: var(--radius); padding: 20px 22px; box-shadow: 0 1px 2px rgba(26,26,26,.04), 0 12px 32px -24px rgba(26,26,26,.25); }
.pillar-n { margin: 0 0 4px; font: 600 11px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.pillar h3 { font-family: var(--serif); font-size: 26px; line-height: 1.15; margin: 0 0 6px; }
.pillar-line { margin: 0 0 12px; color: var(--ink-2); font-size: 15px; }
.pillar .tick-list li { font-size: 15px; }
.final-cta { background: radial-gradient(60% 80% at 50% 0%, rgba(155, 27, 27, .35), transparent 70%), var(--noir); }
.final-cta .eyebrow { justify-content: center; }
.final-cta .lede { margin: 12px auto 22px; }
.final-cta .hero-meta { margin-top: 10px; color: rgba(237, 231, 219, .7); }
.btn-light { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.btn-light:hover { background: var(--red-fill); border-color: var(--red); color: #fff; }


/* ---- v7 result: outcome, path, intent ---- */
.insight-block.outcome { border-color: var(--ink); border-top: 3px solid var(--red); }
.insight-block.outcome h1 { margin: 0 0 10px; }
.path-steps { list-style: none; margin: 16px 0 4px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; counter-reset: path; }
.path-steps li { counter-increment: path; display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border: 1px solid var(--line-2); background: var(--paper); font: 600 13px var(--sans); color: var(--ink); }
.path-steps li::before { content: counter(path, decimal-leading-zero); font-family: var(--serif); font-size: 16px; color: var(--red); }
.near-note { margin: 12px 0 0; padding-left: 12px; border-left: 2px solid var(--red); font-size: 15px; color: var(--ink-2); }
.lens-line { margin: 12px 0 0; font-family: var(--serif); font-style: italic; font-size: 19px; line-height: 1.4; color: var(--ink-2); }
.pattern-title { font-size: clamp(28px, 3.4vw, 40px); }
.guide-note { margin: 10px 0 0; color: rgba(237, 231, 219, .82); }
fieldset.insight-block.intent { min-width: 0; }
.intent legend { float: left; width: 100%; padding: 0; margin: 0 0 4px; }
.intent legend + * { clear: both; }
.intent-options { display: grid; gap: 2px; margin-top: 8px; }
.intent-follow { margin: 8px 0 0; }
.stage-list li.focus span { color: var(--red); }
.stage-list li.focus span::before { background: var(--red-fill); }
.guide-card .btn { margin-top: 6px; }

/* ---- Guide page ---- */
.guide { padding-block: clamp(34px, 6vw, 72px); }
.guide-time { margin: 10px 0 20px; font: 600 12px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.guide-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; }
.guide-step { background: var(--card); border: 1px solid var(--line); padding: 20px 22px; }
.guide-step-title { display: flex; align-items: baseline; gap: 12px; margin: 0 0 6px; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; line-height: 1.2; }
.guide-num { font-size: 18px; color: var(--red); }
.guide-step > p { margin: 0 0 10px; color: var(--ink-2); }
.guide-prompts .field { margin-top: 10px; }
.guide-field { min-height: 56px; resize: vertical; font: inherit; }
@media print {
  .site-header, .site-footer, .skip-link, .guide-actions, .guide [role="status"], [data-demo-banner], .demo-banner { display: none !important; }
  body { background: var(--card); }
  .guide-step { break-inside: avoid; border-color: #999; }
  .guide-field { border: 0; border-bottom: 1px solid #999; min-height: 40px; background: transparent; }
  .first-move { background: var(--card) !important; color: #000 !important; border: 1px solid #000; }
  .first-move p, .first-move .mono { color: #000 !important; }
}

/* ---- 12-month journey page: hero + step tabs ---- */
.jt-hero { padding-block: clamp(18px, 2.4vw, 32px) clamp(28px, 4vw, 48px); background:
  radial-gradient(50% 60% at 0% 0%, rgba(224, 167, 159, .28), transparent 70%),
  radial-gradient(40% 50% at 100% 100%, rgba(155, 27, 27, .08), transparent 70%), var(--paper); }
.jt-hero .h-xl { max-width: 18ch; }
.jt-hero .lede { max-width: 60ch; }
.jt-hero .btn-row { margin-top: 22px; }
.jt-bar { position: sticky; top: var(--hdr, 61px); z-index: 40; background: rgba(17, 19, 21, .96); backdrop-filter: blur(8px); border-block: 1px solid var(--line); }
.jt-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; scroll-padding-inline: 16px; }
.jt-tabs::-webkit-scrollbar { display: none; }
.jt-tabs [role=tab] { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 14px; border: 1px solid transparent; background: transparent; font: 600 14px var(--sans); color: var(--muted); cursor: pointer; white-space: nowrap; }
.jt-tabs [role=tab]:hover { color: var(--ink); border-color: var(--line); }
.jt-tabs [role=tab][aria-selected=true] { color: var(--paper); background: var(--ink); border-color: var(--ink); }
.jt-n { display: inline-grid; place-items: center; width: 22px; height: 22px; border: 1px solid currentColor; border-radius: 50%; font-size: 12px; }
.jt-panel { padding-block: clamp(34px, 5vw, 64px); scroll-margin-top: 140px; }
.jt-panel:focus { outline: none; }
.jt-panel:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.jt-steps { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: clamp(28px, 4vw, 44px); padding-top: 20px; border-top: 1px solid var(--line); }
.jt-outcomes { list-style: none; margin: 0 0 18px; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 12px; }
.jt-outcome { background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--red); padding: 18px 20px; }
.jt-outcome-n { margin: 0 0 6px; font-family: var(--serif); font-size: 22px; color: var(--red); }
.jt-outcome h3 { margin: 0 0 6px; font-family: var(--serif); font-size: 24px; line-height: 1.15; }
.jt-outcome p:last-child { margin: 0; color: var(--ink-2); font-size: 15px; }
.jt-cycle { list-style: none; margin: 22px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; counter-reset: cyc; }
.jt-cycle li { counter-increment: cyc; position: relative; background: var(--card); border: 1px solid var(--line); padding: 16px; display: grid; gap: 6px; align-content: start; }
.jt-cycle li::before { content: counter(cyc, decimal-leading-zero); font-family: var(--serif); color: var(--red); font-size: 18px; }
.jt-cycle b { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.1; }
.jt-cycle span { color: var(--ink-2); font-size: 14.5px; }
@media (max-width: 760px) { .jt-cycle { grid-template-columns: 1fr 1fr; } }
.jt-pillars { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 10px; align-items: start; }
.jt-pillar { background: var(--card); border: 1px solid var(--line); }
.jt-pillar summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 34px 1fr 20px; gap: 8px; align-items: center; padding: 16px 18px; min-height: 60px; font-family: var(--serif); font-size: 22px; line-height: 1.2; }
.jt-pillar summary::-webkit-details-marker { display: none; }
.jt-pillar summary::after { content: '+'; color: var(--red); font: 500 22px var(--sans); transition: transform 200ms var(--ease); }
.jt-pillar[open] summary::after { transform: rotate(45deg); }
.jt-pillar-n { font-size: 16px; color: var(--red); }
.jt-pillar .tick-list { padding: 0 18px 18px 60px; font-size: 15px; color: var(--ink-2); }
.jt-isnt { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 760px) { .jt-isnt { grid-template-columns: 1fr; } }
.jt-isnt-no { background: var(--paper-2); box-shadow: none; }
.cross-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.cross-list li { display: grid; grid-template-columns: 22px 1fr; gap: 8px; }
.cross-list li::before { content: '×'; color: var(--red); font-weight: 700; }
.jt-call { display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(18px, 3vw, 40px); background: var(--noir); border-color: var(--noir); color: var(--bone); }
.jt-call .display { color: var(--bone); margin-bottom: 10px; }
.jt-call p { color: rgba(237, 231, 219, .88); }
.jt-call .btn { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.jt-call .btn:hover { background: var(--red-fill); border-color: var(--red); color: #fff; }
.jt-whatsapp { border-left: 1px solid rgba(237, 231, 219, .2); padding-left: clamp(16px, 3vw, 32px); }
.jt-whatsapp .card-title { color: var(--bone); }
.jt-whatsapp .btn { background: transparent; color: var(--bone); border-color: rgba(237, 231, 219, .5); }
@media (max-width: 760px) { .jt-call { grid-template-columns: 1fr; } .jt-whatsapp { border-left: 0; padding-left: 0; border-top: 1px solid rgba(237, 231, 219, .2); padding-top: 16px; } }
.jt-details { background: var(--paper-2); box-shadow: none; }
.jt-details .tick-list { font-size: 14.5px; color: var(--ink-2); }
.jt-deadline { margin: 4px 0 12px; padding: 10px 12px; background: var(--red-soft); color: var(--red-hi); font-weight: 600; }
.jt-code { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.jt-choices ol { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.jt-choices li { background: var(--card); border: 1px solid var(--line); padding: 18px; display: grid; gap: 6px; align-content: start; }
.jt-choices b { font-family: var(--serif); font-size: 22px; font-weight: 600; line-height: 1.15; }
.jt-choices span { color: var(--ink-2); font-size: 15px; }
.jt-choices .btn { justify-self: start; margin-top: 8px; }
@media (max-width: 860px) { .jt-choices ol { grid-template-columns: 1fr; } }
.jt-educators { list-style: none; padding: 0; margin: 10px 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.jt-educators li { background: var(--card); border: 1px solid var(--line); padding: 14px 16px; display: grid; gap: 4px; }
.jt-educators span { color: var(--ink-2); font-size: 14.5px; }
.jt-proof { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 10px; }
.jt-proof blockquote { margin: 0 0 10px; font-family: var(--serif); font-size: 20px; line-height: 1.4; }
.journey-page .price-card { top: calc(var(--hdr, 61px) + 76px); }
.journey-page #price-card, .journey-page #stay { scroll-margin-top: 150px; }

/* ---- Journey hero: title left, short video right ---- */
.jt-hero-grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(24px, 4vw, 56px); align-items: center; }
.jt-hero .h-xl { max-width: 14ch; }
.jt-hero-sub { margin: 10px 0 0; max-width: 56ch; color: var(--muted); font-size: 15.5px; }
.jt-hero-video { margin: 0; }
.jt-hero-video .video-shell { padding: 0; border-radius: 0; overflow: hidden; box-shadow: 10px 10px 0 var(--paper-2), 0 30px 60px -40px rgba(26,26,26,.5); }
.jt-hero-video .video-inner { border-radius: 0; }
@media (max-width: 900px) { .jt-hero-grid { grid-template-columns: 1fr; } .jt-hero .h-xl { max-width: none; } }
.jt-presentation { margin: 18px 0 22px; }
.jt-presentation .video-shell { padding: 0; border-radius: 0; overflow: hidden; }
.jt-presentation .video-inner { border-radius: 0; }
.jt-presentation figcaption { margin-top: 8px; }
.jt-wider { margin: 6px 0 clamp(28px, 4vw, 44px); padding: clamp(20px, 3vw, 34px); background: var(--noir); color: var(--bone); }
.jt-wider-label { margin: 0 0 10px; font: 600 11px var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--rose); }
.jt-wider .display { color: var(--bone); max-width: 24ch; }
.jt-wider .lede { color: rgba(237, 231, 219, .88); margin-bottom: 0; }
.jt-outcome-key { border-top-color: var(--ink); background: var(--red-soft); }
.jt-stories { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; }
.jt-story { margin: 0; }
.jt-story .video-shell { padding: 0; border-radius: 0; overflow: hidden; box-shadow: none; }
.jt-story .video-inner { border-radius: 0; }
.jt-story figcaption { display: grid; gap: 2px; margin-top: 8px; }
.jt-story figcaption span { color: var(--muted); font-size: 14px; }
/* Journey page layout refinements */
.jt-hero .h-xl { max-width: 16ch; font-size: clamp(42px, 5vw, 72px); line-height: 1.02; }
/* Edgard, 2026-09-24: the title runs wide, to the right, two lines at most. */
.jt-hero .h-xl { max-width: 28ch; font-size: clamp(30px, 4.4vw, 62px); text-wrap: balance; }
@media (max-width: 699px) { .jt-hero .h-xl { max-width: none; font-size: clamp(23px, 7.4vw, 33px); line-height: 1.08; } }
.jt-tabs { gap: 2px; }
.jt-tabs [role=tab] { padding: 8px 10px; gap: 6px; font-size: 13.5px; }
.jt-outcomes { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 980px) { .jt-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .jt-outcomes { grid-template-columns: 1fr; } }
/* Journey: doubts, Edgard's note, free lessons */
.jt-doubts { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 12px; }
.jt-doubt { background: var(--card); border: 1px solid var(--line); padding: 18px 20px; }
.jt-doubt h3 { margin: 0 0 8px; font-family: var(--serif); font-size: 22px; line-height: 1.2; font-weight: 600; }
.jt-doubt p { margin: 0; color: var(--ink-2); font-size: 15.5px; }
.jt-note { margin: 0; padding: clamp(20px, 3vw, 32px); background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--red); max-width: 820px; }
.jt-note blockquote { margin: 0; }
.jt-note blockquote p { font-family: var(--serif); font-size: clamp(20px, 2.1vw, 24px); line-height: 1.45; margin: 0 0 14px; }
.jt-note figcaption { font: 600 13px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--red); }
.jt-outcome-n { font-family: var(--sans) !important; font-size: 11px !important; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; }
.jt-stay { background: var(--paper-2); box-shadow: none; }
/* ---- Free access page ---- */
.sub-note { margin: 10px 0 0; }
.fa-hero { padding-block: clamp(40px, 7vw, 84px) clamp(16px, 3vw, 28px); background: radial-gradient(50% 60% at 0% 0%, rgba(224, 167, 159, .28), transparent 70%), var(--paper); }
.fa-video { margin: 22px 0 0; }
.fa-video .video-shell { padding: 0; border-radius: 0; overflow: hidden; }
.fa-video .video-inner { border-radius: 0; }
.fa-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.fa-step { display: grid; grid-template-columns: 56px 1fr; gap: 14px; background: var(--card); border: 1px solid var(--line); padding: 20px 22px; }
.fa-num { font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--red); }
.fa-step h3 { margin: 0 0 6px; font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px); font-weight: 500; }
.fa-step p { margin: 0; color: var(--ink-2); }
.fa-stores { display: flex; flex-wrap: wrap; gap: 18px; margin-top: 16px; }
.fa-store { display: grid; justify-items: start; gap: 10px; }
.fa-store img { width: 140px; height: 140px; border: 1px solid var(--line); background: var(--card); padding: 6px; }
@media (max-width: 700px) { .fa-store img { display: none; } .fa-step { grid-template-columns: 1fr; } }
.fa-shots { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }
.fa-shot { margin: 0; }
/* The free weekly call: phone screenshots under each step, never wider than a phone. */
.fa-shot img { width: 100%; border: 1px solid var(--line); }
.fa-shot figcaption { margin-top: 8px; font-size: 14.5px; color: var(--ink-2); }
.fa-shot-slot { display: grid; place-items: center; aspect-ratio: 9 / 16; max-height: 360px; background: var(--paper-2); border: 1px dashed var(--line-2); color: var(--muted); font-weight: 600; }
.fa-next .btn-row { margin-top: 14px; }

.preview-skip { margin: 10px 0 0; padding: 6px 10px; border: 1px dashed #c9a227; background: #fff8e0; font-size: 13px; }
.preview-skip .link-btn { color: #7a5b00; }

/* ---- Grow with us (one-screen sales invitation) ---- */
.gw-hero { min-height: calc(100svh - 140px); display: grid; align-items: center; }
.gw-facts { list-style: none; margin: 18px 0 22px; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.gw-facts li { padding: 7px 12px; border: 1px solid var(--line-2); background: var(--card); font: 600 13.5px var(--sans); }
.gw-facts li::before { content: '✓ '; color: var(--red); }
.gw-note { margin-top: 12px; max-width: 46ch; }
.gw-legal { padding-block: 10px 24px; margin: 0 auto; }

.header-nav .nav-hiring { color: var(--red); font-weight: 700; }

.gw-terms { margin: 12px 0 0; font-weight: 700; font-size: 15px; color: var(--ink); }

.about-video { margin: 22px 0 0; }
.about-video .video-shell { padding: 0; border-radius: 0; overflow: hidden; }
.about-video .video-inner { border-radius: 0; }

/* ======================================================================
   Result as scenes (profile reveal · personal path · keep it · next step)
   Cards are not the default here: each part is a composition of its own.
   ====================================================================== */

/* The structure that quietly builds while answering */
.quiz-head { position: relative; }
.profile-build { position: absolute; right: var(--gutter); top: 10px; width: 74px; height: 74px; opacity: .9; pointer-events: none; }
.profile-build[hidden] { display: none; }
.profile-build svg { width: 100%; height: 100%; overflow: visible; }
@media (min-width: 1180px) {
  .profile-build { position: fixed; top: 50%; right: max(24px, calc(50vw - 700px)); width: 300px; height: 300px; transform: translateY(-40%); opacity: .75; }
}
.me-profile .pf-ring { fill: none; stroke: var(--line); stroke-width: 1; }
.me-profile .pf-axis { stroke: var(--line); stroke-width: 1; stroke-dasharray: 2 5; }
.me-profile .pf-shape { fill: rgba(155, 27, 27, .07); stroke: var(--red); stroke-width: 1.6; stroke-linejoin: round; }
.me-profile .pf-dot { fill: var(--ink); }
.me-profile .pf-you { fill: var(--paper); stroke: var(--ink); stroke-width: 1.2; }
.me-profile .pf-you-text { font: 600 13px var(--sans); fill: var(--ink); letter-spacing: .04em; }
.pf-node.is-new .pf-dot { animation: pf-pop 900ms var(--ease) both; transform-box: fill-box; transform-origin: center; }
@keyframes pf-pop { 0% { transform: scale(0); } 60% { transform: scale(1.6); } 100% { transform: scale(1); } }

/* Scene 1 · the reveal (dark, full width) */
.result-reveal { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); gap: clamp(24px, 4vw, 56px); align-items: center; margin-bottom: 8px; padding-block: clamp(34px, 6vw, 72px); color: var(--bone); background: var(--noir); box-shadow: 0 0 0 100vmax var(--noir); clip-path: inset(0 -100vmax); }
.result-reveal .insight-label { color: var(--rose); }
.reveal-line { font-family: var(--serif); font-style: italic; font-size: clamp(20px, 2.2vw, 26px); color: var(--bone); margin: 0 0 clamp(18px, 3vw, 30px); opacity: .9; }
.reveal-path-label { margin-top: 6px; }
.result-reveal h1 { color: var(--bone); margin: 0 0 12px; }
.result-reveal .lede { color: rgba(237, 231, 219, .88); }
.result-reveal .path-steps li { background: transparent; color: var(--bone); border-color: rgba(237, 231, 219, .22); }
.result-reveal .path-steps li::before { color: var(--rose); }
.result-reveal .near-note, .result-reveal .lens-line { color: rgba(237, 231, 219, .8); border-color: rgba(237, 231, 219, .2); }
.reveal-figure { margin: 0; background: radial-gradient(50% 50% at 50% 50%, rgba(155, 27, 27, .25), transparent 72%); }
.reveal-figure svg { width: 100%; height: auto; overflow: visible; }
.reveal-figure figcaption { margin-top: 6px; color: rgba(237, 231, 219, .6); text-align: center; }
.me-profile--reveal .pf-ring, .me-profile--reveal .pf-axis { stroke: rgba(237, 231, 219, .16); }
.me-profile--reveal .pf-shape { fill: rgba(224, 167, 159, .12); stroke: var(--rose); stroke-width: 2; stroke-dasharray: 100; stroke-dashoffset: 100; animation: pf-draw 1600ms 500ms var(--ease) forwards; }
.me-profile--reveal .pf-dot { fill: var(--bone); }
.me-profile--reveal .pf-node { opacity: 0; animation: pf-fade 700ms calc(300ms + var(--i) * 160ms) var(--ease) forwards; }
.me-profile--reveal .pf-node.is-focus .pf-dot { fill: var(--rose); }
.me-profile--reveal .pf-halo { fill: none; stroke: var(--rose); stroke-width: 1.5; transform-box: fill-box; transform-origin: center; animation: pf-halo 2400ms 1800ms ease-out 2; }
.me-profile--reveal .pf-label { font: 600 17px var(--sans); fill: var(--bone); letter-spacing: .02em; }
.me-profile--reveal .pf-status { font: 500 14.5px var(--sans); fill: rgba(237, 231, 219, .62); }
.me-profile--reveal .pf-status.is-focus { fill: var(--rose); font-weight: 700; }
.me-profile--reveal .pf-you { fill: var(--noir); stroke: var(--bone); }
.me-profile--reveal .pf-you-text { fill: var(--bone); }
@keyframes pf-draw { to { stroke-dashoffset: 0; } }
@keyframes pf-fade { to { opacity: 1; } }
@keyframes pf-halo { 0% { transform: scale(.6); opacity: 1; } 100% { transform: scale(2.2); opacity: 0; } }
@media (max-width: 820px) {
  .result-reveal { grid-template-columns: 1fr; }
  .reveal-figure { order: -1; max-width: 460px; margin-inline: auto; width: 100%; }
}

/* Scene 2 · the personal path (light editorial) */
.result-path { margin: clamp(40px, 7vw, 88px) 0 clamp(24px, 4vw, 40px); }
.path-title { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 4.2vw, 48px); line-height: 1.08; margin: 4px 0 16px; max-width: 22ch; }
.path-kicker { display: block; font: 600 12px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); margin-bottom: 8px; }
.path-why { font-family: var(--serif); font-size: clamp(21px, 2.4vw, 27px); line-height: 1.4; max-width: 34ch; margin: 0 0 clamp(18px, 3vw, 28px); color: var(--ink-2); }
.path-figure { margin: 0 auto clamp(20px, 3vw, 32px); max-width: 640px; }
.path-figure svg { width: 100%; height: auto; overflow: visible; }
.me-eco .eco-orbit { fill: none; stroke: var(--line); stroke-dasharray: 3 7; }
.me-eco .eco-link { fill: none; stroke: var(--line); stroke-width: 1.2; }
.me-eco .eco-link.is-lit { stroke: var(--red); stroke-width: 2.4; stroke-dasharray: 100; stroke-dashoffset: 100; animation: pf-draw 1100ms calc(250ms + var(--i) * 140ms) var(--ease) forwards; }
.me-eco .eco-dot { fill: var(--paper); stroke: var(--line-2); stroke-width: 1.5; }
.me-eco .eco-stream.is-lit .eco-dot { fill: var(--red); stroke: var(--red); }
.me-eco .eco-label { font: 600 19px var(--sans); fill: var(--muted); }
.me-eco .eco-stream.is-lit .eco-label { fill: var(--ink); }
.me-eco .eco-profile .pf-node.is-focus .pf-dot { fill: var(--red); }
.me-eco .eco-profile .pf-halo { fill: none; stroke: var(--red); stroke-width: 2; }
.path-lead { font: 600 12px var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin: 0 0 6px; }
.path-parts { list-style: none; margin: 0 0 14px; padding: 0; counter-reset: part; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: clamp(20px, 4vw, 48px); }
.path-parts li { counter-increment: part; display: grid; grid-template-columns: 44px 1fr; column-gap: 12px; padding: 18px 0; border-top: 1px solid var(--line-2); }
.path-parts li::before { content: counter(part, decimal-leading-zero); grid-row: span 2; font-family: var(--serif); font-size: 30px; line-height: 1; color: var(--red); }
.path-parts b { font-family: var(--serif); font-size: 21px; font-weight: 600; line-height: 1.2; }
.path-parts span { color: var(--ink-2); margin-top: 4px; }
.path-note { margin-top: 4px; }
@media (max-width: 720px) { .path-parts { grid-template-columns: 1fr; } }

/* The one recommended next step */
.next-step { margin: clamp(22px, 4vw, 40px) 0; padding: clamp(18px, 3vw, 28px) 0 clamp(18px, 3vw, 28px) clamp(18px, 3vw, 28px); border-left: 3px solid var(--red); }
.next-title { font-family: var(--serif); font-size: clamp(26px, 3.2vw, 36px); line-height: 1.12; margin: 2px 0 10px; max-width: 24ch; }
.next-text { max-width: 58ch; color: var(--ink-2); margin: 0 0 18px; }
.next-quiet { margin: 14px 0 0; font-size: 15px; color: var(--muted); }
.next-quiet a { color: var(--ink); }

/* Keep it · the email exchange (warm full-width band) */
.keep-scene { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(22px, 4vw, 52px); align-items: start; margin-top: clamp(20px, 4vw, 40px); padding-block: clamp(34px, 6vw, 64px); background: var(--paper-2); box-shadow: 0 0 0 100vmax var(--paper-2); clip-path: inset(0 -100vmax); }
.keep-scene[hidden] { display: none; }
.keep-title { font-family: var(--serif); font-weight: 500; font-size: clamp(32px, 4.4vw, 50px); line-height: 1.05; margin: 4px 0 16px; }
.keep-lede { font-size: 17px; line-height: 1.6; color: var(--ink-2); margin: 0 0 18px; }
.keep-list { list-style: none; margin: 0; padding: 0; counter-reset: keep; }
.keep-list li { counter-increment: keep; position: relative; padding: 12px 0 12px 40px; border-top: 1px solid var(--line-2); font-family: var(--serif); font-size: 20px; line-height: 1.3; }
.keep-list li::before { content: counter(keep); position: absolute; left: 0; top: 11px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 13px var(--sans); color: var(--paper); background: var(--ink); }
.keep-form { padding-top: 6px; }
.keep-form .btn-block { margin-top: 8px; }
@media (max-width: 820px) { .keep-scene { grid-template-columns: 1fr; } }

.finish-scene { margin-top: clamp(24px, 4vw, 40px); padding-block: clamp(20px, 4vw, 34px); border-top: 1px solid var(--line-2); }
.finish-scene[hidden] { display: none; }
.finish-title { font-family: var(--serif); font-size: clamp(26px, 3vw, 34px); margin: 0 0 8px; }

@media (prefers-reduced-motion: reduce) {
  .me-profile--reveal .pf-shape, .me-eco .eco-link.is-lit { animation: none; stroke-dashoffset: 0; }
  .me-profile--reveal .pf-node { animation: none; opacity: 1; }
  .me-profile--reveal .pf-halo, .pf-node.is-new .pf-dot { animation: none; }
}

.me-eco .eco-profile .pf-ring { fill: var(--paper); }
.me-eco .eco-profile .pf-rings circle:first-child { fill: none; }

/* Full result page: profile band and 30 days */
.profile-band { background: var(--noir); color: var(--bone); }
.profile-band .eyebrow { color: var(--rose); }
.profile-band h2 { color: var(--bone); }
.profile-band .small { color: rgba(237, 231, 219, .65); }
.profile-band-grid { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(20px, 4vw, 48px); align-items: center; }
@media (max-width: 760px) { .profile-band-grid { grid-template-columns: 1fr; } }
.thirty-days { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 0; }
.thirty-days li { display: grid; grid-template-columns: 110px 1fr; gap: 16px; padding: 16px 0; border-top: 1px solid var(--line-2); }
.thirty-days b { font-family: var(--serif); font-size: 22px; color: var(--red); font-weight: 600; }
@media (max-width: 520px) { .thirty-days li { grid-template-columns: 1fr; gap: 4px; } }

/* Journey page: the path carried from the result */
.journey-path { margin: 18px 0 6px; padding: 16px 0 4px 18px; border-left: 3px solid var(--red); max-width: 62ch; }
.journey-path-title { font-family: var(--serif); font-size: clamp(22px, 2.6vw, 28px); margin: 0 0 8px; }
.journey-path-title span { font-family: var(--sans); font-size: 15px; color: var(--muted); }
.journey-path-parts b { font-weight: 700; }

/* Planning call page */
.call-hero { background: var(--noir); color: var(--bone); padding-block: clamp(40px, 7vw, 96px); }
.call-hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, .75fr); gap: clamp(24px, 5vw, 64px); align-items: center; }
.call-hero .eyebrow { color: var(--rose); }
.call-hero h1 { color: var(--bone); margin: 10px 0 16px; }
.call-hero .lede { color: rgba(237, 231, 219, .86); }
.call-context { margin: 18px 0; padding-left: 16px; border-left: 3px solid var(--rose); }
.call-context-title { font-family: var(--serif); font-size: 24px; margin: 0 0 4px; }
.call-hero .btn-ghost { color: var(--bone); border-color: rgba(237, 231, 219, .35); }
.call-actions-note { color: rgba(237, 231, 219, .65); margin-top: 10px; }
.call-portrait { margin: 0; }
.call-portrait img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; border-radius: 50% 50% 18px 50%; filter: saturate(.9) contrast(1.05); }
.call-portrait figcaption { margin-top: 10px; font-size: 13px; color: rgba(237, 231, 219, .6); }
.call-flow { padding-block: clamp(44px, 7vw, 96px); }
.call-steps { list-style: none; margin: 24px 0 0; padding: 0; position: relative; }
.call-steps::before { content: ""; position: absolute; left: 7px; top: 8px; bottom: 8px; width: 2px; background: var(--line-2); }
.call-steps li { position: relative; display: grid; gap: 4px; padding: 0 0 28px 40px; }
.call-steps li::before { content: ""; position: absolute; left: 0; top: 6px; width: 16px; height: 16px; border-radius: 50%; background: var(--paper); border: 2px solid var(--red); }
.call-min { font: 600 11.5px var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--red); }
.call-steps b { font-family: var(--serif); font-size: clamp(24px, 2.8vw, 30px); font-weight: 600; }
.call-steps li > span:last-child { color: var(--ink-2); max-width: 58ch; }
.call-facts { background: var(--paper-2); padding-block: clamp(40px, 6vw, 80px); }
.call-facts-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); }
.call-fact { font-family: var(--serif); font-size: clamp(21px, 2.3vw, 26px); line-height: 1.35; margin: 6px 0 0; }
.call-not .call-fact { color: var(--ink-2); }
.call-close { padding-block: clamp(40px, 6vw, 80px); }
@media (max-width: 760px) {
  .call-hero-grid, .call-facts-grid { grid-template-columns: 1fr; }
  /* Mobile audit 2026-09-24: the promise and the booking button come first; the photo becomes a compact author line. */
  .call-hero-grid { gap: 18px; }
  .call-portrait { order: -1; display: flex; align-items: center; gap: 12px; max-width: none; }
  .call-portrait img { width: 64px; height: 64px; flex: none; border-radius: 50%; }
  .call-portrait figcaption { margin: 0; font-size: 14px; }
}

/* Real footage: quiet muted loops (backgrounds and design only, never in a talking-video frame) */
.jt-moments { margin: clamp(28px, 5vw, 48px) 0; }
.moments { list-style: none; margin: 12px 0 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.moments li { position: relative; margin: 0; border-radius: 14px; overflow: hidden; background: var(--noir); aspect-ratio: 9 / 16; }
.moments li:nth-child(even) { transform: translateY(28px); }
.moment-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.moments li span { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 12px; font: 600 12.5px/1.3 var(--sans); color: var(--bone); background: linear-gradient(transparent, rgba(20, 19, 18, .85)); }
@media (max-width: 760px) {
  .moments { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
  .moments li { scroll-snap-align: start; }
  .moments li:nth-child(even) { transform: none; }
}
.jt-moments .preview-note { margin-top: 44px; }

/* Journey hero with a slow footage background */
.jt-hero.has-footage { position: relative; overflow: hidden; background: var(--noir); color: var(--bone); }
.jt-hero-footage { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
.jt-hero.has-footage::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(90deg, rgba(22, 21, 20, .9) 0%, rgba(22, 21, 20, .72) 40%, rgba(22, 21, 20, .28) 78%, rgba(22, 21, 20, .45) 100%), linear-gradient(0deg, rgba(22, 21, 20, .55), transparent 40%); }
@media (max-width: 760px) { .jt-hero.has-footage::after { background: linear-gradient(180deg, rgba(22, 21, 20, .55) 0%, rgba(22, 21, 20, .78) 45%, rgba(22, 21, 20, .9) 100%); } }
.jt-hero.has-footage > .wrap { position: relative; z-index: 1; }
.jt-hero.has-footage .eyebrow { color: var(--rose); }
.jt-hero.has-footage h1 { color: var(--bone); }
.jt-hero.has-footage .lede, .jt-hero.has-footage .journey-path p { color: rgba(237, 231, 219, .86); }
.jt-hero.has-footage .journey-path-title { color: var(--bone); }
.jt-hero.has-footage .journey-path-title span { color: rgba(237, 231, 219, .6); }
.jt-hero.has-footage .btn-ghost { color: var(--bone); border-color: rgba(237, 231, 219, .4); }
.jt-hero.has-footage .btn-ghost:hover { background: rgba(237, 231, 219, .08); color: var(--bone); }
@media (max-width: 760px) { .jt-hero.has-footage::after { background: rgba(22, 21, 20, .82); } }

/* Save $200 when you message the code (only with a real code and a real end; the clock counts to that exact moment) */
.save-box { margin: 14px 0 8px; padding: 16px; border: 2px solid var(--red); border-radius: 4px; background: #fff8f5; }
.save-title { margin: 0; font: 600 32px/1.05 var(--serif); color: var(--red-hi); }
.save-line { margin: 6px 0 12px; font-size: 15px; line-height: 1.5; color: var(--ink); }
.save-clock { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 0 0 10px; }
.save-clock span { display: grid; justify-items: center; padding: 9px 4px 7px; border-radius: 3px; background: var(--ink); color: var(--paper); }
.save-clock b { font: 600 28px/1 var(--serif); font-variant-numeric: tabular-nums; }
.save-clock small { margin-top: 4px; font: 700 10px/1.2 var(--sans); letter-spacing: .08em; text-transform: uppercase; opacity: .75; }
.save-ends { margin: 0 0 10px; color: var(--ink-2); }
.save-box .preview-note { margin: 10px 0 0; }

/* About page opening: Edgard holding the trophy in front of the room (right side on laptops, behind on phones) */
.about-page .simple-hero.has-film { position: relative; overflow: hidden; background: var(--noir); color: var(--bone); }
.about-page .about-film { position: absolute; top: 0; right: 0; bottom: 0; width: 52%; z-index: 0; }
.about-page .about-film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 55% 30%; }
.about-page .about-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--noir) 0%, rgba(22, 21, 20, .6) 30%, rgba(22, 21, 20, .1) 100%); }
.about-page .simple-hero.has-film > .wrap { position: relative; z-index: 1; }
.about-page .simple-hero.has-film .eyebrow { color: var(--rose); }
.about-page .simple-hero.has-film h1 { color: var(--bone); }
.about-page .simple-hero.has-film .lede, .about-page .simple-hero.has-film .muted { color: rgba(237, 231, 219, .86); }
.about-page .simple-hero.has-film .prose { max-width: min(640px, 52%); margin-left: max(var(--gutter), calc((100% - var(--max)) / 2 + var(--gutter))); }
@media (max-width: 760px) {
  .about-page .about-film { width: 100%; }
  .about-page .about-film::after { background: linear-gradient(180deg, rgba(22, 21, 20, .5) 0%, rgba(22, 21, 20, .82) 45%, rgba(22, 21, 20, .94) 100%); }
  .about-page .simple-hero.has-film .prose { max-width: none; margin-left: auto; }
}
.about-page .simple-hero.has-film .grad { color: var(--rose); }

/* 12-month page: the numbered steps wait at the bottom of the first screen, under the presentation */
.jt-bar.docked { position: fixed; top: auto; left: 0; right: 0; bottom: 0; box-shadow: 0 -12px 30px -20px rgba(22, 21, 20, .45); }

/* 12-month page: every step in one place, no sideways scrolling */
.journey-page .jt-tabs { display: grid; grid-template-columns: repeat(var(--steps, 7), minmax(0, 1fr)); gap: 4px; overflow: visible; padding-block: 8px; }
.journey-page .jt-tabs [role=tab] { min-width: 0; justify-content: flex-start; align-items: center; white-space: normal; text-align: left; line-height: 1.2; padding: 6px 8px; font-size: 13px; }
.journey-page .jt-tabs .jt-tab-top { display: none; }
.journey-page .jt-current { display: none; }
@media (max-width: 760px) {
  .journey-page .jt-tabs { gap: 3px; padding-block: 6px 2px; }
  .journey-page .jt-tabs [role=tab] { justify-content: center; padding: 4px 0; min-height: 40px; }
  .journey-page .jt-tabs .jt-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .journey-page .jt-current { display: block; margin: 0; padding: 0 2px 7px; font: 600 13px/1.3 var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
}
.jt-moments--pair .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 720px; }
.jt-moments--pair .moments li { aspect-ratio: 4 / 5; }
.jt-moments--pair .moments li:nth-child(even) { transform: translateY(28px); }
@media (max-width: 760px) {
  .jt-moments--pair .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; }
  .jt-moments--pair .moments li:nth-child(even) { transform: none; }
}

/* Step 3 gallery: four tiles that flip through real moments */
.jt-moments--gallery .moments { grid-template-columns: repeat(4, minmax(0, 1fr)); max-width: none; perspective: 1400px; }
.jt-moments--gallery .moments li { aspect-ratio: 4 / 5; overflow: visible; background: transparent; }
.jt-moments--gallery .moments li:nth-child(even) { transform: translateY(24px); }
.jt-moments--gallery .flip-card { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform 740ms var(--ease); }
.jt-moments--gallery .flip-card.flipping { transform: rotateY(180deg); }
.jt-moments--gallery .flip-face { position: absolute; inset: 0; overflow: hidden; border-radius: 14px; background: var(--noir); backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.jt-moments--gallery .flip-face.flip-back { transform: rotateY(180deg); }
.jt-moments--gallery .flip-face .moment-video { width: 100%; height: 100%; object-fit: cover; display: block; }
.jt-moments--gallery .flip-face span { position: absolute; left: 0; right: 0; bottom: 0; padding: 28px 12px 12px; font: 600 12.5px/1.3 var(--sans); color: var(--bone); background: linear-gradient(transparent, rgba(20, 19, 18, .85)); }
@media (max-width: 760px) {
  .jt-moments--gallery .moments { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-flow: row; grid-auto-columns: auto; overflow: visible; gap: 10px; }
  .jt-moments--gallery .moments li:nth-child(even) { transform: translateY(16px); }
}
@media (prefers-reduced-motion: reduce) { .jt-moments--gallery .flip-card { transition: none; } }

/* 12-month opening: the headline reads clearly over the footage */
.jt-hero.has-footage::after { background: linear-gradient(90deg, rgba(22, 21, 20, .95) 0%, rgba(22, 21, 20, .88) 38%, rgba(22, 21, 20, .5) 70%, rgba(22, 21, 20, .5) 100%), linear-gradient(0deg, rgba(22, 21, 20, .55), transparent 40%); }
.jt-hero.has-footage h1 { text-shadow: 0 2px 28px rgba(0, 0, 0, .55); letter-spacing: -.01em; }
.jt-hero.has-footage .lede { text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
@media (max-width: 760px) {
  .jt-hero.has-footage::after { background: linear-gradient(180deg, rgba(22, 21, 20, .78) 0%, rgba(22, 21, 20, .86) 45%, rgba(22, 21, 20, .94) 100%); }
}

/* 12-month page: one step, one screen (Edgard, 2026-09-17). Smaller type, folded detail, tighter rhythm. */
.journey-page .jt-panel > .wrap { padding-block: clamp(12px, 2.2svh, 26px); }
.journey-page .jt-panel .section-head { margin-bottom: 10px; }
.journey-page .jt-panel h2.h-lg { font-size: clamp(23px, min(3.2vw, 5svh), 42px); line-height: 1.05; margin-bottom: 8px; }
.journey-page .jt-panel .lede { font-size: clamp(15px, min(1.3vw, 2.1svh), 18.5px); line-height: 1.45; margin-bottom: 8px; max-width: 70ch; }
.journey-page .jt-panel p, .journey-page .jt-panel li { font-size: 15px; line-height: 1.5; }
.journey-page .jt-panel .card-title { font-size: 17px; }
.journey-page .jt-steps { margin-top: 12px; }
.journey-page .jt-fold { border-top: 1px solid var(--line); padding-top: 8px; margin-top: 10px; }
.journey-page .jt-fold > summary { cursor: pointer; font: 600 15.5px/1.3 var(--sans); padding: 6px 0; list-style-position: inside; }
.journey-page .jt-fold[open] > summary { margin-bottom: 6px; }
.journey-page .jt-doubts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; }
.journey-page .jt-doubt h3 { font-size: 18px; margin-bottom: 4px; }
.journey-page .jt-doubt p { font-size: 14.5px; }
.journey-page .jt-note blockquote p { font-size: clamp(15px, 1.3vw, 17px); line-height: 1.5; }
.journey-page .jt-moments { margin: 14px 0 0; }
.journey-page .jt-stories { gap: 10px; }
.journey-page #stories-block h3 { font-size: 20px; margin-top: 14px; }
.journey-page #stories-block p { font-size: 14px; }
.journey-page .offer { align-items: start; }
.journey-page .price-lines li { padding: 7px 0; font-size: 15px; }
.journey-page .price-lines li.total b { font-size: 34px; }
@media (max-width: 760px) {
  .journey-page .jt-panel h2.h-lg { font-size: 23px; }
  .journey-page .jt-panel .lede { font-size: 15px; }
  .journey-page .jt-panel p, .journey-page .jt-panel li { font-size: 14px; }
  .journey-page .jt-doubts { grid-template-columns: 1fr; gap: 8px; }
  .journey-page .jt-doubt h3 { font-size: 16px; }
  .journey-page .jt-note blockquote p { font-size: 14.5px; }
  .journey-page .jt-stories { grid-auto-flow: column; grid-auto-columns: 62%; overflow-x: auto; scroll-snap-type: x mandatory; }
  .journey-page .jt-stories .jt-story { scroll-snap-align: start; }
  .journey-page .jt-moments--gallery .moments li { aspect-ratio: 1 / 1; }
  .journey-page .price-card { position: static; }
  .journey-page .save-title { font-size: 26px; }
  .journey-page .save-clock b { font-size: 22px; }
  .journey-page .jt-call p { margin-bottom: 6px; }
}

/* "Your next step": the decision on one screen — the call and the price side by side on laptops */
.journey-page #offer > .wrap { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 clamp(20px, 3vw, 40px); grid-template-areas: "head" "call" "price" "folds" "choices" "nav"; }
.journey-page #offer .section-head { grid-area: head; }
.journey-page #offer .jt-call { grid-area: call; margin: 0; }
.journey-page #offer .offer { display: contents; }
.journey-page #offer .offer > div { grid-area: folds; }
.journey-page #offer .price-card { grid-area: price; margin-top: 12px; }
.journey-page #offer .jt-choices { grid-area: choices; }
.journey-page #offer .jt-steps { grid-area: nav; }
@media (min-width: 901px) {
  .journey-page #offer > .wrap { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); grid-template-areas: "head head" "call price" "folds price" "choices choices" "nav nav"; }
  .journey-page #offer .price-card { margin-top: 0; }
}
/* The doubts, folded */
.journey-page .jt-doubt { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 10px 14px; }
.journey-page .jt-doubt > summary { cursor: pointer; font: 600 16px/1.35 var(--serif); }
.journey-page .jt-doubt[open] > summary { margin-bottom: 6px; }
.journey-page .jt-doubt p { margin: 0; }
@media (max-width: 760px) {
  .journey-page .jt-doubt > summary { font-size: 15px; }
  .journey-page #stories-block { display: none; } /* the interviews live in the gallery space on phones */
  .journey-page .jt-panel .vision-list li, .journey-page .jt-panel .steps-list li { font-size: 14px; }
}

/* 12-month page: folds read as rows with a big tap area (outcomes, doubts, what's included) */
.journey-page .jt-outcome { padding: 0; background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.journey-page .jt-outcome > details > summary { display: grid; gap: 2px; padding: 9px 14px; min-height: 50px; align-content: center; cursor: pointer; }
.journey-page .jt-outcome .jt-outcome-n { font: 700 10px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.journey-page .jt-outcome .jt-outcome-h { font: 600 16.5px/1.25 var(--serif); color: var(--ink); }
.journey-page .jt-outcome > details > p { margin: 0; padding: 0 14px 12px; font-size: 14px; }
.journey-page .jt-outcome-key { border-color: var(--red); box-shadow: inset 3px 0 0 var(--red); }
.journey-page .jt-outcomes { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; }
.journey-page .jt-fold.card { padding: 4px 14px; }
.journey-page .jt-fold > summary { min-height: 44px; display: flex; align-items: center; }
.journey-page .jt-isnt { gap: 10px; }
@media (min-width: 901px) {
  .journey-page .jt-outcomes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 9px 16px; }
  .journey-page .jt-outcome .jt-outcome-h { font-size: 18px; }
}
@media (max-width: 760px) {
  .journey-page .jt-panel > .wrap { padding-block: 8px 12px; }
  .journey-page .jt-panel .section-head { margin-bottom: 6px; }
  .journey-page .jt-panel h2.h-lg { font-size: 21px; }
  .journey-page .jt-panel .eyebrow { font-size: 10.5px; margin-bottom: 4px; }
  .journey-page .jt-panel .lede { margin-bottom: 6px; }
  .journey-page .jt-wider { padding: 12px 14px; }
  .journey-page .jt-wider .h-lg, .journey-page .jt-wider h2 { font-size: 20px; }
  .journey-page .jt-wider p { font-size: 13.5px; }
  .journey-page .jt-cycle li { font-size: 13.5px; padding-block: 5px; }
  .journey-page .jt-pillar > summary { min-height: 46px; font-size: 14.5px; padding-block: 8px; }
  .journey-page .jt-outcome > details > summary { min-height: 46px; padding: 7px 12px; }
  .journey-page .jt-outcome .jt-outcome-h { font-size: 15.5px; }
  .journey-page .jt-steps { margin-top: 8px; gap: 8px; }
  .journey-page .jt-steps .btn { min-height: 44px; padding: 9px 12px; font-size: 13.5px; }
  .journey-page .jt-panel .small.muted { font-size: 12.5px; }
  .journey-page #offer .section-head .lede { display: none; }
  .journey-page #offer .jt-call { padding: 12px 14px; }
  .journey-page #offer .jt-call p { font-size: 13.5px; margin-bottom: 6px; }
  .journey-page #offer .price-card { padding: 12px 14px; }
  .journey-page #offer .price-card .h-md { font-size: 18px; }
  .journey-page .save-box { padding: 12px; }
  .journey-page .save-title { font-size: 25px; }
  .journey-page .save-line { font-size: 13px; margin-bottom: 8px; }
  .journey-page .save-clock b { font-size: 21px; }
}

/* Last pass on the 12-month steps: the decision and the price share one screen */
.journey-page #stories-block h3 { font-size: 18px; margin-top: 10px; }
.journey-page .jt-stories { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.journey-page .jt-stories .video-inner { aspect-ratio: 16 / 10; }
.journey-page .jt-note { margin: 8px 0 0; padding: 12px 16px; }
.journey-page .jt-note figcaption { margin-top: 4px; }
.journey-page #trust .jt-moments--gallery .moments li { aspect-ratio: 1 / 1; }
.journey-page .price-card .eyebrow { margin-bottom: 2px; }
.journey-page .price-card .h-md { font-size: clamp(18px, 1.7vw, 24px); margin-bottom: 4px; }
.journey-page .save-box { margin: 10px 0 6px; padding: 12px 14px; }
.journey-page .save-title { font-size: clamp(24px, 2.2vw, 30px); }
.journey-page .save-clock span { padding: 6px 4px 5px; }
.journey-page .save-clock b { font-size: clamp(20px, 1.8vw, 24px); }
.journey-page #offer .jt-call { padding: 14px 18px; }
.journey-page #offer .jt-call .h-md { font-size: clamp(19px, 1.8vw, 26px); }
.journey-page .jt-wider { padding: clamp(14px, 2vw, 24px); }
.journey-page .jt-wider .h-lg { font-size: clamp(20px, min(2.6vw, 4svh), 34px); }
@media (max-width: 760px) {
  .journey-page .jt-stories { grid-auto-columns: 70%; }
  .journey-page #trust .jt-note blockquote p:nth-of-type(n+2) { font-size: 13.5px; }
}

/* The step itself no longer adds a tall band of its own: the content sets the height */
.journey-page .jt-panel { padding-block: clamp(8px, 1.6svh, 18px); }
.journey-page .jt-panel > .wrap { padding-block: clamp(6px, 1.2svh, 14px); }
.journey-page #offer .section-head .lede { font-size: 15px; max-width: 60ch; }
.journey-page #trust .jt-stories .video-inner { aspect-ratio: 16 / 11; }
@media (min-width: 901px) {
  .journey-page #offer .jt-call p:nth-of-type(n+3):not(:last-of-type) { font-size: 14px; }
  .journey-page #trust .jt-moments--gallery .moments li:nth-child(even) { transform: translateY(14px); }
}

/* Step navigation stays on one row on phones */
@media (max-width: 760px) {
  .journey-page .jt-steps { display: flex; flex-wrap: nowrap; justify-content: space-between; }
  .journey-page .jt-steps .btn-ghost { max-width: 38%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
  .journey-page .jt-steps .btn:not(.btn-ghost) { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .journey-page .jt-cycle { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
}
/* "Your next step" on laptops: a tighter heading and call copy */
@media (min-width: 901px) {
  .journey-page #offer .section-head h2.h-lg { font-size: clamp(24px, min(2.6vw, 4.4svh), 36px); }
  .journey-page #offer .jt-call p { font-size: 14.5px; line-height: 1.45; margin-bottom: 6px; }
  .journey-page #trust .jt-moments--gallery .moments li { aspect-ratio: 4 / 3; }
  .journey-page #trust .jt-stories .video-inner { aspect-ratio: 16 / 9; }
}
/* "Your next step": on phones the WhatsApp question is just its button; on laptops the heading stands alone */
@media (max-width: 760px) {
  .journey-page #offer .jt-whatsapp h4, .journey-page #offer .jt-whatsapp p.small { display: none; }
  .journey-page #offer .jt-whatsapp { margin-top: 6px; padding-top: 0; border: 0; }
  .journey-page #offer .jt-whatsapp .btn { width: 100%; min-height: 44px; }
}
@media (min-width: 901px) { .journey-page #offer .section-head .lede { display: none; } }

/* Questions page: every screen fits without scrolling (Edgard, 2026-09-18). Sizes follow the screen height. */
.quiz-head { padding-top: clamp(6px, 1.6svh, 22px); }
.orbit { gap: 12px; }
.orbit svg { width: clamp(34px, 6svh, 58px); height: clamp(34px, 6svh, 58px); }
.orbit .meta b { font-size: clamp(16px, 2.6svh, 22px); }
.orbit .meta span { font-size: 10.5px; }
.ticks { margin-top: clamp(6px, 1.4svh, 18px); }
.quiz-body { padding: clamp(8px, 2.2svh, 36px) var(--gutter) calc(88px + env(safe-area-inset-bottom)); }
.q-label { margin-bottom: clamp(4px, 1svh, 12px); }
.q-legend { font-size: clamp(19px, min(3.4vw, 4.4svh), 40px); line-height: 1.18; margin-bottom: clamp(8px, 1.8svh, 24px); }
.q-note { margin: -4px 0 clamp(6px, 1.2svh, 16px); font-size: 13.5px; }
.options { gap: clamp(5px, 0.9svh, 10px); }
.opt label { grid-template-columns: 26px 1fr; gap: 12px; min-height: clamp(42px, 6.2svh, 60px); padding: clamp(7px, 1.2svh, 14px) 14px; font-size: clamp(13.5px, 1.95svh, 16px); line-height: 1.32; }
.opt .key { width: 26px; height: 26px; font-size: 12.5px; }
.perspective { margin-top: clamp(6px, 1.3svh, 18px); padding: clamp(9px, 1.5svh, 18px) 16px; }
.perspective .mono { font-size: 10.5px; }
.perspective p { margin-top: 4px; font-size: clamp(14.5px, 2.1svh, 20px); line-height: 1.35; }
.quiz-nav .wrap { padding-block: 12px 10px; }
.quiz-nav .btn { min-height: 46px; padding-block: 10px; }
.chapter h1 { font-size: clamp(24px, min(5vw, 6svh), 56px); margin: 4px auto clamp(8px, 1.6svh, 20px); }
.flip-inner { min-height: clamp(118px, 21svh, 240px); }
.flip .face { padding: clamp(12px, 2.4svh, 32px) clamp(16px, 3vw, 32px); gap: 6px; }
.flip .face p { font-size: clamp(17px, 2.7svh, 30px); }
.flip-toggle { margin-top: 6px; min-height: 40px; padding: 6px 14px; }
.chapter .note { margin: clamp(6px, 1.2svh, 18px) auto 0; font-size: clamp(13px, 1.85svh, 16px); line-height: 1.45; }
.chapter .btn-row { margin-top: clamp(8px, 1.4svh, 20px); }
@media (max-height: 560px) and (min-width: 700px) {
  .opt label { min-height: 38px; }
  .quiz-nav .wrap { padding-block: 6px; }
}
.quiz { min-height: calc(100svh - 92px); }
@media (max-height: 620px) {
  .chapter h1 { font-size: clamp(22px, 5.4svh, 34px); margin-bottom: 6px; }
  .flip-inner { min-height: 96px; }
  .flip .face { padding: 10px 16px; }
  .flip .face p { font-size: 16px; }
  .flip .face .label { font-size: 10px; }
  .chapter .note { font-size: 12.5px; max-width: 70ch; }
  .perspective p { font-size: 14px; }
  .quiz-body { padding-bottom: 70px; }
}
@media (min-width: 700px) { .chapter h1 { max-width: 24ch; } }
@media (max-width: 520px) {
  .quiz-body { padding-bottom: calc(74px + env(safe-area-inset-bottom)); }
  .quiz-nav .wrap { padding-block: 8px; }
  .perspective { padding: 9px 14px; }
}
@media (max-width: 520px) and (max-height: 700px) {
  .q-legend { font-size: 18px; }
  .opt label { min-height: 40px; padding-block: 6px; font-size: 13.5px; }
  .perspective p { font-size: 13.5px; }
  .orbit svg { width: 30px; height: 30px; }
  .chapter .note { font-size: 12.5px; }
}

.journey-page #offer .jt-call .jt-fold { margin: 4px 0 8px; }

/* ---- me-path-v8: Edgard's line above each question, the eye-opener, the "I can" map (2026-09-18) ---- */
.q-situation { margin: 0 0 clamp(2px, 0.6svh, 8px); font: italic 500 clamp(17px, min(2vw, 2.6svh), 22px)/1.2 var(--serif); color: var(--muted); }
.eye-opener { max-width: 720px; }
.eye-opener .eye-title { margin: 0 0 clamp(10px, 2svh, 22px); font-size: clamp(28px, min(4.4vw, 5.4svh), 48px); }
.eye-quotes { list-style: none; margin: 0 0 clamp(12px, 2svh, 22px); padding: 0; display: grid; gap: clamp(6px, 1.2svh, 12px); }
.eye-quotes li { padding: clamp(10px, 1.6svh, 16px) 18px; border-left: 3px solid var(--line-2); background: var(--card); border-radius: 0 var(--radius-sm) var(--radius-sm) 0; font-size: clamp(15px, min(1.6vw, 2.2svh), 18px); line-height: 1.45; color: var(--ink-2); animation: rise 800ms var(--ease) both; }
.eye-quotes li:nth-child(2) { animation-delay: 250ms; }
.eye-quotes li:nth-child(3) { animation-delay: 500ms; }
.eye-bridge { margin: 0 0 10px; font-size: clamp(15px, min(1.6vw, 2.2svh), 18px); color: var(--ink-2); }
.eye-reframe { margin: 0 0 clamp(14px, 2.4svh, 26px); font: italic 500 clamp(21px, min(2.6vw, 3.4svh), 30px)/1.3 var(--serif); color: var(--red); animation: rise 900ms var(--ease) 800ms both; }
@media (prefers-reduced-motion: reduce) { .eye-quotes li, .eye-reframe { animation: none; } }

.result-top .lede { margin-bottom: 8px; }
.result-top .outcome-video { margin-top: 14px; }
.under-video { margin: 8px 0 0; }
.ican-map { margin-top: 16px; padding: 22px 24px; border-radius: var(--radius); background: var(--card); border: 1px solid var(--ink); }
.ican-lines { list-style: none; margin: 4px 0 10px; padding: 0; display: grid; gap: 6px; }
.ican-line { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 12px; align-items: center; padding: 9px 12px; border-radius: 10px; background: var(--paper); font-size: 15px; line-height: 1.4; }
.ican-status { justify-self: start; font: 700 10.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; padding: 5px 7px; border-radius: 4px; white-space: nowrap; }
.ican-line.is-can .ican-status { background: var(--ink); color: var(--paper); }
.ican-line.is-growing .ican-status { background: var(--paper-2); color: var(--ink-2); border: 1px solid var(--line-2); }
.ican-line.is-value .ican-status { background: #fcf5e1; color: #4f3b00; }
.ican-line.is-next { background: var(--red-soft); outline: 1.5px solid var(--red); }
.ican-line.is-next .ican-status { background: var(--red-fill); color: #fff; }
.ican-line.is-outcome { background: transparent; border: 1px dashed var(--line-2); }
.ican-sit { color: var(--muted); }
.ican-note { color: var(--muted); font-size: 13.5px; }
.ican-line.is-inside .ican-status { background: transparent; color: var(--muted); border: 1px dashed var(--line-2); }
.ican-line.is-inside { background: transparent; }
.ican-cap { display: block; font: 700 10.5px/1.3 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); margin-bottom: 2px; }
.ican-line.is-next .ican-cap { color: var(--red); }
.path-lines { margin-top: 14px; }

/* The map to Modern Earner (screen after question 9 and the full result): three stages, one marked "You are here". */
.stage-map { list-style: none; margin: 14px 0 16px; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; counter-reset: stage; }
.stage { position: relative; display: grid; justify-items: center; gap: 6px; padding-top: 2px; text-align: center; }
.stage::before { content: ""; position: absolute; top: 9px; left: 0; right: 0; height: 2px; background: var(--line-2); }
.stage:first-child::before { left: 50%; }
.stage:last-child::before { right: 50%; }
.stage.is-past::before, .stage.is-here::before { background: var(--ink); }
.stage.is-here::before { right: 50%; }
.stage:first-child.is-here::before { display: none; }
.stage-dot { position: relative; z-index: 1; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); border: 2px solid var(--line-2); }
.stage.is-past .stage-dot { background: var(--ink); border-color: var(--ink); }
.stage.is-here .stage-dot { background: var(--red-fill); border-color: var(--red); box-shadow: 0 0 0 5px var(--red-soft); }
.stage-name { font: 600 clamp(13px, 1.6vw, 15px)/1.25 var(--sans); color: var(--ink-2); }
.stage.is-here .stage-name { color: var(--ink); }
.stage-here { font: 700 10px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--red); }
.stage:last-child .stage-name { font-family: var(--serif); font-size: clamp(16px, 2vw, 19px); }
.gap-bridge { padding-left: 14px; border-left: 3px solid var(--red); font-family: var(--serif); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.35; }
.result-stage-line { color: var(--ink-2); }
.sticky-line { margin: 0 0 8px; font: italic 500 clamp(22px, 2.4vw, 28px)/1.3 var(--serif); color: var(--red); }
.goal-line { margin-top: 12px; padding-top: 12px; border-top: 1px solid rgba(237, 231, 219, .25); font-size: 15px; }
.next-quiet { margin-top: 18px; font-size: 15px; color: var(--ink-2); }
@media (max-width: 560px) {
  .ican-map { padding: 18px 14px; }
  .ican-line { grid-template-columns: 84px minmax(0, 1fr); gap: 9px; padding: 8px 9px; font-size: 14px; }
  .ican-status { font-size: 9.5px; padding: 4px 5px; }
}

/* Question 9: a year passing on a line, then their answer held up like a postcard. */
.q-year { display: flex; align-items: center; gap: 12px; margin: 0 0 clamp(8px, 1.6svh, 18px); font: 700 10.5px/1 var(--sans); letter-spacing: .16em; text-transform: uppercase; color: var(--muted); }
.q-year .is-future { color: var(--red); }
.q-year-track { position: relative; flex: 1; height: 2px; background: var(--line-2); display: flex; justify-content: space-between; align-items: center; }
.q-year-track i { width: 1.5px; height: 7px; background: var(--line-2); }
.q-year-track::after { content: ''; position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--red-fill); transform-origin: left; animation: q-year-fill 2.6s var(--ease) .35s both; }
.q-year-dot { position: absolute; top: 50%; left: 100%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: var(--red-fill); box-shadow: 0 0 0 6px var(--red-soft); z-index: 1; animation: q-year-move 2.6s var(--ease) .35s both; }
@keyframes q-year-fill { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes q-year-move { from { left: 0; } to { left: 100%; } }
@media (prefers-reduced-motion: reduce) { .q-year-track::after, .q-year-dot { animation: none; } }
.perspective.is-goal { border-left: 3px solid var(--red); }
.perspective.is-goal .goal-quote { margin: 8px 0 6px; font: italic 500 clamp(21px, 2.4vw, 27px)/1.3 var(--serif); color: #fff; }
.perspective.is-goal .goal-quote + p { margin-top: 0; font-size: clamp(16px, 1.7vw, 19px); }

/* ---- The deep half: blurred on screen, sent by email (2026-09-18) ---- */
.deep-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 10px; }
.deep-card { background: var(--card); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px 12px; overflow: hidden; }
.deep-title { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; font-weight: 700; font-size: 15px; color: var(--ink); }
.deep-lock { flex: none; width: 14px; height: 12px; border: 1.6px solid var(--red); border-radius: 3px; position: relative; margin-top: 4px; }
.deep-lock::before { content: ''; position: absolute; left: 1.5px; right: 1.5px; bottom: 100%; height: 7px; border: 1.6px solid var(--red); border-bottom: 0; border-radius: 6px 6px 0 0; }
.deep-blur { margin: 0; font-size: 14.5px; line-height: 1.5; color: var(--ink-2); filter: blur(5px); user-select: none; pointer-events: none; }
.spam-note { margin-top: 4px; }
@media (prefers-reduced-motion: no-preference) { .deep-card { animation: rise 700ms var(--ease) both; } .deep-card:nth-child(2) { animation-delay: 80ms; } .deep-card:nth-child(3) { animation-delay: 160ms; } .deep-card:nth-child(4) { animation-delay: 240ms; } .deep-card:nth-child(5) { animation-delay: 320ms; } }

/* ---- 12-month page, 2026-09-18: named tabs (no step numbers), access first and open, red WhatsApp ask ---- */
.journey-page .jt-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.journey-page .jt-tabs::-webkit-scrollbar { display: none; }
.journey-page .jt-tabs [role=tab] { flex: 0 0 auto; white-space: nowrap; justify-content: center; padding: 8px 14px; min-height: 42px; font-size: 13.5px; }
.journey-page .jt-tabs .jt-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
.journey-page .jt-current { display: none; }
@media (max-width: 760px) {
  .journey-page .jt-tabs [role=tab] { padding: 6px 12px; min-height: 40px; font-size: 13px; }
  .journey-page .jt-tabs .jt-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
  .journey-page .jt-current { display: none; }
}
.jt-pillars-open .jt-pillar summary { cursor: default; pointer-events: none; }
.jt-pillars-open .jt-pillar summary::after { content: none; }
.jt-access-call { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: 18px; background: var(--noir); border-color: var(--noir); }
.jt-access-call .display { color: var(--bone); margin-bottom: 6px; }
.jt-access-call p { color: rgba(237, 231, 219, .88); margin: 0; max-width: 52ch; }
.jt-access-call .btn { background: var(--bone); color: var(--ink); border-color: var(--bone); }
.jt-access-call .btn:hover { background: var(--red-fill); border-color: var(--red); color: #fff; }
.jt-strong { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 28px) !important; line-height: 1.35; color: var(--ink) !important; border-left: 3px solid var(--red); padding-left: 18px; margin-block: 22px; }
.jt-effort { margin-top: 22px; font-family: var(--serif); font-size: clamp(20px, 2.2vw, 24px); line-height: 1.4; color: var(--ink); }
.btn-red { background: var(--red-fill); border-color: var(--red); color: #fff; }
.btn-red:hover { background: var(--red-fill-hi); border-color: var(--red-hi); color: #fff; }
.jt-call .jt-whatsapp .btn-red, .journey-page #offer .jt-whatsapp .btn-red { background: var(--red-fill); border-color: var(--red); color: #fff; box-shadow: 0 10px 24px -14px rgba(155, 27, 27, .8); }
.jt-call .jt-whatsapp .btn-red:hover { background: var(--red-fill-hi); border-color: var(--red-hi); color: #fff; }

.journey-page .jt-tabs .jt-tab-top { display: none; }
.jt-hero .btn-red { background: var(--red-fill); border-color: var(--red); color: #fff; box-shadow: 0 14px 30px -16px rgba(155, 27, 27, .9); }
.jt-hero .btn-red:hover { background: var(--red-fill-hi); border-color: var(--red-hi); color: #fff; }
.jt-hero .btn-light { background: var(--bone); border-color: var(--bone); color: var(--ink); }
@media (max-width: 760px) { .jt-pillars-open .jt-pillar .tick-list { padding: 0 16px 16px 24px; } .jt-pillars-open .jt-pillar summary { padding: 14px 16px; min-height: 0; } }

/* The seven-step cycle (Edgard, 2026-09-18): Learn, Practice, Apply, Evaluate, Adjust, Master, Repeat */
.jt-cycle-7 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.jt-cycle-7 .jt-cycle-repeat { background: var(--noir); border-color: var(--noir); }
.jt-cycle-7 .jt-cycle-repeat b { color: var(--bone); }
.jt-cycle-7 .jt-cycle-repeat span { color: rgba(237, 231, 219, .85); }
.jt-cycle-7 .jt-cycle-repeat::before { content: '↻'; color: var(--rose); }
@media (max-width: 760px) { .journey-page .jt-cycle-7 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .jt-cycle-7 .jt-cycle-repeat { grid-column: span 2; } }

/* Price with the code (2026-09-18): $1,352 with a red line, then $1,149 */
.price-lines .price-was { font: 600 22px var(--serif); color: var(--muted); text-decoration: line-through; text-decoration-color: var(--red); text-decoration-thickness: 3px; }
.price-lines .price-now { color: var(--red-hi); }
.save-clock-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.save-box .btn-red { background: var(--red-fill); border-color: var(--red); color: #fff; }

/* Vision close and the gym analogy (Edgard, 2026-09-18) */
.jt-era { margin: 22px 0 0; font-family: var(--serif); font-size: clamp(20px, 2.3vw, 26px); line-height: 1.4; color: var(--ink); max-width: 46ch; }
.jt-gym { margin-top: 22px; padding: clamp(18px, 3vw, 28px); background: var(--noir); color: var(--bone); border-radius: var(--radius); }
.jt-gym .eyebrow { color: var(--rose); }
.jt-gym-lead { margin: 6px 0 10px; font-family: var(--serif); font-size: clamp(24px, 3vw, 32px); line-height: 1.2; color: #fff; }
.jt-gym p { color: rgba(237, 231, 219, .9); margin-bottom: 0; }
/* Call page (2026-09-19): the Calendly button stands out on the dark opening; the WhatsApp line stays small */
.call-hero #call-actions .btn:not(.btn-ghost) { background: var(--red-fill); border-color: var(--red); color: #fff; }
.call-hero #call-actions .btn:not(.btn-ghost):hover { background: var(--red-fill-hi); border-color: var(--red-hi); }
.call-hero .call-alt { color: rgba(237, 231, 219, .8); margin-top: 6px; }
.call-hero .call-alt a { color: var(--rose); }

/* 12-month page, 2026-09-19: no empty video frame, price and terms visible from the top, one long page on phones */
.jt-hero-video[hidden] { display: none; }
.jt-hero-grid:has(> .jt-hero-video[hidden]) { grid-template-columns: minmax(0, 1fr); }
.jt-hero-grid:has(> .jt-hero-video[hidden]) .jt-hero-text { max-width: 60rem; }
.jt-hero-price { margin: 12px 0 0; }
.jt-hero-price a { color: inherit; text-decoration: underline; text-underline-offset: 3px; }
.jt-hero.has-footage .jt-hero-price { color: rgba(246, 241, 232, .88); }
.jt-long .jt-bar { display: none; }
.jt-long .jt-panel { border-top: 1px solid var(--line); scroll-margin-top: calc(var(--hdr, 61px) + 8px); }
.journey-page .price-lines li.total b { white-space: nowrap; }

/* About: the eight lines, readable without running the questions */
.ican-static { display: grid; gap: 6px; margin: 10px 0 0; padding-left: 1.4em; }
.ican-static li { font-size: 17px; line-height: 1.45; }
.ican-static b { color: var(--red); font-weight: 700; }

/* The result board clears the sticky header when it scrolls into view (320–390px phones included) */
.result-top, .ican-map, .report-card, .keep-scene, .finish-scene, #gate-heading { scroll-margin-top: calc(var(--header-h, 60px) + 16px); }


.jt-note-foot { padding-block: 18px 26px; margin: 0; }

/* 12-month page, 2026-09-19 (second pass): both prices up front, a price strip and a sticky booking bar on phones */
.jt-prices { display: flex; flex-wrap: wrap; gap: 8px 22px; margin: 16px 0 0; }
.jt-prices > div { display: grid; gap: 2px; }
.jt-prices dt { font: 700 10.5px/1.2 var(--sans); letter-spacing: .12em; text-transform: uppercase; opacity: .78; }
.jt-prices dd { margin: 0; font: 600 22px/1.1 var(--serif); }
.jt-prices s { opacity: .72; text-decoration-color: var(--red); text-decoration-thickness: 2px; }
.jt-prices b { font-size: 26px; }
.jt-hero.has-footage .jt-prices { color: var(--bone); }
.jt-jump { display: none; }
.jt-price-strip { display: none; }
.jt-sticky { display: none; }
/* The presentation in the hero (Edgard, 2026-09-24): title across the top, then the video and his intro side by side.
   On a phone: title, video, intro, buttons. Selector weight beats `.jt-hero-grid:has(> .jt-hero-video[hidden])`. */
.jt-hero .jt-hero-grid.jt-hero-pres { grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); grid-template-areas: "title title" "text video"; align-items: start; row-gap: clamp(16px, 2.2vw, 30px); }
.jt-hero-pres > h1 { grid-area: title; }
.jt-hero-pres > .jt-pres { grid-area: video; }
.jt-hero-pres > .jt-hero-text { grid-area: text; max-width: none; }
.jt-pres-intro { margin: 0 0 12px; max-width: 54ch; }
.jt-hero.has-footage .jt-pres-intro { color: rgba(237, 231, 219, .9); text-shadow: 0 1px 14px rgba(0, 0, 0, .5); }
.jt-pres-intro b { color: var(--bone); font-weight: 700; }
.jt-pres { margin: 0; }
.jt-pres-frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; overflow: hidden; border-radius: 14px; background: #0d0c0b;
  box-shadow: 0 0 0 1px rgba(237, 231, 219, .16), 0 34px 70px -34px rgba(0, 0, 0, .85); }
/* EAU's own cover, 16:9. Zoomed from the top-left corner just enough to crop the subtitle burned into its bottom edge. */
.jt-pres-poster { position: absolute; left: 0; top: 0; width: 114%; height: 114%; max-width: none; object-fit: cover; object-position: 0 0; transform-origin: 40% 30%; transition: transform 1.2s var(--ease); }
.jt-pres-frame::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(180deg, rgba(13, 12, 11, .1) 0%, rgba(13, 12, 11, 0) 40%, rgba(13, 12, 11, .82) 100%), linear-gradient(90deg, rgba(13, 12, 11, .45), rgba(13, 12, 11, 0) 60%); }
/* The whole picture plays; the disc sits bottom-left beside the label, clear of the speaker's face. */
.jt-pres-play { position: absolute; inset: 0; z-index: 2; display: flex; align-items: flex-end; justify-content: flex-start; width: 100%; padding: 16px; background: transparent; border: 0; cursor: pointer; }
.jt-pres-disc { position: relative; width: 72px; aspect-ratio: 1; border-radius: 50%; background: var(--red-fill);
  box-shadow: 0 0 0 10px rgba(155, 27, 27, .28), 0 18px 40px -12px rgba(0, 0, 0, .75); transition: transform .35s var(--ease), box-shadow .35s var(--ease); }
.jt-pres-disc::after { content: ""; position: absolute; left: 50%; top: 50%; transform: translate(-36%, -50%); border-style: solid; border-width: 13px 0 13px 21px; border-color: transparent transparent transparent #fff; }
.jt-pres-play:hover .jt-pres-disc { transform: scale(1.07); box-shadow: 0 0 0 16px rgba(155, 27, 27, .24), 0 22px 44px -12px rgba(0, 0, 0, .8); }
.jt-pres-play:hover ~ .jt-pres-meta, .jt-pres-frame:hover .jt-pres-poster { transform: scale(1.03); }
.jt-pres-play:focus-visible { outline: 3px solid var(--bone); outline-offset: -8px; border-radius: 14px; }
.jt-pres-meta { position: absolute; left: 102px; right: 16px; bottom: 27px; z-index: 3; display: grid; gap: 3px; color: var(--bone); pointer-events: none; transition: transform .6s var(--ease); transform-origin: left bottom; }
.jt-pres-meta span { font: 700 10.5px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rose); }
.jt-pres-meta b { font: 600 clamp(19px, 2vw, 25px)/1.1 var(--serif); color: #fff; }
.jt-pres figcaption { margin-top: 10px; font-size: 13px; color: rgba(237, 231, 219, .72); }
.jt-pres-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.jt-pres[hidden] { display: none; }
@media (max-width: 900px) {
  .jt-hero .jt-hero-grid.jt-hero-pres { grid-template-columns: minmax(0, 1fr); grid-template-areas: "title" "video" "text"; }
}
@media (max-width: 699px) {
  .jt-pres-frame { border-radius: 10px; }
  .jt-pres-play { padding: 12px; }
  .jt-pres-disc { width: 54px; }
  .jt-pres-disc::after { border-width: 10px 0 10px 16px; }
  .jt-pres-meta { left: 78px; right: 12px; bottom: 19px; }
  .jt-pres-meta b { font-size: 18px; }
  .jt-pres-intro { font-size: 15.5px; }
}
@media (prefers-reduced-motion: reduce) { .jt-pres-poster, .jt-pres-disc, .jt-pres-meta { transition: none; } .jt-pres-frame:hover .jt-pres-poster, .jt-pres-play:hover ~ .jt-pres-meta { transform: none; } }
@media (max-width: 699px) {
  .jt-jump { display: flex; flex-wrap: wrap; gap: 8px; margin: 14px 0 0; }
  .jt-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid currentColor; border-radius: 999px; font: 600 13.5px/1 var(--sans); color: inherit; text-decoration: none; }
  .jt-hero.has-footage .jt-jump { color: var(--bone); }
  .jt-price-strip { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .jt-price-strip p { margin: 0; font-size: 14px; line-height: 1.35; }
  .jt-price-strip s { color: var(--muted); }
  .jt-price-strip b { font: 600 20px/1.1 var(--serif); color: var(--ink); }
  .jt-price-strip span { display: block; font-size: 12.5px; color: var(--muted); }
  .jt-price-strip .btn { flex: none; min-height: 44px; }
  .jt-sticky { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; align-items: center; justify-content: space-between; gap: 12px;
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(22, 21, 20, .97); color: var(--bone); box-shadow: 0 -10px 30px -18px rgba(0, 0, 0, .6); }
  .jt-sticky-price { margin: 0; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
  .jt-sticky-price b { font: 600 20px/1.1 var(--serif); }
  .jt-sticky-price s { font-size: 13px; opacity: .7; }
  .jt-sticky .btn { flex: none; min-height: 44px; padding-inline: 18px; }
  body.journey-page { padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px)); }
  .jt-sticky-price span { font-size: 13px; opacity: .75; }
}

/* Result: the 12-month journey block */
.journey-block { margin-top: 18px; }
.journey-block .btn-row { align-items: center; gap: 10px 16px; }
.journey-block .link-quiet { font-weight: 600; text-underline-offset: 3px; min-height: 44px; display: inline-flex; align-items: center; }

/* Full result: who wrote it (2026-09-20) */
.r-about { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 18px 20px; align-items: start; }
.r-about-photo { border-radius: 50%; object-fit: cover; border: 1px solid var(--line); }
@media (max-width: 560px) { .r-about { grid-template-columns: 1fr; gap: 12px; } .r-about-photo { width: 76px; height: 76px; } }
.ican-destination { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--line); font-size: 17px; line-height: 1.45; }
.ican-destination b { color: var(--red); }

/* ---- Mobile audit (2026-09-24) ----
   Tap targets of about 44px, labels that stay readable, and one accordion treatment on the 12-month page:
   the whole row is tappable and the browser's default triangle becomes the site's round "+" (a "×" when open). */
.site-header .mark { padding-block: 4px; }
.header-nav a { display: inline-flex; align-items: center; min-height: 44px; }
.stage-note { font: 700 10px/1.2 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--muted); }
.stage-note.stage-here { color: var(--red); }
@media (max-width: 760px), (pointer: coarse) { a.tag { display: inline-flex; align-items: center; min-height: 40px; } }
@media (max-width: 760px) { .journey-page .jt-note blockquote p { font-size: 16.5px; line-height: 1.55; } }
@media (max-width: 560px) { .ican-status { font-size: 10.5px; } }
.journey-page .jt-doubt { padding: 0; }
.journey-page .jt-doubt > summary { display: flex; align-items: center; min-height: 52px; padding: 12px 52px 12px 16px; }
.journey-page .jt-doubt[open] > summary { margin-bottom: 0; }
.journey-page .jt-doubt > p { padding: 0 16px 14px; }
.journey-page :is(.jt-doubt, .jt-fold) > summary,
.journey-page .jt-outcome > details > summary { list-style: none; position: relative; padding-right: 52px; -webkit-tap-highlight-color: transparent; }
.journey-page :is(.jt-doubt, .jt-fold) > summary::-webkit-details-marker,
.journey-page .jt-outcome > details > summary::-webkit-details-marker { display: none; }
.journey-page :is(.jt-doubt, .jt-fold) > summary::after,
.journey-page .jt-outcome > details > summary::after {
  content: ""; position: absolute; right: 14px; top: 50%; width: 26px; height: 26px; margin-top: -13px; border-radius: 50%;
  border: 1.5px solid currentColor;
  background: linear-gradient(currentColor, currentColor) center / 10px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 10px no-repeat;
  transition: transform 250ms var(--ease);
}
.journey-page :is(.jt-doubt, .jt-fold)[open] > summary::after,
.journey-page .jt-outcome > details[open] > summary::after { transform: rotate(45deg); }

/* ---- Free access (Edgard, 2026-09-24): the start fits one screen, then the tabs ----
   Phones: intro, then the three steps in one compact list, then the tab bar, all inside the first screen.
   Computers: the intro sits beside the steps. Each tab shows its screenshots in a row (swipe on phones). */
.fa-top { padding-block: clamp(18px, 3.5vw, 44px) 14px; background: radial-gradient(50% 60% at 0% 0%, rgba(224, 167, 159, .28), transparent 70%), var(--paper); }
.fa-top-grid { display: grid; gap: 16px; }
.fa-top-head .display { margin: 4px 0 0; }
.fa-top-head .lede { margin: 8px 0 0; }
.fa-top .fa-steps { gap: 0; background: var(--card); border: 1px solid var(--line); }
.fa-top .fa-step { grid-template-columns: 34px 1fr; gap: 10px; padding: 14px 16px; background: none; border: 0; }
.fa-top .fa-step + .fa-step { border-top: 1px solid var(--line); }
.fa-top .fa-num { font-size: 22px; }
.fa-top .fa-step h3 { margin: 0 0 2px; font-size: clamp(20px, 2vw, 24px); }
.fa-top .fa-step p { font-size: 15.5px; line-height: 1.45; }
.fa-top .fa-stores { gap: 10px 14px; margin-top: 10px; }
@media (max-width: 700px) {
  .fa-top .fa-stores { display: grid; grid-template-columns: 1fr 1fr; }
  .fa-top .fa-store .btn { width: 100%; justify-content: center; padding-inline: 10px; }
}
/* Short phones: a little less air, so the tab bar still shows on the first screen. */
@media (max-width: 700px) and (max-height: 740px) {
  .fa-top { padding-top: 12px; }
  .fa-top .h-lg { font-size: 30px; }
  .fa-top-head .lede { margin-top: 4px; }
  .fa-top .fa-step { padding-block: 11px; }
  .fa-more { padding-top: 10px; }
}
@media (min-width: 960px) {
  .fa-top-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
}

.fa-more { background: var(--paper-2); padding-block: 14px clamp(40px, 5vw, 64px); border-top: 1px solid var(--line); }
.fa-tabs { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: 4px; max-width: 400px; padding: 4px; background: var(--card); border: 1px solid var(--line); border-radius: 999px; }
.fa-tabs [role=tab] { min-height: 44px; padding: 6px 8px; border: 0; border-radius: 999px; background: transparent; font: 600 14px/1.2 var(--sans); color: var(--muted); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fa-tabs [role=tab]:hover { color: var(--ink); }
.fa-tabs [role=tab][aria-selected=true] { background: var(--ink); color: var(--paper); }
.fa-tabs [role=tab]:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; }
/* A #weekly-call or #replays link lands with the tab bar (about 54px) visible under the header. */
.fa-panel { padding-top: 18px; scroll-margin-top: calc(var(--header-h, 58px) + 64px); }
.fa-panel:focus { outline: none; }
.fa-panel + .fa-panel { margin-top: 12px; }
.fa-tabbed .fa-panel + .fa-panel { margin-top: 0; }
.fa-panel .display { margin: 4px 0 0; }
.fa-panel-lede { margin: 8px 0 0; max-width: 62ch; color: var(--ink-2); }
.fa-panel-note { margin: 12px 0 0; max-width: 62ch; color: var(--ink-2); }
.fa-rail { list-style: none; margin: 16px 0 0; padding: 0 0 6px; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 2px; }
.fa-card { flex: 0 0 min(60%, 212px); scroll-snap-align: start; display: grid; align-content: start; gap: 10px; }
.fa-card p { margin: 0; font-size: 15px; line-height: 1.45; color: var(--ink-2); }
.fa-card .fa-num { font-size: 20px; margin-right: 4px; }
.fa-zoom { display: block; border-radius: 12px; }
.fa-zoom img { display: block; width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--line-2); box-shadow: var(--shadow); }
.fa-zoom:focus-visible { outline: 2px solid var(--red); outline-offset: 3px; }
@media (min-width: 960px) { .fa-card { flex-basis: 240px; } }

/* Tap a screenshot to see it bigger. */
.fa-lightbox { padding: 0; border: 0; background: transparent; width: min(92vw, 460px); max-width: none; max-height: 94svh; overflow: visible; }
.fa-lightbox::backdrop { background: rgba(20, 17, 14, .84); }
.fa-lightbox img { display: block; width: 100%; height: auto; max-height: 90svh; object-fit: contain; border-radius: 14px; }
.fa-lightbox-close { position: absolute; top: 8px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 50%; background: rgba(20, 17, 14, .72); color: #fff; font: 400 28px/1 var(--sans); cursor: pointer; }

/* Result page (2026-09-25): their own answers behind the name, quoted back under the gap. */
.r-evidence-list { list-style: none; margin: 8px 0 0; padding: 0; display: grid; gap: 8px; }
.r-evidence-list li { padding: 10px 14px; border-left: 3px solid var(--red); background: var(--card); font-size: 16px; line-height: 1.45; color: var(--ink-2); }


/* ---------- The email lock on the result screen (Edgard, 2026-09-26) ---------- */
/* Their name, then the video right away; it pauses at the curious moment until they ask for their full result. */
.result-top.has-video .lede { margin-bottom: 14px; }
.gate-video { margin: 0 0 6px; }
.gate-video .video-shell { padding: 0; border-radius: 0; border: 1px solid var(--line-2); background: var(--noir); }
.gate-video .video-inner { border-radius: 0; }
.video-inner.lockable { container-type: inline-size; }
.video-lock { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: clamp(6px, 2cqw, 14px); padding: 5cqw 7cqw; text-align: center; background: rgba(22, 21, 20, .8); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); color: var(--bone); }
.video-lock-icon { position: relative; width: 18px; height: 14px; margin-top: 10px; border-radius: 3px; background: var(--rose); }
.video-lock-icon::before { content: ''; position: absolute; left: 3px; top: -10px; width: 12px; height: 12px; box-sizing: border-box; border: 2.5px solid var(--rose); border-bottom: 0; border-radius: 8px 8px 0 0; }
.video-lock-title { margin: 0; max-width: 30ch; font: 500 clamp(16px, 4.4cqw, 28px)/1.25 var(--serif); color: var(--bone); text-wrap: balance; }
.video-lock-note { margin: 0; font: 500 clamp(11px, 2.3cqw, 14px)/1.4 var(--sans); color: rgba(237, 231, 219, .75); }
.video-lock-btn { display: inline-flex; align-items: center; gap: 10px; min-height: 40px; padding: 8px 20px; border: 0; border-radius: 999px; background: var(--bone); color: var(--ink); font: 600 clamp(13px, 2.8cqw, 16px)/1 var(--sans); cursor: pointer; box-shadow: 0 0 0 4px rgba(155, 27, 27, .55); }
.video-lock-btn:hover { background: var(--card); }
.video-lock-btn:focus-visible { outline: 2px solid var(--bone); outline-offset: 4px; }
@container (max-width: 380px) { .video-lock-icon, .video-lock-note { display: none; } }
.result-more { margin-top: clamp(22px, 4vw, 40px); }
/* The Lifelong Learner's next line: they already learn, the step is action. */
.ican-note { display: block; margin-top: 4px; font-weight: 600; color: var(--red); }
/* The full result page: the video picks up where the lock paused it. */
.video-continue { margin: 0 0 10px; }

/* ---------------------------------------------------------------------------------------------
   90 Days Transformation Bundle (/90-day-transformation/, Edgard 2026-10-01): the primary offer.
   One long page in the 12-month page's language (same hero, cards, cycle, pillars, gym and price card), no tabs.
   --------------------------------------------------------------------------------------------- */
.nd-intake { margin: 14px 0 0; padding-left: 12px; border-left: 3px solid var(--red); font-weight: 700; color: var(--ink); }
.jt-hero.has-footage .nd-intake { color: var(--bone); border-left-color: var(--rose); }

.nd-flow { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 900px) { .nd-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .nd-flow { grid-template-columns: minmax(0, 1fr); } }

.nd-three-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 0; }
.nd-three-list dt { font: 700 11px/1.3 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--red); margin-bottom: 4px; }
.nd-three-list dd { margin: 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.55; }
@media (max-width: 760px) { .nd-three-list { grid-template-columns: minmax(0, 1fr); } }


.nd-areas { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.nd-areas li { display: grid; gap: 4px; align-content: start; padding: 18px 20px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--red); }
.nd-areas b { font: 600 22px/1.15 var(--serif); }
.nd-area-n { font: 600 11px var(--sans); letter-spacing: .14em; color: var(--red); }
.nd-builds { color: var(--ink-2); font-size: 15px; line-height: 1.5; }
@media (max-width: 900px) { .nd-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .nd-areas { grid-template-columns: minmax(0, 1fr); } }

.nd-rec { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 18px 0 0; }
.nd-rec > div { padding: 16px 18px; background: var(--card); border: 1px solid var(--line); }
.nd-rec dt { font: 600 20px/1.2 var(--serif); margin-bottom: 4px; }
.nd-rec dd { margin: 0; color: var(--ink-2); font-size: 15.5px; }
@media (max-width: 640px) { .nd-rec { grid-template-columns: minmax(0, 1fr); } }

.nd-moments { margin-top: clamp(24px, 4vw, 40px); }
.nd-moments-note { margin-top: 36px; }


.nd-commit-close { font-family: var(--serif); font-size: clamp(20px, 2.2vw, 24px); color: #fff !important; }

.nd-faq { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 16px; align-items: start; }
@media (max-width: 760px) { .nd-faq { grid-template-columns: minmax(0, 1fr); } }
.nd-q { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.nd-q > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 12px 16px; font: 600 18px/1.3 var(--serif); }
.nd-q > summary::-webkit-details-marker { display: none; }
.nd-q > summary::after { content: '+'; flex: none; color: var(--red); font: 500 22px var(--sans); transition: transform 200ms var(--ease); }
.nd-q[open] > summary::after { transform: rotate(45deg); }
.nd-q > summary:focus-visible { outline: 2px solid var(--red); outline-offset: 2px; border-radius: 12px; }
.nd-q > p, .nd-q > ol { margin: 0; padding: 0 16px 16px; color: var(--ink-2); font-size: 15.5px; }
.nd-q > ol { padding-left: 36px; }


.link-arrow { font-weight: 700; text-underline-offset: 4px; display: inline-flex; align-items: center; min-height: 44px; }

/* Homepage: the main offer, and the quieter link to the longer pace */
.help-cta-alt { margin: 10px 0 0; font-size: 15px; }
.help-cta-alt a { font-weight: 600; }
.help-price { display: block; margin-top: 6px; font-size: 14.5px; color: var(--muted); }
.home .help-lede { margin: 0 0 18px; max-width: 54ch; color: var(--ink-2); font-size: 17px; line-height: 1.6; }
/* 12-month page: its place next to the 90 days (Edgard, 2026-10-01) */
.jt-pace { margin: 10px 0 0; max-width: 56ch; }
.jt-hero.has-footage .jt-pace { color: rgba(237, 231, 219, .86); }
.jt-hero.has-footage .jt-pace a { color: var(--bone); }
.jt-pace-card { box-shadow: none; background: var(--paper-2); }
.jt-pace-card p:not(.eyebrow) { margin-bottom: 4px; }
/* Call page: the offer link on the dark opening stays readable */
.call-hero .lede a { color: var(--bone); text-decoration-color: var(--rose); }
.call-hero .lede a:hover { color: #fff; }
/* 90-day page, in the 12-month page's design */
.jt-hero-price .nd-intake { display: block; margin: 0 0 8px; padding-left: 10px; }
.nd-founder { box-shadow: none; }
.nd-founder .display { margin-bottom: 10px; }
.journey-page .nd-three-list, .journey-page .nd-rec { margin-top: 6px; }
.journey-page .jt-gym .nd-commit-close { margin-top: 12px; }
/* 12-month page: the two programs side by side */
.yr-compare { border: 1px solid var(--line); border-radius: var(--radius-sm); background: var(--card); overflow: hidden; }
.yr-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.1fr) minmax(0, 1.1fr); }
.yr-row > span { padding: 12px 16px; border-top: 1px solid var(--line); font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.yr-row > span:first-child { font-weight: 700; color: var(--ink); }
.yr-head > span { border-top: 0; font: 600 18px/1.25 var(--serif); color: var(--ink); background: var(--paper-2); }
.yr-head > span:last-child { color: var(--red); }
@media (max-width: 640px) {
  .yr-row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .yr-row > span:first-child { grid-column: 1 / -1; padding-bottom: 0; border-top: 1px solid var(--line); }
  .yr-row > span:not(:first-child) { border-top: 0; }
  .yr-head > span:first-child { display: none; }
}
/* 90-day page: the psychology of 90 days, and the quieter way to the 12 months */
.nd-psy { margin: clamp(24px, 4vw, 40px) 0 0; }
.nd-psy .display { margin: 4px 0 14px; }
.nd-psy-list { list-style: none; margin: 0 0 12px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; counter-reset: psy; }
.nd-psy-list li { counter-increment: psy; display: grid; gap: 6px; align-content: start; padding: 16px 18px; background: var(--card); border: 1px solid var(--line); border-top: 3px solid var(--red); }
.nd-psy-list li::before { content: counter(psy, decimal-leading-zero); font: 600 11px var(--sans); letter-spacing: .14em; color: var(--red); }
.nd-psy-list b { font: 600 21px/1.2 var(--serif); }
.nd-psy-list span { color: var(--ink-2); font-size: 15px; line-height: 1.55; }
@media (max-width: 640px) { .nd-psy-list { grid-template-columns: minmax(0, 1fr); } .nd-psy-list b { font-size: 19px; } }
.nd-less { margin-top: 18px; padding: 14px 18px; border: 1px dashed var(--line-2); border-radius: var(--radius-sm); background: transparent; }
.nd-less p { margin: 0 0 4px; font-size: 15px; color: var(--ink-2); }
.nd-less b { color: var(--ink); }
.journey-page .nd-less .link-arrow { min-height: 44px; }

/* ---------------------------------------------------------------------------------------------
   90-day page: compact type, and an opening that fits one laptop screen (Edgard, 2026-10-01)
   --------------------------------------------------------------------------------------------- */
.offer-page .jt-hero { padding-block: clamp(16px, 2vw, 26px) clamp(20px, 2.4vw, 32px); }
.offer-page .jt-hero .jt-hero-grid.jt-hero-pres { row-gap: clamp(12px, 1.6vw, 20px); column-gap: clamp(22px, 3vw, 44px); align-items: center; }
.offer-page .jt-hero .h-xl { max-width: 24ch; font-size: clamp(30px, 3.3vw, 48px); line-height: 1.06; text-wrap: balance; }
.nd-kicker { display: block; margin-bottom: 10px; font: 700 11.5px/1.3 var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--red); }
.jt-hero.has-footage .nd-kicker { color: var(--rose); }
.offer-page .jt-hero .lede { font-size: clamp(15.5px, 1.2vw, 17.5px); line-height: 1.55; margin: 0 0 14px; max-width: 52ch; }
.offer-page .jt-hero .btn-row { margin-top: 14px; gap: 10px; }
.offer-page .jt-hero .btn-lg { min-height: 48px; padding: 12px 22px; font-size: 15px; }
.offer-page .jt-hero .btn-light { min-height: 48px; padding: 12px 20px; }
.offer-page .jt-pres figcaption { margin-top: 6px; }
.nd-pricebar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; padding: 10px 14px; border: 1px solid rgba(237, 231, 219, .22); border-radius: 12px; background: rgba(22, 21, 20, .35); }
.offer-page .jt-hero:not(.has-footage) .nd-pricebar { border-color: var(--line); background: var(--card); }
.nd-pricebar p { margin: 0; }
.nd-pricebar-price b { font: 600 clamp(24px, 2.2vw, 30px)/1 var(--serif); }
.nd-pricebar-price span { font-size: 13.5px; opacity: .8; margin-left: 4px; }
.nd-pricebar .nd-intake { margin: 0; padding-left: 12px; font-size: 14px; }
.nd-pres-note { margin: 14px 0 0 !important; font-size: 13.5px !important; line-height: 1.5; opacity: .85; max-width: 56ch; }
.offer-page .jt-hero .journey-path { margin: 0 0 14px; padding-top: 10px; }
.offer-page .jt-hero .journey-path p { font-size: 14.5px; margin-bottom: 6px; }
.offer-page .jt-hero .journey-path-title { font-size: clamp(18px, 1.8vw, 22px); }
@media (max-width: 699px) {
  .offer-page .jt-hero .h-xl { font-size: clamp(27px, 8vw, 34px); max-width: none; }
  .nd-pricebar { padding: 10px 12px; }
}

/* Smaller titles and paragraphs through the whole page */
.offer-page .jt-panel { padding-block: clamp(26px, 3.4vw, 46px); }
.offer-page .h-lg { font-size: clamp(26px, 2.7vw, 38px); line-height: 1.12; }
.offer-page .h-md { font-size: clamp(22px, 2.1vw, 30px); line-height: 1.15; }
.offer-page .section-head { margin-bottom: clamp(16px, 2vw, 24px); }
.offer-page .jt-panel .lede { font-size: clamp(15.5px, 1.2vw, 17px); line-height: 1.6; }
.offer-page .jt-panel p, .offer-page .jt-panel li { font-size: 15.5px; }
.offer-page .card-title { font-size: 20px; }
.offer-page .jt-wider { padding: clamp(18px, 2.4vw, 28px); border-radius: var(--radius-sm); }
.offer-page .jt-wider .display { font-size: clamp(24px, 2.4vw, 32px); max-width: 30ch; }
.offer-page .jt-wider .lede { font-size: 16px; }
.offer-page .jt-strong { font-size: clamp(18px, 1.7vw, 22px) !important; margin-block: 16px; }
.offer-page .jt-effort { font-size: clamp(17px, 1.6vw, 20px); }
.offer-page .jt-note blockquote p { font-size: clamp(17px, 1.6vw, 20px); }
.offer-page .jt-gym-lead { font-size: clamp(21px, 2.2vw, 27px); }
.offer-page .nd-commit-close { font-size: clamp(18px, 1.8vw, 21px); }
.offer-page .jt-cycle b { font-size: 19px; }
.offer-page .jt-cycle span { font-size: 14px; }
.offer-page .nd-areas b { font-size: 19px; }
.offer-page .nd-areas li { padding: 14px 16px; }
.offer-page .nd-builds { font-size: 14px; }
.offer-page .jt-pillar summary { font-size: 19px; min-height: 52px; padding: 12px 16px; }
.offer-page .jt-pillar .tick-list li { font-size: 14.5px; }
.offer-page .price-lines li.total b { font-size: clamp(34px, 3.2vw, 42px); }
.offer-page .nd-psy .display { font-size: clamp(22px, 2.2vw, 30px); }
.offer-page .nd-psy-list b { font-size: 18px; }
.offer-page .nd-psy-list span { font-size: 14.5px; }
.offer-page .nd-psy-list li { padding: 14px 16px; }
/* 90-day page: the HyperFrames loops (paper-on-paper, framed like a notebook page) */
.nd-motion { margin: 6px 0 18px; border: 1px solid var(--line); border-radius: var(--radius-sm); overflow: hidden; background: var(--paper); aspect-ratio: 16 / 9; box-shadow: 0 18px 40px -30px rgba(26, 26, 26, .35); }
.nd-motion img, .nd-motion video { display: block; width: 100%; height: 100%; object-fit: cover; }
.home .home-motion { margin: 26px 0 0; max-width: 720px; }
.about-page .nd-motion { margin: 8px 0 18px; }

/* 90-day page: one glance per step (Edgard, 2026-10-01). Laptops: two columns per step. Phones: steps fold. */
.nd-split { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; }
@media (min-width: 900px) {
  .nd-split { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: 28px; align-items: start; }
  .nd-split-even { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; }
  .offer-page .nd-split .nd-psy { margin-top: 0; }
  .offer-page .nd-psy .display { margin: 2px 0 10px; }
  .offer-page .nd-psy-list { gap: 8px; }
  .offer-page .nd-psy-list li { padding: 12px 14px; gap: 4px; }
  .offer-page .nd-psy-list b { font-size: 17px; }
  .offer-page .nd-psy-list span { font-size: 13.5px; line-height: 1.45; }
  .offer-page .nd-split .jt-wider { margin: 0 0 14px; }
  .offer-page .nd-split .jt-wider .display { font-size: clamp(22px, 2vw, 28px); }
  .offer-page .nd-split .jt-wider .lede, .offer-page .nd-split .jt-strong { font-size: 15.5px !important; }
  .offer-page .nd-split-even > * { margin: 0 !important; }
  .offer-page .nd-split-even .nd-less { display: flex; flex-direction: column; justify-content: center; }
  .offer-page .nd-areas { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .offer-page .nd-areas li { padding: 10px 14px; gap: 2px; }
  .offer-page .nd-areas b { font-size: 17px; }
  .offer-page .nd-areas .nd-builds { font-size: 13.5px; }
  .offer-page .nd-split .jt-gym { margin-top: 0; padding: 18px 20px; }
  .offer-page .nd-flow { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 0; }
  .offer-page .nd-flow li { padding: 12px 14px; }
  .offer-page .nd-split .nd-motion { margin: 0 0 10px; }
  .offer-page .nd-split .jt-note { padding: 18px 22px; }
  .offer-page .jt-pillars { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .offer-page .jt-pillar summary { min-height: 44px; padding: 10px 14px; font-size: 17px; }
  .offer-page .jt-pillar .tick-list { padding: 0 14px 12px 50px; gap: 6px; }
  .offer-page .jt-pillar .tick-list li { font-size: 13.5px; line-height: 1.45; }
  .offer-page .nd-offer { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); }
  .offer-page .nd-offer .jt-call { margin: 0; grid-template-columns: minmax(0, 1fr); padding: 20px 24px; }
  .offer-page .jt-doubts { gap: 8px 16px; }
  .offer-page .jt-isnt { margin-top: 14px; }
  .offer-page .jt-panel .section-head .lede { margin-top: 4px; }
  .offer-page .jt-moments--gallery .moments li { aspect-ratio: 16 / 9; }
  .offer-page .nd-moments { margin-top: 16px; }
  .offer-page .nd-moments-note { margin-top: 8px; }
}
/* Phones: the psychology cards slide sideways instead of stacking */
@media (max-width: 640px) {
  .offer-page .nd-psy-list { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 10px; padding-bottom: 6px; scrollbar-width: none; }
  .offer-page .nd-psy-list::-webkit-scrollbar { display: none; }
  .offer-page .nd-psy-list li { flex: 0 0 84%; scroll-snap-align: start; }
}
/* Phones: the middle steps fold into one tap each (opened by default only when a link points inside them) */
.nd-acc { border-top: 1px solid var(--line); }
.nd-acc > summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 60px; padding: 14px var(--gutter); font: 600 21px/1.2 var(--serif); color: var(--ink); background: var(--card); }
.nd-acc > summary::-webkit-details-marker { display: none; }
.nd-acc > summary::after { content: '+'; flex: none; color: var(--red); font: 500 24px var(--sans); transition: transform 200ms var(--ease); }
.nd-acc[open] > summary::after { transform: rotate(45deg); }
.nd-acc > summary:focus-visible { outline: 2px solid var(--red); outline-offset: -2px; }
.nd-acc > summary small { display: block; font: 500 13px/1.3 var(--sans); color: var(--muted); margin-top: 3px; }
.jt-long .jt-panel.nd-folded { padding-block: 0; }
.jt-long .jt-panel.nd-folded .nd-acc[open] > .wrap { padding-block: 18px 26px; }
/* 90-day page: one glance per step on laptops */
@media (min-width: 900px) {
  .offer-page .jt-panel { padding-block: 22px 16px; }
  .offer-page .jt-steps { margin-top: 14px; padding-top: 10px; }
  .offer-page .jt-steps .btn { min-height: 44px; padding: 10px 18px; font-size: 14px; }
  .offer-page .section-head { margin-bottom: 14px; }
  .offer-page .jt-panel > .wrap > .eyebrow { margin-bottom: 4px; }
  .offer-page .nd-split .jt-note blockquote p { font-size: 17px; margin-bottom: 10px; }
  .offer-page .jt-moments--gallery .moments li { aspect-ratio: 2 / 1; }
  .offer-page .jt-moments--gallery .moments li:nth-child(even) { transform: none; }
  .offer-page .nd-split .nd-motion { aspect-ratio: 16 / 8; }
  .offer-page .jt-fold.card { padding: 4px 14px; }
  .offer-page .nd-rec { gap: 8px; margin-top: 4px; }
  .offer-page .nd-rec > div { padding: 10px 12px; }
  .offer-page .nd-rec dt { font-size: 17px; }
  .offer-page .nd-rec dd, .offer-page .nd-three-list dd { font-size: 14px; }
  .offer-page .nd-three-list { gap: 10px; }
  .offer-page .jt-doubt { padding: 8px 14px; }
  .offer-page #included .jt-fold { margin-top: 10px; }
  .offer-page #included > .wrap > p.small { margin: 6px 0 0; font-size: 13px; }
}
@media (min-width: 900px) {
  .offer-page .nd-col > .nd-less { margin-top: 14px; }
  .offer-page .nd-col > .jt-fold { margin-top: 10px; }
  .offer-page .nd-psy > p.small { margin: 6px 0 0; font-size: 13px; }
  .offer-page .nd-founder { padding: 18px 22px; }
}
@media (min-width: 900px) {
  .offer-page .nd-split .nd-psy-list { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .offer-page .nd-split .nd-psy-list li { display: grid; grid-template-columns: 28px minmax(0, 1fr); column-gap: 8px; row-gap: 1px; padding: 9px 14px; border-top: 1px solid var(--line); border-left: 3px solid var(--red); }
  .offer-page .nd-split .nd-psy-list li::before { grid-row: span 2; padding-top: 4px; }
  .offer-page .nd-split .nd-psy-list span { grid-column: 2; }
  .offer-page .nd-founder .btn { margin-top: 4px; }
}
p.nd-less { margin: 14px 0 0; padding: 12px 16px; font-size: 15px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
p.nd-less a { font-weight: 700; min-height: 44px; display: inline-flex; align-items: center; }
@media (min-width: 900px) {
  .offer-page .nd-split .jt-wider { padding: 16px 20px; }
  .offer-page .nd-split .jt-strong { margin-block: 10px; }
  .offer-page .nd-col > .jt-fold .tick-list { gap: 4px; }
  .offer-page .nd-col > .jt-fold .tick-list li { font-size: 14.5px; }
}
@media (min-width: 900px) {
  .offer-page p.nd-less { flex-wrap: nowrap; padding: 6px 14px; margin-top: 10px; }
  .offer-page p.nd-less .js-annual-price { white-space: nowrap; }
  .offer-page .nd-rec { grid-template-columns: minmax(0, 1fr); gap: 4px; }
  .offer-page .nd-rec > div { display: flex; gap: 10px; align-items: baseline; padding: 6px 10px; }
  .offer-page .nd-rec dt { font-size: 16px; margin: 0; flex: none; width: 150px; }
  .offer-page .nd-split .nd-motion { aspect-ratio: 2 / 1; }
  .offer-page .jt-moments--gallery .moments li { aspect-ratio: 3 / 1; }
  .offer-page #trust .section-head, .offer-page #included .section-head { margin-bottom: 10px; }
  .offer-page #trust .section-head .display, .offer-page #included .section-head .display, .offer-page #how > .wrap > .display { font-size: clamp(24px, 2.2vw, 30px); }
  .offer-page .jt-cycle span { font-size: 13.5px; line-height: 1.45; }
  .offer-page .jt-cycle b { font-size: 17px; }
  .offer-page .nd-flow { gap: 8px; }
}

/* About page: same content, less empty space on laptops (Edgard, 2026-10-01) */
@media (min-width: 901px) {
  .about-page .simple-hero { padding-block: clamp(32px, 4vw, 56px); }
  .about-page .simple-hero .h-xl { font-size: clamp(40px, 4.2vw, 60px); line-height: 1.04; }
  .about-page .simple-hero .lede { font-size: 17px; }
  .about-page .section { padding-block: clamp(32px, 3.6vw, 52px); }
  .about-page .section > .wrap.prose { max-width: 1160px; }
  .about-page .section > .wrap.prose > p, .about-page .section > .wrap.prose > .definition { max-width: 66ch; }
  /* Why I built this: the loop beside the story */
  .about-page section[aria-labelledby="why-title"] > .wrap { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.9fr); column-gap: clamp(28px, 4vw, 56px); align-items: start; }
  .about-page section[aria-labelledby="why-title"] > .wrap > * { grid-column: 1; }
  .about-page section[aria-labelledby="why-title"] > .wrap > .nd-motion { grid-column: 2; grid-row: 1 / span 6; align-self: center; margin: 0; }
  .about-page section[aria-labelledby="why-title"] .definition { margin-top: 18px; }
  /* What a Modern Earner builds: capabilities side by side, the five lines in two columns */
  .about-page .caplist { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 10px; }
  .about-page .caplist li { display: grid; align-content: start; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); }
  .about-page .caplist .desc { font-size: 14px; line-height: 1.45; }
  .about-page .ican-static { columns: 2; column-gap: 32px; }
  .about-page .ican-static li { break-inside: avoid; }
  .about-page .ican-destination, .about-page #five-lines { max-width: none; }
  .about-page #five-lines { margin-top: 22px; }
}

/* Laptops only (Edgard, 2026-10-01): paragraph text one step smaller; phones keep 17px */
@media (min-width: 901px) {
  body { font-size: 16px; }
  .lede { font-size: clamp(16.5px, 1.3vw, 18px); }
}
/* 90-day page: "Start building your first two assets" */
.nd-assets { margin: 0 0 14px; padding: 14px 18px; border: 1px solid var(--line); border-left: 3px solid var(--red); border-radius: var(--radius-sm); background: var(--card); }
.nd-assets .eyebrow { margin-bottom: 4px; }
.nd-assets-lead { margin: 0 0 4px; font-size: 16px; line-height: 1.5; color: var(--ink-2); }
.nd-assets-lead b { color: var(--ink); }
.nd-assets .small { margin: 0; }
@media (min-width: 900px) { .offer-page #areas .nd-areas { grid-template-columns: repeat(3, minmax(0, 1fr)); } .offer-page #areas .nd-areas li { padding: 9px 12px; } .offer-page #areas .nd-assets { padding: 12px 16px; } .offer-page #areas .nd-assets-lead { font-size: 15px; } }

/* Questions: how much of the profile is built (Edgard, 2026-10-01) */
.q-progress-text { margin: 0 0 12px; font: 700 13px/1.3 var(--sans); color: var(--red); letter-spacing: .01em; }