/* =========================================================
   AMOS INTO ACTION — Landing page styles
   ========================================================= */

:root {
  --navy:        #002060;
  --blue:        #0050A0;
  --blue-light:  #4A8FCC;
  --teal:        #006B60;
  --teal-light:  #E0F0EE;
  --cream:       #FDFAF4;
  --off-white:   #F4F7FA;
  --border:      #C8D6E5;
  --text:        #1A2B3C;
  --muted:       #4A607A;
  --light-text:  #6B8099;
  --white:       #FFFFFF;
  --overlay-dark: rgba(0, 22, 68, 0.82);
  --overlay-mid:  rgba(0, 60, 130, 0.65);
  --overlay-teal: rgba(0, 90, 80, 0.45);
  --error:       #B3252E;
  --error-bg:    #FDF3F3;

  /* NHS identity guidelines, digital: the exclusion zone around the mark is
     half its height — 18px at the size used here — and the mark is never shown
     below 30px high. Both are floors rather than targets, so the masthead
     keeps three quarters of the logo's height clear on every side. */
  --nhs-logo-height:     36px;
  --nhs-logo-clear:      27px;
  --nhs-masthead-height: calc(var(--nhs-logo-height) + (var(--nhs-logo-clear) * 2));
}

/* ── RESET ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
img { display: block; max-width: 100%; }
a { color: inherit; }

/* ── BASE ── */
html { scroll-behavior: smooth; }

body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: var(--text);
  background: var(--white);
}

/* ── TYPOGRAPHY ── */
h1, h2, h3, h4 {
  line-height: 1.2;
  color: var(--navy);
}

h1 { font-size: clamp(2.4rem, 5.5vw, 4.2rem); letter-spacing: -0.02em; }
h2 { font-size: clamp(1.7rem, 3.5vw, 2.8rem); letter-spacing: -0.01em; }
h3 { font-size: clamp(1.2rem, 2.5vw, 1.65rem); }
h4 { font-size: 1.1rem; }

p { max-width: 680px; }

/* ── LAYOUT ── */
.container {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 28px;
}

.section {
  padding: 88px 0;
}

.section--sm { padding: 56px 0; }
.section--lg { padding: 112px 0; }

/* ── HERO ── */
.hero {
  position: relative;
  /* The masthead is a band above rather than an overlay, so the hero fills
     what is left of the viewport instead of all of it. */
  min-height: calc(100vh - var(--nhs-masthead-height));
  background-size: cover;
  background-position: center 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 64px 28px;
}

.hero::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    150deg,
    var(--overlay-dark) 0%,
    var(--overlay-mid) 55%,
    var(--overlay-teal) 100%
  );
}

/* ── NHS MASTHEAD ──
   White is the preferred ground for the mark, and NHS Blue over the hero's
   navy overlay is not legible anyway. A bar of its own gives the exclusion
   zone room on all four sides: the padding clears it above and below, and
   .container's own padding — wider than the zone — clears it at the edges. */
.nhs-masthead {
  background: var(--white);
  padding: var(--nhs-logo-clear) 0;
}

/* flex so the image sits in a baseline-free box: an inline image would leave
   descender space under it and eat into the zone below. Left, opening the
   content column the way the sections below it open — the guidelines' top
   right is written for print, and they allow digital its own placement. */
.nhs-masthead .container {
  display: flex;
  align-items: center;
}

.nhs-logo {
  height: var(--nhs-logo-height);
  width: auto;
}

.hero-inner {
  position: relative;
  z-index: 1;
  max-width: 820px;
  width: 100%;
}

.hero-wordmark {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 20px;
}

.hero h1 {
  color: var(--white);
  margin-bottom: 16px;
}

.hero-subtitle {
  font-size: clamp(1rem, 2.2vw, 1.25rem);
  color: rgba(255,255,255,0.88);
  max-width: 560px;
  margin: 0 auto 52px;
}

/* ── COUNTDOWN ── */
.countdown-intro {
  font-size: 0.8rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.65);
  /* auto sides, as .hero-subtitle does: the global p { max-width: 680px } caps
     this line too, and without them it sits flush left in a wider hero and its
     centred text lands left of the countdown below it. */
  margin: 0 auto 14px;
}

/* Four columns of one width, whichever box is widest.
   As flex items each box sized to its own content, so the width was
   max(number, label): DAYS is four characters and SECONDS is seven, and the
   day count swings between one and three digits as it runs down. Above a
   certain width the number outgrows every label and all four happen to match,
   which is why they looked equal on most screens but not all.
   Equal 1fr tracks in a grid sized to fit-content all take the width of the
   largest, so any box growing widens the set rather than just itself. */
.countdown {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  width: fit-content;
  max-width: 100%;
  gap: 12px;
  margin: 0 auto 48px;
}

.countdown-unit {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.22);
  border-radius: 14px;
  padding: 22px 28px;
  min-width: 105px;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.countdown-number {
  display: block;
  font-size: clamp(2.4rem, 4.5vw, 3.8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  font-variant-numeric: tabular-nums;
}

.countdown-label {
  display: block;
  font-size: 0.72rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-top: 7px;
}

/* ── BUTTONS ── */
.btn {
  display: inline-block;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 15px 38px;
  border-radius: 50px;
  text-decoration: none;
  cursor: pointer;
  border: 2px solid transparent;
  transition: all 0.22s ease;
  letter-spacing: 0.01em;
}

.btn-hero {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.btn-hero:hover {
  background: transparent;
  color: var(--white);
}

.btn-primary {
  background: var(--blue);
  color: var(--white);
  border-color: var(--blue);
}
.btn-primary:hover {
  background: var(--navy);
  border-color: var(--navy);
}

/* Light button — for use on dark backgrounds */
.btn-light {
  background: var(--white);
  color: var(--navy);
  border-color: var(--white);
}
.btn-light:hover {
  background: transparent;
  color: var(--white);
}

/* ── SECTION CALL TO ACTION ── */
.section-cta {
  margin-top: 36px;
}

.section-cta--center {
  text-align: center;
  margin-top: 48px;
}

/* ── REVIEW SECTION ── */
.review-section {
  background: var(--cream);
}

.review-grid {
  display: grid;
  grid-template-columns: 1fr 360px;
  gap: 64px;
  align-items: center;
}

.review-text p { margin-bottom: 18px; color: var(--muted); }

/* The framing statement reads as a highlight paragraph rather than a heading:
   a step up from the copy around it, in the navy the headings use. */
.review-text .review-lead {
  font-size: clamp(1.15rem, 1.6vw, 1.28rem);
  line-height: 1.5;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--navy);
  margin-bottom: 28px;
}

.review-questions {
  list-style: none;
  margin: 0 0 18px;
  padding: 0;
}
.review-questions li {
  position: relative;
  padding-left: 20px;
  margin-bottom: 10px;
  color: var(--text);
  font-weight: 500;
}
.review-questions li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--teal);
}

.review-image img {
  border-radius: 12px;
  width: 100%;
  height: 440px;
  object-fit: cover;
  object-position: center top;
  box-shadow: 0 20px 60px rgba(0,32,96,0.15);
}

.download-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 24px;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  font-size: 0.95rem;
  border-bottom: 2px solid transparent;
  transition: border-color 0.2s;
}
.download-link:hover { border-color: var(--blue); }

/* ── IMAGE STRIP ── */
.image-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}

.image-strip img {
  width: 100%;
  height: 300px;
  object-fit: cover;
  display: block;
}

/* ── WELCOME SECTION ── */
.welcome-section {
  background: var(--white);
}

/* Flush against the container's left edge so the heading starts where the
   explore cards below it do. Auto side margins centred the column, which read
   as an indent once the text inside it stopped being centred too. The 720px cap
   is the reading measure and stays. */
.welcome-intro {
  text-align: left;
  max-width: 720px;
  margin: 0 0 56px;
}
.welcome-intro h2 { margin-bottom: 20px; }
/* Flush left: auto side margins would centre the 680px paragraph box inside
   the 720px column and leave the text ragged against the heading above it. */
.welcome-intro p { margin: 0; color: var(--muted); }
/* Only between paragraphs: the block's own bottom margin sets the gap to the
   cards below, so a trailing margin here would widen it. */
.welcome-intro p + p { margin-top: 18px; }
.welcome-intro ul {
  margin-top: 18px;
  padding-left: 18px;
  color: var(--muted);
}
.welcome-intro ul li { margin-bottom: 4px; }

.explore-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
}

.explore-card {
  background: var(--off-white);
  border-radius: 14px;
  padding: 36px 28px;
  border-left: 4px solid var(--blue-light);
}

.explore-card h3 {
  font-size: 1.1rem;
  margin-bottom: 12px;
  color: var(--navy);
}

.explore-card p {
  font-size: 0.95rem;
  color: var(--muted);
  max-width: none;
}

/* ── LEADERSHIP SECTION ── */
.leadership-section {
  background: var(--off-white);
}

/* Matches .leadership-grid's width, so the heading starts where the leader
   cards do. The paragraph keeps its own measure from the global p cap rather
   than running the full 860px. */
.leadership-intro {
  text-align: left;
  max-width: 860px;
  margin: 0 auto 56px;
}
.leadership-intro h2 { margin-bottom: 18px; }
.leadership-intro p { margin: 0; color: var(--muted); }

.leadership-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 24px;
  max-width: 860px;
  margin: 0 auto;
}

.leader-card {
  background: var(--white);
  border-radius: 16px;
  box-shadow: 0 4px 24px rgba(0,32,96,0.08);
}

.leader-info {
  padding: 28px 24px;
}

.leader-name {
  font-family: inherit;
  font-size: 1.1rem;
  font-weight: normal;
  color: var(--navy);
  margin-bottom: 4px;
}

.leader-title {
  font-size: 0.85rem;
  color: var(--muted);
  margin-bottom: 16px;
  line-height: 1.4;
}

.leader-info p {
  font-size: 0.93rem;
  color: var(--muted);
  max-width: none;
}

/* ── WHAT HAPPENS SECTION ── */
.steps-section {
  background: var(--white);
}

.steps-grid {
  display: grid;
  grid-template-columns: 480px 1fr;
  gap: 72px;
  align-items: start;
}

.steps-image img {
  border-radius: 14px;
  width: 100%;
  height: 520px;
  object-fit: cover;
  /* Off-centre: this column is narrower than the photo, and a centred crop
     cuts the head off the figure at its left edge, leaving a stray arm. */
  object-position: 70% center;
  box-shadow: 0 20px 60px rgba(0,32,96,0.12);
}

/* The text column spans both rows so the CTA can tuck in under the image
   rather than being pushed to the bottom of the taller text column. */
.steps-content {
  grid-row: span 2;
}

.steps-content h2 { margin-bottom: 40px; }

/* CTA sits below the image, centred within the narrow left column */
.steps-cta {
  grid-column: 1;
  text-align: center;
  margin-top: 40px;
}

.step {
  display: flex;
  gap: 24px;
  margin-bottom: 40px;
  padding-bottom: 40px;
  border-bottom: 1px solid var(--border);
}

.step:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.step-number {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  background: var(--navy);
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: 1.05rem;
  font-weight: normal;
  margin-top: 4px;
}

.step-body h3 { font-size: 1.2rem; margin-bottom: 10px; }
.step-body p { font-size: 0.95rem; color: var(--muted); max-width: none; }
.step-body ul {
  margin-top: 10px;
  padding-left: 18px;
  font-size: 0.93rem;
  color: var(--muted);
}
.step-body ul li { margin-bottom: 4px; }

/* ── PROMISE SECTION ── */
.promise-section {
  background: var(--navy);
  color: var(--white);
}

.promise-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 72px;
  align-items: center;
}

.promise-content h2 { color: var(--white); margin-bottom: 16px; }
.promise-content > p {
  color: rgba(255,255,255,0.75);
  margin-bottom: 36px;
  font-style: italic;
  font-family: inherit;
}

.promise-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.promise-list li {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  color: rgba(255,255,255,0.85);
  font-size: 0.97rem;
}

.promise-icon {
  width: 28px;
  height: 28px;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.25);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 0.8rem;
}

.promise-image img {
  border-radius: 16px;
  width: 100%;
  height: 520px;
  object-fit: cover;
  object-position: center;
  box-shadow: 0 24px 60px rgba(0,0,0,0.3);
}

/* ── REGISTRATION FORM ── */
.register-section {
  background: var(--cream);
}

/* Matches .form-card's width, so the two share a left edge. The paragraph
   keeps its own measure from the global p cap rather than running the full
   860px. */
.register-intro {
  text-align: left;
  max-width: 860px;
  margin: 0 auto 56px;
}
.register-intro h2 { margin-bottom: 16px; }
.register-intro p { margin: 0; color: var(--muted); }

/* A quieter line under the invitation above it: the same voice, half a step
   back, so it informs without competing with the ask. */
.register-intro .register-privacy {
  margin-top: 14px;
  font-size: 0.9rem;
}

.register-privacy a {
  color: var(--blue);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.register-privacy a:hover { color: var(--navy); }

.form-card {
  background: var(--white);
  border-radius: 20px;
  padding: 52px 56px;
  max-width: 860px;
  margin: 0 auto;
  box-shadow: 0 8px 48px rgba(0,32,96,0.10);
}

.form-section-title {
  font-family: inherit;
  font-size: 1.25rem;
  color: var(--navy);
  margin-bottom: 28px;
  padding-bottom: 14px;
  border-bottom: 2px solid var(--border);
}

.form-group {
  margin-bottom: 24px;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
  margin-bottom: 8px;
}

.form-group select,
.form-group input[type="text"],
.form-group input[type="email"],
.form-group textarea {
  width: 100%;
  padding: 12px 16px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 0.97rem;
  color: var(--text);
  background: var(--white);
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  transition: border-color 0.2s;
  font-family: inherit;
}

.form-group textarea {
  resize: vertical;
  min-height: 90px;
}

.form-group select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%234A607A' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.form-group select:focus,
.form-group input:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(0,80,160,0.10);
}

/* Sits between the label and the field it explains, so it is read before the
   field is answered rather than after. The global p cap does not apply inside
   the form card, which is already narrower than the measure. */
.form-hint {
  margin: -2px 0 10px;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
}

/* ── VALIDATION ── */
.form-error {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin-top: 8px;
  font-size: 0.88rem;
  font-weight: 500;
  line-height: 1.5;
  color: var(--error);
}

.form-error[hidden] { display: none; }

/* The Other box sits inside the organisation group and only appears once
   Other is picked, so it carries its own spacing rather than the group's. */
#organisation-other-group {
  margin-top: 16px;
  margin-bottom: 0;
}

#organisation-other-group[hidden] { display: none; }

.form-error::before {
  content: "!";
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--error);
  color: var(--white);
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}

.form-group.has-error input,
.form-group.has-error select,
.form-group.has-error textarea {
  border-color: var(--error);
  background: var(--error-bg);
}

.form-group.has-error input:focus,
.form-group.has-error select:focus,
.form-group.has-error textarea:focus {
  border-color: var(--error);
  box-shadow: 0 0 0 3px rgba(179,37,46,0.12);
}

.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20px;
}

/* ── ORGANISATION COMBOBOX ── */
.combobox-wrapper {
  position: relative;
}

.combobox-wrapper input[type="text"] {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24'%3E%3Ccircle cx='11' cy='11' r='7' stroke='%234A607A' stroke-width='1.8' fill='none'/%3E%3Cline x1='16.5' y1='16.5' x2='22' y2='22' stroke='%234A607A' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  padding-right: 40px;
}

.combobox-dropdown {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: var(--white);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,0.10);
  max-height: 260px;
  overflow-y: auto;
  z-index: 100;
}

.combobox-group-label {
  padding: 8px 14px 4px;
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--text-light, #6b7c93);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-top: 1px solid var(--border);
}

.combobox-group:first-child .combobox-group-label {
  border-top: none;
}

.combobox-option {
  padding: 10px 14px;
  font-size: 0.95rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.1s;
}

.combobox-option:hover,
.combobox-option--active {
  background: rgba(0,80,160,0.07);
  color: var(--blue);
}

/* ── SLIDERS ── */
.slider-section {
  margin: 40px 0;
}

.slider-intro {
  font-size: 0.93rem;
  color: var(--muted);
  margin-bottom: 28px;
  font-style: italic;
}

/* Two intro paragraphs in a row are one block of preamble, so only the last of
   them keeps the full gap before the questions start. */
.slider-intro:not(:last-of-type) { margin-bottom: 10px; }

.slider-group {
  margin-bottom: 28px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--border);
}

.slider-group:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.slider-question {
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 14px;
  line-height: 1.5;
}

.slider-tag {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--off-white);
  color: var(--blue);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 2px 10px;
  margin-bottom: 10px;
}

.slider-row {
  display: flex;
  align-items: center;
  gap: 14px;
}

.slider-endpoint {
  font-size: 0.78rem;
  color: var(--light-text);
  white-space: nowrap;
  flex-shrink: 0;
  width: 90px;
}

.slider-endpoint:last-child { text-align: right; }

input[type="range"].slider {
  flex: 1;
  height: 6px;
  -webkit-appearance: none;
  appearance: none;
  background: var(--border);
  border-radius: 3px;
  outline: none;
  cursor: pointer;
}

input[type="range"].slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  background: var(--blue);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,80,160,0.3);
  transition: transform 0.15s;
}

input[type="range"].slider::-webkit-slider-thumb:hover {
  transform: scale(1.15);
}

input[type="range"].slider::-moz-range-thumb {
  width: 22px;
  height: 22px;
  background: var(--blue);
  border-radius: 50%;
  cursor: pointer;
  border: 3px solid white;
  box-shadow: 0 2px 8px rgba(0,80,160,0.3);
}

.slider-value {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--blue);
  font-variant-numeric: tabular-nums;
  min-width: 24px;
  text-align: center;
  flex-shrink: 0;
}

/* ── CONSENT & SUBMIT ── */
.consent-section { margin-top: 40px; }

.consent-group {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 32px;
}

.consent-group input[type="checkbox"] {
  width: 20px;
  height: 20px;
  margin-top: 2px;
  flex-shrink: 0;
  accent-color: var(--blue);
  cursor: pointer;
}

/* The checkbox alone is too small to carry the error signal, so the whole
   row is boxed and the message sits directly beneath it. */
.consent-group.has-error {
  margin: 0 -16px 12px;
  padding: 14px 16px;
  border-left: 3px solid var(--error);
  border-radius: 4px;
  background: var(--error-bg);
}

.consent-group.has-error input[type="checkbox"] {
  accent-color: var(--error);
  outline: 2px solid var(--error);
  outline-offset: 2px;
}

.consent-group.has-error label { color: var(--text); }

.consent-error { margin: 0 0 32px; }

.consent-group label {
  font-size: 0.93rem;
  color: var(--muted);
  cursor: pointer;
  line-height: 1.5;
}

.form-submit {
  text-align: center;
}

.form-submit-note {
  margin: 14px 0 0;
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.6;
  color: var(--muted);
}

.btn-submit {
  display: inline-block;
  background: var(--navy);
  color: white;
  font-size: 1rem;
  font-weight: 600;
  padding: 18px 52px;
  border-radius: 50px;
  border: 2px solid var(--navy);
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: all 0.22s ease;
  font-family: inherit;
}

.btn-submit:hover {
  background: var(--blue);
  border-color: var(--blue);
  transform: translateY(-1px);
  box-shadow: 0 8px 28px rgba(0,32,96,0.2);
}

/* ── UNAPPROVED EMAIL DIALOG ──
   Shown when the address given isn't from an organisation on the approved list.
   It asks rather than refuses, so "use a different address" leads and "sign up
   with this one" is a quieter second option beside it. */
.email-dialog {
  max-width: 520px;
  width: calc(100% - 40px);
  padding: 36px 36px 30px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--white);
  color: var(--text);
  box-shadow: 0 20px 60px rgba(0,32,96,0.22);
}

.email-dialog::backdrop {
  background: var(--overlay-dark);
}

.email-dialog h3 {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 14px;
  line-height: 1.35;
}

.email-dialog p {
  color: var(--muted);
  font-size: 0.97rem;
  margin-bottom: 26px;
}

.email-dialog-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* The dialog is narrower than the form, so the shared submit button has to give
   back the padding it uses out there. */
.email-dialog-actions .btn-submit {
  padding: 14px 28px;
  font-size: 0.95rem;
}

.email-dialog-continue {
  background: none;
  border: none;
  padding: 14px 8px;
  font-family: inherit;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
  transition: color 0.2s ease;
}

.email-dialog-continue:hover {
  color: var(--navy);
}

@media (max-width: 480px) {
  .email-dialog { padding: 28px 24px 24px; }
  .email-dialog-actions { flex-direction: column; align-items: stretch; }
  .email-dialog-actions .btn-submit { width: 100%; }
}

/* ── SUCCESS STATE ── */
.form-success {
  display: none;
  text-align: center;
  padding: 48px 0 24px;
}

.success-icon {
  width: 72px;
  height: 72px;
  background: var(--teal-light);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 24px;
  font-size: 2rem;
}

.form-success h3 { margin-bottom: 12px; }
.form-success p { margin: 0 auto; color: var(--muted); }

/* ── FOOTER ── */
.site-footer {
  background: var(--navy);
  color: rgba(255,255,255,0.6);
  padding: 40px 0;
}

.footer-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 20px;
}

.footer-brand {
  font-family: inherit;
  font-size: 1rem;
  color: rgba(255,255,255,0.85);
}

.footer-copy {
  font-size: 0.83rem;
}

.footer-copy a {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-copy a:hover {
  color: var(--white);
}

.footer-privacy {
  font-size: 0.83rem;
  color: rgba(255,255,255,0.55);
  text-decoration: underline;
  text-underline-offset: 3px;
  white-space: nowrap;
}

.footer-privacy:hover {
  color: var(--white);
}

/* Its own line under the row above: the flex row is already three items wide.
   Centred, and released from the global 680px paragraph cap so it sits on one
   line across the container on desktop and wraps freely once space runs out. */
.footer-support {
  max-width: none;
  margin-top: 24px;
  padding-top: 20px;
  border-top: 1px solid rgba(255,255,255,0.12);
  font-size: 0.83rem;
  text-align: center;
}

.footer-support a {
  color: rgba(255,255,255,0.85);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.footer-support a:hover {
  color: var(--white);
}

/* ── RESPONSIVE ── */
@media (max-width: 900px) {
  .review-grid,
  .steps-grid,
  .promise-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .review-image { display: none; }

  .steps-image img { height: 300px; }

  /* Stacked: image, text, then the CTA at the end of the section */
  .steps-content { grid-row: auto; }
  .steps-cta { margin-top: 0; }

  .promise-image { display: none; }

  .explore-grid { grid-template-columns: 1fr; }

  .form-row { grid-template-columns: 1fr; }

  .form-card { padding: 36px 28px; }

  .steps-grid { grid-template-columns: 1fr; }

  .image-strip { grid-template-columns: repeat(3, 1fr); }
  .image-strip img { height: 200px; }
}

@media (max-width: 600px) {
  h1 { font-size: 2.2rem; }
  h2 { font-size: 1.7rem; }

  /* Two by two rather than a ragged wrap: four columns will not fit a phone,
     and the grid has no flex-wrap to fall back on. Still equal tracks. */
  .countdown { grid-template-columns: repeat(2, 1fr); gap: 8px; }
  .countdown-unit { min-width: 80px; padding: 16px 16px; }

  .image-strip { grid-template-columns: 1fr; }
  .image-strip img { height: 260px; }

  .form-card { padding: 28px 20px; }

  .slider-row { flex-direction: column; align-items: stretch; gap: 10px; }
  .slider-endpoint { width: auto; }
  .slider-endpoint:last-child { text-align: left; }
}