/* fl.css: the Family Leadership landing page's one stylesheet, the new look's shared parts in one file (redesign plan
   §2 step 1, build queue item 32). Session B, 3 Oct 2026: the colours, the base for redone sections, the parts rows 1
   to 4 use, and those rows' own layouts. Session C, the same day: the warm block, the photo frame, the quiet button and
   rows 5 to 10. Session D, the same day: more colours for the panel, the drawn ticks and rows 11 to 15. Session E, the
   same day: rows 16 to 20 and the footer; the old stylesheets and Tailwind went, so the page's own base is here too.
   Every section and the footer carry class "r2". Breakpoints: the hero changes layout at 960px (tested there on 3 Oct),
   the other rows at 900px. */

:root{
  /* page colours (Design System v1.18) */
  --ink:#1F2B25; --soft:#4A544E; --gold:#C9A15F; --gold-hover:#B8914F; --on-gold:#141C18; --bronze:#9C6B2E;
  --page:#FFFFFF; --warm:#F5F2EA; --line:#DDD6C6; --edge:#7D857F;
  /* session C: a deeper bronze for labels on the warm block (6.1:1 there; the page's bronze is 4.1:1), and the warm
     block behind each photo (S7) */
  --bronze-deep:#7A5320; --block:#EDE3CF;
  /* the hero's "now" tint, also on row 12's first stop (session D) */
  --now:#F4EBD9;
  /* the softer green panel (CL's pick, D5) and the colours that pass AA on it: gold words use #D8B477, since the
     brand gold is 4.41:1 there */
  --p-bg:#33423A; --p-fg:#ECE7DB; --p-head:#FFFFFF; --p-accent:#D8B477;
  /* session D, on the panel: labels, softer text, a card, a divider; row 11's speech bubbles and figures; row 13's card
     in shadow, darker than the panel */
  --p-label:#E8DDC8; --p-soft:#C9CFC8; --p-card:#2B3832; --p-line:rgba(236,231,219,.26);
  --p-bub:#3B4B42; --p-bubline:#A3AEA6; --p-fig:#A3AEA6; --p-fig-you:#E8DDC8;
  --p-shade:#232E28; --p-shade-line:rgba(236,231,219,.18); --p-shade-edge:rgba(236,231,219,.16);
  /* the Report's own colours: pre-planning documents/Family Leader Readiness Report - SAMPLE (template).html */
  --r-paper:#FCF8F0; --r-ink:#2B2622; --r-soft:#6E6456; --r-line:#E4D8C1;
  --good-bg:#E0E4D6; --good:#3E6339; --warn-bg:#F0E4CE; --warn:#8A5A0E; --miss-bg:#F1E1D5; --miss:#8E4426;
}

/* ---- the base for a redone section ---- */
.r2{background:var(--page);color:var(--ink);font:400 18px/1.55 Figtree,system-ui,sans-serif;-webkit-font-smoothing:antialiased}
.r2,.r2 *,.r2 *::before,.r2 *::after{box-sizing:border-box}
.r2 img{max-width:100%;height:auto;display:block}
.r2 p,.r2 figure,.r2 h2,.r2 h3,.r2 h4{margin:0}
.r2 h2,.r2 h3,.r2 h4{font-family:inherit;font-weight:600}
/* text only screen readers hear */
.r2 .vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.r2 a:focus-visible,.r2 button:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
/* the page itself (session E): what Tailwind's base did and the rows rely on, now that it's gone */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{margin:0;background:var(--page)}
.r2 svg{display:block}
.r2 ol,.r2 ul{list-style:none;margin:0;padding:0}
.r2 hr{color:inherit}
/* a link inside running text: its padding makes the tap area 44px tall without moving the words or how the line wraps */
.r2 .tl{padding:13px 0;color:inherit;text-decoration:underline;text-underline-offset:3px}

/* ---- shared parts ---- */

/* a white section and its column widths */
.r2.sec{padding:44px 0}
.r2 .wrap{max-width:760px;margin:0 auto;padding:0 20px}
.r2 .wide{max-width:1120px;margin:0 auto;padding:0 20px}

/* a section's label and heading (D6: the capital-letter labels stay, in a gold dark enough to read) */
.r2 .sec-head{display:grid;gap:10px;justify-items:center;text-align:center;margin-bottom:26px}
.r2 .lab{font-weight:600;font-size:15px;line-height:1.3;letter-spacing:.12em;text-transform:uppercase;color:var(--bronze);text-wrap:balance}
.r2 h2{font-weight:600;font-size:28px;line-height:1.2;letter-spacing:-.01em;text-wrap:balance}
.r2 h3{font-weight:600;font-size:21px;line-height:1.3;text-wrap:balance}
.r2 .closing{margin-top:30px;text-align:center;font-weight:600;font-size:19px;line-height:1.45;text-wrap:balance}

/* the gold button: the page's one action colour, still, with a quiet hover (review 3.2: no more bouncing) */
.r2 .cta{display:inline-flex;align-items:center;justify-content:center;min-height:56px;padding:14px 30px;border-radius:999px;background:var(--gold);color:var(--on-gold);font-weight:600;font-size:18px;line-height:1.2;text-decoration:none;text-align:center;transition:background-color .15s} /* unslop-ignore: the gold pill is the FL Design System button rule (v1.18) */
.r2 .cta:hover{background:var(--gold-hover)}

/* the softer green panel, on the white page (D5) */
.r2 .panel{background:var(--p-bg);color:var(--p-fg);border-radius:24px;margin:0 10px;padding:32px 20px 36px}
.r2 .panel h2,.r2 .panel h3,.r2 .panel h4{color:var(--p-head)}
.r2 .panel .lab{color:var(--p-label)}
.r2 .panel .cta-row{padding:0}
.r2 .panel b{font-weight:600;color:var(--p-accent)}
.r2 .panel a:focus-visible{outline-color:var(--p-head)}

/* the founding band's photo and words (rows 3 and 18) */
.r2 .fd{display:flex;flex-direction:column;align-items:center;gap:24px;max-width:1000px;margin:0 auto}
.r2 .fd img{width:100%;max-width:380px;border-radius:16px}
.r2 .fd-copy{max-width:520px;display:grid;gap:16px}
.r2 .fd-copy p{font-size:19px;line-height:1.55}
.r2 .fd-copy .cta{justify-self:start;margin-top:8px}

/* hand-drawn marks: the underline, the plus between documents, the ring round a step number */
.r2 .mark{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12' preserveAspectRatio='none'%3E%3Cpath d='M3 8.5c18-5 33-4.5 50-1.6 16 2.7 34 2.4 64-3.4' fill='none' stroke='%23C9A15F' stroke-width='3.4' stroke-linecap='round' vector-effect='non-scaling-stroke'/%3E%3C/svg%3E") left bottom/100% .3em no-repeat;padding-bottom:.1em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.r2 .plus{width:40px;height:40px;fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round}
.r2 .num{position:relative;display:inline-grid;place-items:center;width:44px;height:44px;flex:none;font-weight:600;font-size:21px;line-height:1;color:var(--ink)}
.r2 .num svg{position:absolute;left:-5px;top:-5px;width:54px;height:54px;overflow:visible}
.r2 .num path{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round}

/* a numbered step: the ringed number beside a heading and a line */
.r2 .st{display:grid;grid-template-columns:44px minmax(0,1fr);gap:16px;align-items:start}
.r2 .st h3{margin:6px 0 4px}
.r2 .st p{font-size:18px;line-height:1.5;color:var(--soft)}

/* the status card: a copy of the sample Report's status list (plan idea S1), the page's thread */
.r2 .report{background:var(--r-paper);border:1px solid var(--r-line);border-radius:14px;padding:14px 16px 6px;color:var(--r-ink);font-family:"Work Sans",system-ui,sans-serif;box-shadow:0 1px 0 rgba(43,38,34,.05),0 12px 26px -16px rgba(43,38,34,.45)}
.r2 .r-head{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;font-size:13px;line-height:1.3;color:var(--r-soft)}
.r2 .r-title{font-family:Fraunces,Georgia,serif;font-weight:400;font-size:21px;line-height:1.2;margin:6px 0 0;color:var(--r-ink)} /* unslop-ignore: copies the real Report, which is set in Fraunces */
.r2 .srow{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:8px 0;border-top:1px solid var(--r-line);font-size:15px;line-height:1.35}
.r2 .srow > span:first-child{min-width:0}
.r2 .pill{flex:none;font-size:13px;font-weight:600;line-height:1.2;border-radius:999px;padding:4px 10px;white-space:nowrap} /* unslop-ignore: status chips copied from the Report; text darkened for contrast */
.r2 .good{background:var(--good-bg);color:var(--good)}
.r2 .warn{background:var(--warn-bg);color:var(--warn)}
.r2 .miss{background:var(--miss-bg);color:var(--miss)}

/* a document shown as the paper itself, with no panel behind it (CL, 3 Oct). The figure is an invisible square that
   holds the pieces. The Plan and Imprint covers are photos of the printed cover, already tilted and with their own
   shadow; the Report's cover is flat (class "flat"), so it gets a tilt and a shadow here. */
.r2 .doc{position:relative;aspect-ratio:1/1;max-width:100%}
.r2 .doc > img{position:absolute;inset:0;margin:auto;max-width:100%;max-height:100%;width:auto;height:auto}
.r2 .doc .flat{border-radius:3px;transform:rotate(-4deg);box-shadow:0 2px 0 rgba(43,38,34,.04),0 16px 30px -14px rgba(43,38,34,.55)}
/* an inside page under its cover (S4): the whole page lies behind, tilted, and the cover hides about a third of it. The
   page's small text is softened in the image file itself, so it reads as a page but can't be read closely or copied. */
.r2 .stack .sheet{position:absolute;top:2%;left:30%;width:60%;transform:rotate(3deg);border-radius:2px;box-shadow:0 1px 0 rgba(43,38,34,.05),0 14px 28px -14px rgba(43,38,34,.5)}
.r2 .stack .sheet img{display:block;width:100%;height:auto;border-radius:2px}
.r2 .stack > .cover{inset:auto;left:8%;bottom:0;width:54%;margin:0;max-width:none;max-height:none}
.r2 .stack > .cover.flat{left:10%;bottom:4%;width:44%}
/* the Family Plan as a fanned deck (CL's idea, 3 Oct): three of its ten parts behind the cover, each showing only its
   part title from the blank plan's "What's inside" page, never a filled page or an answer (the privacy rule in Business
   HQ's CLAUDE.md). Sizes follow the figure's width, so the deck scales as one piece; the px sizes before each clamp()
   are for browsers without container units. */
.r2 .deck{container-type:inline-size}
.r2 .deck .card{position:absolute;width:64%;height:60%;background:#FFFFFF;border:1px solid #DCD3C2;border-radius:3px;padding:8px 16px 0;padding:2cqw 4.6cqw 0;display:grid;align-content:start;gap:.3cqw;text-align:left;box-shadow:0 1px 0 rgba(43,38,34,.04),0 10px 22px -14px rgba(43,38,34,.45)}
.r2 .deck .c1{top:0;left:18%;transform:rotate(2deg)}
.r2 .deck .c2{top:11.5%;left:19.5%;transform:rotate(.5deg)}
.r2 .deck .c3{top:23%;left:17%;transform:rotate(-1.5deg)}
.r2 .deck .pt{font:600 11px/1.15 Figtree,system-ui,sans-serif;font:600 clamp(10px,3cqw,13px)/1.15 Figtree,system-ui,sans-serif;letter-spacing:.14em;text-transform:uppercase;color:var(--bronze)}
.r2 .deck .pn{font:400 17px/1.12 Georgia,"Times New Roman",serif;font:400 clamp(15px,4.6cqw,21px)/1.12 Georgia,"Times New Roman",serif;color:#23271F;white-space:nowrap} /* unslop-ignore: the Family Plan's own type (Georgia, from its template) */
.r2 .deck > .cover{inset:auto;left:25%;bottom:0;width:50%;margin:0;max-width:none;max-height:none}

/* a line under a section's heading, a larger opening paragraph, a signature, and a centred row for the gold button */
.r2 .sec-head .sub{max-width:600px;color:var(--soft);text-wrap:pretty}
.r2 .lede{font-size:19px;line-height:1.55;text-wrap:pretty}
.r2 .sig{font-weight:600;font-size:17px}
.r2 .cta-row{display:flex;justify-content:center;margin-top:36px;padding:0 20px}

/* the quiet button: an outline, so solid gold stays for the main action (CL, 2 Oct) */
.r2 .quiet{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 22px;border:1.5px solid var(--ink);border-radius:999px;color:var(--ink);font-weight:600;font-size:17px;line-height:1.2;text-decoration:none;text-align:center;transition:background-color .15s} /* unslop-ignore: an outlined button, so solid gold stays for the main action */
.r2 .quiet:hover{background:var(--warm)}

/* the warm block: a rounded area in the hero's warm colour, on the white page (row 6) */
.r2 .block{background:var(--warm);border-radius:24px;margin:0 10px;padding:36px 0 40px}
.r2 .block .lab{color:var(--bronze-deep)}

/* the photo frame: a warm block behind each photo (S7; CL's pick on 3 Oct, after the arch read as a tombstone) */
.r2 .ph{position:relative;margin:0 auto;width:min(66%,280px)}
.r2 .pic{position:relative;display:block}
.r2 .pic::before{content:"";position:absolute;inset:0;transform:translate(12px,12px);background:var(--block);border-radius:18px}
.r2 .pic img{position:relative;z-index:1;width:100%;aspect-ratio:4/5;object-fit:cover;border-radius:18px}

/* drawn ticks: a hand-drawn tick before each line (rows 12, 14 and 15), bronze on the page, gold on the panel */
.r2 .ticks{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.r2 .ticks li{display:grid;grid-template-columns:24px minmax(0,1fr);gap:12px;align-items:start;font-size:18px;line-height:1.45}
.r2 .ticks svg{width:22px;height:22px;margin-top:3px;fill:none;stroke:var(--bronze);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.r2 .panel .ticks svg{stroke:var(--p-accent)}

@media (max-width:480px){
  /* phones: the gold button fills its column, so its label stays on one line (as on the old page since 2 Oct) */
  .r2 .cta{display:flex;width:100%;padding-left:12px;padding-right:12px}
}
@media (min-width:768px){
  .r2 .fd{flex-direction:row;justify-content:center;gap:48px}
  .r2 .fd img{flex:0 1 380px;min-width:0} /* lets the photo give up room, so the words and button keep theirs */
  .r2 .fd-copy{flex:0 1 520px}
}
@media (min-width:900px){
  .r2.sec{padding:64px 0}
  .r2 .sec-head{margin-bottom:40px}
  .r2 h2{font-size:38px}
  .r2 h3{font-size:23px}
  .r2 .panel{max-width:1180px;margin:0 auto;padding:56px 72px 60px;border-radius:28px}
  .r2 .cta-row{margin-top:44px}
  .r2 .block{max-width:1180px;margin:0 auto;padding:56px 0 60px;border-radius:28px}
  .r2 .ph{width:300px}
}
@media (prefers-reduced-motion:reduce){.r2 .cta,.r2 .quiet{transition:none}}


/* ---- Row 1: the hero (version 2, CL's feedback of 3 Oct) ----
   The old hero's layout is kept: on phones one column in CL's 19 Sep order (headline, video, bundle, Report card,
   question); on desktop the video, then the Report card, on the left, and the bundle, then the question, on the right.
   The Snapshot's first question sits where the button was (CL, 2 Oct); every answer opens the start of the form. */
#fl-hero{padding-bottom:24px}
#fl-hero .top{display:flex;justify-content:center;padding:12px 20px 8px}
#fl-hero .logo{width:150px}

#fl-hero .hero{background:var(--warm);border-radius:24px;margin:0 10px;padding:24px 18px 26px;display:flex;flex-direction:column;gap:20px}
#fl-hero .col-right{display:contents}
#fl-hero .video{order:1}
#fl-hero .bundle{order:2}
#fl-hero .report-wrap{order:3}
#fl-hero .q-wrap{order:4}

/* headline: the live words at one size, as on the old page */
#fl-hero .head{display:flex;flex-direction:column;gap:12px;text-align:center}
#fl-hero h1{margin:0;font-family:Figtree,system-ui,sans-serif;font-weight:600;font-size:27px;line-height:1.2;letter-spacing:-.01em;color:var(--ink);text-wrap:balance}
#fl-hero h1 .then{display:block;margin-top:8px}
#fl-hero .sub{color:var(--soft);text-wrap:pretty}
#fl-hero .show{margin-top:2px;font-weight:600;font-size:20px}

/* the video, with Chuan Long's greeting */
#fl-hero .video{position:relative;margin-top:16px}
#fl-hero .frame{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden;background:#141C18}
#fl-hero .frame img,#fl-hero .frame video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
#fl-hero .frame [hidden]{display:none}
#fl-hero .play{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 18px;border:0;border-radius:999px;background:var(--page);color:var(--ink);font:600 17px/1.2 Figtree,system-ui,sans-serif;cursor:pointer;white-space:nowrap} /* unslop-ignore: white chip, so solid gold stays for the action (Design System v1.18) */
#fl-hero .play svg{width:14px;height:14px;fill:currentColor}
#fl-hero .bubble{position:absolute;left:12px;top:-20px;background:var(--page);color:var(--ink);font-weight:600;font-size:16px;line-height:1.2;padding:9px 13px;border-radius:14px;box-shadow:0 10px 22px -14px rgba(31,43,37,.6);white-space:nowrap}
#fl-hero .bubble::after{content:"";position:absolute;left:22px;bottom:-6px;width:12px;height:12px;background:var(--page);transform:rotate(45deg);border-radius:2px}

/* the bundle */
#fl-hero .bundle{background:var(--page);border-radius:20px;padding:18px 18px 16px}
#fl-hero .label{margin-bottom:6px;font-weight:600;font-size:17px}
#fl-hero .bundle img{margin:0 auto 6px;width:100%;max-width:420px}
#fl-hero .items{list-style:none;margin:0;padding:0;display:grid;gap:4px;counter-reset:b}
#fl-hero .items li{counter-increment:b;display:grid;grid-template-columns:26px 1fr;gap:10px;align-items:baseline;padding:7px 10px;border-radius:10px;font-size:17px;line-height:1.35}
#fl-hero .items li::before{content:counter(b);font-weight:600;color:var(--soft)}
#fl-hero .items .now{background:var(--now);box-shadow:inset 0 0 0 1.5px var(--gold)}
#fl-hero .free{margin-top:8px;font-size:16px;color:var(--soft);text-align:center}

/* the Report card: the real cover beside the status list (the status card's parts are shared, above) */
#fl-hero .report{display:grid;grid-template-columns:84px 1fr;column-gap:14px;align-items:center}
#fl-hero .r-cover{grid-column:1;grid-row:1;width:84px;border-radius:4px;transform:rotate(-3deg);box-shadow:0 8px 18px -8px rgba(43,38,34,.6)}
#fl-hero .r-headblock{grid-column:2;grid-row:1}
#fl-hero .r-rows{grid-column:1 / -1;grid-row:2;margin-top:12px}
#fl-hero .report-wrap figcaption{margin-top:12px;font-weight:600;font-size:17px;line-height:1.4;text-align:center}

/* the first question, in the button's place: each answer opens the Snapshot */
#fl-hero .q-wrap{display:flex;flex-direction:column;gap:10px}
#fl-hero .q{position:relative;background:var(--page);border-radius:20px;padding:16px 16px 14px}
#fl-hero .q-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:4px;font-size:15px;line-height:1.35;color:var(--soft)} /* CL, 3 Oct: keep the count so visitors see it's short; the form has 8 questions */
/* CL, 3 Oct: cues that the card is there to be answered. Eight short marks beside the count, the first one gold; an arrow
   at the end of each answer; and when the card comes into view, a tap runs down the four answers three times, then stops.
   Visitors who ask for less motion get the marks and arrows only. */
#fl-hero .q-steps{display:flex;gap:4px;flex:none}
#fl-hero .q-steps i{width:12px;height:4px;border-radius:2px;background:#E4DCCB}
#fl-hero .q-steps i:first-child{background:var(--gold)}
#fl-hero .q-text{margin-bottom:12px;font-weight:600;font-size:20px;line-height:1.3}
#fl-hero .answers{display:grid;gap:8px}
#fl-hero .ans{position:relative;display:flex;align-items:center;gap:12px;min-height:52px;padding:11px 34px 11px 14px;border:1.5px solid var(--edge);border-radius:14px;background:var(--page);color:var(--ink);text-decoration:none;font-size:17px;line-height:1.3}
#fl-hero .ans::after{content:"";position:absolute;right:12px;top:50%;width:14px;height:12px;margin-top:-6px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 12'%3E%3Cpath d='M1.5 6.4C5 5.8 9 6 13.5 5.8M10 2.4 13.8 5.8 10.1 9.4' fill='none' stroke='%237D857F' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:transform .2s}
#fl-hero .ans:hover::after,#fl-hero .ans:focus-visible::after{transform:translateX(3px)}
#fl-hero .ans::before{content:"";flex:none;width:20px;height:20px;border-radius:50%;border:2px solid var(--edge);background:var(--page)}
#fl-hero .ans:hover,#fl-hero .ans:active{border-color:var(--ink)}
#fl-hero .ans:hover::before,#fl-hero .ans:active::before{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 3px var(--page)}
#fl-hero .micro{font-size:15px;line-height:1.4;color:var(--soft);text-align:center}
#fl-hero .arrow{display:none}
/* the tap: each answer's ring fills gold in turn, top to bottom, with its border darkening, then the card rests. CSS
   only, about 12 seconds in all, then nothing runs (CL: fine "as long as it doesnt make the page lag") */
@keyframes fl-q-row{0%,26%,100%{border-color:var(--edge)}8%,18%{border-color:var(--ink)}}
@keyframes fl-q-dot{0%,26%,100%{border-color:var(--edge);background:var(--page);box-shadow:none}8%,18%{border-color:var(--gold);background:var(--gold);box-shadow:inset 0 0 0 3px var(--page),0 0 0 5px rgba(201,161,95,.3)}}
#fl-hero .q.cue .ans{animation:fl-q-row 3.4s ease-in-out .5s 3}
#fl-hero .q.cue .ans::before{animation:fl-q-dot 3.4s ease-in-out .5s 3}
#fl-hero .q.cue .ans:nth-child(2),#fl-hero .q.cue .ans:nth-child(2)::before{animation-delay:.85s}
#fl-hero .q.cue .ans:nth-child(3),#fl-hero .q.cue .ans:nth-child(3)::before{animation-delay:1.2s}
#fl-hero .q.cue .ans:nth-child(4),#fl-hero .q.cue .ans:nth-child(4)::before{animation-delay:1.55s}
@media (prefers-reduced-motion:reduce){#fl-hero .q.cue .ans,#fl-hero .q.cue .ans::before{animation:none}}

/* desktop: the old hero's layout. Left: the video, then the Report card. Right: the bundle, then the question. */
@media (min-width:960px){
  #fl-hero{font-size:19px;padding-bottom:48px}
  #fl-hero .top{padding:20px 32px 10px}
  #fl-hero .logo{width:190px}
  #fl-hero .hero{max-width:1180px;margin:0 auto;padding:40px 56px 44px;border-radius:28px;display:grid;grid-template-columns:1fr 1fr;grid-template-rows:auto auto 1fr;column-gap:56px;row-gap:24px;align-items:start;
    grid-template-areas:"head head" "video right" "report right"}
  #fl-hero .head{grid-area:head;max-width:960px;justify-self:center;gap:12px}
  #fl-hero .video{grid-area:video;margin-top:20px}
  #fl-hero .report-wrap{grid-area:report}
  #fl-hero .col-right{grid-area:right;display:flex;flex-direction:column;gap:18px}
  #fl-hero h1{font-size:40px;line-height:1.16}
  #fl-hero .sub{font-size:20px;max-width:34em;margin:0 auto}
  #fl-hero .bubble{font-size:18px;top:-22px;left:18px}
  /* compact bundle, as on the old page, so the question sits higher */
  #fl-hero .bundle{padding:16px 18px 12px}
  #fl-hero .bundle img{width:auto;max-height:150px;margin:0 auto 4px}
  #fl-hero .items li{font-size:16px;padding:4px 10px}
  #fl-hero .free{margin-top:4px;font-size:15px}
  #fl-hero .report{grid-template-columns:132px 1fr;column-gap:18px;align-items:start;padding:16px 18px 6px}
  #fl-hero .r-cover{grid-row:1 / span 2;width:132px;margin-top:4px}
  #fl-hero .r-rows{grid-column:2;grid-row:2;margin-top:8px}
  #fl-hero .ans{min-height:54px}
  #fl-hero .q{padding:18px 20px}
  #fl-hero .micro{text-align:left}
  /* hand-drawn arrow across the gap, from the Report card to the question */
  #fl-hero .arrow{display:block;position:absolute;left:-54px;top:34px;width:48px;height:44px;overflow:visible;pointer-events:none}
  #fl-hero .arrow path{fill:none;stroke:var(--gold);stroke-width:3;stroke-linecap:round;stroke-linejoin:round}
}


/* ---- Row 2: What changes for your family ----
   The three documents on the white page, joined by a hand-drawn plus (S4). */
#value-section-top .gives{display:grid;gap:6px;justify-items:center}
#value-section-top .give{display:grid;gap:10px;max-width:420px;width:100%;text-align:center}
#value-section-top .give .doc{margin-bottom:6px}
#value-section-top .give p{font-size:18px;line-height:1.5;color:var(--soft)}
@media (min-width:900px){
  #value-section-top .gives{grid-template-columns:minmax(0,1fr) auto minmax(0,1fr) auto minmax(0,1fr);align-items:start;gap:10px}
  #value-section-top .plus{margin-top:120px}
}


/* ---- Row 4: What this actually is ----
   The four points as numbered steps, and the first WhatsApp message with the Report attached (S3), from the Sales
   Motion Playbook's Stage 1. On phones the message follows point 2; on desktop it sits beside the steps. A plain chat
   card in FL's colours, not WhatsApp's look. */
#plain-terms .plain{display:grid;gap:24px}
#plain-terms .st:nth-child(1){order:1}
#plain-terms .st:nth-child(2){order:2}
#plain-terms .chat{order:3}
#plain-terms .st:nth-child(3){order:4}
#plain-terms .st:nth-child(4){order:5}
#plain-terms .chat{display:grid;gap:10px;width:100%;max-width:400px;justify-self:center}
#plain-terms .chat-lab{text-align:center}
#plain-terms .phone{background:#EFEAE0;border:1px solid var(--line);border-radius:22px;overflow:hidden;box-shadow:0 18px 36px -24px rgba(31,43,37,.5)}
#plain-terms .ch-top{display:flex;align-items:center;gap:10px;padding:10px 14px;background:var(--page);border-bottom:1px solid var(--line)}
#plain-terms .ch-top img{width:40px;height:40px;border-radius:50%;flex:none}
#plain-terms .ch-top p{flex:1;min-width:0;font-size:16px;line-height:1.25}
#plain-terms .ch-top small{display:block;font-size:13px;color:var(--soft)}
#plain-terms .ch-body{padding:14px 12px 16px;display:grid;gap:8px}
#plain-terms .ch-day{justify-self:center;font-size:13px;font-weight:600;color:var(--soft);background:var(--page);border-radius:8px;padding:3px 10px}
#plain-terms .msg{justify-self:start;max-width:94%;background:var(--page);border-radius:14px;padding:9px 12px 10px;font-size:16px;line-height:1.45;box-shadow:0 1px 0 rgba(31,43,37,.08)}
#plain-terms .msg:first-of-type{border-top-left-radius:4px}
#plain-terms .file{display:flex;gap:12px;align-items:center}
#plain-terms .file img{width:46px;border-radius:3px;box-shadow:0 4px 10px -4px rgba(43,38,34,.55)}
#plain-terms .file b{display:block;font-weight:600;line-height:1.3}
#plain-terms .file small{display:block;font-size:13px;color:var(--soft)}
@media (min-width:900px){
  #plain-terms .plain{grid-template-columns:minmax(0,1fr) 400px;column-gap:72px;row-gap:28px;align-items:start}
  #plain-terms .st{grid-column:1}
  #plain-terms .chat{grid-column:2;grid-row:1 / span 4;align-self:center}
}


/* ---- Row 5: Before this was a movement ----
   CL's reach: the three channel screenshots in phone frames, each with its views figure, and "Meet me before we meet"
   as the quiet button. Every screen is the same shape and each screenshot sits whole on its own background colour, so
   none is cropped. On phones each frame sits beside its figure; on desktop the three stand in a row. */
#reach .story{display:grid;gap:14px}
#reach .proofs{list-style:none;margin:32px auto 0;padding:0;display:grid;gap:18px;max-width:520px}
#reach .proof{display:grid;grid-template-columns:minmax(0,44%) minmax(0,1fr);gap:18px;align-items:center}
#reach .screen{position:relative;display:block;background:var(--ink);border-radius:20px;padding:14px 6px 6px}
#reach .screen::before{content:"";position:absolute;left:50%;top:5px;width:30px;height:4px;margin-left:-15px;border-radius:2px;background:var(--soft)}
#reach .screen img{width:100%;aspect-ratio:4/3;object-fit:contain;border-radius:14px;background:#FFFFFF}
#reach .screen.dark img{background:#0F0F0F}
#reach .fig{display:grid;gap:4px}
#reach .views{font-weight:600;font-size:24px;line-height:1.2}
#reach .after{margin-top:32px;display:grid;gap:14px;justify-items:center;text-align:center}
#reach .after .note{color:var(--soft)}
@media (min-width:900px){
  #reach .story{text-align:center}
  #reach .proofs{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px;max-width:960px;margin-top:44px}
  #reach .proof{grid-template-columns:1fr;gap:16px;text-align:center}
  #reach .views{font-size:28px}
  #reach .after{margin-top:40px}
}


/* ---- Row 6: Messages from people who watch my videos ----
   On the warm block. The comments are screenshots with the words unedited (the 19 Sep ruling; since 4 Oct without
   the time, at CL's word), each in a white card; the heading and the line under it say who wrote them (D3c, build
   queue item 27). On desktop the seven cards flow down three columns of different heights, like a pinboard, so none
   sits alone in a row (CL, 4 Oct); the order runs down each column. The last card's bottom margin ends its column
   and adds no space, so the button keeps its usual distance. */
#messages .comments{display:grid;gap:16px;max-width:560px;align-items:start}
#messages .comment{background:var(--page);border:1px solid var(--line);border-radius:18px;padding:8px;box-shadow:0 14px 28px -20px rgba(31,43,37,.45)}
#messages .comment img{width:100%;border-radius:11px}
@media (min-width:900px){
  #messages .comments{display:block;columns:3;column-gap:24px;max-width:1120px}
  #messages .comment{break-inside:avoid;margin:0 0 24px}
}


/* ---- Row 8: the people behind the care ----
   A white card on the white page: the Zen Destin logo, the Nirvana team photo and the all-faiths line. Words unchanged:
   Nirvana's marketing approval (build queue item 18) is still open. On desktop the photo sits left of the words. */
#care .card{max-width:1000px;margin:0 auto;border:1.5px solid var(--line);border-radius:24px;padding:28px 20px 30px;display:grid;gap:24px}
#care .by{display:grid;gap:12px;justify-items:center;text-align:center}
#care .by img{width:120px}
#care .team{display:grid;gap:12px;justify-items:center;text-align:center}
#care .team img{border-radius:16px}
#care .words{display:grid;gap:12px}
#care .faiths{display:grid;gap:8px;border-top:1px solid var(--line);padding-top:18px}
#care .faiths .em{font-weight:600}
#care .small{font-size:16px;line-height:1.5;color:var(--soft)}
@media (min-width:900px){
  #care .card{grid-template-columns:minmax(0,11fr) minmax(0,9fr);grid-template-areas:"team by" "team words" "team faiths";column-gap:48px;row-gap:20px;align-items:center;padding:40px 48px}
  #care .team{grid-area:team}
  #care .by{grid-area:by;justify-items:start;text-align:left}
  #care .words{grid-area:words}
  #care .faiths{grid-area:faiths}
}


/* ---- Row 9: What happens in your session ----
   The three steps with hand-drawn numbers, then the status list before and after the session (S1): only the three rows
   the session changes move, and "The conversation has happened" goes to Started (CL, 3 Oct: okay for now). */
#session .steps{list-style:none;margin:0;padding:0;display:grid;gap:26px}
#session .steps h3{margin:6px 0 6px}
#session .ba{max-width:540px;margin-top:40px}
#session .ba figcaption{margin-top:12px;font-size:16px;line-height:1.45;color:var(--soft);text-align:center;text-wrap:balance}
#session .ba .srow{display:grid;grid-template-columns:minmax(0,1fr) 64px 16px 64px;column-gap:6px;align-items:center}
#session .ba .srow .pill{justify-self:center}
#session .ba .colhead{border-top:0;padding:0 0 6px}
#session .ba .colhead span{font-family:Figtree,system-ui,sans-serif;font-weight:600;font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--r-soft);text-align:center}
#session .ba .arr{width:16px;height:12px;fill:none;stroke:var(--bronze);stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
@media (min-width:900px){
  #session .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px}
  #session .steps .st{grid-template-columns:1fr;gap:14px;align-content:start} /* keeps the three headings level when the steps stretch to the tallest */
  #session .steps h3{margin-top:0}
}


/* ---- Row 10: the origin story ----
   Look 2's story block: CL's photos in the warm-block frame, at web size (the note photo from 4.7 MB to 31 KB), each
   part beside its photo on desktop with the sides alternating, and "A note from me" on the warm colour. */
#origin .opener{display:grid;gap:22px;justify-items:center;text-align:center}
#origin .parts{display:grid;gap:52px;margin-top:56px}
#origin .part{display:grid;gap:24px;align-items:center}
#origin .part .txt{display:grid;gap:12px}
#origin .part p{font-size:18px;line-height:1.6}
#origin .from-me{margin-top:56px;background:var(--warm);border-radius:20px;padding:24px 20px 26px;display:grid;gap:14px}
#origin .from-me .who{display:flex;align-items:center;gap:14px}
#origin .from-me .who img{width:64px;height:64px;object-fit:cover;object-position:50% 20%;border-radius:12px;flex:none}
#origin .from-me p{font-size:18px;line-height:1.6}
#origin .from-me .cta{justify-self:start}
@media (min-width:900px){
  #origin .part{grid-template-columns:300px minmax(0,1fr);gap:64px}
  #origin .part:nth-child(even){grid-template-columns:minmax(0,1fr) 300px}
  #origin .part:nth-child(even) .ph{order:2}
  #origin .from-me{padding:32px 40px 34px}
}


/* ---- Row 11: the False Promise of Time, then the cost of waiting ----
   On the softer green panel (D5). The five lines are speech bubbles (S2; CL, 3 Oct, in place of look 3's
   strike-through): each speaker is a small figure like the ones in the logo, with the name under it ("a figurine shadow
   talking"). Dad and you keep the left, Mum and your sister the right, and "You" is drawn brightest, since the reader is
   in the picture too. The tail at a bubble's top corner points at the speaker; its fill covers the outline where it
   joins. Then each number large, with a hand-drawn ring and its source under it (S6). The source links are 44px tall
   to tap without moving the text around them. */
#false-promise .fp{max-width:760px;margin:0 auto;text-align:center}
#false-promise .fp .lab{margin-bottom:10px}
#false-promise .fp h2{margin-bottom:20px;font-size:32px;line-height:1.15;letter-spacing:-.015em}
#false-promise .says{list-style:none;margin:0 auto;padding:0;display:grid;gap:10px;max-width:600px;text-align:left}
#false-promise .says li{display:grid;grid-template-columns:42px minmax(0,1fr);column-gap:8px;align-items:start}
#false-promise .says li:nth-child(even){grid-template-columns:minmax(0,1fr) 42px}
#false-promise .says li:nth-child(even) .who{grid-column:2;grid-row:1}
#false-promise .says li:nth-child(even) .b{grid-column:1;grid-row:1;justify-self:end;border-radius:18px 0 18px 18px}
#false-promise .who{display:flex;flex-direction:column;align-items:center;gap:3px}
#false-promise .fig{width:27px;height:34px;fill:var(--p-fig)}
#false-promise .nm{font-weight:600;font-size:13px;line-height:15px;color:var(--p-label);text-align:center}
#false-promise .b{position:relative;display:block;justify-self:start;margin-top:4px;padding:10px 13px 11px;border:1.75px solid var(--p-bubline);border-radius:0 18px 18px 18px;background:var(--p-bub);font-size:18px;line-height:1.3;color:var(--p-fg);text-wrap:pretty}
#false-promise .tail{position:absolute;left:-11.75px;top:-1.75px;width:12px;height:14px;overflow:visible}
#false-promise .says li:nth-child(even) .tail{left:auto;right:-11.75px;transform:scaleX(-1)}
#false-promise .tf{fill:var(--p-bub)}
#false-promise .ts{fill:none;stroke:var(--p-bubline);stroke-width:1.75;stroke-linecap:round;stroke-linejoin:round}
#false-promise .you .fig{fill:var(--p-fig-you)}
#false-promise .you .b{border-color:var(--p-fig-you)}
#false-promise .you .ts{stroke:var(--p-fig-you)}
#false-promise .turn{margin:26px auto 0;max-width:20em;font-weight:600;font-size:24px;line-height:1.3;color:var(--p-head);text-wrap:balance}
#false-promise .split{width:56px;height:2px;margin:44px auto;border:0;background:var(--p-line)}
#false-promise .cost{max-width:1000px;margin:0 auto}
#false-promise .cost-head{max-width:760px;margin:0 auto;text-align:center;display:grid;gap:12px}
#false-promise .cost-head h3{font-size:28px;line-height:1.2;letter-spacing:-.01em}
#false-promise .cost-head .lede{font-weight:600;font-size:20px;color:var(--p-head)}
#false-promise .numbers{margin-top:30px;background:var(--p-card);border-radius:20px;padding:26px 20px 28px;text-align:center}
#false-promise .numbers h4{margin-bottom:6px;font-size:20px;line-height:1.3}
#false-promise .numbers .line{margin:0 auto;max-width:34em}
#false-promise .stats{display:grid;gap:28px;margin-top:28px}
#false-promise .stat .big{margin-bottom:10px;font-weight:600;font-size:46px;line-height:1.1;letter-spacing:-.01em;color:var(--p-accent)}
#false-promise .big .pre{display:inline-block;margin-right:1.2em;font-size:20px;letter-spacing:0;color:var(--p-fg)}
#false-promise .ring{position:relative;display:inline-block;padding:0 .14em;white-space:nowrap}
#false-promise .ring svg{position:absolute;left:-.32em;top:-20%;width:calc(100% + .64em);height:142%;overflow:visible;pointer-events:none}
#false-promise .ring path{fill:none;stroke:var(--p-accent);stroke-width:2.6;stroke-linecap:round;vector-effect:non-scaling-stroke}
#false-promise .what{font-size:17px;line-height:1.5}
#false-promise .src{margin-top:8px;font-size:15px;line-height:1.45;color:var(--p-soft)}
#false-promise .src a{display:inline-block;padding:12px 4px;margin:-12px -4px;color:inherit;text-decoration:underline;text-underline-offset:3px}
#false-promise .costs{list-style:none;margin:30px 0 0;padding:0;display:grid;gap:22px}
#false-promise .costs h4{margin-bottom:6px;font-size:19px;line-height:1.35}
#false-promise .costs p{font-size:17px;line-height:1.55}
/* the three cost cards (since 4 Oct, cold check M9): a drawing, the heading, one sourced figure with the hand-drawn
   underline, and its source at the foot, so the sources line up across the row on desktop */
#false-promise .costs li{display:flex;flex-direction:column;padding:22px 22px 16px;border-radius:16px;background:var(--p-card);border:1px solid var(--p-line)}
#false-promise .costs .draw{width:84px;height:84px;margin:0 0 10px -6px}
#false-promise .draw *{fill:none;stroke:var(--p-fg);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#false-promise .draw .g{stroke:var(--p-accent)}
#false-promise .draw .gf{fill:var(--p-accent);stroke:none}
#false-promise .costs .mark{font-weight:600;color:var(--p-head)}
#false-promise .costs .src{margin-top:auto;padding-top:12px;font-size:15px}
@media (min-width:900px){
  #false-promise .fp h2{font-size:44px}
  #false-promise .says{max-width:660px;gap:12px}
  #false-promise .says li{grid-template-columns:56px minmax(0,1fr)}
  #false-promise .says li:nth-child(even){grid-template-columns:minmax(0,1fr) 56px}
  #false-promise .fig{width:34px;height:43px}
  #false-promise .nm{font-size:14px}
  #false-promise .b{padding:12px 20px 13px;font-size:22px}
  #false-promise .turn{margin-top:30px;font-size:30px}
  #false-promise .cost-head h3{font-size:36px}
  #false-promise .numbers{padding:34px 36px 36px}
  #false-promise .stats{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  #false-promise .stat .big{font-size:52px}
  #false-promise .costs{grid-template-columns:repeat(3,minmax(0,1fr));gap:32px}
}


/* ---- Row 12: Become a Family Leader ----
   The trait chips outlined instead of filled, the four "what a family leader does" lines with drawn ticks on the warm
   colour, and the five-stage path drawn as a route (S5): down the page on phones, across it from 900px. An arrow marks
   the first stop, Awareness, "You're here" (CL, 3 Oct), and stop 1 takes the hero's "now" tint. The label and arrow sit
   above the drawing's top edge, so the svg shows overflow and the route leaves room above it. */
#leader .intro{max-width:640px;display:grid;gap:14px;text-align:center}
#leader .traits{list-style:none;margin:26px auto 0;padding:0 20px;display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:640px}
#leader .traits li{border:1.5px solid var(--line);border-radius:999px;padding:7px 15px;font-weight:600;font-size:16px;line-height:1.2} /* unslop-ignore: the trait chips from the live page, outlined instead of filled */
#leader .does{margin-top:30px;background:var(--warm);border-radius:20px;padding:22px 20px 24px;display:grid;gap:14px}
#leader .does .lab{text-align:center;color:var(--bronze-deep)}
#leader .does b{font-weight:600}
#leader .route-box{margin-top:44px;text-align:center}
#leader .route-box h3{margin-bottom:22px}
#leader .route svg{display:block;overflow:visible}
#leader .route path{fill:none;stroke:var(--gold);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:1 8}
#leader .route circle{fill:var(--page);stroke:var(--gold);stroke-width:2}
#leader .route .now{fill:var(--now);stroke-width:3}
#leader .route text{font:600 16px Figtree,system-ui,sans-serif;fill:var(--ink)}
#leader .route .here-t{font:600 15px Figtree,system-ui,sans-serif;fill:var(--bronze)}
#leader .route .here-a{fill:none;stroke:var(--gold);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:none}
#leader .route-down{display:grid;grid-template-columns:76px auto;justify-content:center;column-gap:10px;padding-top:26px}
#leader .route-down ol{list-style:none;margin:0 0 0 -12px;padding:0;display:grid;grid-auto-rows:76px}
#leader .route-down li{display:flex;align-items:center;font-weight:600;font-size:20px;text-align:left}
#leader .route-down li:nth-child(even){padding-left:28px} /* follows its stop, which sits 28px further right */
#leader .route-across{display:none}
#leader .route-note{margin-top:22px;font-size:18px;line-height:1.5;color:var(--soft);text-wrap:balance}
@media (min-width:900px){
  #leader .does{padding:28px 36px 30px}
  #leader .route-down{display:none}
  #leader .route-across{display:block;max-width:1000px;margin:0 auto}
  #leader .route-across svg{width:100%;height:auto}
  #leader .route-across ol{list-style:none;margin:6px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
  #leader .route-across li{font-weight:600;font-size:20px}
  #leader .route-across .here-t{font-size:17px}
}


/* ---- Row 13: Two futures. One decision. ----
   On the softer green panel (CL, 3 Oct: the page's moment to reflect). The better future is a light card in the hero's
   warm colour; the other sits in shadow, darker than the panel. The rows copy the Report's status list (S1), all sorted
   against all not yet, so the words and chips carry the difference, not green against red. */
#two-futures .twof{max-width:1000px;margin:0 auto}
#two-futures .twof-head{max-width:640px;margin:0 auto;text-align:center;display:grid;gap:14px}
#two-futures .futures{display:grid;gap:18px;margin-top:34px}
#two-futures .fut{border-radius:20px;padding:22px 20px 18px;display:flex;flex-direction:column;gap:10px}
#two-futures .better{background:var(--warm);color:var(--ink)}
#two-futures .better h3{color:var(--ink)}
#two-futures .better .lab{color:var(--bronze-deep)}
#two-futures .worse{background:var(--p-shade);box-shadow:inset 0 0 0 1px var(--p-shade-edge)}
#two-futures .rows{margin-top:auto;border-radius:12px;padding:2px 14px;font-family:"Work Sans",system-ui,sans-serif}
#two-futures .srow:first-child{border-top:0}
#two-futures .better .rows{background:var(--r-paper);border:1px solid var(--r-line);color:var(--r-ink)}
#two-futures .worse .rows{background:var(--p-card)}
#two-futures .worse .srow{border-top-color:var(--p-shade-line)}
#two-futures .choice{max-width:640px;margin:40px auto 0;display:grid;gap:14px;text-align:center}
@media (min-width:900px){
  #two-futures .futures{grid-template-columns:1fr 1fr;gap:24px}
  #two-futures .fut{padding:28px 28px 22px}
}


/* ---- Row 14: Who this is for ----
   Two panels: "This is for you" on the warm colour with drawn ticks, "This probably isn't for you" on white with a
   hairline and drawn dashes. The headings and marks carry the difference, not green against red. Side by side from
   900px. */
#who-for .fit{display:grid;gap:18px;max-width:1000px}
#who-for .for{border-radius:20px;padding:24px 20px 26px;display:grid;gap:16px;align-content:start}
#who-for .yes{background:var(--warm)}
#who-for .no{border:1.5px solid var(--line)}
#who-for .ticks{gap:14px}
#who-for .no li{color:var(--soft)}
#who-for .no svg{stroke:var(--edge)}
@media (min-width:900px){
  #who-for .fit{grid-template-columns:1fr 1fr;gap:24px}
  #who-for .for{padding:32px 32px 34px}
}


/* ---- Row 15: What you walk away with ----
   Each document beside its ticks, the sides alternating from 900px: the Family Plan as its cover with three blank part
   titles fanned behind (the privacy rule), the Report as the status card with its cover (S1), and a Lasting Imprint page
   under its cover (S4). The long headings are split into a small label and a heading, with no words changed. */
#value-section .opener{max-width:640px;display:grid;gap:14px;text-align:center}
#value-section .items{display:grid;gap:44px;margin-top:40px}
#value-section .item{display:grid;gap:20px;align-items:start}
#value-section .art{width:100%;max-width:420px;margin:0 auto}
#value-section .txt{display:grid;gap:12px}
#value-section .why{font-style:italic;color:var(--soft)}
#value-section .so{font-weight:600}
#value-section .rep{display:grid;grid-template-columns:72px minmax(0,1fr);column-gap:14px;align-items:center}
#value-section .r-cover{width:72px;border-radius:4px;transform:rotate(-3deg);box-shadow:0 8px 18px -8px rgba(43,38,34,.6)}
#value-section .rep .rows{grid-column:1 / -1;margin-top:12px}
@media (min-width:900px){
  #value-section .item{grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:48px}
  #value-section .item:nth-child(even){grid-template-columns:minmax(0,6fr) minmax(0,5fr)}
  #value-section .item:nth-child(even) .art{order:2}
}


/* ---- Row 16: The honest answers ----
   Three white cards with a hairline, side by side from 900px. The label matches the others (CL, 3 Oct: "match it"). */
#honest .qas{display:grid;gap:16px;max-width:1000px}
#honest .qa{border:1.5px solid var(--line);border-radius:20px;padding:22px 20px 24px;display:grid;gap:10px;align-content:start}
#honest .qa p{color:var(--soft)}
@media (min-width:900px){
  #honest .qas{grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
  #honest .qa{padding:28px 26px 30px}
}


/* ---- Row 17: Knowing isn't doing ----
   Words unchanged (D7). What a machine can do, muted, with drawn dashes, beside what only a person can do, with drawn
   ticks inside a hand-drawn gold ring. The ring stretches to its column and its line keeps one width, so it fits however
   the words wrap. Side by side from 640px. */
#knowing .vs{display:grid;gap:30px;max-width:720px}
#knowing .side{display:grid;gap:14px;align-content:start}
#knowing .ai{padding:0 6px}
#knowing .ai .lab{color:var(--soft)}
#knowing .ai li{color:var(--soft)}
#knowing .ai svg{stroke:var(--edge)}
#knowing .human{position:relative;padding:26px 30px 28px}
#knowing .loop{position:absolute;left:-6px;top:-4px;width:calc(100% + 12px);height:calc(100% + 8px);overflow:visible;pointer-events:none}
#knowing .loop path{fill:none;stroke:var(--gold);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;vector-effect:non-scaling-stroke}
#knowing .closing{margin-top:36px}
@media (min-width:640px){
  #knowing .vs{grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:center;gap:36px}
  #knowing .ai{padding:0 0 0 14px}
}


/* ---- Row 18: founding families, the full version ----
   The same panel as row 3 (D5); its three things as drawn ticks in the panel's gold, at the size of the words round them. */
#founding .ticks{gap:12px}
#founding .ticks li{font-size:19px}


/* ---- Row 19: The first step ----
   The call; CL's meet photo in the warm-block frame (S7) beside "What happens when we meet"; the five steps with drawn
   numbers on a dotted path; what happens if it doesn't feel right; the three next steps on the warm colour; the gold button with the
   sign-off; then the Conversation Starter guide as a second, quieter card, its first page under the cover (S4). */
#workshop .intro{text-align:center}
#workshop .meet{display:grid;gap:26px;align-items:center;margin-top:36px}
#workshop .meet .txt{display:grid;gap:12px}
#workshop .msteps{list-style:none;margin:40px auto 0;padding:0 20px;display:grid;gap:24px}
#workshop .msteps h3{margin:6px 0 6px}
/* the five steps on a winding dotted path, like the five-stage route in row 12 (CL, 3 Oct): each number sits left or
   right in turn and a dotted S joins it to the next, while the words keep one straight edge. The S stretches to the gap
   between two numbers; its dots keep their size and spacing because the line is drawn at screen scale. */
#workshop .msteps .st{position:relative;grid-template-columns:64px minmax(0,1fr);gap:14px}
#workshop .msteps .st:nth-child(even) .num{margin-left:20px}
#workshop .trail{position:absolute;left:12px;top:53px;width:40px;height:calc(100% - 38px);overflow:visible;pointer-events:none}
#workshop .msteps .st:nth-child(even) .trail{transform:scaleX(-1)}
#workshop .trail path{fill:none;stroke:var(--gold);stroke-width:3.4;stroke-linecap:round;stroke-dasharray:1 8;vector-effect:non-scaling-stroke}
#workshop .after{display:grid;gap:14px;margin-top:36px}
#workshop .after .so{font-weight:600}
#workshop .next{margin-top:12px;background:var(--warm);border-radius:20px;padding:22px 20px 24px;display:grid;gap:12px}
#workshop .next ol{list-style:none;margin:0;padding:0;display:grid;gap:10px;counter-reset:n}
#workshop .next li{counter-increment:n;display:grid;grid-template-columns:24px minmax(0,1fr);gap:8px}
#workshop .next li::before{content:counter(n) ".";font-weight:600;color:var(--bronze-deep)}
#workshop .note{margin-top:8px;font-style:italic;color:var(--soft)}
#workshop .signoff{margin-top:44px;display:grid;gap:14px;justify-items:center;text-align:center}
#workshop .begin{font-weight:600;font-size:20px;line-height:1.4;text-wrap:balance}
#workshop .so-logo{width:200px;margin-top:14px}
#workshop .tagline{font-style:italic;font-size:19px}
#workshop .fine{font-size:15px;line-height:1.45;color:var(--soft);text-wrap:balance}
#workshop .guide{margin-top:48px;border:1.5px solid var(--line);border-radius:20px;padding:20px;display:grid;gap:18px}
#workshop .guide .doc{aspect-ratio:4/3}
#workshop .guide .stack .sheet{width:45%;left:42%}
#workshop .guide .stack > .cover{width:41%;left:14%}
#workshop .guide .txt{display:grid;gap:10px}
#workshop .guide .quiet{justify-self:start}
#workshop .small{font-size:15px;color:var(--soft)}
@media (min-width:900px){
  #workshop .meet{grid-template-columns:300px minmax(0,1fr);gap:64px;max-width:960px}
  #workshop .next{padding:28px 36px 30px}
  #workshop .guide{grid-template-columns:minmax(0,5fr) minmax(0,6fr);align-items:center;gap:32px;padding:26px}
}


/* ---- Row 20: Questions families ask ----
   Answers at body size in white cards, each opened by its question. The toggle classes stay (faq-item, faq-toggle,
   faq-answer and "open"), so #edit still opens every answer and the privacy page's back link still opens its own. The
   stock family photo is gone (D4, for CL to judge by eye): from 900px the label, heading and button stay in view beside
   the questions; on phones the only button follows them. */
#faq .faq{display:grid;gap:26px}
#faq .faq-side{display:grid;gap:10px;justify-items:center;text-align:center}
#faq .side-cta{display:none}
#faq .faq-list{display:grid;gap:12px}
#faq .faq-item{border:1.5px solid var(--line);border-radius:16px;background:var(--page)}
#faq .faq-item h3{font-size:18px;line-height:1.4}
#faq .faq-toggle{display:flex;align-items:center;justify-content:space-between;gap:14px;width:100%;min-height:60px;margin:0;padding:16px 18px;border:0;border-radius:14px;background:none;color:var(--ink);font:600 18px/1.4 Figtree,system-ui,sans-serif;text-align:left;text-wrap:pretty;cursor:pointer}
#faq .faq-chevron{flex:none;width:22px;height:22px;fill:none;stroke:var(--bronze);stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;transition:transform .2s}
#faq .faq-item.open .faq-chevron{transform:rotate(180deg)}
#faq .faq-answer{display:none;padding:0 18px 20px}
#faq .faq-item.open .faq-answer{display:block}
#faq .faq-answer p{color:var(--soft)}
#faq .faq-answer p + p{margin-top:12px}
@media (min-width:900px){
  #faq .faq{grid-template-columns:minmax(0,4fr) minmax(0,7fr);gap:56px;align-items:start}
  #faq .faq-side{position:sticky;top:32px;justify-items:start;text-align:left;gap:12px}
  #faq .side-cta{display:inline-flex;margin-top:14px}
  #faq .after-cta{display:none}
  #faq .faq-item h3{font-size:19px}
  #faq .faq-toggle{padding:18px 22px;font-size:19px}
  #faq .faq-answer{padding:0 22px 22px}
}
@media (prefers-reduced-motion:reduce){#faq .faq-chevron{transition:none}}


/* ---- The footer (review 3.19: a real footer, and the page's footer landmark) ----
   On the warm colour, the full width of the page: the name and what it is, how to reach Chuan Long, then the privacy
   notice and the small print. */
#foot{background:var(--warm);padding:40px 0 36px}
#foot .foot-in{display:grid;gap:26px}
#foot .brand,#foot .contact{display:grid;gap:6px;align-content:start}
#foot .contact{gap:10px}
#foot .name{font-weight:600;font-size:19px}
#foot p{font-size:17px;line-height:1.55;color:var(--soft);text-wrap:pretty}
#foot .name,#foot .mail{color:var(--ink)}
#foot .mail{font-weight:600;overflow-wrap:anywhere}
#foot .contact p:first-child{text-wrap:balance}
#foot .lt{display:inline-flex;align-items:center;justify-content:center;width:48px;height:48px;margin-left:-6px;border-radius:12px}
#foot .lt img{width:auto;height:34px}
#foot .lt:hover{background:var(--block)}
#foot .legal{margin-top:30px;padding-top:20px;border-top:1px solid var(--line);display:grid;gap:14px}
#foot .legal p{font-size:14px;line-height:1.5}
#foot .legal .tl{font-size:15px;font-weight:600;color:var(--ink)}
@media (min-width:900px){
  #foot{padding:56px 0 48px}
  #foot .foot-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px}
}