/* 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).
   Subsets: latin (incl. Estonian š/ž) + cyrillic; weights limited to what the
   CSS uses; Caveat is a static 500 instance serving 400-600. */

@font-face {
  font-family: 'Caveat';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url("/assets/caveat-500-cyrillic-6d1c6188.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-2a149731.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0160-0161, U+017D-017E, 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-cyrillic-9dcfe35d.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-2c9f4148.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0160-0161, U+017D-017E, 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-cyrillic-d3544983.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-22530ea0.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0160-0161, U+017D-017E, 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-42fe2704.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0160-0161, U+017D-017E, 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-1de38e38.woff2") format("woff2");
  unicode-range: U+0020-007E, U+00A0-00FF, U+0131, U+0152-0153, U+0160-0161, U+017D-017E, 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;
}

/* 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 / Märkme alaga") 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;
}
.size-grid.border-polaroid .size-card .photo {
  padding: 8px 8px 32px;
}
.size-grid.border-polaroid .size-card.pano .photo {
  padding: 6px 6px 20px;
}

/* 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; }
  /* Leave room at the bottom of the page so the notch doesn't cover content. */
  .flow-bg .container { padding-bottom: 140px !important; }

  .order-notch {
    display: grid;
    grid-template-columns: 1fr auto auto;
    align-items: center;
    gap: 10px;
    position: fixed;
    left: 0; right: 0; 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-row { gap: 8px; }
  .step-panel .wallet-btn { height: 46px; }
  .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;
}
.uploaded-item {
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 12px;
  position: relative;
}
.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;
}
.uploaded-item .controls {
  display: flex; flex-direction: column; gap: 6px;
}
.uploaded-item .size-pick,
.uploaded-item .qty-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;
}
.uploaded-item .qty-pick { font-weight: 500; }
.uploaded-item .remove {
  position: absolute; top: 18px; right: 18px;
  width: 22px; height: 22px;
  border-radius: 50%;
  background: rgba(0,0,0,0.55);
  color: var(--paper);
  display: grid; place-items: center;
  font-size: 11px;
  z-index: 2;
}
.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; }

/* 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-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(--border-px) var(--border-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;
}
.finish-info-grid-3 { grid-template-columns: repeat(3, 1fr); }
.finish-info-card {
  display: flex; flex-direction: column; gap: 8px;
  padding: 14px;
  background: var(--cream);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
}
.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 three 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;
}
.finish-info-frame.frame-none { padding: 0; }
.finish-info-frame.frame-fixed { padding: 8%; }
.finish-info-frame.frame-polaroid { padding: 8% 8% 24%; }
.finish-info-frame .frame-photo {
  width: 100%; height: 100%;
  background: linear-gradient(135deg, var(--mint), var(--sky));
  border-radius: 2px;
}
.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;
}

/* 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: 6% 6% 18%;
  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-row { display: flex; gap: 10px; }
/* Native-style Apple Pay / Google Pay buttons (selectable payment options). */
.wallet-btn {
  flex: 1; min-width: 0;
  display: flex; align-items: center; justify-content: center; gap: 7px;
  height: 50px; padding: 0 16px;
  border-radius: var(--r-md);
  border: 1.5px solid transparent;
  cursor: pointer; transition: box-shadow 0.15s, transform 0.05s;
}
.wallet-btn:active { transform: scale(0.99); }
.wallet-btn.active { box-shadow: 0 0 0 2px var(--paper), 0 0 0 4px var(--ink); }
.wallet-btn .wallet-glyph { width: 22px; height: 22px; flex-shrink: 0; }
.wallet-btn .wallet-word { font-size: 17px; font-weight: 600; letter-spacing: -0.01em; }
.wallet-btn.apple { background: #000; }
.wallet-btn.apple .wallet-word { color: #fff; }
.wallet-btn.google { background: #fff; border-color: #dadce0; }
.wallet-btn.google .wallet-word { color: #3c4043; }

.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; }

.pay-badge {
  display: flex; align-items: center; gap: 10px;
  margin-top: 16px; padding: 10px 14px;
  background: var(--cream); border-radius: var(--r-sm);
  font-size: 11.5px; color: var(--ink-3);
  font-family: var(--font-mono); letter-spacing: 0.02em;
}

/* 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;
}
.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; }
}

/* === 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; }
}

/* ── 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; }
}