/*
 * Praktify website: shared styles. Neumorphism, ported from mobile/src/theme/themes/neumorphism.ts (D-024).
 * Colour roles (D-026): neutral, accent, attention, positive, negative; brand colour only inside the logo.
 * Pair every colour with a label or icon. No third-party requests: fonts are self-hosted.
 *
 * One light source, top-left, as in the app: highlights are up-left, shadows down-right. Surfaces are either
 * raised (things you read or press) or sunken (wells that hold things). See README "Design system".
 */

/* ---------- Fonts (Manrope, OFL; see assets/fonts/LICENSE_FONT) ---------- */
@font-face { font-family: "Manrope"; font-weight: 500; font-style: normal; font-display: swap; src: url("../fonts/Manrope_500Medium.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-weight: 600; font-style: normal; font-display: swap; src: url("../fonts/Manrope_600SemiBold.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-weight: 700; font-style: normal; font-display: swap; src: url("../fonts/Manrope_700Bold.ttf") format("truetype"); }
@font-face { font-family: "Manrope"; font-weight: 800; font-style: normal; font-display: swap; src: url("../fonts/Manrope_800ExtraBold.ttf") format("truetype"); }

/* ---------- Tokens ---------- */
:root {
  /* Colour */
  --ground: #E4E8EF;
  --surface: #E4E8EF;
  --light: #FFFFFF;           /* highlight half of every soft shadow */
  --shade: #B8C0CE;           /* dark half of the shadow */
  --shade-soft: #BAC2CF;
  --shade-deep: #A9B2C2;
  --ink: #1E2433;             /* 12.6:1 on the ground */
  --ink-soft: #4A5468;        /* 6.2:1 */
  --muted: #4A5468;
  --line: rgba(30, 36, 51, 0.14);
  --placeholder: #5A6478;
  --neutral: #4A5468;
  --neutral-tint: #D5DAE3;
  --accent: #3D5AFE;          /* fills only; white text on it is 5.1:1 */
  --accent-text: #2F45C8;     /* 6.1:1 as text */
  --on-accent: #FFFFFF;
  --accent-tint: #DCE2F7;
  --accent-tint-strong: #C9D3F6;
  --attention: #9A4F00;       /* 4.9:1 */
  --attention-tint: #F6E7D2;
  --positive: #17673F;        /* 5.6:1 */
  --negative: #B42335;        /* 5.3:1; white on it 5.9:1 */
  --focus: #3D5AFE;
  --focus-glow: rgba(61, 90, 254, 0.22);
  --edge: rgba(30, 36, 51, 0.30);
  --edge-faint: rgba(30, 36, 51, 0.22);

  /* Soft shadows: raised = light + dark pair, inset = the same pair inside */
  --shadow-sm: 3px 3px 7px var(--shade-soft), -3px -3px 7px var(--light);
  --shadow-md: 7px 7px 16px var(--shade), -7px -7px 16px var(--light);
  --shadow-lg: 8px 8px 18px var(--shade), -8px -8px 18px var(--light);
  /* Hero-only depth: a long, soft cast for objects that float above the page (device, floating cards) */
  --shadow-float: 22px 26px 48px rgba(150, 161, 181, 0.55), 6px 8px 16px rgba(169, 178, 194, 0.45), -16px -16px 36px var(--light);
  --shadow-btn: 5px 5px 12px #B0B9C8, -5px -5px 12px var(--light);
  --inset: inset 4px 4px 9px var(--shade-soft), inset -4px -4px 9px var(--light);
  --inset-sm: inset 3px 3px 6px var(--shade-soft), inset -3px -3px 6px var(--light);
  --inset-lg: inset 8px 8px 18px var(--shade-soft), inset -8px -8px 18px var(--light);
  --accent-pressed: inset 3px 3px 7px #2A3FB8, inset -3px -3px 7px #5874FF;

  /* Radii: small parts get small radii, big surfaces big ones (nested radius = outer minus padding) */
  --r-xs: 8px; --r-sm: 12px; --r-md: 16px; --r-lg: 24px; --r-xl: 26px; --r-2xl: 36px; --r-pill: 999px;

  /* Spacing */
  --s-xs: 4px; --s-sm: 8px; --s-md: 12px; --s-lg: 16px; --s-xl: 24px; --s-xxl: 32px; --s-xxxl: 48px; --s-4xl: 64px;
  --s-section: clamp(56px, 8vw, 104px);

  /* Type: one family, contrast through weight and size. Display sizes are tight; body is relaxed. */
  --font: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --fs-hero: clamp(2.75rem, 8.2vw + 0.25rem, 6rem);     /* landing h1 only */
  --fs-display: clamp(2.25rem, 5vw + 0.75rem, 3.75rem); /* h1 on inner pages */
  --fs-title: clamp(1.875rem, 3.4vw + 0.75rem, 3rem);   /* h2 section titles */
  --fs-heading: 1.1875rem;                              /* h3 */
  --fs-subheading: 0.9375rem;                           /* 15/20 */
  --fs-body: 1rem;
  --fs-lede: clamp(1.125rem, 0.6vw + 1rem, 1.3125rem);
  --fs-small: 0.875rem;
  --fs-caption: 0.75rem;

  --container: 1160px;
  --gutter: clamp(20px, 5vw, 48px);
  --touch: 44px;
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);   /* the app's logo intro easing */
}

/* ---------- Base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  margin: 0; color: var(--ink);
  /* The light source: a soft highlight top-left, where every highlight in the UI comes from. */
  background: radial-gradient(900px 640px at 12% 0%, rgba(255, 255, 255, 0.72), rgba(255, 255, 255, 0) 72%) no-repeat, var(--ground);
  font-family: var(--font); font-weight: 500; font-size: var(--fs-body); line-height: 1.6;
  overflow-wrap: break-word; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
  overflow-x: clip;
}
img, svg { max-width: 100%; height: auto; }
h1, h2, h3, h4 { margin: 0 0 var(--s-md); font-weight: 700; color: var(--ink); overflow-wrap: break-word; text-wrap: balance; }
h1 { font-size: var(--fs-display); line-height: 1.04; letter-spacing: -0.04em; font-weight: 800; }
h2 { font-size: var(--fs-title); line-height: 1.08; letter-spacing: -0.035em; font-weight: 800; }
h3 { font-size: var(--fs-heading); line-height: 1.3; letter-spacing: -0.015em; }
p { margin: 0 0 var(--s-lg); text-wrap: pretty; }
a { color: var(--accent-text); text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2.5px; }
strong { font-weight: 700; }
code { font-family: Menlo, Consolas, "Courier New", monospace; font-size: 0.9em; background: var(--ground); box-shadow: var(--inset-sm); padding: 1px 6px; border-radius: 8px; }
hr { border: 0; height: 2px; background: var(--ground); box-shadow: var(--inset-sm); margin: var(--s-xxl) 0; border-radius: 2px; }
::selection { background: var(--accent-tint-strong); color: var(--ink); }

/* Visible focus on everything interactive (ring does not move layout) */
:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }

/* ---------- Layout ---------- */
.container { width: 100%; max-width: calc(var(--container) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); }
.section { padding-block: var(--s-section); }
.section--tight { padding-block: calc(var(--s-section) / 2); }
.section__head { max-width: 42rem; margin-bottom: clamp(32px, 5vw, 56px); }
.section__head h2 { margin-bottom: var(--s-lg); }
.section__head p { color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.5; margin-bottom: 0; }
/* .section__head--split: title left, one sentence right (wide screens) */
@media (min-width: 900px) {
  .section__head--split { max-width: none; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: var(--s-4xl); align-items: end; }
  .section__head--split h2 { margin-bottom: 0; }
  .section__head--split p { max-width: 30rem; padding-bottom: 6px; }
}
.center { text-align: center; margin-inline: auto; }
.center .lede { margin-inline: auto; }
.center .btn-row { justify-content: center; }
.lede { font-size: var(--fs-lede); line-height: 1.5; color: var(--ink-soft); max-width: 36rem; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--fs-small); line-height: 1.45; }
.stack > * + * { margin-top: var(--s-lg); }
.mt-xl { margin-top: var(--s-xl); }
.mt-xxl { margin-top: var(--s-xxl); }
.visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

.skip-link { position: absolute; left: var(--s-lg); top: -100px; z-index: 100; background: var(--ink); color: var(--light); padding: var(--s-md) var(--s-lg); border-radius: var(--r-sm); font-weight: 700; text-decoration: none; }
.skip-link:focus { top: var(--s-lg); }

/* ---------- Logo (D-057): the tile mark on a raised tile + "praktify" (PraktifyLogo.tsx). The blue disc is the one brand hue. ---------- */
/* --logo-size sets the mark size (default 36px). The tile is a CSS box so its soft shadow matches the app. */
.logo { --logo-size: 36px; display: inline-flex; align-items: center; gap: 3px; text-decoration: none; color: var(--ink); min-height: var(--touch); border-radius: var(--r-sm); }
.logo__mark { position: relative; z-index: 1; width: var(--logo-size); height: var(--logo-size); border-radius: calc(var(--logo-size) * 0.3); background: var(--ground); box-shadow: var(--shadow-sm); display: grid; place-items: center; flex: none; }
.logo__mark svg { width: 100%; height: 100%; display: block; }
.logo__word { font-weight: 700; font-size: calc(var(--logo-size) * 0.66); letter-spacing: -0.03em; line-height: 1; }
.logo--lg { --logo-size: 56px; gap: 4px; }
.logo--lg .logo__mark { box-shadow: var(--shadow-md); }

/* .logo--intro: the app's load animation in CSS (lib/logoIntro.ts): the P shows centred alone, holds 300 ms, then
   glides left over 800 ms while "praktify" slides out from behind it (60 ms later, from 16 px left). Plays once per
   page load; reduced motion shows the static wordmark. --intro-shift = (gap + word width) / 2. */
.logo--intro { --intro-shift: calc(var(--logo-size) * 1.01); }
@media (prefers-reduced-motion: no-preference) {
  .logo--intro .logo__mark { animation: logo-mark 800ms var(--ease-out) 300ms both; }
  .logo--intro .logo__word { animation: logo-word 800ms var(--ease-out) 360ms both; }
}
@keyframes logo-mark { from { transform: translateX(var(--intro-shift)); } }
@keyframes logo-word { from { opacity: 0; transform: translateX(-16px); } }

/* ---------- Header and nav (no JS: links wrap under the logo on narrow screens; sticky from 640px) ---------- */
.site-header { position: relative; z-index: 20; padding-block: var(--s-md); }
.site-header .container { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-sm) var(--s-xl); }
@media (min-width: 640px) {
  .site-header { position: sticky; top: 0; background: rgba(228, 232, 239, 0.88); -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px); }
  /* Where scroll-driven animations exist, the bar is clear at the top and gains its ground and soft lower edge
     over the first 80px of scroll. Elsewhere it simply keeps the translucent ground. */
  @supports (animation-timeline: scroll()) {
    .site-header { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; animation: header-edge linear both; animation-timeline: scroll(); animation-range: 0 80px; }
    @keyframes header-edge { to { background: rgba(228, 232, 239, 0.88); -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px); box-shadow: 0 10px 24px -14px rgba(150, 161, 181, 0.9), 0 1px 0 rgba(255, 255, 255, 0.7); } }
  }
}
.nav { display: flex; flex-wrap: wrap; gap: var(--s-xs); list-style: none; margin: 0; padding: 0; }
.nav a { display: inline-flex; align-items: center; min-height: var(--touch); padding: 0 var(--s-lg); border-radius: var(--r-pill); color: var(--ink); font-weight: 700; font-size: 0.9375rem; text-decoration: none; transition: box-shadow 0.2s ease; }
.nav a:hover { box-shadow: var(--shadow-sm); }
.nav a[aria-current="page"] { box-shadow: var(--inset-sm); color: var(--accent-text); }
.nav a.nav__cta { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-btn); }
.nav a.nav__cta:hover { box-shadow: var(--shadow-btn); filter: brightness(1.05); }
@media (max-width: 360px) { .nav a { padding: 0 var(--s-md); } }

/* Language switcher (EN / DE): beside the logo on phones with the nav underneath; one row from 720px. */
.lang { display: flex; gap: var(--s-xs); order: 2; }
.lang a { display: inline-flex; align-items: center; justify-content: center; min-width: var(--touch); min-height: var(--touch); padding: 0 var(--s-md); border-radius: var(--r-pill); color: var(--ink); font-weight: 700; font-size: 0.875rem; letter-spacing: 0.04em; text-decoration: none; transition: box-shadow 0.2s ease; }
.lang a:hover { box-shadow: var(--shadow-sm); }
.lang a[aria-current="true"] { box-shadow: var(--inset-sm); color: var(--accent-text); }
.site-header nav { order: 3; flex: 1 0 100%; }
@media (min-width: 720px) { .site-header nav { order: 2; flex: 0 1 auto; } .lang { order: 3; } }

/* ---------- Footer: brand + links on a raised slab, base line underneath ---------- */
.site-footer { margin-top: var(--s-section); padding-bottom: var(--s-xl); }
.footer-slab { border-radius: var(--r-2xl); box-shadow: var(--shadow-lg); padding: clamp(28px, 5vw, 56px); display: grid; gap: var(--s-xxl); }
@media (min-width: 768px) { .footer-slab { grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: var(--s-xxxl); } }
.footer-brand p { color: var(--ink-soft); margin: var(--s-md) 0 var(--s-xl); max-width: 26rem; }
.footer-brand .logo { --logo-size: 44px; }
.footer-title { font-size: var(--fs-small); font-weight: 700; color: var(--ink-soft); margin: 0 0 var(--s-sm); }
.footer-nav { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 0 var(--s-xxl); list-style: none; margin: 0; padding: 0; }
.footer-nav a { display: inline-flex; align-items: center; min-height: var(--touch); color: var(--ink); font-weight: 700; font-size: 1rem; text-decoration: none; }
.footer-nav a:hover { text-decoration: underline; }
.footer-base { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--s-sm) var(--s-xl); padding: var(--s-xl) clamp(4px, 2vw, 24px) 0; }
.footer-note { color: var(--ink-soft); font-size: var(--fs-small); margin: 0; display: inline-flex; align-items: center; gap: 6px; }
.footer-note svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---------- Page head (inner pages): h1 + lede on the same light as the landing hero ---------- */
.page-head { position: relative; isolation: isolate; padding-block: clamp(40px, 7vw, 88px) clamp(24px, 4vw, 48px); }
.page-head h1 { margin-bottom: var(--s-lg); max-width: 18ch; }
.page-head .lede { margin-bottom: 0; }
/* Centred head (404): h1 and lede centred, P mark above, room before the buttons */
.page-head .center h1 { margin-inline: auto; max-width: none; line-height: 1.1; }
.page-head .center .logo--lg { display: flex; justify-content: center; margin-bottom: var(--s-xl); }
.page-head .center .lede { margin-bottom: var(--s-xxl); }

/* ---------- Hero (landing): copy left, layered device stage right; stacked on phones ---------- */
.hero { position: relative; isolation: isolate; padding-block: clamp(24px, 5vw, 64px) clamp(56px, 8vw, 112px); }
.hero__grid { display: grid; gap: clamp(40px, 6vw, 72px); align-items: center; }
.hero__copy { min-width: 0; }
.hero__copy h1 { font-size: var(--fs-hero); line-height: 0.98; letter-spacing: -0.05em; margin-bottom: var(--s-xl); max-width: 9.5ch; }
.hero__copy .lede { margin-bottom: 0; }
.hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-lg) var(--s-xl); margin-top: clamp(28px, 4vw, 40px); }
@media (min-width: 960px) { .hero__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 48px; } }

/* .store-soon: "Coming soon to the App Store". Sunken (a display, not a control) so it never reads as a button. */
.store-soon { display: inline-flex; align-items: center; gap: var(--s-md); min-height: 56px; padding: 8px 22px 8px 10px; border-radius: var(--r-md); box-shadow: var(--inset-sm); color: var(--ink); line-height: 1.2; }
.store-soon__icon { width: 38px; height: 38px; border-radius: 11px; box-shadow: var(--shadow-sm); display: grid; place-items: center; flex: none; }
.store-soon__icon svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.store-soon small { display: block; font-size: var(--fs-caption); font-weight: 600; color: var(--ink-soft); }
.store-soon strong { display: block; font-size: 1rem; font-weight: 800; letter-spacing: -0.01em; }

/* ---------- Hero stage: a scaling scene (container units) so it never overflows. ---------- */
/* <div class="stage" role="img" aria-label="…"><div class="device">…</div><div class="float float--role">…</div>…</div> */
.stage { --phone-w: 58; position: relative; width: 100%; max-width: 580px; margin-inline: auto; container-type: inline-size; aspect-ratio: 1 / 1.16; }
.stage > * { position: absolute; }
@media (max-width: 599px) { .stage { --phone-w: 66; aspect-ratio: 1 / 1.3; } }

/* ---------- Device (CSS phone). Everything inside is sized in em, so it scales with the stage. ---------- */
.device { isolation: isolate; left: calc((100% - var(--phone-w) * 1%) / 2); top: 0; width: calc(var(--phone-w) * 1%); aspect-ratio: 71.5 / 149.6;
  font-size: calc(var(--phone-w) * 0.0405cqi); padding: 0.7em; border-radius: 3.9em;
  /* Titanium-style frame (a generic CSS phone, not an Apple asset): brushed neutral gradient with a thin lit edge. */
  background: linear-gradient(135deg, #F1F3F6 0%, #C9CED6 22%, #E6E9EE 48%, #B9BFC8 74%, #DDE1E7 100%);
  box-shadow: var(--shadow-float), inset 0 0 0 0.06em rgba(255, 255, 255, 0.85), inset 0 0 0 0.16em rgba(120, 130, 146, 0.35); }
/* Side buttons: action + volume on the left, power on the right (one pseudo-element each, drawn behind the frame). */
.device::before, .device::after { content: ""; position: absolute; width: 0.2em; background: linear-gradient(to right, #AEB4BE, #D9DDE3); z-index: -1; }
.device::before { left: -0.16em; top: 15%; height: 3.4%; border-radius: 0.1em 0 0 0.1em;
  box-shadow: 0 7.4em 0 #C4C9D1, 0 12.4em 0 #C4C9D1; }
.device::after { right: -0.16em; top: 26%; height: 10%; border-radius: 0 0.1em 0.1em 0; background: linear-gradient(to left, #AEB4BE, #D9DDE3); }
/* The screen sits in a black glass ring (the ring is a spread shadow, so the screen box stays exact). */
.device__screen { position: relative; height: 100%; border-radius: 3.2em; background: var(--ground); box-shadow: 0 0 0 0.42em #0A0B0E, inset 0.25em 0.25em 0.6em var(--shade-soft), inset -0.25em -0.25em 0.6em var(--light); overflow: hidden; padding: 0.75em 1em 0; display: flex; flex-direction: column; gap: 0.7em; }
.device__status { display: flex; align-items: center; justify-content: space-between; height: 2.1em; padding: 0 0.6em; font-size: 0.85em; font-weight: 800; }
.device__island { width: 7em; height: 2em; border-radius: 1em; background: #0A0B0E; }
.device__status svg { width: 3.4em; height: 1em; fill: currentColor; }
.device__head { display: flex; align-items: center; justify-content: space-between; gap: 0.6em; margin-top: 0.2em; }
.device__title { font-size: 1.85em; font-weight: 800; letter-spacing: -0.035em; line-height: 1; margin: 0; }
.device__round { width: 2.8em; height: 2.8em; border-radius: 50%; box-shadow: 0.2em 0.2em 0.5em var(--shade-soft), -0.2em -0.2em 0.5em var(--light); display: grid; place-items: center; flex: none; }
.device__round svg { width: 1.35em; height: 1.35em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.device__filter { align-self: flex-start; display: inline-flex; align-items: center; gap: 0.5em; padding: 0.45em 0.95em; border-radius: 999px; border: 1px solid var(--edge); box-shadow: 0.18em 0.18em 0.45em var(--shade-soft), -0.18em -0.18em 0.45em var(--light); font-size: 0.95em; font-weight: 800; }
.device__filter .status { font-size: 1em; color: var(--ink); }
.device__filter .status::before { background: var(--attention); }
.device__list { display: flex; flex-direction: column; gap: 0.7em; }
.device__tabs { position: absolute; left: 0.75em; right: 0.75em; bottom: 0.9em; display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.2em; padding: 0.4em; border-radius: 1.9em; background: var(--ground); box-shadow: 0.45em 0.45em 1em #B0B9C8, -0.35em -0.35em 0.8em var(--light); }
.device__tabs span { display: flex; flex-direction: column; align-items: center; gap: 0.2em; padding: 0.45em 0 0.4em; border-radius: 1.35em; font-size: 0.68em; font-weight: 700; color: var(--ink-soft); }
.device__tabs svg { width: 1.9em; height: 1.9em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.device__tabs .is-active { color: var(--accent-text); box-shadow: inset 0.18em 0.18em 0.4em var(--shade-soft), inset -0.18em -0.18em 0.4em var(--light); }
/* Fade the list out behind the tab bar */
.device__screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9em; background: linear-gradient(to bottom, rgba(228, 232, 239, 0), var(--ground) 55%); pointer-events: none; }
.device__tabs { z-index: 1; }

/* ---------- App UI parts (mockups): sized in em, usable inside .device, .float and .mini ---------- */
/* .app-pill: an application or posting row (ApplicationPill / PostingRow) */
.app-pill { display: flex; flex-direction: column; gap: 0.45em; padding: 0.7em 0.8em; border-radius: 1.4em; background: var(--ground); border: 1px solid rgba(30, 36, 51, 0.1); box-shadow: 0.22em 0.22em 0.55em var(--shade-soft), -0.22em -0.22em 0.55em var(--light); min-width: 0; }
.app-pill__top { display: flex; align-items: center; gap: 0.75em; min-width: 0; }
.app-pill__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.1em; }
.app-pill__co { font-size: 0.78em; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-pill__role { font-size: 1em; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-pill__role--wrap { white-space: normal; }
.app-pill__save { width: 1.6em; height: 1.6em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; flex: none; align-self: flex-start; }
/* .badge: company initials on a flat outlined tile (LogoBadge, neumorphism). Never a brand colour on the site. */
.badge { width: 2.6em; height: 2.6em; border-radius: 0.75em; border: 1px solid var(--edge-faint); display: grid; place-items: center; font-size: 1em; flex: none; }
.badge span { font-size: 0.8em; font-weight: 800; color: var(--neutral); letter-spacing: 0.02em; }
/* .status: dot + label (StatusDot). Modifiers set the role colour. */
.status { display: inline-flex; align-items: center; gap: 0.4em; font-size: 0.78em; font-weight: 800; color: var(--neutral); }
.status::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; flex: none; }
.status--accent { color: var(--accent-text); }
.status--positive { color: var(--positive); }
.status--attention { color: var(--attention); }
.status--negative { color: var(--negative); }
/* .due: the next-step line under a pill (icon, text, when) */
.due { display: flex; align-items: center; gap: 0.55em; font-size: 0.82em; font-weight: 700; min-width: 0; padding: 0 0.1em; }
.due svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.due__text { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.due__when { flex: none; font-weight: 800; color: var(--ink-soft); }
.due--attention .due__when { color: var(--attention); }
/* .due--solid: overdue / due today (solid negative box, white text) */
.due--solid { background: var(--negative); color: #fff; border-radius: 0.9em; padding: 0.35em 0.7em; }
.due--solid .due__when { color: #fff; }
/* .fit: the fit band chip (FitChip). Dot + word; colour is never the only signal. */
.fit { display: inline-flex; align-items: center; gap: 0.45em; align-self: flex-start; padding: 0.22em 0.8em; border-radius: 999px; border: 1px solid var(--edge-faint); font-size: 0.8em; font-weight: 800; color: var(--ink); white-space: nowrap; }
.fit::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; }
.fit--strong { color: var(--positive); }
.fit--good::before { display: none; }
.fit--stretch { color: var(--attention); }
/* .reasons: fit reasons (FitReasons): ✓ in ink for matches, ⚑ in attention for gaps */
.reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.35em; font-size: 0.82em; font-weight: 600; line-height: 1.35; }
.reasons li { display: flex; gap: 0.5em; }
.reasons li::before { content: "\2713"; flex: none; width: 1em; text-align: center; font-weight: 800; }
.reasons .gap { color: var(--attention); }
.reasons .gap::before { content: "\2691"; }
/* .doc: a generated document tile (title, meta, skeleton lines) */
.doc { display: flex; flex-direction: column; gap: 0.6em; padding: 0.9em; border-radius: 1.2em; background: var(--ground); box-shadow: 0.25em 0.25em 0.6em var(--shade-soft), -0.25em -0.25em 0.6em var(--light); min-width: 0; }
.doc__head { display: flex; align-items: center; gap: 0.7em; min-width: 0; }
.doc__icon { width: 2.4em; height: 2.4em; border-radius: 0.7em; box-shadow: inset 0.15em 0.15em 0.35em var(--shade-soft), inset -0.15em -0.15em 0.35em var(--light); display: grid; place-items: center; color: var(--accent-text); flex: none; }
.doc__icon svg { width: 1.3em; height: 1.3em; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.doc__title { font-weight: 800; font-size: 1em; letter-spacing: -0.01em; line-height: 1.2; }
.doc__meta { font-size: 0.75em; font-weight: 600; color: var(--ink-soft); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc__lines { display: flex; flex-direction: column; gap: 0.45em; padding: 0.2em 0; }
.doc__lines i { display: block; height: 0.5em; border-radius: 0.3em; box-shadow: inset 0.1em 0.1em 0.2em var(--shade-soft), inset -0.1em -0.1em 0.2em var(--light); }
.doc__lines i:nth-child(2) { width: 88%; } .doc__lines i:nth-child(3) { width: 94%; } .doc__lines i:nth-child(4) { width: 62%; }
.doc__foot { display: flex; align-items: center; gap: 0.45em; font-size: 0.78em; font-weight: 800; color: var(--positive); }
.doc__foot svg { width: 1.2em; height: 1.2em; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
/* .track: stage progress (StageTracker compact) */
.track { display: flex; flex-direction: column; gap: 0.45em; }
.track__bar { height: 0.7em; border-radius: 999px; box-shadow: inset 0.12em 0.12em 0.3em var(--shade-soft), inset -0.12em -0.12em 0.3em var(--light); padding: 0.14em; }
.track__bar i { display: block; height: 100%; width: var(--done, 60%); border-radius: 999px; background: var(--accent); }
.track__label { font-size: 0.78em; font-weight: 700; color: var(--ink-soft); }

/* ---------- Floating cards in the hero stage ---------- */
.float { font-size: 2.45cqi; background: var(--ground); border-radius: 1.6em; box-shadow: var(--shadow-float); padding: 0.85em; z-index: 2; }
.float--role { left: 0; bottom: 6%; width: 52%; display: flex; flex-direction: column; gap: 0.7em; }
.float--doc { right: 0; top: 11%; width: 41%; padding: 0; }
.float--doc .doc { box-shadow: none; border-radius: inherit; }
@media (max-width: 599px) { .float { font-size: 2.7cqi; } .float--role { width: 56%; bottom: 2%; } .float--doc { width: 42%; top: 5%; } }

/* Hero entrance: surfaces "extrude" from the ground, once, in order (device, then the two cards). */
@media (prefers-reduced-motion: no-preference) {
  .device { animation: extrude 1100ms var(--ease-out) 150ms both; }
  .float--doc { animation: extrude-float 1000ms var(--ease-out) 650ms both; }
  .float--role { animation: extrude-float 1000ms var(--ease-out) 850ms both; }
}
@keyframes extrude { from { box-shadow: 0 0 0 rgba(150, 161, 181, 0), 0 0 0 rgba(169, 178, 194, 0), 0 0 0 rgba(255, 255, 255, 0); transform: translateY(18px) scale(0.985); opacity: 0.3; } }
@keyframes extrude-float { from { box-shadow: 0 0 0 rgba(150, 161, 181, 0), 0 0 0 rgba(169, 178, 194, 0), 0 0 0 rgba(255, 255, 255, 0); transform: translateY(14px); opacity: 0; } }

/* ---------- Card (raised) and panel (inset) ---------- */
.card { background: var(--surface); border-radius: var(--r-lg); box-shadow: var(--shadow-md); padding: var(--s-xl); min-width: 0; }
.card--lg { box-shadow: var(--shadow-lg); padding: clamp(24px, 3.5vw, 36px); border-radius: 28px; }
.card h2 { font-size: clamp(1.375rem, 1.6vw + 0.9rem, 1.75rem); letter-spacing: -0.025em; margin-bottom: var(--s-md); }
.card h3 { margin-bottom: var(--s-sm); }
.card p:last-child { margin-bottom: 0; }
.card--link { display: block; color: inherit; text-decoration: none; transition: box-shadow 0.2s ease; }
.card--link:hover { box-shadow: var(--shadow-lg); }
.card--link:active { box-shadow: var(--inset); }
.panel { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--inset); padding: var(--s-lg) var(--s-xl); min-width: 0; }
.panel > :last-child { margin-bottom: 0; }
.icon-tile { width: 48px; height: 48px; border-radius: var(--r-md); box-shadow: var(--inset-sm); display: grid; place-items: center; color: var(--accent-text); margin-bottom: var(--s-lg); flex: none; }
.icon-tile svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.icon-tile--raised { box-shadow: var(--shadow-sm); }

/* ---------- Buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-sm); min-height: 52px; padding: 0 var(--s-xl); border: 0; border-radius: var(--r-md); font: inherit; font-weight: 700; font-size: 1rem; line-height: 1.2; text-align: center; text-decoration: none; cursor: pointer; max-width: 100%; transition: box-shadow 0.15s ease; }
.btn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.btn--primary { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow-btn); }
.btn--primary:active { box-shadow: var(--accent-pressed); }
.btn--secondary { background: var(--ground); color: var(--ink); box-shadow: var(--shadow-btn); border: 1px solid var(--edge); }
.btn--secondary:hover { box-shadow: 7px 7px 16px #B0B9C8, -7px -7px 16px var(--light); }
.btn--secondary:active { box-shadow: var(--inset-sm); }
.btn:hover { text-decoration: none; }
.btn-row { display: flex; flex-wrap: wrap; gap: var(--s-lg); }
@media (max-width: 480px) { .btn, .btn-row .btn { width: 100%; } .hero__actions .btn { width: auto; } }

/* ---------- Chip / pill ---------- */
.chip { display: inline-flex; align-items: center; gap: 6px; min-height: 32px; padding: 4px 13px; border-radius: var(--r-pill); border: 1px solid var(--edge-faint); background: transparent; color: var(--ink); font-weight: 700; font-size: var(--fs-small); line-height: 1.3; }
.chip svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.chip--raised { box-shadow: var(--shadow-sm); border-color: var(--edge); }
.chip--accent { color: var(--accent-text); }
.chip--attention { color: var(--attention); }
.chip--positive { color: var(--positive); }
.chip--negative { color: var(--negative); }

/* ---------- Steps: a real 1-2-3 sequence, each with a small sunken scene (.mini) ---------- */
/* <ol class="steps steps--row"><li class="step"><div class="step__visual mini">…</div><div class="step__body"><span class="step__num">1</span><h3>…</h3><p>…</p></div></li>… */
.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-xxl); }
.step { display: flex; gap: var(--s-lg); align-items: flex-start; min-width: 0; }
.step > div { min-width: 0; }
.step__num { flex: none; width: 44px; height: 44px; border-radius: var(--r-pill); box-shadow: var(--shadow-sm); display: grid; place-items: center; font-weight: 800; font-size: 1.0625rem; color: var(--accent-text); }
.step h3 { margin-bottom: var(--s-xs); }
.step p { margin: 0; color: var(--ink-soft); }
/* Steps with visuals: visual on top, number + text below */
.steps--row .step { flex-direction: column; gap: var(--s-xl); }
.step__body { display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: var(--s-lg); align-items: start; }
.step__body .step__num { grid-row: span 2; }
.step__body h3 { padding-top: 9px; }
@media (min-width: 900px) { .steps--row { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(24px, 3vw, 40px); } }
@media (min-width: 600px) and (max-width: 899px) { .steps--row .step { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-xl); align-items: center; } }

/* .mini: a sunken scene holding app parts at a readable fixed size (14px base). */
.mini { position: relative; width: 100%; min-height: 216px; border-radius: 28px; box-shadow: var(--inset-lg); padding: 22px; display: flex; flex-direction: column; justify-content: center; gap: 12px; font-size: 14px; overflow: hidden; }
.mini__file { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border-radius: 18px; box-shadow: var(--shadow-sm); }
.mini__file .doc__icon { font-size: 15px; }
.mini__file b { display: block; font-weight: 800; line-height: 1.2; }
.mini__file small { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.mini__checks { list-style: none; margin: 0; padding: 0 4px; display: flex; flex-wrap: wrap; gap: 8px; }
.mini__checks li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px 4px 9px; border-radius: 999px; border: 1px solid var(--edge-faint); font-size: 12px; font-weight: 700; }
.mini__checks svg { width: 14px; height: 14px; fill: none; stroke: var(--positive); stroke-width: 2.8; stroke-linecap: round; stroke-linejoin: round; }
.mini__companies { display: flex; gap: 10px; flex-wrap: wrap; }
.mini__company { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px 6px 6px; border-radius: 16px; box-shadow: var(--shadow-sm); font-weight: 700; font-size: 13px; }
.mini__company .badge { font-size: 12px; }
.mini__company.is-following { box-shadow: var(--inset-sm); color: var(--accent-text); }
.mini__company.is-following .badge span { color: var(--accent-text); }

/* ---------- Bento: features in a varied grid (one wide, two compact, one full-width) ---------- */
/* <div class="bento"><article class="card bento__item bento__item--fit">…</article>… */
.bento { display: grid; gap: clamp(20px, 2.4vw, 28px); grid-template-columns: minmax(0, 1fr); }
.bento__item { display: flex; flex-direction: column; gap: var(--s-xl); border-radius: 30px; padding: clamp(22px, 3vw, 36px); }
.bento__item h3 { font-size: clamp(1.25rem, 0.8vw + 1rem, 1.5rem); letter-spacing: -0.025em; line-height: 1.2; margin-bottom: var(--s-sm); }
.bento__item p { color: var(--ink-soft); margin: 0; max-width: 34rem; }
.bento__media { border-radius: 22px; box-shadow: var(--inset); padding: clamp(14px, 2.4vw, 24px); font-size: 15px; display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.bento__media .app-pill { font-size: 15px; }
.bento__item--fit .bento__media { flex: 1; justify-content: center; }
.bento__sources { display: flex; flex-direction: column; gap: 10px; }
.source { display: flex; align-items: center; gap: 12px; padding: 10px 14px 10px 10px; border-radius: 16px; box-shadow: var(--shadow-sm); font-weight: 700; font-size: 14px; line-height: 1.3; min-width: 0; }
.source .icon-tile { width: 36px; height: 36px; margin: 0; border-radius: 11px; }
.source .icon-tile svg { width: 18px; height: 18px; }
.source small { display: block; font-size: 12px; font-weight: 600; color: var(--ink-soft); }
.bento__docs { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.bento__docs .doc { font-size: 14px; }
@media (max-width: 520px) { .bento__docs { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .bento__docs .doc { font-size: 12.5px; } .bento__docs .doc:nth-child(3) { display: none; } .bento__docs .doc__icon { display: none; } .bento__docs .doc__title { overflow-wrap: normal; } }
/* Inside the roomy scenes, long role titles wrap instead of truncating */
.bento__media .app-pill__role, .mini .app-pill__role { white-space: normal; }
@media (min-width: 680px) and (max-width: 1023px) {
  .bento { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .bento__item--fit, .bento__item--docs { grid-column: 1 / -1; }
}
@media (min-width: 1024px) {
  .bento { grid-template-columns: repeat(12, minmax(0, 1fr)); }
  .bento__item--fit { grid-column: 1 / span 7; grid-row: 1 / span 2; }
  .bento__item--sources { grid-column: 8 / span 5; }
  .bento__item--track { grid-column: 8 / span 5; }
  .bento__item--docs { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); align-items: center; gap: var(--s-4xl); }
}

/* ---------- Legacy feature grid (still used on support) ---------- */
.grid { display: grid; gap: var(--s-xl); grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.grid > .card { height: 100%; }

/* ---------- Privacy band: a calm, wide well with the facts listed ---------- */
/* <div class="privacy-band"><span class="privacy-band__seal">svg</span><div><h2>…</h2><p>…</p></div><ul class="facts">…</ul></div> */
.privacy-band { display: grid; gap: var(--s-xxl); align-items: center; border-radius: var(--r-2xl); box-shadow: var(--inset-lg); padding: clamp(28px, 5vw, 64px); }
.privacy-band h2 { margin-bottom: var(--s-md); }
.privacy-band p { color: var(--ink-soft); margin: 0; font-size: var(--fs-lede); line-height: 1.5; max-width: 30rem; }
.privacy-band__seal { width: 88px; height: 88px; border-radius: 28px; box-shadow: var(--shadow-md); display: grid; place-items: center; color: var(--accent-text); }
.privacy-band__seal svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.facts li { display: flex; align-items: center; gap: 12px; min-height: 52px; padding: 8px 18px 8px 10px; border-radius: 18px; box-shadow: var(--shadow-sm); font-weight: 700; line-height: 1.3; }
.facts svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.facts .icon-tile { width: 36px; height: 36px; border-radius: 11px; margin: 0; }
@media (min-width: 960px) { .privacy-band { grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.9fr); gap: var(--s-xxxl); } }

/* Legacy: .privacy (icon tile beside a short statement in a .panel) */
.privacy { display: flex; gap: var(--s-xl); align-items: flex-start; }
.privacy .icon-tile { flex: none; margin-bottom: 0; }
.privacy h2 { font-size: 1.375rem; margin-bottom: var(--s-sm); }
.privacy p { margin: 0; color: var(--ink-soft); }
@media (max-width: 480px) { .privacy { flex-direction: column; gap: var(--s-lg); } }

/* ---------- FAQ: <details class="faq"><summary>Question</summary><div class="faq__body">…</div></details> ---------- */
.faq { background: var(--surface); border-radius: 20px; box-shadow: var(--shadow-sm); margin-bottom: var(--s-lg); transition: box-shadow 0.2s ease; }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg); min-height: 60px; padding: var(--s-md) var(--s-xl); font-weight: 700; font-size: 1.0625rem; cursor: pointer; list-style: none; border-radius: 20px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: ""; flex: none; width: 10px; height: 10px; border-right: 2.5px solid var(--ink-soft); border-bottom: 2.5px solid var(--ink-soft); transform: rotate(45deg); margin-top: -4px; transition: transform 0.2s ease; }
.faq[open] { box-shadow: var(--inset); }
.faq[open] summary::after { transform: rotate(-135deg); margin-top: 4px; }
.faq__body { padding: 0 var(--s-xl) var(--s-lg); color: var(--ink-soft); max-width: 68ch; }
.faq__body > :last-child { margin-bottom: 0; }

/* ---------- Legal prose ---------- */
.prose { max-width: 68ch; margin-inline: auto; padding-block: clamp(32px, 6vw, 72px); }
/* legal pages: .prose directly under a .page-head sits flush left, no extra top padding */
.page-head + .section .prose { margin-inline: 0; padding-top: 0; }
.prose h1 { font-size: var(--fs-display); line-height: 1.04; margin-bottom: var(--s-lg); }
.prose h2 { font-size: 1.5rem; line-height: 1.25; margin-top: var(--s-xxxl); letter-spacing: -0.02em; font-weight: 800; }
.prose h3 { margin-top: var(--s-xl); }
.prose ul, .prose ol { padding-left: 1.4em; margin: 0 0 var(--s-lg); }
.prose li { margin-bottom: var(--s-sm); }
.prose table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-lg); font-size: 0.9375rem; }
.prose th, .prose td { text-align: left; vertical-align: top; padding: var(--s-sm) var(--s-md); border-bottom: 1px solid var(--line); }
.prose-scroll { overflow-x: auto; }
.prose__meta { color: var(--ink-soft); font-size: var(--fs-small); }
.prose address { font-style: normal; }
.prose p, .prose li { color: var(--ink); }

/* ---------- Notice: draft / warning, attention role with icon + label ---------- */
.notice { display: flex; gap: var(--s-md); align-items: flex-start; background: var(--attention-tint); color: var(--ink); border: 1.5px solid var(--attention); border-radius: var(--r-md); padding: var(--s-lg); margin-block: var(--s-xl); }
.notice__icon { flex: none; width: 24px; height: 24px; fill: none; stroke: var(--attention); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.notice > div { min-width: 0; }
.notice__label { display: block; color: var(--attention); font-weight: 800; margin-bottom: var(--s-xs); }
.notice p { margin: 0 0 var(--s-sm); }
.notice > div > :last-child { margin-bottom: 0; }
.notice--info { background: var(--accent-tint); border-color: var(--accent-text); }
.notice--info .notice__icon { stroke: var(--accent-text); }
.notice--info .notice__label { color: var(--accent-text); }

/* ---------- Placeholder marker (visible on purpose; dashed outline + text, not colour alone) ---------- */
.todo { display: inline; padding: 1px 6px; border: 1.5px dashed var(--attention); border-radius: 6px; background: var(--attention-tint); color: var(--attention); font-weight: 700; overflow-wrap: anywhere; }

/* ---------- Legacy phone mockup (replaced on the landing by .stage/.device; kept for any old markup) ---------- */
.phone { width: min(300px, 100%); aspect-ratio: 9 / 12.5; margin-inline: auto; padding: 10px; border-radius: 44px; background: var(--ground); box-shadow: var(--shadow-lg); }
.phone__screen { height: 100%; border-radius: 34px; background: var(--ground); box-shadow: var(--inset); padding: 28px 16px 16px; display: flex; flex-direction: column; gap: var(--s-md); overflow: hidden; position: relative; }
.mock-row { background: var(--surface); border-radius: var(--r-md); box-shadow: var(--shadow-sm); padding: var(--s-md); display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.mock-title { font-weight: 700; font-size: 0.875rem; line-height: 1.3; }
.mock-meta { font-size: var(--fs-caption); color: var(--ink-soft); font-weight: 600; }
.mock-head { font-weight: 800; font-size: 1.125rem; letter-spacing: -0.02em; margin: 0 0 2px; }

/* ---------- Reveal (progressive): elements with [data-reveal] extrude once when scrolled into view.
   Only active when JS added .js to <html> and motion is allowed; otherwise everything is simply visible. ---------- */
@media (prefers-reduced-motion: no-preference) {
  .js [data-reveal] { opacity: 0; transform: translateY(16px); transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--i, 0) * 120ms); }
  .js [data-reveal].is-in { opacity: 1; transform: none; }
}

/* ======================================================================================================
   Landing scroll story (spec section 6). Order of sections: hero, hunt strip, story, bento, privacy, cta.
   Motion rules: transform and opacity only (plus the seal's stroke), nothing shifts layout, everything is visible
   without JS or support. Native path: CSS scroll-driven animations inside @supports. Fallback: ~40 lines of JS in
   index.html adds .js to <html> (only when there is no support and motion is allowed) and toggles .is-in / .is-on.
   Reduced motion: no parallax, no bar, no cross-fade; the four screens are shown statically inside the chapters.
   ====================================================================================================== */

/* ---------- Reading progress bar (top of the viewport, accent) ---------- */
.progress { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .progress { display: block; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 30; pointer-events: none; }
  .progress i { display: block; height: 100%; background: var(--accent); transform-origin: 0 50%; transform: scaleX(var(--p, 0)); }
}

/* ---------- The hunt today: three crossed-out chips, then an arrow into the story ---------- */
.hunt .container { display: flex; flex-direction: column; align-items: center; text-align: center; }
.hunt__title { font-size: clamp(1.625rem, 2.6vw + 0.9rem, 2.5rem); max-width: 24ch; margin-bottom: var(--s-xl); text-wrap: balance; }
.hunt__chips { list-style: none; margin: 0 0 var(--s-xl); padding: 0; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--s-md) var(--s-lg); }
/* The story intro is centred too, so hunt strip and heading read as one centred lead-in before the two-column story */
.story .section__head { margin-inline: auto; text-align: center; }
.story .section__head h2, .story .section__head p { text-wrap: balance; }
@media (max-width: 599px) { .mini { min-height: 0; padding: var(--s-lg); } .cross { min-height: 44px; padding: 0 18px; font-size: 0.9375rem; } }
.cross { position: relative; display: inline-flex; align-items: center; min-height: 48px; padding: 0 22px; border-radius: var(--r-pill); box-shadow: var(--inset-sm); color: var(--ink-soft); font-weight: 700; }
.cross::after { content: ""; position: absolute; left: 14px; right: 14px; top: 50%; height: 2px; margin-top: -1px; border-radius: 2px; background: var(--ink-soft); transform-origin: 0 50%; }
.hunt__next { display: inline-flex; align-items: center; gap: var(--s-md); min-height: var(--touch); color: var(--ink); font-weight: 700; text-decoration: none; border-radius: var(--r-md); }
.hunt__next .icon-tile { margin: 0; border-radius: 50%; }
.hunt__next:hover .icon-tile { box-shadow: var(--shadow-md); }

/* ---------- Scroll story: chapters + sticky phone ---------- */
.story__stage { display: none; }
.chapters { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(40px, 8vw, 72px); }
.chapter { display: grid; gap: var(--s-xl); min-width: 0; }
.chapter__text { max-width: 30rem; }
.chapter h3 { font-size: clamp(1.5rem, 1.2vw + 1.2rem, 2rem); line-height: 1.15; letter-spacing: -0.03em; font-weight: 800; margin-bottom: var(--s-md); }
.chapter p { color: var(--ink-soft); font-size: var(--fs-lede); line-height: 1.5; margin: 0; }
.chapter .icon-tile { margin-bottom: var(--s-lg); }
.mini__docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.mini__docs .doc { font-size: 12.5px; }
.mini .app-pill + .app-pill, .mini .app-pill + .track { margin-top: 0; }
/* Static layout (default, reduced motion, no support): text, then its own inline screen; two columns when wide */
@media (min-width: 900px) {
  .chapter { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: var(--s-4xl); }
  .chapters { gap: clamp(48px, 6vw, 88px); }
}
.device__sub { margin: -0.3em 0 0; font-size: 0.85em; font-weight: 600; color: var(--ink-soft); }

/* Sticky layout: wide screens with motion. The phone stays; the chapters scroll; each chapter is 60vh so the
   hand-over between two chapters is exactly the middle of the gap (the keyframe stops below rely on this). */
@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  .story__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: var(--s-4xl); align-items: start; }
  .chapters { grid-column: 1; grid-row: 1; gap: 0; padding-block: 8vh; }
  .chapter { grid-template-columns: minmax(0, 1fr); height: 60vh; min-height: 300px; align-content: center; }
  .chapter__mini { display: none; }
  .story__stage { display: block; grid-column: 2; grid-row: 1; position: sticky; top: max(84px, calc(50svh - var(--pw) * 1.046 + 28px)); --pw: min(310px, calc((100svh - 150px) * 0.478)); justify-self: center; }
  .story__phone { --phone-w: 100; width: var(--pw); container-type: inline-size; }
  .story__phone .device { position: relative; left: 0; top: 0; }
  .story__phone .device__screen::after { display: none; }
  .screens { position: relative; flex: 1; min-height: 0; }
  .screen { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 0.7em; opacity: 0; }
  .screen:first-child { opacity: 1; }
  .screen::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 9em; background: linear-gradient(to bottom, rgba(228, 232, 239, 0), var(--ground) 55%); pointer-events: none; }
  .screen .device__tabs { z-index: 1; }
  .screen .device__list { gap: 0.6em; }
  /* JS fallback: the active screen shows, the other chapters dim */
  .js .screen { transition: opacity 500ms ease; }
  .js .screen:first-child { opacity: 0; }
  .js .screen.is-on { opacity: 1; }
  .js .chapter { opacity: 0.3; transition: opacity 500ms ease; }
  .js .chapter.is-on { opacity: 1; }
}

/* ---------- Bento / closing call to action ---------- */
.cta { padding-block: clamp(48px, 7vw, 96px) 0; }
.cta__inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--s-xl); }
.cta__mark { --logo-size: 64px; }
.cta__line { font-size: clamp(2.5rem, 6.5vw + 0.5rem, 5rem); line-height: 1; letter-spacing: -0.05em; margin: 0; max-width: 12ch; }
.cta__actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: var(--s-lg) var(--s-xl); margin-top: var(--s-md); }
@media (max-width: 480px) { .cta__actions .btn { width: auto; } }
.site-footer { margin-top: clamp(48px, 7vw, 96px); }

/* ---------- Privacy seal: the stroke draws once ---------- */
.privacy-band__seal path { stroke-dasharray: 1 1; stroke-dashoffset: 0; }
@media (prefers-reduced-motion: no-preference) {
  .js .privacy-band__seal path { stroke-dashoffset: 1; transition: stroke-dashoffset 1100ms var(--ease-out); }
  .js .privacy-band__seal path + path { transition-delay: 700ms; }
  .js .privacy-band__seal.is-in path { stroke-dashoffset: 0; }
  /* strike-through draw for the hunt chips (fallback) */
  .js .cross::after { transform: scaleX(0); transition: transform 700ms var(--ease-out) 500ms; }
  .js .cross.is-in::after { transform: scaleX(1); }
}

/* ---------- Native path: scroll-driven animations ---------- */
@supports (animation-timeline: view()) and (timeline-scope: --a) {
  @media (prefers-reduced-motion: no-preference) {
    .progress i { transform: scaleX(0); animation: progress-grow linear both; animation-timeline: scroll(root); }
    @keyframes progress-grow { to { transform: scaleX(1); } }

    /* Hero: the floating cards drift at different speeds (<= 40px), the phone barely. Uses the `translate`
       property so it composes with the entrance animation on `transform`. */
    .device { animation: extrude 1100ms var(--ease-out) 150ms both, drift-device linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 700px; }
    .float--doc { animation: extrude-float 1000ms var(--ease-out) 650ms both, drift-doc linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 700px; }
    .float--role { animation: extrude-float 1000ms var(--ease-out) 850ms both, drift-role linear both; animation-timeline: auto, scroll(root); animation-range: normal, 0 700px; }
    .story__phone .device { animation: none; }
    @keyframes drift-device { to { translate: 0 12px; } }
    @keyframes drift-doc { to { translate: 0 -40px; } }
    @keyframes drift-role { to { translate: 0 -18px; } }

    /* Reveal on entry, staggered by --i (chips, bento, closing line, inline chapter screens) */
    [data-reveal] { animation: reveal-in linear both; animation-timeline: view(); animation-range: entry calc(var(--i, 0) * 7%) entry calc(60% + var(--i, 0) * 7%); }
    @keyframes reveal-in { from { opacity: 0; transform: translateY(24px); } }
    .cross { animation-range: entry calc(var(--i, 0) * 12%) entry calc(50% + var(--i, 0) * 12%); }
    .cross::after { animation: strike linear both; animation-timeline: view(); animation-range: entry calc(40% + var(--i, 0) * 12%) entry calc(100% + var(--i, 0) * 0%); }
    @keyframes strike { from { transform: scaleX(0); } }

    /* Privacy seal draws its stroke as it comes into view */
    .privacy-band__seal path { stroke-dashoffset: 1; animation: seal-draw linear both; animation-timeline: view(); animation-range: entry 20% cover 45%; }
    .privacy-band__seal path + path { animation-range: entry 60% cover 55%; }
    @keyframes seal-draw { to { stroke-dashoffset: 0; } }
  }
  @media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
    .story { timeline-scope: --ch1, --ch2, --ch3, --ch4; }
    .chapter:nth-child(1) { view-timeline: --ch1 block; }
    .chapter:nth-child(2) { view-timeline: --ch2 block; }
    .chapter:nth-child(3) { view-timeline: --ch3 block; }
    .chapter:nth-child(4) { view-timeline: --ch4 block; }
    /* Active chapter full opacity, the others dimmed; the matching screen cross-fades in. */
    .chapter { --lo: 0.3; }
    .screen { --lo: 0; }
    .chapter, .screen { animation-fill-mode: both; animation-timing-function: linear; animation-range: cover; }
    .chapter:nth-child(1) { animation-name: focus-first; animation-timeline: view(); }
    .chapter:nth-child(2) { animation-name: focus-mid; animation-timeline: view(); }
    .chapter:nth-child(3) { animation-name: focus-mid; animation-timeline: view(); }
    .chapter:nth-child(4) { animation-name: focus-last; animation-timeline: view(); }
    .screen:nth-child(1) { animation-name: focus-first; animation-timeline: --ch1; }
    .screen:nth-child(2) { animation-name: focus-mid; animation-timeline: --ch2; }
    .screen:nth-child(3) { animation-name: focus-mid; animation-timeline: --ch3; }
    .screen:nth-child(4) { animation-name: focus-last; animation-timeline: --ch4; }
    @keyframes focus-first { 0%, 64% { opacity: 1; } 73%, 100% { opacity: var(--lo); } }
    @keyframes focus-mid { 0%, 27% { opacity: var(--lo); } 36%, 64% { opacity: 1; } 73%, 100% { opacity: var(--lo); } }
    @keyframes focus-last { 0%, 27% { opacity: var(--lo); } 36%, 100% { opacity: 1; } }
  }
}

/* ---------- Motion: respects the user setting ---------- */
@media (prefers-reduced-motion: reduce) {
  /* the header edge animation is off, so give the sticky bar its ground directly (text must not run under it) */
  @media (min-width: 640px) { .site-header { background: rgba(228, 232, 239, 0.88); -webkit-backdrop-filter: saturate(1.2) blur(14px); backdrop-filter: saturate(1.2) blur(14px); } }
  *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; }
}

@media print {
  body { background: #fff; }
  .site-header, .site-footer { display: none; }
  .card, .panel, .faq, .privacy-band { box-shadow: none; border: 1px solid #999; }
  .js [data-reveal] { opacity: 1 !important; transform: none !important; }
}

/* Longer (German) footer labels: on narrow screens the two columns share the width and long words hyphenate. */
@media (max-width: 420px) {
  .footer-nav { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-lg); }
  .footer-nav a { hyphens: auto; -webkit-hyphens: auto; overflow-wrap: anywhere; }
}

/* Former inline style attributes, moved here so the site's CSP needs no 'unsafe-inline' (D-058). */
.i-0 { --i: 0; }
.i-1 { --i: 1; }
.i-2 { --i: 2; }
.i-3 { --i: 3; }
.min-0 { min-width: 0; }
.app-pill.fs-15 { font-size: 15px; }