/* Zoho Survey - page-specific design.
   Blue is the product. The three NPS bands take Zoho's red, yellow and green in that order,
   which is the one place on this site where a red/amber/green scale is honest: the bands are
   genuinely ordered from bad to good, unlike most dashboards that colour things for effect.

   All classes scoped to .sv-page, prefixed sv-. */

.sv-page {
  --sv: #226db4;
  --sv-d: #17518c;
  --sv-l: #e9f1f9;
  --sv-ink: #101c29;
}

/* ---------------------------------------------------------------------- hero -- */
.sv-hero {
  padding: clamp(48px, 7vw, 88px) 0 clamp(40px, 6vw, 72px);
  background: linear-gradient(200deg, var(--white) 25%, var(--sv-l) 100%);
  border-block-end: 1px solid color-mix(in srgb, var(--sv) 16%, var(--line));
}
.sv-hero-in {
  display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, .8fr);
  gap: clamp(24px, 4vw, 56px); align-items: center;
}
.sv-tag {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px 6px 8px; background: var(--white);
  border: 1px solid color-mix(in srgb, var(--sv) 28%, var(--line));
  border-radius: 999px; font-weight: 700; color: var(--sv-d); font-size: .9rem;
  margin-block-end: 18px;
}
.sv-hero h1 { font-size: clamp(1.8rem, 4.1vw, 2.9rem); line-height: 1.16; margin: 0 0 14px; color: var(--sv-ink); }
.sv-hero .lede { max-width: 62ch; margin-block-end: 26px; }
.sv-acts { display: flex; flex-wrap: wrap; gap: 12px; }

/* an 0-10 scale where the bars keep rising in a wave */
.sv-hero-vis { display: grid; place-items: center; min-height: 200px; }
.sv-scale {
  display: flex; align-items: flex-end; gap: 6px;
  height: 150px; width: 100%; max-width: 300px;
}
.sv-scale i {
  flex: 1; display: block; border-radius: 5px 5px 3px 3px;
  height: calc(30% + var(--d) * 6%);
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--sv) calc(35% + var(--d) * 6%), var(--sv-l)),
    color-mix(in srgb, var(--sv) calc(20% + var(--d) * 5%), var(--sv-l)));
}
.sv-scale i:nth-child(-n+7) { background: color-mix(in srgb, var(--zoho-red) 26%, var(--sv-l)); }
.sv-scale i:nth-child(8), .sv-scale i:nth-child(9) { background: color-mix(in srgb, var(--zoho-yellow) 40%, var(--sv-l)); }
.sv-scale i:nth-child(10), .sv-scale i:nth-child(11) { background: color-mix(in srgb, var(--zoho-green) 40%, var(--sv-l)); }

@media (prefers-reduced-motion: no-preference) {
  .sv-scale i { animation: sv-wave 3.6s ease-in-out infinite; animation-delay: calc(var(--d) * .09s); }
}
@keyframes sv-wave { 0%, 100% { transform: scaleY(1) } 50% { transform: scaleY(1.09) } }
.sv-scale i { transform-origin: bottom; }

/* ---------------------------------------------------------------------- gauge -- */
.sv-gauge { padding: clamp(48px, 7vw, 84px) 0; }
.sv-gauge h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 12px; }
.sv-gauge .lede { max-width: 78ch; }

.sv-meter {
  margin-block-start: 28px;
  background: var(--white); border: 1px solid var(--line); border-radius: 18px;
  padding: clamp(18px, 3vw, 28px);
  box-shadow: 0 20px 50px -40px rgba(10, 30, 55, .55);
}
.sv-meter-top {
  display: flex; align-items: center; gap: 24px; flex-wrap: wrap;
  padding-block-end: 20px; margin-block-end: 20px;
  border-block-end: 1px solid var(--line);
}
.sv-nps { display: grid; }
.sv-nps-n {
  font-size: clamp(2.6rem, 7vw, 4rem); line-height: 1; font-weight: 800;
  color: var(--sv-d); font-variant-numeric: tabular-nums;
}
.sv-meter.is-stable .sv-nps-n { color: #0a6b39; }
.sv-nps-l { color: var(--muted); font-size: .92rem; margin-block-start: 4px; }
.sv-count { display: flex; align-items: baseline; gap: 8px; margin-inline-start: auto; }
.sv-count b { font-size: 1.6rem; color: var(--ink); font-variant-numeric: tabular-nums; }
.sv-count span { color: var(--muted); font-size: .92rem; }
.sv-replay {
  font: inherit; font-weight: 700; font-size: .88rem; cursor: pointer;
  color: var(--sv-d); background: var(--white);
  border: 1px solid color-mix(in srgb, var(--sv) 38%, var(--line));
  border-radius: 9px; padding: 8px 15px;
}
.sv-replay:hover { background: var(--sv-l); }

.sv-bars { display: grid; gap: 12px; }
.sv-bar {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  align-items: center; gap: 12px;
  position: relative; padding-block: 4px;
}
.sv-bar span {
  grid-column: 1; grid-row: 1;
  display: block; height: 30px; border-radius: 7px; width: 0;
  transition: width .35s ease;
}
.sv-bar em {
  grid-column: 1; grid-row: 1; z-index: 1;
  font-style: normal; font-size: .88rem; font-weight: 700;
  padding-inline-start: 12px; color: var(--ink);
  align-self: center;
}
.sv-bar b { grid-column: 2; grid-row: 1; font-variant-numeric: tabular-nums; color: var(--muted); min-width: 2.4ch; text-align: end; }
.sv-bar-det span { background: color-mix(in srgb, var(--zoho-red) 30%, var(--white)); }
.sv-bar-pas span { background: color-mix(in srgb, var(--zoho-yellow) 42%, var(--white)); }
.sv-bar-pro span { background: color-mix(in srgb, var(--zoho-green) 34%, var(--white)); }
.sv-bar::before {
  content: ''; grid-column: 1; grid-row: 1;
  height: 30px; border-radius: 7px; background: #f3f5f7; width: 100%;
}
.sv-meter-msg {
  margin: 20px 0 0; padding-block-start: 16px;
  border-block-start: 1px solid var(--line);
  color: var(--ink); font-weight: 600;
}
.sv-note { margin-block-start: 18px; color: var(--muted); font-size: .93rem; max-width: 82ch; }

/* -------------------------------------------------------------------- wording -- */
.sv-word {
  padding: clamp(48px, 7vw, 84px) 0;
  background: var(--sv-l);
  border-block: 1px solid color-mix(in srgb, var(--sv) 15%, var(--line));
}
.sv-word h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 12px; }
.sv-flip { margin-block-start: 26px; }
.sv-flip-ctl {
  display: inline-flex; gap: 4px; padding: 4px; margin-block-end: 16px;
  background: var(--white); border: 1px solid var(--line); border-radius: 12px;
}
.sv-flip-ctl button {
  font: inherit; font-weight: 700; font-size: .93rem; cursor: pointer;
  padding: 10px 18px; border-radius: 9px;
  background: transparent; color: var(--muted); border: 0;
  transition: background .2s, color .2s;
}
.sv-flip-ctl button[aria-pressed="true"] { background: var(--sv-d); color: var(--white); }
.sv-qs { display: grid; gap: 12px; }
.sv-q {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 14px; padding: 20px;
}
.sv-q-txt {
  margin: 0 0 12px; font-size: 1.06rem; font-weight: 600; color: var(--ink);
}
.sv-q-why { margin: 0; color: var(--muted); font-size: .95rem; }
[data-sv-flipp="bad"] .sv-q-why b { color: #a5191b; }
[data-sv-flipp="good"] .sv-q-why b { color: #0a6b39; }
[data-sv-flipp="bad"] .sv-q { border-inline-start: 3px solid color-mix(in srgb, var(--zoho-red) 45%, var(--white)); }
[data-sv-flipp="good"] .sv-q { border-inline-start: 3px solid color-mix(in srgb, var(--zoho-green) 50%, var(--white)); }

/* ------------------------------------------------------------------- when/where -- */
.sv-when { padding: clamp(48px, 7vw, 84px) 0; }
.sv-when h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 12px; }
.sv-points {
  margin-block-start: 26px;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 14px;
}
.sv-point {
  background: var(--white); border: 1px solid var(--line);
  border-radius: 16px; padding: 22px;
}
.sv-pt-when {
  display: inline-block; margin-block-end: 10px;
  font-size: .78rem; font-weight: 800;
  color: var(--white); background: var(--sv-d);
  padding: 4px 11px; border-radius: 6px;
}
.sv-points .sv-point:nth-child(2) .sv-pt-when { background: #0a6b39; }
.sv-points .sv-point:nth-child(3) .sv-pt-when { background: #a5191b; }
.sv-points .sv-point:nth-child(4) .sv-pt-when { background: #8a5c05; }
.sv-point h3 { margin: 0 0 8px; font-size: 1.1rem; }
.sv-point p { margin: 0 0 10px; color: var(--muted); font-size: .96rem; }
.sv-pt-act {
  margin: 14px 0 0 !important; padding-block-start: 12px;
  border-block-start: 1px dashed var(--line);
  color: var(--ink) !important; font-size: .92rem !important; font-weight: 600;
}

/* ---------------------------------------------------------------------- build -- */
.sv-build {
  padding: clamp(48px, 7vw, 84px) 0;
  background: #0d1b26;
}
.sv-build h2 { color: var(--white); font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 24px; }
.sv-steps {
  list-style: none; margin: 0; padding: 0; counter-reset: svs;
  display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 13px;
}
.sv-steps li {
  counter-increment: svs;
  background: rgba(255, 255, 255, .05);
  border: 1px solid rgba(255, 255, 255, .13);
  border-radius: var(--radius-lg); padding: 18px;
  display: grid; gap: 5px;
}
.sv-steps b {
  display: flex; align-items: baseline; gap: 9px;
  font-size: 1.02rem; color: color-mix(in srgb, var(--sv) 45%, var(--white));
}
.sv-steps b::before {
  content: counter(svs, decimal-leading-zero);
  font-size: .8rem; font-weight: 800; color: color-mix(in srgb, var(--white) 55%, transparent);
  font-variant-numeric: tabular-nums;
}
.sv-steps span { color: color-mix(in srgb, var(--white) 74%, transparent); font-size: .95rem; }
.sv-build-cta {
  margin-block-start: 22px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 18px; flex-wrap: wrap;
  background: rgba(255, 255, 255, .07);
  border: 1px solid rgba(255, 255, 255, .16);
  border-radius: 14px; padding: 20px 22px;
}
.sv-build-cta p { margin: 0; color: color-mix(in srgb, var(--white) 84%, transparent); max-width: 64ch; }

/* ------------------------------------------------------------------------ faq -- */
.sv-faq { padding: clamp(48px, 7vw, 84px) 0 clamp(30px, 4vw, 48px); }
.sv-faq h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); margin: 0 0 20px; }

/* ---------------------------------------------------------------------- close -- */
.sv-close { padding: 0 0 clamp(48px, 7vw, 84px); }
.sv-close-box {
  display: flex; align-items: center; justify-content: space-between;
  gap: 22px; flex-wrap: wrap; border-radius: 20px;
  padding: clamp(26px, 4vw, 42px);
  background: linear-gradient(135deg, var(--sv-d), #0c3253);
}
.sv-close-box h2 { color: var(--white); margin: 0 0 8px; font-size: clamp(1.4rem, 3vw, 2rem); }
.sv-close-box .lede { color: color-mix(in srgb, var(--white) 86%, transparent); margin: 0; max-width: 60ch; }

/* --------------------------------------------------------------------- narrow -- */
@media (max-width: 900px) {
  .sv-hero-in { grid-template-columns: 1fr; }
}
@media (max-width: 620px) {
  .sv-meter-top { gap: 14px; }
  .sv-count { margin-inline-start: 0; }
  .sv-flip-ctl { display: flex; }
  .sv-flip-ctl button { flex: 1; }
}