/* APERTURA shared layer, Concept A "Cable Park Daylight".
   Owned by the foundation stage. Pages add their own CSS in /assets/css/<page>.css;
   if you must add something here, append it at the end inside a clearly marked
   "PAGE SECTION: <page>" block.

   Catalogue (class names to reuse):
     type ........ .display .label .h2 .h3 .page-title .page-lede .muted .small .num .link
     layout ...... .wrap .sec .rev .band-2 .row .stack .grid .grid-2 .grid-3 .split
     page head ... .page-head (.kick + .page-title + .page-lede)
     header ...... .top .brand .nav [aria-current=page] .menu-btn (mobile below 900 px)
     footer ...... .foot
     buttons ..... .btn (signal CTA) .btn.sm .btn.ghost>span .btn.ink .btn.text .btn-row
     forms ....... .field .input select textarea .hint .err .seg (segmented radios) .drop (drop zone) .range
     cards ....... .card .card.decal .card.flat .card-h
     readout ..... .mrows > .mrow (label, value, .est) .tiles > .tile .chip .badge .est
     tables ...... .table-wrap > table.table (th, td, .num)
     feedback .... .toasts > .toast(.warn|.error) .notice(.warn) .empty
     modal ....... dialog.modal (.modal-b, .modal-f)
     progress .... .progress > span (style="--p:42%") .progress.indet .pipeline > li[data-state]
     charts ...... svg.chart .ch-grid .ch-axis .ch-tick .ch-line(.lake|.dash) .ch-area .ch-bar .ch-dot
                   .ch-event .ch-band .ch-handle .legend .sw
     misc ........ .grain (photo grain) .sr-only .kbd .rv (reveal on scroll, wired by nav.js)
*/

/* ---------- fonts (self-hosted, SIL OFL 1.1, see /assets/fonts/OFL.txt) ---------- */
@font-face{font-family:"Sofia Sans Extra Condensed";font-style:italic;font-display:swap;font-weight:1 1000;
  src:url(../fonts/sofia-sans-extra-condensed-latin-wght-italic.woff2) format("woff2-variations"),url(../fonts/sofia-sans-extra-condensed-latin-wght-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Sans Extra Condensed";font-style:italic;font-display:swap;font-weight:1 1000;
  src:url(../fonts/sofia-sans-extra-condensed-latin-ext-wght-italic.woff2) format("woff2-variations"),url(../fonts/sofia-sans-extra-condensed-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sofia Sans Semi Condensed";font-style:normal;font-display:swap;font-weight:1 1000;
  src:url(../fonts/sofia-sans-semi-condensed-latin-wght-normal.woff2) format("woff2-variations"),url(../fonts/sofia-sans-semi-condensed-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Sans Semi Condensed";font-style:normal;font-display:swap;font-weight:1 1000;
  src:url(../fonts/sofia-sans-semi-condensed-latin-ext-wght-normal.woff2) format("woff2-variations"),url(../fonts/sofia-sans-semi-condensed-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sofia Sans";font-style:normal;font-display:swap;font-weight:1 1000;
  src:url(../fonts/sofia-sans-latin-wght-normal.woff2) format("woff2-variations"),url(../fonts/sofia-sans-latin-wght-normal.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Sans";font-style:normal;font-display:swap;font-weight:1 1000;
  src:url(../fonts/sofia-sans-latin-ext-wght-normal.woff2) format("woff2-variations"),url(../fonts/sofia-sans-latin-ext-wght-normal.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Sofia Sans";font-style:italic;font-display:swap;font-weight:1 1000;
  src:url(../fonts/sofia-sans-latin-wght-italic.woff2) format("woff2-variations"),url(../fonts/sofia-sans-latin-wght-italic.woff2) format("woff2");
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Sofia Sans";font-style:italic;font-display:swap;font-weight:1 1000;
  src:url(../fonts/sofia-sans-latin-ext-wght-italic.woff2) format("woff2-variations"),url(../fonts/sofia-sans-latin-ext-wght-italic.woff2) format("woff2");
  unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* ---------- tokens (identical to concepts/A/tokens.css) ---------- */
:root{
  --paper:#F3ECDF; --paper-2:#E9DFCC; --paper-3:#D8CAAE; --kicker:#FBF8F2;
  --ink:#0F2E28; --ink-2:#23473F; --lake:#3F6F5F; --muted:#56635A;
  --signal:#FF4F12; --signal-ink:#C93A06;
  /* contrast-safe variants (AA): small orange text on paper, small orange text on ink,
     small ink text on a signal fill, focus ring colour (ink on light, paper on dark) */
  --signal-text:#A83004; --signal-on-ink:#FF6633; --ink-on-signal:#0A2420; --focus:var(--ink);
  --rule:rgba(15,46,40,.16); --rule-rev:rgba(243,236,223,.18);

  --f-display:"Sofia Sans Extra Condensed","Arial Narrow",sans-serif;
  --f-label:"Sofia Sans Semi Condensed","Arial Narrow",sans-serif;
  --f-body:"Sofia Sans",system-ui,sans-serif;

  --t-hero:clamp(5.6rem,10.4vw,13.5rem);
  --t-h2:clamp(3.4rem,6vw,7.5rem);
  --t-h3:clamp(2rem,2.6vw,3rem);
  --t-metric:clamp(1.9rem,2.3vw,2.75rem);
  --t-lede:clamp(1.125rem,1.25vw,1.45rem);
  --t-body:1.0625rem;
  --t-small:.9375rem;
  --t-label:.8125rem;
  --lh-display:.84;
  --lh-body:1.5;
  --track-label:.14em;

  --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px;
  --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:144px;
  --gutter:clamp(16px,2.9vw,56px);

  --slant:-10deg;
  --radius:2px;
  --shadow-hard:5px 5px 0 var(--ink);
  --ease:cubic-bezier(.2,.7,.2,1);
  --header-h:84px;
}

/* ---------- base ---------- */
*{box-sizing:border-box;margin:0;padding:0}
html{background:var(--paper);scroll-behavior:smooth;-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{background:var(--paper);color:var(--ink);font:400 var(--t-body)/var(--lh-body) var(--f-body);overflow-x:hidden;-webkit-font-smoothing:antialiased;min-height:100vh;display:flex;flex-direction:column}
body>main{flex:1 0 auto}
body::after{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.09;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.18 0 0 0 0 0.16 0 0 0 1.1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
a{color:inherit;text-decoration:none}
img,video,canvas,svg{display:block;max-width:100%}
img,video{height:auto}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
[hidden]{display:none!important}
::selection{background:var(--ink);color:var(--paper)}
.label{font:700 var(--t-label)/1 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase}
.display{font-family:var(--f-display);font-style:italic;font-weight:900;text-transform:uppercase;line-height:var(--lh-display);letter-spacing:-.005em}
.h2{font-size:min(var(--t-h2),5.6vw)}
.h2 em,.page-title em{font-style:inherit;color:var(--signal-ink)}
.h3{font-size:var(--t-h3);line-height:.9}
.muted{color:var(--muted)}
.small{font-size:var(--t-small)}
.num{font-variant-numeric:tabular-nums}
.link{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:3px;text-decoration-color:var(--signal)}
.link:hover{color:var(--signal-text)}
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.kbd{font:700 .8rem/1 var(--f-label);letter-spacing:.06em;padding:3px 6px;box-shadow:inset 0 0 0 1.5px currentColor;border-radius:var(--radius)}
.skip{position:absolute;left:-999px;top:8px;z-index:100;background:var(--ink);color:var(--paper);padding:10px 14px}
.skip:focus{left:8px}
:focus-visible{outline:3px solid var(--focus);outline-offset:4px}
.rev,.metrics,.toast,.az-clip-rec,.hl-media{--focus:var(--paper)}
.rev .h2 em,.rev .page-title em{color:var(--signal)}
.grain{position:relative}
.grain::after{content:"";position:absolute;inset:0;opacity:.22;mix-blend-mode:multiply;pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 1 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
.ico{width:30px;height:30px;stroke:var(--signal);fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;flex:none}

/* ---------- layout ---------- */
.wrap{padding-left:var(--gutter);padding-right:var(--gutter)}
.sec{position:relative;padding:var(--s-10) var(--gutter)}
.sec.tight{padding-top:var(--s-8);padding-bottom:var(--s-8)}
.rev{background:var(--ink);color:var(--paper)}
.rev .head p,.rev p{color:rgba(243,236,223,.8)}
.band-2{background:var(--paper-2);border-top:1.5px solid var(--ink)}
.row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4)}
.stack>*+*{margin-top:var(--s-4)}
.grid{display:grid;gap:var(--s-5);grid-template-columns:repeat(auto-fill,minmax(min(100%,280px),1fr))}
.grid-2{display:grid;gap:var(--s-6);grid-template-columns:repeat(2,minmax(0,1fr))}
.grid-3{display:grid;gap:var(--s-5);grid-template-columns:repeat(3,minmax(0,1fr))}
.split{display:grid;gap:var(--s-7);grid-template-columns:minmax(0,7fr) minmax(0,5fr);align-items:start}
.kick{display:flex;align-items:center;gap:12px;margin-bottom:var(--s-5)}
.kick i{width:34px;height:6px;background:var(--ink);transform:skewX(var(--slant));flex:none}
.rev .kick i{background:var(--paper)}
.eyebrow{display:flex;align-items:center;gap:12px}
.eyebrow i{width:34px;height:6px;background:var(--signal);transform:skewX(var(--slant));flex:none}
.head{display:grid;grid-template-columns:minmax(0,1.65fr) minmax(0,.6fr);gap:var(--s-8);align-items:end}
.head p{font-size:var(--t-lede);color:var(--ink-2);max-width:30rem;padding-bottom:10px}
.fine{margin-top:var(--s-4);font-size:var(--t-small);color:var(--muted);display:flex;gap:6px 18px;flex-wrap:wrap}
.fine span{display:inline-flex;align-items:center;gap:8px}
.fine span::before{content:"";width:7px;height:7px;background:var(--ink);transform:skewX(var(--slant));flex:none}
.rev .fine{color:rgba(243,236,223,.72)}
.rev .fine span::before{background:var(--paper)}
.ctas{display:flex;align-items:center;flex-wrap:wrap;gap:var(--s-5)}

/* page head for app pages */
.page-head{padding:var(--s-8) var(--gutter) var(--s-7);border-bottom:1.5px solid var(--ink)}
.page-title{font-size:clamp(3.6rem,7.4vw,8.5rem)}
.page-lede{font-size:var(--t-lede);line-height:1.45;color:var(--ink-2);max-width:40rem;margin-top:var(--s-5)}
.page-head .ctas{margin-top:var(--s-6)}

/* ---------- header ---------- */
.top{position:relative;z-index:30;display:flex;align-items:center;gap:var(--s-7);height:var(--header-h);padding:0 var(--gutter);border-bottom:1.5px solid var(--ink);background:var(--paper)}
.brand{display:block;padding:8px 0;flex:none}
.brand img{height:34px;width:auto}
.nav{display:flex;gap:var(--s-6);margin-left:var(--s-5)}
.nav a{font:700 .95rem/1 var(--f-label);letter-spacing:.06em;text-transform:uppercase;padding:8px 0;border-bottom:2px solid transparent;white-space:nowrap}
.nav a:hover{border-color:var(--signal)}
.nav a[aria-current="page"]{border-color:var(--ink);box-shadow:0 2px 0 var(--signal)}
.top .right{margin-left:auto;display:flex;align-items:center;gap:var(--s-4)}
.menu-btn{display:none;align-items:center;gap:10px;min-height:44px;min-width:44px;padding:0 12px;font:700 .95rem/1 var(--f-label);letter-spacing:.06em;text-transform:uppercase;box-shadow:inset 0 0 0 2px var(--ink);border-radius:var(--radius);color:var(--ink);cursor:pointer}
.menu-btn .bars{display:grid;gap:4px;width:20px}
.menu-btn .bars i{display:block;height:2.5px;background:currentColor;transform:skewX(var(--slant))}
.menu-btn[aria-expanded="true"]{background:var(--ink);color:var(--paper)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:48px;background:var(--signal);color:var(--ink-on-signal);font:900 italic 1.45rem/1 var(--f-display);text-transform:uppercase;letter-spacing:.01em;padding:14px 28px 13px;clip-path:polygon(7% 0,100% 0,93% 100%,0 100%);transition:background .2s var(--ease);border:0;cursor:pointer;white-space:nowrap;text-align:center}
.btn:hover{background:#FF6A33}
.btn:focus-visible{clip-path:none;outline-offset:3px}
.btn svg{width:22px;height:22px}
.btn.sm{font-size:1.2rem;padding:11px 22px 10px;min-height:44px}
.btn.ghost{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 2.5px var(--ink);clip-path:none;transform:skewX(var(--slant));padding:14px 30px 13px}
.btn.ghost>span{display:inline-block;transform:skewX(10deg)}
.btn.ghost:hover{background:var(--ink);color:var(--paper)}
.btn.ghost.sm{padding:11px 22px 10px}
.rev .btn.ghost{color:var(--paper);box-shadow:inset 0 0 0 2.5px var(--paper)}
.rev .btn.ghost:hover{background:var(--paper);color:var(--ink)}
.btn.ink{background:var(--ink);color:var(--paper)}
.btn.ink:hover{background:var(--ink-2)}
.rev .btn.ink{background:var(--paper);color:var(--ink)}
.btn.text{background:none;clip-path:none;min-height:44px;padding:10px 2px;color:var(--ink);font:700 .9rem/1 var(--f-label);letter-spacing:.1em;text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--rule)}
.btn.text:hover{text-decoration-color:var(--signal)}
.btn.text.danger{color:var(--signal-text)}
.rev .btn.text{color:var(--paper);text-decoration-color:var(--rule-rev)}
.btn:disabled,.btn[aria-disabled="true"]{opacity:.45;cursor:not-allowed}
.btn:disabled:hover{background:var(--signal)}
.btn.ghost:disabled:hover{background:transparent;color:var(--ink)}
.btn.ink:disabled:hover{background:var(--ink)}
.btn-row{display:flex;flex-wrap:wrap;align-items:center;gap:var(--s-4)}

/* ---------- forms ---------- */
.field{display:grid;gap:8px;align-content:start}
.field>label,.field>legend,.field .label{color:var(--ink)}
fieldset.field{border:0;min-width:0}
.input,select.input,textarea.input,.field input[type="text"],.field input[type="number"],.field input[type="search"],.field select,.field textarea{width:100%;min-height:48px;padding:12px 14px;background:var(--kicker);color:var(--ink);border:1.5px solid var(--ink);border-radius:var(--radius);font:500 1rem/1.3 var(--f-body)}
.field select,select.input{appearance:none;-webkit-appearance:none;padding-right:42px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%230F2E28' stroke-width='2.4'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center}
.field textarea,textarea.input{min-height:120px;resize:vertical}
.input::placeholder,.field input::placeholder{color:var(--muted);opacity:1}
.input:focus-visible,.field input:focus-visible,.field select:focus-visible,.field textarea:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.input[aria-invalid="true"],.field [aria-invalid="true"]{border-color:var(--signal-ink);box-shadow:inset 0 0 0 1px var(--signal-ink)}
.hint{font-size:var(--t-small);color:var(--muted)}
.err{font-size:var(--t-small);color:var(--signal-text);font-weight:700}
input[type="checkbox"],input[type="radio"]{accent-color:var(--ink);width:20px;height:20px}
.check{display:inline-flex;align-items:center;gap:10px;min-height:44px;cursor:pointer}
.range{width:100%;accent-color:var(--ink);min-height:32px}
/* segmented control: <div class="seg" role="radiogroup"><label><input type="radio" name="x"><span>Regular</span></label>...</div> */
.seg{display:flex;flex-wrap:wrap;gap:8px}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;width:1px;height:1px}
.seg span{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:11px 18px 10px;font:700 .9rem/1 var(--f-label);letter-spacing:.1em;text-transform:uppercase;box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:var(--radius);background:var(--kicker)}
.seg input:checked+span{background:var(--ink);color:var(--paper)}
.seg input:focus-visible+span{outline:3px solid var(--focus);outline-offset:3px}
.seg input:disabled+span{opacity:.5;cursor:not-allowed}
.seg small{font:700 .66rem/1 var(--f-label);letter-spacing:.12em;padding:3px 5px 2px;box-shadow:inset 0 0 0 1px currentColor}
/* drop zone: add .over while dragging */
.drop{position:relative;display:grid;place-items:center;text-align:center;gap:var(--s-4);padding:var(--s-8) var(--s-6);background:var(--kicker);border:2px dashed var(--ink);border-radius:var(--radius);cursor:pointer;transition:background .2s var(--ease)}
.drop:hover{background:#fff}
.drop.over{border-style:solid;background:var(--paper-2);box-shadow:var(--shadow-hard)}
.drop:focus-within{outline:3px solid var(--focus);outline-offset:4px}
.drop input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}

/* ---------- cards ---------- */
.card{background:var(--kicker);border:1.5px solid var(--ink);border-radius:var(--radius);padding:var(--s-6)}
.card.decal{box-shadow:var(--shadow-hard)}
.card.flat{background:var(--paper-2);border-color:transparent}
.card-h{display:flex;align-items:center;justify-content:space-between;gap:var(--s-4);padding-bottom:var(--s-4);margin-bottom:var(--s-4);border-bottom:1px solid var(--rule)}
.rev .card{background:var(--ink-2);border-color:var(--rule-rev);color:var(--paper)}

/* ---------- readout: metric rows, tiles, chips ---------- */
.mrows{list-style:none;border-top:1.5px solid var(--ink)}
.mrow{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:4px var(--s-4);align-items:baseline;padding:14px 0 12px;border-bottom:1px solid var(--rule)}
.mrow dt,.mrow .k{font:700 var(--t-label)/1.2 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}
.mrow dd,.mrow .v{font:900 italic var(--t-metric)/.9 var(--f-display);text-transform:uppercase;text-align:right;white-space:nowrap;font-variant-numeric:tabular-nums}
.mrow .v .u{font-size:.55em;margin-left:4px;letter-spacing:.02em}
.mrow .why{grid-column:1/-1;font-size:var(--t-small);color:var(--ink-2)}
.rev .mrows{border-color:var(--paper)}
.rev .mrow{border-color:var(--rule-rev)}
.rev .mrow dt,.rev .mrow .k{color:rgba(243,236,223,.72)}
.est{display:inline-block;vertical-align:middle;margin-left:8px;padding:3px 6px 2px;font:700 .68rem/1 var(--f-label);letter-spacing:.08em;text-transform:none;font-style:normal;color:var(--muted);box-shadow:inset 0 0 0 1.5px currentColor;border-radius:var(--radius)}
.rev .est{color:rgba(243,236,223,.72)}
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,180px),1fr));gap:var(--s-5)}
.tile{border-top:1.5px solid var(--ink);padding-top:var(--s-4);display:flex;flex-direction:column;gap:10px}
.tile .n{font:900 italic clamp(2.6rem,4vw,4.25rem)/.85 var(--f-display);text-transform:uppercase;font-variant-numeric:tabular-nums}
.tile .n .u{font-size:.45em;margin-left:4px}
.tile .l{font:700 var(--t-label)/1.2 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}
.rev .tile{border-color:var(--paper)}
.rev .tile .l{color:rgba(243,236,223,.72)}
.chip{display:inline-flex;align-items:center;gap:6px;padding:6px 9px 5px;font:700 .72rem/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;box-shadow:inset 0 0 0 1.5px var(--ink);border-radius:var(--radius);background:var(--kicker);color:var(--ink);white-space:nowrap}
.chip.ink{background:var(--ink);color:var(--paper)}
.chip.signal{background:var(--signal);color:var(--ink-on-signal);box-shadow:none}
.chip.quiet{background:transparent;color:var(--muted);box-shadow:inset 0 0 0 1.5px var(--rule)}
.badge{font:700 .78rem/1 var(--f-label);letter-spacing:.14em;text-transform:uppercase;background:var(--paper);color:var(--ink);padding:8px 10px 7px}

/* ---------- tables ---------- */
.table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.table{width:100%;border-collapse:collapse;font-size:var(--t-small)}
.table th{font:700 var(--t-label)/1.2 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;text-align:left;padding:12px 12px 10px 0;border-bottom:1.5px solid var(--ink);white-space:nowrap;vertical-align:bottom}
.table td{padding:12px 12px 12px 0;border-bottom:1px solid var(--rule);vertical-align:middle}
.table .num,.table th.num{text-align:right;font-variant-numeric:tabular-nums}
.table tbody tr:hover{background:rgba(15,46,40,.04)}
.table caption{caption-side:bottom;text-align:left;padding-top:10px;color:var(--muted);font-size:var(--t-small)}

/* ---------- feedback: toasts, notices, empty states ---------- */
.toasts{position:fixed;left:var(--gutter);bottom:var(--s-5);z-index:60;display:grid;gap:10px;max-width:min(440px,calc(100vw - 32px));pointer-events:none}
.toast{pointer-events:auto;display:flex;align-items:flex-start;gap:12px;background:var(--ink);color:var(--paper);padding:14px 18px 13px;border-radius:var(--radius);box-shadow:5px 5px 0 var(--paper-3);font-size:var(--t-small);line-height:1.4;animation:toast-in .25s var(--ease)}
.toast::before{content:"";flex:none;width:18px;height:6px;margin-top:7px;background:var(--paper);transform:skewX(var(--slant))}
.toast.warn::before,.toast.error::before{background:var(--signal)}
.toast button{margin-left:auto;color:var(--paper);font:700 .75rem/1 var(--f-label);letter-spacing:.12em;text-transform:uppercase;padding:4px 0 4px 10px}
@keyframes toast-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}
.notice{display:flex;gap:14px;align-items:flex-start;padding:16px 20px;background:var(--paper-2);border-left:6px solid var(--ink);font-size:var(--t-small);color:var(--ink-2)}
.notice.warn{border-left-color:var(--signal)}
.notice b{color:var(--ink)}
.empty{display:grid;place-items:center;gap:var(--s-4);text-align:center;padding:var(--s-8) var(--s-5);border:2px dashed var(--rule);border-radius:var(--radius);color:var(--muted)}
.empty .display{font-size:var(--t-h3);color:var(--ink)}

/* ---------- modal: <dialog class="modal"><div class="modal-b">...</div><div class="modal-f">buttons</div></dialog> ---------- */
.modal{margin:auto;padding:0;border:1.5px solid var(--ink);border-radius:var(--radius);background:var(--kicker);color:var(--ink);width:min(560px,calc(100vw - 32px));max-height:calc(100vh - 32px);box-shadow:var(--shadow-hard)}
.modal::backdrop{background:rgba(15,46,40,.55)}
.modal-b{padding:var(--s-6) var(--s-6) var(--s-5)}
.modal-b h2{font:900 italic clamp(2rem,4vw,2.6rem)/.9 var(--f-display);text-transform:uppercase;margin-bottom:var(--s-4)}
.modal-b p+p{margin-top:var(--s-3)}
.modal-f{display:flex;flex-wrap:wrap;justify-content:flex-end;align-items:center;gap:var(--s-4);padding:var(--s-4) var(--s-6) var(--s-6)}

/* ---------- progress ---------- */
.progress{position:relative;height:10px;background:var(--paper-3);overflow:hidden;border-radius:0}
.progress>span{position:absolute;inset:0 auto 0 0;width:var(--p,0%);background:var(--ink);transition:width .3s var(--ease)}
.progress>span::after{content:"";position:absolute;right:-3px;top:0;bottom:0;width:6px;background:var(--signal);transform:skewX(var(--slant))}
.progress.indet>span{width:30%;animation:indet 1.2s var(--ease) infinite}
@keyframes indet{from{left:-30%}to{left:100%}}
.progress-meta{display:flex;justify-content:space-between;gap:var(--s-4);margin-top:8px;font:700 var(--t-label)/1.2 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}
/* pipeline steps: <ol class="pipeline"><li data-state="done|active|pending|error"><b>01</b><span>Scan</span></li></ol> */
.pipeline{list-style:none;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));border-top:1.5px solid var(--ink)}
.pipeline li{display:flex;flex-direction:column;gap:8px;padding:var(--s-4) var(--s-4) 0 0;color:var(--muted)}
.pipeline li+li{padding-left:var(--s-4);border-left:1px solid var(--rule)}
.pipeline b{font:900 italic 2.4rem/.8 var(--f-display)}
.pipeline span{font:700 var(--t-label)/1.2 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase}
.pipeline li[data-state="active"]{color:var(--ink)}
.pipeline li[data-state="active"] b{color:var(--signal-text)}
.pipeline li[data-state="done"]{color:var(--ink)}
.pipeline li[data-state="error"] b{color:var(--signal-text)}

/* ---------- chart primitives (inline SVG; ink and lake for data, signal only for event markers) ---------- */
.chart{width:100%;height:auto;overflow:visible;font-family:var(--f-label)}
.ch-grid line,line.ch-grid,path.ch-grid{stroke:var(--rule);stroke-width:1;shape-rendering:crispEdges}
.ch-axis,.ch-axis line,.ch-axis path{stroke:var(--ink);stroke-width:1.5;fill:none;shape-rendering:crispEdges}
.ch-tick,.ch-tick text,text.ch-label{font:700 11px var(--f-label);letter-spacing:.1em;text-transform:uppercase;fill:var(--muted)}
.ch-line{fill:none;stroke:var(--ink);stroke-width:2.25;stroke-linejoin:round;stroke-linecap:round}
.ch-line.lake{stroke:var(--lake)}
.ch-line.dash{stroke-dasharray:5 5}
.ch-area{fill:var(--lake);opacity:.16}
.ch-bar{fill:var(--ink)}
.ch-bar.lake{fill:var(--lake)}
.ch-dot{fill:var(--ink)}
.ch-dot.lake{fill:var(--lake)}
.ch-event{stroke:var(--signal);stroke-width:2.5;fill:none}
.ch-event-fill{fill:var(--signal)}
.ch-band{fill:var(--signal);opacity:.12}
.ch-handle{cursor:ew-resize;fill:var(--signal);touch-action:none}
.ch-handle:focus{outline:none}
.ch-handle:focus-visible{stroke:var(--ink);stroke-width:3}
.ch-tag{font:700 11px var(--f-label);letter-spacing:.12em;text-transform:uppercase;fill:var(--ink)}
.rev .ch-line{stroke:var(--paper)}
.rev .ch-grid line,.rev line.ch-grid{stroke:var(--rule-rev)}
.rev .ch-axis,.rev .ch-axis line,.rev .ch-axis path{stroke:var(--paper)}
.rev .ch-tick,.rev .ch-tick text{fill:rgba(243,236,223,.72)}
.legend{display:flex;flex-wrap:wrap;gap:8px 20px;font:700 var(--t-label)/1 var(--f-label);letter-spacing:var(--track-label);text-transform:uppercase;color:var(--muted)}
.legend span{display:inline-flex;align-items:center;gap:8px}
.sw{display:inline-block;width:18px;height:6px;transform:skewX(var(--slant));background:var(--ink)}
.sw.lake{background:var(--lake)}
.sw.signal{background:var(--signal)}

/* ---------- footer ---------- */
.foot{display:flex;align-items:center;gap:var(--s-7);flex-wrap:wrap;padding:var(--s-7) var(--gutter);border-top:1.5px solid var(--ink)}
.foot>a{display:block;padding:10px 0}
.foot img{height:28px;width:auto}
.foot nav{display:flex;gap:var(--s-5);flex-wrap:wrap}
.foot nav a{font:700 .82rem/1 var(--f-label);letter-spacing:.1em;text-transform:uppercase;padding:10px 0}
.foot nav a:hover{color:var(--signal-text)}
.foot nav a[aria-current="page"]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px;text-decoration-color:var(--signal)}
.foot small{margin-left:auto;font-size:var(--t-small);color:var(--muted)}

/* ---------- scroll reveal (nav.js adds .rv-on to <html> only when it is watching) ---------- */
.rv-on .rv{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease),transform .7s var(--ease)}
.rv-on .rv.in{opacity:1;transform:none}

/* ---------- responsive ---------- */
@media (max-width:1280px){
  .nav{gap:var(--s-5)}
}
@media (max-width:1240px){
  .top{gap:var(--s-5)}
  .brand img{height:28px}
  .nav{gap:var(--s-4);margin-left:0}
  .nav a{font-size:.82rem;letter-spacing:.04em}
  .top .btn.sm{font-size:1.05rem;padding:10px 18px 9px}
}
@media (max-width:1100px){
  .head{grid-template-columns:1fr;gap:var(--s-5)}
  .h2{font-size:clamp(3.2rem,11vw,6rem)}
  .split{grid-template-columns:1fr}
  .grid-3{grid-template-columns:repeat(2,minmax(0,1fr))}
  .foot small{margin-left:0;width:100%}
}
@media (max-width:899px){
  .menu-btn{display:inline-flex}
  .top .nav{display:none}
  .top.open .nav{display:flex;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;margin:0;padding:var(--s-2) var(--gutter) var(--s-6);background:var(--paper);border-bottom:1.5px solid var(--ink);box-shadow:0 5px 0 rgba(15,46,40,.14)}
  .top.open .nav a{font:900 italic 2.1rem/1 var(--f-display);letter-spacing:0;padding:14px 0 12px;border-bottom:1px solid var(--rule);box-shadow:none}
  .top.open .nav a[aria-current="page"]{color:var(--signal-text);border-bottom-color:var(--rule)}
  .pipeline{grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s-4) 0}
  .pipeline li:nth-child(odd){padding-left:0;border-left:0}
  .grid-2{grid-template-columns:1fr}
}
@media (max-width:640px){
  :root{--header-h:64px}
  .sec{padding:var(--s-9) var(--gutter)}
  .top{gap:var(--s-3)}
  .brand img{height:24px}
  .top .right{gap:10px}
  .top .btn.sm{font-size:1rem;padding:10px 14px 9px}
  .menu-btn .txt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .menu-btn{padding:0;justify-content:center}
  .page-head{padding:var(--s-7) var(--gutter) var(--s-6)}
  .page-title{font-size:clamp(3.2rem,16vw,5rem)}
  .grid-3{grid-template-columns:1fr}
  .card{padding:var(--s-5)}
  .modal-b{padding:var(--s-5) var(--s-5) var(--s-4)}
  .modal-f{padding:var(--s-4) var(--s-5) var(--s-5)}
  .foot{gap:var(--s-4)}
  .foot nav{gap:0 var(--s-5)}
  .foot nav a{padding:14px 0}
  .toasts{left:16px;right:16px;max-width:none}
}
@media (max-width:370px){
  .brand img{height:20px}
  .top .btn.sm{font-size:.95rem;padding:9px 11px 8px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .rv-on .rv{opacity:1;transform:none;transition:none}
  .toast{animation:none}
  .progress>span{transition:none}
  .progress.indet>span{animation:none;width:100%;opacity:.5}
  *,*::before,*::after{transition-duration:.01ms!important;animation-duration:.01ms!important;animation-iteration-count:1!important}
}
@media print{
  body::after,.top,.foot,.toasts{display:none}
  body{background:#fff}
}