/* Flash-survey page (body.sv, flash-survey.html). Loaded after page.css, before responsive.css.
   Every selector is new and prefixed .sv-, so nothing here can reach another page.

   Type rule (Shahad, 2026-09-09): on a sub-page Space Grotesk is used only by .page h1 and the
   .eyebrow kicker, both of which come from page.css. The display figures here are therefore Mona
   Sans, like the newsletter figures -- no font-family of their own.

   Chart language: one horizontal bar per answer, indigo with the same fractal-noise grain the
   primary buttons carry (Figma "Start here" texture), on a --g100 track. Length is the only encoding
   -- every bar is the same colour, so a long bar means a big count and nothing else. A row carries
   its count in --v, the list its base in --n, and the fill is calc(--v / --n * 100%): the markup
   holds the data and the CSS does the arithmetic, so a bar can never disagree with its printed
   number. Label and count sit on one line above the bar at every width, which is why the charts need
   no reflow between breakpoints and survive the longer German labels. */

.sv-col { width: 1000px; }

/* The reliability note. It is the first thing under the headline on purpose: n = 13 is small and the
   page has to say so before it shows a single number. */
.sv-note {
  margin-top: 40px; width: 1000px; padding: 24px 28px;
  border: 1px solid var(--g200); border-left: 3px solid var(--indigo); border-radius: 14px;
  background: var(--g50); font-size: 16px; line-height: 26px; color: var(--g700);
}
.sv-note b { font-weight: 500; color: var(--g900); }

/* ---- headline figures ---- */
.sv-keys { margin-top: 40px; width: 1000px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.sv-key { padding: 28px 32px; border: 1px solid var(--g200); border-radius: 16px; background: var(--white); }
.sv-key-num { font-size: 40px; line-height: 48px; font-weight: 500; letter-spacing: -.6px; color: var(--black); font-variant-numeric: tabular-nums; }
.sv-key-lbl { margin-top: 10px; font-size: 17px; line-height: 26px; color: var(--g700); }

/* ---- section headings ---- */
.sv-h2 { margin-top: 72px; width: 1000px; font-size: 28px; line-height: 36px; font-weight: 500; letter-spacing: -.5px; color: var(--black); }
.sv-lead { margin-top: 12px; width: 840px; font-size: 17px; line-height: 28px; color: var(--g700); }

/* ---- charts ---- */
.sv-charts { margin-top: 28px; width: 1000px; display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: start; }
.sv-chart { margin: 0; padding: 28px; border: 1px solid var(--g200); border-radius: 16px; background: var(--white); }
.sv-chart.is-wide { grid-column: 1 / -1; }
.sv-chart h3 { font-size: 18px; line-height: 26px; font-weight: 500; color: var(--g900); }
.sv-cn { margin-top: 5px; font-size: 13px; line-height: 18px; color: var(--g500); }
.sv-bars { margin-top: 22px; display: flex; flex-direction: column; gap: 15px; }
/* Label and count on row 1, bar across both columns on row 2 -- identical at every width. */
.sv-bars li { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 7px 14px; align-items: baseline; }
.sv-lbl { font-size: 15px; line-height: 22px; color: var(--g700); }
.sv-val { font-size: 15px; line-height: 22px; font-weight: 500; color: var(--g900); font-variant-numeric: tabular-nums; }
.sv-bar { grid-column: 1 / -1; position: relative; height: 10px; border-radius: 999px; background: var(--g100); }
.sv-bar i {
  position: absolute; left: 0; top: 0; bottom: 0; border-radius: 999px;
  width: calc(var(--v) / var(--n) * 100%);
  background: linear-gradient(180deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.05) 55%, rgba(0,0,0,.07) 100%), var(--indigo);
  isolation: isolate; overflow: hidden;
}
/* Same texture as .btn-primary::after (css/site.css), at the same 120 px tile so the grain reads at
   the same scale as it does on the buttons next to it. */
.sv-bar i::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 120px 120px; opacity: .5; mix-blend-mode: overlay;
}
.sv-foot { margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--g200); font-size: 14px; line-height: 22px; color: var(--g700); }
.sv-foot b { font-weight: 500; color: var(--g900); }

/* ---- cross-tab ---- */
.sv-table { margin-top: 28px; width: 1000px; border: 1px solid var(--g200); border-radius: 16px; overflow: hidden; background: var(--white); }
.sv-table table { width: 100%; border-collapse: collapse; }
.sv-table th {
  text-align: left; padding: 14px 24px; background: var(--g50); border-bottom: 1px solid var(--g200);
  font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; color: var(--g500);
}
.sv-table td { padding: 16px 24px; border-top: 1px solid var(--g200); font-size: 15px; line-height: 24px; color: var(--g700); vertical-align: top; }
.sv-table tbody tr:first-child td { border-top: 0; }
.sv-table td:first-child { width: 38%; font-weight: 500; color: var(--g900); }

/* ---- the finding: the one indigo panel on the page ---- */
.sv-finding {
  position: relative; isolation: isolate; overflow: hidden;
  margin-top: 40px; width: 1000px; padding: 48px; border-radius: 20px; color: var(--white);
  background: linear-gradient(191.15deg, #7b6dff 0%, #6366f1 45%, #4f46e5 100%);
}
.sv-finding::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='120' height='120'><filter id='g' x='0' y='0' width='100%25' height='100%25'><feTurbulence type='fractalNoise' baseFrequency='.95' numOctaves='3' stitchTiles='stitch'/><feColorMatrix type='saturate' values='0'/></filter><rect width='100%25' height='100%25' filter='url(%23g)'/></svg>");
  background-size: 120px 120px; opacity: .5; mix-blend-mode: overlay;
}
.sv-finding h2 { font-size: 32px; line-height: 42px; font-weight: 500; letter-spacing: -.6px; }
.sv-finding p { margin-top: 18px; font-size: 17px; line-height: 28px; color: rgba(255,255,255,.84); max-width: 760px; }
.sv-finding p + p { margin-top: 14px; }
.sv-finding b { font-weight: 500; color: var(--white); }

/* ---- method ---- */
.sv-method { margin-top: 28px; width: 1000px; padding: 32px; border: 1px solid var(--g200); border-radius: 16px; background: var(--g50); }
.sv-method li { display: flex; gap: 12px; font-size: 15px; line-height: 24px; color: var(--g700); }
.sv-method li + li { margin-top: 12px; }
.sv-method li::before { content: ""; flex: none; width: 5px; height: 5px; margin-top: 9px; border-radius: 50%; background: var(--g400); }
.sv-src { margin-top: 24px; width: 1000px; font-size: 14px; line-height: 22px; color: var(--g500); }