/* Self-hosted fonts (Newsreader, Geist, Geist Mono, Caveat) — see
   app/assets/fonts/, generated by script/subset_fonts.py (keep the
   unicode-range lists here in sync with it). Replaces the Google Fonts CDN
   (no third-party origin on the critical path, no Google logging of EU IPs).

   Three subsets per family: latin (basic + Latin-1, so et/en/fi are one
   file), latin-ext, and cyrillic. Weights are limited to what the CSS uses;
   Caveat is a static 500 instance serving 400-600.

   latin-ext carries Estonian Š/š/Ž/ž plus the Latvian (āčēģīķļņū) and
   Lithuanian (ąčęėįų) diacritics — 3-10 KB per family, and because the split
   is by unicode-range a page downloads one only when it actually renders such
   a character. en/ru pages never do. Before 2026-07-31 these codepoints were
   declared on the latin faces but absent from the files (the Fontsource latin
   cuts never had them), so Estonian š/ž silently rendered in the fallback
   face; splitting them out is what fixes that.

   The latin unicode-range is a superset of what some families actually carry:
   Fontsource's latin cuts are inconsistent about symbols (Geist/Geist Mono
   ship ↑↓ but not ←→✓; Newsreader/Caveat ship ∕ but no arrows). A codepoint a
   family lacks simply falls back per-character to the system face, so the
   range stays complete rather than pruned to the intersection — pruning it
   silently dropped ↑↓∕ from the families that did have them, once. */

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/caveat-500-cyrillic-23cf4809.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+2116;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/caveat-500-latin-4ff7dda9.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2713;
}
@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/caveat-500-latin-ext-a10d89e1.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0104-0105, U+010C-010D, U+0112-0113, U+0116-0119, U+0122-0123, U+012A-012B, U+012E-012F, U+0136-0137, U+013B-013C, U+0145-0146, U+0160-0161, U+016A-016B, U+0172-0173, U+017D-017E;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/geist-300-600-cyrillic-c37a432c.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+2116;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/geist-300-600-latin-c7d8288d.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2713;
}
@font-face {
  font-family: 'Geist';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/geist-300-600-latin-ext-fad22f4c.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0104-0105, U+010C-010D, U+0112-0113, U+0116-0119, U+0122-0123, U+012A-012B, U+012E-012F, U+0136-0137, U+013B-013C, U+0145-0146, U+0160-0161, U+016A-016B, U+0172-0173, U+017D-017E;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/geist-mono-400-500-cyrillic-96a5b193.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+2116;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/geist-mono-400-500-latin-32786f9b.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2713;
}
@font-face {
  font-family: 'Geist Mono';
  font-style: normal;
  font-weight: 400 500;
  font-display: swap;
  src: url("/assets/geist-mono-400-500-latin-ext-66dd1637.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0104-0105, U+010C-010D, U+0112-0113, U+0116-0119, U+0122-0123, U+012A-012B, U+012E-012F, U+0136-0137, U+013B-013C, U+0145-0146, U+0160-0161, U+016A-016B, U+0172-0173, U+017D-017E;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/newsreader-300-600-normal-latin-471de901.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2713;
}
@font-face {
  font-family: 'Newsreader';
  font-style: normal;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/newsreader-300-600-normal-latin-ext-71206ef6.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0104-0105, U+010C-010D, U+0112-0113, U+0116-0119, U+0122-0123, U+012A-012B, U+012E-012F, U+0136-0137, U+013B-013C, U+0145-0146, U+0160-0161, U+016A-016B, U+0172-0173, U+017D-017E;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/newsreader-300-600-italic-latin-153a9362.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2013-2014, U+2018-201A, U+201C-201E, U+2022, U+2026, U+2039-203A, U+20AC, U+2122, U+2190-2193, U+2212, U+2215, U+2713;
}
@font-face {
  font-family: 'Newsreader';
  font-style: italic;
  font-weight: 300 600;
  font-display: swap;
  src: url("/assets/newsreader-300-600-italic-latin-ext-fd5fb486.woff2") format("woff2");
  unicode-range: U+0100-0101, U+0104-0105, U+010C-010D, U+0112-0113, U+0116-0119, U+0122-0123, U+012A-012B, U+012E-012F, U+0136-0137, U+013B-013C, U+0145-0146, U+0160-0161, U+016A-016B, U+0172-0173, U+017D-017E;
}

/* Metric-matched fallbacks: size-adjust + vertical-metric overrides make the
   local fallback occupy the same space as the webfont, so the swap repaint
   causes no layout shift (this was CLS 0.39 on desktop — the hero collage
   re-centering when Newsreader/Geist landed). Values computed from the
   font files' hhea tables via the fontaine formula; recompute if the
   webfont files are ever replaced (not merely subset — subsetting keeps
   metrics). Keep these in sync with shared/_critical_css.html.erb. */
@font-face {
  font-family: 'Newsreader Fallback';
  src: local('Georgia');
  size-adjust: 92.56%;
  ascent-override: 79.41%;
  descent-override: 28.63%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Fallback';
  src: local('Arial');
  size-adjust: 106.17%;
  ascent-override: 94.66%;
  descent-override: 27.78%;
  line-gap-override: 0%;
}
@font-face {
  font-family: 'Geist Mono Fallback';
  src: local('Courier New');
  size-adjust: 99.98%;
  ascent-override: 100.52%;
  descent-override: 29.5%;
  line-gap-override: 0%;
}

/* Pigmenta — base styles */
:root {
  --cream: #FBF6EE;
  --cream-2: #F5EEDD;
  --paper: #FFFCF4;
  --ink: #2A2520;
  --ink-2: #5C5247;
  --ink-3: #8A7E70;
  --line: #E8DFCC;

  --peach: #F4B59B;
  --peach-deep: #E89272;
  --mint: #B8DDC8;
  --mint-deep: #88BCA1;
  --lilac: #C9B8E0;
  --lilac-deep: #A48CC8;
  --butter: #F5DA8C;
  --butter-deep: #E8B84B;
  --rose: #F2C4D5;
  --rose-deep: #DC8FAE;
  --sky: #B6D4E5;
  --sky-deep: #7DAFC9;
  --coral: #E97658;

  /* Carrier brand colours — used for pills, badges, coverage bars. */
  --carrier-omniva: #F18800;
  --carrier-smartposti: #1E5BBE;
  --carrier-dpd: #DC0032;

  --r-sm: 8px;
  --r-md: 14px;
  --r-lg: 22px;
  --r-xl: 32px;

  --shadow-soft: 0 1px 0 rgba(42, 37, 32, 0.04), 0 8px 24px -10px rgba(42, 37, 32, 0.12);
  --shadow-photo: 0 1px 0 rgba(42, 37, 32, 0.06), 0 12px 30px -12px rgba(42, 37, 32, 0.22);
  --shadow-lift: 0 1px 0 rgba(42, 37, 32, 0.06), 0 24px 60px -20px rgba(42, 37, 32, 0.32);

  --font-display: "Newsreader", "Newsreader Fallback", Georgia, serif;
  --font-sans: "Geist", "Geist Fallback", Arial, sans-serif;
  --font-mono: "Geist Mono", "Geist Mono Fallback", "Courier New", monospace;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  background: var(--cream);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Safety net: clip any stray horizontal overflow so a single misbehaving
     element can't drag the whole page wider than the viewport. `clip` is
     preferred over `hidden` — it doesn't establish a scroll container, so
     sticky positioning and scrollIntoView keep working as expected. */
  overflow-x: clip;
}
html { overflow-x: clip; }

/* paper grain */
body::before {
  content: "";
  position: fixed; inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image:
    radial-gradient(circle at 20% 10%, rgba(244, 181, 155, 0.12), transparent 40%),
    radial-gradient(circle at 80% 30%, rgba(184, 221, 200, 0.10), transparent 40%),
    radial-gradient(circle at 60% 90%, rgba(201, 184, 224, 0.10), transparent 40%);
  mix-blend-mode: multiply;
}

.app { position: relative; z-index: 2; }

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; letter-spacing: -0.02em; margin: 0; line-height: 1.05; }
p { margin: 0; }
button { font-family: inherit; cursor: pointer; border: 0; background: 0; color: inherit; padding: 0; }
input, textarea, select { font-family: inherit; font-size: inherit; color: inherit; }
a { color: inherit; text-decoration: none; }

.container {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 32px;
}

/* Top nav */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: color-mix(in oklab, var(--cream) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
  border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
}
.nav-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 72px;
  gap: 32px;
}
.nav-logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  letter-spacing: -0.02em;
}
.nav-logo .mark {
  width: 28px; height: 28px;
  border-radius: 50%;
  background:
    conic-gradient(from 200deg, var(--peach), var(--butter), var(--mint), var(--lilac), var(--peach));
  position: relative;
}
.nav-logo .mark::after {
  content: "";
  position: absolute; inset: 7px;
  background: var(--cream);
  border-radius: 50%;
}
.nav-links {
  display: flex; gap: 28px;
  font-size: 14.5px;
  color: var(--ink-2);
}
.nav-links a { transition: color 0.15s; cursor: pointer; }
.nav-links a:hover { color: var(--ink); }
.nav-right { display: flex; align-items: center; gap: 14px; }

/* Compact language dropdown. The summary is the current locale + caret;
   the menu lists all three options. Replaces the 3-pill inline switch
   which was too wide for the mobile nav bar. */
.lang-switch {
  position: relative;
  /* <details> defaults to display: block — keep the summary inline-flex
     for proper alignment with the order-CTA button beside it. */
}
.lang-switch summary {
  list-style: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 10px 5px 11px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  color: var(--ink);
  user-select: none;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.lang-switch summary::-webkit-details-marker { display: none; }
.lang-switch summary::marker { display: none; }
.lang-switch summary:hover { border-color: var(--ink); }
.lang-switch[open] summary {
  background: var(--ink);
  border-color: var(--ink);
}
.lang-flag {
  /* Apple-Color-Emoji renders flags natively; fall back to Noto for
     Linux/Windows where the regional-indicator pair would otherwise
     render as letter pairs. */
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", sans-serif;
  font-size: 18px;
  line-height: 1;
}
.lang-caret {
  font-size: 14px;
  line-height: 1;
  color: var(--ink-3);
  transition: transform 0.18s ease;
}
.lang-switch[open] .lang-caret {
  transform: rotate(180deg);
  color: color-mix(in oklab, var(--paper) 80%, transparent);
}

.lang-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 12px;
  box-shadow: var(--shadow-soft);
  padding: 4px;
  display: flex;
  flex-direction: column;
  min-width: 124px;
  z-index: 100;
}
.lang-option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px 8px 10px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--ink-2);
  text-transform: uppercase;
  transition: background 0.15s ease, color 0.15s ease;
}
.lang-option:hover { background: var(--cream-2); color: var(--ink); }
.lang-option.active {
  background: var(--ink);
  color: var(--paper);
}
/* Dark backdrops (error pages… anywhere the nav sits on dark) */
.er-nav .lang-switch summary {
  background: color-mix(in oklab, var(--paper) 10%, transparent);
  border-color: color-mix(in oklab, var(--paper) 20%, transparent);
  color: var(--paper);
}
.er-nav .lang-switch summary:hover { border-color: var(--paper); }
.er-nav .lang-switch[open] summary { background: var(--paper); color: var(--ink); border-color: var(--paper); }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 13px 22px;
  font-size: 15px;
  font-weight: 500;
  border-radius: 999px;
  transition: transform 0.12s, box-shadow 0.18s, background 0.15s, color 0.15s;
  white-space: nowrap;
}
.btn-primary {
  background: var(--ink);
  color: var(--paper);
}
.btn-primary:hover { transform: translateY(-1px); box-shadow: 0 14px 30px -12px rgba(42, 37, 32, 0.5); }
.btn-ghost { color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost:hover { background: var(--ink); color: var(--paper); }
.btn-soft {
  background: var(--paper);
  color: var(--ink);
  border: 1px solid var(--line);
}
.btn-soft:hover { background: var(--cream-2); }
.btn-sm { padding: 9px 16px; font-size: 13.5px; }

/* Hero */
.hero {
  padding: 56px 0 88px;
  position: relative;
  overflow: hidden;
}
.hero-grid {
  display: grid;
  grid-template-columns: 1.05fr 1fr;
  gap: 56px;
  align-items: center;
}
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-2);
}
.eyebrow .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--peach-deep);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--peach-deep) 25%, transparent);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }

.hero h1 {
  /* Drop the lower bound so the title fits on a 375px viewport — the long
     Estonian "paberil." can't be hyphenated cleanly at 56px. */
  font-size: clamp(40px, 7vw, 96px);
  margin-top: 22px;
  letter-spacing: -0.035em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(110deg, var(--peach-deep), var(--lilac-deep) 50%, var(--mint-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  /* Italic glyphs lean right past the text box. With background-clip:text
     the box clips the lean, slicing off the trailing edge of the last
     character ("d" in "mälestused"). Pad the box and pull the following
     sibling back so layout stays identical but the glyph renders fully. */
  padding-right: 0.08em;
  margin-right: -0.08em;
}
.hero p.lead {
  font-size: 19px;
  color: var(--ink-2);
  max-width: 480px;
  margin-top: 22px;
  line-height: 1.5;
  text-wrap: pretty;
}
.hero-ctas { display: flex; gap: 12px; margin-top: 32px; }
.hero-tags { display: flex; gap: 18px; margin-top: 36px; flex-wrap: wrap; }
.hero-tag {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13px;
  color: var(--ink-2);
}
.hero-tag .tick {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--mint);
  display: grid; place-items: center;
  color: var(--ink); font-size: 11px; font-weight: 600;
}

/* Hero collage */
.collage {
  position: relative;
  height: 560px;
}
.photo-card {
  position: absolute;
  background: var(--paper);
  padding: 14px 14px 50px;
  box-shadow: var(--shadow-photo);
  border-radius: 4px;
  transition: transform 0.4s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.photo-card .img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center;
  border-radius: 2px;
  display: block;
}
.photo-card .caption {
  position: absolute;
  bottom: 10px; left: 18px; right: 18px;
  font-family: "Caveat", cursive;
  font-size: 26px;
  line-height: 1;
  font-weight: 500;
  color: #2b3a52;
  letter-spacing: 0.005em;
  text-align: center;
  pointer-events: none;
}
.tape {
  position: absolute;
  width: 70px; height: 22px;
  top: -10px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in oklab, var(--butter) 60%, transparent);
  border-left: 1px dashed color-mix(in oklab, var(--ink) 12%, transparent);
  border-right: 1px dashed color-mix(in oklab, var(--ink) 12%, transparent);
}

.collage .c1 { width: 220px; height: 280px; top: 30px; left: 0;   transform: rotate(-6deg); }
.collage .c1 .img { aspect-ratio: 4/5; }
.collage .c2 { width: 240px; height: 300px; top: 70px; left: 200px; transform: rotate(3deg);  z-index: 2; }
.collage .c3 { width: 200px; height: 200px; top: 320px; left: 60px;  transform: rotate(2deg); }
.collage .c3 .img { aspect-ratio: 1/1; }
.collage .c4 { width: 230px; height: 180px; top: 360px; left: 240px; transform: rotate(-4deg); }
.collage .c4 .img { aspect-ratio: 5/4; }

.collage .tape-mint  { background: color-mix(in oklab, var(--mint) 60%, transparent); }
.collage .tape-lilac { background: color-mix(in oklab, var(--lilac) 60%, transparent); }
.collage .tape-rose  { background: color-mix(in oklab, var(--rose) 70%, transparent); }

.collage .photo-card:hover { transform: rotate(0deg) translateY(-6px) scale(1.02); z-index: 5; }

/* On mobile + small tablet the absolute-positioned collage extends to
   ~470px from the left, which overflows narrow viewports. Rebuild it as a
   2×2 grid with gentle rotations preserved. */
@media (max-width: 700px) {
  .collage {
    /* Keep relative so the sticker (absolute) still anchors here. Cap the
       overall width so the 2×2 photo grid feels like a hero accent, not a
       takeover of the viewport. */
    display: grid;
    /* minmax(0, …) not 1fr: the cards carry an aspect-ratio, so a bare `1fr`
       (= minmax(auto, 1fr)) lets each track grow to the card's intrinsic
       width and the right column spills past the viewport. The 0 floor forces
       two equal, shrinkable tracks. */
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: 12px;
    height: auto;
    max-width: 340px;
    margin: 28px auto 0;
  }
  .collage .photo-card,
  .collage .c1, .collage .c2, .collage .c3, .collage .c4 {
    position: static;
    width: 100%;
    min-width: 0;
    height: auto;
    padding: 8px 8px 32px;
    top: auto; left: auto; right: auto; bottom: auto;
    z-index: auto;
  }
  .collage .c1 { transform: rotate(-2deg); aspect-ratio: 4/5; }
  .collage .c2 { transform: rotate(1.5deg); aspect-ratio: 4/5; }
  .collage .c3 { transform: rotate(-1deg); aspect-ratio: 1/1; }
  .collage .c4 { transform: rotate(2deg); aspect-ratio: 5/4; }
  .photo-card .caption { font-size: 20px; bottom: 6px; }
  .sticker.s1 {
    width: 72px; height: 72px;
    font-size: 18px;
    padding: 8px;
    top: -10px; right: -10px;
  }
}

/* Tablet only (701–980px): the absolute collage just shrinks. Bounded at the
   bottom so it never reaches the ≤700 grid rebuild above — a plain
   `max-width: 980px` here would override that block's `height: auto` (it sits
   later in the file), re-stretch the grid rows, and blow the aspect-ratio
   cards out past the viewport's right edge. */
@media (min-width: 701px) and (max-width: 980px) {
  .collage { height: 480px; }
}

/* Sticker */
.sticker {
  position: absolute;
  display: grid; place-items: center;
  border-radius: 50%;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 500;
  text-align: center;
  line-height: 1;
  transform: rotate(-12deg);
  z-index: 3;
}
.sticker.s1 {
  top: -10px; right: 20px;
  width: 110px; height: 110px;
  background: var(--peach);
  color: var(--ink);
  font-size: 26px;
  padding: 12px;
}
.sticker .small {
  font-size: 10px;
  font-family: var(--font-mono);
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* Pull the bottom line up toward the badge's vertical centre instead of
     letting it hang low under the display word. */
  margin-top: -40px;
}

/* Metrics */
.metrics {
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
}
.metrics-item {
  padding: 28px 24px;
  border-right: 1px solid var(--line);
}
.metrics-item:last-child { border-right: 0; }
.metrics-item .v {
  font-family: var(--font-display);
  font-size: 36px;
  letter-spacing: -0.02em;
}
.metrics-item .l {
  font-size: 13px; color: var(--ink-3);
  margin-top: 6px;
}
/* Phones: the 2×2 metrics grid is cramped — shrink the big serif numbers and
   padding so labels don't wrap into several lines. */
@media (max-width: 600px) {
  .metrics-item { padding: 18px 14px; }
  .metrics-item .v { font-size: 26px; }
  .metrics-item .l { font-size: 12px; line-height: 1.3; }
}
@media (max-width: 400px) {
  .metrics-item { padding: 14px 10px; }
  .metrics-item .v { font-size: 22px; }
  .metrics-item .l { font-size: 11px; }
}

/* Section header */
.section { padding: 96px 0; position: relative; }
.section-head {
  display: flex; align-items: end; justify-content: space-between;
  gap: 48px; margin-bottom: 56px;
  flex-wrap: wrap;
}
.section-head .col {
  max-width: 560px;
  min-width: 0;
  flex: 1 1 280px;
}
.section h2 {
  font-size: clamp(32px, 5vw, 64px);
  margin-top: 14px;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.section h2 em {
  font-style: italic; font-weight: 400;
  color: var(--peach-deep);
}
.section-head p {
  color: var(--ink-2);
  font-size: 17px;
  max-width: 460px;
}

/* Sizes */
.sizes-wrap { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.size-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
/* Each category gets its own column count so the cards fill a single row
   when filtered: standard 4, square 3, panorama 2 (so both wide panos sit
   side-by-side instead of one-per-row). */
.size-grid.cat-standard  { grid-template-columns: repeat(4, 1fr); }
.size-grid.cat-square    { grid-template-columns: repeat(3, 1fr); }
.size-grid.cat-panorama  { grid-template-columns: repeat(2, 1fr); }

/* Tablet (≤980px) — drop standard to 2 cols; square keeps 3 only if it fits
   comfortably (drops to 2). Panorama stays 1 col so panoramas have full width. */
@media (max-width: 980px) {
  .size-grid.cat-standard { grid-template-columns: repeat(2, 1fr); }
  .size-grid.cat-square   { grid-template-columns: repeat(2, 1fr); }
  .size-grid.cat-panorama { grid-template-columns: 1fr; }
}
/* Phones — keep standard + square two-up (a single full-width card per row
   wastes the screen and buries the size ladder below the fold). Panorama is
   2:1 wide, so it stays one-per-row. The card internals shrink in the phone
   block further down so two fit cleanly at ~160px each. */
@media (max-width: 520px) {
  /* Standard has 4 sizes → a clean 2×2 grid. */
  .size-grid.cat-standard { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
  /* Square has 3 sizes → a 2-col grid orphans the 3rd in the left cell, leaving
     a dead right half that reads as broken. Switch just this category to
     centered flex-wrap so the lone last card centers under the pair. Hidden
     cards are display:none, so only the 3 visible squares lay out. */
  .size-grid.cat-square { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
  .size-grid.cat-square .size-card { flex: 0 1 calc(50% - 6px); }
  .size-grid.cat-panorama { grid-template-columns: 1fr; }
  /* Cards hold a fixed-width photo preview + price row; without the 0 floor
     the wider one nudges its track past the viewport edge. */
  .size-grid .size-card { min-width: 0; }
}

.size-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  position: relative;
  transition: all 0.2s;
}
.size-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-soft); }

.size-preview {
  width: 100%;
  height: 200px;
  /* Flex, not grid: a grid with no explicit columns creates an implicit
     `auto` (max-content) track that grows to the 380px panorama photo, so the
     photo's `max-width: 100%` resolves against that blown-out track and spills
     past the card on narrow screens. A flex container keeps the photo's
     max-width relative to the real preview width, so it caps correctly. */
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 22px;
}
/* The .photo is the paper. The .photo-inner is the printed image area. In
   "no border" mode the inner fills the whole photo; in "fine border" and
   "instant" the paper shows around (and below for instant). */
.size-preview .photo {
  background: var(--paper);
  box-shadow: var(--shadow-photo);
  border-radius: 2px;
  display: grid; place-items: center;
  transition: padding 0.25s ease, box-shadow 0.25s ease;
  /* Inline `width` is the ideal render size. Cap to the parent so panoramas
     (380px) don't push the page wider than the viewport on mobile/tablet. */
  max-width: 100%;
  max-height: 100%;
}
.size-preview .photo-inner {
  width: 100%;
  height: 100%;
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-2);
  text-align: center;
  border-radius: 1px;
}
.size-card[data-swatch="peach"]  .photo-inner { background: linear-gradient(135deg, var(--peach), var(--butter)); }
.size-card[data-swatch="mint"]   .photo-inner { background: linear-gradient(135deg, var(--mint), var(--sky)); }
.size-card[data-swatch="lilac"]  .photo-inner { background: linear-gradient(135deg, var(--lilac), var(--rose)); }
.size-card[data-swatch="butter"] .photo-inner { background: linear-gradient(135deg, var(--butter), var(--peach)); }
.size-card[data-swatch="rose"]   .photo-inner { background: linear-gradient(135deg, var(--rose), var(--lilac)); }
.size-card[data-swatch="sky"]    .photo-inner { background: linear-gradient(135deg, var(--sky), var(--mint)); }

.size-name { font-family: var(--font-display); font-size: 30px; }
.size-cm { font-family: var(--font-mono); font-size: 12px; color: var(--ink-3); letter-spacing: 0.06em; text-transform: uppercase; margin-top: 4px; }
.size-note { font-size: 14px; color: var(--ink-2); margin-top: 12px; line-height: 1.5; min-height: 42px; }
.size-foot { display: flex; justify-content: space-between; align-items: end; margin-top: 22px; padding-top: 18px; border-top: 1px dashed var(--line); }
.size-foot .price { font-family: var(--font-display); font-size: 26px; }
.size-foot .price-l { font-size: 11px; color: var(--ink-3); display: block; text-transform: uppercase; letter-spacing: 0.08em; }

.popular-flag {
  position: absolute; top: 14px; right: 14px;
  background: var(--ink); color: var(--paper);
  font-size: 11px; padding: 5px 9px; border-radius: 999px;
  letter-spacing: 0.05em;
}

/* Toggle group */
.toggle-group {
  display: inline-flex;
  background: var(--cream-2);
  border: 1px solid var(--line);
  padding: 4px;
  border-radius: 999px;
  font-size: 13.5px;
}
.toggle-group button {
  padding: 8px 18px; border-radius: 999px;
  color: var(--ink-2);
  font-weight: 500;
}
.toggle-group button.active {
  background: var(--ink); color: var(--paper);
}

/* Category + border pill toolbar on the landing sizes section */
.size-filter-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 28px;
  margin: 24px 0 32px;
}
.size-filter-group {
  display: flex;
  align-items: center;
  gap: 14px;
  flex-wrap: wrap;
}
.size-filter-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.pill-group {
  display: inline-flex;
  background: var(--cream-2);
  border: 1px solid var(--line);
  padding: 4px;
  border-radius: 999px;
  gap: 2px;
}
.pill-group .pill {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
  background: transparent;
  border: 0;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.pill-group .pill:hover { color: var(--ink); }
.pill-group .pill.active {
  background: var(--ink);
  color: var(--paper);
}

/* Phones — the category + border toolbars don't both fit on one row, and the
   three border pills ("Ilma ääriseta / 6 mm ääris / Polaroid ääris") are wide
   enough that flex-shrink wraps each label onto two lines. Give each group its
   own row with the label stacked above its pills, and shrink the pills (tighter
   padding, smaller font, no label wrapping) so all three stay on one line even
   at 360px. */
@media (max-width: 600px) {
  .size-filter-row { gap: 16px; }
  .size-filter-group { flex-direction: column; align-items: flex-start; gap: 8px; width: 100%; }
  /* max-width + wrap: on very narrow phones (≤360px) the long Russian border
     label "Поле для заметок" can't share one row — let the whole chips wrap to
     a second row rather than clip, while each label still stays nowrap. */
  .pill-group { max-width: 100%; flex-wrap: wrap; row-gap: 4px; }
  .pill-group .pill { padding: 8px 12px; font-size: 12.5px; white-space: nowrap; }
}

/* Description / disclaimer below the toolbar. */
.size-filter-meta {
  margin: -12px 0 28px;
  max-width: 700px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.size-filter-desc {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink-2);
  margin: 0;
}
.size-filter-note {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
  padding-left: 14px;
  border-left: 2px solid var(--line);
  margin: 0;
  line-height: 1.5;
}

/* Border preview — the .photo is the white paper, the .photo-inner is the
   colored image area. Padding on .photo = visible paper margin. */
.size-grid.border-none .size-card .photo {
  padding: 0;
  box-shadow: none;
  background: transparent;
}
.size-grid.border-fixed .size-card .photo {
  padding: 8px;
}
/* The Polaroid product always wears its frame — the border filter never
   applies to it (the frame is the size, not a choosable border). Same
   specificity as the .border-fixed rule above, so it must stay below it. */
.size-grid .size-card.is-polaroid .photo {
  padding: 6px 6px 28px;
  background: var(--paper);
  box-shadow: var(--shadow-photo);
}

/* Packs */
.pack-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 18px;
}
.pack-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px;
  position: relative;
}
.pack-card.best {
  background: var(--mint);
  border-color: var(--mint-deep);
}
/* Header row — count on the left, discount badge on the right. */
.pack-card .pack-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}
.pack-card .pack-count {
  font-family: var(--font-display);
  font-size: 56px;
  line-height: 1;
}
.pack-card .pack-count-label {
  font-size: 13px;
  color: var(--ink-2);
  margin-top: 4px;
}
.pack-card .discount-badge {
  background: var(--peach-deep);
  color: var(--paper);
  font-family: var(--font-mono);
  font-size: 13px;
  padding: 6px 12px;
  border-radius: 999px;
  letter-spacing: 0.05em;
  font-weight: 500;
  flex-shrink: 0;
}
.pack-card.best .discount-badge {
  background: var(--ink);
  color: var(--paper);
}

/* Pricing block — three rows: original, pack, savings. */
.pack-card .pack-pricing {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px dashed var(--line);
  display: grid;
  gap: 6px;
}
.pack-card.best .pack-pricing { border-top-color: color-mix(in oklab, var(--ink) 14%, transparent); }
.pack-card .pack-pricing-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  font-size: 14px;
}
.pack-card .pack-pricing-label {
  color: var(--ink-2);
}
.pack-card .pack-pricing-value {
  font-family: var(--font-display);
  font-size: 16px;
  color: var(--ink);
}
.pack-card .pack-pricing-value.original {
  text-decoration: line-through;
  text-decoration-thickness: 1px;
  color: var(--ink-3);
}
.pack-card .pack-pricing-row.primary .pack-pricing-label {
  color: var(--ink);
  font-weight: 500;
}
.pack-card .pack-pricing-row.primary .pack-pricing-value {
  font-size: 32px;
  line-height: 1;
}
.pack-card .pack-pricing-row.savings {
  margin-top: 2px;
}
.pack-card .pack-pricing-row.savings .pack-pricing-label,
.pack-card .pack-pricing-row.savings .pack-pricing-value {
  color: var(--mint-deep);
  font-weight: 500;
}
.pack-card.best .pack-pricing-row.savings .pack-pricing-label,
.pack-card.best .pack-pricing-row.savings .pack-pricing-value {
  color: var(--ink);
}

/* Pack ladder — section-level explainer that surfaces the full discount
   structure (5/8/12% at 10+/25+/50+) when the customer flips to the
   "Packs" tab. Reads as one tidy line so the tier ladder is obvious. */
.pack-ladder {
  margin-bottom: 28px;
  padding: 22px 24px;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
}
.pack-ladder p {
  margin: 10px 0 0;
  font-size: 15px;
  color: var(--ink-2);
  line-height: 1.55;
}
.pack-ladder p strong { color: var(--ink); font-weight: 500; }
.pack-ladder-step { white-space: nowrap; }
.pack-ladder-note {
  font-size: 12.5px;
  color: var(--ink-3);
  margin-top: 8px !important;
}
.pack-card .size-pick-label {
  margin-top: 18px;
  font-size: 12px;
  color: var(--ink-3);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: var(--font-mono);
}
.pack-card select {
  margin-top: 6px; width: 100%; padding: 10px 12px;
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-md); font-size: 14px; font-family: inherit;
}
.pack-card .extra-row {
  margin-top: 14px;
  padding: 10px 12px;
  background: var(--cream-2);
  border-radius: var(--r-sm);
  display: flex;
  justify-content: space-between;
  font-size: 13px;
}
.pack-card.best .extra-row { background: rgba(255,252,244,0.5); }

/* Footer */
.footer { background: var(--ink); color: var(--paper); padding: 64px 0 36px; }
.footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; }
.footer h3 { color: var(--paper); font-family: var(--font-sans); font-size: 13px; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 500; margin-bottom: 14px; }
.footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.footer ul a { color: color-mix(in oklab, var(--paper) 70%, transparent); font-size: 14px; cursor: pointer; }
.footer ul a:hover { color: var(--paper); }
.footer-tag { font-family: var(--font-display); font-size: 36px; max-width: 320px; line-height: 1.1; }
.footer-bottom { border-top: 1px solid color-mix(in oklab, var(--paper) 12%, transparent); margin-top: 56px; padding-top: 24px; display: flex; justify-content: space-between; font-size: 13px; color: color-mix(in oklab, var(--paper) 60%, transparent); }

/* Light footer — for flows where the dark footer feels too heavy. */
.footer.footer-light {
  background: var(--paper);
  color: var(--ink);
  border-top: 1px solid var(--line);
}
.footer.footer-light h3 { color: var(--ink); }
.footer.footer-light ul a { color: var(--ink-2); }
.footer.footer-light ul a:hover { color: var(--ink); }
.footer.footer-light .footer-tag { color: var(--ink); }
.footer.footer-light .footer-bottom {
  border-top: 1px solid var(--line);
  color: var(--ink-3);
}

/* ROUTES — order flow + tracking */
.flow-bg { background: var(--cream); min-height: 100vh; }
.flow-head { padding: 28px 0 8px; display: flex; justify-content: space-between; align-items: center; }
.flow-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--ink-2); cursor: pointer;
}
.flow-back:hover { color: var(--ink); }
.flow-title { font-family: var(--font-display); font-size: 22px; }

.stepper { display: flex; gap: 8px; padding: 24px 0 36px; }
.stepper .step {
  flex: 1;
  padding: 14px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  display: flex; align-items: center; gap: 12px;
  transition: all 0.2s;
  text-align: left;
  font: inherit;
}
.stepper .step:not(:disabled) { cursor: pointer; }
.stepper .step:not(:disabled):hover { border-color: var(--ink-3); }
.stepper .step:disabled { cursor: not-allowed; opacity: 0.6; }
.stepper .step.active:disabled { opacity: 1; }
.stepper .step.done:not(:disabled):hover { background: var(--cream-2); }
.stepper .step .n {
  width: 26px; height: 26px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--ink-3);
  display: grid; place-items: center;
  font-size: 13px; font-weight: 600;
}
.stepper .step .l { font-size: 13.5px; color: var(--ink-3); font-weight: 500; }
.stepper .step.active { background: var(--ink); border-color: var(--ink); }
.stepper .step.active .n { background: var(--peach); color: var(--ink); }
.stepper .step.active .l { color: var(--paper); }
.stepper .step.done .n { background: var(--mint); color: var(--ink); }
.stepper .step.done .l { color: var(--ink); }

/* Step layouts */
.step-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 40px;
  box-shadow: var(--shadow-soft);
  width: 100%;
  min-width: 0;
}
/* Grid items default to min-width: auto which lets their content blow out the
 * track. Forcing min-width: 0 keeps the left/right columns locked at their
 * fr-track widths no matter what step or delivery method is active. */
.order-layout > * { min-width: 0; }
.step-panel { display: none; }
.step-panel.active { display: block; }

/* Bottom notch — shown on tablet/mobile only, replaces the desktop aside. */
.order-notch { display: none; }
@media (max-width: 980px) {
  .order-aside { display: none; }
  .order-layout { grid-template-columns: 1fr !important; }
  /* The pay step duplicates the summary in its own right column. The notch
     covers that so collapse the inner pay-grid to a single column. */
  .pay-grid { grid-template-columns: 1fr !important; }
  .pay-grid > div:last-child { display: none; }
  /* A little breathing room below the last order content; the sticky notch
     now sits after .container in flow, so no tall clearance is needed. */
  .flow-bg .container { padding-bottom: 24px !important; }

  /* Let .container absorb .flow-bg's min-height:100vh filler so the sticky
     notch sits flush at the bottom of the flow (pinned to the viewport
     bottom while scrolling, then flush above the slim footer at page end) —
     instead of the filler opening a gap between the notch and the footer. */
  .flow-bg { display: flex; flex-direction: column; }
  .flow-bg > .container { flex: 1 0 auto; }

  .order-notch {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    /* Sticky (not fixed) so the bar pins to the viewport bottom while the
       order content scrolls, then releases just above the slim footer at the
       end of the page — "stuck" between the order flow and the footer. Lives
       as a direct child of .flow-bg (outside .container) so it spans full
       width. overflow-x:clip on body/html doesn't create a scroll container,
       so sticky still resolves against the viewport. */
    position: sticky;
    bottom: 0;
    z-index: 60;
    background: color-mix(in oklab, var(--paper) 95%, transparent);
    backdrop-filter: blur(14px) saturate(1.1);
    border-top: 1px solid var(--line);
    padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
    box-shadow: 0 -8px 24px -12px rgba(42, 37, 32, 0.18);
  }
  .order-notch-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 10px;
    background: transparent;
    border: 0;
    cursor: pointer;
    text-align: left;
    font: inherit;
    color: inherit;
    border-radius: 10px;
  }
  .order-notch-head:hover { background: color-mix(in oklab, var(--ink) 4%, transparent); }
  .order-notch-meta {
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }
  .order-notch-label {
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ink-3);
    line-height: 1;
  }
  .order-notch-total {
    font-family: var(--font-display);
    font-size: 22px;
    letter-spacing: -0.015em;
    line-height: 1;
  }
  .order-notch-nudge {
    display: block;
    font-family: var(--font-mono);
    font-size: 10.5px;
    letter-spacing: 0.02em;
    color: var(--mint-deep);
    line-height: 1.3;
    margin-top: 2px;
  }
  .order-notch-nudge[hidden] { display: none; }
  .order-notch-chev {
    font-size: 16px;
    color: var(--ink-3);
    transition: transform 0.18s ease;
  }
  .order-notch.open .order-notch-chev { color: var(--ink); }
  .order-notch-actions { display: flex; }
  .order-notch-actions .btn-primary { padding: 12px 16px; font-size: 14px; }

  /* The drawer opens upward and sits above the head row. Border divides
     body from the always-visible head + actions row below. */
  .order-notch-body {
    grid-column: 1 / -1;
    max-height: 65vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    border-bottom: 1px dashed var(--line);
    margin-bottom: 10px;
    padding-bottom: 12px;
  }
  .order-notch-body-inner > .summary-panel {
    border: 0;
    padding: 0;
    background: transparent;
  }
  body.notch-open { overflow: hidden; }

  /* Two photos per row on the upload + finish grids now that the aside is gone.
     Specificity is bumped past the base `.uploaded-grid` rule (which comes
     later in the file and would otherwise win) by anchoring to a step panel. */
  .step-panel .uploaded-grid {
    grid-template-columns: 1fr 1fr;
    gap: 12px;
  }
  .step-card { padding: 24px 20px; }

  /* The pay step's existing back/CTA buttons read as duplicates now that the
     notch carries both. Hide them so only one of each is visible. */
  .pay-cta { width: 100%; }
  .pay-step-back { display: none; }

  /* Pay-step form overflow fixes — stack 2-col field rows + shrink the bank
     grid so tiles don't squeeze their labels off-screen. Selectors are
     scoped under .step-panel to win against the base rules that appear
     later in this stylesheet. */
  .step-panel .field-row { grid-template-columns: 1fr; gap: 14px; }
  .step-panel .field { margin-bottom: 14px; }
  .step-panel .field input,
  .step-panel .field-row input { width: 100%; min-width: 0; box-sizing: border-box; }
  .step-panel .bank-grid { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .step-panel .bank-tile { padding: 10px; min-width: 0; }
  .step-panel .bank-name { font-size: 13px; min-width: 0; }
  .step-panel .phone-input { min-width: 0; }
  .step-panel .phone-country-btn { padding: 0 8px 0 12px; font-size: 13.5px; }
  .step-panel .phone-input input { font-size: 14.5px; padding: 12px 12px; min-width: 0; }
  .step-panel .wallet-express { gap: 8px; }
  .step-panel .pay-method { padding: 14px 12px; }
  .step-panel .pay-method .pm-t,
  .step-panel .pay-method .pm-d { min-width: 0; overflow-wrap: anywhere; }
  .step-panel .pay-method .pm-d { font-size: 12px; }
  /* The pay-grid has fr-tracks; grid items default to min-width: auto
     and otherwise blow out the row when a field-row has long placeholders. */
  .pay-grid > * { min-width: 0; }
  /* h3 in pay step is set inline at 28px — tighter on mobile. */
  .step-panel[data-step="pay"] h3 { font-size: 22px !important; }
  /* Locker line wraps cleanly even with long Estonian compound words. */
  .step-panel [data-order-target="payLockerLine"] { overflow-wrap: anywhere; }
}

/* Voucher trigger — quiet inline link, expands the notch on mobile. */
@media (max-width: 400px) {
  /* Tiny screens: bank list goes single col so names stay legible. */
  .step-panel .bank-grid { grid-template-columns: 1fr; }
}

.dropzone {
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  padding: 64px 24px;
  text-align: center;
  background: var(--cream);
  transition: all 0.2s;
  cursor: pointer;
}
.dropzone:hover { border-color: var(--peach-deep); background: color-mix(in oklab, var(--peach) 18%, var(--cream)); }
.dropzone .ico {
  width: 64px; height: 64px;
  margin: 0 auto 20px;
  border-radius: 50%;
  background: var(--peach);
  display: grid; place-items: center;
  font-size: 28px;
}
.dropzone h3 { font-size: 28px; }
.dropzone p { color: var(--ink-2); margin-top: 8px; }

.uploaded-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 16px;
  margin-top: 24px;
  min-width: 0;
}
/* Below the 180px minmax min, two columns (2×180=360) blow past a phone's
 * ~340px content width — the second column lands off-screen and overflow-x:clip
 * makes it unreachable. Pin explicit columns with a 0 min so they always shrink
 * to fit the viewport (same pattern as .size-grid). */
@media (max-width: 600px) {
  .uploaded-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
}
@media (max-width: 380px) {
  .uploaded-grid { grid-template-columns: minmax(0, 1fr); }
}
.uploaded-item {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  position: relative;
  min-width: 0;
}
.uploaded-item .img {
  aspect-ratio: 1;
  background-size: cover;
  background-position: 50% 50%;
  border-radius: var(--r-sm);
  margin-bottom: 12px;
  position: relative;
  background-color: var(--cream-2);
}
.upload-progress {
  position: absolute; inset: 0;
  display: none;
  align-items: center; justify-content: center;
  flex-direction: column; gap: 6px;
  background: color-mix(in oklab, var(--paper) 70%, transparent);
  backdrop-filter: blur(2px);
  border-radius: var(--r-sm);
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  z-index: 1;
}
.uploaded-item.uploading .upload-progress { display: flex; }
.upload-progress-ring {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 3px solid var(--cream-2);
  border-top-color: var(--peach-deep);
  animation: spin 0.8s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
.uploaded-item.failed .img { background: color-mix(in oklab, #c44 12%, var(--cream)); }
.uploaded-item .name {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  margin-bottom: 8px;
  letter-spacing: 0.04em;
  /* A long upload filename must not stretch the grid cell (see .uploaded-grid). */
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.uploaded-item .controls {
  display: flex; flex-direction: column; gap: 6px;
}
.uploaded-item .size-pick {
  width: 100%;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 6px 8px;
  font-size: 12px;
  min-width: 0;
}
/* Step-1 quantity stepper: [−] 5 tk [+]. Decrementing past 1 removes the
   photo (via the confirm dialog), so there's no separate delete button. */
.uploaded-item .qty-stepper {
  display: flex; align-items: center; justify-content: space-between;
  gap: 8px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  padding: 4px 6px;
}
.uploaded-item .qty-btn {
  flex: 0 0 auto;
  width: 28px; height: 28px;
  border-radius: var(--r-sm);
  background: var(--cream-2);
  color: var(--ink);
  font-size: 18px; line-height: 1;
  display: grid; place-items: center;
  transition: background 0.15s ease;
}
.uploaded-item .qty-btn:hover { background: var(--line); }
.uploaded-item .qty-count {
  font-family: var(--font-mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em;
  color: var(--ink);
}
.uploaded-item .view {
  position: absolute; top: 14px; right: 14px;
  width: 30px; height: 30px;
  border-radius: 50%;
  background: rgba(0,0,0,0.62);
  color: var(--paper);
  display: grid; place-items: center;
  z-index: 2;
}
.uploaded-item .view:hover { background: rgba(0,0,0,0.85); }
.uploaded-item .view svg { display: block; }

/* Remove-photo confirmation — a small centered dialog raised when the
   quantity stepper is nudged below 1. */
.remove-confirm {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--ink) 60%, transparent);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  z-index: 300;
}
.remove-confirm[hidden] { display: none; }
.remove-confirm-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
  padding: 28px 26px;
  width: 100%; max-width: 340px;
  text-align: center;
}
.remove-confirm-emoji { font-size: 34px; line-height: 1; }
.remove-confirm-card h4 {
  font-family: var(--font-display);
  font-style: italic; font-weight: 400;
  font-size: 23px;
  margin: 12px 0 6px;
}
.remove-confirm-card p {
  color: var(--ink-2); font-size: 14px;
  margin-bottom: 20px;
}
.remove-confirm-actions {
  display: flex; gap: 10px; justify-content: center;
}
.remove-confirm-actions .btn { flex: 1; }

/* Print-preview lightbox — renders the photo inside a rectangle with the actual
 * print proportions so the customer sees what's going to come out of the printer. */
.lightbox {
  position: fixed; inset: 0;
  background: color-mix(in oklab, var(--ink) 78%, transparent);
  backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  padding: 40px 24px;
  z-index: 200;
}
.lightbox[hidden] { display: none; }
.lightbox-shell {
  background: var(--paper);
  border-radius: var(--r-xl);
  padding: 28px;
  width: min(720px, 100%);
  height: min(80vh, 720px);
  display: flex; flex-direction: column;
  gap: 18px;
  box-shadow: var(--shadow-lift);
  position: relative;
}
.lightbox-close {
  position: absolute; top: 16px; right: 16px;
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cream-2);
  color: var(--ink);
  font-size: 20px;
  display: grid; place-items: center;
  line-height: 1;
}
.lightbox-close:hover { background: var(--cream); }
.lightbox-meta { display: flex; flex-direction: column; gap: 4px; padding-right: 36px; }
.lightbox-size {
  font-family: var(--font-display); font-size: 22px;
  letter-spacing: -0.01em;
}
.lightbox-hint { font-size: 13px; color: var(--ink-3); }
.lightbox-stage {
  flex: 1; min-height: 0;
  background: var(--cream-2);
  border-radius: var(--r-md);
  padding: 24px;
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.lightbox-print {
  --print-aspect: 1;
  --crop-x: 50%;
  --crop-y: 50%;
  --rotation: 0deg;
  --zoom: 1;
  --border-px: 0px;
  --polaroid-side-px: 0px;
  --polaroid-bottom-px: 0px;
  /* Width/height are set inline from JS based on the size's ratio + stage size,
   * because aspect-ratio alone on an empty flex item resolves to 0×0.
   * Paper is pure white — that's what comes out of the DS620A. */
  background: #ffffff;
  position: relative;
  box-shadow: 0 1px 0 rgba(42,37,32,0.06), 0 18px 40px -16px rgba(42,37,32,0.32);
  cursor: grab;
  user-select: none;
  touch-action: none;
}
.lightbox-print.dragging { cursor: grabbing; }
/* Border padding is computed in PIXELS from the print's rendered short side so
 * a 6mm physical border looks exactly 6mm — not 9% of the parent container. */
.lightbox-print.bordered { padding: var(--border-px); }
.lightbox-print.polaroid {
  padding: var(--polaroid-side-px) var(--polaroid-side-px) var(--polaroid-bottom-px);
}

/* The clipping wrapper sits inside the padding (= the content box of the
 * print), so however much the image is zoomed or panned it can never bleed
 * into the white border. */
.lightbox-image-clip {
  position: relative;
  width: 100%;
  height: 100%;
  overflow: hidden;
}

.lightbox-image {
  width: 100%; height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: var(--crop-x) var(--crop-y);
  transform: rotate(var(--rotation)) scale(var(--zoom));
  transform-origin: var(--crop-x) var(--crop-y);
  pointer-events: none;
  transition: transform 0.15s ease-out;
}
.lightbox-grid {
  position: absolute; inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
}
.lightbox-print.dragging .lightbox-grid { opacity: 1; }
.lightbox-grid span { position: absolute; background: rgba(255,255,255,0.4); }
.lightbox-grid span:nth-child(1) { left: 33.333%; top: 0; bottom: 0; width: 1px; }
.lightbox-grid span:nth-child(2) { left: 66.666%; top: 0; bottom: 0; width: 1px; }
.lightbox-grid span:nth-child(3) { top: 33.333%; left: 0; right: 0; height: 1px; }
.lightbox-grid span:nth-child(4) { top: 66.666%; left: 0; right: 0; height: 1px; }

.lightbox-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  align-items: center;
  flex-wrap: wrap;
}

.lightbox-border-select {
  appearance: none;
  -webkit-appearance: none;
  padding: 7px 30px 7px 14px;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%232A2520' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 12px center;
  background-size: 9px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  margin-right: auto;
}
.lightbox-border-select:focus { outline: none; border-color: var(--ink); }

.lightbox-zoom {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 14px;
  background: var(--cream-2);
  border-radius: 999px;
}
.lightbox-zoom-label {
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ink-3);
  width: 12px; text-align: center;
}
.lightbox-zoom-slider {
  -webkit-appearance: none;
  appearance: none;
  flex: 1;
  height: 4px;
  background: var(--line);
  border-radius: 999px;
  outline: none;
}
.lightbox-zoom-slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
  border: 2px solid var(--paper);
  box-shadow: 0 2px 8px -2px rgba(42,37,32,0.5);
}
.lightbox-zoom-slider::-moz-range-thumb {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: var(--ink);
  cursor: pointer;
  border: 2px solid var(--paper);
}

/* Finish-info lightbox content */
.legal-shell { height: min(80vh, 720px); }
.legal-panel { display: flex; flex-direction: column; gap: 14px; flex: 1; min-height: 0; }
.legal-panel[hidden] { display: none; }
.legal-body {
  flex: 1;
  overflow-y: auto;
  padding-right: 8px;
}
.legal-actions { border-top: 1px solid var(--line); padding-top: 16px; }

.finish-info-shell { height: auto; max-height: calc(100vh - 80px); }
.finish-info-body {
  flex: 1;
  overflow-y: auto;
  display: flex; flex-direction: column; gap: 24px;
  padding-right: 4px;
}
.finish-info-section h4 {
  font-family: var(--font-display);
  font-size: 18px;
  margin-bottom: 14px;
}
.finish-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
/* Thumbnail beside the copy, not stacked above it. Stacked, the aspect-ratio
   thumbnails grew to the full card width — 293px tall swatches for two lines
   of text. Grid areas give the side-by-side layout without extra markup. */
.finish-info-card {
  display: grid;
  grid-template-columns: 96px 1fr;
  grid-template-areas: "thumb label" "thumb desc";
  align-items: center;
  column-gap: 14px; row-gap: 4px;
  min-width: 0;
  padding: 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.finish-info-card > .finish-info-swatch,
.finish-info-card > .finish-info-frame { grid-area: thumb; width: 96px; }
.finish-info-card > .finish-info-label { grid-area: label; align-self: end; }
.finish-info-card > .finish-info-desc  { grid-area: desc;  align-self: start; }

/* "Polaroid is a size, not a border" — a sidebar note under the border grid,
   laid out as thumbnail + copy rather than a third card, so it doesn't read
   as a pickable option. */
.finish-info-note {
  display: flex; align-items: center; gap: 14px;
  margin-top: 14px;
  padding: 14px;
  background: var(--paper);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
}
.finish-info-note .finish-info-frame {
  flex: 0 0 62px;
  width: 62px;
}
/* The caption is sized for the full-width border cards; in this thumbnail it
   overruns the frame, so scale it to the smaller sheet. Three classes on
   purpose — `.finish-info-frame .frame-caption` further down the file would
   otherwise win the specificity tie on source order. */
.finish-info-note .finish-info-frame .frame-caption { font-size: 8px; bottom: 5%; }
.finish-info-note > div:last-child { min-width: 0; }
.finish-info-label {
  font-weight: 500;
  font-size: 14px;
}
.finish-info-desc {
  font-size: 12.5px;
  color: var(--ink-3);
  line-height: 1.45;
}

/* Swatches that show the visual difference between gloss and matte */
.finish-info-swatch {
  aspect-ratio: 1;
  border-radius: var(--r-sm);
  background: linear-gradient(135deg, var(--peach), var(--lilac));
  position: relative;
  overflow: hidden;
}
.finish-info-swatch.glossy::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(115deg, rgba(255,255,255,0.5) 0%, rgba(255,255,255,0) 30%, rgba(255,255,255,0) 60%, rgba(255,255,255,0.25) 90%);
}
.finish-info-swatch.matte::after {
  content: "";
  position: absolute;
  inset: 0;
  background: rgba(255,252,244,0.18);
  backdrop-filter: blur(1px) saturate(0.92);
}

/* Mini print frames showing the border options */
.finish-info-frame {
  aspect-ratio: 4 / 5;
  background: var(--paper);
  border-radius: var(--r-sm);
  box-shadow: 0 1px 0 rgba(42,37,32,0.06), 0 6px 18px -6px rgba(42,37,32,0.18);
  position: relative;
  overflow: hidden;
}
/* The photo is INSET, not padded. Percentage padding resolves against the
   PARENT's width, so this frame rendered inside the much wider note box blew
   its 25% bottom padding out to 157px and collapsed the image to 0×0.
   Absolute insets resolve against the frame's own box, so one rule now holds
   at any thumbnail size. */
.finish-info-frame .frame-photo {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--mint), var(--sky));
  border-radius: 2px;
}
/* 6 mm border, kept optically even on the 4:5 sheet — the vertical inset is
   the horizontal one scaled by the aspect ratio (8% × 4/5). */
.finish-info-frame.frame-fixed .frame-photo {
  top: 6.4%; bottom: 6.4%; left: 8%; right: 8%;
}
/* True polaroid geometry: an 88×107 mm sheet carrying a 79×79 mm image, with
   4.5 mm sides and top and a 23.5 mm bottom lip. Insets are those millimetres
   over the sheet's own width/height, so the image lands genuinely square. */
.finish-info-frame.frame-polaroid { aspect-ratio: 88 / 107; }
.finish-info-frame.frame-polaroid .frame-photo {
  top: 4.21%; bottom: 21.96%; left: 5.11%; right: 5.11%;
}
.finish-info-frame .frame-caption {
  position: absolute;
  bottom: 6%;
  left: 0; right: 0;
  text-align: center;
  font-family: "Caveat", cursive;
  font-size: 14px;
  color: #2b3a52;
}

/* On a phone the two-up grid squeezed each card into a narrow column, so go
   one-per-row and shrink the thumbnail; the side-by-side layout itself is
   already the default above. */
@media (max-width: 600px) {
  .finish-info-body { gap: 18px; }
  .finish-info-grid { grid-template-columns: 1fr; gap: 10px; }
  .finish-info-card {
    grid-template-columns: 54px 1fr;
    column-gap: 12px; row-gap: 3px;
    padding: 12px;
  }
  .finish-info-card > .finish-info-swatch,
  .finish-info-card > .finish-info-frame { width: 54px; }
  .finish-info-note { gap: 12px; padding: 12px; }
  .finish-info-note .finish-info-frame { flex-basis: 54px; width: 54px; }
}

/* Finish-step preview — kept square here; the lightbox shows true print proportions. */
.finish-preview {
  aspect-ratio: 1;
  background: transparent;
  border-radius: var(--r-sm);
  margin-bottom: 12px;
  position: relative;
  overflow: hidden;
}
.finish-preview.bordered {
  background: var(--paper);
  padding: 6%;
  box-shadow: 0 1px 0 rgba(42,37,32,0.06), 0 6px 18px -6px rgba(42,37,32,0.18);
}
.finish-preview.polaroid {
  background: var(--paper);
  padding: 5% 5% 25%;
  box-shadow: 0 1px 0 rgba(42,37,32,0.06), 0 6px 18px -6px rgba(42,37,32,0.18);
}
.finish-preview .photo-img {
  width: 100%; height: 100%;
  background-size: cover; background-position: 50% 50%;
  border-radius: var(--r-sm);
}
.finish-preview.bordered .photo-img { border-radius: 2px; }


.summary-stack {
  position: sticky;
  top: 96px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-height: calc(100vh - 112px);
}
.summary-panel {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 24px;
  overflow-y: auto;
  min-height: 0;
}
.summary-actions {
  display: flex;
  gap: 8px;
  flex-shrink: 0;
}
.summary-panel h3 { font-size: 22px; margin-bottom: 16px; }
.summary-row { display: flex; justify-content: space-between; padding: 10px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.summary-row:last-of-type { border-bottom: 0; }
.summary-total { display: flex; justify-content: space-between; padding-top: 16px; margin-top: 8px; border-top: 2px solid var(--ink); font-family: var(--font-display); font-size: 22px; }

/* Locker step — full-width list with carrier filter pills + search */
.delivery-locker-content { min-width: 0; }

.locker-filters {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 12px;
  flex-wrap: wrap;
}
.locker-pills {
  display: inline-flex;
  background: var(--cream-2);
  border: 1px solid var(--line);
  padding: 3px;
  border-radius: 999px;
  gap: 2px;
}
.locker-pill {
  padding: 6px 14px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--ink-2);
  letter-spacing: 0.02em;
  transition: all 0.15s;
}
.locker-pill:hover { color: var(--ink); }
.locker-pill.active {
  background: var(--ink);
  color: var(--paper);
}
.locker-pill.carrier-omniva.active     { background: var(--carrier-omniva); }
.locker-pill.carrier-smartposti.active { background: var(--carrier-smartposti); }
.locker-pill.carrier-dpd.active        { background: var(--carrier-dpd); }

.locker-county {
  appearance: none;
  -webkit-appearance: none;
  padding: 8px 36px 8px 14px;
  background-color: var(--paper);
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 8'><path fill='none' stroke='%232A2520' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' d='M1 1.5L6 6.5L11 1.5'/></svg>");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 10px 7px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 13px;
  color: var(--ink);
  cursor: pointer;
  min-width: 180px;
}
.locker-county:focus { outline: none; border-color: var(--ink); }

.locker-search {
  flex: 1;
  min-width: 200px;
  margin-bottom: 0;
}
.locker-results-meta {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 8px;
}
.locker-list-tall { max-height: 480px; }
.locker-list { max-height: 540px; overflow-y: auto; padding-right: 4px; }
.locker-item {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 16px 18px;
  margin-bottom: 8px;
  cursor: pointer;
  transition: all 0.15s;
  display: flex; align-items: center; gap: 14px;
  width: 100%;
  text-align: left;
}
.locker-item:hover { border-color: var(--ink-3); }
.locker-item.active { background: var(--ink); border-color: var(--ink); color: var(--paper); }
.locker-item.active .meta { color: color-mix(in oklab, var(--paper) 65%, transparent); }
.locker-item .badge { font-family: var(--font-mono); font-size: 10px; padding: 4px 8px; border-radius: 999px; letter-spacing: 0.06em; text-transform: uppercase; }
.locker-item .badge.carrier-omniva     { background: var(--carrier-omniva); color: var(--paper); }
.locker-item .badge.carrier-smartposti { background: var(--carrier-smartposti); color: var(--paper); }
.locker-item .badge.carrier-dpd        { background: var(--carrier-dpd); color: var(--paper); }
.locker-item .body { flex: 1; }
.locker-item .name { font-size: 15px; font-weight: 500; }
.locker-item .meta { font-size: 12px; color: var(--ink-3); margin-top: 2px; }
.locker-item.active .badge { opacity: 0.95; }
.locker-item .eta { font-family: var(--font-mono); font-size: 11px; opacity: 0.7; }

.search-input {
  width: 100%;
  padding: 12px 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  margin-bottom: 16px;
  font-size: 14px;
}

/* Pay */
.pay-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; }
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field label { font-size: 13px; color: var(--ink-2); font-weight: 500; }
.field input {
  padding: 12px 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  font-size: 15px;
  outline: none;
  transition: border-color 0.15s;
}
.field input:focus { border-color: var(--ink); background: var(--paper); }
/* Filled-but-invalid: red ring so the customer sees why the Pay button is grey. */
.field input.invalid,
.phone-input:has(input.invalid) {
  border-color: var(--coral);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--coral) 18%, transparent);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

/* Customer type — individual vs company pills */
.customer-type {
  display: inline-flex;
  background: var(--cream-2);
  border: 1px solid var(--line);
  padding: 3px;
  border-radius: 999px;
  margin-bottom: 14px;
  gap: 2px;
}
.customer-type-pill {
  padding: 8px 18px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-2);
  transition: all 0.15s;
}
.customer-type-pill:hover { color: var(--ink); }
.customer-type-pill.active {
  background: var(--ink);
  color: var(--paper);
}
.company-fields { display: flex; flex-direction: column; }

/* Phone field — country picker (flag + prefix) sits left of the number input. */
.phone-input {
  display: flex;
  align-items: stretch;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  transition: border-color 0.15s;
}
.phone-input:focus-within { border-color: var(--ink); background: var(--paper); }
.phone-input input {
  flex: 1;
  padding: 12px 14px;
  background: transparent;
  border: 0;
  outline: none;
  font-size: 15px;
  min-width: 0;
}

.phone-country { position: relative; }
.phone-country-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px 0 14px;
  border-right: 1px solid var(--line);
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  height: 100%;
  white-space: nowrap;
}
.phone-country-btn:hover { background: color-mix(in oklab, var(--ink) 4%, transparent); }
.phone-flag {
  font-size: 18px;
  line-height: 1;
  font-family: "Apple Color Emoji", "Segoe UI Emoji", "Noto Color Emoji", "Twemoji Mozilla", sans-serif;
}
.phone-prefix {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 500;
}
.phone-caret {
  font-size: 10px;
  color: var(--ink-3);
  margin-left: 2px;
}

.phone-country-list {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  width: 280px;
  max-height: 320px;
  overflow-y: auto;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  box-shadow: var(--shadow-lift);
  z-index: 50;
  list-style: none;
  margin: 0;
  padding: 4px;
}
.phone-country-list[hidden] { display: none; }
.phone-country-list li {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: 13.5px;
}
.phone-country-list li:hover { background: var(--cream-2); }
.phone-country-list .phone-country-name { flex: 1; }
.phone-country-list .phone-country-prefix {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink-3);
}

.pay-cta {
  width: 100%; margin-top: 12px;
  padding: 18px;
  background: var(--ink); color: var(--paper);
  border-radius: var(--r-md);
  font-size: 16px; font-weight: 500;
}
.pay-cta[disabled] { opacity: 0.4; cursor: not-allowed; }

/* Pay step — Maksekeskus */
.pay-methods { display: flex; flex-direction: column; gap: 8px; }
.pay-method {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; text-align: left;
  background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--r-md);
  cursor: pointer; transition: all 0.15s;
  width: 100%;
}
.pay-method:hover { border-color: var(--ink-3); }
.pay-method.active { border-color: var(--ink); background: var(--cream); }
.pay-method .pm-ico {
  flex-shrink: 0; width: 40px; height: 40px;
  border-radius: 10px; background: var(--cream);
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
}
.pay-method .pm-ico.bank { background: var(--mint); }
.pay-method .pm-ico.card { background: var(--peach); }
.pay-method .pm-ico.wallet {
  background: linear-gradient(135deg, #000 0%, #000 50%, #4285F4 50%, #4285F4 100%);
  color: var(--paper);
}
.pay-method .pm-ico.bank-transfer {
  background: var(--butter);
  color: var(--ink);
  font-weight: 700;
}

.track-not-found {
  margin-top: 18px;
  padding: 12px 14px;
  background: color-mix(in oklab, var(--coral) 16%, var(--cream));
  border: 1px solid color-mix(in oklab, var(--coral) 40%, transparent);
  border-radius: var(--r-sm);
  color: var(--ink);
  font-size: 13px;
  line-height: 1.45;
  text-align: left;
}

.bt-warning {
  margin-top: 16px;
  padding: 14px 16px;
  background: color-mix(in oklab, var(--paper) 75%, transparent);
  border-radius: var(--r-sm);
  font-size: 13px;
  color: var(--ink);
  line-height: 1.5;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bt-warning-row { display: flex; gap: 8px; align-items: flex-start; }

.bt-pending-note {
  background: var(--butter);
  border-radius: var(--r-md);
  padding: 14px 16px;
  font-size: 13px;
  color: var(--ink);
  line-height: 1.55;
}

.bank-transfer-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 20px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bank-transfer-card .bt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  border-bottom: 1px dashed var(--line);
  padding-bottom: 8px;
}
.bank-transfer-card .bt-row:last-child { border-bottom: 0; padding-bottom: 0; }
.bank-transfer-card .bt-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.bank-transfer-card .bt-value {
  font-size: 15px;
  font-weight: 500;
  color: var(--ink);
  text-align: right;
}
.bank-transfer-card .bt-value.mono {
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
}
.pay-method .pm-text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.pay-method .pm-t { font-size: 14.5px; font-weight: 500; color: var(--ink); }
.pay-method .pm-d { font-size: 12.5px; color: var(--ink-3); line-height: 1.4; }
.pay-method .pm-radio {
  flex-shrink: 0; width: 18px; height: 18px;
  border-radius: 50%; border: 1.5px solid var(--ink-3);
  position: relative;
}
.pay-method.active .pm-radio { border-color: var(--ink); }
.pay-method.active .pm-radio::after {
  content: ''; position: absolute; inset: 3px;
  border-radius: 50%; background: var(--ink);
}

.method-content { display: none; margin-top: 18px; }
.method-content.active { display: block; }

.bank-grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
}
.bank-tile {
  display: flex; align-items: center; gap: 10px;
  padding: 12px;
  background: var(--paper);
  border: 1.5px solid var(--line); border-radius: var(--r-sm);
  cursor: pointer; transition: all 0.15s;
  width: 100%;
}
.bank-tile:hover { border-color: var(--ink-3); }
.bank-tile.active { border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
.bank-mark {
  width: 32px; height: 32px;
  border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  color: white; font-weight: 700; font-size: 11px;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
/* Maksekeskus serves wide (landscape) logos — give them room and contain
   them so they aren't squished into the 32px square letter-mark box. */
.bank-mark.has-logo {
  width: 56px;
  background: var(--paper);
  border: 1px solid var(--line);
}
.bank-mark.has-logo img { max-width: 100%; max-height: 100%; object-fit: contain; display: block; }
.bank-name { font-size: 13.5px; font-weight: 500; }

/* Wallet express buttons, stacked full width under the CTA. Every pixel
   inside them belongs to Apple and Google: Safari draws the Apple button from
   -webkit-appearance, Google injects its own via createButton. We size the
   boxes and nothing else. 58px sits a hair above the .pay-cta (57px at
   current font metrics) because Google requires its button be no smaller
   than the buttons around it, and a font swap must not tip it under; the
   10px gap covers the mandated 8dp clear space. */
.wallet-express { display: flex; flex-direction: column; gap: 10px; margin-top: 10px; }
.wallet-express[hidden] { display: none; }
.wallet-express > * { width: 100%; height: 58px; }
.apple-pay-button {
  -webkit-appearance: -apple-pay-button;
  -apple-pay-button-type: pay;
  -apple-pay-button-style: black;
  cursor: pointer;
}

.agree {
  display: flex; gap: 10px; align-items: flex-start;
  margin-top: 20px; padding: 12px 14px;
  background: var(--cream); border-radius: var(--r-sm);
  font-size: 13px; color: var(--ink-2); line-height: 1.5;
  cursor: pointer;
}
.agree input { margin-top: 2px; flex-shrink: 0; }

/* Summary panel additions */
.tier-tag {
  display: inline-block; margin-left: 8px;
  padding: 2px 8px; border-radius: 999px;
  background: var(--mint); color: var(--ink);
  font-size: 10.5px; font-weight: 500;
  font-family: var(--font-mono); letter-spacing: 0.02em;
}
.summary-row .strike {
  margin-left: 8px; color: var(--ink-3);
  text-decoration: line-through;
  font-size: 12px;
}
/* Miniature polaroid frame beside the "Polaroid" line in the cart summary —
   thin sides/top, heavy bottom lip, echoing the real print. */
.polaroid-badge {
  display: inline-block;
  width: 11px; height: 13px;
  margin-right: 6px;
  vertical-align: -2px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-bottom-width: 4px;
  border-radius: 1px;
  box-shadow: 0 1px 2px -1px rgba(42,37,32,0.35);
}
.summary-row.savings { color: var(--mint-deep); font-weight: 500; }
.free-nudge {
  margin-top: 12px; padding: 10px 12px;
  background: var(--butter); border-radius: var(--r-sm);
  font-size: 12.5px; color: var(--ink); text-align: center;
}

/* Voucher / gift-card drawer — collapsed by default. */
.voucher-drawer {
  margin-top: 14px;
  border-top: 1px dashed var(--line);
  padding-top: 12px;
}
.voucher-drawer > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--ink-2);
}
.voucher-drawer > summary::-webkit-details-marker { display: none; }
.voucher-drawer > summary:hover { color: var(--ink); }
.voucher-summary-text { display: inline-flex; align-items: center; gap: 8px; }
.voucher-icon { font-size: 15px; }
.voucher-chevron {
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink-3);
  transition: transform 0.15s;
}
.voucher-drawer[open] .voucher-chevron { transform: rotate(45deg); }
.voucher-body { padding-top: 10px; }

.discount-entry { margin-top: 14px; }
.discount-form {
  display: flex; gap: 6px;
}
.discount-form input {
  flex: 1;
  padding: 9px 12px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  font-size: 13px;
  font-family: var(--font-mono);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  outline: none;
}
.discount-form input:focus { border-color: var(--ink); }
.discount-error {
  margin-top: 8px;
  font-size: 12px;
  color: var(--coral);
  line-height: 1.4;
}
.discount-applied {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px 6px 12px;
  background: var(--mint);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--ink);
  font-weight: 500;
}
.discount-applied button {
  width: 18px; height: 18px;
  border-radius: 50%;
  background: rgba(42,37,32,0.18);
  color: var(--ink);
  font-size: 12px;
  display: grid; place-items: center;
  line-height: 1;
}
.discount-applied button:hover { background: rgba(42,37,32,0.32); }

/* Done */
.done-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 56px;
  box-shadow: var(--shadow-soft);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.done-card .confetti-wrap {
  position: absolute; inset: 0;
  pointer-events: none;
  overflow: hidden;
}
.confetti-piece {
  position: absolute;
  width: 14px; height: 14px;
  animation: fall 2.4s cubic-bezier(0.4, 0, 0.6, 1) forwards;
}
@keyframes fall {
  0% { transform: translateY(-40px) rotate(0); opacity: 1; }
  100% { transform: translateY(680px) rotate(540deg); opacity: 0; }
}
.done-card .ico-big {
  width: 96px; height: 96px;
  border-radius: 50%;
  background: var(--mint);
  display: grid; place-items: center;
  margin: 0 auto 24px;
  font-family: var(--font-display); font-size: 42px;
}
.done-card h2 { font-size: 48px; }
.done-card p { color: var(--ink-2); margin-top: 14px; max-width: 480px; margin-left: auto; margin-right: auto; }
.done-card .order-no {
  display: inline-block;
  margin-top: 28px;
  padding: 10px 18px;
  background: var(--cream);
  border: 1px dashed var(--line);
  border-radius: var(--r-md);
  font-family: var(--font-mono);
  font-size: 14px;
  letter-spacing: 0.06em;
}
.done-cta-row { display: flex; gap: 12px; justify-content: center; margin-top: 32px; flex-wrap: wrap; }

/* Track */
/* Personalised "Aitäh, {name}!" greeting hero above the timeline. */
.track-greeting { margin-bottom: 30px; }
.track-greeting .eyebrow { margin-bottom: 14px; }
.track-greeting-h {
  font-family: var(--font-display);
  font-size: clamp(30px, 5vw, 44px);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.01em;
  color: var(--ink);
  text-wrap: balance;
  overflow-wrap: break-word;
}
.track-greeting-h em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(110deg, var(--peach-deep), var(--lilac-deep) 50%, var(--mint-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.08em;
  margin-right: -0.08em;
}
.track-greeting-sub {
  margin-top: 12px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--ink-2);
  max-width: 52ch;
}

.track-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; }

/* The bank-transfer card AND the tracking-number card are each rendered
   twice (above grid + inside right column); one copy is hidden per
   breakpoint so the urgent info surfaces above the stages on mobile. */
.track-awaiting-mobile,
.track-code-mobile { display: none; }
@media (max-width: 980px) {
  .track-awaiting-mobile { display: block; margin-bottom: 16px; }
  .track-code-mobile { display: block; margin-bottom: 16px; }
  .track-awaiting-desktop,
  .track-code-desktop { display: none; }
}
.track-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-xl);
  padding: 36px;
  box-shadow: var(--shadow-soft);
}
.track-eta {
  font-family: var(--font-display);
  font-size: 56px;
  letter-spacing: -0.03em;
  margin-bottom: 4px;
}
.track-eta em { font-style: italic; color: var(--peach-deep); font-weight: 400; }
.track-stages { margin-top: 36px; }
.track-stage {
  display: flex; gap: 16px; align-items: start;
  padding-bottom: 28px;
  position: relative;
}
.track-stage::before {
  content: ""; position: absolute;
  left: 14px; top: 32px; bottom: -8px;
  width: 2px; background: var(--line);
}
.track-stage:last-child::before { display: none; }
.track-stage .dot {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 2px solid var(--line);
  flex-shrink: 0;
}
.track-stage.done .dot { background: var(--mint); border-color: var(--mint-deep); }
.track-stage.active .dot {
  background: var(--peach);
  border-color: var(--peach-deep);
  box-shadow: 0 0 0 6px color-mix(in oklab, var(--peach) 30%, transparent);
}
.track-stage .label { font-size: 16px; font-weight: 500; }
.track-stage.pending .label { color: var(--ink-3); }
.track-stage .time { font-family: var(--font-mono); font-size: 11px; color: var(--ink-3); margin-top: 2px; letter-spacing: 0.06em; text-transform: uppercase; }

.locker-code {
  background: var(--ink); color: var(--paper);
  padding: 24px;
  border-radius: var(--r-lg);
  text-align: center;
}
.locker-code .l { font-size: 12px; color: color-mix(in oklab, var(--paper) 60%, transparent); text-transform: uppercase; letter-spacing: 0.1em; font-family: var(--font-mono); }
.locker-code .code {
  font-family: var(--font-mono);
  font-size: clamp(22px, 5.5vw, 32px);
  font-weight: 500;
  letter-spacing: 0.06em;
  margin: 10px 0 6px;
  overflow-wrap: anywhere;
}
.locker-code .d { font-size: 13px; color: color-mix(in oklab, var(--paper) 70%, transparent); margin-top: 8px; line-height: 1.5; }

.track-thumb { position: relative; }
.track-thumb .thumb-img {
  aspect-ratio: 1;
  background-size: cover; background-position: center;
  border-radius: 8px;
}
.track-thumb .thumb-meta {
  position: absolute; bottom: 4px; left: 4px;
  background: rgba(42,37,32,0.85); color: var(--paper);
  font-size: 9px; padding: 2px 6px; border-radius: 4px;
  font-family: var(--font-mono); letter-spacing: 0.04em;
}

/* Info pages (FAQ, Legal, Privacy, Cookies, Contact) */
.info-page { background: var(--cream); min-height: 100vh; }
.info-container {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 64px;
  padding: 72px 28px 120px;
  align-items: start;
}
.info-side { position: sticky; top: 96px; }
.info-side ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.info-side a {
  width: 100%;
  display: block;
  text-align: left;
  background: transparent;
  border: 0;
  padding: 10px 14px;
  border-radius: var(--r-sm);
  font: inherit;
  font-size: 15px;
  color: var(--ink-2);
  cursor: pointer;
  transition: all 0.15s;
}
.info-side a:hover { background: var(--paper); color: var(--ink); }
.info-side a.active { background: var(--ink); color: var(--paper); }
.info-main {
  background: var(--paper); border: 1px solid var(--line);
  border-radius: var(--r-xl); padding: 64px 72px; max-width: 820px;
}
.info-header { padding-bottom: 32px; border-bottom: 1px dashed var(--line); margin-bottom: 40px; }
.info-header h1 { font-family: var(--font-display); font-size: 56px; letter-spacing: -0.02em; line-height: 1.05; font-weight: 400; }
.info-header .info-sub { margin-top: 12px; font-size: 17px; color: var(--ink-2); font-style: italic; font-family: var(--font-display); font-weight: 300; }
.info-group { margin-top: 36px; }
.info-group:first-of-type { margin-top: 0; }
.info-group h3 { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; }
.faq-list { display: flex; flex-direction: column; gap: 0; }
.faq-item { border-top: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 1px solid var(--line); }
.faq-item > button {
  width: 100%; background: transparent; border: 0; padding: 20px 4px;
  text-align: left; font: inherit; font-size: 17px; font-weight: 500;
  color: var(--ink); cursor: pointer;
  display: flex; justify-content: space-between; align-items: center; gap: 16px;
}
.faq-item .chev { font-size: 22px; color: var(--ink-3); font-weight: 300; width: 20px; text-align: center; }
.faq-item.open .chev { color: var(--peach-deep); }
.faq-a { padding: 0 4px 22px; color: var(--ink-2); font-size: 15.5px; line-height: 1.6; max-width: 620px; display: none; }
.faq-item.open .faq-a { display: block; }
.info-sections section { margin-bottom: 36px; }
.info-sections h3 { font-family: var(--font-display); font-size: 24px; font-weight: 400; margin-bottom: 10px; }
.info-sections p { color: var(--ink-2); font-size: 15.5px; line-height: 1.65; max-width: 620px; }
.info-sections p + p { margin-top: 10px; }
.info-sections .info-list {
  margin: 10px 0 0;
  padding-left: 22px;
  max-width: 620px;
  color: var(--ink-2);
  font-size: 15.5px;
  line-height: 1.65;
}
.info-sections .info-list li { margin-bottom: 4px; }
.info-sections .info-list li strong { color: var(--ink); font-weight: 500; }
.info-sections a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.info-sections a:hover { color: var(--peach-deep); }
.info-contact { display: flex; flex-direction: column; gap: 0; }
.contact-row {
  display: grid; grid-template-columns: 200px 1fr; gap: 24px; padding: 18px 0;
  border-top: 1px solid var(--line); align-items: baseline;
}
.contact-row:last-child { border-bottom: 1px solid var(--line); }
.contact-row .label { font-family: var(--font-mono); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-3); }
.contact-row .value { font-family: var(--font-display); font-size: 22px; font-weight: 400; color: var(--ink); }
.info-footer { margin-top: 48px; padding-top: 24px; border-top: 1px dashed var(--line); }

.responsive-hide { display: none; }

/* Responsive */
@media (max-width: 980px) {
  .hero-grid, .app-grid, .track-grid, .locker-grid, .pay-grid { grid-template-columns: 1fr; }
  .size-grid, .pack-grid, .footer-grid { grid-template-columns: 1fr 1fr; gap: 14px; }
  .metrics { grid-template-columns: 1fr 1fr; }
  .metrics-item:nth-child(2) { border-right: 0; }
  .metrics-item:nth-child(1), .metrics-item:nth-child(2) { border-bottom: 1px solid var(--line); }
  .nav-links { display: none; }
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .size-card.pano { grid-column: span 2; }
}

@media (max-width: 880px) {
  .info-container { grid-template-columns: 1fr; gap: 24px; padding: 32px 20px 80px; }
  .info-side { position: static; }
  .info-side ul { flex-direction: row; flex-wrap: wrap; }
  .info-main { padding: 36px 28px; }
  .info-header h1 { font-size: 38px; }
  .contact-row { grid-template-columns: 1fr; gap: 4px; }
}

@media (max-width: 720px) {
  /* Stack the two-column section heads vertically with a tight rhythm —
     the parent flex-direction: column means the two cols become a single
     vertical chain (eyebrow → h2 → p → toggle), so the gap between cols
     needs to be small, not the desktop 48px. */
  .section-head { flex-direction: column; align-items: stretch; gap: 10px; margin-bottom: 28px; }
  .section-head .col { max-width: none; flex: 0 0 auto; }
  .section h2 { margin-top: 6px; }
  /* The .container's 32px → 20px transition happens at 600 below; bump to
     24px here so card grids breathe a little more on small tablets. */
  .container { padding: 0 24px; }
}

@media (max-width: 600px) {
  .container { padding: 0 20px; }
  .size-grid, .pack-grid, .footer-grid { grid-template-columns: 1fr; }
  .size-card.pano { grid-column: span 1; }
  .stepper .step .l { display: none; }
  .step-card { padding: 24px; }
  .hero { padding: 32px 0 56px; }
  /* The two hero CTAs are `white-space: nowrap`; side-by-side the long
     Estonian/Russian "See how it works" label runs off the right edge (the
     hero clips it). Stack them full-width on phones so both stay readable. */
  .hero-ctas { flex-direction: column; align-items: stretch; }
  .hero-ctas .btn { width: 100%; }
  .section { padding: 64px 0; }
  /* Tighten card padding on small phones so content has breathing room. */
  .size-card, .quality-card, .uc-card, .pack-card { padding: 20px; }
  .vs-block { padding: 22px 22px 20px; }
  .cta-band { padding: 56px 0; }
  /* Compact nav so the order-CTA button doesn't overflow on a 375px screen.
     Logo + 12px gap + dropdown (~50px) + 10px gap + button (~110px) fits
     comfortably inside ~335px of usable container width. */
  .nav-inner { height: 60px; gap: 12px; }
  .nav-logo { font-size: 20px; gap: 8px; }
  .nav-logo .mark { width: 22px; height: 22px; }
  .nav-logo .mark::after { inset: 5px; }
  .nav-right { gap: 10px; }
  .nav-right .btn-sm { padding: 8px 12px; font-size: 13px; }
  .lang-switch summary { padding: 5px 9px 5px 11px; }
}

/* ── Error pages (404, 500) ─────────────────────────────────────── */
.er-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.er-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 78% 38%, color-mix(in oklab, var(--coral) 22%, transparent), transparent 50%),
    radial-gradient(ellipse at 18% 82%, color-mix(in oklab, var(--butter-deep) 18%, transparent), transparent 55%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, color-mix(in oklab, var(--ink) 6%, transparent) 100%);
  pointer-events: none;
  z-index: 0;
}
.er-nav {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--cream) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
}
.er-nav .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 72px; }
.er-nav .nav-right { display: flex; align-items: center; gap: 18px; }
.er-main { flex: 1; position: relative; z-index: 2; padding: 56px 0 96px; }
.er-grid {
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 56px;
  align-items: center;
  min-height: 70vh;
}
.er-stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 7px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in oklab, var(--coral) 22%, transparent);
  transform: rotate(-2deg);
}
.er-stamp .blink {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--coral);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--coral) 24%, transparent);
  animation: pulse 1.4s ease-in-out infinite;
}
.er-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6.4vw, 88px);
  letter-spacing: -0.035em;
  line-height: 1.02;
  margin-top: 24px;
  text-wrap: balance;
}
.er-h1 em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(110deg, var(--coral), var(--peach-deep) 50%, var(--butter-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.er-lead {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 460px;
  margin-top: 22px;
  line-height: 1.55;
  text-wrap: pretty;
}
.er-ctas { display: flex; gap: 12px; margin-top: 32px; flex-wrap: wrap; }

.er-stage-wrap { position: relative; height: 640px; }

.er-printer {
  position: absolute;
  top: 200px;
  left: 50%;
  transform: translateX(-50%);
  width: 460px;
  height: 280px;
  background: linear-gradient(180deg, #1f1814 0%, #14100d 100%);
  border-radius: 18px;
  box-shadow:
    0 30px 70px -20px rgba(20, 14, 10, 0.5),
    inset 0 1px 0 rgba(255,255,255,0.08);
  z-index: 4;
}
.er-printer::before {
  content: "";
  position: absolute;
  left: 28px; right: 28px; top: 24px;
  height: 80px;
  background: #2a201a;
  border-radius: 8px;
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.5);
}
.er-printer .readout {
  position: absolute;
  left: 40px; top: 36px;
  width: 200px; height: 56px;
  background: #0a0705;
  border-radius: 4px;
  padding: 10px 12px;
  box-shadow: inset 0 0 0 1px rgba(255, 130, 80, 0.25);
  display: flex; flex-direction: column; gap: 4px;
  justify-content: center;
}
.er-printer .readout .line1 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--coral);
  animation: er-flick 1.6s steps(1) infinite;
}
.er-printer .readout .line2 {
  font-family: var(--font-mono);
  font-size: 10px;
  color: color-mix(in oklab, var(--coral) 60%, transparent);
  letter-spacing: 0.08em;
}
@keyframes er-flick {
  0%, 88%, 100% { opacity: 1; }
  90%, 96% { opacity: 0.35; }
}
.er-printer .leds {
  position: absolute;
  right: 44px; top: 50px;
  display: flex; gap: 10px;
}
.er-printer .leds span {
  width: 9px; height: 9px; border-radius: 50%;
  background: #1a1410;
  box-shadow: inset 0 1px 1px rgba(0,0,0,0.6);
}
.er-printer .leds .on-r { background: var(--coral); box-shadow: 0 0 8px var(--coral); }
.er-printer .leds .on-y { background: var(--butter-deep); box-shadow: 0 0 8px var(--butter-deep); animation: pulse 1.2s ease-in-out infinite; }
.er-printer .slot {
  position: absolute;
  left: 50%; bottom: -10px;
  transform: translateX(-50%);
  width: 320px; height: 14px;
  background: #0a0705;
  border-radius: 2px;
  box-shadow:
    inset 0 2px 4px rgba(0,0,0,0.8),
    0 -1px 0 rgba(255,255,255,0.05);
}
.er-printer .label {
  position: absolute;
  right: 28px; bottom: 22px;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 18px;
  color: color-mix(in oklab, var(--paper) 30%, transparent);
  letter-spacing: -0.01em;
}
.er-printer .label small {
  display: block;
  font-family: var(--font-mono);
  font-style: normal;
  font-size: 9px;
  letter-spacing: 0.15em;
  color: color-mix(in oklab, var(--paper) 18%, transparent);
  margin-top: 3px;
  text-transform: uppercase;
}

.er-photo {
  position: absolute;
  top: 470px;
  left: 50%;
  transform: translateX(-50%) rotate(2deg);
  width: 280px;
  height: 200px;
  background: var(--paper);
  padding: 12px 12px 36px;
  box-shadow: var(--shadow-photo);
  border-radius: 2px;
  z-index: 3;
}
.er-photo::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: -6px;
  height: 12px;
  background: var(--paper);
  clip-path: polygon(
    0 100%, 4% 30%, 8% 100%, 12% 20%, 16% 100%, 20% 40%,
    24% 100%, 28% 25%, 32% 100%, 36% 35%, 40% 100%, 44% 15%,
    48% 100%, 52% 30%, 56% 100%, 60% 25%, 64% 100%, 68% 40%,
    72% 100%, 76% 20%, 80% 100%, 84% 30%, 88% 100%, 92% 25%, 96% 100%, 100% 35%
  );
}
.er-photo .img {
  width: 100%; height: 100%;
  border-radius: 1px;
  position: relative;
  overflow: hidden;
  background:
    linear-gradient(125deg,
      color-mix(in oklab, var(--peach) 80%, transparent) 0%,
      color-mix(in oklab, var(--butter) 70%, transparent) 35%,
      color-mix(in oklab, var(--rose) 75%, transparent) 70%,
      color-mix(in oklab, var(--lilac) 70%, transparent) 100%);
}
.er-photo .num {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-family: var(--font-display);
  font-style: italic;
  font-weight: 400;
  font-size: 120px;
  letter-spacing: -0.04em;
  color: var(--ink);
  mix-blend-mode: multiply;
  opacity: 0.78;
}
.er-photo .img::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(90deg,
      transparent 0 14px,
      color-mix(in oklab, var(--coral) 50%, transparent) 14px 15px,
      transparent 15px 28px,
      color-mix(in oklab, var(--lilac-deep) 40%, transparent) 28px 29px,
      transparent 29px 46px),
    radial-gradient(ellipse at 30% 70%, color-mix(in oklab, var(--ink) 35%, transparent), transparent 45%),
    radial-gradient(ellipse at 80% 25%, color-mix(in oklab, var(--coral) 60%, transparent), transparent 50%);
  mix-blend-mode: multiply;
  opacity: 0.55;
}
.er-photo .cap {
  position: absolute;
  bottom: 8px; left: 18px; right: 18px;
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-2);
  text-align: center;
}

.er-tag {
  position: absolute;
  top: 130px;
  right: 30px;
  width: 130px;
  padding: 14px 12px 16px;
  background: var(--butter);
  border: 1px solid color-mix(in oklab, var(--butter-deep) 60%, transparent);
  border-radius: 4px;
  transform: rotate(7deg);
  box-shadow: var(--shadow-soft);
  z-index: 5;
  text-align: center;
}
.er-tag::before {
  content: "";
  position: absolute;
  left: 50%; top: -1px;
  transform: translate(-50%, -50%);
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--cream);
  border: 1.5px solid color-mix(in oklab, var(--butter-deep) 60%, transparent);
}
.er-tag .t {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-2);
  margin-bottom: 4px;
}
.er-tag .v {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 28px;
  line-height: 1;
  color: var(--ink);
}

.er-note {
  position: absolute;
  bottom: 30px;
  left: 30px;
  font-family: "Caveat", cursive;
  font-size: 24px;
  color: var(--ink);
  transform: rotate(-4deg);
  z-index: 6;
  max-width: 180px;
  line-height: 1.1;
}
.er-note .arrow {
  display: block;
  margin: 6px 0 0 30px;
  width: 50px;
  height: 40px;
  border-right: 2px solid var(--ink);
  border-top: 2px solid var(--ink);
  border-radius: 0 30px 0 0;
  transform: rotate(28deg);
  position: relative;
}
.er-note .arrow::after {
  content: "";
  position: absolute;
  right: -1px; top: -1px;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-top-color: var(--ink);
  border-right-color: var(--ink);
  transform: rotate(18deg) translate(2px, -2px);
}

.er-foot {
  position: relative;
  z-index: 2;
  border-top: 1px dashed var(--line);
  padding: 22px 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.er-foot .ts { text-transform: uppercase; }

@media (max-width: 980px) {
  .er-grid { grid-template-columns: 1fr; gap: 24px; }
  .er-stage-wrap { height: 560px; width: 100%; max-width: 520px; justify-self: center; }
  .er-printer { width: 400px; top: 170px; }
  .er-photo { top: 430px; }
  .er-tag { right: 0; top: 100px; }
  .er-note { left: 10px; bottom: 10px; }
}
@media (max-width: 600px) {
  .er-stage-wrap { height: 480px; }
  .er-printer { width: 300px; height: 220px; top: 140px; }
  .er-printer .readout { width: 150px; height: 44px; left: 28px; top: 28px; }
  .er-printer .leds { right: 28px; top: 40px; }
  .er-printer .slot { width: 220px; }
  .er-printer .label { font-size: 14px; right: 18px; bottom: 16px; }
  .er-photo { width: 220px; height: 160px; top: 360px; }
  .er-photo .num { font-size: 92px; }
  .er-tag { width: 100px; top: 80px; right: -4px; }
  .er-tag .v { font-size: 22px; }
  .er-note { font-size: 18px; max-width: 140px; }
}

/* ── Quality / Why us ───────────────────────────────────────────── */
.quality-wrap { background: var(--cream); border-top: 1px solid var(--line); }
.quality-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
  margin-top: 48px;
}
.quality-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 26px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.quality-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.quality-ico {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 24px;
  background: var(--cream-2);
  border: 1px solid var(--line);
}
.quality-card.q-1 .quality-ico { background: var(--peach); border-color: transparent; }
.quality-card.q-2 .quality-ico { background: var(--mint);  border-color: transparent; }
.quality-card.q-3 .quality-ico { background: var(--lilac); border-color: transparent; }
.quality-card.q-4 .quality-ico { background: var(--butter); border-color: transparent; }
.quality-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.quality-card p {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  flex: 1;
}
.quality-spec {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--ink-3);
  letter-spacing: 0.04em;
}

@media (max-width: 980px) {
  .quality-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
  .quality-grid { grid-template-columns: 1fr; }
}

/* ── Use cases (gift, wedding, baby, family, travel, wall art) ──── */
.use-cases-wrap { background: var(--paper); border-top: 1px solid var(--line); }
.use-cases-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.uc-card {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 26px 24px 22px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.uc-card:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-soft);
}
.uc-ico {
  width: 44px; height: 44px;
  border-radius: 12px;
  display: grid; place-items: center;
  font-family: var(--font-display);
  font-size: 22px;
  background: var(--cream-2);
  border: 1px solid var(--line);
}
.uc-gift   .uc-ico { background: var(--butter); border-color: transparent; }
.uc-wedding .uc-ico { background: var(--rose);   border-color: transparent; }
.uc-baby   .uc-ico { background: var(--mint);   border-color: transparent; }
.uc-family .uc-ico { background: var(--peach);  border-color: transparent; }
.uc-travel .uc-ico { background: var(--sky);    border-color: transparent; }
.uc-wall   .uc-ico { background: var(--lilac);  border-color: transparent; }
.uc-card h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 22px;
  letter-spacing: -0.015em;
  line-height: 1.15;
}
.uc-card p {
  color: var(--ink-2);
  font-size: 14.5px;
  line-height: 1.55;
  flex: 1;
}
.uc-recommend {
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px dashed var(--line);
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.uc-recommend-label {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
}
.uc-recommend-value {
  font-size: 13px;
  color: var(--ink);
  font-weight: 500;
}
@media (max-width: 980px) { .use-cases-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .use-cases-grid { grid-template-columns: 1fr; } }

/* ── Quality vs koduprinter mini-comparison ─────────────────────── */
.vs-block {
  margin-top: 48px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 30px 32px 28px;
}
.vs-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 18px;
}
.vs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  align-items: start;
}
.vs-col { display: flex; flex-direction: column; gap: 12px; }
.vs-head {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-size: 18px;
  font-weight: 500;
  letter-spacing: -0.01em;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}
.vs-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 13px;
  font-weight: 700;
  background: var(--mint);
  color: var(--mint-deep);
  border: 1px solid var(--mint-deep);
}
.vs-mark-x {
  background: color-mix(in oklab, var(--coral) 18%, transparent);
  color: var(--coral);
  border-color: color-mix(in oklab, var(--coral) 50%, transparent);
}
.vs-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.vs-col li {
  position: relative;
  padding-left: 18px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--ink-2);
}
.vs-us li::before {
  content: "+"; position: absolute; left: 0; top: 0;
  color: var(--mint-deep); font-weight: 700;
}
.vs-them li::before {
  content: "−"; position: absolute; left: 0; top: 0;
  color: var(--coral); font-weight: 700;
}
@media (max-width: 720px) {
  .vs-grid { grid-template-columns: 1fr; gap: 24px; }
}

/* ── Testimonials (hidden behind @show_testimonials until real ones land) */
.testimonials-wrap { background: var(--cream); border-top: 1px solid var(--line); }
.testimonials-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
}
.t-card {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 28px 26px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
}
.t-stars {
  color: var(--butter-deep);
  font-size: 16px;
  letter-spacing: 0.08em;
}
.t-quote {
  font-family: var(--font-display);
  font-size: 18px;
  letter-spacing: -0.005em;
  line-height: 1.45;
  color: var(--ink);
  margin: 0;
  flex: 1;
  font-style: italic;
}
.t-attribution {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px dashed var(--line);
}
.t-initials {
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 500;
}
.t-name { font-size: 14px; font-weight: 500; color: var(--ink); }
.t-context { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ink-3); margin-top: 2px; }
@media (max-width: 980px) { .testimonials-grid { grid-template-columns: 1fr; } }

/* ── Coverage (15 maakonnad, real locker counts, city keywords) ─── */
.coverage-wrap {
  background: var(--cream);
  border-top: 1px solid var(--line);
}
.coverage-wrap .section-head p { color: var(--ink-2); font-size: 16px; line-height: 1.55; }
.coverage-wrap .section-head p strong { color: var(--ink); font-weight: 600; }
.coverage-grid {
  margin-top: 36px;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
}
.coverage-county {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 0.18s ease, border-color 0.18s ease;
}
.coverage-county:hover {
  transform: translateY(-2px);
  border-color: var(--ink);
}
.cc-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
}
.cc-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0;
}
.cc-count {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.cc-cities {
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.45;
}
/* Cities with a landing page link out from the coverage grid — keep them
   visually close to the plain city names, just underlined + ink on hover. */
.cc-city-link {
  color: var(--ink);
  text-decoration: underline;
  text-decoration-color: var(--line);
  text-underline-offset: 2px;
  transition: text-decoration-color 0.15s;
}
.cc-city-link:hover { text-decoration-color: var(--peach-deep); }

/* Related-landings — in-content cross-cluster links at the foot of a landing. */
.related-landings {
  border-top: 1px solid var(--line);
  background: var(--cream);
  padding: 44px 0 12px;
}
.related-links {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 12px;
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
}
.related-link {
  display: inline-block;
  padding: 8px 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  color: var(--ink-2);
  font-size: 14px;
  text-decoration: none;
  transition: color 0.15s, border-color 0.15s, background 0.15s;
}
.related-link:hover {
  color: var(--ink);
  border-color: var(--ink-3);
  background: var(--cream-2);
}

@media (max-width: 1100px) {
  .coverage-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 720px) {
  .coverage-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── FAQ teaser ─────────────────────────────────────────────────── */
.faq-teaser-wrap { background: var(--paper); border-top: 1px solid var(--line); }
.faq-teaser-list {
  margin-top: 36px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 880px;
}
/* Boxed-card teaser variant. Re-uses .faq-item / .faq-a from the main FAQ
   page, so the existing one-open-at-a-time Stimulus controller works as-is. */
.faq-teaser-list .faq-item {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
  margin: 0;
  transition: border-color 0.2s ease, background 0.2s ease;
}
.faq-teaser-list .faq-item.open {
  border-color: var(--ink);
  background: var(--paper);
}
.faq-teaser-list .faq-item > button {
  width: 100%;
  background: transparent;
  border: 0;
  padding: 20px 22px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  cursor: pointer;
  font-family: inherit;
  text-align: left;
}
.faq-teaser-list .faq-item > button > span:first-child {
  font-family: var(--font-display);
  font-size: 19px;
  letter-spacing: -0.01em;
  line-height: 1.3;
  color: var(--ink);
}
.faq-teaser-list .faq-item .chev {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 1px solid var(--line);
  display: grid; place-items: center;
  font-family: var(--font-mono);
  font-size: 18px;
  color: var(--ink-2);
  flex-shrink: 0;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.faq-teaser-list .faq-item.open .chev {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}
.faq-teaser-list .faq-a {
  padding: 0 22px 22px;
  color: var(--ink-2);
  font-size: 15px;
  line-height: 1.6;
  max-width: 720px;
}

/* ── CTA band (reusable, light/dark variants) ───────────────────── */
.cta-band {
  padding: 72px 0;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.cta-band-light { background: var(--cream-2); }
.cta-band-dark {
  background: var(--ink);
  color: var(--paper);
  border-color: color-mix(in oklab, var(--paper) 12%, transparent);
}
.cta-band-inner {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 36px;
  align-items: center;
}
.cta-band-eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 14px;
}
.cta-band-dark .cta-band-eyebrow { color: color-mix(in oklab, var(--paper) 55%, transparent); }
.cta-band-title {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.6vw, 44px);
  letter-spacing: -0.025em;
  line-height: 1.1;
  margin: 0;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.cta-band-title em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(110deg, var(--coral), var(--peach-deep) 60%, var(--butter-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cta-band-dark .cta-band-title { color: var(--paper); }
.cta-band-sub {
  margin-top: 14px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink-2);
  max-width: 520px;
}
.cta-band-dark .cta-band-sub { color: color-mix(in oklab, var(--paper) 75%, transparent); }
.cta-band-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}
.cta-band-actions .btn-primary {
  font-size: 16px;
  padding: 14px 22px;
}
.cta-band-dark .btn-primary {
  background: var(--butter);
  color: var(--ink);
}
.cta-band-dark .btn-primary:hover { box-shadow: 0 14px 30px -12px rgba(232, 184, 75, 0.5); }
.cta-band-extra {
  font-family: var(--font-mono);
  font-size: 11.5px;
  letter-spacing: 0.04em;
  color: var(--ink-3);
}
.cta-band-dark .cta-band-extra { color: color-mix(in oklab, var(--paper) 55%, transparent); }

@media (max-width: 980px) {
  .cta-band-inner { grid-template-columns: 1fr; gap: 22px; }
  .cta-band-actions { flex-direction: row; align-items: center; flex-wrap: wrap; }
}

/* ── Cookie consent banner ──────────────────────────────────────── */

/* Wrapper is fixed at the bottom of the viewport; the banner and drawer
   nodes inside it swap visibility. Above .order-notch (60) and .lang-menu
   (100) — consent should be on top. */
.cookie-consent {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: 200;
  display: flex;
  justify-content: center;
  padding: 14px;
  padding-bottom: calc(14px + env(safe-area-inset-bottom));
  pointer-events: none;
}
.cookie-consent[hidden] { display: none; }
.cookie-banner, .cookie-drawer {
  pointer-events: auto;
  width: 100%;
  max-width: 720px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  box-shadow:
    0 30px 60px -20px rgba(42, 37, 32, 0.28),
    0 4px 12px -4px rgba(42, 37, 32, 0.10);
  padding: 24px 26px 20px;
}
.cookie-banner[hidden], .cookie-drawer[hidden] { display: none; }

.cookie-banner-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
}
.cookie-banner-ico {
  font-size: 24px;
  line-height: 1;
}
.cookie-banner-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.015em;
  margin: 0;
}
.cookie-banner-intro {
  margin: 0 0 16px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink-2);
}
.cookie-banner-link {
  color: var(--ink);
  text-decoration: underline;
  text-underline-offset: 2px;
  white-space: nowrap;
}
.cookie-banner-actions {
  display: flex;
  gap: 12px;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 4px;
}
/* Accept stays the primary visual action — right-anchored with a soft
   shadow — but sized like a normal pill button instead of stretching to
   fill the row. */
.cookie-banner-actions .cookie-action-accept {
  flex: 0 0 auto;
  margin-left: auto;
  padding: 10px 18px;
  font-size: 14px;
  font-weight: 500;
  box-shadow: 0 6px 16px -10px rgba(42, 37, 32, 0.45);
}
.cookie-banner-actions .cookie-action-accept:hover {
  transform: translateY(-1px);
  box-shadow: 0 12px 26px -12px rgba(42, 37, 32, 0.5);
}
/* Reject stays a real, clickable button — never hidden, never disabled —
   but reads as a quiet secondary choice rather than an equal counterweight.
   Underline keeps it obviously interactive for screen readers + GDPR. */
.cookie-action-reject {
  background: transparent;
  border: 0;
  padding: 8px 6px;
  font: inherit;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink-3);
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
  transition: color 0.15s ease;
}
.cookie-action-reject:hover { color: var(--ink-2); }
.cookie-banner-customize {
  display: block;
  width: 100%;
  margin-top: 12px;
  padding: 4px;
  background: transparent;
  border: 0;
  cursor: pointer;
  font: inherit;
  font-size: 13px;
  color: var(--ink-3);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-align: center;
}
.cookie-banner-customize:hover { color: var(--ink); }

/* Drawer */
.cookie-drawer { max-width: 600px; padding: 22px 22px 18px; }
.cookie-drawer-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 12px;
  margin-bottom: 16px;
}
.cookie-drawer-head h3 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: 20px;
  letter-spacing: -0.015em;
  margin: 0 0 6px;
}
.cookie-drawer-intro { font-size: 13.5px; color: var(--ink-2); line-height: 1.55; margin: 0; }
.cookie-drawer-close {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--cream-2);
  border: 1px solid var(--line);
  font-size: 18px;
  line-height: 1;
  color: var(--ink-2);
  cursor: pointer;
  flex-shrink: 0;
}
.cookie-drawer-close:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.cookie-cat-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-height: 50vh;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  margin: -4px -4px 16px;
  padding: 4px;
}
.cookie-cat {
  display: block;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 14px 16px;
  cursor: pointer;
}
.cookie-cat:first-child { cursor: default; }
.cookie-cat-head {
  display: flex;
  justify-content: space-between;
  align-items: start;
  gap: 14px;
}
.cookie-cat h4 {
  font-family: var(--font-sans);
  font-size: 14px;
  font-weight: 600;
  margin: 0 0 4px;
  color: var(--ink);
}
.cookie-cat p {
  margin: 0;
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.5;
}
.cookie-cat-lock {
  flex-shrink: 0;
  align-self: center;
}
.cookie-cat-lock-text {
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--mint-deep);
  background: color-mix(in oklab, var(--mint) 35%, transparent);
  border: 1px solid color-mix(in oklab, var(--mint-deep) 30%, transparent);
  padding: 4px 8px;
  border-radius: 999px;
  white-space: nowrap;
}

/* Toggle switch */
.cookie-toggle {
  position: relative;
  flex-shrink: 0;
  align-self: center;
  width: 38px;
  height: 22px;
}
.cookie-toggle input {
  position: absolute;
  inset: 0;
  margin: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
  z-index: 2;
}
.cookie-toggle-track {
  position: absolute;
  inset: 0;
  background: var(--cream-2);
  border: 1px solid var(--line);
  border-radius: 999px;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.cookie-toggle-track::after {
  content: "";
  position: absolute;
  top: 1px; left: 1px;
  width: 18px; height: 18px;
  background: var(--paper);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(42, 37, 32, 0.18);
  transition: transform 0.18s ease;
}
.cookie-toggle input:checked + .cookie-toggle-track {
  background: var(--ink);
  border-color: var(--ink);
}
.cookie-toggle input:checked + .cookie-toggle-track::after {
  transform: translateX(16px);
}

.cookie-drawer-actions {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.cookie-drawer-actions .btn { flex: 1 1 0; min-width: 0; padding: 11px 16px; font-size: 14px; }

/* Footer button styled like the surrounding <a> links */
.footer-link-btn {
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
  font-size: 14px;
  color: color-mix(in oklab, var(--paper) 70%, transparent);
  transition: color 0.15s ease;
}
.footer-link-btn:hover { color: var(--paper); }
.footer.footer-light .footer-link-btn { color: var(--ink-2); }
.footer.footer-light .footer-link-btn:hover { color: var(--ink); }

@media (max-width: 600px) {
  .cookie-consent { padding: 10px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); }
  .cookie-banner, .cookie-drawer { padding: 18px 18px 14px; }
  .cookie-banner-head h3 { font-size: 18px; }
  .cookie-banner-intro { font-size: 13.5px; }
  .cookie-banner-actions .cookie-action-accept { padding: 10px 16px; font-size: 13.5px; }
  .cookie-action-reject { font-size: 12.5px; padding: 6px 4px; }
  .cookie-drawer-actions .btn { padding: 10px 14px; font-size: 13.5px; }
}

/* ── Coming soon placeholder ────────────────────────────────────────── */
/* Active when Pigmenta.coming_soon? === true. Layout/styling is pulled
   verbatim from the design bundle. Tweaks: drops the social-icon row,
   relies on the project's brand palette + font stack via CSS variables. */
.cs-page {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.cs-page::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(ellipse at 80% 30%, color-mix(in oklab, var(--peach) 22%, transparent), transparent 52%),
    radial-gradient(ellipse at 16% 80%, color-mix(in oklab, var(--lilac) 18%, transparent), transparent 55%),
    radial-gradient(ellipse at 50% 50%, transparent 55%, color-mix(in oklab, var(--ink) 5%, transparent) 100%);
  pointer-events: none;
  z-index: 0;
}
.cs-nav {
  position: relative;
  z-index: 5;
  border-bottom: 1px solid color-mix(in oklab, var(--line) 70%, transparent);
  background: color-mix(in oklab, var(--cream) 88%, transparent);
  backdrop-filter: blur(14px) saturate(1.1);
}
.cs-main {
  flex: 1;
  position: relative;
  z-index: 2;
  padding: 56px 0 88px;
}
.cs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
  align-items: center;
  min-height: 72vh;
}
.cs-grid > * { min-width: 0; }

/* Left column */
.cs-stamp {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 14px 7px;
  border: 1.5px solid var(--ink);
  border-radius: 999px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink);
  background: color-mix(in oklab, var(--butter) 35%, transparent);
  transform: rotate(-2deg);
}
.cs-stamp .blink {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--mint-deep);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--mint-deep) 24%, transparent);
  animation: pulse 2s ease-in-out infinite;
}
.cs-h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(48px, 6.6vw, 92px);
  letter-spacing: -0.035em;
  line-height: 1.0;
  margin-top: 24px;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.cs-h1 em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(110deg, var(--peach-deep), var(--lilac-deep) 50%, var(--mint-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.cs-lead {
  font-size: 18px;
  color: var(--ink-2);
  max-width: 460px;
  margin-top: 22px;
  line-height: 1.55;
  text-wrap: pretty;
}
.cs-form {
  margin-top: 32px;
  max-width: 460px;
}
.cs-field {
  display: flex;
  gap: 10px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 6px 6px 6px 20px;
  box-shadow: var(--shadow-soft);
  transition: border-color 0.18s, box-shadow 0.18s;
}
.cs-field:focus-within {
  border-color: var(--peach-deep);
  box-shadow: 0 0 0 4px color-mix(in oklab, var(--peach) 30%, transparent);
}
.cs-field input {
  flex: 1;
  border: 0;
  outline: 0;
  background: 0;
  font-size: 15.5px;
  min-width: 0;
}
.cs-field input::placeholder { color: var(--ink-3); }
.cs-field button {
  flex-shrink: 0;
  white-space: nowrap;
}
.cs-hint {
  margin-top: 12px;
  font-size: 13px;
  color: var(--ink-3);
  padding-left: 4px;
}
.cs-success {
  margin-top: 32px;
  max-width: 460px;
  display: none;
  align-items: center;
  gap: 14px;
  padding: 18px 22px;
  background: color-mix(in oklab, var(--mint) 40%, var(--paper));
  border: 1px solid var(--mint-deep);
  border-radius: var(--r-lg);
  box-shadow: var(--shadow-soft);
}
.cs-success.on { display: flex; }
.cs-success .tick {
  flex-shrink: 0;
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--mint-deep);
  display: grid; place-items: center;
  color: #fff;
  font-size: 18px;
}
.cs-success .st { font-weight: 500; color: var(--ink); }
.cs-success .ss { font-size: 13.5px; color: var(--ink-2); }
.cs-perks {
  display: flex;
  gap: 28px;
  margin-top: 36px;
  flex-wrap: wrap;
}
.cs-perk { display: flex; flex-direction: column; gap: 2px; }
.cs-perk .pk {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 26px;
  color: var(--ink);
  line-height: 1;
}
.cs-perk .pl {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-3);
}

/* Right column — developing photo */
.cs-stage-wrap { position: relative; height: 600px; }
.cs-card {
  position: absolute;
  top: 60px;
  left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  width: 360px;
  height: 430px;
  background: var(--paper);
  padding: 16px 16px 70px;
  box-shadow: var(--shadow-lift);
  border-radius: 4px;
  z-index: 4;
}
.cs-card .frame {
  width: 100%; height: 100%;
  border-radius: 2px;
  position: relative;
  overflow: hidden;
  background: #0d0a08;
}
.cs-card .frame .pic {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at 28% 30%, color-mix(in oklab, var(--butter) 90%, transparent), transparent 45%),
    radial-gradient(circle at 75% 28%, color-mix(in oklab, var(--peach) 92%, transparent), transparent 48%),
    radial-gradient(circle at 70% 78%, color-mix(in oklab, var(--rose) 88%, transparent), transparent 50%),
    radial-gradient(circle at 25% 80%, color-mix(in oklab, var(--lilac) 85%, transparent), transparent 52%),
    linear-gradient(160deg, var(--mint) 0%, var(--sky) 100%);
}
.cs-card .frame .develop {
  position: absolute;
  inset: 0;
  background: #161210;
  animation: cs-develop 6s ease-in-out infinite;
}
@keyframes cs-develop {
  0%   { opacity: 0.96; }
  45%  { opacity: 0.12; }
  75%  { opacity: 0.12; }
  100% { opacity: 0.96; }
}
.cs-card .frame .grain {
  position: absolute; inset: 0;
  background-image: repeating-linear-gradient(115deg, transparent 0 5px, rgba(255,255,255,0.02) 5px 7px);
  mix-blend-mode: screen;
}
.cs-card .cap {
  position: absolute;
  bottom: 24px; left: 18px; right: 18px;
  font-family: "Caveat", cursive;
  font-size: 26px;
  font-weight: 500;
  color: #2b3a52;
  text-align: center;
}
.cs-card .stamp-mono {
  position: absolute;
  top: 18px; left: 20px;
  font-family: var(--font-mono);
  font-size: 9.5px;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  z-index: 3;
}
.cs-card .tape {
  position: absolute;
  width: 90px; height: 24px;
  top: -11px; left: 50%;
  transform: translateX(-50%) rotate(-3deg);
  background: color-mix(in oklab, var(--butter) 60%, transparent);
  border-left: 1px dashed color-mix(in oklab, var(--ink) 12%, transparent);
  border-right: 1px dashed color-mix(in oklab, var(--ink) 12%, transparent);
  z-index: 3;
}
.cs-mini {
  position: absolute;
  width: 130px; height: 150px;
  background: var(--paper);
  padding: 10px 10px 28px;
  box-shadow: var(--shadow-photo);
  border-radius: 3px;
  z-index: 3;
}
.cs-mini .mf { width: 100%; height: 100%; border-radius: 2px; }
.cs-mini.a { top: 10px; left: -10px; transform: rotate(-10deg); }
.cs-mini.a .mf { background: linear-gradient(140deg, var(--mint), var(--sky-deep)); }
.cs-mini.b { bottom: 20px; right: 0; transform: rotate(8deg); }
.cs-mini.b .mf { background: linear-gradient(140deg, var(--peach), var(--rose-deep)); }
.cs-mini.c { bottom: 40px; left: 0; transform: rotate(5deg); z-index: 2; }
.cs-mini.c .mf { background: linear-gradient(140deg, var(--butter), var(--peach-deep)); }

.cs-note {
  position: absolute;
  top: 0;
  right: 20px;
  font-family: "Caveat", cursive;
  font-size: 25px;
  color: var(--ink);
  transform: rotate(6deg);
  z-index: 6;
  max-width: 170px;
  line-height: 1.05;
  text-align: center;
}
.cs-note .arrow {
  display: block;
  margin: 4px auto 0;
  width: 56px; height: 38px;
  border-left: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  border-radius: 0 0 0 30px;
  transform: rotate(-18deg) translateX(8px);
  position: relative;
}
.cs-note .arrow::after {
  content: "";
  position: absolute;
  left: -1px; bottom: -1px;
  width: 0; height: 0;
  border: 6px solid transparent;
  border-bottom-color: var(--ink);
  border-left-color: var(--ink);
  transform: rotate(-22deg) translate(-2px, 2px);
}
.cs-foot {
  position: relative;
  z-index: 2;
  border-top: 1px dashed var(--line);
  padding: 22px 0;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  letter-spacing: 0.08em;
  display: flex;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}
.cs-foot .ts { text-transform: uppercase; }

@media (max-width: 980px) {
  .cs-grid { grid-template-columns: 1fr; gap: 16px; }
  .cs-stage-wrap { height: 540px; width: 100%; max-width: 520px; justify-self: center; order: -1; }
}
@media (max-width: 600px) {
  .cs-stage-wrap { height: 440px; }
  .cs-card { width: 280px; height: 340px; top: 50px; }
  .cs-card .cap { font-size: 22px; }
  .cs-mini { width: 100px; height: 116px; }
  .cs-mini.a { left: 0; }
  .cs-field { flex-direction: column; border-radius: var(--r-lg); padding: 14px; gap: 12px; }
  .cs-field button { width: 100%; }
  .cs-note { font-size: 19px; right: 0; }
  .cs-perks { gap: 20px; }
}

/* ── Market placeholder (pigmenta.fi / .lv / .lt) ───────────────────────── */
/* Additive to the .cs-* shell above, which the region landing reuses wholesale
   for its hero. Only the market indicator in the nav, the switcher band and
   the footer links are new — see app/views/pages/region_landing.html.erb. */

.rg-nav-market {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px 6px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--paper);
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink-2);
  white-space: nowrap;
}
/* The country name is the first thing to go when the nav gets tight — the
   flag alone still answers "which market am I on?". */
@media (max-width: 480px) {
  .rg-nav-market-name { display: none; }
  .rg-nav-market { padding: 5px 9px 6px; }
}

.rg-markets {
  position: relative;
  z-index: 2;
  border-top: 1px dashed var(--line);
  padding: 56px 0 12px;
}
.rg-markets-h {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: clamp(26px, 3.4vw, 38px);
  letter-spacing: -0.02em;
  line-height: 1.12;
  margin-top: 14px;
  text-wrap: balance;
  overflow-wrap: break-word;
}
.rg-markets-lead {
  margin-top: 10px;
  max-width: 560px;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-2);
  text-wrap: pretty;
}

.rg-market-grid {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 14px;
}
/* Cards hold a domain string that's wider than the intrinsic content — without
   this the track blows out and drags the page sideways on mobile. */
.rg-market-grid > li { min-width: 0; }

.rg-market {
  display: flex;
  flex-direction: column;
  gap: 7px;
  height: 100%;
  padding: 20px 18px 18px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  text-decoration: none;
  color: inherit;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
}
a.rg-market:hover {
  transform: translateY(-3px);
  border-color: var(--peach-deep);
  box-shadow: var(--shadow-soft);
}
a.rg-market:focus-visible {
  outline: 2px solid var(--peach-deep);
  outline-offset: 3px;
}
/* The market you're already on: flat, no lift, no pointer — it isn't a link. */
.rg-market.is-current {
  background: color-mix(in oklab, var(--butter) 26%, var(--paper));
  border-color: var(--butter-deep);
}
.rg-flag { font-size: 26px; line-height: 1; }
.rg-market-name {
  font-family: var(--font-display);
  font-size: 21px;
  font-weight: 500;
  letter-spacing: -0.015em;
  overflow-wrap: break-word;
}
.rg-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.rg-status .dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.rg-status.is-open { color: var(--mint-deep); }
.rg-status.is-open .dot {
  background: var(--mint-deep);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--mint-deep) 22%, transparent);
}
.rg-status.is-planned { color: var(--ink-3); }
.rg-status.is-planned .dot { background: var(--ink-3); opacity: 0.55; }

.rg-domain {
  margin-top: auto;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--ink-3);
  overflow-wrap: anywhere;
}
.rg-market.is-open .rg-domain { color: var(--peach-deep); }

.rg-foot-link { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.rg-foot-link:hover { color: var(--ink); }
.rg-foot-sep { margin: 0 6px; opacity: 0.5; }

@media (max-width: 980px) {
  .rg-market-grid { grid-template-columns: repeat(2, 1fr); }
  .rg-markets { padding-top: 44px; }
}
@media (max-width: 400px) {
  .rg-market-grid { grid-template-columns: 1fr; }
}

/* === GDPR strip on tracking page ===================================== */

.gdpr-strip {
  max-width: 760px;
  margin: 48px auto 64px;
  padding: 0 24px;
}

.gdpr-details {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 18px 22px;
}

.gdpr-details > summary {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-3);
  cursor: pointer;
  list-style: none;
}

.gdpr-details > summary::-webkit-details-marker { display: none; }
.gdpr-details > summary::after {
  content: " ▾";
  font-family: var(--font-mono);
}

.gdpr-details[open] > summary::after { content: " ▴"; }

.gdpr-details p {
  font-size: 14px;
  line-height: 22px;
  color: var(--ink-2);
  margin: 12px 0;
}

.gdpr-actions {
  display: grid;
  gap: 16px;
  margin: 18px 0 12px;
}

.gdpr-form {
  background: var(--cream);
  border-radius: var(--r-sm);
  padding: 14px;
  display: grid;
  gap: 8px;
}

.gdpr-form label {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
}

.gdpr-form textarea {
  font-family: var(--font-sans);
  font-size: 14px;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: var(--r-sm);
  background: var(--paper);
  resize: vertical;
}

.gdpr-btn {
  display: inline-block;
  align-self: flex-start;
  padding: 8px 14px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
  background: var(--paper);
  color: var(--ink);
  font-size: 13px;
  text-decoration: none;
  font-family: var(--font-sans);
  cursor: pointer;
}

.gdpr-btn:hover { background: var(--cream); }

.gdpr-btn-coral {
  background: var(--coral);
  color: var(--paper);
  border-color: var(--coral);
}
.gdpr-btn-coral:hover { background: #D9624A; color: var(--paper); }

.gdpr-fine {
  font-size: 12px;
  color: var(--ink-3);
  margin-top: 14px !important;
}


/* === Content pages (about, quality, process, pricing) ================ */

.content-page {
  background: var(--cream);
  padding-bottom: 0;
}

.content-hero {
  padding: 100px 0 60px;
  background: var(--cream);
}

@media (max-width: 720px) {
  .content-hero { padding: 72px 0 40px; }
}

.content-hero h1 {
  font-size: clamp(34px, 5.5vw, 64px);
  margin-top: 14px;
  letter-spacing: -0.03em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

.content-hero h1 em {
  font-style: italic;
  font-weight: 400;
  background: linear-gradient(110deg, var(--peach-deep), var(--lilac-deep) 50%, var(--mint-deep));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  padding-right: 0.08em;
  margin-right: -0.08em;
}

.content-hero p.lead {
  font-size: 19px;
  color: var(--ink-2);
  line-height: 1.55;
  margin: 16px 0 0;
  max-width: 640px;
}

.content-section {
  padding: 56px 0;
  border-top: 1px solid var(--line);
}

.content-section-cream {
  background: var(--cream-2);
  border-top: none;
}

.content-section h2 {
  font-size: clamp(28px, 3.5vw, 40px);
  margin: 12px 0 18px;
  max-width: 760px;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.content-section h2 em {
  font-style: italic;
  font-weight: 400;
  color: var(--peach-deep);
  padding-right: 0.06em;
  margin-right: -0.04em;
}

.content-section h3 {
  font-size: 20px;
  margin: 22px 0 8px;
  letter-spacing: -0.01em;
}

.content-section p {
  font-size: 16px;
  line-height: 1.65;
  color: var(--ink);
  max-width: 720px;
  margin: 0 0 14px;
}

.content-section ul.checklist {
  list-style: none;
  padding: 0;
  margin: 14px 0 18px;
  max-width: 720px;
  display: grid;
  gap: 8px;
}

.content-section ul.checklist li {
  position: relative;
  padding-left: 26px;
  line-height: 1.55;
  font-size: 16px;
}

.content-section ul.checklist li::before {
  content: "✓";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--mint-deep);
  font-weight: 600;
}

.content-section a.inline-link {
  color: var(--peach-deep);
  text-decoration: underline;
  text-decoration-thickness: 1.5px;
  text-underline-offset: 3px;
}

.content-section a.inline-link:hover {
  color: var(--ink);
}

/* Definition list used on about page (legal info) and quality (specs) */

.content-section dl.content-meta {
  margin: 22px 0 8px;
  max-width: 540px;
  display: grid;
  grid-template-columns: 160px 1fr;
  gap: 8px 18px;
  font-size: 14px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
}

.content-section dl.content-meta dt {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  padding-top: 2px;
}

.content-section dl.content-meta dd {
  margin: 0;
  color: var(--ink);
}

/* === Steps list (process page) ======================================= */

.steps-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 36px;
  max-width: 820px;
}

.steps-list > li {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  padding-bottom: 36px;
  border-bottom: 1px dashed var(--line);
}

.steps-list > li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

@media (max-width: 720px) {
  .steps-list > li {
    grid-template-columns: 60px 1fr;
    gap: 16px;
  }
}

.steps-list .step-num {
  font-family: var(--font-mono);
  font-size: 30px;
  color: var(--peach-deep);
  letter-spacing: -0.02em;
  line-height: 1;
}

.steps-list .step-body h2 {
  font-size: 24px;
  margin: 0 0 10px;
}

.steps-list .step-body p {
  font-size: 16px;
  line-height: 1.65;
  margin: 0 0 12px;
}

.steps-list .step-body p:last-child {
  margin-bottom: 0;
}

.steps-list code {
  font-family: var(--font-mono);
  font-size: 13px;
  background: var(--paper);
  padding: 2px 6px;
  border-radius: var(--r-sm);
  border: 1px solid var(--line);
}

/* === Pricing tables ================================================== */

.pricing-cat-heading {
  font-size: 18px;
  margin: 32px 0 12px;
  color: var(--ink-2);
}

.pricing-cat-heading:first-of-type {
  margin-top: 16px;
}

.pricing-table {
  width: 100%;
  max-width: 720px;
  border-collapse: collapse;
  margin: 0 0 16px;
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.pricing-table th,
.pricing-table td {
  padding: 12px 16px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  font-size: 15px;
}

.pricing-table thead th {
  background: var(--cream);
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-3);
  font-weight: 500;
}

.pricing-table tbody tr:last-child td {
  border-bottom: none;
}

.pricing-table td.num {
  text-align: right;
  font-family: var(--font-mono);
  font-size: 15px;
}

.pricing-table td.num.savings {
  color: var(--mint-deep);
  font-weight: 600;
}

.pricing-table-packs td:first-child strong {
  font-size: 16px;
}

/* Soft-launch nav badge — shows in the brand corner while
   PIGMENTA_ORDER_OPEN is false. */
.nav-status-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  border-radius: 999px;
  background: var(--butter);
  color: var(--ink);
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  vertical-align: middle;
  font-weight: 500;
}

/* Center the waitlist form on the order-coming-soon page. */
.ocs-form-wrap {
  max-width: 480px;
}

/* ── Internal-linking polish ────────────────────────────────────────────
   Size and use-case cards that have a dedicated SEO landing page render
   as <a> instead of <article>. Reset anchor styles and add a small "Loe
   lähemalt →" hint so the affordance reads as a real link without
   visually breaking the surrounding grid. */
.size-card.is-link,
.uc-card.is-link {
  text-decoration: none;
  color: inherit;
  cursor: pointer;
}
/* Size cards lay out as normal block flow — keep that. */
.size-card.is-link { display: block; }
/* Use-case cards keep the base flex column so the 12px gap that spaces the
   icon, heading and body applies identically to link and non-link cards. */
.uc-card.is-link { display: flex; }
.size-card.is-link:hover,
.uc-card.is-link:hover { text-decoration: none; }

/* The browser default `[hidden] { display: none }` (specificity 0,1,0)
   loses to `.size-card.is-link { display: block }` (specificity 0,2,0),
   which broke the category filter on the home page — when JS set
   card.hidden = true the cards stayed visible. Re-assert hidden with
   matching specificity so the filter works again. */
.size-card[hidden],
.uc-card[hidden] { display: none; }

.size-more,
.uc-more {
  display: block;
  margin-top: 8px;
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--peach-deep);
}
.size-card .size-foot { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.size-card.is-link:hover .size-more,
.uc-card.is-link:hover .uc-more { color: var(--ink); }

/* ── Footer sitemap block ────────────────────────────────────────────────
   Site-wide internal-link cluster surfacing every Tier-3/4/5 landing
   (sizes, use cases, cities, guides). Visual weight is deliberately
   low — small mono captions, muted color — but the <a href>s give
   Google a clear PageRank path from every page into the cluster. */
.footer-sitemap {
  margin-top: 56px;
  padding-top: 32px;
  border-top: 1px solid color-mix(in oklab, var(--paper) 12%, transparent);
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 40px;
}
.footer.footer-light .footer-sitemap {
  border-top-color: color-mix(in oklab, var(--ink) 12%, transparent);
}
.footer-sitemap h3 {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 70%, transparent);
  margin-bottom: 14px;
}
.footer.footer-light .footer-sitemap h3 {
  color: var(--ink-2);
}
.footer-sitemap ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; }
.footer-sitemap a {
  font-size: 13px;
  color: color-mix(in oklab, var(--paper) 75%, transparent);
  text-decoration: none;
  transition: color 0.15s;
}
.footer-sitemap a:hover { color: var(--paper); }
.footer.footer-light .footer-sitemap a { color: var(--ink-2); }
.footer.footer-light .footer-sitemap a:hover { color: var(--ink); }

@media (max-width: 980px) {
  .footer-sitemap { grid-template-columns: 1fr 1fr; gap: 32px; }
}
@media (max-width: 600px) {
  .footer-sitemap { grid-template-columns: 1fr; gap: 28px; }
}

/* ── Footer trust marks (payment + delivery) ─────────────────────────────
   Swappable brand logos in app/assets/images/brands/, framed as white chips
   so a single style reads on both the dark footer and the light/slim footer.
   Every logo shares a 160×46 canvas, so the chips come out a uniform size. */
.footer-trust {
  margin-top: 44px;
  padding-top: 30px;
  border-top: 1px solid color-mix(in oklab, var(--paper) 12%, transparent);
  display: flex;
  flex-wrap: wrap;
  gap: 24px 56px;
}
.footer.footer-light .footer-trust {
  border-top-color: color-mix(in oklab, var(--ink) 12%, transparent);
}
.trust-group { display: flex; flex-direction: column; gap: 12px; min-width: 0; }
.trust-label {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: color-mix(in oklab, var(--paper) 60%, transparent);
}
.footer.footer-light .trust-label { color: var(--ink-3); }
.trust-marks { display: flex; flex-wrap: wrap; gap: 8px; }
.tm {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 40px;
  background: #fff;
  border: 1px solid rgba(42, 37, 32, 0.07);
  border-radius: 8px;
  box-shadow: 0 1px 2px rgba(42, 37, 32, 0.14);
}
.tm-img { max-height: 24px; max-width: 76px; width: auto; height: auto; display: block; }

/* ── Slim footer (checkout flow) ─────────────────────────────────────────
   Short footer that tucks under the order content; the sticky order notch
   releases just above it (see .order-notch). No sitemap cluster. */
.footer-slim { padding: 30px 0 calc(28px + env(safe-area-inset-bottom)); }
.footer-slim .footer-trust { margin-top: 0; padding-top: 0; border-top: 0; }
.footer-slim .trust-label { color: var(--ink-3); }
.footer-slim-bottom {
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid var(--line);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px 18px;
  font-size: 13px;
  color: var(--ink-3);
}
.footer-slim-links { display: flex; flex-wrap: wrap; gap: 18px; }
.footer-slim-links a { color: var(--ink-2); font-size: 13px; }
.footer-slim-links a:hover { color: var(--ink); }

@media (max-width: 600px) {
  .footer-trust { gap: 20px 36px; }
  .tm { width: 74px; height: 34px; }
  .tm-img { max-height: 20px; max-width: 64px; }

  /* Keep the checkout footer truly slim on phones — drop the trust marks
     there (they stay on the full site footer and on desktop checkout). */
  .footer-slim .footer-trust { display: none; }
  .footer-slim-bottom { margin-top: 0; padding-top: 0; border-top: 0; }
}

/* ── Image placeholders ──────────────────────────────────────────────────
   Rendered by the `placeholder_image` helper when
   PIGMENTA_SHOW_PLACEHOLDERS=true. Designed to be visually clear ("this
   is a slot, not a finished design"), survive any aspect ratio, and
   simply disappear from the DOM when the gate is off — no margin, no
   border, no layout reservation. Replace the helper call with a real
   `image_tag` to graduate a slot. */
.placeholder {
  margin: 28px 0;
  width: 100%;
  background: var(--cream-2);
  border: 2px dashed var(--line);
  border-radius: var(--r-lg);
  display: grid;
  place-items: center;
  text-align: center;
  overflow: hidden;
  position: relative;
}
/* A real photo dropped into app/assets/images/content/<slug> fills the same
   ratio-boxed slot the placeholder occupied. */
.content-photo {
  margin: 28px 0;
  width: 100%;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--cream-2);
  box-shadow: var(--shadow-photo);
}
.content-photo-img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.placeholder-inner {
  padding: 24px;
  max-width: 80%;
}
.placeholder-icon {
  font-size: 28px;
  opacity: 0.55;
  margin-bottom: 8px;
}
.placeholder-slug {
  font-family: var(--font-mono);
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ink-3);
  margin-bottom: 6px;
}
.placeholder-caption {
  font-size: 13.5px;
  color: var(--ink-2);
  line-height: 1.5;
}

/* Two side-by-side placeholders (e.g. glossy vs matte, before/after) */
.placeholder-grid {
  margin: 28px 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}
.placeholder-grid .placeholder { margin: 0; }
@media (max-width: 600px) {
  .placeholder-grid { grid-template-columns: 1fr; gap: 14px; }
}