/* Need for Service Solo landing. One stylesheet, no framework.
   styles.css is NOT used by this page: the legal pages still load it, so leave it alone. */

/* ───────────────────────── Font: Geist (self-hosted, OFL, see assets/fonts/OFL.txt) ───────────────────────── */
@font-face {
  font-family: "Geist";
  src: url("/assets/fonts/geist-latin.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Geist";
  src: url("/assets/fonts/geist-latin-ext.woff2") format("woff2");
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
  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: "Geist Fallback";
  src: local("Arial");
  ascent-override: 95.9%;
  descent-override: 28.2%;
  line-gap-override: 0%;
  size-adjust: 104.8%;
}

/* ───────────────────────── Tokens ───────────────────────── */
:root {
  --brand: #FDB916;
  --brand-hover: #FFC63D;
  --brand-ink: #0A0A0A;
  --brand-rgb: 253, 185, 22;

  --bg: #FFFFFF;
  --bg-alt: #F5F5F7;
  --card: #FFFFFF;
  --card-2: #F6F7F9;
  --text: #1A1A1A;
  --text-2: #6B7280;
  --text-3: #858B94;
  --line: rgba(16, 24, 40, 0.10);
  --line-2: rgba(16, 24, 40, 0.18);
  --seg-on: #FFFFFF;
  --danger: #D92D20;
  --danger-soft: rgba(217, 45, 32, 0.12);
  --ok: #12A150;
  --shadow-frag: 0 1px 2px rgba(16, 24, 40, 0.05), 0 22px 48px -28px rgba(16, 24, 40, 0.28);
  --ink: #2A2D33;
  --ink-2: #9097A1;
  --post: #E2E5EA;
  --smudge: #E2E5EA;

  --ease: cubic-bezier(0.2, 0.7, 0.2, 1);
  --ease-io: cubic-bezier(0.65, 0, 0.35, 1);
  --wrap: 1160px;
  --gutter: 20px;

  color-scheme: light;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000;
    --bg-alt: #000000;
    --card: #1A1D24;
    --card-2: #22262E;
    --text: #F5F5F5;
    --text-2: #9CA3AF;
    --text-3: #757B85;
    --line: rgba(255, 255, 255, 0.08);
    --line-2: rgba(255, 255, 255, 0.15);
    --seg-on: #2E333D;
    --danger: #FF6B5E;
    --danger-soft: rgba(255, 107, 94, 0.16);
    --ok: #3DD68C;
    --shadow-frag: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 30px 60px -36px rgba(0, 0, 0, 0.9);
    --ink: #E8E9EC;
    --ink-2: #6C727C;
    --post: #1A1D24;
    --smudge: #1A1D24;
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg: #000000;
  --bg-alt: #000000;
  --card: #1A1D24;
  --card-2: #22262E;
  --text: #F5F5F5;
  --text-2: #9CA3AF;
  --text-3: #757B85;
  --line: rgba(255, 255, 255, 0.08);
  --line-2: rgba(255, 255, 255, 0.15);
  --seg-on: #2E333D;
  --danger: #FF6B5E;
  --danger-soft: rgba(255, 107, 94, 0.16);
  --ok: #3DD68C;
  --shadow-frag: 0 0 0 1px rgba(255, 255, 255, 0.02), 0 30px 60px -36px rgba(0, 0, 0, 0.9);
  --ink: #E8E9EC;
  --ink-2: #6C727C;
  --post: #1A1D24;
  --smudge: #1A1D24;
  color-scheme: dark;
}
@media (min-width: 768px) { :root { --gutter: 32px; } }

/* ───────────────────────── Base ───────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 48px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: "Geist", "Geist Fallback", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg, video { display: block; max-width: 100%; }
h1, h2, h3, p, ol, ul, dl, dd, figure, fieldset { margin: 0; padding: 0; }
fieldset { border: 0; min-width: 0; }
ol, ul { list-style: none; }
a { color: inherit; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }
::selection { background: rgba(var(--brand-rgb), 0.4); color: var(--text); }
:focus-visible { outline: 2px solid var(--text); outline-offset: 3px; border-radius: 6px; }
[hidden] { display: none !important; }
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.i { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.i-fill { fill: currentColor; stroke: none; }
.tnum { font-variant-numeric: tabular-nums; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip {
  position: absolute; left: 12px; top: -60px; z-index: 100;
  background: var(--text); color: var(--bg); padding: 10px 14px; border-radius: 10px;
  font-size: 14px; font-weight: 600; text-decoration: none; transition: top 0.2s var(--ease);
}
.skip:focus { top: 12px; }
.wrap {
  width: 100%;
  max-width: calc(var(--wrap) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: max(var(--gutter), env(safe-area-inset-left));
}

/* ───────────────────────── Shared controls ───────────────────────── */
.seg {
  display: inline-flex; padding: 3px; gap: 2px; border-radius: 999px;
  background: var(--card-2);
  background: color-mix(in srgb, var(--card-2) 80%, transparent); border: 1px solid var(--line);
}
.seg-btn {
  height: 28px; min-width: 34px; padding: 0 8px; border-radius: 999px; border: 0; background: transparent;
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.01em; color: var(--text-2);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.seg-btn:hover { color: var(--text); }
.seg-btn[aria-pressed="true"] { background: var(--seg-on); color: var(--text); box-shadow: 0 1px 2px rgba(16, 24, 40, 0.12); }
.icon-btn {
  display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%;
  border: 1px solid var(--line); background: transparent; color: var(--text-2);
  transition: background-color 0.2s var(--ease), color 0.2s var(--ease);
}
.icon-btn:hover { background: var(--card-2); color: var(--text); }
.icon-btn .i { font-size: 17px; }
.i-sun { display: none; }
:root[data-theme="dark"] .i-sun { display: block; }
:root[data-theme="dark"] .i-moon { display: none; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .i-sun { display: block; }
  :root:not([data-theme="light"]) .i-moon { display: none; }
}
html:not(.js) .seg, html:not(.js) .theme-toggle { display: none; }

/* ───────────────────────── The bar ─────────────────────────
   One 52 px row: the Need for Service wordmark (its mark on a phone), then the language, the theme and the one action.
   A hairline under it always; frosted once it sticks and the page moves under it. */
/* The bar as Apple's (Kristo 25.10): 48 px, see-through with a blur, the mark and the name left, the page's parts as
   plain links in the middle (the one in view a shade darker), language and theme right; no download button. Under
   900 px the links go, no menu. */
.lnav {
  position: sticky; top: 0; z-index: 55; height: 48px; border-bottom: 1px solid var(--line);
  background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .lnav { background: rgba(0, 0, 0, 0.72); } }
:root[data-theme="dark"] .lnav { background: rgba(0, 0, 0, 0.72); }
.lnav-inner { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; height: 100%; }
.lnav-brand { display: inline-flex; align-items: center; gap: 8px; height: 100%; flex: none; text-decoration: none; color: var(--text); }
.brand-mark { display: block; width: 24px; height: 24px; }
.brand-name { font-size: 15px; line-height: 1; font-weight: 500; letter-spacing: -0.01em; color: var(--text); }
.lnav-links { position: absolute; left: 50%; top: 0; bottom: 0; display: flex; align-items: center; gap: 32px; transform: translateX(-50%); }
.lnav-links a { font-size: 14px; line-height: 1; color: var(--text-2); text-decoration: none; white-space: nowrap; transition: color 0.2s var(--ease); }
.lnav-links a:hover, .lnav-links a.is-here { color: var(--text); }
.lnav-links a:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 2px; }
@media (max-width: 899px) { .lnav-links { display: none; } }
.lnav-tools { display: flex; align-items: center; gap: 8px; }
.lnav .seg { padding: 2px; }
.lnav .seg-btn { height: 24px; min-width: 30px; font-size: 11.5px; }
.lnav .icon-btn { width: 30px; height: 30px; border: 0; }
.lnav .icon-btn .i { font-size: 16px; }

/* ───────────────────────── Hero ─────────────────────────
   Apple's type ladder (measured on the iPhone Duo page, 18.10) one rung down, as our phone is smaller than their
   product (Kristo 18.10: the line was a bit big): the name 21 px semibold, the line 64 / 56 / 40 px, one grey line. */
.hero { background: var(--bg); text-align: center; padding: 40px 0 clamp(48px, 6vw, 72px); overflow: clip; position: relative; isolation: isolate; }
/* The shop behind: our illustration, faint, the wall left under the text and the shop behind the phone. */
.hero-name { font-size: 21px; line-height: 25px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-2); }
.hero-title {
  margin-top: 4px; font-size: 64px; line-height: 68px; font-weight: 600; letter-spacing: -0.03em;
  text-wrap: balance;
}
.hero-sub {
  margin: 12px auto 0; max-width: 34ch; font-size: 24px; line-height: 29px; font-weight: 500; letter-spacing: -0.012em;
  color: var(--text-2); text-wrap: balance;
}
@media (max-width: 1068px) { .hero-title { font-size: 56px; line-height: 60px; } .hero-sub { font-size: 21px; line-height: 26px; } }
@media (max-width: 767px) {
  .hero { padding-top: 32px; }
  .hero-title { margin-top: 10px; font-size: 40px; line-height: 44px; letter-spacing: -0.03em; }
  .hero-sub { margin-top: 10px; font-size: 19px; line-height: 24px; }
}
@media (max-width: 359px) { .hero-title { font-size: 36px; line-height: 40px; } }

/* ── The stage: only the iPhone. Its size is fixed by CSS from the first paint, so nothing below ever moves. ──
   iPhone 17 Pro: the screen 402 x 874 pt, a thin even bezel of 0.03735 x the body's width (= 0.04037 x the screen's).
   --s is the screen's scale. On a desktop or a tablet it follows the window's height in steps, so the found car's card
   and its two buttons stand on the first screen of every common laptop, 18 px clear of its edge (s = (height - 278.5)
   / 848.2: the bar and the text above the phone measure 258 px); on a phone it follows the width. */
.stage {
  --s: 0.6;
  --sw: calc(402px * var(--s)); --sh: calc(874px * var(--s)); --b: calc(var(--sw) * 0.04037);
  --pw: calc(var(--sw) + 2 * var(--b)); --ph: calc(var(--sh) + 2 * var(--b));
  position: relative; display: flex; justify-content: center; height: calc(var(--ph) + 2 * var(--band)); margin-top: 28px;
}
@media (min-width: 768px) and (max-width: 1023px) {
  .stage { --s: 0.44; }
}
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 680px) { .stage { --s: 0.473; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 700px) { .stage { --s: 0.497; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 720px) { .stage { --s: 0.521; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 740px) { .stage { --s: 0.544; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 760px) { .stage { --s: 0.568; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 780px) { .stage { --s: 0.591; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 800px) { .stage { --s: 0.615; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 820px) { .stage { --s: 0.638; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 840px) { .stage { --s: 0.662; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 860px) { .stage { --s: 0.686; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 880px) { .stage { --s: 0.709; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 900px) { .stage { --s: 0.733; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 920px) { .stage { --s: 0.756; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 940px) { .stage { --s: 0.780; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 960px) { .stage { --s: 0.803; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 980px) { .stage { --s: 0.827; } }
@media (min-width: 768px) and (max-width: 1023px) and (min-height: 1000px) { .stage { --s: 0.840; } }

/* From 1024 px wide the text stands on the left and the phone on the right (Kristo 18.10), so the phone can take the
   window's whole height under the bar, 32 px of air above and below it: s = (height - 121) / 906.5, up to 0.96 (the
   plate's layer is full resolution, so even that stays sharp on a 2x screen). */
@media (min-width: 1024px) {
  .hero {
    display: grid; grid-template-columns: minmax(0, 520px) auto;
    grid-template-rows: 2fr auto auto 3fr;
    grid-template-areas: ". stage" "head stage" "buy stage" ". stage";
    justify-content: center; align-content: center; align-items: center; column-gap: clamp(72px, 8vw, 128px);
    min-height: calc(100svh - 48px); padding: 32px 0; text-align: left;
  }
  .hero .hero-head { grid-area: head; margin: 0; padding: 0; max-width: none; }
  /* Air between the pieces (Kristo 18.10: too pressed together), and the block sits above the phone's middle (2 : 3). */
  .hero .hero-title { margin-top: 18px; }
  .hero .hero-sub { margin: 34px 0 0; line-height: 32px; }
  .hero .stage { grid-area: stage; margin: 0; transform-origin: 50% 0; }
  /* The first paint already on the close-up (app.js sets the exact zoom for the window right after). */
  html.js:not([data-publish]) .hero .stage { transform: scale(1.45); }
  .hero .hero-buy { grid-area: buy; justify-content: flex-start; margin: 36px 0 0; padding: 0; max-width: none; }
  .stage { --s: 0.55; }
}
@media (min-width: 1024px) and (prefers-reduced-motion: reduce) { html.js .hero .stage { transform: none !important; } }
@media (min-width: 1024px) and (min-height: 640px) { .stage { --s: 0.573; } }
@media (min-width: 1024px) and (min-height: 660px) { .stage { --s: 0.595; } }
@media (min-width: 1024px) and (min-height: 680px) { .stage { --s: 0.617; } }
@media (min-width: 1024px) and (min-height: 700px) { .stage { --s: 0.639; } }
@media (min-width: 1024px) and (min-height: 720px) { .stage { --s: 0.661; } }
@media (min-width: 1024px) and (min-height: 740px) { .stage { --s: 0.683; } }
@media (min-width: 1024px) and (min-height: 760px) { .stage { --s: 0.705; } }
@media (min-width: 1024px) and (min-height: 780px) { .stage { --s: 0.727; } }
@media (min-width: 1024px) and (min-height: 800px) { .stage { --s: 0.749; } }
@media (min-width: 1024px) and (min-height: 820px) { .stage { --s: 0.771; } }
@media (min-width: 1024px) and (min-height: 840px) { .stage { --s: 0.793; } }
@media (min-width: 1024px) and (min-height: 860px) { .stage { --s: 0.815; } }
@media (min-width: 1024px) and (min-height: 880px) { .stage { --s: 0.837; } }
@media (min-width: 1024px) and (min-height: 900px) { .stage { --s: 0.859; } }
@media (min-width: 1024px) and (min-height: 920px) { .stage { --s: 0.881; } }
@media (min-width: 1024px) and (min-height: 940px) { .stage { --s: 0.903; } }
@media (min-width: 1024px) and (min-height: 960px) { .stage { --s: 0.926; } }
@media (min-width: 1024px) and (min-height: 980px) { .stage { --s: 0.948; } }
@media (min-width: 1024px) and (min-height: 1000px) { .stage { --s: 0.960; } }

/* On a phone the width sets it: s = (width - 125) / 434.5 at each step's narrowest width (the room a play-again
   control once needed beside it, kept as the phone's margin). */
@media (max-width: 767px) { .stage { --s: 0.70; margin-top: 24px; } }
@media (max-width: 429px) { .stage { --s: 0.665; } }
@media (max-width: 413px) { .stage { --s: 0.61; } }
@media (max-width: 389px) { .stage { --s: 0.575; } }
@media (max-width: 374px) { .stage { --s: 0.541; } }
@media (max-width: 359px) { .stage { --s: 0.5; } }

/* The phone's ground (Kristo 25.10: the phone looked flat; no shadow or reflection on Apple's frame, so the lift comes
   from behind): a large, soft, still neutral grey field behind the phone, barely there, the frame's edge clearly off
   it. The section itself runs from white into the light grey towards the phone. No yellow light. */
.glow {
  position: absolute; left: 50%; top: 52%; width: calc(var(--pw) * 2.6); height: calc(var(--ph) * 1.5);
  transform: translate(-50%, -50%); pointer-events: none; z-index: -1;
  background: radial-gradient(closest-side, rgba(16, 24, 40, 0.07), rgba(16, 24, 40, 0.03) 55%, rgba(16, 24, 40, 0));
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .glow { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0)); } }
:root[data-theme="dark"] .glow { background: radial-gradient(closest-side, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.04) 55%, rgba(255, 255, 255, 0)); }
.hero { background: linear-gradient(160deg, var(--bg) 35%, #F5F5F7 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hero { background: linear-gradient(160deg, #000000 35%, #0B0B0D 100%); } }
:root[data-theme="dark"] .hero { background: linear-gradient(160deg, #000000 35%, #0B0B0D 100%); }

/* The body: a thin metal band (its light from the top left), the black bezel drawn around the screen. */
.iphone {
  position: relative; width: calc(var(--pw) + 2 * var(--band)); height: calc(var(--ph) + 2 * var(--band));
  padding: calc(var(--b) + var(--band));
  border-radius: calc(55px * var(--s) + var(--b) + var(--band));
  background: linear-gradient(140deg, var(--ti-1) 0%, var(--ti-2) 22%, var(--ti-3) 48%, var(--ti-2) 74%, var(--ti-1) 100%);
  box-shadow: inset 0 0 0 0.5px rgba(255, 255, 255, 0.55), 0 2px 3px rgba(0, 0, 0, 0.06), 0 30px 60px -28px rgba(0, 0, 0, var(--phone-shadow));
}
/* Apple's frame (index.html): the phone box is the frame's own 450 x 920 pt, the screen in its opening at 24, 23 pt;
   the drawn band, bezel, island and side buttons give way. Without it (data-prelaunch) the drawn phone stands. */
.bezel { display: none; }
html:not([data-prelaunch]) .iphone.has-bezel {
  width: calc(450px * var(--s)); height: calc(920px * var(--s)); padding: calc(23px * var(--s)) 0 0 calc(24px * var(--s));
  border-radius: 0; background: none; box-shadow: none;
}
html:not([data-prelaunch]) .stage:has(.has-bezel) { height: calc(920px * var(--s)); }
html:not([data-prelaunch]) .has-bezel .bezel { position: absolute; inset: 0; z-index: 8; width: 100%; height: 100%; pointer-events: none; }
html:not([data-prelaunch]) .has-bezel .bezel-black { display: block; }
html:not([data-prelaunch]) .has-bezel .iphone-btn, html:not([data-prelaunch]) .has-bezel .island { display: none; }
html:not([data-prelaunch]) .has-bezel .screen { box-shadow: none; }
html:not([data-prelaunch]) .has-bezel .replay { inset: calc(23px * var(--s)) calc(24px * var(--s)); z-index: 9; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]):not([data-prelaunch]) .has-bezel .bezel-black { display: none; }
  :root:not([data-theme="light"]):not([data-prelaunch]) .has-bezel .bezel-silver { display: block; }
}
:root[data-theme="dark"]:not([data-prelaunch]) .has-bezel .bezel-black { display: none; }
:root[data-theme="dark"]:not([data-prelaunch]) .has-bezel .bezel-silver { display: block; }
:root { --band: 2.5px; --ti-1: #E9EBEE; --ti-2: #B9BDC3; --ti-3: #D9DCE0; --phone-shadow: 0.28; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --ti-1: #8A8E95; --ti-2: #4A4D53; --ti-3: #6B6F76; --phone-shadow: 0; } }
:root[data-theme="dark"] { --ti-1: #8A8E95; --ti-2: #4A4D53; --ti-3: #6B6F76; --phone-shadow: 0; }
.iphone-btn { position: absolute; width: 3px; border-radius: 2px; background: linear-gradient(90deg, var(--ti-2), var(--ti-1)); }
.b-action { left: -2.5px; top: 17%; height: 4.6%; }
.b-up { left: -2.5px; top: 25%; height: 8.6%; }
.b-down { left: -2.5px; top: 35.5%; height: 8.6%; }
.b-power { right: -2.5px; top: 27%; height: 13%; transform: scaleX(-1); }
.b-cam { right: -2.5px; top: 58%; height: 6%; transform: scaleX(-1); }
/* The app's colours on the hero's screen (nfs-solo theme/tokens.ts), light here and dark with the page (Kristo 19.10:
   the hero in dark mode too; the app's dark look is a real setting, Seaded, Tume režiim). */
.screen {
  --h-bg: #F0F2F5; --h-card: #FFFFFF; --h-text: #1A1A1A; --h-text2: #6B7280; --h-text3: #9CA3AF; --h-sil: #EDEFF2;
  --h-pressed: #E4E6EB; --h-fill: #EFEFF0; --h-divider: #D8DADF; --h-line: rgba(26, 26, 26, 0.72); --h-bat: rgba(26, 26, 26, 0.45);
  --h-glass: rgba(255, 255, 255, 0.94); --h-rim: rgba(0, 0, 0, 0.06); --h-quiet: rgba(120, 120, 128, 0.16); --h-home: #1A1A1A;
  --h-stage: linear-gradient(180deg, #FDFDFE 0%, #F5F7FB 14%, #E4E7F2 28%, #DBE0ED 39%, #D9DEEC 49%, #DCE1EE 59%, #E4E8F1 66%, #ECEFF6 74%, #F3F5F9 81%, #FFFFFF 100%);
  position: relative; width: var(--sw); height: var(--sh); overflow: hidden; isolation: isolate; border-radius: calc(55px * var(--s)); background: var(--h-bg);
  box-shadow: 0 0 0 var(--b) #0B0B0C, 0 0 0 calc(var(--b) + 0.6px) rgba(255, 255, 255, 0.10);
}

/* The dark look: the app's dark tokens; the stage is the same blue car's tint over the dark page (12 % of the paint). */
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .screen {
    --h-bg: #0F1115; --h-card: #1A1D24; --h-text: #F2F4F8; --h-text2: #9CA3AF; --h-text3: #6B7280; --h-sil: #2F2F35;
    --h-pressed: #2A2D34; --h-fill: #30323A; --h-divider: #23272F; --h-line: rgba(242, 244, 248, 0.72); --h-bat: rgba(242, 244, 248, 0.45);
    --h-glass: rgba(42, 45, 52, 0.94); --h-rim: rgba(255, 255, 255, 0.04); --h-quiet: rgba(255, 255, 255, 0.14); --h-home: #F2F4F8;
    --h-stage: linear-gradient(180deg, #1A1D25 0%, #1B1F28 14%, #1E2330 28%, #1F2534 39%, #1F2534 49%, #1F2433 59%, #1E2330 66%, #1D212C 74%, #1C2029 81%, #1A1D24 100%);
  }
}
:root[data-theme="dark"] .screen {
  --h-bg: #0F1115; --h-card: #1A1D24; --h-text: #F2F4F8; --h-text2: #9CA3AF; --h-text3: #6B7280; --h-sil: #2F2F35;
  --h-pressed: #2A2D34; --h-fill: #30323A; --h-divider: #23272F; --h-line: rgba(242, 244, 248, 0.72); --h-bat: rgba(242, 244, 248, 0.45);
  --h-glass: rgba(42, 45, 52, 0.94); --h-rim: rgba(255, 255, 255, 0.04); --h-quiet: rgba(255, 255, 255, 0.14); --h-home: #F2F4F8;
  --h-stage: linear-gradient(180deg, #1A1D25 0%, #1B1F28 14%, #1E2330 28%, #1F2534 39%, #1F2534 49%, #1F2433 59%, #1E2330 66%, #1D212C 74%, #1C2029 81%, #1A1D24 100%);
}

/* The app, in its own points (402 x 874), scaled to the screen. It is iOS, so its font is the system's (San Francisco on
   an Apple device). */
.ui {
  position: absolute; left: 0; top: 0; width: 402px; height: 874px; transform: scale(var(--s)); transform-origin: 0 0;
  color: var(--h-text); font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased; text-align: left;
}

/* Camera (styles.camera, aim, aimText, frame): the top half, the aim centred under the status bar. */
.cam { position: absolute; left: 0; top: 0; width: 402px; height: 437px; overflow: hidden; border-radius: 0 0 16px 16px; background: #000000; }
.cam-lens { position: absolute; inset: 0; overflow: hidden; }
.cam-photo {
  position: absolute; left: 0; top: 0; width: 3700px; height: 3850px; transform-origin: 0 0;
  transform: translate(-1103.92px, -769.62px) scale(0.45706);
}
.cam-photo img { position: absolute; display: block; max-width: none; }
.cam-base { left: 0; top: 0; width: 3700px; height: 3850px; }
.cam-plate {
  left: 1900px; top: 1250px; width: 1700px; height: 1700px;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 90px, #000 1610px, transparent), linear-gradient(180deg, transparent, #000 90px, #000 1610px, transparent);
  -webkit-mask-composite: source-in;
  mask-image: linear-gradient(90deg, transparent, #000 90px, #000 1610px, transparent), linear-gradient(180deg, transparent, #000 90px, #000 1610px, transparent);
  mask-composite: intersect;
}
.cam-aim { position: absolute; inset: 0; padding-top: 62px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; pointer-events: none; }
.cam-hint { font-size: 17px; line-height: 21px; font-weight: 600; color: #FFFFFF; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); white-space: nowrap; }
.cam-frame { position: relative; width: 338px; height: 105.6px; border-radius: 16px; border: 3px solid #FFFFFF; box-shadow: 0 0 18px rgba(0, 0, 0, 0.35); }
/* The read (nfs-solo scan.tsx, Solo session 18.10): the frame's stroke turns brand yellow with a soft yellow glow and
   stays so while the card is up. Drawn as a yellow ring over the white one, so the change is an opacity. */
.cam-frame i { position: absolute; inset: -3px; border-radius: 16px; border: 3px solid #FDB916; box-shadow: 0 0 24px rgba(253, 185, 22, 0.55); }
.field-value { transform-origin: 50% 50%; }
.fly {
  position: absolute; left: 0; right: 0; top: 466px; height: 30px; z-index: 4; display: grid; place-items: center; opacity: 0;
  font-size: 24px; line-height: 30px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; color: var(--h-text);
  pointer-events: none; transform-origin: 50% 50%;
}

.status { position: absolute; left: 0; right: 0; top: 0; height: 54px; display: flex; align-items: center; justify-content: space-between; padding: 10px 33px 0 52px; color: #FFFFFF; }
.status-time { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.status-icons { display: flex; align-items: center; gap: 6px; }
.status-icons i { display: block; background: currentColor; }
.status-icons .sig { width: 18px; height: 11px; clip-path: polygon(0 68%, 18% 68%, 18% 100%, 0 100%, 0 68%, 27% 46%, 45% 46%, 45% 100%, 27% 100%, 27% 46%, 55% 23%, 73% 23%, 73% 100%, 55% 100%, 55% 23%, 82% 0, 100% 0, 100% 100%, 82% 100%, 82% 0); }
.status-icons .wifi { width: 16px; height: 11px; border-radius: 16px 16px 0 0; clip-path: polygon(50% 100%, 0 28%, 20% 0, 80% 0, 100% 28%); }
.status-icons .bat { position: relative; width: 25px; height: 12px; border-radius: 3.5px; background: transparent; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5); }
.status-icons .bat b { position: absolute; inset: 2px; border-radius: 2px; background: currentColor; }
.island { position: absolute; left: 138px; top: 11px; width: 126px; height: 37px; border-radius: 19px; background: #000000; }
.close {
  position: absolute; left: 16px; top: 70px; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center;
  background: rgba(255, 255, 255, 0.5); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); color: #1A1A1A; font-size: 22px;
}
.close .i { stroke-width: 2.2; }

/* Sheet (styles.sheet, valueField, card, acts): field 56, the card taking the room the camera leaves (247 here), the
   two buttons 52, then 8 and the safe area (34). */
.sheet { position: absolute; left: 0; right: 0; top: 437px; bottom: 0; padding: 16px 16px 0; background: var(--h-bg); }
.field { position: relative; height: 56px; border-radius: 28px; background: var(--h-card); }
.field-wait { position: absolute; left: 20px; top: 0; bottom: 0; display: flex; align-items: center; font-size: 16px; color: var(--h-text3); }
.field-kb { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; display: grid; place-items: center; color: var(--h-text3); font-size: 18px; }
.field-kb .i { stroke-width: 2.2; }
.field-value { position: absolute; left: 46px; right: 46px; top: 0; bottom: 0; display: grid; place-items: center; font-size: 24px; font-weight: 700; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.field-clear { position: absolute; right: 10px; top: 10px; width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--h-bg); color: var(--h-text2); font-size: 18px; }
.field-clear .i { stroke-width: 2.6; }
.card { position: relative; height: 247px; margin-top: 12px; border-radius: 16px; background: var(--h-card); overflow: hidden; transform-origin: 50% 50%; }
.card-outline {
  position: absolute; left: 50%; top: 50%; width: 300px; height: 92px; margin: -46px 0 0 -150px; opacity: 0.5;
  background: var(--h-sil);
  -webkit-mask: url("/assets/hero/car-outline.png") center / contain no-repeat; mask: url("/assets/hero/car-outline.png") center / contain no-repeat;
}
.card-car { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 0 36px; }
.card-car img { width: 298px; height: 92px; object-fit: contain; }
.card-car b { margin-top: 16px; font-size: 20px; line-height: 24px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; }
.card-car span { margin-top: 4px; font-size: 15px; line-height: 20px; color: var(--h-text2); white-space: nowrap; }
.card-chev { position: absolute; right: 12px; top: 50%; margin-top: -10px; width: 20px; height: 20px; color: var(--h-text3); stroke-width: 2; }
.acts { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; height: 52px; margin-top: 12px; }
.acts span { display: grid; place-items: center; height: 52px; border-radius: 26px; padding: 0 12px; font-size: 17px; white-space: nowrap; }
.act-quiet { background: var(--h-card); font-weight: 600; color: var(--h-text); }
.act-main { background: #FDB916; font-weight: 700; color: #0A0A0A; }
.home-bar { position: absolute; left: 134px; bottom: 8px; width: 134px; height: 5px; border-radius: 3px; background: var(--h-home); }



/* After the film (Kristo 19.10): a light veil over the screen and a round play button in its middle, the way a paused
   video shows (our own round button, not YouTube's shape, Kristo 19.10). The whole screen is the button. It fades in,
   and goes at once when pressed. */
.replay {
  position: absolute; inset: calc(var(--b) + var(--band)); z-index: 1; display: grid; place-items: center;
  border: 0; padding: 0; border-radius: calc(55px * var(--s)); background: rgba(10, 10, 12, 0.12); cursor: pointer;
  opacity: 0; visibility: hidden; transition: opacity 0.2s var(--ease), visibility 0s linear 0.2s;
  -webkit-tap-highlight-color: transparent;
}
.replay.is-shown { opacity: 1; visibility: visible; transition: opacity 0.6s var(--ease), visibility 0s; }
.replay-btn {
  display: grid; place-items: center; width: max(48px, calc(84px * var(--s))); height: max(48px, calc(84px * var(--s)));
  border-radius: 50%; background: rgba(255, 255, 255, 0.9); color: #1A1A1A;
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  box-shadow: 0 6px 24px rgba(0, 0, 0, 0.22), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  transition: transform 0.2s var(--ease), background-color 0.2s var(--ease);
}
.replay-btn .i { width: 44%; height: 44%; margin-left: 4%; fill: currentColor; stroke: none; }
.replay:hover .replay-btn { transform: scale(1.06); background: #FFFFFF; }
.replay:active .replay-btn { transform: scale(0.96); }
.replay:focus-visible { outline: none; }
.replay:focus-visible .replay-btn { outline: 2px solid #FFFFFF; outline-offset: 3px; box-shadow: 0 0 0 5px #0A0A0A, 0 6px 24px rgba(0, 0, 0, 0.22); }

/* The tap on the found car: a filled, soft touch dot over its picture, unseen at rest. */
.touch {
  position: absolute; left: 178px; top: 589px; width: 46px; height: 46px; border-radius: 50%; z-index: 8;
  background: radial-gradient(circle, rgba(255, 255, 255, 0.78) 0%, rgba(255, 255, 255, 0.62) 62%, rgba(255, 255, 255, 0.5) 100%);
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.28), 0 0 0 0.5px rgba(0, 0, 0, 0.12);
  opacity: 0; pointer-events: none;
}

/* Acts two to six: the real app's recording over the scanner, hidden until the scanner dismisses into it. */
.act2 { position: absolute; left: 0; top: 0; z-index: 4; width: 402px; height: 874px; opacity: 0; pointer-events: none; }
.island { z-index: 6; }
.status { z-index: 5; }

/* After the read the camera picture dims under the yellow frame and the hint, and stays so (Kristo 18.10; the app does
   the same, nfs-solo 1caa7f6). */
/* The read dims the camera round the frame only, the number inside stays bright (the app since Solo session 25.10,
   scan.tsx dim with a hole the frame's shape): a frame-sized hole with the dark as its spread shadow. */
.cam-dim { position: absolute; left: 32px; top: 214.2px; width: 338px; height: 105.6px; border-radius: 16px; background: transparent;
  box-shadow: 0 0 0 1200px #000000; opacity: 0.5; pointer-events: none; }

/* Waiting and found. The stylesheet holds the film's END (without JS, under reduced motion, and after the film);
   only a page that will play it shows the waiting scanner first. app.js plays the film. */
[data-wait] { opacity: 0; }
[data-found] { opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  html.js .ui:not(.is-live):not(.is-done) [data-wait] { opacity: 1; }
  html.js .ui:not(.is-live):not(.is-done) [data-found] { opacity: 0; }
  html.js .ui:not(.is-live):not(.is-done) .cam-lens { opacity: 1; }
  html.js .ui:not(.is-live):not(.is-done) [data-lock] { opacity: 0; }
  html.js .ui:not(.is-live):not(.is-done) .cam-dim { opacity: 0; }
}

/* The two stores: the official badges, 44 px tall (Apple asks at least 40 on the web), side by side. */
.hero-buy { display: flex; justify-content: center; margin-top: 32px; }
/* Before the store (html[data-prelaunch], Legal 20.10): the download calls hidden, the plain "coming soon" line shown. */
html[data-prelaunch] .when-live { display: none !important; }
html:not([data-prelaunch]) .when-soon { display: none !important; }
html:not([data-google-play]) .store-android { display: none !important; }
html:not([data-publish]) .num-hidden, html[data-publish] .num-full { display: none !important; }
.store-soon { font-size: 19px; line-height: 44px; font-weight: 600; color: var(--text); }
.stores { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.store { display: inline-flex; border-radius: 8px; transition: transform 0.2s var(--ease); }
.store:active { transform: scale(0.98); }
.store img { display: block; height: 44px; width: auto; }


/* ───────────────────────── Lühidalt ─────────────────────────
   apple.com's home tiles (Kristo 25.10): four big grey tiles, two side by side from 860 px and one under the other
   below, square corners, a narrow gap, the words centred on top (the name large, the line under it, the description
   small and grey), and under them a plain phone (no island, no buttons: not Apple's frame) centred and cut off by the
   tile's foot. The phone's screen is the app's real one; the tile and the screen behind it are the app's own ground
   (nfs-solo theme/tokens.ts --color-bg). */
:root { --tile: #F0F2F5; --hl-edge: #1D1D1F; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --tile: #0F1115; --hl-edge: #3A3A3C; } }
:root[data-theme="dark"] { --tile: #0F1115; --hl-edge: #3A3A3C; }
.hl { background: var(--bg); padding: 12px 0; }
.hl .wrap { max-width: none; padding-inline: 12px; }
.hl-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 12px; }
@media (min-width: 860px) { .hl-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.hl-card {
  display: flex; flex-direction: column; align-items: center; overflow: clip; text-align: center; aspect-ratio: 1 / 1; min-height: 0; align-self: start;
  padding-top: clamp(32px, 2.8vw, 44px); background: var(--tile);
}
.hl-card > p, .hl-card > h3 { padding-inline: clamp(20px, 3vw, 32px); }
.hl-eyebrow { font-size: clamp(15px, 0.4vw + 12px, 18px); line-height: 1.2; font-weight: 600; color: var(--text-2); }
.hl-head { margin: 6px auto 0; max-width: 16em; font-size: clamp(32px, 2.4vw + 10px, 48px); line-height: 1.08; font-weight: 700; letter-spacing: -0.025em; color: var(--text); text-wrap: balance; }
.hl-sub { margin: 12px auto 0; max-width: 30em; font-size: clamp(17px, 0.5vw + 13px, 20px); line-height: 1.45; color: var(--text-2); text-wrap: pretty; }
/* One element of the app, large (Kristo 25.10, as Apple's iOS page shows the Dynamic Island): each cut from the app at
   the same width (the screen less its margins) and shown at one scale, so all four are one width; every tile has a text
   block of one declared height (label, command and room for two lines) and under it a stage of one declared height,
   the element centred in it; one radius (in the cut) and one shadow for all. */
/* Square tiles (Kristo 25.10): the text on top, the element under it, every element ending by 90 % of the tile's
   height. app.js wireTileFit sets --hl-k, one factor for the schedule, the car and the history, and --hl-kv for the
   viewer, which is far taller than wide. */
.hl-shot { flex: 1 1 auto; min-height: 0; align-self: stretch; margin: clamp(22px, 2.3vw, 32px) 0 0; display: flex;
  justify-content: center; align-items: flex-start; padding-bottom: 10%;
  --hl-el: calc(min(clamp(260px, 29vw, 420px), 76vw) * var(--hl-k, 1)); }
@media (max-width: 859px) { .hl-card { aspect-ratio: auto; } .hl-shot { flex: none; } } /* phones: no square, the elements at full size (Kristo 25.10) */
.hl-shot img { display: block; height: auto;
  filter: drop-shadow(0 2px 3px rgba(16, 24, 40, 0.06)) drop-shadow(0 26px 40px rgba(16, 24, 40, 0.16)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl-shot img { filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.6)); } }
:root[data-theme="dark"] .hl-shot img { filter: drop-shadow(0 26px 40px rgba(0, 0, 0, 0.6)); }

/* Not dry (Kristo 25.10): a soft brand-yellow glow under every element; each element is one whole cut from the app in
   the app's own ground, so it carries its own edge on the tile; one dark tile (photos). */
.hl-shot { position: relative; }
.hl-shot::before { content: ""; position: absolute; left: 50%; top: 50%; width: calc(var(--hl-el) * 1.5); height: calc(var(--hl-el) * 1.2);
  transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(253, 185, 22, 0.08), rgba(253, 185, 22, 0)); pointer-events: none; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl-shot::before { background: radial-gradient(closest-side, rgba(253, 185, 22, 0.12), rgba(253, 185, 22, 0)); } }
:root[data-theme="dark"] .hl-shot::before { background: radial-gradient(closest-side, rgba(253, 185, 22, 0.12), rgba(253, 185, 22, 0)); }
.hl-card--dark .hl-shot::before { background: radial-gradient(closest-side, rgba(253, 185, 22, 0.12), rgba(253, 185, 22, 0)); }
.hl-el { position: relative; width: var(--hl-el); }
.hl-el > img { position: relative; z-index: 1; width: 100%; }

/* The schedule as a stack (Kristo 25.10): three cards of one size, centred. The yellow job, the active one, on top and
   in front; the red under it and behind, its top edge 15 % of a card under the yellow one's foot and 10 px to the
   right, the grey the same under the red. All straight and exactly one width on screen: no scale, no depth, no tilt; depth is only the fade
   (mixed into the tile in the cut, 85 % and 65 %) and each card's own lighter shadow. The stair opens with the scroll:
   together as the tile enters from below, open by the time it covers 45 % of the view, together again going back
   (scroll-driven; app.js wireStack drives --p where the browser cannot). One soft light passes over the yellow card
   the first time it stands open. Reduced motion and no script: open. */
.hl-el--stack { display: grid; width: calc(var(--hl-el) * 0.87); aspect-ratio: 1017 / 1164;
  view-timeline: --stack block; }
.hl-shot .hl-el--stack > :nth-child(n) { grid-area: 1 / 1; align-self: start; justify-self: center; width: 100%; height: auto; aspect-ratio: 1017 / 431;
  border-radius: calc(var(--hl-el) * 0.03); filter: none;
  transform: translate(var(--tx, 0px), var(--ty, 0px)); }
.hl-el--stack > img:nth-child(1) { z-index: 3; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.16); }
.hl-el--stack > img:nth-child(2) { z-index: 2; --tx: 10px; --ty: 85%; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.12); }
.hl-el--stack > img:nth-child(3) { z-index: 1; --tx: 20px; --ty: 170%; box-shadow: 0 20px 40px rgba(0, 0, 0, 0.08); }
.hl-el--stack > .hl-shine { z-index: 4; overflow: hidden; pointer-events: none; position: relative; }
.hl-shine::after { content: ""; position: absolute; inset: -20% -60%; transform: translateX(-70%);
  background: linear-gradient(105deg, rgba(255, 255, 255, 0) 35%, rgba(255, 255, 255, 0.18) 50%, rgba(255, 255, 255, 0) 65%); }
.hl-shine.is-on::after { animation: hl-shine 1200ms ease-in-out 1 both; }
@keyframes hl-shine { to { transform: translateX(70%); } }
@keyframes hl-stair { from { transform: translate(0px, 0px); } }
@media (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .hl-el--stack > img:nth-child(n + 2) { animation: hl-stair linear both; animation-duration: auto; animation-timeline: --stack; animation-range: entry 0% cover 45%; }
  }
  .hl-el--stack.is-js > img:nth-child(n + 2) { transform: translate(calc(var(--tx) * var(--p, 1)), calc(var(--ty) * var(--p, 1))); }
}
.hl-el--history { width: calc(var(--hl-el) * 0.85); } /* the car page and the history, one width */
/* The history: the two visit cards and the pill cut from the app along their own edges, each with one even soft shadow. */
.hl-shot .hl-el--history > img[data-shot="e3-ajalugu"] { filter: drop-shadow(0 12px 32px rgba(0, 0, 0, 0.1)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl-el--stack > img:nth-child(1) { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); } }
:root[data-theme="dark"] .hl-el--stack > img:nth-child(1) { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6); }
/* Photos (Kristo 25.10): the viewer's bar (close, 1 / 2, share, delete) and the upright 3:4 photo under it, whole, no
   fade; behind it a second photo of the same shape, a little right and up, fainter. */
.hl-el--photos { width: calc(min(clamp(260px, 29vw, 420px), 76vw) * 0.97 * var(--hl-kv, 1)); margin-top: 16px; }
.hl-shot .hl-el--photos > img { filter: none; border-radius: 4% / 2.7%; }
.hl-el--photos > img[data-shot="e2-pildid"] { box-shadow: 0 20px 40px rgba(0, 0, 0, 0.18); }
.hl-shot img.hl-stack { position: absolute; z-index: 0; inset: 0; width: 100%; height: 100%; opacity: 0.7;
  transform: translate(24px, -16px) rotate(6deg); box-shadow: 0 12px 24px rgba(0, 0, 0, 0.1); }
/* The dark tile: the only dark one in light, a step darker than the others in dark. */
.hl-card--dark { background: #000000; }
.hl-card--dark .hl-eyebrow, .hl-card--dark .hl-sub { color: #A1A1A6; }
.hl-card--dark .hl-head { color: #F5F5F7; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .hl-card--dark { background: #050607; } }
:root[data-theme="dark"] .hl-card--dark { background: #050607; }

/* ───────────────────────── Skänner (one wide low band, light) ─────────────────────────
   The words left, the camera view right (16:10), running a little past the band's right edge; the frame's hole keeps
   the plate bright and dims round it (the app's dim, 50 % black), the yellow frame glows quietly. */
/* The three wide bands (scanner, caller, light and dark) share one measure (Kristo 25.10): about 560 px tall at 1280 with about 96 px
   above and below, the text and the picture centred in it. */
.scanner, .caller, .modes { display: grid; align-content: center; min-height: clamp(480px, 43.75vw, 620px); padding-block: clamp(64px, 7.5vw, 112px); }
.scanner { background: var(--bg); overflow: hidden; }
.scanner-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: clamp(32px, 5vw, 80px); }
.scanner-text { max-width: 460px; }
.scanner-shot { position: relative; width: 112%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: clamp(18px, 1.8vw, 28px);
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.06), 0 30px 70px -28px rgba(16, 24, 40, 0.38); }
.scanner-shot img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sk-hole, .sk-frame { position: absolute; left: 26.5%; top: 35%; width: 47%; height: 26.1%; border-radius: clamp(10px, 1.1vw, 16px); }
.sk-hole { box-shadow: 0 0 0 2000px rgba(0, 0, 0, 0.5); }
.sk-frame { border: clamp(2.5px, 0.25vw, 4px) solid #FDB916; box-shadow: 0 0 22px rgba(253, 185, 22, 0.55);
  animation: sk-glow 3.2s ease-in-out infinite alternate; }
@keyframes sk-glow { from { box-shadow: 0 0 14px rgba(253, 185, 22, 0.35); } to { box-shadow: 0 0 30px rgba(253, 185, 22, 0.7); } }
@media (prefers-reduced-motion: reduce) { .sk-frame { animation: none; } }
@media (max-width: 859px) { .scanner-grid { grid-template-columns: 1fr; justify-items: center; text-align: center; } .scanner-text .sec-sub { margin-inline: auto; } .scanner-shot { width: 100%; } } /* on a phone the text centred as in the other bands */

/* ───────────────────────── Notify ───────────────────────── */
.notify-wrap { padding-block: clamp(72px, 9vw, 120px); background: var(--bg-alt); border-top: 1px solid var(--line); }
.notify-inner { max-width: calc(560px + var(--gutter) * 2); }
.notify-title { font-size: clamp(1.4rem, 1.05rem + 1.1vw, 1.9rem); line-height: 1.2; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }

/* ───────────────────────── Buttons ───────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  height: 46px; padding: 0 20px; border-radius: 999px;
  border: 1px solid transparent;
  font-size: 15px; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap;
  text-decoration: none;
  transition: background-color 0.2s var(--ease), transform 0.2s var(--ease);
}
.btn-brand { background: var(--brand); color: var(--brand-ink); }
.btn-brand:hover { background: var(--brand-hover); }
.btn-brand:active { transform: scale(0.98); }
.btn-brand .i { font-size: 17px; stroke-width: 2.1; }

/* ───────────────────────── Notify form ───────────────────────── */
.notify { max-width: 540px; margin: 28px 0 0; text-align: left; container-type: inline-size; }
.notify-field {
  display: flex; align-items: center; gap: 6px;
  padding: 6px; border-radius: 999px;
  background: var(--card); border: 1px solid var(--line-2);
  transition: border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.notify-field:focus-within {
  border-color: var(--text);
  box-shadow: 0 0 0 3px rgba(253, 185, 22, 0.28), 0 0 14px -1px rgba(253, 185, 22, 0.42);
}
.notify-field input {
  flex: 1; min-width: 0; height: 46px; padding: 0 8px 0 18px;
  border: 0; outline: 0; background: transparent;
  font-size: 16px; letter-spacing: -0.01em;
}
.notify-field input::placeholder { color: var(--text-3); }
.notify-field input.is-error { color: var(--danger); }
.notify-btn { height: 46px; padding: 0 18px 0 22px; }
.notify-fs:disabled .notify-field { opacity: 0.92; }
.consent {
  position: relative; display: flex; align-items: flex-start; gap: 11px;
  margin: 16px 6px 0; cursor: pointer;
  font-size: 13.5px; line-height: 1.5; color: var(--text-2);
}
.consent input { position: absolute; left: 0; top: 1px; width: 20px; height: 20px; margin: 0; opacity: 0; cursor: pointer; }
.consent-box {
  flex: none; display: grid; place-items: center;
  width: 20px; height: 20px; margin-top: 0; border-radius: 6px;
  background: var(--card); border: 1.5px solid var(--line-2);
  color: var(--brand-ink);
  transition: background-color 0.15s var(--ease), border-color 0.15s var(--ease);
}
.consent-box .i { font-size: 14px; stroke-width: 2.6; opacity: 0; transform: scale(0.6); transition: opacity 0.15s var(--ease), transform 0.2s var(--ease); }
.consent input:checked + .consent-box { background: var(--brand); border-color: var(--brand); }
.consent input:checked + .consent-box .i { opacity: 1; transform: none; }
.consent input:focus-visible + .consent-box { outline: 2px solid var(--text); outline-offset: 2px; }
.consent.is-error .consent-box { border-color: var(--danger); }
.consent a { color: var(--text); text-decoration: underline; text-decoration-color: var(--line-2); text-underline-offset: 3px; }
.consent a:hover { text-decoration-color: currentColor; }
.notify-error { margin: 12px 6px 0; font-size: 13.5px; font-weight: 500; color: var(--danger); }
.notify-done {
  display: flex; gap: 12px; align-items: flex-start;
  margin-top: 16px; padding: 14px 16px; border-radius: 16px;
  background: var(--card); border: 1px solid rgba(var(--brand-rgb), 0.6);
  font-size: 14px; line-height: 1.5; color: var(--text-2);
}
.notify-done .i { font-size: 20px; margin-top: 1px; color: var(--text); }
.notify-done strong { color: var(--text); font-weight: 600; }
.notify-noscript { margin: 12px 6px 0; font-size: 13.5px; color: var(--text-2); }
@container (max-width: 340px) {
  .notify-field { flex-direction: column; align-items: stretch; border-radius: 24px; }
  .notify-field input { flex: none; padding: 0 14px; }
  .notify-btn { width: 100%; }
}

/* ───────────────────────── Footer ───────────────────────── */
/* The foot (Kristo 25.10): black in both themes, the wordmark and its line on the left, two columns of links on the
   right, then the company, Apple's trademark line and the samples line, small and grey. No social icons. */
.footer { background: #000000; color: #6E6E73; padding-block: 96px 64px; text-align: center; }
.footer-links ul { display: flex; flex-wrap: wrap; justify-content: center; margin: 0; padding: 0; list-style: none; }
.footer-links li + li::before { content: "·"; padding-inline: 10px; color: #6E6E73; } /* Dots: one padded dot between */
@media (max-width: 560px) { .footer-links li:last-child { flex-basis: 100%; } .footer-links li:last-child::before { content: none; } } /* the address on its own line, no dot left hanging */
.footer-links a { font-size: 15px; line-height: 24px; color: #A1A1A6; text-decoration: none; }
.footer-links a:hover { color: #FFFFFF; }
.footer-links a:focus-visible { outline: 2px solid #FDB916; outline-offset: 3px; border-radius: 2px; }
.end-team { margin-top: 24px; font-size: 12.5px; line-height: 1.8; color: #6E6E73; }
.end-team a { color: #A1A1A6; text-decoration: none; }
.end-team a:hover { color: #FFFFFF; text-decoration: underline; }
.footer-base { display: grid; justify-items: center; margin-top: 40px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.12); font-size: 12.5px; line-height: 1.8; }
.footer-base p { max-width: 880px; }
.footer-base a { color: #A1A1A6; text-decoration: none; }
.footer-base a:hover { color: #FFFFFF; text-decoration: underline; }

/* ───────────────────────── The page's sections (structure with placeholders, Kristo 19.10) ─────────────────────────
   One rhythm for every section: a quiet eyebrow, a big title, a grey line, then the picture. */
.sec { padding-block: clamp(80px, 10vw, 144px); }
.sec-alt { background: var(--bg-alt); }
.sec-head { max-width: 760px; }
.sec-eyebrow { font-size: clamp(17px, 0.4vw + 15px, 21px); line-height: 1.2; font-weight: 600; color: var(--text-2); }
.sec-title { margin-top: 8px; font-size: clamp(34px, 2.6vw + 22px, 56px); line-height: 1.07; font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; }
.sec-sub { margin-top: 18px; max-width: 620px; font-size: clamp(18px, 0.5vw + 15px, 22px); line-height: 1.4; color: var(--text-2); text-wrap: pretty; }

/* The app's own colours (nfs-solo theme/tokens.ts), for anything drawn as the app: .app-light and .app-dark are fixed,
   .app-auto follows the page's theme. --a-stage is the car stage for a blue car (12 % of the paint), as r, g, b. */
.app-light, .app-auto {
  --a-bg: #F0F2F5; --a-card: #FFFFFF; --a-text: #1A1A1A; --a-text2: #6B7280; --a-text3: #9CA3AF; --a-fill: #EFEFF0;
  --a-divider: #D8DADF; --a-stage: 190, 199, 223; --a-glass: rgba(255, 255, 255, 0.72); --a-rim: rgba(0, 0, 0, 0.12);
  --a-quiet: rgba(120, 120, 128, 0.16); --a-sil: #EDEFF2; --a-ok: #31A24C; --a-late: #DC2626;
}
.app-dark {
  --a-bg: #0F1115; --a-card: #1A1D24; --a-text: #F2F4F8; --a-text2: #9CA3AF; --a-text3: #6B7280; --a-fill: #30323A;
  --a-divider: #23272F; --a-stage: 35, 43, 64; --a-glass: rgba(26, 29, 36, 0.72); --a-rim: rgba(255, 255, 255, 0.04);
  --a-quiet: rgba(255, 255, 255, 0.14); --a-sil: #2F2F35; --a-ok: #4ADE80; --a-late: #F87171;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-auto {
    --a-bg: #0F1115; --a-card: #1A1D24; --a-text: #F2F4F8; --a-text2: #9CA3AF; --a-text3: #6B7280; --a-fill: #30323A;
    --a-divider: #23272F; --a-stage: 35, 43, 64; --a-glass: rgba(26, 29, 36, 0.72); --a-rim: rgba(255, 255, 255, 0.04);
    --a-quiet: rgba(255, 255, 255, 0.14); --a-sil: #2F2F35; --a-ok: #4ADE80; --a-late: #F87171;
  }
}
:root[data-theme="dark"] .app-auto {
  --a-bg: #0F1115; --a-card: #1A1D24; --a-text: #F2F4F8; --a-text2: #9CA3AF; --a-text3: #6B7280; --a-fill: #30323A;
  --a-divider: #23272F; --a-stage: 35, 43, 64; --a-glass: rgba(26, 29, 36, 0.72); --a-rim: rgba(255, 255, 255, 0.04);
  --a-quiet: rgba(255, 255, 255, 0.14); --a-sil: #2F2F35; --a-ok: #4ADE80; --a-late: #F87171;
}
.modes-pane, .call-screen {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}

/* Töökoja tõed: the shop's mess moves into the phone. A tall track, its stage sticky under the bar; the script moves the
   things by the scroll (transform and opacity only). The shop's illustration sits faint behind. */
.mess { position: relative; background: var(--bg); }
.mess-track { position: relative; height: 560vh; }
.mess-stage { position: sticky; top: 48px; height: calc(100vh - 48px); height: calc(100svh - 48px); overflow: hidden; }
.mess-bg { position: absolute; inset: 0; pointer-events: none; }
.mess-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 70% 50%; opacity: 0.26; }
.mess-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg) 0%, color-mix(in srgb, var(--bg) 80%, transparent) 30%, transparent 62%), linear-gradient(0deg, var(--bg), transparent 22%, transparent 82%, var(--bg)); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .mess-bg img { opacity: 0.16; filter: brightness(0.9); } }
:root[data-theme="dark"] .mess-bg img { opacity: 0.16; filter: brightness(0.9); }
.mess-grid { position: relative; display: grid; grid-template-columns: minmax(0, 470px) minmax(0, 1fr); align-items: center; gap: 24px; height: 100%; }
.mess-lines { margin-top: 18px; padding: 0; list-style: none; display: grid; gap: 6px; }
.mess-lines li {
  font-size: clamp(20px, 0.9vw + 12px, 28px); line-height: 1.22; font-weight: 600; letter-spacing: -0.02em;
  color: var(--text-3); opacity: 0.6; transition: color 0.35s var(--ease), opacity 0.35s var(--ease);
}
.mess-lines li.is-on { color: var(--text); opacity: 1; }
.mess-lines li.is-done { color: var(--text-2); opacity: 1; }
/* The thing is in the phone: a yellow highlighter goes over its line. */
.mess-lines span {
  padding: 0 2px; background: linear-gradient(transparent 52%, rgba(var(--brand-rgb), 0.55) 52%, rgba(var(--brand-rgb), 0.55) 90%, transparent 90%) 0 0 / 0% 100% no-repeat;
  -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size 0.5s var(--ease);
}
.mess-lines li.is-done span { background-size: 100% 100%; }
.mess-lines li.is-end { margin-top: 16px; font-size: clamp(26px, 1.6vw + 14px, 40px); line-height: 1.12; }

.mess-field { position: relative; height: 100%; --o: 0.8; }
.mess-phone { position: absolute; left: 50%; top: 50%; width: clamp(200px, 16vw, 250px); transform: translate(-50%, -50%); transition: transform 0.3s var(--ease); }
.mess-phone.is-bump { transform: translate(-50%, -50%) scale(1.025); }
.mess-screen { position: relative; height: 100%; overflow: hidden; border-radius: 36px; background: var(--a-bg, #F0F2F5); }
.mess-screen img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; transition: opacity 0.4s var(--ease); }
.mess-screen img.is-slice { top: 6%; height: auto; }
.mess-screen img.is-on { opacity: 1; }
.mess-empty { position: absolute; inset: 0; display: grid; place-items: center; transition: opacity 0.4s var(--ease); }
.mess-empty img { position: static; width: 56px; height: 56px; opacity: 0.9; }
.mess-screen.has-screen .mess-empty { opacity: 0; }

/* The things: placeholders drawn in code (paper, ink, marker), each at its place and angle around the phone. */
.mess-obj {
  position: absolute; left: var(--x); top: var(--y); transform: rotate(var(--r)); transform-origin: 50% 50%; will-change: transform, opacity;
  color: #1A1A1A; font-family: "Bradley Hand", "Noteworthy", "Marker Felt", "Segoe Print", cursive; scale: var(--o);
}
.o-book { --x: -17%; --y: 64%; --r: -8deg; display: flex; width: 320px; height: 210px; padding: 8px; border-radius: 6px; background: #2C3442; box-shadow: 0 18px 36px -14px rgba(0, 0, 0, 0.45); }
.o-page { display: grid; align-content: start; gap: 6px; flex: 1; padding: 12px 12px; background: repeating-linear-gradient(#FBFAF4 0 21px, #D7DEE8 21px 22px); font-style: normal; font-size: 13px; color: #24408E; }
.o-page + .o-page { box-shadow: inset 8px 0 10px -8px rgba(0, 0, 0, 0.35); }
.o-page b { font-weight: 700; color: #1A1A1A; }
.o-page .x { text-decoration: line-through; }
.o-wrench { position: absolute; left: 34%; top: 46%; width: 230px; height: 18px; border-radius: 9px; transform: rotate(-24deg); background: linear-gradient(180deg, #D7DAE0, #8C929C 60%, #5F6570); box-shadow: 0 6px 10px rgba(0, 0, 0, 0.3); }
.o-postit { --x: 82%; --y: 8%; --r: 6deg; display: grid; align-content: center; width: 132px; height: 132px; padding: 14px; background: linear-gradient(160deg, #FFE97A, #FDD94B); box-shadow: 0 14px 22px -10px rgba(0, 0, 0, 0.35); font-family: "Marker Felt", "Noteworthy", cursive; font-weight: 700; }
.o-postit span:first-child { font-size: 28px; letter-spacing: 0.02em; }
.o-postit span:last-child { font-size: 22px; }
.o-note {
  --x: 4%; --y: -1%; --r: -5deg; display: grid; align-content: start; gap: 4px; width: 230px; height: 250px; padding: 30px 16px 12px 34px;
  background: linear-gradient(90deg, transparent 26px, rgba(220, 60, 60, 0.45) 26px 27px, transparent 27px), repeating-linear-gradient(#FFFFFF 0 19px, #CFE0F2 19px 20px);
  box-shadow: 0 14px 26px -12px rgba(0, 0, 0, 0.35); font-size: 13px; color: #444;
}
.o-note::before { content: ""; position: absolute; left: 12px; right: 12px; top: 8px; height: 10px; background: radial-gradient(circle, #9AA0A6 3px, transparent 3.5px) 0 0 / 16px 10px repeat-x; }
.o-note .x { text-decoration: line-through; }
.o-tape {
  --x: 72%; --y: 80%; --r: 4deg; display: grid; place-items: center; width: 250px; height: 48px; padding: 0 16px;
  background: linear-gradient(180deg, #EFE5C8, #E2D5B0); box-shadow: 0 6px 12px -6px rgba(0, 0, 0, 0.35); font-family: "Marker Felt", "Noteworthy", cursive; font-size: 19px; font-weight: 700;
  clip-path: polygon(0 4%, 3% 0, 6% 6%, 9% 0, 100% 0, 97% 30%, 100% 55%, 96% 80%, 100% 100%, 8% 100%, 4% 94%, 0 100%, 3% 60%);
}
.o-binders { --x: 90%; --y: 36%; --r: 0deg; display: flex; gap: 4px; filter: drop-shadow(0 14px 14px rgba(0, 0, 0, 0.3)); }
.o-binders i {
  position: relative; display: grid; justify-items: center; width: 44px; height: 210px; padding-top: 26px; border-radius: 4px; font-style: normal; font-size: 15px; font-weight: 700;
  background: linear-gradient(90deg, rgba(0, 0, 0, 0.18), transparent 30%, transparent 70%, rgba(0, 0, 0, 0.18)), #3A4A6B;
}
.o-binders i:nth-child(2) { background-color: #5C6370; height: 200px; margin-top: 10px; }
.o-binders i:nth-child(3) { background-color: #7A5C34; }
.o-binders i::before { content: ""; position: absolute; left: 6px; right: 6px; top: 18px; height: 54px; border-radius: 2px; background: #F4F1E8; }
.o-binders i { color: #1A1A1A; }
.o-binders i::after { content: ""; position: absolute; left: 50%; bottom: 22px; width: 16px; height: 16px; margin-left: -8px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); box-shadow: inset 0 0 0 3px rgba(255, 255, 255, 0.35); }
.o-binders i { line-height: 1; }
.o-binders i { z-index: 0; }
.o-binders i > * { position: relative; }
.o-pile { --x: -9%; --y: 26%; --r: 3deg; width: 200px; height: 240px; }
.o-pile i { position: absolute; inset: 0; background: repeating-linear-gradient(#FFFFFF 0 16px, #E7E9ED 16px 17px); box-shadow: 0 10px 22px -12px rgba(0, 0, 0, 0.4); }
.o-pile i:nth-child(1) { transform: rotate(-9deg) translate(-10px, 6px); }
.o-pile i:nth-child(2) { transform: rotate(6deg) translate(8px, -4px); background: repeating-linear-gradient(#FDFCF7 0 14px, #E2E4E8 14px 15px); }
.o-pile i:nth-child(3) { transform: rotate(-2deg); }
.o-pile em { position: absolute; left: 20%; top: 50%; width: 150px; height: 8px; border-radius: 4px; transform: rotate(32deg); background: linear-gradient(90deg, #1E3A8A 85%, #C9CDD3 85%); box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3); }

/* Without motion the stage is plain: the lines read as a list and the things rest. */
.mess-track.is-static { height: auto; }
.mess-track.is-static .mess-stage { position: relative; top: 0; height: auto; min-height: 640px; padding-block: 80px; }
.mess-track.is-static .mess-grid { min-height: 560px; }

@media (max-width: 860px) {
  .mess-grid { grid-template-columns: 1fr; grid-template-rows: auto 1fr; align-items: start; gap: 0; padding-top: 22px; }
  .mess-lines { gap: 2px; margin-top: 10px; }
  .mess-lines li { font-size: clamp(17px, 4.4vw, 22px); }
  .mess-lines li.is-end { margin-top: 8px; font-size: clamp(20px, 5.4vw, 26px); }
  .mess-field { --o: 0.56; }
  .mess-phone { width: min(44vw, 200px); }
  .o-book { --x: -18%; --y: 58%; }
  .o-postit { --x: 66%; --y: 2%; }
  .o-note { --x: -16%; --y: -2%; }
  .o-tape { --x: 44%; --y: 80%; }
  .o-binders { --x: 76%; --y: 34%; }
  .o-pile { --x: -14%; --y: 30%; }
}

/* A small phone without the hero's detail, for the sections below. */
.mini-phone {
  flex: none; width: clamp(240px, 22vw, 300px); aspect-ratio: 402 / 874; padding: 10px; border-radius: 46px; background: #0B0B0C;
  box-shadow: 0 0 0 1.5px var(--ti-2), 0 40px 80px -36px rgba(0, 0, 0, 0.55);
}

/* Helistaja tuvastus: a dark stage in both themes, the incoming call on the right. The call screen is laid out in
   iPhone points (402 x 874), --pt is one point at the phone's drawn width, so the number never wraps and the label sits
   on one line as the app fits it (350 pt at 17 pt). The wallpaper is the hero photo blurred and dimmed, as an iPhone
   blurs its own wallpaper behind a call (it follows the photo when that is replaced). */
.caller { overflow: hidden; background: #000000; color: #F5F5F7; }
.caller .sec-eyebrow, .caller .sec-sub { color: #86868B; }
.caller-title-accent { display: block; color: #FDB916; }
.caller-text { max-width: 600px; }
.caller-grid { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(40px, 6vw, 96px); }
.caller-stage { order: -1; } /* the phone left, the text right: the three wide bands alternate (Kristo 25.10) */
/* Close on the top of the phone (Kristo 25.10): the status bar, the number, the running label and the pill; the phone a
   third smaller than the first close-up. Its top edge sits where the close-up put it, the rest runs on out through
   the section's foot (the section clips it), the dark screen to the edge, no fade. */
.caller-stage {
  --cw: min(clamp(260px, 31.25vw, 440px), calc(100vw - 32px));
  height: calc(min(clamp(240px, 26.7vw, 360px), calc(100vw - 32px)) * 874 / 402 * 0.35); padding: 0 2px; /* the top edge where the narrower phone had it */
}
.caller .mini-phone { width: var(--cw); padding: calc(var(--cw) * 0.036); border-radius: calc(var(--cw) * 0.164); box-shadow: inset 0 0 0 1.5px #4A4D53; }
.caller .call-screen { border-radius: calc(var(--cw) * 0.128); }
.call-screen { position: relative; height: 100%; overflow: hidden; border-radius: 36px; background: #000000; color: #FFFFFF; container-type: inline-size; }
.call-screen > * { --pt: calc(100cqw / 402); }
/* The call as iOS shows it while the phone is in use (Kristo 25.10, measured off his screenshot, the screen 657 px
   wide there, 1.634 px a point): the compact banner over Solo's own schedule, a black capsule with a thin green rim,
   the grey avatar, "Identified by Solo Tech" over the label that iOS cuts with an ellipsis, red and green rounds. */
.call-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top;
  filter: brightness(0.6) blur(calc(2.5 * var(--pt))); transform: scale(1.02); } /* dimmed as iOS dims behind a call banner */
.call-banner { position: absolute; left: calc(8.6 * var(--pt)); right: calc(8 * var(--pt)); top: calc(8 * var(--pt)); height: calc(81 * var(--pt));
  border-radius: 999px; background: #000000; box-shadow: inset 0 0 0 calc(0.9 * var(--pt)) rgba(48, 209, 88, 0.32), 0 0 calc(14 * var(--pt)) rgba(48, 209, 88, 0.16), 0 calc(8 * var(--pt)) calc(24 * var(--pt)) rgba(0, 0, 0, 0.5); }
.cb-avatar { position: absolute; left: calc(14.9 * var(--pt)); top: calc(17.5 * var(--pt)); display: grid; place-items: center; width: calc(47 * var(--pt)); height: calc(47 * var(--pt));
  overflow: hidden; border-radius: 50%; background: linear-gradient(#5E5D6B, #3E3D49); color: #FFFFFF; }
.cb-avatar svg { width: calc(38 * var(--pt)); height: calc(38 * var(--pt)); margin-top: calc(10 * var(--pt)); }
.cb-text { position: absolute; left: calc(69 * var(--pt)); top: calc(31 * var(--pt)); width: calc(196 * var(--pt)); display: grid; gap: calc(1 * var(--pt)); }
.cb-id { display: flex; align-items: center; gap: calc(4 * var(--pt)); font-size: calc(13.5 * var(--pt)); line-height: calc(17 * var(--pt)); color: #8E8E93; white-space: nowrap; }
.cb-id b { display: grid; place-items: center; width: calc(12 * var(--pt)); height: calc(12 * var(--pt)); border-radius: calc(2.5 * var(--pt)); background: #FFFFFF; color: #000000; font-size: calc(8.5 * var(--pt)); font-weight: 800; line-height: 1; }
.cb-name { font-size: calc(14 * var(--pt)); line-height: calc(20 * var(--pt)); font-weight: 500; letter-spacing: -0.035em; color: #FFFFFF; overflow: hidden; }
.cb-run { display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
/* Running, the label goes like the full-screen call's: still, then left into its own copy, the box's edges soft. */
.cb-name:has(.cb-run.is-running) { -webkit-mask-image: linear-gradient(90deg, transparent, #000000 calc(5 * var(--pt)), #000000 calc(100% - 7 * var(--pt)), transparent);
  mask-image: linear-gradient(90deg, transparent, #000000 calc(5 * var(--pt)), #000000 calc(100% - 7 * var(--pt)), transparent); }
.cb-run.is-running { display: flex; width: max-content; gap: calc(30 * var(--pt)); overflow: visible; text-overflow: clip; }
.cb-btn { position: absolute; top: calc(17 * var(--pt)); display: grid; place-items: center; width: calc(47 * var(--pt)); height: calc(47 * var(--pt)); border-radius: 50%; color: #FFFFFF; }
.cb-btn svg { width: calc(24 * var(--pt)); height: calc(24 * var(--pt)); }
.cb-btn.is-no { left: calc(265.3 * var(--pt)); background: #F44648; }
.cb-btn.is-yes { left: calc(321.6 * var(--pt)); background: #2FD259; }
/* The call arrives (app.js wireCaller): armed = the screen off; ringing = it wakes and the phone buzzes twice.
   Without JS or with reduced motion none of this is armed. */
.caller.is-armed:not(.is-ringing) .call-banner { opacity: 0; transform: translateY(calc(-24 * var(--pt))) scale(0.96); }
.caller.is-ringing .call-banner { transition: opacity 500ms ease, transform 700ms cubic-bezier(0.2, 0.7, 0.1, 1); }
.caller.is-ringing [data-call-phone] { animation: call-buzz 2600ms linear 900ms 1 both; }
@keyframes call-buzz {
  0%, 22%, 50%, 72%, 100% { transform: translateX(0); }
  2%, 6%, 10%, 14%, 18%, 52%, 56%, 60%, 64%, 68% { transform: translateX(-1.5px); }
  4%, 8%, 12%, 16%, 20%, 54%, 58%, 62%, 66%, 70% { transform: translateX(1.5px); }
}

/* Hele ja tume (Kristo 25.10): the band itself turns. It comes in light, the car's page light; once half of it is in
   view the whole band, ground, words and screen, goes dark together in 2 s, and stays dark until it leaves the view,
   then turns back for the next time (app.js wireModes, one IntersectionObserver and a class; not tied to the scroll).
   Reduced motion: dark from the start, no change. The page's dark theme: simply dark. The frame stays black. */
.modes { overflow: clip; background: var(--bg); min-height: clamp(520px, 46.9vw, 660px); --turn: 2s ease-in-out; }
/* One class on the band turns everything, each piece on the same 2 s curve, so nothing runs ahead of the rest. */
.modes, .modes .sec-eyebrow, .modes .sec-sub, .modes .mt-day, .modes .mt-night, .modes .modes-pane.is-dark, .modes .modes-view {
  transition: background-color var(--turn), color var(--turn), opacity var(--turn), box-shadow var(--turn); }
.modes.is-still, .modes.is-still * { transition: none !important; }
.modes.is-dark { background: #0B0B0C; }
.modes .mt-day { color: var(--text-2); }
.modes .mt-night { color: var(--text); }
.modes.is-dark .mt-day { color: #FFFFFF; }
.modes.is-dark .mt-night { color: rgba(255, 255, 255, 0.55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .modes .mt-day { color: #FFFFFF; } :root:not([data-theme="light"]) .modes .mt-night { color: rgba(255, 255, 255, 0.55); } }
:root[data-theme="dark"] .modes .mt-day { color: #FFFFFF; }
:root[data-theme="dark"] .modes .mt-night { color: rgba(255, 255, 255, 0.55); }
.modes.is-dark .sec-eyebrow, .modes.is-dark .sec-sub { color: #86868B; }
.modes-text { max-width: 600px; }
.modes-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(40px, 6vw, 96px); }
.modes-stage { --mw: min(clamp(260px, 31.25vw, 440px), calc(100vw - 32px)); height: calc(min(clamp(240px, 26.7vw, 360px), calc(100vw - 32px)) * 874 / 402 * 0.35); }
.modes-view {
  position: relative; width: var(--mw); aspect-ratio: 402 / 874; padding: calc(var(--mw) * 0.031);
  border-radius: calc(var(--mw) * 0.154); background: #0B0B0C; box-shadow: 0 0 0 1.5px #4A4D53;
}
.modes-screen { position: relative; height: 100%; overflow: hidden; isolation: isolate; border-radius: calc(var(--mw) * 0.123); }
.modes-island { position: absolute; top: 11px; left: 50%; z-index: 3; width: 31%; height: 30px; transform: translateX(-50%); border-radius: 16px; background: #000000; }
.modes-pane { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; pointer-events: none; -webkit-user-drag: none; }
.modes-pane.is-dark { opacity: 0; }
.modes.is-dark .modes-pane.is-dark { opacity: 1; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .modes-pane.is-dark { opacity: 1; } }
:root[data-theme="dark"] .modes-pane.is-dark { opacity: 1; }
.mp-time { position: absolute; left: 30px; top: 15px; font-size: 15px; font-weight: 600; }
.mp-back { position: absolute; left: 0; top: 50%; display: grid; place-items: center; width: 34px; height: 34px; margin-top: -17px; border-radius: 50%; background: var(--a-card); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); }
.mp-back svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
/* The job, as the app draws it (nfs-solo app/jobs/[id].tsx): the car and customer, the note with its photo row, the lines,
   and the floating total with Loo arve. */
.mj { position: relative; height: 100%; padding: 50px 10px 0; background: var(--a-bg); text-align: left; }
.mj::after { content: ""; position: absolute; left: 50%; bottom: 7px; width: 36%; height: 5px; margin-left: -18%; border-radius: 3px; background: var(--a-text); }
.mj-head { position: relative; display: grid; place-items: center; height: 40px; }
.mj-head b { font-size: 15px; font-weight: 600; }
.mj-card { margin-top: 10px; overflow: hidden; border-radius: 14px; background: var(--a-card); }
.mj-car { display: flex; align-items: center; gap: 10px; padding: 10px 12px 10px 8px; }
.mj-car img { flex: none; width: 92px; height: auto; }
.mj-car div { display: grid; gap: 1px; min-width: 0; }
.mj-car b { font-size: 12.5px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-car span, .mj-car em { font-size: 11px; font-style: normal; color: var(--a-text2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mj-note p { min-height: 62px; padding: 12px 12px 8px; font-size: 13px; line-height: 1.35; }
.mj-photos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 0 12px 10px; }
.mj-photos i { position: relative; aspect-ratio: 1; border-radius: 8px; background: url("/assets/hero/cam-base-1x.webp") var(--px) var(--py) / 360% auto no-repeat; }
.mj-photos .is-video b { position: absolute; right: 4px; bottom: 4px; padding: 1px 4px; border-radius: 4px; background: rgba(0, 0, 0, 0.55); color: #FFFFFF; font-size: 9.5px; font-weight: 600; }
.mj-note p { min-height: 0; }
.mj-add { display: flex; align-items: center; gap: 9px; padding: 9px 12px; border-top: 1px solid var(--a-divider); font-size: 12.5px; color: var(--a-text2); }
.mj-add i { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 50%; background: var(--a-bg); color: var(--a-text); }
.mj-add svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.mj-line { display: flex; justify-content: space-between; gap: 10px; padding: 9px 12px; }
.mj-line + .mj-line { border-top: 1px solid var(--a-divider); }
.mj-line div { display: grid; gap: 1px; }
.mj-line b { font-size: 13px; font-weight: 500; font-variant-numeric: tabular-nums; }
.mj-line span { font-size: 11.5px; color: var(--a-text2); font-variant-numeric: tabular-nums; }
.mj-bar {
  position: absolute; left: 10px; right: 10px; bottom: 22px; display: flex; align-items: center; justify-content: space-between; height: 58px; padding: 6px 6px 6px 16px;
  border-radius: 29px; background: var(--a-glass); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); box-shadow: 0 4px 14px rgba(0, 0, 0, 0.14), 0 0 0 0.5px var(--a-rim);
}
.mj-bar div { display: grid; }
.mj-bar span { font-size: 10.5px; color: var(--a-text2); }
.mj-bar b { font-size: 18px; font-weight: 700; font-variant-numeric: tabular-nums; }
.mj-bar em { display: grid; place-items: center; height: 46px; padding: 0 20px; border-radius: 23px; background: #FDB916; color: #0A0A0A; font-style: normal; font-size: 14px; font-weight: 700; }

/* KKK: plain questions, one open at a time if the visitor likes. */
/* Ilma levita (Kristo 25.10): a tile like the highlight cards, as wide as their grid (the same 12 px edges), the pill,
   title and line centred in it; the bands' spacing above, 96 px down to the questions. */
.offline { padding-block: clamp(64px, 7.5vw, 112px) 0; background: var(--bg); text-align: center; }
.offline .offline-wrap { max-width: none; padding-inline: 12px; }
.offline-inner { display: flex; flex-direction: column; align-items: center; padding: 56px 24px; background: var(--tile); }
.offline .sec-sub { margin-inline: auto; max-width: 600px; }
.net-pill { --u: 1.3px; display: inline-flex; align-items: center; gap: calc(6 * var(--u)); height: calc(28 * var(--u)); margin-bottom: 12px; /* with the title's own 8 px: 20 px, the pill is the title's label */
  padding: 0 calc(12 * var(--u)); border-radius: 999px; background: #FFFFFF; color: #6B7280; /* white on the grey tile; the app's #EFEFF0 vanished on it */ font-size: calc(12 * var(--u)); line-height: 1; }
.net-pill svg { width: calc(13 * var(--u)); height: calc(13 * var(--u)); fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .net-pill { background: #30323A; color: #9CA3AF; } }
:root[data-theme="dark"] .net-pill { background: #30323A; color: #9CA3AF; }

/* KKK as Apple's support pages (Kristo 25.10): one narrow column, the title over it, the questions as rows with a hair
   line between, no boxes; a small plus that turns open, the answer sliding open and shut (280 ms), one open at a time
   (app.js wireFaq: the height moves in a wrapper, open comes off only once it has shut); without JS a plain details
   list; reduced motion: no slide. */
.faq.sec { padding-block: clamp(64px, 7.5vw, 112px); }
.faq-inner { max-width: calc(720px + var(--gutter) * 2); }
.faq .sec-title { margin-top: 0; text-align: left; }
.faq-list { margin-top: 20px; border-top: 1px solid var(--line); }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item summary {
  position: relative; display: block; padding: 18px 40px 18px 0; list-style: none; cursor: pointer;
  font-size: 19px; line-height: 1.35; font-weight: 500; color: var(--text);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after {
  content: ""; position: absolute; right: 0; top: 50%; width: 20px; height: 20px; margin-top: -10px;
  background: linear-gradient(currentColor, currentColor) center / 14px 1.5px no-repeat, linear-gradient(currentColor, currentColor) center / 1.5px 14px no-repeat;
  color: var(--text-2); transition: transform 280ms cubic-bezier(0.2, 0.7, 0.2, 1);
}
.faq-item[open] summary::after { transform: rotate(45deg); }
[data-faq].is-js .faq-item[open]:not(.is-open) summary::after { transform: none; }
.faq-item summary:focus-visible { outline: 2px solid var(--text); outline-offset: 4px; border-radius: 4px; }
.faq-item p { padding: 0 40px 20px 0; font-size: 17px; line-height: 1.5; color: var(--text-2); }
.faq-body { display: grid; grid-template-rows: 1fr; }
[data-faq].is-js .faq-body { grid-template-rows: 0fr; transition: grid-template-rows 280ms cubic-bezier(0.2, 0.7, 0.2, 1); }
[data-faq].is-js .faq-item.is-open .faq-body { grid-template-rows: 1fr; }
.faq-in { min-height: 0; overflow: hidden; }
@media (prefers-reduced-motion: reduce) { [data-faq].is-js .faq-body, .faq-item summary::after { transition: none; } }

/* Kes selle tegi (Kristo 25.10): the quote on a tile like the highlight cards (same ground, square corners), as wide as
   the questions' column and on its left edge, 56 px under the last question and 96 px over the black close. */
.faq.sec { padding-bottom: 0; }
.maker.sec { padding-block: 56px 96px; }
.maker-inner { max-width: calc(720px + var(--gutter) * 2); }
.maker-card { padding: clamp(28px, 3.1vw, 40px) clamp(24px, 3.75vw, 48px); background: var(--tile); text-align: left; }
.maker-quote { margin: 12px 0 0; font-size: clamp(20px, 0.6vw + 14px, 24px); line-height: 1.45; font-weight: 400; color: var(--text); text-wrap: pretty; }
.maker-who { margin-top: 20px; font-size: 15px; color: var(--text-2); }


/* Lõpp: the mark, one line and the store. */
.end { text-align: center; }
.end-inner { display: flex; flex-direction: column; align-items: center; }
/* The end and the foot are one black close (Kristo 25.10): the band above it light, the edge sharp; the lockup, a white
   title, a grey line, the stores' badges made for dark grounds, then a thin line and the foot in the same black. */
.end { background: #000000; color: #F5F5F7; }
.end .sec-sub { color: #A1A1A6; }
.end .store-soon { color: #F5F5F7; }
.end-lockup { width: min(360px, 80vw); }
.end-lockup img { display: block; width: 100%; height: auto; }
.end-lockup img + img { width: 40.6%; margin: 1.4% 0 0 0.5%; }
.end-title { margin-top: 56px; font-size: clamp(40px, 3.6vw + 22px, 72px); line-height: 1.04; font-weight: 600; letter-spacing: -0.035em; text-wrap: balance; }
.end .sec-sub { margin-top: 14px; }
.end .stores, .end .store-soon { justify-content: center; margin-top: 56px; }
.end.sec { padding-block: clamp(96px, 12.5vw, 160px) 0; } /* one compact black close with the foot (Kristo 25.10) */

@media (max-width: 860px) {
  .caller-grid, .modes-grid { grid-template-columns: 1fr; }
  .caller-grid, .modes-grid { justify-items: center; text-align: center; }
  .caller-stage { order: 0; }
  .caller .sec-sub { margin-inline: auto; }
}
/* ───────────────────────── Language switch on load ───────────────────────── */
html.i18n-pending body { visibility: hidden; animation: i18nShow 1ms linear 1.2s forwards !important; }
@keyframes i18nShow { to { visibility: visible; } }

/* ───────────────────────── Motion ───────────────────────── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; }
}