/* Cypher VPN — design system mirrored from cypheresim.com */
:root {
  --nm-black: #0f0f0f;
  --nm-ink: #1a1a1a;
  --nm-white: #fff;
  --nm-paper: #fafaf7;
  --nm-mist: #f1f1ec;
  --nm-line: #e5e5df;
  --nm-muted: #6b6b62;   /* 5.1:1 on paper, 4.8:1 on mist - #8a8a80 was 3.3:1, under AA */
  --nm-ink-2: #4a4a44;
  --nm-highlight: #f4f39a;
  --nm-lime: #d9f779;
  --nm-lime-hover: #c4eb5f;
  --nm-green: #22c55e;
  --nm-radius-s: 10px;
  --nm-radius-m: 18px;
  --nm-radius-l: 28px;
  --nm-pill: 999px;
  --nm-shadow-card: 0 1px 2px #0000000a, 0 8px 24px #0000000a;
  --nm-shadow-elev: 0 10px 40px #0f0f0f1f;
  --nm-gutter: clamp(16px, 3vw, 40px);
  --nm-max: 1360px;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--nm-paper);
  color: var(--nm-ink);
  font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }

.wrap { max-width: var(--nm-max); margin: 0 auto; padding: 0 var(--nm-gutter); }
.eyebrow {
  font-size: 12px; font-weight: 700; letter-spacing: .14em; text-transform: uppercase;
  color: var(--nm-muted); display: flex; align-items: center; gap: 8px;
}
.eyebrow .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--nm-green); }
h1, h2, h3 { letter-spacing: -.03em; line-height: 1.08; margin: 0; font-weight: 800; }
h1 { font-size: clamp(38px, 5.4vw, 69px); }
h2 { font-size: clamp(28px, 3.4vw, 46px); }
h3 { font-size: 19px; letter-spacing: -.01em; line-height: 1.3; }
p { margin: 0; }
.mark { background: var(--nm-highlight); padding: 0 .12em; border-radius: 4px; box-decoration-break: clone; -webkit-box-decoration-break: clone; }
.lead { color: var(--nm-ink-2); font-size: clamp(15px, 1.2vw, 18px); }
.muted { color: var(--nm-muted); }
.mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }

/* buttons */
.btn {
  display: inline-flex; align-items: center; gap: 10px; cursor: pointer;
  border: 1px solid transparent; border-radius: var(--nm-pill);
  font: inherit; font-weight: 600; font-size: 15px;
  padding: 12px 14px 12px 22px; transition: .18s ease;
}
.btn .arrow {
  width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
  background: var(--nm-lime); color: var(--nm-black); font-size: 14px; flex: none;
}
.btn-primary { background: var(--nm-black); color: #fff; }
.btn-primary:hover { transform: translateY(-1px); box-shadow: var(--nm-shadow-elev); }
.btn-ghost { background: transparent; color: var(--nm-ink); border-color: var(--nm-line); padding: 12px 22px; }
.btn-ghost:hover { border-color: var(--nm-ink); }
.btn-lime { background: var(--nm-lime); color: var(--nm-black); padding: 12px 22px; }
.btn-lime:hover { background: var(--nm-lime-hover); }
.btn-block { width: 100%; justify-content: center; padding: 14px 20px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none; box-shadow: none; }

/* alert bar (unprotected + IP) */
.alert-bar { background: #fdf6dd; border-bottom: 1px solid #efe4b8; color: #4a4436; font-size: 13px; }
.alert-in { display: flex; align-items: center; justify-content: center; gap: 10px 26px; flex-wrap: wrap; padding: 9px var(--nm-gutter); }
.alert-status, .alert-ip { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; }
[hidden] { display: none !important; }
.alert-status b, .alert-ip b { color: #1a1a1a; font-weight: 700; }
.alert-ico { color: #b4870b; font-size: 14px; }
.alert-ip .pin { font-size: 12px; }
.alert-msg { opacity: .8; }
.alert-msg a { font-weight: 700; color: #1a1a1a; text-decoration: underline; text-underline-offset: 2px; }
.alert-bar.safe { background: #eaf7d8; border-bottom-color: #d3ecb2; }
.alert-bar.safe .alert-ico { color: #3f8f22; }
@media (max-width: 700px) { .alert-msg { display: none; } .alert-in { gap: 16px; } }

/* rotating word — highlight hugs the word, width eased so the period glides */
.rotator { display: inline-block; white-space: nowrap; transition: width .34s cubic-bezier(.4,0,.2,1); }
@media (prefers-reduced-motion: reduce) { .rotator { transition: none; } }

/* top strip + nav */
.strip {
  background: var(--nm-black); color: #fff; font-size: 12.5px; letter-spacing: .01em;
  padding: 9px 0; text-align: center;
}
.strip b { color: var(--nm-lime); }
.strip span { opacity: .65; margin-left: 14px; }

/* trust bento (xeovo-style grid) */
.bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.bento-card {
  background: #171717; border: 1px solid #2a2a28; border-radius: var(--nm-radius-l);
  padding: 26px; display: flex; flex-direction: column;
}
.bento-card h3 { color: var(--nm-lime); font-size: 21px; margin-bottom: 10px; }
.bento-card p { color: #a9a9a2; font-size: 14.5px; }
.bento-card.b-accent { background: #16211a; border-color: #24382a; }
.bento-card.b-wide { grid-column: span 2; }
.bento-ico { font-size: 26px; margin-bottom: 14px; }
.flag-art { display: flex; gap: 8px; margin-bottom: 20px; }
.flag-art span { width: 46px; height: 30px; border-radius: 5px; border: 1px solid #2f2f2c; display: block; }
.flag-nl { background: linear-gradient(#ae1c28 33%, #fff 33% 66%, #21468b 66%); }
.flag-ro { background: linear-gradient(90deg, #002b7f 33%, #fcd116 33% 66%, #ce1126 66%); }
.flag-fi { background: linear-gradient(#fff 38%, #003580 38% 62%, #fff 62%); }
.pay-icons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.pay-icons span {
  font-size: 12.5px; font-weight: 700; color: #e8e8e2; background: #0f1a13;
  border: 1px solid #2b4133; border-radius: var(--nm-pill); padding: 6px 13px;
}
@media (max-width: 980px) { .bento { grid-template-columns: 1fr 1fr; } .bento-card.b-wide { grid-column: span 2; } }
@media (max-width: 640px) { .bento { grid-template-columns: 1fr; } .bento-card.b-wide { grid-column: span 1; } }
header.nav { position: sticky; top: 0; z-index: 50; background: rgba(250,250,247,.86); backdrop-filter: blur(10px); border-bottom: 1px solid transparent; }
/* The frosted nav only reads as frosted where the blur exists. Without it .86 alpha
   just lets headings scroll through as legible ghosts, so go opaque instead. */
@supports not (backdrop-filter: blur(1px)) {
  header.nav { background: var(--nm-paper); }
}
header.nav.scrolled { border-bottom-color: var(--nm-line); }
.nav-in { display: flex; align-items: center; gap: 16px; padding: 14px var(--nm-gutter); }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 800; font-size: 17px; letter-spacing: -.02em; white-space: nowrap; }
.logo .glyph {
  width: 34px; height: 34px; border-radius: 50%; background: var(--nm-black);
  display: block; padding: 5px; object-fit: contain; flex: none;
}
.nav-links { display: flex; gap: 16px; margin-left: auto; font-size: 14.5px; font-weight: 500; color: var(--nm-ink-2); white-space: nowrap; }
.nav-links a:hover { color: var(--nm-ink); }
.nav-cta { display: flex; gap: 10px; align-items: center; }
.nav-cta .btn { white-space: nowrap; }
@media (max-width: 1080px) { .nav-cta .nav-signin { display: none; } }
/* ---------- mobile menu ----------
   Below 980px the links, the language switcher and Sign in all used to vanish with
   nothing taking their place: the header offered a logo and one button, so a phone
   visitor could not reach pricing, the cabinet, or - worse for RU/UA - another
   language. A <details> toggle reveals them as a second header row; it needs no JS,
   and it must sit before the panel in the DOM for the ~ combinator to reach it. */
.burger { display: none; }
.nav-only-mobile { display: none; }
@media (max-width: 980px) {
  .nav-in { gap: 12px; flex-wrap: wrap; }
  .nav-links { display: none; }
  .logo { order: 1; }
  .burger { display: block; order: 2; margin-left: auto; }
  .nav-cta { order: 3; margin-left: 0; }
  .nav-links { order: 4; }
  .lang-dd { order: 5; }

  .burger summary {
    list-style: none; cursor: pointer; width: 42px; height: 42px; border-radius: 50%;
    border: 1px solid var(--nm-line); display: grid; align-content: center; justify-items: center;
    gap: 4px; background: transparent;
  }
  .burger summary::-webkit-details-marker { display: none; }
  .burger summary i { display: block; width: 17px; height: 2px; border-radius: 2px; background: var(--nm-ink); transition: .18s ease; }
  .burger[open] summary { background: var(--nm-black); border-color: var(--nm-black); }
  .burger[open] summary i { background: #fff; }
  .burger[open] summary i:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  .burger[open] summary i:nth-child(2) { opacity: 0; }
  .burger[open] summary i:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

  .burger[open] ~ .nav-links {
    display: flex; flex-direction: column; width: 100%; gap: 0; margin: 4px 0 0;
    border-top: 1px solid var(--nm-line); padding-bottom: 6px;
  }
  .burger[open] ~ .nav-links a { padding: 13px 2px; font-size: 16px; border-bottom: 1px solid var(--nm-line); }
  .burger[open] ~ .nav-links a:last-child { border-bottom: 0; }
  .nav-only-mobile { display: block; }
  .burger[open] ~ .lang-dd { display: block; width: 100%; padding-bottom: 12px; }
  .burger[open] ~ .lang-dd summary { width: 100%; justify-content: space-between; padding: 12px 14px; }
}
@media (min-width: 981px) { .nav-only-mobile { display: none; } }
@media (max-width: 620px) {
  .nav-cta .nav-signin { display: none; }
  .nav-cta .btn-primary { font-size: 13.5px; padding: 10px 12px 10px 16px; white-space: nowrap; }
  .nav-cta .btn-primary .arrow { width: 24px; height: 24px; font-size: 12px; }
}

/* hero */
.hero { padding: clamp(34px, 5vw, 72px) 0 clamp(40px, 6vw, 90px); }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero h1 { margin: 18px 0 20px; }
.hero-cta { display: flex; gap: 12px; flex-wrap: wrap; margin: 28px 0 20px; }
.guarantee {
  display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  background: var(--nm-highlight); border-radius: var(--nm-pill); padding: 8px 16px;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }

/* device mock */
.device {
  background: var(--nm-black); border-radius: 38px; padding: 12px; box-shadow: var(--nm-shadow-elev);
  max-width: 340px; margin-left: auto;
}
.device-screen { background: #fff; border-radius: 28px; overflow: hidden; }
.device-bar { display: flex; justify-content: space-between; font-size: 12px; font-weight: 600; padding: 14px 18px 8px; color: var(--nm-ink-2); }
.device-body { padding: 4px 16px 18px; }
.vpn-card { background: var(--nm-mist); border-radius: var(--nm-radius-m); padding: 16px; }
.vpn-row { display: flex; justify-content: space-between; align-items: center; }
.pill-ok { background: var(--nm-lime); color: var(--nm-black); font-size: 11px; font-weight: 800; letter-spacing: .08em; padding: 4px 10px; border-radius: var(--nm-pill); }
.big-num { font-size: 30px; font-weight: 800; letter-spacing: -.03em; margin-top: 10px; }
.big-num small { font-size: 14px; font-weight: 600; color: var(--nm-muted); }
.mini-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 12px; }
.mini { background: #fff; border-radius: var(--nm-radius-s); padding: 10px 12px; }
.mini b { display: block; font-size: 15px; }
.mini span { font-size: 11.5px; color: var(--nm-muted); }
.loc-row { display: flex; justify-content: space-between; padding: 11px 4px; border-top: 1px solid var(--nm-line); font-size: 13.5px; }

/* stats */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; }
.stat { border-top: 2px solid var(--nm-ink); padding-top: 12px; }
.stat b { font-size: clamp(26px, 3vw, 38px); font-weight: 800; letter-spacing: -.03em; display: block; }
.stat span { font-size: 11.5px; font-weight: 700; letter-spacing: .12em; color: var(--nm-muted); text-transform: uppercase; }

/* sections */
section { padding: clamp(46px, 6vw, 92px) 0; }
.sec-head { max-width: 760px; margin-bottom: clamp(28px, 3.5vw, 48px); }
.sec-head h2 { margin: 14px 0 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 980px) { .grid-3, .grid-4 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .grid-3, .grid-4, .grid-2 { grid-template-columns: 1fr; } }

.card {
  background: #fff; border: 1px solid var(--nm-line); border-radius: var(--nm-radius-l);
  padding: 26px; box-shadow: var(--nm-shadow-card);
}
.card .step-n {
  width: 34px; height: 34px; border-radius: 50%; background: var(--nm-black); color: #fff;
  display: grid; place-items: center; font-weight: 800; font-size: 14px; margin-bottom: 16px;
}
.card h3 { margin-bottom: 8px; }
.card p { color: var(--nm-ink-2); font-size: 14.5px; }
.dark { background: var(--nm-black); color: #fff; }
.dark .lead, .dark p { color: #c9c9c2; }
.dark .card { background: #171717; border-color: #2a2a28; color: #fff; }
.dark .card p { color: #a9a9a2; }
.dark .eyebrow, .band .eyebrow { color: #8a8a80; }

/* pricing */
.plan { position: relative; display: flex; flex-direction: column; }
.plan.pop { border-color: var(--nm-ink); box-shadow: var(--nm-shadow-elev); }
.plan .tagpop {
  position: absolute; top: -11px; right: 22px; background: var(--nm-lime); color: var(--nm-black);
  font-size: 11px; font-weight: 800; letter-spacing: .1em; padding: 4px 12px; border-radius: var(--nm-pill);
}
.plan .price { font-size: 40px; font-weight: 800; letter-spacing: -.03em; margin: 6px 0 2px; }
.plan .price small { font-size: 14px; font-weight: 600; color: var(--nm-muted); letter-spacing: 0; }
.plan ul { list-style: none; padding: 0; margin: 16px 0 22px; display: grid; gap: 9px; font-size: 14px; }
.plan li { display: flex; gap: 9px; color: var(--nm-ink-2); }
.plan li::before { content: "✓"; color: var(--nm-black); font-weight: 800; }
.plan .btn { margin-top: auto; }

/* locations */
.loc-card { display: flex; align-items: center; gap: 14px; }
.loc-flag { font-size: 30px; }
.loc-card b { display: block; font-size: 16px; }
.loc-card span { font-size: 13px; color: var(--nm-muted); }
.soon { opacity: .55; }

/* comparison table */
.cmp { width: 100%; border-collapse: collapse; background: #fff; border-radius: var(--nm-radius-l); overflow: hidden; border: 1px solid var(--nm-line); font-size: 14.5px; }
.cmp th, .cmp td { padding: 15px 18px; text-align: left; border-bottom: 1px solid var(--nm-line); }
.cmp thead th { background: var(--nm-black); color: #fff; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; }
.cmp thead th span { display: block; font-size: 10.5px; opacity: .55; letter-spacing: .06em; margin-top: 3px; }
.cmp tbody tr:last-child td { border-bottom: 0; }
.cmp td:first-child { font-weight: 600; }
.cmp .yes { color: var(--nm-ink); font-weight: 700; }
.cmp .no { color: var(--nm-muted); }
.table-scroll { overflow-x: auto; }


/* coins */
.coins { display: flex; flex-wrap: wrap; gap: 10px; }
.coin { display: inline-flex; align-items: center; gap: 8px; background: #fff; border: 1px solid var(--nm-line); border-radius: var(--nm-pill); padding: 9px 18px; font-weight: 600; font-size: 14px; }

/* faq */
.faq { border-top: 1px solid var(--nm-line); }
.faq details { border-bottom: 1px solid var(--nm-line); }
.faq summary { cursor: pointer; list-style: none; padding: 20px 0; font-weight: 600; font-size: 16.5px; display: flex; justify-content: space-between; gap: 18px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-weight: 400; font-size: 22px; color: var(--nm-muted); }
.faq details[open] summary::after { content: "–"; }
.faq p { padding: 0 0 20px; color: var(--nm-ink-2); font-size: 15px; max-width: 820px; }

/* cta band */
.band { background: var(--nm-black); color: #fff; border-radius: var(--nm-radius-l); padding: clamp(30px, 5vw, 64px); text-align: center; }
.band h2 { margin-bottom: 14px; }
.band p { color: #c9c9c2; margin-bottom: 26px; }
/* .band paints every descendant white. Children that bring their own light
   background must opt back out, or their text vanishes into it - which is what
   hid the <h3> on the About hub cards entirely. */
.band .card, .band .doc-cta { color: var(--nm-ink); }
/* .doc-cta's top margin separates it from prose on document pages; inside a .band
   the band's own padding already does that, so the two stacked and pushed the box
   off centre - 108px above against 64px below. .band also centres its text, which
   left this one CTA reading differently from the same component elsewhere. */
.band .doc-cta { margin-top: 0; text-align: left; }
.band .card p, .band .doc-cta p { color: var(--nm-ink-2); margin-bottom: 0; }
.band .card h3, .band .doc-cta b { color: var(--nm-ink); }

/* footer */
footer { border-top: 1px solid var(--nm-line); padding: 48px 0 60px; }
.foot-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr; gap: 28px; }
.foot-grid h4 { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--nm-muted); margin: 0 0 14px; }
.foot-grid a { display: block; padding: 5px 0; font-size: 14.5px; color: var(--nm-ink-2); }
.foot-grid a:hover { color: var(--nm-ink); }
.foot-bottom { display: flex; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-top: 38px; padding-top: 22px; border-top: 1px solid var(--nm-line); font-size: 13px; color: var(--nm-muted); }
@media (max-width: 800px) { .foot-grid { grid-template-columns: 1fr 1fr; } }

/* ============ account / cabinet ============ */
.auth-wrap { min-height: 100vh; display: grid; place-items: center; padding: 40px var(--nm-gutter); }
.auth-card { width: 100%; max-width: 520px; background: #fff; border: 1px solid var(--nm-line); border-radius: var(--nm-radius-l); padding: clamp(24px, 4vw, 40px); box-shadow: var(--nm-shadow-card); }
.auth-card h2 { font-size: 28px; margin-bottom: 8px; }
.auth-icon { width: 52px; height: 52px; border-radius: var(--nm-radius-s); background: var(--nm-mist); display: grid; place-items: center; font-size: 24px; margin-bottom: 18px; }
.field { margin: 16px 0; }
.field label { display: block; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nm-muted); margin-bottom: 7px; }
.input {
  width: 100%; padding: 13px 16px; border: 1px solid var(--nm-line); border-radius: var(--nm-radius-s);
  font: inherit; font-family: ui-monospace, Menlo, monospace; font-size: 15px; background: var(--nm-paper);
}
.input:focus { outline: 2px solid var(--nm-lime); border-color: var(--nm-ink); }
.cred {
  display: flex; align-items: center; gap: 10px; background: var(--nm-paper);
  border: 1px solid var(--nm-line); border-radius: var(--nm-radius-s); padding: 12px 12px 12px 16px; margin-bottom: 10px;
}
.cred code { flex: 1; font-family: ui-monospace, Menlo, monospace; font-size: 16px; font-weight: 600; letter-spacing: .04em; word-break: break-all; }
.copy { border: 0; background: var(--nm-lime); color: var(--nm-black); font: inherit; font-weight: 700; font-size: 13px; padding: 8px 14px; border-radius: var(--nm-radius-s); cursor: pointer; flex: none; }
.copy:hover { background: var(--nm-lime-hover); }
.warn { background: #fdeaea; border: 1px solid #f5c6c6; color: #8d2a2a; border-radius: var(--nm-radius-s); padding: 12px 16px; font-size: 14px; font-weight: 600; display: flex; gap: 10px; }
.info-box { background: var(--nm-mist); border-radius: var(--nm-radius-s); padding: 12px 16px; font-size: 13.5px; color: var(--nm-ink-2); }
.check { display: flex; align-items: center; gap: 10px; margin: 18px 0; font-size: 14.5px; cursor: pointer; }
.check input { width: 18px; height: 18px; accent-color: var(--nm-black); cursor: pointer; }
.auth-alt { text-align: center; margin-top: 18px; font-size: 14px; color: var(--nm-muted); }
.auth-alt a { font-weight: 600; color: var(--nm-ink); text-decoration: underline; }
.err { color: #b42318; font-size: 13.5px; margin-top: 8px; display: none; }

/* dashboard */
.dash { padding: 28px var(--nm-gutter) 70px; }
.dash-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 24px; }
.dash-grid { display: grid; grid-template-columns: 1.35fr 1fr; gap: 16px; align-items: start; }
@media (max-width: 900px) { .dash-grid { grid-template-columns: 1fr; } }
.status-card { background: var(--nm-black); color: #fff; border-radius: var(--nm-radius-l); padding: 28px; }
.status-card .pill-ok { margin-left: auto; }
.status-card .big-num { color: #fff; }
.meter { height: 8px; border-radius: 999px; background: #2a2a28; overflow: hidden; margin: 14px 0 8px; }
.meter i { display: block; height: 100%; background: var(--nm-lime); border-radius: 999px; }
.kv { display: flex; justify-content: space-between; font-size: 13.5px; padding: 9px 0; border-bottom: 1px solid var(--nm-line); }
.kv:last-child { border-bottom: 0; }
.kv span { color: var(--nm-muted); }
.qr-box { display: grid; place-items: center; gap: 14px; text-align: center; }
.qr-box canvas { border-radius: var(--nm-radius-s); border: 1px solid var(--nm-line); }
.sub-url { width: 100%; font-size: 12.5px; }
.dev-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--nm-line); font-size: 14px; }
.dev-row:last-child { border-bottom: 0; }
.dev-row .dot-on { width: 8px; height: 8px; border-radius: 50%; background: var(--nm-green); flex: none; }
.tabs { display: flex; gap: 6px; background: var(--nm-mist); padding: 5px; border-radius: var(--nm-pill); margin-bottom: 20px; width: fit-content; flex-wrap: wrap; }
.tabs button { border: 0; background: transparent; font: inherit; font-weight: 600; font-size: 14px; padding: 9px 18px; border-radius: var(--nm-pill); cursor: pointer; color: var(--nm-ink-2); }
.tabs button.on { background: var(--nm-black); color: #fff; }
.hidden { display: none !important; }
.toast {
  position: fixed; bottom: 26px; left: 50%; transform: translateX(-50%) translateY(20px);
  background: var(--nm-black); color: #fff; padding: 12px 22px; border-radius: var(--nm-pill);
  font-size: 14px; font-weight: 600; opacity: 0; transition: .22s ease; pointer-events: none; z-index: 99;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.demo-note { background: var(--nm-highlight); border-radius: var(--nm-radius-s); padding: 10px 16px; font-size: 13px; font-weight: 600; margin-bottom: 18px; }

/* nav sign-in as a plain text link (proton-style pairing with the filled CTA) */
.nav-signin {
  font-weight: 600; font-size: 14.5px; color: var(--nm-ink);
  padding: 10px 6px; white-space: nowrap;
}
.nav-signin:hover { text-decoration: underline; text-underline-offset: 3px; }

/* ============ BLOG ============ */
.nav-links a.is-active { color: var(--nm-ink); font-weight: 700; }
.blog-head { padding: clamp(30px, 4vw, 58px) 0 clamp(24px, 3vw, 40px); }
.blog-head h1 { font-size: clamp(34px, 4.4vw, 58px); margin-top: 16px; }

.post { display: block; color: inherit; }
.post-art { border-radius: var(--nm-radius-m); aspect-ratio: 16/9; position: relative; overflow: hidden; }
.post-art::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(120% 90% at 78% 22%, #ffffff26, transparent 60%);
}
.art-1 { background: linear-gradient(135deg, #0f0f0f 0%, #1d2b16 62%, #d9f779 165%); }
.art-2 { background: linear-gradient(135deg, #14140f 0%, #2b2a12 70%, #f4f39a 175%); }
.art-3 { background: linear-gradient(135deg, #0f0f0f 0%, #232323 65%, #8a8a80 180%); }
.art-4 { background: linear-gradient(135deg, #101a12 0%, #1b3322 68%, #22c55e 190%); }
.art-5 { background: linear-gradient(135deg, #0f1418 0%, #16303a 66%, #d9f779 195%); }
.art-6 { background: linear-gradient(135deg, #1a1410 0%, #33261a 68%, #f4f39a 190%); }

.post-meta { display: flex; align-items: center; gap: 12px; font-size: 12.5px; color: var(--nm-muted); margin-bottom: 12px; }
.post-meta .tag {
  background: var(--nm-highlight); color: var(--nm-ink); border-radius: var(--nm-pill);
  padding: 4px 12px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; font-size: 11px;
}
.post h2 { font-size: clamp(24px, 2.6vw, 34px); margin-bottom: 12px; }
.post h3 { font-size: 20px; margin-bottom: 10px; }
.post p { color: var(--nm-ink-2); font-size: 14.5px; }
.post-more { display: inline-block; margin-top: 16px; font-weight: 700; font-size: 14.5px; }
.post:hover h2, .post:hover h3 { text-decoration: underline; text-underline-offset: 3px; }
.post:hover .post-art { transform: translateY(-3px); }
.post-art { transition: transform .2s ease; }

.post-lead {
  display: grid; grid-template-columns: 1.15fr 1fr; gap: clamp(20px, 3vw, 44px);
  align-items: center; padding: 26px; background: var(--nm-white);
  border: 1px solid var(--nm-line); border-radius: var(--nm-radius-l);
  box-shadow: var(--nm-shadow-card); margin-bottom: 26px;
}
.post-lead .post-art { aspect-ratio: 4/3; }

.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 22px; }
.post-grid .post-body { padding-top: 16px; }

@media (max-width: 900px) {
  .post-lead { grid-template-columns: 1fr; padding: 18px; }
  .post-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) { .post-grid { grid-template-columns: 1fr; } }

/* article */
.article-wrap { max-width: 760px; padding-top: clamp(24px, 3vw, 44px); padding-bottom: 40px; }
.back-link { font-size: 14px; font-weight: 600; color: var(--nm-muted); }
.back-link:hover { color: var(--nm-ink); }
.article-wrap h1 { font-size: clamp(30px, 3.8vw, 48px); margin: 10px 0 18px; }
.article-lead { font-size: clamp(17px, 1.5vw, 20px); color: var(--nm-ink-2); line-height: 1.55; }
.article-wrap h2 { font-size: clamp(22px, 2.2vw, 30px); margin: 38px 0 14px; }
.article-wrap p { margin-bottom: 16px; line-height: 1.72; }
.article-wrap ul { margin: 0 0 18px; padding-left: 22px; }
.article-wrap li { margin-bottom: 10px; line-height: 1.65; }
.article-wrap blockquote {
  margin: 26px 0; padding: 18px 24px; background: var(--nm-white);
  border-left: 4px solid var(--nm-lime); border-radius: 0 var(--nm-radius-m) var(--nm-radius-m) 0;
  font-size: 18px; font-weight: 600; box-shadow: var(--nm-shadow-card);
}
.article-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 44px; padding: 26px; background: var(--nm-mist);
  border-radius: var(--nm-radius-l); border: 1px solid var(--nm-line);
}

/* ============ HERO ART (IP → tunnel → VPN IP) ============ */
.hero-art { position: relative; min-height: 520px; display: grid; place-items: center; }

.art-dots {
  position: absolute; inset: -6% 0;
  background-image: radial-gradient(circle, #b8bfd0 1.5px, transparent 1.6px);
  background-size: 15px 15px; opacity: .5;
  -webkit-mask-image: radial-gradient(ellipse 62% 52% at 50% 46%, #000 45%, transparent 92%);
          mask-image: radial-gradient(ellipse 62% 52% at 50% 46%, #000 45%, transparent 92%);
}
.art-arcs { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }

.device { position: relative; z-index: 2; margin: 0; max-width: 268px; }
.protected-row {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  font-weight: 700; font-size: 15px; color: #157f3d;
  background: linear-gradient(#e9f8dc, #f5fbec); padding: 10px 0 12px;
}
.protected-row .lock { font-size: 13px; }
.meter { height: 6px; border-radius: 99px; background: #e3e3dc; overflow: hidden; margin-top: 12px; }
.meter i { display: block; height: 100%; background: var(--nm-lime); border-radius: 99px; }
.kv-rows { margin-top: 12px; }
.kv {
  display: flex; justify-content: space-between; align-items: center;
  padding: 9px 4px; border-top: 1px solid var(--nm-line); font-size: 12.5px;
}
.kv span { color: var(--nm-muted); }
.kv b { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 12px; }

.ip-tag {
  position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px;
  background: var(--nm-white); border: 1px solid var(--nm-line); border-radius: 13px;
  padding: 9px 13px; box-shadow: var(--nm-shadow-elev); white-space: nowrap;
}
.ip-tag b { display: block; font-size: 11.5px; }
.ip-tag .mono { font-size: 11.5px; color: var(--nm-muted); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.ip-ico { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; font-size: 14px; flex: none; }
.ip-ico-open { background: #f1f1ec; filter: grayscale(1); }
.ip-ico-safe { background: var(--nm-highlight); }
.ip-tag-left  { left: -52px; top: 40%; }
.ip-tag-right { right: -18px; top: 66%; }
.ip-tag-right b { color: var(--nm-ink); }

@media (max-width: 1150px) { .ip-tag-left { left: -18px; } .ip-tag-right { right: -14px; } }
@media (max-width: 900px) {
  .hero-art { min-height: 0; margin-top: 28px; }
  .art-dots { inset: 0; }
  .art-arcs { display: none; }
  .ip-tag { position: static; }
  .hero-art { display: grid; gap: 14px; justify-items: center; }
  .ip-tag-left { order: -1; }
}

/* connection card (mirrors the eSIM passport card language) */
.conn-card {
  position: relative; z-index: 2; width: 100%; max-width: 318px;
  background: var(--nm-white); border: 1px solid var(--nm-line);
  border-radius: var(--nm-radius-l); padding: 22px; box-shadow: var(--nm-shadow-elev);
}
.conn-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.conn-head h3 { font-size: 19px; margin-bottom: 3px; }
.conn-loc {
  display: flex; align-items: center; gap: 12px;
  background: var(--nm-mist); border-radius: var(--nm-radius-m); padding: 14px;
}
.conn-flag { font-size: 22px; }
.conn-loc b { font-size: 15px; }
.chips { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; }
.chips span {
  font-size: 10.5px; font-weight: 600; color: var(--nm-ink-2);
  background: var(--nm-white); border: 1px solid var(--nm-line);
  border-radius: var(--nm-pill); padding: 3px 9px;
}
.ping { font-size: 12.5px; font-weight: 700; font-family: ui-monospace, Menlo, monospace; }
.conn-usage { margin-top: 16px; }
.usage-top { display: flex; justify-content: space-between; align-items: baseline; font-size: 12.5px; margin-bottom: 8px; }
.usage-top span { color: var(--nm-muted); }
.usage-top b { font-size: 13.5px; }
.conn-card .kv-rows { margin-top: 16px; }

/* ============ DOC PAGES (privacy / terms / servers) ============ */
.doc-head { padding: clamp(30px, 4vw, 56px) 0 clamp(20px, 2.6vw, 34px); }
.doc-head h1 { font-size: clamp(32px, 4.2vw, 54px); margin-top: 16px; }
/* Doc pages share the landing's container so headings and body line up on the
   same left edge; only the prose is capped to a readable measure. */
.doc-wrap { max-width: var(--nm-max); }
.doc-wrap > p,
.doc-wrap > h2,
.doc-wrap > h3,
.doc-wrap > ul,
.doc-wrap > ol,
.doc-wrap > blockquote,
.doc-wrap > .log-yes,
.doc-wrap > .canary { max-width: 820px; }
.doc-wrap h2 { font-size: clamp(21px, 2.1vw, 28px); margin: 40px 0 14px; }
.doc-wrap h3 { font-size: 17px; margin-bottom: 8px; }
.doc-wrap p { margin-bottom: 14px; line-height: 1.72; color: var(--nm-ink-2); }
.doc-wrap p b, .doc-wrap li b { color: var(--nm-ink); }
.doc-wrap a:not(.btn) { text-decoration: underline; text-underline-offset: 3px; font-weight: 600; color: var(--nm-ink); }
.doc-list { margin: 0 0 18px; padding-left: 20px; color: var(--nm-ink-2); }
.doc-list li { margin-bottom: 9px; line-height: 1.65; }

.log-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin: 20px 0 8px; }
.log-no {
  background: var(--nm-white); border: 1px solid var(--nm-line); border-radius: var(--nm-radius-m);
  padding: 16px 18px; position: relative;
}
.log-no::before {
  content: "✕"; position: absolute; top: 14px; right: 16px;
  color: #c0392b; font-weight: 800; font-size: 13px;
}
.log-no b { display: block; font-size: 15px; margin-bottom: 5px; padding-right: 20px; }
.log-no span { font-size: 13.5px; color: var(--nm-ink-2); line-height: 1.55; }

.log-yes {
  background: var(--nm-mist); border-left: 4px solid var(--nm-lime);
  border-radius: 0 var(--nm-radius-m) var(--nm-radius-m) 0; padding: 18px 22px; margin-bottom: 14px;
}
.log-yes p { margin-bottom: 0; }

.doc-cta {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 44px; padding: 24px; background: var(--nm-mist);
  border: 1px solid var(--nm-line); border-radius: var(--nm-radius-l);
}

/* servers table */
.srv-table { border: 1px solid var(--nm-line); border-radius: var(--nm-radius-l); overflow: hidden; background: var(--nm-white); }
.srv-row { display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 14px; padding: 15px 20px; align-items: center; font-size: 14px; }
.srv-row + .srv-row { border-top: 1px solid var(--nm-line); }
.srv-head { background: var(--nm-black); color: var(--nm-lime); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.srv-row b { display: block; font-size: 15px; }
.srv-row i { font-style: normal; font-size: 12.5px; color: var(--nm-muted); }
.srv-tag { font-size: 12.5px; font-weight: 600; }
.canary { background: var(--nm-black); color: #d8d8d2; border-radius: var(--nm-radius-l); padding: 26px; margin-top: 20px; }
.canary p b { color: var(--nm-lime); }
.canary .doc-list { color: #b6b6ae; }
.canary p, .canary .muted { color: #b6b6ae; }
.canary .doc-list li b { color: #fff; }
@media (max-width: 860px) {
  .log-grid { grid-template-columns: 1fr 1fr; }
  .srv-row { grid-template-columns: 1fr 1fr; row-gap: 6px; }
  .srv-head { display: none; }
}
@media (max-width: 560px) { .log-grid { grid-template-columns: 1fr; } .srv-row { grid-template-columns: 1fr; } }
.linklike { background: none; border: 0; padding: 0; font: inherit; color: var(--nm-muted); cursor: pointer; }
.linklike:hover { color: var(--nm-ink); text-decoration: underline; }

/* ============ CHECK TOOL + SETUP TABS ============ */
.check-hero {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  background: var(--nm-white); border: 1px solid var(--nm-line); border-radius: var(--nm-radius-l);
  padding: 26px; box-shadow: var(--nm-shadow-card);
}
.check-hero.is-bad { border-color: #f0d9a8; background: #fffdf6; }
.check-hero.is-ok  { border-color: #cfe8b4; background: #fbfef7; }
.check-label { font-size: 12px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--nm-muted); }
.check-ip { font-size: clamp(24px, 3vw, 34px); font-weight: 700; margin: 8px 0 6px; letter-spacing: -.02em; }
.check-badge { font-size: 12px; font-weight: 800; letter-spacing: .08em; text-transform: uppercase; padding: 8px 16px; border-radius: var(--nm-pill); background: var(--nm-mist); }
.check-badge.bad { background: #fdecc8; color: #8a5a00; }
.check-badge.ok  { background: var(--nm-lime); color: var(--nm-black); }
.check-badge.idle { color: var(--nm-muted); }

.check-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 14px; }
.check-card { background: var(--nm-white); border: 1px solid var(--nm-line); border-radius: var(--nm-radius-m); padding: 18px; }
.cc-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cc-top b { font-size: 14.5px; line-height: 1.3; }
.cc-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--nm-muted); flex: none; }
.check-card.cc-ok   .cc-dot { background: #3f9d2f; }
.check-card.cc-warn .cc-dot { background: #e0a800; }
.check-card.cc-bad  .cc-dot { background: #c0392b; }
.check-card { display: block; }
.cc-val { font-size: 13.5px; margin: 10px 0 8px; overflow-wrap: anywhere; }
.check-card p { font-size: 13px; color: var(--nm-ink-2); line-height: 1.55; margin: 0; }

.tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; }
.tab {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  background: var(--nm-white); border: 1px solid var(--nm-line);
  border-radius: var(--nm-pill); padding: 9px 18px; color: var(--nm-ink-2);
}
.tab:hover { border-color: var(--nm-ink); }
.tab.is-on { background: var(--nm-black); color: #fff; border-color: var(--nm-black); }
.pane { display: none; }
.pane.is-on { display: block; }
.steps { counter-reset: s; list-style: none; padding: 0; margin: 0 0 18px; }
.steps li {
  counter-increment: s; position: relative; padding: 0 0 16px 44px;
  color: var(--nm-ink-2); line-height: 1.65;
}
.steps li::before {
  content: counter(s); position: absolute; left: 0; top: -1px;
  width: 28px; height: 28px; border-radius: 50%; background: var(--nm-black); color: var(--nm-lime);
  display: grid; place-items: center; font-size: 13px; font-weight: 800;
}
.steps li b { color: var(--nm-ink); }
.steps code { background: var(--nm-mist); padding: 2px 6px; border-radius: 5px; font-size: 13px; }
@media (max-width: 860px) { .check-grid { grid-template-columns: 1fr; } }

/* ============ BILLING SWITCH + TRIAL ============ */
.billing {
  display: inline-flex; gap: 4px; padding: 5px; margin-bottom: 22px;
  background: var(--nm-mist); border: 1px solid var(--nm-line); border-radius: var(--nm-pill);
}
.bill-opt {
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  border: 0; background: transparent; color: var(--nm-ink-2);
  border-radius: var(--nm-pill); padding: 9px 18px; display: inline-flex; align-items: center; gap: 8px;
}
.bill-opt:hover { color: var(--nm-ink); }
.bill-opt.is-on { background: var(--nm-black); color: #fff; }
.bill-opt .save {
  font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase;
  background: var(--nm-lime); color: var(--nm-black); border-radius: var(--nm-pill); padding: 3px 9px;
}
.trial-strip {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  margin-top: 20px; padding: 22px 26px; border-radius: var(--nm-radius-l);
  background: var(--nm-black); color: #fff;
}
.trial-strip b { display: block; font-size: 18px; margin-bottom: 4px; }
.trial-strip span { color: #a9a9a2; font-size: 14.5px; }
@media (max-width: 620px) { .billing { width: 100%; justify-content: center; flex-wrap: wrap; } }

/* ============ COMPARISON TABLE ============ */
.cmp-scroll { overflow-x: auto; border: 1px solid var(--nm-line); border-radius: var(--nm-radius-l); background: var(--nm-white); }
.cmp { width: 100%; border-collapse: collapse; min-width: 760px; font-size: 14px; }
.cmp th, .cmp td { padding: 14px 16px; text-align: left; border-bottom: 1px solid var(--nm-line); }
.cmp thead th { background: var(--nm-black); color: #cfcfc7; font-size: 12px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }
.cmp thead th.us { color: var(--nm-lime); }
.cmp td.us { background: #fbfdf3; }
.cmp tbody td:first-child { color: var(--nm-ink-2); font-weight: 600; }
.cmp td.no { color: #a8503f; }
.cmp tr.loss td:first-child::after { content: " ↓"; color: #a8503f; font-weight: 700; }
.cmp tbody tr:last-child td { border-bottom: 0; }

/* location pages */
.loc-facts { display: grid; grid-template-columns: repeat(4, auto); gap: 12px 34px; margin-top: 26px; justify-content: start; }
.loc-facts b { display: block; font-size: 17px; }
.loc-facts span { font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nm-muted); }
.loc-link { display: block; }
.loc-link b { display: block; font-size: 17px; margin-bottom: 4px; }
.loc-link:hover { border-color: var(--nm-ink); }
@media (max-width: 700px) { .loc-facts { grid-template-columns: 1fr 1fr; } }

/* language dropdown — <details> so it still works with JS disabled */
.lang-dd { position: relative; flex: none; }
.lang-dd summary {
  list-style: none; cursor: pointer; user-select: none;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; font-weight: 700; letter-spacing: .04em; color: var(--nm-ink-2);
  background: var(--nm-mist); border: 1px solid var(--nm-line); border-radius: var(--nm-pill);
  padding: 8px 12px; line-height: 1;
}
.lang-dd summary::-webkit-details-marker { display: none; }
.lang-dd summary:hover { color: var(--nm-ink); border-color: var(--nm-ink); }
.lang-dd .caret { font-size: 10px; opacity: .6; transition: transform .15s ease; }
.lang-dd[open] summary { background: var(--nm-black); color: #fff; border-color: var(--nm-black); }
.lang-dd[open] .caret { transform: rotate(180deg); }
.lang-menu {
  position: absolute; right: 0; top: calc(100% + 8px); z-index: 60; min-width: 190px;
  background: var(--nm-white); border: 1px solid var(--nm-line); border-radius: var(--nm-radius-m);
  box-shadow: var(--nm-shadow-elev); padding: 6px; display: grid; gap: 2px;
}
.lang-menu a, .lang-menu .lang-on {
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 9px 12px; border-radius: var(--nm-radius-s); font-size: 14px; font-weight: 600;
}
.lang-menu i { font-style: normal; font-size: 11px; font-weight: 700; letter-spacing: .06em; color: var(--nm-muted); }
.lang-menu a { color: var(--nm-ink-2); }
.lang-menu a:hover { background: var(--nm-mist); color: var(--nm-ink); }
.lang-menu .lang-on { background: var(--nm-black); color: #fff; }
.lang-menu .lang-on i { color: var(--nm-lime); }
@media (max-width: 980px) { .lang-dd { display: none; } }   /* revealed inside the burger panel */

/* ============ CABINET: switches, devices, billing, checkout ============ */
.kv-actions { padding-top: 16px; margin-top: 6px; border-top: 1px solid var(--nm-line); }
.mini-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--nm-muted); margin-bottom: 8px; }
.seg { display: inline-flex; gap: 3px; padding: 3px; background: var(--nm-mist); border: 1px solid var(--nm-line); border-radius: var(--nm-pill); flex-wrap: wrap; }
.seg button {
  font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; border: 0; background: transparent;
  color: var(--nm-ink-2); border-radius: var(--nm-pill); padding: 7px 14px; line-height: 1;
}
.seg button:hover { color: var(--nm-ink); }
.seg button.on { background: var(--nm-black); color: #fff; }
.hint { font-size: 13px; color: var(--nm-muted); margin-top: 12px; line-height: 1.5; }

.tg-card.is-linked { border-color: #cfe8b4; background: #fbfef7; }
.tg-done { margin-top: 14px; }
.tg-done b { display: block; color: #3f8f22; font-size: 15px; margin-bottom: 4px; }
.tg-done span { font-size: 13.5px; color: var(--nm-ink-2); }
.ref-row { display: flex; gap: 8px; align-items: center; margin-top: 14px; }
.ref-row .input { flex: 1; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 14px; }

.dev-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 14px 0; border-top: 1px solid var(--nm-line); }
.dev-row:first-child { border-top: 0; }
.dev-row b { display: block; font-size: 15px; }
.dev-row i { font-style: normal; font-size: 13px; color: var(--nm-muted); }
.dev-row.free { opacity: .5; }

.pay-table { border: 1px solid var(--nm-line); border-radius: var(--nm-radius-m); overflow: hidden; }
.pay-row { display: grid; grid-template-columns: 1.1fr 2fr 1fr .8fr; gap: 12px; padding: 13px 16px; font-size: 14px; align-items: center; }
.pay-row + .pay-row { border-top: 1px solid var(--nm-line); }
.pay-head { background: var(--nm-mist); font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--nm-muted); }
.coin-tag { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12.5px; font-weight: 700; }

/* The card grew past the viewport once checkout gained a period picker and a device
   stepper, and with overflow visible the Pay button simply sat below the fold with
   no way to reach it. The card scrolls; Pay stays pinned to its bottom edge. */
.modal { position: fixed; inset: 0; z-index: 200; background: #0f0f0fcc; display: grid; place-items: center; padding: 20px; overflow-y: auto; }
.modal-card {
  position: relative; width: 100%; max-width: 460px; background: var(--nm-white);
  border-radius: var(--nm-radius-l); padding: 30px; box-shadow: var(--nm-shadow-elev);
  max-height: calc(100vh - 40px); overflow-y: auto; overscroll-behavior: contain;
}
.modal-card #buyConfirm {
  position: sticky; bottom: -30px; margin-bottom: 0;
  box-shadow: 0 -14px 20px -10px var(--nm-white);
}
.modal-x { position: absolute; top: 16px; right: 18px; border: 0; background: none; font-size: 17px; cursor: pointer; color: var(--nm-muted); }
.modal-x:hover { color: var(--nm-ink); }
.buy-opts { display: grid; gap: 8px; }
.buy-opt {
  font: inherit; cursor: pointer; text-align: left; display: flex; align-items: center; gap: 10px;
  background: var(--nm-white); border: 1px solid var(--nm-line); border-radius: var(--nm-radius-m); padding: 14px 16px;
}
.buy-opt b { font-size: 15px; flex: 1; }
.buy-opt span { font-weight: 700; }
.buy-opt i { font-style: normal; font-size: 11px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; background: var(--nm-lime); color: var(--nm-black); border-radius: var(--nm-pill); padding: 3px 9px; }
.buy-opt.on { border-color: var(--nm-ink); background: var(--nm-mist); }
@media (max-width: 600px) { .pay-row { grid-template-columns: 1fr 1fr; } .pay-head { display: none; } }

/* cabinet header actions + referral share */
.cab-head-actions { display: flex; align-items: center; gap: 12px; }
.lang-seg button { font-size: 11.5px; letter-spacing: .04em; padding: 7px 11px; }
.ref-actions { display: flex; gap: 8px; margin-top: 10px; flex-wrap: wrap; }
.ref-actions .btn { padding: 9px 16px; }
@media (max-width: 620px) {
  .cab-head-actions { flex-wrap: wrap; justify-content: flex-end; gap: 8px; }
  .cab-head-actions .lang-seg button { padding: 7px 10px; font-size: 12px; }
}


/* ---------- touch targets (must stay last: these override base rules above) ----------
   Footer rows were 32px and stacked with no gap; the location links 18px. */
@media (max-width: 760px) {
  .foot-grid a { padding: 11px 0; }
  .foot-bottom a { padding: 8px 0; display: inline-block; }
  .loc-link { padding: 6px 0; }
  .loc-row { padding: 13px 4px; }
  .coins .coin { padding: 10px 14px; }
  /* country names are card headings that happen to be links: 18px of clickable
     text, under even the 24px WCAG minimum. inline-block so the padding counts. */
  a[href*="location-"] { display: inline-block; padding: 12px 0; }
  /* the trigger is full width inside the burger panel, so the menu should be too -
     right-anchored it hung off toward the edge and floated over the hero */
  .lang-dd .lang-menu { left: 0; right: 0; min-width: 0; }
}

/* ---------- scroll hint for the comparison table (must stay last) ----------
   It scrolls but gave no sign of it, so the columns just looked cut off. The two
   scrollers carry different class names and different backgrounds: .table-scroll
   sits on paper, .cmp-scroll paints its own white and declares it 400 lines below
   this - which is why an earlier copy of this block silently lost the cascade.
   Shadows use background-attachment so each side shows only while more table remains. */
@media (max-width: 760px) {
  .table-scroll {
    background:
      linear-gradient(to right, var(--nm-paper), rgba(250,250,247,0)) left / 28px 100% no-repeat local,
      linear-gradient(to left,  var(--nm-paper), rgba(250,250,247,0)) right / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(15,15,15,.16), rgba(15,15,15,0)) left / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(15,15,15,.16), rgba(15,15,15,0)) right / 12px 100% no-repeat scroll;
  }
  .cmp-scroll {
    background:
      linear-gradient(to right, var(--nm-white), rgba(255,255,255,0)) left / 28px 100% no-repeat local,
      linear-gradient(to left,  var(--nm-white), rgba(255,255,255,0)) right / 28px 100% no-repeat local,
      radial-gradient(farthest-side at 0 50%, rgba(15,15,15,.16), rgba(15,15,15,0)) left / 12px 100% no-repeat scroll,
      radial-gradient(farthest-side at 100% 50%, rgba(15,15,15,.16), rgba(15,15,15,0)) right / 12px 100% no-repeat scroll;
  }
  .table-scroll .cmp, .cmp-scroll .cmp { background: transparent; }
}

/* ---------- checkout summary ---------- */
.buy-sum { margin-top: 18px; border-top: 1px solid var(--nm-line); padding-top: 14px; display: grid; gap: 7px; font-size: 13.5px; }
.buy-sum div { display: flex; justify-content: space-between; gap: 12px; color: var(--nm-ink-2); }
.buy-sum div span:last-child { font-weight: 700; color: var(--nm-ink); }
.buy-sum .saved span { color: #4a7c17; }

/* ---------- pricing by term ---------- */
.terms-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 12px; }
.term {
  position: relative; font: inherit; cursor: pointer; text-align: left;
  background: var(--nm-white); border: 1px solid var(--nm-line); border-radius: var(--nm-radius-l);
  padding: 20px 18px; display: grid; gap: 4px; transition: .16s ease;
}
.term:hover { border-color: var(--nm-ink); transform: translateY(-2px); }
.term b { font-size: 14px; color: var(--nm-ink-2); font-weight: 600; }
.term .term-amt { font-size: clamp(22px, 2.2vw, 27px); font-weight: 800; letter-spacing: -.02em; color: var(--nm-ink); }
.term i { font-style: normal; font-size: 13px; color: var(--nm-muted); }
.term-off {
  position: absolute; top: -9px; right: 12px; font-style: normal;
  background: var(--nm-lime); color: var(--nm-black); font-size: 11px; font-weight: 800;
  padding: 3px 8px; border-radius: 999px;
}
.term.is-best { border-color: var(--nm-ink); box-shadow: var(--nm-shadow-card); }

.incl { margin-top: 22px; background: var(--nm-mist); border: 1px solid var(--nm-line); border-radius: var(--nm-radius-l); padding: 24px 26px; }
.incl h3 { font-size: 16px; margin-bottom: 12px; }
.incl ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 26px; margin-bottom: 18px; }
.incl li { list-style: none; position: relative; padding-left: 24px; font-size: 14.5px; color: var(--nm-ink-2); }
.incl li::before { content: "\2713"; position: absolute; left: 0; font-weight: 800; color: var(--nm-ink); }

@media (max-width: 900px) { .terms-grid { grid-template-columns: repeat(2, 1fr); } .incl ul { grid-template-columns: 1fr; } }
@media (max-width: 460px) { .terms-grid { grid-template-columns: 1fr; } }

.buy-opt .off { font-style: normal; background: var(--nm-lime); color: var(--nm-black); font-size: 11px; font-weight: 800; padding: 3px 8px; border-radius: 999px; }
.buy-opt i { font-style: normal; font-size: 12.5px; color: var(--nm-muted); }

/* ---------- "need more devices" prompt ---------- */
.need-more {
  margin-top: 16px; padding: 18px 20px; border-radius: var(--nm-radius-l);
  background: #f3f8dd; border: 1px solid #dcebac;
}
.need-more p { font-size: 14.5px; color: var(--nm-ink-2); margin-bottom: 14px; }
.need-more p b { color: var(--nm-ink); }
.need-more-actions { display: flex; gap: 10px; flex-wrap: wrap; }
.need-more .pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px;
  border-radius: 999px; background: var(--nm-white); border: 1px solid #dcebac;
  font-size: 14px; font-weight: 600; color: var(--nm-ink); transition: .15s ease;
}
.need-more .pill:hover { border-color: var(--nm-ink); }

/* ---------- mobile hero order (must stay last) ----------
   Stacked on a phone the text ran first and the connection card fell below the
   fold, so the product was the last thing anyone saw. Putting the art first
   instead pushed the H1 off-screen - the value proposition vanished entirely.
   So: headline, then the picture, then the pitch and the buttons.
   display:contents dissolves the text column so its children can be ordered
   individually against the art, with no markup change. */
@media (max-width: 900px) {
  .hero-grid { display: flex; flex-direction: column; }
  .hero-grid > :first-child { display: contents; }
  .hero .eyebrow  { order: 1; }
  .hero h1        { order: 2; margin-bottom: 4px; }
  .hero-art       { order: 3; margin: 22px 0 26px; }
  .hero .lead     { order: 4; }
  .hero .hero-cta { order: 5; margin-top: 22px; }
  .hero .guarantee{ order: 6; }
}

/* The hero art is 602px on a phone, which pushes the pitch and the CTA a full
   screen and a half down. Tighten it: the card is a mock-up, not a data table. */
@media (max-width: 620px) {
  .hero-art { gap: 10px; }
  .conn-card { padding: 16px; }
  .conn-head { margin-bottom: 10px; }
  .conn-loc { padding: 12px; }
  .conn-usage { margin: 12px 0; }
  .kv-rows .kv { padding: 8px 0; font-size: 13px; }
  .ip-tag { padding: 9px 12px; }
}