/* =====================================================================
   DropTheHassle — visual system v1 (tokens copied 1:1 from
   company/design/visual-system.md). The Living Pane / warm terminal.
   ===================================================================== */

/* =====================================================================
   [FIX-C P7] THE ONE SEMANTIC SOURCE. Every custom property is defined
   exactly once, here (dark theme = a themed override block below; the
   two later "drop-in over :root" blocks from cyclus 6/6.5 are FOLDED IN
   with last-wins values, so nothing rendered changed). Structure mirrors
   tokens/tokens.json: primitive -> semantic -> component -> layout ->
   demo. Accent ROLES reference the green primitives (one hex per role
   family); demo content references the luma primitives.
   ===================================================================== */
:root{
  /* ---- primitive: fonts ---- */
  /* [David 2026-07-04] weg van het monospace-domeinfont (leek-vibe: "gevibecoded"). Domeinen, adressen,
     prijzen en codes renderen nu in de brand-sans (Geist), niet in Geist Mono. --font-mono blijft als
     alias bestaan zodat alle bestaande .mono/code-usages in EEN keer meeschakelen naar de sans. */
  --font-sans:"Geist","Geist Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --font-mono:"Geist","Geist Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* domein/adres/prijs-displays: strak uitgelijnd via tabular cijfers, maar in de brand-sans */
  --font-domain:"Geist","Geist Sans",ui-sans-serif,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  /* [David 2026-07-19] de serif is weg ("rare letters"): ook de marketing-laag praat gewoon Geist,
     vet en groot; rebels zit in schaal, de wall en de marker-strepen, niet in een chique letter */
  --font-display:var(--font-sans);

  /* ---- primitive: colour (tokens.json primitive.color.*) ---- */
  --white:#FFFFFF; --mask-ink:#000;   /* mask-ink: alpha-only ink for mask-image gradients */
  --green-tint:#E7F8EC; --green-glow:#35E8A0; --green-soft:#5FDF9F; --green-bright:#1FCB80;
  --green-base:#0FB970; --green-solid:#0AA163; --green-strong:#0A9D5E; --green-solid-hover:#0A8C56;
  --green-text:#0A7A4B; --green-ink:#04130C;
  /* Back to the original light warm-neutral paper (David: the grey iterations were off; revert to the
     pre-edit background = the #F9F9F7-ish off-white in his screenshot). The one tinted "vakje" that
     drifted off this (the coming-soon / site-preview canvas) is re-unified below. */
  --paper-bg:#FAFAF8; --paper-sunken:#F1EFE9; --paper-surface2:#FAF8F3;
  --paper-border-subtle:#EAE7E0; --paper-border:#DEDBD2; --paper-border-strong:#CDC9BE; --paper-pane-border:#E4E1D9;
  --ink-1:#1A1714; --ink-2:#56524B; --ink-3:#716C61;   /* original warm inks; ink-3 tuned >=4.5:1 on bg-sunken */
  --charcoal-bg:#0B0B0C; --charcoal-sunken:#08080A; --charcoal-surface:#141415;
  --charcoal-surface2:#1C1C1E; --charcoal-overlay:#232325;
  --charcoal-border-subtle:#232325; --charcoal-border:#323234; --charcoal-border-strong:#3C3C3F;
  --ink-dark-1:#F4F4F2; --ink-dark-2:#A8A8A4; --ink-dark-3:#737370;
  --red-base:#D92D36; --red-text:#B81C25; --red-tint:#FDECEC;
  --red-base-dark:#F0555E; --red-text-dark:#FF8A90;
  --amber-base:#F5A623; --amber-text:#8A5A00; --amber-tint:#FFF6E6;
  --amber-base-dark:#F5B53A; --amber-text-dark:#F2B65C;

  /* ---- primitive: type scale (the ladder; UI type only picks from these) ---- */
  --text-3xs:10px; --text-2xs:11px; --text-xs:12px; --text-sm:13px; --text-md:14px;
  --text-lg:15px; --text-base:16px; --text-lead:18px; --text-xl:20px; --text-2xl:24px;
  --text-3xl:32px; --text-4xl:56px;

  /* ---- semantic: colour roles ---- */
  --bg:var(--paper-bg); --bg-sunken:var(--paper-sunken); --surface:var(--white); --surface-2:var(--paper-surface2); --overlay:var(--white);
  --border-subtle:var(--paper-border-subtle); --border:var(--paper-border); --border-strong:var(--paper-border-strong);
  --fg:var(--ink-1); --fg-secondary:var(--ink-2); --fg-muted:var(--ink-3); --fg-onInk:var(--white);
  --fg-onColor:var(--white);   /* text on saturated fills (accent buttons, demo marks); theme-invariant */
  --ink:var(--ink-1); --ink-hover:#000000; --ink-contrast:var(--white);
  --accent:var(--green-base); --accent-hover:var(--green-strong); --accent-text:var(--green-text);
  --accent-contrast:var(--green-ink); --accent-tint:var(--green-tint); --accent-ring:var(--green-strong);
  --accent-solid:var(--green-solid); --accent-solid-hover:var(--green-solid-hover);
  --success:var(--green-base); --success-text:var(--green-text); --success-tint:var(--green-tint);
  --danger:var(--red-base); --danger-text:var(--red-text); --danger-tint:var(--red-tint); --danger-contrast:var(--white);
  --warn:var(--amber-base); --warn-text:var(--amber-text); --warn-tint:var(--amber-tint);

  /* spacing */
  --space-1:4px;--space-2:8px;--space-3:12px;--space-4:16px;--space-5:20px;--space-6:24px;
  --space-7:32px;--space-8:40px;--space-9:48px;--space-10:64px;--space-11:80px;--space-12:96px;

  /* layout constants */
  --canvas-max:720px; --brandbar-h:56px; --control-h:44px;
  --dash-pane-max:920px;            /* HOME-only pane width (NAME/SECURE keep --canvas-max 720) */
  --field-hero-h:56px;          /* the focal web-address field (56-64 range, the premium zwaartepunt) */
  --hero-field-max:560px;       /* the field's max-width inside the canvas (gutters carry the calm) */
  --outcome-max:460px;          /* .result.show max-height for the three richer outcomes (was 340) */
  --outcome-reserve:280px;      /* .result.show min-height reserve (was a dangling var with this fallback) */
  --bb-row-h:52px;              /* a Business-basics list row (alias on .addr-row/.fwd-row) */
  --door-min-h:126px;           /* three-door page 1 (0015), superseded by the one-field hero */
  --tour-body-min:clamp(300px, calc(100dvh - 420px), 470px);   /* [FIX-B P5] height-stable tour pane */
  --pane-portrait-pad:clamp(72px, calc(45vh - 243px), 320px);  /* [FIX R1] optical-center nudge for the resting pane on tall portrait tablets (iPad-portrait): pushes the top-anchored pane toward the middle without breaking no-jump growth */

  /* radius */
  --radius-xs:6px;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--radius-xl:20px;--radius-full:9999px;

  /* borders: the deliberate half-step emphasis width (dashed dropzone, selected states, mock print underline) */
  --border-emph:1.5px;

  /* elevation (cyclus-6 warm-precisie set) */
  --e1:0 1px 2px rgba(24,20,15,.05),0 1px 1px rgba(24,20,15,.04);
  --e2:0 1px 2px rgba(24,20,15,.04),0 4px 10px -3px rgba(24,20,15,.08),0 12px 22px -10px rgba(24,20,15,.07);
  --e3:0 2px 4px rgba(24,20,15,.04),0 12px 28px -8px rgba(24,20,15,.10),0 28px 52px -18px rgba(24,20,15,.12);
  --e4:0 4px 10px -2px rgba(24,20,15,.06),0 28px 52px -14px rgba(24,20,15,.16),0 56px 92px -28px rgba(24,20,15,.16);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.55);
  --inset-hair:inset 0 0 0 1px rgba(24,20,15,.04);
  --ring:0 0 0 2px var(--bg),0 0 0 4px var(--accent-ring);
  --glow-live:0 0 0 1px rgba(15,185,112,.32),0 0 30px -4px rgba(15,185,112,.45);
  --preview-matte:#F1F4F8;   /* [9.2 crisp&cool] cool matte behind the white mocks */

  /* wallet material (cyclus-6.5 warm metal) */
  --wallet-grad:linear-gradient(180deg,#2A2723 0%,#201D1A 46%,#161311 100%);
  --wallet-rim:inset 0 0 0 1px rgba(255,255,255,.045);
  --wallet-fg:var(--white);   /* text on the wallet's dark metal, theme-invariant */

  /* [C2] component tokens (visual-system §4.5) */
  --switch-w:44px; --switch-h:26px; --switch-thumb-d:22px; --switch-travel:18px;
  --switch-off:var(--paper-border-strong); --switch-thumb:var(--white);
  --code-bg:var(--bg-sunken); --code-fg:var(--fg); --code-flag:var(--fg-muted);
  --secret-dots:var(--fg-muted); --code-inline-bg:var(--bg-sunken);

  /* [C3] component tokens (visual-system §4.6) */
  --edit-affordance:var(--fg-muted); --edit-affordance-hover:var(--fg-secondary);
  --edit-zone-bg:var(--surface-2); --saved-tick:var(--accent-text);
  --hint-ok:var(--success-text); --hint-over:var(--warn-text);
  --tld-chip-fg:var(--fg);

  /* [C4] component tokens: Layer-1 statuscard (no-scroll dashboard, 0016) + ext search */
  --statuscard-h:58px; --statuscard-thumb:40px;
  --status-done:var(--accent);          /* hairline Live-Green check (glyph, not a filled pill) */
  --status-idle:var(--fg-muted);        /* a facet that is off / wants attention = no green */
  --ext-premium:var(--fg-secondary); --ext-gated:var(--warn-text);
  --hero-meta:var(--fg-secondary);   /* the quiet name-safe line: ink-calm, NEVER green */
  --bb-guided:var(--fg-muted);  /* GBP "guided/in review": neutral, NEVER done-green, NEVER red */

  /* [C6.5] chrome / window-control material (Safari-coherent) */
  --pane-border:var(--paper-pane-border);
  --e-pane:
    inset 0 1px 0 rgba(255,255,255,.7),
    0 0 0 .5px rgba(24,20,15,.055),
    0 1px 1px rgba(24,20,15,.04),
    0 4px 10px -2px rgba(24,20,15,.06),
    0 24px 48px -16px rgba(24,20,15,.16),
    0 56px 96px -32px rgba(24,20,15,.13);
  --chrome-top:#FBFAF6; --chrome-bottom:#F5F3EE; --chrome-divider:rgba(24,20,15,.07);
  --chrome-inset-top:inset 0 1px 0 rgba(255,255,255,.8);
  --dot-rest-top:#D2CEC4; --dot-rest-bottom:#B6B1A6; --dot-rim:rgba(24,20,15,.12); --dot-toplight:rgba(255,255,255,.55);
  /* [design-dna 1.2] de letterlijke macOS-stoplicht-tokens (--tl-red/-yellow/-green + rim/glyph/hi) zijn
     verwijderd: de window-controls blijven grafiet, de enige toegestane kleur is ons Live-Green (--accent)
     op de gewapende zoom-knop. Zo kan het Apple-palet niet terugsluipen in de chroom. */
  --addr-recess:inset 0 0 0 1px rgba(24,20,15,.05), inset 0 1px 1.5px rgba(24,20,15,.045);
  --addr-pill-hover:#F5F3EE;
  --mini-scale:.42;
  --nav-nudge:1.5px; --nav-nudge-lg:2.5px;   /* addr-nav hover/active micro-motion (motion-designer values) */

  /* component: the dark browser-tab mock (favicon editor artwork ramp) */
  --tabmock-bg:#1C1C1E; --tabmock-tab:#2A2A2C; --tabmock-fg:#F4F4F5; --tabmock-bar:#161617; --tabmock-url:#3A3A3C;
  /* component: the colour-picker wheel swatch */
  --swatch-wheel:conic-gradient(from 90deg, #C2674A, #E2A24C, #8AA08C, #6F8FB0, #9A6FB0, #C2674A);
  /* component: in-artwork mock type (scaled facsimiles: browser tab, SERP, OG, thumbs).
     Deliberately off the UI ladder; exact values so the miniatures keep their proportions. */
  --mock-fs-thumb-h:7px; --mock-fs-thumb-tab:8px; --mock-fs-fav:8.5px; --mock-fs-cap:9px;
  --mock-fs-serp-desc:11.5px; --mock-fs-tab:11.5px; --mock-fs-og-domain:10.5px; --mock-fs-chip:10.5px;
  --mock-fs-fav-lg:17px; --mock-radius-fav:3.5px;

  /* motion */
  --dur-micro:120ms; --dur-std:200ms; --dur-morph:280ms; --dur-reveal:1100ms;
  --ease-out:cubic-bezier(.22,1,.36,1); --ease-morph:cubic-bezier(.4,0,.2,1);

  /* ---- demo: client demo-content colours (Studio Luma maker's-stamp), live-editable.
     Global so the clay-stamp favicon resolves in our chrome tab / SERP / share too. ---- */
  --luma-blue:#2D5BFF; --luma-blue-print:#2D53E6; --luma-blue-ink:#1E3AC4;
  --luma-mark:var(--luma-blue);     /* the favicon "light" colour (recoloured live from the Browser-icon card) */
  --brand-accent:var(--luma-blue);  /* coming-soon wash + name colour (domain-only route) */
}

/* ---- Dark (dormant: data-theme is forced "light" at boot; kept as a themed override so the
   ladder survives. Every value aliases a primitive; no second definition of any role hex.) ---- */
[data-theme="dark"]{
  --bg:var(--charcoal-bg); --bg-sunken:var(--charcoal-sunken); --surface:var(--charcoal-surface); --surface-2:var(--charcoal-surface2); --overlay:var(--charcoal-overlay);
  --border-subtle:var(--charcoal-border-subtle); --border:var(--charcoal-border); --border-strong:var(--charcoal-border-strong);
  --fg:var(--ink-dark-1); --fg-secondary:var(--ink-dark-2); --fg-muted:var(--ink-dark-3); --fg-onInk:var(--charcoal-bg);
  --ink:var(--ink-dark-1); --ink-hover:var(--white); --ink-contrast:var(--charcoal-bg);
  --accent:var(--green-bright); --accent-hover:var(--green-glow); --accent-text:var(--green-soft);
  --accent-contrast:var(--green-ink); --accent-tint:rgba(31,203,128,.14); --accent-ring:var(--green-glow);
  --success:var(--green-bright); --success-text:var(--green-soft); --success-tint:rgba(31,203,128,.14);
  --danger:var(--red-base-dark); --danger-text:var(--red-text-dark); --danger-tint:rgba(240,85,94,.14); --danger-contrast:var(--charcoal-bg);
  --warn:var(--amber-base-dark); --warn-text:var(--amber-text-dark); --warn-tint:rgba(245,166,35,.14);

  --e1:0 1px 2px rgba(0,0,0,.5);
  --e2:0 2px 6px rgba(0,0,0,.5),0 8px 24px -8px rgba(0,0,0,.6);
  --e3:0 12px 32px -8px rgba(0,0,0,.7);
  --e4:0 24px 64px -12px rgba(0,0,0,.75);
  --inset-top:inset 0 1px 0 rgba(255,255,255,.06);
  --glow-live:0 0 28px -2px rgba(53,232,160,.35);
  --wallet-grad:linear-gradient(180deg,var(--charcoal-overlay),var(--charcoal-surface2));

  /* [C2] component tokens (visual-system §4.5) */
  --switch-off:var(--charcoal-border-strong); --switch-thumb:var(--ink-dark-1);
  --code-bg:var(--charcoal-sunken); --code-inline-bg:var(--charcoal-surface2);
  /* [C3] */
  --edit-zone-bg:var(--charcoal-surface2);
}

/* ---- reset / base ---- */
*{box-sizing:border-box;}
html{height:100%;}
/* [C8] scroll-anchoring: keep the user's viewpoint fixed while DOM changes above (no-jump fix §3.3) */
/* [FIX-B P6a] overflow-x:clip on the root: the #confetti bleed (and any future edge-bleed) can never
   create horizontal page-scroll again. clip (not hidden) so the root never becomes a scroll container
   and position:sticky keeps working. */
html{overflow-anchor:auto; overflow-x:clip;}
body{
  margin:0; background:var(--bg); color:var(--fg);
  font-family:var(--font-sans); font-size:16px; line-height:1.6;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
  overflow-x:clip;
  transition:background var(--dur-std) ease, color var(--dur-std) ease;
  /* [FIX-B P4] header + stage + footer share ONE viewport-height column, so on every short page the
     legal footer lands ON the fold instead of 73px under it; the no-scroll law (0016/0025 inv. 3)
     is now measurable as scrollHeight <= innerHeight. Long pages grow naturally. */
  min-height:100%; display:flex; flex-direction:column;
}
.brandbar,.site-foot{flex:none;}
code,.mono{font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
button{font-family:inherit;}

/* warm-terminal environment: dot-grid + grain + vignette/aurora */
.bg-grid{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background-image:radial-gradient(currentColor 1px, transparent 1px);
  color:var(--border);
  background-size:26px 26px; background-position:center;
  opacity:.28;
  -webkit-mask-image:radial-gradient(120% 90% at 50% 30%, var(--mask-ink) 30%, transparent 78%);
          mask-image:radial-gradient(120% 90% at 50% 30%, var(--mask-ink) 30%, transparent 78%);
}
[data-theme="dark"] .bg-grid{opacity:.5;}
.bg-aura{display:none;}   /* [Fable/David] de groene waas bovenin is weg */
[data-theme="dark"] .bg-aura{
  background:radial-gradient(58% 44% at 50% -8%, rgba(53,232,160,.07), transparent 62%);
}
.bg-grain{
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:.04;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
[data-theme="dark"] .bg-grain{opacity:.05;}

/* =====================  Brand bar  ===================== */
.brandbar{
  position:relative; z-index:5; height:var(--brandbar-h);
  display:flex; align-items:center; justify-content:space-between;
  padding:0 clamp(16px,4vw,32px);
  border-bottom:1px solid transparent;
}
.brand{display:flex; align-items:center; gap:10px; color:var(--fg); text-decoration:none; min-height:var(--control-h);}  /* [tik-doel] 44px tap-target (mark blijft 26px) */
.brand-mark{width:26px;height:26px;display:block;color:var(--fg);}
.brand-name{font-weight:600; letter-spacing:-.02em; font-size:15px;}
.brand-name .slash{color:var(--accent);}

.toggle{
  display:inline-flex; align-items:center; gap:8px;
  min-height:var(--control-h); padding:0 14px; border-radius:var(--radius-full);  /* [tik-doel] 44px */
  background:var(--surface); border:1px solid var(--border); color:var(--fg-secondary);
  cursor:pointer; font-size:13px; font-weight:500;
  transition:background var(--dur-std), border-color var(--dur-std), color var(--dur-std);
}
.toggle:hover{background:var(--bg-sunken); color:var(--fg);}
.toggle svg{width:16px;height:16px;}
.toggle .t-moon{display:none;}
[data-theme="dark"] .toggle .t-sun{display:none;}
[data-theme="dark"] .toggle .t-moon{display:inline;}
.toggle:focus-visible{outline:none; box-shadow:var(--ring);}

/* =====================  Stage  ===================== */
.stage{
  position:relative; z-index:2;
  /* [FIX-B P4] the stage FILLS the room between brandbar and footer (body is a viewport-height
     flex column) instead of forcing min-height:100vh-brandbar; that old rule pushed the footer
     below the fold on every short page and made the no-scroll law unmeetable. */
  flex:1 0 auto;
  /* [C8 no-jump §3.3-1] top-anchor the Pane instead of centring: an outcome grows DOWN only, so the
     field + H1 never move. A calm, constant head-margin keeps the Pane off the brandbar. */
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  /* [C4.5] outer whitespace only (the pane still floats); trimmed so the HOME glance + the demo
     transport foot both clear a 1280x768 viewport with 0px page-scroll. */
  padding:clamp(24px,6vh,72px) clamp(16px,4vw,32px) clamp(10px,2vw,16px);
}
/* [David 2026-07-18 mobiel] iOS Safari legt een zwevende adres-pil over de onderkant: geef de
   inhoud daar ademruimte, anders liggen de onderste knop/footer-links onder de pil. */
@media (max-width:700px){
  .stage{padding-bottom:calc(28px + env(safe-area-inset-bottom, 0px) + 44px);}
}
/* op 390px is het tab-doosje een onleesbaar snippertje ("· S"): dots + EXAMPLE/switcher dragen de
   identiteit al, dus de tab verdwijnt daar helemaal */
@media (max-width:480px){
  .is-browser .tab{display:none;}
}
/* [C0b layout] during the walkthrough, trim the top whitespace so the pane + the under-pane
   transport both clear an 800px viewport with no page scroll. The resting (non-tour) pages keep
   their roomier head-margin. */
.is-playing .stage,.is-tour .stage{padding-top:clamp(16px,3vh,28px);}
/* [FIX layout-responsive-occlusie R1] tall portrait tablets (iPad-portrait e.d.): the resting Living
   Pane is short and top-anchored, which left a large empty paper zone below it that a lay visitor could
   read as "is this still loading?". Nudge the pane toward the optical middle with a CONSTANT extra top
   padding (never justify-content:center) so the no-jump law still holds: an outcome keeps growing DOWN
   from a fixed anchor, so the field + H1 never move when a result appears. Scoped to portrait tablets at
   rest (not the walkthrough, which owns its own tight height budget). Landscape laptops (orientation:
   landscape) and phones (< 960px tall) are untouched. */
@media (orientation:portrait) and (min-height:960px){
  body:not(.is-tour):not(.is-playing) .stage{padding-top:var(--pane-portrait-pad);}
}
/* [home dode-zone] hoge LANDSCAPE/desktop-schermen (bv. 1280x1150) lieten de rustende pane bovenaan
   staan met een grote lege paper-zone eronder (review: 469px / 41% dode zone). Zelfde techniek als de
   portrait-nudge hierboven: een CONSTANTE extra top-padding duwt de pane naar het optische midden,
   NOOIT justify-content:center, zodat de no-jump-wet blijft gelden (een uitkomst groeit nog steeds naar
   BENEDEN vanaf een vast anker; het veld + de H1 bewegen niet). Alleen in rust, alleen op echt hoge
   schermen (>=1000px), zodat gewone laptops (<=900px) onaangeroerd blijven en de no-scroll-wet houdt. */
@media (orientation:landscape) and (min-height:1000px){
  body:not(.is-tour):not(.is-playing) .stage{padding-top:clamp(56px, calc(100vh - 905px), 250px);}
}
/* [FIX-B P5] the walkthrough plays inside a HEIGHT-STABLE pane: every beat renders within the
   same reserved pane-body, so a beat swap never moves the transport/CTA under the pane and the
   whole tour stays windowed-CLS <= 0.1 (with and without reduced motion). The reserve is sized
   so pane + under-pane foot always clear the fold; the constant is the measured chrome + foot +
   paddings + footer budget (see fix-notes fase B). */
.is-tour .pane-body{min-height:var(--tour-body-min);}
/* phones carry a taller under-pane foot (stacked CTA row), so the pane reserve shrinks a step
   (breakpoint override on body, NOT a second :root: the one semantic source stays one) */
@media(max-width:640px){
  body{--tour-body-min:clamp(260px, calc(100dvh - 459px), 470px);}
  .is-tour .tr-hero.viewport--compact{height:auto;}   /* [mobiel] niet meer platdrukken tot 96px: de site-preview werd afgesneden. Toont nu volledig. */
  .tour-rest{gap:8px;}
  .tr-facts{gap:4px var(--space-4);}
  .tr-fact{min-height:22px;}
}
/* reserve the browser-address row from beat 1 (it faded in at the reveal and shifted every
   element below it by 46px); the reveal now only fades its content in (opacity, compositor) */
.is-tour .chrome-addr{height:46px;}
/* the film shows the field, not the doors: the aside/suggestions would sit under the growing
   result and shift; they return the moment the user takes over (is-tour drops) */
.is-tour .bare-aside,.is-tour .addr-suggest,.is-tour .grab-help,.is-tour .home-price{display:none;}
/* the owned-name beat (connect tour) is a narrative too: the question + registrar + the one
   Yes-door; the log-in door and the repeat-sub are for the real flow (the transport carries
   the "Start with my own" exit) */
.is-tour .owned-card .owned-sub,.is-tour .owned-card [data-act="login"]{display:none;}
/* (narrator height is reserved globally on .stage-note; see stage-foot section) */
.stage-inner{position:relative; width:100%; max-width:var(--canvas-max);
  transition:max-width var(--dur-morph) var(--ease-morph);}
/* [A1 DSA art.16 / ICANN RAA 3.18] a discrete, always-reachable abuse + legal footer.
   Sits UNDER the stage (not in the Living Pane), so it never disturbs the no-jump home glance. */
/* [FIX-B P4] the footer now lives ON the fold (body flex column), so it carries fold-worthy
   padding: space-4/space-5 instead of the old space-5/space-7 it wore below the fold. */
.site-foot{position:relative; z-index:2; display:flex; justify-content:center;
  padding:var(--space-3) var(--space-4) var(--space-4);}
.site-foot__links{display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap;
  justify-content:center; font-size:13px; color:var(--fg-muted);}
.site-foot__links a{color:var(--fg-muted); text-decoration:none; transition:color var(--dur-micro); display:inline-flex; align-items:center; min-height:var(--control-h); margin-block:-12px; padding:0 4px;}  /* [tik-doel] 44px hit-area, negatieve marge houdt de visuele voetnoot-hoogte gelijk (geen verticale buren) zodat de no-scroll-wet niet breekt */
.site-foot__links a:hover{color:var(--fg-secondary);}
.site-foot__dot{color:var(--fg-muted); opacity:.6;}
/* [C4.5 refinement] HOME widens to a roomier pane so 3 real previews stay crisp.
   Scoped to the dashboard state (.is-dashboard on .stage-inner); NAME/SECURE keep 720. */
.is-dashboard{--canvas-max:var(--dash-pane-max);}
#confetti{position:absolute; inset:-40px -40px 0 -40px; width:calc(100% + 80px); z-index:30; pointer-events:none;}

/* =====================  The Living Pane (morphing canvas)  ===================== */
.pane{
  position:relative; z-index:10;
  background:var(--surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-xl); box-shadow:var(--e4);
  overflow:hidden;
  transition:box-shadow var(--dur-reveal) var(--ease-out), border-color var(--dur-std);
}
.pane.is-browser{border-color:var(--border);}   /* de live/secured-pane: box-shadow + exclusieve groene halo staan op de Cyclus-6.5 last-wins-regel (--e-pane, --glow-live), zodat het live-moment HETZELFDE verfijnde materiaal draagt als de rust-pane */

/* chrome / topbar — the brand "Pane" signal that morphs into a browser */
.pane-chrome{
  padding:0 var(--space-5);
  border-bottom:1px solid var(--border-subtle);
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
}
.chrome-row{display:flex; align-items:center; gap:12px;}
.chrome-tabs{height:42px;}
.dots{display:flex; gap:7px; flex:0 0 auto;}
.dots span{width:9px;height:9px;border-radius:50%;background:var(--border-strong);}
.tab{
  display:flex; align-items:center; gap:7px; height:28px; padding:0 12px 0 9px;
  background:var(--surface); border:1px solid var(--border-subtle); border-bottom:none;
  border-radius:8px 8px 0 0; font-size:var(--text-sm); color:var(--fg-secondary);
  max-width:0; padding-left:0; padding-right:0; opacity:0; overflow:hidden; white-space:nowrap;
  transition:max-width var(--dur-morph) var(--ease-out), opacity var(--dur-morph) var(--ease-out), padding var(--dur-morph) var(--ease-out);
}
.is-browser .tab{max-width:200px; opacity:1; padding:0 12px 0 9px;}
.tab .favicon{opacity:0; transform:translateY(-9px); transition:opacity var(--dur-std), transform var(--dur-std) var(--ease-out);}
.is-browser .tab .favicon.fall{opacity:1; transform:none;}
.tab-title{overflow:hidden;text-overflow:ellipsis;}
/* a quiet "Example" marker so a layperson reads the demo site as a sample of how their own
   could look, not a product of ours. Lives in OUR chrome, only while the browser pane is shown. */
.example-pill{
  flex:0 0 auto; align-self:center; max-width:0; opacity:0; overflow:hidden; white-space:nowrap;
  padding:0; border-radius:999px; border:1px solid transparent;
  font-family:var(--font-sans); font-weight:600; font-size:var(--text-2xs); letter-spacing:.08em; text-transform:uppercase;
  color:var(--fg-muted); background:var(--surface);
  transition:max-width var(--dur-morph) var(--ease-out), opacity var(--dur-morph) var(--ease-out), padding var(--dur-morph) var(--ease-out);
}
.is-browser .example-pill{max-width:120px; opacity:1; padding:2px 9px; border-color:var(--border-subtle);}

.chrome-addr{
  height:0; opacity:0; overflow:hidden;
  transition:height var(--dur-morph) var(--ease-out), opacity var(--dur-morph) var(--ease-out);
}
.is-browser .chrome-addr{height:46px; opacity:1;}
.addr-nav{display:flex; gap:14px; color:var(--fg-muted); flex:0 0 auto;}
.addr-nav svg{width:15px;height:15px;}
.addr-pill{
  flex:1 1 auto; display:flex; align-items:center; gap:9px;
  height:32px; padding:0 14px; border-radius:var(--radius-full);
  background:var(--bg-sunken); border:1px solid var(--border-subtle);
  font-size:14px; color:var(--fg);
}
.addr-pill .lock{display:inline-flex; color:var(--fg-muted); transition:color var(--dur-std), transform var(--dur-micro);}
.addr-pill .lock svg{width:15px;height:15px;}
.addr-pill .lock.locked{color:var(--accent);}
.addr-pill .lock.click{animation:lockpop .42s var(--ease-out);}
@keyframes lockpop{0%{transform:scale(.6) rotate(-8deg)}55%{transform:scale(1.18)}100%{transform:none}}
.addr-domain{font-size:var(--text-lg); letter-spacing:-.01em;}
.addr-domain.pop{animation:domainpop .6s var(--ease-out);}
@keyframes domainpop{0%{transform:scale(1)}30%{transform:scale(1.06)}100%{transform:scale(1)}}

/* body that swaps/morphs */
/* [C8 no-jump §3.3-3] exclude the morphing block from scroll-anchoring so its own growth does not
   fight the anchor (html keeps overflow-anchor:auto as the safety net). */
.pane-body{padding:clamp(22px,3.4vw,32px); overflow-anchor:none;}
/* [FIX-B P5] first-paint stability: the pane boots empty (JS renders into it) and the first
   render shoved the under-pane foot down (measured 0.02-0.10 layout-shift at load). Reserve the
   measured bare-home height per breakpoint; the first render then lands in reserved room. */
#paneBody:empty{min-height:350px;}
@media(max-width:900px){ #paneBody:empty{min-height:343px;} }
@media(max-width:640px){ #paneBody:empty{min-height:409px;} }
.pane-body.fade-in{animation:fadein var(--dur-std) var(--ease-out);}
@keyframes fadein{from{opacity:0; transform:translateY(6px)}to{opacity:1; transform:none}}

/* =====================  Typography  ===================== */
.h1{font-size:clamp(var(--text-2xl),4.6vw,var(--text-3xl)); line-height:1.12; font-weight:600; letter-spacing:-.022em; margin:0 0 6px;}
.subline{font-size:clamp(15px,2vw,16px); line-height:1.5; color:var(--fg-secondary); margin:0 0 10px; max-width:54ch;}
/* [design-dna doorvoering] kicker/eyebrow op ONZE sleutel-kopjes: het slash-atoom (het merk-atoom dat ook
   als confetti valt op het live-moment) in Live-Green + een klein muted mono-label. Hergebruikt bestaande
   DNA (Geist Mono + het slash-atoom) i.p.v. behang; klein en muted zodat de kop/het adresveld de held blijft. */
.kicker{display:flex; align-items:center; gap:var(--space-2); margin:0 0 var(--space-2);
  font-family:var(--font-mono); font-size:var(--text-2xs); font-weight:500; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-muted); line-height:1;}
.kicker__slash{color:var(--accent); font-weight:600;}
/* [9.1 #5] gift-a-domain */
.gift{display:flex; flex-direction:column;}
.gift select.field, .gift input.field{width:100%;}
.gift-note{font-size:13px; color:var(--fg-muted); line-height:1.5; margin:10px 0 0;}
.gift-acts{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}
.gift--sent{align-items:flex-start;}
.gift-check{width:40px; height:40px; border-radius:var(--radius-full); background:var(--accent-tint); color:var(--accent-text); display:grid; place-items:center; margin-bottom:10px;}
.gift-check svg{width:22px;height:22px;}
.reassure{font-size:13px; color:var(--fg-muted); margin:16px 0 0; text-align:center;}
.kop{font-size:15px; font-weight:500; color:var(--fg-secondary); margin:0 0 14px; letter-spacing:-.005em;}

/* =====================  Buttons  ===================== */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:44px; padding:0 18px; border-radius:var(--radius-sm);
  font-size:15px; font-weight:500; letter-spacing:-.005em; cursor:pointer;
  border:1px solid transparent; transition:background var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro), transform var(--dur-micro);
}
.btn:active{transform:translateY(.5px);}
/* [consent] een gated knop (bv. "Turn on email" tot het akkoord aan staat) leest ook echt als disabled */
.btn[disabled],.btn:disabled{opacity:.4; cursor:not-allowed; box-shadow:none;}
.btn-primary[disabled]:hover,.btn-primary:disabled:hover{background:var(--ink);}
.btn[disabled]:active,.btn:disabled:active{transform:none;}
.btn svg{width:17px;height:17px;}
.btn:focus-visible{outline:none; box-shadow:var(--ring);}
.btn-primary{background:var(--ink); color:var(--ink-contrast); box-shadow:var(--inset-top), var(--e1);}
.btn-primary:hover{background:var(--ink-hover);}
.btn-secondary{background:var(--surface); color:var(--fg); border-color:var(--border);}
.btn-secondary:hover{background:var(--bg-sunken);}
.btn-ghost{background:transparent; color:var(--fg-secondary);}
.btn-ghost:hover{background:var(--bg-sunken); color:var(--fg);}

.link{
  background:none; border:none; padding:0; cursor:pointer;
  color:var(--accent-text); font-size:13px; font-weight:500; letter-spacing:-.005em;
}
.link:hover{text-decoration:underline; text-underline-offset:2px;}
.link:focus-visible{outline:none; box-shadow:var(--ring); border-radius:4px;}
.link-muted{color:var(--fg-muted);}

/* =====================  S1: drop zone (the breathing socket)  ===================== */
.dropzone{
  position:relative; margin-top:4px;
  border:var(--border-emph) dashed var(--border-strong); border-radius:var(--radius-lg);
  background:var(--surface-2);
  min-height:236px; padding:34px 24px;
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px;
  text-align:center; cursor:pointer;
  transition:border-color var(--dur-std), background var(--dur-std), box-shadow var(--dur-std);
}
.dropzone:hover{border-color:var(--fg-muted);}
.dropzone:focus-visible{outline:none; box-shadow:var(--ring); border-color:var(--accent);}
.dropzone.drag{
  border-style:solid; border-color:var(--accent); background:var(--accent-tint);
  box-shadow:var(--glow-live);
}
.socket{position:relative; width:96px; height:84px; display:grid; place-items:center;}
.socket .halo{
  position:absolute; inset:0; border-radius:50%;
  background:radial-gradient(closest-side, rgba(138,134,125,.22), transparent 72%);
  animation:breathe 4s var(--ease-out) infinite;
}
.dropzone.drag .socket .halo{background:radial-gradient(closest-side, rgba(15,185,112,.32), transparent 70%);}
@keyframes breathe{0%,100%{transform:scale(.92); opacity:.55}50%{transform:scale(1.08); opacity:1}}
.socket .glyph{position:relative; color:var(--fg-muted); animation:bob 4s var(--ease-out) infinite;}
.dropzone.drag .socket .glyph{color:var(--accent);}
@keyframes bob{0%,100%{transform:translateY(2px)}50%{transform:translateY(-3px)}}
.socket .glyph svg{width:54px;height:54px; display:block;}
.dropzone:hover .socket .glyph{transform:translateY(4px); transition:transform var(--dur-std);}
.drop-label{font-size:18px; font-weight:500; letter-spacing:-.01em; color:var(--fg);}
.drop-sub{font-size:13px; color:var(--fg-muted);}
.dropzone .link{font-size:14px;}
.file-input{position:absolute; width:1px;height:1px; opacity:0; pointer-events:none;}

/* =====================  S1 building: coalescing  ===================== */
.coalesce{display:flex; flex-direction:column; gap:18px;}
.file-chip{
  display:inline-flex; align-items:center; gap:10px; align-self:flex-start;
  height:36px; padding:0 14px; border-radius:var(--radius-sm);
  background:var(--bg-sunken); border:1px solid var(--border-subtle);
  font-family:var(--font-mono); font-size:13px; color:var(--fg-secondary);
}
.file-chip svg{width:16px;height:16px;color:var(--fg-muted);}
.file-chip .mono{color:var(--fg-secondary);}
/* [leek-begrijpelijkheid R1] post-drop bevestiging: bestandsnaam + schaars groen "uploaded" */
.drop-ready{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 12px;}
.drop-ready .file-chip .dr-ok{display:inline-flex; align-items:center; color:var(--success-text);}
.drop-ready .file-chip .dr-ok svg{width:15px;height:15px; color:var(--success-text);}
.drop-ready__tag{font-size:var(--text-xs); font-weight:600; letter-spacing:.04em; text-transform:uppercase; color:var(--success-text);}
.drop-ready__redo{font-size:var(--text-sm); color:var(--fg-muted); margin:10px 0 0;}
/* [G4] thin real progress bar; only shown when upload bytes are known. */
.up-progress{height:3px; border-radius:999px; background:var(--bg-sunken); border:1px solid var(--border-subtle); overflow:hidden;}
.up-progress__bar{display:block; height:100%; width:0; border-radius:999px; background:var(--accent); transition:width .18s linear;}
/* [G1] the honest, non-red empty/corrupt drop notice (BEFORE any payment). */
.drop-notice{display:flex; flex-direction:column; gap:12px; align-items:flex-start;}
.drop-notice__badge{display:flex; align-items:center; gap:10px; color:var(--fg); font-size:clamp(var(--text-lead),2.6vw,var(--text-xl)); font-weight:600; letter-spacing:-.015em; line-height:1.25;}
.drop-notice__badge .dn-ico{flex:none; display:inline-flex; color:var(--warn-text);}
.drop-notice__badge .dn-ico svg{width:20px;height:20px;}
.drop-notice__sub{margin:0; font-size:14px; color:var(--fg-secondary); line-height:1.5;}
.drop-notice__guide{margin:0; font-size:14px;}
.drop-notice__guide .link{font-size:14px; text-decoration:underline; text-underline-offset:2px;}
.drop-notice__file{font-family:var(--font-mono); font-size:var(--text-sm); color:var(--fg-muted);}
.drop-notice__actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:2px;}
.skel-preview{
  position:relative; border-radius:var(--radius-md); overflow:hidden;
  background:
    radial-gradient(currentColor 1px, transparent 1px);
  color:var(--border);
  background-size:14px 14px;
  border:1px solid var(--border-subtle);
  height:188px;
}
.skel-preview::after{
  content:""; position:absolute; inset:0;
  background:linear-gradient(180deg, var(--surface-2), var(--surface));
  -webkit-mask:linear-gradient(90deg, transparent, var(--mask-ink) 18%, var(--mask-ink) 82%, transparent);
          mask:linear-gradient(90deg, transparent, var(--mask-ink) 18%, var(--mask-ink) 82%, transparent);
  opacity:.0;
}
.skel-row{position:absolute; border-radius:6px; background:var(--bg-sunken); overflow:hidden;}
.skel-row::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg, transparent, rgba(255,255,255,.6), transparent);
  animation:shimmer 1.4s infinite;}
[data-theme="dark"] .skel-row::after{background:linear-gradient(90deg, transparent, rgba(255,255,255,.06), transparent);}
@keyframes shimmer{100%{transform:translateX(100%)}}
.skel-a{top:26px; left:26px; width:120px; height:14px;}
.skel-b{top:54px; left:26px; width:230px; height:26px;}
.skel-c{top:92px; left:26px; width:180px; height:14px;}
.skel-d{top:120px; left:26px; width:96px; height:30px; background:var(--border-subtle);}
.skel-orb{top:30px; right:30px; width:84px; height:84px; border-radius:50%;}

/* status line — honest, no fake % */
.status{display:flex; align-items:center; gap:10px; font-family:var(--font-mono); font-size:13px; color:var(--fg-secondary);}
/* [David 2026-07-10] a clear "we are working" spinner + indeterminate bar for the email set-up wait, so it
   is obvious something is happening (and the button stays out of reach -> no repeated clicks). */
.dth-spin{width:18px;height:18px;border-radius:50%;border:2px solid var(--border-emph);border-top-color:var(--accent);animation:dthspin .8s linear infinite;flex:0 0 auto;display:inline-block;vertical-align:middle;}
@keyframes dthspin{to{transform:rotate(360deg);}}
.dth-progress{height:3px;border-radius:2px;background:var(--bg-sunken);overflow:hidden;margin-top:12px;}
.dth-progress span{display:block;height:100%;width:34%;border-radius:2px;background:var(--accent);animation:dthprog 1.25s var(--ease-out) infinite;}
@keyframes dthprog{0%{margin-left:-34%;}100%{margin-left:100%;}}
@media (prefers-reduced-motion: reduce){ .dth-spin,.dth-progress span{animation:none;} }
.dot-live{position:relative; width:9px;height:9px;border-radius:50%; background:var(--accent); flex:0 0 auto;}
.dot-live::after{content:""; position:absolute; inset:-5px; border-radius:50%; border:var(--border-emph) solid var(--accent); opacity:.5; animation:ping 1.6s var(--ease-out) infinite;}
@keyframes ping{0%{transform:scale(.6); opacity:.6}80%,100%{transform:scale(1.5); opacity:0}}

/* =====================  S2: staging live + domain  ===================== */
.live-banner{
  display:flex; align-items:center; gap:14px;
  padding:12px; border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  background:var(--surface-2);
}
.live-banner .thumb{
  flex:0 0 auto; width:96px; height:62px; border-radius:8px; overflow:hidden;
  border:1px solid var(--border-subtle); box-shadow:var(--e1);
}
.banner-text{min-width:0;}
.banner-line{display:flex; align-items:center; gap:7px; font-size:14px; color:var(--fg); flex-wrap:wrap;}
.banner-line .check{color:var(--accent); display:inline-flex;}
.banner-line .check svg{width:16px;height:16px;}
.owner-verify{
  margin:12px 0 0; padding:12px 14px; border-radius:var(--radius-md);
  border:1px solid var(--border-subtle); background:var(--warn-tint); color:var(--fg);
}
.owner-verify + .owner-verify{margin-top:8px;}
.owner-verify p{margin:0; font-size:14px; line-height:1.45;}
.owner-verify .link{margin-top:8px; font-weight:600;}
.owner-verify__wait{display:inline-block; margin-top:8px; font-size:13px; color:var(--fg-secondary);}
.owner-verify.is-suspended{background:var(--danger-tint); border-color:var(--danger);}
.staging-url{font-family:var(--font-mono); font-size:var(--text-md); color:var(--accent-text); text-decoration:none; word-break:break-all;}
.staging-url:hover{text-decoration:underline; text-underline-offset:2px;}
.staging-url .ext{width:12px;height:12px; vertical-align:-1px; margin-left:3px;}
.bridge{font-size:15px; font-weight:500; color:var(--fg-secondary); margin:18px 0 12px;}

.field-label{font-size:14px; font-weight:500; color:var(--fg); letter-spacing:-.005em; margin-bottom:8px; display:block;}
.field--domain{
  width:100%; height:56px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--fg); padding:0 16px;
  font-family:var(--font-mono); font-weight:500; font-size:20px; letter-spacing:-.01em;
  transition:border-color var(--dur-std), box-shadow var(--dur-std);
}
.field--domain::placeholder{color:var(--fg-muted); font-weight:400;}
.field--domain:focus{outline:none; border-color:var(--border-strong); box-shadow:0 0 0 3px rgba(120,120,120,.12);}
/* [David 2026-07-06] the search box glows by real availability: green = free, red = taken, neutral while
   checking. Overrides the plain green focus ring above (same specificity, declared later). */
.field--domain.is-available,.field--domain.is-available:focus{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);}
.field--domain.is-taken,.field--domain.is-taken:focus{border-color:var(--border-strong); box-shadow:0 0 0 3px rgba(120,120,120,.12);}
.field--domain.is-checking,.field--domain.is-checking:focus{border-color:var(--fg-secondary); box-shadow:0 0 0 3px rgba(120,120,120,.12);}
.grab-help .ga.ga--no{color:var(--danger);}       /* taken marker: red, beats the global green .ga */
.grab-help .ga.ga--wait{color:var(--fg-secondary);}

.suggest{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:12px; font-size:13px; color:var(--fg-muted);}
.chip-sug{
  background:var(--surface); border:1px solid var(--border); color:var(--fg-secondary);
  display:inline-flex; align-items:center; min-height:var(--control-h); padding:0 14px; border-radius:var(--radius-full); cursor:pointer;  /* [tik-doel] 44px */
  font-family:var(--font-mono); font-size:var(--text-sm); transition:background var(--dur-micro), border-color var(--dur-micro);
}
.chip-sug:hover{background:var(--bg-sunken); border-color:var(--border-strong);}
/* [leek-begrijpelijkheid R1] ending-chips onder het adresveld (naam zonder ending) */
.ending-pick{display:flex; align-items:center; gap:8px; flex-wrap:wrap; margin-top:10px;}
.ending-pick__lead{font-size:var(--text-sm); color:var(--fg-muted);}
.is-tour .ending-pick{display:none;}
.suggest .sep{color:var(--border-strong);}
.tidy-note{color:var(--fg-secondary);}
.chip-sug{max-width:100%; overflow:hidden; text-overflow:ellipsis;}
.addr-suggest{margin-top:10px;}

/* [C8 §2] the quiet secondary layer: lines, not boxes; muted, no green, no buttons-look */
/* [FIX-C P7] the quiet doors are honest 44px touch rows now (review: 171-215x18 on the primary
   path). min-height carries the target; gap 0 keeps the visual pitch close to the old 25px
   rhythm (text sits centred in its row). Composition re-measured on 1280x768/390/834. */
.bare-aside{display:flex; flex-direction:column; align-items:stretch; gap:8px; margin-top:14px; width:100%;}
/* [David 2026-07-04 · Fix 2] de twee co-gelijke CTA's naast elkaar; gelijke hoogte via stretch */
.cta-row{display:flex; gap:10px; align-items:stretch;}
.cta-row .bring-cta{flex:1; min-width:0; width:auto;}
/* [Fable/David] cta-row blijft naast elkaar; de 560px-regel maakt de kaarten compact */
/* [home-hierarchie / David: "veld blijft held"] geen vier gelijk-gewogen pills meer. Het adresveld is
   de held; hieronder EEN benadrukte secundaire CTA (breng wat je al hebt: domein of gebouwde site),
   daaronder een stille tertiaire regel (AI-code + log in). Zo is er een duidelijke primaire taak en
   verdwijnt de "vier deuren zonder hierarchie"-auto-fail. Compact gehouden: dezelfde verticale voetprint
   als de oude entry-rij, zodat de no-scroll-wet in de result-state (280px reserve) niet breekt. */
.bring-cta{display:flex; align-items:center; justify-content:space-between; gap:14px; width:100%;
  min-height:50px; padding:9px 18px; text-align:left; cursor:pointer;
  border:1px solid var(--border); border-radius:12px; background:var(--surface);
  transition:background var(--dur-std) var(--ease-out), border-color var(--dur-std) var(--ease-out), box-shadow var(--dur-std);}
.bring-cta:hover{background:var(--bg-sunken); border-color:var(--fg-secondary);}
.bring-cta:focus-visible{outline:none; box-shadow:var(--ring);}
.bring-cta__txt{display:flex; flex-direction:column; gap:1px; min-width:0;}
.bring-cta__q{font-size:var(--text-xs); color:var(--fg-muted); line-height:1.35;}
.bring-cta__a{font-size:var(--text-sm); font-weight:600; color:var(--fg); letter-spacing:-.01em;}
.bring-cta__arrow{flex:none; display:inline-flex; align-items:center; color:var(--fg-secondary);
  transition:transform var(--dur-std) var(--ease-out), color var(--dur-std);}
.bring-cta__arrow svg{width:18px;height:18px;}
.bring-cta:hover .bring-cta__arrow{transform:translate(2px,-2px); color:var(--fg);}
/* [David 2026-07-19 r3] de zwarte hero-CTA's: EEN groot woord + korte subregel, btn-primary-tokens
   (zwarte knoppen-wet), dus ook goed in dark theme. */
/* [r4] klein veld-label, DIRECT boven de box: ademruimte onder de titel, gekoppeld aan het veld */
.hero-how{margin:14px 0 7px; font-size:12.5px; line-height:1.4; color:var(--fg-muted);
  letter-spacing:.01em;}
.bring-cta--dark{background:var(--ink); border-color:var(--ink); box-shadow:var(--inset-top), var(--e1);}
.bring-cta--dark:hover{background:var(--ink-hover); border-color:var(--ink-hover);}
/* [David r3b] geen caps/tracking (leest schreeuwerig): sentence case, het woord draagt door GEWICHT
   en maat -- 16px/700 display-strak, subregel 12.5px gedempt. Zelfde register als de rest v/d site. */
.bring-cta--dark .bring-cta__big{font-size:16px; font-weight:700; letter-spacing:-.01em;
  color:var(--ink-contrast); line-height:1.25;}
.bring-cta--dark .bring-cta__sub{font-size:12.5px; color:var(--ink-contrast); opacity:.62; line-height:1.4;}
/* [David r3c] "(free)" bij Upload: informeert zonder te schreeuwen -- lichter gewicht, iets gedimd */
.bring-cta__free{font-size:13.5px; font-weight:500; opacity:.72; letter-spacing:0;}
.bring-cta--dark .bring-cta__arrow{color:var(--ink-contrast); opacity:.7;}
.bring-cta--dark:hover .bring-cta__arrow{color:var(--ink-contrast); opacity:1;}
/* de stille tertiaire regel: platte tekstlinks, muted, geen knop-look */
.entry-quiet{display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:4px 14px;
  margin:0; font-size:var(--text-xs); color:var(--fg-muted);}
.entry-quiet .link{font-size:var(--text-xs); color:var(--fg-secondary); min-height:26px; display:inline-flex; align-items:center;}
.entry-quiet .link:hover{color:var(--fg);}
.entry-quiet__sep{color:var(--border); user-select:none;}
/* [bring-wizard] de 3-pagina overname-flow: rij-lijst met +/x; hergebruikt verder own-flow/bill/wallet-patronen */
.bring-flow .bring-rows{display:flex; flex-direction:column; gap:8px; margin:10px 0;}
.bring-row{display:flex; align-items:center; gap:8px;}
.bring-row .field--domain{flex:1 1 auto; height:48px; font-size:var(--text-md);}
.bring-code-row{display:flex; align-items:center; gap:10px;}
.bring-code-row .bring-code-dom{flex:0 0 auto; max-width:42%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg); font-size:var(--text-sm);}
.bring-code-row .bring-code{flex:1 1 auto; min-width:0;}
.bring-add{display:inline-flex; align-items:center; gap:6px; min-height:44px; color:var(--fg-secondary);}
.bring-add:hover{color:var(--fg);}
.bring-add svg{width:15px;height:15px;}
.bring-err{color:var(--danger,#b3261e); font-size:var(--text-sm); margin:2px 0 0;}
.bring-flow .bill-row .bring-x{margin-left:8px;}
.bring-flow .wallet-btn{width:100%;}
.bring-flow .own-acts{flex-wrap:wrap; gap:8px;}
.grab-help{display:grid; grid-template-columns:15px 1fr; gap:8px; align-items:start;}
/* [leek + prijs] rustig prijsanker onder het veld; verbergt zich bij typen zodat het de result-hoogte niet raakt */
.home-price{margin:14px 0 0; font-size:var(--text-xs); color:var(--fg-muted); letter-spacing:.01em;}
.home-price .mono{color:var(--fg-secondary); font-weight:500;}
.name-acting .home-price{display:none;}

/* [DAVID 13:01] telefoon-herontwerp van de kale home: alles binnen de vouw, ook op een 667px-scherm.
   Compacte tweetraps-hierarchie: pane strak (kleinere h1, 44px-deuren, krappe marges), daaronder
   een note + ALLEEN de primaire walkthrough-CTA; het eigen-pad wordt een stille tekstlink.
   Scoped op :not(.is-tour) zodat de tour-reserves (gemeten constanten) onaangetast blijven. */
@media (max-width:640px){
  .bare-aside{margin-top:16px; gap:10px;}
  .bring-cta{min-height:52px; padding:10px 14px;}
  body:not(.is-tour) .is-bare .h1{font-size:var(--text-xl); margin-bottom:4px;}
  body:not(.is-tour) .is-bare .grab-help{font-size:var(--text-xs); margin-top:6px;}
  body:not(.is-tour) #stageNote{font-size:var(--text-xs); margin-top:6px;}
  body:not(.is-tour) .stage-foot{gap:4px; margin-top:4px;}
  /* het eigen-pad wordt op de telefoon een stille tekstlink onder de primaire CTA */
  body:not(.is-tour) #tourConnect, body:not(.is-tour) #tourAi{border:0; background:transparent; box-shadow:none; min-height:32px;
    padding:4px 8px; font-size:var(--text-xs); color:var(--fg-muted); text-decoration:underline; text-underline-offset:3px;}
  body:not(.is-tour) .brandbar{min-height:48px; padding-top:8px; padding-bottom:8px;}
  body:not(.is-tour) .pane{margin-top:12px;}
  body:not(.is-tour) .site-foot{margin-top:12px; padding-top:8px; padding-bottom:12px;}
}

/* [C8 no-jump §3.3-4] opacity-only (+ tiny translateY) fade; the ONE height-growth is morph()'s job.
   No max-height animation here, so there is no second stacked height-animation to amplify the jump. */
.result{opacity:0; transform:translateY(6px); min-height:0; margin-top:0;
  transition:opacity var(--dur-std), transform var(--dur-std) var(--ease-out),
    min-height .45s var(--ease-out), margin-top .45s var(--ease-out);}
/* [C8 no-jump §3.3-2] reserve the outcome height so the layout begins ~in its end-state (only the
   interior changes); --outcome-reserve covers the tallest of the three cards.
   [David 2026-07-19 r3] de EERSTE expansie (0 -> reserve) animeert nu ook (~.45s) i.p.v. in een klap:
   de tile groeit voelbaar bedoeld, niet schokkerig. */
.result.show{opacity:1; transform:none; margin-top:14px; min-height:var(--outcome-reserve,280px);}
.result-card{
  border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface);
  padding:16px; box-shadow:var(--e1);
}
.result-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px;}
.r-domain{font-size:18px; font-weight:500; letter-spacing:-.01em; color:var(--fg);}
.r-price{margin-left:auto; font-size:13px; color:var(--fg-secondary);}
.taken-note{font-size:13px; color:var(--fg-muted); margin:-4px 0 12px;}

.chip{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px; border-radius:var(--radius-full); font-size:12px; font-weight:500; letter-spacing:.01em;}
.chip .cdot{width:6px;height:6px;border-radius:50%;}
.chip-ok{background:var(--success-tint); color:var(--success-text);}
.chip-ok .cdot{background:var(--success); animation:pulsechip 2s var(--ease-out) infinite;}
@keyframes pulsechip{0%,100%{opacity:1}50%{opacity:.45}}
.chip-neutral{background:var(--bg-sunken); color:var(--fg-secondary);}
.chip-neutral .cdot{background:var(--fg-muted);}

/* wallet button — the signature money moment */
.wallet-btn{
  width:100%; height:52px; padding:0 16px; border:none; border-radius:var(--radius-md);
  background:var(--wallet-grad); color:var(--wallet-fg); cursor:pointer;
  display:flex; align-items:center; gap:12px;
  box-shadow:var(--inset-top), var(--e2);
  transition:box-shadow var(--dur-std), transform var(--dur-micro), filter var(--dur-std);
}
.wallet-btn:hover{box-shadow:var(--inset-top), var(--e2), var(--glow-live);}
.wallet-btn:active{transform:translateY(.5px);}
.wallet-btn:focus-visible{outline:none; box-shadow:var(--ring), var(--e2);}
.wallet-btn .w-glyph{display:inline-flex; opacity:.95;}
.wallet-btn .w-glyph svg{width:22px;height:22px;}
.wallet-btn .w-label{font-size:15px; font-weight:500; display:flex; align-items:center; gap:4px; white-space:nowrap; overflow:hidden;}
/* [FIX-C P8] the money moment never hides its price: on phones the label wraps (name line 1,
   price line 2 when tight); the DOMAIN may ellipsize, the PRICE never clips. */
@media (max-width:430px){
  .wallet-btn{height:auto; min-height:52px; padding-block:8px;}
  .wallet-btn .w-label{white-space:normal; flex-wrap:wrap; row-gap:2px; line-height:1.25; overflow:visible;}
  .wallet-btn .w-label code{max-width:100%; overflow:hidden; text-overflow:ellipsis;}
  .wallet-btn .w-label em{flex:none;}
}
.wallet-btn .w-label code{font-family:var(--font-mono); font-size:15px;}
.wallet-btn .w-label em{font-style:normal; font-family:var(--font-mono); font-size:13px; opacity:.8;}
.wallet-btn .w-go{margin-left:auto; display:inline-flex; opacity:.8;}
.wallet-btn .w-go svg{width:18px;height:18px;}
.wallet-btn.pressing{filter:brightness(1.05); box-shadow:var(--inset-top), var(--e2), var(--glow-live);}

/* [SLICE 3] the real Stripe money-moment panel: replaces the wallet button for a backed purchase.
   The Express Checkout Element (Apple/Google Pay/Link) mounts into .dth-pay__el. */
/* [David 2026-07-07] frisser, premium betaalpaneel: schone witte kaart, zachte schaduw, meer lucht,
   wallets + iDEAL eerst, kaart in de uitklap, herkenbare methode-badges onderaan. */
.dth-pay{margin:14px auto 0; max-width:420px; display:flex; flex-direction:column; gap:14px; padding:20px; border:1px solid var(--border-subtle); border-radius:16px; background:var(--surface); box-shadow:0 1px 2px rgba(20,18,14,.04), 0 8px 24px -12px rgba(20,18,14,.14);}
.dth-pay__head{display:flex; align-items:baseline; justify-content:space-between; gap:12px; padding-bottom:12px; border-bottom:1px solid var(--border-subtle);}
/* [fix David 2026-07-07] familie-koop: per naam een regel + een totaal, i.p.v. alleen de hoofdnaam */
.dth-pay__lines{padding-bottom:12px; border-bottom:1px solid var(--border-subtle); display:flex; flex-direction:column; gap:6px;}
.dth-pay__line{display:flex; align-items:baseline; justify-content:space-between; gap:12px; font-size:var(--text-sm);}
.dth-pay__line--total{margin-top:4px; padding-top:8px; border-top:1px solid var(--border-subtle); font-weight:600;}
.dth-pay__line .mono{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}
/* [finding #43] lange domeinnaam knijpt met ellipsis; de prijs breekt nooit over twee regels ("EUR16 / yr") */
.dth-pay__head .mono{font-size:14px; color:var(--fg-secondary); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dth-pay__head .r-price{color:var(--fg); font-weight:700; white-space:nowrap; flex:0 0 auto; font-size:15px;}
.dth-pay__prem{margin:0; font-size:12.5px; line-height:1.4; color:var(--warn-text);}
/* [David 2026-07-07] EEN schoon Stripe Payment Element (tabs) = de methode-kiezer; geen express-balken meer */
.dth-pay__body{display:flex; flex-direction:column; gap:14px;}
.dth-pay__methods{min-height:44px;}
.dth-pay__owner{padding-top:12px; border-top:1px solid var(--border-subtle);}
.dth-pay__ownhead{list-style:none; cursor:pointer; display:flex; align-items:center; justify-content:space-between; gap:10px; padding:2px 0; min-width:0;}
.dth-pay__ownhead::-webkit-details-marker{display:none;}
.dth-pay__ownsum{font-size:13px; color:var(--fg-secondary); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.dth-pay__ownsum b{color:var(--fg); font-weight:600;}
.dth-pay__ownedit{flex:0 0 auto; font-size:13px; font-weight:600; color:var(--accent);}
.dth-pay__owner[open] .dth-pay__ownedit{display:none;}
.dth-pay__owner .dth-bill{margin-top:10px;}
.dth-pay__btn{width:100%; min-height:48px; font-size:15px;}
.dth-pay__status{margin:0; font-size:13px; line-height:1.4; color:var(--fg-secondary); min-height:1.2em;}
.dth-pay__status[data-err="true"]{color:var(--danger);}

/* [C8 B2] the quiet "add your site before you buy" whisper under the wallet: a line, never a box */
.result-whisper{margin:10px 0 0; font-size:13px; color:var(--fg-muted);}
.result-whisper .link{font-size:13px;}
.result-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-top:12px; flex-wrap:wrap;}
.renew{font-size:var(--text-sm); color:var(--fg-muted);}
.acct-note{margin:10px 2px 0; font-size:12.5px; line-height:1.4; color:var(--fg-muted);}
.result-own{display:inline-block; margin-top:8px; font-size:var(--text-sm); color:var(--fg-secondary);}

.fork{margin-top:18px; padding-top:16px; border-top:1px solid var(--border-subtle); font-size:var(--text-md); color:var(--fg-muted);}
.fork .link{font-size:var(--text-md);}

/* connect (S3b) — kept light, the one step outside our domain */
.connect{display:flex; flex-direction:column; gap:12px;}
.reassure-strip{
  /* [layout-fix] grid i.p.v. wrappende flex: het vinkje staat ALTIJD naast de tekst, ook op smal */
  display:grid; grid-template-columns:auto 1fr; align-items:start; gap:10px;
  padding:12px 14px; border-radius:var(--radius-md);
  background:var(--success-tint); color:var(--success-text); font-size:14px; font-weight:500;
}
.reassure-strip .check{margin-top:1px;}
.reassure-strip .check svg{width:17px;height:17px;}
.badges{display:flex; gap:8px; margin-left:auto;}
.badge{font-size:12px; font-weight:500; padding:3px 9px; border-radius:var(--radius-full); background:var(--surface); border:1px solid var(--border-subtle); color:var(--fg-secondary);}
.host-field{display:flex; align-items:center; gap:8px; height:44px; padding:0 8px 0 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-sunken);}
.host-field .mono{flex:1; font-size:var(--text-md); color:var(--fg-secondary);}
.copy-btn{height:30px; padding:0 12px; border-radius:6px; border:1px solid var(--border); background:var(--surface); color:var(--fg); font-size:var(--text-sm); font-weight:500; cursor:pointer;}
.copy-btn:hover{background:var(--bg-sunken);}

/* =====================  S4: provisioning + polish  ===================== */
.prov{display:flex; flex-direction:column; gap:18px;}
.prov-status{display:flex; align-items:center; gap:10px; min-height:20px;}
.prov-msg{font-family:var(--font-mono); font-size:14px; color:var(--fg-secondary); transition:opacity var(--dur-micro);}
.prov-rail{display:flex; align-items:center; gap:8px; margin-top:-6px;}
.rail-dot{display:flex; align-items:center; gap:7px; font-size:12px; color:var(--fg-muted);}
.rail-dot .rd{width:9px;height:9px;border-radius:50%; background:var(--border); transition:background var(--dur-std);}
.rail-dot.done .rd{background:var(--accent);}
.rail-dot.active .rd{background:var(--accent); box-shadow:0 0 0 4px var(--accent-tint);}
.rail-dot .rlabel{display:none;}
.rail-dot.active .rlabel{display:inline; color:var(--fg-secondary); font-weight:500;}
.rail-line{width:22px;height:1px;background:var(--border);}

.polish-row{display:grid; grid-template-columns:repeat(3,1fr); gap:14px;}
.pcard{
  border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface-2);
  padding:14px; display:flex; flex-direction:column; gap:10px; box-shadow:var(--e1);
  animation:cardin var(--dur-std) var(--ease-out) both;
}
.pcard:nth-child(2){animation-delay:70ms;}
.pcard:nth-child(3){animation-delay:140ms;}
@keyframes cardin{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.pcard-title{font-size:13px; font-weight:600; letter-spacing:-.01em;}
.pcard-help{font-size:12px; color:var(--fg-muted); line-height:1.45; flex:1;}
.pcard .link{align-self:flex-start;}
.mock{border-radius:8px; overflow:hidden;}

/* favicon-in-tab mock */
.tabmock{background:var(--bg-sunken); border:1px solid var(--border-subtle); padding:8px 8px 0;}
.tabmock-tab{display:inline-flex; align-items:center; gap:6px; max-width:100%; background:var(--surface); border:1px solid var(--border-subtle); border-bottom:none; border-radius:8px 8px 0 0; padding:5px 9px; font-size:var(--mock-fs-tab); color:var(--fg-secondary);}
.tabmock-title{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.tabmock-bar{height:8px; background:var(--surface); border-top:1px solid var(--border-subtle); margin:0 -8px;}

/* [share-fix] share-preview = een echte chat: verstuurde bubbel + link-kaart (WhatsApp-grammatica).
   De .og clipt zijn beeld nu ABSOLUUT binnen de kaart, dus de afbeelding kan nooit meer overlappen. */
.sharemock--chat{border:1px solid var(--border-subtle); background:var(--bg-sunken); padding:18px 16px; display:flex; justify-content:center; border-radius:var(--radius-md);}
.chat-bubble{width:min(300px,100%); background:var(--surface); border:1px solid var(--border-subtle); border-radius:16px 16px 4px 16px; padding:6px; box-shadow:var(--e1); display:flex; flex-direction:column; gap:5px;}
.chat-card{border-radius:10px; overflow:hidden; background:var(--bg-sunken); border:1px solid var(--border-subtle);}
.og{aspect-ratio:1.91 / 1; position:relative; overflow:hidden;}   /* [9.1e] echte OG-verhouding; [share-fix] altijd geclipt */
.og > .og-img{position:absolute; inset:0;}   /* ALLEEN binnen de .og-kaart absoluut; losse thumbs blijven in flow */
/* [share-anim] merk-animatie-chip op het bewegende share-beeld */
.og-anim-chip{position:absolute; top:6px; right:6px; z-index:2; font-size:9px; font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; padding:3px 8px; border-radius:var(--radius-full); background:rgba(20,20,18,.72); color:var(--fg-onInk);}
.og-meta{padding:8px 10px;}
.og-title{font-size:13px; font-weight:600; color:var(--fg); line-height:1.35;}
.og-domain{font-size:var(--mock-fs-og-domain); color:var(--fg-muted); margin-top:3px;}
.og-desc{font-size:11px; color:var(--fg-secondary); margin-top:2px; line-height:1.45; overflow:hidden; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}
.chat-link{font-size:12px; color:var(--fg-secondary); padding:0 6px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.chat-meta{align-self:flex-end; display:inline-flex; align-items:center; gap:3px; font-size:10px; color:var(--fg-muted); padding:0 6px 2px;}
.chat-meta svg{width:14px; height:9px;}
/* [share-anim] de merk-animatie: het echte verstuur-moment in drie beats.
   1) de bubbel popt binnen (verzonden), 2) de link-kaart unfurlt een tel later (zoals een echte
   chat-app de preview ophaalt), 3) de vinkjes: een grijs -> twee grijs (bezorgd) -> twee groen
   (gelezen). Speelt opnieuw bij elke render; reduced motion = meteen de eindstaat. */
.chat-bubble{animation:chatIn .38s var(--ease-out) backwards;}
@keyframes chatIn{from{opacity:0; transform:translateY(10px) scale(.96);}}
.chat-card{animation:chatUnfurl .45s var(--ease-out) .5s backwards;}
@keyframes chatUnfurl{from{opacity:0; transform:translateY(5px);}}
.chat-meta svg{color:var(--fg-muted); animation:chatRead .01s linear 1.8s forwards;}
@keyframes chatRead{to{color:var(--accent-solid);}}
.chat-meta .ck2{opacity:0; animation:chatDeliver .01s linear 1.1s forwards;}
@keyframes chatDeliver{to{opacity:1;}}
.reduced .chat-bubble,.reduced .chat-card,.reduced .chat-meta svg,.reduced .chat-meta .ck2{animation:none;}
.reduced .chat-meta svg{color:var(--accent-solid);}
.reduced .chat-meta .ck2{opacity:1;}

/* [G9] coming-soon empty-state: the brand-colour initial chip (favicon / serp dot / tab / share),
   plus the share graphic as a soft brand wash. No borrowed demo content. */
.cs-fav{display:inline-grid; place-items:center; width:18px; height:18px; flex:none; border-radius:var(--radius-xs);
  background:var(--brand-accent,var(--luma-blue)); color:var(--fg-onColor); font-family:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  font-weight:700; font-size:11px; line-height:1; letter-spacing:0;}
.cs-og{display:grid; place-items:center;
  background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--brand-accent,#0FB970) 16%, var(--surface)), var(--surface));}
.cs-og .cs-fav{width:30px; height:30px; border-radius:8px; font-size:var(--mock-fs-fav-lg);}
.preview-card__graphic .cs-fav{width:22px; height:22px; border-radius:6px; font-size:13px;}
.statuscard__thumb .cs-fav{width:20px; height:20px;}
#tabFav .cs-fav{width:15px; height:15px; font-size:var(--mock-fs-fav); border-radius:var(--mock-radius-fav);}
/* [9.2] de afgeleide initiaal vult z'n favicon-slot in tab/serp/upload-preview */
.favicon .cs-fav{width:100%; height:100%; border-radius:3px; font-size:var(--mock-fs-fav);}
.serp-top .favicon .cs-fav{font-size:11px; border-radius:4px;}
.fav-upload__preview .cs-fav{width:100%; height:100%; border-radius:6px; font-size:18px;}
/* [9.2] lege inbox-staat (geen verzonnen mail) + neutrale eigen-merk site-preview */
.mm-empty{font-size:var(--text-xs); color:var(--fg-muted); padding:9px 2px; line-height:1.4;}
.gen-mark{display:inline-grid; place-items:center; width:20px; height:20px; border-radius:var(--radius-xs); background:var(--brand-accent,var(--luma-blue)); color:var(--fg-onColor); font-size:11px; font-weight:700; flex:none;}
.gen-still{width:96px; height:74px; border-radius:10px; flex:none; background:radial-gradient(120% 120% at 50% 0%, color-mix(in srgb, var(--brand-accent,#0FB970) 20%, var(--surface)), var(--surface)); box-shadow:inset 0 0 0 1px var(--border-subtle);}
.gen-site .luma-btn{background:var(--brand-accent,var(--luma-blue)); color:var(--fg-onColor);}
.gen-site .luma-sublabel{display:none;}
/* [9.2 crisp&cool] koelere, crispere haarlijnen + puur-witte surfaces BINNEN de tiles (alleen daar) */
.preview-card, .preview-card__graphic, .mock{ --border-subtle:#E6EAF1; --border:#D9DEE8; }
.tabmock, .serpmock, .sharemock, .mailmock, .fwdmock, .bizmock, .gbpmock{ --surface:#FFFFFF; }

/* SERP mock */
/* [serp-fix] het echte-Google-frame: zoekbalk-pill + bron-regel + blauwe titel + beschrijving.
   Mocks staan altijd op wit (regel hierboven), dus de Google-blauw is een vaste waarde. */
.serpmock{--serp-link:#1a0dab; padding:14px; display:flex; flex-direction:column; gap:13px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border-subtle);}
.serp-searchbar{display:flex; align-items:center; gap:9px; height:34px; padding:0 13px; border:1px solid var(--border); border-radius:var(--radius-full); background:var(--surface); box-shadow:var(--e1); color:var(--fg); font-size:13px;}
.serp-searchbar svg{width:13px; height:13px; color:var(--fg-muted); flex:none;}
.serp-result{display:flex; flex-direction:column; padding:0 2px;}
.serp-src{display:flex; align-items:center; gap:9px; margin-bottom:5px;}
.serp-favwrap{width:26px; height:26px; border-radius:50%; background:var(--bg-sunken); border:1px solid var(--border-subtle); display:inline-flex; align-items:center; justify-content:center; flex:none;}
.serp-favin{width:16px; height:16px; display:inline-flex; overflow:hidden; border-radius:3px;}
.serp-srcmeta{display:flex; flex-direction:column; min-width:0;}
.serp-site{font-size:13px; color:var(--fg); line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.serp-url{font-size:11px; color:var(--fg-muted); line-height:1.3;}
.serp-title{font-size:17px; font-weight:400; color:var(--serp-link); letter-spacing:-.01em; line-height:1.3;}
.serp-desc{font-size:var(--mock-fs-serp-desc); color:var(--fg-secondary); margin-top:2px; line-height:1.5; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}

.polish-actions{display:flex; gap:10px; margin-top:2px;}

/* tweak (inline SERP edit) */
.tweak-field{margin-bottom:10px;}
.tweak-field label{display:block; font-size:12px; font-weight:500; color:var(--fg-secondary); margin-bottom:4px;}
.tweak-field input{width:100%; height:40px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--fg); font-size:14px;}
.tweak-field input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);}

/* =====================  S6: live reveal  ===================== */
.reveal{display:flex; flex-direction:column; gap:0;}
.viewport{
  border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-subtle);
  box-shadow:var(--e1);
  transition:height var(--dur-morph) var(--ease-morph), opacity var(--dur-std), margin var(--dur-morph) var(--ease-morph);
}
.payoff{
  display:grid; grid-template-columns:1.1fr .9fr; gap:20px; align-items:center;
  padding-top:22px; margin-top:22px; border-top:1px solid var(--border-subtle);
}
.live-line{font-size:clamp(20px,3vw,24px); font-weight:600; letter-spacing:-.02em; display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.live-line .check{display:inline-flex; color:var(--accent);}
.live-line .check svg{width:22px;height:22px;}
.live-line .r-domain-live{font-family:var(--font-mono); font-weight:500;}
.live-line .r-domain-live.pop{animation:domainpop .6s var(--ease-out);}
.payoff-actions{display:flex; gap:10px; margin-top:16px; flex-wrap:wrap;}
.share-slide{animation:slidein var(--dur-reveal) var(--ease-out) both; animation-delay:200ms;}
@keyframes slidein{from{opacity:0; transform:translateX(22px)}to{opacity:1; transform:none}}
.share-cap{font-size:var(--text-sm); color:var(--fg-muted); margin-top:8px; text-align:center;}
.share-slide .sharemock{box-shadow:var(--e2); border-radius:var(--radius-md);}
.share-slide .og{height:auto;}

/* =====================================================================
   [C3] Studio Luma — the warm ceramics demo client-site (scoped .luma-site).
   A real small maker: Mara, hand-thrown stoneware in Utrecht. This is the
   CLIENT brand, deliberately unlike our UI: ceramic palette + Hanken
   Grotesk (no serif), a built mug-still (no gradient orb), a clay-stamp "L".
   (visual-system.md §6 · art-direction.md §7 · copy.md §11)
   ===================================================================== */
/* [C7] Luma Press: a two-colour risograph press in Utrecht. Cool grey paper + ONE riso-blue
   spot ink; Hanken Grotesk display (no serif); a tangible printed sheet with 1.5px mis-
   registration + real overprint (no glow-disc). Bron: company/design/luma-c7/BUILD-SPEC.md. */
.luma-site{
  /* paper + ink - KOEL grijs-neutraal (bewust GEEN warm creme, GEEN ons #FAFAF8) */
  --luma-bg:#EDEFF3;          /* [9.2 crisp&cool] koel licht papier i.p.v. warm-ivoor, frisser */
  --luma-surface:#F7F9FC;     /* [9.2 crisp&cool] koel-wit oppervlak                     */
  --luma-ink:#1B1D21;         /* koele houtskool-inkt, blauw-zwart (vervangt #221C15)    */
  --luma-sub:#585C63;         /* koel leisteen-grijs subtekst (AA 5.35:1 op bg)          */
  --luma-line:#D8D5CC; --luma-paper:#F6F4EF;   /* knoptekst op print-blauw */        /* koele haarlijn (vervangt #E4D9C7)                       */
  /* DE ENE accent - een elektrische riso "Federal Blue", tonaal */
  --luma-spot-soft:#5B78F5;   /* lichtere blauw: tweede riso-laag / mis-registratie - DECORATIEF ONLY */
  --luma-accent:var(--luma-blue);         /* [FIX-C P7] aliases op de luma-blue-primitieven in de ene :root */
  --luma-accent-print:var(--luma-blue-print);
  --luma-accent-ink:var(--luma-blue-ink); /* diepe blauw: ALLE accent-TEKST (AA op bg en surface) */
  --luma-mark:var(--luma-blue);           /* favicon-spot + brand-accent-default */
  /* type - EEN reeds-geladen font, geen serif-stem (no-mono-op-klantsite blijft heel) */
  --luma-serif:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif; /* serif-alias behouden, nu Hanken (geen serif-stem meer) */
  --luma-sans:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif;
  position:relative; background:var(--luma-bg); color:var(--luma-ink); height:206px; overflow:hidden;
  font-family:var(--luma-sans);
}
/* riso grain over the whole site to kill vector flatness */
.luma-site::after{
  content:""; position:absolute; inset:0; pointer-events:none; z-index:2; opacity:.06; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='ln'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23ln)'/%3E%3C/svg%3E");
}
.viewport .luma-site{height:auto; min-height:330px;}
.luma-nav{display:flex; align-items:center; gap:9px; padding:16px 24px 4px; position:relative; z-index:3;}
.luma-nav b{font-family:var(--luma-serif); font-weight:700; font-size:var(--text-lead); letter-spacing:-.02em; color:var(--luma-ink);}
.luma-nav .luma-sublabel{font:600 10px/1 var(--luma-sans); letter-spacing:.16em; text-transform:uppercase; color:var(--luma-sub); margin-left:8px;}
.luma-nav nav{margin-left:auto; color:var(--luma-sub); font-family:var(--luma-sans); font-weight:500; font-size:var(--text-md);}
.luma-mark{display:block; width:100%; height:100%;}
.lmark{display:inline-flex;}
.luma-nav .lmark{width:22px; height:22px;}
/* type-led editorial hero: the words sit OVER the light, which bleeds off the right edge */
.luma-hero{position:relative; display:block; padding:clamp(12px,2.2vw,24px) clamp(22px,4vw,30px) 0; z-index:1;}
.luma-hero-copy{position:relative; z-index:1; max-width:66%;}
.luma-eyebrow{display:inline-block; font-family:var(--luma-sans); font-weight:600; font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--luma-accent-ink); margin-bottom:11px;}
.luma-h{font-family:var(--luma-serif); font-weight:700; font-size:clamp(32px,5.6vw,56px); line-height:.98; letter-spacing:-.03em; margin:0 0 12px; color:var(--luma-ink);}
.luma-sub{font-family:var(--luma-sans); font-size:15px; color:var(--luma-sub); margin:0; line-height:1.5; max-width:34ch;}
.luma-cta{display:flex; align-items:center; gap:16px; margin-top:16px;}
.luma-btn{display:inline-flex; align-items:center; height:38px; padding:0 18px; border-radius:var(--radius-full);
  background:var(--luma-accent-print); color:var(--luma-paper); font-family:var(--luma-sans); font-weight:600; font-size:14px;}
.luma-jlink{font-family:var(--luma-sans); font-weight:500; font-size:14px; color:var(--luma-ink);
  border-bottom:var(--border-emph) solid var(--luma-accent-print); padding-bottom:1px;}
/* [M5a] the printed sheet: absolutely placed, tilted, cropped by the right edge */
.luma-still{position:absolute; z-index:0; top:50%; right:clamp(-40px,-3.5vw,-14px);
  transform:translateY(-48%); width:clamp(150px,34%,240px); height:auto;
  /* echte KOELE slagschaduw onder het gekantelde vel */
  filter:drop-shadow(0 16px 26px rgba(27,29,33,.14));}
.luma-still svg{width:100%; height:100%; display:block;}
/* [M7a] papier-korrel OVER het vel - RECHTHOEKIG, GEEN border-radius:50% meer */
.luma-still::after{content:""; position:absolute; inset:0; pointer-events:none; opacity:.12;
  mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.1' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");}
/* [M6/§6] SIGNATURE: the press re-registers. The blue ink layer drifts ~1px and back. */
.luma-still .ink-blue{
  transform-box:fill-box; transform-origin:center;
  animation:lumaRegister 9s var(--ease-out) infinite;
  will-change:transform;
}
@keyframes lumaRegister{
  0%,100%{ transform:translate(0,0); }
  50%    { transform:translate(1px,-1px); }
}
/* MANDATORY reduced-motion twin: the print holds still, the static 1.5px mis-registration remains. */
.reduced .luma-still .ink-blue{ animation:none; }
.luma-shelf{position:relative; z-index:1; margin:16px 24px 0; padding-top:14px; border-top:1px solid var(--luma-line);}
.luma-shelf-label{font-family:var(--luma-sans); font-weight:600; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--luma-sub);}
.luma-products{display:flex; gap:24px; margin-top:9px;}
.luma-prod{display:flex; flex-direction:column; gap:2px;}
.luma-prod .pn{font-family:var(--luma-serif); font-weight:600; font-size:16px; letter-spacing:-.01em; color:var(--luma-ink);}
.luma-prod .pp{font-family:var(--luma-sans); font-size:14px; color:var(--luma-sub);}
.luma-note{font-family:var(--luma-serif); font-style:italic; font-size:15px; color:var(--luma-sub); margin:12px 24px 0;}
.luma-foot{font-family:var(--luma-sans); font-size:12px; color:var(--luma-sub); margin:5px 24px 16px; opacity:.92;}

/* thumbnail / og scaled luma (wordmark + corner glow; hero copy/shelf hidden) */
.luma-thumb{height:100%;}
.luma-thumb .luma-nav{padding:7px 9px 0; gap:5px;}
.luma-thumb .luma-nav b{font-size:11px;}
.luma-thumb .luma-nav .lmark{width:11px; height:11px;}
.luma-thumb .luma-nav nav,.luma-thumb .luma-eyebrow,.luma-thumb .luma-sub,.luma-thumb .luma-cta,
.luma-thumb .luma-shelf,.luma-thumb .luma-note,.luma-thumb .luma-foot{display:none;}
.luma-thumb .luma-hero{padding:2px 9px 0;}
.luma-thumb .luma-hero-copy{max-width:none;}
.luma-thumb .luma-h{font-size:15px; margin:2px 0; line-height:1;}
.luma-thumb .luma-still{width:30px; height:auto; right:6px; top:7px; transform:rotate(-4deg);}
.luma-thumb .luma-still::after{display:none;}                 /* grain UIT op tiny */
.luma-thumb .luma-still .ink-black{transform:translateX(calc(-1*var(--nav-nudge)));}  /* op-registratie: ink boven blauw, 0px netto */
.luma-thumb .luma-still .ink-blue{animation:none;}            /* shift UIT op tiny */

.og .luma-site{height:100%;}
.og .luma-nav{padding:9px 14px 0;}
.og .luma-nav b{font-size:14px;}
.og .luma-nav .lmark{width:14px; height:14px;}
.og .luma-nav nav,.og .luma-eyebrow,.og .luma-sub,.og .luma-cta,
.og .luma-shelf,.og .luma-note,.og .luma-foot{display:none;}
.og .luma-hero{padding:4px 14px 0;}
.og .luma-hero-copy{max-width:72%;}
.og .luma-h{font-size:24px; margin:3px 0; line-height:.98;}
.og .luma-still{width:96px; right:-8px; top:50%; transform:translateY(-46%) rotate(-4deg);}

/* =====================  stage foot  ===================== */
.stage-foot{margin-top:8px; display:flex; flex-direction:column; align-items:center; gap:8px; text-align:center;}
body:not(.is-tour):not(.is-playing) .stage-foot .btn{min-height:var(--control-h);}  /* [tik-doel] rustende walkthrough-CTA op 44px */
.is-loggedin .stage-foot{display:none;}   /* [9.1e] ingelogd = geen walkthrough/get-my-name-knoppen; die zijn voor nieuwe bezoekers */
body:has(.bring-flow) .stage-foot{display:none;}   /* [bring-wizard] gerichte flow: de walkthrough-CTA weg, houdt de pagina binnen de no-scroll-wet */
/* [David 2026-07-04 · Fix 4] MAAR tijdens de connect-tour loopt de bring-wizard als demo: her-toon de
   transport (chevrons/Pause) + cue, anders is de tour onbestuurbaar. */
body.is-tour:has(.bring-flow) .stage-foot{display:flex;}
/* [David 2026-07-04 · Fix 4] de pane is niet-interactief zolang een tour ACTIEF speelt: de in-pane knoppen
   (koop, authorize, bring-wizard-knoppen) mogen de demo niet kapen; de gebruiker stuurt via de transport.
   Op de rust-staat (playing=false) en na exit is de pane weer klikbaar. */
body.is-tour.is-playing #paneBody{pointer-events:none;}
.is-loggedin .bare-aside{display:none;}   /* [9.1f] ingelogd = geen "bring it / AI / log in"-deuren op de home; die zijn voor nieuwe bezoekers */
.btn[hidden],.motion-btn[hidden]{display:none !important;}   /* [9.2] hidden-attribuut moet .btn{display:inline-flex} overrulen (tour-CTA's verschenen anders altijd) */
.ai-paid-return{padding:28px 4px 8px;max-width:36rem}
.ai-paid-return h1{font-size:1.6rem;margin:0 0 8px;letter-spacing:-.02em;font-weight:650}
.ai-paid-return p{margin:0 0 12px;line-height:1.5;font-size:1.05rem}
.ai-paid-sign{margin:16px 0 0;color:var(--fg-muted);font-size:13px}
.stage-note{font-size:13px; color:var(--fg-muted); margin:0; max-width:46ch;
  /* [FIX-B P5] reserve the narrator's tallest wrap: the web-font swap and per-beat text swaps
     reflowed the whole foot (measured 0.07 layout-shift on phones at load) */
  min-height:37px;}
@media(max-width:480px){ .stage-note{min-height:55px;} }
.replay{display:none;}
.replay.show{display:inline-flex;}
/* [C0b defect #11] The transport lives UNDER the pane in NORMAL FLOW. It never uses
   position:sticky, so it can never overlap the pane content again. The pane is sized
   per-beat (see .is-playing .pane-body below) so the whole stage clears 1280x800 with
   no scroll and the pause control stays in view. Reduced-motion safe: no animation. */
.is-playing .stage-foot,.is-tour .stage-foot{margin-top:10px; gap:7px;}
/* [C0b layout] while a beat is actively PLAYING the end-CTA row carries no visible button
   (tourDone stays hidden until the Dashboard end, replay is hidden while playing), so collapse the
   empty row: it reclaims its height and the foot clears 1280x800 without the page scrolling. At the
   Dashboard rest beat .is-playing is off, so the row (with its now-visible CTA) returns. */
.is-playing .tourdone-row{display:none;}
.transport{display:inline-flex; align-items:center; justify-content:center; gap:10px;}
.transport[hidden]{display:none;}
.transport-step{display:inline-flex; align-items:center; justify-content:center;
  width:40px; height:40px; flex:0 0 auto; border-radius:var(--radius-sm);
  border:1px solid var(--border); background:var(--surface); color:var(--fg); cursor:pointer;
  transition:background var(--dur-micro), border-color var(--dur-micro), color var(--dur-micro);}
.transport-step:hover{background:var(--bg-sunken);}
.transport-step:focus-visible{outline:none; box-shadow:var(--ring);}
.transport-step svg{width:18px;height:18px;}
.transport-step[disabled]{opacity:.4; cursor:default;}
.transport-step[disabled]:hover{background:var(--surface);}
.tourdone-row{display:flex; align-items:center; justify-content:center; gap:14px; flex-wrap:wrap;}
.tourdone-row .replay{font-size:13px;}
/* [fix David] GEEN geneste pane-scroll meer: nooit een tweede scrollbalk OP het Safari-blok, niet in de
   walkthrough en niet op de echte blokken. De actieve beats (Name/Secure/Live) zijn al gecompacteerd
   (zie hieronder) zodat ze in beeld passen; is iets ooit langer, dan scrollt de PAGINA (een scrollbalk),
   nooit binnen de pane. De [C0b]-cap (max-height + overflow:auto) is verwijderd. */
/* [C0b point 2] the active tour beats (Name/Secure/Live) must fit with NO internal scroll. During the
   walkthrough the buy/result card is a NARRATIVE, not a config surface, so we hide the main-ext chip
   picker, the extras row, and the "Other extension? Type it" disclosure, leaving the headline +
   availability + price + the Buy CTA in view. The REAL (non-tour) buy flow is untouched and keeps the
   full ext-picker/extras. Scoped strictly to .is-playing / .is-tour. */
.is-playing .result.show,.is-tour .result.show{min-height:0;}
.is-playing .result-card,.is-tour .result-card{gap:0;}
.is-playing .mext,.is-tour .mext,
.is-playing .tld-row,.is-tour .tld-row,
.is-playing .tld-more,.is-tour .tld-more,
.is-playing .result-foot .link-muted,.is-tour .result-foot .link-muted{display:none;}
/* trim the narrative buy beat's surrounding chrome so headline + price + Buy CTA sit calmly in view */
.is-playing .spotted-sub,.is-tour .spotted-sub{display:none;}
/* [FIX-B P5] same discipline for the CONNECT beat: during the tour it is a narrative (the
   question + the reassurance + the Point-it-here door); the transfer upgrade, the paste-the-
   addresses details and the timing line are config for the real flow. Keeps the beat inside
   the height-stable tour pane on phones. */
.is-playing .move-option--transfer,.is-tour .move-option--transfer,
.is-playing .connect .ns-sub,.is-tour .connect .ns-sub,
.is-playing .connect .mo-body,.is-tour .connect .mo-body,
.is-playing .connect .timing-line,.is-tour .connect .timing-line{display:none;}
/* [bulk-fix] transfer is nu default-selected in de echte flow; de tour verbergt hem en toont de
   point-deur alsnog open + geselecteerd, zodat het verhaal-beat intact blijft */
.is-playing .move-option--point .mo-detail,.is-tour .move-option--point .mo-detail{display:flex;}
.is-playing .move-option--point,.is-tour .move-option--point{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); background:var(--surface);}
.is-playing .spotted-head,.is-tour .spotted-head{margin-bottom:12px;}
.is-playing .result.show,.is-tour .result.show{margin-top:10px;}
/* [FIX-C stab] phones: the fase-C type pass grew the owned/connect beats past the tour reserve
   (516 vs 385px on 390: windowed CLS crept to 0.10-0.28). Film-only, phone-only compaction in
   the same narrative discipline: the stage-note carries the reassurance during the film; the
   rollback line and the self-referencing fork are real-flow config. Every line stays in the
   real flows. */
@media(max-width:640px){
  .is-playing .connect .reassure-strip,.is-tour .connect .reassure-strip,
  .is-playing .connect .rollback-line,.is-tour .connect .rollback-line,
  .is-playing .connect .fork,.is-tour .connect .fork,
  .is-playing .owned-card .owned-registrar,.is-tour .owned-card .owned-registrar{display:none;}
}

/* =====================  toast  ===================== */
.toast-wrap{position:fixed; left:50%; bottom:28px; transform:translateX(-50%); z-index:60; display:flex; flex-direction:column; gap:8px; align-items:center; pointer-events:none;}
@media(max-width:759px){.toast-wrap{left:16px; right:16px; transform:none; align-items:center;} .toast{max-width:100%;}}
@media(min-width:760px){.toast-wrap{left:auto; right:28px; transform:none; align-items:flex-end;}}
.toast{
  display:flex; align-items:center; gap:10px; max-width:380px;
  padding:12px 16px; border-radius:var(--radius-md);
  background:var(--overlay); border:1px solid var(--border-subtle); box-shadow:var(--e3);
  font-size:14px; font-weight:500; color:var(--fg);
  animation:toastin var(--dur-std) var(--ease-out);
}
.toast .check{color:var(--accent); display:inline-flex;}
.toast .check svg{width:17px;height:17px;}
@keyframes toastin{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.toast.out{animation:toastout var(--dur-std) var(--ease-out) forwards;}
@keyframes toastout{to{opacity:0; transform:translateY(8px)}}

/* =====================================================================
   [C2] cyclus-2 components (visual-system §4.5, §5.13-5.18)
   ===================================================================== */

/* ---- buttons added in C2 ---- */
.btn-accent{background:var(--accent); color:var(--accent-contrast); box-shadow:var(--inset-top), var(--e1);}
.btn-accent:hover{background:var(--accent-hover);}
.btn-ghost-danger{background:transparent; color:var(--danger-text);}
.btn-ghost-danger:hover{background:var(--danger-tint); color:var(--danger);}

/* ---- the AI on-ramp (under the dropzone, S1) ---- */
.onramp{margin:14px 0 0; text-align:center; font-size:var(--text-md); color:var(--fg-muted);}
.onramp .link{font-size:var(--text-md);}
.onramp .spark{display:inline-flex; vertical-align:-3px; margin-right:5px; color:var(--accent);}
.onramp .spark svg{width:15px;height:15px;}

/* inline code in prose (S1b build hint, S3b) */
.code-inline{padding:1px 6px; background:var(--code-inline-bg); border-radius:var(--radius-xs);
  font:450 13px/1.4 var(--font-mono); color:var(--fg);}

/* ---- S1b: the two-door fork (§5.16) ---- */
.spotted-head{display:flex; flex-direction:column; gap:7px; margin-bottom:18px;}
.spotted-badge{display:flex; align-items:center; gap:10px; color:var(--fg); font-size:clamp(var(--text-lead),3vw,var(--text-2xl)); font-weight:600; letter-spacing:-.015em; line-height:1.2;}
.spotted-badge .sg{flex:none; display:inline-flex; color:var(--fg-secondary);}
.spotted-badge .sg svg{width:21px;height:21px;}
.spotted-sub{font-size:15px; color:var(--fg-secondary); margin:0;}
.pcard-title svg{width:16px;height:16px;}
.mail-glyph{display:inline-flex; color:var(--fg-secondary);}
.route-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:16px; align-items:stretch;}
.route-card{display:flex; flex-direction:column; gap:10px; background:var(--surface); border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); padding:18px 18px 18px; box-shadow:var(--e1);}
.route-card .rc-title{display:flex; align-items:center; gap:8px; font-size:16px; font-weight:600; letter-spacing:-.01em;}
.route-card .rc-title .ri{display:inline-flex; color:var(--fg-secondary);}
.route-card .rc-title .ri svg{width:18px;height:18px;}
.route-card .rc-body{font-size:var(--text-md); color:var(--fg-secondary); line-height:1.5; flex:1;}
.route-card .btn{margin-top:auto; width:100%;}
.spotted-later{margin:16px 0 0; font-size:var(--text-sm); color:var(--fg-muted); opacity:.85;}

/* ---- S3c: the AI deploy hand-off (§5.15) ---- */
.s3c{display:flex; flex-direction:column; gap:14px;}
.s3c-head{font-size:16px; font-weight:500; color:var(--fg); display:flex; align-items:center; gap:9px; flex-wrap:wrap;}
.s3c-head .secured{display:inline-flex; color:var(--accent);}
.s3c-head .secured svg{width:17px;height:17px;}
.s3c-head code{font-family:var(--font-mono); font-weight:500; font-size:16px; color:var(--fg);}
.code-block{display:flex; align-items:center; gap:12px; padding:12px 12px 12px 16px;
  background:var(--code-bg); border:1px solid var(--border-subtle); border-radius:var(--radius-md);}
.code-block__cmd{flex:1; min-width:0; overflow-x:auto; white-space:nowrap;
  font:450 14px/1.5 var(--font-mono); color:var(--code-fg);
  -webkit-mask-image:linear-gradient(90deg,var(--mask-ink) 86%,transparent);
          mask-image:linear-gradient(90deg,var(--mask-ink) 86%,transparent);
  scrollbar-width:none;}
.code-block__cmd::-webkit-scrollbar{display:none;}
.code-block__cmd.is-prompt{white-space:normal; -webkit-mask-image:none; mask-image:none;}
.drop-notice__list{margin:0; padding:0; list-style:none; display:flex; flex-direction:column; gap:4px;}
.drop-notice__list li{font-family:var(--font-mono); font-size:var(--text-sm); color:var(--fg-secondary);}
.code-block__flag{color:var(--code-flag);}
.secret-chip{display:inline-flex; align-items:center; gap:4px; padding:1px 6px; vertical-align:1px;
  background:var(--surface-2); border-radius:var(--radius-xs); color:var(--fg-secondary);}
.secret-chip .sl{display:inline-flex; color:var(--accent);}
.secret-chip .sl svg{width:13px;height:13px; vertical-align:-2px;}
.secret-chip .dots{color:var(--secret-dots); letter-spacing:.04em;}
.code-copy{flex:none; height:36px; padding:0 14px; border-radius:var(--radius-sm); border:1px solid var(--border);
  background:var(--surface); color:var(--fg); font-size:13px; font-weight:500; cursor:pointer;
  display:inline-flex; align-items:center; gap:7px; transition:background var(--dur-micro), color var(--dur-micro), border-color var(--dur-micro);}
.code-copy:hover{background:var(--bg-sunken);}
.code-copy svg{width:15px;height:15px;}
.code-copy.copied{color:var(--accent-text); border-color:var(--accent);}
.code-copy:focus-visible{outline:none; box-shadow:var(--ring);}
.copy-feedback{font-size:var(--text-sm); color:var(--fg-secondary); min-height:16px; margin-top:-4px;}
.cmd-note{font-size:var(--text-sm); color:var(--fg-muted); line-height:1.5; margin:0 0 2px;}
.cw-note{font-size:var(--text-sm); color:var(--fg-muted); line-height:1.5; margin:0;}
.what-happens{font-size:14px; color:var(--fg-secondary); line-height:1.55; margin:0;}
.ship-lede{font-size:14.5px; color:var(--fg-secondary); line-height:1.55; margin:0;}
.safety-line{display:flex; align-items:flex-start; gap:8px; margin:2px 0 0;
  font-size:14px; line-height:1.5; color:var(--fg-secondary);}
.safety-line .sf{flex:none; display:inline-flex; color:var(--accent); margin-top:2px;}
.safety-line .sf svg{width:16px;height:16px;}
.s3c-foot{display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap;
  margin-top:4px; padding-top:14px; border-top:1px solid var(--border-subtle);}
.killswitch{font-size:var(--text-sm); color:var(--fg-muted);}
/* [FIX-C P9] the designed AI wait-state */
.aiwait{display:flex; flex-direction:column; gap:var(--space-3);}
.aiwait-sub{margin:0; font-size:var(--text-sm); color:var(--fg-secondary); line-height:1.5; max-width:52ch;}
.aiwait-acts{display:flex; gap:var(--space-3); align-items:center; flex-wrap:wrap;}

/* ---- the switch / toggle (§5.13) ---- */
.switch{position:relative; flex:none; width:var(--switch-w); height:var(--switch-h); padding:0; border:none;
  border-radius:var(--radius-full); background:var(--switch-off); cursor:pointer;
  transition:background var(--dur-std) var(--ease-morph);}
.switch[aria-checked="true"]{background:var(--accent);}
.switch__thumb{position:absolute; top:2px; left:2px; width:var(--switch-thumb-d); height:var(--switch-thumb-d);
  border-radius:var(--radius-full); background:var(--switch-thumb);
  box-shadow:var(--e1), inset 0 0 0 .5px rgba(20,18,15,.06);
  transition:transform var(--dur-std) var(--ease-morph);}
.switch[aria-checked="true"] .switch__thumb{transform:translateX(var(--switch-travel));}
.switch:focus-visible{outline:none; box-shadow:var(--ring);}
.switch[aria-disabled="true"]{opacity:.5; cursor:not-allowed;}

/* ---- the Email card (§5.14) ---- */
/* [FIX-B P4] .cards-grid removed: its only emitter (the dashboard preview grid) is recomposed to .glance-rows */
.email-card{grid-column:span 1;}
.email-card .pcard-title{display:flex; align-items:center; gap:7px;}
.email-card .mail-glyph{flex:none;}
.email-offer{font-size:14px; color:var(--fg); margin:0;}
.email-offer code{font-family:var(--font-mono); font-size:var(--text-md);}
.email-offer code .at{color:var(--fg-muted);}
.addr-build{display:flex; align-items:center; gap:7px; flex-wrap:wrap; margin:2px 0 0;}
.alias-field{height:34px; width:96px; min-width:72px; max-width:150px; padding:0 10px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--fg);
  font-family:var(--font-mono); font-size:var(--text-md);}
.alias-field:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);}
.addr-build .at-fixed{font-family:var(--font-mono); font-size:var(--text-md); color:var(--fg);}
.addr-build .at-fixed .at{color:var(--fg-muted);}
.dest-row{font-size:13px; color:var(--fg-secondary); margin:0;}
.dest-row .mono{color:var(--fg);}
.toggle-row{display:flex; align-items:flex-start; gap:12px; padding:12px 0 0; margin-top:2px; border-top:1px solid var(--border-subtle);}
.toggle-copy{flex:1; min-width:0;}
.toggle-copy .tl{font-size:var(--text-md); font-weight:500; color:var(--fg); letter-spacing:-.005em;
  width:auto; height:auto; display:block; flex:initial; background:none; border-radius:0; padding:0; cursor:default;}   /* [9.1e] override de window-control .tl-stijl (botsing) zodat het label niet in een 12px-kolom valt */
.toggle-copy .ts{font-size:12px; color:var(--fg-muted); line-height:1.45; margin-top:3px;}
.email-card[data-send="on"] .toggle-copy .ts{color:var(--fg-secondary);}
.email-card .btn-accent{align-self:flex-start; margin-top:2px;}
.email-active{display:flex; flex-direction:column; gap:8px;}
.email-active .ea-line{font-size:13px; color:var(--fg-secondary); line-height:1.5;}
.email-active .ea-line .mono{color:var(--fg);}
.email-actions{display:flex; gap:8px; flex-wrap:wrap;}
.email-actions .btn{height:34px; padding:0 12px; font-size:13px;}

/* ---- S3b connect: the deep-link primary + demoted nameservers (§5.17) ---- */
.connect-lead .field-label{margin-bottom:8px;}
.connect-lead-row{display:flex; gap:10px; align-items:stretch;}
.connect-lead-row .field--domain{flex:1; height:48px; font-size:var(--text-base);}
.connect-lead-row .btn{flex:none; height:48px;}
.connect-step{display:flex; flex-direction:column; gap:10px;}
.deep-link{width:100%;}
.deep-link svg{width:17px;height:17px;}
.ns-sub{border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-sunken); overflow:hidden;}
.ns-sub summary{list-style:none; cursor:pointer; padding:11px 14px; font-size:var(--text-sm); color:var(--fg-muted);
  display:flex; align-items:center; gap:8px;}
.ns-sub summary::-webkit-details-marker{display:none;}
.ns-sub summary .chev{display:inline-flex; transition:transform var(--dur-std);}
.ns-sub summary .chev svg{width:14px;height:14px;}
.ns-sub[open] summary .chev{transform:rotate(90deg);}
.ns-sub .ns-body{padding:0 14px 14px; display:flex; flex-direction:column; gap:8px;}
/* [leek-begrijpelijkheid R1] de twee adressen UIT, zichtbaar op het terugkeer-scherm */
.ns-open{display:flex; flex-direction:column; gap:8px; margin:2px 0 2px;}
.ns-open__lead{margin:0; font-size:var(--text-sm); color:var(--fg-muted); line-height:1.5;}
/* [leek-begrijpelijkheid R1] de genummerde "waar vind ik het"-microflow (weinig tekst) */
.where-steps{margin:2px 0 0; padding:0 0 0 1.5em; display:flex; flex-direction:column; gap:6px;
  font-size:var(--text-sm); color:var(--fg-secondary); line-height:1.45;}
.where-steps li{padding-left:2px;}
.where-steps li::marker{color:var(--fg-muted); font-family:var(--font-mono); font-variant-numeric:tabular-nums;}
.timing-line{font-size:var(--text-sm); color:var(--fg-muted); display:flex; align-items:flex-start; gap:7px;}
.timing-line svg{width:15px;height:15px; flex:none; margin-top:1px; color:var(--fg-muted);}
.rollback-line{font-size:var(--text-sm); color:var(--fg-muted); line-height:1.5;}

/* ---- dashboard heading row (S4) ---- */
.dash-kop{font-size:14px; font-weight:500; color:var(--fg-secondary); margin:20px 0 12px;}

/* =====================================================================
   [C3] cyclus-3 components (visual-system §5.19-5.22, §4.6)
   ===================================================================== */

/* ---- the hero "Or just grab a domain" on-ramp (S1, on-ramp c) ---- */
.grab{margin:18px 0 0; padding:16px; border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  background:var(--surface-2);}
.grab-label{font-size:14px; font-weight:500; color:var(--fg); letter-spacing:-.005em; margin-bottom:8px; display:block;}
.grab-row{display:flex; gap:10px; align-items:stretch;}
.grab-row .field--domain{flex:1; height:48px; font-size:18px;}
.grab-go{flex:none; height:48px; width:48px; padding:0;}
.grab-go svg{width:18px;height:18px;}
.grab-help{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-muted); margin:10px 0 0;}
.grab-help .ga{display:inline-flex; color:var(--accent-text);}
.grab-help .ga svg{width:14px;height:14px;}

/* ---- the multi-TLD row (S2, §5.20) ---- */
.tld-row{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px; margin-top:12px;
  padding:11px 13px; background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  transition:opacity var(--dur-std);}
/* [FIX-C P8] the off-state row is quiet but never looks disabled (was opacity .5, read as dead) */
.tld-check{flex:none; width:20px; height:20px; padding:0; border-radius:var(--radius-xs); cursor:pointer;
  background:var(--accent); border:none; display:grid; place-items:center; color:var(--accent-contrast);}
.tld-check svg{width:13px;height:13px;}
.tld-check[aria-checked="false"]{background:transparent; border:var(--border-emph) solid var(--border-strong); color:transparent;}
.tld-chip{font-family:var(--font-mono); font-size:13px; font-weight:500; color:var(--tld-chip-fg, var(--fg));
  background:var(--bg-sunken); border:1px solid transparent; border-radius:var(--radius-xs); padding:4px 9px; cursor:pointer;
  position:relative; transition:border-color var(--dur-micro), background var(--dur-micro), color var(--dur-micro);}
/* [FIX-C P8] a real toggle: unchecked reads as tappable (outline chip, live cursor); pressed
   reads as chosen (green tint). Strikethrough is EXCLUSIVELY the taken-signal (domain convention). */
.tld-chip::after{content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%);}
.tld-chip:focus-visible{outline:none; box-shadow:var(--ring);}
.tld-chip[aria-pressed="false"]{background:var(--surface); border-color:var(--border); color:var(--fg-secondary);}
.tld-chip[aria-pressed="false"]:hover{border-color:var(--border-strong); color:var(--fg);}
.tld-chip[aria-pressed="true"]{background:var(--accent-tint); border-color:var(--accent); color:var(--accent-text);}
.tld-chip[data-taken="true"]{background:var(--bg-sunken); border-color:transparent; color:var(--fg-muted); text-decoration:line-through; cursor:default;}
.tld-chip[data-taken="true"]::after{content:none;}
.tld-row__price{margin-left:auto; font-family:var(--font-mono); font-size:13px; color:var(--fg-secondary);}
.tld-row__sub{flex-basis:100%; font-size:13px; color:var(--fg-muted); line-height:1.4;}
.tld-row[data-on="false"] .tld-row__price{visibility:hidden;}

/* ---- tap-to-edit card (S4, §5.19) ---- */
.edit-card{position:relative; cursor:pointer; transition:background var(--dur-micro), box-shadow var(--dur-micro);}
.edit-card[data-editing="true"]{cursor:default;}
.edit-card:not([data-editing="true"]):hover{background:var(--surface-2); box-shadow:var(--e2);}
.edit-card__edit{position:absolute; top:14px; right:14px; display:inline-flex; align-items:center; gap:4px;
  font-size:13px; font-weight:500; color:var(--edit-affordance, var(--fg-muted)); pointer-events:none;}
.edit-card:hover .edit-card__edit{color:var(--edit-affordance-hover, var(--fg-secondary));}
.edit-card__edit svg{width:14px;height:14px;}
.edit-card__fields{margin-top:14px; padding:14px; border-top:1px solid var(--border-subtle);
  background:var(--edit-zone-bg, var(--surface-2)); border-radius:var(--radius-sm);
  display:flex; flex-direction:column; gap:11px;}
.edit-card__prefill{display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:var(--text-sm); color:var(--fg-muted); line-height:1.4;}
.edit-card__prefill .link{font-size:var(--text-sm);}
.efield label{display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  font-size:12px; font-weight:500; color:var(--fg-secondary); margin-bottom:4px;}
.efield input{width:100%; height:38px; padding:0 11px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--fg); font-size:14px;}
.efield input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);}
.len-hint{font-family:var(--font-mono); font-size:var(--text-xs); color:var(--hint-ok, var(--success-text)); font-weight:450;}
.len-hint[data-over="true"]{color:var(--hint-over, var(--warn-text));}
.edit-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; margin-top:1px;}
.saved-tick{display:inline-flex; align-items:center; gap:5px; font-size:13px; font-weight:500;
  color:var(--saved-tick, var(--accent-text)); opacity:0; transition:opacity var(--dur-std);}
.saved-tick.show{opacity:1;}
.saved-tick svg{width:14px;height:14px; color:var(--accent);}
.swatches{display:flex; flex-wrap:wrap; gap:9px;}
.swatch{width:28px; height:28px; padding:0; border:none; border-radius:var(--radius-full); cursor:pointer;
  box-shadow:inset 0 0 0 1px rgba(20,18,15,.12);}
.swatch[aria-pressed="true"]{box-shadow:0 0 0 2px var(--surface),0 0 0 4px var(--ink);}

/* favicon sizing across our chrome tab / SERP / favicon-card mock (the clay stamp) */
.tab .favicon{width:14px; height:14px; display:inline-flex;}
.tabmock-tab .favicon{width:13px; height:13px; display:inline-flex;}
.serp-top .favicon{width:18px; height:18px; display:inline-flex; padding:0; border:none; background:none;}

/* ---- the email address-manager (S4, §5.21) ---- */
.addr-lead{font-size:var(--text-md); color:var(--fg-secondary); margin:0;}
.addr-list{display:flex; flex-direction:column; gap:9px; margin:4px 0 0;}
.addr-row{display:flex; flex-direction:column; gap:7px; padding:10px 12px; background:var(--surface-2);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);}
.addr-top{display:flex; align-items:center; gap:10px;}
.addr-email{display:flex; align-items:center; gap:2px; min-width:0; flex:1 1 auto; overflow:hidden;}
.addr-alias{height:32px; width:clamp(64px,34%,120px); padding:0 9px; border:1px solid var(--border);
  border-radius:var(--radius-xs); background:var(--surface); color:var(--fg); font-family:var(--font-mono); font-size:13px;}
.addr-alias:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);}
.addr-domain{font-family:var(--font-mono); font-size:13px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.addr-domain .at{color:var(--fg-muted);}
/* [FUNNEL slice C] gratis-subdomein-badge + "Get your own name"-upsell in de tile-adresbalk */
.addr-free{flex:none; margin-left:8px; font:600 10px/1 var(--font-sans); letter-spacing:.04em; text-transform:uppercase; color:#0FB970; background:rgba(15,185,112,.12); border-radius:5px; padding:3px 6px;}
.addr-getname{flex:none; margin-left:8px; font:600 12px/1 var(--font-sans); color:var(--fg); background:transparent; border:1px solid var(--border, rgba(0,0,0,.14)); border-radius:6px; padding:4px 9px; cursor:pointer; white-space:nowrap;}
.addr-getname:hover{background:var(--bg-sunken, rgba(0,0,0,.04));}
/* [David 2026-07-11] geblokte kaart = echt uitgeschakeld: donkerder, niet klikbaar, geen hover */
.statuscard.is-locked{opacity:.55; cursor:default; pointer-events:none; background:var(--bg-sunken,rgba(0,0,0,.03)); filter:grayscale(.35);}
.statuscard__value--locked{color:var(--fg-muted);}
.statuscard__lock{flex:none; margin-left:auto; opacity:.6; display:inline-flex; align-items:center;}
.addr-row .switch{flex:none; margin-left:auto;}
.addr-q{display:flex; align-items:baseline; gap:8px; flex-wrap:wrap;}
.addr-q-l{font-size:var(--text-sm); font-weight:500; color:var(--fg);}
.addr-q-s{font-size:var(--text-xs); color:var(--fg-muted); line-height:1.35;}
.addr-row[data-send="on"] .addr-q-s{color:var(--fg-secondary);}
.addr-remove{flex:none; width:26px; height:26px; padding:0; border:none; background:transparent;
  color:var(--fg-muted); cursor:pointer; border-radius:var(--radius-xs); font-size:var(--text-base); line-height:1;}
.addr-remove:hover{background:var(--bg-sunken); color:var(--fg);}
.addr-add{align-self:flex-start; height:34px; padding:0 12px; font-size:13px;}
.addr-add svg{width:15px;height:15px;}
.addr-note{font-size:12px; color:var(--fg-muted); margin:2px 0 0;}
.addr-tld{font-size:var(--text-sm); color:var(--fg-muted); margin:2px 0 0;}
.addr-tld .mono{color:var(--fg-secondary);}

/* the extra-TLD facet line under the dashboard hero (§10.1 / §5.18) */
.facet{font-size:var(--text-md); color:var(--fg-secondary); margin:12px 0 0;}
.facet .mono{color:var(--fg);}

/* ---- the coming-soon landing (S3d, §5.22) — OUR template, brand-accent wash ---- */
.coming-soon{position:relative; text-align:center; padding:48px 24px 52px; overflow:hidden;
  background:var(--bg); color:var(--fg); min-height:206px;}
.viewport .coming-soon{min-height:300px; display:flex; flex-direction:column; align-items:center; justify-content:center;}
.coming-soon::before{content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(62% 52% at 50% 0%, color-mix(in srgb, var(--brand-accent) 12%, transparent), transparent);}
.coming-soon > *{position:relative;}
.cs-mark{width:40px; height:40px; margin:0 auto 14px;}
.cs-mark .lmark{width:100%; height:100%;}
.cs-mark .cs-fav{width:100%; height:100%; border-radius:10px; font-size:20px;}
.coming-soon__name{font-family:"Hanken Grotesk",ui-sans-serif,system-ui,sans-serif; font-weight:700; font-size:clamp(var(--text-2xl),4vw,var(--text-3xl)); line-height:1.1; letter-spacing:-.02em; margin:0;}
.coming-soon__domain{font-family:var(--font-mono); font-weight:500; font-size:18px; color:var(--fg-secondary); letter-spacing:-.01em; margin:6px 0 0;}
.coming-soon__line{font-size:var(--text-base); color:var(--fg-secondary); margin:18px 0 0;}
/* [uc-page] premium under-construction: badge + ademende voortgangslijn in de merk-kleur */
.uc__eyebrow{display:inline-block; font-size:11px; font-weight:600; letter-spacing:.22em; text-transform:uppercase;
  color:var(--fg-muted); border:1px solid var(--border-subtle); border-radius:var(--radius-full);
  padding:5px 13px; background:var(--surface); margin-bottom:18px;}
.uc__bar{width:130px; height:2px; border-radius:2px; background:var(--border-subtle); margin:20px auto 0; overflow:hidden;}
.uc__bar span{display:block; height:100%; width:38%; border-radius:2px; background:var(--brand-accent,var(--accent-solid));
  animation:ucSlide 2.8s var(--ease-out) infinite;}
@keyframes ucSlide{0%{transform:translateX(-120%);}60%,100%{transform:translateX(320%);}}
.reduced .uc__bar span{animation:none;}
.is-dashboard .viewport--compact .coming-soon .uc__eyebrow{display:none;}   /* de thumbnail blijft compact */
.is-dashboard .viewport--compact .uc__bar{margin-top:10px;}
.coming-soon__line b{color:var(--brand-accent); font-weight:500;}
.coming-soon__line2{font-size:14px; color:var(--fg-muted); margin:6px 0 0;}
.coming-soon__email{font-family:var(--font-mono); font-size:var(--text-md); color:var(--fg-muted); margin:16px 0 0;}
.addsite{display:flex; gap:10px; flex-wrap:wrap; margin-top:16px;}

/* =====================================================================
   [C4] cyclus-4 components (visual-system §C4) — no-scroll dashboard,
   three-door page 1, forwarding facet, "type any extension".
   ALL values derived from existing tokens; no new colour, no new font.
   ===================================================================== */
/* [FIX-C P7] C4 component tokens (statuscard, doors, ext, hero, bb) moved into the ONE :root above. */

/* ---- C4.5 the dashboard hero, compacted (scoped — does NOT touch lumaSite elsewhere) ---- */
.viewport.viewport--compact{height:150px;}
.viewport.viewport--compact .luma-site{min-height:0; height:auto;}
.viewport.viewport--compact .coming-soon{min-height:0; padding:20px 22px;}
/* [C4 fix] while editing a status card, collapse the hero so Layer 2 never forces a page-scroll */
.reveal.editing .viewport{height:0; min-height:0; opacity:0; margin:0; border-width:0; pointer-events:none;}
/* [C8.x] geen geneste editor-scroll meer: de Pane scrollt als een geheel (Safari-fix) */
.reduced .viewport{transition:none;}
/* [C8.x] put-online: het vindbare drop+AI-blok op de coming-soon-staat */
.put-online{margin-top:14px; padding:16px; background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md);}
.put-online .po-head{font-weight:600; font-size:var(--text-lg); color:var(--fg);}
.put-online .po-sub{margin:4px 0 12px; font-size:13px; color:var(--fg-secondary);}
.put-online .po-acts{display:flex; gap:10px; flex-wrap:wrap;}

/* ---- C4.5 the compact dash-bar (Live chip + Visit + Copy link + kebab) ~40px ---- */
.dash-bar{display:flex; align-items:center; gap:10px; margin-top:10px; min-height:40px; flex-wrap:wrap;}
.dash-bar .btn{white-space:nowrap;}
@media(min-width:641px){ .dash-bar{flex-wrap:nowrap;} }
.dash-bar .chip{flex:none;}
.dash-bar__spacer{margin-left:auto;}
.dash-bar .btn{height:40px; padding:0 15px; font-size:var(--text-md);}
.dash-dom{font-family:var(--font-mono); font-size:var(--text-md); color:var(--fg-secondary);}
.vh{position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;}
.kebab{flex:none; width:40px; height:40px; padding:0; display:inline-grid; place-items:center; position:relative;
  border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); color:var(--fg-secondary); cursor:pointer;
  transition:background var(--dur-micro), color var(--dur-micro);}
/* [FIX-B] 44px hit-areas on the fase-B surfaces (same extender pattern as .dash-recheck/.dots) */
.kebab::after{content:""; position:absolute; inset:-2px;}
.dash-bar .btn{position:relative;}
.dash-bar .btn::after{content:""; position:absolute; inset:-2px 0;}
.kebab:hover{background:var(--bg-sunken); color:var(--fg);}
.kebab:focus-visible{outline:none; box-shadow:var(--ring);}
.kebab svg{width:18px;height:18px;}

/* ---- Layer 3: overflow menu (kebab) ---- */
.overflow-wrap{position:relative; flex:none;}
.overflow-menu .overflow-sep{height:1px; margin:5px 4px; background:var(--border-subtle);}
.overflow-menu{position:absolute; top:42px; right:0; z-index:40; min-width:230px; padding:6px;
  background:var(--overlay); border:1px solid var(--border-subtle); border-radius:var(--radius-md); box-shadow:var(--e3);
  display:flex; flex-direction:column; gap:1px;}
.overflow-menu[hidden]{display:none;}
.overflow-menu button{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  height:38px; padding:0 11px; border:none; background:transparent; color:var(--fg); font:500 var(--text-md)/1 var(--font-sans);
  border-radius:var(--radius-sm); cursor:pointer;}
.overflow-menu button:hover{background:var(--bg-sunken);}
.overflow-menu button:focus-visible{outline:none; box-shadow:var(--ring);}
.overflow-menu button svg{width:16px;height:16px; color:var(--fg-secondary); flex:none;}
/* [David 2026-07-08] premium identity header at the top of the account menu: avatar + "Signed in as" +
   the real email, so you always see which account you are in. */
#acctMenu[data-mode="account"]{min-width:252px;}
.acct-id{display:flex; align-items:center; gap:11px; padding:8px 9px 12px; margin:2px 2px 5px;
  border-bottom:1px solid var(--border-subtle);}
.acct-id__ava{flex:none; width:38px; height:38px; border-radius:50%; background:var(--accent-tint);
  color:var(--accent-text); font-weight:700; font-size:16px; display:flex; align-items:center;
  justify-content:center; text-transform:uppercase;}
.acct-id__meta{min-width:0; flex:1;}
.acct-id__label{font-size:11px; color:var(--fg-muted); letter-spacing:.02em;}
.acct-id__email{font-size:13.5px; font-weight:600; color:var(--fg); overflow:hidden;
  text-overflow:ellipsis; white-space:nowrap; margin-top:1px;}
.acct-row__badge{margin-left:auto; font-size:10.5px; font-weight:700; letter-spacing:.02em;
  padding:3px 9px; border-radius:999px;}
.acct-row__badge--warn{background:#FBEEDB; color:#9A6B00;}
.acct-row__badge--ok{background:#E7F7EF; color:#0B8F57;}

/* ===== [C1] Account Home ("All your domains") ===== */
.names-home{display:flex; flex-direction:column; gap:var(--space-4);}
.names-home__head{display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4);}
.names-home__count{font-size:13px; color:var(--fg-muted); margin:4px 0 0;}
/* [C3 defect P12] de kop-acties op de lobby: "Buy another domain" + het account-menu (kebab) ernaast */
.names-home__headacts{display:flex; align-items:center; gap:var(--space-2); flex:none;}
.account-menu-wrap .overflow-menu{right:0; left:auto; max-width:calc(100vw - 32px);}   /* [menu-fix] nooit buiten beeld */
.names-home__mid{margin:0 7px; opacity:.6;}
.names-list{display:flex; flex-direction:column; gap:var(--space-3);}
.name-group{border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  background:var(--surface); overflow:hidden; box-shadow:var(--e1);}
.name-group__head{display:flex; align-items:center; gap:var(--space-3); width:100%;
  padding:var(--space-3) var(--space-4); background:var(--surface-2); border:none; cursor:pointer;
  text-align:left; transition:background var(--dur-micro);}
.name-group__head:hover{background:var(--bg-sunken);}
.name-group__head:focus-visible{outline:none; box-shadow:var(--ring);}
.name-group__meta{display:flex; flex-direction:column; min-width:0; line-height:1.22;}
.name-group__name{font:500 15px/1.2 var(--font-sans); color:var(--fg); letter-spacing:-.01em;}
.name-group__sub{font-size:13px; color:var(--fg-secondary);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.name-group__head .chip{margin-left:auto;}    /* status-chip naar rechts, voor de chevron */
.name-group__open{flex:none; color:var(--fg-muted); display:inline-flex;}
.name-group__open svg{width:18px; height:18px;}
.name-group__names{display:flex; flex-direction:column;}
/* [9.1c] elke naam (hoofd + subs) is een klikbare rij -> opent de site/familie */
.name-row{display:flex; align-items:center; gap:var(--space-3); width:100%; text-align:left;
  background:none; border:0; border-top:1px solid var(--border-subtle); cursor:pointer; font:inherit;
  color:inherit; padding:9px var(--space-4); transition:background .15s ease;}
.name-row:hover{background:var(--surface-2);}
.name-row:focus-visible{outline:2px solid var(--accent-text); outline-offset:-2px;}
.name-row__dom{font-size:var(--text-md); color:var(--fg);}
.name-row__role{margin-left:auto; font-size:var(--text-3xs); font-weight:650; letter-spacing:.05em;
  text-transform:uppercase; color:var(--accent-text); background:var(--accent-tint);
  padding:2px 6px; border-radius:var(--radius-full);}
.name-row__points{margin-left:auto; font-size:12px; color:var(--fg-muted);}
.name-row__go{display:inline-flex; align-items:center; color:var(--fg-muted); opacity:.4;}
.name-row__role + .name-row__go,.name-row__points + .name-row__go{margin-left:6px;}
.name-row:hover .name-row__go{opacity:1;}
/* [9.1b C] de drie acties als een nette premium rij naast elkaar (gelijke breedte) */
/* [lobby-premium] familie-kaarten: hairlines, echt merk, mono-prijskolom, zachte lift + stagger */
.names-list{ display:flex; flex-direction:column; gap:12px; }
.famcard{ border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface); overflow:hidden; box-shadow:var(--e1);
  transition:box-shadow var(--dur-std), transform var(--dur-std); animation:famIn .4s var(--ease-out) backwards; animation-delay:calc(var(--i)*70ms); }
.famcard:hover{ box-shadow:var(--e3); transform:translateY(-1px); }
@keyframes famIn{ from{ opacity:0; transform:translateY(8px); } }
.reduced .famcard{ animation:none; }
.famcard__head{ display:flex; align-items:center; gap:11px; padding:12px 14px; background:var(--bg-sunken); border-bottom:1px solid var(--border-subtle); }
/* [mini-safari v2] een ECHT mini-schermpje: eigen dots-balk linksboven; grafiet-dots, gelijk aan de
   grote Living Pane (kleur op window-controls alleen bij hover; groen blijft ons enige signaal) */
.famcard__bar{ display:flex; gap:5px; padding:9px 13px 0; background:var(--bg-sunken); }
.famcard__bar i{ width:7px; height:7px; border-radius:50%; background:var(--border-strong); }
.famcard__head{ padding-top:9px; }
.famcard.is-closed .famcard__head{ border-bottom:none; }
@media (max-width:560px){
  /* [David 2026-07-18 mobiel] vaste twee regels: naam + chevron boven, status + prijs eronder.
     De chevron kan zo nooit meer als zwevend pijltje naar een eigen regel wrappen. */
  .famcard__head{ flex-wrap:wrap; row-gap:6px; }
  .famcard__head .famcard__open{ order:1; flex:1 1 0; min-width:0; }
  .famcard__head .famcard__fold{ order:2; }
  .famcard__head::after{ content:""; order:3; flex-basis:100%; height:0; }   /* harde regelbreuk */
  .famcard__head .chip{ order:4; margin-left:2px; }
  .fam-total{ order:5; margin-left:auto; min-width:0; text-align:right; }
}
.famcard__fold{ flex:none; width:28px; height:28px; display:grid; place-items:center; background:none; border:none; border-radius:50%; cursor:pointer; color:var(--fg-muted); transition:background var(--dur-micro), transform var(--dur-std) var(--ease-out); }
.famcard__fold:hover{ background:var(--surface); color:var(--fg); }
.famcard__fold svg{ width:13px; height:13px; transition:transform var(--dur-std) var(--ease-out); }
.famcard.is-closed .famcard__fold svg{ transform:rotate(-90deg); }
.famcard__open{ display:flex; align-items:center; gap:11px; flex:1; min-width:0; background:none; border:none; padding:0; cursor:pointer; font:inherit; text-align:left; }
/* [favicon-overzicht] hogere specificiteit dan .board-mark (die later in de sheet z'n groene
   --brand-accent zet); anders schijnt het merk-groen door de transparante hoeken van de favicon. */
.board-mark.fam-mark--img,.fam-mark--img{ background:var(--bg-sunken); overflow:hidden; padding:0; }
/* [David 2026-07-18] identiteits-avatars tonen het HELE icoon (contain, geen eigenaar-crop): de
   favicon-crop is voor het 16px-tabblad; hier oogde een gecropt logo als "afgesneden". */
.fam-mark--img .fav-img{ border-radius:inherit; min-width:0; min-height:0;
  background-size:contain; transform:none !important; }
.fam-total{ flex:none; font-size:13px; font-weight:500; color:var(--fg); white-space:nowrap; }
/* [David 2026-07-07] de maandelijkse e-mailkosten naast de jaarprijs in de familiekop: rustig, muted */
.fam-total__mo{ color:var(--fg-secondary); font-weight:400; margin-left:5px; }
/* [David 2026-07-07] mail die mee-eindigt met een opgezegd domein: gedempte rij + kalme "Ends"-markering */
.mailx-row.is-ending .mailx-row__addr{ color:var(--fg-muted); }
.mailx-end{ flex:none; font-size:11px; font-weight:600; letter-spacing:.01em; color:var(--warn-text); background:var(--warn-tint); border-radius:6px; padding:2px 8px; white-space:nowrap; }
.famcard__names{ display:flex; flex-direction:column; }
.name-row2{ display:flex; align-items:center; gap:9px; padding:10px 14px; border-bottom:1px solid var(--border-subtle); min-width:0; }
.name-row2__open{ display:flex; align-items:center; gap:9px; flex:1; min-width:0; background:none; border:none; padding:0; cursor:pointer; font:inherit; text-align:left; }
.name-row2__open:hover .name-row__dom{ text-decoration:underline; text-underline-offset:3px; }
.name-row2.is-expiring .name-row__dom{ color:var(--fg-muted); }
.name-price{ flex:none; min-width:92px; text-align:right; font-size:12px; color:var(--fg-secondary); }
.name-price.is-off{ text-decoration:line-through; color:var(--fg-muted); }
.name-exp-chip{ flex:none; }
.name-x{ flex:none; width:26px; height:26px; display:grid; place-items:center; border:none; background:none; border-radius:50%;
  color:var(--fg-muted); font-size:16px; line-height:1; cursor:pointer; transition:background var(--dur-micro), color var(--dur-micro); }
.name-x:hover{ background:var(--bg-sunken); color:var(--fg); }
.name-keep{ flex:none; font-size:13px; }
.name-change{ flex:none; font-size:13px; color:var(--fg-secondary); }
.name-change:hover{ color:var(--fg); }
/* [David 2026-07-12] choose-your-free-address inline editor */
.sub-edit{ padding:13px 14px; background:var(--bg-sunken); border-bottom:1px solid var(--border-subtle); }
.sub-edit__lead{ margin:0 0 9px; font-size:12px; color:var(--fg-secondary); line-height:1.45; }
.sub-edit__row{ display:flex; align-items:stretch; max-width:420px; border:1px solid var(--border-strong); border-radius:var(--radius-sm); overflow:hidden; background:var(--surface); }
.sub-edit__row:focus-within{ border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-tint); }
.sub-edit__input{ flex:1 1 auto; min-width:0; border:none; outline:none; background:transparent; padding:9px 10px; font-size:14px; color:var(--fg); }
.sub-edit__suffix{ flex:none; display:inline-flex; align-items:center; padding:0 10px; font-size:13px; color:var(--fg-muted); background:var(--bg-sunken); border-left:1px solid var(--border-subtle); }
.sub-edit__foot{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:9px; }
.sub-msg-slot{ flex:1 1 160px; min-height:16px; }
.sub-msg{ font-size:12px; color:var(--fg-muted); }
.sub-msg.is-ok{ color:var(--accent-text); }
.sub-msg.is-bad{ color:var(--danger,#C0322B); }
.sub-edit__acts{ margin-left:auto; display:flex; gap:7px; }
.sub-edit__acts .btn{ height:32px; padding:0 13px; font-size:13px; }
.name-expire__confirm{ display:flex; align-items:center; gap:8px; flex-wrap:wrap; padding:10px 14px; background:var(--bg-sunken);
  border-bottom:1px solid var(--border-subtle); font-size:13px; color:var(--fg-secondary); }
.nec-txt{ flex:1 1 220px; line-height:1.45; }
@media (max-width:560px){ .name-expire__confirm .nec-txt{ flex:1 1 100%; } }   /* mobiel: tekst op eigen regel, knoppen netjes eronder */
.fam-locked{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:11px 14px; border-top:1px solid var(--border-subtle); }
.fam-locked__txt{ font-size:13px; color:var(--fg-muted); }
.famcard__foot{ display:flex; align-items:center; padding:9px 14px 10px; }
.famcard__cancel{ margin-left:auto; color:var(--danger-text); font-size:13px; }
.famcard__cancel:hover{ color:var(--danger); }
.famcard__addsub{ display:inline-flex; align-items:center; gap:6px; font-size:13px; font-weight:500; }
.famcard__addsub svg{ width:13px; height:13px; }
.subadd-chips{ display:flex; flex-wrap:wrap; gap:7px; padding:0 14px 13px; }
.mail-row{ width:100%; background:none; border:none; border-bottom:1px solid var(--border-subtle); cursor:pointer; font:inherit; }
.mail-row:hover .mail-row__lab{ text-decoration:underline; text-underline-offset:3px; }
.mail-row__ico{ display:inline-flex; flex:none; color:var(--fg-muted); }
.mail-row__ico svg{ width:14px; height:14px; }
.mail-row__lab{ font-size:13px; font-weight:500; color:var(--fg); flex:none; }
.mail-row__go{ pointer-events:none; }
.mail-row__go svg{ width:12px; height:12px; transform:rotate(90deg); transition:transform var(--dur-std) var(--ease-out); }   /* uitklap-chevron: omlaag als dicht */
.mail-row.is-open .mail-row__go svg{ transform:rotate(-90deg); }   /* en omhoog als open */
/* [email-v7] nul is geen doorstreping waard: gewoon muted */
.name-price.is-zero{ color:var(--fg-muted); text-decoration:none; }
.ee-card__price--zero{ color:var(--fg-muted); background:transparent; border-color:var(--border-subtle); }
.mailx{ background:var(--bg-sunken); border-bottom:1px solid var(--border-subtle); }
.mailx-cap{ font-size:12px; color:var(--fg-muted); margin:0; padding:9px 14px 4px; }
.mailx-row{ display:flex; align-items:center; gap:9px; padding:7px 14px; }
.mailx-row__addr{ flex:1; min-width:0; font-size:13px; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mailx-foot{ padding:6px 14px 11px; }
.mailx-foot .link{ display:inline-flex; align-items:center; gap:5px; font-size:13px; }
.mailx-foot .link svg{ width:11px; height:11px; }
/* [hover] alles wat klikbaar is licht op: rijen, expander, add-sub, kaart-kop */
.name-row2,.mail-row{ transition:background var(--dur-micro); }
.name-row2:hover,.mail-row:hover{ background:var(--bg-sunken); }
.mailx-row{ transition:background var(--dur-micro); }
.mailx-row:hover{ background:var(--surface); }
.famcard__addsub{ padding:5px 9px; margin:-5px -9px; border-radius:var(--radius-sm); transition:background var(--dur-micro); }
.famcard__addsub:hover{ background:var(--bg-sunken); text-decoration:none; }
.famcard__open:hover .name-group__name{ text-decoration:underline; text-underline-offset:3px; }
/* [familie-overname] het "family found"-paneel in de connect-stap */
.fam-found{ border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface); padding:11px 13px; transition:opacity var(--dur-std); }
.fam-found.is-off .ff-chips{ opacity:.35; }
.fam-found__head{ display:flex; align-items:center; gap:10px; }
.fam-found__txt{ flex:1; font-size:13px; color:var(--fg-secondary); line-height:1.45; min-width:0; }
.ff-chips{ display:flex; flex-wrap:wrap; gap:6px; margin-top:8px; transition:opacity var(--dur-std); }
.ff-chip{ font-size:11px; color:var(--fg); background:var(--bg-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius-full); padding:3px 9px; }
.fam-none{ margin:2px 0 0; }
/* [billing-v2] account-brede billing: dezelfde grammatica als de familie-kaarten */
.own-flow--wide{ max-width:560px; }
.bill-fam{ border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface); overflow:hidden; }
.bill-fam__head{ display:flex; align-items:center; gap:10px; padding:10px 13px; background:var(--bg-sunken); border-bottom:1px solid var(--border-subtle); }
.bill-fam__name{ flex:1; font-size:14px; font-weight:600; color:var(--fg); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bill-row{ display:flex; align-items:center; gap:9px; padding:8px 13px; border-bottom:1px solid var(--border-subtle); }
.bill-row:last-child{ border-bottom:none; }
.bill-row__dom{ flex:1; min-width:0; display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.bill-row__dom svg{ width:13px; height:13px; color:var(--fg-muted); flex:none; }
.bill-row.is-exp .bill-row__dom{ color:var(--fg-muted); }
/* [David 2026-07-07] de kop is klikbaar (uitklapluik): volle breedte knop + draaiende chevron */
.bill-row--btn{ width:100%; background:none; border:none; border-bottom:1px solid var(--border-subtle); cursor:pointer; font:inherit; text-align:left; }
.bill-row--btn:last-child{ border-bottom:none; }
.bill-row--btn:hover{ background:var(--bg-sunken); }
.bill-row__chev{ flex:none; display:inline-flex; color:var(--fg-muted); transition:transform var(--dur-micro); }
.bill-row__chev svg{ width:15px; height:15px; }
.bill-row--btn[aria-expanded="true"] .bill-row__chev{ transform:rotate(180deg); }
/* [Fable/David] per-domein opzeg-rijen onder de billing-domeinregel */
.bill-sublist{display:flex; flex-direction:column;}
.bill-subrow .mailx-end{margin-left:auto;}
.bill-subrow{display:flex; align-items:center; gap:10px; padding:6px 12px 6px 30px; font-size:12.5px; border-top:1px solid var(--border-subtle);}
.bill-subrow__nm{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--fg-secondary);}
.bill-subrow__pr{color:var(--fg-muted); white-space:nowrap;}
.bill-subrow__pr.is-strike{text-decoration:line-through;}
.bill-subrow__act{flex:none; font-size:12.5px;}
.link-danger{color:var(--danger);}
.bill-subrow.is-exp .bill-subrow__nm{color:var(--fg-muted);}
.pay-row{ display:flex; align-items:center; gap:10px; padding:9px 13px; border-bottom:1px solid var(--border-subtle); }
.pay-row:last-child{ border-bottom:none; }
.pay-row__ico{ display:inline-flex; flex:none; color:var(--fg-secondary); }
.pay-row__ico svg{ width:15px; height:15px; }
.pay-row__lab{ flex:1; min-width:0; font-size:13px; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.pay-row__def{ flex:none; }
.pay-row__mkdef{ flex:none; font-size:12px; }
.acct-total{ display:flex; justify-content:flex-end; align-items:baseline; gap:7px; font-size:var(--text-sm); color:var(--fg-secondary); margin:0 2px; flex-wrap:wrap; }
.acct-total__plus{ color:var(--fg-muted); }
.acct-total__sub{ font-size:11px; color:var(--fg-muted); }
.acct-total b{ color:var(--fg); font-weight:600; }
@media (max-width:560px){
  .name-price{ min-width:72px; font-size:11px; }
  .famcard__head{ flex-wrap:wrap; }
  .fam-total{ margin-left:auto; }
  .name-row2 .name-row__points,.name-row2 .name-row__role{ white-space:nowrap; font-size:10px; }
  .name-row2 .name-row__dom{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
}
.names-home__acts{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--space-3);}   /* [update-site] 4 acties: 2x2 op desktop/tablet */
.names-home__acts .btn{width:100%;}
@media (max-width:560px){ .names-home__acts{grid-template-columns:1fr;} }
.names-foot{font-size:13px; color:var(--fg-muted); text-align:center; margin:2px 0 0;}
/* [FIX-A P2] de ontworpen lege-account-staat: warm, een duidelijke eerste actie */
.acct-empty{display:flex; flex-direction:column; align-items:flex-start; gap:12px;
  padding:20px 18px; background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-sm);}
.acct-empty__lead{margin:0; font-size:14px; color:var(--fg-secondary); line-height:1.5; max-width:44ch;}
.acct-empty__alt{margin:0; font-size:13px; color:var(--fg-muted); line-height:1.45;}
.acct-empty__alt .link, .names-foot .link{text-decoration:underline; text-underline-offset:3px; color:inherit;}
.names-foot .link{font:inherit; color:inherit;}
/* [FIX-A P2] het expliciete voorbeeldaccount draagt een duidelijke banner */
/* [Fable/David] het adres in de balk opent de ECHTE live site (alleen backed dashboards) */
.pane.is-browser #addrDomain{cursor:pointer;}
.grab-help:empty{display:none;}
/* [Fable] de echte site-preview: iframe bovenop de mock-hero (zelfde afronding, niet klikbaar) */
.viewport{position:relative;}
.vf-real{position:absolute; inset:0; width:100%; height:100%; border:0; border-radius:inherit;
  background:var(--surface); pointer-events:none;}
/* [David 2026-07-08] the live-site preview as a self-sized framed block (its own height, so it never
   collapses like the absolute overlay did). [David 2026-07-08 avond] a true scaled site-thumbnail:
   render the page into a 2.5x-larger logical viewport and scale it back to 0.4, so the WHOLE page
   (the coming-soon layout is ~476px tall) fits a compact card, nothing clipped top+bottom -- and the
   card stays short so the rest of the dashboard reads in one glance. No scroll needed (the whole page
   is shown), so it stays a non-interactive picture. width/height:250% are 1/scale; % keeps it responsive. */
.vf-frame{height:210px; padding:0; background:#fff;}
.vf-live{display:block; width:250%; height:250%; border:0; background:#fff;
  transform:scale(.4); transform-origin:top left; pointer-events:none;}
/* [David 2026-07-18] op een muis-apparaat is de preview LEVEND: hover erover en je scrollt (en klikt)
   de echte pagina, precies wat een bezoeker ziet. Op touch blijft hij een plaatje: een interactieve
   iframe zou daar de paginascroll gevangen houden. Framed page-loads tellen nooit mee (beacon skipt
   in een iframe), dus de eigen preview vervuilt de statistieken niet en toont geen consent-banner. */
@media (hover:hover) and (pointer:fine){ .vf-live{pointer-events:auto;} }
/* [Fable] kale-kaart-betaalblok naast de wallets (Payment Element + eigenaars-velden) */
@media (max-width:480px){ .wallet-btn .w-label em{display:none;} }   /* [Fable] geen 3-regel-knop op 375 */
.dth-pay__alt{margin-top:12px; border-top:1px solid var(--border-subtle); padding-top:12px;
  display:flex; flex-direction:column; gap:10px;}
.dth-pay__or{margin:0; font-size:13px; color:var(--fg-muted);}
.dth-bill{display:flex; flex-direction:column; gap:8px;}
.dth-bill .field--domain{width:100%; font-size:14px;}
.dth-bill__row{display:flex; gap:8px;}
.dth-bill__row .field--domain{flex:1; min-width:0;}
/* [Fable] het brandbar-hamburgermenu (account): zelfde overflow-grammatica, uitgelijnd rechtsonder de knop */
#loginBtn[hidden]{display:none;}   /* het hidden-attribuut wint van de .toggle-display */
/* [Fable/David] na de walkthrough is het demo-dashboard alleen KIJKEN: niets in de pane klikbaar */
.is-tourdone .pane{pointer-events:none; user-select:none;}
.is-tourdone .pane .tl{pointer-events:none;}
/* [Fable/David] Mailboxen-overzicht + inbox */
/* [Fable/David] gift-nudges op de lobby */
.gift-nudge{display:flex; align-items:center; gap:10px; margin:0 0 12px; padding:10px 14px; background:var(--accent-tint); border-radius:var(--radius-md);}
.gift-nudge__ico{flex:none; color:var(--accent-text); display:inline-flex;}
.gift-nudge__ico svg{width:16px; height:16px;}
.gift-nudge__txt{flex:1; min-width:0; font-size:13px; color:var(--fg);}
.gift-pending{margin:0 0 10px; font-size:12.5px; color:var(--fg-muted);}
.mbx-list{display:flex; flex-direction:column; gap:16px;}
.mbx-group__head{font-size:12px; color:var(--fg-muted); margin:0 2px 6px; letter-spacing:.02em;}
.mbx-row{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--surface);
  border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:11px 13px; cursor:pointer;
  transition:background var(--dur-micro),border-color var(--dur-micro);}
.mbx-row + .mbx-row{margin-top:8px;}
.mbx-row:hover{background:var(--bg-sunken); border-color:var(--fg-secondary);}
.mbx-row__ava{flex:none; width:34px; height:34px; border-radius:50%; background:var(--accent-tint);
  color:var(--accent-text); font-weight:600; display:flex; align-items:center; justify-content:center; font-size:14px;}
.mbx-row__meta{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1;}
.mbx-row__addr{font-size:14px; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mbx-row__sub{font-size:12px; color:var(--fg-muted);}
.mbx-row__chev{flex:none; color:var(--fg-muted); display:inline-flex;}
.mbx-row__chev svg{width:16px; height:16px;}
.inbox{display:flex; flex-direction:column; min-height:360px;}
.inbox__head{display:flex; align-items:center; gap:10px; padding:2px 2px 12px; border-bottom:1px solid var(--border-subtle);}
.inbox__back{background:none; border:none; cursor:pointer; color:var(--fg-secondary); display:inline-flex; transform:rotate(180deg); padding:4px;}
.inbox__back svg{width:18px; height:18px;}
.inbox__addr{flex:1; font-size:15px; color:var(--fg);}
.inbox__manage{width:32px; height:30px;}
.inbox__cols{display:flex; flex-direction:column; gap:14px; padding-top:18px;}
.inbox__list{min-height:200px; display:flex; align-items:center; justify-content:center;}
.inbox__empty{text-align:center; color:var(--fg-muted); display:flex; flex-direction:column; align-items:center; gap:6px;}
.inbox__empty-ico{opacity:.5;} .inbox__empty-ico svg{width:30px; height:30px;}
.inbox__empty-t{margin:6px 0 0; font-size:15px; font-weight:600; color:var(--fg-secondary);}
.inbox__empty-s{margin:0; font-size:13px;}
.inbox__compose{display:flex; flex-direction:column; align-items:center; gap:8px; border-top:1px solid var(--border-subtle); padding-top:14px;}
.inbox__use{margin:0; font-size:12px; color:var(--fg-muted);}
/* [deel B webmail] de ECHTE inbox: berichtenlijst, leesvenster en compose in dezelfde mailbox-shell */
.inbox__list.is-full{display:block; min-height:0;}
.mbxm-note{margin:0; font-size:var(--text-sm); color:var(--fg-muted); text-align:center; padding:34px 0;}
.mbxm-row{display:block; width:100%; text-align:left; background:none; border:0; border-bottom:1px solid var(--border-subtle); border-radius:0; padding:11px 8px; cursor:pointer; font:inherit; color:var(--fg);}
.mbxm-row:hover{background:var(--bg-sunken);}
.mbxm-row__top{display:flex; align-items:center; gap:8px; min-width:0;}
.mbxm-row__dot{width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none;}
.mbxm-row__from{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-md); font-weight:500; color:var(--fg-secondary);}
.mbxm-row.is-unread .mbxm-row__from{font-weight:650; color:var(--fg);}
.mbxm-row__when{flex:none; font-size:var(--text-xs); color:var(--fg-muted); font-variant-numeric:tabular-nums;}
.mbxm-row__subj{display:block; margin-top:2px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-sm); color:var(--fg-secondary);}
.mbxm-row.is-unread .mbxm-row__subj{color:var(--fg); font-weight:600;}
.mbxm-row__snip{display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:var(--text-sm); color:var(--fg-muted);}
.mbxm-msg__subj{margin:8px 0 10px; font-size:var(--text-lead); font-weight:600; letter-spacing:-.01em; overflow-wrap:anywhere;}
.mbxm-msg__meta{margin:0 0 2px; font-size:var(--text-sm); color:var(--fg-secondary); overflow-wrap:anywhere;}
.mbxm-msg__meta b{color:var(--fg); font-weight:600;}
.mbxm-msg__when{margin:2px 0 14px; font-size:var(--text-xs); color:var(--fg-muted);}
.mbxm-msg__body{border-top:1px solid var(--border-subtle); padding-top:14px;}
.mbxm-msg__text{margin:0; white-space:pre-wrap; overflow-wrap:anywhere; font:inherit; font-size:var(--text-md); line-height:1.6; color:var(--fg);}
.mbxm-frame{display:block; width:100%; height:min(52vh, 420px); border:0; border-radius:8px; background:var(--white);}
.mbxm-att{margin:14px 0 0; font-size:var(--text-xs); color:var(--fg-muted);}
.mbxm-att b{color:var(--fg-secondary); font-weight:500;}
.mbxm-acts{display:flex; gap:8px; margin-top:16px;}
.mbxc{display:flex; flex-direction:column; gap:10px; padding-top:4px;}
.mbxc__head{margin:4px 0 0; font-size:var(--text-lg); font-weight:600;}
.mbxc__from{margin:0 0 2px; font-size:var(--text-xs); color:var(--fg-muted);}
.mbxc__field{width:100%; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--fg); font:inherit; font-size:var(--text-md); transition:border-color var(--dur-std), box-shadow var(--dur-std);}
input.mbxc__field{height:44px; padding:0 12px;}
textarea.mbxc__field{min-height:150px; padding:10px 12px; resize:vertical; line-height:1.55;}
.mbxc__field:focus{outline:none; border-color:var(--border-strong); box-shadow:0 0 0 3px rgba(120,120,120,.12);}
.mbxc__field.is-locked{background:var(--bg-sunken); color:var(--fg-secondary); pointer-events:none;}
.mbxc__acts{display:flex; gap:8px; align-items:center; margin-top:2px;}
.mbxc__attach{display:flex; flex-direction:column; gap:6px; align-items:flex-start;}
.mbxc__chips{display:flex; flex-wrap:wrap; gap:6px;}
.mbxc__chips:empty{display:none;}
.mbxc__chip{display:inline-flex; align-items:center; gap:6px; max-width:100%; border:1px solid var(--border); border-radius:999px; padding:4px 6px 4px 12px; font-size:var(--text-sm); background:var(--surface);}
.mbxc__chip .mono{overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:220px;}
.mbxc__chipsize{color:var(--fg-muted); flex:none;}
.mbxc__chipx{border:0; background:none; color:var(--fg-muted); cursor:pointer; font-size:15px; line-height:1; padding:2px 6px; border-radius:999px;}
.mbxc__chipx:hover{color:var(--fg);}
.mbxm-attrow{display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;}
.mbxm-attbtn{cursor:pointer; font:inherit; padding:6px 12px; transition:border-color var(--dur-std);}
.mbxm-attbtn:hover{border-color:var(--fg-muted);}
.mbxm-attbtn:disabled{opacity:.55; cursor:default;}
/* [webmail v2] folders, search, unread, per-row actions, mailbox menu, connect settings */
.inbox__unread{flex:none; min-width:20px; height:20px; padding:0 6px; display:inline-flex; align-items:center; justify-content:center; font-size:11px; font-weight:700; color:var(--surface); background:var(--fg); border-radius:999px; font-variant-numeric:tabular-nums;}
.inbox__unread[hidden]{display:none;}
.inbox__ico{flex:none; width:34px; height:32px; display:inline-grid; place-items:center; background:none; border:1px solid transparent; border-radius:var(--radius-sm); color:var(--fg-secondary); cursor:pointer;}
.inbox__ico:hover{background:var(--bg-sunken); color:var(--fg);}
.inbox__ico.is-on{background:var(--bg-sunken); color:var(--fg);}
.inbox__ico svg{width:18px; height:18px;}
.inbox__ico.is-spin svg{animation:mbxspin .9s linear infinite;}
.inbox__ico:disabled{cursor:default; opacity:.7;}
@keyframes mbxspin{to{transform:rotate(360deg);}}
.mbx-menuwrap{position:relative; flex:none;}
.mbx-menu{position:absolute; right:0; top:calc(100% + 6px); min-width:220px; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:0 12px 32px rgba(0,0,0,.16); padding:6px; z-index:70;}
.mbx-menu[hidden]{display:none;}
.mbx-menu button{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:none; border:0; border-radius:var(--radius-sm); padding:9px 10px; font:inherit; font-size:var(--text-sm); color:var(--fg); cursor:pointer;}
.mbx-menu button:hover{background:var(--bg-sunken);}
.mbx-menu button svg{width:16px; height:16px; color:var(--fg-muted); flex:none;}
.mbx-menu hr{border:0; border-top:1px solid var(--border-subtle); margin:5px 2px;}
.inbox__search{overflow:hidden; max-height:0; opacity:0; transition:max-height var(--dur-std) var(--ease-out), opacity var(--dur-std), margin-top var(--dur-std);}
.inbox__search.is-on{max-height:58px; opacity:1; margin-top:12px;}
.inbox__search input{width:100%; height:40px; padding:0 14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--fg); font:inherit; font-size:var(--text-md);}
.inbox__search input:focus{outline:none; border-color:var(--border-strong); box-shadow:0 0 0 3px rgba(120,120,120,.12);}
.inbox__folders{display:flex; gap:4px; margin-top:12px; padding-bottom:2px; overflow-x:auto; scrollbar-width:none;}
.inbox__folders::-webkit-scrollbar{display:none;}
.mbx-tab{flex:none; display:inline-flex; align-items:center; gap:7px; height:32px; padding:0 13px; border:0; border-radius:999px; background:none; color:var(--fg-muted); font:inherit; font-size:var(--text-sm); font-weight:500; cursor:pointer; white-space:nowrap;}
.mbx-tab:hover{background:var(--bg-sunken); color:var(--fg-secondary);}
.mbx-tab.is-on{background:var(--fg); color:var(--surface); font-weight:600;}
.mbx-tab__n{font-size:11px; font-weight:700; font-variant-numeric:tabular-nums; opacity:.9;}
.mbxm-row{position:relative; padding-right:74px;}
.mbxm-row__acts{position:absolute; right:6px; top:50%; transform:translateY(-50%); display:flex; gap:3px; opacity:0; transition:opacity var(--dur-std);}
.mbxm-row:hover .mbxm-row__acts, .mbxm-row:focus-within .mbxm-row__acts{opacity:1;}
.mbxm-iconbtn{width:30px; height:30px; display:inline-grid; place-items:center; background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); color:var(--fg-muted); cursor:pointer;}
.mbxm-iconbtn:hover{color:var(--fg); border-color:var(--border); background:var(--bg-sunken);}
.mbxm-iconbtn svg{width:15px; height:15px;}
@media (hover:none){ .mbxm-row__acts{opacity:1;} }
.mbxm-empty-note{margin:0; font-size:var(--text-sm); color:var(--fg-muted); text-align:center; padding:34px 0;}
.mbxm-acts{flex-wrap:wrap; align-items:center;}
.mbxm-acts .mbxm-iconbtn{width:38px; height:38px;}
.mbxm-acts .mbxm-iconbtn svg{width:17px; height:17px;}
.mbx-conn__lead{margin:0 0 10px; font-size:var(--text-sm); color:var(--fg-secondary); line-height:1.55;}
.mbx-conn__grid{display:grid; grid-template-columns:auto 1fr; border:1px solid var(--border-subtle); border-radius:var(--radius-sm); overflow:hidden;}
.mbx-conn__k{padding:9px 12px; font-size:12px; color:var(--fg-muted); background:var(--bg-sunken); border-bottom:1px solid var(--border-subtle); white-space:nowrap;}
.mbx-conn__v{display:flex; align-items:center; gap:8px; padding:9px 12px; font-size:13px; color:var(--fg); border-bottom:1px solid var(--border-subtle); min-width:0;}
.mbx-conn__grid > :nth-last-child(-n+2){border-bottom:0;}
.mbx-conn__v .mono{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mbx-conn__copy{flex:none; width:28px; height:26px; display:inline-grid; place-items:center; background:none; border:1px solid var(--border-subtle); border-radius:6px; color:var(--fg-muted); cursor:pointer;}
.mbx-conn__copy:hover{color:var(--fg); background:var(--bg-sunken);}
.mbx-conn__copy svg{width:14px; height:14px;}
.mbx-conn__note{margin:12px 0 0; font-size:12px; color:var(--fg-muted); line-height:1.55;}
.mbx-rename__row{display:flex; align-items:center; gap:8px; margin-top:8px;}
.mbx-rename__row input{flex:1; min-width:0; height:44px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--fg); font:inherit; font-size:var(--text-md);}
.mbx-rename__row input:focus{outline:none; border-color:var(--border-strong); box-shadow:0 0 0 3px rgba(120,120,120,.12);}
.mbx-rename__at{font-size:var(--text-sm); color:var(--fg-muted); white-space:nowrap;}
.topmenu-wrap{position:relative; flex:none;}
.topmenu-wrap[hidden]{display:none;}
.topmenu-wrap .topmenu-btn{width:40px; height:36px; border-radius:var(--radius-sm); display:flex; align-items:center; justify-content:center;}
.topmenu-wrap .topmenu-btn svg{width:18px; height:18px;}
.topmenu-wrap .overflow-menu{right:0; left:auto; top:calc(100% + 8px); max-width:calc(100vw - 24px); z-index:60;}
/* [Fable] de persistente voorbeeld-strip boven de pane (elk scherm in exampleMode) */
.example-strip{display:flex; align-items:center; gap:10px; max-width:var(--stage-max, 1080px);
  margin:0 auto 10px; padding:8px 16px; font-size:13px; color:var(--fg-secondary);
  background:var(--bg-sunken); border-radius:var(--radius-md);}
.example-strip[hidden]{display:none;}
body{overflow-x:clip;}   /* [Fable] bg-grid/aura staken 24px buiten 375px-viewports */
.example-strip .link{margin-left:auto; white-space:nowrap;}
.example-banner{display:flex; flex-wrap:wrap; align-items:center; gap:8px 10px;
  padding:10px 13px; background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-sm);}
.example-banner__txt{font-size:13px; color:var(--fg-secondary);}
.example-banner .link{margin-left:auto; font-size:13px;}
/* [FIX-A P3] de connect-watch en de vastloper-staat lenen de bestaande connect-grammatica */
.connect-watch,.connect-stuck{display:flex; flex-direction:column; gap:10px;}
.connect-watch .status,.connect-stuck .status{margin-top:2px;}
@media (max-width:560px){
  .names-home__head{flex-direction:column;}
  /* [David 2026-07-18 mobiel] twee knoppen naast elkaar op 390px = wrappende, afgeknipte labels
     ("Buy another domain" op 3 regels). Gestapeld en vol-breed leest elk label op een regel. */
  .names-home__headacts{align-self:stretch; flex-direction:column; align-items:stretch; gap:8px;}
  .names-home__headacts .btn{width:100%; justify-content:center;}
  /* [menu-fix] lege lobby: titel links, hamburger rechtsBOVEN; onder de titel viel het menu links buiten beeld */
  .names-home--empty .names-home__head{flex-direction:row;}
  .names-home--empty .names-home__headacts{align-self:flex-start;}
}

/* ===== [C1] de site-switcher in de chrome ===== */
.site-switch-slot{margin-left:auto;}    /* duwt de switcher naar het eind van de tabs-rij */
/* [menu-fix] de site-hamburger in de chroom-balk: compact (past in de 28px tabs-rij), menu opent
   rechts-uitgelijnd onder de balk en kan nooit buiten beeld vallen */
.chrome-menu-slot{position:relative; flex:none;}
.chrome-menu-slot .kebab{width:32px; height:28px; border-radius:var(--radius-sm);}
.chrome-menu-slot .kebab svg{width:16px; height:16px;}
.chrome-menu-slot .overflow-menu{right:0; left:auto; top:calc(100% + 6px); max-width:calc(100vw - 32px);}
.site-switch{display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 8px 0 6px;
  background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  font:inherit; cursor:pointer; color:var(--fg-secondary);
  transition:border-color var(--dur-micro), background var(--dur-micro);}
.site-switch:hover{border-color:var(--border-strong); background:var(--surface-2);}
.site-switch:focus-visible{outline:none; box-shadow:var(--ring);}
.site-switch .site-switch__mark{width:18px; height:18px; border-radius:var(--radius-xs); font-size:var(--text-3xs);}
  /* [FIX-G2 4] de generieke .board-mark (30px, later in de sheet) won op specificiteit van de
     18px-maat hierboven: de avatar stak boven en onder het 28px-balkje uit. De extra .site-switch-scope
     wint altijd; 18px past in de balk (5px lucht) en leest kalm binnen de 40px chrome-rij. */
.site-switch__name{font-size:var(--text-sm); font-weight:500; color:var(--fg);
  max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.site-switch__chev{display:inline-flex; color:var(--fg-muted);}
.site-switch__chev svg{width:14px; height:14px; transform:rotate(90deg);}
.site-switch__menu{right:0; left:auto; min-width:240px;}   /* erft de .overflow-menu visuals */
.switch-site{display:flex; align-items:center; gap:9px;}
.switch-site .board-mark{width:22px; height:22px; border-radius:6px; font-size:11px;}
.switch-site__name{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.switch-site__dot{margin-left:auto; width:7px; height:7px; border-radius:var(--radius-full);
  background:var(--accent);}                       /* live = groen (de enige groen-tik hier) */
.switch-site__dot.is-coming,.switch-site__dot.is-going{background:var(--border-strong);}
.switch-site__check{margin-left:auto; display:inline-flex; color:var(--accent-text);}
.switch-site__check svg{width:15px; height:15px;}
.switch-site.is-current{background:var(--bg-sunken);}
.site-switch__menu .overflow-sep{height:1px; margin:5px 4px; background:var(--border-subtle);}
@media (max-width:560px){ .site-switch__name{display:none;} }   /* mark + chev op smal */

/* ===== [C1] passwordless login (2-screen Living-Pane state) ===== */
.login-pane{display:flex; flex-direction:column; gap:var(--space-4); max-width:420px; margin:0 auto;}
.login-form{display:flex; flex-direction:column; gap:14px;}   /* [Fable] lucht tussen e-mail/wachtwoord/knop */
.login-sub{font-size:14px; color:var(--fg-secondary); margin:0; line-height:1.4;}
.login-field{display:flex; flex-direction:column; gap:6px;}
.login-field .field--domain{width:100%;}
.login-undernote{font-size:var(--text-sm); color:var(--fg-muted); margin:0;}
.login-acts{display:flex; flex-direction:column; gap:var(--space-3);}
.login-error{font-size:13px; color:var(--fg); background:var(--bg-sunken);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  padding:10px var(--space-3); margin:0; line-height:1.4;}
.login-error__btn{margin-top:8px;}
.email-hint{font-size:13px; line-height:1.45; color:var(--fg-secondary); margin:8px 0 0;}
.email-hint .link{font-size:inherit;}
.email-hint__keep{margin-left:10px; color:var(--fg-muted);}
.mailcard{border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  background:var(--surface); box-shadow:var(--e1); overflow:hidden;}
.mailcard__head{display:flex; align-items:center; gap:9px; padding:10px var(--space-4);
  background:var(--surface-2); border-bottom:1px solid var(--border-subtle);
  font-size:var(--text-sm); color:var(--fg-secondary);}
.mailcard__head svg{width:16px; height:16px; color:var(--fg-secondary);}
.mailcard__body{display:flex; flex-direction:column; gap:var(--space-3); padding:var(--space-4);}
.mailcard__line{font-size:var(--text-md); color:var(--fg); margin:0; line-height:1.4;}
.mailcard__code{font:600 var(--text-2xl)/1 var(--font-mono); letter-spacing:.18em; color:var(--fg);
  text-align:center; padding:4px 0;}
.login-cross{font-size:var(--text-sm); color:var(--fg-secondary); margin:0;}
.login-codefield{display:flex; gap:var(--space-3); align-items:flex-end;}
.login-codefield .btn{height:56px;}
#loginCode{text-align:center; letter-spacing:.32em; font-size:22px;}
.login-links{display:flex; flex-wrap:wrap; gap:var(--space-4);}
.login-link{background:none; border:none; padding:0; cursor:pointer; font:500 13px/1 var(--font-sans);
  color:var(--accent-text); text-decoration:underline; text-underline-offset:2px;}
.login-link:focus-visible{outline:none; box-shadow:var(--ring); border-radius:4px;}
/* [FIX-C P7] 44px hit-areas on the primary-path text controls (review: 13-31px measured). Same
   invisible-extender pattern as .tl::before / .dash-recheck; extenders are sized/asymmetric so
   no two targets overlap (login links are horizontal neighbours: vertical-only extension). */
.login-link,.tld-more summary,.result-foot .link{position:relative;}
.login-link::after{content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%);}
/* [ONTWERPKEUZE] .chip-sug krijgt GEEN 44px-extender: de chips wrappen op telefoons in meerdere
   rijen (pitch 36px) en overlappende onzichtbare targets zijn erger dan 28px-targets met
   WCAG-2.5.8-conforme spacing (44-cirkels raken elkaar precies, snijden nooit). */
.tld-more summary::after{content:""; position:absolute; left:0; right:0; top:-8px; height:44px;}          /* extends up into the quiet row, never over the wallet below */
.result-foot .link::after{content:""; position:absolute; left:-4px; right:-4px; top:-6px; height:44px;}   /* extends down past the card padding, never over the wallet above */
/* the chrome back/forward chevrons (31x27): ::before extender (the ::after slot carries the
   is-paused beckon halo) */
.addr-nav{position:relative;}
.addr-nav::before{content:""; position:absolute; inset:-9px -7px;}

/* ---- C2 ownership flows: close / billing / recovery / migrate / pull-from-other-email.
   Reuses the .login-pane column + .move-group/.move-option two-choice grammar. ---- */
.own-flow{display:flex; flex-direction:column; gap:var(--space-4); max-width:460px; margin:0 auto;}
/* [bulk-fix leek] genummerde stap-blokken: plakken (1) en kiezen (2) lezen als een recept */
.own-step{display:flex; flex-direction:column; gap:10px; padding:14px; background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md);}
.own-step__head{display:flex; align-items:center; gap:10px; font-weight:600; font-size:15px; color:var(--fg);}
.own-step__num{display:inline-grid; place-items:center; width:24px; height:24px; border-radius:50%; background:var(--fg); color:var(--surface); font-size:13px; font-weight:700; flex:none;}
.own-step__sub{font-size:13px; color:var(--fg-secondary); margin:-4px 0 0 34px; line-height:1.45;}
.own-flow .h1{margin:0;}
.own-sub{font-size:14px; color:var(--fg-secondary); margin:0; line-height:1.45;}
.own-line{font-size:13px; color:var(--fg-secondary); margin:0; line-height:1.5;}
.own-mut{font-size:var(--text-sm); color:var(--fg-muted); margin:0; line-height:1.5;}
/* [connect-ai] de simpele AI-code-kaart: de code als held + 1 knop */
.ai-code{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:14px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-sunken);}
.ai-code__val{flex:1 1 240px; min-width:0; font-size:13px; word-break:break-all; color:var(--fg);}
.ai-warn{display:flex; gap:8px; align-items:flex-start; font-size:13px; line-height:1.45; color:var(--fg-secondary); background:rgba(232,121,43,.08); border-radius:var(--radius-sm); padding:10px 12px; margin:0;}
.ai-warn svg{flex:none; width:15px; height:15px; opacity:.7; margin-top:1px;}
.ai-adv{font-size:13px; color:var(--fg-muted);}
.ai-adv summary{cursor:pointer; color:var(--fg-secondary); padding:2px 0;}
.ai-acct{font-size:13px; color:var(--fg-secondary); margin:0;}
.ai-acct b{ font-family:var(--font-mono); }
/* [gift claim] e-mail-keuze + kaartveld */
.gift-optrow{ display:flex; gap:10px; align-items:flex-start; font-size:14px; color:var(--fg); cursor:pointer; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--bg-sunken); }
.gift-optrow input{ margin-top:2px; }
.gift-card{ border:1px solid var(--border); border-radius:var(--radius-sm); padding:14px; background:var(--surface); }
.gift-card #dthCardElement{ margin-top:8px; }
/* [FIX-C P8] the invoice list (account-level; every row a >=52px touch row) */
.invoice-list{border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; background:var(--surface);}
.invoice-row{display:flex; align-items:center; gap:var(--space-3); min-height:52px; padding:8px var(--space-3); border-top:1px solid var(--border-subtle);}
.invoice-row__meta{display:flex; flex-direction:column; gap:2px; min-width:0; flex:1;}
.invoice-row__desc{font-size:var(--text-sm); color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.invoice-row__sub{font-size:11px; color:var(--fg-muted);}
.invoice-row__amt{flex:none; font-size:var(--text-sm); color:var(--fg);}
.invoice-row__dl{flex:none; display:inline-flex; align-items:center; gap:5px;}
.invoice-row__dl svg{width:14px; height:14px;}
.invoice-row:first-child{border-top:0;}
.invoice-row__date{flex:none; font-size:var(--text-xs); color:var(--fg-muted); min-width:88px;}
.invoice-row__desc{flex:1; min-width:140px; font-size:var(--text-sm); color:var(--fg);}
.invoice-row__amt{flex:none; font-size:var(--text-sm); color:var(--fg-secondary);}
.invoice-row__dl{height:36px; padding:0 12px; font-size:var(--text-sm); position:relative;}
.invoice-row__dl::after{content:""; position:absolute; left:0; right:0; top:50%; height:44px; transform:translateY(-50%);}
.own-strong{font-weight:600; color:var(--fg);}
.own-acts{display:flex; flex-wrap:wrap; gap:var(--space-3); align-items:center;}
.own-card{border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  background:var(--surface-2); padding:13px 14px; display:flex; flex-direction:column; gap:8px;}
.own-card__row{display:flex; align-items:center; gap:10px;}
.own-card__row .mono{font-family:var(--font-mono); font-size:var(--text-md); color:var(--fg);}
.own-card__row .own-card__sp{margin-left:auto;}
.own-good{color:var(--success-text); display:inline-flex; vertical-align:middle;}
.own-good svg{width:16px; height:16px;}
.own-note{font-size:13px; color:var(--fg); background:var(--bg-sunken);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);
  padding:10px var(--space-3); margin:0; line-height:1.45;}
.own-error{font-size:13px; color:var(--fg); background:var(--bg-sunken);
  border:1px solid var(--danger); border-radius:var(--radius-sm);
  padding:10px var(--space-3); margin:0; line-height:1.45;}
.own-field{display:flex; flex-direction:column; gap:6px;}
.own-field .field--domain{width:100%;}
/* Pull names in from another account: an Apple-clean overview picker (whole families or single names) */
.pull-list{display:flex; flex-direction:column; gap:12px; margin:4px 0 6px;}
.pull-fam{border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); overflow:hidden;}
.pull-fam.is-family{background:var(--bg-sunken);}
.pull-fam__head{display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:10px 12px; border-bottom:1px solid var(--border-subtle);}
.pull-fam__title{display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--fg);}
.pull-fam__count{font-size:11px; font-weight:500; color:var(--fg-muted); background:var(--bg-sunken);
  border:1px solid var(--border-subtle); border-radius:999px; padding:1px 8px;}
.pull-fam.is-family .pull-fam__count{background:var(--surface);}
.pull-fam__all{font-size:12px; font-weight:600; color:var(--accent, #2563eb); background:none; border:none;
  cursor:pointer; padding:4px 6px; border-radius:var(--radius-sm);}
.pull-fam__all:hover{background:var(--bg-sunken);}
.pull-fam__names{display:flex; flex-direction:column;}
.pull-name{display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  padding:10px 12px; background:none; border:none; border-top:1px solid var(--border-subtle);
  font-size:14px; color:var(--fg); cursor:pointer;}
.pull-fam__names .pull-name:first-child{border-top:none;}
.pull-name:hover{background:var(--bg-sunken);}
.pull-name__box{flex:0 0 auto; width:20px; height:20px; border:1.5px solid var(--border);
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; background:var(--surface);}
.pull-name.is-on .pull-name__box{background:var(--fg); border-color:var(--fg);}
.pull-name.is-on{font-weight:600;}
.pull-name__host{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.pull-email{display:flex; align-items:center; gap:10px; cursor:pointer; font-size:13px; color:var(--fg);
  padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-sunken); margin:2px 0 4px;}
.pull-email__box{flex:0 0 auto; width:20px; height:20px; border:1.5px solid var(--border);
  border-radius:6px; display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:12px; background:var(--surface);}
.pull-email__box.is-on{background:var(--fg); border-color:var(--fg);}
.pull-name__terms{flex:0 0 auto; font-size:12px; color:var(--fg-muted); white-space:nowrap;}
.pull-terms{margin-top:12px; padding:12px 14px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--bg-sunken); font-size:13px; color:var(--fg);}
.pull-terms__row{display:flex; justify-content:space-between; gap:10px; margin:2px 0;}
.pull-terms__note{margin:8px 0 0; font-size:12px; color:var(--fg-muted); line-height:1.5;}
/* Password and security: two calm, premium blocks; no stray focus box on the heading */
.own-flow .h1:focus, .own-flow .h1:focus-visible{outline:none;}
.own-security{gap:0;}
.own-security .own-sub{margin-bottom:8px;}
.own-security .own-sec{display:flex; flex-direction:column; gap:12px;
  padding:18px 0 20px; border-top:1px solid var(--border-subtle);}
.own-security .own-sec:first-of-type{border-top:0; padding-top:14px;}
.own-security .own-acts{margin-top:2px;}
.own-security .own-skip{margin-top:-4px;}
.own-security .own-skip .link{font-size:13px; color:var(--fg-muted);}
.own-security .own-recovery-note{margin-top:16px;}
.own-codes{width:100%; min-height:78px; resize:vertical; padding:10px 12px;
  border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface);
  color:var(--fg); font:13px/1.5 var(--font-mono);}
.own-codes:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);}
/* the honest auto-renew toggle (mocked state, plain words) */
.own-toggle{display:flex; align-items:center; gap:12px;}
.own-toggle__sw{flex:none; width:42px; height:24px; border-radius:999px; border:1px solid var(--border);
  background:var(--surface); position:relative; cursor:pointer; transition:background var(--dur-std), border-color var(--dur-std);}
.own-toggle__sw::after{content:""; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:var(--fg-muted); transition:transform var(--dur-std), background var(--dur-std);}
.own-toggle__sw[aria-pressed="true"]{background:var(--accent-tint); border-color:var(--accent);}
.own-toggle__sw[aria-pressed="true"]::after{transform:translateX(18px); background:var(--accent);}
.own-toggle__sw:focus-visible{outline:none; box-shadow:var(--ring);}
.own-toggle__txt{font-size:13px; color:var(--fg-secondary); line-height:1.45;}
.own-undo{background:none; border:none; padding:0; cursor:pointer; font:500 13px/1 var(--font-sans);
  color:var(--accent-text); text-decoration:underline; text-underline-offset:2px;}
.own-undo:focus-visible{outline:none; box-shadow:var(--ring); border-radius:4px;}
.own-sibling{font-size:var(--text-sm); color:var(--fg-muted); margin:0; line-height:1.5;}
.own-danger-confirm{display:flex; flex-direction:column; gap:8px;}
/* the quiet, dismissible backup-email nudge (account-copy §7.1): a line, never a box-with-shadow */
.backup-nudge{display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  background:var(--surface-2); padding:9px 11px; margin:0 0 var(--space-4) 0;}
.backup-nudge__ico{display:inline-flex; color:var(--fg-secondary); flex:none;}
.backup-nudge__ico svg{width:16px; height:16px;}
.backup-nudge__txt{font-size:var(--text-sm); color:var(--fg-secondary); line-height:1.4; flex:1; min-width:140px;}
.backup-nudge__x{margin-left:auto; flex:none; width:26px; height:26px; border:none; background:none;
  color:var(--fg-muted); cursor:pointer; border-radius:6px; font-size:16px; line-height:1;}
.backup-nudge__x:hover{background:var(--bg-sunken); color:var(--fg);}
.backup-nudge__x:focus-visible{outline:none; box-shadow:var(--ring);}

/* ---- C4.1 the Layer-1 statuscard (collapsed row) — inherits .edit-card hover grammar ---- */
.statuscard{display:flex; align-items:center; gap:var(--space-3); width:100%; position:relative;
  min-height:var(--statuscard-h); padding:var(--space-2) var(--space-5);
  background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  cursor:pointer; transition:background var(--dur-micro), box-shadow var(--dur-micro);}
.statuscard:hover{background:var(--surface-2); box-shadow:var(--e2);}
.statuscard__thumb{flex:none; width:var(--statuscard-thumb); height:var(--statuscard-thumb);
  border-radius:var(--radius-sm); overflow:hidden; background:var(--bg-sunken);
  display:grid; place-items:center; color:var(--fg-secondary);}
.statuscard__thumb .favicon, .statuscard__thumb .lmark{width:20px; height:20px; display:inline-flex;}
.statuscard__thumb svg{width:20px; height:20px;}
.statuscard__thumb .tabmock{width:100%; height:100%; padding:5px 5px 0; border:none; background:var(--bg-sunken);}
.statuscard__thumb .tabmock-tab{font-size:var(--mock-fs-thumb-tab); padding:2px 4px; gap:3px; max-width:100%;}
.statuscard__thumb .tabmock-bar{margin:0 -5px;}
.statuscard__thumb .luma-thumb .luma-h{font-size:var(--mock-fs-thumb-h);}
.statuscard__body{min-width:0; flex:1 1 auto; display:flex; flex-direction:column; gap:1px;}
  /* [FIX-G2 3] body vult de rij: de trigger-chevron staat op ELKE rij in dezelfde vaste rechterkolom
     (ook op telefoons, waar de idle-CTA verborgen is); done-check/CTA schuiven mee naar het rij-einde,
     direct voor de chevron, zodat alle zes rijen hetzelfde einde hebben */
.statuscard__label{font:500 14px/1.2 var(--font-sans); color:var(--fg); letter-spacing:-.005em;}
.statuscard__value{font:400 13px/1.4 var(--font-sans); color:var(--fg-secondary);}
.statuscard__value .mono{font-family:var(--font-mono); color:var(--fg);}
.statuscard__done{display:inline-flex; margin-left:auto; color:var(--status-done);}
.statuscard__done svg{width:15px;height:15px;}
/* [groen-schaars] wachtende facet (bv. "In review"): een rustige neutrale dot, geen Live-Green vink */
.statuscard__pending{display:inline-flex; align-items:center; margin-left:auto;}
.statuscard__pending .cdot{width:7px; height:7px; border-radius:var(--radius-full); background:var(--fg-muted);}
.statuscard__act{margin-left:auto; height:36px; padding:0 13px; font-size:var(--text-sm);}
.statuscard__trigger{flex:none; width:30px; height:30px; padding:0; display:inline-grid; place-items:center;
  border:none; background:transparent; color:var(--edit-affordance); cursor:pointer; border-radius:var(--radius-sm);
  transition:color var(--dur-micro), background var(--dur-micro);}
.statuscard:hover .statuscard__trigger{color:var(--edit-affordance-hover);}
.statuscard__trigger:focus-visible{outline:none; box-shadow:var(--ring);}
.statuscard__trigger .statuscard__chev{display:inline-flex; transition:transform var(--dur-std);}
.statuscard__trigger .statuscard__chev svg{width:16px;height:16px;}
.statuscard__trigger[aria-expanded="true"] .statuscard__chev{transform:rotate(90deg);}
.statuscard[data-state="idle"] .statuscard__value{color:var(--status-idle);}
.statuscard[data-state="idle"] .statuscard__done{display:none;}
.statuscard.has-act{cursor:default;}
.statuscard.has-act:hover{background:var(--surface); box-shadow:none;}

/* [Backend Linking + feedback-tegel 2026-07-19] tegel 8 in een accent-getinte jas (alleen mixes van
   bestaande tokens, wet: geen nieuwe kleuren) + het beetje editor-chrome dat bestaande klassen niet dekken. */
.statuscard--fb{background:color-mix(in srgb, var(--accent) 7%, var(--surface));
  border-color:color-mix(in srgb, var(--accent) 26%, var(--border-subtle));}
.statuscard--fb .statuscard__thumb{background:color-mix(in srgb, var(--accent) 12%, var(--bg-sunken)); color:var(--accent);}
.statuscard--fb:hover{background:color-mix(in srgb, var(--accent) 11%, var(--surface));}
.be-mode{margin:0 0 12px; font-size:13.5px; line-height:1.55; color:var(--fg-secondary);}
.be-sub{font:600 13px/1.2 var(--font-sans); color:var(--fg); margin:16px 0 10px; padding-top:14px;
  border-top:1px solid var(--border-subtle);}
.be-status{display:flex; align-items:center; gap:10px; margin:0 0 8px; font-size:13px; color:var(--fg-secondary);}
.be-status .mono{font-family:var(--font-mono); color:var(--fg);}
.be-kv{display:flex; flex-direction:column; gap:5px; margin:2px 0; padding:10px 12px; border-radius:var(--radius-sm);
  background:var(--bg-sunken); font-size:12.5px; color:var(--fg-secondary); line-height:1.5;}
.be-kv b{font-size:12.5px; color:var(--fg); font-weight:600;}
.be-kv .mono{font-family:var(--font-mono); font-size:12px; word-break:break-all;}
.be-addpath{display:flex; gap:8px; align-items:center;}
.be-addpath input{flex:1 1 auto; height:32px; padding:0 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--fg); font-size:13px; font-family:var(--font-mono);}
.be-addpath input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);}
.efield textarea{width:100%; min-height:92px; resize:vertical; padding:9px 11px; border:1px solid var(--border);
  border-radius:var(--radius-sm); background:var(--surface); color:var(--fg); font-size:14px; line-height:1.5;
  font-family:var(--font-sans);}
.efield textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);}

/* opened editor (Layer 2) spans the full dashboard width; peers stay compact below */
#dashCards{display:flex; flex-direction:column; gap:var(--space-4);}
#dashCards .editor-open{display:flex; flex-direction:column;}
#dashCards .editor-open .pcard{margin:0;}
.statpeers{margin-top:0;}
.statcard-editor{position:relative;}
.statcard-editor__head{display:flex; align-items:center; gap:10px; margin-bottom:2px;}
.statcard-editor__head .statuscard__trigger{margin-left:auto;}
/* [Fable/David] geen dubbele kop in een open kaart: de accordeon-kop IS de titel al. De status
   (on/off, aantal) blijft zichtbaar via de kaart-inhoud zelf (de master-switch / adresrijen). */
.statcard-editor .pcard-title{display:none;}
.statcard-editor .edit-card__editing-badge, .statcard-editor .pcard-help{display:none;}

/* ---- C4.2 the three co-equal doors (page 1) ---- */
.doors{display:grid; gap:var(--space-4); grid-template-columns:repeat(3,1fr); margin-top:4px;}
.door{display:flex; flex-direction:column; gap:6px; min-height:var(--door-min-h);
  padding:var(--space-3) var(--space-4); background:var(--surface-2);
  border:1px solid var(--border-subtle); border-radius:var(--radius-md);}
.door__glyph{color:var(--fg-secondary);}
.door__glyph svg{width:22px;height:22px;}
.door__title{font:600 15px/1.25 var(--font-sans); letter-spacing:-.01em; color:var(--fg);}
.door__help{font:400 var(--text-sm)/1.4 var(--font-sans); color:var(--fg-muted);}
.door__spacer{flex:1;}
.door .field--domain{width:100%; height:46px; font-size:16px;}
.door .btn{width:100%;}
/* Door A: bounded drop (reuses dropzone cues, not full-bleed) */
.door--drop .dropzone{min-height:0; padding:9px 12px; margin:0; gap:3px; border-radius:var(--radius-sm);}
.door--drop .socket{width:34px; height:28px;}
.door--drop .socket .glyph svg{width:20px;height:20px;}
.door--drop .drop-label{font-size:14px;}
.door--drop .drop-sub{font-size:12px;}
/* the gated, jargon-free AI door (quiet, secondary) */
.ai-door{display:flex; align-items:center; justify-content:center; gap:8px; margin-top:12px;
  font:400 var(--text-md)/1.5 var(--font-sans); color:var(--fg-secondary); text-align:center; flex-wrap:wrap;}
.ai-door .spark{display:inline-flex; color:var(--accent);}
.ai-door .spark svg{width:15px;height:15px;}
.ai-door .link{color:var(--fg-secondary);}
.ai-door:hover .link{color:var(--fg);}
/* [C4.5] the ONE web-address field as the page-1 hero (always visible, 0024) */
.webaddr{margin-top:12px;}
.webaddr .field-label{display:block; font-size:14px; font-weight:500; color:var(--fg);
  letter-spacing:-.005em; margin-bottom:5px;}
.webaddr .field--domain{width:100%; height:var(--field-hero-h); font-size:var(--text-xl);}
.webaddr .grab-help{margin-top:6px;}
/* two quiet recognition hints under the field (0024 H2.1) — no buttons, pure recognition */
.addr-hints{display:flex; align-items:center; gap:10px; margin-top:5px; font-size:var(--text-sm); color:var(--fg-muted);}
.addr-hints .ah{display:inline-flex; align-items:center; gap:6px;}
.addr-hints .ah::before{content:""; width:5px; height:5px; border-radius:50%; background:var(--border-strong);}
.addr-hints .sep{color:var(--border-strong);}

/* ---- C4.3 the forwarding editor (Extra domains, Layer 2) ---- */
.forward-editor{display:flex; flex-direction:column; gap:11px;}
.fwd-lead{font-size:var(--text-md); color:var(--fg-secondary); margin:0;}
.fwd-list{display:flex; flex-direction:column; gap:9px; margin:0;}
.fwd-row{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--surface-2);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);}
.fwd-row[data-main="true"]{box-shadow:inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--ink);}
.fwd-dom{font-family:var(--font-mono); font-size:var(--text-md); color:var(--fg); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fwd-state{font-size:12px; color:var(--fg-muted);}
.fwd-row .chip{flex:none;}
.fwd-row .fwd-actions{margin-left:auto; display:flex; align-items:center; gap:6px;}
.fwd-makemain{height:34px; padding:0 11px; font-size:var(--text-sm);}
.fwd-remove{flex:none; width:26px; height:26px; padding:0; border:none; background:transparent;
  color:var(--fg-muted); cursor:pointer; border-radius:var(--radius-xs); font-size:var(--text-base); line-height:1;}
.fwd-remove:hover{background:var(--bg-sunken); color:var(--fg);}
.fwd-remove:focus-visible{outline:none; box-shadow:var(--ring);}
.fwd-add{align-self:flex-start; height:34px; padding:0 12px; font-size:13px;}
.fwd-add svg{width:15px;height:15px;}
.fwd-note{font-size:12px; color:var(--fg-secondary); margin:2px 0 0;}

/* ---- C6 multidomein: per-registrar groepering + bulk-paste (research-multidomain §2, §5) ---- */
.fwd-group{display:flex; flex-direction:column; gap:8px; padding:11px 12px; background:var(--surface-2);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);}
.fwd-group__head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.fwd-group__name{font-size:13px; font-weight:500; color:var(--fg);}
.fwd-group__count{font-weight:400; color:var(--fg-muted);}
.fwd-group__head .chip{flex:none;}
.fwd-group__connect{margin-left:auto; height:34px; padding:0 13px; font-size:var(--text-sm);}
.fwd-group__head .chip{margin-left:auto;}
.fwd-group__rows{display:flex; flex-direction:column; gap:7px;}
.fwd-row--ext{background:var(--surface); padding:8px 11px;}
.fwd-state.is-live{color:var(--success-text);}
.fwd-ext-label{font-size:var(--text-sm); color:var(--fg-secondary); margin:0 0 2px;}
.fwd-ext-area{width:100%; height:auto; min-height:62px; resize:vertical; line-height:1.5;
  padding:9px 12px; font-size:var(--text-md); font-weight:400;}

/* ---- C8 drag-and-drop: meerdere namen over meerdere sites verdelen (David's use-case) ---- */
.board-open{align-self:flex-start; height:32px; padding:0 12px; font-size:var(--text-sm);}
.board-open svg{width:14px; height:14px;}
/* [David 2026-07-12] Re-arrange board herontworpen: rustiger (geen wiebel), premium (gestructureerde
   kaarten met een kop-scheiding + zachte schaduw), en duidelijker (heldere sleep-feedback). */
.board{display:flex; flex-direction:column; gap:16px;}
.board-head{display:flex; flex-direction:column; gap:9px;}
.board-back{align-self:flex-start; height:30px; padding:0 11px 0 8px; font-size:var(--text-sm); color:var(--fg-secondary); border-radius:var(--radius-full);}
.board-back:hover{background:var(--bg-sunken); color:var(--fg);}
.board-back svg{width:13px; height:13px; transform:rotate(180deg);}
.board-lead{font-size:var(--text-lg); font-weight:640; color:var(--fg); margin:0; letter-spacing:-.02em;}
.board-sub{font-size:var(--text-sm); color:var(--fg-secondary); margin:0; line-height:1.5; max-width:52ch;}
.board-hint{display:flex; align-items:center; gap:10px; flex-wrap:wrap; padding:10px 14px;
  background:var(--accent-tint); border:1px solid var(--accent); border-radius:var(--radius-md);}
.board-hint__txt{font-size:var(--text-sm); color:var(--fg);}
.board-hint__acts{margin-left:auto; display:flex; gap:6px;}
.board-hint__acts .btn{height:32px; padding:0 12px; font-size:12px;}
/* Set-aside: een rustige parkeerstrook. Ingeklapt tot een dunne, stille regel als er niks in staat. */
.board-tray{padding:13px 15px; border:1px dashed var(--border); border-radius:var(--radius-md);
  background:var(--surface-2); transition:border-color .15s, background .15s, box-shadow .15s;}
.board-tray.is-empty{padding:11px 15px; background:transparent;}
.board-tray__head{display:flex; align-items:center; gap:9px; margin-bottom:11px;}
.board-tray.is-empty .board-tray__head{margin-bottom:0;}
.board-tray__label{font-size:12px; font-weight:650; color:var(--fg-secondary); letter-spacing:.02em; text-transform:uppercase;}
.board-tray__count{min-width:20px; height:20px; padding:0 6px; display:inline-flex; align-items:center;
  justify-content:center; font-size:var(--text-xs); font-weight:600; color:var(--fg-muted);
  background:var(--bg-sunken); border-radius:var(--radius-full);}
.board-tray__hint{font-size:12px; color:var(--fg-muted); margin-left:auto;}
.board-grid{display:grid; grid-template-columns:1fr; gap:14px;}
.board-col{display:flex; flex-direction:column; background:var(--surface);
  border:1px solid var(--border-subtle); border-radius:18px; overflow:hidden;
  box-shadow:0 1px 2px rgba(0,0,0,.04), 0 8px 20px rgba(0,0,0,.03);
  transition:border-color .15s, box-shadow .15s, transform .15s;}
.board-col__head{display:flex; align-items:center; gap:12px; min-width:0; padding:15px 16px;
  border-bottom:1px solid var(--border-subtle);}
.board-mark{flex:none; width:36px; height:36px; border-radius:11px; display:inline-flex; align-items:center;
  justify-content:center; font-size:15px; font-weight:650; color:var(--fg-onColor);
  background:var(--brand-accent,var(--luma-blue)); letter-spacing:-.02em;}
.board-col__meta{display:flex; flex-direction:column; line-height:1.3; min-width:0;}
.board-col__name{font-size:15px; font-weight:650; color:var(--fg); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; letter-spacing:-.01em;}
.board-col__count{font-size:12px; color:var(--fg-muted);}
.board-col__drop{display:flex; flex-direction:column; gap:8px; min-height:44px; padding:13px 15px;}
/* "Start a new site": uitnodigend, dashed, gecentreerd. */
.board-col--new{background:var(--surface-2); border:1.5px dashed var(--border-strong); box-shadow:none;
  align-items:center; text-align:center;}
.board-col--new .board-col__head{border-bottom:none; flex-direction:column; gap:9px; padding:22px 16px 18px;}
.board-col--new .board-col__meta{align-items:center;}
.board-col--new .board-col__name{color:var(--fg-secondary);}
.board-col--new .board-col__count{max-width:32ch; line-height:1.4;}
.board-col--new .board-col__drop{display:none;}
.board-col--new:hover{border-color:var(--accent);}
.board-mark--new{background:var(--surface); color:var(--fg-muted); width:42px; height:42px; border:1px solid var(--border-subtle);}
.board-mark--new svg{width:18px; height:18px;}
.board-chips{display:flex; flex-direction:column; gap:8px;}
/* Naam-chips = volle-breedte rijen met een duidelijke pak-greep. */
.board-chip{display:flex; width:100%; align-items:center; gap:11px; padding:11px 12px; cursor:grab;
  background:var(--surface-2); border:1px solid var(--border); border-radius:12px;
  font:inherit; text-align:left; transition:border-color .12s, box-shadow .12s, opacity .12s, background .12s, transform .1s;}
.board-chip:hover{background:var(--surface); border-color:var(--border-strong); transform:translateY(-1px); box-shadow:0 2px 6px rgba(0,0,0,.05);}
.board-tray .board-chip{background:var(--surface);}
.board-chip.is-main{border-color:var(--accent-ring); background:var(--accent-tint);}
.board-chip:focus-visible{outline:none; box-shadow:var(--ring);}
.board-chip.is-sel{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-tint);}
.board-chip.is-dragging{opacity:.35; cursor:grabbing; transform:none; box-shadow:none;}
.board-chip__grip{flex:none; width:16px; height:16px; opacity:.4; color:var(--fg-muted);
  background-image:radial-gradient(currentColor 1.1px, transparent 1.4px);
  background-size:5px 5px; background-position:center;}
.board-chip:hover .board-chip__grip{opacity:.7;}
.board-chip__name{flex:1 1 auto; font-size:14px; color:var(--fg); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.board-chip__role{flex:none; margin-left:auto; font-size:var(--text-3xs); font-weight:700; letter-spacing:.06em;
  text-transform:uppercase; color:var(--accent-text); background:var(--accent-tint);
  padding:3px 7px; border-radius:var(--radius-full);}
/* [finding #20, rule a] de gratis *.dropthehassle.app-naam: gepind, niet sleepbaar (alleen als enige naam). */
.board-free{display:flex; width:100%; align-items:center; gap:10px; padding:10px 12px;
  border:1px dashed var(--border); border-radius:12px; background:transparent;}
.board-free__ico{flex:none; display:inline-flex; color:var(--fg-muted);}
.board-free__ico svg{width:13px; height:13px;}
.board-free__name{flex:1 1 auto; font-size:var(--text-sm); color:var(--fg-muted); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.board-free__tag{flex:none; font-size:var(--text-3xs); font-weight:700; letter-spacing:.05em;
  text-transform:uppercase; color:var(--fg-muted); background:var(--bg-sunken);
  padding:3px 7px; border-radius:var(--radius-full);}
.board-empty{font-size:var(--text-xs); color:var(--fg-muted); margin:0; padding:9px 2px; text-align:center;}
/* Sleep-feedback: een heldere accent-ring + lift -- onmiskenbaar en premium. */
.board-col.is-over{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint), 0 10px 24px rgba(0,0,0,.07); transform:translateY(-2px);}
.board-tray.is-over{border-color:var(--accent); border-style:solid; background:var(--accent-tint); box-shadow:0 0 0 2px var(--accent-tint);}
.board-col.is-target,.board-tray.is-target{border-color:var(--accent-ring);}
.board-col--new.is-over{border-color:var(--accent); background:var(--accent-tint);}
@media (prefers-reduced-motion:reduce){ .board-col,.board-chip{transition:none;} }
@media (max-width:560px){ .board-grid{grid-template-columns:1fr;} }

/* ---- C4.4 "Other extension? Type it." (progressive disclosure on page 2) ---- */
.tld-more{margin-top:10px;}
.tld-more summary{list-style:none; cursor:pointer; display:inline-flex; align-items:center; gap:7px;
  font-size:13px; font-weight:500; color:var(--fg-secondary);}
.tld-more summary::-webkit-details-marker{display:none;}
.tld-more summary .chev{display:inline-flex; transition:transform var(--dur-std);}
.tld-more summary .chev svg{width:14px;height:14px;}
.tld-more[open] summary .chev{transform:rotate(90deg);}
.tld-more summary:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs);}
.ext-search{margin-top:10px;}
.ext-search input{width:100%; height:40px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--fg); font-family:var(--font-mono); font-size:14px;}
.ext-search input:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);}
.ext-row{display:flex; align-items:center; gap:10px; margin-top:10px; min-height:34px;
  font-size:var(--text-md); color:var(--fg-secondary);}
.ext-row .ext-note{color:var(--fg-secondary);}
.ext-row .ext-note .mono{font-family:var(--font-mono); color:var(--fg);}
.ext-row .ext-price{font-family:var(--font-mono); color:var(--fg-secondary);}
.ext-tag{font:500 12px/1 var(--font-sans); color:var(--ext-premium);}
.ext-row[data-state="gated"] .ext-note,.ext-row[data-state="gated"] .ext-note .mono{color:var(--ext-gated);}
.ext-row[data-state="unavailable"] .ext-note,.ext-row[data-state="unavailable"] .ext-note .mono{color:var(--fg-muted);}
.ext-add{flex:none; height:28px; width:28px; padding:0; display:inline-grid; place-items:center;
  border-radius:var(--radius-xs); border:none; background:var(--accent); color:var(--accent-contrast); cursor:pointer;}
.ext-add svg{width:15px;height:15px;}
.ext-add:focus-visible{outline:none; box-shadow:var(--ring);}
.ext-row[data-state="added"] .ext-add{background:var(--accent-tint); color:var(--accent-text);}

/* =====================================================================
   [C4.5] premium components (visual-system §C4.5) — all reuse existing
   tokens/primitives; no new colour, no new font. The de-cramping comes
   from the budget (0px-scroll intact), not from overflow.
   ===================================================================== */

/* ---- NAME: the co-present bounded drop, with an "or" divider (0024-B, F4).
   Modest but recognizable socket (not the full S1 zone); recedes once an outcome shows. ---- */
.bring{margin-top:16px;}
.bring__or{display:flex; align-items:center; gap:12px; margin:0 0 10px; color:var(--fg-muted); font-size:var(--text-sm);}
.bring__or::before,.bring__or::after{content:""; flex:1; height:1px; background:var(--border-subtle);}
.bring .dropzone{min-height:96px; padding:14px 20px; gap:6px; margin:0;}
.bring .socket{width:44px; height:34px;}
.bring .socket .glyph svg{width:26px;height:26px;}
.bring .drop-label{font-size:15px;}
.bring .drop-sub{font-size:12px; margin:0;}
/* when the field shows an outcome, the alternatives recede (one focus per state) */
.name-acting .bring,.name-acting .ai-door,.name-acting .subline,.name-acting .bare-aside{display:none;}

/* ---- NAME: the "taken by someone else" outcome (never a dead-end, never PII) ---- */
.taken-card{border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface);
  padding:16px; box-shadow:var(--e1); display:flex; flex-direction:column; gap:12px;}
.taken-card .tk-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.taken-card .tk-lead{font-size:15px; font-weight:500; color:var(--fg); letter-spacing:-.01em;}
.taken-alts{display:flex; flex-direction:column; gap:8px;}
.taken-alt{display:flex; align-items:center; gap:10px; padding:10px 12px; background:var(--bg-sunken);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm);}
.taken-alt .ta-dom{font-family:var(--font-mono); font-size:14px; color:var(--fg); flex:1; min-width:0;}
.taken-alt .ta-free{font-size:var(--text-sm); color:var(--success-text);}
.taken-alt .btn{flex:none; height:34px; padding:0 13px; font-size:13px;}
.taken-offer{display:flex; flex-direction:column; gap:8px; padding-top:12px; border-top:1px solid var(--border-subtle);}
.taken-offer .to-row{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.taken-offer .to-row .btn{height:38px;}
.taken-note2{font-size:var(--text-sm); color:var(--fg-muted); line-height:1.5; margin:0;}

/* ---- HOME: the quiet name-safe line on the hero (0022/0023) — status, never green ---- */
.name-safe{display:flex; align-items:center; flex-wrap:wrap; gap:7px; margin:10px 0 0;
  font-size:13px; line-height:1.5; color:var(--hero-meta);}
.name-safe .ns-ico{display:inline-flex; color:var(--fg-muted);}
.name-safe .ns-ico svg{width:14px;height:14px;}
.name-safe .ns-mid{color:var(--border-strong);}
.name-safe .ns-terms .ns-mid{margin:0 7px;}   /* [FIX-G2 2] de mid BINNEN een groep spreekt dezelfde 7px als de flex-gap erbuiten */
.name-safe .mono{font-family:var(--font-mono); color:var(--fg-secondary);}
.name-safe .ns-fwd{color:var(--fg-secondary);}   /* [R4 FIX3] AA: small always-visible text -> secondary (>=4.5:1) */
.name-safe .ns-fwd .mono{color:var(--fg-secondary);}

/* ---- HOME L2: Business basics — three managed blocks (alias on .addr-row/.fwd-row) ---- */
.bb-editor{display:flex; flex-direction:column; gap:11px;}
.bb-lead{font-size:var(--text-md); color:var(--fg-secondary); margin:0;}
.bb-list{display:flex; flex-direction:column; gap:9px; margin:0;}
.bb-row{display:flex; align-items:flex-start; gap:12px; padding:12px 13px; min-height:var(--bb-row-h);
  background:var(--surface-2); border:1px solid var(--border-subtle); border-radius:var(--radius-sm);}
.bb-row .bb-ico{flex:none; display:inline-grid; place-items:center; width:30px; height:30px;
  border-radius:var(--radius-sm); background:var(--surface); border:1px solid var(--border-subtle); color:var(--fg-secondary);}
.bb-row .bb-ico svg{width:17px;height:17px;}
.bb-body{flex:1; min-width:0; display:flex; flex-direction:column; gap:3px;}
.bb-label{font-size:var(--text-md); font-weight:500; color:var(--fg); letter-spacing:-.005em;}
.bb-sub{font-size:var(--text-sm); color:var(--fg-secondary); line-height:1.45;}
.bb-sub .mono{font-family:var(--font-mono); color:var(--fg);}
.bb-honest{font-size:12px; color:var(--fg-muted); line-height:1.45;}
.bb-tail{flex:none; display:flex; flex-direction:column; align-items:flex-end; gap:6px;}
.bb-done{display:inline-flex; align-items:center; gap:5px; font-size:var(--text-sm); font-weight:500; color:var(--accent-text);}
.bb-done svg{width:14px;height:14px; color:var(--accent);}
.bb-guided{display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); color:var(--bb-guided);}
.bb-guided .gd{position:relative; width:8px; height:8px; border-radius:50%; background:var(--fg-muted);}
.bb-act{height:32px; padding:0 11px; font-size:var(--text-sm);}
.bb-choice{display:flex; gap:7px; flex-wrap:wrap; margin-top:2px;}
.bb-chip{height:30px; padding:0 12px; border-radius:var(--radius-full); border:1px solid var(--border);
  background:var(--surface); color:var(--fg-secondary); font-size:var(--text-sm); font-weight:500; cursor:pointer;
  transition:background var(--dur-micro), border-color var(--dur-micro), color var(--dur-micro);}
.bb-chip:hover{background:var(--bg-sunken);}
.bb-chip[aria-pressed="true"]{background:var(--ink); color:var(--ink-contrast); border-color:var(--ink);}
.bb-chip:focus-visible{outline:none; box-shadow:var(--ring);}
/* [FAM] naam-kiezer boven de serp/share-velden: welke naam bewerk je (All names = site-breed) */
.fdom-pick{display:flex; flex-wrap:wrap; gap:6px; margin:2px 0 10px;}
.fdom-pick .bb-chip .mono{font-size:var(--text-xs);}

/* ---- the walkthrough transport bar (Pause/Play + Replay) in .stage-foot (motion §1.4) ---- */
/* [David 2026-07-12] De walkthrough + voorbeeldsites zijn eruit: geen "Play the walkthrough" / "See how the
   move works" / "See the AI deploy" meer. De .motion-bar (die alle drie de knoppen + het transport draagt)
   wordt verborgen. De HTML blijft staan zodat init()/JS-refs (#footBack/#motionToggle/...) niet crashen; het
   is puur onzichtbaar en onbereikbaar. #stageNote (los kind van .stage-foot) blijft werken voor echte flows. */
.motion-bar{display:none !important;}
.motion-bar--legacy{display:flex; align-items:center; justify-content:center; gap:10px; flex-wrap:wrap;}
.motion-btn{display:inline-flex; align-items:center; gap:8px; height:40px; padding:0 16px;
  border-radius:var(--radius-sm); border:1px solid var(--border); background:var(--surface); color:var(--fg);
  font-size:var(--text-md); font-weight:500; letter-spacing:-.005em; cursor:pointer;
  transition:background var(--dur-micro), border-color var(--dur-micro), color var(--dur-micro);}
.motion-btn:hover{background:var(--bg-sunken);}
.motion-btn:focus-visible{outline:none; box-shadow:var(--ring);}
.motion-btn svg{width:16px;height:16px;}
.motion-btn .mb-play{display:none;}
.motion-btn[aria-pressed="true"] .mb-pause{display:none;}
.motion-btn[aria-pressed="true"] .mb-play{display:inline-flex;}
.motion-btn[hidden]{display:none;}

/* ---- [C5 G5 3b] the position cue (Name . Secure . Live . Home), light, no heavy stepper ----
   Sits in the transport beside Pause. The current beat is ink/accent; the rest are muted.
   Shows only while a tour plays (#tourCue[hidden] otherwise). Reduced-motion safe. */
.tour-cue{display:inline-flex; align-items:center; gap:10px; margin:0; padding:0 4px; list-style:none;
  font-size:var(--text-xs); font-weight:500; letter-spacing:.01em; color:var(--fg-muted);}
.tour-cue[hidden]{display:none;}
.tour-cue .tc-seg{display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:color var(--dur-std) var(--ease-out);}
.tour-cue .tc-seg + .tc-seg{position:relative; padding-left:10px;}
.tour-cue .tc-seg + .tc-seg::before{content:""; position:absolute; left:0; top:50%; transform:translateY(-50%);
  width:5px; height:1px; background:var(--border-strong);}
.tour-cue .tc-dot{width:6px; height:6px; border-radius:var(--radius-full);
  background:var(--border-strong); transition:background var(--dur-std) var(--ease-out);}
/* a passed beat: settled ink, filled dot */
.tour-cue .tc-seg.is-done{color:var(--fg-secondary);}
.tour-cue .tc-seg.is-done .tc-dot{background:var(--fg-muted);}
/* the current beat: the one schaars-green accent + ink label */
.tour-cue .tc-seg.is-active{color:var(--fg);}
.tour-cue .tc-seg.is-active .tc-dot{background:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb, var(--accent) 18%, transparent);}

/* ---- [C5 G5 3b] the between-pop-up coachmark: a calm tip bubble, --fg-on-surface, hairline.
   Sits above the transport (its own row in the column-flex .stage-foot), so it can never
   overlap Pause or the chevrons. Reduced-motion: instant, no slide. ---- */
/* [walkthrough coach-mark] premium tekstboxje per stap met een subtiel gedimde scrim: de demo blijft
   zichtbaar (scrim = pointer-events:none, dus Pauze/chevrons/demo blijven klikbaar), maar de aandacht
   gaat naar de uitleg. Zit in de onderhelft, boven de transport-knoppen. */
.tour-callout{position:fixed; inset:0; z-index:55; display:flex; align-items:flex-end; justify-content:center;
  padding:0 16px 21vh; pointer-events:none;}
.tour-callout[hidden]{display:none;}
.tour-callout .tc-scrim{position:absolute; inset:0; background:rgba(24,21,16,.34); opacity:0;
  transition:opacity var(--dur-std) var(--ease-out);}
.tour-callout:not([hidden]) .tc-scrim{opacity:1;}
.reduced .tour-callout .tc-scrim{transition:none;}
.tour-callout .tc-box{position:relative; pointer-events:auto; max-width:min(40ch,90vw);
  background:var(--surface); color:var(--fg); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--e4); padding:15px 17px; text-align:left;}
.tour-callout .tc-eyebrow{display:block; font-size:var(--text-xs); font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent-text); margin:0 0 5px;}
.tour-callout .tc-text{margin:0; font-size:var(--text-md); line-height:1.5; color:var(--fg);}
@media(prefers-reduced-motion: no-preference){
  .tour-callout.tc-enter .tc-box{animation:calloutIn var(--dur-std) var(--ease-out) both;}
}
@keyframes calloutIn{from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:none;}}

/* ===== [David 2026-07-04] GAME-STIJL SPOTLIGHT-TOUR ================================
   De pane blijft VERLICHT (spotlight); de achtergrond dimt via een box-shadow OP de pane zelf,
   niet via een scrim boven de pane (lost de stacking-context-bug op: .stage z-index:2 vormt een
   eigen context, dus de pane naar z52 tillen boven een body-scrim werkt niet). Tijdens de donker-
   fase tilt `.stage` naar z50 zodat de pane-shadow ook brandbar(5)/footer(2) dekt. De transport-foot
   + coach staan lokaal boven de pane, dus verlicht + klikbaar. De coach is een compact dialoogje
   onderaan. Reduced-motion = instant, geen fade/animatie. */
body.is-tour-dark .stage{ z-index:50; }
#canvas.is-spotlit{ transition: box-shadow var(--dur-std) var(--ease-out); }
body.is-tour-dark #canvas.is-spotlit{ box-shadow: 0 20px 60px rgba(24,21,16,.3), 0 0 0 100vmax rgba(24,21,16,.72); }
.reduced #canvas.is-spotlit{ transition:none; }
body.is-tour-dark .stage-foot{ position:relative; z-index:12; }
/* [David 2026-07-04 · Fix 3] de coach staat VAST (fixed) net op/boven de pane-chroom-balk (de balk met
   de traffic-lights), zodat hij niet meescrollt en niet vóór de hoofd-inhoud (veld/kaart/knop/kaarten)
   valt. pointer-events:none: puur informatief, dus klikken (op de window-controls of content) gaan er
   dwars doorheen; hij onderschept niets. */
.tour-coach{ position:fixed; left:50%; top:clamp(64px,9vh,104px); bottom:auto; transform:translateX(-50%);
  z-index:56; width:min(42ch,calc(100vw - 32px)); pointer-events:none;
  background:var(--surface); color:var(--fg); border:1px solid var(--border-subtle);
  border-radius:var(--radius-lg); box-shadow:var(--e4); padding:15px 17px 14px; text-align:left; }
.tour-coach[hidden]{ display:none; }
.tour-coach .tco-eyebrow{ display:block; font-size:var(--text-xs); font-weight:600; letter-spacing:.07em;
  text-transform:uppercase; color:var(--accent-text); margin:0 0 5px; }
.tour-coach .tco-text{ margin:0; font-size:var(--text-md); line-height:1.5; color:var(--fg); }
.tour-coach .tco-next{ display:inline-flex; align-items:center; gap:5px; margin-top:11px; font-size:var(--text-sm);
  font-weight:600; color:var(--accent-text); background:none; border:0; cursor:pointer; padding:0; min-height:24px; }
.tour-coach .tco-next:hover{ color:var(--fg); }
@media(prefers-reduced-motion: no-preference){ .tour-coach.tco-in{ animation:coachIn var(--dur-std) var(--ease-out) both; } }
@keyframes coachIn{ from{opacity:0; transform:translate(-50%,10px);} to{opacity:1; transform:translate(-50%,0);} }
@media (max-width:560px){ .tour-coach{ top:clamp(58px,8vh,92px); bottom:auto; } }

/* =====================================================================
   [C4.5 refinement -> FIX-B P4] the no-scroll glance, recomposed on 0016 §B.
   Layer 1 = a compact visitor-framed hero + ONE dash-bar + one meta row +
   six statuscard ROWS (state, not settings). The 320px graphical preview
   grid broke the binding no-scroll law on 1280x768 AND 1440x900 (review
   criterion 3, blocker); the graphical previews live one tap deeper in
   the layer-2 editors, unchanged. No new colour, no new font; every value
   is a var(--existing) or a layout dimension on the 4px ritme.
   ===================================================================== */
/* [FIX-C P7] --dash-pane-max moved into the ONE :root above. */

/* ---- HOME hero: a SHORT visitor-view strip. The premium attention goes to the status rows;
   the hero is the framed "what visitors see" thumbnail, fully visible, never cut off. ---- */
.is-dashboard .viewport--compact{height:auto;}
.is-dashboard .viewport--compact .luma-site{height:auto; min-height:0;}   /* [C5 Gate3 punt3] geen vaste clamp meer: de hero (nav+hero, zonder shelf/footer via .luma-pane) toont volledig, niet afgesneden */
/* [C5 Gate3 punt3] de pane-hero = een nette, niet-geknipte strip: kop + tekst + mok naast elkaar, compact */
.viewport--compact .luma-pane{padding:12px 16px;}
.viewport--compact .luma-pane .luma-shelf,.viewport--compact .luma-pane .luma-foot{display:none;}
/* [preview-fix] de compacte hero is een echte RIJ: brand-still links, naam + regel rechts.
   (align-items/gap stonden er al, maar zonder display:flex deden ze niets: still en titel
   stapelden los onder elkaar en de titel werd afgesneden.) */
.viewport--compact .luma-pane .luma-hero{display:flex; align-items:center; gap:14px;}
.viewport--compact .luma-pane .luma-hero-copy{flex:1; min-width:0; max-width:none;}
.viewport--compact .luma-pane .gen-still{width:72px; height:56px; flex:none;}
/* [preview-fix] compacte nav: geen wrappende menu-regel of sublabel in een thumbnail */
.viewport--compact .luma-pane .luma-sublabel{display:none;}
.viewport--compact .luma-pane .luma-nav nav{font-size:12px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0;}
/* [preview-fix] Luma-demo: het gekantelde vel is absoluut gepositioneerd rechts; reserveer die
   ruimte zodat de titel er nooit onderdoor loopt */
.viewport--compact .luma-pane:not(.gen-site) .luma-hero-copy{padding-right:clamp(84px,24%,130px);}
.viewport--compact .luma-pane .luma-sub{display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;}
.viewport--compact .luma-pane .luma-still svg{max-height:92px;}
.is-dashboard .viewport{box-shadow:var(--e4);}           /* a small live-site float */
.reveal #dashCards{margin-top:var(--space-2);}

/* [FIX-B P4] the visitor frame label: the hero speaks in the site's own voice ("is on its way"),
   the label makes explicit that this is the visitor view, so it never competes with the owner
   status chip (review: three status vocabularies on one screen). */
.vf-label{font-size:12px; color:var(--fg-muted); margin:0 0 6px; letter-spacing:.01em;}

/* [FIX-B P4] compressed coming-soon hero on the dashboard glance (the full-size version still
   renders on the real visit-site view). The email line is state the Email facet row already
   carries; on the glance it would say it twice. */
.is-dashboard .viewport--compact .coming-soon{min-height:0; padding:12px 18px 14px;}
.is-dashboard .coming-soon .cs-mark{width:24px; height:24px; margin:0 auto 6px;}
.is-dashboard .coming-soon__name{font-size:20px;}
.is-dashboard .coming-soon__domain{font-size:14px; margin:2px 0 0;}
.is-dashboard .coming-soon__line{font-size:13px; margin:8px 0 0;}
.is-dashboard .coming-soon__line2{display:none;}
.is-dashboard .coming-soon__email{display:none;}

/* [FIX-B P4 -> SLOT B13] the live-site hero on the GLANCE is a THUMBNAIL (wordmark + still) on
   EVERY width, not only phones: the owner glance reads status first (review: "hero naar
   thumbnail"). The full composition still renders everywhere else (tour rest, AI preview,
   layer-2 share mock). This is what brings the LIVE dashboard inside the 0016 fold on
   1280x768 and 1440x900 (it overflowed 259/129px with the full hero). */
.is-dashboard .viewport--compact .luma-pane .luma-sub,
.is-dashboard .viewport--compact .luma-pane .luma-cta,
.is-dashboard .viewport--compact .luma-pane .luma-eyebrow{display:none;}
.is-dashboard .viewport--compact .luma-pane .luma-h{font-size:18px; margin:0;}
/* [preview-fix] generieke sites: één rustige subregel terug naast de still, zodat de thumbnail
   als een mini-site leest (naam + "live on domein") i.p.v. een los blok met een kale naam */
.is-dashboard .viewport--compact .gen-site .luma-sub{display:-webkit-box; -webkit-line-clamp:1; -webkit-box-orient:vertical; overflow:hidden; font-size:13px; margin:2px 0 0;}
.is-dashboard .viewport--compact .luma-pane .luma-still svg{max-height:56px;}
.is-dashboard .viewport--compact .luma-pane .gen-still{height:56px;}
.is-dashboard .viewport--compact .luma-pane .luma-nav{padding:8px 16px 0;}
.is-dashboard .viewport--compact .luma-pane .luma-hero{padding-top:0; padding-bottom:0; min-height:0;}
.is-dashboard .viewport--compact .luma-pane{padding:var(--space-2) var(--space-4);}

/* [David 2026-07-04 · Fix 1] tijdens de tour toont de reveal het ECHTE dashboard (DAF-4); de preview moet
   dus 1-op-1 de is-dashboard-thumbnail zijn i.p.v. de 150px-clip. Spiegel de is-dashboard-preview-regels
   op .is-tour (de pane-BREEDTE-var blijft is-dashboard-only, dus geen breedte-sprong tussen beats). */
.is-tour .viewport--compact{height:auto;}
.is-tour .viewport--compact .luma-site{height:auto; min-height:0;}
.is-tour .viewport--compact .luma-pane .luma-sub,
.is-tour .viewport--compact .luma-pane .luma-cta,
.is-tour .viewport--compact .luma-pane .luma-eyebrow{display:none;}
.is-tour .viewport--compact .luma-pane .luma-h{font-size:18px; margin:0;}
.is-tour .viewport--compact .luma-pane .luma-still svg{max-height:56px;}
.is-tour .viewport--compact .luma-pane .gen-still{height:56px;}
.is-tour .viewport--compact .luma-pane .luma-nav{padding:8px 16px 0;}
.is-tour .viewport--compact .luma-pane .luma-hero{padding-top:0; padding-bottom:0; min-height:0;}
.is-tour .viewport--compact .luma-pane{padding:var(--space-2) var(--space-4);}

/* ---- [FIX-B P4] layer 1: six status ROWS, 2-up on wide panes, 1-up on phones ---- */
.glance-rows{display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2) var(--space-3);
  --statuscard-h:52px;   /* rows on the glance: 52 >= the 44px touch floor, 3 row-pairs clear 768 */}
@media(max-width:700px){ .glance-rows{grid-template-columns:1fr;} }
/* [David 2026-07-12] gratis site: alle kaarten gedimd achter EEN drijvende "unlock met je domein"-tegel */
.dash-locked{position:relative;}
.dash-locked .glance-rows{pointer-events:none; filter:grayscale(.45); opacity:.5;}
.dash-locked__over{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; padding:14px;}
.dash-locked__card{display:flex; flex-direction:column; align-items:center; text-align:center; gap:12px; max-width:360px;
  padding:22px 24px; background:var(--surface); border:1px solid var(--border-subtle); border-radius:16px;
  box-shadow:0 10px 34px rgba(0,0,0,.14);}
.dash-locked__ico{display:inline-flex; width:40px; height:40px; align-items:center; justify-content:center;
  border-radius:12px; background:var(--bg-sunken); color:var(--fg-secondary);}
.dash-locked__ico svg{width:20px; height:20px;}
.dash-locked__txt{display:flex; flex-direction:column; gap:5px;}
.dash-locked__txt b{font-size:15px; font-weight:650; color:var(--fg); letter-spacing:-.01em;}
.dash-locked__txt span{font-size:13px; color:var(--fg-secondary); line-height:1.45;}
.dash-locked__cta{height:38px; padding:0 18px;}
.glance-rows .statuscard{padding:6px var(--space-4); --statuscard-thumb:34px;}
.glance-rows .statuscard__thumb .favicon,.glance-rows .statuscard__thumb .lmark,.glance-rows .statuscard__thumb svg{width:18px; height:18px;}
/* [ONTWERPKEUZE, FIX-C] on phones the .statuscard__act CTA stays hidden: the WHOLE 52px row is
   the same action (opens the same editor), so the label is a duplicate target that would crowd
   the row. The row itself is the touch surface; the act-label returns from 641px up. Documented
   in engineering/fix-notes-fase-c.md; revisit only if product wants a selling layer on phones. */
@media(max-width:640px){ .glance-rows .statuscard__act{display:none;} }

/* ---- [FIX-GLANCE 2] identity-row mini-graphics: miniaturised layer-2 mock DNA ---- */
/* every glance thumb shares one 40x30 stage so the label column stays aligned across rows
   (icon rows centre their 18px glyphs in the same stage; row height stays 52px). The act
   rows give the 6 extra thumb px back via tighter act padding, so "Extra domains" keeps
   its 52px single-line row on the 2-up desktop grid. */
.glance-rows .statuscard__thumb{width:40px; height:30px;}
.glance-rows .statuscard__act{padding:0 var(--space-2);}
.glance-mini{display:flex; width:100%; height:100%;}
.mini-dash{display:block; height:3px; border-radius:2px; background:var(--border-strong);}
.mini-dash--lite{background:var(--border);}
/* browser tab: rounded tab on the chrome-grey backdrop, brand fav dot + title dash, hairline bar */
.mini-tab{flex-direction:column; justify-content:flex-end; padding:6px 4px 0; box-shadow:inset 0 0 0 1px var(--border-subtle);}
.mini-tab__tab{display:flex; align-items:center; gap:3px; width:100%; padding:3px 4px 2px;
  background:var(--surface); border:1px solid var(--border-subtle); border-bottom:0; border-radius:4px 4px 0 0;}
.mini-fav{width:7px; height:7px; border-radius:2px; background:var(--luma-mark); flex:none;}
.mini-tab__title{flex:1;}
.mini-tab__bar{height:6px; background:var(--surface); border-top:1px solid var(--border-subtle); margin:0 -4px;}
/* link card: brand-wash image area on top (same wash recipe as .cs-og), two text dashes under */
.mini-share{flex-direction:column; background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-subtle);}
.mini-share__img{display:block; height:13px; background:color-mix(in srgb, var(--luma-mark) 24%, var(--surface));}
.mini-share__img--own, .mini-fav--img{background-size:cover; background-position:center; background-repeat:no-repeat;}
.mini-share__meta{display:flex; flex-direction:column; gap:3px; padding:4px 6px;}
.mini-share__meta .mini-dash{width:80%;}
.mini-share__meta .mini-dash--lite{width:55%;}
/* search result: short url dash, stronger title dash, two lighter description dashes */
.mini-serp{flex-direction:column; justify-content:center; gap:3px; padding:0 6px;
  background:var(--surface); box-shadow:inset 0 0 0 1px var(--border-subtle);}
.mini-serp .mini-dash{flex:none;}
.mini-serp__url{width:38%; height:2px; background:var(--border);}
.mini-serp__title{width:85%; height:4px; background:var(--fg-muted);}
.mini-serp .mini-dash--lite{width:92%; height:2px;}
.mini-serp__d2{width:70%;}
/* idle (coming soon): the same graphic, calmer - softer brand ink, everything a step dimmer */
.statuscard[data-state="idle"] .glance-mini{opacity:.82;}
.statuscard[data-state="idle"] .mini-fav{background:color-mix(in srgb, var(--luma-mark) 55%, var(--surface));}
.statuscard[data-state="idle"] .mini-share__img{background:color-mix(in srgb, var(--luma-mark) 14%, var(--surface));}
.statuscard[data-state="idle"] .mini-share__img--own, .statuscard[data-state="idle"] .mini-fav--img{opacity:.55; background-size:cover; background-position:center; background-repeat:no-repeat;}
.statuscard[data-state="idle"] .mini-serp__title{background:var(--border-strong);}

/* ---- [FIX-B P5] the tour-rest summary: hero still + chip line + facet checklist ---- */
.tour-rest{display:flex; flex-direction:column; gap:10px;}
/* the hero still shows WHOLE (no mid-headline clip): auto height on wide panes, a wordmark
   miniature on phones (same grammar as the luma-thumb) */
.tr-hero.viewport--compact{height:auto;}
@media(max-width:640px){
  .tr-hero .luma-eyebrow,.tr-hero .luma-sub,.tr-hero .luma-cta{display:none;}
  .tr-hero .luma-h{font-size:16px; margin:2px 0; line-height:1.1;}
  .tr-hero .luma-pane .luma-still svg{max-height:56px;}
}
/* [FIX layout-responsive-occlusie R1] short laptop/desktop heights (1280x800, 1366x768, and lower
   once browser-chrome is counted): the live-reveal hero is the tallest thing in the rest beat
   (~354px auto), which pushed the under-pane "get my name" CTA below the fold. Cap it the SAME way
   the phone override already does (hide eyebrow/sub/cta, shrink the headline + still), so the pane +
   the primary CTA both clear 100dvh with NO internal scroll on the aha-peak. Only the TOUR rest beat
   is touched (.is-tour .tr-hero); the real dashboard reveal keeps its full layout, phones keep their
   own override (min-width:641px), and tall tablets/desktops (>860px) keep the whole hero. */
@media(min-width:641px) and (max-height:860px){
  .is-tour .tr-hero .luma-eyebrow,.is-tour .tr-hero .luma-sub,.is-tour .tr-hero .luma-cta{display:none;}
  .is-tour .tr-hero .luma-h{font-size:18px; margin:2px 0; line-height:1.15;}
  .is-tour .tr-hero .luma-pane .luma-still svg{max-height:64px;}
}
.tour-rest .tr-line{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.tr-facets{list-style:none; margin:2px 0 0; padding:0; display:grid; grid-template-columns:1fr 1fr; gap:6px var(--space-4);}
@media(max-width:640px){ .tr-facets{grid-template-columns:1fr;} }
.tr-fact{display:flex; align-items:center; gap:8px; font-size:13px; min-height:24px;}
.tr-fact .tr-ico{width:15px; height:15px; display:inline-flex; color:var(--status-done); flex:none;}
.tr-fact .tr-ico svg{width:15px; height:15px;}
.tr-fact .tr-dot{width:7px; height:7px; margin:0 4px; border-radius:var(--radius-full); background:var(--border-strong); flex:none;}
.tr-fact .tr-lab{color:var(--fg); font-weight:500;}
.tr-fact .tr-val{color:var(--fg-secondary);}

/* ---- [FIX-B P4 -> FIX-GLANCE 1] the quiet meta STACK: the name-safe line, then the legal
   line, same grammar and the same left edge (rhythm: meta line -> legal line -> grid). The
   old >=860px two-column split parked the legal check NEXT to the meta line, where its own
   boxed grammar read as a floating block - David's review. Height is fold-neutral: two 20px
   lines + 4px gap = 44px vs the 48px the wrapped two-column row measured. */
.dash-meta{display:flex; flex-direction:column; gap:4px; margin-top:10px;}
.dash-meta .name-safe,.dash-meta .legal-check{margin-top:0;}
/* [FIX-G2 2] telefoon: het meta-blok wordt een strak, scanbaar blokje op EEN tekst-as. De iconen
   vormen een rail links (21px = 14px icoon + 7px gap); de feiten breken per groep: eigendom/termijn
   eerst, dan verlenging·privacy, dan de legal-regel als rustige afsluiter in dezelfde as. Geen
   nieuwe copy; alleen herschikt en aangelijnd. Hoogte: 5 regels (~98px) vs de losse wrap (~109px). */
@media(max-width:640px){
  .dash-meta{gap:6px;}
  .dash-meta .name-safe{display:block; position:relative; padding-left:21px;}
  .dash-meta .name-safe .ns-ico{position:absolute; left:0; top:3px;}
  .dash-meta .name-safe .ns-own,.dash-meta .name-safe .ns-terms,.dash-meta .name-safe .ns-fwd{display:block;}
  .dash-meta .name-safe .ns-mid--gap,.dash-meta .name-safe .ns-fwd > .ns-mid:first-child{display:none;}
  .dash-meta .legal-check{position:relative; padding-left:21px;}
  .dash-meta .legal-check .lc-ico{position:absolute; left:0; top:3px; margin-right:0;}
}

/* [FIX-B P4] the dashboard is a working surface: trim the stage head-margin and the pane-body
   padding a step so the glance clears 1280x768 (0016 §B). Uses :has (Chromium prototype).
   [SLOT B13] vertical pane padding one step down (space-4 ladder max): together with the hero
   thumbnail this gives the glance a real fold margin on 1280x768 instead of a zero-margin fit
   (the verifier: any future facet growth broke 768 immediately). */
.stage:has(.is-dashboard){padding-top:clamp(10px,1.8vh,20px);}
.is-dashboard .pane-body{padding:clamp(12px,1.4vw,16px) clamp(22px,3.4vw,32px);}

.tabmock-url{display:block; height:9px; width:62%; border-radius:var(--radius-xs); background:var(--bg-sunken);}

/* ---- the 3 NEW token-only mini-mocks (mail / forwarding / business basics) ---- */
.mailmock{width:100%; display:flex; flex-direction:column; gap:8px;}
.mailmock .mm-addr{display:flex; align-items:center; gap:8px; padding:9px 11px; background:var(--surface);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm); font-family:var(--font-mono); font-size:13px;
  color:var(--fg); min-width:0;}
.mailmock .mm-addr .mm-ico{flex:none; display:inline-flex; color:var(--fg-secondary);}
.mailmock .mm-addr .mm-ico svg{width:16px;height:16px;}
.mailmock .mm-addr .mono{overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.mailmock .mm-list{display:flex; flex-direction:column; gap:6px;}
.mailmock .mm-msg{display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--surface);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm); font-size:var(--text-xs); min-width:0;}
.mailmock .mm-dot{flex:none; width:6px; height:6px; border-radius:50%; background:var(--accent);}
.mailmock .mm-from{flex:none; font-weight:600; color:var(--fg);}
.mailmock .mm-snip{color:var(--fg-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; min-width:0;}

.fwdmock{width:100%; display:flex; flex-direction:column; gap:7px;}
.fwdmock .fm-main{display:flex; align-items:center; gap:8px; padding:8px 11px; background:var(--surface);
  border-radius:var(--radius-sm); box-shadow:inset 0 0 0 2px var(--surface), inset 0 0 0 3px var(--ink);
  font-family:var(--font-mono); font-size:13px; color:var(--fg);}
.fwdmock .fm-main .mono{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.fwdmock .fm-main .chip{flex:none;}
.fwdmock .fm-link{display:flex; align-items:center; gap:8px; padding:7px 11px; background:var(--surface);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm); font-size:var(--text-xs); color:var(--fg-muted);}
.fwdmock .fm-link .mono{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  font-size:var(--text-sm); color:var(--fg-secondary);}
.fwdmock .fm-link .fm-arrow{flex:none; display:inline-flex; color:var(--fg-muted);}
.fwdmock .fm-link .fm-arrow svg{width:13px;height:13px;}
.fwdmock .fm-empty{padding:10px 11px; text-align:center; font-size:12px; color:var(--fg-muted);
  border:1px dashed var(--border-strong); border-radius:var(--radius-sm);}

.bizmock{width:100%; display:flex; flex-direction:column; gap:7px;}
.bizmock .bz-tile{display:flex; align-items:center; gap:9px; padding:8px 11px; background:var(--surface);
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm); font-size:var(--text-sm); color:var(--fg);}
.bizmock .bz-ico{flex:none; display:inline-flex; color:var(--fg-secondary);}
.bizmock .bz-ico svg{width:16px;height:16px;}
.bizmock .bz-name{font-weight:500;}
.bizmock .bz-ok{margin-left:auto; display:inline-flex; color:var(--status-done);}
.bizmock .bz-ok svg{width:14px;height:14px;}
.bizmock .bz-rev{margin-left:auto; display:inline-flex; align-items:center; gap:6px; font-size:var(--text-xs); color:var(--bb-guided);}
.bizmock .bz-rev .gd{flex:none; width:7px; height:7px; border-radius:50%; background:var(--fg-muted);}

/* =====================================================================
   [C4.5 refinement R2] the "I already own it -> bring it over" flow.
   ===================================================================== */
/* NAME outcome: it's yours, with the detected registrar */
.owned-card{border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface);
  padding:16px; box-shadow:var(--e1); display:flex; flex-direction:column; gap:12px;}
.owned-registrar{display:flex; align-items:flex-start; gap:9px; font-size:var(--text-md); color:var(--fg-secondary); line-height:1.5;}
.owned-registrar b{color:var(--fg); font-weight:600;}
.owned-registrar .or-ico{flex:none; display:inline-flex; color:var(--fg-muted); margin-top:1px;}
.owned-registrar .or-ico svg{width:16px;height:16px;}
/* [C8 §1-B] two equally visible doors on the owned card: Bring it over + Log in to manage */
.owned-actions{display:flex; gap:10px; flex-wrap:wrap;}
.owned-actions .btn{flex:1 1 0; min-width:150px; justify-content:center;}
.owned-sub{font-size:var(--text-sm); color:var(--fg-muted); line-height:1.5; margin:0;}

/* the bring-it-over step: registrar head, then the two move-options */
.connect-head{display:flex; align-items:flex-start; gap:9px; font-size:16px; font-weight:600;
  letter-spacing:-.01em; color:var(--fg); margin:0;}
.connect-head .ch-ico{flex:none; display:inline-flex; color:var(--fg-secondary); margin-top:2px;}
.connect-head .ch-ico svg{width:19px;height:19px;}
.connect-head .ch-txt{flex:1; min-width:0;}   /* [layout-fix] de zin is EEN flex-item, geen losse kolommen meer */
.move-group{display:flex; flex-direction:column; gap:10px;}
.move-option{border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-sunken);
  padding:12px 13px; display:flex; flex-direction:column; gap:8px;
  transition:border-color var(--dur-std), box-shadow var(--dur-std), background var(--dur-std);}
.move-option[data-selected="true"]{border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); background:var(--surface);}   /* [R4 FIX2] selected = its header button is pressed */
.mo-head:focus-visible{outline:none; box-shadow:var(--ring);}   /* [R4 FIX2] focus ring on the real button header */
.mo-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap; width:100%; padding:0; margin:0; border:none; background:none; color:inherit; font:inherit; text-align:left; cursor:pointer;}   /* [R4 FIX2] real <button>: reset chrome, keep the header layout */
.mo-title{font-size:15px; font-weight:600; letter-spacing:-.01em; color:var(--fg);}
.mo-head .chip{flex:none;}
.mo-body{font-size:13px; color:var(--fg-secondary); line-height:1.5; margin:0;}
.mo-cost{font-size:13px; font-weight:500; color:var(--fg-secondary); line-height:1.5; margin:0;}
.mo-cost--free{color:var(--success-text);}
.mo-steps{font-size:var(--text-sm); color:var(--fg-muted); line-height:1.5; margin:0;}
.move-option--point .deep-link{width:100%;}
.mo-transfer-row{display:flex; gap:8px; align-items:stretch; margin-top:2px;}
.mo-tac{flex:1; min-width:0; height:40px; padding:0 12px; border:1px solid var(--border); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--fg); font-size:var(--text-md);}
.mo-tac:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint);}
.mo-tac[aria-invalid="true"]{border-color:var(--danger); box-shadow:0 0 0 3px var(--danger-tint);}
.mo-transfer-row .btn{flex:none;}
/* [C4.5 R2 / R4 FIX2] the selected option (its header <button> pressed) discloses only its detail -> the
   connect step stays 0px-scroll while both paths (free pointing + the honest transfer upgrade) are choosable. */
.move-option .mo-detail{display:none; flex-direction:column; gap:8px;}
.move-option[data-selected="true"] .mo-detail{display:flex;}   /* [R4 FIX2] only the selected option discloses its detail (cursor now lives on the .mo-head button) */
.btn-primary.pressing,.btn-secondary.pressing{filter:brightness(1.06);}

/* =====================================================================
   [C4.5 live-checker] "Live Check" — three honest truths that tick green,
   then resolve to "Live". ONE component (.livecheck), three skins:
   in-flow (provisioning) / HOME inline re-check / public page. Reuses
   prov-status/dot-live/lock/check/chip tokens. NO new colour, NO new
   font, NO fake %, NO world-map. (ux-flows §"Cyclus 4.5 live-checker")
   ===================================================================== */
.livecheck{display:flex; flex-direction:column; gap:var(--space-4);}
.livecheck__head{display:flex; flex-direction:column; gap:4px;}
.livecheck__title{font-size:clamp(var(--text-base),2.4vw,var(--text-lead)); font-weight:600; letter-spacing:-.015em; color:var(--fg); margin:0;}
.livecheck__sub{font-size:var(--text-md); color:var(--fg-secondary); margin:0; line-height:1.5;}
.livecheck .prov-status{min-height:20px;}   /* the running headline reuses .prov-status / .dot-live / .prov-msg verbatim */

/* the three legible truths (the prov-rail, elevated to honest evidence) */
.truths{display:flex; flex-direction:column; gap:10px; margin:0;}
.truth{display:flex; align-items:center; gap:12px; min-height:30px;}
.truth__mark{flex:none; width:26px; height:26px; display:grid; place-items:center; color:var(--fg-muted);
  transition:color var(--dur-std);}
.truth__mark svg{width:18px; height:18px;}
.truth__label{font-size:15px; font-weight:500; letter-spacing:-.005em; color:var(--fg-muted); transition:color var(--dur-std);}
.truth__note{font-size:var(--text-sm); color:var(--fg-secondary); margin-left:auto;}   /* [R4 FIX3] AA: secondary (>=4.5:1) */
.truth[data-state="checking"] .truth__mark{color:var(--fg-secondary);}
.truth[data-state="checking"] .truth__label{color:var(--fg);}
.truth[data-state="done"] .truth__mark{color:var(--accent-text);}       /* HAIRLINE check, not a filled pill */
.truth[data-state="done"] .truth__label{color:var(--fg);}
.truth[data-state="catchup"] .truth__mark{color:var(--fg-muted);}        /* not-yet is neutral, NEVER red */
.truth[data-state="catchup"] .truth__label{color:var(--fg);}
.truth[data-state="reserved"] .truth__mark{color:var(--fg-muted);}       /* [echt-werkend] coming-soon: gereserveerd, neutraal, NOOIT een groene site-loads-vink */
.truth[data-state="reserved"] .truth__label{color:var(--fg);}
/* truth 2 = the green .lock that clicks shut (the .lock machinery, used outside .addr-pill) */
.truth__mark .lock{display:inline-flex; color:var(--fg-muted); transition:color var(--dur-std), transform var(--dur-micro);}
.truth__mark .lock svg{width:17px;height:17px;}
.truth__mark .lock.locked{color:var(--accent-text);}   /* [R4 FIX4] AA non-text: meaningful green lock needs >=3:1, matches the other two truth marks */
.truth__mark .lock.click{animation:lockpop .42s var(--ease-out);}

/* [echt-werkend] de EEN-observatie-regel: precies wat de browser deed (opzoeken + een keer laden
   vanaf hier), geen verzonnen "N of N places" meer. Zelfde stille toon als de publieke checker. */
.lc-observed{display:flex; align-items:center; gap:8px; margin:4px 0 0; font-size:var(--text-sm); color:var(--fg-secondary); line-height:1.5;}
.lc-observed__dot{width:7px; height:7px; border-radius:50%; background:var(--accent-solid); flex:none;}
.lc-observed__dot--wait{background:var(--fg-muted);}
/* de neutrale "reserved"-markering op een coming-soon (nooit een groene site-loads-vink) */
.tr-reserve{width:10px; height:10px; border-radius:999px; border:2px solid var(--fg-muted); box-sizing:border-box;}
/* the honest timing line for "still catching up" (neutral, never red) */
.lc-timing{font-size:var(--text-sm); color:var(--fg-secondary); display:flex; align-items:flex-start; gap:7px; line-height:1.5; margin:0;}   /* [R4 FIX3] AA: secondary (>=4.5:1) */
.lc-timing svg{width:15px;height:15px; flex:none; margin-top:1px; color:var(--fg-muted);}
/* the resting "still live" confirmation (HOME re-check) */
.lc-ok{display:inline-flex; align-items:center; gap:7px; font-size:14px; font-weight:500; color:var(--accent-text);}
.lc-ok svg{width:16px;height:16px; color:var(--accent);}

/* ---- skin 2: HOME inline re-check (under the dash-bar; the hero collapses via .reveal.editing) ---- */
.recheck-slot{display:flex; flex-direction:column;}
.livecheck--inline{padding:15px 16px; margin-top:10px; border:1px solid var(--border-subtle);
  border-radius:var(--radius-md); background:var(--surface-2);}
.livecheck--inline .livecheck__title{font-size:15px;}
.lc-rest{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top:2px;}

/* the tappable Live chip (HOME): a 24px chip with a >=44px hit-area (a11y floor) */
.dash-recheck{border:none; cursor:pointer; font-family:inherit; position:relative;}
.dash-recheck::after{content:""; position:absolute; inset:-11px -10px; border-radius:var(--radius-full);}
.dash-recheck:hover{filter:brightness(.97);}
[data-theme="dark"] .dash-recheck:hover{filter:brightness(1.14);}
.dash-recheck:focus-visible{outline:none; box-shadow:var(--ring);}
/* [David 2026-07-18] neutraal, geen accent: een openstaand luik is een stand, geen succes-state */
.dash-recheck[aria-expanded="true"]{box-shadow:inset 0 0 0 1px var(--border-strong);}

/* ---- [VISITOR COUNT] the dash-bar stat cluster (visitor-count-widget.md, replaces the Live pill) ---- */
.vis-stat{display:inline-flex; align-items:baseline; gap:7px; flex:none; position:relative;
  border:none; background:none; padding:0; cursor:pointer; font-family:inherit; color:var(--fg-secondary);
  border-radius:var(--radius-xs); -webkit-tap-highlight-color:transparent;}
.vis-stat::after{content:""; position:absolute; inset:-11px -8px;}   /* >=44px hit-area (a11y floor) */
.vis-stat:focus-visible{outline:none; box-shadow:var(--ring);}
.vis-stat:hover .vis-word{color:var(--fg); border-bottom-color:var(--fg-muted);}
.vis-num{font-family:var(--font-sans); font-weight:700; font-size:17px; letter-spacing:-.02em;
  color:var(--fg); font-variant-numeric:tabular-nums;}   /* NOT green: a count is a fact, not a success-state */
.vis-num.vis-roll{animation:vis-roll .2s var(--ease-out);}
@keyframes vis-roll{0%{transform:translateY(-38%); opacity:.4;}100%{transform:translateY(0); opacity:1;}}
.vis-word{font-size:13px; color:var(--fg-secondary); line-height:1.2;
  border-bottom:1px dotted var(--border-strong); transition:color var(--dur-micro), border-color var(--dur-micro);}
.vis-chev{display:inline-flex; align-self:center; color:var(--fg-muted);}
.vis-chev svg{width:12px; height:12px; transform:rotate(90deg); transition:transform var(--dur-std) var(--ease-out);}
.vis-stat[aria-expanded="true"] .vis-chev svg{transform:rotate(-90deg);}
.vis-stat[aria-expanded="true"] .vis-chev{color:var(--fg-secondary);}
.vis-dot{width:8px; height:8px; border-radius:50%; align-self:center; flex:none;}
.vis-dot--breathe{border:1.5px solid var(--fg-muted); background:transparent; animation:breathe 4s var(--ease-out) infinite;}
.vis-ping{position:absolute; left:-1px; top:50%; width:9px; height:9px; margin-top:-4px; border-radius:50%;
  border:var(--border-emph) solid var(--accent); opacity:.6; pointer-events:none; animation:ping .9s var(--ease-out) 1;}

/* the expanded visits panel: cool card, connected segmented control, refined bar sparkline, divided footer */
.vis-panel{display:flex; flex-direction:column; gap:14px; padding:16px 18px;}
/* connected segmented control (one inset track; active segment lifts on a white surface) -- reuses the
   .tld-chip[aria-pressed] semantics but restyles them inside the track, so it reads as one control. */
.vis-seg{display:inline-flex; align-self:flex-start; gap:2px; padding:3px; max-width:100%;
  background:var(--bg-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius-full); flex-wrap:wrap;}
.vis-seg .tld-chip{font-family:var(--font-sans); height:28px; padding:0 13px; border-radius:var(--radius-full);
  font-size:12px; font-weight:500; letter-spacing:0; border:1px solid transparent; background:transparent;
  color:var(--fg-secondary); transition:background var(--dur-micro), color var(--dur-micro), box-shadow var(--dur-micro);}
.vis-seg .tld-chip::after{content:none;}
.vis-seg .tld-chip[aria-pressed="false"]{background:transparent; border-color:transparent; color:var(--fg-secondary);}
.vis-seg .tld-chip[aria-pressed="false"]:hover{background:transparent; border-color:transparent; color:var(--fg);}
.vis-seg .tld-chip[aria-pressed="true"]{background:var(--surface); border-color:transparent; color:var(--fg);
  box-shadow:0 1px 2px rgba(16,24,40,.10), 0 0 0 1px rgba(16,24,40,.04);}
/* the plot row: sparkline + a right-aligned value/context caption (like the mockup) */
.vis-plot{display:flex; align-items:flex-end; gap:18px;}
.vis-spark{flex:1 1 auto; min-width:0; max-width:340px; display:flex; align-items:flex-end; gap:3px;
  height:54px; padding-bottom:1px; border-bottom:1px solid var(--border-subtle);}   /* hairline baseline */
.vis-spark i{flex:1; min-height:3px; border-radius:3px 3px 0 0;
  background:color-mix(in srgb, var(--accent) 20%, transparent); transition:background var(--dur-micro);}
.vis-spark i.is-cur{background:var(--accent);}
.vis-spark i:hover{background:color-mix(in srgb, var(--accent) 48%, transparent);}
.vis-spark i.is-cur:hover{background:var(--accent-hover);}
.vis-cap{flex:none; text-align:right; display:flex; flex-direction:column; gap:2px; padding-bottom:2px;}
.vis-cap__num{font-family:var(--font-sans); font-size:20px; font-weight:700; letter-spacing:-.02em; color:var(--fg); line-height:1;}
.vis-cap__lab{font-size:12px; color:var(--fg-secondary);}
.vis-cap__hint{font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--fg-muted);}
/* divided footer: the MOVED live-check + Done */
.vis-foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding-top:13px; border-top:1px solid var(--border-subtle);}
.vis-live{display:inline-flex; align-items:center; gap:8px; font-size:13px; color:var(--fg-secondary);}
.vis-live .dot-live{width:8px; height:8px; background:var(--fg-muted);}   /* neutral until confirmed live */
.vis-live .dot-live::after{display:none;}                                 /* no permanent ping in the footer */
.vis-refresh{gap:6px;}
.vis-refresh svg{width:14px; height:14px;}
.vis-refresh.is-busy svg{animation:visspin .8s linear infinite;}
@keyframes visspin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion: reduce){ .vis-refresh.is-busy svg{animation:none;} }
/* [ops 2026-07-19] het platform-overzicht: rustige, scanbare rijen; max-hoogte met eigen scroll */
.ops-list{display:flex; flex-direction:column; gap:6px; max-height:56vh; overflow-y:auto;
  padding:2px; margin:0 -2px;}
.ops-row{display:flex; align-items:center; gap:10px; padding:10px 14px; text-decoration:none;
  background:var(--surface); border:1px solid var(--border-subtle); border-radius:10px; color:var(--fg);}
.ops-row:hover{background:var(--bg-sunken); border-color:var(--border);}
.ops-badge{flex:none; width:8px; height:8px; border-radius:50%; background:var(--fg-muted); opacity:.45;}
.ops-badge.is-real{background:var(--accent); opacity:1;}
.ops-badge.is-held{background:#C9A23F; opacity:.9;}
.ops-main{display:flex; flex-direction:column; gap:1px; min-width:0; flex:1;}
.ops-main .mono{font-size:13.5px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ops-sub{font-size:11px; color:var(--fg-muted); overflow:hidden; text-overflow:ellipsis; white-space:nowrap;}
.ops-meta{flex:none; font-size:11.5px; color:var(--fg-muted); white-space:nowrap;}
.ops-open{flex:none; display:inline-flex; color:var(--fg-muted);}
.ops-open svg{width:13px; height:13px;}
.ops-you{color:var(--fg-muted);}
.ops-who{color:var(--fg); font-weight:600;}
/* een afgehaakte koop-funnel: gedimd, want er staat niets op en de sweep ruimt 'm op */
.ops-row.is-abandoned{opacity:.62;}
.ops-row.is-abandoned:hover{opacity:1;}
/* green-dot row: the existing list, plus the one action that makes a candidate Site of the day */
a.ops-hit{display:flex; align-items:center; gap:10px; flex:1 1 220px; min-width:0; color:inherit; text-decoration:none;}
.ops-row:has(.ops-make){flex-wrap:wrap;}
.ops-make{flex:none; appearance:none; background:transparent; color:var(--fg);
  border:1px solid var(--border-strong); border-radius:var(--radius-sm); min-height:var(--control-h);
  padding:0 12px; cursor:pointer; font:500 13px/1 var(--font-sans); letter-spacing:-.005em;}
.ops-hit + .ops-make, .ops-cand .ops-make{margin-left:auto;}
.ops-make:hover{background:color-mix(in srgb, var(--fg) 4%, transparent); border-color:var(--fg);}
.ops-make:focus-visible{outline:none; box-shadow:var(--ring);}
.ops-h{margin:20px 0 6px; font-size:15px; font-weight:600; letter-spacing:-.02em;}
.ops-cand{display:flex; align-items:center; gap:10px; padding:10px 14px; background:var(--surface);
  border:1px solid var(--border-subtle); border-radius:10px;}
.ops-shot{width:96px; height:44px; object-fit:cover; border-radius:8px; border:1px solid var(--border-subtle);
  background:var(--bg-sunken); flex:none;}
.ops-shot--empty{display:inline-block;}
.ops-abandoned{color:var(--fg-muted); font-style:italic;}
.addr-changefree{border:none; background:transparent; color:var(--fg-secondary); font-size:12px;
  text-decoration:underline; text-underline-offset:2px; cursor:pointer; padding:2px 4px; min-height:24px;}
.addr-changefree:hover{color:var(--fg);}
.drop-free-hint{margin:2px 0 14px; font-size:13px; color:var(--fg-secondary);}
.drop-free-hint .link{font-size:13px;}
.vis-live.is-ok{color:var(--fg);}
.vis-live.is-ok .dot-live{background:var(--accent);}
.vis-live .vis-live-msg{font-size:13px;}
.vis-foot .btn-ghost{color:var(--fg-secondary);}
/* a long domain never pushes the stat off the row (spec) */
.dash-bar .dash-dom{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex:0 1 auto;}
/* [David 2026-07-18 mobiel] geen collapse ladder meer: op telefoons wikkelt de dash-bar toch, dus
   de stat heeft zijn eigen regel en "128 visitors this month" past altijd. Een kale "128" las als
   een zwevend getal. */
@media(max-width:640px){ .vis-plot{gap:12px;} .vis-cap__num{font-size:18px;} }
/* compacte periode-chips: op 390px vullen de vier periodes samen EEN regel (nooit een wees-chip) */
@media(max-width:480px){
  .vis-seg{gap:1px; padding:2px; flex-wrap:nowrap; align-self:stretch;}
  .vis-seg .tld-chip{flex:1 1 0; min-width:0; padding:0 4px; font-size:11.5px; height:26px;
    letter-spacing:-.01em; text-align:center; justify-content:center; display:inline-flex;
    align-items:center; white-space:nowrap;}
}
.reduced .vis-dot--breathe,.reduced .vis-ping,.reduced .vis-num.vis-roll,.reduced .vis-spark i{animation:none !important;}

/* ---- [ANALYTICS v2] the full panel body (site-analytics.md): tiles-as-tabs, chart, breakdowns ---- */
.vis-anbody{display:flex; flex-direction:column; gap:12px; min-width:0;}
.vis-anwait{display:inline-flex; align-items:center; gap:9px; font-size:13px; color:var(--fg-secondary); padding:10px 2px;}
.vis-anzero{display:flex; flex-direction:column; gap:4px; padding:12px 2px;}
.vis-anzero strong{font-size:14px; font-weight:600; color:var(--fg);}
.vis-anzero span{font-size:13px; color:var(--fg-secondary); max-width:46ch;}
.vis-tiles{display:grid; grid-template-columns:1fr 1fr; gap:8px;}
.vis-tile{font-family:inherit; text-align:left; cursor:pointer; display:flex; flex-direction:column; gap:1px;
  background:var(--bg-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:10px 14px 8px; transition:background var(--dur-micro), border-color var(--dur-micro), box-shadow var(--dur-micro);
  -webkit-tap-highlight-color:transparent;}
.vis-tile:hover{background:var(--surface);}
.vis-tile:focus-visible{outline:none; box-shadow:var(--ring);}
.vis-tile.is-on{background:var(--surface); border-color:var(--border-strong); box-shadow:0 1px 2px rgba(16,24,40,.07);}
.vis-tile__lab{font-size:12px; color:var(--fg-muted); font-weight:500;}
.vis-tile.is-on .vis-tile__lab{color:var(--fg-secondary);}
.vis-tile__num{font-family:var(--font-sans); font-size:24px; font-weight:700; letter-spacing:-.025em;
  color:var(--fg); font-variant-numeric:tabular-nums; line-height:1.25;}
.vis-spark--lg{max-width:none; height:84px;}
.vis-xlab{display:flex; justify-content:space-between; font-size:11px; color:var(--fg-muted); margin-top:-6px;}
.vis-angrid{display:grid; grid-template-columns:1fr 1fr; gap:16px 24px; margin-top:6px;}
.vis-block{min-width:0;}
.vis-block h5{margin:0 0 9px; font-size:13px; font-weight:600; color:var(--fg); letter-spacing:-.01em; line-height:1.3;}
.vis-block h5 small{display:block; font-weight:400; font-size:11.5px; color:var(--fg-muted); margin-top:1px;}
.vis-none{font-size:12.5px; color:var(--fg-muted); padding:2px 0;}
/* phone/computer split: one bar, two segments, always direct-labeled (never color-alone) */
.vis-split{display:flex; gap:2px; height:26px; border-radius:var(--radius-xs); overflow:hidden; margin-bottom:8px;}
.vis-split i{display:block; height:100%; flex:1 1 auto;}
.vis-split__ph{background:var(--accent); flex:0 0 auto;}
.vis-split__pc{background:var(--fg-secondary);}
.vis-split__legend{display:flex; justify-content:space-between; gap:8px; font-size:12px; color:var(--fg-secondary); flex-wrap:wrap;}
.vis-split__legend strong{color:var(--fg); font-weight:600; font-variant-numeric:tabular-nums;}
.vis-dotk{width:8px; height:8px; border-radius:2px; display:inline-block; margin-right:5px;}
.vis-dotk--g{background:var(--accent);}
.vis-dotk--k{background:var(--fg-secondary);}
/* top lists: label + value + a quiet accent bar */
.vis-blist{display:flex; flex-direction:column; gap:8px;}
.vis-brow{display:grid; grid-template-columns:minmax(0,1fr) auto; gap:3px 10px; align-items:baseline; font-size:12.5px;}
.vis-brow__lbl{color:var(--fg); font-weight:500; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.vis-brow__lbl small{color:var(--fg-muted); font-weight:400; font-size:11px;}
.vis-flag{margin-right:7px;}
.vis-brow__val{color:var(--fg-secondary); font-weight:600; font-variant-numeric:tabular-nums;}
.vis-brow__bar{grid-column:1/-1; height:5px; border-radius:3px; background:var(--bg-sunken); position:relative; overflow:hidden;}
.vis-brow__bar i{position:absolute; top:0; bottom:0; left:0; border-radius:3px;
  background:color-mix(in srgb, var(--accent) 42%, transparent);}
.vis-note{font-size:12px; color:var(--fg-muted);}
.vis-note--privacy{border-top:1px solid var(--border-subtle); padding-top:11px;}
/* enhanced (opt-in): teaser card, explainer sheet, extras row */
.vis-teaser{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:4px;
  border:1px dashed var(--border-strong); border-radius:var(--radius-md); padding:12px 14px; background:var(--bg-sunken);}
.vis-teaser__tx{flex:1; min-width:220px; font-size:13px; color:var(--fg-secondary); line-height:1.45;}
.vis-teaser__tx strong{display:block; color:var(--fg); font-weight:600; margin-bottom:1px;}
.vis-enhsheet{max-width:520px; padding:4px 2px;}
.vis-enhsheet h4{margin:0 0 3px; font-size:16px; font-weight:650; letter-spacing:-.015em; color:var(--fg);}
.vis-enhsheet__sub{margin:0 0 14px; font-size:13px; color:var(--fg-secondary);}
.vis-duo{display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-bottom:16px;}
@media(max-width:560px){ .vis-duo{grid-template-columns:1fr;} }
.vis-duo__col{background:var(--bg-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:11px 13px;}
.vis-duo__col h6{margin:0 0 7px; font-size:10.5px; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-muted);}
.vis-duo__col ul{margin:0; padding:0; list-style:none; font-size:12.5px; color:var(--fg-secondary);}
.vis-duo__col li{padding:3px 0 3px 13px; position:relative;}
.vis-duo__col li::before{content:""; position:absolute; left:0; top:9px; width:5px; height:5px; border-radius:50%; background:var(--border-strong);}
.vis-duo__col.is-get li::before{background:var(--accent);}
.vis-enhsheet__row{display:flex; gap:10px; align-items:center; flex-wrap:wrap;}
.vis-enh{margin-top:4px; border-top:1px solid var(--border-subtle); padding-top:12px;}
.vis-enh__head{margin:0 0 10px; font-size:13px; font-weight:600; color:var(--fg); display:flex; align-items:baseline; gap:12px;}
.vis-enh__tiles{display:grid; grid-template-columns:repeat(3, 1fr); gap:8px;}
@media(max-width:560px){ .vis-enh__tiles{grid-template-columns:1fr;} }
.vis-enh__tile{background:var(--bg-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:9px 13px; display:flex; flex-direction:column; gap:1px;}
.vis-enh__num{font-family:var(--font-sans); font-size:18px; font-weight:700; letter-spacing:-.02em; color:var(--fg); font-variant-numeric:tabular-nums;}
.vis-enh__lab{font-size:11.5px; color:var(--fg-muted);}
.vis-enh__hmrow{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:12px;
  border-top:1px solid var(--border-subtle); padding-top:12px;}
.vis-enh__hmtx{flex:1; min-width:200px; font-size:12.5px; color:var(--fg-secondary);}
.vis-enh__hmtx strong{display:block; color:var(--fg); font-weight:600;}
/* heatmap view: the real page in a frame, gridded tap blobs on top, scroll edge on the right */
.vis-hm__head{display:flex; align-items:flex-start; justify-content:space-between; gap:14px; flex-wrap:wrap;}
.vis-hm__title{font-size:14.5px; font-weight:600; color:var(--fg); letter-spacing:-.01em;}
.vis-hm__sub{font-size:12px; color:var(--fg-muted); margin-top:1px;}
.vis-hm__pages{display:flex; gap:6px; flex-wrap:wrap;}
.vis-hm__pages .tld-chip{height:26px; padding:0 11px; border-radius:var(--radius-full); font-size:12px;
  border:1px solid var(--border); background:var(--surface); color:var(--fg-secondary);}
.vis-hm__pages .tld-chip::after{content:none;}
.vis-hm__pages .tld-chip[aria-pressed="true"]{border-color:var(--fg); color:var(--fg); font-weight:600;}
.vis-hm__stage{background:var(--bg-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius-md);
  padding:20px; display:flex; justify-content:center; max-height:460px; overflow-y:auto;}
@media(max-width:480px){ .vis-hm__stage{padding:10px;} }
.vis-hm__page{position:relative; flex:none; background:var(--surface); border:1px solid var(--border);
  border-radius:12px; overflow:hidden; box-shadow:var(--e2);}
.vis-hm__frame{display:block; border:0; pointer-events:none;}
.vis-hm__mockpage{display:flex; flex-direction:column; gap:12px; padding:18px 16px;}
.vis-hm__mockpage i{display:block; background:var(--bg-sunken); border-radius:5px; flex:none;}
.vis-hm__blob{position:absolute; transform:translate(-50%,-50%); border-radius:50%; pointer-events:none;
  mix-blend-mode:multiply;
  background:radial-gradient(circle, rgba(15,185,112,.42), rgba(15,185,112,.16) 55%, transparent 72%);}
.vis-hm__blob.is-warm{background:radial-gradient(circle, rgba(245,166,35,.5), rgba(245,166,35,.2) 55%, transparent 72%);}
.vis-hm__blob.is-hot{background:radial-gradient(circle, rgba(217,45,54,.55), rgba(245,166,35,.32) 55%, transparent 72%);}
.vis-hm__scrolledge{position:absolute; top:0; right:0; bottom:0; width:6px; pointer-events:none;
  background:linear-gradient(180deg, rgba(15,185,112,.5), rgba(15,185,112,.24) 55%, rgba(15,185,112,.06) 80%, transparent);}
.vis-hm__scrollmark{position:absolute; right:10px; transform:translateY(-50%); font-size:10px; font-weight:600;
  color:var(--accent-text); background:var(--accent-bg, #E7F8EC); border-radius:var(--radius-full);
  padding:2px 8px; pointer-events:none; white-space:nowrap;}
.vis-hm__legend{display:flex; align-items:center; justify-content:center; gap:10px; font-size:11.5px; color:var(--fg-secondary);}
.vis-hm__ramp{width:110px; height:7px; border-radius:4px;
  background:linear-gradient(90deg, #0FB970, #F5A623, #D92D36);}
.vis-hm__foot{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
@media(max-width:700px){ .vis-angrid{grid-template-columns:1fr; gap:14px;} }
@media(max-width:480px){ .vis-tile__num{font-size:20px;} .vis-spark--lg{height:66px;} }

/* ---- skin 3: the public "Is your website live?" page (same Living Pane, our tokens) ---- */
.checker-page{display:flex; flex-direction:column;}
.checker-field{display:flex; gap:10px; align-items:stretch; margin-top:8px;}
.checker-field .field--domain{flex:1; min-width:0;}
.checker-field .btn{flex:none; height:var(--field-hero-h);}
.checker-try{margin-top:12px;}
.checker-outcome{display:flex; flex-direction:column; gap:11px;}
/* [checker-globe] wireframe-bol: hairlines, accent-pings met uitdijende ringen, ademende schaal */
.lc-globe{display:flex; justify-content:center; margin:8px 0 2px;}
.lc-globe svg{width:150px; height:150px; overflow:visible; animation:globeBreathe 5.5s ease-in-out infinite;}
@keyframes globeBreathe{0%,100%{transform:scale(1);}50%{transform:scale(1.03);}}
.g-sphere{fill:var(--surface); stroke:var(--border); stroke-width:1;}
.g-line{fill:none; stroke:var(--border-subtle); stroke-width:1;}
.gp-dot{fill:var(--accent-solid); opacity:.22; animation:gpDot 5s infinite; animation-delay:calc(var(--i)*.5s);}
.gp-ring{fill:none; stroke:var(--accent-solid); stroke-width:1.2; opacity:0; transform-box:fill-box; transform-origin:center;
  animation:gpRing 5s infinite; animation-delay:calc(var(--i)*.5s);}
@keyframes gpDot{0%,6%{opacity:.22;}10%,32%{opacity:1;}44%,100%{opacity:.22;}}
@keyframes gpRing{0%,7%{opacity:0; transform:scale(1);}12%{opacity:.65;}34%{opacity:0; transform:scale(3.4);}100%{opacity:0; transform:scale(3.4);}}
.reduced .lc-globe svg,.reduced .gp-dot,.reduced .gp-ring{animation:none;}
.reduced .gp-dot{opacity:.8;}
/* [checker-spots] het wereldpaneel: hairline-grid van plekken, rustige stagger-in, geen kaart-kitsch */
.spots{border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface); overflow:hidden; box-shadow:var(--e1);}
.spots__head{padding:10px 14px; font-size:11px; font-weight:600; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-muted); border-bottom:1px solid var(--border-subtle);}
.spots__grid{display:grid; grid-template-columns:1fr 1fr; gap:1px; background:var(--border-subtle);}
.spot{display:flex; align-items:center; gap:8px; padding:9px 14px; min-width:0; background:var(--surface);
  opacity:0; transform:translateY(4px); animation:spotIn .38s var(--ease-out) forwards; animation-delay:calc(var(--i)*60ms);}
@keyframes spotIn{to{opacity:1; transform:none;}}
.reduced .spot{animation:none; opacity:1; transform:none;}
.spot__city{font-size:13px; color:var(--fg); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.spot__cc{font-size:10px; font-weight:600; letter-spacing:.06em; color:var(--fg-secondary); flex:none;
  border:1px solid var(--border-subtle); border-radius:var(--radius-xs); padding:2px 5px; background:var(--bg-sunken); min-width:26px; text-align:center;}
.spot__sp{flex:1;}
.spot__ms{font-size:11px; color:var(--fg-muted);}
.spot__state{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--fg-muted); white-space:nowrap; flex:none;}
.spot__state.is-ok{color:var(--fg);}
.spot__dot{width:7px; height:7px; border-radius:50%; background:var(--accent-solid); flex:none;}
.spot__dot--wait{background:var(--fg-muted); animation:spotWait 1.4s ease-in-out infinite;}
@keyframes spotWait{0%,100%{opacity:.35;}50%{opacity:.9;}}
.reduced .spot__dot--wait{animation:none; opacity:.6;}
/* [checker-honest] de eerlijke een-regel-observatie i.p.v. het verzonnen 10-steden-grid */
.spots__note{display:flex; align-items:flex-start; gap:9px; padding:11px 14px; margin:0; font-size:var(--text-md); color:var(--fg-secondary); line-height:1.5;}
.spots__note .spot__dot{margin-top:6px;}
@media (max-width:560px){ .spots__grid{grid-template-columns:1fr;} }
.co-head{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.co-dom{font-family:var(--font-mono); font-size:18px; font-weight:500; color:var(--fg); letter-spacing:-.01em;}
.co-lead{font-size:16px; font-weight:600; color:var(--fg); letter-spacing:-.01em; margin:0;}
.co-sub{font-size:var(--text-md); color:var(--fg-secondary); margin:0; line-height:1.5;}
.co-actions{display:flex; gap:10px; flex-wrap:wrap; margin-top:3px;}

/* the brand-bar entry to the public checker (the only public door; there is no hash route) */
.bar-right{display:flex; align-items:center; gap:14px;}
.nav-live{font-size:13px; font-weight:500; color:var(--fg-secondary); text-decoration:none; letter-spacing:-.005em;
  white-space:nowrap; border-radius:var(--radius-xs); padding:4px 2px; cursor:pointer; background:none; border:none; font-family:inherit;
  position:relative;}
.nav-live::after{content:""; position:absolute; inset:-9px -6px;}   /* [FIX-B] 44px hit-area on the only public checker door */
.nav-live:hover{color:var(--fg); text-decoration:underline; text-underline-offset:3px;}
.nav-live:focus-visible{outline:none; box-shadow:var(--ring);}
/* [FIX-B P6c] phones keep the checker door: a shorter label instead of display:none (the old rule
   removed the ONLY public entry under 431px while claiming a hash route that no longer exists). */
.nav-live__short{display:none;}
@media(max-width:430px){
  .nav-live__long{display:none;}
  .nav-live__short{display:inline;}
}

/* =====================  responsive  ===================== */
@media(max-width:640px){
  .grab-row{flex-direction:column;}
  .grab-go{width:100%;}
  .route-grid{grid-template-columns:1fr;}
  .connect-lead-row{flex-direction:column;}
  .connect-lead-row .btn{width:100%;}
  .polish-row{grid-template-columns:1fr;}
  .payoff{grid-template-columns:1fr;}
  .r-price{margin-left:0;}
  .live-banner{flex-direction:column; align-items:flex-start;}
  .live-banner .thumb{width:100%; height:120px;}
  .doors{grid-template-columns:1fr;}
  .fwd-row{flex-wrap:wrap;}
  /* [FIX-B P6b] the spacer keeps its margin-left:auto job on phones too: the kebab stays on the
     chip row (no more orphan left-aligned row), and long bars wrap naturally. The menu itself
     anchors to the dash-bar (position:static wrap), so it can never open outside the viewport
     again (it opened at x=-151 on 390 before). */
  .dash-bar{position:relative;}
  .dash-bar .overflow-wrap{position:static;}
  .dash-bar .overflow-menu{top:calc(100% + 4px); right:0; left:auto;}
  /* [FIX-GLANCE 3 -> menu-fix] de dash-bar-acties staan op telefoons op EEN rij van gelijke
     knoppen (44px hoog, compacte tekst) i.p.v. gestapeld over drie schermregels: minder scrollen.
     De chip + domein + hamburger houden de eerste rij (spacer duwt de hamburger rechts). Scoped
     :not(.is-tour): de tour deelt dit oppervlak en zijn CLS-budget mag niet bewegen (FIX-B P5). */
  /* de onzichtbare regel-breker: chip-rij boven, de drie knoppen ALTIJD samen op hun eigen rij */
  body:not(.is-tour) .dash-bar::before{content:""; flex-basis:100%; order:4; height:0;}
  body:not(.is-tour) .dash-bar .btn{order:5; flex:1 1 30%; min-width:0; height:44px; padding:0 6px; font-size:13px; justify-content:center; white-space:nowrap;}
  body:not(.is-tour) .dash-bar .btn svg{display:none;}   /* tekst wint op 375px; de labels zijn duidelijk genoeg */
  body:not(.is-tour) .dash-bar .overflow-menu{top:46px;}
  .webaddr{max-width:none;}
  .taken-alt{flex-wrap:wrap;}
  /* [C4.5 refinement] the transfer code stacks under its button on phones */
  .mo-transfer-row{flex-direction:column;}
  .mo-transfer-row .btn{width:100%;}
}

/* =====================  reduced motion  ===================== */
.reduced .halo,.reduced .glyph,.reduced .dot-live::after,.reduced .chip-ok .cdot,
.reduced .luma-steam,.reduced .luma-still .ink-blue,.reduced .skel-row::after,.reduced .pcard,.reduced .preview-card,
.reduced .share-slide,.reduced .pane-body.fade-in{animation:none !important;}
.reduced .pcard,.reduced .preview-card,.reduced .share-slide{opacity:1; transform:none;}
/* [C4.5 refinement] no width-morph on the HOME widen under reduced motion */
.reduced .stage-inner{transition:none !important;}
.reduced .switch,.reduced .switch__thumb{transition:none !important;}
/* [C4] extend reduced-motion to the favicon-fall, the chrome-in, and the new Layer-2 expand */
.reduced .tab .favicon,.reduced .is-browser .tab,.reduced .is-browser .chrome-addr,.reduced .is-browser .example-pill,
.reduced .statuscard__chev,.reduced .tld-more summary .chev,.reduced .statuscard__trigger .statuscard__chev{transition:none !important;}
.reduced .tab .favicon.fall{transform:none !important;}
/* [C4.5 live-checker] reduced-motion twin: truths fill instantly, the lock locks without the pop,
   the headline does not fade. Meaning persists (three ticks, lock shut, "Live"). */
.reduced .truth__mark,.reduced .truth__label,.reduced .truth__mark .lock,.reduced .prov-msg{transition:none !important;}
.reduced .truth__mark .lock.click{animation:none !important;}
@media (prefers-reduced-motion: reduce){
  .halo,.glyph,.dot-live::after,.chip-ok .cdot,.luma-steam,.skel-row::after,.preview-card{animation:none !important;}
  .preview-card{opacity:1; transform:none;}
  .stage-inner{transition:none !important;}
  .switch,.switch__thumb{transition:none !important;}
  .tab .favicon,.is-browser .tab,.is-browser .chrome-addr,.is-browser .example-pill,
  .statuscard__chev,.tld-more summary .chev,.statuscard__trigger .statuscard__chev{transition:none !important;}
  .tab .favicon.fall{transform:none !important;}
  .truth__mark,.truth__label,.truth__mark .lock,.prov-msg{transition:none !important;}
  .truth__mark .lock.click{animation:none !important;}
}
/* ============ [Cyclus 5 / Gate 1] navigatie-spine: back-knop, login, tour-exit, live-chip ============ */
/* de "‹" wordt een echte, klikbare back-knop (Safari-metafoor) */
.addr-nav{
  background:none; border:0; margin:-6px 0; padding:6px 8px; font:inherit; cursor:pointer;
  position:relative; color:var(--fg-muted); border-radius:var(--radius-full);
  transition:color var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out), opacity var(--dur-std) var(--ease-out);
}
.addr-nav:hover{ color:var(--fg); transform:translateX(calc(-1*var(--nav-nudge))); }
.addr-nav:active{ color:var(--fg); transform:translateX(calc(-1*var(--nav-nudge-lg))) scale(.92); }
/* [C5 G1.1] de forward-knop duwt naar rechts (Safari-metafoor) */
.addr-nav--fwd:hover{ color:var(--fg); transform:translateX(var(--nav-nudge)); }
.addr-nav--fwd:active{ color:var(--fg); transform:translateX(var(--nav-nudge-lg)) scale(.92); }
.addr-nav:focus-visible{ outline:none; box-shadow:var(--ring); }
.addr-nav:disabled,.addr-nav[aria-disabled="true"]{ color:var(--border-strong); cursor:default; transform:none; }
.addr-nav.is-paused:not(:disabled){ color:var(--accent); }
.addr-nav.is-paused:not(:disabled) svg{ animation:nav-beckon 1.6s var(--ease-out) infinite; }
/* [C5 G1.1] sterkere pauze-puls: een expanderende accent-halo rond de back-knop */
.addr-nav.is-paused:not(:disabled)::after{
  content:""; position:absolute; inset:-3px; border-radius:inherit; pointer-events:none;
  border:var(--border-emph) solid var(--accent); opacity:0; animation:nav-halo 1.6s var(--ease-out) infinite;
}
.addr-nav.is-paused:hover svg,.addr-nav.is-paused:active svg{ animation:none; }
.addr-nav.is-paused:hover::after,.addr-nav.is-paused:active::after{ animation:none; opacity:0; }
@keyframes nav-beckon{ 0%,58%,100%{ transform:translateX(0) scale(1);} 76%{ transform:translateX(-4px) scale(1.14);} 90%{ transform:translateX(-1px) scale(1.04);} }
@keyframes nav-halo{ 0%{ transform:scale(.7); opacity:0;} 40%{ opacity:.55;} 100%{ transform:scale(1.7); opacity:0;} }

/* onthul de adresbalk (met de back-knop) op elk niet-HOME-scherm; op niet-browser-schermen alleen de chevron */
.pane.show-chrome .chrome-addr{ height:46px; opacity:1; }
.pane.show-chrome:not(.is-browser) .addr-pill{ display:none; }
/* when the address row is collapsed (HOME), keep its back button fully inert + invisible */
.pane:not(.is-browser):not(.show-chrome) .chrome-addr{ visibility:hidden; pointer-events:none; }

/* de Live-chip op het dashboard: premium bloom (live) vs propagating ring (going-live) */
.dash-recheck.is-live::before{
  content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:var(--glow-live); opacity:0; animation:chip-tapme 3.2s var(--ease-out) infinite;
}
@keyframes chip-tapme{ 0%,100%{ opacity:0;} 45%{ opacity:.9;} }
.dash-recheck.is-propagating .cdot{ position:relative; }
.dash-recheck.is-propagating .cdot::after{
  content:""; position:absolute; inset:-4px; border-radius:50%;
  border:var(--border-emph) solid var(--accent); opacity:.5; animation:ping 1.2s var(--ease-out) infinite;
}

/* back-navigatie-transitie (komt van links terug, consistent met morph) */
.pane-body.fade-back{ animation:fade-back var(--dur-std) var(--ease-out); }
@keyframes fade-back{ from{ opacity:0; transform:translateX(-10px);} to{ opacity:1; transform:none;} }

/* [C5 Gate3] GBP-glance-mock */
.gbpmock{ display:flex; align-items:center; justify-content:center; width:100%; }
.gbp-card{ display:flex; align-items:center; gap:9px; width:100%; max-width:240px; padding:9px 11px; background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-sm); box-shadow:var(--e1); }
.gbp-pin{ display:inline-flex; color:var(--accent); }
.gbp-pin svg{ width:18px; height:18px; }
.gbp-info{ display:flex; flex-direction:column; min-width:0; flex:1; }
.gbp-name{ font-size:var(--text-sm); font-weight:600; color:var(--fg); letter-spacing:-.01em; }
.gbp-meta{ font-size:11px; color:var(--fg-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.gbpmock .chip{ flex:none; font-size:var(--mock-fs-chip); }

/* [C5 Gate3] legal = detectie-regel (slank, eerlijk, nooit een alarm) */
/* [FIX-GLANCE 1] the legal check is a QUIET meta line in the .name-safe grammar (13px,
   hero-meta ink, 14px icon, middot separator): main claim + honest clause share one line on
   desktop and wrap as a normal paragraph on phones. INLINE flow, not flex: a long flex item
   would jump to its own flex line on 390px and orphan the icon. The old boxed block (own
   padding/border/two type sizes) floated between the meta row and the grid with its own
   grammar - David's review. The honest clause keeps >=12px secondary ink (FIX-C P7). */
.legal-check{ display:block; margin-top:8px; font-size:13px; line-height:1.5; color:var(--hero-meta); text-wrap:pretty; }
.legal-check .lc-ico{ display:inline-flex; vertical-align:-2px; margin-right:6px; color:var(--fg-muted); }
.legal-check .lc-ico svg{ width:14px; height:14px; display:block; }
.legal-check .lc-main b{ color:var(--fg); font-weight:600; }
.legal-check .lc-mid{ color:var(--border-strong); margin:0 2px; }
.legal-check .lc-honest{ color:var(--fg-secondary); }

/* [C5 Gate3] eigen favicon-afbeelding (punt 4) + eigen share-afbeelding (punt 5) */
/* [fav-fix 2] GEEN 14px-minimum meer: in een 13px-houder (tabmock) maakte dat het beeld groter dan
   zijn vakje - net iets meer ingezoomd en lager dan de plaatsings-editor toont. Het beeld volgt nu
   ALTIJD exact zijn houder, dus elke weergave heeft dezelfde crop als de editor. */
.fav-img{ width:100%; height:100%; background-size:cover; background-repeat:no-repeat; background-position:center; border-radius:3px; display:block; transform-origin:center; }
/* [fav-fix] elke icoon-houder CLIPT zijn schaal: inzoomen zoomt binnen het kader, het icoon zelf
   wordt nooit groter dan zijn plek (tab, tabmock, serp, upload-preview, Luma-stamp, switcher) */
.lmark,.tab .favicon,.tabmock-tab .favicon,.serp-top .favicon,.fav-upload__preview{overflow:hidden;}
.tab .favicon,.tabmock-tab .favicon{border-radius:3px;}
.site-switch__fav{width:18px; height:18px; border-radius:var(--radius-xs); overflow:hidden; display:inline-flex; flex:none;}
.site-switch__fav .fav-img{border-radius:0; min-width:0; min-height:0;}
.og .og-img{ width:100%; height:100%; background-size:cover; background-repeat:no-repeat; background-position:center; display:block; transform-origin:center; }
/* [9.1e] share-plaatsing-frame (breed, echte OG-verhouding) + brede upload-thumb */
.fav-place.share-place{ width:158px; height:auto; aspect-ratio:1.91 / 1; }
.og-prev{ width:64px !important; height:auto !important; aspect-ratio:1.91 / 1; border-radius:var(--radius-sm); position:relative; overflow:hidden; }
.og-prev .og-img{ border-radius:inherit; }
.og-prev__ph{ display:grid; place-items:center; color:var(--fg-muted); }
.og-prev__ph svg{ width:18px; height:18px; }
/* upload-knop + de custom-kleurkiezer-swatch */
.upload-row{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.upload-btn{ display:inline-flex; align-items:center; gap:8px; height:38px; padding:0 16px; border-radius:var(--radius-md); background:var(--surface); border:1px solid var(--border); color:var(--fg); font-size:var(--text-md); font-weight:500; cursor:pointer; box-shadow:var(--e1); transition:border-color var(--dur-std), box-shadow var(--dur-std), transform var(--dur-micro); }
.upload-btn:hover{ border-color:var(--border-strong); box-shadow:var(--e2); }
.upload-btn:active{ transform:translateY(1px); }
.upload-btn svg{ width:15px; height:15px; color:var(--accent); }
/* [C6 Fase0] premium favicon-upload-tegel (visueel: toont meteen de huidige favicon) */
.fav-upload{ display:flex; align-items:center; gap:12px; padding:10px 12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); cursor:pointer; box-shadow:var(--e1); transition:border-color var(--dur-std), box-shadow var(--dur-std), transform var(--dur-micro); }
.fav-upload:hover{ border-color:var(--border-strong); box-shadow:var(--e2); }
.fav-upload:active{ transform:translateY(1px); }
.fav-upload__preview{ width:36px; height:36px; border-radius:var(--radius-sm); background:var(--bg-sunken); display:grid; place-items:center; flex:none; overflow:hidden; box-shadow:inset 0 0 0 1px var(--border-subtle); }
.fav-upload__preview svg{ width:22px; height:22px; }
.fav-upload__preview .fav-img{ width:100%; height:100%; }
.fav-upload__text{ display:flex; flex-direction:column; gap:1px; flex:1; min-width:0; }
.fav-upload__title{ font-size:var(--text-md); font-weight:500; color:var(--fg); }
.fav-upload__hint{ font-size:var(--text-xs); color:var(--fg-muted); }
.fav-upload__go{ flex:none; color:var(--fg-muted); display:inline-flex; }
.fav-upload__go svg{ width:15px; height:15px; }
/* [9.1d] favicon: light + dark previews, plaatsing (sleep+zoom), dark-override, erf-regel */
.tabmock--dark{ background:var(--tabmock-bg); }
.tabmock--dark .tabmock-tab{ background:var(--tabmock-tab); }
.tabmock--dark .tabmock-title{ color:var(--tabmock-fg); }
.tabmock--dark .tabmock-bar{ background:var(--tabmock-bar); }
.tabmock--dark .tabmock-url{ background:var(--tabmock-url); }
.fav-modes{ display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); margin-bottom:12px; }
.fav-mode{ display:flex; flex-direction:column; gap:6px; }
.fav-mode__lab{ font-size:11px; color:var(--fg-muted); text-align:center; }
.fav-place-row{ display:flex; gap:14px; align-items:center; margin-top:12px; }   /* [fav-fix] lucht tussen upload-rij en plaatsing */
.fav-place{ width:96px; height:96px; flex:none; border-radius:var(--radius-md); overflow:hidden; position:relative; cursor:grab; background:var(--bg-sunken); box-shadow:inset 0 0 0 1px var(--border-subtle); touch-action:none; user-select:none; }
.fav-place.is-dragging{ cursor:grabbing; }
.fav-place__img{ width:100%; height:100%; background-size:cover; background-repeat:no-repeat; background-position:center; transform-origin:center; pointer-events:none; }
.fav-place-ctl{ display:flex; flex-direction:column; gap:8px; flex:1; min-width:0; }
.fav-place__hint{ font-size:var(--text-xs); color:var(--fg-muted); }
.fav-zoom{ width:100%; accent-color:var(--accent); cursor:pointer; }
.fav-dark{ margin-top:4px; border-top:1px solid var(--border-subtle); padding-top:10px; }
.fav-dark summary{ font-size:13px; color:var(--accent-text); cursor:pointer; list-style:none; }
.fav-dark summary::-webkit-details-marker{ display:none; }
.fav-dark__body{ margin-top:10px; }
.fav-upload--sm{ padding:8px 10px; }
.fav-prev--dark{ background:var(--tabmock-bg) !important; }
.fav-inherit{ font-size:12px; color:var(--fg-secondary); background:var(--bg-sunken); border-radius:var(--radius-sm); padding:8px 10px; margin-top:4px; }
/* [9.1e] light/dark als duidelijke, los instelbare blokken (dark is nu zichtbaar, geen verstopte disclosure) */
.fav-block{ border:1px solid var(--border-subtle); border-radius:var(--radius-md); padding:12px; margin-bottom:10px; background:var(--surface); }
.fav-block__head{ display:flex; align-items:center; gap:8px; margin-bottom:8px; }
.fav-block__lab{ font-size:var(--text-sm); font-weight:600; color:var(--fg); }
.fav-opt{ font-size:var(--text-2xs); color:var(--fg-muted); border:1px solid var(--border-subtle); border-radius:var(--radius-full); padding:1px 7px; }
.fav-place-links{ display:flex; gap:12px; flex-wrap:wrap; }
/* [9.1e] herontworpen gelinkte-namen-overzicht: rustige premium familie-lijst */
.fwd2-head{ margin-bottom:12px; }
.fwd2-title{ font-size:16px; font-weight:650; color:var(--fg); margin:0 0 3px; }
.fwd2-sub{ font-size:var(--text-sm); color:var(--fg-secondary); line-height:1.45; margin:0; }
.fwd2-sub b{ color:var(--fg); font-weight:600; }
.fwd2-list{ border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; background:var(--surface); }
.fwd2-row{ display:flex; align-items:center; gap:10px; padding:11px 12px; border-top:1px solid var(--border-subtle); }
.fwd2-row:first-child{ border-top:0; }
.fwd2-row--main{ background:var(--accent-tint); }
.fwd2-dom{ font-size:var(--text-md); color:var(--fg); }
.fwd2-state{ font-size:12px; color:var(--fg-muted); margin-left:auto; }
.fwd2-state.is-wait{ color:var(--warn-text); }   /* [FIX-C P7] was #B7791F (3.64:1); amber-text is the AA wait-colour */
.fwd2-main-chip{ margin-left:auto; font-size:var(--text-3xs); font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent-text); background:var(--surface); padding:2px 8px; border-radius:var(--radius-full); }
.fwd2-acts{ display:flex; align-items:center; gap:4px; flex:none; }
.fwd2-setmain{ font-size:12px; color:var(--accent-text); background:none; border:0; cursor:pointer; padding:4px 8px; border-radius:var(--radius-sm); white-space:nowrap; }
.fwd2-setmain:hover{ background:var(--accent-tint); }
.fwd2-x{ width:24px; height:24px; display:inline-grid; place-items:center; border:0; background:none; color:var(--fg-muted); cursor:pointer; font-size:var(--text-base); line-height:1; border-radius:var(--radius-sm); }
.fwd2-x:hover{ background:var(--bg-sunken); color:var(--fg); }
.fwd2-empty{ padding:14px 12px; font-size:var(--text-sm); color:var(--fg-muted); text-align:center; }
.fwd2-group{ margin-top:10px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); overflow:hidden; }
.fwd2-group__head{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:9px 12px; background:var(--bg-sunken); }
.fwd2-group__name{ font-size:12px; font-weight:600; color:var(--fg-secondary); }
.fwd2-chip{ font-size:11px; color:var(--accent-text); }
.fwd2-connect{ height:30px; padding:0 12px; font-size:var(--text-sm); }
.fwd2-add{ margin-top:12px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); }
.fwd2-add summary{ display:flex; align-items:center; gap:8px; padding:11px 12px; font-size:13px; font-weight:500; color:var(--fg); cursor:pointer; list-style:none; }
.fwd2-add summary::-webkit-details-marker{ display:none; }
.fwd2-add__plus{ display:inline-flex; color:var(--accent-text); }
.fwd2-add__plus svg{ width:15px; height:15px; }
.fwd2-add__body{ padding:0 12px 12px; }
.fwd2-add__lab{ font-size:var(--text-xs); color:var(--fg-muted); margin-bottom:7px; }
.fwd2-foot{ margin-top:12px; display:flex; flex-direction:column; gap:8px; }
.fwd2-board{ align-self:flex-start; display:inline-flex; align-items:center; gap:6px; font-size:var(--text-sm); white-space:nowrap; }
.fwd2-board svg{ width:15px; height:15px; flex:none; }
/* [9.1f] het familie-grafiekje: andere namen -> main -> site */
/* [9.1g] altijd op 1 lijn: nowrap; alleen de namen-kolom mag krimpen (ellipsis), main + site blijven heel */
.fam-flow{ display:flex; align-items:center; gap:8px; flex-wrap:nowrap; padding:12px; margin-bottom:14px; background:var(--bg-sunken); border-radius:var(--radius-md); overflow:hidden; }
.ff-col--names{ display:flex; flex-direction:column; gap:4px; min-width:0; }
.ff-chip{ font-size:11px; color:var(--fg-secondary); background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-full); padding:2px 9px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:130px; }
.ff-chip--more{ color:var(--fg-muted); }
.ff-chip--main{ font-size:12px; color:var(--fg); border-color:var(--accent-text); background:var(--accent-tint); font-weight:500; max-width:none; }
.ff-arrow{ color:var(--fg-muted); font-size:15px; flex:none; }
.ff-main,.ff-site{ display:flex; flex-direction:column; align-items:center; gap:5px; flex:none; }
.ff-cap{ font-size:var(--text-3xs); text-transform:uppercase; letter-spacing:.06em; color:var(--fg-muted); }
.ff-globe{ display:inline-flex; width:30px; height:30px; align-items:center; justify-content:center; color:var(--accent-text); background:var(--surface); border:1px solid var(--border-subtle); border-radius:50%; }
.ff-globe svg{ width:16px; height:16px; }
/* [9.1f] de drie e-mail-opties als selecteerbare kaarten (radio) */
.ee-opts{ display:flex; flex-direction:column; gap:8px; }
.ee-card{ display:flex; align-items:flex-start; gap:10px; text-align:left; width:100%; padding:11px 12px; border:1px solid var(--border); border-radius:var(--radius-md); background:var(--surface); cursor:pointer; transition:border-color var(--dur-std), background var(--dur-std); }
.ee-card:hover{ border-color:var(--border-strong); }
.ee-card.is-on{ border-color:var(--accent-text); background:var(--accent-tint); }
.ee-card__check{ flex:none; width:16px; height:16px; margin-top:1px; border-radius:50%; border:var(--border-emph) solid var(--border-strong); }
.ee-card.is-on .ee-card__check{ border-color:var(--accent-text); background:var(--accent-text); box-shadow:inset 0 0 0 3px var(--surface); }
.ee-card__body{ display:flex; flex-direction:column; gap:2px; min-width:0; flex:1; }
.ee-card__head{ display:flex; align-items:center; gap:8px; }
.ee-card__t{ font-size:13px; font-weight:600; color:var(--fg); flex:1; min-width:0; }
/* [email-fix] de prijs-chip: mono, hairline, rechts op de kop-regel; Free in het succes-groen */
.ee-card__price{ flex:none; font-family:var(--font-mono); font-size:11px; font-weight:500; color:var(--fg); padding:3px 8px; border:1px solid var(--border-subtle); border-radius:var(--radius-full); background:var(--bg-sunken); white-space:nowrap; }
.ee-card__price--free{ color:var(--success-text); background:var(--success-tint); border-color:transparent; }
.ee-card__d{ font-size:var(--text-xs); color:var(--fg-secondary); line-height:1.4; }
.btn .btn-price{ font-family:var(--font-mono); font-weight:500; font-size:12px; opacity:.75; margin-left:8px; }
/* [email-v4] het walkthrough-toneel: klant -> envelop -> herkenbaar inbox-venster -> antwoord terug.
   7s CSS-loop; het venster is een mini-window met chrome-dots + titel (Main inbox / mail.<dom> / Gmail). */
.email-stage{ margin-top:10px; }
/* [email-v4b] elke keuze-wissel is VOELBAAR: het toneel swapt met een korte crossfade en de
   animatie start opnieuw vanaf het begin (de envelop vertrekt meteen) */
.email-stage .es-scene{ animation:esSwap .45s var(--ease-out); }
@keyframes esSwap{ from{ opacity:.35; transform:scale(.985); } }
.reduced .email-stage .es-scene{ animation:none; }
.email-back{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin:0 0 6px; }
.email-back .link{ display:inline-flex; align-items:center; gap:4px; font-weight:600; }
.email-back .link svg{ width:13px; height:13px; transform:rotate(90deg); }
.email-back__note{ font-size:var(--text-xs); color:var(--fg-muted); }
.es-scene{ position:relative; height:172px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-sunken); overflow:hidden; }
.es-sender{ position:absolute; left:12px; top:50%; transform:translateY(-50%); display:flex; flex-direction:column; align-items:center; gap:5px; font-size:11px; color:var(--fg-secondary); width:64px; text-align:center; }
.es-avatar{ display:grid; place-items:center; width:34px; height:34px; border-radius:50%; background:var(--surface); border:1px solid var(--border-subtle); font-weight:700; font-size:14px; color:var(--fg); box-shadow:var(--e1); }
.es-window{ position:absolute; right:12px; top:50%; transform:translateY(-50%); width:min(58%, 280px); background:var(--surface); border:1px solid var(--border-subtle); border-radius:10px; box-shadow:var(--e2); overflow:hidden; }
.es-window__bar{ display:flex; align-items:center; gap:4px; padding:7px 9px; border-bottom:1px solid var(--border-subtle); background:var(--bg-sunken); }
.es-wdot{ width:6px; height:6px; border-radius:50%; background:var(--border-strong); opacity:.55; }
.es-window__title{ margin-left:5px; font-size:10px; font-weight:600; letter-spacing:.03em; color:var(--fg-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.es-rows{ display:flex; flex-direction:column; }
.es-row{ display:flex; align-items:center; gap:6px; padding:8px 10px; border-bottom:1px solid var(--border-subtle); min-height:30px; }
.es-row:last-child{ border-bottom:none; }
.es-skel{ height:6px; border-radius:3px; background:var(--border-subtle); }
.es-row--new{ animation:esRowNew 7s linear infinite; }
.es-unread{ width:7px; height:7px; border-radius:50%; background:var(--accent-solid); flex:none; opacity:0; animation:esUnread 7s linear infinite; }
.es-row__from{ font-size:11px; font-weight:600; color:var(--fg); white-space:nowrap; }
.es-row__sub{ font-size:9.5px; color:var(--fg-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-width:0; }
.es-row--new .es-row__from,.es-row--new .es-row__sub{ opacity:0; animation:esUnread 7s linear infinite; }
@keyframes esRowNew{ 0%,29%{ background:transparent; } 32%,93%{ background:var(--accent-tint); } 97%,100%{ background:transparent; } }
@keyframes esUnread{ 0%,29%{ opacity:0; } 32%,93%{ opacity:1; } 97%,100%{ opacity:0; } }
.es-env{ position:absolute; top:38%; left:88px; display:inline-flex; align-items:center; gap:6px; padding:6px 10px; border-radius:var(--radius-full); background:var(--surface); border:1px solid var(--border-subtle); box-shadow:var(--e2); opacity:0; z-index:2; }
.es-env svg{ width:13px; height:13px; color:var(--fg-secondary); flex:none; }
.es-env__tag{ font-size:9.5px; color:var(--fg); white-space:nowrap; max-width:150px; overflow:hidden; text-overflow:ellipsis; }
.es-env--in{ animation:esIn 7s var(--ease-out) infinite; }
.es-env--out{ top:62%; animation:esOut 7s var(--ease-out) infinite; }
@keyframes esIn{ 0%{ left:84px; opacity:0; transform:translateY(0); } 5%{ opacity:1; } 26%{ left:calc(100% - 46%); opacity:1; } 31%{ left:calc(100% - 44%); opacity:0; } 100%{ opacity:0; } }
@keyframes esOut{ 0%,47%{ left:calc(100% - 46%); opacity:0; } 52%{ opacity:1; } 74%{ left:84px; opacity:1; } 79%,100%{ left:80px; opacity:0; } }
.es-cap{ font-size:var(--text-xs); color:var(--fg-secondary); margin:7px 2px 0; line-height:1.5; }
/* [email-v6] de login-beat: JIJ opent je inbox - de You-chip schuift naar het venster en het
   venster licht even op. Vertelt zonder woorden: inloggen = gewoon dit dashboard of mail.<domein>. */
.es-you{ position:absolute; left:12px; bottom:10px; display:inline-flex; align-items:center; gap:6px; opacity:0; animation:esYou 7s var(--ease-out) infinite; z-index:2; }
.es-avatar--you{ width:26px; height:26px; font-size:11px; background:var(--fg); color:var(--surface); border-color:var(--fg); }
.es-you__lab{ font-size:9.5px; color:var(--fg-secondary); background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-full); padding:3px 8px; }
/* [motion-fix] beats NA elkaar: binnenkomst (0-27), antwoord (47-79), jij opent (81-96).
   Op mobiel liepen antwoord-envelop en You-chip tegelijk door het beeld. */
@keyframes esYou{ 0%,76%{ left:12px; opacity:0; } 81%{ opacity:1; } 93%{ left:calc(100% - 62%); opacity:1; } 97%,100%{ left:calc(100% - 60%); opacity:0; } }
.es-window--glow{ animation:esGlow 7s linear infinite; }
@keyframes esGlow{ 0%,88%{ box-shadow:var(--e2); } 92%,96%{ box-shadow:0 0 0 3px var(--accent-tint), var(--e2); } 100%{ box-shadow:var(--e2); } }
.reduced .es-you{ animation:none; opacity:1; }
.reduced .es-window--glow{ animation:none; }
/* [email-v6] per-adres linkTo-veld + bulk-route-rij */
.addr-linkto{ flex:1; min-width:130px; height:30px; padding:0 10px; font-size:12px; border:1px solid var(--border); border-radius:var(--radius-sm); background:var(--surface); color:var(--fg); }
.addr-linkto:focus{ outline:none; border-color:var(--accent); box-shadow:var(--ring); }
.addr-bulk{ display:flex; align-items:center; gap:6px; flex-wrap:wrap; margin-top:10px; padding:10px 12px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-sunken); }
.addr-bulk .addr-box__opt{ display:inline-flex; align-items:center; gap:5px; }
.addr-bulk .addr-box__opt svg{ width:11px; height:11px; }
/* [domains-motion] browser-mini in de domein-film: tab met favicon + adresbalk met het HOOFDdomein */
.ds-tab{ display:inline-flex; align-items:center; gap:5px; margin-left:6px; padding:3px 8px; background:var(--bg-sunken); border:1px solid var(--border-subtle); border-bottom:none; border-radius:6px 6px 0 0; max-width:70%; }
.ds-tab .fav-img,.ds-tab svg,.ds-tab .cs-fav{ width:11px; height:11px; flex:none; }
.ds-tab{ overflow:hidden; }
.ds-tab__t{ font-size:9.5px; color:var(--fg-secondary); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-addr{ display:flex; align-items:center; gap:5px; margin:6px 8px 2px; padding:4px 9px; background:var(--bg-sunken); border:1px solid var(--border-subtle); border-radius:var(--radius-full); font-size:9.5px; color:var(--fg); }
.ds-addr .mono{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.ds-lock{ display:inline-flex; flex:none; color:var(--accent-solid); }
.ds-lock svg{ width:9px; height:9px; }
.domain-stage .es-env--out{ display:none; }   /* een bezoek heeft geen antwoord-envelop */
/* [domains-motion] de hop: sub-naam tot halverwege (A), daar doorgestuurd als hoofddomein (B) */
.domain-stage .ds-hop-a{ animation:dsHopA 7s var(--ease-out) infinite; }
@keyframes dsHopA{ 0%{ left:84px; opacity:0; } 5%{ opacity:1; } 20%{ left:calc(50% - 60px); opacity:1; } 25%,100%{ left:calc(50% - 60px); opacity:0; } }
.ds-hop-b{ top:38%; animation:dsHopB 7s var(--ease-out) infinite; opacity:0; }
@keyframes dsHopB{ 0%,22%{ left:calc(50% - 60px); opacity:0; } 27%{ opacity:1; } 44%{ left:calc(100% - 46%); opacity:1; } 49%,100%{ left:calc(100% - 44%); opacity:0; } }
.domain-stage .es-window--glow{ animation:dsGlow 7s linear infinite; }
@keyframes dsGlow{ 0%,46%{ box-shadow:var(--e2); } 52%,62%{ box-shadow:0 0 0 3px var(--accent-tint), var(--e2); } 68%,100%{ box-shadow:var(--e2); } }
.reduced .ds-hop-a,.reduced .ds-hop-b{ animation:none; }
.reduced .ds-hop-a{ opacity:1; left:calc(30% - 40px); }
.reduced .ds-hop-b{ opacity:1; left:calc(60% - 40px); }
.fwd2-dom--btn{ background:none; border:none; padding:0; cursor:pointer; text-align:left; color:var(--fg); font:inherit; }
.fwd2-dom--btn:hover{ text-decoration:underline; text-underline-offset:3px; }
.fwd2-dom--btn:focus-visible{ outline:none; box-shadow:var(--ring); border-radius:4px; }
.reduced .es-env--in,.reduced .es-env--out{ animation:none; }
.reduced .es-env--in{ opacity:1; left:calc(50% - 70px); }
.reduced .es-env--out{ opacity:1; left:calc(50% - 70px); }
.reduced .es-row--new{ animation:none; background:var(--accent-tint); }
.reduced .es-unread,.reduced .es-row--new .es-row__from,.reduced .es-row--new .es-row__sub{ animation:none; opacity:1; }
@media (max-width:560px){
  .es-scene{ height:180px; }
  .es-sender{ left:8px; width:52px; font-size:9.5px; }
  .es-window{ right:8px; width:60%; }
  .es-env{ left:64px; }
  .es-env__tag{ max-width:96px; }
  .es-you__lab{ display:none; }                       /* [email-v6b] het url-labeltje is te veel op smal */
  .email-actions{ display:flex; flex-wrap:wrap; gap:8px; }
  .email-actions .btn{ flex:1 1 auto; }
  .addr-bulk .addr-box__opt{ flex:1 1 100%; justify-content:flex-start; }
}
/* [email-fix] prijs- en gratis-hints in de actieve manager */
.email-master{ display:flex; align-items:center; gap:10px; padding:10px 12px; margin-top:8px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--surface); }
/* [consent] het akkoord-vinkje op de e-mailpagina: rustig, leesbaar, klikbaar label */
.email-consent{ display:flex; align-items:flex-start; gap:10px; margin-top:10px; padding:11px 12px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-sunken); cursor:pointer; }
.email-consent input{ flex:none; width:17px; height:17px; margin-top:1px; accent-color:var(--fg); cursor:pointer; }
.email-consent__txt{ font-size:12.5px; line-height:1.45; color:var(--fg-secondary); }
.email-consent__txt b{ color:var(--fg); font-weight:600; }
.email-master__lab{ flex:1; font-size:13px; font-weight:500; color:var(--fg); min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.email-price-line{ display:block; font-size:var(--text-sm); color:var(--fg-secondary); margin:2px 0 8px; line-height:1.6; }
.email-price-line .ee-card__price{ margin-right:6px; vertical-align:middle; }
.addr-send{ display:flex; align-items:center; gap:8px; margin-top:7px; flex-wrap:wrap; }
.addr-send .addr-q-s{ flex:1 1 160px; }
.switch--sm{ transform:scale(.8); transform-origin:left center; }
.addr-add .addr-free{ font-size:10px; font-weight:600; letter-spacing:.04em; color:var(--fg-muted); background:var(--bg-sunken); border:1px solid var(--border-subtle); padding:2px 7px; border-radius:var(--radius-full); margin-left:7px; font-family:var(--font-mono); }
/* [email-v2] sub-keuze bij linken + per-adres inbox-keuze + totaalregel */
.link-sub{ display:flex; flex-direction:column; gap:6px; margin-top:8px; padding:10px 12px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-sunken); }
.link-sub__opt{ display:flex; align-items:center; gap:9px; text-align:left; font-size:13px; color:var(--fg-secondary); padding:4px 2px; border:none; background:none; cursor:pointer; }
.link-sub__opt.is-on{ color:var(--fg); }
.link-sub__opt .ee-card__check{ width:14px; height:14px; }
.link-sub__opt.is-on .ee-card__check{ border-color:var(--accent-text); background:var(--accent-text); box-shadow:inset 0 0 0 2.5px var(--surface); }
.addr-box{ display:flex; align-items:center; gap:6px; margin-top:7px; flex-wrap:wrap; }
.addr-box__opt{ font-size:11px; font-weight:500; padding:4px 10px; border:1px solid var(--border-subtle); border-radius:var(--radius-full); background:var(--surface); color:var(--fg-secondary); cursor:pointer; }
.addr-box__opt.is-on{ border-color:var(--accent-text); color:var(--fg); background:var(--accent-tint); }
.email-total{ font-size:var(--text-sm); color:var(--fg); margin:8px 0 0; }
.email-next{ color:var(--fg-muted); margin-left:8px; font-size:var(--text-xs); white-space:nowrap; }
/* [email-v3] uitlijning: vaste prijs-kolom + gereserveerde verwijder-ruimte -> schakelaars op EEN lijn */
.addr-price{ flex:none; width:118px; display:inline-flex; justify-content:flex-end; }
.addr-remove--ghost{ visibility:hidden; }
/* [email-v4] telefoons: adres op z'n eigen regel, prijs + schakelaar eronder - geen geplette invulvelden */
@media (max-width:560px){
  .addr-top{ flex-wrap:wrap; }
  .addr-email{ flex:1 1 100%; }
  .addr-price{ width:auto; margin-right:auto; }
}
.email-active .mail-flow{ margin-top:2px; margin-bottom:10px; }
/* [9.1d] dashboard-brede, altijd zichtbare Save changes-balk */
/* [FIX-B P4] pristine = a quiet unboxed line (fold budget, 0016); dirty = the full sticky bar */
.dash-save{ position:sticky; bottom:0; z-index:6; display:flex; align-items:center; justify-content:flex-end; gap:var(--space-3); margin-top:10px; padding:2px 2px; }
.dash-save.is-dirty{ justify-content:space-between; padding:11px 14px; background:var(--surface); border:1px solid var(--border-strong); border-radius:var(--radius-md); box-shadow:0 -8px 22px rgba(0,0,0,.06); }
.dash-save__lab{ font-size:13px; color:var(--fg-secondary); display:inline-flex; align-items:center; gap:8px; }
.dash-save__dot{ width:8px; height:8px; border-radius:50%; background:var(--accent); }
.dash-save__ok{ display:inline-flex; color:var(--accent-text); }
.dash-save__ok svg{ width:14px; height:14px; }
.dash-save__btn{ height:36px; }
.reveal.editing .dash-save{ display:none; }   /* [9.1e] in een open kaart geen Save-balk; de ene op het dashboard is genoeg */
.swatch--pick{ position:relative; overflow:hidden; padding:0; background:var(--swatch-wheel); }
.swatch--pick input[type=color]{ position:absolute; inset:-4px; width:calc(100% + 8px); height:calc(100% + 8px); opacity:0; cursor:pointer; border:0; padding:0; }

/* [C5 Gate3 punt7] e-mail: leek-uitleg (mailbox vs forward) + segment-keuze */
.email-explain{ display:flex; flex-direction:column; gap:7px; margin:8px 0; }
.email-explain .ee-opt{ font-size:var(--text-sm); line-height:1.45; color:var(--fg-secondary); padding:9px 11px; border:1px solid var(--border-subtle); border-radius:var(--radius-sm); background:var(--surface-2); transition:border-color var(--dur-std), background var(--dur-std); }
.email-explain .ee-opt b{ color:var(--fg); font-weight:600; }
.email-explain .ee-opt.is-on{ border-color:var(--accent); background:var(--surface); }
.ee-switch{ display:inline-flex; padding:3px; background:var(--bg-sunken); border-radius:var(--radius-full); }
.ee-seg{ height:32px; padding:0 16px; border:0; background:transparent; color:var(--fg-secondary); font:500 13px var(--font-sans); cursor:pointer; border-radius:var(--radius-full); transition:background var(--dur-std), color var(--dur-std); }
.ee-seg.is-on{ background:var(--surface); color:var(--fg); box-shadow:var(--e1); }
.efield-help{ font-size:var(--text-xs); color:var(--fg-muted); margin-top:5px; }
.email-reassure{ font-size:12px; color:var(--fg-muted); margin-top:8px; }

/* [C5 Gate2 punt1] main-extensie-kiezer op de koopkaart */
.mext{ margin:10px 0 4px; }
.mext-label{ font-size:12px; color:var(--fg-secondary); margin-bottom:7px; }
.mext-chips{ display:flex; flex-wrap:wrap; gap:7px; }
.mext-chip{ display:inline-flex; align-items:center; gap:7px; min-height:var(--control-h); padding:0 14px; border:1px solid var(--border); border-radius:var(--radius-full); background:var(--surface); color:var(--fg); font-size:var(--text-md); cursor:pointer; transition:border-color var(--dur-std), background var(--dur-std); }  /* [tik-doel] 44px */
.mext-chip:hover{ background:var(--bg-sunken); }
.mext-chip .mext-price{ font-size:var(--text-xs); color:var(--fg-muted); }
.mext-chip.is-main{ border-color:var(--accent); box-shadow:inset 0 0 0 1px var(--accent); }
.mext-chip.is-main .mext-price{ color:var(--accent); }

/* [C5 Gate2 punt15] de eigenaarschap-vertakking op een bezet domein */
.taken-branch{ display:flex; flex-direction:column; gap:10px; margin-top:10px; }
.taken-branch .tb-row{ display:flex; align-items:flex-start; gap:12px; flex-wrap:wrap; padding:12px 14px; border:1px solid var(--border-subtle); border-radius:var(--radius-md); background:var(--bg-sunken); }
.taken-branch .tb-body{ flex:1; min-width:200px; }
.taken-branch .tb-title{ font-size:var(--text-md); font-weight:600; color:var(--fg); }
.taken-branch .tb-sub{ font-size:12px; line-height:1.5; color:var(--fg-secondary); margin-top:3px; }
.taken-branch .tb-cta{ flex:none; align-self:center; }
.taken-branch .tb-actions{ display:flex; gap:8px; flex-wrap:wrap; align-self:center; }

/* [C5 Gate2 punt9] add-domain-blok (kies de extensie) + externe-domein-transfer */
.fwd-add-block{ margin-top:6px; padding-top:10px; border-top:1px solid var(--border-subtle); }
.fwd-add-label{ font-size:var(--text-sm); color:var(--fg-secondary); margin-bottom:7px; }
.fwd-ext{ margin-top:10px; }
.fwd-ext > summary{ display:inline-flex; align-items:center; gap:7px; font-size:13px; color:var(--accent); cursor:pointer; list-style:none; }
.fwd-ext > summary svg{ width:14px; height:14px; }
.fwd-ext > summary::-webkit-details-marker{ display:none; }
.fwd-ext-body{ display:flex; flex-direction:column; gap:8px; align-items:stretch; margin-top:8px; }
.fwd-ext-body input{ flex:1; min-width:160px; }
.fwd-ext-actions{ display:flex; gap:8px; flex-wrap:wrap; }

@media (prefers-reduced-motion: reduce){
  .addr-nav,.addr-nav:hover,.addr-nav:active{ transform:none !important; }
  .addr-nav.is-paused svg{ animation:none !important; }
  .addr-nav.is-paused::after{ animation:none !important; opacity:0 !important; }
  .dash-recheck.is-live::before{ animation:none !important; opacity:0 !important; }
  .dash-recheck.is-propagating .cdot::after{ animation:none !important; opacity:.5; }
  .pane-body.fade-back{ animation:none !important; }
}
/* ============ [Cyclus 6 / Fase 2] visueel systeem — WARM-PRECISIE naar Awwwards-niveau (drop-in over :root) ============
   Onafhankelijk onderzoek weerlegde 'koel-minimal': premium = precisie, niet koel-vs-warm. We houden het warme
   papier, ont-modderen + verdiepen de greys, behouden + verdiepen het groen, en halen de Awwwards-craft uit
   depth + glass + tracking. Bijna alles is een token-swap; de FIXED pane/brandbar/walkthrough blijven. */
/* [FIX-C P7] the cyclus-6 warm-precisie token swap is folded into the ONE :root above (last-wins
   values preserved 1:1; --fg-muted lifted to the AA-value there; --green-glow follows tokens.json). */
.mono,code,kbd,.field--domain,[class*="mono"]{ font-variant-numeric:tabular-nums; font-feature-settings:"ss01","zero"; }
.h1{ letter-spacing:-.024em; }
/* show-don't-tell: de witte mocks POPpen op de diepere matte met een crisp inner-hairline + contactschaduw + hover-lift */
.preview-card__graphic{ background:linear-gradient(180deg, rgba(255,255,255,.5), rgba(255,255,255,0) 38%), var(--preview-matte); box-shadow:var(--inset-hair); }
.preview-card__graphic > *{ box-shadow:var(--e1); }
.preview-card:hover .preview-card__graphic > *{ transform:translateY(-1px); transition:transform var(--dur-std) var(--ease-out); }
.btn-secondary{ box-shadow:var(--e1); }
.btn-accent{ background:var(--accent-solid); }
.btn-accent:hover{ background:var(--accent-solid-hover); }
.switch[aria-checked="true"]{ background:var(--accent-solid); }

/* ============ [Cyclus 6 / Fase 3] AI-native primaire funnel — in-pane UX (C7) ============
   Twee gelijkwaardige "ways in" onder het hero-veld (drop ⇄ tell your AI), een kopieerbare
   "say this to your AI"-chip, en het AI-handoff/pay-scherm (de proof: je AI deed het werk, jij
   ziet het en zet het live). Leunt volledig op de bestaande warm-precisie-tokens. */
.ways{display:grid; grid-template-columns:1fr 1fr; gap:14px; align-items:stretch; margin-top:2px;}
.ways .dropzone{min-height:0; height:100%; margin:0;}
/* de "Tell your AI"-kaart: zelfde gewicht als de dropzone, solide paneel naast het dashed drop-vlak */
.way-ai{display:flex; flex-direction:column; gap:11px; text-align:left;
  background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  padding:15px 15px 13px; box-shadow:var(--e1);}
.way-ai__title{display:flex; align-items:center; gap:8px; font-size:var(--text-lg); font-weight:600; letter-spacing:-.012em; color:var(--fg); line-height:1.25;}
.way-ai__title .ti{display:inline-flex; color:var(--accent-solid); flex:none;}
.way-ai__title .ti svg{width:17px;height:17px;}
/* de kopieerbare "zeg dit tegen je AI"-chip (natuurlijke taal, geen terminal-look) */
.say{display:flex; align-items:stretch; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:var(--surface-2); box-shadow:var(--inset-hair);}
.say__text{flex:1; min-width:0; padding:9px 11px; font-size:var(--text-sm); line-height:1.4; color:var(--fg-secondary);}
.say__text .q{color:var(--fg); font-weight:500;}
.say__copy{flex:none; display:inline-flex; align-items:center; gap:6px; padding:0 12px; border:none; border-left:1px solid var(--border);
  background:var(--surface); color:var(--fg); font-size:12px; font-weight:600; cursor:pointer; transition:background var(--dur-micro), color var(--dur-micro);}
.say__copy:hover{background:var(--bg-sunken);}
.say__copy:focus-visible{outline:none; box-shadow:var(--ring);}
.say__copy svg{width:14px;height:14px;}
.say.copied .say__copy{color:var(--accent-solid);}
/* twee gelijke ghost-knoppen "Add to Cursor / Add to Claude" (in de prototype puur visueel) */
.add-row{display:flex; gap:8px;}
.add-btn{flex:1; display:inline-flex; align-items:center; justify-content:center; gap:7px; height:34px; border-radius:9px;
  border:1px solid var(--border); background:var(--surface); color:var(--fg); font-size:var(--text-sm); font-weight:600; cursor:pointer;
  transition:border-color var(--dur-micro), background var(--dur-micro), box-shadow var(--dur-micro);}
.add-btn:hover{border-color:var(--border-strong); background:var(--surface-2); box-shadow:var(--e1);}
.add-btn:focus-visible{outline:none; box-shadow:var(--ring);}
.add-btn .glyph{display:inline-flex; flex:none; color:var(--fg-secondary);}
.add-btn .glyph svg{width:15px;height:15px;}
.way-ai__assure{display:flex; gap:7px; align-items:flex-start; font-size:var(--text-xs); line-height:1.4; color:var(--fg-muted); margin:1px 0 0;}
.way-ai__assure svg{width:13px;height:13px; flex:none; margin-top:1px;}
.way-ai__more{margin-top:auto; padding-top:1px;}
.way-ai__more .link{font-size:12px; color:var(--fg-secondary);}
.way-ai__more .link:hover{color:var(--fg);}
@media (max-width:560px){ .ways{grid-template-columns:1fr;} }

/* ---- AI-handoff/pay-scherm: wat de mens ziet wanneer zijn AI ons gebruikte (ignition A) ---- */
.aic{display:flex; flex-direction:column; gap:16px;}
.aic-head{display:flex; flex-direction:column; gap:9px;}
.aic-badge{align-self:flex-start; display:inline-flex; align-items:center; gap:7px; height:26px; padding:0 11px;
  border-radius:var(--radius-full); background:var(--accent-tint); color:var(--accent-solid-hover);
  font-size:12px; font-weight:600; letter-spacing:-.005em;}
.aic-badge .sg{display:inline-flex;}
.aic-badge .sg svg{width:14px;height:14px;}
.aic-title{font-size:clamp(var(--text-lead),2.7vw,var(--text-2xl)); line-height:1.2; font-weight:600; letter-spacing:-.02em; color:var(--fg); margin:0; max-width:30ch;}
.aic-preview{border-radius:var(--radius-md); overflow:hidden; border:1px solid var(--border-subtle); box-shadow:var(--e3);}
/* [update-site] de AI-render toont VOLLEDIG: geen vaste 206px-clamp die de hero halverwege afsnijdt */
.aic-preview .luma-site{height:auto; min-height:0;}
.aic-preview .luma-hero{padding-bottom:clamp(18px,2.6vw,28px);}
.aic-preview .luma-h{font-size:clamp(26px,4vw,40px);}
/* [preview-fix] generieke sites in de AI-render: still links, hero-copy rechts, als een echte site-hero */
.aic-preview .gen-site .luma-hero{display:flex; align-items:center; gap:clamp(14px,2.5vw,22px);}
.aic-preview .gen-site .luma-hero-copy{flex:1; min-width:0; max-width:none;}
.aic-preview .gen-site .gen-still{flex:none;}
.aic-foot{display:flex; flex-direction:column; gap:9px;}
.aic-foot .btn-primary{height:46px; padding:0 22px; font-size:15px;}
/* [C6 WS-D] price ON the make-it-live gate (not only at checkout): the amount sits next to the button */
.aic-pay{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}
.aic-price{display:inline-flex; align-items:baseline; gap:5px; font-size:13px; color:var(--fg-muted);}
.aic-price__amt{font-size:15px; font-weight:600; color:var(--fg); letter-spacing:-.01em;}
.aic-price__per{color:var(--fg-muted);}
.aic-sub{display:flex; gap:8px; align-items:flex-start; font-size:var(--text-sm); line-height:1.45; color:var(--fg-muted); margin:0;}
.aic-sub svg{width:15px;height:15px; flex:none; margin-top:1px; color:var(--accent-solid);}
/* [C7.7 / audit B6] a quiet line under the preview: this is a SAMPLE render of how the human's own
   site could look, not a stranger's site. Pairs with the chrome "Example" pill. */
.aic-note{font-size:12px; line-height:1.45; color:var(--fg-muted); margin:-6px 0 0; padding:0 2px;}
/* [C7.7 / audit §6] the calm, non-red fail safety net: if the AI could not build, fall back to drop.
   Muted surface, hairline border, no danger colour. */
.aic-fallback{display:flex; gap:10px; align-items:flex-start; padding:11px 13px; border-radius:var(--radius-md);
  border:1px solid var(--border-subtle); background:var(--surface-2); font-size:var(--text-sm); line-height:1.45; color:var(--fg-secondary);}
.aic-fallback svg{width:15px;height:15px; flex:none; margin-top:1px; color:var(--fg-muted);}
.aic-fallback .link{font-size:inherit;}

/* ---- aiDeployHTML: de 3-stappen-rail boven het code-blok (your AI does it, you confirm) ---- */
.ai-rail{display:flex; align-items:stretch; gap:0; margin:2px 0 4px; border:1px solid var(--border-subtle);
  border-radius:12px; overflow:hidden; background:var(--surface-2);}
.ai-step{flex:1; display:flex; align-items:center; gap:9px; padding:11px 12px; min-width:0;}
.ai-step + .ai-step{border-left:1px solid var(--border-subtle);}
.ai-step__n{flex:none; width:22px; height:22px; border-radius:var(--radius-full); display:grid; place-items:center;
  background:var(--surface); border:1px solid var(--border); color:var(--fg); font-size:12px; font-weight:600; font-variant-numeric:tabular-nums;}
.ai-step--pay .ai-step__n{background:var(--surface); border-color:var(--border-strong); color:var(--fg);}
.copy-feedback:empty{display:none;}
.ai-step__t{font-size:12px; line-height:1.3; color:var(--fg-secondary);}
.ai-step--pay .ai-step__t{color:var(--fg); font-weight:500;}
.ai-relay{margin:2px 0 0; font-size:var(--text-sm); line-height:1.45; color:var(--fg-muted);}
.ai-relay .q{color:var(--fg-secondary); font-weight:500;}
@media (max-width:560px){ .ai-rail{flex-direction:column;} .ai-step + .ai-step{border-left:none; border-top:1px solid var(--border-subtle);} }

/* ---- [0033] free-first AI: home CTA spark + authorize consent + free-live banner ---- */
.bring-cta__spark{flex:none; display:inline-flex; align-items:center; color:var(--accent-solid); margin-right:1px; vertical-align:-2px;}
.bring-cta__spark svg{width:14px;height:14px;}
.authz{display:flex; flex-direction:column; gap:14px;}
.authz-head{display:flex; align-items:center; gap:9px; font-size:var(--text-sm); color:var(--fg-secondary); line-height:1.4;}
.authz-head .sg{display:inline-flex; color:var(--accent-solid);}
.authz-head .sg svg{width:16px;height:16px;}
.authz-head .mono{color:var(--fg); font-weight:600;}
.authz-card{border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:14px 16px; display:flex; flex-direction:column; gap:13px;}
.authz-group{display:flex; flex-direction:column; gap:8px;}
.authz-group__label{font-size:12px; font-weight:600; letter-spacing:.01em; text-transform:uppercase; color:var(--fg-muted); margin:0;}
.authz-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:7px;}
.authz-item{display:flex; align-items:flex-start; gap:9px; font-size:var(--text-sm); line-height:1.4;}
.authz-item svg{width:15px;height:15px; flex:none; margin-top:1px;}
.authz-yes{color:var(--fg);}
.authz-yes svg{color:var(--accent-solid);}
.authz-no{color:var(--fg-muted);}
.authz-no__mark{flex:none; width:15px; text-align:center; margin-top:-1px; font-size:15px; line-height:1.4; color:var(--fg-muted);}
.authz-scope{font-size:12px; line-height:1.5; color:var(--fg-muted); margin:0;}
.authz-foot{display:flex; align-items:center; gap:14px; flex-wrap:wrap; margin-top:2px;}
/* the free-live "make it yours" upsell card under the live banner (0033 dashboard tween-state) */
.mky{border:1px solid var(--border); border-radius:var(--radius-lg); background:var(--surface); padding:15px 16px; margin-top:14px;}
.mky-head{display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-bottom:3px;}
.mky-title{font-size:var(--text-md); font-weight:600; letter-spacing:-.01em; color:var(--fg);}
.mky-sub{font-size:var(--text-sm); line-height:1.45; color:var(--fg-muted); margin:0 0 11px;}
.mky-perks{display:flex; gap:6px 16px; flex-wrap:wrap; margin:0 0 12px; padding:0; list-style:none;}
.mky-perks li{display:inline-flex; align-items:center; gap:6px; font-size:12px; color:var(--fg-secondary);}
.mky-perks svg{width:13px;height:13px; flex:none; color:var(--accent-solid);}

/* ════════════════════════════════════════════════════════════════
   [Cyclus 6.5] Safari-coherente materialen (clarity-first) + werkende vensterknoppen
   Bron: visual-system.md §6.5 (ui-visual-designer) + window-controls.md (motion+a11y).
   Materiaal-PRECISIE i.p.v. glas: haarlijn-ring + warme multi-laags schaduw + top-light + een eigen
   chrome-band + verzonken adresveld + echte traffic-light-controls. Geen backdrop-glass over content.
   Last-wins over de eerdere regels; warm-precisie-palet 1:1 behouden. ════════════════════ */
/* [FIX-C P7] the cyclus-6.5 chrome/window-control tokens are folded into the ONE :root above. */
/* de pane = een precies zwevend macOS-venster; transform meegenomen in de transitie zodat minimize/zoom animeren */
.pane{
  background:var(--surface); border:1px solid var(--pane-border); border-radius:var(--radius-xl);
  box-shadow:var(--e-pane);   /* [design-dna schaarste 1.5] de brand-green backlight staat NIET meer op ELKE pane; alleen .pane.is-browser (het live/secured dashboard, is-browser-regel hieronder) draagt --glow-live, zodat groen "alive/secured/good" blijft betekenen op het live-moment */
  transition:box-shadow var(--dur-reveal) var(--ease-out), border-color var(--dur-std), transform var(--dur-morph) var(--ease-morph);
}
.pane.is-browser{ box-shadow:var(--e-pane); border-color:var(--border); }   /* [Fable/David] geen groene halo om de pane */   /* [design-dna schaarste 1.5] het live/secured-moment: HETZELFDE verfijnde --e-pane-materiaal als de rust-pane PLUS de exclusieve groene halo. Groen leeft alleen hier; geen grover --e4 op het hero-moment. */
/* minimize/zoom = puur transform (view-state, raakt de spine niet), sleepbaar binnen de stage */
.pane.is-mini{ transform:translate(var(--drag-x,0px),var(--drag-y,0px)) scale(var(--mini-scale)); transform-origin:center center; cursor:grab; z-index:30; }
.pane.is-mini.is-dragging{ transition:none; cursor:grabbing; }
/* chrome-balk = een eigen materiaal-band (light-catch boven, crispe separator onder); oude border-bottom weg */
.pane-chrome{
  background:linear-gradient(180deg, var(--chrome-top), var(--chrome-bottom));
  border-bottom:0;
  box-shadow:var(--chrome-inset-top), inset 0 -1px 0 var(--chrome-divider);
}
/* traffic-light dots -> echte window-controls: rust = grafiet, kleur + glyph alleen op cluster-hover/focus */
.dots{ gap:8px; align-items:center; }
.tl{
  position:relative; flex:none; width:12px; height:12px; padding:0; border:0; border-radius:50%;
  display:inline-grid; place-items:center; cursor:pointer;
  background:radial-gradient(120% 120% at 50% 30%, var(--dot-rest-top), var(--dot-rest-bottom));
  box-shadow:inset 0 .5px .5px var(--dot-toplight), inset 0 0 0 .5px var(--dot-rim);
  transition:background var(--dur-std) var(--ease-out), box-shadow var(--dur-std) var(--ease-out);
}
.tl::before{ content:""; position:absolute; inset:-7px; border-radius:50%; }   /* ~26px hit-target (WCAG 2.5.8) */
.tl-glyph{ width:12px; height:12px; opacity:0; transition:opacity var(--dur-micro) var(--ease-out); }
/* [design-dna 1.2 / soul-check 3.1] GEEN macOS-stoplichten: rust EN hover blijven grafiet; alleen de
   ink-glyph onthult op hover (identiteit + affordance + a11y). De ENIGE toegestane kleur is ONS Live-Green
   op de zoom-knop nadat die gewapend is (na minimize), nooit Apple's rood/geel/zoom-groen. */
.tl--close{ color:var(--fg-secondary); } .tl--min{ color:var(--fg-secondary); } .tl--zoom{ color:var(--fg-onColor); }
.dots:hover .tl--close .tl-glyph, .dots:focus-within .tl--close .tl-glyph,
.dots:hover .tl--min .tl-glyph, .dots:focus-within .tl--min .tl-glyph{ opacity:1; }
.dots:hover .tl--close, .dots:focus-within .tl--close,
.dots:hover .tl--min, .dots:focus-within .tl--min{ background:radial-gradient(120% 120% at 50% 30%, var(--dot-rest-top), var(--dot-rest-bottom)); box-shadow:inset 0 .5px .5px var(--dot-toplight), inset 0 0 0 .5px var(--border-strong); }
.dots:hover .tl--zoom.is-armed, .dots:focus-within .tl--zoom.is-armed{ background:radial-gradient(120% 120% at 50% 30%, var(--accent), var(--accent-solid)); box-shadow:inset 0 0 0 .5px var(--accent-solid-hover); }
.dots:hover .tl--zoom.is-armed .tl-glyph, .dots:focus-within .tl--zoom.is-armed .tl-glyph{ opacity:1; }  /* zoom-glyph (wit op groen) alleen als gewapend (na minimize) */
.tl--zoom[aria-disabled="true"]{ cursor:default; }
.tl:focus-visible{ outline:none; box-shadow:var(--ring); }
/* adres-pill = Safari-verzonken capsule (geen harde rand; de recess framet) */
.addr-pill{ background:var(--bg-sunken); border:1px solid transparent; box-shadow:var(--addr-recess); }
.addr-pill:hover{ background:var(--addr-pill-hover); }
/* velden: accent focus-ring (blijft subtiel recessed) */
.field--domain:focus-visible, .field--domain:focus, .field:focus-visible, .field:focus{
  outline:none; border-color:var(--border-strong); box-shadow:0 0 0 3px rgba(120,120,120,.12), var(--inset-hair);
}
/* wallet = warm-metaal (verfijnt de vlakke zwart-knop); hover voegt de groene live-glow toe */
.wallet-btn{ background:var(--wallet-grad); box-shadow:var(--inset-top), var(--wallet-rim), var(--e2); }
.wallet-btn:hover{ box-shadow:var(--inset-top), var(--wallet-rim), var(--e2), var(--glow-live); }
/* chips: het levende groen-dot krijgt een zachte halo */
.chip-ok::before{ box-shadow:0 0 0 3px rgba(15,185,112,.12); }
@media (prefers-reduced-motion: reduce){
  .pane, .pane-chrome, .tl, .tl-glyph, .field--domain, .btn, .wallet-btn, .addr-pill{ transition:none !important; }
}
/* ════════════════════════════════════════════════════════════════
   [design-dna doorvoering] Merk-cursor-laag: SCHAARS en betekenis-dragend. GEEN site-brede cursor:none
   met JS-follower en GEEN crosshair over de hele laag (dat is de generiek-AI-portfolio-gimmick die de DNA
   verbiedt en die de echte pointer verbergt). Native cursor:url(<inline-svg>) ALLEEN op de zones die iets
   betekenen: de dropzone (scherpstel-target), het live/secured-slot (lock-hint), de sleepbare mini-pane
   (grab). Fallback blijft de gewone native cursor. Mobiel/coarse: geen merk-cursor. ════════════════ */
/* (a) dropzone -> een haarlijn scherpstel-reticle (het "waar het scherpstelt"-moment), nooit bovenop het label */
.dropzone{ cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><circle cx='12' cy='12' r='6.5' fill='none' stroke='%2318140F' stroke-width='1.25' opacity='.85'/><path d='M12 1.5v4M12 18.5v4M1.5 12h4M18.5 12h4' stroke='%2318140F' stroke-width='1.25' stroke-linecap='round' opacity='.85'/><circle cx='12' cy='12' r='1.1' fill='%2318140F'/></svg>") 12 12, pointer; }
.dropzone .drop-label, .dropzone .drop-sub, .dropzone .link{ cursor:pointer; }
/* (b) live/secured-slot -> een kleine lock-glyph in Live-Green (schaars, alleen op het gesloten slot, niet op elke pixel) */
.is-browser .addr-pill .lock.locked{ cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><rect x='6.5' y='11' width='11' height='8.5' rx='2' fill='none' stroke='%230FB970' stroke-width='1.6'/><path d='M9 11V8.5a3 3 0 0 1 6 0V11' fill='none' stroke='%230FB970' stroke-width='1.6'/><circle cx='12' cy='14.8' r='1.1' fill='%230FB970'/></svg>") 12 12, default; }
/* (c) sleepbare mini-pane -> een merk-getinte grab (branding op de bestaande grab/grabbing) */
.pane.is-mini{ cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='%230FB970'><circle cx='9' cy='7' r='1.5'/><circle cx='15' cy='7' r='1.5'/><circle cx='9' cy='12' r='1.5'/><circle cx='15' cy='12' r='1.5'/><circle cx='9' cy='17' r='1.5'/><circle cx='15' cy='17' r='1.5'/></g></svg>") 12 12, grab; }
.pane.is-mini.is-dragging{ cursor:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'><g fill='%230FB970'><circle cx='9' cy='7' r='1.5'/><circle cx='15' cy='7' r='1.5'/><circle cx='9' cy='12' r='1.5'/><circle cx='15' cy='12' r='1.5'/><circle cx='9' cy='17' r='1.5'/><circle cx='15' cy='17' r='1.5'/></g></svg>") 12 12, grabbing; }
@media (hover:none),(pointer:coarse){
  .dropzone, .dropzone .drop-label, .dropzone .drop-sub, .dropzone .link,
  .is-browser .addr-pill .lock.locked, .pane.is-mini, .pane.is-mini.is-dragging{ cursor:auto; }
}
/* [DAVID 13:01 v2] telefoon-compact, LAATSTE WOORD (na alle eerdere phone-rules; bron-volgorde wint).
   Doel: de kale home past zonder scroll op 375x667. Tour-reserves onaangeroerd via :not(.is-tour). */
@media (max-width:640px){
  body:not(.is-tour) .brandbar{height:48px; min-height:48px;}
  body:not(.is-tour) .pane{margin-top:12px;}
  body:not(.is-tour) .is-bare .h1{font-size:var(--text-xl); margin-bottom:4px;}
  body:not(.is-tour) .is-bare .grab-help{display:grid; grid-template-columns:15px 1fr; gap:8px; align-items:start; font-size:var(--text-xs); margin-top:6px;}
  body:not(.is-tour) .stage-foot{gap:4px; margin-top:4px;}
  body:not(.is-tour) #stageNote{font-size:var(--text-xs); line-height:1.4; margin:6px 0 0;}
  body:not(.is-tour) #replay{min-height:44px;}  /* [tik-doel] 44px */
  body:not(.is-tour) #tourConnect, body:not(.is-tour) #tourAi{border:0; background:transparent; box-shadow:none; min-height:28px; height:auto;
    padding:2px 8px; font-size:var(--text-xs); color:var(--fg-muted); text-decoration:underline; text-underline-offset:3px;}
  body:not(.is-tour) .site-foot{margin-top:8px; padding-top:6px; padding-bottom:10px;}
  /* de 55px-narrator-reserve is een tour-CLS-maatregel; de kale home heeft statische tekst */
  body:not(.is-tour) .stage-note{min-height:0;}
  body:not(.is-tour) .stage{padding-top:12px;}
  body:not(.is-tour) #replay{height:44px; min-height:44px;}  /* [tik-doel] primaire walkthrough-CTA blijft ook op mobiel 44px */
  body:not(.is-tour) .is-bare .pane-body{padding:16px;}
}
/* [legal-overlay] Terms / Privacy / Report abuse als een terugkeerbaar warm-papier-vel BOVEN de
   Living Pane (de pane navigeert nooit, dus een lopende koop/walkthrough blijft gewoon onder het vel
   staan). Warm paper + bijna-zwarte ink + Geist; GEEN Live Green (legal is geen 'good'-signaal). */
.legal-overlay{position:fixed; inset:0; z-index:70; display:grid; place-items:center; padding:20px;
  background:rgba(28,25,20,.34); opacity:0; transition:opacity .2s var(--ease-out);}
.legal-overlay.is-open{opacity:1;}
.reduced .legal-overlay{transition:none;}
.legal-sheet{width:min(460px,100%); max-height:min(82vh,660px); overflow:auto; background:var(--surface);
  border:1px solid var(--border-subtle); border-radius:var(--radius-lg); box-shadow:var(--e4);
  transform:translateY(8px); transition:transform .2s var(--ease-out);}
.legal-overlay.is-open .legal-sheet{transform:none;}
.reduced .legal-sheet{transform:none; transition:none;}
.legal-sheet__head{display:flex; align-items:center; gap:12px; padding:16px 18px 8px;}
.legal-sheet__title{font-size:var(--text-lg); font-weight:600; letter-spacing:-.01em; color:var(--fg); margin:0; flex:1;}
.legal-x{flex:none; width:32px; height:32px; display:grid; place-items:center; border-radius:var(--radius-sm);
  border:1px solid var(--border-subtle); background:var(--surface); color:var(--fg-secondary); cursor:pointer;}
.legal-x:hover{background:var(--bg-sunken); color:var(--fg);}
.legal-x:focus-visible{outline:none; box-shadow:var(--ring);}
.legal-x svg{width:15px; height:15px;}
.legal-sheet__body{padding:2px 18px 18px;}
.legal-list{margin:0; padding-left:18px; display:flex; flex-direction:column; gap:9px;}
.legal-list li{font-size:var(--text-md); color:var(--fg-secondary); line-height:1.5;}
.legal-fine{font-size:var(--text-sm); color:var(--fg-muted); margin:12px 0 0; line-height:1.5;}
.legal-form{display:flex; flex-direction:column;}
.legal-form .field-label{margin-bottom:5px;}
.legal-textarea{min-height:78px; resize:vertical; padding-top:9px; line-height:1.45; font-family:var(--font-sans);}
.legal-done{display:flex; flex-direction:column; align-items:flex-start; gap:6px;}
.legal-done__ico{display:inline-grid; place-items:center; width:30px; height:30px; border-radius:50%;
  background:var(--bg-sunken); color:var(--fg-secondary);}
.legal-done__ico svg{width:16px; height:16px;}
/* [confirm] herbruikbare bevestig-modal voor destructieve acties (opzeggen/verwijderen). Zelfde
   vel-grammatica als legal; danger-accent, twee knoppen. Browser-Back = annuleren (history-aware). */
.confirm-sheet__body{padding:2px 18px 6px;}
.confirm-sheet__body p{font-size:var(--text-md); color:var(--fg-secondary); line-height:1.55; margin:0 0 8px;}
.confirm-sheet__body p:last-child{margin-bottom:0;}
.confirm-sheet__body b{color:var(--fg); font-weight:600;}
/* [claim-pop 2026-07-19] "Claim your free domain" pop-up op de home: kies je
   yourname.dropthehassle.app IN de pop-up (echte live-check) en de volgende klik is de echte
   drop-zone. Zelfde vel-grammatica als legal (scrim, vel, X), marketing-DNA voor kop + verf. */
.claimpop{position:fixed; inset:0; z-index:80; display:grid; place-items:center;
  padding:calc(16px + env(safe-area-inset-top)) calc(16px + env(safe-area-inset-right)) calc(16px + env(safe-area-inset-bottom)) calc(16px + env(safe-area-inset-left));
  background:rgba(28,25,20,.38); opacity:0; transition:opacity .22s var(--ease-out);}
.claimpop.is-open{opacity:1;}
.reduced .claimpop{transition:none;}
.claimpop__card{position:relative; width:min(500px,100%); max-height:calc(100vh - 32px); overflow:auto;
  background:var(--surface); border:1px solid var(--border-subtle); border-radius:var(--radius-lg);
  box-shadow:var(--e4); padding:26px 26px 20px;
  transform:translateY(10px) scale(.985); transition:transform .22s var(--ease-out);}
.claimpop.is-open .claimpop__card{transform:none;}
.reduced .claimpop__card{transform:none; transition:none;}
/* de groene verf-veeg uit de marketing-laag als stille hoek-echo; nooit onder de tekst.
   In een eigen clip-laag (inset:0, overflow:hidden): de veeg steekt buiten de kaartrand en zou
   anders in de scroll-container van de kaart een horizontale scrollbalk maken. */
.claimpop__clip{position:absolute; inset:0; overflow:hidden; border-radius:inherit; pointer-events:none;}
.claimpop__paint{position:absolute; top:-30px; right:-40px; width:200px; height:130px; opacity:.5; pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='320' height='200'%3E%3Cfilter id='p' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.12 0.08' numOctaves='4' seed='7' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='46'/%3E%3C/filter%3E%3Cg filter='url(%23p)' fill='%230FB970'%3E%3Crect x='60' y='58' width='220' height='34' transform='rotate(-3 170 75)'/%3E%3Crect x='76' y='96' width='190' height='30' transform='rotate(2 171 111)'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;}
.claimpop__x{position:absolute; top:14px; right:14px; z-index:1;}
.claimpop__kick{display:inline-flex; align-items:center; gap:7px; font-size:13px; font-weight:500; color:var(--fg-secondary);}
.claimpop__kick .mkt-lock{width:12px; height:12px; flex:none;}
.claimpop__h{font-family:var(--font-display); font-weight:700; font-size:clamp(26px,6vw,34px);
  line-height:1.1; letter-spacing:-.022em; color:var(--fg); margin:10px 0 0; text-wrap:balance;}
.claimpop__h em{font-style:normal; color:inherit;
  background-image:linear-gradient(178deg, rgba(15,185,112,.30), rgba(53,232,160,.34));
  background-repeat:no-repeat; background-size:100% 40%; background-position:0 82%;
  padding:0 .06em; margin:0 -.06em; border-radius:3px;}
.claimpop__sub{font-size:15px; color:var(--fg-secondary); line-height:1.5; margin:8px 0 0;}
.claimpop__sub b{color:var(--fg); font-weight:600;}
.claimpop .sub-edit__row{max-width:none; margin-top:16px;}
.claimpop .sub-edit__input{height:46px; font-size:16px;}
.claimpop__msg{display:block; min-height:17px; margin-top:7px;}
.claimpop__cta{width:100%; margin-top:12px; height:46px; font-size:15px;}
.claimpop__fine{display:flex; align-items:center; justify-content:space-between; gap:10px;
  font-size:12px; color:var(--fg-muted); margin:12px 0 0;}
.claimpop__fine .link{font-size:12px; color:var(--fg-muted);}
.claimpop__fine .link:hover{color:var(--fg);}
@media (max-width:430px){
  .claimpop{align-items:end; display:flex; justify-content:center;}
  .claimpop__card{padding:22px 18px 16px; border-bottom-left-radius:0; border-bottom-right-radius:0; width:100%;}
  .claimpop .sub-edit__input{font-size:16px;}  /* iOS: nooit zoomen op focus */
}
.confirm-acts{display:flex; gap:10px; justify-content:flex-end; padding:10px 18px 18px; flex-wrap:wrap;}
.confirm-acts .btn{min-width:104px;}
.btn-danger{background:var(--danger); color:var(--danger-contrast); border:1px solid var(--danger);}
.btn-danger:hover{filter:brightness(.94);}
.btn-danger:focus-visible{outline:none; box-shadow:0 0 0 3px var(--danger-tint);}
@media (max-width:480px){ .confirm-acts{flex-direction:column-reverse;} .confirm-acts .btn{width:100%;} }
.legal-done__lead{font-size:var(--text-md); color:var(--fg); margin:0; line-height:1.5;}
/* [David 2026-07-06] Home hero: clarity-first, centered column. Title -> search bar -> one quiet helper
   line -> two option cards. Scoped to .home-hero so every other screen keeps its left-aligned h1/help. */
/* [David 2026-07-12] Walkthrough + voorbeelden zijn weg -> de home mag ademen. De held wordt groter en
   zelfverzekerder (best-practice hero): breder canvas, groot headline, een dik focaal adresveld, royale
   witruimte. Alles blijft binnen de pane (geen scroll); mobiel schaalt via clamp mee. */
.home-hero{max-width:600px; margin-inline:auto; text-align:center;}
.home-hero .h1{text-align:center; margin:0 0 2px;}
.home-hero--buy .h1{font-size:clamp(34px, 5.4vw, 54px); letter-spacing:-.035em; line-height:1.04; font-weight:640;}   /* short buy title only */
.home-hero .webaddr{margin-top:clamp(24px, 3.4vh, 34px);}
.home-hero .webaddr .field--domain{text-align:center; height:clamp(58px, 7.2vh, 68px); font-size:clamp(20px, 2.4vw, 26px);}   /* placeholder + typed name centered in a bigger focal bar */
body:not(.is-tour) .home-hero .grab-help{display:inline-flex; justify-content:center; align-items:center; gap:8px; text-align:center; grid-template-columns:none; margin-top:14px;}
.home-hero .result{text-align:left;}
.home-hero .bare-aside{text-align:left; align-items:stretch; margin-top:clamp(26px, 3.6vh, 36px);}
.home-hero .entry-quiet{text-align:center; margin-top:18px;}
@media (max-width:560px){ .home-hero{max-width:100%;} .home-hero .bare-aside{margin-top:22px;} }
/* [Fable/David] mobiel: 1 nette rij-structuur onder de pane + de footer direct onder de inhoud */
@media (max-width:560px){
  .motion-bar{display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px 22px;}
  /* [Fable] tijdens/na de tour: de bediening plakt onderaan, altijd in beeld */
  body.is-tour .motion-bar, body.is-tourdone .motion-bar{position:fixed; left:0; right:0; bottom:0; z-index:30; background:var(--surface); border-top:1px solid var(--border-subtle); padding:10px 16px calc(10px + env(safe-area-inset-bottom));}
  body.is-tour .stage, body.is-tourdone .stage{padding-bottom:96px;}
  .motion-bar .tourdone-row{flex-basis:100%; display:flex; justify-content:center; gap:10px;}
  /* [Fable/David] telefoon: de pane houdt zijn hoogte, de stage VULT de rest zodat de footer-links
     onderaan het scherm plakken (onder de website-balk), niet los midden onder de pane. */
  body:not(.is-tour):not(.is-playing) .stage{flex:1 1 auto; justify-content:flex-start; padding-bottom:8px;}
  body:not(.is-tour):not(.is-playing) .site-foot{margin-top:auto; padding-bottom:14px;}
  /* [David 2026-07-12] mobiel: de twee deur-kaarten GESTAPELD (volle breedte). Naast elkaar brak de tekst
     lelijk af ("building with / AI?"); gestapeld leest elke kaart rustig, met de vraag boven de actie en de
     pijl terug -> best-practice keuze-kaarten op een telefoon, ruime tap-doelen. */
  .cta-row{flex-direction:column; gap:8px;}
  /* [David 2026-07-19 r4] telefoon: de knoppen mogen de TITEL nooit overstemmen -- slanker (52px,
     kleiner woord/subregel) zodat de hierarchie titel > veld > knoppen blijft kloppen. */
  .cta-row .bring-cta{width:100%; flex-direction:row; align-items:center; justify-content:space-between;
    gap:12px; padding:9px 15px; min-height:52px;}
  .cta-row .bring-cta__txt{gap:1px;}
  .cta-row .bring-cta__arrow{display:inline-flex;}
  .cta-row .bring-cta--dark .bring-cta__big{font-size:14.5px;}
  .cta-row .bring-cta--dark .bring-cta__sub{font-size:11.5px;}
  .cta-row .bring-cta--dark .bring-cta__free{font-size:12.5px;}
  .cta-row .bring-cta__arrow svg{width:15px;height:15px;}
  .cta-row .bring-cta__q{font-size:12px;}
  .cta-row .bring-cta__a{font-size:15px;}
}

/* =====================================================================
   [mkt 2026-07-18] DE MARKETING-LAAG onder de fold van de kale home.
   Wet: alleen zichtbaar op de kale home (body.has-mkt volgt #canvas.is-bare);
   elke app-view verbergt de hele laag. De hero boven de fold blijft
   pixel-identiek. Twee stemmen: het product praat Geist, het verhaal praat
   Fraunces (--font-display, alleen hier). Geen nieuwe kleuren, geen mono.
   ===================================================================== */
@media (prefers-reduced-motion: no-preference){ html{scroll-behavior:smooth;} }
.mkt{display:none;}
body.has-mkt .mkt{display:block; position:relative; z-index:2;}
/* [David 2026-07-19] de volgende sectie mag boven de fold uitsteken: geen kunstmatige
   viewport-reserve op de stage, en compacte sectie-paddings (dead space weg) */
.mkt-sec{padding:clamp(44px,7vh,76px) clamp(20px,5vw,40px);}
#mkt-sotd[hidden]{display:none !important;}
/* [David 2026-07-19 r3] GEEN sectie-banden meer: alle secties hetzelfde papier, en hier en
   daar een ruwe horizontale verf-smeer in Live Green als premium graffiti-accent (SVG-brush
   met turbulence-randen, licht genoeg om tekst erop leesbaar te houden) */
.mkt-sec{position:relative; overflow:hidden;}
.mkt-sec > .mkt-wrap{position:relative; z-index:1;}
.mkt-paint{position:absolute; pointer-events:none; z-index:0;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='640' height='320'%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.11 0.07' numOctaves='4' seed='11' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='62'/%3E%3C/filter%3E%3Cg filter='url(%23b)' fill='%230FB970'%3E%3Crect x='90' y='80' width='460' height='70' transform='rotate(-2 320 115)'/%3E%3Crect x='80' y='142' width='480' height='76' transform='rotate(1 320 180)'/%3E%3Crect x='100' y='212' width='440' height='62' transform='rotate(-1 320 243)'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;}
.mkt-paint--a{width:min(720px,86vw); height:340px; top:-30px; left:-90px; transform:rotate(-4deg); opacity:.15;}
/* [David 2026-07-19 r4] de verticale variant (zijn referentie): DRIE strepen naast elkaar,
   de middelste het langst, links start net onder de top van de middelste, rechts iets lager */
.mkt-paint--v{background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='640'%3E%3Cfilter id='b' x='-30%25' y='-30%25' width='160%25' height='160%25'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.07 0.11' numOctaves='4' seed='23' result='n'/%3E%3CfeDisplacementMap in='SourceGraphic' in2='n' scale='58'/%3E%3C/filter%3E%3Cg filter='url(%23b)' fill='%230FB970'%3E%3Crect x='64' y='118' width='64' height='412' transform='rotate(-1 96 324)'/%3E%3Crect x='138' y='62' width='72' height='520' transform='rotate(1 174 322)'/%3E%3Crect x='220' y='168' width='62' height='372' transform='rotate(-1 251 354)'/%3E%3C/g%3E%3C/svg%3E") center / 100% 100% no-repeat;}
.mkt-paint--b{width:min(320px,42vw); height:600px; top:10px; right:-40px; transform:rotate(2deg); opacity:.15;}
/* [bugfix David 2026-07-19] top-verankerd, NIET bottom: een uitklappende FAQ liet de smeer meezakken */
.mkt-paint--c{width:min(260px,36vw); height:480px; top:230px; left:-20px; transform:rotate(-2deg); opacity:.12;}
/* mobiel: strepen kleiner en stiller; de answers-smeer vervalt (kolom is daar volle breedte,
   verf achter de vragen = ruis) */
@media (max-width:700px){
  .mkt-paint--a{width:110vw; height:230px; top:-16px; left:-30px; opacity:.13;}
  .mkt-paint--b{width:48vw; height:420px; top:0; right:-24px; opacity:.12;}
  .mkt-paint--c{display:none;}
}
/* [David 2026-07-19] de reviews-wall als rebelse hero-achtergrond: gewassen met een paper-veil
   (leesbaar genoeg voor energie, duidelijk decor) en rondom weggemaskeerd zodat de pane de held
   blijft. Alleen op de marketing-home; app-views blijven kaal papier. */
body.has-mkt .stage::before{
  content:""; position:absolute; inset:0; z-index:0; pointer-events:none;
  /* [David 2026-07-19 r3] de muur is VIEWPORT-vast, niet stage-vast: cover + %-masker herschaalden
     mee zodra de tile groeide (typen -> resultaat) en de hele achtergrond versprong ("virus-gevoel").
     Nu: breedte-gebaseerde size + px/vh-verankerde gradient en masker -- groeit de stage, dan komt er
     alleen rustig papier bij aan de onderkant, de muur zelf staat stil. */
  background:
    linear-gradient(180deg, rgba(250,250,248,.88) 0px, rgba(250,250,248,.42) 22vh,
      rgba(250,250,248,.34) 68vh, rgba(250,250,248,.95) 105vh, rgba(250,250,248,.97) 100%),
    url("wall.webp") center top / 100vw auto no-repeat;
  -webkit-mask-image:radial-gradient(135vw 110vh at 50% 45vh, var(--mask-ink) 42%, transparent 97%);
          mask-image:radial-gradient(135vw 110vh at 50% 45vh, var(--mask-ink) 42%, transparent 97%);
}
body.has-mkt .stage-inner{z-index:1;}
.mkt-wrap{max-width:1020px; margin:0 auto;}
.mkt-d1{font-family:var(--font-display); font-weight:700; font-size:clamp(32px,4.6vw,52px);
  line-height:1.08; letter-spacing:-.025em; color:var(--fg); margin:0; text-wrap:balance;}
.mkt-d2{font-family:var(--font-display); font-weight:700; font-size:clamp(26px,3.6vw,38px);
  line-height:1.12; letter-spacing:-.022em; color:var(--fg); margin:0; text-wrap:balance;}
/* [David 2026-07-19 r2] accent-woorden: geen cursief, geen kleur-tekst maar een groene
   MARKER-streep eronder (het graffiti-randje, clean uitgevoerd) */
.mkt-d1 em,.mkt-d2 em,.sc-h1 em{font-style:normal; color:inherit;
  background-image:linear-gradient(178deg, rgba(15,185,112,.30), rgba(53,232,160,.34));
  background-repeat:no-repeat; background-size:100% 40%; background-position:0 82%;
  padding:0 .06em; margin:0 -.06em; border-radius:3px;}
.mkt-sub{font-size:clamp(15px,1.8vw,17px); color:var(--fg-secondary); margin:14px 0 0; max-width:52ch;}
.mkt-btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; min-height:var(--control-h);
  padding:0 18px; border-radius:var(--radius-sm); background:var(--ink); color:var(--ink-contrast);
  font-size:15px; font-weight:500; text-decoration:none; border:0; cursor:pointer; white-space:nowrap;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16), var(--e1);
  transition:background var(--dur-micro) var(--ease-out), transform var(--dur-micro) var(--ease-out);}
.mkt-btn:hover{background:var(--ink-hover);}
.mkt-btn:active{transform:translateY(.5px);}
.mkt-btn:focus-visible{outline:none; box-shadow:var(--ring);}
.mkt-link{color:var(--fg-secondary); text-decoration:none; font-size:14px; min-height:var(--control-h);
  display:inline-flex; align-items:center; padding:0 6px; border-radius:var(--radius-xs);}
.mkt-link:hover{color:var(--fg);}
.mkt-link:focus-visible{outline:none; box-shadow:var(--ring);}
/* scroll-reveal: pas actief als JS er is (body.mkt-js); reduced motion = geen beweging */
/* [David 2026-07-19 r3] reveals op eigen, rustige timing (was 200ms = micro-interactie-tempo ->
   elementen "popten" schokkerig binnen, vooral op de telefoon). Nu .65s met de zachte ease en een
   iets grotere loop, zodat elke sectie voelbaar premium binnenglijdt. */
body.mkt-js .mkt-rev{opacity:0; transform:translateY(22px);
  transition:opacity .65s var(--ease-out), transform .65s var(--ease-out);}
body.mkt-js .mkt-rev.in{opacity:1; transform:none;}
@media (prefers-reduced-motion: reduce){
  body.mkt-js .mkt-rev{opacity:1; transform:none; transition:none;}
}

/* --- het mini-venster (Living Pane als verteller) --- */
.mkt-pane{background:var(--surface); border:1px solid var(--paper-pane-border); border-radius:var(--radius-lg);
  overflow:hidden; box-shadow:var(--e3);}
.mkt-chrome{height:38px; background:var(--surface-2); border-bottom:1px solid var(--border-subtle);
  display:flex; align-items:center; gap:8px; padding:0 14px;}
.mkt-dots{display:inline-flex; gap:5px; flex:none;}
.mkt-dots i{width:8px; height:8px; border-radius:var(--radius-full); background:var(--border-strong);}
.mkt-addr{margin:0 auto; background:var(--bg); border:1px solid var(--border-subtle);
  border-radius:var(--radius-full); height:24px; display:inline-flex; align-items:center; gap:6px;
  padding:0 12px; font-size:12.5px; color:var(--fg); font-variant-numeric:tabular-nums;}
.mkt-lock{width:11px; height:11px; flex:none; display:inline-block;}
.mkt-datestamp{font-size:12px; color:var(--fg-muted); flex:none; font-variant-numeric:tabular-nums;}

/* --- how it works: de echte flow, vier vensters NAAST elkaar (geen scroll-animatie,
       besluit David 2026-07-19): naam -> live -> dashboard -> alle domeinen --- */
.mkt-how-head{text-align:center;}
/* [David 2026-07-19 r5] de "eerste complete platform"-bento: 6 tegels van echt product-UI, de
   donkere AI-tegel (2x2) draagt de claim. Alleen bestaande tokens; captions = 1 korte regel. */
.mkt-bento{display:grid; grid-template-columns:repeat(3,1fr); gap:14px; margin-top:clamp(24px,4vh,40px);}
.bn-tile{margin:0; background:var(--surface); border:1px solid var(--paper-pane-border);
  border-radius:var(--radius-lg); padding:18px 18px 16px; display:flex; flex-direction:column;
  gap:12px; box-shadow:var(--e1); min-height:128px;}
.bn-tile--ai{grid-column:1 / 3; grid-row:1 / 3; background:var(--ink); border-color:var(--ink);
  box-shadow:var(--e3); gap:16px; padding:22px 22px 20px;}
.bn-kick{font-family:var(--font-mono); font-size:11px; font-weight:500; letter-spacing:.12em;
  text-transform:uppercase; color:var(--fg-muted);}
.bn-tile--ai .bn-kick{color:var(--accent);}
.bn-vis{flex:1; display:flex; flex-direction:column; gap:8px; justify-content:center; min-width:0;}
.bn-vis--row{flex-direction:row; align-items:center; gap:10px;}
.bn-cap{margin:0; font-size:13px; line-height:1.45; color:var(--fg-secondary);}
.bn-tile--ai .bn-cap{color:var(--ink-contrast); opacity:.7; font-size:14px; max-width:34ch;}
.bn-term{flex:1; display:flex; flex-direction:column; gap:12px; justify-content:center;
  font-family:var(--font-mono); font-size:clamp(13px,1.4vw,15px); color:var(--ink-contrast);}
.bn-tl{white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.bn-pr{color:var(--accent); margin-right:4px;}
.bn-ok{color:var(--accent);}
.bn-dim{opacity:.55;}
.bn-addr{display:flex; align-items:center; gap:7px; min-width:0; height:34px; padding:0 11px;
  border:1px solid var(--border-subtle); border-radius:var(--radius-full); background:var(--bg-sunken);
  font-size:13px; color:var(--fg); overflow:hidden; white-space:nowrap;}
.bn-addr--mono{font-family:var(--font-mono); font-size:12.5px;}
.bn-addr .grow{flex:1;}
.bn-zip{display:inline-flex; align-items:center; height:30px; padding:0 11px; border-radius:var(--radius-sm);
  border:1px dashed var(--border-strong); font-family:var(--font-mono); font-size:12.5px; color:var(--fg-secondary);}
.bn-arrow{color:var(--fg-muted);}
.bn-num{font-size:16px; font-weight:650; color:var(--fg); font-variant-numeric:tabular-nums;}
.bn-dim2{font-size:12px; font-weight:400; color:var(--fg-muted);}
@media (max-width:900px){
  .mkt-bento{grid-template-columns:1fr 1fr;}
  .bn-tile--ai{grid-column:1 / -1; grid-row:auto; min-height:200px;}
}
@media (max-width:560px){
  .mkt-bento{grid-template-columns:1fr; gap:10px;}
  .bn-tile{min-height:0;}
  .bn-tile--ai{min-height:0;}
}
.mkt-flow{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:clamp(24px,4vh,36px);
  align-items:stretch;}
.mkt-beat{margin:0; display:flex; flex-direction:column;}
.mkt-beat .mkt-pane{flex:1; display:flex; flex-direction:column;}
.mkt-beat-body{padding:16px 14px; min-height:172px; flex:1; display:flex; flex-direction:column; gap:8px;
  align-items:center; justify-content:center;}
.mkt-beat-cap{text-align:center; font-size:13px; color:var(--fg-secondary); margin:12px 0 0;
  display:flex; align-items:center; justify-content:center; gap:8px;}
.mkt-beat-cap b{flex:none; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; border-radius:var(--radius-full); background:var(--accent-tint);
  color:var(--accent-text); font-size:11px; font-weight:600;}
.mkt-fieldmock{width:100%; max-width:250px; border:1px solid var(--border-strong);
  border-radius:var(--radius-sm); min-height:40px; display:flex; align-items:center; padding:0 12px;
  font-size:13.5px; color:var(--fg); background:var(--surface);}
.mkt-caret{display:inline-block; width:1px; height:15px; background:var(--fg); margin-left:2px;
  animation:mktBlink 1.1s steps(1) infinite;}
@keyframes mktBlink{50%{opacity:0;}}
@media (prefers-reduced-motion: reduce){ .mkt-caret{animation:none;} }
.mkt-chiplet{display:inline-flex; align-items:center; gap:6px; height:24px; padding:0 10px;
  border-radius:var(--radius-full); background:var(--accent-tint); color:var(--accent-text);
  font-size:12px; font-weight:500;}
.mkt-chiplet i{width:6px; height:6px; border-radius:var(--radius-full); background:var(--accent);}
.mkt-chiplet--lg{height:30px; padding:0 14px; font-size:14px;}
.mkt-mailrow,.mkt-statrow{display:flex; align-items:center; gap:8px; width:100%;
  border:1px solid var(--border-subtle); border-radius:var(--radius-sm); padding:8px 11px;
  font-size:12.5px; color:var(--fg); background:var(--surface); white-space:nowrap; overflow:hidden;}
.mkt-statrow .grow{flex:1;}
.mkt-minichip{flex:none; display:inline-flex; align-items:center; gap:5px; height:20px; padding:0 8px;
  border-radius:var(--radius-full); background:var(--accent-tint); color:var(--accent-text);
  font-size:10.5px; font-weight:500;}
.mkt-minichip i{width:5px; height:5px; border-radius:var(--radius-full); background:var(--accent);}
.mkt-grip{flex:none; display:inline-grid; grid-template-columns:3px 3px; gap:2px; opacity:.55;}
.mkt-grip i{width:3px; height:3px; border-radius:99px; background:var(--fg-muted);}
.mkt-giftrow{border-style:dashed; color:var(--fg-secondary); background:var(--surface-2);}
@media (max-width:1000px){ .mkt-flow{grid-template-columns:1fr 1fr;} }
@media (max-width:560px){ .mkt-flow{grid-template-columns:1fr;} .mkt-beat-body{min-height:0; padding:18px 14px;} }

/* --- drie verhalen: editorial --- */
.mkt-ed{display:grid; grid-template-columns:7fr 5fr; gap:18px; margin-top:clamp(24px,4vh,40px); align-items:stretch;}
.mkt-ed-right{display:flex; flex-direction:column; gap:18px;}
.mkt-story{background:var(--surface); border:1px solid var(--paper-pane-border); border-radius:var(--radius-lg);
  overflow:hidden; display:flex; flex-direction:column; box-shadow:var(--e1);}
.mkt-story img{width:100%; height:auto; object-fit:cover; display:block;}   /* [David 2026-07-19] foto's in kleur */
.mkt-story--feature img{aspect-ratio:4/3;}
.mkt-story--small{flex-direction:row; flex:1; min-height:0;}
.mkt-story--small img{width:38%; height:100%;}
.mkt-story-body{padding:20px 22px; display:flex; flex-direction:column; gap:8px; justify-content:center; flex:1;}
.mkt-story-line{font-family:var(--font-display); font-weight:600; font-size:19px; line-height:1.3; letter-spacing:-.015em;
  color:var(--fg); margin:0;}
.mkt-story--feature .mkt-story-line{font-size:clamp(22px,2.6vw,27px);}
.mkt-story-txt{font-size:14px; color:var(--fg-secondary); line-height:1.55; margin:0;}
.mkt-dom{display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--accent-text);
  text-decoration:none; font-variant-numeric:tabular-nums; margin-top:2px;}
a.mkt-dom:hover{text-decoration:underline;}
.mkt-dom--muted{color:var(--fg-muted);}

/* --- sites of the day (carousel: chevrons BUITEN de tile bladeren door SHOWCASE) --- */
.mkt-sotd-head{text-align:center;}
.mkt-sotd-wrap{position:relative; max-width:820px; margin:clamp(28px,5vh,44px) auto 0;}
.mkt-bigpane{margin:0;}
.mkt-sotd-inner{will-change:opacity,transform;}
.mkt-shot{display:block; background:var(--charcoal-bg); line-height:0;}
.mkt-shot img{width:100%; height:auto; display:block; aspect-ratio:1440/666; object-fit:cover; object-position:center;}
.mkt-chev{position:absolute; top:50%; transform:translateY(-50%); z-index:2;
  width:44px; height:44px; border-radius:var(--radius-full); border:1px solid var(--border);
  background:rgba(255,255,255,.94); color:var(--fg); display:inline-flex; align-items:center;
  justify-content:center; cursor:pointer; box-shadow:var(--e2); padding:0;
  transition:background var(--dur-micro) var(--ease-out), box-shadow var(--dur-micro) var(--ease-out);}
.mkt-chev:hover{background:#FFFFFF; box-shadow:var(--e3);}
.mkt-chev:active{transform:translateY(-50%) scale(.95);}
.mkt-chev:focus-visible{outline:none; box-shadow:var(--ring);}
.mkt-chev--l{left:-66px;} .mkt-chev--r{right:-66px;}
.mkt-chev svg{width:16px; height:16px;}
/* geen ruimte naast de tile (smallere schermen): chevrons over de screenshot-randen */
@media (max-width:1000px){ .mkt-chev--l{left:10px;} .mkt-chev--r{right:10px;} }
/* [David 2026-07-19 r3] de balk onder de shot heeft op ELK viewport en ELKE slide dezelfde hoogte:
   de why-regel is ALTIJD een regel (ellipsis) en mag nooit wrappen -- een langere zin maakte de hele
   safari-tile hoger dan de vorige slide (designfout). See more verhuisde naar onder de sectie. */
.mkt-sotd-bar{display:flex; align-items:center; gap:14px; padding:14px 18px; flex-wrap:nowrap;
  background:var(--surface); border-top:1px solid var(--border-subtle);}
.mkt-why{font-size:14.5px; color:var(--fg-secondary); flex:1 1 auto; min-width:0;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.mkt-grow{flex:1;}
.mkt-sotd-more{display:flex; justify-content:center; margin-top:clamp(18px,3vh,28px);}
/* [David 2026-07-19 r4b] See more sites: kleurloos met alleen een premium rand -- de stille,
   dure deur naar de showcase. Hover: rand wint aan inkt, tekst blijft. */
.mkt-btn--ghost{background:transparent; color:var(--fg); border:1px solid var(--border-strong);
  transition:border-color var(--dur-std) var(--ease-out), background var(--dur-std);}
.mkt-btn--ghost:hover{background:color-mix(in srgb, var(--fg) 4%, transparent); border-color:var(--fg);}
/* [David 2026-07-19 r4b] telefoon: caption en knop NIET meer in een rij (de knop brak in twee
   regels) -- gestapeld: caption op eigen regel (1 regel, ellipsis), knop volle breedte eronder. */
@media (max-width:700px){
  .mkt-sotd-bar{flex-direction:column; align-items:stretch; gap:10px; padding:12px 14px;}
  .mkt-why{text-align:center;}
  .mkt-sotd-bar .mkt-btn{width:100%;}
}

/* --- story of the week --- */
.mkt-week-card{max-width:920px; margin:clamp(24px,4vh,40px) auto 0; display:grid; grid-template-columns:1.05fr 1fr;
  background:var(--surface); border:1px solid var(--paper-pane-border); border-radius:var(--radius-xl);
  overflow:hidden; box-shadow:var(--e3);}
.mkt-week-card img{width:100%; height:100%; object-fit:cover; display:block; min-height:240px;}
.mkt-week-body{padding:clamp(24px,4vw,40px); display:flex; flex-direction:column; justify-content:center;}
.mkt-eyebrow{font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-muted); margin:0 0 4px;}
.mkt-week-body h3{font-family:var(--font-display); font-weight:700; font-size:clamp(22px,2.8vw,30px); letter-spacing:-.02em;
  line-height:1.15; letter-spacing:-.01em; color:var(--fg); margin:10px 0 10px; text-wrap:balance;}
.mkt-week-body p{font-size:14.5px; color:var(--fg-secondary); line-height:1.6; margin:0 0 20px; max-width:44ch;}
.mkt-week-cta{display:flex; align-items:center; gap:14px; flex-wrap:wrap;}

/* --- straight answers (FAQ) --- */
.mkt-ans{display:grid; grid-template-columns:5fr 7fr; gap:clamp(28px,5vw,56px); align-items:start;}
.mkt-ans-head .mkt-sub{max-width:30ch;}
.mkt-faq{border-top:1px solid var(--border);}
.mkt-faq details{border-bottom:1px solid var(--border);}
.mkt-faq summary{display:flex; align-items:baseline; gap:14px; padding:16px 2px; cursor:pointer;
  font-size:15.5px; font-weight:500; color:var(--fg); list-style:none;}
.mkt-faq summary::-webkit-details-marker{display:none;}
.mkt-faq summary::after{content:"+"; margin-left:auto; color:var(--fg-muted); font-weight:400;
  font-size:17px; line-height:1; transition:transform var(--dur-micro) var(--ease-out);}
.mkt-faq details[open] summary::after{content:"\00d7";}
.mkt-faq summary:hover{color:var(--ink-hover);}
.mkt-faq summary:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs);}
.mkt-faq .mkt-a{font-size:14px; color:var(--fg-secondary); line-height:1.6; margin:0; padding:0 2px 18px; max-width:58ch;}
.mkt-faq .mkt-a b{color:var(--fg); font-weight:500;}

/* --- footer-uitbreiding (alleen op de home zichtbaar) --- */
.foot-cols{display:none;}
body.has-mkt .site-foot{flex-direction:column; align-items:center; gap:18px;
  border-top:1px solid var(--border-subtle); padding-top:var(--space-7); margin-top:var(--space-7);}
body.has-mkt .foot-cols{display:grid; grid-template-columns:1.5fr 1fr 1fr 1fr; gap:28px;
  width:100%; max-width:880px; padding:0 clamp(20px,5vw,40px);}
.foot-cols h5{font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-muted);
  margin:0 0 8px; font-weight:500;}
.foot-cols a{display:flex; align-items:center; color:var(--fg-secondary); font-size:13.5px;
  text-decoration:none; min-height:32px;}
.foot-cols a:hover{color:var(--fg);}
.foot-brand{display:flex; align-items:center; gap:10px;}
.foot-brand .brand-mark{width:24px; height:24px;}
.foot-brand-name{font-weight:600; letter-spacing:-.02em; font-size:15px; color:var(--fg);}
.foot-brand-name .slash{color:var(--accent);}
.foot-brand-line{font-size:13px; color:var(--fg-muted); margin:8px 0 0; max-width:24ch;}
/* Guide index in the real footer. Same Geist, ink and column rhythm as .foot-cols.
   Shown on the marketing home with the rest of that footer, in normal flow.
   The links stay real anchors. There is no second, hidden copy for crawlers. */
.foot-guides{display:none;}
body.has-mkt .foot-guides{display:block; width:100%; max-width:880px;
  padding:6px clamp(20px,5vw,40px) 0; border-top:1px solid var(--border-subtle);}
.foot-guides__intro{margin:16px 0 14px; max-width:62ch; font:400 13px/1.5 var(--font-sans); color:var(--fg-muted);}
.foot-guides__grid{display:grid; grid-template-columns:1.7fr 1fr 1fr; gap:28px;}
.foot-guides h2{font:500 11px/1.2 var(--font-sans); letter-spacing:.1em; text-transform:uppercase;
  color:var(--fg-muted); margin:0 0 8px;}
.foot-guides a{display:flex; align-items:center; min-height:32px; color:var(--fg-secondary);
  font:400 13.5px/1.35 var(--font-sans); text-decoration:none;}
.foot-guides a:hover{color:var(--fg);}
.foot-guides a:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs);}
.foot-guides__tools{display:grid; grid-template-columns:1fr 1fr; grid-auto-flow:column;
  grid-template-rows:repeat(4, auto); column-gap:18px;}

/* --- de showcase-view (in de Living Pane; verbreed zodat twee sites naast elkaar staan) --- */
.is-showcase{--canvas-max:1100px;}
.sc-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px; margin:0 0 18px;}
@media (max-width:860px){ .sc-grid{grid-template-columns:1fr;} }
.sc-head{padding:6px 4px 0;}
.sc-h1{font-family:var(--font-display); font-weight:700; font-size:clamp(26px,4vw,34px); letter-spacing:-.022em;
  line-height:1.1; letter-spacing:-.01em; color:var(--fg); margin:0;}
.sc-sub{font-size:14.5px; color:var(--fg-secondary); margin:8px 0 0;}
.sc-tabs{display:flex; gap:20px; margin:22px 0 20px; border-bottom:1px solid var(--border); flex-wrap:wrap;}
.sc-tab{appearance:none; background:none; border:0; padding:0 2px 12px; font-size:14px;
  color:var(--fg-muted); cursor:pointer; position:relative; min-height:var(--control-h);}
.sc-tab.is-on{color:var(--fg);}
.sc-tab.is-on::after{content:""; position:absolute; left:0; right:0; bottom:-1px; height:2px; background:var(--ink);}
.sc-tab .sc-soon{font-size:10px; letter-spacing:.06em; text-transform:uppercase; color:var(--fg-muted); margin-left:5px;}
.sc-tab:focus-visible{outline:none; box-shadow:var(--ring); border-radius:var(--radius-xs);}
.sc-card{margin:0 0 22px;}
.sc-card .mkt-sotd-bar{padding:12px 16px;}
.sc-note{font-size:13.5px; color:var(--fg-muted); margin:4px 0 2px;}
.sc-note a{color:var(--accent-text); text-decoration:none;}
.sc-note a:hover{text-decoration:underline;}
.sc-grid.sc-grid--one{grid-template-columns:1fr; max-width:820px;}
.sc-badge{margin-top:28px;}
.sc-badge h2{font-family:var(--font-display); font-weight:600; letter-spacing:-.02em; font-size:22px; line-height:1.2; margin:0 0 8px;}
.sc-badge-row{display:flex; flex-wrap:wrap; gap:16px; align-items:center; margin:16px 0;}
.sc-swatch{background:var(--charcoal-bg); border-radius:var(--radius-lg); padding:16px 18px; display:inline-flex;}
.sc-badge pre{margin:0 0 14px; padding:12px 14px; background:var(--surface); border:1px solid var(--paper-pane-border);
  border-radius:var(--radius-md); font-family:var(--font-sans); font-size:13px; line-height:1.45;
  white-space:pre-wrap; word-break:break-word; color:var(--fg-secondary);}
.sc-kicker{font-size:12px; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:var(--fg-muted); margin:0 0 8px;}

/* --- mobiel --- */
@media (max-width:700px){
  .mkt-sec{padding:56px 20px;}
  .mkt-ed{grid-template-columns:1fr;}
  .mkt-story--small{flex-direction:column;}
  .mkt-story--small img{width:100%; height:auto; aspect-ratio:4/2.6;}
  .mkt-week-card{grid-template-columns:1fr;}
  .mkt-ans{grid-template-columns:1fr;}
  body.has-mkt .foot-cols{grid-template-columns:1fr 1fr; gap:22px;}
  body.has-mkt .foot-guides__grid{grid-template-columns:1fr 1fr; gap:22px;}
  .foot-guides nav[aria-label="By tool"]{grid-column:1 / -1;}
}

/* Email me this link (later-*) and the dashboard AI-code phone screen (aicode-*).
   The mobile command hide is .s3c--dash only, so the funnel AI screen keeps its command. */
.later{position:relative; margin-top:14px; padding-top:14px; border-top:1px solid var(--border-subtle);}
.later--flush{margin-top:0; padding-top:0; border-top:0;}
.later__t{font:600 var(--text-md)/1.3 var(--font-sans); color:var(--fg); margin:0 0 2px;}
.later__s{font-size:var(--text-sm); line-height:1.45; color:var(--fg-secondary); margin:0 0 10px;}
.later-row{display:flex; gap:8px; align-items:stretch;}
.later-row input{flex:1; min-width:0; height:var(--control-h); border:1px solid var(--border); border-radius:10px; background:var(--surface);
  font:400 var(--text-md) var(--font-sans); color:var(--fg); padding:0 12px;}
.later-row input::placeholder{color:var(--fg-muted);}
.later-row .btn{white-space:nowrap;}
.later-fine{font-size:12.5px; line-height:1.4; color:var(--fg-muted); margin:8px 2px 0;}
.later-err{font-size:12.5px; line-height:1.4; color:var(--danger); margin:8px 2px 0;}
.later-hp{position:absolute; left:-9999px; width:1px; height:1px; opacity:0;}
.later-sent{display:flex; gap:10px; align-items:flex-start; background:var(--accent-tint); border-radius:10px; padding:10px 12px; margin-top:2px;}
.later-sent .ic{width:18px; height:18px; flex:0 0 18px; color:var(--accent-text); margin-top:1px; display:inline-flex;}
.later-sent .ic svg{width:18px; height:18px;}
.later-sent p{margin:0; font-size:var(--text-sm); line-height:1.45; color:var(--fg);}
.later-sent p span{display:block; color:var(--fg-secondary); font-size:12.5px; margin-top:2px;}
.aicode-expiry{display:flex; gap:8px; align-items:center; font-size:var(--text-sm); color:var(--fg-secondary); margin:10px 2px 4px;}
.aicode-expiry svg{width:16px; height:16px; flex:0 0 16px; color:var(--fg-muted);}
.aicode-expiry b{color:var(--fg); font-weight:600;}
.aicode-code{display:none;}
.aicode-phone{display:none; margin-top:12px; background:var(--bg-sunken); border-radius:12px; padding:14px;}
.aicode-phone__t{display:flex; gap:8px; align-items:center; font:600 var(--text-md)/1.3 var(--font-sans); color:var(--fg); margin:0 0 4px;}
.aicode-phone__t svg{width:17px; height:17px;}
.aicode-phone__s{font-size:var(--text-sm); line-height:1.45; color:var(--fg-secondary); margin:0 0 12px;}
.aicode-phone .own-acts{display:flex; flex-wrap:wrap; gap:8px;}
.aicode-prompt{margin-top:12px; background:var(--surface); border:1px solid var(--border-subtle); border-radius:10px; padding:10px 12px;
  font-size:12.5px; line-height:1.5; color:var(--fg-secondary);}
.aicode-prompt b{display:block; font-size:11px; letter-spacing:.04em; text-transform:uppercase; color:var(--fg-muted); margin-bottom:4px; font-weight:600;}
.aicode-desk{font-size:var(--text-sm); color:var(--fg-secondary); margin:6px 2px 0;}
.aicode-desk .link{font-size:inherit;}
.aicode-code[aria-disabled="true"] .aicode-code__val,
.s3c--dash .code-block[aria-disabled="true"] .code-block__cmd{text-decoration:line-through; color:var(--fg-muted);}
@media (max-width:600px){
  .later-row{flex-direction:column;}
  .later-row input{flex:none; height:var(--control-h);}
  .later-row .btn{width:100%;}
  .aicode-code{display:flex; align-items:center; justify-content:space-between; gap:10px; margin:4px 0 2px; background:var(--bg-sunken);
    border-radius:12px; padding:12px 14px;}
  .aicode-code__lbl{font-size:12.5px; color:var(--fg-muted);}
  .aicode-code__val{font:600 22px/1.1 var(--font-sans); letter-spacing:.06em; color:var(--fg);}
  .aicode-phone{display:block;}
  .aicode-phone .own-acts{flex-direction:column;}
  .aicode-phone .own-acts .btn{width:100%;}
  .aicode-desk{display:none;}
  .s3c--dash .code-block{display:none;}
}