@charset "utf-8";
/* ==========================================================================
   Hostonym — design system  ·  LIGHT
   Editorial / institutional. Ivory paper, ink text, hairline rules, one brass
   accent. The only dark on the page is the photography.
   ========================================================================== */

/* --------------------------------------------------------------- 1. fonts */

@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+0329,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/ibm-plex-sans-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/ibm-plex-sans-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/ibm-plex-sans-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+2002,U+2009,U+200B,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-500.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000,U+000D,U+0020-007E,U+00A0-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0300-0301,U+0303-0304,U+0308-0309,U+0323,U+2013-2014,U+2018-201A,U+201C-201E,U+2022,U+2026,U+2032-2033,U+2039-203A,U+2044,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215}

/* ---- Cyrillic, for /ru -----------------------------------------------------
   The Latin files above were cut to the Latin range only, so every Russian
   page fell back to Times, Arial and Courier New in the middle of a sentence:
   a serif headline in one face and its Latin brand name in another, labels in
   a typewriter face. These are the Cyrillic cuts of the same three families,
   self-hosted like the rest. unicode-range is what keeps them free for every
   page that is not Russian: a browser only fetches a face when the page holds
   a character inside its range. The serif and the sans are variable files,
   declared once per weight anyway: a browser only stitches faces together by
   unicode-range when every other descriptor matches, so a single face with
   the range "200 900" sat beside the Latin 600 unused and Russian headlines
   came out in Times. One file, three declarations, one download. The mono is
   static, like its Latin twin. */
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-cyrillic.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-cyrillic.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'Source Serif 4';src:url('/assets/fonts/source-serif-4-cyrillic.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/ibm-plex-sans-cyrillic.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/ibm-plex-sans-cyrillic.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Sans';src:url('/assets/fonts/ibm-plex-sans-cyrillic.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-400-cyrillic.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}
@font-face{font-family:'IBM Plex Mono';src:url('/assets/fonts/ibm-plex-mono-500-cyrillic.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0301,U+0400-045F,U+0490-0491,U+04B0-04B1,U+2116}

/* ---- metric-matched fallbacks -------------------------------------------
   Source Serif is 16 % wider than Times at the same size, so a headline that
   fits three lines while the fallback is showing takes four the moment the
   real font arrives — and everything below it jumps. That was a 0.17 layout
   shift on /network, which is most of a performance score on its own.

   Measured, not guessed: the average advance of a sample sentence in each
   font, out of the actual font files. Plex Sans against Arial comes out at
   100.65 %, which is why the body text never showed the problem and the
   headings did.

   local() only resolves where the OS has the face — Windows and macOS. Where
   it does not, the stack simply carries on to the next family as before.
   ------------------------------------------------------------------------ */
@font-face{font-family:'Source Serif 4 fallback';src:local('Times New Roman');size-adjust:116.20%;ascent-override:89.15%;descent-override:28.83%;line-gap-override:0%}
@font-face{font-family:'IBM Plex Sans fallback';src:local('Arial');size-adjust:100.65%;ascent-override:101.84%;descent-override:27.32%;line-gap-override:0%}
@font-face{font-family:'IBM Plex Mono fallback';src:local('Courier New');size-adjust:99.98%;ascent-override:102.52%;descent-override:27.50%;line-gap-override:0%}

/* -------------------------------------------------------------- 2. tokens */

:root{
  /* ink */
  --ink:#0B0D10;
  --ink-2:#1A2027;
  --slate:#525C67;
  --mute:#5D666F;

  /* paper */
  --paper:#FBFAF6;
  --paper-2:#F3F1EA;
  --paper-3:#EAE7DC;
  --rule:#DEDACF;
  --rule-2:#C7C2B3;

  /* Legacy "on ink" tokens. The layout still uses them; in the light theme
     they simply resolve to ink-on-paper values, so every surface stays legible. */
  --on:#0B0D10;
  --on-dim:#4C5661;
  --on-mute:#6E7883;
  --rule-on:#DEDACF;
  --rule-on-2:#C7C2B3;

  /* accent — brass, darkened to clear 4.5:1 on paper */
  --brass:#8A6816;
  --brass-2:#A8802C;
  --brass-on:#8A6816;
  --ok:#2C7455;
  --alert:#A33526;   /* muted brick — sits with the brass, never shouts */
  --ok-on:#2C7455;

  /* type */
  --f-serif:'Source Serif 4','Source Serif 4 fallback','Iowan Old Style','Palatino Linotype',Palatino,Georgia,'Times New Roman',serif;
  --f-sans:'IBM Plex Sans','IBM Plex Sans fallback',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --f-mono:'IBM Plex Mono','IBM Plex Mono fallback',ui-monospace,SFMono-Regular,'SF Mono',Menlo,Consolas,monospace;

  --fs-micro:.6875rem;
  --fs-sm:.8125rem;
  --fs-base:1.0625rem;

  /* layout */
  --wrap:1290px;
  --gut:clamp(20px,4.2vw,52px);
  --sec-y:clamp(44px,5vw,78px);   /* tightened vertical rhythm */

  --ease:cubic-bezier(.22,.61,.36,1);
}

/* ---------------------------------------------------------- 3. reset/base */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:110px}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font:400 var(--fs-base)/1.62 var(--f-sans);
  font-feature-settings:"kern" 1,"liga" 1;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-wrap:break-word;
}
img,svg{max-width:100%;display:block}
img{height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
table{border-collapse:collapse;width:100%}
code{font-family:var(--f-mono)}
::selection{background:var(--ink);color:var(--paper)}

:focus-visible{outline:2px solid var(--brass);outline-offset:3px;border-radius:1px}

.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:999;background:var(--ink);color:var(--paper);padding:14px 20px;font:500 var(--fs-sm)/1 var(--f-sans)}
.skip:focus{left:0}

/* ------------------------------------------------------- 4. primitives */

.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}

.lbl{
  font:500 var(--fs-micro)/1.2 var(--f-mono);
  letter-spacing:.15em;text-transform:uppercase;color:var(--slate);
}

.kick,.kick--on{
  display:flex;align-items:center;gap:12px;
  font:500 var(--fs-micro)/1 var(--f-mono);
  letter-spacing:.16em;text-transform:uppercase;color:var(--brass);
  padding-bottom:14px;margin-bottom:20px;
  border-bottom:1px solid var(--rule);
}
.num{
  display:inline-block;color:var(--ink);letter-spacing:.08em;
  padding-right:12px;margin-right:2px;border-right:1px solid var(--rule-2);
}

.mono-s{font:400 var(--fs-sm)/1.5 var(--f-mono);letter-spacing:.01em}

.h-s{
  font:600 clamp(1.0625rem,.98rem + .38vw,1.24rem)/1.32 var(--f-serif);
  letter-spacing:-.005em;margin-bottom:10px;color:var(--ink);
}

.lnk,.lnk--on{
  display:inline-flex;align-items:baseline;gap:.5em;
  font:500 var(--fs-sm)/1.4 var(--f-sans);letter-spacing:.005em;
  color:var(--ink);
  padding-bottom:3px;
  border-bottom:1px solid var(--brass);
  transition:color .18s var(--ease),border-color .18s var(--ease);
}
.lnk:hover,.lnk--on:hover{color:var(--brass)}
.lnk-ar,.btn-ar{
  display:inline-block;width:.62em;height:.62em;
  border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;
  transform:rotate(45deg) translateY(.06em);
  transition:transform .2s var(--ease);
}
.lnk:hover .lnk-ar,.btn:hover .btn-ar{transform:rotate(45deg) translate(.14em,-.08em)}

.dot{
  display:inline-block;width:6px;height:6px;border-radius:50%;
  background:var(--ok);margin-right:8px;flex:none;
  box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 16%,transparent);
}

.cc{
  display:inline-block;min-width:2.4em;
  font:500 var(--fs-micro)/1 var(--f-mono);letter-spacing:.1em;
  color:var(--brass);
}

.tag{
  display:inline-block;padding:4px 9px;
  font:500 10px/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  border:1px solid var(--rule-2);color:var(--slate);
}

/* price */
.pr{display:inline-flex;align-items:baseline;font-family:var(--f-serif)}
/* currency set as a superscript, the way a price list does it */
.pr-cur{font-size:.52em;color:var(--slate);margin-right:.1em;align-self:flex-start;margin-top:.34em}
.pr-amt{font-weight:600;font-size:1.62rem;letter-spacing:-.02em;font-feature-settings:"tnum" 1}
.pr-unit{font:400 var(--fs-sm)/1 var(--f-mono);color:var(--slate);margin-left:.4em;letter-spacing:.02em}

/* --------------------------------------------------------- 5. buttons */

.btn{
  display:inline-flex;align-items:center;gap:.7em;
  padding:12px 21px;
  font:500 var(--fs-sm)/1 var(--f-sans);letter-spacing:.02em;
  border:1px solid transparent;
  transition:background-color .2s var(--ease),color .2s var(--ease),border-color .2s var(--ease);
  white-space:nowrap;
}
.btn--lg{padding:16px 28px;font-size:.875rem}
.btn--wide{width:100%;justify-content:center}

/* primary — solid ink on paper */
.btn--solid,.btn--invert{background:var(--ink);color:var(--paper);border-color:var(--ink)}
.btn--solid:hover,.btn--invert:hover{background:var(--ink-2);border-color:var(--ink-2)}

/* secondary — outlined */
.btn--ghost{background:transparent;color:var(--ink);border-color:var(--rule-2)}
.btn--ghost:hover{border-color:var(--ink);background:rgba(11,13,16,.04)}

/* hero only — these sit on the dark photograph */
/* signed in: one control with two actions, split by a hairline — the area and
   the way out of it, so signing out never needs a page of its own to find */
.hd-acct{display:inline-flex;align-items:stretch;border:1px solid var(--rule-2);background:var(--paper)}
.hd-acct-l,.hd-out{
  display:inline-flex;align-items:center;justify-content:center;
  font:500 var(--fs-sm)/1 var(--f-sans);letter-spacing:.01em;color:var(--ink);
  transition:background-color .16s var(--ease),color .16s var(--ease);
}
.hd-acct-l{padding:11px 16px}
.hd-acct-l:hover{background:rgba(11,13,16,.05)}
.hd-out{padding:0 11px;border-left:1px solid var(--rule-2);color:var(--mute)}
.hd-out:hover{background:rgba(11,13,16,.05);color:var(--alert)}
.hd-out-i{width:15px;height:15px;display:block}

.btn--hero{background:var(--paper);color:var(--ink);border-color:var(--paper)}
.btn--hero:hover{background:var(--brass-2);border-color:var(--brass-2);color:var(--ink)}
.btn--heroghost{background:rgba(255,255,255,.07);color:#fff;border-color:rgba(255,255,255,.34)}
.btn--heroghost:hover{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.72)}

/* ---------------------------------------------------------- 6. sections */

.sec{padding-block:var(--sec-y)}
.sec--alt{background:var(--paper-2);border-block:1px solid var(--rule)}
.sec--ink{background:var(--paper-2);border-block:1px solid var(--rule)}

.sec-h{max-width:74ch;margin-bottom:clamp(26px,2.8vw,40px)}
.sec-t{
  font:600 clamp(1.6rem,1.2rem + 1.7vw,2.5rem)/1.12 var(--f-serif);
  letter-spacing:-.022em;text-wrap:balance;color:var(--ink);
}
.sec-l{
  margin-top:14px;max-width:62ch;
  font-size:clamp(1rem,.96rem + .22vw,1.08rem);line-height:1.58;color:var(--slate);
}

.sec-h--split{
  display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:clamp(28px,4vw,72px);align-items:end;max-width:none;
}
.sec-h--split .sec-l{margin-top:0;padding-bottom:6px}

.sec-after{
  margin-top:34px;padding-top:24px;border-top:1px solid var(--rule);
  font-size:var(--fs-sm);color:var(--slate);
}

/* =========================================================== 7. header */

.hd{
  position:sticky;top:0;z-index:90;
  background:var(--paper);color:var(--ink);
  border-bottom:1px solid var(--rule);
  transition:box-shadow .25s var(--ease);
}
.hd.is-stuck{box-shadow:0 10px 30px -22px rgba(11,13,16,.4)}

/* utility bar */
.hd-u{border-bottom:1px solid var(--rule);background:var(--paper-2)}
.hd-u-in{
  display:flex;justify-content:flex-end;align-items:center;gap:24px;
  min-height:34px;
  font:400 var(--fs-micro)/1 var(--f-mono);letter-spacing:.09em;
  color:var(--slate);
}
.hd-u-l,.hd-u-r{display:flex;align-items:center;gap:26px;flex-wrap:wrap}
.hd-u-l li{display:flex;align-items:center}
.hd-u-r a{color:var(--slate);transition:color .18s var(--ease)}
.hd-u-r a:hover{color:var(--brass)}

/* masthead */
.hd-m-in{display:flex;align-items:center;gap:clamp(20px,3vw,52px);min-height:66px}

/* The lockup is a drawn image, so the anchor only has to hold it and the
   <picture> must not add a box of its own. */
.logo{display:inline-flex;align-items:center;flex:none;color:var(--ink)}
.logo picture{display:contents}
.logo-i{display:block;width:158px;height:44px;object-fit:contain;object-position:left center}

/* primary nav */
.nav{flex:1;min-width:0}
.nav-l{display:flex;align-items:center;gap:2px}
.nav-b{
  display:inline-flex;align-items:center;gap:8px;
  padding:9px 13px;
  font:400 .875rem/1 var(--f-sans);letter-spacing:.005em;
  color:var(--slate);
  transition:color .18s var(--ease);
}
.nav-b:hover,.nav-b[aria-expanded="true"],.nav-b.is-cur{color:var(--ink)}
.nav-chev{
  width:5px;height:5px;
  border-right:1.4px solid currentColor;border-bottom:1.4px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
  opacity:.55;transition:transform .22s var(--ease),opacity .22s var(--ease);
}
.nav-b[aria-expanded="true"] .nav-chev{transform:translateY(1px) rotate(225deg);opacity:1}
.nav-i{position:relative}
.nav-i::after{
  content:"";position:absolute;left:13px;right:13px;bottom:-1px;height:2px;
  background:var(--brass);transform:scaleX(0);transform-origin:left;
  transition:transform .24s var(--ease);
}
.nav-i:has(.nav-b[aria-expanded="true"])::after,.nav-i:has(.is-cur)::after{transform:scaleX(1)}

.hd-cta{display:flex;align-items:center;gap:10px;flex:none;margin-left:auto}

/* burger */
.burger{display:none;width:44px;height:44px;position:relative;margin-right:-10px}
.burger span{
  position:absolute;left:11px;right:11px;height:1.5px;background:var(--ink);
  transition:transform .26s var(--ease),opacity .2s var(--ease);
}
.burger span:nth-child(1){top:16px}
.burger span:nth-child(2){top:21.5px}
.burger span:nth-child(3){top:27px}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(5.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-5.5px) rotate(-45deg)}

/* ------------------------------------------------------- 8. mega menu */

.mega{position:absolute;left:0;right:0;top:100%;z-index:89}
.mega-p{
  background:var(--paper);color:var(--ink);
  border-top:2px solid var(--brass);
  border-bottom:1px solid var(--rule);
  box-shadow:0 26px 46px -28px rgba(11,13,16,.42);
  animation:megaIn .2s var(--ease) both;
}
@keyframes megaIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

.mega-in{display:grid;grid-template-columns:1fr;gap:clamp(28px,4vw,64px);padding-block:clamp(28px,3vw,42px)}
.mega-p--wide .mega-in{grid-template-columns:minmax(0,1fr) minmax(240px,300px)}
.mega-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:clamp(24px,3vw,52px)}
.mega-col .lbl{padding-bottom:14px;margin-bottom:14px;border-bottom:1px solid var(--rule)}
.mega-list li+li{margin-top:2px}
.mega-list a{
  display:block;padding:9px 12px;margin-inline:-12px;
  transition:background-color .16s var(--ease);
}
.mega-list a:hover{background:var(--paper-2)}
.mega-t{
  display:block;font:500 .9375rem/1.3 var(--f-sans);letter-spacing:-.004em;
  transition:color .16s var(--ease);
}
.mega-list a:hover .mega-t{color:var(--brass)}
.mega-d{display:block;margin-top:3px;font-size:var(--fs-sm);color:var(--slate);line-height:1.4}

.mega-rail{
  background:var(--paper-2);padding:24px;
  border:1px solid var(--rule);
  align-self:start;
}
.mega-rail .lbl{margin-bottom:12px;color:var(--ink)}
.mega-rail-b{font-size:var(--fs-sm);line-height:1.6;color:var(--slate);margin-bottom:18px}

/* ---------------------------------------------------------- 9. drawer */

/* `top` is re-measured from the real header height by app.js on open */
.drawer{
  position:fixed;inset:102px 0 0;z-index:88;
  background:var(--paper);color:var(--ink);
  overflow-y:auto;overscroll-behavior:contain;
  animation:dwIn .24s var(--ease) both;
}
@keyframes dwIn{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.drawer-in{padding:8px var(--gut) 56px}
.dw-sec{border-bottom:1px solid var(--rule)}
.dw-h{
  display:flex;justify-content:space-between;align-items:center;width:100%;
  padding:19px 0;text-align:left;
  font:600 1.06rem/1.2 var(--f-serif);letter-spacing:-.01em;color:var(--ink);
}
.dw-plus{position:relative;width:12px;height:12px;flex:none;color:var(--brass)}
.dw-plus::before,.dw-plus::after{
  content:"";position:absolute;background:currentColor;
  transition:transform .24s var(--ease);
}
.dw-plus::before{left:0;right:0;top:5.5px;height:1.5px}
.dw-plus::after{top:0;bottom:0;left:5.5px;width:1.5px}
.dw-h[aria-expanded="true"] .dw-plus::after{transform:scaleY(0)}
.dw-body{padding-bottom:16px}
.dw-body .lbl{margin:16px 0 10px}
.dw-list li{border-top:1px solid var(--rule)}
.dw-list a{display:block;padding:13px 0;font-size:.9375rem;color:var(--ink)}
.dw-d{display:block;margin-top:2px;font-size:var(--fs-sm);color:var(--slate)}
.dw-cta{display:grid;gap:10px;margin-top:30px}
.dw-foot{
  margin-top:24px;text-align:center;
  font:400 var(--fs-micro)/1.6 var(--f-mono);letter-spacing:.1em;color:var(--slate);
}

/* ========================= 10. hero — full-bleed image behind a dark scrim */

.hero{position:relative;isolation:isolate;background:var(--ink);color:#fff;overflow:hidden}
/* the <picture> around a hero must not exist as a box: it wraps an absolutely
   positioned image, so an inline wrapper would leave a line-height gap above it */
.hero picture,.phero picture{display:contents}
.hero-img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:center 46%;
}
.hero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(8,10,13,.95) 0%,rgba(8,10,13,.9) 40%,rgba(8,10,13,.78) 74%,rgba(8,10,13,.7) 100%),
    linear-gradient(to top,rgba(8,10,13,.86) 0%,rgba(8,10,13,0) 46%);
}

.hero-in{
  display:grid;grid-template-columns:minmax(0,1.32fr) minmax(0,.8fr);
  gap:clamp(28px,4vw,68px);align-items:center;
  padding-block:clamp(40px,5vw,72px) clamp(28px,3.2vw,44px);
}
.hero-txt{min-width:0}

.hero-k{
  /* now a span inside the <h1>, so the block behaviour it had as a <p>
     has to be asked for explicitly */
  display:block;
  font:500 var(--fs-micro)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-2);margin-bottom:16px;
}
.hero-h{
  font:600 clamp(1.95rem,1.4rem + 2.4vw,3.05rem)/1.08 var(--f-serif);
  letter-spacing:-.03em;color:#fff;max-width:32ch;text-wrap:balance;
}
/* underline drawn as a background so it survives line-wrapping */
.hl{
  background:linear-gradient(var(--brass-2),var(--brass-2)) left 88%/100% 2px no-repeat;
  -webkit-box-decoration-break:clone;box-decoration-break:clone;
}
.hero-l{
  margin-top:15px;max-width:52ch;
  font-size:clamp(1rem,.96rem + .28vw,1.1rem);line-height:1.58;color:rgba(255,255,255,.78);
}
.hero-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:24px}
.hero-fine{
  margin-top:15px;font:400 var(--fs-micro)/1.6 var(--f-mono);
  letter-spacing:.08em;color:rgba(255,255,255,.5);
}

/* right column — a focused "rate card" that leads with the price. Dark glass so
   it lifts off the image and stays native to the hero (no paper widget). */
.hero-buy{
  align-self:center;position:relative;overflow:hidden;
  background:linear-gradient(180deg,rgba(19,22,28,.72),rgba(9,11,15,.82));
  border:1px solid rgba(255,255,255,.13);
  box-shadow:0 44px 80px -46px rgba(0,0,0,.85);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  padding:clamp(22px,2vw,30px);
}
.hero-buy::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--brass-2);
}
.hb-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:16px}
.hb-tag{font:500 var(--fs-micro)/1 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;color:var(--brass-2)}
.hb-live{display:inline-flex;align-items:center;font:400 var(--fs-micro)/1 var(--f-mono);letter-spacing:.06em;color:rgba(255,255,255,.5)}
.hb-live .dot{box-shadow:0 0 0 3px rgba(87,185,140,.14)}

.hb-price{
  display:flex;align-items:baseline;gap:.4em;
  padding-bottom:16px;border-bottom:1px solid rgba(255,255,255,.14);
}
.hb-from{font:400 var(--fs-micro)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:rgba(255,255,255,.5);align-self:center}
.hb-price .pr-amt{font-size:2.7rem;line-height:.95;color:#fff}
.hb-price .pr-cur{font-size:.42em;margin-top:.2em;color:rgba(255,255,255,.62)}
.hb-price .pr-unit{font-size:var(--fs-sm);color:rgba(255,255,255,.55)}

.hb-spec{margin:16px 0 20px}
.hb-spec>div{
  display:flex;align-items:baseline;justify-content:space-between;gap:16px;
  padding:9px 0;border-bottom:1px solid rgba(255,255,255,.08);
}
.hb-spec>div:last-child{border-bottom:0}
.hb-spec dt{font:400 var(--fs-sm)/1 var(--f-mono);letter-spacing:.02em;color:rgba(255,255,255,.5)}
.hb-spec dd{margin:0;font:500 .9375rem/1.2 var(--f-sans);color:#fff;text-align:right}

.hb-cta{margin-bottom:14px}
.hb-cross{font:400 var(--fs-micro)/1.6 var(--f-mono);letter-spacing:.04em;color:rgba(255,255,255,.5);text-align:center}
.hb-cross a{color:rgba(255,255,255,.82);border-bottom:1px solid rgba(201,162,75,.55);padding-bottom:1px;transition:color .16s var(--ease)}
.hb-cross a:hover{color:var(--brass-2)}

/* the dense rail closing the hero */
.hero-rail{border-top:1px solid rgba(255,255,255,.17);background:rgba(8,10,13,.4)}
.hero-rail-in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:12px 32px;padding-block:15px;
}
.hr-facts{display:flex;flex-wrap:wrap;gap:8px 28px}
.hr-facts li{display:flex;align-items:baseline;gap:7px}
.hr-facts b{
  font:600 1.02rem/1 var(--f-serif);letter-spacing:-.015em;color:#fff;
  font-feature-settings:"tnum" 1;
}
.hr-facts span{font:400 var(--fs-micro)/1.3 var(--f-sans);color:rgba(255,255,255,.56)}
.hr-pay{display:flex;flex-wrap:wrap;align-items:center;gap:4px 10px}
.hr-pay .lbl{color:rgba(255,255,255,.52)}  /* 44% composited to #767779 on
  this rail, which is 4.36:1 against it and fails AA for 11px text. 52%
  reaches 5.7:1. Only the desktop layout showed it: .hr-pay is display:none
  below 900px, so the phone audit never had the element to judge. */
.hr-coin{font:500 10px/1 var(--f-mono);letter-spacing:.1em;color:rgba(255,255,255,.66)}

/* ------------------------------------------- 10b. section headers */

.sh{margin-bottom:clamp(22px,2.4vw,36px);max-width:74ch}
.sh .lbl{margin-bottom:11px}
.sh--split{
  display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(22px,3.2vw,60px);align-items:end;max-width:none;
}
.sh--split .sec-l{margin-top:0;padding-bottom:4px}
/* the heading only gets ~half the width here, so step the display size down */
.sh--split .sec-t{font-size:clamp(1.6rem,1.15rem + 1.5vw,2.35rem)}
.sh--bar{
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;
  gap:18px 40px;max-width:none;
}
.sh--bar>div{flex:1 1 540px;min-width:0}
.sh--tight{margin-bottom:clamp(20px,2.2vw,30px);align-items:center}
.sh-note{font-size:var(--fs-sm);line-height:1.75;color:var(--slate);max-width:40ch}
.sh-t{font:600 clamp(1.32rem,1.12rem + .8vw,1.8rem)/1.2 var(--f-serif);letter-spacing:-.02em;color:var(--ink)}

/* ------------------------------------------------- 10c. VPS plans */

.plans{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.plan{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);padding:20px clamp(17px,1.6vw,23px) clamp(20px,1.9vw,25px);
}
.plan--feat{background:var(--paper-2)}
.plan--feat::after{
  content:"";position:absolute;inset:0;border-top:3px solid var(--brass);pointer-events:none;
}
.plan-tag{
  align-self:flex-start;margin-bottom:15px;padding:4px 8px;
  font:500 10px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  background:var(--brass);color:var(--paper);
}
.plan-tag.is-empty{background:transparent;color:transparent}
.plan-n{font:600 1.16rem/1 var(--f-serif);letter-spacing:-.015em;color:var(--ink)}
.plan-p{margin-top:11px}
.plan-p .pr-amt{font-size:2.05rem}
.plan-per{margin-top:3px;font:400 var(--fs-micro)/1.4 var(--f-mono);letter-spacing:.07em;color:var(--mute)}
.plan-s{margin-top:17px;padding-top:15px;border-top:1px solid var(--rule);flex:1}
.plan-s li{font-size:var(--fs-sm);line-height:1.5;color:var(--slate)}
.plan-s li+li{margin-top:7px}
.plan-s b{font-weight:500;color:var(--ink)}
.plan-b{margin-top:20px}

.plan-inc{
  margin-top:20px;padding-top:18px;border-top:1px solid var(--rule);
  display:grid;grid-template-columns:auto minmax(0,1fr);gap:10px 34px;align-items:start;
}
.plan-inc .lbl{padding-top:2px;white-space:nowrap}
.plan-inc ul{display:flex;flex-wrap:wrap;gap:7px 26px}
.plan-inc li{position:relative;padding-left:16px;font-size:var(--fs-sm);color:var(--slate)}
.plan-inc li::before{content:"";position:absolute;left:0;top:.58em;width:7px;height:1px;background:var(--brass)}

/* -------------------------------- 10d. product cards (the wider range) */

.sh-sub{margin-top:9px;font-size:.9375rem;line-height:1.55;color:var(--slate);max-width:52ch}

.prod{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;
}
.pcard{
  display:flex;flex-direction:column;
  background:var(--paper);border:1px solid var(--rule-2);
  padding:clamp(22px,2vw,28px);
  transition:border-color .18s var(--ease),background-color .18s var(--ease),transform .18s var(--ease);
}
.pcard:hover{border-color:var(--ink);transform:translateY(-2px)}
.pcard-cat{
  font:500 var(--fs-micro)/1.2 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass);margin-bottom:11px;
}
.pcard-name{
  font:600 clamp(1.2rem,1.08rem + .5vw,1.42rem)/1.15 var(--f-serif);letter-spacing:-.016em;color:var(--ink);
}
.pcard-when{
  margin-top:11px;font-size:.9375rem;line-height:1.55;color:var(--slate);flex:1;
}
.pcard-spec{
  margin-top:18px;padding-top:14px;border-top:1px solid var(--rule);
  font:400 var(--fs-sm)/1.45 var(--f-mono);color:var(--mute);
}
.pcard-foot{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  margin-top:16px;
}
.pcard-price{display:inline-flex;align-items:baseline;gap:.45em}
.pcard-from{font:400 var(--fs-micro)/1 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
.pcard-price .pr-amt{font-size:1.44rem}
.pcard-price .pr-cur{font-size:.5em;margin-top:.3em}
.pcard-price .pr-unit{font-size:var(--fs-micro)}
.pcard-go{
  display:inline-flex;align-items:center;gap:.45em;
  font:500 var(--fs-sm)/1 var(--f-sans);letter-spacing:.01em;color:var(--ink);
}
.pcard-ar{
  width:.56em;height:.56em;flex:none;
  border-top:1.5px solid var(--brass);border-right:1.5px solid var(--brass);
  transform:rotate(45deg);transition:transform .2s var(--ease);
}
.pcard:hover .pcard-ar{transform:rotate(45deg) translate(.14em,-.14em)}

/* ------------------------------- 10d-bis. inner page hero + VPS list */

/* same device as the homepage hero, one step shorter and quieter */
.phero{position:relative;isolation:isolate;background:var(--ink);color:#fff;overflow:hidden}
.phero-img{
  position:absolute;inset:0;z-index:-2;
  width:100%;height:100%;object-fit:cover;object-position:center 55%;
}
.phero-scrim{
  position:absolute;inset:0;z-index:-1;
  background:
    linear-gradient(100deg,rgba(8,10,13,.95) 0%,rgba(8,10,13,.89) 38%,rgba(8,10,13,.62) 74%,rgba(8,10,13,.46) 100%),
    linear-gradient(to top,rgba(8,10,13,.82) 0%,rgba(8,10,13,0) 58%);
}
.phero-in{padding-block:clamp(30px,3.6vw,52px) clamp(24px,2.8vw,38px)}
.phero-k{
  /* now a span inside the <h1>, so the block behaviour it had as a <p>
     has to be asked for explicitly */
  display:block;
  font:500 var(--fs-micro)/1 var(--f-mono);letter-spacing:.18em;text-transform:uppercase;
  color:var(--brass-2);margin-bottom:13px;
}
.phero-h{
  font:600 clamp(1.6rem,1.15rem + 1.7vw,2.45rem)/1.1 var(--f-serif);
  letter-spacing:-.026em;color:#fff;max-width:24ch;text-wrap:balance;
}
.phero-l{
  margin-top:13px;max-width:58ch;
  font-size:.9375rem;line-height:1.6;color:rgba(255,255,255,.74);
}
.phero-meta{display:flex;flex-wrap:wrap;align-items:center;gap:12px 22px;margin-top:20px}
.phero-from{display:flex;align-items:baseline;gap:.45em;color:#fff}
.phero-from>span{font:400 var(--fs-micro)/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;color:rgba(255,255,255,.5)}
.phero-from .pr-amt{font-size:1.9rem;color:#fff}
.phero-from .pr-cur{font-size:.48em;margin-top:.3em;color:rgba(255,255,255,.6)}
.phero-from .pr-unit{font-size:var(--fs-sm);color:rgba(255,255,255,.55)}
.phero-note{font:400 var(--fs-micro)/1.6 var(--f-mono);letter-spacing:.07em;color:rgba(255,255,255,.5)}

.sec--tight{padding-block:clamp(34px,3.6vw,52px)}

/* pick-a-size helper */
.pick{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.pick-i{background:var(--paper);padding:clamp(18px,1.8vw,24px)}
.pick-r{
  font:500 var(--fs-micro)/1 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--brass);margin-bottom:9px;
}
.pick-t{font-size:.9375rem;line-height:1.55;color:var(--slate)}
.pick-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;
  margin-top:18px;font-size:var(--fs-sm);color:var(--slate);
}

/* platform spec sheet */
.hw{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.hw-i{background:var(--paper);padding:clamp(18px,1.8vw,24px)}
.hw-k{
  font:500 var(--fs-micro)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);margin-bottom:10px;
}
.hw-b{margin:0}
.hw-v{display:block;font:600 1.06rem/1.25 var(--f-serif);letter-spacing:-.014em;color:var(--ink)}
.hw-d{display:block;margin-top:8px;font-size:.875rem;line-height:1.55;color:var(--slate)}

/* OS chips */
.os{margin-top:clamp(20px,2.2vw,30px);padding-top:18px;border-top:1px solid var(--rule)}
.os .lbl{margin-bottom:14px}
.os-l{display:flex;flex-wrap:wrap;gap:8px}
.os-l li{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;border:1px solid var(--rule);background:var(--paper);
  font:400 var(--fs-sm)/1 var(--f-mono);letter-spacing:.02em;color:var(--slate);
}
/* Most of these chips now lead somewhere: /os/debian, /os/alpine and the rest.
   The padding moves onto the anchor so the whole chip is the hit area rather
   than the eleven words of text inside it. */
.os-l li:has(.os-l-a){padding:0}
.os-l-a{
  display:inline-flex;align-items:center;gap:8px;
  padding:7px 12px;color:inherit;text-decoration:none;
  transition:color .16s var(--ease),background .16s var(--ease);
}
.os-l-a:hover{background:var(--paper-2);color:var(--brass)}
.os-i{width:16px;height:16px;flex:none}

/* control panels — the same chip strip, licence cost behind a hairline */
.pan-n{color:var(--slate)}
.pan-p{
  padding-left:9px;border-left:1px solid var(--rule-2);
  font-size:var(--fs-micro);letter-spacing:.03em;color:var(--mute);white-space:nowrap;
}
.pan--oss .pan-p{color:var(--ok)}      /* free, and no licence server to answer to */
.os-note{
  margin-top:15px;max-width:88ch;
  font-size:var(--fs-sm);line-height:1.6;color:var(--slate);
}

/* ---- the price list: one compact line per size ----
   A grid, not a table: each row carries its own padding, so a featured or
   sold-out fill stops short of the CTA instead of running into it. */

.builds{--bx:clamp(14px,1.4vw,20px);border:1px solid var(--rule)}
/* Every row is its own grid, so any content-sized track would be measured per
   row — a line without a comparison price would get a narrower money column and
   shunt all its neighbours. The last two tracks are therefore fixed, and the
   rest are fr, which makes the columns identical down the whole list. */
.builds-h,.build{
  display:grid;
  grid-template-columns:
    minmax(0,1.3fr) minmax(0,1.2fr) repeat(3,minmax(0,1fr)) 142px 112px;
  gap:0 clamp(12px,1.4vw,26px);align-items:center;
  padding-inline:var(--bx);
}
.builds-h>*,.build>*{min-width:0}
.builds-h{
  padding-block:10px;background:var(--paper-2);border-bottom:1px solid var(--rule);
  font:400 var(--fs-micro)/1.2 var(--f-mono);letter-spacing:.13em;text-transform:uppercase;
  color:var(--mute);
}
.builds-h-r{text-align:right}

.build{
  position:relative;background:var(--paper);
  padding-block:12px;border-top:1px solid var(--rule);
  transition:background-color .16s var(--ease);
}
.builds-l>.build:first-child{border-top:0}
.build:hover{background:var(--paper-2)}

.build--feat{background:var(--paper-2)}
.build--feat:hover{background:var(--paper-3)}
.build--feat::before{content:"";position:absolute;inset:0 auto 0 0;width:3px;background:var(--brass)}

.build-id{display:flex;align-items:center;flex-wrap:wrap;gap:8px}
.build-n{font:600 1.06rem/1.15 var(--f-serif);letter-spacing:-.014em;color:var(--ink)}
.vps-chip{
  display:inline-block;padding:2px 7px;
  font:500 9px/1.4 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;
  background:var(--brass);color:var(--paper);
}
.vps-chip--out{
  background:color-mix(in srgb,var(--alert) 8%,transparent);
  color:var(--alert);border:1px solid color-mix(in srgb,var(--alert) 34%,transparent);
}

.build-l{display:none}                       /* column headings carry this on desktop */
/* value and qualifier stay on exactly one line each, so every cell is the same
   height and the whole column reads down a single baseline */
.build-c b{
  display:block;font:400 .9375rem/1.35 var(--f-sans);color:var(--ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.build-q{
  display:block;margin-top:1px;
  font:400 var(--fs-micro)/1.4 var(--f-mono);letter-spacing:.02em;color:var(--mute);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}

.build-buy{text-align:right}
.build-p{display:block}
.build-p .pr{justify-content:flex-end}
.build-p .pr-amt{font-size:1.32rem;color:var(--ink)}
.build-p .pr-cur{font-size:.5em;margin-top:.28em}
.build-p .pr-unit{font-size:var(--fs-micro)}
.build-vs{
  display:block;margin-top:1px;min-height:1.4em;
  font:400 var(--fs-micro)/1.4 var(--f-mono);letter-spacing:.03em;color:var(--mute);
  white-space:nowrap;
}
.build-vs s{text-decoration-thickness:1px}
.build-act{text-align:right}
.build-b{padding:9px 16px;white-space:nowrap}
/* out of stock reads where the button would be, so availability is checked once */
.build-out{
  display:inline-flex;align-items:center;justify-content:center;
  padding:9px 16px;white-space:nowrap;
  font:500 var(--fs-sm)/1 var(--f-sans);letter-spacing:.02em;color:var(--alert);
  background:color-mix(in srgb,var(--alert) 7%,transparent);
  border:1px solid color-mix(in srgb,var(--alert) 32%,transparent);
}

/* out of stock: the red stays in the chip, the line simply recedes */
.build--sold .build-n,
.build--sold .build-c b,
.build--sold .build-p .pr-amt,
.build--sold .build-p .pr-cur{color:var(--mute)}

.vps-note{
  margin-top:20px;padding-top:16px;border-top:1px solid var(--rule);
  font-size:var(--fs-sm);line-height:1.6;color:var(--slate);
}

/* region chips */
.reg-chips{display:flex;flex-wrap:wrap;gap:1px;background:var(--rule);border:1px solid var(--rule)}
.reg-chips li{
  display:flex;align-items:center;gap:10px;flex:1 1 210px;
  background:var(--paper);padding:15px 18px;
}
.reg-city{font:600 1rem/1 var(--f-serif);letter-spacing:-.012em;color:var(--ink)}
.reg-cc{font-size:var(--fs-sm);color:var(--mute)}

/* ------------------------------------------------------- 10e. flags */

.flag{
  width:20px;height:15px;flex:none;object-fit:cover;
  border:1px solid var(--rule-2);background:var(--paper);
}

/* ==================================================== 11. trust strip */

.strip{background:var(--paper-2);color:var(--slate);border-block:1px solid var(--rule)}
.strip-in{
  display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;
  gap:16px 40px;padding-block:18px;
}
.strip-lead{font:600 .95rem/1.4 var(--f-serif);letter-spacing:-.008em;color:var(--ink)}
.strip-l{display:flex;flex-wrap:wrap;gap:10px 26px}
.strip-l li{
  display:flex;align-items:center;
  font:400 var(--fs-micro)/1.4 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;
  color:var(--slate);
}
.strip-l li::before{
  content:"";width:4px;height:4px;background:var(--brass);margin-right:10px;flex:none;
  transform:rotate(45deg);
}

/* ================================================= 12. product grid */

.grid-p{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.pc{display:flex;flex-direction:column;background:var(--paper)}
.pc-media{display:block;overflow:hidden;background:var(--paper-3)}
.pc-media img{
  width:100%;aspect-ratio:16/7;object-fit:cover;
  filter:saturate(.8) contrast(1.03);
  transition:transform .7s var(--ease),filter .5s var(--ease);
}
.pc:hover .pc-media img{transform:scale(1.035);filter:saturate(1) contrast(1.03)}
.pc-body{flex:1;padding:clamp(22px,2vw,30px)}
.pc-kick{
  font:500 var(--fs-micro)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;
  color:var(--brass);margin-bottom:12px;
}
.pc-t{font:600 clamp(1.22rem,1.1rem + .5vw,1.48rem)/1.2 var(--f-serif);letter-spacing:-.018em}
.pc-t a{transition:color .18s var(--ease)}
.pc-t a:hover{color:var(--brass)}
.pc-l{margin-top:12px;font-size:.9375rem;line-height:1.6;color:var(--slate)}
.pc-specs{margin-top:20px;padding-top:18px;border-top:1px solid var(--rule)}
.pc-specs li{
  position:relative;padding-left:18px;
  font:400 var(--fs-sm)/1.5 var(--f-sans);color:var(--ink);
}
.pc-specs li+li{margin-top:9px}
.pc-specs li::before{
  content:"";position:absolute;left:0;top:.62em;
  width:6px;height:1px;background:var(--brass);
}
.pc-foot{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  padding:16px clamp(22px,2vw,30px);
  border-top:1px solid var(--rule);background:var(--paper-2);
}
.pc-price{display:flex;align-items:baseline;gap:.5em}
.pc-from{font:400 var(--fs-micro)/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--slate)}

/* ========================================================= 13. tables */

.tbl-w{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tbl{min-width:640px;font-size:.9375rem}
.tbl thead th{
  padding:0 18px 13px 0;text-align:left;vertical-align:bottom;
  font:500 var(--fs-micro)/1.2 var(--f-mono);letter-spacing:.15em;text-transform:uppercase;
  color:var(--slate);
  border-bottom:1px solid var(--rule-2);
}
.tbl tbody th,.tbl tbody td{
  padding:17px 18px 17px 0;text-align:left;vertical-align:top;
  border-bottom:1px solid var(--rule);
}
.tbl tbody th{font-weight:500}

/* network — region cards (replaces the dense table) */
.regions{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.rg{
  position:relative;display:flex;flex-direction:column;
  background:var(--paper);padding:clamp(19px,1.7vw,25px);
  transition:background-color .18s var(--ease);
}
.rg:hover{background:var(--paper-2)}
.rg--flagship::before{content:"";position:absolute;left:0;right:0;top:0;height:2px;background:var(--brass-2)}
.rg-top{display:flex;align-items:center;justify-content:space-between;gap:10px;margin-bottom:15px}
.rg-id{display:inline-flex;align-items:center;gap:8px}
.rg-id .cc{color:var(--brass);min-width:0}
.rg-tag{
  padding:3px 8px;font:500 9px/1.4 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
  border:1px solid var(--rule-2);color:var(--slate);white-space:nowrap;
}
.rg-tag--flagship{border-color:var(--brass);color:var(--brass)}
.rg-tag--offshore{color:var(--mute)}
.rg-city{font:600 1.24rem/1.12 var(--f-serif);letter-spacing:-.016em;color:var(--ink)}
.rg-country{margin-top:3px;font-size:var(--fs-sm);color:var(--mute)}
.rg-note{
  margin-top:14px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:.875rem;line-height:1.5;color:var(--slate);flex:1;
}
.rg-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:16px}
.rg-uplink{font:400 var(--fs-sm)/1 var(--f-mono);color:var(--ink);white-space:nowrap}
.rg-st{display:inline-flex;align-items:center;font:400 var(--fs-micro)/1 var(--f-mono);letter-spacing:.05em;color:var(--slate)}
.rg-st .dot{width:5px;height:5px}

.regions-foot{
  display:flex;flex-wrap:wrap;align-items:center;gap:10px 18px;
  margin-top:clamp(20px,2.2vw,30px);
  font-size:var(--fs-sm);color:var(--slate);
}

/* comparison table */
.tbl--cmp tbody th{width:32%;color:var(--ink)}
.tbl--cmp td{color:var(--slate)}
.tbl--cmp .cmp-us{
  background:var(--paper-2);color:var(--ink);font-weight:500;
  box-shadow:inset 1px 0 0 var(--rule-2),inset -1px 0 0 var(--rule-2);
  padding-left:18px;
}
.tbl--cmp thead .cmp-us{color:var(--brass);border-bottom-color:var(--brass);padding-top:14px}
.tbl--cmp tbody tr:last-child .cmp-us{box-shadow:inset 1px 0 0 var(--rule-2),inset -1px 0 0 var(--rule-2),inset 0 -1px 0 var(--rule-2)}

/* ================================================ 14. network feature */

.net-feat{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);
  gap:clamp(28px,4vw,64px);align-items:center;
  margin-top:clamp(44px,4.6vw,72px);
  padding-top:clamp(36px,3.6vw,56px);border-top:1px solid var(--rule);
}
.net-fig img{width:100%;aspect-ratio:16/10;object-fit:cover;filter:saturate(.82)}
.net-cols{display:grid;gap:clamp(22px,2.4vw,32px)}
.net-cols>div{padding-left:22px;border-left:1px solid var(--rule-2)}
.net-cols p{font-size:.9375rem;line-height:1.62;color:var(--slate)}

/* ========================================================= 15. policy */

.sec--pol{background:var(--paper)}

/* header + intro sit side by side to save vertical space */
.pol-head{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);
  gap:clamp(20px,3vw,56px);align-items:end;
  margin-bottom:clamp(22px,2.4vw,34px);max-width:none;
}
.pol-head>div{min-width:0}
.pol-head .lbl{margin-bottom:12px}
.pol-title{
  font:600 clamp(1.55rem,1.15rem + 1.6vw,2.4rem)/1.12 var(--f-serif);
  letter-spacing:-.024em;color:var(--ink);text-wrap:balance;max-width:20ch;
}
.pol-intro{max-width:52ch;font-size:.9375rem;line-height:1.58;color:var(--slate);padding-bottom:5px}

/* the four principles — a 2x2 editorial grid with oversized numerals */
.prin{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.prin-i{
  display:flex;gap:clamp(14px,1.6vw,20px);
  background:var(--paper);padding:clamp(18px,2vw,26px) clamp(18px,1.9vw,26px);
}
.prin-n{
  font:600 clamp(1.5rem,1.2rem + 1vw,2rem)/1 var(--f-serif);
  color:var(--brass);flex:none;font-feature-settings:"tnum" 1;
  padding-top:.1em;
}
.prin-h{font:600 clamp(1.1rem,1.02rem + .4vw,1.28rem)/1.24 var(--f-serif);letter-spacing:-.016em;color:var(--ink);max-width:26ch}
.prin-t{margin-top:8px;font-size:.9063rem;line-height:1.58;color:var(--slate)}

/* the hard line — two prohibitions, framed and unmistakable */
.line{
  display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  margin-top:clamp(20px,2.2vw,32px);
  background:var(--ink);color:rgba(255,255,255,.72);
}
.line-t{padding:clamp(22px,2.4vw,34px)}
/* This label appears on both surfaces, and no single brass clears 4.5:1 on
   both: the darker one is 4.96 on paper and 3.77 on ink, the lighter one is
   3.47 on paper and 5.36 on ink. So each surface gets the one that works,
   rather than one of them getting a colour nobody can read. */
.lbl--warn{color:var(--brass)!important}
.line .lbl--warn{color:var(--brass-2)!important}
.line-h{
  margin-top:14px;max-width:22ch;
  font:600 clamp(1.24rem,1.1rem + .6vw,1.55rem)/1.24 var(--f-serif);letter-spacing:-.018em;color:#fff;
}
.line-p{margin-top:13px;max-width:50ch;font-size:.9375rem;line-height:1.66;color:rgba(255,255,255,.66)}
.line-cta{margin-top:20px;color:#fff!important;border-bottom-color:var(--brass-2)!important}
.line-cta:hover{color:var(--brass-2)!important}
.line-l{
  display:flex;flex-direction:column;justify-content:center;gap:0;
  padding:clamp(16px,2vw,28px) clamp(24px,2.6vw,36px);
  border-left:1px solid rgba(255,255,255,.14);
}
.line-l li{display:flex;gap:16px;padding:clamp(18px,2vw,24px) 0}
.line-l li+li{border-top:1px solid rgba(255,255,255,.14)}
.line-x{
  position:relative;width:22px;height:22px;flex:none;margin-top:2px;
  border:1.5px solid var(--brass-2);border-radius:50%;
}
.line-x::before,.line-x::after{
  content:"";position:absolute;top:50%;left:50%;width:10px;height:1.5px;
  background:var(--brass-2);
}
.line-x::before{transform:translate(-50%,-50%) rotate(45deg)}
.line-x::after{transform:translate(-50%,-50%) rotate(-45deg)}
.line-c b{display:block;font:600 1.06rem/1.3 var(--f-serif);letter-spacing:-.012em;color:#fff}
.line-c span{display:block;margin-top:4px;font-size:.875rem;line-height:1.5;color:rgba(255,255,255,.62)}

/* ===================================================== 16. settlement */

.steps{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.steps li{background:var(--paper);padding:clamp(24px,2.6vw,34px) clamp(22px,2.2vw,30px)}
.steps-n{font:500 var(--fs-micro)/1 var(--f-mono);letter-spacing:.16em;color:var(--brass);margin-bottom:16px}
.steps-h{font:600 1.16rem/1.24 var(--f-serif);letter-spacing:-.016em;color:var(--ink);margin-bottom:9px}
.steps p:last-child{font-size:.9375rem;line-height:1.62;color:var(--slate)}

/* ---- family cross-links: the policy rail and the network rail are the
   same object, so the rules live here rather than in one family's sheet ---- */
.pol-rail{margin-top:clamp(28px,3.2vw,44px);padding-top:clamp(20px,2.2vw,30px);border-top:1px solid var(--rule)}
.pol-changed{margin-bottom:18px;max-width:72ch;font-size:.8438rem;line-height:1.6;color:var(--mute)}
.pol-changed b{color:var(--slate);font-weight:600}
.pol-rail-h{font:500 var(--fs-micro)/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--brass);margin-bottom:15px}
/* hairlines per item rather than a ruled backdrop showing through: the
   network rail has five cards in a three-column grid, and a backdrop leaves
   the sixth cell painted grey for no reason. Same trick as .net-sum-i. */
.pol-rail-l{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px}
.pol-rail-l>li{box-shadow:0 0 0 1px var(--rule)}
.pol-rail-l a{
  display:block;height:100%;background:var(--paper);padding:14px clamp(15px,1.7vw,19px);
  text-decoration:none;transition:background .16s var(--ease);
}
.pol-rail-l a:hover{background:var(--paper-2)}
.pol-rail-g{display:block;font:400 10px/1.5 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}
.pol-rail-t{display:block;margin-top:6px;font:600 .9688rem/1.3 var(--f-sans);color:var(--ink)}
.pol-rail-l a:hover .pol-rail-t{color:var(--brass)}
.pol-rail-d{display:block;margin-top:3px;font-size:.8125rem;line-height:1.45;color:var(--slate)}
/* the rail's own breakpoints travel with it: they used to live in policy.css,
   which the six network pages do not load — the grid would have stayed three
   columns wide on a phone and pushed the page sideways */
@media (max-width:1080px){.pol-rail-l{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:680px){.pol-rail-l{grid-template-columns:1fr}}

/* ---- what every product includes: the same hairline grid as .steps, four
   across, with the heading itself carrying the link ---- */
.inc{
  display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.inc li{background:var(--paper);padding:clamp(20px,2.2vw,28px) clamp(18px,1.9vw,24px)}
.inc-k{font:500 var(--fs-micro)/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--brass);margin-bottom:14px}
.inc-h{font:600 1.06rem/1.26 var(--f-serif);letter-spacing:-.016em;margin-bottom:9px}
.inc-h a{color:var(--ink);text-decoration:none;border-bottom:1px solid var(--rule-2);transition:color .16s var(--ease),border-color .16s var(--ease)}
.inc-h a:hover{color:var(--brass);border-bottom-color:var(--brass)}
.inc-h .lnk-ar{margin-left:.34em}
.inc-h a:hover .lnk-ar{transform:rotate(45deg) translate(.14em,-.08em)}
.inc-b{font-size:.9rem;line-height:1.6;color:var(--slate)}
@media (max-width:1000px){.inc{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.inc{grid-template-columns:1fr}}

/* ---- the option sheet: parts, and what each one adds to the month ----
   Custom builds have no ladder to list, so the parts are published instead.
   Two columns per line, the price flush right on the mono baseline, so a
   whole group reads as an invoice rather than a feature grid. */
.opts{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:1px;background:var(--rule);border:1px solid var(--rule);
}
.opt-g{background:var(--paper);padding:clamp(20px,2vw,26px) clamp(18px,1.8vw,24px)}
.opt-h{font:600 1.06rem/1.2 var(--f-serif);letter-spacing:-.014em;color:var(--ink)}
.opt-note{
  margin-top:7px;padding-bottom:14px;border-bottom:1px solid var(--rule);
  font-size:.8125rem;line-height:1.5;color:var(--mute);
}
.opt-l li{
  display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:9px 0;border-bottom:1px solid var(--rule);
}
.opt-l li:last-child{border-bottom:0}
.opt-n{font-size:.875rem;line-height:1.4;color:var(--slate)}
.opt-p{
  flex:none;font:400 var(--fs-sm)/1.4 var(--f-mono);letter-spacing:.02em;
  color:var(--ink);white-space:nowrap;
}
/* what is already in the base price is stated, not priced */
.opt-p--inc{color:var(--ok)}
.opt-p--ask{color:var(--mute)}
/* the same part at the only host that publishes a component list */
.opt-r{display:flex;align-items:baseline;gap:8px;flex:none}
.opt-b{font:400 var(--fs-micro)/1.4 var(--f-mono);color:var(--mute);text-decoration-thickness:1px}

/* a call to action sitting between a section header and its content */
.dep-cta-row{
  display:flex;flex-wrap:wrap;align-items:center;gap:12px 20px;
  margin-bottom:clamp(18px,2vw,26px);
}
.dep-cta-row span{flex:1 1 40ch;font-size:var(--fs-sm);line-height:1.6;color:var(--slate)}

.pay-grid{
  display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,.75fr);
  gap:clamp(28px,4vw,60px);margin-top:clamp(36px,4vw,58px);
}
.pay-coins .lbl{padding-bottom:14px;margin-bottom:18px;border-bottom:1px solid var(--rule)}

.coins{display:flex;flex-wrap:wrap;gap:8px}
.coin{
  display:inline-flex;align-items:center;gap:8px;
  padding:8px 12px;border:1px solid var(--rule);
  font:500 var(--fs-sm)/1 var(--f-mono);letter-spacing:.06em;color:var(--slate);
}
.coin-d{width:7px;height:7px;border-radius:50%;background:var(--cc,var(--brass));flex:none}
.coin-i{width:18px;height:18px;flex:none}
/* 9 assets -> an exact 3x3 block, so no empty cells show the rule colour */
.coins--lg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;background:var(--rule);border:1px solid var(--rule)}
.coins--lg .coin{
  padding:15px 18px;border:0;background:var(--paper);color:var(--ink);
  align-items:center;gap:10px;flex-wrap:wrap;
}
.coin-t{font:500 .9375rem/1 var(--f-mono);letter-spacing:.05em}
.coin-n{width:100%;padding-left:17px;font:400 var(--fs-sm)/1.3 var(--f-sans);color:var(--slate);letter-spacing:0}

.pay-note{
  padding:clamp(22px,2.4vw,30px);align-self:start;
  background:var(--paper);border:1px solid var(--rule-2);border-top:2px solid var(--brass);
}
.pay-note .lbl{color:var(--brass);margin-bottom:13px}
.pay-note p{font-size:.9375rem;line-height:1.65;color:var(--slate)}
.pay-fine{
  margin-top:18px;padding-top:16px;border-top:1px solid var(--rule);
  color:var(--mute);font-size:var(--fs-micro)!important;line-height:1.7!important;
}

/* ============================================================ 17. faq */

.faq{border-top:1px solid var(--rule-2);max-width:96ch}
.faq-i{border-bottom:1px solid var(--rule)}
.faq-i summary{
  display:flex;align-items:flex-start;justify-content:space-between;gap:28px;
  padding:22px 0;cursor:pointer;list-style:none;
}
.faq-i summary::-webkit-details-marker{display:none}
.faq-q{
  font:600 clamp(1.04rem,1rem + .32vw,1.2rem)/1.4 var(--f-serif);letter-spacing:-.012em;
  transition:color .18s var(--ease);
}
.faq-i summary:hover .faq-q{color:var(--brass)}
.faq-ic{position:relative;width:13px;height:13px;flex:none;margin-top:.42em;color:var(--brass)}
.faq-ic::before,.faq-ic::after{content:"";position:absolute;background:currentColor;transition:transform .26s var(--ease)}
.faq-ic::before{left:0;right:0;top:6px;height:1.5px}
.faq-ic::after{top:0;bottom:0;left:6px;width:1.5px}
.faq-i[open] .faq-ic::after{transform:scaleY(0)}
.faq-a{padding:0 clamp(28px,6vw,80px) 26px 0;max-width:78ch}
.faq-a p{color:var(--slate);line-height:1.68}

/* ============================================================ 18. cta */

.cta{
  background:var(--paper-3);color:var(--slate);
  padding-block:clamp(60px,7vw,96px);border-top:1px solid var(--rule-2);
}
.cta-in{max-width:var(--wrap)}
.cta-t{
  font:600 clamp(1.7rem,1.2rem + 2.1vw,2.7rem)/1.14 var(--f-serif);
  letter-spacing:-.026em;color:var(--ink);text-wrap:balance;
}
.cta-l{margin-top:18px;max-width:58ch;font-size:1.04rem;line-height:1.65}
.cta-b{display:flex;flex-wrap:wrap;gap:12px;margin-top:30px}
.cta-fine{margin-top:24px;color:var(--mute);letter-spacing:.06em}

/* ============================================================ 19. 404 */

.e404{background:var(--paper);color:var(--slate);padding-block:clamp(70px,10vw,150px)}
.e404-in{max-width:var(--wrap)}
.e404-h{font:600 clamp(1.9rem,1.4rem + 2.4vw,3rem)/1.1 var(--f-serif);letter-spacing:-.028em;color:var(--ink)}
.e404-l{margin-top:18px;max-width:52ch;font-size:1.04rem;line-height:1.65}
.e404-l-list{margin-top:34px;padding-top:8px;border-top:1px solid var(--rule);display:grid;max-width:52ch}
.e404-l-list li{border-bottom:1px solid var(--rule)}
.e404-l-list a{
  display:block;padding:14px 0;font-size:.9375rem;color:var(--slate);
  transition:color .16s var(--ease),padding-left .2s var(--ease);
}
.e404-l-list a:hover{color:var(--brass);padding-left:8px}
.e404-cta{display:flex;flex-wrap:wrap;align-items:center;gap:24px;margin-top:38px}

/* ========================================================= 20. footer */

.ft{background:var(--paper-2);color:var(--slate);border-top:1px solid var(--rule-2)}

.ft-top{
  display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.4fr);
  gap:clamp(36px,4.6vw,80px);
  padding-block:clamp(48px,5.4vw,76px) clamp(36px,3.6vw,50px);
}
.logo--ft .logo-i{width:186px;height:52px}
.ft-stmt{margin-top:20px;max-width:46ch;font-size:.9375rem;line-height:1.68}

.ft-keys{margin-top:26px;display:grid;gap:16px}
.ft-keys dt{margin-bottom:7px}
.ft-keys dd{margin:0}
.ft-keys code{display:block;font-size:var(--fs-micro);line-height:1.6;color:var(--slate);letter-spacing:.04em}
.ft-onion{word-break:break-all}
.ft-status{display:flex;align-items:center;margin-top:24px;font-size:var(--fs-sm);color:var(--slate)}
.ft-status a{color:var(--ink);border-bottom:1px solid var(--rule-2);padding-bottom:1px;margin-left:.35em}
.ft-status a:hover{color:var(--brass);border-color:var(--brass)}

.ft-nav{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,2.4vw,36px)}
.ft-col .lbl{padding-bottom:13px;margin-bottom:13px;border-bottom:1px solid var(--rule)}
.ft-col li+li{margin-top:10px}
.ft-col a{font-size:var(--fs-sm);color:var(--slate);transition:color .16s var(--ease)}
.ft-col a:hover{color:var(--brass)}

.ft-regions,.ft-pay{padding-block:clamp(24px,2.8vw,32px);border-top:1px solid var(--rule)}
.ft-regions .lbl,.ft-pay .lbl{margin-bottom:15px}
.ft-reg-l{display:flex;flex-wrap:wrap;gap:10px 30px}
.ft-reg-l a{display:inline-flex;align-items:center;gap:8px;font-size:var(--fs-sm);color:var(--slate);transition:color .16s var(--ease)}
.ft-reg-l a:hover{color:var(--ink)}
.ft-reg-l .cc{min-width:0}
.ft-pay .coin{background:var(--paper)}

.ft-legal{background:var(--paper-3);border-top:1px solid var(--rule-2)}
.ft-legal-in{
  display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);
  gap:14px clamp(24px,3vw,48px);padding-block:24px 28px;
}
.ft-cp{font-size:var(--fs-sm);line-height:1.62;color:var(--slate);max-width:66ch}
.ft-cp a{color:var(--ink);border-bottom:1px solid var(--rule-2)}
.ft-cp a:hover{color:var(--brass);border-color:var(--brass)}
.ft-sep{display:inline-block;width:1px;height:.9em;background:var(--rule-2);margin:0 .55em;transform:translateY(.1em)}
.ft-legal-l{display:flex;flex-wrap:wrap;gap:8px 22px;justify-content:flex-end;align-content:start}
.ft-legal-l a{font-size:var(--fs-sm);color:var(--slate)}
.ft-legal-l a:hover{color:var(--brass)}
.ft-note{
  grid-column:1/-1;padding-top:18px;margin-top:6px;border-top:1px solid var(--rule);
  font-size:var(--fs-micro)!important;letter-spacing:.1em;color:var(--mute);
}

/* ===================================================== 21. responsive */

@media (max-width:1180px){
  .nav-b{padding:9px 10px;font-size:.84rem}
  .hd-cta .btn--ghost{display:none}
}

@media (max-width:1020px){
  .grid-p{grid-template-columns:repeat(2,minmax(0,1fr))}
  .plans{grid-template-columns:repeat(2,minmax(0,1fr))}
  .regions{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pol-head{grid-template-columns:1fr;align-items:start;gap:14px}
  .pol-intro{padding-bottom:0}
  .prin{grid-template-columns:1fr}
  .line{grid-template-columns:1fr}
  .line-l{border-left:0;border-top:1px solid rgba(255,255,255,.14)}
  .prod{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pick{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hw{grid-template-columns:repeat(2,minmax(0,1fr))}
  .opts{grid-template-columns:repeat(2,minmax(0,1fr))}
  .pol{grid-template-columns:1fr}
  .pol-fig{position:static;max-width:560px}
  .pol-fig img{aspect-ratio:16/9}
  .net-feat{grid-template-columns:1fr}
  .pay-grid{grid-template-columns:1fr}
  .sh--split,.sec-h--split{grid-template-columns:1fr;align-items:start}
  .sh--split .sec-l,.sec-h--split .sec-l{padding-bottom:0}
  .sh--bar{align-items:flex-start}
  .ft-top{grid-template-columns:1fr}
  .ft-nav{grid-template-columns:repeat(2,minmax(0,1fr));gap:32px 24px}
}

@media (max-width:900px){
  .nav,.hd-cta .btn{display:none}
  .burger{display:block}
  .hd-u-in .hd-u-hide{display:none}
  .hd-u-r li:nth-child(n+3){display:none}
  .hero-in{grid-template-columns:1fr;gap:26px}
  .hero-buy{max-width:440px}
  .hero-rail-in{gap:10px 24px}
  .hr-facts{gap:8px 22px}
  .steps{grid-template-columns:1fr}
  .plan-inc{grid-template-columns:1fr;gap:12px}
  .ft-legal-in{grid-template-columns:1fr}
  .ft-legal-l{justify-content:flex-start}
}

/* below this the single line cannot hold: it folds into a labelled block */
@media (max-width:940px){
  .builds-h{display:none}
  .build{
    grid-template-columns:repeat(2,minmax(0,1fr));
    gap:12px 18px;padding-block:16px;
  }
  .build-id{grid-column:1/-1}
  .build-l{
    display:block;margin-bottom:3px;
    font:400 var(--fs-micro)/1.2 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;
    color:var(--mute);
  }
  .build-c b,.build-q{white-space:normal;overflow:visible}
  .build-buy{
    grid-column:1/-1;text-align:left;
    padding-top:12px;border-top:1px solid var(--rule);
  }
  .build-p .pr{justify-content:flex-start}
  .build-vs:empty,.build-vs{min-height:0}
  .build-act{grid-column:1/-1;text-align:left}
  .build-b,.build-out{width:100%;justify-content:center}
}

@media (max-width:680px){
  .hd-u{display:none}            /* utility links live in the drawer and footer */
  .grid-p{grid-template-columns:1fr}
  .strip-in{flex-direction:column;align-items:flex-start;gap:12px}
  .hero-h{max-width:none;text-wrap:balance}
  .brk{display:none}            /* let the headline flow instead of forcing a break */
  .hero-cta{gap:10px}
  .hero-cta .btn{width:100%;justify-content:center}
  .hr-pay{display:none}
  .faq-i summary{gap:18px}
  .ft-nav{grid-template-columns:1fr}
  .coins--lg{grid-template-columns:1fr}
}

@media (max-width:520px){
  .logo-w{font-size:1.05rem}
  .plans{grid-template-columns:1fr}
  .regions{grid-template-columns:1fr}
  .prod{grid-template-columns:1fr}
  .pick{grid-template-columns:1fr}
  .hw{grid-template-columns:1fr}
  .opts{grid-template-columns:1fr}
}

/* ------------------------------------------------- 22. motion / print */

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
}

@media print{
  .hd,.drawer,.mega,.cta{display:none!important}
  body{background:#fff;color:#000}
}

/* ============================================ 16. cross-page components
   Used by the Network pages and the Policy pages alike, so they live here
   rather than in either page-specific sheet. */

.dot--ok{background:var(--ok);box-shadow:0 0 0 3px color-mix(in srgb,var(--ok) 16%,transparent)}
.dot--warn{background:var(--brass-2);box-shadow:0 0 0 3px color-mix(in srgb,var(--brass-2) 18%,transparent)}
.dot--bad{background:var(--alert);box-shadow:0 0 0 3px color-mix(in srgb,var(--alert) 16%,transparent)}

.net-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;margin-bottom:clamp(20px,2.4vw,32px)}
.net-sum-i{background:var(--paper);box-shadow:0 0 0 1px var(--rule);padding:18px 20px}
.net-sum-v{
  font:600 1.9rem/1 var(--f-serif);letter-spacing:-.028em;color:var(--ink);
  font-feature-settings:"tnum" 1;
}
.net-sum-k{margin-top:7px;font:400 var(--fs-micro)/1.4 var(--f-mono);letter-spacing:.11em;text-transform:uppercase;color:var(--mute)}

.lg-cmds{display:grid;gap:1px;margin-top:12px}
.lg-cmd{
  display:grid;grid-template-columns:minmax(0,140px) minmax(0,1fr) auto;gap:4px 14px;align-items:center;
  padding:9px 12px;background:var(--paper-2);box-shadow:0 0 0 1px var(--rule);
}
.lg-cmd-k{font:400 10px/1.5 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.lg-cmd-c{font:400 var(--fs-sm)/1.5 var(--f-mono);color:var(--ink);word-break:break-all}
.lg-copy{
  padding:5px 10px;background:transparent;border:1px solid var(--rule-2);color:var(--mute);
  font:400 10px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;cursor:pointer;
  transition:border-color .16s var(--ease),color .16s var(--ease);
}
.lg-copy:hover{border-color:var(--ink);color:var(--ink)}


/* ==========================================================================
   Shared section furniture.

   These seven live here rather than in a section stylesheet because four
   sections use them: the dashboard, /status and /looking-glass, /policy/privacy
   and /terms. They were written inside account.css and network.css, which meant
   every page outside those two rendered .dash-h2 at browser-default size and
   .st-legend stacked instead of on one line. Nothing about them is specific to
   an account or to the network.
   ========================================================================== */

.dash-chip{
  display:inline-block;padding:3px 8px;
  font:500 10px/1.5 var(--f-mono);letter-spacing:.09em;text-transform:uppercase;
}
.dash-chip--ok{background:color-mix(in srgb,var(--ok) 12%,transparent);color:var(--ok)}
.dash-chip--wait{background:var(--paper-3);color:var(--slate)}
.dash-chip--off{background:var(--paper-2);color:var(--mute)}
.dash-chip--warn{background:color-mix(in srgb,var(--alert) 9%,transparent);color:var(--alert)}

.dash-sec-h{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:10px 24px;margin-bottom:13px}
.dash-h2{
  font:600 clamp(1.08rem,1rem + .4vw,1.28rem)/1.25 var(--f-serif);
  letter-spacing:-.018em;color:var(--ink);
}
.dash-h2--gap{margin-top:26px}
.dash-empty{padding:20px;background:var(--paper);border:1px solid var(--rule);font-size:.9063rem;color:var(--slate)}

.st-sec{margin-top:clamp(24px,3vw,40px)}
.st-sec:first-child{margin-top:0}
.st-legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px;font-size:.75rem;color:var(--mute)}
.st-key{display:inline-block;width:9px;height:14px;margin-left:8px}
.st-key--up{background:var(--ok)}
.st-key--down{background:var(--alert)}
.st-key--none{background:var(--rule)}

/* The getting-started ladder and the small print inside a boxed panel. Here for
   the same reason as the seven above: /sla draws the ladder and /looking-glass
   draws the panel, and neither loads account.css. */

.dash-next{border:1px solid var(--rule)}
.dash-next li{
  display:flex;gap:13px;padding:14px 18px;border-top:1px solid var(--rule);
  background:var(--paper);font-size:.9375rem;line-height:1.55;color:var(--slate);
}
.dash-next li:first-child{border-top:0}
.dash-next b{font-weight:500;color:var(--ink)}
.dash-next-n{
  display:grid;place-items:center;flex:none;width:22px;height:22px;margin-top:1px;
  border:1px solid var(--rule-2);border-radius:50%;
  font:500 var(--fs-micro)/1 var(--f-mono);color:var(--mute);
}
.dash-next li.is-now{background:var(--paper-2)}
.dash-next li.is-now .dash-next-n{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.dash-next li.is-done .dash-next-n{background:var(--ok);border-color:var(--ok);color:var(--paper)}
.dash-next li.is-done{color:var(--mute)}
.dash-next li.is-done b{color:var(--slate)}

.dash-box-b{font-size:.8125rem;line-height:1.55;color:var(--slate);margin-bottom:14px}

/* ================================================ 23. UX audit 07/10/2026 */

/* A dotted run of short phrases keeps each phrase whole — see dp_phrases(). */
.nw{white-space:nowrap}

/* The header CTA: full label on a desktop, one word next to the burger on a
   phone. Below 340 px there is no room for both, and the drawer has the same
   button at full width. */
.hd-deploy-s{display:none}
@media (max-width:900px){
  .hd-cta .btn.hd-deploy{display:inline-flex;padding:10px 15px;min-height:40px}
  .hd-deploy .hd-deploy-l,.hd-deploy .btn-ar{display:none}
  .hd-deploy .hd-deploy-s{display:inline}
}
@media (max-width:520px){
  .logo-i{width:136px;height:38px}
}
@media (max-width:339px){
  .hd-cta .btn.hd-deploy{display:none}
}

/* One plan per row on a phone: the empty badge slot only exists to line the
   plan names up across a row, and with one card per row it was 40 px of
   nothing at the top of every card but one. */
@media (max-width:520px){
  .plan-tag.is-empty{display:none}
}

/* Eight regions as two even rows of four, not five and three with the last
   three stretched wider than the rest. */
.reg-chips{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}

/* Location pages (/locations/<country>): the entity line, the link rows and
   the chips to the other seven. Everything else on them is shared furniture. */
.loc-entity{max-width:74ch;margin:0 0 22px;font-size:var(--fs-base);line-height:1.68;color:var(--ink-2)}
.loc-entity b{font-weight:600;color:var(--ink)}
.loc-links{display:flex;flex-wrap:wrap;gap:12px 30px;margin:0;padding:0;list-style:none}
.reg-chips li:has(.loc-chip){padding:0}
.loc-chip{display:flex;align-items:center;gap:10px;width:100%;padding:15px 18px;color:inherit;transition:background-color .16s var(--ease)}
.loc-chip:hover{background:var(--paper-2)}
.loc-chip:hover .reg-city{color:var(--brass)}
.rg-city a,.reg-city a{color:inherit;text-decoration:none;transition:color .16s var(--ease)}
.rg-city a:hover,.reg-city a:hover{color:var(--brass)}
/* a flag inside a kicker sits on the line with the words, not above them */
.phero-k .flag{display:inline-block;vertical-align:-1px;margin-inline-end:8px}