/* ============================================================================
   site.css — component layer for the oomny website design system.
   Consumes the tokens from tokens.css + colours from theme.css. Because every
   rule reads CSS custom properties, dark mode is automatic: theme.css remaps
   the tokens under prefers-color-scheme / [data-theme] and this file follows.

   Two audiences of selectors:
     1. NEW design-system components (.hero-grid, .float-chip, .proof, …)
        — the professionalized hero/proof/manifesto compositions.
     2. EXISTING content-page classes (.steps, .benefit, .compare, .faq,
        .trust-list, .packet, .prose-page) used by the already-translated
        features/faq/support/privacy/terms pages — restyled in place so the
        whole multi-locale site is professionalized without rewriting content.

   Duplicated per site by design (monorepo rule forbids shared app code);
   sync-check.sh enforces these three CSS files stay identical to the template.

   2026-06 refinement pass: typography now reads the leading (--lh-*) and
   display-tracking tokens; the device frame got a refined titanium bezel, a
   floating camera pill, a glass reflection and the unified --shadow-3; chips
   are quieter (--shadow-2); cards/pricing read --radius-lg + --shadow-* so a
   brand's squareness/elevation cascades; motion reads --dur-* and adds a
   motion-safe "phone settles upright on hover". No colour added here (C4).
   ============================================================================ */

*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;font-family:var(--sans);font-size:var(--step-0);line-height:var(--lh-body);
  color:var(--text);background:var(--bg);
  -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
  transition:background var(--dur-2) var(--ease), color var(--dur-2) var(--ease)}
h1,h2,h3{font-family:var(--display);line-height:var(--lh-tight);letter-spacing:var(--display-tracking);margin:0;text-wrap:balance}
h1{font-size:var(--step-4);font-weight:680}
h2{font-size:var(--step-3);font-weight:660}
h3{font-size:var(--step-1);font-weight:640;letter-spacing:calc(var(--display-tracking) + .006em)}
p{margin:0}
a{color:inherit}
img{max-width:100%;height:auto}
:is(a,button,summary,input):focus-visible{outline:2px solid var(--accent-text);outline-offset:3px;border-radius:4px}

/* ---- shared shell: nav, wrap, buttons ---- */
.wrap{max-width:72rem;margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}
main{max-width:72rem;margin-inline:auto;padding-inline:clamp(1.1rem,4vw,2.5rem)}

.nav{display:flex;align-items:center;gap:1.4rem;padding-block:1.3rem;flex-wrap:wrap}
.nav .brand,.brand{display:inline-flex;align-items:center;gap:.55rem;font-weight:700;
  font-size:var(--step-1);font-family:var(--display);letter-spacing:-.02em;text-decoration:none;color:var(--text)}
.brand>img{width:30px;height:30px;border-radius:7px;object-fit:cover}
.brand .dot{width:1.6rem;height:1.6rem;border-radius:7px;background:var(--accent);display:grid;place-items:center;
  color:var(--accent-ink);font:800 .9rem/1 var(--sans)}
.nav nav{margin-left:auto;display:flex;gap:1.3rem;align-items:center;flex-wrap:wrap;
  font-size:var(--step--1);font-weight:560}
.nav nav a{text-decoration:none;color:var(--text-soft);transition:color .15s}
.nav nav a:hover{color:var(--text)}

/* ---- auto language switcher (build-time {{langSwitcher}}; <details>, no JS) ----
   Markup the build emits:
     <details class="lang"><summary>
        <span class="flag"><svg…NL…></span><span class="code">NL</span>
        <svg class="lang-caret" …chevron…></svg>
     </summary>
     <nav class="lang-menu" aria-label="Language">
        <a href="…" aria-current="page"><span class="flag">…</span><span class="lang-name">Nederlands</span></a>
        <a href="…"><span class="flag">…</span><span class="lang-name">English</span></a>
     </nav></details>
   Active language carries aria-current="page" (or class .current). Pure CSS popover. */
.lang{position:relative;display:inline-block;font-family:var(--sans)}
.lang>summary{display:inline-flex;align-items:center;gap:.5rem;cursor:pointer;list-style:none;
  padding:.5rem .72rem;border:1px solid var(--line);border-radius:var(--radius-pill);
  background:var(--surface);color:var(--text-soft);font-size:var(--step--1);font-weight:650;
  line-height:1;letter-spacing:.01em;user-select:none;
  transition:border-color var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out),
    background var(--dur-1) var(--ease-out),box-shadow var(--dur-1) var(--ease-out)}
.lang>summary::-webkit-details-marker{display:none}
.lang>summary::marker{content:""}
.lang>summary:hover{color:var(--text);border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  box-shadow:0 1px 2px rgba(0,0,0,.05)}
.lang>summary:focus-visible{outline:2px solid var(--accent-text);outline-offset:2px}
.lang[open]>summary{color:var(--text);border-color:color-mix(in srgb,var(--accent) 55%,var(--line));
  background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
.lang .code{text-transform:uppercase;letter-spacing:.05em}
.lang .flag{display:block;width:22px;height:15px;border-radius:3px;overflow:hidden;flex:0 0 auto;
  box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--text) 16%,transparent)}
.lang .flag svg,.lang .flag img{display:block;width:100%;height:100%;object-fit:cover}
.lang .lang-name{white-space:nowrap}
.lang-caret{width:12px;height:12px;margin-left:.08rem;color:var(--text-soft);flex:0 0 auto;
  transition:transform var(--dur-2) var(--ease)}
.lang[open] .lang-caret{transform:rotate(180deg)}
/* popover */
.lang-menu{position:absolute;top:calc(100% + 10px);right:0;z-index:40;min-width:13.5rem;
  display:flex;flex-direction:column;padding:.4rem;gap:2px;
  background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);
  box-shadow:var(--shadow-3);transform-origin:top right;animation:lang-pop .16s var(--ease)}
.lang-menu::before{content:"";position:absolute;top:-6px;right:20px;width:11px;height:11px;
  background:var(--surface);border-left:1px solid var(--line);border-top:1px solid var(--line);
  transform:rotate(45deg)}
@keyframes lang-pop{from{opacity:0;transform:translateY(-6px) scale(.985)}to{opacity:1;transform:none}}
.lang-menu a{position:relative;display:flex;align-items:center;gap:.65rem;padding:.6rem .7rem;
  border-radius:calc(var(--radius-sm) - 4px);text-decoration:none;color:var(--text-soft);
  font-size:var(--step--1);font-weight:560;white-space:nowrap;line-height:1.2;
  transition:background var(--dur-1) var(--ease-out),color var(--dur-1) var(--ease-out)}
.lang-menu a .lang-name{margin-right:auto}
.lang-menu a:hover,.lang-menu a:focus-visible{background:color-mix(in srgb,var(--accent) 11%,transparent);
  color:var(--text);outline:none}
/* current language — accent-tinted row + check */
.lang-menu a[aria-current="page"],.lang-menu a.current{color:var(--accent-text);font-weight:700;
  background:color-mix(in srgb,var(--accent) 9%,transparent)}
.lang-menu a[aria-current="page"]::after,.lang-menu a.current::after{content:"✓";
  color:var(--accent-text);font-weight:800;font-size:.95em;margin-left:.4rem}
@media (prefers-reduced-motion:reduce){.lang-caret,.lang-menu{animation:none;transition:none}}

.btn,.btn.primary{display:inline-flex;align-items:center;gap:.5rem;font:650 var(--step-0)/1 var(--sans);
  padding:.9rem 1.5rem;border-radius:var(--radius-pill);text-decoration:none;cursor:pointer;border:1px solid transparent;
  transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2), background var(--dur-2), border-color var(--dur-2)}
.btn-primary,.btn.primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 6px 22px -10px var(--accent)}
.btn-primary:hover,.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 30px -12px var(--accent)}
.btn-ghost,.btn:not(.primary){background:transparent;color:var(--text);border-color:var(--line)}
.btn-ghost:hover,.btn:not(.primary):hover{border-color:var(--accent-text);color:var(--accent-text)}

/* ---- hero (asymmetric: copy left, device/showcase right, halo atmosphere) ---- */
.hero{position:relative;padding:var(--sp-5) 0 var(--sp-6)}
.hero::before{content:"";position:absolute;inset:0;background:var(--halo);pointer-events:none;z-index:0}
.hero-grid{position:relative;z-index:1;display:grid;grid-template-columns:1.05fr .95fr;gap:var(--sp-5);align-items:center}
.eyebrow{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--step--1);font-weight:680;
  letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text);margin-bottom:var(--sp-3)}
.eyebrow::before{content:"";width:1.6rem;height:1px;background:var(--accent-text)}
.hero h1{margin-bottom:var(--sp-3);max-width:14ch}
.hero .lede,.hero .sub{font-size:var(--step-1);color:var(--text-soft);max-width:36ch;line-height:var(--lh-snug);margin-bottom:var(--sp-4)}
.hero-actions,.cta-row{display:flex;gap:.8rem;flex-wrap:wrap;align-items:center;position:relative;z-index:1}
.note,.hero .fine{font-size:var(--step--1);color:var(--text-soft);margin-top:var(--sp-3)}
.note b,.hero .fine b{color:var(--text);font-weight:650}

/* ---- device frame (real screenshot inside an iPhone shell) ---- */
.showcase{display:grid;place-items:center;position:relative}
.phone{width:min(290px,74%);aspect-ratio:1179/2556;border-radius:46px;padding:12px;
  background:linear-gradient(155deg,#45454c 0%,#202024 44%,#0d0d10 100%);
  box-shadow:var(--shadow-3), inset 0 0 0 1px rgba(255,255,255,.08), inset 0 1px 1px rgba(255,255,255,.20);
  position:relative;transform:rotate(var(--rot));transition:transform .45s var(--ease)}
.phone::after{content:"";position:absolute;top:24px;left:50%;transform:translateX(-50%);width:30%;height:20px;
  background:#050507;border-radius:999px;z-index:2;box-shadow:inset 0 0 0 1px rgba(255,255,255,.06)}
.phone img{width:100%;height:100%;object-fit:cover;object-position:top;border-radius:34px;display:block}
.phone .scrim{position:absolute;inset:12px;border-radius:34px;pointer-events:none;z-index:1;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.10);
  background:linear-gradient(135deg, rgba(255,255,255,.12) 0%, rgba(255,255,255,.02) 20%, transparent 40%)}

.float-chip{position:absolute;background:var(--chip-bg);border:1px solid var(--line);border-radius:var(--radius-sm);
  padding:.7rem .9rem;display:flex;gap:.6rem;align-items:center;font-size:var(--step--1);font-weight:600;
  box-shadow:var(--shadow-2), inset 0 1px 0 rgba(255,255,255,.05);white-space:nowrap;z-index:3}
.float-chip .ic{width:1.9rem;height:1.9rem;border-radius:8px;display:grid;place-items:center;flex:none;
  background:color-mix(in srgb,var(--accent) 16%,transparent);color:var(--accent-text);font-size:1rem}
.chip-a{top:-3%;left:-7%} .chip-b{bottom:8%;right:-8%}
.chip-b .ic{background:color-mix(in srgb,var(--verified,var(--accent)) 18%,transparent);color:var(--verified,var(--accent-text))}

/* dark mode: dim the (light) screenshot so it doesn't glare, and ring it */
[data-theme="dark"] .phone .scrim{background:linear-gradient(180deg,#0000 55%, #00000026);box-shadow:inset 0 0 0 1px #ffffff1f}
[data-theme="dark"] .phone img{filter:brightness(.95) contrast(.98)}
@media (prefers-color-scheme:dark){
  :root:not([data-theme]) .phone .scrim{background:linear-gradient(180deg,#0000 55%, #00000026);box-shadow:inset 0 0 0 1px #ffffff1f}
  :root:not([data-theme]) .phone img{filter:brightness(.95) contrast(.98)}
}

/* ---- trust strip ---- */
.strip{border-block:1px solid var(--line);background:var(--bg-2)}
.strip .wrap{display:flex;gap:var(--sp-4);flex-wrap:wrap;justify-content:space-between;padding-block:var(--sp-3)}
.strip .item{display:flex;gap:.6rem;align-items:center;font-size:var(--step--1);font-weight:600;color:var(--text-soft)}
.strip .item b{color:var(--text);font-weight:700}
.strip .item .ic{color:var(--accent-text)}

/* ---- sections + alternating feature rows ---- */
.section{padding:var(--sp-6) 0}
.section-head{max-width:var(--measure);margin-bottom:var(--sp-5)}
.section-head .eyebrow{margin-bottom:var(--sp-2)}
.section-head p{color:var(--text-soft);font-size:var(--step-1);line-height:1.45;margin-top:var(--sp-2)}
.frow{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-5);align-items:center;padding:var(--sp-4) 0}
.frow:nth-child(even) .fmedia{order:2}
.fbody h3{margin-bottom:var(--sp-2)}
.fbody p{color:var(--text-soft);margin-bottom:var(--sp-2)}
.fbody .more{color:var(--accent-text);font-weight:650;text-decoration:none;font-size:var(--step--1)}
.fmedia{aspect-ratio:4/3;border-radius:var(--radius);border:1px solid var(--line);
  background:linear-gradient(150deg,var(--surface),var(--bg-2));display:grid;place-items:center;position:relative;overflow:hidden}
.fmedia::before{content:"";position:absolute;inset:0;background:var(--halo);opacity:.7}
.fmedia .glyph{font-size:3.2rem;color:var(--accent-text);opacity:.85;position:relative}
/* feature row can hold a real product image instead of a glyph */
.fmedia img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top center}
.fmedia.contain{background:linear-gradient(150deg,var(--surface),var(--bg-2))}
.fmedia.contain img{object-fit:contain;padding:clamp(1rem,4%,2rem)}

/* ---- feature gallery: a row of product screenshots to highlight features ----
   App pages carry several screenshots; this frames each in a device shell with a
   caption. 3-up on desktop, a swipeable scroll-snap row on small screens. Reads
   tokens only → dark mode + per-brand radius/tilt come for free. */
.gallery{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-5);align-items:start;padding:var(--sp-4) 0}
.gallery figure{margin:0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--sp-3)}
.gallery .phone{width:100%;max-width:212px;transform:rotate(0deg)}
.gallery .phone::after{top:18px;height:15px;width:28%}
.gallery .phone .scrim,.gallery .phone img{border-radius:30px}
.gallery .phone .scrim{inset:10px}
.gallery figcaption{max-width:26ch}
.gallery figcaption b{display:block;font-family:var(--display);font-size:var(--step-0);font-weight:660;
  letter-spacing:var(--display-tracking);margin-bottom:.25rem;color:var(--text)}
.gallery figcaption span{font-size:var(--step--1);color:var(--text-soft);line-height:1.5}
@media (prefers-reduced-motion:no-preference){.gallery .phone{transition:transform .45s var(--ease)}.gallery figure:hover .phone{transform:translateY(-6px)}}
@media (max-width:820px){
  .gallery{grid-template-columns:none;grid-auto-flow:column;grid-auto-columns:min(74%,260px);
    overflow-x:auto;scroll-snap-type:x mandatory;scroll-padding:var(--sp-3);
    margin-inline:calc(-1*clamp(1.1rem,4vw,2.5rem));padding-inline:clamp(1.1rem,4vw,2.5rem);
    -webkit-overflow-scrolling:touch}
  .gallery figure{scroll-snap-align:center}
}

/* ---- existing content-page sections, restyled in place ---- */
/* how-it-works steps */
.how-it-works{padding:var(--sp-6) 0}
.how-it-works h2{margin-bottom:var(--sp-4)}
.steps{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-3)}
.steps li{display:flex;gap:var(--sp-2);align-items:flex-start;background:var(--surface);
  border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-3)}
.steps .step-num,.step-num{flex:none;width:2.1rem;height:2.1rem;border-radius:50%;display:grid;place-items:center;
  background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent-text);font-weight:750;margin-top:.1rem}
.steps strong,.steps li div strong{display:block;font-size:var(--step-1);font-family:var(--display);margin-bottom:.2rem}
.steps p,.steps li div p{color:var(--text-soft);margin:0}

/* benefit + compare + contrast cards */
.benefits,.compare-grid,.contrast-grid{display:grid;gap:var(--sp-3);padding:var(--sp-4) 0}
.benefits{grid-template-columns:repeat(3,1fr)}
.compare-grid{grid-template-columns:repeat(3,1fr)}
.contrast-grid{grid-template-columns:1fr 1fr}
.benefit,.compare-card,.contrast-card{background:var(--surface);border:1px solid var(--line);
  border-radius:var(--radius);padding:var(--sp-4)}
.benefit h2,.compare-card h3,.contrast-card h3{font-size:var(--step-1);margin-bottom:var(--sp-1);margin-top:0}
.benefit p,.compare-card p,.contrast-card p{color:var(--text-soft)}
.compare-card.us,.contrast-card.us{border-color:color-mix(in srgb,var(--accent) 42%,var(--line));
  background:linear-gradient(160deg,var(--surface),color-mix(in srgb,var(--accent) 5%,var(--surface)))}
.compare-card.them,.contrast-card.them{opacity:.82}
.compare-card.them h3,.contrast-card.them h3{color:var(--text-soft)}
.compare h2,.contrast h2,.packet h2,.trust h2,.pricing h2,.proof h2{margin-bottom:var(--sp-3)}

/* claim-packet demo (Kestrove content page) */
.packet-demo{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);margin:var(--sp-3) 0}
.packet-row{display:grid;grid-template-columns:1.4fr 1fr .7fr 1.1fr;gap:.6rem;padding:.7rem var(--sp-3);
  border-bottom:1px dashed var(--line);font-size:var(--step--1)}
.packet-row:last-child{border-bottom:0}
.packet-head{background:var(--bg-2);font-weight:700;text-transform:uppercase;letter-spacing:.04em;font-size:11px}

/* trust list */
.trust-list{list-style:none;padding:0;margin:0;display:grid;gap:var(--sp-2)}
.trust-list li{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:var(--sp-3);color:var(--text-soft)}
.trust-list strong{color:var(--text)}

/* verified card (Kestrove hero adjunct) */
.verified-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4)}
.verified-card .check{color:var(--verified);font-weight:750;font-size:var(--step-1);margin-bottom:var(--sp-1)}
.verified-card p{color:var(--text-soft)}

/* ---- manifesto block (oomny umbrella; replaces fake testimonials) ---- */
.manifesto{background:var(--bg-2);border-block:1px solid var(--line)}
.manifesto .wrap,.manifesto.legacy{padding-block:var(--sp-6)}
.manifesto .lead{font-family:var(--display);font-size:var(--step-2);line-height:1.3;max-width:26ch;
  letter-spacing:-.01em;margin-bottom:var(--sp-5)}
.manifesto .lead b{color:var(--accent-text);font-weight:inherit}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--sp-4)}
.principles>div{border-top:2px solid var(--accent);padding-top:var(--sp-2)}
.principles h4{font-family:var(--display);font-size:var(--step-1);margin:0 0 .4rem;font-weight:640;letter-spacing:-.01em}
.principles p{font-size:var(--step--1);color:var(--text-soft);line-height:1.55}

/* ---- proof bands (own-vs-rent / claim-packet) ---- */
.proof{background:var(--bg-2);border-block:1px solid var(--line)}
.proof .wrap{padding-block:var(--sp-6)}
.proof .lead{font-family:var(--display);font-size:var(--step-2);line-height:1.3;max-width:24ch;
  letter-spacing:-.01em;margin-bottom:var(--sp-4)}
.proof .lead b{color:var(--accent-text);font-weight:inherit}
.compare{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-3)}
.compare .col{border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4);background:var(--surface)}
.compare .col .lbl{font-size:11px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;display:block;margin-bottom:.6rem}
.compare .own{border-color:color-mix(in srgb,var(--accent) 42%,var(--line))}
.compare .own .lbl{color:var(--accent-text)}
.compare .own .amt{font-family:var(--display);font-size:var(--step-2);font-weight:700;letter-spacing:-.01em;margin-bottom:.4rem}
.compare .rent{opacity:.72}
.compare .rent .lbl{color:var(--text-soft)}
.compare .rent .amt{font-size:var(--step-2);font-weight:700;margin-bottom:.4rem;color:var(--text-soft)}
.compare p{font-size:var(--step--1);color:var(--text-soft);line-height:1.55}

/* claim-packet sample + calm states */
.kgrid{display:grid;grid-template-columns:1.15fr .85fr;gap:var(--sp-4);align-items:center}
.packet{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:var(--sp-4);
  box-shadow:var(--shadow-3)}
.packet .doc-h{display:flex;justify-content:space-between;align-items:baseline;border-bottom:1px solid var(--line);
  padding-bottom:.7rem;margin-bottom:.9rem}
.packet .doc-h b{font-size:var(--step-0);font-weight:700}
.packet .doc-h span{font-size:11px;color:var(--text-soft);font-weight:650;letter-spacing:.04em;text-transform:uppercase}
.packet .line{display:flex;justify-content:space-between;gap:1rem;font-size:var(--step--1);color:var(--text-soft);
  padding:.4rem 0;border-bottom:1px dashed var(--line)}
.packet .line b{color:var(--text);font-weight:600}
.packet .tot{display:flex;justify-content:space-between;margin-top:.9rem;font-weight:700;font-size:var(--step-0)}
.states{display:grid;gap:.7rem;align-content:center}
.state{display:inline-flex;align-items:center;gap:.55rem;font-size:var(--step-0);font-weight:600;color:var(--text);
  padding:.55rem .85rem;border-radius:10px;border:1px solid var(--line);background:var(--surface);width:fit-content}
.state i{font-style:normal;font-size:1.05em;line-height:1}
.state.amber i{color:var(--caution-text)}
.state.green i{color:var(--verified)}
.states .note{font-size:var(--step--1);color:var(--text-soft);margin-top:.3rem;max-width:34ch}

/* ---- pricing card ---- */
.price-wrap,.pricing{display:grid;place-items:center;padding:var(--sp-6) 0}
.price,.price-card{width:min(30rem,100%);background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);
  padding:var(--sp-5);text-align:center;position:relative;overflow:hidden;box-shadow:var(--shadow-3)}
.price::before{content:"";position:absolute;inset:0;background:var(--halo)}
.price>*{position:relative}
.price .amt{font-family:var(--display);font-size:var(--step-4);font-weight:700;letter-spacing:-.02em;margin:.3rem 0}
.price-card .price{font-family:var(--display);font-size:var(--step-3);font-weight:700;margin:.3rem 0;box-shadow:none;border:0;padding:0;width:auto;background:none}
.price-card .once{font-size:var(--step-1);color:var(--text-soft);font-weight:600}
.price .once{display:inline-block;font-size:11px;font-weight:750;letter-spacing:.08em;text-transform:uppercase;
  color:var(--accent-text);background:color-mix(in srgb,var(--accent) 14%,transparent);padding:.3rem .7rem;border-radius:99px}
.price ul{list-style:none;padding:0;margin:var(--sp-3) 0;display:grid;gap:.55rem;text-align:left}
.price li{display:flex;gap:.6rem;align-items:center;font-size:var(--step--1);color:var(--text-soft)}
.price li::before{content:"✓";color:var(--verified,var(--accent-text));font-weight:800}
.price-card p{color:var(--text-soft);margin-top:var(--sp-2)}

/* ---- FAQ (details/summary) ---- */
.faq{padding:var(--sp-6) 0;max-width:var(--measure);margin-inline:auto}
.faq h2{margin-bottom:var(--sp-3)}
.faq details{border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--surface);
  padding:var(--sp-2) var(--sp-3);margin-bottom:var(--sp-2)}
.faq summary{cursor:pointer;font-weight:650;font-size:var(--step-0);list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";float:right;color:var(--accent-text);font-weight:700}
.faq details[open] summary::after{content:"–"}
.faq details p{color:var(--text-soft);margin-top:var(--sp-2)}

/* ---- prose pages (privacy / terms / support) ---- */
.prose-page,.prose{max-width:var(--measure);margin-inline:auto;padding:var(--sp-5) 0 var(--sp-6)}
.prose-page h1,.prose h1{font-size:var(--step-3);margin-bottom:var(--sp-3)}
.prose-page h2,.prose h2{font-size:var(--step-1);margin-top:var(--sp-4);margin-bottom:var(--sp-1)}
.prose-page p,.prose-page li,.prose p,.prose li{color:var(--text-soft)}
.prose-page p:first-of-type,.prose p:first-of-type{color:var(--text)}
.prose-page ul,.prose-page ol,.prose ul,.prose ol{padding-left:1.4rem}
.prose-page li,.prose li{margin-bottom:.35rem}
.prose-page a,.prose a{color:var(--accent-text);text-underline-offset:3px}
.prose.center{text-align:center}
.fine{color:var(--text-soft);font-size:var(--step--1)}

/* ---- legal-identity (colofon / informatieplicht block, shared partial) ---- */
.legal-id{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1.2rem;
  margin:var(--sp-3) 0;font-size:var(--step--1)}
.legal-id dt{color:var(--text-soft);font-weight:600}
.legal-id dd{margin:0;color:var(--text)}
@media (max-width:520px){.legal-id{grid-template-columns:1fr;gap:.1rem .8rem}
  .legal-id dd{margin-bottom:.5rem}}

/* ---- app cards (umbrella portfolio grid) ---- */
.apps{display:grid;grid-template-columns:1fr 1fr;gap:var(--sp-4)}
.app-card{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:var(--surface);
  display:grid;grid-template-columns:auto 1fr;transition:transform .2s var(--ease), box-shadow .2s}
.app-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-3)}
.app-card .shot{width:156px;background:var(--bg-2);display:grid;place-items:center;padding:1.2rem;border-right:1px solid var(--line)}
.app-card .shot img{width:100%;border-radius:14px;box-shadow:0 14px 30px -18px #0008}
[data-theme="dark"] .app-card .shot img{filter:brightness(.95)}
@media (prefers-color-scheme:dark){:root:not([data-theme]) .app-card .shot img{filter:brightness(.95)}}
.app-card .meta{padding:var(--sp-4)}
.app-card .tag{font-size:10px;font-weight:750;letter-spacing:.06em;text-transform:uppercase;color:var(--accent-text)}
.app-card h3{margin:.4rem 0 .55rem;font-family:var(--display)}
.app-card p{font-size:var(--step--1);color:var(--text-soft);line-height:1.5;margin-bottom:.9rem}
.app-card .go{font-weight:650;color:var(--accent-text);text-decoration:none;font-size:var(--step--1)}

/* ---- footer ---- */
footer{border-top:1px solid var(--line);background:var(--bg-2);margin-top:var(--sp-5);
  padding:var(--sp-4) clamp(1.1rem,4vw,2.5rem)}
footer .inner{max-width:72rem;margin-inline:auto;
  display:flex;gap:var(--sp-3);flex-wrap:wrap;align-items:center;font-size:var(--step--1);color:var(--text-soft)}
footer .links{margin-left:auto;display:flex;gap:1.2rem}
.foot-brand{display:inline-flex;align-items:center;gap:.5rem;flex-wrap:wrap}
footer a{text-decoration:none;color:var(--text-soft)}
footer a:hover{color:var(--text)}
footer .fine{font-size:var(--step--1)}
.footer-mark,.oomny-link img{vertical-align:-3px;border-radius:4px}

/* ---- App Store badge slot ---- */
.badge-slot{text-align:center;padding:var(--sp-4) 0}
.store-badge{display:inline-block;padding:.75rem 1.5rem;border-radius:12px;background:var(--text);color:var(--bg);
  font-weight:650;text-decoration:none;border:none}
.store-badge.hidden{display:none}

/* ---- staggered load reveal (motion-safe) ---- */
@media (prefers-reduced-motion:no-preference){
  .reveal{opacity:0;transform:translateY(14px);animation:rise var(--dur-3) var(--ease) forwards}
  .reveal:nth-child(2){animation-delay:.08s}.reveal:nth-child(3){animation-delay:.16s}
  .d1{animation-delay:.05s}.d2{animation-delay:.13s}.d3{animation-delay:.21s}.d4{animation-delay:.29s}
  @keyframes rise{to{opacity:1;transform:none}}
  .btn{transition:transform var(--dur-1) var(--ease-out), box-shadow var(--dur-2), background var(--dur-2), border-color var(--dur-2)}
  .showcase:hover .phone{transform:rotate(calc(var(--rot) * .25))}
}

/* ---- Waitlist form (umbrella). Token-based; inherits the site's form look. ---- */
.waitlist{display:flex;flex-direction:column;gap:1rem;max-width:30rem;margin:1.5rem auto 0}
.waitlist .wl-field{display:flex;flex-direction:column;gap:.35rem;font-size:var(--step--1)}
.waitlist input,.waitlist select{padding:.7rem .8rem;border:1px solid var(--line);border-radius:8px;
  background:var(--surface,#fff);color:var(--text);font:inherit}
.waitlist .wl-consent{display:flex;gap:.6rem;align-items:flex-start;font-size:var(--step--1);
  color:var(--text-soft);line-height:1.45}
.waitlist .wl-consent input{margin-top:.2rem}
.waitlist .waitlist-msg{margin:.2rem 0 0;font-size:var(--step--1);color:var(--accent-text)}

/* ---- responsive ---- */
@media (max-width:820px){
  .hero-grid,.frow,.apps,.compare,.kgrid,.principles,.benefits,.compare-grid,.contrast-grid,.packet-row{grid-template-columns:1fr}
  .frow:nth-child(even) .fmedia{order:0}
  .showcase{margin-top:var(--sp-3)}
  .packet-head{display:none}
}