/* ProxyNomad v2 design system.
   Synthesis of three judged prototypes: instrument system, dusk atmosphere,
   full-bleed cartographic hero. Palette: void, night, surface, brass, dusk violet. */

/* ============ Tokens ============ */
:root{
  --void:#0A0E1C; --night:#0E1428; --surface:#131A33; --raised:#1A2245;
  --line:rgba(214,178,112,.13); --line-2:rgba(214,178,112,.30);
  --bright:#F2EDE3; --body:#A9B1CD; --dim:#7A83A2; --muted:#8C95B6;
  --brass:#D8AE6A; --brass-hot:#F2C97D; --ember:#C9924E; --violet:#A98BC9;
  --paper:#F4EEE1;
  --grad-dusk:linear-gradient(115deg,#F2C97D,#D8AE6A 35%,#C9924E 62%,#A98BC9);
  --serif:'Fraunces',Georgia,serif;
  --sans:'Inter',system-ui,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,monospace;
  --r-s:10px; --r-m:14px; --r-l:20px;
  --ease:cubic-bezier(.19,1,.22,1);
  --noise:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  /* legacy v1 aliases, kept until every page is migrated */
  --dusk:#7A83A2; --dusk-faint:#8A93B6; --paper-on-night:#F2EDE3;
  --brass-bright:#F2C97D; --brass-mid:#D8AE6A;
  --hairline:rgba(214,178,112,.13); --hairline-night:rgba(214,178,112,.22);
  --night-2:#131A33; --night-3:#1A2245;
}

/* ============ Base ============ */
*,*::before,*::after{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{margin:0;background:var(--void);color:var(--body);font:400 17px/1.7 var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;}
h1,h2,h3,h4{font-family:var(--serif);font-optical-sizing:auto;color:var(--bright);margin:0 0 .5em;font-weight:580;letter-spacing:-.018em;line-height:1.12;text-wrap:balance;}
h1{font-size:clamp(2.9rem,6.5vw,5.2rem);letter-spacing:-.028em;line-height:1.03;}
h2{font-size:clamp(2.1rem,4.6vw,3.4rem);letter-spacing:-.022em;line-height:1.07;}
h3{font-size:1.32rem;font-weight:560;letter-spacing:-.01em;}
h4{font-size:1.02rem;font-family:var(--sans);font-weight:600;}
p{margin:0 0 1em;}
p:last-child{margin-bottom:0;}
ul{margin:0 0 1em;padding-left:1.2rem;}
li{margin-bottom:.45em;}
main li::marker{color:var(--brass);}
.card ul li::marker{content:"◇  ";color:var(--brass);font-size:.8em;}
a{color:var(--brass);text-decoration:none;}
a:hover{color:var(--brass-hot);}
p a,li a,td a{text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(216,174,106,.4);}
p a:hover,li a:hover,td a:hover{text-decoration-color:var(--brass-hot);}
code{font-family:var(--mono);font-size:.86em;color:var(--brass-hot);background:rgba(216,174,106,.09);border:1px solid var(--line);border-radius:5px;padding:.08em .38em;}
em{font-style:italic;}
::selection{background:rgba(216,174,106,.28);color:var(--bright);}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:4px;}
img,svg{max-width:100%;height:auto;}
hr{border:0;border-top:1px solid var(--line);margin:2.5rem 0;}
[hidden]{display:none !important;}
[id]{scroll-margin-top:5rem;}
.skip-link{position:absolute;left:-999px;top:0;z-index:200;background:var(--brass);color:#171207;padding:.6rem 1.1rem;font-family:var(--mono);font-size:.8rem;border-radius:0 0 8px 0;}
.skip-link:focus{left:0;}
.wrap{max-width:1200px;margin:0 auto;padding:0 clamp(1.25rem,4vw,2.5rem);}
.wrap--narrow{max-width:820px;}
.icon{width:24px;height:24px;flex:none;}

/* ============ Ornaments & type helpers ============ */
.ticks{height:9px;background:
  repeating-linear-gradient(90deg,rgba(216,174,112,.42) 0 1px,transparent 1px 56px) left top/100% 9px no-repeat,
  repeating-linear-gradient(90deg,rgba(216,174,112,.16) 0 1px,transparent 1px 8px) left top/100% 5px no-repeat;}
.overline{display:flex;align-items:center;gap:.65rem;font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.22em;text-transform:uppercase;color:var(--brass);margin:0 0 1.1rem;}
.overline::before{content:"";width:7px;height:7px;background:var(--brass);transform:rotate(45deg);flex:none;box-shadow:0 0 12px rgba(216,174,106,.8);}
.overline .idx{color:var(--dim);letter-spacing:.14em;}
.sec-head{display:flex;align-items:flex-end;justify-content:space-between;gap:2rem;border-bottom:1px solid var(--line);padding-bottom:.85rem;margin-bottom:2.4rem;position:relative;}
.sec-head::after{content:"";position:absolute;left:0;bottom:-1px;width:56px;height:1px;background:var(--brass);box-shadow:0 0 10px rgba(216,174,106,.7);}
.sec-head .overline{margin:0;}
.sec-note{font-family:var(--mono);font-size:11px;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;white-space:nowrap;}
.lede{font-size:1.16rem;line-height:1.65;color:var(--body);max-width:44em;}
.muted{color:var(--muted);font-size:.95rem;}
.mono-label{font-family:var(--mono);font-size:.74rem;font-weight:500;letter-spacing:.12em;text-transform:uppercase;color:var(--brass);}
.acc{font-style:italic;font-weight:500;background:var(--grad-dusk);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em;}
.updated{font-family:var(--mono);font-size:.78rem;color:var(--dim);letter-spacing:.06em;}
.crumb{font-family:var(--mono);font-size:.72rem;letter-spacing:.12em;text-transform:uppercase;}
.crumb a{color:var(--dim);}
.crumb a:hover{color:var(--brass);}
.crumb span{color:var(--dim);}

/* ============ Sections ============ */
.section{padding:clamp(4.25rem,8vw,6.5rem) 0;position:relative;}
.section--tight{padding:clamp(3rem,5.5vw,4.25rem) 0;}
.section--roomy{padding:clamp(6rem,11vw,9rem) 0;}
.section--night,.section--paper2{background:var(--night);}
.section--hairline{border-top:1px solid rgba(214,178,112,.08);}
.after-horizon{padding-top:8.5rem;}
.after-horizon::before{content:"";position:absolute;top:0;left:50%;transform:translateX(-50%);width:min(980px,86%);height:150px;background:radial-gradient(55% 100% at 50% 0%,rgba(242,201,125,.07),transparent 72%);pointer-events:none;}

/* Page hero strip for sub-pages */
.page-hero{position:relative;overflow:hidden;padding:clamp(3.2rem,6vw,4.8rem) 0;background:
  radial-gradient(900px 480px at 85% -20%,rgba(216,174,106,.10),transparent 60%),
  radial-gradient(700px 480px at -5% 110%,rgba(169,139,201,.09),transparent 58%),
  var(--night);}
.page-hero::before{content:"";position:absolute;inset:0;background:var(--noise);opacity:.025;pointer-events:none;}
.page-hero::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:linear-gradient(90deg,transparent,rgba(216,174,106,.35),transparent);}
.page-hero .crumb{margin-bottom:1.4rem;}
.page-hero h1{font-size:clamp(2.5rem,5vw,3.7rem);}

/* ============ Buttons ============ */
.btn{display:inline-flex;align-items:center;gap:.55rem;font:600 .95rem/1 var(--sans);padding:.9rem 1.55rem;border-radius:12px;cursor:pointer;border:0;position:relative;overflow:hidden;transition:transform .2s var(--ease),box-shadow .2s var(--ease),border-color .2s,background .2s;text-decoration:none;}
.btn--primary{background:var(--grad-dusk);color:#1A1206;box-shadow:0 1px 0 rgba(255,255,255,.25) inset,0 10px 30px -10px rgba(216,174,106,.45);}
.btn--primary::after{content:"";position:absolute;top:0;left:-80%;width:55%;height:100%;background:linear-gradient(105deg,transparent,rgba(255,255,255,.45),transparent);transform:skewX(-18deg);transition:left .55s var(--ease);}
.btn--primary:hover{transform:translateY(-1px);color:#1A1206;box-shadow:0 1px 0 rgba(255,255,255,.3) inset,0 14px 38px -10px rgba(216,174,106,.55);}
.btn--primary:hover::after{left:130%;}
.btn--ghost{background:rgba(19,26,51,.5);color:var(--bright);border:1px solid var(--line-2);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);}
.btn--ghost:hover{transform:translateY(-1px);color:var(--bright);border-color:rgba(216,174,106,.55);background:rgba(26,34,69,.6);}
.btn--sm{padding:.6rem 1.1rem;border-radius:10px;font-size:.9rem;}
.btn-row{display:flex;gap:.9rem;flex-wrap:wrap;align-items:center;}
.arrow-link{font-weight:600;font-size:.95rem;display:inline-flex;align-items:center;gap:.45rem;text-decoration:none !important;}
.arrow-link .ar{transition:transform .22s var(--ease);display:inline-block;}
.arrow-link:hover .ar{transform:translateX(4px);}

/* ============ Header ============ */
.site-head{position:sticky;top:0;z-index:100;background:rgba(10,14,28,.72);backdrop-filter:blur(14px) saturate(150%);-webkit-backdrop-filter:blur(14px) saturate(150%);border-bottom:1px solid rgba(214,178,112,.10);transition:border-color .3s,background .3s;}
.site-head.is-scrolled{background:rgba(10,14,28,.86);border-bottom-color:rgba(214,178,112,.2);}
.site-head__bar{display:flex;align-items:center;justify-content:space-between;height:64px;gap:1.5rem;}
.brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--serif);font-weight:600;font-size:1.18rem;color:var(--bright);letter-spacing:-.01em;text-decoration:none;}
.brand .brand__mark{filter:drop-shadow(0 0 8px rgba(216,174,106,.6));flex:none;}
.brand:hover{color:var(--bright);}
.brand__word em{font-style:italic;font-weight:500;color:var(--brass);}
.site-nav{display:flex;align-items:center;gap:.35rem;}
.site-nav>a,.nav-drop>summary{font:500 .92rem/1 var(--sans);color:var(--body);padding:.55rem .8rem;border-radius:9px;transition:color .18s,background .18s;text-decoration:none;}
.site-nav>a:not(.nav-cta):hover,.nav-drop>summary:hover{color:var(--bright);background:rgba(216,174,106,.07);}
.site-nav>a[aria-current="page"]{color:var(--brass-hot);}
.nav-cta{margin-left:.5rem;background:var(--grad-dusk);color:#1A1206 !important;font-weight:600 !important;padding:.6rem 1.1rem !important;border-radius:10px;transition:transform .2s var(--ease),box-shadow .2s;}
.nav-cta:hover{transform:translateY(-1px);box-shadow:0 8px 24px -8px rgba(216,174,106,.5);background:var(--grad-dusk);}
.nav-burger__panel .nav-cta{margin:.6rem .25rem .15rem;display:flex;justify-content:center;}
.nav-drop{position:relative;}
.nav-drop>summary{list-style:none;cursor:pointer;display:inline-flex;align-items:center;gap:.4rem;}
.nav-drop>summary::-webkit-details-marker{display:none;}
.nav-drop>summary::after{content:"";width:7px;height:7px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px);transition:transform .2s;}
.nav-drop[open]>summary::after{transform:rotate(225deg) translateY(2px);}
.nav-drop__menu{position:absolute;top:calc(100% + 14px);left:50%;transform:translateX(-50%);width:430px;background:rgba(19,26,51,.97);border:1px solid var(--line-2);border-radius:var(--r-m);padding:.55rem;box-shadow:0 30px 70px -20px rgba(0,0,0,.7),0 0 80px rgba(216,174,106,.08);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);}
.nav-drop[open] .nav-drop__menu{animation:dropIn .22s var(--ease);}
@keyframes dropIn{from{opacity:0;transform:translateX(-50%) translateY(-6px);}to{opacity:1;transform:translateX(-50%) translateY(0);}}
.nav-drop__menu::before{content:"";position:absolute;top:-7px;left:50%;width:12px;height:12px;background:inherit;border-left:1px solid var(--line-2);border-top:1px solid var(--line-2);transform:translateX(-50%) rotate(45deg);}
.nav-drop__menu a{display:grid;grid-template-columns:38px 1fr auto;grid-template-rows:auto auto;gap:0 .8rem;align-items:center;padding:.7rem .8rem;border-radius:10px;transition:background .16s;text-decoration:none;}
.nav-drop__menu a:hover{background:rgba(216,174,106,.08);}
.nav-drop__menu .ic{grid-row:1/3;width:38px;height:38px;border:1px solid var(--line);border-radius:9px;display:grid;place-items:center;color:var(--brass);background:rgba(216,174,106,.06);}
.nav-drop__menu .ic .icon{width:20px;height:20px;}
.nav-drop__menu .nm{grid-column:2;grid-row:1;font:600 .95rem/1.3 var(--sans);color:var(--bright);}
.nav-drop__menu .ds{grid-column:2;grid-row:2;font-size:.8rem;color:var(--dim);line-height:1.35;}
.nav-drop__menu .pr{grid-column:3;grid-row:1/3;justify-self:end;font-family:var(--mono);font-size:.74rem;color:var(--brass);letter-spacing:.02em;white-space:nowrap;border:1px solid var(--line);border-radius:6px;padding:.25rem .45rem;background:rgba(10,14,28,.5);}
.nav-burger{display:none;position:relative;}
.nav-burger>summary{list-style:none;cursor:pointer;font:500 .9rem/1 var(--mono);color:var(--bright);padding:.55rem .85rem;border:1px solid var(--line-2);border-radius:9px;}
.nav-burger>summary::-webkit-details-marker{display:none;}
.nav-burger__panel{position:absolute;right:0;top:calc(100% + 12px);width:min(320px,calc(100vw - 2.5rem));background:rgba(19,26,51,.98);border:1px solid var(--line-2);border-radius:var(--r-m);padding:.9rem;display:flex;flex-direction:column;box-shadow:0 30px 70px -20px rgba(0,0,0,.75);}
.nav-burger__group{font-family:var(--mono);font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);margin:.6rem .5rem .25rem;}
.nav-burger__panel a{padding:.5rem .55rem;border-radius:8px;color:var(--bright);font-size:.95rem;text-decoration:none;}
.nav-burger__panel a:hover{background:rgba(216,174,106,.08);}
.nav-burger__panel a[aria-current="page"]{color:var(--brass-hot);}

/* ============ Home hero: full-bleed chart ============ */
.hero{position:relative;overflow:hidden;padding:clamp(4rem,7vw,6.5rem) 0 clamp(4.5rem,7vw,6rem);background:
  radial-gradient(110% 70% at 82% -12%,rgba(169,139,201,.20),transparent 52%),
  radial-gradient(80% 55% at 12% -6%,rgba(169,139,201,.12),transparent 55%),
  radial-gradient(130% 80% at 50% 112%,rgba(242,201,125,.20),rgba(201,146,78,.07) 46%,transparent 72%),
  linear-gradient(180deg,#070A14 0%,#0A0E1C 34%,#111431 68%,#171740 100%);}
.hero::before{content:"";position:absolute;inset:0;background:var(--noise);opacity:.03;pointer-events:none;z-index:2;}
.hero__chart{position:absolute;inset:0;z-index:0;}
.hero__chart svg{display:block;width:100%;height:100%;}
.hero__scrim{position:absolute;inset:0;z-index:1;background:radial-gradient(880px 660px at 24% 44%,rgba(10,14,28,.93) 0%,rgba(10,14,28,.62) 55%,transparent 100%);pointer-events:none;}
.hero .wrap{position:relative;z-index:3;pointer-events:none;}
.hero__copy{max-width:640px;}
.hero__copy>*,.hero-readout,.hero-note{pointer-events:auto;}
.hero h1{max-width:16ch;}
.hero .lede{margin-top:.4rem;}
.hero-strip{margin-top:2.2rem;border:1px solid var(--line);border-radius:var(--r-s);background:rgba(10,14,28,.55);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);display:grid;grid-template-columns:repeat(4,1fr);overflow:hidden;position:relative;max-width:640px;}
.hero-strip::before{content:"";position:absolute;top:0;left:0;right:0;height:5px;background:repeating-linear-gradient(90deg,rgba(216,174,112,.30) 0 1px,transparent 1px 9px);}
.hero-strip>div{padding:.85rem .95rem .7rem;border-left:1px solid var(--line);}
.hero-strip>div:first-child{border-left:0;}
.hero-strip .k{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:.28rem;}
.hero-strip .v{display:block;font-family:var(--mono);font-size:.86rem;font-weight:500;color:var(--brass-hot);white-space:nowrap;}
.hero-strip .v small{color:var(--dim);font-weight:400;font-size:.72rem;}
.hero-paygo{margin:.7rem 0 0;font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);}

/* Chart internals (shared by full-bleed hero and framed panels) */
.graticule line{stroke:rgba(216,174,106,.10);stroke-width:1;}
.graticule line.fine{stroke:rgba(169,177,205,.055);}
.graticule-label{font-family:var(--mono);font-size:13px;fill:rgba(169,177,205,.85);letter-spacing:.08em;}
.contour{fill:none;stroke:rgba(169,177,205,.10);stroke-width:1;}
.route{fill:none;stroke:rgba(216,174,106,.32);stroke-width:1.4;stroke-dasharray:1;stroke-dashoffset:0;}
.route--main{stroke:url(#routeGrad);stroke-width:2.2;filter:drop-shadow(0 0 7px rgba(242,201,125,.55));}
.js .route{stroke-dashoffset:1;animation:draw 1.6s var(--ease) forwards;}
.js .route--main{animation-duration:2.4s;animation-delay:.25s;}
@keyframes draw{to{stroke-dashoffset:0;}}
.wp{cursor:pointer;outline:none;}
.wp--bg{pointer-events:none;cursor:default;opacity:.55;}
.wp .halo{fill:none;stroke:rgba(216,174,106,.4);stroke-width:1;transition:stroke .2s;transform-box:fill-box;transform-origin:center;}
.wp .dot{fill:var(--brass);transition:fill .2s;}
.wp text{font-family:var(--mono);font-size:14px;fill:#8B94B5;letter-spacing:.1em;transition:fill .2s;}
.wp:hover .dot,.wp:focus .dot,.wp.is-on .dot{fill:var(--brass-hot);}
.wp:hover text,.wp:focus text,.wp.is-on text{fill:var(--bright);}
.wp:hover .halo,.wp:focus .halo,.wp.is-on .halo{stroke:var(--brass-hot);}
.wp.is-on .halo{animation:halo 2.2s ease-out infinite;}
.wp:focus-visible .hit{stroke:var(--brass);stroke-width:1.5;stroke-dasharray:3 3;}
@keyframes halo{0%{transform:scale(.6);opacity:1;}80%,100%{transform:scale(1.8);opacity:0;}}
@keyframes pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* Hero instrument readout (full width, glass) */
.hero-readout{position:relative;z-index:3;margin-top:2.6rem;display:grid;grid-template-columns:auto auto 1fr auto auto;align-items:center;gap:1.1rem;padding:.85rem 1.2rem;border:1px solid var(--line-2);border-radius:var(--r-m);background:rgba(14,20,40,.66);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);font-family:var(--mono);font-size:.78rem;box-shadow:0 24px 60px -24px rgba(0,0,0,.7);}
.hero-readout .beacon{width:8px;height:8px;border-radius:50%;background:var(--brass-hot);box-shadow:0 0 12px rgba(242,201,125,.9);animation:pulse 2.4s ease-in-out infinite;}
.hero-readout .lbl{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);}
.hero-readout .readout-name{font-family:var(--serif);font-size:1.2rem;font-weight:560;color:var(--bright);}
.hero-readout .readout-coords{color:var(--dim);}
.hero-readout .readout-target{color:var(--brass-hot);background:rgba(216,174,106,.08);border:1px solid var(--line);border-radius:6px;padding:.24rem .55rem;justify-self:start;}
.hero-readout .hint{font-size:.68rem;letter-spacing:.1em;color:var(--dim);text-transform:uppercase;}
.hero-note{position:relative;z-index:3;margin:.8rem 0 0;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;color:var(--body);}

/* Horizon signature at hero base */
.horizon{position:absolute;left:0;right:0;bottom:0;height:0;z-index:4;pointer-events:none;}
.horizon__glow{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(980px,86%);height:210px;background:radial-gradient(55% 100% at 50% 100%,rgba(242,201,125,.20),rgba(216,174,106,.05) 55%,transparent 78%);filter:blur(2px);}
.horizon__line{position:absolute;left:50%;bottom:0;transform:translateX(-50%);width:min(1240px,94%);height:1px;background:linear-gradient(90deg,transparent,rgba(216,174,106,.5) 16%,#F2C97D 50%,rgba(216,174,106,.5) 84%,transparent);box-shadow:0 0 22px rgba(242,201,125,.55);}
.horizon__mark{position:absolute;left:50%;bottom:-3.5px;width:7px;height:7px;transform:translateX(-50%) rotate(45deg);background:var(--brass-hot);box-shadow:0 0 20px 5px rgba(242,201,125,.5);}

/* Framed chart panel (compact contexts) */
.chart{border:1px solid var(--line-2);border-radius:var(--r-l);background:linear-gradient(180deg,rgba(19,26,51,.92),rgba(14,20,40,.96));box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 80px rgba(216,174,106,.10);position:relative;overflow:hidden;}
.chart__bar{display:flex;align-items:center;gap:.8rem;padding:.7rem 1rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);white-space:nowrap;}
.chart__bar .dotpulse{width:7px;height:7px;border-radius:50%;background:var(--brass-hot);box-shadow:0 0 10px rgba(242,201,125,.9);flex:none;animation:pulse 2.4s ease-in-out infinite;}
.chart__bar .t{color:var(--brass);font-weight:500;}
.chart__bar .r{margin-left:auto;color:var(--dim);}
.chart svg{display:block;width:100%;height:auto;padding:.2rem .4rem 0;}
.chart__readout{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:1.1rem;margin:0;padding:.75rem 1.1rem;border-top:1px solid var(--line);background:rgba(10,14,28,.55);font-family:var(--mono);font-size:.78rem;}
.chart__readout .lbl{font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);}
.chart__readout .readout-name{color:var(--bright);font-weight:500;font-size:.9rem;}
.chart__readout .readout-coords{color:var(--dim);}
.chart__readout .readout-target{color:var(--brass-hot);background:rgba(216,174,106,.08);border:1px solid var(--line);border-radius:6px;padding:.22rem .5rem;}

/* ============ Cards ============ */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:1.6rem 1.7rem 1.5rem;position:relative;transition:transform .22s var(--ease),border-color .22s,box-shadow .22s;overflow:hidden;display:flex;flex-direction:column;}
.card::before{content:"";position:absolute;top:10px;right:10px;width:9px;height:9px;border-top:1px solid var(--line-2);border-right:1px solid var(--line-2);opacity:.9;}
.card::after{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(242,201,125,.09),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none;}
.card:hover{transform:translateY(-3px);border-color:rgba(216,174,106,.4);box-shadow:0 24px 50px -22px rgba(0,0,0,.65),0 0 60px rgba(216,174,106,.06);}
.card:hover::after{opacity:1;}
.card h3{margin-top:.85rem;}
.card p{font-size:.98rem;line-height:1.62;}
.card ul{font-size:.98rem;line-height:1.62;}
a.card{color:var(--body);text-decoration:none;}
.card__go{margin-top:auto;padding-top:.9rem;color:var(--brass);font-weight:600;font-size:.92rem;display:flex;align-items:center;gap:.45rem;}
.card__go::after{content:"→";transition:transform .22s var(--ease);}
a.card:hover .card__go::after{transform:translateX(4px);}
a.card:hover .card__go{color:var(--brass-hot);}
.grid{display:grid;gap:1.1rem;}
.grid--2{grid-template-columns:repeat(2,1fr);}
.grid--3{grid-template-columns:repeat(3,1fr);}
.grid--4{grid-template-columns:repeat(4,1fr);}

/* Chooser cards */
.pcard__top{display:flex;align-items:center;justify-content:space-between;gap:1rem;border-bottom:1px solid var(--line);padding-bottom:.9rem;}
.pcard__id{display:flex;align-items:center;gap:.7rem;}
.pcard__ic{width:40px;height:40px;border:1px solid var(--line-2);border-radius:10px;display:grid;place-items:center;color:var(--brass);background:rgba(216,174,106,.06);flex:none;}
.pcard__ic .icon{width:20px;height:20px;}
.pcard__price{font-family:var(--mono);font-size:.9rem;font-weight:500;color:var(--brass-hot);white-space:nowrap;}
.pcard__price small{color:var(--dim);font-weight:400;font-size:.72rem;}
.pcard h3{margin:.95rem 0 .4rem;font-size:1.45rem;}
.wrong{margin-top:.9rem;padding:.65rem .85rem;border-left:2px solid rgba(169,139,201,.5);background:rgba(169,139,201,.05);border-radius:0 8px 8px 0;font-size:.88rem;color:var(--muted);}
.wrong b{color:var(--violet);font-weight:600;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;display:block;margin-bottom:.15rem;}

/* Support cards with ghost numerals */
.scard{padding-top:1.4rem;}
.scard::before{display:none;}
.scard__num{position:absolute;top:1.1rem;right:1.2rem;font-family:var(--serif);font-style:italic;font-size:2.2rem;font-weight:400;color:rgba(216,174,106,.22);line-height:1;}
.scard .mono-label{display:inline-flex;align-items:center;gap:.5rem;}
.scard .mono-label::before{content:"";width:18px;height:1px;background:var(--brass);}

/* ============ Pricing ============ */
.tile{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-m);padding:1.4rem 1.5rem 1.35rem;position:relative;overflow:hidden;transition:transform .22s var(--ease),border-color .22s,box-shadow .22s;}
.tile::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-dusk);opacity:.55;}
.tile::after{content:"";position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,0%),rgba(242,201,125,.08),transparent 65%);opacity:0;transition:opacity .3s;pointer-events:none;}
.tile:hover{transform:translateY(-3px);border-color:rgba(216,174,106,.4);box-shadow:0 24px 50px -22px rgba(0,0,0,.65);}
.tile:hover::after{opacity:1;}
.tile .ticks{margin:.9rem 0 .75rem;opacity:.8;}
.tile .muted{margin:0;font-size:.86rem;line-height:1.5;}
.price-hero{font-family:var(--serif);font-size:2.7rem;font-weight:560;letter-spacing:-.02em;color:var(--bright);margin:.55rem 0 0;line-height:1;}
.price-hero small{font-family:var(--mono);font-size:.78rem;font-weight:400;color:var(--dim);letter-spacing:.04em;margin-left:.2rem;}
.price-card{padding-top:2.1rem;border-top:1px solid rgba(216,174,106,.4);}
.price-card::before{content:"";position:absolute;top:-34%;left:50%;transform:translateX(-50%);width:150%;aspect-ratio:1;background:radial-gradient(circle,rgba(242,201,125,.17),transparent 56%);pointer-events:none;border:0;}
.price-card .price-hero{font-size:3.4rem;font-weight:480;text-shadow:0 0 46px rgba(242,201,125,.45);}
.rules-lead{margin:2.2rem 0 .9rem;color:var(--bright);font-weight:600;font-size:1.02rem;}
.rules{display:grid;grid-template-columns:repeat(3,1fr);gap:1.1rem;}
.rule{border:1px solid var(--line);border-radius:var(--r-s);padding:1rem 1.15rem;background:rgba(19,26,51,.45);display:flex;gap:.85rem;align-items:flex-start;font-size:.94rem;line-height:1.55;}
.rule .n{font-family:var(--mono);font-size:.72rem;color:var(--brass);border:1px solid var(--line-2);border-radius:6px;padding:.18rem .45rem;flex:none;margin-top:.15rem;}
.rule b{color:var(--bright);}

/* Tier bands (product pages) */
.tier-band{display:grid;grid-template-columns:minmax(7rem,1fr) auto auto;align-items:baseline;gap:1rem 1.5rem;padding:1.05rem 0;border-bottom:1px solid var(--line);}
.tier-band:last-of-type{border-bottom:0;}
.tier-band__vol{font-family:var(--mono);font-size:.85rem;color:var(--dim);}
.tier-band__rate{font-family:var(--serif);font-size:1.75rem;font-weight:560;color:var(--bright);text-align:right;}
.tier-band__rate small{font-family:var(--mono);font-size:.55em;font-weight:400;color:var(--dim);letter-spacing:.04em;}
.tier-band__month{font-family:var(--mono);font-size:.82rem;color:var(--dim);text-align:right;min-width:8ch;}
@media(max-width:460px){
  .tier-band{grid-template-columns:1fr auto;gap:.1rem 1rem;}
  .tier-band__month{grid-column:1/-1;min-width:0;margin-top:-.2rem;}
}

/* Estimator */
.estimator{display:grid;gap:1rem;}
.estimator output{font-family:var(--serif);font-size:clamp(2rem,4.5vw,3rem);font-weight:560;color:var(--bright);line-height:1.1;text-shadow:0 0 40px rgba(242,201,125,.35);}
.estimator .estimator__detail{font-family:var(--mono);font-size:.8rem;color:var(--dim);}
.estimator input[type='range']{width:100%;accent-color:var(--brass);}
.estimator select{font:inherit;padding:.55rem .7rem;border-radius:var(--r-s);border:1px solid var(--line-2);background:var(--raised);color:var(--bright);}

/* ============ Notice ============ */
.notice{border:1px solid var(--line-2);border-radius:var(--r-m);background:linear-gradient(180deg,rgba(216,174,106,.07),rgba(216,174,106,.03));padding:1.25rem 1.5rem;font-size:1rem;position:relative;overflow:hidden;}
.notice::before{content:"";position:absolute;top:0;bottom:0;left:0;width:2px;background:var(--grad-dusk);}
.notice strong{color:var(--bright);}

/* ============ Split & code ============ */
.split{display:grid;grid-template-columns:.85fr 1.15fr;gap:clamp(2.5rem,4vw,4rem);align-items:center;}
.split--start{align-items:start;}
.code-panel{border:1px solid var(--line-2);border-radius:var(--r-m);background:#0B1022;box-shadow:0 40px 90px -35px rgba(0,0,0,.8),0 0 60px rgba(216,174,106,.07);overflow:hidden;position:relative;}
.code-panel__bar{display:flex;align-items:center;gap:.1rem;padding:0 .6rem;border-bottom:1px solid var(--line);background:rgba(19,26,51,.6);position:relative;}
.code-lights{display:flex;gap:6px;margin-right:.9rem;padding-left:.5rem;}
.code-lights i{width:9px;height:9px;border-radius:50%;background:rgba(216,174,106,.22);border:1px solid rgba(216,174,106,.3);}
.code-tab{appearance:none;background:none;border:0;font:500 .8rem/1 var(--mono);letter-spacing:.06em;color:var(--dim);padding:.85rem .95rem;cursor:pointer;transition:color .18s;position:relative;z-index:1;}
.code-tab:hover{color:var(--body);}
.code-tab[aria-selected="true"]{color:var(--brass-hot);}
.code-ind{position:absolute;bottom:-1px;height:2px;background:var(--grad-dusk);transition:transform .28s var(--ease),width .28s var(--ease);border-radius:2px;box-shadow:0 0 10px rgba(242,201,125,.6);left:0;}
.code-copy{position:absolute;top:.5rem;right:.6rem;z-index:6;appearance:none;background:rgba(216,174,106,.07);border:1px solid var(--line);border-radius:7px;color:var(--brass);font:500 .68rem/1 var(--mono);letter-spacing:.1em;text-transform:uppercase;padding:.42rem .7rem;cursor:pointer;transition:background .18s,color .18s,border-color .18s;}
.code-copy:hover{background:rgba(216,174,106,.14);color:var(--brass-hot);border-color:var(--line-2);}
.code-copy.done{color:var(--brass-hot);border-color:var(--line-2);}
.code-panel__title{font:500 .72rem/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:.8rem 1.2rem .1rem;}
.code-panel--multi .code-panel__title{display:none;}
.code-panel pre{margin:0;padding:1.15rem 1.2rem 1.3rem .9rem;font:400 .8rem/1.8 var(--mono);color:#C9CFE4;overflow-x:auto;counter-reset:ln;}
.code-panel pre .ln{display:block;padding-left:2.3rem;position:relative;white-space:pre;}
.code-panel pre .ln::before{counter-increment:ln;content:counter(ln,decimal-leading-zero);position:absolute;left:0;width:1.6rem;text-align:right;color:rgba(122,131,162,.75);font-size:.72rem;top:.15em;}
.code-panel .s{color:var(--brass-hot);}
.code-panel .c{color:var(--dim);font-style:italic;}
.code-panel .k{color:#9FB3E8;}
.code-panel__foot{display:flex;flex-wrap:wrap;gap:.5rem 1.4rem;padding:.55rem 1.2rem;border-top:1px solid var(--line);font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);background:rgba(19,26,51,.45);}
.code-panel__foot span{white-space:nowrap;}
.code-panel__foot b{color:var(--brass);font-weight:500;}

/* ============ Tables ============ */
.table-scroll{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r-m);scrollbar-width:thin;scrollbar-color:rgba(216,174,106,.45) rgba(19,26,51,.6);
  background:
    linear-gradient(90deg,var(--surface) 42%,rgba(19,26,51,0)) 0 0/56px 100% no-repeat,
    linear-gradient(270deg,var(--surface) 42%,rgba(19,26,51,0)) 100% 0/56px 100% no-repeat,
    linear-gradient(90deg,rgba(216,174,106,.20),rgba(216,174,106,0)) 0 0/18px 100% no-repeat,
    linear-gradient(270deg,rgba(216,174,106,.20),rgba(216,174,106,0)) 100% 0/18px 100% no-repeat,
    var(--surface);
  background-attachment:local,local,scroll,scroll,scroll;}
.table-scroll::-webkit-scrollbar{height:8px;}
.table-scroll::-webkit-scrollbar-thumb{background:rgba(216,174,106,.4);border-radius:4px;}
.table-scroll::-webkit-scrollbar-track{background:rgba(19,26,51,.6);}
.table-scroll:focus-visible{outline:2px solid var(--brass);outline-offset:2px;}
.table{width:100%;border-collapse:collapse;font-size:.94rem;min-width:760px;}
.table th,.table td{padding:.95rem 1.2rem;text-align:left;vertical-align:top;border-top:1px solid var(--line);line-height:1.5;}
.table thead th{border-top:0;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding-top:1.1rem;padding-bottom:.8rem;}
.table tbody tr{transition:background .15s;}
.table tbody tr:hover{background:rgba(216,174,106,.02);}
.table__lead{font-weight:600;color:var(--bright);white-space:nowrap;}
.check-yes{color:var(--brass-hot);font-weight:600;}
.table--compare thead th:nth-child(2){color:var(--brass);}
.table--compare td:nth-child(2),.table--compare th:nth-child(2){background:rgba(216,174,106,.06);}
.table--compare tbody tr:first-child td:nth-child(2){border-top:2px solid var(--brass);}
.table--compare .check-yes::before{content:"✓ ";color:var(--brass);}
.table--compare td:nth-child(3),.table--compare td:nth-child(4){color:var(--muted);}

/* ============ Use cases ============ */
.uc-ic{width:38px;height:38px;border:1px solid var(--line-2);border-radius:10px;display:grid;place-items:center;color:var(--brass);background:rgba(216,174,106,.06);margin-bottom:1rem;}
.uc-ic .icon{width:20px;height:20px;}
.uc-cta{border-style:dashed;background:rgba(19,26,51,.35);justify-content:center;}
.uc-cta p{color:var(--muted);}

/* ============ FAQ ============ */
.faq{border-top:1px solid var(--line);}
.faq details{border-bottom:1px solid var(--line);}
.faq summary{cursor:pointer;list-style:none;padding:1.15rem 2.2rem 1.15rem 0;font-weight:600;color:var(--bright);position:relative;transition:color .18s;}
.faq summary::-webkit-details-marker{display:none;}
.faq summary:hover{color:var(--brass-hot);}
.faq summary::after{content:"+";position:absolute;right:.25rem;top:50%;transform:translateY(-50%);font-family:var(--mono);color:var(--brass);font-size:1.15rem;transition:transform .25s var(--ease);}
.faq details[open] summary::after{content:"\2212";}
.faq .faq__body{padding:0 0 1.3rem;color:var(--body);max-width:62em;font-size:.98rem;line-height:1.65;}

/* ============ Forms ============ */
.form-grid{display:grid;gap:1.1rem;}
.form-grid--2{grid-template-columns:1fr 1fr;}
.field{display:grid;gap:.4rem;}
.field label{font-weight:600;font-size:.92rem;color:var(--bright);}
.field .hint{font-size:.82rem;color:var(--dim);}
.field input,.field select,.field textarea{font:inherit;color:var(--bright);background:rgba(10,14,28,.6);border:1px solid var(--line-2);border-radius:var(--r-s);padding:.7rem .85rem;width:100%;transition:border-color .18s,box-shadow .18s;}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px rgba(216,174,106,.15);}
.field input::placeholder,.field textarea::placeholder{color:var(--dim);}
.field textarea{min-height:8.5rem;resize:vertical;}
.hp-field{position:absolute !important;left:-9999px !important;width:1px;height:1px;overflow:hidden;}

/* ============ KV / legal ============ */
.kv{display:grid;grid-template-columns:auto 1fr;gap:.45rem 1.25rem;font-size:.95rem;margin:0;}
.split--start .kv{position:sticky;top:96px;}
.visually-hidden{position:absolute !important;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;}

/* Numeric UI aligns on tabular figures */
.hero-strip .v,.tier-band,.price-hero,.pcard__price,.table,.estimator output,.sec-note,.foot-endpoint{font-variant-numeric:tabular-nums;}

/* Utilities (replace repeated inline styles) */
.u-center{text-align:center;}
.u-mx{margin-inline:auto;}
.u-mw-44{max-width:44em;}
.u-mw-56{max-width:56em;}
.u-mt-1{margin-top:1rem;}
.u-mt-2{margin-top:2rem;}
.u-mt-3{margin-top:2.5rem;}

/* MPA view transitions: soft cross-fade between pages (progressive, Chromium) */
@media(prefers-reduced-motion:no-preference){
  @view-transition{navigation:auto;}
  ::view-transition-old(root){animation:vt-out .18s ease both;}
  ::view-transition-new(root){animation:vt-in .26s ease both;}
  @keyframes vt-out{to{opacity:0;}}
  @keyframes vt-in{from{opacity:0;transform:translateY(6px);}to{opacity:1;transform:none;}}
}

/* Hero entrance choreography */
@media(prefers-reduced-motion:no-preference){
  .js .hero__copy>*{animation:hero-in .7s var(--ease) both;}
  .js .hero__copy>*:nth-child(2){animation-delay:.07s;}
  .js .hero__copy>*:nth-child(3){animation-delay:.14s;}
  .js .hero__copy>*:nth-child(4){animation-delay:.21s;}
  .js .hero__copy>*:nth-child(5){animation-delay:.28s;}
  .js .hero__copy>*:nth-child(6){animation-delay:.35s;}
  .js .hero-readout{animation:hero-in .7s var(--ease) .42s both;}
  .js .hero-note{animation:hero-in .7s var(--ease) .5s both;}
  @keyframes hero-in{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}}
}
.kv dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);padding-top:.25rem;}
.kv dd{margin:0;color:var(--body);}
.legal-body{max-width:780px;}
.legal-body h2{font-size:1.5rem;margin-top:2.4em;}
.legal-body > h2:first-child{margin-top:0;}
.legal-body h3{font-size:1.08rem;margin-top:1.6em;font-family:var(--sans);font-weight:600;}

/* ============ CTA band ============ */
.cta-band{position:relative;overflow:hidden;padding:clamp(6rem,10vw,8.5rem) 0;background:
  radial-gradient(90% 90% at 18% 108%,rgba(201,146,78,.22),transparent 55%),
  radial-gradient(80% 80% at 85% -8%,rgba(169,139,201,.22),transparent 55%),
  radial-gradient(120% 70% at 50% 118%,rgba(242,201,125,.16),transparent 65%),
  linear-gradient(180deg,#0E1428,#131233);}
.cta-band::before{content:"";position:absolute;inset:0;background:var(--noise);opacity:.028;pointer-events:none;}
.cta-band::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(216,174,106,.4),transparent);}
.cta-title{font-size:clamp(2.5rem,5.2vw,3.9rem);letter-spacing:-.022em;line-height:1.05;}

/* ============ Footer ============ */
.site-foot{border-top:1px solid var(--line);background:var(--void);position:relative;overflow:hidden;padding:3.8rem 0 2rem;}
.site-foot .graticule-orn{position:absolute;right:-120px;top:-120px;width:520px;height:520px;opacity:.16;pointer-events:none;}
.site-foot__grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr 1fr;gap:2.4rem;position:relative;}
.site-foot__col h2,.site-foot__col h4{font-family:var(--mono);font-size:.7rem;font-weight:500;letter-spacing:.18em;text-transform:uppercase;color:var(--brass);margin:0 0 1rem;}
.site-foot__col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:.55rem;}
.site-foot__col ul a{color:var(--body);font-size:.92rem;text-decoration:none;}
.site-foot__col ul a:hover{color:var(--brass-hot);}
.site-foot__col ul .tag{font-family:var(--mono);font-size:.62rem;color:var(--dim);margin-left:.4rem;letter-spacing:.04em;}
.site-foot p{font-size:.92rem;color:var(--muted);}
.site-foot__coords{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--dim);}
.foot-endpoint{display:inline-flex;align-items:center;gap:.5rem;font-family:var(--mono);font-size:.74rem;color:var(--brass);border:1px solid var(--line);border-radius:8px;padding:.4rem .7rem;background:rgba(19,26,51,.5);margin-top:.4rem;}
.foot-endpoint i{width:6px;height:6px;border-radius:50%;background:var(--brass-hot);box-shadow:0 0 8px rgba(242,201,125,.8);}
.site-foot__base{margin-top:2.8rem;padding-top:1.3rem;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;color:var(--dim);position:relative;}

/* ============ Reveal ============ */
.js .reveal{opacity:0;transform:translateY(12px);transition:opacity .6s var(--ease),transform .6s var(--ease);}
.js .reveal.in{opacity:1;transform:none;}

/* ============ Compat (v1 class names still in sub-page markup) ============ */
.section--paper2 .card,.section--night .card{background:var(--surface);}
.card--link{display:flex;}
.hero__grid{display:grid;grid-template-columns:minmax(0,10fr) minmax(0,11fr);gap:3.5rem;align-items:center;}
.route-rule{border:0;height:1px;margin:0;background:repeating-linear-gradient(90deg,var(--brass) 0 6px,transparent 6px 13px);opacity:.45;}

/* ============ Responsive ============ */
@media(max-width:1060px){
  .split{grid-template-columns:1fr;}
  .grid--4{grid-template-columns:repeat(2,1fr);}
  .grid--3{grid-template-columns:repeat(2,1fr);}
  .site-foot__grid{grid-template-columns:1fr 1fr;}
  .hero__grid{grid-template-columns:1fr;}
}
@media(max-width:899px){
  .hero__chart{position:relative;inset:auto;height:340px;border:1px solid var(--line);border-radius:var(--r-m);background:rgba(14,20,40,.4);margin:2.4rem clamp(1.25rem,4vw,2.5rem) 0;overflow:hidden;}
  .hero__scrim{display:none;}
  .hero__copy{max-width:none;}
  .hero h1{max-width:none;}
  .wp text{font-size:24px;}
  .graticule-label{font-size:20px;}
}
@media(max-width:860px){
  .site-nav{display:none;}
  .nav-burger{display:block;}
}
@media(max-width:640px){
  .grid--2,.grid--3,.grid--4,.rules,.form-grid--2{grid-template-columns:1fr;}
  .hero-strip{grid-template-columns:repeat(2,1fr);}
  .hero-strip>div:nth-child(3){border-left:0;border-top:1px solid var(--line);}
  .hero-strip>div:nth-child(4){border-top:1px solid var(--line);}
  .hero-readout{grid-template-columns:auto auto 1fr;gap:.5rem .9rem;}
  .hero-readout .readout-coords{grid-column:2/4;}
  .hero-readout .readout-target{grid-column:1/4;}
  .hero-readout .hint{display:none;}
  .chart__readout{grid-template-columns:auto 1fr;gap:.4rem .9rem;}
  .chart__readout .readout-coords{grid-column:2;}
  .chart__readout .readout-target{grid-column:1/3;justify-self:start;}
  .sec-head{flex-direction:column;align-items:flex-start;gap:.5rem;}
  .sec-note{display:none;}
  .chart__bar .r{display:none;}
  .overline{font-size:10px;letter-spacing:.18em;}
  .code-panel__foot{flex-wrap:wrap;gap:.5rem 1.2rem;}
  .site-foot__grid{grid-template-columns:1fr;gap:1.8rem;}
  h1{font-size:clamp(2.4rem,10vw,2.9rem);}
  .price-card .price-hero{font-size:2.7rem;}
}

/* ============ Reduced motion ============ */
@media(prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none !important;transition:none !important;}
  html{scroll-behavior:auto;}
  .js .reveal{opacity:1;transform:none;}
  .js .route{stroke-dashoffset:0;}
  .btn--primary::after{display:none;}
  .card:hover,.tile:hover,.btn:hover{transform:none;}
}


/* ==== v3 set piece: schematic ==== */
/* Routing schematic set piece (.rsch)
   One request drawn end to end: stack, gate, four port doors, exit
   waypoints, target. Extends the v2 system; references existing tokens
   (--line, --line-2, --brass, --violet, --surface, --ease) and defines
   nothing global. All animation is decorative and reduced-motion gated. */

/* ============ Frame ============ */
.rsch{margin:2.6rem 0 0;border:1px solid var(--line-2);border-radius:var(--r-l);
  background:#0B1022;overflow:hidden;position:relative;
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 80px rgba(216,174,106,.10);}
.rsch__bar{display:flex;align-items:center;gap:.8rem;padding:.7rem 1.1rem;
  border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.66rem;
  letter-spacing:.13em;text-transform:uppercase;color:var(--dim);white-space:nowrap;}
.rsch__bar .t{color:var(--brass);font-weight:500;}
.rsch__bar .r{margin-left:auto;color:var(--dim);}
.rsch__beacon{width:7px;height:7px;border-radius:50%;background:var(--brass-hot);
  box-shadow:0 0 10px rgba(242,201,125,.9);flex:none;
  animation:rsch-pulse 2.4s ease-in-out infinite;}
.rsch__stage{padding:.4rem .7rem 0;}
.rsch__svg{display:block;width:100%;height:auto;}
.rsch__svg--v{display:none;max-width:460px;margin:0 auto;}
.rsch__caption{display:flex;align-items:baseline;gap:.9rem;margin:0;
  padding:.85rem 1.1rem .9rem;border-top:1px solid var(--line);
  background:rgba(19,26,51,.45);font-family:var(--mono);font-size:.72rem;
  line-height:1.65;letter-spacing:.04em;color:var(--dim);}
.rsch__cap-tag{color:var(--brass);border:1px solid var(--line);border-radius:6px;
  padding:.22rem .5rem;text-transform:uppercase;letter-spacing:.14em;
  font-size:.6rem;flex:none;transform:translateY(-.1em);}

/* ============ Diagram internals ============ */
.rsch__edge{fill:none;stroke:rgba(216,174,106,.38);stroke-width:1.5;}
.rsch__edge--main{stroke:rgba(216,174,106,.55);stroke-width:1.7;}
.rsch__edge--transit{stroke:rgba(169,177,205,.24);stroke-width:1.2;}
.rsch__chev{fill:none;stroke:rgba(216,174,106,.65);stroke-width:1.6;
  stroke-linecap:round;stroke-linejoin:round;}
.rsch__dim{stroke:rgba(216,174,106,.26);stroke-width:1;}
.rsch__node{fill:var(--surface);stroke:var(--line-2);}
.rsch__node-line{stroke:var(--line);stroke-width:1;}
.rsch__light{fill:rgba(216,174,106,.28);stroke:rgba(216,174,106,.35);}
.rsch__code{fill:rgba(169,177,205,.30);}
.rsch__code--hot{fill:rgba(242,201,125,.45);}
.rsch__door{fill:var(--surface);stroke:rgba(216,174,112,.28);}
.rsch__leaf{stroke:rgba(216,174,106,.35);stroke-width:1.5;}
.rsch__handle{fill:var(--brass);}
.rsch__field{fill:rgba(14,20,40,.6);stroke:var(--line);}
.rsch__tick{stroke:rgba(216,174,106,.30);stroke-width:1;}
.rsch__bezel{fill:none;stroke:rgba(216,174,106,.28);stroke-width:1;
  stroke-dasharray:2 7;transform-box:fill-box;transform-origin:center;
  animation:rsch-spin 80s linear infinite;}
.rsch__ring{fill:none;stroke:rgba(216,174,106,.14);stroke-width:1;}
.rsch__ring--mid{stroke:rgba(216,174,106,.5);}
.rsch__tgt-dot{fill:var(--brass-hot);
  filter:drop-shadow(0 0 6px rgba(242,201,125,.8));}
.rsch__wp-dot{fill:var(--brass);}
.rsch__halo{fill:none;stroke:rgba(216,174,106,.45);stroke-width:1;
  transform-box:fill-box;transform-origin:center;
  animation:rsch-halo 3.2s ease-out infinite;animation-delay:var(--hd,0s);}

/* Type inside the SVG */
.rsch__name{font:500 13.5px var(--mono);fill:#C9CFE4;letter-spacing:.08em;}
.rsch__sub{font:400 11.5px var(--mono);fill:var(--dim);letter-spacing:.06em;}
.rsch__name,.rsch__sub,.rsch__wp-code{paint-order:stroke;stroke:#0B1022;
  stroke-width:5;stroke-linejoin:round;}
.rsch__svg--v .rsch__port{font-size:20px;}
.rsch__port{font:500 22px var(--mono);fill:var(--brass-hot);letter-spacing:.04em;}
.rsch__type{font:500 11.5px var(--mono);fill:var(--dim);letter-spacing:.16em;
  text-transform:uppercase;}
.rsch__wp-code{font:500 10px var(--mono);fill:#8B94B5;letter-spacing:.1em;}
/* Microlabels knock out whatever they cross: panel bg is solid #0B1022 */
.rsch__ml{font:500 12px var(--mono);fill:var(--brass);letter-spacing:.09em;
  paint-order:stroke;stroke:#0B1022;stroke-width:6;stroke-linejoin:round;}
.rsch__ml--dim{fill:var(--dim);}
.rsch__ml--fail{fill:var(--violet);}

/* ============ Request dots ============ */
/* Hidden unless offset-path is supported; each dot carries its route
   inline as style="offset-path:path('...')" plus --dur and --del. */
.rsch__dot{display:none;}
@supports (offset-path: path("M0 0 H 8")){
  .rsch__dot{display:inline;fill:#F2C97D;
    filter:drop-shadow(0 0 5px rgba(242,201,125,.85));
    offset-rotate:0deg;offset-distance:0%;
    animation:rsch-travel var(--dur,7.5s) linear infinite;
    animation-delay:var(--del,0s);}
  .rsch__dot--fail{fill:var(--violet);
    filter:drop-shadow(0 0 5px rgba(169,139,201,.9));
    animation-name:rsch-bounce;animation-timing-function:ease-in-out;}
}

/* ============ JS enhancements (script.js) ============ */
/* Armed before first view: edges draw themselves in when scrolled to.
   Without JS nothing is armed and the diagram is simply visible. */
.rsch--armed .rsch__edge{stroke-dasharray:1;stroke-dashoffset:1;}
.rsch--armed .rsch__dot{visibility:hidden;}
.rsch--armed.is-live .rsch__edge{
  animation:rsch-draw .9s var(--ease) forwards;animation-delay:var(--dd,0s);}
.rsch--armed.is-live .rsch__dot{visibility:visible;}
/* Paused while scrolled out of view (perf only) */
.rsch--off .rsch__dot,.rsch--off .rsch__halo,.rsch--off .rsch__bezel{
  animation-play-state:paused;}

/* ============ Keyframes ============ */
@keyframes rsch-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}
@keyframes rsch-spin{to{transform:rotate(360deg);}}
@keyframes rsch-halo{0%{transform:scale(.5);opacity:.9;}
  80%,100%{transform:scale(1.9);opacity:0;}}
@keyframes rsch-draw{to{stroke-dashoffset:0;}}
@keyframes rsch-travel{
  0%{offset-distance:0%;opacity:0;}
  3%{opacity:1;}
  97%{opacity:1;}
  100%{offset-distance:100%;opacity:0;}}
@keyframes rsch-bounce{
  0%{offset-distance:0%;opacity:0;}
  6%{opacity:1;}
  40%{offset-distance:100%;}
  52%{offset-distance:100%;}
  92%{offset-distance:0%;opacity:1;}
  100%{offset-distance:0%;opacity:0;}}

/* ============ Responsive ============ */
@media(max-width:899px){
  .rsch{margin-top:2rem;}
  .rsch__svg--h{display:none;}
  .rsch__svg--v{display:block;}
  .rsch__stage{padding:.6rem .6rem 0;}
  .rsch__bar .r{display:none;}
  .rsch__caption{flex-direction:column;gap:.55rem;}
}

/* ============ Reduced motion: complete static schematic ============ */
@media(prefers-reduced-motion:reduce){
  .rsch__dot{display:none !important;}
  .rsch__beacon,.rsch__bezel{animation:none !important;}
  .rsch__halo{animation:none !important;opacity:.55;}
  .rsch--armed .rsch__edge{stroke-dasharray:none;stroke-dashoffset:0;
    animation:none !important;}
  .rsch--armed .rsch__dot{visibility:hidden;}
}


/* ==== v3 set piece: fareboard ==== */
/* Fareboard: pricing fare board + estimator deck (v3 set piece).
   Extends the v2 system, consumes its custom properties, defines nothing global.
   Every selector is scoped under .fareboard. No em or en dashes anywhere. */

.fareboard{
  position:relative;
  border:1px solid var(--line-2);
  border-radius:var(--r-l);
  background:
    radial-gradient(1100px 420px at 50% -10%,rgba(216,174,106,.07),transparent 62%),
    linear-gradient(180deg,rgba(19,26,51,.92),rgba(14,20,40,.97));
  box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 80px rgba(216,174,106,.08);
  overflow:hidden;
}

/* ---- Chrome bar + tick ruler ---- */
.fareboard__bar{display:flex;align-items:center;gap:.8rem;padding:.7rem 1.15rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.66rem;letter-spacing:.13em;text-transform:uppercase;color:var(--dim);white-space:nowrap;}
.fareboard__beacon{width:7px;height:7px;border-radius:50%;background:var(--brass-hot);box-shadow:0 0 10px rgba(242,201,125,.9);flex:none;animation:pulse 2.4s ease-in-out infinite;}
.fareboard__bar-t{color:var(--brass);font-weight:500;}
.fareboard__bar-r{margin-left:auto;overflow:hidden;text-overflow:ellipsis;}
.fareboard__ruler{height:10px;border-bottom:1px solid var(--line);background:
  repeating-linear-gradient(90deg,rgba(216,174,112,.55) 0 1px,transparent 1px 56px) left top/calc(100% + 1px) 10px no-repeat,
  repeating-linear-gradient(90deg,rgba(216,174,112,.22) 0 1px,transparent 1px 8px) left top/calc(100% + 1px) 6px no-repeat;}

/* ---- Board grid ---- */
.fareboard__grid{display:grid;grid-template-columns:repeat(4,1fr);}
.fareboard__col{display:flex;flex-direction:column;min-width:0;padding:1.8rem 1.6rem 1.5rem;position:relative;}
.fareboard__col + .fareboard__col{border-left:1px solid var(--line);}
.fareboard__col::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-dusk);opacity:0;transition:opacity .35s var(--ease);pointer-events:none;}
.fareboard__col::after{content:"";position:absolute;inset:0;background:radial-gradient(460px 340px at 50% 0%,rgba(242,201,125,.13),transparent 72%);opacity:0;transition:opacity .35s var(--ease);pointer-events:none;}
.fareboard__col:hover::before{opacity:.55;}
.fareboard__col:hover::after{opacity:1;}
.fareboard__col:hover .fareboard__name a{color:var(--brass-hot);}
.fareboard__col.is-tuned::before{opacity:1;box-shadow:0 0 14px rgba(242,201,125,.5);}
.fareboard__col.is-tuned::after{opacity:.8;}
.fareboard__col.is-tuned .fareboard__unit{color:var(--brass-hot);border-color:var(--line-2);}

/* ---- Column header ---- */
.fareboard__head{display:flex;align-items:center;justify-content:space-between;gap:.7rem;}
.fareboard__name{margin:0;font-size:1.26rem;font-weight:560;letter-spacing:-.01em;line-height:1.1;}
.fareboard__name a{color:var(--bright);text-decoration:none;transition:color .18s;}
.fareboard__name a:hover{color:var(--brass-hot);}
.fareboard__unit{font-family:var(--mono);font-size:.62rem;font-weight:500;letter-spacing:.1em;text-transform:uppercase;color:var(--brass);border:1px solid var(--line);border-radius:6px;padding:.26rem .5rem;background:rgba(10,14,28,.5);white-space:nowrap;flex:none;}

/* ---- Headline numeral ---- */
.fareboard__lead{margin:1.5rem 0 0;font-family:var(--serif);font-optical-sizing:auto;font-size:clamp(3rem,5vw,4.9rem);font-weight:480;letter-spacing:-.03em;line-height:.95;color:var(--bright);text-shadow:0 0 46px rgba(242,201,125,.42);white-space:nowrap;}
.fareboard__lead small{font-family:var(--mono);font-size:.78rem;font-weight:400;letter-spacing:.04em;color:var(--dim);text-shadow:none;margin-left:.12em;}
.fareboard__lead-tag{margin:.65rem 0 0;font-family:var(--mono);font-size:.64rem;letter-spacing:.15em;text-transform:uppercase;color:var(--dim);}

/* ---- Tier rows: tabular mono with dotted leaders ---- */
.fareboard__tiers{list-style:none;margin:1.35rem 0 1.2rem;padding:.55rem 0 0;border-top:1px solid var(--line);position:relative;}
.fareboard__tiers::before{content:"";position:absolute;top:-1px;left:0;width:34px;height:1px;background:var(--brass);box-shadow:0 0 8px rgba(216,174,106,.6);}
.fareboard__tier{display:flex;align-items:baseline;gap:.55rem;margin:0;padding:.5rem 0;font-family:var(--mono);font-variant-numeric:tabular-nums;}
.fareboard__vol{font-size:.78rem;letter-spacing:.02em;color:var(--dim);white-space:nowrap;}
.fareboard__dots{flex:1;min-width:.8rem;border-bottom:1px dotted rgba(169,177,205,.3);align-self:center;transform:translateY(.22em);}
.fareboard__rate{font-size:.95rem;font-weight:500;color:var(--bright);white-space:nowrap;}
.fareboard__rate small{font-size:.66rem;font-weight:400;letter-spacing:.02em;color:var(--dim);}

/* ---- Column footnote, bottom-aligned across columns ---- */
.fareboard__foot{margin:auto 0 0;padding-top:.9rem;border-top:1px dashed rgba(214,178,112,.18);font-family:var(--mono);font-size:.66rem;letter-spacing:.06em;line-height:1.6;color:var(--dim);}
.fareboard__foot b{color:var(--brass);font-weight:500;}

/* ---- Estimator deck (cockpit control row) ---- */
.fareboard__deck{border-top:1px solid var(--line-2);background:rgba(10,14,28,.6);position:relative;}
.fareboard__deck::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(216,174,106,.4),transparent);}

/* Segmented control, aligned with the four board columns */
.fareboard__seg{display:grid;grid-template-columns:repeat(4,1fr);border-bottom:1px solid var(--line);}
.fareboard__deck .fareboard__seg>*{border:0;border-left:1px solid var(--line);min-width:0;}
.fareboard__deck .fareboard__seg>*:first-child{border-left:0;}
.fareboard__seg-btn{appearance:none;background:none;font:500 .76rem/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--dim);padding:1rem .8rem;cursor:pointer;position:relative;transition:color .2s,background .2s;}
.fareboard__seg-btn::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:var(--grad-dusk);opacity:0;transition:opacity .25s;}
.fareboard__seg-btn:hover{color:var(--body);background:rgba(216,174,106,.05);}
.fareboard__seg-btn[aria-pressed="true"]{color:var(--brass-hot);background:rgba(216,174,106,.07);box-shadow:inset 0 16px 26px -20px rgba(242,201,125,.45);}
.fareboard__seg-btn[aria-pressed="true"]::before{opacity:1;box-shadow:0 0 12px rgba(242,201,125,.55);}
.fareboard__seg-btn:focus-visible{outline:2px solid var(--brass);outline-offset:-3px;border-radius:6px;}
.fareboard__seg-note{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.2rem;padding:.55rem .8rem;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);text-align:center;}
.fareboard__seg-note small{font-size:.55rem;letter-spacing:.12em;opacity:.75;}

/* Console: slider panel + glowing readout. The 1fr 1fr split keeps the console
   divider on the board's central column hairline. */
.fareboard__console{display:grid;grid-template-columns:1fr 1fr;}
.fareboard__panel{padding:1.5rem 1.7rem 1.7rem;min-width:0;display:grid;gap:1.2rem;align-content:center;}
.fareboard__readout{border-left:1px solid var(--line);padding:1.5rem 1.7rem 1.6rem;min-width:0;display:flex;flex-direction:column;align-items:flex-end;text-align:right;}
.fareboard--live .fareboard__type{display:none;}

/* Traffic label with live GB figure */
.fareboard__traffic label{display:flex;justify-content:space-between;align-items:baseline;gap:1rem;font-family:var(--mono);font-size:.64rem;font-weight:400;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);}
.fareboard__traffic [data-gb-label]{font-family:var(--mono);font-size:.92rem;font-weight:500;letter-spacing:.04em;color:var(--brass-hot);}

/* Tick-marked range slider */
.fareboard__slider{margin-top:.7rem;}
.fareboard__slider input{-webkit-appearance:none;appearance:none;display:block;width:100%;height:24px;margin:0;background:transparent;cursor:pointer;}
.fareboard__slider input:focus-visible{outline:2px solid var(--brass);outline-offset:4px;border-radius:6px;}
.fareboard__slider input::-webkit-slider-runnable-track{height:3px;border-radius:2px;background:linear-gradient(90deg,var(--brass) var(--fb-fill,54.05%),rgba(169,177,205,.2) 0);box-shadow:0 0 12px rgba(216,174,106,.25);}
.fareboard__slider input::-webkit-slider-thumb{-webkit-appearance:none;width:16px;height:16px;border-radius:50%;background:var(--brass-hot);border:3px solid rgba(10,14,28,.92);box-shadow:0 0 0 1px rgba(242,201,125,.8),0 0 16px rgba(242,201,125,.6);margin-top:-6.5px;}
.fareboard__slider input::-moz-range-track{height:3px;border-radius:2px;background:rgba(169,177,205,.2);}
.fareboard__slider input::-moz-range-progress{height:3px;border-radius:2px;background:var(--brass);}
.fareboard__slider input::-moz-range-thumb{width:10px;height:10px;border-radius:50%;background:var(--brass-hot);border:3px solid rgba(10,14,28,.92);box-shadow:0 0 0 1px rgba(242,201,125,.8),0 0 16px rgba(242,201,125,.6);}

/* Log scale ruler under the slider; inset by half thumb so marks track the thumb center */
.fareboard__scale{position:relative;height:26px;margin:2px 8px 0;
  background:
    repeating-linear-gradient(90deg,rgba(216,174,112,.4) 0 1px,transparent 1px 27.027%) left top/calc(100% + 1px) 9px no-repeat,
    repeating-linear-gradient(90deg,rgba(216,174,112,.15) 0 1px,transparent 1px 5.4054%) left top/calc(100% + 1px) 5px no-repeat;}
.fareboard__scale i{position:absolute;top:11px;transform:translateX(-50%);font-family:var(--mono);font-style:normal;font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim);white-space:nowrap;}
.fareboard__scale i:first-child{transform:none;}
.fareboard__scale i:last-child{transform:translateX(-100%);}

/* Readout */
.fareboard__out-label{font-family:var(--mono);font-size:.62rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim);}
.fareboard__readout output{display:block;margin-top:.4rem;font-family:var(--serif);font-optical-sizing:auto;font-size:clamp(2.4rem,3.4vw,3.3rem);font-weight:480;letter-spacing:-.02em;line-height:1;color:var(--bright);text-shadow:0 0 44px rgba(242,201,125,.5);white-space:nowrap;}
.fareboard .estimator__detail{margin:.7rem 0 0;font-family:var(--mono);font-size:.72rem;line-height:1.6;color:var(--dim);text-wrap:pretty;}
.fareboard .estimator__detail + .estimator__detail{margin-top:.2rem;}
@keyframes fareboardTick{from{text-shadow:0 0 60px rgba(242,201,125,.9),0 0 20px rgba(242,201,125,.5);}to{text-shadow:0 0 44px rgba(242,201,125,.5);}}
.fareboard__readout output.is-ticked{animation:fareboardTick .5s var(--ease);}

/* ---- Responsive: stacked product blocks under 900px, nothing lost ---- */
@media(max-width:1100px){
  .fareboard__col{padding:1.6rem 1.2rem 1.3rem;}
  .fareboard__name{font-size:1.1rem;}
  .fareboard__lead-tag{font-size:.58rem;letter-spacing:.1em;white-space:nowrap;}
  .fareboard__unit{font-size:.56rem;padding:.22rem .4rem;}
}
@media(max-width:899px){
  .fareboard__grid{grid-template-columns:1fr;}
  .fareboard__col{padding:1.7rem 1.4rem 1.5rem;}
  .fareboard__col + .fareboard__col{border-left:0;border-top:1px solid var(--line);}
  .fareboard__lead{font-size:clamp(2.9rem,11vw,3.6rem);}
  .fareboard__name{font-size:1.26rem;}
  .fareboard__bar-r{display:none;}
  .fareboard__seg{grid-template-columns:repeat(2,1fr);}
  .fareboard__deck .fareboard__seg>*{border-top:1px solid var(--line);}
  .fareboard__deck .fareboard__seg>*:nth-child(-n+2){border-top:0;}
  .fareboard__deck .fareboard__seg>*:nth-child(3){border-left:0;}
  .fareboard__console{grid-template-columns:1fr;}
  .fareboard__readout{border-left:0;border-top:1px solid var(--line);align-items:flex-start;text-align:left;}
}


/* ==== v3 set piece: retryflow ==== */
/* ============ Tiered-retry diagram (.rtflow) ============
   Set piece for quickstart section 05 and the datacenter page.
   Depends on system tokens from site.css: --surface --raised --line --line-2
   --bright --body --dim --brass --brass-hot --violet --mono --serif --r-l --ease.
   Defines nothing global, restyles nothing global. No JS required:
   dots travel on CSS offset-path; browsers without offset-path get the
   full static labeled diagram; reduced motion freezes dots at meaningful
   positions declared as base offset-distance values. */

.rtflow{margin:0;border:1px solid var(--line-2);border-radius:var(--r-l);background:linear-gradient(180deg,rgba(19,26,51,.92),rgba(14,20,40,.96));box-shadow:0 40px 90px -30px rgba(0,0,0,.7),0 0 80px rgba(216,174,106,.10);position:relative;overflow:hidden;}

/* Instrument bar */
.rtflow__bar{display:flex;align-items:center;gap:.8rem;padding:.7rem 1.1rem;border-bottom:1px solid var(--line);font-family:var(--mono);font-size:.7rem;letter-spacing:.13em;color:var(--dim);white-space:nowrap;}
.rtflow__beacon{width:7px;height:7px;border-radius:50%;background:var(--brass-hot);box-shadow:0 0 10px rgba(242,201,125,.9);flex:none;animation:rtflow-pulse 2.4s ease-in-out infinite;}
.rtflow__title{color:var(--brass);font-weight:500;}
.rtflow__note{margin-left:auto;color:var(--dim);}
@keyframes rtflow-pulse{0%,100%{opacity:1;}50%{opacity:.35;}}

/* Stage */
.rtflow__stage{position:relative;}
.rtflow__stage::before{content:"";position:absolute;inset:0;background:
  radial-gradient(520px 260px at 34% 30%,rgba(216,174,106,.06),transparent 70%),
  radial-gradient(460px 240px at 62% 78%,rgba(169,139,201,.07),transparent 70%);pointer-events:none;}
@media(min-width:701px){
  .rtflow__stage::after{content:"";position:absolute;left:1.4rem;right:1.4rem;bottom:.7rem;height:9px;opacity:.55;pointer-events:none;background:
    repeating-linear-gradient(90deg,rgba(216,174,112,.32) 0 1px,transparent 1px 56px) left top/100% 9px no-repeat,
    repeating-linear-gradient(90deg,rgba(216,174,112,.12) 0 1px,transparent 1px 8px) left top/100% 5px no-repeat;}
}
.rtflow__contour{fill:none;stroke:rgba(169,177,205,.10);stroke-width:1;}
.rtflow__svg{display:block;width:100%;height:auto;}
.rtflow__svg--tall{display:none;}

/* Routes */
.rtflow__route{fill:none;stroke:rgba(216,174,106,.34);stroke-width:1.6;}
.rtflow__route--retry{stroke:rgba(169,139,201,.52);stroke-dasharray:5 7;}
.rtflow__chev{fill:none;stroke:rgba(216,174,106,.55);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;}
.rtflow__chev--retry{stroke:rgba(169,139,201,.75);}

/* Nodes */
.rtflow__nodedot{fill:var(--brass);}
.rtflow__nodehalo{fill:none;stroke:rgba(216,174,106,.4);stroke-width:1;}
.rtflow__ring{fill:none;stroke:rgba(216,174,106,.55);stroke-width:1.2;}

/* Doors */
.rtflow__door{fill:rgba(216,174,106,.05);stroke:var(--line-2);stroke-width:1.2;}
.rtflow__door--res{fill:rgba(169,139,201,.06);stroke:rgba(169,139,201,.45);}
.rtflow__sill{stroke:rgba(242,201,125,.6);stroke-width:2;stroke-dasharray:1.5 5;stroke-linecap:round;filter:drop-shadow(0 0 6px rgba(242,201,125,.55));}
.rtflow__sill--res{stroke:rgba(169,139,201,.75);filter:drop-shadow(0 0 6px rgba(169,139,201,.6));}
.rtflow__diamond{fill:var(--brass);}
.rtflow__diamond--res{fill:var(--violet);}

/* Labels: mono, lowercase by convention */
.rtflow__lbl{font-family:var(--mono);font-size:15px;letter-spacing:.08em;fill:rgba(169,177,205,.92);}
.rtflow__lbl--dim{fill:rgba(122,131,162,.9);font-size:13px;}
.rtflow__lbl--blocked{fill:var(--violet);font-size:14px;letter-spacing:.12em;}
.rtflow__chip{fill:rgba(10,14,28,.55);stroke:var(--line);stroke-width:1;}
.rtflow__chip--res{stroke:rgba(169,139,201,.35);}
.rtflow__price{font-family:var(--mono);font-size:14px;font-weight:500;letter-spacing:.04em;fill:var(--brass-hot);}
.rtflow__price--res{fill:var(--violet);}
.rtflow__svg--tall .rtflow__lbl{font-size:16px;}
.rtflow__svg--tall .rtflow__lbl--blocked{font-size:15px;}
.rtflow__svg--tall .rtflow__price{font-size:15px;}

/* Request dots. Hidden unless offset-path is supported; base offset-distance
   values below double as the frozen reduced-motion composition. */
.rtflow__dot{display:none;}
.rtflow__ping{opacity:0;transform-box:fill-box;transform-origin:center;fill:none;stroke:var(--violet);stroke-width:1.7;filter:drop-shadow(0 0 5px rgba(169,139,201,.7));}
@supports (offset-path:path("M0 0 L10 10")){
  .rtflow__dot{display:block;fill:currentColor;color:var(--brass-hot);filter:drop-shadow(0 0 5px currentColor);}
  .rtflow__dot--retry{color:var(--violet);}

  /* Wide composition: lanes y 140 and 310 */
  .rtflow__svg--wide .rtflow__dot--pass{offset-path:path("M80 140 L1040 140");animation:rtflow-kf-pass 7s linear infinite;}
  .rtflow__svg--wide .rtflow__dot--retry{offset-path:path("M80 140 L430 140 C540 140 560 310 700 310 C840 310 950 140 1040 140");animation:rtflow-kf-retry-w 8s linear infinite;}
  .rtflow__svg--wide .rtflow__ping{animation:rtflow-kf-ping-w 8s linear infinite;}

  /* Tall composition: lane x 220 */
  .rtflow__svg--tall .rtflow__dot--pass{offset-path:path("M220 60 L220 560");animation:rtflow-kf-pass 5.6s linear infinite;}
  .rtflow__svg--tall .rtflow__dot--retry{offset-path:path("M220 60 L220 230 C220 310 350 315 350 395 C350 475 220 480 220 560");animation:rtflow-kf-retry-t 7.2s linear infinite;}
  .rtflow__svg--tall .rtflow__ping{animation:rtflow-kf-ping-t 7.2s linear infinite;}

  /* Frozen positions (used when animations are off) and loop staggering.
     Wide door sits at 36.46% of the pass lane, 32.77% of the retry path.
     Selectors carry .rtflow__svg so animation-delay outranks the shorthand
     above, which would otherwise reset every delay to 0s. */
  .rtflow__svg .rtflow__dot--p1{offset-distance:8%;animation-delay:0s;}
  .rtflow__svg .rtflow__dot--p2{offset-distance:22%;animation-delay:-1.2s;}
  .rtflow__svg .rtflow__dot--p3{offset-distance:36%;animation-delay:-2.3s;}
  .rtflow__svg .rtflow__dot--p4{offset-distance:55%;animation-delay:-3.6s;}
  .rtflow__svg .rtflow__dot--p5{offset-distance:72%;animation-delay:-4.7s;}
  .rtflow__svg .rtflow__dot--p6{offset-distance:89%;animation-delay:-5.8s;}
  .rtflow__svg .rtflow__dot--r1{offset-distance:52%;animation-delay:-.6s;}
  .rtflow__svg .rtflow__dot--r2{offset-distance:64%;animation-delay:-4.6s;}
  .rtflow__svg .rtflow__ping--a{animation-delay:-.6s;}
  .rtflow__svg .rtflow__ping--b{animation-delay:-4.6s;}
  .rtflow__svg--tall .rtflow__dot--p2{animation-delay:-.9s;}
  .rtflow__svg--tall .rtflow__dot--p3{offset-distance:34%;animation-delay:-1.9s;}
  .rtflow__svg--tall .rtflow__dot--p4{animation-delay:-2.8s;}
  .rtflow__svg--tall .rtflow__dot--p5{animation-delay:-3.7s;}
  .rtflow__svg--tall .rtflow__dot--p6{animation-delay:-4.7s;}
  .rtflow__svg--tall .rtflow__dot--r1{offset-distance:48%;animation-delay:-.5s;}
  .rtflow__svg--tall .rtflow__dot--r2{animation-delay:-4.1s;}
}

/* Travel. Retry dots stall at the datacenter door, turn violet, reroute. */
@keyframes rtflow-kf-pass{
  0%{offset-distance:0%;opacity:0;}
  4%{opacity:1;}
  96%{opacity:1;}
  100%{offset-distance:100%;opacity:0;}
}
@keyframes rtflow-kf-retry-w{
  0%{offset-distance:0%;color:var(--brass-hot);opacity:0;}
  4%{opacity:1;}
  31.1%{offset-distance:32.77%;}
  33.4%{color:var(--brass-hot);}
  35.2%{color:var(--violet);}
  36.1%{offset-distance:32.77%;}
  96%{opacity:1;}
  100%{offset-distance:100%;color:var(--violet);opacity:0;}
}
@keyframes rtflow-kf-retry-t{
  0%{offset-distance:0%;color:var(--brass-hot);opacity:0;}
  4%{opacity:1;}
  26.4%{offset-distance:27.84%;}
  28.6%{color:var(--brass-hot);}
  30.4%{color:var(--violet);}
  31.4%{offset-distance:27.84%;}
  96%{opacity:1;}
  100%{offset-distance:100%;color:var(--violet);opacity:0;}
}
@keyframes rtflow-kf-ping-w{
  0%,29%{opacity:0;transform:scale(.4);}
  33%{opacity:.95;transform:scale(1);}
  45%{opacity:0;transform:scale(2.6);}
  100%{opacity:0;transform:scale(2.6);}
}
@keyframes rtflow-kf-ping-t{
  0%,24%{opacity:0;transform:scale(.4);}
  28%{opacity:.85;transform:scale(1);}
  39%{opacity:0;transform:scale(2.4);}
  100%{opacity:0;transform:scale(2.4);}
}

/* Footer: legend carries the meaning in real text, caption stays honest.
   figcaption sits outside .rtflow__foot (it must be a direct child of figure)
   but shares its background so the strip reads as one instrument panel. */
.rtflow__foot{display:flex;flex-wrap:wrap;align-items:flex-start;gap:.6rem 2.2rem;padding:.9rem 1.15rem .55rem;border-top:1px solid var(--line);background:rgba(10,14,28,.55);}
.rtflow__key{margin:0;font-family:var(--mono);font-size:.74rem;line-height:1.65;letter-spacing:.02em;color:var(--body);display:flex;align-items:flex-start;gap:.55rem;}
.rtflow__key b{font-weight:500;color:var(--brass-hot);}
.rtflow__key--retry b{color:var(--violet);}
.rtflow__swatch{width:8px;height:8px;border-radius:50%;flex:none;margin-top:.42em;background:var(--brass-hot);box-shadow:0 0 8px rgba(242,201,125,.8);}
.rtflow__swatch--retry{background:var(--violet);box-shadow:0 0 8px rgba(169,139,201,.8);}
.rtflow__caption{margin:0;padding:0 1.15rem .9rem;background:rgba(10,14,28,.55);font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;color:var(--dim);}

/* Tall layout under 700px */
@media(max-width:700px){
  .rtflow__svg--wide{display:none;}
  .rtflow__svg--tall{display:block;max-width:420px;margin:0 auto;}
  .rtflow__note{display:none;}
  .rtflow__foot{gap:.55rem 1.4rem;}
}

/* Reduced motion: complete static diagram, dots at their base positions */
@media(prefers-reduced-motion:reduce){
  .rtflow__beacon,.rtflow__dot,.rtflow__ping{animation:none !important;}
  .rtflow__ping{opacity:0;}
}


/* ==== v3 set piece: manifest ==== */
/* ProxyNomad v3 set piece: THE COMPARISON MANIFEST.
   Block: .manifest
   Presentation-only redesign of the market comparison table. Real table
   semantics stay intact (table, thead, th scope, tbody). The ProxyNomad
   column is a raised, brass-lit panel floating above the table plane;
   competitor columns recede; row leads are large Fraunces labels; rows
   divide with thin tick rules; the scroller carries edge fades at 390px.
   Depends on site.css custom properties: --serif --sans --mono --bright
   --body --dim --muted --brass --brass-hot --violet --night --raised
   --line --line-2 --grad-dusk --ease. Redefines no tokens, restyles no
   global class. */

.manifest{position:relative;}
.manifest__frame{position:relative;}

/* ---- Scroller (the table plane) ---- */
.manifest__scroll{
  overflow-x:auto;
  padding:30px 2px 40px;
  scrollbar-width:thin;
  scrollbar-color:rgba(216,174,106,.45) rgba(19,26,51,.6);
}
.manifest__scroll::-webkit-scrollbar{height:8px;}
.manifest__scroll::-webkit-scrollbar-thumb{background:rgba(216,174,106,.4);border-radius:4px;}
.manifest__scroll::-webkit-scrollbar-track{background:rgba(19,26,51,.6);}
.manifest__scroll:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:8px;}

/* ---- Table skeleton ---- */
/* The wrap div sizes with the table (block min-width) so the aura can be
   placed with percentages that always match the fixed column layout. */
.manifest__tablewrap{position:relative;min-width:880px;}
.manifest__table{
  width:100%;
  min-width:0;
  table-layout:fixed;
  border-collapse:separate;
  border-spacing:0;
  font-size:.95rem;
}
.manifest__table th,
.manifest__table td{
  padding:1.55rem 1.5rem;
  text-align:left;
  vertical-align:top;
  line-height:1.6;
  border:0;
}
.manifest__table thead th:first-child{width:20%;}
.manifest__table thead th:nth-child(2){width:33%;}
.manifest__table thead th:nth-child(3),
.manifest__table thead th:nth-child(4){width:23.5%;}

/* ---- Column heads: competitors stay quiet mono chrome ---- */
.manifest__table thead th{
  font-family:var(--mono);
  font-size:.68rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
  vertical-align:bottom;
  padding-top:.5rem;
  padding-bottom:1.05rem;
  border-bottom:1px solid var(--line-2);
}

/* ---- Row leads: the Fraunces ledger column ---- */
.manifest__table tbody th[scope="row"]{
  font-family:var(--serif);
  font-size:1.32rem;
  font-weight:600;
  letter-spacing:-.012em;
  line-height:1.22;
  color:var(--bright);
  padding-right:2rem;
}
.manifest__idx{
  display:block;
  font-family:var(--mono);
  font-size:.62rem;
  font-weight:500;
  letter-spacing:.2em;
  color:rgba(216,174,106,.55);
  margin-bottom:.45rem;
}

/* ---- Competitor columns recede: dimmer, borderless ---- */
.manifest__table tbody td:nth-child(3),
.manifest__table tbody td:nth-child(4){
  color:var(--muted);
  font-size:.92rem;
}

/* ---- Thin tick dividers between rows (plane columns only) ---- */
.manifest__table tbody tr+tr th,
.manifest__table tbody tr+tr td:nth-child(3),
.manifest__table tbody tr+tr td:nth-child(4){
  background-image:repeating-linear-gradient(90deg,rgba(216,174,106,.30) 0 4px,transparent 4px 11px);
  background-size:100% 1px;
  background-repeat:no-repeat;
  background-position:0 0;
}
/* Closing rule under the last row of the plane */
.manifest__table tbody tr:last-child th,
.manifest__table tbody tr:last-child td:nth-child(3),
.manifest__table tbody tr:last-child td:nth-child(4){
  border-bottom:1px solid var(--line);
}

/* ---- The ProxyNomad column: raised brass-lit panel ----
   The panel is drawn by two cooperating layers that share one transform:
   the cells carry backgrounds and type, the aura (a single aria-hidden
   div aligned to the column by the same percentages as the fixed layout)
   carries the border ring, the brass top cap, the rounded silhouette and
   ONE unified elevation shadow. No per-cell shadow seams. */
.manifest__aura{
  position:absolute;
  top:0;bottom:0;
  left:20%;width:33%;
  z-index:2;
  pointer-events:none;
  border:1px solid rgba(216,174,106,.36);
  border-radius:12px;
  overflow:hidden;
  transform:translateY(-12px);
  transition:transform .9s var(--ease);
  box-shadow:
    0 34px 70px -34px rgba(0,0,0,.9),
    0 12px 34px -20px rgba(0,0,0,.75),
    0 -18px 44px -32px rgba(0,0,0,.7),
    0 0 80px rgba(216,174,106,.10),
    0 22px 60px -24px rgba(216,174,106,.16),
    0 -10px 36px -14px rgba(242,201,125,.20);
}
/* Brass top cap, clipped to the aura silhouette */
.manifest__aura::before{
  content:"";
  position:absolute;
  top:0;left:0;right:0;
  height:3px;
  background:var(--grad-dusk);
  box-shadow:0 2px 14px rgba(242,201,125,.45);
  transform-origin:left center;
  transition:transform .9s var(--ease) .18s,opacity .45s .18s;
}
.manifest__table thead th:nth-child(2),
.manifest__table tbody td:nth-child(2){
  transform:translateY(-12px);
  transition:transform .9s var(--ease);
}
.manifest__table thead th:nth-child(2){
  font-family:var(--serif);
  font-size:1.34rem;
  font-weight:580;
  letter-spacing:-.012em;
  text-transform:none;
  color:var(--bright);
  padding:1.4rem 1.8rem 1.05rem;
  border-bottom:0;
  border-radius:12px 12px 0 0;
  background:linear-gradient(180deg,rgba(242,201,125,.16),rgba(216,174,106,.065) 82%),var(--raised);
}
.manifest__brand{display:inline-flex;align-items:center;gap:.6rem;}
.manifest__mark{width:19px;height:19px;flex:none;color:var(--brass-hot);filter:drop-shadow(0 0 8px rgba(242,201,125,.75));transform:translateY(-1px);}

.manifest__table tbody td:nth-child(2){
  font-size:1.02rem;
  color:#C9CFE4;
  padding:1.55rem 1.8rem;
  background:linear-gradient(180deg,rgba(216,174,106,.065),rgba(216,174,106,.065)),var(--raised);
}
/* Inner hairlines between panel rows */
.manifest__table tbody tr+tr td:nth-child(2){
  border-top:1px solid rgba(216,174,106,.14);
}
/* Panel base fades toward the plane */
.manifest__table tbody tr:last-child td:nth-child(2){
  border-radius:0 0 12px 12px;
  background:linear-gradient(180deg,rgba(216,174,106,.065),rgba(216,174,106,.035)),var(--raised);
}
/* Keyword terms inside the panel */
.manifest__key{color:var(--brass-hot);font-weight:600;}
.manifest__key::before{content:"\2713\00a0";color:var(--brass);font-weight:400;}

/* ---- Entrance: primed by JS, settles upward on first view.
       Reduced motion never primes; no JS never primes. ---- */
.manifest--prime .manifest__aura,
.manifest--prime .manifest__table thead th:nth-child(2),
.manifest--prime .manifest__table tbody td:nth-child(2){transform:translateY(0);}
.manifest--prime .manifest__aura::before{transform:scaleX(0);opacity:0;}

/* ---- Edge fades: scroll affordance on narrow viewports ---- */
.manifest__frame::before,
.manifest__frame::after{
  content:"";
  position:absolute;
  top:0;bottom:12px;
  width:90px;
  z-index:6;
  pointer-events:none;
  opacity:0;
  transition:opacity .3s;
}
.manifest__frame::before{left:0;background:linear-gradient(90deg,var(--night) 28%,rgba(14,20,40,0));}
.manifest__frame::after{right:0;background:linear-gradient(270deg,var(--night) 28%,rgba(14,20,40,0));}
.manifest[data-fade~="l"] .manifest__frame::before{opacity:1;}
.manifest[data-fade~="r"] .manifest__frame::after{opacity:1;}

.manifest__hint{
  display:none;
  margin:.1rem 2px 0;
  font-family:var(--mono);
  font-size:.66rem;
  font-weight:500;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--dim);
}
.manifest__hint::before{
  content:"";
  display:inline-block;
  width:18px;
  height:1px;
  background:var(--brass);
  margin-right:.55rem;
  vertical-align:middle;
}
.manifest[data-fade~="l"] .manifest__hint,
.manifest[data-fade~="r"] .manifest__hint{display:block;}

/* No-JS fallback: below the width where the table starts to scroll,
   show the right fade and the hint. JS always sets data-fade, so this
   only fires when script.js is absent or blocked. */
@media(max-width:939px){
  .manifest:not([data-fade]) .manifest__frame::after{opacity:1;}
  .manifest:not([data-fade]) .manifest__hint{display:block;}
}

/* ---- Narrow tuning ---- */
@media(max-width:640px){
  .manifest__scroll{padding-top:26px;padding-bottom:34px;}
  .manifest__table{min-width:820px;}
  .manifest__table th,
  .manifest__table td{padding:1.35rem 1.25rem;}
  .manifest__table tbody th[scope="row"]{font-size:1.18rem;}
  .manifest__table thead th:nth-child(2){font-size:1.22rem;padding:1.25rem 1.5rem .95rem;}
  .manifest__table tbody td:nth-child(2){padding:1.35rem 1.5rem;}
}


/* ==== v3 set piece: interlude ==== */
/* ProxyNomad v3 setpiece: .interlude + .route-divider.
   Extends site.css tokens. Defines no tokens, restyles no global class.
   Depends on: --void --dim --bright --brass --brass-hot --serif --mono
   --noise --ease, and the global .horizon / .acc / .wrap patterns. */

/* ============ Interlude ============ */
/* The one loud typographic moment on the page. One per page, on the
   void canvas, closed by the horizon signature at its base. */
.interlude{position:relative;overflow:hidden;text-align:center;padding:clamp(6.5rem,12vw,10.5rem) 0 clamp(7.5rem,13vw,11.5rem);background:
  radial-gradient(90% 70% at 50% 122%,rgba(242,201,125,.13),rgba(201,146,78,.05) 46%,transparent 74%),
  radial-gradient(56% 46% at 10% -10%,rgba(169,139,201,.10),transparent 60%),
  radial-gradient(56% 46% at 90% -10%,rgba(169,139,201,.08),transparent 60%),
  var(--void);}
.interlude::before{content:"";position:absolute;inset:0;background:var(--noise);opacity:.025;pointer-events:none;}
.interlude::after{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,rgba(216,174,106,.22),transparent);}

.interlude__coords{display:flex;align-items:center;justify-content:center;gap:.95rem;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.2em;color:var(--dim);margin:0 0 clamp(1.7rem,3vw,2.5rem);}
.interlude__coords::before,.interlude__coords::after{content:"";height:1px;width:clamp(20px,4vw,34px);flex:none;}
.interlude__coords::before{background:linear-gradient(90deg,transparent,rgba(216,174,106,.45));}
.interlude__coords::after{background:linear-gradient(270deg,transparent,rgba(216,174,106,.45));}

.interlude__quote{font-family:var(--serif);font-optical-sizing:auto;font-weight:500;font-size:clamp(2.3rem,4.6vw,4rem);line-height:1.14;letter-spacing:-.024em;color:var(--bright);text-wrap:balance;max-width:21ch;margin:0 auto;text-shadow:0 0 80px rgba(242,201,125,.2);}

/* ============ Route divider ============ */
/* Between-acts separator: dashed route on the content width, waypoint
   diamond at the midpoint, coordinate ticks along the run. Draws itself
   on scroll (JS + motion allowed); fully drawn otherwise. */
.route-divider{position:relative;}
.route-divider__in{position:relative;}
.route-divider__svg{display:block;width:100%;height:44px;}
.route-divider__dash{stroke:rgba(216,174,106,.45);stroke-width:1;stroke-dasharray:6 7;}
.route-divider__end{stroke:rgba(216,174,106,.5);stroke-width:1;}
.route-divider__major line{stroke:rgba(216,174,106,.38);stroke-width:1;}
.route-divider__minor line{stroke:rgba(216,174,106,.15);stroke-width:1;}
.route-divider__wipe{stroke:#fff;stroke-width:44;fill:none;stroke-dasharray:1;stroke-dashoffset:0;}

.route-divider__wp{position:absolute;left:50%;top:22px;width:7px;height:7px;background:var(--brass-hot);transform:translate(-50%,-50%) rotate(45deg);box-shadow:0 0 16px 3px rgba(242,201,125,.4);}
.route-divider__wp::after{content:"";position:absolute;inset:-5px;border:1px solid rgba(216,174,106,.32);}

@media(max-width:640px){
  .interlude__coords{font-size:.6rem;letter-spacing:.12em;gap:.65rem;}
  .interlude__coords::before,.interlude__coords::after{width:16px;}
  .route-divider__minor{display:none;}
}

/* Draw-in states. Applied by script.js only; double-gated on motion:
   the script never arms under reduced motion, and this block is inert
   there too, so the divider stays fully drawn. */
@media (prefers-reduced-motion:no-preference){
  .route-divider.is-armed .route-divider__wipe{stroke-dashoffset:1;transition:stroke-dashoffset 1.5s var(--ease) .15s;}
  .route-divider.is-armed .route-divider__wp{opacity:0;transform:translate(-50%,-50%) rotate(45deg) scale(.35);transition:opacity .5s var(--ease),transform .6s var(--ease);}
  .route-divider.is-in .route-divider__wipe{stroke-dashoffset:0;}
  .route-divider.is-in .route-divider__wp{opacity:1;transform:translate(-50%,-50%) rotate(45deg) scale(1);}
}


/* ==== v3 set piece: emblems ==== */
/* ProxyNomad emblems: four product identity marks. Block name: emblem.
   Extends site.css tokens only. Defines nothing global, redefines no token.
   The SVGs are self-contained (no ids, no defs, no external refs) and carry
   vector-effect non-scaling-stroke, so the same mark holds hairline weight at
   360px and stays legible at 40px. Decorative throughout: aria-hidden markup,
   pointer-events none, all motion gated behind prefers-reduced-motion. */

.emblem{display:block;width:100%;height:auto;}

/* ---- Variant: page-hero ornament (360px class, low opacity, behind copy).
   Parent must be position:relative with overflow hidden (.page-hero is).
   Pair with .emblem-scope on the sibling .wrap so copy paints above. */
.emblem-orn{position:absolute;top:50%;right:clamp(1rem,6vw,6.5rem);transform:translateY(-50%);height:min(360px,96%);aspect-ratio:1;width:auto;max-width:44vw;opacity:.5;pointer-events:none;user-select:none;z-index:0;
  -webkit-mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);
  mask-image:radial-gradient(closest-side,#000 70%,transparent 100%);}
.emblem-scope{position:relative;z-index:1;}

/* ---- Variant: card watermark (40px class). Parent is a .card or .tile,
   which are position:relative with overflow hidden already. */
.emblem-mark{position:absolute;right:1.1rem;top:1.1rem;width:40px;height:40px;opacity:.65;pointer-events:none;user-select:none;}
.emblem-mark .emblem{width:100%;height:100%;}
.card:hover .emblem-mark,.tile:hover .emblem-mark{opacity:.95;transition:opacity .3s var(--ease);}

/* ---- Variant: identity slot. Drop the mark into an existing 40px icon tile
   (.pcard__ic) in place of the generic sprite icon. */
.pcard__ic .emblem{width:32px;height:32px;}

/* ---- Motion: hero-ornament scale only, and only when motion is welcome.
   Watermarks never animate. Nothing here carries information. */
@media (prefers-reduced-motion:no-preference){
  /* residential: the primary household halo breathes */
  .emblem-orn .e-halo{transform-box:fill-box;transform-origin:center;animation:embHalo 3.6s var(--ease) infinite;}
  /* mobile: arcs ripple outward from the moving dot */
  .emblem-orn .e-a1{animation:embArc 3.2s ease-in-out infinite;}
  .emblem-orn .e-a2{animation:embArc 3.2s ease-in-out .3s infinite;}
  .emblem-orn .e-a3{animation:embArc 3.2s ease-in-out .6s infinite;}
  .emblem-orn .e-a4{animation:embArc 3.2s ease-in-out .9s infinite;}
  /* isp: the orbit marker circles the fixed diamond, slow as a watch hand */
  .emblem-orn .e-orbit{transform-box:view-box;transform-origin:50% 50%;animation:embOrbit 46s linear infinite;}
  /* datacenter: traffic flows along the lit route */
  .emblem-orn .e-route{stroke-dasharray:7 9;animation:embFlow 1.9s linear infinite;}
}
@keyframes embHalo{0%{transform:scale(.68);opacity:.95;}72%,100%{transform:scale(1.28);opacity:0;}}
@keyframes embArc{0%,100%{opacity:.45;}35%{opacity:1;}}
@keyframes embOrbit{to{transform:rotate(360deg);}}
@keyframes embFlow{to{stroke-dashoffset:-64;}}

/* ---- Small screens: the ornament recedes further so copy never fights it */
@media(max-width:899px){
  .emblem-orn{top:auto;bottom:-70px;right:-56px;transform:none;height:auto;width:280px;max-width:none;opacity:.28;}
}