/* Healtheia site · one stylesheet
   Chrome and scene styles carried over from the motion page; content styles for the marketing
   sections; themes arrive as custom properties from the engine (applyPalette), so every colour
   here is a role, never a hex. The deco register lives in the rules: thin double lines, stepped
   diamonds, wide-tracked small caps, Poiret One for everything that speaks. */
:root{ --paper:#F4F1EA; --ink:#2B2B28; --main:#13563D; --accent1:#E9B62A; --accent2:#B7B1A5;
  --brand-green:#13563D; --brand-gold:#E9B62A; --brand-paper:#F4F1EA; --brand-ink:#2B2B28; --act:#13563D;
  --soft:rgba(43,43,40,.72); --line:rgba(43,43,40,.16); --glass:rgba(244,241,234,.86);
  --serif:"Poiret One","Cormorant Garamond",Georgia,serif; --sans:"Montserrat","Avenir Next","Segoe UI",system-ui,sans-serif; --mono:ui-monospace,"SF Mono",Menlo,Consolas,monospace; }
/* the accent is the brand emerald #13563D wherever the ground is light. On the graphite ground
   the brand green measures 1.6:1, invisible, so it is lifted to the darkest emerald that still
   reads there (#6DB38C, 5.7:1); on the emerald ground it needs the lighter #8CC1A4 (4.2:1). */
/* Poiret One has no comma-below Ț and ț. Those two letters come from Montserrat at weight 200, whose
   stroke is the closest match, so a Romanian title never falls back to a serif for one letter.
   Declared after the Google stylesheet, so this face wins for exactly that range. */
@font-face{font-family:"Poiret One";font-style:normal;font-weight:400;src:url("../assets/fonts/tcomma-light.woff2") format("woff2");unicode-range:U+021A-021B}
:root.theme-dark{--act:#6DB38C}
body[data-theme-name="emerald"]{--act:#8CC1A4}
*{margin:0;padding:0;box-sizing:border-box}
html.smooth{scroll-behavior:smooth} /* smooth only after load, so the browser's scroll restoration lands instantly instead of animating */
body{background:var(--paper);color:var(--ink);font-family:var(--sans);line-height:1.65;font-size:16.5px;transition:background 1.1s,color 1.1s;overflow-x:hidden}
::selection{background:var(--main);color:var(--paper)}
i,em,blockquote,q,cite,dfn,address{font-style:normal} /* no italics anywhere on the site */
a{color:inherit}
img,svg,video{max-width:100%}

/* ---------- the background: gradient blobs (JS-driven), veil, paper grain ---------- */
.bg{position:fixed;inset:0;z-index:0;overflow:hidden;background:var(--paper);pointer-events:none;transition:background 1.1s}
.bg .blob{position:absolute;border-radius:50%;filter:blur(60px);will-change:transform;opacity:calc(.75 * var(--bg-int,1));transition:opacity .8s}
.bg .b1{width:70vw;height:70vw;left:-18vw;top:-16vh;background:radial-gradient(circle at 40% 40%,color-mix(in srgb,var(--main) 40%,transparent),transparent 64%)}
.bg .b2{width:60vw;height:60vw;right:-16vw;top:22vh;background:radial-gradient(circle at 60% 50%,color-mix(in srgb,var(--accent1) 36%,transparent),transparent 64%)}
.bg .b3{width:55vw;height:55vw;left:22vw;bottom:-26vh;background:radial-gradient(circle at 50% 50%,color-mix(in srgb,var(--accent2) 42%,transparent),transparent 66%)}
.bg .veil{position:absolute;inset:0;background:linear-gradient(180deg,color-mix(in srgb,var(--ink) 4%,transparent),transparent 30%,transparent 70%,color-mix(in srgb,var(--ink) 7%,transparent))}
.bg .grain{position:absolute;inset:0 0 -80vh 0;opacity:calc(.16 * var(--bg-grain,1));mix-blend-mode:soft-light;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='260' height='260'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 .5 0 0 0 0 .5 0 0 0 0 .5 0 0 0 .9 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");transform:translate3d(0,calc(var(--sy,0) * var(--bg-par,1) * -.02px),0)}
body[data-bg="plain"] .bg .blob{display:none}
body.lite .bg .blob{filter:blur(60px);transform:none!important}
/* the blur is baked into a small canvas per blob (background.js): the element then only moves */
body.bg-baked .bg .blob{filter:none!important;background:none}
.bg .blob canvas{position:absolute;left:-22%;top:-22%;width:144%;height:144%;display:block}

/* ---------- the scene ---------- */
#gl{position:fixed;inset:0;width:100%;height:100%;display:block;z-index:1;pointer-events:none;opacity:0}
body.lite #gl{display:none}
/* the light version: rendered frames of the animation, one per chapter, fading with the scroll */
#stills{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:0;transition:opacity .8s ease}
body.lite.scene-on #stills{opacity:1}
#stills img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s ease}
#stills img.on{opacity:1}
/* the balanced version: no grain, the glass without its blur (its fill already carries the reading) */
body.mid .bg .grain{display:none}
body.mid .card,body.mid .fin-in,body.mid .fcard,body.mid .answer,body.mid .tabpane.season,body.mid .split .side,body.mid .switch{backdrop-filter:none}
body.mid #markglass{backdrop-filter:none;background:color-mix(in srgb,var(--paper) 84%,transparent)}

/* ---------- header ---------- */
.top{position:fixed;top:0;left:0;right:0;z-index:40;display:flex;align-items:center;justify-content:flex-start;gap:14px;padding:14px 24px;pointer-events:none}
.top::before{content:"";position:absolute;inset:0 0 -18px;background:linear-gradient(180deg,color-mix(in srgb,var(--paper) 66%,transparent),color-mix(in srgb,var(--paper) 30%,transparent) 62%,transparent);pointer-events:none;transition:background 1.1s}
.top>*{pointer-events:auto;position:relative}
/* the lockup docks in the middle of the masthead: menu on the left, components on the right */
#logo-slot-head{position:absolute;left:50%;top:0;transform:translateX(-50%);width:220px;height:100%;flex:none;pointer-events:none}
/* the contoured glass button (reference: dark buttons, fine gold rim with a travelling shine).
   Interior: transparent glass. Rim: a conic gold gradient whose bright spot moves around the
   edge. Nav items reveal the whole component left → right on hover; .keep holds it always.
   Every top-bar component is round: the stadium for the buttons, 8px corners for the flags. */
.glare{position:relative;isolation:isolate;border-radius:var(--gr,999px)}
/* the rim is a real element (site.js dresses every .glare as it appears): a masked ring holding
   an oversized square with the conic gradient, turned by a compositor transform. Animating the
   gradient's angle restyled every button on every frame, hidden ones included. */
.glare>.rim{position:absolute;inset:0;border-radius:inherit;z-index:-3;padding:var(--rim,1.3px);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.glare>.rim>i{position:absolute;left:50%;top:50%;width:200%;aspect-ratio:1;
  background:conic-gradient(from 0deg,rgba(233,182,42,.10),#C9A227 9%,#FFF3D6 17%,rgba(233,182,42,.55) 30%,rgba(201,162,39,.14) 48%,#E9B62A 63%,#FFF6DF 72%,rgba(233,182,42,.22) 84%,rgba(233,182,42,.10));
  transform:translate(-50%,-50%) rotate(0deg);will-change:transform;animation:dashine 7s linear infinite}
.glare::after{content:"";position:absolute;inset:1.2px;border-radius:inherit;z-index:-2;background:color-mix(in srgb,var(--paper) 22%,transparent);backdrop-filter:blur(9px)}
/* in the masthead the glass is always locked in, so whatever scrolls behind is blurred, never overlapping */
.top .glare::after{clip-path:inset(0 0 0 0 round var(--gr,999px));background:color-mix(in srgb,var(--paper) 26%,transparent);backdrop-filter:blur(13px) saturate(1.05)}
@keyframes dashine{to{transform:translate(-50%,-50%) rotate(360deg)}}
/* pills the bar is not showing do not turn */
#toc:not(:hover):not(.open) .tt.glare>.rim>i,#mnav[hidden] .rim>i{animation-play-state:paused}
.glare>.rim,.glare::after{clip-path:inset(0 100% 0 0 round var(--gr,999px));transition:clip-path .42s ease}
.glare:hover::before,.glare:hover::after,.glare.lit::before,.glare.lit::after,.glare.keep::before,.glare.keep::after{clip-path:inset(0 0 0 0 round var(--gr,999px))}
.glare:hover,.glare.lit{color:var(--ink)!important;filter:none!important;opacity:1!important}
.glare:hover::before{animation-duration:3.2s;filter:brightness(1.18)}
/* the flag, flat and softly blurred, stretching the whole interior; revealed left → right on hover */
.glare .fbg{position:absolute;inset:1.4px;border-radius:inherit;z-index:-1;background-size:cover;background-position:center;filter:blur(1.6px) saturate(.88);opacity:0;clip-path:inset(0 100% 0 0 round var(--gr,999px));transition:clip-path .45s ease,opacity .3s}
.glare:hover .fbg,.glare .fbg.show{opacity:.9;clip-path:inset(0 0 0 0 round var(--gr,999px))}
.fbg[data-flag="en"]{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 60 36'><rect width='60' height='36' fill='%23012169'/><path d='M0 0 60 36M60 0 0 36' stroke='%23ffffff' stroke-width='7'/><path d='M0 0 60 36M60 0 0 36' stroke='%23C8102E' stroke-width='3'/><rect x='25' width='10' height='36' fill='%23ffffff'/><rect y='13' width='60' height='10' fill='%23ffffff'/><rect x='27' width='6' height='36' fill='%23C8102E'/><rect y='15' width='60' height='6' fill='%23C8102E'/></svg>")}
.fbg[data-flag="ro"]{background-image:linear-gradient(90deg,#002B7F 0 33.4%,#FCD116 33.4% 66.7%,#CE1126 66.7% 100%)}
nav.main{display:flex;align-items:center;gap:9px}
nav.main a{text-decoration:none;font-family:var(--serif);font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;white-space:nowrap;padding:7px 15px 6px;color:var(--soft);opacity:.8;filter:blur(.5px);transition:color .25s,filter .25s,opacity .25s}
nav.main a:hover{opacity:1}
nav.main .sep{color:var(--accent2);font-size:13px;line-height:1}
.partners-link{display:inline-flex;align-items:center;gap:7px;font-family:var(--serif);font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--main)!important;opacity:.9;filter:blur(.4px);padding:7px 15px 6px;transition:filter .25s,opacity .25s}
.partners-link:hover{opacity:1}
.partners-link .dmnd{width:9px;height:9px;flex:none}
.join-link{font-family:var(--serif);font-size:13.5px;letter-spacing:.14em;text-transform:uppercase;text-decoration:none;padding:8px 26px 7px;color:var(--ink)!important;opacity:.95;transition:opacity .25s}
.join-link:hover{opacity:1}
.top-right{display:flex;gap:16px;align-items:center;margin-left:auto}
/* language: flag-ratio components — the trigger and every dropdown row share one size */
.lang-select{position:relative}
.lang-select .glare{--gr:8px}
.lang-btn,.lang-menu button{display:flex;align-items:center;justify-content:center;width:78px;height:40px;border:none;background:none;color:var(--ink);padding:0;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.2em}
.lang-btn .code,.lang-menu .code{position:relative;text-shadow:0 0 6px color-mix(in srgb,var(--paper) 80%,transparent),0 1px 3px color-mix(in srgb,var(--paper) 70%,transparent)}
.lang-btn .car{position:absolute;right:8px;font-size:9px;color:var(--soft);opacity:0;transform:translateX(-4px);transition:opacity .25s,transform .25s}
.lang-btn:hover .car,.lang-select.open .car{opacity:1;transform:none}
.lang-menu{position:absolute;right:0;top:calc(100% + 10px);display:none;flex-direction:column;gap:8px;z-index:50}
.lang-select.open .lang-menu{display:flex}
.lang-menu button.on .code{color:var(--main)}
.lang-menu button.on .fbg{opacity:.45;clip-path:inset(0 0 0 0 round var(--gr,999px))} /* the language you are in keeps its flag */
/* the partners menu carries four chapters; under 1280 the last steps aside so the docked
   mark never has to share its centre */
@media (max-width:1280px){body[data-page="partners"] nav.main a:nth-of-type(4),
  body[data-page="partners"] nav.main .sep:nth-of-type(3){display:none}}
/* tighter still: the third chapter steps aside too, before the menu reaches the mark.
   :last-of-type cannot be used here: the fourth item is already display:none but is
   still the last element of its type. */
@media (max-width:1040px){nav.main a:nth-of-type(3),nav.main .sep:nth-of-type(2){display:none}}
@media (max-width:900px){nav.main{display:none}}
/* the ☰ button and the menu behind it: phone only */
#mnav-btn{display:none;width:40px;height:40px;padding:0;border:none;background:none;cursor:pointer;flex-direction:column;align-items:center;justify-content:center;gap:5px;color:var(--ink)}
#mnav-btn span{display:block;width:16px;height:1.5px;background:currentColor;border-radius:2px;transition:transform .3s,opacity .3s}
body.menu-open #mnav-btn span:nth-child(1){transform:translateY(6.5px) rotate(45deg)}
body.menu-open #mnav-btn span:nth-child(2){opacity:0}
body.menu-open #mnav-btn span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)}
#mnav{position:fixed;inset:0;z-index:45;display:flex;flex-direction:column;padding:84px 24px 22px;overflow:hidden;
  background:color-mix(in srgb,var(--paper) 90%,transparent);backdrop-filter:blur(22px) saturate(1.05);animation:fadein .28s ease}
#mnav[hidden]{display:none}
#mnav .x{position:absolute;top:14px;right:14px;width:40px;height:40px;border:none;background:none;color:var(--ink);font-size:28px;line-height:1;cursor:pointer}
#mnav .mlist{display:flex;flex-direction:column;gap:2px;flex:1 1 auto;min-height:0;overflow:auto;padding-bottom:10px;scrollbar-width:none} /* the list scrolls; the foot stays */
#mnav .mlist::-webkit-scrollbar{display:none}
#mnav .me{display:flex;align-items:center;gap:12px;text-align:left;border:none;background:none;cursor:pointer;color:var(--ink);font-family:var(--serif);font-size:23px;letter-spacing:.05em;padding:10px 4px;border-bottom:1px solid var(--line)}
#mnav .me.sub{font-size:16px;letter-spacing:.06em;color:var(--soft);padding:5px 4px 5px 34px;border-bottom:none}
#mnav .me .ti{width:24px;height:14px}
#mnav .me.sub .ti{width:16px;height:10px}
#mnav .me.on{color:var(--main)}
#mnav .me.on .ti{color:var(--main);opacity:1}
#mnav .mfoot{flex:none;margin-top:0;padding-top:14px;border-top:1px solid var(--line);display:flex;align-items:center;gap:12px;flex-wrap:wrap}
/* the versions, always in reach: three small components in the flags' shape */
#mnav .mset{display:flex;align-items:center;gap:8px;width:100%;margin-bottom:6px}
#mnav .mlab{flex:none;font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);font-weight:600;margin-right:2px}
#mnav .mtop{position:absolute;top:14px;left:20px;z-index:2}
#mnav .mtop .lang-menu{left:0;right:auto}
/* closed, the face wears its flag in full colour, so the language reads at a glance */
#mnav .mtop .lang-select:not(.open) .lang-btn .fbg{opacity:1;clip-path:inset(0 0 0 0 round var(--gr,999px));filter:saturate(1.05)}
#mnav .mtop .lang-select:not(.open) .lang-btn .car{opacity:1;transform:none}
/* the "more" cue: sticky at the list's lower edge, over a soft fade, breathing while there is more */
#mnav .mmore{position:sticky;bottom:-10px;flex:none;display:flex;justify-content:center;align-items:flex-end;height:44px;margin-top:-30px;pointer-events:none;
  background:linear-gradient(to top,color-mix(in srgb,var(--paper) 92%,transparent) 30%,transparent);opacity:0;transition:opacity .3s}
#mnav .mmore svg{width:18px;height:11px;overflow:visible;margin-bottom:6px;animation:cue 2.4s ease-in-out infinite}
#mnav .mmore path{stroke:var(--main);stroke-width:1.6;fill:none;stroke-linecap:round;stroke-linejoin:round}
#mnav .mlist.more .mmore{opacity:1}
#mnav .mcross,#mnav .mcta{width:100%;display:flex;justify-content:center;margin:0}
#mnav .mv{--gr:8px;flex:1;height:40px;border:none;background:none;color:var(--soft);font-family:var(--sans);font-size:11px;letter-spacing:.14em;text-transform:uppercase;cursor:pointer;padding:0}
#mnav .mv.on{color:var(--main)}
/* the same components as the top bar: glass locked in, contour on the CTA, flags on the languages */
#mnav .glare::after{clip-path:inset(0 0 0 0 round var(--gr,999px));background:color-mix(in srgb,var(--paper) 26%,transparent);backdrop-filter:blur(13px) saturate(1.05)}
#mnav .mlang{display:flex;gap:8px}
#mnav .ml{--gr:8px;display:flex;align-items:center;justify-content:center;width:78px;height:40px;border:none;background:none;color:var(--ink);padding:0;cursor:pointer;font-family:var(--mono);font-size:12px;letter-spacing:.2em}
#mnav .ml .code{position:relative;text-shadow:0 0 6px color-mix(in srgb,var(--paper) 80%,transparent),0 1px 3px color-mix(in srgb,var(--paper) 70%,transparent)}
#mnav .ml.on .code{color:var(--main)}
#mnav .ml.on .fbg{opacity:.45;clip-path:inset(0 0 0 0 round var(--gr,999px))}
#mnav .partners-link{font-size:15px;padding:11px 20px 10px;filter:none;opacity:1}
#mnav .partners-link .dmnd{width:10px;height:10px}
#mnav .mcta{margin-left:auto}
#mnav .join-link{font-size:14px;padding:11px 26px 10px}
/* the stepper: chapter x of n, and the way up and down, in the corner */
#stepper{display:none;position:fixed;right:10px;bottom:10px;z-index:36;--gr:999px;flex-direction:row;align-items:center;padding:3px 4px;color:var(--ink)}
#stepper .n{font-family:var(--mono);font-size:11.5px;letter-spacing:.08em;color:var(--soft);padding:0 6px;white-space:nowrap}
#stepper button{width:50px;height:46px;border:none;background:none;color:var(--ink);cursor:pointer;display:flex;align-items:center;justify-content:center}
#stepper svg{width:20px;height:12px;overflow:visible}
#stepper path{stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
#stepper button:active{color:var(--main)}


/* ---------- the flying lockup: sphere + name + tagline, hero → top bar ---------- */
/* the mark's own canvas: full viewport, so a puzzle piece can fly from a separator to the bar */
/* the mark's layers: a glass plate, then the dots, then the name. Page content sits below all
   three (z-index 10 is `main`), the header chrome above the dots, so a huge hero mark never
   paints over the menu. */
#markglass{position:fixed;left:0;top:0;z-index:20;pointer-events:none;border-radius:50%;opacity:0;
  background:color-mix(in srgb,var(--paper) 30%,transparent);backdrop-filter:blur(14px) saturate(1.05);
  -webkit-mask-image:radial-gradient(circle,#000 58%,rgba(0,0,0,.55) 74%,transparent 88%);
  mask-image:radial-gradient(circle,#000 58%,rgba(0,0,0,.55) 74%,transparent 88%);
  transition:opacity .5s ease}
#markfx{position:fixed;inset:0;width:100%;height:100%;z-index:22;pointer-events:none;display:block}
.brand-fly{position:fixed;left:0;top:0;z-index:41;display:inline-block;text-decoration:none;will-change:transform;pointer-events:auto;opacity:0;transition:opacity .6s ease}
.brand-fly.on{opacity:1}
.brand-text{display:block;transform-origin:center center;position:relative}
/* inline-block so the measured box is the real box: the fly centres the mark on it exactly */
.wordmark{display:inline-block;font-family:var(--serif);letter-spacing:.07em;color:var(--ink);font-weight:400;line-height:1;transition:color 1.1s;white-space:nowrap;text-shadow:0 2px 26px color-mix(in srgb,var(--paper) 70%,transparent)}
/* the letters of the reading that is speaking carry the brand green; --act is the emerald,
   lifted to #8CC1A4 on a dark ground, so the accent reads on parchment, graphite and emerald */
.wordmark .wm-acc{color:var(--act);font-weight:600;font-style:normal;transition:color 1.1s}
.wordmark.pop .wm-acc{display:inline-block;animation:wmpop .55s ease}
@keyframes wmpop{0%{transform:scale(1)}35%{transform:scale(1.07)}100%{transform:scale(1)}}
.brand-tag{position:absolute;left:0;top:100%;margin-top:.7em;font-family:var(--sans);letter-spacing:.33em;text-transform:uppercase;color:var(--soft);white-space:nowrap;transition:color 1.1s}

/* ---------- the contents bar: lines that become components ----------
   A quiet column of lines on the right edge; on hover each chapter name arrives as its own
   glass component in the buttons' bezel (the gold contour, the frosted interior), wiped in
   from its line outward, one after another. Chapters of the scene are the smaller ones. */
#toc{position:fixed;right:10px;top:50%;transform:translateY(-50%);z-index:35;display:flex;flex-direction:column;gap:6px;align-items:flex-end;padding:10px 6px;max-height:82vh;overflow:hidden auto;scrollbar-width:none}
#toc::-webkit-scrollbar{display:none}
.toc-e{display:flex;align-items:center;flex-direction:row-reverse;gap:10px;border:none;background:transparent;cursor:pointer;padding:1px 4px;color:var(--soft)}
.toc-e .tl{display:block;width:18px;height:2px;background:var(--soft);opacity:.55;border-radius:2px;transition:width .3s,background .3s,opacity .3s;flex:none}
.toc-e.sub .tl{width:9px;height:1.5px}
/* the animation and its chapters carry its icon instead of a line; the chapters step to the right */
.ti{display:block;width:20px;height:12px;flex:none;color:var(--soft);opacity:.62;transition:color .3s,opacity .3s,transform .3s}
.ti svg{display:block;width:100%;height:100%;overflow:visible}
.ti path{stroke:currentColor;stroke-width:1.4;fill:none;stroke-linecap:round;stroke-linejoin:round}
.toc-e.sub .ti{width:14px;height:9px;opacity:.5}
.toc-e.sub{margin-right:-6px}
.toc-e.on .ti,.toc-e:hover .ti{color:var(--main);opacity:1}
.toc-e.on .ti{transform:scale(1.15)}
.toc-e .tt{font-family:var(--serif);font-size:14px;letter-spacing:.05em;white-space:nowrap;color:var(--ink);padding:7px 16px 6px;
  opacity:0;visibility:hidden;transform:translateX(10px);pointer-events:none;
  transition:opacity .28s ease,transform .32s ease,visibility 0s linear .32s}
.toc-e.sub .tt{color:var(--soft)}
/* the component wipes in from the line's side, so the contour arrives with the word */
#toc .tt.glare>.rim,#toc .tt.glare::after{clip-path:inset(0 0 0 100% round 999px);transition:clip-path .38s ease}
#toc .tt.glare::after{background:color-mix(in srgb,var(--paper) 42%,transparent);backdrop-filter:blur(12px) saturate(1.05)}
#toc:hover .toc-e .tt,#toc.open .toc-e .tt{opacity:1;visibility:visible;transform:none;pointer-events:auto;transition-delay:calc(var(--i,0) * 22ms)}
#toc:hover .tt.glare>.rim,#toc:hover .tt.glare::after,#toc.open .tt.glare>.rim,#toc.open .tt.glare::after{clip-path:inset(0 0 0 0 round 999px);transition-delay:calc(var(--i,0) * 22ms + 40ms)}
.toc-e.on .tl{width:30px;background:var(--main);opacity:1}
.toc-e.sub.on .tl{width:20px}
.toc-e:hover .tl{background:var(--main);opacity:1}
.toc-e.on .tt{color:var(--main)}
.toc-e .tt.glare:hover{color:var(--main)!important} /* the component keeps its voice under the pointer */
.toc-arr{border:none;background:none;color:var(--soft);cursor:pointer;padding:8px 9px;align-self:flex-end}
.toc-arr svg{width:24px;height:14px;display:block}
.toc-arr:hover{color:var(--main)}
/* partners is the main page mirrored: the bar stands on the left and its components open rightward */
body[data-page="partners"] #toc{left:10px;right:auto;align-items:flex-start}
body[data-page="partners"] .toc-e{flex-direction:row}
body[data-page="partners"] .toc-e .tt{transform:translateX(-10px)}
body[data-page="partners"] #toc .tt.glare>.rim,body[data-page="partners"] #toc .tt.glare::after{clip-path:inset(0 100% 0 0 round 999px)}
body[data-page="partners"] #toc:hover .tt.glare>.rim,body[data-page="partners"] #toc:hover .tt.glare::after,body[data-page="partners"] #toc.open .tt.glare>.rim,body[data-page="partners"] #toc.open .tt.glare::after{clip-path:inset(0 0 0 0 round 999px)}
body[data-page="partners"] .toc-arr{align-self:flex-start}
body[data-page="partners"] .toc-e.sub{margin-right:0;margin-left:14px}
/* and the chapter cards keep the wide margin on the bar's side, as the main page does on its right */
body[data-page="partners"] #scene-sections .ch .card{margin-left:clamp(60px,15vw,250px);margin-right:0}
body[data-page="partners"] #scene-sections .ch:nth-of-type(even) .card{margin-left:auto;margin-right:clamp(0px,5vw,70px)}
@media (max-width:900px){#toc{display:none}}

/* ---------- ☰ configuration (preserved) ---------- */
#cfggear{position:fixed;left:14px;bottom:14px;z-index:36;width:42px;height:42px;border-radius:50%;border:1px solid var(--line);background:var(--glass);color:var(--soft);cursor:pointer;font-size:16px;backdrop-filter:blur(6px)}
#cfg{position:fixed;left:14px;bottom:64px;z-index:35;background:var(--glass);border:1px solid var(--line);border-radius:14px;padding:12px 14px;backdrop-filter:blur(8px);width:276px;display:none;max-height:76vh;overflow-y:auto}
#cfg.open{display:block}
#cfg h5{font-family:var(--serif);font-weight:500;font-size:17px;color:var(--ink);margin:2px 0 6px}
#cfg h6{font-family:var(--mono);font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);margin:12px 0 4px}
#cfg .row{display:flex;align-items:center;gap:8px;margin:6px 0}
#cfg label{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);width:92px;flex:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#cfg input[type=range]{flex:1;accent-color:var(--main);min-width:0}
#cfg .row.multi{flex-direction:column;align-items:stretch} #cfg .checks{display:grid;grid-template-columns:1fr 1fr;gap:2px 8px;margin-top:4px} #cfg .checks label{display:flex;gap:6px;align-items:center;font-size:11px;letter-spacing:0;text-transform:none;cursor:pointer;width:auto} #cfg .checks input{accent-color:var(--main)}
#cfg input[type=color]{width:34px;height:26px;border:1px solid var(--line);border-radius:6px;background:transparent;padding:0}
#cfg input[type=text]{flex:1;min-width:0;font:inherit;font-size:12px;padding:3px 6px;border:1px solid currentColor;border-radius:6px;background:transparent;color:inherit;opacity:.85}
#cfg .val{font-family:var(--mono);font-size:10px;color:var(--soft);width:34px;text-align:right}
#cfg select{flex:1;background:transparent;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:4px 6px;font-family:var(--sans);font-size:12px}
#cfg .hint{font-size:11px;color:var(--soft)}
#cfg .mkrow{display:flex;gap:6px;margin-top:6px}
#cfg .mkrow button{border:1px solid var(--line);background:transparent;color:var(--ink);border-radius:999px;padding:5px 11px;font-size:12px;cursor:pointer;font-family:var(--sans)}

/* ---------- floating labels (quiet by default on the site) ---------- */
.flabel{position:fixed;z-index:20;left:-9999px;top:-9999px;opacity:0;pointer-events:none;font-family:var(--sans);font-size:11.5px;color:var(--ink);background:var(--glass);border:1px solid var(--main);border-radius:999px;padding:4px 11px;transform:translate(-8px,-50%);white-space:nowrap;transition:opacity .35s;backdrop-filter:blur(6px)}
.flabel em{font-style:normal;color:var(--soft);margin-left:6px}
.flabel.acc{border-color:var(--accent1)}
.flabel.src{border:1px solid var(--main)}
.flabel.hit{pointer-events:none;cursor:pointer;width:36px;height:36px;padding:0;border:1px solid rgba(128,128,128,.28);border-radius:50%;background:transparent;box-shadow:none;transform:translate(-50%,-50%);transition:border-color .2s}
.flabel.hit:hover{border-color:var(--accent1)}

/* the pull (js/pull.js): a chapter card stretches toward where it came from as you scroll, a hair of light along that edge */
.card .rim-line{position:absolute;left:14px;right:14px;height:1.5px;border-radius:2px;opacity:0;pointer-events:none;background:linear-gradient(90deg,transparent,var(--main) 30%,#FFF3D6 50%,var(--main) 70%,transparent)}

/* ---------- scene sections & cards (from the motion page) ---------- */
main{position:relative;z-index:10}
#scene-sections .ch{min-height:160vh;display:flex;align-items:flex-start;padding:26vh 24px 0}
#scene-sections .ch.tall{min-height:200vh}
/* the chapter cards' size, adjustable here: width, text and heading grow with the screen on a desk;
   the phone block sets its own */
:root{--card-w:clamp(480px,36vw,760px);--card-fs:clamp(15.5px,.45vw + .5vh + 8px,22px);--card-h2:clamp(27px,1.3vw + 1.5vh + 10px,48px);--card-pad:clamp(24px,1.4vw + .8vh,40px)}
.card{max-width:var(--card-w);margin-left:clamp(0px,5vw,70px);background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:var(--card-pad) calc(var(--card-pad) + 2px);backdrop-filter:blur(8px);position:sticky;top:21vh} /* clear of the docked mark */
.card .act{display:inline-block;margin-top:14px;border:1px solid currentColor;background:transparent;color:inherit;border-radius:999px;padding:6px 14px;font:inherit;font-size:13px;cursor:pointer;opacity:.8} .card .act:hover{opacity:1}
#scene-sections .ch:nth-of-type(even) .card{margin-left:auto;margin-right:clamp(60px,14vw,240px)}
#scene-sections .ch .card.side-right{margin-left:auto;margin-right:clamp(60px,14vw,240px)} #scene-sections .ch .card.side-left{margin-left:clamp(0px,5vw,70px);margin-right:0}
.card .nav{position:absolute;top:12px;right:12px;display:flex;gap:6px}
.card .nav button{font:inherit;font-size:18px;line-height:1;width:28px;height:28px;border-radius:50%;border:1px solid currentColor;background:transparent;color:inherit;cursor:pointer;opacity:.6;padding:0 0 3px}
.card .nav button:hover{opacity:1}
.k{font-family:var(--mono);font-size:10.5px;letter-spacing:.24em;text-transform:uppercase;color:var(--main);display:block;margin-bottom:12px}
.card h2{font-family:var(--serif);font-weight:700;font-size:var(--card-h2);letter-spacing:.05em;line-height:1.1;color:var(--ink);text-wrap:balance;transition:color .4s}
.card h2::after{content:"";display:block;width:36px;height:2px;background:var(--main);margin-top:12px}
.card p{margin-top:12px;color:var(--soft);font-size:var(--card-fs)}
/* the words the chapter turns on read in the accent (beats the generic .sec p b below) */
.sec .card p b,.sec .card p strong,.sec .fin-in p b,.sec .fin-in p strong,.sec .card .meaning b{color:var(--brand-gold);font-weight:600}
.card .meaning{max-height:0;overflow:hidden;transition:max-height .5s ease,margin .5s;margin-top:0;font-size:calc(var(--card-fs) - 2.5px);color:var(--soft);border-top:1px dashed var(--line);padding-top:0}
.card:hover .meaning,.card.open .meaning{max-height:170px;margin-top:14px;padding-top:10px}
.fin{min-height:110vh;display:flex;align-items:center;justify-content:center;text-align:center;padding:0 24px}
.fin-in{max-width:640px;background:var(--glass);border:1px solid var(--line);border-radius:22px;padding:44px 34px;backdrop-filter:blur(8px)}
.fin h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.4vw,46px);color:var(--ink)}
.fin p{color:var(--soft);margin:16px auto 26px;max-width:56ch}

/* ---------- content sections ---------- */
.sec{position:relative;z-index:10;padding:clamp(70px,12vh,130px) 24px}
.wrap{max-width:1060px;margin:0 auto}
/* slides: after the animation every section is one screen the scroll snaps to and stops at; its
   wrap is fitted to the free height and width by js/slides.js (the zoom below) */
html{scroll-snap-type:y proximity}
.slide{min-height:100vh;min-height:100svh;display:flex;flex-direction:column;justify-content:center;box-sizing:border-box;
  padding:clamp(96px,16vh,180px) 24px clamp(36px,6vh,72px);scroll-snap-align:start;scroll-snap-stop:always}
.slide>.wrap{width:100%;zoom:var(--k,1)}
.finale.snap,.hero.snap{scroll-snap-align:start}
@media (min-width:1200px){
  /* on a wide screen the tall sections use the width: the principles beside their screen, the two
     portal pairs side by side, the depth's text beside its stills */
  #trust .wrap{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.35fr);gap:20px 48px;align-items:center}
  #trust h2,#trust .shot-note{grid-column:1/-1}
  #trust .trust{grid-template-columns:1fr 1fr;margin-top:0}
  #trust .shot-one{margin-top:0}
  #portal .wrap{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;align-items:start}
  #portal h2,#portal .wrap>p{grid-column:1/-1}
  #portal .wrap>p.lead{grid-column:1}#portal .wrap>p.lead+p{grid-column:2}   /* the two introductions side by side */
  #portal .pair{grid-template-columns:1fr;gap:16px;margin-top:10px}
  #portal .pair .shot{order:-1}
  #depth .panel{display:grid;grid-template-columns:minmax(0,.75fr) minmax(0,1.45fr);gap:14px 44px;align-items:center}
  #depth .panel>h2,#depth .panel>p,#depth .panel>.switch{grid-column:1}
  #depth .panel>.switch{margin-left:0;flex-wrap:nowrap;max-width:none}
  #depth .panel>.switch button{font-size:12.5px;padding:9px 14px;white-space:nowrap}   /* one row in the narrow column */
  #depth #depth-box{grid-column:2;grid-row:1/span 3}
}
.wrap.narrow{max-width:760px}
.kick{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--main);display:block;margin-bottom:16px}
.sec h2{font-family:var(--serif);font-weight:500;font-size:clamp(30px,4.6vw,48px);line-height:1.1;color:var(--ink);text-wrap:balance;transition:color 1.1s}
.sec h3{font-family:var(--sans);font-weight:600;font-size:clamp(17px,2.1vw,21px);line-height:1.35;color:var(--ink)}
.sec p{color:var(--soft);margin-top:14px;max-width:64ch}
.sec p b,.sec p strong{color:var(--ink);font-weight:600}
/* partners: the section headings are short names, so the keywords carry each section's point.
   They read in the theme's main colour: gold on graphite, emerald on parchment; the cards keep
   their gold and the inverted panel keeps paper. */
body[data-page="partners"] .sec p b,body[data-page="partners"] .sec p strong{color:var(--main)}
body[data-page="partners"] .sec .card p b,body[data-page="partners"] .sec .fin-in p b{color:var(--brand-gold)}
body[data-page="partners"] .panel p b,body[data-page="partners"] .panel p strong{color:var(--paper)}
.lead{font-size:18px}
.center{text-align:center} .center p{margin-left:auto;margin-right:auto}

/* ---------- hero ----------
   The copy stands against the page gutter, so its left edge is the left edge of the first
   menu button above it, at every width. Nothing sits behind the words: where the mark reaches
   them, js/logo.js fades its dots around each block of copy instead. The mark is on its own
   fixed canvas. */
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3.4vw,50px);letter-spacing:.05em;line-height:1.12;color:var(--ink);margin-top:6px;transition:color 1.1s;text-wrap:balance}
/* the floor is reserved for the cue, so the copy never reaches it on a short screen */
.hero{min-height:96vh;display:flex;align-items:center;position:relative;
  padding:104px 24px clamp(104px,16vh,180px)}
.hero .wrap.hero-grid{width:100%;max-width:none;position:relative}
body[data-hero-mark="big"] .hero-grid{display:block}
/* the partners hero is the main one, mirrored: copy on the right, mark entering from the left */
body[data-hero-mirror="1"] .hero-left{margin-left:auto;text-align:right}
body[data-hero-mirror="1"] #logo-slot-hero{margin-left:auto}
.hero-left{width:min(580px,46vw);position:relative;z-index:2;display:flex;flex-direction:column;align-items:flex-start}
body[data-hero-mirror="1"] .hero-left{align-items:flex-end}
.hero-left>*{max-width:100%}
.hero-left h1{margin-top:34px}
.hero-left .hero-sum{margin-top:18px}
/* the line: at its size, one line that leaves the copy column and runs across the screen,
   tracked a little wider. The mark's dots part around it (js/logo.js). Anchored to the gutter,
   so mirrored it grows leftward. Narrow screens let it wrap again. */
@media (min-width:1000px){
  .hero-left h1{white-space:nowrap;width:max-content;max-width:calc(100vw - 48px);letter-spacing:.085em;text-wrap:initial}
}
/* js/logo.js sizes this slot to the lockup it holds */
#logo-slot-hero{align-self:flex-start}
body[data-hero-mirror="1"] #logo-slot-hero{align-self:flex-end}
/* only the old, small-mark layout sizes the hero slot itself */
body[data-page="partners"]:not([data-hero-mark="big"]) #logo-slot-hero{width:min(300px,56vw);height:min(300px,56vw);margin:0 0 74px}
.hero-sum{font-size:clamp(15px,1.7vw,20px)}
@media (max-width:860px){.hero-left{width:auto;max-width:none;margin-top:24vh}}
.hero p{margin-top:16px}
/* the cue belongs to the whole hero, centred on its floor */
.hero .scroll-cue{position:absolute;left:50%;bottom:clamp(20px,4.5vh,52px);transform:translateX(-50%);
  align-items:center;margin-top:0;z-index:3}
.scroll-cue{display:inline-flex;flex-direction:column;align-items:center;gap:10px;margin-top:44px;text-decoration:none;color:var(--soft);font-size:11.5px;letter-spacing:.22em;text-transform:uppercase;transition:color .3s}
.scroll-cue:hover{color:var(--main)}
.scroll-cue svg{width:22px;height:26px;overflow:visible}
.scroll-cue path{stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.scroll-cue path:nth-child(1){animation:cue 2.1s ease-in-out infinite}
.scroll-cue path:nth-child(2){animation:cue 2.1s ease-in-out .28s infinite}
/* the animation's first frame: a title screen where the scene starts */
#how,#record{padding-top:0}
.scene-lead{min-height:58vh;display:flex;align-items:center;padding:0 24px;scroll-snap-align:start}
#scene-sections .ch:first-child{padding-top:9vh}   /* the first card shows under the title, on the same screen */
.scene-lead .wrap{width:100%;max-width:none;margin:0}
/* the title stands in the cards' column, with the wordmark's soft shadow, so it reads over the scene */
.scene-lead h2{font-size:clamp(34px,5.2vw,62px);font-weight:400;letter-spacing:.04em;max-width:13ch;color:var(--ink);margin-left:clamp(0px,5vw,70px);text-shadow:0 2px 28px color-mix(in srgb,var(--paper) 85%,transparent),0 0 12px color-mix(in srgb,var(--paper) 70%,transparent)}
/* the way past the animation: the hero's cue, fixed on the floor while the scene holds the screen */
.scene-skip{position:fixed;left:50%;bottom:clamp(16px,3vh,28px);transform:translateX(-50%);z-index:34;margin-top:0;text-align:center;white-space:nowrap;opacity:0;visibility:hidden;transition:opacity .45s ease,visibility 0s linear .45s}
body.scene-on .scene-skip{opacity:1;visibility:visible;transition:opacity .45s ease}
body.menu-open .scene-skip{opacity:0}
@keyframes cue{0%,100%{opacity:.25;transform:translateY(0)}45%{opacity:1;transform:translateY(6px)}}
@media (max-width:900px){.hero{padding-top:130px}}

/* the living hero labels: a thin line grows out of a dot on the globe and names what arrives —
   data (silver) · events (gold) · actions (emerald, lifted on dark) — tracking the dot live */
.hlabel{position:fixed;left:0;top:0;z-index:39;pointer-events:none;font-family:var(--mono);font-size:10.5px;letter-spacing:.16em;text-transform:uppercase;white-space:nowrap;opacity:0;transition:opacity .55s ease}
.hline{position:fixed;left:0;top:0;z-index:38;height:1px;background:currentColor;transform-origin:left center;pointer-events:none;opacity:0;transition:opacity .55s ease}
.hlabel.on,.hline.on{opacity:.92}
.hlabel .hcat{opacity:.5} /* the category stands faded on the left of each label */
.hlabel.lg-data,.hline.lg-data{color:var(--accent2)}
.hlabel.lg-ev,.hline.lg-ev{color:var(--brand-gold)}
.hlabel.lg-act,.hline.lg-act{color:var(--act)}

/* buttons */
.btn{display:inline-block;background:var(--main);color:var(--paper);border:none;border-radius:999px;padding:13px 28px;font-weight:700;font-size:14.5px;cursor:pointer;font-family:var(--sans);text-decoration:none;letter-spacing:.02em}
.btn:hover{filter:brightness(1.08)}
.btn:focus-visible{outline:2px solid var(--accent1);outline-offset:3px}
.btn.ghost{background:transparent;color:var(--ink);border:1px solid var(--line)}
.btn.ghost:hover{border-color:var(--main);filter:none}

/* the separator: a long, clear rule; four of them carry a waiting puzzle piece at the centre */
.deco-sep{position:relative;display:flex;align-items:center;justify-content:center;color:var(--accent2);padding:34px 0}
.deco-sep::before,.deco-sep::after{content:"";height:1px;flex:0 1 min(430px,38vw);
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 46%,transparent))}
.deco-sep::after{background:linear-gradient(90deg,color-mix(in srgb,var(--ink) 46%,transparent),transparent)}
.deco-sep .slot{width:120px;height:120px;flex:none;margin:0 6px}

/* data pills */
.pills{display:flex;flex-wrap:wrap;gap:9px;margin:26px 0 8px}
.pills span{font-family:var(--mono);font-size:11.5px;color:var(--soft);border:1px solid var(--line);background:var(--glass);border-radius:999px;padding:6px 13px;backdrop-filter:blur(6px)}
.pills span i{font-style:normal;color:var(--main)}

/* the dark panel (name, depth, silence, join) */
.panel{background:color-mix(in srgb,var(--ink) 55%,var(--main));color:var(--paper);border-radius:26px;padding:clamp(40px,6vw,72px);position:relative;overflow:hidden;transition:background 1.1s}
.panel .kick{color:var(--accent1)}
.panel h2,.panel h3{color:var(--paper)}
.panel p{color:color-mix(in srgb,var(--paper) 76%,transparent)}
.panel p b,.panel p strong{color:var(--paper)}
.gold{color:var(--main)}
.panel::after{content:"";position:absolute;inset:10px;border:1px solid color-mix(in srgb,var(--paper) 14%,transparent);border-radius:19px;pointer-events:none}

/* the name, structured: the wordmark stands beside each reading — the reading's letters go
   big and lit; the original word, in its original characters, sits beneath in the same colour */
.name-rows{display:grid;grid-template-columns:auto 1fr;column-gap:clamp(22px,4vw,46px);row-gap:14px;align-items:baseline;margin-top:10px}
.name-rows .wm-side{font-family:var(--serif);font-size:clamp(17px,2vw,22px);letter-spacing:.07em;color:var(--ink);white-space:nowrap;opacity:.92;transition:color 1.1s}
.name-rows .wm-side b{color:var(--main);font-weight:600;transition:color 1.1s}
.name-rows .wm-sub{display:block;font-family:var(--sans);font-weight:400;font-size:11.5px;letter-spacing:.2em;color:var(--main);opacity:.8;margin-top:5px;transition:color 1.1s}
.sec p b.fact{display:block;margin-top:11px} /* every reading closes on its own line */
@media (max-width:680px){.name-rows{grid-template-columns:1fr;row-gap:0}.name-rows .wm-side{margin-top:20px}}

/* the finale: the last piece arrives, the sphere completes, and it and its line stay pinned to
   the top of the screen — through the join form, to the end of the page */
.finale{position:relative;padding:20vh 0 0}
.finale .stage{min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:2vh 0 4vh}
.finale .whole-sep{position:relative;width:min(900px,90vw);height:1px;margin:0 auto;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--ink) 46%,transparent) 18%,color-mix(in srgb,var(--ink) 46%,transparent) 82%,transparent)}
.finale .whole-sep .slot{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:112px;height:112px}
/* the finale composes as one screen: the completed mark, its line, and the form together —
   so the words stay under the sphere while the form is in front of you */
.stick{display:flex;flex-direction:column;align-items:center;text-align:center;padding-top:9vh}
#logo-slot-whole{width:min(31vh,40vw);height:min(31vh,40vw);margin-bottom:4vh}
@media (max-height:760px){#logo-slot-whole{width:min(27vh,38vw);height:min(27vh,38vw)}}
.line-mask{overflow:hidden}
.whole-line{font-family:var(--serif);font-weight:400;font-size:clamp(24px,3.2vw,42px);letter-spacing:.05em;line-height:1.2;color:var(--ink);max-width:22ch;
  text-shadow:0 2px 30px color-mix(in srgb,var(--paper) 82%,transparent);
  transform:translateY(-130%);opacity:0;transition:transform 1.5s cubic-bezier(.19,.9,.24,1),opacity 1.1s ease,color 1.1s}
.whole-line.on{transform:none;opacity:1}
.finale .sec{position:relative;z-index:3;padding:2vh 24px 9vh}
.finale .panel{padding:clamp(26px,3.4vw,42px)}
.finale .panel h2{font-size:clamp(24px,3.2vw,34px)}
.finale .panel p{font-size:15px;margin-top:10px}

/* grids & feature cards */
.grid{display:grid;gap:16px;margin-top:34px}
.grid.c2{grid-template-columns:repeat(2,1fr)} .grid.c3{grid-template-columns:repeat(3,1fr)} .grid.c4{grid-template-columns:repeat(4,1fr)}
@media (max-width:960px){.grid.c3,.grid.c4{grid-template-columns:repeat(2,1fr)}}
@media (max-width:620px){.grid.c2,.grid.c3,.grid.c4{grid-template-columns:1fr}}
.fcard{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:22px 22px 24px;backdrop-filter:blur(8px)}
.fcard .ic{width:30px;height:30px;color:var(--main);margin-bottom:14px}
.fcard .ic svg{width:100%;height:100%}
.fcard h4{font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--ink);letter-spacing:.02em}
.fcard p{font-size:13.5px;margin-top:8px;color:var(--soft)}
.panel .fcard{background:color-mix(in srgb,var(--paper) 7%,transparent);border-color:color-mix(in srgb,var(--paper) 16%,transparent)}
.panel .fcard h4{color:var(--paper)} .panel .fcard p{color:color-mix(in srgb,var(--paper) 72%,transparent)} .panel .fcard .ic{color:var(--accent1)}

/* pill tab switchers (a day · depth · compare) */
.switch{display:flex;width:fit-content;max-width:100%;margin-left:auto;margin-right:auto;gap:5px;background:var(--glass);border:1px solid var(--line);border-radius:999px;padding:5px;backdrop-filter:blur(8px);flex-wrap:wrap;justify-content:center}
.switch button{border:none;background:transparent;color:var(--soft);font-family:var(--sans);font-size:14px;letter-spacing:.04em;padding:10px 20px;border-radius:999px;cursor:pointer;white-space:nowrap}
.switch button:hover{color:var(--ink)} .switch button.on{background:var(--main);color:var(--paper)}
.panel .switch{background:color-mix(in srgb,var(--paper) 8%,transparent);border-color:color-mix(in srgb,var(--paper) 16%,transparent)}
.panel .switch button{color:color-mix(in srgb,var(--paper) 65%,transparent)}
.panel .switch button.on{background:var(--paper);color:var(--ink)}
.tabpane{display:none;margin:26px auto 0} .tabpane.on{display:block;animation:fadein .5s ease}
@keyframes fadein{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}

/* a day with Healtheia */
.pick{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--main);margin-top:26px}
.day{display:grid;grid-template-columns:1fr minmax(0,300px);gap:44px;margin-top:18px;align-items:start}
@media (max-width:860px){.day{grid-template-columns:1fr}}
.moment{border-left:1px solid var(--line);padding:14px 0 14px 20px;cursor:pointer;transition:border-color .3s}
.moment .when{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--soft)}
.moment h4{font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--ink);margin-top:4px}
.moment p{font-size:13.5px;margin-top:6px}
.moment.on{border-left:2px solid var(--main)}
.moment.on .when{color:var(--main)}
.moment:focus-visible{outline:2px solid var(--accent1);outline-offset:3px;border-radius:6px}
/* the chosen item unfolds its deeper text; the same fold serves the moments and the capabilities */
.moment .deep,.capi .deep{display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s cubic-bezier(.4,0,.2,1)}
.moment.on .deep,.capi.on .deep{grid-template-rows:1fr}
.deep-in{overflow:hidden;min-height:0}
.moment .deep p,.capi .deep p{margin-top:8px;padding-bottom:2px}
.dayshot{position:sticky;top:110px}
.dm{display:none}.dm.on{display:block;animation:fadein .45s ease}
.dayshot .phoneshot{max-width:280px;margin:0 auto}

/* layered complexity: one sentence per depth, then the same depth on the desk and on the phone */
#depth-box .dd{display:none;text-align:center;max-width:52ch;margin:22px auto 0;font-size:17px;color:color-mix(in srgb,var(--paper) 86%,transparent)}
#depth-box[data-level="0"] .dd[data-v="0"],#depth-box[data-level="1"] .dd[data-v="1"],#depth-box[data-level="2"] .dd[data-v="2"]{display:block;animation:fadein .45s ease}
#depth-box .dd b{color:var(--paper)}
.dpair{display:none;grid-template-columns:minmax(0,1fr) minmax(0,220px);gap:22px;align-items:start;margin-top:22px}
#depth-box[data-level="0"] .dpair[data-v="0"],
#depth-box[data-level="1"] .dpair[data-v="1"],
#depth-box[data-level="2"] .dpair[data-v="2"]{display:grid;animation:fadein .5s ease}
@media (max-width:760px){.dpair{grid-template-columns:1fr}.dpair .phoneshot{max-width:240px;margin:0 auto}}
.panel .phoneshot figcaption b{color:var(--paper)}
.panel .phoneshot figcaption span{color:color-mix(in srgb,var(--paper) 66%,transparent)}
.depth-note{font-size:12.5px;margin-top:18px;color:color-mix(in srgb,var(--paper) 62%,transparent)}

/* seasons */
.season .tagt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
.season h4{font-family:var(--sans);font-weight:600;font-size:16px;color:var(--ink);margin-top:6px}
.season .focus{font-size:12.5px;color:var(--main);margin-top:8px;font-weight:600;letter-spacing:.02em}
.season p{font-size:15px}
.tabpane.season{max-width:680px;margin-left:auto;margin-right:auto;background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:22px 24px;backdrop-filter:blur(8px);margin-top:22px}
.tabpane.season .tagt{display:block}
.season blockquote{font-family:var(--sans);font-size:13.5px;color:var(--ink);border-top:1px dashed var(--line);margin-top:14px;padding-top:12px}

/* compare */
.answer{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:22px 24px;backdrop-filter:blur(8px);max-width:680px;margin:0 auto}
.answer.win{border-color:var(--main);box-shadow:0 0 0 1px var(--main) inset}
.answer .a{font-size:15.5px;color:var(--ink);line-height:1.6}
.answer .v{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--soft);margin-top:14px;border-top:1px dashed var(--line);padding-top:10px}
.answer.win .v{color:var(--main)}

/* the division of work: what Healtheia carries, and what stays with the professional */
.split{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
.split .side{background:var(--glass);border:1px solid var(--line);border-radius:16px;padding:24px 26px;backdrop-filter:blur(8px)}
.split .side.keep{border-color:color-mix(in srgb,var(--main) 45%,transparent)}
.split h4{font-family:var(--sans);font-weight:600;font-size:14.5px;color:var(--ink);line-height:1.5;max-width:34ch}
.split ul{list-style:none;margin-top:16px}
.split li{display:flex;align-items:center;gap:14px}
/* the icons: line drawings in the ink, masked from inline SVG so they take the theme's colour */
.ico{display:inline-block;width:24px;height:24px;flex:none;background:currentColor;opacity:.78;
  -webkit-mask:var(--svg) center/contain no-repeat;mask:var(--svg) center/contain no-repeat}
.ico[data-ico="capture"]{--svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 20h16'/><path d='M14.5 4.5l5 5L9.5 19.5H4.5v-5z'/><path d='M12.5 6.5l5 5'/></svg>")}
.ico[data-ico="organise"]{--svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 3l9 5-9 5-9-5z'/><path d='M3 12.5l9 5 9-5'/><path d='M3 17l9 5 9-5'/></svg>")}
.ico[data-ico="memory"]{--svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='8.5'/><path d='M12 7v5l3.5 2'/></svg>")}
.ico[data-ico="reflect"]{--svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M4 12a8 8 0 1 0 2.6-5.9'/><path d='M4 4v5h5'/><path d='M12 8.5v4l2.5 1.5'/></svg>")}
.ico[data-ico="support"]{--svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='9'/><circle cx='12' cy='12' r='4'/><path d='M5.6 5.6l3.6 3.6M18.4 5.6l-3.6 3.6M5.6 18.4l3.6-3.6M18.4 18.4l-3.6-3.6'/></svg>")}
.ico[data-ico="assess"]{--svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='5' y='4' width='14' height='17' rx='2'/><path d='M9 4V2.5h6V4'/><path d='M8.5 13l2.5 2.5 4.5-5'/></svg>")}
.ico[data-ico="judge"]{--svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 4v16M8 20h8M3 7h18'/><path d='M6 7l-3 7a3 3 0 0 0 6 0z'/><path d='M18 7l-3 7a3 3 0 0 0 6 0z'/></svg>")}
.ico[data-ico="interpret"]{--svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='10.5' cy='10.5' r='6.5'/><path d='M15.5 15.5L21 21'/><path d='M8 10.5h5M10.5 8v5'/></svg>")}
.ico[data-ico="treat"]{--svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><rect x='3' y='8.5' width='18' height='7' rx='3.5' transform='rotate(-45 12 12)'/><path d='M9.5 14.5l5-5'/></svg>")}
.ico[data-ico="care"]{--svg:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M12 20.5s-7.5-4.6-7.5-10A4 4 0 0 1 12 8a4 4 0 0 1 7.5 2.5c0 5.4-7.5 10-7.5 10z'/></svg>")}
.split li{font-family:var(--serif);font-size:clamp(18px,2.1vw,25px);letter-spacing:.03em;color:var(--ink);
  padding:10px 0;border-bottom:1px solid var(--line)}
.split li:last-child{border-bottom:none}
.split .keep li{color:var(--main)}
.split-note{margin-top:22px;font-size:13.5px;color:var(--soft);max-width:78ch;
  border-left:2px solid var(--main);padding-left:16px}

/* the questions the professional view answers */
.pair{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.2fr);gap:34px;align-items:center;margin-top:34px}
.pair.flip{grid-template-columns:minmax(0,1.2fr) minmax(0,.8fr)}
.pair .qs{margin-top:0;grid-template-columns:1fr}
@media (max-width:820px){.pair,.pair.flip{grid-template-columns:1fr}.pair.flip .shot{order:2}}
.qs{display:grid;grid-template-columns:1fr 1fr;gap:0 34px;margin-top:26px;max-width:900px}
.qs div{font-family:var(--serif);font-size:clamp(16px,1.9vw,21px);letter-spacing:.03em;color:var(--ink);
  padding:12px 0;border-bottom:1px solid var(--line)}

/* the founders, side by side */
/* the founders' portraits: the same round component as the buttons, scaled up. The gold
   contour, then a ring of glass as the bezel, then the photograph. Both are cut by
   site/portrait.py to one frame, so the faces sit at the same size and height. */
.folk .fcard{display:flex;flex-direction:column;align-items:flex-start}
.folk-pic{--gr:999px;--rim:2.2px;width:136px;height:136px;padding:6px;margin:0 0 20px;border-radius:50%;flex:none}
.folk-pic::after{clip-path:inset(0 round 50%);background:color-mix(in srgb,var(--paper) 34%,transparent)}
.folk-pic img{display:block;width:100%;height:100%;border-radius:50%;object-fit:cover;object-position:center}
.folk-pic[hidden]{display:none}
.folk .tagt{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft)}
/* the two biographies end level: each card sets its own text size (tuned by measurement) */
.folk .fcard.s p{font-size:var(--bio-s,16px)}
.folk .fcard.r p{font-size:var(--bio-r,14px)}
/* the card is the button: the first paragraph stays, the rest folds behind a teaser cut from
   the second paragraph; a click anywhere on the card (photo, words, glass) opens or closes it */
.folk .fcard{cursor:pointer;transition:border-color .3s,background 1.1s}
.folk .fcard:hover{border-color:color-mix(in srgb,var(--main) 42%,transparent)}
.folk .fcard:focus-visible{outline:2px solid var(--accent1);outline-offset:3px}
.folk .teaser,.folk .rest{align-self:stretch}
.folk .teaser{color:var(--soft)}
.folk .teaser .more,.folk .less{font-family:var(--mono);font-size:9.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--main);white-space:nowrap}
.folk .teaser .more{margin-left:8px}
.folk .rest{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.4,0,.2,1)}
.folk .fcard.open .rest{grid-template-rows:1fr}
.folk .rest-in{overflow:hidden;min-height:0}
.folk .fcard.open .teaser{display:none}
.folk .less{display:flex;justify-content:flex-end;align-items:center;gap:7px;margin-top:16px;user-select:none}
.folk .less .chev{width:12px;height:8px;overflow:visible;transform:rotate(180deg)}
.folk .less .chev path{stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.folk p a{color:var(--main);text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px;font-weight:600}
.folk .who-row{display:flex;align-items:center;gap:12px;margin-top:8px}
.folk .who-row h4{margin-top:0}
.folk .li{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;border-radius:5px;border:1px solid var(--main);color:var(--main);font-family:var(--sans);font-weight:700;font-size:11.5px;letter-spacing:-.02em;text-decoration:none;line-height:1;transition:background .25s,color .25s}
.folk .li:hover{background:var(--main);color:var(--paper)}
.folk p a:hover{color:var(--ink)}
.folk h4{font-family:var(--serif);font-weight:400;font-size:26px;letter-spacing:.04em;color:var(--ink);margin-top:8px}
.folk p{font-size:13.5px;margin-top:12px}
@media (max-width:760px){.split,.qs,.grid.c2.folk{grid-template-columns:1fr}}

/* in action: six capabilities on the left, the chosen one open, its screen on the right */
.caps{display:grid;grid-template-columns:minmax(0,360px) minmax(0,1fr);gap:36px;margin-top:18px;align-items:start}
.capi{display:flex;gap:14px;padding:13px 12px 13px 16px;border-left:1px solid var(--line);cursor:pointer;transition:border-color .3s}
.capi .ic{width:26px;height:26px;color:var(--soft);flex:none;margin-top:1px;transition:color .3s}
.capi .ic svg{width:100%;height:100%}
.capi h4{font-family:var(--sans);font-weight:600;font-size:15px;color:var(--ink)}
.capi p{font-size:13.5px}
.capi.on{border-left:2px solid var(--main)}
.capi.on .ic{color:var(--main)}
.capi:focus-visible{outline:2px solid var(--accent1);outline-offset:3px;border-radius:6px}
.capshot{position:sticky;top:110px}
.cs{display:none}.cs.on{display:block;animation:fadein .45s ease}
@media (max-width:860px){.caps{grid-template-columns:1fr}.capshot{position:static}.day{grid-template-columns:1fr;gap:20px}.dayshot{position:static}}

/* trust */
.trust h4{font-family:var(--sans);font-weight:600;font-size:15.5px;color:var(--ink)}
.trust p{font-size:13.5px;margin-top:8px}
.trust .cell{border-top:1px solid var(--line);padding-top:16px}

/* ---------- the product, shown ----------
   Screens rendered from site/mock/app.html (see mock/shoot.sh) and framed as a desktop window:
   a thin bezel, a chrome bar with the three dots and the address, and the still inside. The
   frame is the same glass as the rest of the page, so a screenshot never reads as a foreign
   object dropped on the design. Clicking one opens it full-size. */
/* the bezel does not follow the theme: it is a device, and the screen inside it is always the
   app's own graphite. Only the brand constants are used, never the palette roles, so a shot
   reads the same on the dark sections, on parchment, and inside the inverted panel. */
.shot{display:block;position:relative;width:100%;margin:0;border-radius:14px;overflow:hidden;
  border:1px solid color-mix(in srgb,var(--brand-paper) 14%,transparent);
  background:color-mix(in srgb,var(--brand-ink) 88%,transparent);backdrop-filter:blur(8px);
  box-shadow:0 30px 70px -40px rgba(0,0,0,.85);
  cursor:zoom-in;transition:border-color .35s,transform .35s,box-shadow .35s}
.shot:hover{border-color:color-mix(in srgb,var(--brand-gold) 55%,transparent);transform:translateY(-2px);
  box-shadow:0 38px 84px -40px rgba(0,0,0,.92)}
.shot .chrome{display:flex;align-items:center;gap:6px;padding:9px 12px;
  border-bottom:1px solid color-mix(in srgb,var(--brand-paper) 11%,transparent)}
.shot .chrome i{width:7px;height:7px;border-radius:50%;flex:none;background:color-mix(in srgb,var(--brand-paper) 20%,transparent)}
.shot .chrome .url{margin:0 auto;font-family:var(--mono);font-size:9.5px;letter-spacing:.12em;
  text-transform:uppercase;color:color-mix(in srgb,var(--brand-paper) 46%,transparent)}
/* the corner mark says the still opens */
.shot .chrome::after{content:"⤢";font-size:12px;line-height:1;flex:none;
  color:color-mix(in srgb,var(--brand-paper) 34%,transparent);transition:color .35s}
.shot:hover .chrome::after{color:var(--brand-gold)}
.shot img{display:block;width:100%;height:auto}
.shot figcaption{padding:14px 18px 16px;text-align:left;border-top:1px solid color-mix(in srgb,var(--brand-paper) 11%,transparent)}
.shot figcaption b{display:block;font-family:var(--sans);font-weight:600;font-size:14px;color:var(--brand-paper)}
.shot figcaption span{display:block;font-size:12.5px;margin-top:5px;line-height:1.55;
  color:color-mix(in srgb,var(--brand-paper) 66%,transparent)}
.shot-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:34px}
/* the same app on the phone: a bezel with no chrome bar, and the caption outside the device */
.phoneshot{margin:0;cursor:zoom-in}
.phoneshot .ph{border-radius:30px;overflow:hidden;
  border:5px solid color-mix(in srgb,var(--brand-ink) 88%,transparent);
  box-shadow:0 26px 56px -32px rgba(0,0,0,.9);transition:border-color .35s,transform .35s}
.phoneshot:hover .ph{border-color:color-mix(in srgb,var(--brand-gold) 60%,transparent);transform:translateY(-3px)}
.phoneshot img{width:100%;height:auto;display:block}
.phoneshot figcaption{margin-top:13px;text-align:center}
.phoneshot figcaption b{display:block;font-family:var(--sans);font-weight:600;font-size:13px;color:var(--ink)}
.phoneshot figcaption span{display:block;font-size:12px;color:var(--soft);margin-top:4px;line-height:1.5}
.shot-note{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;
  color:var(--soft);opacity:.7;margin-top:16px}
.panel .shot-note{color:color-mix(in srgb,var(--paper) 60%,transparent)}
/* the frame-rate watch's window: everything has stopped; one glass plate, two choices */
#perf{position:fixed;inset:0;z-index:58;display:none;place-items:center;padding:24px;background:color-mix(in srgb,var(--paper) 46%,transparent)}
#perf.on{display:grid;animation:fadein .32s ease}
.perf-win{--gr:18px;width:min(460px,100%);padding:26px 28px 24px;color:var(--ink)}
.perf-win::after{background:color-mix(in srgb,var(--paper) 74%,transparent);backdrop-filter:blur(18px) saturate(1.05)}
.perf-win h3{font-family:var(--serif);font-weight:400;font-size:25px;letter-spacing:.04em;line-height:1.15;text-wrap:balance}
.perf-win p{margin-top:10px;font-size:14.5px;line-height:1.55;color:var(--soft)}
.perf-win .perf-or{margin-top:12px;font-size:12.5px}
.perf-win .perf-or button{border:none;background:none;color:var(--soft);text-decoration:underline;cursor:pointer;font:inherit;font-size:12.5px;padding:0}
.perf-act{display:flex;gap:10px;flex-wrap:wrap;margin-top:20px}
.perf-act .btn{font-size:13.5px;padding:11px 20px}
/* full size, on click */
#lightbox{position:fixed;inset:0;z-index:60;display:none;place-items:center;padding:clamp(16px,4vw,48px);
  background:color-mix(in srgb,var(--ink) 88%,transparent);backdrop-filter:blur(10px);cursor:zoom-out}
#lightbox.on{display:grid;animation:fadein .3s ease}
#lightbox figure{display:flex;flex-direction:column;align-items:center;margin:0;max-width:100%}
#lightbox img{max-width:100%;max-height:82vh;border-radius:12px;border:1px solid color-mix(in srgb,var(--paper) 22%,transparent);
  box-shadow:0 40px 100px -40px #000}
#lightbox .cap{margin-top:16px;text-align:center;color:var(--paper);font-size:13.5px;max-width:70ch}
#lightbox .cap b{display:block;font-weight:600;margin-bottom:4px}
#lightbox .cap span{color:color-mix(in srgb,var(--paper) 68%,transparent)}
#lightbox .x{position:absolute;top:18px;right:22px;font-size:26px;line-height:1;color:var(--paper);
  background:none;border:none;cursor:pointer;opacity:.7}
#lightbox .x:hover{opacity:1}
@media (max-width:820px){.shot-grid{grid-template-columns:1fr}}

/* the synced threads, quietly behind a closing panel */
.morph-host{position:relative}
.morph-host>*:not(.threadbg){position:relative;z-index:1}
.threadbg{position:absolute;inset:0;z-index:0;width:100%;height:100%;border-radius:inherit;opacity:.55;pointer-events:none}

/* the boop: a green glass button that springs open — wide first, then tall — into the form */
.boop-area{margin-top:26px}
/* the closing panel is composed on its centre line: heading, the boop, the note */
.panel.mid{text-align:center}
.panel.mid h2{text-wrap:balance}
.panel.mid p{margin-left:auto;margin-right:auto}
.panel.mid .boop-area{display:flex;justify-content:center}
/* the form inside the boop stays centred too, and its input keeps a sane measure */
.panel.mid .boop-form{align-items:center;text-align:center}
.panel.mid .boop-form .join-form{justify-content:center;max-width:520px;width:100%}
.boop{position:relative;display:inline-flex;align-items:center;justify-content:center;min-height:50px;padding:13px 30px;border-radius:999px;background:color-mix(in srgb,var(--brand-green) 60%,transparent);backdrop-filter:blur(9px);border:1px solid color-mix(in srgb,var(--brand-paper) 24%,transparent);color:var(--brand-paper);font-weight:600;font-size:14.5px;letter-spacing:.02em;cursor:pointer;overflow:hidden;transition:filter .3s,background 1.2s;user-select:none}
.boop:hover{filter:brightness(1.14)}
.boop.go{position:absolute;z-index:3;cursor:default;border-radius:20px;
  transition:left 1.15s cubic-bezier(.32,1.4,.46,1),width 1.15s cubic-bezier(.32,1.4,.46,1),
             top 1.05s cubic-bezier(.32,1.4,.46,1) 1.1s,height 1.05s cubic-bezier(.32,1.4,.46,1) 1.1s,
             border-radius 1s ease .7s,filter .3s}
.boop.go.back{transition:top .9s cubic-bezier(.4,1.25,.6,1),height .9s cubic-bezier(.4,1.25,.6,1),
              left .9s cubic-bezier(.4,1.25,.6,1) .85s,width .9s cubic-bezier(.4,1.25,.6,1) .85s,
              border-radius .9s ease .5s}
.boop .boop-face{transition:opacity .45s .6s}
.boop.open .boop-face{opacity:0;transition:opacity .2s}
.boop-form{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;padding:26px clamp(20px,5vw,44px);opacity:0;transform:scale(.95);pointer-events:none;transition:opacity .3s,transform .3s;text-align:left}
.boop.open .boop-form{opacity:1;transform:none;pointer-events:auto;transition:opacity .45s .12s,transform .5s cubic-bezier(.3,1.55,.5,1) .12s}
.boop-form h3{font-family:var(--serif);font-weight:700;font-size:clamp(19px,2.4vw,25px);letter-spacing:.04em;color:var(--brand-paper)}
.boop-form .join-form{margin-top:18px}
.boop-form .join-form input{border-color:color-mix(in srgb,var(--brand-paper) 32%,transparent);background:color-mix(in srgb,var(--brand-paper) 9%,transparent);color:var(--brand-paper)}
.boop-form .join-form input::placeholder{color:color-mix(in srgb,var(--brand-paper) 48%,transparent)}
.boop-form .btn{background:var(--brand-gold);color:var(--brand-green)}
.form-done b,.panel .form-done p b,body[data-page] .panel .form-done p b{color:var(--brand-gold)!important;font-weight:600} /* the address stays gold on every page and theme; the partners' panel rule outranked it */
.boop.open .join-form .btn{animation:formpop .55s cubic-bezier(.3,1.6,.5,1) .34s backwards}
@keyframes formpop{0%{opacity:0;transform:scale(.6)}100%{opacity:1;transform:none}}
.boop-form .join-note{color:color-mix(in srgb,var(--brand-paper) 62%,transparent);margin-top:12px}
.boop-x{position:absolute;top:8px;right:13px;border:none;background:none;color:color-mix(in srgb,var(--brand-paper) 70%,transparent);font-size:22px;line-height:1;cursor:pointer;padding:4px}
.boop-x:hover{color:var(--brand-paper)}
/* opened, the glass deepens so the form reads clean over whatever ground the theme provides */
.boop.go{background:color-mix(in srgb,var(--brand-green) 90%,transparent)}
/* on palettes where the green would sink (the emerald ground), the boop wears graphite instead */
body[data-theme-name="emerald"] .boop:not(.alt){background:color-mix(in srgb,#2B2B28 74%,transparent)}
body[data-theme-name="emerald"] .boop.go:not(.alt){background:color-mix(in srgb,#2B2B28 93%,transparent)}
/* the covered panel copy steps aside while the form is out */
.morph-host>h2,.morph-host>p{transition:opacity .8s,color 1.1s}
.morph-host.boop-open>h2,.morph-host.boop-open>p{opacity:0}
/* the partners variant wears a soft emerald tint instead, and opens into deep emerald */
.boop.alt{background:color-mix(in srgb,var(--brand-green) 82%,transparent);border-color:color-mix(in srgb,var(--brand-gold) 55%,transparent)}
.boop.alt.go{background:color-mix(in srgb,var(--brand-green) 92%,transparent)}
.boop.alt .btn{background:var(--brand-paper);color:var(--brand-green)}

/* join */
.join-form{display:flex;gap:10px;margin-top:26px;flex-wrap:wrap}
/* the honeypot: present for a script, never for a person */
.join-form .hp{position:absolute;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none}
.join-form.busy{opacity:.7;pointer-events:none}
.join-form .form-err{flex-basis:100%;font-size:13px;color:var(--paper);opacity:.85;margin-top:4px}
.join-form .form-err a{color:inherit;text-decoration:underline}
.form-done{animation:fadein .5s ease}
.form-done h3{font-family:var(--serif);font-weight:700;font-size:clamp(19px,2.4vw,25px);letter-spacing:.04em;color:var(--brand-paper)}
.form-done p{margin-top:12px;font-size:14.5px;color:var(--brand-paper);opacity:.88}
.join-form input{flex:1;min-width:220px;font:inherit;font-size:14.5px;padding:13px 18px;border-radius:999px;border:1px solid color-mix(in srgb,var(--paper) 30%,transparent);background:color-mix(in srgb,var(--paper) 8%,transparent);color:var(--paper);outline:none}
.join-form input::placeholder{color:color-mix(in srgb,var(--paper) 45%,transparent)}
.join-form input:focus{border-color:var(--main)}
.join-note{font-size:12.5px;margin-top:14px;color:color-mix(in srgb,var(--paper) 60%,transparent)}

/* partners: who it's for. One line per profession; a click opens it, the others close.
   The fold animates through grid rows, so no height is ever measured. */
.exchange{margin-top:30px;border-top:1px solid var(--line)}
.exchange .row{border-bottom:1px solid var(--line)}
.exchange .who{width:100%;display:flex;align-items:center;justify-content:space-between;gap:18px;padding:17px 2px;border:none;background:none;cursor:pointer;text-align:left;
  font-family:var(--serif);font-size:clamp(19px,2.2vw,26px);letter-spacing:.03em;color:var(--ink);transition:color .3s}
.exchange .who:hover,.exchange .row.open .who{color:var(--main)}
.exchange .who:focus-visible{outline:2px solid var(--accent1);outline-offset:3px;border-radius:6px}
.exchange .chev{width:16px;height:10px;flex:none;overflow:visible;transition:transform .45s cubic-bezier(.4,0,.2,1);opacity:.7}
.exchange .chev path{stroke:currentColor;stroke-width:1.5;fill:none;stroke-linecap:round;stroke-linejoin:round}
.exchange .row.open .chev{transform:rotate(180deg)}
.exchange .fold{display:grid;grid-template-rows:0fr;transition:grid-template-rows .55s cubic-bezier(.4,0,.2,1)}
.exchange .row.open .fold{grid-template-rows:1fr}
.exchange .fold-in{overflow:hidden;min-height:0;display:grid;grid-template-columns:1.6fr 1fr;gap:28px}
.exchange .give,.exchange .ask{font-size:14px;color:var(--soft);padding:2px 2px 22px;opacity:0;transform:translateY(6px);transition:opacity .35s,transform .4s}
.exchange .row.open .give,.exchange .row.open .ask{opacity:1;transform:none;transition:opacity .45s .18s,transform .5s .18s}
.exchange .lab{font-family:var(--mono);font-size:9px;letter-spacing:.2em;text-transform:uppercase;color:var(--main);display:block;margin-bottom:5px}
@media (max-width:760px){.exchange .fold-in{grid-template-columns:1fr;gap:0}.exchange .give{padding-bottom:12px}}

/* footer */
footer{position:relative;z-index:10;padding:60px 24px 80px;border-top:1px solid var(--line);scroll-snap-align:end} /* the bottom is a snap position: nothing pulls the page back up */
footer .wrap{display:grid;grid-template-columns:2fr 1fr;gap:30px}
@media (max-width:760px){footer .wrap{grid-template-columns:1fr}}
footer p{font-size:12.5px;color:var(--soft);max-width:56ch;margin-top:10px}
footer .fmark{font-family:var(--serif);font-size:22px;letter-spacing:.05em;color:var(--ink)}
footer .fmark b{color:var(--main)}
footer .strong{color:var(--ink);font-weight:600}
footer .lite-note{margin-top:16px}
footer .lite-note{font-size:12px;color:var(--soft)}
footer .lite-note b{color:var(--main);font-weight:600}
footer .lite-note button{border:none;background:none;color:var(--soft);text-decoration:underline;cursor:pointer;font:inherit;font-size:12px;padding:0}
footer .lite-note .sep{margin:0 4px}

/* an underline that draws itself, left to right */
.drawline{background-image:linear-gradient(currentColor,currentColor);background-repeat:no-repeat;background-position:left calc(100% - 1px);background-size:0% 1px;transition:background-size .32s ease}
.drawline:hover{background-size:100% 1px}

/* the harp: a small word rises where a chord is struck */
.flabel.word{pointer-events:none;border-color:var(--accent1);font-size:11.5px;transform:translate(-50%,-50%);animation:wordrise 1.5s ease forwards}
@keyframes wordrise{0%{opacity:0;transform:translate(-50%,-40%)}18%{opacity:1}100%{opacity:0;transform:translate(-50%,-170%)}}

/* reveals */
/* the reveal moves through the individual translate property, so the pull's scale is never smoothed by it */
.reveal{opacity:0;translate:0 24px;transition:opacity .9s ease,translate .9s ease}
.reveal.in{opacity:1;translate:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;translate:none;transition:none}html{scroll-behavior:auto}}

/* ---------- the cookie consent: one small glass plate, two choices, only when analytics is configured ---------- */
#consent{position:fixed;left:16px;bottom:16px;z-index:57;width:min(400px,calc(100vw - 32px));--gr:16px;padding:18px 20px 16px;color:var(--ink);font-size:13.5px;line-height:1.55;animation:fadein .4s ease}
#consent::after{background:color-mix(in srgb,var(--paper) 78%,transparent);backdrop-filter:blur(16px) saturate(1.05)}
#consent p{margin:0;color:var(--ink)}
#consent p a{color:var(--main);text-decoration:underline;text-underline-offset:3px}
#consent .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
#consent .btn{font-size:12.5px;padding:9px 16px}
#consent[hidden]{display:none}
@media (max-width:560px){#consent{left:8px;bottom:8px;width:calc(100vw - 16px)}}

/* ---------- the quiet pages: privacy, terms, not found ---------- */
body[data-page="legal"] main{padding:120px 24px 80px}
.legal-top{justify-content:space-between;pointer-events:auto}
.legal-top .fmark{font-family:var(--serif);font-size:24px;letter-spacing:.05em;color:var(--ink);text-decoration:none}
.legal-top .fmark b{color:var(--main)}
.legal-top .langs{display:flex;gap:6px}
.legal-top .langs a{font-family:var(--mono);font-size:11.5px;letter-spacing:.2em;text-decoration:none;padding:6px 12px;color:var(--soft)}
.legal-top .langs a.on{color:var(--main)}
.legal h1{font-family:var(--serif);font-weight:400;font-size:clamp(30px,4.4vw,46px);letter-spacing:.05em;line-height:1.1;color:var(--ink)}
.legal .meta{font-family:var(--mono);font-size:10.5px;letter-spacing:.2em;text-transform:uppercase;color:var(--soft);margin-top:10px}
.legal h2{font-family:var(--serif);font-weight:400;font-size:24px;letter-spacing:.04em;color:var(--ink);margin-top:40px}
.legal p,.legal li{color:var(--soft);font-size:15px;line-height:1.7;max-width:68ch}
.legal p{margin-top:12px}
.legal ul{margin:10px 0 0 20px}
.legal li{margin-top:6px}
.legal p b,.legal li b{color:var(--ink);font-weight:600}
.legal a{color:var(--main)}
.legal .fill{background:color-mix(in srgb,var(--accent1) 22%,transparent);border-radius:4px;padding:0 4px}
.legal.notfound{text-align:center;min-height:60vh;display:flex;flex-direction:column;align-items:center;justify-content:center}
.legal.notfound p{margin-inline:auto}
.legal.notfound .acts{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:24px}
footer .flinks{margin-top:18px;display:flex;gap:14px;flex-wrap:wrap}
footer .flinks a,footer .flinks button{font-family:var(--mono);font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--soft);text-decoration:none;border:none;background:none;cursor:pointer;padding:0}
footer .flinks a:hover,footer .flinks button:hover{color:var(--main)}

/* ---------- the phone ----------
   This block stays LAST in the sheet: its rules share specificity with the desktop rules they
   replace, so source order is what makes them win.
   The page becomes a stack of screens: each section snaps into place, the ☰ holds the
   contents, the stepper in the corner walks them, the docked mark is small, and a chapter's
   card is a sheet at the foot of the screen with the scene above it. */
@media (max-width:900px){
  html{scroll-snap-type:y proximity;scroll-padding-top:64px}
  .sec,#scene-sections .ch,#scene-sections .fin{scroll-snap-align:start}
  .top{padding:12px 12px;gap:8px;flex-wrap:nowrap}
  .top .partners-link,.top .lang-select{display:none}
  .top-right{margin-left:auto;flex-basis:auto;gap:8px}
  .top .join-link{padding:9px 16px 8px;font-size:12px;white-space:nowrap}
  #mnav-btn{display:flex}
  #logo-slot-head{width:130px}
  #stepper{display:flex}
  #consent{left:8px;right:8px;bottom:66px;width:auto}
  .hero{padding-top:96px;padding-bottom:120px;min-height:100svh}
  .hero-left{margin-top:18vh}
  .hero .scroll-cue{bottom:22px}
  /* on a phone the partners hero reads like the main one: from the left */
  body[data-hero-mirror="1"] .hero-left{margin-left:0;text-align:left;align-items:flex-start}
  body[data-hero-mirror="1"] #logo-slot-hero{margin-left:0;align-self:flex-start}
  /* chapters: the card is a sheet at the foot of the screen, the scene plays above it */
  #scene-sections .ch,#scene-sections .ch.tall{min-height:150vh;align-items:flex-end;padding:0 10px 66px}
  .hero .scroll-cue span{white-space:nowrap}
  #scene-sections .ch .card,#scene-sections .ch:nth-of-type(even) .card,#scene-sections .ch .card.side-right,#scene-sections .ch .card.side-left{
    position:sticky;top:auto;bottom:66px;width:100%;max-width:none;margin:0;max-height:44vh;overflow:auto;padding:16px 18px 18px;border-radius:18px}
  :root{--card-fs:clamp(14px,3.6vw,16px);--card-h2:clamp(23px,6.2vw,28px);--card-pad:16px}
  .card h2::after{margin-top:9px}
  .card p{margin-top:9px}
  .card .nav{top:10px;right:10px}
  #scene-sections .fin{min-height:92svh;padding:0 14px}
  .fin-in{padding:32px 22px}
  /* the light version: one card per screen, centred, each a swipe */
  body.lite #scene-sections .ch,body.lite #scene-sections .ch.tall{min-height:100svh;align-items:center;padding:76px 14px 96px}
  body.lite #scene-sections .ch .card{position:static;max-height:none;overflow:visible}
  .scene-lead{min-height:100svh;padding:0 18px;scroll-snap-align:start}
  body.lite .scene-lead{min-height:58svh}
  /* on a phone the chapter sheet owns the floor: the cue stands under the docked mark instead */
  .scene-skip{top:136px;bottom:auto;font-size:10.5px;letter-spacing:.16em;gap:6px}
  .sec{padding:64px 18px 84px}
  .slide{padding:76px 18px 40px}
  /* the day's moments read like the capabilities: the heading of each, the chosen one open */
  .moment{padding:9px 0 9px 14px}
  .moment .when{font-size:9px}
  .moment h4{font-size:14.5px;margin-top:2px}
  .moment p{font-size:13px;margin-top:5px}
  .moment:not(.on)>p{display:none}
  .scene-lead{min-height:62svh}
  .wrap{padding:0}
  .sec h2{font-size:clamp(28px,8vw,36px)}
  footer{padding:48px 18px 110px}
}
@media (max-width:560px){.hero{padding-top:92px}}