/* Self-hosted Brightside fonts (Google Fonts, SIL Open Font License). latin + latin-ext only; the browser fetches latin-ext only when a page uses it (for example the rupee sign). */
/* Caveat latin-ext */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/caveat-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Caveat latin */
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/caveat-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Figtree latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Figtree latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url(fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Figtree latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Figtree latin-ext */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/figtree-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Figtree latin */
@font-face {
  font-family: 'Figtree';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/figtree-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* Inter Tight latin-ext */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/inter-tight-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* Inter Tight latin */
@font-face {
  font-family: 'Inter Tight';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url(fonts/inter-tight-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* brightside. website system. Mobile first: thumb dock with the Sun "Book" button, bottom sheets,
   tap-through stories, swipe rails, cross-page view transitions. Budget: this file + site.js under 30 KB. */
@view-transition{navigation:auto}
:root{
  color-scheme:light;
  /* BRAND v5 "Daybreak" (26 Oct 2026): Midnight anchor, warm Daybreak base, Glow (lime to mint) for every step forward,
     Iris for accents on light, the four app colours meeting in the petal full stop. Old names (--ink, --sun, --marigold) are aliases. */
  --midnight:#1E1B4B;--midnight-2:#2B2764;--daybreak:#FFFAF3;--surface:#FFFFFF;--sand:#F6EFE7;--line:#E9E1D7;--muted:#45416A;
  --iris:#5B4BDB;--success-ink:#0E7C59;--blue-ink:#3D5FD6;--on-dark:#F4F2FF;--on-dark-2:#C9C6EC;--on-dark-3:#A6A1C4;
  --glow:linear-gradient(120deg,#C8FF5A 0%,#7EEB86 52%,#36D6A0 100%);--shade:30,27,75;
  --petal:linear-gradient(var(--lav) 0 0) 0 0/46% 46% no-repeat,linear-gradient(var(--lime) 0 0) 100% 0/46% 46% no-repeat,linear-gradient(var(--mint) 0 0) 100% 100%/46% 46% no-repeat,linear-gradient(var(--blue) 0 0) 0 100%/46% 46% no-repeat;
  --ink:var(--midnight);--ink-2:var(--midnight-2);--paper:var(--daybreak);--fog:var(--sand);--fog-2:var(--line);--stone:var(--muted);--stone-2:#8A85AC;
  --sun:#C8FF5A;--marigold:#36D6A0;--lime:#C8FF5A;--mint:#36D6A0;--lav:#A8B5FF;--blue:#527BEB;--wa:#25D366;
  --f-d:"Inter Tight","Arial Narrow",Arial,sans-serif;--f-b:"Figtree",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --f-m:ui-monospace,"SFMono-Regular",Consolas,monospace;--f-hand:"Caveat","Figtree",cursive;
  --r-s:12px;--r-m:20px;--r-l:28px;--gut:max(clamp(16px,3.6vw,64px),env(safe-area-inset-left,0px));--gutr:max(clamp(16px,3.6vw,64px),env(safe-area-inset-right,0px));
  --dock:76px;--spring:cubic-bezier(.2,.9,.3,1.35);--ease:cubic-bezier(.2,.7,.2,1);
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{margin:0;background:var(--paper);color:var(--ink);font:16px/1.55 var(--f-b);overflow-x:hidden;padding-bottom:calc(var(--dock) + env(safe-area-inset-bottom,0px))}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:90;background:var(--paper)}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
button{font:inherit;color:inherit}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;box-shadow:0 0 0 6px var(--sun);border-radius:10px}
.wrap{max-width:1680px;margin:0 auto;padding-left:var(--gut);padding-right:var(--gutr)}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0)}

/* Wordmark and dot */
/* v5 logo: "brightside" in Figtree 800, Midnight, ending on the petal full stop (the four apps meeting in one dot) */
.wm{font-family:var(--f-b);font-weight:800;letter-spacing:-.03em;line-height:1;white-space:nowrap;color:var(--ink)}
.ink-bg .wm,.menu .wm,.foot .wm{color:var(--on-dark)}
.d{display:inline-block;width:.2em;height:.2em;border-radius:50%;background:var(--dc,var(--petal));margin-left:.04em;vertical-align:baseline}
.wm .d{width:.3em;height:.3em;margin-left:.06em;background:var(--petal)!important}
.d.sun{--dc:var(--sun)}.d.ink{--dc:var(--ink)}
.nw{white-space:nowrap}
main [class*="grid"]>*,main .wrap>*{min-width:0}

/* Type */
.mega{font-family:var(--f-d);font-weight:800;letter-spacing:-.06em;line-height:.9;font-size:clamp(46px,13vw,170px);margin:0;text-wrap:balance}
.h1{font-family:var(--f-d);font-weight:800;letter-spacing:-.055em;line-height:.92;font-size:clamp(40px,10.5vw,120px);margin:0;text-wrap:balance}
.h2{font-family:var(--f-d);font-weight:800;letter-spacing:-.045em;line-height:.95;font-size:clamp(32px,7.6vw,76px);margin:0;text-wrap:balance}
.h3{font-family:var(--f-d);font-weight:800;letter-spacing:-.03em;line-height:1.02;font-size:clamp(22px,5.4vw,34px);margin:0;text-wrap:balance}
.lead{font-size:clamp(17px,4.4vw,21px);color:var(--stone);margin:12px 0 0;max-width:60ch}
.ink-bg .lead{color:var(--on-dark-2)}
.lab{font-family:var(--f-m);font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--stone)}
.ink-bg .lab{color:var(--on-dark-3)}
:is(.ink-bg,[style*="background:var(--ink)"]) .lab{color:var(--on-dark-3)}
.hand{font-family:var(--f-hand);font-weight:700;font-size:1.35em;line-height:1}
.muted{color:var(--stone)}.small{font-size:14px}

/* Surfaces */
.ink-bg{background:var(--ink);color:var(--on-dark)}
.sun-bg{background:var(--sun)}.fog-bg{background:var(--fog)}
.lime-bg{background:var(--lime)}.mint-bg{background:var(--mint)}.lav-bg{background:var(--lav)}.blue-bg{background:var(--blue-ink);color:#fff}
.sec{padding-block:clamp(48px,9vw,120px)}
.sec.tight{padding-block:clamp(32px,6vw,72px)}

/* Top bar */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:60;background:var(--paper);border-bottom:1px solid transparent;transition:border-color .2s}
.top.scrolled{border-bottom-color:var(--fog-2)}
.top .wrap{display:flex;align-items:center;justify-content:space-between;gap:12px;height:60px}
.top .wm{font-size:28px;text-decoration:none;view-transition-name:wordmark}
.top nav{display:none;gap:4px}
.top nav a{font-size:14.5px;font-weight:600;text-decoration:none;padding:8px 13px;border-radius:999px;color:var(--stone)}
.top nav a[aria-current="page"]{background:var(--ink);color:#fff}
.top nav a:hover{color:var(--ink);background:var(--fog)}
.top nav a[aria-current="page"]:hover{background:var(--ink);color:#fff}
.top nav a{display:inline-flex;align-items:center;min-height:44px;white-space:nowrap}
.top nav{align-items:center}
.top-act{display:flex;align-items:center;gap:8px;flex:none}
.top-act .btn.sm{min-height:44px}
.top-act .tbook{display:none}

/* Buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-height:50px;padding:0 22px;border-radius:999px;border:0;font-weight:700;font-size:15.5px;text-decoration:none;cursor:pointer;white-space:nowrap;transition:transform .12s var(--ease)}
.btn:active{transform:scale(.96)}
.btn.sun{background:var(--sun);background-image:var(--glow);color:var(--ink);box-shadow:0 8px 20px -10px rgba(14,124,89,.55),inset 0 0 0 1px rgba(30,27,75,.06)}
@media (hover:hover){.btn.sun:hover{box-shadow:0 12px 26px -10px rgba(14,124,89,.7),inset 0 0 0 1px rgba(30,27,75,.06);transform:translateY(-1px)}}.btn.ink{background:var(--ink);color:#fff}
.btn.wa{background:var(--ink);color:#fff}.btn.wa .d{--dc:var(--wa)}
.btn.line{background:transparent;box-shadow:inset 0 0 0 2px currentColor}
.btn .d{width:.6em;height:.6em;margin:0}
.btn.sm{min-height:40px;padding:0 16px;font-size:14px}
.btn.full{width:100%}

/* Mobile dock: the app-like bottom bar */
@media (hover:hover){.btn.sun:active{transform:scale(.96)}}
/* DOCK v5: a soft floating pill in the four family tints (seamless happiness), Midnight icons with labels,
   a raised Glow "Book" that breathes light, not size. Phones and tablets (portrait and landscape, any touch screen).
   Hides while you read down, returns the moment you scroll up (site.js adds .away). */
.dock{position:fixed;left:0;right:0;bottom:0;z-index:70;padding:0 var(--gutr) calc(10px + env(safe-area-inset-bottom,0px)) var(--gut);pointer-events:none;transition:transform .38s var(--ease),opacity .3s}
.dock.away{transform:translateY(calc(100% + 30px));opacity:0}
.dock .bar{pointer-events:auto;position:relative;margin:0 auto;max-width:560px;height:64px;border-radius:999px;background:linear-gradient(100deg,#F1FFD6 0%,#DDF8EC 34%,#E2E9FF 68%,#ECEBFF 100%);display:grid;grid-template-columns:1fr 1fr 104px 1fr 1fr;align-items:center;box-shadow:0 0 0 1px rgba(30,27,75,.08),0 18px 40px -12px rgba(30,27,75,.34),0 3px 8px rgba(30,27,75,.08)}
.dock .bar::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:inset 0 1px 0 rgba(255,255,255,.9)}
.dock a,.dock button.mn{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;height:56px;border:0;background:none;text-decoration:none;color:#3F3A68;font:700 11px/1.1 var(--f-b);letter-spacing:.01em;cursor:pointer;-webkit-tap-highlight-color:transparent;border-radius:999px}
.dock a svg,.dock button.mn svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transition:transform .25s var(--spring)}
.dock a:active svg,.dock button.mn:active svg{transform:scale(.84)}
.dock a[aria-current="page"]{color:var(--ink)}
.dock a[aria-current="page"] svg{stroke-width:2.4}
.dock a[aria-current="page"]::after{content:"";position:absolute;bottom:2px;width:6px;height:6px;border-radius:50%;background:var(--petal)}
.dock .fab{justify-self:center;position:relative;width:96px;height:58px;margin-top:-26px;border-radius:999px;background:var(--glow);color:var(--ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;font-family:var(--f-b);font-weight:800;font-size:16px;line-height:1;letter-spacing:-.01em;border:0;cursor:pointer;box-shadow:0 0 0 5px var(--paper),0 12px 26px -8px rgba(14,124,89,.6);animation:dockGlow 3.6s ease-in-out infinite;-webkit-tap-highlight-color:transparent;transition:transform .18s var(--spring)}
.dock .fab::before{content:"";position:absolute;inset:-5px;border-radius:inherit;padding:2px;background:conic-gradient(from 90deg,var(--lime),var(--mint),var(--blue),var(--lav),var(--lime));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;opacity:.9}
.dock .fab small{font-size:10.5px;font-weight:700;opacity:.82;letter-spacing:.01em}
.dock .fab i{display:none}
.dock .fab .fp{display:inline-block;width:.34em;height:.34em;border-radius:50%;background:var(--petal);margin-left:.08em;vertical-align:baseline}
.dock .fab:active{transform:scale(.93)}
@keyframes dockGlow{0%,100%{box-shadow:0 0 0 5px var(--paper),0 10px 22px -8px rgba(14,124,89,.5)}50%{box-shadow:0 0 0 5px var(--paper),0 14px 34px -6px rgba(54,214,160,.8),0 0 0 12px rgba(200,255,90,.22)}}
/* Laptop and desktop: a floating Glow pill offers the Trial Class once you are past the first screen */
.fbook{position:fixed;right:max(24px,var(--gutr));bottom:24px;z-index:69;display:none;align-items:center;gap:10px;min-height:56px;padding:0 24px 0 20px;border:0;border-radius:999px;background:var(--glow);color:var(--ink);font:800 16px var(--f-b);letter-spacing:-.01em;cursor:pointer;box-shadow:0 0 0 1px rgba(30,27,75,.08),0 18px 40px -14px rgba(14,124,89,.7);transform:translateY(140%);opacity:0;transition:transform .45s var(--spring),opacity .3s}
.fbook .fp{width:12px;height:12px;border-radius:50%;background:var(--petal)}
.fbook small{font-weight:600;font-size:13.5px;opacity:.75}
.fbook.on{transform:none;opacity:1}
.fbook:hover{box-shadow:0 0 0 1px rgba(30,27,75,.1),0 22px 46px -14px rgba(14,124,89,.85)}
.fbook:active{transform:scale(.96)}

/* Full-screen menu */
.menu{position:fixed;inset:0;z-index:85;background:var(--ink);color:var(--on-dark);display:none;overflow-y:auto}
.menu.open{display:block;animation:menuIn .28s var(--ease)}
@keyframes menuIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.menu-in{padding:calc(14px + env(safe-area-inset-top,0px)) var(--gutr) calc(24px + env(safe-area-inset-bottom,0px)) var(--gut);max-width:720px;margin:0 auto;display:flex;flex-direction:column;min-height:100%}
.menu-top{display:flex;justify-content:space-between;align-items:center;height:48px}
.menu-top .wm{font-size:28px;color:#fff;text-decoration:none}
.menu-x{width:48px;height:48px;border-radius:50%;border:0;background:var(--midnight-2);color:#fff;font-size:26px;cursor:pointer}
.menu{background:radial-gradient(120% 60% at 100% 0%,rgba(168,181,255,.22),transparent 60%),radial-gradient(90% 50% at 0% 100%,rgba(54,214,160,.16),transparent 60%),var(--ink)}
.menu-links{display:flex;flex-direction:column;margin:22px 0}
.menu-links a{font-family:var(--f-d);font-weight:800;letter-spacing:-.05em;font-size:clamp(36px,11vw,64px);line-height:1.05;text-decoration:none;color:var(--on-dark);padding:6px 0}
.menu-links a .d{--dc:var(--sun);opacity:0;transition:opacity .2s}
.menu-links a[aria-current="page"] .d,.menu-links a:hover .d{opacity:1}
.menu-cta{display:grid;gap:10px;margin-top:auto}
.top nav{overflow-x:auto;scrollbar-width:none;min-width:0}
.top nav::-webkit-scrollbar{display:none}
@media (min-width:1100px) and (max-width:1319px){.top nav a{padding:8px 8px;font-size:13.5px}}

/* Bottom sheet */
.sheet{position:fixed;inset:0;z-index:80;display:none}
.sheet.open{display:block}
.sheet .scrim{position:absolute;inset:0;background:rgba(30,27,75,.45);opacity:0;transition:opacity .25s}
.sheet.open .scrim{opacity:1}
.sheet .panel{position:absolute;left:0;right:0;bottom:0;max-height:92vh;overflow:auto;background:var(--paper);border-radius:28px 28px 0 0;padding:10px var(--gutr) calc(20px + env(safe-area-inset-bottom,0px)) var(--gut);transform:translateY(100%);transition:transform .32s var(--ease);overscroll-behavior:contain}
.sheet.open .panel{transform:none}
.sheet .grab{width:44px;height:5px;border-radius:9px;background:var(--fog-2);margin:4px auto 14px}
.sheet .x{position:absolute;right:14px;top:12px;width:40px;height:40px;border-radius:50%;border:0;background:var(--fog);cursor:pointer;font-size:20px}
.opt{width:100%;text-align:left;border:0;font:inherit;color:inherit;display:grid;grid-template-columns:1fr auto;gap:4px 12px;align-items:center;padding:16px 18px;border-radius:20px;box-shadow:inset 0 0 0 2px var(--fog-2);cursor:pointer;margin-bottom:10px;background:var(--paper)}
.opt[aria-pressed="true"]{box-shadow:inset 0 0 0 2.5px var(--ink);background:#F4FFE0}
.opt .t{font-family:var(--f-d);font-weight:800;font-size:21px;letter-spacing:-.03em}
.opt .p{font-family:var(--f-d);font-weight:800;font-size:26px;letter-spacing:-.04em;text-align:right}
.opt .was{font-size:13px;color:var(--stone);text-decoration:line-through;text-align:right}
.slots{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding-bottom:4px;scroll-snap-type:x mandatory}
.slots::-webkit-scrollbar{display:none}
.slot{flex:none;scroll-snap-align:start;min-width:84px;padding:10px 12px;border-radius:16px;border:0;background:var(--fog);text-align:center;cursor:pointer;font-weight:700}
.slot small{display:block;font-weight:500;color:var(--stone);font-size:12px}
.slot[aria-pressed="true"]{background:var(--ink);color:#fff}.slot[aria-pressed="true"] small{color:var(--on-dark-2)}

/* Chips */
.chips{display:flex;gap:8px;overflow-x:auto;scrollbar-width:none;padding:2px 0 6px;scroll-snap-type:x proximity}
.chips::-webkit-scrollbar{display:none}
.cx{flex:none;scroll-snap-align:start;display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 16px;border-radius:999px;border:0;background:var(--paper);box-shadow:inset 0 0 0 2px var(--fog-2);font-weight:700;font-size:14.5px;cursor:pointer}
.cx[aria-pressed="true"]{background:var(--ink);color:#fff;box-shadow:none}
.cx[aria-pressed="true"]::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--sun)}

/* Rails: native swipe */
.rail{display:grid;grid-auto-flow:column;grid-auto-columns:min(78%,340px);gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:4px var(--gutr) 10px var(--gut);margin:0 calc(-1 * var(--gutr)) 0 calc(-1 * var(--gut));scroll-padding-left:var(--gut)}
.rail::-webkit-scrollbar{display:none}
.rail>*{scroll-snap-align:start}

/* Cards and tiles */
.tile{border-radius:var(--r-l);padding:22px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:12px}
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,var(--min,280px)),1fr));gap:12px}
.grid>*{min-width:0}

/* People on shapes */
.fig{position:relative;overflow:hidden;background:var(--sun)}
.fig img{width:100%;height:100%;object-fit:cover}
.bubble{border-radius:44% 44% 44% 10%/40% 40% 40% 10%}
.arch{border-radius:999px 999px 28px 28px}
.blob{border-radius:58% 42% 51% 49%/46% 55% 45% 54%}
.sq{border-radius:28%}

/* Floating chips */
.float{position:absolute;display:flex;align-items:center;gap:8px;background:var(--paper);color:var(--ink);border-radius:16px;padding:9px 12px;box-shadow:0 12px 30px rgba(30,27,75,.18);font-size:12.5px;line-height:1.2;z-index:2;animation:bob 6s ease-in-out infinite}
.float b{font-family:var(--f-d);font-weight:800;font-size:19px;letter-spacing:-.03em;display:block}
.float .dt{width:11px;height:11px;border-radius:50%;background:var(--sun);flex:none}
.float.b2{animation-delay:-2s}.float.b3{animation-delay:-4s}
@keyframes bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-8px)}}

/* Coach's marks */
.mk{position:absolute;pointer-events:none;overflow:visible}
.mk path{fill:none;stroke:var(--sun);stroke-width:7;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:var(--len,600);stroke-dashoffset:0;transition:stroke-dashoffset 1s var(--ease)}
.mk.pre path{stroke-dashoffset:var(--len,600);transition:none}
.marked{position:relative;display:inline-block;white-space:nowrap}

/* Marquee */
.marq{overflow:hidden;background:var(--sun);border-block:2px solid var(--ink);padding-block:12px;white-space:nowrap}
.marq .track{display:inline-flex;animation:marq 40s linear infinite}
.marq span{font-family:var(--f-d);font-weight:800;letter-spacing:-.04em;font-size:clamp(22px,6vw,40px);display:inline-flex;align-items:center;gap:28px;padding-right:28px}
.marq span::after{content:"";width:.28em;height:.28em;border-radius:50%;background:var(--ink)}
.marq.ink{background:var(--ink);color:var(--on-dark);border-color:var(--ink)}.marq.ink span::after{background:var(--sun)}
@keyframes marq{to{transform:translateX(-50%)}}

/* STORIES v3: rings (face on a brand ring, a family-colour full stop, seen state) and the listening viewer
   (framed portrait on a family-colour shape, the learner's voice, live subtitles, a dot equaliser). */
.story-ring{--rc:var(--sun);display:flex;flex-direction:column;align-items:center;gap:7px;border:0;background:none;cursor:pointer;padding:2px 0 0;width:80px;flex:none;-webkit-tap-highlight-color:transparent}
.story-ring .ring{position:relative;display:block;width:74px;height:74px;border-radius:50%;padding:3px;background:conic-gradient(from 210deg,var(--sun),var(--marigold) 28%,var(--rc) 64%,var(--sun));transition:transform .2s var(--ease)}
.story-ring .ring::after{content:"";position:absolute;right:1px;bottom:3px;width:15px;height:15px;border-radius:50%;background:var(--rc);box-shadow:0 0 0 3px var(--ring-bg,var(--paper));transition:transform .3s var(--spring)}
.story-ring img{width:100%;height:100%;border-radius:50%;object-fit:cover;border:3px solid var(--ring-bg,var(--paper));background:var(--fog-2)}
.story-ring .nm{font-size:12px;font-weight:700;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.story-ring.seen .ring{background:var(--fog-2)}
.story-ring.seen .ring::after{transform:scale(.6)}
.story-ring.seen .nm{color:var(--stone)}
.story-ring:active .ring,.story-ring.tap .ring{transform:scale(.92)}
@media (hover:hover){.story-ring:hover .ring{transform:translateY(-2px)}.story-ring:hover .ring::after{transform:scale(1.25)}}
.sv{position:fixed;inset:0;z-index:95;background:var(--ink);color:#fff;display:none;touch-action:none;-webkit-user-select:none;user-select:none;overscroll-behavior:contain;--fc:var(--sun)}
.sv.open{display:block;animation:sv-in .3s var(--ease)}
@keyframes sv-in{from{opacity:0;transform:scale(.97)}}
.sv .fr{position:absolute;inset:0;margin:0 auto;max-width:520px;display:grid;grid-template-rows:auto auto minmax(0,1fr) auto auto auto;grid-template-areas:"bars" "hd" "stage" "meta" "sub" "cta";padding:calc(10px + env(safe-area-inset-top,0px)) 16px calc(14px + env(safe-area-inset-bottom,0px));transition:transform .2s var(--ease)}
.sv .bars{grid-area:bars;display:flex;gap:3px}
.sv .bars i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.26);overflow:hidden}
.sv .bars b{display:block;height:100%;background:#fff;transform-origin:0 50%;transform:scaleX(0)}
.sv .hd{grid-area:hd;display:flex;align-items:center;gap:10px;margin-top:10px;min-width:0}
.sv .av{width:36px;height:36px;border-radius:50%;object-fit:cover;box-shadow:0 0 0 2px var(--fc)}
.sv .who{flex:1;min-width:0;font-size:14px;line-height:1.2}
.sv .who small{display:block;color:var(--on-dark-2);font-size:12.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv .ib{flex:none;width:44px;height:44px;border:0;border-radius:50%;background:rgba(255,255,255,.1);color:#fff;display:grid;place-items:center;cursor:pointer;padding:0}
.sv .ib svg,.sv .nav svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.sv .ib svg path:first-child{fill:currentColor}
.sv .stage{grid-area:stage;position:relative;display:grid;place-items:center;min-height:0;margin:12px 0 4px}
.sv .shape{position:absolute;width:min(96%,50vh);aspect-ratio:1;background:var(--fc);border-radius:58% 42% 51% 49%/46% 55% 45% 54%;translate:9% -5%;transition:background .4s,border-radius .5s var(--ease)}
.sv[data-frame=lav] .shape{border-radius:999px 999px 34px 34px;aspect-ratio:4/5;translate:-10% -3%}
.sv[data-frame=mint] .shape{border-radius:44% 44% 44% 10%/40% 40% 40% 10%;translate:8% 6%}
.sv[data-frame=blue] .shape{border-radius:50%;translate:-9% 7%}
.sv .pic{position:relative;margin:0;height:100%;max-height:560px;max-width:84%;aspect-ratio:4/5;border-radius:var(--r-l);overflow:hidden;background:var(--ink-2);box-shadow:0 28px 60px -24px rgba(0,0,0,.7)}
.sv .pt{width:100%;height:100%;object-fit:cover;transition:transform 8s linear}
.sv.open:not(.paused) .pt{transform:scale(1.04)}
.sv .tag{position:absolute;left:12px;top:12px;max-width:calc(100% - 24px);font-family:var(--f-m);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;background:var(--fc);color:var(--ink);padding:5px 10px;border-radius:999px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sv[data-frame=blue] .tag{color:#fff}
.sv .say{position:absolute;left:0;right:0;bottom:0;margin:0;padding:48px 14px 14px;background:linear-gradient(180deg,rgba(30,27,75,0),rgba(30,27,75,.82) 55%)}
.sv .say p{margin:0;font-family:var(--f-d);font-weight:800;letter-spacing:-.025em;font-size:clamp(15px,4vw,18px);line-height:1.15;text-wrap:balance}
.sv .say p::before{content:"\201C";color:var(--fc);margin-right:.06em}
.sv .unmute{position:absolute;left:50%;top:42%;translate:-50% -50%;border:0;border-radius:999px;background:#fff;color:var(--ink);font:700 15px var(--f-b);padding:12px 18px;min-height:44px;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.35);white-space:nowrap}
.sv .pz{position:absolute;left:50%;top:42%;translate:-50% -50%;display:flex;gap:7px;opacity:0;transition:opacity .2s}
.sv .pz i{width:9px;height:30px;border-radius:5px;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.4)}
.sv.paused .pz{opacity:1}
.sv .meta{grid-area:meta;display:flex;align-items:center;gap:12px;margin-top:10px;min-height:22px;font-family:var(--f-m);font-size:11px;letter-spacing:.06em;color:var(--on-dark-3)}
.sv .eq{display:inline-flex;align-items:center;gap:6px;height:22px}
.sv .eq i{width:7px;height:7px;border-radius:50%;background:var(--blue);transform:scale(.75);transition:transform .08s linear}
.sv .eq i:nth-child(2){background:var(--marigold)}.sv .eq i:nth-child(3){background:var(--mint)}.sv .eq i:nth-child(4){background:var(--lav)}.sv .eq i:nth-child(5){background:var(--lime)}
.sv .hint{margin-left:auto}
.sv .sub{grid-area:sub;margin:8px 0 0;min-height:3.45em;font-family:var(--f-d);font-weight:800;letter-spacing:-.03em;font-size:clamp(22px,6.3vw,30px);line-height:1.13;white-space:pre-line;text-wrap:balance;transition:opacity .25s}
.sv .sub.idle{opacity:.35}
.sv .sub .w{color:rgba(255,255,255,.34);transition:color .12s}
.sv .sub .w.on{color:#fff}
.sv .sub .w.now{color:var(--fc)}
.sv[data-frame=blue] .sub .w.now{color:#8FA8FF}
.sv .cta{grid-area:cta;margin-top:12px}
.sv .big{display:none}
.sv .nav{position:absolute;top:50%;translate:0 -50%;width:48px;height:48px;border-radius:50%;border:0;background:rgba(255,255,255,.12);color:#fff;display:grid;place-items:center;cursor:pointer;opacity:0;pointer-events:none;padding:0}
.sv .nav:focus-visible{opacity:1;pointer-events:auto}
.sv .nav:disabled{visibility:hidden}
.sv .nav.p{left:8px}.sv .nav.n{right:8px}
.sv.hold :is(.hd,.meta,.cta,.bars,.say,.tag){opacity:0;transition:opacity .25s}
.sv.noaudio .meta,.sv.noaudio .sub{display:none}
.sv.noaudio .say{padding:70px 18px 20px}
.sv.noaudio .say p{font-size:clamp(22px,6vw,30px)}
.sv.wait .eq{opacity:.4}
@media (max-height:640px){.sv .say{display:none}.sv .sub{font-size:21px}}
@media (min-width:900px){
  .sv .fr{max-width:1180px;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto auto minmax(0,1fr);grid-template-areas:"bars bars" "hd hd" "stage ." "stage big" "stage meta" "stage sub" "stage cta" "stage .";column-gap:64px;padding:22px 88px 28px}
  .sv .stage{margin:20px 0}
  .sv .pic{max-height:none}
  .sv .shape{width:min(92%,60vh)}
  .sv .sub{font-size:clamp(30px,2.6vw,44px);min-height:3.4em;margin-top:14px}
  .sv .cta{margin-top:26px;max-width:380px}
  .sv .nav{opacity:1;pointer-events:auto}
  .sv .nav:hover{background:rgba(255,255,255,.22)}
  .sv .hint{display:none}
  .sv .big{display:block;grid-area:big;margin:0 0 18px;font-family:var(--f-d);font-weight:800;letter-spacing:-.055em;line-height:.9;font-size:clamp(56px,5.6vw,96px)}
  .sv .big .d{--dc:var(--fc)}
  .sv .big small{display:block;margin-top:14px;font-family:var(--f-m);font-size:12px;letter-spacing:.08em;text-transform:uppercase;font-weight:400;color:var(--on-dark-3)}
}
/* short landscape (phones on their side):  portrait on the left, voice and subtitles on the right */
@media (orientation:landscape) and (max-height:540px){
  .sv .fr{max-width:980px;grid-template-columns:auto minmax(0,1fr);grid-template-rows:auto auto minmax(0,1fr) auto auto auto minmax(0,1fr);grid-template-areas:"bars bars" "stage hd" "stage ." "stage meta" "stage sub" "stage cta" "stage .";column-gap:clamp(20px,4vw,48px);padding:8px max(16px,env(safe-area-inset-right,0px)) 10px max(16px,env(safe-area-inset-left,0px))}
  .sv .stage{margin:8px 0 0;height:calc(100vh - 36px);height:calc(100dvh - 36px)}
  .sv .pic{height:100%;max-height:none;max-width:none}
  .sv .shape{width:auto;height:88%}
  .sv .hd{margin-top:8px}
  .sv .sub{font-size:clamp(19px,2.6vw,26px);min-height:3.4em}
  .sv .cta{margin-top:10px;max-width:340px}
  .sv .big{display:none}
}
@media (orientation:landscape) and (max-height:540px) and (min-width:900px){.sv .fr{padding-inline:72px}}
@media (min-width:700px) and (max-width:899px) and (min-height:900px){.sv .fr{max-width:640px;padding-top:24px}.sv .pic{max-height:700px}.sv .shape{width:min(96%,56vh)}}
@media (prefers-reduced-motion:reduce){.sv.open{animation:none}.sv .pt{transition:none;transform:none!important}.sv .eq i{transition:none}}

/* Testimonial card (designed still) */
.tcard{position:relative;border-radius:var(--r-l);overflow:hidden;aspect-ratio:4/5;background:var(--ink);color:#fff;border:0;padding:0;text-align:left;cursor:pointer;display:block;width:100%}
.tcard img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(1.05) contrast(1.03)}
.tcard .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(30,27,75,0) 35%,rgba(30,27,75,.94) 92%)}
.tcard .body{position:absolute;left:16px;right:16px;bottom:16px}
.tcard q{font-family:var(--f-d);font-weight:800;letter-spacing:-.035em;font-size:21px;line-height:1.05;quotes:none;display:block}
.tcard .nm{font-size:13px;margin-top:8px;color:var(--on-dark-2);display:flex;align-items:center;gap:8px}
.tcard .nm::before{content:"";width:9px;height:9px;border-radius:50%;background:var(--sun)}
.tcard .tag{position:absolute;left:14px;top:14px;font-family:var(--f-m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;background:var(--sun);color:var(--ink);padding:4px 9px;border-radius:999px}

/* Flip cards */
.flip{perspective:900px;border:0;background:none;padding:0;cursor:pointer;min-height:180px;text-align:left}
.flip .in{position:relative;display:grid;width:100%;height:100%;min-height:180px;transition:transform .55s var(--spring);transform-style:preserve-3d}
.flip[aria-pressed="true"] .in{transform:rotateY(180deg)}
.flip .f,.flip .b{grid-area:1/1;min-width:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:24px;padding:18px;display:flex;flex-direction:column;justify-content:space-between;gap:14px}
.flip .f{background:var(--lime)}.flip .b{background:var(--ink);color:var(--on-dark);transform:rotateY(180deg)}
.flip .b .lab{color:var(--on-dark-2)}
.flip .q{font-family:var(--f-d);font-weight:800;letter-spacing:-.03em;font-size:24px;line-height:1.05}

/* Accordion */
.acc details{border-bottom:1px solid var(--fog-2);padding:0 0 4px}
.acc summary{font-family:var(--f-d);font-weight:800;letter-spacing:-.02em;font-size:19px;cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px;min-height:56px;padding:12px 0 8px}
.acc details[open]{padding-bottom:16px}
.acc summary::-webkit-details-marker{display:none}
.acc details,.acc summary>*{min-width:0}
.acc summary>*{flex:1 1 auto}
.acc summary::after{flex:none;width:1em;text-align:center}
.acc details{overflow-x:clip}
.acc summary{overflow-wrap:anywhere}
.acc summary::after{content:"+";font-size:26px;line-height:1;transition:transform .2s}
.acc details[open] summary::after{transform:rotate(45deg)}
.acc p{color:var(--stone);margin:10px 0 0}

/* Reveal on scroll: dot-led, see DOTS MOTION (.rv-wait/.rv-go set by site.js) */

/* Footer */
.foot{background:var(--ink);color:var(--on-dark);padding:48px var(--gutr) 24px var(--gut);overflow:hidden}
.foot .giant{font-size:clamp(60px,19.5vw,360px);display:block;line-height:.8;margin-top:28px}
.foot a{text-decoration:none;color:var(--on-dark-2)}
.foot .cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:20px;font-size:14px}
.foot .cols b{display:block;color:#fff;margin-bottom:8px}
.foot .cols a{display:flex;align-items:center;min-height:44px;width:fit-content}
.foot .cols br{display:none}

/* Larger screens */
/* SHELL v5: tablet keeps the dock (up to 1199px, and on any touch screen at any width); laptops (1200px+, mouse) get the full top bar
   (nav + Say Hi + Book) and the floating Book pill instead. */
@media (min-width:768px){.top .wrap{height:68px}.top .wm{font-size:30px}}
@media (min-width:1100px){
  .top nav{display:flex}
  .top .wrap{height:76px;gap:20px}
  .top-act .tbook{display:inline-flex}
  body{font-size:17px}
}
@media (min-width:1100px) and (max-width:1319px){.top-act .btn.wa{display:none}}
@media (min-width:1200px) and (hover:hover) and (pointer:fine){
  body{padding-bottom:0}
  .dock{display:none}
  .fbook{display:inline-flex}
}
@media (min-width:900px){
  .rail{grid-auto-columns:minmax(300px,1fr);grid-auto-flow:column;overflow-x:auto}
  .sheet .panel{left:50%;right:auto;bottom:50%;transform:translate(-50%,60%);width:min(520px,92vw);border-radius:28px;opacity:0;transition:transform .3s var(--ease),opacity .3s}
  .sheet.open .panel{transform:translate(-50%,50%);opacity:1}
}
@media (min-width:1900px){.wrap{max-width:1880px}}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .float,.marq .track,.dock .fab{animation:none!important}
  .dock,.fbook{transition:none}
  .rv{animation:none!important}
  .mk path{transition:none}
  @view-transition{navigation:none}
}

/* HOME v3 (index.html only: why now, the six as a map, then vs now, founder) */
.hv-wide{max-width:72ch}
.hv-forces{display:grid;gap:12px;margin-top:28px}
.hv-f{border-radius:var(--r-l);padding:22px;display:flex;flex-direction:column;gap:10px;min-height:200px;min-width:0}
.hv-f p{margin:0;font-size:15.5px}
.hv-f.ink-bg p{color:var(--on-dark-2)}
.hv-n{font-family:var(--f-m);font-size:12px;letter-spacing:.08em;opacity:.7;margin-bottom:auto}
.hv-quiet{background:var(--paper);box-shadow:inset 0 0 0 2px var(--fog-2);color:var(--stone)}
.hv-quiet .h3{color:var(--stone)}.hv-quiet .d{--dc:var(--fog-2)}
.hv-cost{margin-top:14px;border-radius:var(--r-l);padding:clamp(24px,5vw,60px);display:grid;gap:18px}
.hv-big{font-family:var(--f-d);font-weight:800;letter-spacing:-.05em;line-height:.95;font-size:clamp(32px,7.4vw,84px);margin:0;max-width:16ch;text-wrap:balance}
.hv-hl{color:var(--sun)}
.hv-cost>.lab{grid-column:1/-1;margin:0}
main>.hero{overflow-x:clip}
.hv-cost-b{display:grid;gap:16px}
.hv-cost-b p{margin:0;color:var(--on-dark-2);font-size:clamp(16px,4vw,19px);max-width:62ch}
.hv-cost-b .hv-hand{color:var(--sun);font-size:clamp(28px,7vw,42px);line-height:1.05}
.hv-research{margin-top:28px}
.hv-research ul{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:0}
.hv-research li{padding:14px 0;border-top:1px solid var(--fog-2);font-size:15px;color:var(--stone);min-width:0;max-width:72ch}
@media (min-width:720px) and (max-width:899px){.hv-research ul{grid-template-columns:repeat(3,1fr);gap:20px}}
.hv-research b{display:block;color:var(--ink);font-size:16px;margin-bottom:2px}
.hv-research small{display:block;margin-top:6px;font-family:var(--f-m);font-size:11px;letter-spacing:.04em;color:var(--stone)}
.hv-research small::before{content:"Source: "}
.hv-map{min-width:0}
.hv-tip{margin:0 0 12px;font-size:14px;color:var(--stone-2)}
.hv-stack li{padding:0;display:block;transition:transform .25s var(--spring)}
.hv-stack button{width:100%;border:0;background:none;color:inherit;font:inherit;text-align:left;cursor:pointer;padding:12px 16px;border-radius:16px;display:grid;grid-template-columns:auto 1fr;gap:2px 12px;align-items:baseline;min-height:44px}
.hv-stack button>*{min-width:0}
.hv-stack .n{grid-row:span 2}
.hv-stack li:has(button[aria-pressed="false"]){opacity:.88}
@media (max-width:899px){.hv-stack button[aria-pressed="false"]>span:last-child{display:none}.hv-stack button{padding:10px 16px}}
.hv-stack li:has(button[aria-pressed="true"]){transform:scale(1.03);box-shadow:0 0 0 3px var(--ink),0 0 0 5px var(--on-dark)}
.hv-panel{margin-top:14px;border-radius:var(--r-l);background:var(--ink-2);padding:20px;display:grid;gap:14px}
.hv-panel .lab{margin:0;color:var(--sun)}
.hv-pr p{margin:6px 0 0;font-size:16.5px;line-height:1.45;color:var(--on-dark)}
.hv-tag{display:inline-block;font-family:var(--f-m);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;padding:4px 9px;border-radius:999px}
.hv-tag.off{background:rgba(255,255,255,.1);color:var(--on-dark-2)}.hv-tag.on{background:var(--sun);color:var(--ink)}.hv-tag.pr{background:var(--lime);color:var(--ink)}
.hv-pop{animation:hvPop .35s var(--ease)}
@keyframes hvPop{from{opacity:.3;transform:translateY(6px)}to{opacity:1;transform:none}}
.hv-switch{display:grid;grid-template-columns:1fr 1fr;gap:4px;background:var(--fog);border-radius:999px;padding:4px;margin-top:24px;width:100%;max-width:520px}
.hv-switch button{min-height:44px;border:0;background:none;border-radius:999px;padding:6px 10px;line-height:1.2;font-weight:700;font-size:clamp(13px,3.6vw,15px);cursor:pointer;color:var(--stone)}
.hv-switch button[aria-pressed="true"]{background:var(--ink);color:#fff}
.hv-rows{list-style:none;margin:18px 0 0;padding:0;display:grid;gap:10px}
.hv-rows li{display:grid;gap:8px;padding:18px 20px;border-radius:var(--r-m);background:var(--fog);min-width:0;transition:background .3s}
.hv-rows li>*{min-width:0}
.hv-then{font-size:15px;color:var(--stone);text-decoration:line-through;text-decoration-color:var(--sun);text-decoration-thickness:3px;transition:all .3s var(--ease)}
.hv-arrow{display:none}
.hv-now{font-size:15.5px;color:var(--stone);transition:opacity .3s}
.hv-now b{display:block;font-family:var(--f-d);font-weight:800;letter-spacing:-.035em;font-size:clamp(22px,5.4vw,30px);line-height:1.05;color:var(--ink);margin-bottom:4px}
.hv-way[data-view="then"] .hv-rows li{background:var(--paper);box-shadow:inset 0 0 0 2px var(--fog-2)}
.hv-way[data-view="then"] .hv-then{text-decoration:none;color:var(--ink);font-family:var(--f-d);font-weight:800;letter-spacing:-.03em;font-size:clamp(20px,5vw,26px)}
.hv-way[data-view="then"] .hv-now{opacity:.3}
.hv-hour{margin-top:28px}
.hv-hour ol{list-style:none;padding:0;margin:12px 0 0;display:grid;gap:10px;counter-reset:h}
.hv-hour li{counter-increment:h;background:var(--ink);color:var(--on-dark);border-radius:var(--r-m);padding:16px 16px 16px 58px;position:relative;min-width:0}
.hv-hour li::before{content:counter(h);position:absolute;left:14px;top:14px;width:32px;height:32px;border-radius:50%;background:var(--sun);color:var(--ink);display:grid;place-items:center;font-family:var(--f-d);font-weight:800}
.hv-hour b{display:block;font-family:var(--f-d);font-weight:800;letter-spacing:-.03em;font-size:19px}
.hv-hour span{font-size:14.5px;color:var(--on-dark-2)}
.hv-founder{padding-top:clamp(40px,8vw,110px);overflow:hidden}
.hv-fd{display:grid;align-items:end}
.hv-fd>*{min-width:0}
.hv-port{position:relative;width:min(100%,520px);margin:0 auto}
.hv-disc{position:absolute;left:8%;top:4%;width:84%;aspect-ratio:1;border-radius:50%;background:var(--lav)}
.hv-cut{position:relative;z-index:1;width:100%;height:auto}
.hv-stk{position:absolute;z-index:2;font-family:var(--f-d);font-weight:800;letter-spacing:-.02em;font-size:clamp(13px,3.4vw,16px);padding:8px 13px;border-radius:999px;box-shadow:0 10px 24px rgba(30,27,75,.18);white-space:nowrap}
.hv-stk.s1{left:0;top:16%;background:var(--ink);color:#fff;transform:rotate(-6deg)}
.hv-stk.s2{right:0;top:30%;background:var(--paper);color:var(--ink);transform:rotate(5deg)}
.hv-pol{position:absolute;z-index:2;right:-1%;bottom:22%;width:36%;margin:0;background:var(--paper);padding:7px 7px 2px;border-radius:8px;box-shadow:0 16px 34px rgba(30,27,75,.25);transform:rotate(4deg)}
.hv-pol img{width:100%;height:auto;border-radius:4px}
.hv-pol figcaption{font-size:clamp(15px,3.8vw,19px);text-align:center;color:var(--ink);padding:4px 0 2px;line-height:1.1}
.hv-note{position:relative;z-index:3;background:var(--paper);border-radius:var(--r-l);padding:clamp(22px,4vw,48px);margin:-72px 0 clamp(40px,8vw,110px);box-shadow:0 22px 50px rgba(30,27,75,.16)}
.hv-note .lab{margin:0}
.hv-letter p{margin:14px 0 0;font-size:clamp(17px,4.2vw,20px);line-height:1.6;max-width:58ch}
.hv-sig{display:inline-block;font-size:clamp(46px,11vw,68px);line-height:1;margin:22px 0 0;transform:rotate(-3deg);color:var(--ink)}
.hv-sig::after{content:"";display:inline-block;width:.16em;height:.16em;border-radius:50%;background:var(--marigold);margin-left:.06em}
.hv-role{margin:4px 0 0;color:var(--stone)}
@media (min-width:640px){
 .hv-forces{grid-template-columns:repeat(2,1fr)}
 .hv-hour ol{grid-template-columns:repeat(2,1fr)}
}
@media (min-width:900px){
 .hv-forces{grid-template-columns:repeat(3,1fr)}
 .hv-cost{grid-template-columns:1.1fr 1fr;align-items:end}
 .hv-research ul{grid-template-columns:repeat(3,1fr);gap:28px}
 .hv-rows li{grid-template-columns:minmax(0,.8fr) 56px minmax(0,1.4fr);align-items:center;padding:20px 26px}
 .hv-then{font-family:var(--f-d);font-weight:800;letter-spacing:-.03em;font-size:21px;color:var(--stone-2)}
 .hv-arrow{display:block;position:relative;height:3px;background:var(--ink);border-radius:3px}
 .hv-arrow::after{content:"";position:absolute;right:-2px;top:-5px;border:6.5px solid transparent;border-left:9px solid var(--ink);border-right:0}
 .hv-way[data-view="then"] .hv-arrow{opacity:.3}
 .hv-hour ol{grid-template-columns:repeat(4,1fr)}
 .hv-fd{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(24px,4vw,72px)}
 .hv-port{width:100%;max-width:620px}
 .hv-note{margin:0 0 clamp(48px,8vw,110px)}
}
@media (min-width:700px) and (max-width:899px),(min-width:1200px){
 .hv-map{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;align-items:start}
 .hv-tip{grid-column:1/-1}
 .hv-map .hv-panel{margin-top:0}
}
@media (min-width:700px) and (max-width:899px){.hv-rows{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (min-width:900px){.hv-big{font-size:clamp(44px,5.4vw,92px)}}
@media (prefers-reduced-motion:reduce){.hv-pop{animation:none}.hv-stack li{transition:none}}

/* DOTS MOTION: the only motion language. Dots type like a person typing, then gather into one full stop.
   Solid dot = a person, outlined (.ai) = AI. Transform/opacity only; paused off screen ([data-off]); a still full stop under reduced motion. */
:root{--vtx:calc(max(0px,(100vw - 1680px)/2) + 140px);--vty:37px}
.dots-loader{--ds:8px;--dg:calc(var(--ds)*.7);--c1:var(--blue);--c2:var(--marigold);--c3:var(--mint);--c4:var(--lav);display:inline-flex;align-items:center;gap:var(--dg);height:calc(var(--ds)*3);vertical-align:middle;pointer-events:none;animation:dl-in .25s var(--wait,.3s) both}
.dots-loader i{flex:none;width:var(--ds);height:var(--ds);border-radius:50%;background:var(--c,var(--c1));--go:0;--gs:.4;animation:dl-hop 1.8s var(--ease) calc(var(--n,0)*.14s) infinite,dl-gather 1.8s var(--ease) infinite}
.dots-loader i:nth-child(1){--dx:calc(var(--ds) + var(--dg))}
.dots-loader i:nth-child(2){--n:1;--c:var(--c2)}
.dots-loader i:nth-child(3){--n:2;--c:var(--c3);--dx:calc(-1*(var(--ds) + var(--dg)))}
.dots-loader i.s{--go:1;--gs:1.35;--dx:0px}
.dots-loader.is-done i{animation:dl-done .35s var(--ease) forwards}
.dots-loader.lg{--ds:12px}
.dots-loader.overlay{position:absolute;left:50%;top:50%;translate:-50% -50%;z-index:2}
.dots-loader.ai i{background:none;box-shadow:inset 0 0 0 2px var(--c,var(--c1))}
.ink-bg .dots-loader,.dots-loader.on-ink{--c1:var(--lav);--c2:var(--sun);--c3:var(--mint);--c4:var(--lime)}
.dots-loader.on-sun{--c1:var(--blue);--c2:var(--ink);--c3:var(--blue);--c4:var(--ink)}
@keyframes dl-in{from{opacity:0}}
@keyframes dl-hop{0%,40%,100%{transform:none}10%{transform:translateY(-85%)}20%{transform:none}28%{transform:translateY(-40%)}}
@keyframes dl-gather{0%,56%,100%{translate:0 0;scale:1;opacity:1}70%,88%{translate:var(--dx,0px) 0;scale:var(--gs);opacity:var(--go)}}
@keyframes dl-done{to{translate:var(--dx,0px) 0;scale:var(--gs);opacity:var(--go)}}
.is-busy{position:relative;pointer-events:none;-webkit-text-fill-color:transparent}
.is-busy>:not(.dots-loader){opacity:0}
.is-busy>.dots-loader{position:absolute;left:50%;top:50%;translate:-50% -50%;--wait:0s;--ds:7px}
[data-off],[data-off] *{animation-play-state:paused!important}
/* The logo's full stop types "..." while a page loads, then the dots fold back into it */
:is(.top,.menu-top) .wm .d{position:relative}
.wm-typing :is(.top,.menu-top) .wm .d::before,.wm-typing :is(.top,.menu-top) .wm .d::after,.wm-settle :is(.top,.menu-top) .wm .d::before,.wm-settle :is(.top,.menu-top) .wm .d::after{content:"";position:absolute;inset:0;border-radius:50%;background:var(--mint);translate:160% 0;animation:dl-hop 1.3s var(--ease) .12s infinite}
.wm-typing :is(.top,.menu-top) .wm .d::after,.wm-settle :is(.top,.menu-top) .wm .d::after{background:var(--blue);translate:320% 0;animation-delay:.26s}
.menu-top .wm .d::after{background:var(--lav)!important}
.wm-settle :is(.top,.menu-top) .wm .d::before,.wm-settle :is(.top,.menu-top) .wm .d::after{animation:wm-fold .4s var(--ease) forwards}
@keyframes wm-fold{to{translate:0 0;scale:.4;opacity:0}}
/* Page to page: the new page opens out of the logo's full stop */
::view-transition-old(root){animation:none}
::view-transition-new(root){animation:vt-dot .55s var(--ease) both}
@keyframes vt-dot{from{clip-path:circle(5px at var(--vtx) var(--vty))}to{clip-path:circle(160vmax at var(--vtx) var(--vty))}}
/* Scroll reveal: a full stop lands on the corner, then the block arrives */
.rv-wait{opacity:0;translate:0 18px}
.rv-go{animation:rv-in .7s var(--ease) var(--rvd,0s) both}
@keyframes rv-in{0%,22%{opacity:0;translate:0 18px}to{opacity:1;translate:0 0}}
.rv-dot{position:absolute;left:0;top:0;width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;background:var(--c,var(--marigold));z-index:3;pointer-events:none;animation:rv-dot .8s var(--ease) var(--rvd,0s) both}
@keyframes rv-dot{0%{transform:translate(var(--x),calc(var(--y) + 16px)) scale(0)}28%{transform:translate(var(--x),var(--y)) scale(1.25)}50%{transform:translate(var(--x),var(--y)) scale(1);opacity:1}to{transform:translate(var(--x),var(--y)) scale(.2);opacity:0}}
/* Images arrive with a soft fade once loaded (a dot loader holds their place) */
img[data-dl]{opacity:0}
img.dl-in{animation:dl-in .5s var(--ease)}
/* Section divider: a row of dots that flows in */
.dots-rule{display:flex;justify-content:center;gap:14px;padding-block:clamp(20px,4vw,40px)}
.dots-rule i{width:8px;height:8px;border-radius:50%;background:var(--c,var(--marigold));opacity:0;translate:-28px 0;transition:opacity .4s,translate .7s var(--spring);transition-delay:calc(var(--n,0)*90ms)}
.dots-rule i:nth-child(5n+2){--c:var(--blue)}.dots-rule i:nth-child(5n+3){--c:var(--mint)}.dots-rule i:nth-child(5n+4){--c:var(--lav)}.dots-rule i:nth-child(5n){--c:var(--lime)}
.dots-rule.in i{opacity:1;translate:0 0}
/* Marquee separators cycle the family colours */
.marq span:nth-child(2n)::after{background:var(--blue)}
.marq.ink span:nth-child(4n+2)::after{background:var(--lime)}.marq.ink span:nth-child(4n+3)::after{background:var(--mint)}.marq.ink span:nth-child(4n)::after{background:var(--lav)}
/* Link hover: a dot travels under the link and stops at its end, like a full stop */
@media (hover:hover){
  :is(.foot,.prose) a:not(.btn,.wm){position:relative}
  :is(.foot,.prose) a:not(.btn,.wm)::after{content:"";position:absolute;left:0;right:0;bottom:-.32em;height:.3em;background:radial-gradient(circle at .15em 50%,var(--lc,var(--marigold)) .12em,transparent .14em);opacity:0;transition:translate .5s var(--ease),opacity .2s;pointer-events:none}
  .foot a{--lc:var(--sun)}
  :is(.foot,.prose) a:not(.btn,.wm):hover::after{opacity:1;translate:calc(100% - .3em) 0}
}
/* Journal reading progress: a dot that travels as you read */
@supports (animation-timeline:view()) and (timeline-scope:--a){
  :root{timeline-scope:--bse-read}
  .prose{view-timeline:--bse-read block}
  body .prog i{opacity:0}
  body .prog::after{content:"";position:absolute;left:0;right:0;top:2px;height:10px;background:radial-gradient(circle at 5px 50%,var(--marigold) 4.5px,transparent 5px);animation:prog-dot linear both;animation-timeline:--bse-read;animation-range:contain 0% contain 100%}
  @keyframes prog-dot{to{translate:calc(100% - 10px) 0}}
}
@media (prefers-reduced-motion:reduce){
  .dots-loader,.dots-loader i{animation:none!important}
  .dots-loader i:not(.s){display:none}
  .dots-loader i.s{scale:1.35}
  .rv-dot,.wm-typing .d::before,.wm-typing .d::after{display:none}
  .dots-rule i{transition:none;opacity:1;translate:none}
  :is(.foot,.prose) a::after{transition:none}
  ::view-transition-new(root){animation:none}
}
/* /DOTS MOTION */
/* STORIES art frame: for photos without a smiling moment. The portrait sits as a tilted arch inside an
   abstract composition of the four family colours, so the moment reads as designed, not as a video still. */
.sv[data-frame=art]{--fc:var(--lav)}
.sv[data-frame=art] .shape{width:min(104%,58vh);aspect-ratio:1;translate:0 0;border-radius:42% 58% 63% 37%/41% 44% 56% 59%;background:radial-gradient(circle at 22% 24%,var(--lime) 0 22%,transparent 23%),radial-gradient(circle at 80% 30%,var(--blue) 0 15%,transparent 16%),radial-gradient(circle at 72% 82%,var(--mint) 0 24%,transparent 25%),conic-gradient(from 200deg,var(--lav),var(--blue),var(--mint),var(--lime),var(--lav));animation:art-drift 18s ease-in-out infinite alternate}
.sv[data-frame=art] .pic{border-radius:999px 999px 30px 30px;border:6px solid var(--paper);rotate:-2.5deg;max-width:72%;box-shadow:0 30px 70px -26px rgba(30,27,75,.75)}
.sv[data-frame=art] .tag{background:var(--paper);color:var(--ink)}
.sv[data-frame=art] .say p::before{color:var(--lime)}
@keyframes art-drift{to{border-radius:58% 42% 40% 60%/55% 38% 62% 45%;rotate:8deg}}
.tcard.art{background:radial-gradient(circle at 18% 16%,var(--lime) 0 17%,transparent 18%),radial-gradient(circle at 86% 26%,var(--blue) 0 11%,transparent 12%),radial-gradient(circle at 78% 62%,var(--mint) 0 20%,transparent 21%),conic-gradient(from 210deg at 50% 40%,var(--lav),var(--blue),var(--mint),var(--lime),var(--lav))}
.tcard.art img{inset:7% 17% auto;width:66%;height:54%;border-radius:999px 999px 22px 22px;border:5px solid var(--paper);rotate:-2.5deg;box-shadow:0 18px 40px -18px rgba(30,27,75,.7);filter:none}
.tcard.art .veil{background:linear-gradient(180deg,rgba(30,27,75,0) 52%,rgba(30,27,75,.88) 74%,var(--ink) 92%)}
.tcard.art .tag{background:var(--paper);color:var(--ink)}
.tcard.art:hover img{transform:scale(1.03)}
@media (prefers-reduced-motion:reduce){.sv[data-frame=art] .shape{animation:none}}
.tcard.art.wd img,#grid .tcard.art.wd img{left:50%;right:auto;translate:-50% 0;width:auto;height:58%;aspect-ratio:4/5;object-position:50% 38%!important}
.sv[data-frame=art] .tag{left:50%;translate:-50% 0;top:22px;max-width:calc(100% - 56px)}

/* PERF: instant feedback. Every tappable thing answers in the same frame: no double-tap wait, a press state on cards and chips.
   Uses the independent `scale` property so it never fights existing transform hovers or transitions. */
a,button,summary,label,[role=button],[data-story],[data-slug],[data-cv-open]{touch-action:manipulation}
.cx:active,.opt:active,.kv span:active,.aud .fit a:active{scale:.95}
.tcard:active,.jc:active,.ev a:active,.jr a:active,.off a:active,.lr-b:active,.cv-card:active,.fig[data-story]:active,.flip:active,.more:active,.cx[href]:active{scale:.98}
@media (prefers-reduced-motion:reduce){
  .cx:active,.opt:active,.kv span:active,.aud .fit a:active,.tcard:active,.jc:active,.ev a:active,.jr a:active,.off a:active,.lr-b:active,.cv-card:active,.fig[data-story]:active,.flip:active,.more:active{scale:none;opacity:.8}
}
/* PERF: long sections below the fold skip rendering until they come near the screen (Home; Coaching after #moments).
   Only on sections checked to have nothing poking outside their box, nothing sticky and no deep-link target after them
   (an estimated height above a #target would make the jump land in the wrong place, so the Journal hub is left out). */
.cva{content-visibility:auto;contain-intrinsic-size:auto 1100px}
@media (min-width:900px){.cva{contain-intrinsic-size:auto 800px}}