/* ============================================================
   SeeYouSoon.se — shared stylesheet (redesign 2026)
   Palette: 6 values, plus three darker steps of the same hues for text
   on paper and for hover (H25). Paper appears ONLY on the receipt.
   ============================================================ */

/* ---- Fonts (self-hosted, variable) ---- */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/assets/fonts/schibsted-grotesk-var.woff2') format('woff2');
  font-weight: 400 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-var.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'JetBrains Mono';
  src: url('/assets/fonts/jetbrains-mono-var.woff2') format('woff2');
  font-weight: 100 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Readex Pro';
  src: url('/assets/fonts/readex-pro-arabic-var.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC, U+102E0-102FB;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('/assets/fonts/noto-sans-arabic-400.woff2') format('woff2');
  font-weight: 400; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('/assets/fonts/noto-sans-arabic-600.woff2') format('woff2');
  font-weight: 600; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
@font-face {
  font-family: 'Noto Sans Arabic';
  src: url('/assets/fonts/noto-sans-arabic-700.woff2') format('woff2');
  font-weight: 700 900; font-style: normal; font-display: swap;
  unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0898-08E1, U+08E3-08FF, U+200C-200E, U+2010-2011, U+204F, U+2E41, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC;
}
/* Latin-extended letters (Kurmanji ş, Ş and friends) that the main subsets lack: fetched only when a page uses them. */
@font-face {
  font-family: 'Schibsted Grotesk';
  src: url('/assets/fonts/schibsted-grotesk-latin-ext.woff2') format('woff2');
  font-weight: 400 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Inter';
  src: url('/assets/fonts/inter-latin-ext.woff2') format('woff2');
  font-weight: 100 900; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Readex Pro';
  src: url('/assets/fonts/readex-pro-latin-var.woff2') format('woff2');
  font-weight: 200 700;
  font-style: normal;
  font-display: swap;
  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;
}

/* ---- Tokens ---- */
:root {
  --ink:      #050510;
  --ink-2:    #0F0F22;
  --paper:    #FAF9F6;
  --purple:   #A855F7;
  --blue:     #3B82F6;
  --kr-green: #00C896;

  /* On paper (#FAF9F6) the screen purple and green fail AA as text (3.3:1 and
     2.9:1); these darker steps pass (5.2:1 and 5.1:1). Hover is one step lighter. */
  --purple-on-paper:   #8B3FD9;
  --kr-green-on-paper: #007A58;
  --purple-hover:      #B96BF9;

  /* Derived (opacity variants of the six, nothing new) */
  --text:       rgba(250, 249, 246, 0.92);
  --text-mute:  rgba(250, 249, 246, 0.62);
  --text-dim:   rgba(250, 249, 246, 0.52); /* 5.4:1 on --ink and --ink-2 (WCAG 1.4.3 AA); was .40, 3.6:1 */
  --line:       rgba(250, 249, 246, 0.10);
  --line-soft:  rgba(250, 249, 246, 0.06);
  --ink-on-paper:      #050510;
  --ink-on-paper-mute: rgba(5, 5, 16, 0.55);

  --display: 'Schibsted Grotesk', 'Inter', system-ui, sans-serif;
  --body:    'Inter', system-ui, -apple-system, sans-serif;
  --mono:    'JetBrains Mono', ui-monospace, 'SF Mono', monospace;

  /* Type scale: 14 / 16 / 20 / 28 / 40 / 64 / 96 */
  --t-1: 0.875rem;
  --t-2: 1rem;
  --t-3: 1.25rem;
  --t-4: 1.75rem;
  --t-5: 2.5rem;
  --t-6: 4rem;
  --t-7: 6rem;

  --s-1: 4px;  --s-2: 8px;  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px; --s-7: 48px; --s-8: 64px;
  --s-9: 96px; --s-10: 140px;

  --r: 10px;
  --wrap: 1120px;
}

/* ---- Base ---- */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--ink);
  color: var(--text);
  font-family: var(--body);
  font-size: var(--t-2);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { margin: 0; font-family: var(--display); line-height: 1.05; letter-spacing: -0.02em; }
p { margin: 0; }
button { font: inherit; cursor: pointer; }

::selection { background: var(--purple); color: var(--paper); }

:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 3px;
  border-radius: 4px;
}

.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--paper); color: var(--ink-on-paper);
  padding: var(--s-3) var(--s-4); z-index: 100; border-radius: 0 0 var(--r) 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

.wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--s-5); }

/* ---- Header ---- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(5, 5, 16, 0.85);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line-soft);
}
.nav {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; gap: var(--s-5);
}
.brand {
  font-family: var(--display); font-weight: 800; font-size: var(--t-3);
  letter-spacing: -0.03em;
}
.brand .tld { color: var(--purple); }
/* the mark: the receipt torn into an s (design-site/brand/mark-receipt-s.svg), the height of the wordmark */
.brand { display: inline-flex; align-items: center; }
.brand-mark { width: .92em; height: .92em; color: var(--purple); flex: none; margin-inline-end: .36em; transition: rotate .35s var(--ease-stamp); }
/* the mark's parts (design-site/brand/mark-anim.svg): body and pupil in the brand colour, the eye socket and the
   closed lids in the page's ink. The open eye blinks for two frames every six seconds; the wordmark's eyes blink
   with it. Hovering the brand tilts the mark like a stamp. */
.brand-mark .bm-body, .brand-mark .bm-pupil, .wm-eyes .we-left, .wm-eyes .we-right { fill: currentColor; }
.brand-mark .bm-socket, .brand-mark .bm-wink, .brand-mark .bm-lash, .wm-eyes .we-pupil, .wm-eyes .we-wink, .wm-eyes .we-lash { fill: var(--ink); }
.brand-mark .bm-lash, .wm-eyes .we-lash { opacity: 0; }
.brand-mark .bm-socket, .brand-mark .bm-pupil, .wm-eyes .we-pupil { animation: bm-open 6s infinite; }
.brand-mark .bm-lash, .wm-eyes .we-lash { animation: bm-lash 6s infinite; }
@keyframes bm-open { 0%, 91%, 97%, 100% { opacity: 1; } 93%, 95% { opacity: 0; } }
@keyframes bm-lash { 0%, 91%, 97%, 100% { opacity: 0; } 93%, 95% { opacity: 1; } }
.brand:hover .brand-mark { rotate: -8deg; }
/* the wordmark spells the name with its own two o's as eyes, one winking (icons.svg #eyes): x-height tall, on the baseline */
.brand .wm { white-space: nowrap; }
.brand .wm-eyes { display: inline-block; width: 1.32em; height: .6em; vertical-align: -.045em; color: var(--purple); margin: 0 .015em; }

/* ---- Buttons ---- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
  font-weight: 600; font-size: var(--t-2);
  padding: var(--s-3) var(--s-5);
  border-radius: var(--r); border: 1px solid transparent;
  transition: transform .15s, background .15s, border-color .15s;
}
.btn:active { transform: translateY(1px); }
.btn-primary { background: var(--purple); color: var(--paper); }
.btn-primary:hover { background: var(--purple-hover); }
.btn-ghost { border-color: var(--line); color: var(--text); }
.btn-ghost:hover { border-color: var(--purple); }

/* ---- Hero ---- */
.hero { padding: var(--s-9) 0 var(--s-9); }
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: var(--s-8); align-items: center;
}
.hero-eyebrow {
  font-family: var(--mono); font-size: var(--t-1); font-weight: 500;
  color: var(--text-mute); letter-spacing: 0.06em; text-transform: uppercase;
  margin-bottom: var(--s-5);
}
.hero h1 {
  font-size: clamp(var(--t-5), 8.5vw, var(--t-7));
  font-weight: 800; letter-spacing: -0.035em;
}
.hero h1 .pct { color: var(--purple); }
.hero h1 .strike {
  color: var(--text-dim);
  text-decoration: line-through;
  text-decoration-thickness: 0.06em;
  text-decoration-color: var(--purple);
}
.hero-sub {
  margin-top: var(--s-5);
  font-size: var(--t-3); line-height: 1.55; color: var(--text-mute);
  max-width: 34ch;
}
.hero-sub strong { color: var(--kr-green); font-weight: 600; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-terms {
  margin-top: var(--s-5);
  font-family: var(--mono); font-size: var(--t-1); color: var(--text-dim);
}

/* ---- The receipt ---- */
.receipt-holder { display: flex; flex-direction: column; align-items: center; gap: var(--s-5); }
.receipt {
  width: min(400px, 100%);
  background: var(--paper);
  color: var(--ink-on-paper);
  font-family: var(--mono);
  font-size: var(--t-2);
  padding: var(--s-6) var(--s-5) var(--s-7);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 24px 60px rgba(5, 5, 16, 0.6), 0 2px 8px rgba(5, 5, 16, 0.4);
  /* torn bottom edge */
  clip-path: polygon(
    0 0, 100% 0, 100% calc(100% - 10px),
    97.5% 100%, 95% calc(100% - 10px), 92.5% 100%, 90% calc(100% - 10px),
    87.5% 100%, 85% calc(100% - 10px), 82.5% 100%, 80% calc(100% - 10px),
    77.5% 100%, 75% calc(100% - 10px), 72.5% 100%, 70% calc(100% - 10px),
    67.5% 100%, 65% calc(100% - 10px), 62.5% 100%, 60% calc(100% - 10px),
    57.5% 100%, 55% calc(100% - 10px), 52.5% 100%, 50% calc(100% - 10px),
    47.5% 100%, 45% calc(100% - 10px), 42.5% 100%, 40% calc(100% - 10px),
    37.5% 100%, 35% calc(100% - 10px), 32.5% 100%, 30% calc(100% - 10px),
    27.5% 100%, 25% calc(100% - 10px), 22.5% 100%, 20% calc(100% - 10px),
    17.5% 100%, 15% calc(100% - 10px), 12.5% 100%, 10% calc(100% - 10px),
    7.5% 100%, 5% calc(100% - 10px), 2.5% 100%, 0 calc(100% - 10px)
  );
}
.receipt-head { text-align: center; margin-bottom: var(--s-4); }
.receipt-brand { font-weight: 700; letter-spacing: 0.14em; }
.receipt-venue { color: var(--ink-on-paper-mute); font-size: var(--t-1); margin-top: var(--s-1); }
.receipt-rule {
  border: none; border-top: 1.5px dashed rgba(5, 5, 16, 0.25);
  margin: var(--s-3) 0;
}
.receipt-line {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-4); padding: var(--s-1) 0;
  font-variant-numeric: tabular-nums;
}
.receipt-line .amt { font-weight: 500; white-space: nowrap; }
.receipt-line.is-keep { font-weight: 700; font-size: var(--t-3); }
.receipt-line.is-keep .amt { color: var(--kr-green-on-paper); font-weight: 700; }
.receipt-line.is-them { color: var(--ink-on-paper-mute); font-size: var(--t-1); }
.receipt-line.is-them .amt { text-decoration: line-through; }
.receipt-line.is-diff { font-weight: 700; }
.receipt-line.is-diff .amt { color: var(--purple-on-paper); }

/* print-in animation */
.receipt [data-print] { opacity: 0; transform: translateY(6px); }
.receipt.is-printed [data-print],
.receipt.no-anim [data-print] { opacity: 1; transform: none; }
.receipt.is-printing [data-print] {
  animation: printline .35s cubic-bezier(.2, .7, .3, 1) forwards;
  animation-delay: calc(var(--i) * 60ms);
}
@keyframes printline {
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .receipt [data-print] { opacity: 1 !important; transform: none !important; animation: none !important; }
  * { transition-duration: 0.01ms !important; }
}

/* slider */
.receipt-slider { width: min(400px, 100%); }
.receipt-slider label {
  display: flex; justify-content: space-between; align-items: baseline;
  font-family: var(--mono); font-size: var(--t-1); color: var(--text-mute);
  margin-bottom: var(--s-2);
}
.receipt-slider output { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
input[type="range"] {
  -webkit-appearance: none; appearance: none;
  width: 100%; height: 28px; background: transparent; margin: 0;
}
input[type="range"]::-webkit-slider-runnable-track {
  height: 4px; border-radius: 2px;
  background: linear-gradient(90deg, var(--purple) var(--fill, 27%), var(--line) var(--fill, 27%));
}
input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--purple); }
input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 22px; height: 22px; margin-top: -9px;
  border-radius: 50%; background: var(--paper);
  border: 3px solid var(--purple);
  box-shadow: 0 2px 10px rgba(5, 5, 16, 0.5);
  cursor: grab;
}
input[type="range"]::-moz-range-thumb {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--paper); border: 3px solid var(--purple);
  cursor: grab;
}
input[type="range"]:focus-visible { outline: 2px solid var(--purple); outline-offset: 6px; }

/* ---- Sections ---- */
.section { padding: var(--s-10) 0; border-top: 1px solid var(--line-soft); }
.section-eyebrow {
  font-family: var(--mono); font-size: var(--t-1); color: var(--purple);
  letter-spacing: 0.06em; text-transform: uppercase; margin-bottom: var(--s-3);
}
.section h2 {
  font-size: clamp(var(--t-4), 4.5vw, var(--t-5));
  font-weight: 800; letter-spacing: -0.03em;
  max-width: 22ch;
}
.section-lead { margin-top: var(--s-4); color: var(--text-mute); max-width: 52ch; font-size: var(--t-3); }

/* How it works */
.steps {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: var(--s-5); margin-top: var(--s-7);
}
.step {
  background: var(--ink-2); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: var(--s-6);
}
.step-num {
  font-family: var(--mono); font-size: var(--t-1); color: var(--purple);
  margin-bottom: var(--s-4);
}
.step h3 { font-size: var(--t-3); font-weight: 700; margin-bottom: var(--s-2); }
.step p { color: var(--text-mute); font-size: var(--t-1); line-height: 1.6; }

/* Services */
.services-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: var(--s-4); margin-top: var(--s-7);
}
.service {
  background: var(--ink-2); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: var(--s-5);
  transition: border-color .15s, transform .15s;
}
.service:hover { border-color: var(--purple); transform: translateY(-2px); }
.service h3::before { content: ""; display: block; width: 20px; height: 2px; background: var(--purple); margin-bottom: var(--s-4); }
.service h3 { font-size: var(--t-2); font-weight: 700; }
.service p { margin-top: var(--s-1); color: var(--text-mute); font-size: var(--t-1); }
.service .go {
  display: inline-block; margin-top: var(--s-3);
  font-family: var(--mono); font-size: var(--t-1); color: var(--purple);
}

/* Partner CTA */
.partner {
  margin-top: 0;
  text-align: start;
}
.partner .math {
  font-family: var(--mono);
  font-size: var(--t-3);
  margin-top: var(--s-5);
  color: var(--text-mute);
}
.partner .math .keep { color: var(--kr-green); font-weight: 700; }

/* ---- Footer (base padding; the footer itself is styled in Stage 6) ---- */
.site-footer {
  border-top: 1px solid var(--line-soft);
  padding: var(--s-8) 0 var(--s-7);
  color: var(--text-dim); font-size: var(--t-1);
}

/* ---- Responsive ---- */
@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-7); }
  .steps { grid-template-columns: 1fr; }
  .services-grid { grid-template-columns: repeat(2, 1fr); }
  .section { padding: var(--s-9) 0; }
}
@media (max-width: 720px) {
  .hero { padding: var(--s-7) 0 var(--s-8); }
}
@media (max-width: 480px) {
  .services-grid { grid-template-columns: 1fr; }
  .wrap { padding: 0 var(--s-4); }
}

/* ============================================================
   Stage 2 — menu overlay, page templates, forms, interactive
   ============================================================ */

/* ---- Header (menu-button era) ---- */
.nav-right { display: flex; align-items: center; gap: var(--s-3); }
.menu-btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text); padding: 10px var(--s-4);
  font-weight: 600; font-size: var(--t-1);
  transition: border-color .2s, background .2s;
}
.menu-btn:hover { border-color: var(--purple); }
.menu-btn .burger { position: relative; width: 18px; height: 12px; }
.menu-btn .burger span {
  position: absolute; left: 0; width: 100%; height: 2px; border-radius: 2px;
  background: currentColor;
  transition: transform .35s cubic-bezier(.7,0,.3,1), top .35s cubic-bezier(.7,0,.3,1), opacity .2s;
}
.menu-btn .burger span:nth-child(1) { top: 0; }
.menu-btn .burger span:nth-child(2) { top: 5px; }
.menu-btn .burger span:nth-child(3) { top: 10px; }
body.menu-open .menu-btn .burger span:nth-child(1) { top: 5px; transform: rotate(45deg); }
body.menu-open .menu-btn .burger span:nth-child(2) { opacity: 0; }
body.menu-open .menu-btn .burger span:nth-child(3) { top: 5px; transform: rotate(-45deg); }

/* ---- The menu overlay ---- */
.menu {
  position: fixed; inset: 0; z-index: 200;
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(168,85,247,0.12), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(59,130,246,0.08), transparent 60%),
    var(--ink-2);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .6s cubic-bezier(.76,0,.24,1), visibility 0s linear .6s;
  overflow-y: auto;
}
body.menu-open .menu {
  clip-path: inset(0 0 0% 0);
  visibility: visible;
  transition: clip-path .6s cubic-bezier(.76,0,.24,1);
}
body.menu-open { overflow: hidden; }

.menu-inner { min-height: 100%; display: flex; flex-direction: column; padding: 0 0 var(--s-6); }
.menu-top {
  display: flex; align-items: center; justify-content: space-between;
  min-height: 64px; padding: 0 var(--s-5);
  max-width: var(--wrap); margin: 0 auto; width: 100%;
}

.menu-grid {
  flex: 1;
  max-width: var(--wrap); margin: 0 auto; width: 100%;
  padding: var(--s-6) var(--s-5) var(--s-5);
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s-7) var(--s-8);
  align-items: start;
}

/* --- primary: the six things we actually want people to do --- */
.menu-list { list-style: none; margin: 0; padding: 0; }
.menu-list li { overflow: hidden; }
.menu-list li:nth-child(1) { --i: 0; }
.menu-list li:nth-child(2) { --i: 1; }
.menu-list li:nth-child(3) { --i: 2; }
.menu-list li:nth-child(4) { --i: 3; }
.m-link {
  display: flex; align-items: baseline; gap: var(--s-4);
  font-family: var(--display); font-weight: 800; letter-spacing: -0.03em;
  font-size: clamp(var(--t-3), 4.2vw, 3.1rem);
  line-height: 1.2;
  color: var(--text-mute);
  padding: 2px 0;
  transform: translateY(110%);
  transition: transform .55s cubic-bezier(.2,.8,.2,1), color .2s, padding-inline-start .3s cubic-bezier(.2,.8,.2,1);
}
body.menu-open .m-link { transform: translateY(0); transition-delay: calc(.12s + var(--i) * 50ms), 0s, 0s; }
.m-link .idx {
  font-family: var(--mono); font-weight: 400; letter-spacing: 0;
  font-size: var(--t-1); color: var(--text-dim);
  transition: color .2s;
}
.m-link:hover, .m-link:focus-visible, .m-link.is-active { color: var(--paper); padding-inline-start: var(--s-4); }
.m-link:hover .idx, .m-link.is-active .idx { color: var(--purple); }
.m-link .arrow {
  font-family: var(--mono); font-size: 0.42em; color: var(--purple);
  opacity: 0; transform: translateX(-8px);
  transition: opacity .25s, transform .25s;
}
.m-link:hover .arrow { opacity: 1; transform: translateX(0); }
.m-note {
  display: block; margin-top: 2px; margin-inline-start: calc(var(--s-4) + 22px);
  font-family: var(--body); font-size: var(--t-1); font-weight: 400;
  letter-spacing: 0; color: var(--text-dim);
}

/* --- the left column: the four destinations, then the two actions that used to sit in the header --- */
.menu-main { display: grid; gap: var(--s-6); align-content: start; }
.menu-actions {
  --i: 4;
  display: flex; flex-wrap: wrap; gap: var(--s-3);
  opacity: 0; translate: 0 14px;
  transition: opacity .5s, translate .5s;
}
body.menu-open .menu-actions { opacity: 1; translate: 0 0; transition-delay: calc(.12s + var(--i) * 50ms); }
.menu-actions .btn { min-width: 150px; }

/* --- "Om oss" preview: the three rules, numbered like receipt lines --- */
.mp-rules { list-style: none; margin: 0; padding: 0; counter-reset: rule; }
.mp-rules li {
  display: grid; grid-template-columns: auto 1fr; column-gap: var(--s-3); align-items: baseline;
  padding: var(--s-3) 0; border-top: 1px dashed var(--line);
}
.mp-rules li:first-child { border-top: 0; padding-top: 0; }
.mp-rules li::before {
  counter-increment: rule; content: counter(rule, decimal-leading-zero);
  font-family: var(--mono); font-size: var(--t-1); color: var(--purple);
}
.mp-rules b { font-family: var(--display); font-weight: 700; color: var(--text); font-size: var(--t-2); letter-spacing: -0.01em; }
.mp-rules span { grid-column: 2; font-size: var(--t-1); color: var(--text-dim); line-height: 1.5; }

/* --- right rail: receipt + live strip --- */
.menu-rail { display: grid; gap: var(--s-5); justify-items: center; }

/* --- secondary: grouped link columns --- */
.menu-cols {
  grid-column: 1 / -1;
  display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-5);
  padding-top: var(--s-6); margin-top: var(--s-3);
  border-top: 1px solid var(--line-soft);
}
.menu-col h3 {
  font-family: var(--mono); font-size: var(--t-1); font-weight: 500;
  color: var(--purple); letter-spacing: .1em; text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.menu-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.menu-col a {
  color: var(--text-mute); font-size: var(--t-2);
  display: inline-block;
  transition: color .22s cubic-bezier(.2,.8,.2,1), transform .22s cubic-bezier(.2,.8,.2,1);
}
.menu-col a:hover { color: var(--paper); transform: translateX(5px); }

/* --- mini receipt in the rail --- */
.menu-receipt {
  width: min(300px, 100%);
  background: var(--paper); color: var(--ink-on-paper);
  font-family: var(--mono); font-size: var(--t-1);
  padding: var(--s-5) var(--s-4) var(--s-6);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 20px 50px rgba(5,5,16,.55);
  clip-path: polygon(0 0,100% 0,100% calc(100% - 8px),96% 100%,92% calc(100% - 8px),88% 100%,84% calc(100% - 8px),80% 100%,76% calc(100% - 8px),72% 100%,68% calc(100% - 8px),64% 100%,60% calc(100% - 8px),56% 100%,52% calc(100% - 8px),48% 100%,44% calc(100% - 8px),40% 100%,36% calc(100% - 8px),32% 100%,28% calc(100% - 8px),24% 100%,20% calc(100% - 8px),16% 100%,12% calc(100% - 8px),8% 100%,4% calc(100% - 8px),0 100%);
  transform: rotate(1.6deg);
  opacity: 0; translate: 0 16px;
  transition: opacity .5s .35s, translate .5s .35s;
}
body.menu-open .menu-receipt { opacity: 1; translate: 0 0; }
.menu-receipt .mr-title { text-align: center; font-weight: 700; letter-spacing: .12em; margin-bottom: var(--s-3); }
.menu-receipt .mr-line {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding: 3px 0; font-variant-numeric: tabular-nums;
}
.menu-receipt .mr-line .v { font-weight: 700; }
.menu-receipt .mr-line.hl .v { color: var(--kr-green-on-paper); }
.menu-receipt hr { border: none; border-top: 1.5px dashed rgba(5,5,16,.22); margin: var(--s-2) 0; }


/* ---------- menu preview panel ---------- */
.menu-preview {
  display: grid;
  grid-template-areas: "stack";
  width: min(340px, 100%);
  opacity: 0; translate: 0 14px;
  transition: opacity .5s .3s, translate .5s .3s;
}
body.menu-open .menu-preview { opacity: 1; translate: 0 0; }

.mp {
  grid-area: stack;
  opacity: 0; visibility: hidden; pointer-events: none;
  transform: translateY(8px);
  transition: opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1), visibility 0s .3s;
  display: grid; gap: var(--s-4); align-content: start;
}
.mp.is-on {
  opacity: 1; visibility: visible; pointer-events: auto; transform: none;
  transition: opacity .3s cubic-bezier(.2,.8,.2,1), transform .3s cubic-bezier(.2,.8,.2,1);
}
.mp-h {
  font-family: var(--mono); font-size: var(--t-1); color: var(--text-dim);
  letter-spacing: .1em; text-transform: uppercase;
}
.mp-note { font-size: var(--t-1); color: var(--text-dim); line-height: 1.5; max-width: 32ch; }

/* the 13 services, browsable straight from the menu */
.mp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; }
.mp-svc {
  border: 1px solid var(--line); border-radius: 8px;
  padding: 10px var(--s-3);
  font-size: var(--t-1); color: var(--text-mute);
  transition: border-color .18s, color .18s, background .18s, transform .18s;
}
.mp-svc:hover { border-color: var(--purple); color: var(--paper); background: rgba(168,85,247,.13); transform: translateY(-1px); }

/* the receipt no longer animates in on its own — the panel handles it */
.menu-preview .menu-receipt { opacity: 1; translate: none; transform: rotate(1.4deg); transition: none; }

@media (max-width: 980px) {
  .menu-preview { width: 100%; }
  .mp-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) { .mp-grid { grid-template-columns: 1fr 1fr; } }
@media (prefers-reduced-motion: reduce) {
  .menu-preview, .mp, .menu-actions { transition: none !important; }
}

/* --- live strip: clock + weather --- */
.live-strip {
  width: min(300px, 100%);
  display: grid; gap: var(--s-3);
  border: 1px solid var(--line); border-radius: var(--r);
  padding: var(--s-4) var(--s-5);
  background: rgba(250,249,246,.02);
  opacity: 0; translate: 0 12px;
  transition: opacity .5s .45s, translate .5s .45s;
}
body.menu-open .live-strip { opacity: 1; translate: 0 0; }
.live-row { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-4); }
.live-k {
  font-family: var(--mono); font-size: var(--t-1); color: var(--text-dim);
  letter-spacing: .06em; text-transform: uppercase;
}
.live-v { font-family: var(--mono); font-size: var(--t-3); font-weight: 700; color: var(--paper); font-variant-numeric: tabular-nums; }
.live-v .sec { color: var(--text-dim); font-size: .62em; }
.live-w { display: flex; align-items: center; gap: var(--s-3); }
.live-w svg { width: 24px; height: 24px; flex: none; color: var(--purple); }
.live-tip {
  border-top: 1px dashed var(--line); padding-top: var(--s-3);
  font-size: var(--t-1); color: var(--text-mute);
}
.live-tip a { color: var(--purple); }
.live-tip a:hover { text-decoration: underline; }
.live-src { font-family: var(--mono); font-size: .72rem; color: var(--text-dim); }

/* header chip */
.hdr-live {
  display: none; align-items: center; gap: var(--s-3);
  font-family: var(--mono); font-size: var(--t-1); color: var(--text-mute);
  border: 1px solid var(--line); border-radius: 999px;
  padding: 7px var(--s-4); margin-inline-end: var(--s-1);
  white-space: nowrap;
}
.hdr-live.is-on { display: inline-flex; }
.hdr-live .sep { color: var(--text-dim); }
.hdr-live .t { color: var(--text); font-variant-numeric: tabular-nums; }
.hdr-live svg { width: 15px; height: 15px; color: var(--purple); }
@media (min-width: 1040px) { .hdr-live.is-on { display: inline-flex; } }
@media (max-width: 1039px) { .hdr-live.is-on { display: none; } }

.menu-foot {
  max-width: var(--wrap); margin: 0 auto; width: 100%;
  padding: var(--s-5) var(--s-5) 0;
  border-top: 1px solid var(--line-soft);
  display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-6);
  font-family: var(--mono); font-size: var(--t-1);
}
.menu-foot .lbl { color: var(--text-dim); letter-spacing: .1em; text-transform: uppercase; }
.menu-foot a { color: var(--text-mute); transition: color .2s; }
.menu-foot a:hover { color: var(--purple); }

@media (max-width: 980px) {
  .menu-grid { grid-template-columns: 1fr; gap: var(--s-6); }
  .menu-rail { justify-items: stretch; }
  .menu-cols { grid-template-columns: 1fr 1fr; }
  .m-link { font-size: clamp(var(--t-3), 7vw, 2.2rem); }
  .live-strip { width: 100%; }
}
@media (max-width: 560px) {
  .menu-cols { grid-template-columns: 1fr; gap: var(--s-5); }
  .m-note { margin-inline-start: calc(var(--s-4) + 18px); }
}
@media (prefers-reduced-motion: reduce) {
  .menu, .m-link, .menu-receipt, .live-strip { transition: none !important; }
}

/* ---- Page hero (inner pages) ---- */
.page-hero { padding: var(--s-8) 0 var(--s-7); }
.crumb {
  font-family: var(--mono); font-size: var(--t-1); color: var(--text-dim);
  margin-bottom: var(--s-5); display: flex; gap: var(--s-2); flex-wrap: wrap;
}
.crumb a:hover { color: var(--text); }
.page-hero h1 {
  font-size: clamp(var(--t-5), 6.5vw, var(--t-6));
  font-weight: 800; letter-spacing: -0.03em; max-width: 16ch;
}
.page-hero .lead { margin-top: var(--s-4); font-size: var(--t-3); color: var(--text-mute); max-width: 48ch; line-height: 1.55; }

/* ---- Motion graphics (scripts/site-motion.mjs, owner 2026-10-09): a flat key frame in the brand's own language
   sits beside the page title; its loop is attached by app.js when the figure comes into view and motion is allowed.
   The art is ink in both themes: it reads as a small screen. ---- */
.page-hero-grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) { .page-hero-grid { grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); } }
.motion {
  position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--r); border: 1px solid var(--line-soft); background: #050510;
  box-shadow: 0 40px 90px -50px rgba(168, 85, 247, .45);
}
.motion picture, .motion img, .motion video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.motion img { background: #050510; }
.motion video { opacity: 0; transition: opacity .6s ease; }
.motion.is-playing video { opacity: 1; }
.motion figcaption {
  position: absolute; inset-inline-end: 12px; bottom: 10px; z-index: 1;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(250, 249, 246, .45);
}
.media + .motion, .motion + .media { margin-top: var(--s-6); }
.step .motion-sm { margin: 0 0 var(--s-4); box-shadow: none; }
.step .motion-sm figcaption { font-size: .6rem; }

/* ---- The films (scripts/site-reels.mjs): a poster, a play button, the <video> arrives on click ---- */
.film-grid { display: grid; gap: var(--s-6); align-items: center; }
@media (min-width: 900px) { .film-grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); } }
.film-grid .section-lead { max-width: 40ch; }
.film {
  position: relative; margin: 0; overflow: hidden; aspect-ratio: 16 / 9;
  border-radius: var(--r); border: 1px solid var(--line-soft); background: #050510;
  box-shadow: 0 40px 90px -50px rgba(168, 85, 247, .45);
}
.film picture, .film img, .film video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; background: #050510; }
.film.is-playing picture { display: none; }
.film-play {
  position: absolute; inset: 0; margin: auto; width: fit-content; height: fit-content; z-index: 2;
  display: inline-flex; align-items: center; gap: .55rem; padding: .75rem 1.3rem .75rem 1rem;
  border-radius: 999px; border: 1px solid rgba(250, 249, 246, .28); background: rgba(5, 5, 16, .62); color: #FAF9F6;
  font: 600 var(--t-1) var(--body); letter-spacing: 0; cursor: pointer; backdrop-filter: blur(6px);
  transition: transform var(--dur-1) var(--ease-out), background var(--dur-1), border-color var(--dur-1);
}
.film-play svg { width: 1.3rem; height: 1.3rem; }
.film-play:hover, .film-play:focus-visible { background: var(--purple); border-color: var(--purple); transform: scale(1.04); outline: none; }
.film figcaption {
  position: absolute; inset-inline-start: 12px; bottom: 10px; z-index: 1; display: flex; gap: .5rem; pointer-events: none;
  font-family: var(--mono); font-size: .66rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(250, 249, 246, .55);
}
.film figcaption span + span::before { content: "· "; }
.film.is-playing figcaption { display: none; }   /* the controls take the bottom edge */
.film-pair { display: grid; gap: var(--s-7) var(--s-6); margin-top: var(--s-6); }
@media (min-width: 900px) { .film-pair { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.film-item h3 { margin: var(--s-4) 0 var(--s-2); font-size: var(--t-3); }
.film-item p { margin: 0; color: var(--text-mute); font-size: var(--t-1); max-width: 56ch; }
.film-dl { margin-top: var(--s-4); display: flex; flex-wrap: wrap; gap: .5rem 1rem; font-family: var(--mono); font-size: .8rem; letter-spacing: .04em; }
.film-dl a { color: var(--purple); text-decoration: none; border-bottom: 1px solid transparent; }
.film-dl a:hover { border-bottom-color: currentColor; }

/* ---- Press kit (/press): files to download, each with its preview ---- */
.kit-grid { display: grid; gap: var(--s-5); grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); margin-top: var(--s-6); }
.kit { display: grid; gap: var(--s-3); align-content: start; padding: var(--s-4); border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--ink-2); }
.kit-preview { position: relative; aspect-ratio: 3 / 2; border-radius: calc(var(--r) - 4px); background: #050510; color: #FAF9F6; overflow: hidden; }
.kit-preview.on-paper { background: #FAF9F6; color: #050510; }
/* absolutely placed, so the picture's own 2400×720 never sizes the box (a grid row would take the attribute height) */
.kit-preview img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; padding: 14%; box-sizing: border-box; display: block; }
.kit h3 { margin: 0; font-size: var(--t-2); }
.kit p { margin: 0; color: var(--text-mute); font-size: var(--t-1); }
.kit-links { display: flex; flex-wrap: wrap; gap: .4rem .9rem; font-family: var(--mono); font-size: .78rem; letter-spacing: .04em; }
.kit-links a { color: var(--purple); text-decoration: none; border-bottom: 1px solid transparent; }
.kit-links a:hover { border-bottom-color: currentColor; }
.kit-strip { display: grid; grid-template-columns: repeat(auto-fill, minmax(104px, 1fr)); gap: var(--s-3); margin-top: var(--s-5); }
.kit-strip a { display: block; aspect-ratio: 1; border-radius: var(--r); overflow: hidden; border: 1px solid var(--line-soft); background: #050510; transition: transform var(--dur-1) var(--ease-out); }
.kit-strip a:hover { transform: translateY(-3px); }
.kit-strip img { width: 100%; height: 100%; object-fit: cover; display: block; }
.kit-rules { margin-top: var(--s-6); display: grid; gap: var(--s-3); grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.kit-rules p { margin: 0; padding-top: var(--s-3); border-top: 1px solid var(--line-soft); color: var(--text-mute); font-size: var(--t-1); }
.kit-rules p strong { color: var(--text); display: block; margin-bottom: .25rem; }
.kit-title { margin: var(--s-8) 0 var(--s-2); font-size: var(--t-3); }
.kit-lead { margin: 0; color: var(--text-mute); font-size: var(--t-1); }
/* the brand's people: square, large, the hero's second column; the scene then becomes a wide band below */
.motion-character { aspect-ratio: 1; width: min(100%, 560px); justify-self: center; border-radius: calc(var(--r) * 2); }
@media (min-width: 900px) {
  .page-hero.has-motion .page-hero-grid:has(.motion-character) { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .page-hero.has-motion h1 { max-width: 14ch; }
}
/* the home page: a character on every service card (the still, no loop), and the cast beside its own words */
.service .motion-card {
  /* full bleed over the card's padding; the width is written out because an aspect-ratio box with width:auto
     resolves to nothing inside the card's <a> */
  aspect-ratio: 1; width: calc(100% + 2 * var(--s-5)); border: 0; border-radius: calc(var(--r) - 2px) calc(var(--r) - 2px) 0 0; box-shadow: none;
  margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-4);
}
.service .motion-card figcaption { font-size: .55rem; }
.service .motion-card + h3::before { display: none; }
.cast-grid { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 900px) { .cast-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } }
.cast .section-lead { max-width: 44ch; }
.motion-band { max-width: var(--wrap); margin: var(--s-8) auto 0; padding: 0 var(--s-5); }
.motion-band .motion { aspect-ratio: 21 / 9; box-shadow: 0 50px 120px -60px rgba(168, 85, 247, .5); }
.motion-band .motion img, .motion-band .motion video { object-position: center; }
:root[data-motion="off"] .motion video { display: none; }
@media (prefers-reduced-motion: reduce) { .motion video { display: none; } }

/* ---- Forms ---- */
.form-card {
  background: var(--ink-2); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: var(--s-6);
  max-width: 640px;
}
.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
.field { display: flex; flex-direction: column; gap: var(--s-2); }
.field.full { grid-column: 1 / -1; }
.field label { font-size: var(--t-1); font-weight: 600; }
.field .hint { font-size: var(--t-1); color: var(--text-dim); font-weight: 400; }
.field input, .field select, .field textarea {
  background: var(--ink); border: 1px solid var(--line);
  border-radius: var(--r); color: var(--text);
  padding: var(--s-3) var(--s-4); font: inherit; font-size: var(--t-2);
  transition: border-color .2s;
  width: 100%;
}
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--purple);
}
.field textarea { min-height: 110px; resize: vertical; }
.field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--text-mute) 50%), linear-gradient(135deg, var(--text-mute) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; }
.form-actions { margin-top: var(--s-5); display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.form-note { font-size: var(--t-1); color: var(--text-dim); }
.form-status { margin-top: var(--s-4); font-size: var(--t-2); display: none; }
.form-status.ok { display: block; color: var(--kr-green); }
.form-status.fail { display: block; color: var(--text); }
.form-status a { color: var(--purple); text-decoration: underline; }
.btn[disabled] { opacity: .55; cursor: wait; }
@media (max-width: 560px) { .form-grid { grid-template-columns: 1fr; } }

/* ---- FAQ accordion ---- */
.faq-list { margin-top: var(--s-7); max-width: 760px; }
.faq-item { border-bottom: 1px solid var(--line-soft); }
.faq-q {
  width: 100%; background: none; border: none; color: var(--text);
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-4);
  text-align: start; padding: var(--s-5) 0;
  font-family: var(--display); font-weight: 700; font-size: var(--t-3);
  letter-spacing: -0.01em;
}
.faq-q .pm {
  font-family: var(--mono); color: var(--purple); font-weight: 400; font-size: var(--t-3);
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.faq-item.open .faq-q .pm { transform: rotate(45deg); }
.faq-a {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows .35s cubic-bezier(.2,.8,.2,1);
}
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a > div { overflow: hidden; }
.faq-a p { color: var(--text-mute); padding-bottom: var(--s-5); max-width: 62ch; }

/* ---- Price tables ---- */
.price-cols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5); margin-top: var(--s-7); }
.price-card {
  background: var(--ink-2); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: var(--s-6);
}
.price-card h3 { font-size: var(--t-3); margin-bottom: var(--s-2); }
.price-card .big {
  font-family: var(--mono); font-size: var(--t-5); font-weight: 700;
  color: var(--purple); margin: var(--s-3) 0;
}
.price-card ul { list-style: none; margin: var(--s-4) 0 0; padding: 0; }
.price-card li {
  padding: var(--s-3) 0; border-top: 1px solid var(--line-soft);
  color: var(--text-mute); font-size: var(--t-1);
  display: flex; justify-content: space-between; gap: var(--s-4);
}
.price-card li strong { color: var(--text); font-weight: 600; }
.price-cols.cols-3 { grid-template-columns: repeat(3, 1fr); }
@media (max-width: 720px) { .price-cols, .price-cols.cols-3 { grid-template-columns: 1fr; } }

/* ---- Misc ---- */
.notice {
  margin-top: var(--s-6); max-width: 640px;
  border-inline-start: 2px solid var(--purple);
  padding: var(--s-3) var(--s-5);
  color: var(--text-mute); font-size: var(--t-1);
}
.notice a { color: var(--purple); text-decoration: underline; }
.prose { max-width: 68ch; margin-top: var(--s-6); }
.prose h2 { font-size: var(--t-4); margin-top: var(--s-7); }
.prose h2:first-child { margin-top: 0; }
.prose p { margin-top: var(--s-3); color: var(--text-mute); }
.prose strong { color: var(--text); }
.areas { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.area {
  font-family: var(--mono); font-size: var(--t-1);
  border: 1px solid var(--line); border-radius: 999px;
  padding: var(--s-2) var(--s-4); color: var(--text-mute);
}
.center-cta { margin-top: var(--s-7); }

/* ============================================================
   Stage 3 — price checker, driver calc, app page, misc
   ============================================================ */

/* ---- Price checker ---- */
.pk { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,420px); gap: var(--s-8); align-items: start; }
.pk-panel {
  background: var(--ink-2); border: 1px solid var(--line-soft);
  border-radius: var(--r); padding: var(--s-6);
}
.pk-step { margin-bottom: var(--s-6); }
.pk-step:last-child { margin-bottom: 0; }
.pk-step > h3 {
  font-family: var(--body); font-size: var(--t-1); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim);
  margin-bottom: var(--s-4);
}
.pk-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.pk-chip {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-mute); padding: 10px var(--s-4);
  font-size: var(--t-1); font-weight: 500;
  transition: border-color .18s, color .18s, background .18s, transform .18s;
}
.pk-chip:hover { border-color: var(--purple); color: var(--text); transform: translateY(-1px); }
.pk-chip.is-on { border-color: var(--purple); background: rgba(168,85,247,.16); color: var(--paper); }

/* result card = paper, reuses receipt language */
.pk-result {
  position: sticky; top: 88px;
  background: var(--paper); color: var(--ink-on-paper);
  font-family: var(--mono);
  padding: var(--s-6) var(--s-5) var(--s-7);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 24px 60px rgba(5,5,16,.6);
  clip-path: polygon(0 0,100% 0,100% calc(100% - 10px),97.5% 100%,95% calc(100% - 10px),92.5% 100%,90% calc(100% - 10px),87.5% 100%,85% calc(100% - 10px),82.5% 100%,80% calc(100% - 10px),77.5% 100%,75% calc(100% - 10px),72.5% 100%,70% calc(100% - 10px),67.5% 100%,65% calc(100% - 10px),62.5% 100%,60% calc(100% - 10px),57.5% 100%,55% calc(100% - 10px),52.5% 100%,50% calc(100% - 10px),47.5% 100%,45% calc(100% - 10px),42.5% 100%,40% calc(100% - 10px),37.5% 100%,35% calc(100% - 10px),32.5% 100%,30% calc(100% - 10px),27.5% 100%,25% calc(100% - 10px),22.5% 100%,20% calc(100% - 10px),17.5% 100%,15% calc(100% - 10px),12.5% 100%,10% calc(100% - 10px),7.5% 100%,5% calc(100% - 10px),2.5% 100%,0 calc(100% - 10px));
}
.pk-result .r-head { text-align: center; margin-bottom: var(--s-4); }
.pk-result .r-brand { font-weight: 700; letter-spacing: .14em; }
.pk-result .r-what { color: var(--ink-on-paper-mute); font-size: var(--t-1); margin-top: var(--s-1); min-height: 1.3em; }
.pk-result hr { border: none; border-top: 1.5px dashed rgba(5,5,16,.25); margin: var(--s-3) 0; }
.pk-line {
  display: flex; justify-content: space-between; gap: var(--s-3);
  padding: var(--s-1) 0; font-size: var(--t-1); font-variant-numeric: tabular-nums;
  color: var(--ink-on-paper-mute);
}
.pk-line .v { color: var(--ink-on-paper); font-weight: 500; }
.pk-total { padding: var(--s-3) 0 var(--s-2); }
.pk-total .l { display: block; font-size: var(--t-1); color: var(--ink-on-paper-mute); }
.pk-total .v {
  display: block; margin-top: var(--s-1);
  font-weight: 700; font-size: clamp(1.5rem, 4.4vw, 1.85rem);
  font-variant-numeric: tabular-nums; white-space: nowrap; letter-spacing: -0.02em;
}
.pk-total .v.flash { animation: pkflash .45s ease; }
@keyframes pkflash { 0% { color: var(--purple-on-paper); transform: translateY(-3px); } 100% { color: inherit; transform: none; } }
.pk-moms { margin-top: var(--s-3); font-size: 0.8rem; color: var(--ink-on-paper-mute); line-height: 1.5; }
.pk-cta { margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.pk-cta .btn { width: 100%; }
.pk-empty { color: var(--ink-on-paper-mute); font-size: var(--t-1); padding: var(--s-4) 0; text-align: center; }
@media (max-width: 900px) {
  .pk { grid-template-columns: 1fr; }
  .pk-result { position: static; }
}
@media (prefers-reduced-motion: reduce) { .pk-total .v.flash { animation: none; } }

/* ---- Split feature rows (app page) ---- */
.split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-7); align-items: center; margin-top: var(--s-7); }
.split + .split { margin-top: var(--s-8); }
.split.flip > :first-child { order: 2; }
.split h3 { font-size: var(--t-4); margin-bottom: var(--s-3); }
.split p { color: var(--text-mute); }
.split-visual {
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: var(--s-7); display: grid; gap: var(--s-3);
}
.split-visual .kv {
  display: flex; justify-content: space-between; gap: var(--s-4);
  font-family: var(--mono); font-size: var(--t-1);
  padding: var(--s-3) 0; border-bottom: 1px solid var(--line-soft);
}
.split-visual .kv:last-child { border-bottom: none; }
.split-visual .kv strong { color: var(--kr-green); font-weight: 700; }
@media (max-width: 860px) { .split, .split.flip > :first-child { grid-template-columns: 1fr; order: 0; } }

/* ---- Stat strip built from verifiable terms ---- */
.terms-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--s-4); margin-top: var(--s-7); }
.term {
  border-top: 2px solid var(--purple); padding-top: var(--s-4);
}
.term .n { font-family: var(--mono); font-size: var(--t-4); font-weight: 700; }
.term .l { color: var(--text-mute); font-size: var(--t-1); margin-top: var(--s-1); }
@media (max-width: 720px) { .terms-strip { grid-template-columns: repeat(2, 1fr); } }

/* ---- Timeline (press / om) ---- */
.tl { margin-top: var(--s-7); border-inline-start: 1px solid var(--line); padding-inline-start: var(--s-6); }
.tl-item { padding-bottom: var(--s-6); position: relative; }
.tl-item::before {
  content: ""; position: absolute; inset-inline-start: calc(var(--s-6) * -1 - 5px); top: 8px;
  width: 9px; height: 9px; border-radius: 50%; background: var(--purple);
}
.tl-item .when { font-family: var(--mono); font-size: var(--t-1); color: var(--purple); }
.tl-item h3 { font-size: var(--t-3); margin: var(--s-2) 0; }
.tl-item p { color: var(--text-mute); font-size: var(--t-1); max-width: 60ch; }

/* ---- Job list ---- */
.jobs { margin-top: var(--s-7); }
.job {
  display: flex; justify-content: space-between; align-items: center; gap: var(--s-5);
  padding: var(--s-5) 0; border-top: 1px solid var(--line-soft);
  transition: padding-inline-start .25s cubic-bezier(.2,.8,.2,1);
}
.job:hover { padding-inline-start: var(--s-3); }
.job:last-child { border-bottom: 1px solid var(--line-soft); }
.job h3 { font-size: var(--t-3); }
.job .meta { font-family: var(--mono); font-size: var(--t-1); color: var(--text-dim); margin-top: var(--s-1); }
.job .go { font-family: var(--mono); font-size: var(--t-1); color: var(--purple); white-space: nowrap; }

/* ============================================================
   Stage 4 — comparison table, articles, support, cities
   ============================================================ */

/* ---- Comparison table ---- */
.cmp-wrap { margin-top: var(--s-7); overflow-x: auto; }
.cmp { width: 100%; border-collapse: collapse; min-width: 560px; }
.cmp th, .cmp td { padding: var(--s-4) var(--s-4); text-align: start; border-bottom: 1px solid var(--line-soft); }
.cmp thead th {
  font-family: var(--mono); font-size: var(--t-1); font-weight: 500;
  color: var(--text-dim); text-transform: uppercase; letter-spacing: .05em;
  border-bottom-color: var(--line);
}
.cmp thead th.us { color: var(--paper); }
.cmp tbody th { font-weight: 500; color: var(--text-mute); font-size: var(--t-1); }
.cmp td { font-family: var(--mono); font-size: var(--t-1); font-variant-numeric: tabular-nums; }
.cmp td.us { color: var(--paper); font-weight: 700; background: rgba(168,85,247,.07); }
.cmp td.us .g { color: var(--kr-green); }
.cmp tbody tr:hover td, .cmp tbody tr:hover th { background: rgba(250,249,246,.03); }
.cmp tbody tr:hover td.us { background: rgba(168,85,247,.12); }
.cmp-note { margin-top: var(--s-4); font-size: var(--t-1); color: var(--text-dim); max-width: 60ch; }

/* ---- Article ---- */
.article { max-width: 68ch; margin-top: var(--s-6); }
.article p { margin-top: var(--s-4); color: var(--text-mute); font-size: 1.05rem; line-height: 1.75; }
.article h2 { font-size: var(--t-4); margin-top: var(--s-7); }
.article ul { margin: var(--s-4) 0 0; padding-inline-start: var(--s-5); color: var(--text-mute); }
.article li { margin-bottom: var(--s-2); line-height: 1.7; }
.article strong { color: var(--text); }
.article .pull {
  margin: var(--s-6) 0; padding-inline-start: var(--s-5);
  border-inline-start: 2px solid var(--purple);
  font-family: var(--display); font-size: var(--t-3); font-weight: 700;
  letter-spacing: -0.02em; color: var(--text); line-height: 1.35;
}
.byline { font-family: var(--mono); font-size: var(--t-1); color: var(--text-dim); margin-top: var(--s-4); }

/* ---- Article cards ---- */
.posts { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-7); }
.post {
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color .18s, transform .18s;
}
.post:hover { border-color: var(--purple); transform: translateY(-2px); }
.post .when { font-family: var(--mono); font-size: var(--t-1); color: var(--purple); }
.post h3 { font-size: var(--t-3); line-height: 1.2; }
.post p { color: var(--text-mute); font-size: var(--t-1); flex: 1; }
.post .go { font-family: var(--mono); font-size: var(--t-1); color: var(--purple); }
@media (max-width: 860px) { .posts { grid-template-columns: 1fr; } }

/* ---- Support hub ---- */
.hub { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-7); }
.hub-card {
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: var(--s-5); transition: border-color .18s;
}
.hub-card:hover { border-color: var(--purple); }
.hub-card h3 { font-size: var(--t-2); margin-bottom: var(--s-2); }
.hub-card p { color: var(--text-mute); font-size: var(--t-1); }
.hub-card .go { display: inline-block; margin-top: var(--s-3); font-family: var(--mono); font-size: var(--t-1); color: var(--purple); }
@media (max-width: 860px) { .hub { grid-template-columns: 1fr; } }

/* ============================================================
   Stage 5 — login routing
   ============================================================ */

/* ---- Login routing ---- */
.doors { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-7); }
.door {
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: var(--s-6); display: flex; flex-direction: column; gap: var(--s-3);
  transition: border-color .2s, transform .2s;
}
.door:hover { border-color: var(--purple); transform: translateY(-2px); }
.door .who { font-family: var(--mono); font-size: var(--t-1); color: var(--purple); }
.door h3 { font-size: var(--t-3); }
.door p { color: var(--text-mute); font-size: var(--t-1); flex: 1; }
.door .go { font-family: var(--mono); font-size: var(--t-1); color: var(--text); }
@media (max-width: 860px) { .doors { grid-template-columns: 1fr; } }

/* ============================================================
   Stage 6 — new footer, scroll reveals, product pages
   ============================================================ */

/* ---- Scroll reveal ---- */
[data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1);
  transition-delay: var(--d, 0ms);
  will-change: opacity, transform;
}
[data-reveal].in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
}

/* ---- Footer ---- */
.site-footer {
  position: relative;
  margin-top: var(--s-10);
  border-top: 1px solid var(--line-soft);
  /* same near-black as the rest of the site; the glow only grazes the top */
  background:
    radial-gradient(900px 380px at 72% -8%, rgba(168,85,247,.055), transparent 68%),
    var(--ink);
  color: var(--text-mute); font-size: var(--t-1);
  overflow: hidden;
}
/* hairline that catches the light along the top edge */
.site-footer::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(168,85,247,.38) 32%, rgba(59,130,246,.20) 64%, transparent);
}

/* ---- opening band: statement + the 3D receipt ---- */
.f-top { position: relative; padding: var(--s-10) 0 var(--s-9); }
.f-top-inner {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr);
  gap: var(--s-8); align-items: center;
}
.f-eyebrow {
  font-family: var(--mono); font-size: var(--t-1);
  color: var(--purple); letter-spacing: .08em; text-transform: uppercase;
  margin-bottom: var(--s-4);
}
.f-top h2 {
  font-size: clamp(var(--t-4), 5.2vw, var(--t-6));
  font-weight: 800; letter-spacing: -0.035em; color: var(--paper);
  max-width: 14ch; line-height: 1.02;
}
.f-top h2 .zero { color: var(--purple); }
.f-top p { margin-top: var(--s-5); max-width: 42ch; font-size: var(--t-2); line-height: 1.6; }
.f-top-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }

/* the canvas stage */
.f-stage {
  position: relative;
  aspect-ratio: 3 / 4;
  min-height: 470px;
  display: flex; align-items: center; justify-content: center;
}
.f-stage canvas {
  display: block; width: 100%; height: 100%;
  opacity: 0; transition: opacity .9s ease;
}
.f-stage.is-ready canvas { opacity: 1; }
/* flat fallback: the same receipt in CSS, shown until (or instead of) WebGL */
.f-flat {
  position: absolute; inset: 0; margin: auto;
  width: min(320px, 88%); height: fit-content;
  background: var(--paper); color: var(--ink-on-paper);
  font-family: var(--mono); font-size: var(--t-1);
  padding: var(--s-5) var(--s-4) var(--s-6);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 26px 60px rgba(5,5,16,.6);
  transform: rotate(-2deg);
  clip-path: polygon(0 0,100% 0,100% calc(100% - 8px),96% 100%,92% calc(100% - 8px),88% 100%,84% calc(100% - 8px),80% 100%,76% calc(100% - 8px),72% 100%,68% calc(100% - 8px),64% 100%,60% calc(100% - 8px),56% 100%,52% calc(100% - 8px),48% 100%,44% calc(100% - 8px),40% 100%,36% calc(100% - 8px),32% 100%,28% calc(100% - 8px),24% 100%,20% calc(100% - 8px),16% 100%,12% calc(100% - 8px),8% 100%,4% calc(100% - 8px),0 100%);
  transition: opacity .5s ease;
}
.f-stage.is-ready .f-flat { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; }
.f-flat .t { text-align: center; font-weight: 700; letter-spacing: .12em; margin-bottom: var(--s-3); }
.f-flat .r {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: var(--s-4); padding: 4px 0; font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.f-flat .r b { font-weight: 700; }
.f-flat .r.g b { color: var(--kr-green-on-paper); }
.f-flat hr { border: none; border-top: 1.5px dashed rgba(5,5,16,.22); margin: var(--s-2) 0; }


/* caption + a matching glow for the non-WebGL fallback */
.f-stage-wrap { display: grid; gap: var(--s-4); }
.f-stage-cap {
  text-align: center; max-width: 34ch; margin: 0 auto;
  font-family: var(--mono); font-size: var(--t-1); line-height: 1.6;
  color: var(--text-dim);
}
.f-stage-cap a { color: var(--purple); }
.f-stage-cap a:hover { text-decoration: underline; }
/* the flat receipt is clipped by clip-path, so the glow lives on the stage */
.f-stage::after {
  content: ""; position: absolute; left: 50%; top: 62%;
  width: min(340px, 92%); height: 150px; transform: translateX(-50%);
  background:
    radial-gradient(closest-side, rgba(168,85,247,.34), transparent 74%),
    radial-gradient(closest-side at 32% 58%, rgba(59,130,246,.22), transparent 72%);
  filter: blur(14px);
  pointer-events: none;
  transition: opacity .5s ease;
}
.f-stage.is-ready::after { opacity: 0; }

/* ---- link columns ---- */
.f-grid {
  display: grid; grid-template-columns: 1.4fr repeat(4, 1fr);
  gap: var(--s-7) var(--s-5);
  padding: var(--s-8) 0;
}
.f-mid { position: relative; background: rgba(250,249,246,.014); }
.f-mid::before, .f-mid::after {
  content: ""; position: absolute; left: 0; right: 0; height: 1px;
  background: var(--line-soft);
}
.f-mid::before { top: 0; }
.f-mid::after { bottom: 0; }
.f-brand .brand { font-size: var(--t-4); }
.f-tag { margin-top: var(--s-4); max-width: 30ch; line-height: 1.6; }
.f-badge {
  display: inline-flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-5);
  font-family: var(--mono); font-size: var(--t-1); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px; padding: var(--s-2) var(--s-4);
}
.f-badge .dot {
  width: 7px; height: 7px; border-radius: 50%; background: var(--kr-green);
  animation: fpulse 2.6s ease-out infinite;
}
@keyframes fpulse {
  0% { box-shadow: 0 0 0 0 rgba(0,200,150,.5); }
  70% { box-shadow: 0 0 0 9px rgba(0,200,150,0); }
  100% { box-shadow: 0 0 0 0 rgba(0,200,150,0); }
}

.f-col h3 {
  font-family: var(--mono); font-size: var(--t-1); font-weight: 500;
  color: var(--text-dim); letter-spacing: .1em; text-transform: uppercase;
  padding-bottom: var(--s-3); margin-bottom: var(--s-4);
  border-bottom: 1px solid var(--line-soft);
}
.f-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-3); }
.f-col a {
  color: var(--text-mute); position: relative; display: inline-block;
  transition: color .25s cubic-bezier(.2,.8,.2,1), transform .25s cubic-bezier(.2,.8,.2,1);
}
.f-col a::after {
  content: ""; position: absolute; left: 0; bottom: -2px; width: 100%; height: 1px;
  background: var(--purple); transform: scaleX(0); transform-origin: right;
  transition: transform .3s cubic-bezier(.2,.8,.2,1);
}
.f-col a:hover { color: var(--paper); transform: translateX(5px); }
.f-col a:hover::after { transform: scaleX(1); transform-origin: left; }

/* ---- bottom bar ---- */
.f-bottom {
  border-top: 1px solid var(--line-soft);
  padding: var(--s-5) 0 var(--s-6);
  display: flex; flex-wrap: wrap; justify-content: space-between;
  gap: var(--s-4) var(--s-5); align-items: center;
}
.f-legal { display: flex; flex-wrap: wrap; gap: var(--s-4) var(--s-5); }
.f-legal a { color: var(--text-dim); transition: color .2s; }
.f-legal a:hover { color: var(--text); }
.f-meta { font-family: var(--mono); color: var(--text-dim); }

/* ---- the mark, bleeding off the base (owner, 2026-10-09: the logo where the giant wordmark stood) ---- */
.f-word {
  position: relative; display: flex; justify-content: center;
  height: clamp(9rem, 26vw, 19rem); overflow: hidden;
  user-select: none; pointer-events: none;
  margin: var(--s-6) 0 0;
}
.f-mark {
  width: clamp(14rem, 40vw, 30rem); height: auto; aspect-ratio: 1;
  translate: 0 18%;                       /* the torn edge sinks below the base, as the letters did */
  color: rgba(250, 249, 246, .16);           /* the parts stroke with currentColor */
  transition: color .6s ease;
}
.site-footer:hover .f-mark { color: rgba(168, 85, 247, .42); }
/* drawn as an outline: when the footer comes into view (data-reveal → .in) the receipt draws itself, then the eyes
   and the wink, and from then on the open eye blinks every seven seconds */
.f-mark * { fill: none; stroke: currentColor; stroke-width: .8; stroke-linejoin: round; stroke-linecap: round; }
.f-mark .bm-body { stroke-dasharray: 230; stroke-dashoffset: 230; }
.f-mark .bm-socket, .f-mark .bm-pupil, .f-mark .bm-wink { stroke-dasharray: 40; stroke-dashoffset: 40; }
.f-mark .bm-lash { opacity: 0; }
.f-word.in .f-mark .bm-body { animation: f-draw 1.4s var(--ease-print) forwards; }
.f-word.in .f-mark .bm-socket, .f-word.in .f-mark .bm-pupil { animation: f-draw .9s 1s var(--ease-print) forwards, bm-open 7s 3s infinite; }
.f-word.in .f-mark .bm-wink { animation: f-draw .9s 1.2s var(--ease-print) forwards; }
.f-word.in .f-mark .bm-lash { animation: bm-lash 7s 3s infinite; }
@keyframes f-draw { to { stroke-dashoffset: 0; } }
@media (prefers-reduced-motion: reduce) {
  .brand-mark, .brand-mark *, .wm-eyes *, .f-mark * { animation: none !important; transition: none !important; stroke-dashoffset: 0 !important; rotate: none !important; }
  .brand-mark .bm-lash, .wm-eyes .we-lash, .f-mark .bm-lash { opacity: 0 !important; }
  .brand-mark .bm-socket, .brand-mark .bm-pupil, .wm-eyes .we-pupil, .f-mark .bm-socket, .f-mark .bm-pupil { opacity: 1 !important; }
}
:root[data-motion="off"] .brand-mark, :root[data-motion="off"] .brand-mark *, :root[data-motion="off"] .wm-eyes *, :root[data-motion="off"] .f-mark * { animation: none !important; transition: none !important; stroke-dashoffset: 0 !important; rotate: none !important; }
:root[data-motion="off"] .brand-mark .bm-lash, :root[data-motion="off"] .wm-eyes .we-lash, :root[data-motion="off"] .f-mark .bm-lash { opacity: 0 !important; }
:root[data-motion="off"] .brand-mark .bm-socket, :root[data-motion="off"] .brand-mark .bm-pupil, :root[data-motion="off"] .wm-eyes .we-pupil, :root[data-motion="off"] .f-mark .bm-socket, :root[data-motion="off"] .f-mark .bm-pupil { opacity: 1 !important; }

@media (max-width: 980px) {
  .f-top-inner { grid-template-columns: 1fr; gap: var(--s-7); }
  .f-stage { min-height: 300px; max-width: 380px; margin: 0 auto; }
  .f-grid { grid-template-columns: 1fr 1fr 1fr; }
  .f-brand { grid-column: 1 / -1; }
}
@media (max-width: 700px) {
  .f-grid { grid-template-columns: 1fr 1fr; gap: var(--s-6) var(--s-4); }
  .f-top { padding: var(--s-8) 0 var(--s-7); }
}
@media (prefers-reduced-motion: reduce) {
  .f-badge .dot { animation: none; }
  .f-stage canvas { display: none; }
  .f-stage.is-ready .f-flat { opacity: 1; }
}

/* ---- Feature grid (app page, sector pages) ---- */
.feat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4); margin-top: var(--s-7); }
.feat {
  background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--r);
  padding: var(--s-5); transition: border-color .2s, transform .2s;
}
.feat:hover { border-color: var(--purple); transform: translateY(-2px); }
.feat h3 { font-size: var(--t-2); margin-bottom: var(--s-2); }
.feat h3::before {
  content: ""; display: block; width: 18px; height: 2px;
  background: var(--purple); margin-bottom: var(--s-4);
}
.feat p { color: var(--text-mute); font-size: var(--t-1); line-height: 1.6; }
@media (max-width: 900px) { .feat-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .feat-grid { grid-template-columns: 1fr; } }

/* ============================================================
   Stage 7 — homepage chips, price factors, audience tabs, finder
   ============================================================ */

/* ---------- chips (the finder's situation buttons) ---------- */
.sc-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.sc-chip {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-mute); padding: 9px var(--s-4);
  font-size: var(--t-1); font-weight: 500;
  transition: border-color .18s, color .18s, background .18s, transform .18s;
}
.sc-chip:hover { border-color: var(--purple); color: var(--text); transform: translateY(-1px); }
.sc-chip.is-on { border-color: var(--purple); background: rgba(168,85,247,.16); color: var(--paper); }

/* ---------- small mono note (price cards) ---------- */
.sc-note { font-size: .78rem; color: var(--text-dim); line-height: 1.5; font-family: var(--mono); margin-top: var(--s-4); }

/* ---------- price factors ---------- */
.factors { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--s-4); margin-top: var(--s-7); }
.factor {
  border-left: 2px solid var(--purple);
  padding: var(--s-2) 0 var(--s-2) var(--s-5);
}
.factor h3 { font-size: var(--t-2); margin-bottom: var(--s-2); }
.factor p { color: var(--text-mute); font-size: var(--t-1); line-height: 1.65; }
.factor:only-child { grid-column: 1 / -1; }
@media (max-width: 760px) { .factors { grid-template-columns: 1fr; } }

/* ---------- homepage: audience tabs ---------- */
.aud-tabs { display: flex; flex-wrap: wrap; gap: var(--s-2); margin-top: var(--s-6); }
.aud-tab {
  background: none; border: 1px solid var(--line); border-radius: 999px;
  color: var(--text-mute); padding: 10px var(--s-5);
  font-size: var(--t-2); font-weight: 600;
  transition: border-color .2s, color .2s, background .2s, transform .2s;
}
.aud-tab:hover { border-color: var(--purple); color: var(--text); transform: translateY(-1px); }
.aud-tab.is-on { border-color: var(--purple); background: rgba(168,85,247,.16); color: var(--paper); }
.aud-panel { display: none; margin-top: var(--s-6); }
.aud-panel.is-on { display: block; animation: fadein .35s ease; }
@keyframes fadein { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.aud-panel .steps { margin-top: 0; }
.aud-lead { color: var(--text-mute); font-size: var(--t-3); max-width: 54ch; margin-bottom: var(--s-6); }

/* ---------- homepage: needs finder ---------- */
.finder { margin-top: var(--s-7); }
.finder-q { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.finder-out {
  margin-top: var(--s-6);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s-4);
  min-height: 10px;
}
@media (max-width: 900px) { .finder-out { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .finder-out { grid-template-columns: 1fr; } }
.finder-out .service { animation: fadein .35s ease both; }
.finder-out .service:nth-child(2) { animation-delay: 60ms; }
.finder-out .service:nth-child(3) { animation-delay: 120ms; }

/* ============================================================
   Stage 8 — the light theme, the theme button, the language
   switcher and right-to-left (docs/WEBSITE-PLAN.md §3.8, §3.9)
   ============================================================ */

/* ---- Light theme: tokens only. Dark is the default for everyone; the visitor's choice is stored
   by assets/theme.js before first paint. Paper stays paper: the light ground is a different, warmer
   grey, so the receipt still reads as a separate sheet. ---- */
:root[data-theme="light"] {
  --ink:      #F4F3EE;
  --ink-2:    #F8F7F2;
  --purple:   #8B3FD9;
  --blue:     #1D4ED8;
  --kr-green: #007A58;
  --text:       rgba(5, 5, 16, 0.92);
  --text-mute:  rgba(5, 5, 16, 0.66);
  --text-dim:   rgba(5, 5, 16, 0.60);  /* 5.3:1 on #F4F3EE, 5.4:1 on paper (WCAG 1.4.3 AA); was .48, 3.5:1 */
  --line:       rgba(5, 5, 16, 0.14);
  --line-soft:  rgba(5, 5, 16, 0.08);
  color-scheme: light;
}
:root[data-theme="light"] ::selection { background: var(--purple); color: #FFFFFF; }
:root[data-theme="light"] .site-header { background: rgba(244, 243, 238, 0.85); }
:root[data-theme="light"] .menu {
  background:
    radial-gradient(1200px 600px at 85% -10%, rgba(139,63,217,0.10), transparent 60%),
    radial-gradient(900px 500px at -10% 110%, rgba(29,78,216,0.07), transparent 60%),
    var(--ink-2);
}
:root[data-theme="light"] .m-link:hover, :root[data-theme="light"] .m-link:focus-visible, :root[data-theme="light"] .m-link.is-active,
:root[data-theme="light"] .menu-col a:hover, :root[data-theme="light"] .f-col a:hover { color: var(--text); }
:root[data-theme="light"] .mp-svc:hover { color: var(--text); background: rgba(139,63,217,.10); }
:root[data-theme="light"] .sc-chip.is-on, :root[data-theme="light"] .aud-tab.is-on, :root[data-theme="light"] .pk-chip.is-on { color: var(--text); background: rgba(139,63,217,.12); }
:root[data-theme="light"] .btn-primary { color: #FFFFFF; }
:root[data-theme="light"] .btn-primary:hover { background: #7A31C7; }
:root[data-theme="light"] .receipt, :root[data-theme="light"] .menu-receipt, :root[data-theme="light"] .f-flat, :root[data-theme="light"] .pk-result {
  border: 1px solid var(--line);
  box-shadow: 0 18px 40px rgba(5, 5, 16, 0.14), 0 2px 6px rgba(5, 5, 16, 0.08);
}
:root[data-theme="light"] .f-top h2, :root[data-theme="light"] .hero h1 .pct { color: var(--purple); }
:root[data-theme="light"] .f-top h2 { color: var(--text); }
:root[data-theme="light"] .site-footer {
  background: radial-gradient(900px 380px at 72% -8%, rgba(139,63,217,.06), transparent 68%), var(--ink);
}
:root[data-theme="light"] .f-mark { color: rgba(5,5,16,.14); }
:root[data-theme="light"] .site-footer:hover .f-mark { color: rgba(139,63,217,.38); }
:root[data-theme="light"] .f-stage::after { opacity: .28; }
:root[data-theme="light"] input[type="range"]::-webkit-slider-thumb { background: #FFFFFF; box-shadow: 0 2px 8px rgba(5,5,16,.18); }
:root[data-theme="light"] .skip-link { background: var(--text); color: var(--ink); }
:root[data-theme="light"] .hero-sub strong { color: var(--kr-green); }
:root[data-theme="light"] .menu-btn, :root[data-theme="light"] .theme-btn { color: var(--text); }

/* ---- The theme button (header) ---- */
.theme-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; flex: none;
  background: none; border: 1px solid var(--line); border-radius: var(--r);
  color: var(--text); padding: 0;
  transition: border-color .2s, background .2s;
}
.theme-btn:hover { border-color: var(--purple); }
@media (max-width: 480px) {
  .menu-btn .menu-btn-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  .menu-btn { padding: 10px 12px; gap: 0; }
  .nav-right { gap: var(--s-2); }
}
.theme-btn svg { width: 18px; height: 18px; }
.theme-btn .ic-moon { display: none; }
:root[data-theme="light"] .theme-btn .ic-sun { display: none; }
:root[data-theme="light"] .theme-btn .ic-moon { display: block; }

/* ---- The language switcher (header; rendered only when more than one language is published) ---- */
.lang { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px; }
.lang a {
  font-family: var(--mono); font-size: var(--t-1); color: var(--text-mute);
  padding: 7px 9px; border-radius: 8px; line-height: 1;
  transition: color .15s, background .15s;
}
.lang a:hover { color: var(--text); background: rgba(168,85,247,.10); }
.lang a[aria-current="page"] { color: var(--text); font-weight: 600; }
.lang a[aria-current="page"] { pointer-events: none; }
/* each language beside its flag (owner-notes 174): 20 x 14 from assets/flags.svg, rounded, its name the link's text */
.lang a { display: inline-flex; align-items: center; gap: 6px; }
.lang .flag { display: inline-flex; flex: none; width: 20px; height: 14px; border-radius: 2px; overflow: hidden; }
.lang .flag svg { display: block; width: 20px; height: 14px; }
/* Narrow screens: the header keeps brand, theme, login and menu; the languages sit in the menu. */
@media (max-width: 720px) { .site-header .lang { display: none; } }
.menu-lang { max-width: var(--wrap); margin: 0 auto; width: 100%; padding: var(--s-5) var(--s-5) 0; border-top: 1px solid var(--line-soft); }
.menu-lang:empty { display: none; }
.menu-lang .lang { gap: var(--s-2); }
.menu-lang .lang a { font-size: var(--t0); padding: 8px 12px; }
.menu-lang + .menu-foot { border-top: 0; padding-top: var(--s-4); }
/* Small phones (360): the header tightens rather than wraps */
@media (max-width: 380px) { .brand { font-size: 1.1rem; } .theme-btn { width: 36px; } .nav-right { gap: var(--s-1); } }
/* Forms: the spam trap is hidden in place, never off-screen (off-screen scrolls in right-to-left pages). */
main:focus { outline: none; }
.hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }

/* ---- Right to left: Arabic pages get dir="rtl" on <html>. The layout uses logical properties
   where the direction matters; what is listed here is what the base stylesheet wrote with left/right. ---- */
[dir="rtl"] { --rtl-font: 'Readex Pro'; font-family: var(--rtl-font), var(--body); }
html[lang="fa"], html[lang="ckb"], html[lang="kmr-Arab"] { --rtl-font: 'Noto Sans Arabic'; }
[dir="rtl"] h1, [dir="rtl"] h2, [dir="rtl"] h3, [dir="rtl"] h4, [dir="rtl"] .brand, [dir="rtl"] .f-word, [dir="rtl"] .m-link, [dir="rtl"] .sd-big { font-family: var(--rtl-font), var(--display); letter-spacing: 0; }
[dir="rtl"] .hero h1, [dir="rtl"] .section h2, [dir="rtl"] .page-hero h1, [dir="rtl"] .f-top h2 { letter-spacing: 0; line-height: 1.2; }
[dir="rtl"] .brand, [dir="rtl"] .f-word, [dir="rtl"] .receipt, [dir="rtl"] .menu-receipt, [dir="rtl"] .f-flat, [dir="rtl"] .amt, [dir="rtl"] [data-out], [dir="rtl"] .live-v, [dir="rtl"] .hdr-live { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .receipt, [dir="rtl"] .menu-receipt, [dir="rtl"] .f-flat { direction: ltr; }
/* Inside the LTR receipts the labels are still Arabic: each label is its own right-to-left run, the amounts stay LTR. */
[dir="rtl"] .receipt-line > span:first-child, [dir="rtl"] .receipt-brand, [dir="rtl"] .receipt-venue, [dir="rtl"] .mr-line .k, [dir="rtl"] .mr-title, [dir="rtl"] .f-flat .r > span, [dir="rtl"] .f-flat .t, [dir="rtl"] .receipt-slider label { direction: rtl; unicode-bidi: isolate; }
/* The mono labels (receipt rows, eyebrows, crumbs) carry Arabic text too: Readex Pro draws it; the amounts,
   the clock and the counters stay in JetBrains Mono so the digits keep their tabular width. */
[dir="rtl"] { --mono: var(--rtl-font), 'JetBrains Mono', ui-monospace, monospace; }
[dir="rtl"] .amt, [dir="rtl"] [data-out], [dir="rtl"] .live-v, [dir="rtl"] .hdr-live, [dir="rtl"] .mr-line .v, [dir="rtl"] .f-flat b, [dir="rtl"] .pk-line .v, [dir="rtl"] .pk-total .v, [dir="rtl"] output { font-family: 'JetBrains Mono', ui-monospace, monospace; }
/* Arabic script is never letter-spaced (the Latin wordmarks keep theirs). */
[dir="rtl"] :not(.brand, .brand *, .f-word) { letter-spacing: 0; }
[dir="rtl"] .m-link .arrow, [dir="rtl"] .service .go::after, [dir="rtl"] .f-col a:hover { transform: scaleX(-1); } /* the crumb's › mirrors itself (bidi) */
[dir="rtl"] .f-col a:hover { transform: translateX(-5px); }
[dir="rtl"] .f-col a::after { transform-origin: left; }
[dir="rtl"] .f-col a:hover::after { transform-origin: right; }
[dir="rtl"] .factor { border-left: none; border-right: 2px solid var(--purple); padding-left: 0; padding-right: var(--s-5); }
[dir="rtl"] .menu-col a:hover { transform: translateX(-5px); }
[dir="rtl"] .field select { background-position: 14px 50%, 20px 50%; }
[dir="rtl"] input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(270deg, var(--purple) var(--fill, 27%), var(--line) var(--fill, 27%)); }
[dir="rtl"] .skip-link { left: auto; right: -9999px; }
[dir="rtl"] .skip-link:focus { right: 0; left: auto; }
[dir="rtl"] .menu-btn .burger { transform: scaleX(-1); }
[dir="rtl"] .receipt-slider label, [dir="rtl"] .live-row { direction: rtl; }
[dir="rtl"] .pk-chip, [dir="rtl"] .sc-chip, [dir="rtl"] .aud-tab { font-family: var(--rtl-font), var(--body); }

/* ==== W2 motion ==== */
/* The motion system (docs/WEBSITE-PLAN.md §8, spec-motion): paper first, numbers second, stamp last.
   Every action is opacity / transform / translate / rotate / clip-path; the print head is a pseudo that
   walks the paper with no measurement (its length is the line count, --n, set by the receipt module);
   reduced motion and the site switch (:root[data-motion="off"], the footer button) collapse every action
   to its final state in the two twin blocks at the end of this block. */
:root {
  --ease-out:   cubic-bezier(.2, .8, .2, 1);   /* what arrives */
  --ease-print: cubic-bezier(.2, .7, .3, 1);   /* paper and lines */
  --ease-wipe:  cubic-bezier(.76, 0, .24, 1);  /* what covers: the menu */
  --ease-stamp: cubic-bezier(.3, 1.4, .5, 1);  /* the only overshoot on the site */
  --dur-1: 150ms; --dur-2: 350ms; --dur-3: 600ms; --dur-4: 700ms;
  --head: var(--purple);
  --head-glow: rgba(168, 85, 247, .35);
}
:root[data-theme="light"] { --head-glow: rgba(139, 63, 217, .30); }
[hidden] { display: none !important; }
[id] { scroll-margin-top: 80px; }
[data-reveal] { will-change: auto; }          /* 45 pages × dozens of layers was memory for nothing */
.f-badge .dot { animation: none; }            /* nothing idles: the badge keeps a static dot */

/* ---- Section tear lines: a dashed perforation with a punched half-circle at each end, static ---- */
.section { position: relative; border-top: 0; }
.section::before {
  content: ""; position: absolute; top: -1px; left: 50%; translate: -50% 0;
  width: min(100% - 32px, var(--wrap) - 48px); height: 12px; pointer-events: none;
  background:
    radial-gradient(circle at 6px 0, transparent 5px, var(--line) 5.5px 6.5px, transparent 7px),
    radial-gradient(circle at calc(100% - 6px) 0, transparent 5px, var(--line) 5.5px 6.5px, transparent 7px),
    repeating-linear-gradient(90deg, var(--line) 0 6px, transparent 6px 12px) 16px 0 / calc(100% - 32px) 1.5px no-repeat;
}
.section.no-tear::before { display: none; }

/* ---- Paper: every sheet can carry a print head ---- */
.receipt, .receipt-sm, .menu-receipt, .slip, .tryck { position: relative; }
.receipt { --head-ms: calc(var(--n, 8) * 60ms + 350ms); }
.is-printing::after, .is-loading::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 1;
  background: linear-gradient(to top, var(--head) 0 2px, var(--head-glow) 2px, transparent 20px);
  transform: translateY(-100%); will-change: transform;
}
.is-printing::after { animation: print-head var(--head-ms, 950ms) linear forwards; }
@keyframes print-head { 0% { opacity: 1; } 92% { opacity: 1; } 100% { opacity: 0; transform: translateY(0); } }
.is-loading::after { transform: translateY(calc(-100% + 24px)); animation: head-pulse 1.2s ease-in-out infinite; }
@keyframes head-pulse { 0%, 100% { opacity: .25; } 50% { opacity: 1; } }
.receipt.is-printing [data-print] { animation: printline var(--dur-2) var(--ease-print) forwards; animation-delay: calc(var(--i, 0) * 60ms); }
.slip.is-printing [data-print] { animation: printline var(--dur-2) var(--ease-print) forwards; animation-delay: calc(var(--i, 0) * 60ms); }

/* ---- "Skrivaren": the hero printer slot (CSS only, 0 bytes of media) ---- */
.printer { display: grid; row-gap: 0; width: min(400px, 100%); justify-self: center; }
.printer-slot {
  position: relative; z-index: 2; height: 56px;
  background: var(--ink-2); border: 1px solid var(--line-soft);
  border-radius: var(--r) var(--r) 0 0; overflow: hidden;
}
.printer-slot::before {   /* the lamp line; it flares for a moment while the receipt feeds out */
  content: ""; position: absolute; inset: 0 0 auto 0; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(250, 249, 246, .28), transparent);
}
.printer:has(.receipt.is-feeding) .printer-slot::before { animation: lamp 700ms var(--ease-out); }
@keyframes lamp { 0% { height: 1px; opacity: 1; } 30% { height: 3px; opacity: 1; background: linear-gradient(90deg, transparent, rgba(168, 85, 247, .9), transparent); } 100% { height: 1px; opacity: 1; } }
.printer-slot::after {    /* the slit, with the roll's paper stub that stays behind when the receipt tears */
  content: ""; position: absolute; inset: auto 2% 0 2%; height: 5px;
  background: var(--ink); border-bottom: 2px solid var(--paper); border-radius: 2px 2px 0 0;
  box-shadow: 0 1px 0 rgba(250, 249, 246, .14);
}
@media (prefers-reduced-motion: reduce) { .printer-slot::before { animation: none !important; } }
:root[data-motion="off"] .printer-slot::before { animation: none !important; }
.printer-out { margin-top: -6px; padding: 6px 8px 28px; clip-path: inset(0 -80px -80px -80px); }   /* clips the 40 px feed start, keeps the shadow */
.printer .receipt { margin: 0 auto; translate: 0 -40px; }
.printer .receipt.is-printed { translate: 0 0; }
.printer .receipt.is-feeding { animation: feed var(--dur-4) var(--ease-out) forwards; }
@keyframes feed { to { translate: 0 0; } }
.printer .receipt.is-torn { animation: tear 420ms var(--ease-out) forwards; }
@keyframes tear { 0% { translate: 0 0; rotate: 0deg; } 55% { translate: 0 7px; rotate: 1.4deg; } 100% { translate: 0 6px; rotate: 1.2deg; } }
.receipt-foot {   /* the fee line under every "0 %": the last printed line, mono, mute */
  margin-top: var(--s-3); font-size: var(--t-1); color: var(--ink-on-paper-mute); padding-inline-end: 92px;
}

/* ---- The stamp: "0 %" after a räkneexempel count; "MOTTAGET" on a slip after HTTP 201. Nowhere else. ---- */
.stamp {
  position: absolute; inset-inline-end: 18px; bottom: 22px; z-index: 2;
  font-family: var(--mono); font-weight: 800; font-size: 1.15rem; letter-spacing: .08em; line-height: 1.2;
  color: var(--purple-on-paper); border: 2px solid currentColor; border-radius: 4px; padding: 2px 8px;
  transform: rotate(-8deg); opacity: 0; pointer-events: none; white-space: nowrap;
}
.is-stamped .stamp { animation: stamp 180ms var(--ease-stamp) forwards, stamp-bleed 90ms linear 180ms forwards; }
@keyframes stamp {
  0% { opacity: 0; transform: rotate(-14deg) scale(1.3); }
  60% { opacity: 1; transform: rotate(-8deg) scale(.97); }
  100% { opacity: 1; transform: rotate(-8deg) scale(1); }
}
@keyframes stamp-bleed { from { filter: blur(.4px); } to { filter: blur(0); } }

/* ---- The slip: one paper line a form prints after HTTP 201 (never on failure) ---- */
.slip {
  display: inline-flex; align-items: center; gap: var(--s-3); max-width: 100%;
  margin-top: var(--s-5);
  background: var(--paper); color: var(--ink-on-paper);
  font-family: var(--mono); font-size: var(--t-1); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
  padding: var(--s-3) var(--s-4) var(--s-4);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 12px 30px rgba(5, 5, 16, .45);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 8px), 95% 100%, 90% calc(100% - 8px), 85% 100%, 80% calc(100% - 8px), 75% 100%, 70% calc(100% - 8px), 65% 100%, 60% calc(100% - 8px), 55% 100%, 50% calc(100% - 8px), 45% 100%, 40% calc(100% - 8px), 35% 100%, 30% calc(100% - 8px), 25% 100%, 20% calc(100% - 8px), 15% 100%, 10% calc(100% - 8px), 5% 100%, 0 calc(100% - 8px));
  rotate: -1.5deg; translate: 0 -12px; opacity: 0;
  --head-ms: 400ms;
}
.slip time { font-variant-numeric: tabular-nums; }
.slip [data-print] { opacity: 0; transform: translateY(6px); }
.slip.is-printed { translate: 0 0; opacity: 1; }
.slip.is-printed [data-print] { opacity: 1; transform: none; }
.slip .stamp { position: static; margin-inline-start: var(--s-2); font-size: .85em; }
/* a lead's slip also carries its reference (CORE.2): on a phone the line breaks rather than running off the paper */
.slip.has-ref { flex-wrap: wrap; row-gap: var(--s-1); }
.slip.is-feeding { animation: feed-slip 300ms var(--ease-out) forwards; }
@keyframes feed-slip { to { translate: 0 0; opacity: 1; } }

/* ---- "För vem": the three panels share one grid cell; the leaving one sinks 6 px and fades (150 ms),
   the arriving cards print from above 40 ms apart. Without :has() the panels keep display toggling. ---- */
@supports selector(:has(a)) {
  .wrap:has(> .aud-tabs) { display: grid; grid-template-columns: minmax(0, 1fr); }
  .aud-panel {
    grid-column: 1; grid-row: 4; display: block;
    visibility: hidden; opacity: 0; translate: 0 6px;
    transition: opacity var(--dur-1) var(--ease-out), translate var(--dur-1) var(--ease-out), visibility 0s var(--dur-1);
  }
  .aud-panel.is-on { visibility: visible; opacity: 1; translate: 0 0; transition-delay: 0s; animation: none; }
  .aud-panel .step:nth-child(1) { --i: 0; }
  .aud-panel .step:nth-child(2) { --i: 1; }
  .aud-panel .step:nth-child(3) { --i: 2; }
  .aud-panel.is-on .step.in { animation: printline-down var(--dur-2) var(--ease-out) both; animation-delay: calc(var(--i) * 40ms); }
}
@keyframes printline-down { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.finder-out .service { animation-timing-function: var(--ease-out); animation-duration: var(--dur-2); }

/* ---- Step numbers print when reached; on the home page a dashed printer line draws itself in the left
   margin (≥ 900 px) as each section enters, so the line's tip rides the bottom edge of the viewport and
   reaches a step number exactly as that number prints. CSS scroll-driven where view() exists; the
   IntersectionObserver in app.js adds .in / .is-reached elsewhere. ---- */
@keyframes print-num { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes draw-line { to { clip-path: inset(0); } }
@supports not (animation-timeline: view()) {
  .step.in .step-num { animation: print-num var(--dur-2) var(--ease-print) both; }
}
@media (min-width: 900px) {
  main > .hero ~ .section::after {
    content: ""; position: absolute; inset-block: 0; z-index: 0;
    inset-inline-start: max(12px, calc(50% - var(--wrap) / 2 - 28px));
    width: 2px; pointer-events: none;
    background: repeating-linear-gradient(to bottom, var(--text-dim) 0 8px, transparent 8px 16px);
    opacity: .5; clip-path: inset(0 0 100% 0);
  }
  main > .hero ~ .section.is-reached::after { clip-path: inset(0); transition: clip-path var(--dur-4) linear; }
}
@supports (animation-timeline: view()) {
  .step-num { animation: print-num linear both; animation-timeline: view(); animation-range: entry 0% cover 12%; }
  @media (min-width: 900px) {
    main > .hero ~ .section::after { animation: draw-line linear both; animation-timeline: view(); animation-range: entry 0% entry 100%; }
    main > .hero ~ .section.is-reached::after { transition: none; }
  }
}

/* ---- Cross-document view transitions (Chrome 126+, Safari 18.2+; plain navigation elsewhere). Every page opts
   in whatever the visitor's motion setting: an opt-in that held on one page and not on the next (reduced motion
   switched on in between) made the browser abort the transition with an InvalidStateError on the console. Under
   reduced motion nothing moves (no animation, the new page at once), and app.js skips the transition on
   pageswap/pagereveal when the site switch is off. ---- */
@view-transition { navigation: auto; }
@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
  ::view-transition-group(kvitto) { animation-duration: var(--dur-3); animation-timing-function: var(--ease-out); }
  .site-header { view-transition-name: header; }
  [data-printer] .receipt { view-transition-name: kvitto; }
}
@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
}

/* ---- The motion switch in the footer's legal row (two static labels, toggled with hidden) ---- */
.motion-btn {
  background: none; border: 0; padding: 0; margin: 0;
  color: var(--text-dim); font: inherit; line-height: inherit; cursor: pointer;
  min-height: 24px; display: inline-flex; align-items: center; transition: color .2s;
}
.motion-btn:hover { color: var(--text); }
@media (pointer: coarse) { .motion-btn { min-height: 36px; } }

/* ---- Light theme: the slot is a white bar with a dark slit; the slip gets a border like the receipt ---- */
:root[data-theme="light"] .printer-slot { border-color: var(--line); }
:root[data-theme="light"] .printer-slot::before { background: linear-gradient(90deg, transparent, rgba(5, 5, 16, .10), transparent); }
:root[data-theme="light"] .printer-slot::after { background: var(--text); box-shadow: none; }
:root[data-theme="light"] .slip { border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(5, 5, 16, .14), 0 2px 6px rgba(5, 5, 16, .08); }

/* ---- Right to left: the stamp and the printer line use logical insets; the slip's time stays Latin ---- */
[dir="rtl"] .slip time { font-family: 'JetBrains Mono', ui-monospace, monospace; direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .receipt-foot { direction: rtl; unicode-bidi: isolate; }

/* ---- Reduced motion: every action at its final state (fades ≤ 200 ms may stay) ---- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  [data-print], [data-row] { opacity: 1 !important; transform: none !important; animation: none !important; }
  .receipt, .receipt-sm, .slip, .tryck { translate: none !important; rotate: none !important; animation: none !important; }
  .slip { opacity: 1 !important; }
  .is-printing::after, .is-loading::after { animation: none !important; opacity: 0 !important; }
  .stamp { animation: none !important; opacity: 1 !important; filter: none !important; transform: rotate(-8deg) !important; }
  .step-num { animation: none !important; opacity: 1 !important; transform: none !important; }
  main > .hero ~ .section::after { animation: none !important; transition: none !important; clip-path: none !important; }
  [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
  .aud-panel, .aud-panel .step, .finder-out .service, .mp, .menu-preview, .menu, .m-link, .menu-receipt, .live-strip,
  .faq-a, .faq-q .pm { animation: none !important; transition: none !important; }
  .f-stage canvas { display: none; }
  .f-stage.is-ready .f-flat { opacity: 1; }
  .f-badge .dot { animation: none !important; }
}
/* ---- The site switch: the same block, prefixed ---- */
:root[data-motion="off"] { scroll-behavior: auto; }
:root[data-motion="off"] [data-print], :root[data-motion="off"] [data-row] { opacity: 1 !important; transform: none !important; animation: none !important; }
:root[data-motion="off"] .receipt, :root[data-motion="off"] .receipt-sm, :root[data-motion="off"] .slip, :root[data-motion="off"] .tryck { translate: none !important; rotate: none !important; animation: none !important; }
:root[data-motion="off"] .slip { opacity: 1 !important; }
:root[data-motion="off"] .is-printing::after, :root[data-motion="off"] .is-loading::after { animation: none !important; opacity: 0 !important; }
:root[data-motion="off"] .stamp { animation: none !important; opacity: 1 !important; filter: none !important; transform: rotate(-8deg) !important; }
:root[data-motion="off"] .step-num { animation: none !important; opacity: 1 !important; transform: none !important; }
:root[data-motion="off"] main > .hero ~ .section::after { animation: none !important; transition: none !important; clip-path: none !important; }
:root[data-motion="off"] [data-reveal] { opacity: 1 !important; transform: none !important; transition: none !important; }
:root[data-motion="off"] .aud-panel, :root[data-motion="off"] .aud-panel .step, :root[data-motion="off"] .finder-out .service, :root[data-motion="off"] .mp, :root[data-motion="off"] .menu-preview, :root[data-motion="off"] .menu, :root[data-motion="off"] .m-link, :root[data-motion="off"] .menu-receipt, :root[data-motion="off"] .live-strip,
:root[data-motion="off"] .faq-a, :root[data-motion="off"] .faq-q .pm { animation: none !important; transition: none !important; }
:root[data-motion="off"] .f-stage canvas { display: none; }
:root[data-motion="off"] .f-stage.is-ready .f-flat { opacity: 1; }
:root[data-motion="off"] .f-badge .dot { animation: none !important; }
/* ==== W2 icons ==== */
/* Skrivarlinjer (plan §3, W3.1): one external sprite, assets/icons.svg, 24 px, 2 px, round caps, currentColor.
   Every stroke in the sprite carries pathLength="1", and stroke-dasharray/offset inherit into the <use>
   shadow tree, so the host alone draws a symbol in once on first view (350 ms). Icons inside a [data-reveal]
   card draw with the card; the menu's draw when the menu opens; free-standing ones get .is-drawn from app.js. */
.ic { width: 24px; height: 24px; flex: none; color: var(--purple); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; overflow: visible; }
.ic.is-drawn, [data-reveal].in .ic, body.menu-open .menu .ic, .diagram.is-drawn .kd-ic { animation: ic-draw var(--dur-2, 350ms) var(--ease-print, cubic-bezier(.2,.7,.3,1)) forwards; }
[data-reveal].in .ic { animation-delay: calc(var(--d, 0ms) + 240ms); }
body.menu-open .menu .ic { animation-delay: 450ms; }
.ic-xl { width: 96px; height: 96px; }
.ic-xl.is-drawn { animation-duration: var(--dur-4, 700ms); }
@keyframes ic-draw { to { stroke-dashoffset: 0; } }
.step .ic, .service .ic, .feat .ic { margin-bottom: var(--s-4); }
.service .ic + h3::before, .feat .ic + h3::before { display: none; }  /* the dash stays the fallback without an icon */
.mp-svc { display: flex; align-items: center; gap: var(--s-2); }
.mp-svc .ic { width: 16px; height: 16px; stroke-width: 2.4; }

/* Kvittodiagram (plan §5.4, W3.2): paper pieces are HTML, so every word is in the catalogue; the ink lines are
   inline SVG with pathLength="1". Print order on first view: paper feeds, its rows print, the ink draws,
   the legend prints; nothing moves afterwards. Only named räkneexempel or legal facts appear as figures. */
.diagram { margin: var(--s-6) 0; contain: paint; }
.diagram figcaption, .kd-leg { font-family: var(--mono); font-size: var(--t-1); color: var(--text-dim); }
.kd-leg { color: var(--text-mute); }
.diagram figcaption { margin-top: var(--s-4); text-align: center; }
.kd-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-3); align-items: start; list-style: none; margin: 0; padding: 0; }
.kd-grid.kd-two { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.kd-leg { list-style: none; margin: var(--s-3) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); }
.kd-leg li { display: flex; align-items: center; gap: var(--s-2); }
.kd-leg i { flex: none; width: 18px; height: 0; border-top: 2px solid var(--purple); }
.kd-leg .is-dim i { border-top: 1.5px solid var(--text-dim); }
.kd-grid.kd-leg { display: grid; }
.kd-grid.kd-leg li { flex-direction: column; align-items: stretch; text-align: center; gap: var(--s-2); }
.kd-paper { position: relative; background: var(--paper); color: var(--ink-on-paper); font-family: var(--mono); font-size: .8125rem; line-height: 1.4; padding: var(--s-3) var(--s-3) var(--s-4); border-radius: 3px 3px 0 0; box-shadow: 0 12px 30px rgba(5,5,16,.45); clip-path: polygon(0 0,100% 0,100% calc(100% - 8px),95% 100%,90% calc(100% - 8px),85% 100%,80% calc(100% - 8px),75% 100%,70% calc(100% - 8px),65% 100%,60% calc(100% - 8px),55% 100%,50% calc(100% - 8px),45% 100%,40% calc(100% - 8px),35% 100%,30% calc(100% - 8px),25% 100%,20% calc(100% - 8px),15% 100%,10% calc(100% - 8px),5% 100%,0 calc(100% - 8px)); }
.kd-head { font-weight: 700; font-size: .72rem; letter-spacing: .08em; text-transform: uppercase; margin-bottom: var(--s-2); }
.kd-row { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-2); padding: 2px 0; font-variant-numeric: tabular-nums; }
.kd-row .amt { white-space: nowrap; }
.kd-row.is-mid { align-items: center; }
.kd-row.is-strike { color: var(--ink-on-paper-mute); }
.kd-row.is-strike .amt { text-decoration: line-through; }
.kd-row.is-sum { font-weight: 700; margin-top: var(--s-1); padding-top: var(--s-2); border-top: 1.5px dashed rgba(5,5,16,.25); }
.kd-row.is-sum .amt { color: var(--kr-green-on-paper); }
.kd-mute { color: var(--ink-on-paper-mute); }
.kd-tags { display: flex; align-items: center; gap: var(--s-2); }
.kd-tag { display: flex; flex-direction: column; gap: 4px; font-weight: 700; color: var(--purple-on-paper); white-space: nowrap; }
.kd-ink { display: block; width: 100%; height: auto; color: var(--purple); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; overflow: visible; }
.kd-paper .kd-ink { color: var(--purple-on-paper); }
.kd-ink.kd-bracket { width: 24px; height: 40px; flex: none; }
.kd-ink .is-paper { fill: var(--paper); stroke: none; }
.kd-ink .is-dim { stroke: var(--text-dim); stroke-width: 1.5; }
.kd-ic { stroke-dasharray: 1; stroke-dashoffset: 1; }
.kd-fork { height: 28px; }
.kd-flow { padding-left: calc(var(--s-3) + 22px); }
.kd-gutter { position: absolute; left: var(--s-3); top: var(--s-3); bottom: var(--s-4); width: 12px; height: auto; }
[data-kd="kvarteret"] .kd-ink { max-width: 440px; margin: 0 auto; }
[data-kd="tre-modeller"] .kd-ink { color: var(--purple-on-paper); }
.kd-ink [data-draw] ~ [data-draw] { --i: 1; }
.diagram [data-draw] { stroke-dasharray: 1; stroke-dashoffset: 1; }
.diagram.is-drawn [data-draw] { animation: ic-draw var(--dur-4, 700ms) var(--ease-print, cubic-bezier(.2,.7,.3,1)) forwards; animation-delay: calc(560ms + var(--i, 0) * 120ms); }
.diagram.is-drawn .kd-ic { animation-delay: 700ms; }
.diagram .kd-paper, .diagram .is-paper, .pull-paper { opacity: 0; translate: 0 -12px; }
.diagram.is-drawn .kd-paper, .diagram.is-drawn .is-paper, .pull-paper.is-drawn { animation: kd-feed 300ms var(--ease-out, cubic-bezier(.2,.8,.2,1)) forwards; }
@keyframes kd-feed { to { opacity: 1; translate: 0 0; } }
.diagram [data-print], .diagram .kd-k { opacity: 0; transform: translateY(6px); }
.diagram.is-drawn [data-print] { animation: printline var(--dur-2, 350ms) var(--ease-print, cubic-bezier(.2,.7,.3,1)) forwards; animation-delay: calc(300ms + var(--i, 0) * 60ms); }
.diagram.is-drawn .kd-k { animation: printline var(--dur-2, 350ms) var(--ease-print, cubic-bezier(.2,.7,.3,1)) forwards; animation-delay: 1s; }
.kd-paper > :nth-child(2) { --i: 1; } .kd-paper > :nth-child(3) { --i: 2; } .kd-paper > :nth-child(4) { --i: 3; } .kd-paper > :nth-child(5) { --i: 4; } .kd-paper > :nth-child(6) { --i: 5; }
.kd-grid > :nth-child(2) [data-draw], .kd-grid > :nth-child(2) .is-paper { --i: 1; } .kd-grid > :nth-child(3) [data-draw], .kd-grid > :nth-child(3) .is-paper { --i: 2; }
@media (max-width: 640px) { .kd-grid.kd-receipts { grid-template-columns: 1fr; } .kd-fork { display: none; } }

/* Journalen (plan §5.4, W3.3): a typographic cover on each index card (the post's one named figure, outlined
   like the footer wordmark), the byline as a receipt head, and the pull quote as the one paper strip of
   the article, torn at both ends. */
.post .post-cover { flex: none; font-family: var(--display); font-weight: 800; font-size: clamp(2.6rem, 8vw, 4rem); line-height: 1; letter-spacing: -0.03em; color: transparent; -webkit-text-stroke: 1px rgba(250,249,246,.5); padding-bottom: var(--s-3); border-bottom: 1.5px dashed var(--line-soft); }
.byline { text-transform: uppercase; letter-spacing: .14em; color: var(--text-mute); }
.article .pull-paper { position: relative; margin: var(--s-6) 0; padding: var(--s-4) var(--s-6); background: var(--paper); color: var(--ink-on-paper); font-family: var(--mono); font-weight: 600; font-size: var(--t-2); line-height: 1.5; rotate: -.8deg; box-shadow: 0 12px 30px rgba(5,5,16,.45); clip-path: polygon(8px 0,calc(100% - 8px) 0,100% 10%,calc(100% - 8px) 20%,100% 30%,calc(100% - 8px) 40%,100% 50%,calc(100% - 8px) 60%,100% 70%,calc(100% - 8px) 80%,100% 90%,calc(100% - 8px) 100%,8px 100%,0 90%,8px 80%,0 70%,8px 60%,0 50%,8px 40%,0 30%,8px 20%,0 10%); }

/* light theme: paper gets its edge, as .receipt does; the cover outline darkens */
:root[data-theme="light"] .kd-paper, :root[data-theme="light"] .article .pull-paper { border: 1px solid var(--line); box-shadow: 0 10px 24px rgba(5,5,16,.12); }
:root[data-theme="light"] .kd-ink .is-paper { stroke: var(--line); stroke-width: 1; }
:root[data-theme="light"] .post-cover { -webkit-text-stroke-color: rgba(5,5,16,.38); }

/* right to left: the diagrams are illustrations and stay LTR like the receipts; their words are RTL runs; the arrow mirrors */
[dir="rtl"] .diagram { direction: ltr; }
[dir="rtl"] .kd-row > span:first-child, [dir="rtl"] .kd-head, [dir="rtl"] .kd-k, [dir="rtl"] .kd-v, [dir="rtl"] .diagram figcaption { direction: rtl; unicode-bidi: isolate; }
[dir="rtl"] .kd-head { text-align: left; }
[dir="rtl"] .kd-tag { direction: ltr; }   /* RUT 50 % / ROT 30 % are Latin, translate="no" */
[dir="rtl"] .ic-arrow { transform: scaleX(-1); }

/* reduced motion and the site switch: every draw, feed and print above collapses to its final state */
@media (prefers-reduced-motion: reduce) {
  .ic, .kd-ic, .diagram [data-draw] { stroke-dashoffset: 0 !important; animation: none !important; }
  .diagram .kd-paper, .diagram .is-paper, .pull-paper, .diagram [data-print], .diagram .kd-k { opacity: 1 !important; translate: none !important; transform: none !important; animation: none !important; }
}
:root[data-motion="off"] :is(.ic, .kd-ic, .diagram [data-draw]) { stroke-dashoffset: 0 !important; animation: none !important; }
:root[data-motion="off"] :is(.diagram .kd-paper, .diagram .is-paper, .pull-paper, .diagram [data-print], .diagram .kd-k) { opacity: 1 !important; translate: none !important; transform: none !important; animation: none !important; }
/* ==== W2 live ==== */
/* Stadskartan (W2.5): the schematic map is ink, the list of listed businesses is paper (evidence from the app). */
.karta { display: grid; gap: var(--s-6); margin-top: var(--s-6); }
.karta-fig { max-width: 640px; }
.karta-map { display: block; width: 100%; height: auto; aspect-ratio: 1020 / 1000; color: var(--text-mute); background: var(--ink-2); border: 1px solid var(--line-soft); border-radius: var(--r); }
.karta-map path, .karta-map line, .karta-map circle { fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.karta-coast { opacity: .55; }
.karta-river { stroke-dasharray: 16 10; }
.karta-label { font-family: var(--mono); font-size: 24px; fill: var(--text-dim); stroke: var(--ink-2); stroke-width: 8px; stroke-linejoin: round; paint-order: stroke; }
/* the phone map is 358 px wide for 1020 viewBox units: 24 units read at 8 px, so the type grows and the seven inner-city names go, since they would collide */
@media (max-width: 599px) { .karta-label { font-size: 32px; } .karta-label-inner { display: none; } }
.karta-pin { color: var(--purple); cursor: pointer; outline: none; }
.karta-pin circle, .karta-pin line { stroke-dasharray: 1; stroke-dashoffset: 1; animation: karta-draw .35s cubic-bezier(.2, .7, .3, 1) forwards; }
.karta-pin:hover circle, .karta-pin:focus-visible circle { stroke-width: 4; }
.karta-pin:focus-visible line { stroke: var(--paper); }
.karta-pin.is-off { opacity: .18; pointer-events: none; }
@keyframes karta-draw { to { stroke-dashoffset: 0; } }
.karta-note { margin-top: var(--s-3); font-family: var(--mono); font-size: var(--t-1); color: var(--text-dim); }
.karta-side { display: grid; gap: var(--s-4); align-content: start; }
.karta-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }
.karta-paper, .sok-out {
  background: var(--paper); color: var(--ink-on-paper);
  font-family: var(--mono); font-size: var(--t-1);
  padding: var(--s-4) var(--s-5) var(--s-7);
  border-radius: 3px 3px 0 0;
  box-shadow: 0 24px 60px rgba(5, 5, 16, 0.6), 0 2px 8px rgba(5, 5, 16, 0.4);
  clip-path: polygon(0 0,100% 0,100% calc(100% - 10px),97.5% 100%,95% calc(100% - 10px),92.5% 100%,90% calc(100% - 10px),87.5% 100%,85% calc(100% - 10px),82.5% 100%,80% calc(100% - 10px),77.5% 100%,75% calc(100% - 10px),72.5% 100%,70% calc(100% - 10px),67.5% 100%,65% calc(100% - 10px),62.5% 100%,60% calc(100% - 10px),57.5% 100%,55% calc(100% - 10px),52.5% 100%,50% calc(100% - 10px),47.5% 100%,45% calc(100% - 10px),42.5% 100%,40% calc(100% - 10px),37.5% 100%,35% calc(100% - 10px),32.5% 100%,30% calc(100% - 10px),27.5% 100%,25% calc(100% - 10px),22.5% 100%,20% calc(100% - 10px),17.5% 100%,15% calc(100% - 10px),12.5% 100%,10% calc(100% - 10px),7.5% 100%,5% calc(100% - 10px),2.5% 100%,0 calc(100% - 10px));
}
.karta-list { list-style: none; margin: 0; padding: 0; }
.karta-list li { padding: var(--s-3) 0; border-top: 1.5px dashed rgba(5, 5, 16, 0.25); opacity: 0; transform: translateY(6px); animation: sk-print .35s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: calc(var(--i, 12) * 40ms); }
.karta-list li:first-child { border-top: 0; }
.karta-list li:nth-child(1) { --i: 0; } .karta-list li:nth-child(2) { --i: 1; } .karta-list li:nth-child(3) { --i: 2; } .karta-list li:nth-child(4) { --i: 3; }
.karta-list li:nth-child(5) { --i: 4; } .karta-list li:nth-child(6) { --i: 5; } .karta-list li:nth-child(7) { --i: 6; } .karta-list li:nth-child(8) { --i: 7; }
.karta-list li:nth-child(9) { --i: 8; } .karta-list li:nth-child(10) { --i: 9; } .karta-list li:nth-child(11) { --i: 10; } .karta-list li:nth-child(12) { --i: 11; }
.karta-list li:focus-visible { outline: 2px solid var(--purple-on-paper); outline-offset: 4px; }
.karta-name { display: block; font-weight: 700; }
.karta-tags, .karta-prices { display: flex; flex-wrap: wrap; gap: var(--s-1) var(--s-3); margin-top: 2px; font-size: 0.8rem; color: var(--ink-on-paper-mute); }
.karta-tag.is-open { color: var(--kr-green-on-paper); font-weight: 600; }
.karta-prices { color: var(--ink-on-paper); }
.karta-from .amt { font-weight: 600; white-space: nowrap; }
.karta-open { display: inline-block; margin-top: var(--s-2); font-family: var(--body); font-weight: 600; color: var(--purple-on-paper); text-decoration: none; }
.karta-open:hover, .karta-open:focus-visible { text-decoration: underline; }
.karta-status { text-align: center; color: var(--ink-on-paper-mute); padding: var(--s-4) 0; }
.karta-at { margin-top: var(--s-3); text-align: center; font-size: 0.8rem; color: var(--ink-on-paper-mute); }
@media (min-width: 900px) { .karta { grid-template-columns: minmax(0, 640px) minmax(0, 1fr); align-items: start; } }
@keyframes sk-print { to { opacity: 1; transform: none; } }
/* Hitta (W2.5): one field, the hits printed on paper under it */
.sok { display: grid; gap: var(--s-3); max-width: 640px; margin-top: var(--s-6); }
.sok label { font-family: var(--mono); font-size: var(--t-1); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-dim); }
.sok input { width: 100%; font: inherit; font-size: var(--t0); padding: 12px var(--s-4); background: var(--ink-2); color: var(--text); border: 1px solid var(--line); border-radius: var(--r); transition: border-color .18s; }
.sok input:focus-visible { outline: none; border-color: var(--purple); }
.sok-count { font-family: var(--mono); font-size: var(--t-1); color: var(--text-mute); min-height: 1.4em; }
.sok-out:empty { display: none; }
/* Sektorkvitto (W2.4): the small receipt under the hero of each sector page */
.sk { max-width: var(--wrap); margin: 0 auto var(--s-8); padding: 0 var(--s-5); }
.receipt-sm { position: relative; width: min(340px, 100%); font-size: var(--t-1); padding: var(--s-5) var(--s-4) var(--s-6); }
.receipt-sm .ic { display: block; width: 24px; height: 24px; margin: 0 auto var(--s-2); color: var(--purple-on-paper); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.sk-lines { list-style: none; margin: 0; padding: 0; }
.sk-line { display: flex; justify-content: space-between; gap: var(--s-3); padding: var(--s-1) 0; font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(6px); animation: sk-print .35s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: calc(var(--i, 4) * 140ms); }
.sk-line:nth-child(1) { --i: 0; } .sk-line:nth-child(2) { --i: 1; } .sk-line:nth-child(3) { --i: 2; } .sk-line:nth-child(4) { --i: 3; }
.sk-line .amt { font-weight: 600; white-space: nowrap; }
.sk-status { text-align: center; color: var(--ink-on-paper-mute); padding: var(--s-3) 0; }
.sk-partner { display: block; margin-top: var(--s-2); text-align: center; font-family: var(--body); font-weight: 600; color: var(--purple-on-paper); text-decoration: none; }
.sk-partner:hover, .sk-partner:focus-visible { text-decoration: underline; }
.sk-at { margin-top: var(--s-3); text-align: center; font-size: 0.8rem; color: var(--ink-on-paper-mute); opacity: 0; animation: sk-print .35s cubic-bezier(.2, .7, .3, 1) forwards; animation-delay: 700ms; }
/* light theme: paper gets a line and a softer shadow, like .receipt */
:root[data-theme="light"] .karta-paper, :root[data-theme="light"] .sok-out { border: 1px solid var(--line); box-shadow: 0 18px 40px rgba(5, 5, 16, 0.14), 0 2px 6px rgba(5, 5, 16, 0.08); }
/* right to left: the paper stays LTR like every receipt; the words inside are their own RTL runs, the amounts mono */
[dir="rtl"] .karta-paper, [dir="rtl"] .sok-out, [dir="rtl"] .receipt-sm { direction: ltr; unicode-bidi: isolate; }
[dir="rtl"] .karta-name, [dir="rtl"] .karta-tag, [dir="rtl"] .karta-from > span:first-child, [dir="rtl"] .karta-status, [dir="rtl"] .karta-open, [dir="rtl"] .karta-at, [dir="rtl"] .sk-line > span:first-child, [dir="rtl"] .sk-status, [dir="rtl"] .sk-partner, [dir="rtl"] .sk-at, [dir="rtl"] .receipt-sm .receipt-venue { direction: rtl; unicode-bidi: isolate; }
[dir="rtl"] .karta-from .amt, [dir="rtl"] .sk-line .amt { font-family: 'JetBrains Mono', ui-monospace, monospace; }
[dir="rtl"] .karta-note, [dir="rtl"] .sok-count { direction: rtl; }
/* reduced motion and the visitor's switch: every line and pin at its final state, nothing animates */
@media (prefers-reduced-motion: reduce) {
  .karta-list li, .sk-line, .sk-at { animation: none !important; opacity: 1 !important; transform: none !important; }
  .karta-pin circle, .karta-pin line { animation: none !important; stroke-dashoffset: 0 !important; }
  .sok input { transition: none; }
}
:root[data-motion="off"] .karta-list li, :root[data-motion="off"] .sk-line, :root[data-motion="off"] .sk-at { animation: none !important; opacity: 1 !important; transform: none !important; }
:root[data-motion="off"] .karta-pin circle, :root[data-motion="off"] .karta-pin line { animation: none !important; stroke-dashoffset: 0 !important; }
:root[data-motion="off"] .sok input { transition: none; }
/* ==== W2 pages ==== */
/* Pages and navigation (plan W3.4, W3.5, W3.7, W3.8, §5.8): the desktop page nav in the header, the three value
   slips on /om (markup to WS1's .slip), the empty roll on /404, and a spacing pass that turns the inline
   border-top / padding-top of the first section after a hero into classes. Nothing here moves but the slips
   (one reveal, no keyframe), and the two kill blocks collapse that. */
/* The header carries no page links (owner, 2026-10-09): the brand, the live chip, the languages, the theme
   button and "Meny". Every destination lives in the menu, which is the one place to look. */
.section.no-tear { border-top: 0; }
.section.tight { padding-top: var(--s-6); }
.section.snug { padding-top: var(--s-4); }
.section.flush { padding-top: 0; }
.sub-section { margin-top: var(--s-9); }
.hero-grid.align-start { align-items: start; }
.prose.flush { margin-top: 0; }
.split.tight, .faq-list.tight { margin-top: var(--s-6); }
.notice.spaced { margin-top: var(--s-8); }
.price-card.featured { border-color: var(--purple); }
.cmp-caption, .section-eyebrow.cmp-caption { text-align: start; caption-side: top; margin-bottom: var(--s-4); }
.link { color: var(--purple); }
.link:hover { text-decoration: underline; }
.prose h3 { font-size: var(--t-3); margin-top: var(--s-6); }
.prose h3 + p { margin-top: var(--s-2); }

/* ---- The legal pages (round 47): /integritet, /villkor, /cookies, /partnervillkor, /bitradesavtal, /dsa, /ai, /juridik ----
   Lists, links, the version line, «I korthet», the contents list and tables that turn into stacked rows on a phone
   (each cell carries its own .cell-k label, shown only there, so the label is translated with the cell). */
.prose ul, .prose ol { margin: var(--s-3) 0 0; padding-inline-start: var(--s-5); color: var(--text-mute); }
.prose li { margin-top: var(--s-2); line-height: 1.65; }
.prose li::marker { color: var(--text-dim); }
.prose a { color: var(--purple); text-decoration: underline; text-underline-offset: 2px; overflow-wrap: anywhere; }
.prose h2 { scroll-margin-top: 88px; }
.prose h3 { scroll-margin-top: 88px; }
.legal-meta { margin-top: var(--s-4); font-family: var(--mono); font-size: var(--t-1); color: var(--text-dim); }
.legal-box {
  margin-top: var(--s-5); padding: var(--s-5); border: 1px solid var(--line); border-radius: var(--r);
  background: var(--ink-2);
}
.legal-box > :first-child { margin-top: 0; }
.legal-box h2 { font-size: var(--t-3); margin-top: 0; }
.legal-toc { margin-top: var(--s-5); }
.legal-toc ol { columns: 2; column-gap: var(--s-6); padding-inline-start: var(--s-5); }
.legal-toc li { break-inside: avoid; margin-top: var(--s-1); }
.legal-toc a { text-decoration: none; }
.legal-toc a:hover { text-decoration: underline; }
@media (max-width: 640px) { .legal-toc ol { columns: 1; } }
.legal-table { width: 100%; margin-top: var(--s-4); border-collapse: collapse; font-size: var(--t-1); }
.legal-table caption { caption-side: top; text-align: start; font-weight: 600; color: var(--text); padding-bottom: var(--s-2); }
.legal-table th, .legal-table td { padding: var(--s-3) var(--s-3); text-align: start; vertical-align: top; border-bottom: 1px solid var(--line-soft); color: var(--text-mute); }
.legal-table thead th { font-family: var(--mono); font-weight: 500; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; border-bottom-color: var(--line); }
.legal-table tbody th { color: var(--text); font-weight: 600; }
.legal-table code { font-family: var(--mono); font-size: .92em; overflow-wrap: anywhere; }
.legal-table .cell-k { display: none; }
@media (max-width: 640px) {
  .legal-table thead { display: none; }
  .legal-table, .legal-table tbody, .legal-table tr, .legal-table th, .legal-table td { display: block; width: 100%; }
  .legal-table tr { padding: var(--s-3) 0; border-bottom: 1px solid var(--line); }
  .legal-table th, .legal-table td { padding: var(--s-1) 0; border-bottom: 0; }
  .legal-table .cell-k { display: block; font-family: var(--mono); font-size: .8rem; color: var(--text-dim); text-transform: uppercase; letter-spacing: .04em; }
}
.legal-docs { list-style: none; padding: 0; margin-top: var(--s-5); display: grid; gap: var(--s-3); }
.legal-docs li { margin: 0; padding: var(--s-4) var(--s-5); border: 1px solid var(--line-soft); border-radius: var(--r); background: var(--ink-2); }
.legal-docs a { font-weight: 600; text-decoration: none; }
.legal-docs a:hover { text-decoration: underline; }
.legal-docs p { margin-top: var(--s-1); }
.form-after-lead { margin-top: var(--s-6); }

/* /om: the three value slips feed in on reveal, 120 ms apart, each at its own tilt (never random) */
.om-values { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-5) var(--s-6); }
.slip.slip-value {
  margin-top: 0;
  transition: opacity var(--dur-2, 350ms) var(--ease-out, cubic-bezier(.2, .8, .2, 1)), translate 300ms var(--ease-out, cubic-bezier(.2, .8, .2, 1)), transform 300ms var(--ease-out, cubic-bezier(.2, .8, .2, 1));
}
.slip.slip-value.in { opacity: 1; translate: 0 0; }
.om-values .slip:nth-child(1) { rotate: -1.5deg; }
.om-values .slip:nth-child(2) { rotate: 1deg; transition-delay: 120ms; }
.om-values .slip:nth-child(3) { rotate: -.8deg; transition-delay: 240ms; }
.om-values + .section-lead { margin-top: var(--s-7); }

/* /404: the empty roll above "Slut på papper"; nothing prints on a page that does not exist */
.page-404 { min-height: 50vh; }
.page-404 .ic-xl { display: block; margin-bottom: var(--s-5); }
.page-404 .hero-eyebrow { color: var(--purple); }
.page-404-links { list-style: none; margin: var(--s-7) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); font-family: var(--mono); font-size: var(--t-1); }
.page-404-links a { color: var(--text-mute); }
.page-404-links a:hover { color: var(--text); text-decoration: underline; }

/* light theme */
:root[data-theme="light"] .nav-desktop a:hover { background: rgba(139, 63, 217, .08); }

/* right to left: the nav uses logical margins; the slip words are RTL runs on LTR paper, like the receipt labels */
[dir="rtl"] .om-values .slip { direction: rtl; unicode-bidi: isolate; }

/* reduced motion and the site switch: the slips stand still */
@media (prefers-reduced-motion: reduce) {
  .slip.slip-value { transition: none !important; }
}
:root[data-motion="off"] .slip.slip-value { transition: none !important; }

/* ==== W2 media ==== */
/* Thermal prints (T3 "Klipp"): every photograph on the site is a one-ink print on paper, cut like a receipt
   (straight top, torn bottom), tilted a little, with its caption printed on the paper. T1 prints are already
   duotone files; T2 prints are 1-bit PNGs multiplied onto the paper box. Nothing slides or zooms. */
.media { position: relative; margin: var(--s-6) auto 0; max-width: 640px; background: var(--paper); color: var(--ink-on-paper-mute);
  padding: 10px 10px 40px; border-radius: 3px 3px 0 0; box-shadow: 0 24px 60px rgba(5, 5, 16, 0.6); transform: rotate(-1deg);
  clip-path: polygon(0 0, 100% 0, 100% calc(100% - 10px), 97.5% 100%, 95% calc(100% - 10px), 92.5% 100%, 90% calc(100% - 10px), 87.5% 100%, 85% calc(100% - 10px), 82.5% 100%, 80% calc(100% - 10px), 77.5% 100%, 75% calc(100% - 10px), 72.5% 100%, 70% calc(100% - 10px), 67.5% 100%, 65% calc(100% - 10px), 62.5% 100%, 60% calc(100% - 10px), 57.5% 100%, 55% calc(100% - 10px), 52.5% 100%, 50% calc(100% - 10px), 47.5% 100%, 45% calc(100% - 10px), 42.5% 100%, 40% calc(100% - 10px), 37.5% 100%, 35% calc(100% - 10px), 32.5% 100%, 30% calc(100% - 10px), 27.5% 100%, 25% calc(100% - 10px), 22.5% 100%, 20% calc(100% - 10px), 17.5% 100%, 15% calc(100% - 10px), 12.5% 100%, 10% calc(100% - 10px), 7.5% 100%, 5% calc(100% - 10px), 2.5% 100%, 0 calc(100% - 10px)); }
.media picture, .media img { display: block; width: 100%; height: auto; }
.media img { background: var(--paper); }
.media-t2 img { mix-blend-mode: multiply; image-rendering: pixelated; }
.media figcaption { position: absolute; left: 14px; bottom: 16px; font-family: var(--mono); font-size: var(--t-0, 12px); letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-on-paper-mute); }
.media:nth-of-type(even) { transform: rotate(1deg); }
.media-band { max-width: none; margin-bottom: var(--s-7); transform: rotate(-0.5deg); border-radius: 0; padding-top: 0; }
.media-band img { aspect-ratio: 21 / 9; object-fit: cover; }
.media-t2 { max-width: 420px; }
.page-hero .media, .section .media { margin-left: auto; margin-right: auto; }
@media (min-width: 900px) { .media { margin-top: var(--s-7); } .media-t2 { margin-left: 0; } }
.media.media-hero { margin-top: var(--s-6); }
:root[data-theme="light"] .media { box-shadow: 0 16px 40px rgba(5, 5, 16, 0.18); border: 1px solid rgba(5, 5, 16, 0.08); }
[dir="rtl"] .media figcaption { left: auto; right: 14px; letter-spacing: 0; }
@media (prefers-reduced-motion: reduce) { .media { transform: none; } }
:root[data-motion="off"] .media { transform: none; }

/* ---- Footer: the app and the contact band (owner, 2026-10-24) ---- */
.f-app { position: relative; }
.f-app::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-soft); }
.f-app-inner {
  display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr);
  gap: var(--s-7) var(--s-8); padding: var(--s-8) 0; align-items: start;
}
.f-app-title { font-family: var(--display); font-size: var(--t-4); color: var(--text); letter-spacing: -0.02em; margin-top: var(--s-2); }
.f-app-text { margin-top: var(--s-3); max-width: 46ch; line-height: 1.6; }
.f-app-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-5); align-items: stretch; }
.f-app-actions .btn { min-height: 52px; }
/* the two store buttons: not links yet (the apps are not in the stores), so no badge artwork, no dead link;
   a dashed outline and the word «Snart» say so. They become the official badges when the store links exist. */
.store-btn {
  display: inline-flex; align-items: center; gap: var(--s-3);
  min-height: 52px; padding: var(--s-2) var(--s-4);
  border-radius: var(--r); border: 1px dashed rgba(250,249,246,.22);
  color: var(--text-dim); background: rgba(250,249,246,.025);
  line-height: 1.15; cursor: default; user-select: none;
}
.store-btn .store-ic { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.store-txt { display: flex; flex-direction: column; gap: 2px; font-family: var(--mono); font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; }
.store-txt b { font-family: var(--body); font-size: var(--t-2); font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-mute); }
.f-app-how { margin-top: var(--s-4); max-width: 54ch; font-size: var(--t-1); color: var(--text-dim); line-height: 1.6; }
.f-contact-list { list-style: none; margin: var(--s-4) 0 0; padding: 0; display: grid; gap: var(--s-4); }
.f-contact-list li { display: grid; gap: 3px; }
.f-contact-k { font-family: var(--mono); font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-dim); }
.f-contact-v { color: var(--text); font-weight: 500; line-height: 1.5; overflow-wrap: anywhere; }
.f-contact-v a, a.f-contact-v { color: var(--text); transition: color .2s; }
.f-contact-v a:hover, a.f-contact-v:hover { color: var(--purple); }
.f-legal-line { margin-top: var(--s-5); font-family: var(--mono); font-size: var(--t-1); color: var(--text-dim); line-height: 1.7; }
@media (max-width: 980px) {
  .f-app-inner { grid-template-columns: 1fr; gap: var(--s-7); }
}
@media (max-width: 420px) {
  .f-app-actions .btn, .store-btn { width: 100%; justify-content: flex-start; }
}
:root[data-theme="light"] .store-btn { border-color: rgba(5,5,16,.22); background: rgba(5,5,16,.03); }
:root[data-theme="light"] .f-contact-v a:hover, :root[data-theme="light"] a.f-contact-v:hover { color: var(--purple-on-paper); }

/* ---- Light mode: the characters and scenes stand on a deliberate dark stage (owner, 2026-10-24 round 31).
   The art is painted on ink in both themes; on the light page the ink card gets a hairline edge, a paper shadow and a
   faint violet floor glow, so the dark reads as a small stage, not as a missing picture. ---- */
:root[data-theme="light"] .motion {
  border: 1px solid rgba(5, 5, 16, .16);
  box-shadow: 0 1px 2px rgba(5, 5, 16, .10), 0 28px 56px -30px rgba(5, 5, 16, .45);
}
:root[data-theme="light"] .motion::before {
  content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; border-radius: inherit;
  box-shadow: inset 0 0 0 1px rgba(250, 249, 246, .07);
  background: radial-gradient(70% 45% at 50% 108%, rgba(139, 63, 217, .22), transparent 70%);
}
:root[data-theme="light"] .motion-band .motion { box-shadow: 0 1px 2px rgba(5, 5, 16, .10), 0 36px 70px -36px rgba(5, 5, 16, .5); }
/* the service cards: the stage is the card's top, with a hairline where it meets the paper */
:root[data-theme="light"] .service .motion-card { border: 0; border-bottom: 1px solid rgba(5, 5, 16, .14); box-shadow: none; }
:root[data-theme="light"] .service .motion-card::before { box-shadow: none; }
:root[data-theme="light"] .kit-strip a { border-color: rgba(5, 5, 16, .16); box-shadow: 0 1px 2px rgba(5, 5, 16, .10); }
/* the tow truck's cab touches the left edge of its still (one attempt, not regenerated): the piece sits a little
   smaller on its ink stage, which is plain ink at the edges, so the margin costs nothing */
.motion[data-motion="char-bilverkstad"] img, .motion[data-motion="char-bilverkstad"] video { transform: scale(.94); transform-origin: center; }

/* ---- Light mode: a character redrawn for paper (owner-notes 59/60). A figure with a light still (.has-light) shows it instead
   of the ink still and its loop, on a paper card with a hairline and a soft shadow; no dark stage, no violet floor glow.
   Dark mode is untouched. A character without a light still keeps the dark stage above. ---- */
/* hidden in dark mode with more weight than the generic «.motion picture» rule above, which would otherwise lay it over the ink still */
.motion picture.motion-light { display: none; }
:root[data-theme="light"] .motion.has-light { background: #F4F3EE; border-color: rgba(5, 5, 16, .05); box-shadow: none; }
:root[data-theme="light"] .motion.has-light::before { display: none; }
:root[data-theme="light"] .motion.has-light > picture:not(.motion-light) { display: none; }
:root[data-theme="light"] .motion.has-light > .motion-light { display: block; z-index: 0; }
:root[data-theme="light"] .motion.has-light > video { z-index: 1; background: #F4F3EE; }
:root[data-theme="light"] .motion.has-light img { background: #F4F3EE; }
:root[data-theme="light"] .service .motion-card.has-light { background: #F4F3EE; border: 0; border-bottom: 1px solid rgba(5, 5, 16, .06); box-shadow: none; }
:root[data-theme="light"] .motion-band .motion.has-light { box-shadow: none; border-color: rgba(5, 5, 16, .05); }
:root[data-theme="light"] .step .motion-sm.has-light { box-shadow: none; }
:root[data-theme="light"] .motion.has-light figcaption { color: rgba(5, 5, 16, .45); }

/* ==== Cookie consent (docs/legal/POLICYER-KONTRAKT.md, «The website's popup»; markup in chrome/footer.html, behaviour in
   assets/consent.js). A bar at the bottom, not a wall: the page behind stays usable. «Inställningar» opens a sheet over a
   scrim (modal). Logical properties throughout, so /ar/ mirrors on its own. ==== */
.consent[hidden], .consent [hidden] { display: none !important; }
.consent {
  position: fixed; inset-inline: 0; bottom: 0; z-index: 300;
  padding: var(--s-2) var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  pointer-events: none;
}
.consent > * { pointer-events: auto; }
.consent-bar, .consent-sheet {
  background: var(--ink-2); color: var(--text);
  border: 1px solid var(--line); border-radius: calc(var(--r) + 4px);
  box-shadow: 0 1px 0 var(--line-soft) inset, 0 24px 60px -20px rgba(0, 0, 0, .7);
  animation: consent-in .32s cubic-bezier(.2, .8, .2, 1) both;
}
.consent-bar {
  max-width: 980px; margin: 0 auto; padding: var(--s-4);
  display: grid; gap: var(--s-4);
  max-height: 70vh; max-height: 70dvh; overflow-y: auto; overscroll-behavior: contain;
}
.consent-bar:focus, .consent-sheet:focus { outline: none; }
.consent-title { font-size: 1.125rem; line-height: 1.25; letter-spacing: -0.01em; color: var(--text); }
.consent-copy { display: grid; gap: var(--s-2); min-width: 0; }
.consent-copy > div { display: grid; gap: var(--s-1); }
.consent-text { font-size: var(--t-1); line-height: 1.55; color: var(--text-mute); }
.consent-actions { display: grid; gap: var(--s-3); min-width: 0; }
.consent-choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s-2); }
.consent-btn { min-height: 44px; padding: var(--s-2) var(--s-4); font-size: var(--t-1); text-align: center; line-height: 1.25; white-space: normal; }
.consent-choices .consent-btn { background: transparent; color: var(--text); border: 1.5px solid var(--text-mute); }
.consent-choices .consent-btn:hover { border-color: var(--purple); }
.consent-links { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-1) var(--s-5); }
.consent-link {
  background: none; border: 0; padding: 0; margin: 0; min-height: 36px;
  display: inline-flex; align-items: center;
  color: var(--text); font: inherit; font-size: var(--t-1); font-weight: 600; line-height: 1.3; cursor: pointer;
  text-decoration: underline; text-decoration-color: var(--purple); text-decoration-thickness: 1.5px; text-underline-offset: 4px;
}
.consent-link:hover { color: var(--purple); }

/* the settings sheet: modal, over a scrim, from the bottom on a phone and centred on a wide screen */
.consent.is-sheet {
  inset: 0; display: flex; align-items: flex-end; justify-content: center;
  padding: var(--s-2) var(--s-2) calc(var(--s-2) + env(safe-area-inset-bottom, 0px));
  background: rgba(5, 5, 16, .62); pointer-events: auto;
  animation: consent-fade .2s ease-out both;
}
:root.consent-sheet-open { overflow: hidden; }
.consent-sheet {
  width: 100%; max-width: 560px; padding: var(--s-4);
  max-height: calc(100vh - var(--s-6)); max-height: calc(100dvh - var(--s-6)); overflow-y: auto; overscroll-behavior: contain;
  display: grid; gap: var(--s-3);
}
.consent-sheet-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.consent-x {
  flex: none; width: 44px; height: 44px; margin-inline-end: calc(-1 * var(--s-2));
  display: inline-grid; place-items: center; background: none; border: 0; border-radius: 999px; color: var(--text-mute);
}
.consent-x:hover { color: var(--text); background: var(--line-soft); }
.consent-x svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }
.consent-cats { list-style: none; margin: 0; padding: 0; display: grid; }
.consent-cat { padding: var(--s-3) 0; border-top: 1px solid var(--line); display: grid; gap: var(--s-1); }
.consent-cat-head { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; column-gap: var(--s-3); min-height: 44px; }
.consent-cat-name { grid-column: 1; font-weight: 600; color: var(--text); cursor: default; }
.consent-unused { grid-column: 1; }
.consent-always { grid-column: 2; grid-row: 1; }
.consent-switch { grid-column: 2; grid-row: 1 / span 2; }
label.consent-cat-name { cursor: pointer; }
.consent-unused, .consent-always { font-family: var(--mono); font-size: .75rem; letter-spacing: .02em; color: var(--text-mute); }
[dir="rtl"] .consent-unused, [dir="rtl"] .consent-always { font-family: var(--rtl-font), var(--body); letter-spacing: 0; font-size: var(--t-1); }
.consent-always { color: var(--purple); }
.consent-cat-text { font-size: var(--t-1); line-height: 1.55; color: var(--text-mute); }
.consent-tools { margin: 0; padding-inline-start: var(--s-4); font-size: var(--t-1); color: var(--text-mute); }
.consent-tools b { color: var(--text); font-weight: 600; }
.consent-sheet-actions { display: grid; padding-top: var(--s-2); }

/* the switch: a real checkbox drawn as a track and a knob */
.consent-switch {
  appearance: none; -webkit-appearance: none; flex: none; margin: 0; cursor: pointer;
  position: relative; width: 48px; height: 28px; border-radius: 999px;
  background: var(--line); border: 1px solid var(--text-dim);
  transition: background-color .18s, border-color .18s;
}
.consent-switch::before {
  content: ""; position: absolute; top: 3px; inset-inline-start: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: var(--text-mute); transition: transform .18s cubic-bezier(.2, .8, .2, 1), background-color .18s;
}
.consent-switch:checked { background: var(--purple); border-color: var(--purple); }
.consent-switch:checked::before { background: #FFFFFF; transform: translateX(20px); }
[dir="rtl"] .consent-switch:checked::before { transform: translateX(-20px); }
.consent-switch:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; }

@keyframes consent-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes consent-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .consent-bar, .consent-sheet, .consent.is-sheet { animation: none; }
  .consent-switch, .consent-switch::before { transition: none; }
}
:root[data-motion="off"] .consent-bar, :root[data-motion="off"] .consent-sheet, :root[data-motion="off"] .consent.is-sheet { animation: none; }

@media (min-width: 560px) {
  .consent, .consent.is-sheet { padding: var(--s-4) var(--s-4) calc(var(--s-4) + env(safe-area-inset-bottom, 0px)); }
  .consent-bar, .consent-sheet { padding: var(--s-5); }
}
@media (min-width: 860px) {
  .consent-bar { grid-template-columns: minmax(0, 1fr) minmax(300px, auto); align-items: end; gap: var(--s-6); }
  .consent-links { justify-content: flex-end; }
  .consent.is-sheet { align-items: center; }
}

:root[data-theme="light"] .consent-bar, :root[data-theme="light"] .consent-sheet {
  background: #FFFFFF; border-color: rgba(5, 5, 16, .12);
  box-shadow: 0 1px 2px rgba(5, 5, 16, .08), 0 24px 60px -24px rgba(5, 5, 16, .35);
}
:root[data-theme="light"] .consent.is-sheet { background: rgba(5, 5, 16, .38); }
:root[data-theme="light"] .consent-switch::before { background: #FFFFFF; box-shadow: 0 1px 2px rgba(5, 5, 16, .3); }
:root[data-theme="light"] .consent-switch { background: rgba(5, 5, 16, .16); border-color: rgba(5, 5, 16, .2); }
:root[data-theme="light"] .consent-switch:checked { background: var(--purple); border-color: var(--purple); }
/* ==== /Cookie consent ==== */