/* ══════════════════════════════════════════════════════════════════
   RapidValue marketing site — v2 "evidence-first journey"
   Design language: the site looks like the product's calmer sibling.
   One accent (product teal), night-teal dark bands, and a monospace
   "evidence voice" for everything that is a claim about reality
   (truth-bar, capture tags, URL bars, stats).
   Self-contained: system fonts only, no CDN, no trackers.
   ══════════════════════════════════════════════════════════════════ */

:root{
  --brand:#0d9488;          /* product teal — the only accent */
  --deep:#0f766e;
  --brand-pale:#e6f5f2;
  --brand-tint:#c9e9e3;
  --ink:#0e1b2c;            /* deep navy-slate text */
  --soft:#54677a;           /* muted slate, cool bias */
  --faint:#8194a6;
  --paper:#fcfdfd;          /* page ground */
  --panel:#f0f6f5;          /* teal-biased soft band */
  --line:#dfe8e7;
  --night:#08201d;          /* dark bands — near-black with teal bias */
  --night2:#0d312d;
  --night-line:rgba(148,220,208,.16);
  --night-text:#c7d8d4;
  --night-bright:#eef7f5;
  --mint:#7fe0cd;           /* mono voice on dark */
  --amber:#b45309;          /* "them" side only — never decorative */
  --font:-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --mono:ui-monospace,"SF Mono","Cascadia Code",Menlo,Consolas,monospace;
  /* v1 compat aliases (verbatim-ported blocks reference these) */
  --text:var(--ink); --text-soft:var(--soft); --ink-soft:var(--soft);
  --muted:var(--soft); --brand-deep:var(--deep);
}

*{ box-sizing:border-box; }
html{ scroll-behavior:smooth; scroll-padding-top:110px; }
body{ margin:0; font:17px/1.7 var(--font); color:var(--ink); background:var(--paper);
      -webkit-font-smoothing:antialiased; }
img{ max-width:100%; display:block; }
a{ color:var(--deep); }
.container{ max-width:1160px; margin:0 auto; padding:0 1.4rem; }
.blueprint-layer{ display:none; } /* v1 compat — v2 keeps grounds clean */

::selection{ background:var(--brand-tint); }

/* ── skip link (a11y: first focusable, visible only on focus) ──── */
.skip-link{ position:absolute; left:8px; top:-48px; z-index:200;
  background:var(--night); color:#fff; font:600 .9rem var(--font);
  padding:.6rem 1rem; border-radius:8px; text-decoration:none;
  transition:top .15s; }
.skip-link:focus{ top:8px; outline:2px solid var(--brand-bright, #2dd4bf); outline-offset:2px; }

/* ── truth bar ─────────────────────────────────────────────────── */
.truthbar{ background:var(--night); color:var(--mint); font:500 .72rem/1.5 var(--mono);
  text-align:center; padding:.5rem 1rem; letter-spacing:.02em; }
.truthbar b{ color:var(--night-bright); font-weight:600; }

/* ── nav ───────────────────────────────────────────────────────── */
nav.top{ position:sticky; top:0; z-index:50; background:rgba(252,253,253,.92);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
nav.top .container{ display:flex; align-items:center; gap:1.6rem; height:64px; }
.logo{ display:flex; align-items:center; gap:.55rem; text-decoration:none; margin-right:auto; }
.logo img{ width:28px; height:28px; }
.logo-text{ font-weight:800; font-size:1.08rem; letter-spacing:-.02em; color:var(--ink); }
.navlinks{ display:flex; align-items:center; gap:1.5rem; }
.navlinks a{ color:var(--ink); text-decoration:none; font-size:.92rem; font-weight:550; }
.navlinks a:hover{ color:var(--deep); }
.navlinks a.active{ color:var(--deep); }
.navlinks a.cta{ background:var(--night); color:#fff; padding:.5rem 1.05rem; border-radius:8px;
  font-weight:600; }
.navlinks a.cta:hover{ background:var(--night2); color:#fff; }
/* platform dropdown */
.nav-drop{ position:relative; }
.nav-drop > button{ background:none; border:0; cursor:pointer; font:550 .92rem var(--font);
  color:var(--ink); padding:0; display:inline-flex; align-items:center; gap:.3rem; }
.nav-drop > button::after{ content:"▾"; font-size:.7em; color:var(--soft); }
.nav-drop > button:hover{ color:var(--deep); }
.nav-drop .dd{ position:absolute; top:calc(100% + 10px); left:50%; transform:translateX(-50%);
  background:#fff; border:1px solid var(--line); border-radius:14px; padding:.7rem;
  box-shadow:0 30px 70px -25px rgba(8,32,29,.35); display:none;
  grid-template-columns:repeat(2, 250px); gap:.1rem .6rem; z-index:60;
  max-height:calc(100vh - 120px); overflow-y:auto; }
.nav-drop.open .dd{ display:grid; }
.nav-drop .dd::before{ content:""; position:absolute; top:-12px; left:0; right:0; height:12px; }
.nav-drop .dd a{ display:block; padding:.5rem .7rem; border-radius:8px; font-size:.88rem;
  color:var(--ink); text-decoration:none; }
.nav-drop .dd a:hover{ background:var(--brand-pale); color:var(--deep); }
.nav-drop .dd a small{ display:block; color:var(--soft); font-size:.76rem; margin-top:.1rem; }
.nav-drop .dd .dd-group{ grid-column:1/-1; font:700 .66rem var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--grp, var(--deep)); padding:.6rem .7rem .2rem;
  display:flex; align-items:center; gap:.5rem; }
.nav-drop .dd .dd-group::before{ content:""; width:8px; height:8px; border-radius:3px;
  background:var(--grp, var(--brand)); flex:none; }
.nav-drop .dd.dd-narrow{ grid-template-columns:280px; }
@media (max-width:860px){
  /* accordion: the group title IS the toggle — was display:contents, which made
     each inlined .dd a shrinkable flex item (content silently clipped) and hid
     the Platform/Solutions/Resources context entirely */
  .nav-drop{ display:block; position:static; flex:none; }
  .nav-drop > button{ display:flex; width:100%; align-items:center; justify-content:space-between;
    padding:.55rem 0; font-size:1rem; font-weight:650; color:var(--ink); }
  .nav-drop > button::after{ transition:transform .15s; }
  .nav-drop.open > button{ color:var(--deep); }
  .nav-drop.open > button::after{ transform:rotate(180deg); }
  .nav-drop .dd{ display:none; position:static; transform:none; border:0; box-shadow:none;
    background:transparent; padding:0 0 .5rem .2rem; max-height:none; overflow:visible; }
  .nav-drop.open .dd{ display:block; }
  .nav-drop .dd::before{ display:none; } /* desktop hover-bridge — eats taps when static */
}
.navlinks .lang{ font:700 .74rem var(--mono); letter-spacing:.08em; color:var(--soft);
  border:1px solid var(--line); border-radius:7px; padding:.34rem .55rem; }
.navlinks .lang:hover{ color:var(--deep); border-color:var(--brand-tint); background:var(--brand-pale); }
.nav-toggle{ display:none; background:none; border:0; cursor:pointer; padding:.4rem; color:var(--ink);
  min-width:44px; min-height:44px; align-items:center; justify-content:center; }
.nav-toggle svg{ width:24px; height:24px; fill:none; stroke:currentColor; stroke-width:2; }
@media (max-width:860px){
  .nav-toggle{ display:flex; order:9; }
  .navlinks{ display:none; position:absolute; top:64px; left:0; right:0; background:var(--paper);
    border-bottom:1px solid var(--line); flex-direction:column; align-items:stretch;
    padding:.8rem 1.4rem 1.2rem; gap:.2rem;
    /* an expanded accordion group can be taller than the screen — keep the
       panel scrollable (140px headroom covers nav + truth bar) */
    max-height:calc(100vh - 140px); max-height:calc(100dvh - 140px);
    overflow-y:auto; -webkit-overflow-scrolling:touch; }
  .navlinks a{ padding:.55rem 0; }
  /* direct destinations first, then the collapsed catalog groups; NL + CTA last */
  .navlinks > a{ order:-2; }
  .navlinks > a.lang{ order:8; align-self:flex-start; }
  .navlinks > a.cta{ order:9; text-align:center; margin:.4rem 0 0; }
  body.nav-open .navlinks{ display:flex; }
}

/* ── type ──────────────────────────────────────────────────────── */
h1,h2,h3,h4{ line-height:1.15; margin:0; text-wrap:balance; }
h1{ font-size:clamp(2.1rem,4.6vw,3.4rem); font-weight:800; letter-spacing:-.035em; }
h2{ font-size:clamp(1.55rem,3vw,2.2rem); font-weight:800; letter-spacing:-.028em; }
h3{ font-size:1.14rem; font-weight:700; letter-spacing:-.012em; }
p{ margin:.85rem 0 0; }
.lead{ color:var(--soft); font-size:1.08rem; max-width:46em; }
.kicker,.eyebrow{ font:600 .74rem/1 var(--mono); letter-spacing:.14em; text-transform:uppercase;
  color:var(--deep); margin:0 0 1rem; display:flex; align-items:center; gap:.5rem; }
.kicker::before,.eyebrow::before{ content:"▸"; color:var(--brand); }
.on-dark{ color:var(--mint); }
.accent{ color:var(--brand); }
.muted{ color:var(--soft); }
section{ padding:4.6rem 0; }
section.alt{ background:var(--panel); border-top:1px solid var(--line); border-bottom:1px solid var(--line); }
/* third band flavour: teal wash + faint blueprint grid — breaks up long light runs */
section.tint{ border-top:1px solid var(--line); border-bottom:1px solid var(--line);
  background:
    repeating-linear-gradient(0deg, rgba(13,148,136,.045) 0 1px, transparent 1px 56px),
    repeating-linear-gradient(90deg, rgba(13,148,136,.045) 0 1px, transparent 1px 56px),
    linear-gradient(180deg, #f2faf8, #e9f5f2); }
.section-head{ max-width:52em; margin-bottom:2.6rem; }
.product-tag{ display:inline-flex; align-items:center; gap:.5rem; font:600 .78rem var(--mono);
  color:var(--deep); background:var(--brand-pale); border:1px solid var(--brand-tint);
  border-radius:999px; padding:.35rem .9rem; margin-bottom:1.2rem; }

/* per-category hero accent (platform pages carry --cap inline) */
.hero-cat{ border-top:3px solid var(--cap); position:relative; overflow:hidden; }
.hero-cat::before{ content:""; position:absolute; top:-120px; right:-80px; width:420px; height:420px;
  border-radius:50%; background:radial-gradient(closest-side, color-mix(in srgb, var(--cap) 12%, transparent), transparent);
  pointer-events:none; }
.hero-cat .product-tag{ color:color-mix(in srgb, var(--cap) 72%, #000);
  background:color-mix(in srgb, var(--cap) 9%, #fff);
  border-color:color-mix(in srgb, var(--cap) 30%, #fff); }
.hero-cat h1 .accent{ color:var(--cap); }

/* ── buttons ───────────────────────────────────────────────────── */
.ctas{ display:flex; flex-wrap:wrap; gap:.8rem; margin-top:1.8rem; }
.btn{ display:inline-flex; align-items:center; gap:.5rem; font:600 .95rem var(--font);
  padding:.72rem 1.35rem; border-radius:9px; text-decoration:none; transition:.15s;
  border:1.5px solid transparent; }
.btn .ico{ width:17px; height:17px; fill:none; stroke:currentColor; stroke-width:2; }
/* AA contrast: white on --brand (#0d9488) is only 3.74:1; --deep (#0f766e) is 5.47:1 */
.btn-primary{ background:var(--deep); color:#fff; }
.btn-primary:hover{ background:#0b5f58; }
.btn-night{ background:var(--night); color:#fff; }
.btn-night:hover{ background:var(--night2); }
.btn-ghost{ border-color:var(--line); color:var(--ink); background:#fff; }
.btn-ghost:hover{ border-color:var(--brand); color:var(--deep); }
.btn-outline-d{ border-color:var(--night-line); color:var(--night-bright); }
.btn-outline-d:hover{ border-color:var(--mint); color:#fff; }

/* ── dark hero / bands ─────────────────────────────────────────── */
.band{ background:var(--night); color:var(--night-text); position:relative; overflow:hidden; }
.band h1,.band h2{ color:var(--night-bright); }
.band .lead{ color:var(--night-text); }
.band a:not(.btn){ color:var(--mint); }
.band.textured{ background:url("assets/tex-night.jpg") center/cover no-repeat, var(--night); }
.hero-light.textured{ background:url("assets/tex-paper.jpg") center/cover no-repeat, var(--panel); }
.hero{ padding:5.2rem 0 5.6rem; }
.hero .sub{ color:var(--night-text); font-size:1.13rem; max-width:40em; margin-top:1.3rem; }
.hero-grid{ display:grid; grid-template-columns:minmax(0,10fr) minmax(0,9fr); gap:3.4rem; align-items:center; }
@media (max-width:960px){ .hero-grid{ grid-template-columns:1fr; } }
.hero-points{ display:flex; flex-wrap:wrap; gap:.5rem 1.6rem; margin-top:1.9rem;
  font:500 .8rem var(--mono); color:var(--mint); }
.hero-points span::before{ content:"✓ "; color:var(--brand); }
.hero-light{ padding:4.6rem 0 3.6rem; background:var(--panel); border-bottom:1px solid var(--line); }
.hero-light .sub{ color:var(--soft); font-size:1.1rem; max-width:44em; margin-top:1.2rem; }

/* ── browser frame + evidence tag ──────────────────────────────── */
.frame{ background:#fff; border:1px solid var(--line); border-radius:12px; overflow:hidden;
  box-shadow:0 24px 60px -28px rgba(8,32,29,.35); }
.band .frame{ border-color:var(--night-line); box-shadow:0 30px 80px -30px rgba(0,0,0,.6); }
.frame-bar{ display:flex; align-items:center; gap:.45rem; padding:.55rem .9rem;
  background:var(--panel); border-bottom:1px solid var(--line); }
.frame-bar i{ width:9px; height:9px; border-radius:50%; background:var(--line); }
.frame-bar .url{ font:500 .72rem var(--mono); color:var(--soft); margin-left:.5rem;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.frame img{ cursor:zoom-in; width:100%; }
.evidence{ display:flex; align-items:center; gap:.55rem; font:500 .72rem var(--mono);
  color:var(--soft); padding:.55rem .2rem 0; }
.evidence::before{ content:""; width:7px; height:7px; border-radius:50%; background:var(--brand); flex:none; }
.band .evidence{ color:var(--mint); }
.shot-cap{ font-size:.9rem; color:var(--soft); margin-top:.5rem; max-width:38em; }

/* ── laptop device frame ───────────────────────────────────────── */
.laptop{ max-width:860px; }
.laptop .screen{ background:#0b1514; border:2px solid #223532; border-bottom:none;
  border-radius:14px 14px 0 0; padding:10px 10px 0; box-shadow:0 30px 70px -30px rgba(8,32,29,.45); }
.laptop .screen img{ border-radius:6px 6px 0 0; cursor:zoom-in; }
.laptop .base{ height:14px; background:linear-gradient(#31494533,#22353255), var(--panel);
  background:linear-gradient(180deg,#3a5450,#223532); border-radius:0 0 16px 16px; position:relative; }
.laptop .base::after{ content:""; position:absolute; left:50%; top:0; transform:translateX(-50%);
  width:120px; height:5px; border-radius:0 0 6px 6px; background:#16211f; }

/* ── photography ───────────────────────────────────────────────── */
.photo-card{ border-radius:16px; overflow:hidden; min-height:280px;
  box-shadow:0 24px 60px -28px rgba(8,32,29,.35); position:relative; }
.photo-card img{ width:100%; height:100%; object-fit:cover; position:absolute; inset:0;
  filter:grayscale(.55) sepia(.28) hue-rotate(125deg) saturate(1.15) contrast(1.02); }
.photo-card::after{ content:""; position:absolute; inset:0;
  background:linear-gradient(160deg, rgba(13,148,136,.18), rgba(8,32,29,.28));
  mix-blend-mode:multiply; pointer-events:none; }
.band.photo-cta{ background:linear-gradient(rgba(8,32,29,.9),rgba(8,32,29,.95)),
  url("assets/photos/cta-worksession.jpg") center/cover no-repeat, var(--night); }
.photo-slot{ position:relative; border-radius:16px; overflow:hidden; min-height:280px;
  background:url("assets/tex-night.jpg") center/cover no-repeat, var(--night);
  display:flex; align-items:flex-end; }
.photo-slot .ps-label{ margin:1rem; font:500 .74rem var(--mono); color:var(--mint);
  background:rgba(8,32,29,.72); border:1px solid var(--night-line); border-radius:8px;
  padding:.5rem .8rem; }

/* ── persona doors ─────────────────────────────────────────────── */
.doors{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:860px){ .doors{ grid-template-columns:1fr; } }
.door{ display:block; text-decoration:none; color:inherit; background:#fff;
  border:1px solid var(--line); border-radius:14px; padding:1.5rem 1.5rem 1.4rem; transition:.15s; }
.door:hover{ border-color:var(--brand); transform:translateY(-2px);
  box-shadow:0 16px 40px -24px rgba(8,32,29,.35); }
.door[style*="--cap"]{ border-top:3px solid color-mix(in srgb, var(--cap) 60%, #fff); }
.door-glyph{ display:inline-grid; place-items:center; width:38px; height:38px; border-radius:11px;
  color:var(--cap, var(--brand));
  background:color-mix(in srgb, var(--cap, var(--brand)) 9%, #fff);
  border:1px solid color-mix(in srgb, var(--cap, var(--brand)) 26%, #fff);
  margin-bottom:.7rem; }
.door-glyph svg{ width:21px; height:21px; }
.door .who{ font:600 .72rem var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:color-mix(in srgb, var(--cap, var(--brand)) 72%, #000); }
.door h3{ margin-top:.7rem; }
.door p{ color:var(--soft); font-size:.94rem; }
.door .go{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1rem;
  font:600 .86rem var(--font); color:var(--deep); }

/* ── journey (chapter spine) ───────────────────────────────────── */
.chapter{ display:grid; grid-template-columns:170px minmax(0,1fr); gap:2.6rem; padding:3.4rem 0; }
.chapter + .chapter{ border-top:1px dashed var(--line); }
@media (max-width:860px){ .chapter{ grid-template-columns:1fr; gap:1.2rem; padding:2.6rem 0; } }
.day{ position:sticky; top:96px; align-self:start; }
@media (max-width:860px){ .day{ position:static; } }
.day .d-when{ font:700 .78rem var(--mono); letter-spacing:.1em; text-transform:uppercase; color:var(--brand); }
.day .d-line{ width:2px; height:52px; background:linear-gradient(var(--brand-tint),transparent);
  margin:.9rem 0 0 .1rem; }
@media (max-width:860px){ .day .d-line{ display:none; } }
.chapter h2{ margin-bottom:.4rem; }
.chapter .lead{ font-size:1.02rem; }
.ch-shots{ margin-top:1.8rem; display:grid; gap:1.6rem; }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:1.6rem; align-items:start; }
@media (max-width:760px){ .duo{ grid-template-columns:1fr; } }
.ch-points{ margin:1.4rem 0 0; padding:0; list-style:none; display:grid; gap:.45rem;
  color:var(--soft); font-size:.95rem; }
.ch-points li{ padding-left:1.3rem; position:relative; }
.ch-points li::before{ content:"▸"; position:absolute; left:0; color:var(--brand); }

/* ── infographics ──────────────────────────────────────────────── */
.infographic{ background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:1.6rem 1.8rem 1.2rem; overflow-x:auto; }
section.alt .infographic{ background:var(--paper); }
.infographic svg{ display:block; width:100%; height:auto; min-width:640px; }
.ig-note{ font:500 .72rem var(--mono); color:var(--faint); margin-top:.8rem; }
.howcard svg{ display:block; width:100%; height:auto; margin-bottom:1rem; }
.howcard .go{ display:inline-flex; align-items:center; gap:.4rem; margin-top:.9rem;
  font:600 .86rem var(--font); color:var(--deep); text-decoration:none; }
.split{ display:grid; grid-template-columns:minmax(0,11fr) minmax(0,9fr); gap:2.6rem; align-items:center; }
@media (max-width:960px){ .split{ grid-template-columns:1fr; } }
.split .mini-feats{ display:grid; gap:1rem; }
.mini-feat h3{ display:flex; align-items:center; gap:.55rem; font-size:1.02rem; }
.mini-feat h3 .icon{ width:30px; height:30px; border-radius:8px; background:var(--brand-pale);
  border:1px solid var(--brand-tint); display:inline-flex; align-items:center;
  justify-content:center; font-size:.9rem; flex:none; }
.mini-feat p{ color:var(--soft); font-size:.93rem; margin-top:.35rem; }
.ch-more{ display:inline-flex; align-items:center; gap:.4rem; margin-top:1.1rem;
  font:600 .84rem var(--mono); color:var(--deep); text-decoration:none; }
.ch-more:hover{ text-decoration:underline; }

/* ── feature cards (v1 vocabulary, v2 treatment) ───────────────── */
.grid-2{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; }
.grid-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:860px){ .grid-2,.grid-3{ grid-template-columns:1fr; } }
.feature{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.5rem 1.6rem; }
section.alt .feature{ background:var(--paper); }
.feature h3{ display:flex; align-items:center; gap:.6rem; }
.feature h3 .icon{ width:34px; height:34px; border-radius:9px; background:var(--brand-pale);
  border:1px solid var(--brand-tint); display:inline-flex; align-items:center;
  justify-content:center; font-size:1rem; flex:none; }
.feature p{ color:var(--soft); font-size:.95rem; }
.feature a{ font-weight:600; }

/* ── honest strip ──────────────────────────────────────────────── */
.honest{ border:1px solid var(--line); border-left:4px solid var(--amber);
  border-radius:12px; background:#fffdf8; padding:1.6rem 1.8rem; }
.honest h3{ color:var(--ink); }
.honest p{ color:var(--soft); font-size:.95rem; }
.honest .h-grid{ display:grid; grid-template-columns:1fr 1fr; gap:.4rem 2rem; margin-top:1rem; }
@media (max-width:760px){ .honest .h-grid{ grid-template-columns:1fr; } }
.honest .h-grid span{ font-size:.92rem; color:var(--soft); padding-left:1.2rem; position:relative; }
.honest .h-grid span::before{ content:"—"; position:absolute; left:0; color:var(--amber); }

/* ── stats band ────────────────────────────────────────────────── */
.stat-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.4rem; margin-top:2.4rem; }
@media (max-width:860px){ .stat-grid{ grid-template-columns:1fr 1fr; } }
.stat{ border-left:2px solid var(--night-line); padding-left:1.2rem; }
.stat-num{ font:700 2.1rem/1.1 var(--mono); color:var(--mint); font-variant-numeric:tabular-nums;
  letter-spacing:-.03em; background:linear-gradient(115deg, var(--mint) 30%, #9ff5e3);
  -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.stat-label{ color:var(--night-text); font-size:.88rem; margin-top:.5rem; }
.stat-note{ margin-top:2rem; font:500 .82rem/1.5 var(--mono); color:var(--night-text); }
.stat-note a{ color:var(--mint); text-decoration:none; border-bottom:1px solid color-mix(in srgb, var(--mint) 45%, transparent); }
.stat-note a:hover{ border-bottom-color:var(--mint); }

/* ── infographic line-draw (elements tagged .dl by main.js) ────── */
.infographic.reveal .dl{ stroke-dasharray:1; stroke-dashoffset:1; }
.infographic.reveal.in .dl{ animation:drawline .9s ease .3s forwards; }
@keyframes drawline{ to{ stroke-dashoffset:0; } }
@media (prefers-reduced-motion: reduce){
  .infographic.reveal .dl{ stroke-dasharray:none; stroke-dashoffset:0; animation:none; }
}

/* ── journey (compact tabbed stepper) ──────────────────────────── */
.journey{ margin-top:2.6rem; }
.j-rail{ display:grid; grid-template-columns:repeat(4,1fr); gap:.8rem; }
@media (max-width:860px){ .j-rail{ grid-template-columns:1fr 1fr; } }
.j-step{ appearance:none; font:inherit; background:#fff; border:1px solid var(--line);
  border-top:3px solid var(--cap); border-radius:12px; padding:1rem 1rem .85rem;
  text-align:left; cursor:pointer; display:grid; gap:.15rem; position:relative;
  transition:transform .2s, box-shadow .2s, background .2s, border-color .2s; }
.j-step:hover{ transform:translateY(-2px); box-shadow:0 12px 26px -18px rgba(8,32,29,.4); }
.j-step.active{ background:color-mix(in srgb, var(--cap) 7%, #fff);
  border-color:color-mix(in srgb, var(--cap) 40%, #fff); border-top-color:var(--cap); }
.j-dot{ position:absolute; top:-14px; left:.9rem; width:24px; height:24px; border-radius:50%;
  background:var(--cap); color:#fff; font:700 .74rem var(--mono);
  display:grid; place-items:center; box-shadow:0 0 0 3px #fff; }
.j-when{ font:600 .68rem var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--cap); margin-top:.15rem; }
.j-title{ font-weight:650; font-size:1.02rem; color:var(--ink); }
.j-body{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:2.6rem;
  margin-top:2.2rem; align-items:start; }
@media (max-width:960px){ .j-body{ grid-template-columns:1fr; gap:1.6rem; } }
.j-copy{ display:none; }
.j-copy.active{ display:block; animation:fadeup .35s ease; }
.j-copy h3{ font-size:1.45rem; letter-spacing:-.02em; margin:0 0 .55rem; }
.j-copy h3::before{ content:""; display:inline-block; width:26px; height:4px; border-radius:2px;
  background:var(--cap); margin-right:.6rem; vertical-align:.35em; }
.j-copy p{ color:var(--soft); }
.j-copy .ch-points li::before{ color:var(--cap); }
.j-shot .laptop .screen img{ transition:opacity .25s ease; }
@keyframes fadeup{ from{ opacity:0; transform:translateY(8px); } }
@media (prefers-reduced-motion: reduce){ .j-copy.active{ animation:none; } }

/* ── comparison table ──────────────────────────────────────────── */
.compare{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:#fff; }
.compare table{ border-collapse:collapse; width:100%; min-width:640px; font-size:.92rem; }
.compare th,.compare td{ padding:.85rem 1.1rem; text-align:left; border-bottom:1px solid var(--line); }
.compare tr:last-child td{ border-bottom:0; }
.compare thead th{ font:600 .74rem var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--soft); background:var(--panel); }
.compare td:first-child{ font-weight:600; color:var(--ink); width:26%; }
.compare .them{ color:var(--soft); }
.compare .us{ color:var(--ink); }
.cmp-mark{ display:inline-flex; align-items:flex-start; gap:.45rem; }
.cmp-mark svg{ width:15px; height:15px; flex:none; margin-top:.2rem; }
.cmp-mark.no svg{ color:var(--amber); }
.cmp-mark.yes svg{ color:var(--brand); }

/* security compare (agent vs VPN) */
.sec-compare{ overflow-x:auto; border:1px solid var(--line); border-radius:12px; background:#fff; }
.sec-compare table{ border-collapse:collapse; width:100%; min-width:760px; font-size:.88rem; }
.sec-compare th,.sec-compare td{ padding:.95rem 1.1rem; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--line); }
.sec-compare tr:last-child td{ border-bottom:0; }
.sec-compare thead th{ font:600 .74rem var(--mono); letter-spacing:.1em; text-transform:uppercase;
  color:var(--soft); background:var(--panel); }
.sec-compare td:first-child{ font-weight:600; width:18%; }
.sec-compare .col-vpn{ color:var(--soft); width:41%; }
.sec-compare .col-rv{ color:var(--ink); width:41%; }
.verdict-vpn,.verdict-rv{ font:600 .72rem var(--mono); letter-spacing:.06em; text-transform:uppercase;
  display:inline-block; margin-bottom:.3rem; padding:.15rem .5rem; border-radius:5px; }
.verdict-vpn{ color:var(--amber); background:#fdf3e7; }
.verdict-rv{ color:var(--deep); background:var(--brand-pale); }
.sec-compare code, .feature code, .faq-a code{ font:500 .84em var(--mono); background:var(--panel);
  border:1px solid var(--line); border-radius:5px; padding:.06em .35em; }

/* ── architecture block ────────────────────────────────────────── */
.arch-block{ display:grid; grid-template-columns:1fr auto 1fr; gap:1.4rem; align-items:stretch;
  margin-top:2.2rem; }
@media (max-width:860px){ .arch-block{ grid-template-columns:1fr; } }
.arch-side{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.4rem 1.6rem; }
.arch-side h4, .arch-side h3{ font-size:1rem; margin-bottom:.6rem; }
.arch-side ul{ margin:.6rem 0 0; padding-left:1.15rem; color:var(--soft); font-size:.92rem;
  line-height:1.85; }
.arch-arrow{ display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:.3rem; color:var(--deep); font:600 .72rem var(--mono); }
.arch-arrow .symbol{ font-size:1.6rem; }
@media (max-width:860px){ .arch-arrow{ flex-direction:row; } }

/* ── deploy cards ──────────────────────────────────────────────── */
.deploy-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; margin-top:2.2rem; }
@media (max-width:1020px){ .deploy-grid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .deploy-grid{ grid-template-columns:1fr; } }
.deploy-card{ background:#fff; border:1px solid var(--line); border-radius:14px;
  padding:1.4rem 1.4rem 1.3rem; position:relative; }
.deploy-card.highlight{ border-color:var(--brand-tint); background:linear-gradient(180deg,#fff, var(--brand-pale)); }
.deploy-badge{ position:absolute; top:1.1rem; right:1.1rem; font:600 .62rem var(--mono);
  letter-spacing:.08em; text-transform:uppercase; color:var(--deep); background:var(--brand-pale);
  border:1px solid var(--brand-tint); padding:.16rem .5rem; border-radius:999px; }
.deploy-badge.soon{ color:var(--soft); background:var(--panel); border-color:var(--line); }
.deploy-card .d-ico,.deploy-card .deploy-icon{ font-size:1.3rem; display:inline-block; margin-bottom:.5rem; }
.deploy-card h4, .deploy-card h3{ font-size:1.02rem; }
.deploy-sub{ font:500 .72rem var(--mono); color:var(--deep); margin-top:.25rem; }
.deploy-desc{ color:var(--soft); font-size:.9rem; }
.deploy-tag{ font-size:.78rem; color:var(--faint); margin-top:.7rem; border-top:1px dashed var(--line);
  padding-top:.6rem; }
.d-ico .ico{ width:22px; height:22px; fill:none; stroke:var(--deep); stroke-width:1.8; }

/* callout + byov + guarantee */
.callout,.agent-guarantee{ display:flex; gap:1.1rem; margin-top:2rem; background:var(--night);
  color:var(--night-text); border-radius:14px; padding:1.6rem 1.8rem; }
.callout h4,.agent-guarantee h4,.callout h3,.agent-guarantee h3{ color:var(--night-bright); font-size:1.05rem; }
.callout p,.agent-guarantee p{ font-size:.93rem; margin-top:.5rem; }
.callout a,.agent-guarantee a{ color:var(--mint); }
.callout .c-ico .ico{ width:26px; height:26px; fill:none; stroke:var(--mint); stroke-width:1.8; }
.agent-guarantee .ag-icon{ font-size:1.4rem; }
.byov{ margin-top:2rem; border:1px dashed var(--brand-tint); border-radius:14px;
  padding:1.4rem 1.7rem; background:var(--brand-pale); }
.byov p{ color:var(--soft); font-size:.95rem; max-width:46em; }
.chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin-top:.9rem; }
.chip{ font:500 .78rem var(--mono); background:#fff; border:1px solid var(--brand-tint);
  color:var(--deep); border-radius:999px; padding:.32rem .8rem; }

/* ── team ──────────────────────────────────────────────────────── */
.team-grid{ display:grid; grid-template-columns:1fr 1fr; gap:1.1rem; margin-top:2rem; }
@media (max-width:860px){ .team-grid{ grid-template-columns:1fr; } }
.team-card{ display:flex; gap:1.2rem; background:#fff; border:1px solid var(--line);
  border-radius:14px; padding:1.5rem 1.6rem; }
.team-avatar{ width:52px; height:52px; border-radius:12px; background:var(--night); color:var(--mint);
  font:700 1rem var(--mono); display:flex; align-items:center; justify-content:center; flex:none; }
.team-photo{ width:96px; height:120px; border-radius:14px; object-fit:cover; flex:none;
  box-shadow:0 14px 34px -16px rgba(8,32,29,.4); }
.founder-duo{ display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.founder-duo figure{ margin:0; }
.founder-duo img{ width:100%; aspect-ratio:4/5; object-fit:cover; border-radius:16px;
  box-shadow:0 24px 60px -28px rgba(8,32,29,.35); }
.founder-duo figcaption{ font:500 .74rem var(--mono); color:var(--soft); margin-top:.55rem; }
.team-info h3{ font-size:1.08rem; }
.team-role{ font:600 .74rem var(--mono); color:var(--deep); margin-top:.2rem; }
.team-info p{ color:var(--soft); font-size:.92rem; }
.team-tags{ display:flex; flex-wrap:wrap; gap:.4rem; margin-top:.8rem; }
.team-tags span{ font:500 .72rem var(--mono); background:var(--panel); border:1px solid var(--line);
  border-radius:999px; padding:.2rem .6rem; color:var(--soft); }

/* ── CTA / getbox ──────────────────────────────────────────────── */
.cta-final{ text-align:center; padding:5.4rem 0; }
.cta-final .lead{ margin-left:auto; margin-right:auto; }
.getbox{ max-width:640px; margin:2.4rem auto 0; text-align:left; background:var(--night2);
  border:1px solid var(--night-line); border-radius:16px; padding:1.8rem 2rem; }
.getbox h3{ color:var(--night-bright); font-size:1.02rem; }
.getlist{ display:grid; gap:.55rem; margin-top:1.1rem; font-size:.93rem; }
.getlist div{ display:flex; gap:.6rem; align-items:flex-start; }
.getlist svg{ width:16px; height:16px; color:var(--brand); flex:none; margin-top:.25rem; }
.fine{ font-size:.82rem; color:var(--night-text); border-top:1px dashed var(--night-line);
  padding-top:1rem; margin-top:1.3rem; }
.cta-note{ font-size:.85rem; color:var(--night-text); margin-top:2rem; }
.cta-note a{ color:var(--mint); }

/* ── tour chapters (interactive showcase) ──────────────────────── */
.tour-chapter{ display:grid; grid-template-columns:minmax(0,5fr) minmax(0,7fr); gap:3rem;
  align-items:start; }
.tour-chapter.rev{ grid-template-columns:minmax(0,7fr) minmax(0,5fr); }
.tour-chapter.rev .tc-copy{ order:2; }
.tour-chapter.rev .stage{ order:1; }
@media (max-width:960px){
  .tour-chapter, .tour-chapter.rev{ grid-template-columns:1fr; }
  .tour-chapter.rev .tc-copy{ order:1; } .tour-chapter.rev .stage{ order:2; }
}
.tc-num{ font:700 .78rem var(--mono); letter-spacing:.12em; color:var(--cap, var(--brand));
  text-transform:uppercase; }
.tc-num::before{ content:""; display:inline-block; width:22px; height:4px; border-radius:2px;
  background:var(--cap, var(--brand)); margin-right:.55rem; vertical-align:.18em; }
section[style*="--cap"] .ch-points li::before{ color:var(--cap); }
.stage .thumbs{ display:flex; flex-wrap:wrap; gap:.45rem; margin-top:.9rem; }
.thumb{ font:600 .78rem var(--mono); color:var(--soft); background:#fff;
  border:1px solid var(--line); border-radius:999px; padding:.4rem .95rem; cursor:pointer;
  transition:.13s; display:inline-flex; align-items:center; min-height:44px; }
.thumb:hover{ color:var(--deep); border-color:color-mix(in srgb, var(--cap, var(--brand)) 40%, #fff); }
.thumb.active{ color:color-mix(in srgb, var(--cap, var(--brand)) 68%, #000);
  background:color-mix(in srgb, var(--cap, var(--brand)) 9%, #fff);
  border-color:var(--cap, var(--brand)); }
section.alt .thumb{ background:var(--paper); }

/* ── tour chapter nav ──────────────────────────────────────────── */
.tournav{ position:sticky; top:64px; z-index:40; background:rgba(252,253,253,.94);
  backdrop-filter:blur(10px); border-bottom:1px solid var(--line); }
.tournav .container{ display:flex; gap:.4rem; overflow-x:auto; padding-top:.55rem; padding-bottom:.55rem; }
.tournav a{ font:600 .8rem var(--mono); color:var(--soft); text-decoration:none; white-space:nowrap;
  padding:.4rem .85rem; border-radius:999px; border:1px solid transparent; }
.tournav a:hover{ color:var(--deep); }
.tournav a.active{ color:color-mix(in srgb, var(--cap, var(--brand)) 68%, #000);
  background:color-mix(in srgb, var(--cap, var(--brand)) 9%, #fff);
  border-color:color-mix(in srgb, var(--cap, var(--brand)) 45%, #fff); }

/* ── highlight box (faq compat) ────────────────────────────────── */
.highlight-box{ background:var(--brand-pale); border:1px solid var(--brand-tint);
  border-radius:10px; padding:.9rem 1.1rem; margin-top:1rem; font-size:.92rem; color:var(--ink); }

/* ── footer ────────────────────────────────────────────────────── */
footer{ background:var(--night); color:var(--night-text); padding:3.6rem 0 2rem; margin-top:0; }
.footer-grid{ display:grid; grid-template-columns:2fr 1fr 1fr 1fr; gap:2.4rem; }
@media (max-width:860px){ .footer-grid{ grid-template-columns:1fr 1fr; } }
.footer-brand .logo-text{ color:#fff; }
.footer-brand p{ font-size:.88rem; max-width:26em; }
.footer-col h5, .footer-col .footer-h{ font:600 .72rem var(--mono); letter-spacing:.12em;
  text-transform:uppercase; color:var(--mint); margin:0 0 .9rem; }
.footer-col a{ display:flex; align-items:center; color:var(--night-text); text-decoration:none;
  font-size:.9rem; min-height:44px; padding:.15rem 0; }
.footer-col a:hover{ color:#fff; }
.footer-bot{ display:flex; flex-wrap:wrap; gap:.6rem 2rem; justify-content:space-between;
  border-top:1px solid var(--night-line); margin-top:2.6rem; padding-top:1.4rem;
  font-size:.8rem; color:var(--night-text); }
.footer-bot .mono{ font-family:var(--mono); font-size:.74rem; }
.footer-bot a{ color:var(--night-text); }

/* ── lightbox ──────────────────────────────────────────────────── */
.sc-lightbox{ position:fixed; inset:0; z-index:100; background:rgba(8,32,29,.9); display:none;
  align-items:center; justify-content:center; padding:2.5rem; cursor:zoom-out; }
.sc-lightbox.open{ display:flex; }
.sc-lightbox img{ max-width:min(1400px,95vw); max-height:92vh; border-radius:10px;
  box-shadow:0 40px 120px rgba(0,0,0,.6); }
.sc-lightbox-close{ position:absolute; top:1.2rem; right:1.6rem; background:none; border:0;
  color:#fff; font-size:1.6rem; cursor:pointer; }

/* ── day-one log terminal (hero) ───────────────────────────────── */
.term{ background:#04100e; border:1px solid var(--night-line); border-radius:14px;
  overflow:hidden; box-shadow:0 30px 80px -30px rgba(0,0,0,.65); }
.term-bar{ display:flex; align-items:center; gap:.45rem; padding:.6rem 1rem;
  background:rgba(255,255,255,.04); border-bottom:1px solid var(--night-line);
  font:600 .72rem var(--mono); color:var(--night-text); letter-spacing:.08em; }
.term-bar i{ width:9px; height:9px; border-radius:50%; background:var(--night-line); }
.term-bar span{ margin-left:.4rem; }
.term pre{ margin:0; padding:1.1rem 1.2rem 1.3rem; font:500 .82rem/1.9 var(--mono);
  color:var(--night-text); white-space:pre-wrap; min-height:15.5em; }
.term .t-time{ color:#5f7a75; }
.term .t-ok{ color:var(--mint); }
.term .t-warn{ color:#e8b96a; }
.term .t-cursor{ display:inline-block; width:8px; height:1.05em; vertical-align:text-bottom;
  background:var(--mint); animation:blink 1s steps(1) infinite; }
@keyframes blink{ 50%{ opacity:0; } }

/* ── scroll reveals ────────────────────────────────────────────── */
.reveal{ opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease; }
.reveal.in{ opacity:1; transform:none; }

/* hero headline stagger */
.hero h1 .hl{ display:block; opacity:0; transform:translateY(14px);
  animation:hl-in .6s ease forwards; }
.hero h1 .hl:nth-child(2){ animation-delay:.18s; }
.hero h1 .hl:nth-child(3){ animation-delay:.36s; }
@keyframes hl-in{ to{ opacity:1; transform:none; } }

/* micro-interactions */
.frame img, .laptop .screen img{ transition:transform .35s ease; }
.frame:hover img, .laptop:hover .screen img{ transform:scale(1.015); }
.btn-primary{ box-shadow:0 0 0 0 rgba(13,148,136,.45); }
.btn-primary:hover{ box-shadow:0 8px 26px -8px rgba(13,148,136,.65); }
.stage .frame img{ transition:opacity .28s ease, transform .35s ease; }

/* ── capability grid + IAM landscape ───────────────────────────── */
.capgrid{ display:grid; grid-template-columns:repeat(4,1fr); gap:1.1rem; }
@media (max-width:1020px){ .capgrid{ grid-template-columns:1fr 1fr; } }
@media (max-width:600px){ .capgrid{ grid-template-columns:1fr; } }
.capcol{ background:#fff; border:1px solid var(--line); border-radius:14px; padding:1.3rem 1.4rem;
  border-top:3px solid var(--cap, var(--brand)); transition:transform .25s, box-shadow .25s; }
.capcol:hover{ transform:translateY(-2px); box-shadow:0 10px 26px -18px rgba(8,32,29,.45); }
/* category hues — information-encoding accents, one per capability family */
.capcol.c-connect{ --cap:#0d9488; }  /* teal   — onboard & connect */
.capcol.c-see{     --cap:#3b6fd4; }  /* blue   — see & analyse */
.capcol.c-govern{  --cap:#7250c4; }  /* violet — govern & automate */
.capcol.c-prove{   --cap:#b45309; }  /* amber  — prove & comply */
.capcol h4, .capcol h3{ font:600 .74rem var(--mono); letter-spacing:.12em; text-transform:uppercase;
  color:var(--cap, var(--deep)); margin:0 0 .8rem; display:flex; align-items:center; gap:.55rem; }
.cap-glyph{ width:20px; height:20px; flex:none; color:var(--cap, var(--brand));
  background:color-mix(in srgb, var(--cap, var(--brand)) 10%, #fff);
  border:1px solid color-mix(in srgb, var(--cap, var(--brand)) 28%, #fff);
  border-radius:7px; padding:3px; box-sizing:content-box; }
.capcol a{ display:block; font-size:.9rem; color:var(--ink); text-decoration:none;
  padding:.42rem 0 .42rem 1.2rem; position:relative; border-top:1px dashed var(--line); }
.capcol a:first-of-type{ border-top:0; }
.capcol a::before{ content:"▸"; position:absolute; left:0; color:var(--cap, var(--brand)); }
.capcol a:hover{ color:var(--deep); }
.domains{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.1rem; }
@media (max-width:960px){ .domains{ grid-template-columns:1fr; } }
.domain{ border-radius:14px; padding:1.3rem 1.4rem; border:1px solid var(--line); background:#fff; }
.domain h4, .domain h3{ font-size:1rem; margin-top:.6rem; }
.domain p{ color:var(--soft); font-size:.9rem; }
.d-tag{ font:700 .68rem var(--mono); letter-spacing:.08em; text-transform:uppercase;
  border-radius:999px; padding:.22rem .65rem; display:inline-block; }
.domain.core{ border-color:var(--brand); background:linear-gradient(180deg,#fff,var(--brand-pale)); }
.domain.core .d-tag{ background:var(--brand); color:#fff; }
.domain.partial .d-tag{ background:var(--brand-pale); color:var(--deep); border:1px solid var(--brand-tint); }
.domain.integrates .d-tag{ background:var(--panel); color:var(--soft); border:1px solid var(--line); }
.domain.out{ background:var(--paper); }
.domain.out .d-tag{ background:transparent; color:var(--faint); border:1px dashed var(--line); }
.domain.out h4, .domain.out h3, .domain.out p{ color:var(--soft); }

/* ── walkthrough player (try.html) ─────────────────────────────── */
.wt-tabs{ display:flex; flex-wrap:wrap; gap:.5rem; margin:1.6rem 0 1.4rem; }
.wt-stage{ position:relative; }
.wt-stage .frame{ user-select:none; }
.wt-stage .frame img{ cursor:default; }
.hs{ position:absolute; transform:translate(-50%,-50%); background:none; border:0;
  cursor:pointer; z-index:5; display:flex; align-items:center; gap:.5rem; padding:0;
  min-width:44px; min-height:44px; }
.hs-ring{ width:18px; height:18px; border-radius:50%; background:var(--cap, var(--brand));
  box-shadow:0 0 0 4px rgba(13,148,136,.25); position:relative; flex:none; }
.hs-ring::after{ content:""; position:absolute; inset:-6px; border-radius:50%;
  border:2px solid var(--brand); animation:hs-pulse 1.6s ease-out infinite; }
@keyframes hs-pulse{ 0%{ transform:scale(.6); opacity:.9; } 100%{ transform:scale(1.6); opacity:0; } }
.hs-tip{ font:600 .78rem var(--mono); color:#fff; background:var(--night);
  border:1px solid var(--night-line); border-radius:999px; padding:.35rem .8rem;
  white-space:nowrap; box-shadow:0 10px 30px -10px rgba(8,32,29,.5); }
.hs:hover .hs-tip{ background:var(--deep); }
.wt-bar{ display:flex; align-items:center; gap:1.2rem; flex-wrap:wrap;
  background:#fff; border:1px solid var(--line); border-radius:12px;
  padding:.9rem 1.2rem; margin-top:1rem; }
.wt-step{ font:700 .78rem var(--mono); color:var(--deep); white-space:nowrap; }
.wt-nar{ flex:1 1 320px; font-size:.95rem; color:var(--ink); margin:0; }
.wt-nav{ display:flex; gap:.5rem; margin-left:auto; }
.wt-nav button{ font:600 .85rem var(--font); border:1.5px solid var(--line);
  background:#fff; color:var(--ink); border-radius:8px; padding:.5rem 1.05rem; cursor:pointer;
  min-height:44px; }
.wt-nav button:hover{ border-color:var(--brand); color:var(--deep); }
.wt-nav button.primary{ background:var(--deep); border-color:var(--deep); color:#fff; }
.wt-nav button.primary:hover{ background:#0b5f58; border-color:#0b5f58; }
.wt-nav button:disabled{ opacity:.4; cursor:default; }
.wt-dots{ display:flex; gap:.4rem; }
.wt-dots i{ width:8px; height:8px; border-radius:50%; background:var(--line); transition:.2s; }
.wt-dots i.on{ background:var(--cap, var(--brand)); }

/* motion discipline */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior:auto; }
  *{ transition:none !important; animation:none !important; }
  .reveal{ opacity:1; transform:none; }
  .hero h1 .hl{ opacity:1; transform:none; }
}

/* Mobiel: de vergelijkingstabellen scrollen horizontaal in hun .compare-wrapper —
   geef daar een zichtbare affordance bij (founder 2026-07-10: "alles mobiel"). */
.compare, .sec-compare{ -webkit-overflow-scrolling:touch; }
.swipe-hint{ display:none; }
@media (max-width:700px){
  .swipe-hint{ display:block; font-family:var(--mono, ui-monospace, Menlo, monospace);
    font-size:.72rem; letter-spacing:.08em; color:var(--muted, #54677a);
    margin:.5rem 0 .2rem; text-transform:uppercase; }
}