/* IP2World design system — rebuilt from the original CSS tokens, no frameworks.
   Original stack was layui + element-ui + swiper (~800KB CSS + 590KB JS).
   Tokens below are extracted verbatim from the archived static/index/css/*. */

:root {
  --blue: #3c7fff;
  --blue-600: #1d61fd;
  --blue-700: #0d4ccc;
  --blue-ink: #0b2961;
  --blue-ink-2: #002865;
  --tint: #e9f0fe;
  --tint-2: #eff5ff;

  /* Primary action + premium accent. The store now leads with a deep navy for
     every button and active state (was a bright generic blue that read cheap),
     and a single restrained gold for "best value" / bonus highlights. */
  --navy: #12326b;
  --navy-600: #1a4488;
  --navy-700: #0c2450;
  --gold: #c1912f;
  --gold-600: #a97c21;
  --gold-soft: #f7efd6;
  --gold-ink: #6b4e12;

  --green: #61c303;
  --green-tint: #f4fcee;
  --amber: #ffb331;

  --ink: #333333;
  --ink-strong: #242633;
  --ink-2: #1e2539;
  --muted: #808080;
  --muted-2: #999999;
  --line: #c8cbd4;
  --bg-soft: #f0f2f5;
  --white: #fff;

  --r-sm: 4px;
  --r: 8px;
  --r-lg: 10px;
  --r-xl: 16px;

  --shadow: 0 4px 20px rgba(11, 41, 97, .08);
  --shadow-lg: 0 12px 40px rgba(11, 41, 97, .12);

  --wrap: 1200px;
  --header-h: 72px;
}

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

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Lato, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 16px;
  line-height: 1.6;
  color: var(--ink);
  background: var(--white);
}

img { max-width: 100%; height: auto; border: 0; display: block; }
a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--blue-700); }

h1, h2, h3, h4 { margin: 0 0 16px; color: var(--ink-strong); line-height: 1.25; font-weight: 700; }
h1 { font-size: clamp(30px, 4.4vw, 50px); font-weight: 900; letter-spacing: -.5px; }
h2 { font-size: clamp(25px, 3.1vw, 38px); }
h3 { font-size: clamp(18px, 1.7vw, 22px); }
p { margin: 0 0 16px; }

.wrap { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 20px; }
.section { padding: 72px 0; }
.section--soft { background: var(--bg-soft); }
.section--tint { background: linear-gradient(180deg, var(--tint-2), var(--white)); }
.center { text-align: center; }
.lead { font-size: 18px; color: var(--muted); max-width: 720px; }
.center .lead { margin-left: auto; margin-right: auto; }
.section > .wrap > h2 { margin-bottom: 8px; }
.section-sub { color: var(--muted); font-size: 17px; margin-bottom: 40px; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 48px; padding: 0 28px; border: 0; border-radius: var(--r);
  font: inherit; font-weight: 700; cursor: pointer; white-space: nowrap;
  transition: background .15s, box-shadow .15s, transform .15s, color .15s;
}
.btn--primary { background: linear-gradient(180deg, #1a4488, #12326b); color: #fff; box-shadow: 0 10px 24px rgba(18, 50, 107, .32), inset 0 1px 0 rgba(255, 255, 255, .16); }
.btn--primary:hover { background: linear-gradient(180deg, #21529b, #163d7d); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(18, 50, 107, .4), inset 0 1px 0 rgba(255, 255, 255, .2); }
.btn--ghost { background: transparent; color: var(--navy); box-shadow: inset 0 0 0 2px var(--navy); }
.btn--ghost:hover { background: var(--navy); color: #fff; }
.btn--light { background: rgba(255, 255, 255, .16); color: #fff; box-shadow: inset 0 0 0 2px rgba(255, 255, 255, .6); }
.btn--light:hover { background: #fff; color: var(--navy); }
/* Gold call-to-action for the one button that should feel like the premium pick. */
.btn--gold { background: linear-gradient(180deg, #d5a842, #c1912f); color: #fff; box-shadow: 0 10px 24px rgba(193, 145, 47, .36), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn--gold:hover { background: linear-gradient(180deg, #c1912f, #a97c21); color: #fff; transform: translateY(-1px); box-shadow: 0 14px 30px rgba(193, 145, 47, .44), inset 0 1px 0 rgba(255, 255, 255, .3); }
.btn--sm { height: 40px; padding: 0 18px; font-size: 15px; }
/* Sized to sit inside a table row without stretching it. */
.btn--xs { height: 32px; padding: 0 14px; font-size: 13px; border-radius: 6px; }
.btn--block { width: 100%; }

/* ---------- promo bar ---------- */
.promo {
  background: linear-gradient(90deg, var(--navy-700), var(--navy));
  color: #fff; font-size: 15px; font-weight: 600; text-align: center;
  box-shadow: inset 0 -2px 0 rgba(193, 145, 47, .55);
}
.promo a { color: #fff; display: block; padding: 10px 20px; }
.promo b { color: var(--amber); }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 90; background: #fff; box-shadow: 0 1px 0 rgba(11, 41, 97, .08); }
.hdr__in { display: flex; align-items: center; gap: 28px; height: var(--header-h); }
.hdr__logo { display: flex; align-items: center; flex: 0 0 auto; }
.hdr__logo img { height: 34px; width: auto; }
.nav { display: flex; align-items: center; gap: 24px; margin-left: 4px; }
.nav > li { position: relative; list-style: none; }
.nav__link {
  display: flex; align-items: center; gap: 5px; height: var(--header-h);
  color: var(--ink-strong); font-weight: 600; font-size: 15px;
}
.nav__link:hover { color: var(--blue); }
.nav__link::after { content: ""; }
.has-sub > .nav__link::after {
  content: ""; width: 6px; height: 6px; margin-top: -3px;
  border-right: 2px solid currentColor; border-bottom: 2px solid currentColor;
  transform: rotate(45deg); transition: transform .15s;
}
.has-sub:hover > .nav__link::after,
.has-sub.is-open > .nav__link::after { transform: rotate(-135deg); margin-top: 2px; }
.sub {
  position: absolute; top: 100%; left: -18px; min-width: 268px; margin: 0; padding: 10px;
  background: #fff; border-radius: var(--r-lg); box-shadow: var(--shadow-lg);
  opacity: 0; visibility: hidden; transform: translateY(6px); transition: .16s;
}
.has-sub:hover .sub,
.has-sub.is-open .sub { opacity: 1; visibility: visible; transform: translateY(0); }
.sub li { list-style: none; }
.sub a { display: block; padding: 9px 12px; border-radius: var(--r-sm); color: var(--ink); font-size: 15px; }
.sub a:hover { background: var(--tint); color: var(--blue-700); }
.sub small { display: block; color: var(--muted-2); font-size: 12.5px; font-weight: 400; }
.hdr__end { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.hdr__login { font-weight: 700; color: var(--ink-strong); }
.hdr__login:hover { color: var(--blue); }
/* Deliberately quiet: someone reading the site in their own language does not
   need to be offered it again, and the switch must not compete with Buy. */
.hdr__lang {
  font-weight: 700; font-size: 13px; letter-spacing: .02em;
  color: var(--ink-soft, #5a6b8c); padding: 5px 9px; border-radius: 6px;
  border: 1px solid rgba(11, 41, 97, .16);
}
.hdr__lang:hover { color: var(--blue); border-color: var(--blue); }
/* Only wanted inside the small-screen menu; the header shows .hdr__login. */
.nav__account { display: none; list-style: none; }
.burger { display: none; width: 44px; height: 44px; border: 0; background: none; cursor: pointer; }
.burger span { display: block; height: 2px; margin: 5px auto; width: 22px; background: var(--ink-strong); }

/* ---------- hero ---------- */
.hero {
  background:
    radial-gradient(1100px 480px at 82% -12%, rgba(193, 145, 47, .22), transparent 60%),
    radial-gradient(820px 560px at 4% 118%, rgba(0, 156, 224, .20), transparent 55%),
    linear-gradient(140deg, #071b39 0%, #12326b 50%, #1c4a94 100%);
  color: #fff; padding: 78px 0 0; position: relative; overflow: hidden;
}
.hero::after {
  content: ""; position: absolute; inset: auto -10% -40% 40%; height: 420px;
  background: radial-gradient(closest-side, rgba(255, 255, 255, .14), transparent);
}
/* A single restrained gold hairline closing the hero band — the finish that
   reads "considered" rather than "template". */
.hero::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; z-index: 3;
  background: linear-gradient(90deg, transparent, rgba(193, 145, 47, .85), transparent);
}
.hero__grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 40px; align-items: center; }
.hero h1 { color: #fff; margin-bottom: 18px; }
.hero p { font-size: 18px; color: rgba(255, 255, 255, .88); max-width: 560px; }
.hero__cta { display: flex; flex-wrap: wrap; gap: 14px; margin: 28px 0 8px; }
.hero__art { position: relative; z-index: 1; }

/* Product mock in the hero — a floating glass "Proxy Manager" window with live
   endpoints, instead of a stock isometric illustration. Coded, so it stays crisp
   and on-brand (navy shell, gold accents) at any size. */
.hmock {
  position: relative; width: 100%; max-width: 520px; margin: 0 0 0 auto;
  background: linear-gradient(180deg, #ffffff, #eef3fb);
  border: 1px solid rgba(255, 255, 255, .6); border-radius: 18px; overflow: hidden;
  box-shadow: 0 34px 80px rgba(4, 14, 35, .5);
}
.hmock::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; z-index: 2;
  background: linear-gradient(90deg, var(--gold), rgba(193, 145, 47, 0) 65%);
}
.hmock__bar { display: flex; align-items: center; gap: 7px; padding: 12px 16px; background: linear-gradient(180deg, #12326b, #0c2450); }
.hmock__dot { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, .32); }
.hmock__dot:nth-child(1) { background: #ff5f57; }
.hmock__dot:nth-child(2) { background: #febc2e; }
.hmock__dot:nth-child(3) { background: #28c840; }
.hmock__title { margin-left: 8px; font-size: 13px; font-weight: 700; color: rgba(255, 255, 255, .92); }
.hmock__live { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 800; color: #8ff0b0; }
.hmock__live i { width: 8px; height: 8px; border-radius: 50%; background: #37d67a; box-shadow: 0 0 0 4px rgba(55, 214, 122, .22); }
.hmock__chips { display: flex; gap: 10px; padding: 16px 16px 8px; }
.hmock__chip { flex: 1; background: #fff; border: 1px solid #e7ecf6; border-radius: 12px; padding: 11px 12px; text-align: left; }
.hmock__chip b { display: block; font-size: 19px; font-weight: 900; color: var(--navy); letter-spacing: -.4px; line-height: 1.1; }
.hmock__chip span { font-size: 11px; font-weight: 700; color: var(--muted-2); }
.hmock__list { padding: 6px 12px 16px; display: grid; gap: 8px; }
.hmock__row {
  display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 11px;
  padding: 10px 12px; border-radius: 11px; background: #fff; border: 1px solid #eef1f8;
}
.hmock__row--hot { background: var(--gold-soft); border-color: #ecdca6; }
.hmock__cc { font-size: 11px; font-weight: 900; letter-spacing: .03em; color: var(--navy); background: var(--tint); border-radius: 6px; padding: 4px 7px; }
.hmock__cc--hot { color: var(--gold-ink); background: #f0e2b6; }
.hmock__addr { display: flex; flex-direction: column; min-width: 0; }
.hmock__ip { font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 13px; font-weight: 700; color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hmock__city { font-size: 12px; color: var(--muted); }
.hmock__ping { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 800; color: #1c8a4a; white-space: nowrap; }
.hmock__ping i { width: 7px; height: 7px; border-radius: 50%; background: #37d67a; }
@media (max-width: 900px) { .hmock { margin: 0 auto; } }
.hero__note { font-size: 14px; color: rgba(255, 255, 255, .72); }
/* The /proxies catalogue page reuses the hero band but has no stats strip under
   it, so it needs its own bottom padding and reads better centred. */
.hero--slim { padding: 72px 0 64px; text-align: center; }
.hero--slim p { margin-left: auto; margin-right: auto; }
.hero--slim .hero__cta { justify-content: center; }

.stats { position: relative; z-index: 2; margin-top: 56px; background: rgba(255, 255, 255, .08); border-top: 1px solid rgba(255, 255, 255, .16); box-shadow: inset 0 1px 0 rgba(193, 145, 47, .35); }
.stats__grid { display: grid; grid-template-columns: repeat(4, 1fr); }
.stats__i { padding: 22px 16px; text-align: center; border-left: 1px solid rgba(255, 255, 255, .14); }
.stats__i:first-child { border-left: 0; }
.stats__n { font-size: 26px; font-weight: 900; color: #fff; line-height: 1.2; }
.stats__t { font-size: 14px; color: rgba(255, 255, 255, .8); }

/* ---------- cards ---------- */
.grid { display: grid; gap: 24px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--4 { grid-template-columns: repeat(4, 1fr); }
.grid--6 { grid-template-columns: repeat(6, 1fr); }

.card {
  background: #fff; border: 1px solid #e6eaf2; border-radius: var(--r-xl);
  padding: 26px; transition: box-shadow .18s, transform .18s, border-color .18s;
}
.card:hover { box-shadow: var(--shadow-lg); transform: translateY(-3px); border-color: #d7e2fb; }
.card__ico { width: 46px; height: 46px; margin-bottom: 14px; }
.card h3 { margin-bottom: 8px; }
.card p { color: var(--muted); font-size: 15px; margin-bottom: 0; }

/* product card */
.prod { display: flex; flex-direction: column; }
.prod__from { margin: 16px 0 18px; font-size: 15px; color: var(--muted); }
.prod__from b { font-size: 26px; color: var(--blue-ink); font-weight: 900; }
.prod .btn { margin-top: auto; }
.prod__tag {
  display: inline-block; margin-bottom: 10px; padding: 3px 10px; border-radius: 999px;
  background: var(--green-tint); color: #3f8b00; font-size: 12.5px; font-weight: 700;
}
.prod__tag--hot { background: #fff4e3; color: #b7700a; }
.prod__tag--soon { background: #eef1f7; color: var(--muted); }

/* Products we do not sell yet: present, honest, but visually secondary. */
.prod--soon { background: #fbfcfe; }
.prod--soon h3 { color: var(--ink); }
.prod--soon .card__ico { opacity: .5; filter: grayscale(1); }
.prod--soon .btn { margin-top: 18px; }

/* ---------- feature rows ---------- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.split--rev .split__media { order: 2; }
.ticks { margin: 0; padding: 0; list-style: none; }
.ticks li { position: relative; padding: 7px 0 7px 30px; color: var(--ink); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 18px;
  border-radius: 50%; background: var(--green-tint);
  box-shadow: inset 0 0 0 2px var(--green);
}
.ticks li::after {
  content: ""; position: absolute; left: 6px; top: 19px; width: 5px; height: 9px;
  border-right: 2px solid var(--green); border-bottom: 2px solid var(--green);
  transform: rotate(45deg);
}

/* ---------- trust / payments ---------- */
.pays { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: center; }
.pays img { height: 26px; width: auto; opacity: .85; }
.pays__soon { opacity: .35 !important; filter: grayscale(1); }
.pays__badge {
  padding: 2px 9px; border-radius: 999px; background: var(--amber); color: #3d2600;
  font-size: 11px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase;
}

/* ---------- faq ---------- */
.faq { max-width: 860px; margin: 0 auto; }
.faq details {
  border: 1px solid #e6eaf2; border-radius: var(--r-lg); padding: 0 20px; margin-bottom: 12px;
  background: #fff;
}
.faq details[open] { border-color: #cddcff; box-shadow: var(--shadow); }
.faq summary {
  cursor: pointer; list-style: none; padding: 18px 30px 18px 0; position: relative;
  font-weight: 700; color: var(--ink-strong);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after {
  content: ""; position: absolute; right: 4px; top: 24px; width: 9px; height: 9px;
  border-right: 2px solid var(--blue); border-bottom: 2px solid var(--blue);
  transform: rotate(45deg); transition: transform .15s;
}
.faq details[open] summary::after { transform: rotate(-135deg); top: 28px; }
.faq p { padding-bottom: 18px; color: var(--muted); margin: 0; }

/* ---------- footer ---------- */
.ftr { background: var(--ink-2); color: #b9c0d0; padding: 56px 0 0; font-size: 15px; }
.ftr a { color: #b9c0d0; }
.ftr a:hover { color: #fff; }
.ftr__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr 1fr; gap: 32px; }
.ftr h4 { color: #fff; font-size: 15px; letter-spacing: .04em; text-transform: uppercase; margin-bottom: 16px; }
.ftr ul { margin: 0; padding: 0; list-style: none; }
.ftr li { margin-bottom: 10px; }
.ftr__logo { height: 32px; margin-bottom: 16px; }

/* Any rule setting display beats the hidden attribute, which silently reveals
   rows meant to be conditional. Settle it once for the whole site. */
[hidden] { display: none !important; }

/* ---------- launch offer panel ---------- */
.offer { position: fixed; inset: 0; z-index: 200; display: grid; place-items: center; padding: 20px; }
.offer__back { position: absolute; inset: 0; background: rgba(9, 22, 48, .58); }
.offer__card {
  position: relative; width: 100%; max-width: 460px; background: #fff;
  border-radius: var(--r-xl); padding: 34px 34px 26px;
  box-shadow: 0 26px 70px rgba(9, 22, 48, .3);
  animation: offer-in .22s ease-out;
}
@keyframes offer-in { from { opacity: 0; transform: translateY(14px); } }
@media (prefers-reduced-motion: reduce) { .offer__card { animation: none; } }

.offer__x {
  position: absolute; top: 10px; right: 12px; width: 34px; height: 34px;
  border: 0; background: none; cursor: pointer;
  font-size: 26px; line-height: 1; color: var(--muted-2);
}
.offer__x:hover { color: var(--ink-strong); }

.offer__tag {
  display: inline-block; margin-bottom: 12px; padding: 4px 12px;
  border-radius: 999px; background: var(--tint-2); color: var(--blue-ink);
  font-size: 12px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase;
}
.offer__title { font-size: 27px; line-height: 1.25; margin: 0 0 10px; }
.offer__title b { color: #157a37; }
.offer__sub { font-size: 15.5px; line-height: 1.55; color: var(--muted); margin: 0 0 18px; }

.offer__list { list-style: none; margin: 0 0 22px; padding: 0; }
.offer__list li {
  position: relative; padding-left: 26px; margin-bottom: 10px;
  font-size: 14.5px; line-height: 1.5; color: var(--ink);
}
.offer__list li::before {
  content: "\2713"; position: absolute; left: 0; top: 0;
  color: #157a37; font-weight: 900;
}
.offer__list b { font-weight: 800; color: var(--ink-strong); }

.offer__acts { display: grid; gap: 10px; justify-items: center; }
.offer__alt { font-size: 14px; color: var(--muted); }
.offer__fine {
  margin: 16px 0 0; font-size: 12.5px; line-height: 1.5;
  color: var(--muted-2); text-align: center;
}

/* Stop the page behind from scrolling under the panel. */
body.has-offer { overflow: hidden; }

@media (max-width: 520px) {
  .offer__card { padding: 28px 22px 20px; }
  .offer__title { font-size: 23px; }
}
/* The channel is where outage notices and promos go out, so it gets a visible
   line of its own rather than another entry in a link list. */
.ftr__tg a { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: #7fb2ff; }
.ftr__tg a:hover { color: #fff; }
.ftr__tg svg { flex: none; }
/* The row of partner brands the old site carried on every page. Quieter than
   the navigation above it, so it reads as a credit line rather than a menu. */
.ftr__partners {
  margin-top: 38px; padding-top: 20px; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 14px; font-size: 13px;
}
.ftr__partners span { color: rgba(255, 255, 255, .45); letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; }
.ftr__partners a { color: rgba(255, 255, 255, .58); }
.ftr__partners a:hover { color: #fff; }

/* Forty-two names need to wrap as one run of text, not as forty-two flex items
   spaced by the parent's gap, so the list is its own box. The separator is a
   generated slash, as the original had it, which keeps it out of the copied
   text and out of the accessibility tree. */
.ftr__partners-list { flex: 1 1 320px; font-size: 11.5px; line-height: 2; }
.ftr__partners-list a { letter-spacing: .03em; white-space: nowrap; }
.ftr__partners-list a:not(:last-child)::after {
  content: "/"; margin: 0 5px 0 7px; color: rgba(255, 255, 255, .22);
}

.ftr__bottom {
  margin-top: 24px; padding: 20px 0; border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 12px; justify-content: space-between; font-size: 13.5px;
}

/* ---------- partners page ---------- */
.partner { display: block; color: inherit; text-decoration: none; transition: border-color .15s, transform .15s; }
.partner:hover { border-color: var(--brand); transform: translateY(-2px); }
.partner h3 { margin: 0 0 8px; }
.partner p { margin: 0 0 14px; color: var(--muted); }
.partner__go { font-weight: 700; font-size: 14px; color: var(--brand); }

/* ---------- legal documents ---------- */
.legal { padding: 44px 0 72px; }
.legal__wrap { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 48px; align-items: start; }

.legal__side { position: sticky; top: 96px; }
.legal__side h4 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.legal__side ul { list-style: none; margin: 0; padding: 0; }
.legal__side a {
  display: block; padding: 8px 12px; margin-left: -12px; border-radius: var(--r-sm);
  color: var(--ink); font-size: 15px;
}
.legal__side a:hover { background: #f2f5fa; }
.legal__side .is-here a { background: #f2f5fa; color: var(--blue-ink); font-weight: 700; }
.legal__ask { margin-top: 24px; font-size: 14px; color: var(--muted); line-height: 1.6; }

.legal__body { max-width: 760px; }
.legal__body h1 { font-size: 38px; font-weight: 900; color: var(--blue-ink); }
.legal__body h2 {
  margin: 40px 0 14px; padding-top: 26px; border-top: 1px solid #e8ebf1; font-size: 22px;
}
.legal__body p, .legal__body li { color: var(--ink); font-size: 16px; line-height: 1.75; }
.legal__body p { margin: 0 0 16px; }
.legal__body ul { margin: 0 0 20px; padding-left: 22px; }
.legal__body li { margin-bottom: 10px; }
.legal__body b { color: var(--ink-strong); }

.legal__meta { color: var(--muted); font-size: 14.5px; }
.legal__meta--end {
  margin-top: 40px; padding: 18px 20px; border-radius: var(--r-sm);
  background: #f6f8fc; border: 1px solid #e8ebf1;
}

@media (max-width: 900px) {
  .legal__wrap { grid-template-columns: 1fr; gap: 28px; }
  .legal__side { position: static; }
  .legal__side ul { display: flex; flex-wrap: wrap; gap: 4px; }
  .legal__side a { margin-left: 0; }
  .legal__body h1 { font-size: 30px; }
}

/* ---------- responsive ---------- */
@media (max-width: 1024px) {
  .grid--4, .grid--6 { grid-template-columns: repeat(2, 1fr); }
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .split { grid-template-columns: 1fr; gap: 28px; }
  .split--rev .split__media { order: 0; }
  .hero__grid { grid-template-columns: 1fr; }
  .hero__art { margin-top: 8px; }
  .ftr__grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 760px) {
  .section { padding: 48px 0; }
  /* The menu is hidden until the burger asks for it, not hidden outright:
     before this, a phone had no navigation at all and no way to sign in. */
  .nav { display: none; }
  .burger { display: block; margin-left: auto; }

  .hdr.is-menu .nav {
    display: block;
    position: absolute; top: var(--header-h); left: 0; right: 0;
    max-height: calc(100vh - var(--header-h));
    overflow-y: auto;
    margin: 0; padding: 8px 16px 20px;
    background: #fff;
    border-top: 1px solid var(--border);
    box-shadow: var(--shadow-lg);
  }
  .hdr.is-menu .nav > li { border-bottom: 1px solid var(--border); }
  .hdr.is-menu .nav > li:last-child { border-bottom: 0; }
  .hdr.is-menu .nav__link { height: auto; padding: 14px 0; font-size: 16px; }
  .hdr.is-menu .has-sub > .nav__link { justify-content: space-between; }

  /* Submenus become part of the list rather than a floating card, so the
     whole thing reads as one scrollable menu on a small screen. */
  .hdr.is-menu .sub {
    position: static; min-width: 0; padding: 0 0 10px 10px;
    background: none; box-shadow: none; border-radius: 0;
    display: none; opacity: 1; visibility: visible; transform: none;
  }
  .hdr.is-menu .has-sub.is-open .sub { display: block; }
  .hdr.is-menu .sub a { padding: 11px 10px; }

  /* Signing in is half the reason people open this menu, so the link is moved
     into the list itself rather than left floating in a header that no longer
     has room for it. */
  .hdr__login { display: none; }
  .hdr__lang { display: none; }
  .hdr.is-menu .nav__account { display: block; }
  .nav__account .nav__link { color: var(--blue); font-weight: 700; }

  .has-menu { overflow: hidden; }
  .grid--2, .grid--3, .grid--4, .grid--6 { grid-template-columns: 1fr; }
  .stats__grid { grid-template-columns: repeat(2, 1fr); }
  .stats__i:nth-child(3) { border-left: 0; }
  .ftr__grid { grid-template-columns: repeat(2, 1fr); }
}


/* ---------------------------------------------------------------- ask form
   The contact form. Deliberately plain: it sits inside a legal-page column, so
   it borrows that column's measure instead of fighting it. */
.ask {
  margin: 22px 0 18px;
  padding: 24px;
  background: var(--tint-2);
  border: 1px solid var(--tint);
  border-radius: var(--r-xl);
}
.ask__row { margin: 0 0 16px; }
.ask__row label {
  display: block;
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 700;
  color: var(--ink-strong);
}
.ask input, .ask select, .ask textarea {
  width: 100%;
  padding: 12px 14px;
  font: inherit;
  font-size: 15px;
  color: var(--ink-strong);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--r);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.ask input:focus, .ask select:focus, .ask textarea:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(60, 127, 255, .16);
}
.ask input[readonly] { background: var(--bg-soft); color: var(--muted); }
.ask textarea { resize: vertical; min-height: 130px; line-height: 1.6; }

.ask__end { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ask__msg { font-size: 14px; line-height: 1.5; color: var(--muted); }
.ask__msg.is-ok { color: #2f7d18; }
.ask__msg.is-bad { color: #c0392b; }
.ask__alt { font-size: 14px; color: var(--muted); }

@media (max-width: 600px) {
  .ask { padding: 18px; }
  .ask__end .btn { width: 100%; }
}

/* ---------- price ladder on the residential page ----------
   A pricing table earns its keep only if the number a buyer is looking for is
   the one that stands out, so the effective per-GB rate is the emphasised
   column and everything else is quiet around it. */
.wrap--narrow { max-width: 900px; }

.rate-wrap {
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r);
  background: var(--white);
  margin-bottom: 20px;
}
.rate { width: 100%; border-collapse: collapse; min-width: 560px; }
.rate th, .rate td { padding: 13px 18px; text-align: left; font-size: 15px; }
.rate th {
  background: var(--bg-soft);
  color: var(--ink-strong);
  font-weight: 700;
  font-size: 13.5px;
  letter-spacing: .2px;
  border-bottom: 1px solid var(--line);
}
.rate td { border-bottom: 1px solid var(--line-soft, #eef1f7); color: var(--muted); }
.rate tr:last-child td { border-bottom: 0; }
.rate td:first-child { color: var(--ink-strong); font-weight: 700; }
.rate td:last-child { color: var(--ink-strong); }
.rate tbody tr:hover td { background: var(--bg-soft); }

.rate-note { font-size: 15px; color: var(--muted); max-width: 760px; }
.rate-note.center { margin-left: auto; margin-right: auto; margin-top: 28px; }

/* A long paragraph set centred is hard to read, so this one is centred as a
   block while its text stays ranged left. */
.rate-lead { margin: 0 auto 28px; text-align: left; }

/* Below the width where five columns can fit, the table stops being a table:
   each package becomes its own small card with the figures labelled. Without
   this the effective per-GB rate -- the only number most buyers came for --
   sits off the right edge on a phone, and a third of our visitors are on one. */
@media (max-width: 680px) {
  .rate-wrap { overflow-x: visible; border: 0; background: none; }
  .rate { min-width: 0; }
  .rate thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }
  .rate tr {
    display: block;
    border: 1px solid var(--line);
    border-radius: var(--r);
    background: var(--white);
    padding: 6px 4px;
    margin-bottom: 12px;
  }
  .rate td {
    display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
    padding: 7px 14px; border: 0; font-size: 15px;
  }
  .rate td::before {
    content: attr(data-l);
    color: var(--muted); font-size: 13.5px; font-weight: 600;
  }
  .rate td:first-child {
    border-bottom: 1px solid var(--line);
    padding-bottom: 10px; margin-bottom: 4px;
    font-size: 17px;
  }
  .rate td:last-child b { color: var(--blue); font-size: 16px; }
  .rate tbody tr:hover td { background: none; }
}

@media (max-width: 600px) {
  .rate th { padding: 11px 13px; font-size: 14px; }
}


/* ---------- product cards: every pool at a glance ----------
   The card layout the homepage now leads with. Each pool owns an accent colour,
   passed in as --accent / --accent-soft on the card, and everything that should
   read as "this product" — the icon chip, the feature ticks, the button on
   hover, the featured card's glow — derives from those two values. That is what
   keeps seven cards from looking like seven copies of one template: the shape
   is shared, the colour is not. Icons are inline strokes rather than raster
   clip-art for the same reason — they stay crisp and take the accent. */
.pgrid {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fill, minmax(274px, 1fr));
}
.pcard {
  --accent: var(--blue); --accent-soft: var(--tint);
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid #e9edf5; border-radius: 18px;
  padding: 24px 22px 22px;
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.pcard:hover {
  transform: translateY(-4px);
  box-shadow: 0 20px 44px rgba(16, 32, 64, .13);
  border-color: color-mix(in srgb, var(--accent) 40%, #e9edf5);
}
.pcard__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; margin-bottom: 15px; }
.pcard__ico {
  width: 48px; height: 48px; flex: none; border-radius: 13px;
  display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent);
}
.pcard__ico svg {
  width: 25px; height: 25px; fill: none; stroke: currentColor;
  stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.pcard__badge {
  font-size: 11px; font-weight: 800; letter-spacing: .05em; text-transform: uppercase;
  padding: 5px 10px; border-radius: 999px; white-space: nowrap;
  background: var(--accent-soft); color: var(--accent);
}
.pcard__badge--hot { background: linear-gradient(180deg, #d5a842, #c1912f); color: #fff; box-shadow: 0 4px 12px rgba(193, 145, 47, .3); }
.pcard h3 { font-size: 19px; margin: 0 0 6px; color: var(--ink-strong); }
.pcard__desc { color: var(--muted); font-size: 14px; line-height: 1.5; margin: 0 0 16px; }
.pcard__feats { list-style: none; margin: 0 0 18px; padding: 0; display: grid; gap: 9px; }
.pcard__feats li { position: relative; padding-left: 27px; font-size: 13.5px; line-height: 1.45; color: var(--ink); }
.pcard__feats li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 19px; height: 19px;
  border-radius: 50%; background: var(--accent-soft);
}
.pcard__feats li::after {
  content: ""; position: absolute; left: 6.5px; top: 4px; width: 5px; height: 9px;
  border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent);
  transform: rotate(45deg);
}
.pcard__foot { margin-top: auto; padding-top: 17px; border-top: 1px solid #eef1f7; }
.pcard__price { display: flex; align-items: baseline; gap: 5px; margin-bottom: 14px; }
.pcard__price small { font-size: 12.5px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .04em; }
.pcard__price s { font-size: 15px; color: var(--muted-2); text-decoration-thickness: 1.5px; }
.pcard__price b { font-size: 28px; font-weight: 900; color: var(--ink-strong); letter-spacing: -.5px; }
.pcard__price em { font-size: 14px; font-style: normal; font-weight: 600; color: var(--muted); }
.pcard__price--note { font-size: 14px; font-weight: 700; color: var(--muted); }
.pcard__cta {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; border-radius: 11px; font-weight: 800; font-size: 15px;
  background: linear-gradient(180deg, #2b2f45, var(--ink-strong)); color: #fff;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .1);
  transition: background .15s ease, transform .15s ease, box-shadow .15s ease;
}
.pcard__cta:hover { background: var(--accent); color: #fff; transform: translateY(-1px); box-shadow: 0 10px 22px color-mix(in srgb, var(--accent) 32%, transparent); }
.pcard__cta--ghost { background: transparent; color: var(--accent); box-shadow: inset 0 0 0 1.6px #dfe5f0; }
.pcard__cta--ghost:hover { background: var(--accent); color: #fff; box-shadow: none; }
.pcard__cta--soon { background: #eef1f7; color: var(--muted-2); pointer-events: none; }

/* Featured pool: a hairline accent gradient on the border and a soft tinted
   lift, so the recommendation is visible before anyone reads the badge. */
.pcard--featured {
  background: linear-gradient(180deg, #ffffff 62%, var(--accent-soft));
  box-shadow: 0 16px 40px color-mix(in srgb, var(--accent) 16%, transparent);
}
.pcard--featured::before {
  content: ""; position: absolute; inset: 0; border-radius: 18px; padding: 1.4px;
  background: linear-gradient(155deg, var(--accent), transparent 62%);
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none;
}
/* Pools we do not sell yet: present and honest, but visually secondary. */
.pcard--soon { background: #fbfcfe; }
.pcard--soon .pcard__ico { opacity: .85; }
.pcard--soon h3 { color: var(--ink); }

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

/* "IP2World is back" marketing banner as a closing CTA, clickable to the buy
   page. Centred and capped so the light raster reads as an intentional block. */
.adband { text-align: center; }
.adband__link {
  display: block; max-width: 760px; margin: 0 auto;
  border-radius: 18px; overflow: hidden;
  border: 1px solid #e2e8f4;
  box-shadow: 0 18px 50px rgba(4, 14, 35, .16);
  transition: transform .16s ease, box-shadow .16s ease;
}
.adband__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 26px 64px rgba(4, 14, 35, .22);
}
.adband__img { display: block; width: 100%; height: auto; }

/* Launch-sale strip above the product grid, so the discount is obvious on the
   home page and not only in the checkout. Same red urgency + rolling timer. */
.hsale {
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap;
  gap: 10px 16px; margin: 0 auto 28px; max-width: 840px;
  padding: 13px 22px; border-radius: 13px;
  background: linear-gradient(90deg, #7c1122, #b4122e);
  color: #fff; font-size: 15.5px; font-weight: 700;
  box-shadow: 0 12px 28px rgba(180, 18, 46, .24);
}
.hsale__badge {
  padding: 4px 11px; border-radius: 999px; background: var(--gold);
  color: #3a2a00; font-size: 12px; font-weight: 900; letter-spacing: .09em;
}
.hsale__txt { color: #fff; }
.hsale__txt b { color: #ffe08a; }
.hsale__txt a { color: #ffe08a; text-decoration: underline; font-weight: 800; }
.hsale__timer b {
  font-variant-numeric: tabular-nums; letter-spacing: .6px; font-weight: 900;
  background: rgba(0, 0, 0, .26); padding: 4px 11px; border-radius: 8px;
}
@media (max-width: 560px) { .hsale { font-size: 14px; padding: 12px 16px; } }

/* ---------- product comparison on the homepage ----------
   Someone landing here is choosing between five things, and the fastest way to
   help is to put the choice in one place. The residential row is emphasised
   because it is the right answer for most visitors and saying so is more useful
   than pretending the five are equal. */
.cmp-wrap {
  overflow-x: auto;
  border: 1px solid #e6eaf2;
  border-radius: var(--r-xl);
  background: #fff;
}
.cmp { width: 100%; border-collapse: collapse; min-width: 820px; }
.cmp th, .cmp td {
  padding: 14px 18px;
  text-align: left;
  font-size: 15px;
  vertical-align: top;
  border-top: 1px solid #eef1f7;
}
.cmp thead th {
  border-top: 0;
  padding-top: 16px;
  padding-bottom: 12px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--muted);
  background: #fafbfe;
}
.cmp tbody th { font-weight: 700; color: var(--ink-strong, #242633); white-space: nowrap; }
.cmp td b { font-size: 17px; color: var(--blue-ink); }
.cmp__hot { background: #f5f9ff; }
.cmp__hot tbody th, .cmp__hot th { color: var(--blue-ink); }
.cmp__note {
  margin: 14px 0 0;
  font-size: 14.5px;
  color: var(--muted);
  text-align: center;
}

@media (max-width: 860px) {
  .cmp-wrap { border: 0; background: none; overflow: visible; }
  .cmp { min-width: 0; }
  .cmp thead { display: none; }
  .cmp tbody tr {
    display: block;
    margin-bottom: 14px;
    padding: 4px 16px 14px;
    border: 1px solid #e6eaf2;
    border-radius: var(--r-xl);
    background: #fff;
  }
  .cmp tbody th, .cmp td {
    display: block;
    border-top: 0;
    padding: 8px 0 0;
    white-space: normal;
  }
  .cmp tbody th { padding-top: 14px; font-size: 17px; }
  .cmp td[data-l]::before {
    content: attr(data-l);
    display: block;
    margin-bottom: 2px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    color: var(--muted);
  }
  .cmp td .btn { display: block; margin-top: 12px; text-align: center; }
}

/* ---------- the spec panel beside each product ----------
   Standing in for the product screenshot the original homepage used. A reader
   comparing pools wants the same five facts each time, in the same order, which
   a definition list gives for free. */
.spec {
  padding: 26px 28px 22px;
  border: 1px solid #e6eaf2;
  border-radius: var(--r-xl);
  background: #fff;
  box-shadow: 0 10px 30px rgba(11, 41, 97, .06);
}
.spec__ico { display: block; margin-bottom: 12px; }
.spec__name { margin: 0 0 4px; font-size: 20px; }
.spec__price { margin: 0 0 18px; font-size: 14.5px; color: var(--muted); }
.spec__price b { font-size: 24px; color: var(--blue-ink); font-weight: 900; }
.spec__list { margin: 0; display: grid; grid-template-columns: auto 1fr; gap: 0; }
.spec__list dt,
.spec__list dd {
  padding: 10px 0;
  border-top: 1px solid #eef1f7;
  font-size: 14.5px;
  line-height: 1.45;
}
.spec__list dt {
  padding-right: 18px;
  font-weight: 700;
  color: var(--muted);
  white-space: nowrap;
}
.spec__list dd { margin: 0; color: var(--ink); }

@media (max-width: 900px) {
  .split { grid-template-columns: 1fr; gap: 32px; }
  .split--rev .split__media { order: 0; }
  .spec { padding: 22px 20px 18px; }
}