/* Better Tuju brand layer for bettertuju.com: tokens, type scale and components from design/brand/BRAND.md
   (Figma "Kiihko" › Better Tuju, adopted 24 Oct 2026). Every page loads this file; site.css adds the homepage.
   Use the semantic tokens (--bg-*, --text-*, --icon-*, --border-*), never the primitives, in page styles. */

/* Bricolage Grotesque (700, opsz 60–96) and Figtree (400–800), SIL Open Font License 1.1. Latin subsets built by
   site/scripts/build_assets.py. Bricolage ships one weight, so Title/XL (600 in Figma) renders at 700 here. */
@font-face { font-family: "Bricolage Grotesque"; src: url(/assets/fonts/bricolage-grotesque-latin.woff2) format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Figtree"; src: url(/assets/fonts/figtree-latin.woff2) format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; }

:root {
  color-scheme: light dark;

  /* ---------- semantic colour, light ---------- */
  --bg-canvas: #F4F6F9;
  --bg-surface: #FFFFFF;
  --bg-surface-raised: #FFFFFF;
  --bg-subtle: #F4F6F9;
  --bg-muted: #ECEFF4;
  --bg-inverse: #131924;
  --bg-brand: #175EEA;
  --bg-brand-pressed: #104DCB;
  --bg-brand-subtle: #EEF4FF;
  --bg-disabled: #ECEFF4;
  --bg-success: #12A150;
  --bg-success-subtle: #E8F8EF;
  --bg-warning: #F59E0B;
  --bg-warning-subtle: #FFF6E5;
  --bg-danger: #E5383B;
  --bg-danger-subtle: #FFF0F0;
  --text-primary: #131924;
  --text-secondary: #4D586B;
  --text-tertiary: #6B778A;
  --text-disabled: #97A3B4;
  --text-brand: #175EEA;
  --text-on-brand: #FFFFFF;
  --text-inverse: #FFFFFF;
  --text-success: #0B8040;
  --text-warning: #8F5800;
  --text-danger: #C42127;
  --icon-primary: #222A38;
  --icon-secondary: #6B778A;
  --icon-brand: #175EEA;
  --icon-on-brand: #FFFFFF;
  --icon-danger: #E5383B;
  --border-subtle: #ECEFF4;
  --border-default: #DDE2EA;
  --border-strong: #C4CCD7;
  --border-brand: #175EEA;
  --border-on-map: #FFFFFF;
  --guidance-bg: #175EEA;
  --guidance-bg-deep: #0E3FA6;
  --guidance-text: #FFFFFF;
  --guidance-text-muted: #DCE8FE;
  --traffic-free: #12A150;
  --traffic-slow: #F59E0B;
  --traffic-heavy: #E5383B;
  --traffic-standstill: #8E1B3C;
  --route-primary: #175EEA;
  --route-casing: #0E3FA6;
  --route-alt: #8BB1FB;
  --category-fuel: #F59E0B;
  --category-charging: #0E9F9E;
  --category-food: #F26B1D;
  --category-rest: #12A150;
  --category-camera: #7C5CFF;
  --category-fuel-subtle: #FFF6E5;
  --category-charging-subtle: #E6F7F7;
  --category-food-subtle: #FFF1E8;
  --category-rest-subtle: #E8F8EF;
  --category-camera-subtle: #F2EEFF;
  --map-land: #F2F3EF;
  --map-park: #D6EDD3;
  --map-water: #BBDDF6;
  --map-road: #FFFFFF;
  --map-road-major: #FFE3A6;
  --map-building: #E5E6E1;
  --map-label: #5D6878;
  --overlay-scrim: rgb(11 15 23 / .40);
  --overlay-glass: rgb(255 255 255 / .86);
  --overlay-pressed: rgb(19 25 36 / .06);

  /* ---------- type ---------- */
  --font-display: "Bricolage Grotesque", "Figtree", system-ui, sans-serif;
  --font-text: "Figtree", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  /* Style: weight size/line-height family. Sizes in rem so browser text size still scales them. */
  --type-display-eta: 700 2.5rem/2.75rem var(--font-display);         --track-display-eta: -0.03em;
  --type-display-large: 700 2rem/2.375rem var(--font-display);        --track-display-large: -0.02em;
  --type-guidance-distance: 700 2.25rem/2.5rem var(--font-display);   --track-guidance-distance: -0.02em;
  --type-guidance-road: 700 1.5rem/1.8125rem var(--font-text);        --track-guidance-road: -0.005em;
  --type-numeric-speed: 700 1.75rem/1.875rem var(--font-display);     --track-numeric-speed: -0.02em;
  --type-title-xl: 700 1.625rem/2rem var(--font-display);             --track-title-xl: -0.015em;
  --type-title-l: 700 1.375rem/1.75rem var(--font-text);              --track-title-l: -0.005em;
  --type-title-m: 700 1.125rem/1.5rem var(--font-text);
  --type-title-s: 600 1rem/1.375rem var(--font-text);
  --type-body-l: 400 1.0625rem/1.5rem var(--font-text);
  --type-body-m: 400 .9375rem/1.3125rem var(--font-text);
  --type-body-m-strong: 600 .9375rem/1.3125rem var(--font-text);
  --type-label-l: 700 1.0625rem/1.375rem var(--font-text);
  --type-label-m: 600 .9375rem/1.25rem var(--font-text);
  --type-label-s: 600 .8125rem/1rem var(--font-text);
  --type-caption: 500 .75rem/1rem var(--font-text);
  --type-overline: 700 .6875rem/.875rem var(--font-text);             --track-overline: 0.06em;

  /* ---------- spacing, radius, elevation ---------- */
  --space-2xs: .125rem; --space-xs: .25rem; --space-sm: .5rem; --space-md: .75rem; --space-lg: 1rem;
  --space-xl: 1.25rem; --space-2xl: 1.5rem; --space-3xl: 2rem; --space-4xl: 2.5rem; --space-5xl: 3rem;
  --radius-xs: 6px; --radius-sm: 10px; --radius-md: 14px; --radius-lg: 20px; --radius-xl: 28px; --radius-full: 999px;
  --elev-1: 0 1px 2px rgb(11 15 23 / .06), 0 2px 8px rgb(11 15 23 / .06);
  --elev-2: 0 1px 3px rgb(11 15 23 / .08), 0 6px 20px rgb(11 15 23 / .10);
  --elev-3: 0 -2px 6px rgb(11 15 23 / .04), 0 -8px 32px rgb(11 15 23 / .12);
  --ease: cubic-bezier(.2, .7, .2, 1);
  --focus-ring: 3px solid var(--border-brand);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg-canvas: #0B0F17;
    --bg-surface: #131924;
    --bg-surface-raised: #1A212D;
    --bg-subtle: #222A38;
    --bg-muted: #343E50;
    --bg-inverse: #F4F6F9;
    --bg-brand-pressed: #5089F5;
    --bg-brand-subtle: #10234A;
    --bg-disabled: #222A38;
    --bg-success-subtle: #0B2E1C;
    --bg-warning-subtle: #3A2700;
    --bg-danger-subtle: #43121A;
    --text-primary: #F4F6F9;
    --text-secondary: #97A3B4;
    --text-tertiary: #6B778A;
    --text-disabled: #4D586B;
    --text-brand: #8BB1FB;
    --text-inverse: #131924;
    --text-success: #3DD17F;
    --text-warning: #FFBE3D;
    --text-danger: #FF6B6B;
    --icon-primary: #F4F6F9;
    --icon-secondary: #97A3B4;
    --icon-brand: #8BB1FB;
    --icon-danger: #FF6B6B;
    --border-subtle: #222A38;
    --border-default: #343E50;
    --border-strong: #4D586B;
    --border-brand: #5089F5;
    --border-on-map: #343E50;
    --guidance-bg: #104DCB;
    --guidance-bg-deep: #10357F;
    --guidance-text-muted: #B9D0FD;
    --traffic-free: #3DD17F;
    --traffic-slow: #FFBE3D;
    --traffic-heavy: #FF6B6B;
    --traffic-standstill: #D6527A;
    --route-primary: #5089F5;
    --route-casing: #0F2A5E;
    --route-alt: #10357F;
    --category-fuel: #FFBE3D;
    --category-charging: #2CCBC9;
    --category-food: #FF8F4D;
    --category-rest: #3DD17F;
    --category-camera: #A08BFF;
    --category-fuel-subtle: #3A2700;
    --category-charging-subtle: #082E2E;
    --category-food-subtle: #3B1C08;
    --category-rest-subtle: #0B2E1C;
    --category-camera-subtle: #241A52;
    --map-land: #141A22;
    --map-park: #15281D;
    --map-water: #0D2235;
    --map-road: #283141;
    --map-road-major: #3B4458;
    --map-building: #1C232D;
    --map-label: #8E9AAD;
    --overlay-scrim: rgb(0 0 0 / .60);
    --overlay-glass: rgb(26 33 45 / .86);
    --overlay-pressed: rgb(255 255 255 / .08);
    /* Dark mode has no shadows: raised surfaces get a 1 px border/subtle ring instead. */
    --elev-1: 0 0 0 1px var(--border-subtle);
    --elev-2: 0 0 0 1px var(--border-subtle);
    --elev-3: 0 0 0 1px var(--border-subtle);
  }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }
body { margin: 0; background: var(--bg-canvas); color: var(--text-primary); font: var(--type-body-l); -webkit-font-smoothing: antialiased; }
img, svg { display: block; }
a { color: var(--text-brand); text-underline-offset: 3px; }
h1, h2, h3 { margin: 0; color: var(--text-primary); }
p { margin: 0; }
[hidden] { display: none !important; }
:focus-visible { outline: var(--focus-ring); outline-offset: 2px; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; left: -999px; top: 0; }
.skip:focus { left: 1rem; top: 1rem; z-index: 50; background: var(--bg-surface); color: var(--text-primary); font: var(--type-label-m); padding: .75rem 1rem; border-radius: var(--radius-md); box-shadow: var(--elev-2); }

/* ---------- type styles ---------- */
.t-display-eta { font: var(--type-display-eta); letter-spacing: var(--track-display-eta); font-variant-numeric: tabular-nums; }
.t-display-large { font: var(--type-display-large); letter-spacing: var(--track-display-large); }
.t-title-xl { font: var(--type-title-xl); letter-spacing: var(--track-title-xl); }
.t-title-l { font: var(--type-title-l); letter-spacing: var(--track-title-l); }
.t-title-m { font: var(--type-title-m); }
.t-title-s { font: var(--type-title-s); }
.t-body-m { font: var(--type-body-m); }
.t-caption { font: var(--type-caption); }
/* Overline: text/tertiary in Figma; text/secondary here so 11 px text keeps 4.5:1 on dark surfaces. */
.overline { font: var(--type-overline); letter-spacing: var(--track-overline); text-transform: uppercase; color: var(--text-secondary); }

/* ---------- icons: Better Tuju's own set (design/brand/figma/icons-svg), inlined with currentColor. The few the set
   lacks (arrow-down, circle-check, smartphone, eye-off, ban, lock, download) are Lucide, ISC: /vendor/lucide/LICENSE.txt ---------- */
.i { flex: none; width: 1.25rem; height: 1.25rem; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.i-sm { width: 1rem; height: 1rem; }
.i-lg { width: 1.5rem; height: 1.5rem; }

/* ---------- buttons: Primary / Secondary / Tonal / Ghost / Destructive; L 52, M 44, S 36 ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 3.25rem; padding: .5rem 1.375rem; border: 1px solid transparent; border-radius: var(--radius-md); font: var(--type-label-l); text-decoration: none; text-align: center; cursor: pointer; transition: background-color .15s, border-color .15s, color .15s, transform .15s var(--ease); }
.btn:active { transform: scale(.98); }
.btn-primary { background: var(--bg-brand); color: var(--text-on-brand); }
.btn-primary:hover, .btn-primary:active { background: var(--bg-brand-pressed); }
/* Dark bg/brand-pressed (#5089F5) is too light for white text (3.2:1), so on the web hover/press uses Blue 600 in
   both themes and keeps 4.5:1. */
@media (prefers-color-scheme: dark) { .btn-primary:hover, .btn-primary:active { background: #104DCB; } }
.btn-primary:focus-visible { outline-color: var(--text-primary); }
.btn-secondary { background: var(--bg-surface); border-color: var(--border-default); color: var(--text-primary); }
.btn-secondary:hover { background: var(--bg-subtle); }
.btn-tonal { background: var(--bg-brand-subtle); color: var(--text-brand); }
.btn-ghost { background: none; color: var(--text-brand); padding-left: .5rem; padding-right: .5rem; }
.btn-ghost:hover { background: var(--overlay-pressed); }
.btn-danger { background: var(--bg-danger-subtle); color: var(--text-danger); }
.btn-m { min-height: 2.75rem; padding: .375rem 1.125rem; font: var(--type-label-m); }
.btn-sm { min-height: 2.75rem; padding: .375rem 1rem; font: var(--type-label-m); } /* S is 36 tall in the app; 44 here for touch */
.btn:disabled, .btn[aria-disabled="true"]:not([aria-busy="true"]) { background: var(--bg-disabled); border-color: transparent; color: var(--text-disabled); cursor: default; transform: none; }
.btn .i { width: 1.25rem; height: 1.25rem; }

/* icon buttons: 44 square radius md; round 40 close; end-trip danger */
.icon-btn { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.75rem; height: 2.75rem; padding: 0; border: 1px solid var(--border-subtle); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--icon-primary); cursor: pointer; }
.icon-btn.round { width: 2.5rem; height: 2.5rem; border: 0; border-radius: var(--radius-full); background: var(--bg-subtle); }
.icon-btn.danger { border: 0; border-radius: var(--radius-full); background: var(--bg-danger-subtle); color: var(--icon-danger); }

.textlink { color: var(--text-primary); font-weight: 600; text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 4px; text-decoration-thickness: 2px; }
.textlink:hover { text-decoration-color: var(--border-brand); }

/* ---------- form fields ---------- */
.field-label { display: block; margin: 0 0 var(--space-sm); padding: 0; font: var(--type-label-m); color: var(--text-primary); }
.opt-tag { font-weight: 500; color: var(--text-secondary); }
.field input, .input { display: block; width: 100%; min-height: 3.25rem; padding: .625rem 1rem; border: 1px solid var(--border-strong); border-radius: var(--radius-md); background: var(--bg-surface); font: 500 1.0625rem/1.3 var(--font-text); color: var(--text-primary); transition: border-color .15s, box-shadow .15s; }
.field input::placeholder { color: var(--text-tertiary); }
@media (prefers-color-scheme: dark) { .field input::placeholder { color: var(--text-secondary); } } /* tertiary is 3.9:1 on dark */
.field input:hover { border-color: var(--text-tertiary); }
.field input:focus { outline: none; border-color: var(--border-brand); box-shadow: 0 0 0 1px var(--border-brand), 0 0 0 4px color-mix(in srgb, var(--border-brand) 25%, transparent); }
.field input[aria-invalid="true"] { border-color: var(--text-danger); }
.field-err { display: flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-sm); font: var(--type-label-s); color: var(--text-danger); }

/* segmented control (the Car / Motorcycle control in the Figma chips sheet) */
.seg-field { margin: 0; padding: 0; border: 0; min-width: 0; }
.seg { display: grid; grid-template-columns: 1fr 1fr; gap: 2px; padding: 3px; background: var(--bg-muted); border-radius: var(--radius-md); }
.seg label { position: relative; display: block; }
.seg input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.seg span { display: flex; align-items: center; justify-content: center; gap: var(--space-sm); min-height: 2.75rem; padding: .25rem .5rem; border-radius: 11px; font: var(--type-label-m); color: var(--text-secondary); transition: background-color .15s, color .15s, box-shadow .15s; }
.seg input:checked + span { background: var(--bg-surface); color: var(--text-primary); box-shadow: var(--elev-1); }
.seg input:focus-visible + span { outline: var(--focus-ring); outline-offset: 1px; }

/* switch (iOS style, brand when on) */
.switch { position: relative; flex: none; width: 3.1875rem; height: 1.9375rem; border-radius: var(--radius-full); background: var(--bg-muted); transition: background-color .2s var(--ease); }
.switch .thumb { position: absolute; top: 2px; left: 2px; width: calc(1.9375rem - 4px); height: calc(1.9375rem - 4px); border-radius: 50%; background: #fff; box-shadow: 0 2px 4px rgb(11 15 23 / .2); transition: transform .22s var(--ease); }
[aria-checked="true"] .switch { background: var(--bg-brand); }
[aria-checked="true"] .switch .thumb { transform: translateX(1.25rem); }

/* ---------- chips (tappable pills) and tags (read-only labels) ---------- */
.chip { display: inline-flex; align-items: center; gap: .375rem; min-height: 2rem; padding: 0 .75rem 0 .625rem; border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--bg-surface); font: var(--type-label-s); color: var(--text-primary); white-space: nowrap; }
.chip .i { width: 1rem; height: 1rem; }
.chip.is-selected { background: var(--bg-inverse); border-color: var(--bg-inverse); color: var(--text-inverse); }
.chip-fuel .i { color: var(--category-fuel); } .chip-charging .i { color: var(--category-charging); }
.chip-food .i { color: var(--category-food); } .chip-rest .i { color: var(--category-rest); } .chip-camera .i { color: var(--category-camera); }
.tag { display: inline-flex; align-items: center; gap: var(--space-xs); min-height: 1.375rem; padding: 0 .4375rem; border-radius: var(--radius-xs); background: var(--bg-muted); font: var(--type-label-s); color: var(--text-secondary); white-space: nowrap; }
.tag-brand { background: var(--bg-brand); color: var(--text-on-brand); }
.tag-brand-subtle { background: var(--bg-brand-subtle); color: var(--text-brand); }
.tag-success { background: var(--bg-success-subtle); color: var(--text-success); }
.tag-warning { background: var(--bg-warning-subtle); color: var(--text-warning); }
.tag-camera { background: var(--category-camera-subtle); color: var(--text-primary); }
.shield { display: inline-flex; align-items: center; justify-content: center; min-width: 2rem; height: 1.25rem; padding: 0 .3125rem; border-radius: var(--radius-xs); background: #FFD43B; box-shadow: inset 0 0 0 1px #C9A100; font: 800 .6875rem/1 var(--font-text); color: #131924; }

/* ---------- notices: tone fill + icon ---------- */
.notice-box { display: flex; align-items: flex-start; gap: var(--space-md); padding: var(--space-md) var(--space-lg); border-radius: var(--radius-md); background: var(--bg-brand-subtle); color: var(--text-primary); font: var(--type-body-m); }
.notice-box > .i { margin-top: .0625rem; color: var(--icon-brand); }
.notice-box.warning { background: var(--bg-warning-subtle); } .notice-box.warning > .i { color: var(--text-warning); }
.notice-box.danger { background: var(--bg-danger-subtle); } .notice-box.danger > .i { color: var(--icon-danger); }
.notice-box.success { background: var(--bg-success-subtle); } .notice-box.success > .i { color: var(--text-success); }
.notice-box a { color: var(--text-brand); font-weight: 600; }

/* ---------- cards, sheets, list rows ---------- */
.card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); }
.grabber { display: block; width: 36px; height: 5px; margin: 0 auto; border-radius: 3px; background: var(--border-strong); }
.rows { list-style: none; margin: 0; padding: 0; }
.row { display: flex; align-items: center; gap: var(--space-md); min-height: 3.5rem; padding: var(--space-sm) 0; }
.rows > .row + .row, .rows > li + li { border-top: 1px solid var(--border-subtle); }
.row-icon { display: inline-flex; align-items: center; justify-content: center; flex: none; width: 2.25rem; height: 2.25rem; border-radius: var(--radius-full); background: var(--bg-subtle); color: var(--icon-secondary); }
.row-icon .i { width: 1.125rem; height: 1.125rem; }
.row-icon.tone-brand { background: var(--bg-brand-subtle); color: var(--icon-brand); }
.row-icon.camera { background: var(--category-camera-subtle); color: var(--category-camera); }
.row-icon.success { background: var(--bg-success-subtle); color: var(--text-success); }
.row-body { flex: 1; min-width: 0; }
.row-title { display: block; font: var(--type-body-m-strong); color: var(--text-primary); }
.row-sub { display: block; margin-top: 1px; font: var(--type-caption); color: var(--text-secondary); }
.row-end { flex: none; color: var(--icon-secondary); }
.row-end.tone-brand { color: var(--icon-brand); }

/* ---------- simple page shell: privacy, 404 ---------- */
.page-bar { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; justify-content: space-between; gap: var(--space-md); padding: var(--space-md) var(--space-lg); background: var(--overlay-glass); -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); border-bottom: 1px solid var(--border-subtle); }
.page-brand { display: inline-flex; align-items: center; gap: .625rem; min-height: 2.75rem; color: var(--text-primary); text-decoration: none; font: 800 1.125rem/1 var(--font-text); letter-spacing: -0.02em; }
.page-brand img { width: 2rem; height: 2rem; border-radius: 9px; }
.page-main { max-width: 44rem; margin: 0 auto; padding: var(--space-2xl) var(--space-lg) var(--space-5xl); }
.page-foot { max-width: 44rem; margin: 0 auto; padding: var(--space-2xl) var(--space-lg) var(--space-4xl); border-top: 1px solid var(--border-subtle); font: var(--type-body-m); color: var(--text-secondary); }
.page-foot nav { display: flex; flex-wrap: wrap; gap: var(--space-xs) var(--space-2xl); margin-bottom: var(--space-md); }
.page-foot a { display: inline-block; padding: .375rem 0; color: var(--text-primary); font-weight: 600; text-decoration: none; }
.page-foot a:hover { color: var(--text-brand); }

/* long-form document (privacy policy) */
.doc-page { background: var(--bg-surface); }
.doc h1 { font: var(--type-display-large); font-size: clamp(2rem, 1.6rem + 1.6vw, 2.75rem); line-height: 1.1; letter-spacing: var(--track-display-large); margin: var(--space-lg) 0 var(--space-sm); }
.doc .updated { font: var(--type-body-m); color: var(--text-secondary); margin: 0 0 var(--space-2xl); }
.doc h2 { font: var(--type-title-l); letter-spacing: var(--track-title-l); margin: var(--space-4xl) 0 var(--space-md); padding-top: var(--space-2xl); border-top: 1px solid var(--border-subtle); }
.doc p, .doc li { margin: 0 0 var(--space-md); }
.doc ul { padding-left: 1.25rem; }
.doc li::marker { color: var(--text-tertiary); }
.doc strong { font-weight: 700; }
.doc .note { margin-bottom: var(--space-lg); font: var(--type-body-l); }

/* email confirmation (/confirm/) */
.confirm .btn { margin-top: var(--space-sm); }
.confirm .status { min-height: 1.5em; margin-top: var(--space-lg); color: var(--text-secondary); }
.confirm .status.ok { color: var(--text-success); font-weight: 600; }
.confirm .status.err { color: var(--text-danger); }

/* 404 */
.not-found { display: grid; place-items: center; min-height: calc(100vh - 4.5rem); min-height: calc(100svh - 4.5rem); padding: var(--space-2xl) var(--space-lg); }
.not-found-card { width: 100%; max-width: 26rem; padding: var(--space-sm) var(--space-xl) var(--space-2xl); background: var(--bg-surface); border-radius: var(--radius-xl); box-shadow: var(--elev-2); text-align: left; }
.not-found-card .grabber { margin-bottom: var(--space-xl); }
.not-found-card .row-icon { width: 3rem; height: 3rem; }
.not-found-card .row-icon .i { width: 1.5rem; height: 1.5rem; }
.not-found-card h1 { margin: var(--space-lg) 0 var(--space-sm); font: var(--type-title-xl); letter-spacing: var(--track-title-xl); }
.not-found-card p { color: var(--text-secondary); margin-bottom: var(--space-2xl); }
.not-found-card .btn { width: 100%; }
.not-found-card .btn + .btn { margin-top: var(--space-sm); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
  .btn, .switch, .switch .thumb, .seg span { transition: none; }
  .btn:active { transform: none; }
}