/* Homepage signature sections + human presence. Loaded after home.css.
   Same identity (paper, ink, red, serif). Phones first; wide screens pin a stage and scrub it with scroll.
   Every "hidden until it's its turn" rule sits under .sig-ready, which JavaScript adds: without it, all content shows. */

@property --m { syntax: '<number>'; inherits: true; initial-value: 0; }

/* No more numbered side column: each section composes its own space. */
.home .fg-row { grid-template-columns: minmax(0, 1fr); }

/* ---------- Shared controls ---------- */
.home .sig-controls { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.home .sig-pills { display: flex; gap: 6px; }
.home .sig-pill, .home .sig-tick, .home .sig-arrow {
  min-width: 44px; min-height: 44px; padding: 0 12px; border: 1px solid currentColor; border-radius: 3px; background: transparent; color: inherit;
  font: 700 13px/1 var(--fg-mono); letter-spacing: .04em; cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease);
}
.home .sig-next {
  min-height: 44px; padding: 0 18px; border: 1px solid var(--fg-ink); border-radius: 3px; background: var(--fg-ink); color: var(--fg-on-dark);
  font: 600 14.5px/1 var(--sans); cursor: pointer; box-shadow: 4px 4px 0 var(--fg-red); transition: transform 200ms var(--ease), box-shadow 200ms var(--ease);
}
.home .sig-next:hover { transform: translate(-1px, -1px); box-shadow: 5px 5px 0 var(--fg-red); }
.home .sig-pill[aria-pressed="true"] { background: var(--fg-ink); color: var(--fg-on-dark); border-color: var(--fg-ink); }
/* Definition parts: a dot per part (the 44px button stays the tap target). */
.home .sig-dot { display: grid; place-items: center; padding: 0; }
.home .sig-dot span { width: 10px; height: 10px; border-radius: 50%; border: 2px solid currentColor; }
.home .sig-dot[aria-pressed="true"] span { background: currentColor; }
.home .sig-scroll .sig-track { position: relative; }
.home .sig-scroll .sig-stage { position: sticky; top: var(--sticky-top, 64px); min-height: calc(100svh - var(--sticky-top, 64px)); align-content: center; }

/* =====================================================================
   02 · What is a Modern Earner? — the definition builds
   ===================================================================== */
.home .sig-define { background: var(--fg-paper-2); overflow: clip; }
.home .def-stage { display: grid; gap: 14px; grid-template-areas: "head" "visual" "senses" "controls"; }
.home .def-head { grid-area: head; }
.home .sig-define .fg-kicker { margin-bottom: 4px; font-size: 12.5px; }
.home .sig-define .fg-term { margin: 0 0 12px; font: 600 clamp(56px, 15.5vw, 150px)/.86 var(--serif); letter-spacing: -.035em; color: var(--fg-ink); }
.home .sig-define .fg-pos { display: inline-block; vertical-align: top; margin: .2em 0 0 .15em; font-size: max(18px, .24em); letter-spacing: .02em; }
.home .sig-define .define-lead { margin: 0; max-width: 21ch; font: 500 clamp(22px, 5.8vw, 40px)/1.16 var(--serif); color: var(--fg-ink); }
.home .def-visual { grid-area: visual; }
.home .def-visual .dv { display: block; width: 100%; height: auto; overflow: visible; }
.home .def-senses { grid-area: senses; display: grid; gap: 22px; margin: 0; padding: 0; list-style: none; }
.home .def-senses .define-point { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2px; margin: 0; padding: 0; background: none; border: 0; box-shadow: none; }
.home .def-senses .fg-sense { font: italic 600 26px/1 var(--serif); color: var(--fg-red-text); padding-top: 3px; }
.home .def-senses .define-tag { position: static; display: block; margin: 0 0 8px; padding: 0; border-radius: 0; background: none; box-shadow: none; text-transform: none; font: 600 clamp(24px, 6vw, 32px)/1.08 var(--serif); letter-spacing: -.01em; color: var(--fg-ink); }
.home .def-visual { scroll-margin-top: calc(var(--sticky-top, 64px) + 8px); }
.home .def-senses p { margin: 0 0 6px; font-size: 16px; line-height: 1.58; color: var(--fg-ink-2); }
.home .def-senses .fg-note { margin-top: 10px !important; }
.home .def-controls { grid-area: controls; color: var(--fg-ink); }
.home .sig-define .define-close { position: relative; margin: 0; padding: 18px 0 0 28px; max-width: 52ch; border-top: 1px solid var(--fg-rule); font: 500 clamp(19px, 2vw, 24px)/1.4 var(--serif); }

/* One part at a time (JavaScript on) */
.home .sig-define.sig-ready .def-senses { gap: 0; }
.home .sig-define.sig-ready .define-point { grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(12px); transition: opacity 450ms var(--ease), transform 450ms var(--ease), visibility 0s linear 450ms; }
.home .sig-define.sig-ready[data-step="0"] .def-senses { min-height: 0; }
.home .sig-define[data-step="1"] [data-part="1"], .home .sig-define[data-step="2"] [data-part="2"], .home .sig-define[data-step="3"] [data-part="3"], .home .sig-define[data-step="4"] [data-part="4"] { opacity: 1; visibility: visible; transform: none; transition-delay: 150ms, 150ms, 0s; }

/* The drawing */
.home .dv-label { font: 600 20px var(--sans); fill: var(--fg-ink); letter-spacing: .01em; }
.home .dv-small { font-size: 18px; fill: var(--fg-ink-2); }
.home .dv-node { fill: var(--fg-red); }
.home .dv-thin { stroke: var(--fg-ink); stroke-width: 1.5; stroke-dasharray: 3 6; }
.home .dv-disc { fill: var(--fg-ink); }
.home .dv-ring { fill: none; stroke: var(--fg-red); stroke-width: 1.5; stroke-dasharray: 4 7; opacity: 0; transform-box: view-box; transform-origin: 280px 250px; transition: opacity 500ms var(--ease); }
.home .dv-core-text { font: 600 27px var(--serif); fill: var(--fg-on-dark); opacity: 0; transition: opacity 400ms var(--ease); }
.home .dv-draw { fill: none; stroke: var(--fg-ink); stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 800ms var(--ease) calc(var(--i) * 80ms); }
.home .dv-mesh { stroke: var(--fg-hair); stroke-width: 1.5; }
.home .dv-sat { opacity: 0; transform: scale(.3); transform-box: fill-box; transform-origin: center; transition: opacity 450ms var(--ease) calc(250ms + var(--i) * 90ms), transform 600ms var(--ease) calc(250ms + var(--i) * 90ms); }
.home .dv-single { transition: opacity 400ms var(--ease); }
.home .dv-system { transform-box: view-box; transform-origin: 280px 250px; transition: transform 1000ms var(--ease); }
.home .dv-res, .home .dv-route { opacity: 0; transition: opacity 500ms var(--ease); pointer-events: none; }
.home .dv-square { fill: var(--fg-on-dark); stroke: var(--fg-ink); stroke-width: 2; }
.home .dv-flow { stroke: var(--fg-red); stroke-width: 2; stroke-dasharray: 5 9; }
.home .dv-blocked { stroke: var(--fg-ink); stroke-width: 2; stroke-dasharray: 6 8; opacity: .35; }
.home .dv-cross { stroke: var(--fg-red); stroke-width: 4; stroke-linecap: round; }
.home .dv-path { fill: none; stroke: var(--fg-red); stroke-width: 3; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset 1200ms var(--ease) 500ms; }
.home .dv-way { opacity: 0; transition: opacity 400ms var(--ease) calc(900ms + var(--i) * 160ms); }
.home .dv-pole { stroke: var(--fg-ink); stroke-width: 2.5; }
.home .dv-pennant { fill: var(--fg-red); }

.home .sig-define[data-step="0"] .dv-t0 { opacity: 1; }
.home .sig-define[data-step="1"] .dv-t1 { opacity: 1; }
.home .sig-define:is([data-step="2"], [data-step="3"], [data-step="4"]) .dv-t2 { opacity: 1; }
.home .sig-define:not([data-step="0"]) .dv-single { opacity: 0; }
.home .sig-define:not([data-step="0"]) .dv-draw { stroke-dashoffset: 0; }
.home .sig-define:not([data-step="0"]) .dv-sat { opacity: 1; transform: none; }
.home .sig-define[data-step="2"] .dv-res { opacity: 1; }
.home .sig-define[data-step="2"] .dv-flow { animation: dv-flow 1.1s linear infinite; }
.home .sig-define:is([data-step="2"], [data-step="3"], [data-step="4"]) .dv-ring { opacity: 1; animation: dv-spin 18s linear infinite; }
.home .sig-define:is([data-step="3"], [data-step="4"]) .dv-system { transform: translate(-120px, 110px) scale(.55); }
.home .sig-define:is([data-step="3"], [data-step="4"]) .dv-route { opacity: 1; }
.home .sig-define:is([data-step="3"], [data-step="4"]) .dv-path { stroke-dashoffset: 0; }
.home .sig-define:is([data-step="3"], [data-step="4"]) .dv-way { opacity: 1; }
@keyframes dv-flow { to { stroke-dashoffset: -28; } }
@keyframes dv-spin { to { transform: rotate(360deg); } }

@media (min-width: 901px) {
  .home .def-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); grid-template-areas: "head visual" "senses visual" "controls visual"; grid-template-rows: auto 1fr auto; column-gap: clamp(32px, 5vw, 88px); row-gap: 22px; align-items: start; }
  .home .def-visual { align-self: center; }
  .home .sig-define .fg-term { font-size: clamp(72px, 8.6vw, 150px); }
  .home .sig-define .define-lead { font-size: clamp(26px, 2.6vw, 40px); }
  .home .sig-define.sig-scroll .def-track { height: calc((100svh - var(--sticky-top, 64px)) * 4.4); }
  .home .sig-define.sig-scroll .def-stage { padding-block: 24px; }
}

/* =====================================================================
   04 · 8 old rules that quietly changed — before turns into now
   ===================================================================== */
.home .sig-shift { background: #141312; color: var(--fg-on-dark); }
.home .sig-shift .fg-kicker { color: var(--rose); }
.home .sig-shift .fg-title { max-width: 22ch; margin: 0 0 clamp(14px, 3vw, 32px); color: var(--fg-on-dark); font-size: clamp(25px, 4.4vw, 64px); line-height: 1.02; }
/* Phones: the tab already shows the section's title, so the small label above the heading isn't repeated. */
body.cp .cp-open .fg-kicker:not(h2) { display: none; }
body.cp .cp-open h2.fg-kicker { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.home .sig-shift .fg-title .grad { display: block; color: var(--rose); }
.home .shift-stage { display: grid; gap: 14px; }
.home .shift-rules { display: grid; gap: 36px; margin: 0; padding: 0; list-style: none; }
.home .shift-rule { margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "label" "visual" "before" "now"; }
.home .rule-visual { grid-area: visual; margin: 0 0 8px; }
.home .rv { display: block; width: 100%; height: auto; max-height: min(190px, 24svh); overflow: visible; }
/* The pictures: ink = paper lines, red = what the new rule adds */
.home .rv-t { font: 600 14px var(--sans); fill: rgba(246, 241, 232, .78); }
.home .rv-t-now { fill: var(--rose); }
.home .rv-t-big { font: 600 22px var(--serif); fill: var(--fg-on-dark); }
.home .rv-t-dark { font: 700 15px var(--sans); fill: #141312; }
.home .rv-t-white { font: 700 13px var(--sans); fill: #fff; }
.home .rv-t-chip { font: 600 13px var(--sans); fill: var(--fg-on-dark); }
.home .rv-ink { fill: none; stroke: rgba(246, 241, 232, .85); stroke-width: 2.5; stroke-linejoin: round; stroke-linecap: round; }
.home .rv-fill { fill: #cbbfad; }
.home .rv-red, .home .rv-redfill { fill: var(--fg-red); }
.home .rv-stop { stroke: var(--rose); stroke-width: 5; stroke-linecap: round; }
.home .rv-loop { fill: none; stroke: var(--rose); stroke-width: 3; stroke-dasharray: 10 8; }
.home .rv-link { stroke: rgba(246, 241, 232, .4); stroke-width: 2; }
.home .rv-flowline { fill: none; stroke: var(--rose); stroke-width: 2.5; stroke-dasharray: 5 7; animation: rv-flow 1.2s linear infinite; }
.home .rv-chip { fill: rgba(155, 27, 27, .55); stroke: var(--rose); stroke-width: 1.5; }
.home .rv-whole { fill: #cbbfad; }
.home .rv-slice { fill: none; stroke-width: 34; }
.home .rv-slice-salary { stroke: #cbbfad; }
.home .rv-slice-a { stroke: var(--fg-red); }
.home .rv-slice-b { stroke: #c2554c; }
.home .rv-slice-c { stroke: var(--rose); }
/* Before fades as the rule turns; now builds in its place */
.home .rv-before { opacity: clamp(0, calc(1 - var(--m) * 1.8), 1); }
.home .rv-now { opacity: clamp(0, calc(var(--m) * 2 - .5), 1); }
.home .rv-pop { transform-box: fill-box; transform-origin: center; transform: scale(clamp(0, calc((var(--m) - .35 - var(--d, 0)) * 3), 1)); }
.home .rv-grow { transform-box: fill-box; transform-origin: 50% 100%; transform: scaleY(clamp(0, calc((var(--m) - .35 - var(--d, 0)) * 3), 1)); }
.home .rv-wobble { transform-box: view-box; transform-origin: 200px 204px; animation: rv-wobble 2.4s ease-in-out infinite; }
.home .rv-spin { transform-box: view-box; transform-origin: 200px 124px; animation: rv-spin 9s linear infinite; }
.home .rv-pulse { animation: rv-pulse 1.8s ease-in-out infinite; }
.home .rv-age { animation: rv-age 3s ease-in-out infinite alternate; }
.home .rv-drop { animation: rv-drop 2.2s var(--ease) infinite; }
@keyframes rv-flow { to { stroke-dashoffset: -24; } }
@keyframes rv-wobble { 0%, 100% { transform: rotate(-2.5deg); } 50% { transform: rotate(2.5deg); } }
@keyframes rv-spin { to { transform: rotate(360deg); } }
@keyframes rv-pulse { 50% { opacity: .55; } }
@keyframes rv-age { to { fill: #6f675d; } }
@keyframes rv-drop { 0% { translate: 0 -60px; opacity: 0; } 35%, 80% { translate: 0 0; opacity: 1; } 100% { translate: 0 0; opacity: 1; } }
.home .rule-label { grid-area: label; display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin: 0 0 6px; max-width: none; font: 600 12px/1.2 var(--fg-mono); letter-spacing: .1em; text-transform: uppercase; color: rgba(246, 241, 232, .62); }
.home .rule-n { font: 600 clamp(44px, 12vw, 120px)/.8 var(--serif); letter-spacing: -.04em; color: transparent; -webkit-text-stroke: 1.5px var(--rose); }
.home .rule-cat { color: var(--rose); }
.home .rule-before, .home .rule-now { margin: 0; max-width: 26ch; }
.home .rule-before { grid-area: before; margin-bottom: 8px; --bs: clamp(20px, 5.4vw, 46px); font: 500 var(--bs)/1.12 var(--serif); color: #b9ad9b; }
.home .rule-now { grid-area: now; --ns: clamp(23px, 6.2vw, 54px); font: 600 var(--ns)/1.06 var(--serif); color: var(--fg-on-dark); }
.home .rule-tag { display: inline-block; vertical-align: .5em; margin-right: 10px; padding: 4px 7px; font: 800 11px/1 var(--fg-mono); letter-spacing: .1em; text-transform: uppercase; }
.home .rule-before .rule-tag { border: 1px solid rgba(246, 241, 232, .45); color: rgba(246, 241, 232, .72); }
.home .rule-now .rule-tag { background: var(--fg-red); color: #fff; transform: rotate(-4deg); }
.home .shift-nav { display: grid; grid-template-columns: 44px 1fr auto; grid-template-areas: "ticks ticks ticks" "prev . next"; gap: 12px 10px; color: var(--fg-on-dark); }
.home .sig-ticks { grid-area: ticks; display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.home .sig-tick { min-width: 0; padding: 0; border-color: rgba(246, 241, 232, .3); color: rgba(246, 241, 232, .7); font-size: 11.5px; }
.home .sig-tick[aria-current="step"] { background: var(--fg-red); border-color: var(--fg-red); color: #fff; }
.home .sig-arrow { grid-area: prev; padding: 0; border-color: rgba(246, 241, 232, .45); font-size: 17px; }
.home .shift-nav .sig-next { grid-area: next; background: var(--fg-paper); color: var(--fg-ink); border-color: var(--fg-on-dark); }
.home .sig-shift .hook-line { max-width: 40ch; margin: clamp(28px, 5vw, 56px) 0 0; color: var(--fg-on-dark); font-size: clamp(21px, 2.3vw, 30px); }
.home .sig-shift .hook-line em { color: var(--rose); }

/* One rule at a time; the old sentence is struck, shrinks and fades as the new one rises (JavaScript on) */
.home .sig-shift.sig-ready .shift-rules { gap: 0; cursor: pointer; }
.home .sig-shift.sig-ready .shift-rule { grid-area: 1 / 1; align-self: start; opacity: 0; pointer-events: none; transition: opacity 380ms var(--ease), --m 900ms var(--ease); }
.home .sig-shift.sig-ready .shift-rule.is-active { opacity: 1; pointer-events: auto; }
.home .sig-shift.sig-ready .rule-before { --shrink: .3; font-size: calc(var(--bs) * (1 - var(--m) * var(--shrink))); opacity: calc(1 - var(--m) * .35); }
@media (min-width: 901px) { .home .sig-shift.sig-ready .rule-before { --shrink: .5; } }
.home .sig-shift.sig-ready .rule-before .rule-text { background: linear-gradient(var(--fg-red), var(--fg-red)) no-repeat 0 60% / calc(var(--m) * 170%) max(2px, .07em); }
.home .sig-shift.sig-ready .rule-now { opacity: clamp(0, calc(var(--m) * 2.2 - .7), 1); transform: translateY(calc((1 - var(--m)) * 26px)); }
.home .sig-shift.sig-scroll .shift-rule { transition: opacity 250ms var(--ease); }

@media (min-width: 901px) {
  .home .shift-stage { grid-template-columns: minmax(0, 1fr); }
  .home .shift-rule { grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); grid-template-areas: "label visual" "before visual" "now visual"; grid-template-rows: auto auto 1fr; column-gap: clamp(28px, 4vw, 72px); align-items: start; }
  .home .rule-visual { align-self: center; margin: 0; }
  .home .rv { max-height: min(340px, 42svh); }
  .home .shift-nav { grid-template-columns: auto 1fr auto auto; grid-template-areas: "ticks . prev next"; align-items: center; }
  .home .sig-ticks { grid-template-columns: repeat(8, 48px); }
  .home .sig-shift.sig-scroll .shift-track { height: calc((100svh - var(--sticky-top, 64px)) * 5.2); }
  .home .sig-shift.sig-scroll .shift-stage { align-content: center; padding-block: 28px; }
  .home .sig-shift.sig-scroll .sig-arrow { display: none; }
}

/* =====================================================================
   06 · How exactly I can help you — one connected system
   ===================================================================== */
.home .sig-eco { background: var(--fg-sand); }
.home .sig-eco .fg-title { font-size: clamp(38px, 5.6vw, 84px); line-height: .98; max-width: 14ch; }
.home .eco-map { margin: 18px auto 0; max-width: 520px; }
.home .eco-svg { display: block; width: 100%; height: auto; overflow: visible; }
.home .eco-guide { fill: none; stroke: rgba(26, 26, 26, .12); stroke-width: 1; }
.home .eco-arc-line { fill: none; stroke: rgba(26, 26, 26, .42); stroke-width: 2.5; stroke-linecap: round; stroke-dasharray: 1.5 9; animation: eco-flow 1.3s linear infinite; }
.home .eco-arrow { fill: rgba(26, 26, 26, .5); }
.home .eco-arc.lit .eco-arc-line { stroke: var(--fg-red); stroke-width: 3.5; }
.home .eco-arc.lit .eco-arrow { fill: var(--fg-red); }
.home .eco-spoke { stroke: rgba(26, 26, 26, .25); stroke-width: 1.5; transition: stroke 300ms var(--ease); }
.home .eco-spoke.lit { stroke: var(--fg-red); stroke-width: 3; }
.home .eco-hub circle { fill: var(--fg-ink); }
.home .eco-hub-you { font: 700 14px var(--fg-mono); letter-spacing: .18em; fill: var(--rose); }
.home .eco-hub-name { font: 600 27px var(--serif); fill: var(--fg-on-dark); }
.home .eco-node { cursor: pointer; }
.home .eco-halo { fill: rgba(155, 27, 27, .1); opacity: 0; transform-box: fill-box; transform-origin: center; transition: opacity 300ms var(--ease); }
.home .eco-dot { fill: rgba(26, 26, 26, .28); transition: fill 300ms var(--ease) calc(var(--i) * 70ms); }
.home .eco-disc { fill: var(--fg-on-dark); stroke: var(--fg-ink); stroke-width: 1.5; transition: fill 300ms var(--ease), stroke 300ms var(--ease); }
.home .eco-num { font: italic 600 32px var(--serif); fill: var(--fg-ink); transition: fill 300ms var(--ease); }
.home .eco-name { font: 600 19px var(--sans); fill: var(--fg-muted); transition: fill 300ms var(--ease); }
.home .eco-node.on .eco-halo { opacity: 1; animation: eco-pulse 2.6s var(--ease) infinite; }
.home .eco-node.on .eco-dot { fill: var(--fg-red); }
.home .eco-node.on .eco-disc { fill: var(--fg-red); stroke: var(--fg-red); }
.home .eco-node.on .eco-num { fill: #fff; }
.home .eco-node.on .eco-name { fill: var(--fg-ink); }
@keyframes eco-flow { to { stroke-dashoffset: -21; } }
@keyframes eco-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.12); } }

.home .eco-tabs { display: block; margin: 16px 0 0; }
.home .eco-tab-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.home .eco-tab { display: grid; align-content: start; gap: 5px; min-height: 68px; padding: 10px 10px 12px; border: 1px solid var(--fg-ink); border-radius: 3px; background: transparent; color: var(--fg-ink); text-align: left; cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.home .eco-tab-n { font: italic 600 22px/1 var(--serif); color: var(--fg-red-text); }
.home .eco-tab-name { font: 600 13px/1.2 var(--sans); }
.home .eco-tab[aria-pressed="true"] { background: var(--fg-ink); color: var(--fg-on-dark); }
.home .eco-tab[aria-pressed="true"] .eco-tab-n { color: var(--rose); }
.home .sig-eco.sig-ready .pillars { display: block; margin-top: 14px; border-bottom: 0; }
.home .sig-eco.sig-ready .pillar { display: none; padding: 18px 0 0; }
.home .sig-eco.sig-ready .pillar.is-active { display: flex; animation: eco-in 420ms var(--ease) both; }
.home .sig-eco.sig-ready .pillar + .pillar { border-left: 0; }
.home .sig-eco.sig-ready .pillar-route::before { display: none; }
.home .sig-eco.sig-ready .pillar h3 { font-size: clamp(28px, 3vw, 40px); }
@keyframes eco-in { from { opacity: 0; transform: translateY(8px); } }

@media (min-width: 901px) {
  .home .sig-eco .fg-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); grid-template-areas: "kicker map" "title map" "name map" "lede map" "tabs map" "list map" "cta map" "alt map"; grid-template-rows: auto auto auto auto auto auto auto 1fr; column-gap: clamp(32px, 5vw, 88px); align-items: start; }
  .home .sig-eco .fg-kicker { grid-area: kicker; }
  .home .sig-eco .fg-title { grid-area: title; }
  .home .sig-eco .journey-name { grid-area: name; margin-bottom: 8px; }
  .home .sig-eco .eco-map { grid-area: map; align-self: center; margin: 0; max-width: 600px; width: 100%; justify-self: end; }
  .home .sig-eco .eco-tabs { grid-area: tabs; }
  .home .sig-eco .pillars { grid-area: list; }
  .home .sig-eco .help-cta { grid-area: cta; }
  .home .sig-eco .help-lede { grid-area: lede; }
  .home .sig-eco .help-cta-alt { grid-area: alt; }
}

/* =====================================================================
   Human presence: real footage (only when permission is confirmed, or in the local preview)
   ===================================================================== */
.home .film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 01 · Opening: the room behind the headline */
html.footage .home .hero-intro { position: relative; overflow: hidden; background: #141312 url("/media/broll/home-room.jpg") center / cover no-repeat; color: var(--fg-on-dark); border-bottom-color: #000; }
html.footage .home .hero-intro::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(90deg, rgba(20, 19, 18, .92) 0%, rgba(20, 19, 18, .76) 38%, rgba(20, 19, 18, .34) 72%, rgba(20, 19, 18, .5) 100%), linear-gradient(0deg, rgba(20, 19, 18, .6) 0%, transparent 35%); }
html.footage .home .hero-film { position: absolute; inset: 0; z-index: 0; }
html.footage .home .hero-intro > .wrap { position: relative; z-index: 1; }
html.footage .home .hero-title { color: var(--fg-on-dark); }
html.footage .home .hero-title .grad { color: var(--rose); }
html.footage .home .hero-title mark.fg-mark { background-image: linear-gradient(transparent 62%, rgba(224, 167, 159, .38) 62%, rgba(224, 167, 159, .38) 92%, transparent 92%); }
html.footage .home .fg-issue { color: rgba(246, 241, 232, .72); }
html.footage .home .fg-issue-no { border-color: rgba(246, 241, 232, .6); color: var(--fg-on-dark); }
html.footage .home .fg-issue-rule { background: rgba(246, 241, 232, .3); }
html.footage .home .hero-audience { color: rgba(246, 241, 232, .9); border-top-color: var(--fg-paper); }
html.footage .home .hero-oneline { color: var(--fg-on-dark); border-top-color: var(--rose); }
html.footage .home .hero-oneline b { color: var(--rose); }
html.footage .home .hero-meta, html.footage .home .hero-intro .fg-caption { color: rgba(246, 241, 232, .72); }
html.footage .home .hero-intro .fg-caption-n { color: var(--rose); }
html.footage .home .hero-intro .fg-video .video-shell { box-shadow: 10px 10px 0 rgba(246, 241, 232, .16); border-color: rgba(246, 241, 232, .5); }
html.footage .home .btn-invite { background: var(--fg-paper); color: var(--fg-ink); border-color: var(--fg-on-dark); }
html.footage .home .btn-invite:hover { background: var(--card); color: var(--fg-ink); border-color: #fff; }
@media (max-width: 760px) {
  /* Phones: the footage sits in the lower part of the cover with his face to the right, so the headline reads on
     solid dark and never over his face. */
  html.footage .home .hero-intro { background: #141312; }
  html.footage .home .hero-film { top: auto; height: 78%; }
  html.footage .home .hero-film .film-video { object-position: 96% 0%; } /* head to chest, not just the head */
  html.footage .home .hero-intro::after { background: linear-gradient(180deg, #141312 0%, #141312 26%, rgba(20, 19, 18, .84) 38%, rgba(20, 19, 18, .58) 58%, rgba(20, 19, 18, .66) 82%, rgba(20, 19, 18, .9) 100%), linear-gradient(90deg, rgba(20, 19, 18, .78) 0%, rgba(20, 19, 18, .35) 58%, rgba(20, 19, 18, 0) 100%); }
  html.footage .home .hero-audience, html.footage .home .hero-explain { text-shadow: 0 1px 12px rgba(0, 0, 0, .6); }
}

/* 07 · Who am I? — a large portrait: on stage, the room in front of him */
.home .fg-portrait.has-stage { max-width: none; }
.home .fg-portrait .stage-photo { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; border: 1px solid var(--fg-rule); box-shadow: 14px 14px 0 var(--fg-sand); }
.home .fg-portrait.has-stage .edgard-photo { position: absolute; right: -14px; bottom: 40px; width: clamp(92px, 26%, 132px); aspect-ratio: 1; border-radius: 50%; border: 3px solid var(--fg-paper); box-shadow: 0 10px 30px -12px rgba(0, 0, 0, .5); }
@media (min-width: 761px) {
  .home .about-section .fg-about:has(.has-stage) { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); align-items: center; }
}
@media (max-width: 760px) {
  .home .fg-portrait.has-stage { max-width: none; margin-bottom: 8px; }
  .home .fg-portrait .stage-photo { aspect-ratio: 4 / 4.4; }
  .home .fg-portrait.has-stage .edgard-photo { right: 10px; bottom: 52px; width: 88px; }
}

/* 09 · Where do you stand — Edgard at the back of a full room */
html.footage .home .final-cta { overflow: hidden; }
html.footage .home .final-film { position: absolute; top: 0; right: 0; bottom: 0; width: 46%; z-index: 0; }
html.footage .home .final-film::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, #151413 0%, rgba(21, 20, 19, .55) 40%, rgba(21, 20, 19, .15) 100%); }
html.footage .home .final-film .film-video { object-position: center 65%; }
html.footage .home .final-cta > .wrap { position: relative; z-index: 1; }

@media (prefers-reduced-motion: reduce) {
  .home .dv-draw, .home .dv-sat, .home .dv-path, .home .dv-way, .home .dv-system, .home .define-point, .home .shift-rule { transition: none !important; }
  .home .dv-flow, .home .dv-ring, .home .eco-arc-line, .home .eco-node.on .eco-halo { animation: none !important; }
}


/* =====================================================================
   One screen at a time (Edgard: every section on a laptop, every tab on a phone, fits one screen)
   ===================================================================== */
@media (min-width: 901px) {
  .home main > .fg-section:not(.sig-define):not(.sig-shift) { min-height: calc(100svh - var(--sticky-top, 64px)); display: grid; align-content: center; padding-block: clamp(36px, 5svh, 72px); }
  .home .fg-title { font-size: clamp(34px, 4vw, 60px); }
}

/* 03 · Four ideas: one idea at a time */
.home .idea-bar { display: block; margin: 6px 0 16px; }
.home .idea-tabs { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; }
.home .idea-tab { display: grid; align-content: start; gap: 4px; min-height: 56px; padding: 8px 10px; border: 1px solid var(--fg-ink); border-radius: 3px; background: transparent; color: var(--fg-ink); text-align: left; cursor: pointer; transition: background-color 200ms var(--ease), color 200ms var(--ease); }
.home .idea-tab-n { font: 600 22px/1 var(--serif); color: var(--fg-red-text); }
.home .idea-tab-name { font: 700 10.5px/1.2 var(--fg-mono); letter-spacing: .03em; text-transform: uppercase; overflow-wrap: anywhere; }
.home .idea-tab[aria-pressed="true"] { background: var(--fg-ink); color: var(--fg-on-dark); }
.home .idea-tab[aria-pressed="true"] .idea-tab-n { color: var(--rose); }
.home .sig-ideas.sig-ready .lesson { display: none; }
.home .sig-ideas.sig-ready .lesson.is-active { display: grid; animation: eco-in 420ms var(--ease) both; }
.home .sig-ideas .fg-lesson { border-top: 3px solid var(--fg-ink); padding-block: 22px 8px; }
.home .idea-foot { margin-top: 14px; }
@media (min-width: 901px) {
  .home .sig-ideas .fg-body { display: grid; grid-template-columns: minmax(0, 1fr); }
  .home .idea-tabs { grid-template-columns: repeat(5, minmax(0, 200px)); }
  .home .sig-ideas .fg-lesson .lesson-num { font-size: clamp(56px, 6vw, 96px); }
}

/* 05 · Why now: three big numbers side by side on a laptop */
.home .why-n { grid-area: n; }
.home .why-item h3 { grid-area: h; }
.home .why-item p { grid-area: p; }
@media (min-width: 901px) {
  .home .why-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: clamp(24px, 3.5vw, 56px); }
  .home .why-item { grid-template-columns: 1fr; grid-template-areas: "n" "h" "p"; row-gap: 14px; align-content: start; border-bottom: 0; padding: 26px 0 0; }
  .home .why-n { font-size: clamp(72px, 8vw, 128px); }
  .home .why-item h3 { font-size: clamp(26px, 2.4vw, 36px); }
  .home .why-section .fg-title { max-width: 24ch; }
}

/* 06 · the map never taller than the screen */
@media (min-width: 901px) {
  .home .sig-eco .fg-title { font-size: clamp(38px, 4.4vw, 68px); }
  .home .eco-svg { max-height: calc(100svh - var(--sticky-top, 64px) - 96px); }
  .home .sig-eco.sig-ready .pillar .tick-list li { padding-block: 6px; font-size: 14.5px; }
}

/* 07 · Who am I? — holding the trophy in front of the room, with the stage photo beside it */
.home .fg-portrait .about-media { position: relative; aspect-ratio: 4 / 5; overflow: hidden; background: #141312; border: 1px solid var(--fg-rule); box-shadow: 14px 14px 0 var(--fg-sand); }
.home .fg-portrait .about-media .film-video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
.home .fg-portrait.has-stage .stage-photo { position: absolute; left: -26px; bottom: -34px; width: 38%; aspect-ratio: 4 / 5; height: auto; object-fit: cover; border: 4px solid var(--fg-paper); box-shadow: 0 16px 34px -18px rgba(0, 0, 0, .6); }
.home .fg-portrait.has-stage .edgard-photo { right: -14px; top: 22px; bottom: auto; }
.home .fg-portrait.has-stage .fg-caption { margin-top: 44px; justify-content: flex-end; }
@media (min-width: 901px) {
  .home .about-section .fg-about:has(.has-stage) { grid-template-columns: minmax(0, 4fr) minmax(0, 6fr); }
  .home .fg-portrait.has-stage { max-height: calc(100svh - var(--sticky-top, 64px) - 120px); aspect-ratio: 4 / 5; }
}

/* 08 · Free access: the community, together */
html.footage .home .subscribe-copy { position: relative; display: grid; align-content: end; min-height: 380px; padding: clamp(18px, 3vw, 32px); overflow: hidden; color: var(--fg-on-dark); background: #141312 url("/media/broll/still-community.jpg") center 45% / cover no-repeat; border: 1px solid var(--fg-rule); }
html.footage .home .subscribe-copy::before { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(20, 19, 18, 0) 30%, rgba(20, 19, 18, .86) 78%); }
html.footage .home .subscribe-copy > * { position: relative; }
html.footage .home .subscribe-copy .fg-kicker { color: var(--rose); }
html.footage .home .subscribe-copy .fg-title { color: var(--fg-on-dark); margin-bottom: 8px; }
html.footage .home .subscribe-copy .lede { color: rgba(246, 241, 232, .9); margin: 0; }
@media (min-width: 901px) {
  html.footage .home .subscribe-panel { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: stretch; }
  html.footage .home .subscribe-copy { min-height: min(560px, calc(100svh - var(--sticky-top, 64px) - 120px)); }
}

/* ---------- Phones: each open tab fits one screen ---------- */
body.cp .cp-open > .fg-row { padding-top: 4px; }
body.cp .sig-define .fg-term { font-size: 46px; margin-bottom: 6px; }
body.cp .sig-define .define-lead { font-size: 19px; }
body.cp .def-stage { gap: 10px; }
body.cp .def-visual .dv { max-height: 31svh; width: auto; margin: 0 auto; }
body.cp .def-senses .define-tag { font-size: 22px; margin-bottom: 4px; }
body.cp .def-senses p { font-size: 15px; line-height: 1.5; }
body.cp .def-senses .fg-note { display: none; }
body.cp .sig-define .define-close { font-size: 18px; }
body.cp .sig-ideas .fg-title { font-size: 28px; margin-bottom: 6px; }
body.cp .sig-ideas .fg-lesson .lesson-n { display: none; }
body.cp .sig-ideas .fg-lesson { padding-top: 14px; }
body.cp .fg-lesson h3 { font-size: 25px; margin-bottom: 8px; }
body.cp .fg-lesson .lesson-analogy { font-size: 18px; margin-bottom: 8px; }
body.cp .fg-lesson p { font-size: 15px; line-height: 1.5; }
body.cp .fg-lesson .lesson-try { padding: 12px; }
body.cp .fg-lesson .lesson-try p { font-size: 14px; }
body.cp .sig-shift .fg-title { font-size: 23px; }
body.cp .sig-shift .hook-line { font-size: 19px; margin-top: 18px; }
body.cp .why-section .fg-title { font-size: 28px; }
body.cp .why-item { padding: 12px 0; grid-template-columns: 56px minmax(0, 1fr); }
body.cp .why-n { font-size: 44px; }
body.cp .why-item h3 { font-size: 21px; }
body.cp .why-item p { font-size: 14.5px; line-height: 1.5; }
body.cp .why-section .why-close { font-size: 20px; margin-top: 12px; }
body.cp .sig-eco .fg-title { font-size: 26px; margin-bottom: 2px; }
body.cp .sig-eco .journey-name { font-size: 17px; margin-bottom: 6px; }
body.cp .eco-map { margin-top: 6px; }
body.cp .eco-svg { max-height: 25svh; width: auto; margin: 0 auto; }
body.cp .eco-tab { min-height: 54px; padding: 7px 8px; }
body.cp .sig-eco.sig-ready .pillar { padding-top: 10px; }
body.cp .sig-eco.sig-ready .pillar-route { display: none; }
body.cp .sig-eco.sig-ready .pillar h3 { font-size: 23px; margin-bottom: 4px; }
body.cp .sig-eco.sig-ready .pillar .pillar-line { font-size: 16px; margin-bottom: 8px; }
body.cp .sig-eco.sig-ready .pillar .tick-list { display: flex; flex-wrap: wrap; gap: 6px; }
body.cp .sig-eco.sig-ready .pillar .tick-list li { padding: 5px 9px; border: 1px solid rgba(26, 26, 26, .25); border-radius: 999px; font-size: 13px; line-height: 1.3; }
body.cp .sig-eco.sig-ready .pillar .tick-list li::before { display: none; }
body.cp .sig-eco .help-cta { margin-top: 14px; }
body.cp .sig-eco .help-lede { font-size: 15px; line-height: 1.5; margin-bottom: 8px; }
body.cp .fg-portrait.has-stage .about-media { aspect-ratio: 16 / 11; }
body.cp .fg-portrait.has-stage .stage-photo { display: none; }
body.cp .fg-portrait.has-stage .edgard-photo { width: 72px; right: 8px; top: auto; bottom: 34px; }
body.cp .fg-portrait.has-stage .fg-caption { margin-top: 12px; justify-content: flex-start; }
body.cp .about-copy .fg-title { font-size: 30px; margin-bottom: 8px; }
body.cp .about-copy .about-lead { font-size: 18px; margin-bottom: 10px; }
body.cp .about-copy p { font-size: 15px; }
html.footage body.cp .subscribe-copy { min-height: 210px; padding: 14px; }
body.cp .subscribe-copy .fg-title { font-size: 24px; }
body.cp .subscribe-copy .lede { font-size: 14.5px; line-height: 1.45; }
body.cp .subscribe-panel { gap: 12px; }
body.cp .subscribe-form-wrap { padding: 14px; }
body.cp .subscribe-form-wrap .field { margin-bottom: 8px; }

@media (prefers-reduced-motion: reduce) {
  .home .rv-wobble, .home .rv-spin, .home .rv-pulse, .home .rv-age, .home .rv-drop, .home .rv-flowline { animation: none !important; }
}

/* Phones, second pass */
body.cp .idea-tabs { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px; }
body.cp .idea-tab { grid-auto-flow: column; justify-content: start; align-items: center; gap: 8px; min-height: 44px; padding: 6px 10px; }
body.cp .idea-tab-n { font-size: 19px; }
body.cp .idea-foot { display: none; }
body.cp .sig-ideas .fg-title { font-size: 26px; }
body.cp .fg-portrait.has-stage .about-media .film-video { object-position: center 12%; }
body.cp .sig-eco .help-cta .btn { min-height: 48px; padding-block: 10px; }
.home .def-senses .def-close-point { grid-template-columns: minmax(0, 1fr); }
body.cp .fg-lesson p { font-size: 14.5px; line-height: 1.45; margin-bottom: 6px; }
body.cp .fg-lesson .lesson-analogy { font-size: 17px; line-height: 1.35; }
body.cp .fg-lesson .lesson-try p { font-size: 13.5px; line-height: 1.4; }
body.cp .idea-bar { margin: 4px 0 10px; }
html.footage body.cp .subscribe-copy { min-height: 170px; }
body.cp #subscribe .sub-note { font-size: 13px; line-height: 1.45; }
/* Rule numbers: lining figures so "05" never hangs into the sentence below */
.home .rule-n { font-variant-numeric: lining-nums; line-height: .92; }
.home .rule-label { margin-bottom: 12px; }
@media (min-width: 901px) {
  .home .sig-eco.fg-section { padding-block: 24px; }
  .home .sig-eco .journey-name { font-size: clamp(20px, 1.9vw, 26px); }
}
/* Shorter laptop screens (e.g. 1366×768): same one-screen rule */
@media (min-width: 901px) and (max-height: 860px) {
  .home .sig-define .fg-term { font-size: min(8.6vw, 12.5svh); }
  .home .sig-define .define-lead { font-size: min(2.6vw, 4.2svh); }
  .home .def-stage { row-gap: 14px; }
  .home .def-senses p { font-size: 15px; line-height: 1.5; }
  .home .def-visual .dv { max-height: calc(100svh - var(--sticky-top, 64px) - 60px); }
  .home .sig-eco .fg-title { font-size: min(4.4vw, 8svh); }
  .home .sig-eco .journey-name { font-size: 19px; }
  .home .eco-tab { min-height: 56px; padding-block: 7px; }
  .home .sig-eco.sig-ready .pillar { padding-top: 10px; }
  .home .sig-eco.sig-ready .pillar-route { display: none; }
  .home .sig-eco.sig-ready .pillar .pillar-line { margin-bottom: 8px; }
  .home .sig-eco.sig-ready .pillar .tick-list { display: flex; flex-wrap: wrap; gap: 6px; }
  .home .sig-eco.sig-ready .pillar .tick-list li { padding: 5px 10px; border: 1px solid rgba(26, 26, 26, .25); border-radius: 999px; font-size: 13.5px; line-height: 1.3; }
  .home .sig-eco.sig-ready .pillar .tick-list li::before { display: none; }
  .home .sig-eco .help-cta { margin-top: 14px; }
}

body.cp .fg-portrait.has-stage .about-media .film-video { object-position: center 38%; }

/* Short laptop windows (e.g. a half screen): "8 old rules" and the definition scale with the screen height */
@media (min-width: 761px) {
  .home .sig-shift .fg-title { font-size: min(4.4vw, 7svh, 64px); margin-bottom: min(3vw, 3svh); }
  .home .rule-n { font-size: min(12vw, 12svh, 120px); }
  .home .rule-before { --bs: min(5.4vw, 5.4svh, 46px); }
  .home .rule-now { --ns: min(6.2vw, 6.2svh, 54px); }
  .home .rv { max-height: min(340px, 40svh); }
  .home .shift-nav .sig-tick, .home .shift-nav .sig-next, .home .shift-nav .sig-arrow { min-height: 40px; }
}
@media (min-width: 761px) and (max-height: 640px) {
  .home .sig-shift.fg-section { padding-block: 16px; }
  .home .sig-shift .fg-kicker { margin-bottom: 4px; }
  .home .shift-stage { gap: 8px; }
  .home .rule-label { margin-bottom: 4px; }
  .home .sig-shift .hook-line { margin-top: 12px; font-size: 18px; }
  .home .sig-define .fg-term { font-size: min(8.6vw, 11svh); }
  .home .def-visual .dv { max-height: 52svh; }
}
.home .sig-shift .fg-title { margin-left: 0; margin-right: auto; text-align: left; }
@media (min-width: 761px) { .home .sig-shift .fg-title { max-width: 30ch; } }
.home #shift h2#hook-title { margin-left: 0; margin-right: auto; }

/* Edgard's eight "I can" lines inside the definition (part c) */
.def-ican { list-style: none; margin: 6px 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 18px; }
.def-ican li { font-size: clamp(13px, min(1.1vw, 1.9svh), 15.5px); line-height: 1.35; }
.def-ican span { color: var(--muted); }
.def-ican b { color: var(--ink); font-weight: 700; }
@media (max-width: 900px) { .def-ican { grid-template-columns: 1fr; gap: 3px; } }
.pillar-trains { margin: 2px 0 8px; font: 600 11px/1.4 var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--red); }

/* Phones (2026-09-19): "What is a Modern Earner?" fits one screen, with a, b, c and Next in view */
body.cp .sig-define .fg-term { font-size: 38px; margin-bottom: 4px; }
body.cp .sig-define .define-lead { max-width: none; font-size: 17px; line-height: 1.38; }
body.cp .def-visual .dv { max-height: min(24svh, 220px); }
body.cp .def-controls { flex-wrap: nowrap; gap: 8px; }
body.cp .def-controls .sig-pill { min-width: 40px; }
body.cp .def-controls .sig-next { padding-inline: 16px; white-space: nowrap; }
@media (max-height: 700px) {
  body.cp .def-visual .dv { max-height: 19svh; }
  body.cp .sig-define .fg-term { font-size: 32px; }
  body.cp .def-stage { gap: 8px; }
}
@media (max-height: 660px) {
  body.cp .def-visual .dv { max-height: 14svh; }
  body.cp .def-senses p { font-size: 14px; line-height: 1.45; }
}
.def-ican .is-destination { grid-column: 1 / -1; margin-top: 4px; padding-top: 6px; border-top: 1px solid var(--line); }

/* 2026-09-25: the five "I can" lines are longer sentences (each starts from a real worry). The definition still fits one
   screen: slightly smaller type for the lines, and a smaller title, lead and drawing on shorter screens. */
.def-ican li { font-size: clamp(13px, min(1.02vw, 1.72svh), 15px); line-height: 1.32; }
.def-ican { gap: 3px 18px; }
@media (min-width: 901px) and (max-height: 1000px) {
  .home .sig-define .fg-term { font-size: min(7.6vw, 10.4svh); }
  .home .sig-define .define-lead { font-size: min(2.3vw, 3.6svh); }
}
@media (min-width: 901px) and (max-height: 800px) {
  .home .sig-define .fg-term { font-size: min(7.2vw, 10svh); }
  .home .sig-define .define-lead { font-size: min(2.2vw, 3.4svh); }
}
body.cp .def-ican li { font-size: 13.5px; line-height: 1.3; }
@media (max-height: 700px) {
  /* 2026-09-27: line 1 now says learning and putting it into action; keep the list in view on 667px phones. */
  body.cp .def-visual .dv { max-height: 13svh; }
  body.cp .def-ican li { line-height: 1.27; }
}
@media (max-height: 660px) {
  body.cp .def-ican li { font-size: 13px; line-height: 1.26; }
  body.cp .sig-define .fg-term { font-size: 30px; }
  body.cp .def-visual .dv { max-height: 12svh; }
}

/* =====================================================================
   Compact homepage (Edgard, 2026-10-01): no endless scrolling. Sections size to their content instead of filling
   the screen, with tighter spacing; "Why now" puts its loop beside the list.
   ===================================================================== */
@media (min-width: 901px) {
  .home main > .fg-section:not(.sig-define):not(.sig-shift) { min-height: 0; }
  .home .fg-section { padding-block: clamp(36px, 4.2vw, 64px); }
  .home .final-cta { padding-block: clamp(44px, 5vw, 72px); }
  .home .why-section .fg-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.85fr); column-gap: clamp(32px, 4vw, 64px); align-items: start; }
  .home .why-section .fg-body > * { grid-column: 1; }
  .home .why-section .fg-body > .home-motion { grid-column: 2; grid-row: 1 / span 4; align-self: center; margin: 0; max-width: none; }
}

/* Laptop homepage, same design with less empty space (Edgard, 2026-10-01) */
@media (min-width: 901px) {
  .home .fg-section { padding-block: clamp(28px, 3vw, 44px); }
  .home .final-cta { padding-block: clamp(32px, 3.4vw, 52px); }
  .home .final-cta .lede { margin: 8px auto 14px; }
  .home .fg-title { margin-bottom: 10px; }
  .home .def-visual .dv { max-height: min(420px, calc(100svh - var(--sticky-top, 64px) - 160px)); }
  .home .sig-define .def-stage { row-gap: 12px; align-items: center; }
  .home .sig-shift .hook-line { margin-top: 18px; }
  .home .sig-shift .shift-nav { margin-top: 10px; }
  .home .sig-shift .fg-title { margin-bottom: 10px; }
  .home .eco-svg { max-height: min(440px, calc(100svh - var(--sticky-top, 64px) - 200px)); }
  .home .fg-portrait.has-stage { max-height: min(460px, calc(100svh - var(--sticky-top, 64px) - 140px)); }
  .home .fg-portrait.has-stage .fg-caption { margin-top: 14px; }
  html.footage .home .subscribe-copy { min-height: 300px; }
  .home .why-item { padding-block: 12px; }
  .home .why-close { margin-top: 12px; }
  .home .pillar { padding-block: 14px 16px; }
  .home .help-cta { margin-top: 16px; }
}
@media (min-width: 901px) {
  .home main > .fg-section:not(.sig-define):not(.sig-shift) { padding-block: clamp(26px, 3vw, 40px); }
  .home .fg-title, .home .sig-shift .fg-title { font-size: clamp(28px, 2.7vw, 42px); line-height: 1.08; max-width: 30ch; }
  .home .final-cta .fg-title { max-width: 34ch; margin-inline: auto; }
  .home .sig-shift .hook-line, .home .why-section .why-close { font-size: clamp(18px, 1.5vw, 22px); }
  .home .help-lede, .home .final-cta .lede { font-size: 16px; }
  .home .why-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 22px; }
  .home .why-section .why-item { grid-template-columns: 1fr; padding-block: 8px; }
  .home .why-section .why-item h3 { font-size: 19px; }
  .home .why-section .why-item p { font-size: 14.5px; line-height: 1.5; }
  .home .why-section .why-n { font-size: 34px; line-height: 1; }
}
@media (min-width: 901px) {
  .home main > .fg-section .fg-body > .fg-title { font-size: clamp(28px, 2.7vw, 42px); line-height: 1.08; }
  .home .eco-svg { max-height: min(380px, calc(100svh - var(--sticky-top, 64px) - 220px)); }
  .home .final-cta .close-ican { margin-block: 8px; }
}
@media (min-width: 901px) {
  .home .final-cta .fg-body { text-align: center; }
  .home .final-cta .fg-kicker { justify-content: center; text-align: center; }
  .home .final-cta .close-ican { max-width: 900px; margin-inline: auto; text-align: left; }
  .home .final-cta .close-destination { max-width: 900px; margin-inline: auto; }
  .home .final-cta .btn { margin-inline: auto; }
}
@media (min-width: 901px) {
  .home .sig-shift .rule-now .rule-text { font-size: clamp(22px, 2vw, 30px); line-height: 1.2; }
  .home .sig-shift .rule-label .rule-n { font-size: clamp(40px, 4vw, 56px); }
}
/* The definition reads in two or three lines, not a tall narrow column (Edgard, 2026-10-01) */
@media (min-width: 901px) {
  .home .sig-define .def-head { max-width: none; width: 100%; }
  .home .sig-define .define-lead { max-width: 40ch; font-size: clamp(21px, 1.9vw, 28px); line-height: 1.25; }
  .home .sig-define .fg-term { font-size: clamp(56px, 6vw, 96px); }
}

/* "Which one are you?" (Edgard, 2026-10-01): the four results as tempting cards, gentle life throughout */
.home .final-cta .fg-body { text-align: center; }
.home .fc-meta { display: flex; justify-content: center; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.home .fc-meta span { padding: 5px 12px; border: 1px solid rgba(237, 231, 219, .3); border-radius: 999px; font: 700 11px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--fg-on-dark); }
.home .fc-meta span:first-child { background: var(--fg-red); border-color: var(--fg-red); }
.home .final-cta .fg-title { max-width: none; margin-inline: auto; }
.home .final-cta .lede { max-width: 56ch; margin-inline: auto; }
.home .fc-cards { list-style: none; margin: 22px auto 22px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; max-width: 1100px; text-align: left; }
.home .fc-card { position: relative; display: grid; align-content: start; gap: 8px; height: 100%; min-height: 150px; padding: 18px 18px 46px; border: 1px solid rgba(237, 231, 219, .22); border-radius: 14px; background: rgba(255, 255, 255, .04); color: var(--fg-on-dark); text-decoration: none; transition: transform 260ms var(--ease), background-color 260ms var(--ease), border-color 260ms var(--ease), box-shadow 260ms var(--ease); }
.home .fc-name { font: 600 clamp(19px, 1.6vw, 23px)/1.15 var(--serif); color: #fff; }
.home .fc-hint { font-size: 14px; line-height: 1.45; color: rgba(237, 231, 219, .78); }
.home .fc-q { position: absolute; left: 18px; bottom: 14px; font: 700 11px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; color: var(--rose, #e0a79f); }
.home .fc-q::after { content: ' →'; display: inline-block; transition: transform 260ms var(--ease); }
.home .fc-card:hover, .home .fc-card:focus-visible { transform: translateY(-4px); background: rgba(155, 27, 27, .28); border-color: var(--fg-red); box-shadow: 0 18px 40px -22px rgba(0, 0, 0, .8); color: var(--fg-on-dark); }
.home .fc-card:hover .fc-q::after, .home .fc-card:focus-visible .fc-q::after { transform: translateX(4px); }
.home .fc-card:focus-visible { outline: 2px solid var(--rose, #e0a79f); outline-offset: 3px; }
.home .fc-go { margin-inline: auto; position: relative; }
.home .fc-reassure { margin: 12px auto 0; max-width: 52ch; font-size: 14px; color: rgba(237, 231, 219, .72); }
.home .fc-lines { max-width: 900px; margin: 18px auto 0; text-align: left; border-top: 1px solid rgba(237, 231, 219, .18); padding-top: 8px; }
.home .fc-lines > summary { cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: center; gap: 8px; font: 600 14px var(--sans); color: rgba(237, 231, 219, .85); list-style: none; }
.home .fc-lines > summary::-webkit-details-marker { display: none; }
.home .fc-lines > summary::after { content: '+'; color: var(--rose, #e0a79f); font-size: 18px; }
.home .fc-lines[open] > summary::after { content: '–'; }
@media (max-width: 900px) { .home .fc-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 480px) { .home .fc-card { min-height: 0; padding: 14px 14px 38px; } .home .fc-name { font-size: 18px; } .home .fc-hint { font-size: 13.5px; } }

/* Life: cards stagger in, the main buttons breathe, cards lift on hover. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .home .final-cta .revealed .fc-cards li { animation: fc-in 700ms var(--ease) both; }
  .home .final-cta .revealed .fc-cards li:nth-child(2) { animation-delay: 120ms; }
  .home .final-cta .revealed .fc-cards li:nth-child(3) { animation-delay: 240ms; }
  .home .final-cta .revealed .fc-cards li:nth-child(4) { animation-delay: 360ms; }
  .home .fc-go::after, .home .hero-intro .btn-invite::after { content: ''; position: absolute; inset: -1px; border-radius: inherit; box-shadow: 0 0 0 0 rgba(224, 167, 159, .55); animation: fc-breathe 3.2s ease-out 1.2s infinite; pointer-events: none; }
  .home .why-item, .home .pillar, .home .fg-lesson { transition: transform 260ms var(--ease); }
  .home .why-item:hover { transform: translateY(-3px); }
}
@keyframes fc-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes fc-breathe { 0% { box-shadow: 0 0 0 0 rgba(224, 167, 159, .5); } 70%, 100% { box-shadow: 0 0 0 14px rgba(224, 167, 159, 0); } }

/* Hero: a little life (Edgard, 2026-10-01). Lines rise in, a slow light crosses the question, the arrow nudges. */
.home .hero-scroll { position: absolute; left: 50%; bottom: 14px; z-index: 3; width: 44px; height: 44px; margin-left: -22px; display: grid; place-items: center; border-radius: 50%; }
.home .hero-scroll span { width: 2px; height: 22px; border-radius: 2px; background: currentColor; opacity: .55; }
html.footage .home .hero-scroll { color: var(--fg-on-dark); }
.home .hero-intro { position: relative; }
@media (max-width: 760px) { .home .hero-scroll { display: none; } }
@media (prefers-reduced-motion: no-preference) {
  .home .hero-title, .home .hero-audience, .home .hero-cta { animation: hero-rise 900ms var(--ease) both; }
  .home .hero-audience { animation-delay: 180ms; }
  .home .hero-cta { animation-delay: 340ms; }
  .home .hero-title .grad { background-image: linear-gradient(100deg, transparent 42%, rgba(255, 255, 255, .9) 50%, transparent 58%), linear-gradient(currentColor, currentColor); background-size: 250% 100%, 100% 100%; background-position: 150% 0, 0 0; background-repeat: no-repeat; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: hero-glint 6s ease-in-out 1.6s infinite; }
  .home .btn-invite .arrow, .home .fc-go .arrow { display: inline-block; animation: hero-nudge 2.4s ease-in-out 2s infinite; }
  .home .hero-scroll span { animation: hero-cue 2s ease-in-out infinite; transform-origin: top; }
}
@keyframes hero-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes hero-glint { 0%, 55% { background-position: 150% 0, 0 0; } 85%, 100% { background-position: -50% 0, 0 0; } }
@keyframes hero-nudge { 0%, 70%, 100% { transform: translateX(0); } 80% { transform: translateX(5px); } 90% { transform: translateX(0); } }
@keyframes hero-cue { 0% { transform: scaleY(0); opacity: 0; } 30% { opacity: .7; } 60% { transform: scaleY(1); opacity: .7; } 100% { transform: scaleY(1) translateY(10px); opacity: 0; } }

/* Bottom: unmistakably clickable */
.home .final-cta .fc-go { min-height: 58px; padding: 14px 30px; background: var(--fg-red); border-color: var(--fg-red); color: #fff; font-size: 16.5px; overflow: hidden; box-shadow: 0 18px 40px -18px rgba(155, 27, 27, .9); }
.home .final-cta .fc-go:hover { background: #7e1414; border-color: #7e1414; color: #fff; transform: translateY(-2px); }
.home .fc-card { cursor: pointer; }
.home .fc-q { opacity: .95; }
@media (prefers-reduced-motion: no-preference) {
  .home .final-cta .fc-go::before { content: ''; position: absolute; top: 0; bottom: 0; width: 40%; left: -60%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .35), transparent); transform: skewX(-18deg); animation: fc-sweep 3.6s ease-in-out 1s infinite; pointer-events: none; }
}
@keyframes fc-sweep { 0%, 60% { left: -60%; } 90%, 100% { left: 130%; } }
.home .fc-card { background: rgba(22, 21, 20, .62); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.home .fc-card:hover, .home .fc-card:focus-visible { background: rgba(110, 18, 18, .78); }

/* “You’re ready for the next step.” on one line (Edgard, 2026-10-01); phones may wrap. */
@media (min-width: 700px) { .help-section #help-title { max-width: none; white-space: nowrap; } }
@media (max-width: 699px) { .help-section #help-title { white-space: nowrap; font-size: min(26px, 5.8vw); } }