.skip-link {
  position: absolute;
  left: -9999px;
  top: 0;
  background: var(--ink);
  color: var(--paper);
  padding: 12px 16px;
  border-radius: 0 0 8px 0;
  font-weight: 600;
  z-index: 1000;
}

.skip-link:focus {
  left: 0;
}

:root {
  /* Light mode colors */
  --bg: #f6fbfd;
  --ink: #071018;
  --paper: #ffffff;
  --muted: #4f5962;
  --line: rgba(7, 16, 24, 0.12);
  --blue: #1478d4;
  --blue-strong: #0867c0;
  --green: #147f5f;
  --orange: #c85f13;
  --shadow: 0 24px 80px rgba(30, 56, 82, 0.16);
  --radius: 8px;
  /* Use the platform's default UI sans-serif everywhere. We previously
     listed Inter first without loading the font, which made the page
     render with whichever Inter happened to be installed locally (or
     fall through to the system font), causing the layout to drift
     between machines and look "corrupted" to users who had Inter and
     users who did not. */
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  font-size: 16px;
  line-height: 1.5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0d1b2a;
    --ink: #f1f5f9;
    --paper: #1a2332;
    --muted: #94a3b8;
    --line: rgba(241, 245, 249, 0.1);
    --shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  }
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  /* Stop iOS Safari from auto-inflating text in landscape, which
     reflows headings unpredictably. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* Respect users who have asked the OS to limit motion (WCAG 2.3.3).
   Smooth scroll on anchor jumps can trigger vestibular discomfort. */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }
}

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  letter-spacing: 0;
}

img {
  display: block;
  max-width: 100%;
  height: auto;
}

a {
  color: inherit;
}

/* Visible keyboard focus for every interactive element. The previous
   stylesheet had no :focus rule, so browsers either drew their default
   ring (sometimes clipped by border-radius/overflow:hidden on cards)
   or nothing at all. Modern browser outlines already follow each
   element's own border-radius, so we don't override it here. */
:focus-visible {
  outline: 2px solid var(--blue);
  outline-offset: 3px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 20;
  background: rgba(246, 251, 253, 0.88);
  border-bottom: 1px solid var(--line);
  -webkit-backdrop-filter: blur(18px);
  backdrop-filter: blur(18px);
}

@media (prefers-color-scheme: dark) {
  .site-header {
    background: rgba(13, 27, 42, 0.88);
  }
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  width: min(1120px, calc(100% - 40px));
  min-height: 72px;
  margin: 0 auto;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-weight: 700;
  text-decoration: none;
}

.brand img {
  width: 34px;
  height: 34px;
  border-radius: 8px;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 18px;
  color: var(--muted);
  font-size: 0.95rem;
}

.nav-links a {
  text-decoration: none;
}

.nav-links a:hover {
  color: var(--ink);
}

.lang-switch {
  position: relative;
}

.lang-switch summary {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 11px 5px 9px;
  border: 1.5px solid var(--line);
  border-radius: 999px;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--muted);
  cursor: pointer;
  list-style: none;
  user-select: none;
  transition: color 0.15s, border-color 0.15s;
}

.lang-switch summary::-webkit-details-marker {
  display: none;
}

/* Globe glyph rendered via mask so it follows the summary's text colour
   (which changes on hover/open). Saves ~150 bytes of inline SVG per
   page across 22 pages. */
.lang-switch summary::before {
  content: "";
  display: inline-block;
  width: 13px;
  height: 13px;
  background-color: currentColor;
  -webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
  mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><circle cx='12' cy='12' r='10'/><line x1='2' y1='12' x2='22' y2='12'/><path d='M12 2a15.3 15.3 0 0 1 4 10 15.3 15.3 0 0 1-4 10 15.3 15.3 0 0 1-4-10 15.3 15.3 0 0 1 4-10z'/></svg>");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.lang-switch[open] summary,
.lang-switch summary:hover {
  color: var(--ink);
  border-color: rgba(20, 120, 212, 0.4);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 140px;
  padding: 6px 0;
  margin: 0;
  list-style: none;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  box-shadow: var(--shadow);
  z-index: 100;
}

.lang-menu a {
  display: block;
  padding: 7px 14px;
  font-size: 0.875rem;
  color: var(--muted);
  text-decoration: none;
}

.lang-menu a:hover,
.lang-menu a[aria-current] {
  color: var(--ink);
}

.lang-menu a[aria-current] {
  font-weight: 600;
}

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  padding: 0 22px;
  border: 1px solid transparent;
  border-radius: 999px;
  background: var(--blue);
  color: white;
  font-weight: 700;
  text-decoration: none;
  box-shadow: 0 14px 36px rgba(20, 120, 212, 0.22);
}

.button:hover {
  background: var(--blue-strong);
}

.button.secondary {
  background: rgba(255, 255, 255, 0.72);
  border-color: var(--line);
  color: var(--ink);
  box-shadow: none;
}

.button.secondary:hover {
  background: white;
}

@media (prefers-color-scheme: dark) {
  .button.secondary {
    background: rgba(26, 35, 50, 0.72);
  }
  
  .button.secondary:hover {
    background: #1a2332;
  }
}

.hero {
  position: relative;
  /* vh first as a fallback for Safari < 15.4 / older Chrome that ignore
     svh entirely (without the fallback the rule was dropped and the
     hero collapsed to intrinsic content height). */
  min-height: 86vh;
  min-height: 86svh;
  display: grid;
  align-items: end;
  overflow: hidden;
  background: var(--bg);
  border-bottom: 1px solid var(--line);
}

.hero-inner {
  position: relative;
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  padding: 112px 0 88px;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 0 12px;
  border: 1px solid rgba(20, 120, 212, 0.22);
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.72);
  color: var(--blue-strong);
  font-size: 0.9rem;
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  .eyebrow {
    background: rgba(20, 120, 212, 0.15);
    color: #60a5fa;
  }
}

.hero h1 {
  max-width: 820px;
  margin: 24px 0 18px;
  font-size: 5rem;
  line-height: 0.95;
  letter-spacing: 0;
  /* Defensive: a single long word at this size would otherwise punch
     through the viewport on narrow screens. */
  overflow-wrap: anywhere;
  word-break: break-word;
}

.hero-copy {
  max-width: 680px;
  margin: 0 0 30px;
  color: var(--muted);
  font-size: 1.35rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.trust-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--line);
  border-bottom: 1px solid var(--line);
}

.trust-item {
  min-height: 116px;
  padding: 28px;
  background: rgba(255, 255, 255, 0.64);
}

@media (prefers-color-scheme: dark) {
  .trust-item {
    background: rgba(26, 35, 50, 0.64);
  }
}

.trust-item strong {
  display: block;
  margin-bottom: 6px;
  font-size: 1.05rem;
}

.trust-item span {
  color: var(--muted);
}

.section {
  padding: 92px 0;
}

.section.alt {
  background: var(--paper);
}

.wrap {
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
}

.section-heading {
  max-width: 720px;
  margin-bottom: 42px;
}

.section-heading h2 {
  margin: 0 0 14px;
  font-size: 3rem;
  line-height: 1.02;
  letter-spacing: 0;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
  font-size: 1.15rem;
}

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}

.feature {
  min-height: 230px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.66);
}

@media (prefers-color-scheme: dark) {
  .feature {
    background: rgba(26, 35, 50, 0.66);
  }
}

.feature-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 38px;
  height: 38px;
  margin-bottom: 20px;
  border-radius: 8px;
  background: rgba(20, 120, 212, 0.1);
  color: var(--blue);
  font-weight: 800;
}

.feature:nth-child(2) .feature-mark {
  background: rgba(20, 127, 95, 0.1);
  color: var(--green);
}

.feature:nth-child(3) .feature-mark {
  background: rgba(200, 95, 19, 0.1);
  color: var(--orange);
}

.feature h3,
.price-card h3,
.faq h3 {
  margin: 0 0 10px;
  font-size: 1.35rem;
  line-height: 1.18;
}

.feature p,
.price-card p,
.faq p {
  margin: 0;
  color: var(--muted);
}

.showcase {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr);
  gap: 52px;
  align-items: center;
}

.phone-stack {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
  align-items: start;
}

.phone-shot {
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 32px;
  background: var(--paper);
  box-shadow: var(--shadow);
}

.phone-shot.offset {
  margin-top: 76px;
}

.check-list {
  display: grid;
  gap: 14px;
  margin: 28px 0 0;
  padding: 0;
  list-style: none;
}

.check-list li {
  display: grid;
  grid-template-columns: 28px 1fr;
  gap: 12px;
  color: var(--ink);
}

.check-list li::before {
  content: "";
  width: 20px;
  height: 20px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--blue);
  box-shadow: inset 0 0 0 6px var(--paper), 0 0 0 1px rgba(20, 120, 212, 0.28);
}

.privacy-band {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--line);
}

.privacy-copy,
.privacy-image {
  background: #f7fbfe;
}

@media (prefers-color-scheme: dark) {
  .privacy-copy,
  .privacy-image {
    background: #1f3a52;
  }
}

.privacy-copy {
  padding: 42px;
}

.privacy-image {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 28px;
}

.privacy-image img {
  width: min(360px, 100%);
  border-radius: 28px;
  box-shadow: var(--shadow);
}

.pricing-grid,
.faq-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 18px;
}

.price-card,
.faq {
  padding: 26px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: rgba(255, 255, 255, 0.72);
}

@media (prefers-color-scheme: dark) {
  .price-card,
  .faq {
    background: rgba(26, 35, 50, 0.72);
  }
}

.price {
  margin: 18px 0 4px;
  font-size: 2.2rem;
  line-height: 1;
  font-weight: 800;
}

.fine-print {
  color: var(--muted);
  font-size: 0.95rem;
}

.final-cta {
  padding: 88px 0;
  background: #0d1b2a;
  color: white;
}

.final-cta .wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}

.final-cta h2 {
  max-width: 680px;
  margin: 0;
  font-size: 3rem;
  line-height: 1.02;
  letter-spacing: 0;
}

.final-cta p {
  max-width: 620px;
  margin: 14px 0 0;
  color: rgba(255, 255, 255, 0.7);
}

.final-cta .button {
  background: white;
  color: #0d1b2a;
  box-shadow: none;
}

.site-footer {
  padding: 32px 0;
  background: #071018;
  color: rgba(255, 255, 255, 0.72);
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  width: min(1120px, calc(100% - 40px));
  margin: 0 auto;
  font-size: 0.95rem;
}

.footer-links {
  display: flex;
  gap: 16px;
}

.footer-links a {
  color: rgba(255, 255, 255, 0.82);
  text-decoration: none;
}

.page-main {
  width: min(820px, calc(100% - 40px));
  margin: 0 auto;
  padding: 82px 0 96px;
}

.page-main h1 {
  margin: 0 0 12px;
  font-size: 3.5rem;
  line-height: 1;
  letter-spacing: 0;
}

.page-main h2 {
  margin: 38px 0 10px;
  font-size: 1.35rem;
}

.page-main p,
.page-main li {
  color: var(--muted);
}

.page-main a {
  color: var(--blue-strong);
}

.page-main .faq {
  margin: 0 0 1.5rem;
}

.page-main .faq dt {
  font-weight: 600;
  color: var(--ink);
  margin-top: 1.25rem;
}

.page-main .faq dt:first-child {
  margin-top: 0;
}

.page-main .faq dd {
  margin: 0.25rem 0 0;
  color: var(--muted);
}

.date {
  margin: 0 0 34px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .nav {
    min-height: 66px;
  }

  .nav-links > a:not(.button) {
    display: none;
  }

  .hero {
    min-height: 84vh;
    min-height: 84svh;
  }

  .hero-inner {
    padding: 92px 0 58px;
  }

  .hero h1 {
    font-size: 3.25rem;
  }

  .hero-copy {
    font-size: 1.1rem;
  }

  .trust-strip,
  .feature-grid,
  .showcase,
  .privacy-band,
  .pricing-grid,
  .faq-grid {
    grid-template-columns: 1fr;
  }

  .section {
    padding: 68px 0;
  }

  .section-heading h2,
  .final-cta h2 {
    font-size: 2.35rem;
  }

  .phone-stack {
    max-width: 620px;
    margin: 0 auto;
  }

  .final-cta .wrap,
  .footer-inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .page-main h1 {
    font-size: 2.65rem;
  }
}

@media (max-width: 560px) {
  .nav,
  .wrap,
  .footer-inner,
  .page-main {
    width: min(100% - 28px, 1120px);
  }

  .brand span {
    display: none;
  }

  .button {
    width: 100%;
  }

  .hero h1 {
    font-size: 2.7rem;
  }

  .hero-actions {
    width: 100%;
  }

  .phone-stack {
    grid-template-columns: 1fr;
  }

  .phone-shot.offset {
    margin-top: 0;
  }

  .trust-item,
  .privacy-copy,
  .privacy-image,
  .feature,
  .price-card,
  .faq {
    padding: 22px;
  }
}