/* ==========================================================================
   "מפת ה-DNA העסקי שלך" - the webinar questionnaire (template "webinar-quiz"). Yonatan's spec v3,
   docs/webinar-quiz/SPEC.md (17.10.26). Loaded after lp360.css, lp360-wp.css and lp360-sapir.css. Every rule is scoped
   to body.v-wq: the 360 page and the webinar page do not change. Only existing tokens and values (the dark field recipe
   of .formbox, the .quiz choice row, the .thanks type, .hl, the facet icons, Sap's .sap and the layers of .sapcard).
   One master screen, six states in the slot under Sap: welcome, form, waiting, done, mail, again.
   ========================================================================== */

/* ---- 2.5 visible height: the footer stays at the bottom on the short states ---- */
body.v-wq { min-height: 100vh; min-height: 100svh; display: flex; flex-direction: column; background: var(--bg-dark); color: var(--text-on-dark); }
.v-wq .wq { flex: 1 0 auto; padding-bottom: 0; }
.v-wq .foot { flex: none; }
.v-wq .wq__bar, .v-wq .wq, .v-wq .foot { position: relative; z-index: 1; }

/* ---- 2.7 Sap's world behind everything: the three layers of .sapcard (lp360.css 551-558), fixed (never repainted on scroll).
   Not the .sapcard class itself (clip-path, padding, radius). One change: the gold glow .52 -> .30 (text crosses it here) ---- */
.v-wq .wq__bg { position: fixed; inset: 0; z-index: 0; overflow: hidden; pointer-events: none;
  background: radial-gradient(rgba(255, 224, 232, .07) 1px, transparent 1.3px) 0 0 / 26px 26px, url("../brand/facet-texture-on-dark-v1.svg") center / cover no-repeat, radial-gradient(120% 130% at 24% 55%, #20111A 0%, #170C12 55%, #110A0E 100%); }
.v-wq .wq__bg::before { content: ""; position: absolute; inset: -25%; pointer-events: none; filter: blur(30px);
  background: radial-gradient(26% 34% at 25% 19%, rgba(255, 200, 100, .30), rgba(255, 168, 70, .16) 52%, transparent 76%), radial-gradient(34% 38% at 30% 62%, rgba(232, 96, 127, .08), transparent 70%), radial-gradient(30% 36% at 82% 40%, rgba(70, 60, 120, .2), transparent 72%), radial-gradient(36% 34% at 64% 90%, rgba(201, 47, 85, .08), transparent 70%); }
.v-wq .wq__bg::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .09; mix-blend-mode: screen;
  background-image: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); }
@media (prefers-reduced-motion: no-preference) { .v-wq .wq__bg::before { animation: sap-aurora 18s ease-in-out infinite alternate; } }
/* backgrounds that would cover the layer: the dark footer and anything .on-dark except the body */
.v-wq .foot.on-dark, .v-wq .on-dark { background: transparent; }

/* ---- 2.4 Sap, the anchor: one figure, centred in the column; only her size and the bubble change ---- */
.v-wq .wq__sap { --wq-stage: 160px; --wq-pad: 0px; display: flex; flex-direction: column; align-items: center; margin: 16px 0 24px; padding-top: var(--wq-pad); }
.v-wq .wq__sap[data-bubble="on"] { --wq-pad: 104px; }
.v-wq .wq__sap[data-size="lg"] { --wq-stage: min(240px, 30svh); }
.v-wq .wq__sap[data-size="lg"][data-bubble="on"] { --wq-pad: 120px; }
.v-wq .wq__sap[data-bubble="off"] .sap__bubblebox { display: none; }
.v-wq .wq__sap .sap__stage { --stage: var(--wq-stage); width: var(--wq-stage); }
/* the bubble lands on the top of the circle at any size (66px in lp360.css is for a 300 stage); always centred, tail in the middle */
.v-wq .wq__sap .sap__bubblebox { inset-inline: 0; left: 0; right: 0; bottom: calc(100% - var(--wq-pad) - var(--wq-stage) * .22); justify-content: center; }
.v-wq .wq__sap .sap__bubble, .v-wq .wq__sap .sap__probe { max-width: 300px; }
.v-wq .wq__sap .sap__bubble::after { inset-inline-start: 50%; left: auto; margin-inline-start: -8px; }
.v-wq .wq__sap.is-in .sap__bubble { transform-origin: 50% 100%; }
/* 0 -> 1 only: she gets smaller with the fade (460ms spring) */
@media (prefers-reduced-motion: no-preference) {
  .v-wq .wq__sap .sap__stage { transition: width 460ms var(--ease-spring); }
  .v-wq .wq__sap { transition: padding-top 460ms var(--ease-spring); }
}

/* ---- 4א screen 0: centred in the visible height, the button's place kept from the start ---- */
.v-wq .wq[data-state="welcome"] > .wq__wrap { min-height: calc(100svh - 72px - env(safe-area-inset-top, 0px)); display: flex; flex-direction: column; justify-content: center; }
.v-wq .wq__welcome { text-align: center; }
.v-wq .wq__welcome .thanks__title { margin-inline: auto; text-wrap: balance; }
.v-wq .wq__again > .thanks__title, .v-wq .wq__again > .thanks__text { text-align: center; margin-inline: auto; text-wrap: balance; }
.v-wq .wq__about { margin: 20px auto 0; max-width: 26em; }
.v-wq .wq__go { margin-top: 32px; }
.v-wq .wq__start { width: 100%; }
.js .v-wq .wq__go:not(.is-ready) { visibility: hidden; opacity: 0; }
.js .v-wq .wq__go.is-ready { visibility: visible; opacity: 1; animation: hero-fade 600ms var(--ease-calm) both; } /* a soft fade, its place kept */
/* with JS, screen 1 waits under screen 0 until the start (without JS it is printed right under it, 4א.4) */
.js .v-wq .wq[data-state="welcome"] [data-screen="form"] { display: none; }

/* ---- 2.2 one column: 342 / 672 / 760, centred on the page, right-aligned inside ---- */
.v-wq .wq__wrap {
  max-width: calc(760px + 2 * var(--gutter));
  padding-inline: max(var(--gutter), env(safe-area-inset-right, 0px)) max(var(--gutter), env(safe-area-inset-left, 0px));
}

/* ---- 2.3 top bar: not sticky, logo right, at least 44 high ---- */
.v-wq .wq__bar { padding-top: calc(28px + env(safe-area-inset-top, 0px)); }
.v-wq .wq__bar .wq__wrap { min-height: 44px; display: flex; align-items: center; }
.v-wq .wq__bar .logo { margin: 0; }


/* ---- 3.2 type: .thanks__title / __text / __note come from lp360.css (.thanks) ---- */
.v-wq h1[tabindex="-1"]:focus { outline: none; }
.v-wq .thanks__title { color: var(--text-on-dark); }
.v-wq .t-body { color: var(--text-on-dark); }
.v-wq .wq__intro { margin-top: 16px; max-width: 34em; }

/* ---- 4 the form ---- */
.v-wq .wq__form { margin-top: 48px; }
.v-wq .wq__form > .wq__q + .wq__q { margin-top: 48px; }
.v-wq .quiz__q, .v-wq .check-field { scroll-margin-block: 96px 24px; }
.v-wq .wq__form > .field.quiz__q { gap: 0; }
.v-wq fieldset.quiz__q { border: 0; margin: 0; padding: 0; min-width: 0; }

/* 3.4 question, explanation, choice and status on dark (the .quiz values in dark colours; .quiz itself is not used) */
.v-wq .quiz__legend { display: block; padding: 0; margin: 0 0 12px; font-size: 20px; line-height: 1.4; font-weight: var(--fw-semibold); color: var(--text-on-dark); text-wrap: balance; }
.v-wq .wq__ask { margin: -4px 0 16px; max-width: 34em; color: var(--text-on-dark); }                /* title -> explanation 8, explanation -> field 16 */
.v-wq .thanks__note.wq__ex { margin: -8px 0 16px; }                                                       /* 8 under the explanation */
/* "אני עדיין לא יודעת" (18.10.26): the form's own check box under the field, 4 under it; a field set aside is dimmed */
.v-wq .wq__dk { margin-top: 4px; width: fit-content; }
.v-wq .wq__q textarea.field__input:disabled { opacity: .5; cursor: not-allowed; }
.v-wq .wq__count { margin-top: 8px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-on-dark); }
.v-wq .wq__form > .field .field__error, .v-wq fieldset.quiz__q .field__error { margin-top: 8px; }
.v-wq .field__label { color: var(--text-on-dark); }
.v-wq .field__error { color: var(--state-error-dark); }

/* the choice rows of quiz-body.php (.quiz .choice), in dark colours: clean rows, the whole row clickable, no frame */
.v-wq .choices { display: grid; gap: 2px; margin-top: -4px; }
.v-wq .choice {
  display: flex; align-items: center; gap: 14px; min-height: 48px; padding: 10px 16px; margin: 0;
  border: 0; border-radius: var(--radius-control); background: transparent;
  cursor: pointer; position: relative; -webkit-tap-highlight-color: transparent;
  transition: background-color var(--dur-fast) ease, transform var(--dur-fast) var(--ease-press);
}
.v-wq .choice__input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.v-wq .choice__text { font-size: var(--fs-body); line-height: 1.5; font-weight: var(--fw-body); color: var(--text-on-dark); }
@media (hover: hover) { .v-wq .choice:hover { background: rgba(247, 244, 241, .04); } }
.v-wq .choice:active { transform: scale(.99); }
.v-wq .choice:has(.choice__input:checked) { background: rgba(232, 96, 127, .10); }
.v-wq .choice:has(.choice__input:focus-visible) { outline: 2px solid var(--state-focus-dark); outline-offset: 0; }
.v-wq .choice__dot {
  flex: none; width: 20px; height: 20px; position: relative; background: var(--border-field-dark);
  clip-path: polygon(6px 0, 14px 0, 20px 6px, 20px 14px, 14px 20px, 6px 20px, 0 14px, 0 6px);
  transition: background-color var(--dur-fast) ease;
}
.v-wq .choice__dot::before {
  content: ""; position: absolute; inset: 1.5px; background: var(--bg-dark);
  clip-path: polygon(5.4px 0, 11.6px 0, 17px 5.4px, 17px 11.6px, 11.6px 17px, 5.4px 17px, 0 11.6px, 0 5.4px);
}
.v-wq .choice__dot::after {
  content: ""; position: absolute; inset: 5px; background: var(--ruby-300);
  clip-path: polygon(3px 0, 7px 0, 10px 3px, 10px 7px, 7px 10px, 3px 10px, 0 7px, 0 3px);
  transform: scale(0); transition: transform 300ms var(--ease-press);
}
.v-wq .choice__input:checked + .choice__dot { background: var(--ruby-300); }
.v-wq .choice__input:checked + .choice__dot::after { transform: scale(1); }
.v-wq fieldset.is-error .choice__dot { background: var(--state-error-dark); }

/* 3.3 the dark field recipe: the values of .formbox .field__input (lp360.css 1012-1016), copied, other scope */
.v-wq .field__input { background: rgba(255, 244, 247, .035); border-color: var(--border-field-dark); color: var(--text-on-dark); caret-color: var(--text-on-dark); }
@media (hover: hover) { .v-wq .field__input:hover { border-color: #A7808B; background: rgba(255, 244, 247, .05); } }
.v-wq .field__input:focus, .v-wq .field__input.is-focus { border-color: var(--state-focus-dark); box-shadow: inset 0 0 0 1px var(--state-focus-dark); background: rgba(255, 244, 247, .06); }
.v-wq .field.is-error .field__input, .v-wq .field.is-error .field__input:hover { border-color: var(--state-error-dark); box-shadow: inset 0 0 0 1px var(--state-error-dark); }
.v-wq textarea.field__input { min-height: 128px; padding: 14px 16px; resize: vertical; }
.v-wq .check__box { border-color: #A7808B; }
.v-wq .check-field.is-error .check__box { border-color: var(--state-error-dark); border-width: 2px; }
.v-wq .check__text a { text-decoration-color: rgba(247, 244, 241, .6); }

/* end of the form: q8 -> skip line 32, skip -> "where to send" 48/56, name -> email 20/24, email -> boxes 32,
   boxes -> privacy 16, privacy -> button 24, button -> status 12 */
.v-wq .thanks__note.wq__skip { margin-top: 32px; }
.v-wq .wq__to { margin-top: 48px; }
.v-wq .quiz__details { display: grid; gap: 20px; }
.v-wq .quiz__details .field.quiz__q { gap: 8px; }
.v-wq .form__checks { margin-top: 32px; display: grid; gap: 0; }
.v-wq .wq__form .form__legal { margin-top: 16px; }
.v-wq .wq__submit { margin-top: 24px; }
.v-wq .form__status:not(.sr-only) { margin-top: 12px; font-size: 15px; line-height: 1.5; color: var(--state-error-dark); text-align: center; }
.v-wq .wq__draft { margin-top: 12px; font-size: var(--fs-fine); line-height: 1.55; color: var(--text-on-dark); text-align: center; text-wrap: balance; }
.v-wq bdi { overflow-wrap: anywhere; }


/* ---- 6 the document: prose on the background, no cards, no frames, no lines. Chapters apart by space only ---- */
.v-wq .wq-doc { margin-top: 48px; max-width: 34em; }
.v-wq .wq-doc__ch + .wq-doc__ch { margin-top: 48px; }
.v-wq .wq-doc__h { display: flex; gap: 12px; align-items: flex-start; margin: 0; color: var(--text-on-dark); text-wrap: balance; }
.v-wq .wq-doc__ic { flex: none; width: 24px; height: 24px; margin-top: calc((1lh - 24px) / 2); fill: var(--text-accent-on-dark); color: var(--text-accent-on-dark); }
.v-wq .wq-doc__h + * { margin-top: 16px; }
.v-wq .wq-doc__ch p + p, .v-wq .wq-doc__ch p + .wq-doc__item, .v-wq .wq-doc__ch .wq-doc__key { margin-top: var(--space-para); }
.v-wq .wq-doc__key { font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semibold); color: var(--text-on-dark); }
.v-wq .wq-doc__h + .wq-doc__key { margin-top: 16px; }
.v-wq .wq-doc__key--big { font-size: 18px; line-height: 1.6; font-weight: var(--fw-light); }
.v-wq .wq-doc__check { margin-top: var(--space-para); }
.v-wq .wq-doc__item + .wq-doc__item { margin-top: 24px; }
.v-wq .wq-doc__sub { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-semibold); color: var(--text-on-dark); }
.v-wq .wq-doc__sub + * { margin-top: 4px; }
.v-wq .wq-doc__item p + p { margin-top: 4px; }
.v-wq .wq-doc__ex-l { font-weight: var(--fw-semibold); }
.v-wq .wq-doc__bio { white-space: pre-line; }
.v-wq .wq-doc__steps { margin: 0; padding: 0; list-style: none; display: grid; gap: 24px; }
.v-wq .wq-doc__steps li { display: flex; gap: 12px; align-items: baseline; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-body); }
.v-wq .wq-doc__num { flex: none; font-weight: var(--fw-semibold); color: var(--text-accent-on-dark); font-variant-numeric: tabular-nums; }
.v-wq .wq-doc__step { min-width: 0; }

/* chapter 9 -> mail line 48/56/64, -> buttons 16. Two secondary buttons: stacked full width (12) on a phone, a row from 768 */
.v-wq .thanks__note.wq-doc__mail { margin-top: 48px; }
.v-wq .wq-doc__actions { margin-top: 16px; display: grid; gap: 12px; }
.v-wq .wq-doc__actions .btn-ghost { width: 100%; }

/* ---- 1 secondary button on dark (the jf-on colours): hover and focus overridden, the cream hover would hide the text ---- */
.v-wq .btn-ghost { border-color: var(--line-strong-dark); color: var(--text-on-dark); text-decoration: none; font-family: var(--font); }
@media (hover: hover) { .v-wq .btn-ghost:hover { background: var(--bg-raised-dark); } }
.v-wq .btn-ghost:focus-visible { outline: none; border-width: 2.5px; border-color: var(--state-focus-dark); }

/* ---- 6.3 the 360 block: prose on the background, space only (64 / 80 / 96) ---- */
.v-wq .wq__next { margin-top: 64px; }
.v-wq .wq__next .logo360--bar { display: block; }
.v-wq .wq__next .t-h3 { margin-top: 20px; color: var(--text-on-dark); text-wrap: balance; }
.v-wq .wq__next .t-body { margin-top: 12px; }
.v-wq .wq__cta { margin-top: 32px; }
.v-wq .wq__cta .btn { width: 100%; }
/* mobile: the 360 block centred, like the line above it (Guy 20.10.26) */
@media (max-width: 767px) { .v-wq .wq__next { text-align: center; } .v-wq .wq__next .logo360--bar, .v-wq .wq__next .measure { margin-inline: auto; } }

/* ---- 9.4 switching screens: out in 200ms, in with hero-up 0 / 120ms (only with motion) ---- */
.v-wq .wq__screen.is-out { opacity: 0; transition: opacity 200ms var(--ease-calm); }
html.hero-motion .v-wq .wq__screen.is-in .thanks__title { animation: hero-up 700ms var(--ease-calm) 0ms both; }
html.hero-motion .v-wq .wq__screen.is-in > .thanks__text { animation: hero-up 700ms var(--ease-calm) 120ms both; }

/* ---- 9.1 entry: the bar fades in (the diamond, title and text: the existing .thanks rules) ---- */
html.hero-motion:not(.fonts-wait) .v-wq .wq__bar { animation: hero-fade 600ms var(--ease-calm) 0ms both; }

/* ---- 9.2 waiting (Guy, 17.10.26): Sap at full size with her usual rhythm from 360 (no faster breathing) ---- */
@media (prefers-reduced-motion: no-preference) {
  .v-wq.wq-hidden-tab .sap.is-in .sap__stage::before, .v-wq.wq-hidden-tab .sap.is-in .sap__stage::after, .v-wq.wq-hidden-tab .sap.is-in .sap__orbit, .v-wq.wq-hidden-tab .sap.is-in .sap__avatar { animation-play-state: paused; }
  /* 9.3 the document is ready: one stronger glow (the class is added and removed by the script, so it can run again) */
  .v-wq .wq__sap.is-in.is-landed .sap__avatar { animation: sap-glow 1000ms ease-in-out 1; }
}

@media (min-width: 768px) {
  .v-wq .wq__sap { --wq-stage: 176px; margin-bottom: 32px; }
  .v-wq .wq__sap[data-size="lg"] { --wq-stage: 300px; margin-bottom: 24px; }
  .v-wq .wq__start { width: auto; }
  .v-wq .quiz__legend { font-size: 22px; line-height: 1.36; }
  .v-wq .wq__form, .v-wq .wq__to { margin-top: 56px; }
  .v-wq .wq__form > .wq__q + .wq__q { margin-top: 56px; }
  .v-wq .quiz__details { gap: 24px; }
  .v-wq .wq-doc, .v-wq .wq-doc__ch + .wq-doc__ch, .v-wq .thanks__note.wq-doc__mail { margin-top: 56px; }
  .v-wq .wq-doc__key--big { font-size: 20px; }
  .v-wq .wq-doc__actions { display: flex; flex-wrap: wrap; gap: 16px; justify-content: flex-start; }
  .v-wq .wq-doc__actions .btn-ghost { width: auto; }
  .v-wq .wq__next { margin-top: 80px; }
  .v-wq .wq__next .t-h3 { margin-top: 24px; }
  .v-wq .wq__next .t-body { margin-top: 16px; }
  .v-wq .wq__cta .btn { width: auto; }
  .v-wq .wq { padding-bottom: 16px; }   /* + the footer's own 64 = 80 */
}
@media (min-width: 1200px) {
  .v-wq .wq__bar { padding-top: calc(48px + env(safe-area-inset-top, 0px)); }
  .v-wq .wq__sap { --wq-stage: 192px; }
  .v-wq .wq__sap[data-size="lg"] { --wq-stage: 340px; }
  .v-wq .wq__sap .sap__bubble, .v-wq .wq__sap .sap__probe { max-width: 280px; }
  .v-wq .wq__sap .sap__bubblebox { left: 0; }
  .v-wq .wq[data-state="welcome"] > .wq__wrap { min-height: calc(100svh - 92px); }
  .v-wq .quiz__legend { font-size: 24px; line-height: 1.33; }
  .v-wq .wq-doc, .v-wq .wq-doc__ch + .wq-doc__ch, .v-wq .thanks__note.wq-doc__mail { margin-top: 64px; }
  .v-wq .wq-doc__key--big { font-size: 22px; line-height: 1.55; }
  .v-wq .wq__next { margin-top: 96px; }
  .v-wq .wq { padding-bottom: 32px; }   /* + 64 = 96 */
}

/* ---- 2.5 the footer keeps room for the home indicator ---- */
@media (max-width: 1199px) { .v-wq .foot { padding-bottom: calc(88px + env(safe-area-inset-bottom, 0px)); } }
@media (min-width: 1200px) { .v-wq .foot { padding-bottom: calc(var(--sp-32) + env(safe-area-inset-bottom, 0px)); } }

/* ---- 9.5 reduced motion: nothing moves, screens and lines switch at once (the lines still change: content, not motion) ---- */
@media (prefers-reduced-motion: reduce) {
  .v-wq .wq__screen.is-out { transition: none; }
  .v-wq .wq__screen .thanks__title, .v-wq .wq__screen .thanks__text, .v-wq .wq__screen .thanks__note, .v-wq .wq__bar,
  .v-wq .wq__go.is-ready, .v-wq .wq__sap .sap__avatar { animation: none !important; }
  .v-wq .choice, .v-wq .choice__dot::after { transition: none; }
}

/* screen 1: its h1 is for screen readers only, so the opening message sits right under Sap (Sap -> text 24/32) */
.v-wq .thanks__text.wq__lead { margin-top: 0; }
.v-wq .wq__lead:focus { outline: none; }
/* the measuring bubble: lp360.css parks it at left -9999px, which 360's card clips. Here nothing clips it, and in RTL that
   becomes a page 10,000px wide - so it stays in place, invisible (2.8.3) */
.v-wq .wq__sap .sap__probe { left: 0; top: 0; }
/* 4א.3: at 390x664 (an in-app browser) the button must be on the first screen - the bubble's reserved space goes to 104 */
@media (max-width: 767px) { .v-wq .wq__sap[data-size="lg"][data-bubble="on"] { --wq-pad: 104px; } }
@media (max-width: 767px) {
  .v-wq .wq__sap[data-size="lg"] { margin-top: 0; }   /* 390x664: bar 72 + Sap 327 + title, line and button = 661 */
  .v-wq .wq__go { margin-top: 20px; }
}

/* Guy, 17.10.26: on screen 0 the wordmark is larger (x1.4) and centred; on every other screen as it is */
.v-wq.wq-at-welcome .wq__bar .wq__wrap { justify-content: center; }
.v-wq.wq-at-welcome .wq__bar .logo { width: 146px; }
@media (min-width: 1200px) { .v-wq.wq-at-welcome .wq__bar .logo { width: 168px; } }
/* Guy, 17.10.26: "only question 1 is required" once, before question 1 (the line after question 8 stays) */
.v-wq .thanks__note.wq__skip-top { margin: 0 0 24px; }

/* ==========================================================================
   The document, schema 2 (Sapir, 17.10.26; API.md): A the DNA - alone, large, under a short gold rule (the gold of the
   PDF's rule, brand-gold-light on dark); B "האסטרטגיה שלך" - six steps, each opening with its "because" line, 1.5x the
   air between them; C what is still not known. Prose on the background, no cards, no lines between.
   ========================================================================== */
.v-wq .wq-doc__a { margin-top: 0; }
.v-wq .wq-doc__rule { display: block; width: 48px; height: 2px; background: #DCC68E; margin-bottom: 16px; }
.v-wq .wq-doc__part { margin: 0; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); color: var(--text-on-dark); text-wrap: balance; }
.v-wq .wq-doc__dna { margin-top: 16px; font-size: var(--fs-h3); line-height: 1.45; font-weight: var(--fw-regular); color: var(--text-on-dark); text-wrap: pretty; }
.v-wq .wq-doc__dna + .wq-doc__dna { margin-top: 12px; }
.v-wq .wq-doc__b, .v-wq .wq-doc__c { margin-top: 72px; }
.v-wq .wq-doc__b > .wq-doc__part + .wq-doc__ch { margin-top: 40px; }
.v-wq .wq-doc__b .wq-doc__ch + .wq-doc__ch { margin-top: 72px; }            /* 1.5 x the 48 between chapters */
.v-wq .wq-doc__because { margin: 0; font-size: var(--fs-body); line-height: var(--lh-body); font-weight: var(--fw-light); color: var(--text-on-dark); }
.v-wq .wq-doc__h + .wq-doc__because { margin-top: 8px; }
.v-wq .wq-doc__because + * { margin-top: 16px; }
.v-wq h4.wq-doc__sub { margin: 0; }
.v-wq .wq-doc__ch > .wq-doc__item, .v-wq .wq-doc__ch > p + .wq-doc__item { margin-top: 24px; }
.v-wq .wq-doc__list { margin: 4px 0 0; padding-inline-start: 1.2em; font-size: var(--fs-body); line-height: var(--lh-body); color: var(--text-on-dark); }
.v-wq .wq-doc__list li + li { margin-top: 8px; }
.v-wq .wq-doc__c > .wq-doc__list { margin-top: 16px; }
@media (min-width: 768px) {
  .v-wq .wq-doc__b, .v-wq .wq-doc__c { margin-top: 84px; }
  .v-wq .wq-doc__b .wq-doc__ch + .wq-doc__ch { margin-top: 84px; }
}
@media (min-width: 1200px) {
  .v-wq .wq-doc__b, .v-wq .wq-doc__c { margin-top: 96px; }
  .v-wq .wq-doc__b .wq-doc__ch + .wq-doc__ch { margin-top: 96px; }
}
.v-wq .wq-doc__list { list-style: disc; }
.v-wq .wq-doc__list li::marker { color: var(--text-accent-on-dark); }

/* Guy, 17.10.26: the skip line before question 1 as a small notice - a thin line and a very light fill from Sap's
   palette (her bubble's wine and ruby rim, at low strength), not a heavy card. The one after question 8 is gone. */
.v-wq .thanks__note.wq__skip-top { display: block; max-width: none; margin: 0 0 32px; padding: 12px 16px; border: 1px solid rgba(232, 96, 127, .35); border-radius: var(--radius-control); background: rgba(94, 37, 57, .28); color: var(--text-on-dark); }
.v-wq .wq__to { margin-top: 48px; }
/* Guy, 17.10.26: full name and email side by side on desktop, one under the other on a phone */
@media (min-width: 768px) {
  .v-wq .wq__to { margin-top: 56px; }
  .v-wq .quiz__details { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 24px; align-items: start; }
}

/* Guy, 17.10.26: the waiting message is long and stays - room for it above Sap so nothing below moves */
.v-wq .wq[data-state="waiting"] .wq__sap[data-bubble="on"] { --wq-pad: 190px; }
@media (min-width: 768px) { .v-wq .wq[data-state="waiting"] .wq__sap[data-bubble="on"] { --wq-pad: 170px; } }

/* ---- end of the result (Guy, 17.10.26): no copy button. A short rule, then the mail line with presence (the brand's mail
   facet large, centred, body-large text, the address smaller under it), the PDF centred and secondary, then the gold block ---- */
.v-wq .wq-doc__divider { display: block; width: 56px; height: 1px; margin: 72px auto 0; background: #DCC68E; opacity: .7; }
.v-wq .wq-doc__mail { margin: 56px auto 0; text-align: center; color: var(--text-on-dark); }
.v-wq .wq-doc__mail-ic { display: block; width: 44px; height: 44px; margin: 0 auto; fill: var(--text-on-dark); color: var(--text-on-dark); }
.v-wq .wq-doc__mail-text { margin: 16px 0 0; font-size: 20px; line-height: 1.45; font-weight: var(--fw-regular); text-wrap: balance; }
.v-wq .wq-doc__mail-to { margin: 6px 0 0; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--text-on-dark); overflow-wrap: anywhere; }
.v-wq .wq-doc__actions { margin-top: 24px; display: flex; justify-content: center; }
.v-wq .wq-doc__actions .btn-ghost { width: auto; padding-inline: 40px; }
.v-wq [data-screen="done"] .wq__next { margin-top: 112px; }
@media (min-width: 768px) {
  .v-wq .wq-doc__divider { margin-top: 84px; }
  .v-wq .wq-doc__mail-text { font-size: 22px; }
  .v-wq [data-screen="done"] .wq__next { margin-top: 136px; }
}
@media (min-width: 1200px) {
  .v-wq .wq-doc__divider { margin-top: 96px; }
  .v-wq [data-screen="done"] .wq__next { margin-top: 160px; }
}

/* ---- the 360 block on the result screen in the gold language (Guy, 17.10.26: like the PDF's approved back page) ----
   a premium card standing on the page: a thin muted-gold frame (the diamond's gold at 35%) and a soft shadow on the outer
   box; the inner box holds the rounded clip (all four corners) and the opaque wine-night ground, art included.
   Centred, cream logo and text (17:1), a full cream button with dark text (17:1), the gold diamond and sparks at the foot. */
.v-wq .wq__next--gold { text-align: center; border-radius: 28px; border: 1px solid rgba(220, 198, 142, .35); box-shadow: 0 24px 48px -16px rgba(0, 0, 0, .65), 0 2px 10px rgba(0, 0, 0, .35); background: #160B0F; }
.v-wq .wq__next-in { position: relative; isolation: isolate; overflow: hidden; clip-path: inset(0 round 27px); border-radius: 27px; background: #160B0F; padding: 56px 28px 0; }
.v-wq .wq__next--gold .logo360--bar { margin-inline: auto; }
.v-wq .wq__next--gold .t-h3, .v-wq .wq__next--gold .t-body { color: var(--cream-50); margin-inline: auto; }
.v-wq .wq__next--gold .btn { --btn-from: var(--cream-50); --btn-to: var(--cream-50); color: #160B0F; box-shadow: 0 12px 22px -10px rgba(0, 0, 0, .55); }
@media (hover: hover) { .v-wq .wq__next--gold .btn:hover { --btn-from: var(--cream-100); --btn-to: var(--cream-100); box-shadow: 0 16px 28px -12px rgba(0, 0, 0, .6); } }
.v-wq .wq__next--gold .btn::after { box-shadow: inset 0 0 0 2px var(--cream-50); }
.v-wq .wq__next--gold .wq__cta .btn { width: 100%; }
.v-wq .wq__next-art { display: block; width: calc(100% + 56px); max-width: none; height: auto; margin: 28px -28px 0; }
@media (min-width: 768px) {
  .v-wq .wq__next-in { padding: 72px 64px 0; }
  .v-wq .wq__next--gold .wq__cta .btn { width: auto; }
  .v-wq .wq__next-art { width: calc(100% + 128px); margin: 24px -64px 0; }
}

/* Guy, 17.10.26: the questionnaire screen only - Sap's world dimmed, as if a half-clear night layer lay over it: the
   texture, dots and glow at ~40% (the body's wine-night shows through), the glow still. Not opaque. 350ms in and out.
   Welcome, waiting and the result keep the full world. */
.v-wq .wq__bg { transition: opacity 350ms var(--ease-calm); }
.v-wq.wq-at-form .wq__bg { opacity: .4; }
.v-wq.wq-at-form .wq__bg::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .v-wq .wq__bg { transition: none; } }