/* Stealthy — next. One stylesheet for every page.
 *
 * Idea: every site you open sees where you are (city + network). Stealthy
 * changes where you show up, the way a stealth aircraft shows up on radar
 * as something else, somewhere else. Not invisible: sites still see a
 * visitor. The radar card on the home page is the one loud thing;
 * everything else stays quiet so it can be heard.
 *
 * Cached immutable: bump ?v= in every HTML file when this changes.
 */

@font-face {
  font-family: "Archivo";
  src: url("/fonts/archivo-latin.woff2") format("woff2");
  font-weight: 600 700;
  font-display: swap;
}
@font-face {
  font-family: "Public Sans";
  src: url("/fonts/public-sans-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-display: swap;
}
@font-face {
  font-family: "IBM Plex Mono";
  src: url("/fonts/ibm-plex-mono-latin.woff2") format("woff2");
  font-weight: 400;
  font-display: swap;
}

:root {
  /* Colour */
  --paper: #f5f7fc;      /* cool white — the ground */
  --sheet: #ffffff;      /* cards */
  --tint: #e8edf8;       /* quiet panels */
  --ink: #0a1024;        /* text, dark bands */
  --ink-2: #161e3a;      /* raised surfaces on ink */
  --muted: #4f5872;      /* secondary text on paper (6.6:1) */
  --muted-on-ink: #9aa4c2; /* secondary text on ink (7.4:1) */
  --quiet: #7c86a3;      /* greyed half of a big headline (3.4:1, large text only) */
  --hint: #6b7490;       /* placeholders (4.6:1 on sheet) */
  --rule: #d4dae9;
  --rule-on-ink: #28314f;
  --blue: #2962ff;       /* Stealthy blue: actions */
  --blue-hover: #1a4de0; /* also text links on tint, where --blue is 4.2:1 */
  --cyan: #57fff9;       /* signal: only ever on ink */
  --grid: rgba(154, 164, 194, 0.07); /* radar grid on ink */

  /* Type */
  --display: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --body: "Public Sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --mono: "IBM Plex Mono", ui-monospace, "Cascadia Mono", Menlo, monospace;

  --fs-hero: clamp(2.5rem, 5.6vw, 4.5rem);
  --fs-h1: clamp(2.25rem, 5vw, 3.75rem);
  --fs-h2: clamp(1.75rem, 3.4vw, 2.625rem);
  --fs-h3: 1.25rem;
  --fs-lead: clamp(1.0625rem, 1.5vw, 1.25rem);
  --fs-body: 1.0625rem;
  --fs-small: 0.9375rem;
  --fs-label: 0.75rem;

  /* Space */
  --max: 1160px;
  --gutter: clamp(16px, 4vw, 40px);
  --section: clamp(64px, 10vw, 128px);
  --radius: 14px;
  --radius-s: 8px;
  --nav-h: 68px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--nav-h) + 16px);
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/1.6 var(--body);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

img, svg { max-width: 100%; }
img { height: auto; }

a { color: var(--blue); text-underline-offset: 0.18em; text-decoration-thickness: 1px; }
a:hover { color: var(--blue-hover); text-decoration-thickness: 2px; }

:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
  border-radius: 4px;
}
.on-ink :focus-visible, .footer :focus-visible { outline-color: var(--cyan); }

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.01em; line-height: 1.2; }
p { margin: 0; }
p + p { margin-top: 1em; }
code, kbd {
  font-family: var(--mono);
  font-size: 0.875em;
  background: var(--tint);
  border-radius: 5px;
  padding: 0.1em 0.4em;
  overflow-wrap: anywhere;
}
kbd { border: 1px solid var(--rule); background: var(--sheet); }

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

.skip {
  position: absolute;
  left: 16px;
  top: -60px;
  z-index: 100;
  background: var(--ink);
  color: #fff;
  padding: 10px 16px;
  border-radius: var(--radius-s);
}
.skip:focus { top: 12px; }

.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* Labels: mono caps. Used only for things that are labels. */
.label {
  font-family: var(--mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.on-ink .label { color: var(--muted-on-ink); }

.lead {
  font-size: var(--fs-lead);
  line-height: 1.55;
  color: var(--muted);
  max-width: 38em;
}
.on-ink .lead { color: var(--muted-on-ink); }

/* ---------- Buttons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5em;
  min-height: 48px;
  padding: 0 22px;
  border: 1.5px solid transparent;
  border-radius: 999px;
  font: 600 1rem/1 var(--body);
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color 0.15s, color 0.15s, border-color 0.15s, transform 0.15s;
}
/* .btn { display: inline-flex } beats the browser's [hidden] rule, so a
   PRO visitor still saw the trial button. Author [hidden] has to win. */
[hidden] { display: none !important; }
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--blue); color: #fff; }
.btn-primary:hover { background: var(--blue-hover); color: #fff; }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--rule); }
.btn-ghost:hover { border-color: var(--ink); color: var(--ink); }
.btn-lg { min-height: 56px; padding: 0 28px; font-size: 1.0625rem; }
.btn-sm { min-height: 38px; padding: 0 16px; font-size: 0.9375rem; }
.on-ink .btn-primary { background: var(--cyan); color: var(--ink); }
.on-ink .btn-primary:hover { background: #fff; color: var(--ink); }
.on-ink .btn-ghost { color: #fff; border-color: var(--rule-on-ink); }
.on-ink .btn-ghost:hover { border-color: #fff; color: #fff; }

.arrow-link {
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
}
.arrow-link::after { content: " \2192"; transition: margin 0.15s; }
.arrow-link:hover::after { margin-left: 3px; }
.arrow-link[target="_blank"]::after { content: " \2197"; }
.on-ink .arrow-link { color: var(--cyan); }

/* ---------- Logo ---------- */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: inherit;
  text-decoration: none;
}
.logo:hover { color: inherit; }
.logo-mark {
  width: 32px;
  height: 32px;
  border-radius: 9px;
  background: var(--blue);
  display: grid;
  place-items: center;
}
.logo-mark::before {
  content: "";
  width: 24px;
  height: 24px;
  background: #fff;
  -webkit-mask: url("/img/mark.svg") center / contain no-repeat;
  mask: url("/img/mark.svg") center / contain no-repeat;
}
.logo-word {
  width: 94px;
  height: 26px;
  background: currentColor;
  -webkit-mask: url("/img/logo.svg") left center / contain no-repeat;
  mask: url("/img/logo.svg") left center / contain no-repeat;
}

/* ---------- Nav ---------- */

.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(245, 247, 252, 0.88);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s;
}
.nav.scrolled { border-bottom-color: var(--rule); }
.nav-inner {
  height: var(--nav-h);
  display: flex;
  align-items: center;
  gap: 24px;
}
.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}
.nav-links > a {
  padding: 8px 12px;
  border-radius: 999px;
  color: var(--ink);
  font-weight: 500;
  font-size: var(--fs-small);
  text-decoration: none;
}
.nav-links > a:hover { background: var(--tint); }
.nav-links > a[aria-current="page"] { background: var(--tint); }
.nav-actions { display: flex; gap: 8px; margin-left: 12px; }
.nav-toggle {
  display: none;
  margin-left: auto;
  width: 44px;
  height: 44px;
  border: 0;
  border-radius: 999px;
  background: transparent;
  color: var(--ink);
  cursor: pointer;
}
.nav-toggle:hover { background: var(--tint); }

@media (max-width: 860px) {
  .nav-toggle { display: grid; place-items: center; }
  .nav-links {
    display: none;
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px var(--gutter) 24px;
    background: var(--paper);
    border-bottom: 1px solid var(--rule);
  }
  .nav-links.open { display: flex; }
  .nav-links > a { padding: 14px 4px; border-radius: 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; }
  .nav-links > a:hover, .nav-links > a[aria-current="page"] { background: none; }
  .nav-actions { margin: 16px 0 0; }
  .nav-actions .btn { flex: 1; }
}

/* ---------- Sections ---------- */

.section { padding-block: var(--section); }
.section-tight { padding-block: calc(var(--section) * 0.6); }
.on-ink { background: var(--ink); color: #fff; }
.on-tint { background: var(--tint); }
.on-tint a:not([class]), .on-tint .arrow-link { color: var(--blue-hover); }
.section-head { max-width: 44rem; margin-bottom: clamp(32px, 5vw, 56px); }
.section-head .label { display: block; margin-bottom: 16px; }
.section-head .lead { margin-top: 16px; }

/* Page head for inner pages */
.page-head { padding-block: clamp(48px, 8vw, 96px) clamp(32px, 5vw, 56px); }
.page-head .label { display: block; margin-bottom: 18px; }
.page-head h1 { max-width: 16em; }
.page-head .lead { margin-top: 20px; }
.page-head-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 32px; }

.prose { max-width: 42rem; }
.prose h2 { font-size: clamp(1.375rem, 2.4vw, 1.75rem); margin: 2.2em 0 0.6em; }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose li { color: #283047; }
.prose ul, .prose ol { padding-left: 1.2em; }
.prose li + li { margin-top: 0.4em; }
.prose h3 { font-size: 1.125rem; margin: 1.45em 0 0.4em; }
.prose blockquote {
  margin: 1.2em 0;
  padding: 0.2em 0 0.2em 1em;
  border-left: 3px solid var(--rule);
}
.prose blockquote p { margin: 0.4em 0; }
.prose cite { font-style: normal; }
.prose p.note { color: var(--muted); }

/* ---------- Home: hero ---------- */

.hero { overflow-x: clip; padding-block: clamp(40px, 7vw, 96px) clamp(56px, 8vw, 112px); }
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.hero h1 { font-size: var(--fs-hero); letter-spacing: -0.035em; line-height: 0.98; }
.hero h1 .quiet { display: block; color: var(--quiet); }
.hero .label { display: block; margin-bottom: 24px; }
.hero .lead { margin-top: 28px; }
/* Updated heroes wrap the ads paragraph, so it is not p + p with the next line. */
.ext-hero [data-pro-member] + p { margin-top: 1em; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px 24px; margin-top: 36px; }
.hero-alt { font-size: var(--fs-small); color: var(--muted); }
.hero-alt.is-have { display: none; }

@media (max-width: 960px) {
  .hero-grid { grid-template-columns: 1fr; }
}

/* ---------- The radar (live state card) ----------
   Hooks used by home.js, ext.js and functions/lib/state-card.js — keep
   them: .state[data-on], .state-on-badge, span[data-place], dd[data-net],
   .state-note, .state-foot, .state-foot-sub.
   Off: your blip sits on the scope. On: it is gone and ours (the mark)
   shows somewhere else. Sites still see a visitor; just not where you are. */

.radar {
  position: relative;
  border-radius: calc(var(--radius) + 6px);
  background:
    linear-gradient(var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    linear-gradient(90deg, var(--grid) 1px, transparent 1px) 0 0 / 28px 28px,
    var(--ink);
  border: 1px solid var(--rule-on-ink);
  box-shadow: 0 30px 60px -30px rgba(10, 16, 36, 0.55), 0 2px 6px rgba(10, 16, 36, 0.08);
  color: #fff;
}
.state {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 20px;
  padding: clamp(24px, 3.4vw, 36px);
}
.state > * { grid-column: 1 / -1; }
.state > .state-on-badge { grid-column: 1; grid-row: 1; justify-self: start; }
.state > .state-caption { grid-column: 1; grid-row: 2; align-self: start; }
.state > .scope { grid-column: 2; grid-row: 1 / span 2; }
.state-on-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 18px;
  padding: 6px 12px 6px 10px;
  border-radius: 999px;
  background: var(--ink-2);
  color: var(--cyan);
  font: 400 var(--fs-label)/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.state-on-badge::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 3px rgba(87, 255, 249, 0.25);
}
.state-on-badge[hidden] { display: none; }
.state .label { color: var(--muted-on-ink); }
.state-address {
  margin: 24px 0 0;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 10px 18px;
  align-items: baseline;
}
.state-address dt {
  font: 400 var(--fs-label)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-on-ink);
}
.state-address dd { margin: 0; }
.state-place {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  line-height: 1.08;
  letter-spacing: -0.02em;
}
.state-address dd[data-net], .state-via { font-weight: 600; font-size: 1.125rem; }
.state-note {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed var(--rule-on-ink);
  font-size: var(--fs-small);
  color: var(--muted-on-ink);
}
.state-foot {
  margin-top: 18px;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
}
.state-foot + .state-foot-sub { margin-top: 4px; font-size: var(--fs-small); color: var(--muted-on-ink); }
.state[data-on="1"] .state-place::after,
main[data-ext-pending] .state-place::after {
  content: "";
  display: inline-block;
  width: 0.45em;
  height: 0.45em;
  margin-left: 0.3em;
  border-radius: 50%;
  background: var(--cyan);
  box-shadow: 0 0 0 4px rgba(87, 255, 249, 0.2);
  vertical-align: 0.12em;
}
.state-caption, .state-address { position: relative; }

/* The scope: decorative. The sweep turns; the blips say off or on. */
.scope {
  width: clamp(104px, 11vw, 140px);
  height: auto;
  overflow: visible;
  pointer-events: none;
}
.scope-ring, .scope-cross { fill: none; stroke: var(--rule-on-ink); stroke-width: 1.25; }
.scope-ring.edge { stroke: #3a4570; stroke-width: 1.5; }
.scope-sweep {
  transform-box: view-box;
  transform-origin: 80px 80px;
  animation: sweep 4s linear infinite;
}
.blip-you circle { fill: #fff; }
.blip-you .blip-halo { fill: none; stroke: #fff; stroke-width: 1.25; opacity: 0.5; }
.blip-ours { fill: var(--cyan); opacity: 0; }
.state[data-on="1"] .blip-you,
main[data-ext-pending] .blip-you { visibility: hidden; }
.state[data-on="1"] .blip-ours,
main[data-ext-pending] .blip-ours { opacity: 1; animation: blip-in 0.5s cubic-bezier(0.2, 1.4, 0.4, 1) both; }
.blip-you { animation: blip-pulse 4s linear infinite; }

@keyframes sweep { to { transform: rotate(360deg); } }
@keyframes blip-pulse {
  0%, 12% { opacity: 1; }
  60%, 100% { opacity: 0.45; }
}
@keyframes blip-in {
  from { opacity: 0; transform: scale(0.4); }
  to { opacity: 1; transform: scale(1); }
}
.blip-ours { transform-box: fill-box; transform-origin: center; }

/* ---------- Home: ways in ---------- */

.ways { border-top: 1px solid var(--rule); }
.way {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) auto;
  gap: 16px clamp(24px, 4vw, 56px);
  align-items: start;
  padding-block: clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--rule);
}
.way-q {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.375rem, 2.4vw, 1.875rem);
  line-height: 1.12;
  letter-spacing: -0.02em;
}
.way-a h3 { font-size: 1.0625rem; font-family: var(--body); font-weight: 600; letter-spacing: 0; }
.way-a p { margin-top: 6px; color: var(--muted); }
.way-meta { margin-top: 12px !important; }
.way-go { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; }
/* Once Stealthy is installed, its line replaces the button. Cap the width so
   the auto column does not take the row, and drop the other-browser link. */
.way-go .store-have { max-width: 19rem; }
.way-go:has(.store-have) .arrow-link { display: none; }
@media (max-width: 860px) {
  .way { grid-template-columns: 1fr; }
  .way-go { flex-direction: row; flex-wrap: wrap; align-items: center; }
  .way-go .store-have { max-width: none; }
}

/* ---------- Home: honest ledger ---------- */

.ledger {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}
.ledger-col {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 40px);
}
.ledger-col h3 { margin-bottom: 20px; }
.ledger ul { list-style: none; margin: 0; padding: 0; }
.ledger li {
  position: relative;
  padding: 14px 0 14px 34px;
  border-top: 1px solid var(--rule);
}
.ledger li::before {
  position: absolute;
  left: 0;
  top: 14px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font: 700 0.8125rem/1 var(--body);
}
.ledger .does li::before { content: "\2713"; background: var(--blue); color: #fff; }
.ledger .doesnt li::before { content: "\2013"; background: var(--tint); color: var(--ink); }
@media (max-width: 760px) { .ledger { grid-template-columns: 1fr; } }

/* ---------- Location tags (PRO locations) ----------
   Read like a readout: the code is the place, the dot is a blip. */

.locs { display: flex; flex-wrap: wrap; gap: 12px; list-style: none; margin: 0; padding: 0; }
.loc {
  --loc-bg: var(--sheet);
  --loc-line: var(--rule);
  --loc-code: var(--blue);
  width: auto;
  min-width: 112px;
  color: var(--ink);
}
.loc-inner {
  position: relative;
  display: block;
  height: 100%;
  min-height: 112px;
  background: var(--loc-bg);
  border: 1px solid var(--loc-line);
  border-radius: var(--radius-s);
  padding: 14px 12px 12px;
}
.loc-inner::after {
  content: "";
  position: absolute;
  top: 14px;
  right: 12px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--loc-code);
}
.loc b {
  display: block;
  font: 700 2rem/1 var(--display);
  letter-spacing: -0.03em;
  color: var(--loc-code);
}
.loc span {
  display: block;
  margin-top: 18px;
  max-width: 100%;
  overflow-wrap: normal;
  word-break: keep-all;
  font: 400 0.6875rem/1.3 var(--mono);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.loc-more .loc-inner { border-style: dashed; }
.loc-more .loc-inner::after { content: none; }
.loc-more b { color: var(--muted); }
a.loc-inner { color: inherit; text-decoration: none; transition: border-color 0.15s; }
a.loc-inner:hover { border-color: var(--blue); color: inherit; }
a.loc-inner:hover b { color: var(--blue); }
.on-ink .loc { --loc-bg: var(--ink-2); --loc-line: var(--rule-on-ink); --loc-code: var(--cyan); color: #fff; }
.on-ink .loc-more b { color: var(--muted-on-ink); }
.on-ink a.loc-inner:hover { border-color: var(--cyan); }
.on-ink a.loc-inner:hover b { color: var(--cyan); }

/* Countries on request (/pro/#on-request): dashed, muted, no blip, so they
   never read as live. Each chip is a submit button in one form. */
.loc-ask .loc-inner {
  /* Buttons centre their content; pin it to the top like the live cards. */
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  min-height: 92px;
  border-style: dashed;
  font: inherit;
  text-align: left;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s;
}
.loc-ask .loc-inner::after { content: none; }
.loc-ask b { font-size: 1.5rem; color: var(--muted); }
.loc-ask span { margin-top: 14px; }
.loc-ask .loc-inner:hover, .loc-ask .loc-inner:focus-visible { border-color: var(--blue); }
.loc-ask .loc-inner:hover b { color: var(--blue); }
.loc-ask .is-asked { border-style: solid; border-color: var(--blue); cursor: default; }
.loc-ask .is-asked b { color: var(--blue); }
.ask-tag {
  position: absolute;
  top: 12px;
  right: 10px;
  font: 600 0.625rem/1 var(--mono);
  font-style: normal;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--blue);
}
/* Hidden until the no-JS post lands on /pro/#asked, or ask.js adds .show.
   display, not [hidden]: the UA rule for [hidden] would beat :target. */
.ask-thanks {
  display: none;
  margin-bottom: 24px;
  padding: 12px 16px;
  border-left: 3px solid var(--blue);
  background: var(--tint);
  font-weight: 600;
}
.ask-thanks:target, .ask-thanks.show { display: block; }
/* "Live now" / "Ask for yours": two groups so the live four never wrap
   into the ask chips. The group label says what the dot means. */
.locs-head { display: block; margin: 0 0 14px; }
.locs + form .locs-head { margin-top: 36px; }

/* Three to a row on phones instead of 2 + 2 + 1. */
@media (max-width: 560px) {
  .locs { gap: 10px; }
  .loc { width: auto; min-width: 112px; }
  .loc b { font-size: 1.75rem; }
  .loc span { letter-spacing: 0.02em; }
  .loc-ask b { font-size: 1.375rem; }
}

/* ---------- Home: PRO band ---------- */

.pro-band {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
}
.pro-band h2 { color: #fff; }
.pro-band h2 em { font-style: normal; color: var(--cyan); }
.price-line { display: flex; align-items: baseline; flex-wrap: wrap; gap: 6px 14px; margin-top: 32px; }
.price-line .big { font: 700 clamp(2.5rem, 5vw, 3.5rem)/1 var(--display); letter-spacing: -0.03em; }
.price-line .per { color: var(--muted-on-ink); }
.pro-band .fine { margin-top: 12px; color: var(--muted-on-ink); font-size: var(--fs-small); }
.pro-band .hero-actions { margin-top: 28px; }
.pro-list { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 10px; }
.pro-list li { display: flex; gap: 12px; }
.pro-list li::before { content: "\2192"; color: var(--cyan); font-weight: 700; }
@media (max-width: 860px) { .pro-band { grid-template-columns: 1fr; } }

/* ---------- Home: since 2012 ---------- */

.origin h2 { max-width: 20em; font-size: clamp(1.75rem, 3.6vw, 2.875rem); }
.origin h2 .quiet { color: var(--quiet); }
.principles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: clamp(32px, 5vw, 56px);
}
.principle { border-top: 2px solid var(--ink); padding-top: 18px; }
.principle p { color: var(--muted); margin-top: 8px; }
.origin-links { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 40px; }
@media (max-width: 760px) { .principles { grid-template-columns: 1fr; } }

/* ---------- Shortcuts (help strip, 404) ---------- */

.shortcuts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 12px;
}
.shortcut {
  display: block;
  padding: 20px 22px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  color: var(--ink);
  text-decoration: none;
  transition: border-color 0.15s, transform 0.15s;
}
.shortcut:hover { border-color: var(--blue); color: var(--ink); transform: translateY(-2px); }
.shortcut b { display: block; font-weight: 600; }
.shortcut span { display: block; margin-top: 4px; color: var(--muted); font-size: var(--fs-small); }
.split-head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: end;
  gap: 16px 32px;
  margin-bottom: 28px;
}

/* ---------- Choice rows (download page) ---------- */

.group + .group { margin-top: clamp(48px, 7vw, 80px); }
/* Phones: VPN group first. Source order stays extension, VPN, proxy.
   page.js sets html[data-device=phone] from youMatch (Android or iPhone). */
html[data-device="phone"] .section.flush-top > .wrap:has(> .group) {
  display: flex;
  flex-direction: column;
  gap: clamp(48px, 7vw, 80px);
}
html[data-device="phone"] .section.flush-top > .wrap:has(> .group) > .group { margin-top: 0; }
html[data-device="phone"] .section.flush-top > .wrap:has(> .group) > .group:nth-child(2) { order: -1; }
.group-head { display: grid; gap: 8px; margin-bottom: 20px; max-width: 42rem; }
.group-head h2 { font-size: clamp(1.5rem, 2.8vw, 2rem); }
.group-head p { color: var(--muted); }
.rows {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  overflow: hidden;
}
.row {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 24px;
  padding: 20px clamp(18px, 3vw, 28px);
}
.row + .row { border-top: 1px solid var(--rule); }
.row b { font-weight: 600; font-size: 1.0625rem; }
.row .sub { display: block; color: var(--muted); font-size: var(--fs-small); margin-top: 2px; }
.row[data-you] { background: linear-gradient(90deg, rgba(41, 98, 255, 0.07), transparent 70%); }
.row[data-you] > div > b::after {
  content: "Your device";
  margin-left: 10px;
  padding: 3px 8px;
  border-radius: 999px;
  background: var(--blue);
  color: #fff;
  font: 400 0.6875rem/1 var(--mono);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  vertical-align: 0.2em;
}
.row[data-you="compat"] > div > b::after { content: "Works on your browser"; }
/* Next-step line under a store button, and the non-link that replaces
   that button once the extension says it is installed. JS inserts both.
   The "Your device" badge is only the row title, not this text. */
.store-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-width: 0;
  max-width: 28rem;
}
.store-cta > p + p { margin-top: 0; }
.row > .store-cta { align-items: flex-end; text-align: right; }
.store-next {
  margin: 0;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--muted);
}
.store-have { margin: 0; color: inherit; }
.row .store-have { text-align: left; }
.store-have-title {
  display: block;
  font-weight: 600;
  font-size: 1.0625rem;
  line-height: 1.3;
}
.store-have .sub {
  display: block;
  margin-top: 4px;
  color: var(--muted);
  font-size: var(--fs-small);
  font-weight: 400;
  line-height: 1.45;
}
.note {
  margin-top: 16px;
  font-size: var(--fs-small);
  color: var(--muted);
  max-width: 44rem;
}

/* ---------- Steps (a real sequence) ---------- */

.steps {
  list-style: none;
  margin: 0;
  padding: 0;
  counter-reset: step;
  display: grid;
  gap: 12px;
}
.steps > li {
  counter-increment: step;
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  align-items: start;
  padding: 22px clamp(18px, 3vw, 28px);
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
.steps > li::before {
  content: counter(step);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  border: 1.5px solid var(--blue);
  color: var(--blue);
  font: 700 1.125rem/1 var(--display);
}
.steps h3 { font-size: 1.125rem; padding-top: 10px; }
.steps p { margin-top: 6px; color: var(--muted); }
.steps .btn { margin-top: 16px; }
.steps-row { grid-template-columns: repeat(3, 1fr); }
.steps-row > li { grid-template-columns: 1fr; }
@media (max-width: 860px) { .steps-row { grid-template-columns: 1fr; } .steps-row > li { grid-template-columns: 44px 1fr; } }
/* Same cards, no sequence numbers: the lesser row under a real .steps list. */
.steps-plain > li::before { content: none; display: none; }
.steps-plain > li { grid-template-columns: 1fr; }
.steps-plain h3 { padding-top: 0; }
.steps + .steps { margin-top: clamp(28px, 4vw, 48px); }
.steps + .note,
.pro-thanks-steps + .note { margin-top: 28px; }
@media (max-width: 860px) {
  .pro-thanks-steps { display: flex; flex-direction: column; gap: 12px; }
  .pro-thanks-steps > .steps { display: contents; }
  .pro-thanks-steps .thanks-phone { order: -1; }
  .pro-thanks-steps > .steps:not(.steps-plain) > li:nth-child(1)::before { content: "1"; }
  .pro-thanks-steps > .steps:not(.steps-plain) > li:nth-child(2)::before { content: "2"; }
}
@media (max-width: 860px) { .steps-plain.steps-row > li { grid-template-columns: 1fr; } }

/* ---------- Two-up panels ---------- */

.duo { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.duo > :only-child { grid-column: 1 / -1; }
.panel {
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(24px, 3.4vw, 40px);
  display: flex;
  flex-direction: column;
}
.panel .label { margin-bottom: 14px; }
.panel h2, .panel h3 { font-size: clamp(1.5rem, 2.6vw, 1.875rem); }
.panel > p { margin-top: 10px; color: var(--muted); }
.panel ol { margin: 22px 0 0; padding-left: 1.25em; display: grid; gap: 10px; }
.panel ol li::marker { font-family: var(--display); font-weight: 700; color: var(--blue); }
.panel .panel-foot { margin-top: auto; padding-top: 26px; display: flex; flex-wrap: wrap; gap: 12px; align-items: center; }
.panel.is-ink { background: var(--ink); color: #fff; border-color: var(--ink); }
.panel.is-ink > p, .panel.is-ink li { color: var(--muted-on-ink); }
.panel.is-ink ol li::marker { color: var(--cyan); }
.panel.is-ink code { background: var(--ink-2); color: #fff; }
@media (max-width: 860px) { .duo { grid-template-columns: 1fr; } }

/* ---------- Setup: platform switcher + guides ---------- */

.platforms {
  position: sticky;
  top: var(--nav-h);
  z-index: 10;
  padding-block: 12px;
  background: var(--paper);
  border-bottom: 1px solid var(--rule);
}
.platforms nav { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.platforms a {
  flex: none;
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  color: var(--ink);
  font-weight: 500;
  font-size: var(--fs-small);
  text-decoration: none;
}
.platforms a:hover { border-color: var(--ink); }
.platforms-label { flex: none; align-self: center; padding-right: 10px; color: var(--muted); font-family: var(--mono); font-size: var(--fs-label); letter-spacing: 0.1em; text-transform: uppercase; }
/* page.js marks the visitor's OS. */
.platforms a[data-you] { border-color: var(--blue); color: var(--blue); }
.platforms a[data-you]::before { content: ""; display: inline-block; width: 7px; height: 7px; margin-right: 8px; border-radius: 50%; background: var(--blue); vertical-align: 0.1em; }
/* Deep links land below the sticky site nav and the sticky switcher. */
.platforms ~ section [id], .platforms ~ section[id] { scroll-margin-top: 64px; }
/* Below 720px the chips wrap to two to four rows, too tall to pin over a
   phone screen: the switcher scrolls away with the page. */
@media (max-width: 720px) {
  .platforms { position: static; }
  .platforms ~ section [id], .platforms ~ section[id] { scroll-margin-top: 0; }
}

.guide {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.6fr);
  gap: 16px clamp(24px, 5vw, 64px);
  padding-block: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--rule);
}
.guide:first-of-type { border-top: 0; }
.guide-head h3 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -0.02em; }
.guide-head p { margin-top: 10px; color: var(--muted); font-size: var(--fs-small); }
.guide-body ol { margin: 0; padding: 0; list-style: none; counter-reset: g; display: grid; gap: 14px; }
.guide-body ol > li { counter-increment: g; position: relative; padding-left: 44px; }
.guide-body ol > li::before {
  content: counter(g);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--ink);
  color: #fff;
  display: grid;
  place-items: center;
  font: 700 0.875rem/1 var(--display);
}
.guide-body .aside { margin-top: 20px; padding: 16px 18px; background: var(--tint); border-radius: var(--radius-s); font-size: var(--fs-small); }
@media (max-width: 860px) { .guide { grid-template-columns: 1fr; } }

/* ---------- Tables ---------- */

.table-wrap { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); }
table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); min-width: 560px; }
th, td { text-align: left; padding: 16px 20px; border-bottom: 1px solid var(--rule); vertical-align: top; }
tbody tr:last-child th, tbody tr:last-child td { border-bottom: 0; }
thead th { font: 400 var(--fs-label)/1.2 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); background: var(--paper); }
tbody th { font-weight: 600; }
td .host { display: block; margin-top: 6px; }
/* 560px min-width scrolls the address column off a 360 to 412 px screen. */
@media (max-width: 520px) {
  #profiles .table-wrap { overflow-x: visible; }
  #profiles table { min-width: 0; width: 100%; table-layout: fixed; }
  #profiles th,
  #profiles td { overflow-wrap: anywhere; word-break: break-word; }
}
.yes { color: var(--blue); font-weight: 600; }
.no { color: var(--muted); }

/* ---------- PRO page: plans ---------- */

.plans { display: grid; grid-template-columns: 1.1fr 1fr; gap: 16px; align-items: stretch; }
.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: clamp(28px, 3.6vw, 44px);
}
.plan.is-best { background: var(--ink); color: #fff; border-color: var(--ink); }
.plan-flag {
  position: absolute;
  top: -12px;
  left: clamp(28px, 3.6vw, 44px);
  padding: 6px 12px;
  border-radius: 999px;
  background: var(--cyan);
  color: var(--ink);
  font: 400 var(--fs-label)/1 var(--mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.plan-price { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; }
.plan-price b { font: 700 clamp(3rem, 6vw, 4.5rem)/0.9 var(--display); letter-spacing: -0.04em; }
.plan-price s { color: var(--muted-on-ink); font-size: 1.0625rem; }
.plan-price span { color: var(--muted); }
.plan.is-best .plan-price span { color: var(--muted-on-ink); }
.plan-bill { margin-top: 10px; color: var(--muted); }
.plan.is-best .plan-bill { color: var(--muted-on-ink); }
.plan-actions { margin-top: auto; padding-top: 32px; display: grid; gap: 10px; }
.plan-actions .btn { width: 100%; white-space: normal; line-height: 1.3; padding-block: 12px; text-align: center; }
.plan-actions form { margin: 0; }
.plan.is-best .btn-primary { background: var(--cyan); color: var(--ink); }
.plan.is-best .btn-primary:hover { background: #fff; }
.plan.is-best .btn-ghost { color: #fff; border-color: var(--rule-on-ink); }
.plan.is-best .btn-ghost:hover { border-color: #fff; }
.plan.is-best :focus-visible { outline-color: var(--cyan); }
.plan-guarantees { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 28px; margin-top: 24px; font-size: var(--fs-small); color: var(--muted); }
.plan-guarantees span::before { content: "\2713  "; color: var(--blue); font-weight: 700; }
@media (max-width: 760px) { .plans { grid-template-columns: 1fr; } }

.includes { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 32px 40px; }
.include h3 { font-size: 1.125rem; }
.include p { margin-top: 8px; color: var(--muted); }

/* ---------- Help ---------- */

.help-search { position: relative; margin-top: 32px; max-width: 40rem; }
.help-search input {
  width: 100%;
  height: 60px;
  padding: 0 22px 0 54px;
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  background: var(--sheet);
  color: var(--ink);
  font: 400 1.0625rem var(--body);
  -webkit-appearance: none;
  appearance: none;
}
.help-search input:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 4px rgba(41, 98, 255, 0.15); }
.help-search::before {
  content: "";
  position: absolute;
  left: 22px;
  top: 50%;
  width: 18px;
  height: 18px;
  margin-top: -9px;
  border: 2px solid var(--muted);
  border-radius: 50%;
  box-sizing: border-box;
  -webkit-mask: linear-gradient(#000 0 0);
}
#help-count { margin-top: 12px; min-height: 1.5em; font-size: var(--fs-small); color: var(--muted); }

.help-jump { display: flex; flex-wrap: wrap; gap: 8px; }
.help-jump a {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid var(--rule);
  background: var(--sheet);
  color: var(--ink);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
}
.help-jump a:hover { border-color: var(--ink); }

.help-topic {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr);
  gap: 16px clamp(24px, 5vw, 64px);
  padding-block: clamp(36px, 5vw, 56px);
  border-top: 1px solid var(--rule);
}
.help-topic > h2 { grid-column: 1; font-size: clamp(1.375rem, 2.4vw, 1.75rem); }
.help-topic > .topic-sub { grid-column: 1; color: var(--muted); font-size: var(--fs-small); margin-top: -4px; }
.help-topic > .qa { grid-column: 2; }
.help-topic > h2, .help-topic > .topic-sub { align-self: start; }
.help-topic { grid-auto-flow: row dense; }
@media (min-width: 861px) {
  .help-topic > h2 { grid-row: 1; }
  .help-topic > .topic-sub { grid-row: 2; }
}
.qa { border-bottom: 1px solid var(--rule); }
.help-topic > .qa:first-of-type { border-top: 1px solid var(--rule); }
.qa > summary {
  list-style: none;
  cursor: pointer;
  position: relative;
  padding: 18px 44px 18px 0;
  font-weight: 600;
  font-size: 1.0625rem;
}
.qa > summary::-webkit-details-marker { display: none; }
.qa > summary::after {
  content: "";
  position: absolute;
  right: 6px;
  top: 50%;
  width: 10px;
  height: 10px;
  margin-top: -7px;
  border-right: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  transform: rotate(45deg);
  transition: transform 0.2s;
}
.qa[open] > summary::after { transform: rotate(-135deg); margin-top: -2px; }
.qa > summary:hover { color: var(--blue); }
.qa-body { padding: 0 0 24px; color: #283047; }
.qa-body p + p, .qa-body p + ul, .qa-body ul + p, .qa-body ol + p, .qa-body p + ol { margin-top: 0.9em; }
.qa-body ul + ul { margin-top: 0.9em; }
.qa-body ul, .qa-body ol { padding-left: 1.2em; margin: 0.6em 0 0; }
.qa-body li + li { margin-top: 0.35em; }
.qa-body .btn { margin-top: 4px; }
@media (max-width: 860px) {
  .help-topic { grid-template-columns: 1fr; }
  .help-topic > .qa { grid-column: 1; }
  .help-topic > .qa:first-of-type { margin-top: 12px; }
}
.help-empty { display: none; padding-block: 48px; }
.help-empty.show { display: block; }
.help-empty h2 { font-size: 1.5rem; margin-bottom: 8px; }

.stuck {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1.6fr);
  gap: 16px clamp(24px, 5vw, 64px);
}
.stuck ul { padding-left: 1.2em; }
@media (max-width: 860px) { .stuck { grid-template-columns: 1fr; } }

/* ---------- Footer ---------- */

.footer { background: var(--ink); color: #fff; padding-block: 72px 40px; }
.footer-grid {
  display: grid;
  grid-template-columns: 1.35fr repeat(4, 1fr);
  gap: 40px clamp(20px, 2.5vw, 32px);
}
.footer-brand p { margin-top: 18px; color: var(--muted-on-ink); font-size: var(--fs-small); max-width: 22em; }
.footer h2 {
  font: 400 var(--fs-label)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted-on-ink);
  margin-bottom: 18px;
}
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.footer li { line-height: 1.35; }
.footer a { color: #fff; text-decoration: none; font-size: var(--fs-small); }
.footer a:hover { color: var(--cyan); }
.footer-base {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 12px;
  margin-top: 64px;
  padding-top: 24px;
  border-top: 1px solid var(--rule-on-ink);
  color: var(--muted-on-ink);
  font-size: 0.8125rem;
}
/* Brand plus four link columns need the full 1160px wrap before links wrap.
   Narrower: brand on its own row, the four columns under it; phones: 2x2. */
@media (max-width: 1179px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } .footer-brand { grid-column: 1 / -1; } }
@media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* ---------- Motion ---------- */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  html { scroll-behavior: auto; }
  .pin-arrow { animation: none; }
}
.spaced { margin-top: clamp(48px, 7vw, 80px); }
.flush-top { padding-top: 0; }
.wrap.prose { max-width: var(--max); }
.wrap.prose > * { max-width: 42rem; }
.wrap.prose > .table-wrap { max-width: none; margin: 1.2em 0 1.6em; }

/* Screenshots: framed so they read as pictures of the UI, not the UI. */
.shot {
  display: block;
  border: 1px solid var(--rule);
  border-radius: var(--radius-s);
  background: var(--sheet);
  box-shadow: 0 12px 28px -18px rgba(10, 16, 36, 0.35);
}
.prose p > .shot { margin-block: 8px; }
.wrap.prose > .shots { max-width: none; }
.shots {
  display: grid;
  /* 348px is the screenshots' own width: three fit in the 1080px column. */
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 240px), 348px));
  gap: 24px 16px;
  margin: 1.4em 0;
}
.shots figure { margin: 0; }
.shots figcaption { margin-top: 12px; font-size: var(--fs-small); color: var(--muted); }
.shots .shot { width: 100%; }
.steps > li { align-content: start; }
.help-topic { grid-template-rows: auto 1fr; }
.help-topic > .qa-list { grid-column: 2; grid-row: 1 / span 2; }
.help-topic > .topic-sub { margin-top: 0; }
.qa-list > .qa:first-child { border-top: 1px solid var(--rule); }
@media (max-width: 860px) {
  .help-topic { grid-template-rows: none; }
  .help-topic > .qa-list { grid-column: 1; grid-row: auto; margin-top: 12px; }
}
.help-search::after {
  content: "";
  position: absolute;
  left: 36px;
  top: 50%;
  width: 7px;
  height: 2px;
  margin-top: 7px;
  background: var(--muted);
  border-radius: 2px;
  transform: rotate(45deg);
}

/* ---------- "To" field: open a site in the web proxy ----------
   Shared with webproxy.stealthy.co (vendored there as public/site.css). */
.to-form {
  display: flex;
  align-items: center;
  gap: 8px;
  max-width: 30rem;
  margin-top: 16px;
  padding: 5px 5px 5px 18px;
  background: var(--sheet);
  border: 1.5px solid var(--rule);
  border-radius: 999px;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.to-form:focus-within { border-color: var(--blue); box-shadow: 0 0 0 4px rgba(41, 98, 255, 0.15); }
.to-key {
  flex: none;
  font: 400 var(--fs-label)/1 var(--mono);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.to-form input {
  flex: 1;
  min-width: 0;
  height: 40px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font: 400 1rem var(--body);
}
.to-form input:focus { outline: none; }
.to-form input::placeholder { color: var(--hint); }

/* ---------- Extension pages: the live letter ----------
   ext.js sets main[data-ext-state] to none | off | on from the
   extension's own on-page signal. Only hide here; each element keeps
   its own display when shown. */
[data-ext-state="none"] :is(.when-off, .when-on, .when-installed),
[data-ext-state="off"] :is(.when-none, .when-on),
[data-ext-state="on"] :is(.when-none, .when-off, .when-not-on) { display: none; }
.state-now {
  margin-top: 26px;
  padding-top: 22px;
  border-top: 1px dashed var(--rule-on-ink);
}
.state-now .state-foot { margin-top: 0; }
.steps-after { margin-top: 24px; }

/* ---------- Welcome: point at the browser toolbar ----------
   The arrow lives in the top section (not fixed) so it scrolls away.
   It aims at the top-right, where the extensions button sits.
   Hidden when the icon is already showing, on Firefox, on Vivaldi,
   and once the nav collapses to a phone menu. Five 0.8s beats. */
.pin-welcome .nav-actions { display: none; }
.pin-top { position: relative; }
.pin-arrow {
  position: absolute;
  z-index: 2;
  top: 4px;
  right: 12px;
  display: none;
  flex-direction: row-reverse;
  align-items: flex-start;
  gap: 8px;
  margin: 0;
  color: var(--blue);
  pointer-events: none;
  animation: pin-nudge 0.8s ease-in-out 5;
}
.pin-arrow svg { width: 104px; height: 104px; display: block; }
.pin-arrow span {
  margin-top: 6px;
  padding: 3px 8px;
  border-radius: 8px;
  background: var(--paper);
  color: var(--ink);
  font: 600 0.9375rem/1.2 var(--display);
  white-space: nowrap;
}
@keyframes pin-nudge {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(7px, -6px); }
}
main[data-pin-view="ask"][data-pin-browser="chrome"] .pin-arrow,
main[data-pin-view="ask"][data-pin-browser="edge"] .pin-arrow,
main[data-pin-view="ask"][data-pin-browser="opera"] .pin-arrow,
main[data-pin-view="pin"][data-pin-browser="chrome"] .pin-arrow,
main[data-pin-view="pin"][data-pin-browser="edge"] .pin-arrow,
main[data-pin-view="pin"][data-pin-browser="opera"] .pin-arrow { display: flex; }
@media (max-width: 860px) {
  .pin-arrow { display: none !important; }
}
/* The pin cards sit under the headline, in the first screen.
   Drawings are 70% of the card so the row stays short. On a phone
   they go full width so the labels stay at least 12px. The arrow
   sits in the empty corner of this section and scrolls with it. */
.hero.pin-hero { padding-block: 16px 20px; }
.pin-top.hero { overflow: visible; }
@media (min-width: 861px) {
  .hero.pin-hero { padding-top: 16px; padding-bottom: 16px; }
  main[data-pin-view="ask"] .pin-top h2,
  main[data-pin-view="pin"] .pin-top h2 { max-width: min(16em, calc(100% - 280px)); }
}
.hero.pin-hero .label { margin-bottom: 8px; }
.hero.pin-hero :is(h1, h2) {
  max-width: 16em;
  font-size: clamp(1.85rem, 3.1vw, 2.5rem);
  line-height: 1.08;
  letter-spacing: -0.03em;
}
.hero.pin-hero .lead { margin-top: 8px; max-width: 36em; }
.pin-hero .pin-steps { margin-top: 16px; }
.pin-steps > li { padding: 12px 14px 14px; gap: 8px; }
.pin-steps > li::before {
  width: 28px;
  height: 28px;
  font-size: 0.875rem;
}
.pin-steps h3 { padding-top: 0; font-size: 1rem; line-height: 1.3; }
.pin-steps p { margin-top: 4px; font-size: 0.875rem; line-height: 1.4; }
.pin-steps .pin-draw { display: none; width: 70%; height: auto; margin-bottom: 8px; }
.pin-steps-click .pin-draw { width: min(100%, 440px); }
.pin-glyph { fill: #8e97ab; }
main[data-pin-on="1"] .pin-glyph { fill: var(--blue); }
.pin-see-on,
.pin-see-vivaldi,
.pin-off-just { display: none; }
.pin-fallback { margin-top: 8px; }
.hero.pin-hero .pin-fallback-head {
  max-width: 18em;
  margin-top: 18px;
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
}
/* Welcome pin view: this heading is the only title, so the h1 shows and the h2 hides.
   Updated pages keep the h2, because the offer h1 is the title there. */
h1.pin-fallback-head { display: none; }
main:not(.ext-updated)[data-pin-view="pin"] h2.pin-fallback-head { display: none; }
main:not(.ext-updated)[data-pin-view="pin"] h1.pin-fallback-head { display: block; }
/* Welcome page view: the controls line is the only title. Same size as the h2. */
#controls h1.pin-page-title { display: none; font-size: var(--fs-h2); }
main:not(.ext-updated)[data-pin-view="page"] #controls h2.pin-page-title { display: none; }
main:not(.ext-updated)[data-pin-view="page"] #controls h1.pin-page-title { display: block; }
main[data-pin-browser="firefox"]:not([data-pin-view]) .pin-see-short,
main[data-pin-browser="firefox"]:not([data-pin-view]) .pin-fallback { display: none; }
main[data-pin-browser="firefox"]:not([data-pin-view]) .pin-see-on { display: block; }
main[data-pin-view="ask"] .pin-top,
main[data-pin-view="click"] .pin-top,
main[data-pin-view="just"] .pin-top,
main[data-pin-view="pin"] .pin-top,
main[data-pin-view="vivaldi"] .pin-top { display: block !important; }
main[data-pin-view="click"] .pin-see-short,
main[data-pin-view="click"] .pin-see-vivaldi,
main[data-pin-view="click"] .pin-off-just,
main[data-pin-view="click"] .pin-fallback { display: none !important; }
main[data-pin-view="click"] .pin-see-on { display: block; }
main[data-pin-view="just"] .pin-see-short,
main[data-pin-view="just"] .pin-see-on,
main[data-pin-view="just"] .pin-see-vivaldi,
main[data-pin-view="just"] .pin-fallback { display: none !important; }
main[data-pin-view="just"] .pin-off-just,
main[data-pin-view="just"] .pin-see { display: block; }
main[data-pin-view="pin"] .pin-see { display: none !important; }
main[data-pin-view="pin"] .pin-fallback { display: block !important; }
main[data-pin-view="vivaldi"] .pin-see-short,
main[data-pin-view="vivaldi"] .pin-see-on,
main[data-pin-view="vivaldi"] .pin-off-just,
main[data-pin-view="vivaldi"] .pin-fallback { display: none !important; }
main[data-pin-view="vivaldi"] .pin-see-vivaldi,
main[data-pin-view="vivaldi"] .pin-see { display: block; }
main[data-pin-view="on"] .pin-top,
main[data-pin-view="page"] .pin-top,
main[data-pin-view="on"] .pin-pro-rest { display: none !important; }
.pin-steps.pin-steps-two { grid-template-columns: repeat(2, 1fr); }
.pin-steps[data-pin-browser="chrome"] .pin-draw[data-for~="chrome"],
.pin-steps[data-pin-browser="edge"] .pin-draw[data-for~="edge"],
.pin-steps[data-pin-browser="opera"] .pin-draw[data-for~="opera"],
.pin-steps[data-pin-browser="vivaldi"] .pin-draw[data-for~="vivaldi"],
.pin-steps[data-pin-browser="firefox"] .pin-draw[data-for~="firefox"],
.pin-steps[data-pin-browser="brave"] .pin-draw[data-for~="brave"] { display: block; }
/* Real browser screenshots in the two pin steps: light UI on a card, also in dark mode. */
.pin-steps .pin-shot {
  width: min(100%, 340px);
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: #fff;
}
.pin-pulse {
  transform-box: fill-box;
  transform-origin: center;
  animation: pin-pulse 1.6s ease-out infinite;
}
@keyframes pin-pulse {
  0% { transform: scale(1); opacity: 0.95; }
  70% { transform: scale(1.18); opacity: 0; }
  100% { transform: scale(1.18); opacity: 0; }
}
.steps-row.steps-pair { grid-template-columns: repeat(2, 1fr); }
.pin-pro {
  margin-top: 16px;
  max-width: 42rem;
  padding: 16px 18px;
  background: var(--sheet);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
}
/* .pin-pro is not a grid item. The 42rem cap is what left a lone card half wide. */
@media (min-width: 861px) {
  .pin-pro { max-width: none; }
}
.pin-pro h2 {
  font-size: clamp(1.35rem, 2.2vw, 1.7rem);
  max-width: 16em;
  letter-spacing: -0.02em;
}
.pin-pro h3 { font-size: 1.0625rem; }
.pin-pro p { margin-top: 6px; color: var(--muted); font-size: var(--fs-small); max-width: 46rem; }
.pin-pro .btn { margin: 12px 8px 0 0; }
.pin-pro .arrow-link { display: inline-block; margin-top: 10px; }
@media (max-width: 860px) {
  .steps-row.steps-pair { grid-template-columns: 1fr; }
  .pin-steps.steps-row > li { grid-template-columns: 32px 1fr; }
  .pin-steps.pin-steps-two { grid-template-columns: 1fr; }
  .pin-steps .pin-draw,
  .pin-steps-click .pin-draw { width: 100%; }
  .pin-hero .pin-intro { max-width: none; }
  main[data-pin-view="ask"] .pin-top h2,
  main[data-pin-view="pin"] .pin-top h2 { max-width: none; }
}

/* /bye/ — one reason, then the thank-you. display, not [hidden]: the UA
   rule for [hidden] would beat :target. */
.bye-reasons {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  margin-top: 28px;
}
.bye-reasons .btn {
  white-space: normal;
  text-align: left;
  justify-content: flex-start;
  height: auto;
  min-height: 48px;
  padding-top: 12px;
  padding-bottom: 12px;
}
.bye-again { margin-top: 16px; }
.bye-done { display: none; margin-top: 28px; max-width: 36rem; }
.bye-done:target,
.bye-done.show { display: block; }
.bye-links {
  margin: 12px 0 0;
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
}
.bye-links li + li { margin-top: 10px; }
body:has(.bye-done:target) :is(.bye-reasons, .bye-again),
body:has(.bye-done.show) :is(.bye-reasons, .bye-again) { display: none; }

/* Guide comparison table: the swipe hint is only for viewports under 700px. */
.compare-hint {
  display: none;
  margin: 0 0 8px;
  font-size: var(--fs-small);
  color: var(--muted);
}
@media (max-width: 699px) {
  .compare-hint { display: block; }
}

/* The web proxy bar shot is wide, so it uses the content column, not the 42rem measure. */
.wrap.prose > .shot-wide {
  max-width: none;
  margin: 1.2em 0;
}
.shot-wide .shot { width: 100%; }

/* 6.4 update pages: the offer sits above the fold under a one-line pin
   reminder. Unpinned (or unknown): one line on top, and the two pin steps
   right under the offer. */
.ext-updated[data-pin-view="click"] .pin-top .pin-steps-click,
.ext-updated[data-pin-view="just"] .pin-top .pin-steps-click,
.ext-updated[data-pin-view="vivaldi"] .pin-top .pin-steps-click,
.ext-updated[data-pin-view="ask"] .pin-top .pin-steps-click,
.ext-updated[data-pin-view="ask"] .pin-top .pin-see-short { display: none; }
.ext-updated .pin-strip,
.ext-updated .pin-below { display: none; }
.ext-updated[data-pin-view="pin"] .pin-strip,
.ext-updated[data-pin-view="ask"] .pin-strip,
.ext-updated[data-pin-view="pin"] .pin-below,
.ext-updated[data-pin-view="ask"] .pin-below { display: block; }
.ext-updated .pin-top .pin-strip { margin-top: 0; }
.ext-updated .pin-below { padding-block: 8px 40px; }
/* Fit the offer on a 1366x768 laptop's first screen (about 650px of page
   under the browser's own bars): one-line pin banner, tighter hero. */
.ext-updated .hero.pin-top,
.ext-updated .hero.pin-status { padding-block: 12px 4px; }
.ext-updated .pin-top :is(h1, h2),
.ext-updated .pin-status :is(h1, h2) { font-size: clamp(1.25rem, 1.9vw, 1.65rem); }
.ext-updated .ext-hero { padding-block: 12px 56px; }
/* The card sits at the top of its column: it grows down when the visitor's
   city fills in and wraps, instead of moving up, and it all fits the first screen. */
.ext-updated .hero-grid > .radar { align-self: start; }
/* Below 1300 px the "Your extensions are up here" arrow reaches over the
   card's corner, so the card starts under it. Not tied to the pin view, so
   pinning never moves the card. */
@media (min-width: 961px) and (max-width: 1299px) {
  .ext-updated .hero-grid > .radar { margin-top: 64px; }
}
.ext-updated .ext-hero .label { margin-bottom: 10px; }
.ext-updated .ext-hero [data-from-legacy] { margin-bottom: 12px; }
.ext-updated .ext-hero h1 { font-size: clamp(32px, 3.1vw, 42px); line-height: 1.04; }
/* Click, just, vivaldi, and on: the banner is the title. The offer line stays
   in the page as an h2 with the same type, and the h1 is hidden. */
.ext-hero-title { display: none; }
.ext-updated[data-pin-view="click"] .ext-hero h1,
.ext-updated[data-pin-view="just"] .ext-hero h1,
.ext-updated[data-pin-view="vivaldi"] .ext-hero h1,
.ext-updated[data-pin-view="on"] .ext-hero h1 { display: none; }
.ext-updated[data-pin-view="click"] .ext-hero-title,
.ext-updated[data-pin-view="just"] .ext-hero-title,
.ext-updated[data-pin-view="vivaldi"] .ext-hero-title,
.ext-updated[data-pin-view="on"] .ext-hero-title {
  display: block;
  font-size: clamp(32px, 3.1vw, 42px);
  line-height: 1.04;
  letter-spacing: -0.035em;
}
.ext-updated .ext-hero .lead { margin-top: 12px; font-size: 1.125rem; line-height: 1.5; }
.ext-updated .ext-hero .hero-actions { margin-top: 16px; }
.ext-updated .ext-hero .hero-actions + .fine { margin-top: 8px; font-size: 15px; line-height: 1.5; }
html[data-payer="member"] .ext-updated [data-pro-trial],
html[data-payer="member"] [data-pro-upsell] { display: none !important; }
html[data-payer="member"] .ext-updated span[data-pro-member] { display: inline !important; }
html[data-payer="member"] .ext-updated div[data-pro-member],
html[data-payer="member"] .ext-updated p[data-pro-member],
html[data-payer="member"] .ext-updated section[data-pro-member],
html[data-legacy="1"] .ext-updated p[data-from-legacy] { display: block !important; }
main[data-pin-view="on"] .pin-adapt-on { display: block !important; }
html[data-ext-opened="1"] a[href^="https://chromewebstore.google.com/"],
html[data-ext-opened="1"] a[href^="https://microsoftedge.microsoft.com/"],
html[data-ext-opened="1"] a[href^="https://addons.mozilla.org/"],
html[data-ext-opened="1"] a[href^="https://addons.opera.com/"] { display: none !important; }
.state-pending { display: none; }
main[data-ext-pending] .state-place [data-ext-place] { display: none; }
main[data-ext-pending] .state-place .state-pending { display: inline; }