/* =====================================================================
   موجة تحول · TransWave — "The Admiralty Chart" (preview v2)
   Layout: RTL. An engraved sea chart: hairline isobaths, dashed sounding
   rings, engraved-metal gold. Lines, rows and frames, not cards.
   ===================================================================== */
:root{
  --abyss:#071019; --ink:#0B1722; --ink-2:#13263A; --ink-3:#1B3550;
  --sand:#F5F1E9; --pearl:#EDE6DA; --paper:#FBF8F2;
  --text:#14212C; --muted:#56636E; --on:#ECE6DA; --on-2:#9FB1BE;
  --gold:#C9AE7C; --gold-l:#E7D5AE; --bronze:#A8702F; --bronze-t:#8C5A1F;
  --steel:#4E93AD; --ice:#9ACFE0; --copper:#D4873A; --ok:#2F8A63; --warn:#B9661C;
  --line-l:rgba(140,90,31,.22); --line-d:rgba(231,213,174,.14);
  --f:"IBM Plex Sans Arabic","Thmanyah Sans","Noto Sans Arabic",Tahoma,sans-serif;
  --f-lat:"Cinzel","Trajan Pro",Georgia,serif;
  --wrap:1240px; --ease:cubic-bezier(.22,.7,.18,1);
  color-scheme:light;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--sand);color:var(--text);font-family:var(--f);font-size:17px;line-height:1.85;font-weight:400;overflow-x:hidden;text-rendering:optimizeLegibility}
img{max-width:100%;height:auto;display:block}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer;background:none;border:0;padding:0}
h1,h2,h3,h4{margin:0;line-height:1.25;text-wrap:balance;font-weight:600}
p{margin:0}
:focus-visible{outline:2px solid var(--steel);outline-offset:3px;border-radius:2px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip:focus{position:fixed;top:10px;inset-inline-start:10px;z-index:99;width:auto;height:auto;clip:auto;background:var(--gold);color:var(--ink);padding:8px 14px}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-left:max(20px,env(safe-area-inset-left,0px));padding-right:max(20px,env(safe-area-inset-right,0px))}
.ltr{direction:ltr;unicode-bidi:isolate;display:inline-block}
.lat{font-family:var(--f-lat);font-weight:500;letter-spacing:.24em;font-size:12px}
.dark{background:var(--ink);color:var(--on)}
.abyss{background:var(--abyss);color:var(--on)}
.pearl{background:var(--pearl)}
.paper{background:var(--paper)}
section{position:relative}
.pad{padding-block:clamp(84px,11vw,150px)}

/* ---------- isobath backgrounds ---------- */
.iso{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.iso path{stroke:rgba(78,147,173,.22);stroke-width:1;vector-effect:non-scaling-stroke}
.iso.l path{stroke:rgba(140,90,31,.13)}
.iso.faint path{stroke:rgba(78,147,173,.12)}
.z{position:relative;z-index:1}

/* ---------- engraved headings + chart annotation ---------- */
.anno{display:flex;align-items:center;gap:12px;margin-bottom:22px;color:var(--bronze-t)}
.dark .anno,.abyss .anno{color:var(--gold)}
.anno .lat{white-space:nowrap}
.anno i{display:block;height:1px;width:64px;background:currentColor;opacity:.6;transform-origin:right;transform:rotate(-32deg) scaleX(1)}
.h2{font-size:clamp(30px,3.6vw,50px);font-weight:500;letter-spacing:-.005em}
.h2 b,.gw{font-weight:600;background:linear-gradient(100deg,var(--bronze) 0%,var(--bronze) 40%,#E9D3A2 50%,var(--bronze) 60%,var(--bronze) 100%);background-size:300% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent}
.dark .h2 b,.abyss .h2 b,.dark .gw,.abyss .gw{background-image:linear-gradient(100deg,var(--gold) 0%,var(--gold) 40%,#FFF4D8 50%,var(--gold) 60%,var(--gold) 100%)}
.sheen{animation:sheen 1.6s ease-in-out .3s 1 both}
@keyframes sheen{from{background-position:100% 0}to{background-position:0% 0}}
.lede{font-size:clamp(17px,1.5vw,19.5px);color:var(--muted);max-width:60ch;line-height:1.9}
.dark .lede,.abyss .lede{color:var(--on-2)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:52px;padding:0 28px;border-radius:999px;font-weight:600;font-size:16px;transition:background .3s,color .3s,border-color .3s,transform .3s var(--ease)}
.btn svg{width:18px;height:18px;flex:none}
.btn-gold{background:var(--gold);color:var(--abyss)}
.btn-gold:hover{background:var(--gold-l);transform:translateY(-2px)}
.btn-line{border:1px solid currentColor}
.btn-line:hover{background:rgba(201,174,124,.1)}
.btn-ink{background:var(--ink);color:var(--gold-l)}
.btn-ink:hover{background:var(--ink-3)}
.tlink{display:inline-flex;align-items:center;gap:10px;font-weight:600;color:var(--bronze-t);border-bottom:1px solid currentColor;padding-bottom:3px}
.dark .tlink,.abyss .tlink{color:var(--gold)}
.tlink svg{width:16px;height:16px;transition:transform .3s var(--ease)}
.tlink:hover svg{transform:translateX(-5px)}
.glyph{width:30px;height:30px;stroke-width:1.15}

/* ---------- header (nav | centered mark | action) ---------- */
.hdr{position:fixed;inset-inline:0;top:0;z-index:60;padding-top:env(safe-area-inset-top,0px);color:var(--on);transition:background .4s,border-color .4s}
.hdr::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,var(--line-d),transparent);opacity:0;transition:opacity .4s}
.hdr.solid{background:rgba(7,16,25,.92);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.hdr.solid::after{opacity:1}
.hdr-in{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;height:84px}
.nav{display:flex;gap:2px;align-items:center}
.nav>a,.nav>button{position:relative;padding:8px 13px;font-size:15px;font-weight:500;color:var(--on);opacity:.82;transition:opacity .2s;display:inline-flex;gap:6px;align-items:center}
.nav>a::after,.nav>button::after{content:"";position:absolute;inset-inline:13px;bottom:2px;height:1px;background:var(--gold);transform:scaleX(0);transform-origin:right;transition:transform .35s var(--ease)}
.nav>a:hover,.nav>button:hover,.nav [aria-current]{opacity:1}
.nav>a:hover::after,.nav>button:hover::after,.nav [aria-current]::after,.nav>button[aria-expanded="true"]::after{transform:scaleX(1)}
.nav>button svg{width:13px;height:13px;transition:transform .3s}
.nav>button[aria-expanded="true"] svg{transform:rotate(180deg)}
.mark{display:flex;flex-direction:column;align-items:center;gap:2px;color:var(--gold-l)}
.mark img{height:34px;width:auto}
.mark b{font-size:14px;font-weight:600;letter-spacing:.02em;line-height:1}
.hdr-act{display:flex;justify-content:flex-end;align-items:center;gap:14px}
.hdr-act .btn{min-height:42px;padding:0 20px;font-size:14.5px}
.burger{display:none;width:44px;height:44px;place-items:center;border:1px solid var(--line-d);border-radius:999px;color:var(--on)}
.burger svg{width:20px;height:20px}
.mega{position:absolute;inset-inline:0;top:100%;background:var(--abyss);border-top:1px solid var(--line-d);border-bottom:1px solid var(--line-d);opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .3s,transform .3s,visibility .3s}
.mega.open{opacity:1;visibility:visible;transform:none}
.mega-in{display:grid;grid-template-columns:repeat(5,1fr);padding-block:30px 34px}
.mega a{display:grid;gap:8px;padding:6px 22px;border-inline-start:1px solid var(--line-d);color:var(--on);transition:background .3s}
.mega a:first-child{border-inline-start:0}
.mega a:hover{background:rgba(201,174,124,.06)}
.mega a svg{color:var(--c,var(--gold))}
.mega .lat{color:var(--c,var(--gold));font-size:11px}
.mega b{font-size:16px;font-weight:600}
.mega small{font-size:13px;color:var(--on-2);line-height:1.6}
.mega-all{grid-column:1/-1;margin-top:20px;padding-top:16px;border-top:1px solid var(--line-d);font-size:14px;color:var(--gold)}
.mob{position:fixed;inset:0;z-index:70;background:var(--abyss);color:var(--on);padding:calc(env(safe-area-inset-top,0px) + 90px) max(24px,env(safe-area-inset-right,0px)) 30px max(24px,env(safe-area-inset-left,0px));display:flex;flex-direction:column;overflow:auto;clip-path:circle(0% at 30px 40px);visibility:hidden;transition:clip-path .6s var(--ease),visibility .6s}
.mob.open{clip-path:circle(150% at 30px 40px);visibility:visible}
.mob a{font-size:24px;font-weight:500;padding:12px 0;border-bottom:1px solid var(--line-d)}
.mob .sub{display:grid;padding-inline-start:16px}
.mob .sub a{font-size:16px;color:var(--on-2)}
.mob .btn{margin-top:24px;border-bottom:0;font-size:16px}
.mob-x{position:absolute;top:calc(env(safe-area-inset-top,0px) + 20px);inset-inline-end:max(20px,env(safe-area-inset-right,0px));width:44px;height:44px;border:1px solid var(--line-d);border-radius:999px;display:grid;place-items:center}
.mob-x svg{width:20px;height:20px}

/* ---------- scroll compass ---------- */
.scomp{position:fixed;inset-inline-end:max(18px,env(safe-area-inset-right,0px));bottom:calc(18px + env(safe-area-inset-bottom,0px));z-index:50;width:52px;height:52px;border-radius:50%;background:rgba(7,16,25,.86);display:grid;place-items:center;color:var(--gold);opacity:0;transform:scale(.8);transition:opacity .4s,transform .4s}
.scomp.on{opacity:1;transform:none}
.scomp svg{position:absolute;inset:0;width:100%;height:100%}
.scomp .trk{fill:none;stroke:rgba(231,213,174,.2);stroke-width:1.5;stroke-dasharray:2 4}
.scomp .prg{fill:none;stroke:var(--gold);stroke-width:2;stroke-dasharray:1;stroke-dashoffset:1;transform:rotate(-90deg);transform-origin:center}
.scomp .ndl{width:16px;height:16px;transition:transform .3s}

/* ---------- HOME HERO: the figurehead ---------- */
.hero{min-height:max(680px,100svh);background:radial-gradient(70% 60% at 50% 46%,#0E2235 0%,var(--abyss) 70%);color:var(--on);overflow:hidden;display:grid;grid-template-rows:1fr auto;padding-top:calc(84px + env(safe-area-inset-top,0px))}
.hero .iso path{stroke:rgba(78,147,173,.2)}
.hero-c{position:relative;z-index:1;display:grid;justify-items:center;text-align:center;align-content:center;padding-block:10px 20px}
.coord{color:var(--gold);opacity:.85;margin-bottom:10px;min-height:18px}
.fig{position:relative;width:min(560px,82vw);aspect-ratio:1.55;display:grid;place-items:center}
.rings{position:absolute;left:50%;top:50%;width:min(720px,108vw);aspect-ratio:1;transform:translate(-50%,-50%);pointer-events:none}
.rings svg{width:100%;height:100%;overflow:visible}
.rings circle{fill:none;transform-origin:center;transform-box:fill-box}
.rings .r1{stroke:rgba(201,174,124,.45);stroke-dasharray:2 7;animation:spin 120s linear infinite}
.rings .r2{stroke:rgba(154,207,224,.32);stroke-dasharray:1 5;animation:spin 180s linear infinite reverse}
.rings .r3{stroke:rgba(212,135,58,.35);stroke-dasharray:14 10;animation:spin 240s linear infinite}
.rings .tick{stroke:rgba(201,174,124,.5)}
@keyframes spin{to{transform:rotate(360deg)}}
.fig .horse{position:absolute;inset:0;width:100%;height:100%}
.fig .horse path{stroke:var(--gold);stroke-width:1.1;vector-effect:non-scaling-stroke}
.fig img{position:relative;width:100%;filter:drop-shadow(0 26px 40px rgba(0,0,0,.55))}
.fig .wl{position:absolute;inset-inline:6%;height:1px;background:linear-gradient(90deg,transparent,var(--ice),transparent);bottom:0;opacity:0}
.hero h1{margin-top:14px;font-size:clamp(46px,7.4vw,104px);font-weight:300;letter-spacing:-.01em;line-height:1.05;color:var(--gold-l)}
.hero h1 b{font-weight:600;color:var(--gold)}
.hero .sub{margin-top:14px;font-size:clamp(19px,2vw,26px);font-weight:300;color:var(--on)}
.hero .sub2{margin-top:6px;font-size:15.5px;color:var(--on-2)}
.hero-foot{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:20px;padding-block:22px 30px;border-top:1px solid var(--line-d)}
.hero-foot .btn{min-height:50px}
.depth{display:flex;align-items:center;gap:12px;color:var(--on-2);font-size:14px}
.depth .dr{width:34px;height:34px;border-radius:50%;border:1px dashed rgba(201,174,124,.6);display:grid;place-items:center;color:var(--gold)}
.depth .dr svg{width:14px;height:14px;animation:bob 2.6s ease-in-out infinite}
@keyframes bob{50%{transform:translateY(4px)}}
.hero-foot .alt{color:var(--on-2);font-size:14.5px}
.hero-foot .alt a{color:var(--gold-l);border-bottom:1px solid var(--line-d)}

/* ---------- LOGBOOK statement ---------- */
.stmt-wrap{min-height:auto}
.stmt{max-width:21ch;margin-inline:auto;text-align:center;font-size:clamp(30px,4.2vw,58px);line-height:1.5;font-weight:300;color:var(--text)}
.stmt .wd{opacity:var(--o,1);transition:opacity .2s linear}
.stmt b{font-weight:600;color:var(--bronze-t);white-space:nowrap}
.stmt .gl{display:inline-block;width:.7em;height:.7em;margin-inline:.12em .05em;vertical-align:-.04em;color:var(--bronze)}
.stmt .gl svg{width:100%;height:100%;stroke-width:1.1}
.stmt-note{margin:40px auto 0;max-width:62ch;text-align:center;color:var(--muted);font-size:16px}
.rose-g{display:grid;grid-template-columns:1fr 1.1fr;gap:clamp(30px,6vw,90px);align-items:center;margin-top:clamp(70px,9vw,120px)}
.rose{position:relative;width:min(380px,80vw);aspect-ratio:1;margin-inline:auto}
.rose svg{width:100%;height:100%;overflow:visible}
.rose .rc{fill:none;stroke:var(--line-l)}
.rose .rd{fill:none;stroke:rgba(140,90,31,.35);stroke-dasharray:2 6}
.rose .needle{transform-origin:200px 200px;transition:transform 1.2s cubic-bezier(.34,1.56,.64,1)}
.rose button{position:absolute;transform:translate(-50%,-50%);font-size:15px;font-weight:600;color:var(--muted);padding:6px 10px;white-space:nowrap;transition:color .3s}
.rose button[aria-pressed="true"]{color:var(--bronze-t)}
.vals{min-height:150px}
.vals .lat{color:var(--bronze-t)}
.vals h3{font-size:clamp(26px,2.8vw,36px);font-weight:500;margin:8px 0 12px}
.vals p{color:var(--muted);font-size:17px;max-width:44ch}
.vm2{display:grid;grid-template-columns:1fr 1fr;margin-top:46px;border-top:1px solid var(--line-l)}
.vm2 div{padding:22px 0 0;padding-inline-end:28px}
.vm2 div+div{border-inline-start:1px solid var(--line-l);padding-inline:28px 0}
.vm2 b{display:block;font-size:14px;color:var(--bronze-t);margin-bottom:6px}
.vm2 p{font-size:16px;color:var(--text);line-height:1.8}

/* ---------- SYSTEMS pinned voyage ---------- */
.sx{background:var(--ink);color:var(--on);overflow:hidden}
.sx .iso path{stroke:rgba(78,147,173,.12)}
.sx-head{position:relative;z-index:1;padding-top:clamp(80px,9vw,120px)}
.sx-panels{position:relative;z-index:1}
.sx-p{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,5vw,80px);align-items:center;padding-block:60px;border-top:1px solid var(--line-d)}
.sx-t .lat{color:var(--c)}
.sx-t h3{font-size:clamp(30px,3.4vw,46px);font-weight:500;margin:10px 0 14px}
.sx-t p{color:var(--on-2);font-size:17px;max-width:46ch}
.sx-t ul{list-style:none;padding:0;margin:22px 0 26px;display:grid;gap:10px}
.sx-t li{display:flex;gap:12px;align-items:baseline;font-size:16px}
.sx-t li::before{content:"";flex:none;width:14px;height:1px;background:var(--c);transform:translateY(-5px)}
.sx-t .stat{display:flex;align-items:baseline;gap:12px;margin-bottom:24px}
.sx-t .stat b{font-family:var(--f-lat);font-size:40px;font-weight:600;color:var(--gold-l);direction:ltr}
.sx-t .stat span{font-size:14.5px;color:var(--on-2)}
.port{position:relative;width:min(520px,100%);aspect-ratio:1;margin-inline:auto;border-radius:50%;display:grid;place-items:center}
.port::before{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed rgba(201,174,124,.45)}
.port::after{content:"";position:absolute;inset:0;border-radius:50%;border:1px solid rgba(201,174,124,.55);box-shadow:inset 0 0 0 10px rgba(201,174,124,.06)}
.port-in{position:absolute;inset:8px;border-radius:50%;overflow:hidden;background:radial-gradient(circle at 50% 40%,#FBF8F2,#E9E1D2);display:grid;place-items:center}
.port-in .demo{width:78%;}
.sx-idx{display:none}
/* pinned (desktop + GSAP) */
.sx.pinned .sx-panels{height:100svh;min-height:640px}
.sx.pinned .sx-p{position:absolute;inset:0;border-top:0;padding-block:110px 70px;max-width:var(--wrap);margin-inline:auto;padding-inline:max(20px,env(safe-area-inset-left,0px))}
.sx.pinned .sx-head{position:absolute;inset-inline:0;top:0;padding-top:96px;pointer-events:none}
.sx.pinned .sx-head .h2{font-size:15px;font-weight:500;color:var(--on-2)}
.sx.pinned .sx-head .anno{margin-bottom:6px}
.sx.pinned .sx-idx{display:flex;position:absolute;z-index:3;inset-inline-start:max(20px,calc((100vw - var(--wrap))/2 + 20px));bottom:34px;align-items:center;gap:18px}
.sx-idx button{position:relative;display:grid;justify-items:center;gap:6px;font-size:12.5px;color:var(--on-2);transition:color .3s}
.sx-idx button i{width:10px;height:10px;border-radius:50%;border:1px solid currentColor;transition:background .3s,transform .3s}
.sx-idx button[aria-selected="true"]{color:var(--gold-l)}
.sx-idx button[aria-selected="true"] i{background:var(--gold);border-color:var(--gold);transform:scale(1.3)}
.sx-idx .bar{position:absolute;inset-inline:5px;top:5px;height:1px;background:var(--line-d);z-index:-1}
.sx-count{position:absolute;inset-inline-end:max(20px,calc((100vw - var(--wrap))/2 + 20px));bottom:30px;z-index:3;font-family:var(--f-lat);color:var(--gold);font-size:13px;letter-spacing:.2em;display:none}
.sx.pinned .sx-count{display:block}

/* ---------- DEMOS (inside portholes and frames) ---------- */
.demo{position:relative;font-size:13.5px;color:var(--text);display:grid;gap:12px}
.demo .t{font-weight:600;font-size:14px}
.demo .s{font-size:12.5px;color:var(--muted)}
.demo .row{display:flex;align-items:center;gap:8px;justify-content:space-between}
.demo .tag{font-size:11.5px;font-weight:600;padding:3px 10px;border-radius:999px;background:rgba(20,33,44,.06);color:var(--muted);white-space:nowrap}
.demo .tag.ok{background:rgba(47,138,99,.12);color:var(--ok)}
.demo .tag.w{background:rgba(185,102,28,.12);color:var(--warn)}
.demo .fx{opacity:0}
.demo.run .fx{animation:fx 9s var(--ease) infinite;animation-delay:var(--d,0s)}
@keyframes fx{0%{opacity:0;transform:translateY(6px)}5%,88%{opacity:1;transform:none}96%,100%{opacity:0}}
/* CMS: routing slip with stamps */
.slip{position:relative;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.letter{background:#fff;border:1px solid #E3DACB;padding:14px 14px 18px;display:grid;gap:7px;box-shadow:0 10px 24px -18px rgba(20,33,44,.6);transform:rotate(1.2deg)}
.letter i{display:block;height:5px;border-radius:3px;background:#D8CFC0}
.letter .hd{display:flex;justify-content:space-between;font-size:10.5px;color:var(--muted)}
.route{display:grid;gap:9px;align-content:start}
.stamp{position:relative;border:1.5px solid var(--c,var(--bronze));color:var(--c,var(--bronze));padding:7px 10px;font-size:12px;font-weight:600;border-radius:3px;display:flex;justify-content:space-between;gap:6px;opacity:0;transform:scale(1.5) rotate(-4deg)}
.stamp small{font-weight:500;opacity:.8}
.demo.run .stamp{animation:stamp 9s cubic-bezier(.3,1.6,.5,1) infinite;animation-delay:var(--d)}
@keyframes stamp{0%{opacity:0;transform:scale(1.5) rotate(-4deg)}4%,88%{opacity:1;transform:scale(1) rotate(-2deg)}96%,100%{opacity:0}}
.stamp.fin{border-color:var(--ok);color:var(--ok);background:rgba(47,138,99,.06)}
/* DMS: archive drawer */
.drawer{position:relative;height:200px}
.fold{position:absolute;inset-inline:0;height:150px;border-radius:4px 4px 2px 2px;background:#E8DFCF;border:1px solid #D7CBB6;box-shadow:0 -6px 14px -12px rgba(20,33,44,.5)}
.fold .tb{position:absolute;top:-14px;height:16px;padding:0 10px;font-size:10.5px;line-height:16px;border-radius:4px 4px 0 0;background:inherit;border:1px solid #D7CBB6;border-bottom:0;color:var(--muted);font-weight:600}
.fold.f1{top:50px;background:#E2D8C6}.fold.f1 .tb{inset-inline-start:8px}
.fold.f2{top:36px;background:#E8DFCF}.fold.f2 .tb{inset-inline-start:90px}
.fold.f3{top:22px;background:#EFE7DA;z-index:2}.fold.f3 .tb{inset-inline-start:172px;color:var(--c);background:#EFE7DA}
.fold.f4{top:8px;background:#F4EEE4}.fold.f4 .tb{inset-inline-start:254px}
.demo.run .fold.f3{animation:lift 9s var(--ease) infinite}
@keyframes lift{0%,8%{transform:none}18%,86%{transform:translateY(-34px)}96%,100%{transform:none}}
.card-doc{position:absolute;inset-inline:18px;top:40px;z-index:3;background:#fff;border:1px solid #E3DACB;padding:12px 14px;display:grid;gap:5px;box-shadow:0 18px 30px -20px rgba(20,33,44,.7);opacity:0}
.demo.run .card-doc{animation:fx 9s var(--ease) infinite;animation-delay:1.6s}
.card-doc .row b{font-size:13px}
.audit{display:flex;gap:8px;align-items:center;font-size:11.5px;color:var(--muted)}
.audit::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--steel)}
/* MMS: horseshoe council */
.council{position:relative;width:100%;aspect-ratio:2/1.05}
.council svg{width:100%;height:100%;overflow:visible}
.council .seat{fill:#F1EADD;stroke:#CDBFA8;stroke-width:1.5}
.demo.run .council .seat{animation:seatY 9s infinite;animation-delay:var(--d)}
.demo.run .council .seat.n{animation-name:seatN}
@keyframes seatY{0%,4%{fill:#F1EADD;stroke:#CDBFA8}8%,88%{fill:var(--c,#8F6F35);stroke:var(--c,#8F6F35)}96%,100%{fill:#F1EADD}}
@keyframes seatN{0%,4%{fill:#F1EADD;stroke:#CDBFA8}8%,88%{fill:var(--copper);stroke:var(--copper)}96%,100%{fill:#F1EADD}}
.council .arc{fill:none;stroke:#E2D7C4;stroke-width:10;stroke-linecap:round}
.council .arc-on{fill:none;stroke:var(--c,#8F6F35);stroke-width:10;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1}
.demo.run .council .arc-on{animation:quor 9s var(--ease) infinite}
@keyframes quor{0%,10%{stroke-dashoffset:1}48%,88%{stroke-dashoffset:.22}100%{stroke-dashoffset:1}}
.council .res{font-family:var(--f);font-weight:700;font-size:20px;fill:var(--text)}
.council .res2{font-family:var(--f);font-size:11px;fill:var(--muted)}
.verdict{justify-self:center;font-weight:700;color:var(--c,#8F6F35);border:1.5px solid currentColor;padding:4px 16px;border-radius:2px;letter-spacing:.04em;opacity:0}
.demo.run .verdict{animation:stamp 9s cubic-bezier(.3,1.6,.5,1) infinite;animation-delay:4.4s}
/* FAM: QR tag */
.tagrow{display:grid;grid-template-columns:118px 1fr;gap:14px;align-items:center}
.atag{position:relative;padding:10px;background:#fff;border:1px solid #E3DACB;border-radius:4px;display:grid;gap:6px;overflow:hidden}
.qr{aspect-ratio:1;background:
 linear-gradient(var(--text),var(--text)) 0 0/28% 28% no-repeat,linear-gradient(var(--text),var(--text)) 100% 0/28% 28% no-repeat,linear-gradient(var(--text),var(--text)) 0 100%/28% 28% no-repeat,
 repeating-conic-gradient(var(--text) 0 25%,transparent 0 50%) 50% 50%/18% 18%;opacity:.86}
.atag small{font-size:10px;text-align:center;color:var(--muted);direction:ltr}
.beam{position:absolute;inset-inline:0;height:2px;top:8%;background:var(--c,#3B7C75);box-shadow:0 0 12px 2px color-mix(in srgb,var(--c,#3B7C75) 55%,transparent);opacity:0}
.demo.run .beam{animation:beam 9s infinite}
@keyframes beam{0%{top:8%;opacity:0}3%{opacity:1}10%{top:84%}17%{top:8%}24%{top:84%;opacity:1}28%,100%{opacity:0}}
.cnt{font-family:var(--f-lat);font-size:30px;font-weight:600;line-height:1}
.cnt small{font-family:var(--f);font-size:13px;color:var(--muted);font-weight:400}
.prog{height:6px;border-radius:999px;background:rgba(20,33,44,.08);overflow:hidden;margin-top:8px}
.prog i{display:block;height:100%;width:14%;background:var(--c,#3B7C75)}
.demo.run .prog i{animation:prog 9s var(--ease) infinite}
@keyframes prog{0%{width:14%}70%,90%{width:99%}100%{width:14%}}
/* VMS: floor plan */
.plan{position:relative;width:100%;aspect-ratio:1.5}
.plan svg{width:100%;height:100%}
.plan .room{fill:#F4EEE4;stroke:#CDBFA8;stroke-width:1.2}
.plan .ok-z{fill:rgba(47,138,99,.1);stroke:var(--ok);stroke-dasharray:4 3}
.plan .no-z{fill:url(#hatch);stroke:#B8573A}
.plan .pathv{fill:none;stroke:var(--c,#B86A24);stroke-width:2;stroke-dasharray:3 4}
.plan .lbl{font-family:var(--f);font-size:10.5px;fill:var(--muted)}
.plan .vis{fill:var(--c,#B86A24);stroke:#fff;stroke-width:2}
.demo.run .plan .vis{animation:walk 9s var(--ease) infinite}
@keyframes walk{0%,6%{transform:translate(0,0)}30%{transform:translate(-120px,0)}50%,62%{transform:translate(-120px,-70px)}74%{transform:translate(-190px,-70px)}86%{transform:translate(-120px,-70px)}100%{transform:translate(0,0)}}
.plan .alert{opacity:0}
.demo.run .plan .alert{animation:alert 9s infinite}
@keyframes alert{0%,68%{opacity:0}72%,80%{opacity:1}84%,100%{opacity:0}}
.timer{display:flex;align-items:center;gap:10px}
.timer svg{width:30px;height:30px;transform:rotate(-90deg)}
.timer .tb{fill:none;stroke:rgba(20,33,44,.1);stroke-width:3}
.timer .tf{fill:none;stroke:var(--c,#B86A24);stroke-width:3;stroke-dasharray:1;stroke-dashoffset:0}
.demo.run .timer .tf{animation:tdrain 9s linear infinite}
@keyframes tdrain{to{stroke-dashoffset:.85}}
@media (prefers-reduced-motion:reduce){.demo .fx,.demo .stamp,.demo .card-doc,.demo .verdict{opacity:1!important;animation:none!important;transform:none!important}}

/* ---------- THE DIVE (OCR) ---------- */
.dive{background:linear-gradient(180deg,var(--abyss) 0%,#0A1E2E 45%,#06121C 100%);color:var(--on);overflow:hidden}
.dive-in{position:relative;z-index:1}
.dive-head{text-align:center;max-width:760px;margin-inline:auto;padding-top:clamp(80px,9vw,120px)}
.dive-head .anno{justify-content:center}
.thread{position:relative;display:flex;flex-wrap:wrap;justify-content:center;gap:12px 22px;margin:44px auto 0;max-width:980px;padding-top:20px}
.thread::before{content:"";position:absolute;inset-inline:6%;top:0;height:1px;background:linear-gradient(90deg,transparent,rgba(231,213,174,.55),transparent)}
.pearl-i{display:flex;align-items:center;gap:9px;font-size:14.5px;color:var(--on)}
.pearl-i i{flex:none;width:14px;height:14px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#fff 0%,#F4EBDD 30%,#D9CBB4 65%,#A9987E 100%);box-shadow:0 0 10px rgba(255,244,216,.45)}
.pearl-i span{color:var(--on-2);font-size:12.5px}
.water{position:relative;margin-top:40px;min-height:620px}
.depths{position:absolute;inset-inline-end:0;top:0;bottom:0;width:120px;display:grid;grid-template-rows:repeat(4,1fr);pointer-events:none}
.depths div{border-top:1px dashed rgba(154,207,224,.25);color:var(--ice);font-size:12px;padding-top:6px;opacity:.75;text-align:left}
.depths div .lat{display:block;font-size:10.5px;letter-spacing:.2em;color:var(--on-2)}
.surface{position:absolute;inset-inline:0;top:0;height:1px;background:linear-gradient(90deg,transparent,var(--ice),transparent);opacity:.6}
.paperdoc{position:relative;width:min(520px,86%);margin:60px auto 0;background:#F3ECDF;color:#2B2318;padding:30px 34px 34px;transform:rotate(-2deg);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);font-size:15.5px;line-height:2}
.paperdoc::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 18%,rgba(139,94,40,.16),transparent 30%),radial-gradient(circle at 20% 85%,rgba(139,94,40,.1),transparent 25%),repeating-linear-gradient(0deg,rgba(0,0,0,.025) 0 1px,transparent 1px 3px);pointer-events:none}
.paperdoc .dl{position:relative;display:block}
.paperdoc .ras{filter:blur(.9px) sepia(.5);opacity:.82;letter-spacing:.01em}
.paperdoc .vec{position:absolute;inset:0;color:#0F2738;clip-path:inset(0 0 0 0);background:linear-gradient(90deg,transparent,rgba(154,207,224,.0))}
.paperdoc .ent{background-image:linear-gradient(var(--bronze),var(--bronze));background-size:0% 2px;background-repeat:no-repeat;background-position:right bottom;padding-bottom:1px}
.paperdoc .ent.on{background-size:100% 2px}
.paperdoc .ttl{font-weight:700;font-size:17px;margin-bottom:6px}
.paperdoc .hand{font-family:"Aref Ruqaa","Noto Naskh Arabic",serif;color:#1F4E79;transform:rotate(-3deg);margin-top:12px;font-size:17px}
.paperdoc .seal{position:absolute;inset-inline-start:26px;bottom:22px;width:78px;height:78px;border-radius:50%;border:2px solid rgba(31,78,121,.55);color:rgba(31,78,121,.65);display:grid;place-items:center;font-size:10px;font-weight:700;text-align:center;line-height:1.3;transform:rotate(-14deg)}
.paperdoc .seal::before{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed currentColor}
.htag{position:absolute;inset-inline-end:-14px;bottom:62px;background:var(--copper);color:#fff;font-size:12px;font-weight:600;padding:3px 10px;border-radius:2px;transform:rotate(3deg)}
.dive-cap{text-align:center;margin:56px auto 0;padding-bottom:clamp(80px,9vw,120px);color:var(--on-2);font-size:17px}
.dive-cap b{color:var(--gold-l);font-weight:500}
.chips3{display:flex;justify-content:center;flex-wrap:wrap;gap:10px 28px;margin-top:18px;font-size:14.5px;color:var(--on)}
.chips3 span{display:inline-flex;align-items:center;gap:8px}
.chips3 span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--gold)}

/* ---------- SOUNDINGS (stats) ---------- */
.snd-field{position:relative;min-height:540px}
.snd{position:absolute;display:grid;gap:4px;max-width:260px}
.snd .plus{color:var(--bronze);font-size:18px;line-height:1}
.snd .num{position:relative;font-family:var(--f-lat);font-weight:600;font-size:clamp(46px,5.4vw,76px);line-height:1;direction:ltr;text-align:right;color:transparent;-webkit-text-stroke:1px var(--bronze)}
.snd .num span{position:absolute;inset:0;color:var(--bronze-t);-webkit-text-stroke:0;clip-path:inset(var(--fill,0%) 0 0 0)}
.snd .u{font-size:17px;font-weight:600}
.snd .src{font-size:12.5px;color:var(--muted);line-height:1.6}
.snd .ring{position:absolute;width:12px;height:12px;border-radius:50%;border:1px solid var(--bronze);inset-inline-end:-26px;top:22px}
.snd .ring::after{content:"";position:absolute;inset:-10px;border-radius:50%;border:1px dashed rgba(140,90,31,.4)}

/* ---------- STORIES teaser ---------- */
.tease{display:grid;grid-template-columns:1.5fr 1fr;gap:clamp(30px,5vw,70px);align-items:start}
.feat-st{position:relative;min-height:420px}
.fs{position:absolute;inset:0;opacity:0;visibility:hidden;transition:opacity .45s,visibility .45s}
.fs.on{position:relative;opacity:1;visibility:visible}
.fs .lg{height:96px;display:flex;align-items:center}
.fs .lg img{max-height:96px;width:auto}
.fs .meta{margin-top:20px;color:var(--bronze-t);font-size:14px;font-weight:600}
.fs h3{font-size:clamp(26px,2.8vw,38px);font-weight:500;margin:8px 0 16px;line-height:1.35}
.fs p{color:var(--muted);max-width:56ch}
.fs dl{display:grid;grid-template-columns:repeat(3,auto);justify-content:start;gap:4px 40px;margin:26px 0 0;padding-top:20px;border-top:1px solid var(--line-l)}
.fs dt{font-size:12.5px;color:var(--muted)}
.fs dd{margin:0;font-weight:600;font-size:15.5px}
.st-list{border-top:1px solid var(--line-l)}
.st-list a{display:grid;grid-template-columns:56px 1fr;gap:4px 16px;align-items:center;padding:18px 4px;border-bottom:1px solid var(--line-l);transition:padding .35s var(--ease),background .35s}
.st-list a .lgs{grid-row:span 2;width:56px;height:56px;display:grid;place-items:center}
.st-list a .lgs img{max-height:46px;width:auto;filter:grayscale(1);opacity:.7;transition:filter .3s,opacity .3s}
.st-list a b{font-size:16px;font-weight:600}
.st-list a small{color:var(--muted);font-size:13.5px}
.st-list a[aria-current="true"],.st-list a:hover{padding-inline-start:14px;background:linear-gradient(270deg,rgba(201,174,124,.16),transparent)}
.st-list a[aria-current="true"] img,.st-list a:hover img{filter:none;opacity:1}

/* ---------- TIDE TABLE (clients) ---------- */
.tt{display:grid;gap:0;border-top:1px solid var(--line-l)}
.tt-r{display:grid;grid-template-columns:190px 1fr;border-bottom:1px solid var(--line-l)}
.tt-r h3{font-size:15px;font-weight:600;padding:26px 0;color:var(--bronze-t)}
.tt-r h3 .lat{display:block;font-size:10.5px;color:var(--muted);margin-top:4px}
.tt-l{display:flex;flex-wrap:wrap}
.cl{position:relative;width:220px;max-width:50%;height:136px;display:grid;place-items:center;gap:2px;padding:14px 16px 10px;overflow:hidden;isolation:isolate}
.cl img{max-height:68px;max-width:80%;width:auto;object-fit:contain;filter:grayscale(1) contrast(1.1);opacity:.75;transition:filter .35s,opacity .35s,transform .35s var(--ease)}
.cl span{font-size:12px;color:var(--muted);text-align:center;line-height:1.4;opacity:0;transform:translateY(4px);transition:opacity .3s,transform .3s}
.cl::before{content:"";position:absolute;left:var(--x,50%);top:var(--y,50%);width:10px;height:10px;margin:-5px 0 0 -5px;border-radius:50%;border:1px dashed var(--bronze);opacity:0;z-index:-1}
.cl:hover img,.cl:focus-visible img{filter:none;opacity:1;transform:scale(1.06)}
.cl:hover span,.cl:focus-visible span{opacity:1;transform:none}
.cl:hover::before{animation:ripple .7s var(--ease) 1}
@keyframes ripple{from{opacity:.9;transform:scale(1)}to{opacity:0;transform:scale(22)}}
@media (hover:none){.cl img{filter:none;opacity:1}.cl span{opacity:1;transform:none}}
.partners{display:flex;align-items:center;gap:clamp(30px,6vw,90px);flex-wrap:wrap;padding-block:30px}
.partners img{height:50px;width:auto}

/* ---------- END (CTA) ---------- */
.end{background:var(--abyss);color:var(--on);overflow:hidden}
.end .horse-bg{position:absolute;inset-inline-start:-8%;top:50%;width:min(1000px,90vw);transform:translateY(-50%);opacity:.32;pointer-events:none}
.end .horse-bg path{stroke:var(--gold);stroke-width:1;vector-effect:non-scaling-stroke}
.end-in{position:relative;z-index:1;max-width:760px;margin-inline-start:auto;padding-block:clamp(110px,13vw,170px)}
.end h2{font-size:clamp(32px,4.4vw,60px);font-weight:300;line-height:1.3}
.end h2 b{font-weight:600;color:var(--gold)}
.end .acts{display:flex;flex-wrap:wrap;align-items:center;gap:18px 30px;margin-top:34px}
.end .direct{display:flex;flex-wrap:wrap;gap:8px 26px;color:var(--on-2);font-size:15px}
.end .direct b{color:var(--on);font-weight:500}

/* ---------- FOOTER (chart legend) ---------- */
.ft{background:#050C13;color:var(--on-2);font-size:14.5px;padding-top:70px}
.ft-g{display:grid;grid-template-columns:1.3fr repeat(3,1fr);gap:40px}
.ft h4{color:var(--on);font-size:14px;font-weight:600;margin-bottom:14px}
.ft ul{list-style:none;margin:0;padding:0;display:grid;gap:8px}
.ft a:hover{color:var(--gold-l)}
.ft-brand img{width:180px;margin-bottom:16px}
.ft-brand p{max-width:34ch;line-height:1.8}
.legend-bar{display:flex;align-items:center;gap:18px;margin-top:50px;padding-block:22px calc(22px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line-d);font-size:12.5px;flex-wrap:wrap;justify-content:space-between}
.scale{display:flex;align-items:center;gap:10px}
.scale i{display:block;width:120px;height:6px;background:repeating-linear-gradient(90deg,var(--gold) 0 30px,transparent 30px 60px);border:1px solid var(--gold);opacity:.7}
.legend-bar .lat{color:var(--gold);font-size:11px}

/* ---------- PAGE HERO (inner) ---------- */
.ph{background:var(--abyss);color:var(--on);overflow:hidden;padding-top:calc(84px + env(safe-area-inset-top,0px))}
.ph-in{position:relative;z-index:1;padding-block:clamp(50px,7vw,100px) clamp(40px,5vw,70px)}
.crumb{display:flex;gap:10px;font-size:13.5px;color:var(--on-2);margin-bottom:26px}
.crumb a:hover{color:var(--gold-l)}
.crumb i{font-style:normal;opacity:.4}
.ph h1{font-size:clamp(40px,6.4vw,92px);font-weight:300;line-height:1.1;max-width:16ch}
.ph h1 b{font-weight:600;color:var(--gold)}
.ph .lede{margin-top:20px}

/* products: strata */
.strata{position:relative;z-index:1;border-top:1px solid var(--line-d)}
.stratum{display:grid;grid-template-columns:90px 1fr auto;gap:20px;align-items:center;padding:24px 0;border-bottom:1px solid var(--line-d);transition:padding .45s var(--ease),background .45s}
.stratum .dp{font-family:var(--f-lat);color:var(--c);font-size:13px;letter-spacing:.15em}
.stratum h2{font-size:clamp(24px,2.8vw,38px);font-weight:400}
.stratum p{color:var(--on-2);font-size:15.5px;margin-top:4px}
.stratum .go{width:48px;height:48px;border-radius:50%;border:1px solid var(--line-d);display:grid;place-items:center;transition:background .3s,color .3s,transform .4s var(--ease)}
.stratum .go svg{width:18px;height:18px}
.stratum .more{grid-column:2/3;display:grid;grid-template-rows:0fr;transition:grid-template-rows .45s var(--ease)}
.stratum .more>div{overflow:hidden}
.stratum .more ul{list-style:none;padding:0;margin:14px 0 0;display:flex;flex-wrap:wrap;gap:6px 22px;font-size:14.5px;color:var(--on)}
.stratum .more li::before{content:"·";color:var(--c);margin-inline-end:8px}
.stratum:hover,.stratum:focus-within{padding-block:34px;background:linear-gradient(270deg,rgba(201,174,124,.06),transparent 70%)}
.stratum:hover .more,.stratum:focus-within .more{grid-template-rows:1fr}
.stratum:hover .go{background:var(--gold);color:var(--abyss);transform:translateX(-6px)}

/* products: voyage */
.voy{background:var(--ink);color:var(--on);overflow:hidden}
.voy-in{position:relative;z-index:1}
.voy-map{position:relative;width:100%;max-width:1200px;margin-inline:auto;aspect-ratio:12/7}
.voy-map svg{width:100%;height:100%;overflow:visible}
.voy .route-bg{fill:none;stroke:rgba(231,213,174,.18);stroke-width:1.5;stroke-dasharray:3 7}
.voy .route{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:6 6}
.voy .port-c{fill:var(--ink);stroke:var(--c);stroke-width:1.5}
.voy .port-d{fill:var(--c)}
.voy .port-r{fill:none;stroke:var(--c);stroke-dasharray:2 4;opacity:.6}
.voy .pl{font-family:var(--f-lat);font-size:12px;letter-spacing:.18em}
.voy .pn{font-family:var(--f);font-size:17px;font-weight:600;fill:var(--on)}
.boat .hull{fill:var(--gold)}
.boat .sail{fill:var(--gold-l)}
.boat .mast{stroke:var(--gold);stroke-width:1.5}
.badge{font-family:var(--f);font-size:12px;font-weight:600}
.notes{position:absolute;inset:0;pointer-events:none}
.note{position:absolute;width:250px;font-size:15px;line-height:1.7;color:var(--on)}
.note b{display:block;color:var(--gold-l);font-weight:600;margin-bottom:2px}
.voy-end{text-align:center;font-size:clamp(20px,2.2vw,28px);font-weight:300;margin-top:20px;color:var(--gold-l)}

/* definition list pricing / security */
.dl2{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;border-top:1px solid var(--line-l)}
.dl2 div{display:grid;grid-template-columns:34px 1fr;gap:4px 14px;padding:24px 0;border-bottom:1px solid var(--line-l)}
.dl2 svg{grid-row:span 2;width:28px;height:28px;color:var(--bronze);stroke-width:1.2}
.dl2 b{font-size:17px;font-weight:600}
.dl2 p{color:var(--muted);font-size:15.5px}
.ecc-line{display:flex;gap:18px;align-items:center;margin-bottom:40px;font-size:clamp(19px,2vw,24px);font-weight:300;max-width:46ch}
.ecc-line svg{flex:none;width:52px;height:52px;color:var(--bronze);stroke-width:1}
.ecc-line b{font-weight:600}

/* ---------- SYSTEM PAGE ---------- */
.spec{background:var(--abyss);color:var(--on);overflow:hidden;padding-top:calc(84px + env(safe-area-inset-top,0px))}
.spec-in{position:relative;z-index:1;padding-top:clamp(40px,6vw,80px)}
.spec .lat{color:var(--c)}
.spec h1{font-size:clamp(46px,8.6vw,132px);font-weight:300;line-height:1.02;letter-spacing:-.015em;margin-top:12px}
.spec h1 b{display:block;font-weight:600;color:var(--gold)}
.spec .promise{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:end;gap:20px 40px;margin-top:26px}
.spec .promise p{font-size:clamp(17px,1.6vw,20px);color:var(--on-2);max-width:56ch}
.spec .promise .acts{display:flex;gap:12px;flex-wrap:wrap}
.frame{position:relative;max-width:1000px;margin:clamp(50px,7vw,90px) auto 0;border:1px solid rgba(201,174,124,.4);padding:8px;background:rgba(231,213,174,.03)}
.frame::before{content:"";position:absolute;inset:3px;border:1px solid rgba(201,174,124,.2);pointer-events:none}
.frame-in{background:var(--paper);display:grid;grid-template-columns:200px 1fr;min-height:420px}
.frame-side{background:#EFE8DC;border-inline-end:1px solid #E1D7C6;padding:18px 14px;display:grid;gap:8px;align-content:start;font-size:13px;color:var(--muted)}
.frame-side b{color:var(--text);font-size:13.5px;margin-bottom:6px}
.frame-side span{padding:7px 10px;border-radius:3px}
.frame-side span.on{background:#fff;color:var(--text);font-weight:600;box-shadow:inset 3px 0 0 var(--c)}
.frame-main{padding:24px 28px;display:grid;place-items:center}
.frame-main .demo{width:min(460px,100%)}
.frame-cap{text-align:center;font-size:12.5px;color:var(--on-2);padding:14px 0 30px}
/* margin notes */
.mg{display:grid;grid-template-columns:1fr 280px;gap:clamp(30px,5vw,70px);align-items:start}
.mg .story{font-size:clamp(20px,2.1vw,27px);font-weight:300;line-height:1.85;max-width:34ch}
.mg .story u{text-decoration:none;background-image:linear-gradient(var(--copper),var(--copper));background-repeat:no-repeat;background-position:right 100%;background-size:0% 2px;transition:background-size .8s var(--ease)}
.mg .story u.on{background-size:100% 2px}
.mg .intro{color:var(--muted);margin-top:26px;max-width:58ch}
.notesc{display:grid;gap:22px;padding-top:12px}
.mnote{position:relative;padding-inline-start:18px;border-inline-start:1px solid var(--copper);font-size:15.5px;line-height:1.65;color:var(--text);opacity:.25;transition:opacity .6s,transform .6s var(--ease);transform:translateX(-8px)}
.mnote.on{opacity:1;transform:none}
.mnote small{display:block;color:var(--warn);font-size:12px;font-weight:600;margin-bottom:2px}
/* capability index */
.cx{display:grid;grid-template-columns:1fr 440px;gap:clamp(30px,5vw,80px);align-items:start}
.cx-list{border-top:1px solid var(--line-l)}
.cx-row{display:grid;grid-template-columns:44px 1fr;gap:2px 16px;padding:22px 6px;border-bottom:1px solid var(--line-l);cursor:default;transition:background .3s,padding .3s var(--ease)}
.cx-row svg{grid-row:span 2;width:32px;height:32px;color:var(--muted);stroke-width:1.15;transition:color .3s}
.cx-row h3{font-size:20px;font-weight:500}
.cx-row p{color:var(--muted);font-size:15px}
.cx-row.on{background:linear-gradient(270deg,rgba(201,174,124,.14),transparent);padding-inline-start:16px}
.cx-row.on svg{color:var(--c)}
.cx-view{position:sticky;top:120px;aspect-ratio:1;border-radius:50%;display:grid;place-items:center;text-align:center}
.cx-view::before{content:"";position:absolute;inset:0;border-radius:50%;border:1px dashed var(--line-l)}
.cx-view::after{content:"";position:absolute;inset:34px;border-radius:50%;border:1px solid var(--line-l)}
.cx-view .in{position:relative;z-index:1;max-width:260px;display:grid;justify-items:center;gap:12px}
.cx-view svg{width:84px;height:84px;color:var(--c);stroke-width:.9}
.cx-view b{font-size:22px;font-weight:600}
.cx-view p{color:var(--muted);font-size:15px}
.cx-view .in>*{transition:opacity .25s,transform .25s}
.cx-view.swap .in>*{opacity:0;transform:translateY(6px)}
/* annotated screen */
.annot{position:relative;max-width:900px;margin-inline:auto}
.annot .frame{margin-top:0}
.pin{position:absolute;width:34px;height:34px;margin:-17px 0 0 -17px;border-radius:50%;display:grid;place-items:center;color:var(--abyss);font-family:var(--f-lat);font-weight:600;font-size:13px;background:var(--gold);z-index:2}
.pin::before{content:"";position:absolute;inset:-8px;border-radius:50%;border:1px dashed var(--gold)}
.pin.pulse::after{content:"";position:absolute;inset:0;border-radius:50%;border:2px solid var(--gold);animation:pulse1 1s var(--ease) 1}
@keyframes pulse1{to{transform:scale(1.9);opacity:0}}
.pin .bub{position:absolute;bottom:calc(100% + 16px);inset-inline-start:50%;transform:translateX(50%) translateY(6px);width:270px;background:var(--abyss);color:var(--on);border:1px solid var(--line-d);padding:14px 16px;font-family:var(--f);font-weight:400;font-size:14px;line-height:1.7;text-align:start;opacity:0;visibility:hidden;transition:opacity .3s,transform .3s,visibility .3s}
.pin .bub b{display:block;color:var(--gold-l);font-weight:600;margin-bottom:4px;font-size:15px}
.pin:hover .bub,.pin:focus-visible .bub,.pin[aria-expanded="true"] .bub{opacity:1;visibility:visible;transform:translateX(50%)}
.ai-list{display:none}
/* tide gauge */
.gauge-g{display:grid;grid-template-columns:auto 1fr;gap:clamp(40px,7vw,110px);align-items:center}
.gauge{position:relative;width:150px;height:380px;border:1px solid var(--line-l);border-top:0;background:repeating-linear-gradient(0deg,transparent 0 37px,var(--line-l) 37px 38px)}
.gauge .lvl{position:absolute;inset-inline:0;bottom:0;height:var(--h,100%);background:linear-gradient(180deg,rgba(78,147,173,.55),rgba(44,107,132,.75));transition:height 1.8s cubic-bezier(.65,0,.35,1)}
.gauge .lvl::before{content:"";position:absolute;inset-inline:0;top:-6px;height:12px;background:radial-gradient(ellipse at 50% 100%,rgba(154,207,224,.8),transparent 70%)}
.gauge .lv{position:absolute;inset-inline-start:calc(100% + 14px);width:max-content;font-size:13.5px;display:flex;align-items:center;gap:8px;transform:translateY(50%)}
.gauge .lv::before{content:"";width:22px;height:1px;background:currentColor}
.gauge .lv.b{color:var(--muted)}
.gauge .lv.a{color:var(--steel);font-weight:600}
.gauge-t .big{font-family:var(--f-lat);font-weight:600;font-size:clamp(70px,10vw,140px);line-height:.95;color:var(--bronze-t);direction:ltr;text-align:right}
.gauge-t h3{font-size:clamp(22px,2.4vw,32px);font-weight:500;margin-top:10px}
.gauge-t p{color:var(--muted);margin-top:10px;max-width:46ch}
.gauge-t ul{list-style:none;padding:0;margin:22px 0 0;display:grid;gap:8px;font-size:15px}
.gauge-t li::before{content:"";display:inline-block;width:14px;height:1px;background:var(--bronze);margin-inline-end:10px;vertical-align:middle}
/* integration sentence */
.intg{font-size:clamp(24px,3vw,40px);font-weight:300;line-height:1.9;max-width:28ch}
.chip{display:inline-flex;align-items:center;gap:8px;padding:0 14px;margin:0 2px;border:1px dashed var(--bronze);border-radius:999px;font-size:.6em;font-weight:600;line-height:2;vertical-align:.25em;color:var(--bronze-t);transition:border-style .2s,background .2s}
.chip:hover{border-style:solid;background:rgba(201,174,124,.12)}
.chip i{font-family:var(--f-lat);font-style:normal;font-size:.8em;letter-spacing:.1em;color:var(--c,var(--bronze))}
/* uses */
.uses{display:grid;grid-template-columns:1.3fr 1fr;gap:clamp(30px,6vw,90px);align-items:center}
.uses .big-lg{height:110px;display:flex;align-items:center;margin-bottom:22px}
.uses .big-lg img{max-height:110px;width:auto}
.uses blockquote{margin:0;font-size:clamp(20px,2.2vw,28px);font-weight:300;line-height:1.75;max-width:40ch}
.uses .who{margin-top:16px;color:var(--bronze-t);font-weight:600;font-size:15px}
.uses .others{display:flex;flex-wrap:wrap;gap:28px;align-items:center}
.uses .others img{height:62px;width:auto}
/* FAQ */
.faq{max-width:780px;margin-inline:auto}
.faq details{border-bottom:1px solid var(--line-l)}
.faq summary{list-style:none;display:flex;justify-content:space-between;align-items:center;gap:20px;padding:22px 0;font-size:18px;font-weight:500;cursor:pointer}
.faq summary::-webkit-details-marker{display:none}
.faq .tg{flex:none;width:22px;height:22px;border-radius:50%;border:1px dashed var(--bronze);position:relative;transition:transform .35s var(--ease),border-style .2s,background .2s}
.faq .tg::before,.faq .tg::after{content:"";position:absolute;left:50%;top:50%;width:9px;height:1px;background:var(--bronze);transform:translate(-50%,-50%)}
.faq .tg::after{transform:translate(-50%,-50%) rotate(90deg)}
.faq details[open] .tg{transform:rotate(45deg);border-style:solid;background:rgba(201,174,124,.15)}
.faq .a{padding:0 0 24px;color:var(--muted);font-size:16px;line-height:1.95;max-width:66ch}
.faq-help{text-align:center;margin-top:30px;color:var(--muted);font-size:15px}

/* ---------- SUCCESS logbook ---------- */
.ftog{display:flex;flex-wrap:wrap;gap:6px 26px;margin-bottom:34px;position:relative}
.ftog button{position:relative;padding:6px 0;font-size:16px;color:var(--muted);transition:color .3s}
.ftog button::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1.5px;background:var(--bronze);transform:scaleX(0);transition:transform .35s var(--ease);transform-origin:right}
.ftog button[aria-pressed="true"]{color:var(--text);font-weight:600}
.ftog button[aria-pressed="true"]::after{transform:scaleX(1)}
.logb{border-top:1px solid var(--line-l)}
.lr{border-bottom:1px solid var(--line-l)}
.lr[hidden]{display:none}
.lr-h{width:100%;display:grid;grid-template-columns:120px 1.3fr 1fr 1.4fr 40px;gap:24px;align-items:center;padding:28px 6px;text-align:start;position:relative;isolation:isolate}
.lr-h::before{content:"";position:absolute;inset:0;z-index:-1;background:rgba(237,230,218,.7);clip-path:inset(100% 0 0 0);transition:clip-path .45s var(--ease)}
.lr-h:hover::before,.lr[open-row] .lr-h::before{clip-path:inset(0 0 0 0)}
.lr-h .lg{height:72px;display:flex;align-items:center;justify-content:center}
.lr-h .lg img{max-height:72px;max-width:110px;width:auto}
.lr-h b{font-size:18px;font-weight:600;line-height:1.5}
.lr-h small{display:block;color:var(--muted);font-size:13.5px;font-weight:400;margin-top:2px}
.lr-h .sys{font-size:14px;color:var(--bronze-t)}
.lr-h .out{font-size:15.5px;color:var(--text)}
.lr-h .ex{width:36px;height:36px;border-radius:50%;border:1px solid var(--line-l);display:grid;place-items:center;transition:transform .35s var(--ease),background .3s}
.lr-h .ex svg{width:16px;height:16px}
.lr-h[aria-expanded="true"] .ex{transform:rotate(45deg);background:var(--ink);color:var(--gold);border-color:var(--ink)}
.lr-b{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.lr-b>div{overflow:hidden}
.lr-h[aria-expanded="true"]+.lr-b{grid-template-rows:1fr}
.voyage3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;margin:0 0 30px;padding-inline-start:146px}
.voyage3 div{padding:6px 24px 6px 0;border-inline-start:1px dashed var(--line-l);padding-inline-start:24px}
.voyage3 div:first-child{border-inline-start:0;padding-inline-start:0}
.voyage3 .k{font-family:var(--f-lat);font-size:11px;letter-spacing:.2em;color:var(--bronze)}
.voyage3 h4{font-size:15.5px;margin:4px 0 6px}
.voyage3 p{font-size:15px;color:var(--muted);line-height:1.85}
.voyage3 .kp{font-family:var(--f-lat);font-size:34px;color:var(--steel);font-weight:600;direction:ltr;text-align:right}

/* ---------- BLOG ---------- */
.bfeat{display:grid;grid-template-columns:1.25fr 1fr;gap:0;border:1px solid var(--line-l);background:var(--paper)}
.plate{position:relative;min-height:340px;background:var(--abyss);overflow:hidden}
.plate .iso path{stroke:var(--c,rgba(201,174,124,.5));opacity:.55}
.plate .lat{position:absolute;bottom:18px;inset-inline-start:20px;color:var(--gold-l);font-size:10.5px}
.bfeat .tx{padding:clamp(26px,3.6vw,46px);display:grid;gap:14px;align-content:center}
.bfeat h2{font-size:clamp(24px,2.6vw,34px);font-weight:500;line-height:1.45}
.bfeat p{color:var(--muted)}
.pm{display:flex;gap:6px 18px;flex-wrap:wrap;color:var(--muted);font-size:13.5px}
.pm .lat{font-size:11px;color:var(--bronze-t)}
.btools{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin:50px 0 10px}
.bsearch{display:flex;align-items:center;gap:10px;border-bottom:1px solid var(--line-l);padding:8px 2px;min-width:min(300px,100%)}
.bsearch svg{width:17px;height:17px;color:var(--muted)}
.bsearch input{border:0;background:none;outline:0;font:inherit;font-size:15.5px;flex:1;min-width:0;color:var(--text)}
.blist{display:grid;grid-template-columns:1fr 1fr;gap:0 60px;border-top:1px solid var(--line-l)}
.bi{display:grid;grid-template-columns:120px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line-l);align-items:start;transition:padding .35s var(--ease)}
.bi:hover{padding-inline-start:10px}
.bi .plate{min-height:0;aspect-ratio:1;border-radius:50%}
.bi h3{font-size:20px;font-weight:500;line-height:1.5;margin:6px 0 8px}
.bi p{color:var(--muted);font-size:15px;line-height:1.8}
.bi.wide{grid-column:1/-1;grid-template-columns:260px 1fr}
.bi.wide .plate{border-radius:0;aspect-ratio:auto;min-height:170px}
.bi.wide h3{font-size:26px}
.bi[hidden]{display:none}
.note-s{font-size:13.5px;color:var(--steel);display:flex;align-items:center;gap:8px;margin-bottom:20px}
.note-s svg{width:16px;height:16px}

/* ---------- CONTACT letter ---------- */
.ct-g{display:grid;grid-template-columns:1.35fr .65fr;gap:clamp(30px,5vw,70px);align-items:start}
.letterf{position:relative;background:var(--paper);border:1px solid var(--line-l);padding:clamp(28px,4.4vw,60px);overflow:hidden;transform-origin:top center}
.letterf .wm{position:absolute;inset-inline-start:-40px;bottom:-30px;width:420px;opacity:.07;pointer-events:none}
.letterf .wm path{stroke:var(--bronze);stroke-width:2}
.letterf .salut{font-size:15px;color:var(--muted);margin-bottom:6px}
.madlib{position:relative;font-size:clamp(20px,2.2vw,28px);font-weight:300;line-height:2.4}
.madlib .f{position:relative;display:inline-block;vertical-align:baseline}
.madlib input,.madlib select{font:inherit;font-weight:500;font-size:inherit;color:var(--bronze-t);background:transparent;border:0;border-bottom:1.5px dashed var(--bronze);padding:0 4px;outline:0;min-width:5ch;border-radius:0;appearance:none;-webkit-appearance:none}
.madlib select{padding-inline-end:22px;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238C5A1F' stroke-width='2'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") left 2px center/14px no-repeat;cursor:pointer}
.madlib input:focus,.madlib select:focus{border-bottom-style:solid;border-bottom-color:var(--steel);background:rgba(78,147,173,.06)}
.madlib input::placeholder{color:rgba(140,90,31,.45);font-weight:400}
.madlib .bad input{border-bottom-color:#B8573A;color:#B8573A}
.madlib #lName{width:8ch}.madlib #lOrg{width:12ch}.madlib #lPhone{width:11ch}.madlib #lMail{width:15ch}
.l-extra{margin-top:24px;display:grid;gap:8px}
.l-extra label{font-size:14px;color:var(--muted)}
.l-extra textarea{font:inherit;font-size:16px;background:transparent;border:0;border-bottom:1px solid var(--line-l);min-height:70px;resize:vertical;outline:0;color:var(--text);line-height:1.8}
.l-extra textarea:focus{border-bottom-color:var(--steel)}
.l-send{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:16px;margin-top:30px}
.l-send small{color:var(--muted);font-size:13px}
.l-err{color:#B8573A;font-size:14px;min-height:1.5em;margin-top:10px}
.waxdone{display:none;text-align:center;padding:40px 10px;gap:14px;justify-items:center}
.wax{width:120px;height:120px;border-radius:50%;background:radial-gradient(circle at 35% 30%,#D9A866,#A8702F 55%,#7B4E1D);display:grid;place-items:center;box-shadow:0 10px 30px -10px rgba(123,78,29,.8),inset 0 -6px 12px rgba(0,0,0,.25)}
.wax img{width:70%;filter:brightness(.25) sepia(1) saturate(2) hue-rotate(-10deg);opacity:.7;mix-blend-mode:multiply}
.waxdone b{font-size:22px;font-weight:600}
.waxdone p{color:var(--muted)}
.sent .letter-body{display:none}
.sent .waxdone{display:grid}
.lines{display:grid;gap:26px}
.ln-i small{display:block;color:var(--muted);font-size:13px}
.ln-i .v{display:flex;align-items:center;gap:12px;font-size:clamp(22px,2.4vw,30px);font-weight:500;user-select:all}
.copy{flex:none;font-size:12.5px;padding:4px 10px;border:1px solid var(--line-l);border-radius:999px;color:var(--muted);display:inline-flex;gap:6px;align-items:center;user-select:none}
.copy svg{width:13px;height:13px}
.minichart{position:relative;aspect-ratio:1.3;background:var(--abyss);overflow:hidden;color:var(--on);display:grid;align-content:end;padding:18px}
.minichart .iso path{stroke:rgba(201,174,124,.3)}
.minichart .pinr{position:absolute;left:52%;top:42%;width:12px;height:12px;margin:-6px;border-radius:50%;background:var(--gold)}
.minichart .pinr::before,.minichart .pinr::after{content:"";position:absolute;inset:-14px;border-radius:50%;border:1px dashed var(--gold);animation:spin 30s linear infinite}
.minichart .pinr::after{inset:-30px;border-style:solid;border-color:rgba(201,174,124,.3);animation:none}
.minichart b,.minichart a,.minichart .lat{position:relative}
.minichart .lat{color:var(--gold);font-size:10.5px}
.minichart a{color:var(--gold-l);font-size:14px;display:inline-flex;gap:6px;align-items:center;margin-top:4px}
.minichart a svg{width:14px;height:14px}

/* ---------- tide edge ---------- */
.tide-edge{position:absolute;inset-inline:0;top:-1px;height:70px;z-index:2;pointer-events:none;transform-origin:top;color:var(--from)}
.tide-edge svg{width:100%;height:100%;display:block}
.tide-edge path{fill:currentColor}

/* ---------- responsive ---------- */
@media (max-width:1100px){
  .nav{display:none}
  .burger{display:grid}
  .hdr-in{grid-template-columns:auto 1fr auto}
  .mark{flex-direction:row;gap:10px;grid-column:1;justify-self:start}
  .hdr-act{grid-column:3}
  .hdr-act .btn{display:none}
}
@media (max-width:900px){
  .rose-g,.tease,.cx,.gauge-g,.uses,.ct-g,.bfeat,.mg{grid-template-columns:1fr}
  .sx-p{grid-template-columns:1fr;padding-block:50px}
  .port{width:min(420px,92vw)}
  .snd-field{min-height:0;display:grid;grid-template-columns:1fr 1fr;gap:40px 24px}
  .snd{position:static}
  .snd .ring{display:none}
  .tt-r{grid-template-columns:1fr}
  .tt-r h3{padding:22px 0 0}
  .cl{width:33.33%;max-width:none;height:120px}
  .cl img{max-height:56px}
  .feat-st{min-height:0}
  .fs{position:static;display:none}.fs.on{display:block}
  .cx-view{display:none}
  .lr-h{grid-template-columns:76px 1fr 40px;gap:14px}
  .lr-h .sys,.lr-h .out{display:none}
  .lr-h .lg img{max-width:70px;max-height:56px}
  .voyage3{grid-template-columns:1fr;padding-inline-start:0}
  .voyage3 div{border-inline-start:0;padding:12px 0;border-top:1px dashed var(--line-l)}
  .blist{grid-template-columns:1fr}
  .bi.wide{grid-template-columns:1fr}
  .dl2{grid-template-columns:1fr}
  .ft-g{grid-template-columns:1fr 1fr}
  .frame-in{grid-template-columns:1fr}
  .frame-side{display:none}
  .notesc{grid-template-columns:1fr 1fr;gap:16px}
  .mnote{opacity:1;transform:none}
  .voy-map .notes{position:static;display:grid;gap:14px;margin-top:20px}
  .voy-map{aspect-ratio:auto}
  .voy-map svg{aspect-ratio:12/7;height:auto}
  .note{position:static!important;width:auto;padding-inline-start:14px;border-inline-start:1px solid var(--gold)}
}
@media (max-width:620px){
  body{font-size:16px}
  .hdr-in{height:70px}
  .mark img{height:28px}
  .hero{padding-top:calc(70px + env(safe-area-inset-top,0px))}
  .ph,.spec{padding-top:calc(70px + env(safe-area-inset-top,0px))}
  .hero-foot{flex-direction:column;align-items:stretch;text-align:center}
  .hero-foot .depth{justify-content:center}
  .vm2{grid-template-columns:1fr}
  .vm2 div+div{border-inline-start:0;padding-inline:0;border-top:1px solid var(--line-l);margin-top:18px}
  .snd-field{grid-template-columns:1fr}
  .cl{width:50%}
  .fs dl{grid-template-columns:1fr 1fr}
  .ft-g{grid-template-columns:1fr}
  .stratum{grid-template-columns:56px 1fr;gap:12px}
  .stratum .go{display:none}
  .stratum .more{grid-column:1/-1;grid-template-rows:1fr}
  .notesc{grid-template-columns:1fr}
  .gauge{width:110px;height:300px}
  .bi{grid-template-columns:72px 1fr}
  .slip{grid-template-columns:1fr}
  .letter{display:none}
  .madlib{line-height:2.2}
  .madlib input{max-width:100%}
  .btn{width:100%}
  .spec .promise .acts{width:100%}
}
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
}

/* --- states driven by tw.js --- */
.paperdoc .ent{background-size:100% 2px}
.paperdoc .vec{background:#F3ECDF}
.voy .route{stroke-dasharray:none;stroke-width:1.8}
.voy.pinned .note{opacity:.16;transition:opacity .5s,transform .5s var(--ease);transform:translateY(6px)}
.voy.pinned .note.on{opacity:1;transform:none}
.sx.pinned .sx-p{pointer-events:none}
.sx.pinned .sx-t,.sx.pinned .port{pointer-events:auto}
.dive-stage{position:relative;background:inherit}

.port-in .demo{width:66%}
.anno i{width:44px;transform:rotate(-18deg)}
.sx-count{direction:ltr}
.stmt{max-width:25ch;font-size:clamp(28px,3.7vw,50px)}
.lat{unicode-bidi:isolate}

.paperdoc::before{z-index:2;mix-blend-mode:multiply}
.paperdoc .seal{inset-inline-start:auto;inset-inline-end:26px;bottom:20px}
.sx-count{inset-inline-end:auto;left:max(20px,calc((100vw - var(--wrap))/2 + 20px))}
.depths div{font-size:13px}

.intg{max-width:34ch}
.chip{font-size:.5em}
.uses .big-lg img{height:96px;max-height:none;width:auto}

.ph .lede,.spec .promise p{color:#B9C7D2}
.ai-ul{display:none;list-style:none;padding:0;margin:26px 0 0;gap:14px}
.ai-ul li{padding-inline-start:16px;border-inline-start:1px solid var(--gold);color:var(--on-2);font-size:15px}
.ai-ul b{display:block;color:var(--gold-l)}
@media (max-width:900px){
  .pin .bub{display:none}
  .ai-ul{display:grid}
  .port{aspect-ratio:auto;border-radius:24px;width:100%}
  .port::before{border-radius:30px;inset:-8px}
  .port::after{border-radius:24px}
  .port-in{position:relative;inset:auto;margin:8px;border-radius:18px;padding:22px 16px;width:calc(100% - 16px)}
  .port-in .demo{width:100%}
}
.voy.pinned .voy-map{width:min(1200px,calc((100svh - 300px) * 12 / 7))}
.voy.pinned .voy-end{margin-top:6px}

/* ===================================================================== WordPress views (blog, article, plain pages, 404) */
.ftog a{position:relative;padding:6px 0;font-size:16px;color:var(--muted);transition:color .3s}
.ftog a::after{content:"";position:absolute;inset-inline:0;bottom:0;height:1.5px;background:var(--bronze);transform:scaleX(0);transition:transform .35s var(--ease);transform-origin:right}
.ftog a:hover{color:var(--text)}
.ftog a[aria-current="page"]{color:var(--text);font-weight:600}
.ftog a[aria-current="page"]::after{transform:scaleX(1)}
.btools{margin-top:0}
.bfeat + .btools{margin-top:50px}
.bfeat h2 a:hover{color:var(--bronze-t)}
.plate .plate-img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.pm .pc{color:var(--bronze-t);font-weight:600}
.bi:only-child{grid-column:1/-1}
.pgn{margin-top:46px}
.pgn ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.pgn a,.pgn span{display:inline-grid;place-items:center;min-width:44px;height:44px;padding:0 14px;border:1px solid var(--line-l);border-radius:999px;font-size:15px;color:var(--text);transition:background .3s,color .3s}
.pgn a:hover{background:var(--pearl)}
.pgn .current{background:var(--abyss);color:var(--on);border-color:var(--abyss)}
.pgn .dots{border:0}
.bempty{display:grid;grid-template-columns:200px 1fr;gap:34px;align-items:center;padding:40px 0;border-block:1px solid var(--line-l)}
.bempty .plate{min-height:0;aspect-ratio:1;border-radius:50%}
.bempty h3{font-size:26px;font-weight:500;margin:0 0 8px}
.bempty p{color:var(--muted);margin:0 0 14px}
.nf .lat{display:block;color:var(--bronze-t);margin-bottom:26px}
.nf .acts{display:flex;flex-wrap:wrap;gap:14px}
.nf .btn-line{color:var(--text)}
.art-h h1{font-size:clamp(32px,4.6vw,60px);line-height:1.3;max-width:22ch;font-weight:500}
.art-h .pm{margin-top:22px;color:var(--on-2)}
.art-h .pm .pc{color:var(--gold-l)}
.art-fig{margin-top:-1px}
.art-fig img{display:block;width:100%;max-height:560px;object-fit:cover;margin-top:clamp(30px,4vw,56px)}
.art-b,.art-p{padding-top:clamp(50px,6vw,80px)}
.prose{max-width:760px;font-size:18px;line-height:2}
.prose > *{margin-block:0 1.1em}
.prose h2{font-size:clamp(24px,2.6vw,32px);font-weight:600;line-height:1.5;margin-top:1.8em}
.prose h3{font-size:22px;font-weight:600;line-height:1.5;margin-top:1.6em}
.prose a{color:var(--bronze-t);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px}
.prose ul,.prose ol{padding-inline-start:1.4em}
.prose li{margin-bottom:.4em}
.prose li::marker{color:var(--bronze)}
.prose blockquote{margin-inline:0;padding:6px 24px;border-inline-start:2px solid var(--gold);color:var(--muted);font-size:1.05em}
.prose img{max-width:100%;height:auto}
.prose figure{margin-inline:0}
.prose figcaption{font-size:14px;color:var(--muted);margin-top:8px}
.prose table{width:100%;border-collapse:collapse;font-size:16px}
.prose th,.prose td{border-bottom:1px solid var(--line-l);padding:10px 12px;text-align:start}
.prose th{background:var(--pearl);font-weight:600}
.prose code{background:var(--pearl);padding:2px 6px;border-radius:4px;font-size:.9em}
.prose hr{border:0;border-top:1px solid var(--line-l);margin-block:2em}
.rel{margin-top:clamp(60px,7vw,100px);max-width:none}
.rel h2{font-size:clamp(24px,2.4vw,32px);font-weight:500;margin-bottom:20px}
@media (max-width:620px){.bempty{grid-template-columns:1fr;gap:20px}.bempty .plate{width:140px}.prose{font-size:17px}}