/* ===========================================================================
   VITA Upgraded
   ---------------------------------------------------------------------------
   Palette sampled from the new logo (VITA Upgraded Blue Logo.png), not
   invented: the mark runs sky #88CBFB to azure #4599F3 top to bottom, the
   wordmark is navy #12253B. Sky and azure are decoration only: azure measures
   about 3:1 on white, so every piece of text that wants blue uses --accent,
   which is the azure pushed dark enough to pass AA.

   One theme per visitor, chosen by their OS. No section inverts.
   No inline styles anywhere, so the CSP can forbid them.
   =========================================================================== */

/* Static weights, not a variable font: WebKit on some platforms ignores the
   weight axis and draws every heading at the file's default, hairline-thin
   instance. Four small files render identically everywhere. */
@font-face { font-family: "Outfit"; src: url("/assets/fonts/outfit-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Geist"; src: url("/assets/fonts/geist-600.woff2") format("woff2"); font-weight: 600; font-display: swap; }

:root {
  --ground: #F5F8FC;
  --surface: #FFFFFF;
  --tint: #E9F2FC;
  --tint-2: #DCEBFB;
  --ink: #12253B;
  --ink-2: #44566C;
  --line: #D3DFEC;
  --accent: #1A62C2;
  --accent-ink: #FFFFFF;
  --accent-hover: #154F9E;
  --sky: #88CBFB;
  --azure: #4599F3;
  --ghost: #9CC9F5;
  --ok: #17703F;
  --bad: #B3261E;
  --navy-cell: #12253B;
  --navy-cell-ink: #E8F0F9;
  --navy-cell-ink-2: #B9C9DB;
  --shadow: 0 1px 2px rgba(18, 37, 59, .06), 0 8px 24px -12px rgba(18, 37, 59, .18);
  --shadow-lift: 0 2px 4px rgba(18, 37, 59, .06), 0 18px 40px -18px rgba(26, 98, 194, .35);

  --display: "Outfit", ui-sans-serif, system-ui, sans-serif;
  --body: "Geist", ui-sans-serif, system-ui, sans-serif;

  --r-sm: 10px;
  --r: 16px;
  --r-lg: 24px;
  --gutter: clamp(16px, 4vw, 40px);
  --max: 1180px;
  --head-h: 68px;
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  color-scheme: light dark;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --ground: #0B1726;
    --surface: #10203A;
    --tint: #12253F;
    --tint-2: #17304F;
    --ink: #E8F0F9;
    --ink-2: #A9BCD2;
    --line: #233A57;
    --accent: #8CCBFB;
    --accent-ink: #0B1726;
    --accent-hover: #B5DEFD;
    --ghost: #2D5E95;
    --ok: #6FD39B;
    --bad: #FF8A80;
    --navy-cell: #1B3557;
    --navy-cell-ink: #EEF5FC;
    --navy-cell-ink-2: #BDD0E6;
    --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 10px 28px -14px rgba(0, 0, 0, .6);
    --shadow-lift: 0 2px 4px rgba(0, 0, 0, .3), 0 20px 44px -18px rgba(69, 153, 243, .35);
  }
}

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

html {
  -webkit-text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--head-h) + 16px);
  background: var(--ground);
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--ground);
  color: var(--ink);
  font: 400 1.0625rem/1.6 var(--body);
  font-feature-settings: "ss01" 0;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

h1, h2, h3 {
  font-family: var(--display);
  font-weight: 600;
  line-height: 1.08;
  letter-spacing: -0.025em;
  margin: 0;
  text-wrap: balance;
}
h2 { font-size: clamp(2rem, 1.35rem + 2.6vw, 3.25rem); }
h3 { font-size: 1.3rem; line-height: 1.25; letter-spacing: -0.015em; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
img, svg { display: block; max-width: 100%; }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
b, strong { font-weight: 600; }

::selection { background: var(--sky); color: #0B1726; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 6px; }
html { scrollbar-color: var(--ghost) var(--ground); }

.wrap { width: min(100% - 2 * var(--gutter), var(--max)); margin-inline: auto; }
.sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.i { width: 1.25em; height: 1.25em; flex: none; }

.skip {
  position: absolute; left: 12px; top: -60px; z-index: 50;
  background: var(--ink); color: var(--ground);
  padding: 10px 14px; border-radius: var(--r-sm); text-decoration: none;
}
.skip:focus { top: 12px; }

/* ------------------------------------------------------------- buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .5em;
  min-height: 44px; padding: 0 1.1rem;
  border: 1px solid transparent; border-radius: 999px;
  font: 600 1rem/1 var(--body); text-decoration: none; cursor: pointer;
  touch-action: manipulation; user-select: none; -webkit-user-select: none;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease, transform .12s var(--ease-out), box-shadow .2s ease;
}
.btn:active { transform: scale(.97); }
.btn-lg { min-height: 52px; padding: 0 1.4rem; font-size: 1.0625rem; }
.btn-primary { background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow); }
.btn-quiet { background: transparent; color: var(--ink); border-color: var(--line); }
.btn .i { width: 1.15em; height: 1.15em; transition: transform .2s var(--ease-out); }
.btn[disabled] { opacity: .6; cursor: progress; }
@media (hover: hover) and (pointer: fine) {
  .btn-primary:hover { background: var(--accent-hover); box-shadow: var(--shadow-lift); }
  .btn-primary:hover .i { transform: translateX(3px); }
  .btn-quiet:hover { border-color: var(--ink-2); background: var(--surface); }
  a:hover { text-decoration-thickness: 2px; }
}

/* -------------------------------------------------------------- header */
.head {
  position: sticky; top: 0; z-index: 30;
  background: var(--ground);
  border-bottom: 1px solid transparent;
  padding-top: env(safe-area-inset-top, 0px);
  transition: border-color .2s ease;
}
.head.scrolled { border-bottom-color: var(--line); }
.head-in { display: flex; align-items: center; justify-content: space-between; height: var(--head-h); gap: 24px; }
.brand { display: block; color: var(--ink); flex: none; }
.brand svg { height: 38px; width: auto; }
.nav { display: flex; align-items: center; gap: 28px; }
.nav ul { display: flex; gap: 26px; }
.nav ul a { color: var(--ink); text-decoration: none; font-weight: 500; font-size: .98rem; padding: 10px 0; }
@media (hover: hover) and (pointer: fine) { .nav ul a:hover { color: var(--accent); } }
.menu-btn { display: none; }

@media (max-width: 859px) {
  :root { --head-h: 60px; }
  .brand svg { height: 32px; }
  .menu-btn {
    display: inline-grid; place-items: center; width: 44px; height: 44px; margin-right: -8px;
    background: transparent; border: 0; color: var(--ink); border-radius: 12px; cursor: pointer;
    touch-action: manipulation;
  }
  .menu-btn .i { width: 26px; height: 26px; }
  .menu-close { display: none; }
  .menu-btn[aria-expanded="true"] .menu-open { display: none; }
  .menu-btn[aria-expanded="true"] .menu-close { display: inline; }
  .nav {
    position: absolute; left: 0; right: 0; top: 100%;
    flex-direction: column; align-items: stretch; gap: 8px;
    padding: 8px var(--gutter) 20px;
    background: var(--ground); border-bottom: 1px solid var(--line);
    box-shadow: 0 18px 30px -20px rgba(18, 37, 59, .35);
  }
  .nav:not(.open) { display: none; }
  .nav ul { flex-direction: column; gap: 0; }
  .nav ul a { display: block; padding: 14px 4px; font-size: 1.125rem; border-bottom: 1px solid var(--line); }
  .nav-cta { margin-top: 12px; min-height: 52px; }
}

/* ---------------------------------------------------------------- hero */
.hero { position: relative; padding: clamp(28px, 6vw, 88px) 0 clamp(40px, 5vw, 64px); }
.hero-in { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: clamp(24px, 4vw, 64px); align-items: center; }
.hero h1 { font-size: clamp(2.9rem, 1.4rem + 5.6vw, 5.5rem); line-height: 1; letter-spacing: -0.035em; }
.hero h1 .up { color: var(--accent); white-space: nowrap; }
.lede { margin-top: 22px; font-size: clamp(1.125rem, 1rem + .5vw, 1.3rem); line-height: 1.5; color: var(--ink-2); max-width: 38ch; }

.pick { margin-top: 34px; }
.pick fieldset { border: 0; margin: 0; padding: 0; }
.pick legend, .enquiry legend { font-weight: 600; font-size: .98rem; margin-bottom: 12px; padding: 0; }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; cursor: pointer; user-select: none; -webkit-user-select: none; touch-action: manipulation; }
.chip input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.chip span {
  display: inline-flex; align-items: center; min-height: 40px; padding: 0 15px;
  border: 1px solid var(--line); border-radius: 999px; background: var(--surface);
  font-weight: 500; font-size: .95rem; color: var(--ink);
  transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .12s var(--ease-out);
}
.chip span::before {
  content: ""; width: 0; height: 9px; margin-right: 0;
  border: solid currentColor; border-width: 0 2px 2px 0; transform: rotate(45deg) translateY(-2px);
  opacity: 0; transition: width .15s var(--ease-out), margin .15s var(--ease-out), opacity .15s;
}
.chip input:checked + span { background: var(--tint-2); border-color: var(--accent); color: var(--ink); }
.chip input:checked + span::before { width: 5px; margin-right: 9px; opacity: 1; }
.chip input:focus-visible + span { outline: 2px solid var(--accent); outline-offset: 2px; }
.chip:active span { transform: scale(.97); }
@media (hover: hover) and (pointer: fine) { .chip:hover span { border-color: var(--ink-2); } }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 26px; }

/* the mark: the old position stays as an outline, the mark rises out of it */
.hero-mark { position: relative; justify-self: end; width: min(100%, 470px); }
.hero-mark svg { width: 100%; height: auto; overflow: visible; }
.hero-mark .ghost path { fill: none; stroke: var(--ghost); stroke-width: 2.5; stroke-dasharray: 9 9; transform: translate(-22px, 46px); }
.hero-mark .solid { filter: drop-shadow(0 26px 30px rgba(26, 98, 194, .22)); }
@media (prefers-reduced-motion: no-preference) {
  .hero-mark .blade-l, .hero-mark .blade-r { animation: rise 1.25s var(--ease-out) both; }
  .hero-mark .blade-r { animation-delay: .14s; }
  .hero-mark .ghost { animation: ghost-in .9s ease-out both; }
}
@media (max-width: 859px) and (prefers-reduced-motion: no-preference) {
  .hero h1 .up { display: inline-block; animation: rise-word 1.1s var(--ease-out) .1s both; }
}
@keyframes rise-word { from { transform: translate(-.12em, .22em); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes rise { from { transform: translate(-22px, 46px); opacity: .35; } to { transform: none; opacity: 1; } }
@keyframes ghost-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 859px) {
  .hero { padding-top: 20px; overflow: hidden; }
  .hero-in { grid-template-columns: 1fr; }
  .hero-copy { position: relative; z-index: 1; }
  /* On a phone the mark would sit behind the headline and the paragraph.
     The logo already carries it; the motion moves to the word instead. */
  .hero-mark { display: none; }
  .hero { background: radial-gradient(120% 60% at 100% 0%, var(--tint-2) 0%, transparent 60%); }
  .hero h1 { max-width: 9ch; }
  .lede { margin-top: 16px; }
  .pick { margin-top: 24px; }
  .chip span { min-height: 42px; }
  .actions { margin-top: 20px; }
  .actions .btn { flex: 1 1 auto; }
}

/* ----------------------------------------------------------- sections */
section { position: relative; }
.services, .promise, .how, .faq, .start { padding: clamp(64px, 9vw, 120px) 0; }
.section-lede { margin-top: 16px; color: var(--ink-2); max-width: 56ch; font-size: 1.125rem; }

/* services: a tabbed index on wide screens, a plain stack on phones */
.svc { margin-top: 44px; }
.svc-panels { display: grid; gap: 14px; }
.svc-panel {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(22px, 3.4vw, 40px);
}
.svc-head { display: flex; align-items: center; gap: 14px; }
.svc-head .i { width: 44px; height: 44px; padding: 10px; border-radius: 12px; background: var(--tint); color: var(--accent); }
.svc-panel > p { margin-top: 16px; color: var(--ink-2); max-width: 62ch; }
.ticks { margin-top: 20px; display: grid; gap: 10px; }
.ticks li { display: flex; gap: 10px; align-items: flex-start; }
.ticks .i { width: 1.1em; height: 1.1em; margin-top: .28em; color: var(--accent); stroke-width: 2.5; }
.fit { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-2); }
.fit b { color: var(--ink); }

@media (min-width: 900px) {
  .svc.tabbed { display: grid; grid-template-columns: minmax(280px, 4fr) minmax(0, 7fr); gap: 28px; align-items: start; }
  .svc.tabbed .svc-tabs { display: grid; gap: 6px; position: sticky; top: calc(var(--head-h) + 24px); }
  .svc-tabs button {
    display: flex; align-items: center; gap: 14px; width: 100%; text-align: left;
    padding: 14px 16px; border: 1px solid transparent; border-radius: var(--r);
    background: transparent; color: var(--ink); font: inherit; cursor: pointer;
    transition: background-color .15s ease, border-color .15s ease;
  }
  .svc-tabs button .i { width: 40px; height: 40px; padding: 9px; border-radius: 11px; background: var(--tint); color: var(--accent); transition: background-color .15s, color .15s; }
  .svc-tabs b { display: block; font-family: var(--display); font-weight: 600; font-size: 1.1rem; letter-spacing: -0.01em; }
  .svc-tabs small { display: block; color: var(--ink-2); font-size: .92rem; }
  .svc-tabs button[aria-selected="true"] { background: var(--surface); border-color: var(--line); box-shadow: var(--shadow); }
  .svc-tabs button[aria-selected="true"] .i { background: var(--accent); color: var(--accent-ink); }
  .svc.tabbed .svc-panel { min-height: 100%; }
  .svc.tabbed .svc-head .i { display: none; }
  .svc.tabbed .svc-panel h3 { font-size: clamp(1.6rem, 1.1rem + 1.2vw, 2.1rem); line-height: 1.12; }
  .svc.tabbed .svc-panel:not([hidden]) { animation: panel-in .35s var(--ease-out); }
}
@media (hover: hover) and (pointer: fine) {
  .svc-tabs button[aria-selected="false"]:hover { background: var(--tint); }
}
@keyframes panel-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .svc.tabbed .svc-panel:not([hidden]) { animation: none; } }

/* promise: four commitments, one carries the weight */
.bento { margin-top: 44px; display: grid; gap: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
.cell { border-radius: var(--r-lg); padding: clamp(22px, 3vw, 36px); border: 1px solid var(--line); background: var(--surface); }
.cell h3 { margin-top: 18px; font-size: clamp(1.35rem, 1.1rem + .8vw, 1.75rem); }
.cell p { margin-top: 10px; color: var(--ink-2); }
.cell-icon .i { width: 46px; height: 46px; padding: 10px; border-radius: 13px; background: var(--tint); color: var(--accent); }
.cell-own { grid-column: span 4; grid-row: span 2; background: linear-gradient(160deg, var(--tint) 0%, var(--surface) 70%); display: flex; flex-direction: column; }
.cell-own h3 { font-size: clamp(1.9rem, 1.3rem + 2vw, 2.9rem); margin-top: 26px; }
.cell-own p { font-size: 1.125rem; max-width: 46ch; }
.deed { margin: auto 0 0; padding-top: 28px; }
.deed div { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.deed div:last-child { border-bottom: 0; padding-bottom: 0; }
.deed dt { font-weight: 500; }
.deed dd { margin: 0; display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); font-size: .95rem; text-align: right; }
.deed .i { width: 1.05em; height: 1.05em; color: var(--accent); stroke-width: 2.5; }
.cell-quote { grid-column: span 2; }
.cell-plain { grid-column: span 2; background: var(--navy-cell); border-color: var(--navy-cell); color: var(--navy-cell-ink); }
.cell-plain p { color: var(--navy-cell-ink-2); }
.cell-plain .cell-icon .i { background: rgba(136, 203, 251, .16); color: var(--sky); }
.cell-secure { grid-column: span 6; display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 20px; align-items: center; }
.cell-secure .cell-icon { grid-row: span 2; }
.cell-secure h3 { margin-top: 0; }
.cell-secure p { margin-top: 4px; }
@media (max-width: 859px) {
  .bento { grid-template-columns: 1fr; }
  .cell-own, .cell-quote, .cell-plain, .cell-secure { grid-column: auto; grid-row: auto; }
  .cell-secure { grid-template-columns: 1fr; }
  .cell-secure .cell-icon { grid-row: auto; }
  .cell-secure h3 { margin-top: 18px; }
}

/* how: one line of travel, four stops */
.track { margin-top: 52px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 28px; position: relative; counter-reset: none; }
.track::before {
  content: ""; position: absolute; left: 7px; right: 0; top: 7px; height: 2px;
  background: linear-gradient(90deg, var(--sky), var(--azure));
  border-radius: 2px;
}
.track li { position: relative; padding-top: 40px; }
.track li::before {
  content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 16px; border-radius: 50%;
  background: var(--ground); border: 3px solid var(--azure);
}
.track li:last-child::before { background: var(--azure); }
.track h3 { font-size: 1.5rem; }
.track p { margin-top: 10px; color: var(--ink-2); }
@media (max-width: 859px) {
  .track { grid-template-columns: 1fr; gap: 30px; margin-top: 40px; }
  .track::before { left: 7px; top: 8px; bottom: 8px; right: auto; width: 2px; height: auto; background: linear-gradient(180deg, var(--sky), var(--azure)); }
  .track li { padding-top: 0; padding-left: 38px; }
}

/* proof: a sentence with live numbers in it */
.proof { padding: clamp(64px, 9vw, 120px) 0; background: var(--tint); }
.proof-in { max-width: 920px; }
.proof h2 { font-size: clamp(2.2rem, 1.4rem + 3vw, 3.75rem); }
.proof-static, .proof-live { margin-top: 24px; font-family: var(--display); font-size: clamp(1.35rem, 1.05rem + 1.3vw, 2rem); line-height: 1.35; letter-spacing: -0.01em; color: var(--ink-2); }
.proof-live b { color: var(--ink); font-weight: 600; font-variant-numeric: tabular-nums; }
.proof-links { margin-top: 30px; display: flex; flex-wrap: wrap; gap: 10px 28px; }
.proof-links a { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; min-height: 44px; }
.proof-links .i { width: 1.05em; height: 1.05em; }

/* questions */
.faq-in { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 40px; align-items: start; }
.faq-list { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  display: flex; justify-content: space-between; align-items: center; gap: 20px;
  padding: 22px 0; cursor: pointer; list-style: none;
  font-family: var(--display); font-weight: 600; font-size: 1.2rem; letter-spacing: -0.01em; line-height: 1.3;
  touch-action: manipulation;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary .i { width: 22px; height: 22px; color: var(--accent); transition: transform .25s var(--ease-out); }
.faq details[open] summary .i { transform: rotate(45deg); }
.faq details p { padding: 0 0 24px; color: var(--ink-2); max-width: 66ch; }
@media (hover: hover) and (pointer: fine) { .faq summary:hover { color: var(--accent); } }
@media (max-width: 859px) { .faq-in { grid-template-columns: 1fr; gap: 24px; } .faq summary { font-size: 1.1rem; padding: 20px 0; } }

/* start */
.start { border-top: 1px solid var(--line); }
.start-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(32px, 5vw, 72px); align-items: start; }
.start-copy > p { margin-top: 18px; color: var(--ink-2); font-size: 1.125rem; max-width: 40ch; }
.start-facts { margin-top: 30px; display: grid; gap: 14px; }
.start-facts li { display: flex; gap: 12px; align-items: flex-start; }
.start-facts .i { color: var(--accent); margin-top: .15em; }
.start-facts a { overflow-wrap: anywhere; }

.enquiry { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-lg); padding: clamp(20px, 3.2vw, 40px); box-shadow: var(--shadow); display: grid; gap: 18px; }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.field { display: grid; gap: 7px; min-width: 0; border: 0; margin: 0; padding: 0; }
.field label, .enquiry legend { font-weight: 600; font-size: .98rem; }
.opt { font-weight: 400; color: var(--ink-2); font-size: .9rem; margin-left: 4px; }
input[type="text"], input[type="email"], input[type="tel"], textarea {
  width: 100%; min-height: 50px; padding: 12px 14px;
  font: 400 16px/1.4 var(--body); color: var(--ink);
  background: var(--ground); border: 1px solid var(--line); border-radius: 12px;
  caret-color: var(--accent);
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
textarea { resize: vertical; min-height: 130px; }
input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 22%, transparent); }
[aria-invalid="true"] { border-color: var(--bad); }
.err { color: var(--bad); font-size: .92rem; min-height: 0; }
.err:empty { display: none; }
.hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.turnstile:empty { display: none; }
.send { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; }
.fine { color: var(--ink-2); font-size: .92rem; }
.status { font-weight: 500; }
.status:empty { display: none; }
.status[data-kind="ok"] { color: var(--ok); }
.status[data-kind="bad"] { color: var(--bad); }
@media (max-width: 859px) {
  .start-in { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .send .btn { width: 100%; }
}

/* footer */
.foot { border-top: 1px solid var(--line); padding: 56px 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
.foot-in { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 4fr) minmax(0, 3fr); gap: 32px; }
.foot-brand .brand svg { height: 34px; }
.foot-brand p { margin-top: 16px; color: var(--ink-2); max-width: 34ch; }
.foot-nav { display: flex; gap: 48px; }
.foot-nav ul { display: grid; gap: 4px; align-content: start; }
.foot-nav a, .foot-contact a { color: var(--ink); text-decoration: none; display: inline-block; padding: 6px 0; }
@media (hover: hover) and (pointer: fine) { .foot-nav a:hover, .foot-contact a:hover { color: var(--accent); text-decoration: underline; } }
.foot-contact { font-style: normal; display: grid; gap: 4px; align-content: start; color: var(--ink-2); }
.foot-contact a { overflow-wrap: anywhere; }
.foot-base { margin-top: 44px; padding-top: 20px; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .92rem; }
@media (max-width: 859px) { .foot-in { grid-template-columns: 1fr; gap: 28px; } }

/* legal and 404 pages */
.doc { padding: clamp(40px, 7vw, 88px) 0 clamp(64px, 9vw, 120px); }
.doc-in { max-width: 72ch; }
.doc h1 { font-size: clamp(2.4rem, 1.6rem + 3vw, 3.75rem); }
.doc .updated { margin-top: 12px; color: var(--ink-2); }
.doc h2 { font-size: 1.5rem; margin-top: 44px; }
.doc p, .doc ul { margin-top: 14px; }
.doc ul { list-style: disc; padding-left: 1.3em; }
.doc li + li { margin-top: 6px; }
.lost { padding: clamp(56px, 10vw, 140px) 0; }
.lost h1 { font-size: clamp(2.6rem, 1.6rem + 4vw, 4.5rem); }
.lost p { margin-top: 18px; color: var(--ink-2); font-size: 1.125rem; max-width: 46ch; }
.lost .actions { margin-top: 30px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: .01ms !important; animation-duration: .01ms !important; }
}