/* =====================================================================
   FreeSurvey marketing stylesheet.
   Order: tokens.css -> brand.css (tokens + fonts) -> this file.
   Sections: reset, type, layout, components, page bits, compatibility.
   ===================================================================== */

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

body.skin-fsv {
  margin: 0;
  background: var(--paper);
  color: var(--ink-1);
  font-family: var(--brand-font);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

.skin-fsv img { max-width: 100%; height: auto; }
.skin-fsv a { color: var(--ink-1); text-decoration: none; }
.skin-fsv a:hover { color: var(--brand-600); }
.skin-fsv p { margin: 0 0 1em; text-wrap: pretty; }
.skin-fsv h1, .skin-fsv h2, .skin-fsv h3 { margin: 0; font-weight: 400; letter-spacing: -0.02em; }

/* ---------- type ---------- */
.fsv-display,
.skin-fsv h1, .skin-fsv h2, .skin-fsv h3 {
  font-family: var(--display-font);
  line-height: 1.06;
  text-wrap: balance;
}
.skin-fsv h1 { font-size: clamp(2.5rem, 6vw, 4.75rem); }
.skin-fsv h2 { font-size: clamp(1.9rem, 3.6vw, 2.5rem); line-height: 1.1; }
.skin-fsv h3 { font-size: 1.5rem; line-height: 1.15; }

.fsv-lead { font-size: 1.1875rem; line-height: 1.62; color: var(--ink-2); }
.fsv-body { font-size: 0.9375rem; line-height: 1.62; color: var(--ink-3); }
.fsv-meta { font-size: 0.8125rem; color: var(--ink-4); }
.fsv-eyebrow {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.13em;
  text-transform: uppercase; color: var(--ink-4);
}

/* The marker pen. Once a page, in the headline. A second one on the same
   screen turns a voice into a gimmick. */
.fsv-mark {
  background: linear-gradient(transparent 10%, var(--brand-300) 10%, var(--brand-300) 86%, transparent 86%);
  padding: 0 4px;
}

/* ---------- layout ---------- */
.fsv-wrap { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.fsv-section { padding: clamp(48px, 7vw, 76px) 0 0; }
.fsv-section--tint { background: var(--tint); margin-top: clamp(48px, 7vw, 76px); padding-bottom: clamp(48px, 7vw, 76px); }
.fsv-rule { border-top: 1px solid var(--rule); margin: clamp(48px, 7vw, 72px) 0 0; }
.fsv-stack { display: flex; flex-direction: column; gap: 16px; }
.fsv-row { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.fsv-grid { display: grid; gap: 24px; }
.fsv-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.fsv-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.fsv-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.fsv-split { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: clamp(28px, 4vw, 56px); align-items: start; }

/* ---------- buttons ---------- */
.fsv-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 13px 28px; border-radius: 999px;
  font-size: 1rem; font-weight: 600; border: 1.5px solid transparent;
  cursor: pointer; transition: background-color .15s ease, color .15s ease;
}
/* The green CTA. It is painted from --brand-accent rather than --brand-600
   because the site-config theme block repoints --brand-600 at ink, which is
   what made every primary button read black. Ink text on the lime clears
   contrast comfortably. */
.fsv-btn--primary { background: var(--brand-accent); color: var(--ink-1); font-weight: 700; }
.fsv-btn--primary:hover { background: var(--brand-400); color: var(--ink-1); }
.fsv-btn--ghost { border-color: var(--ink-1); color: var(--ink-1); background: transparent; }
.fsv-btn--ghost:hover { background: var(--brand-100); color: var(--ink-1); }
/* The one place the bright lime is a fill: on an ink panel. */
.fsv-btn--lime { background: var(--brand-300); color: var(--ink-1); font-weight: 700; }
.fsv-btn--lime:hover { background: var(--brand-400); color: var(--ink-1); }
.fsv-btn--sm { min-height: 40px; padding: 10px 20px; font-size: 0.875rem; }

.fsv-textlink { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.fsv-textlink svg { flex-shrink: 0; }

/* ---------- cards, pills, panels ---------- */
.fsv-card {
  background: var(--card); border: 1px solid var(--rule); border-radius: 6px;
  padding: 24px; display: flex; flex-direction: column; gap: 12px;
}
.fsv-card--flat { background: transparent; border: 0; padding: 0; }
.fsv-card--pick { border: 1.5px solid var(--ink-1); }
.fsv-card h3 { font-size: 1.5625rem; }

.fsv-pill {
  display: inline-flex; align-items: center; gap: 7px;
  border: 1px solid var(--rule); background: var(--card); color: var(--ink-2);
  border-radius: 999px; padding: 8px 15px; font-size: 0.84375rem; font-weight: 600;
}
.fsv-pill--on { background: var(--brand-300); border-color: var(--ink-1); color: var(--ink-1); }
.fsv-pill--plan { background: var(--brand-100); border-color: var(--brand-300); color: var(--brand-600); }

.fsv-panel { background: var(--tint); border-radius: 6px; padding: 28px 32px; }
.fsv-panel--lime { background: var(--brand-100); border: 1px solid var(--brand-300); border-radius: 6px; padding: 20px 24px; }
.fsv-panel--ink {
  background: var(--ink-1); color: var(--paper); border-radius: 6px;
  padding: clamp(28px, 4vw, 44px);
}
.fsv-panel--ink h2 { color: var(--paper); }
.fsv-panel--ink .fsv-hi { color: var(--brand-300); }

.fsv-quote { display: flex; align-items: center; gap: 26px; }
.fsv-quote__mark { font-family: var(--display-font); font-size: 3.5rem; line-height: 0.6; color: var(--brand-300); }
.fsv-quote__text { font-family: var(--display-font); font-size: 1.5rem; line-height: 1.35; max-width: 44ch; }

/* ---------- the answering-screen mock (hero) ---------- */
.fsv-mock { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 26px; }
.fsv-mock__bar { height: 3px; background: #EEECE2; border-radius: 999px; overflow: hidden; }
.fsv-mock__bar i { display: block; height: 3px; background: var(--brand-300); }
.fsv-mock__q { font-family: var(--display-font); font-size: 1.875rem; line-height: 1.2; }
.fsv-mock__opt {
  border: 1px solid var(--rule); border-radius: 6px; padding: 13px 16px;
  font-size: 0.9375rem; color: var(--ink-2); display: flex; align-items: center; gap: 11px;
}
.fsv-mock__opt--on { border: 1.5px solid var(--ink-1); color: var(--ink-1); font-weight: 600; }
.fsv-mock__dot { width: 15px; height: 15px; border-radius: 999px; border: 1px solid var(--rule-firm); flex-shrink: 0; }
.fsv-mock__opt--on .fsv-mock__dot { border: 1.5px solid var(--ink-1); background: var(--brand-300); }

/* ---------- bars (results preview) ---------- */
.fsv-bar { display: flex; align-items: center; gap: 12px; }
.fsv-bar__label { width: 150px; font-size: 0.8125rem; color: var(--ink-3); }
.fsv-bar__track { flex-grow: 1; height: 18px; background: var(--tint); border-radius: 4px; overflow: hidden; }
.fsv-bar__fill { height: 18px; background: var(--brand-300); border-radius: 0 4px 4px 0; }
.fsv-bar__value { width: 34px; font-size: 0.8125rem; font-weight: 700; text-align: right; }

/* ---------- comparison table ---------- */
.fsv-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.fsv-table th, .fsv-table td { text-align: left; padding: 13px 12px; border-top: 1px solid var(--rule); vertical-align: top; }
.fsv-table thead th {
  border-top: 0; font-size: 0.6875rem; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ink-4); font-weight: 700;
}
.fsv-table tbody td:first-child { color: var(--ink-2); }
.fsv-table .is-us { font-weight: 700; }
.fsv-table .is-them { color: var(--ink-3); }
.fsv-tablewrap { overflow-x: auto; }

/* ---------- nav and footer ---------- */
.fsv-nav { display: flex; align-items: center; gap: 30px; padding: 26px 0; }
.fsv-nav__links { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: 0.90625rem; font-weight: 500; color: var(--ink-2); }
.fsv-nav__links a { color: var(--ink-2); }
.fsv-nav__links a:hover { color: var(--ink-1); }

.fsv-logo { display: inline-flex; align-items: baseline; gap: 2px; font-family: var(--display-font); font-size: 1.6875rem; color: var(--ink-1); }
.fsv-logo em { font-style: italic; }
.fsv-logo i { width: 6px; height: 6px; border-radius: 999px; background: var(--brand-300); margin-left: 3px; align-self: center; }

.fsv-footer { margin-top: clamp(48px, 7vw, 76px); border-top: 1px solid var(--rule); padding: 36px 0 48px; }
.fsv-footer__cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; }
.fsv-footer a { display: block; font-size: 0.84375rem; color: var(--ink-3); padding: 4px 0; }
.fsv-footer h4 { font-family: var(--brand-font); font-size: 0.875rem; font-weight: 700; margin: 0 0 6px; }

/* ---------- signup form ---------- */
.fsv-form { display: flex; gap: 10px; flex-wrap: wrap; }
.fsv-input {
  flex: 1 1 260px; min-height: 48px; padding: 12px 16px;
  border: 1.5px solid var(--rule-firm); border-radius: 999px; background: var(--card);
  font-family: var(--brand-font); font-size: 1rem; color: var(--ink-1);
}
.fsv-input:focus { outline: none; border-color: var(--ink-1); box-shadow: 0 0 0 3px var(--brand-200); }
.fsv-form .field-validation-error, .fsv-form .validation-summary-errors { color: var(--clay); font-size: 0.84375rem; }

/* ---------- template pages ---------- */
.fsv-qlist { display: flex; flex-direction: column; gap: 0; }
.fsv-q { border-top: 1px solid var(--rule); padding: 20px 0; display: grid; grid-template-columns: 34px minmax(0, 1fr); gap: 16px; }
.fsv-q:last-child { border-bottom: 1px solid var(--rule); }
.fsv-q__n { font-family: var(--display-font); font-size: 1.375rem; color: var(--rule-firm); line-height: 1.3; }
.fsv-q__text { font-size: 1.0625rem; font-weight: 600; }
.fsv-q__why { font-size: 0.875rem; color: var(--ink-3); margin-top: 4px; }
.fsv-q__choices { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; }

/* ---------- responsive ---------- */
@media (max-width: 900px) {
  .fsv-split, .fsv-grid--2, .fsv-grid--3 { grid-template-columns: minmax(0, 1fr); }
  .fsv-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fsv-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .fsv-quote { flex-direction: column; align-items: flex-start; gap: 14px; }
  .fsv-nav { flex-wrap: wrap; gap: 14px; }
  .fsv-nav__links { gap: 16px; font-size: 0.875rem; }
}
@media (max-width: 560px) {
  .fsv-grid--4 { grid-template-columns: minmax(0, 1fr); }
  .fsv-bar__label { width: 108px; }
}

/* =====================================================================
   Compatibility subset.
   A few shared pages are written in generic grid, section and icon classes
   that this stylesheet does not otherwise define. The rules below cover them
   so those pages render correctly. Scoped so they stay local to this theme.
   ===================================================================== */
.skin-fsv .container { max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 72px); }
.skin-fsv .row { display: flex; flex-wrap: wrap; margin: 0 -12px; }
.skin-fsv [class^="col-"], .skin-fsv [class*=" col-"] { padding: 0 12px; width: 100%; }
.skin-fsv .text-center { text-align: center; }
.skin-fsv .d-flex { display: flex; }
.skin-fsv .flex-wrap { flex-wrap: wrap; }
.skin-fsv .justify-content-center { justify-content: center; }
.skin-fsv .gap-2 { gap: 8px; }
.skin-fsv .mb-2 { margin-bottom: 8px; }
.skin-fsv .mb-3 { margin-bottom: 16px; }
.skin-fsv .mb-4 { margin-bottom: 24px; }
.skin-fsv .mb-5 { margin-bottom: 40px; }
.skin-fsv .mt-5 { margin-top: 40px; }
.skin-fsv .my-5 { margin: 40px 0; }
.skin-fsv .fs-lg { font-size: 1.0625rem; }
.skin-fsv .text-muted { color: var(--ink-4); }
.skin-fsv .text-uppercase { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.6875rem; font-weight: 700; }
.skin-fsv .display-4 { font-family: var(--display-font); font-size: clamp(2.25rem, 5vw, 3.25rem); line-height: 1.06; }
.skin-fsv .text-reset { color: inherit; }
.skin-fsv .text-decoration-none { text-decoration: none; }
.skin-fsv .btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  min-height: 48px; padding: 13px 28px; border-radius: 999px;
  font-weight: 600; border: 1.5px solid transparent; text-decoration: none;
}
.skin-fsv .btn-lg { font-size: 1rem; }
.skin-fsv .btn-primary { background: var(--ink-1); color: var(--paper); }
.skin-fsv .btn-primary:hover { background: var(--brand-700); color: var(--paper); }
.skin-fsv .btn-outline-primary { border-color: var(--ink-1); color: var(--ink-1); }
.skin-fsv .btn-outline-primary:hover { background: var(--brand-100); }
.skin-fsv .mk-hero { padding: clamp(48px, 8vw, 88px) 0 0; }
.skin-fsv .mk-section { padding: clamp(40px, 6vw, 64px) 0; }
.skin-fsv .mk-section--alt { background: var(--tint); }
.skin-fsv .mk-eyebrow { font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4); }
.skin-fsv .mk-feature { background: var(--card); border: 1px solid var(--rule); border-radius: 6px; padding: 24px; height: 100%; }
.skin-fsv .mk-feature-icon { display: none; }
/* Icon font is not loaded here, so these placeholders stay hidden. */
.skin-fsv .fe { display: none; }

@media (min-width: 768px) {
  .skin-fsv .col-md-6 { width: 50%; }
  .skin-fsv .col-md-10 { width: 83.333%; }
}
@media (min-width: 992px) {
  .skin-fsv .col-lg-4 { width: 33.333%; }
  .skin-fsv .col-lg-8 { width: 66.666%; }
}
@media (min-width: 1200px) {
  .skin-fsv .col-xl-8 { width: 66.666%; }
}

/* =====================================================================
   2026-09 marketing overhaul.
   Keyword nav, the horizontal signup, the method tiles, and the results
   widgets the survey-type pages render. Everything here is FSV only, so it
   lives in this stylesheet rather than the shared marketing.css.
   ===================================================================== */

/* ---------- mega nav ---------- */
/* Hover opens it, focus-within keeps it open for keyboard and screen reader
   users, so there is no script behind this. */
.fsv-nav__item { position: relative; }
.fsv-nav__item > a { display: inline-flex; align-items: center; gap: 6px; }
.fsv-nav__item > a::after {
  content: ""; width: 5px; height: 5px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); opacity: .55;
}
.fsv-menu {
  position: absolute; top: 100%; left: 50%; transform: translateX(-50%);
  margin-top: 10px; padding: 22px 24px; z-index: 40;
  background: var(--card); border: 1px solid var(--rule); border-radius: 8px;
  box-shadow: 0 18px 40px rgba(20, 20, 16, .10);
  display: none; min-width: 240px;
}
.fsv-nav__item:hover > .fsv-menu,
.fsv-nav__item:focus-within > .fsv-menu { display: block; }
/* The 10px above the panel is air, but hover is what holds the panel open, so
   those pixels still have to belong to something inside .fsv-nav__item. Left
   empty they belong to nothing, and the pointer loses :hover crossing them on
   its way to the links. Reach back up over the margin. */
.fsv-menu::before {
  content: ""; position: absolute; left: 0; right: 0;
  top: -10px; height: 10px;   /* matches the margin-top above */
}
.fsv-menu__cols { display: grid; grid-template-columns: repeat(2, minmax(140px, 1fr)); gap: 8px 30px; }
.fsv-menu__cols--1 { grid-template-columns: minmax(180px, 1fr); }
.fsv-menu a {
  display: block; padding: 6px 0; font-size: 0.875rem; font-weight: 500; color: var(--ink-2);
  white-space: nowrap;
}
.fsv-menu a:hover { color: var(--brand-600); }
.fsv-menu a.is-all { border-top: 1px solid var(--rule); margin-top: 6px; padding-top: 10px; font-weight: 700; }
.fsv-menu h4 {
  font-family: var(--brand-font); font-size: 0.6875rem; font-weight: 700;
  letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-4);
  margin: 0 0 6px;
}

/* ---------- horizontal signup ---------- */
/* One row on desktop, three on a phone. The SSO strip below is a real slot
   that renders nothing until the providers are wired, so adding them later
   is markup only and nothing moves. */

.fsv-or {
  display: flex; align-items: center; gap: 14px;
  margin: 16px 0 12px; font-size: 0.78125rem; color: var(--ink-4);
}
.fsv-or::before, .fsv-or::after { content: ""; flex: 1; border-top: 1px solid var(--rule); }
.fsv-sso { display: flex; gap: 10px; flex-wrap: wrap; }
.fsv-sso:empty { display: none; }
.fsv-sso:empty + .fsv-or, .fsv-or:has(+ .fsv-sso:empty) { display: none; }
.fsv-sso__btn {
  flex: 1 1 150px; min-height: 46px; display: inline-flex; align-items: center;
  justify-content: center; gap: 9px; border: 1.5px solid var(--rule-firm);
  border-radius: 999px; background: var(--card);
  font-size: 0.9375rem; font-weight: 600; color: var(--ink-2);
}
.fsv-sso__btn:hover { border-color: var(--ink-1); color: var(--ink-1); }


/* ---------- method tiles ---------- */
.fsv-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.fsv-tile {
  border: 1px solid var(--rule); border-radius: 6px; background: var(--card);
  padding: 16px 18px; display: flex; flex-direction: column; gap: 4px;
  transition: border-color .15s ease, background-color .15s ease;
}
.fsv-tile:hover { border-color: var(--ink-1); background: var(--brand-100); }
.fsv-tile__name { font-size: 0.96875rem; font-weight: 700; color: var(--ink-1); }
.fsv-tile__note { font-size: 0.8125rem; color: var(--ink-4); }

@media (max-width: 900px) { .fsv-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fsv-tiles { grid-template-columns: minmax(0, 1fr); } }

/* ---------- the AI prompt panel (hero) ---------- */
.fsv-prompt {
  border: 1.5px solid var(--ink-1); border-radius: 6px; background: var(--card);
  padding: 16px 18px; font-size: 0.9375rem; color: var(--ink-2); line-height: 1.5;
}
.fsv-prompt em { font-style: normal; background: var(--brand-200); padding: 0 3px; }
.fsv-flow { display: flex; flex-direction: column; gap: 10px; }
.fsv-flow__arrow { display: flex; align-items: center; gap: 10px; color: var(--ink-4); font-size: 0.78125rem; }
.fsv-flow__arrow::after { content: ""; flex: 1; border-top: 1px dashed var(--rule-firm); }
.fsv-genq {
  border: 1px solid var(--rule); border-radius: 6px; background: var(--paper);
  padding: 12px 14px; display: flex; align-items: baseline; gap: 10px;
}
.fsv-genq__text { font-size: 0.9375rem; font-weight: 600; }
.fsv-genq__type {
  margin-left: auto; font-size: 0.6875rem; font-weight: 700; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-4); white-space: nowrap;
}

/* ---------- hero signup card ---------- */
/* Right column of the hero: the promise, stacked fields, then SSO. */
.fsv-hero { padding-top: clamp(32px, 5vw, 64px); align-items: center; }
.fsv-signupcard {
  background: var(--card); border: 1px solid var(--rule); border-radius: 16px;
  padding: clamp(22px, 3vw, 30px); display: flex; flex-direction: column; gap: 16px;
  box-shadow: 0 24px 60px -30px rgba(26, 26, 24, .25);
}
.fsv-signupcard__say { margin: 0; font-size: 1.0625rem; font-weight: 600; color: var(--ink-2); line-height: 1.45; }
.fsv-form--stack { flex-direction: column; flex-wrap: nowrap; }
.fsv-form--stack .fsv-input { flex: 0 0 auto; width: 100%; }
.fsv-form--stack .fsv-btn { width: 100%; }
.fsv-signupcard .fsv-or { margin-top: 8px; }
.fsv-signupcard__errors { margin-top: 8px; }
.fsv-signupcard__errors .field-validation-error { display: block; color: var(--clay); font-size: 0.84375rem; line-height: 1.4; }
.fsv-signupcard__errors .validation-summary-valid { display: none; }
.fsv-signupcard .fsv-sso__btn { flex: 1 1 110px; min-height: 42px; font-size: 0.875rem; }

/* ---------- a generated question, drawn the way it is answered ---------- */
.fsv-genq--live { flex-direction: column; align-items: stretch; gap: 10px; }
.fsv-stars { display: flex; gap: 6px; }
.fsv-stars svg {
  width: 22px; height: 22px; flex-shrink: 0;
  fill: var(--card); stroke: var(--rule-firm); stroke-width: 1.2;
}
.fsv-stars svg.is-on { fill: var(--brand-300); stroke: var(--brand-500); }
.fsv-picks { display: flex; gap: 8px; }
.fsv-picks .fsv-pill { padding: 6px 16px; }

/* ---------- NPS gauge ---------- */
.fsv-gauge { display: flex; flex-direction: column; gap: 12px; }
.fsv-gauge__score {
  font-family: var(--display-font); font-size: 3.5rem; line-height: 1;
  font-variant-numeric: tabular-nums;
}
.fsv-gauge__scale {
  display: flex; height: 22px; border-radius: 4px; overflow: hidden;
  border: 1px solid var(--rule);
}
.fsv-gauge__seg { display: flex; align-items: center; justify-content: center; font-size: 0.75rem; font-weight: 700; }
.fsv-gauge__seg--pro { background: var(--brand-300); color: var(--ink-1); }
.fsv-gauge__seg--pas { background: var(--tint); color: var(--ink-4); }
.fsv-gauge__seg--det { background: var(--clay, #C4634A); color: #fff; }
.fsv-gauge__key { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.8125rem; color: var(--ink-3); }
.fsv-gauge__key i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 6px; }

/* ---------- likert stack ---------- */
.fsv-likert { display: flex; height: 22px; border-radius: 4px; overflow: hidden; border: 1px solid var(--rule); }
.fsv-likert span { display: flex; align-items: center; justify-content: center; font-size: 0.71875rem; font-weight: 700; }
.fsv-likert .l1 { background: var(--clay, #C4634A); color: #fff; }
.fsv-likert .l2 { background: #E6C9BE; color: var(--ink-2); }
.fsv-likert .l3 { background: var(--tint); color: var(--ink-4); }
.fsv-likert .l4 { background: var(--brand-200); color: var(--ink-1); }
.fsv-likert .l5 { background: var(--brand-300); color: var(--ink-1); }

/* ---------- themes (written answers) ---------- */
.fsv-theme { display: flex; align-items: center; gap: 12px; }
.fsv-theme__label { flex: 1; font-size: 0.9375rem; font-weight: 600; }
.fsv-theme__count {
  font-size: 0.78125rem; font-weight: 700; color: var(--ink-1);
  background: var(--brand-200); border-radius: 999px; padding: 3px 10px; white-space: nowrap;
}
.fsv-verbatim {
  border-left: 2px solid var(--brand-300); padding: 2px 0 2px 14px;
  font-size: 0.9375rem; color: var(--ink-2); font-style: italic;
}

/* ---------- question-type table ---------- */
/* Three columns: a drawing of the control, the question, then the reason to
   pick it. The drawing is first so the table can be scanned with the eye before
   a word of it is read. */
.fsv-types { display: flex; flex-direction: column; }
.fsv-type {
  display: grid; grid-template-columns: 148px minmax(0, 1fr) minmax(0, 1fr);
  gap: 12px 30px; padding: 24px 0; border-top: 1px solid var(--rule);
  align-items: start;
}
.fsv-type--head { border-top: 0; padding: 0 0 6px; }
.fsv-types .fsv-type:last-child { border-bottom: 1px solid var(--rule); }
.fsv-type__glyph { padding-top: 2px; }
.fsv-glyph {
  --glyph-line: #A9A79A; --glyph-ink: var(--ink-2);
  display: block; width: 100%; max-width: 140px; height: auto;
}
.fsv-glyph__txt { font: 700 11px var(--brand-font); text-anchor: middle; stroke: none; }
.fsv-glyph__txt--mute { fill: var(--ink-4); }
.fsv-glyph__txt--num { font-size: 14px; letter-spacing: .04em; }
.fsv-glyph__txt--at { font-size: 12px; }
.fsv-type__name { font-size: 1.125rem; font-weight: 700; }
/* Homepage four-up: the same drawing, then the name. Nothing else fits at that
   width, and the drawing is the part that carries at a glance. */
.fsv-qcard { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 12px; padding: 22px 18px 18px; }
.fsv-qcard .fsv-glyph { width: 112px; max-width: 100%; }
.fsv-qcard__name { font-size: 0.9375rem; font-weight: 700; }
.fsv-type__ask { font-size: 0.875rem; color: var(--ink-3); margin-top: 4px; }
.fsv-type__ex { font-size: 0.875rem; color: var(--ink-2); margin-top: 10px; font-style: italic; }
.fsv-type__best { font-size: 0.9375rem; color: var(--ink-2); }
@media (max-width: 900px) {
  .fsv-type { grid-template-columns: 110px minmax(0, 1fr); gap: 10px 22px; }
  .fsv-type--head { display: none; }
  .fsv-type__best { grid-column: 2; font-size: 0.875rem; color: var(--ink-3); }
}
@media (max-width: 560px) {
  .fsv-type { grid-template-columns: minmax(0, 1fr); }
  .fsv-type__glyph { max-width: 96px; }
  .fsv-type__best { grid-column: 1; }
}

/* ---------- the "will not do" list ---------- */
.fsv-vow { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px; }
.fsv-vow__item { display: flex; flex-direction: column; gap: 6px; }
.fsv-vow__head { font-size: 0.96875rem; font-weight: 700; display: flex; align-items: center; gap: 8px; }
.fsv-vow__head::before {
  content: ""; width: 8px; height: 8px; border-radius: 999px;
  background: var(--brand-300); flex-shrink: 0;
}
@media (max-width: 900px) { .fsv-vow { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 520px) { .fsv-vow { grid-template-columns: minmax(0, 1fr); } }

/* ---------- misc ---------- */
.fsv-grid--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1000px) { .fsv-grid--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 620px) { .fsv-grid--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.fsv-mistakes { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.fsv-mistakes li {
  border-top: 1px solid var(--rule); padding: 14px 0 14px 30px; position: relative;
  font-size: 0.9375rem; color: var(--ink-2);
}
.fsv-mistakes li:last-child { border-bottom: 1px solid var(--rule); }
.fsv-mistakes li::before {
  content: ""; position: absolute; left: 4px; top: 20px;
  width: 12px; height: 2px; background: var(--clay, #C4634A);
}

.fsv-crumb { font-size: 0.8125rem; color: var(--ink-4); }
.fsv-crumb a { color: var(--ink-4); }
.fsv-crumb a:hover { color: var(--ink-1); }

/* Footer went from four columns to five when the survey-type list got its own. */
.fsv-footer__cols { grid-template-columns: 1.5fr 1fr 1fr 1fr 1fr; }
@media (max-width: 1000px) { .fsv-footer__cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 640px) { .fsv-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Same ruled list as .fsv-mistakes, but neutral. Used where the items are
   situations or things to bear in mind rather than errors. */
.fsv-list { display: flex; flex-direction: column; gap: 0; margin: 0; padding: 0; list-style: none; }
.fsv-list li {
  border-top: 1px solid var(--rule); padding: 14px 0 14px 30px; position: relative;
  font-size: 0.9375rem; color: var(--ink-2);
}
.fsv-list li:last-child { border-bottom: 1px solid var(--rule); }
.fsv-list li::before {
  content: ""; position: absolute; left: 4px; top: 20px;
  width: 12px; height: 2px; background: var(--brand-400, var(--brand-300));
}

/* The display h1 is sized for a three or four word homepage headline. The
   survey-type and industry pages carry a full sentence, which at that size
   fills the screen before the lead paragraph is reached. */
.skin-fsv h1.fsv-h1--sentence { font-size: clamp(2rem, 3.6vw, 3.125rem); line-height: 1.08; }

/* The primary button, when it is a link.
   `.skin-fsv a { color: var(--ink-1) }` in the reset scores 0,1,1 and beats
   `.fsv-btn--primary` at 0,1,0, so an <a class="fsv-btn fsv-btn--primary">
   took its color from the reset instead of from the button. The fill is lime
   now, so the link form has to be pinned to ink the same way the <button> form
   already is. Same for :hover, which the reset also claims. Scoped to `a` so
   the <button> form of the same class is untouched. */
.skin-fsv a.fsv-btn--primary,
.skin-fsv a.fsv-btn--primary:hover { color: var(--ink-1); }

/* Survey types has four categories of very uneven length. In two columns the
   short ones leave a ragged hole under them, so it gets a column each. */
.fsv-menu__cols--4 { grid-template-columns: repeat(4, minmax(150px, 1fr)); }
@media (max-width: 900px) { .fsv-menu__cols--4 { grid-template-columns: repeat(2, minmax(140px, 1fr)); } }

/* ---------- product mega menu ---------- */
/* Products on a tinted left panel, survey features on the right. Surveys is
   the lead product here; boxes and polls sit below it in quieter type. */
.fsv-menu.fsv-mega {
  padding: 0; overflow: visible; width: min(720px, calc(100vw - 32px));
}
.fsv-nav__item:hover > .fsv-mega,
.fsv-nav__item:focus-within > .fsv-mega { display: grid; grid-template-columns: 5fr 7fr; }
.fsv-mega a { white-space: normal; }
.fsv-mega small { display: block; font-size: 0.8125rem; font-weight: 400; line-height: 1.45; color: var(--ink-4); margin-top: 2px; }
.fsv-mega strong { display: block; font-weight: 600; color: var(--ink-1); }
.fsv-mega a:hover strong { color: var(--brand-600); }

.fsv-mega__products {
  background: var(--brand-50); border-right: 1px solid var(--rule);
  border-radius: 8px 0 0 8px; padding: 26px 26px 22px;
}
.fsv-mega__features { padding: 26px 28px 22px; }
.fsv-mega h4 { padding-bottom: 10px; border-bottom: 1px solid var(--rule); margin-bottom: 8px; }
.fsv-mega__others { margin-top: 18px; padding-top: 12px; border-top: 1px solid var(--rule); }

.fsv-mega__icon {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 7px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-100); color: var(--brand-600);
}
.fsv-mega__icon svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.fsv-mega__icon--lg { width: 40px; height: 40px; border-radius: 10px; background: var(--brand-300); color: var(--ink-1); }
.fsv-mega__icon--lg svg { width: 22px; height: 22px; }

.fsv-menu .fsv-mega__hero { display: flex; gap: 14px; align-items: flex-start; padding: 4px 0; }
.fsv-mega__hero strong { font-family: var(--display-font); font-size: 1.5rem; font-weight: 400; line-height: 1.1; }
.fsv-mega__hero small { font-size: 0.875rem; color: var(--ink-3); margin-top: 4px; }

.fsv-menu .fsv-mega__minor { display: flex; gap: 10px; align-items: flex-start; padding: 7px 0; }
.fsv-mega__icon--sm { width: 22px; height: 22px; border-radius: 6px; margin-top: 1px; background: var(--card); border: 1px solid var(--rule); color: var(--ink-3); }
.fsv-mega__icon--sm svg { width: 13px; height: 13px; }
.fsv-mega__minor strong { font-size: 0.875rem; font-weight: 500; color: var(--ink-2); }

.fsv-menu .fsv-mega__feature { display: flex; gap: 12px; align-items: flex-start; padding: 8px 0; }
.fsv-mega__feature strong { font-size: 0.9375rem; }

@media (max-width: 720px) {
  .fsv-nav__item:hover > .fsv-mega,
  .fsv-nav__item:focus-within > .fsv-mega { grid-template-columns: minmax(0, 1fr); }
  .fsv-mega__products { border-right: 0; border-bottom: 1px solid var(--rule); border-radius: 8px 8px 0 0; }
}

/* ---------- survey types mega menu ---------- */
.fsv-menu.fsv-mega--types { width: min(880px, calc(100vw - 32px)); }
.fsv-nav__item:hover > .fsv-mega--types,
.fsv-nav__item:focus-within > .fsv-mega--types { display: block; }
.fsv-mega__types {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0 26px;
  padding: 26px 28px 16px;
}
.fsv-mega__types h4 { display: flex; align-items: center; gap: 8px; }
.fsv-mega__types h4 .fsv-mega__icon--sm { margin-top: 0; }
.fsv-menu .fsv-mega__type { padding: 7px 0; }
.fsv-mega__type strong { font-size: 0.9375rem; }
.fsv-menu a.fsv-mega__all {
  display: block; padding: 14px 28px; font-size: 0.875rem; font-weight: 700;
  background: var(--brand-50); border-top: 1px solid var(--rule); border-radius: 0 0 8px 8px;
}
@media (max-width: 900px) {
  .fsv-mega__types { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 26px; }
}

/* ---------- industries mega menu ---------- */
/* Last menu in the nav: anchor it to the item's right edge so it stays inside
   the page column instead of centering past it. */
.fsv-menu.fsv-mega--industries { width: min(820px, calc(100vw - 32px)); left: auto; right: 0; transform: none; }
.fsv-nav__item:hover > .fsv-mega--industries,
.fsv-nav__item:focus-within > .fsv-mega--industries { display: block; }
.fsv-mega__industries { padding: 26px 28px 14px; }
.fsv-mega__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 24px; }
@media (max-width: 720px) {
  .fsv-mega__grid { grid-template-columns: minmax(0, 1fr); }
}

/* =====================================================================
   Homepage showcase (_HomeShowcase.cshtml + js/showcase.js)
   One window, four scenes. Every animated element's resting style is its
   FINAL state; keyframes only describe where it starts. So an inactive or
   reduced-motion scene simply shows the finished picture, and re-adding
   .is-active replays the scene.
   ===================================================================== */
.fsv-show {
  margin-top: clamp(40px, 6vw, 72px);
  padding: clamp(20px, 3vw, 36px) clamp(12px, 3vw, 36px) clamp(24px, 4vw, 44px);
  border-radius: 24px;
  background:
    radial-gradient(60% 55% at 50% 0%, var(--brand-200) 0%, transparent 70%),
    var(--tint);
}

/* The tour (/tour) renders the same scenes one per window, with the step copy
   above each, so it wants the window and nothing the carousel wraps it in: no
   tint panel, no glow, no tab strip. Scene styling below is shared as-is. */
.fsv-show--solo { margin-top: 24px; padding: 0; background: none; border-radius: 0; }

/* tabs */
.fsv-show__tabs {
  display: flex; justify-content: center; gap: 8px; margin: 0 auto 20px;
  overflow-x: auto; scrollbar-width: none; padding: 2px;
}
.fsv-show__tabs::-webkit-scrollbar { display: none; }
.fsv-show__tab {
  position: relative; overflow: hidden; flex: 0 0 auto;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 18px 12px; border-radius: 999px; border: 1px solid transparent;
  background: transparent; color: var(--ink-3);
  font: 600 0.9375rem var(--brand-font); cursor: pointer;
}
.fsv-show__tab:hover { color: var(--ink-1); }
.fsv-show__tab:focus-visible { outline: 2px solid var(--ink-1); outline-offset: 2px; }
.fsv-show__tab.is-active { background: var(--card); border-color: var(--rule); color: var(--ink-1); }
.fsv-show__num {
  width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 0.75rem; font-weight: 700; background: var(--card); border: 1px solid var(--rule);
}
.fsv-show__tab.is-active .fsv-show__num { background: var(--brand-300); border-color: var(--brand-300); }
.fsv-show__prog {
  position: absolute; left: 18px; right: 18px; bottom: 5px; height: 2px; border-radius: 2px;
  background: var(--brand-400); transform: scaleX(0); transform-origin: left;
}
.fsv-show.is-playing .fsv-show__tab.is-active .fsv-show__prog {
  animation: sc-prog var(--dur, 6000ms) linear forwards;
}
.fsv-show.is-paused .fsv-show__prog { animation-play-state: paused !important; }
@keyframes sc-prog { to { transform: scaleX(1); } }

/* window */
.fsv-show__window {
  max-width: 1020px; margin: 0 auto;
  background: #FFFFFF; border: 1px solid var(--rule); border-radius: 16px; overflow: hidden;
  box-shadow: 0 40px 80px -40px rgba(26, 26, 24, .35), 0 2px 6px rgba(26, 26, 24, .04);
}
.fsv-show__chrome { display: flex; gap: 7px; padding: 13px 16px; border-bottom: 1px solid var(--rule); background: var(--paper); }
.fsv-show__chrome i { width: 11px; height: 11px; border-radius: 50%; background: var(--rule-firm); }
.fsv-show__stage { display: grid; background: #F7F8F5; }
.fsv-show__scene {
  grid-area: 1 / 1; align-self: center; padding: clamp(18px, 3.5vw, 40px);
  opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s;
}
.fsv-show__scene.is-active { opacity: 1; visibility: visible; transition: opacity .45s ease; }

/* shared app-true bits */
.fsv-show svg { fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.sc-caret {
  display: inline-block; width: 1.5px; height: 1.05em; margin-left: 1px; vertical-align: -2px;
  background: var(--ink-1); animation: fsv-caret 1.1s steps(1, end) infinite;
}
.sc-card, .sc-live, .sc-count, .sc-insight, .sc-ai {
  background: #FFFFFF; border: 1px solid #E6E8E1; border-radius: 16px;
}
.sc-tag, .sc-badge {
  font-size: 0.6875rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  padding: 4px 9px; border-radius: 999px; background: var(--tint); color: var(--ink-3); white-space: nowrap;
}
.sc-badge { background: var(--brand-100); color: var(--brand-700); }

/* ---- 1. describe ---- */
.sc-ai { max-width: 660px; margin: 0 auto; padding: clamp(18px, 3vw, 28px); display: flex; flex-direction: column; gap: 16px; }
.sc-ai__head { display: flex; gap: 12px; align-items: center; }
.sc-ai__head strong { display: block; font-size: 1.125rem; }
.sc-ai__head small { color: var(--ink-4); font-size: 0.875rem; }
.sc-spark {
  width: 40px; height: 40px; border-radius: 11px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center; background: var(--brand-300); color: var(--ink-1);
}
.sc-spark svg { width: 22px; height: 22px; }
.sc-prompt {
  display: flex; align-items: center; gap: 12px;
  border: 1.5px solid var(--ink-1); border-radius: 12px; padding: 12px 12px 12px 16px;
  box-shadow: 0 0 0 4px var(--brand-200);
}
.sc-prompt__text { flex: 1; min-height: 1.4em; font-size: 1rem; color: var(--ink-1); }
.sc-gen {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 9px 14px; border-radius: 999px; background: var(--ink-1); color: #fff; font-weight: 700; font-size: 0.875rem;
}
.sc-gen svg { width: 15px; height: 15px; }
.sc-prompt--big { flex-direction: column; align-items: stretch; gap: 14px; padding: 16px 16px 12px 18px; }
.sc-prompt--big .sc-prompt__text { min-height: 4.8em; font-size: 1.125rem; line-height: 1.6; }
.sc-prompt--big .sc-gen { align-self: flex-end; }
.is-active .sc-prompt--big .sc-gen { animation: sc-press .45s ease 3.7s both; }

/* the magic: a wand, sparkles, and the survey being written */
.sc-magic {
  display: flex; align-items: center; gap: 18px; padding: 16px 18px; border-radius: 14px;
  background: linear-gradient(120deg, var(--brand-100), #FFFFFF 70%); border: 1px solid var(--brand-200);
}
.is-active .sc-magic { animation: sc-rise .45s cubic-bezier(.2, .8, .2, 1) 4s both; }
.sc-wand {
  position: relative; width: 96px; height: 96px; flex: 0 0 auto; border-radius: 50%;
  background: radial-gradient(circle at 60% 40%, var(--brand-300) 0%, var(--brand-200) 35%, transparent 70%);
}
.sc-wand__stick { position: absolute; left: 8px; top: 18px; width: 72px; height: 72px; color: var(--ink-1); transform-origin: 20% 80%; }
.sc-wand__tip { stroke: var(--brand-400); }
.is-active .sc-wand__stick { animation: sc-wave .8s ease-in-out 4.2s 2; }
.sc-wand .sc-wand__star {
  position: absolute; left: var(--x); top: var(--y); width: var(--s); height: var(--s);
  fill: var(--brand-300); stroke: var(--brand-600); stroke-width: 1.2;
}
.is-active .sc-wand__star { animation: sc-twinkle 1s ease-in-out calc(4.2s + var(--i) * .15s) infinite; }
.sc-magic__text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.sc-magic__text strong { font-family: var(--display-font); font-size: 1.875rem; font-weight: 400; line-height: 1.1; }
.sc-magic__text span { color: var(--ink-3); font-size: 0.875rem; }
.sc-magic__bar { display: block; height: 6px; margin-top: 8px; border-radius: 3px; background: var(--brand-400); transform-origin: left; }
.is-active .sc-magic__bar { animation: sc-grow-x 1.4s cubic-bezier(.4, 0, .2, 1) 4.3s both; }

/* ---- 2. see it: the survey in a simplified builder ---- */
.sc-build { display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); gap: 18px; max-width: 900px; margin: 0 auto; align-items: start; }
.sc-build__main { background: #FFFFFF; border: 1px solid #E6E8E1; border-radius: 16px; overflow: hidden; }
.sc-build__bar {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px;
  border-bottom: 1px solid #E6E8E1; background: var(--paper);
}
.sc-build__bar div { flex: 1; min-width: 0; }
.sc-build__bar small { display: block; color: var(--ink-4); font-size: 0.75rem; }
.sc-build__bar strong { display: block; font-family: var(--display-font); font-weight: 400; font-size: 1.5rem; line-height: 1.15; }
.sc-launch {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 16px; border-radius: 999px;
  background: var(--brand-300); font-weight: 700; font-size: 0.875rem; white-space: nowrap;
}
.sc-launch svg { width: 15px; height: 15px; }
.is-active .sc-launch { animation: sc-press .45s ease 4.4s both; }
.sc-build__qs { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.sc-bq {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid #E6E8E1; border-radius: 12px; padding: 11px 12px; background: #FFFFFF;
}
.is-active .sc-bq { animation: sc-rise .45s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i) * .3s) both; }
.sc-bq__grip { width: 16px; height: 16px; color: var(--rule-firm); flex: 0 0 auto; stroke-width: 2.6; }
.sc-bq__n {
  width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  background: var(--brand-100); color: var(--brand-700); font-size: 0.75rem; font-weight: 700;
}
.sc-bq__t { flex: 1; min-width: 0; font-weight: 600; font-size: 0.9375rem; }
.sc-add { align-self: flex-start; padding: 7px 4px; font-weight: 600; font-size: 0.875rem; color: var(--brand-600); }
.is-active .sc-add { animation: sc-fade .4s ease 1.6s both; }

.sc-build__side { display: flex; flex-direction: column; gap: 14px; }
.sc-settings { background: #FFFFFF; border: 1px solid #E6E8E1; border-radius: 16px; padding: 6px 16px; }
.sc-set { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 0; font-size: 0.875rem; font-weight: 600; }
.sc-set + .sc-set { border-top: 1px solid #E6E8E1; }
.sc-switch { position: relative; width: 38px; height: 22px; flex: 0 0 auto; border-radius: 999px; background: var(--brand-400); }
.sc-switch::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 16px; height: 16px; border-radius: 50%;
  background: #FFFFFF; transform: translateX(16px); box-shadow: 0 1px 2px rgba(0, 0, 0, .2);
}
.is-active .sc-switch { animation: sc-switch-bg .25s ease calc(2.4s + var(--i) * .5s) both; }
.is-active .sc-switch::after { animation: sc-switch-knob .25s ease calc(2.4s + var(--i) * .5s) both; }

.sc-preview { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.is-active .sc-preview { animation: sc-rise .5s cubic-bezier(.2, .8, .2, 1) 1.9s both; }
.sc-preview__label { font-size: 0.6875rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-4); }
.sc-mini {
  width: 200px; background: #FFFFFF; border: 7px solid var(--ink-1); border-radius: 28px;
  padding: 18px 14px 14px; display: flex; flex-direction: column; gap: 12px;
  box-shadow: 0 24px 40px -26px rgba(26, 26, 24, .5);
}
.sc-mini__bar { height: 4px; border-radius: 2px; background: var(--tint); overflow: hidden; }
.sc-mini__bar i { display: block; height: 100%; width: var(--w); background: var(--brand-400); }
.sc-mini__q { font-weight: 700; font-size: 0.8125rem; line-height: 1.35; }
.sc-stars { display: flex; gap: 6px; }
.sc-stars svg { width: 30px; height: 30px; fill: #FFFFFF; stroke: var(--rule-firm); stroke-width: 1.2; }
.sc-stars--sm { gap: 4px; }
.sc-stars--sm svg { width: 22px; height: 22px; }
.sc-mini__next { align-self: stretch; text-align: center; padding: 7px; border-radius: 999px; background: var(--brand-300); font-weight: 700; font-size: 0.75rem; }

/* ---- 3. share it ---- */
.sc-share { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 20px; max-width: 900px; margin: 0 auto; align-items: stretch; }
.sc-live { padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 14px; }
.sc-live__badge {
  align-self: flex-start; display: inline-flex; align-items: center; gap: 7px;
  padding: 5px 11px; border-radius: 999px; background: var(--brand-100); color: var(--brand-700);
  font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em;
}
.sc-live__badge i { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-500); animation: sc-ping 1.6s ease-out infinite; }
.sc-live__title { font-family: var(--display-font); font-size: 1.75rem; line-height: 1.1; }
.sc-live__row { display: flex; gap: 20px; align-items: center; }
.sc-qr { width: 128px; flex: 0 0 auto; padding: 10px; border: 1px solid #E6E8E1; border-radius: 12px; }
.sc-qr svg { display: block; width: 100%; fill: var(--ink-1); stroke: none; }
.sc-live__actions { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.sc-btn {
  display: flex; align-items: center; gap: 9px; padding: 10px 14px; border-radius: 10px;
  border: 1px solid #E6E8E1; font-weight: 600; font-size: 0.875rem; white-space: nowrap;
}
.sc-btn svg { width: 17px; height: 17px; flex: 0 0 auto; }
.sc-btn--copy { background: var(--ink-1); border-color: var(--ink-1); color: #fff; }
/* Two labels stacked in one cell; resting state is "Link copied". */
.sc-swap { display: grid; }
.sc-swap b { grid-area: 1 / 1; font-weight: 700; }
.sc-swap b:first-child { opacity: 0; }
.is-active .sc-btn--copy { animation: sc-copied .2s linear .9s both; }
.is-active .sc-swap b:first-child { animation: sc-out .2s linear .9s both; }
.is-active .sc-swap b + b { animation: sc-fade .2s linear .9s both; }
.sc-count { padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 4px; overflow: hidden; }
.sc-count__num { font-family: var(--display-font); font-size: 4rem; line-height: 1; font-variant-numeric: tabular-nums; }
.sc-count__label { color: var(--ink-4); font-size: 0.875rem; }
.sc-spark-bars { display: flex; align-items: flex-end; gap: 5px; height: 64px; margin: 14px 0 12px; }
.sc-spark-bars i { flex: 1; height: var(--h); border-radius: 3px 3px 0 0; background: var(--brand-300); transform-origin: bottom; }
.is-active .sc-spark-bars i { animation: sc-grow-y .5s cubic-bezier(.2, .8, .2, 1) calc(.3s + var(--i) * .1s) both; }
.sc-toasts { display: flex; flex-direction: column; gap: 6px; }
.sc-toast {
  display: flex; align-items: center; gap: 9px; padding: 8px 11px; border-radius: 10px;
  background: var(--paper); border: 1px solid #E6E8E1; font-size: 0.8125rem; color: var(--ink-2);
}
.sc-toast b { color: var(--ink-1); margin-right: 3px; }
.sc-toast__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-500); flex: 0 0 auto; }
.is-active .sc-toast { animation: sc-slide .45s cubic-bezier(.2, .8, .2, 1) calc(1.2s + var(--i) * .9s) both; }

/* ---- 4. understand it ---- */
.sc-results { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; }
.sc-insight {
  grid-column: 1 / -1; padding: 18px 22px;
  background: linear-gradient(135deg, var(--brand-50), #FFFFFF 60%); border-color: var(--brand-200);
}
.sc-insight__pill {
  display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px;
  background: var(--brand-300); font-size: 0.75rem; font-weight: 700;
}
.sc-insight__pill svg { width: 13px; height: 13px; }
.sc-insight p { margin: 10px 0 12px; font-size: 1rem; line-height: 1.55; color: var(--ink-1); }
.sc-line { display: inline; }
.is-active .sc-line { animation: sc-fade .6s ease calc(1.2s + var(--i) * .6s) both; }
.sc-themes { display: flex; flex-wrap: wrap; gap: 7px; }
.sc-theme {
  display: inline-flex; gap: 6px; align-items: center; padding: 5px 12px; border-radius: 999px;
  background: #FFFFFF; border: 1px solid var(--brand-400); font-size: 0.8125rem; font-weight: 600;
}
.sc-theme b { color: var(--brand-700); }
.is-active .sc-theme { animation: sc-pop .35s cubic-bezier(.3, 1.5, .5, 1) calc(3.2s + var(--i) * .18s) both; }
.sc-card { padding: 18px 20px; display: flex; flex-direction: column; gap: 10px; }
.sc-card__top { display: flex; align-items: center; gap: 10px; font-size: 0.8125rem; color: var(--ink-4); }
.sc-card__q { font-weight: 700; font-size: 0.9375rem; }
.sc-gauge { position: relative; width: 240px; max-width: 100%; margin: 4px auto 0; }
.sc-gauge svg { display: block; width: 100%; }
.sc-gauge__track, .sc-gauge__fill { stroke-width: 16; stroke-linecap: round; }
.sc-gauge__track { stroke: var(--tint); }
/* The dial runs -100 to +100; +42 sits at 71% of the arc. */
.sc-gauge__fill { stroke: var(--brand-400); stroke-dasharray: 100; stroke-dashoffset: 29; }
.is-active .sc-gauge__fill { animation: sc-dial 1.4s cubic-bezier(.2, .8, .2, 1) .3s both; }
.sc-gauge__val {
  position: absolute; left: 0; right: 0; bottom: 2px; text-align: center;
  font-family: var(--display-font); font-size: 2.125rem; line-height: 1;
}
.sc-gauge__val small { display: block; font-family: var(--brand-font); font-size: 0.6875rem; font-weight: 700; letter-spacing: .1em; color: var(--ink-4); }
.sc-split { display: flex; height: 10px; border-radius: 5px; overflow: hidden; gap: 2px; }
.sc-split i { width: var(--w); transform-origin: left; }
.sc-split i:nth-child(1), .sc-legend span:nth-child(1) i { background: var(--brand-400); }
.sc-split i:nth-child(2), .sc-legend span:nth-child(2) i { background: var(--rule-firm); }
.sc-split i:nth-child(3), .sc-legend span:nth-child(3) i { background: var(--clay); }
.is-active .sc-split i { animation: sc-grow-x .6s ease .9s both; }
.sc-legend { display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 0.75rem; color: var(--ink-3); }
.sc-legend i { display: inline-block; width: 8px; height: 8px; border-radius: 2px; margin-right: 5px; }
.sc-avg { display: flex; align-items: baseline; gap: 8px; }
.sc-avg strong { font-family: var(--display-font); font-size: 2.75rem; font-weight: 400; line-height: 1; }
.sc-avg span { color: var(--ink-4); font-size: 0.875rem; }
.sc-dist { display: flex; flex-direction: column; gap: 7px; }
.sc-dist__row { display: grid; grid-template-columns: 26px 1fr 34px; gap: 8px; align-items: center; font-size: 0.75rem; color: var(--ink-3); }
.sc-dist__row span:last-child { text-align: right; }
.sc-dist__track { height: 10px; border-radius: 5px; background: var(--tint); overflow: hidden; }
.sc-dist__track i { display: block; height: 100%; width: var(--w); border-radius: 5px; background: var(--brand-400); transform-origin: left; }
.is-active .sc-dist__track i { animation: sc-grow-x .6s cubic-bezier(.2, .8, .2, 1) calc(.5s + var(--i) * .12s) both; }

/* keyframes: each describes only the starting point */
@keyframes fsv-caret { 0%, 50% { opacity: 1; } 51%, 100% { opacity: 0; } }
@keyframes sc-rise   { from { opacity: 0; transform: translateY(12px); } }
@keyframes sc-slide  { from { opacity: 0; transform: translateX(24px); } }
@keyframes sc-fade   { from { opacity: 0; } }
@keyframes sc-pop    { from { opacity: 0; transform: scale(.6); } }
@keyframes sc-grow-x { from { transform: scaleX(0); } }
@keyframes sc-grow-y { from { transform: scaleY(0); } }
@keyframes sc-dial   { from { stroke-dashoffset: 100; } }
@keyframes sc-press  { 0% { transform: scale(1); } 40% { transform: scale(.92); } 100% { transform: scale(1); } }
@keyframes sc-copied { from { background: #FFFFFF; color: var(--ink-1); border-color: #E6E8E1; } }
@keyframes sc-out    { from { opacity: 1; } }
@keyframes sc-wave    { 0%, 100% { transform: rotate(0); } 30% { transform: rotate(-14deg); } 65% { transform: rotate(10deg); } }
@keyframes sc-twinkle { 0%, 100% { opacity: 1; transform: scale(1) rotate(0); } 50% { opacity: .35; transform: scale(.55) rotate(45deg); } }
@keyframes sc-switch-bg   { from { background: var(--rule-firm); } }
@keyframes sc-switch-knob { from { transform: translateX(0); } }
@keyframes sc-ping   { 0% { box-shadow: 0 0 0 0 rgba(143, 170, 51, .6); } 100% { box-shadow: 0 0 0 8px rgba(143, 170, 51, 0); } }

@media (max-width: 820px) {
  .sc-build { grid-template-columns: minmax(0, 1fr); }
  .sc-preview { display: none; }
  .sc-share, .sc-results { grid-template-columns: minmax(0, 1fr); }
  .fsv-show__tabs { justify-content: flex-start; }
  /* One results card is enough on a narrow screen; keeps the scenes close in height. */
  .sc-results .sc-card:last-child { display: none; }
}
@media (max-width: 520px) {
  .sc-qr, .sc-toast:nth-child(3) { display: none; }
  .sc-prompt { flex-wrap: wrap; }
  .sc-prompt__text { flex-basis: 100%; }
  .sc-gen { margin-left: auto; }
  .sc-count__num { font-size: 3rem; }
}
@media (prefers-reduced-motion: reduce) {
  .fsv-show *, .fsv-show *::before, .fsv-show *::after { animation: none !important; transition: none !important; }
}

/* Narrow screens: the nav wraps, so menus centered on their item fall off the
   edge. Anchor every mega menu to the nav's full width instead. */
@media (max-width: 720px) {
  .fsv-nav { position: relative; }
  .fsv-nav__item { position: static; }
  .fsv-menu.fsv-mega, .fsv-menu.fsv-mega--industries {
    left: 0; right: 0; width: auto; transform: none; max-height: 75vh; overflow-y: auto;
  }
}

/* ---------- help and contact ----------
   One page carries support, billing and everything else (/contact was retired
   on this site 2026-09-17 and 301s here). Two columns: what the form is for,
   and the form. */
.fsv-help { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; }
.fsv-help__list { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 12px; }
.fsv-help__list li { font-size: 0.9375rem; line-height: 1.62; color: var(--ink-3); }
.fsv-help__list strong { color: var(--ink-1); font-weight: 700; }

/* A labelled field. The signup card is placeholder-only, so there is no
   existing label class to reuse. */
.fsv-field { display: flex; flex-direction: column; gap: 6px; width: 100%; }
.fsv-label { font-family: var(--brand-font); font-size: 0.875rem; font-weight: 700; color: var(--ink-1); }
/* .fsv-input is a pill sized for one line. A message box is neither. */
.fsv-input--area { min-height: 160px; border-radius: 16px; resize: vertical; line-height: 1.55; }

.fsv-help__form .fsv-form--stack { gap: 18px; }
.fsv-help__errors { margin-top: 12px; }
.fsv-help__errors .validation-summary-valid { display: none; }
.fsv-help .field-validation-error { display: block; color: var(--clay); font-size: 0.84375rem; line-height: 1.4; }

@media (max-width: 900px) {
  .fsv-help { grid-template-columns: 1fr; }
}

/* Trademark attribution. Bain sets a floor of 8pt (about 10.7px), so this must
   not shrink below 0.75rem. Muted, but deliberately still readable. */
.fsv-footer__legal {
  margin: 28px 0 0; padding-top: 20px; border-top: 1px solid var(--rule);
  font-size: 0.75rem; line-height: 1.55; color: var(--ink-4); max-width: 900px;
}