@font-face {
  font-family: 'Inter var';
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url('/fonts/inter-latin.woff2') format('woff2');
}

:root {
  --navy: #071838;
  --bg: #06102a;
  --bg-deep: #04081a;
  --surface: #0e1530;
  --surface-2: #131c3d;
  --surface-3: #1a2549;
  --line: rgba(184, 192, 255, 0.14);
  --line-2: rgba(184, 192, 255, 0.24);
  --text: #eaeeff;
  --muted: #b7bfe0;
  --faint: #8e97bd;
  --primary: #b8c0ff;
  --accent: #aab4ff;
  --accent-2: #7c8cff;
  --gold: #f4bd48;
  --mint: #7cf2c0;
  --on-primary: #0a1240;
  --maxw: 1120px;
  --r: 22px;
  --font: 'Inter var', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; }

body {
  background: var(--bg-deep);
  color: var(--text);
  font-family: var(--font);
  font-size: 17px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* Flowing periwinkle/violet mesh, fixed behind content */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -2;
  background:
    radial-gradient(900px 700px at 78% -8%, rgba(86, 102, 224, 0.42), transparent 60%),
    radial-gradient(820px 720px at 6% 4%, rgba(120, 86, 210, 0.30), transparent 58%),
    radial-gradient(1100px 900px at 92% 86%, rgba(74, 96, 220, 0.22), transparent 60%),
    linear-gradient(180deg, #081230 0%, #06102a 38%, #050b1f 100%);
}


a { color: var(--accent); text-decoration: none; }
a:hover { color: var(--primary); }

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

h1, h2, h3 { line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; }

.wrap { width: 100%; max-width: var(--maxw); margin: 0 auto; padding: 0 22px; }

.skip {
  position: absolute; left: -999px; top: 0; z-index: 100;
  background: var(--primary); color: var(--on-primary);
  padding: 10px 16px; border-radius: 0 0 10px 0; font-weight: 700;
}
.skip:focus { left: 0; }

:where(a, button, summary, [tabindex]):focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 8px;
}

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 9px;
  font-weight: 700; font-size: 15px; letter-spacing: -0.01em;
  padding: 12px 20px; border-radius: 999px; min-height: 44px;
  background: var(--primary); color: var(--on-primary);
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  box-shadow: 0 8px 26px rgba(124, 140, 255, 0.28);
}
.btn:hover { color: var(--on-primary); background: #c7cdff; transform: translateY(-1px); }
.btn svg { width: 18px; height: 18px; }

.badge-link { display: inline-block; line-height: 0; transition: transform 0.15s ease, filter 0.15s ease; }
.badge-link:hover { transform: translateY(-1px); filter: brightness(1.06); }
.badge-link img { width: 196px; height: auto; }

/* ---------- Header ---------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  backdrop-filter: saturate(140%) blur(14px);
  background: rgba(6, 12, 30, 0.72);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap { display: flex; align-items: center; justify-content: space-between; min-height: 80px; gap: 24px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 800; letter-spacing: -0.02em; font-size: 22px; white-space: nowrap; }
.brand-logo { width: 48px; height: 48px; flex: none; border-radius: 12px; }
.header-actions { display: flex; align-items: center; gap: 16px; }
.header-link { color: var(--muted); font-size: 14px; font-weight: 700; }
.header-link:hover { color: var(--text); }
.nav-cta { font-size: 14px; padding: 10px 16px; }

/* ---------- Section rhythm ---------- */
section { padding: 72px 0; }
.eyebrow {
  display: inline-block; font-size: 12.5px; font-weight: 800; letter-spacing: 0;
  text-transform: none; color: var(--accent);
  padding: 6px 12px; border: 1px solid var(--line-2); border-radius: 999px;
  margin-bottom: 18px;
}
h2 { font-size: clamp(28px, 5vw, 40px); }
.lede { color: var(--muted); font-size: clamp(16px, 2.4vw, 19px); max-width: 64ch; margin-top: 16px; }
.center { text-align: center; }
.center .lede { margin-inline: auto; }

/* ---------- Hero ---------- */
.hero { padding: 40px 0 64px; position: relative; }
.hero .grid { display: grid; gap: 36px; align-items: center; }
.hero h1 { font-size: clamp(38px, 6vw, 64px); letter-spacing: -0.035em; }
.hero .sub { color: var(--muted); font-size: clamp(17px, 2.6vw, 21px); margin-top: 18px; max-width: 39ch; font-weight: 400; line-height: 1.6; }
.hero .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 30px; }
.hero .reassure { color: var(--faint); font-size: 14px; display: flex; align-items: center; gap: 8px; }
.hero .reassure svg { width: 16px; height: 16px; color: var(--mint); }
.hl { color: var(--primary); }

.device {
  position: relative; width: 100%; max-width: 300px; margin: 0 auto;
  border-radius: 44px; padding: 8px;
  background: linear-gradient(150deg, #2c3142 0%, #0d111b 44%, #05070e 100%);
  box-shadow:
    inset 0 0 0 1.4px rgba(255, 255, 255, 0.06),
    0 0 0 1px rgba(150, 165, 220, 0.12),
    0 34px 80px rgba(0, 0, 0, 0.55),
    0 0 110px rgba(110, 130, 255, 0.12);
}
/* Inner screen clips the shot and carries a faux status bar so the
   mockup reads as a real device. Background is the exact top colour
   of every screenshot (#0e1530), so the bar merges seamlessly. */
.device .screen {
  position: relative; display: block;
  border-radius: 37px; overflow: hidden;
  background: #0e1530;
}
.device .bar {
  position: relative; z-index: 2;
  display: flex; align-items: center; justify-content: space-between;
  height: 30px; padding: 0 17px 0 20px;
  background: #0e1530; color: #eaf0ff;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em;
  font-variant-numeric: tabular-nums;
}
.device .bar::before { content: "9:41"; line-height: 1; }
.device .bar::after {
  content: ""; width: 44px; height: 11px; flex: none;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 46 12' fill='%23eaf0ff'%3E%3Crect x='0' y='8' width='2' height='4' rx='.5'/%3E%3Crect x='3' y='6' width='2' height='6' rx='.5'/%3E%3Crect x='6' y='4' width='2' height='8' rx='.5'/%3E%3Crect x='9' y='2' width='2' height='10' rx='.5'/%3E%3Cg transform='translate(15.5 1.2)'%3E%3Cpath d='M5.4 8.6 7.2 10.6 9 8.6a2.6 2.6 0 0 0-3.6 0Z'/%3E%3Cpath d='M2.3 5.4 3.9 7a4.7 4.7 0 0 1 6.6 0l1.6-1.6a7 7 0 0 0-9.8 0Z'/%3E%3C/g%3E%3Crect x='32.5' y='2.6' width='11' height='6.8' rx='2' fill='none' stroke='%23eaf0ff' stroke-width='1'/%3E%3Crect x='33.8' y='3.8' width='6.8' height='4.4' rx='.8'/%3E%3Crect x='44' y='4.4' width='1.4' height='3.2' rx='.6'/%3E%3C/svg%3E") center / contain no-repeat;
}
.device .screen::before {
  content: ""; position: absolute; z-index: 3;
  top: 10px; left: 50%; transform: translateX(-50%);
  width: 9px; height: 9px; border-radius: 50%;
  background: #03060f; box-shadow: inset 0 0 0 1.4px rgba(255, 255, 255, 0.10);
}
.device img { display: block; width: 100%; }
.hero-media { position: relative; }
.hero-media::after {
  content: ""; position: absolute; inset: -8% 0; z-index: -1;
  background: radial-gradient(60% 50% at 50% 42%, rgba(124, 140, 255, 0.32), transparent 70%);
  filter: blur(8px);
}

/* ---------- Trust strip ---------- */
.trust { padding: 0 0 8px; }
.trust .row { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  color: var(--muted); font-size: 13.5px; font-weight: 600;
  padding: 9px 15px; border-radius: 999px;
}
.pill svg { width: 15px; height: 15px; color: var(--accent); flex: none; }

/* ---------- Recognition badges ---------- */
.recognition { padding: 32px 0 40px; overflow: hidden; }
.recognition-window { overflow-x: auto; scrollbar-width: none; mask-image: linear-gradient(to right, transparent, #000 4%, #000 96%, transparent); }
.recognition-window::-webkit-scrollbar { display: none; }
.recognition-track { display: flex; width: max-content; }
.recognition-list { display: flex; align-items: center; gap: 12px; padding-right: 12px; width: max-content; }
.recognition-list .recognition-badge { flex: none; }
.recognition.is-ready .recognition-track { animation: recognition-scroll 55s linear infinite; }
.recognition.is-ready .recognition-window:hover .recognition-track,
.recognition.is-ready .recognition-window:focus-within .recognition-track { animation-play-state: paused; }
@keyframes recognition-scroll { to { transform: translateX(-50%); } }
.recognition-badge {
  position: relative; display: inline-flex; align-items: center; min-height: 72px;
  border: 1px solid #dfe3eb; border-radius: 14px; background: #fff; color: #182033;
  overflow: hidden;
  box-shadow: 0 8px 22px rgba(4, 10, 31, 0.16);
  transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease, background-color 0.15s ease;
}
.recognition-badge:hover { transform: translateY(-2px); border-color: #5669d8; background: #111a33; color: #fff; box-shadow: 0 12px 28px rgba(4, 10, 31, 0.38); }
.recognition-badge:hover .award-source,
.recognition-badge:hover .vault-source,
.recognition-badge:hover .fazier-source,
.recognition-badge:hover .rating-score small,
.recognition-badge:hover .rating-source,
.recognition-badge:hover .award-link { color: #cbd3ff; }
.recognition-badge:hover .vault-meta,
.recognition-badge:hover .fazier-meta { color: #9eaeff; }
.recognition-badge:hover .rating-verdict,
.recognition-badge:hover .rating-score { border-color: #4c5878; }
.recognition-badge:focus-visible { outline: 3px solid rgba(255, 255, 255, 0.75); outline-offset: 3px; }
.recognition-badge::before { content: ""; align-self: stretch; width: 4px; flex: none; background: #7657e8; }
.recognition-award { width: 230px; padding: 10px 30px 10px 8px; gap: 11px; }
.recognition-award::before { position: absolute; inset: 0 auto 0 0; background: #d96822; }
.award-mark { display: grid; place-items: center; width: 43px; height: 43px; flex: none; border: 2px solid #d96822; border-radius: 50%; background: #fff4ea; color: #b84e12; }
.award-mark svg { width: 25px; height: 25px; }
.award-copy { display: grid; line-height: 1.12; }
.award-copy strong { font-size: 14px; letter-spacing: -0.01em; }
.award-meta, .award-source { font-size: 9.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.award-meta { color: #b84e12; }
.award-source { margin-top: 4px; color: #7657e8; }
.award-link { position: absolute; top: 8px; right: 10px; color: #8991a0; font-size: 13px; }
.recognition-vault { width: 230px; padding: 10px 30px 10px 8px; gap: 11px; }
.recognition-vault::before { position: absolute; inset: 0 auto 0 0; background: linear-gradient(180deg, #5a35d9, #8453f1 68%, #f74a6e); }
.vault-mark { display: grid; place-items: center; width: 43px; height: 43px; flex: none; border: 2px solid #7650e5; border-radius: 12px; background: #f5f2ff; }
.vault-mark svg { width: 29px; height: 29px; }
.vault-copy { display: grid; line-height: 1.12; }
.vault-copy strong { font-size: 14px; letter-spacing: -0.01em; }
.vault-meta, .vault-source { font-size: 9.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.vault-meta { color: #6841d8; }
.vault-source { margin-top: 4px; color: #667085; }
.recognition-fazier { width: 206px; padding: 10px 28px 10px 10px; gap: 10px; }
.recognition-fazier::before { position: absolute; inset: 0 auto 0 0; background: #165cff; }
.fazier-mark { display: grid; place-items: center; width: 42px; height: 42px; flex: none; }
.fazier-mark svg { width: 42px; height: 42px; }
.fazier-copy { display: grid; line-height: 1.12; }
.fazier-copy strong { font-size: 14px; letter-spacing: -0.01em; }
.fazier-meta, .fazier-source { font-size: 9.5px; font-weight: 800; letter-spacing: 0.07em; text-transform: uppercase; }
.fazier-meta { color: #0048ff; }
.fazier-source { margin-top: 4px; color: #667085; }
.recognition-producthunt { width: 270px; padding: 8px 10px; justify-content: center; }
.recognition-producthunt::before { display: none; }
.recognition-producthunt img { display: block; width: 250px; height: 54px; }
.recognition-findly { width: 206px; padding: 8px 12px; justify-content: center; }
.recognition-findly::before { position: absolute; inset: 0 auto 0 0; background: #7c3aed; }
.recognition-findly img { display: block; width: 158px; height: 50px; }
.recognition-spacerr { width: 270px; padding: 8px 10px; justify-content: center; }
.recognition-spacerr::before { display: none; }
.recognition-spacerr img { display: block; width: 234px; height: 54px; max-width: 100%; }
.recognition-directory { width: 270px; padding: 8px 10px; justify-content: center; }
.recognition-directory::before { display: none; }
.recognition-directory img { display: block; width: auto; height: auto; max-width: 100%; max-height: 60px; }
.recognition-rating { width: max-content; padding: 10px 29px 10px 18px; gap: 0; }
.recognition-rating::before { position: absolute; inset: 0 auto 0 0; }
.rating-verdict, .rating-score, .rating-source { align-self: stretch; }
.rating-verdict, .rating-score { display: grid; align-content: center; min-height: 44px; border-right: 1px solid #d7dbe3; }
.rating-verdict { padding-right: 11px; }
.rating-verdict strong { width: max-content; padding: 2px 6px; border-radius: 4px; background: #e5f8ef; color: #087a4f; font-size: 10px; letter-spacing: 0.02em; }
.rating-stars { margin-top: 4px; color: #e99b15; font-size: 12px; letter-spacing: 0.04em; }
.rating-score { grid-template-columns: auto auto; align-items: baseline; padding: 0 12px; }
.rating-score strong { font-size: 24px; line-height: 1; letter-spacing: -0.04em; }
.rating-score > span { margin-left: 3px; color: #737b89; font-size: 11px; }
.rating-score small { grid-column: 1 / -1; margin-top: 4px; color: #737b89; font-size: 10px; }
.rating-source { display: inline-flex; align-items: center; padding-left: 12px; color: #7657e8; font-size: 12px; font-weight: 800; white-space: nowrap; }
.rating-source span { display: inline-block; margin-right: 4px; color: #18a66c; font-size: 10px; }

@media (max-width: 430px) {
  .recognition-award { width: min(100%, 230px); }
  .recognition-vault { width: min(100%, 230px); }
  .recognition-fazier { width: min(100%, 206px); }
  .recognition-producthunt { width: min(100%, 270px); }
  .recognition-producthunt img { width: min(100%, 250px); height: auto; }
  .recognition-spacerr { width: min(100%, 270px); }
  .recognition-spacerr img { height: auto; }
  .recognition-directory { width: min(100%, 270px); }
  .recognition-rating { width: min(100%, 292px); padding-left: 18px; }
  .rating-verdict { padding-right: 10px; }
  .rating-score { padding-inline: 10px; }
  .rating-source { padding-left: 10px; font-size: 11px; }
}

/* ---------- Definition strip ---------- */
.definition { padding-top: 24px; }
.definition .card {
  background: linear-gradient(180deg, var(--surface-2), var(--surface));
  border: 1px solid var(--line); border-radius: 26px; padding: 34px;
}
.definition p { font-size: clamp(18px, 2.6vw, 22px); color: var(--text); font-weight: 500; line-height: 1.5; }
.definition .chips { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 22px; }

/* ---------- Steps ---------- */
.steps { display: grid; gap: 18px; margin-top: 14px; }
.step {
  background: var(--surface); border: 1px solid var(--line); border-radius: 20px; padding: 26px;
  position: relative;
}
.step .n {
  width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center;
  background: rgba(184, 192, 255, 0.14); color: var(--primary);
  font-weight: 800; font-size: 19px; margin-bottom: 16px;
}
.step h3 { font-size: 19px; margin-bottom: 8px; }
.step p { color: var(--muted); font-size: 15.5px; }

/* ---------- Split feature ---------- */
.feature .grid { display: grid; gap: 36px; align-items: center; }
.feature .body ul { list-style: none; margin-top: 20px; display: grid; gap: 12px; }
.feature .body li { display: flex; gap: 12px; color: var(--muted); font-size: 15.5px; }
.feature .body li svg { width: 20px; height: 20px; color: var(--mint); flex: none; margin-top: 1px; }

/* ---------- Use-case grid ---------- */
.cases { display: grid; gap: 16px; margin-top: 28px; grid-template-columns: 1fr; }
.case {
  background: var(--surface); border: 1px solid var(--line); border-radius: 18px; padding: 22px;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.case:hover { border-color: var(--line-2); transform: translateY(-2px); }
.case .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; margin-bottom: 14px; }
.case .ic svg { width: 23px; height: 23px; }
.case h3 { font-size: 16.5px; margin-bottom: 6px; }
.case p { color: var(--muted); font-size: 14.5px; }
.ic-a { background: rgba(184, 192, 255, 0.15); color: #c7cdff; }
.ic-b { background: rgba(124, 242, 192, 0.14); color: var(--mint); }
.ic-c { background: rgba(244, 189, 72, 0.15); color: #f7cf7d; }
.ic-d { background: rgba(255, 150, 180, 0.14); color: #ffb0c4; }
.ic-e { background: rgba(140, 200, 255, 0.14); color: #a7d4ff; }
.ic-f { background: rgba(200, 160, 255, 0.16); color: #d2b3ff; }

.tag-pro {
  display: inline-flex; align-items: center; gap: 7px; vertical-align: middle;
  background: rgba(244, 189, 72, 0.16); color: var(--gold);
  font-size: 12px; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase;
  padding: 4px 11px; border-radius: 999px; margin-left: 10px;
}

/* ---------- Privacy table ---------- */
.surfaces { margin-top: 26px; display: grid; gap: 12px; }
.surface {
  display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 16px; align-items: center;
  background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 18px 20px;
}
.surface .nm { font-weight: 700; font-size: 16px; display: flex; align-items: center; gap: 10px; }
.surface .nm svg { width: 18px; height: 18px; color: var(--accent); flex: none; }
.surface .ds { grid-column: 1 / -1; color: var(--muted); font-size: 14.5px; }
.state { font-size: 12.5px; font-weight: 800; letter-spacing: 0.03em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; white-space: nowrap; }
.state.off { background: var(--surface-3); color: var(--muted); }
.state.tap { background: rgba(184, 192, 255, 0.18); color: #c7cdff; }
.privacy-foot { margin-top: 22px; color: var(--text); font-weight: 600; }
.privacy-foot span { color: var(--mint); }
.privacy-foot a { text-decoration: underline; text-underline-offset: 4px; }

/* ---------- Comparison ---------- */
.compare { margin-top: 26px; border: 1px solid var(--line); border-radius: 20px; overflow: hidden; }
.compare table { width: 100%; border-collapse: collapse; font-size: 15px; }
.compare th, .compare td { text-align: left; padding: 15px 16px; border-bottom: 1px solid var(--line); }
.compare thead th { background: var(--surface-2); font-size: 13px; letter-spacing: 0.02em; }
.compare thead th:nth-child(2) { color: var(--primary); text-align: center; }
.compare thead th:nth-child(3) { color: var(--faint); text-align: center; }
.compare tbody td { color: var(--muted); }
.compare td:nth-child(2), .compare td:nth-child(3) { text-align: center; width: 22%; }
.compare tr:last-child td { border-bottom: 0; }
.compare .yes { color: var(--mint); }
.compare .no { color: var(--faint); }
.compare svg { width: 20px; height: 20px; vertical-align: middle; }

/* ---------- Pricing ---------- */
.prices { display: grid; gap: 20px; margin-top: 28px; }
.price {
  background: var(--surface); border: 1px solid var(--line); border-radius: 24px; padding: 30px;
  display: flex; flex-direction: column;
}
.price.pro { border-color: var(--line-2); background: linear-gradient(180deg, var(--surface-2), var(--surface)); box-shadow: 0 24px 60px rgba(0, 0, 0, 0.34); }
.price .tier { font-size: 14px; font-weight: 800; letter-spacing: 0.06em; text-transform: none; color: var(--accent); }
.price .amt { font-size: 38px; font-weight: 800; letter-spacing: -0.03em; margin: 12px 0 4px; }
.price .amt small { font-size: 16px; font-weight: 600; color: var(--faint); }
.price .note { color: var(--muted); font-size: 14.5px; min-height: 1px; }
.price ul { list-style: none; margin: 20px 0; display: grid; gap: 11px; }
.price li { display: flex; gap: 11px; color: var(--muted); font-size: 15px; }
.price li svg { width: 19px; height: 19px; color: var(--mint); flex: none; margin-top: 1px; }
.price .plans { display: flex; flex-wrap: wrap; gap: 8px; margin: 6px 0 18px; }
.plan-chip { background: var(--surface-3); border: 1px solid var(--line); border-radius: 12px; padding: 9px 13px; font-size: 13.5px; font-weight: 700; }
.plan-chip b { color: var(--text); }
.plan-chip.best { border-color: rgba(244, 189, 72, 0.4); color: var(--gold); }
.price .foot { margin-top: auto; }

/* ---------- FAQ ---------- */
.faq-list { margin-top: 26px; display: grid; gap: 0; border-top: 1px solid var(--line); }
.qa { border-bottom: 1px solid var(--line); padding: 16px 4px; }
.qa summary { font-size: 18px; font-weight: 700; color: var(--text); cursor: pointer; padding: 4px 28px 4px 0; }
.qa summary::marker { color: var(--primary); }
.qa[open] summary { margin-bottom: 12px; }
.qa p { color: var(--muted); font-size: 15.5px; }

/* ---------- Final CTA ---------- */
.final { text-align: center; }
.final .box {
  background: linear-gradient(160deg, rgba(124, 140, 255, 0.16), rgba(124, 140, 255, 0.04));
  border: 1px solid var(--line-2); border-radius: 30px; padding: 56px 28px;
}
.final h2 { font-size: clamp(30px, 6vw, 46px); }
.final p { color: var(--muted); margin: 16px auto 26px; max-width: 40ch; }

/* ---------- Footer ---------- */
.site-footer { border-top: 1px solid var(--line); padding: 40px 0; color: var(--faint); font-size: 14px; }
.site-footer .grid { display: flex; flex-wrap: wrap; gap: 18px 26px; align-items: center; justify-content: space-between; }
.site-footer a { color: var(--muted); }
.site-footer nav { display: flex; flex-wrap: wrap; gap: 18px; }
.site-footer .fine { width: 100%; color: var(--faint); font-size: 12.5px; }

/* ---------- Responsive ---------- */
@media (min-width: 760px) {
  .steps { grid-template-columns: repeat(3, 1fr); }
  .cases { grid-template-columns: repeat(3, 1fr); }
  .prices { grid-template-columns: 1fr 1fr; }
}
@media (min-width: 1000px) {
  section { padding: 92px 0; }
  .hero .grid { grid-template-columns: 1.05fr 0.95fr; gap: 24px; }
  .hero .device { max-width: 300px; }
  .feature .grid { grid-template-columns: 1fr 1fr; }
  .feature.reverse .media { order: 2; }
  .definition .card { padding: 44px; }
  .hero h1 { font-size: 64px; }
}
@media (max-width: 620px) {
  .site-header { position: relative; }
  .site-header .wrap { flex-wrap: wrap; gap: 8px; padding-block: 12px; }
  .header-actions { width: 100%; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
  .header-link { display: inline-flex; align-items: center; min-height: 44px; }
  .nav-cta { padding: 10px 14px; }
  .nav-cta svg { display: none; }
  .hero { padding-top: 32px; }
  .hero .reassure { font-size: 13px; flex-wrap: wrap; }
  .surface { grid-template-columns: minmax(0, 1fr); }
  .surface .state { justify-self: start; }
  .compare th, .compare td { padding: 12px 8px; font-size: 12px; overflow-wrap: anywhere; }
  .compare th:first-child { width: 44%; }
  .compare table { table-layout: fixed; }
  .compare th:nth-child(2), .compare td:nth-child(2) { width: 30%; }
  .compare th:nth-child(3), .compare td:nth-child(3) { width: 26%; }
  .compare thead th:nth-child(2) { white-space: nowrap; }
  .price { padding: 24px; }
  .definition .card { padding: 24px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { transition: none !important; animation: none !important; }
  .recognition-window { mask-image: none; }
}

/* Shared interaction and layout safeguards. */
[id] { scroll-margin-top: 100px; }
main:focus { outline: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.grid > *, .hero-copy, .body { min-width: 0; }
h1, h2 { text-wrap: balance; }
.hero-shortcuts { display: flex; flex-wrap: wrap; gap: 12px 24px; margin-top: 22px; font-size: 14px; }
.hero-shortcuts a, .guide-link { text-decoration: underline; text-underline-offset: 5px; display: inline-flex; align-items: center; min-height: 44px; }
.compare tbody th { font-weight: 500; color: var(--muted); }
.compare tr:last-child th { border-bottom: 0; }
.guide-topics { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 26px; }
.guide-topics a { border-top: 2px solid var(--line-2); padding-top: 20px; }
.guide-topics strong { display: block; color: var(--text); }
.guide-topics span { display: block; margin-top: 8px; color: var(--muted); font-size: 15px; }
.site-footer nav a { display: inline-flex; align-items: center; min-height: 44px; }
.price .foot { padding-top: 20px; }
@media (min-width: 760px) and (max-width: 999px) {
  .hero .grid { grid-template-columns: 1.25fr 0.75fr; gap: 28px; }
  .hero h1 { font-size: 48px; }
  .hero .device { max-width: 270px; }
  .feature .grid { grid-template-columns: 1fr 1fr; }
  .feature.reverse .media { order: 2; }
}
@media (max-width: 759px) {
  section { padding: 48px 0; }
  .feature .body { order: -1; }
  .device { max-width: 270px; }
  .guide-topics { grid-template-columns: 1fr; }
  .hero .cta-row { align-items: flex-start; flex-direction: column; gap: 12px; }
}