/* =====================================================================
   LANDING VARIANTS  (/v2/ and /v3/)
   One postcode field on a black screen, and nothing else until it is
   answered. Shares every other style with the main site.
   ===================================================================== */

.v-body{background:var(--black);color:#fff}
.v-body .site-footer{border-top:1px solid #2a0a0e;background:var(--black)}

/* ---------- the opening screen ---------- */
.v-stage{
  /* the header is sticky above it, so centre in what is left
     (--v-header is measured and set by js/variant.js) */
  min-height:calc(100svh - var(--v-header,120px));
  min-height:calc(100vh - var(--v-header,120px));
  display:flex;align-items:center;justify-content:center;
  padding:40px 0;background:var(--black);position:relative;
}
.v-stage .wrap{width:100%}
.v-stage-inner{text-align:center;max-width:720px;margin:0 auto}
.v-mark{display:block;width:min(420px,72vw);height:auto;margin:0 auto 38px}
.v-stage h1{
  font-size:clamp(30px,5vw,58px);font-weight:900;line-height:1.04;
  letter-spacing:-.02em;margin:0 0 18px;
}
.v-stage h1 b{color:var(--red-hot);font-weight:900}
.v-stage .v-sub{color:#d9c4c7;font-size:clamp(16px,2vw,20px);line-height:1.5;margin:0 auto;max-width:36em}
.v-stage .postcode-form{margin-top:40px}
.v-stage .disclaimer{color:#8a7478}
.v-stage .input-row button{background:var(--red)}
.v-stage .input-row button:hover{background:var(--red-hot)}
.v-stage .input-row:focus-within{box-shadow:0 0 0 4px rgba(255,31,51,.45)}

/* a slow pulse on the field so it is obvious what to do */
@media (prefers-reduced-motion:no-preference){
  .v-stage .input-row{animation:vPulse 3.4s ease-in-out infinite}
  @keyframes vPulse{
    0%,100%{box-shadow:0 0 0 0 rgba(255,31,51,0)}
    50%{box-shadow:0 0 0 7px rgba(255,31,51,.14)}
  }
  .v-stage .input-row:focus-within{animation:none}
}

/* the scroll hint only appears once there is something below to scroll to */
.v-hint{
  position:absolute;left:0;right:0;bottom:26px;text-align:center;
  font:700 12px var(--mono);letter-spacing:.24em;text-transform:uppercase;
  color:#7d4a52;opacity:0;transition:opacity .5s;pointer-events:none;
}
.v-revealed .v-hint{opacity:1}

/* ---------- what appears after the postcode ---------- */
#v-results[hidden]{display:none}
.v-results-head{
  border-top:1px solid #2a0a0e;background:var(--black);
  padding:64px 0 0;text-align:center;
}
.v-results-head .eyebrow{color:var(--red-hot)}
.v-results-head h2{font-size:clamp(26px,3.6vw,40px);font-weight:900;margin:.2em 0 0;letter-spacing:-.02em}
.v-results-head p{color:#d9c4c7;max-width:44em;margin:14px auto 0}

/* the MP panel is normally nested inside the closing message; on /v3/ it
   stands on its own, so give it the frame it would otherwise inherit */
.v-mp{background:var(--black);padding:36px 0 72px}
.v-mp .mp-panel{margin:0 auto;max-width:760px}

/* /v2/: the closing message lands, then the comparisons sit under it */
.v-truth-lead{background:var(--black);padding:72px 0 0;text-align:center}
.v-truth-lead .eyebrow{color:var(--red-hot)}
.v-truth-lead h2{font-size:clamp(26px,3.6vw,42px);font-weight:900;margin:.2em auto 0;max-width:20em;letter-spacing:-.02em}
.v-truth-lead p{color:#d9c4c7;max-width:44em;margin:14px auto 0}

/* nothing to toggle between until the page below has been opened */
.v-body:not(.v-revealed) .slogan-toggle{display:none}

/* anchor jumps have to clear the sticky header */
.v-body .v-results-head,
.v-body #v-results > .gb,
.v-body #v-results > section,
.v-body #repeal{scroll-margin-top:92px}

@media (max-width:700px){
  .v-stage{min-height:auto;padding:64px 0 72px}
  .v-mark{margin-bottom:28px}
}

/* Short screens (laptops, landscape phones): the opening block has to stay one
   screenful, so it tightens rather than running under the fold. */
@media (max-height:880px) and (min-width:701px){
  .v-mark{width:min(330px,52vw);margin-bottom:24px}
  .v-stage h1{font-size:clamp(28px,3.4vw,44px);margin-bottom:14px}
  .v-stage .v-sub{font-size:17px}
  .v-stage .postcode-form{margin-top:28px}
}
@media (max-height:720px) and (min-width:701px){
  .v-mark{width:min(260px,44vw);margin-bottom:18px}
  .v-stage h1{font-size:clamp(26px,2.8vw,36px)}
  .v-stage .v-sub{font-size:16px}
  .v-stage .postcode-form{margin-top:20px}
  .v-stage .postcode-form label{font-size:16px;margin-bottom:7px}
  .v-stage .input-row input{font-size:20px;padding:9px 12px}
  .v-stage .input-row button{width:48px;height:48px}
}

/* small phones: tighten so the field and the note still land on one screen */
@media (max-width:700px) and (max-height:780px){
  .v-stage{padding:26px 0 34px}
  .v-mark{width:min(230px,56vw);margin-bottom:16px}
  .v-stage h1{font-size:clamp(24px,6.6vw,32px);margin-bottom:12px}
  .v-stage .v-sub{font-size:15px}
  .v-stage .postcode-form{margin-top:22px}
  .v-stage .disclaimer{font-size:13px;margin-top:14px}
}