/* ISMA pop-up site - iAhub brand tokens (iAhub_BrandTokens.md) */
:root {
  --navy: #001428;
  --navy-700: #000F1E;
  --navy-300: #4C5A68;
  --cyan: #00C8FF;
  --cyan-100: #C9F3FF;
  --cyan-900: #006E8C;
  --green: #00B90A;
  --green-100: #B7FFBB;
  --green-900: #006606;
  --yellow: #F5CD00;
  --yellow-100: #FFF2AF;
  --slate: #54718A;
  --mist: #9BB2C6;
  --cloud: #DEE8F0;
  --frost: #F3F8FC;
  --ink: #1A1A1A;
  --ink-100: #F0F0F0;
  --sep: #D2D2D2;
  --signal: #006EA0;
  --error-100: #FFD6D1;
  --error-900: #8C3D35;
  --white: #FFFFFF;
  --radius: 14px;
  --gutter: 16px;
  --max: 980px;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
  margin: 0;
  font-family: "Roboto", system-ui, -apple-system, "Segoe UI", Arial, sans-serif;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--ink);
  background: var(--frost);
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--signal); }
a:hover { color: var(--cyan-900); }
:focus-visible { outline: 3px solid var(--cyan); outline-offset: 3px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.15; margin: 0 0 .5rem; }
p { margin: 0 0 1rem; }

.icon { width: 1.25em; height: 1.25em; fill: currentColor; flex: none; vertical-align: -0.2em; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 var(--gutter); }
.visually-hidden {
  position: absolute !important; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip { position: absolute; left: -999px; top: 8px; background: var(--white); color: var(--navy); padding: 8px 12px; border-radius: 6px; z-index: 10; }
.skip:focus { left: 8px; }

/* Label above each heading, as in the deck */
.label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--signal);
  margin-bottom: .35rem;
}
.section { padding: 48px 0; }
.section h2 { font-size: clamp(1.6rem, 5vw, 2.2rem); font-weight: 700; color: var(--navy); }
.section .lede { color: var(--navy-300); max-width: 40rem; }

/* Buttons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .55rem;
  min-height: 52px; padding: .8rem 1.4rem;
  border-radius: 999px; border: 2px solid transparent;
  font: inherit; font-weight: 700; font-size: 1.05rem; text-decoration: none; cursor: pointer;
  transition: transform .15s ease, background-color .15s ease;
}
.btn:hover { transform: translateY(-1px); }
.btn-lucky { background: var(--yellow); color: var(--ink); }
.btn-lucky:hover { background: #F8DC4C; color: var(--ink); }
.btn-ghost { background: transparent; color: var(--white); border-color: rgba(255,255,255,.55); }
.btn-ghost:hover { border-color: var(--white); color: var(--white); }
.btn-navy { background: var(--navy); color: var(--white); }
.btn-navy:hover { background: #17405F; color: var(--white); }
.btn-row { display: flex; flex-wrap: wrap; gap: 12px; }

/* Hero */
.hero { background: var(--navy); color: var(--white); padding: 20px 0 44px; overflow: hidden; position: relative; }
.hero .logo { width: 150px; margin-bottom: 28px; }
.hero-grid { position: relative; }
.hero-13 {
  font-size: clamp(6rem, 34vw, 13rem);
  font-weight: 700; line-height: .8; letter-spacing: -.05em;
  color: var(--yellow); margin: 0 0 18px;
  display: flex; align-items: flex-end; gap: .1em;
}
.hero-13 .icon { width: .26em; height: .26em; color: var(--white); opacity: .9; margin-bottom: .06em; }
.kicker { font-size: .8rem; font-weight: 700; letter-spacing: .14em; text-transform: uppercase; color: var(--cyan); margin-bottom: .6rem; }
.hero h1 { font-size: clamp(2.3rem, 9vw, 3.8rem); font-weight: 700; margin-bottom: .9rem; }
.hero .line { color: var(--mist); font-size: 1.15rem; max-width: 34rem; margin-bottom: 1.6rem; }
@media (min-width: 760px) {
  .hero { padding: 28px 0 64px; }
  .hero-grid { display: grid; grid-template-columns: auto 1fr; gap: 0 48px; align-items: end; }
  .hero-13 { grid-row: span 4; margin: 0; }
}

/* The switch */
.switch-section { background: var(--white); overflow-x: clip; }
.toggle {
  display: inline-flex; padding: 5px; gap: 4px;
  border-radius: 999px; background: var(--ink-100); border: 1px solid var(--sep);
  margin: .6rem 0 1.2rem;
}
.toggle button {
  font: inherit; font-weight: 700; font-size: 1.05rem;
  display: inline-flex; align-items: center; gap: .5rem;
  min-height: 48px; padding: .55rem 1.25rem; border-radius: 999px;
  border: 0; background: transparent; color: var(--navy-300); cursor: pointer;
  transition: background-color .25s ease, color .25s ease;
}
.toggle button[aria-pressed="true"].t-unlucky { background: var(--slate); color: var(--white); }
.toggle button[aria-pressed="true"].t-lucky { background: var(--navy); color: var(--yellow); }

.banner {
  display: flex; align-items: center; gap: 14px;
  border-radius: var(--radius); padding: 16px 18px; margin-bottom: 18px;
  transition: background-color .35s ease, color .35s ease;
  position: relative; overflow: hidden;
}
.banner .icon { width: 2.2rem; height: 2.2rem; }
.banner .b-small { display: block; font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.banner .b-big { display: block; font-size: clamp(1.3rem, 4.6vw, 1.7rem); font-weight: 700; line-height: 1.15; }

.points { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
@media (min-width: 760px) { .points { grid-template-columns: 1fr 1fr; gap: 14px; } }
.point {
  border-radius: var(--radius); padding: 16px 18px;
  transition: background-color .35s ease, color .35s ease, transform .35s ease, border-color .35s ease;
  border: 1px dashed transparent;
}
.point .p-head { display: flex; align-items: center; gap: .55rem; font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-bottom: .35rem; }
.point .p-text { display: flex; gap: .6rem; align-items: flex-start; margin: 0; }
.point .p-text .icon { margin-top: .2em; }

/* Unlucky: greyer, slightly cluttered */
.is-unlucky .banner { background: var(--ink-100); color: var(--navy-300); }
.is-unlucky .banner .icon { color: var(--slate); }
.is-unlucky .point { background: var(--ink-100); color: var(--navy-300); border-color: #B4B4B4; }
.is-unlucky .point .p-head { color: var(--slate); }
.is-unlucky .point .s-icon { color: var(--slate); }
.is-unlucky .point:nth-child(4n+1) { transform: rotate(-1.1deg) translateX(-3px); }
.is-unlucky .point:nth-child(4n+2) { transform: rotate(.8deg) translateX(5px); }
.is-unlucky .point:nth-child(4n+3) { transform: rotate(.4deg) translateX(-6px); }
.is-unlucky .point:nth-child(4n) { transform: rotate(-.6deg) translateX(3px); }
.is-unlucky .lucky-only { display: none !important; }

/* Lucky: navy and calm, with the yellow accent */
.is-lucky .banner { background: var(--navy); color: var(--white); }
.is-lucky .banner .b-big { color: var(--yellow); }
.is-lucky .banner .b-small { color: var(--cyan); }
.is-lucky .banner .icon { color: var(--yellow); }
.is-lucky .point { background: var(--navy); color: var(--white); transform: none; }
.is-lucky .point .p-head { color: var(--cyan); }
.is-lucky .point .s-icon { color: var(--green); }
.is-lucky .unlucky-only { display: none !important; }

/* Rain on the unlucky banner */
.rain { position: absolute; inset: 0; pointer-events: none; }
.rain i {
  position: absolute; top: -12px; width: 2px; height: 10px; border-radius: 2px;
  background: var(--mist); opacity: .7; animation: drop 1.1s linear infinite;
}
.rain i:nth-child(1) { left: 55%; animation-delay: 0s; }
.rain i:nth-child(2) { left: 68%; animation-delay: .35s; }
.rain i:nth-child(3) { left: 79%; animation-delay: .7s; }
.rain i:nth-child(4) { left: 90%; animation-delay: .15s; }
.rain i:nth-child(5) { left: 62%; animation-delay: .9s; }
@keyframes drop { to { transform: translateY(110px); } }
.is-lucky .rain { display: none; }
.sun-spin { animation: spin 18s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }

.switch-foot { margin-top: 22px; padding: 16px 18px; border-radius: var(--radius); background: var(--cyan-100); color: var(--navy); font-weight: 500; }

/* Cards */
.card { background: var(--white); border: 1px solid var(--cloud); border-radius: var(--radius); padding: 22px; }
.ideas { display: grid; gap: 16px; }
@media (min-width: 760px) { .ideas { grid-template-columns: 1fr 1fr; } }
.card h3 { font-size: 1.3rem; color: var(--navy); }
.card p:last-child { margin-bottom: 0; }
.facets { list-style: none; padding: 0; margin: 14px 0 16px; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.facets li { display: flex; align-items: center; gap: .5rem; font-weight: 500; font-size: .95rem; color: var(--navy); background: var(--frost); border-radius: 10px; padding: 8px 10px; }
.facets .icon { color: var(--navy); }
.quiet { color: var(--navy-300); }

/* Five checks */
.checks { list-style: none; counter-reset: c; padding: 0; margin: 0; display: grid; gap: 12px; }
.checks li { counter-increment: c; display: flex; gap: 14px; align-items: flex-start; background: var(--white); border: 1px solid var(--cloud); border-radius: var(--radius); padding: 16px 18px; }
.checks li::before {
  content: counter(c); flex: none; width: 2rem; height: 2rem; border-radius: 50%;
  background: var(--cyan); color: var(--navy); font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}

/* Who we are */
.about { display: grid; gap: 18px; align-items: center; }
.about .logo-dark { width: 180px; }
@media (min-width: 760px) { .about { grid-template-columns: 220px 1fr; } }

/* Close */
.close { background: var(--navy); color: var(--white); padding: 52px 0 36px; }
.close h2 { color: var(--yellow); font-size: clamp(1.7rem, 6vw, 2.4rem); max-width: 36rem; }
.close .offer { color: var(--mist); margin: 1rem 0 1.4rem; }
.close .links { display: grid; gap: 10px; margin-top: 1.2rem; }
.close .links a { color: var(--white); display: inline-flex; align-items: center; gap: .6rem; font-weight: 500; }
.close .links a:hover { color: var(--cyan); }
.close .links .icon { color: var(--cyan); }
.smallprint { color: var(--mist); font-size: .85rem; border-top: 1px solid #17405F; margin-top: 32px; padding-top: 16px; }

/* ===== Lucky draw page =====
   Research-led: one column, labels above (Baymard), hint between label and field (GOV.UK),
   errors next to the field and checked as you go, 48px touch targets, 16px text so iOS does not zoom,
   tight label-to-field spacing and generous space between questions. */
.draw-hero { background: var(--navy); color: var(--white); padding: 18px 0 64px; }
.draw-hero .logo { width: 128px; margin-bottom: 26px; }
.draw-hero h1 { font-size: clamp(1.75rem, 6.4vw, 2.3rem); letter-spacing: -.01em; margin-bottom: .45rem; }
.draw-hero h1 .y { color: var(--yellow); }
.draw-hero p { color: var(--mist); margin: 0; font-size: 1rem; }
.draw-hero .wrap, .draw-main { max-width: 680px; }

/* The prize: a voucher-style card. Warm glow behind it, yellow edge, ticket-stub tear line. */
.draw-hero { background: radial-gradient(ellipse 70% 55% at 50% 88%, rgba(245, 205, 0, .17), transparent 70%), var(--navy); }
.prize {
  margin-top: 24px; background: var(--white); color: var(--navy); border-radius: 18px; overflow: hidden;
  border-top: 6px solid var(--yellow); display: grid;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .25), 0 20px 50px rgba(245, 205, 0, .16);
}
.prize .prize-main { padding: 18px 22px 18px; background: linear-gradient(165deg, var(--white) 55%, #FFFBE6 100%); }
.prize .prize-eyebrow { margin: 0; font-size: .78rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--slate); }
.prize .prize-amount { margin: 2px 0 0; font-size: clamp(3.6rem, 18vw, 5rem); font-weight: 700; line-height: 1; letter-spacing: -.035em; color: var(--navy); }
.prize .prize-what { margin: 6px 0 14px; font-size: 1.2rem; font-weight: 500; color: var(--ink); }
.prize .prize-logo { display: block; width: 150px; height: auto; }
.prize .prize-stub {
  position: relative; display: flex; align-items: center; gap: 10px; padding: 14px 22px;
  background: var(--yellow-100); color: var(--navy); font-size: .97rem; font-weight: 500; line-height: 1.35;
  border-top: 2px dashed rgba(0, 20, 40, .2);
}
.prize .prize-stub .icon { flex: none; width: 24px; height: 24px; color: var(--green-900); }
.prize .prize-stub::before, .prize .prize-stub::after {      /* the punched notches */
  content: ""; position: absolute; top: -12px; width: 22px; height: 22px; border-radius: 50%; background: var(--navy);
}
.prize .prize-stub::before { left: -11px; }
.prize .prize-stub::after { right: -11px; }
@media (min-width: 560px) {
  .prize { grid-template-columns: 1fr 190px; }
  .prize .prize-main { padding: 22px 28px; }
  .prize .prize-stub { flex-direction: column; justify-content: center; text-align: center; padding: 18px 20px; border-top: 0; border-left: 2px dashed rgba(0, 20, 40, .2); }
  .prize .prize-stub::before, .prize .prize-stub::after { left: -12px; right: auto; }
  .prize .prize-stub::before { top: -12px; }
  .prize .prize-stub::after { top: auto; bottom: -12px; }
  .prize .prize-logo { width: 170px; }
}

.draw-main { margin: 0 auto; padding: 0 var(--gutter) 40px; }
.form-card {
  background: var(--white); border-radius: 16px; margin-top: -40px; position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 20, 40, .06), 0 12px 32px rgba(0, 20, 40, .08);
}
.thanks { padding: 28px 20px; }

/* Sections: alternating bands, like the SJC form, in iAhub colours */
.sec { padding: 22px 20px 4px; }
.sec + .sec { border-top: 1px solid var(--cloud); }
.sec.alt { background: var(--frost); }
.sec-last { padding-bottom: 24px; }
@media (min-width: 480px) { .sec { padding: 26px 32px 6px; } .sec-last { padding-bottom: 28px; } .thanks { padding: 32px; } }
.sec-title {
  display: flex; align-items: center; gap: 8px; margin: 0 0 16px;
  font-size: .75rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--signal);
}
.sec-title .tick {
  width: 16px; height: 16px; border-radius: 50%; background: var(--green-900); opacity: 0; transform: scale(.6);
  transition: opacity .2s ease, transform .2s ease;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM369 209L241 337c-9.4 9.4-24.6 9.4-33.9 0l-64-64c-9.4-9.4-9.4-24.6 0-33.9s24.6-9.4 33.9 0l47 47L335 175c9.4-9.4 24.6-9.4 33.9 0s9.4 24.6 0 33.9z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.sec.done .sec-title .tick { opacity: 1; transform: none; }

.q { margin: 0 0 20px; border: 0; padding: 0; min-width: 0; }
.q > label:not(.check), .q > legend { display: block; padding: 0; margin: 0 0 6px; font-size: .95rem; font-weight: 500; color: var(--navy); }
.q .hint { font-size: .875rem; color: var(--navy-300); margin: -2px 0 8px; line-height: 1.45; }
.pair { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.pair label { display: block; font-size: .95rem; font-weight: 500; color: var(--navy); margin: 0 0 6px; }

.input, .select {
  display: block; width: 100%; height: 48px; padding: 0 14px;
  font: inherit; font-size: 16px; color: var(--ink);
  background: var(--white); border: 1px solid var(--slate); border-radius: 10px;
  transition: border-color .15s ease, box-shadow .15s ease;
  -webkit-appearance: none; appearance: none;
}
.input::placeholder { color: #7D8B98; }
.input:hover, .select:hover { border-color: var(--navy); }
.input:focus, .select:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px var(--cyan-100); }
.select {
  cursor: pointer; padding-right: 30px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23001428' d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 11px center; background-size: 11px;
}
.phone { display: grid; grid-template-columns: 104px 1fr; gap: 8px; }

/* School search */
.combo { position: relative; }
.combo-list {
  position: absolute; z-index: 5; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px;
  list-style: none; background: var(--white); border: 1px solid var(--cloud); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 20, 40, .14); max-height: 264px; overflow-y: auto;
}
.combo-list li { padding: 11px 12px; border-radius: 8px; cursor: pointer; font-size: .97rem; color: var(--ink); }
.combo-list li:hover, .combo-list li[aria-selected="true"] { background: var(--frost); color: var(--navy); }
.combo-list mark { background: none; color: inherit; font-weight: 700; }
.combo-list li.other-opt { border-top: 1px solid var(--cloud); border-radius: 0 0 8px 8px; margin-top: 4px; color: var(--slate, #5b6b7a); font-style: italic; }
.combo-list li.other-opt:first-child { border-top: 0; margin-top: 0; }

.other { margin-top: 14px; }
.other label { display: block; font-size: .95rem; font-weight: 500; color: var(--navy); margin: 0 0 6px; }

/* Multi-select as chips: real checkboxes, styled labels */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip { position: relative; }
.chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.chip span {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px; padding: 10px 15px;
  border: 1px solid var(--slate); border-radius: 999px; background: var(--white);
  font-size: .94rem; line-height: 1.3; color: var(--navy); cursor: pointer; user-select: none;
  transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}
.chip span::before {
  content: ""; width: 14px; height: 14px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--slate); transition: all .15s ease;
}
.chip:hover span { border-color: var(--navy); }
.chip input:checked + span { background: var(--navy); border-color: var(--navy); color: var(--white); }
.chip input:checked + span::before {
  border-color: var(--yellow); background: var(--yellow)
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23001428' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E")
    center / 9px no-repeat;
}
.chip input:focus-visible + span { box-shadow: 0 0 0 3px var(--cyan-100); border-color: var(--navy); }

/* Consent: quiet, readable, a proper checkbox */
.check { display: flex; gap: 12px; align-items: flex-start; margin: 0 0 14px; font-size: .92rem; line-height: 1.5; color: var(--ink); cursor: pointer; }
.check input {
  -webkit-appearance: none; appearance: none; flex: none; width: 22px; height: 22px; margin: 0;
  border: 1.5px solid var(--slate); border-radius: 6px; background: var(--white); cursor: pointer;
  transition: all .15s ease;
}
.check input:checked {
  background: var(--navy) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23ffffff' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") center / 12px no-repeat;
  border-color: var(--navy);
}
.check input:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--cyan-100); }
.check .opt { color: var(--navy-300); }
.privacy { font-size: .8rem; color: var(--navy-300); line-height: 1.55; margin: 6px 0 16px; }
.privacy a, .check a { color: var(--signal); }

details.rules { margin: 0 0 22px; font-size: .85rem; color: var(--navy-300); }
details.rules summary { cursor: pointer; color: var(--signal); font-weight: 500; display: inline-flex; align-items: center; min-height: 32px; }
details.rules ol { padding-left: 1.1rem; margin: 6px 0 0; line-height: 1.55; }

/* Errors: next to the field, checked when you leave it */
.err { display: none; align-items: flex-start; gap: 6px; color: var(--error-900); font-size: .86rem; font-weight: 500; margin: 7px 0 0; line-height: 1.4; }
.err::before {
  content: ""; flex: none; width: 15px; height: 15px; margin-top: 1px;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%238C3D35' d='M256 512A256 256 0 1 0 256 0a256 256 0 1 0 0 512zm0-384c13.3 0 24 10.7 24 24V264c0 13.3-10.7 24-24 24s-24-10.7-24-24V152c0-13.3 10.7-24 24-24zM224 352a32 32 0 1 1 64 0 32 32 0 1 1 -64 0z'/%3E%3C/svg%3E") center / contain no-repeat;
}
.has-error .err { display: flex; }
.has-error .input, .has-error .check input { border-color: var(--error-900); }
.has-error .input { background-color: #FFF6F5; }
.has-error .input:focus { box-shadow: 0 0 0 3px var(--error-100); }

/* Valid: a green edge and a tick inside the field, once you've moved on */
.is-valid .input { border-color: var(--green-900); padding-right: 40px;
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath fill='%23008B08' d='M438.6 105.4c12.5 12.5 12.5 32.8 0 45.3l-256 256c-12.5 12.5-32.8 12.5-45.3 0l-128-128c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0L160 338.7 393.4 105.4c12.5-12.5 32.8-12.5 45.3 0z'/%3E%3C/svg%3E") right 14px center / 14px no-repeat; }
.is-valid .input:focus { border-color: var(--navy); }
.is-valid .phone .input { padding-right: 40px; }
.form-error { display: none; color: var(--error-900); background: var(--error-100); border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; font-size: .92rem; font-weight: 500; }
.form-error.show { display: block; }

.submit {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; height: 52px;
  border: 0; border-radius: 12px; background: var(--navy); color: var(--white);
  font: inherit; font-size: 1.02rem; font-weight: 700; cursor: pointer; transition: background-color .15s ease;
}
.submit:hover { background: #17405F; }
.submit:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--cyan); }
.submit:disabled { opacity: .7; cursor: progress; }
.submit .icon { color: var(--yellow); }
.reassure { text-align: center; font-size: .8rem; color: var(--navy-300); margin: 12px 0 0; }

.thanks h2 { color: var(--navy); font-size: 1.6rem; display: flex; gap: .5rem; align-items: center; }
.thanks h2 .icon { color: var(--green); }
.todo { background: var(--yellow-100); color: var(--ink); padding: 0 .2em; border-radius: 3px; }
.hp { position: absolute; left: -5000px; width: 1px; height: 1px; overflow: hidden; }

/* Reduce motion: no animation, no jitter */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .rain { display: none; }
  .btn:hover { transform: none; }
}