/* Sydänystävä marketing site — light, warm, high-contrast, hairline
   dividers instead of cards. Deliberately plain: this audience needs to
   read it comfortably first, feel the brand second.

   Three house rules for anything added here:
     1. The headline dominates - it's the largest thing on the screen by a
        wide margin, everything else is deliberately quieter.
     2. One accent-color hit per screen, used functionally not decoratively.
     3. Any visual motif should be real product content, not an abstract
        graphic or stock imagery.

   Colors are chosen and checked against WCAG 2.2 AA (see
   research/FINDINGS.md Track 1 on the EU Accessibility Act baseline):
   text/text-muted on bg/surface and white-on-accent all clear 4.5:1 (most
   clear 5:1+), the border token clears the 3:1 non-text/UI-component
   threshold against bg. */

:root {
  --bg: #fbf6f1;
  --surface: #ffffff;
  --border: #8a7a6d;
  --text: #241c17;
  --text-muted: #5c5047;
  --accent: #c2375f;
  --accent-fill: #9c2348;
  --gold: #8a6414;
}

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

html {
  color-scheme: light;
}

body {
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  position: relative;
  min-height: 100vh;
}

body.no-scroll { overflow: hidden; }

img { max-width: 100%; height: auto; display: block; }

a { color: inherit; text-decoration: none; }

.skip-link {
  position: absolute;
  left: -999px;
  top: auto;
}
.skip-link:focus {
  left: 12px;
  top: 12px;
  z-index: 200;
  background: var(--surface);
  border: 1px solid var(--border);
  padding: 8px 14px;
  border-radius: 6px;
}

.grain {
  /* Disabled for the light theme: an overlay-blend noise texture reads as
     dirt/smudging on a clean light background rather than the moody
     dark-theme texture it was designed for. Left in the markup/CSS (rather
     than removed from templates) so it's a one-line re-enable if a future
     theme wants it back. */
  display: none;
  position: fixed;
  inset: 0;
  z-index: -1;
  opacity: .12;
  mix-blend-mode: overlay;
  pointer-events: none;
  background-image: url("data:image/png;base64,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");
  background-size: 160px 160px;
  background-repeat: repeat;
}

.container {
  max-width: 640px;
  margin: 0 auto;
  padding: 0 20px;
}

/* ── buttons ──────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 17px;
  letter-spacing: .01em;
  border-radius: 999px;
  padding: 10px 20px;
  border: 1px solid transparent;
  cursor: pointer;
}
.btn-primary {
  background: var(--accent-fill);
  color: #fff;
}
.btn-primary:hover { background: var(--accent); }
.btn-ghost {
  background: transparent;
  border-color: var(--border);
  color: var(--text);
}
.btn-ghost:hover { border-color: var(--text-muted); }
.btn-sm { font-size: 15px; padding: 7px 14px; }
.btn-lg {
  font-size: 18px;
  padding: 14px 30px;
  width: 100%;
  max-width: 340px;
}
.btn-block { width: 100%; }

/* ── header ───────────────────────────────────────────────────── */
.site-header {
  position: relative;
  border-bottom: 1px solid var(--border);
}
.header-inner {
  max-width: 640px;
  margin: 0 auto;
  padding: 16px 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.logo {
  font-size: 21px;
  font-weight: 800;
  letter-spacing: -.01em;
}
.logo-dot { color: var(--accent); }
.header-nav {
  display: flex;
  align-items: center;
  gap: 8px;
}

/* ── breadcrumbs (blog posts) ─────────────────────────────────── */
.breadcrumbs {
  font-size: 15px;
  color: var(--text-muted);
  margin-bottom: 18px;
}
.breadcrumbs a {
  color: var(--text-muted);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.breadcrumbs a:hover {
  color: var(--text);
}
.breadcrumbs .sep {
  margin: 0 6px;
  opacity: .6;
}

/* ── hero ─────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: 40px 0 40px;
  text-align: center;
}

.hero h1 {
  font-size: clamp(44px, 13vw, 92px);
  font-weight: 800;
  line-height: .98;
  letter-spacing: -.03em;
}
.hero h1 .accent { color: var(--accent); }

.hero-sub {
  /* Default gives the subhead its own breathing room under the headline.
     Pages that run the tag carousel (see below) zero this out, since the
     carousel's own top margin already provides that space - without this
     override a page without the carousel (e.g. a city landing page) would
     have the subhead sitting almost flush against the h1. */
  margin-top: 28px;
  font-size: 17px;
  color: var(--text-muted);
  font-weight: 500;
  line-height: 1.5;
  max-width: 400px;
  margin-left: auto;
  margin-right: auto;
}
.tag-carousel + .container .hero-sub {
  margin-top: 0;
}

.hero-offer {
  margin: 22px auto 0;
  max-width: 400px;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text-muted);
}
.hero-offer .gold { color: var(--gold); }
.hero-offer b.gold { font-weight: 700; }

.hero .btn-primary {
  margin-top: 26px;
}

.hero-note {
  margin-top: 14px;
  font-size: 15px;
  color: var(--text-muted);
  font-weight: 600;
}

/* ── tag carousel: the one visual motif, see HTML comment ────────── */
.tag-carousel {
  margin: 20px 0 24px;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}
.tag-carousel-track {
  display: flex;
  gap: 10px;
  width: max-content;
  animation: tag-carousel-scroll 32s linear infinite;
}
@keyframes tag-carousel-scroll {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .tag-carousel-track { animation: none; }
}
.pill {
  flex: 0 0 auto;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 8px 16px;
  line-height: 1;
  white-space: nowrap;
}
.pill-accent {
  color: var(--accent);
  border-color: var(--accent);
}

/* ── trust ────────────────────────────────────────────────────── */
.trust {
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: 26px 0;
  text-align: center;
}
.trust-main {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.5;
  color: var(--text);
  max-width: 460px;
  margin: 0 auto;
}
.trust-sub {
  margin-top: 10px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-muted);
}

/* ── content sections (SEO/value sections below the fold) ───────
   Same restraint as the rest of the page: hairline divider between
   sections, no cards, no boxed grids. Kicker + heading stay centered
   like the hero; body paragraphs are left-aligned within a narrow
   column, multi-sentence prose reads better left-aligned than
   centered even on an otherwise centered page. */
.section {
  padding: 44px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}
.section-kicker {
  display: block;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
}
.section h2 {
  font-size: clamp(24px, 6vw, 32px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.01em;
  margin-bottom: 18px;
}
.section h2 .accent {
  color: var(--accent);
}
.section p {
  text-align: left;
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
  max-width: 560px;
  margin: 0 auto;
}
.section p + p {
  margin-top: 14px;
}

/* real content (city names), not decoration - same pill as the hero
   carousel, reused deliberately for consistency, just static here */
.city-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  max-width: 560px;
  margin: 16px auto 0;
}

/* the section's one visual anchor: a pulled-out line, editorial style,
   left accent border instead of a full pull-quote block */
.section-pull {
  max-width: 480px;
  margin: 20px auto !important;
  padding-left: 18px;
  border-left: 3px solid var(--accent);
  font-size: clamp(18px, 4.5vw, 21px) !important;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text) !important;
}
.section-pull .accent {
  color: var(--accent);
}
.section .check-list + p,
.section .compare + .section-note {
  margin-top: 18px;
}

/* alternating tint so back-to-back sections read as distinct blocks
   instead of one long repeating strip, no new colors introduced */
.section-alt {
  background: var(--surface);
}

.section-note {
  margin-top: 16px !important;
  font-size: 16px !important;
}
.section-note a {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}

.plain-list {
  list-style: none;
  max-width: 560px;
  margin: 18px auto 0;
  padding: 0;
  text-align: left;
}
.plain-list li {
  padding: 12px 0;
  border-top: 1px solid var(--border);
  font-size: 17px;
  line-height: 1.55;
  color: var(--text-muted);
}
.plain-list li strong { color: var(--text); }
.plain-list li:first-child {
  border-top: none;
}

.check-list {
  list-style: none;
  max-width: 560px;
  margin: 18px auto 0;
  padding: 0;
  text-align: left;
}
.check-list li {
  position: relative;
  padding: 6px 0 6px 26px;
  font-size: 16px;
  color: var(--text-muted);
}
/* ── event list (Helsinki page's live events section) ────────────
   Same hairline-divider convention as .plain-list, not a card grid, just
   with a small thumbnail per row since this content (unlike everything
   else on the page) has real, licensed photos attached. */
.event-list {
  list-style: none;
  max-width: 560px;
  margin: 18px auto 0;
  padding: 0;
  text-align: left;
}
.event-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.event-item:first-child {
  border-top: none;
}
.event-thumb {
  flex: 0 0 auto;
  width: 60px;
  height: 60px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  display: block;
}
.event-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.event-info {
  min-width: 0;
}
.event-name {
  display: block;
  font-size: 16px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
a.event-name:hover {
  text-decoration: underline;
}
.event-meta {
  margin-top: 2px;
  font-size: 15px;
  color: var(--text-muted);
}

.check-list li::before {
  content: '\2713';
  position: absolute;
  left: 0;
  top: 6px;
  font-weight: 800;
  color: var(--accent);
}

/* free vs Premium, side by side at wider widths, plain text columns
   rather than a boxed comparison table */
.compare {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 560px;
  margin: 20px auto 0;
  text-align: left;
}
.compare-col h3 {
  font-size: 16px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 4px;
}
.compare-col .plain-list {
  max-width: none;
  margin-top: 4px;
}
@media (min-width: 560px) {
  .compare { grid-template-columns: 1fr 1fr; }
}

/* ── blog post list (blogi/ index) ───────────────────────────────
   Same hairline-divider convention as .plain-list, just with a linked
   title + excerpt per row instead of a single line. */
.post-list {
  list-style: none;
  max-width: 560px;
  margin: 18px auto 0;
  padding: 0;
  text-align: left;
}
.post-item {
  padding: 18px 0;
  border-top: 1px solid var(--border);
}
.post-item:first-child {
  border-top: none;
  padding-top: 0;
}
.post-item a {
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  text-decoration: none;
}
.post-item a:hover {
  color: var(--accent);
}
.post-date {
  display: block;
  margin-top: 10px;
  font-size: 15px;
  color: var(--text-muted);
}
.post-item .post-excerpt {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── article body (continuous blog post, no chunked sections) ───
   Unlike .section, this is left-aligned throughout (headings included)
   and doesn't alternate background per block - it's one flowing read. */
.article {
  padding: 8px 0 44px;
}
.article h2 {
  margin-top: 36px;
  margin-bottom: 14px;
  font-size: clamp(20px, 5vw, 26px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.01em;
  color: var(--text);
}
.article h2:first-child {
  margin-top: 0;
}
.article p {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
}
.article p + p {
  margin-top: 14px;
}
.article ul {
  padding-left: 20px;
}
.article p + ul,
.article ul + p {
  margin-top: 14px;
}
.article li {
  font-size: 17px;
  line-height: 1.65;
  color: var(--text-muted);
}
.article li + li {
  margin-top: 6px;
}
.article a:not(.btn) {
  color: var(--text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.article .btn {
  margin-top: 22px;
}
.article .hero-note {
  text-align: left;
  margin-top: 10px;
}

/* ── FAQ ──────────────────────────────────────────────────────── */
.faq-list {
  max-width: 600px;
  margin: 22px auto 0;
  text-align: left;
}
.faq-item {
  border-top: 1px solid var(--border);
  padding: 14px 0;
}
.faq-item:last-child {
  border-bottom: 1px solid var(--border);
}
.faq-item summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  font-weight: 700;
  font-size: 17px;
  color: var(--text);
}
.faq-item summary::-webkit-details-marker {
  display: none;
}
.faq-item summary::after {
  content: '+';
  flex: 0 0 auto;
  font-size: 21px;
  font-weight: 400;
  color: var(--text-muted);
}
.faq-item[open] summary::after {
  content: '\2212';
}
.faq-item p {
  margin-top: 10px;
  font-size: 16px;
  line-height: 1.6;
  color: var(--text-muted);
}

/* ── closing CTA ──────────────────────────────────────────────── */
.closing {
  padding: 48px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}
.closing h2 {
  font-size: clamp(26px, 7vw, 36px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.01em;
}
.closing p {
  margin-top: 12px;
  font-size: 17px;
  color: var(--text-muted);
}
.closing .btn-primary {
  margin-top: 22px;
}

/* ── footer ───────────────────────────────────────────────────── */
.site-footer {
  padding: 40px 0 48px;
  text-align: center;
}
.site-footer p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
}
.site-footer p + p { margin-top: 6px; }
.site-footer a { text-decoration: underline; text-underline-offset: 2px; }

/* ── age gate ─────────────────────────────────────────────────── */
.age-gate {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(6, 2, 5, .82);
  backdrop-filter: blur(6px);
}
.age-gate[hidden] { display: none; }

.age-gate-card {
  width: 100%;
  max-width: 360px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 32px 24px;
  text-align: center;
}
.age-gate-logo {
  font-size: 23px;
  margin-bottom: 18px;
}
.age-gate-card h2 {
  font-size: 21px;
  font-weight: 800;
  margin-bottom: 10px;
}
.age-gate-card p {
  font-size: 16px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 22px;
}
.age-gate-card .btn-lg {
  margin: 0 auto;
}
.age-gate-card .btn-ghost {
  margin-top: 12px;
  width: 100%;
  max-width: 340px;
}

/* ── survey (sydanystava.fi/tutkimus) ──────────────────────────────────
   Reuses .section/.container conventions (hairline dividers, no cards)
   for structure, but question *answers* are chip/pill buttons rather
   than bare native radio circles - bigger touch targets, easier to scan,
   still real <input type="radio"/"checkbox"> underneath (just visually
   hidden) so keyboard/screen-reader semantics are unchanged. */
.survey-form {
  max-width: 560px;
  margin: 24px auto 0;
  text-align: left;
}

.survey-progress {
  margin-bottom: 20px;
}
.survey-progress-track {
  background: var(--surface);
  border-radius: 999px;
  height: 6px;
  overflow: hidden;
}
.survey-progress-fill {
  height: 100%;
  background: var(--accent-fill);
  border-radius: 999px;
  width: 0%;
  transition: width .2s ease;
}
.survey-progress-label {
  margin-top: 6px;
  font-size: 15px;
  font-weight: 600;
  color: var(--text-muted);
}

/* Spacing is deliberately asymmetric, not the hairline-centered 20/20 split
   it started as: a heading must sit clearly CLOSER to its own answers than
   to the divider above it, or the eye groups it with the wrong question
   (Gestalt proximity) - margin-top (closing the previous group) is the
   biggest gap, padding-top (after the divider) is medium, and the
   legend's own margin-bottom (to its answers) is the smallest. */
.survey-field {
  border: none;
  margin-top: 32px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}
.survey-field:first-child { margin-top: 0; padding-top: 0; border-top: none; }
.survey-field legend,
.survey-field-label {
  display: block;
  font-size: 17px;
  font-weight: 700;
  color: var(--text);
  line-height: 1.4;
  margin-bottom: 10px;
  padding: 0;
}

.survey-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
/* Chip: the <label> is the visible control, the <input> is present but
   invisible (not display:none - that would drop it from the a11y tree
   and break keyboard operation). :has() selects the checked/focused
   state without any JS - broadly supported since 2023/2024. */
.survey-chip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 18px;
  border-radius: 999px;
  border: 1px solid var(--border);
  background: var(--surface);
  color: var(--text-muted);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  user-select: none;
  transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.survey-chip input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
}
.survey-chip:hover { border-color: var(--text-muted); }
.survey-chip:has(input:checked) {
  background: var(--accent-fill);
  border-color: var(--accent-fill);
  color: #fff;
}
.survey-chip:has(input:focus-visible) {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.survey-scale-row {
  display: flex;
  gap: 8px;
}
.survey-scale-row .survey-chip {
  flex: 1;
  min-width: 0;
  padding: 10px 8px;
}
.survey-scale-caption {
  display: flex;
  justify-content: space-between;
  margin-top: 6px;
  font-size: 15px;
  color: var(--text-muted);
}

.survey-select,
.survey-input,
.survey-textarea {
  width: 100%;
  min-height: 48px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  color: var(--text);
  font: inherit;
  /* 16px minimum - below this, iOS Safari auto-zooms the viewport on
     focus, which is a jarring, janky experience on a form this long. */
  font-size: 17px;
}
.survey-textarea { min-height: 90px; resize: vertical; }
.survey-select:focus,
.survey-input:focus,
.survey-textarea:focus { outline: 2px solid var(--accent); outline-offset: 1px; }

/* A consent/legal note - the site's own language for "secondary, not a
   card" is a thin left rule (.section-pull uses the same idea in accent
   color for emphasis; this is the neutral-border version for a note, not
   an emphasis). Deliberately NOT a filled, bordered, rounded box - this
   site's whole CSS is built on "hairline dividers instead of cards" (see
   the file's own header comment), and a boxed box nested inside another
   boxed element (this used to sit inside .survey-sensitive's own border)
   read as visual clutter for what's conceptually one simple aside. */
.survey-aside {
  border-left: 2px solid var(--border);
  padding-left: 16px;
}
.survey-aside > p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.5;
  margin-bottom: 12px;
}
.survey-aside .survey-field-label {
  font-size: 17px;
  margin-bottom: 10px;
}
.survey-aside > .survey-aside-revealed {
  margin-top: 16px;
}
/* A plain conditional follow-up within an ordinary (non-consent-gated)
   question, e.g. gender's "Jokin muu, mikä?" - no left-border aside
   treatment, since there's nothing here that needs its own consent. */
.survey-followup {
  margin-top: 14px;
}
.survey-followup .survey-field-label {
  font-size: 16px;
  margin-bottom: 8px;
}
/* This chip's label text is a full sentence, not a short answer option -
   the full 999px pill shape (right for "Kyllä"/"18–24") looks pinched once
   that much text wraps to two lines, so it gets its own, less rounded,
   left-aligned treatment instead of inheriting the generic chip shape. */
.survey-aside .survey-chip {
  display: flex;
  width: 100%;
  max-width: 420px;
  justify-content: flex-start;
  text-align: left;
  font-size: 15px;
  padding: 12px 16px;
  border-radius: 10px;
}

.survey-actions {
  margin-top: 24px;
  text-align: center;
}
.survey-actions .btn { width: 100%; max-width: 340px; }

.cf-turnstile { margin: 16px auto; display: flex; justify-content: center; }

/* Same left-rule language as .section-pull, not a filled/bordered box -
   color alone (coral for error, gold for success) carries the status,
   matching this site's existing "one accent hit, used functionally"
   rule rather than introducing a new filled-banner pattern. */
.survey-banner {
  max-width: 560px;
  margin: 18px auto 0;
  padding-left: 16px;
  font-size: 16px;
  line-height: 1.5;
  color: var(--text);
  text-align: left;
  border-left: 3px solid var(--border);
}
.survey-banner-error { border-left-color: var(--accent); }
.survey-banner-success { border-left-color: var(--gold); }
.survey-banner[hidden] { display: none; }

/* ── results: cross-tab filter bar ────────────────────────────────
   One row above the charts, per dataviz convention - every chart below
   re-renders against the same filter set, never a per-chart control.
   Hairline-divider treatment, same as every other grouped block on this
   page/site - no card. */
.survey-filters {
  max-width: 560px;
  margin: 24px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}
.survey-filter-add {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.survey-filter-add select {
  flex: 1 1 140px;
  min-width: 0;
  min-height: 44px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 8px 10px;
  color: var(--text);
  font: inherit;
  font-size: 17px;
}
.survey-filter-add button {
  flex: 0 0 auto;
}
.survey-filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 12px;
}
.survey-filter-chips:empty { margin-top: 0; }
.survey-filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--accent-fill);
  color: #fff;
  border-radius: 999px;
  padding: 7px 10px 7px 14px;
  font-size: 15px;
  font-weight: 600;
}
.survey-filter-chip button {
  background: rgba(255, 255, 255, .2);
  border: none;
  border-radius: 999px;
  width: 20px;
  height: 20px;
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.survey-filter-meta {
  margin-top: 12px;
  font-size: 15px;
  color: var(--text-muted);
}
.survey-filter-meta strong { color: var(--text); }

/* ── results: bar charts ───────────────────────────────────────────
   One hue (the brand accent) throughout - every chart here is a single
   series (one question's own answer distribution), so color encodes
   nothing beyond "this is a data bar"; length is what carries the
   value. Rounded data-end + square baseline, <=24px thick, direct
   value labels at the tip rather than a legend (a single series names
   itself via the question heading). */
.survey-results {
  max-width: 560px;
  margin: 18px auto 0;
  text-align: left;
  transition: opacity .15s ease;
}
.survey-results.is-loading { opacity: .5; }

.survey-result-row { padding: 14px 0; border-top: 1px solid var(--border); }
.survey-result-row:first-child { border-top: none; }
.survey-result-q {
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 10px;
  line-height: 1.4;
}
.survey-bar-group { display: flex; flex-direction: column; gap: 10px; }
.survey-bar-item { display: flex; flex-direction: column; gap: 4px; }
.survey-bar-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 8px;
  font-size: 15px;
}
.survey-bar-option { color: var(--text-muted); }
.survey-bar-value {
  font-weight: 700;
  color: var(--text);
  font-variant-numeric: tabular-nums;
}
.survey-bar-track {
  background: var(--surface);
  border-radius: 4px;
  height: 18px;
  overflow: hidden;
}
.survey-bar-fill {
  height: 100%;
  min-width: 4px;
  background: var(--accent-fill);
  /* rounded data-end (right), square at the baseline (left) */
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px;
}
.survey-result-note {
  font-size: 15px;
  color: var(--text-muted);
}
.survey-result-n {
  margin-top: 8px;
  font-size: 15px;
  color: var(--text-muted);
}

/* ── responsive: desktop ──────────────────────────────────────── */
@media (min-width: 720px) {
  .hero { padding: 72px 0 56px; }
  .pill { font-size: 16px; padding: 9px 18px; }
}

/* ── Legal pages (/kayttoehdot/) ─────────────────────────────────
   Mirrors the app's .privacy-page: a narrow reading column, plain
   headings, no cards. */
.legal-page { max-width: 680px; padding-top: 40px; padding-bottom: 72px; text-align: left; }
.legal-page h1 { font-size: 2rem; letter-spacing: -.02em; margin-bottom: 6px; }
.legal-updated { color: var(--text-muted); font-size: .95rem; margin-bottom: 28px; }
.legal-intro { font-size: 1.1rem; margin-bottom: 8px; }
.legal-page h2 { font-size: 1.2rem; letter-spacing: -.01em; margin: 32px 0 10px; }
.legal-page p { margin-bottom: 14px; line-height: 1.6; }
.legal-page ul { margin: 0 0 14px; padding-left: 22px; }
.legal-page li { margin-bottom: 10px; line-height: 1.6; }
.legal-page a { color: var(--accent); }