/* ==== resources/css/000-tokens.css ==== */
/* =====================================================================
   GetInternet.es — design tokens (from Brand Guidelines 01.04.2025)
   ===================================================================== */
:root {
  --bubble-mask: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20viewBox%3D%220%200%20720%20608%22%20preserveAspectRatio%3D%22none%22%3E%3Cpath%20fill%3D%22%23000%22%20d%3D%22M40%200H680A40%2040%200%200%201%20720%2040V500A40%2040%200%200%201%20680%20540H140L40%20608V540A40%2040%200%200%201%200%20500V40A40%2040%200%200%201%2040%200Z%22/%3E%3C/svg%3E");
  /* Brand palette — exact values from the brand book */
  --ink:   #000000;   /* Black */
  --paper: #FFFFFF;   /* White */
  --mist:  #F3F3F3;   /* Light Gray */
  --cyan:  #00BAD9;   /* "Dark Blue" — the brand accent */

  /* Derived working tones (tints of the brand palette, documented in the style guide) */
  --cyan-text: #00798E;             /* brand cyan darkened for small text: 4.5:1 on white, --mist and --cyan-tint (WCAG AA) */
  --cyan-tint: #E3F7FA;             /* 12% cyan on white — soft panels */
  --cyan-line: #B3EAF3;             /* borders on cyan-tint panels */
  --ink-2:  #1B1D1F;                /* hover state for black buttons */
  --muted:  #5A6165;                /* secondary text — cool grey */
  --line:   #E3E5E6;                /* hairlines */
  --line-2: #D2D5D7;                /* input borders */
  --danger: #B42318;                /* form errors (not in the brand book; red with WCAG AA contrast on white) */
  --danger-tint: #FEF3F2;           /* background of the form-level error */

  /* Type */
  /* The prototype's fonts, self-hosted (001-fonts.css): Inter Tight for headings, Inter for text.
     Chosen over the brand book's Neue Haas Grotesk (user decision 2026-09-26); Inter also covers Cyrillic. */
  --font-display: "Inter Tight", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-body:    "Inter", "Helvetica Neue", Helvetica, Arial, sans-serif;

  /* Shape & rhythm */
  --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-xl: 24px;
  --gutter: clamp(16px, 4vw, 32px);
  --container: 1200px;
  --header-h: 68px;
  color-scheme: light;
}

/* The brand site commits to one light look; colours are painted explicitly. */
* { box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--paper); color: var(--ink);
  font-family: var(--font-body); font-size: 16px; line-height: 1.5;
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } html { scroll-behavior: auto; } }

img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.08; margin: 0; text-wrap: balance; }
p { margin: 0; }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 2px; border-radius: 4px; }

.container { max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(56px, 8vw, 96px); }
.section--mist { background: var(--mist); }
.section--tint { background: var(--cyan-tint); }
.section--tight { padding-block: clamp(36px, 5vw, 56px); }

/* ==== resources/css/001-fonts.css ==== */
/* ---------- fonts ---------- */
/* Inter Tight (headings) and Inter (text), as in the prototype, self-hosted instead of Google Fonts.
   Generated by tools/prototype/fetch-fonts.php. Variable woff2, one file per family and script subset;
   a subset is downloaded only when the page uses one of its characters. Licence: web/fonts/OFL.txt. */
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-cyrillic-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-cyrillic.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin-ext.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter";
  src: url("../fonts/inter-latin.woff2") format("woff2");
  font-weight: 400 600;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-cyrillic-ext.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-cyrillic.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin-ext.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "Inter Tight";
  src: url("../fonts/inter-tight-latin.woff2") format("woff2");
  font-weight: 600 800;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ==== resources/css/010-type-scale.css ==== */
/* ---------- type scale ---------- */
.eyebrow { font-family: var(--font-display); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--cyan-text); display: inline-flex; align-items: center; gap: 10px; }
.eyebrow::before { content: ""; width: 10px; height: 10px; background: var(--cyan); border-radius: 2px 2px 2px 0; }
.h1 { font-size: clamp(38px, 6vw, 68px); }
.h2 { font-size: clamp(30px, 4.2vw, 46px); }
.h3 { font-size: clamp(22px, 2.4vw, 28px); }
.h4 { font-size: 18px; letter-spacing: -0.01em; }
.lead { font-size: clamp(17px, 1.4vw, 20px); color: var(--muted); max-width: 60ch; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.center { text-align: center; }
.center .lead { margin-inline: auto; }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); }
.section-head.center { justify-items: center; }
.num { font-variant-numeric: tabular-nums; }

/* The speech bubble — the logo's own device, used as a headline highlight */
.bubble { position: relative; display: inline-block; background: var(--cyan); color: var(--paper); padding: 0.02em 0.28em 0.06em; border-radius: 0.22em 0.22em 0.22em 0; white-space: nowrap; }
.bubble::after { content: ""; position: absolute; left: 0; bottom: 0; width: 0.32em; height: 0.28em; background: var(--cyan); clip-path: polygon(0 0, 100% 0, 0 100%); transform: translateY(calc(100% - 1px)); }
@media (max-width: 480px) { .bubble { white-space: normal; box-decoration-break: clone; -webkit-box-decoration-break: clone; } }

/* ==== resources/css/015-icons.css ==== */
/* ---------- icons ---------- */
/* Icons and flags come from one SVG sprite (web/images/sprite.svg) via <svg><use href="…#id">.
   Default size follows the text; component rules further down set their own sizes. */
svg.icon { width: 1em; height: 1em; flex: none; }

/* ==== resources/css/016-media.css ==== */
/* ---------- media ---------- */
/* <picture> wraps every photo (app\helpers\Picture). Taking it out of the box tree lets the prototype's
   rules for the <img> (width/height 100%, object-fit) work exactly as they did on a bare <img>. */
picture { display: contents; }

/* ==== resources/css/020-buttons.css ==== */
/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 48px; padding: 12px 22px; border-radius: var(--r-sm); border: 1.5px solid transparent; font-family: var(--font-display); font-weight: 700; font-size: 15px; letter-spacing: 0.01em; cursor: pointer; transition: background .15s, color .15s, border-color .15s, transform .15s; white-space: nowrap; text-align: center; }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--primary:hover { background: var(--ink-2); }
.btn--secondary { background: transparent; color: var(--ink); border-color: var(--ink); }
.btn--secondary:hover { background: var(--ink); color: var(--paper); }
.btn--cyan { background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.btn--cyan:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }
.btn--ghost { background: var(--paper); color: var(--ink); border-color: var(--line-2); }
.btn--ghost:hover { border-color: var(--ink); }
.btn--sm { min-height: 40px; padding: 8px 16px; font-size: 14px; }
.btn--lg { min-height: 56px; padding: 14px 28px; font-size: 16px; }
.btn--block { width: 100%; }
.btn svg { width: 18px; height: 18px; flex: none; }
.link { color: var(--cyan-text); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; }
.link:hover { text-decoration: underline; }
.link svg { width: 16px; height: 16px; }

/* ==== resources/css/030-header.css ==== */
/* ---------- header ---------- */
.header { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; background: var(--paper); border-bottom: 1px solid var(--line); }
.header__in { height: var(--header-h); display: flex; align-items: center; gap: 24px; }
.logo { display: inline-flex; align-items: center; flex: none; }
.logo img { height: 30px; width: auto; }
.nav { display: flex; gap: 4px; margin-inline: 8px auto; }
.nav a { white-space: nowrap; padding: 8px 12px; border-radius: 6px; font-weight: 500; font-size: 15px; color: var(--ink); }
.nav a:hover { background: var(--mist); }
.nav a.is-active { box-shadow: inset 0 -3px 0 var(--cyan); border-radius: 0; }
.header__tools { display: flex; align-items: center; gap: 10px; margin-left: auto; }
.header__phone { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 15px; white-space: nowrap; padding: 8px 6px; }
.header__phone svg { width: 18px; height: 18px; color: var(--cyan); }
.iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: var(--paper); cursor: pointer; }
.iconbtn:hover { border-color: var(--ink); }
.iconbtn svg { width: 22px; height: 22px; }
.burger { display: none; }

/* language switcher */
.flag { width: 21px; height: 14px; border-radius: 2px; flex: none; box-shadow: 0 0 0 1px rgba(0,0,0,.08); display: inline-block; vertical-align: -2px; }
.lang { position: relative; }
.lang__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 8px 12px; border-radius: var(--r-sm); border: 1.5px solid var(--line-2); background: var(--paper); cursor: pointer; font-weight: 600; font-size: 14px; }
.lang__btn:hover { border-color: var(--ink); }
.lang__btn svg { width: 14px; height: 14px; }
.lang__menu { position: absolute; right: 0; top: calc(100% + 8px); background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-md); box-shadow: 0 16px 40px rgba(0,0,0,.12); padding: 8px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 300px; z-index: 60; }
.lang__menu[hidden] { display: none; }
.lang__item { display: flex; align-items: center; gap: 10px; padding: 9px 10px; border-radius: 6px; font-size: 14px; cursor: pointer; border: 0; background: transparent; text-align: left; width: 100%; }
.lang__item:hover { background: var(--mist); }
.lang__item.is-active { background: var(--cyan-tint); font-weight: 600; }
.lang__item .code { margin-left: auto; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; }

/* mobile drawer */
.drawer { position: fixed; inset: 0; z-index: 100; background: var(--paper); display: flex; flex-direction: column; padding: env(safe-area-inset-top, 0px) var(--gutter) env(safe-area-inset-bottom, 0px); overflow-y: auto; }
.drawer[hidden] { display: none; }
.drawer__top { height: var(--header-h); flex: none; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid var(--line); }
.drawer__nav { flex: none; display: grid; gap: 4px; padding-block: 12px; }
.drawer__nav a { font-family: var(--font-display); font-size: 26px; font-weight: 700; padding: 10px 0; border-bottom: 1px solid var(--line); }
.drawer__nav a.sub { font-size: 17px; font-weight: 500; }
.drawer__ctas { flex: none; display: grid; gap: 10px; padding-block: 16px 24px; margin-top: auto; }

/* ==== resources/css/040-hero.css ==== */
/* ---------- hero ---------- */
.hero { padding-block: clamp(36px, 6vw, 80px) clamp(40px, 6vw, 72px); overflow: hidden; }
.hero__grid { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.hero__copy { display: grid; gap: 22px; }
.hero h1 { display: grid; gap: 0.12em; justify-items: start; }
.hero .lead { max-width: 46ch; }
.pricestrip { display: grid; grid-template-columns: repeat(3, auto); justify-content: start; gap: 10px; }
.pricestrip__item { position: relative; padding: 12px 18px; border: 1.5px solid var(--line); border-radius: 12px; display: grid; gap: 2px; min-width: 0; background: var(--paper); color: var(--ink); font: inherit; text-align: left; cursor: pointer; transition: border-color .15s, transform .15s, box-shadow .15s; }
.pricestrip__item:hover { border-color: var(--ink); }
.pricestrip__item:active { transform: translateY(1px); }
.pricestrip__item.is-popular:hover { border-color: var(--cyan-text); }
.pricestrip__item.is-popular { border-color: var(--cyan); background: var(--cyan-tint); }
.pricestrip__badge { position: absolute; top: -10px; left: 12px; background: var(--cyan); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 10px; letter-spacing: .06em; text-transform: uppercase; padding: 3px 8px; border-radius: 999px; white-space: nowrap; }
.pricestrip b { font-family: var(--font-display); font-size: 18px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; }
.pricestrip__item.is-popular b { color: var(--cyan-text); }
.pricestrip strong { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; }
.nowrap { white-space: nowrap; }
.pricestrip strong small { font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 2px; }
/* narrow columns (tablet, split hero): equal cells, unit on its own line so nothing overflows */
@media (max-width: 1180px) {
  .pricestrip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
  .pricestrip__item { padding: 12px 12px; }
  .pricestrip strong { font-size: clamp(18px, 2.4vw, 24px); }
  .pricestrip strong small { display: block; margin: 0; font-size: 12px; }
}
.checks { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 20px; list-style: none; margin: 0; padding: 0; }
.checks li { display: flex; align-items: center; gap: 10px; font-weight: 500; font-size: 15px; }
.checks svg { width: 20px; height: 20px; flex: none; }
.hero__ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero__areas { display: flex; gap: 8px; align-items: flex-start; color: var(--muted); font-size: 14px; }
.hero__areas svg { width: 18px; height: 18px; flex: none; color: var(--cyan); margin-top: 1px; }
.hero__media { position: relative; }
.photo-bubble { aspect-ratio: 720 / 608; width: 100%; max-width: 100%; -webkit-mask: var(--bubble-mask) no-repeat center / 100% 100%; mask: var(--bubble-mask) no-repeat center / 100% 100%; background: var(--mist); }
.photo-bubble img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 900px) {
  .hero__grid { grid-template-columns: 1fr; }
  .hero__media { order: -1; max-width: 560px; }
  .hero__ctas .btn { flex: 1 1 220px; }
}
@media (max-width: 640px) {
  .pricestrip { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 6px; }
  .pricestrip__item { padding: 10px 8px 9px; text-align: center; border-radius: 10px; }
  .pricestrip__item b, .pricestrip__item strong { text-align: center; }
  .pricestrip__badge { left: 50%; transform: translateX(-50%); font-size: 9px; padding: 3px 7px; }
  .pricestrip b { font-size: 14px; }
  .pricestrip strong { font-size: clamp(16px, 5.4vw, 22px); }
  .pricestrip strong small { display: block; margin: 0; font-size: 11px; }
}
@media (max-width: 480px) { .checks { grid-template-columns: 1fr; } }

/* ==== resources/css/050-feature-strip.css ==== */
/* ---------- feature strip ---------- */
.features { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 20px; }
.feature { display: grid; justify-items: center; text-align: center; gap: 10px; }
.feature__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--paper); border: 1.5px solid var(--line); display: grid; place-items: center; color: var(--cyan); }
.feature__icon svg { width: 30px; height: 30px; }
.feature b { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.feature p { font-size: 14px; color: var(--muted); max-width: 22ch; }
@media (max-width: 960px) { .features { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 560px) { .features { grid-template-columns: repeat(2, 1fr); gap: 20px 12px; } .feature:last-child:nth-child(odd) { grid-column: 1 / -1; } }

/* ==== resources/css/060-plan-cards.css ==== */
/* ---------- plan cards ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; align-items: stretch; }
.plan { position: relative; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 32px 28px 28px; display: grid; gap: 18px; text-align: center; }
.plan--popular { border-color: var(--cyan); border-width: 2px; }
.plan__badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--cyan); color: var(--ink); font-family: var(--font-display); font-weight: 700; font-size: 12px; letter-spacing: .08em; text-transform: uppercase; padding: 6px 14px; border-radius: 999px; white-space: nowrap; }
.plan__speed { font-family: var(--font-display); font-size: 46px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.plan__speed small { font-size: 20px; font-weight: 700; color: var(--cyan-text); margin-left: 6px; letter-spacing: 0; }
.plan__price { color: var(--ink); }
.plan__price { font-family: var(--font-display); font-size: 56px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.plan__price small { font-size: 16px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 4px; }
.plan__price .cur { font-size: 28px; vertical-align: top; margin-left: 4px; }
.plan__who { color: var(--muted); font-size: 15px; min-height: 2.6em; }
.plan__tags { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.plan__tags div { display: grid; justify-items: center; gap: 6px; font-size: 12px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.plan__tags svg { width: 26px; height: 26px; color: var(--ink); }
.plan__install { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; background: var(--mist); border-radius: 999px; padding: 8px 14px; margin-inline: auto; }
.plan--popular .plan__install { background: var(--cyan-tint); }
.plan__install svg { width: 16px; height: 16px; color: var(--cyan-text); }
.plan .btn { margin-top: 4px; }
.plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 820px; margin-inline: auto; }
@media (max-width: 900px) { .plans, .plans--2 { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } .plan__who { min-height: 0; } }

.symmetric { margin-top: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 20px 24px; display: flex; align-items: center; gap: 18px; max-width: 760px; margin-inline: auto; }
.symmetric__icon { width: 52px; height: 52px; border-radius: 50%; border: 1.5px solid var(--cyan); display: grid; place-items: center; color: var(--cyan-text); flex: none; }
.symmetric__icon svg { width: 26px; height: 26px; }
.symmetric b { font-family: var(--font-display); font-size: 18px; }
.symmetric p { color: var(--muted); font-size: 14px; }
.fine { margin-top: 20px; text-align: center; font-size: 14px; color: var(--muted); }

/* ==== resources/css/065-package.css ==== */
/* ---------- package builder (home variant B) ---------- */
/* Options on the left, the package with its total in a column that stays in view. Without JavaScript only the
   fibre tiles are shown (.is-ready is set by 35-package.js). */
.pk { display: grid; gap: 24px; scroll-margin-top: calc(var(--header-h) + 20px); }
.pk.is-ready { grid-template-columns: minmax(0, 1fr) clamp(300px, 24vw, 440px); align-items: start; }
.pk [hidden] { display: none; }
.pk__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 16px; min-width: 0; }

/* fibre tiles: a label around a radio button */
.pk__plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; padding-top: 14px; /* room for the badge */ }
.pk-plan { position: relative; display: grid; gap: 8px; align-content: start; padding: 22px 18px 18px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg); cursor: pointer; transition: border-color .15s, box-shadow .15s, background .15s; }
.pk-plan input { position: absolute; top: 16px; right: 16px; width: 24px; height: 24px; margin: 0; accent-color: var(--ink); cursor: pointer; }
.pk-plan:hover { border-color: var(--ink); }
.pk-plan:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); background: var(--cyan-tint); }
.pk-plan:has(input:focus-visible) { outline: 3px solid var(--cyan); outline-offset: 3px; }
.pk-plan input:focus-visible { outline: none; }
.pk-plan__speed { font-family: var(--font-display); font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; padding-right: 32px; }
.pk-plan__speed small { font-size: 15px; color: var(--cyan-text); margin-left: 4px; letter-spacing: 0; }
.pk-plan__price { font-family: var(--font-display); font-size: 26px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; }
.pk-plan__price small, .pk-line__price small { font-size: 13px; font-weight: 600; color: var(--muted); letter-spacing: 0; margin-left: 2px; }
.pk-plan__who { font-size: 14px; color: var(--muted); }
.pk-plan__install { display: flex; gap: 6px; font-size: 13px; font-weight: 600; }
.pk-plan__install svg { width: 16px; height: 16px; flex: none; margin-top: 2px; color: var(--cyan-text); }
.pk-plan__terms { font-size: 13px; color: var(--muted); }

/* add-ons */
/* The add-ons sit on a grey panel, so the fibre choice above reads as the main step. */
.pk__addons { display: grid; gap: 16px; margin-top: 12px; padding: clamp(18px, 2.5vw, 28px); background: var(--mist); border-radius: var(--r-lg); }
.pk__head h3 { font-size: clamp(22px, 2.4vw, 28px); margin-bottom: 6px; }
.pk__head p, .pk__sub { color: var(--muted); font-size: 14px; }
.pk__label { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; padding-top: 16px; border-top: 1px solid var(--line-2); }
.pk__label--top { padding-top: 0; border-top: 0; }
.pk__label b { font-family: var(--font-display); font-size: 18px; }
.pk__label span { font-size: 14px; color: var(--muted); }
/* All tiles share one grid, so they have one width; the number of columns follows the width of the options column. */
.pk__main { container: pk / inline-size; }
.pk__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.pk__sub, .pk-extra { grid-column: 1 / -1; }
.pk__sub { align-self: end; }
.pk__sub:not(:first-child) { margin-top: 8px; }
.pk__sub b { color: var(--ink); margin-right: 6px; }
.pk-line { display: grid; gap: 4px; justify-items: center; align-content: center; text-align: center; padding: 14px 10px 12px; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-md); transition: border-color .15s, box-shadow .15s, background .15s; }
.pk-line:not(.is-on) { cursor: pointer; }
.pk-line:not(.is-on):hover { border-color: var(--ink); }
.pk-line.is-on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); background: var(--cyan-tint); }
.pk-line b { font-family: var(--font-display); font-size: 20px; }
.pk-line__price { font-family: var(--font-display); font-size: 16px; font-weight: 700; }
.pk-line .stepper { margin-top: 6px; }

.stepper { display: inline-flex; align-items: center; gap: 4px; }
.stepper button { width: 36px; height: 36px; border-radius: 50%; border: 1.5px solid var(--ink); background: var(--paper); font-size: 20px; font-weight: 600; line-height: 1; cursor: pointer; transition: background .15s, color .15s; }
.stepper button:hover:not(:disabled) { background: var(--ink); color: var(--paper); }
.stepper button:disabled { border-color: var(--line-2); color: var(--line-2); cursor: default; }
.stepper output { min-width: 28px; text-align: center; font-family: var(--font-display); font-size: 18px; font-weight: 700; }

.pk-extra { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--r-md); cursor: pointer; font-size: 14px; color: var(--muted); transition: border-color .15s, box-shadow .15s, background .15s; }
.pk-extra:hover { border-color: var(--ink); }
.pk-extra:has(input:checked) { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); background: var(--cyan-tint); }
.pk-extra input { width: 24px; height: 24px; margin: 0; flex: none; accent-color: var(--ink); cursor: pointer; }
.pk-extra > span:first-of-type { flex: 1 1 170px; min-width: 0; }
.pk-extra b { display: block; font-family: var(--font-display); font-size: 18px; color: var(--ink); }
.pk-extra .pk-line__price { margin-left: auto; color: var(--ink); white-space: nowrap; }

@container pk (min-width: 480px) { .pk__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Five columns: the national plans fill a row, Premium TV takes the two cells next to the international plans. */
@container pk (min-width: 760px) {
  .pk__grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
  .pk__sub--international { grid-row: 3; grid-column: 1 / 4; }
  .pk__sub--tv { grid-row: 3; grid-column: 4 / 6; }
  .pk-extra { grid-row: 4; grid-column: 4 / 6; }
}
/* Wide fibre tiles: speed and price on the left, the details on the right. */
@container pk (min-width: 1100px) {
  .pk-plan { grid-template-columns: auto minmax(0, 1fr); column-gap: 32px; padding: 28px 26px 24px; }
  .pk-plan__speed { grid-area: 1 / 1; font-size: 40px; padding-right: 0; }
  .pk-plan__price { grid-area: 2 / 1 / span 2; font-size: 30px; }
  .pk-plan__who { grid-area: 1 / 2; padding-right: 36px; /* the radio button */ font-size: 15px; }
  .pk-plan__install { grid-area: 2 / 2; font-size: 14px; }
  .pk-plan__terms { grid-area: 3 / 2; font-size: 14px; }
  .pk-line { padding-block: 20px 18px; }
  .pk-line b { font-size: 24px; }
  .pk-line__price { font-size: 18px; }
  .pk-line .stepper button { width: 40px; height: 40px; }
  .pk-extra { padding: 20px 22px; font-size: 15px; }
  .pk-extra b { font-size: 22px; }
  .pk__head p, .pk__sub, .pk__label span { font-size: 16px; }
  .pk__label b { font-size: 22px; }
}

/* summary */
.pk__summary { position: sticky; top: calc(var(--header-h) + 16px); display: grid; gap: 12px; padding: 24px; margin-top: 14px; background: var(--ink); color: var(--paper); border-radius: var(--r-lg); }
.pk__summary .eyebrow { color: var(--cyan); }
.pk__items { list-style: none; margin: 0; padding: 0 0 12px; display: grid; gap: 6px; font-weight: 600; border-bottom: 1px solid rgba(255,255,255,.25); }
.pk__items li { display: flex; gap: 6px; }
.pk__items li span:first-child { flex: 1; }
.pk__items li span:last-child { color: rgba(255,255,255,.75); white-space: nowrap; }
.pk__items li + li::before { content: "+"; color: var(--cyan); }
.pk__total { font-family: var(--font-display); font-size: 48px; font-weight: 700; letter-spacing: -0.04em; line-height: 1; }
.pk__total .cur { font-size: 24px; vertical-align: top; margin-left: 4px; }
.pk__total small { font-size: 16px; font-weight: 600; color: rgba(255,255,255,.75); letter-spacing: 0; margin-left: 4px; }
.pk__terms { font-size: 13px; color: rgba(255,255,255,.75); }
.pk__summary .btn { background: var(--cyan); color: var(--ink); border-color: var(--cyan); }
.pk__summary .btn:hover { background: var(--paper); border-color: var(--paper); }

/* Narrow screens: one column; the summary is a bar that sticks to the bottom of the screen while the builder is
   in view and rests under the options at its end. */
@media (max-width: 900px) {
  .pk, .pk.is-ready { grid-template-columns: minmax(0, 1fr); }
  .pk__summary { top: auto; bottom: 0; z-index: 5; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 4px 14px; margin: 0 calc(var(--gutter) * -1); padding: 12px var(--gutter) calc(12px + env(safe-area-inset-bottom, 0px)); border-radius: var(--r-lg) var(--r-lg) 0 0; }
  .pk__summary .eyebrow, .pk__terms { display: none; }
  .pk__items { grid-column: 1 / -1; display: block; padding: 0; border: 0; font-size: 13px; font-weight: 500; }
  .pk__items li { display: inline; }
  .pk__items li span:last-child { display: none; }
  .pk__items li + li::before { content: " + "; }
  .pk__total { font-size: 30px; }
  .pk__total .cur { font-size: 16px; }
  .pk__total small { font-size: 13px; }
  .pk__total { white-space: nowrap; }
  /* Long button texts (German, Finnish) wrap instead of pushing the total away. */
  .pk__summary .btn { width: auto; min-width: 0; justify-self: end; min-height: 48px; padding: 8px 16px; font-size: 15px; white-space: normal; line-height: 1.2; }
  .pk__summary .btn svg { display: none; }
}
@media (max-width: 640px) {
  .pk__plans { grid-template-columns: 1fr; }
  .pk-plan { grid-template-columns: auto 1fr; column-gap: 14px; padding: 18px 16px 14px; }
  .pk-plan__who, .pk-plan__install, .pk-plan__terms { grid-column: 1 / -1; }
  .pk-plan__speed { padding-right: 0; }
  .pk-plan__price { align-self: end; font-size: 22px; padding-right: 36px; /* the radio button */ }
}
@media (max-width: 400px) {
  .pk-plan { grid-template-columns: minmax(0, 1fr); }
  .pk-plan__speed { padding-right: 36px; }
  .pk-plan__price { padding-right: 0; }
  .pk-line { padding-inline: 6px; }
  .pk-line__price small { font-size: 12px; }
  .pk__total { font-size: 26px; }
  .pk__summary .btn { padding-inline: 12px; font-size: 14px; }
}
@media (min-width: 1600px) {
  .pk__summary { padding: 32px; gap: 16px; }
  .pk__items { font-size: 18px; }
  .pk__total { font-size: 64px; }
  .pk__total .cur { font-size: 30px; }
  .pk__terms { font-size: 15px; }
}

/* ==== resources/css/070-which-plan-cards.css ==== */
/* ---------- which plan cards ---------- */
.which { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.wcard { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: grid; gap: 14px; align-content: start; }
.wcard__speed { justify-self: start; font-family: var(--font-display); font-weight: 700; font-size: 20px; padding: 6px 16px; border-radius: 999px; border: 1.5px solid var(--cyan); color: var(--ink); background: var(--cyan-tint); }
.wcard__photo { aspect-ratio: 16 / 9; border-radius: var(--r-md); overflow: hidden; background: var(--mist); }
.wcard__photo img { width: 100%; height: 100%; object-fit: cover; }
.wcard h3 { font-size: 20px; }
.wcard p { color: var(--muted); font-size: 15px; }
.wcard__icons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; padding-top: 14px; border-top: 2px solid var(--cyan); margin-top: 4px; }
.wcard__icons div { display: grid; justify-items: center; gap: 6px; font-size: 11px; color: var(--muted); text-align: center; overflow-wrap: anywhere; }
.wcard__icons svg { width: 24px; height: 24px; color: var(--ink); }
@media (max-width: 900px) { .which { grid-template-columns: 1fr; max-width: 520px; margin-inline: auto; } }

.helpband { margin-top: 28px; background: var(--cyan-tint); border: 1px solid var(--cyan-line); border-radius: var(--r-lg); padding: 22px 26px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.helpband__icon { width: 56px; height: 56px; border-radius: 50%; background: var(--paper); display: grid; place-items: center; color: var(--cyan-text); flex: none; }
.helpband__icon svg { width: 28px; height: 28px; }
.helpband b { font-family: var(--font-display); font-size: 20px; display: block; }
.helpband p { color: var(--muted); }
.helpband .btn { margin-left: auto; }
@media (max-width: 640px) { .helpband .btn { margin-left: 0; width: 100%; } }

/* ==== resources/css/090-steps.css ==== */
/* ---------- steps ---------- */
.steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; position: relative; }
.steps::before { content: ""; position: absolute; left: 10%; right: 10%; top: 34px; height: 2px; background: var(--cyan-line); }
.step { display: grid; justify-items: center; text-align: center; gap: 10px; position: relative; }
.step__icon { width: 70px; height: 70px; border-radius: 50%; background: var(--paper); border: 2px solid var(--cyan); display: grid; place-items: center; color: var(--ink); position: relative; z-index: 1; }
.step__icon svg { width: 30px; height: 30px; }
.step b { font-family: var(--font-display); font-size: 16px; }
.step p { font-size: 13px; color: var(--muted); max-width: 22ch; }
@media (max-width: 900px) {
  .steps { grid-template-columns: 1fr; gap: 6px; }
  .steps::before { left: 34px; right: auto; top: 0; bottom: 0; width: 2px; height: auto; }
  .step { grid-template-columns: 70px 1fr; justify-items: start; text-align: left; align-items: center; column-gap: 14px; }
  .step b { grid-column: 2; } .step p { grid-column: 2; max-width: none; } .step__icon { grid-row: 1 / 3; }
}
.stepband { margin-top: 36px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 18px 22px; display: flex; align-items: center; gap: 16px; flex-wrap: wrap; max-width: 680px; margin-inline: auto; }
.stepband__icon { width: 44px; height: 44px; border-radius: 50%; background: var(--cyan); color: var(--ink); display: grid; place-items: center; flex: none; }
.stepband__icon svg { width: 22px; height: 22px; }
.stepband b { font-family: var(--font-display); display: block; }
.stepband p { font-size: 14px; color: var(--muted); }
.stepband .btn { margin-left: auto; }
@media (max-width: 640px) { .stepband .btn { margin-left: 0; width: 100%; } }

/* ==== resources/css/100-support-stats.css ==== */
/* ---------- support stats ---------- */
.stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.stat { background: var(--paper); border-radius: var(--r-lg); padding: 26px 24px; border-top: 4px solid var(--cyan); }
.stat strong { font-family: var(--font-display); font-size: clamp(34px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.03em; line-height: 1; display: block; }
.stat span { display: block; margin-top: 8px; color: var(--muted); font-size: 14px; }
@media (max-width: 900px) { .stats { grid-template-columns: repeat(2, 1fr); } }

/* ==== resources/css/110-reviews.css ==== */
/* ---------- reviews ---------- */
.reviews { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.review { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 14px; align-content: start; }
.review__stars { color: var(--cyan); display: flex; gap: 2px; }
.review__stars svg { width: 18px; height: 18px; }
.review p { font-size: 16px; line-height: 1.55; }
.review footer { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; color: var(--muted); border-top: 1px solid var(--line); padding-top: 12px; }
.review footer b { color: var(--ink); font-weight: 600; }
.review[hidden] { display: none; }
.reviews-summary { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; color: var(--ink); }
.reviews-summary svg { width: 18px; height: 18px; }
.reviews-summary svg:first-child { color: var(--cyan); }
.reviews-summary:hover { text-decoration: underline; }
.sample { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); background: var(--mist); padding: 4px 10px; border-radius: 999px; }
@media (max-width: 900px) { .reviews { grid-template-columns: 1fr; } }
.reviews--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
@media (max-width: 900px) { .reviews--6 { grid-template-columns: 1fr 1fr; } }
@media (max-width: 600px) { .reviews--6 { grid-template-columns: 1fr; } }

/* ==== resources/css/120-teasers.css ==== */
/* ---------- teasers ---------- */
.teasers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.teaser { background: var(--ink); color: var(--paper); border-radius: var(--r-xl); padding: clamp(26px, 3.5vw, 44px); display: grid; gap: 14px; align-content: start; position: relative; overflow: hidden; }
.teaser::after { content: ""; position: absolute; right: -60px; bottom: -60px; width: 220px; height: 220px; border-radius: 50%; border: 36px solid var(--cyan); opacity: .9; }
.teaser__icon { width: 56px; height: 56px; border-radius: 12px; background: var(--cyan); color: var(--ink); display: grid; place-items: center; }
.teaser__icon svg { width: 30px; height: 30px; }
.teaser h3 { font-size: clamp(24px, 2.6vw, 32px); }
/* Text above the decorative ring. */
.teaser h3, .teaser p { position: relative; z-index: 1; }
.teaser p { color: rgba(255,255,255,.75); max-width: 40ch; }
.teaser .btn { justify-self: start; position: relative; z-index: 1; }
.btn--onink { background: var(--paper); color: var(--ink); border-color: var(--paper); }
.btn--onink:hover { background: var(--cyan); border-color: var(--cyan); }
@media (max-width: 760px) { .teasers { grid-template-columns: 1fr; } }

/* ==== resources/css/130-coverage.css ==== */
/* ---------- coverage ---------- */
.coverage { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(28px, 5vw, 64px); align-items: center; }
.areas { display: flex; flex-wrap: wrap; gap: 8px; }
.areas span, .areas a { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; background: var(--paper); border: 1px solid var(--line-2); font-size: 14px; font-weight: 500; }
.areas svg { width: 14px; height: 14px; color: var(--cyan); }
.map { aspect-ratio: 4 / 3; border-radius: var(--r-lg); background:
  linear-gradient(var(--line) 1px, transparent 1px) 0 0 / 40px 40px,
  linear-gradient(90deg, var(--line) 1px, transparent 1px) 0 0 / 40px 40px, var(--paper);
  border: 1px solid var(--line); display: grid; place-items: center; text-align: center; color: var(--muted); font-size: 14px; padding: 20px; position: relative; overflow: hidden; }
.map__pin { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: var(--cyan); box-shadow: 0 0 0 8px rgba(0,186,217,.25); }
@media (max-width: 860px) { .coverage { grid-template-columns: 1fr; } }
/* Chips that link to a town page (not in the prototype, which only has plain chips). */
.areas a { transition: border-color .15s, color .15s; }
.areas a:hover { border-color: var(--cyan); color: var(--cyan-text); }

/* Live map (Leaflet, resources/map/map.js). Before it starts, .map shows the grid and the office links. */
.map__fallback { display: grid; gap: 10px; justify-items: center; }
.map.is-live { display: block; padding: 0; place-items: initial; }
.map.is-live .leaflet-tile-pane { filter: grayscale(1) contrast(.95) brightness(1.04); }
.map .leaflet-container, .map.leaflet-container { font: inherit; background: var(--mist); }
.map__office { width: 18px; height: 18px; border-radius: 50%; background: var(--cyan); border: 3px solid var(--paper); box-shadow: 0 0 0 7px rgba(0,186,217,.28), 0 2px 6px rgba(0,0,0,.25); }
/* The marker is a 24px touch target (WCAG 2.5.8); the visible dot is 10px in its centre. */
.map__town { display: grid; place-items: center; cursor: pointer; }
.map__town::before { content: ""; box-sizing: border-box; width: 10px; height: 10px; border-radius: 50%; background: var(--ink); border: 2px solid var(--paper); box-shadow: 0 1px 3px rgba(0,0,0,.3); }
.map .leaflet-popup-content { font-size: 14px; line-height: 1.45; margin: 12px 16px; }
.map .leaflet-popup-content a { color: var(--cyan-text); font-weight: 600; }
.map .leaflet-control-attribution { font-size: 11px; }
.map__editor { background: var(--paper); border: 1px solid var(--line-2); border-radius: var(--r-sm); padding: 8px 10px; font-size: 12px; max-width: 320px; }
.map__editor pre { margin: 4px 0 0; white-space: pre-wrap; user-select: all; }

/* ==== resources/css/140-cta-band.css ==== */
/* ---------- CTA band ---------- */
.ctaband { background: var(--ink); color: var(--paper); border-radius: var(--r-xl); padding: clamp(32px, 5vw, 64px); display: grid; grid-template-columns: minmax(0, 1.2fr) auto; gap: 28px; align-items: center; }
.ctaband h2 { font-size: clamp(28px, 3.6vw, 42px); }
.ctaband p { color: rgba(255,255,255,.75); margin-top: 10px; max-width: 48ch; }
.ctaband__btns { display: flex; gap: 12px; flex-wrap: wrap; }
.btn--outline-light { background: transparent; color: var(--paper); border-color: rgba(255,255,255,.5); }
.btn--outline-light:hover { border-color: var(--paper); background: rgba(255,255,255,.08); }
@media (max-width: 760px) { .ctaband { grid-template-columns: 1fr; } .ctaband__btns .btn { flex: 1 1 200px; } }

/* ==== resources/css/150-generic-content-blocks.css ==== */
/* ---------- generic content blocks ---------- */
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px; }
@media (max-width: 900px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: 1fr; } }
@media (max-width: 640px) { .grid-2 { grid-template-columns: 1fr; } .grid-4 { grid-template-columns: 1fr; } }
.tile { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 10px; align-content: start; }
.tile__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--cyan-tint); color: var(--cyan-text); display: grid; place-items: center; }
.tile__icon svg { width: 26px; height: 26px; }
/* Tiles right under the page title use h2, tiles inside a section h3; both look the same. */
.tile h2, .tile h3 { font-size: 19px; }
.tile p { color: var(--muted); font-size: 15px; }
.page-hero { padding-block: clamp(40px, 6vw, 72px) clamp(28px, 4vw, 48px); display: grid; gap: 16px; }
.page-hero .lead { max-width: 62ch; }

/* comparison table */
.table-wrap { overflow-x: auto; border: 1.5px solid var(--line); border-radius: var(--r-lg); background: var(--paper); }
table.compare { width: 100%; border-collapse: collapse; min-width: 640px; font-size: 15px; }
.compare th, .compare td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--line); }
.compare thead th { font-family: var(--font-display); font-size: 24px; letter-spacing: -0.02em; background: var(--mist); }
.compare thead th.popular { background: var(--cyan-tint); box-shadow: inset 0 3px 0 var(--cyan); }
.compare tbody tr:last-child td { border-bottom: 0; }
.compare td:first-child { color: var(--muted); }
.compare td.yes { font-weight: 600; }
.compare th:first-child, .compare td:first-child { position: sticky; left: 0; z-index: 1; background: var(--paper); box-shadow: 1px 0 0 var(--line); }
.compare thead th:first-child, .compare thead td:first-child { background: var(--mist); } /* corner cell is a td: a th must not be empty */
@media (max-width: 900px) { .table-wrap { -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 48px), transparent); } }

/* faq accordion */
.faq { display: grid; gap: 10px; max-width: 820px; margin-inline: auto; }
.faq details { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-md); padding: 0 20px; }
.faq details[open] { border-color: var(--cyan); }
.faq summary { list-style: none; cursor: pointer; padding-block: 18px; font-family: var(--font-display); font-weight: 700; font-size: 17px; display: flex; justify-content: space-between; gap: 16px; align-items: center; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary svg { width: 20px; height: 20px; flex: none; transition: transform .2s; color: var(--cyan-text); }
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details p { padding-bottom: 18px; color: var(--muted); }

/* forms */
.form { display: grid; gap: 14px; }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; align-items: start; }
@media (max-width: 520px) { .form__row { grid-template-columns: 1fr; } }
.field { display: grid; gap: 6px; align-content: start; }
.field label { font-size: 13px; font-weight: 600; }
.field input, .field select, .field textarea { width: 100%; min-height: 48px; padding: 10px 14px; border: 1.5px solid var(--line-2); border-radius: var(--r-sm); background: var(--paper); font: inherit; color: var(--ink); }
.field input:focus, .field select:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-tint); }
.check { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; color: var(--muted); }
.check input { width: 18px; height: 18px; min-height: 0; padding: 0; margin: 1px 0 0; accent-color: var(--cyan); flex: none; } /* min-height, padding, side margins: undo .field input and the browser default */
.check + .field__hint { padding-left: 28px; } /* notice under a checkbox lines up with its label text */
.form__ok { text-align: center; display: grid; gap: 10px; justify-items: center; padding-block: 20px; }
.form__ok svg { width: 56px; height: 56px; color: var(--cyan); }
.form__ok-title { font-family: var(--font-display); font-weight: 700; font-size: 24px; letter-spacing: normal; line-height: normal; } /* b in forms, h1 on the thanks page: same look */
.form__ok p { color: var(--muted); }
.card-form { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3vw, 32px); }

/* modal */
dialog.modal { border: 0; padding: 0; border-radius: var(--r-lg); width: min(560px, calc(100vw - 32px)); background: var(--paper); color: var(--ink); box-shadow: 0 30px 80px rgba(0,0,0,.25); }
dialog.modal::backdrop { background: rgba(0,0,0,.5); }
.modal__in { padding: clamp(22px, 3vw, 32px); display: grid; gap: 18px; }
.modal__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; }
.modal__head h3 { font-size: 24px; }
.modal__head p { color: var(--muted); font-size: 14px; margin-top: 6px; }

/* contact */
.contact-card { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 24px; display: grid; gap: 14px; align-content: start; }
.contact-card h3 { font-size: 18px; }
.phone-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.phone-row:last-child { border-bottom: 0; }
.phone-row span { color: var(--muted); font-size: 14px; }
.phone-row a { font-family: var(--font-display); font-weight: 700; font-size: 17px; white-space: nowrap; }
.office { display: grid; gap: 4px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.office:last-child { border-bottom: 0; }
.office b { font-family: var(--font-display); }
.office span { color: var(--muted); font-size: 14px; }
.office__map { display: inline-flex; align-items: center; gap: 5px; font-size: 14px; font-weight: 600; color: var(--cyan-text); justify-self: start; }
.office__map svg { width: 14px; height: 14px; }
.office__map:hover { text-decoration: underline; }
.lp-office__actions { display: flex; flex-wrap: wrap; gap: 10px; }
.tag { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); background: var(--mist); padding: 3px 8px; border-radius: 4px; }

/* legal / prose */
.prose { max-width: 72ch; display: grid; gap: 18px; }
.prose h2 { font-size: 24px; margin-top: 12px; }
.prose p { color: var(--muted); }
.prose .box { background: var(--mist); border-radius: var(--r-md); padding: 16px 20px; color: var(--ink); font-size: 14px; }

/* 404 */
.nf { padding-block: clamp(64px, 12vw, 140px); display: grid; justify-items: center; gap: 18px; text-align: center; }
.nf .code { font-family: var(--font-display); font-size: clamp(90px, 18vw, 180px); font-weight: 700; letter-spacing: -0.05em; line-height: .9; }
.nf .code span { color: var(--cyan); }

/* ==== resources/css/160-footer.css ==== */
/* ---------- footer ---------- */
.footer { background: var(--ink); color: var(--paper); padding-block: clamp(48px, 6vw, 72px) 28px; }
.footer__grid { display: grid; grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer__brand { display: grid; gap: 18px; align-content: start; }
.footer__brand img { height: 30px; width: auto; }
.footer__slogan { font-family: var(--font-display); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.15; }
.footer__slogan span { color: var(--cyan); }
.footer h2 { font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: 14px; }
.footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; font-size: 15px; }
.footer li a:hover { color: var(--cyan); }
.footer li span { color: rgba(255,255,255,.55); font-size: 13px; display: block; }
.footer__bottom { margin-top: 40px; padding-top: 22px; border-top: 1px solid rgba(255,255,255,.15); display: flex; flex-wrap: wrap; gap: 14px 24px; justify-content: space-between; font-size: 13px; color: rgba(255,255,255,.55); }
.footer__langs { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.footer__langs a { background: none; border: 0; color: rgba(255,255,255,.7); cursor: pointer; padding: 2px 0; font-size: 13px; }
.footer__langs a.is-active { color: var(--cyan); font-weight: 600; }
.footer__langs a:hover { color: var(--paper); }
@media (max-width: 960px) { .footer__grid { grid-template-columns: 1fr 1fr; } .footer__brand { grid-column: 1 / -1; } }
@media (max-width: 480px) { .footer__grid { grid-template-columns: 1fr; } }

/* cookie banner */
.cookie { position: fixed; left: 16px; right: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); z-index: 90; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg); box-shadow: 0 20px 50px rgba(0,0,0,.18); padding: 18px 20px; display: flex; gap: 16px; align-items: center; flex-wrap: wrap; max-width: 920px; margin-inline: auto; }
.cookie[hidden] { display: none; }
.cookie p { flex: 1 1 320px; font-size: 14px; color: var(--muted); }
.cookie__btns { display: flex; gap: 8px; flex-wrap: wrap; }

/* ==== resources/css/175-responsive-header.css ==== */
/* responsive header */
@media (max-width: 1599px) { .nav a { padding-inline: 9px; font-size: 14px; } }
.btn--pay svg { color: var(--cyan-text); }
@media (max-width: 1280px) { .header__phone span { display: none; } .nav a { padding-inline: 6px; } .header__in { gap: 16px; } .header__tools { gap: 8px; } }
@media (max-width: 1719px) { .btn--pay span { display: none; } .btn--pay { padding-inline: 10px; } }
@media (max-width: 1100px) {
  .nav, .header__tools .btn, .header__phone { display: none; }
  .lang__btn { min-height: 44px; padding: 8px 10px; }
  .lang__menu { min-width: min(300px, calc(100vw - 32px)); }
  .burger { display: inline-flex; }
  .header__in { gap: 12px; }
}

/* ==== resources/css/180-wide-screens.css ==== */
/* =====================================================================
   WIDE SCREENS (≥1600px CSS width: FHD, QHD, 4K)
   Fluid layout: content stretches to ~92% of the viewport, larger type, full-bleed hero photo.
   ===================================================================== */
@media (min-width: 1600px) {
  :root {
    --gutter: clamp(40px, 4vw, 110px);
    --header-h: 84px;
    & body { font-size: 17px; }
    & .h1 { font-size: clamp(68px, 4.8vw, 108px); }
    & .h2 { font-size: clamp(44px, 2.9vw, 66px); }
    & .h3 { font-size: clamp(26px, 1.6vw, 34px); }
    & .lead { font-size: clamp(19px, 1.15vw, 24px); max-width: 56ch; }
    & .eyebrow { font-size: 15px; }
    & .section { padding-block: clamp(96px, 7vw, 150px); }
    & .section--tight { padding-block: clamp(48px, 4vw, 80px); }
    & .section-head { margin-bottom: clamp(40px, 3.5vw, 64px); gap: 18px; }
    /* header */
    & .logo img { height: 36px; }
    & .nav a { font-size: 17px; padding: 10px 16px; }
    & .header__phone { font-size: 17px; }
    & .header__tools .btn--sm { min-height: 48px; padding: 10px 22px; font-size: 15px; }
    & .lang__btn { min-height: 48px; font-size: 15px; }
    /* buttons */
    & .btn { font-size: 16px; }
    & .btn--lg { min-height: 64px; padding: 16px 36px; font-size: 18px; }
    /* hero */
    & .hero__grid { gap: clamp(48px, 5vw, 120px); }
    & .hero__copy { gap: 28px; }
    & .pricestrip strong { font-size: 34px; }
    & .pricestrip b { font-size: 22px; }
    & .pricestrip__item { padding: 14px 24px; }
    & .pricestrip__badge { font-size: 11px; }
    & .checks li { font-size: 17px; }
    & .checks svg { width: 24px; height: 24px; }
    & .hero__areas { font-size: 16px; }
    /* feature strip */
    & .features { gap: 32px; }
    & .feature__icon { width: 88px; height: 88px; }
    & .feature__icon svg { width: 40px; height: 40px; }
    & .feature b { font-size: 20px; }
    & .feature p { font-size: 16px; max-width: 26ch; }
    /* plans */
    & .plans { gap: 32px; }
    & .plan { padding: 48px 40px 40px; gap: 24px; }
    & .plan__speed { font-size: 60px; }
    & .plan__speed small { font-size: 24px; }
    & .plan__price { font-size: 80px; }
    & .plan__price .cur { font-size: 36px; }
    & .plan__price small { font-size: 18px; }
    & .plan__who { font-size: 18px; }
    & .plan__tags svg { width: 34px; height: 34px; }
    & .plan__tags div { font-size: 14px; }
    & .plan__install { font-size: 16px; padding: 10px 18px; }
    & .plan__badge { font-size: 14px; padding: 8px 18px; top: -16px; }
    & .symmetric { max-width: 960px; padding: 26px 32px; margin-top: 40px; }
    & .symmetric b { font-size: 22px; }
    & .symmetric p { font-size: 16px; }
    & .fine { font-size: 15px; }
    /* which */
    & .which { gap: 32px; }
    & .wcard { padding: 30px; gap: 18px; }
    & .wcard h3 { font-size: 26px; }
    & .wcard p { font-size: 17px; }
    & .wcard__icons svg { width: 30px; height: 30px; }
    & .wcard__icons div { font-size: 13px; }
    & .wcard__speed { font-size: 24px; padding: 8px 20px; }
    & .helpband { padding: 30px 36px; margin-top: 40px; }
    & .helpband b { font-size: 26px; }
    & .helpband p { font-size: 17px; }
    /* install */
    /* steps */
    & .step__icon { width: 88px; height: 88px; }
    & .step__icon svg { width: 38px; height: 38px; }
    & .steps::before { top: 43px; }
    & .step b { font-size: 19px; }
    & .step p { font-size: 15px; max-width: 26ch; }
    & .stepband { max-width: 860px; padding: 24px 30px; }
    /* stats, reviews, teasers, coverage, cta */
    & .stats { gap: 24px; }
    & .stat { padding: 36px 32px; }
    & .stat strong { font-size: clamp(52px, 3.2vw, 72px); }
    & .stat span { font-size: 16px; }
    & .reviews { gap: 28px; }
    & .review { padding: 32px; }
    & .review p { font-size: 19px; }
    & .teasers { gap: 28px; }
    & .teaser h3 { font-size: clamp(32px, 2.2vw, 44px); }
    & .teaser p { font-size: 18px; max-width: 46ch; }
    & .areas span, & .areas a { font-size: 16px; padding: 10px 18px; }
    & .ctaband { padding: clamp(56px, 4.5vw, 96px); }
    & .ctaband h2 { font-size: clamp(40px, 2.8vw, 60px); }
    & .ctaband p { font-size: 19px; }
    /* pages */
    & .tile { padding: 32px; }
    & .tile h2, & .tile h3 { font-size: 22px; }
    & .tile p { font-size: 17px; }
    & .compare th, & .compare td { padding: 20px 28px; font-size: 17px; }
    & .compare thead th { font-size: 30px; }
    & .faq { max-width: 1000px; }
    & .faq summary { font-size: 20px; }
    & .faq details p { font-size: 17px; }
    & .footer__grid { gap: 48px; }
    & .footer ul { font-size: 16px; }
    & .footer__slogan { font-size: 26px; }
  }

  /* ---- Variant A: fluid, ~92vw ---- */
  :root {
    --container: 100%;
    & .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
    & .photo-bubble { aspect-ratio: 720 / 560; }
  }

}


/* Fluid variant: full-bleed hero — photo runs to the right screen edge and fades into white behind the copy */
@media (min-width: 1600px) {
  :root {
    & .hero { position: relative; padding-block: 0; min-height: clamp(680px, 38vw, 900px); display: flex; align-items: center; overflow: hidden; }
    & .hero__grid { grid-template-columns: minmax(0, 44%) minmax(0, 1fr); gap: 0; width: 100%; padding-block: clamp(64px, 5vw, 96px); }
    & .hero__copy { position: relative; z-index: 2; }
    & .hero__media { position: absolute; top: 0; right: 0; bottom: 0; left: auto; width: 60%; height: 100%; }
    & .hero__media::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(90deg, #fff 0%, rgba(255,255,255,.9) 7%, rgba(255,255,255,0) 22%); }
    & .photo-bubble { -webkit-mask: none; mask: none; aspect-ratio: auto; width: 100%; height: 100%; }
    & .photo-bubble img { object-position: 70% center; }
  }
}

/* ==== resources/css/181-hero-stacked.css ==== */
/* Stacked hero (phones and tablets): copy and CTAs first, photo after them in a short 16:9 format */
@media (max-width: 900px) {
  .hero { padding-top: 28px; }
  .hero__media { order: 1; max-width: none; }
  .photo-bubble { aspect-ratio: 16 / 9; max-height: 420px; }
  .photo-bubble img { object-position: 60% 40%; }
  .hero__grid { gap: 28px; }
}

/* ==== resources/css/182-long-words.css ==== */
/* Long-word safety for German / Dutch / Nordic / Finnish compounds on small screens */
h1, h2, h3, .stat span, .feature b, .step b, .tile h2, .tile h3 { overflow-wrap: anywhere; }
@media (max-width: 640px) { h1, h2, h3, .stat span, .feature b, .step b, .tile h2, .tile h3 { hyphens: auto; -webkit-hyphens: auto; } }
@media (max-width: 640px) {
  .btn { white-space: normal; line-height: 1.25; }
  .h1 { font-size: clamp(30px, 9.6vw, 44px); }
  .stat { padding: 22px 18px; }
}

/* ==== resources/css/183-plan-details.css ==== */
/* highlight the plan card a hero price tile jumped to */
.plan.is-flash { animation: planFlash 1.6s ease-out; }
@keyframes planFlash { 0% { box-shadow: 0 0 0 0 rgba(0,186,217,0); } 15% { box-shadow: 0 0 0 6px rgba(0,186,217,.45); } 100% { box-shadow: 0 0 0 6px rgba(0,186,217,0); } }

@media (max-width: 360px) { .pricestrip__badge { font-size: 8px; letter-spacing: .03em; padding: 3px 6px; } }

/* audit follow-ups */
.pricestrip__note { display: block; font-size: 11px; font-weight: 600; color: var(--muted); font-style: normal; margin-top: 2px; }
.pricestrip__chev { position: absolute; right: 8px; top: 8px; width: 16px; height: 16px; color: var(--line-2); transition: color .15s, transform .15s; }
.pricestrip__chev svg { width: 16px; height: 16px; }
.pricestrip__item:hover .pricestrip__chev { color: var(--ink); transform: translateX(2px); }
@media (max-width: 640px) { .pricestrip__chev { right: 5px; top: 5px; width: 12px; height: 12px; } .pricestrip__chev svg { width: 12px; height: 12px; } .pricestrip__note { font-size: 10px; } }
.plan__terms { font-size: 13px; color: var(--muted); }
.plan__saving { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-size: 14px; font-weight: 600; color: var(--ink); }
.plan__saving svg { width: 18px; height: 18px; flex: none; }
.field__hint { font-size: 12px; color: var(--muted); }
.form__selected { display: flex; align-items: center; gap: 10px; background: var(--cyan-tint); border: 1px solid var(--cyan-line); border-radius: var(--r-sm); padding: 10px 14px; font-size: 14px; margin-bottom: 14px; flex-wrap: wrap; }
.form__selected svg { width: 20px; height: 20px; flex: none; }
.form__selected span { flex: 1 1 auto; }
.form__selected .link { background: none; border: 0; cursor: pointer; font: inherit; font-weight: 600; }

/* ==== resources/css/184-startstop.css ==== */
/* Start/Stop page */
.plans--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 840px; margin-inline: auto; }
@media (max-width: 900px) { .plans--2 { grid-template-columns: 1fr; max-width: 520px; } }
.steps--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.steps--4::before { left: 12.5%; right: 12.5%; }
@media (max-width: 900px) { .steps--4 { grid-template-columns: 1fr; } .steps--4::before { left: 34px; right: auto; } }

/* ==== resources/css/190-mobile-plans.css ==== */
/* ---------- mobile plans (compact, 5 + 3 cards) ---------- */
.plans--mob { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.plans--mob .plan { flex: 1 1 176px; max-width: 250px; min-width: 0; padding: 26px 18px 22px; gap: 14px; }
.plans--mob .plan__speed { font-size: 34px; padding-bottom: 14px; }
.plans--mob .plan__price { font-size: 40px; }
.plans--mob .plan__price .cur { font-size: 20px; }
.plans--mob .plan__price small { display: block; margin: 6px 0 0; font-size: 14px; }
.plans--mob .plan__who { font-size: 14px; min-height: 0; }
.plans--mob .plan .btn { padding-inline: 12px; }
@media (max-width: 1023px) { .plans--mob .plan { flex-basis: 30%; } }
@media (max-width: 900px) { .plans.plans--mob { max-width: none; } }
@media (max-width: 640px) { .plans--mob { gap: 12px; } .plans--mob .plan { flex-basis: calc(50% - 6px); max-width: calc(50% - 6px); padding: 22px 12px 18px; } .plans--mob .plan__speed { font-size: 30px; } .plans--mob .plan__price { font-size: 34px; } .plans--mob .plan .btn { font-size: 14px; } }
@media (max-width: 360px) { .plans--mob .plan { flex-basis: 100%; max-width: none; } }
.countries { margin-top: 28px; background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 24px 28px; }
.countries h3 { font-family: var(--font-display); font-size: 18px; margin-bottom: 14px; }
.countries__list { display: flex; flex-wrap: wrap; gap: 8px; }
.countries__list span { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 999px; background: var(--mist); font-size: 14px; font-weight: 500; }
.countries__list span svg { width: 12px; height: 12px; color: var(--cyan-text); }
.countries p { margin-top: 14px; font-size: 14px; color: var(--muted); }
.doclinks { display: flex; flex-wrap: wrap; gap: 10px 28px; margin-top: 22px; }
.doclinks .link svg { width: 18px; height: 18px; }
.steps--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; }
.steps--3::before { left: 16.6%; right: 16.6%; }
@media (max-width: 900px) { .steps--3 { grid-template-columns: 1fr; } .steps--3::before { left: 34px; right: auto; } .countries { padding: 20px 18px; } }

/* ==== resources/css/200-landline.css ==== */
/* ---------- landline ---------- */
.plans--1 { grid-template-columns: minmax(0, 1fr); max-width: 440px; margin-inline: auto; }
.plan__list { list-style: none; display: grid; gap: 10px; text-align: left; padding: 0; margin: 0; }
.plan__list li { display: flex; gap: 10px; align-items: flex-start; font-size: 15px; }
.plan__list svg { width: 18px; height: 18px; color: var(--cyan-text); flex: none; margin-top: 2px; }
.plan .plan__list + .btn { margin-top: 8px; }

/* Compare table: hidden on phones (portrait and landscape); the plan cards carry the same facts */
@media (max-width: 640px), (max-width: 900px) and (max-height: 500px) { .section--compare { display: none; } }

/* ==== resources/css/210-landing-pages.css ==== */
/* ---------- landing pages ---------- */
.header--lp .header__tools { margin-left: auto; }
.footer--lp { padding-block: 40px 24px; }
.footer--lp__row { display: flex; flex-wrap: wrap; align-items: center; gap: 20px 40px; margin-bottom: 20px; }
.footer--lp .logo img { height: 28px; }
.footer--lp__contacts { display: flex; flex-wrap: wrap; gap: 8px 22px; font-size: 14px; color: rgba(255,255,255,.8); }
.footer--lp__contacts a, .footer--lp__contacts span { display: inline-flex; align-items: center; gap: 6px; color: inherit; }
.footer--lp__contacts a:hover { color: var(--cyan); }
.footer--lp__contacts svg { width: 15px; height: 15px; color: var(--cyan); }
.footer--lp__links { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 14px; margin-left: auto; }
.footer--lp__links a { color: rgba(255,255,255,.75); }
.footer--lp .footer__copy { font-size: 12px; color: rgba(255,255,255,.5); border-top: 1px solid rgba(255,255,255,.12); padding-top: 16px; }
.lp-badges { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 10px; }
.lp-badges li { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; background: var(--mist); border-radius: 999px; padding: 7px 12px; }
.lp-badges svg { width: 15px; height: 15px; color: var(--cyan-text); }
.lp-ends { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 14px; color: var(--cyan-text); background: var(--cyan-tint); border-radius: 999px; padding: 8px 14px; justify-self: start; }
.lp-ends svg { width: 16px; height: 16px; }
.stats--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); max-width: 960px; margin-inline: auto; }
.tile--pain { text-align: left; }
.tile--pain p { color: var(--ink); font-size: 16px; font-weight: 500; }
.lp-about { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 28px; align-items: start; }
.lp-about__text { display: grid; gap: 14px; font-size: 17px; color: var(--muted); }
.lp-office { background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-lg); padding: 26px; display: grid; gap: 10px; justify-items: start; }
.lp-office__icon { width: 48px; height: 48px; border-radius: 12px; background: var(--cyan-tint); color: var(--cyan-text); display: grid; place-items: center; }
.lp-office__icon svg { width: 24px; height: 24px; }
.lp-office h3 { font-size: 20px; }
.lp-about-band { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 32px; align-items: center; }
.lp-about-band__flags { display: flex; flex-wrap: wrap; gap: 8px; }
.lp-about-band__flags span { display: inline-flex; align-items: center; gap: 8px; padding: 8px 12px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; font-weight: 500; }
.lp-about-band__flags svg { width: 18px; height: 13px; border-radius: 2px; }
.lp-ss { margin-top: 28px; background: var(--ink); color: var(--paper); border-radius: var(--r-xl); padding: clamp(24px, 3.5vw, 40px); display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 28px; align-items: center; }
.lp-ss h3 { font-size: clamp(22px, 2.4vw, 30px); margin-bottom: 8px; }
.lp-ss p { color: rgba(255,255,255,.78); }
.lp-ss .muted { color: rgba(255,255,255,.55); }
.lp-ss__plans { display: grid; gap: 12px; }
.lp-ss__plan { display: flex; justify-content: space-between; align-items: center; gap: 12px; background: rgba(255,255,255,.08); border-radius: var(--r-md); padding: 14px 18px; }
.lp-ss__plan strong { font-family: var(--font-display); font-size: 26px; color: var(--cyan); }
.lp-ss__plan small { font-size: 13px; color: rgba(255,255,255,.6); margin-left: 4px; }
.ctaband--light { background: var(--paper); color: var(--ink); border: 1.5px solid var(--cyan-line); }
.ctaband--light p { color: var(--muted); }
.lp-lead { max-width: 760px; margin-inline: auto; }
.lp-sticky { display: none; }
@media (max-width: 900px) {
  .lp-about, .lp-about-band, .lp-ss { grid-template-columns: 1fr; }
  .stats--3 { grid-template-columns: 1fr; }
  .lp-sticky { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px)); background: rgba(255,255,255,.96); border-top: 1px solid var(--line); backdrop-filter: blur(6px); }
  .lp-sticky .btn { width: 100%; }
  main:has(.lp-sticky) { padding-bottom: 76px; }
}

/* landing heroes carry longer headlines than the home page */
.hero--lp .h1 { font-size: clamp(32px, 4.2vw, 54px); }
.hero--lp .bubble { white-space: normal; max-width: 100%; }
@media (min-width: 1600px) { .hero--lp .h1 { font-size: clamp(48px, 3.4vw, 76px); } }

/* ==== resources/css/220-foldables-and-large-phones.css ==== */
/* ---------- foldables and large phones (520–900px CSS width: iPhone Duo, Xiaomi Fold, Pura X Max) ---------- */
@media (min-width: 520px) and (max-width: 900px) {
  .features { grid-template-columns: repeat(2, 1fr); gap: 22px 16px; }
  .feature:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .plans, .plans--2 { max-width: 560px; }
  .grid-4, .grid-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .reviews, .reviews--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .which { grid-template-columns: 1fr; max-width: 560px; margin-inline: auto; }
  .teasers { grid-template-columns: 1fr; }
  .lp-about-band__flags { justify-content: flex-start; }
}

/* ==== resources/css/230-offer-button.css ==== */
/* ---------- offer button: cyan, soft pulse ring and a periodic shine sweep ---------- */
.btn--offer { position: relative; overflow: hidden; background: var(--cyan); color: var(--ink); border-color: var(--cyan); font-weight: 700; isolation: isolate; animation: offerPulse 2.6s ease-out infinite; transition: transform .18s ease, filter .18s ease; }
.btn--offer svg { color: var(--ink); }
.btn--offer::after { content: ""; position: absolute; top: -20%; left: -70%; width: 45%; height: 140%; background: linear-gradient(105deg, transparent 0%, rgba(255,255,255,.65) 50%, transparent 100%); transform: skewX(-18deg); animation: offerShine 2.6s ease-in-out infinite; pointer-events: none; }
.btn--offer:hover { transform: translateY(-2px) scale(1.03); filter: brightness(1.06); }
.btn--offer:active { transform: scale(.98); }
@keyframes offerPulse { 0% { box-shadow: 0 0 0 0 rgba(0,186,217,.6); } 60% { box-shadow: 0 0 0 16px rgba(0,186,217,0); } 100% { box-shadow: 0 0 0 0 rgba(0,186,217,0); } }
@keyframes offerShine { 0%, 55% { left: -70%; } 100% { left: 130%; } }
@media (prefers-reduced-motion: reduce) { .btn--offer, .btn--offer::after { animation: none; } }

/* ==== resources/css/240-extras-upgrade-referral.css ==== */
/* ---------- extras, upgrade, referral ---------- */
.extras .plan { max-width: 320px; flex-basis: 260px; }
.plan__icon { width: 52px; height: 52px; border-radius: 14px; background: var(--cyan-tint); color: var(--cyan-text); display: grid; place-items: center; margin-inline: auto; }
.plan__icon svg { width: 26px; height: 26px; }
.faq__body { padding: 0 20px 18px; display: grid; gap: 10px; color: var(--muted); font-size: 15px; }
.faq__body b { color: var(--ink); }
.upgrade { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: clamp(28px, 4vw, 56px); align-items: center; background: var(--paper); border: 1.5px solid var(--line); border-radius: var(--r-xl); padding: clamp(24px, 4vw, 48px); }
.upgrade__text { display: grid; gap: 14px; }
.upgrade__offer { display: grid; gap: 12px; text-align: center; background: var(--mist); border-radius: var(--r-lg); padding: 26px; }
.upgrade__opt strong { display: block; font-family: var(--font-display); font-size: clamp(34px, 3.4vw, 46px); font-weight: 700; letter-spacing: -0.03em; color: var(--cyan-text); line-height: 1.05; }
.upgrade__opt span { display: block; color: var(--muted); font-size: 14px; margin-top: 4px; }
.upgrade__or { font-family: var(--font-display); font-weight: 700; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; color: var(--muted); }
.upgrade__offer .btn { margin-top: 8px; }
.referral { display: flex; align-items: center; gap: clamp(20px, 3vw, 36px); flex-wrap: wrap; background: var(--cyan-tint); border: 1.5px solid var(--cyan-line); border-radius: var(--r-xl); padding: clamp(24px, 3.5vw, 40px); }
.referral__icon { width: 64px; height: 64px; border-radius: 50%; background: var(--cyan); color: var(--ink); display: grid; place-items: center; flex: none; }
.referral__icon svg { width: 30px; height: 30px; }
.referral__text { flex: 1 1 360px; display: grid; gap: 6px; }
.referral__text h2 { font-size: clamp(22px, 2.4vw, 30px); }
.referral__text p { color: var(--muted); max-width: 60ch; }
.stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (max-width: 900px) { .upgrade { grid-template-columns: 1fr; } .referral .btn { width: 100%; } }
.extras .plan__speed { font-size: 26px; min-height: 2.6em; display: flex; align-items: center; justify-content: center; }
.plan--text .plan__speed { font-size: clamp(24px, 7vw, 34px); overflow-wrap: anywhere; }
.plan--text .plan__install { white-space: normal; text-align: center; }
.plan__tv { display: inline-flex; align-items: center; justify-content: center; gap: 7px; font-size: 13px; color: var(--muted); text-align: center; }
.plan__tv svg { width: 15px; height: 15px; color: var(--cyan-text); flex: none; }
.prose--legal { max-width: 820px; } .prose--legal h2 { font-size: 22px; margin: 28px 0 10px; } .prose--legal p, .prose--legal li { color: var(--muted); font-size: 15px; line-height: 1.6; } .prose--legal ul { padding-left: 22px; margin: 8px 0 14px; } .prose--legal strong { color: var(--ink); }
.prose--legal a { overflow-wrap: anywhere; word-break: break-word; }
.prose--legal, .prose--legal * { overflow-wrap: anywhere; min-width: 0; }
@media (max-width: 640px) { .prose--legal ol, .prose--legal ul { padding-left: 18px; } }
.footer__offices { display: grid; gap: 12px; }
.footer__offices b { display: flex; align-items: flex-start; gap: 6px; font-family: var(--font-display); font-size: 15px; color: var(--paper); }
.footer__offices b svg { width: 14px; height: 14px; color: var(--cyan); flex: none; margin-top: 3px; }
.footer__offices span { padding-left: 20px; }
.footer__offices .footer__map { display: inline-flex; align-items: center; gap: 4px; margin: 4px 0 0 20px; font-size: 13px; color: var(--cyan); }
.footer__offices .footer__map svg { width: 12px; height: 12px; color: var(--cyan); margin: 0; }
.footer__offices .footer__map:hover { color: var(--paper); }

/* ==== resources/css/245-consent.css ==== */
/* ---------- cookie settings dialog ---------- */
/* Categories use the form checkbox style (.check); the names read as small headings. */
.consent-options { display: grid; gap: 16px; }
.consent-options .check { font-size: 14px; }
.consent-options .check b { display: flex; align-items: center; gap: 8px; color: var(--ink); font-family: var(--font-display); font-size: 16px; margin-bottom: 2px; }
.consent-options .check input:disabled { opacity: .6; }
#cookieSettings .cookie__btns { justify-content: flex-end; }

/* ==== resources/css/250-forms.css ==== */
/* ---------- lead forms: states the prototype does not have (it never submits) ---------- */
/* Errors under a field and above the submit button; markup from app\helpers\LeadFields and 50-forms.js. */
.field.is-invalid input, .field.is-invalid select { border-color: var(--danger); }
.field.is-invalid input:focus, .field.is-invalid select:focus { border-color: var(--danger); box-shadow: 0 0 0 3px var(--danger-tint); }
.field.is-invalid .check input { outline: 2px solid var(--danger); outline-offset: 1px; }
.field__error { font-size: 13px; font-weight: 600; color: var(--danger); }
.form__error { font-size: 14px; color: var(--danger); background: var(--danger-tint); border-radius: var(--r-sm); padding: 10px 14px; }
.form__error[hidden] { display: none; }

/* Links inside form texts flow with the sentence: .link is inline-flex (an unbreakable box), which made the full stop
   after the privacy-policy link wrap onto its own line in Russian and kept long link texts from wrapping at all. */
.check .link, .field__hint .link { display: inline; }

/* Group heading inside a form ("Your details", "Your friend" on the referral form). */
.form__group { font-family: var(--font-display); font-weight: 700; font-size: 15px; margin-bottom: -4px; }
.form__group:not(:first-of-type) { margin-top: 6px; }

/* Sending: the button keeps its size, the label changes (data-sending). */
.form.is-sending [type="submit"] { opacity: .7; cursor: progress; }

/* Honeypot: out of sight and out of the tab order; people never fill it in. */
.form__hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }

/* Turnstile runs invisibly ("interaction-only") and takes no room until it needs a click. */
.form__captcha:not(.is-visible) { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.form__captcha.is-visible { display: flex; justify-content: center; min-height: 65px; }

/* ==== resources/css/255-legal.css ==== */
/* ---------- legal texts: cookie tables (not in the prototype, whose legal pages were placeholders) ---------- */
.prose--legal h3 { font-size: 17px; margin: 18px 0 8px; }
.prose--legal .table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 6px 0 18px; }
.prose--legal table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: 14px; }
.prose--legal th, .prose--legal td { text-align: left; vertical-align: top; padding: 10px 12px; border-bottom: 1px solid var(--line); color: var(--muted); overflow-wrap: normal; }
.prose--legal th { color: var(--ink); font-weight: 600; background: var(--mist); }
/* Cookie tables: the first column is a cookie name, set as code and kept on one line. */
.prose--legal .table--cookies td:first-child { color: var(--ink); font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 13px; white-space: nowrap; }
/* Prose tables (privacy policy): four text columns; on phones one card per row, labels from data-label (views/site/legal.php). */
.prose--legal .table--stack { min-width: 0; }
.prose--legal .table--stack td:first-child { color: var(--ink); font-weight: 600; }
@media (max-width: 640px) {
  .prose--legal .table--stack thead { display: none; }
  .prose--legal .table--stack, .prose--legal .table--stack tbody, .prose--legal .table--stack tr, .prose--legal .table--stack td { display: block; }
  .prose--legal .table--stack tr { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px 0; margin-bottom: 12px; }
  .prose--legal .table--stack td { border-bottom: 0; padding: 6px 14px; }
  .prose--legal .table--stack td:first-child { font-size: 15px; }
  .prose--legal .table--stack td:not(:first-child)::before { content: attr(data-label); display: block; font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--ink); margin-bottom: 2px; }
}
.prose--legal a { color: var(--cyan-text); }
/* Links inside running text are underlined, not told apart by colour alone (WCAG 1.4.1). */
.prose--legal a, .check .link, .field__hint .link { text-decoration: underline; text-underline-offset: 2px; }

/* ==== resources/css/260-answers.css ==== */
/* ---------- answer pages (/answers) and the "at a glance" facts block: not in the prototype ---------- */
.crumbs { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding-top: 20px; font-size: 14px; color: var(--muted); }
.crumbs a { color: var(--muted); text-decoration: underline; text-underline-offset: 2px; }

.answers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.answers__item { display: grid; gap: 10px; align-content: start; background: var(--paper); border-radius: var(--r-md); padding: 22px 24px; color: inherit; border: 1px solid var(--line); transition: border-color .15s; }
.answers__item:hover { border-color: var(--cyan); }
.answers__item h2 { font-size: 19px; }
.answers__item p { color: var(--muted); font-size: 15px; }
@media (max-width: 720px) { .answers { grid-template-columns: 1fr; } }

.answer { max-width: 760px; display: grid; gap: 22px; }
.answer__short { font-size: 19px; line-height: 1.55; color: var(--ink); border-left: 4px solid var(--cyan); padding: 2px 0 2px 18px; }
.answer__body { max-width: none; gap: 14px; }
.answer__body p, .answer__body li { color: var(--muted); font-size: 16px; line-height: 1.6; }
.answer__body h2 { font-size: 20px; margin-top: 8px; }
.answer__body ul { padding-left: 22px; display: grid; gap: 6px; }
.answer__body a { color: var(--cyan-text); text-decoration: underline; text-underline-offset: 2px; }
.answer__cta { display: flex; flex-wrap: wrap; gap: 12px; }
.answer__related { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }

.facts { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 32px; }
.facts li { display: flex; gap: 12px; align-items: flex-start; font-size: 16px; line-height: 1.5; }
.facts svg { width: 20px; height: 20px; flex: none; margin-top: 2px; color: var(--cyan-text); }
@media (max-width: 720px) { .facts { grid-template-columns: 1fr; } }