/* /assets/site.css?v=20261107 */
/* CreaseTech website. Dark end of the design system, Midnight and Mint (ADR-029).
   Colour tokens mirror CreaseTech_Design_System/tokens.css. Only two shapes: radius-sm and the chamfer. */
:root{
  color-scheme:dark;
  --bg:#0f172a;--surface:#1e293b;--surface-raised:#263449;--line:#263449;--line-strong:#3a4a63;--control-border:#7184a0;
  --text-primary:#f8fafc;--text-silver:#e2e8f0;--text-body:#cbd5e1;--text-muted:#94a3b8;
  --accent:#2dd4bf;--accent-hover:#5eead4;--accent-pressed:#14b8a6;--on-accent:#0f172a;--consent:#fb7185;--focus-ring:#5eead4;
  --gradient-lime-soda:radial-gradient(55% 50% at 70% 30%,rgba(255,229,59,.95) 0%,rgba(255,229,59,0) 100%),radial-gradient(90% 90% at 50% 55%,#c6ff3d 0%,#2be0a0 42%,#00b8ff 78%);
  /* names the season ring hero takes from its host */
  --raised:var(--surface-raised);--control:var(--control-border);--chalk:var(--text-primary);--silver:var(--text-silver);--body:var(--text-body);--muted:var(--text-muted);--focus:var(--focus-ring);
  --font-display:"Plus Jakarta Sans","Noto Sans Sinhala",system-ui,-apple-system,"Segoe UI",sans-serif;--font-base:var(--font-display);
  --r:6px;--cut:28px;
  --gut:clamp(16px,4vw,40px);--section:clamp(72px,10vw,144px);--header:64px;
  --t-hero:clamp(2.75rem,calc(1.2rem + 6.2vw),6.25rem);--t-h2:clamp(2.125rem,calc(1rem + 3.9vw),4.25rem);--t-h3:clamp(1.375rem,calc(1rem + 1.1vw),2rem);--t-lede:clamp(1.125rem,calc(1rem + .5vw),1.375rem);
  --d1:100ms;--d2:200ms;--d3:300ms;--d4:500ms;--ease:cubic-bezier(.2,.7,.3,1);
  --crease:3px solid var(--text-primary);
  --chamfer:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-padding-top:calc(var(--header) + 16px);background:var(--bg)}
body{margin:0;background:var(--bg);color:var(--text-body);font:400 1.0625rem/1.6 var(--font-base);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::after{content:"";position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.035;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .55 0'/%3E%3C/filter%3E%3Crect width='220' height='220' filter='url(%23n)'/%3E%3C/svg%3E")}
img,svg{display:block;max-width:100%;height:auto}
h1,h2,h3,h4,p,ul,ol,figure,dl,dd,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
a{color:inherit}
:focus-visible{outline:2px solid var(--focus-ring);outline-offset:2px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.skip{position:fixed;left:16px;top:-80px;z-index:40;background:var(--text-primary);color:var(--bg);padding:12px 16px;border-radius:var(--r);font-weight:600;text-decoration:none;transition:top var(--d2) var(--ease)}
.skip:focus{top:8px}
.wrap{max-width:1320px;margin-inline:auto;padding-inline:max(var(--gut),env(safe-area-inset-left,0px)) max(var(--gut),env(safe-area-inset-right,0px))}

/* type */
h1,h2,h3,h4{font-family:var(--font-display);color:var(--text-primary);text-wrap:balance;font-weight:700}
.display{font-size:var(--t-hero);line-height:1.02;letter-spacing:-.045em;max-width:15ch}
h2,.h2{font-size:var(--t-h2);line-height:1.05;letter-spacing:-.04em;max-width:20ch}
h3,.h3{font-size:var(--t-h3);line-height:1.18;letter-spacing:-.025em;font-weight:600}
h4{font-size:1.0625rem;line-height:1.4;font-weight:600;letter-spacing:-.005em}
.lede{font-size:var(--t-lede);line-height:1.45;color:var(--text-silver);max-width:42ch;text-wrap:pretty}
.prose{max-width:62ch;text-wrap:pretty}
.prose p+p{margin-top:1em}
.muted{color:var(--text-muted)}
.num{font-variant-numeric:tabular-nums}
.small{font-size:.9375rem;line-height:1.5}

/* buttons */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:48px;padding:0 22px;border-radius:var(--r);background:var(--accent);color:var(--on-accent);font:600 1rem/1 var(--font-base);text-decoration:none;white-space:nowrap;border:0;cursor:pointer;touch-action:manipulation;transition:background-color var(--d2) var(--ease),transform var(--d1) var(--ease)}
.btn:hover{background:var(--accent-hover)}
.btn:active{background:var(--accent-pressed);transform:translateY(1px)}
.btn-line{background:transparent;color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--control-border);transition:box-shadow var(--d2) var(--ease),color var(--d2) var(--ease)}
.btn-line:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--text-primary)}
.quiet{display:inline-flex;align-items:center;min-height:44px;gap:8px;color:var(--text-primary);font-weight:500;text-decoration:underline;text-decoration-color:var(--control-border);text-underline-offset:4px;transition:text-decoration-color var(--d2) var(--ease)}
.quiet:hover{text-decoration-color:var(--text-primary)}
.acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 20px;margin-top:32px}

/* header */
.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:30;background:var(--bg);border-bottom:1px solid var(--line)}
.top-in{height:var(--header);display:flex;align-items:center;gap:24px}
.logo{display:block;flex:none;padding-block:13px}
.logo img{width:144px;height:auto}
.nav{display:flex;align-items:center;gap:4px;margin-inline-start:auto}
.nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 12px;color:var(--text-body);font-size:.9375rem;font-weight:500;text-decoration:none;border-radius:var(--r);transition:color var(--d2) var(--ease);white-space:nowrap}
.nav a:hover,.nav a[aria-current=page]{color:var(--text-primary)}
.nav a[aria-current=page]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:6px}
.top .btn{min-height:44px;padding:0 16px;font-size:.9375rem}
.mnav{display:none;margin-inline-start:auto}
.mnav summary{list-style:none;display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 12px;color:var(--text-primary);font-weight:500;cursor:pointer;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--control-border)}
.mnav summary::-webkit-details-marker{display:none}
.mnav-panel{position:fixed;inset:var(--header) 0 0;background:var(--bg);padding:24px var(--gut) 40px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.mnav-panel a{display:flex;align-items:center;min-height:52px;color:var(--text-primary);font-size:1.5rem;font-weight:600;letter-spacing:-.02em;text-decoration:none}
.mnav-panel .small-links{display:grid;grid-template-columns:1fr 1fr;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.mnav-panel .small-links a{font-size:1.0625rem;font-weight:500;letter-spacing:0;color:var(--text-body);min-height:44px}
.mnav-panel .btn{margin-top:24px;font-size:1rem;letter-spacing:0;color:var(--on-accent);display:inline-flex;min-height:52px}
@media (max-width:1239.98px){.nav,.top .btn{display:none}.mnav{display:block}}
@media (min-width:1240px) and (max-width:1399.98px){.nav{gap:0}.nav a{padding:0 9px;font-size:.875rem}.top-in{gap:16px}}

/* sections */
.sec{padding-block:var(--section)}
.sec-tight{padding-block:calc(var(--section)*.6)}
.crease{border-top:var(--crease);padding-top:clamp(20px,2.4vw,32px)}
.sec>.wrap>.crease>h2+.lede,.sec-head .lede{margin-top:20px}

/* proof strip */
.proof{border-block:1px solid var(--line)}
.proof ul{display:grid;grid-template-columns:auto 1fr auto;gap:8px 56px;padding-block:20px;color:var(--text-silver);font-size:1rem;font-weight:500}
@media (max-width:860px){.proof ul{grid-template-columns:1fr;padding-block:16px}}

/* the cupboard */
.stack{display:grid;gap:20px;margin-top:clamp(40px,5vw,72px);view-timeline:--stack block}
.page{--ledger:color-mix(in srgb,var(--text-muted) 11%,transparent);position:relative;clip-path:var(--chamfer);background:repeating-linear-gradient(to bottom,transparent 0 35px,var(--ledger) 35px 36px),var(--surface);padding:clamp(28px,4vw,56px);min-height:clamp(280px,42vh,420px);display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:24px clamp(32px,5vw,80px);align-items:end}
.page h3{font-size:clamp(1.875rem,calc(1rem + 3vw),3.5rem);line-height:1.06;letter-spacing:-.04em;font-weight:700;max-width:13ch}
.page p{color:var(--text-silver);max-width:40ch}
@media (min-width:900px) and (min-height:720px){
  .stack{gap:40px}
  .page{position:sticky;top:calc(var(--header) + 16px + var(--i)*14px);z-index:calc(var(--i) + 2);box-shadow:0 -1px 0 var(--bg)}
  @supports (animation-timeline:view()){
    @media (prefers-reduced-motion:no-preference){
      .page:not(:last-child){animation:page-back linear both;animation-timeline:--stack;animation-range:contain calc(var(--i)*24% + 8%) contain calc(var(--i)*24% + 32%);transform-origin:50% 0}
      @keyframes page-back{to{transform:scale(.965)}}
    }
  }
}
@media (max-width:760px){.page{grid-template-columns:minmax(0,1fr);min-height:0;align-items:start}}
.memory{clip-path:var(--chamfer);background:var(--gradient-lime-soda),#2be0a0;color:var(--bg);padding:clamp(32px,6vw,88px);margin-top:20px;position:relative;z-index:8}
.memory .big{font-family:var(--font-display);color:var(--bg);font-weight:700;font-size:clamp(2rem,calc(1rem + 4vw),4.75rem);line-height:1.04;letter-spacing:-.045em;max-width:16ch;text-wrap:balance}
.memory p+p{margin-top:24px;font-size:var(--t-lede);font-weight:500;line-height:1.35;max-width:32ch}

/* the creed */
.creed{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:48px clamp(32px,6vw,96px);margin-top:clamp(24px,3vw,40px)}
.creed h3{font-size:1.0625rem;font-weight:500;letter-spacing:0;color:var(--text-muted);margin-bottom:20px}
.creed li{font-family:var(--font-display);font-size:clamp(1.625rem,calc(1rem + 1.9vw),2.875rem);line-height:1.1;letter-spacing:-.035em;font-weight:700;color:var(--text-primary);text-wrap:balance}
.creed li+li{margin-top:.62em}
.creed .refuse li{color:var(--text-muted)}
@media (max-width:760px){.creed{grid-template-columns:minmax(0,1fr)}}

/* the cycle */
.cycle{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(32px,6vw,96px);margin-top:clamp(24px,4vw,56px)}
.cycle-stage{position:sticky;top:calc(var(--header) + 24px);align-self:start;display:grid;min-height:min(620px,calc(100dvh - var(--header) - 48px));grid-template-rows:auto 1fr}
.cycle-rail{display:grid;grid-template-columns:repeat(4,auto);justify-content:space-between;gap:12px;padding-bottom:16px;font-size:1rem;font-weight:600;color:var(--text-muted)}
.cycle-rail li{transition:color var(--d3) var(--ease)}
.cycle-rail li.on{color:var(--accent)}
.cycle-shots{position:relative}
.cycle-shots figure{position:absolute;inset:0 auto auto 0;width:100%;opacity:0;transition:opacity var(--d3) var(--ease)}
.cycle-shots figure.on{opacity:1}
.cycle-shots img{width:auto;max-width:100%;max-height:calc(100dvh - var(--header) - 132px)}
.step{min-height:78dvh;display:flex;flex-direction:column;justify-content:center}
.step:last-child{min-height:56dvh}
.step h3{font-size:clamp(2rem,calc(1rem + 2.8vw),3.5rem);line-height:1.04;letter-spacing:-.04em;font-weight:700;transition:color var(--d3) var(--ease)}
.step p{margin-top:16px;max-width:36ch;font-size:var(--t-lede);line-height:1.45;color:var(--text-silver)}
.step figure{display:none}
@media (max-width:980px){
  .cycle{grid-template-columns:minmax(0,1fr)}
  .cycle-stage{display:none}
  .step,.step:last-child{min-height:0;display:block;padding-block:32px}
  .step figure{display:block;margin-top:24px;max-width:520px}
}

/* figures: real product screens */
.fig img{width:100%;height:auto;border-radius:var(--r);background:var(--surface)}
.fig figcaption,.cap{margin-top:10px;font-size:.875rem;line-height:1.4;color:var(--text-muted)}

.swipe{display:none}
@media (max-width:720px){
  .scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-inline:calc(var(--gut)*-1);padding-inline:var(--gut);scrollbar-width:thin;scrollbar-color:var(--control-border) transparent;padding-bottom:8px}
  .scrollx img{width:760px;max-width:none}
  .swipe{display:inline}
}

/* questions: asymmetric grid of real panels */
.qgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(40px,5vw,72px) clamp(24px,3vw,40px);margin-top:clamp(32px,5vw,64px);align-items:start}
.q h3{margin-bottom:16px;max-width:24ch}
.q-a{grid-column:span 5}.q-b{grid-column:span 7}.q-c{grid-column:span 4}.q-d{grid-column:span 8}.q-e{grid-column:span 7}.q-f{grid-column:span 5}.q-g{grid-column:span 12}
@media (max-width:860px){.qgrid>*{grid-column:1/-1}}

/* spec sheet */
.spec{margin-top:clamp(24px,3vw,40px)}
.spec>div{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:6px clamp(24px,5vw,72px);padding-block:clamp(18px,2vw,26px)}
.spec>div+div{border-top:1px solid var(--line)}
.spec dt{font-family:var(--font-display);color:var(--text-primary);font-weight:600;font-size:clamp(1.1875rem,calc(1rem + .55vw),1.5rem);line-height:1.22;letter-spacing:-.02em;text-wrap:balance}
.spec dd{max-width:60ch;text-wrap:pretty}
.spec.cols-3>div{grid-template-columns:minmax(0,3fr) minmax(0,4fr) minmax(0,5fr)}
@media (max-width:720px){.spec>div,.spec.cols-3>div{grid-template-columns:minmax(0,1fr)}}

/* doors */
.doors{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-top:clamp(24px,3vw,40px)}
.door{position:relative;display:flex;flex-direction:column;justify-content:space-between;gap:48px;min-height:clamp(240px,24vw,340px);padding:clamp(20px,2.4vw,32px);background:var(--surface);clip-path:var(--chamfer);text-decoration:none;color:var(--text-body);overflow:hidden;transition:background-color var(--d2) var(--ease)}
.door:hover{background:var(--surface-raised)}
.door:focus-visible{outline-offset:-6px}
.door b{font-weight:500;color:var(--text-muted)}
.door strong{display:block;margin-top:8px;font-family:var(--font-display);color:var(--text-primary);font-size:clamp(1.5rem,calc(1rem + 1.25vw),2.25rem);line-height:1.1;letter-spacing:-.03em;font-weight:700;max-width:15ch;text-wrap:balance}
.door img{position:absolute;right:clamp(12px,2vw,28px);bottom:0;height:50%;width:auto;opacity:.34;transition:opacity var(--d2) var(--ease),transform var(--d3) var(--ease)}
.door:hover img{opacity:.8;transform:translateY(-4px)}
.door .go{position:relative;font-weight:600;color:var(--text-primary);display:inline-flex;align-items:center;gap:8px}
.door .go svg{transition:transform var(--d2) var(--ease)}
.door:hover .go svg{transform:translateX(4px)}
.d-a{grid-column:span 7}.d-b{grid-column:span 5}.d-c{grid-column:span 5}.d-d{grid-column:span 7}
@media (max-width:720px){.doors>*{grid-column:1/-1}.door{min-height:220px}}

/* child safety */
.gates{counter-reset:g;margin-top:clamp(32px,4vw,56px);display:grid;gap:0}
.gates li{display:grid;grid-template-columns:clamp(56px,8vw,120px) minmax(0,5fr) minmax(0,7fr);gap:8px clamp(16px,3vw,48px);padding-block:clamp(20px,2.4vw,32px);align-items:baseline}
.gates li+li{border-top:1px solid var(--line)}
.gates .n{font-family:var(--font-display);font-weight:700;font-size:clamp(2.25rem,calc(1rem + 2.5vw),3.75rem);line-height:1;letter-spacing:-.04em;color:var(--consent);font-variant-numeric:tabular-nums}
.gates h3{font-size:clamp(1.25rem,calc(1rem + .7vw),1.625rem)}
@media (max-width:760px){.gates li{grid-template-columns:56px minmax(0,1fr)}.gates li p{grid-column:2}}
.exits{margin-top:clamp(40px,5vw,64px);display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:24px clamp(24px,5vw,72px)}
.exits ul{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(16px,3vw,40px)}
.exits h4{margin-bottom:4px}
@media (max-width:860px){.exits,.exits ul{grid-template-columns:minmax(0,1fr)}}

/* founding roll */
.roll{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:12px;margin-top:clamp(32px,4vw,56px)}
.seat{clip-path:var(--chamfer);background:var(--surface);padding:clamp(20px,2.2vw,32px);min-height:clamp(200px,20vw,280px);display:flex;flex-direction:column;justify-content:space-between;gap:32px;grid-column:span 2}
.seat .n{font-family:var(--font-display);font-weight:700;font-size:clamp(3.5rem,calc(1rem + 6vw),7rem);line-height:.9;letter-spacing:-.05em;color:var(--text-primary);font-variant-numeric:tabular-nums}
.seat.first{grid-column:span 5}.seat.open{grid-column:span 3;background:transparent;box-shadow:none;position:relative;clip-path:none;outline:1px solid var(--accent);outline-offset:-1px;border-radius:var(--r)}
.seat.open .n{color:var(--accent)}
.seat.pending .n{color:var(--text-muted)}
.seat .who{font-weight:600;color:var(--text-primary);line-height:1.3;max-width:24ch}
.seat.pending .who{font-weight:500;color:var(--text-body)}
@media (max-width:860px){.roll>*{grid-column:span 6!important}.seat.first{grid-column:1/-1!important}.seat.open{grid-column:1/-1!important}}
@media (prefers-reduced-motion:no-preference){.js .seat.open.reveal{transition:opacity var(--d4) var(--ease)}}
.deal{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px clamp(24px,5vw,72px);margin-top:clamp(32px,4vw,56px)}
.deal li{padding-block:6px}
.deal h3{font-size:1.0625rem;font-weight:500;color:var(--text-muted);letter-spacing:0;margin-bottom:12px}
@media (max-width:760px){.deal{grid-template-columns:minmax(0,1fr)}}

/* walkthrough builder */
.builder{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:40px clamp(24px,5vw,72px);margin-top:clamp(32px,4vw,56px);align-items:start}
.builder[hidden]{display:none}
.builder fieldset{border:0;margin:0 0 20px;padding:0;min-width:0}
.builder legend{margin-bottom:8px}
.f{display:grid;gap:8px;margin-bottom:20px}
.f label,.f legend,.f .lab{font-weight:600;font-size:.9375rem;color:var(--text-primary);padding:0}
.f input[type=text],.f input[type=email],.f input[type=tel],.f select,.f textarea{width:100%;min-height:48px;padding:12px 14px;border-radius:var(--r);border:1px solid var(--control-border);background:var(--surface);color:var(--text-primary);font:400 1rem/1.4 var(--font-base);transition:border-color var(--d2) var(--ease)}
.f input:hover,.f select:hover,.f textarea:hover{border-color:var(--text-muted)}
.f textarea{min-height:176px;resize:vertical;line-height:1.5}
.f select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23cbd5e1' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:40px}
.f [aria-invalid=true]{border-color:var(--consent)}
.f .err{color:var(--consent);font-size:.9375rem;line-height:1.4}
.f .err:empty{display:none}
.f .help{color:var(--text-muted);font-size:.9375rem;line-height:1.4}
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative;display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--control-border);font-weight:500;color:var(--text-body);cursor:pointer;transition:box-shadow var(--d2) var(--ease),color var(--d2) var(--ease)}
.seg input{position:absolute;inset:0;opacity:0;cursor:pointer;margin:0}
.seg label:has(input:checked){box-shadow:inset 0 0 0 2px var(--text-primary);color:var(--text-primary);font-weight:600}
.seg label:has(input:focus-visible){outline:2px solid var(--focus-ring);outline-offset:2px}
.row2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0 16px}
@media (max-width:560px){.row2{grid-template-columns:minmax(0,1fr)}}
@media (max-width:860px){.builder{grid-template-columns:minmax(0,1fr)}}
.side-note h3{margin-bottom:12px}
.status{margin-top:16px;color:var(--text-silver)}
.status:empty{display:none}
.status.bad{color:var(--text-primary)}
.status a{text-decoration:underline;text-underline-offset:3px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.btn[disabled]{opacity:.6;cursor:progress}
.sent{margin-top:clamp(32px,4vw,56px);background:var(--surface);clip-path:var(--chamfer);padding:clamp(24px,4vw,48px);display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:24px clamp(24px,5vw,64px)}
.sent[hidden]{display:none}
.sent:focus{outline:none}
.sent h3{font-size:clamp(1.5rem,calc(1rem + 1.3vw),2.25rem);line-height:1.12;letter-spacing:-.03em;font-weight:700}
.sent h3+p{margin-top:12px}
.sent pre{margin:0;white-space:pre-wrap;font:400 1rem/1.5 var(--font-base);color:var(--text-silver);border-left:0;padding:0}
.sent .note{margin-top:16px;color:var(--text-muted);font-size:.9375rem}
@media (max-width:760px){.sent{grid-template-columns:minmax(0,1fr)}}

/* page heads */
.phead{padding-block:clamp(48px,7vw,104px) clamp(32px,4vw,64px)}
.phead .lede{margin-top:24px}
.phead-split{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:32px clamp(32px,5vw,72px);align-items:end}
@media (max-width:860px){.phead-split{grid-template-columns:minmax(0,1fr)}}

/* general composition helpers */
.split{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:32px clamp(32px,6vw,96px);align-items:start}
.split-5-7{grid-template-columns:minmax(0,1fr);gap:20px}.split-7-5{grid-template-columns:minmax(0,7fr) minmax(0,5fr)}
.split>h2{max-width:20ch}
@media (max-width:860px){.split,.split-7-5{grid-template-columns:minmax(0,1fr)}}
.mt-l{margin-top:clamp(40px,5vw,72px)}.mt-m{margin-top:clamp(24px,3vw,40px)}.mt-s{margin-top:16px}
.say{font-family:var(--font-display);color:var(--text-primary);font-weight:700;font-size:clamp(1.875rem,calc(1rem + 3.3vw),4rem);line-height:1.06;letter-spacing:-.04em;max-width:19ch;text-wrap:balance}
.phones{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(16px,2.4vw,32px);align-items:start;margin-top:clamp(32px,4vw,56px)}
.phones>:nth-child(2){margin-top:clamp(0px,4vw,56px)}
.phones>:nth-child(3){margin-top:clamp(0px,2vw,28px)}
@media (max-width:760px){.phones{grid-template-columns:minmax(0,1fr)}.phones>*{margin-top:0!important;max-width:420px}}
.plain li{padding-block:6px;max-width:58ch}
.confidence{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px clamp(24px,3vw,48px);margin-top:clamp(24px,3vw,40px)}
.confidence h3{font-size:1.25rem;margin-bottom:8px}
@media (max-width:760px){.confidence{grid-template-columns:minmax(0,1fr)}}

.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,220px),1fr));gap:32px clamp(24px,3vw,48px);margin-top:clamp(24px,3vw,40px)}
.cols h3{font-size:clamp(1.25rem,calc(1rem + .7vw),1.625rem);margin-bottom:10px}
.cols p{max-width:34ch}

/* pipeline */
.pipe{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));margin-top:clamp(24px,3vw,40px);border-top:var(--crease)}
.pipe li{padding:14px 12px 0 0;font-weight:600;color:var(--text-primary);line-height:1.25;position:relative}
.pipe li::before{content:"";position:absolute;left:0;top:-9px;width:3px;height:15px;background:var(--text-primary)}
.pipe small{display:block;font-weight:400;font-size:.9375rem;color:var(--text-muted);margin-top:4px;line-height:1.35}
@media (max-width:860px){.pipe{grid-template-columns:minmax(0,1fr);border-top:0;border-left:var(--crease);margin-left:2px}.pipe li{padding:0 0 18px 20px}.pipe li::before{left:-9px;top:6px;width:15px;height:3px}}

/* role chooser, season toggle */
.choices{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.choices button{appearance:none;background:none;border:0;min-height:44px;padding:0 14px;border-radius:var(--r);box-shadow:inset 0 0 0 1px var(--control-border);color:var(--text-body);font:500 .9375rem/1 var(--font-base);cursor:pointer;transition:box-shadow var(--d2) var(--ease),color var(--d2) var(--ease);touch-action:manipulation}
.choices button:hover{color:var(--text-primary);box-shadow:inset 0 0 0 1px var(--text-primary)}
.choices button[aria-pressed=true]{box-shadow:inset 0 0 0 2px var(--text-primary);color:var(--text-primary);font-weight:600}
.dash-groups{columns:3;column-gap:clamp(24px,3vw,48px);margin-top:clamp(32px,4vw,48px)}
.dash-groups>div{break-inside:avoid;padding-bottom:36px}
.dash-groups h3{font-size:1.0625rem;font-weight:500;color:var(--text-muted);letter-spacing:0;margin-bottom:12px}
.dash-groups li{padding-block:7px;color:var(--text-primary);font-weight:500;line-height:1.35;transition:opacity var(--d2) var(--ease)}
.dash-groups li span{display:block;font-weight:400;color:var(--text-muted);font-size:.9375rem}
.dash-groups li.off{opacity:.34}
@media (max-width:980px){.dash-groups{columns:2}}
@media (max-width:620px){.dash-groups{columns:1}}
.swap{position:relative}
.swap img[hidden]{display:none}

/* team */
.team{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:32px clamp(12px,2vw,24px);margin-top:clamp(32px,4vw,56px)}
.team a{display:block;text-decoration:none;color:inherit}
.team img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:var(--op,50% 20%);clip-path:var(--chamfer);transition:transform var(--d3) var(--ease)}
.team a:hover img{transform:translateY(-4px)}
.team a:hover b{text-decoration:underline;text-underline-offset:4px}
.team b{display:block;margin-top:14px;color:var(--text-primary);font-weight:600;line-height:1.25}
.team span{display:block;color:var(--text-muted);font-size:.9375rem;line-height:1.35;margin-top:4px}
@media (max-width:860px){.team{grid-template-columns:repeat(2,minmax(0,1fr))}}
.team-mini{grid-template-columns:repeat(5,minmax(0,1fr));margin-top:0}

/* full bios */
.bio{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr);gap:32px clamp(32px,6vw,96px);padding-block:clamp(48px,6vw,88px);scroll-margin-top:calc(var(--header) + 8px)}
.bio+.bio{border-top:1px solid var(--line)}
.bio-side{position:sticky;top:calc(var(--header) + 24px);align-self:start}
.bio-side img{width:100%;max-width:320px;aspect-ratio:4/5;object-fit:cover;object-position:var(--op,50% 20%);clip-path:var(--chamfer)}
.bio-side h2{font-size:clamp(1.625rem,calc(1rem + 1.3vw),2.25rem);line-height:1.1;letter-spacing:-.03em;margin-top:20px}
.bio-side p{color:var(--text-muted);margin-top:6px;line-height:1.4}
.bio-body{max-width:66ch}
.bio-body p+p{margin-top:1em}
.bio-body p{text-wrap:pretty}
.bio-body .kick{font-size:var(--t-lede);line-height:1.42;color:var(--text-primary)}
.bio-body h3{font-size:clamp(1.25rem,calc(1rem + .55vw),1.5rem);margin:1.6em 0 .55em}
@media (max-width:860px){.bio{grid-template-columns:minmax(0,1fr)}.bio-side{position:static}.bio-side img{max-width:220px}}

/* accordion */
.faq{margin-top:clamp(24px,3vw,40px)}
.faq details+details{border-top:1px solid var(--line)}
.faq summary{list-style:none;display:flex;justify-content:space-between;gap:16px;align-items:center;min-height:56px;padding-block:14px;cursor:pointer;color:var(--text-primary);font-weight:600;font-size:1.125rem;line-height:1.3}
.faq summary::-webkit-details-marker{display:none}
.faq summary svg{flex:none;transition:transform var(--d2) var(--ease)}
.faq details[open] summary svg{transform:rotate(45deg)}
.faq details p{padding-bottom:20px;max-width:62ch}

/* footer */
.foot{border-top:var(--crease);margin-top:var(--section);padding-block:clamp(40px,5vw,72px) 32px}
.foot-claim{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px 40px;align-items:end}
.foot-claim p{font-family:var(--font-display);color:var(--text-primary);font-weight:700;font-size:var(--t-hero);line-height:1.02;letter-spacing:-.045em}
.foot-grid{display:grid;grid-template-columns:minmax(0,5fr) repeat(3,minmax(0,2fr));gap:32px clamp(24px,3vw,48px);margin-top:clamp(48px,6vw,88px)}
.foot-grid h2{font-size:1rem;font-weight:500;letter-spacing:0;color:var(--text-muted);margin-bottom:8px;line-height:1.4}
.foot-grid a{display:flex;align-items:center;min-height:44px;color:var(--text-silver);text-decoration:none;font-size:.9375rem;transition:color var(--d2) var(--ease)}
.foot-grid a:hover{color:var(--text-primary);text-decoration:underline;text-underline-offset:4px}
.foot-brand img{width:156px;height:auto;margin-bottom:16px}
.foot-brand p{max-width:30ch;font-size:.9375rem;line-height:1.5}
.foot-tag{margin-top:clamp(40px,5vw,64px);padding-top:20px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px 32px;color:var(--text-muted);font-size:.875rem}
@media (max-width:860px){.foot-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.foot-brand{grid-column:1/-1}.foot-claim{grid-template-columns:minmax(0,1fr)}}
@media (max-width:1180px),(pointer:coarse){.foot-grid a{min-height:44px}}

/* reveal on enter. Content is never hidden without script. */
@media (prefers-reduced-motion:no-preference){
  .js .reveal{opacity:.01;transform:translateY(14px);transition:opacity var(--d4) var(--ease),transform var(--d4) var(--ease);transition-delay:calc(var(--d,0)*60ms)}
  .js .reveal.in{opacity:1;transform:none}
  .js .seat.open.reveal{transform:none}
}
@media (pointer:coarse){body::after{display:none}}

@media print{
  :root{--bg:#fff;--surface:#fff;--text-primary:#000;--text-silver:#111;--text-body:#111;--text-muted:#333;--line:#bbb;--consent:#000;--crease:2px solid #000}
  html,body{background:#fff;color:#111}
  body::after,.top,.foot,.acts,.no-print,.skip{display:none!important}
  .sec,.phead{padding-block:18px}
  .gates li,.spec>div{break-inside:avoid}
  a{text-decoration:none}
}

.ct-jump{position:fixed;inset:0;z-index:29;background:var(--bg);opacity:0;pointer-events:none;transition:opacity 200ms cubic-bezier(.2,.7,.3,1)}
.ct-jump.on{opacity:1;transition-duration:180ms}
@media (prefers-reduced-motion:reduce){.ct-jump{display:none}}

/* /./landing.css?v=20261107 */
/* CreaseTech landing page: the page shell.
   Self-hosted type, the logo intro, the anchor header and progress line, section hand-offs,
   the condensed child-safety section and the social footer.
   Tokens come from assets/site.css (Midnight and Mint, ADR-029). Motion: transform and opacity only,
   timings on the 100/200/300/500 ms ladder, every animation has a reduced-motion state. */

/* ---------- Type: Plus Jakarta Sans, self-hosted (was Google Fonts) ---------- */
@font-face{font-family:"Plus Jakarta Sans";src:url(./asset-221a4135d06a.221a4135d06a.woff2) format("woff2");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(./asset-bad081c8dbc1.bad081c8dbc1.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(./asset-8872bb5c9111.8872bb5c9111.woff2) format("woff2");font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(./asset-2050755bf475.2050755bf475.woff2) format("woff2");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Plus Jakarta Sans";src:url(./asset-5f301a8ef9c2.5f301a8ef9c2.woff2) format("woff2");font-weight:800;font-style:normal;font-display:swap}

html{scrollbar-gutter:stable}
/* Lenis (desktop pointer only) */
html.lenis,html.lenis body{height:auto}
.lenis.lenis-smooth{scroll-behavior:auto!important}
.lenis.lenis-smooth [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-stopped{overflow:hidden}

/* ---------- Logo intro ---------- */
.ct-intro{display:none}
.intro-on{overflow:hidden}
.intro-on .ct-intro{display:grid}
.ct-intro{position:fixed;inset:0;z-index:100;place-items:center;background:var(--bg);
  /* failsafe: if the script never arrives, the intro still leaves */
  animation:ct-intro-leave var(--d3) linear 4.4s forwards}
.ct-intro::before{content:"";position:absolute;inset:0;pointer-events:none;
  background:radial-gradient(48% 42% at 50% 50%,color-mix(in srgb,var(--accent) 9%,transparent),transparent 72%);opacity:0;animation:ct-fade var(--d4) var(--ease) 800ms forwards}
.ct-intro.is-lifting{animation:none;background:transparent;transition:background-color 0s}
.ct-intro.is-lifting::before{opacity:0;transition:opacity var(--d3) var(--ease)}
.ct-intro-veil{position:absolute;inset:0;background:var(--bg)}
.ct-intro.is-lifting .ct-intro-veil{opacity:0;transition:opacity var(--d4) cubic-bezier(.4,0,.2,1) var(--d1)}
.ct-intro.is-gone{opacity:0;visibility:hidden;transition:opacity var(--d3) var(--ease),visibility 0s linear var(--d3)}
.ct-mark{position:relative;color:var(--accent);width:min(78vw,720px);transform-origin:0 0;will-change:transform}
.ct-mark svg{display:block;width:100%;height:auto;overflow:visible}
.ct-mark .ii-real{opacity:0;animation:ct-fade 1ms linear 1040ms forwards}
.ct-mark .ii-prim{animation:ct-hide 1ms linear 1040ms forwards}
.ct-mark .ii-prim rect{fill:var(--accent);transform-box:fill-box}
.ct-mark .ii-s1,.ct-mark .ii-s2{transform-origin:50% 0;transform:scaleY(0);animation:ct-grow-y var(--d4) cubic-bezier(.2,.7,.3,1) forwards}
.ct-mark .ii-s1{animation-delay:100ms}
.ct-mark .ii-s2{animation-delay:200ms}
.ct-mark .ii-bar{transform-origin:100% 50%;transform:scaleX(0);animation:ct-grow-x var(--d4) cubic-bezier(.65,0,.35,1) 560ms forwards}
.ct-mark .ii-arm{transform-origin:0 50%;transform:scaleX(0);animation:ct-grow-x var(--d4) cubic-bezier(.65,0,.35,1) 600ms forwards}
.ct-mark .ii-l{opacity:0;transform-box:fill-box;transform:translateX(calc(var(--dx) * 1px));animation:ct-letter var(--d4) cubic-bezier(.16,1,.3,1) forwards;animation-delay:calc(900ms + var(--i) * 50ms)}
.ct-skip{position:absolute;right:max(var(--gut),env(safe-area-inset-right,0px));bottom:max(24px,env(safe-area-inset-bottom,0px));min-height:44px;padding:0 16px;border:0;border-radius:var(--r);background:transparent;color:var(--text-muted);font:500 .9375rem/1 var(--font-base);cursor:pointer;opacity:0;animation:ct-fade var(--d3) var(--ease) 400ms forwards;transition:color var(--d2) var(--ease)}
.ct-skip:hover{color:var(--text-primary)}
.ct-intro.is-lifting .ct-skip{opacity:0;animation:none;transition:opacity var(--d1) linear}
@keyframes ct-grow-y{to{transform:scaleY(1)}}
@keyframes ct-grow-x{to{transform:scaleX(1)}}
@keyframes ct-letter{to{opacity:1;transform:none}}
@keyframes ct-fade{to{opacity:1}}
@keyframes ct-hide{to{opacity:0}}
@keyframes ct-intro-leave{to{opacity:0;visibility:hidden}}
.intro-on .top .logo img{opacity:0}
.top .logo img{transition:opacity var(--d1) linear}
@media (prefers-reduced-motion:reduce){
  .ct-mark .ii-prim{display:none}
  .ct-mark .ii-real,.ct-mark .ii-l,.ct-intro::before,.ct-skip{animation:none;opacity:1;transform:none}
  .ct-intro{animation:ct-intro-leave var(--d3) linear 1.6s forwards}
}

html.pom-wait #peace-of-mind{visibility:hidden}

/* ---------- Header: section anchors, one CTA, progress line ---------- */
.top{z-index:30}
.top-in{gap:clamp(12px,2.4vw,32px)}
.top .nav{margin-inline-start:auto}
.top .nav a{min-width:44px;justify-content:center}
.top .nav a[aria-current="true"]{color:var(--text-primary);box-shadow:inset 0 -2px 0 var(--accent)}
.top-bar{position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform-origin:0 50%;transform:scaleX(0);pointer-events:none}
.mnav-panel .mnav-sec{display:grid;gap:4px;margin-bottom:12px}

/* ---------- Hand-offs between sections: same Midnight floor, a soft seam instead of a hard cut ---------- */
.seam{position:relative;height:clamp(48px,7vw,96px);margin-block:calc(clamp(48px,7vw,96px) * -.5);pointer-events:none;z-index:2}
.seam::after{content:"";position:absolute;left:var(--gut);right:var(--gut);top:50%;height:1px;max-width:1320px;margin-inline:auto;
  background:linear-gradient(90deg,transparent,color-mix(in srgb,var(--accent) 34%,transparent) 50%,transparent);opacity:.55}
.seam.is-draw::after{transform:scaleX(.2);opacity:0;transition:transform 900ms cubic-bezier(.16,1,.3,1),opacity var(--d4) var(--ease)}
.seam.is-draw.in::after{transform:none;opacity:.55}
@media (prefers-reduced-motion:reduce){.seam.is-draw::after{transform:none;opacity:.55;transition:none}}

/* Section 6 sits on the page floor: let its own gradient fade in from Midnight */
.hw{background:var(--bg)}

/* ---------- Section 8: founders board inside the page rhythm ---------- */
.fbs{padding-block:var(--section) calc(var(--section) * .6)}
.fbs .fb{border-color:var(--line)}
.fbs .fb-note,.fbs .fb-label{font-size:.875rem}
/* Audit: no text under 14 px on the board or in the book (labels were 11 to 13 px) */
.fbs .fc-no{font-size:clamp(.875rem,6cqi,1rem)}
.fbs .fc-who,.fbs .fc-hint{font-size:.875rem;letter-spacing:.08em}
.fbs .fc-desc{font-size:clamp(.875rem,5.2cqi,.9375rem)}
.fbk-back .fc-who,.fbk-back .fbk-micro,.fbk-back .fbk-kicker,.fbk-back .fbk-cap b,.fbk-back .fbk-nav button{font-size:.875rem}
.fb-title{font-size:clamp(2.5rem,1rem + 4.6vw,5rem)}

/* The staggered board needs 1200 px to hold 14 px text; below that it uses the board's own two-column layout */
@media (min-width:901px) and (max-width:1199px){
  .fbs .fb-head{grid-template-columns:1fr 1fr}
  .fbs .fb-intro{grid-column:1;grid-row:2;margin-top:12px}
  .fbs .fb-title{grid-column:2;grid-row:1 / 3}
  .fbs .fb-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:auto}
  .fbs .fb-note{display:none}
  .fbs .fb-cta{grid-column:1 / -1;grid-row:auto;justify-self:start;order:9}
  .fbs .fb-cell{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4 / 3}
  .fbs .fb-cell--c3{grid-column:1 / -1!important;aspect-ratio:8 / 3}
}

/* ---------- Social footer ---------- */
.sf{position:relative;padding:var(--section) 0 0;border-top:1px solid var(--line);overflow:hidden;
  background:radial-gradient(60% 50% at 85% 0%,color-mix(in srgb,var(--accent) 8%,transparent),transparent 70%),var(--bg)}
.sf-grid{display:grid;gap:clamp(40px,6vw,72px)}
@media (min-width:1024px){.sf-grid{grid-template-columns:minmax(0,5fr) minmax(0,7fr);align-items:end}}
.sf-sign{font:700 var(--t-h2)/1.04 var(--font-display);letter-spacing:-.04em;color:var(--text-primary);max-width:14ch;text-wrap:balance}
.sf-sign span{color:var(--accent)}
.sf-sub{margin-top:20px;color:var(--text-silver);font-size:var(--t-lede);line-height:1.45;max-width:36ch}
.sf-links{display:grid;border-top:1px solid var(--line-strong)}
.sf-links li{border-bottom:1px solid var(--line-strong)}
.sf-link{position:relative;display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:center;gap:16px;min-height:76px;padding:12px 4px;color:var(--text-primary);text-decoration:none;isolation:isolate}
.sf-link::before{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--accent);transform:scaleX(0);transform-origin:0 50%;transition:transform var(--d3) var(--ease)}
.sf-link:hover::before,.sf-link:focus-visible::before{transform:none}
.sf-ico{width:28px;height:28px;color:var(--accent)}
.sf-ico svg{width:100%;height:100%;display:block}
.sf-name{display:grid;gap:2px;min-width:0}
.sf-name b{font:600 clamp(1.25rem,1rem + 1vw,1.75rem)/1.15 var(--font-display);letter-spacing:-.02em}
.sf-name span{color:var(--text-muted);font-size:.9375rem;overflow-wrap:anywhere}
.sf-go{width:24px;height:24px;color:var(--text-muted);transition:transform var(--d2) var(--ease),color var(--d2) var(--ease)}
.sf-link:hover .sf-go{transform:translate(3px,-3px);color:var(--accent)}
.sf-mark{margin-top:clamp(56px,8vw,112px);opacity:.9}
.sf-mark .ct-mark{width:100%;max-width:none;transform:none}
/* The footer mark replays the opening build once it comes into view (without script it is simply drawn) */
.js .sf-mark:not(.in) :is(.ii-l,.ii-s1,.ii-s2,.ii-bar,.ii-arm,.ii-real,.ii-prim){animation-play-state:paused}
.sf-legal{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px 32px;padding-block:28px max(28px,env(safe-area-inset-bottom,0px));margin-top:clamp(24px,3vw,40px);border-top:1px solid var(--line);color:var(--text-muted);font-size:.9375rem}
.sf-legal nav{display:flex;flex-wrap:wrap;gap:0 20px}
.sf-legal a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;min-width:44px;color:var(--text-body);text-decoration:none}
.sf-legal a:hover{color:var(--text-primary)}
@media (prefers-reduced-motion:reduce){.sf-link::before,.sf-go{transition:none}}
@media (max-width:639px){.sf-link{grid-template-columns:32px minmax(0,1fr) auto;gap:12px;min-height:68px}.sf-ico{width:24px;height:24px}}

/* Performance: the eleven demo tiles loop their previews; hold the loops still while the page is gliding */
html.lenis-scrolling .hw-map.is-live *,html.lenis-scrolling .hw-map.is-live *::before,html.lenis-scrolling .hw-map.is-live *::after{animation-play-state:paused!important}


/* /assets/pom/pom.css?v=20261107 */
/* CreaseTech home, section 2: Peace of mind. v1.0
   Reads the site tokens from assets/site.css (Midnight and Mint, ADR-029). The hex values below are fallbacks only.
   Base styles = the stacked layout (phones, tablets, touch, reduced motion, no script).
   .pom.is-pin  = the pinned desktop sequence (added by pom.js on hover devices 1024 px and up).
   .pom.pom-motion = stacked layout with the enter-once morph (added by pom.js when motion is allowed). */

@font-face{font-family:"Caveat Pom";src:url(./asset-766526073f09.766526073f09.woff2) format("woff2");font-weight:500;font-style:normal;font-display:swap}

.pom{
  --p-bg:var(--bg,#0f172a);--p-surface:var(--surface,#1e293b);--p-raised:var(--surface-raised,#263449);--p-line:var(--line-strong,#3a4a63);
  --p-chalk:var(--text-primary,#f8fafc);--p-silver:var(--text-silver,#e2e8f0);--p-body:var(--text-body,#cbd5e1);--p-muted:var(--text-muted,#94a3b8);
  --p-accent:var(--accent,#2dd4bf);--p-accent-h:var(--accent-hover,#5eead4);--p-accent-p:var(--accent-pressed,#14b8a6);--p-on:var(--on-accent,#0f172a);--p-focus:var(--focus-ring,#5eead4);
  --p-f:var(--font-display,"Plus Jakarta Sans",system-ui,sans-serif);--p-hand:"Caveat Pom","Segoe Print","Bradley Hand",cursive;
  --p-r:var(--r,6px);--p-gut:var(--gut,clamp(16px,4vw,40px));--p-header:var(--header,64px);--p-ease:var(--ease,cubic-bezier(.2,.7,.3,1));
  --p-cut:28px;--p-chamfer:polygon(0 0,calc(100% - var(--p-cut)) 0,100% var(--p-cut),100% 100%,0 100%);
  --p-ink:var(--p-bg);--p-rule:color-mix(in srgb,var(--p-muted) 42%,transparent);
  --p-shadow:0 18px 32px -18px color-mix(in srgb,var(--p-bg) 85%,transparent);
  position:relative;z-index:1;background:var(--p-bg);color:var(--p-body);
  padding-block:var(--section,clamp(72px,10vw,144px));font-family:var(--p-f)
}
.pom *,.pom *::before,.pom *::after{box-sizing:border-box}
.pom :where(h2,h3,p,ul,figure,figcaption){margin:0;padding:0}
.pom ul{list-style:none}
.pom :focus-visible{outline:2px solid var(--p-focus);outline-offset:3px;border-radius:2px}
.pom-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
.pom-stage{max-width:1320px;margin-inline:auto;padding-inline:max(var(--p-gut),env(safe-area-inset-left,0px)) max(var(--p-gut),env(safe-area-inset-right,0px))}
.pom-mask,.pom-frame,.pom-ghost,.pom-nav,.pom-inset{display:none}

/* Headline */
.pom-eyebrow{font:600 .9375rem/1.3 var(--p-f);color:var(--p-accent);margin-bottom:16px}
.pom h2{font:700 clamp(2rem,calc(1rem + 3.6vw),3.25rem)/1.05 var(--p-f);letter-spacing:-.04em;color:var(--p-chalk);text-wrap:balance}
.pom-l1,.pom-l2{display:block}
.pom-l2{color:var(--p-accent);margin-top:.08em}
.pom-sub{margin-top:20px;font-size:clamp(1.125rem,calc(1rem + .5vw),1.3125rem);line-height:1.45;color:var(--p-silver);max-width:40ch;text-wrap:pretty}

/* Chapters, stacked */
.pom-chs{margin-top:clamp(48px,7vw,96px);display:grid;gap:clamp(64px,9vw,128px)}
.pom-ch{display:grid;gap:24px;align-items:center}
@media (min-width:768px){.pom-ch{grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:clamp(32px,5vw,64px)}}
.pom-card{position:relative;width:100%;max-width:520px;aspect-ratio:.93;clip-path:var(--p-chamfer);container-type:size}
.pom-card-in{position:absolute;inset:0;background:var(--p-surface);overflow:hidden}
.pom-chaos{position:absolute;inset:0;overflow:hidden;container-type:size;background:var(--p-surface)}
.pom-screen{position:absolute;inset:0;overflow:hidden;background:var(--p-surface)}
.pom-screen img{display:block;width:100%;height:100%;object-fit:contain;padding:4%}

/* Chaos pieces: sized in container units so the inset copy scales by itself */
.pom-bit{position:absolute;left:var(--x);top:var(--y);width:var(--w,auto);transform:rotate(var(--r,0deg));transform-origin:50% 50%}
.pom-paper{background-color:var(--p-silver);color:var(--p-ink);font:500 5.4cqw/1.22 var(--p-hand);padding:3cqw 4cqw 3.4cqw;box-shadow:var(--p-shadow)}
.pom-sheet{background-image:repeating-linear-gradient(to bottom,transparent 0 calc(1.22em - 1px),var(--p-rule) calc(1.22em - 1px) 1.22em);background-position:0 calc(3cqw + .1em)}
.pom-paper b{display:block;font-weight:500;font-size:1.14em;text-decoration:underline;text-decoration-thickness:.06em;text-underline-offset:.12em}
.pom-paper span,.pom-paper s{display:block}
.pom-paper s{text-decoration-thickness:.08em;opacity:.8}
.pom-loop{position:relative;width:max-content;max-width:100%}
.pom-loop::after{content:"";position:absolute;inset:-.12em -.3em;border:.14em solid var(--p-ink);border-radius:50%;transform:rotate(-2deg);opacity:.75}
.pom-pad{padding-top:6cqw}
.pom-pad::before{content:"";position:absolute;left:6%;right:6%;top:2cqw;height:2.2cqw;background:radial-gradient(circle,var(--p-surface) 0 .9cqw,transparent 1cqw) 0 0/6cqw 2.2cqw repeat-x}
.pom-tally{letter-spacing:.18em;font-size:1.2em}
.pom-slip{font-size:4.6cqw}
.pom-scrap{font-size:4.2cqw}
.pom-cup{width:24cqw;height:24cqw;border-radius:50%;border:1.6cqw solid color-mix(in srgb,var(--p-muted) 34%,transparent);box-shadow:inset 0 0 0 .5cqw color-mix(in srgb,var(--p-muted) 18%,transparent)}
.pom-card-slip span{font-family:var(--p-f);font-weight:600;font-size:.72em;font-variant-numeric:tabular-nums;border-top:1px solid var(--p-rule);padding-top:.25em;margin-top:.25em}
.pom-form{font-family:var(--p-f);font-size:3.6cqw;line-height:1.35}
.pom-form b{font-family:var(--p-f);font-weight:700;text-decoration:none;font-size:1em}
.pom-field{margin-top:.6em;color:color-mix(in srgb,var(--p-ink) 70%,transparent)}
.pom-hand{font:500 2em/1 var(--p-hand);margin-top:.15em;border-bottom:1px solid var(--p-rule)}
.pom-zero{color:var(--p-silver);font-family:var(--p-hand);text-align:center}
.pom-zero span{display:grid;place-items:center;width:30cqw;height:30cqw;font-size:22cqw;line-height:1;border:1.2cqw solid var(--p-silver);border-radius:50%;opacity:.9}
.pom-zero small{display:block;margin-top:1.5cqw;font-size:5cqw}
.pom-bubble{max-width:64cqw;background:var(--p-raised);color:var(--p-silver);font:500 3.9cqw/1.3 var(--p-f);padding:2.6cqw 3.6cqw;border-radius:var(--p-r);border:1px solid var(--p-line)}
.pom-me{background:var(--p-line);border-color:var(--p-control,#7184a0);color:var(--p-chalk)}
.pom-chat{background:var(--p-surface)}
.pom-chat-top{display:flex;justify-content:space-between;align-items:center;padding:3.4cqw 5cqw;background:var(--p-raised);color:var(--p-chalk);font:700 3.9cqw/1.2 var(--p-f)}
.pom-chat-top span{font-weight:600;font-size:.86em;color:var(--p-bg);background:var(--p-silver);padding:.3em .7em;border-radius:var(--p-r)}
.pom-seen{color:var(--p-muted);font:500 3.4cqw/1 var(--p-f)}

/* Chapter copy */
.pom-who{font:600 1.0625rem/1.3 var(--p-f);letter-spacing:0;color:var(--p-silver)}
.pom-was{position:relative;margin-top:12px;font-size:1.0625rem;line-height:1.5;color:var(--p-muted);max-width:42ch}
.pom-strike{position:absolute;inset:0;color:transparent;text-decoration:line-through;text-decoration-color:color-mix(in srgb,var(--p-accent) 85%,transparent);text-decoration-thickness:2px;pointer-events:none}
.pom-ans{margin-top:16px;font:700 clamp(1.5rem,calc(1rem + 1.2vw),2rem)/1.15 var(--p-f);letter-spacing:-.025em;color:var(--p-chalk);max-width:22ch;text-wrap:balance}
.pom-proofs{margin-top:24px;display:grid;gap:12px;max-width:40ch}
.pom-proofs li{position:relative;padding-left:32px;font-size:1.0625rem;line-height:1.45;color:var(--p-body)}
.pom-proofs li::before{content:"";position:absolute;left:0;top:.68em;width:16px;height:3px;background:var(--p-accent)}

/* Close */
.pom-close-h{font:700 clamp(1.625rem,calc(1rem + 1.6vw),2.25rem)/1.12 var(--p-f);letter-spacing:-.03em;color:var(--p-chalk);max-width:20ch;text-wrap:balance}
.pom-close-h span{display:block;color:var(--p-accent)}
.pom-btn{display:inline-flex;align-items:center;gap:8px;margin-top:32px;min-height:52px;padding:0 24px;border-radius:var(--p-r);background:var(--p-accent);color:var(--p-on);font:700 1.0625rem/1 var(--p-f);text-decoration:none;white-space:nowrap;transition:background-color 200ms var(--p-ease),transform 100ms var(--p-ease)}
.pom-btn svg{width:20px;height:20px;transition:transform 200ms var(--p-ease)}
.pom-btn:hover{background:var(--p-accent-h)}
.pom-btn:hover svg{transform:translateX(3px)}
.pom-btn:active{background:var(--p-accent-p);transform:translateY(1px)}
.pom-facts{margin-top:24px;display:flex;flex-wrap:wrap;gap:8px 28px;color:var(--p-silver);font-size:.9375rem}
.pom-note{margin-top:12px;color:var(--p-muted);font-size:.875rem}

/* Stacked, with motion: each chapter morphs once as it enters (classes from pom.js) */
@media (prefers-reduced-motion:no-preference){
  /* Slowed (12 Nov): the problem card holds about 1.4 s, the problem line is struck through, the chaos drifts off,
     then the real screen rises and the proofs follow. About 3.2 s end to end. */
  .pom-motion .pom-screen{transform:translateY(101%);transition:transform 800ms var(--p-ease) 1900ms}
  .pom-motion .pom-screen>*{transform:translateY(-30%);transition:transform 800ms var(--p-ease) 1900ms}
  .pom-motion .pom-bit{transition:transform 900ms var(--p-ease),opacity 600ms var(--p-ease);transition-delay:calc(1400ms + var(--i,0) * 120ms)}
  .pom-motion .pom-strike{opacity:0;transition:opacity 400ms var(--p-ease) 1000ms}
  .pom-motion .pom-proofs li{opacity:0;transform:translateY(12px);transition:opacity 400ms var(--p-ease),transform 400ms var(--p-ease);transition-delay:calc(2600ms + var(--k,0) * 160ms)}
  .pom-motion .pom-proofs li:nth-child(2){--k:1}.pom-motion .pom-proofs li:nth-child(3){--k:2}
  .pom-motion .is-on .pom-screen,.pom-motion .is-on .pom-screen>*{transform:none}
  .pom-motion .is-on .pom-bit{transform:translate(var(--sx),var(--sy)) rotate(var(--sr));opacity:0}
  .pom-motion .is-on .pom-strike,.pom-motion .is-on .pom-proofs li{opacity:1;transform:none}
}

/* ---------- Pinned desktop sequence ---------- */
.pom.is-pin{padding:0;margin-top:var(--pom-overlap,0px);background:transparent;pointer-events:none}
.pom.is-pin .pom-stage{
  position:relative;height:100vh;height:100dvh;max-width:none;overflow:hidden;pointer-events:none;
  display:grid;grid-template-columns:minmax(220px,.75fr) minmax(0,1.45fr) minmax(320px,1fr);grid-template-rows:auto minmax(0,1fr);
  grid-template-areas:"head head head" "side card copy";column-gap:clamp(32px,3.6vw,64px);
  padding:calc(var(--p-header) + clamp(16px,3vh,40px)) max(var(--p-gut),calc(50% - 720px + var(--p-gut))) clamp(24px,4.5vh,48px)
}
.is-pin .pom-mask{display:block;position:absolute;inset:0;z-index:1;background:var(--p-bg)}
.is-pin .pom-frame{display:block;grid-area:card}
.is-pin .pom-ghost{display:block;position:absolute;left:var(--fx);top:var(--fy);width:var(--fw);height:var(--fh);z-index:3}
.is-pin .pom-gc{position:absolute;left:0;top:0;width:440px;height:520px;transform-origin:0 0}
.is-pin .pom-gc .cth-card{width:440px;height:520px}
.is-pin .pom-head{grid-area:head;position:relative;z-index:4;padding-bottom:clamp(16px,3.2vh,36px)}
.is-pin .pom-eyebrow{margin-bottom:8px}
.pom.is-pin h2{font-size:clamp(2.25rem,calc(.6rem + 3.1vw),3.25rem);line-height:1.04}
.is-pin .pom-l2{padding-left:clamp(48px,11vw,200px)}
.is-pin .pom-side{grid-area:side;position:relative;z-index:4;display:flex;flex-direction:column;min-height:0}
.is-pin .pom-sub{margin-top:4px;font-size:clamp(1.0625rem,calc(.9rem + .35vw),1.25rem)}
.is-pin .pom-nav{display:grid;margin-top:clamp(20px,4vh,40px);border-left:1px solid var(--p-line)}
.pom-nav a{position:relative;display:flex;align-items:center;min-height:44px;padding-left:16px;color:var(--p-muted);font-weight:600;font-size:1rem;text-decoration:none;transition:color 200ms var(--p-ease)}
.pom-nav a::before{content:"";position:absolute;left:-1px;top:10px;bottom:10px;width:3px;background:var(--p-accent);transform:scaleY(0);transition:transform 200ms var(--p-ease)}
.pom-nav a:hover{color:var(--p-silver)}
.pom-nav a.on{color:var(--p-chalk)}
.pom-nav a.on::before{transform:none}
.is-pin .pom-inset{display:block;margin-top:auto;width:min(100%,200px)}
.pom-inset-in{position:relative;aspect-ratio:.93;container-type:size;clip-path:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%);background:var(--p-surface)}
.pom-inset-in .pom-chaos{position:absolute;inset:0}
.pom-inset figcaption{margin-top:8px;font-size:.875rem;color:var(--p-muted)}
@media (max-height:760px){.is-pin .pom-inset{width:min(100%,150px)}}
@media (max-height:680px){.is-pin .pom-inset{display:none}}
.is-pin .pom-chs,.is-pin .pom-ch{display:contents}
.is-pin .pom-card{position:absolute;left:var(--fx);top:var(--fy);width:var(--fw);height:var(--fh);max-width:none;aspect-ratio:auto;z-index:2}
.is-pin .pom-copy,.is-pin .pom-close{grid-area:copy;align-self:center;position:relative;z-index:4;pointer-events:none}
.is-pin .pom-close{margin:0}
.is-pin .pom-close.is-live{pointer-events:auto;z-index:5}
.is-pin .pom-note{position:absolute;left:0;top:100%;white-space:nowrap}
.is-pin .pom-bit,.is-pin .pom-card-in,.is-pin .pom-screen,.is-pin .pom-screen>*{will-change:transform}

/* Lenis (smooth scroll) house rules, from lenis.css 1.3 */
html.lenis,html.lenis body{height:auto}
.lenis:not(.lenis-autoToggle).lenis-stopped{overflow:clip}
.lenis [data-lenis-prevent]{overscroll-behavior:contain}
.lenis.lenis-smooth iframe{pointer-events:none}
.lenis.lenis-smooth{scroll-behavior:auto!important}

/* Section 2, schools, academies and clubs: a live academy dashboard (no side navigation, just the answers).
   Dark teal glass, the same skin as the dashboard section. Sized in container units of the card. Sample data. */
.pom-screen:has(.adb){background:#05131a}
.adb{--a-ink:#f8fafc;--a-sub:#b4c9cf;--a-mut:#8fa9b0;--a-line:rgba(148,197,205,.16);--a-line2:rgba(94,234,212,.28);
  --a-teal:#2dd4bf;--a-teal2:#5eead4;--a-amber:#fbbf24;--a-rose:#fb7185;--a-sky:#38bdf8;
  --a-tile:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  position:absolute;inset:0;display:grid;grid-template-rows:auto auto minmax(0,1fr);gap:2.2cqw;padding:3.6cqw;
  font-size:clamp(10.5px,2.45cqw,13.5px);line-height:1.25;color:var(--a-ink);font-variant-numeric:tabular-nums;text-align:left;
  background:radial-gradient(120% 80% at 0% 0%,rgba(45,212,191,.16),rgba(45,212,191,0) 55%),radial-gradient(90% 70% at 100% 100%,rgba(56,189,248,.08),rgba(56,189,248,0) 60%),linear-gradient(160deg,#0d2c33 0%,#081b21 52%,#05131a 100%)}
.adb *{box-sizing:border-box}
.adb p{margin:0}
.adb-hd{display:flex;align-items:flex-start;gap:.8em}
.adb-node{flex:none;width:.9em;height:.9em;margin-top:.3em;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d9fff8,var(--a-teal) 55%,#0d9488);box-shadow:0 0 0 .22em rgba(45,212,191,.16),0 0 1em rgba(45,212,191,.75)}
.adb-ht{flex:1;min-width:0}
.adb-t{font-weight:700;font-size:1.3em;letter-spacing:-.01em;line-height:1.15}
.adb-s{margin-top:.15em;color:var(--a-sub)}
.adb-chip{flex:none;display:inline-flex;align-items:center;height:2em;padding:0 .8em;border-radius:999px;border:1px solid var(--a-line2);background:rgba(8,27,33,.6);color:var(--a-teal2);font-weight:600}
.adb-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1.6cqw}
.adb-k{display:grid;gap:.25em;padding:.7em .9em;border-radius:1em;background:var(--a-tile);border:1px solid var(--a-line)}
.adb-k span{color:var(--a-sub);font-weight:600}
.adb-k b{font-size:1.9em;font-weight:800;letter-spacing:-.03em;line-height:1}
.adb-k small{font-size:.5em;font-weight:600;color:var(--a-sub);letter-spacing:0}
.adb-hi{border-color:rgba(45,212,191,.55);box-shadow:inset 0 0 0 1px rgba(45,212,191,.15),0 0 1.6em -.6em rgba(45,212,191,.8)}
.adb-hi b{color:var(--a-teal2);text-shadow:0 0 1.2em rgba(45,212,191,.45)}
.adb-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-rows:minmax(0,1fr) minmax(0,1fr);gap:1.6cqw;min-height:0}
.adb-tile{display:flex;flex-direction:column;justify-content:space-between;gap:.35em;min-width:0;min-height:0;overflow:hidden;padding:.75em .9em;border-radius:1em;background:var(--a-tile);border:1px solid var(--a-line)}
.adb-h{font-weight:700;color:var(--a-ink);margin-bottom:.15em!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adb-h span{display:block;font-weight:500;color:var(--a-mut);font-size:.94em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adb-h span b{color:var(--a-amber);font-weight:600}
.adb-bar{position:relative;display:block;height:.55em;border-radius:999px;background:rgba(148,197,205,.1);overflow:hidden}
.adb-bar i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit;background:linear-gradient(90deg,#0f766e,var(--a-teal));box-shadow:0 0 .8em rgba(45,212,191,.55)}
.adb em{font-style:normal;font-weight:700;text-align:right}
/* age groups: players and attendance in one table */
.adb-row{display:grid;grid-template-columns:2.6em 3.4em minmax(0,1fr) 2.6em;align-items:center;gap:.5em}
.adb-row b{font-weight:700}
.adb-n{text-align:right;color:var(--a-sub)}
.adb-cols{color:var(--a-mut)}
.adb-cols span:nth-child(2){text-align:right}.adb-cols span:nth-child(3){grid-column:3/5;padding-left:.2em}
.adb-low .adb-bar i{background:linear-gradient(90deg,#92400e,var(--a-amber));box-shadow:0 0 .8em rgba(251,191,36,.4)}
.adb-low em{color:var(--a-amber)}
/* sessions planned vs done: the track is the plan, the fill is what was delivered */
.adb-d{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:.25em .5em}
.adb-l{display:inline-flex;align-items:center;gap:.45em;color:var(--a-sub);font-weight:600}
.adb-l i{width:.65em;height:.65em;border-radius:.2em}
.adb-v{font-weight:700}
.adb-v small{color:var(--a-mut);font-weight:600}
.adb-track{grid-column:1/-1;position:relative;height:.55em;border-radius:999px;background:repeating-linear-gradient(90deg,rgba(148,197,205,.16) 0 3px,transparent 3px 6px);box-shadow:inset 0 0 0 1px var(--a-line)}
.adb-track i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:inherit}
.adb .k-tec{background:var(--a-teal);box-shadow:0 0 .7em rgba(45,212,191,.6)}.adb .k-tac{background:var(--a-sky);box-shadow:0 0 .7em rgba(56,189,248,.5)}
.adb .k-phy{background:var(--a-amber);box-shadow:0 0 .7em rgba(251,191,36,.45)}.adb .k-men{background:var(--a-rose);box-shadow:0 0 .7em rgba(251,113,133,.45)}
/* contribution */
.adb-c{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr) 2.3em;align-items:center;gap:.5em}
.adb-nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adb-nm small{font-size:.8em;font-weight:700;color:var(--a-amber);margin-left:.25em}
.adb-leave .adb-bar i{background:linear-gradient(90deg,#92400e,var(--a-amber));box-shadow:0 0 .8em rgba(251,191,36,.4)}
/* depth chart: first choice, then cover; a missing cover is flagged */
.adb-p{display:grid;grid-template-columns:3.9em minmax(0,1fr) minmax(0,1fr);align-items:center;gap:.35em}
.adb-p b{color:var(--a-mut);font-weight:600}
.adb-p span{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;padding:.12em .35em;font-size:.94em;border-radius:.45em;background:rgba(8,27,33,.55);border:1px solid var(--a-line)}
.adb-p span:nth-of-type(1){border-color:rgba(45,212,191,.45);color:var(--a-ink)}
.adb-p span:nth-of-type(2){color:var(--a-sub)}
.adb-p .adb-gap{color:#2a1c02!important;background:var(--a-amber);border-color:transparent;font-weight:700}
/* Narrow cards (phones): the card grows taller and the four panels stack in pairs with names on their own lines. */
@media (max-width:599.98px){
  #pom-inst .pom-card{aspect-ratio:.62}
  .adb{font-size:clamp(10.5px,2.9cqw,12px)}
  .adb-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .adb-p{grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:.2em .3em}
  .adb-p b{grid-column:1/-1}
  .adb-c{grid-template-columns:minmax(0,1fr) 2.3em}
  .adb-c .adb-bar{grid-column:1/-1;grid-row:2}
  .adb-k b{font-size:1.6em}
}


/* /assets/creed/creed.css?v=20261107 */
/* CreaseTech home, section 3: The Creed. v1.1 (6 Nov: 2x lead as the heading, the pro line under the panels, panels fit their text, level tiles on a turning drum)
   Reads the site tokens from assets/site.css (Midnight and Mint, ADR-029, plus --gradient-lime-soda). Hex values below are fallbacks only.
   Base styles = the finished, still state (no script, reduced motion) and the phone swipe row.
   1024 px and up = the triptych with the title across the panels.
   .crd-scrub  = scroll-tied desktop motion (added by creed.js on hover devices with motion allowed).
   .crd-motion = play-once motion for touch screens (added by creed.js when motion is allowed). */

.crd{
  --k-bg:var(--bg,#0f172a);--k-raised:var(--surface-raised,#263449);--k-line:var(--line-strong,#3a4a63);
  --k-chalk:var(--text-primary,#f8fafc);--k-silver:var(--text-silver,#e2e8f0);--k-muted:var(--text-muted,#94a3b8);
  --k-accent:var(--accent,#2dd4bf);--k-on:var(--on-accent,#0f172a);--k-focus:var(--focus-ring,#5eead4);
  --k-soda:var(--gradient-lime-soda,radial-gradient(55% 50% at 70% 30%,rgba(255,229,59,.95) 0%,rgba(255,229,59,0) 100%),radial-gradient(90% 90% at 50% 55%,#c6ff3d 0%,#2be0a0 42%,#00b8ff 78%));
  --k-f:var(--font-display,"Plus Jakarta Sans",system-ui,sans-serif);
  --k-gut:var(--gut,clamp(16px,4vw,40px));--k-ease:var(--ease,cubic-bezier(.2,.7,.3,1));
  --k-cut:var(--cut,28px);--k-chamfer:polygon(0 0,calc(100% - var(--k-cut)) 0,100% var(--k-cut),100% 100%,0 100%);
  --k-ink:var(--k-bg);
  --k-ts:clamp(2.25rem,calc(1rem + 3.3vw),4.25rem); /* title size */
  position:relative;isolation:isolate;overflow:hidden;
  color:var(--k-ink);font-family:var(--k-f);
  padding-block:var(--section,clamp(72px,10vw,144px));
  background:var(--k-bg)
}
.crd *,.crd *::before,.crd *::after{box-sizing:border-box}
.crd :where(h2,h3,p,ol,ul,li){margin:0;padding:0}
.crd :where(ol,ul){list-style:none}
.crd :focus-visible{outline:2px solid var(--k-ink);outline-offset:3px;border-radius:2px}
.crd-panel :focus-visible{outline-color:var(--k-focus)}
.crd-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* The colour block: Lime Soda field, a Midnight veil that lifts as the panels arrive, and the exit veil. */
.crd-field,.crd-veil,.crd-exit{position:absolute;inset:0;pointer-events:none}
.crd-field{z-index:-3;background:var(--k-soda)}
.crd-veil{z-index:-2;background:var(--k-bg);opacity:0}
.crd-exit{z-index:3;background:var(--k-bg);opacity:0}

.crd-in{max-width:1320px;margin-inline:auto;padding-inline:max(var(--k-gut),env(safe-area-inset-left,0px)) max(var(--k-gut),env(safe-area-inset-right,0px));transform-origin:50% 0}

/* Lead and title, Midnight ink on the field */
.crd-lead{font:800 clamp(2.5rem,calc(2rem + 1.6vw),3.5rem)/1.08 var(--k-f);letter-spacing:-.035em;max-width:24ch;color:var(--k-ink);text-wrap:balance}
.crd-title{max-width:none;margin-top:clamp(24px,3vw,40px);font:800 clamp(1.75rem,calc(1rem + 2.2vw),3rem)/1.06 var(--k-f);letter-spacing:-.04em;color:var(--k-ink);text-wrap:balance}
.crd-mask{display:block;clip-path:inset(-.6em -.4em 0 -.4em);padding-bottom:.08em;margin-bottom:-.08em}
.crd-tl{display:block}

/* Panels: broadcast graphics, one per idea. Phone first: a swipe row. */
.crd-stage{position:relative;margin-top:clamp(24px,4vw,40px)}
.crd-panels{
  display:flex;gap:12px;overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x mandatory;scrollbar-width:none;
  margin-inline:calc(-1 * max(var(--k-gut),env(safe-area-inset-left,0px)));padding-inline:max(var(--k-gut),env(safe-area-inset-left,0px));
  scroll-padding-inline:max(var(--k-gut),env(safe-area-inset-left,0px))
}
.crd-panels::-webkit-scrollbar{display:none}
.crd-panel{
  position:relative;flex:0 0 min(86%,420px);scroll-snap-align:start;
  display:flex;flex-direction:column;padding:24px 24px 0;
  background:var(--k-bg);color:var(--k-silver);clip-path:var(--k-chamfer)
}
.crd-panel::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;background:var(--k-soda)}
.crd-top{display:flex;align-items:baseline;gap:4px;font:800 2.75rem/1 var(--k-f);letter-spacing:-.04em;color:var(--k-chalk);font-variant-numeric:tabular-nums}
.crd-idx{display:inline-flex}
.crd-roll{display:inline-block;height:1em;overflow:hidden}
.crd-roll>span{display:block;height:1em;transform:translateY(-100%)}
.crd-of{font-size:1rem;font-weight:600;letter-spacing:0;color:var(--k-muted)}
.crd-label{align-self:flex-start;margin-top:16px;padding:6px 20px 6px 12px;background:var(--k-accent);color:var(--k-on);font:700 .9375rem/1.3 var(--k-f);clip-path:polygon(0 0,calc(100% - 10px) 0,100% 10px,100% 100%,0 100%)}
.crd-body{padding-top:20px;padding-bottom:24px}
.crd-say{font:600 1.25rem/1.35 var(--k-f);letter-spacing:-.01em;color:var(--k-chalk);text-wrap:pretty}
.crd-sub{margin-top:12px;font-size:1rem;line-height:1.5;color:var(--k-silver);text-wrap:pretty}
.crd-beliefs{display:grid;gap:14px}
.crd-beliefs li{position:relative;padding-left:24px;font:600 1.125rem/1.35 var(--k-f);color:var(--k-chalk);text-wrap:pretty}
.crd-beliefs li::before{content:"";position:absolute;left:0;top:.62em;width:12px;height:3px;background:var(--k-accent)}
.crd-strip{display:flex;align-items:center;gap:12px;margin:auto -24px 0;padding:0 24px;min-height:48px;background:var(--k-raised);color:var(--k-silver);font:600 .9375rem/1.2 var(--k-f)}
.crd-strip::before{content:"";flex:none;width:4px;height:20px;background:var(--k-accent)}

/* Phone index buttons */
.crd-dots{display:flex;align-items:center;gap:8px;margin-top:16px}
.crd-dot{appearance:none;min-width:44px;min-height:44px;padding:0 10px;border:2px solid color-mix(in srgb,var(--k-ink) 62%,transparent);border-radius:var(--r,6px);background:transparent;color:var(--k-ink);font:700 .9375rem/1 var(--k-f);font-variant-numeric:tabular-nums;cursor:pointer;transition:background-color 200ms var(--k-ease),border-color 200ms var(--k-ease),color 200ms var(--k-ease);touch-action:manipulation}
.crd-dot[aria-current="true"]{background:var(--k-ink);border-color:var(--k-ink);color:var(--k-chalk)}
.crd-hint{margin-left:8px;font-size:.875rem;font-weight:600;color:color-mix(in srgb,var(--k-ink) 80%,transparent)}

/* Roll call: every level as equals */
.crd-call{margin-top:clamp(40px,6vw,72px)}
.crd-call-h{font:600 .9375rem/1.3 var(--k-f);color:color-mix(in srgb,var(--k-ink) 82%,transparent)}
/* The band: level tiles on the inside of a slow-turning drum, after the horizonx.so hero.
   Small in the middle, tall and angled at the edges. CSS 3D only; the drum turns with a CSS animation. */
.crd-band{
  --R:max(50vw,330px);--p:calc(var(--R) * .9);--tw:calc(var(--R) * .3);--th:calc(var(--tw) * 1.25);
  position:relative;height:calc(var(--th) * .95 + 24px);margin:16px calc(-1 * max(var(--k-gut),env(safe-area-inset-left,0px))) 0;
  perspective:var(--p);overflow:hidden;contain:paint
}
/* Edge fades as two still overlays (a mask over moving 3D layers costs frames). */
.crd-band::before,.crd-band::after{content:"";position:absolute;top:0;bottom:0;z-index:2;width:12%;pointer-events:none}
.crd-band::before{left:0;background:linear-gradient(90deg,#14b8c8,rgba(20,184,200,0))}
.crd-band::after{right:0;background:linear-gradient(270deg,#14c4d8,rgba(20,196,216,0))}
.crd-ring{position:absolute;left:50%;top:50%;width:0;height:0;margin:0;transform-style:preserve-3d;transform:rotateY(var(--turn,8deg));will-change:transform}
.crd-tile{
  position:absolute;left:calc(var(--tw) * -.5);top:calc(var(--th) * -.5);width:var(--tw);height:var(--th);
  display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--tw) * .08);
  background:var(--k-bg);color:var(--k-chalk);border-radius:14px;backface-visibility:hidden;
  transform:rotateY(calc(var(--i) * 20deg)) translateZ(calc(var(--R) * -1))
}
.crd-tile::before{content:"";position:absolute;left:0;top:0;right:0;height:4px;border-radius:14px 14px 0 0;background:var(--k-soda)}
.crd-tile img{position:absolute;left:12%;right:12%;top:14%;bottom:30%;width:76%;height:56%;object-fit:contain;opacity:.92}
.crd-tile span{position:relative;font:800 calc(var(--tw) * .13)/1 var(--k-f);letter-spacing:-.03em}
@media (prefers-reduced-motion:no-preference){
  .crd-ring{animation:crd-turn 90s linear infinite}
  @keyframes crd-turn{from{transform:rotateY(0deg)}to{transform:rotateY(360deg)}}
}
@media (max-width:767.98px){
  .crd-band{--R:200vw;--p:calc(var(--R) * .9);--tw:calc(var(--R) * .3);height:calc(var(--th) * .58 + 16px);margin-top:8px}
}

/* Close */
.crd-close{display:flex;flex-wrap:wrap;align-items:flex-end;justify-content:space-between;gap:16px 40px;margin-top:clamp(24px,3vw,32px)}
.crd-close-h{font:700 clamp(1.25rem,calc(1rem + .7vw),1.625rem)/1.3 var(--k-f);letter-spacing:-.02em;max-width:36ch;text-wrap:balance}
.crd-link{display:inline-flex;align-items:center;gap:8px;min-height:48px;color:var(--k-ink);font:700 1.0625rem/1 var(--k-f);text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;white-space:nowrap}
.crd-link svg{width:20px;height:20px;transition:transform 200ms var(--k-ease)}
.crd-link:hover svg{transform:translateX(3px)}


/* ---------- 1024 px and up: the triptych, title across the panels ---------- */
@media (min-width:1024px){
  .crd{min-height:100vh;min-height:100dvh}
  .crd-lead{margin-inline:auto;text-align:center}
  .crd-stage{margin-top:clamp(28px,3.4vw,48px)}
  .crd-title{display:flex;flex-wrap:wrap;justify-content:center;column-gap:.2em;text-align:center}
  .crd-tl{white-space:nowrap}
  .crd-panels{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;overflow:visible;margin-inline:0;padding-inline:0}
  .crd-panel{padding:28px 28px 0}
  .crd-strip{margin-inline:-28px;padding-inline:28px}
  .crd-dots{display:none}
}

/* ---------- Motion. All start states live here, so no script means no hidden text. ---------- */
@media (prefers-reduced-motion:no-preference){
  /* Play-once (touch): each part rises as it enters */
  .crd-motion .crd-lead,.crd-motion .crd-panel,.crd-motion .crd-band,.crd-motion .crd-close{opacity:0;transform:translateY(24px);transition:opacity 300ms var(--k-ease),transform 500ms var(--k-ease)}
  .crd-motion .crd-tl{transform:translateY(105%);transition:transform 500ms var(--k-ease)}
  .crd-motion .crd-roll>span{transform:none;transition:transform 300ms var(--k-ease)}
  .crd-motion .crd-panel:nth-child(2){transition-delay:100ms}.crd-motion .crd-panel:nth-child(3){transition-delay:200ms}
  .crd-motion .crd-tl+.crd-tl,.crd-motion .crd-mask+.crd-mask .crd-tl{transition-delay:100ms}
  .crd-motion .is-on.crd-lead,.crd-motion .is-on.crd-panel,.crd-motion .is-on .crd-band,.crd-motion .is-on.crd-close{opacity:1;transform:none}
  .crd-motion .is-on .crd-tl{transform:none}
  .crd-motion .is-on .crd-roll>span,.crd-scrub .is-in .crd-roll>span{transform:translateY(-100%)}
  .crd-motion .is-on.crd-panel .crd-roll>span{transition-delay:300ms}

  /* Scroll-tied (desktop): GSAP drives transforms; CSS only handles the tick and the roll call */
  .crd-scrub .crd-roll>span{transform:none;transition:transform 300ms var(--k-ease)}
  .crd-scrub .crd-band{opacity:0;transform:translateY(24px);transition:opacity 500ms var(--k-ease),transform 500ms var(--k-ease)}
  .crd-scrub .crd-call.is-on .crd-band{opacity:1;transform:none}
  .crd-scrub .crd-panel,.crd-scrub .crd-tl,.crd-scrub .crd-in{will-change:transform}
}



/* /assets/flywheel/flywheel.css?v=20261107 */
/* Home section 4: The Value Flywheel. Scoped under .fly. Site tokens only, except the three leather tones,
   which exist for the cricket ball alone (a brief-level exception, documented in HANDOVER.md). */
.fly{
  --fly-bg:var(--bg,#0f172a);
  --fly-line:var(--line-strong,#3a4a63);
  --fly-ink:var(--text-primary,#f8fafc);
  --fly-silver:var(--text-silver,#e2e8f0);
  --fly-muted:var(--text-muted,#94a3b8);
  --fly-accent:var(--accent,#2dd4bf);
  --fly-leather-hi:#a3241d;
  --fly-leather:#7a1712;
  --fly-leather-lo:#3e0b09;
  --fly-thread:#f6ecdc;
  --fly-gold:#f5c54a;   /* foil-stamp gold, the colour of the maker's mark on a real ball */
  --fly-ease:var(--ease,cubic-bezier(.2,.7,.3,1));
  --fly-d3:var(--d3,300ms);
  --r:0;
  padding-top:0;
}
.fly-sub{margin-top:20px;max-width:46ch;font-size:var(--t-lede,1.25rem);line-height:1.45;color:var(--fly-silver);text-wrap:pretty}

.fly-grid{display:grid;grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:clamp(48px,5vw,64px);margin-top:clamp(32px,4vw,48px)}
.fly-stage{position:sticky;top:calc(var(--header,64px) + 16px);align-self:start;height:calc(100dvh - var(--header,64px) - 32px);max-height:760px;display:grid;place-items:center}

/* The ball */
.fly-dial{position:relative;width:min(calc(100% - 64px),600px,calc(100dvh - var(--header,64px) - 80px));container-type:inline-size}
.fly-wheel{--k:1;--lr:46cqi;--dir:1;position:relative;width:100%;aspect-ratio:1;container-type:inline-size}
.fly-ball,.fly-turn{position:absolute;inset:calc((1 - var(--k)) * 50%);width:calc(var(--k) * 100%);height:calc(var(--k) * 100%)}
/* Spinning layers turn inside a square clip box (no rounded mask, which costs frames), so their corners never widen the page. */
.fly-turn{overflow:hidden}
.fly-track{position:absolute;inset:0;width:100%;height:100%}
.fly-seamline{fill:none;stroke:var(--fly-thread);stroke-opacity:.5;stroke-width:1.6}
.fly-stitch{fill:none;stroke:var(--fly-thread);stroke-opacity:.92;stroke-width:2.4;stroke-linecap:round}
/* The white ball (WebGL), plus a CSS stand-in when WebGL is missing. */
.fly-gl{display:block;pointer-events:none}
.fly-still{display:block;pointer-events:none;border-radius:50%;
  inset:calc((1 - var(--k)) * 50% + var(--k) * 11.67%);width:calc(var(--k) * 76.67%);height:calc(var(--k) * 76.67%);
  background:radial-gradient(60% 60% at 34% 30%,#fbfbf8 0%,#ecebe6 45%,#cfd3d4 78%,#9aa6ab 100%);
  box-shadow:inset -18px -22px 40px rgba(15,23,42,.28)}
.fly-still::after{content:"";position:absolute;inset:0;border-radius:50%;
  background:radial-gradient(closest-side,transparent 92%,rgba(22,128,72,.9) 93%,rgba(22,128,72,.9) 95%,transparent 96%);
  clip-path:inset(0 0 0 58%);transform:rotate(-8deg)}
.fly.has-gl .fly-still{display:none}
/* The Record, printed on the white leather (desktop, where it sits on the ball). The seam bows to the right,
   so the block sits left of centre and clear of the stitching. */
@media (min-width:1024px){
  .fly .fly-record{left:41%;width:clamp(200px,38cqi,250px);color:#0f172a}
  .fly .fly-record-h{color:#0f766e;letter-spacing:.02em}
  .fly .fly-row dt{color:#0f4c47;letter-spacing:.1em}
  .fly .fly-entries li{color:#1e293b;font-weight:500}
  .fly .fly-cap{color:#475569}
}
/* A small ball (1024 to about 1200 px wide) has no room to carry the Record, so it sits under the ball instead. */
@container (max-width:479.98px){
  .fly .fly-record{position:static;transform:none;width:auto;max-width:none;margin:20px 0 0;color:var(--fly-ink)}
  .fly .fly-record-h{color:var(--fly-accent)}
  .fly .fly-row dt{color:var(--fly-gold)}
  .fly .fly-entries li{color:var(--fly-silver)}
  .fly .fly-cap{color:var(--fly-muted)}
}

.fly-track{transform:rotate(calc(var(--r) * 1deg));will-change:transform}
.fly-trackline{fill:none;stroke:var(--fly-line);stroke-width:3}
.fly-arc{fill:none;stroke:var(--fly-accent);stroke-width:5;stroke-linecap:round;opacity:0;transition:opacity var(--fly-d3) var(--fly-ease)}
.fly-crease{position:absolute;left:50%;top:calc(50% - 43.6% * var(--k));width:calc(13% * var(--k));height:3px;transform:translateX(-50%);background:var(--fly-ink)}

.fly-labels{list-style:none;margin:0;padding:0;position:absolute;inset:0;pointer-events:none}
.fly-label{--t:calc((var(--a) + var(--r)) * 1deg);position:absolute;left:50%;top:50%;width:0;height:0;transform:rotate(var(--t)) translateY(calc(var(--lr) * var(--k) * -1)) rotate(calc(var(--t) * -1))}
.fly-label span{position:absolute;left:0;top:0;display:block;width:max-content;max-width:8.5em;text-align:center;text-wrap:balance;transform:translate(calc(-50% + var(--dir) * 50% * sin(var(--t))),calc(-50% - var(--dir) * 50% * cos(var(--t))));font-weight:700;font-size:clamp(.875rem,2.8cqi,1.0625rem);line-height:1.2;letter-spacing:-.01em;color:var(--fly-ink);opacity:.5;transition:opacity var(--fly-d3) var(--fly-ease)}

/* The Record, written on the leather */
.fly-record{position:absolute;left:50%;top:50%;width:48cqi;transform:translate(-50%,-50%);text-align:left;color:var(--fly-ink)}
.fly-record-h{font-size:.875rem;font-weight:700;color:var(--fly-thread);letter-spacing:.01em}
.fly-rows{margin:12px 0 0;display:grid;gap:14px}
.fly-row{display:grid;gap:4px}
.fly-row dt{font:800 1.1875rem/1 var(--font-display,"Plus Jakarta Sans",system-ui,sans-serif);letter-spacing:.08em;text-transform:uppercase;color:var(--fly-gold)}
.fly-row dd{margin:0}
.fly-entries{list-style:none;margin:0;padding:0;display:grid}
.fly-entries li{grid-area:1/1;font-size:1rem;line-height:1.3;font-variant-numeric:tabular-nums;opacity:0;transform:translateY(6px);transition:opacity var(--fly-d3) var(--fly-ease),transform var(--fly-d3) var(--fly-ease)}
.fly-entries li.was{transform:translateY(-6px)}
.fly-cap{margin-top:8px;font-size:.875rem;color:color-mix(in srgb,var(--fly-thread) 80%,transparent)}

/* Steps */
.fly-steps{display:grid}
.fly-step{min-height:clamp(360px,44dvh,420px);display:flex;flex-direction:column;justify-content:center;padding-block:12px}
.fly-step h3{font-size:clamp(2rem,calc(1rem + 2.2vw),3rem);line-height:1.05;letter-spacing:-.04em}
.fly-step>p{margin-top:16px;max-width:34ch;font-size:var(--t-lede,1.25rem);line-height:1.45;color:var(--fly-silver)}
.fly-fig{margin:16px 0 0;max-width:460px}
.fly-fig figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:10px;font-size:.875rem;color:var(--fly-muted)}
.fly-mini{display:none}
.fly-close{min-height:clamp(300px,38dvh,340px);display:grid;align-content:start;gap:16px;border-top:1px solid var(--fly-line);padding-top:32px;margin-top:16px}
.fly-close-h{font-size:var(--t-h3,1.75rem);line-height:1.2;font-weight:700;letter-spacing:-.02em;color:var(--fly-ink);max-width:24ch;text-wrap:balance}

/* Under 1024 px: the ball once, labels on the leather, the Record below, then the steps. */
@media (max-width:1023.98px){
  .fly-grid{grid-template-columns:1fr;gap:8px}
  .fly-stage{position:static;height:auto;max-height:none;display:block}
  .fly-dial{width:100%;max-width:440px;margin-inline:auto}
  .fly-wheel{--k:.78}
  .fly-label span{font-size:.875rem;max-width:6.5em}
  .fly-record{position:static;transform:none;width:auto;max-width:460px;margin:24px auto 0;color:var(--fly-ink)}
  .fly-record-h{color:var(--fly-accent)}
  .fly-cap{color:var(--fly-muted)}
  .fly-step{min-height:0;padding-block:24px;border-top:1px solid var(--fly-line)}
  .fly-step:first-child{border-top:0}
  .fly-close{min-height:0;margin-top:0;padding-block:32px 0}
  .fly-mini{display:block;width:76px;height:3px;margin-bottom:16px}
  .fly-mini rect{fill:var(--fly-line)}
  .fly-mini rect.on{fill:var(--fly-accent)}
  .fly-fig{max-width:520px}
}
@media (min-width:640px) and (max-width:1023.98px){
  .fly-steps{grid-template-columns:1fr 1fr;column-gap:32px}
  .fly-step:nth-child(2){border-top:0}
  .fly-close{grid-column:1/-1}
}
/* Under 1024 px with motion (flywheel.js adds .fly-stick): the ball and the Record ride in a band under the header
   while the steps scroll beneath it; the ring turns as each step comes up. One step per row, so each has its turn. */
@media (max-width:1023.98px){
  .fly.fly-stick .fly-grid{gap:0}
  .fly.fly-stick .fly-stage{position:sticky;top:var(--header,64px);z-index:3;
    margin-inline:calc(var(--gut,16px) * -1);padding:8px var(--gut,16px);background:var(--fly-bg);border-bottom:1px solid var(--fly-line);box-shadow:0 18px 24px -18px rgba(2,6,23,.9)}
  .fly.fly-stick .fly-dial{display:grid;grid-template-columns:minmax(0,min(40%,210px)) minmax(0,1fr);align-items:center;gap:14px;width:100%;max-width:640px;margin:0 auto}
  .fly.fly-stick .fly-wheel{--k:.94}
  .fly.fly-stick .fly-labels{display:none}
  .fly.fly-stick .fly-record{margin:0;max-width:none}
  .fly.fly-stick .fly-record-h{font-size:.75rem}
  .fly.fly-stick .fly-rows{margin-top:6px;gap:6px}
  .fly.fly-stick .fly-row{gap:2px}
  .fly.fly-stick .fly-row dt{font-size:.75rem}
  .fly.fly-stick .fly-entries li{font-size:.8125rem;line-height:1.25}
  .fly.fly-stick .fly-cap{margin-top:4px;font-size:.75rem}
  .fly.fly-stick .fly-steps{grid-template-columns:1fr}
  .fly.fly-stick .fly-step:nth-child(2){border-top:1px solid var(--fly-line)}
  .fly.fly-stick .fly-step:first-child{border-top:0;padding-top:32px}
  .fly.fly-stick .fly-close{grid-column:auto}
}

@media (prefers-reduced-motion:reduce){
  .fly *{transition:none!important}
}

/* State rules (generated). -1 = empty, 0-4 = current stage, 5 = lap complete, the default so no script shows it finished. */
.fly[data-state="0"] [data-at="0"],.fly[data-state="1"] [data-at="1"],.fly[data-state="2"] [data-at="2"],.fly[data-state="3"] [data-at="3"],.fly[data-state="4"] [data-at="4"],.fly[data-state="5"] [data-at="4"]{opacity:1;transform:none}
.fly[data-state="0"] .fly-label[data-label="0"] span,.fly[data-state="1"] .fly-label[data-label="1"] span,.fly[data-state="2"] .fly-label[data-label="2"] span,.fly[data-state="3"] .fly-label[data-label="3"] span,.fly[data-state="4"] .fly-label[data-label="4"] span,.fly[data-state="5"] .fly-label span{opacity:1}
.fly:is([data-state="1"],[data-state="2"],[data-state="3"],[data-state="4"]) .fly-arc[data-arc="0"],
.fly:is([data-state="2"],[data-state="3"],[data-state="4"]) .fly-arc[data-arc="1"],
.fly:is([data-state="3"],[data-state="4"]) .fly-arc[data-arc="2"],
.fly:is([data-state="4"]) .fly-arc[data-arc="3"]{opacity:.45}
.fly[data-state="0"] .fly-arc[data-arc="0"],.fly[data-state="1"] .fly-arc[data-arc="1"],.fly[data-state="2"] .fly-arc[data-arc="2"],.fly[data-state="3"] .fly-arc[data-arc="3"],.fly[data-state="4"] .fly-arc[data-arc="4"],.fly[data-state="5"] .fly-arc{opacity:1}
/* Flywheel dashboards: light cards on the Midnight page, after the soft-card samples.
   Scoped under .dsh. Card colours are fixed (light in both page modes); data colours come from the product's palette. */
.dsh{
  --d-card:#eef1f5;--d-tile:#ffffff;--d-ink:#0f172a;--d-sub:#475569;--d-line:#dbe2ea;
  --d-lime:#c6ff3d;--d-teal:#2dd4bf;--d-rose:#fb7185;--d-amber:#fbbf24;
  --d-tec:#6250d6;--d-tac:#1baf7a;--d-phy:#eda100;--d-men:#e87ba4;
  display:grid;gap:10px;width:100%;max-width:460px;padding:14px;border-radius:22px;background:var(--d-card);color:var(--d-ink);
  font-variant-numeric:tabular-nums;text-align:left;box-shadow:0 1px 0 rgba(255,255,255,.6) inset,0 18px 40px -24px rgba(2,6,23,.6)
}
.dsh *{box-sizing:border-box}
.dsh :where(h4,p,ul,ol,li){margin:0;padding:0;list-style:none}
.dsh-hd{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:2px 4px 0}
.dsh-t{font:700 1.0625rem/1.25 var(--font-display,"Plus Jakarta Sans",system-ui,sans-serif);letter-spacing:-.01em;color:var(--d-ink)}
.dsh-s{margin-top:2px;font-size:.875rem;line-height:1.35;color:var(--d-sub)}
.dsh-chip{display:inline-flex;align-items:center;flex:none;min-height:28px;padding:0 12px;border-radius:999px;background:var(--d-ink);color:#fff;font-size:.875rem;font-weight:600;white-space:nowrap}
.dsh-chip.w{background:var(--d-tile);color:var(--d-ink);border:1px solid var(--d-line)}
.dsh-chip.lime{background:var(--d-lime);color:var(--d-ink)}
.dsh-kpis{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.dsh-kpis.dsh-two{grid-template-columns:repeat(2,minmax(0,1fr))}
.dsh-tile{display:grid;align-content:start;gap:6px;min-width:0;padding:12px;border-radius:16px;background:var(--d-tile)}
.dsh-k{font-size:.875rem;font-weight:600;line-height:1.3;color:var(--d-sub)}
.dsh-v{font:800 1.625rem/1 var(--font-display,"Plus Jakarta Sans",system-ui,sans-serif);letter-spacing:-.03em}
.dsh-v small,.dsh-bignum small{font-size:.875rem;font-weight:600;letter-spacing:0;color:var(--d-sub)}
.dsh-foot,.dsh-list{display:flex;flex-wrap:wrap;gap:6px}
.dsh-note{padding:12px 14px;border-radius:16px;background:var(--d-tile);font-size:.9375rem;line-height:1.45;color:var(--d-sub)}
.dsh-note b{color:var(--d-ink)}

/* segmented blocks */
.dsh-seg{display:flex;gap:4px}
.dsh-seg-b{flex:1;height:10px;border-radius:5px;border:1.5px dashed #94a3b8}
.dsh-seg-b.on{border:0;background:var(--d-ink)}
.dsh-seg.lg .dsh-seg-b{height:40px;border-radius:12px}
.dsh-seg.lg .dsh-seg-b.on{background:var(--d-lime)}

/* legend */
.dsh-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.875rem;color:var(--d-sub)}
.dsh-legend li{display:inline-flex;align-items:center;gap:6px}
.dsh-legend b{color:var(--d-ink);font-weight:700}
.dsh-key{width:10px;height:10px;border-radius:3px;flex:none}
.d-tec{background:var(--d-tec)}.d-tac{background:var(--d-tac)}.d-phy{background:var(--d-phy)}.d-men{background:var(--d-men)}

/* 1 · programmes as stacked pill bars */
.dsh-progs{display:grid;gap:10px;margin:4px 0}
.dsh-prog{display:grid;grid-template-columns:1fr auto;gap:4px 8px;font-size:.875rem}
.dsh-prog-n{font-weight:600;color:var(--d-ink)}
.dsh-prog-v{font-weight:700}
.dsh-stk{grid-column:1/-1;display:flex;gap:3px;height:22px}
.dsh-stk-s{border-radius:7px;min-width:6px}

/* 2 · results */
.dsh-big{gap:10px}
.dsh-bignum{font:800 2.75rem/1 var(--font-display,"Plus Jakarta Sans",system-ui,sans-serif);letter-spacing:-.04em}
.dsh-res{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.dsh-res span{display:grid;place-items:center;height:44px;border-radius:14px;font-weight:800;font-size:1rem;color:var(--d-ink)}
.r-w{background:var(--d-teal)}.r-d{background:var(--d-amber)}.r-l{background:var(--d-rose)}

/* 3 · rounded pill columns */
.dsh-cols{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;align-items:end;margin:4px 0 2px}
.dsh-col{display:grid;justify-items:center;gap:4px;font-size:.875rem}
.dsh-col-v{font-weight:700}
.dsh-col-bar{display:flex;align-items:flex-end;width:100%;max-width:44px;height:96px;border-radius:999px;background:repeating-linear-gradient(135deg,#f1f4f8 0 6px,#e6ebf1 6px 12px)}
.dsh-col-bar span{display:block;width:100%;border-radius:999px;background:var(--d-ink)}
.dsh-col.no .dsh-col-bar span{background:var(--d-lime);box-shadow:inset 0 0 0 2px var(--d-ink)}
.dsh-col-d{font-weight:600;color:var(--d-ink);white-space:nowrap}
.dsh-col-sr{color:var(--d-sub);white-space:nowrap}
.c-out{background:var(--d-ink)}.c-no{background:var(--d-lime);box-shadow:inset 0 0 0 2px var(--d-ink)}

/* 4 · dot grid of 100 */
.dsh-why{grid-template-columns:auto 1fr;align-items:center;gap:14px}
.dsh-waffle{display:grid;grid-template-columns:repeat(10,12px);gap:4px}
.dsh-waffle span{width:12px;height:12px;border-radius:50%}
.w1{background:#0f172a}.w2{background:#2dd4bf}.w3{background:#6250d6}.w4{background:#fbbf24}.w5{background:#fb7185}.w6{background:#38bdf8}.w7{background:#94a3b8}
.dsh-legend-col{display:grid;gap:4px}
.dsh-legend-col li{justify-content:space-between}
.dsh-legend-col b{margin-left:auto}

/* 5 · plan */
.dsh-aim{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-size:.9375rem;line-height:1.4;color:var(--d-sub)}

/* In the step the card stays compact: the footer chips and the note are kept for the enlarged view. */
.dsh:not(.is-large) :is(.dsh-foot,.dsh-note){display:none}
/* Enlarged in the viewer: the full card, bigger type and room */
.dsh.is-large{max-width:860px;padding:22px;gap:14px;zoom:1.35}
@supports not (zoom:1){.dsh.is-large{transform-origin:top center}}

@media (max-width:399.98px){
  .dsh-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dsh-kpis>.dsh-tile:last-child:nth-child(3){grid-column:1/-1}
  .dsh-why{grid-template-columns:1fr}
}

/* Flywheel dashboards, re-skinned to the dark teal glass of the dashboard section (glass.css), so the two
   sections read as one product. Structure and data are unchanged; only the skin moves. */
.dsh{
  --d-card:#081b21;--d-tile:rgba(255,255,255,.035);--d-ink:#f8fafc;--d-sub:#b4c9cf;--d-line:rgba(148,197,205,.16);--d-line2:rgba(94,234,212,.28);
  --d-lime:#2dd4bf;--d-teal:#2dd4bf;--d-rose:#fb7185;--d-amber:#fbbf24;
  --d-tec:#2dd4bf;--d-tac:#38bdf8;--d-phy:#fbbf24;--d-men:#fb7185;
  gap:12px;padding:16px;border:1px solid var(--d-line2);
  background:radial-gradient(120% 90% at 0% 0%,rgba(45,212,191,.16),rgba(45,212,191,0) 55%),radial-gradient(90% 70% at 100% 100%,rgba(56,189,248,.08),rgba(56,189,248,0) 60%),linear-gradient(160deg,#0d2c33 0%,#081b21 52%,#05131a 100%);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(0,0,0,.35),0 30px 60px -32px rgba(0,0,0,.9),0 0 40px -18px rgba(45,212,191,.35)
}
.dsh-hd{justify-content:flex-start;align-items:flex-start;gap:10px;padding:0}
.dsh-hd::before{content:"";flex:none;width:12px;height:12px;margin-top:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d9fff8,#2dd4bf 55%,#0d9488);box-shadow:0 0 0 3px rgba(45,212,191,.16),0 0 14px rgba(45,212,191,.75)}
.dsh-hd>div{flex:1;min-width:0}
.dsh-tile,.dsh-note{background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));border:1px solid var(--d-line)}
.dsh-note{background:rgba(5,19,26,.55)}
.dsh-chip{min-height:26px;padding:0 10px;border:1px solid var(--d-line2);background:rgba(8,27,33,.6);color:#5eead4}
.dsh-chip.w{background:rgba(8,27,33,.6);color:var(--d-sub);border-color:var(--d-line)}
.dsh-chip.lime{background:#2dd4bf;color:#0b1f1c;border-color:transparent}
.dsh-v,.dsh-bignum{color:var(--d-ink)}
.dsh-stk-s{box-shadow:0 0 10px -2px currentColor}
.dsh-stk-s.d-tec{color:#2dd4bf}.dsh-stk-s.d-tac{color:#38bdf8}.dsh-stk-s.d-phy{color:#fbbf24}.dsh-stk-s.d-men{color:#fb7185}
.dsh-seg-b{border-color:#3b5a61}
.dsh-seg-b.on{background:#2dd4bf;box-shadow:0 0 10px rgba(45,212,191,.55)}
.dsh-seg.lg .dsh-seg-b.on{background:linear-gradient(90deg,#0f766e,#2dd4bf)}
.dsh-res span{color:#0b1f1c}
.dsh .r-w{background:#2dd4bf;box-shadow:0 0 14px -4px rgba(45,212,191,.9)}.dsh .r-d{background:#fbbf24}.dsh .r-l{background:#fb7185}
.dsh-col-bar{background:rgba(148,197,205,.08);box-shadow:inset 0 0 0 1px var(--d-line)}
.dsh-col-bar span{background:linear-gradient(180deg,#5eead4,#0f766e);box-shadow:0 0 12px rgba(45,212,191,.5)}
.dsh-col.no .dsh-col-bar span{background:rgba(45,212,191,.12);box-shadow:inset 0 0 0 2px #5eead4}
.dsh .c-out{background:#2dd4bf}.dsh .c-no{background:rgba(45,212,191,.12);box-shadow:inset 0 0 0 2px #5eead4}
.dsh-col-d{color:var(--d-ink)}
.dsh .w1{background:#2dd4bf}.dsh .w2{background:#38bdf8}.dsh .w3{background:#a78bfa}.dsh .w4{background:#fbbf24}.dsh .w5{background:#fb7185}.dsh .w6{background:#e2e8f0}.dsh .w7{background:#3b5a61}


/* /assets/viewer/viewer.css?v=20261107 */
/* Shared viewer: one modal dialog that shows a dashboard or a screen at full size.
   Used by Section 4 (flywheel dashboards) and the dashboards orbit. Site tokens only; hex values are fallbacks. */
html.ctv-lock{overflow:hidden}
.ctv{
  --v-bg:var(--bg,#0f172a);--v-ink:var(--text-primary,#f8fafc);--v-sub:var(--text-silver,#e2e8f0);--v-line:var(--line-strong,#3a4a63);
  --v-focus:var(--focus-ring,#5eead4);--v-ease:var(--ease,cubic-bezier(.2,.7,.3,1));
  width:min(1120px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);margin:auto;padding:0;
  border:1px solid var(--v-line);border-radius:20px;background:var(--v-bg);color:var(--v-ink);overflow:hidden
}
.ctv::backdrop{background:color-mix(in srgb,#020617 78%,transparent)}
.ctv[open]{display:flex;flex-direction:column}
.ctv-bar{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;padding:20px 20px 16px 24px;border-bottom:1px solid var(--v-line)}
.ctv-h{margin:0;font:700 clamp(1.25rem,calc(1rem + .8vw),1.625rem)/1.2 var(--font-display,"Plus Jakarta Sans",system-ui,sans-serif);letter-spacing:-.02em;color:var(--v-ink)}
.ctv-sub{margin:6px 0 0;font-size:1rem;line-height:1.45;color:var(--v-sub)}
.ctv-x{flex:none;display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--v-line);border-radius:999px;background:transparent;color:var(--v-ink);cursor:pointer}
.ctv-x:hover{background:color-mix(in srgb,var(--v-ink) 8%,transparent)}
.ctv-x:focus-visible{outline:2px solid var(--v-focus);outline-offset:2px}
.ctv-x svg{width:20px;height:20px}
.ctv-body{overflow:auto;overscroll-behavior:contain;padding:24px;display:grid;justify-items:center}
.ctv-body img{display:block;width:100%;height:auto;border-radius:12px}
.ctv-body .ctv-cap{justify-self:start;margin-top:12px;font-size:.875rem;color:var(--text-muted,#94a3b8)}
@media (prefers-reduced-motion:no-preference){
  .ctv[open]{animation:ctv-in 300ms var(--v-ease)}
  .ctv[open]::backdrop{animation:ctv-fade 300ms var(--v-ease)}
  @keyframes ctv-in{from{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:none}}
  @keyframes ctv-fade{from{opacity:0}to{opacity:1}}
}
@media (max-width:599.98px){
  .ctv{width:100vw;max-height:100dvh;height:100dvh;border-radius:0;border:0}
  .ctv-bar{padding:16px 12px 12px 16px}
  .ctv-body{padding:16px}
}

/* The opener used on flywheel dashboards */
.ctv-open{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border:1px solid var(--line-strong,#3a4a63);border-radius:999px;background:transparent;color:var(--text-primary,#f8fafc);font:600 .9375rem/1 var(--font-display,"Plus Jakarta Sans",system-ui,sans-serif);cursor:pointer;transition:background-color 200ms var(--ease,ease),border-color 200ms var(--ease,ease)}
.ctv-open:hover{background:color-mix(in srgb,var(--text-primary,#f8fafc) 8%,transparent);border-color:var(--text-muted,#94a3b8)}
.ctv-open:focus-visible{outline:2px solid var(--focus-ring,#5eead4);outline-offset:2px}
.ctv-open svg{width:18px;height:18px}


/* /./orbit.css?v=20261107 */
/* Dashboards section: the squad-performance orbit (after horizonx.so Pulse Orbit) and the attention table.
   Site tokens only; hex values are fallbacks. Without script the orbit is a plain grid of links to the full screens. */
.orb{
  --o-ink:var(--text-primary,#f8fafc);--o-silver:var(--text-silver,#e2e8f0);--o-muted:var(--text-muted,#94a3b8);
  --o-surface:var(--surface,#1e293b);--o-line:var(--line-strong,#3a4a63);--o-accent:var(--accent,#2dd4bf);--o-focus:var(--focus-ring,#5eead4);
  display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(24px,4vw,64px);align-items:center;margin-top:clamp(32px,4vw,56px)
}
.orb-ring{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(160px,1fr));gap:12px}
.orb-card{display:block;container-type:inline-size;border-radius:7cqi;color:var(--o-ink);text-decoration:none}
.orb-card:focus-visible{outline:2px solid var(--o-focus);outline-offset:3px}
.orb-info{display:grid;align-content:center;gap:12px}
.orb-kick{font-size:.875rem;font-weight:600;color:var(--o-muted)}
.orb-title{font-size:clamp(2rem,calc(1rem + 2.4vw),3.25rem);line-height:1.04;letter-spacing:-.04em}
.orb-q{max-width:34ch;font-size:var(--t-lede,1.25rem);line-height:1.45;color:var(--o-silver)}
.orb-ctrl{display:flex;align-items:center;gap:10px;margin-top:8px}
.orb-step{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--o-line);border-radius:999px;background:transparent;color:var(--o-ink);cursor:pointer;transition:background-color 200ms var(--ease,ease)}
.orb-step:hover{background:color-mix(in srgb,var(--o-ink) 8%,transparent)}
.orb-step:focus-visible{outline:2px solid var(--o-focus);outline-offset:2px}
.orb-step svg{width:20px;height:20px}
.orb-help{font-size:.875rem;color:var(--o-muted)}
.orb:not(.orb-live) .orb-ctrl,.orb:not(.orb-live) .orb-help{display:none}

/* Live: a ring of cards. The card at 3 o'clock is full size; size falls away round the ring to 9 o'clock. */
.orb-live .orb-stage{position:relative;width:min(100%,640px);aspect-ratio:1;margin-inline:auto;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.orb-live .orb-stage.is-drag{cursor:grabbing}
.orb-live .orb-ring{display:block;position:absolute;inset:0;gap:0}
.orb-live .orb-item{position:absolute;left:0;top:0;width:var(--cw,30%);transform-origin:50% 50%;will-change:transform}
.orb-live .orb-card{-webkit-user-drag:none}
.orb-live .orb-card *{pointer-events:none}
.orb-live .orb-item.is-front .g-face{border-color:rgba(245,197,74,.8);box-shadow:0 0 0 1px rgba(245,197,74,.25),0 0 34px -10px rgba(245,197,74,.7)}
.orb-live .orb-stage::before{content:"";position:absolute;inset:16%;border-radius:50%;border:1px dashed color-mix(in srgb,var(--o-line) 80%,transparent);pointer-events:none}

@media (max-width:899.98px){
  .orb{grid-template-columns:1fr}
  .orb-live .orb-stage{width:min(100%,520px)}
  .orb-info{text-align:left}
}



/* /assets/glass/glass.css?v=20261107 */
/* Section 5 dashboards: dark teal glass, after the network-dashboard sample.
   Scoped under .gls (full dashboards and panels) and .g-face (the orbit faces). Sample data throughout. */
.gls,.g-face{
  --g-ink:#f8fafc;--g-sub:#b4c9cf;--g-muted:#8fa9b0;--g-line:rgba(148,197,205,.16);--g-line2:rgba(94,234,212,.28);
  --g-teal:#2dd4bf;--g-teal2:#5eead4;--g-amber:#fbbf24;--g-rose:#fb7185;--g-gold:#f5c54a;--g-dim:#3b5a61;
  --g-bg:radial-gradient(120% 90% at 0% 0%,rgba(45,212,191,.16),rgba(45,212,191,0) 55%),radial-gradient(90% 70% at 100% 100%,rgba(56,189,248,.08),rgba(56,189,248,0) 60%),linear-gradient(160deg,#0d2c33 0%,#081b21 52%,#05131a 100%);
  --g-tile:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.015));
  color:var(--g-ink);font-variant-numeric:tabular-nums
}
.gls{display:grid;gap:12px;padding:16px;border-radius:22px;background:var(--g-bg);border:1px solid var(--g-line2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 0 1px rgba(0,0,0,.35),0 30px 60px -32px rgba(0,0,0,.9),0 0 40px -18px rgba(45,212,191,.35);text-align:left}
.gls *{box-sizing:border-box}
.gls :where(h4,p,ul,ol,li,dl,dt,dd){margin:0;padding:0;list-style:none}

/* header with a glowing node */
.g-hd{display:flex;align-items:flex-start;gap:10px}
.g-hd-t{flex:1;min-width:0}
.g-node{flex:none;width:12px;height:12px;margin-top:5px;border-radius:50%;background:radial-gradient(circle at 35% 35%,#d9fff8,var(--g-teal) 55%,#0d9488);box-shadow:0 0 0 3px rgba(45,212,191,.16),0 0 14px rgba(45,212,191,.75)}
.g-t{font:700 1.0625rem/1.25 var(--font-display,"Plus Jakarta Sans",system-ui,sans-serif);letter-spacing:-.01em;color:var(--g-ink)}
.g-s{margin-top:2px;font-size:.875rem;line-height:1.35;color:var(--g-sub)}
.g-chip{display:inline-flex;align-items:center;flex:none;min-height:26px;padding:0 10px;border-radius:999px;border:1px solid var(--g-line2);background:rgba(8,27,33,.6);color:var(--g-teal2);font-size:.875rem;font-weight:600;white-space:nowrap}
.g-chip.ok{color:#0b1f1c;background:var(--g-teal);border-color:transparent}
.g-chip.bad{color:#2a0a10;background:var(--g-rose);border-color:transparent}
.g-chip.warn{color:#2a1c02;background:var(--g-amber);border-color:transparent}

/* tiles and numbers */
.g-tile{position:relative;display:grid;align-content:start;gap:8px;min-width:0;padding:12px 14px;border-radius:16px;background:var(--g-tile);border:1px solid var(--g-line)}
.g-kpis{display:grid;gap:10px}
.g-2{grid-template-columns:repeat(2,minmax(0,1fr))}.g-3{grid-template-columns:repeat(3,minmax(0,1fr))}.g-5{grid-template-columns:repeat(5,minmax(0,1fr))}
.g-k{font-size:.875rem;font-weight:600;line-height:1.3;color:var(--g-sub)}
.g-v{font:800 1.75rem/1 var(--font-display,"Plus Jakarta Sans",system-ui,sans-serif);letter-spacing:-.03em}
.g-v small{font-size:.875rem;font-weight:600;letter-spacing:0;color:var(--g-sub)}
.g-hi{border-color:rgba(45,212,191,.55);box-shadow:inset 0 0 0 1px rgba(45,212,191,.15),0 0 24px -10px rgba(45,212,191,.8)}
.g-hi .g-v{color:var(--g-teal2);text-shadow:0 0 18px rgba(45,212,191,.45)}
.g-gold{border-color:rgba(245,197,74,.7);box-shadow:0 0 0 1px rgba(245,197,74,.18),0 0 26px -10px rgba(245,197,74,.7)}
.g-note{padding:10px 14px;border-radius:14px;border:1px solid var(--g-line);background:rgba(5,19,26,.55);font-size:.9375rem;line-height:1.45;color:var(--g-sub)}
.g-note b{color:var(--g-ink)}
.g-mini{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:.875rem;color:var(--g-sub)}
.g-mini b{color:var(--g-ink)}
.g-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
.g-mt{margin-top:6px}
.g-legend{display:flex;flex-wrap:wrap;gap:6px 14px;font-size:.875rem;color:var(--g-sub)}
.g-legend li{display:inline-flex;align-items:center;gap:6px}
.g-legend i{width:10px;height:10px;border-radius:3px}
.k-teal{background:var(--g-teal);box-shadow:0 0 8px rgba(45,212,191,.6)}.k-amber{background:var(--g-amber)}.k-rose{background:var(--g-rose)}.k-dim{background:var(--g-dim)}

/* glowing bars */
.g-bar{position:relative;height:10px;border-radius:999px;background:rgba(148,197,205,.1);overflow:hidden}
.g-bar i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:999px;background:linear-gradient(90deg,#0f766e,var(--g-teal));box-shadow:0 0 12px rgba(45,212,191,.55)}

/* 1 · season timeline of nodes */
.g-tl{position:relative;height:96px;margin:6px 18px 0}
.g-tl::before{content:"";position:absolute;left:0;right:0;top:20px;height:2px;background:linear-gradient(90deg,rgba(45,212,191,.15),rgba(45,212,191,.7),rgba(45,212,191,.15))}
.g-tl-n{position:absolute;left:var(--x);top:0;display:grid;justify-items:center;gap:6px;transform:translateX(-50%);font-size:.875rem;text-align:center;white-space:nowrap}
.g-tl-dot{width:16px;height:16px;margin-top:13px;border-radius:50%;background:var(--g-teal);box-shadow:0 0 0 4px rgba(45,212,191,.18),0 0 16px rgba(45,212,191,.9)}
.g-tl-n.r-l .g-tl-dot{background:var(--g-rose);box-shadow:0 0 0 4px rgba(251,113,133,.18),0 0 16px rgba(251,113,133,.8)}
.g-tl-r{font-weight:700;color:var(--g-ink)}
.g-tl-d{color:var(--g-sub)}

/* 2 · ranked bars */
.g-ranks{display:grid;gap:10px}
.g-rank{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,2fr) auto;align-items:center;gap:12px}
.g-rank-n{display:grid;font-size:.875rem;color:var(--g-sub)}.g-rank-n b{color:var(--g-ink);font-size:.9375rem}
.g-rank-v{font-weight:700;min-width:3.5em;text-align:right}
.g-rank.leave .g-bar i{background:linear-gradient(90deg,#92400e,var(--g-amber));box-shadow:0 0 12px rgba(251,191,36,.4)}

/* 3 · glass table and diverging margins */
.g-scroll{overflow-x:auto}
.g-table{width:100%;min-width:620px;border-collapse:collapse;font-size:.875rem;line-height:1.35}
.g-table th,.g-table td{padding:9px 8px;text-align:left;vertical-align:middle;border-top:1px solid var(--g-line)}
.g-table thead th{border-top:0;font-weight:600;color:var(--g-sub)}
.g-table tbody th{font-weight:600}
.g-table .n{text-align:right;white-space:nowrap}
.g-mg{display:flex;align-items:center;justify-content:flex-end;gap:8px}
.g-div{position:relative;display:inline-block;width:90px;height:8px;border-radius:999px;background:rgba(148,197,205,.1)}
.g-div::after{content:"";position:absolute;left:50%;top:-3px;bottom:-3px;width:1px;background:var(--g-line2)}
.g-div i{position:absolute;top:0;bottom:0;width:var(--w);border-radius:999px}
.g-div i.pos{left:50%;background:var(--g-teal);box-shadow:0 0 10px rgba(45,212,191,.7)}
.g-div i.neg{right:50%;background:var(--g-rose);box-shadow:0 0 10px rgba(251,113,133,.6)}
.g-div.wide{width:100%}

/* 4,5 · leader cards */
.g-card{gap:6px}
.g-ring{position:relative;display:grid;place-items:center;width:64px;height:64px;flex:none}
.g-ring svg{position:absolute;inset:0;width:100%;height:100%;transform:rotate(-90deg)}
.g-ring-bg{fill:none;stroke:rgba(148,197,205,.14);stroke-width:6}
.g-ring-fg{fill:none;stroke:var(--g-teal);stroke-width:6;stroke-linecap:round;filter:drop-shadow(0 0 4px rgba(45,212,191,.8))}
.g-ring b{font-size:.875rem}

/* 6 · positions */
.g-poss{display:grid;gap:14px}
.g-pos{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) auto;align-items:center;gap:6px 12px}
.g-pos-n{display:grid;font-size:.875rem;color:var(--g-sub)}.g-pos-n b{color:var(--g-ink);font-size:.9375rem}
.g-pos-v{font-weight:800;font-size:1.125rem}
.g-pos-m{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:.875rem;color:var(--g-sub)}
.g-pos-m b{color:var(--g-ink)}

/* 7 · columns, modes, split */
.g-split{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:12px}
.g-cols{display:grid;grid-template-columns:repeat(6,1fr);gap:8px;align-items:end;height:200px}
.g-cols li{display:grid;grid-template-rows:auto 1fr auto;justify-items:center;gap:6px;height:100%;font-size:.875rem}
.g-col{display:flex;align-items:flex-end;width:100%;max-width:38px;border-radius:999px;background:repeating-linear-gradient(135deg,rgba(148,197,205,.07) 0 6px,rgba(148,197,205,.03) 6px 12px)}
.g-col i{display:block;width:100%;height:var(--h);border-radius:999px;background:linear-gradient(180deg,var(--g-teal2),#0f766e);box-shadow:0 0 14px rgba(45,212,191,.55)}
.g-col-v{font-weight:800;font-size:.9375rem}
.g-col-l{color:var(--g-sub);text-align:center;line-height:1.15}
.g-modes{display:grid;gap:8px}
.g-modes li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.4fr) 2em;align-items:center;gap:10px;font-size:.875rem;color:var(--g-sub)}
.g-modes b{color:var(--g-ink);text-align:right}
.g-split-bar{display:flex;gap:4px;height:30px}
.g-split-bar i{display:grid;place-items:center;border-radius:10px;font-style:normal;font-size:.875rem;font-weight:700;color:#0b1f1c}

/* 8 · dumbbells */
.g-dumbs{display:grid;gap:14px;margin-top:4px}
.g-dumb{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,2fr) auto;align-items:center;gap:12px}
.g-dumb-n{font-size:.875rem;font-weight:600}
.g-dumb-track{position:relative;height:16px;border-radius:999px;background:rgba(148,197,205,.07)}
.g-dumb-track i{position:absolute;top:50%;transform:translate(-50%,-50%)}
.g-dumb-track .o{left:var(--x);width:12px;height:12px;border-radius:50%;background:var(--g-dim);border:2px solid #6b8a91}
.g-dumb-track .w{left:var(--x);width:14px;height:14px;border-radius:50%;background:var(--g-teal);box-shadow:0 0 12px rgba(45,212,191,.9);z-index:1}
.g-dumb-track .line{left:var(--a);width:calc(var(--b) - var(--a));height:2px;transform:translateY(-50%);background:var(--g-line2)}
.g-dumb-v{font-size:.875rem;color:var(--g-sub);text-align:right;line-height:1.3}
.g-dumb-v b{color:var(--g-ink)}

/* 9 · oppositions */
.g-opps{display:grid;gap:12px}
.g-opp{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr) 4em auto;align-items:center;gap:10px}
.g-opp-n{display:grid;font-size:.875rem;color:var(--g-sub)}.g-opp-n b{color:var(--g-ink);font-size:.9375rem}
.g-opp-v{font-weight:800;text-align:right}

/* 10 · changes */
.g-chgs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.g-chg{grid-template-columns:auto 1fr;gap:12px}
.g-chg-i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;border:1px solid var(--g-line2);font-weight:800;color:var(--g-teal2);box-shadow:0 0 14px -4px rgba(45,212,191,.8)}
.g-chg-t{display:flex;flex-wrap:wrap;align-items:center;gap:8px;font-weight:700;font-size:1rem}
.g-dl{display:grid;gap:4px;margin-top:8px;font-size:.875rem;line-height:1.4}
.g-dl dt{margin-top:6px;font-size:.875rem;font-weight:700;color:var(--g-teal2)}
.g-dl dd{color:var(--g-sub)}
.g-cant{display:grid;gap:6px;font-size:.875rem;color:var(--g-sub)}
.g-cant li{padding-left:16px;position:relative}
.g-cant li::before{content:"";position:absolute;left:0;top:.55em;width:6px;height:6px;border-radius:50%;background:var(--g-dim);box-shadow:0 0 0 2px rgba(148,197,205,.2)}

/* panels: wagon wheel */
.g-wheel{justify-items:center}
.g-wheel svg{width:100%;max-width:400px;height:auto;overflow:visible}
.g-ring-o{fill:rgba(5,19,26,.6);stroke:var(--g-line2);stroke-width:1.5}
.g-zone{fill:rgb(45 212 191 / calc(.14 + var(--t) * .62));stroke:#05131a;stroke-width:2}
.g-zone.top{filter:drop-shadow(0 0 10px rgba(45,212,191,.7))}
.g-pitch{fill:#05131a;stroke:var(--g-line2)}
.g-strip{fill:#cbd5e1}
.g-zv{fill:var(--g-ink);font:800 19px/1 var(--font-display,"Plus Jakarta Sans",system-ui,sans-serif);text-anchor:middle}
.g-zl{fill:var(--g-sub);font:600 13.5px/1 var(--font-display,"Plus Jakarta Sans",system-ui,sans-serif);text-anchor:middle}
.g-wheel-c{font-size:.9375rem;color:var(--g-sub)}.g-wheel-c b{color:var(--g-ink)}

/* panels: who holds */
.g-who{display:grid;gap:14px}
.g-who li{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,2fr) 4em;align-items:center;gap:12px}
.g-who-n{display:grid;font-size:.875rem;color:var(--g-sub)}.g-who-n b{color:var(--g-ink);font-size:.9375rem}
.g-who-v{font-weight:800;text-align:right}
.g-stack{display:flex;gap:3px;height:22px}
.g-stack i{border-radius:8px}
.g-stack .k-rose{box-shadow:0 0 12px rgba(251,113,133,.45)}

/* panels: sessions */
.g-grid{display:grid;gap:6px;min-width:560px}
.g-months{position:relative;height:16px;margin-left:44px;font-size:.875rem;color:var(--g-sub)}
.g-months span{position:absolute;left:calc(var(--c) / 16 * 100%)}
.g-weeks{display:grid;gap:6px}
.g-weeks li{display:grid;grid-template-columns:36px minmax(0,1fr);align-items:center;gap:8px}
.g-sq{font-size:.875rem;font-weight:700}
.g-cells{display:grid;grid-template-columns:repeat(32,minmax(0,1fr));gap:4px}
.g-cells i{aspect-ratio:1;border-radius:4px}
.g-cells i:nth-child(2n+1){transform:translateX(1.5px)}
.g-cells i:nth-child(2n){transform:translateX(-1.5px)}
.g-cells .s-c{background:var(--g-teal);box-shadow:0 0 6px rgba(45,212,191,.45)}
.g-cells .s-s{background:var(--g-amber)}
.g-cells .s-x{background:var(--g-rose)}
.g-cells .nil{background:transparent}

/* panels: checks table in glass */
.gls-chk .g-table{min-width:680px}
.g-pill{display:inline-block;padding:2px 9px;border-radius:999px;border:1.5px solid currentColor;font-weight:600}
.chk-alert .g-pill{color:var(--g-rose)}.chk-watch .g-pill{color:var(--g-amber)}.chk-ok .g-pill{color:var(--g-teal)}
.chk-ok td,.chk-ok th{color:var(--g-muted)}
.g-sum{font-size:1.125rem;font-weight:500}.g-sum b{font-weight:800;color:var(--g-teal2)}

/* in-page: the opener sits under each panel */
.gls-wrap{display:grid;gap:10px}
.gls-wrap figcaption{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.875rem;color:var(--text-muted,#94a3b8)}

/* the viewer: full size */
.gls.is-large{max-width:980px;width:100%;padding:22px;gap:14px}
.gls.is-large .g-t{font-size:1.375rem}
.gls.is-large .g-v{font-size:2.25rem}

/* store of full dashboards: shown without script, opened in the viewer with script */
.gls-store{display:grid;gap:16px;margin-top:24px}
.js .gls-store{display:none}

/* ---------- orbit faces (scale with their card through container units) ---------- */
.g-face{display:grid;align-content:start;gap:4cqi;padding:6cqi;border-radius:7cqi;background:var(--g-bg);border:1px solid var(--g-line2);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 0 30px -14px rgba(45,212,191,.55);aspect-ratio:4/3.3;overflow:hidden}
.g-face-hd{display:flex;align-items:center;gap:3cqi}
.g-face-hd .g-node{width:4.4cqi;height:4.4cqi;margin:0}
.g-face-t{font-weight:700;font-size:6.4cqi;line-height:1.15;letter-spacing:-.01em}
.g-face-v{font:800 15cqi/1 var(--font-display,"Plus Jakarta Sans",system-ui,sans-serif);letter-spacing:-.04em;color:var(--g-teal2);text-shadow:0 0 5cqi rgba(45,212,191,.45)}
.g-face-v small{font-size:6cqi;color:var(--g-sub);letter-spacing:0;text-shadow:none}
.g-face-l{font-size:5.2cqi;line-height:1.25;color:var(--g-sub)}
.g-spark{display:flex;align-items:flex-end;justify-content:space-between;gap:1.6cqi;height:16cqi;margin-top:auto}
.g-spark i{flex:1;max-width:5.5cqi;height:var(--h);border-radius:999px;background:linear-gradient(180deg,var(--g-teal2),#0f766e);box-shadow:0 0 3cqi rgba(45,212,191,.5)}
.g-spark.signed{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));grid-template-rows:10cqi 10cqi;column-gap:1.6cqi;justify-items:center;align-items:stretch}
.g-spark.signed::before{content:"";grid-row:1;grid-column:1/-1;align-self:end;height:1px;background:rgba(148,197,205,.3)}
.g-spark.signed i{grid-row:1;align-self:end;width:100%;max-width:5.5cqi;height:var(--h);border-radius:1.4cqi 1.4cqi 0 0}
.g-spark.signed i.neg{grid-row:2;align-self:start;border-radius:0 0 1.4cqi 1.4cqi;background:linear-gradient(0deg,var(--g-rose),#9f1239);box-shadow:0 0 3cqi rgba(251,113,133,.5)}
.g-seq{display:flex;gap:1.6cqi;margin-top:auto}
.g-seq i{flex:1;display:grid;place-items:center;height:11cqi;border-radius:3cqi;font-style:normal;font-weight:800;font-size:5cqi;color:#0b1f1c}
.g-seq .r-w{background:var(--g-teal);box-shadow:0 0 3cqi rgba(45,212,191,.6)}.g-seq .r-l{background:var(--g-rose)}
.g-face-chips{display:grid;gap:2cqi;margin-top:auto}
.g-face-chips i{padding:2cqi 4cqi;border-radius:999px;border:1px solid var(--g-line2);font-style:normal;font-size:5cqi;color:var(--g-teal2)}

@media (max-width:899.98px){
  .g-5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .g-split,.g-chgs{grid-template-columns:1fr}
}
@media (max-width:599.98px){
  .g-3,.g-5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-kpis>.g-tile:last-child:nth-child(odd){grid-column:1/-1}
  .g-rank,.g-pos,.g-dumb{grid-template-columns:1fr auto}
  .g-rank .g-bar,.g-pos .g-bar,.g-dumb-track{grid-column:1/-1;grid-row:2}
  .g-opp{grid-template-columns:1fr auto auto}
  .g-opp .g-div{grid-column:1/-1;grid-row:2}
  .g-who li{grid-template-columns:1fr 4em}
  .g-who .g-stack{grid-column:1/-1;grid-row:2}
  .g-tl{margin-inline:12px}
  .g-tl{height:auto;display:grid;grid-template-columns:repeat(4,1fr);gap:14px 8px;margin:6px 0 0}
  .g-tl::before{display:none}
  .g-tl-n{position:static;transform:none}
  .g-tl-dot{margin-top:0}
}
.g-who-v small{display:block;font-size:.875rem;font-weight:500;color:var(--g-sub);text-align:right}


/* /./hw.css?v=20261107 */
/* Home section 6: See how it works. Scoped copy of the approved prototype (artifact v3). Page-level rules confined to .hw and .th. */

/* Home Section 6: See how it works.
   Layout: a lifecycle map of eleven live tiles in six act rows, opening into a full-screen theatre.
   Tokens: Midnight and Mint (ADR-029, site.css) plus the Section 5 glass for product surfaces. Single dark world, like the live site. */
.hw,.th{
  color-scheme:dark;
  --bg:#0f172a;--surface:#1e293b;--raised:#263449;--line:#263449;--line-strong:#3a4a63;--control:#7184a0;
  --ink:#f8fafc;--silver:#e2e8f0;--body:#cbd5e1;--muted:#94a3b8;
  --accent:#2dd4bf;--accent-hi:#5eead4;--accent-lo:#14b8a6;--on-accent:#0f172a;--consent:#fb7185;--warn:#fbbf24;--focus:#5eead4;
  --g-sub:#b4c9cf;--g-line:rgba(148,197,205,.18);--g-line2:rgba(94,234,212,.3);--g-dim:#3b5a61;
  --g-bg:radial-gradient(120% 90% at 0% 0%,rgba(45,212,191,.14),rgba(45,212,191,0) 55%),radial-gradient(90% 70% at 100% 100%,rgba(56,189,248,.07),rgba(56,189,248,0) 60%),linear-gradient(160deg,#0d2c33 0%,#081b21 52%,#05131a 100%);
  --g-tile:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.018));
  --floor:repeating-linear-gradient(0deg,rgba(148,197,205,.06) 0 1px,transparent 1px 28px),repeating-linear-gradient(90deg,rgba(148,197,205,.06) 0 1px,transparent 1px 28px);
  --font:"Plus Jakarta Sans","Noto Sans Sinhala",system-ui,-apple-system,"Segoe UI",sans-serif;
  --r:6px;--cut:22px;
  --gut:clamp(16px,4vw,40px);--section:clamp(72px,10vw,144px);
  --t-h2:clamp(2.125rem,calc(1rem + 3.9vw),4.25rem);--t-lede:clamp(1.125rem,calc(1rem + .5vw),1.375rem);
  --d1:100ms;--d2:200ms;--d3:300ms;--d4:500ms;--d5:800ms;
  --ease:cubic-bezier(.2,.7,.3,1);--ease-expo:cubic-bezier(.16,1,.3,1);--ease-cam:cubic-bezier(.65,0,.35,1);
}
:is(.hw,.th) *,:is(.hw,.th) *::before,:is(.hw,.th) *::after{box-sizing:border-box}
.hw,.th{background:var(--bg);-webkit-text-size-adjust:100%}
.hw,.th{background:var(--bg);color:var(--body);font:400 1.0625rem/1.6 var(--font);-webkit-font-smoothing:antialiased;overflow-x:clip}
:is(.hw,.th) h2,:is(.hw,.th) h3,:is(.hw,.th) p,:is(.hw,.th) ol,:is(.hw,.th) ul,:is(.hw,.th) figure{margin:0;padding:0}
:is(.hw,.th) ol,:is(.hw,.th) ul{list-style:none}
:is(.hw,.th) a{color:inherit}
:is(.hw,.th) button{font:inherit;color:inherit}
:is(.hw,.th) :focus-visible{outline:2px solid var(--focus);outline-offset:3px;border-radius:2px}
:is(.hw,.th) .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
:is(.hw,.th) .wrap{max-width:1320px;margin-inline:auto;padding-left:max(var(--gut),env(safe-area-inset-left,0px));padding-right:max(var(--gut),env(safe-area-inset-right,0px))}
:is(.hw,.th) .btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 22px;border-radius:var(--r);border:0;background:var(--accent);color:var(--on-accent);font:600 1rem/1 var(--font);text-decoration:none;white-space:nowrap;cursor:pointer;touch-action:manipulation;transition:background-color var(--d2) var(--ease),transform var(--d1) var(--ease)}
:is(.hw,.th) .btn:hover{background:var(--accent-hi)}
:is(.hw,.th) .btn:active{background:var(--accent-pressed,var(--accent-lo));transform:translateY(1px)}
:is(.hw,.th) .btn-line{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1px var(--control)}
:is(.hw,.th) .btn-line:hover{background:transparent;box-shadow:inset 0 0 0 1px var(--ink)}
:is(.hw,.th) .btn svg{width:18px;height:18px;flex:none}

/* preview harness: edges of the neighbouring sections */




/* ---------- section ---------- */
.hw{padding-block:var(--section);position:relative;isolation:isolate}
.hw::before{content:"";position:absolute;inset:0 0 auto;height:520px;z-index:-1;pointer-events:none;background:radial-gradient(60% 100% at 18% 0%,rgba(45,212,191,.10),rgba(45,212,191,0) 70%)}
:is(.hw,.th) .hw-head{display:grid;gap:20px;max-width:760px}
:is(.hw,.th) .crease{border-left:var(--crease,3px solid var(--ink));padding-left:clamp(16px,2vw,24px)}
.hw h2{font:700 var(--t-h2)/1.05 var(--font);letter-spacing:-.04em;color:var(--ink);text-wrap:balance;max-width:16ch}
:is(.hw,.th) .hw-lede{font-size:var(--t-lede);line-height:1.45;color:var(--silver);max-width:44ch;text-wrap:pretty}
:is(.hw,.th) .hw-actions{display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;margin-top:8px}
:is(.hw,.th) .hw-actions .note{font-size:.9375rem;color:var(--muted)}

:is(.hw,.th) .hw-map{display:grid;gap:clamp(36px,4vw,56px);margin-top:clamp(48px,6vw,80px)}
:is(.hw,.th) .hw-act{display:grid;gap:16px}
:is(.hw,.th) .hw-act-h{display:flex;align-items:center;gap:14px;color:var(--silver);font-size:.9375rem;font-weight:600}
:is(.hw,.th) .hw-act-h b{color:var(--ink);font-weight:700}
:is(.hw,.th) .hw-act-h .bus{position:relative;flex:1;height:1px;background:linear-gradient(90deg,var(--line-strong),rgba(58,74,99,.2));overflow:hidden}
:is(.hw,.th) .hw-act-h .bus::after{content:"";position:absolute;top:-1px;left:0;width:90px;height:3px;border-radius:3px;background:linear-gradient(90deg,rgba(45,212,191,0),var(--accent),rgba(45,212,191,0));transform:translateX(-100px);opacity:0}
:is(.hw,.th) .hw-act-h .stamp{font-size:.875rem;color:var(--muted);font-weight:500;font-variant-numeric:tabular-nums}
:is(.hw,.th) .hw-row{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:20px}
:is(.hw,.th) .hw-tile{grid-column:span var(--span,6);min-width:0}

/* tile: chamfered two-layer frame so the cut corner keeps its stroke */
:is(.hw,.th) .hw-open{position:relative;display:block;width:100%;height:100%;padding:1px;border:0;background:var(--line-strong);clip-path:polygon(0 0,calc(100% - var(--cut)) 0,100% var(--cut),100% 100%,0 100%);cursor:pointer;text-align:left;transition:background var(--d3) var(--ease),transform var(--d3) var(--ease-expo)}
:is(.hw,.th) .hw-in{display:grid;grid-template-rows:auto 1fr;height:100%;background:linear-gradient(180deg,#132036,#101a2d);clip-path:polygon(0 0,calc(100% - var(--cut) + .4px) 0,100% calc(var(--cut) - .4px),100% 100%,0 100%)}
:is(.hw,.th) .hw-world{position:relative;height:clamp(176px,17vw,232px);overflow:hidden;background:radial-gradient(70% 90% at 50% 100%,rgba(45,212,191,.13),rgba(45,212,191,0) 70%),var(--floor),#0b1526;border-bottom:1px solid var(--line)}
:is(.hw,.th) .hw-world svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
:is(.hw,.th) .hw-play{position:absolute;right:14px;bottom:14px;display:inline-flex;align-items:center;gap:8px;min-height:36px;padding:0 14px 0 10px;border-radius:999px;background:rgba(15,23,42,.82);box-shadow:inset 0 0 0 1px var(--g-line2);color:var(--ink);font-size:.875rem;font-weight:600;opacity:0;transform:translateY(6px);transition:opacity var(--d3) var(--ease),transform var(--d3) var(--ease-expo)}
:is(.hw,.th) .hw-play svg{width:18px;height:18px;color:var(--accent)}
:is(.hw,.th) .hw-meta{display:grid;align-content:start;gap:8px;padding:16px 18px 20px}
:is(.hw,.th) .hw-tag{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums}
:is(.hw,.th) .hw-life{display:inline-flex;align-items:center;gap:8px}
:is(.hw,.th) .hw-life i{display:flex;gap:3px}
:is(.hw,.th) .hw-life i b{width:14px;height:4px;border-radius:2px;background:var(--line-strong)}
:is(.hw,.th) .hw-life i b.on{background:var(--accent)}
:is(.hw,.th) .hw-state{display:inline-flex;align-items:center;gap:6px}
:is(.hw,.th) .hw-state svg{width:16px;height:16px}
:is(.hw,.th) .hw-tt{display:block;font:700 1.1875rem/1.25 var(--font);letter-spacing:-.015em;color:var(--ink)}
:is(.hw,.th) .hw-out{display:block;font-size:.9375rem;line-height:1.45;color:var(--body);max-width:40ch}
:is(.hw,.th) .hw-tile.is-done .hw-state{color:var(--accent-hi)}
:is(.hw,.th) .hw-tile.is-active .hw-open{background:var(--accent)}
:is(.hw,.th) .hw-open:hover,:is(.hw,.th) .hw-open:focus-visible{background:linear-gradient(135deg,var(--accent),rgba(45,212,191,.35) 60%,var(--line-strong))}
:is(.hw,.th) .hw-open:focus-visible{outline-offset:4px}
:is(.hw,.th) .hw-open:hover .hw-play,:is(.hw,.th) .hw-open:focus-visible .hw-play{opacity:1;transform:none}
@media (hover:hover) and (prefers-reduced-motion:no-preference){:is(.hw,.th) .hw-open:hover{transform:translateY(-4px)}}
:is(.hw,.th) .hw-open:active{transform:translateY(-1px) scale(.995)}
:is(.hw,.th) .hw-tile.is-loading .hw-world::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,rgba(255,255,255,0) 30%,rgba(255,255,255,.08) 50%,rgba(255,255,255,0) 70%);animation:hwShimmer .7s linear infinite}
@keyframes hwShimmer{from{transform:translateX(-100%)}to{transform:translateX(100%)}}
:is(.hw,.th) .hw-tile.t-int .hw-world{height:clamp(220px,22vw,300px)}

:is(.hw,.th) .hw-close{display:grid;justify-items:start;gap:20px;margin-top:clamp(56px,7vw,96px);padding-top:clamp(28px,3vw,40px);border-top:1px solid var(--line)}
:is(.hw,.th) .hw-close p{font:700 clamp(1.5rem,calc(1rem + 1.6vw),2.25rem)/1.15 var(--font);letter-spacing:-.025em;color:var(--ink);max-width:24ch;text-wrap:balance}
:is(.hw,.th) .hw-close small{display:block;font-size:.9375rem;color:var(--muted);max-width:52ch}

/* ---------- thumbnail worlds (SVG, transform and opacity only) ---------- */
:is(.hw,.th) .w-panel{fill:rgba(255,255,255,.045);stroke:rgba(148,197,205,.28);stroke-width:1}
:is(.hw,.th) .w-ink{fill:#e2e8f0}:is(.hw,.th) .w-ink2{fill:#64748b}:is(.hw,.th) .w-dim{fill:#1f3349}
:is(.hw,.th) .w-t{fill:var(--accent)}:is(.hw,.th) .w-tl{fill:none;stroke:var(--accent);stroke-width:1.5}
:is(.hw,.th) .w-a{fill:var(--warn)}:is(.hw,.th) .w-c{fill:var(--consent)}
:is(.hw,.th) .w-line{fill:none;stroke:rgba(148,197,205,.35);stroke-width:1}
:is(.hw,.th) .w-glow{filter:drop-shadow(0 0 6px rgba(45,212,191,.75))}
:is(.hw,.th) .hw-world svg *{transform-box:fill-box}
@media (prefers-reduced-motion:no-preference){
  :is(.hw,.th) .hw-map.is-live .hw-act-h .bus::after{animation:hwBus 5.5s var(--ease-cam) infinite;animation-delay:var(--bd,0s)}
  @keyframes hwBus{0%{transform:translateX(-100px);opacity:0}10%{opacity:1}70%{opacity:1}100%{transform:translateX(1400px);opacity:0}}
  :is(.hw,.th) .is-live .wa-chip{animation:wChip 6s var(--ease-expo) infinite;animation-delay:calc(var(--i)*.28s)}
  @keyframes wChip{0%{opacity:0;transform:translateX(-90px)}14%,72%{opacity:1;transform:none}86%,100%{opacity:0;transform:none}}
  :is(.hw,.th) .is-live .wa-seg{transform-origin:0 50%;animation:wSeg 6s var(--ease-expo) infinite;animation-delay:calc(var(--i)*.22s)}
  @keyframes wSeg{0%{transform:scaleX(0)}12%,78%{transform:scaleX(1)}92%,100%{transform:scaleX(0)}}
  :is(.hw,.th) .is-live .wa-draw{stroke-dasharray:1;animation:wDraw 7s var(--ease-expo) infinite;animation-delay:calc(var(--i)*.18s)}
  @keyframes wDraw{0%{stroke-dashoffset:1}22%,80%{stroke-dashoffset:0}94%,100%{stroke-dashoffset:1}}
  :is(.hw,.th) .is-live .wa-pop{transform-origin:50% 100%;animation:wPop 7s var(--ease-expo) infinite;animation-delay:var(--dl,1.6s)}
  @keyframes wPop{0%,18%{opacity:0;transform:translateY(-14px) scale(.6)}28%,80%{opacity:1;transform:none}92%,100%{opacity:0}}
  :is(.hw,.th) .is-live .wa-drag{animation:wDrag 6s var(--ease-expo) infinite}
  @keyframes wDrag{0%,10%{transform:translate(118px,-58px)}38%,100%{transform:none}}
  :is(.hw,.th) .is-live .wa-warn{animation:wWarn 6s linear infinite}
  @keyframes wWarn{0%,38%{opacity:0}42%,62%{opacity:1}66%,100%{opacity:0}}
  :is(.hw,.th) .is-live .wa-ok{animation:wOk 6s linear infinite}
  @keyframes wOk{0%,62%{opacity:0}66%,92%{opacity:1}100%{opacity:0}}
  :is(.hw,.th) .is-live .wa-dot{animation:wDot 7s var(--ease-expo) infinite;animation-delay:calc(var(--i)*.03s)}
  @keyframes wDot{0%,12%{transform:translate(var(--ax),var(--ay))}40%,84%{transform:translate(var(--bx),var(--by))}100%{transform:translate(var(--ax),var(--ay))}}
  :is(.hw,.th) .is-live .wa-zoom{transform-origin:var(--zo,50% 50%);animation:wZoom 8s var(--ease-cam) infinite}
  @keyframes wZoom{0%,16%{transform:none}34%,48%{transform:scale(2.1)}66%,82%{transform:scale(3.6)}100%{transform:none}}
  :is(.hw,.th) .is-live .wa-rise{animation:wRise 6s var(--ease-expo) infinite}
  @keyframes wRise{0%,14%{transform:translateY(0)}34%,80%{transform:translateY(-34px)}96%,100%{transform:translateY(0)}}
  :is(.hw,.th) .is-live .wa-pulse{animation:wPulse 6s linear infinite}
  @keyframes wPulse{0%,30%{opacity:.15}40%,80%{opacity:1}96%,100%{opacity:.15}}
  :is(.hw,.th) .is-live .wa-grow{transform-origin:0 50%;animation:wGrow 6.5s var(--ease-expo) infinite;animation-delay:calc(var(--i)*.3s)}
  @keyframes wGrow{0%{transform:scaleX(0);opacity:0}10%,80%{transform:scaleX(1);opacity:1}94%,100%{transform:scaleX(1);opacity:0}}
  :is(.hw,.th) .is-live .wa-tick{animation:wTick 6s linear infinite;animation-delay:calc(var(--i)*.32s)}
  @keyframes wTick{0%{opacity:.18}6%,82%{opacity:1}94%,100%{opacity:.18}}
  :is(.hw,.th) .is-live .wa-step{animation:wStep 6s var(--ease-expo) infinite}
  @keyframes wStep{0%,30%{transform:none}46%,84%{transform:translate(64px,-26px)}100%{transform:none}}
  :is(.hw,.th) .is-live .wa-star{animation:wTick 6s linear infinite;animation-delay:calc(var(--i)*.22s)}
  :is(.hw,.th) .is-live .wa-flow{animation:wFlow 4.8s linear infinite;animation-delay:calc(var(--i)*-.6s)}
  @keyframes wFlow{from{transform:translateX(-40px)}to{transform:translateX(360px)}}
  :is(.hw,.th) .is-live .wa-flowc{animation:wFlowC 4.8s linear infinite;animation-delay:calc(var(--i)*-.6s)}
  @keyframes wFlowC{0%,52%{opacity:0}56%,100%{opacity:1}}
  :is(.hw,.th) .is-live .wa-stack{animation:wStack 8s var(--ease-expo) infinite}
  @keyframes wStack{0%,8%{transform:translateY(calc(var(--i)*-6px));opacity:.25}22%,52%{transform:translateY(calc(var(--i)*14px - 30px));opacity:1}66%,90%{transform:translateY(0);opacity:.35}100%{transform:translateY(calc(var(--i)*-6px));opacity:.25}}
  :is(.hw,.th) .is-live .wa-chart{stroke-dasharray:1;animation:wChart 8s var(--ease-expo) infinite}
  @keyframes wChart{0%,58%{stroke-dashoffset:1}84%,94%{stroke-dashoffset:0}100%{stroke-dashoffset:1}}
  :is(.hw,.th) .is-live .wa-chartdot{animation:wChartDot 8s linear infinite}
  @keyframes wChartDot{0%,80%{opacity:0}84%,94%{opacity:1}100%{opacity:0}}
}
@media (prefers-reduced-motion:reduce){:is(.hw,.th) .wa-warn,:is(.hw,.th) .wa-chartdot{opacity:0}}

/* ---------- theatre ---------- */
dialog.th{position:fixed;inset:0;width:100%;height:100%;max-width:none;max-height:none;margin:0;padding:0;border:0;background:transparent;color:var(--body);overflow:hidden}
dialog.th::backdrop{background:transparent}
:is(.hw,.th) .th-bg{position:absolute;inset:0;background:radial-gradient(60% 70% at 30% 20%,rgba(45,212,191,.12),rgba(45,212,191,0) 70%),var(--floor),#08111f;opacity:0;transition:opacity var(--d4) var(--ease)}
.th.is-open .th-bg{opacity:1}
:is(.hw,.th) .th-ghost{position:absolute;left:0;top:0;width:100vw;height:100vh;height:100dvh;transform-origin:0 0;background:radial-gradient(70% 90% at 50% 100%,rgba(45,212,191,.18),rgba(45,212,191,0) 70%),var(--floor),#0b1526;box-shadow:inset 0 0 0 1px var(--accent);pointer-events:none;opacity:0}
:is(.hw,.th) .th-shell{position:absolute;inset:0;display:grid;grid-template-rows:auto 1fr auto;gap:12px;padding-top:max(14px,env(safe-area-inset-top,0px));padding-bottom:max(14px,env(safe-area-inset-bottom,0px));padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));opacity:0;transition:opacity var(--d3) var(--ease)}
.th.is-ready .th-shell{opacity:1}
:is(.hw,.th) .th-top{display:flex;align-items:center;gap:16px;min-width:0}
:is(.hw,.th) .th-title{flex:1;min-width:0;display:grid;gap:2px}
:is(.hw,.th) .th-title .hw-tag{justify-content:flex-start;gap:14px}
:is(.hw,.th) .th-title h2{font:700 clamp(1.25rem,calc(1rem + 1vw),1.75rem)/1.2 var(--font);letter-spacing:-.02em;color:var(--ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
:is(.hw,.th) .icon-btn{display:inline-grid;place-items:center;width:44px;height:44px;flex:none;border-radius:999px;border:0;background:rgba(255,255,255,.04);box-shadow:inset 0 0 0 1px var(--line-strong);color:var(--ink);cursor:pointer;transition:background var(--d2) var(--ease),box-shadow var(--d2) var(--ease)}
:is(.hw,.th) .icon-btn:hover{background:rgba(255,255,255,.08);box-shadow:inset 0 0 0 1px var(--control)}
:is(.hw,.th) .icon-btn svg{width:20px;height:20px}
:is(.hw,.th) .icon-btn.big{width:52px;height:52px;background:var(--accent);color:var(--on-accent);box-shadow:none}
:is(.hw,.th) .icon-btn.big:hover{background:var(--accent-hi)}
:is(.hw,.th) .icon-btn[disabled]{opacity:.35;cursor:default}

:is(.hw,.th) .th-body{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:20px;min-height:0}
:is(.hw,.th) .th-stagewrap{position:relative;display:grid;place-items:center;min-width:0;min-height:0;perspective:1600px}
:is(.hw,.th) .th-device{position:relative;width:min(100%,calc((100dvh - 210px) * 1.6));aspect-ratio:16/10;padding:1px;background:linear-gradient(135deg,rgba(94,234,212,.55),rgba(58,74,99,.6) 40%,rgba(58,74,99,.4));clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);transform-origin:50% 60%;box-shadow:0 40px 80px -40px rgba(0,0,0,.9)}
:is(.hw,.th) .th-screen{position:relative;width:100%;height:100%;overflow:hidden;background:var(--g-bg);clip-path:polygon(0 0,calc(100% - 27.6px) 0,100% 27.6px,100% 100%,0 100%)}
:is(.hw,.th) .th-device.enter{opacity:0;transform:translateY(48px) rotateX(16deg) scale(.9)}
:is(.hw,.th) .th-device.entering{transition:opacity var(--d4) var(--ease),transform 900ms var(--ease-expo)}
:is(.hw,.th) .th-samp{flex:none;display:inline-flex;align-items:center;height:28px;padding:0 12px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--line-strong);font-size:.875rem;color:var(--muted)}

:is(.hw,.th) .th-rail{display:grid;grid-template-rows:auto minmax(0,1fr);gap:14px;min-height:0}
:is(.hw,.th) .th-head{display:grid;gap:6px}
:is(.hw,.th) .th-head p{font-size:.9375rem;line-height:1.45;color:var(--body)}
:is(.hw,.th) .th-steps{display:grid;align-content:start;gap:6px;overflow:auto;min-height:0}
:is(.hw,.th) .th-step{position:relative;display:grid;gap:4px;width:100%;padding:12px 14px 14px 16px;border:0;border-radius:var(--r);background:transparent;text-align:left;cursor:pointer;color:var(--muted);transition:background var(--d2) var(--ease),color var(--d2) var(--ease)}
:is(.hw,.th) .th-step::before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--line-strong)}
:is(.hw,.th) .th-step b{font-size:.9375rem;font-weight:600;color:var(--silver)}
:is(.hw,.th) .th-step span{display:none;font-size:.9375rem;line-height:1.45;color:var(--body)}
:is(.hw,.th) .th-step .pg{position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:2px;background:var(--accent);transform-origin:50% 0;transform:scaleY(0)}
:is(.hw,.th) .th-step.done .pg{transform:scaleY(1)}
:is(.hw,.th) .th-step[aria-current="step"]{background:rgba(255,255,255,.04)}
:is(.hw,.th) .th-step[aria-current="step"] b{color:var(--ink)}
:is(.hw,.th) .th-step[aria-current="step"] span{display:block}
:is(.hw,.th) .th-step:hover b{color:var(--ink)}

:is(.hw,.th) .th-bot{display:flex;align-items:center;gap:12px}
:is(.hw,.th) .th-segs{flex:1;display:flex;gap:4px;min-width:0}
:is(.hw,.th) .th-seg{position:relative;flex:1;height:4px;border-radius:2px;background:var(--line-strong);overflow:hidden}
:is(.hw,.th) .th-seg i{position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(0)}
:is(.hw,.th) .th-seg.done i{transform:scaleX(1)}
:is(.hw,.th) .th-seg.run i{animation:segRun var(--ms,5000ms) linear forwards}
.th.is-paused .th-seg.run i{animation-play-state:paused}
@keyframes segRun{from{transform:scaleX(0)}to{transform:scaleX(1)}}
:is(.hw,.th) .th-count{font-size:.875rem;color:var(--muted);font-variant-numeric:tabular-nums;white-space:nowrap}
:is(.hw,.th) .th-next{white-space:nowrap}

/* end card */
:is(.hw,.th) .th-end{position:absolute;inset:0;z-index:4;display:grid;align-content:center;justify-items:start;gap:18px;padding:clamp(20px,5%,56px);background:linear-gradient(90deg,rgba(5,19,26,.94) 0%,rgba(5,19,26,.82) 60%,rgba(5,19,26,.55));opacity:0;visibility:hidden;transition:opacity var(--d4) var(--ease),visibility 0s linear var(--d4)}
:is(.hw,.th) .th-end.show{opacity:1;visibility:visible;transition:opacity var(--d4) var(--ease)}
:is(.hw,.th) .th-end .out{font:700 clamp(1.375rem,calc(.8rem + 2.2vw),2.5rem)/1.12 var(--font);letter-spacing:-.03em;color:var(--ink);max-width:20ch;text-wrap:balance}
:is(.hw,.th) .th-end .feeds{font-size:1rem;color:var(--silver);max-width:44ch}
:is(.hw,.th) .th-end .row{display:flex;flex-wrap:wrap;gap:12px}
:is(.hw,.th) .th-end .btn{min-height:46px}

/* ---------- stage (fixed 720 x 450 canvas, scaled to fit) ---------- */
:is(.hw,.th) .st{position:absolute;left:0;top:0;width:720px;height:450px;transform-origin:0 0;transform:scale(var(--k,1));font:500 14px/1.35 var(--font);color:var(--ink);font-variant-numeric:tabular-nums}
:is(.hw,.th) .cam{position:absolute;inset:0;transform-origin:0 0;transition:transform 1100ms var(--ease-cam)}
:is(.hw,.th) .x-p{position:absolute;padding:14px;border-radius:12px;background:var(--g-tile);border:1px solid var(--g-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.05)}
:is(.hw,.th) .x-t{font-size:15px;font-weight:700;letter-spacing:-.01em}
:is(.hw,.th) .x-s{font-size:12.5px;color:var(--g-sub);font-weight:500}
:is(.hw,.th) .x-big{font-size:24px;font-weight:800;letter-spacing:-.03em}
:is(.hw,.th) .x-row{display:flex;align-items:center;justify-content:space-between;gap:10px}
:is(.hw,.th) .x-col{display:grid;gap:8px}
:is(.hw,.th) .x-f{display:grid;gap:2px}
:is(.hw,.th) .x-f i{font-style:normal;font-size:11.5px;color:var(--g-sub);font-weight:500}
:is(.hw,.th) .x-f b{font-size:14px;font-weight:600}
:is(.hw,.th) .x-chip{display:inline-flex;align-items:center;gap:6px;height:24px;padding:0 10px;border-radius:999px;border:1px solid var(--g-line2);background:rgba(8,27,33,.6);color:var(--accent-hi);font-size:12px;font-weight:600;white-space:nowrap}
:is(.hw,.th) .x-chip.on{background:var(--accent);border-color:transparent;color:#05221d}
:is(.hw,.th) .x-chip.warn{background:var(--warn);border-color:transparent;color:#2a1c02}
:is(.hw,.th) .x-chip.bad{background:var(--consent);border-color:transparent;color:#2a0a10}
:is(.hw,.th) .x-chip.cons{border-color:rgba(251,113,133,.6);color:var(--consent);background:rgba(251,113,133,.08)}
:is(.hw,.th) .x-chip.mute{border-color:var(--g-line);color:var(--g-sub);background:transparent}
:is(.hw,.th) .x-chips{display:flex;flex-wrap:wrap;gap:6px}
:is(.hw,.th) .x-av{display:inline-grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%;background:#16384a;box-shadow:inset 0 0 0 1px var(--g-line2);font-size:11px;font-weight:700;color:var(--accent-hi)}
:is(.hw,.th) .x-bar{position:relative;height:8px;border-radius:999px;background:rgba(148,197,205,.12);overflow:hidden}
:is(.hw,.th) .x-bar i{position:absolute;inset:0 auto 0 0;width:var(--w);border-radius:999px;background:linear-gradient(90deg,#0f766e,var(--accent));transform-origin:0 50%;transition:transform 900ms var(--ease-expo)}
:is(.hw,.th) .x-btn{display:inline-flex;align-items:center;justify-content:center;height:30px;padding:0 12px;border-radius:7px;background:var(--accent);color:#05221d;font-size:12.5px;font-weight:700}
:is(.hw,.th) .x-btn.ghost{background:transparent;color:var(--accent-hi);box-shadow:inset 0 0 0 1px var(--g-line2)}
:is(.hw,.th) .x-swap{display:grid}:is(.hw,.th) .x-swap>*{grid-area:1/1}
:is(.hw,.th) .x-note{font-size:12px;color:var(--g-sub)}
:is(.hw,.th) .x-glow{box-shadow:0 0 0 1px rgba(45,212,191,.6),0 0 26px -6px rgba(45,212,191,.9)}
:is(.hw,.th) .x-warnbox{border-color:rgba(251,191,36,.7);box-shadow:0 0 0 1px rgba(251,191,36,.35),0 0 24px -8px rgba(251,191,36,.8)}
:is(.hw,.th) .x-badbox{border-color:rgba(251,113,133,.8);box-shadow:0 0 0 1px rgba(251,113,133,.35),0 0 24px -8px rgba(251,113,133,.8)}
:is(.hw,.th) .x-cursor{position:absolute;width:22px;height:22px;color:var(--ink);filter:drop-shadow(0 2px 4px rgba(0,0,0,.6))}

/* scene gating: [data-at=n] appears at scene n, [data-until=n] leaves at scene n */
:is(.hw,.th) [data-at],:is(.hw,.th) [data-until]{transition:opacity 600ms var(--ease),transform 700ms var(--ease-expo);transition-delay:calc(var(--i,0) * 70ms)}
:is(.hw,.th) .st:not(.s1) [data-at="1"],:is(.hw,.th) .st:not(.s2) [data-at="2"],:is(.hw,.th) .st:not(.s3) [data-at="3"],:is(.hw,.th) .st:not(.s4) [data-at="4"]{opacity:0;transform:translateY(12px);pointer-events:none}
:is(.hw,.th) .st.s1 [data-until="1"],:is(.hw,.th) .st.s2 [data-until="2"],:is(.hw,.th) .st.s3 [data-until="3"],:is(.hw,.th) .st.s4 [data-until="4"]{opacity:0;transform:translateY(-8px)}
:is(.hw,.th) .st:not(.s1) .at1-fade,:is(.hw,.th) .st:not(.s2) .at2-fade,:is(.hw,.th) .st:not(.s3) .at3-fade{opacity:0}
:is(.hw,.th) .st.s2 .dim2,:is(.hw,.th) .st.s3 .dim3,:is(.hw,.th) .st.s4 .dim4{opacity:.32;transition:opacity 600ms var(--ease)}
:is(.hw,.th) [data-at].x-pop{transform-origin:50% 50%}
:is(.hw,.th) .st:not(.s1) .x-pop[data-at="1"],:is(.hw,.th) .st:not(.s2) .x-pop[data-at="2"],:is(.hw,.th) .st:not(.s3) .x-pop[data-at="3"],:is(.hw,.th) .st:not(.s4) .x-pop[data-at="4"]{transform:scale(.85)}

/* 1 onboarding */
:is(.hw,.th) .d1 .x-steps{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
:is(.hw,.th) .d1 .x-steps i{height:5px;border-radius:3px;background:rgba(148,197,205,.16);position:relative;overflow:hidden}
:is(.hw,.th) .d1 .x-steps i::after{content:"";position:absolute;inset:0;background:var(--accent);transform-origin:0 50%;transform:scaleX(1);transition:transform 700ms var(--ease-expo)}
:is(.hw,.th) .d1 .st:not(.s1) .x-steps i.s1on::after,:is(.hw,.th) .st.d1:not(.s1) .x-steps i.s1on::after{transform:scaleX(0)}
:is(.hw,.th) .d1 .wk{display:grid;grid-template-columns:44px repeat(7,1fr);gap:5px;font-size:12px;color:var(--g-sub);align-items:center}
:is(.hw,.th) .d1 .wk span{text-align:center}
:is(.hw,.th) .d1 .wk i{height:30px;border-radius:6px;background:rgba(148,197,205,.08);border:1px solid var(--g-line);transition:background 500ms var(--ease),box-shadow 500ms var(--ease);transition-delay:calc(var(--i,0)*90ms)}
:is(.hw,.th) .st.d1.s1 .wk i.av{background:rgba(45,212,191,.75);box-shadow:0 0 14px -2px rgba(45,212,191,.8)}
:is(.hw,.th) .st.d1.s2 .top,:is(.hw,.th) .st.d1.s3 .top{opacity:.38}
:is(.hw,.th) .d1 .top{transition:opacity 600ms var(--ease)}
:is(.hw,.th) .d1 .slotph{position:absolute;display:grid;place-items:center;border-radius:12px;border:1px dashed rgba(148,197,205,.25);font-size:13px;color:var(--g-sub)}
:is(.hw,.th) .d1 .slot{display:grid;justify-items:start;gap:3px;padding:6px 10px 7px;border-radius:9px;border:1px dashed rgba(148,197,205,.3)}
:is(.hw,.th) .d1 .slot i{font-style:normal;font-size:11.5px;color:var(--g-sub)}
:is(.hw,.th) .d1 .slot .x-chip{height:22px;font-size:11.5px;transition:opacity 500ms var(--ease),transform 800ms var(--ease-expo);transition-delay:calc(var(--i)*140ms + 200ms)}
:is(.hw,.th) .st.d1:not(.s3) .slot .x-chip{opacity:0;transform:translateX(-170px) scale(.9)}

/* 2 facilities */
:is(.hw,.th) .d2 .x-map{position:absolute;overflow:visible}
:is(.hw,.th) .d2 .m-grass{fill:rgba(45,212,191,.05);stroke:rgba(148,197,205,.18)}
:is(.hw,.th) .d2 .m-draw{fill:none;stroke:var(--accent);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.4s var(--ease-expo) calc(var(--i)*160ms),fill 600ms var(--ease)}
:is(.hw,.th) .st.d2.s1 .m-draw{stroke-dashoffset:0}
:is(.hw,.th) .st.d2.s1 .m-fill{fill:rgba(45,212,191,.08)}
:is(.hw,.th) .d2 .m-lbl{fill:var(--silver);font:600 12px var(--font)}
:is(.hw,.th) .d2 .m-sub{fill:var(--g-sub);font:500 10.5px var(--font)}
:is(.hw,.th) .d2 .m-lane{stroke:rgba(94,234,212,.75);stroke-width:1;stroke-dasharray:3 3}
:is(.hw,.th) .d2 .m-cap{fill:rgba(251,191,36,.9)}
:is(.hw,.th) .d2 .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;border-radius:9px;background:rgba(5,19,26,.6);border:1px solid var(--g-line)}
:is(.hw,.th) .d2 .seg span{display:grid;place-items:center;height:28px;border-radius:6px;font-size:12px;color:var(--g-sub);font-weight:600}
:is(.hw,.th) .d2 .seg span.on{background:var(--accent);color:#05221d}
:is(.hw,.th) .d2 .tree{display:grid;gap:3px;font-size:12px}
:is(.hw,.th) .d2 .tree li{display:flex;align-items:center;justify-content:space-between;gap:8px;padding-left:calc(var(--lv)*14px);color:var(--silver)}
:is(.hw,.th) .d2 .tree li em{font-style:normal;color:var(--g-sub);font-size:11.5px}
:is(.hw,.th) .d2 .tree li.l0{font-weight:700;color:var(--ink)}
:is(.hw,.th) .d2 .tree li.hot{color:var(--accent-hi)}

/* 3 calendar */
:is(.hw,.th) .d3 .cal-h{position:absolute;font-size:12px;color:var(--g-sub);font-weight:600;text-align:center}
:is(.hw,.th) .d3 .cal-c{position:absolute;border-top:1px solid rgba(148,197,205,.1);border-left:1px solid rgba(148,197,205,.1)}
:is(.hw,.th) .d3 .band{position:absolute;border-radius:8px;background:rgba(45,212,191,.16);border:1px solid rgba(45,212,191,.38)}
:is(.hw,.th) .d3 .hatch{position:absolute;border-radius:6px;background:repeating-linear-gradient(135deg,rgba(148,197,205,.16) 0 5px,rgba(148,197,205,.04) 5px 10px)}
:is(.hw,.th) .d3 .busy{position:absolute;padding:7px 8px;border-radius:8px;background:rgba(30,41,59,.95);border:1px solid rgba(148,197,205,.4);font-size:11.5px;font-weight:600;color:var(--silver);line-height:1.25}
:is(.hw,.th) .d3 .best{position:absolute;border-radius:9px;border:1.5px solid var(--accent-hi);box-shadow:0 0 18px -4px rgba(45,212,191,.9)}
:is(.hw,.th) .d3 .blk{position:absolute;padding:8px 9px;border-radius:9px;font-size:12px;font-weight:700;line-height:1.25;background:rgba(251,191,36,.18);border:1.5px solid var(--warn);color:var(--ink);transition:transform 1000ms var(--ease-expo),opacity 300ms var(--ease),background 500ms var(--ease),border-color 500ms var(--ease)}
:is(.hw,.th) .st.d3:not(.s2) .blk{transform:translate(-380px,148px);opacity:0}
:is(.hw,.th) .st.d3.s3 .blk{background:var(--accent);border-color:transparent;color:#05221d;box-shadow:0 0 22px -4px rgba(45,212,191,.9)}
:is(.hw,.th) .d3 .blk .x-cursor{right:-14px;bottom:-16px}
:is(.hw,.th) .st.d3.s3 .blk .x-cursor{opacity:0}
:is(.hw,.th) .d3 .tray{transition:opacity 400ms var(--ease) 200ms}
:is(.hw,.th) .st.d3.s2 .tray{opacity:0}
:is(.hw,.th) .d3 .lyr{display:flex;align-items:center;gap:10px;height:34px;padding:0 10px;border-radius:8px;border:1px solid var(--g-line);font-size:12.5px;font-weight:600;color:var(--g-sub);transition:all 500ms var(--ease)}
:is(.hw,.th) .d3 .lyr i{width:14px;height:14px;border-radius:4px;background:var(--g-dim)}
:is(.hw,.th) .d3 .lyr.on{color:var(--ink);border-color:var(--g-line2);background:rgba(45,212,191,.07)}
:is(.hw,.th) .d3 .lyr.on i{background:var(--accent)}
:is(.hw,.th) .st.d3:not(.s1) .lyr.l2,:is(.hw,.th) .st.d3:not(.s1) .lyr.l3{color:var(--g-sub);border-color:var(--g-line);background:transparent}
:is(.hw,.th) .st.d3:not(.s1) .lyr.l2 i,:is(.hw,.th) .st.d3:not(.s1) .lyr.l3 i{background:var(--g-dim)}

/* 4 squads */
:is(.hw,.th) .d4 .tok{position:absolute;left:0;top:0;width:20px;height:20px;margin:-10px 0 0 -10px;border-radius:50%;transition:transform 1000ms var(--ease-expo),opacity 600ms var(--ease);transition-delay:calc(var(--n)*14ms)}
:is(.hw,.th) .d4 .r-bat{background:var(--accent);box-shadow:0 0 10px rgba(45,212,191,.6)}
:is(.hw,.th) .d4 .r-pace{background:transparent;box-shadow:inset 0 0 0 3px var(--accent)}
:is(.hw,.th) .d4 .r-spin{background:#e2e8f0}
:is(.hw,.th) .d4 .r-keep{background:transparent;box-shadow:inset 0 0 0 3px #e2e8f0}
:is(.hw,.th) .d4 .gbox{position:absolute;border-radius:12px;border:1px solid var(--g-line2);background:rgba(45,212,191,.05)}
:is(.hw,.th) .d4 .key{display:grid;grid-template-columns:repeat(2,auto);gap:6px 14px;font-size:12px;color:var(--g-sub)}
:is(.hw,.th) .d4 .key span{display:inline-flex;align-items:center;gap:7px}
:is(.hw,.th) .d4 .key i{width:12px;height:12px;border-radius:50%}
:is(.hw,.th) .d4 .key .r-pace,:is(.hw,.th) .d4 .key .r-keep{box-shadow:inset 0 0 0 2.5px var(--accent)}
:is(.hw,.th) .d4 .key .r-keep{box-shadow:inset 0 0 0 2.5px #e2e8f0}
:is(.hw,.th) .d4 .fl{display:flex;align-items:center;justify-content:space-between;height:32px;padding:0 10px;border-radius:8px;border:1px solid var(--g-line);font-size:12.5px;color:var(--g-sub);font-weight:600}
:is(.hw,.th) .d4 .fl b{color:var(--ink);font-weight:700}
:is(.hw,.th) .st.d4.s1 .fl.f1,:is(.hw,.th) .st.d4.s2 .fl.f2,:is(.hw,.th) .st.d4.s2 .fl.f3,:is(.hw,.th) .st.d4.s3 .fl.f4,:is(.hw,.th) .st.d4.s3 .fl.f5{border-color:var(--g-line2);background:rgba(45,212,191,.08);color:var(--ink)}
:is(.hw,.th) .d4 .lab{position:absolute;font-size:12.5px;font-weight:700;color:var(--silver)}
:is(.hw,.th) .d4 .lab small{display:block;font-size:11.5px;font-weight:500;color:var(--g-sub)}

/* 5 planning */
:is(.hw,.th) .d5 .phase{position:absolute;display:flex;align-items:center;padding:0 10px;border-radius:7px;font-size:12.5px;font-weight:700;color:#05221d}
:is(.hw,.th) .d5 .ph-a{background:var(--accent)}:is(.hw,.th) .d5 .ph-b{background:#5eead4cc}:is(.hw,.th) .d5 .ph-c{background:rgba(148,197,205,.45);color:var(--ink)}
:is(.hw,.th) .d5 .mth{position:absolute;font-size:11.5px;color:var(--g-sub);font-weight:600}
:is(.hw,.th) .d5 .fx{position:absolute;width:10px;height:10px;transform:rotate(45deg);background:var(--warn);box-shadow:0 0 8px rgba(251,191,36,.7)}
:is(.hw,.th) .d5 .conn{position:absolute;overflow:visible}
:is(.hw,.th) .d5 .conn path{fill:none;stroke:var(--accent);stroke-width:1.2;stroke-dasharray:3 4;opacity:.7}
:is(.hw,.th) .d5 .wkc{position:absolute;display:grid;gap:3px;padding:6px;border-radius:7px;border:1px solid var(--g-line);background:rgba(255,255,255,.03);font-size:8.5px;color:var(--g-sub)}
:is(.hw,.th) .d5 .wkc b{font-size:9.5px;color:var(--ink)}
:is(.hw,.th) .d5 .wkc.on{border-color:var(--g-line2);background:rgba(45,212,191,.09)}
:is(.hw,.th) .d5 .day{position:absolute;display:grid;align-content:start;gap:4px;padding:5px;border-radius:6px;border:1px solid var(--g-line);font-size:7.5px;color:var(--g-sub)}
:is(.hw,.th) .d5 .day b{font-size:8.5px;color:var(--ink)}
:is(.hw,.th) .d5 .pill{display:block;padding:3px 4px;border-radius:4px;background:rgba(45,212,191,.2);border:1px solid rgba(45,212,191,.5);color:var(--ink);font-weight:600}
:is(.hw,.th) .d5 .pill.fix{background:rgba(251,191,36,.18);border-color:rgba(251,191,36,.7)}
:is(.hw,.th) .d5 .pill.on{background:var(--accent);color:#05221d;border-color:transparent}
:is(.hw,.th) .d5 .sess{position:absolute;display:grid;gap:4px;padding:8px;border-radius:7px;background:var(--g-tile);border:1px solid var(--g-line2);font-size:6px;color:var(--g-sub)}
:is(.hw,.th) .d5 .sess b{font-size:8px;color:var(--ink)}
:is(.hw,.th) .d5 .sess .x-chip{height:12px;padding:0 5px;font-size:5.5px}
:is(.hw,.th) .d5 .sess .x-av{width:13px;height:13px;font-size:5px}
:is(.hw,.th) .d5 .lvl{position:absolute;font-size:12px;font-weight:700;color:var(--accent-hi)}
:is(.hw,.th) .d5 .zone{transition:opacity 700ms var(--ease)}
:is(.hw,.th) .st.d5.s1 .z0,:is(.hw,.th) .st.d5.s2 .z0,:is(.hw,.th) .st.d5.s2 .z1,:is(.hw,.th) .st.d5.s3 .z0,:is(.hw,.th) .st.d5.s3 .z1,:is(.hw,.th) .st.d5.s3 .z2{opacity:.35}

/* 6 catalogue */
:is(.hw,.th) .d6 .search{display:flex;align-items:center;gap:10px;font-size:15px}
:is(.hw,.th) .d6 .search svg{width:18px;height:18px;color:var(--g-sub)}
:is(.hw,.th) .d6 .caret{display:inline-block;width:2px;height:18px;background:var(--accent);margin-left:2px;vertical-align:-3px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
:is(.hw,.th) .d6 .facet{display:grid;gap:5px}
:is(.hw,.th) .d6 .facet i{font-style:normal;font-size:11px;color:var(--g-sub);font-weight:600}
:is(.hw,.th) .d6 .facet .x-chip{transition:background 400ms var(--ease),color 400ms var(--ease)}
:is(.hw,.th) .st.d6.s1 .facet .x-chip.pick{background:var(--accent);border-color:transparent;color:#05221d}
:is(.hw,.th) .d6 .res{display:grid;gap:8px}
:is(.hw,.th) .d6 .dr{display:grid;gap:5px;padding:10px;border-radius:10px;border:1px solid var(--g-line);background:rgba(255,255,255,.025);transition:opacity 500ms var(--ease),transform 600ms var(--ease-expo)}
:is(.hw,.th) .d6 .dr b{font-size:13.5px}
:is(.hw,.th) .d6 .dr .x-chips .x-chip{height:20px;font-size:11px;padding:0 7px}
:is(.hw,.th) .d6 .facet .x-chips{gap:5px}
:is(.hw,.th) .st.d6.s1 .dr.out{opacity:0;transform:translateX(-20px)}
:is(.hw,.th) .st.d6.s2 .dr.pick{border-color:var(--g-line2);box-shadow:0 0 22px -8px rgba(45,212,191,.9)}
:is(.hw,.th) .d6 .lay{display:grid;gap:4px;padding:10px;border-radius:10px;border:1px solid var(--g-line)}
:is(.hw,.th) .d6 .lay i{font-style:normal;font-size:11px;font-weight:700;letter-spacing:.04em;color:var(--g-sub)}
:is(.hw,.th) .d6 .lay.ten{border-color:var(--g-line2);background:rgba(45,212,191,.06)}
:is(.hw,.th) .d6 .link{position:relative;height:30px;margin-left:22px;border-left:1.5px dashed var(--accent)}
:is(.hw,.th) .d6 .link::after{content:"same global drill";position:absolute;left:10px;top:7px;font-size:11px;color:var(--accent-hi);font-weight:600}
:is(.hw,.th) .d6 .vars{display:flex;gap:5px}
:is(.hw,.th) .d6 .vars .x-chip{height:22px;font-size:11px}

/* 7 builder */
:is(.hw,.th) .d7 .card{display:grid;gap:3px;padding:8px 9px;border-radius:9px;border:1px solid var(--g-line);background:rgba(255,255,255,.03);font-size:11.5px;transition:opacity 500ms var(--ease) calc(var(--i)*90ms),transform 600ms var(--ease-expo)}
:is(.hw,.th) .d7 .card b{font-size:12px}
:is(.hw,.th) .d7 .card small{font-size:11px;color:var(--g-sub)}
:is(.hw,.th) .st.d7.s1 .card.use{opacity:.3}
:is(.hw,.th) .d7 .card.no{border-color:rgba(251,113,133,.5)}
:is(.hw,.th) .st.d7.s3 .card.no{border-color:var(--consent);box-shadow:0 0 0 1px rgba(251,113,133,.35),0 0 24px -8px rgba(251,113,133,.9)}
:is(.hw,.th) .d7 .ruler{position:absolute;font-size:11px;color:var(--g-sub)}
:is(.hw,.th) .d7 .lane{position:absolute;font-size:12px;font-weight:600;color:var(--silver)}
:is(.hw,.th) .d7 .laneline{position:absolute;height:1px;background:rgba(148,197,205,.12)}
:is(.hw,.th) .d7 .blk{position:absolute;display:grid;align-content:center;gap:2px;padding:0 9px;border-radius:8px;font-size:11.5px;font-weight:700;line-height:1.2;color:#05221d;overflow:hidden;transform-origin:0 50%;transition:transform 800ms var(--ease-expo) calc(var(--i)*170ms),opacity 300ms var(--ease) calc(var(--i)*170ms)}
:is(.hw,.th) .d7 .blk small{font-size:10.5px;font-weight:600;opacity:.8}
:is(.hw,.th) .d7 .t-tech{background:var(--accent)}:is(.hw,.th) .d7 .t-phys{background:#99f6e4}:is(.hw,.th) .d7 .t-tact{background:#e2e8f0}:is(.hw,.th) .d7 .t-ment{background:#94a3b8}
:is(.hw,.th) .st.d7:not(.s1) .blk{transform:scaleX(0);opacity:0}
:is(.hw,.th) .d7 .coach{position:absolute;display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--silver)}
:is(.hw,.th) .d7 .mix{display:flex;height:12px;border-radius:999px;overflow:hidden;gap:2px}
:is(.hw,.th) .d7 .mix i{display:block;height:100%;transform-origin:0 50%;transition:transform 900ms var(--ease-expo) calc(var(--i)*120ms)}
:is(.hw,.th) .st.d7:not(.s2) .mix i{transform:scaleX(0)}
:is(.hw,.th) .d7 .legend{display:flex;gap:14px;font-size:11.5px;color:var(--g-sub)}
:is(.hw,.th) .d7 .legend span{display:inline-flex;align-items:center;gap:6px}
:is(.hw,.th) .d7 .legend i{width:10px;height:10px;border-radius:3px}

/* 8 execution */
:is(.hw,.th) .d8 .phone{position:absolute;padding:14px 12px;border-radius:26px;background:#07141b;border:1.5px solid rgba(148,197,205,.35);box-shadow:inset 0 0 0 4px rgba(255,255,255,.03)}
:is(.hw,.th) .d8 .phone::before{content:"";position:absolute;left:50%;top:7px;width:56px;height:5px;margin-left:-28px;border-radius:3px;background:rgba(148,197,205,.25)}
:is(.hw,.th) .d8 .tab{position:absolute;padding:16px;border-radius:18px;background:#07141b;border:1.5px solid rgba(148,197,205,.35)}
:is(.hw,.th) .d8 .start{display:grid;place-items:center;height:46px;border-radius:12px;background:var(--accent);color:#05221d;font-weight:800;font-size:15px;transition:transform 300ms var(--ease-expo)}
:is(.hw,.th) .st.d8.s1 .start{background:rgba(45,212,191,.14);color:var(--accent-hi)}
:is(.hw,.th) .d8 .roll{display:grid;gap:5px}
:is(.hw,.th) .d8 .roll li{display:flex;align-items:center;justify-content:space-between;gap:6px;height:27px;padding:0 8px;border-radius:7px;background:rgba(255,255,255,.035);font-size:12px;font-weight:600}
:is(.hw,.th) .d8 .roll li em{font-style:normal;font-size:11px;font-weight:700;padding:2px 7px;border-radius:999px;transition:opacity 300ms var(--ease) calc(var(--i)*130ms + 300ms),transform 400ms var(--ease-expo) calc(var(--i)*130ms + 300ms)}
:is(.hw,.th) .d8 .roll .p{background:rgba(45,212,191,.2);color:var(--accent-hi)}
:is(.hw,.th) .d8 .roll .l{background:rgba(251,191,36,.2);color:var(--warn)}
:is(.hw,.th) .d8 .roll .a{background:rgba(251,113,133,.18);color:var(--consent)}
:is(.hw,.th) .st.d8:not(.s1) .roll li em{opacity:0;transform:scale(.6)}
:is(.hw,.th) .d8 .ring{position:relative;width:118px;height:118px;flex:none}
:is(.hw,.th) .d8 .ring svg{width:100%;height:100%;transform:rotate(-90deg)}
:is(.hw,.th) .d8 .ring circle{fill:none;stroke-width:9}
:is(.hw,.th) .d8 .ring .bg{stroke:rgba(148,197,205,.14)}
:is(.hw,.th) .d8 .ring .fg{stroke:var(--accent);stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 5px rgba(45,212,191,.8));transition:stroke-dashoffset 4.8s linear}
:is(.hw,.th) .st.d8.s2 .ring .fg{stroke-dashoffset:.44}
:is(.hw,.th) .st.d8.s3 .ring .fg{stroke-dashoffset:.022;transition-duration:1s}
:is(.hw,.th) .d8 .ring b{position:absolute;inset:0;display:grid;place-items:center;align-content:center;font-size:22px;font-weight:800}
:is(.hw,.th) .d8 .ring b small{font-size:11px;color:var(--g-sub);font-weight:600}
:is(.hw,.th) .d8 .dseq{display:grid;grid-template-columns:repeat(5,1fr);gap:5px}
:is(.hw,.th) .d8 .dseq i{height:30px;border-radius:7px;display:grid;place-items:center;font-style:normal;font-size:10.5px;font-weight:700;background:rgba(148,197,205,.1);color:var(--g-sub);transition:background 400ms var(--ease) calc(var(--i)*120ms)}
:is(.hw,.th) .st.d8.s2 .dseq i.d0,:is(.hw,.th) .st.d8.s2 .dseq i.d1{background:rgba(45,212,191,.32);color:var(--ink)}
:is(.hw,.th) .st.d8.s2 .dseq i.d2{background:var(--accent);color:#05221d}
:is(.hw,.th) .st.d8.s3 .dseq i{background:var(--accent);color:#05221d}

/* 9 feedback */
:is(.hw,.th) .d9 .seg{display:grid;grid-template-columns:repeat(3,1fr);gap:4px;padding:3px;border-radius:10px;background:rgba(5,19,26,.6);border:1px solid var(--g-line)}
:is(.hw,.th) .d9 .seg span{display:grid;place-items:center;height:30px;border-radius:7px;font-size:12.5px;font-weight:700;color:var(--g-sub);transition:background 400ms var(--ease),color 400ms var(--ease)}
:is(.hw,.th) .st.d9:not(.s1) .seg .k0,:is(.hw,.th) .st.d9.s1:not(.s2) .seg .k1,:is(.hw,.th) .st.d9.s2 .seg .k2{background:var(--accent);color:#05221d}
:is(.hw,.th) .d9 .stars{display:flex;gap:5px}
:is(.hw,.th) .d9 .stars svg{width:24px;height:24px;fill:rgba(148,197,205,.18);transition:fill 300ms var(--ease) calc(var(--i)*120ms + 200ms)}
:is(.hw,.th) .d9 .stars svg.f{fill:var(--accent)}
:is(.hw,.th) .d9 .wave{display:flex;align-items:center;gap:3px;height:34px}
:is(.hw,.th) .d9 .wave i{width:4px;border-radius:2px;background:var(--accent-hi);height:var(--h)}
:is(.hw,.th) .d9 .lad{position:relative;display:grid;grid-template-columns:repeat(3,1fr);align-items:end;gap:8px;height:150px}
:is(.hw,.th) .d9 .lad div{display:grid;align-content:end;justify-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--g-sub)}
:is(.hw,.th) .d9 .lad div i{width:100%;border-radius:8px 8px 3px 3px;background:rgba(148,197,205,.12);border:1px solid var(--g-line)}
:is(.hw,.th) .d9 .lad .mk{position:absolute;left:calc(16.66% - 16px);bottom:62px;width:32px;height:32px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 5px rgba(45,212,191,.18),0 0 20px rgba(45,212,191,.9);transition:transform 1100ms var(--ease-expo) 300ms}
:is(.hw,.th) .st.d9.s2 .lad .mk{transform:translate(calc(var(--colw) * 1px),-34px)}
:is(.hw,.th) .st.d9.s2 .lad .c1 i{border-color:var(--g-line2);background:rgba(45,212,191,.16)}
:is(.hw,.th) .d9 .spark{width:100%;height:70px;overflow:visible}
:is(.hw,.th) .d9 .spark path{fill:none;stroke:var(--accent);stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:1;stroke-dashoffset:1;transition:stroke-dashoffset 1.6s var(--ease-expo);filter:drop-shadow(0 0 4px rgba(45,212,191,.7))}
:is(.hw,.th) .st.d9.s3 .spark path{stroke-dashoffset:0}
:is(.hw,.th) .d9 .spark .area{fill:rgba(45,212,191,.1);stroke:none;filter:none;stroke-dasharray:none}

/* 10 ingestion */
:is(.hw,.th) .d10 .pipe{position:absolute;overflow:visible}
:is(.hw,.th) .d10 .node{position:absolute;display:grid;justify-items:center;gap:6px;width:110px;font-size:12px;font-weight:700;color:var(--silver);text-align:center}
:is(.hw,.th) .d10 .node i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;border:1px solid var(--g-line2);background:rgba(8,27,33,.8);color:var(--accent-hi)}
:is(.hw,.th) .d10 .node i svg{width:22px;height:22px}
:is(.hw,.th) .d10 .node.act i{background:var(--accent);color:#05221d;box-shadow:0 0 22px -2px rgba(45,212,191,.9)}
:is(.hw,.th) .d10 .pk{position:absolute;top:47px;--to:540px;width:16px;height:6px;border-radius:3px;background:var(--accent-hi);box-shadow:0 0 8px rgba(45,212,191,.9);opacity:0}
@media (prefers-reduced-motion:no-preference){
  :is(.hw,.th) .st.d10 .pk{animation:pk 2.4s linear infinite;animation-delay:calc(var(--i)*-.4s)}
}
@keyframes pk{0%{transform:translateX(0);opacity:0}8%{opacity:1}92%{opacity:1}100%{transform:translateX(var(--to,560px));opacity:0}}
:is(.hw,.th) .d10 .tbl{display:grid;gap:6px;font-size:12.5px}
:is(.hw,.th) .d10 .tbl li{display:grid;grid-template-columns:1.2fr 18px 1.3fr auto;align-items:center;gap:10px;min-height:36px;padding:0 10px;border-radius:8px;background:rgba(255,255,255,.03);border:1px solid var(--g-line)}
:is(.hw,.th) .d10 .tbl li .x-chip{height:22px;font-size:11px}
:is(.hw,.th) .d10 .tbl svg{width:16px;height:16px;color:var(--g-sub)}
:is(.hw,.th) .d10 .iss{display:grid;gap:8px}
:is(.hw,.th) .d10 .iss li{display:flex;align-items:center;gap:10px;min-height:40px;padding:0 12px;border-radius:9px;border:1px solid var(--g-line);font-size:12.5px;font-weight:600}
:is(.hw,.th) .d10 .iss li .x-chip{margin-left:auto}
:is(.hw,.th) .d10 .rows{display:grid;gap:4px}
:is(.hw,.th) .d10 .rows i{height:8px;border-radius:4px;background:rgba(148,197,205,.22);width:var(--w)}
:is(.hw,.th) .d10 .rows i.hl{background:rgba(251,191,36,.7)}

/* 11 intelligence */
:is(.hw,.th) .d11 .lanes{position:absolute;left:24px;top:52px;width:672px;height:330px;transform-style:preserve-3d;transform-origin:50% 40%;transition:transform 1400ms var(--ease-cam)}
:is(.hw,.th) .st.d11:not(.s1) .lanes{transform:translate(40px,150px) rotateX(58deg) rotateZ(-30deg) scale(.86)}
:is(.hw,.th) .st.d11.s3 .lanes{transform:translate(-120px,8px) scale(.64)}
:is(.hw,.th) .st.d11.s4 .lanes{transform:translate(-120px,8px) scale(.64);opacity:.18}
:is(.hw,.th) .d11 .ln{position:absolute;left:0;width:672px;height:44px;display:grid;grid-template-columns:118px 1fr;align-items:center;gap:8px;padding:0 10px;border-radius:10px;background:rgba(13,44,51,.9);border:1px solid var(--g-line2);box-shadow:0 0 30px -14px rgba(45,212,191,.8);transform-style:preserve-3d;transition:transform 1400ms var(--ease-cam),opacity 600ms var(--ease);transition-delay:calc(var(--n)*60ms)}
:is(.hw,.th) .st.d11:not(.s1) .ln{transform:translateY(calc(var(--n) * -54px)) translateZ(calc(var(--n) * 30px))}
:is(.hw,.th) .d11 .ln b{font-size:12.5px;font-weight:700;color:var(--ink)}
:is(.hw,.th) .d11 .ln b small{display:block;font-size:10.5px;font-weight:500;color:var(--g-sub)}
:is(.hw,.th) .d11 .trk{position:relative;height:28px}
:is(.hw,.th) .d11 .trk i{position:absolute;top:50%;transform:translateY(-50%)}
:is(.hw,.th) .d11 .m-bar{width:6px;border-radius:2px;background:rgba(94,234,212,.75)}
:is(.hw,.th) .d11 .m-dot{width:9px;height:9px;border-radius:50%;background:var(--accent)}
:is(.hw,.th) .d11 .m-dot.x{background:transparent;box-shadow:inset 0 0 0 2px var(--g-dim)}
:is(.hw,.th) .d11 .m-blk{height:12px;border-radius:3px;background:rgba(148,197,205,.4)}
:is(.hw,.th) .d11 .m-blk.sp{background:var(--accent);box-shadow:0 0 8px rgba(45,212,191,.8)}
:is(.hw,.th) .d11 .m-inn{width:12px;height:12px;border-radius:50%;background:var(--accent)}
:is(.hw,.th) .d11 .m-inn.out{background:var(--consent);box-shadow:0 0 8px rgba(251,113,133,.7)}
:is(.hw,.th) .d11 .m-step{width:22px;height:22px;border-radius:50%;display:grid;place-items:center;background:var(--accent-hi);color:#05221d;font-size:9px;font-weight:800;font-style:normal}
:is(.hw,.th) .d11 .wkx{position:absolute;top:34px;width:24px;margin-left:-12px;text-align:center;font-size:10px;color:var(--g-sub);font-weight:600;transition:opacity 500ms var(--ease)}
:is(.hw,.th) .st.d11:not(.s1) .wkx{opacity:0}
:is(.hw,.th) .st.d11.s3 .wkx,:is(.hw,.th) .st.d11.s4 .wkx{opacity:0}
:is(.hw,.th) .st.d11.s2 .ln .trk i:not(.k){opacity:.22;transition:opacity 500ms var(--ease)}
:is(.hw,.th) .d11 .arc{position:absolute;left:0;top:0;overflow:visible;pointer-events:none}
:is(.hw,.th) .d11 .arc path{fill:none;stroke:var(--accent-hi);stroke-width:2.4;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;filter:drop-shadow(0 0 6px rgba(45,212,191,.9));transition:stroke-dashoffset 1.8s var(--ease-expo) 500ms}
:is(.hw,.th) .st.d11.s2 .arc path{stroke-dashoffset:0}
:is(.hw,.th) .st.d11.s3 .arc,:is(.hw,.th) .st.d11.s4 .arc{opacity:0}
:is(.hw,.th) .d11 .anno{position:absolute;padding:5px 9px;border-radius:7px;background:rgba(5,19,26,.92);border:1px solid var(--g-line2);font-size:11.5px;font-weight:600;color:var(--ink);white-space:nowrap}
:is(.hw,.th) .d11 .ins{display:grid;gap:4px}
:is(.hw,.th) .d11 .ins i{font-style:normal;font-size:11px;font-weight:700;color:var(--accent-hi)}
:is(.hw,.th) .d11 .ins b{font-size:13.5px;line-height:1.3}
:is(.hw,.th) .d11 .ins small{font-size:11.5px;color:var(--g-sub)}
:is(.hw,.th) .d11 .rec{display:grid;gap:12px;text-align:left}
:is(.hw,.th) .d11 .rec .big{font-size:27px;font-weight:800;letter-spacing:-.03em;line-height:1.12;max-width:17ch}
:is(.hw,.th) .d11 .rec ul{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
:is(.hw,.th) .d11 .rec li{display:grid;gap:1px;padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.04);border:1px solid var(--g-line)}
:is(.hw,.th) .d11 .rec li i{font-style:normal;font-size:11px;color:var(--g-sub)}
:is(.hw,.th) .d11 .rec li b{font-size:15px}
:is(.hw,.th) .st.d11.s4 .recp{box-shadow:0 0 0 1px rgba(45,212,191,.7),0 0 60px -10px rgba(45,212,191,.9)}

/* ---------- responsive ---------- */
@media (max-width:1023.98px){
  :is(.hw,.th) .hw-row{grid-template-columns:repeat(2,minmax(0,1fr))}
  :is(.hw,.th) .hw-tile{grid-column:span 1}
  :is(.hw,.th) .hw-tile.t-int{grid-column:1/-1}
  :is(.hw,.th) .th-body{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr)}
  :is(.hw,.th) .th-device{width:min(100%,calc((100dvh - 330px) * 1.6))}
  :is(.hw,.th) .th-rail{grid-template-rows:auto auto}
  :is(.hw,.th) .th-steps{display:none}
  .th .th-now{position:static;width:auto;height:auto;overflow:visible;clip-path:none;min-height:88px}
  :is(.hw,.th) .th-head p{display:none}
}
@media (max-width:639.98px){
  :is(.hw,.th) .hw-row{grid-template-columns:1fr}
  :is(.hw,.th) .hw-act-h .stamp{display:none}
  :is(.hw,.th) .th-top .th-title .hw-tag .hw-life{display:none}
  :is(.hw,.th) .th-count{display:none}
  :is(.hw,.th) .th-bot{gap:8px}
  :is(.hw,.th) .th-next span{display:none}
  :is(.hw,.th) .th-end{justify-items:stretch;align-content:end;background:linear-gradient(180deg,rgba(5,19,26,.6),rgba(5,19,26,.95) 40%)}
  :is(.hw,.th) .th-end .out{font-size:1.25rem}
  :is(.hw,.th) .th-end .feeds{display:none}
  :is(.hw,.th) .th-end .row .btn{flex:1}
}
:is(.hw,.th) .th-now{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);display:grid;align-content:start;gap:6px}
:is(.hw,.th) .th-now b{font-size:1.0625rem;color:var(--ink);font-weight:700}
:is(.hw,.th) .th-now span{font-size:1rem;line-height:1.45;color:var(--body)}
@media (prefers-reduced-motion:reduce){
  :is(.hw,.th) *,:is(.hw,.th) *::before,:is(.hw,.th) *::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
  :is(.hw,.th) .th-bg,:is(.hw,.th) .th-shell,:is(.hw,.th) [data-at],:is(.hw,.th) [data-until]{transition-duration:180ms!important}
}


/* /./cs-home.css?v=20261107 */
/* Home section 7: Child safety, condensed from /child-safety "The Shield" (revision 4).
   The fingerprint gathers, pours into the shield, then the four groups arrive. One screen of hold on desktop.
   Glass tiles and the field colours are the ones the Shield page uses. */
.csh{--csh-glass-a:rgba(13,44,51,.88);--csh-glass-b:rgba(5,19,26,.92);--csh-glass-line:rgba(94,234,212,.22);--csh-glass-glow:rgba(45,212,191,.16);--csh-r:12px;
  position:relative;background:var(--bg)}
.csh-stage{max-width:1320px;margin-inline:auto;padding:var(--section) var(--gut) calc(var(--section) * .6);display:grid;gap:clamp(32px,5vw,56px)}
.csh-copy h2{font-size:clamp(2.25rem,1.1rem + 4vw,3.75rem);line-height:1.04;letter-spacing:-.035em;max-width:14ch}
.csh-lede{margin-top:20px;font-size:var(--t-lede);line-height:1.5;color:var(--text-silver);max-width:44ch;text-wrap:pretty}
.csh-groups{display:grid;gap:12px;margin-top:clamp(28px,3.4vw,40px)}
@media (min-width:600px){.csh-groups{grid-template-columns:repeat(2,minmax(0,1fr))}}
.csh-g{position:relative;border-radius:var(--csh-r);padding:18px 20px 20px;
  background:radial-gradient(120% 90% at 0% 0%,var(--csh-glass-glow),transparent 60%),linear-gradient(160deg,var(--csh-glass-a),var(--csh-glass-b));
  border:1px solid var(--csh-glass-line);box-shadow:inset 0 1px 0 rgba(255,255,255,.07),0 16px 36px rgba(2,6,23,.4)}
.csh-g .num{display:block;color:var(--accent);font-size:.875rem;font-weight:600;letter-spacing:.02em}
.csh-g h3{margin-top:6px;font-size:1.0625rem;line-height:1.3;font-weight:600;letter-spacing:-.005em}
.csh-g p{margin-top:6px;font-size:.9375rem;line-height:1.5;color:var(--text-body)}
.csh-more{margin-top:24px}

.csh-visual{position:relative;width:min(100%,460px);aspect-ratio:1;margin-inline:auto}
.csh-visual::before{content:"";position:absolute;inset:8% 14% 4%;background:radial-gradient(closest-side,rgba(45,212,191,.13),transparent);pointer-events:none}
.csh-still,.csh-canvas{position:absolute;inset:0;width:100%;height:100%;display:block}
.csh-canvas{display:none}
.js-field .csh-canvas{display:block}
.js-field .csh-still{opacity:0}
/* The batter sits dead centre of the print and the shield (both are centred on the visual box). */
.csh .cs-fig{position:absolute;left:50%;top:50%;width:44%;transform:translate(-50%,-50%);pointer-events:none}
.csh .cs-fig img{display:block;width:100%;height:auto}

@media (min-width:1024px){
  .csh-stage{grid-template-columns:minmax(0,6fr) minmax(0,5fr);column-gap:clamp(40px,5vw,80px);align-items:center}
  .csh-visual{width:min(100%,520px)}
}

/* Hold mode: desktop pointer, motion allowed. The stage sticks for one screen while the print becomes the shield. */
.csh.is-hold .csh-track{height:210vh;height:210dvh}
.csh.is-hold .csh-stage{position:sticky;top:0;height:100vh;height:100dvh;padding-block:calc(var(--header) + 24px) 32px;align-content:center}
.csh.is-hold .csh-g{opacity:0;transform:translateY(16px);transition:opacity var(--d4) var(--ease),transform var(--d4) var(--ease);transition-delay:calc(var(--k) * var(--d1))}
.csh.is-hold.is-tiles .csh-g{opacity:1;transform:none}
.csh.is-hold .csh-more{opacity:0;transition:opacity var(--d4) var(--ease) var(--d3)}
.csh.is-hold.is-tiles .csh-more{opacity:1}
@media (min-width:1024px) and (max-height:860px){
  .csh.is-hold .csh-stage{padding-block:calc(var(--header) + 16px) 16px}
  .csh.is-hold .csh-copy h2{font-size:clamp(2rem,1rem + 1.8vw,2.75rem);max-width:20ch}
  .csh.is-hold .csh-lede{font-size:1.0625rem;margin-top:14px}
  .csh.is-hold .csh-groups{margin-top:20px;gap:10px}
  .csh.is-hold .csh-g{padding:14px 16px}
  .csh.is-hold .csh-g p{font-size:.875rem}
}
@media (prefers-reduced-motion:reduce){.csh-g,.csh-more{transition:none!important}}
/* Phones and tablets: the shield sits between the promise and the four groups */
@media (max-width:1023px){
  .csh-stage{display:flex;flex-direction:column;gap:0}
  .csh-copy{display:contents}
  .csh-copy h2{order:1}.csh-lede{order:2}
  .csh-visual{order:3;margin-block:clamp(24px,6vw,40px) 0;width:min(100%,380px)}
  .csh-groups{order:4}.csh-more{order:5}
}


/* /./founders.css?v=20261107 */
/* Home section 8: The founders (board v2, 7 Nov 2026). Embedded fonts removed; uses the site font. */
:root{--ct-dur-1:100ms;--ct-dur-2:200ms;--ct-dur-3:300ms;--ct-dur-4:500ms;--ct-ease:cubic-bezier(.2,.7,.3,1);--ct-ease-out:cubic-bezier(.16,.84,.24,1);--r-xl:24px}





html.no-scroll,body.no-scroll{overflow:hidden}


/* ===========================================================================
   12b · Founders board — Midnight and Mint (ADR-029)
   Structure from Layout 1 (staggered 4-col board, cut-corner tile).
   Skin from the live sections: midnight surfaces, 1px raised borders,
   mint as the single accent, Plus Jakarta Sans, 6px radius.
   Click a tile: it lifts, centres and opens like a book (Layout 2 inside).
   Motion: transform + opacity only, 100/200/300/500ms ladder.
   =========================================================================== */
.fb,.fbk-back{
  --fb-bg:var(--bg,#0f172a); --fb-surface:var(--surface,#1e293b); --fb-raised:var(--surface-raised,#263449);
  --fb-line:var(--line-strong,#3a4a63); --fb-control:var(--control-border,#7184a0);
  --fb-chalk:var(--text-primary,#f8fafc); --fb-silver:var(--text-silver,#e2e8f0); --fb-body:var(--text-body,#cbd5e1); --fb-muted:var(--text-muted,#94a3b8);
  --fb-accent:var(--accent,#2dd4bf); --fb-accent-h:var(--accent-hover,#5eead4); --fb-on:var(--on-accent,#0f172a); --fb-focus:var(--focus-ring,#5eead4);
  --fb-r:var(--r,6px); --fb-gap:16px;
  --fb-ease:cubic-bezier(.2,.7,.3,1); --fb-ease-out:cubic-bezier(.16,.84,.24,1);
  --fb-type:var(--font-display,"Plus Jakarta Sans","Noto Sans Sinhala",system-ui,-apple-system,"Segoe UI",sans-serif);
  --fb-cut:polygon(0 0,62% 0,100% 30%,100% 100%,0 100%);
  --fb-sq:polygon(0 0,100% 0,100% 100%,0 100%);
}
.fb{
  position:relative;isolation:isolate;overflow:hidden;
  max-width:1320px;margin-inline:auto;padding:clamp(20px,3.6vw,48px);
  border-radius:12px;color:var(--fb-body);font-family:var(--fb-type);
  background:
    radial-gradient(42% 46% at 86% 8%,color-mix(in srgb,var(--fb-accent) 16%,transparent),transparent 70%),
    radial-gradient(38% 40% at 6% 96%,color-mix(in srgb,var(--fb-accent) 7%,transparent),transparent 70%),
    var(--fb-bg);
  border:1px solid var(--fb-raised)}
/* faint crease lines: the board as a pitch plan */
.fb::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;opacity:.5;
  background-image:linear-gradient(var(--fb-raised) 1px,transparent 1px),linear-gradient(90deg,var(--fb-raised) 1px,transparent 1px);
  background-size:64px 64px;background-position:-1px -1px;
  -webkit-mask-image:radial-gradient(80% 70% at 50% 40%,#000 0%,transparent 85%);mask-image:radial-gradient(80% 70% at 50% 40%,#000 0%,transparent 85%)}

/* ---- Header ---------------------------------------------------------------- */
.fb-head{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--fb-gap);align-items:start}
.fb-label{display:inline-flex;align-items:center;gap:10px;font-size:.8125rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fb-silver);white-space:nowrap}
.fb-label::before{content:none}
.fb-intro{grid-column:2;margin:clamp(28px,5vw,64px) 0 0;font:400 .9375rem/1.55 var(--fb-type);color:var(--fb-body);max-width:32ch;text-wrap:pretty}
.fb-title{grid-column:3 / span 2;justify-self:end;text-align:right;margin:0;
  font:700 clamp(2.5rem,1rem + 4.6vw,5rem)/1.02 var(--fb-type);letter-spacing:-.035em;color:var(--fb-chalk);text-transform:none;text-wrap:balance}
.fb-title span{display:block}
.fb-title .acc{color:var(--fb-accent)}

/* ---- Grid: 4 columns, rows in half-tile units --------------------------- */
.fb-gridwrap{container-type:inline-size;margin-top:clamp(18px,2.4vw,30px)}
.fb-grid{--col:calc((100cqi - 3 * var(--fb-gap)) / 4);
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  grid-template-rows:repeat(4,calc(var(--col) * .5 - var(--fb-gap) * .5));gap:var(--fb-gap);list-style:none;margin:0;padding:0}
.fb-cell{position:relative;min-width:0;container-type:size}
.fb-cell--c1{grid-column:2;grid-row:1 / 3}
.fb-cell--c2{grid-column:3;grid-row:1 / 3}
.fb-cell--c3{grid-column:4;grid-row:2 / 5}
.fb-cell--c4{grid-column:1;grid-row:3 / 5}
.fb-cell--c5{grid-column:2;grid-row:3 / 5}
.fb-note{grid-column:1;grid-row:1 / 3;position:relative;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fb-muted);line-height:1.5}
.fb-note p{margin:0;font:inherit;letter-spacing:inherit;color:inherit;text-transform:inherit;line-height:inherit;max-width:none}
.fb-note p + p{position:absolute;right:0;bottom:0;text-align:right}
.fb-note b{color:var(--fb-accent);font-weight:700}
.fb-cta{grid-column:4;grid-row:1;align-self:start;justify-self:end;display:inline-flex;align-items:center;gap:8px;
  min-height:48px;padding:0 20px;border-radius:var(--fb-r);background:var(--fb-accent);color:var(--fb-on);
  font:700 1rem/1 var(--fb-type);text-decoration:none;white-space:nowrap;
  transition:background-color var(--ct-dur-2,200ms) var(--fb-ease),transform 100ms var(--fb-ease)}
.fb-cta:hover{background:var(--fb-accent-h)}
.fb-cta:active{transform:translateY(1px)}
.fb-cta svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.fb-cta:focus-visible{outline:2px solid var(--fb-focus);outline-offset:3px}

/* ---- Tile ------------------------------------------------------------------ */
.fcard{all:unset;box-sizing:border-box;position:absolute;inset:0;display:block;cursor:pointer;
  background:var(--fb-line);clip-path:var(--fb-sq);border-radius:var(--fb-r);
  transition:transform var(--ct-dur-3,300ms) var(--fb-ease-out),background-color var(--ct-dur-2,200ms) linear,opacity var(--ct-dur-2,200ms) linear}
.fcard--cut{clip-path:var(--fb-cut);border-radius:var(--fb-r) 0 var(--fb-r) var(--fb-r)}
.fc-in{--pad:clamp(14px,1.6vw,20px);position:absolute;inset:1px;display:flex;flex-direction:column;overflow:hidden;
  padding:0;background:var(--fb-surface);border-radius:calc(var(--fb-r) - 1px);color:var(--fb-body);text-align:left}
.fcard--cut .fc-in{clip-path:var(--fb-cut);border-radius:calc(var(--fb-r) - 1px) 0 calc(var(--fb-r) - 1px) calc(var(--fb-r) - 1px)}
.fcard:hover{transform:translateY(-4px);background:var(--fb-accent)}
.fcard:focus-visible{outline:none;background:var(--fb-focus)}
.fcard:focus-visible .fc-in{inset:2px}
.fcard.is-lifted{opacity:0;transition:none}

.fc-thumb{position:relative;flex:1 1 0;min-height:0;z-index:0;overflow:hidden;background:var(--fb-bg)}
.fc-thumb img{width:100%;height:100%;object-fit:cover;object-position:var(--tp,50% 45%);display:block;
  transition:transform var(--ct-dur-4,500ms) var(--fb-ease-out)}
.fc-thumb::after{content:"";position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,color-mix(in srgb,var(--fb-surface) 0%,transparent) 62%,var(--fb-surface) 100%),
             linear-gradient(180deg,color-mix(in srgb,var(--fb-bg) 45%,transparent),transparent 30%)}
.fcard:hover .fc-thumb img{transform:scale(1.04)}

.fc-top{position:absolute;top:var(--pad);left:var(--pad);right:var(--pad);z-index:1;display:flex;align-items:flex-start;justify-content:space-between;gap:8px}
.fc-no{display:inline-grid;place-items:center;min-width:2.4em;height:1.9em;padding:0 .5em;border-radius:4px;
  font:700 clamp(.8125rem,6cqi,1rem)/1 var(--fb-type);font-variant-numeric:tabular-nums;letter-spacing:.02em;
  color:var(--fb-on);background:var(--fb-accent)}
.fc-who{display:inline-flex;align-items:center;height:1.9em;padding:0 .7em;border-radius:999px;
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fb-silver);
  background:color-mix(in srgb,var(--fb-bg) 62%,transparent);border:1px solid color-mix(in srgb,var(--fb-chalk) 14%,transparent);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);transition:opacity var(--ct-dur-2,200ms) linear}
.fcard--cut .fc-who{display:none}
.fc-body{position:relative;z-index:1;flex:none;padding:6px var(--pad) var(--pad)}
.fc-role{display:block;font:700 clamp(1.0625rem,9cqi,2.125rem)/1.04 var(--fb-type);letter-spacing:-.03em;color:var(--fb-chalk);text-wrap:balance}
.fc-desc{display:block;padding-right:22px;margin-top:clamp(6px,.8vw,10px);font-size:clamp(.75rem,5.2cqi,.875rem);line-height:1.45;color:var(--fb-body);max-width:36ch;text-wrap:pretty}
.fc-hint{position:absolute;z-index:2;right:var(--pad,20px);top:var(--pad,20px);display:inline-flex;align-items:center;gap:6px;height:1.9em;
  font-size:.6875rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fb-accent);
  opacity:0;transform:translateY(4px);transition:opacity var(--ct-dur-2,200ms) linear,transform var(--ct-dur-3,300ms) var(--fb-ease-out)}
.fcard--cut .fc-hint{right:auto;left:calc(var(--pad,20px) + 3.4em)}
.fcard:hover .fc-who,.fcard:focus-visible .fc-who{opacity:0}
.fcard:hover .fc-hint,.fcard:focus-visible .fc-hint{opacity:1;transform:none}
.fc-turn--fold{position:absolute;z-index:2;right:0;bottom:0;width:40px;height:40px;pointer-events:none;transform-origin:100% 100%;
  transform:scale(.4);transition:transform var(--ct-dur-3,300ms) var(--fb-ease-out);
  background:linear-gradient(315deg,var(--fb-bg) 0 50%,var(--fb-accent) 50% 100%);box-shadow:-3px -3px 10px -4px rgba(0,0,0,.6)}
.fcard:hover .fc-turn--fold,.fcard:focus-visible .fc-turn--fold{transform:scale(1)}

/* ---- Tablet / phone --------------------------------------------------------- */
@media (max-width:900px){
  .fb-head{grid-template-columns:1fr 1fr}
  .fb-intro{grid-column:1;grid-row:2;margin-top:12px}
  .fb-title{grid-column:2;grid-row:1 / 3}
  .fb-grid{grid-template-columns:1fr 1fr;grid-template-rows:none;grid-auto-rows:auto}
  .fb-note{display:none}
  .fb-cta{grid-column:1 / -1;grid-row:auto;justify-self:start;order:9}
  .fb-cell{grid-column:auto!important;grid-row:auto!important;aspect-ratio:4 / 3.4}
  .fb-cell--c3{grid-column:1 / -1!important;aspect-ratio:8 / 3.4}
}
@media (max-width:560px){
  .fb-head{grid-template-columns:1fr}
  .fb-title{grid-column:1;grid-row:1;justify-self:start;text-align:left;margin-top:12px}
  .fb-label,.fb-intro{grid-row:auto}
  .fb-grid{grid-template-columns:1fr}
  .fb-cell,.fb-cell--c3{aspect-ratio:5 / 4;grid-column:1!important}
  .fc-hint{display:none}
  .fcard:hover .fc-who{opacity:1}
  .fc-turn--fold{transform:scale(.7)}
}

/* ===========================================================================
   The book
   =========================================================================== */
.fbk-back{position:fixed;inset:0;z-index:140;display:none;align-items:center;justify-content:center;font-family:var(--fb-type)}
.fbk-back::before{content:"";position:absolute;inset:0;background:color-mix(in srgb,var(--fb-bg) 90%,transparent);opacity:0;
  transition:opacity var(--ct-dur-3,300ms) linear;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.fbk-back.is-shown{display:flex}
.fbk-back.is-on::before{opacity:1}
.fbk-close{position:absolute;top:clamp(12px,2vw,24px);right:clamp(12px,2vw,24px);z-index:3;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;cursor:pointer;opacity:0;
  background:var(--fb-surface);color:var(--fb-chalk);border:1px solid var(--fb-line);
  transition:opacity var(--ct-dur-2,200ms) linear,border-color var(--ct-dur-2,200ms) linear}
.fbk-back.is-on .fbk-close{opacity:1}
.fbk-close:hover{border-color:var(--fb-accent)}
.fbk-close:focus-visible{outline:2px solid var(--fb-focus);outline-offset:3px}
.fbk-close svg{width:18px;height:18px;stroke:currentColor;stroke-width:2;fill:none;stroke-linecap:round}

.fbk-move{--P:min(44vw,540px);--H:min(84vh,680px);position:relative;width:calc(var(--P) * 2);height:var(--H);transform-origin:50% 50%;perspective:2400px}
.fbk-move.is-flying{transition:transform var(--ct-dur-3,300ms) var(--fb-ease-out)}
.fbk{position:absolute;inset:0;transform:translateX(-25%);transform-style:preserve-3d;transition:transform var(--ct-dur-4,500ms) cubic-bezier(.65,.05,.25,1)}
.fbk.is-open{transform:none}
.fbk.is-quick,.fbk.is-quick .fbk-cover,.fbk.is-quick .fbk-shade{transition-duration:var(--ct-dur-3,300ms)}

.fbk-page{position:absolute;top:0;bottom:0;width:50%;overflow:hidden;background:var(--fb-surface);color:var(--fb-body)}
.fbk-right{left:50%;border-radius:0 var(--fb-r) var(--fb-r) 0;border:1px solid var(--fb-line);border-left:0;
  box-shadow:0 30px 80px -30px rgba(2,6,23,.95),inset 18px 0 24px -18px rgba(2,6,23,.85)}
.fbk-cover{position:absolute;top:0;bottom:0;left:50%;width:50%;transform-origin:0 50%;transform-style:preserve-3d;
  transition:transform var(--ct-dur-4,500ms) cubic-bezier(.65,.05,.25,1);z-index:2}
.fbk.is-open .fbk-cover{transform:rotateY(-180deg)}
.fbk-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;overflow:hidden}
.fbk-shade{position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(90deg,rgba(2,6,23,.6),rgba(2,6,23,0) 70%);
  opacity:0;transition:opacity var(--ct-dur-4,500ms) linear}
.fbk.is-open .fbk-front .fbk-shade{opacity:1}

/* Front face = the tile at book scale */
.fbk-front{--pad:clamp(22px,3vw,40px);container-type:inline-size;display:flex;flex-direction:column;padding:0;
  background:var(--fb-surface);border:1px solid var(--fb-line);border-radius:0 var(--fb-r) var(--fb-r) 0}
.fbk-front .fc-no{font-size:1.0625rem}
.fbk-front .fc-who{font-size:.75rem}
.fbk-front .fc-role{font-size:min(9cqi,3.5rem)}
.fbk-front .fc-desc{font-size:clamp(.875rem,1.2vw,1.0625rem);max-width:34ch}

/* Inside of the cover = Layout 2 portrait card */
.fbk-backface{transform:rotateY(180deg);border-radius:var(--fb-r) 0 0 var(--fb-r);background:var(--fb-bg);
  border:1px solid var(--fb-line);border-right:0;padding:clamp(20px,2.6vw,36px);box-shadow:inset -18px 0 24px -18px rgba(2,6,23,.85)}
.fbk-backface::before{content:"";position:absolute;inset:0;opacity:.45;pointer-events:none;
  background-image:linear-gradient(var(--fb-raised) 1px,transparent 1px),linear-gradient(90deg,var(--fb-raised) 1px,transparent 1px);background-size:48px 48px;
  -webkit-mask-image:radial-gradient(70% 60% at 60% 40%,#000,transparent 85%);mask-image:radial-gradient(70% 60% at 60% 40%,#000,transparent 85%)}
.fbk-ghost{position:absolute;left:-.04em;top:-.16em;font-weight:800;font-size:clamp(150px,19vw,260px);line-height:1;letter-spacing:-.06em;
  color:color-mix(in srgb,var(--fb-accent) 9%,transparent);pointer-events:none;user-select:none}
.fbk-micro{position:absolute;left:clamp(20px,2.6vw,36px);top:clamp(20px,2.6vw,36px);margin:0;font-size:.75rem;line-height:1.45;color:var(--fb-silver);max-width:20ch}
.fbk-micro b{display:block;font-weight:700;color:var(--fb-chalk)}
.fbk-micro span{color:var(--fb-muted)}
.fbk-photo{position:absolute;left:50%;top:13%;width:min(56%,300px);transform:translateX(-14%);z-index:2;margin:0;
  border:1px solid var(--fb-line);background:var(--fb-surface);border-radius:var(--fb-r);overflow:hidden}
.fbk-photo img{display:block;width:100%;aspect-ratio:4 / 4.6;object-fit:cover;object-position:50% 18%}
.fbk-cap{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:10px 12px 9px;background:var(--fb-chalk);color:var(--fb-bg)}
.fbk-cap b{grid-column:1 / -1;font-size:.8125rem;font-weight:700}
.fbk-cap span{font-size:.65rem;line-height:1.3;color:#475569;align-self:end}
.fbk-cap span + span{text-align:right}
.fbk-big{position:absolute;left:clamp(20px,2.6vw,36px);right:8px;bottom:clamp(18px,2.4vw,30px);z-index:1;margin:0;
  font-weight:700;font-size:clamp(44px,5.6vw,84px);line-height:.95;letter-spacing:-.045em;color:var(--fb-chalk)}
.fbk-big::after{content:".";color:var(--fb-accent)}

/* Facing page = profile */
.fbk-right{display:flex;flex-direction:column}
.fbk-scroll{flex:1;overflow:auto;padding:clamp(22px,3vw,40px);position:relative;scrollbar-width:thin;scrollbar-color:var(--fb-line) transparent}
.fbk-scroll > *{position:relative}
.fbk-kicker{display:flex;justify-content:space-between;gap:12px;font-size:.75rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fb-muted)}
.fbk-kicker em{font-style:normal;color:var(--fb-accent)}
.fbk-h{margin:clamp(14px,2.4vh,26px) 0 0;font:700 clamp(1.875rem,3.2vw,3rem)/1.02 var(--fb-type);letter-spacing:-.035em;color:var(--fb-chalk);text-transform:none;text-wrap:balance}
.fbk-who{margin-top:14px;display:flex;flex-direction:column;gap:2px;font-size:.875rem;line-height:1.4}
.fbk-who b{color:var(--fb-chalk);font-weight:700;font-size:.9375rem}
.fbk-who span{color:var(--fb-muted)}
.fbk-bio{margin:clamp(14px,2.4vh,22px) 0 0;font-size:clamp(.9rem,1.05vw,1rem);line-height:1.6;color:var(--fb-body);max-width:46ch;text-wrap:pretty}
.fbk-bio .lead{color:var(--fb-chalk);font-weight:500}
.fbk-mphoto{display:none}
.fbk-links{display:flex;flex-wrap:wrap;gap:10px;margin-top:18px}
.fbk-link{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 16px;border-radius:var(--fb-r);cursor:pointer;
  font:600 .9375rem/1 var(--fb-type);color:var(--fb-chalk);text-decoration:none;border:1px solid var(--fb-accent);background:none;
  transition:background-color var(--ct-dur-2,200ms) linear}
.fbk-link:hover{background:color-mix(in srgb,var(--fb-accent) 14%,transparent)}
.fbk-link:focus-visible,.fbk-nav button:focus-visible{outline:2px solid var(--fb-focus);outline-offset:3px}
.fbk-link svg{width:15px;height:15px;fill:currentColor}
.fbk-nav{display:flex;justify-content:space-between;gap:10px;padding:12px clamp(22px,3vw,40px) clamp(16px,2.4vw,24px);border-top:1px solid var(--fb-raised)}
.fbk-nav button{all:unset;box-sizing:border-box;cursor:pointer;min-height:44px;display:flex;flex-direction:column;justify-content:center;gap:2px;
  font:500 .8125rem/1.3 var(--fb-type);color:var(--fb-body);border-radius:var(--fb-r);padding:4px 6px;transition:color var(--ct-dur-2,200ms) linear}
.fbk-nav button:hover{color:var(--fb-accent)}
.fbk-nav button small{font-size:.65rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--fb-muted)}
.fbk-nav .next{text-align:right;align-items:flex-end}
.fbk-pg{position:absolute;right:clamp(22px,3vw,40px);bottom:-.18em;font-weight:800;font-size:clamp(120px,14vw,200px);line-height:1;letter-spacing:-.06em;
  color:color-mix(in srgb,var(--fb-accent) 7%,transparent);pointer-events:none;user-select:none}
.fbk-right .fbk-scroll,.fbk-right .fbk-nav{opacity:0;transition:opacity var(--ct-dur-3,300ms) linear}
.fbk.is-open .fbk-right .fbk-scroll,.fbk.is-open .fbk-right .fbk-nav{opacity:1;transition-delay:var(--ct-dur-2,200ms)}

@media (max-width:820px){
  .fbk-move{--P:min(94vw,520px);--H:min(88svh,760px);width:var(--P)}
  .fbk,.fbk.is-open{transform:none}
  .fbk-right,.fbk-cover{left:0;width:100%}
  .fbk-right{border-radius:var(--fb-r);border-left:1px solid var(--fb-line)}
  .fbk-front{border-radius:var(--fb-r)}
  .fbk-backface{display:none}
  .fbk-cover{transition:transform var(--ct-dur-4,500ms) cubic-bezier(.65,.05,.25,1),opacity var(--ct-dur-3,300ms) linear}
  .fbk.is-open .fbk-cover{transform:rotateY(-100deg);opacity:0;transition-delay:0s,var(--ct-dur-2,200ms)}
  .fbk-mphoto{display:flex;gap:14px;align-items:center;margin-top:18px}
  .fbk-mphoto img{width:84px;height:96px;object-fit:cover;object-position:50% 18%;border:1px solid var(--fb-line);border-radius:var(--fb-r)}
  .fbk-who{margin-top:0}
  .fbk-pg{font-size:120px}
}
@media (prefers-reduced-motion:reduce){
  .fcard,.fc-turn--fold,.fc-hint,.fc-thumb img,.fb-cta{transition:none}
  .fcard:hover{transform:none}
  .fcard:hover .fc-thumb img{transform:none}
  .fbk-move.is-flying,.fbk,.fbk-cover,.fbk-shade{transition:none!important}
  .fbk-right .fbk-scroll,.fbk-right .fbk-nav{transition:opacity var(--ct-dur-2,200ms) linear}
  .fbk-back .fbk-move{opacity:0;transition:opacity var(--ct-dur-2,200ms) linear}
  .fbk-back.is-on .fbk-move{opacity:1}
}




.cth{
  --c-bg:var(--bg,#0f172a);--c-surface:var(--surface,#1e293b);--c-raised:var(--raised,#263449);--c-line:var(--line-strong,#3a4a63);--c-control:var(--control,#7184a0);
  --c-chalk:var(--chalk,#f8fafc);--c-silver:var(--silver,#e2e8f0);--c-body:var(--body,#cbd5e1);--c-muted:var(--muted,#94a3b8);
  --c-accent:var(--accent,#2dd4bf);--c-accent-ink:var(--accent-ink,#0f766e);--c-soda:var(--gradient-lime-soda,radial-gradient(55% 50% at 70% 30%,rgba(255,229,59,.95) 0%,rgba(255,229,59,0) 100%),radial-gradient(90% 90% at 50% 55%,#c6ff3d 0%,#2be0a0 42%,#00b8ff 78%));--c-accent-h:var(--accent-hover,#5eead4);--c-accent-p:var(--accent-pressed,#14b8a6);--c-on:var(--on-accent,#0f172a);--c-focus:var(--focus,#5eead4);
  --f-d:var(--font-display,"Plus Jakarta Sans",system-ui,sans-serif);--f-b:var(--font-base,"Plus Jakarta Sans",system-ui,sans-serif);
  --rad:var(--r,6px);--ease:cubic-bezier(.2,.7,.3,1);
  --gut-l:max(var(--gut,16px),env(safe-area-inset-left,0px));--gut-r:max(var(--gut,16px),env(safe-area-inset-right,0px));
  position:relative;background:var(--c-bg);color:var(--c-body);font:400 1.0625rem/1.5 var(--f-b);padding-block:clamp(16px,3vw,48px) clamp(16px,2.4vw,32px);overflow:hidden;-webkit-font-smoothing:antialiased
}
.cth *,.cth *::before,.cth *::after{box-sizing:border-box}
.cth p,.cth h1,.cth h2,.cth ol,.cth ul{margin:0;padding:0}
.cth ol,.cth ul{list-style:none}
.cth :focus-visible{outline:2px solid var(--c-focus);outline-offset:2px}
.cth-in{max-width:1320px;margin-inline:auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.cth-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* Headline, subline, one CTA. Centred, as on the reference. */
.cth-head{text-align:center}
.cth h1{max-width:22ch;margin-inline:auto;font:700 clamp(2rem,calc(.9rem + 3.3vw),3.75rem)/1.06 var(--f-d);letter-spacing:-.03em;color:var(--c-chalk);text-wrap:balance}
.cth h1 span{display:inline}
.cth h1 .cth-acc{color:var(--c-accent)}
.cth .cth-sub strong{display:block;margin-top:4px;font-weight:600;color:var(--c-chalk)}
.cth .cth-sub{margin:clamp(12px,1.4vw,20px) auto 0;max-width:46ch;font-size:clamp(1.0625rem,calc(.95rem + .45vw),1.3125rem);line-height:1.45;color:var(--c-silver);text-wrap:pretty}
.cth-acts{display:flex;justify-content:center;margin-top:clamp(16px,1.6vw,24px)}
.cth-btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 24px;border-radius:var(--rad);background:var(--c-accent);color:var(--c-on);font:700 1.0625rem/1 var(--f-b);text-decoration:none;white-space:nowrap;transition:background-color 200ms var(--ease),transform 100ms var(--ease);touch-action:manipulation}
.cth-btn:hover{background:var(--c-accent-h)}
.cth-btn:active{background:var(--c-accent-p);transform:translateY(1px)}
.cth-btn svg{width:20px;height:20px}

/* The ring. Geometry is set from script so one shape fits every width. */
.cth-stage{position:relative;margin-top:clamp(8px,1.2vw,16px);height:clamp(330px,calc(220px + 15vw),440px);overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.cth-stage.is-drag{cursor:grabbing}
.cth-ring{position:absolute;left:50%;top:50%;width:0;height:0;transform-style:preserve-3d}
.cth-slot{position:absolute;left:-220px;top:-260px;width:440px;height:520px;backface-visibility:hidden;will-change:transform;visibility:hidden}
.cth-veil{position:absolute;inset:0;background:var(--c-bg);opacity:0;pointer-events:none;clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%)}
.cth-edge{position:absolute;top:0;bottom:0;width:clamp(28px,9%,150px);pointer-events:none;z-index:2}
.cth-edge.l{left:0;background:linear-gradient(90deg,var(--c-bg),transparent)}
.cth-edge.r{right:0;background:linear-gradient(270deg,var(--c-bg),transparent)}

/* Audience tiles. Authored at 440 by 520 card pixels, then placed in 3D. */
.cth-card{position:relative;width:440px;height:520px;padding:0 32px 32px;display:flex;flex-direction:column;background:var(--c-surface);color:var(--c-silver);text-decoration:none;clip-path:polygon(0 0,calc(100% - 34px) 0,100% 34px,100% 100%,0 100%);font:400 24px/1.25 var(--f-b);text-align:left;overflow:hidden}
.cth-card::before{content:"";position:absolute;inset:0;background:radial-gradient(62% 48% at 50% 40%,color-mix(in srgb,var(--c-accent) 24%,transparent) 0%,transparent 72%);pointer-events:none}
.cth-k-fig{position:relative;flex:none;height:248px;display:flex;align-items:flex-end;justify-content:center;padding-top:26px}
.cth-k-fig img{position:relative;max-height:208px;max-width:300px;width:auto;height:auto;object-fit:contain;display:block}
.cth-k-fig::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--c-chalk);opacity:.9}
.cth-k-name{position:relative;margin-top:24px;font:700 50px/1.02 var(--f-d);letter-spacing:-.035em;color:var(--c-chalk)}
.cth-k-pain{position:relative;margin-top:8px;font-size:30px;line-height:1.2;font-weight:500;color:var(--c-silver)}
.cth-k-go{position:relative;margin-top:auto;display:inline-flex;align-items:center;gap:8px;font:700 27px/1 var(--f-b);color:var(--c-accent)}
.cth-k-go svg{width:30px;height:30px}
/* Two light tiles and one brand-gradient tile break the run, as the reference mixes its footage. */
.cth-card.lt{background:var(--c-chalk)}
.cth-card.lt::before{background:radial-gradient(62% 48% at 50% 40%,color-mix(in srgb,var(--c-accent) 34%,transparent) 0%,transparent 72%)}
.cth-card.soda{background:var(--c-soda)}
.cth-card.soda::before{display:none}
.cth-card.lt .cth-k-name,.cth-card.soda .cth-k-name{color:var(--c-bg)}
.cth-card.lt .cth-k-pain,.cth-card.soda .cth-k-pain{color:var(--c-surface)}
.cth-card.lt .cth-k-go{color:var(--c-accent-ink)}
.cth-card.soda .cth-k-go{color:var(--c-bg)}
.cth-card.lt .cth-k-fig img,.cth-card.soda .cth-k-fig img{filter:brightness(.13)}
.cth-card.lt .cth-k-fig::after,.cth-card.soda .cth-k-fig::after{background:var(--c-bg)}

/* Picture tiles: the photograph fills the figure band edge to edge. */
.cth-card.ph .cth-k-fig{margin:0 -32px;padding-top:0;display:block}
.cth-card.ph .cth-k-fig img,.cth-card.lt.ph .cth-k-fig img{width:440px;height:248px;max-width:none;max-height:none;object-fit:cover;filter:none}
.cth-card.lt.ph .cth-k-fig::after{background:var(--c-chalk)}
/* The rail under the ring: the crease. Real links, one per audience. */
.cth-rail{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:12px 20px;margin-top:clamp(10px,1.4vw,18px);padding-top:clamp(10px,1.2vw,14px);border-top:3px solid var(--c-line);position:relative}
.cth-rail::before{content:"";position:absolute;left:0;right:0;top:-3px;height:3px;background:var(--c-chalk);transform-origin:0 50%;transform:scaleX(var(--fill,.14));transition:transform 300ms var(--ease)}
.cth-rail h2{font:600 1rem/1.25 var(--f-b);color:var(--c-chalk);white-space:nowrap}
.cth-rail ul{display:flex;flex-wrap:wrap;gap:8px}
.cth-rail a{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1px solid var(--c-line);border-radius:var(--rad);color:var(--c-body);font:500 .9375rem/1.1 var(--f-b);text-decoration:none;transition:border-color 200ms var(--ease),color 200ms var(--ease),background-color 200ms var(--ease);touch-action:manipulation}
.cth-rail a:hover{border-color:var(--c-chalk);color:var(--c-chalk)}
.cth-rail a.on{border-color:var(--c-accent);color:var(--c-chalk);background:color-mix(in srgb,var(--c-accent) 14%,transparent)}
.cth-ctl{appearance:none;background:none;border:1px solid var(--c-control);border-radius:var(--rad);color:var(--c-chalk);font:500 .9375rem/1 var(--f-b);min-height:44px;min-width:84px;padding:0 12px;cursor:pointer;transition:border-color 200ms var(--ease);touch-action:manipulation}
.cth-ctl:hover{border-color:var(--c-chalk)}

/* Without script, or with reduced motion: a still row of tiles you can scroll. */
.cth .cth-stages{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;padding:8px var(--gut-r) 12px var(--gut-l);margin-top:clamp(16px,2vw,24px)}
.cth-stages>li{flex:none;scroll-snap-align:center;width:min(300px,78vw)}
.cth-stages .cth-card{zoom:.68}
.cth-stages .cth-card:focus-visible{outline-offset:-4px}
.cth.is-live .cth-stages{display:none}
.cth:not(.is-live) .cth-stage,.cth:not(.is-live) .cth-rail{display:none}

@media (max-width:1100px){
  .cth-rail{grid-template-columns:minmax(0,1fr) auto}
  .cth-rail h2{grid-column:1;grid-row:1}
  .cth-rail .cth-ctl{grid-column:2;grid-row:1}
  .cth-rail ul{grid-column:1/-1}
}
@media (prefers-reduced-motion:no-preference){
  .cth h1 span{display:inline-block;animation:cth-rise 500ms var(--ease) both}
  .cth h1 span+span{animation-delay:100ms}
  .cth-sub,.cth-acts{animation:cth-rise 500ms var(--ease) 200ms both}
  .cth-stage{animation:cth-in 500ms var(--ease) 300ms both}
  @keyframes cth-rise{from{opacity:.01;transform:translateY(14px)}to{opacity:1;transform:none}}
  @keyframes cth-in{from{opacity:.01}to{opacity:1}}
  .cth.cth-again h1 span,.cth.cth-again .cth-sub,.cth.cth-again .cth-acts,.cth.cth-again .cth-stage{animation:none}
}
/* The audience panel: opens from a tile, the rail or the still row. */
.cth-pop{border:0;padding:0;margin:auto;background:transparent;color:var(--c-body);width:min(600px,calc(100% - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:visible}
.cth-pop::backdrop{background:color-mix(in srgb,var(--c-bg) 80%,transparent);backdrop-filter:blur(6px)}
.cth-pop-in{position:relative;max-height:calc(100dvh - 32px);overflow:auto;background:var(--c-surface);clip-path:polygon(0 0,calc(100% - 28px) 0,100% 28px,100% 100%,0 100%);padding:clamp(24px,4vw,40px);font:400 1.0625rem/1.5 var(--f-b)}
.cth-pop-x{position:absolute;top:12px;right:36px;width:44px;height:44px;display:grid;place-items:center;background:none;border:1px solid var(--c-line);border-radius:var(--rad);color:var(--c-chalk);cursor:pointer;transition:border-color 200ms var(--ease)}
.cth-pop-x:hover{border-color:var(--c-chalk)}
.cth-pop-x svg{width:20px;height:20px}
.cth-pop-top{display:flex;align-items:flex-end;gap:16px;padding-right:72px}
.cth-pop-fig{flex:none;width:104px;height:80px;display:flex;align-items:flex-end;justify-content:center;border-bottom:3px solid var(--c-chalk)}
.cth-pop-fig img{max-width:96px;max-height:72px;width:auto;height:auto;display:block}
.cth-pop .cth-pop-for{font:700 clamp(1.625rem,calc(1.1rem + 1.6vw),2.25rem)/1.05 var(--f-d);letter-spacing:-.03em;color:var(--c-chalk);padding-bottom:4px}
.cth .cth-pop-h,.cth-pop-h{margin-top:24px;font:600 1rem/1.3 var(--f-b);color:var(--c-accent)}
.cth .cth-pop-list{margin-top:12px;display:grid;gap:12px;counter-reset:q}
.cth-pop-list li{position:relative;padding-left:44px;color:var(--c-silver);font-size:1.0625rem;line-height:1.4;min-height:28px}
.cth-pop-list li::before{counter-increment:q;content:counter(q);position:absolute;left:0;top:-2px;width:28px;height:28px;border:1px solid var(--c-line);border-radius:var(--rad);display:grid;place-items:center;font:600 .875rem/1 var(--f-b);color:var(--c-chalk);font-variant-numeric:tabular-nums}
.cth .cth-pop-note{margin-top:20px;color:var(--c-muted);font-size:.9375rem}
.cth-pop-acts{display:flex;flex-wrap:wrap;align-items:center;gap:8px 24px;margin-top:20px}
.cth-pop-more{color:var(--c-chalk);font-weight:600;min-height:48px;display:inline-flex;align-items:center;text-underline-offset:3px;text-decoration-color:var(--c-control)}
html:has(.cth-pop[open]){overflow:hidden}
@media (max-width:600px){
  .cth-pop{width:100%;max-height:92dvh;margin:auto 0 0}
  .cth-pop-in{max-height:92dvh;clip-path:none;border-radius:12px 12px 0 0}
  .cth-pop-x{right:12px}
}
@media (prefers-reduced-motion:no-preference){
  .cth-pop[open] .cth-pop-in{animation:cth-pop 300ms var(--ease)}
  .cth-pop[open]::backdrop{animation:cth-in 200ms var(--ease)}
  @keyframes cth-pop{from{opacity:.01;transform:translateY(16px)}to{opacity:1;transform:none}}
}

/* Replay on every visit: while .ct-reset is on, an element snaps back to its start state with no reverse motion. */
.ct-reset,.ct-reset *,.ct-reset *::before,.ct-reset *::after{transition:none!important;animation:none!important}
/* Hit areas: at least 44 px on every orbit card, however small it is drawn. */
.orb-card{position:relative}
.orb-card::after{content:"";position:absolute;inset:calc(-1*var(--hit-y,0px)) calc(-1*var(--hit-x,0px))}
/* Level tiles: the six audience pictures, one copy each, shared by all eighteen tiles. */
.crd-tile img.crd-ph{left:0;right:0;top:11%;bottom:auto;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;opacity:1;background-size:cover;background-position:50% 50%}






/* Keep the mobile profile in a flat layer: Safari can lose the scrollable
   biography while compositing the desktop book's perspective and rotated cover. */
@media (max-width: 820px) {
  .fbk-move { perspective: none; }
  .fbk, .fbk-cover { transform-style: flat; }
  .fbk-cover { transition: opacity var(--ct-dur-3, 300ms) linear; }
  .fbk.is-open .fbk-cover {
    transform: none;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
  }
  .fbk-right { min-height: 0; }
  .fbk-right .fbk-scroll {
    flex: 1 1 0%;
    min-height: 0;
    overflow-y: auto;
    opacity: 1;
    transition: none;
  }
  .fbk-right .fbk-nav { flex-shrink: 0; }
}

/* Mobile adaptations reuse the desktop content and assets. */
@media (max-width: 820px) {
  .cth .cth-stage, .cth .cth-rail { display: none; }
  .cth.is-live .cth-stages, .cth .cth-stages {
    display: flex;
    gap: 14px;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 20px;
    padding-inline: 20px;
    overscroll-behavior-x: contain;
  }
  .cth-stages > li { width: min(320px, 82vw); }
  .cth-stages .cth-card {
    zoom: 1;
    width: 100%;
    height: auto;
    min-height: 340px;
    padding: 0 20px 22px;
    font-size: 16px;
  }
  .cth-stages .cth-k-fig { height: 170px; }
  .cth-stages .cth-k-fig img { max-width: 100%; max-height: 150px; }
  .cth-stages .cth-card.ph .cth-k-fig { margin-inline: -20px; }
  .cth-stages .cth-card.ph .cth-k-fig img { width: 100%; height: 170px; max-height: none; }
  .cth-stages .cth-k-name { font-size: 30px; margin-top: 18px; }
  .cth-stages .cth-k-pain { font-size: 18px; line-height: 1.4; }
  .cth-stages .cth-k-go { font-size: 18px; padding-top: 20px; }
  .cth-stages .cth-k-go svg { width: 22px; height: 22px; }
  .mobile-swipe-hint { padding-inline: 20px; color: var(--text-muted); font-size: .875rem; }

  .pom .pom-chs {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: 4px;
    overscroll-behavior-x: contain;
    padding: 4px 4px 20px;
    margin-top: 24px;
    align-items: stretch;
  }
  .pom .pom-ch {
    flex: 0 0 90%;
    min-width: 0;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    align-items: start;
    scroll-snap-align: start;
    gap: 20px;
    padding: 16px;
    border: 1px solid var(--p-line);
    border-radius: 8px;
    background: var(--p-surface);
  }
  .pom .pom-card { max-width: none; }
  .pom .pom-close {
    flex: 0 0 90%;
    min-width: 0;
    scroll-snap-align: start;
    padding: 16px;
    margin: 0;
  }
  .pom .pom-chaos, .pom .pom-strike { display: none; }
  .pom .pom-screen, .pom .pom-screen > *, .pom .pom-proofs li {
    transform: none !important;
    opacity: 1 !important;
    transition: none !important;
  }
  .pom .pom-ans { font-size: 1.375rem; }
  .pom .pom-proofs { margin-top: 16px; gap: 10px; }
  .pom .pom-proofs li { font-size: 1rem; }
  .pom-chs:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
  .pom-swipe-hint { margin-top: 20px; color: var(--text-muted); font-size: .875rem; }

  .orb, .orb.orb-live { display: block; }
  .orb .orb-stage { width: 100%; aspect-ratio: auto; position: static; cursor: auto; touch-action: auto; }
  .orb .orb-stage::before { display: none; }
  .orb .orb-ring { display: grid; position: static; grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .orb .orb-item { position: static; width: 100%; transform: none !important; opacity: 1 !important; visibility: visible !important; }
  .orb .orb-card { pointer-events: auto; }
  .orb .g-face { aspect-ratio: auto; min-height: 210px; gap: 12px; padding: 20px; border-radius: 8px; }
  .orb .g-face-t { font-size: 20px; }
  .orb .g-face-v { font-size: 40px; }
  .orb .g-face-v small, .orb .g-face-l { font-size: 16px; }
  .orb .orb-info { display: none; }
  .orb .g-face::after { content: 'Tap to enlarge →'; font-size: 14px; color: var(--text-body); }
  .qgrid { grid-template-columns: minmax(0, 1fr); }
  .qgrid .q { grid-column: auto; }
  .fly .fly-steps, .orb .orb-ring, #dashboards .qgrid {
    display: flex;
    gap: 16px;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    scroll-padding-inline: 4px;
    overscroll-behavior-x: contain;
    padding: 4px 4px 20px;
    align-items: stretch;
  }
  .fly .fly-step, .fly .fly-close, .orb .orb-item, #dashboards .qgrid .q {
    flex: 0 0 90%;
    min-width: 0;
    width: 90%;
    scroll-snap-align: start;
    padding: 16px;
    margin: 0;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: var(--surface);
  }
  .fly .fly-step { justify-content: flex-start; }
  .fly .fly-stage, .fly.fly-stick .fly-stage { position: static; }
  .fly .fly-step h3 { font-size: 1.75rem; }
  .fly .fly-step > p { font-size: 1.0625rem; }
  .fly .fly-fig { width: 100%; min-width: 0; }
  .fly .fly-fig figcaption { flex-wrap: wrap; }
  .orb .orb-item { padding: 0; border: 0; }
  #dashboards .qgrid .q { opacity: 1; transform: none; }
  .section-swipe-hint { margin-block: 16px 12px; color: var(--text-muted); font-size: .875rem; }
  .fly-steps:focus-visible, .orb-ring:focus-visible, .qgrid:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 4px; }
  .q, .gls-wrap { min-width: 0; }
  .ctv-body { padding: 12px; }
  .ctv-body > * { min-width: 0; max-width: 100%; }

  .fbk-cover { display: none; }
  .fbk, .fbk-move.is-flying { transition: none; }
  .fbk-back .fbk-right .fbk-nav { opacity: 1; transition: none; }
  .mnav-panel { padding-bottom: max(24px, env(safe-area-inset-bottom)); }
  .mnav-panel a { font-size: 1.125rem; min-height: 48px; }
  .mnav-panel .small-links { grid-template-columns: 1fr; }
  .mnav-panel .btn { margin-top: 12px; }
}
@media (min-width: 821px) { .mobile-swipe-hint, .pom-swipe-hint, .section-swipe-hint { display: none; } }