/* Symphoria main site. Tokens: E-Discovery neutrals + socrash.ai mint. Inter on the web (Neue Haas waits for a web licence).
   Rules from the design reviews: nothing to the left of a heading; one big piece per screen; photos alternate with black
   screens (schemes, live interface, logos); words never sit on the subject of a picture. */
:root{--f:Inter,system-ui,sans-serif;--m:RMono,ui-monospace,monospace;--bg:#080808;--p1:#0f0f0f;--p2:#151515;--tx:#F6F6F6;--dim:#8a8a8a;--fnt:#5c5c5c;
  --line:#242424;--line2:#333;--t:#21DDA7;--t2:rgba(33,221,167,.12);--on:#04140E;--red:#FF5151;--amb:#E8C15A;--tbd:#FFD66B;
  --ease:cubic-bezier(.2,.7,.1,1);--gut:clamp(16px,4vw,64px)}
*{box-sizing:border-box}
html{background:var(--bg);scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--tx);font:400 18px/1.45 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img,video{display:block;max-width:100%;height:auto}
.wrap{padding:0 var(--gut)}
.k{font:700 12px/1.2 var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--t)}
.k i{font-style:normal;color:var(--dim)}
h1,h2,h3{margin:0;font-weight:300;letter-spacing:-.028em}
.mega{font-size:clamp(64px,15vw,260px);line-height:.9;letter-spacing:-.045em}
h1{font-size:clamp(44px,6.4vw,104px);line-height:1}
h2{font-size:clamp(34px,4.8vw,76px);line-height:1.03}
h3{font-size:clamp(24px,2.4vw,36px);line-height:1.1;letter-spacing:-.02em}
.lead{font-size:clamp(18px,1.7vw,24px);color:#bdbdbd;max-width:40ch;margin:.8em 0 0}
.small{font-size:15px;color:var(--dim)}
.tbd{color:var(--tbd);box-shadow:inset 0 -1px var(--tbd)}
sup.s,.s{font:600 .62em var(--m);color:var(--t);vertical-align:super;line-height:0}
.btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;background:var(--t);color:var(--on);font:600 16px var(--f);white-space:nowrap;transition:transform .3s var(--ease),box-shadow .3s}
.btn:hover{transform:translateY(-2px);box-shadow:0 10px 30px rgba(33,221,167,.25)}
.btn.g{background:transparent;color:var(--tx);box-shadow:inset 0 0 0 1px #555}
.cta{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.more{display:inline-flex;gap:10px;align-items:center;margin-top:28px;font-weight:500;color:var(--tx);border-bottom:1px solid var(--t);padding-bottom:4px}
.more:after{content:"→";color:var(--t);transition:transform .3s var(--ease)}
.more:hover:after{transform:translateX(4px)}

/* header */
.top{position:fixed;z-index:50;left:0;right:0;top:0;height:64px;display:flex;align-items:center;gap:28px;padding:0 var(--gut);background:linear-gradient(rgba(8,8,8,.92),rgba(8,8,8,.0));transition:background .3s}
.top.solid{background:rgba(8,8,8,.92);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)}

/* motion */
.rv{opacity:0;transform:translateY(28px);transition:opacity 1s var(--ease),transform 1.1s var(--ease);transition-delay:var(--d,0s)}
.rv.in{opacity:1;transform:none}
.kb{overflow:hidden}.kb img{transform:scale(1.1);transition:transform 9s cubic-bezier(.15,.6,.2,1)}.kb.in img{transform:none}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}.kb img{transform:none;transition:none}}

/* screens */
.scr{position:relative;min-height:100svh;display:flex;flex-direction:column;justify-content:center;padding:120px var(--gut)}
.scr.auto{min-height:auto;padding:140px var(--gut)}
.black{background:var(--bg)}
.rule{border-top:1px solid var(--line)}
/* product hero: the product name, huge */
.phero{min-height:100svh;display:flex;flex-direction:column;justify-content:flex-end;padding:120px var(--gut) 64px;position:relative}
.phero .mega{position:relative;z-index:2}
.phero .row{position:relative;z-index:2;display:flex;justify-content:space-between;align-items:flex-end;gap:40px;margin-top:24px;flex-wrap:wrap}
.phero .row .lead{margin:0}
/* full-bleed photo with the words on the dark side */
.photo{position:relative;min-height:100svh;display:flex;align-items:flex-end;padding:0 var(--gut) 80px;overflow:hidden}
.photo .pic{position:absolute;inset:0}
.photo .pic img{width:100%;height:100%;object-fit:cover}
.photo:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(transparent 55%,rgba(8,8,8,.92))}
.photo.left .pic{left:34%}
.photo.left:before{background:linear-gradient(90deg,var(--bg) 34%,rgba(8,8,8,0) 52%)}
.photo.left{align-items:center}
.photo .txt{position:relative;z-index:2;max-width:min(620px,40vw)}
.photo.top{align-items:flex-start;padding-top:140px}
.photo.top:before{background:linear-gradient(rgba(8,8,8,.9),transparent 45%)}
.photo.top .txt,.photo:not(.left) .txt{max-width:900px}
/* two columns: words and one big live piece */
.duo{display:grid;grid-template-columns:minmax(280px,.8fr) 1.5fr;gap:clamp(32px,5vw,80px);align-items:center}
.duo.r{grid-template-columns:1.5fr minmax(280px,.8fr)}.duo.r>.txt{order:2}
.cap{font:12px var(--m);color:var(--fnt);margin-top:12px;letter-spacing:.03em}

/* the app panels, live HTML (real data, every fact numbered) */
.app{background:var(--p1);border:1px solid var(--line2);border-radius:4px;box-shadow:0 40px 120px rgba(0,0,0,.7);overflow:hidden;font:13.5px/1.45 var(--f)}
.app .bar{display:flex;align-items:center;gap:12px;height:42px;padding:0 14px;border-bottom:1px solid var(--line);font-size:12.5px;color:var(--dim)}
.app .bar b{color:var(--tx);font-weight:500}
.app .bar .pill{margin-left:auto;display:inline-flex;align-items:center;gap:7px;height:24px;padding:0 10px;border:1px solid var(--line2);border-radius:12px;color:var(--tx);white-space:nowrap}
.app .bar .pill i{width:6px;height:6px;border-radius:50%;background:var(--t)}
.app .body{position:relative}
.g svg{display:block;width:100%;height:auto}
/* ownership graph (review 8911): cards with Lucide icons, curves that draw on their step and then carry a flowing dash */
.g .nd{opacity:0;transform:translateY(10px) scale(.94);transform-box:fill-box;transform-origin:50% 50%;transition:opacity .6s var(--ease),transform .8s cubic-bezier(.2,1.3,.4,1)}
.g .nd.on{opacity:1;transform:none}
.g .nd .cd{fill:#0e0e0e;stroke:#353535;stroke-width:1.2;transition:stroke .4s,fill .4s}
.g .nd .bg{fill:#181818;stroke:#2c2c2c;transition:fill .4s}
.g .nd svg{color:#bdbdbd;transition:color .4s}
.g .nd text{fill:var(--tx);font:500 13px var(--f)}
.g .nd text.t{fill:var(--dim);font:10.5px var(--m)}
.g .nd.f .cd,.g .nd.hot .cd{stroke:var(--t);fill:#0c1512}
.g .nd.f .bg,.g .nd.hot .bg{fill:rgba(33,221,167,.14);stroke:rgba(33,221,167,.4)}
.g .nd.f svg,.g .nd.hot svg{color:var(--t)}
.g .nd.hot{filter:drop-shadow(0 0 10px rgba(33,221,167,.35))}
.g .nd.site .cd{stroke-dasharray:4 4;stroke:#666}
.g .nd.r .cd{stroke:var(--red);fill:#160c0c}.g .nd.r .bg{fill:rgba(255,81,81,.14);stroke:rgba(255,81,81,.4)}.g .nd.r svg{color:var(--red)}
.g .ed path{fill:none;stroke-width:1.4}
.g .ed .base{stroke:#474747;stroke-dasharray:var(--L,1000);stroke-dashoffset:var(--L,1000);transition:stroke-dashoffset 1.3s cubic-bezier(.3,.6,.2,1)}
.g .ed.on .base{stroke-dashoffset:0}
.g .ed .flow{stroke:var(--t);stroke-dasharray:2 16;opacity:0;transition:opacity .6s 1.1s;animation:flow 1.4s linear infinite}
.g .ed.on .flow{opacity:.85}
.g .ed.r .base{stroke:rgba(255,81,81,.7)}.g .ed.r .flow{stroke:var(--red)}
.g .ed.a .base{stroke:rgba(232,193,90,.75)}.g .ed.a .flow{stroke:var(--amb)}
.g .lb{opacity:0;transition:opacity .5s .7s}
.g .lb.on{opacity:1}
.g .lb rect{fill:#121212;stroke:#3a3a3a}
.g .lb text{fill:#cfcfcf;font:600 10px var(--m);letter-spacing:.05em;text-anchor:middle}
.g .lb.r rect{stroke:rgba(255,81,81,.6)}.g .lb.r text{fill:var(--red)}
.g .lb.a rect{stroke:rgba(232,193,90,.6)}.g .lb.a text{fill:var(--amb)}
@keyframes flow{to{stroke-dashoffset:-36}}
@media (prefers-reduced-motion:reduce){.g .ed .flow{animation:none}.g .nd,.g .ed .base,.g .lb{transition:none}}
.find{padding:14px 16px;border-top:1px solid var(--line);display:grid;grid-template-columns:22px 1fr;gap:10px}
.find:first-child{border-top:0}
.find .ic{width:20px;height:20px;border-radius:50%;border:1px solid currentColor;display:grid;place-items:center;font:600 11px var(--f)}
.find b{font-weight:500;display:block}
.find p{margin:4px 0 0;color:#b8b8b8}
.chip{display:inline-block;margin-top:8px;font:600 10.5px var(--f);letter-spacing:.06em;text-transform:uppercase;padding:3px 7px;border-radius:2px}
.chip.r{color:var(--red);background:rgba(255,81,81,.12)}.chip.t{color:var(--t);background:var(--t2)}.chip.g{color:var(--dim);background:#1d1d1d}
.find.r{color:var(--red)}.find.t{color:var(--t)}.find.g{color:var(--dim)}
.find b,.find p{color:var(--tx)}.find p{color:#b8b8b8}
.arc{padding:22px 26px;font-size:15.5px;line-height:1.6;color:#d9d9d9}
.arc h4{margin:0 0 12px;font-weight:300;font-size:26px;letter-spacing:-.02em;color:var(--tx)}
.arc p{margin:0 0 12px}
.arc .hl{background:var(--t2);box-shadow:inset 0 -1px var(--t);color:var(--tx)}
.led{font:12.5px/1.9 var(--m);padding:14px 16px;color:#c9c9c9}
.led .row{display:grid;grid-template-columns:60px 1fr auto;gap:12px;border-bottom:1px solid var(--line);padding:6px 0}
.led .row span:first-child{color:var(--t)}.led .ok{color:var(--t)}
.term{font:13px/1.9 var(--m);padding:16px 18px;color:#cfcfcf;background:#0a0a0a;white-space:pre-wrap}
.term .ok{color:var(--t)}.term .d{color:var(--fnt)}
.stage-in [data-i]{opacity:0;transform:translateY(10px);transition:opacity .7s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--i,0)*.35s + .2s)}
.stage-in.in [data-i]{opacity:1;transform:none}

/* sources list */
.srcs{margin:28px 0 0;padding:0;list-style:none;font-size:14px;color:var(--dim);columns:2;column-gap:40px}
.srcs li{break-inside:avoid;margin:0 0 8px;display:grid;grid-template-columns:30px 1fr}
.srcs li b{font:500 12px var(--m);color:var(--t)}
.srcs a{box-shadow:inset 0 -1px #444}
.srcs a:hover{color:var(--tx)}

/* pinned scroll scene (home): the stage holds, the story moves */
.pin{position:relative}
.pin .stick{position:sticky;top:0;height:100svh;display:grid;grid-template-columns:minmax(300px,.75fr) 1.5fr;gap:clamp(24px,4vw,64px);align-items:center;padding:80px var(--gut) 40px;overflow:hidden}
.pin .steps{position:relative;height:60vh}
.pin .step{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:center;opacity:0;transform:translateY(24px);transition:opacity .6s var(--ease),transform .7s var(--ease);pointer-events:none}
.pin .step.on{opacity:1;transform:none;pointer-events:auto}
.pin .step h2{font-size:clamp(30px,3.6vw,58px)}
.pin .prog{position:absolute;left:var(--gut);right:var(--gut);bottom:24px;height:2px;background:var(--line)}
.pin .prog i{position:absolute;left:0;top:0;bottom:0;background:var(--t);width:0}
.pin .panel{position:relative}
.pin .over{position:absolute;right:16px;bottom:16px;width:min(300px,60%);transition:opacity .6s var(--ease),transform .7s var(--ease);opacity:0;transform:translateY(16px)}
.pin .over.on{opacity:1;transform:none}

/* horizontal product rail (pinned) */
.rail{position:relative}
.rail .stick{position:sticky;top:0;height:100svh;overflow:hidden;display:flex;flex-direction:column;justify-content:center}
.rail .head{padding:0 var(--gut) 36px}
.rail .track{display:flex;gap:24px;padding:0 var(--gut);will-change:transform}
.card{flex:0 0 min(78vw,980px);height:min(62vh,600px);position:relative;border:1px solid var(--line2);overflow:hidden;background:var(--p1);display:flex;flex-direction:column;justify-content:flex-end;padding:32px}
.card .pic{position:absolute;inset:0}
.card .pic img,.card .pic video{width:100%;height:100%;object-fit:cover;opacity:.9;transition:transform 1.2s var(--ease)}
.card:hover .pic img{transform:scale(1.03)}
.card:before{content:"";position:absolute;inset:0;z-index:1;background:linear-gradient(transparent 40%,rgba(8,8,8,.95))}
.card>*:not(.pic){position:relative;z-index:2}
.card h3{font-size:clamp(30px,3.2vw,52px)}

/* logos: sources and standards as a slow marquee of wordmarks */
.logos{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:42px 0}
.logos .row{display:flex;gap:64px;width:max-content;animation:mq 50s linear infinite}
.logos .row span{font:500 clamp(20px,2vw,30px) var(--f);color:#9b9b9b;letter-spacing:-.01em;white-space:nowrap;display:flex;align-items:center;gap:12px}
.logos .row span i{font:500 11px var(--m);color:var(--fnt);letter-spacing:.06em;text-transform:uppercase}
@keyframes mq{to{transform:translateX(-50%)}}

/* a list of facts (black screens between photos) */
.facts{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--line);margin-top:56px}
.facts>div{padding:28px 28px 0 0}
.facts>div+div{padding-left:28px;border-left:1px solid var(--line)}
.facts b{display:block;font-weight:300;font-size:clamp(40px,4.4vw,72px);letter-spacing:-.035em;line-height:1}
.facts span{display:block;color:var(--dim);margin-top:10px;font-size:16px;max-width:30ch}
/* chain scheme */
.chain{display:flex;align-items:center;gap:0;margin-top:56px;overflow-x:auto;padding-bottom:8px}
.chain .blk{flex:0 0 auto;border:1px solid var(--line2);background:var(--p1);padding:16px 18px;min-width:190px;font:12px/1.7 var(--m);color:#bdbdbd}
.chain .blk b{display:block;font:500 15px var(--f);color:var(--tx);margin-bottom:4px}
.chain .lnk{flex:0 0 48px;height:1.5px;background:var(--t);position:relative}
.chain .lnk:after{content:"";position:absolute;right:-1px;top:-4px;border:4.5px solid transparent;border-left:7px solid var(--t)}
.chain .btc{border-color:var(--t);color:var(--t)}
/* pricing */
.plans{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--line);margin-top:48px}
.plans>div{padding:28px 24px 28px 0}
.plans>div+div{padding-left:24px;border-left:1px solid var(--line)}
.plans b{display:block;font-weight:300;font-size:clamp(44px,4.6vw,72px);letter-spacing:-.04em;line-height:1;margin:14px 0}
.plans b small{font-size:.28em;color:var(--dim);letter-spacing:0}
.plans ul{margin:12px 0 0;padding:0;list-style:none;color:#bbb;font-size:15px}
.plans li{padding:5px 0}
/* faq */
.qa{border-top:1px solid var(--line);margin-top:48px}
.qa details{border-bottom:1px solid var(--line);padding:22px 0}
.qa summary{cursor:pointer;font-size:clamp(20px,2vw,28px);font-weight:300;letter-spacing:-.015em;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary:after{content:"+";float:right;color:var(--t)}
.qa details[open] summary:after{content:"−"}
.qa p{color:#bdbdbd;max-width:70ch;margin:14px 0 0}
/* live board */
.live{position:relative;overflow:hidden;aspect-ratio:16/10;border:1px solid var(--line2);box-shadow:0 40px 120px rgba(0,0,0,.7);background:var(--bg)}
.live iframe{position:absolute;left:0;top:0;width:1440px;height:900px;border:0;transform-origin:0 0;pointer-events:none}
.live .tag{position:absolute;right:12px;top:12px;z-index:2;font:700 10px var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--on);background:var(--t);padding:5px 8px}
/* lens plate */
.plate{position:absolute;z-index:3;background:rgba(6,12,11,.84);border:1px solid rgba(33,221,167,.6);padding:16px 18px;font:13.5px/1.5 var(--m);color:#DFFBF8;backdrop-filter:blur(6px);width:min(400px,86vw)}
.plate .pk{display:flex;justify-content:space-between;font:700 10.5px var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--t)}
.plate .pk i{font-style:normal;color:var(--dim)}
.plate b{display:block;font:500 20px/1.25 var(--f);color:#fff;margin:10px 0 6px}
.offer{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin-top:48px}
.offer>div{padding:32px 32px 0 0}.offer>div+div{padding-left:32px;border-left:1px solid var(--line)}
.offer b{display:block;font-weight:300;font-size:clamp(48px,5vw,84px);letter-spacing:-.04em;line-height:1;margin:16px 0}
.offer b small{font-size:.25em;color:var(--dim);letter-spacing:0}
/* footer */
footer{border-top:1px solid var(--line);padding:56px var(--gut) 40px;display:grid;grid-template-columns:1.2fr repeat(3,1fr);gap:32px;font-size:14px;color:var(--dim)}
footer h5{margin:0 0 12px;font:700 11px var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--tx)}
footer a{display:block;padding:4px 0}footer a:hover{color:var(--tx)}
footer .fine{grid-column:1/-1;border-top:1px solid var(--line);padding-top:20px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--fnt);font-size:13px}

@media (max-width:900px){
  .scr{padding:96px var(--gut);min-height:auto}
  .duo,.duo.r{grid-template-columns:1fr}.duo.r>.txt{order:0}
  .photo{min-height:92svh;padding-bottom:40px}
  .photo.left .pic{left:0;bottom:38%}
  .photo.left:before{background:linear-gradient(transparent 30%,var(--bg) 62%)}
  .photo.left{align-items:flex-end}
  .photo .txt{max-width:none}
  .pin .stick{grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;padding-top:76px;gap:12px}
  .pin .steps{height:34vh;order:2}
  .pin .panel{order:1}
  .pin .over{display:none}
  .pin .panel .app{overflow:hidden}.pin .panel .g svg{width:170%;max-width:none;margin-left:-38%}
  .rail .stick{position:static;height:auto;padding:96px 0}
  .rail{height:auto!important}
  .rail .track{flex-direction:column;transform:none!important}
  .card{flex:none;width:100%;height:68vh}
  .facts,.plans,.offer{grid-template-columns:1fr}
  .facts>div+div,.plans>div+div,.offer>div+div{padding-left:0;border-left:0;border-top:1px solid var(--line)}
  .srcs{columns:1}
  footer{grid-template-columns:1fr 1fr}
  .live{aspect-ratio:4/5}
}

/* density pass: sections size to their content; text sections always carry a picture */
.scr{min-height:auto;padding:110px var(--gut)}
.scr.auto{padding:90px var(--gut)}
.phero{min-height:84svh;overflow:hidden}
.phero .pic{position:absolute;inset:0 0 0 38%;z-index:0}
/* the arts keep their subject above the title: the picture fills the top of the hero and fades out before the text */
.phero.art{min-height:100svh;padding-top:0}
.phero .pic.full{position:relative;inset:auto;flex:1 1 auto;min-height:42svh;margin:0 calc(-1 * var(--gut)) 8px}
.phero .pic.full img{position:absolute;inset:0;object-position:50% 45%;opacity:1}
.phero .pic.full:after{background:linear-gradient(rgba(8,8,8,.55),transparent 22%,transparent 72%,var(--bg))}
.phero .pic img{width:100%;height:100%;object-fit:cover;opacity:.9}
.phero .pic:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,var(--bg),rgba(8,8,8,0) 45%),linear-gradient(transparent 60%,var(--bg))}
.phero>.k{position:relative;z-index:2}
/* asymmetry scheme: who sees whom */
.asym{display:grid;gap:14px}
.asym .ln{display:grid;grid-template-columns:150px 1fr 150px;align-items:center;gap:14px;padding:22px;border:1px solid var(--line2);background:var(--p1);border-radius:4px}
.asym .bx{border:1px solid #444;padding:12px 10px;text-align:center;font-size:14px;border-radius:3px}
.asym .bx.p{border-radius:40px}
.asym .ar{position:relative;height:1.5px;background:#555}
.asym .ar:after{content:"";position:absolute;right:-1px;top:-4px;border:4.5px solid transparent;border-left:7px solid #555}
.asym .ar span{position:absolute;left:0;right:0;top:-26px;text-align:center;font:11px var(--m);color:var(--dim);letter-spacing:.04em}
.asym .ln.us{border-color:rgba(33,221,167,.5);background:rgba(33,221,167,.05)}
.asym .ln.us .ar{background:var(--t)}.asym .ln.us .ar:after{border-left-color:var(--t)}.asym .ln.us .ar span{color:var(--t)}
.asym .ln.us .bx{border-color:var(--t)}
.asym .cap2{grid-column:1/-1;font-size:13px;color:var(--dim);margin-top:4px}
/* mini illustrations above facts */
.facts .il{height:120px;margin-bottom:22px;border:1px solid var(--line);background:var(--p1);border-radius:3px;position:relative;overflow:hidden}
.facts .il img{width:100%;height:100%;object-fit:cover;opacity:.85}
.mini-note{position:absolute;left:14px;top:14px;right:30px;background:#121212;border:1px solid #2a2a2a;border-left:3px solid var(--t);padding:8px 10px;font-size:12.5px;color:#ddd}
.mini-note small{display:block;font:10px var(--m);color:var(--fnt);margin-top:4px}
@media (max-width:900px){.phero .pic{inset:0;opacity:.45}.phero .pic.full{inset:auto;opacity:1;min-height:46svh}.asym .ln{grid-template-columns:90px 1fr 90px;padding:16px}.scr{padding:72px var(--gut)}}

/* home hero (review 8911): one tower in the middle; a chat asks who owns it, the answer throws the companies out left and
   right, wires join them, flags mark what does not add up. Every fact is from the filings in the sources list. */
.hero{position:relative;min-height:max(100svh,900px);padding:0 var(--gut) 72px;display:flex;align-items:flex-end;overflow:hidden}
.hero-bg{position:absolute;inset:0}
.hero-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.08);animation:towerIn 2.4s var(--ease) forwards}
.hero:before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;background:linear-gradient(transparent 50%,rgba(8,8,8,.94) 92%),radial-gradient(60% 50% at 50% 45%,transparent,rgba(8,8,8,.5))}
.hero .txt{position:relative;z-index:3;max-width:min(480px,31vw)}
.hero h1{font-size:clamp(40px,4.5vw,70px)}
.hero .lead{font-size:clamp(17px,1.35vw,20px)}
.scene{position:absolute;inset:0;z-index:2;pointer-events:none}
.wires{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.wires path{fill:none;stroke:rgba(33,221,167,.55);stroke-width:1.2}
.wires path.rel{stroke:rgba(232,193,90,.8);stroke-dasharray:4 5}
.wires path.rr{stroke:rgba(255,81,81,.75)}
.wires text{font:600 10.5px var(--m);fill:var(--amb);letter-spacing:.04em}
.chat{position:absolute;left:50%;top:56%;width:min(400px,28vw);transform:translate(-50%,-50%) translateY(16px) scale(.96);opacity:0;background:rgba(10,10,10,.9);border:1px solid #2e2e2e;border-radius:6px;box-shadow:0 30px 80px rgba(0,0,0,.7),0 0 0 1px rgba(33,221,167,.08);backdrop-filter:blur(12px);font-size:13.5px;transition:opacity .6s var(--ease),transform .8s var(--ease)}
.chat.on{opacity:1;transform:translate(-50%,-50%)}
.ch-h{display:flex;align-items:center;gap:8px;padding:10px 13px;border-bottom:1px solid #222;font:600 10px var(--f);letter-spacing:.12em;text-transform:uppercase;color:var(--t)}
.ch-h i{width:6px;height:6px;border-radius:50%;background:var(--t);box-shadow:0 0 0 3px rgba(33,221,167,.2);animation:blink 1.6s infinite}
.ch-h span{margin-left:auto;font:500 10.5px var(--m);letter-spacing:0;text-transform:none;color:var(--fnt)}
.ch-q,.ch-a{padding:11px 13px 0;line-height:1.45;min-height:1.45em}
.ch-q b,.ch-a b{display:block;font:600 10px var(--m);letter-spacing:.06em;text-transform:uppercase;color:var(--fnt);margin-bottom:3px}
.ch-q .ty{display:inline-block;padding:7px 11px;background:#1b1b1b;border:1px solid #2c2c2c;border-radius:14px 14px 14px 3px;color:#fff;min-height:1.4em}
.ch-a{color:#d9d9d9;opacity:0;transition:opacity .3s}.ch-a.on{opacity:1}
.ty.typing:after{content:"";display:inline-block;width:7px;height:1.05em;margin-left:2px;vertical-align:-2px;background:var(--t);animation:blink .8s steps(1) infinite}
.ch-s{display:flex;flex-wrap:wrap;align-items:center;gap:6px 8px;padding:10px 13px 0;font:11px var(--m);color:var(--dim);opacity:0;max-height:0;overflow:hidden;transition:opacity .3s,max-height .5s var(--ease)}
.ch-s.on{opacity:1;max-height:80px}
.ch-s .spin{width:10px;height:10px;border:1.5px solid #333;border-top-color:var(--t);border-radius:50%;animation:spin .8s linear infinite}
.ch-s.done .spin{animation:none;border-color:var(--t)}
.ch-s .src{display:flex;flex-wrap:wrap;gap:5px;width:100%}
.ch-s .src i{font-style:normal;padding:2px 7px;border:1px solid #2c2c2c;border-radius:10px;opacity:.25;transition:opacity .3s,border-color .3s,color .3s}
.ch-s .src i.on{opacity:1;border-color:rgba(33,221,167,.5);color:var(--t)}
.ch-f{display:flex;gap:14px;margin-top:12px;padding:9px 13px;border-top:1px solid #222;font:11px var(--m);color:var(--fnt);opacity:0;transition:opacity .5s}
.ch-f.on{opacity:1}.ch-f .ok{margin-left:auto;color:var(--t)}
.ent{position:absolute;left:var(--x);top:var(--y);width:min(232px,16.5vw);display:flex;gap:11px;align-items:flex-start;padding:11px 12px;background:rgba(12,12,12,.9);border:1px solid #2f2f2f;border-radius:5px;box-shadow:0 20px 50px rgba(0,0,0,.6);backdrop-filter:blur(8px);opacity:0;font-size:13px}
.ent .ic{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:6px;background:rgba(33,221,167,.1);color:var(--t)}
.ent .ic svg{width:17px;height:17px;stroke-width:1.6}
.ent b{display:block;font-weight:500;color:var(--tx);font-size:13.5px}
.ent span{display:block;font:11px/1.35 var(--m);color:var(--dim);margin-top:2px}
.ent sup.s{font-size:9.5px;margin-left:0}
.ent.landed{animation:drift var(--dur,7s) ease-in-out infinite alternate}
.flag{display:inline-flex;align-items:center;gap:6px;margin-top:7px;padding:3px 8px;font:600 9.5px var(--m);letter-spacing:.06em;text-transform:uppercase;border-radius:3px;opacity:0;transform:scale(.6);transition:opacity .3s,transform .4s cubic-bezier(.3,1.6,.5,1)}
.flag:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;animation:blink 1.2s infinite}
.flag.a{color:var(--amb);background:rgba(232,193,90,.1);box-shadow:inset 0 0 0 1px rgba(232,193,90,.45)}
.flag.r{color:var(--red);background:rgba(255,81,81,.1);box-shadow:inset 0 0 0 1px rgba(255,81,81,.5)}
.flag.on{opacity:1;transform:none}
.ent.fl-r.lit{border-color:rgba(255,81,81,.6);box-shadow:0 0 0 4px rgba(255,81,81,.08),0 20px 50px rgba(0,0,0,.6)}
.ent.fl-a.lit{border-color:rgba(232,193,90,.55)}
.ent.fl-r .ic{background:rgba(255,81,81,.12);color:var(--red)}
.ent.fl-a .ic{background:rgba(232,193,90,.1);color:var(--amb)}
@keyframes towerIn{to{transform:none}}
@keyframes blink{50%{opacity:.35}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes drift{from{translate:0 0}to{translate:0 -9px}}
@keyframes fadeIn{to{opacity:1}}
@media (max-width:900px){
  .hero{padding-bottom:40px;min-height:112svh}
  .hero .txt{max-width:none}
  .hero:before{background:linear-gradient(transparent 30%,rgba(8,8,8,.96) 62%)}
  .chat .ch-s .src,.chat .ch-f{display:none}
  .chat{top:30%;width:min(330px,84vw);font-size:12.5px}
  .chat .ch-s .src i:nth-child(n+3){display:none}
  .ent{left:var(--mx,var(--x));top:var(--my,var(--y));width:auto;max-width:44vw;padding:7px 8px;gap:7px}
  .ent .ic{width:22px;height:22px}.ent .ic svg{width:13px;height:13px}
  .ent b{font-size:11.5px}.ent span,.ent sup.s{display:none}
  .ent.mh{display:none!important}
  .flag{font-size:8.5px;margin-top:4px}
}
@media (prefers-reduced-motion:reduce){.hero-bg img{animation:none;transform:none}.chat,.ent,.flag,.ch-a,.ch-s,.ch-f{opacity:1!important;transform:none!important;transition:none;animation:none}.ent.landed{animation:none}}

/* nav (review 8911, 1081405): the real Symphoria logo; Products, Solutions and Company open panels with an icon, a line and
   a picture that follows the hovered item; on phones one full-screen sheet with the groups */
.logo{display:flex;align-items:center;flex:none}
.logo svg{height:26px;width:auto;display:block}
.menu{display:flex;align-items:center;gap:6px;margin-left:18px;font-size:14.5px;color:#c9c9c9}
.ni{display:inline-flex;align-items:center;gap:7px;height:40px;padding:0 12px;background:none;border:0;color:inherit;font:inherit;cursor:pointer;border-radius:3px;transition:color .2s,background .2s}
.ni:hover,.dd.open>.ni{color:#fff;background:rgba(255,255,255,.05)}
.ni.on,.dd.on>.ni{color:#fff;box-shadow:inset 0 -1.5px var(--t)}
.ni i{width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-2px) rotate(45deg);transition:transform .3s var(--ease)}
.dd.open .ni i{transform:translateY(1px) rotate(-135deg)}
.dd{position:static}
.mpanel{position:absolute;left:var(--gut);right:var(--gut);top:64px;display:grid;grid-template-columns:1.3fr 1fr;gap:0;background:rgba(10,10,10,.97);border:1px solid #262626;border-radius:6px;box-shadow:0 40px 100px rgba(0,0,0,.7);backdrop-filter:blur(16px);overflow:hidden;
  opacity:0;visibility:hidden;transform:perspective(1200px) rotateX(-8deg) translateY(-10px);transform-origin:50% 0;transition:opacity .25s,transform .45s var(--ease),visibility 0s .45s}
.dd.open .mpanel{opacity:1;visibility:visible;transform:none;transition:opacity .25s,transform .45s var(--ease)}
.pl{display:grid;grid-template-columns:1fr 1fr;gap:4px;padding:18px}
.pl a{display:flex;gap:14px;align-items:flex-start;padding:14px;border-radius:5px;transition:background .2s;opacity:0;transform:translateY(8px)}
.dd.open .pl a{opacity:1;transform:none;transition:background .2s,opacity .4s var(--ease),transform .5s var(--ease)}
.dd.open .pl a:nth-child(2){transition-delay:0s,.04s,.04s}.dd.open .pl a:nth-child(3){transition-delay:0s,.08s,.08s}.dd.open .pl a:nth-child(4){transition-delay:0s,.12s,.12s}.dd.open .pl a:nth-child(5){transition-delay:0s,.16s,.16s}
.pl a:hover,.pl a.hl{background:rgba(255,255,255,.045)}
.pl .ic{flex:none;width:38px;height:38px;display:grid;place-items:center;border:1px solid #2c2c2c;border-radius:8px;color:var(--t);transition:background .2s,border-color .2s}
.pl a:hover .ic{background:rgba(33,221,167,.1);border-color:rgba(33,221,167,.45)}
.pl .ic svg{width:19px;height:19px;stroke-width:1.6}
.pl b{display:block;color:#fff;font-weight:500;font-size:15.5px}
.pl em{display:block;font-style:normal;color:var(--dim);font-size:13.5px;line-height:1.4;margin-top:3px}
.pv{position:relative;min-height:300px;background:#0c0c0c;overflow:hidden}
.pv img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:opacity .35s,transform 6s linear;transform:scale(1.06)}
.dd.open .pv img{transform:scale(1)}
.pv:after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(10,10,10,.9),transparent 30%)}
.top .btn{height:40px;padding:0 16px;font-size:14px}
.top .btn.g.sm{box-shadow:inset 0 0 0 1px #444}
.top .sp{flex:1}
.top{gap:10px}
.burger{display:none;position:relative;width:40px;height:40px;background:none;border:0;cursor:pointer}
.burger i{position:absolute;left:10px;right:10px;height:1.5px;background:var(--tx);transition:transform .35s var(--ease),top .35s var(--ease)}
.burger i:first-child{top:15px}.burger i:last-child{top:24px}
.burger[aria-expanded=true] i:first-child{top:19.5px;transform:rotate(45deg)}.burger[aria-expanded=true] i:last-child{top:19.5px;transform:rotate(-45deg)}
@media (max-width:1100px){.pl{grid-template-columns:1fr}.mpanel{grid-template-columns:1fr 1fr}}
@media (max-width:900px){
  .logo svg{height:22px}
  .burger{display:block}
  .top .btn{display:none}
  .menu{position:fixed;inset:64px 0 0 0;margin:0;display:block;overflow-y:auto;background:var(--bg);padding:8px var(--gut) 40px;font-size:22px;
    opacity:0;visibility:hidden;transform:translateY(-12px);transition:opacity .3s,transform .4s var(--ease),visibility 0s .4s}
  .menu.open{opacity:1;visibility:visible;transform:none;transition:opacity .3s,transform .4s var(--ease)}
  .ni{width:100%;height:58px;padding:0;justify-content:space-between;border-bottom:1px solid var(--line);border-radius:0;font-weight:300}
  .ni:hover,.dd.open>.ni{background:none}
  .ni.on,.dd.on>.ni{box-shadow:none;color:var(--t)}
  .mpanel{position:static;display:none;opacity:1;visibility:visible;transform:none;border:0;box-shadow:none;background:none;border-radius:0}
  .dd.open .mpanel{display:block}
  .pl{grid-template-columns:1fr;padding:6px 0}.pl a{opacity:1;transform:none;padding:10px 0}
  .pv{display:none}
}
@media (prefers-reduced-motion:reduce){.mpanel,.pl a,.menu{transition:none!important}}

/* typography (studio rule §6a): the browser balances headings and avoids short last lines in paragraphs; the
   non-breaking spaces come from tools/typo.py at build time */
h1,h2,h3,h4,.mega,.k{text-wrap:balance}
p,.lead,li,.ent span,.pl em{text-wrap:pretty}

/* rail cards (review 8911): near full screen, the art drifts, the interface loop floats over its free side */
.card.big{flex:0 0 min(84vw,1500px);height:min(76svh,820px);padding:clamp(24px,3vw,48px)}
.rail .head{padding-bottom:24px}.rail .head h2{font-size:clamp(30px,3.6vw,56px)}
.card.big .pic img{opacity:.75;transform:scale(1.12);transition:transform 1.4s var(--ease),opacity .6s}
.card.big.in-view .pic img{animation:kb 18s ease-in-out infinite alternate}
.card.big:hover .pic img{opacity:.95}
@keyframes kb{from{transform:scale(1.12) translate(0,0)}to{transform:scale(1.2) translate(-2.5%,-1.5%)}}
.card .ui{position:absolute;z-index:2;left:clamp(24px,3vw,48px);top:clamp(24px,3vw,48px);width:min(46%,700px);aspect-ratio:16/10;border:1px solid #333;border-radius:8px;overflow:hidden;background:#0b0b0b;
  box-shadow:0 40px 90px rgba(0,0,0,.75);transform:perspective(1600px) rotateY(9deg) rotateX(3deg) translateZ(0);transform-origin:0 50%;transition:transform 1s var(--ease)}
.card .ui.tall{width:min(24%,360px);aspect-ratio:1318/1560}
.card .ui.wide{width:min(56%,860px);aspect-ratio:2700/1040}
.card:hover .ui{transform:perspective(1600px) rotateY(3deg) rotateX(1deg)}
.card .ui video{width:100%;height:100%;object-fit:cover;opacity:1}
.card .hud{position:absolute;z-index:2;right:8%;top:14%;padding:10px 14px;border:1px solid rgba(33,221,167,.7);background:rgba(3,14,14,.7);color:#DFFBF8;font:12px var(--m);border-radius:3px}
.card .hud:before{content:"SYMPHORIA · SUMMARY";display:block;font-size:9px;letter-spacing:.08em;color:var(--t);margin-bottom:4px}
.card.big h3{max-width:16ch}
@media (max-width:900px){
  .card.big{height:78svh}
  .card .ui,.card .ui.tall,.card .ui.wide{width:82%;left:9%;right:auto;top:6%;transform:none}
  .card .ui.tall{width:56%;left:22%}
}
@media (prefers-reduced-motion:reduce){.card.big .pic img{animation:none}.card .ui{transform:none}}

/* «Who uses it» (review 8911): bigger, the pictures drift, a scan line passes, the interface note slides in */
.dots-bg{position:relative}
.who-grid{display:grid;grid-template-columns:1.35fr 1fr;grid-template-rows:auto auto;gap:clamp(16px,2vw,28px);margin-top:48px}
.wc{display:block;position:relative}
.wc.main{grid-row:span 2}
.wpic{position:relative;overflow:hidden;border:1px solid var(--line2);border-radius:4px;background:#0c0c0c;aspect-ratio:16/9;margin-bottom:20px}
.wc.main .wpic{aspect-ratio:auto;height:clamp(320px,38vw,620px)}
.wpic img,.wpic video{width:100%;height:100%;object-fit:cover;transform:scale(1.14);transition:transform 2.4s var(--ease),opacity .6s;opacity:.85}
.wc.in .wpic img,.wc.in .wpic video{transform:scale(1.02)}
.wc:hover .wpic img{transform:scale(1.07);opacity:1}
.wpic .scan{position:absolute;left:0;right:0;top:-10%;height:30%;background:linear-gradient(transparent,rgba(33,221,167,.10),transparent);border-bottom:1px solid rgba(33,221,167,.45);opacity:0;pointer-events:none}
.wc.in .wpic .scan{animation:scan 2.4s var(--ease) .5s 1 forwards}
@keyframes scan{0%{top:-30%;opacity:1}85%{opacity:1}100%{top:110%;opacity:0}}
.wpic .mini-note{top:auto;bottom:18px;left:18px;right:auto;max-width:340px;opacity:0;transform:translateX(-24px);transition:opacity .6s 1.2s,transform .9s var(--ease) 1.2s}
.wc.in .wpic .mini-note{opacity:1;transform:none}
.wc h3{margin-top:10px;max-width:22ch}
.wc p{color:var(--dim);margin:.6em 0 0;max-width:46ch}
@media (max-width:900px){.who-grid{grid-template-columns:1fr}.wc.main{grid-row:auto}.wc.main .wpic{height:auto;aspect-ratio:16/10}}

/* techno motion (review 8918): headings rise word by word out of a mask, eyebrows decode, sections enter in 3D,
   big pictures drift with the scroll. All of it off under prefers-reduced-motion. */
.rv.split{opacity:1;transform:none}
.split .w{display:inline-block;overflow:hidden;vertical-align:top;padding-bottom:.1em;margin-bottom:-.1em}
.split .w>span{display:inline-block;transform:translateY(110%) rotate(4deg);transform-origin:0 100%;transition:transform 1s cubic-bezier(.2,.8,.1,1) calc(var(--d,0s) + var(--i) * 55ms)}
.split.in .w>span{transform:none}
.k.dec{font-variant-numeric:tabular-nums}
@supports (animation-timeline: view()){
  .scr.black,.who,.logos{animation:enter3d linear both;animation-timeline:view();animation-range:entry 0% entry 45%}
  .photo .pic img,.phero .pic.full img{animation:drift3d linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
  .hero-bg img{animation:towerIn 2.4s var(--ease) forwards}
}
@keyframes enter3d{from{transform:perspective(1400px) rotateX(14deg) scale(.97);opacity:.3}to{transform:none;opacity:1}}
.scr.black,.who,.logos{transform-origin:50% 0}
@keyframes drift3d{from{transform:scale(1.16) translateY(-4%)}to{transform:scale(1.16) translateY(4%)}}
@media (prefers-reduced-motion:reduce){
  .split .w>span{transform:none;transition:none}
  .scr.black,.who,.logos,.photo .pic img,.phero .pic.full img{animation:none!important}
  .wpic img,.wpic video,.wpic .mini-note{transform:none;opacity:1;transition:none}.wpic .scan{display:none}
}
/* a two-column text block keeps a readable measure: no staircase of one word per line (rule §6a) */
.dots-bg .duo{grid-template-columns:minmax(360px,1.05fr) 1fr}
.dots-bg .duo h2{font-size:clamp(30px,3.3vw,52px)}
.duo .txt h2{min-width:min(100%,12em)}
/* a labelled sub-group inside a menu panel (Field pilot · Bangkok) */
.pl .sep{grid-column:1/-1;margin:8px 14px 0;padding-top:14px;border-top:1px solid #222;font:600 10.5px var(--m);letter-spacing:.1em;text-transform:uppercase;color:var(--fnt)}
.pl{grid-template-columns:1fr 1fr;align-content:start}
@media (max-width:900px){.pl .sep{margin:6px 0 0}}
/* who it's for: six segments (sitemap §2) */
.who-grid{grid-template-columns:1.3fr 1fr 1fr;grid-template-rows:auto auto auto}
.wc.main{grid-row:span 2}
.wc.wide{grid-column:1/-1;display:grid;grid-template-columns:1.3fr 2fr;gap:clamp(20px,3vw,48px);align-items:center}
.wc.wide .wpic{margin:0;aspect-ratio:16/7}
.who-grid .wc:not(.main):not(.wide) h3{font-size:clamp(20px,1.7vw,26px)}
.wc .k i{color:var(--dim);font-style:normal}
@media (max-width:900px){.who-grid{grid-template-columns:1fr}.wc.wide{grid-template-columns:1fr}}
/* three ways to start */
.ways{display:grid;gap:10px;margin-top:28px}
.way{display:block;padding:16px 18px;border:1px solid #333;background:rgba(8,8,8,.72);backdrop-filter:blur(8px);border-radius:4px;transition:border-color .3s,background .3s,transform .4s var(--ease)}
.way b{display:flex;justify-content:space-between;font-weight:500;font-size:19px;color:#fff}
.way b:after{content:"→";color:var(--t);transition:transform .3s var(--ease)}
.way span{display:block;color:var(--dim);font-size:15px;margin-top:4px}
.way:hover{border-color:var(--t);background:rgba(12,22,19,.85);transform:translateX(4px)}.way:hover b:after{transform:translateX(4px)}
.way:first-child{border-color:rgba(33,221,167,.6)}
.start3 .txt{max-width:min(560px,44vw)}
@media (max-width:900px){.start3 .txt{max-width:none}}
/* the week's pill in the hero */
.week{display:inline-flex;align-items:center;gap:9px;margin-bottom:22px;padding:7px 14px 7px 12px;border:1px solid rgba(33,221,167,.5);border-radius:20px;background:rgba(8,8,8,.6);font:500 13px var(--f);color:#dcdcdc;transition:background .3s}
.week i{width:7px;height:7px;border-radius:50%;background:var(--t);animation:blink 1.4s infinite}
.week:after{content:"→";color:var(--t)}
.week:hover{background:rgba(33,221,167,.12)}
html{overflow-x:clip}
/* sign-up code (build-site.py SIGNUP_CODE): printed on every sign-up button while people have to type it */
.signup-code .btn[href^="https://app.symphoria.ai/auth/register"]::after{content:"code: " var(--code);margin-left:4px;padding:2px 7px;border-radius:3px;font:600 11px var(--m);letter-spacing:.04em;background:rgba(4,20,14,.16);text-transform:none}
.signup-code .btn.g[href^="https://app.symphoria.ai/auth/register"]::after{background:rgba(33,221,167,.12);color:var(--t)}
.signup-code .way[href^="https://app.symphoria.ai/auth/register"] span::after{content:" Sign-up code: " var(--code) ".";color:var(--t);font-family:var(--m)}
.signup-code .pr-plan[href^="https://app.symphoria.ai/auth/register"]::after{content:"Sign-up code: " var(--code);display:block;margin-top:10px;font:600 11px var(--m);color:var(--t)}

/* light version for phones and touch screens (review 9012, Android): no scroll-driven 3D or parallax, the pinned scene
   as plain blocks, the whole graph visible, posters instead of video and of the live Board, one canvas (the footer) */
.light .scr.black,.light .who,.light .logos,.light .photo .pic img,.light .phero .pic.full img{animation:none!important;transform:none!important}
.light .pin{height:auto!important}
.light .pin .stick{position:static;height:auto;display:block;padding:72px var(--gut) 24px;overflow:visible}
.light .pin .steps{height:auto;display:grid;gap:28px;margin-top:24px}
.light .pin .step{position:static;opacity:1;transform:none;pointer-events:auto}
.light .pin .step h2{font-size:clamp(26px,7vw,34px)}
.light .pin .panel .g svg{width:100%;margin:0}
.light .pin .over{display:none}
.light .pin .prog{display:none}
.light .dots-bg .dotfield{display:none}
.light .card.big .pic img{animation:none}
.light .card .ui{transform:none}
.light .live{background:url(board-loop-poster.webp) center/cover}
.light .live iframe{display:none}
.light .ent.landed{animation:none}
/* review 9020 (Android): a backdrop-filter on the header makes it the containing block of the fixed menu, which then
   shrank to the header's height after any scroll. Phones: a solid header, no filter; the menu panels in one column. */
@media (max-width:900px){
  .top,.top.solid{backdrop-filter:none;-webkit-backdrop-filter:none}
  .top.solid{background:rgba(8,8,8,.98)}
  .top:has(.menu.open){background:var(--bg)}
  .menu{height:calc(100dvh - 64px);bottom:auto}
  .pl{grid-template-columns:1fr}
}

/* the old site's pages (privacy, terms, constitution, careers) carried over as they are, set as a readable document */
.doc{max-width:74ch;margin:0 auto;padding:140px var(--gut) 100px;font-size:18px;line-height:1.65;color:#d6d6d6}
.doc h1{font-size:clamp(40px,6vw,76px);line-height:1.02;margin:14px 0 18px;color:var(--tx)}
.doc h2{font-size:clamp(24px,2.6vw,34px);line-height:1.15;margin:56px 0 14px;color:var(--tx);font-weight:400}
.doc h3{font-size:21px;margin:34px 0 8px;color:var(--tx);font-weight:500;letter-spacing:-.01em}
.doc h4{font:600 12px/1.3 var(--f);letter-spacing:.1em;text-transform:uppercase;color:var(--t);margin:28px 0 6px}
.doc p{margin:0 0 1em}
.doc ul,.doc ol{margin:0 0 1.2em;padding-left:1.2em}.doc li{margin:.45em 0}
.doc li::marker{color:var(--t)}
.doc a:not(.btn):not(.more){color:var(--tx);box-shadow:inset 0 -1px var(--t)}
.doc strong,.doc b{color:var(--tx);font-weight:500}
.doc .lab{font:600 11px/1.3 var(--m);letter-spacing:.08em;text-transform:uppercase;color:var(--fnt);margin:64px 0 10px;padding-top:28px;border-top:1px solid var(--line)}
.doc .apply{margin:22px 0 0}
.doc[lang=ru]{hyphens:auto}
footer .fine a{display:inline;padding:0;color:inherit;box-shadow:inset 0 -1px #333}
footer .fine a:hover{color:var(--tx)}