/* ==========================================================================
   Call2Phone — global stylesheet  (brand refresh: C2P logo identity)
   --------------------------------------------------------------------------
   Every colour, gradient and type choice below is taken from the Call2Phone
   logo: midnight navy (#000B32), electric-blue gradient (#2BB0FF → #0A6CFF →
   #0A3FE0), white, and a geometric sans (Montserrat) for headings.

   1.  Fonts (self-hosted)
   2.  Design tokens  ← change colours, type, spacing, radius here
   3.  Reset & base
   4.  Typography
   5.  Layout helpers
   6.  Components (buttons, badges, cards, forms, tables, accordion …)
   7.  Header, logo, mega menu, mobile menu
   8.  Footer, chat widget, mobile bottom bar
   9.  Home page sections
   10. Features page
   11. Pricing page
   12. International Rates page
   13. Contact, About, Legal, simple pages
   13b. Accounts (sign up, log in, account dashboard)
   14. Motion (reveal animations)
   15. Responsive — 1200 / 1024 / 768 / 576 / 480 / 360
   16. Reduced motion & print
   ========================================================================== */


/* 1. FONTS ================================================================ */
@font-face {
  font-family: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-wght-normal.woff2") format("woff2");
  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: "Montserrat";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../fonts/montserrat-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-wght-normal.woff2") format("woff2");
  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: "Source Sans 3";
  font-style: normal;
  font-weight: 200 900;
  font-display: swap;
  src: url("../fonts/source-sans-3-latin-ext-wght-normal.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, 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;
}


/* 2. DESIGN TOKENS ======================================================== */
:root {
  /* — Brand palette (sampled from the logo) — */
  --color-navy-950:    #00061F;  /* deepest navy: footer, utility bar */
  --color-navy:        #000B32;  /* logo background: header, heroes, dark sections, headings */
  --color-navy-deep:   #00061F;  /* alias of navy-950 */
  --color-navy-800:    #06154A;  /* raised navy: newsletter band, cards on navy */
  --color-navy-700:    #0B2060;  /* chips, tiles and rules on navy */
  --color-navy-600:    #132C7A;  /* chips on navy-800 */
  --color-navy-500:    #203D92;  /* borders on navy */
  --color-blue:        #0A63F0;  /* primary brand blue: buttons, links, icons (5.2:1 on white) */
  --color-blue-hover:  #0550D8;
  --color-blue-700:    #0547C4;  /* blue text on blue tints */
  --color-blue-bright: #0A6CFF;  /* the "2" in the logo — gradient mid-stop */
  --color-blue-deep:   #0A3FE0;  /* royal blue — gradient end */
  --color-sky:         #2BB0FF;  /* logo highlight — accents and icons on navy */
  --color-sky-light:   #7CCBFF;  /* links & focus ring on navy */
  --color-green:       #0E7C4A;  /* status only: uptime, online, free */
  --color-green-hover: #0B6A3F;
  --color-green-bright:#34D399;  /* status dot on dark surfaces */
  --color-white:       #FFFFFF;

  /* — Brand gradients — */
  --gradient-brand:        linear-gradient(135deg, #2BB0FF 0%, #0A6CFF 48%, #0A3FE0 100%);
  --gradient-button:       linear-gradient(135deg, #0A6CFF 0%, #0A5AEE 55%, #0746D6 100%);
  --gradient-button-hover: linear-gradient(135deg, #0A60F4 0%, #064ED8 55%, #053BBE 100%);
  --gradient-surface:      radial-gradient(120% 140% at 100% 0%, rgba(43, 176, 255, .45) 0%, rgba(43, 176, 255, 0) 55%), linear-gradient(135deg, #0A63F0 0%, #0A52E6 50%, #0A3FD6 100%);
  --gradient-text:         linear-gradient(95deg, #2BB0FF 0%, #3A8DFF 55%, #5E86FF 100%);
  --gradient-line:         linear-gradient(90deg, rgba(43, 176, 255, 0) 0%, rgba(43, 176, 255, .55) 30%, rgba(10, 108, 255, .55) 70%, rgba(10, 108, 255, 0) 100%);
  --glow-navy:             radial-gradient(900px 520px at 88% -12%, rgba(10, 108, 255, .30), transparent 62%),
                           radial-gradient(760px 460px at -8% 115%, rgba(43, 176, 255, .14), transparent 60%);

  /* — Brand motifs (logo swoosh arcs + fibre lines), used as background images — */
  --motif-arcs: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='a' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%232BB0FF' stop-opacity='0'/%3E%3Cstop offset='.35' stop-color='%232BB0FF' stop-opacity='.75'/%3E%3Cstop offset='.75' stop-color='%230A6CFF' stop-opacity='.6'/%3E%3Cstop offset='1' stop-color='%230A3FE0' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M40 0A560 560 0 0 0 600 560' stroke='url(%23a)' stroke-width='2.5'/%3E%3Cpath d='M112 0A488 488 0 0 0 600 488' stroke='url(%23a)' stroke-width='1.5' opacity='.7'/%3E%3C/svg%3E");
  --motif-fibre: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 640 320' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='f' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%230A3FE0' stop-opacity='0'/%3E%3Cstop offset='.55' stop-color='%230A6CFF' stop-opacity='.65'/%3E%3Cstop offset='1' stop-color='%232BB0FF'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cg stroke='url(%23f)' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M0 300C170 284 330 208 500 116L540 110'/%3E%3Cpath d='M0 318C180 300 350 232 530 146L590 140'/%3E%3Cpath d='M20 320C200 306 370 256 548 180L610 176'/%3E%3Cpath d='M60 320C230 312 390 280 530 216L572 212'/%3E%3C/g%3E%3Cg fill='%232BB0FF'%3E%3Ccircle cx='540' cy='110' r='5'/%3E%3Ccircle cx='590' cy='140' r='5'/%3E%3Ccircle cx='610' cy='176' r='5'/%3E%3Ccircle cx='572' cy='212' r='5'/%3E%3Ccircle cx='500' cy='116' r='3'/%3E%3Ccircle cx='530' cy='146' r='3'/%3E%3Ccircle cx='548' cy='180' r='3'/%3E%3C/g%3E%3C/svg%3E");

  --motif-orbit: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 800 800' fill='none'%3E%3Cdefs%3E%3ClinearGradient id='h' x1='0' y1='1' x2='1' y2='0'%3E%3Cstop offset='0' stop-color='%232BB0FF' stop-opacity='0'/%3E%3Cstop offset='.3' stop-color='%232BB0FF' stop-opacity='.9'/%3E%3Cstop offset='.7' stop-color='%230A6CFF' stop-opacity='.8'/%3E%3Cstop offset='1' stop-color='%230A3FE0' stop-opacity='0'/%3E%3C/linearGradient%3E%3C/defs%3E%3Cpath d='M145.7 682.4A380 380 0 0 1 634.0 100.6' stroke='url(%23h)' stroke-width='3' stroke-linecap='round'/%3E%3Cpath d='M114.8 592.4A344 344 0 0 1 528.9 81.0' stroke='url(%23h)' stroke-width='2' stroke-linecap='round' opacity='.75'/%3E%3C/svg%3E");

  /* — Semantic roles — */
  --color-primary:   var(--color-navy);
  --color-secondary: var(--color-blue);
  --color-accent:    var(--color-blue);
  --color-success:   var(--color-green);
  --color-danger:    #B42318;

  /* — Backgrounds — */
  --bg-body:        var(--color-white);
  --bg-surface:     #F5F8FF;  /* alternating section ground (cool, blue-white) */
  --bg-dark:        var(--color-navy);
  --bg-darker:      var(--color-navy-950);
  --bg-blue-tint:   #EAF2FF;
  --bg-blue-tint-2: #DCEAFF;
  --bg-green-tint:  #E8F5EE;

  /* — Text — */
  --text-heading:   var(--color-navy);
  --text-body:      #3A4668;
  --text-muted:     #5A6788;
  --text-subtle:    #8792AE;
  --text-on-dark:   #FFFFFF;
  --text-on-dark-2: #C3CDEB;  /* body copy on navy */
  --text-on-dark-3: #97A5CF;  /* captions on navy */
  --text-footer:    #9AA9D6;  /* footer links */
  --text-legal:     #7E8DBB;  /* 13px legal text only */
  --text-placeholder: #8792AE;

  /* — Borders — */
  --border-color:        #DCE4F2;
  --border-color-soft:   #E8EDF8;
  --border-color-strong: #C6D2EA;
  --border-color-dark:   #16296A;
  --border-footer:       #0F1D52;
  --border-brand:        rgba(10, 99, 240, .38);

  /* — Typography — */
  --font-display: "Montserrat", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-body:    "Source Sans 3", ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;

  --fs-display: clamp(2.125rem, 1.45rem + 2.2vw, 3.375rem);   /* 34 → 54 */
  --fs-h1:      clamp(1.875rem, 1.3rem + 2vw, 3rem);           /* 30 → 48 */
  --fs-h2:      clamp(1.625rem, 1.15rem + 1.45vw, 2.5rem);     /* 26 → 40 */
  --fs-h2-sm:   clamp(1.5rem, 1.15rem + 1vw, 2.125rem);        /* 24 → 34 */
  --fs-h3:      1.1875rem;   /* 19 — card heading */
  --fs-h4:      1.0625rem;   /* 17 */
  --fs-h5:      1rem;        /* 16 */
  --fs-h6:      0.875rem;    /* 14 */
  --fs-lead:    clamp(1.0625rem, 1rem + 0.25vw, 1.1875rem);   /* 17 → 19 */
  --fs-body-lg: 1.0625rem;   /* 17 */
  --fs-body:    1rem;        /* 16 */
  --fs-body-sm: 0.9375rem;   /* 15 */
  --fs-small:   0.875rem;    /* 14 */
  --fs-xs:      0.8125rem;   /* 13 */
  --fs-2xs:     0.75rem;     /* 12 — badges, eyebrow */

  --lh-display: 1.1;
  --lh-heading: 1.18;
  --lh-snug:    1.35;
  --lh-body:    1.6;

  --fw-regular:   400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  --ls-display: -0.03em;
  --ls-heading: -0.022em;
  --ls-tight:   -0.012em;
  --ls-eyebrow: 0.16em;   /* echoes the logo's "CONNECTING POSSIBILITIES" tracking */

  /* — Layout — */
  --container-max: 1440px;
  --gutter: 80px;
  --header-utility-h: 40px;
  --header-main-h: 78px;
  --header-sticky-h: 66px;
  --header-h: calc(var(--header-utility-h) + var(--header-main-h));
  --mobile-bar-h: 76px;
  --logo-h: 46px;          /* header logo height */
  --logo-h-stuck: 40px;

  /* — Spacing (8px grid) — */
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-7: 32px;
  --space-8: 40px;
  --space-9: 48px;
  --space-10: 56px;
  --space-11: 64px;
  --space-12: 80px;
  --space-13: 96px;
  --section-y: 96px;
  --section-y-sm: 72px;

  /* — Radius (the logo's letterforms have softly rounded corners) — */
  --radius-xs:   6px;
  --radius-sm:   8px;
  --radius-btn:  12px;
  --radius-md:   14px;
  --radius-card: 18px;
  --radius-lg:   22px;
  --radius-xl:   28px;
  --radius-pill: 999px;

  /* — Shadows — */
  --shadow-xs:     0 1px 2px rgba(0, 11, 50, 0.06);
  --shadow-sm:     0 4px 14px rgba(0, 11, 50, 0.07);
  --shadow-md:     0 16px 36px rgba(0, 11, 50, 0.11);
  --shadow-lg:     0 34px 80px rgba(0, 4, 24, 0.45);
  --shadow-header: 0 10px 30px rgba(0, 6, 31, 0.35);
  --shadow-float:  0 18px 44px rgba(0, 11, 50, 0.20);
  --shadow-plan:   0 30px 70px rgba(0, 11, 50, 0.28);
  --shadow-glow:   0 10px 28px -8px rgba(10, 99, 240, 0.60);

  /* — Buttons — */
  --btn-h:      48px;
  --btn-h-sm:   44px;
  --btn-h-lg:   54px;
  --btn-h-xl:   58px;
  --btn-px:     24px;
  --btn-radius: var(--radius-btn);
  --btn-font:   var(--font-display);
  --btn-fw:     var(--fw-bold);

  /* — Motion — */
  --ease:       cubic-bezier(0.2, 0.7, 0.2, 1);
  --dur-fast:   150ms;
  --dur:        250ms;
  --dur-slow:   500ms;
  --dur-drawer: 320ms;
  --ease-drawer: cubic-bezier(0.22, 0.8, 0.24, 1);
  --drawer-w:   min(360px, 86vw);

  --focus-ring: 0 0 0 4px rgba(10, 99, 240, 0.22);
  --z-header: 100;
  --z-overlay: 200;
  --z-chat: 150;
}


/* 3. RESET & BASE ========================================================= */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-sticky-h) + 16px);
}
body {
  min-height: 100vh;
  padding-top: var(--header-h);
  background: var(--bg-body);
  color: var(--text-body);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  font-weight: var(--fw-regular);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
@supports (overflow: clip) { body { overflow-x: clip; } }
body.is-locked { overflow: hidden; }
img, svg, video, canvas { display: block; max-width: 100%; }
img { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; }
a { color: var(--color-blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--color-blue-hover); }
:where(ul[class], ol[class]) { list-style: none; padding: 0; }
address { font-style: normal; }
table { border-collapse: collapse; border-spacing: 0; width: 100%; }
[hidden] { display: none !important; }
::selection { background: rgba(10, 99, 240, 0.18); }

:focus-visible { outline: 3px solid var(--color-blue); outline-offset: 2px; border-radius: 4px; }
.on-dark :focus-visible,
.site-header :focus-visible, .mobile-menu__head :focus-visible,
.hero :focus-visible, .page-hero :focus-visible, .site-footer :focus-visible,
.trust-band :focus-visible, .cta-band :focus-visible, .rate-check :focus-visible,
.utility-bar :focus-visible, .plan--featured :focus-visible, .info-card--navy :focus-visible,
.mega-promo :focus-visible, .panel--navy :focus-visible, .chat-panel__head :focus-visible { outline-color: var(--color-sky-light); }
.site-header .mega-menu :focus-visible { outline-color: var(--color-blue); }
.site-header .mega-promo :focus-visible { outline-color: var(--color-sky-light); }

.icon { width: 20px; height: 20px; flex: none; }

.skip-link {
  position: fixed; top: 12px; left: 12px; z-index: 1000;
  padding: 12px 18px; border-radius: var(--radius-btn);
  background: var(--color-blue); color: #fff; font-family: var(--font-display); font-weight: var(--fw-bold);
  transform: translateY(-160%); transition: transform var(--dur) var(--ease);
}
.skip-link:focus { transform: none; color: #fff; }


/* 4. TYPOGRAPHY =========================================================== */
h1, h2, h3, h4, h5, h6, .display, .h1, .h2, .h3 {
  font-family: var(--font-display);
  color: var(--text-heading);
  font-weight: var(--fw-bold);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
}
h1, .h1 { font-size: var(--fs-h1); font-weight: var(--fw-extrabold); line-height: 1.12; letter-spacing: var(--ls-display); }
h2, .h2 { font-size: var(--fs-h2); font-weight: var(--fw-extrabold); }
h3, .h3 { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); }
h4 { font-size: var(--fs-h4); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
h5 { font-size: var(--fs-h5); font-weight: var(--fw-bold); letter-spacing: 0; }
h6 { font-size: var(--fs-h6); font-weight: var(--fw-bold); letter-spacing: 0; }
.display { font-size: var(--fs-display); font-weight: var(--fw-extrabold); line-height: var(--lh-display); letter-spacing: var(--ls-display); }
.h2--compact { font-size: var(--fs-h2-sm); }
p { text-wrap: pretty; }
h1, h2, .display { text-wrap: balance; }
.lead { font-size: var(--fs-lead); line-height: 1.6; color: var(--text-body); }
.body-lg { font-size: var(--fs-body-lg); line-height: 1.65; }
strong, b { font-weight: var(--fw-bold); }

/* Eyebrow — styled after the logo tagline "— CONNECTING POSSIBILITIES —" */
.eyebrow {
  font-family: var(--font-display);
  font-size: var(--fs-2xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--ls-eyebrow);
  text-transform: uppercase;
  color: var(--color-blue);
}
.section-head .eyebrow, .testimonials__head .eyebrow { display: inline-flex; align-items: center; gap: 12px; }
.section-head .eyebrow::before, .testimonials__head .eyebrow::before,
.section-head--center .eyebrow::after {
  content: ""; width: 26px; height: 2px; border-radius: 2px; flex: none;
  background: var(--gradient-brand);
}
.section-head--center .eyebrow::after { transform: scaleX(-1); }
.eyebrow--muted { color: var(--text-muted); }
.text-green { color: var(--color-green); }
.text-gradient { color: var(--color-sky); }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .text-gradient {
    background: var(--gradient-text); -webkit-background-clip: text; background-clip: text;
    color: transparent; -webkit-text-fill-color: transparent;
    -webkit-box-decoration-break: clone; box-decoration-break: clone;
  }
}
.center { text-align: center; }
.num { text-align: right; font-variant-numeric: tabular-nums; }


/* 5. LAYOUT HELPERS ======================================================= */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: var(--section-y); }
.section--tight-top { padding-top: 0; }
.section--surface { background: var(--bg-surface); }
.section--bordered { border-block: 1px solid var(--border-color-soft); }
.section--bordered-top { border-top: 1px solid var(--border-color-soft); }

.section-head { margin-bottom: var(--space-9); }
.section-head > * + * { margin-top: var(--space-4); }
.section-head--center { text-align: center; max-width: 980px; margin-inline: auto; }
.section-head--center .section-head__lead { max-width: 640px; margin-inline: auto; }
.section-head--split { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-7); }
.section-head--split h2 + p { margin-top: var(--space-3); }

.grid { display: grid; gap: var(--space-6); }
.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-5); }

.split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-12); align-items: center; }
.split__copy > * + * { margin-top: var(--space-5); }
.split__copy > .pill + h2 { margin-top: var(--space-6); }

.button-row { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.button-row--center { justify-content: center; }

.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0;
}
.hp-field { position: absolute !important; left: -10000px; top: auto; width: 1px; height: 1px; overflow: hidden; }

/* Responsive visibility (small = ≤576px) */
.show-sm-block, .show-sm-inline { display: none !important; }


/* 6. COMPONENTS =========================================================== */

/* — Buttons — */
.btn {
  --_bg: transparent; --_fg: var(--text-heading); --_bd: transparent;
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: var(--btn-h); padding: 0 var(--btn-px);
  border: 1px solid var(--_bd); border-radius: var(--btn-radius);
  background-color: var(--_bg); background-origin: border-box; color: var(--_fg);
  font-family: var(--btn-font); font-size: var(--fs-body-sm); font-weight: var(--btn-fw);
  line-height: 1.2; letter-spacing: 0; text-decoration: none; white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease),
              color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.btn .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.btn:hover .icon:last-child:not(:first-child) { transform: translateX(3px); }
.btn:hover { color: var(--_fg); }
.btn:active { transform: translateY(1px); }
.btn[disabled], .btn.is-loading { opacity: .6; pointer-events: none; box-shadow: none; }

/* Primary — the logo's electric-blue gradient */
.btn--primary, .btn--green, .btn--live {
  --_bg: var(--color-blue); --_fg: #fff; --_bd: transparent;
  background-image: var(--gradient-button);
  box-shadow: 0 8px 20px -10px rgba(10, 99, 240, .75), inset 0 1px 0 rgba(255, 255, 255, .18);
}
.btn--primary:hover, .btn--green:hover, .btn--live:hover {
  --_bg: var(--color-blue-hover);
  background-image: var(--gradient-button-hover);
  box-shadow: var(--shadow-glow), inset 0 1px 0 rgba(255, 255, 255, .18);
  transform: translateY(-1px);
}
.btn--primary:active, .btn--green:active, .btn--live:active { transform: translateY(0); }
.btn--secondary { --_bg: #fff; --_fg: var(--text-heading); --_bd: var(--border-color-strong); }
.btn--secondary:hover { --_bg: #F7FAFF; --_fg: var(--color-blue); --_bd: var(--color-blue); }
.btn--ghost-dark { --_bg: rgba(255, 255, 255, 0.04); --_fg: #fff; --_bd: rgba(195, 205, 235, 0.32); }
.btn--ghost-dark:hover { --_bg: rgba(43, 176, 255, 0.10); --_bd: var(--color-sky-light); }
.btn--white { --_bg: #fff; --_fg: var(--color-blue); --_bd: #fff; box-shadow: 0 10px 24px -12px rgba(0, 11, 50, .5); }
.btn--white:hover { --_bg: #EEF5FF; --_fg: var(--color-blue-hover); --_bd: #EEF5FF; transform: translateY(-1px); }
.btn--outline-light { --_bg: transparent; --_fg: #fff; --_bd: rgba(255, 255, 255, 0.6); }
.btn--outline-light:hover { --_bg: rgba(255, 255, 255, 0.12); --_bd: #fff; }
.btn--sm { min-height: var(--btn-h-sm); padding: 0 18px; font-size: var(--fs-small); }
.btn--lg { min-height: var(--btn-h-lg); }
.btn--xl { min-height: var(--btn-h-xl); padding: 0 30px; font-size: var(--fs-body); }
.btn--block { width: 100%; }

/* — Text link with arrow — */
.text-link {
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-blue); font-family: var(--font-display); font-weight: var(--fw-bold);
  font-size: var(--fs-body-sm); text-decoration: none; letter-spacing: 0;
}
.text-link .icon { width: 18px; height: 18px; transition: transform var(--dur) var(--ease); }
.text-link:hover { color: var(--color-blue-hover); }
.text-link:hover .icon { transform: translateX(4px); }
.text-link--button { background: none; border: 0; padding: 0; }
.text-link--button:hover .icon { transform: translateY(2px); }
.text-link--warm, .text-link--brand { color: var(--color-blue-700); }
.text-link--warm:hover, .text-link--brand:hover { color: var(--color-blue); }

/* — Pills & badges — */
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 14px; border-radius: var(--radius-pill);
  font-size: var(--fs-small); font-weight: var(--fw-bold); line-height: 1.3;
}
.pill--dark { background: rgba(11, 32, 96, 0.72); border: 1px solid rgba(124, 203, 255, 0.22); color: #E3EAFB; backdrop-filter: blur(4px); }
.pill--green { background: var(--bg-green-tint); color: var(--color-green); }
.pill--blue {
  background: var(--bg-blue-tint); color: var(--color-blue-700); border: 1px solid #D3E3FF;
  font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase;
  padding: 7px 14px;
}
.status-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  background: var(--color-green); flex: none;
  box-shadow: 0 0 0 0 rgba(14, 124, 74, 0.45);
  animation: pulse 2.4s var(--ease) infinite;
}
.pill--dark .status-dot, .badge--on-dark .status-dot, .hero .status-dot { background: var(--color-green-bright); }
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.45); }
  70% { box-shadow: 0 0 0 7px rgba(52, 211, 153, 0); }
  100% { box-shadow: 0 0 0 0 rgba(52, 211, 153, 0); }
}
.status-text { display: inline-flex; align-items: center; gap: 7px; color: var(--color-green); font-weight: var(--fw-bold); }
.status-pill {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  padding: 7px 12px; border-radius: var(--radius-pill);
  background: var(--bg-green-tint); color: var(--color-green);
  font-size: var(--fs-xs); font-weight: var(--fw-bold);
}
.badge {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: var(--radius-xs);
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.08em; text-transform: uppercase; line-height: 1.35;
}
.badge--green { background: var(--bg-green-tint); color: var(--color-green); }
.badge--blue, .badge--orange { background: var(--bg-blue-tint); color: var(--color-blue-700); }
.badge--solid { background: var(--gradient-button); color: #fff; }
.badge--on-dark {
  background: var(--color-navy-700); color: #E3EAFB; border: 1px solid rgba(124, 203, 255, .18); border-radius: var(--radius-pill);
  padding: 6px 12px; font-family: var(--font-body); font-size: var(--fs-2xs); letter-spacing: 0; text-transform: none; font-weight: var(--fw-bold);
}

/* — Chip — */
.chip {
  display: inline-block; min-height: 32px; padding: 5px 11px; line-height: 20px;
  border-radius: var(--radius-pill); background: var(--color-navy-600); color: #fff;
  border: 1px solid rgba(124, 203, 255, .16);
  font-size: 0.78125rem; font-weight: var(--fw-bold); white-space: nowrap;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.chip:hover { background: var(--color-blue); border-color: var(--color-blue); }
.chip[aria-pressed="true"] { background: #fff; color: var(--color-navy); border-color: #fff; }

/* — Icon tile — */
.icon-tile {
  display: inline-grid; place-items: center; flex: none;
  width: 48px; height: 48px; border-radius: var(--radius-btn);
  background: linear-gradient(145deg, #EEF5FF 0%, #DCEAFF 100%); color: var(--color-blue);
  box-shadow: inset 0 0 0 1px rgba(10, 99, 240, .10);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.icon-tile .icon { width: 22px; height: 22px; }
.icon-tile--sm { width: 40px; height: 40px; }
.icon-tile--sm .icon { width: 19px; height: 19px; }
.icon-tile--lg { width: 44px; height: 44px; }
.icon-tile--green { background: var(--bg-green-tint); color: var(--color-green); box-shadow: inset 0 0 0 1px rgba(14, 124, 74, .12); }
.icon-tile--brand { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-glow); }
.icon-tile--dark { width: 44px; height: 44px; background: var(--color-navy-700); color: var(--color-sky); box-shadow: inset 0 0 0 1px rgba(124, 203, 255, .18); }

/* — Cards — */
.card {
  position: relative; background: #fff;
  border: 1px solid var(--border-color); border-radius: var(--radius-card);
  padding: 30px;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.card__title { font-size: var(--fs-h3); font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.card__title--sm { font-size: var(--fs-h4); }
.card__text { margin-top: var(--space-2); font-size: var(--fs-body-sm); line-height: 1.65; color: var(--text-body); }
.card__text--sm { font-size: 0.90625rem; }
.feature-card { overflow: hidden; }
.feature-card::before, .card--plain::before {
  content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px;
  background: var(--gradient-brand); transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-slow) var(--ease);
}
.card--plain { overflow: hidden; }
.feature-card .icon-tile { margin-bottom: var(--space-6); }
.feature-card:hover, .card--plain:hover { border-color: var(--border-brand); transform: translateY(-3px); box-shadow: var(--shadow-md); }
.feature-card:hover::before, .card--plain:hover::before { transform: scaleX(1); }
.feature-card:hover .icon-tile { background: var(--gradient-brand); color: #fff; box-shadow: var(--shadow-glow); }
.card--plain { padding: 28px 26px; }

/* — Checklist — */
.checklist { display: grid; gap: 14px; }
.checklist li { display: flex; gap: 12px; align-items: flex-start; font-size: var(--fs-body-sm); line-height: 1.5; }
.checklist .icon { width: 18px; height: 18px; margin-top: 2px; color: var(--color-blue); stroke-width: 2.6; }
.checklist--lead li { font-size: var(--fs-body); color: var(--text-body); }
.checklist--lead strong { color: var(--text-heading); }
.checklist--lead .icon { width: 20px; height: 20px; }

/* — Stars / avatar — */
.stars { display: inline-flex; gap: 3px; color: #1E8BFF; }
.stars .icon { width: 17px; height: 17px; }
.avatar {
  display: inline-grid; place-items: center; width: 42px; height: 42px; flex: none;
  border-radius: 50%; background: var(--bg-blue-tint); color: var(--color-blue-700);
  font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-2xs);
  box-shadow: inset 0 0 0 1px rgba(10, 99, 240, .14);
}

/* — Form fields — */
.field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.field--full { grid-column: 1 / -1; }
.field__label { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--text-heading); }
.field__optional { font-weight: var(--fw-regular); color: var(--text-muted); }
.input {
  width: 100%; min-height: 50px; padding: 12px 16px;
  border: 1px solid var(--border-color-strong); border-radius: var(--radius-btn);
  background: #fff; color: var(--text-heading); font-size: var(--fs-body); line-height: 1.4;
  transition: border-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: var(--text-placeholder); opacity: 1; }
.input:hover { border-color: #A9B9DA; }
.input:focus { outline: none; border-color: var(--color-blue); box-shadow: var(--focus-ring); }
.input--lg { min-height: 56px; }
.input[aria-invalid="true"] { border-color: var(--color-danger); }
.input[aria-invalid="true"]:focus { box-shadow: 0 0 0 4px rgba(180, 35, 24, 0.18); }
.textarea { min-height: 150px; resize: vertical; }
.select { position: relative; }
.select .input { padding-right: 44px; cursor: pointer; }
.select__icon { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--color-blue); width: 18px; height: 18px; }
.field__error { display: none; font-size: var(--fs-xs); color: var(--color-danger); font-weight: var(--fw-semibold); }
.field__error:not(:empty) { display: block; }
input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; }

.checkbox { position: relative; display: flex; gap: 12px; align-items: flex-start; cursor: pointer; font-size: var(--fs-body-sm); line-height: 1.5; }
.checkbox input { position: absolute; left: 0; top: 1px; opacity: 0; width: 20px; height: 20px; margin: 0; cursor: pointer; }
.checkbox__box {
  display: inline-grid; place-items: center; flex: none; width: 20px; height: 20px; margin-top: 1px;
  border: 1.5px solid var(--border-color-strong); border-radius: 6px; background: #fff; color: transparent;
  transition: all var(--dur-fast) var(--ease);
}
.checkbox__box .icon { width: 14px; height: 14px; stroke-width: 3; }
.checkbox:hover .checkbox__box { border-color: var(--color-blue); }
.checkbox input:checked + .checkbox__box { background: var(--gradient-button); border-color: var(--color-blue); color: #fff; }
.checkbox input:focus-visible + .checkbox__box { box-shadow: var(--focus-ring); border-color: var(--color-blue); }
.checkbox input[aria-invalid="true"] + .checkbox__box { border-color: var(--color-danger); }

/* — Combo / search field — */
.combo { position: relative; flex: 1; min-width: 0; }
.combo__icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 18px; height: 18px; color: var(--color-blue); pointer-events: none; }
.combo__input { padding-left: 46px; }
.combo__list {
  position: absolute; z-index: 20; top: calc(100% + 6px); left: 0; right: 0;
  max-height: 280px; overflow-y: auto; padding: 6px;
  background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-md);
  box-shadow: var(--shadow-float);
}
.combo__option {
  display: flex; justify-content: space-between; gap: 12px; align-items: center;
  padding: 10px 12px; border-radius: var(--radius-sm); cursor: pointer;
  color: var(--text-heading); font-weight: var(--fw-semibold); font-size: var(--fs-body-sm);
}
.combo__option span { color: var(--text-muted); font-weight: var(--fw-regular); }
.combo__option[aria-selected="true"], .combo__option:hover { background: var(--bg-blue-tint); }

/* — Segmented control / toggle — */
.segmented { display: inline-grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 4px; padding: 4px; border-radius: var(--radius-md); background: #fff; border: 1px solid var(--border-color); width: 100%; }
.segmented__btn { min-height: 36px; padding: 0 12px; border-radius: var(--radius-sm); font-family: var(--font-display); font-size: var(--fs-xs); font-weight: var(--fw-bold); color: var(--text-muted); transition: all var(--dur-fast) var(--ease); }
.segmented__btn[aria-pressed="true"] { background: var(--color-navy); color: #fff; box-shadow: 0 4px 12px -4px rgba(0, 11, 50, .45); }
.segmented__btn:not([aria-pressed="true"]):hover { color: var(--color-blue); background: var(--bg-blue-tint); }

/* — Range slider — */
.range { --_p: 15%; width: 100%; height: 24px; background: transparent; -webkit-appearance: none; appearance: none; cursor: pointer; }
.range::-webkit-slider-runnable-track { height: 6px; border-radius: 6px; background: linear-gradient(to right, var(--color-blue) var(--_p), var(--border-color) var(--_p)); border: 1px solid #C9D6EE; }
.range::-moz-range-track { height: 6px; border-radius: 6px; background: var(--border-color); border: 1px solid #C9D6EE; }
.range::-moz-range-progress { height: 6px; border-radius: 6px; background: var(--color-blue); }
.range::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; margin-top: -8px; border-radius: 50%; background: var(--color-blue); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 11, 50, .35); }
.range::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--color-blue); border: 3px solid #fff; box-shadow: 0 2px 6px rgba(0, 11, 50, .35); }
.range:focus-visible { outline: none; }
.range:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(10, 99, 240, .28); }
.range:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 5px rgba(10, 99, 240, .28); }

/* — Tables — */
.table-wrap { position: relative; border: 1px solid var(--border-color); border-radius: var(--radius-card); overflow: hidden; background: #fff; }
.table-wrap--scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap--scroll:focus-visible { outline-offset: 4px; }

/* — Accordion — */
.accordion { display: grid; gap: 14px; }
.accordion__item { border: 1px solid var(--border-color); border-radius: var(--radius-md); background: #fff; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.accordion__item:hover { border-color: var(--border-color-strong); }
.accordion__item.is-open { border-color: var(--border-brand); box-shadow: var(--shadow-sm); }
.accordion__heading { font-family: var(--font-body); font-size: var(--fs-body-lg); letter-spacing: 0; }
.accordion__trigger {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 16px;
  min-height: 68px; padding: 18px 24px; text-align: left;
  font-family: var(--font-body); font-size: 1.0625rem; font-weight: var(--fw-bold); color: var(--text-heading); line-height: 1.35;
}
.accordion__trigger:focus-visible { outline-offset: -3px; border-radius: var(--radius-md); }
.accordion__icon {
  width: 30px; height: 30px; padding: 6px; border-radius: 50%; flex: none;
  background: var(--bg-blue-tint); color: var(--color-blue);
  transition: transform var(--dur) var(--ease), color var(--dur) var(--ease), background var(--dur) var(--ease);
}
.accordion__trigger[aria-expanded="true"] .accordion__icon { transform: rotate(45deg); color: #fff; background: var(--gradient-brand); }
.accordion__panel { display: grid; grid-template-rows: 0fr; transition: grid-template-rows var(--dur) var(--ease); }
.accordion__panel > .accordion__content { overflow: hidden; visibility: hidden; transition: visibility 0s linear var(--dur); }
.accordion__item.is-open .accordion__content { visibility: visible; transition-delay: 0s; }
html:not(.js-ready) .accordion__content { visibility: visible; }
.accordion__item.is-open .accordion__panel { grid-template-rows: 1fr; }
.accordion__content p { padding: 0 24px 22px; font-size: var(--fs-body-sm); line-height: 1.7; }
html:not(.js-ready) .accordion__panel { grid-template-rows: 1fr; }

/* — Slider (scroll-snap) — */
.slider__dots { display: none; justify-content: center; gap: 8px; margin-top: var(--space-5); }
.slider__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--border-color-strong); transition: all var(--dur) var(--ease); }
.slider__dot[aria-current="true"] { width: 26px; border-radius: 6px; background: var(--gradient-brand); }

/* — Payment badges — */
.pay-badges { display: flex; flex-wrap: wrap; gap: 10px; }
.pay-badge {
  display: inline-grid; place-items: center; min-width: 54px; height: 34px; padding: 0 10px;
  border-radius: var(--radius-xs); background: #fff;
  font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 0.8125rem; letter-spacing: -0.01em;
}
.pay-badge--visa { color: #1A1F71; font-style: italic; font-size: 0.875rem; letter-spacing: 0.02em; }
.pay-badge--mc { color: #D6231E; font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: -0.02em; }
.pay-badge--paypal { color: #1B3D8F; font-size: 0.75rem; }
.pay-badge--stripe { color: #635BFF; font-size: 0.75rem; }
.pay-badge--amex { color: #0B3B8A; font-size: 0.6875rem; letter-spacing: 0.03em; }


/* 7. HEADER =============================================================== */
/* The header sits on the logo's own navy, so the logo artwork is shown exactly as designed. */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header);
  transition: transform var(--dur) var(--ease);
}
.utility-bar {
  height: var(--header-utility-h); background: var(--color-navy-950); color: var(--text-on-dark-2);
  border-bottom: 1px solid rgba(124, 203, 255, 0.08);
  font-size: var(--fs-xs);
}
.utility-bar__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.utility-bar__msg, .utility-bar__meta, .utility-bar__link, .utility-bar__locale { display: flex; align-items: center; gap: 8px; }
.utility-bar__msg .icon { color: var(--color-sky); width: 16px; height: 16px; }
.utility-bar__meta { gap: 20px; }
.utility-bar__link { color: var(--text-on-dark-2); text-decoration: none; }
.utility-bar__link:hover { color: #fff; }
.utility-bar__link .icon, .utility-bar__locale .icon { width: 15px; height: 15px; color: var(--color-sky); }
.utility-bar__sep { width: 1px; height: 16px; background: var(--color-navy-500); }

.main-bar {
  position: relative;
  height: var(--header-main-h); background: var(--color-navy);
  transition: height var(--dur) var(--ease), box-shadow var(--dur) var(--ease), background-color var(--dur) var(--ease);
}
.main-bar::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gradient-line); pointer-events: none; }
.main-bar__inner { height: 100%; display: flex; align-items: center; justify-content: space-between; gap: 24px; }

/* Logo */
.brand { display: inline-flex; align-items: center; flex: none; min-height: 44px; text-decoration: none; border-radius: var(--radius-sm); }
.brand picture { display: block; }
.brand__logo { display: block; width: auto; height: var(--logo-h); max-width: none; transition: height var(--dur) var(--ease); }
.brand--footer .brand__logo { width: 208px; height: auto; }
.brand--menu .brand__logo { height: 34px; }

.primary-nav { flex: 1; display: flex; justify-content: center; }
.primary-nav__list { display: flex; align-items: center; gap: 30px; }
.primary-nav__link {
  position: relative; display: inline-flex; align-items: center; gap: 6px; height: 44px;
  color: var(--text-on-dark-2); text-decoration: none;
  font-family: var(--font-display); font-weight: var(--fw-semibold); font-size: var(--fs-small); white-space: nowrap;
  transition: color var(--dur-fast) var(--ease);
}
.primary-nav__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 3px; height: 2px; border-radius: 2px;
  background: var(--gradient-brand); transform: scaleX(0); transition: transform var(--dur) var(--ease);
}
.primary-nav__link[aria-current="page"] { color: #fff; font-weight: var(--fw-bold); }
.primary-nav__link[aria-current="page"]::after { transform: scaleX(1); }
.primary-nav__link:hover { color: #fff; }
.primary-nav__link:hover::after { transform: scaleX(1); }
.primary-nav__chevron { width: 16px; height: 16px; color: var(--color-sky); transition: transform var(--dur) var(--ease); }
.has-dropdown.is-open .primary-nav__link { color: #fff; }
.has-dropdown.is-open .primary-nav__chevron { transform: rotate(180deg); }
.has-dropdown.is-open .primary-nav__link::after { transform: scaleX(1); }

.main-bar__actions { display: flex; align-items: center; gap: 20px; flex: none; }
.header-cta { min-height: 46px; padding: 0 22px; font-size: var(--fs-small); }
.menu-toggle { display: none; width: 44px; height: 44px; place-items: center; border-radius: var(--radius-btn); color: #fff; border: 1px solid rgba(124, 203, 255, .22); background: rgba(255, 255, 255, .03); }
.menu-toggle .icon { width: 24px; height: 24px; }
.menu-toggle:hover { background: var(--color-navy-700); border-color: rgba(124, 203, 255, .4); }

/* Sticky state (after 120px) */
.site-header.is-stuck { transform: translateY(calc(-1 * var(--header-utility-h))); }
.site-header.is-stuck .main-bar { height: var(--header-sticky-h); box-shadow: var(--shadow-header); background-color: rgba(0, 11, 50, 0.94); }
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .site-header.is-stuck .main-bar { background-color: rgba(0, 11, 50, 0.92); -webkit-backdrop-filter: saturate(160%) blur(14px); backdrop-filter: saturate(160%) blur(14px); }
}
.site-header.is-stuck .brand__logo { height: var(--logo-h-stuck); }
.site-header.is-stuck .header-cta__arrow { display: none; }
.site-header.is-stuck .header-cta { min-height: 42px; }

/* Mega menu */
.has-dropdown { position: static; }
.mega-menu {
  position: absolute; left: 0; right: 0; top: 100%;
  background: #fff; border-top: 1px solid var(--border-color-soft); box-shadow: 0 30px 60px rgba(0, 11, 50, 0.18);
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility 0s linear var(--dur);
}
.has-dropdown.is-open .mega-menu { opacity: 1; visibility: visible; transform: none; transition-delay: 0s; }
.mega-menu__inner { display: grid; grid-template-columns: minmax(0, 1fr) 368px; gap: 40px; padding-block: 32px 36px; }
.mega-menu__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px 24px; align-content: start; }
.mega-link { display: flex; gap: 14px; align-items: flex-start; padding: 12px; border-radius: var(--radius-md); text-decoration: none; transition: background-color var(--dur-fast) var(--ease); }
.mega-link:hover { background: var(--bg-surface); }
.mega-link__icon {
  display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: var(--radius-btn);
  background: linear-gradient(145deg, #EEF5FF 0%, #DCEAFF 100%); color: var(--color-blue);
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease);
}
.mega-link:hover .mega-link__icon { background: var(--gradient-brand); color: #fff; }
.mega-link__icon .icon { width: 19px; height: 19px; }
.mega-link__text { display: grid; gap: 4px; }
.mega-link__text strong { color: var(--text-heading); font-family: var(--font-display); font-size: var(--fs-small); }
.mega-link__text span { color: var(--text-muted); font-size: var(--fs-xs); line-height: 1.45; }
.mega-promo {
  padding: 26px; border-radius: var(--radius-card); color: var(--text-on-dark-2); display: grid; gap: 10px; justify-items: start;
  background: var(--motif-arcs) right -40px top -40px / 260px 260px no-repeat, var(--glow-navy), var(--color-navy);
}
.mega-promo__title { font-family: var(--font-display); font-weight: var(--fw-extrabold); color: #fff; font-size: 1.25rem; letter-spacing: var(--ls-heading); margin-top: 6px; }
.mega-promo__text { font-size: var(--fs-small); margin-bottom: 10px; }

/* Mobile menu — panel slides in from the left over a dimmed backdrop */
.mobile-menu { position: fixed; inset: 0; z-index: var(--z-overlay); }
.mobile-menu__backdrop {
  position: absolute; inset: 0; background: rgba(0, 6, 31, 0.62);
  opacity: 0; transition: opacity var(--dur-drawer) var(--ease); cursor: pointer;
}
.mobile-menu__panel {
  position: absolute; top: 0; bottom: 0; left: 0;
  width: var(--drawer-w); max-width: 100%;
  display: flex; flex-direction: column; background: #fff;
  box-shadow: 12px 0 48px rgba(0, 4, 24, 0.35);
  transform: translateX(-100%);
  transition: transform var(--dur-drawer) var(--ease-drawer);
  will-change: transform;
}
.mobile-menu.is-open .mobile-menu__backdrop { opacity: 1; }
.mobile-menu.is-open .mobile-menu__panel { transform: none; }
.mobile-menu__head {
  position: relative; display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 14px 0 18px; flex: none;
  background: var(--color-navy);
}
.mobile-menu__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--gradient-line); }
.mobile-menu__close { display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-btn); background: var(--color-navy-700); color: #fff; }
.mobile-menu__close:hover { background: var(--color-navy-600); }
.mobile-menu__close .icon { width: 22px; height: 22px; }
.mobile-menu__body { flex: 1; overflow-y: auto; padding: 8px 20px 24px; overscroll-behavior: contain; }
.mobile-nav > li { border-bottom: 1px solid var(--border-color-soft); }
.mobile-nav__link {
  display: flex; align-items: center; justify-content: space-between; width: 100%; min-height: 56px;
  font-family: var(--font-display); font-size: 1rem; font-weight: var(--fw-bold); color: var(--text-heading); text-decoration: none; text-align: left;
}
.mobile-nav__link .icon { width: 20px; height: 20px; color: var(--text-subtle); transition: transform var(--dur) var(--ease); }
.mobile-nav__link:hover { color: var(--color-blue); }
.mobile-nav__link[aria-current="page"] { color: var(--color-blue); }
.mobile-nav__link[aria-current="page"] .icon { color: var(--color-blue); }
.mobile-nav__link[aria-expanded="true"] .mobile-nav__chevron { transform: rotate(180deg); color: var(--color-blue); }
.mobile-subnav { overflow: hidden; max-height: 0; visibility: hidden; transition: max-height var(--dur) var(--ease), visibility 0s linear var(--dur); }
.mobile-subnav.is-open { max-height: 400px; visibility: visible; transition-delay: 0s; }
.mobile-subnav li { margin-left: 2px; border-left: 2px solid var(--bg-blue-tint-2); }
.mobile-subnav li:last-child { margin-bottom: 14px; }
.mobile-subnav a { display: flex; align-items: center; min-height: 44px; padding-left: 16px; color: var(--text-body); text-decoration: none; font-size: var(--fs-body-lg); }
.mobile-subnav a:hover { color: var(--color-blue); }
.mobile-menu__ctas { display: grid; gap: 10px; margin-top: 18px; }
.mobile-menu__foot { flex: none; padding: 16px 20px calc(16px + env(safe-area-inset-bottom, 0px)); background: var(--bg-surface); border-top: 1px solid var(--border-color-soft); display: grid; gap: 8px; }
.mobile-menu__phone { display: inline-flex; align-items: center; gap: 10px; min-height: 36px; color: var(--text-heading); font-weight: var(--fw-bold); text-decoration: none; }
.mobile-menu__phone .icon { color: var(--color-blue); width: 18px; height: 18px; }
.mobile-menu__meta { display: flex; align-items: center; gap: 16px; font-size: var(--fs-xs); color: var(--text-muted); }
.mobile-menu__meta > span:first-child { display: inline-flex; align-items: center; gap: 6px; }
.mobile-menu__meta .icon { width: 14px; height: 14px; }


/* 8. FOOTER =============================================================== */
.site-footer { position: relative; background: var(--bg-darker); color: var(--text-footer); }
.site-footer::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 2px; background: var(--gradient-brand); z-index: 1; }
.footer-newsletter {
  background: var(--motif-fibre) right -60px bottom -70px / 520px auto no-repeat,
              radial-gradient(700px 260px at 85% 0%, rgba(10, 108, 255, .28), transparent 65%),
              var(--color-navy-800);
  border-bottom: 1px solid var(--border-footer);
}
.footer-newsletter__inner { display: flex; align-items: center; justify-content: space-between; gap: 40px; padding-block: 38px; }
.footer-newsletter__title { color: #fff; font-size: 1.3125rem; font-weight: var(--fw-extrabold); letter-spacing: var(--ls-heading); }
.footer-newsletter__text { color: #D2DBF3; font-size: var(--fs-body-sm); margin-top: 4px; }
.footer-newsletter__form { width: min(420px, 100%); flex: none; position: relative; }
.footer-newsletter__row { display: flex; gap: 10px; }
.footer-newsletter__row .input { min-height: 48px; border-color: #fff; }
.footer-newsletter__row .btn { min-height: 48px; padding: 0 22px; }
.form-status { font-size: var(--fs-xs); margin-top: 8px; min-height: 0; }
.form-status:empty { display: none; }
.form-status.is-success { color: var(--color-green-bright); }
.form-status.is-error { color: #FFB4A8; }

.footer-main__inner { display: grid; grid-template-columns: minmax(0, 330px) minmax(0, 1fr); gap: 64px; padding-block: 52px 48px; }
.footer-brand__text { margin-top: 20px; font-size: var(--fs-body-sm); line-height: 1.65; color: var(--text-footer); max-width: 320px; }
.footer-contact { display: grid; gap: 10px; margin-top: 22px; font-size: var(--fs-small); }
.footer-contact li { display: flex; align-items: flex-start; gap: 10px; color: var(--text-on-dark-2); }
.footer-contact .icon { flex: none; width: 16px; height: 16px; margin-top: 3px; color: var(--color-sky); }
.footer-contact a { color: var(--text-on-dark-2); text-decoration: none; }
.footer-contact a:hover { color: #fff; text-decoration: underline; }
.footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; }
.footer-col__title { font-family: var(--font-display); font-size: var(--fs-xs); letter-spacing: 0.14em; text-transform: uppercase; color: #fff; font-weight: var(--fw-bold); }
.footer-col__toggle { display: flex; width: 100%; align-items: center; justify-content: space-between; text-align: left; color: inherit; font: inherit; letter-spacing: inherit; text-transform: inherit; pointer-events: none; }
.footer-col__toggle .icon { display: none; width: 18px; height: 18px; color: var(--color-sky); transition: transform var(--dur) var(--ease); }
.footer-col__list { display: grid; gap: 12px; margin-top: 18px; }
.footer-col__list a { color: var(--text-footer); text-decoration: none; font-size: var(--fs-body-sm); transition: color var(--dur-fast) var(--ease); }
.footer-col__list a:hover { color: #fff; text-decoration: underline; text-decoration-color: var(--color-sky); }

.footer-trust { border-top: 1px solid var(--border-footer); }
.footer-trust__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 22px; }
.footer-trust__list { display: flex; flex-wrap: wrap; gap: 28px; font-size: var(--fs-small); color: var(--text-on-dark-2); }
.footer-trust__list li { display: inline-flex; align-items: center; gap: 8px; }
.footer-trust__list .icon { width: 17px; height: 17px; color: var(--color-sky); }
.footer-legal { border-top: 1px solid var(--border-footer); }
.footer-legal__inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-block: 24px 28px; }
.footer-legal__text { font-size: var(--fs-xs); color: var(--text-legal); }
.social-links { display: flex; gap: 8px; }
.social-links a { display: grid; place-items: center; width: 40px; height: 40px; border-radius: var(--radius-btn); color: var(--text-footer); text-decoration: none; border: 1px solid var(--border-footer); transition: all var(--dur-fast) var(--ease); }
.social-links a:hover { color: #fff; background: var(--gradient-brand); border-color: transparent; }
.social-links .icon { width: 20px; height: 20px; }
.social-glyph { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 1rem; line-height: 1; letter-spacing: -0.02em; }
.social-glyph--round { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: currentColor; }
.social-glyph--round { color: inherit; }
.social-links a .social-glyph--round { background: var(--text-footer); color: var(--bg-darker); font-size: 0.9375rem; padding-top: 3px; }
.social-links a:hover .social-glyph--round { background: #fff; color: var(--color-blue); }

/* Chat widget */
.chat-widget { position: fixed; right: 32px; bottom: 28px; z-index: var(--z-chat); display: flex; flex-direction: column; align-items: flex-end; gap: 14px; pointer-events: none; }
.chat-widget > * { pointer-events: auto; }
.chat-launcher {
  position: relative; display: grid; place-items: center; width: 62px; height: 62px; border-radius: 50%;
  background: var(--gradient-button); color: #fff; box-shadow: 0 14px 32px -6px rgba(10, 99, 240, 0.55), inset 0 1px 0 rgba(255, 255, 255, .2);
  transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.chat-launcher::after { content: ""; position: absolute; top: 5px; right: 5px; width: 13px; height: 13px; border-radius: 50%; background: var(--color-green-bright); box-shadow: 0 0 0 2.5px #fff; }
.chat-launcher:hover { transform: translateY(-2px); box-shadow: 0 18px 38px -6px rgba(10, 99, 240, 0.65), inset 0 1px 0 rgba(255, 255, 255, .2); }
.chat-launcher .icon { width: 26px; height: 26px; }
.chat-launcher[aria-expanded="true"] .icon use { opacity: 1; }
.chat-teaser { position: relative; display: flex; align-items: stretch; background: #fff; border: 1px solid var(--border-color-soft); border-radius: var(--radius-md); box-shadow: var(--shadow-float); animation: teaser-in var(--dur-slow) var(--ease) both; }
.chat-teaser__body { display: flex; align-items: center; gap: 12px; padding: 12px 8px 12px 16px; text-align: left; }
.chat-teaser__body > span { display: grid; gap: 1px; }
.chat-teaser__body strong { color: var(--text-heading); font-family: var(--font-display); font-size: var(--fs-small); }
.chat-teaser__body span span { font-size: var(--fs-xs); color: var(--text-muted); }
.chat-teaser__close { display: grid; place-items: center; width: 40px; color: var(--text-muted); border-radius: 0 var(--radius-md) var(--radius-md) 0; }
.chat-teaser__close:hover { color: var(--text-heading); background: var(--bg-surface); }
.chat-teaser__close .icon { width: 16px; height: 16px; }
@keyframes teaser-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.chat-panel {
  width: min(360px, calc(100vw - 32px)); overflow: hidden;
  background: #fff; border-radius: var(--radius-card); box-shadow: 0 28px 64px rgba(0, 11, 50, 0.30);
  animation: teaser-in var(--dur) var(--ease) both;
}
.chat-panel__head {
  display: flex; justify-content: space-between; gap: 12px; padding: 20px 20px 18px; color: var(--text-on-dark-2);
  background: var(--motif-arcs) right -70px top -80px / 240px 240px no-repeat, var(--glow-navy), var(--color-navy);
}
.chat-panel__title { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 1.125rem; color: #fff; letter-spacing: var(--ls-tight); }
.chat-panel__status { display: flex; align-items: center; gap: 8px; margin-top: 4px; font-size: var(--fs-xs); }
.chat-panel__status .status-dot { background: var(--color-green-bright); }
.chat-panel__close { display: grid; place-items: center; width: 36px; height: 36px; border-radius: var(--radius-sm); color: #fff; flex: none; background: rgba(255, 255, 255, .06); }
.chat-panel__close:hover { background: var(--color-navy-700); }
.chat-panel__close .icon { width: 20px; height: 20px; }
.chat-panel__list { padding: 10px; display: grid; gap: 4px; }
.chat-option { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 10px; border-radius: var(--radius-md); text-decoration: none; color: var(--text-body); transition: background-color var(--dur-fast) var(--ease); }
.chat-option:hover { background: var(--bg-surface); color: var(--text-body); }
.chat-option > span:nth-child(2) { display: grid; flex: 1; font-size: var(--fs-xs); line-height: 1.4; }
.chat-option strong { color: var(--text-heading); font-family: var(--font-display); font-size: var(--fs-small); }
.chat-option__chevron { width: 18px; height: 18px; color: var(--text-subtle); transition: transform var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease); }
.chat-option:hover .chat-option__chevron { color: var(--color-blue); transform: translateX(2px); }

/* Mobile sticky bottom bar */
.mobile-bar {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-chat);
  display: none; gap: 10px; align-items: center;
  height: var(--mobile-bar-h); padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px));
  height: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px));
  background: #fff; border-top: 1px solid var(--border-color-soft); box-shadow: 0 -10px 28px rgba(0, 11, 50, 0.10);
  transform: translateY(110%); transition: transform var(--dur) var(--ease);
}
.mobile-bar.is-visible { transform: none; }
.mobile-bar__main { flex: 1; min-height: 52px; }
.mobile-bar__side { display: grid; place-items: center; width: 52px; height: 52px; flex: none; border-radius: var(--radius-btn); background: var(--color-navy); color: #fff; }
.mobile-bar__side .icon { width: 22px; height: 22px; }
.mobile-bar__side--navy { background: var(--color-navy); }


/* 9. HOME PAGE ============================================================ */

/* Hero — logo navy, soft blue glow and the double "swoosh" arc from the logo */
.hero { position: relative; overflow: hidden; background: var(--glow-navy), var(--bg-dark); color: var(--text-on-dark-2); isolation: isolate; }
.hero__inner { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 580px); justify-content: space-between; align-items: center; gap: 48px; padding-block: 56px 64px; }
.hero__copy > * + * { margin-top: 28px; }
.hero__title { color: #fff; margin-top: 28px !important; font-size: clamp(2.125rem, 1.5rem + 1.8vw, 3rem); text-wrap: pretty; }
.hero__lead { color: #D2DBF3; font-size: 1.1875rem; line-height: 1.65; max-width: 540px; margin-top: 22px !important; }
.hero__actions { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 38px !important; }
.hero__trust { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-top: 38px !important; font-size: var(--fs-body-sm); color: var(--text-on-dark-2); }
.hero__trust li { display: inline-flex; align-items: center; gap: 9px; }
.hero__trust .icon { width: 18px; height: 18px; color: var(--color-sky); }
.hero__visual { position: relative; margin-right: 20px; }
.hero__visual::before {
  content: ""; position: absolute; inset: 8% -6% -8% 10%; z-index: -1; border-radius: 40px;
  background: radial-gradient(closest-side, rgba(10, 108, 255, .45), transparent); filter: blur(30px); pointer-events: none;
}
/* The logo's double swoosh, orbiting the product preview */
.hero__visual::after {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  width: 128%; aspect-ratio: 1; left: -17%; top: 50%; transform: translateY(-50%);
  background: var(--motif-orbit) center / contain no-repeat;
}

/* Dashboard mockup */
.dash { position: relative; background: #fff; border-radius: var(--radius-card); box-shadow: var(--shadow-lg); overflow: hidden; color: var(--text-body); border: 1px solid rgba(124, 203, 255, .25); }
.dash__bar { display: flex; align-items: center; gap: 16px; height: 44px; padding: 0 16px; background: var(--bg-surface); border-bottom: 1px solid var(--border-color-soft); }
.dash__dots { display: flex; gap: 8px; }
.dash__dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--border-color); }
.dash__dots i:first-child { background: var(--color-sky); }
.dash__dots i:nth-child(2) { background: var(--color-blue-bright); }
.dash__dots i:nth-child(3) { background: var(--color-blue-deep); }
.dash__url { font-size: var(--fs-xs); color: var(--text-muted); }
.dash__body { padding: 22px 21px 21px; }
.dash__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.dash__label { font-size: var(--fs-xs); color: var(--text-muted); }
.dash__balance { font-family: var(--font-display); font-size: 1.875rem; font-weight: var(--fw-extrabold); color: var(--text-heading); letter-spacing: -0.02em; line-height: 1.2; margin-top: 2px; }
.dash__top .status-pill { margin-top: 6px; }
.dash__stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin-top: 18px; }
.dash__stats--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.dash__stat { display: grid; gap: 6px; padding: 14px 13px 12px; border-radius: var(--radius-btn); background: var(--bg-surface); border: 1px solid var(--border-color-soft); }
.dash__stat:first-child { background: var(--gradient-surface); border-color: transparent; }
.dash__stat:first-child span { color: rgba(255, 255, 255, .85); }
.dash__stat:first-child strong { color: #fff; }
.dash__stat span { font-size: 0.71875rem; color: var(--text-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dash__stat strong { font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--text-heading); letter-spacing: -0.01em; line-height: 1.1; }
.dash__stat .is-good { color: var(--color-green); }
.dash__section { margin-top: 22px; font-family: var(--font-display); font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.dash__calls { display: grid; gap: 9px; margin-top: 10px; }
.dash__calls li { display: flex; align-items: center; gap: 12px; padding: 12px 13px; border: 1px solid var(--border-color-soft); border-radius: var(--radius-btn); }
.cc { display: grid; place-items: center; width: 30px; height: 22px; border-radius: 5px; color: #fff; font-family: var(--font-display); font-size: 0.5625rem; font-weight: var(--fw-bold); letter-spacing: 0.04em; flex: none; }
.cc--navy { background: var(--color-navy); }
.cc--blue { background: var(--color-blue); }
.cc--sky, .cc--orange { background: var(--gradient-brand); }
.dash__call-main { display: grid; flex: 1; min-width: 0; line-height: 1.35; }
.dash__call-main strong { font-size: var(--fs-xs); color: var(--text-heading); font-weight: var(--fw-semibold); }
.dash__call-main span { font-size: 0.71875rem; color: var(--text-muted); }
.dash__call-meta { display: grid; text-align: right; line-height: 1.35; }
.dash__call-meta strong { font-size: var(--fs-xs); color: var(--text-heading); }
.dash__call-meta span { font-size: 0.6875rem; color: var(--color-green); }

.hero-mini { background: var(--bg-surface); padding: 20px 0 0; }
.dash--mini { box-shadow: var(--shadow-sm); border: 1px solid var(--border-color); }
.dash--mini .dash__body { padding: 18px; }
.dash--mini .dash__stats { margin-top: 14px; }

/* Logo strip */
.logo-strip { border-bottom: 1px solid var(--border-color-soft); }
.logo-strip__inner { display: flex; align-items: center; justify-content: center; gap: 56px; padding-block: 40px; }
.logo-strip__label { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); white-space: nowrap; }
.logo-strip__list { display: flex; align-items: center; gap: 48px; flex-wrap: wrap; }
.logo-strip__list li { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 1.25rem; letter-spacing: -0.02em; color: #8792AE; white-space: nowrap; }

/* Rate check */
.swap-stack { display: flex; flex-direction: column; }
.rate-check-section { padding-top: 60px; }
.rate-check {
  display: grid; grid-template-columns: minmax(0, 440px) minmax(0, 1fr); gap: 48px; align-items: center;
  padding: 44px 48px; border-radius: var(--radius-xl); color: var(--text-on-dark-2);
  background: var(--motif-arcs) right -120px top -150px / 420px 420px no-repeat,
              radial-gradient(640px 320px at 100% 0%, rgba(10, 108, 255, .34), transparent 62%),
              radial-gradient(420px 260px at 0% 100%, rgba(43, 176, 255, .14), transparent 60%),
              var(--color-navy);
  border: 1px solid rgba(124, 203, 255, .14);
  box-shadow: 0 24px 60px -24px rgba(0, 11, 50, .55);
}
.rate-check__title { color: #fff; font-size: clamp(1.5rem, 1.1rem + 1vw, 2rem); line-height: 1.16; }
.rate-check__text { margin-top: 14px; font-size: var(--fs-body); color: #D2DBF3; }
.rate-check__label { display: block; margin-bottom: 10px; font-size: var(--fs-small); font-weight: var(--fw-bold); color: #fff; }
.rate-check__row { display: flex; gap: 12px; }
.rate-check__row .input { border-color: #fff; }
.rate-check__row .btn { min-height: 56px; padding: 0 28px; }
.rate-check__popular { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 16px; }
.rate-check__popular-label { font-size: var(--fs-xs); color: var(--text-on-dark-3); margin-right: 2px; }
.rate-check__result {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 16px; padding: 14px 16px;
  border-radius: var(--radius-md); background: var(--color-navy-700); border: 1px solid var(--color-navy-500); font-size: var(--fs-body-sm);
}
.rate-check__result strong { color: #fff; }
.rate-check__result .rc-price { color: #fff; font-family: var(--font-display); font-weight: var(--fw-bold); }
.rate-check__result a { color: var(--color-sky-light); font-weight: var(--fw-bold); margin-left: auto; }
.rate-check__result a:hover { color: #fff; }
.rate-check__result .is-free { color: var(--color-green-bright); font-weight: var(--fw-bold); }

/* Features grid */
.section--features { padding-top: 100px; padding-bottom: 80px; }
.feature-grid__more { margin-top: var(--space-7); }

/* Numbers */
.numbers { padding-block: 76px; }
.numbers__inner { display: grid; grid-template-columns: minmax(0, 620px) minmax(0, 540px); justify-content: space-between; align-items: center; gap: 48px; }
.numbers__copy > * + * { margin-top: 20px; }
.numbers__copy .h2 { margin-top: 20px; }
.numbers__copy .lead { max-width: 510px; }
.numbers__copy .checklist { margin-top: 30px; }
.numbers__copy .text-link { margin-top: 36px; }
.numbers__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.number-card { padding: 20px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: #fff; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease), transform var(--dur) var(--ease); }
.number-card:not(.number-card--dark):hover { border-color: var(--border-brand); box-shadow: var(--shadow-sm); transform: translateY(-2px); }
.number-card__head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.number-card__country { font-size: var(--fs-small); font-weight: var(--fw-bold); color: var(--text-heading); }
.number-card__number { margin-top: 18px; font-family: var(--font-display); font-size: 1.25rem; font-weight: var(--fw-bold); color: var(--color-navy); letter-spacing: -0.01em; white-space: nowrap; }
.number-card__number .mask { letter-spacing: 0.05em; color: var(--color-blue); }
.number-card__meta { margin-top: 8px; font-size: var(--fs-xs); color: var(--text-muted); }
.number-card--dark {
  border-color: transparent; display: flex; flex-direction: column; justify-content: center;
  background: var(--motif-arcs) right -70px top -70px / 220px 220px no-repeat, var(--gradient-surface);
  box-shadow: var(--shadow-glow);
}
.number-card__big { font-family: var(--font-display); font-weight: var(--fw-extrabold); color: #fff; font-size: 2.25rem; line-height: 1; letter-spacing: -0.03em; }
.number-card--dark .number-card__meta { color: #EAF2FF; font-size: var(--fs-small); margin-top: 12px; }

/* Compare */
.section--compare { padding-top: 88px; padding-bottom: 80px; }
.compare-table-wrap { border-radius: var(--radius-card); box-shadow: var(--shadow-sm); }
.compare-table { table-layout: fixed; }
.compare-table th, .compare-table td { padding: 19px 28px; text-align: left; font-size: var(--fs-body-sm); border-bottom: 1px solid var(--border-color-soft); vertical-align: middle; }
.compare-table tr > * + * { border-left: 1px solid var(--border-color-soft); }
.compare-table thead th { background: var(--color-navy); color: #fff; font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); border-bottom: 0; padding-block: 21px; }
.compare-table thead th:nth-child(2) { background: linear-gradient(180deg, rgba(10, 108, 255, .28), rgba(10, 108, 255, .12)), var(--color-navy); color: #fff; box-shadow: inset 0 3px 0 var(--color-sky); }
.compare-table thead tr > * + * { border-left-color: var(--border-color-dark); }
.compare-table thead th:first-child { font-size: var(--fs-2xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #C3CDEB; }
.compare-table thead th:last-child { color: var(--text-on-dark-3); }
.compare-table tbody th { font-weight: var(--fw-bold); color: var(--text-heading); }
.compare-table tbody td:nth-child(2) { background: #F3F8FF; color: var(--text-heading); font-weight: var(--fw-semibold); }
.compare-table tbody td:last-child { color: var(--text-muted); }
.compare-table tbody tr:last-child > * { border-bottom: 0; }

/* Steps */
.steps {
  margin-top: 80px; padding: 64px 48px 56px; border-radius: var(--radius-lg);
  background: radial-gradient(700px 240px at 50% 0%, rgba(10, 108, 255, .08), transparent 70%), var(--bg-surface);
  border: 1px solid var(--border-color-soft);
}
.steps__title { text-align: center; }
.steps__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 40px; margin-top: 44px; counter-reset: none; }
.step__num {
  display: grid; place-items: center; width: 46px; height: 46px; border-radius: var(--radius-btn);
  background: var(--color-navy); color: #fff; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 1.125rem; margin-bottom: 26px;
  box-shadow: 0 10px 22px -10px rgba(0, 11, 50, .6);
}
.step__num--accent { background: var(--gradient-button); box-shadow: var(--shadow-glow); }

/* Testimonials */
.testimonials { padding-block: 84px 80px; }
.testimonials__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 40px; }
.testimonials__head .h2 { margin-top: 14px; }
.rating { display: grid; justify-items: end; gap: 6px; }
.rating__meta { font-size: var(--fs-xs); color: var(--text-muted); white-space: nowrap; }
.rating__score { font-weight: var(--fw-bold); color: var(--text-heading); font-size: var(--fs-small); }
.testimonial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.testimonial { position: relative; display: flex; flex-direction: column; gap: 22px; padding: 30px; background: #fff; border: 1px solid var(--border-color); border-radius: var(--radius-card); transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.testimonial:hover { border-color: var(--border-brand); box-shadow: var(--shadow-sm); }
.testimonial::after { content: "\201D"; position: absolute; top: 12px; right: 22px; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 4rem; line-height: 1; color: var(--bg-blue-tint-2); pointer-events: none; }
.testimonial__quote { flex: 1; }
.testimonial__quote p { font-size: var(--fs-body-lg); line-height: 1.6; color: #26335A; }
.testimonial__author { display: flex; align-items: center; gap: 12px; }
.testimonial__author > span:last-child { display: grid; line-height: 1.4; }
.testimonial__author strong { font-size: var(--fs-small); color: var(--text-heading); }
.testimonial__author span span { font-size: var(--fs-xs); color: var(--text-muted); }

/* Plans (home + pricing) */
.section--pricing-preview { padding-block: 84px 80px; }
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; align-items: start; }
.plan { position: relative; display: flex; flex-direction: column; padding: 32px; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: #fff; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.plan:not(.plan--featured):hover { border-color: var(--border-brand); box-shadow: var(--shadow-md); }
.plan__name { font-size: 1.3125rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.plan__desc { margin-top: 6px; font-size: var(--fs-body-sm); color: var(--text-muted); line-height: 1.5; }
.plan__price { display: flex; align-items: baseline; gap: 8px; margin-top: 28px; }
.plan__amount { font-family: var(--font-display); font-size: 2.75rem; font-weight: var(--fw-extrabold); color: var(--text-heading); letter-spacing: -0.035em; line-height: 1; }
.plan__unit { font-size: var(--fs-body-sm); color: var(--text-muted); }
.plan__note { margin-top: 12px; font-size: var(--fs-small); color: var(--text-muted); }
.plan .btn { margin-top: 24px; }
.plan__list { margin-top: 28px; }
.plan__list-title { margin-top: 32px; font-family: var(--font-display); font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--text-muted); }
.plan__list-title + .plan__list { margin-top: 18px; }
.plan--featured {
  color: var(--text-on-dark-2); border: 1px solid rgba(43, 176, 255, .45);
  background: var(--motif-arcs) right -110px top -110px / 320px 320px no-repeat, var(--glow-navy), var(--color-navy);
  box-shadow: var(--shadow-plan), 0 0 0 1px rgba(10, 108, 255, .18), 0 24px 60px -30px rgba(10, 108, 255, .7);
}
.plan--featured .plan__name, .plan--featured .plan__amount { color: #fff; }
.plan--featured .plan__desc, .plan--featured .plan__unit, .plan--featured .plan__note { color: #B9C5E6; }
.plan--featured .plan__list-title { color: var(--text-on-dark-3); }
.plan--featured .checklist li { color: #E3EAFB; }
.plan--featured .checklist .icon { color: var(--color-sky); }
.plan__badge {
  position: absolute; top: -14px; left: 32px;
  padding: 6px 12px; border-radius: var(--radius-pill); background: var(--gradient-button); color: #fff;
  font-family: var(--font-display); font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.1em; text-transform: uppercase; line-height: 1.3;
  box-shadow: var(--shadow-glow);
}
.plans--compact .plan__price { margin-top: 32px; }
.plans__more { margin-top: 36px; }

/* App promo */
.apps-section { padding-bottom: 80px; }
.app-promo {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 48px; align-items: center; padding: 48px;
  border: 1px solid var(--border-color); border-radius: var(--radius-lg); overflow: hidden;
  background: radial-gradient(520px 320px at 100% 50%, rgba(10, 108, 255, .10), transparent 70%), var(--bg-surface);
}
.app-promo__copy { max-width: 640px; }
.app-promo__copy .lead { margin-top: 14px; font-size: var(--fs-body-lg); }
.store-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 32px; }
.store-btn {
  display: inline-flex; align-items: center; gap: 12px; min-height: 62px; padding: 0 22px;
  border-radius: var(--radius-btn); background: var(--color-navy); color: #fff; text-decoration: none;
  transition: background-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.store-btn:hover { background: var(--color-navy-700); color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(0, 11, 50, .6); }
.store-btn .icon { width: 22px; height: 22px; color: var(--color-sky); }
.store-btn > span { display: grid; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: 0.9375rem; line-height: 1.2; }
.store-btn small { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: 0.6875rem; opacity: .85; }
.app-promo__visual { display: flex; align-items: center; gap: 24px; margin-right: 0; }
.qr-box { display: grid; place-items: center; width: 120px; height: 120px; border: 1px dashed var(--border-color-strong); border-radius: var(--radius-md); background: #fff; font-size: var(--fs-2xs); font-weight: var(--fw-bold); color: var(--text-muted); }
.phone-mock { width: 188px; padding: 9px; border-radius: 30px; background: var(--color-navy); box-shadow: var(--shadow-float), inset 0 0 0 1px rgba(124, 203, 255, .25); }
.phone-mock__screen { padding: 22px 16px 16px; border-radius: 22px; background: #fff; }
.phone-mock__label { font-size: 0.625rem; color: var(--text-muted); }
.phone-mock__balance { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 1.3125rem; color: var(--text-heading); letter-spacing: -0.02em; }
.phone-mock__keys { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 12px; }
.phone-mock__keys i { height: 38px; border-radius: 10px; background: var(--bg-surface); border: 1px solid var(--border-color-soft); }
.phone-mock__call { display: grid; place-items: center; height: 42px; margin-top: 16px; border-radius: 21px; background: var(--gradient-button); color: #fff; box-shadow: var(--shadow-glow); }
.phone-mock__call .icon { width: 18px; height: 18px; }

/* Trust band */
.trust-band { background: radial-gradient(800px 200px at 50% 0%, rgba(10, 108, 255, .18), transparent 70%), var(--color-navy); color: var(--text-on-dark-3); }
.trust-band__inner { display: flex; align-items: center; justify-content: space-between; gap: 32px; padding-block: 40px; }
.trust-band__list { display: flex; flex-wrap: wrap; gap: 20px 44px; }
.trust-band__list > li { display: flex; align-items: center; gap: 12px; }
.trust-band__list > li > span:last-child { display: grid; line-height: 1.35; }
.trust-band__list strong { color: #fff; font-family: var(--font-display); font-size: var(--fs-small); }
.trust-band__list span span { font-size: var(--fs-xs); }
.trust-band__list .icon-tile .icon { width: 20px; height: 20px; }
.trust-band__list--inline > li { gap: 10px; }
.trust-band__list--inline .icon { width: 22px; height: 22px; color: var(--color-sky); }
.trust-band__list--inline strong { font-family: var(--font-body); font-size: var(--fs-body); }
.trust-band__pay { display: flex; align-items: center; gap: 18px; }
.trust-band__pay-label { font-size: var(--fs-small); white-space: nowrap; }
.trust-band--slim .trust-band__inner { padding-block: 38px; }

/* FAQ */
.faq { padding-block: 80px; }
.faq__inner { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 72px; align-items: start; }
.faq__intro { position: sticky; top: calc(var(--header-sticky-h) + 32px); }
.faq__text { margin-top: 18px; font-size: var(--fs-body); line-height: 1.65; }
.faq__intro .text-link { margin-top: 24px; }

/* CTA band */
.cta-section { padding-bottom: 72px; }
.cta-band { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 40px; padding: 56px; border-radius: var(--radius-xl); color: #fff; overflow: hidden; isolation: isolate; }
.cta-band--brand, .cta-band--orange {
  background: var(--motif-arcs) right -140px top -160px / 520px 520px no-repeat,
              radial-gradient(600px 300px at 90% 120%, rgba(0, 11, 50, .35), transparent 70%),
              var(--gradient-surface);
  box-shadow: 0 30px 60px -30px rgba(10, 99, 240, .75);
}
.cta-band--navy {
  background: var(--motif-fibre) right -40px bottom -60px / 560px auto no-repeat, var(--glow-navy), var(--color-navy);
  border: 1px solid rgba(124, 203, 255, .14);
}
.cta-band__title { color: #fff; font-size: clamp(1.625rem, 1.15rem + 1.3vw, 2.375rem); letter-spacing: var(--ls-display); line-height: 1.15; }
.cta-band__text { margin-top: 12px; font-size: var(--fs-body-lg); color: #fff; max-width: 560px; }
.cta-band--navy .cta-band__text { color: #D2DBF3; }
.cta-band__actions { display: flex; flex-wrap: wrap; gap: 12px; flex: none; }
.cta-band__actions--stack { flex-direction: column; min-width: 206px; }


/* 10. FEATURES PAGE ======================================================= */
.page-hero {
  position: relative; overflow: hidden; isolation: isolate; color: var(--text-on-dark-2); padding-block: 84px;
  background: var(--motif-fibre) right -40px bottom -40px / min(640px, 60vw) auto no-repeat,
              var(--motif-arcs) right -180px top -220px / 560px 560px no-repeat,
              var(--glow-navy), var(--bg-dark);
}
.page-hero__title { color: #fff; max-width: 800px; }
.page-hero__title--wide { max-width: 800px; }
.page-hero__lead { margin-top: 22px; max-width: 620px; color: #D2DBF3; }
.page-hero--center { text-align: center; }
.page-hero--center .page-hero__title, .page-hero--center .page-hero__lead { margin-inline: auto; }
.page-hero--center .page-hero__lead { max-width: 640px; }
.page-hero__meta { margin-top: 18px; font-size: var(--fs-small); color: var(--text-on-dark-3); }
.breadcrumb ol { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; font-size: var(--fs-small); margin-bottom: 18px; }
.breadcrumb li { display: inline-flex; align-items: center; gap: 8px; color: #fff; font-weight: var(--fw-semibold); }
.breadcrumb li + li::before { content: "/"; color: var(--color-sky); font-weight: var(--fw-regular); }
.breadcrumb a { color: var(--text-on-dark-3); text-decoration: none; font-weight: var(--fw-regular); }
.breadcrumb a:hover { color: #fff; text-decoration: underline; }

.section--calling { padding-top: 88px; padding-bottom: 64px; }
.split--calling { grid-template-columns: minmax(0, 530px) minmax(0, 688px); justify-content: space-between; gap: 64px; }
.stat-row { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 36px !important; }
.stat { position: relative; padding-left: 18px; }
.stat::before { content: ""; position: absolute; left: 0; top: 3px; bottom: 3px; width: 3px; border-radius: 3px; background: var(--gradient-brand); }
.stat__value { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 1.75rem; color: var(--text-heading); letter-spacing: -0.02em; line-height: 1.1; }
.stat__label { margin-top: 6px; font-size: var(--fs-small); color: var(--text-muted); }
.route-card { padding: 34px 32px 26px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md); }
.route-card__label { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); }
.route-list { display: grid; gap: 18px; margin-top: 22px; }
.route__row { display: flex; justify-content: space-between; gap: 12px; font-size: var(--fs-body-sm); }
.route__name { color: var(--text-heading); font-weight: var(--fw-semibold); }
.route__value { color: var(--color-green); font-weight: var(--fw-bold); white-space: nowrap; }
.route__track { height: 8px; margin-top: 9px; border-radius: 8px; background: var(--bg-blue-tint); overflow: hidden; }
.route__bar { display: block; height: 100%; width: var(--w); border-radius: 8px; background: var(--gradient-brand); transform-origin: left; }
.js-ready .route-card:not(.is-visible) .route__bar { transform: scaleX(0); }
.js-ready .route-card.is-visible .route__bar { transform: scaleX(1); transition: transform 1.1s var(--ease) .2s; }
.route-card__note { margin-top: 20px; font-size: var(--fs-xs); color: var(--text-muted); }

.section--call-handling { padding-top: 24px; padding-bottom: 84px; }
.split--handling { grid-template-columns: minmax(0, 688px) minmax(0, 520px); justify-content: space-between; gap: 72px; }
.mini-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.mini-card { padding: 22px 22px 24px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: #fff; transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease); }
.mini-card:hover { border-color: var(--border-brand); box-shadow: var(--shadow-sm); }
.mini-card > .icon { width: 38px; height: 38px; padding: 9px; border-radius: 10px; color: var(--color-blue); background: var(--bg-blue-tint); }
.mini-card:hover > .icon { color: #fff; background: var(--gradient-brand); }
.mini-card__title { margin-top: 16px; font-family: var(--font-display); font-size: var(--fs-body); font-weight: var(--fw-bold); letter-spacing: -0.005em; }
.mini-card__text { margin-top: 6px; font-size: var(--fs-small); line-height: 1.6; }

.section--integrations { padding-top: 84px; padding-bottom: 84px; }
.split--integrations { grid-template-columns: minmax(0, 480px) minmax(0, 728px); justify-content: space-between; gap: 64px; }
.integration-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.integration {
  display: grid; place-items: center; align-content: center; min-height: 94px; padding: 12px;
  border: 1px solid var(--border-color); border-radius: var(--radius-md); background: #fff;
  font-family: var(--font-display); font-weight: var(--fw-bold); color: var(--text-muted); font-size: var(--fs-small); text-align: center;
  transition: border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.integration:hover { border-color: var(--border-brand); color: var(--color-blue); }
.integration--api { border-color: transparent; color: #fff; gap: 2px; background: var(--motif-arcs) right -50px top -50px / 140px 140px no-repeat, var(--color-navy); }
.integration--api:hover { color: #fff; border-color: transparent; }
.integration--api .icon { width: 18px; height: 18px; color: var(--color-sky); margin-bottom: 2px; }
.integration--api strong { font-size: 1rem; letter-spacing: -0.01em; }
.integration--api span { font-family: var(--font-body); font-weight: var(--fw-regular); font-size: var(--fs-2xs); color: #C3CDEB; }


/* 11. PRICING PAGE ======================================================== */
.page-hero--pricing { padding-bottom: 140px; }
.billing-toggle { display: inline-flex; gap: 4px; margin-top: 40px; padding: 4px; border-radius: var(--radius-md); background: rgba(6, 21, 74, .85); border: 1px solid rgba(124, 203, 255, .18); }
.billing-toggle__btn { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 22px; border-radius: 10px; color: #D2DBF3; font-family: var(--font-display); font-weight: var(--fw-bold); font-size: var(--fs-small); transition: all var(--dur-fast) var(--ease); }
.billing-toggle__btn[aria-pressed="true"] { background: #fff; color: var(--color-navy); box-shadow: 0 6px 16px -8px rgba(0, 0, 0, .5); }
.billing-toggle__btn:not([aria-pressed="true"]):hover { color: #fff; }
.billing-toggle__save { font-size: var(--fs-2xs); color: var(--color-green-bright); font-weight: var(--fw-bold); }
.billing-toggle__btn[aria-pressed="true"] .billing-toggle__save { color: var(--color-green); }
.plans-section { margin-top: -80px; padding-bottom: 80px; position: relative; }
.plans--full .plan { padding: 36px 34px 38px; box-shadow: var(--shadow-sm); }
.plans--full .plan--featured { box-shadow: var(--shadow-plan), 0 0 0 1px rgba(10, 108, 255, .18), 0 24px 60px -30px rgba(10, 108, 255, .7); margin-top: -12px; padding-top: 48px; }
.plans--full .plan__amount { font-size: 3.125rem; }
.plans--full .plan__price { margin-top: 32px; }
.plans--full .plan .btn { margin-top: 28px; }
.plan__amount.is-updating { animation: price-swap var(--dur) var(--ease); }
@keyframes price-swap { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.number-types .number-type { display: flex; flex-direction: column; padding: 26px; }
.number-type:hover { border-color: var(--border-brand); box-shadow: var(--shadow-sm); }
.number-type .badge { align-self: flex-start; justify-self: start; margin-bottom: 18px; }
.number-type__title { font-size: var(--fs-h4); font-weight: var(--fw-bold); }
.number-type__main { order: 1; }
.number-type__price { order: 2; margin-top: 6px; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 1.5rem; color: var(--text-heading); letter-spacing: -0.02em; }
.number-type__price small { font-size: var(--fs-body-sm); font-weight: var(--fw-medium); color: var(--text-muted); letter-spacing: 0; }
.number-type__price--free { color: var(--color-green); }
.number-type__desc { order: 3; }
.number-type .number-type__desc { margin-top: 10px; font-size: var(--fs-small); line-height: 1.6; }
.number-type { display: grid !important; grid-template-areas: "badge" "title" "price" "desc"; }
.number-type .badge { grid-area: badge; }
.number-type__main { display: contents; }
.number-type__title { grid-area: title; }
.number-type__price { grid-area: price; }
.number-type__desc { grid-area: desc; }

.plan-table { min-width: 720px; }
.plan-table th, .plan-table td { padding: 17px 26px; font-size: var(--fs-body-sm); border-bottom: 1px solid var(--border-color-soft); text-align: center; }
.plan-table tr > * + * { border-left: 1px solid var(--border-color-soft); }
.plan-table th:first-child { text-align: left; width: 40%; }
.plan-table thead th { background: var(--color-navy); color: #fff; font-family: var(--font-display); font-size: var(--fs-small); font-weight: var(--fw-bold); padding-block: 20px; border-bottom: 0; }
.plan-table thead th.is-featured { background: linear-gradient(180deg, rgba(10, 108, 255, .28), rgba(10, 108, 255, .12)), var(--color-navy); box-shadow: inset 0 3px 0 var(--color-sky); }
.plan-table thead tr > * + * { border-left-color: var(--border-color-dark); }
.plan-table thead th:first-child { font-size: var(--fs-2xs); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: #C3CDEB; }
.plan-table tbody th { color: var(--text-heading); font-weight: var(--fw-bold); }
.plan-table tbody td { color: var(--text-muted); }
.plan-table td.is-featured { background: #F3F8FF; color: var(--text-heading); font-weight: var(--fw-bold); }
.plan-table tbody tr:last-child > * { border-bottom: 0; }
.plan-table tbody tr:hover > * { background-color: #F9FBFF; }
.plan-table tbody tr:hover > td.is-featured { background-color: #EAF2FF; }


/* 12. INTERNATIONAL RATES PAGE =========================================== */
.page-hero--rates { padding-top: 64px; padding-bottom: 72px; }
.rates-tool {
  display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 32px; align-items: start;
  margin-top: 48px; padding: 34px; border-radius: var(--radius-xl); background: #fff; text-align: left; color: var(--text-body);
  box-shadow: var(--shadow-lg); border: 1px solid rgba(124, 203, 255, .25);
}
.rates-tool__search .field__label { display: block; margin-bottom: 10px; }
.rates-tool__search .combo { width: 100%; }
.rates-table-wrap { margin-top: 18px; }
.rates-table th, .rates-table td { padding: 14px 24px; font-size: var(--fs-body-sm); border-bottom: 1px solid var(--border-color-soft); text-align: left; }
.rates-table .num { text-align: right; }
.rates-table thead th { background: var(--bg-surface); font-family: var(--font-display); font-size: 0.6875rem; font-weight: var(--fw-bold); letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-muted); padding-block: 14px; }
.rates-table tbody tr { transition: background-color var(--dur-fast) var(--ease); }
.rates-table tbody tr:hover { background: #F7FAFF; }
.rates-table tbody tr.is-selected { background: var(--bg-blue-tint); box-shadow: inset 3px 0 0 var(--color-blue); }
.rates-table tbody tr.is-selected .rates-table__code, .rates-table tbody tr.is-selected .rates-table__code-sm { color: #3F4E78; }
.rates-table tbody tr:last-child > * { border-bottom: 0; }
.rates-table tbody th { padding: 0; font-weight: var(--fw-bold); }
.rates-table__pick { display: flex; flex-direction: column; justify-content: center; width: 100%; min-height: 51px; padding: 8px 24px; text-align: left; color: var(--text-heading); font-weight: var(--fw-semibold); }
.rates-table__pick:hover { color: var(--color-blue); }
.rates-table__pick:focus-visible { outline-offset: -3px; }
.rates-table__code-sm { display: none; font-size: var(--fs-xs); color: var(--text-muted); font-weight: var(--fw-regular); }
.rates-table__code { color: var(--text-muted); }
.rates-table td.num { color: var(--text-heading); font-weight: var(--fw-bold); }
.rates-table mark { background: rgba(43, 176, 255, .24); color: inherit; border-radius: 3px; }
.rates-table__empty { padding: 24px; text-align: center; color: var(--text-muted); font-size: var(--fs-body-sm); }
.rates-tool__foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-top: 14px; }
.rates-tool__count { font-size: var(--fs-xs); color: var(--text-muted); }
.rates-tool__foot .text-link { font-size: var(--fs-small); }
.rates-tool__sample { margin-top: 8px; font-size: var(--fs-xs); color: var(--text-muted); }

.estimate { position: sticky; top: calc(var(--header-sticky-h) + 20px); padding: 28px 26px 26px; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: radial-gradient(420px 200px at 100% 0%, rgba(10, 108, 255, .08), transparent 70%), var(--bg-surface); }
.estimate__country { margin-top: 12px; font-size: 1.375rem; font-weight: var(--fw-extrabold); }
.estimate__meta { margin-top: 4px; font-size: var(--fs-small); color: var(--text-muted); }
.estimate .segmented { margin-top: 18px; }
.range-field { margin-top: 22px; }
.range-field__head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 8px; font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: var(--text-heading); }
.range-field__value { color: var(--color-blue); font-family: var(--font-display); font-size: var(--fs-small); }
.estimate__result { margin-top: 18px; padding: 6px 20px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: #fff; }
.estimate__line { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; font-size: var(--fs-body-sm); color: var(--text-muted); }
.estimate__line + .estimate__line { border-top: 1px solid var(--border-color-soft); }
.estimate__line strong { color: var(--text-heading); font-family: var(--font-display); font-size: var(--fs-body); }
.estimate__line--main strong { font-size: 1.875rem; font-weight: var(--fw-extrabold); letter-spacing: -0.03em; font-variant-numeric: tabular-nums; color: var(--color-navy); }
.estimate__line .text-green { color: var(--color-green); }
.estimate__note { display: flex; gap: 10px; margin-top: 16px; font-size: var(--fs-xs); line-height: 1.5; }
.estimate__note .icon { width: 16px; height: 16px; color: var(--color-blue); margin-top: 1px; }
.estimate .btn { margin-top: 22px; }

.most-called { padding-block: 80px; }
.dest-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px 20px; }
.dest-card {
  display: flex; width: 100%; align-items: center; justify-content: space-between; gap: 12px;
  padding: 22px 22px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: #fff; text-align: left;
  transition: border-color var(--dur) var(--ease), transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}
.dest-card:hover { border-color: var(--border-brand); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.dest-card__name { display: grid; font-weight: var(--fw-bold); color: var(--text-heading); line-height: 1.35; }
.dest-card__name span { font-weight: var(--fw-regular); font-size: var(--fs-xs); color: var(--text-muted); margin-top: 2px; }
.dest-card__price { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 1.25rem; color: var(--color-blue); letter-spacing: -0.02em; }
.bill-grid .feature-card { padding: 28px; }
.bill-grid .feature-card .icon-tile { margin-bottom: 26px; width: 42px; height: 42px; }
.bill-grid .icon-tile .icon { width: 20px; height: 20px; }


/* 13. CONTACT / ABOUT / LEGAL / SIMPLE =================================== */
.page-hero--contact { padding-block: 72px 76px; }
.page-hero--contact .page-hero__title { max-width: 900px; }
.section--channels { padding-top: 60px; padding-bottom: 0; }
.channel { display: flex; flex-direction: column; align-items: flex-start; padding: 26px; }
.channel:hover { border-color: var(--border-brand); box-shadow: var(--shadow-sm); }
.channel .icon-tile { margin-bottom: 26px; }
.channel__title { font-size: 1.125rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.channel__text { margin-top: 6px; font-size: var(--fs-small); line-height: 1.6; flex: 1; }
.channel__link { margin-top: 16px; font-weight: var(--fw-bold); font-size: var(--fs-body-sm); color: var(--color-blue); text-decoration: none; }
.channel__link:hover { text-decoration: underline; color: var(--color-blue-hover); }
.channel__link--green { color: var(--color-green); }
.channel__status { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; font-weight: var(--fw-bold); font-size: var(--fs-small); color: var(--color-green); }
.channel__status:hover { text-decoration: underline; }
.channel-list { display: grid; gap: 12px; }
.channel-row { display: flex; width: 100%; align-items: center; gap: 16px; min-height: 84px; padding: 16px 18px; border: 1px solid var(--border-color); border-radius: var(--radius-md); background: #fff; text-decoration: none; text-align: left; color: var(--text-body); }
.channel-row:hover { border-color: var(--border-brand); color: var(--text-body); }
.channel-row__text { display: grid; flex: 1; gap: 2px; font-size: var(--fs-xs); line-height: 1.45; }
.channel-row__text strong { font-size: var(--fs-body); color: var(--text-heading); }
.channel-row__chevron { width: 18px; height: 18px; color: var(--color-blue); }

.section--contact-main { padding-top: 60px; padding-bottom: 72px; }
.contact-layout { display: grid; grid-template-columns: minmax(0, 832px) minmax(0, 400px); justify-content: space-between; gap: 48px; align-items: start; }
.form-card { position: relative; padding: 50px 40px 40px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-sm); scroll-margin-top: calc(var(--header-sticky-h) + 20px); overflow: hidden; }
.form-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--gradient-brand); }
.h2--form { font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.875rem); }
.form-card__intro { margin-top: 10px; font-size: var(--fs-body); }
.form { margin-top: 30px; }
.form__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 20px; }
.form__submit { display: flex; align-items: center; flex-wrap: wrap; gap: 14px 24px; margin-top: 18px; }
.form__submit .btn { min-width: 190px; }
.form__secure { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-small); color: var(--text-muted); }
.form__secure .icon { width: 17px; height: 17px; color: var(--color-green); }
.form-alert { margin-top: 18px; padding: 14px 16px; border-radius: var(--radius-btn); background: #FEF3F2; border: 1px solid #FECDCA; color: #912018; font-size: var(--fs-body-sm); }
.form-success { text-align: center; padding: 24px 8px; }
.form-success:focus { outline: none; }
.form-success__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 50%; background: var(--bg-green-tint); color: var(--color-green); margin-bottom: 20px; }
.form-success__icon .icon { width: 32px; height: 32px; }
.form-success p { margin-top: 12px; max-width: 520px; margin-inline: auto; }
.form-success__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }

.contact-aside { display: grid; gap: 20px; }
.info-card { padding: 32px; border-radius: var(--radius-lg); }
.info-card__title { font-size: 1.25rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); }
.info-card--navy { color: var(--text-on-dark-2); background: var(--motif-arcs) right -90px top -90px / 280px 280px no-repeat, var(--glow-navy), var(--color-navy); }
.info-card--navy .info-card__title { color: #fff; }
.office + .office { margin-top: 22px; padding-top: 22px; border-top: 1px solid var(--border-color-dark); }
.info-card__title + .office { margin-top: 24px; }
.office__label { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-sky); }
.office__address { margin-top: 10px; font-size: var(--fs-body-sm); line-height: 1.7; }
.info-card--surface { background: var(--bg-surface); border: 1px solid var(--border-color); }
.response-list { margin-top: 18px; }
.response-list div { display: flex; justify-content: space-between; gap: 12px; padding-block: 14px; font-size: var(--fs-body-sm); }
.response-list div + div { border-top: 1px solid var(--border-color); }
.response-list dt { color: var(--text-muted); }
.response-list dd { font-weight: var(--fw-bold); color: var(--text-heading); text-align: right; }
.response-list dd.text-green { color: var(--color-green); }
.info-card--tint, .info-card--warm { background: linear-gradient(150deg, #EFF5FF 0%, #E2EDFF 100%); border: 1px solid #CFE0FF; color: #2A3A68; }
.info-card--tint .info-card__title, .info-card--warm .info-card__title { color: var(--color-navy); }
.info-card--tint p, .info-card--warm p { margin-top: 12px; font-size: var(--fs-body-sm); line-height: 1.65; }
.info-card--tint .text-link, .info-card--warm .text-link { margin-top: 18px; }

/* About */
.split--about { grid-template-columns: minmax(0, 1fr) minmax(0, 520px); }
.about-stats { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.about-stat { padding: 28px 24px; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: #fff; }
.about-stat dt { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 2.125rem; letter-spacing: -0.03em; color: var(--text-heading); line-height: 1; }
.about-stat dd { margin-top: 10px; font-size: var(--fs-small); color: var(--text-muted); }
.about-stat--dark { border-color: transparent; background: var(--motif-arcs) right -70px top -70px / 220px 220px no-repeat, var(--gradient-surface); box-shadow: var(--shadow-glow); }
.about-stat--dark dt { color: #fff; }
.about-stat--dark dd { color: #EAF2FF; }
.split--about-where { grid-template-columns: minmax(0, 1fr) minmax(0, 440px); }
.split__copy .button-row { margin-top: 28px; }

/* Legal */
.page-hero--legal { padding-block: 64px; }
.legal__inner { display: grid; grid-template-columns: 260px minmax(0, 760px); gap: 64px; justify-content: start; }
.legal__toc { position: sticky; top: calc(var(--header-sticky-h) + 32px); align-self: start; padding: 22px; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-surface); }
.legal__toc-title { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-blue); }
.legal__toc ol { display: grid; gap: 4px; margin-top: 12px; padding: 0; list-style: none; counter-reset: toc; }
.legal__toc a { display: block; padding: 6px 0 6px 12px; margin-left: -12px; border-left: 2px solid transparent; font-size: var(--fs-small); color: var(--text-body); text-decoration: none; transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease); }
.legal__toc a:hover { color: var(--color-blue); border-left-color: var(--color-blue); }
.prose { font-size: var(--fs-body-lg); line-height: 1.75; }
.prose h2 { font-size: 1.375rem; margin-top: 44px; scroll-margin-top: calc(var(--header-sticky-h) + 24px); }
.prose h2:first-child { margin-top: 0; }
.prose p, .prose ul { margin-top: 14px; }
.prose ul { padding-left: 1.2em; }
.prose li + li { margin-top: 8px; }
.prose li::marker { color: var(--color-blue); }
.prose strong { color: var(--text-heading); }
.prose code { font-family: var(--font-mono); font-size: .88em; padding: 2px 6px; border-radius: 4px; background: var(--bg-surface); border: 1px solid var(--border-color-soft); }

/* Simple pages (404, thank you) */
.simple-page { position: relative; padding-block: 120px; background: radial-gradient(700px 360px at 50% 0%, rgba(10, 108, 255, .07), transparent 70%); }
.simple-page__inner { max-width: 720px; text-align: center; }
.simple-page__inner .lead { margin-top: 18px; }
.simple-page__inner .button-row { margin-top: 32px; }
.simple-page__code::before { content: "404"; }
.simple-page__code { font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: clamp(5rem, 3rem + 8vw, 9rem); line-height: 1; letter-spacing: -0.05em; color: var(--color-blue); margin-bottom: 16px; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
  .simple-page__code { background: var(--gradient-brand); -webkit-background-clip: text; background-clip: text; color: transparent; -webkit-text-fill-color: transparent; }
}
.simple-page__icon { display: inline-grid; place-items: center; width: 76px; height: 76px; border-radius: 50%; margin-bottom: 24px; }
.simple-page__icon .icon { width: 38px; height: 38px; }
.simple-page__icon--green { background: var(--bg-green-tint); color: var(--color-green); }
.simple-page__links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 32px; margin-top: 36px; }


/* 13b. ACCOUNTS — sign up, log in, password reset, account dashboard ===== */
.btn--danger { --_bg: var(--color-danger); --_fg: #fff; --_bd: var(--color-danger); }
.btn--danger:hover { --_bg: #912018; --_bd: #912018; }
.eyebrow--on-dark { color: var(--color-sky); }

.alert { display: flex; gap: 12px; align-items: flex-start; margin-bottom: 20px; padding: 14px 16px; border-radius: var(--radius-btn); border: 1px solid; font-size: var(--fs-body-sm); line-height: 1.55; text-align: left; }
.alert > .icon { width: 20px; height: 20px; flex: none; margin-top: 1px; }
.alert a { color: inherit; font-weight: var(--fw-bold); }
.alert--success { background: var(--bg-green-tint); border-color: #BFE3CF; color: #0B5C38; }
.alert--error { background: #FEF3F2; border-color: #FECDCA; color: #912018; }
.alert--info { background: var(--bg-blue-tint); border-color: #C6DAFF; color: #0A3F9E; }
.alert--warning { background: #FFF7E8; border-color: #F6DDB0; color: #7A4B00; }
.alert__form { margin-top: 6px; }
.alert .text-link { color: inherit; font-size: var(--fs-small); }

.field__hint { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.5; }
.field__hint.is-good { color: var(--color-green); }
.field__label-row { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.field__link { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.field__error a { color: inherit; }
.input[readonly] { background: var(--bg-surface); color: var(--text-muted); cursor: default; }

.password-field { position: relative; }
.password-field .input { padding-right: 52px; }
.password-field__toggle { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); display: grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-sm); color: var(--text-muted); }
.password-field__toggle:hover { color: var(--color-blue); background: var(--bg-blue-tint); }
.password-field__toggle .icon { width: 20px; height: 20px; }
.password-field__hide, .password-field__toggle[aria-pressed="true"] .password-field__show { display: none; }
.password-field__toggle[aria-pressed="true"] .password-field__hide { display: block; }

.auth-section {
  padding-block: var(--section-y); min-height: calc(100vh - var(--header-h) - 120px);
  background: radial-gradient(900px 420px at 50% -10%, rgba(10, 108, 255, .09), transparent 70%), var(--bg-surface);
}
.auth-section--center { display: flex; align-items: center; }
.auth-section--center > .container { width: 100%; }
.auth-layout { display: grid; grid-template-columns: minmax(0, 640px) minmax(0, 440px); justify-content: center; gap: 32px; align-items: start; }
.auth-card { position: relative; padding: 40px; border: 1px solid var(--border-color); border-radius: var(--radius-lg); background: #fff; box-shadow: var(--shadow-md); overflow: hidden; }
.auth-card::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--gradient-brand); }
.auth-card--narrow { max-width: 480px; margin-inline: auto; }
.auth-card__title { margin-top: 18px; font-size: clamp(1.5rem, 1.25rem + 0.7vw, 1.875rem); }
.auth-card--narrow .auth-card__title { margin-top: 0; }
.auth-card__intro { margin: 10px 0 24px; font-size: var(--fs-body); }
.auth-card__intro a, .auth-card__foot a { font-weight: var(--fw-bold); }
.auth-card__foot { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 8px; margin-top: 24px; font-size: var(--fs-small); color: var(--text-muted); text-align: center; }
.auth-card__foot .icon { width: 16px; height: 16px; color: var(--color-green); }
.auth-form { display: grid; gap: 20px; margin-top: 0; }
.auth-form .form__grid { gap: 20px; }
.auth-form__secure { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: -6px; font-size: var(--fs-xs); color: var(--text-muted); }
.auth-form__secure .icon { width: 15px; height: 15px; color: var(--color-green); }

.plan-options { border: 0; padding: 0; margin: 0; min-width: 0; }
.plan-options legend { margin-bottom: 10px; padding: 0; }
.plan-options__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.plan-option { position: relative; display: block; cursor: pointer; }
.plan-option input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; }
.plan-option__box { display: grid; gap: 4px; height: 100%; padding: 16px 16px 16px 18px; border: 1.5px solid var(--border-color-strong); border-radius: var(--radius-md); background: #fff; transition: border-color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease), box-shadow var(--dur-fast) var(--ease); }
.plan-option:hover .plan-option__box { border-color: #93AEDD; }
.plan-option__head { display: flex; align-items: center; justify-content: space-between; gap: 10px; color: var(--text-heading); font-family: var(--font-display); font-size: var(--fs-body-sm); }
.plan-option__radio { width: 20px; height: 20px; flex: none; border-radius: 50%; border: 1.5px solid var(--border-color-strong); background: #fff; transition: all var(--dur-fast) var(--ease); }
.plan-option__price { font-weight: var(--fw-bold); color: var(--text-heading); font-size: var(--fs-small); }
.plan-option__note { font-size: var(--fs-xs); color: var(--text-muted); line-height: 1.45; }
.plan-option input:checked + .plan-option__box { border-color: var(--color-blue); background: #F5F9FF; box-shadow: 0 0 0 1px var(--color-blue), 0 10px 24px -14px rgba(10, 99, 240, .6); }
.plan-option input:checked + .plan-option__box .plan-option__radio { border: 6px solid var(--color-blue); }
.plan-option input:checked + .plan-option__box .plan-option__price { color: var(--color-blue); }
.plan-option input:focus-visible + .plan-option__box { box-shadow: var(--focus-ring); border-color: var(--color-blue); }

.auth-aside {
  position: sticky; top: calc(var(--header-sticky-h) + 24px); padding: 36px 32px; border-radius: var(--radius-lg); color: var(--text-on-dark-2); overflow: hidden; isolation: isolate;
  background: var(--motif-arcs) right -140px top -150px / 400px 400px no-repeat,
              var(--glow-navy), var(--color-navy);
  box-shadow: var(--shadow-md);
}
.auth-aside__title { margin-top: 18px; color: #fff; font-size: clamp(1.375rem, 1.15rem + 0.7vw, 1.75rem); line-height: 1.2; }
.auth-aside__list { margin-top: 24px; }
.auth-aside__list li { color: #E3EAFB; font-size: var(--fs-body); }
.auth-aside__list .icon { color: var(--color-sky); }
.auth-aside__trust { display: flex; flex-wrap: wrap; gap: 10px 20px; margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--border-color-dark); font-size: var(--fs-small); }
.auth-aside__trust span { display: inline-flex; align-items: center; gap: 8px; }
.auth-aside__trust .icon { width: 17px; height: 17px; color: var(--color-sky); }

/* Account dashboard */
.page-hero--account { padding-block: 56px; background: var(--motif-arcs) right -150px top -250px / 440px 440px no-repeat, var(--glow-navy), var(--bg-dark); }
.account-hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.account-hero .page-hero__title { margin-top: 10px; }
.account-hero .page-hero__lead { margin-top: 10px; font-size: var(--fs-body-lg); }
.account-hero strong { color: #fff; }
.account-section { padding-block: 48px var(--section-y); }
.account-layout { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 380px); gap: 24px; align-items: start; }
.account-main, .account-aside { display: grid; gap: 20px; }
.panel { position: relative; padding: 28px; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: #fff; box-shadow: var(--shadow-xs); scroll-margin-top: calc(var(--header-sticky-h) + 20px); }
.panel__title { display: flex; align-items: center; gap: 12px; font-size: 1.1875rem; font-weight: var(--fw-bold); letter-spacing: var(--ls-tight); margin-bottom: 18px; }
.panel__title::before { content: ""; width: 4px; height: 20px; border-radius: 4px; background: var(--gradient-brand); flex: none; }
.panel__title--sm { font-size: var(--fs-h4); margin-bottom: 6px; }
.panel__title--sm::before { height: 16px; }
.panel__text { font-size: var(--fs-body-sm); color: var(--text-body); }
.panel__actions { margin-top: 22px; }
.panel__buttons { display: grid; gap: 10px; margin-top: 18px; }
.panel--navy {
  border-color: transparent; color: var(--text-on-dark-2); box-shadow: var(--shadow-md);
  background: var(--motif-arcs) right -110px top -110px / 320px 320px no-repeat, var(--glow-navy), var(--color-navy);
}
.panel__eyebrow { font-family: var(--font-display); font-size: var(--fs-2xs); font-weight: var(--fw-bold); letter-spacing: var(--ls-eyebrow); text-transform: uppercase; color: var(--color-sky); }
.panel__plan { margin-top: 10px; font-family: var(--font-display); font-weight: var(--fw-extrabold); font-size: 1.625rem; color: #fff; letter-spacing: var(--ls-heading); }
.panel__price { margin: 2px 0 14px; font-size: var(--fs-body-sm); color: #C3CDEB; }
.panel--danger { border-color: #F5C7C2; box-shadow: none; }
.panel__summary { display: flex; align-items: center; gap: 10px; min-height: 44px; cursor: pointer; font-family: var(--font-display); font-size: var(--fs-body-sm); font-weight: var(--fw-bold); color: #912018; list-style: none; }
.panel__summary::-webkit-details-marker { display: none; }
.panel__summary .icon { width: 18px; height: 18px; }
.panel--danger[open] .panel__summary { margin-bottom: 8px; }
.panel--danger .form { margin-top: 16px; display: grid; gap: 14px; }

.steps-list { display: grid; gap: 0; }
.steps-list__item { display: flex; align-items: center; gap: 14px; padding-block: 14px; border-top: 1px solid var(--border-color-soft); }
.steps-list__item:first-child { border-top: 0; padding-top: 0; }
.steps-list__item:last-child { padding-bottom: 0; }
.steps-list__item > div { display: grid; flex: 1; min-width: 0; line-height: 1.4; }
.steps-list__item strong { color: var(--text-heading); font-size: var(--fs-body); }
.steps-list__item span { font-size: var(--fs-small); color: var(--text-muted); }
.steps-list__icon { width: 24px; height: 24px; color: var(--border-color-strong); }
.steps-list__item.is-done .steps-list__icon { color: var(--color-green); }
.steps-list__item .btn { flex: none; }

@media (max-width: 1024px) {
  .auth-layout { grid-template-columns: minmax(0, 1fr); max-width: 680px; margin-inline: auto; }
  .auth-aside { position: relative; top: auto; }
  .account-layout { grid-template-columns: minmax(0, 1fr); }
  .account-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
  .account-aside .panel--danger { grid-column: 1 / -1; }
}
@media (max-width: 768px) {
  .auth-section { min-height: 0; }
  .account-aside { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 576px) {
  .auth-card { padding: 28px 20px 26px; border-radius: var(--radius-card); }
  .auth-aside { padding: 28px 22px; border-radius: var(--radius-card); }
  .plan-options__grid { grid-template-columns: minmax(0, 1fr); }
  .auth-form .form__grid { gap: 18px; }
  .page-hero--account { padding-block: 36px 40px; }
  .account-hero form, .account-hero form .btn { width: 100%; }
  .account-section { padding-top: 24px; }
  .panel { padding: 22px 18px; }
  .steps-list__item { flex-wrap: wrap; row-gap: 10px; }
  .steps-list__item > div { flex-basis: calc(100% - 38px); }
  .steps-list__item .btn { margin-left: 38px; }
}


/* 14. MOTION ============================================================== */
.js-ready [data-reveal] { opacity: 0; transform: translateY(18px); transition: opacity .7s var(--ease), transform .7s var(--ease); }
.js-ready [data-reveal].is-visible { opacity: 1; transform: none; }
.js-ready .hero__visual[data-reveal] { transform: translateY(24px) scale(.98); }
.js-ready .hero__visual[data-reveal].is-visible { transform: none; }


/* 15. RESPONSIVE ========================================================== */

/* ≤ 1280px — small laptop: keep the menu on one line */
@media (max-width: 1280px) {
  .primary-nav__list { gap: 24px; }
}

/* ≤ 1200px — laptop */
@media (max-width: 1200px) {
  :root { --gutter: 48px; --section-y: 88px; --logo-h: 42px; --logo-h-stuck: 38px; }
  .primary-nav__list { gap: 20px; }
  .primary-nav__link { font-size: 0.8125rem; }
  .main-bar__actions { gap: 16px; }
  .header-cta { padding: 0 18px; }
  .hero__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); }
  .hero__visual { margin-right: 0; }
  .numbers__inner { grid-template-columns: minmax(0, 1fr) minmax(0, 500px); }
  .split--calling, .split--handling, .split--integrations { gap: 48px; justify-content: stretch; }
  .split--calling { grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); }
  .split--handling { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); }
  .split--integrations { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); }
  .contact-layout { grid-template-columns: minmax(0, 1fr) minmax(0, 360px); gap: 32px; }
  .rates-tool { grid-template-columns: minmax(0, 1fr) 340px; }
  .mega-menu__inner { grid-template-columns: minmax(0, 1fr) 300px; gap: 24px; }
  .footer-main__inner { grid-template-columns: minmax(0, 280px) minmax(0, 1fr); gap: 48px; }
  .dest-grid { gap: 16px; }
  .dest-card__price { font-size: 1.125rem; }
  .app-promo__visual .qr-box { display: none; }
}

/* ≤ 1024px — tablet landscape: hamburger navigation */
@media (max-width: 1024px) {
  :root { --gutter: 40px; --section-y: 80px; --logo-h: 42px; --logo-h-stuck: 38px; }
  .primary-nav { display: none; }
  .menu-toggle { display: grid; }
  .main-bar__actions { gap: 12px; }
  .header-cta { padding: 0 20px; }

  .hero__inner { grid-template-columns: minmax(0, 1fr); padding-block: 48px 64px; }
  .hero__copy { max-width: 680px; }
  .hero__visual { max-width: 600px; }
  .hero { background: var(--motif-arcs) right -180px top -200px / 560px 560px no-repeat, var(--glow-navy), var(--bg-dark); }

  .rate-check { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px; }
  .grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .numbers__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .numbers__copy .lead { max-width: 640px; }
  .testimonial-grid { gap: 16px; }
  .testimonial { padding: 24px; }
  .plans { gap: 16px; }
  .plan { padding: 28px 24px; }
  .plans--full .plan { padding: 30px 24px 32px; }
  .plan__amount, .plans--full .plan__amount { font-size: 2.375rem; }
  .app-promo { grid-template-columns: minmax(0, 1fr); }
  .app-promo__visual { display: none; }
  .trust-band__inner { flex-direction: column; align-items: flex-start; }
  .faq__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .faq__intro { position: static; }
  .cta-band { flex-direction: column; align-items: flex-start; padding: 48px 40px; }
  .cta-band__actions--stack { flex-direction: row; min-width: 0; }

  .split, .split--calling, .split--handling, .split--integrations, .split--about, .split--about-where { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .split--handling .split__copy { order: -1; }
  .integration-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  /* One vertical rhythm for every section from here down — only --section-y changes per breakpoint */
  .section--features, .numbers, .section--compare, .testimonials, .section--pricing-preview,
  .faq, .most-called, .section--calling, .section--integrations, .section--contact-main { padding-block: var(--section-y); }
  .section--call-handling { padding-top: 0; padding-bottom: var(--section-y); }
  .apps-section, .cta-section, .plans-section { padding-bottom: var(--section-y); }
  .rate-check-section { padding-top: calc(var(--section-y) * 0.6); }
  .steps { margin-top: var(--section-y); }

  .rates-tool { grid-template-columns: minmax(0, 1fr); padding: 28px; }
  .estimate { position: static; order: -1; }
  .dest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-layout { grid-template-columns: minmax(0, 1fr); }
  .contact-aside { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .contact-aside .info-card--warm, .contact-aside .info-card--tint { grid-column: 1 / -1; }
  .legal__inner { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .legal__toc { position: static; }
  .legal__toc ol { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; }

  .footer-main__inner { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .footer-brand__text { max-width: 520px; }
}

/* ≤ 768px — tablet portrait & large phones: mobile header + bottom bar */
@media (max-width: 768px) {
  :root { --gutter: 32px; --section-y: 64px; --header-utility-h: 0px; --header-main-h: 64px; --header-sticky-h: 58px; --logo-h: 38px; --logo-h-stuck: 34px; }
  .utility-bar { display: none; }
  .site-header.is-stuck { transform: none; }
  .header-cta { min-height: 42px; padding: 0 16px; }
  .header-cta__arrow { display: none; }
  .site-header.is-stuck .header-cta { display: none; }

  .mobile-bar { display: flex; }

  /* 44px touch targets. Small links keep their look; an invisible hit area grows around them */
  .brand { min-height: 44px; }
  .header-cta { min-height: 44px; }
  .site-header.is-stuck .header-cta { min-height: 44px; }
  .chip, .text-link, .slider__dot, .breadcrumb a, .channel__status, .channel__link { position: relative; }
  .chip::after, .text-link::after, .slider__dot::after, .breadcrumb a::after, .channel__status::after, .channel__link::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
  }
  .slider__dots { gap: 14px; }
  .social-links a { width: 44px; height: 44px; }
  .segmented__btn { min-height: 44px; }
  .range { height: 44px; }
  .footer-col__list { gap: 0; }
  .footer-col__list a { min-height: 44px; }
  .legal__toc a { display: flex; align-items: center; min-height: 44px; padding: 0 0 0 12px; }
  body.has-mobile-bar { padding-bottom: calc(var(--mobile-bar-h) + env(safe-area-inset-bottom, 0px)); }
  .chat-launcher, .chat-teaser { display: none !important; }
  .chat-widget { right: 16px; left: 16px; bottom: calc(var(--mobile-bar-h) + 12px + env(safe-area-inset-bottom, 0px)); align-items: stretch; }
  .chat-panel { width: 100%; }

  .hero { background-size: 420px 420px, auto, auto; background-position: right -170px top -190px, 0 0, 0 0; }
  .hero__actions .btn { flex: 1 1 220px; }
  .logo-strip__inner { flex-direction: column; gap: 16px; padding-block: 28px; }
  .logo-strip__list { justify-content: center; gap: 20px 36px; }
  .section-head { margin-bottom: 36px; }
  .steps { padding: 44px 28px; }
  .steps__list { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .step { display: grid; grid-template-columns: 46px minmax(0, 1fr); column-gap: 18px; }
  .step__num { grid-row: span 2; margin-bottom: 0; }
  .compare-table th, .compare-table td { padding: 16px 16px; }

  .testimonials__head { margin-bottom: 28px; }
  .slider__track { display: grid; grid-auto-flow: column; grid-auto-columns: 82%; grid-template-columns: none; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding-inline: var(--gutter); scroll-padding-inline: var(--gutter); }
  .slider__track::-webkit-scrollbar { display: none; }
  .slider__track > * { scroll-snap-align: start; }
  .slider__dots { display: flex; }
  .js-ready .slider [data-reveal] { opacity: 1; transform: none; }

  .plans { grid-template-columns: minmax(0, 1fr); max-width: 520px; margin-inline: auto; gap: 20px; }
  .plan--featured { order: -1; }
  .plans-section { margin-top: -96px; }
  .plans--full .plan--featured { margin-top: 0; padding-top: 40px; }

  .trust-band__list { gap: 18px 28px; }
  .footer-newsletter__inner { flex-direction: column; align-items: stretch; gap: 20px; }
  .footer-newsletter__form { width: 100%; }
  .footer-legal__inner { flex-direction: column-reverse; align-items: flex-start; gap: 12px; }
  .footer-trust__inner { flex-direction: column; align-items: flex-start; gap: 18px; }
  .footer-trust__list { flex-direction: column; gap: 10px; }

  /* Footer columns → accordions */
  .footer-cols { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .footer-col { border-bottom: 1px solid var(--border-footer); }
  .footer-col:first-child { border-top: 1px solid var(--border-footer); }
  .footer-col__toggle { min-height: 52px; pointer-events: auto; }
  .footer-col__toggle .icon { display: block; }
  .footer-col__toggle[aria-expanded="true"] .icon { transform: rotate(180deg); }
  .footer-col__list { margin-top: 0; padding-bottom: 16px; }
  .footer-col__list a { display: inline-flex; align-items: center; }
  .brand--footer .brand__logo { width: 188px; }

  .page-hero, .page-hero--account { padding-block: 56px; background: var(--motif-arcs) right -190px top -210px / 440px 440px no-repeat, var(--glow-navy), var(--bg-dark); }
  .page-hero--contact { padding-block: 48px 52px; }
  .page-hero--pricing { padding-bottom: 128px; }  /* after .page-hero so the billing toggle stays clear of the plan cards */
  .rates-tool { margin-top: 36px; }
  .form-card { padding: 36px 28px 32px; }
  .contact-aside { grid-template-columns: minmax(0, 1fr); }
  .integration-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .section-head--split { flex-direction: column; align-items: flex-start; }
  .cta-band { padding: 40px 32px; }
  .simple-page { padding-block: 80px; }
}

/* ≤ 576px — phones: mobile-specific content variants from the 390px design */
@media (max-width: 576px) {
  :root { --gutter: 20px; --section-y: 48px; }
  .hide-sm { display: none !important; }
  .show-sm-block { display: block !important; }
  .show-sm-inline { display: inline !important; }
  .channel-list.show-sm-block { display: grid !important; }

  .btn--xl { min-height: 54px; font-size: var(--fs-body-sm); }

  /* Home */
  .hero__inner { padding-block: 32px 36px; gap: 0; }
  .hero__visual { display: none; }
  .hero__copy > * + * { margin-top: 20px; }
  .hero__title { margin-top: 20px !important; }
  .hero__lead { font-size: var(--fs-body-lg); margin-top: 16px !important; }
  .hero__actions { flex-direction: column; margin-top: 28px !important; gap: 12px; }
  .hero__actions .btn { flex: none; width: 100%; }
  .hero__trust { flex-direction: column; gap: 10px; margin-top: 28px !important; }
  .swap-stack { background: var(--bg-surface); }
  .swap-stack .rate-check-section { order: -1; padding-top: 20px; padding-bottom: 20px; }
  .logo-strip { background: #fff; border-top: 1px solid var(--border-color-soft); }
  .logo-strip__list { gap: 16px 28px; }
  .logo-strip__list li { font-size: 1rem; color: var(--text-muted); }
  .rate-check { padding: 26px 20px 22px; border-radius: var(--radius-lg); background-size: 300px 300px, auto, auto, auto; background-position: right -110px top -130px, 0 0, 0 0, 0 0; }
  .rate-check__row { flex-direction: column; gap: 10px; }
  .rate-check__row .btn { width: 100%; min-height: 52px; }
  .rate-check__text { margin-top: 8px; font-size: var(--fs-body-sm); }
  .rate-check__result a { margin-left: 0; }
  .grid--3, .grid--4, .grid--2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .card { padding: 22px 20px; }
  .feature-card .icon-tile { margin-bottom: 20px; width: 42px; height: 42px; }
  .numbers__copy > * + * { margin-top: 14px; }
  .numbers__grid { grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .number-card { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 12px; padding: 16px 16px; }
  .number-card__head { display: contents; }
  .number-card__country { grid-column: 1; grid-row: 1; }
  .number-card .badge { grid-column: 2; grid-row: 1; justify-self: end; }
  .number-card__number { grid-column: 1; grid-row: 2; margin-top: 4px; font-size: 1.125rem; }
  .number-card__meta { grid-column: 2; grid-row: 2; align-self: end; margin-top: 0; white-space: nowrap; }
  .number-card__number { min-width: 0; }
  .number-card__meta::before { content: none; }
  .number-card--dark { display: flex; flex-direction: row; align-items: center; gap: 16px; padding: 20px; }
  .number-card--dark .number-card__meta { margin-top: 0; white-space: normal; }
  .testimonials__head { margin-bottom: 18px; }
  .rating { grid-auto-flow: column; justify-items: start; align-items: center; gap: 10px; }
  .slider__track { grid-auto-columns: 88%; }
  .section-head--center { text-align: left; }
  .section-head--center .section-head__lead { margin-inline: 0; }
  .section-head--center .eyebrow::after { display: none; }
  .testimonial { background: var(--bg-surface); }
  .testimonials.section--surface { background: #fff; }
  .compare-table th, .compare-table td { padding: 14px 12px; font-size: var(--fs-small); }
  .compare-table thead th:first-child { letter-spacing: 0.06em; }
  .steps { padding: 36px 20px; border-radius: var(--radius-card); }
  .plan__amount, .plans--full .plan__amount { font-size: 2.625rem; }
  .plan { padding: 26px 22px; }
  .plans--full .plan { padding: 28px 22px; }
  .plans--full .plan--featured { padding-top: 36px; }
  .plan__badge { left: 22px; }
  .app-promo { padding: 32px 22px; }
  .store-btn { flex: 1 1 160px; justify-content: center; }
  .trust-band__inner { padding-block: 32px; }
  .trust-band__list { flex-direction: column; }
  .trust-band__pay { flex-direction: column; align-items: flex-start; gap: 12px; }
  .faq__inner { gap: 24px; }
  .accordion__trigger { min-height: 60px; padding: 16px 18px; font-size: var(--fs-body); }
  .accordion__content p { padding: 0 18px 18px; }
  .cta-band { padding: 32px 22px; gap: 24px; border-radius: var(--radius-lg); }
  .cta-band__actions, .cta-band__actions--stack { flex-direction: column; width: 100%; }
  .cta-band__actions .btn { width: 100%; }

  /* Features */
  .page-hero { padding-block: 36px 40px; }
  .breadcrumb ol { margin-bottom: 14px; }
  .page-hero__lead { margin-top: 14px; }
  .split--calling { gap: 28px; }
  .stat-row { margin-top: 24px !important; gap: 16px; }
  .stat { padding-left: 14px; }
  .stat__value { font-size: 1.5rem; }
  .route-card { padding: 22px 20px; border-radius: var(--radius-card); }
  .route-list { gap: 14px; margin-top: 16px; }
  .section--call-handling { background: var(--bg-surface); border-top: 1px solid var(--border-color-soft); padding-block: var(--section-y); }
  .split--handling { gap: 24px; }
  .mini-grid { gap: 12px; }
  .mini-card { padding: 16px; }
  .mini-card > .icon { width: 34px; height: 34px; padding: 8px; }
  .mini-card__title { margin-top: 12px; font-size: var(--fs-small); }
  .mini-card__text { font-size: var(--fs-xs); margin-top: 2px; }
  .section-head--left-sm { text-align: left; }
  .section-head--left-sm .section-head__lead { margin-inline: 0; }
  .integration-grid { gap: 10px; }
  .integration { min-height: 72px; font-size: var(--fs-xs); }
  .section--integrations { background: var(--bg-surface); border-top: 1px solid var(--border-color-soft); }

  /* Pricing */
  .page-hero--pricing { padding-top: 36px; padding-bottom: 112px; }
  .billing-toggle { display: inline-grid; grid-template-columns: 1fr 1fr; width: min(100%, 220px); margin-top: 24px; }
  .billing-toggle__btn { flex-direction: column; justify-content: center; gap: 0; padding: 6px 10px; min-height: 44px; line-height: 1.2; }
  .plans-section { margin-top: -80px; }
  .number-types .number-type { grid-template-areas: "title price" "desc price"; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: 12px; padding: 16px 18px; }
  .number-type__price { margin-top: 0; font-size: 1.125rem; }
  .number-type__price small { font-size: var(--fs-small); }
  .number-type .number-type__desc { margin-top: 2px; font-size: var(--fs-xs); }
  .number-type__title { font-size: var(--fs-small); }
  .number-type--porting { border-color: #CFE0FF; background: #F7FAFF; }
  .number-types { gap: 10px; }
  .plan-table { min-width: 600px; }
  .plan-table th:first-child { width: 150px; }
  .plan-table th, .plan-table td { padding: 14px 14px; font-size: var(--fs-small); }
  .plan-table th:first-child { position: sticky; left: 0; z-index: 1; background: #fff; }
  .plan-table thead th:first-child { background: var(--color-navy); }
  .trust-band__list--inline { flex-direction: column; gap: 12px; }

  /* Rates */
  .page-hero--rates { padding-top: 32px; padding-bottom: 0; }
  .page-hero--rates .page-hero__title, .page-hero--rates .page-hero__lead { text-align: left; }
  .rates-tool { margin-top: 24px; padding: 0; background: transparent; box-shadow: none; border: 0; gap: 0; }
  .estimate { background: #fff; border: 0; border-radius: var(--radius-card); padding: 22px 20px; margin-bottom: 20px; }
  .estimate__result { background: var(--bg-surface); }
  .rates-tool__search { margin-inline: calc(-1 * var(--gutter)); padding: 28px var(--gutter) 24px; background: #fff; }
  .rates-table th, .rates-table td { padding: 12px 14px; }
  .rates-table__pick { padding: 10px 14px; min-height: 60px; }
  .rates-table .rates-table__code { display: none; }
  .rates-table__code-sm { display: block; }
  .most-called { display: none; }
  .bill-grid .feature-card--row-sm { display: flex; gap: 16px; align-items: flex-start; }
  .bill-grid .feature-card--row-sm .icon-tile { margin-bottom: 0; }
  .bill-grid .feature-card { padding: 20px 18px; }

  /* Contact */
  .section--channels { padding-top: 24px; }
  .section--contact-main { padding-top: 24px; }
  .form-card { padding: 28px 20px 24px; background: var(--bg-surface); border-radius: var(--radius-card); box-shadow: none; }
  .form__grid { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  .form__submit { flex-direction: column; align-items: stretch; text-align: center; }
  .form__submit .btn { width: 100%; }
  .form__secure { justify-content: center; font-size: var(--fs-xs); }
  .info-card { padding: 24px 20px; border-radius: var(--radius-card); }
  .about-stat { padding: 22px 18px; }
  .about-stat dt { font-size: 1.75rem; }
  .legal__toc ol { grid-template-columns: minmax(0, 1fr); }
  .prose { font-size: var(--fs-body); }

  /* Footer */
  .footer-newsletter__inner { padding-block: 30px; }
  .footer-newsletter__row { flex-direction: column; }
  .footer-newsletter__row .btn { width: 100%; }
  .footer-main__inner { padding-block: 36px 24px; gap: 28px; }
  .footer-legal__reg { display: block; }
  .brand--footer .brand__logo { width: 176px; }
}

/* ≤ 480px — small phones */
@media (max-width: 480px) {
  :root { --gutter: 16px; --section-y: 40px; --logo-h: 34px; --logo-h-stuck: 32px; }
  .header-cta { padding: 0 14px; font-size: var(--fs-xs); }
  .main-bar__actions { gap: 8px; }
  .dash__stat strong { font-size: 1.125rem; }
  .compare-table th, .compare-table td { padding: 12px 10px; font-size: 0.8125rem; }
  .compare-table thead th { font-size: 0.75rem; }
  .compare-table thead th:first-child { font-size: 0.6875rem; }
  .rate-check__popular { gap: 8px; }
  .chip { padding: 6px 12px; }
  .store-buttons { flex-direction: column; }
  .store-btn { flex: none; }
  .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .stat__value { font-size: 1.375rem; }
  .mini-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .form-success__actions .btn { width: 100%; }
  .simple-page__links { flex-direction: column; align-items: center; }
}

/* ≤ 380px — compact phones */
@media (max-width: 380px) {
  :root { --logo-h: 32px; --logo-h-stuck: 32px; }
  .header-cta { padding: 0 12px; }
}

/* ≤ 359px — very small phones: the header shows the C2P mark only (see <picture> in header.php) */
@media (max-width: 359px) {
  :root { --logo-h: 34px; --logo-h-stuck: 32px; }
  .mini-grid { grid-template-columns: minmax(0, 1fr); }
  .dash__stats--2 { grid-template-columns: minmax(0, 1fr); }
}


/* 16. REDUCED MOTION & PRINT ============================================= */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
  .js-ready [data-reveal] { opacity: 1; transform: none; }
  .js-ready .route-card:not(.is-visible) .route__bar { transform: none; }
}

@media print {
  body { padding-top: 0; }
  .site-header, .mobile-bar, .chat-widget, .footer-newsletter, .mobile-menu { display: none !important; }
  .hero, .page-hero, .trust-band, .cta-band, .plan--featured, .panel--navy, .info-card--navy { background: none !important; color: #000 !important; box-shadow: none !important; }
  .hero *, .page-hero *, .cta-band * { color: #000 !important; -webkit-text-fill-color: #000 !important; }
  .js-ready [data-reveal] { opacity: 1 !important; transform: none !important; }
}