/* Layout: dark-first "night instrument" bands, broken by bright paper bands for reading; 1240px column; pinned storytelling + interactive explainers */
:root{
  color-scheme: dark;
  --bg:#07100c;            /* night green */
  --bg-2:#0c1712;
  --bg-3:#12201a;
  --line:rgba(226,240,230,.09);
  --line-2:rgba(226,240,230,.16);
  --fg:#edf2ee;
  --fg-2:rgba(237,242,238,.64);
  --fg-3:rgba(237,242,238,.40);
  --green:#1aa864;
  --green-2:#0b6a3c;
  --gold:#cfa96f;
  --gold-2:#8d6b3d;
  --alert:#e08a6d;
  --paper:#f4f5f0;
  --paper-2:#ffffff;
  --ink:#0b120e;
  --ink-2:#56625b;
  --ink-line:rgba(11,18,14,.10);
  --f-display:"Montserrat","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Albert Sans","Helvetica Neue",Arial,sans-serif;
  --f-body:"Albert Sans","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  --max:1240px;
  --g:clamp(20px,4vw,48px);
  --ease:cubic-bezier(.2,.7,.1,1);
  /* frosted finish for gold: a fine satin texture over the gold, the colour itself unchanged */
  --frost-grain:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.0 0 0 0 0.000  1.0 0 0 0 0.000  1.0 0 0 0 0.000  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --frost-haze:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='480' height='480'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.016' numOctaves='2' seed='9' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0.45 0 0 0 0.275  0.45 0 0 0 0.275  0.45 0 0 0 0.275  0 0 0 0 1'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  --frost-grain-t:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n' x='0' y='0' width='100%25' height='100%25' color-interpolation-filters='sRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' seed='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='1.0 0 0 0 0.000  1.0 0 0 0 0.000  1.0 0 0 0 0.000  0 0 0 0 0.3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  /* the frosted finish as one tile, laid on with plain transparency: never a CSS blend mode, which some phone browsers carry into the text that follows */
  --frost:url("img/frost.png");--frost-text:url("img/frost-text.png");
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--fg);font-family:var(--f-body);font-size:17px;line-height:1.47;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
h1,h2,h3,h4{font-family:var(--f-body);font-weight:600;margin:0;text-wrap:balance;letter-spacing:-.022em}
p{margin:0}
button{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px}
.wrap{max-width:var(--max);margin-inline:auto;padding-inline:var(--g)}
section{padding-block:clamp(96px,12vw,168px);position:relative}
.light{background:var(--paper);color:var(--ink)}
.eyebrow{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);display:inline-block}
.light .eyebrow{color:var(--gold-2)}
.serif{font-family:inherit;font-style:normal;font-weight:inherit;letter-spacing:inherit;color:var(--gold)}
.light .serif{color:var(--green-2)}
.h1{font-family:var(--f-display);font-size:clamp(40px,5.6vw,80px);font-weight:600;line-height:1.04;letter-spacing:-.022em}
.h1 .tw{font-weight:800;background:var(--frost-text) 0 0/160px 160px,linear-gradient(100deg,#f0d9ae,var(--gold) 50%,#e9cf9f);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
.h2{font-size:clamp(32px,4.2vw,58px);font-weight:600;line-height:1.06;letter-spacing:-.028em}
.lede{font-size:clamp(19px,1.6vw,21px);line-height:1.45;color:var(--fg-2);max-width:58ch}
.light .lede{color:var(--ink-2)}
.head{display:grid;gap:22px;max-width:860px}
.small{font-size:13px;color:var(--fg-3)}
.light .small{color:var(--ink-2)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:10px;font-weight:500;font-size:16px;text-decoration:none;padding:14px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .3s var(--ease),background .3s,border-color .3s,color .3s;white-space:nowrap}
.btn:hover{transform:translateY(-1px)}
.btn-gold{position:relative;isolation:isolate;background:linear-gradient(120deg,#e4c48f,var(--gold) 45%,#a8834f);color:#1a1209}
.btn-gold::after,.core-box::after,.node.core .dot::after,.f5::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--frost) 0 0/160px 160px;opacity:.4;z-index:-1;pointer-events:none}
.btn-gold:hover{filter:brightness(1.06)}
.btn-line{border-color:var(--line-2);color:var(--fg);background:rgba(255,255,255,.02)}
.btn-line:hover{border-color:var(--fg-2)}
.light .btn-line{border-color:var(--ink-line);color:var(--ink)}

/* ---------------- NAV ---------------- */
.nav{position:fixed;inset:0 0 auto;z-index:60;padding-top:env(safe-area-inset-top,0px);transition:background .4s,border-color .4s;border-bottom:1px solid transparent}
.nav.solid{background:rgba(7,16,12,.72);backdrop-filter:saturate(170%) blur(20px);-webkit-backdrop-filter:saturate(170%) blur(20px);border-color:var(--line)}
.nav-in{height:68px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:block;color:var(--fg)}
.brand svg{height:32px;width:auto;display:block}
.nav ul{display:flex;gap:4px;list-style:none;margin:0;padding:4px;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02)}
.nav ul a{display:block;text-decoration:none;font-size:14px;color:var(--fg-2);padding:7px 14px;border-radius:999px;transition:color .2s,background .2s}
.nav ul a:hover,.nav ul a.on{color:var(--fg);background:rgba(255,255,255,.06)}
.nav .btn{padding:10px 18px;font-size:14px}
.burger{display:none;background:none;border:0;width:44px;height:44px;padding:10px;cursor:pointer}
.burger span{display:block;height:1.5px;background:var(--fg);margin:6px 0}
.menu{position:fixed;inset:0;z-index:59;background:rgba(7,16,12,.97);backdrop-filter:blur(20px);padding:calc(100px + env(safe-area-inset-top,0px)) var(--g) 40px;display:flex;flex-direction:column}
.menu a{font-family:var(--f-body);font-weight:600;font-size:30px;letter-spacing:-.02em;text-decoration:none;padding:12px 0;border-bottom:1px solid var(--line)}
.menu .btn{margin-top:28px;align-self:flex-start;font-size:15px;border-bottom:0}
@media (max-width:1000px){.nav ul,.nav .nav-cta{display:none}.burger{display:block}}

/* ---------------- HERO ---------------- */
.hero{padding-block:clamp(130px,16vw,190px) 0;overflow:hidden;isolation:isolate}

.hero-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,1fr);gap:24px;align-items:center;min-height:min(720px,78svh)}
.hero-copy{position:relative;z-index:2;display:grid;gap:26px}
/* hero type, as in the brand library: Montserrat statement + caps label, Albert Sans text */
.hcaps{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.hh1{margin:0;font-family:var(--f-display);font-weight:600;font-size:clamp(38px,4.8vw,70px);line-height:1.04;letter-spacing:-.022em;text-wrap:balance}
.hh1 span{font-weight:800;background:var(--frost-text) 0 0/160px 160px,linear-gradient(100deg,#f0d9ae,var(--gold) 50%,#e9cf9f);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em;text-shadow:none}
.hlede{font-family:"Albert Sans",var(--f-body);font-size:clamp(19px,1.6vw,21px);line-height:1.45;max-width:52ch}
.hero .cta-row .btn{font-family:"Albert Sans",var(--f-body);font-weight:500;font-size:16px;padding:14px 24px}
.cta-row{display:flex;flex-wrap:wrap;gap:12px}
.globe-wrap{position:relative;aspect-ratio:1/1;width:118%;margin-right:-18%;justify-self:end}
#globe{position:absolute;inset:0;width:100%;height:100%}
.noglobe{background:radial-gradient(circle at 50% 50%,rgba(26,168,100,.18),transparent 60%)}
.globe-frost{position:absolute;left:50%;top:50%;width:83%;height:83%;transform:translate(-50%,-50%);border-radius:50%;pointer-events:none;-webkit-backdrop-filter:blur(16px) saturate(115%) brightness(.72);backdrop-filter:blur(16px) saturate(115%) brightness(.72);background:radial-gradient(circle at 36% 30%,rgba(4,12,9,.18),rgba(4,12,9,.32) 70%)}
.noglobe .globe-frost{display:none}
.globe-tag svg{height:13px;width:auto;display:block;color:#e9cf9f;margin-right:-2px}
.globe-tag{padding:6px 12px!important;display:flex;align-items:center;gap:8px}
.globe-tag i{font-style:normal;opacity:.6}
.globe-tag{transition:opacity .4s;position:absolute;left:52%;top:39%;font-family:var(--f-mono);font-size:11px;color:var(--gold);letter-spacing:.08em;white-space:nowrap;pointer-events:none;padding:6px 10px;border:1px solid rgba(207,169,111,.35);background:rgba(7,16,12,.6);backdrop-filter:blur(8px);border-radius:999px;transform:translate(calc(-100% - 18px),-50%)}
@media (max-width:600px){.globe-tag{transform:translate(-50%,calc(-100% - 16px));font-size:10px;letter-spacing:.06em;padding:5px 10px!important;gap:6px}.globe-tag svg{height:11px}}
@media (max-width:1000px){
  .hero-grid{grid-template-columns:1fr;min-height:0}
  .globe-wrap{width:100%;margin:0 auto;max-width:560px;margin-top:-10px}
}
.lenses{margin-top:clamp(40px,6vw,72px);border-top:1px solid var(--line);display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.lens{padding:22px 18px 30px 0;display:grid;gap:8px;align-content:start;min-width:0}
.lens + .lens{padding-left:18px;border-left:1px solid var(--line)}
.lens .n{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.22em;color:var(--gold)}
.lens b{font-family:"Albert Sans",var(--f-body);font-weight:600;font-size:16px;line-height:1.25;letter-spacing:-.01em;text-wrap:balance}
.lens span:last-child{font-family:"Albert Sans",var(--f-body);font-size:13.5px;line-height:1.4;color:var(--fg-3)}
@media (max-width:820px){.lenses{grid-template-columns:repeat(2,minmax(0,1fr))}.lens:nth-child(odd){border-left:0;padding-left:0}.lens{border-top:1px solid var(--line)}.lens:nth-child(-n+2){border-top:0}}


/* hero atmosphere: slow aurora */
.aurora{position:absolute;inset:-25% -15% -10%;z-index:-3;filter:blur(70px) saturate(120%);pointer-events:none;-webkit-mask-image:linear-gradient(180deg,#000 55%,transparent 98%);mask-image:linear-gradient(180deg,#000 55%,transparent 98%)}
.aurora i{position:absolute;border-radius:50%;will-change:transform}
.aurora i:nth-child(1){width:62vmax;height:62vmax;left:-8%;top:-6%;background:radial-gradient(circle,rgba(11,106,60,.62),rgba(11,106,60,0) 68%);animation:au1 46s ease-in-out infinite alternate}
.aurora i:nth-child(2){width:48vmax;height:48vmax;right:-6%;top:18%;background:radial-gradient(circle,rgba(141,107,61,.34),rgba(141,107,61,0) 66%);animation:au2 58s ease-in-out infinite alternate}
.aurora i:nth-child(3){width:54vmax;height:54vmax;left:28%;top:34%;background:radial-gradient(circle,rgba(14,86,78,.42),rgba(14,86,78,0) 66%);animation:au3 70s ease-in-out infinite alternate}
.aurora i:nth-child(4){width:30vmax;height:30vmax;left:46%;top:-4%;background:radial-gradient(circle,rgba(26,168,100,.20),rgba(26,168,100,0) 66%);animation:au2 52s ease-in-out -20s infinite alternate-reverse}
@keyframes au1{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(14vw,8vh,0) scale(1.12)}100%{transform:translate3d(6vw,18vh,0) scale(.94)}}
@keyframes au2{0%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(-12vw,-6vh,0) scale(1.15)}100%{transform:translate3d(-20vw,10vh,0) scale(1)}}
@keyframes au3{0%{transform:translate3d(0,0,0) scale(1.05)}50%{transform:translate3d(-16vw,-10vh,0) scale(.9)}100%{transform:translate3d(10vw,-4vh,0) scale(1.1)}}
.hero .hh1,.hero .lede{text-shadow:0 1px 30px rgba(7,16,12,.35)}
.hero .hh1 span{text-shadow:none}
/* hero depth: light shaft, dust in three depth planes, backlight, vignette (no grain) */
.depth-back,.depth-front{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.depth-back{z-index:-2}
.depth-front{z-index:1}
.shaft{position:absolute;z-index:-2;pointer-events:none;left:var(--sx,-5%);top:var(--sy,4%);width:var(--sl,150%);height:clamp(260px,36vh,420px);margin-top:calc(clamp(260px,36vh,420px)/-2);transform-origin:0 50%;transform:rotate(var(--sa,22deg));background:linear-gradient(180deg,transparent 0%,rgba(196,238,214,.04) 36%,rgba(214,244,226,.06) 50%,rgba(196,238,214,.04) 64%,transparent 100%);-webkit-mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 62%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0%,#000 14%,#000 62%,transparent 100%);filter:blur(28px);animation:breathe 22s ease-in-out infinite alternate}
@keyframes breathe{from{opacity:.75}to{opacity:1}}
.backlight{position:absolute;z-index:-2;pointer-events:none;inset:0;background:radial-gradient(closest-side circle at var(--gx,73%) var(--gy,50%),rgba(207,169,111,.09),rgba(207,169,111,.035) 55%,transparent 100%);background-size:100% 100%}
.vignette{position:absolute;z-index:-1;pointer-events:none;inset:0;background:radial-gradient(130% 100% at 60% 42%,transparent 55%,rgba(3,8,6,.32) 100%),linear-gradient(180deg,rgba(3,8,6,.18),transparent 16%)}
@media (prefers-reduced-motion:reduce){.shaft{animation:none}}
/* ---------------- QUESTIONS ---------------- */
.questions{margin-top:clamp(48px,6vw,80px);display:grid;gap:4px}
.questions p{font-family:var(--f-body);font-weight:600;font-size:clamp(34px,6.2vw,88px);line-height:1.02;letter-spacing:-.035em;color:#c9cfca;transition:color .7s var(--ease)}
.questions p.lit{color:var(--ink)}
.questions p em{font-style:normal;font-weight:inherit}
.questions .lit em{color:var(--green-2)}
.answer{margin-top:clamp(48px,6vw,72px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:32px;padding-top:28px;border-top:1px solid var(--ink-line)}
.answer strong{font-family:var(--f-body);font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.02em;line-height:1.2}
@media (max-width:820px){.answer{grid-template-columns:1fr}}

/* ---------------- ROLE RAIL ---------------- */
.rail{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.rail::before{content:"";position:absolute;left:10%;right:10%;top:44px;height:1px;background:var(--line-2)}
.rail .beam{position:absolute;top:43px;left:10%;width:80px;height:3px;border-radius:3px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:beam 4.5s var(--ease) infinite}
@keyframes beam{0%{left:10%;opacity:0}10%{opacity:1}90%{opacity:1}100%{left:calc(90% - 80px);opacity:0}}
.node{display:grid;justify-items:center;text-align:center;gap:16px;padding-inline:10px;min-width:0;position:relative}
.node .dot{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:var(--bg-2);border:1px solid var(--line-2);position:relative;z-index:1}
.node .dot svg{width:30px;height:30px;color:var(--fg-2)}
.node.core .dot{background:radial-gradient(circle at 30% 25%,#e2c18b,#8d6b3d 60%,#3d2a14);border:0;box-shadow:0 0 0 8px rgba(207,169,111,.08),0 0 60px rgba(207,169,111,.35)}
.node.core .dot svg{color:#fff}
.node.you .dot{border-color:rgba(26,168,100,.5)}
.node.you .dot svg{color:var(--green)}
.node b{font-family:var(--f-body);font-weight:600;font-size:16px;letter-spacing:-.01em}
.node span{font-size:14px;color:var(--fg-3);max-width:22ch}
@media (max-width:860px){
  .rail{grid-template-columns:1fr;gap:28px;padding-left:4px}
  .rail::before{left:44px;right:auto;top:44px;bottom:44px;width:1px;height:auto}
  .rail .beam{display:none}
  .node{grid-template-columns:88px 1fr;justify-items:start;text-align:left;align-items:center;column-gap:20px;row-gap:2px}
  .node .dot{grid-row:span 2}
}
.caption{margin-top:48px;text-align:center}

/* ---------------- HOW IT WORKS (pinned) ---------------- */
.how-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);margin-top:clamp(48px,6vw,80px)}
.how-visual{position:sticky;top:110px;align-self:start}
.how-steps{display:grid}
.how-step{min-height:62vh;display:flex;flex-direction:column;justify-content:center;gap:14px;padding-block:24px;opacity:.38;transition:opacity .5s var(--ease)}
.how-step.on{opacity:1}
.how-step .k{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2)}
.how-step h3{font-size:clamp(30px,3.4vw,46px);font-weight:700;letter-spacing:-.04em;line-height:1.02}
.how-step p{color:var(--ink-2);max-width:42ch;font-size:18px}
.how-dots{display:none;gap:8px;justify-content:center;margin-top:16px}
.how-dots i{width:24px;height:3px;border-radius:2px;background:var(--ink-line);transition:background .3s}
.how-dots i.on{background:var(--green-2)}
@media (max-width:900px){
  .how-grid{grid-template-columns:1fr}
  .how-visual{position:relative;top:0}
  .how-dots{display:flex}
  .how-step{min-height:0;opacity:1;padding-block:22px;border-top:1px solid var(--ink-line)}
}
/* the case file */
.case{background:var(--bg);color:var(--fg);border-radius:28px;padding:clamp(18px,2.4vw,28px);box-shadow:0 50px 100px -40px rgba(7,16,12,.55);border:1px solid rgba(255,255,255,.06);font-size:14px;position:relative;overflow:hidden}
.case::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;background:radial-gradient(80% 50% at 100% 0%,rgba(26,168,100,.12),transparent 60%)}
.case-top{display:flex;justify-content:space-between;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.case-top .id{font-family:var(--f-mono);font-size:12.5px;color:var(--fg-2)}
.case-top .id b{display:block;font-family:var(--f-body);font-size:16px;color:var(--fg);letter-spacing:-.01em;margin-bottom:2px}
.pill{font-family:var(--f-mono);font-size:11px;letter-spacing:.06em;text-transform:uppercase;padding:6px 10px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-2);white-space:nowrap}
.pill{display:inline-grid;justify-items:center}
.pill .st{grid-area:1/1;visibility:hidden}
.case[data-step="1"] .pill .s1,.case[data-step="2"] .pill .s2,.case[data-step="3"] .pill .s3,.case[data-step="4"] .pill .s4,.case[data-step="5"] .pill .s5{visibility:visible}
.case[data-step="2"] .pill{border-color:rgba(26,168,100,.5);color:var(--green)}
.case[data-step="3"] .pill{border-color:rgba(237,242,238,.45);color:var(--fg)}
.case[data-step="4"] .pill{border-color:rgba(207,169,111,.5);color:var(--gold)}
.case[data-step="5"] .pill{background:var(--green-2);border-color:var(--green-2);color:#fff}
.rows{list-style:none;margin:6px 0 0;padding:0}
.rows li{display:grid;grid-template-columns:minmax(0,1fr) 132px;gap:4px 12px;align-items:center;padding:13px 0;border-bottom:1px solid var(--line)}
.rows .nm{font-weight:600;font-size:14.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rows .src{grid-column:1;font-family:var(--f-mono);font-size:11px;color:var(--fg-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.rows .stt{grid-row:1/3;grid-column:2;font-family:var(--f-mono);font-size:11.5px;text-align:right;width:132px;white-space:nowrap}
.stt span{display:none}
.case[data-step="1"] .stt .c{display:inline;color:var(--fg-2);border:1px dashed var(--line-2);padding:3px 8px;border-radius:6px}
.case[data-step="2"] .stt .v,.case[data-step="3"] .stt .v,.case[data-step="4"] .stt .v,.case[data-step="5"] .stt .v{display:inline-flex;align-items:center;gap:6px;color:var(--green)}
.case[data-step="4"] li.ex .stt .v,.case[data-step="5"] li.ex .stt .v{display:none}
.case[data-step="4"] li.ex .stt .x,.case[data-step="5"] li.ex .stt .x{display:inline;color:var(--gold)}
.stt .v::before{content:"";width:14px;height:14px;border-radius:50%;background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.8' fill='none' stroke='white' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/10px no-repeat}
.case[data-step="2"] .rows li{animation:tick .6s var(--ease) both}
.case[data-step="2"] .rows li:nth-child(2){animation-delay:.12s}.case[data-step="2"] .rows li:nth-child(3){animation-delay:.24s}.case[data-step="2"] .rows li:nth-child(4){animation-delay:.36s}.case[data-step="2"] .rows li:nth-child(5){animation-delay:.48s}.case[data-step="2"] .rows li:nth-child(6){animation-delay:.6s}
@keyframes tick{from{background:rgba(26,168,100,.0)}40%{background:rgba(26,168,100,.08)}to{background:transparent}}
.src .p{display:none;color:var(--gold)}
.case[data-step="3"] .src .p,.case[data-step="4"] .src .p,.case[data-step="5"] .src .p{display:inline}
.case[data-step="3"] .src .q,.case[data-step="4"] .src .q,.case[data-step="5"] .src .q{display:none}
.case-foot{margin-top:16px;display:grid;gap:10px}
.case-foot{grid-template-areas:"m"}
.foot-msg{grid-area:m;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border-radius:14px;font-size:13.5px;min-height:52px;opacity:0;visibility:hidden;transition:opacity .35s}
.case[data-step="1"] .f1,.case[data-step="2"] .f2,.case[data-step="3"] .f3,.case[data-step="4"] .f4,.case[data-step="5"] .f5{opacity:1;visibility:visible}
.f1{background:rgba(255,255,255,.03);border:1px dashed var(--line-2);color:var(--fg-2)}
.f2{background:rgba(26,168,100,.08);color:var(--fg-2)}
.f2 .bar{flex:1;height:4px;border-radius:4px;background:var(--line);overflow:hidden;max-width:160px}
.f2 .bar i{display:block;height:100%;width:0;background:var(--green);animation:fill 2.4s var(--ease) forwards}
@keyframes fill{to{width:100%}}
.f3{background:rgba(237,242,238,.04);color:var(--fg-2);border:1px solid var(--line-2)}
.f3 .mono{font-size:11px;color:var(--green)}
.f4{background:rgba(207,169,111,.10);color:var(--gold);border:1px solid rgba(207,169,111,.25)}
.f5{position:relative;isolation:isolate;background:linear-gradient(110deg,#3d2a14,#8d6b3d 60%,#cfa96f);color:#fff}
.f5 b{font-family:var(--f-body);font-weight:600}
.f5 .you{font-family:var(--f-mono);font-size:11px;background:rgba(0,0,0,.25);padding:6px 10px;border-radius:999px;white-space:nowrap}

/* ---------------- BENTO ---------------- */
.bento{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:16px}
.tile{background:var(--bg-2);border:1px solid var(--line);border-radius:28px;padding:clamp(22px,2.4vw,32px);display:flex;flex-direction:column;gap:14px;min-width:0;position:relative;overflow:hidden;transition:border-color .4s,transform .6s var(--ease)}
.tile:hover{border-color:var(--line-2);transform:translateY(-3px)}
.tile h3{font-size:22px;font-weight:600;letter-spacing:-.02em}
.tile p{color:var(--fg-2);font-size:15.5px;max-width:46ch}
.tile .viz{margin-top:auto;padding-top:18px;min-height:150px;display:grid;place-items:center}
.t-a{grid-column:span 3}.t-b{grid-column:span 3}.t-c{grid-column:span 2}.t-d{grid-column:span 2}.t-e{grid-column:span 2}
.t-wide{grid-column:span 6;display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:32px;align-items:center;background:linear-gradient(120deg,#13241b,#0c1712 60%);}
@media (max-width:1000px){.t-a,.t-b{grid-column:span 6}.t-c,.t-d,.t-e{grid-column:span 3}.t-e{grid-column:span 6}.t-wide{grid-template-columns:1fr}}
@media (max-width:620px){.bento>*{grid-column:span 6!important}}
/* face scan */
.face{width:170px;height:170px;position:relative}
.face svg{width:100%;height:100%}
.face .scan{position:absolute;left:8%;right:8%;height:2px;background:linear-gradient(90deg,transparent,var(--green),transparent);box-shadow:0 0 14px var(--green);animation:scan 3.2s ease-in-out infinite}
@keyframes scan{0%,100%{top:12%}50%{top:86%}}
.face .lm{fill:var(--green);animation:blink 3.2s ease-in-out infinite}
@keyframes blink{0%,100%{opacity:.25}50%{opacity:1}}
.face3d{position:relative;width:100%;height:380px;min-height:380px;padding:0!important;margin-top:auto;display:block!important;border-radius:20px;overflow:hidden;background:radial-gradient(60% 70% at 50% 45%,rgba(26,168,100,.10),transparent 70%)}
.face3d canvas{position:absolute;inset:0;width:100%;height:100%;cursor:crosshair}
.hud{position:absolute;inset:12px;pointer-events:none;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3);--c:rgba(207,169,111,.55);background:linear-gradient(var(--c),var(--c)) 0 0/16px 1px,linear-gradient(var(--c),var(--c)) 0 0/1px 16px,linear-gradient(var(--c),var(--c)) 100% 0/16px 1px,linear-gradient(var(--c),var(--c)) 100% 0/1px 16px,linear-gradient(var(--c),var(--c)) 0 100%/16px 1px,linear-gradient(var(--c),var(--c)) 0 100%/1px 16px,linear-gradient(var(--c),var(--c)) 100% 100%/16px 1px,linear-gradient(var(--c),var(--c)) 100% 100%/1px 16px;background-repeat:no-repeat}
.hud span{position:absolute;padding:8px 12px}
.h-tl{left:0;top:0}.h-tr{right:0;top:0;color:var(--green);display:flex;align-items:center;gap:6px}
.h-tr::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:blink 1.6s ease-in-out infinite}
.h-bl{left:0;bottom:0}.h-br{right:0;bottom:0;color:var(--gold);text-align:right;max-width:60%}
/* statement */
.stmt{width:100%;max-width:340px;background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:14px;padding:16px;display:grid;gap:9px;position:relative;overflow:hidden}
.stmt div{display:grid;grid-template-columns:52px 1fr 64px;gap:10px;align-items:center}
.stmt i{height:6px;border-radius:3px;background:rgba(255,255,255,.12)}
.stmt i:first-child{background:rgba(255,255,255,.08)}
.stmt i:last-child{justify-self:end;width:100%}
.stmt .flag i:last-child{background:var(--alert)}
.stmt .flag::after{content:"edited total";position:absolute;right:16px;font-family:var(--f-mono);font-size:10px;color:var(--alert);transform:translateY(-15px)}
.stmt::before{content:"";position:absolute;left:0;right:0;height:30%;background:linear-gradient(180deg,transparent,rgba(207,169,111,.14),transparent);animation:sweep 4s linear infinite}
@keyframes sweep{from{top:-30%}to{top:100%}}
/* rings */
.rings{width:150px;height:150px;border-radius:50%;position:relative;background:repeating-radial-gradient(circle,transparent 0 22px,var(--line) 22px 23px)}
.rings::after{content:"";position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(26,168,100,.35),transparent 25%);animation:spin 4s linear infinite}
.rings i{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--fg-2)}
.rings i.h{background:var(--gold);box-shadow:0 0 10px var(--gold)}
@keyframes spin{to{transform:rotate(360deg)}}
/* org tree */
.tree{width:180px}
.tree circle{fill:var(--bg-3);stroke:var(--line-2)}
.tree circle.p{animation:pulse-n 3s ease-in-out infinite}
.tree line{stroke:var(--line-2)}
@keyframes pulse-n{0%,100%{fill:var(--bg-3)}50%{fill:var(--green-2);stroke:var(--green)}}
/* review queue */
.queue{width:100%;max-width:240px;display:grid;gap:8px}
.queue div{display:flex;justify-content:space-between;align-items:center;font-family:var(--f-mono);font-size:11px;color:var(--fg-2);padding:10px 12px;border:1px solid var(--line);border-radius:10px}
.queue div b{font-weight:500;color:var(--gold)}
/* evidence stack */
.pkg{position:relative;height:220px;width:100%;max-width:420px;justify-self:center}
.pkg .sheet{position:absolute;left:50%;width:78%;height:150px;border-radius:16px;border:1px solid var(--line-2);background:linear-gradient(160deg,#16261e,#0c1712);transform:translateX(-50%);padding:16px;display:grid;align-content:start;gap:8px}
.pkg .sheet:nth-child(1){top:0;transform:translateX(-50%) scale(.86);opacity:.5}
.pkg .sheet:nth-child(2){top:26px;transform:translateX(-50%) scale(.93);opacity:.75}
.pkg .sheet:nth-child(3){top:54px;border-color:rgba(207,169,111,.45);box-shadow:0 30px 60px -30px rgba(0,0,0,.8)}
.pkg .sheet .ln{height:6px;border-radius:3px;background:rgba(255,255,255,.1)}
.pkg .sheet .hd{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;color:var(--fg-2)}
.pkg .seal{position:absolute;right:12%;bottom:6px;width:64px;height:64px;border-radius:50%;display:grid;place-items:center;background:radial-gradient(circle at 30% 25%,#e7c995,#8d6b3d 70%);box-shadow:0 10px 30px -8px rgba(207,169,111,.6);animation:seal 5s var(--ease) infinite}
.pkg .seal svg{width:26px;height:26px}
@keyframes seal{0%,20%{transform:scale(.4) rotate(-30deg);opacity:0}35%,85%{transform:none;opacity:1}100%{opacity:0}}
.out-list{display:flex;flex-wrap:wrap;gap:8px;margin-top:6px}
.out-list span{font-size:13px;border:1px solid var(--line-2);border-radius:999px;padding:6px 12px;color:var(--fg-2)}

/* ---- documents ---- */
.docs{position:relative;display:block!important;height:430px;padding:0!important;margin-top:auto;perspective:1100px}
.stmt3{position:absolute;right:0;top:6px;width:min(64%,300px);background:#eef1ec;color:#1a2420;border-radius:12px;padding:14px 14px 10px;font-size:11px;transform:rotate(5deg) translateZ(-40px);box-shadow:0 30px 50px -30px rgba(0,0,0,.8);opacity:.9}
.st-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid rgba(0,0,0,.12);padding-bottom:8px;margin-bottom:4px}
.st-h b{font-family:var(--f-body);font-size:12px}.st-h span{font-family:var(--f-mono);font-size:9.5px;color:#5c6a63}
.st-r{display:grid;grid-template-columns:44px 1fr auto;gap:8px;padding:5px 0;border-bottom:1px dashed rgba(0,0,0,.08);font-family:var(--f-mono);font-size:10px;position:relative}
.st-r span:nth-child(2){font-family:var(--f-body);font-size:11px}
.st-r span:last-child{text-align:right;font-variant-numeric:tabular-nums}
.st-flag{font-weight:600}
.st-flag em{position:absolute;right:-4px;top:-18px;font-style:normal;font-family:var(--f-mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:#fff;background:#c4583a;padding:3px 7px;border-radius:5px;opacity:0;transform:translateY(4px);transition:all .5s var(--ease)}
.st-flag::after{content:"";position:absolute;inset:0 -6px;border:1.5px solid #c4583a;border-radius:6px;opacity:0;transition:opacity .5s}
.docs.anom .st-flag em{opacity:1;transform:none}.docs.anom .st-flag::after{opacity:1;animation:flagp 1.4s ease-in-out infinite}
@keyframes flagp{50%{border-color:rgba(196,88,58,.35)}}
.pp-wrap{position:absolute;left:0;top:40px;width:min(76%,350px);transform-style:preserve-3d}
.pp{position:relative;aspect-ratio:125/88;border-radius:12px;overflow:hidden;background:#e7ede7;color:#14201a;transform:rotateX(14deg) rotateY(var(--ry,-12deg)) rotateZ(-4deg);transform-style:preserve-3d;box-shadow:0 40px 60px -28px rgba(0,0,0,.85),0 0 0 1px rgba(0,0,0,.08);transition:transform .6s var(--ease)}
.pp canvas{position:absolute;inset:0;width:100%;height:100%}
.uv{position:absolute;inset:0;background:#1d1747;clip-path:inset(0 100% 0 0);transition:none}
.uv canvas{opacity:.95}
.holo{position:absolute;inset:0;pointer-events:none;mix-blend-mode:soft-light;background:linear-gradient(115deg,transparent 30%,rgba(255,236,190,.75) 42%,rgba(150,240,200,.6) 48%,rgba(190,200,255,.55) 54%,transparent 66%);background-size:260% 100%;background-position:var(--hx,80%) 0;opacity:.85}
.pp-top{position:absolute;left:4.5%;right:4.5%;top:5%;display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:clamp(7px,1.9vw,9px);letter-spacing:.08em;text-transform:uppercase;color:#2c5a44}
.pp-body{position:absolute;left:4.5%;right:4.5%;top:15%;display:grid;grid-template-columns:28% 1fr;gap:4.5%}
.photo{width:100%;border-radius:3px;display:block}
.pp dl{margin:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:3px 6px;align-content:start}
.pp dl div{min-width:0}.pp dl .w2{grid-column:span 2}.pp dl .w4{grid-column:span 4}
.pp dt{font-size:clamp(5.5px,1.5vw,7px);color:#4f6a5d;letter-spacing:.02em}
.pp dd{margin:0;font-family:var(--f-mono);font-size:clamp(7.5px,2vw,10px);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mrz{position:absolute;left:4%;right:4%;bottom:6%;font-family:var(--f-mono);font-size:clamp(6px,1.75vw,9.2px);line-height:1.5;letter-spacing:.06em;color:#1b2520;white-space:nowrap;overflow:hidden}
.mrz i{font-style:normal;transition:color .2s,background .2s;border-radius:2px}
.mrz i.rd{color:#0b6a3c}
.mrz i.cd{background:rgba(207,169,111,.0)}
.mrz i.cd.ok{background:#0b6a3c;color:#fff}
.chks{position:absolute;left:0;right:0;bottom:0;display:flex;flex-wrap:wrap;gap:6px}
.chks span{font-size:12px;padding:6px 10px 6px 26px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-3);position:relative;transition:all .4s var(--ease)}
.chks span::before{content:"";position:absolute;left:9px;top:50%;width:10px;height:10px;margin-top:-5px;border-radius:50%;border:1px solid var(--line-2);transition:all .4s}
.chks span.on{color:var(--fg);border-color:rgba(26,168,100,.5)}
.chks span.on::before{background:var(--green) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.8' fill='none' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/8px no-repeat;border-color:var(--green)}
.chks span.warn.on{border-color:rgba(224,138,109,.55)}
.chks span.warn.on::before{background:var(--alert);border-color:var(--alert)}
@media (max-width:560px){.docs{height:500px}.stmt3{width:82%;top:0;transform:rotate(3deg)}.pp-wrap{width:92%;top:168px}}
/* ---- screening ---- */
.scr{display:flex!important;flex-direction:column;gap:12px;place-items:stretch!important;min-height:300px}
.scr-q{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;align-items:baseline;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.scr-q .k{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold);grid-row:span 2}
.scr-q b{font-family:var(--f-body);font-weight:600;font-size:15px;letter-spacing:-.01em}
.scr-q .arn{font-size:13px;color:var(--fg-2);direction:rtl;text-align:left;unicode-bidi:plaintext}
.scr-l{display:flex;gap:6px}
.scr-l i{font-style:normal;font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;padding:4px 8px;border-radius:6px;border:1px solid var(--line-2);color:var(--fg-3);transition:all .3s}
.scr-l i.on{color:var(--fg);border-color:rgba(26,168,100,.5);background:rgba(26,168,100,.08)}
.scr-c{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.scr-c li{display:grid;grid-template-columns:minmax(0,1fr) 54px 32px;gap:4px 10px;align-items:center;padding:10px 0;border-top:1px solid var(--line)}
.scr-c li>div{min-width:0;display:flex;flex-direction:column}
.scr-c b{font-weight:500;font-size:13.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-c li>div span{font-family:var(--f-mono);font-size:10px;color:var(--fg-3);text-transform:uppercase;letter-spacing:.06em}
.scr-c .bar{height:4px;border-radius:4px;background:var(--line-2);overflow:hidden}
.scr-c .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--green),var(--gold));transition:width 1s var(--ease)}
.scr-c .sc{font-family:var(--f-mono);font-size:11.5px;text-align:right;color:var(--fg-3);font-variant-numeric:tabular-nums;transition:color .3s}
.scr-c em{grid-column:1/-1;font-style:normal;font-size:12px;line-height:18px;height:18px;color:var(--fg-3);opacity:0;transition:opacity .5s var(--ease);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.scr-c li.m .bar i{width:calc(var(--s)*100%)}.scr-c li.m .sc{color:var(--gold)}
.scr-c li.d em{opacity:1}.scr-c li.d b{color:var(--fg-2);text-decoration:line-through;text-decoration-color:rgba(237,242,238,.35)}
.scr-r{margin-top:auto;display:flex;justify-content:space-between;align-items:center;padding:12px 14px;border-radius:14px;border:1px solid var(--line);color:var(--fg-3);transition:all .5s var(--ease);font-size:14px}
.scr-r.on{border-color:rgba(26,168,100,.5);background:rgba(26,168,100,.08);color:var(--fg)}
.scr-r .mono{font-family:var(--f-mono);font-size:11px;text-transform:uppercase;letter-spacing:.08em;color:var(--green)}
.mono{font-family:var(--f-mono)}
/* ---- ownership ---- */
.own{display:flex!important;flex-direction:column;gap:12px;min-height:300px;place-items:stretch!important}
.own svg{width:100%;height:auto;overflow:visible;margin-block:auto}
.own .edges path{fill:none;stroke:var(--line-2);stroke-width:1.4;stroke-dasharray:200;stroke-dashoffset:200;transition:stroke-dashoffset 1s var(--ease),stroke .5s}
.own.s1 #e1,.own.s1 #e2,.own.s2 #e3,.own.s2 #e4{stroke-dashoffset:0}
.own.s3 #e1,.own.s3 #e3{stroke:var(--gold);stroke-width:2}
.own .pct text{font-family:var(--f-mono);font-size:10.5px;fill:var(--fg-2);opacity:0;transition:opacity .5s}
.own.s1 .pct text:nth-child(-n+2),.own.s2 .pct text{opacity:1}
.own .nd rect{fill:var(--bg-3);stroke:var(--line-2);transition:all .5s}
.own .nd .t{font-family:var(--f-body);font-size:12.5px;font-weight:600;fill:var(--fg)}
.own .nd .s{font-family:var(--f-mono);font-size:9.5px;fill:var(--fg-3);letter-spacing:.04em}
.own .nd{opacity:.35;transition:opacity .6s}
.own .nd.app,.own.s1 .nd:nth-child(2),.own.s1 .nd:nth-child(3),.own.s2 .nd{opacity:1}
.own.s2 .nd.dim{opacity:.55}
.own.s3 .nd.ubo rect{fill:rgba(207,169,111,.14);stroke:var(--gold)}
.own.s3 .nd.app rect,.own.s3 .nd:nth-child(2) rect{stroke:rgba(207,169,111,.6)}
.own-r{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);color:var(--fg-3);font-size:14px;transition:all .5s}
.own-r b{font-weight:500;font-size:12px;color:var(--gold)}
.own.s3 .own-r{border-color:rgba(207,169,111,.45);background:rgba(207,169,111,.07);color:var(--fg)}
/* ---- review queue ---- */
.rq{display:flex!important;flex-direction:column;gap:10px;min-height:300px;place-items:stretch!important}
.rq-h{display:flex;justify-content:space-between;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.rq-h .mono{color:var(--gold)}
.rq-view{height:222px;overflow:hidden;position:relative;-webkit-mask-image:linear-gradient(180deg,#000 92%,transparent);mask-image:linear-gradient(180deg,#000 92%,transparent)}
#rql{list-style:none;margin:0;padding:0;display:grid;gap:8px;will-change:transform}
#rql li{display:grid;grid-template-columns:minmax(0,1fr) 118px;gap:4px 10px;height:68px;align-content:center;padding:0 12px;border:1px solid var(--line);border-radius:12px;background:rgba(255,255,255,.02);transition:background .5s,border-color .5s,opacity .5s;overflow:hidden}
#rql li .id{font-family:var(--f-mono);font-size:11px;color:var(--fg-2)}
#rql li .tm{font-family:var(--f-mono);font-size:11px;color:var(--fg-3);text-align:right;font-variant-numeric:tabular-nums}
#rql li .rs{font-size:13.5px;color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
#rql li .st{font-family:var(--f-mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);text-align:right;align-self:center}
#rql li.as{border-color:rgba(26,168,100,.5);background:rgba(26,168,100,.07)}
#rql li.as .st{color:var(--green)}
#rql li.out{opacity:.35}
#rql li.in{animation:qin .6s var(--ease)}
@keyframes qin{from{opacity:0;transform:translateY(10px)}}
/* ---- ledger ---- */
.ledger{background:rgba(7,16,12,.55);border:1px solid var(--line-2);border-radius:20px;padding:18px;display:grid;gap:10px;min-width:0;min-height:360px;align-content:start}
.lg-h{display:flex;justify-content:space-between;gap:10px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3)}
.lg-h .mono{color:var(--gold)}
#lgl{list-style:none;margin:0;padding:0;display:grid;grid-auto-rows:32px;height:256px;align-content:start}
#lgl li{display:grid;grid-template-columns:86px minmax(0,1fr) auto;gap:10px;align-items:center;padding:0 0 0 18px;height:32px;box-sizing:border-box;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:11px;position:relative;animation:qin .45s var(--ease)}
#lgl li::before{content:"";position:absolute;left:3px;top:50%;width:7px;height:7px;margin-top:-3.5px;border-radius:50%;background:var(--green)}
#lgl li::after{content:"";position:absolute;left:6px;top:calc(50% + 4px);height:calc(100% - 4px);width:1px;background:rgba(26,168,100,.4)}
#lgl li:last-child::after{display:none}
#lgl li.ex::before{background:var(--gold)}
#lgl .tt{color:var(--fg-3);font-variant-numeric:tabular-nums}
#lgl .ev{color:var(--fg);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#lgl .hs{color:var(--fg-3)}
#lgl li.ex .ev{color:var(--gold)}
.lg-seal{margin-top:6px;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px dashed var(--line-2);color:var(--fg-3);font-size:13px;transition:all .5s var(--ease)}
.lg-seal .sl{display:flex;align-items:center;gap:8px}.lg-seal svg{width:18px;height:18px}
.lg-seal .mono{font-size:11px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.lg-seal.on{border-style:solid;border-color:rgba(207,169,111,.5);background:linear-gradient(110deg,rgba(207,169,111,.16),rgba(207,169,111,.04));color:var(--fg)}
.lg-seal.on svg{color:var(--gold)}.lg-seal.on .mono{color:var(--gold)}
@media (max-width:520px){#lgl li{grid-template-columns:70px minmax(0,1fr)}#lgl .hs{display:none}}
/* ---------------- ORCHESTRATION ---------------- */
.orch{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:minmax(0,1fr) 110px minmax(0,.8fr) 60px minmax(0,1fr);align-items:center}
.prov{display:flex;flex-direction:column;justify-content:space-between;height:420px}
.prov div{border:1px solid var(--ink-line);background:var(--paper-2);border-radius:12px;padding:12px 16px;font-weight:600;font-size:14px;display:flex;justify-content:space-between;gap:8px}
.prov div em{font-style:normal;font-family:var(--f-mono);font-size:11px;color:var(--ink-2);font-weight:400}
.wires{height:420px;width:100%;overflow:visible}
.wires path{fill:none;stroke:rgba(11,106,60,.25);stroke-width:1.2;vector-effect:non-scaling-stroke}
.wires path.live{stroke:var(--green-2);stroke-dasharray:5 9;animation:dash 1.4s linear infinite}
@keyframes dash{to{stroke-dashoffset:-28}}
.core-box{aspect-ratio:1;border-radius:28px;position:relative;overflow:hidden;color:#fff;display:grid;place-items:center;text-align:center;background:radial-gradient(140% 120% at 20% 0%,#d6b27a,#7d5c33 45%,#2c1e10);box-shadow:0 30px 60px -24px rgba(110,80,40,.6);isolation:isolate}
.core-box::before{content:"";position:absolute;z-index:-2;inset:-40%;background:conic-gradient(transparent 0 70%,rgba(255,236,200,.35) 80%,transparent 90%);animation:spin 8s linear infinite}
.core-box>div{position:relative;display:grid;gap:12px;justify-items:center}
.core-box svg{height:46px;width:auto;color:#fff}
.core-box p{font-family:var(--f-mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase}
.to{height:2px;background:linear-gradient(90deg,var(--gold-2),var(--green-2));margin-inline:8px;position:relative}
.to::after{content:"";position:absolute;right:-2px;top:-4px;border-left:8px solid var(--green-2);border-block:5px solid transparent}
.outs{background:var(--ink);color:var(--fg);border-radius:22px;padding:22px 24px;display:grid;gap:10px}
.outs div{display:flex;gap:10px;align-items:center;font-size:14.5px}
.outs div::before{content:"";flex:none;width:6px;height:6px;border-radius:50%;background:var(--green)}
@media (max-width:980px){
  .orch{grid-template-columns:1fr;gap:20px}
  .prov{height:auto;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
  .wires{display:none}
  .core-box{aspect-ratio:auto;padding-block:40px;max-width:420px;width:100%;justify-self:center}
  .to{width:2px;height:36px;justify-self:center;background:linear-gradient(180deg,var(--gold-2),var(--green-2))}
  .to::after{right:-4px;top:auto;bottom:-2px;border-left:5px solid transparent;border-right:5px solid transparent;border-top:8px solid var(--green-2);border-bottom:0}
}
@media (max-width:460px){.prov{grid-template-columns:1fr}}
.keys{margin-top:clamp(40px,5vw,64px);display:flex;flex-wrap:wrap;gap:10px}
.keys span{border:1px solid var(--ink-line);border-radius:999px;padding:9px 16px;font-size:14px;background:var(--paper-2)}

/* ---------------- JOURNEYS ---------------- */
.tabs{margin-top:clamp(40px,5vw,64px);display:flex;gap:6px;overflow-x:auto;padding:5px;border:1px solid var(--line);border-radius:999px;width:max-content;max-width:100%;scrollbar-width:none}
.tabs::-webkit-scrollbar{display:none}
.tabs button{border:0;background:transparent;color:var(--fg-2);padding:10px 18px;border-radius:999px;cursor:pointer;font-size:14.5px;white-space:nowrap;transition:background .3s,color .3s}
.tabs button[aria-selected="true"]{background:var(--fg);color:var(--bg)}
.journey{margin-top:24px;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:16px;min-height:520px}
.j-img{border-radius:28px;overflow:hidden;position:relative;min-height:360px}
.j-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .7s var(--ease),transform 1.4s var(--ease)}
.j-img img.out{opacity:0;transform:scale(1.04)}
.j-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 50%,rgba(7,16,12,.6))}
.j-img .tag{position:absolute;left:22px;bottom:20px;z-index:1;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.j-body{background:var(--bg-2);border:1px solid var(--line);border-radius:28px;padding:clamp(24px,3vw,40px);display:flex;flex-direction:column;gap:20px;min-width:0}
.jstack{display:grid}
.jv{grid-area:1/1;display:flex;flex-direction:column;gap:20px;opacity:0;visibility:hidden;transition:opacity .4s var(--ease),visibility .4s}
.jv.on{opacity:1;visibility:visible}
.j-body h3{font-size:clamp(26px,2.6vw,36px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.j-body .desc{color:var(--fg-2)}
.j-list{display:flex;flex-wrap:wrap;gap:8px}
.j-list span{font-size:13.5px;padding:7px 12px;border-radius:10px;background:rgba(255,255,255,.04);color:var(--fg)}
.matrix{margin-top:auto;border-top:1px solid var(--line);padding-top:18px}
.matrix .small{display:block;margin-bottom:12px;font-family:var(--f-mono);letter-spacing:.06em;text-transform:uppercase;font-size:11px}
.m-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.m-grid div{font-size:13px;padding:10px 12px;border-radius:10px;border:1px solid var(--line);color:var(--fg-3);display:flex;align-items:center;gap:8px;transition:all .45s var(--ease)}
.m-grid div::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--line-2);transition:inherit;flex:none}
.m-grid div.on{color:var(--fg);border-color:rgba(26,168,100,.45);background:rgba(26,168,100,.07)}
.m-grid div.on::before{background:var(--green);box-shadow:0 0 8px var(--green)}
.m-grid div{cursor:pointer;-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.m-grid div:not(.on):hover{color:var(--fg-2)}
@media (max-width:900px){.journey{grid-template-columns:1fr}.j-img{min-height:280px}}
@media (max-width:480px){.m-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------------- CONTROL (threshold explainer) ---------------- */
.ctrl{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(40px,6vw,96px);align-items:center}
@media (max-width:900px){.ctrl{grid-template-columns:1fr}}
.pillars{margin-top:32px;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0}
.pillars div{padding:16px 0;border-top:1px solid var(--line);display:flex;gap:12px;align-items:center;font-family:var(--f-body);font-weight:600;font-size:16px;letter-spacing:-.01em}
.pillars div:nth-child(odd){padding-right:16px}
.pillars i{width:8px;height:8px;border-radius:2px;background:var(--gold);transform:rotate(45deg);flex:none}
.console{background:var(--bg-2);border:1px solid var(--line);border-radius:28px;padding:clamp(20px,2.6vw,32px);min-width:0}
.console-top{display:flex;justify-content:space-between;align-items:baseline;gap:12px;flex-wrap:wrap}
.console-top b{font-family:var(--f-body);font-weight:600;font-size:18px;letter-spacing:-.01em}
.slider{margin-top:22px;display:grid;gap:10px}
.slider label{display:flex;justify-content:space-between;font-size:14px;color:var(--fg-2)}
.slider output{font-family:var(--f-mono);color:var(--gold)}
input[type=range]{-webkit-appearance:none;appearance:none;width:100%;height:4px;border-radius:4px;background:linear-gradient(90deg,var(--gold) var(--v,60%),var(--line-2) var(--v,60%));outline:none}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;border-radius:50%;background:var(--fg);border:4px solid var(--gold);cursor:grab}
input[type=range]::-moz-range-thumb{width:16px;height:16px;border-radius:50%;background:var(--fg);border:4px solid var(--gold);cursor:grab}
.cases{margin-top:24px;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:6px}
.cases i{aspect-ratio:1;border-radius:5px;background:var(--green);transition:background .35s var(--ease),transform .35s var(--ease)}
.cases i.r{background:var(--gold)}
.cases i.e{background:var(--alert)}
.tally{margin-top:22px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tally div{border:1px solid var(--line);border-radius:14px;padding:14px;display:grid;gap:2px;min-width:0}
.tally b{font-family:var(--f-body);font-size:26px;font-weight:600;letter-spacing:-.03em;font-variant-numeric:tabular-nums}
.tally span{font-size:12.5px;color:var(--fg-2);display:flex;align-items:center;gap:6px}
.tally span::before{content:"";width:8px;height:8px;border-radius:2px;background:var(--c)}

/* ---------------- GOVERNANCE ---------------- */
.gov{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border-top:1px solid var(--ink-line)}
.gov div{padding:30px 28px 34px 0;display:grid;gap:10px;align-content:start;border-bottom:1px solid var(--ink-line);min-width:0}
.gov div:not(:nth-child(3n+1)){padding-left:28px;border-left:1px solid var(--ink-line)}
.gov b{font-family:var(--f-body);font-size:19px;font-weight:600;letter-spacing:-.02em}
.gov span{color:var(--ink-2);font-size:15.5px}
@media (max-width:900px){.gov{grid-template-columns:1fr}.gov div{padding:24px 0!important;border-left:0!important}}
.quote{margin-top:clamp(56px,7vw,96px);font-family:var(--f-body);font-weight:600;font-size:clamp(28px,3.6vw,48px);line-height:1.12;letter-spacing:-.035em;max-width:24ch}
.quote .serif{color:var(--green-2)}

/* ---------------- PILOT ---------------- */
.phases{margin-top:clamp(56px,7vw,88px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;counter-reset:ph}
.phase{border:1px solid var(--line);border-radius:24px;padding:26px 24px 30px;display:grid;gap:12px;align-content:start;position:relative;min-width:0;background:linear-gradient(180deg,rgba(255,255,255,.02),transparent)}
.phase .k{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold)}
.phase h3{font-size:24px;font-weight:700;letter-spacing:-.03em}
.phase p{font-size:15px;color:var(--fg-2)}
@media (max-width:900px){.phases{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:520px){.phases{grid-template-columns:1fr}}
.metrics{margin-top:32px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.metrics .small{margin-right:8px;font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.metrics span:not(.small){font-size:13.5px;border:1px solid var(--line-2);border-radius:999px;padding:7px 13px;color:var(--fg-2)}

/* ---------------- FAQ ---------------- */
.faq-grid{display:grid;grid-template-columns:minmax(0,.7fr) minmax(0,1.3fr);gap:clamp(40px,6vw,96px)}
@media (max-width:900px){.faq-grid{grid-template-columns:1fr}}
details{border-top:1px solid var(--ink-line)}
details:last-child{border-bottom:1px solid var(--ink-line)}
summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:20px;align-items:center;padding:22px 0;font-family:var(--f-body);font-weight:600;font-size:clamp(17px,1.6vw,20px);letter-spacing:-.015em}
summary::-webkit-details-marker{display:none}
summary .pm{flex:none;width:28px;height:28px;border-radius:50%;border:1px solid var(--ink-line);position:relative;transition:transform .4s var(--ease),background .3s}
summary .pm::before,summary .pm::after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;background:var(--ink);transform:translate(-50%,-50%)}
summary .pm::after{transform:translate(-50%,-50%) rotate(90deg);transition:transform .3s}
details[open] summary .pm{background:var(--ink)}
details[open] summary .pm::before,details[open] summary .pm::after{background:var(--paper)}
details[open] summary .pm::after{transform:translate(-50%,-50%) rotate(0)}
details p{padding:0 48px 24px 0;color:var(--ink-2);max-width:62ch}

/* ---------------- CONTACT ---------------- */
.contact{overflow:hidden;isolation:isolate}
.contact::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(7,16,12,.95) 0%,rgba(7,16,12,.75) 45%,rgba(7,16,12,.35) 100%),url(img/colonnade.jpg) var(--face-x,75%) var(--face-y,50%)/cover}
.contact-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.95fr);gap:clamp(40px,6vw,96px);align-items:start}
@media (max-width:900px){.contact-grid{grid-template-columns:1fr}}
.contact .h1{font-size:clamp(40px,5.4vw,76px)}
form{background:rgba(7,16,12,.6);backdrop-filter:blur(24px) saturate(140%);-webkit-backdrop-filter:blur(24px) saturate(140%);border:1px solid var(--line-2);border-radius:28px;padding:clamp(22px,3vw,36px);display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.f{display:grid;gap:6px;min-width:0}
.f.full{grid-column:1/-1}
.f label{font-size:12.5px;color:var(--fg-2)}
.f input,.f select,.f textarea{width:100%;font:inherit;font-size:15px;color:var(--fg);background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;transition:border-color .2s,background .2s}
.f select option{background:var(--bg-2)}
.f input:focus,.f select:focus,.f textarea:focus{outline:none;border-color:var(--gold);background:rgba(255,255,255,.06)}
.f textarea{min-height:110px;resize:vertical}
.chk{grid-column:1/-1;display:flex;gap:10px;align-items:flex-start;font-size:13px;color:var(--fg-2)}
.chk input{margin-top:3px;accent-color:var(--gold)}
form .btn{grid-column:1/-1;justify-self:start}
.form-note{grid-column:1/-1;font-size:12.5px;color:var(--fg-3)}
.form-msg{grid-column:1/-1;font-size:14px;color:var(--gold);padding:12px 14px;border:1px solid rgba(207,169,111,.35);border-radius:12px}
@media (max-width:520px){form{grid-template-columns:1fr}}

/* ---------------- PAGES: four pages in one file ---------------- */
.page.enter{animation:pgin .6s var(--ease) both}
@keyframes pgin{from{opacity:0}to{opacity:1}}
[id]{scroll-margin-top:84px}
.lnk{display:inline-flex;gap:8px;align-items:center;font-weight:600;font-size:15.5px;text-decoration:none;color:var(--gold);border-bottom:1px solid rgba(207,169,111,.4);padding-bottom:2px;transition:border-color .3s}
.light .lnk{color:var(--green-2);border-bottom-color:rgba(11,106,60,.35)}
.lnk:hover{border-bottom-color:currentColor}
.more{margin-top:clamp(32px,4vw,48px)}
.btn-dark{background:var(--ink);color:#fff}
.btn-dark:hover{background:#1a2620}
.opt{color:var(--fg-3)}

/* page hero */
.phero{padding-block:clamp(132px,15vw,184px) clamp(56px,7vw,96px);overflow:hidden;isolation:isolate}
.phero-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:clamp(32px,5vw,80px);align-items:center}
.phero-copy{position:relative;z-index:2;display:grid;gap:24px;align-content:center}
.hh1.ph{font-size:clamp(36px,4.3vw,62px)}
.phero .lede{text-shadow:0 1px 30px rgba(7,16,12,.35)}
.phero-img{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:1/1.02;border:1px solid var(--line);box-shadow:0 50px 100px -40px rgba(0,0,0,.65)}
.phero-img.tall{aspect-ratio:1/1.12}
.phero-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 26s ease-in-out infinite alternate;--face-room:.1}
@keyframes kb{from{transform:scale(1.02)}to{transform:scale(1.09) translate(-1.5%,-1%)}}
.phero-img::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 52%,rgba(7,16,12,.72))}
.ptag{position:absolute;left:22px;bottom:20px;z-index:1;font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
/* on this page: one line under the hero, across the whole column (29 Oct). Where it cannot fit, it scrolls sideways,
   so it stays one line. */
.jump{counter-reset:jp;display:flex;align-items:baseline;gap:30px;margin-top:clamp(44px,6vw,72px);padding:22px 0 6px;border-top:1px solid var(--line);overflow-x:auto;scrollbar-width:none;white-space:nowrap}
.jump::-webkit-scrollbar{display:none}
.jump-h{flex:none;font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--fg-3)}
.jump a{counter-increment:jp;flex:none;display:inline-flex;align-items:baseline;gap:9px;text-decoration:none;color:var(--fg-2);font-size:15px;line-height:1.35;transition:color .25s}
.jump a::before{content:counter(jp,decimal-leading-zero);font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.06em;color:var(--gold);font-variant-numeric:tabular-nums}
.jump a:hover,.jump a:focus-visible{color:var(--fg)}
.jump a:focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:4px}
@media (max-width:1100px){.jump{gap:26px}}
/* where it scrolls, it fades out on the side that has more (classes set by script) */
.jump.f-end{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,#000 calc(100% - 48px),transparent)}
.jump.f-start{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px);mask-image:linear-gradient(90deg,transparent,#000 48px)}
.jump.f-start.f-end{-webkit-mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(90deg,transparent,#000 48px,#000 calc(100% - 48px),transparent)}
@media (max-width:900px){.phero-grid{grid-template-columns:1fr}.phero-img,.phero-img.tall{aspect-ratio:16/10;max-height:420px}}

/* home: six capabilities as six glass panes (29 Oct). The list opens one capability at a time; beside it the panes
   part, the stack opens at that capability, and after the sixth they close into one layer for a moment. */
.ly .num{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--gold-2);font-variant-numeric:tabular-nums}
.ly button{font:inherit;color:inherit}
/* while the list is measured for its tallest state, nothing animates */
.ly-list.measuring,.ly-list.measuring *{transition:none!important}
.ly{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,88px);align-items:center;margin-top:clamp(40px,5vw,72px)}
.ly-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--ink-line);align-self:center}
.ly-it{border-bottom:1px solid var(--ink-line)}
.ly-it>button{display:flex;align-items:baseline;gap:18px;width:100%;margin:0;padding:19px 0;border:0;background:none;cursor:pointer;text-align:start;color:var(--ink-2);font-weight:600;font-size:clamp(18px,1.6vw,21px);letter-spacing:-.015em;line-height:1.25;transition:color .35s}
.ly-it>button:hover,.ly-it.on>button{color:var(--ink)}
.ly-it>button:focus-visible{outline:2px solid var(--green-2);outline-offset:4px;border-radius:6px}
.ly-it .num{min-width:2.4ch;transition:color .35s}
.ly-it.on .num{color:var(--green-2)}
.ly-d{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s var(--ease)}
.ly-d>div{overflow:hidden;min-height:0}
.ly-d p{margin:0;padding:0 0 20px;padding-inline-start:calc(2.4ch + 18px);color:var(--ink-2);font-size:16px;line-height:1.5;max-width:50ch;opacity:0;transition:opacity .45s}
.ly-it.on .ly-d{grid-template-rows:1fr}
.ly-it.on .ly-d p{opacity:1;transition-delay:.15s}
/* the art: glass panes on the paper. Everything scales with the pane's width (--w); the lowest pane rests, the panes
   above it rise, so the stack opens at the chosen layer. Clear panes with green glass edges; the chosen pane frosted,
   carrying its drawing a little above the glass. */
.ly-art{--w:clamp(170px,17vw,220px);position:relative;height:calc(var(--w) * 2.57);display:grid;place-items:center}
.ly-art::before{content:"";position:absolute;left:50%;bottom:4%;width:calc(var(--w) * 1.5);height:calc(var(--w) * .32);transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(26,168,100,.13),rgba(26,168,100,0));filter:blur(8px)}
.ly-art::after{content:"";position:absolute;left:50%;bottom:6.5%;width:calc(var(--w) * 1.1);height:calc(var(--w) * .15);transform:translateX(-50%);border-radius:50%;background:radial-gradient(closest-side,rgba(7,30,18,.14),transparent);filter:blur(5px)}
.ly-iso{position:relative;width:var(--w);aspect-ratio:1;transform-style:preserve-3d;transform:translateY(42%) rotateX(57deg) rotateZ(-45deg);--gap:calc(var(--w) * .006);--lift:0px;--hang:0px}
.ly.open .ly-iso{--gap:calc(var(--w) * .16);--lift:calc(var(--w) * .42);--hang:calc(var(--w) * .18)}
.ly-pl{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc((5 - var(--i)) * var(--gap)));transition:transform 1.1s var(--ease)}
.ly-pl.up{transform:translateZ(calc((5 - var(--i)) * var(--gap) + var(--lift)))}
.ly-pl.on{transform:translateZ(calc((5 - var(--i)) * var(--gap) + var(--w) * .03)) translate(calc(var(--w) * -.055),calc(var(--w) * .055))}
/* a pane: faintly green glass, a white rim where the light falls (the far edges), its thickness as a green band along
   the near edges with a bright lip under it, and two soft reflections */
.ly-gl{position:absolute;inset:0;border-radius:calc(var(--w) * .125);
  background:linear-gradient(45deg,rgba(214,234,223,.16) 0%,rgba(236,246,240,.22) 50%,rgba(255,255,255,.42) 100%);
  box-shadow:inset 0 0 0 1px rgba(11,106,60,.16),inset 0 0 22px rgba(255,255,255,.5),
    -1px 1px 0 rgba(190,220,204,.75),-2px 2px 0 rgba(170,208,188,.72),-3px 3px 0 rgba(156,199,177,.72),-4px 4px 0 rgba(146,192,168,.72),-5px 5px 0 rgba(140,187,163,.74),-6px 6px 0 rgba(160,201,180,.8),-6.8px 6.8px 0 rgba(255,255,255,.85),
    -26px 26px 40px -18px rgba(7,40,24,.14);transition:background .6s,box-shadow .6s}
.ly-gl::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.4px;pointer-events:none;
  background:linear-gradient(45deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.2) 40%,rgba(255,255,255,.95) 78%,#fff 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.ly-gl::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:linear-gradient(135deg,rgba(255,255,255,0) 50%,rgba(255,255,255,.5) 60%,rgba(255,255,255,0) 68%,rgba(255,255,255,0) 71%,rgba(255,255,255,.32) 74%,rgba(255,255,255,0) 78%)}
.ly-pl .num{position:absolute;left:calc(var(--w) * .09);top:calc(var(--w) * .077);opacity:.5;transition:opacity .5s,color .5s}
.ly-ic{position:absolute;inset:17%;color:var(--green-2);transform:translateZ(calc(var(--w) * .06)) translate(-5%,5%);opacity:0;transition:opacity .6s}
.ly-ic svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.35;stroke-linecap:round;stroke-linejoin:round;overflow:visible;filter:drop-shadow(-5px 5px 4px rgba(7,40,24,.16))}
.ly-ic .s{opacity:.5}.ly-ic .g{stroke:var(--gold-2)}.ly-ic .o2{opacity:.4}.ly-ic .o3{opacity:.16}.ly-ic .f{fill:rgba(11,106,60,.08)}.ly-ic .g.f{fill:rgba(207,169,111,.2)}.ly-ic .n{stroke:none}
.ly-ic .k{fill:currentColor;stroke:none}.ly-ic .kg{fill:#b48a4e;stroke:none}.ly-ic .p{fill:#fbfcfa}
.ly-pl.on .ly-ic{opacity:1}
.ly-pl.on .num{opacity:1;color:var(--green-2)}
.ly-pl.on .ly-gl{background:linear-gradient(45deg,rgba(246,250,248,.8) 0%,rgba(252,254,253,.88) 50%,#fff 100%);
  box-shadow:inset 0 0 0 1px rgba(11,106,60,.3),inset 0 0 26px rgba(26,168,100,.07),
    -1px 1px 0 rgba(170,212,190,.9),-2px 2px 0 rgba(150,200,175,.9),-3px 3px 0 rgba(136,192,164,.9),-4px 4px 0 rgba(126,186,156,.9),-5px 5px 0 rgba(120,181,151,.9),-6px 6px 0 rgba(142,194,168,.92),-6.8px 6.8px 0 rgba(255,255,255,.9),
    -30px 30px 44px -18px rgba(11,106,60,.25)}
/* one layer: closed, the six panes lie together under the trust layer and only the trust layer shows. They part when
   the section opens; closing again, they fade only once they have come together under it. */
.ly-gl::before,.ly-gl::after{transition:opacity .6s}
.ly:not(.open) .ly-gl{background:transparent;box-shadow:none;transition-delay:.75s}
.ly:not(.open) .ly-gl::before,.ly:not(.open) .ly-gl::after{opacity:0;transition-delay:.75s}
.ly:not(.open) .ly-pl .num{opacity:0}
/* the trust layer: the gold tile of the trust layer on the rail above, lying with the panes. Closed, it is the one layer;
   as the section opens it rises and hangs above the six panes, one pane's distance above the highest, and it settles
   back onto them when they close. Frosted gold, a fine light edge, its thickness as a darker gold band with a light lip,
   a faint gold halo around it as on the rail, and the shield drawn in white on top. */
.ly-tl{position:absolute;inset:0;transform-style:preserve-3d;transform:translateZ(calc(6 * var(--gap) + var(--lift) + var(--hang)));transition:transform 1.25s var(--ease)}
.ly-tg{position:absolute;inset:5%;border-radius:calc(var(--w) * .2);isolation:isolate;overflow:hidden;
  background:radial-gradient(125% 125% at 30% 12%,#ecd3a4 0%,#d6b175 24%,#b08a52 50%,#86643a 76%,#5a3f1f 100%);
  box-shadow:inset 0 0 0 1px rgba(255,238,206,.34),inset 0 calc(var(--w) * .01) calc(var(--w) * .05) rgba(255,244,222,.22),
    -1px 1px 0 #bd975a,-2px 2px 0 #b18c53,-3px 3px 0 #a6824c,-4px 4px 0 #9b7946,-5px 5px 0 #917040,-6px 6px 0 #88683b,-7px 7px 0 #806137,-8px 8px 0 #795b33,-9px 9px 0 #735630,-9.8px 9.8px 0 rgba(246,224,184,.85),
    0 0 0 calc(var(--w) * .045) rgba(207,169,111,.13),
    -28px 28px 44px -16px rgba(110,80,40,.32)}
.ly-tg::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.2px;pointer-events:none;
  background:linear-gradient(45deg,rgba(255,244,222,0) 0%,rgba(255,244,222,.25) 45%,rgba(255,248,232,.9) 85%,#fff8ea 100%);
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.ly-tg::after{content:"";position:absolute;inset:0;border-radius:inherit;background:var(--frost) 0 0/160px 160px;opacity:.4;z-index:-1;pointer-events:none}
.ly-ts{position:absolute;inset:30%;color:#fff;transform:translateZ(calc(var(--w) * .012)) rotate(45deg)}
.ly-ts svg{display:block;width:100%;height:100%;fill:none;stroke:currentColor;stroke-width:1.25;stroke-linecap:round;stroke-linejoin:round;overflow:visible;filter:drop-shadow(-2px 2px 1.5px rgba(70,46,18,.35))}
@media (max-width:820px){.ly{grid-template-columns:1fr;gap:8px}.ly-art{order:-1;--w:150px}}
@media (prefers-reduced-motion:reduce){.ly-pl,.ly-tl,.ly-gl,.ly-gl::before,.ly-gl::after,.ly-ic,.ly-d,.ly-d p{transition:none}}

/* home: five steps */
.steps5{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.steps5 li{position:relative;display:grid;gap:10px;align-content:start;padding:28px 22px 0 0;border-top:1px solid var(--line-2);min-width:0}
.steps5 li::before{content:"";position:absolute;left:0;top:-1px;height:2px;width:0;background:linear-gradient(90deg,var(--gold),#e9cf9f);transition:width .8s var(--ease)}
.steps5 li::after{content:"";position:absolute;left:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--bg);border:1px solid var(--line-2);transition:background .5s,border-color .5s}
.steps5 li.on::before{width:100%}
.steps5 li.on::after{background:var(--gold);border-color:var(--gold);box-shadow:0 0 12px rgba(207,169,111,.6)}
.steps5 .n{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.22em;color:var(--fg-3);transition:color .5s}
.steps5 li.on .n{color:var(--gold)}
.steps5 b{font-size:19px;font-weight:600;letter-spacing:-.02em;line-height:1.2}
.steps5 li>span:last-child{font-size:14.5px;color:var(--fg-3);max-width:24ch}
.steps5 li.you.on::before{background:linear-gradient(90deg,var(--gold),var(--green))}
.steps5 li.you.on::after{background:var(--green);border-color:var(--green);box-shadow:0 0 12px rgba(26,168,100,.6)}
.steps5 li.you.on .n{color:var(--green)}
@media (max-width:900px){
  .steps5{grid-template-columns:1fr}
  .steps5 li{border-top:0;border-left:1px solid var(--line-2);padding:0 0 28px 26px}
  .steps5 li::before{top:0;left:-1px;width:2px;height:0;transition:height .8s var(--ease)}
  .steps5 li.on::before{width:2px;height:100%}
  .steps5 li::after{left:-5px;top:2px}
}

/* home: sectors */
.sectors{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.sector{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:8px;min-height:420px;padding:22px;border-radius:24px;overflow:hidden;text-decoration:none;color:#fff;isolation:isolate;min-width:0}
.sector img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease);--face-under:.4}
.sector::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,16,12,0) 30%,rgba(7,16,12,.55) 62%,rgba(7,16,12,.92))}
.sector:hover img{transform:scale(1.05)}
.sector .tag{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.sector b{font-size:20px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.sector>span:last-child{font-size:14px;line-height:1.4;color:rgba(237,242,238,.74)}
@media (max-width:1000px){.sectors{grid-template-columns:repeat(2,minmax(0,1fr))}.sector{min-height:360px}}
@media (max-width:560px){.sectors{grid-template-columns:1fr}.sector{min-height:300px}}

/* home: why AET, orchestration on night */
/* the providers and the outcomes are glass, with the same light edge as the rest of the site (29 Oct) */
.orch.dk .prov div{position:relative;align-items:baseline;border-color:transparent;color:var(--fg);background:linear-gradient(var(--bg-2),var(--bg-2)) padding-box,var(--edge) border-box;transition:color .5s}
.orch.dk .prov div::after{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;opacity:0;transition:opacity .7s;
  background:var(--edge-gold);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.orch.dk .prov div.on::after{opacity:.75}
.orch.dk .prov div em{font-family:var(--f-display);font-weight:600;font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.orch.dk .outs{border:1px solid transparent;background:linear-gradient(var(--bg-3),var(--bg-3)) padding-box,var(--edge) border-box}
/* the wires: faint lines that grow brighter toward the trust layer; one at a time a light runs along one of them into it,
   as the light runs along the rail at the top of Home. The trust layer answers with a soft glow, then a light leaves for
   the outcomes. No arrows. */
.orch .wires .wb{fill:none;stroke:url(#wg);stroke-width:1.2}
.orch .wires .lt path{fill:none;stroke-linecap:round;opacity:0}
.orch .wires .lt .t1{stroke:rgba(207,169,111,.3);stroke-width:1.5;stroke-dasharray:.4 3;stroke-dashoffset:.4}
.orch .wires .lt .t2{stroke:rgba(226,196,143,.62);stroke-width:1.8;stroke-dasharray:.18 3;stroke-dashoffset:.18}
.orch .wires .lt .t3{stroke:#f8e8c8;stroke-width:2.4;stroke-dasharray:.05 3;stroke-dashoffset:.05;filter:drop-shadow(0 0 3px rgba(240,214,166,.9))}
.orch .wires .lt.go path{animation:var(--dur,2.2s) linear forwards}
.orch .wires .lt.go .t1{animation-name:wireLight1}.orch .wires .lt.go .t2{animation-name:wireLight2}.orch .wires .lt.go .t3{animation-name:wireLight3}
/* one light, three strokes of the same head: a long faint tail, a brighter middle, a bright point */
@keyframes wireLight1{0%{stroke-dashoffset:.4;opacity:0}10%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:-1;opacity:0}}
@keyframes wireLight2{0%{stroke-dashoffset:.18;opacity:0}10%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:-1.22;opacity:0}}
@keyframes wireLight3{0%{stroke-dashoffset:.05;opacity:0}10%{opacity:1}88%{opacity:1}100%{stroke-dashoffset:-1.35;opacity:0}}
.orch .to{height:1px;margin-inline:10px;background:linear-gradient(90deg,rgba(207,169,111,.35),rgba(26,168,100,.4));overflow:visible}
.orch .to::after{content:"";position:absolute;left:0;right:auto;top:-1px;width:34px;height:3px;border:0;border-radius:3px;background:linear-gradient(90deg,rgba(207,169,111,0),var(--gold),#f6e3bd);opacity:0}
.orch .to.go::after{animation:toLight 1.2s cubic-bezier(.45,0,.3,1) forwards}
@keyframes toLight{0%{left:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{left:calc(100% - 34px);opacity:0}}
@media (max-width:980px){
  .orch .to{width:1px;height:40px;margin:0;background:linear-gradient(180deg,rgba(207,169,111,.35),rgba(26,168,100,.4))}
  .orch .to::after{left:-1px;right:auto;top:0;bottom:auto;width:3px;height:18px;border:0;background:linear-gradient(180deg,rgba(207,169,111,0),var(--gold),#f6e3bd)}
  .orch .to.go::after{animation-name:toLightDown}
}
@keyframes toLightDown{0%{top:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{top:calc(100% - 18px);opacity:0}}
/* the trust layer: no sweeping beam. Soft light drifts slowly over the gold, as over brushed metal, and where a light
   arrives the gold glows for a moment. A fine light edge, brightest at the top. */
.core-box{box-shadow:inset 0 1px 0 rgba(255,244,222,.45),inset 0 0 0 1px rgba(255,236,200,.16),0 30px 60px -24px rgba(110,80,40,.6),0 0 80px -20px rgba(207,169,111,.25)}
.core-box::before{inset:-30%;background:radial-gradient(closest-side at 36% 34%,rgba(255,244,220,.52),rgba(255,244,220,0) 62%),radial-gradient(closest-side at 66% 68%,rgba(255,214,150,.3),rgba(255,214,150,0) 64%),radial-gradient(closest-side at 72% 24%,rgba(255,250,240,.16),rgba(255,250,240,0) 60%);
  filter:blur(6px);animation:coreDrift 24s ease-in-out infinite alternate}
@keyframes coreDrift{0%{transform:translate(-6%,-4%) rotate(0deg) scale(1)}35%{transform:translate(4%,2%) rotate(12deg) scale(1.06)}70%{transform:translate(-1%,6%) rotate(-8deg) scale(.97)}100%{transform:translate(6%,-3%) rotate(6deg) scale(1.04)}}
.core-box .glow{position:absolute;z-index:-1;left:-34%;top:50%;width:92%;aspect-ratio:1;border-radius:50%;pointer-events:none;opacity:0;transform:translate(0,-50%) scale(.8);
  background:radial-gradient(closest-side,rgba(255,242,216,.78),rgba(255,226,170,.26) 55%,rgba(255,226,170,0))}
.core-box.hit .glow{animation:coreHit 1.9s cubic-bezier(.2,.7,.1,1) forwards}
@keyframes coreHit{0%{opacity:0;transform:translate(0,-50%) scale(.75)}22%{opacity:1}100%{opacity:0;transform:translate(16%,-50%) scale(1.2)}}
/* stacked on a narrow screen the light comes from above, where the providers are */
@media (max-width:980px){.core-box .glow{left:50%;top:-62%;width:70%;transform:translate(-50%,0) scale(.8)}.core-box.hit .glow{animation-name:coreHitDown}}
@keyframes coreHitDown{0%{opacity:0;transform:translate(-50%,0) scale(.75)}22%{opacity:1}100%{opacity:0;transform:translate(-50%,18%) scale(1.2)}}
/* the five points under the diagram: no chips. A line of five, each with its drawing, divided by light lines */
.why .keys{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;position:relative}
.why .keys::before{content:"";position:absolute;left:0;right:0;top:0;height:1px;background:linear-gradient(90deg,rgba(237,242,238,.03),rgba(237,242,238,.2) 18%,rgba(237,242,238,.2) 82%,rgba(237,242,238,.03))}
.why .keys li{position:relative;display:grid;gap:16px;align-content:start;min-width:0;padding:28px 22px 6px;padding-inline-start:0}
.why .keys li+li{padding-inline-start:22px}
.why .keys li+li::before{content:"";position:absolute;inset-inline-start:0;top:28px;bottom:0;width:1px;background:linear-gradient(180deg,rgba(237,242,238,.18),rgba(237,242,238,0))}
.why .keys svg{width:30px;height:30px;color:var(--gold)}
.why .keys span{display:block;margin:0;padding:0;border:0;border-radius:0;background:none;font-size:15px;line-height:1.42;color:var(--fg-2);text-wrap:pretty}
@media (max-width:1000px){.why .keys{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:8px}.why .keys li:nth-child(3n+1){padding-inline-start:0}.why .keys li:nth-child(3n+1)::before{content:none}}
@media (max-width:620px){.why .keys{grid-template-columns:1fr}.why .keys li,.why .keys li+li{grid-template-columns:30px minmax(0,1fr);align-items:start;gap:16px;padding:18px 0 0;padding-inline-start:0}.why .keys li+li::before{content:none}.why .keys li+li{border-top:1px solid var(--line)}.why .keys li:first-child{padding-top:24px}}
@media (prefers-reduced-motion:reduce){.core-box::before{animation:none}}
.persp{margin-top:clamp(40px,5vw,56px);padding-top:28px;border-top:1px solid var(--line);font-size:17px;line-height:1.5;color:var(--fg-2);max-width:72ch}
.persp .lnk{margin-left:8px;font-size:15px}

/* home: film */
.film{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:clamp(40px,6vw,96px);align-items:center}
.film-copy{display:grid;gap:22px}
.poster{position:relative;display:block;aspect-ratio:16/9;border-radius:28px;overflow:hidden;box-shadow:0 50px 100px -40px rgba(7,16,12,.55);isolation:isolate}
.poster img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform 1.2s var(--ease)}
.poster::after{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(180deg,rgba(7,16,12,.1),rgba(7,16,12,.55))}
.poster:hover img{transform:scale(1.04)}
.play{position:absolute;left:50%;top:50%;width:84px;height:84px;margin:-42px 0 0 -42px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);transition:transform .5s var(--ease),background .3s}
/* play: the path itself sits a tenth of its width right of centre, which reads as centred; no margin on top of that */
.play svg{width:30px;height:30px}
.poster:hover .play{transform:scale(1.08);background:rgba(207,169,111,.35)}
.pmeta{position:absolute;left:24px;bottom:20px;display:grid;gap:2px;color:#fff}
.pmeta b{font-size:18px;font-weight:600}
.pmeta span{font-family:var(--f-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:rgba(237,242,238,.75)}
@media (max-width:900px){.film{grid-template-columns:1fr}}

/* platform: capability tiles */
.tile .tk{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.22em;color:var(--gold)}
@media (max-width:1000px){.bento>.t-c:nth-child(5){grid-column:span 6}}
/* policy */
.pol{display:flex!important;flex-direction:column;gap:12px;min-height:300px;place-items:stretch!important}
.pol-h{display:grid;gap:2px;padding:12px 14px;border-radius:14px;background:rgba(255,255,255,.03);border:1px solid var(--line)}
.pol-h span{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.pol-h b{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.pol-r{list-style:none;margin:0;padding:0;display:grid}
.pol-r li{display:flex;justify-content:space-between;gap:10px;align-items:center;padding:10px 0;border-top:1px solid var(--line);font-size:13.5px;color:var(--fg-3);transition:color .4s}
.pol-r li em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--green);opacity:0;transform:translateX(6px);transition:opacity .4s,transform .4s var(--ease);white-space:nowrap}
.pol-r li.on{color:var(--fg)}
.pol-r li.on em{opacity:1;transform:none}
.pol-r li.x em{color:var(--gold)}
.pol-o{margin-top:auto;display:flex;justify-content:space-between;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;border:1px solid var(--line);color:var(--fg-3);font-size:13.5px;transition:all .5s var(--ease)}
.pol-o b{font-family:var(--f-mono);font-size:11px;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3);white-space:nowrap}
.pol.done .pol-o{border-color:rgba(207,169,111,.45);background:rgba(207,169,111,.07);color:var(--fg)}
.pol.done .pol-o b{color:var(--gold)}
/* integration */
.integ{display:flex!important;flex-direction:column;justify-content:center;min-height:300px;place-items:stretch!important}
.ig{border:1px solid var(--line-2);border-radius:14px;padding:12px 14px;display:grid;gap:2px;background:rgba(255,255,255,.02)}
.ig b{font-weight:600;font-size:14.5px;letter-spacing:-.01em}
.ig span{font-family:var(--f-mono);font-size:10.5px;color:var(--fg-3);letter-spacing:.04em}
.ig.aet{position:relative;isolation:isolate;border-color:rgba(207,169,111,.5);background:linear-gradient(110deg,rgba(207,169,111,.16),rgba(207,169,111,.03))}
.ig.aet span{color:var(--gold)}
.ig.ext{border-style:dashed}
.ig-c{position:relative;height:46px;display:flex;align-items:center;padding-left:36px}
.ig-c::before{content:"";position:absolute;left:20px;top:0;bottom:0;width:1px;background:var(--line-2)}
.ig-c.lim::before{background:repeating-linear-gradient(180deg,var(--line-2) 0 4px,transparent 4px 8px)}
.ig-c i{position:absolute;left:17px;top:0;width:7px;height:7px;border-radius:50%;background:var(--green);box-shadow:0 0 8px var(--green);animation:igd 2.6s var(--ease) infinite}
.ig-c.lim i{background:var(--gold);box-shadow:0 0 8px var(--gold);animation-delay:1.3s}
@keyframes igd{0%{top:-4px;opacity:0}15%,85%{opacity:1}100%{top:calc(100% - 3px);opacity:0}}
.ig-c span{font-family:var(--f-mono);font-size:10.5px;color:var(--fg-3);letter-spacing:.04em}

/* platform: cross-border */
.mkt{margin-top:clamp(48px,6vw,80px);border:1px solid var(--line);border-radius:28px;padding:clamp(20px,3vw,36px);background:linear-gradient(180deg,rgba(255,255,255,.025),rgba(255,255,255,0))}
.mkt-top{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap}
.mkt-top .small{font-family:var(--f-mono);text-transform:uppercase;letter-spacing:.08em;font-size:11px}
.seg{display:inline-flex;flex-wrap:wrap;gap:4px;padding:4px;border:1px solid var(--line);border-radius:22px;background:rgba(255,255,255,.02)}
.seg button{border:0;background:none;cursor:pointer;color:var(--fg-2);font-size:13.5px;padding:8px 14px;border-radius:999px;white-space:nowrap;transition:background .3s,color .3s}
.seg button:hover{color:var(--fg)}
.seg button[aria-selected="true"],.seg button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
.routes{margin-top:26px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px}
.rt{border:1px solid var(--line);border-radius:20px;padding:20px 20px 22px;display:grid;gap:8px;align-content:start;transition:border-color .5s,background .5s,opacity .5s}
.rt .n{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--fg-3);transition:color .5s}
.rt b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.rt p{font-size:14.5px;color:var(--fg-2)}
.rt em{font-style:normal;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:6px;color:var(--fg-3);transition:color .5s}
.rt.p{border-color:rgba(26,168,100,.55);background:rgba(26,168,100,.07)}
.rt.p .n,.rt.p em{color:var(--green)}
.rt.s{border-color:rgba(207,169,111,.42)}
.rt.s em{color:var(--gold)}
.rt.o{opacity:.42}
.merge{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));height:40px}
.merge i{justify-self:center;width:1px;background:linear-gradient(180deg,var(--line-2),var(--gold))}
.std{display:flex;justify-content:space-between;align-items:center;gap:8px 24px;flex-wrap:wrap;padding:16px 20px;border-radius:18px;border:1px solid rgba(207,169,111,.42);background:linear-gradient(110deg,rgba(207,169,111,.16),rgba(207,169,111,.04))}
.std b{font-weight:600;font-size:17px;letter-spacing:-.01em}
.std span{font-size:14.5px;color:var(--fg-2)}
@media (max-width:800px){.routes{grid-template-columns:1fr}.merge{display:none}.std{margin-top:14px}}
.agree{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:center;padding-top:clamp(40px,5vw,56px);border-top:1px solid var(--line)}
.agree-q{font-family:var(--f-body);font-weight:600;font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.035em;max-width:16ch}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips span{font-size:13.5px;border:1px solid rgba(26,168,100,.45);background:rgba(26,168,100,.07);border-radius:999px;padding:7px 13px;color:var(--fg)}
.agree-r p{margin-top:18px;color:var(--fg-2);font-size:15.5px;max-width:52ch}
@media (max-width:860px){.agree{grid-template-columns:1fr}}
.fin{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,5vw,72px);padding:clamp(24px,3.4vw,44px);border-radius:28px;background:var(--bg-2);border:1px solid var(--line)}
.fin h3{margin-top:16px;font-size:clamp(28px,3vw,40px);font-weight:700;letter-spacing:-.035em;line-height:1.05}
.fin p{margin-top:16px;color:var(--fg-2);max-width:48ch}
.fin-l{list-style:none;margin:0;padding:0;display:grid;align-content:center}
.fin-l li{display:grid;grid-template-columns:110px minmax(0,1fr);gap:16px;padding:18px 0;border-top:1px solid var(--line)}
.fin-l li:last-child{border-bottom:1px solid var(--line)}
.fin-l b{font-weight:600;color:var(--gold)}
.fin-l span{color:var(--fg-2);font-size:15px}
@media (max-width:860px){.fin{grid-template-columns:1fr}}

/* platform: integration patterns */
.pats{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.pat{background:var(--paper-2);border:1px solid var(--ink-line);border-radius:24px;padding:24px 22px 0;display:flex;flex-direction:column;gap:10px;overflow:hidden;min-width:0}
.pat .k{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2)}
.pat b{font-size:19px;font-weight:600;letter-spacing:-.02em}
.pat>span{font-size:14.5px;color:var(--ink-2)}
.pv{display:block;width:100%;height:auto;margin-top:auto;padding-top:16px}
.pv .w{fill:var(--paper);stroke:rgba(11,18,14,.14)}
.pv .l{fill:rgba(11,18,14,.08)}
.pv .g{fill:rgba(207,169,111,.2);stroke:#b8925a}
.pv .gt{font-family:var(--f-mono);font-size:9px;letter-spacing:.08em;fill:#8d6b3d}
.pv .a{fill:none;stroke:#0b6a3c;stroke-width:1.4;stroke-dasharray:3 4;animation:dash 1.6s linear infinite}
.pv .t{font-family:var(--f-mono);font-size:8.5px;letter-spacing:.06em;fill:#56625b}
.resp{margin-top:clamp(32px,4vw,48px);display:flex;gap:20px 48px;align-items:flex-end;justify-content:space-between;flex-wrap:wrap;padding-top:28px;border-top:1px solid var(--ink-line)}
.resp p{max-width:72ch;color:var(--ink-2)}
@media (max-width:1000px){.pats{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:540px){.pats{grid-template-columns:1fr}}

/* platform: engagement line */
.journeyline{list-style:none;margin:clamp(48px,6vw,80px) 0 0;padding:0;display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:0 14px}
.journeyline li{position:relative;display:grid;gap:8px;align-content:start;padding-top:24px;border-top:2px solid var(--ink-line);min-width:0}
.journeyline li::before{content:"";position:absolute;left:0;top:-6px;width:10px;height:10px;border-radius:50%;background:var(--paper);border:2px solid var(--gold-2)}
.journeyline li:last-child::before{background:var(--green-2);border-color:var(--green-2)}
.journeyline .k{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.22em;color:var(--gold-2)}
.journeyline b{font-size:17px;font-weight:600;letter-spacing:-.015em;line-height:1.2}
.journeyline li>span:last-child{font-size:14px;color:var(--ink-2)}
@media (max-width:1000px){.journeyline{grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 14px}}
@media (max-width:620px){.journeyline{grid-template-columns:1fr;gap:28px}}

/* closing band */
.band{padding-block:clamp(80px,10vw,128px);overflow:hidden;isolation:isolate}
.band::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(60% 120% at 85% 50%,rgba(207,169,111,.12),transparent 60%),radial-gradient(50% 100% at 10% 0%,rgba(11,106,60,.25),transparent 70%)}
.band-in{display:flex;justify-content:space-between;align-items:center;gap:28px 48px;flex-wrap:wrap}
.band .h2{max-width:18ch}

/* about */
.who{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);gap:clamp(40px,6vw,96px);align-items:start}
@media (max-width:900px){.who{grid-template-columns:1fr}}
.cred{position:relative;background:var(--bg);color:var(--fg);border-radius:28px;padding:clamp(22px,2.6vw,32px);overflow:hidden;box-shadow:0 50px 100px -40px rgba(7,16,12,.55)}
.cred::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(140deg,rgba(231,196,140,.6),rgba(231,196,140,.06) 42%,rgba(231,196,140,.32));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.cred::after{content:"";position:absolute;right:-80px;top:-80px;width:240px;height:240px;border-radius:50%;background:radial-gradient(circle,rgba(207,169,111,.14),transparent 70%);pointer-events:none}
.cred-h{display:flex;align-items:center;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line);font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.cred-h svg{height:15px;width:auto;color:#e9cf9f;flex:none}
.cred dl{margin:0;display:grid}
.cred dl div{padding:13px 0;border-bottom:1px solid var(--line);display:grid;gap:3px}
.cred dt{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--fg-3)}
.cred dd{margin:0;font-size:16px;font-weight:500;letter-spacing:-.005em}
.cred dd.mono{letter-spacing:.06em;color:#e9cf9f}
.cred-f{margin-top:14px;font-size:12.5px;color:var(--fg-3)}
section.tight{padding-top:0}
.nw{white-space:nowrap;font-style:normal}
.lead-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(32px,5vw,72px);align-items:end}
.lead-grid .leader{margin-top:0}
@media (max-width:900px){.lead-grid{grid-template-columns:1fr}}
.leader{margin-top:clamp(32px,4vw,48px);display:grid;gap:8px;padding:clamp(24px,3vw,36px);border-radius:28px;background:var(--paper-2);border:1px solid var(--ink-line);position:relative;overflow:hidden}
.leader::after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,#e4c48f,#a8834f)}
.leader .k{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold-2)}
.leader b{font-family:var(--f-display);font-weight:600;font-size:clamp(26px,2.6vw,34px);letter-spacing:-.02em;line-height:1.1}
.leader .role{font-family:var(--f-mono);font-size:12px;letter-spacing:.08em;text-transform:uppercase;color:var(--green-2)}
.leader p{margin-top:8px;color:var(--ink-2)}
.advs{margin-top:clamp(48px,6vw,80px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.adv{position:relative;overflow:hidden;display:flex;flex-direction:column;gap:10px;min-height:270px;padding:clamp(24px,2.6vw,32px);border-radius:28px;background:linear-gradient(160deg,#13241b,#0c1712 62%);border:1px solid var(--line);transition:border-color .4s,transform .6s var(--ease)}
.adv:hover{border-color:rgba(207,169,111,.35);transform:translateY(-3px)}
.adv::after{content:"";position:absolute;right:-50px;top:-50px;width:180px;height:180px;border-radius:50%;background:radial-gradient(circle,rgba(207,169,111,.16),transparent 70%);pointer-events:none}
.adv .k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.adv b{margin-top:auto;font-family:var(--f-display);font-weight:600;font-size:clamp(26px,2.4vw,32px);letter-spacing:-.02em;line-height:1.1}
.adv .t{font-size:15px;color:var(--fg-2);max-width:26ch}
.adv-note{margin-top:22px}
@media (max-width:900px){.advs{grid-template-columns:1fr}.adv{min-height:0}.adv b{margin-top:28px}}

/* library */
.lib-hero .phero-grid{align-items:center}
.stack3{position:relative;height:clamp(300px,30vw,400px)}
.s3{position:absolute;border-radius:20px;overflow:hidden;border:1px solid var(--line-2);box-shadow:0 40px 80px -30px rgba(0,0,0,.75);animation:fl 9s ease-in-out infinite alternate}
.s3a{left:2%;top:4%;width:66%;aspect-ratio:16/10;transform:rotate(-5deg)}
.s3a img{width:100%;height:100%;object-fit:cover}
.s3a .pl{position:absolute;left:50%;top:50%;width:56px;height:56px;margin:-28px 0 0 -28px;border-radius:50%;display:grid;place-items:center;color:#fff;background:rgba(255,255,255,.16);border:1px solid rgba(255,255,255,.35);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.s3a .pl svg{width:22px;height:22px}
.s3b{right:0;top:26%;width:54%;aspect-ratio:4/3;padding:18px;display:flex;flex-direction:column;gap:8px;background:linear-gradient(150deg,#1a2e23,#0b1510);transform:rotate(4deg);animation-delay:-3s}
.s3b b{font-size:17px;font-weight:600;letter-spacing:-.015em;max-width:14ch}
.s3b svg{margin-top:auto;height:14px;width:auto;color:var(--fg-2);align-self:flex-start}
.cv-k{font-family:var(--f-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.s3c{left:20%;bottom:0;width:46%;aspect-ratio:16/9;display:grid;place-content:center;justify-items:center;gap:8px;background:rgba(7,16,12,.62);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-color:rgba(207,169,111,.45);transform:rotate(-1.5deg);animation-delay:-6s}
.lockc{width:46px;height:46px;border-radius:50%;display:grid;place-items:center;color:var(--gold);border:1px solid rgba(207,169,111,.5)}
.lockc svg{width:22px;height:22px}
@keyframes fl{to{translate:0 -10px}}
.btn .lk{width:18px;height:18px}
.libsec{padding-top:0}
.libbar{display:flex;align-items:center}
/* the briefing form: a field only robots see, and room for the human check when it needs the visitor */
#form{position:relative}
.hp{position:absolute;left:-10000px;top:0;width:1px;height:1px;overflow:hidden}
.ts{grid-column:1/-1}.ts:empty{display:none}
#form[aria-busy=true] .btn{opacity:.7;pointer-events:none}
.seg.seg-sm{flex-wrap:nowrap;gap:2px;padding:3px;border-radius:999px;max-width:100%}
.seg.seg-sm button{font-size:13px;padding:6px 13px}
@media (max-width:400px){.seg.seg-sm button{padding:6px 10px}}
.libgroup{margin-top:clamp(40px,5vw,64px)}
.libbar+.libgroup{margin-top:clamp(28px,3.5vw,44px)}
.lg-head{display:flex;align-items:baseline;gap:8px 16px;flex-wrap:wrap;padding-bottom:16px;margin-bottom:20px;border-bottom:1px solid var(--line)}
.lg-head h2{font-size:clamp(22px,2.2vw,28px);font-weight:600;letter-spacing:-.025em}
.lnk-btn{margin-left:auto;border:0;background:none;color:var(--gold);cursor:pointer;font-size:14px;text-decoration:underline;text-underline-offset:3px}
.lib-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.lcard{display:flex;flex-direction:column;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:var(--bg-2);min-width:0;cursor:pointer;text-align:left;color:inherit;font:inherit;padding:0;transition:border-color .3s,transform .5s var(--ease)}
.lcard:hover{border-color:var(--line-2);transform:translateY(-3px)}
.lcard.feat{grid-column:span 2}
.lcov{position:relative;aspect-ratio:16/9;overflow:hidden;background:linear-gradient(150deg,#1a2e23,#0b1510);isolation:isolate}
.lcard.feat .lcov{aspect-ratio:21/9}
.lcov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-1;transition:transform 1.2s var(--ease)}
.lcard:hover .lcov img{transform:scale(1.04)}
.lcov .play{width:60px;height:60px;margin:-30px 0 0 -30px}
.lcov .play svg{width:22px;height:22px}
.lcov.deck{display:flex;flex-direction:column;gap:8px;padding:20px}
.lcov.deck::before{content:"";position:absolute;right:-60px;bottom:-60px;width:200px;height:200px;border-radius:50%;background:radial-gradient(circle,rgba(207,169,111,.18),transparent 70%)}
.lcov.deck b{font-size:19px;font-weight:600;letter-spacing:-.02em;max-width:16ch;line-height:1.15}
.lcov.deck>svg{margin-top:auto;height:13px;width:auto;color:var(--fg-2);align-self:flex-start}
.lcard.locked .lcov::after{content:"";position:absolute;inset:0;background:rgba(7,16,12,.45);-webkit-backdrop-filter:blur(9px) brightness(.7);backdrop-filter:blur(9px) brightness(.7)}
.lockb{position:absolute;z-index:2;left:50%;top:50%;width:52px;height:52px;margin:-26px 0 0 -26px;border-radius:50%;display:grid;place-items:center;color:var(--gold);border:1px solid rgba(207,169,111,.5);background:rgba(7,16,12,.5)}
.lockb svg{width:22px;height:22px}
.lbody{padding:18px 20px 20px;display:flex;flex-direction:column;gap:8px;flex:1}
.lmeta{display:flex;flex-wrap:wrap;gap:4px 12px;font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}
.lbody b{font-size:18px;font-weight:600;letter-spacing:-.015em}
.lbody p{font-size:14.5px;color:var(--fg-2)}
.lfoot{margin-top:auto;padding-top:14px;display:flex;justify-content:space-between;align-items:center;gap:10px}
.badge{font-family:var(--f-mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;padding:5px 9px;border-radius:999px;border:1px solid var(--line-2);color:var(--fg-2);white-space:nowrap}
.badge.pa{border-color:rgba(207,169,111,.45);color:var(--gold)}
.lgo{font-weight:600;font-size:14px;color:var(--fg);display:inline-flex;gap:6px;align-items:center;white-space:nowrap}
.lib-empty{margin-top:24px;color:var(--fg-3)}
.lib-notes{margin-top:clamp(56px,7vw,96px);display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line)}
.lib-notes div{padding:26px 26px 0 0;display:grid;gap:8px;align-content:start;min-width:0}
.lib-notes div+div{padding-left:26px;border-left:1px solid var(--line)}
.lib-notes b{font-weight:600}
.lib-notes span{font-size:14.5px;color:var(--fg-2)}
.lib-notes a{color:var(--gold)}
@media (max-width:1000px){.lib-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:640px){.lib-grid{grid-template-columns:1fr}.lcard.feat{grid-column:auto}.lcard.feat .lcov{aspect-ratio:16/9}.lib-notes{grid-template-columns:1fr}.lib-notes div+div{padding-left:0;border-left:0}.stack3{height:300px}}

/* dialogs: partner access and the media viewer */
.dlg{border:0;padding:0;background:transparent;color:var(--fg);width:min(520px,calc(100vw - 32px));max-width:none;max-height:calc(100dvh - 32px);overflow:visible}
.dlg::backdrop{background:rgba(3,8,6,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.dlg[open]{animation:dlgin .45s var(--ease)}
@keyframes dlgin{from{opacity:0;transform:translateY(16px) scale(.98)}}
.dlg .dlg-in,form.dlg-in{position:relative;display:grid;grid-template-columns:1fr;gap:14px;background:var(--bg-2);border:1px solid var(--line-2);border-radius:28px;padding:clamp(24px,3vw,36px);box-shadow:0 60px 120px -40px rgba(0,0,0,.85);-webkit-backdrop-filter:none;backdrop-filter:none;max-height:calc(100dvh - 32px);overflow:auto}
.dlg .x{position:absolute;right:14px;top:14px;width:38px;height:38px;border-radius:50%;border:1px solid var(--line-2);background:rgba(255,255,255,.03);color:var(--fg-2);font-size:20px;line-height:1;cursor:pointer;display:grid;place-items:center;z-index:2}
.dlg .x:hover{color:var(--fg);border-color:var(--fg-3)}
.dlg-ic{width:50px;height:50px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(207,169,111,.45);color:var(--gold);background:rgba(207,169,111,.06)}
.dlg-ic svg{width:22px;height:22px}
.dlg h2{font-size:26px;font-weight:600;letter-spacing:-.025em}
.dlg p{color:var(--fg-2)}
.dlg-err{color:var(--alert)!important;font-size:13.5px}
.dlg-act{display:flex;align-items:center;gap:14px 20px;flex-wrap:wrap;margin-top:4px}
.dlg-act .btn{justify-self:auto}
.dlg-note{font-size:12.5px;color:var(--fg-3)!important;border-top:1px solid var(--line);padding-top:12px}
.dlg.viewer{width:min(1000px,calc(100vw - 32px))}
.vw-top{display:grid;gap:4px;padding-right:48px}
.vw-k{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--gold)}
.vw-stage{position:relative;aspect-ratio:16/9;border-radius:18px;overflow:hidden;background:#050b08;border:1px solid var(--line)}
/* a film fills its stage: the stage takes the film's own ratio (848×480 until the file says otherwise) and stays within short screens */
.vw-stage.film{--ar:1.76667;aspect-ratio:var(--ar);width:min(100%,max(280px,calc((100vh - 290px) * var(--ar))));width:min(100%,max(280px,calc((100dvh - 290px) * var(--ar))));margin-inline:auto}
.vw-stage>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:brightness(.55) saturate(.9)}
.vw-stage .play{background:rgba(255,255,255,.12);cursor:not-allowed}
.vw-bar{position:absolute;left:16px;right:16px;bottom:14px;display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:11px;color:rgba(237,242,238,.8)}
.vw-bar i{flex:1;height:3px;border-radius:3px;background:rgba(255,255,255,.22)}
.vw-bar .cc{border:1px solid rgba(255,255,255,.4);border-radius:4px;padding:1px 5px;font-size:10px}
.slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:clamp(20px,4vw,48px);background:radial-gradient(80% 90% at 85% 15%,rgba(207,169,111,.18),transparent 60%),radial-gradient(70% 80% at 0% 100%,rgba(11,106,60,.35),transparent 70%),linear-gradient(150deg,#13241b,#07100c)}
.slide svg{height:clamp(24px,3.4vw,40px);width:auto;color:var(--fg);align-self:flex-start}
.slide b{font-family:var(--f-display);font-weight:600;font-size:clamp(22px,3.6vw,44px);letter-spacing:-.02em;line-height:1.05;max-width:16ch}
.slide span{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--gold)}
.vw-ctl{display:flex;align-items:center;gap:12px;font-family:var(--f-mono);font-size:12px;color:var(--fg-3)}
.vw-ctl button{width:34px;height:34px;border-radius:50%;border:1px solid var(--line-2);background:none;color:var(--fg-3);cursor:not-allowed}
.vw-ctl .vo{margin-left:auto;border:1px solid var(--line-2);border-radius:999px;padding:4px 10px;font-size:10.5px;letter-spacing:.08em;text-transform:uppercase}
.vw-pack{display:grid;gap:10px}
.vw-pack div{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 16px;border:1px solid var(--line);border-radius:14px;background:rgba(255,255,255,.02)}
.vw-pack b{font-weight:600}
.vw-pack span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--fg-3)}


/* mobile menu: the briefing button keeps its own padding */
.menu .btn{padding:14px 24px}
/* the film in the viewer: native controls, left to right in both languages; a small switch between the two versions */
.vw-stage video{position:absolute;inset:0;width:100%;height:100%;display:block;background:#000;object-fit:cover}
.vw-stage video:fullscreen{object-fit:contain}
.vw-stage video:-webkit-full-screen{object-fit:contain}
.vw-lang{display:flex;align-items:center;gap:4px;padding:4px;border:1px solid var(--line);border-radius:999px;width:max-content;background:rgba(255,255,255,.02)}
.vw-lang[hidden]{display:none}
.vw-lang button{border:0;background:none;color:var(--fg-2);font-family:var(--f-body);font-size:13px;font-weight:500;padding:7px 15px;border-radius:999px;cursor:pointer;transition:background .25s,color .25s}
.vw-lang button:hover{color:var(--fg)}
.vw-lang button[lang=ar]{font-family:"Noto Kufi Arabic",var(--f-body);font-size:12.5px}
.vw-lang button[aria-pressed="true"]{background:var(--fg);color:var(--bg)}
/* briefing: the copy sits on a photograph, so it gets brighter text and a deeper veil.
   On narrow screens the copy spans the full width, so the veil runs top to bottom and is darkest behind the text. */
.contact .lede{color:rgba(237,242,238,.86);text-shadow:0 1px 24px rgba(7,16,12,.75)}
.contact .small{color:rgba(237,242,238,.62)}
@media (max-width:900px){
  .contact::before{background:linear-gradient(180deg,rgba(7,16,12,.96) 0%,rgba(7,16,12,.92) 32%,rgba(7,16,12,.8) 58%,rgba(7,16,12,.66) 100%),url(img/colonnade.jpg) var(--face-x,72%) var(--face-y,50%)/cover}
}

/* ---------- the trust layer rail: one line, and the light pings between AET and the authorised sources ----------
   Into AET, out to the sources and back (request and response), then on to the evidence and the decision.
   The light rests out of sight behind a step while it turns. */
.rail .beam{animation:beam3 6.5s var(--ease) infinite}
@keyframes beam3{0%{left:10%;opacity:0;animation-timing-function:cubic-bezier(.45,0,.25,1)}4%{opacity:1}16%{left:calc(30% - 40px)}20%{left:calc(30% - 40px);animation-timing-function:cubic-bezier(.45,0,.25,1)}32%{left:calc(50% - 40px)}36%{left:calc(50% - 40px);animation-timing-function:cubic-bezier(.45,0,.25,1)}48%{left:calc(30% - 40px)}52%{left:calc(30% - 40px);animation-timing-function:cubic-bezier(.4,0,.3,1)}86%{left:calc(90% - 80px);opacity:1}89%,100%{left:calc(90% - 80px);opacity:0}}
.node span{max-width:26ch}
.rail+.caption{color:rgba(237,242,238,.56)}

/* ---------- the operating model: five steps on one screen ----------
   A line of the five steps chooses what the case shows. In view it plays on its own: the line under the current step
   fills as its timer, then the next step follows. Hovering or focusing the line pauses it, choosing a step stops it.
   Scrolling never drives it. */
.op{margin-top:clamp(40px,5vw,64px)}
.op-rail{display:grid;grid-template-columns:repeat(5,minmax(0,1fr))}
.op-rail button{position:relative;display:grid;gap:8px;align-content:start;justify-items:start;text-align:start;min-width:0;margin:0;padding:24px 0 6px;padding-inline-end:18px;border:0;border-top:1px solid rgba(11,18,14,.14);background:none;color:var(--ink-2);font:inherit;cursor:pointer;-webkit-tap-highlight-color:transparent}
.op-rail button::after{content:"";position:absolute;inset-inline-start:0;top:-5px;width:9px;height:9px;border-radius:50%;background:var(--paper);border:1px solid rgba(11,18,14,.26);transition:background .45s,border-color .45s,box-shadow .45s}
.op-rail button.done::after,.op-rail button[aria-selected=true]::after{background:var(--gold);border-color:var(--gold)}
.op-rail button[aria-selected=true]::after{box-shadow:0 0 0 4px rgba(207,169,111,.2)}
.op-rail button[data-s="5"][aria-selected=true]::after{background:var(--green-2);border-color:var(--green-2);box-shadow:0 0 0 4px rgba(11,106,60,.14)}
.op-rail .bar{position:absolute;inset-inline:0;top:-1px;height:2px;overflow:hidden;pointer-events:none}
.op-rail .bar i{display:block;width:0;height:100%;background:var(--gold);transition:width .5s var(--ease)}
.op-rail button.done .bar i{width:100%}
.op-rail button[data-s="5"]{--dwell:8s}
.op.playing .op-rail [aria-selected=true] .bar i{animation:opfill var(--dwell,6s) linear forwards}
.op.playing.paused .op-rail [aria-selected=true] .bar i{animation-play-state:paused}
@keyframes opfill{from{width:0}to{width:100%}}
.op-rail .n{font-family:var(--f-display);font-weight:600;font-size:12px;letter-spacing:.22em;color:var(--ink-2);transition:color .45s}
.op-rail .l{font-weight:600;font-size:15.5px;letter-spacing:-.01em;line-height:1.25;color:var(--ink-2);transition:color .45s}
.op-rail button.done .n,.op-rail button[aria-selected=true] .n{color:var(--gold-2)}
.op-rail button[data-s="5"][aria-selected=true] .n{color:var(--green-2)}
.op-rail button[aria-selected=true] .l,.op-rail button:hover .l{color:var(--ink)}
.op-stage{display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr);gap:clamp(32px,5vw,88px);align-items:center;margin-top:clamp(36px,4.5vw,60px)}
.op-text{display:grid}
.op-text .how-step{grid-area:1/1;min-height:0;padding:0;border:0;gap:16px;opacity:0;visibility:hidden;transform:translateY(10px);transition:opacity .3s var(--ease),transform .5s var(--ease),visibility 0s linear .3s}
.op-text .how-step.on{opacity:1;visibility:visible;transform:none;transition:opacity .55s var(--ease) .1s,transform .7s var(--ease) .1s,visibility 0s}
.op-text .how-step .k{display:none}
.op .how-visual{position:static;align-self:auto}
.op-note{margin-top:14px;text-align:center}
@media (min-width:901px) and (max-height:820px){.op-rail button{padding-top:20px;padding-bottom:0}.op-stage{margin-top:24px}.op .case-top{padding-bottom:12px}.op .case .rows li{padding:7px 0}}
@media (max-width:900px){
  .op-rail button{padding:18px 0 2px;padding-inline-end:6px;gap:0}
  .op-rail .l{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
  .op-stage{grid-template-columns:1fr;gap:28px;margin-top:28px}
  .op-text .how-step .k{display:block}
}
@media (prefers-reduced-motion:reduce){
  .op-text .how-step{transform:none;transition:opacity .2s,visibility 0s linear .2s}
  .op-text .how-step.on{transition:opacity .2s,visibility 0s}
  .op-rail .bar i{transition:none}
}

/* ---------- capability 02: the documents lie flat and a loupe examines them ----------
   No tilt, no ultraviolet glow, no shimmer: a passport and a statement as they would lie on a desk. The loupe is moved
   by script; narrow frames stack the documents and the picture takes its own height. */
.tile .docs{display:flex!important;flex-direction:column;align-items:stretch;gap:16px;height:430px;perspective:none}
.docs .lp{position:relative;flex:1 1 0;min-height:0;direction:ltr}
.docs .lp svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.tile .docs.tall{height:auto!important}
.docs.tall .lp{flex:none}
.docs.tall .lp svg{position:static;height:auto}
.docs .chks{position:static}
.lp-g{opacity:0;transition:opacity .5s var(--ease)}
.lp-g.on{opacity:1}
@media (prefers-reduced-motion:reduce){.lp-g{transition:none}}

/* use cases: under the capabilities, that each organisation sets them (28 Oct) */
.m-note{margin:14px 0 0;font-size:13.5px;line-height:1.55;color:var(--fg-3)}
.m-note b{font-weight:500;color:var(--fg-2)}

/* labels in the eyebrow face: Montserrat caps, letter-spaced, as "Platform & use cases" (29 Oct).
   JetBrains Mono stays only where the site shows data: document specimens, ids, times, hashes, scores. */
.ptag,.sector .tag,.j-img .tag,.pmeta span,.matrix .small,.metrics .small,.hud,.pill,.globe-tag,.core-box p,.lg-h,.rq-h,#rql li .st,
.scr-q .k,.scr-l i,.scr-c li>div span,.scr-r .mono,.pol-h span,.pol-r li em,.pol-o b,.mkt-top .small,.rt em,.cred-h,.cred dt,
.leader .role,.adv .k,.cv-k,.lmeta,.badge,.vw-k,.slide span,.vw-pack span,.f-grid h4{font-family:var(--f-display);font-weight:600;letter-spacing:.16em}
.globe-tag{text-transform:uppercase;letter-spacing:.14em}

/* the area of interest on a line of its own (29 Oct): the native select stays for choosing, with the phone's own picker,
   invisible over a label that shows the choice in full and can wrap onto a second line */
.sel{position:relative}
.sel select{position:absolute;inset:0;z-index:1;width:100%;height:100%;margin:0;opacity:0;cursor:pointer;font-size:16px;-webkit-appearance:none;appearance:none}
.sel-v{display:block;position:relative;font:inherit;font-size:15px;color:var(--fg);background:rgba(255,255,255,.04);border:1px solid var(--line-2);border-radius:12px;padding:12px 14px;padding-inline-end:44px;transition:border-color .2s,background-color .2s}
.sel-v::after{content:"";position:absolute;inset-inline-end:16px;top:50%;width:12px;height:12px;margin-top:-6px;opacity:.65;transition:opacity .2s;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5 6 8l3.5-3.5' fill='none' stroke='%23edf2ee' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.sel:hover .sel-v::after{opacity:1}
.sel:focus-within .sel-v{border-color:var(--gold);background-color:rgba(255,255,255,.06)}

/* ---------------- LEGAL PAGES (29 Oct): privacy, terms, cookies ----------------
   A night hero with the three pages as tabs, then one reading column on paper with its contents beside it.
   Sections are numbered by the page itself, so the numbers never need translating. */
.lg-hero{padding-block:clamp(132px,15vw,184px) clamp(48px,6vw,80px);overflow:hidden;isolation:isolate;position:relative}
.lg-hero .wrap{display:grid;gap:20px;justify-items:start;position:relative;z-index:1}
.lg-hero .hh1{font-size:clamp(36px,4.3vw,62px);max-width:20ch}
.lg-hero .lede{max-width:60ch}
.lg-tabs{display:inline-flex;gap:4px;padding:4px;margin-bottom:18px;border-radius:12px;position:relative;background:rgba(255,255,255,.02)}
.lg-tabs::before{content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;pointer-events:none;background:var(--edge,var(--line-2));
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.lg-tabs a{position:relative;padding:8px 14px;border-radius:8px;font-size:14px;color:var(--fg-2);text-decoration:none;transition:background .3s,color .3s}
.lg-tabs a:hover{color:var(--fg)}
.lg-tabs a[aria-current=page]{background:var(--fg);color:var(--bg)}
.lg-meta{font-size:15px;color:var(--fg-2)}
.lg-meta span{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--gold);margin-inline-end:10px}
.lg-body{padding-block:clamp(56px,7vw,104px) clamp(80px,9vw,128px)}
.lg-grid{display:grid;grid-template-columns:230px minmax(0,1fr);gap:clamp(40px,6vw,96px);align-items:start}
.lg-toc{position:sticky;top:96px;display:grid;gap:14px}
.lg-toc-h{font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--gold-2)}
.lg-toc ol{list-style:none;margin:0;padding:0;counter-reset:tc;display:grid;border-inline-start:1px solid var(--ink-line)}
.lg-toc a{counter-increment:tc;display:flex;gap:10px;align-items:baseline;padding:6px 0;padding-inline-start:16px;margin-inline-start:-1px;border-inline-start:1px solid transparent;text-decoration:none;color:var(--ink-2);font-size:14.5px;line-height:1.35;transition:color .25s,border-color .25s}
.lg-toc a::before{content:counter(tc,decimal-leading-zero);flex:none;min-width:2.2ch;font-family:var(--f-display);font-weight:600;font-size:10.5px;letter-spacing:.06em;color:var(--gold-2);font-variant-numeric:tabular-nums}
.lg-toc a:hover,.lg-toc a.on{color:var(--ink)}
.lg-toc a.on{border-inline-start-color:var(--green-2)}
.lg-text{counter-reset:lg;max-width:70ch;min-width:0}
.lg-text section{padding-block:30px;border-top:1px solid var(--ink-line);scroll-margin-top:96px}
.lg-text section:first-child{border-top:0;padding-top:0}
.lg-text h2{counter-increment:lg;display:flex;align-items:baseline;gap:16px;margin:0 0 14px;font-size:clamp(21px,1.9vw,25px);font-weight:600;letter-spacing:-.015em;line-height:1.25;color:var(--ink)}
.lg-text h2::before{content:counter(lg,decimal-leading-zero);flex:none;min-width:2.6ch;font-family:var(--f-display);font-weight:600;font-size:11px;letter-spacing:.14em;color:var(--gold-2);font-variant-numeric:tabular-nums}
.lg-text p,.lg-text li{font-size:16.5px;line-height:1.68;color:var(--ink-2)}
.lg-text p+p,.lg-text p+ul,.lg-text ul+p,.lg-text p+.lg-tw{margin-top:12px}
.lg-text ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.lg-text li{position:relative;padding-inline-start:24px}
.lg-text li::before{content:"";position:absolute;inset-inline-start:2px;top:.82em;width:11px;height:1px;background:var(--gold-2)}
.lg-text b{color:var(--ink);font-weight:600}
.lg-text a{color:var(--green-2);text-decoration:underline;text-decoration-color:rgba(11,106,60,.35);text-underline-offset:3px}
.lg-text a:hover{text-decoration-color:currentColor}
.lg-text code{font-family:var(--f-mono);font-size:13px;color:var(--ink);background:rgba(11,18,14,.05);padding:2px 6px;border-radius:5px;white-space:nowrap}
.lg-tw{overflow-x:auto}
.lg-table{width:100%;border-collapse:collapse;font-size:15px}
.lg-table th{text-align:start;font-family:var(--f-display);font-weight:600;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--ink-2);padding:10px 16px 10px 0;border-bottom:1px solid var(--ink-line)}
.lg-table td{vertical-align:top;padding:14px 16px 14px 0;border-bottom:1px solid var(--ink-line);color:var(--ink-2);line-height:1.55}
.lg-table td:first-child{color:var(--ink);font-weight:600}
.lg-table td:last-child,.lg-table th:last-child{padding-inline-end:0}
.lg-contact{margin-top:40px;padding:24px 26px;border-radius:20px;background:var(--paper-2);border:1px solid var(--ink-line);display:grid;gap:4px;justify-items:start}
.lg-contact b{font-size:17px;font-weight:600;color:var(--ink)}
.lg-contact span{font-size:15px;color:var(--ink-2)}
.lg-contact a{margin-top:8px;font-weight:600;font-size:15.5px;color:var(--green-2);text-decoration:none;border-bottom:1px solid rgba(11,106,60,.35);padding-bottom:2px}
.f-legal a{color:inherit;text-decoration:none;transition:color .2s}
.f-legal a:hover{color:var(--fg)}
.chk a{color:var(--gold);text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(207,169,111,.45)}
@media (max-width:900px){.lg-grid{grid-template-columns:1fr;gap:36px}.lg-toc{position:static}.lg-toc ol{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:20px}}
@media (max-width:600px){
  .lg-toc ol{grid-template-columns:1fr}
  .lg-table thead{display:none}
  .lg-table,.lg-table tbody,.lg-table tr,.lg-table td{display:block;width:100%}
  .lg-table tr{padding:14px 0;border-bottom:1px solid var(--ink-line)}
  .lg-table td{padding:2px 0;border:0}
  .lg-table td:first-child{margin-bottom:4px}
  .lg-table td:last-child{font-size:14px;color:var(--ink-2);opacity:.85}
}

/* about: people and partners (29 Oct). Leadership and advisors carry a small portrait in the top corner of their card,
   toned like the rest of the set; text keeps its own column, so a card without one still lines up. Partners are named
   only, no logos: Al Rashed first and largest. */
.leaders{display:grid;gap:16px;min-width:0}
.adv .pt,.leader .pt{position:absolute;z-index:1;top:clamp(22px,2.6vw,30px);inset-inline-end:clamp(22px,2.6vw,30px);width:84px;height:84px;border-radius:18px;object-fit:cover;background:var(--bg-3)}
.adv .pt{box-shadow:0 0 0 1px rgba(237,242,238,.16),0 18px 34px -16px rgba(0,0,0,.75)}
.leader .pt{box-shadow:0 0 0 1px rgba(11,18,14,.08),0 14px 28px -16px rgba(7,40,24,.42)}
.adv .k{padding-inline-end:100px}
.leader.has-pt{padding-inline-end:calc(clamp(24px,3vw,36px) + 104px)}
.ptn{--big:clamp(30px,3.2vw,44px);--small:clamp(22px,2.1vw,28px);--lh:1;--base:.1415;list-style:none;margin:clamp(40px,5vw,64px) 0 0;padding:0;display:grid;grid-template-columns:minmax(0,2fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
/* one text grid in every plate: the names stand on one baseline, whatever their size, and the lines under them start
   at one height. --base is where the baseline sits in a name's line, as a share of its size (Montserrat). */
.ptn li{position:relative;overflow:hidden;display:grid;grid-template-rows:calc(var(--big) * var(--lh)) auto auto;align-content:start;min-height:168px;padding:clamp(24px,2.6vw,32px);border-radius:28px;border:1px solid transparent;
  background:linear-gradient(160deg,#13241b,#0c1712 62%) padding-box,var(--edge) border-box}
.ptn b{align-self:end;font-family:var(--f-display);font-weight:600;font-size:var(--small);letter-spacing:-.02em;line-height:var(--lh);padding-bottom:calc((var(--big) - var(--small)) * var(--base))}
.ptn li.lead b{font-size:var(--big);padding-bottom:0}
.ptn span{font-size:14.5px;line-height:1.45;color:var(--fg-3)}
.ptn .pn{margin-top:20px;color:var(--fg-2)}
/* from a tablet down the largest plate has a row of its own, so each plate keeps the height of its own name */
@media (max-width:900px){.ptn{grid-template-columns:repeat(2,minmax(0,1fr))}.ptn li.lead{grid-column:1/-1}.ptn li{grid-template-rows:auto auto auto}.ptn b{padding-bottom:0}}
@media (max-width:620px){.adv .pt,.leader .pt{width:68px;height:68px;border-radius:15px}.adv .k{padding-inline-end:84px}.leader.has-pt{padding-inline-end:calc(24px + 84px)}
  .ptn{grid-template-columns:1fr}.ptn li{min-height:0}}

/* presentations in the viewer (1 Nov): the slide as a picture, sized to fit the screen; buttons, a counter and the PDF */
.vw-stage.deck{aspect-ratio:16/9;width:min(100%,max(280px,calc((100vh - 300px) * 1.77778)));width:min(100%,max(280px,calc((100dvh - 300px) * 1.77778)));margin-inline:auto;touch-action:pan-y}
.vw-stage.deck>img{filter:none;object-fit:contain;-webkit-user-select:none;user-select:none;-webkit-user-drag:none}
.vw-ctl.live button{cursor:pointer;color:var(--fg-2);transition:color .2s,border-color .2s,opacity .2s}
.vw-ctl.live button:hover:not(:disabled){color:var(--fg);border-color:var(--fg-3)}
.vw-ctl.live button:disabled{opacity:.35;cursor:default}
.vw-ctl.live .pg{min-width:4.6em;text-align:center;font-variant-numeric:tabular-nums}
.vw-ctl.live .dl{color:var(--gold);text-decoration:none;border-color:rgba(207,169,111,.45);transition:background .2s}
.vw-ctl.live .dl:hover{background:rgba(207,169,111,.08)}

/* ---------------- FOOTER ---------------- */
footer{border-top:1px solid var(--line);padding-block:72px 40px;font-size:14px;color:var(--fg-2)}
.f-grid{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:32px}
.f-grid h4{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg);font-weight:500;margin-bottom:16px}
.f-grid ul{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.f-grid a{text-decoration:none}
.f-grid a:hover{color:var(--fg)}
.f-brand svg{height:44px;width:auto;color:var(--fg)}
.f-brand p{margin-top:20px;max-width:36ch}
.f-base{margin-top:56px;padding-top:24px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:12px 32px;justify-content:space-between;font-size:12.5px;color:var(--fg-3)}
@media (max-width:820px){.f-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.f-brand{grid-column:1/-1}}

/* motion: content is always visible; it only glides into place */
.js .rv{transform:translateY(40px);transition:transform 1.2s var(--ease)}
.js .rv.in{transform:none}
.load{animation:load 1.2s var(--ease) both}
.load.d1{animation-delay:.12s}.load.d2{animation-delay:.24s}.load.d3{animation-delay:.36s}.load.d4{animation-delay:.6s}
@keyframes load{from{transform:translateY(28px);opacity:0}to{transform:none;opacity:1}}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important}
  .js .rv{transform:none}
  .f2 .bar i{width:100%}
}
/* ---------------- LANGUAGE SWITCH ---------------- */
.lang{display:inline-flex;align-items:center;gap:7px;height:38px;padding:0 13px;border-radius:999px;border:1px solid var(--line);background:rgba(255,255,255,.02);color:var(--fg-2);font-family:var(--f-body);font-size:14px;font-weight:500;line-height:1;cursor:pointer;white-space:nowrap;transition:color .2s,border-color .2s,background .2s}
.lang:hover{color:var(--fg);border-color:var(--line-2);background:rgba(255,255,255,.05)}
.lang:focus-visible{outline:2px solid var(--gold);outline-offset:2px}
.lang svg{width:15px;height:15px;flex:none;opacity:.75}
.lang span[lang=ar]{font-family:"Noto Kufi Arabic",var(--f-body);font-size:13.5px;font-weight:500;position:relative;top:-1px}
html:not([lang=ar]) [lang=ar]{font-family:"Noto Kufi Arabic",var(--f-body)}
.lang{transition:color .2s,border-color .2s,background .2s,transform .3s var(--ease)}
/* the switch itself: one even crossfade (old and new share the same fade, so the light never dips) while the
   old view blurs away and the new one comes into focus, settling 10 px in its reading direction. 0.4 s fade, 0.7 s focus. */
html.vt-lang::view-transition-old(root){animation:vtFadeOut .4s var(--ease) both,vtBlur .4s var(--ease) both}
html.vt-lang::view-transition-new(root){animation:vtFadeIn .4s var(--ease) both,vtFocus .7s var(--ease) both}
html.vt-lang::view-transition-image-pair(root){isolation:isolate}
html.vt-lang::view-transition-old(root),html.vt-lang::view-transition-new(root){mix-blend-mode:plus-lighter}
html.vt-lang.vt-to-ar::view-transition-new(root){--vt-x:10px}
html.vt-lang.vt-to-en::view-transition-new(root){--vt-x:-10px}
html.vt-lang.vt-calm::view-transition-old(root){animation:vtFadeOut .22s linear both}
html.vt-lang.vt-calm::view-transition-new(root){animation:vtFadeIn .22s linear both}
@keyframes vtFadeOut{to{opacity:0}}
@keyframes vtFadeIn{from{opacity:0}}
@keyframes vtBlur{to{filter:blur(12px)}}
@keyframes vtFocus{from{filter:blur(12px);transform:translateX(var(--vt-x,0))}}
/* without view transitions: a plain fade */
main,footer,.nav-in>*{transition:opacity .2s var(--ease)}
body.lang-out main,body.lang-out footer,body.lang-out .nav-in>*{opacity:0}
body.lang-in main,body.lang-in footer,body.lang-in .nav-in>*{animation:langIn .5s var(--ease) both}
@keyframes langIn{from{opacity:0}to{opacity:1}}
html.ar-boot body{opacity:0}

/* ---------------- ARABIC TYPOGRAPHY ----------------
   Noto Kufi Arabic carries the Arabic; the Latin brand faces stay first in each stack, so AET, numbers and
   codes keep their usual letterforms. Arabic is never letter-spaced, never slanted, and needs more leading. */
html[lang=ar]{
  --f-display:"Montserrat","Noto Kufi Arabic","Helvetica Neue",Arial,sans-serif;
  --f-serif:"Albert Sans","Noto Kufi Arabic","Helvetica Neue",Arial,sans-serif;
  --f-body:"Albert Sans","Noto Kufi Arabic","Helvetica Neue",Arial,sans-serif;
  --f-mono:"JetBrains Mono","Noto Kufi Arabic",ui-monospace,Menlo,Consolas,monospace;
}
html[lang=ar] body{line-height:1.8}
html[lang=ar] body :not(.stmt3,.stmt3 *,.pp-wrap,.pp-wrap *,.lp,.lp *,#mrz,#lgl,#lgl *,#lghash,.vw-bar,.vw-bar *){letter-spacing:0!important}
html[lang=ar] em,html[lang=ar] i{font-style:normal}
html[lang=ar] .hh1{font-size:clamp(34px,4.1vw,60px);line-height:1.42}
html[lang=ar] .hh1.ph{font-size:clamp(32px,3.7vw,54px)}
html[lang=ar] .hh1 span{font-weight:700}
html[lang=ar] .h1,html[lang=ar] .contact .h1{font-size:clamp(36px,4.6vw,64px);line-height:1.36}
html[lang=ar] .h1 .tw{font-weight:700}
html[lang=ar] .h2{font-size:clamp(30px,3.9vw,53px);line-height:1.42}
html[lang=ar] .slide b{line-height:1.45}
html[lang=ar] .rows .nm{white-space:normal}
html[lang=ar] .scr-l{flex-wrap:wrap}
html[lang=ar] .scr-l i{white-space:nowrap}
html[lang=ar] .lede{line-height:1.85}
html[lang=ar] .questions p{line-height:1.38}
html[lang=ar] .how-step h3,html[lang=ar] .fin h3,html[lang=ar] .j-body h3,html[lang=ar] .agree-q,html[lang=ar] .quote{line-height:1.45}
html[lang=ar] .adv b,html[lang=ar] .leader b,html[lang=ar] .lcov.deck b,html[lang=ar] .sector b,html[lang=ar] .steps5 b,html[lang=ar] .journeyline b,html[lang=ar] .lens b,html[lang=ar] .s3b b{line-height:1.5}
html[lang=ar] .lens span:last-child,html[lang=ar] .sector>span:last-child,html[lang=ar] .persp{line-height:1.8}
html[lang=ar] .eyebrow,html[lang=ar] .hcaps{font-size:13.5px}
html[lang=ar] .lens .n,html[lang=ar] .steps5 .n,html[lang=ar] .journeyline .k,html[lang=ar] .tile .tk{font-size:12px}
html[lang=ar] .phase .k,html[lang=ar] .pat .k,html[lang=ar] .how-step .k,html[lang=ar] .rt .n,html[lang=ar] .leader .k{font-size:12.5px}
html[lang=ar] .sector .tag,html[lang=ar] .j-img .tag,html[lang=ar] .ptag,html[lang=ar] .pmeta span,html[lang=ar] .adv .k,html[lang=ar] .cred dt,html[lang=ar] .cred-h,html[lang=ar] .lg-h,html[lang=ar] .mkt-top .small,html[lang=ar] .rt em,html[lang=ar] .badge,html[lang=ar] .lmeta,html[lang=ar] .cv-k,html[lang=ar] .core-box p,html[lang=ar] .f-grid h4,html[lang=ar] .leader .role{font-size:12px}
html[lang=ar] .hud,html[lang=ar] .pill,html[lang=ar] .rows .src,html[lang=ar] .rows .stt,html[lang=ar] .pol-h span,html[lang=ar] .pol-r li em,html[lang=ar] .pol-o b,html[lang=ar] .ig span,html[lang=ar] .ig-c span,html[lang=ar] .scr-l i,html[lang=ar] .scr-q .k,html[lang=ar] .scr-c li>div span,html[lang=ar] .scr-r .mono,html[lang=ar] .prov div em,html[lang=ar] .vw-ctl .vo{font-size:11.5px}
html[lang=ar] .case-top .id{font-size:12.5px}
html[lang=ar] .orch.dk .prov div em{font-size:11.5px;letter-spacing:0}

/* ---------------- RIGHT TO LEFT ----------------
   Flex and grid follow the direction by themselves; these rules mirror what is placed by hand.
   Specimens and system output stay left to right: the passport, the bank statement, the audit log, player controls. */
html[dir=rtl] .stmt3,html[dir=rtl] .pp-wrap,html[dir=rtl] .lp,html[dir=rtl] #mrz,html[dir=rtl] #lgl,html[dir=rtl] #lghash,html[dir=rtl] .vw-bar{direction:ltr}
html[dir=rtl] input[type=email],html[dir=rtl] #pw{text-align:right}
html[dir=rtl] .h1 .tw,html[dir=rtl] .hh1 span{padding-right:0;padding-left:.04em}
/* hero */
@media (min-width:1001px){html[dir=rtl] .globe-wrap{margin-right:0;margin-left:-18%}}
html[dir=rtl] .globe-tag{transform:translate(18px,-50%)}
html[dir=rtl] .globe-tag svg{margin-right:0;margin-left:-2px}
@media (max-width:600px){html[dir=rtl] .globe-tag{transform:translate(-50%,calc(-100% - 16px))}}
html[dir=rtl] .lens{padding:22px 0 30px 18px}
html[dir=rtl] .lens+.lens{padding-right:18px;border-left:0;border-right:1px solid var(--line)}
@media (max-width:820px){html[dir=rtl] .lens:nth-child(odd){border-right:0;padding-right:0}}
/* rail */
@keyframes beamr{0%{left:calc(90% - 80px);opacity:0;animation-timing-function:cubic-bezier(.45,0,.25,1)}4%{opacity:1}16%{left:calc(70% - 40px)}20%{left:calc(70% - 40px);animation-timing-function:cubic-bezier(.45,0,.25,1)}32%{left:calc(50% - 40px)}36%{left:calc(50% - 40px);animation-timing-function:cubic-bezier(.45,0,.25,1)}48%{left:calc(70% - 40px)}52%{left:calc(70% - 40px);animation-timing-function:cubic-bezier(.4,0,.3,1)}86%{left:10%;opacity:1}89%,100%{left:10%;opacity:0}}
html[dir=rtl] .rail .beam{animation-name:beamr}
@media (max-width:860px){
  html[dir=rtl] .rail{padding-left:0;padding-right:4px}
  html[dir=rtl] .rail::before{left:auto;right:44px}
  html[dir=rtl] .node{text-align:right}
}
/* home: capabilities, steps, sectors, why, film, contact */
html[dir=rtl] .steps5 li{padding:28px 0 0 22px}
html[dir=rtl] .steps5 li::before{left:auto;right:0;background:linear-gradient(270deg,var(--gold),#e9cf9f)}
html[dir=rtl] .steps5 li.you.on::before{background:linear-gradient(270deg,var(--gold),var(--green))}
html[dir=rtl] .steps5 li::after{left:auto;right:0}
@media (max-width:900px){
  html[dir=rtl] .steps5 li{border-left:0;border-right:1px solid var(--line-2);padding:0 26px 28px 0}
  html[dir=rtl] .steps5 li::before{right:-1px}
  html[dir=rtl] .steps5 li::after{right:-5px}
}
@media (min-width:981px){
  html[dir=rtl] .wires{transform:scaleX(-1)}
  html[dir=rtl] .orch .to{background:linear-gradient(270deg,rgba(207,169,111,.35),rgba(26,168,100,.4))}
  html[dir=rtl] .orch .to::after{left:auto;right:0;background:linear-gradient(270deg,rgba(207,169,111,0),var(--gold),#f6e3bd)}
  html[dir=rtl] .orch .to.go::after{animation-name:toLightRtl}
  html[dir=rtl] .core-box .glow{left:auto;right:-34%}
  html[dir=rtl] .core-box.hit .glow{animation-name:coreHitRtl}
}
@keyframes toLightRtl{0%{right:0;opacity:0}15%{opacity:1}85%{opacity:1}100%{right:calc(100% - 34px);opacity:0}}
@keyframes coreHitRtl{0%{opacity:0;transform:translate(0,-50%) scale(.75)}22%{opacity:1}100%{opacity:0;transform:translate(-16%,-50%) scale(1.2)}}
html[dir=rtl] .persp .lnk{margin-left:0;margin-right:8px}
html[dir=rtl] .pmeta{left:auto;right:24px}
@media (min-width:901px){html[dir=rtl] .contact::before{background:linear-gradient(270deg,rgba(7,16,12,.95) 0%,rgba(7,16,12,.75) 45%,rgba(7,16,12,.35) 100%),url(img/colonnade.jpg) var(--face-x,25%) var(--face-y,50%)/cover}}
/* platform */
html[dir=rtl] .ptag{left:auto;right:22px}
html[dir=rtl] .h-tl,html[dir=rtl] .h-bl{left:auto;right:0}
html[dir=rtl] .h-tr{right:auto;left:0}
html[dir=rtl] .h-br{right:auto;left:0;text-align:left}
html[dir=rtl] .chks span{padding:6px 26px 6px 10px}
html[dir=rtl] .chks span::before{left:auto;right:9px}
html[dir=rtl] .scr-q .arn{text-align:right}
html[dir=rtl] .scr-c .sc{text-align:left}
html[dir=rtl] .scr-c .bar i{background:linear-gradient(270deg,var(--green),var(--gold))}
html[dir=rtl] .pol-r li em{transform:translateX(-6px)}
html[dir=rtl] .pol-r li.on em{transform:none}
html[dir=rtl] .ig-c{padding-left:0;padding-right:36px}
html[dir=rtl] .ig-c::before{left:auto;right:20px}
html[dir=rtl] .ig-c i{left:auto;right:17px}
html[dir=rtl] .rows .stt{text-align:left}
html[dir=rtl] .f5{background:linear-gradient(250deg,#3d2a14,#8d6b3d 60%,#cfa96f)}
html[dir=rtl] .pillars div:nth-child(odd){padding-right:0;padding-left:16px}
html[dir=rtl] input[type=range]{background:linear-gradient(270deg,var(--gold) var(--v,60%),var(--line-2) var(--v,60%))}
html[dir=rtl] .pv{transform:scaleX(-1)}
/* the labels in these drawings are turned back by the language switch, with an SVG transform per label (i18n.js):
   Safari on iPhone and iPad dropped them when they were turned back with a CSS transform */
html[dir=rtl] .j-img .tag{left:auto;right:22px}
html[dir=rtl] .journeyline li::before{left:auto;right:0}
html[dir=rtl] .band::before{background:radial-gradient(60% 120% at 15% 50%,rgba(207,169,111,.12),transparent 60%),radial-gradient(50% 100% at 90% 0%,rgba(11,106,60,.25),transparent 70%)}
/* about */
html[dir=rtl] .cred::after{right:auto;left:-80px}
html[dir=rtl] .leader::after{left:auto;right:0}
html[dir=rtl] .adv::after{right:auto;left:-50px}
html[dir=rtl] .gov div{padding:30px 0 34px 28px}
html[dir=rtl] .gov div:not(:nth-child(3n+1)){padding-right:28px;border-left:0;border-right:1px solid var(--ink-line)}
@media (max-width:900px){html[dir=rtl] .gov div{border-right:0!important}}
/* library and dialogs */
html[dir=rtl] .lcard{text-align:right}
html[dir=rtl] .lcov.deck::before{right:auto;left:-60px}
html[dir=rtl] .lnk-btn{margin-left:0;margin-right:auto}
html[dir=rtl] .lib-notes div{padding:26px 0 0 26px}
html[dir=rtl] .lib-notes div+div{padding-right:26px;border-left:0;border-right:1px solid var(--line)}
@media (max-width:640px){html[dir=rtl] .lib-notes div+div{padding-right:0;border-right:0}}
html[dir=rtl] .dlg .x{right:auto;left:14px}
html[dir=rtl] .vw-top{padding-right:0;padding-left:48px}
html[dir=rtl] .vw-ctl .vo{margin-left:0;margin-right:auto}
html[lang=ar] .op-rail .l{font-size:15px;line-height:1.5}

html[lang=ar] .m-note{font-size:14.5px;line-height:1.75}
html[dir=rtl] .jump.f-end{-webkit-mask-image:linear-gradient(270deg,#000 calc(100% - 48px),transparent);mask-image:linear-gradient(270deg,#000 calc(100% - 48px),transparent)}
html[dir=rtl] .jump.f-start{-webkit-mask-image:linear-gradient(270deg,transparent,#000 48px);mask-image:linear-gradient(270deg,transparent,#000 48px)}

html[lang=ar] .ptn{--lh:1.3;--base:.2915}

/* ---------------- SELECTION THAT FLOWS ----------------
   Segmented controls (the navigation, filters, tabs, the film's language) show the choice with one plate.
   On a new choice the plate flows toward it like a drop, leading edge first, and settles without bounce (moved by script).
   Each label is painted with a gradient that turns colour exactly at the plate's edges, so the text under
   the plate changes as the plate passes. A control that wraps onto two lines keeps its plain selected state. */
@property --gl-l{syntax:'<length>';inherits:true;initial-value:0px}
@property --gl-r{syntax:'<length>';inherits:true;initial-value:0px}
@property --gl-t{syntax:'<length>';inherits:true;initial-value:0px}
@property --gl-b{syntax:'<length>';inherits:true;initial-value:0px}
.glide{position:relative;isolation:isolate;--c-on:var(--bg);--c-off:var(--fg-2);--gl-bg:var(--fg)}
.gl-plate{display:none}
.glide>.gl-plate{display:block;position:absolute;z-index:-1;left:var(--gl-l);right:var(--gl-r);top:var(--gl-t);bottom:var(--gl-b);margin:0;padding:0;list-style:none;border-radius:var(--gl-rl,var(--gl-rad,999px)) var(--gl-rr,var(--gl-rad,999px)) var(--gl-rr,var(--gl-rad,999px)) var(--gl-rl,var(--gl-rad,999px));background:var(--gl-bg);pointer-events:none}
.glide.gl-none>.gl-plate{visibility:hidden}
.glide>button,.glide>a,.glide>li>a{background-color:transparent!important;color:transparent!important;-webkit-background-clip:text!important;background-clip:text!important;
  background-image:linear-gradient(90deg,var(--c-off) calc(var(--gl-l) - var(--ox,0px)),var(--c-on) calc(var(--gl-l) - var(--ox,0px)),var(--c-on) calc(var(--gl-w,0px) - var(--gl-r) - var(--ox,0px)),var(--c-off) calc(var(--gl-w,0px) - var(--gl-r) - var(--ox,0px)))!important}
.glide>button:hover,.glide>a:hover,.glide>li>a:hover{--c-off:var(--fg)}
#navlinks.glide{--c-on:var(--fg);--gl-bg:rgba(255,255,255,.075)}
@media (forced-colors:active){.glide>button,.glide>a,.glide>li>a{color:ButtonText!important;background-image:none!important}.glide>.gl-plate{background:Highlight}}

/* ---------------- SHAPE TRIAL (27 Oct): corners instead of pills and circles ----------------
   Active while the page root carries data-shape="corner" (set in the build: SHAPE in build_site.py).
   Without it every element returns to its pill or circle. Small status dots, glows, rings and the globe stay round.
   Scale: 4 check marks · 6 badges and status tags · 8 chips, tags and segment items · 10–12 buttons and
   segmented controls · 14–22 larger icon buttons. Tiles and panels keep their radius. */
:root[data-shape=corner]{--gl-rad:8px}
:root[data-shape=corner] .btn{border-radius:12px}
:root[data-shape=corner] .nav .btn,:root[data-shape=corner] .btn-sm{border-radius:10px}
:root[data-shape=corner] .lang{border-radius:10px}
:root[data-shape=corner] .nav ul,:root[data-shape=corner] .tabs,:root[data-shape=corner] .seg,:root[data-shape=corner] .seg.seg-sm,:root[data-shape=corner] .vw-lang{border-radius:12px}
:root[data-shape=corner] .nav ul a,:root[data-shape=corner] .tabs button,:root[data-shape=corner] .seg button,:root[data-shape=corner] .vw-lang button{border-radius:8px}
:root[data-shape=corner] .globe-tag,:root[data-shape=corner] .out-list span,:root[data-shape=corner] .chks span,:root[data-shape=corner] .keys span,:root[data-shape=corner] .metrics span:not(.small),:root[data-shape=corner] .chips span,:root[data-shape=corner] .jump a{border-radius:8px}
:root[data-shape=corner] .pill,:root[data-shape=corner] .f5 .you,:root[data-shape=corner] .badge,:root[data-shape=corner] .vw-ctl .vo{border-radius:6px}
:root[data-shape=corner] .stt .v::before,:root[data-shape=corner] .chks span::before{border-radius:4px}
:root[data-shape=corner] summary .pm{border-radius:8px}
:root[data-shape=corner] .vw-ctl button{border-radius:9px}
:root[data-shape=corner] .dlg .x{border-radius:10px}
:root[data-shape=corner] .lockc{border-radius:12px}
:root[data-shape=corner] .lockb,:root[data-shape=corner] .dlg-ic{border-radius:14px}
:root[data-shape=corner] .s3a .pl{border-radius:16px}
:root[data-shape=corner] .pkg .seal{border-radius:18px}
:root[data-shape=corner] .play,:root[data-shape=corner] .node .dot{border-radius:22px}
:root[data-shape=corner] .lcov .play{border-radius:16px}
:root[data-shape=corner] input[type=range]::-webkit-slider-thumb{border-radius:5px}
:root[data-shape=corner] input[type=range]::-moz-range-thumb{border-radius:5px}

/* ---------------- HEADER: one height for every control ---------------- */
.nav ul{height:40px;padding:3px;align-items:stretch}
.nav ul li{display:flex}
.nav ul a{display:flex;align-items:center;padding:0 14px}
.nav .btn{height:40px;padding:0 18px}
.lang{height:40px}
.burger{width:40px;height:40px;padding:0;border:1px solid var(--line);border-radius:999px;background:rgba(255,255,255,.02);place-content:center;gap:6px;color:var(--fg)}
.burger span{width:18px;margin:0;transition:transform .45s cubic-bezier(.2,.8,.2,1)}
@media (max-width:1000px){.nav .burger{display:grid}}
.burger[aria-expanded="true"] span:first-child{transform:translateY(3.75px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-3.75px) rotate(-45deg)}
:root[data-shape=corner] .burger{border-radius:10px}

/* ---------------- PRESS: glass that responds ----------------
   As in Apple's newest systems: a pressed control grows a touch and light blooms from the point of contact,
   then it settles back without bounce. */
.btn,.lang,.dlg .x,.burger{isolation:isolate}
.btn:not(.btn-gold),.lang,.burger{position:relative}
.btn::before,.lang::before,.dlg .x::before,.burger::before{content:"";position:absolute;inset:0;z-index:-1;border-radius:inherit;pointer-events:none;opacity:0;
  background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(255,255,255,.2),rgba(255,255,255,.06) 42%,transparent 72%);transition:opacity .6s cubic-bezier(.2,.8,.2,1)}
.btn-gold::before{background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(255,250,236,.75),rgba(255,242,214,.2) 44%,transparent 76%)}
.light .btn-line::before{background:radial-gradient(circle at var(--px,50%) var(--py,50%),rgba(11,18,14,.08),transparent 70%)}
.is-pressed::before{opacity:1;transition:opacity .12s ease-out}
.btn.is-pressed,.lang.is-pressed,.dlg .x.is-pressed{transform:scale(1.04);transition:transform .16s cubic-bezier(.3,.7,.2,1),background .3s,color .3s,border-color .3s,filter .3s}
.burger.is-pressed{transform:scale(1.08);transition:transform .16s cubic-bezier(.3,.7,.2,1)}
.btn.was-pressed,.lang.was-pressed,.dlg .x.was-pressed,.burger.was-pressed{transition:transform .5s cubic-bezier(.2,.8,.2,1),background .3s,color .3s,border-color .3s,filter .3s}
/* menu rows light up under the finger */
.menu a{position:relative;isolation:isolate}
.menu a:not(.btn)::before{content:"";position:absolute;inset:3px -14px;z-index:-1;border-radius:12px;background:rgba(255,255,255,.07);opacity:0;transform:scale(.97);pointer-events:none;
  transition:opacity .5s cubic-bezier(.2,.8,.2,1),transform .5s cubic-bezier(.2,.8,.2,1)}
.menu a:not(.btn).is-pressed::before{opacity:1;transform:none;transition-duration:.12s}

/* the phone menu grows out of its button and folds back into it */
.menu.m-open{animation:menuIn .5s cubic-bezier(.2,.8,.2,1) both}
.menu.m-close{animation:menuOut .3s cubic-bezier(.4,0,.2,1) both}
.menu.m-open>*{animation:menuRow .55s cubic-bezier(.2,.8,.2,1) both}
.menu.m-open>*:nth-child(2){animation-delay:.03s}.menu.m-open>*:nth-child(3){animation-delay:.06s}.menu.m-open>*:nth-child(4){animation-delay:.09s}.menu.m-open>*:nth-child(5){animation-delay:.12s}
@keyframes menuIn{from{clip-path:inset(var(--m-t,0) var(--m-r,0) var(--m-b,100%) var(--m-l,100%) round 12px);opacity:.5}to{clip-path:inset(0 0 0 0 round 0);opacity:1}}
@keyframes menuOut{from{clip-path:inset(0 0 0 0 round 0);opacity:1}to{clip-path:inset(var(--m-t,0) var(--m-r,0) var(--m-b,100%) var(--m-l,100%) round 12px);opacity:.3}}
@keyframes menuRow{from{opacity:0;transform:translateY(-10px)}}

/* segmented controls: the plate can be dragged along the options (see glide.js); labels are not selectable while doing so */
.glide>button,.glide>a,.glide>li>a{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

@media (prefers-reduced-motion:reduce){
  .btn.is-pressed,.lang.is-pressed,.dlg .x.is-pressed,.burger.is-pressed{transform:none}
  .menu.m-open,.menu.m-close,.menu.m-open>*{animation:none}
}

/* ---------------- GLASS EDGES ----------------
   Outlines are a ring of light instead of a flat 1px line: brightest at the top left, where the light falls, dim along
   the sides, a faint reflection at the bottom right. The light is the site's own white, kept soft. Three ways to draw the same ring:
   - glass controls and panels, whose fill lets the page through: a masked ring in a free pseudo-element over the border;
   - panels with a solid fill: the ring as a second background under the fill (border-box under padding-box);
   - fields, the tab bar and the consent box: the ring as an SVG background (their radius is fixed, nothing else is free).
   Green and gold outlines keep their colour as a coloured ring. Light sections keep their ink lines. */
:root{
  --edge:linear-gradient(135deg,rgba(237,242,238,.4) 0%,rgba(237,242,238,.15) 18%,rgba(237,242,238,.05) 42%,rgba(237,242,238,.035) 62%,rgba(237,242,238,.09) 84%,rgba(237,242,238,.22) 100%);
  --edge-hi:linear-gradient(135deg,rgba(237,242,238,.55) 0%,rgba(237,242,238,.22) 18%,rgba(237,242,238,.08) 42%,rgba(237,242,238,.06) 62%,rgba(237,242,238,.13) 84%,rgba(237,242,238,.32) 100%);
  --edge-green:linear-gradient(135deg,rgba(120,236,178,.95) 0%,rgba(26,168,100,.55) 22%,rgba(26,168,100,.22) 50%,rgba(26,168,100,.2) 70%,rgba(70,218,148,.7) 100%);
  --edge-gold:linear-gradient(135deg,rgba(246,224,182,1) 0%,rgba(207,169,111,.55) 22%,rgba(207,169,111,.2) 50%,rgba(207,169,111,.2) 70%,rgba(238,210,156,.75) 100%);
  --ring-12:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='e' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%23edf2ee' stop-opacity='.4'/%3E%3Cstop offset='.18' stop-color='%23edf2ee' stop-opacity='.15'/%3E%3Cstop offset='.42' stop-color='%23edf2ee' stop-opacity='.05'/%3E%3Cstop offset='.62' stop-color='%23edf2ee' stop-opacity='.035'/%3E%3Cstop offset='.84' stop-color='%23edf2ee' stop-opacity='.09'/%3E%3Cstop offset='1' stop-color='%23edf2ee' stop-opacity='.22'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' rx='12' fill='none' stroke='url(%23e)' stroke-width='2'/%3E%3C/svg%3E");
  --ring-5:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cdefs%3E%3ClinearGradient id='e' x1='0' y1='0' x2='.6' y2='1'%3E%3Cstop offset='0' stop-color='%23edf2ee' stop-opacity='.38'/%3E%3Cstop offset='.5' stop-color='%23edf2ee' stop-opacity='.12'/%3E%3Cstop offset='1' stop-color='%23edf2ee' stop-opacity='.22'/%3E%3C/linearGradient%3E%3C/defs%3E%3Crect width='100%25' height='100%25' rx='5' fill='none' stroke='url(%23e)' stroke-width='2'/%3E%3C/svg%3E");
}

/* 1. glass controls and panels: a masked ring over the border, in whichever pseudo-element is free */
.nav ul,#form,.globe-tag,.play,.phase,.seg,.ledger,.mkt,.vw-lang,.pol-h,.pol-o,.scr-q,.scr-r,.tally div,.badge,
.btn-line,.btn-line:hover,.lang,.lang:hover,.burger,.dlg .x,.m-grid div,.m-grid div.on{border-color:transparent}
.seg,.ledger,.mkt,.vw-lang,.pol-h,.pol-o,.scr-q,.scr-r,.tally div,.badge,.m-grid div{position:relative}
.nav ul::before,#form::before,.globe-tag::before,.play::before,.phase::before,.seg::before,.ledger::before,.mkt::before,.vw-lang::before,
.pol-h::before,.pol-o::before,.scr-q::before,.scr-r::before,.tally div::before,.badge::before,
.btn-line::after,.lang::after,.burger::after,.dlg .x::after,.m-grid div::after{
  content:"";position:absolute;inset:-1px;border-radius:inherit;padding:1px;background:var(--edge);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}
.btn-line:hover::after,.lang:hover::after,.burger:hover::after,.dlg .x:hover::after,.play::before{background:var(--edge-hi)}
.m-grid div.on::after{background:var(--edge-green)}
.globe-tag::before{background:var(--edge-gold)}
/* light sections keep their ink line */
.light .btn-line,.light .btn-line:hover{border-color:var(--ink-line)}
.light .btn-line::after{content:none}

/* 2. solid panels: the ring as a second background under the fill */
.tile,.j-body,.lcard,.console,.fin,.dlg .dlg-in,form.dlg-in,.node:not(.core) .dot,.phero-img,.case,.vw-stage,.s3a,.adv,.s3b{
  border-color:transparent!important;background:linear-gradient(var(--fill,var(--bg-2)),var(--fill,var(--bg-2))) padding-box,var(--edge) border-box!important}
.case{--fill:var(--bg)}
.vw-stage{--fill:#050b08}
.adv{background:linear-gradient(160deg,#13241b,#0c1712 62%) padding-box,var(--edge) border-box!important}
.s3b{background:linear-gradient(150deg,#1a2e23,#0b1510) padding-box,var(--edge) border-box!important}
.tile:hover,.lcard:hover,.adv:hover{--edge:var(--edge-hi)}
.node.you .dot{--edge:var(--edge-green)}
/* the glass card in the library stack: its ring sits just inside, in gold, as its edge was */
.s3c{border-width:0}
.s3c::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:var(--edge-gold);pointer-events:none;
  -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;
  mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);mask-composite:exclude}

/* 3. fields, the tab bar and the consent box: the ring as an SVG background */
.f input,.f select,.f textarea,.tabs,.sel-v{border-color:transparent;background-image:var(--ring-12);background-origin:border-box;background-repeat:no-repeat;background-size:100% 100%}
.chk input{-webkit-appearance:none;appearance:none;flex:none;width:18px;height:18px;margin:1px 0 0;border-radius:5px;cursor:pointer;
  background:rgba(255,255,255,.04) var(--ring-5) 0 0/100% 100% no-repeat;transition:background-color .2s}
.chk input:checked{background:var(--gold) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.6 6.2l2.2 2.2 4.6-4.8' fill='none' stroke='%231a1209' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center/12px no-repeat}
.chk input:focus-visible{outline:2px solid var(--gold);outline-offset:2px}