:root {
  --navy: #002451;
  --ink: #173c56;
  --blue: #087fb7;
  --blue-dark: #00618c;
  --green: #3b8216;
  --cream: #fffdf6;
  --paper: #fffef9;
  --sky: #e4f3f8;
  --yellow: #fff3ad;
  --coral: #f28b72;
  --muted: #607985;
  --line: #cbdce3;
  --soft-line: #e4ecef;
  --red: #a73626;
  --shadow: 10px 12px 0 rgba(0, 36, 81, .11);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  min-width: 300px;
  margin: 0;
  color: var(--ink);
  background-color: var(--cream);
  background-image: radial-gradient(circle at 10% 10%, rgba(8, 127, 183, .06), transparent 25%), radial-gradient(circle at 92% 35%, rgba(59, 130, 22, .055), transparent 22%);
  font-family: "DM Sans", sans-serif;
  line-height: 1.5;
}

button, input, select { font: inherit; }
a { color: inherit; }

.skip-link {
  position: fixed;
  top: -80px;
  left: 18px;
  z-index: 20;
  padding: 10px 14px;
  color: #fff;
  background: var(--navy);
}

.skip-link:focus { top: 12px; }

.site-header {
  width: min(1180px, calc(100% - 40px));
  min-height: 82px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  border-bottom: 1px solid rgba(0, 36, 81, .14);
}

.word-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 8px;
  color: var(--navy);
  text-decoration: none;
}

.word-brand strong {
  font-family: "Archivo Black", sans-serif;
  font-size: 1.65rem;
  letter-spacing: -.055em;
}

.word-brand small { font-size: .72rem; font-weight: 700; }

.help-link {
  color: var(--blue-dark);
  font-size: .78rem;
  font-weight: 700;
  text-decoration: none;
}

.help-link span { color: var(--green); font-size: 1rem; }

.checkout-shell {
  width: min(1180px, calc(100% - 40px));
  margin: 0 auto;
  padding: 54px 0 74px;
}

.checkout-intro {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 430px);
  gap: 40px;
  align-items: end;
  margin-bottom: 35px;
}

.eyebrow {
  display: block;
  margin: 0 0 8px;
  color: var(--green);
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
}

h1, h2, h3, p { margin-top: 0; }

h1 {
  margin: 0;
  color: var(--navy);
  font-family: "Newsreader", serif;
  font-size: clamp(3.4rem, 7.5vw, 6.3rem);
  font-weight: 600;
  letter-spacing: -.055em;
  line-height: .82;
}

.checkout-intro > p {
  margin: 0 0 3px;
  color: var(--muted);
  font-size: 1rem;
}

.stepper {
  margin: 0 0 28px;
  display: grid;
  grid-template-columns: 1fr 42px 1fr 42px 1fr;
  align-items: center;
}

.stepper > i { height: 2px; background: var(--line); }

.step {
  min-height: 65px;
  padding: 10px 13px;
  display: grid;
  grid-template-columns: 32px 1fr;
  grid-template-rows: auto auto;
  column-gap: 9px;
  color: var(--muted);
  background: transparent;
  border: 0;
  text-align: left;
}

.step:not(:disabled) { cursor: pointer; }

.step > span {
  grid-row: 1 / 3;
  align-self: center;
  font-family: "Caveat", cursive;
  font-size: 1.45rem;
  font-weight: 700;
}

.step b { color: inherit; font-size: .76rem; }
.step small { font-size: .65rem; }

.step.is-current {
  color: var(--navy);
  background: var(--yellow);
  box-shadow: 5px 5px 0 rgba(0, 36, 81, .12);
  transform: rotate(-.35deg);
}

.step.is-complete { color: var(--green); }

.checkout-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.48fr) minmax(300px, .72fr);
  gap: 34px;
  align-items: start;
}

.paper-form {
  position: relative;
  min-width: 0;
  padding: clamp(26px, 5vw, 52px);
  overflow: hidden;
  background-color: var(--paper);
  background-image: linear-gradient(90deg, transparent 41px, rgba(230, 144, 144, .48) 42px, rgba(230, 144, 144, .48) 43px, transparent 44px), repeating-linear-gradient(0deg, transparent 0 34px, rgba(184, 215, 227, .48) 35px);
  border: 2px solid var(--navy);
  box-shadow: var(--shadow);
}

.paper-form::before {
  position: absolute;
  top: 22px;
  right: 28px;
  width: 84px;
  height: 22px;
  background: rgba(242, 139, 114, .26);
  content: "";
  transform: rotate(4deg);
}

.form-page { animation: page-in .35s ease both; }
.form-page[hidden] { display: none; }

@keyframes page-in {
  from { opacity: 0; transform: translateX(12px); }
  to { opacity: 1; transform: translateX(0); }
}

.page-heading {
  position: relative;
  margin-bottom: 34px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 16px;
}

.page-number {
  color: var(--blue);
  font-family: "Caveat", cursive;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1;
  transform: rotate(-7deg);
}

.page-heading h2 {
  margin: 0 0 7px;
  color: var(--navy);
  font-family: "Newsreader", serif;
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 700;
  letter-spacing: -.045em;
  line-height: .95;
}

.page-heading p:last-child { max-width: 570px; margin: 0; color: var(--muted); font-size: .85rem; }

fieldset { min-width: 0; margin: 0; padding: 0; border: 0; }

.field-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px 18px;
}

.parent-details-note {
  margin: 0 0 23px;
  padding: 13px 15px;
  color: var(--ink);
  background: rgba(228, 243, 248, .83);
  border-left: 5px solid var(--blue);
  font-size: .73rem;
  line-height: 1.45;
}

.parent-details-note b { display: block; color: var(--navy); }

.selected-programme {
  margin: -8px 0 25px;
  padding: 16px 18px;
  background: var(--yellow);
  border: 1px solid var(--navy);
  box-shadow: 5px 5px 0 rgba(0, 36, 81, .1);
}

.selected-programme > span {
  display: block;
  margin-bottom: 5px;
  color: var(--green);
  font-size: .6rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
}

.selected-programme > div { display: flex; align-items: baseline; gap: 8px 12px; flex-wrap: wrap; }
.selected-programme strong { color: var(--navy); font-family: "Newsreader", serif; font-size: 1.35rem; line-height: 1.1; }
.selected-programme b { padding: 4px 8px; color: #fff; background: var(--blue-dark); font-size: .63rem; }
.selected-programme p { margin: 7px 0 0; color: var(--muted); font-size: .63rem; }

.field { min-width: 0; display: flex; flex-direction: column; gap: 7px; }
.field-wide { grid-column: 1 / -1; }

label, .plan-fieldset legend { color: var(--navy); font-size: .74rem; font-weight: 700; }

input, select {
  width: 100%;
  min-height: 49px;
  padding: 11px 13px;
  color: var(--ink);
  background: rgba(255, 255, 255, .9);
  border: 1px solid #afc6cf;
  border-radius: 2px;
  outline: none;
}

input:focus, select:focus {
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(8, 127, 183, .13);
}

.field-hint {
  margin: -1px 0 0;
  color: var(--muted);
  font-size: .62rem;
  line-height: 1.35;
}

.field-error {
  min-height: 0;
  margin: 0;
  color: var(--red);
  font-size: .63rem;
  font-weight: 700;
  line-height: 1.35;
}

.field-error:not(:empty) { min-height: 17px; }

.field.has-error input,
.field.has-error select {
  border-color: var(--red);
  background: #fff8f5;
  box-shadow: 0 0 0 3px rgba(167, 54, 38, .09);
}

.field.has-success input,
.field.has-success select { border-color: #78a965; }

.check-row.has-error {
  margin-inline: -8px;
  padding: 8px;
  background: #fff2ed;
  outline: 1px solid #d9a196;
}

.check-error { margin: 3px 0 0 30px; }

.programme-warning {
  margin: 1px 0 0;
  padding: 8px 10px;
  color: #735100;
  background: #fff7cf;
  border-left: 3px solid #d6a900;
  font-size: .62rem;
  line-height: 1.4;
}

.agreement-box {
  margin-top: 32px;
  padding: 21px;
  background: rgba(228, 243, 248, .83);
  border: 1px solid var(--navy);
  box-shadow: 5px 5px 0 rgba(0, 36, 81, .08);
}

.agreement-box legend {
  padding: 0 8px;
  color: var(--navy);
  background: var(--paper);
  font-family: "Archivo Black", sans-serif;
  font-size: .84rem;
  letter-spacing: -.02em;
}

.check-row { display: flex; gap: 12px; align-items: flex-start; color: var(--ink); cursor: pointer; }
.check-row + .check-row { margin-top: 16px; }

.check-row input {
  flex: 0 0 auto;
  width: 20px;
  min-height: 20px;
  margin: 2px 0 0;
  accent-color: var(--green);
}

.check-row span { font-size: .71rem; line-height: 1.45; }
.check-row b { display: block; color: var(--navy); font-size: .76rem; }
.check-row a { color: var(--blue-dark); text-underline-offset: 2px; }

.form-actions {
  margin-top: 36px;
  display: flex;
  justify-content: space-between;
  gap: 14px;
}

.form-actions-end { justify-content: flex-end; }

.button {
  min-height: 50px;
  padding: 11px 17px;
  border: 2px solid var(--navy);
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}

.button-primary {
  color: #fff;
  background: var(--navy);
  box-shadow: 5px 5px 0 var(--green);
}

.button-primary:hover { transform: translate(-1px, -1px); box-shadow: 7px 7px 0 var(--green); }
.button-primary:disabled { cursor: wait; opacity: .68; transform: none; }
.button-back { color: var(--navy); background: #fff; box-shadow: 4px 4px 0 var(--line); }
.button:focus-visible, .step:focus-visible, .add-learner:focus-visible, .remove-learner:focus-visible { outline: 3px solid var(--coral); outline-offset: 3px; }

.learner-list { display: grid; gap: 28px; }

.learner-card {
  padding: 24px;
  background: rgba(255, 255, 255, .84);
  border: 1px solid var(--navy);
  box-shadow: 6px 6px 0 rgba(8, 127, 183, .14);
}

.learner-card:nth-child(even) { box-shadow: 6px 6px 0 rgba(59, 130, 22, .16); }

.learner-card-heading { margin-bottom: 21px; display: flex; justify-content: space-between; align-items: flex-start; gap: 15px; }
.learner-card-heading > div { display: flex; align-items: baseline; gap: 9px; }
.learner-index { color: var(--blue); font-family: "Caveat", cursive; font-size: 1.35rem; font-weight: 700; }
.learner-card h3 { margin: 0; color: var(--navy); font-family: "Archivo Black", sans-serif; font-size: 1rem; letter-spacing: -.025em; }

.remove-learner {
  padding: 2px;
  color: var(--red);
  background: transparent;
  border: 0;
  font-size: .67rem;
  text-decoration: underline;
  text-underline-offset: 3px;
  cursor: pointer;
}

.learner-card:only-child .remove-learner { display: none; }
.programme-field { margin-top: 2px; }

.plan-fieldset { margin-top: 22px; }
.plan-fieldset legend { margin-bottom: 10px; }
.plan-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.plan-options.is-many { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.plan-options.is-tiered { grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: start; }
.plan-tier { --plan-accent: #677b87; --plan-tint: #f0f3f5; min-width: 0; }
.plan-tier[data-tier="essentials"] { --plan-accent: #0a82bb; --plan-tint: #eaf7fc; }
.plan-tier[data-tier="standard"] { --plan-accent: #398524; --plan-tint: #eef8e9; }
.plan-tier[data-tier="mentoring"] { --plan-accent: #002451; --plan-tint: #edf3f9; }
.plan-tier > header { min-height: 67px; padding: 11px 12px; background: var(--plan-tint); border-top: 6px solid var(--plan-accent); border-radius: 10px 10px 0 0; }
.plan-tier > header b, .plan-tier > header small { display: block; }
.plan-tier > header b { color: var(--plan-accent); font-size: .7rem; text-transform: uppercase; }
.plan-tier > header small { margin-top: 3px; color: var(--muted); font-size: .57rem; line-height: 1.3; }
.plan-tier > div { display: grid; gap: 9px; margin-top: 9px; }
.plan-tier .plan-option { width: 100%; }

.plan-option {
  --plan-accent: #677b87;
  --plan-dark: #425966;
  --plan-tint: #f0f3f5;
  position: relative;
  min-height: 122px;
  padding: 14px 13px 13px;
  display: block;
  overflow: hidden;
  background: linear-gradient(180deg, var(--plan-tint), #fff 88%);
  border: 1px solid color-mix(in srgb, var(--plan-accent) 46%, #fff);
  border-top: 6px solid var(--plan-accent);
  border-radius: 10px;
  cursor: pointer;
}
.plan-option[data-tier="essentials"] { --plan-accent: #0a82bb; --plan-dark: #00658f; --plan-tint: #eaf7fc; }
.plan-option[data-tier="standard"] { --plan-accent: #398524; --plan-dark: #28651a; --plan-tint: #eef8e9; }
.plan-option[data-tier="mentoring"] { --plan-accent: #002451; --plan-dark: #00142e; --plan-tint: #edf3f9; }
.plan-option input { position: absolute; width: 1px; min-height: 1px; opacity: 0; }
.plan-option:has(input:checked) { background: var(--plan-tint); border-color: var(--plan-accent); box-shadow: 4px 5px 0 color-mix(in srgb, var(--plan-accent) 24%, transparent); }
.plan-option:has(input:checked)::after {
  position: absolute;
  top: 9px;
  right: 9px;
  width: 20px;
  height: 20px;
  display: grid;
  place-items: center;
  color: #fff;
  background: var(--plan-accent);
  border-radius: 50%;
  content: "✓";
  font-size: .66rem;
  font-weight: 900;
}
.plan-option:has(input:focus-visible) { outline: 3px solid var(--coral); outline-offset: 3px; }
.plan-option b, .plan-option span, .plan-option small { display: block; }
.plan-option b { max-width: calc(100% - 19px); margin-bottom: 8px; color: var(--plan-accent); font-size: .67rem; line-height: 1.25; text-transform: uppercase; }
.plan-option span { color: var(--navy); font-family: "Archivo Black", sans-serif; font-size: .86rem; letter-spacing: -.035em; line-height: 1.2; }
.plan-option small { margin-top: 7px; color: var(--muted); font-size: .59rem; line-height: 1.35; }

.add-learner {
  min-height: 44px;
  margin-top: 21px;
  padding: 8px 0;
  color: var(--blue-dark);
  background: transparent;
  border: 0;
  font-size: .75rem;
  font-weight: 700;
  cursor: pointer;
}

.add-learner span { display: inline-grid; width: 23px; height: 23px; margin-right: 6px; place-items: center; color: #fff; background: var(--blue); border-radius: 50%; }

.order-note {
  position: sticky;
  top: 22px;
  padding: 28px;
  background: var(--yellow);
  border: 2px solid var(--navy);
  box-shadow: 9px 10px 0 rgba(0, 36, 81, .14);
  transform: rotate(.45deg);
}

.order-note::before {
  position: absolute;
  top: -12px;
  left: calc(50% - 42px);
  width: 84px;
  height: 24px;
  background: rgba(242, 139, 114, .44);
  content: "";
  transform: rotate(-2deg);
}

.order-note-top { display: flex; justify-content: space-between; gap: 12px; color: var(--green); font-size: .63rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.order-note h2 { margin: 12px 0 18px; color: var(--navy); font-family: "Newsreader", serif; font-size: 2rem; letter-spacing: -.04em; line-height: 1; }
.empty-summary { color: var(--muted); font-size: .74rem; }
.summary-item { padding: 12px 0; border-top: 1px solid rgba(0, 36, 81, .17); }
.summary-item:first-child { border-top: 0; }
.summary-item b, .summary-item span, .summary-item small { display: block; }
.summary-item b { color: var(--navy); font-size: .76rem; }
.summary-item span { color: var(--muted); font-size: .65rem; }
.summary-item small { margin-top: 2px; color: var(--blue-dark); font-size: .58rem; line-height: 1.3; }

.summary-totals { margin: 20px 0 0; padding-top: 13px; border-top: 2px solid var(--navy); }
.summary-totals div { display: flex; align-items: baseline; justify-content: space-between; gap: 14px; }
.summary-totals div + div { margin-top: 7px; }
.summary-totals dt { color: var(--muted); font-size: .68rem; }
.summary-totals dd { margin: 0; color: var(--navy); font-family: "Archivo Black", sans-serif; font-size: 1.1rem; letter-spacing: -.04em; }
.price-caveat { margin: 16px 0; color: var(--muted); font-size: .61rem; }
.summary-help { color: var(--blue-dark); font-size: .67rem; font-weight: 700; }

.review-account { margin-bottom: 24px; padding: 18px; background: var(--sky); border-left: 5px solid var(--blue); }
.review-account span, .review-account b { display: block; }
.review-account span { color: var(--muted); font-size: .67rem; }
.review-account b { color: var(--navy); font-size: .87rem; }
.review-account small { color: var(--muted); font-size: .67rem; }
.review-learners { display: grid; gap: 11px; }
.review-learner { padding: 16px; display: grid; grid-template-columns: 1fr auto; gap: 16px; background: rgba(255, 255, 255, .86); border: 1px solid var(--line); }
.review-learner b, .review-learner span, .review-learner small, .review-learner em { display: block; }
.review-learner b { color: var(--navy); font-size: .78rem; }
.review-learner span, .review-learner small { color: var(--muted); font-size: .65rem; }
.review-learner em { margin-top: 3px; color: var(--blue-dark); font-size: .61rem; font-style: normal; }
.review-learner strong { color: var(--navy); font-family: "Archivo Black", sans-serif; font-size: .9rem; text-align: right; }
.review-totals { margin-top: 22px; padding: 17px 18px; background: var(--yellow); border: 1px solid var(--navy); }
.review-total-line { display: flex; justify-content: space-between; gap: 16px; color: var(--muted); font-size: .72rem; }
.review-total-line + .review-total-line { margin-top: 6px; }
.review-total-line b { color: var(--navy); font-family: "Archivo Black", sans-serif; font-size: 1rem; }

.next-step-note { margin-top: 22px; padding: 15px; display: flex; gap: 12px; background: #edf6e9; border: 1px solid #b9d6ac; }
.next-step-note > span { display: grid; flex: 0 0 auto; width: 25px; height: 25px; place-items: center; color: #fff; background: var(--green); border-radius: 50%; font-size: .72rem; }
.next-step-note p { margin: 0; color: var(--muted); font-size: .68rem; }
.next-step-note b { display: block; color: var(--navy); font-size: .73rem; }

.checkout-message { margin-top: 20px; padding: 14px; color: #711d13; background: #fff0eb; border: 1px solid #d48a7d; font-size: .73rem; }

.checkout-footer { width: min(1180px, calc(100% - 40px)); min-height: 76px; margin: 0 auto; padding: 11px 0; display: grid; grid-template-columns: .8fr 1.25fr 1.35fr; gap: 28px; align-items: center; color: var(--navy); border-top: 1px solid rgba(0, 36, 81, .13); }
.checkout-footer-brand { display: flex; flex-direction: column; line-height: 1; }
.checkout-footer-brand strong { font-family: "Archivo Black", sans-serif; font-size: 1.3rem; letter-spacing: -.055em; }
.checkout-footer-brand small { margin-top: 4px; color: var(--green); font-size: .42rem; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; }
.checkout-footer-offices, .checkout-footer-legal { display: grid; gap: 2px; font-size: .66rem; line-height: 1.35; }
.checkout-footer-offices { grid-template-columns: repeat(2, max-content); column-gap: 18px; }
.checkout-footer-offices strong { grid-column: 1 / -1; font-size: .56rem; letter-spacing: .08em; text-transform: uppercase; }
.checkout-footer-legal { justify-self: end; max-width: 360px; color: var(--muted); }
.checkout-footer-legal p { margin: 0; }
.checkout-footer-legal p:last-child { font-size: .59rem; }
@media (max-width: 680px) { .checkout-footer { min-height: 0; padding-block: 14px; grid-template-columns: auto 1fr; gap: 12px 22px; } .checkout-footer-offices { justify-self: end; grid-template-columns: 1fr; gap: 1px; text-align: right; } .checkout-footer-offices strong { grid-column: auto; } .checkout-footer-legal { grid-column: 1 / -1; justify-self: stretch; max-width: none; display: flex; justify-content: space-between; gap: 18px; padding-top: 9px; border-top: 1px solid var(--line); } }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

@media (max-width: 900px) {
  .checkout-layout { grid-template-columns: 1fr; }
  .order-note { position: static; transform: none; }
}

@media (max-width: 650px) {
  .site-header, .checkout-shell { width: min(100% - 28px, 1180px); }
  .site-header { min-height: 70px; }
  .help-link { font-size: 0; }
  .help-link span { font-size: 1.2rem; }
  .checkout-shell { padding: 38px 0 50px; }
  .checkout-intro { grid-template-columns: 1fr; gap: 18px; }
  h1 { font-size: clamp(3.4rem, 19vw, 5rem); }
  .checkout-intro > p { font-size: .86rem; }
  .stepper { grid-template-columns: 1fr 10px 1fr 10px 1fr; }
  .step { min-height: 58px; padding: 8px; display: block; text-align: center; }
  .step > span { display: block; font-size: 1.1rem; line-height: 1; }
  .step b { display: block; font-size: .62rem; }
  .step small { display: none; }
  .paper-form { padding: 31px 20px 26px; background-image: repeating-linear-gradient(0deg, transparent 0 34px, rgba(184, 215, 227, .42) 35px); }
  .paper-form::before { right: 17px; width: 62px; }
  .page-heading { grid-template-columns: 37px 1fr; gap: 9px; }
  .page-number { font-size: 1.75rem; }
  .page-heading h2 { font-size: 2.35rem; }
  .field-grid { grid-template-columns: 1fr; gap: 15px; }
  .field-wide { grid-column: auto; }
  .agreement-box { padding: 16px; }
  .learner-card { padding: 18px 15px; }
  .plan-options, .plan-options.is-many, .plan-options.is-tiered { grid-template-columns: 1fr; }
  .plan-option { min-height: 90px; }
  .form-actions { align-items: stretch; flex-direction: column-reverse; }
  .form-actions-end { flex-direction: column; }
  .button { width: 100%; }
  .review-learner { grid-template-columns: 1fr; }
  .review-learner strong { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .form-page { animation: none; }
}