/* Fonts are self-hosted (no request to Google). Variable woff2 files, latin and latin-ext subsets as Google Fonts
   serves them; licence: assets/fonts/OFL.txt (SIL Open Font License 1.1). */
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(assets/fonts/funnel-display-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Funnel Display';
  font-style: normal;
  font-weight: 500 600;
  font-display: swap;
  src: url(assets/fonts/funnel-display-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/hanken-grotesk-latin-ext.woff2) format('woff2');
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Hanken Grotesk';
  font-style: normal;
  font-weight: 400 600;
  font-display: swap;
  src: url(assets/fonts/hanken-grotesk-latin.woff2) format('woff2');
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --mist: #F3F6F1;
  --white: #FFFFFF;
  --ink: #1B2A23;
  --muted: #44564C;
  --green: #2F6B55;
  --green-deep: #1F4F3E;
  --green-pale: #DDE9E1;
  --green-wash: #E9F1EB;
  --line: #CBD6CD;
  --line-soft: #DFE7E0;
  --grey-wash: #F6F6F4;
  --grey-text: #5A5F5B;
  --wrong: #B4491F;
  --wrong-pale: #F8E3D8;
  --night: #14211B;
  --mint: #BFE3CF;
  --amber: #8A5A00;
  --display: 'Funnel Display', 'Helvetica Neue', sans-serif;
  --body: 'Hanken Grotesk', 'Helvetica Neue', sans-serif;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--mist);
  color: var(--ink);
  font-family: var(--body);
  font-size: 18px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol, dl, dd, figure, blockquote { margin: 0; padding: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: var(--green); }
a:hover { color: var(--green-deep); }
:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; border-radius: 6px; }

h1, h2 { font-family: var(--display); font-weight: 600; text-wrap: balance; }
h1 { font-size: clamp(44px, 5.4vw, 76px); line-height: 1.02; letter-spacing: -0.035em; }
h2 { font-size: clamp(34px, 3.6vw, 52px); line-height: 1.06; letter-spacing: -0.03em; }
h3 { font-size: 22px; font-weight: 600; line-height: 1.25; }
.lead { font-size: clamp(19px, 1.5vw, 21px); color: var(--muted); max-width: 30em; }
.display { font-size: clamp(48px, 8.4vw, 124px); line-height: 0.96; letter-spacing: -0.045em; }
.display-medium { font-size: clamp(40px, 5.6vw, 84px); line-height: 1; letter-spacing: -0.04em; }
sup { font-size: 0.6em; line-height: 0; }
sup a { text-decoration: none; font-weight: 600; padding: 0 2px; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.hint { font-size: 15px; color: var(--muted); }
.fineprint { font-size: 15px; color: var(--muted); }

/* Layout */
.wrap { max-width: 1120px; margin: 0 auto; }
.wrap-wide { max-width: 1168px; margin: 0 auto; padding-left: 24px; padding-right: 24px; }
.band { padding: 112px 24px; }
.band-white { background: var(--white); }
.band-wash { background: var(--green-wash); }
.band-dark { background: var(--night); color: var(--mist); }
.band-green { background: var(--green-deep); color: var(--white); }
.band-dark .lead, .band-green .lead, .band-dark p { color: #C9D6CD; }
.band-dark .fineprint, .band-green .fineprint { color: #C9D6CD; }
.band-dark a, .band-green a { color: var(--mint); }
.band-statement { padding-top: 136px; padding-bottom: 136px; }
.band-tight-top { padding-top: 0; }
.band-flush { padding-top: 0; padding-bottom: 112px; }
.stack-lg { display: flex; flex-direction: column; gap: 56px; }
.section-head { display: flex; flex-direction: column; gap: 16px; max-width: 720px; }
.split { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(400px, 100%), 1fr)); gap: 64px; align-items: center; }
.split-top { align-items: start; }
.section-head:has(.display-medium) { max-width: 900px; }
.card { background: var(--white); border-radius: 20px; box-shadow: 0 0 0 1px var(--line-soft); }

/* Header */
.site-header { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding-top: 24px; padding-bottom: 24px; }
.brand { display: flex; align-items: center; gap: 8px; text-decoration: none; color: var(--ink); }
.mark { width: 32px; height: 32px; fill: none; stroke: var(--green); stroke-width: 5.6; stroke-linecap: round; stroke-linejoin: round; }
.mark-large { width: 60px; height: 60px; }
.wordmark { font-family: var(--display); font-weight: 600; font-size: 24px; letter-spacing: -0.02em; }
.site-nav { display: flex; align-items: center; gap: 32px; font-size: 16px; font-weight: 500; }
.nav-link { color: var(--ink); text-decoration: none; padding: 12px 0; }
.nav-link:hover { color: var(--green); }

/* Language: the EN / FI switch in the header, and on the English page a banner for browsers that prefer Finnish */
.lang-switch { display: flex; align-items: center; border-radius: 999px; box-shadow: inset 0 0 0 1.5px #B9C7BD; }
.lang-option { display: grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 8px; border-radius: 999px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; letter-spacing: 0.04em; }
.lang-option:hover { color: var(--green); }
.lang-option[aria-current="page"] { background: var(--ink); color: var(--white); }
.lang-banner { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 4px 8px 4px 20px; background: var(--green-deep); color: var(--white); font-size: 16px; line-height: 1.4; }
.lang-banner[hidden] { display: none; }
.lang-banner p { padding: 8px 0; }
.lang-banner a { color: var(--mint); font-weight: 600; }
.lang-banner a:hover { color: var(--white); }
.lang-banner-close { flex: none; display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--white); cursor: pointer; }
.lang-banner-close:hover { background: rgba(255, 255, 255, 0.12); }
.lang-banner-close svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; }

/* Buttons */
.button {
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--green); color: var(--white); text-decoration: none;
  padding: 16px 28px; border-radius: 999px; font-weight: 600; font-size: 18px;
  transition: background-color 0.15s ease;
}
.button:hover { background: var(--green-deep); color: var(--white); }
.button-small { padding: 12px 20px; font-size: 16px; }
.button-large { padding: 18px 32px; font-size: 19px; }
.button-ghost { background: transparent; color: var(--ink); box-shadow: inset 0 0 0 1.5px #B9C7BD; }
.button-ghost:hover { background: var(--white); color: var(--ink); }
.actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }

/* Hero */
.hero { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(460px, 100%), 1fr)); gap: 64px; align-items: center; padding-top: 56px; padding-bottom: 112px; }
.hero-copy { display: flex; flex-direction: column; gap: 28px; }
.hero h1 { font-size: clamp(36px, 4.4vw, 62px); }
.try-store { display: flex; flex-direction: column; gap: 12px; }
.hero .try-store { gap: 10px; max-width: 520px; }
.hero .try-store-label { font-family: var(--body); font-size: 16px; letter-spacing: 0; line-height: 1.3; }
.try-store-label { font-family: var(--display); font-size: 24px; font-weight: 600; letter-spacing: -0.02em; }
.try-store-help { font-size: 15px; line-height: 1.45; color: var(--muted); }
/* The label row holds the quiet Replay button on the right; it is 44px tall, and its row is shorter so the card stays close */
.demo-wrap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: 32px auto; align-items: center; column-gap: 12px; row-gap: 10px; }
.demo-wrap > .demo { grid-column: 1 / -1; grid-row: 2; }
.replay {
  grid-area: 1 / 2; display: inline-flex; align-items: center; gap: 8px; min-height: 44px; margin: -6px 0; padding: 0 16px 0 12px;
  border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted);
  font: 600 15px var(--body); cursor: pointer; transition: color 0.2s ease, background-color 0.2s ease, border-color 0.2s ease;
}
.replay[hidden] { display: none; }
.replay svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; transition: transform 0.4s ease; }
.replay:hover, .replay:focus-visible { color: var(--green-deep); background: var(--green-wash); border-color: var(--green); }
.replay:hover svg { transform: rotate(-180deg); }
@media (prefers-reduced-motion: reduce) { .replay svg { transition: none; } }
.demo-label { font-size: 14px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding-left: 4px; }
.try-store-dark { grid-column: 1 / -1; margin-top: 24px; padding-top: 40px; border-top: 1px solid rgba(255, 255, 255, 0.18); max-width: 640px; }
.try-store-dark .try-store-label { color: var(--mist); line-height: 1.2; }
.try-store-dark .try-store-input { border-color: var(--mint); }
.try-store-row { display: flex; gap: 12px; flex-wrap: wrap; }
.try-store-input { flex: 1 1 220px; min-width: 0; min-height: 56px; padding: 12px 16px; border: 1.5px solid var(--green); border-radius: 14px; background: var(--white); font: 500 18px var(--body); color: var(--ink); }
.try-store .button { border: 0; cursor: pointer; font-family: var(--body); }
.try-store .button:disabled { cursor: progress; }
/* The human check (try-store.js) takes room under the form only while Cloudflare wants the visitor to click. */
.try-store-check { max-width: 100%; overflow: hidden; line-height: 0; }
.try-store-check:not(.is-visible) { position: absolute; width: 1px; height: 1px; margin: -1px; clip-path: inset(50%); }
.try-store-error { font-size: 15px; font-weight: 600; line-height: 1.45; color: var(--wrong); }
.try-store-dark .try-store-error { color: var(--wrong-pale); }
.demo {
  background: var(--white); border-radius: 28px; padding: 28px;
  box-shadow: 0 0 0 1px var(--line-soft);
  display: flex; flex-direction: column; gap: 18px;
}

/* Search box, caret, chips: shared by every demo */
.searchbox {
  display: flex; align-items: center; gap: 12px; min-height: 60px;
  border: 1.5px solid var(--green); border-radius: 16px; padding: 14px 18px;
  font-size: 19px; font-weight: 500; background: var(--white);
}
.searchbox-small { min-height: 52px; padding: 10px 16px; font-size: 17px; border-radius: 12px; }
.panel-wrong .searchbox { border-color: #C9CBC5; }
.search-icon { width: 22px; height: 22px; fill: none; stroke: var(--green); stroke-width: 2; stroke-linecap: round; flex-shrink: 0; }
.typed { white-space: pre-wrap; }
.searchbox .typed { margin-right: -10px; }
.caret { width: 2px; height: 1.3em; background: var(--green); flex-shrink: 0; animation: blink 1s steps(1) infinite; }
.panel-wrong .caret { background: var(--grey-text); }
@keyframes blink { 50% { opacity: 0; } }

.chips { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; min-height: 38px; }
.chip {
  background: var(--green-pale); color: var(--green-deep);
  padding: 7px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; line-height: 1.6;
  opacity: 0; transform: scale(0.7);
  transition: opacity 0.25s ease, transform 0.35s cubic-bezier(0.34, 1.56, 0.64, 1);
}
.chip.is-in { opacity: 1; transform: none; }
.count { font-size: 15px; color: var(--muted); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* Hero product grid */

.grid-area { position: relative; }
.grid-note {
  position: absolute; left: 0; right: 0; bottom: 6%; margin: 0 auto; width: fit-content; max-width: 100%;
  display: flex; align-items: center; gap: 10px; padding: 10px 18px 10px 12px; border-radius: 999px;
  background: var(--green-wash); color: var(--green-deep); font-size: 15px; font-weight: 600;
  opacity: 0; transform: translateY(8px); transition: opacity 0.35s ease 0.35s, transform 0.35s ease 0.35s;
}
.grid-note svg { width: 22px; height: 22px; padding: 4px; border-radius: 50%; background: var(--green); fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.is-settled .grid-note { opacity: 1; transform: none; }

/* Hero demo: the filters are the loudest thing, the products stay quiet */
.demo-status { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--green-wash); border-radius: 16px; padding: 10px 14px; min-height: 62px; }
.status-label { font-size: 15px; font-weight: 600; color: var(--green-deep); }
.demo-status .chips { min-height: 0; }
.demo-status .chips:empty { display: none; }
.demo > .count { margin: -6px 2px -8px; font-weight: 600; }
.demo .chip { background: var(--green-pale); color: var(--green-deep); font-size: 16px; padding: 8px 16px; box-shadow: inset 0 0 0 1px #C5D8CC; }
.demo.is-done .caret { animation: none; opacity: 0; }
.product-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.tile { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 12px; align-items: center; min-height: 76px; padding: 10px 12px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-soft); background: var(--white); }
.tile[hidden] { display: none; }
.tile.is-ghost { visibility: hidden; }
.tile-name { font-size: 16px; font-weight: 600; line-height: 1.25; }
.tile-price { font-size: 16px; font-weight: 600; color: var(--green); font-variant-numeric: tabular-nums; }
.thumb { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 10px; background: var(--mist); }
.thumb svg { width: 22px; height: 22px; fill: none; stroke: #7C9486; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }

/* Keyword search vs Mezcal */
.compare { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 24px; }
.panel { border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 16px; border: 2px solid transparent; transition: border-color 0.4s ease; }
.panel-wrong { background: var(--grey-wash); }
.panel-right { background: var(--green-wash); }
.is-judged .panel-wrong { border-color: var(--wrong); }
.is-judged .panel-right { border-color: var(--green); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; min-height: 34px; }
.panel-title { font-weight: 600; font-size: 18px; }
.panel-wrong .panel-title { color: var(--grey-text); }
.panel-right .panel-title { color: var(--green-deep); }
.tally { font-size: 15px; font-weight: 600; padding: 5px 12px; border-radius: 999px; opacity: 0; transform: translateY(4px); transition: opacity 0.3s ease, transform 0.3s ease; }
.tally-wrong { background: var(--wrong); color: var(--white); }
.tally-right { background: var(--green); color: var(--white); }
.is-judged .tally { opacity: 1; transform: none; }
.chips-placeholder .hint { color: var(--grey-text); }

.rows { display: flex; flex-direction: column; gap: 10px; min-height: 266px; }
.row {
  display: grid; grid-template-columns: 48px minmax(0, 1fr) 30px; gap: 14px; align-items: center;
  background: var(--white); border-radius: 16px; padding: 10px 14px 10px 10px; min-height: 82px;
  animation: row-in 0.3s ease both;
}
@keyframes row-in { from { opacity: 0; transform: translateY(6px); } }
.row .thumb { width: 48px; height: 48px; transition: opacity 0.4s ease; }
.row-name { font-size: 16px; font-weight: 600; line-height: 1.3; }
.row-detail { font-size: 14px; color: var(--muted); }
.row-verdict { font-size: 14px; font-weight: 600; display: none; }
.verdict-icon { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; opacity: 0; transform: scale(0.4); transition: opacity 0.25s ease, transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1); }
.verdict-icon svg { width: 16px; height: 16px; fill: none; stroke: var(--white); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.row.is-wrong .verdict-icon { background: var(--wrong); }
.row.is-right .verdict-icon { background: var(--green); }
.is-judged .verdict-icon { opacity: 1; transform: none; }
.is-judged .row-detail { display: none; }
.is-judged .row-verdict { display: block; }
.is-judged .row.is-wrong .row-verdict { color: var(--wrong); }
.is-judged .row.is-right .row-verdict { color: var(--green-deep); }
.is-judged .row.is-wrong .thumb { opacity: 0.5; }
.is-judged .row.is-wrong .row-name { color: var(--grey-text); text-decoration: line-through; text-decoration-color: var(--wrong); }
.is-judged .row:nth-child(2) .verdict-icon { transition-delay: 0.12s; }
.is-judged .row:nth-child(3) .verdict-icon { transition-delay: 0.24s; }

/* Speed */
.speed-card { padding: 28px; display: flex; flex-direction: column; gap: 14px; border-radius: 24px; }
.speed-line { display: flex; align-items: center; gap: 4px; font-size: 19px; font-weight: 500; }


.chip-toggle {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 10px 16px;
  border: 1.5px solid transparent; border-radius: 999px; cursor: pointer;
  background: var(--green-pale); color: var(--green-deep); font: 600 16px var(--body);
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.chip-toggle::after { content: '×'; font-size: 18px; line-height: 1; }
.chip-toggle[aria-pressed='false'] { background: var(--white); color: var(--grey-text); border-color: #B9C7BD; border-style: dashed; text-decoration: line-through; }
.chip-toggle[aria-pressed='false']::after { content: '+'; text-decoration: none; display: inline-block; }


/* Languages */
.language-list { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 4px; }
.language-list li { border: 1.5px solid #B9C7BD; padding: 8px 14px; border-radius: 999px; font-size: 15px; font-weight: 600; }

/* Pricing */
input[type='range'] { -webkit-appearance: none; appearance: none; width: 100%; height: 44px; background: transparent; cursor: pointer; margin: 0; }
input[type='range']::-webkit-slider-runnable-track { height: 8px; border-radius: 999px; background: linear-gradient(to right, var(--green) var(--fill, 9%), #CBD6CD var(--fill, 9%)); }
input[type='range']::-moz-range-track { height: 8px; border-radius: 999px; background: #CBD6CD; }
input[type='range']::-moz-range-progress { height: 8px; border-radius: 999px; background: var(--green); }
input[type='range']::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; margin-top: -10px; border-radius: 50%; background: var(--white); border: 3px solid var(--green); box-shadow: 0 2px 6px rgba(31, 79, 62, 0.3); }
input[type='range']::-moz-range-thumb { width: 22px; height: 22px; border-radius: 50%; background: var(--white); border: 3px solid var(--green); }

/* Promises, customers, FAQ, closing */
.logo-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 16px; }
.placeholder { border: 1.5px dashed #B9C7BD; border-radius: 16px; padding: 28px; text-align: center; font-size: 15px; font-weight: 600; color: var(--muted); }
.quotes { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(420px, 100%), 1fr)); gap: 24px; }
.quote { display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 24px; align-items: center; background: var(--mist); border-radius: 24px; padding: 20px; }
.quote img { width: 160px; height: 180px; object-fit: cover; border-radius: 16px; }
.quote blockquote { font-size: 19px; font-weight: 500; line-height: 1.4; }
.quote figcaption { font-size: 15px; color: var(--muted); margin-top: 12px; }
.faq details { border-top: 1px solid var(--line); padding: 14px 0; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { font-weight: 600; font-size: 20px; cursor: pointer; min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; list-style: none; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: '+'; font-size: 26px; font-weight: 400; color: var(--green); line-height: 1; }
.faq details[open] summary::after { content: '−'; }
.faq p { color: var(--muted); padding: 4px 0 10px; max-width: 34em; }
.closing { background: var(--green-pale); border-radius: 32px; padding: clamp(48px, 7vw, 96px) 24px; display: flex; flex-direction: column; align-items: center; gap: 24px; text-align: center; }
.closing h2 { font-size: clamp(40px, 6vw, 88px); line-height: 0.98; letter-spacing: -0.04em; max-width: 11em; }
.closing .lead { color: #2B4438; }
.closing .fineprint { color: #2B4438; margin-top: -8px; }
.site-footer { display: flex; flex-direction: column; gap: 28px; font-size: 15px; color: var(--muted); padding-bottom: 48px; }
.footer-line { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.sources { list-style: decimal; padding-left: 20px; display: flex; flex-direction: column; gap: 6px; font-size: 14px; max-width: 60em; }
.sources li:target { color: var(--ink); }


/* Big statement */
.statement { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; }
.statement .display { max-width: 9em; }
.statement .speed-card { width: min(520px, 100%); text-align: left; margin-top: 12px; }

/* Revenue calculator */
.field { display: flex; flex-direction: column; gap: 4px; margin-top: 12px; }
.field label { font-size: 16px; font-weight: 600; color: #D5E5DB; }
.field-value { font-family: var(--display); font-weight: 600; font-size: 34px; letter-spacing: -0.02em; line-height: 1.1; font-variant-numeric: tabular-nums; }
.band-green input[type='range']::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--mint) var(--fill, 30%), rgba(255, 255, 255, 0.25) var(--fill, 30%)); }
.band-green input[type='range']::-moz-range-track { background: rgba(255, 255, 255, 0.25); }
.band-green input[type='range']::-moz-range-progress { background: var(--mint); }
.band-green input[type='range']::-webkit-slider-thumb { border-color: var(--mint); }
.band-green input[type='range']::-moz-range-thumb { border-color: var(--mint); }
.revenue-result { background: var(--white); color: var(--ink); border-radius: 28px; padding: clamp(24px, 4vw, 44px); display: flex; flex-direction: column; gap: 16px; }
.result-label { font-size: 17px; font-weight: 600; color: var(--muted); }
.result-total { font-family: var(--display); font-weight: 600; font-size: clamp(52px, 6.4vw, 96px); line-height: 0.95; letter-spacing: -0.045em; color: var(--green); font-variant-numeric: tabular-nums; }
.result-lines > div { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--line); font-size: 18px; }
.result-lines dt { color: var(--muted); }
.result-lines dd { font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.revenue-result .fineprint { color: var(--muted); }
.revenue-result a { color: var(--green); }

/* Smart categories */
.smart-card { padding: 28px; border-radius: 24px; display: flex; flex-direction: column; gap: 24px; }
.smart-head { display: flex; align-items: center; gap: 12px; }
.smart-title { font-weight: 600; font-size: 19px; margin-right: auto; }
.smart-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 24px; }
.smart-list { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.smart-list li { background: var(--grey-wash); border-radius: 12px; padding: 12px 14px; font-size: 16px; }

/* Comparison table */
.table-scroll { overflow-x: auto; border-radius: 24px; background: var(--white); box-shadow: 0 0 0 1px var(--line-soft); }
.compare-table { width: 100%; min-width: 900px; border-collapse: collapse; font-size: 15px; line-height: 1.4; }
.compare-table th, .compare-table td { padding: 16px 18px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line-soft); }
.compare-table tbody tr:last-child th, .compare-table tbody tr:last-child td { border-bottom: 0; }
.compare-table thead th { font-family: var(--display); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; vertical-align: bottom; }
.compare-table tbody th { font-weight: 600; width: 24%; }
.compare-table td { color: var(--muted); width: 19%; }
.compare-table .ours { background: var(--green-wash); color: var(--ink); font-weight: 600; }
.compare-table thead .ours { color: var(--green-deep); }
.yes, .no, .partly, .unknown { display: flex; align-items: center; gap: 6px; font-weight: 600; }
.yes { color: var(--green-deep); }
.no { color: var(--wrong); }
.partly { color: var(--amber); }
.unknown { color: var(--grey-text); font-weight: 400; }
.yes::before, .no::before, .partly::before { content: ''; width: 18px; height: 18px; border-radius: 50%; flex-shrink: 0; background-repeat: no-repeat; background-position: center; background-size: 10px; }
.yes::before { background-color: var(--green); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E"); }
.no::before { background-color: var(--wrong); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 4l8 8M12 4l-8 8'/%3E%3C/svg%3E"); }
.partly::before { background-color: var(--amber); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='3' stroke-linecap='round'%3E%3Cpath d='M4 8h8'/%3E%3C/svg%3E"); }

/* One number */
.one-stat { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 24px 64px; align-items: center; }
.stat-number { font-family: var(--display); font-weight: 600; font-size: clamp(120px, 19vw, 280px); line-height: 0.82; letter-spacing: -0.06em; color: var(--mint); font-variant-numeric: tabular-nums; }
.band-dark .stat-claim { font-family: var(--display); font-weight: 500; font-size: clamp(28px, 3.2vw, 46px); line-height: 1.12; letter-spacing: -0.025em; color: var(--mist); max-width: 14em; }

/* Removable chips */
.chip-stage { background: var(--mist); border-radius: 32px; padding: clamp(28px, 4vw, 56px); display: flex; flex-direction: column; gap: 20px; }
.chip-query { font-family: var(--display); font-weight: 500; font-size: clamp(26px, 2.6vw, 38px); letter-spacing: -0.02em; line-height: 1.1; }
.chip-stage .chip-toggle { font-size: 19px; padding: 12px 20px; min-height: 52px; }
.chip-summary { font-size: 19px; font-weight: 600; color: var(--green-deep); }
@media (min-width: 880px) { .split-reverse > :first-child { order: 0; } }

/* Three steps, each with a small moving picture */
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); gap: 24px; }
.step { background: var(--white); border-radius: 28px; padding: 20px 20px 28px; display: flex; flex-direction: column; gap: 10px; box-shadow: 0 0 0 1px var(--line-soft); }
.step h3 { font-size: 24px; }
.step p { color: var(--muted); }
.step-number { font-family: var(--display); font-weight: 600; font-size: 56px; color: var(--green); line-height: 1; margin-top: 12px; }
.step-visual { position: relative; height: 220px; border-radius: 18px; background: var(--mist); padding: 20px; display: flex; flex-direction: column; justify-content: center; gap: 14px; overflow: hidden; }

.store-bar { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; color: var(--muted); }
.shopify-logo { width: 26px; height: 26px; }
.app-card { display: flex; align-items: center; gap: 12px; background: var(--white); border-radius: 16px; padding: 14px; box-shadow: 0 8px 20px -12px rgba(31, 79, 62, 0.4); }
.app-icon { width: 44px; height: 44px; border-radius: 12px; background: var(--green); display: grid; place-items: center; flex-shrink: 0; }
.app-icon .mark { width: 28px; height: 28px; stroke: var(--white); }
.app-name { font-weight: 600; font-size: 17px; margin-right: auto; display: flex; flex-direction: column; line-height: 1.25; }
.app-name small { font-size: 13px; font-weight: 400; color: var(--muted); }
.install-button { position: relative; display: grid; place-items: center; min-width: 96px; height: 40px; border-radius: 999px; background: var(--ink); color: var(--white); font-size: 15px; font-weight: 600; }
.install-button span { grid-area: 1 / 1; }
.label-after { opacity: 0; }
.pointer { position: absolute; right: 22%; bottom: 8%; width: 22px; height: 22px; border-radius: 50%; background: rgba(27, 42, 35, 0.28); border: 2px solid var(--white); opacity: 0; }
.is-seen .install-button { animation: install-fill 6s ease infinite; }
.is-seen .label-before { animation: install-before 6s ease infinite; }
.is-seen .label-after { animation: install-after 6s ease infinite; }
.is-seen .pointer { animation: pointer-move 6s ease infinite; }
@keyframes pointer-move {
  0% { opacity: 0; transform: translate(40px, 30px); }
  12% { opacity: 1; }
  30% { transform: translate(0, -62px); }
  34% { transform: translate(0, -62px) scale(0.7); }
  38% { transform: translate(0, -62px); opacity: 1; }
  50%, 100% { transform: translate(0, -62px); opacity: 0; }
}
@keyframes install-fill { 0%, 34% { background: var(--ink); } 38%, 92% { background: var(--green); } 100% { background: var(--ink); } }
@keyframes install-before { 0%, 34% { opacity: 1; } 38%, 92% { opacity: 0; } 100% { opacity: 1; } }
@keyframes install-after { 0%, 34% { opacity: 0; } 38%, 92% { opacity: 1; } 100% { opacity: 0; } }

.learn-tags { display: flex; flex-wrap: wrap; gap: 8px; }
.learn-tags span { background: var(--white); color: var(--grey-text); padding: 6px 12px; border-radius: 999px; font-size: 14px; font-weight: 600; box-shadow: inset 0 0 0 1px var(--line-soft); }
.learn-bar { height: 6px; border-radius: 999px; background: var(--line-soft); overflow: hidden; }
.learn-bar span { display: block; height: 100%; width: 100%; background: var(--green); border-radius: 999px; transform: scaleX(0); transform-origin: left; }
.learn-label { font-size: 14px; color: var(--muted); }
.is-seen .learn-tags span { animation: tag-read 5.6s ease infinite; }
.is-seen .learn-tags span:nth-child(2) { animation-delay: 0.35s; }
.is-seen .learn-tags span:nth-child(3) { animation-delay: 0.7s; }
.is-seen .learn-tags span:nth-child(4) { animation-delay: 1.05s; }
.is-seen .learn-tags span:nth-child(5) { animation-delay: 1.4s; }
.is-seen .learn-tags span:nth-child(6) { animation-delay: 1.75s; }
.is-seen .learn-tags span:nth-child(7) { animation-delay: 2.1s; }
.is-seen .learn-tags span:nth-child(8) { animation-delay: 2.45s; }
.is-seen .learn-bar span { animation: bar-fill 5.6s linear infinite; }
@keyframes tag-read { 0%, 4% { background: var(--white); color: var(--grey-text); } 10%, 55% { background: var(--green-pale); color: var(--green-deep); } 62%, 100% { background: var(--white); color: var(--grey-text); } }
@keyframes bar-fill { 0% { transform: scaleX(0); } 55%, 90% { transform: scaleX(1); } 100% { transform: scaleX(0); } }
.visual-type .searchbox { background: var(--white); }

/* Languages */
.language-stage { display: flex; flex-direction: column; gap: 28px; }
.language-line { margin-top: 12px; border-top: 1px solid rgba(255, 255, 255, 0.18); border-bottom: 1px solid rgba(255, 255, 255, 0.18); padding: 36px 0; display: flex; flex-direction: column; gap: 20px; }
.language-query { font-family: var(--display); font-weight: 500; font-size: clamp(30px, 5vw, 72px); line-height: 1.1; letter-spacing: -0.03em; color: var(--white); min-height: 2.2em; display: flex; align-items: center; flex-wrap: wrap; gap: 4px; }
.language-query .caret { background: var(--mint); height: 1em; width: 3px; }
.language-result { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; min-height: 44px; }
.language-result .hint { color: #C9D6CD; }
.language-result .chip { background: var(--mint); color: var(--night); font-size: 17px; padding: 8px 16px; }
.band-dark .language-list li { border-color: rgba(255, 255, 255, 0.35); }

/* Pricing extras */
.launch-tag { display: inline-block; background: var(--green); color: var(--white); font-size: 13px; font-weight: 600; padding: 2px 10px; border-radius: 999px; vertical-align: middle; }

/* Where Mezcal sits */
.spectrum { display: flex; flex-direction: column; gap: 28px; }
.spectrum-track { position: relative; height: 8px; border-radius: 999px; background: linear-gradient(to right, #B9C7BD, var(--green) 50%, #B9C7BD); margin: 26px 0 6px; }
.spectrum-marker { position: absolute; top: 50%; left: 0; width: 60px; height: 60px; margin: -30px 0 0 -30px; border-radius: 50%; background: var(--green); display: grid; place-items: center; box-shadow: 0 0 0 6px var(--green-wash), 0 10px 24px -8px rgba(31, 79, 62, 0.6); transition: left 1.4s cubic-bezier(0.34, 1.3, 0.5, 1) 0.3s; }
.spectrum-marker .mark { width: 34px; height: 34px; stroke: var(--white); }
.is-seen .spectrum-marker { left: 50%; }
.spectrum-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(280px, 100%), 1fr)); gap: 20px; align-items: stretch; }
.spectrum-card { background: rgba(255, 255, 255, 0.6); border-radius: 24px; padding: 28px; display: flex; flex-direction: column; gap: 8px; color: var(--muted); }
.spectrum-card h3 { color: var(--ink); }
.spectrum-end { font-size: 14px; font-weight: 600; color: var(--grey-text); }
.spectrum-price { font-family: var(--display); font-weight: 600; font-size: clamp(32px, 3.2vw, 44px); line-height: 1.05; letter-spacing: -0.03em; color: var(--ink); }
.spectrum-card.is-ours { background: var(--green-deep); color: #D5E5DB; box-shadow: 0 30px 50px -30px rgba(31, 79, 62, 0.7); }
.spectrum-card.is-ours h3, .spectrum-card.is-ours .spectrum-price { color: var(--white); }
.spectrum-card.is-ours .spectrum-price { font-size: clamp(48px, 5vw, 72px); }
.spectrum-card.is-ours .spectrum-end { color: var(--mint); }

/* Promises */
.promise-rows li { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(360px, 100%), 1fr)); gap: 12px 64px; padding: 32px 0; border-top: 1px solid rgba(255, 255, 255, 0.22); align-items: baseline; }
.promise-rows li:last-child { border-bottom: 1px solid rgba(255, 255, 255, 0.22); }
.promise-rows p { font-size: 19px; color: #D5E5DB; max-width: 28em; }

/* Old-fashioned search ends empty */
.no-results { flex: 1; min-height: 266px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; text-align: center; background: var(--white); border-radius: 16px; border: 1.5px dashed #D9B9A9; animation: row-in 0.3s ease both; }
.no-results-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--wrong); display: grid; place-items: center; margin-bottom: 8px; animation: pop-in 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 0.1s both; }
.no-results-icon svg { width: 30px; height: 30px; fill: none; stroke: var(--white); stroke-width: 2.6; stroke-linecap: round; }
.no-results-title { font-family: var(--display); font-weight: 600; font-size: 26px; letter-spacing: -0.02em; color: var(--wrong); }
.no-results-hint { font-size: 15px; color: var(--grey-text); }
@keyframes pop-in { from { opacity: 0; transform: scale(0.3); } }

/* Category suggestions */
.new-tag { background: var(--green); color: var(--white); font-size: 13px; font-weight: 600; padding: 3px 10px; border-radius: 999px; }
.smart-new li { background: var(--green-pale); color: var(--green-deep); font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 6px 6px 6px 14px; }
.add-button { min-width: 72px; min-height: 36px; padding: 6px 14px; border: 0; border-radius: 999px; background: var(--white); color: var(--green-deep); font: 600 15px var(--body); cursor: pointer; transition: background-color 0.2s ease, color 0.2s ease; }
.add-button:hover { background: var(--mist); }
.add-button[aria-pressed='true'] { background: var(--green); color: var(--white); }

/* Pricing */

.calculator { background: var(--night); color: var(--mist); border-radius: 36px; padding: clamp(28px, 5vw, 64px); display: flex; flex-direction: column; gap: 12px; }
.calculator label { font-size: 18px; font-weight: 600; color: #C9D6CD; }
.searches-out { font-family: var(--display); font-weight: 600; font-size: clamp(72px, 13vw, 190px); line-height: 0.88; letter-spacing: -0.055em; color: var(--mint); font-variant-numeric: tabular-nums; }
.calculator input[type='range'] { margin: 20px 0 12px; }
.calculator input[type='range']::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--mint) var(--fill, 0%), rgba(255, 255, 255, 0.2) var(--fill, 0%)); }
.calculator input[type='range']::-moz-range-track { background: rgba(255, 255, 255, 0.2); }
.calculator input[type='range']::-moz-range-progress { background: var(--mint); }
.calculator input[type='range']::-webkit-slider-thumb { border-color: var(--mint); width: 34px; height: 34px; margin-top: -13px; }
.calculator input[type='range']::-moz-range-thumb { border-color: var(--mint); }
.price-line { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; font-size: 19px; color: #C9D6CD; }
.price-out { font-family: var(--display); font-weight: 600; font-size: clamp(36px, 4.4vw, 60px); line-height: 1; letter-spacing: -0.035em; color: var(--white); font-variant-numeric: tabular-nums; }
.list-price { font-size: 16px; color: #C9D6CD; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 28px; }
.list-price s { color: #A9BAAF; }
.list-price.is-same { visibility: hidden; }
.calculator .launch-tag { background: var(--mint); color: var(--night); }
.cap-line { margin-top: 20px; padding-top: 28px; border-top: 1px solid rgba(255, 255, 255, 0.18); display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cap-line p { font-size: 19px; color: #C9D6CD; max-width: 32em; }
.cap-line strong { color: var(--white); font-weight: 600; }
.button-mint { background: var(--mint); color: var(--night); }
.button-mint:hover { background: var(--white); color: var(--night); }

/* Promises: one loud heading, quiet rows under it */
.promise-rows h3 { font-family: var(--display); font-weight: 600; font-size: clamp(22px, 2vw, 28px); line-height: 1.15; letter-spacing: -0.02em; }

@media (max-width: 760px) {
  .nav-link { display: none; }
  .band { padding: 72px 20px; }
  .band-tight-top { padding-top: 0; }
  .band-flush { padding-top: 0; padding-bottom: 72px; }
  .hero { padding-top: 8px; padding-bottom: 72px; gap: 40px; }
  .split { gap: 40px; }
  .demo { padding: 18px; border-radius: 22px; }
  .searchbox { font-size: 16px; padding: 12px 14px; }
  .searchbox-small { font-size: 15px; }
  .panel { padding: 18px; }
  .quote { grid-template-columns: 96px minmax(0, 1fr); }
  .quote img { width: 96px; height: 120px; }

  /* Hero: the store field and the Install button fit on the first screen of a small phone */
  .site-header { padding-top: 12px; padding-bottom: 12px; }
  .site-header .button-small { padding: 10px 18px; }
  .site-nav { gap: 12px; }
  .nav-cta-more { display: none; }
  .hero-copy { gap: 16px; }
  .hero .lead { font-size: 17px; line-height: 1.45; }
  .hero .try-store { gap: 8px; }
  .try-store-help { font-size: 14px; line-height: 1.4; }
  .try-store { gap: 8px; }
  .try-store-label { font-size: 21px; }
  .try-store-dark { margin-top: 8px; padding-top: 28px; }
  .try-store-row { gap: 8px; }
  .try-store-input { flex-basis: 160px; min-height: 52px; }
  .try-store .button { padding-left: 22px; padding-right: 22px; }

  /* Hero demo: one product per row, and every block keeps its height while the search is typed */
  .demo { gap: 14px; }
  .demo .searchbox { min-height: 76px; }
  .demo-status { gap: 8px; min-height: 104px; align-content: flex-start; }
  .demo-status .chips { display: contents; }
  .demo .chip { font-size: 15px; padding: 6px 13px; }
  .product-grid { grid-template-columns: minmax(0, 1fr); gap: 8px; }
  .tile { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; min-height: 56px; padding: 8px 12px 8px 10px; }
  .tile-text { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
  .tile-name, .tile-price { font-size: 15px; }
  .thumb { width: 32px; height: 32px; border-radius: 8px; }
  .thumb svg { width: 18px; height: 18px; }

  .compare .panel-head { flex-direction: column; align-items: flex-start; gap: 6px; min-height: 68px; }
  .compare .searchbox { min-height: 74px; }
  .compare [data-compare-chips] { min-height: 84px; }
  .compare .rows { min-height: 306px; }

  /* Small text that is meant to be read */
  .row-detail, .row-verdict, .spectrum-end, .learn-tags span, .learn-label { font-size: 15px; }
}

/* Where Mezcal sits: the track only makes sense while the three cards sit side by side */
@media (max-width: 927px) {
  .spectrum-track { display: none; }
}

/* Comparison table on phones: one card per feature, each product named next to its answer */
@media (max-width: 640px) {
  .table-scroll { overflow: visible; background: none; box-shadow: none; border-radius: 0; }
  .compare-table, .compare-table tbody, .compare-table tr, .compare-table th, .compare-table td { display: block; }
  .compare-table { min-width: 0; }
  .compare-table thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .compare-table tbody { display: flex; flex-direction: column; gap: 12px; }
  .compare-table tr { background: var(--white); border-radius: 20px; box-shadow: 0 0 0 1px var(--line-soft); overflow: hidden; }
  .compare-table tbody th { width: auto; padding: 16px 16px 12px; font-size: 17px; line-height: 1.3; border-bottom: 0; }
  .compare-table td { display: flow-root; width: auto; padding: 10px 16px 10px 132px; border-bottom: 0; border-top: 1px solid var(--line-soft); }
  .compare-table td::before { content: attr(data-label); float: left; width: 104px; margin-left: -116px; font-weight: 600; color: var(--ink); }
  .compare-table td.ours::before { color: var(--green-deep); }
}

/* Tap areas of at least 44 x 44 px for small links and controls. The extra area is invisible, so nothing looks different. */
.brand { min-height: 44px; }
sup a, .sources a, .add-button, .try-store-label, .field label, .calculator label { position: relative; }
sup a::after, .sources a::after, .add-button::after, .try-store-label::after, .field label::after, .calculator label::after {
  content: ''; position: absolute; left: 50%; top: 50%; width: max(100%, 44px); height: max(100%, 44px); transform: translate(-50%, -50%);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .caret { animation: none; }
  .is-seen .install-button, .is-seen .label-before, .is-seen .label-after, .is-seen .pointer, .is-seen .learn-tags span, .is-seen .learn-bar span { animation: none; }
  .spectrum-marker { transition: none; }
  .chip, .tally, .verdict-icon, .panel, .row .thumb, .grid-note, .switch-knob, .smart-new li { transition: none; }
  .row { animation: none; }
}

/* Privacy notice (privacy.html, fi/tietosuoja.html): plain readable text. */
.legal { max-width: 760px; padding-top: 40px; padding-bottom: 88px; }
.legal h1 { font-size: clamp(40px, 4.6vw, 60px); margin-bottom: 20px; }
.legal h2 { font-size: clamp(26px, 2.4vw, 32px); line-height: 1.15; letter-spacing: -0.02em; margin: 56px 0 16px; }
.legal h3 { font-size: 20px; margin: 32px 0 8px; }
.legal p, .legal ul { margin-bottom: 14px; }
.legal ul { list-style: disc; padding-left: 1.25em; }
.legal li { margin-bottom: 6px; }
.legal .updated { font-size: 15px; color: var(--muted); }
.legal dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 20px; margin-bottom: 14px; }
.legal dt { font-weight: 600; }
.legal code { font-size: 0.92em; background: var(--green-wash); border-radius: 4px; padding: 1px 5px; overflow-wrap: anywhere; }
.footer-privacy[aria-current="page"] { color: var(--ink); text-decoration: none; }
@media (max-width: 640px) {
  .legal { padding-top: 16px; padding-bottom: 56px; }
  .legal h2 { margin-top: 40px; }
  .legal dl { grid-template-columns: 1fr; gap: 2px; }
  .legal dd { margin: 0 0 10px; }
}

/* 404 page (404.html): one short message and two ways out. Both languages are in the markup; not-found.js hides one. */
.not-found { display: flex; flex-direction: column; gap: 48px; padding-top: 48px; padding-bottom: 96px; }
.not-found-copy { display: flex; flex-direction: column; gap: 20px; align-items: flex-start; }
.not-found-copy[hidden], [data-lang-only][hidden] { display: none; }
.not-found-code { font-family: var(--display); font-weight: 600; font-size: 22px; letter-spacing: -0.01em; color: var(--green); }
.not-found-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 8px; }