/* =====================================================================
   Stuff You Can Use · homepage v2
   Daybreak design system (vault: Projects/SYCU Design System.md).
   SYCU is the parent brand: its identity is the logo's folded cyan ribbon,
   which literally reads "YOU CAN". Cyan (#3ABDD5) + pale fold (#AADEE3) are
   the page accents; #0B6B7D is the text-safe cyan. Grow's seven strategy
   colours appear as product/area fills, and in the hero only as a thin top
   stripe and the photo's offset card (2026-10-01). Brand colours are FILLS; text
   uses -ink tones. Primary CTA = Grow green (2026-10-01; was Daybreak orange).
   ===================================================================== */
:root {
  --disc:#F0893C; --teach:#E84E4E; --env:#E4D353; --evt:#BED65A; --vol:#82D1DD; --fam:#F27A9E; --lead:#434A50;
  --disc-ink:#A94F0C; --teach-ink:#B41818; --env-ink:#635910; --evt-ink:#515E17; --vol-ink:#1D616C; --fam-ink:#AE1140; --lead-ink:#434A50;
  --disc-soft:#FDEEE3; --teach-soft:#FCE7E7; --env-soft:#FBF7DA; --evt-soft:#F2F8DF; --vol-soft:#E5F6F8; --fam-soft:#FDE9F0; --lead-soft:#ECEEF0;
  /* SYCU ribbon (sampled from the official logo) */
  --sycu:#3ABDD5; --sycu-fold:#AADEE3; --sycu-ink:#0B6B7D; --sycu-soft:#E3F6F9; --sycu-mist:#F1FAFB;
  /* UI accent: Grow green (2026-10-01; source grow-dashboard-v2/site/base.css). Cyan stays the SYCU page theme. */
  --acc: #BFE478; --acc-hover: #B2DB61; --acc-on: var(--ink); --acc-ink: #4B6D0B; --acc-ring: #5E8117;
  --acc-soft: #F5F8E9; --acc-lip: rgba(77,116,4,.32); --acc-glow: rgba(136,192,26,.32); --acc-edge: #6D941E;
  --ink:#1F2328; --ink-2:#454C55; --ink-3:#5F6873;
  --bg:#F6F5F1; --surface:#FFFFFF; --line:#E4E7EB; --line-2:#D3D8DE;
  --warm:#FBF7F1; --warm-line:#EFE6D8;  /* warm-up pass: cream tint for story + help */
  --char:#434A50; --char-2:#2F3439; --char-3:#23272B; --hl:#DCEBA4;
  --font:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --r-sm:12px; --r:18px; --r-lg:26px; --r-xl:30px; --r-pill:999px;
  --shadow:0 1px 2px rgba(31,35,40,.05), 0 8px 24px rgba(31,35,40,.06);
  --shadow-lg:0 2px 4px rgba(31,35,40,.05), 0 18px 48px rgba(31,35,40,.10);
  --shadow-dark:0 40px 80px -30px rgba(31,35,40,.5);
  --max:80rem;
  --skew:-3deg;              /* ribbon slope: vertical sides, edges rising to the right (like the logo) */
  --ease:cubic-bezier(.2,.8,.2,1);
  /* seven Grow areas, in Daybreak order (Leadership shown as slate so it reads on dark) */
  --seg7:linear-gradient(90deg, var(--disc) 0 14.28%, var(--teach) 0 28.57%, var(--env) 0 42.85%, var(--evt) 0 57.14%, var(--vol) 0 71.42%, var(--fam) 0 85.71%, #C9CFD5 0 100%);
}
[data-theme="disc"]  { --a:var(--disc);  --a-ink:var(--disc-ink);  --a-soft:var(--disc-soft); }
[data-theme="teach"] { --a:var(--teach); --a-ink:var(--teach-ink); --a-soft:var(--teach-soft); }
[data-theme="env"]   { --a:var(--env);   --a-ink:var(--env-ink);   --a-soft:var(--env-soft); }
[data-theme="evt"]   { --a:var(--evt);   --a-ink:var(--evt-ink);   --a-soft:var(--evt-soft); }
[data-theme="vol"]   { --a:var(--vol);   --a-ink:var(--vol-ink);   --a-soft:var(--vol-soft); }
[data-theme="fam"]   { --a:var(--fam);   --a-ink:var(--fam-ink);   --a-soft:var(--fam-soft); }
[data-theme="lead"]  { --a:var(--lead);  --a-ink:var(--lead-ink);  --a-soft:var(--lead-soft); }
[data-theme="sycu"]  { --a:var(--sycu);  --a-ink:var(--sycu-ink);  --a-soft:var(--sycu-soft); }

*,*::before,*::after { box-sizing:border-box; }
[hidden] { display:none !important; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:88px; }
html.lock { overflow:hidden; }
body { margin:0; background:#fff; color:var(--ink); font:400 17px/1.6 var(--font); -webkit-font-smoothing:antialiased; overflow-x:hidden; }
img { max-width:100%; height:auto; display:block; }
a { color:var(--a-ink, var(--sycu-ink)); text-underline-offset:3px; }
b, strong { font-weight:700; }
button { font:inherit; color:inherit; }
:focus-visible { outline:3px solid var(--sycu-ink); outline-offset:2px; border-radius:6px; }
.wrap { max-width:var(--max); margin:0 auto; padding:0 24px; }
.sr-only { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
svg.i { width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; flex:none; }
.skip { position:absolute; left:12px; top:-60px; z-index:100; background:var(--char-3); color:#fff; padding:10px 16px; border-radius:var(--r-pill); font-weight:800; text-decoration:none; }
.skip:focus { top:12px; }

/* ---------- buttons ---------- */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:8px; border:0; cursor:pointer; text-decoration:none; white-space:nowrap;
  font-weight:800; font-size:15px; letter-spacing:-.005em; padding:13px 22px; border-radius:var(--r-pill); transition:transform .15s, box-shadow .15s, background .15s; }
.btn-primary { background: var(--acc); color: var(--acc-on); box-shadow: inset 0 0 0 1.5px var(--acc-edge), 0 2px 0 var(--acc-lip); }
.btn-primary:focus-visible { outline-color:var(--acc-ring); }
.btn-primary:hover { background: var(--acc-hover); transform: translateY(-1px); box-shadow: inset 0 0 0 1.5px var(--acc-edge), 0 6px 16px var(--acc-glow); }
.btn-dark { background:var(--char-3); color:#fff; } .btn-dark:hover { background:#000; transform:translateY(-1px); }
.btn-ghost { background:#fff; color:var(--ink); box-shadow:inset 0 0 0 1.5px var(--line-2); }
.btn-ghost:hover { box-shadow:inset 0 0 0 1.5px var(--ink-3); transform:translateY(-1px); }
.btn-light { background:rgba(255,255,255,.1); color:#fff; box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.4); }
.btn-light:hover { background:rgba(255,255,255,.18); }
.btn-lg { padding:16px 28px; font-size:17px; }
.btn-sm { padding:9px 16px; font-size:14px; }
.btn .arr { transition:transform .15s; } .btn:hover .arr { transform:translateX(3px); }

/* ---------- eyebrow: a mini folded ribbon leads every section label ---------- */
.eyebrow { display:inline-flex; align-items:center; gap:10px; margin:0; font-size:13px; font-weight:800; letter-spacing:.09em; line-height:1.2; text-transform:uppercase; color:var(--a-ink, var(--sycu-ink)); }
.eyebrow::before { content:""; flex:none; width:15px; height:12px; border-radius:2px; transform:skewY(var(--skew));
  background:linear-gradient(var(--a, var(--sycu)) 0 40%, var(--sycu-fold) 40% 60%, var(--a, var(--sycu)) 60% 100%); }
[data-theme] .eyebrow::before, .eyebrow[data-theme]::before { background:linear-gradient(var(--a) 0 40%, var(--a-soft) 40% 60%, var(--a) 60% 100%); }

/* =====================================================================
   UTILITY BAR + HEADER
   ===================================================================== */
.util { background:var(--char-3); color:#C4C9CE; font-size:13px; font-weight:600; }
.util-in { display:flex; align-items:center; justify-content:space-between; gap:20px; min-height:38px; }
.util p { margin:0; display:flex; align-items:center; gap:4px 20px; flex-wrap:wrap; }
.util-lbl { color:#fff; font-weight:800; display:inline-flex; align-items:center; gap:8px; }
.util-lbl::before { content:""; width:12px; height:10px; border-radius:2px; transform:skewY(var(--skew));
  background:linear-gradient(var(--sycu) 0 40%, var(--sycu-fold) 40% 60%, var(--sycu) 60% 100%); }
.util a { color:#DDE1E5; text-decoration:none; display:inline-flex; align-items:center; gap:7px; }
.util a:hover { color:#fff; text-decoration:underline; }
.util svg.i { width:15px; height:15px; color:var(--sycu); }
.util-acct { font-weight:700; }

.hdr { position:sticky; top:0; z-index:50; background:rgba(255,255,255,.94); border-bottom:1px solid var(--line);
  backdrop-filter:saturate(1.4) blur(12px); -webkit-backdrop-filter:saturate(1.4) blur(12px); transition:box-shadow .2s; }
.hdr.scrolled, .hdr.mega-open, .hdr.sheet-open { box-shadow:0 10px 30px -18px rgba(31,35,40,.28); }
.hdr-in { display:flex; align-items:center; gap:18px; height:72px; }
.logo { display:inline-flex; align-items:center; flex:none; margin-right:auto; }
.logo img { height:34px; width:auto; }
.nav { display:flex; align-items:center; gap:2px; }
.nav > a, .dd-btn { color:var(--ink-2); text-decoration:none; font-weight:600; font-size:14.5px; padding:9px 13px; border-radius:var(--r-pill); white-space:nowrap;
  border:0; background:transparent; cursor:pointer; display:inline-flex; align-items:center; gap:4px; line-height:1.2; }
.nav > a:hover, .dd-btn:hover, .dd-btn[aria-expanded="true"] { background:var(--bg); color:var(--ink); }
.dd-btn .chev { width:16px; height:16px; transition:transform .2s; }
.dd-btn[aria-expanded="true"] .chev { transform:rotate(180deg); }
.hdr-cta { padding:11px 20px; font-size:14.5px; margin-left:6px; }
.menu-btn { display:none; }

/* products mega menu */
.mega { position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 40px 80px -20px rgba(31,35,40,.4);
  animation:dropIn .2s var(--ease); max-height:calc(100vh - 110px); overflow:auto; }
@keyframes dropIn { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
.mega-in { display:grid; grid-template-columns:minmax(0,1.1fr) repeat(2, minmax(0,1fr)); gap:28px; padding-top:28px; padding-bottom:32px; }
.mega-grow { position:relative; overflow:hidden; display:flex; flex-direction:column; gap:6px; padding:26px; border-radius:var(--r-lg);
  background:var(--char-3); color:#C4C9CE; text-decoration:none; font-size:14.5px; line-height:1.5; }
.mega-grow .gm { width:52px; height:34px; color:#fff; margin-bottom:10px; }
.mega-k { font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#AEB4BA; }
.mega-grow b { color:#fff; font-size:22px; letter-spacing:-.025em; font-weight:800; line-height:1.15; }
.mega-go { margin-top:auto; padding-top:14px; color:#fff; font-weight:800; }
.mega-ages { display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; }
.mega-ages i { font-style:normal; white-space:nowrap; font-size:12px; font-weight:700; color:#fff; background:rgba(255,255,255,.1); padding:3px 10px; border-radius:var(--r-pill); }
.mega-grow:hover .arr { transform:translateX(3px); } .mega-grow .arr { display:inline-block; transition:transform .15s; }
.seg7 { display:grid; grid-template-columns:repeat(7, 1fr); gap:3px; height:6px; }
.seg7 i { border-radius:2px; background:var(--c); }
.seg7 i:nth-child(1){--c:var(--disc)} .seg7 i:nth-child(2){--c:var(--teach)} .seg7 i:nth-child(3){--c:var(--env)} .seg7 i:nth-child(4){--c:var(--evt)}
.seg7 i:nth-child(5){--c:var(--vol)} .seg7 i:nth-child(6){--c:var(--fam)} .seg7 i:nth-child(7){--c:#C9CFD5}
.mega-grow .seg7 { gap:4px; height:6px; margin-top:12px; max-width:14rem; }
.mega-grow .seg7 i { border-radius:3px; }
.mega-col { display:flex; flex-direction:column; gap:2px; min-width:0; }
.mega-h, .sheet-h { margin:0 0 6px; padding:0 10px; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.mega-col a { display:flex; align-items:center; gap:12px; padding:8px 10px; border-radius:14px; text-decoration:none; color:var(--ink); }
.mega-col a:hover { background:var(--bg); }
.mi { width:36px; height:36px; flex:none; border-radius:11px; display:grid; place-items:center; background:var(--a-soft); color:var(--a-ink); }
.mi svg.i { width:19px; height:19px; }
.mega-col b { display:block; font-size:15px; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.mega-col small { display:block; font-size:13px; color:var(--ink-3); font-weight:500; line-height:1.3; }

/* page scrim under the open mega menu / mobile sheet (sibling of the header, so fixed = viewport) */
.scrim { position:fixed; inset:0; z-index:45; background:rgba(31,35,40,.45); animation:fadeIn .2s ease; }
@keyframes fadeIn { from { opacity:0; } to { opacity:1; } }

/* mobile sheet */
.sheet { position:absolute; left:0; right:0; top:100%; background:#fff; border-bottom:1px solid var(--line); box-shadow:0 30px 60px -20px rgba(31,35,40,.35);
  max-height:calc(100vh - 60px); max-height:calc(100dvh - 60px); overflow-y:auto; overscroll-behavior:contain; animation:dropIn .2s var(--ease); }
.sheet-in { padding:10px 18px calc(32px + env(safe-area-inset-bottom)); max-width:40rem; margin:0 auto; }
.sheet-nav { display:grid; padding-bottom:12px; margin-bottom:16px; border-bottom:1px solid var(--line); }
.sheet-nav a { padding:10px 8px; font-size:18px; font-weight:700; letter-spacing:-.015em; color:var(--ink); text-decoration:none; border-radius:12px; }
.sheet-nav a:hover { background:var(--bg); }
.sheet-h { padding:0 8px; }
.sheet-prod { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; margin-bottom:20px; }
.sheet-prod a { display:flex; align-items:center; gap:10px; padding:8px; border-radius:14px; background:var(--bg); color:var(--ink); text-decoration:none; font-size:14.5px; font-weight:700; line-height:1.2; min-height:52px; }
.sheet-prod .mi { width:34px; height:34px; }
.sheet-prod .sp-grow { grid-column:1 / -1; background:var(--char-3); color:#fff; padding:14px 16px; gap:14px; }
.sp-grow .gm { width:44px; height:28px; color:#fff; flex:none; }
.sp-grow b { display:block; font-size:16px; } .sp-grow small { display:block; color:#C4C9CE; font-weight:500; font-size:13px; }
.sheet-help { display:grid; gap:2px; background:var(--sycu-mist); box-shadow:inset 0 0 0 1px var(--sycu-soft); border-radius:var(--r); padding:14px 10px 10px; margin-bottom:16px; }
.sheet-help .sheet-h { color:var(--sycu-ink); }
.sheet-help a { display:flex; align-items:center; gap:10px; padding:9px 6px; color:var(--ink); font-weight:700; font-size:15px; text-decoration:none; border-radius:10px; overflow-wrap:anywhere; }
.sheet-help svg.i { width:18px; height:18px; color:var(--sycu-ink); }
.sheet-acct { display:grid; grid-template-columns:1fr 1fr; gap:10px; }

/* =====================================================================
   HERO: "Ministry stuff / you can / actually use." set like the logo's fold.
   Kept deliberately calm: the ribbon headline is the hero, and one warm photo,
   cut on the ribbon's slope, is the only other picture.
   ===================================================================== */
.hero { --grow6:var(--disc) 0 16.67%, var(--teach) 0 33.33%, var(--env) 0 50%, var(--evt) 0 66.67%, var(--vol) 0 83.33%, var(--fam) 0 100%;
  position:relative; overflow:hidden; padding:52px 0 60px;
  background:radial-gradient(56rem 34rem at 88% 8%, var(--sycu-mist), transparent 70%), linear-gradient(#fff calc(100% - 140px), var(--bg)); }
/* the Grow colours, twice and no more: a thin stripe on the hero's top edge, and the offset card behind the photo */
.hero::before { content:""; position:absolute; left:0; right:0; top:0; height:5px; background:linear-gradient(90deg, var(--grow6)); }
/* the words set the left column's width (capped on small laptops so the photo keeps its
   size) and the photo takes the rest, so text and photo meet at one steady gap */
.hero-in { display:grid; grid-template-columns:fit-content(clamp(400px, 50vw, 720px)) minmax(0,1fr); gap:clamp(44px, 5.6vw, 72px); align-items:center; }
.hero-txt { min-width:0; }
.fold-h { display:grid; width:max-content; max-width:100%; margin:20px 0 26px; padding-right:.2em; font-size:clamp(40px, 7.8vw, 100px); line-height:1; letter-spacing:-.05em; word-spacing:.06em; font-weight:800; font-kerning:normal; }
.fold-l1 { display:block; }
/* Two stacked cyan bands with the logo's diagonal pale fold between them.
   Geometry sampled from the SYCU ribbon: bands share vertical sides; the fold is a
   parallelogram hanging from the top band on the left and resting on the bottom band
   on the right, leaving a white notch at each end. No offset shadows. */
.bands { display:grid; gap:.26em; margin:.28em -.2em 0 0; }
/* like the logo lockup: equal-width bands, words centred on the ribbon */
.band { position:relative; z-index:0; display:block; line-height:.9; padding:.02em .2em .3em; text-align:center; white-space:nowrap; }
.band::before { content:""; position:absolute; z-index:-1; inset:0; background:var(--sycu); transform:skewY(var(--skew)); }
/* fold sits under both bands and overlaps them by 2px, so no anti-aliased hairlines */
.b1::after { content:""; position:absolute; z-index:-2; left:0; right:0; top:calc(100% - 2px); height:calc(.26em + 4px); background:var(--sycu-fold); transform:skewY(var(--skew));
  clip-path:polygon(0 0, 78% 0, 100% 100%, 20% 100%); }
.pn { margin-left:-.08em; } /* optical kerning: no stray gap before the period */
/* the fold draws in: top band, then the pale underside, then the bottom band */
.b1::before { animation:bandIn .55s var(--ease) .15s both; }
.b1::after  { animation:foldIn .32s var(--ease) .6s both; }
.b2::before { animation:bandIn .55s var(--ease) .78s both; }
@keyframes bandIn { from { clip-path:inset(0 100% 0 0); } to { clip-path:inset(0 0 0 0); } }
@keyframes foldIn { from { clip-path:polygon(0 0, 0 0, 20% 100%, 20% 100%); } to { clip-path:polygon(0 0, 78% 0, 100% 100%, 20% 100%); } }

.hero-sub { font-size:clamp(17px, 1.5vw, 20px); line-height:1.55; color:var(--ink-2); font-weight:500; max-width:32rem; margin:0; text-wrap:pretty; }
.hero-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:32px; }
.hero-proof { display:inline-flex; align-items:center; gap:10px; margin-top:22px; font-size:14.5px; font-weight:600; color:var(--ink-2); text-decoration:none; }
.hero-proof b { color:var(--ink); }
.hero-proof .nw { white-space:nowrap; }
.hero-proof:hover span:last-child { text-decoration:underline; }
.hero-proof .star { width:26px; height:26px; flex:none; border-radius:8px; background:var(--sycu-soft); color:var(--sycu-ink); display:grid; place-items:center; }
.hero-proof .star svg.i { width:16px; height:16px; }

/* one warm moment, flat like the ribbon (no shadow): vertical sides, top and bottom rising
   to the right on the ribbon's slope. The frame is skewed; the photo is counter-skewed so
   nobody leans, and scaled just enough to fill the slanted corners
   (--ph-fill >= 1 + (width / height) * tan 3deg, so it changes with the frame's shape).
   Never narrower than 5:6, so both faces stay whole. Behind it, the Grow colours sit as one
   offset card cut on the same slope; it slides out from behind the photo once. */
.hero-art { --off:clamp(14px, 2.2vw, 32px); position:relative; isolation:isolate; min-width:0; width:calc(100% - var(--off)); animation:phIn .8s var(--ease) .2s both; }
.hero-art::before { content:""; position:absolute; z-index:-1; inset:0; border-radius:16px; transform:translate(var(--off), var(--off)) skewY(var(--skew));
  background:linear-gradient(45deg, var(--grow6)); animation:offIn .55s var(--ease) .8s both; }
.hero-ph { --ph-fill:1.05; position:relative; isolation:isolate; margin:0; aspect-ratio:5/6; border-radius:16px; overflow:hidden; background:var(--sycu-soft);
  transform:skewY(var(--skew)); }
.hero-ph img { width:100%; height:100%; object-fit:cover; transform:skewY(calc(-1 * var(--skew))) scale(var(--ph-fill)); }
@keyframes phIn { from { opacity:0; translate:0 16px; } to { opacity:1; translate:0 0; } }
@keyframes offIn { from { translate:calc(-1 * var(--off)) calc(-1 * var(--off)); } to { translate:0 0; } }

/* draft marker lives in the utility bar (no floating chrome over content) */
.draft { font-size:11px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--char-3); background:var(--sycu-fold); padding:2px 8px; border-radius:var(--r-pill); }

/* ---------- header + hero responsive ---------- */
@media (max-width:1200px) {
  .util-lbl { display:none; }
  .nav > a, .dd-btn { padding:9px 10px; }
}
@media (max-width:1120px) {
  .util { display:none; }
  .nav { display:none; }
  .hdr-in { height:64px; gap:10px; }
  .logo img { height:30px; }
  .menu-btn { display:inline-flex; align-items:center; justify-content:center; width:44px; height:44px; flex:none; border-radius:12px; border:0; background:var(--bg); cursor:pointer; }
  .burger { position:relative; width:20px; height:14px; }
  .burger i { position:absolute; left:0; right:0; height:2px; border-radius:2px; background:var(--ink); transition:transform .2s var(--ease), opacity .2s, top .2s var(--ease); }
  .burger i:nth-child(1){top:0} .burger i:nth-child(2){top:6px} .burger i:nth-child(3){top:12px}
  .menu-btn[aria-expanded="true"] .burger i:nth-child(1) { top:6px; transform:rotate(45deg); }
  .menu-btn[aria-expanded="true"] .burger i:nth-child(2) { opacity:0; }
  .menu-btn[aria-expanded="true"] .burger i:nth-child(3) { top:6px; transform:rotate(-45deg); }
  .sheet { max-height:calc(100vh - 64px); max-height:calc(100dvh - 64px); }
}
@media (max-width:1040px) {
  .hero { padding:52px 0 56px; }
}
/* one column: the photo becomes a calm wide strip under the text, still on the slope */
@media (max-width:860px) {
  .hero-in { grid-template-columns:1fr; gap:48px; }
  .hero-txt { max-width:44rem; }
  .fold-h { font-size:clamp(40px, 8.4vw, 78px); }
  .hero-ph { --ph-fill:1.11; aspect-ratio:2/1; }
}
@media (max-width:640px) {
  .wrap { padding:0 18px; }
  .hdr-in { height:60px; }
  .logo img { height:26px; }
  .hdr-cta { padding:10px 15px; font-size:14px; margin-left:0; }
  .sheet { max-height:calc(100vh - 60px); max-height:calc(100dvh - 60px); }
  .hero { padding:36px 0 44px; }
  .fold-h { font-size:clamp(34px, 14vw, 60px); margin:16px 0 22px; }
  .band { text-align:left; }
  .hero .eyebrow { font-size:12px; letter-spacing:.07em; text-wrap:balance; }
  .hero-cta .btn { width:100%; }
  .hero-in { gap:40px; }
  /* phones: the two proof facts stack cleanly instead of stranding the dot */
  .hero-proof .dot { display:none; }
  .hero-proof .nw { display:block; }
  .hero-ph, .hero-art::before { border-radius:14px; }
  .hero-ph { --ph-fill:1.085; aspect-ratio:3/2; }
}
@media (max-width:360px) {
  .hdr-in { gap:8px; }
  .hdr-cta { padding:9px 11px; font-size:13px; }
  .logo img { height:21px; }
  .menu-btn { width:40px; height:40px; }
  .sheet-prod { grid-template-columns:1fr; }
}

/* =====================================================================
   SHARED SECTION PARTS (v2)
   ===================================================================== */
section { position:relative; }
.sec { padding:104px 0; } .sec.tint { background:var(--bg); }
.h2 { font-size:clamp(32px,4.4vw,52px); line-height:1.08; letter-spacing:-.034em; word-spacing:.04em; font-weight:800; margin:14px 0 16px; text-wrap:balance; }
.lede { font-size:clamp(17px,1.6vw,20px); color:var(--ink-2); max-width:40rem; margin:0; line-height:1.55; text-wrap:pretty; }
.head { max-width:46rem; margin-bottom:48px; }
.head.center { margin-left:auto; margin-right:auto; text-align:center; } .head.center .lede { margin:0 auto; }
.head-row { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:40px; }
.head-row .head { margin-bottom:0; }
/* SYCU marker: the pale fold colour as a highlighter. Inline (no margins), so punctuation hugs it. */
.mk { background:linear-gradient(transparent 58%, var(--sycu-fold) 58%, var(--sycu-fold) 90%, transparent 90%); padding:0 .04em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }

/* =====================================================================
   TAPES: two crossed ribbons. Cyan = the "you can" voice; charcoal = the facts.
   ===================================================================== */
.tapes { position:relative; height:220px; overflow:hidden; background:var(--bg); }
.tape { position:absolute; left:-20%; right:-20%; top:50%; overflow:hidden; display:flex; }
/* a true cross: the charcoal fact tape runs underneath, the cyan "you can" tape on top */
.t-you { z-index:2; background:var(--sycu); color:var(--ink); transform:translateY(-50%) rotate(-4.2deg); }
.t-facts { z-index:1; background:var(--char-3); color:#fff; transform:translateY(-50%) rotate(3.8deg); }
.track { display:flex; flex:none; margin:0; padding:0; list-style:none; animation:marq 64s linear infinite; }
.t-facts .track { animation-duration:80s; animation-direction:reverse; }
@keyframes marq { from { transform:translateX(0); } to { transform:translateX(-50%); } }
.t-you span { flex:none; display:flex; align-items:center; gap:30px; padding:15px 0 15px 30px; font-size:clamp(21px, 2.3vw, 30px); font-weight:800; letter-spacing:-.03em; white-space:nowrap; }
.t-you span::after { content:""; width:17px; height:14px; border-radius:2px; transform:skewY(var(--skew)); background:linear-gradient(#fff 0 40%, var(--sycu-fold) 40% 60%, #fff 60% 100%); }
.t-facts li { flex:none; display:flex; align-items:center; gap:26px; padding:14px 0 14px 26px; font-size:13.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; white-space:nowrap; }
.t-facts li::after { content:""; width:7px; height:7px; border-radius:2px; background:var(--sycu); }

/* =====================================================================
   PATHS: one obvious path per audience
   ===================================================================== */
#paths { background:var(--bg); padding-top:56px; }
.paths { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.path { display:flex; flex-direction:column; min-width:0; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; transition:transform .2s var(--ease), box-shadow .2s; }
.path:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
/* a colour field cut on the ribbon angle (rises to the right, like the logo) */
.path-top { display:flex; flex-direction:column; align-items:flex-start; gap:16px; padding:24px 24px 38px; background:var(--a); color:var(--ink);
  clip-path:polygon(0 0, 100% 0, 100% calc(100% - 16px), 0 100%); }
.path-top .ico { width:50px; height:50px; border-radius:15px; display:grid; place-items:center; background:rgba(255,255,255,.6); }
.path-top .ico svg.i { width:24px; height:24px; }
.path-top .ico, .path-top .path-k { position:relative; z-index:2; }
.path-ph { position:relative; z-index:0; }
/* warm: a real-feeling moment on top of each path; the icon badge straddles the seam */
.path-ph { display:block; margin:-24px -24px 0; width:calc(100% + 48px); aspect-ratio:16/10; overflow:hidden; background:var(--a-soft); }
.path-ph img { width:100%; height:100%; object-fit:cover; object-position:var(--op, 50% 50%); transition:transform .6s var(--ease); }
.path:hover .path-ph img { transform:scale(1.03); }
.path-top:has(.path-ph) { gap:10px; padding-bottom:32px; }
/* the icon becomes a white tile pinned to the photo's lower-right corner (clear of faces) */
.path-ph + .ico { align-self:flex-end; margin-top:-36px; background:#fff; color:var(--a-ink); box-shadow:0 0 0 4px var(--a), 0 8px 18px -8px rgba(31,35,40,.45); }
.path-ph + .ico + .path-k { margin-top:-20px; max-width:calc(100% - 70px); min-height:2.6em; }
.path-k { margin:0; font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; line-height:1.3; }
.path[data-theme="lead"] .path-top { color:#fff; }
.path[data-theme="lead"] .path-top .ico { background:rgba(255,255,255,.14); }
.path[data-theme="lead"] .path-ph + .ico { background:#fff; }
.path h3 { margin:6px 24px 8px; font-size:23px; line-height:1.18; letter-spacing:-.025em; font-weight:800; }
.path > p { margin:0 24px; color:var(--ink-2); font-size:16px; line-height:1.55; text-wrap:pretty; min-height:4.65em; }
.path-links { list-style:none; margin:18px 24px 22px; padding:0; border-top:1px solid var(--line); }
.path-links li { border-bottom:1px solid var(--line); }
.path-links a { display:flex; align-items:center; gap:8px; padding:11px 22px 11px 0; color:var(--ink); text-decoration:none; font-weight:700; font-size:15.5px; line-height:1.3; }
.path-links a::after { content:"→"; margin-left:auto; color:var(--a-ink); transform:translateX(-4px); opacity:.8; transition:transform .15s, opacity .15s; }
.path-links a:hover { color:var(--a-ink); }
.path-links a:hover::after { transform:none; opacity:1; }
.tag-free { font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; background:var(--evt-soft); color:var(--evt-ink); padding:2px 7px; border-radius:var(--r-pill); }
.path-go { margin:auto 24px 24px; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 18px; border-radius:var(--r-pill);
  background:var(--a-soft); color:var(--a-ink); font-weight:800; font-size:15px; text-decoration:none; transition:background .15s; }
.path-go .arr { transition:transform .15s; } .path-go:hover .arr { transform:translateX(3px); }
.path-go:hover { background:var(--a); color:var(--ink); }
.path[data-theme="lead"] .path-go:hover { color:#fff; }
@media (max-width:1180px) { .paths { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) {
  .sec { padding:64px 0; }
  #paths { padding-top:28px; }
  .t-you span { padding:9px 0 9px 20px; gap:20px; font-size:18px; }
  .t-facts li { padding:9px 0 9px 18px; gap:18px; font-size:11.5px; }
  .paths { grid-template-columns:1fr; gap:24px; }
  .tape { left:-35%; right:-35%; }
  .t-you { transform:translateY(-50%) rotate(-10deg); } .t-facts { transform:translateY(-50%) rotate(10deg); }
  .tapes { height:220px; }
  .path h3 { font-size:21px; }
  .path-ph { aspect-ratio:16/9; }
  .path > p { min-height:0; }
  .path-ph + .ico + .path-k { min-height:0; }
}

/* =====================================================================
   SECTIONS BELOW (v1 styles, being replaced section by section)
   ===================================================================== */
.hl { background:linear-gradient(transparent 56%, var(--hl) 56%, var(--hl) 86%, transparent 86%); padding:0 .06em; -webkit-box-decoration-break:clone; box-decoration-break:clone; }
.cta-row { display:flex; gap:12px; flex-wrap:wrap; align-items:center; margin-top:36px; }
.cta-row.center { justify-content:center; }
.cta-note { font-size:14.5px; color:var(--ink-3); font-weight:600; }
.chip { display:inline-flex; align-items:center; gap:6px; background:var(--a-soft); color:var(--a-ink); font-size:13px; font-weight:700; padding:4px 11px; border-radius:var(--r-pill); white-space:nowrap; }
.more { font-weight:800; font-size:15.5px; text-decoration:none; color:var(--ink); display:inline-flex; gap:6px; align-items:center; }
.more:hover { text-decoration:underline; }
.rib { position:relative; display:inline-block; padding:0 .12em; margin:0 .12em 0 .08em; z-index:0; white-space:nowrap; }
.rib::before { content:""; position:absolute; z-index:-1; left:0; right:0; top:.12em; bottom:.04em; background:var(--sycu); transform:skewX(-10deg) rotate(-1.5deg); border-radius:.08em; }

/* =====================================================================
   GROW: the flagship, in a dark "show the real product" panel
   ===================================================================== */
#grow { padding-top:96px; }
.gp { position:relative; overflow:hidden; background:var(--char-3); color:#C4C9CE; border-radius:var(--r-xl); box-shadow:var(--shadow-dark); padding:56px 56px 48px; }
.gp::before { content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--seg7); }
.gp-head { display:grid; grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr); gap:56px; align-items:center; }
.gp-logo { display:block; width:66px; height:42px; color:#fff; margin-bottom:20px; }
.gp-eb { color:#fff; }
.gp .eyebrow::before { background:linear-gradient(var(--disc) 0 40%, #FAD2B3 40% 60%, var(--disc) 60% 100%); }
.gp-h { margin:14px 0 16px; color:#fff; font-size:clamp(32px, 4.2vw, 54px); line-height:1.05; letter-spacing:-.036em; word-spacing:.04em; font-weight:800; text-wrap:balance; }
.gp-p { margin:0; font-size:18px; line-height:1.6; max-width:36rem; text-wrap:pretty; }
.gp-facts { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.gp-facts li { position:relative; padding-left:32px; color:#fff; font-size:16px; font-weight:700; line-height:1.4; }
.gp-facts li::before { content:""; position:absolute; left:0; top:1px; width:22px; height:22px; border-radius:50%; background:var(--evt) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231F2328' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/14px no-repeat; }
.gp-cta { display:flex; flex-wrap:wrap; gap:12px; margin-top:30px; }
.gp-note { margin:16px 0 0; font-size:14.5px; font-weight:600; color:#AEB4BA; }
.gp-note a { color:#fff; font-weight:800; white-space:nowrap; }
/* warm: one real Grow still at the top of the action column, with a 7-colour offset */
.gp-pin { position:relative; z-index:1; width:min(340px, calc(100% - 14px)); margin:0 0 36px; transform:rotate(1.6deg); }
.gp-pin::before { content:""; position:absolute; z-index:-1; inset:0; border-radius:16px; background:linear-gradient(135deg, var(--disc) 0 16%, var(--teach) 0 32%, var(--env) 0 48%, var(--evt) 0 64%, var(--vol) 0 80%, var(--fam) 0 100%); transform:translate(9px, 9px) rotate(-1.5deg); opacity:.95; }
.gp-pin img { display:block; width:100%; aspect-ratio:16/9; object-fit:cover; border:5px solid #fff; border-radius:16px; background:#3A4047; box-shadow:0 18px 40px -18px rgba(0,0,0,.7); }
.gp-pin figcaption { position:absolute; left:14px; bottom:13px; padding:3px 10px; border-radius:var(--r-pill); background:rgba(31,35,40,.82); color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.01em; line-height:1.5; }
.gp-lbl { display:flex; align-items:baseline; justify-content:space-between; gap:16px; margin:0 0 14px; font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:#AEB4BA; }
.gp-lbl a { color:#fff; text-decoration:none; letter-spacing:0; text-transform:none; font-size:14.5px; white-space:nowrap; }
.gp-lbl a:hover { text-decoration:underline; }
.gp-lbl a .arr { display:inline-block; transition:transform .15s; } .gp-lbl a:hover .arr { transform:translateX(3px); }
.gp-areas { margin-top:52px; }
.areas { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:10px; }
.area { position:relative; display:flex; flex-direction:column; gap:6px; min-height:188px; padding:16px 14px 18px; border-radius:16px; background:var(--a); color:var(--ink);
  transition-delay:var(--d, 0ms); }
.area .n { font-size:12px; font-weight:800; letter-spacing:.06em; opacity:.7; padding-bottom:22px; }
.area b { font-size:16.5px; font-weight:800; letter-spacing:-.015em; line-height:1.2; }
.area .d { font-size:13.5px; font-weight:600; line-height:1.38; }
.area[data-theme="lead"] { background:#C9CFD5; color:var(--ink); }
.gp-year { margin-top:40px; padding-top:28px; border-top:1px solid rgba(255,255,255,.1); }
.yearwall { list-style:none; margin:0; padding:0; display:grid; grid-template-columns:repeat(6, minmax(0,1fr)); gap:16px 12px; }
.yearwall li { min-width:0; }
.yearwall img { width:100%; aspect-ratio:16/9; object-fit:cover; border-radius:12px; background:var(--char-2); transition:transform .3s var(--ease); }
.yearwall li:hover img { transform:translateY(-3px); }
.yearwall span { display:block; margin-top:8px; font-size:13.5px; font-weight:700; color:#fff; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.yearwall span b { display:inline-block; min-width:2.6em; margin-right:4px; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--sycu); }
@media (max-width:1180px) {
  .areas { grid-template-columns:repeat(4, minmax(0,1fr)); }
  .area { min-height:150px; }
  .yearwall { grid-template-columns:repeat(4, minmax(0,1fr)); }
}
@media (max-width:1040px) {
  .gp { padding:48px 36px 40px; }
  .gp-head { grid-template-columns:1fr; gap:32px; }
  .gp-facts { grid-template-columns:repeat(3, minmax(0,1fr)); }
  /* tablet/phone: the still sits in the flow, between the intro and the facts */
  .gp-pin { width:min(400px, calc(100% - 14px)); margin-bottom:40px; transform:rotate(-1.2deg); }
}
@media (max-width:640px) {
  #grow { padding-top:56px; }
  .gp { margin:0 -6px; padding:40px 20px 36px; border-radius:24px; }
  .gp-logo { width:56px; height:36px; }
  .gp-p { font-size:17px; }
  .gp-facts { grid-template-columns:1fr; }
  .gp-cta .btn { width:100%; }
  .areas { grid-template-columns:1fr 1fr; gap:8px; }
  .area { min-height:0; padding:14px 14px 15px; }
  .area b { margin-top:6px; }
  .area[data-theme="lead"] { grid-column:1 / -1; }
  .area .n { padding-bottom:10px; }
  /* the year becomes a swipe row */
  .yearwall { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:62%; overflow-x:auto; scroll-snap-type:x mandatory; margin:0 -20px; padding:0 20px 8px;
    scroll-padding:0 20px; scrollbar-width:none; }
  .yearwall::-webkit-scrollbar { display:none; }
  .yearwall li { scroll-snap-align:start; }
  .gp-lbl { flex-wrap:wrap; }
}

/* =====================================================================
   TOOLS: the product family bento on a 3-column grid.
   Cards use an icon + title row with the copy spanning the full card width,
   so mobile never gets a narrow text column. One link colour (cyan ink).
   ===================================================================== */
.bento { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.bento-lbl { grid-column:1 / -1; margin:8px 0 -6px; display:flex; align-items:center; gap:12px; font-size:12.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-3); }
.bento-lbl::after { content:""; flex:1; height:1px; background:var(--line-2); }
.bento-lbl:not(:first-child) { margin-top:24px; }
.tool { position:relative; display:flex; flex-direction:column; gap:14px; min-width:0; padding:24px; border-radius:var(--r-lg); background:#fff; box-shadow:var(--shadow);
  color:var(--ink); text-decoration:none; overflow:hidden; transition:transform .2s var(--ease), box-shadow .2s; }
.tool:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.tool-ico { width:52px; height:52px; flex:none; border-radius:15px; display:grid; place-items:center; background:var(--a); color:var(--ink); }
.tool[data-theme="lead"] .tool-ico { color:#fff; }
.tool-body { display:flex; flex-direction:column; gap:6px; flex:1; min-width:0; }
.tool-t { display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.tool-t b { font-size:20px; font-weight:800; letter-spacing:-.022em; line-height:1.2; }
.tag { font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:3px 8px; border-radius:var(--r-pill); background:var(--evt-soft); color:var(--evt-ink); }
.tool-d { font-size:15.5px; line-height:1.5; color:var(--ink-2); text-wrap:pretty; }
.tool-url { margin-top:auto; padding-top:10px; font-size:13.5px; font-weight:700; color:var(--sycu-ink); overflow-wrap:anywhere; }
.tool-url .arr { display:inline-block; transition:transform .15s; } .tool:hover .tool-url .arr { transform:translateX(3px); }
/* horizontal cards: icon on the left, copy beside it (desktop) */
.tool-row { flex-direction:row; align-items:stretch; gap:18px; }
.tool-row .tool-ico { align-self:flex-start; }
/* Lesson Builder feature: spans 2 columns */
.tool-xl { grid-column:span 2; display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:1fr auto 1fr; column-gap:28px;
  background:var(--char-3); color:#C4C9CE; }
.tool-xl .tool-ico { grid-column:1; grid-row:1; align-self:end; margin-bottom:18px; }
.tool-xl .tool-body { grid-column:1; grid-row:2; }
.tool-xl .tool-art { grid-column:2; grid-row:1 / -1; }
.tool-xl .tool-t b { color:#fff; font-size:26px; }
.tool-xl .tool-d { color:#DDE1E5; font-size:20px; font-weight:600; line-height:1.4; letter-spacing:-.01em; max-width:22rem; }
.tool-xl .tool-url { color:#fff; }
.tool-xl .tool-url { margin-top:14px; }
.tool-xl .tag { background:var(--evt); color:var(--ink); }
.tool-stack { display:grid; gap:20px; min-width:0; }
/* Kenny 2026-10-12 r7: one "Grow Games & Kids Music" card (two links) takes two columns, so the row stays even */
.tool-duo { grid-column:span 2; }
.tool-links { margin-top:auto; display:flex; flex-wrap:wrap; gap:2px 22px; }
.tool-links .tool-url { margin-top:0; padding-top:10px; text-decoration:none; }
.tool-links .tool-url:hover { text-decoration:underline; }
.tool-links .tool-url:hover .arr { transform:translateX(3px); }
.tool-art { position:relative; flex:1; min-height:220px; border-radius:18px; background:var(--teach-soft); overflow:hidden; }
.la-doc { position:absolute; left:12%; right:12%; top:14%; bottom:-14px; display:flex; flex-direction:column; gap:10px; padding:18px 20px; border-radius:14px 14px 0 0; background:#fff;
  box-shadow:0 18px 36px -18px rgba(180,24,24,.45); }
.la-top { display:flex; align-items:center; gap:7px; font-size:11px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; color:var(--teach-ink); margin-bottom:2px; white-space:nowrap; }
.la-chips { display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 4px; }
.la-doc .la-sub { height:9px; width:38%; background:var(--ink-3); margin-top:6px; }
.la-chips em { font-style:normal; font-size:11px; font-weight:800; padding:4px 9px; border-radius:99px; background:var(--bg); color:var(--ink-3); white-space:nowrap; }
.la-chips em.on { background:var(--teach); color:#fff; }
.la-dot { width:8px; height:8px; border-radius:2px; background:var(--teach); }
.la-doc i { display:block; height:7px; border-radius:4px; background:#E4E7EB; width:92%; font-style:normal; }
.la-doc .la-h { height:12px; width:62%; background:var(--ink); margin-bottom:2px; }
.la-doc .la-w70 { width:70%; } .la-doc .la-w60 { width:56%; }
.la-edit { position:relative; display:flex; align-items:center; gap:3px; padding:6px 8px; margin:0 -8px; border-radius:8px; background:var(--teach-soft); box-shadow:inset 0 0 0 1.5px var(--teach); }
.la-edit .la-w84 { width:64%; background:var(--teach); opacity:.55; }
.la-caret { width:2px; height:14px; background:var(--teach-ink); animation:blink 1.1s steps(1) infinite; }
@keyframes blink { 50% { opacity:0; } }
@media (max-width:1180px) {
  .tool-xl { grid-column:1 / -1; }
  .tool-stack { grid-column:1 / -1; grid-template-columns:1fr 1fr; }
  .bento { grid-template-columns:repeat(2, minmax(0,1fr)); }
}
@media (max-width:640px) {
  .bento { grid-template-columns:1fr; gap:12px; }
  .tool-stack { grid-template-columns:1fr; gap:12px; }
  .tool, .tool-row, .tool-xl, .tool-duo { grid-column:1 / -1; display:grid; grid-template-columns:44px minmax(0,1fr); column-gap:14px; row-gap:8px; padding:18px; }
  .tool-ico { width:44px; height:44px; border-radius:13px; }
  .tool-ico svg.i { width:20px; height:20px; }
  .tool-body { display:contents; }
  .tool-t { grid-column:2; align-self:center; }
  .tool-t b, .tool-xl .tool-t b { font-size:18px; }
  .tool-d, .tool-url, .tool-links { grid-column:1 / -1; }
  .tool-xl .tool-d { font-size:15.5px; }
  .tool-url { padding-top:0; }
  .tool-links { flex-direction:column; gap:10px; }
  .tool-links .tool-url { padding:2px 0; }
  .tool-xl { grid-template-rows:none; }
  .tool-xl .tool-ico { grid-column:1; grid-row:auto; align-self:center; margin:0; }
  .tool-art { display:none; }
}

/* =====================================================================
   FREE STUFF: age tabs + full (never truncated) descriptions
   ===================================================================== */
.free-head { display:flex; justify-content:space-between; align-items:flex-end; gap:24px; flex-wrap:wrap; margin-bottom:36px; }
.free-head .head { margin-bottom:0; }
.age-switch { display:inline-flex; gap:4px; background:var(--bg); border-radius:var(--r-pill); padding:5px; max-width:100%; box-shadow:inset 0 0 0 1px var(--line); }
.age-switch button { border:0; background:transparent; cursor:pointer; padding:11px 20px; border-radius:var(--r-pill); font-weight:700; font-size:15px; color:var(--ink-2); white-space:nowrap; transition:background .15s, color .15s; }
.age-switch button:hover { color:var(--ink); background:rgba(255,255,255,.7); }
.age-switch button[aria-selected="true"] { background:var(--char-3); color:#fff; }
.freebies { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:20px; }
.freebie { display:flex; flex-direction:column; min-width:0; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; color:var(--ink); text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s; animation:tileIn .45s var(--ease) both; }
.freebie:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
@keyframes tileIn { from { opacity:0; transform:translateY(10px); } to { opacity:1; transform:none; } }
.freebie .art { position:relative; aspect-ratio:16/9; background:var(--a-soft, var(--bg)); }
.freebie .art img { width:100%; height:100%; object-fit:cover; }
.free { position:absolute; top:8px; left:8px; background:#fff; color:var(--ink); font-size:11.5px; font-weight:800; letter-spacing:.06em; text-transform:uppercase; padding:3px 9px; border-radius:var(--r-pill); box-shadow:0 1px 2px rgba(0,0,0,.18); }
.freebie .bd { flex:1; display:flex; flex-direction:column; gap:8px; padding:18px 20px 20px; }
.freebie .chip { align-self:flex-start; display:inline-flex; background:var(--a-soft); color:var(--a-ink); font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); }
.freebie h3 { margin:2px 0 0; font-size:18px; line-height:1.25; letter-spacing:-.015em; font-weight:800; }
.freebie p { margin:0; font-size:14.5px; line-height:1.5; color:var(--ink-2); text-wrap:pretty; }
.freebie .get { margin-top:auto; padding-top:8px; font-size:14px; font-weight:800; color:var(--sycu-ink); }
.freebie .get .arr { display:inline-block; transition:transform .15s; } .freebie:hover .get .arr { transform:translateX(3px); }
.free-foot { display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:32px; padding-top:24px; border-top:1px solid var(--line); }
.free-foot p { margin:0; font-size:15px; font-weight:600; color:var(--ink-2); }
.free-foot p a { color:var(--acc-ink); font-weight:800; }
@media (max-width:1180px) { .freebies { grid-template-columns:repeat(3, minmax(0,1fr)); } }
@media (max-width:900px) { .freebies { grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (max-width:640px) {
  .free-head { margin-bottom:24px; }
  .age-switch { display:flex; width:100%; }
  .age-switch button { flex:1; padding:10px 8px; font-size:14.5px; }
  .freebies { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:80%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:-10px -18px 0; padding:14px 18px 22px; scroll-padding:0 18px; scrollbar-width:none; }
  .freebies::-webkit-scrollbar { display:none; }
  .freebie { scroll-snap-align:start; }
  .free-foot { flex-direction:column; align-items:stretch; text-align:center; }
}

/* =====================================================================
   TRAINING: Leadership Labs (dark panel) + podcast + Answers
   ===================================================================== */
.learn { display:grid; grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr); gap:20px; align-items:stretch; }
.labs { position:relative; overflow:hidden; background:var(--char-3); color:#C4C9CE; border-radius:var(--r-xl); padding:36px; box-shadow:var(--shadow-dark); }
.labs::before { content:""; position:absolute; left:0; right:0; top:0; height:8px; background:linear-gradient(var(--sycu) 0 100%); }
.labs-top { display:grid; grid-template-columns:minmax(0,1fr) auto; gap:24px; align-items:start; }
.labs-eb { color:#fff; }
.labs h3 { margin:14px 0 10px; color:#fff; font-size:clamp(26px, 2.6vw, 34px); line-height:1.12; letter-spacing:-.035em; font-weight:800; text-wrap:balance; }
.labs-p { margin:0; font-size:16.5px; line-height:1.6; max-width:34rem; text-wrap:pretty; }
.yulee { margin:4px 0 0; width:132px; text-align:center; }
.yulee img { width:108px; height:108px; margin:0 auto 10px; border-radius:50%; object-fit:cover; background:var(--sycu-fold); box-shadow:0 0 0 5px var(--char-3), 0 0 0 7px var(--sycu); }
.yulee figcaption { font-size:12.5px; line-height:1.35; color:#AEB4BA; font-weight:600; }
.yulee b { display:block; color:#fff; font-size:14px; }
.sched { list-style:none; margin:26px 0 0; padding:0; display:grid; gap:10px; }
.lab { display:grid; grid-template-columns:64px minmax(0,1fr) auto; gap:16px; align-items:center; padding:12px 12px 12px 12px; border-radius:18px; background:var(--char-2); }
.lab .dt { background:#fff; color:var(--ink); border-radius:14px; text-align:center; padding:8px 0 7px; line-height:1; }
.lab .dt small { display:block; font-size:11.5px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--sycu-ink); }
.lab .dt b { display:block; font-size:25px; font-weight:800; letter-spacing:-.04em; margin-top:4px; }
.lab .tt { min-width:0; }
.lab .tt b { display:block; color:#fff; font-size:16.5px; line-height:1.3; letter-spacing:-.01em; }
.lab .tt > span:last-child { display:block; margin-top:2px; font-size:13.5px; color:#AEB4BA; font-weight:600; }
.lab .nx { display:inline-block; margin-bottom:5px; font-size:11px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; background:var(--sycu); color:var(--ink); padding:2px 8px; border-radius:99px; }
.lab.next { background:#2C3A3F; box-shadow:inset 0 0 0 1.5px var(--sycu); }
.labs .btn-light { background:rgba(255,255,255,.14); box-shadow:inset 0 0 0 1.5px rgba(255,255,255,.55); }
.labs .inc { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:8px 16px; margin:22px 0 0; padding:0; list-style:none; font-size:14px; font-weight:600; color:#C4C9CE; }
.labs .inc li::before { content:"✓"; color:var(--sycu); font-weight:800; margin-right:6px; }
.labs .host { margin:22px 0 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.12); font-size:14.5px; line-height:1.55; color:#AEB4BA; }
.labs .host a { color:#fff; font-weight:800; text-decoration:none; white-space:nowrap; }
.labs .host a:hover { text-decoration:underline; }
.side { display:grid; grid-template-rows:auto 1fr; gap:20px; min-width:0; }
.pod { background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); padding:28px; }
.pod-top { display:flex; align-items:center; gap:16px; }
.pod-ico { width:56px; height:56px; flex:none; border-radius:16px; display:grid; place-items:center; background:var(--char-3); color:var(--sycu); }
.pod-ico svg.i { width:26px; height:26px; }
.pod h3 { margin:6px 0 0; font-size:22px; letter-spacing:-.025em; font-weight:800; line-height:1.15; }
.pod-p { margin:14px 0 14px; color:var(--ink-2); font-size:15.5px; line-height:1.55; }
.eps { list-style:none; padding:0; margin:0 0 18px; display:grid; gap:2px; }
.eps a { display:grid; grid-template-columns:36px minmax(0,1fr) 28px; gap:12px; align-items:center; padding:8px 8px; border-radius:12px; text-decoration:none; color:var(--ink); }
.eps a:hover { background:var(--bg); }
.eps .n { width:36px; height:36px; border-radius:50%; background:var(--sycu-soft); color:var(--sycu-ink); display:grid; place-items:center; font-size:13px; font-weight:800; }
.eps b { font-size:15.5px; font-weight:700; line-height:1.3; }
.eps .play { width:28px; height:28px; border-radius:50%; display:grid; place-items:center; background:var(--bg); color:var(--ink); transition:background .15s, color .15s; }
.eps .play svg.i { width:14px; height:14px; margin-left:2px; }
.eps a:hover .play { background:var(--sycu); color:var(--ink); }
.pod-row { display:flex; gap:10px; flex-wrap:wrap; }
.pod-row svg.i { width:17px; height:17px; }
.ans { display:flex; flex-direction:column; background:var(--sycu-soft); border-radius:var(--r-lg); padding:28px; }
.ans h3 { margin:6px 0 0; font-size:22px; letter-spacing:-.025em; font-weight:800; line-height:1.15; }
.pod-top .eyebrow { font-size:12px; }
.ans p { margin:14px 0 16px; font-size:15.5px; color:var(--ink-2); line-height:1.55; }
.ans-ico { background:var(--sycu); color:var(--ink); }
.ans-shows { margin-top:auto; }
.ans-shows { display:grid; grid-template-columns:1fr 1fr; gap:10px; align-items:stretch; }
.ans-shows a { display:flex; align-items:center; gap:12px; padding:8px; border-radius:16px; background:#fff; color:var(--ink); text-decoration:none; box-shadow:0 1px 2px rgba(31,35,40,.06); transition:transform .15s; min-width:0; }
.ans-shows a:hover { transform:translateY(-2px); }
.ans-shows img { width:56px; height:56px; flex:none; border-radius:10px; }
.ans-shows span { min-width:0; font-size:13px; font-weight:800; color:var(--sycu-ink); line-height:1.3; }
.ans-shows b { display:block; color:var(--ink); font-size:14.5px; letter-spacing:-.01em; text-wrap:balance; }
.ans-shows .arr { display:inline-block; transition:transform .15s; } .ans-shows a:hover .arr { transform:translateX(3px); }
/* warm: training head gets two learning snapshots in its empty right side (the cards below stay as they were) */
.learn-head { display:flex; align-items:center; justify-content:space-between; gap:40px; margin-bottom:48px; }
.learn-head .head { margin-bottom:0; }
.learn-snaps { position:relative; flex:none; width:392px; height:236px; margin:0 8px 0 0; padding:0; list-style:none; }
.ls { position:absolute; margin:0; }
.ls img { position:relative; display:block; width:100%; object-fit:cover; border-radius:18px; border:5px solid #fff; background:var(--sycu-soft); box-shadow:0 16px 34px -18px rgba(31,35,40,.5); }
.ls-a { left:0; top:4px; width:290px; transform:rotate(-2deg); }
.ls-a img { aspect-ratio:3/2; }
.ls-a::before { content:""; position:absolute; inset:0; border-radius:18px; background:var(--sycu-fold); transform:translate(-10px, 12px) rotate(-2deg); }
.ls-b { right:0; bottom:0; width:158px; transform:rotate(4deg); z-index:1; }
.ls-b img { aspect-ratio:1; object-position:50% 30%; }
.ls-b::after { content:""; position:absolute; z-index:2; top:-9px; left:50%; width:52px; height:17px; margin-left:-26px; background:var(--sycu); opacity:.92;
  transform:rotate(-7deg); clip-path:polygon(4% 0, 100% 6%, 96% 100%, 0 94%); }
@media (max-width:1100px) {
  .learn-head { display:block; }
  .learn-head .head { margin-bottom:28px; }
  .learn-snaps { width:auto; max-width:34rem; height:auto; margin:0 6px; display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .ls { position:relative; inset:auto; width:auto; }
  .ls img, .ls-a img, .ls-b img { aspect-ratio:4/3; }
  .ls-a { transform:rotate(-1.6deg); } .ls-b { transform:rotate(1.8deg); }
  .ls-a::before { transform:translate(-7px, 8px) rotate(-1.5deg); }
}

/* =====================================================================
   BLOG: real posts with their real featured art
   ===================================================================== */
.posts { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.post { display:flex; flex-direction:column; min-width:0; background:#fff; border-radius:var(--r-lg); box-shadow:var(--shadow); overflow:hidden; color:var(--ink); text-decoration:none;
  transition:transform .2s var(--ease), box-shadow .2s; }
.post:hover { transform:translateY(-3px); box-shadow:var(--shadow-lg); }
.post-art { display:block; aspect-ratio:16/9; background:var(--bg); overflow:hidden; }
.post-art img { width:100%; height:100%; object-fit:cover; transition:transform .4s var(--ease); }
.post:hover .post-art img { transform:scale(1.03); }
.post-bd { flex:1; display:flex; flex-direction:column; gap:10px; padding:22px 24px 22px; border-top:5px solid var(--a); }
.post .chip { align-self:flex-start; display:inline-flex; background:var(--a-soft); color:var(--a-ink); font-size:12.5px; font-weight:700; padding:3px 10px; border-radius:var(--r-pill); }
.post h3 { margin:0; font-size:20px; line-height:1.24; letter-spacing:-.022em; font-weight:800; text-wrap:balance; min-height:2.48em; }
.post p { margin:0; font-size:15px; color:var(--ink-2); line-height:1.55; text-wrap:pretty; }
.post .meta { margin-top:auto; padding-top:6px; font-size:13.5px; color:var(--ink-3); font-weight:600; }
@media (max-width:1100px) {
  .learn { grid-template-columns:1fr; }
  .side { grid-template-columns:1fr 1fr; align-items:start; }
  .posts { grid-template-columns:1fr 1fr; }
  .post-lg { grid-column:1 / -1; flex-direction:row; }
  .post-lg .post-art { flex:1.1; aspect-ratio:auto; min-height:100%; }
  .post-lg .post-bd { flex:1; border-top:0; border-left:5px solid var(--a); }
  .post-lg h3 { font-size:24px; }
}
@media (max-width:760px) {
  .side { grid-template-columns:1fr; }
}
@media (max-width:640px) {
  .labs { padding:28px 20px 24px; border-radius:24px; }
  .labs-top { grid-template-columns:1fr; gap:18px; }
  .yulee { display:flex; align-items:center; gap:12px; width:auto; text-align:left; order:-1; }
  .yulee img { width:56px; height:56px; margin:0; box-shadow:0 0 0 3px var(--char-3), 0 0 0 5px var(--sycu); }
  .lab { grid-template-columns:56px minmax(0,1fr); gap:12px; }
  .lab .btn { grid-column:1 / -1; width:100%; }
  .lab .dt b { font-size:22px; }
  .pod { padding:24px 20px; }
  .learn-snaps { gap:14px; margin:0 4px; }
  .ans { padding:22px 20px; }
  .labs .inc { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .ans-shows { grid-template-columns:1fr; }
  .post h3 { min-height:0; }
  .posts { grid-template-columns:1fr; gap:14px; }
  .post-lg { flex-direction:column; }
  .post-lg .post-art { aspect-ratio:16/9; }
  .post-lg .post-bd { border-left:0; border-top:5px solid var(--a); }
  .post-lg h3 { font-size:21px; }
}

/* =====================================================================
   PROOF: an even 3 x 2 grid (captions pinned to the bottom) + the verified stat
   ===================================================================== */
#proof { background:#fff; }
#proof.warm { background:var(--warm); }       /* warm-up pass: cream tint only; review cards/text unchanged */
#proof.warm .q { background:#fff; box-shadow:inset 0 0 0 1px var(--warm-line); }
.proof-top { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; align-items:end; margin-bottom:44px; }
.proof-top .head { margin-bottom:0; grid-column:span 2; }
.score { display:grid; grid-template-columns:auto 1fr; gap:4px 16px; align-items:center; padding:24px 26px; border-radius:var(--r-lg); background:var(--char-3); color:#C4C9CE;
  text-decoration:none; transition:transform .2s var(--ease); }
.score:hover { transform:translateY(-2px); }
.score-n { grid-row:span 2; font-size:64px; font-weight:800; letter-spacing:-.06em; line-height:.9; color:#fff; }
.score-t { font-size:14.5px; font-weight:600; line-height:1.35; }
.score-t b { display:block; color:#fff; font-size:16px; font-weight:800; }
.score-bar { grid-column:1 / -1; height:8px; border-radius:99px; background:rgba(255,255,255,.12); overflow:hidden; margin-top:14px; }
.score-bar i { display:block; height:100%; border-radius:99px; background:linear-gradient(90deg, var(--sycu), var(--sycu-fold)); }
.score-go { grid-column:1 / -1; margin-top:12px; color:#fff; font-weight:800; font-size:14.5px; }
.score-go .arr { display:inline-block; transition:transform .15s; } .score:hover .score-go .arr { transform:translateX(3px); }
/* bento on a strict 3-column grid: featured quote spans two rows in column 1;
   four quotes fill columns 2-3; the longest quote closes as a full-width band. */
.quotes { display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:20px; }
.q { position:relative; display:flex; flex-direction:column; margin:0; padding:30px 28px 24px; border-radius:var(--r-lg); background:var(--bg); overflow:hidden; }
.q::before { content:""; position:absolute; left:0; right:0; top:0; height:6px; background:var(--a); }
.q blockquote { margin:0 0 22px; font-size:17.5px; line-height:1.55; font-weight:600; letter-spacing:-.008em; color:var(--ink); text-wrap:pretty; }
.q blockquote::before { content:"“"; display:block; height:.52em; margin-bottom:12px; font-size:64px; line-height:1; font-weight:800; color:var(--a-ink); }
.q figcaption { margin-top:auto; display:flex; gap:12px; align-items:center; font-size:14px; line-height:1.35; padding-top:18px; border-top:1px solid var(--line-2); }
.q .av { width:40px; height:40px; flex:none; border-radius:50%; background:var(--a); color:var(--ink); display:grid; place-items:center; font-weight:800; font-size:14.5px; }
.q[data-theme="teach"] .av { background:#C83535; color:#fff; }
.q figcaption b { display:block; font-size:15px; } .q figcaption span span { display:block; color:var(--ink-3); font-weight:600; }
.stars { display:flex; gap:3px; margin-bottom:14px; }
.stars i { width:15px; height:15px; background:var(--a-ink); clip-path:polygon(50% 0, 61.8% 35.3%, 100% 36.2%, 69.1% 58.8%, 80.9% 95.1%, 50% 73.5%, 19.1% 95.1%, 30.9% 58.8%, 0 36.2%, 38.2% 35.3%); }
.q blockquote::before { display:none; }
.quotes .q-lg { grid-row:span 2; background:var(--sycu-soft); justify-content:space-between; }
.quotes .q-lg::after { content:"“"; position:absolute; right:22px; bottom:-38px; font-size:260px; line-height:1; font-weight:800; color:var(--sycu); opacity:.22; pointer-events:none; }
.quotes .q-lg::before { height:8px; }
.quotes .q-lg .av { background:var(--sycu); }
.quotes .q-lg .stars i { width:20px; height:20px; }
.quotes .q-lg blockquote { font-size:clamp(30px, 3.1vw, 44px); line-height:1.16; letter-spacing:-.034em; font-weight:800; margin:0 0 30px; }
.quotes .q-lg figcaption { position:relative; z-index:1; }
.quotes .q-wide { grid-column:1 / -1; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); column-gap:20px; align-items:center; padding:30px 0; }
.quotes .q-wide .stars { grid-column:1 / span 2; margin-left:28px; }
.quotes .q-wide blockquote { grid-column:1 / span 2; margin:0 0 0 28px; padding-right:28px; font-size:19px; line-height:1.5; font-weight:700; letter-spacing:-.012em; }
.quotes .q-wide figcaption { grid-column:3; grid-row:1 / span 2; margin:0; border-top:0; padding:0 28px; border-left:1px solid var(--line-2); align-self:stretch; }
.q-more { display:inline-block; margin-top:8px; font-weight:800; font-size:14px; color:var(--disc-ink); text-decoration:none; }
.q-more:hover { text-decoration:underline; }
@media (max-width:1100px) {
  .proof-top { grid-template-columns:1fr; gap:28px; } .proof-top .head { grid-column:auto; }
  .score { max-width:30rem; }
  .quotes { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .quotes .q-lg { grid-row:auto; grid-column:1 / -1; }
  .quotes .q-wide { grid-template-columns:repeat(2, minmax(0,1fr)); }
  .quotes .q-wide .stars, .quotes .q-wide blockquote { grid-column:1; }
  .quotes .q-wide figcaption { grid-column:2; }
}
@media (max-width:640px) {
  .quotes { grid-template-columns:none; grid-auto-flow:column; grid-auto-columns:86%; gap:12px; overflow-x:auto; scroll-snap-type:x mandatory;
    margin:0 -18px; padding:4px 18px 10px; scroll-padding:0 18px; scrollbar-width:none; }
  .quotes::-webkit-scrollbar { display:none; }
  .quotes .q, .quotes .q-lg, .quotes .q-wide { grid-column:auto; grid-row:auto; scroll-snap-align:start; }
  .quotes .q-lg::after { display:none; }
  .quotes .q-lg { justify-content:flex-start; }
  .quotes .q-lg figcaption { margin-top:auto; }
  .quotes .q-lg blockquote { font-size:26px; }
  .quotes .q-wide { display:flex; padding:26px 22px 20px; }
  .quotes .q-wide blockquote { padding-right:0; margin-left:0; } .quotes .q-wide .stars { margin-left:0; }
  .quotes .q-wide figcaption { padding:18px 0 0; }
  .quotes .q-wide .stars { align-self:flex-start; }
  .quotes .q-wide figcaption { margin:0; }
  .quotes .q-wide blockquote { font-size:17.5px; margin-bottom:22px; }
  .quotes .q-wide figcaption { border-left:0; border-top:1px solid var(--line-2); padding:18px 0 0; }
  .q { padding:26px 22px 20px; }
  .score-n { font-size:54px; }
}

/* =====================================================================
   COMMUNITY: intro + newsletter on the left, three community cards on the right
   ===================================================================== */
.comm-wrap { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); gap:56px; align-items:start; }
.comm-intro .lede { margin-bottom:28px; }
/* warm: one fellowship photo under the intro (pale-fold offset); the newsletter joins the group cards */
.comm-ph { position:relative; margin:0 12px 12px 0; }
.comm-ph::before { content:""; position:absolute; inset:0; border-radius:var(--r-lg); background:var(--sycu-fold); transform:translate(12px, 12px) rotate(1.2deg); }
.comm-ph img { position:relative; display:block; width:100%; aspect-ratio:3/2; object-fit:cover; border-radius:var(--r-lg); box-shadow:0 18px 36px -20px rgba(31,35,40,.45); }
.comm-side { display:grid; gap:18px; min-width:0; }
.comm { display:grid; grid-auto-rows:1fr; gap:18px; }
.cc { display:grid; grid-template-columns:52px minmax(0,1fr) auto; gap:18px; align-items:center; padding:20px 22px; border-radius:var(--r-lg); background:#fff; box-shadow:var(--shadow);
  color:var(--ink); text-decoration:none; transition:transform .2s var(--ease), box-shadow .2s; }
.cc:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg); }
.cc .ico { width:52px; height:52px; border-radius:15px; display:grid; place-items:center; background:var(--a); color:var(--ink); }
.cc-b b { display:block; font-size:18px; font-weight:800; letter-spacing:-.02em; line-height:1.25; }
.cc-b span { display:block; margin-top:3px; font-size:15px; line-height:1.45; color:var(--ink-2); text-wrap:pretty; }
.cc-go { font-size:14px; font-weight:800; color:var(--sycu-ink); white-space:nowrap; }
.cc-go .arr { display:inline-block; transition:transform .15s; } .cc:hover .cc-go .arr { transform:translateX(3px); }
.news { background:var(--char-3); border-radius:var(--r-lg); padding:24px; color:#C4C9CE; }
.news-t { margin:0 0 14px; font-size:15px; line-height:1.5; }
.news-t b { display:block; color:#fff; font-size:19px; letter-spacing:-.02em; margin-bottom:2px; }
.news-f { display:flex; gap:10px; }
.news-f input { flex:1; min-width:0; height:48px; border:0; border-radius:var(--r-pill); padding:0 18px; font:600 15px var(--font); color:var(--ink); }
.news-f input:focus-visible { outline:3px solid var(--sycu); outline-offset:2px; }
.news-f .btn-primary { height:48px; padding-top:0; padding-bottom:0; color:var(--acc-on); box-shadow:inset 0 0 0 1.5px var(--acc-edge); }
.news-ok { margin:12px 0 0; font-size:14px; font-weight:700; color:var(--sycu-fold); }

/* =====================================================================
   OUR STORY: photo + a three-step timeline (no founding year; see open questions)
   ===================================================================== */
.story { display:grid; grid-template-columns:minmax(0,1fr); gap:48px; }
.story-media { order:2; max-width:none !important; }
.story-txt { order:1; }
@media (min-width:1025px){
  .story-txt { display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr); column-gap:64px; align-content:start; }
  .story-txt > * { grid-column:1; }
  .story-txt > .values { grid-column:2; grid-row:1 / span 5; grid-template-columns:1fr; align-self:center; margin:0; }
  .story .timeline { margin-top:0; padding-top:36px; border-top:1px solid var(--line); }
  .story .timeline::before { top:51px; }
}
.story-media { position:relative; }
.photo { margin:0; border-radius:var(--r-xl); overflow:hidden; box-shadow:var(--shadow-lg); background:var(--bg); }
.photo img { width:100%; aspect-ratio:5/4; object-fit:cover; object-position:center 30%; }
/* three steps on a connecting rail */
.timeline { position:relative; list-style:none; margin:28px 0 0; padding:0; display:grid; grid-template-columns:repeat(3, minmax(0,1fr)); gap:18px; }
.timeline::before { content:""; position:absolute; left:6px; right:calc((100% - 36px) / 3 - 6px); top:15px; height:2px; background:linear-gradient(90deg, var(--sycu), var(--sycu-fold)); }
.timeline li { position:relative; padding-top:40px; font-size:14px; line-height:1.45; color:var(--ink-2); font-weight:600; text-wrap:pretty; }
.timeline li::before { content:""; position:absolute; left:0; top:9px; width:14px; height:14px; border-radius:50%; background:#fff; box-shadow:inset 0 0 0 3px var(--sycu); }
.timeline b { display:flex; align-items:center; height:30px; margin:-8px 0 6px; font-size:24px; font-weight:800; letter-spacing:-.04em; color:var(--sycu-ink); }
.tl-rib { gap:8px; }
.tl-rib img { width:34px; height:auto; }
.story-txt .h2 { margin-bottom:20px; }
.origin { margin:0; max-width:36rem; font-size:clamp(20px,2vw,23px); line-height:1.45; letter-spacing:-.015em; font-weight:600; text-wrap:pretty; }
.story-txt > p:not(.origin):not(.eyebrow):not(.sig) { margin:18px 0 0; color:var(--ink-2); font-size:17px; max-width:38rem; text-wrap:pretty; }
.values { list-style:none; padding:0; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; margin:28px 0 0; }
.values li { padding:16px 18px 16px 44px; position:relative; border-radius:var(--r); background:var(--bg); font-size:14.5px; color:var(--ink-2); line-height:1.45; }
.values li::before { content:""; position:absolute; left:18px; top:20px; width:14px; height:12px; border-radius:2px; transform:skewY(var(--skew));
  background:linear-gradient(var(--sycu) 0 40%, var(--sycu-fold) 40% 60%, var(--sycu) 60% 100%); }
.values b { display:block; color:var(--ink); font-size:15.5px; margin-bottom:2px; }
.sig { margin:28px 0 0; padding-top:22px; border-top:1px solid var(--line); }
.sig-n { display:block; font-size:22px; font-weight:800; letter-spacing:-.03em; }
.sig-r { display:block; font-weight:600; color:var(--ink-3); font-size:14.5px; }
/* warm: story + help sit on a warm cream (no photos of people here */
.sec.warm, .help-sec.warm { background:var(--warm); }
.warm .values li { background:#fff; box-shadow:0 1px 2px rgba(31,35,40,.05); }
.warm .sig, .warm .story .timeline { border-top-color:var(--warm-line); }
.help-sec.warm .help-card { background:#fff; box-shadow:inset 0 0 0 1px var(--warm-line), 0 18px 40px -28px rgba(31,35,40,.28); }
/* hand-drawn underline in the SYCU cyan (drawn in once; static under reduced motion) */
.scr { position:relative; display:inline-block; }
.scrawl { position:absolute; left:-.04em; right:-.06em; bottom:-.2em; width:calc(100% + .1em); height:.3em; overflow:visible; pointer-events:none; }
.scrawl path { fill:none; stroke:var(--sycu); stroke-width:3; stroke-linecap:round; }
.rv .scrawl path { stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 1s var(--ease) .35s; }
.rv.in .scrawl path { stroke-dashoffset:0; }
/* the timeline rail becomes a hand-drawn squiggle (desktop/tablet) */
@media (min-width:641px) {
  .warm .timeline::before { height:12px; top:10px; background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 120 12'%3E%3Cpath d='M0 6 C 9 2.4, 19 2, 30 5.6 S 47 10.2, 60 6.6 S 81 1.6, 93 5 S 111 9.6, 120 6' fill='none' stroke='%233ABDD5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-x left center / 120px 12px; }
  .warm .story .timeline::before { top:46px; }
}
@media (max-width:640px) {
  .warm .timeline::before { content:none; }
  /* one squiggle segment per step, from this dot to the next, so it always ends at the last dot */
  .warm .timeline li::before { z-index:1; }
  .warm .timeline li:not(:last-child)::after { content:""; position:absolute; z-index:0; left:-27px; top:11px; bottom:-27px; width:12px;
    background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 120'%3E%3Cpath d='M6 0 C 2.4 9, 2 19, 5.6 30 S 10.2 47, 6.6 60 S 1.6 81, 5 93 S 9.6 111, 6 120' fill='none' stroke='%233ABDD5' stroke-width='2.4' stroke-linecap='round'/%3E%3C/svg%3E") repeat-y center top / 12px 120px; }
  .story { gap:36px; }
  .story .timeline { margin-top:8px; }
}
@media (max-width:1100px) {
  .comm-wrap { grid-template-columns:1fr; gap:36px; }
  .comm-ph { max-width:30rem; }
  .story { grid-template-columns:1fr; gap:48px; }
  .story-media { max-width:44rem; }
  .photo img { aspect-ratio:800/420; }
}
@media (max-width:640px) {
  .cc { grid-template-columns:44px minmax(0,1fr); gap:6px 14px; padding:18px; }
  .cc .ico { width:44px; height:44px; border-radius:13px; }
  .cc-b { display:contents; }
  .cc-b b { grid-column:2; align-self:center; font-size:17px; }
  .cc-b span, .cc-go { grid-column:1 / -1; }
  .cc-go { margin-top:4px; }
  .news { padding:20px; }
  .news-f { flex-direction:column; }
  .news-f input { flex:none; }
  .news-f .btn { width:100%; }
      .timeline { grid-template-columns:1fr; gap:16px; padding-left:28px; }
  .timeline::before { left:6px; right:auto; top:8px; bottom:8px; width:2px; height:auto; background:linear-gradient(var(--sycu), var(--sycu-fold)); }
  .timeline li { padding-top:0; }
  .timeline li::before { left:-28px; top:4px; }
  .timeline b { height:auto; margin:0 0 2px; font-size:20px; }
  .values { grid-template-columns:1fr; }
}

/* =====================================================================
   HELP: one card, four direct paths
   ===================================================================== */
.help-sec { padding:24px 0 104px; background:#fff; }
.help-card { display:grid; grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr); gap:40px; align-items:center; padding:36px; border-radius:var(--r-xl);
  background:var(--sycu-mist); box-shadow:inset 0 0 0 1px var(--sycu-soft); }
.help-h { margin:12px 0 8px; font-size:clamp(28px, 3.2vw, 40px); line-height:1.1; letter-spacing:-.035em; font-weight:800; }
.help-intro > p:last-child { margin:0; color:var(--ink-2); font-size:16px; line-height:1.55; }
.help { display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:12px; }
.help a { position:relative; display:flex; gap:14px; align-items:center; min-width:0; padding:16px 44px 16px 18px; border-radius:var(--r); background:#fff; box-shadow:var(--shadow), inset 0 0 0 1px var(--line); color:var(--ink); text-decoration:none;
  transition:transform .15s, box-shadow .15s; }
.help a:hover { transform:translateY(-2px); box-shadow:var(--shadow-lg), inset 0 0 0 1px var(--line); }
.help a::after { content:"→"; position:absolute; right:18px; top:50%; transform:translateY(-50%); font-weight:800; color:var(--sycu-ink); transition:transform .15s; }
.help a:hover::after { transform:translate(3px,-50%); }
.help .ico { width:44px; height:44px; flex:none; border-radius:13px; display:grid; place-items:center; background:var(--sycu); color:var(--ink); }
.help a > span:last-child { min-width:0; }
.help b { display:block; font-size:16px; letter-spacing:-.01em; }
.help a > span:last-child > span { display:block; font-size:13.5px; color:var(--ink-3); font-weight:600; overflow-wrap:anywhere; }

/* =====================================================================
   FINAL CTA + FOOTER: dark, opened by the SYCU fold (not the Grow stripe)
   ===================================================================== */
.final { position:relative; background:var(--char-3); color:#C4C9CE; }
/* the fold opens the footer: cyan band + pale fold, cut on the ribbon angle */
.final::before { content:""; position:absolute; left:0; right:0; top:0; height:8px; background:var(--sycu); }
.final .cta { text-align:center; max-width:56rem; margin:0 auto; padding:96px 0 76px; border-bottom:1px solid rgba(255,255,255,.12); }
.final h2 { display:grid; justify-items:center; gap:.2em; margin:0 0 30px; color:#fff; font-size:clamp(38px, 5.4vw, 68px); line-height:1.02; letter-spacing:-.045em; word-spacing:.04em; font-weight:800; }
.final-bands { display:block; }
.final .band { display:inline-block; color:var(--ink); padding:.04em .24em .24em; line-height:.95; }
.final .band::before { transform:skewY(var(--skew)); }

.final .cta > p { margin:0 auto; font-size:19px; line-height:1.55; color:#C4C9CE; max-width:36rem; text-wrap:pretty; }
/* warm: four small taped snapshots above the closing headline (no captions) */
.fin-snaps { list-style:none; margin:0 auto 46px; padding:0; display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:18px; max-width:50rem; }
.fin-snaps li { position:relative; padding:5px; background:#fff; border-radius:14px; box-shadow:0 18px 30px -16px rgba(0,0,0,.6); transform:rotate(var(--r, -2deg)); }
.fin-snaps li:nth-child(1) { --r:-3deg; } .fin-snaps li:nth-child(2) { --r:2deg; margin-top:10px; }
.fin-snaps li:nth-child(3) { --r:-1.5deg; } .fin-snaps li:nth-child(4) { --r:3deg; margin-top:8px; }
.fin-snaps li::before { content:""; position:absolute; z-index:1; top:-8px; left:50%; width:46px; height:15px; margin-left:-23px; background:var(--sycu); opacity:.92;
  transform:rotate(calc(var(--r) * -2)); clip-path:polygon(4% 0, 100% 6%, 96% 100%, 0 94%); }
.fin-snaps img { display:block; width:100%; aspect-ratio:4/3; object-fit:cover; border-radius:10px; background:#3A4047; }
@media (max-width:640px) {
  .fin-snaps { grid-template-columns:repeat(2, minmax(0,1fr)); gap:24px 18px; margin-bottom:36px; padding:0 10px; }
  .fin-snaps li:nth-child(n) { margin-top:0; }
}
.final .btn-primary { color:var(--acc-on); } /* green fill: always dark ink text (white on #BFE478 is 1.4:1); was white on orange */
.foot { display:grid; grid-template-columns:minmax(0,.9fr) minmax(0,2.1fr); gap:48px; padding:56px 0 8px; font-size:14.5px; }
.final .cta { border-bottom:0; }
.final .cta + .foot { border-top:1px solid rgba(255,255,255,.12); }
.brand img { height:38px; width:auto; }
.brand p { margin:16px 0 0; max-width:21rem; color:#AEB4BA; font-size:14.5px; line-height:1.55; }
.cols { display:grid; grid-template-columns:repeat(4, minmax(0,1fr)); gap:28px; }
.cols div { display:flex; flex-direction:column; gap:9px; min-width:0; }
.col-h { margin:0 0 4px; color:#fff; font-size:12px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.cols a { color:#D4D8DC; text-decoration:none; } .cols a:hover { color:#fff; text-decoration:underline; }
.fine { display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; margin-top:40px; padding:22px 0 30px; border-top:1px solid rgba(255,255,255,.1); font-size:14px; color:#C4C9CE; }
.fine a { color:#D4D8DC; }
@media (max-width:1100px) {
  .help-card { grid-template-columns:1fr; gap:24px; }
  .foot { grid-template-columns:1fr; gap:36px; }
}
@media (max-width:760px) {
  .cols { grid-template-columns:repeat(2, minmax(0,1fr)); gap:28px 20px; }
  .cols div:nth-child(4) { order:2; } .cols div:nth-child(2) { order:3; } .cols div:nth-child(3) { order:4; }
  .cols div { gap:0; }
  .cols a { padding:9px 0; }
  .fine { flex-direction:column; gap:10px; }
  .fine a { display:inline-block; padding:6px 0; }
}
@media (max-width:640px) {
  .help-sec { padding-bottom:64px; }
  .help-card { padding:24px 18px; margin:0 -6px; border-radius:24px; }
  .help { grid-template-columns:1fr; gap:10px; }
  .final .cta { padding:52px 0 56px; }
  .final .cta-row .btn { width:100%; }
  .final .cta > p { font-size:17px; }
}

/* reveal */
.rv { opacity:0; transform:translateY(16px); transition:opacity .6s ease, transform .6s ease; }
.rv.in { opacity:1; transform:none; }

/* ---------- shared responsive rhythm ---------- */
@media (max-width:900px) { .sec { padding:76px 0; } }
@media (max-width:640px) {
  .sec { padding:64px 0; }
  .h2 { letter-spacing:-.03em; }
}

/* ---------- reduced motion: everything lands in its final state ---------- */
@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
  *,*::before,*::after { animation-duration:.001ms !important; animation-delay:0s !important; animation-iteration-count:1 !important; transition-duration:.001ms !important; }
  .rv { opacity:1; transform:none; }
  .scrawl path { stroke-dashoffset:0 !important; }
}


/* =====================================================================
   Header v3 (Kenny 2026-10-02, #sycu-site): mirrors the growdev.org main header
   (single 72px bar, logo left, nav right, Log in after a hairline, moon/sun toggle, dark pill CTA),
   adds a compact "Grow Tools" dropdown, and a light/dark mode (saved choice wins, else system).
   ===================================================================== */
.nav { margin-left:auto; }
.logo { margin-right:0; }
.logo .lg-d { display:none; }
.nav .login { margin-left:12px; position:relative; }
.nav .login::before { content:""; position:absolute; left:-8px; top:9px; bottom:9px; width:1px; background:var(--line-2); }
.hdr-cta.btn { padding:11px 20px; font-size:14.5px; margin-left:0; }
.dd-sm { position:relative; }  /* only Grow Tools anchors to its button; Products stays a full-width mega */
/* Grow Tools: compact panel anchored under its button */
.mega.mini { position:absolute; left:50%; right:auto; top:calc(100% + 12px); width:340px; transform:translateX(-50%); padding:14px 10px 10px;
  border:1px solid var(--line); border-radius:var(--r); box-shadow:0 30px 60px -24px rgba(31,35,40,.35); overflow:visible; max-height:none; }
.mega.mini::before { content:""; position:absolute; left:0; right:0; top:-14px; height:14px; } /* hover bridge */
.mega.mini .mega-col { gap:2px; }
.mini-foot { display:flex; align-items:center; gap:6px; margin:8px 0 0; padding:12px 10px 4px; border-top:1px solid var(--line); color:var(--ink-2); font-size:14px; font-weight:700; text-decoration:none; }
.mini-foot:hover { color:var(--ink); } .mini-foot .arr { transition:transform .15s; } .mini-foot:hover .arr { transform:translateX(3px); }
/* the mode toggle (same button as growdev.org: 40px, moon in light, sun in dark) */
.mode-btn { position:relative; flex:none; display:inline-grid; place-items:center; width:40px; height:40px; padding:0; border:0; border-radius:12px;
  background:none; color:var(--ink-2); cursor:pointer; overflow:hidden; transition:background .15s, color .15s; }
.mode-btn:hover { background:var(--bg); color:var(--ink); }
.mode-btn .mi, .mode-row .mi { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.9; stroke-linecap:round; stroke-linejoin:round; background:none; border-radius:0; color:inherit; }
.mode-btn .mi { position:absolute; inset:0; margin:auto; transition:transform .38s var(--ease), opacity .2s ease; }
html:not([data-mode="dark"]) .mode-btn .mi-sun { opacity:0; transform:rotate(-80deg) scale(.4); }
html[data-mode="dark"] .mode-btn .mi-moon { opacity:0; transform:rotate(80deg) scale(.4); }
.mode-row { display:flex; align-items:center; gap:12px; width:100%; margin:0 0 16px; padding:13px 10px; border:0; border-radius:14px;
  background:var(--bg); color:var(--ink); font-size:16px; font-weight:700; text-align:left; cursor:pointer; }
.mode-row .mr-l { flex:1; }
.mode-row .mr-sw { position:relative; flex:none; width:46px; height:28px; border-radius:999px; background:var(--line-2); transition:background .2s; }
.mode-row .mr-sw::after { content:""; position:absolute; left:3px; top:3px; width:22px; height:22px; border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); transition:transform .25s var(--ease); }
.mode-row[aria-pressed="true"] .mr-sw { background:var(--acc); }
.mode-row[aria-pressed="true"] .mr-sw::after { transform:translateX(18px); }
@media (prefers-reduced-motion: reduce) { .mode-btn .mi { transition:none; } }
html.mode-xfade, html.mode-xfade *, html.mode-xfade *::before, html.mode-xfade *::after {
  transition:background-color .22s ease, border-color .22s ease, color .22s ease, fill .22s ease, stroke .22s ease, box-shadow .22s ease !important; }
@media (max-width:1320px) { .nav > a, .nav .dd-btn { padding:9px 10px; } .hdr-in { gap:12px; } }
/* mid widths: Log in drops out of the bar (it stays in the menu sheet) so the full row still fits */
@media (max-width:1240px) { .nav .login { display:none; } .nav > a, .nav .dd-btn { padding:8px 8px; font-size:14px; } .hdr-in { gap:10px; } .hdr-cta.btn { padding:10px 16px; font-size:14px; } }
@media (max-width:1120px) { .mode-btn { display:none; } .hdr-cta.btn { margin-left:auto; } }
@media (max-width:640px) { .hdr-cta.btn { padding:10px 15px; font-size:14px; } }

/* ---------- dark mode ---------- */
html[data-mode="dark"] {
  color-scheme:dark;
  --ink:#F4F5F7; --ink-2:#D4D8DC; --ink-3:#AEB5BC;
  --bg:#252A2E; --surface:#2F3439; --line:#3A4046; --line-2:#4A5158;
  --warm:#23272B; --warm-line:#3A4046;
  --sycu-ink:#7FD6E6; --sycu-soft:#20363B; --sycu-mist:#1F2A2E; --sycu-fold:#2C5560;
  --disc-ink:#F6B07A; --teach-ink:#F39A9A; --env-ink:#E4D353; --evt-ink:#BED65A; --vol-ink:#82D1DD; --fam-ink:#F6A5BE; --lead-ink:#D4D8DC;
  --disc-soft:#3A2C22; --teach-soft:#3A2626; --env-soft:#36341F; --evt-soft:#2E3522; --vol-soft:#20363B; --fam-soft:#3A2630; --lead-soft:#383D42;
  --lead:#5A626A; --char-3:#14171A; --char-2:#2F3439; --hl:#4A5A22;
  --acc-ink:#BFE478; --acc-soft:#2E3522;
  --shadow:0 0 0 1px rgba(255,255,255,.07), 0 8px 24px rgba(0,0,0,.35);
  --shadow-lg:0 0 0 1px rgba(255,255,255,.08), 0 18px 48px rgba(0,0,0,.5);
  --dk-surface:#2A2F34;
}
html[data-mode="dark"] body { background:#1C1F22; color:var(--ink); }
html[data-mode="dark"] .logo .lg-l { display:none; } html[data-mode="dark"] .logo .lg-d { display:block; }
html[data-mode="dark"] .hdr { background:rgba(28,31,34,.92); }
html[data-mode="dark"] :is(.mega, .sheet) { background:#23272B; box-shadow:0 40px 80px -20px rgba(0,0,0,.7); }
html[data-mode="dark"] .btn-dark { background:#F4F5F7; color:#1F2328; } html[data-mode="dark"] .btn-dark:hover { background:#fff; }
html[data-mode="dark"] .btn-ghost { background:transparent; color:var(--ink); }
html[data-mode="dark"] .hero { background:radial-gradient(56rem 34rem at 88% 8%, #1F2A2E, transparent 70%), linear-gradient(#1C1F22 calc(100% - 140px), var(--bg)); }
/* white cards become raised charcoal surfaces */
html[data-mode="dark"] :is(.path, .tool, .freebie, .pod, .ans-shows a, .post, .cc, .help a, #proof.warm .q, .warm .values li, .help-sec.warm .help-card, .lab .dt) {
  background:var(--dk-surface); color:var(--ink); }
html[data-mode="dark"] :is(#proof, .help-sec) { background:#1C1F22; }
html[data-mode="dark"] :is(#proof.warm, .sec.warm, .help-sec.warm) { background:var(--warm); }
html[data-mode="dark"] .free { background:#1C1F22; color:var(--ink); }
html[data-mode="dark"] .path-ph + .ico { background:var(--dk-surface); }
html[data-mode="dark"] .timeline li::before { background:#1C1F22; }
html[data-mode="dark"] .age-switch button:hover { background:rgba(255,255,255,.08); }
html[data-mode="dark"] .age-switch button[aria-selected="true"] { background:#F4F5F7; color:#1F2328; }
html[data-mode="dark"] :is(.ls img, .gp-pin img) { border-color:#3A4046; }
/* dark panels stay dark but get an edge so they don't melt into the page */
html[data-mode="dark"] :is(.gp, .labs, .news, .t-facts) { box-shadow:0 0 0 1px rgba(255,255,255,.08), 0 30px 60px -30px rgba(0,0,0,.8); }
html[data-mode="dark"] .final { background:#14171A; border-top:1px solid var(--line); }
/* strategy-colour fills keep dark ink so they stay readable on their bright fills */
html[data-mode="dark"] :is(.path-top, .area, .tool-ico, .q .av, .cc .ico, .path-go:hover, .btn-primary, .draft, .tool-xl .tag, .lab .nx) { --ink:#1F2328; --ink-2:#454C55; --ink-3:#5F6873; color:#1F2328; }
html[data-mode="dark"] .path[data-theme="lead"] .path-top { color:#fff; --ink:#fff; --ink-2:#E4E7EB; --ink-3:#C9CFD5; }

/* ---------- resource popup: mirrors growdev.org's series dialog (2026-10-05) ---------- */
.yw-btn { all:unset; display:block; width:100%; cursor:pointer; border-radius:12px; }
.yw-btn:focus-visible { outline:3px solid var(--sycu); outline-offset:3px; }
.yearwall .yw-btn:hover img { transform:translateY(-3px); }
.sd { max-width:none; width:min(860px, calc(100vw - 24px)); max-height:calc(100dvh - 32px); padding:0; border:0; border-radius:26px; background:#fff; color:var(--ink);
  overflow:hidden; box-shadow:0 40px 100px -20px rgba(0,0,0,.55); flex-direction:column; }
.sd::backdrop { background:rgba(20,23,27,.7); backdrop-filter:blur(4px); -webkit-backdrop-filter:blur(4px); }
.sd[open] { animation:sdIn .28s cubic-bezier(.2,.8,.25,1); display:flex; }
@keyframes sdIn { from { opacity:0; transform:translateY(18px) scale(.98); } to { opacity:1; transform:none; } }
.sd-body { overflow-y:auto; max-height:calc(100vh - 32px - 56px); max-height:calc(100dvh - 32px - 56px); overscroll-behavior:contain; }
.sd-top { position:relative; z-index:2; flex:none; display:flex; align-items:center; justify-content:space-between; gap:12px; background:var(--char-3); color:#D4D8DC;
  padding:8px 8px 12px 22px; font-size:13px; font-weight:800; letter-spacing:.08em; text-transform:uppercase; }
.sd-top::after { content:""; position:absolute; left:0; right:0; bottom:0; height:4px; background:var(--seg7); }
.sd-close { width:40px; height:40px; border-radius:50%; border:0; cursor:pointer; background:rgba(255,255,255,.12); display:grid; place-items:center; flex:none; }
.sd-close svg { width:18px; height:18px; stroke:#fff; stroke-width:2.4; stroke-linecap:round; fill:none; }
.sd-close:hover { background:rgba(255,255,255,.24); }
.sd-close:focus-visible { outline:3px solid var(--sycu); outline-offset:2px; }
.sd-media { aspect-ratio:16/9; background:#000; }
.sd-media.still[data-theme] { background:var(--a, var(--char-2)); }
.sd-media img { width:100%; height:100%; border:0; display:block; object-fit:cover; }
.sd-media.sd-vid { position:relative; overflow:hidden; }
.sd-media video { display:block; width:100%; height:100%; object-fit:contain; background:#000; }
.sd-media .sd-vlbl { position:absolute; left:12px; top:12px; z-index:2; padding:4px 10px; border-radius:999px; background:var(--acc); color:var(--ink);
  font-size:12px; font-weight:800; letter-spacing:.04em; transition:opacity .2s; pointer-events:none; }
.sd-media.playing .sd-vlbl { opacity:0; }
.sd-vplay { position:absolute; inset:0; z-index:3; border:0; margin:0; padding:0; cursor:pointer; display:grid; place-items:center; background:linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.35)); }
.sd-vplay .pt { display:inline-flex; align-items:center; gap:12px; padding:10px 22px 10px 10px; border-radius:999px; background:rgba(255,255,255,.96); color:var(--ink);
  font:800 16px/1.2 var(--font); text-align:left; box-shadow:0 10px 30px -10px rgba(0,0,0,.5); transition:transform .2s var(--ease), box-shadow .2s; }
.sd-vplay .pt::before { content:""; flex:none; width:46px; height:46px; border-radius:50%;
  background:var(--acc) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M9 6.5v11l9-5.5z' fill='%231F2328'/%3E%3C/svg%3E") center / 24px no-repeat; }
.sd-vplay .pt .br { display:none; }
.sd-vplay:hover .pt { transform:scale(1.04); box-shadow:0 16px 36px -10px rgba(0,0,0,.6); }
.sd-vplay:focus-visible .pt { outline:3px solid var(--acc-ring); outline-offset:3px; }
.sd-vid.started .sd-vplay { display:none; }
.sd-text { padding:26px 34px 40px; }
.sd-kicker { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-size:13.5px; font-weight:700; color:var(--ink-3); }
.sd-kicker .mon { background:var(--char-3); color:#fff; font-size:11.5px; font-weight:800; letter-spacing:.06em; padding:3px 8px; border-radius:6px; text-transform:uppercase; }
.sd h2 { font-size:clamp(30px, 4vw, 42px); line-height:1.05; letter-spacing:-.035em; margin:10px 0 16px; font-weight:800; color:var(--ink); }
.sd-facts { display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; }
.sd-facts div { background:var(--sycu-soft); border-radius:12px; padding:9px 14px; }
.sd-facts dt { font-size:11.5px; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:var(--sycu-ink); }
.sd-facts dd { margin:2px 0 0; font-weight:700; font-size:15px; }
.sd-intro { color:var(--ink-2); font-size:16.5px; line-height:1.55; margin:0 0 22px; }
.sd h3 { font-size:13px; font-weight:800; letter-spacing:.09em; text-transform:uppercase; color:var(--teach-ink); margin:24px 0 12px; }
.sd-ideas { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.sd-ideas li { display:grid; grid-template-columns:70px 1fr; column-gap:12px; align-items:baseline; background:#fff; border-radius:12px; padding:11px 14px 11px 20px;
  box-shadow:inset 5px 0 0 var(--teach), 0 0 0 1px var(--line); }
.sd-ideas .wk { grid-row:span 2; justify-self:start; align-self:center; background:var(--teach-soft); color:var(--teach-ink); padding:4px 9px; border-radius:999px;
  font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase; }
.sd-ideas b { font-size:16px; }
.sd-ideas em { font-style:normal; color:var(--ink-2); font-size:14px; }
.sd-inc { list-style:none; padding:0; margin:0; display:grid; grid-template-columns:1fr 1fr; gap:8px 22px; }
.sd-inc li { position:relative; padding-left:26px; font-size:15px; font-weight:600; }
.sd-inc li::before { content:""; position:absolute; left:0; top:3px; width:17px; height:17px; border-radius:50%; background:var(--evt-soft); }
.sd-inc li::after { content:""; position:absolute; left:6px; top:7px; width:5px; height:9px; border:solid var(--evt-ink); border-width:0 2px 2px 0; transform:translateY(-1.2px) rotate(45deg); }
.sd-cta { display:flex; gap:12px; flex-wrap:wrap; margin-top:28px; padding-top:22px; border-top:1px solid var(--line); }
html.sd-lock { overflow:hidden; }
@media (max-width:640px) {
  .sd { width:calc(100vw - 16px); border-radius:20px; }
  .sd-text { padding:20px 20px 24px; }
  .sd-inc { grid-template-columns:1fr; }
  .sd-ideas li { grid-template-columns:1fr; }
  .sd-ideas .wk { grid-row:auto; margin-bottom:4px; }
  .sd-cta .btn { width:100%; }
  .sd-vplay .pt { font-size:14px; padding:8px 16px 8px 8px; gap:10px; }
  .sd-vplay .pt::before { width:38px; height:38px; background-size:20px; }
  .sd-vplay .pt .br { display:inline; }
}
@media (prefers-reduced-motion:reduce) { .sd[open] { animation:none; } }
html[data-mode="dark"] .sd { background:#1C1F22; color:#E8EAED; }
html[data-mode="dark"] .sd h2, html[data-mode="dark"] .sd-facts dd, html[data-mode="dark"] .sd-ideas b, html[data-mode="dark"] .sd-inc li { color:#F1F3F5; }
html[data-mode="dark"] .sd-kicker, html[data-mode="dark"] .sd-intro, html[data-mode="dark"] .sd-ideas em { color:#B9C0C8; }
html[data-mode="dark"] .sd-kicker .mon { background:#3A4047; }
html[data-mode="dark"] .sd-facts div { background:#173A41; }
html[data-mode="dark"] .sd-facts dt { color:#8FDCEA; }
html[data-mode="dark"] .sd h3 { color:#FF8A8A; }
html[data-mode="dark"] .sd-ideas li { background:#24282C; box-shadow:inset 5px 0 0 var(--teach), 0 0 0 1px #343A40; }
html[data-mode="dark"] .sd-ideas .wk { background:#4A2224; color:#FFB3B3; }
html[data-mode="dark"] .sd-inc li::before { background:#33401A; }
html[data-mode="dark"] .sd-inc li::after { border-color:#CDE58A; }
html[data-mode="dark"] .sd-cta { border-top-color:#343A40; }