/* Edits4All website. House style (web/../branding/BRAND.md): violet #7C3AED, lime #C6FF3D, pink #EC4899, ink #15121D,
   cloud #F7F5FB; Bricolage Grotesque for headings, Plus Jakarta Sans for text. Never lime text on white; text on lime
   is ink. The violet > magenta > pink gradient only on big main buttons. */

@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-opsz-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/assets/fonts/bricolage-grotesque-latin-ext-opsz-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-wght-normal.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Plus Jakarta Sans'; font-style: normal; font-weight: 200 800; font-display: swap;
  src: url(/assets/fonts/plus-jakarta-sans-latin-ext-wght-normal.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

:root {
  --violet: #7C3AED; --violet-700: #6D28D9; --violet-400: #A78BFA; --violet-100: #EDE5FD; --violet-50: #F5F0FF;
  --lime: #C6FF3D; --pink: #EC4899; --magenta: #C026D3;
  --ink: #15121D; --ink-950: #0B0A10; --ink-900: #0E0C14; --ink-800: #17141F; --ink-700: #221E2B; --ink-600: #2A2634;
  --cloud: #F7F5FB; --white: #FFFFFF;
  --text: #15121D; --muted: #5E5A6E; --faint: #8A85A0; --line: #E4E0EE; --chip: #EFEBF8;
  --on-dark: #F4F2FA; --on-dark-muted: #B9B4CA; --on-dark-line: rgba(255, 255, 255, .1);
  --good: #15803D; --bad: #C81E4B;
  --grad: linear-gradient(100deg, #7C3AED 0%, #C026D3 55%, #EC4899 100%);
  --display: 'Bricolage Grotesque', 'Avenir Next', 'Segoe UI', system-ui, sans-serif;
  --sans: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  --mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --r-xl: 32px; --r-l: 24px; --r-m: 16px; --r-s: 12px;
  --shadow-1: 0 1px 2px rgba(21, 18, 29, .05), 0 8px 24px rgba(21, 18, 29, .06);
  --shadow-2: 0 2px 6px rgba(21, 18, 29, .06), 0 30px 70px -20px rgba(21, 18, 29, .22);
  --hdr-h: 68px;
  --gutter: max(16px, env(safe-area-inset-left, 0px));
  --ease: cubic-bezier(.2, .8, .2, 1);
  --spring: cubic-bezier(.34, 1.56, .64, 1);
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--hdr-h) + 12px); }
body { margin: 0; background: var(--cloud); color: var(--text); font: 400 17px/1.6 var(--sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; }
body.menu-open { overflow: hidden; }
/* the tilted marquee band is wider than the screen on purpose: cut it off here, so phones never get a sideways scroll */
main { overflow-x: hidden; }
@supports (overflow: clip) { main { overflow-x: clip; } }
img, svg, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 800; letter-spacing: -0.03em; line-height: 1.04; margin: 0; text-wrap: balance; overflow-wrap: break-word; }
p { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
:focus-visible { outline: 3px solid var(--pink); outline-offset: 3px; border-radius: 8px; }
::selection { background: var(--lime); color: var(--ink); }
main { display: block; outline: none; }
[hidden] { display: none !important; }
.wrap { width: 100%; max-width: 1200px; margin-inline: auto; padding-inline: var(--gutter); }
.sr { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.skip { position: fixed; left: 12px; top: -60px; z-index: 100; background: var(--ink); color: #fff; padding: 10px 16px; border-radius: 12px; font-weight: 700; text-decoration: none; transition: top .2s; }
.skip:focus { top: 12px; }
.ic { width: 1.15em; height: 1.15em; flex: none; }
.muted { color: var(--muted); }
.small { font-size: 14.5px; }

/* highlight from *text* in the texts: a lime marker on light, lime letters on dark */
.hl { font-style: normal; background: linear-gradient(transparent 60%, var(--lime) 60% 90%, transparent 90%); padding-inline: .04em; -webkit-box-decoration-break: clone; box-decoration-break: clone; }
.dark .hl, .sellers .hl, .cta .hl { background: none; color: var(--lime); padding: 0; }

/* ---------- buttons ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 50px; padding: 0 24px; border: 0; border-radius: 999px; font: 700 16px/1 var(--sans); letter-spacing: -.005em; text-decoration: none; cursor: pointer; white-space: nowrap; transition: transform .25s var(--spring), box-shadow .25s var(--ease), background-color .2s, color .2s, opacity .2s; -webkit-tap-highlight-color: transparent; }
.btn:active { transform: scale(.97); }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .45; cursor: not-allowed; transform: none; box-shadow: none; }
.btn-grad { background: var(--grad); color: #fff; box-shadow: 0 10px 26px -10px rgba(192, 38, 211, .65); background-size: 140% 100%; background-position: 0 0; }
.btn-grad:hover:not([disabled]) { transform: translateY(-2px); box-shadow: 0 16px 34px -12px rgba(192, 38, 211, .75); background-position: 100% 0; }
.btn-violet { background: var(--violet); color: #fff; }
.btn-violet:hover:not([disabled]) { background: var(--violet-700); transform: translateY(-1px); }
.btn-ink { background: var(--ink); color: #fff; }
.btn-ink:hover:not([disabled]) { background: #000; transform: translateY(-1px); }
.btn-lime { background: var(--lime); color: var(--ink); }
.btn-lime:hover:not([disabled]) { transform: translateY(-1px); box-shadow: 0 10px 24px -10px rgba(198, 255, 61, .8); }
.btn-ghost { background: transparent; color: inherit; box-shadow: inset 0 0 0 1.5px var(--line); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.btn-danger { background: var(--bad); color: #fff; }
.btn-danger-ghost { background: transparent; color: var(--bad); box-shadow: inset 0 0 0 1.5px rgba(200, 30, 75, .35); }
.btn-danger-ghost:hover { box-shadow: inset 0 0 0 1.5px var(--bad); }
.btn-sm { height: 40px; padding: 0 16px; font-size: 14.5px; }
.btn-lg { height: 56px; padding: 0 28px; font-size: 17px; }
.btn-block { width: 100%; }
.btn .ic { width: 18px; height: 18px; }
.link { background: none; border: 0; padding: 0; color: var(--violet); font: 700 15px/1.4 var(--sans); cursor: pointer; text-decoration: underline; text-decoration-thickness: 1.5px; text-underline-offset: 3px; text-decoration-color: rgba(124, 58, 237, .35); }
.link:hover { text-decoration-color: currentColor; }
.link[disabled] { color: var(--faint); cursor: default; text-decoration: none; }

/* App Store / Google Play buttons */
.stores { display: flex; flex-wrap: wrap; gap: 12px; }
.store { position: relative; display: inline-flex; align-items: center; gap: 10px; height: 54px; padding: 0 18px 0 14px; border-radius: 13px; background: #000; color: #fff; text-decoration: none; box-shadow: inset 0 0 0 1px #A6A6A6; transition: transform .25s var(--spring), box-shadow .2s; -webkit-tap-highlight-color: transparent; }
.store:hover { transform: translateY(-2px); box-shadow: inset 0 0 0 1px #A6A6A6, 0 16px 30px -14px rgba(21, 18, 29, .7); }
.store-logo { width: 26px; height: 26px; }
.store-android .store-logo { width: 23px; height: 23px; }
.store-txt { display: flex; flex-direction: column; line-height: 1.02; }
.store-txt small { font: 500 11px/1.1 var(--sans); letter-spacing: .01em; opacity: .92; }
.store-android .store-txt small { text-transform: uppercase; font-size: 10px; letter-spacing: .04em; }
.store-txt b { font: 600 20px/1.08 -apple-system, 'SF Pro Display', var(--sans); letter-spacing: -.02em; }
.store-soon { position: absolute; top: -10px; right: -10px; padding: 5px 8px 4px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 800 11px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; rotate: 7deg; box-shadow: 0 6px 14px -6px rgba(0, 0, 0, .5); pointer-events: none; }
.stores-lg .store { height: 60px; padding: 0 22px 0 16px; border-radius: 15px; }
.stores-lg .store-logo { width: 30px; height: 30px; }
.stores-lg .store-android .store-logo { width: 26px; height: 26px; }
.stores-lg .store-txt b { font-size: 22px; }
@media (max-width: 520px) {
  .stores-lg { gap: 10px; }
  .stores-lg .store { height: 54px; padding: 0 14px 0 12px; border-radius: 13px; gap: 8px; }
  .stores-lg .store-logo { width: 25px; height: 25px; }
  .stores-lg .store-android .store-logo { width: 22px; height: 22px; }
  .stores-lg .store-txt b { font-size: 19px; }
  .stores-lg .store-txt small { font-size: 10px; }
  .stores-lg .store-android .store-txt small { font-size: 9px; }
}
@media (max-width: 374px) {
  .stores-lg .store { padding: 0 11px 0 10px; }
  .stores-lg .store-txt b { font-size: 17px; }
}
.stores-sm .store { height: 44px; padding: 0 14px 0 11px; border-radius: 11px; gap: 8px; }
.stores-sm .store-logo { width: 21px; height: 21px; }
.stores-sm .store-android .store-logo { width: 19px; height: 19px; }
.stores-sm .store-txt small { font-size: 9.5px; }
.stores-sm .store-txt b { font-size: 16.5px; }
.stores-sm .store-soon { top: -8px; right: -8px; font-size: 10px; padding: 4px 6px 3px; }
.is-ios .store-android, .is-android .store-ios { opacity: .62; }
.is-ios .store-android:hover, .is-android .store-ios:hover { opacity: 1; }

/* QR code (only on computers: on a phone you tap the store button) */
.qr { display: none; align-items: center; gap: 14px; padding: 10px 20px 10px 10px; border-radius: 20px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(21, 18, 29, .05), 0 22px 44px -24px rgba(76, 29, 149, .45); max-width: 310px; }
.qr-code { position: relative; flex: none; width: 96px; height: 96px; padding: 7px; border-radius: 14px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.qr-code > svg { width: 100%; height: 100%; shape-rendering: crispEdges; }
.qr-logo { position: absolute; left: 50%; top: 50%; width: 22px; height: 22px; padding: 2px; translate: -50% -50%; border-radius: 7px; background: #fff; }
.qr-logo svg { width: 100%; height: 100%; }
.qr-txt { display: grid; gap: 3px; font-size: 14px; line-height: 1.35; color: var(--muted); }
.qr-txt b { color: var(--ink); font: 800 17px/1.15 var(--display); letter-spacing: -.01em; }
@media (min-width: 960px) and (hover: hover) { .qr { display: flex; } }

/* small rounded label */
.pill { display: inline-flex; align-items: center; gap: 8px; padding: 8px 15px 8px 11px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), 0 1px 2px rgba(21, 18, 29, .05), 0 8px 20px -12px rgba(76, 29, 149, .35); color: var(--ink); font: 700 13.5px/1 var(--sans); letter-spacing: .01em; }
.pill .ic { color: var(--violet); width: 16px; height: 16px; }
.eyebrow { display: inline-flex; align-items: center; gap: 10px; margin-bottom: 18px; color: var(--violet); font: 800 13px/1 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.eyebrow::before { content: ""; width: 22px; height: 6px; border-radius: 99px; background: linear-gradient(90deg, var(--violet) 0 62%, transparent 62% 74%, var(--violet) 74%); }
.lead { font-size: clamp(17.5px, 1.6vw, 20px); line-height: 1.55; color: var(--muted); max-width: 40em; }

/* ---------- header ---------- */
.hdr { position: sticky; top: 0; z-index: 60; height: var(--hdr-h); transition: background-color .3s, box-shadow .3s, backdrop-filter .3s; }
.home .hdr { position: fixed; left: 0; right: 0; }
.hdr-row { height: 100%; display: flex; align-items: center; gap: 18px; }
.hdr-logo { display: block; flex: none; margin-right: auto; border-radius: 10px; }
.hdr-logo .lockup { height: 34px; width: auto; }
.hdr-nav { display: flex; align-items: center; gap: 4px; margin-right: auto; }
.hdr-nav a { padding: 9px 13px; border-radius: 999px; font: 600 15px/1 var(--sans); text-decoration: none; transition: background-color .2s, color .2s; }
.hdr-actions { display: flex; align-items: center; gap: 10px; }
.hdr-login { display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; border-radius: 999px; font: 700 15px/1 var(--sans); text-decoration: none; transition: background-color .2s; }
.hdr-login .ic { width: 18px; height: 18px; }
.hdr-burger { display: none; width: 44px; height: 44px; border: 0; border-radius: 999px; background: transparent; cursor: pointer; place-items: center; }
.hdr-burger .ic { width: 24px; height: 24px; }
.hdr-burger .burger-close, .hdr-burger[aria-expanded="true"] .burger-open { display: none; }
.hdr-burger[aria-expanded="true"] .burger-close { display: block; }
.hdr-dark { color: var(--on-dark); }
.hdr-dark .hdr-nav a, .hdr-dark .hdr-login { color: var(--on-dark-muted); }
.hdr-dark .hdr-nav a:hover, .hdr-dark .hdr-login:hover { color: #fff; background: rgba(255, 255, 255, .08); }
.hdr-dark.is-scrolled, .menu-open .hdr-dark { background: rgba(14, 12, 20, .78); -webkit-backdrop-filter: blur(18px) saturate(1.5); backdrop-filter: blur(18px) saturate(1.5); box-shadow: 0 1px 0 rgba(255, 255, 255, .06); }
.hdr-light { color: var(--text); background: rgba(247, 245, 251, .82); -webkit-backdrop-filter: blur(18px) saturate(1.6); backdrop-filter: blur(18px) saturate(1.6); }
.hdr-light.is-scrolled { box-shadow: 0 1px 0 var(--line); }
body.home:not(.menu-open) .hdr-light:not(.is-scrolled) { background: transparent; -webkit-backdrop-filter: none; backdrop-filter: none; }
.hdr-light .hdr-nav a, .hdr-light .hdr-login { color: var(--muted); }
.hdr-light .hdr-nav a:hover, .hdr-light .hdr-login:hover { color: var(--text); background: var(--chip); }
/* over the violet top of the homepage (until you scroll): light text, the white logo and a lime button */
.hdr-logo .lockup-over { display: none; }
body.home:not(.menu-open) .hdr-light:not(.is-scrolled) { color: #fff; }
body.home:not(.menu-open) .hdr-light:not(.is-scrolled) .lockup:not(.lockup-over) { display: none; }
body.home:not(.menu-open) .hdr-light:not(.is-scrolled) .lockup-over { display: block; }
body.home:not(.menu-open) .hdr-light:not(.is-scrolled) .hdr-nav a, body.home:not(.menu-open) .hdr-light:not(.is-scrolled) .hdr-login, body.home:not(.menu-open) .hdr-light:not(.is-scrolled) .lang summary { color: rgba(255, 255, 255, .86); }
body.home:not(.menu-open) .hdr-light:not(.is-scrolled) .hdr-nav a:hover, body.home:not(.menu-open) .hdr-light:not(.is-scrolled) .hdr-login:hover, body.home:not(.menu-open) .hdr-light:not(.is-scrolled) .lang summary:hover, body.home:not(.menu-open) .hdr-light:not(.is-scrolled) .lang[open] summary { color: #fff; background: rgba(255, 255, 255, .14); }
body.home:not(.menu-open) .hdr-light:not(.is-scrolled) .hdr-cta { background: var(--lime); color: var(--ink); }

/* language menu */
.lang { position: relative; }
.lang summary { display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px 0 11px; border-radius: 999px; font: 700 14px/1 var(--sans); cursor: pointer; list-style: none; user-select: none; transition: background-color .2s; }
.lang summary::-webkit-details-marker { display: none; }
.lang summary .ic { width: 17px; height: 17px; }
.lang summary .chev { width: 14px; height: 14px; transition: rotate .2s; }
.lang[open] summary .chev { rotate: 180deg; }
.hdr-dark .lang summary { color: var(--on-dark-muted); }
.hdr-dark .lang summary:hover, .hdr-dark .lang[open] summary { color: #fff; background: rgba(255, 255, 255, .08); }
.hdr-light .lang summary { color: var(--muted); }
.hdr-light .lang summary:hover, .hdr-light .lang[open] summary { color: var(--text); background: var(--chip); }
.lang ul { position: absolute; right: 0; top: calc(100% + 8px); min-width: 200px; padding: 6px; border-radius: 18px; background: #fff; color: var(--text); box-shadow: var(--shadow-2), 0 0 0 1px rgba(21, 18, 29, .06); animation: pop .18s var(--ease); }
.lang li a { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; font: 600 15px/1.2 var(--sans); text-decoration: none; }
.lang li a:hover { background: var(--cloud); }
.lang li a[aria-current] { font-weight: 800; }
.lang-code { display: inline-grid; place-items: center; width: 30px; height: 22px; border-radius: 7px; background: var(--chip); font: 800 11px/1 var(--sans); letter-spacing: .04em; }
.lang li a[aria-current] .lang-code { background: var(--violet); color: #fff; }
.lang-tick { margin-left: auto; width: 16px; height: 16px; color: var(--violet); }

/* menu on phones */
.menu { position: fixed; inset: var(--hdr-h) 0 0; z-index: 59; overflow: auto; background: rgba(14, 12, 20, .97); -webkit-backdrop-filter: blur(18px); backdrop-filter: blur(18px); color: var(--on-dark); animation: fade .2s var(--ease); }
.hdr-light + .menu { background: rgba(247, 245, 251, .98); color: var(--text); }
.menu-nav { display: grid; gap: 4px; padding-top: 18px; padding-bottom: 40px; }
.menu-nav > a:not(.btn) { padding: 12px 4px; font: 800 30px/1.1 var(--display); letter-spacing: -.02em; text-decoration: none; border-bottom: 1px solid var(--on-dark-line); }
.hdr-light + .menu .menu-nav > a:not(.btn) { border-color: var(--line); }
.menu-langs { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 14px; }
.menu-langs a { padding: 10px 14px; border-radius: 999px; font: 700 15px/1 var(--sans); text-decoration: none; box-shadow: inset 0 0 0 1.5px var(--on-dark-line); }
.hdr-light + .menu .menu-langs a { box-shadow: inset 0 0 0 1.5px var(--line); }
.menu-langs a[aria-current] { background: var(--lime); color: var(--ink); box-shadow: none; }

@media (max-width: 1020px) {
  .hdr-nav { display: none; }
  .hdr-burger { display: grid; }
}
@media (max-width: 720px) {
  .hdr-lang, .hdr-login { display: none; }
  .hdr-logo .lockup { height: 30px; }
  .hdr-cta { height: 38px; padding: 0 14px; font-size: 14px; }
}
@media (max-width: 380px) { .hdr-cta { display: none; } }

/* ---------- hero ---------- */
/* in colour (round 3: "het is allemaal wit"): the brand violet, with lighter violet, magenta and pink light like the
   download block at the bottom. Bright, never black. Plain gradients only: nothing blurred or blended, so it stays smooth. */
/* The bottom edge of the hero runs parallel to the lime band below it (-1.6deg: tan = 0.027933, so it climbs 2.7933vw
   over the width) and stays hidden behind it at every screen width. A straight edge left a white gap at the far left
   on wide screens (Mathijs, 27-inch monitor, 3 Nov 2026). Keep this and the band's angle and origin together. */
.hero { position: relative; isolation: isolate; overflow: hidden; color: #fff; padding: calc(var(--hdr-h) + clamp(28px, 6vw, 76px)) 0 clamp(84px, 9vw, 130px);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 2.7933vw), 0 100%);
  background:
    radial-gradient(46% 58% at 80% 44%, rgba(196, 168, 255, .62), rgba(196, 168, 255, 0) 70%),
    radial-gradient(34% 46% at 100% 100%, rgba(236, 72, 153, .62), rgba(236, 72, 153, 0) 72%),
    radial-gradient(40% 52% at 0% 100%, rgba(192, 38, 211, .55), rgba(192, 38, 211, 0) 72%),
    radial-gradient(36% 44% at 4% 0%, rgba(162, 110, 255, .9), rgba(162, 110, 255, 0) 70%),
    linear-gradient(165deg, #8F55F7 0%, #7C3AED 48%, #6E2CE3 100%); }
@media (max-width: 1019px) {
  .hero { background:
    radial-gradient(90% 34% at 50% 78%, rgba(196, 168, 255, .62), rgba(196, 168, 255, 0) 72%),
    radial-gradient(70% 22% at 100% 100%, rgba(236, 72, 153, .6), rgba(236, 72, 153, 0) 72%),
    radial-gradient(70% 22% at 0% 96%, rgba(192, 38, 211, .5), rgba(192, 38, 211, 0) 72%),
    radial-gradient(80% 26% at 0% 0%, rgba(162, 110, 255, .9), rgba(162, 110, 255, 0) 72%),
    linear-gradient(170deg, #8F55F7 0%, #7C3AED 52%, #6E2CE3 100%); }
}
.hero-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero-dots { position: absolute; inset: 0; background: radial-gradient(circle, rgba(255, 255, 255, .26) 1.1px, transparent 1.7px) 0 0 / 24px 24px; -webkit-mask: radial-gradient(46% 60% at 79% 44%, #000, transparent 80%); mask: radial-gradient(46% 60% at 79% 44%, #000, transparent 80%); }
@media (max-width: 1019px) { .hero-dots { -webkit-mask: radial-gradient(70% 30% at 50% 78%, #000, transparent 80%); mask: radial-gradient(70% 30% at 50% 78%, #000, transparent 80%); } }
.hero-row { display: grid; gap: clamp(40px, 6vw, 56px); align-items: center; }
@media (min-width: 1020px) { .hero-row { grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr); } }
.hero-copy { display: grid; justify-items: start; gap: 26px; }
.hero-title { font-size: clamp(52px, 10vw, 112px); line-height: .9; letter-spacing: -0.045em; font-weight: 800; color: #fff; }
.hero-line { display: block; }
/* "posten." with a lime marker behind it, drawn in like a highlighter */
.hero .hl { position: relative; z-index: 0; background: none; padding: 0; color: var(--ink); white-space: nowrap; }
.hero .hl::before { content: ""; position: absolute; z-index: -1; left: -.05em; right: -.04em; top: .4em; bottom: .02em; border-radius: .09em; background: var(--lime); rotate: -1.4deg; transform-origin: 0 50%; }
.js .hero .hl::before { animation: draw .8s .7s var(--ease) both; }
.hero-lead { max-width: 33em; font-size: clamp(18px, 1.7vw, 21px); line-height: 1.55; color: rgba(255, 255, 255, .88); }
.hero .pill { background: rgba(255, 255, 255, .14); color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .3); }
.hero .pill .ic { color: var(--lime); }
.hero .store { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 18px 34px -16px rgba(30, 6, 70, .7); }
.hero .qr { box-shadow: 0 24px 50px -22px rgba(30, 6, 70, .75); }
.hero-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 22px; }
.hero-trust { display: flex; flex-wrap: wrap; gap: 8px 20px; color: rgba(255, 255, 255, .9); font: 600 14.5px/1.3 var(--sans); }
.hero-trust li { display: inline-flex; align-items: center; gap: 7px; }
.hero-trust .ic { width: 17px; height: 17px; color: var(--lime); stroke-width: 2.6; }
.js [data-rise] { animation: rise .9s var(--ease) both; }
.js .hero-copy > [data-rise]:nth-child(1) { animation-delay: .05s; }
.js .hero-line:nth-child(1) { animation-delay: .12s; }
.js .hero-line:nth-child(2) { animation-delay: .22s; }
.js .hero-copy > [data-rise]:nth-child(3) { animation-delay: .34s; }
.js .hero-copy > [data-rise]:nth-child(4) { animation-delay: .44s; }
.js .hero-copy > [data-rise]:nth-child(5) { animation-delay: .54s; }

.hero-visual { --pw: 292px; position: relative; display: grid; place-items: center; min-height: 600px; }
@media (max-width: 520px) { .hero-visual { --pw: 236px; } }
.js .hero-visual { animation: rise 1.1s .3s var(--ease) both; }
.hero-clip { position: absolute; z-index: 0; left: -10%; right: -10%; top: 62%; height: clamp(26px, 3vw, 38px); rotate: -11deg; border-radius: 99px; background: linear-gradient(90deg, var(--lime) 0 44%, transparent 44% 56%, var(--lime) 56%); }
.float { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 8px; max-width: 12.6em; padding: 10px 15px 10px 12px; border-radius: 16px; background: #fff; color: var(--ink); font: 700 14.5px/1.2 var(--sans); box-shadow: inset 0 0 0 1px rgba(21, 18, 29, .06), 0 2px 4px rgba(21, 18, 29, .05), 0 18px 36px -14px rgba(76, 29, 149, .45); }
.float .ic { flex: none; width: 18px; height: 18px; color: var(--violet); }
.float .dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--ink); box-shadow: 0 0 0 4px rgba(21, 18, 29, .12); }
/* placed from the middle of the phone (--pw = its width) on the free parts of the screen: above the title card,
   between the title card and the bottle, next to the bottle and at the bottom, so the title, the subtitles and the
   stickers stay visible. They start at most at the edge of the column. */
.f-cut { left: max(0px, calc(50% - .84 * var(--pw))); top: calc(50% - .4 * var(--pw)); rotate: -5deg; }
.f-caps { left: max(0px, calc(50% - .86 * var(--pw))); top: calc(50% + .17 * var(--pw)); rotate: -3deg; background: var(--ink); color: #fff; box-shadow: 0 18px 36px -14px rgba(21, 18, 29, .6); }
.f-caps .ic { color: var(--lime); }
.f-silence { right: max(0px, calc(50% - .84 * var(--pw))); top: calc(50% + .07 * var(--pw)); rotate: 4deg; }
.f-ready { right: max(0px, calc(50% - .84 * var(--pw))); top: calc(50% + .78 * var(--pw)); rotate: -4deg; background: var(--lime); box-shadow: 0 18px 36px -14px rgba(76, 120, 0, .55); }
.js .float { animation: floatin .7s var(--spring) both, bob 6s ease-in-out infinite; }
.js .f-cut { animation-delay: 1.1s, 1.8s; }
.js .f-silence { animation-delay: 1.35s, 0s; }
.js .f-caps { animation-delay: 1.6s, 1s; }
.js .f-ready { animation-delay: 1.85s, 2.6s; }
@media (max-width: 1019px) { .hero-visual { min-height: 0; padding: 12px 0 8px; } }
@media (max-width: 520px) {
  .float { font-size: 12.5px; padding: 8px 11px 8px 9px; border-radius: 13px; }
  .float .ic { width: 15px; height: 15px; }
}
@media (max-width: 374px) { .float { font-size: 11.5px; gap: 6px; padding: 7px 9px 7px 8px; } }

/* the phone: drawn like an iPhone 18 Pro. Thin even black border, a black aluminium frame (Mathijs, 3 Nov 2026: black,
   not the red Burgundy), the buttons on both sides and the smaller Dynamic Island (about a third narrower than on the
   14 to 17 Pro). The frame keeps a soft grey sheen, so it still reads as metal on the violet. */
/* the phone leans a little towards the mouse (round 3): site.js turns this wrapper in 3D, only with a mouse, and takes
   the turn off again when the mouse rests. The labels around the phone are outside it, so they stay where they are. */
.phone-tilt { position: relative; z-index: 2; display: grid; place-items: center; }
.phone { --frame-hi: #75737E; --frame: #2B2A31; --frame-lo: #101013; position: relative; z-index: 2; width: var(--pw); aspect-ratio: 71.9 / 150; margin: 0; rotate: 2deg; }
.js .phone { animation: hover 8s ease-in-out infinite; }
.phone-body { position: absolute; inset: 0; border-radius: calc(var(--pw) * .17); background: linear-gradient(150deg, var(--frame-hi) 0%, var(--frame) 14%, var(--frame-lo) 44%, var(--frame) 72%, var(--frame-hi) 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .24), inset 0 0 0 2.5px rgba(10, 10, 13, .5), 0 2px 4px rgba(10, 10, 13, .25), 0 44px 80px -26px rgba(38, 6, 86, .72), 0 26px 48px -26px rgba(21, 18, 29, .75); }
.phone-body::before { content: ""; position: absolute; inset: calc(var(--pw) * .013); border-radius: calc(var(--pw) * .157); background: #040305; }
.phone-screen { position: absolute; inset: calc(var(--pw) * .032); overflow: hidden; isolation: isolate; border-radius: calc(var(--pw) * .138); background: #000; font-size: calc(var(--pw) * 17 / 292); } /* 17px on the big phone, smaller with it */
.phone-island { position: absolute; z-index: 8; left: 50%; top: calc(var(--pw) * .058); width: calc(var(--pw) * .197); height: calc(var(--pw) * .074); translate: -50% 0; border-radius: 99px; background: #000; }
.phone-island i { position: absolute; right: 14%; top: 50%; width: calc(var(--pw) * .03); aspect-ratio: 1; translate: 0 -50%; border-radius: 50%; background: radial-gradient(circle at 36% 34%, #3B4C80 0, #141C38 42%, #05070D 70%); }
.ph-btn { position: absolute; z-index: -1; width: calc(var(--pw) * .016); border-radius: 3px; background: linear-gradient(90deg, var(--frame-lo), var(--frame-hi) 55%, var(--frame-lo)); }
.ph-btn-action, .ph-btn-up, .ph-btn-down { left: calc(var(--pw) * -.009); }
.ph-btn-side, .ph-btn-cam { right: calc(var(--pw) * -.009); }
.ph-btn-action { top: 17%; height: 4.6%; }
.ph-btn-up { top: 24.6%; height: 7.6%; }
.ph-btn-down { top: 34%; height: 7.6%; }
.ph-btn-side { top: 27%; height: 12%; }
.ph-btn-cam { top: 55%; height: 7.4%; right: calc(var(--pw) * -.006); width: calc(var(--pw) * .012); background: linear-gradient(90deg, #12060A, #4A3740 50%, #12060A); }
.phone-video { width: 100%; height: 100%; object-fit: cover; }
.phone-glare { position: absolute; inset: 0; z-index: 7; pointer-events: none; background: linear-gradient(116deg, rgba(255, 255, 255, .17) 0%, rgba(255, 255, 255, .05) 24%, rgba(255, 255, 255, 0) 38%); }
.ph-status { position: absolute; z-index: 6; left: 0; right: 0; top: calc(var(--pw) * .065); translate: 0 -50%; display: flex; align-items: center; justify-content: space-between; padding: 0 5.5%; color: #fff; pointer-events: none; }
.ph-time { width: 31%; text-align: center; font: 600 calc(var(--pw) * .046)/1 -apple-system, 'SF Pro Text', var(--sans); letter-spacing: -.01em; }
.ph-icons { display: flex; align-items: center; justify-content: center; gap: calc(var(--pw) * .013); width: 31%; }
.ph-icons svg { width: auto; height: calc(var(--pw) * .032); fill: currentColor; }
.ph-icons .ph-batt { height: calc(var(--pw) * .036); }
.ph-home { position: absolute; z-index: 6; left: 50%; bottom: calc(var(--pw) * .02); width: 36%; height: calc(var(--pw) * .016); translate: -50% 0; border-radius: 99px; background: rgba(255, 255, 255, .92); }
.ph-bar { position: absolute; z-index: 5; left: 0; right: 0; bottom: calc(var(--pw) * .056); height: calc(var(--pw) * .009); background: rgba(255, 255, 255, .26); }
.ph-bar i { display: block; height: 100%; background: #fff; transform-origin: left; transform: scaleX(.38); }

/* the example short itself: site.js moves the camera between the shots in one smooth animation (data-shot is the fallback) */
.cam { position: absolute; inset: 0; transform-origin: 50% 60%; transition: transform 1.05s cubic-bezier(.7, 0, .2, 1); }
.cam[data-shot="1"] { transform: translateY(-2%) scale(1.55); }
.cam[data-shot="2"] { transform: translate(5%, 1%) scale(1.24) rotate(-2deg); }
.cam[data-shot="3"] { transform: translateY(-1.5%) scale(1.08); }
.cam .scn { position: absolute; inset: 0; width: auto; aspect-ratio: auto; }
.phone.is-paused *, .phone.is-paused *::before, .phone.is-paused *::after { animation-play-state: paused !important; }

/* the set (img/short-set.svg), the serum (img/serum.svg), glossy balls and sparkles; sizes in % of the set */
.scn { position: relative; overflow: hidden; aspect-ratio: 390 / 844; background: #3B1585; }
.scn-set { position: absolute; inset: 0; width: 100%; height: 100%; }
.scn-bottle { position: absolute; left: 50%; bottom: 26.6%; width: 33%; translate: -50% 0; }
.scn-bottle img { display: block; width: 100%; height: auto; }
.shine { display: none; }
.scn-live .shine { display: block; position: absolute; inset: 0; overflow: hidden; -webkit-mask: url(/assets/img/serum.svg) 0 0 / 100% 100% no-repeat; mask: url(/assets/img/serum.svg) 0 0 / 100% 100% no-repeat; }
.scn-live .shine::before { content: ""; position: absolute; top: -5%; bottom: -5%; left: -45%; width: 30%; background: linear-gradient(100deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, .75) 50%, rgba(255, 255, 255, 0)); transform: skewX(-14deg); }
.js .scn-live .shine::before { animation: shine 5.2s 1.4s ease-in-out infinite; }
.orb { position: absolute; aspect-ratio: 1; border-radius: 50%; }
.orb-1 { left: 11%; top: 41%; width: 16%; background: radial-gradient(circle at 32% 28%, #FFE3F2 0, #FF8CCB 18%, #EC4899 52%, #9D174D 100%); box-shadow: 0 10px 18px -8px rgba(20, 5, 50, .6); }
.orb-2 { left: 72%; top: 37%; width: 7%; background: radial-gradient(circle at 32% 28%, #FBFFE8 0, #DBFF80 24%, #A6E21E 66%, #5D8A05 100%); box-shadow: 0 8px 14px -6px rgba(20, 5, 50, .55); }
.orb-3 { left: 71%; top: 56%; width: 10.5%; background: radial-gradient(circle at 32% 28%, #FFFFFF 0, #F4ECFF 26%, #C9B6FB 70%, #8B5CF6 100%); box-shadow: 0 10px 16px -6px rgba(20, 5, 50, .55); }
.orb-4 { left: 8%; top: 61%; width: 6%; background: radial-gradient(circle at 32% 28%, #F1E9FF 0, #B69CFB 40%, #6D28D9 100%); }
.js .scn-live .orb { animation: orb 5.2s ease-in-out infinite; }
.js .scn-live .orb-2 { animation-duration: 4.2s; animation-delay: -1.4s; }
.js .scn-live .orb-3 { animation-duration: 6s; animation-delay: -2.6s; }
.js .scn-live .orb-4 { animation-duration: 4.8s; animation-delay: -.8s; }
.spark { position: absolute; width: 5%; fill: #fff; }
.spk-1 { left: 29%; top: 36%; }
.spk-2 { left: 64%; top: 31%; width: 3.6%; }
.spk-3 { left: 61%; top: 64%; width: 4%; }
.js .scn-live .spark { animation: twinkle 2.8s ease-in-out infinite; }
.js .scn-live .spk-2 { animation-delay: -1s; }
.js .scn-live .spk-3 { animation-delay: -1.9s; }

/* on top of the short: the title, the product card, the captions (the app's "strak" style: white, thin outline, the
   spoken word on a violet pill, key words lavender and a bit bigger) and the stickers */
.ph-hook { position: absolute; z-index: 4; left: 7%; right: 7%; top: 14.5%; display: flex; justify-content: center; }
.ph-hook span { display: block; max-width: 12.5em; padding: .5em .78em .58em; border-radius: .7em; background: #fff; color: var(--ink); font: 800 1.3em/1.08 var(--display); letter-spacing: -.02em; text-align: center; rotate: -2.5deg; box-shadow: 0 .32em 0 var(--lime), 0 1em 1.8em rgba(18, 5, 46, .45); }
.js .ph-hook { opacity: 0; transform: scale(.7) translateY(-8%); transition: opacity .3s, transform .5s var(--spring); }
.js .ph-hook.is-on { opacity: 1; transform: none; }
.pcard { display: flex; align-items: center; gap: .55em; padding: .42em .65em .42em .42em; border-radius: 1em; background: #fff; color: var(--ink); box-shadow: 0 1em 2em -1em rgba(18, 5, 46, .6); }
.pcard-img { display: grid; place-items: center; flex: none; width: 2.6em; height: 3.1em; border-radius: .65em; background: linear-gradient(160deg, #F5EEFF, #DDD0FE); overflow: hidden; }
.pcard-img img { width: 1.35em; height: auto; }
.pcard-txt { display: grid; gap: .2em; min-width: 0; }
.pcard-txt b { font: 800 1em/1.1 var(--display); letter-spacing: -.01em; white-space: nowrap; }
.pcard-txt small { display: inline-flex; align-items: center; gap: .18em; color: var(--violet); font: 700 .68em/1.15 var(--sans); text-wrap: balance; }
.pcard-txt small .ic { width: 1.1em; height: 1.1em; stroke-width: 3; }
.pcard-logo { flex: none; width: 1.45em; height: 1.45em; margin-left: .2em; }
.ph-pcard { position: absolute; z-index: 4; left: 50%; top: 15.5%; width: max-content; max-width: 90%; translate: -50% 0; }
.js .ph-pcard { opacity: 0; transform: translateY(-14%) scale(.86); transition: opacity .3s, transform .55s var(--spring); }
.js .ph-pcard.is-on { opacity: 1; transform: none; }
.ph-caps { position: absolute; z-index: 4; left: 5%; right: 5%; bottom: 19%; display: grid; place-items: center; min-height: 3em; }
.cap { grid-area: 1 / 1; text-align: center; color: #fff; font: 800 1.4em/1.25 var(--sans); letter-spacing: -.005em; -webkit-text-stroke: .13em rgba(17, 12, 30, .92); paint-order: stroke fill; text-shadow: 0 .1em .35em rgba(18, 5, 46, .5); opacity: 0; }
.no-js .cap:nth-child(2), .cap.is-on { opacity: 1; }
.cap .w { display: inline-block; border-radius: .18em; transition: transform .2s var(--spring), background-color .1s, box-shadow .1s; }
.cap .kw { color: #C4A8FF; font-size: 1.1em; }
.cap .w.is-now { transform: scale(1.08); background: var(--violet); box-shadow: 0 0 0 .13em var(--violet); }
.ph-st { position: absolute; z-index: 5; display: grid; place-items: center; border-radius: 50%; opacity: 0; transform: scale(.3) rotate(-25deg); transition: opacity .2s, transform .5s var(--spring); }
.ph-st .ic { width: 52%; height: 52%; }
.ph-arrow { left: 50%; bottom: 8.5%; width: 3em; height: 3em; margin-left: -1.5em; background: var(--lime); color: var(--ink); box-shadow: 0 .5em 1.2em rgba(18, 5, 46, .4); }
.ph-arrow .ic { stroke-width: 3; }
.ph-like { right: 6%; top: 41%; width: 3.6em; height: 3.6em; background: #fff; color: var(--pink); box-shadow: 0 .6em 1.4em rgba(18, 5, 46, .4); }
.ph-like .ic { stroke-width: 2.4; fill: rgba(236, 72, 153, .16); }
.ph-ring { position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 .22em #fff; opacity: 0; }
.ph-st.is-on { opacity: 1; transform: none; }
.ph-arrow.is-on { animation: nudge .55s ease-in-out infinite alternate; }
.ph-like.is-on { transform: rotate(-12deg); }
.ph-like.is-on .ph-ring { animation: ring .8s .05s var(--ease) both; }

/* ---------- marquee ---------- */
/* four copies of the list in the track: moving one copy (25%) loops without a seam or an empty end. Only transform
   moves, on its own layer; it never stops on hover. */
/* turned around its top-left corner, so its left end never drops below the hero, however wide the screen */
.marquee { position: relative; z-index: 5; margin: -30px -3vw 0; padding: 17px 0; background: var(--lime); color: var(--ink); rotate: -1.6deg; transform-origin: 0 0; overflow: hidden; box-shadow: 0 20px 40px -24px rgba(21, 18, 29, .45); }
.marquee-track { display: flex; width: max-content; }
.js .marquee-track { animation: marquee 40s linear infinite; will-change: transform; }
.marquee ul { display: flex; flex: none; }
.marquee li { display: inline-flex; align-items: center; gap: 16px; padding-right: 34px; font: 800 clamp(20px, 2.4vw, 27px)/1 var(--display); letter-spacing: -.02em; white-space: nowrap; }
.mq-mark { width: 30px; height: 30px; flex: none; }

/* ---------- sections ---------- */
.sec { padding: clamp(84px, 11vw, 150px) 0; }
.sec-head { max-width: 780px; margin-bottom: clamp(40px, 5.5vw, 68px); }
.sec-head h2 { font-size: clamp(38px, 5.8vw, 70px); line-height: .98; letter-spacing: -.04em; }
.sec-head .lead { margin-top: 20px; }
.sec-head-center { margin-inline: auto; text-align: center; }
.sec-head-center .lead { margin-inline: auto; }
.js [data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity .85s var(--ease), transform .85s var(--ease); }
.js [data-reveal].is-in { opacity: 1; transform: none; }
/* safety net: if site.js does not run (blocked, offline), show everything after a moment anyway */
.js:not(.js-ok) [data-reveal] { animation: rise .6s 2.5s var(--ease) both; }

/* ---------- how it works: the steps on the left, one stage on the right that plays them ---------- */
.how { background: var(--cloud); }
.how-row { display: grid; gap: 18px; }
@media (min-width: 960px) {
  .how-row { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: clamp(28px, 3.4vw, 48px); align-items: center; }
  .how-steps { order: -1; }
}

/* the stage */
.how-stage { position: relative; isolation: isolate; display: grid; grid-template-rows: auto 1fr; gap: 16px; min-width: 0; padding: clamp(16px, 2.4vw, 28px); border-radius: var(--r-xl); background: var(--ink-950); color: var(--on-dark); box-shadow: var(--shadow-2); overflow: hidden; }
.how-stage::before { content: ""; position: absolute; z-index: -1; inset: auto -10% -60% 30%; height: 120%; background: radial-gradient(closest-side, rgba(124, 58, 237, .4), transparent); pointer-events: none; }
.hs-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 40px; }
.hs-status { display: grid; min-width: 0; }
.hs-st { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: 8px; justify-self: start; max-width: 100%; padding: 9px 14px 9px 11px; border-radius: 999px; background: rgba(255, 255, 255, .09); color: #fff; font: 800 13.5px/1 var(--sans); white-space: nowrap; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .45s var(--spring); }
.hs-st .ic { flex: none; width: 16px; height: 16px; color: var(--lime); }
.hs-st-2 { background: var(--lime); color: var(--ink); }
.hs-st-2 .ic { color: var(--ink); }
.how-stage[data-step="0"] .hs-st-0, .how-stage[data-step="1"] .hs-st-1, .how-stage[data-step="2"] .hs-st-2 { opacity: 1; transform: none; }
.js .how-stage[data-step="1"] .hs-st-1 .ic { animation: sway 1.1s ease-in-out infinite; }
.hs-time { display: flex; align-items: center; gap: 10px; flex: none; margin: 0; font: 800 clamp(24px, 3vw, 34px)/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.hs-from { color: var(--on-dark-muted); text-decoration: line-through; text-decoration-color: var(--pink); text-decoration-thickness: 3px; }
.hs-arrow .ic { display: block; width: 20px; height: 20px; color: var(--on-dark-muted); }
.hs-from, .hs-arrow { opacity: 0; transition: opacity .35s; }
.hs-time b { min-width: 2.5em; color: #fff; text-align: right; transition: color .3s; }
.how-stage.is-short .hs-from, .how-stage.is-short .hs-arrow { opacity: 1; }
.how-stage.is-short .hs-time b { color: var(--lime); }
@media (max-width: 400px) { .hs-st { padding: 8px 11px 8px 9px; font-size: 12.5px; } .hs-time { gap: 6px; font-size: 22px; } .hs-arrow .ic { width: 16px; height: 16px; } }

.hs-body { display: grid; min-height: 296px; }
@media (min-width: 960px) { .hs-body { min-height: 340px; } }
.hs-phase { grid-area: 1 / 1; display: grid; align-content: center; min-width: 0; opacity: 0; visibility: hidden; transform: translateY(12px) scale(.985); transition: opacity .4s var(--ease), transform .6s var(--ease), visibility 0s .6s; }
.how-stage[data-step="0"] .hs-p1, .how-stage[data-step="1"] .hs-p2, .how-stage[data-step="2"] .hs-p3 { opacity: 1; visibility: visible; transform: none; transition-delay: .1s, .1s, 0s; }
/* a step starts over without animating back first */
.hs-phase.is-reset, .hs-phase.is-reset *, .hs-phase.is-reset *::before, .hs-phase.is-reset *::after { transition: none !important; animation: none !important; }

/* step 1: four clips come in, each with an upload bar, then its length */
.hs-p1 { grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: center; gap: clamp(8px, 1.4vw, 14px); padding-inline: clamp(0px, 1.6vw, 16px); }
.hs-clip { position: relative; aspect-ratio: 9 / 16; border-radius: 14px; overflow: hidden; background: #2C2440; box-shadow: 0 18px 30px -16px rgba(0, 0, 0, .85), inset 0 0 0 1px rgba(255, 255, 255, .08); opacity: 0; transform: translateY(30px) scale(.9) rotate(var(--r, 0deg)); transition: opacity .3s, transform .7s var(--spring); }
.hs-clip-1 { --r: -3deg; } .hs-clip-2 { --r: 2deg; } .hs-clip-3 { --r: -1.5deg; } .hs-clip-4 { --r: 2.5deg; }
.hs-clip.is-in { opacity: 1; transform: rotate(var(--r)); }
.hs-shot { position: absolute; inset: 0; }
.hs-shot .scn { position: absolute; left: 0; right: 0; top: 50%; translate: 0 -50%; }
.hs-clip-1 .hs-shot { transform: scale(1.7) translateY(-1%); }
.hs-clip-2 .hs-shot { transform: scale(1.05); }
.hs-clip-3 .hs-shot { transform: scale(1.35) translate(9%, 3%) rotate(-4deg); filter: hue-rotate(-28deg) saturate(1.15); }
.hs-clip-4 .hs-shot { transform: scale(1.2) translate(-7%, -5%); filter: hue-rotate(16deg); }
.hs-up { position: absolute; left: 12%; right: 12%; bottom: 10px; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .28); overflow: hidden; transition: opacity .3s 1s; }
.hs-up i { display: block; height: 100%; border-radius: inherit; background: var(--lime); transform-origin: left; transform: scaleX(0); transition: transform .8s var(--ease) .15s; }
.hs-clip.is-in .hs-up { opacity: 0; }
.hs-clip.is-in .hs-up i { transform: none; }
.hs-len { position: absolute; left: 7px; bottom: 7px; padding: 4px 7px; border-radius: 7px; background: rgba(12, 10, 18, .74); color: #fff; font: 800 11.5px/1 var(--sans); font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(4px); transition: opacity .3s 1.1s, transform .4s var(--spring) 1.1s; }
.hs-clip.is-in .hs-len { opacity: 1; transform: none; }
.no-js .hs-clip, .no-js .hs-len, .js:not(.js-ok) .hs-clip, .js:not(.js-ok) .hs-len { opacity: 1; transform: none; }
.no-js .hs-up, .js:not(.js-ok) .hs-up { display: none; }

/* step 2: a scan line marks the bad bits, they are cut, then captions and stickers go in */
.demo-tracks { position: relative; display: grid; gap: 12px; }
.track { display: grid; grid-template-columns: 112px minmax(0, 1fr); align-items: center; gap: 12px; }
.track-name { display: flex; align-items: center; gap: 8px; min-width: 0; color: var(--on-dark-muted); font: 700 13px/1.2 var(--sans); }
.track-name .ic { flex: none; width: 16px; height: 16px; }
.lane { display: flex; gap: 4px; min-width: 0; }
.lane-video { position: relative; height: clamp(58px, 6vw, 72px); }
.seg { position: relative; flex: 1 1 0; min-width: 0; border-radius: 10px; overflow: hidden; transition: flex-grow 1s var(--ease), opacity .6s var(--ease), margin .9s var(--ease); }
.fg-3 { flex-grow: 3; } .fg-4 { flex-grow: 4; } .fg-5 { flex-grow: 5; } .fg-6 { flex-grow: 6; } .fg-8 { flex-grow: 8; } .fg-10 { flex-grow: 10; }
.seg-keep { background: linear-gradient(160deg, #8B5CF6, #6D28D9); }
.seg-keep::after, .seg-cut::after { content: ""; position: absolute; inset: 22% 8%; background: repeating-linear-gradient(90deg, rgba(255, 255, 255, .5) 0 2px, transparent 2px 6px); -webkit-mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); mask: linear-gradient(transparent, #000 30%, #000 70%, transparent); opacity: .55; }
.seg-cut { background: #2C2440; }
.seg-cut::after { opacity: .22; }
/* each bad bit is marked the moment the scan line passes it */
.seg:nth-child(2) { --at: .17s; } .seg:nth-child(3) { --at: .31s; } .seg:nth-child(5) { --at: .64s; } .seg:nth-child(6) { --at: .74s; } .seg:nth-child(8) { --at: .96s; } .seg:nth-child(9) { --at: 1.14s; }
.seg-cut::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: repeating-linear-gradient(-45deg, rgba(236, 72, 153, .45) 0 7px, rgba(236, 72, 153, .16) 7px 14px); box-shadow: inset 0 0 0 1.5px rgba(236, 72, 153, .9); opacity: 0; transition: opacity .2s var(--at, 0s); }
.seg-tag { position: absolute; left: 50%; top: 50%; z-index: 1; display: grid; place-items: center; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; background: var(--pink); color: #fff; box-shadow: 0 4px 10px -2px rgba(0, 0, 0, .5); opacity: 0; transform: scale(.3); transition: opacity .2s var(--at, 0s), transform .4s var(--spring) var(--at, 0s); }
.seg-tag .ic { width: 11px; height: 11px; stroke-width: 2.6; }
.hs-p2.is-scan .seg-cut::before, .no-js .seg-cut::before { opacity: 1; }
.hs-p2.is-scan .seg-tag { opacity: 1; transform: none; }
.hs-p2.is-cut .seg-cut, .no-js .seg-cut { flex-grow: 0; opacity: 0; margin-inline: -2px; }
.hs-scan { position: absolute; z-index: 2; inset: -7px 0; pointer-events: none; opacity: 0; }
.hs-scan::before { content: ""; position: absolute; top: 0; bottom: 0; left: -1.5px; width: 3px; border-radius: 3px; background: var(--lime); box-shadow: 0 0 18px 4px rgba(198, 255, 61, .5); }
.hs-p2.is-scan .hs-scan { animation: hs-scan 1.45s linear both; }
.lane-caps, .lane-stickers { height: 34px; align-items: center; }
.capchip { flex: 1 1 auto; min-width: 0; padding: 7px 7px; border-radius: 8px; background: rgba(255, 255, 255, .92); color: var(--ink); font: 800 11.5px/1 var(--sans); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transform: translateY(8px); transition: opacity .4s, transform .5s var(--spring); }
.capchip:nth-child(3) { background: var(--lime); }
.stk { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: rgba(255, 255, 255, .1); opacity: 0; transform: scale(.4); transition: opacity .3s, transform .5s var(--spring); }
.stk .ic { width: 17px; height: 17px; }
.stk-title { margin-left: 2%; background: #fff; color: var(--ink); }
.stk-like { margin-left: 38%; background: #fff; color: var(--pink); }
.stk-arrow { margin-left: auto; margin-right: 6%; background: var(--lime); color: var(--ink); }
.hs-p2.is-dress .capchip, .hs-p2.is-dress .stk, .no-js .capchip, .no-js .stk { opacity: 1; transform: none; }
.hs-p2.is-dress .capchip:nth-child(2) { transition-delay: .08s; } .hs-p2.is-dress .capchip:nth-child(3) { transition-delay: .16s; } .hs-p2.is-dress .capchip:nth-child(4) { transition-delay: .24s; } .hs-p2.is-dress .capchip:nth-child(5) { transition-delay: .32s; }
.hs-p2.is-dress .stk:nth-child(2) { transition-delay: .3s; } .hs-p2.is-dress .stk:nth-child(3) { transition-delay: .45s; }
.demo-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 8px; margin-top: 22px; color: var(--on-dark-muted); font: 600 13.5px/1 var(--sans); }
.demo-foot .legend { margin-right: 10px; }
.cut-kind { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px 5px 7px; border-radius: 999px; background: rgba(236, 72, 153, .16); color: #FFB4DA; font: 700 12.5px/1 var(--sans); white-space: nowrap; opacity: 0; transform: translateY(6px) scale(.9); transition: opacity .25s var(--at, 0s), transform .4s var(--spring) var(--at, 0s); }
.cut-kind .ic { width: 12px; height: 12px; color: var(--pink); }
.ck-1 { --at: .17s; } .ck-2 { --at: .31s; } .ck-3 { --at: .64s; } .ck-4 { --at: .74s; }
.hs-p2.is-scan .cut-kind, .no-js .cut-kind { opacity: 1; transform: none; }
.legend { display: inline-flex; align-items: center; gap: 7px; }
.legend i { width: 14px; height: 14px; border-radius: 4px; }
.lg-keep { background: #8B5CF6; }
.lg-cut { background: repeating-linear-gradient(-45deg, rgba(236, 72, 153, .9) 0 3px, rgba(236, 72, 153, .3) 3px 6px); }
@media (max-width: 640px) {
  .track { grid-template-columns: 1fr; gap: 7px; }
  .track-name { font-size: 12px; }
  .seg-tag { width: 14px; height: 14px; margin: -7px 0 0 -7px; }
  .seg-tag .ic { width: 8px; height: 8px; }
  .cut-kind { padding: 4px 8px 4px 6px; font-size: 11.5px; }
  .capchip { padding: 6px 5px; font-size: 10.5px; }
  .capchip:nth-child(5) { display: none; }
  .demo-foot { margin-top: 16px; }
}

/* step 3: the finished short, ready for every platform */
.hs-p3 { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(16px, 3vw, 32px); padding-inline: clamp(0px, 2vw, 22px); }
.hs-phone { width: 118px; }
@media (min-width: 520px) { .hs-phone { width: 144px; font-size: 12px; } }
.hs-phone .scn { position: absolute; inset: 0; }
.hs-play { position: absolute; left: 9%; right: 9%; bottom: 4.5%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .3); overflow: hidden; }
.hs-play i { display: block; height: 100%; border-radius: inherit; background: #fff; transform-origin: left; transform: scaleX(.35); }
.js .hs-p3.is-play .hs-play i { animation: hs-play 3.6s linear both; }
.hs-share { display: grid; gap: 12px; min-width: 0; }
.hs-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 0; color: #fff; font: 800 clamp(18px, 2vw, 22px)/1.1 var(--display); letter-spacing: -.02em; }
.hs-title span { color: var(--on-dark-muted); font: 700 14px/1 var(--sans); font-variant-numeric: tabular-nums; }
.hs-platforms { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hs-pf { display: flex; align-items: center; gap: 10px; min-width: 0; padding: 7px 10px 7px 7px; border-radius: 14px; background: rgba(255, 255, 255, .07); color: #fff; font: 700 14.5px/1.1 var(--sans); opacity: 0; transform: translateX(16px); transition: opacity .3s, transform .5s var(--spring); }
.hs-pf > span:nth-child(2) { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.hs-pf-ic { display: grid; place-items: center; flex: none; width: 32px; height: 32px; border-radius: 10px; background: #000; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); }
.hs-pf-ic .ic { width: 17px; height: 17px; }
.hs-pf-2 .hs-pf-ic { background: linear-gradient(45deg, #F58529, #DD2A7B 55%, #8134AF); box-shadow: none; }
.hs-pf-3 .hs-pf-ic { background: #FF0033; box-shadow: none; }
.hs-pf b { display: grid; place-items: center; flex: none; width: 22px; height: 22px; margin-left: auto; border-radius: 50%; background: var(--lime); color: var(--ink); transform: scale(0); transition: transform .45s var(--spring); }
.hs-pf b .ic { width: 13px; height: 13px; stroke-width: 3.2; }
.hs-ready { display: inline-flex; align-items: center; gap: 8px; justify-self: start; max-width: 100%; margin: 0; padding: 8px 12px; border-radius: 12px; background: rgba(198, 255, 61, .13); color: var(--lime); font: 700 13px/1.25 var(--sans); opacity: 0; transform: translateY(6px); transition: opacity .35s, transform .45s var(--spring); }
.hs-ready .ic { flex: none; width: 15px; height: 15px; }
.hs-p3.is-play .hs-pf, .hs-p3.is-play .hs-ready, .hs-p3.is-play .hs-pf b { opacity: 1; transform: none; }
.hs-p3.is-play .hs-pf-2 { transition-delay: .14s; } .hs-p3.is-play .hs-pf-3 { transition-delay: .28s; }
.hs-p3.is-play .hs-pf-1 b { transition-delay: .6s; } .hs-p3.is-play .hs-pf-2 b { transition-delay: .85s; } .hs-p3.is-play .hs-pf-3 b { transition-delay: 1.1s; }
.hs-p3.is-play .hs-ready { transition-delay: 1.4s; }
@media (max-width: 440px) { .hs-p3 { gap: 14px; } .hs-phone { width: 108px; } .hs-pf { gap: 8px; padding: 6px 8px 6px 6px; border-radius: 12px; font-size: 13px; } .hs-pf-ic { width: 26px; height: 26px; border-radius: 8px; } .hs-pf-ic .ic { width: 15px; height: 15px; } .hs-pf b { width: 18px; height: 18px; } .hs-pf b .ic { width: 11px; height: 11px; } .hs-title { font-size: 17px; } .hs-ready { padding: 7px 10px; font-size: 12px; } }

/* the steps: tap one to see it; the active one fills its bar while it plays */
.how-steps { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.hstep { position: relative; padding: 16px 18px 20px; border-radius: 22px; cursor: pointer; transition: background-color .3s, box-shadow .3s; }
.hstep:hover { background: rgba(255, 255, 255, .6); }
.hstep.is-on { background: #fff; box-shadow: var(--shadow-1); }
.hstep-btn { display: flex; align-items: center; gap: 14px; width: 100%; padding: 0; border: 0; background: none; color: var(--ink); font: inherit; text-align: left; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.hstep-btn:focus-visible { outline: 3px solid var(--violet); outline-offset: 8px; border-radius: 14px; }
.hstep-ic { position: relative; display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 15px; background: var(--violet-50); color: var(--violet); transition: background-color .3s, color .3s; }
.hstep-ic .ic { width: 23px; height: 23px; }
.hstep-ic small { position: absolute; right: -6px; top: -6px; display: grid; place-items: center; width: 21px; height: 21px; border-radius: 50%; background: #fff; color: var(--ink); box-shadow: 0 0 0 2px var(--cloud), 0 2px 6px rgba(21, 18, 29, .18); font: 800 11.5px/1 var(--sans); transition: box-shadow .3s; }
.hstep.is-on .hstep-ic small { box-shadow: 0 0 0 2px #fff, 0 2px 6px rgba(21, 18, 29, .18); }
.hstep.is-on .hstep-ic { background: var(--violet); color: #fff; }
.hstep:nth-child(2).is-on .hstep-ic { background: var(--lime); color: var(--ink); }
.hstep:nth-child(3).is-on .hstep-ic { background: var(--ink); color: var(--lime); }
.hstep-title { font: 800 clamp(20px, 2vw, 24px)/1.15 var(--display); letter-spacing: -.02em; }
.hstep-text { margin: 10px 0 0 62px; color: var(--muted); font-size: 15.5px; line-height: 1.55; transition: color .3s; }
.hstep-bar { position: absolute; left: 18px; right: 18px; bottom: 9px; height: 3px; border-radius: 3px; background: var(--violet-50); overflow: hidden; opacity: 0; transition: opacity .3s; }
.hstep-bar i { display: block; height: 100%; border-radius: inherit; background: var(--violet); transform-origin: left; transform: scaleX(0); }
.js .hstep.is-on .hstep-bar { opacity: 1; }
@media (max-width: 520px) { .hstep { padding: 14px 14px 18px; } .hstep-text { margin-left: 0; font-size: 15px; } .hstep-bar { left: 14px; right: 14px; } }

/* ---------- features (bento) ---------- */
.features { background: #fff; }
.bento { display: grid; gap: 16px; grid-template-columns: repeat(12, minmax(0, 1fr)); }
.card { grid-column: span 12; display: flex; flex-direction: column; gap: 9px; padding: 14px 14px 24px; border-radius: 28px; background: var(--cloud); box-shadow: inset 0 0 0 1px var(--line); overflow: hidden; }
.card > h3 { display: flex; align-items: center; gap: 10px; margin: 10px 10px 0; font-size: 23px; letter-spacing: -.025em; }
.card > h3 .ic { width: 22px; height: 22px; color: var(--violet); }
/* "Vanaf Standaard" on a feature that is not in every plan (the product card): a sticker on the picture's corner */
.c-product { position: relative; }
.card-from { position: absolute; z-index: 2; top: 26px; left: 26px; padding: 7px 11px 6px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 800 12.5px/1 var(--sans); letter-spacing: .02em; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(28, 11, 64, .5); }
.card > p { margin: 0 10px; color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.card-ink { background: var(--ink); color: var(--on-dark); box-shadow: none; }
.card-ink > h3 .ic { color: var(--lime); }
.card-ink > p { color: var(--on-dark-muted); }
.card-violet { background: radial-gradient(90% 80% at 100% 0%, rgba(167, 139, 250, .7), rgba(167, 139, 250, 0) 70%), radial-gradient(70% 70% at 0% 100%, rgba(236, 72, 153, .35), rgba(236, 72, 153, 0) 70%), var(--violet); color: #fff; box-shadow: 0 30px 60px -34px rgba(124, 58, 237, .85); }
.card-violet > h3 .ic { color: var(--lime); }
.card-violet > p { color: rgba(255, 255, 255, .88); }
.card-lime { background: var(--lime); box-shadow: none; }
.card-lime > p { color: rgba(21, 18, 29, .78); }
.card-pink { background: #FFE4F1; box-shadow: none; }
.card-pink > h3 .ic { color: #DB2777; }
.card-pink > p { color: #5F4A5C; }
/* A hint that the cards are alive (Mathijs, 3 Nov 2026: "heel subtiel"): with a mouse, a card lifts 4px, gets a soft
   shadow and its icon gives a small nod. Only translate and shadow move, so the text stays sharp. Not on touch
   screens and not with "reduce motion". The reveal keeps its own transform transition (other property). */
@media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) {
  .card, .js .card[data-reveal] { transition: translate .45s var(--spring), box-shadow .35s var(--ease), opacity .85s var(--ease), transform .85s var(--ease); }
  .card > h3 .ic { transition: rotate .45s var(--spring), scale .45s var(--spring); }
  .card:hover { translate: 0 -4px; box-shadow: inset 0 0 0 1px var(--line), 0 24px 44px -28px rgba(38, 6, 86, .38); }
  .card-ink:hover, .card-lime:hover, .card-pink:hover { box-shadow: 0 24px 44px -26px rgba(38, 6, 86, .45); }
  .card-violet:hover { box-shadow: 0 36px 70px -32px rgba(124, 58, 237, .95); }
  .card:hover > h3 .ic { rotate: -8deg; scale: 1.12; }
}
/* rows on a computer: captions + best take, teleprompter + duo, then two rows of three */
@media (min-width: 720px) { .card { grid-column: span 6; } .c-captions, .c-duo { grid-column: span 12; } }
@media (min-width: 1020px) {
  .c-captions { grid-column: span 7; } .c-takes { grid-column: span 5; }
  .c-camera { grid-column: span 5; } .c-duo { grid-column: span 7; }
  .c-hooks, .c-editor, .c-brand, .c-product, .c-post, .c-share { grid-column: span 4; }
}
.viz { position: relative; height: 200px; border-radius: 20px; overflow: hidden; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.card-ink .viz { background: var(--ink-700); box-shadow: none; }
.card-lime .viz { box-shadow: none; }
.c-takes .viz, .c-camera .viz { flex: 1 1 auto; height: auto; min-height: 200px; }

/* caption styles: the example short in a small phone, the app's three styles (strak, pop, clean) to pick from */
.viz-captions { height: auto; display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(14px, 3vw, 34px); padding: clamp(12px, 2vw, 20px); background: rgba(255, 255, 255, .1); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .18); }
.cs-phone { position: relative; width: clamp(118px, 13vw, 150px); aspect-ratio: 390 / 844; border-radius: 22px; overflow: hidden; background: #000; box-shadow: 0 0 0 5px #15121D, 0 0 0 6px rgba(255, 255, 255, .2), 0 26px 44px -18px rgba(18, 5, 46, .8); font-size: clamp(10px, 1.15vw, 12.5px); }
.cs-phone .scn { position: absolute; inset: 0; }
.cs-lines { position: absolute; left: 5%; right: 5%; bottom: 23%; display: grid; place-items: center; }
.cs { grid-area: 1 / 1; text-align: center; opacity: 0; transform: translateY(6px) scale(.96); transition: opacity .3s, transform .45s var(--spring); }
.cs.is-on { opacity: 1; transform: none; }
.cs .w { display: inline-block; border-radius: .2em; transition: transform .18s var(--spring), color .12s, background-color .12s, box-shadow .12s; }
.cs-0 { color: #fff; font: 800 1.3em/1.25 var(--sans); -webkit-text-stroke: .13em rgba(17, 12, 30, .92); paint-order: stroke fill; text-shadow: 0 .1em .3em rgba(18, 5, 46, .5); }
.cs-0 .kw { color: #C4A8FF; font-size: 1.1em; }
.cs-0 .w.is-now { background: var(--violet); box-shadow: 0 0 0 .13em var(--violet); transform: scale(1.08); }
.cs-1 { color: #fff; font: 800 1.36em/1.08 var(--display); text-transform: uppercase; letter-spacing: -.005em; -webkit-text-stroke: .22em #111; paint-order: stroke fill; }
.cs-1 .kw { color: #FFD640; }
.cs-1 .w.is-now { color: #A3FF47; transform: scale(1.18); }
.cs-2 { padding: .38em .62em; border-radius: .6em; background: rgba(12, 12, 12, .66); color: #fff; font: 600 1.12em/1.3 var(--sans); }
.cs-2 .w.is-now { color: #5EEAD4; }
/* "your own style": three looks someone could make in the app; site.js shows another one each time it comes up */
.cs-own { color: #FFE14D; font: 800 1.34em/1.16 var(--display); letter-spacing: -.01em; word-spacing: .14em; -webkit-text-stroke: .2em #1C0B40; paint-order: stroke fill; }
.cs-own .kw { color: #fff; }
.cs-own .w.is-now { transform: scale(1.1) rotate(-2deg); }
.cs-own[data-look="1"] { color: #fff; font: 800 1.08em/1.6 var(--sans); letter-spacing: 0; word-spacing: 0; text-transform: lowercase; -webkit-text-stroke: 0; }
.cs-own[data-look="1"] .w { padding: .04em .32em .08em; background: var(--pink); box-shadow: 0 .14em 0 #9D174D; }
.cs-own[data-look="1"] .kw { background: var(--lime); color: var(--ink); box-shadow: 0 .14em 0 #5F8A00; }
.cs-own[data-look="1"] .w.is-now { transform: translateY(-.14em) rotate(-3deg); }
.cs-own[data-look="2"] { color: #fff; font: italic 600 1.4em/1.22 Georgia, 'Times New Roman', serif; letter-spacing: 0; word-spacing: .04em; -webkit-text-stroke: 0; text-shadow: 0 .04em .08em rgba(18, 5, 46, .9), 0 .1em .45em rgba(18, 5, 46, .8); }
.cs-own[data-look="2"] .kw { text-decoration-line: underline; text-decoration-color: var(--lime); text-decoration-thickness: .14em; text-underline-offset: .14em; }
.cs-own[data-look="2"] .w.is-now { color: var(--lime); transform: none; }
.cs-own.is-on.is-new { animation: pop .4s var(--spring); }
.cs-side { display: grid; gap: 12px; align-content: center; justify-items: start; min-width: 0; }
.cs-pick { color: rgba(255, 255, 255, .78); font: 800 12px/1.2 var(--sans); letter-spacing: .14em; text-transform: uppercase; }
.cs-tabs { display: grid; gap: 8px; width: 100%; max-width: 270px; }
.cs-tab { display: flex; align-items: center; gap: 12px; min-width: 0; padding: 7px 14px 7px 7px; border: 0; border-radius: 16px; background: rgba(255, 255, 255, .13); color: #fff; font: 700 15.5px/1.1 var(--sans); text-align: left; cursor: pointer; transition: background-color .2s, color .2s, transform .25s var(--spring); -webkit-tap-highlight-color: transparent; }
.cs-tab:hover { background: rgba(255, 255, 255, .22); }
.cs-tab:active { transform: scale(.98); }
.cs-tab[aria-pressed="true"] { background: #fff; color: var(--ink); box-shadow: 0 12px 24px -14px rgba(18, 5, 46, .7); }
.cs-aa { display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 11px; font-size: 16px; line-height: 1; }
.cs-aa-0 { background: var(--violet); color: #fff; font-weight: 800; box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .35); }
.cs-aa-1 { background: #111; color: #A3FF47; font: 800 15px/1 var(--display); text-transform: uppercase; }
.cs-aa-2 { background: #2B2733; color: #5EEAD4; font-weight: 600; }
/* the fourth tab says "make your own": a dashed edge, a many-coloured Aa and a plus */
.cs-tab-own { outline: 1.5px dashed rgba(255, 255, 255, .5); outline-offset: -1.5px; background: rgba(255, 255, 255, .06); }
.cs-tab-own[aria-pressed="true"] { outline-color: transparent; }
.cs-aa-own { position: relative; background: conic-gradient(from 210deg, #FFE14D, #EC4899, #7C3AED, #38BDF8, #C6FF3D, #FFE14D); color: #fff; font: italic 700 16px/1 Georgia, 'Times New Roman', serif; text-shadow: 0 1px 3px rgba(18, 5, 46, .6); }
.cs-aa-own i { position: absolute; right: -6px; bottom: -6px; display: grid; place-items: center; width: 19px; height: 19px; border-radius: 50%; background: var(--lime); color: var(--ink); box-shadow: 0 2px 6px rgba(18, 5, 46, .45); }
.cs-aa-own i .ic { width: 12px; height: 12px; stroke-width: 3.4; }
.cs-own-txt { display: grid; gap: 3px; min-width: 0; }
.cs-own-txt small { color: rgba(255, 255, 255, .74); font: 600 12px/1.25 var(--sans); }
.cs-tab[aria-pressed="true"] .cs-own-txt small { color: var(--muted); }
@media (max-width: 379px) { .cs-own-txt small { display: none; } }
.cs-spelled { display: inline-flex; align-items: center; gap: 7px; max-width: 100%; padding: 8px 12px 8px 10px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 800 12.5px/1.2 var(--sans); }
.cs-spelled .ic { flex: none; width: 15px; height: 15px; stroke-width: 3; }
@media (max-width: 400px) { .cs-tab { gap: 9px; padding-right: 10px; font-size: 14px; } .cs-aa { width: 32px; height: 32px; font-size: 14px; } }

/* best take: a scan line runs over both takes, the slip is crossed out, the clean take is kept */
.viz-takes { display: grid; align-content: center; gap: 16px; padding: 22px; }
.take-row { display: grid; gap: 7px; }
.take { position: relative; display: flex; align-items: center; gap: 4px; height: 50px; padding: 0 10px 0 12px; border-radius: 14px; font: 800 12.5px/1 var(--sans); }
.take span { margin-right: 8px; white-space: nowrap; }
.take i { flex: 1; height: 50%; border-radius: 3px; }
.take i:nth-of-type(2n) { height: 30%; } .take i:nth-of-type(3n) { height: 70%; }
.take b { display: grid; place-items: center; width: 28px; height: 28px; margin-left: 8px; border-radius: 50%; }
.take b .ic { width: 16px; height: 16px; stroke-width: 3; }
.take-bad { background: #FBE8F1; color: var(--bad); }
.take-bad i { background: rgba(200, 30, 75, .3); }
.take-bad span { text-decoration: line-through; }
.take-bad b { background: var(--bad); color: #fff; }
.take-good { background: var(--violet); color: #fff; }
.take-good::after { content: ""; position: absolute; inset: -3px; border-radius: 17px; box-shadow: 0 0 0 3px var(--lime); pointer-events: none; }
.take-good i { background: rgba(255, 255, 255, .55); }
.take-good b { background: var(--lime); color: var(--ink); }
.take-said { margin: 0 6px; color: var(--muted); font: 600 13.5px/1.35 var(--sans); }
.take-row-bad .take-said { text-decoration: line-through; text-decoration-color: rgba(200, 30, 75, .6); }
.take-row-good .take-said { color: var(--ink); font-weight: 700; }
.take-note { display: inline-flex; align-items: center; gap: 6px; justify-self: end; color: var(--violet); font: 800 13px/1 var(--sans); }
.take-note .ic { width: 15px; height: 15px; }
.take-scan { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
.take-scan::before { content: ""; position: absolute; top: 12px; bottom: 12px; left: 0; width: 3px; border-radius: 3px; background: var(--violet); box-shadow: 0 0 16px 4px rgba(124, 58, 237, .4); }
.js .take-scan { animation: tk-scan 6.4s cubic-bezier(.45, 0, .55, 1) infinite; }
.js .take b { animation: tk-mark 6.4s var(--spring) infinite; }
.js .take-good b { animation-name: tk-mark-2; }
.js .take-good::after { animation: tk-ring 6.4s ease infinite; }
.js .take-row-bad { animation: tk-dim 6.4s ease infinite; }
.js .take-note { animation: tk-note 6.4s ease infinite; }
@keyframes tk-scan { 0%, 4% { opacity: 0; transform: translateX(0); } 8% { opacity: 1; } 34% { opacity: 1; } 38%, 100% { opacity: 0; transform: translateX(100%); } }
@keyframes tk-mark { 0%, 37% { transform: scale(0); } 44%, 93% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes tk-mark-2 { 0%, 43% { transform: scale(0); } 50%, 93% { transform: scale(1); } 100% { transform: scale(0); } }
@keyframes tk-ring { 0%, 43% { opacity: 0; } 50%, 93% { opacity: 1; } 100% { opacity: 0; } }
@keyframes tk-dim { 0%, 37% { opacity: 1; } 44%, 93% { opacity: .6; } 100% { opacity: 1; } }
@keyframes tk-note { 0%, 50% { opacity: 0; transform: translateY(5px); } 57%, 93% { opacity: 1; transform: none; } 100% { opacity: 0; } }

/* teleprompter */
.viz-camera { display: grid; }
.prompter { position: absolute; inset: 0 0 56px; padding: 18px 22px 0; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 24%, #000 72%, transparent); mask: linear-gradient(transparent, #000 24%, #000 72%, transparent); }
.viz-camera::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 55px; height: 1px; background: rgba(255, 255, 255, .08); }
.prompter p { margin: 0; color: #fff; font: 700 21px/1.45 var(--sans); }
.js .prompter p { animation: prompter 14s linear infinite; }
.cam-ui { position: absolute; left: 14px; right: 14px; bottom: 12px; display: flex; align-items: center; justify-content: space-between; }
.rec { width: 30px; height: 30px; border-radius: 50%; border: 3px solid #fff; background: radial-gradient(circle, #FF3B5C 0 52%, transparent 54%); }
.js .rec { animation: pulse 1.6s ease-in-out infinite; }
.cam-duo { padding: 6px 11px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 800 12px/1 var(--sans); }

/* duo: the app's camera in duo mode, on the set of the example. A dotted line down the middle, the line to say with
   who says it, a pill on each side; the side whose turn it is lights up (data-turn, site.js) */
.viz-duo { height: 252px; isolation: isolate; background: #1E1236; box-shadow: none; }
.duo-set { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; }
.viz-duo::after { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(rgba(14, 8, 28, .62), rgba(14, 8, 28, .2) 48%, rgba(14, 8, 28, .58)); }
.duo-lines { position: absolute; z-index: 3; left: 50%; top: 14px; display: grid; width: min(88%, 390px); padding: 10px 14px 12px; border-radius: 16px; translate: -50% 0; background: rgba(0, 0, 0, .7); }
.duo-line { grid-area: 1 / 1; display: grid; align-content: start; gap: 4px; margin: 0; opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .45s var(--spring); }
.duo-line.is-on { opacity: 1; transform: none; }
.duo-line b { font: 800 12px/1 var(--sans); letter-spacing: .02em; }
.duo-a b { color: #A78BFA; } .duo-b b { color: #FBBF24; }
.duo-line span { color: #fff; font: 700 16px/1.3 var(--sans); }
.duo-split { position: absolute; z-index: 1; left: 50%; top: 98px; bottom: 50px; width: 6px; margin-left: -3px; background: radial-gradient(circle, #fff 2.5px, transparent 3px) 50% 0 / 6px 14px repeat-y; -webkit-mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); mask: linear-gradient(transparent, #000 14%, #000 86%, transparent); filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, .55)); }
/* one person in both roles: the same figure on both sides, in the colour of its role */
.duo-me { position: absolute; z-index: 1; bottom: -2px; width: min(30%, 128px); translate: -50% 0; opacity: .3; filter: grayscale(1) brightness(1.7) drop-shadow(0 0 0 rgba(0, 0, 0, 0)); transition: opacity .45s var(--ease), transform .6s var(--spring), filter .45s; }
.duo-me svg { width: 100%; height: auto; }
.duo-me-a { left: 25%; fill: #8B5CF6; } .duo-me-b { left: 75%; fill: #F59E0B; }
.viz-duo[data-turn="0"] .duo-me-a, .viz-duo[data-turn="1"] .duo-me-b { opacity: 1; transform: translateY(-6px); }
.viz-duo[data-turn="0"] .duo-me-a { filter: grayscale(0) brightness(1) drop-shadow(0 0 22px rgba(139, 92, 246, .75)); }
.viz-duo[data-turn="1"] .duo-me-b { filter: grayscale(0) brightness(1) drop-shadow(0 0 22px rgba(245, 158, 11, .6)); }
.duo-pill { --c: #8B5CF6; position: absolute; z-index: 2; bottom: 16px; display: inline-flex; align-items: center; gap: 6px; max-width: 42%; padding: 7px 12px; border-radius: 999px; translate: -50% 0; background: rgba(0, 0, 0, .62); box-shadow: inset 0 0 0 1.5px var(--c); color: rgba(255, 255, 255, .82); font: 800 12.5px/1 var(--sans); white-space: nowrap; transition: background-color .3s, color .3s, box-shadow .3s; }
.duo-pill-a { left: 25%; } .duo-pill-b { left: 75%; --c: #F59E0B; }
.duo-pill .ic { display: none; flex: none; width: 13px; height: 13px; stroke-width: 2.6; }
.duo-pill i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.viz-duo[data-turn="0"] .duo-pill-a, .viz-duo[data-turn="1"] .duo-pill-b { background: var(--c); color: #fff; box-shadow: 0 8px 18px -8px rgba(0, 0, 0, .6); }
.viz-duo[data-turn="0"] .duo-pill-a .ic, .viz-duo[data-turn="1"] .duo-pill-b .ic { display: block; }
.viz-duo[data-turn="0"] .duo-pill-a i, .viz-duo[data-turn="1"] .duo-pill-b i { display: none; }
.duo-rec { position: absolute; z-index: 2; left: 50%; bottom: 13px; margin-left: -15px; }
@media (max-width: 400px) { .duo-line span { font-size: 14.5px; } .duo-pill { gap: 5px; padding: 6px 9px; font-size: 11.5px; } }

/* hook titles */
.viz-hooks { display: grid; align-content: center; justify-items: start; gap: 8px; padding: 20px; }
.hook-btn { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 4px; padding: 9px 14px; border-radius: 999px; background: var(--violet); color: #fff; font: 700 13.5px/1 var(--sans); }
.hook-btn .ic { width: 15px; height: 15px; color: var(--lime); }
.hook-idea { max-width: 100%; padding: 9px 13px; border-radius: 12px; background: var(--cloud); box-shadow: inset 0 0 0 1px var(--line); font: 800 14.5px/1.25 var(--display); letter-spacing: -.01em; opacity: 0; transform: translateX(-10px); transition: opacity .35s, transform .45s var(--spring), background-color .3s; }
.viz-hooks[data-i="1"] .hook-idea:nth-of-type(2), .viz-hooks[data-i="2"] .hook-idea:nth-of-type(-n+3), .viz-hooks[data-i="3"] .hook-idea, .viz-hooks[data-i="4"] .hook-idea, .no-js .hook-idea { opacity: 1; transform: none; }
.viz-hooks[data-i="4"] .hook-idea:nth-of-type(3) { background: var(--lime); box-shadow: none; }

/* editor */
.viz-editor { display: grid; align-content: center; gap: 10px; padding: 22px 18px; }
.ed-lane { position: relative; display: flex; gap: 4px; height: 58px; }
.ed-piece { position: relative; flex: 1 1 0; border-radius: 9px; background: linear-gradient(160deg, #8B5CF6, #6D28D9); }
.ed-sel { background: linear-gradient(160deg, #A78BFA, #7C3AED); box-shadow: 0 0 0 3px var(--lime); z-index: 1; }
.ed-sel .h { position: absolute; top: -3px; bottom: -3px; width: 12px; background: var(--lime); }
.ed-sel .h-l { left: -9px; border-radius: 6px 0 0 6px; }
.ed-sel .h-r { right: -9px; border-radius: 0 6px 6px 0; }
.ed-sel .h::after { content: ""; position: absolute; left: 50%; top: 35%; bottom: 35%; width: 2px; margin-left: -1px; border-radius: 2px; background: var(--ink); }
.ed-head { position: absolute; z-index: 2; top: -10px; bottom: -48px; left: 30%; width: 3px; border-radius: 3px; background: #fff; box-shadow: 0 0 10px rgba(255, 255, 255, .6); }
.js .ed-head { animation: playhead 7s ease-in-out infinite alternate; }
.ed-head::before { content: ""; position: absolute; left: -6px; top: -6px; width: 15px; height: 10px; border-radius: 4px; background: #fff; }
.ed-lane-caps { height: 26px; }
.ed-lane-caps span { flex: 1 1 0; border-radius: 6px; background: rgba(255, 255, 255, .85); }
.ed-lane-caps span:nth-child(2) { background: var(--lime); }

/* brand kit (on the lime card) */
.viz-brand { display: grid; align-content: center; justify-items: center; gap: 14px; padding: 18px; background: #fff; }
.swatches { display: flex; }
.sw { width: 38px; height: 38px; margin-left: -9px; border-radius: 50%; box-shadow: 0 0 0 3px #fff; }
.sw:first-child { margin-left: 0; }
.sw-1 { background: var(--violet); } .sw-2 { background: var(--lime); box-shadow: 0 0 0 3px #fff, inset 0 0 0 1px rgba(21, 18, 29, .12); } .sw-3 { background: var(--pink); } .sw-4 { background: var(--ink); }
.brand-aa { font: 800 50px/.9 var(--display); letter-spacing: -.04em; color: var(--ink); }
.brand-tags { display: flex; flex-wrap: wrap; justify-content: center; gap: 5px; }
.brand-tags span { padding: 5px 9px; border-radius: 999px; background: var(--violet-50); color: var(--violet-700); font: 700 12px/1 var(--sans); }

/* product card: the card of a short, on the violet set of the example */
.viz-product { display: grid; place-items: center; background: #3B1585; box-shadow: none; }
.vp-set { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 45%; }
.vp-card { position: relative; z-index: 1; font-size: 15.5px; margin-bottom: 18px; }
.js .vp-card { animation: bob 5s ease-in-out infinite; }
.vp-arrow { position: absolute; z-index: 1; left: 50%; bottom: 14px; display: grid; place-items: center; width: 34px; height: 34px; margin-left: -17px; border-radius: 50%; background: var(--lime); color: var(--ink); box-shadow: 0 10px 20px -8px rgba(18, 5, 46, .6); }
.vp-arrow .ic { width: 18px; height: 18px; stroke-width: 3; }
.js .vp-arrow { animation: nudge .6s ease-in-out infinite alternate; }

/* video description (with the hashtags) */
.viz-post { display: grid; align-content: center; gap: 8px; padding: 18px; }
.post-text { margin: 0 !important; padding: 12px 14px; border-radius: 16px 16px 16px 4px; background: var(--cloud); color: var(--ink) !important; font: 600 14px/1.45 var(--sans) !important; }
.post-tags { margin: 0 !important; padding-left: 4px; color: var(--violet) !important; font: 800 13.5px/1.3 var(--sans) !important; }

/* share a draft: the link opened in a browser, the short with the watermark, no app needed */
.viz-share { display: grid; place-items: center; padding: 14px; background: linear-gradient(160deg, var(--violet-50), #fff 70%); }
.win { width: 100%; max-width: 250px; border-radius: 14px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 18px 36px -18px rgba(76, 29, 149, .45); overflow: hidden; }
.win-bar { display: flex; align-items: center; gap: 5px; padding: 7px 9px; background: var(--cloud); border-bottom: 1px solid var(--line); }
.win-bar i { flex: none; width: 8px; height: 8px; border-radius: 50%; background: #FF5F57; }
.win-bar i:nth-child(2) { background: #FEBC2E; } .win-bar i:nth-child(3) { background: #28C840; }
.win-url { display: flex; align-items: center; gap: 4px; flex: 1; min-width: 0; margin-left: 5px; padding: 4px 7px; border-radius: 7px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); color: var(--muted); font: 600 10.5px/1.1 var(--sans); white-space: nowrap; overflow: hidden; }
.win-url .ic { flex: none; width: 11px; height: 11px; color: var(--good); }
.win-body { display: flex; align-items: center; gap: 12px; padding: 10px 12px 11px 10px; }
.win-video { position: relative; flex: none; width: 58px; aspect-ratio: 390 / 844; border-radius: 9px; overflow: hidden; }
.win-video .scn { position: absolute; inset: 0; }
.win-wm { position: absolute; left: 50%; top: 42%; translate: -50% -50%; rotate: -36deg; color: rgba(255, 255, 255, .9); font: 800 8px/1 var(--sans); letter-spacing: .12em; text-shadow: 0 1px 3px rgba(18, 5, 46, .6); white-space: nowrap; }
.win-play { position: absolute; left: 50%; bottom: 9%; translate: -50% 0; display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: rgba(255, 255, 255, .94); color: var(--ink); }
.win-play .ic { width: 11px; height: 11px; margin-left: 1px; fill: currentColor; }
.win-info { display: grid; justify-items: start; gap: 4px; min-width: 0; }
.win-info b { font: 800 15px/1.15 var(--display); letter-spacing: -.01em; }
.win-info > span:not(.win-noapp) { color: var(--faint); font: 600 12px/1 var(--sans); font-variant-numeric: tabular-nums; }
.win-noapp { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; padding: 5px 8px; border-radius: 999px; background: var(--violet-50); color: var(--violet-700); font: 800 10.5px/1.15 var(--sans); }
.win-noapp .ic { flex: none; width: 11px; height: 11px; stroke-width: 3; }

/* ---------- for sellers ---------- */
.sellers { position: relative; background: var(--ink-900); color: var(--on-dark); overflow: hidden; }
.sellers::before { content: ""; position: absolute; width: 900px; height: 900px; left: -380px; top: -420px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 58, 237, .45), transparent); pointer-events: none; }
.sellers-row { position: relative; display: grid; gap: 40px; align-items: center; }
.seller-swipe { min-width: 0; } /* the swipe row inside may not widen the grid column (phones) */
@media (min-width: 1020px) { .sellers-row { grid-template-columns: 1fr 1fr; gap: 64px; } }
.sellers .eyebrow { color: var(--lime); }
.sellers .eyebrow::before { background: linear-gradient(90deg, var(--lime) 0 62%, transparent 62% 74%, var(--lime) 74%); }
.sellers .sec-head { margin-bottom: 0; }
.sellers .lead { color: var(--on-dark-muted); }
.seller-points { display: grid; gap: 14px; }
.seller-points li { display: flex; gap: 18px; padding: 22px; border-radius: var(--r-l); background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--on-dark-line); }
.sp-ic { display: grid; place-items: center; flex: none; width: 54px; height: 54px; border-radius: 50%; }
.sp-ic .ic { width: 26px; height: 26px; stroke-width: 2.4; }
.sp-1 { background: var(--lime); color: var(--ink); }
.sp-2 { background: #fff; color: var(--pink); }
.sp-3 { background: var(--violet); color: #fff; }
.seller-points h3 { font-size: 22px; margin-bottom: 6px; }
.seller-points p { color: var(--on-dark-muted); font-size: 16px; }

/* ---------- pricing ---------- */
.pricing { background: var(--cloud); }
.plans { display: grid; gap: 16px; align-items: stretch; max-width: 1080px; margin-inline: auto; }
/* three equally wide cards whatever the language or the billing: a long price may not widen its column (Mathijs, 3 Nov 2026) */
@media (min-width: 900px) { .plans { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.plan-wrap { display: flex; min-width: 0; }
.plan { position: relative; display: flex; flex-direction: column; width: 100%; min-width: 0; padding: 30px 26px 26px; border-radius: 28px; background: #fff; box-shadow: var(--shadow-1); }
.plan-pop { border: 2px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--grad) border-box; box-shadow: 0 30px 60px -24px rgba(124, 58, 237, .45); }
@media (min-width: 900px) { .plan-pop { margin-block: -12px; padding-top: 40px; } }
/* Populair on the left edge, −20% on the right edge: on a narrow card the two never touch */
.plan-badge { position: absolute; left: 26px; top: 0; translate: 0 -50%; padding: 8px 14px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 800 12.5px/1 var(--sans); letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; }
.plan-name { font-size: 28px; }
.plan-hint { margin-top: 4px; color: var(--muted); font-size: 15px; }
/* monthly or yearly (round 3): one switch above the plans shows one of the two prices that are in every card */
.bill { display: flex; width: fit-content; max-width: 100%; margin: 0 auto clamp(34px, 4.6vw, 52px); padding: 5px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line), var(--shadow-1); }
.no-js .bill { display: none; }
.bill-opt { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 46px; padding: 0 20px; border: 0; border-radius: 999px; background: transparent; color: var(--muted); font: 700 15.5px/1 var(--sans); white-space: nowrap; cursor: pointer; transition: background-color .25s, color .25s; -webkit-tap-highlight-color: transparent; }
.bill-opt:hover { color: var(--ink); }
.bill-opt[aria-pressed="true"] { background: var(--ink); color: #fff; }
.bill-save { padding: 5px 8px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 800 11.5px/1 var(--sans); letter-spacing: .02em; }
@media (max-width: 374px) { .bill-opt { gap: 6px; padding: 0 13px; font-size: 14.5px; } .bill-save { padding: 4px 6px; font-size: 10.5px; } }
.plan-price { display: grid; gap: 8px; margin: 22px 0 18px; }
/* the price, and next to it "per month" with (yearly) the monthly price struck through above it: one line, so the
   cards never jump when you switch */
.pp { display: flex; align-items: flex-end; align-items: last baseline; gap: 10px; }
.pp b { font: 800 clamp(46px, 5vw, 58px)/1 var(--display); letter-spacing: -.045em; white-space: nowrap; }
@media (min-width: 900px) { .pp b { font-size: clamp(42px, 4.6vw, 58px); } } /* "79,20 €" fits the narrowest three-up card */
/* the struck price stays small enough that it never pushes the big price down: the card is exactly as tall on yearly as on monthly */
.pp span { display: grid; justify-items: start; gap: 1px; color: var(--muted); font-weight: 600; font-size: 15px; line-height: 1.2; white-space: nowrap; }
.pp s { color: var(--faint); font: 700 17px/1 var(--display); letter-spacing: -.02em; text-decoration-color: var(--pink); text-decoration-thickness: 2.5px; }
.pp-note { color: var(--muted); font-size: 14px; font-weight: 600; line-height: 1.35; }
.pricing[data-billing="year"] .pp-month, .pricing[data-billing="month"] .pp-year { display: none; }
.pricing.is-switched .plan-price, .pricing.is-switched .plan-off { animation: pop .35s var(--spring); }
/* −20% on every card in yearly mode: a tag on the card's edge, so the card itself does not grow (Mathijs, 3 Nov 2026) */
.plan-off { position: absolute; right: 26px; top: 0; translate: 0 -50%; padding: 7px 11px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 800 13.5px/1 var(--sans); letter-spacing: .01em; white-space: nowrap; box-shadow: 0 6px 14px -6px rgba(28, 11, 64, .35); }
.plan-list { display: grid; gap: 11px; margin-bottom: 26px; font-size: 15.5px; }
.plan-list li { display: flex; align-items: flex-start; gap: 10px; line-height: 1.4; }
.plan-list .ic { width: 19px; height: 19px; margin-top: 1px; color: var(--violet); }
.plan-list li:nth-child(-n+2) { font-weight: 700; }
/* "Alles van Starter, plus:" above what a bigger plan adds; the list fills the card so the buttons line up */
.plan-list { flex: 1 0 auto; align-content: start; }
.plan-list .plan-plus { margin-top: 3px; color: var(--ink); font-size: 14.5px; font-weight: 800; }
.plan .btn { margin-top: auto; }
/* icon and text stay together: when the line wraps on a phone, the text runs left from the icon */
.plans-note { display: flex; align-items: flex-start; justify-content: center; gap: 8px; margin-top: 22px; color: var(--muted); font-size: 15px; }
.plans-note .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--violet); }
.plans-note a { color: var(--violet); font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 3px; }
.plans-note + .plans-note { margin-top: 10px; }
.sales-line { display: flex; align-items: flex-start; gap: 8px; margin: 16px 0 0; color: var(--muted); font-size: 14.5px; }
.sales-line .ic { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--violet); }
.sales-line a { color: var(--violet); font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.packs { display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.pack { position: relative; display: grid; gap: 4px; padding: 20px 18px 18px; border-radius: 22px; background: var(--cloud); box-shadow: inset 0 0 0 1px var(--line); }
.pack-best { background: var(--violet-50); box-shadow: inset 0 0 0 2px var(--violet); }
.pack-badge { position: absolute; right: 14px; top: -11px; padding: 6px 10px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 800 11px/1 var(--sans); letter-spacing: .05em; text-transform: uppercase; }
.pack-n { font-size: 16px; font-weight: 700; }
.pack-n b { font: 800 40px/1 var(--display); letter-spacing: -.04em; }
.pack-shorts { margin-bottom: 12px; color: var(--muted); font-size: 14.5px; }
.buy-locked { display: grid; justify-items: start; gap: 14px; margin-top: 16px; padding: 18px; border-radius: 20px; background: var(--violet-50); box-shadow: inset 0 0 0 1px var(--violet-100); }
.buy-locked p { display: flex; align-items: flex-start; gap: 10px; margin: 0; font-weight: 600; }
.buy-locked p .ic { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--violet); }
.credits-how { max-width: 1080px; margin: clamp(34px, 5vw, 52px) auto 0; padding: clamp(22px, 3vw, 30px); border-radius: 28px; background: var(--violet); color: #fff; position: relative; overflow: hidden; }
.credits-how h3 { display: flex; align-items: center; gap: 10px; font-size: 24px; margin-bottom: 16px; }
.credits-how h3 .ic { width: 24px; height: 24px; color: var(--lime); }
.credits-how ul { display: grid; gap: 10px 26px; }
@media (min-width: 760px) { .credits-how ul { grid-template-columns: 1fr 1fr; } }
.credits-how li { position: relative; padding-left: 22px; color: rgba(255, 255, 255, .92); font-size: 15.5px; }
.credits-how li::before { content: ""; position: absolute; left: 0; top: .55em; width: 10px; height: 10px; border-radius: 3px; background: var(--lime); }
.vat { margin-top: 16px; color: rgba(255, 255, 255, .72); font-size: 13.5px; }

/* ---------- swipe rows on phones (Mathijs, 3 Nov 2026: "heel veel scrollen"). A card group lies side by side and
   swipes sideways, one card at a time: the next card peeks in at the edge, the dots below show where you are
   (site.js). Native scrolling with scroll-snap; nothing moves by itself, only "Zo werkt het" follows its own loop.
   The padding above and below gives badges and shadows room, the negative margin keeps the spacing as it was.
   Headings, FAQ and footer stay as they are, and on a computer nothing changes. The plans swipe up to 900px wide,
   where they stand three in a row; they snap to the middle and start on the popular one. ---------- */
.swipe-dots { display: none; justify-content: center; gap: 6px; margin-top: 16px; }
.swipe-dots i { width: 7px; height: 7px; border-radius: 4px; background: rgba(21, 18, 29, .16); transition: width .35s var(--ease), background-color .35s; }
.swipe-dots i.is-on { width: 22px; background: var(--violet); }
.sellers .swipe-dots i { background: rgba(255, 255, 255, .24); }
.sellers .swipe-dots i.is-on { background: var(--lime); }
[data-swipe]:focus-visible { outline: 3px solid var(--violet); outline-offset: -3px; border-radius: 14px; }
@media (max-width: 899px) {
  .plans[data-swipe] {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: min(calc(100% - 52px), 400px); gap: 12px;
    max-width: none; margin: -20px calc(-1 * var(--gutter)) -40px; padding: 20px var(--gutter) 40px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .plans[data-swipe] > * { scroll-snap-align: center; }
  .plans[data-swipe] .plan-pop { box-shadow: 0 18px 34px -20px rgba(124, 58, 237, .5); }
  .plans[data-swipe] .plan { padding: 26px 22px 22px; }
  .plans[data-swipe] .plan-list { gap: 8px; margin-bottom: 22px; font-size: 15px; }
  .plans[data-swipe] + .swipe-dots { display: flex; }
}
@media (max-width: 719px) {
  .how-steps[data-swipe], .bento[data-swipe], .seller-points[data-swipe] {
    display: grid; grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: calc(100% - 26px); gap: 12px;
    margin: -20px calc(-1 * var(--gutter)) -40px; padding: 20px var(--gutter) 40px;
    overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gutter); scrollbar-width: none;
  }
  .how-steps[data-swipe] > *, .bento[data-swipe] > *, .seller-points[data-swipe] > * { scroll-snap-align: start; }
  .bento[data-swipe] > .card { grid-column: auto; }
  /* every card is as tall as the tallest; the picture takes the extra room. The caption styles card was by far the
     tallest, so on a phone it leaves out the small "Kies je stijl" line and the hint under "Eigen stijl". */
  .bento[data-swipe] .viz { flex: 1 0 auto; }
  .bento[data-swipe] .cs-pick, .bento[data-swipe] .cs-own-txt small { display: none; }
  .bento[data-swipe] .cs-tabs { gap: 6px; }
  .bento[data-swipe] .card-violet { box-shadow: 0 18px 34px -22px rgba(124, 58, 237, .8); }
  .how-steps[data-swipe] > .hstep { background: rgba(255, 255, 255, .55); }
  .how-steps[data-swipe] > .hstep.is-on { background: #fff; }
  .swipe-dots { display: flex; }
  /* a little less room between the blocks */
  .sec { padding: 64px 0; }
  .sec-head { margin-bottom: 32px; }
  .sellers-row { gap: 28px; }
}
[data-swipe]::-webkit-scrollbar { display: none; }

/* ---------- FAQ ---------- */
.faq { background: #fff; }
.faq-row { display: grid; gap: 28px; }
@media (min-width: 1020px) { .faq-row { grid-template-columns: .8fr 1.2fr; gap: 64px; } .faq .sec-head { position: sticky; top: calc(var(--hdr-h) + 32px); align-self: start; } }
.faq-list { display: grid; }
.faq-more { display: flex; align-items: flex-start; gap: 14px; margin-top: 28px; padding: 18px 20px; border-radius: 22px; background: var(--cloud); box-shadow: inset 0 0 0 1px var(--line); text-decoration: none; transition: box-shadow .2s, transform .25s var(--spring); }
.faq-more:hover { box-shadow: inset 0 0 0 1.5px var(--violet); transform: translateY(-2px); }
.faq-more-ic { display: grid; place-items: center; flex: none; width: 44px; height: 44px; border-radius: 14px; background: var(--violet); color: #fff; }
.faq-more-ic .ic { width: 20px; height: 20px; }
.faq-more-txt { display: grid; gap: 2px; min-width: 0; font-size: 15px; line-height: 1.45; color: var(--muted); }
.faq-more-txt b { color: var(--ink); font: 800 18px/1.25 var(--display); letter-spacing: -.01em; }
.faq-more-txt u { margin-top: 4px; color: var(--violet); font-weight: 700; text-decoration-thickness: 1.5px; text-underline-offset: 3px; overflow-wrap: anywhere; }
.qa { border-bottom: 1px solid var(--line); }
.qa:first-child { border-top: 1px solid var(--line); }
.qa summary { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 22px 4px; font: 700 clamp(17px, 1.6vw, 19.5px)/1.35 var(--sans); cursor: pointer; list-style: none; }
.qa summary::-webkit-details-marker { display: none; }
.qa summary:hover { color: var(--violet); }
.qa-plus { position: relative; flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--cloud); transition: background-color .25s, rotate .35s var(--spring); }
.qa-plus::before, .qa-plus::after { content: ""; position: absolute; left: 50%; top: 50%; width: 14px; height: 2.5px; margin: -1.25px 0 0 -7px; border-radius: 2px; background: var(--ink); }
.qa-plus::after { rotate: 90deg; }
.qa[open] .qa-plus { rotate: 135deg; background: var(--lime); }
.qa-a { padding: 0 52px 24px 4px; color: var(--muted); font-size: 16.5px; }
.qa-a a { color: var(--violet); font-weight: 700; }
.qa[open] .qa-a { animation: fade .35s var(--ease); }
/* the first questions are open to read; the rest come with one tap (site.js adds is-short, so without it all show) */
.faq-list.is-short .qa-more { display: none; }
.faq-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 8px; justify-self: start; margin-top: 24px; padding: 13px 20px 13px 22px; border: 0; border-radius: 999px; background: var(--cloud); box-shadow: inset 0 0 0 1px var(--line); color: var(--ink); font: 700 15.5px/1 var(--sans); cursor: pointer; transition: box-shadow .2s, color .2s, transform .25s var(--spring); -webkit-tap-highlight-color: transparent; }
.faq-toggle:hover { box-shadow: inset 0 0 0 1.5px var(--violet); color: var(--violet); }
.faq-toggle:active { transform: scale(.98); }
.faq-toggle .ic { width: 18px; height: 18px; transition: rotate .3s var(--ease); }
.faq-toggle[aria-expanded="true"] .ic { rotate: 180deg; }

/* ---------- final call to action ---------- */
.cta { position: relative; isolation: isolate; overflow: hidden; padding: clamp(84px, 10vw, 140px) 0; background: radial-gradient(1200px 600px at 85% 0%, #9B5CF7 0%, transparent 60%), radial-gradient(900px 500px at 0% 100%, #C026D3 0%, transparent 55%), var(--violet); color: #fff; }
.cta-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cta-mark { position: absolute; width: min(760px, 90vw); right: -8%; bottom: -30%; opacity: .12; }
.cta-row { display: grid; gap: 36px; align-items: center; }
@media (min-width: 1020px) { .cta-row { grid-template-columns: 1fr auto; } }
.cta-copy { display: grid; justify-items: start; gap: 22px; }
.cta-icon { width: 76px; height: 76px; rotate: -8deg; border-radius: 18px; box-shadow: 0 0 0 4px rgba(255, 255, 255, .25), 0 20px 40px -12px rgba(0, 0, 0, .45); }
.cta h2 { font-size: clamp(42px, 6.6vw, 84px); line-height: .95; letter-spacing: -.045em; max-width: 12em; }
.cta .lead { color: rgba(255, 255, 255, .88); }
.cta .store { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), 0 18px 34px -16px rgba(0, 0, 0, .55); }
.cta .qr { box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .45); max-width: 320px; padding: 14px 22px 14px 14px; }
.cta .qr-code { width: 132px; height: 132px; padding: 10px; }
.cta .qr-logo { width: 30px; height: 30px; padding: 3px; border-radius: 9px; }
.cta .qr-txt b { font-size: 20px; }

/* ---------- footer ---------- */
/* the newsletter at the top of the footer, on every page. Double opt-in: the form only sends a mail with a link */
.news { position: relative; display: grid; gap: 22px 44px; align-items: center; margin-bottom: clamp(48px, 6vw, 72px); padding: clamp(22px, 3.4vw, 38px); border-radius: 28px; color: #fff; overflow: hidden;
  background: radial-gradient(60% 120% at 100% 0%, rgba(236, 72, 153, .5), rgba(236, 72, 153, 0) 62%), radial-gradient(60% 110% at 0% 100%, rgba(167, 139, 250, .55), rgba(167, 139, 250, 0) 70%), var(--violet); }
@media (min-width: 900px) { .news { grid-template-columns: minmax(0, 1fr) minmax(0, 1.08fr); } }
.news-title { display: flex; align-items: center; gap: 14px; color: #fff; font-size: clamp(26px, 3vw, 34px); letter-spacing: -.03em; }
.news-ic { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border-radius: 15px; background: var(--lime); color: var(--ink); rotate: -6deg; box-shadow: 0 10px 22px -10px rgba(30, 6, 70, .7); }
.news-ic .ic { width: 23px; height: 23px; }
.news-text { margin-top: 12px; color: rgba(255, 255, 255, .9); font-size: 16.5px; line-height: 1.5; }
.news-side { display: grid; gap: 12px; min-width: 0; }
.news-row { display: flex; gap: 6px; padding: 6px; border-radius: 999px; background: #fff; box-shadow: 0 18px 36px -18px rgba(30, 6, 70, .75); transition: box-shadow .2s; }
.news-row:focus-within { box-shadow: 0 0 0 3px var(--lime), 0 18px 36px -18px rgba(30, 6, 70, .75); }
.news-input { flex: 1 1 auto; min-width: 0; height: 50px; padding: 0 10px 0 18px; border: 0; border-radius: 999px; background: transparent; color: var(--ink); font: 600 16px/1 var(--sans); }
.news-input::placeholder { color: var(--faint); opacity: 1; }
.news-input:focus-visible { outline: none; }
.news-btn { flex: none; }
.news.is-busy .news-btn { opacity: .7; cursor: progress; }
.news.is-wrong .news-row { animation: shake .3s; }
.news-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.news-note { padding-left: 8px; color: rgba(255, 255, 255, .8); font-size: 13.5px; line-height: 1.45; }
.news-note a { color: #fff; font-weight: 700; }
.news-done { display: flex; align-items: flex-start; gap: 12px; padding: 14px 18px 15px 14px; border-radius: 22px; background: #fff; color: var(--ink); animation: pop .4s var(--spring); }
.news-done-ic { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; background: var(--lime); }
.news-done-ic .ic { width: 19px; height: 19px; stroke-width: 3; }
.news-done p { display: grid; gap: 3px; color: var(--muted); font-size: 15px; line-height: 1.45; }
.news-done b { color: var(--ink); font: 800 18px/1.2 var(--display); letter-spacing: -.01em; }
.news-test { padding: 10px 14px; border-radius: 14px; background: rgba(21, 18, 29, .28); color: #fff; font-size: 13.5px; line-height: 1.4; }
.news-test a { color: var(--lime); font-weight: 800; }
.news-err { padding: 10px 14px; border-radius: 14px; background: #fff; color: var(--bad); font: 700 14px/1.4 var(--sans); }
@media (max-width: 520px) {
  .news-row { flex-direction: column; gap: 10px; padding: 0; background: none; box-shadow: none; }
  .news-row:focus-within { box-shadow: none; }
  .news-input { height: 54px; background: #fff; box-shadow: 0 14px 30px -18px rgba(30, 6, 70, .8); }
  .news-input:focus-visible { box-shadow: 0 0 0 3px var(--lime); }
  .news-btn { width: 100%; height: 54px; }
  .news-note { padding-left: 2px; }
}
.ftr { background: var(--ink-900); color: var(--on-dark-muted); padding: clamp(56px, 7vw, 84px) 0 calc(28px + env(safe-area-inset-bottom, 0px)); }
.ftr-grid { display: grid; gap: 36px 24px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.ftr-brand { grid-column: 1 / -1; display: grid; justify-items: start; gap: 16px; }
@media (min-width: 900px) { .ftr-grid { grid-template-columns: 1.6fr repeat(3, 1fr); } .ftr-brand { grid-column: auto; } }
.ftr-logo { height: 36px; width: auto; }
.ftr-tag { color: #fff; font: 800 22px/1.15 var(--display); letter-spacing: -.02em; }
.ftr-social { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.ftr-social p { color: var(--on-dark-muted); font: 700 13.5px/1 var(--sans); }
.ftr-social ul { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ftr-social a, .ftr-social .is-soon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(255, 255, 255, .08); color: #fff; transition: background-color .2s, color .2s, transform .25s var(--spring); }
.ftr-social a:hover { background: var(--violet); transform: translateY(-2px); }
.ftr-social .is-soon { color: rgba(255, 255, 255, .55); cursor: default; }
.ftr-social .ic { width: 18px; height: 18px; }
.ftr-col { display: grid; align-content: start; gap: 10px; }
.ftr-col h2 { margin-bottom: 4px; color: #fff; font: 800 13px/1 var(--sans); letter-spacing: .12em; text-transform: uppercase; }
.ftr-col a { width: fit-content; font-size: 15.5px; text-decoration: none; transition: color .2s; }
.ftr-col a:hover { color: #fff; }
.ftr-bottom { position: relative; display: grid; gap: 10px; margin-top: 52px; padding-top: 24px; font-size: 13.5px; }
.ftr-bottom::before { content: ""; position: absolute; top: 0; left: var(--gutter); right: var(--gutter); border-top: 1px solid var(--on-dark-line); }
.ftr-co { display: flex; flex-wrap: wrap; gap: 4px 0; }
.ftr-co > * + *::before { content: "·"; margin: 0 9px; opacity: .5; }
.ftr-co a { text-decoration: none; }
.ftr-co a:hover { color: #fff; }
@media (max-width: 640px) { .ftr-co { display: grid; gap: 4px; } .ftr-co > * + *::before { content: none; } }
.ftr-legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px 20px; opacity: .8; }
.ftr-made { display: inline-flex; align-items: center; gap: 7px; }
.ftr-mark { width: 16px; height: 16px; }

/* ---------- sticky download bar (phones) ---------- */
.sticky { position: fixed; z-index: 55; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); display: none; align-items: center; gap: 11px; padding: 9px 9px 9px 10px; border-radius: 20px; background: rgba(21, 18, 29, .92); -webkit-backdrop-filter: blur(16px) saturate(1.4); backdrop-filter: blur(16px) saturate(1.4); color: #fff; box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55), inset 0 0 0 1px rgba(255, 255, 255, .1); transform: translateY(140%); transition: transform .45s var(--spring); }
.sticky.is-on { transform: none; }
.sticky-icon { width: 42px; height: 42px; flex: none; }
.sticky p { display: grid; gap: 2px; min-width: 0; font-size: 13px; line-height: 1.2; color: var(--on-dark-muted); }
.sticky b { color: #fff; font: 800 16px/1.1 var(--display); }
.sticky .btn { margin-left: auto; }
@media (max-width: 760px) { .sticky { display: flex; } }

/* language tip */
.langtip { position: fixed; z-index: 56; left: 16px; bottom: calc(16px + env(safe-area-inset-bottom, 0px)); display: flex; align-items: center; gap: 10px; max-width: min(440px, calc(100vw - 32px)); padding: 10px 10px 10px 16px; border-radius: 18px; background: #fff; color: var(--ink); box-shadow: var(--shadow-2), 0 0 0 1px rgba(21, 18, 29, .06); font-size: 14.5px; opacity: 0; transform: translateY(12px); transition: opacity .3s, transform .4s var(--spring); }
.langtip.is-on { opacity: 1; transform: none; }
.langtip p { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; }
.langtip a { color: var(--violet); font-weight: 800; }
.langtip button { display: grid; place-items: center; width: 40px; height: 40px; margin-left: auto; border: 0; border-radius: 50%; background: var(--cloud); cursor: pointer; flex: none; }
.langtip button .ic { width: 16px; height: 16px; }
@media (max-width: 760px) { .langtip { bottom: calc(86px + env(safe-area-inset-bottom, 0px)); } }

/* toast */
.toast { position: fixed; z-index: 90; left: 50%; bottom: calc(24px + env(safe-area-inset-bottom, 0px)); max-width: min(480px, calc(100vw - 32px)); padding: 13px 18px; border-radius: 16px; background: var(--ink); color: #fff; font: 600 15px/1.4 var(--sans); box-shadow: 0 18px 40px -12px rgba(0, 0, 0, .55); translate: -50% 0; opacity: 0; transform: translateY(14px); transition: opacity .3s, transform .4s var(--spring); }
.toast.is-on { opacity: 1; transform: none; }

/* ---------- pages for signing in, the account, legal texts ---------- */
.page-app main { min-height: calc(100vh - var(--hdr-h)); min-height: calc(100svh - var(--hdr-h)); }
.field { display: grid; gap: 8px; }
.field > span { font: 700 14px/1.2 var(--sans); }
.field input, .inline input { width: 100%; height: 54px; padding: 0 16px; border: 1.5px solid var(--line); border-radius: 15px; background: #fff; color: var(--text); font: 500 17px/1 var(--sans); transition: border-color .2s, box-shadow .2s; }
.field input::placeholder, .inline input::placeholder { color: #A39EB3; }
.field input:focus, .inline input:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 4px rgba(124, 58, 237, .14); }
.form-error { padding: 11px 14px; border-radius: 13px; background: #FDE8EF; color: var(--bad); font: 700 14.5px/1.4 var(--sans); }
.form-ok { padding: 11px 14px; border-radius: 13px; background: #E7F8EC; color: var(--good); font: 700 14.5px/1.4 var(--sans); }

.auth { padding: clamp(28px, 6vw, 72px) 0 clamp(64px, 8vw, 110px); }
.auth-row { display: grid; gap: 24px; align-items: start; max-width: 1040px; }
@media (min-width: 900px) { .auth-row { grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr); gap: 32px; } }
.auth-card { padding: clamp(24px, 4vw, 44px); border-radius: var(--r-xl); background: #fff; box-shadow: var(--shadow-2); }
.auth-icon { width: 58px; height: 58px; margin-bottom: 22px; rotate: -6deg; }
.auth-step { display: grid; gap: 18px; }
.auth-step h1 { font-size: clamp(32px, 4vw, 42px); }
.auth-step > .muted { margin-top: -8px; font-size: 16.5px; }
.auth-small { display: flex; align-items: center; gap: 8px; color: var(--muted); font-size: 14.5px; }
.auth-small .ic { width: 16px; height: 16px; color: var(--violet); }
.auth-links { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; }
.auth-status { color: var(--muted); font: 600 15px/1.3 var(--sans); min-height: 1.3em; }
.auth-terms { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--muted); font-size: 13.5px; }
.auth-terms a { color: var(--violet); font-weight: 700; }
.auth-side { padding: clamp(24px, 3.4vw, 36px); border-radius: var(--r-xl); background: var(--ink); color: var(--on-dark); position: relative; overflow: hidden; }
.auth-side::after { content: ""; position: absolute; right: -120px; bottom: -160px; width: 360px; height: 360px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 58, 237, .6), transparent); pointer-events: none; }
.auth-side h2 { font-size: 26px; margin-bottom: 16px; position: relative; }
.auth-side ul { display: grid; gap: 12px; margin-bottom: 20px; position: relative; }
.auth-side li { display: flex; align-items: center; gap: 12px; font-weight: 600; }
.auth-side li .ic { width: 20px; height: 20px; color: var(--lime); }
.auth-side-app { display: flex; gap: 10px; align-items: center; margin-bottom: 18px; color: var(--on-dark-muted); font-size: 15px; position: relative; }
.auth-side-app .ic { width: 20px; height: 20px; color: var(--violet-400); }
.auth-side .stores { position: relative; }
.auth-side .qr { position: relative; z-index: 1; margin-top: 20px; box-shadow: 0 26px 50px -24px rgba(0, 0, 0, .7); } /* above the glow */
.testcode { display: grid; gap: 4px; padding: 14px 16px; border-radius: 16px; background: var(--lime); color: var(--ink); }
.testcode b { font: 800 12px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; }
.testcode span { font-size: 14px; }
.testcode code { font: 800 28px/1.1 var(--mono); letter-spacing: .25em; }
.code { display: flex; gap: clamp(6px, 1.4vw, 10px); margin: 0; padding: 0; border: 0; min-width: 0; }
.code input { flex: 1 1 0; min-width: 0; width: 100%; height: clamp(56px, 8vw, 66px); padding: 0; border: 1.5px solid var(--line); border-radius: 16px; background: var(--cloud); color: var(--ink); font: 800 clamp(24px, 3.4vw, 30px)/1 var(--display); text-align: center; caret-color: var(--violet); transition: border-color .2s, box-shadow .2s, background-color .2s, transform .2s var(--spring); }
.code input:focus { outline: none; border-color: var(--violet); background: #fff; box-shadow: 0 0 0 4px rgba(124, 58, 237, .14); }
.code input.is-filled { border-color: var(--violet); background: #fff; }
.code.is-wrong input { border-color: var(--bad); animation: shake .4s; }
.code input:disabled { opacity: .6; }

.acct { padding: clamp(28px, 5vw, 56px) 0 clamp(64px, 8vw, 110px); }
.acct-loading { display: flex; align-items: center; gap: 12px; padding: 60px 0; color: var(--muted); font-weight: 600; }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 3px solid var(--violet-100); border-top-color: var(--violet); animation: spin .8s linear infinite; }
.acct-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 26px; }
.acct-head h1 { font-size: clamp(36px, 5vw, 56px); letter-spacing: -.04em; }
.acct-head p { margin-top: 6px; }
.acct-grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-items: start; }
@media (min-width: 1020px) { .acct-grid { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 22px; } }
.acct-col { display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; min-width: 0; }
.panel { padding: clamp(20px, 2.6vw, 28px); border-radius: var(--r-l); background: #fff; box-shadow: var(--shadow-1); }
.panel h2 { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; font-size: 22px; letter-spacing: -.02em; }
.panel h2 .ic { width: 21px; height: 21px; color: var(--violet); }
.panel > .muted { font-size: 15.5px; }
.panel-ink { background: var(--ink); color: var(--on-dark); box-shadow: none; }
.panel-ink h2 .ic { color: var(--lime); }
.panel-ink p { color: var(--on-dark-muted); }
.panel-ink .stores { margin-top: 16px; }
.panel-danger h2 .ic { color: var(--bad); }
.panel-danger .btn { margin-top: 14px; }
.credit { position: relative; overflow: hidden; padding: clamp(22px, 3vw, 32px); border-radius: var(--r-xl); background: var(--violet); color: #fff; box-shadow: 0 30px 60px -28px rgba(124, 58, 237, .8); }
.credit-mark { position: absolute; right: -40px; bottom: -70px; width: 260px; opacity: .12; pointer-events: none; }
.credit-top { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 12px; font: 700 15px/1 var(--sans); color: rgba(255, 255, 255, .85); }
.credit-plan { padding: 7px 12px; border-radius: 999px; background: rgba(255, 255, 255, .16); color: #fff; font: 800 13px/1 var(--sans); }
.credit-num { position: relative; margin: 14px 0 16px; font: 800 clamp(56px, 8vw, 84px)/.9 var(--display); letter-spacing: -.05em; font-variant-numeric: tabular-nums; }
.credit-low { display: inline-block; margin-left: 10px; padding: 6px 10px; border-radius: 999px; background: var(--pink); vertical-align: middle; font: 800 12px/1 var(--sans); letter-spacing: .04em; }
.meter { position: relative; height: 10px; border-radius: 99px; background: rgba(255, 255, 255, .22); overflow: hidden; }
.meter i { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--lime); transition: width 1s var(--ease); }
.credit-sub { position: relative; display: grid; gap: 4px; margin-top: 14px; color: rgba(255, 255, 255, .88); font-size: 15px; }
.packs-acct { margin-top: 16px; }
.packs-acct .pack { background: var(--cloud); }
.plan-text { margin-top: 4px; font-size: 16.5px; }
.manage { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.manage a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: var(--cloud); box-shadow: inset 0 0 0 1px var(--line); font: 700 14px/1 var(--sans); text-decoration: none; }
.manage a:hover { box-shadow: inset 0 0 0 1.5px var(--ink); }
.manage .ic { width: 16px; height: 16px; }
.history { display: grid; margin-top: 10px; }
.history li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2px 14px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.history li:last-child { border-bottom: 0; }
.history .h-label { font-weight: 600; font-size: 15.5px; overflow-wrap: anywhere; }
.history .h-date { grid-column: 1; color: var(--faint); font-size: 13px; }
.history .h-amount { grid-column: 2; grid-row: 1 / span 2; align-self: center; font: 800 17px/1 var(--display); font-variant-numeric: tabular-nums; }
.history .h-plus { color: var(--good); }
.history .h-empty { color: var(--muted); border: 0; grid-template-columns: 1fr; }
.refcode { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 16px 0 12px; }
.refcode code { flex: 1 1 auto; padding: 12px 16px; border-radius: 14px; background: var(--lime); color: var(--ink); font: 800 26px/1 var(--mono); letter-spacing: .18em; text-align: center; }
.refcode .btn .ic { width: 16px; height: 16px; }
.redeem-ok { margin-top: 14px; }
.plan-manage { margin-top: 14px; }
/* the plan on the account page: start, change or cancel it (account.js). Same plans, prices and switch as the homepage */
.plan-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; }
.plan-actions .btn .ic { width: 16px; height: 16px; }
.pick { display: grid; gap: 12px; margin-top: 16px; }
.pick[hidden] { display: none; }
.pick .bill { margin: 0 0 2px; padding: 4px; box-shadow: inset 0 0 0 1px var(--line); }
.pick .bill-opt { height: 40px; padding: 0 16px; font-size: 14.5px; }
.pick[data-billing="year"] .pp-month, .pick[data-billing="month"] .pp-year { display: none; }
.pick-list { display: grid; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; }
.pick-row { position: relative; display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 14px 16px; border-radius: 18px; background: var(--cloud); box-shadow: inset 0 0 0 1px var(--line); cursor: pointer; transition: box-shadow .2s var(--ease), background-color .2s var(--ease); }
.pick-row:hover { box-shadow: inset 0 0 0 1.5px var(--violet-400); }
.pick-row:has(input:checked) { background: var(--violet-50); box-shadow: inset 0 0 0 2px var(--violet); }
.pick-row:has(input:focus-visible) { outline: 3px solid var(--violet-400); outline-offset: 2px; }
.pick-row input { appearance: none; -webkit-appearance: none; flex: none; width: 22px; height: 22px; margin: 0; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--line); transition: box-shadow .2s var(--ease); cursor: pointer; }
.pick-row input:checked { box-shadow: inset 0 0 0 2px var(--violet), inset 0 0 0 6px #fff, inset 0 0 0 12px var(--violet); }
.pick-row input:focus-visible { outline: none; }
.pick-main { display: grid; gap: 3px; min-width: 0; }
.pick-main b { font: 800 17px/1.15 var(--display); letter-spacing: -.01em; }
.pick-main small { color: var(--muted); font-size: 13.5px; line-height: 1.35; }
.pick-pop { display: inline-block; margin-left: 4px; padding: 4px 8px; border-radius: 999px; background: var(--lime); color: var(--ink); font: 800 11px/1 var(--sans); font-style: normal; letter-spacing: .02em; vertical-align: 2px; }
.pick-price { display: grid; justify-items: end; gap: 2px; text-align: right; white-space: nowrap; }
.pick-price b { font: 800 20px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pick-price small { color: var(--muted); font-size: 12.5px; }
.pick-note { margin: 0; color: var(--muted); font-size: 14px; line-height: 1.5; }
.pick-close { justify-self: center; }
@media (max-width: 374px) { .pick-row { gap: 10px; padding: 12px; } .pick-price b { font-size: 18px; } }
/* on/off switch (the newsletter) */
.switch { position: relative; display: inline-block; width: 52px; height: 32px; flex: none; }
.switch input { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.switch i { position: absolute; inset: 0; border-radius: 999px; background: #D9D4E6; transition: background-color .2s; }
.switch i::after { content: ""; position: absolute; left: 3px; top: 3px; width: 26px; height: 26px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(21, 18, 29, .25); transition: transform .3s var(--spring); }
.switch input:checked + i { background: var(--violet); }
.switch input:checked + i::after { transform: translateX(20px); }
.switch input:focus-visible + i { outline: 3px solid var(--pink); outline-offset: 3px; }
.switch input:disabled { cursor: wait; }
.ref-stats { color: var(--muted); font-size: 14.5px; }
.redeem { display: grid; gap: 10px; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); }
.inline { display: flex; gap: 8px; }
.inline input { flex: 1 1 0%; width: 0; min-width: 0; text-transform: uppercase; letter-spacing: .1em; font-weight: 700; }
.inline input::placeholder { text-transform: none; letter-spacing: 0; font-weight: 500; }
.inline .btn { height: 54px; }
.details { display: grid; margin-top: 8px; }
.drow { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 2px 12px; padding: 13px 0; border-bottom: 1px solid var(--line); }
.drow:last-child { border-bottom: 0; }
.drow .dt { color: var(--faint); font-size: 13px; font-weight: 600; }
.drow .dd { grid-column: 1; margin: 0; font-weight: 700; overflow-wrap: anywhere; }
.drow .dd-soft { font-weight: 500; color: var(--muted); font-size: 15px; line-height: 1.4; }
.drow-wide .dd { grid-column: 1 / -1; }
.drow .link, .drow .switch { grid-column: 2; grid-row: 1 / span 2; }
.drow form { grid-column: 1 / -1; display: grid; gap: 10px; margin-top: 8px; }
.drow form .row { display: flex; gap: 8px; }
.seg-switch { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.seg-switch a { padding: 10px 14px; border-radius: 999px; background: var(--cloud); box-shadow: inset 0 0 0 1px var(--line); font: 700 14.5px/1 var(--sans); text-decoration: none; }
.seg-switch a[aria-current] { background: var(--ink); color: #fff; box-shadow: none; }
.acct-error { padding: 40px 0; display: grid; gap: 16px; justify-items: start; }

/* dialogs (credits, new e-mail address, delete) */
.modal { width: min(460px, calc(100vw - 24px)); max-height: calc(100vh - 24px); max-height: calc(100dvh - 24px); margin: auto; padding: 0; border: 0; border-radius: 28px; background: #fff; color: var(--text); box-shadow: 0 40px 100px -20px rgba(14, 12, 20, .6); overflow: auto; }
.modal::backdrop { background: rgba(14, 12, 20, .58); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.modal[open] { animation: pop .3s var(--spring); }
.modal-body { position: relative; display: grid; gap: 16px; padding: 28px 24px 24px; }
.modal-body h2 { font-size: 28px; padding-right: 40px; }
.modal-x { position: absolute; right: 14px; top: 14px; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: var(--cloud); cursor: pointer; }
.modal-x .ic { width: 18px; height: 18px; }
.co-item { display: flex; align-items: center; gap: 14px; padding: 14px; border-radius: 18px; background: var(--cloud); }
.co-item .appicon { width: 46px; height: 46px; flex: none; }
.co-item div { display: grid; gap: 3px; min-width: 0; }
.co-item div b { font: 800 19px/1.1 var(--display); }
.co-item div span { color: var(--muted); font-size: 13.5px; }
.co-item > b { margin-left: auto; font: 800 19px/1 var(--display); white-space: nowrap; }
.co-total { display: flex; align-items: baseline; justify-content: space-between; padding: 4px 4px 0; font-weight: 700; }
.co-total small { color: var(--muted); font-weight: 600; }
.co-total b { font: 800 30px/1 var(--display); letter-spacing: -.03em; }
.check { display: flex; gap: 12px; align-items: flex-start; padding: 14px; border-radius: 16px; box-shadow: inset 0 0 0 1.5px var(--line); font-size: 14px; line-height: 1.45; cursor: pointer; }
.check input { flex: none; width: 20px; height: 20px; margin: 1px 0 0; accent-color: var(--violet); }
.check:has(input:checked) { box-shadow: inset 0 0 0 1.5px var(--violet); background: var(--violet-50); }
.co-methods { color: var(--muted); font-size: 13px; line-height: 1.45; text-align: center; text-wrap: balance; }
.co-methods .ic { display: inline-block; width: 14px; height: 14px; margin-right: 5px; vertical-align: -2px; }
.modal-body.co-done { justify-items: center; gap: 12px; padding: 36px 24px 24px; text-align: center; }
.co-done h2 { padding-right: 0; }
.co-burst { display: grid; place-items: center; width: 84px; height: 84px; margin-bottom: 4px; border-radius: 50%; background: var(--lime); color: var(--ink); box-shadow: 0 0 0 10px rgba(198, 255, 61, .22); animation: pop .5s var(--spring); }
.co-burst .ic { width: 42px; height: 42px; stroke-width: 2.5; }
.co-done p { color: var(--muted); text-wrap: pretty; }
.co-done .btn { margin-top: 6px; }
.modal-actions { display: grid; gap: 10px; }
@media (min-width: 480px) { .modal-actions { grid-template-columns: 1fr 1fr; } }

/* legal texts */
.legal { max-width: 780px; margin: 0 auto; padding: clamp(32px, 6vw, 72px) var(--gutter) clamp(64px, 8vw, 110px); }
.legal h1 { font-size: clamp(40px, 6vw, 64px); letter-spacing: -.04em; }
.legal h1:lang(de) { font-size: clamp(30px, 8.6vw, 64px); } /* "Datenschutzerklärung" and "Nutzungsbedingungen" fit a 360 px phone */
.legal-updated { display: inline-block; margin-top: 14px; padding: 7px 12px; border-radius: 999px; background: var(--chip); color: var(--muted); font: 700 13px/1 var(--sans); }
.legal-intro { margin-top: 22px; font-size: 19px; color: var(--muted); }
.legal-toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 26px 0 8px; }
.legal-toc a { padding: 8px 12px; border-radius: 999px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); font: 700 13.5px/1 var(--sans); text-decoration: none; }
.legal-toc a:hover { box-shadow: inset 0 0 0 1.5px var(--violet); color: var(--violet); }
.legal section { margin-top: 40px; scroll-margin-top: calc(var(--hdr-h) + 20px); }
.legal h2 { font-size: 26px; margin-bottom: 12px; letter-spacing: -.02em; }
.legal section p { margin-top: 12px; font-size: 16.5px; line-height: 1.7; }
.legal section a, .legal-intro a, .legal-other a { color: var(--violet); font-weight: 700; overflow-wrap: anywhere; }
.legal-other { margin-top: 48px; padding-top: 22px; border-top: 1px solid var(--line); color: var(--muted); }

/* a [placeholder] in a text that is still to be filled in (legal texts) */
mark.todo { padding: 0 .3em; border-radius: 6px; background: var(--violet-50); color: var(--violet-700); outline: 1.5px dashed var(--violet-400); outline-offset: -1.5px; font-weight: 700; }

/* the small pages: /app and 404 */
body.page-mini { background: var(--ink-900); }
.mini-logo { height: 34px; width: auto; margin-bottom: 18px; }
.mini-going { color: var(--lime) !important; font-weight: 700; }
.mini-404 { font: 800 clamp(96px, 18vw, 180px)/.8 var(--display); letter-spacing: -.06em; color: #fff; }
.mini-404 span { color: var(--lime); }
.mini-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.mini { display: grid; place-items: center; min-height: calc(100vh - var(--hdr-h)); min-height: calc(100svh - var(--hdr-h)); padding: 48px var(--gutter); background: var(--ink-900); color: var(--on-dark); text-align: center; position: relative; overflow: hidden; isolation: isolate; }
.mini::before { content: ""; position: absolute; z-index: -1; width: 900px; height: 900px; right: -300px; top: -400px; border-radius: 50%; background: radial-gradient(closest-side, rgba(124, 58, 237, .6), transparent); }
.mini-card { display: grid; justify-items: center; gap: 18px; max-width: 560px; }
.mini-card .appicon { width: 88px; height: 88px; rotate: -8deg; }
.mini-card h1 { font-size: clamp(36px, 6vw, 56px); letter-spacing: -.04em; }
.mini-card p { color: var(--on-dark-muted); font-size: 18px; }
.mini-card .stores { justify-content: center; }
.mini .btn-ghost { box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, .3); }
.mini .btn-ghost:hover { box-shadow: inset 0 0 0 1.5px #fff; }

/* ---------- motion ---------- */
@keyframes rise { from { opacity: 0; transform: translateY(28px); } to { opacity: 1; transform: none; } }
@keyframes draw { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes floatin { from { opacity: 0; transform: translateY(16px) scale(.85); } to { opacity: 1; transform: none; } }
@keyframes bob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -9px; } }
@keyframes hover { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } }
@keyframes drift { from { translate: 0 0; } to { translate: 14% 8%; } }
@keyframes sway { 0%, 100% { rotate: -5deg; } 50% { rotate: 2deg; } }
@keyframes nudge { from { translate: 0 0; } to { translate: 0 22%; } }
@keyframes marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-25%, 0, 0); } }
@keyframes orb { 0%, 100% { translate: 0 0; } 50% { translate: 0 -22%; } }
@keyframes twinkle { 0%, 100% { opacity: 0; scale: .4; } 50% { opacity: 1; scale: 1; } }
@keyframes shine { 0% { translate: 0 0; } 36%, 100% { translate: 560% 0; } }
@keyframes ring { from { opacity: .9; scale: .9; } to { opacity: 0; scale: 1.9; } }
@keyframes prompter { from { transform: translateY(40%); } to { transform: translateY(-75%); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 92, .6); } 50% { box-shadow: 0 0 0 8px rgba(255, 59, 92, 0); } }
@keyframes playhead { from { left: 8%; } to { left: 88%; } }
@keyframes pop { from { opacity: 0; transform: scale(.94); } to { opacity: 1; transform: none; } }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes spin { to { rotate: 360deg; } }
@keyframes hs-scan { 0% { opacity: 0; transform: translateX(0); } 6% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateX(100%); } }
@keyframes hs-play { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes shake { 0%, 100% { translate: 0; } 25% { translate: -6px; } 75% { translate: 6px; } }

/* touch screens: big enough to hit with a finger (about 44 px), the desktop look stays as it is */
@media (pointer: coarse) {
  .hdr-logo { padding-block: 7px; }
  .hdr-cta { height: 44px; }
  .hdr-nav a, .hdr-login { padding-block: 14px; }
  .lang summary { height: 44px; }
  .lang li a { min-height: 44px; }
  .ftr-col { gap: 0; }
  .ftr-col h2 { margin-bottom: 6px; }
  .ftr-col a { min-width: 44px; padding-block: 10px; }
  .ftr-brand > a { padding-block: 4px; }
  .ftr-co a, .ftr-legal a, .langtip a { display: inline-block; padding-block: 10px; margin-block: -10px; }
  .legal-toc a { padding: 14px 15px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; animation-delay: 0s !important; transition-duration: .01ms !important; transition-delay: 0s !important; }
  .js [data-reveal] { opacity: 1; transform: none; }
  .js .marquee-track { animation: none; }
}