:root{--navy:#0f1722;--teal:#0d4552;--blue:#41788b;--aqua:#8cbbba;--coral:#ec7162;--cream:#faf7f1;--paper:#fffdfa;--green:#e4ebcf;--muted:#5a686b;--line:#d8e4e2;--shadow:0 24px 70px rgba(15,23,34,.12)}
*{box-sizing:border-box}html{background:var(--teal);color:var(--navy);font-family:"DM Sans",sans-serif}body{margin:0;background:linear-gradient(180deg,var(--teal) 0 310px,var(--cream) 310px 100%);min-height:100vh}.app-header{height:96px;display:flex;align-items:center;justify-content:space-between;padding:0 clamp(22px,5vw,70px);color:white}.brand{display:flex;align-items:center;color:white;text-decoration:none}.brand img{width:76px;height:76px;object-fit:cover;border-radius:50%;border:2px solid rgba(255,255,255,.75);box-shadow:0 8px 24px rgba(0,0,0,.18)}.draft-button{border:1px solid rgba(255,255,255,.55);background:rgba(255,255,255,.06);color:white;border-radius:999px;padding:11px 18px;font-weight:700;cursor:pointer}.progress-shell{position:sticky;top:0;z-index:10;background:rgba(13,69,82,.96);padding:10px clamp(22px,5vw,70px) 16px;color:white;backdrop-filter:blur(12px)}.progress-copy{display:flex;justify-content:space-between;font-size:.78rem;margin-bottom:8px}.progress-track{height:8px;background:rgba(255,255,255,.18);border-radius:10px;overflow:hidden}.progress-track span{display:block;height:100%;width:0;background:var(--coral);border-radius:inherit;transition:width .35s ease}.demo-banner{background:var(--green);color:var(--teal);padding:12px 24px;text-align:center}.app-main{width:min(980px,calc(100% - 32px));margin:30px auto 70px;background:var(--paper);border-radius:28px;box-shadow:0 20px 55px rgba(15,23,34,.1);overflow:hidden;border:1px solid rgba(255,255,255,.7)}form{min-height:590px}.step{display:none;padding:clamp(32px,5vw,62px)}.step.active{display:block;animation:step-in .25s ease}@keyframes step-in{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}}.eyebrow{text-transform:uppercase;letter-spacing:.16em;font-weight:800;font-size:.72rem;color:var(--blue);margin:0 0 10px}h1,h2,h3{font-family:"DM Serif Display",serif;font-weight:400}h1,h2{font-size:clamp(2.25rem,4.5vw,4.05rem);line-height:1.03;margin:0 0 16px;max-width:820px}h3{font-size:1.8rem;margin:0}.lead{font-size:1rem;line-height:1.65;color:var(--muted);max-width:760px}.choice-grid{border:0;padding:0;margin:27px 0 0;display:grid;grid-template-columns:1fr 1fr;gap:12px}.choice-grid legend{font-weight:700;margin-bottom:13px}.choice-card{--accent:var(--aqua);position:relative;display:grid;grid-template-columns:46px 1fr;align-items:stretch;padding:0;border:1px solid #dddeda;border-left:5px solid var(--accent);border-radius:15px;cursor:pointer;background:#fbf8f2;overflow:hidden;transition:.18s ease}.choice-card:nth-of-type(2){--accent:#f1bf98}.choice-card:nth-of-type(3){--accent:#a9c9c6}.choice-card:nth-of-type(4){--accent:#41788b}.choice-card:nth-of-type(5){--accent:var(--coral)}.choice-card:hover{border-color:var(--accent);transform:translateY(-1px);box-shadow:0 8px 18px rgba(15,67,81,.08)}.choice-card:has(input:checked){border-color:var(--accent);background:#fffdfa;box-shadow:0 0 0 2px color-mix(in srgb,var(--accent) 22%,transparent)}.choice-card input{position:absolute;opacity:0}.choice-card>i{display:grid;place-items:center;color:var(--accent);font-style:normal;font-weight:800;font-size:.72rem;border-right:1px solid #e3e1db}.choice-card span{padding:16px 18px;display:flex;flex-direction:column;gap:4px}.choice-card b{font-size:.95rem;line-height:1.32}.choice-card small{color:var(--muted);line-height:1.42;font-size:.76rem}.choice-card.playful{grid-column:1/-1;background:#fff8f3}.choice-card.playful span{display:grid;grid-template-columns:auto 1fr;column-gap:10px}.choice-card.playful em{grid-column:1/-1;color:var(--coral);font-style:normal;text-transform:uppercase;letter-spacing:.13em;font-size:.62rem;font-weight:800}.choice-card.playful small{grid-column:1/-1}.contact-panel{margin-top:22px;background:#eef6f5;border-left:5px solid var(--aqua);padding:20px;border-radius:12px}.contact-panel p{color:var(--muted)}.contact-panel a{color:var(--teal);font-weight:800}.reading-card{background:#f0f6f5;border-radius:24px;padding:clamp(22px,4vw,42px);line-height:1.75}.reading-card p:first-child{margin-top:0}.reading-card p:last-child{margin-bottom:0}.reading-card.highlight{background:var(--green);font-size:1.12rem}.acknowledge{display:flex;gap:14px;align-items:flex-start;margin-top:22px;padding:20px;border:2px solid var(--line);border-radius:16px;font-weight:700;cursor:pointer}.acknowledge:has(input:checked){border-color:var(--coral);background:#fff4f1}.acknowledge input{width:22px;height:22px;accent-color:var(--coral);flex:0 0 auto}.field-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:34px}.field-grid .wide{grid-column:1/-1}label>span{display:block;font-weight:700;font-size:.82rem;margin-bottom:8px}input,textarea{width:100%;border:2px solid var(--line);border-radius:13px;background:white;padding:14px 15px;font:inherit;color:var(--navy);outline:none}input:focus,textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(65,120,139,.12)}label>small{display:block;color:var(--muted);line-height:1.45;margin-top:7px}.section-title-row{display:flex;justify-content:space-between;gap:24px;align-items:flex-start}.secondary{border:2px solid var(--teal);background:white;color:var(--teal);border-radius:999px;padding:12px 18px;font-weight:800;cursor:pointer}.student-card{margin:22px 0;padding:26px;border:2px solid var(--line);border-left:7px solid var(--coral);border-radius:22px;background:#fff}.student-heading{display:flex;justify-content:space-between;align-items:center}.student-heading>div{display:flex;align-items:center;gap:12px}.student-number{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--teal);color:white;font-weight:800}.remove-student{border:0;background:none;color:#a13f36;text-decoration:underline;cursor:pointer}.form-actions{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:18px;padding:18px clamp(26px,5vw,58px);border-top:1px solid var(--line);background:#f5f1e9}.primary{justify-self:end;border:0;background:var(--coral);color:white;border-radius:999px;padding:13px 23px;font-weight:800;cursor:pointer}.primary:disabled{opacity:.45;cursor:not-allowed}.text-button{justify-self:start;border:0;background:var(--teal);color:white;border-radius:999px;padding:13px 21px;font-weight:800;cursor:pointer}.text-button:disabled{opacity:.32;cursor:not-allowed}.autosave{font-size:.72rem;color:var(--muted);text-align:center}.summary{display:grid;gap:15px}.summary article{padding:20px;background:#eef6f5;border-radius:16px}.summary h3{font-size:1.35rem;margin-bottom:5px}.summary p{margin:3px 0;color:var(--muted)}.demo-finish{background:var(--green);padding:26px;border-radius:20px;font-size:1.15rem}.prototype-note{margin-top:24px;color:var(--muted);font-size:.78rem}dialog{border:0;border-radius:24px;max-width:520px;padding:38px;box-shadow:var(--shadow)}dialog::backdrop{background:rgba(15,23,34,.65)}.dialog-close{position:absolute;right:18px;top:14px;border:0;background:none;font-size:1.8rem;cursor:pointer}
@media(max-width:720px){body{background:linear-gradient(180deg,var(--teal) 0 230px,var(--cream) 230px)}.app-header{height:82px}.brand img{width:64px;height:64px}.draft-button{font-size:.72rem;padding:9px 12px}.app-main{width:calc(100% - 16px);margin:18px auto 40px;border-radius:22px}.step{padding:34px 22px}.choice-grid,.field-grid{grid-template-columns:1fr}.choice-card.playful{grid-column:auto}.field-grid .wide{grid-column:auto}.section-title-row{flex-direction:column}.form-actions{grid-template-columns:1fr 1fr;padding:16px 18px}.autosave{display:none}h1,h2{font-size:2.55rem}.choice-card{grid-template-columns:46px 1fr;border-radius:20px}.choice-card span{padding:18px 16px}.student-card{padding:20px 16px}.student-heading h3{font-size:1.45rem}}

.conditional-panel{margin-top:24px;padding:24px;border-radius:18px;background:#eef6f5;border-left:5px solid var(--aqua)}
.conditional-panel .field-grid{margin-top:12px}
.fact-stack{display:grid;gap:14px;margin-top:28px}
.fact-card{display:grid;grid-template-columns:25px 1fr;gap:14px;align-items:start;padding:20px 22px;border:1px solid #dddeda;border-left:5px solid var(--aqua);border-radius:15px;background:#fbf8f2;cursor:pointer}
.fact-card:nth-child(2){border-left-color:#f1bf98}.fact-card:nth-child(3){border-left-color:var(--coral)}
.fact-card:has(input:checked){background:#fffdfa;border-color:var(--teal);box-shadow:0 0 0 2px rgba(13,69,82,.08)}
.fact-card input{width:22px;height:22px;accent-color:var(--teal);margin-top:2px}
.fact-card span{display:flex;flex-direction:column;gap:6px}.fact-card small{color:var(--muted);font-size:.82rem;line-height:1.55}
.permission-box,.student-permission{border:1px solid var(--line);border-left:5px solid var(--coral);border-radius:15px;padding:20px 22px;margin-top:24px;background:#fbf8f2}
.permission-box legend,.student-permission legend{font-weight:800;padding:0 7px}
.permission-box label,.student-permission label{display:flex;align-items:center;gap:10px;margin-top:12px;cursor:pointer}
.permission-box input,.student-permission input{width:20px;height:20px;accent-color:var(--teal)}
.permission-box label>span,.student-permission label>span{margin:0}
.permission-list{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:25px}.student-permission{margin:0}
.signature-wrap{margin-top:24px;border:1px solid var(--line);border-radius:18px;background:#fbf8f2;padding:18px}
.signature-label{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.signature-label button{border:0;background:none;color:#a13f36;text-decoration:underline;cursor:pointer}
#signatureCanvas,#accountSignatureCanvas{display:block;width:100%;height:210px;background:white;border:2px dashed #9fb6b5;border-radius:12px;touch-action:none}
.compact-signature{margin-top:18px;padding:15px}.compact-signature #accountSignatureCanvas{height:145px}
.signature-wrap p{color:var(--muted);font-size:.74rem;margin:8px 0 0}
@media(max-width:720px){.permission-list{grid-template-columns:1fr}.fact-card{padding:17px 15px}.conditional-panel{padding:19px 16px}#signatureCanvas{height:180px}.compact-signature #accountSignatureCanvas{height:135px}}

/* Choice clarity and compact role cards */
.choice-card::after{content:"";position:absolute;top:12px;right:12px;width:21px;height:21px;border:2px solid #a9b8b8;border-radius:50%;background:#fffdfa;transition:.18s ease}
.choice-card:has(input:checked){border-width:2px;border-left-width:7px;background:#f2f7f6;transform:translateY(-1px)}
.choice-card:has(input:checked)::after{content:"✓";display:grid;place-items:center;border-color:var(--teal);background:var(--teal);color:white;font-size:.75rem;font-weight:900}
.choice-card:has(input:checked) b{color:var(--teal)}
.choice-grid.compact{grid-template-columns:repeat(3,minmax(0,1fr))}
.choice-grid.compact .choice-card{display:block;min-height:132px;border-left-width:6px}
.choice-grid.compact .choice-card span{padding:20px 48px 20px 20px}
.choice-grid.compact .choice-card b{font:400 1.35rem/1.1 "DM Serif Display",serif}
.choice-grid.compact .choice-card small{margin-top:5px}
@media(max-width:820px){.choice-grid.compact{grid-template-columns:1fr}.choice-grid.compact .choice-card{min-height:0}}

.invalid-field{border-color:#c84f43!important;background:#fff7f5!important;box-shadow:0 0 0 3px rgba(200,79,67,.1)!important}
.field-warning{display:block!important;color:#a13f36!important;font-size:.75rem!important;font-weight:700;line-height:1.4;margin-top:7px}
.emergency-choice{margin-bottom:22px}.contact-preview{display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:22px;padding:20px 22px;border-radius:15px;border-left:5px solid var(--aqua);background:#eef6f5}.contact-preview b{width:100%;font-family:"DM Serif Display",serif;font-size:1.25rem}.contact-preview span{color:var(--muted)}

/* Acknowledgement screens use blue-teal, leaving coral for forward actions. */
.reading-card.highlight{background:#dcebea;border-left:6px solid var(--blue);border-radius:18px}
.acknowledge:has(input:checked){border-color:var(--teal);background:#eef6f5}
.acknowledge input{accent-color:var(--teal)}
.step[data-step="payment"] .choice-grid.compact{grid-template-columns:repeat(2,minmax(0,1fr))}
@media(max-width:720px){.step[data-step="payment"] .choice-grid.compact{grid-template-columns:1fr}}
.service-comms-card{margin-top:24px;padding:24px 26px;border:1px solid var(--line);border-left:6px solid var(--coral);border-radius:16px;background:#fbf8f2}
.service-comms-card h3{font-size:1.55rem;color:var(--teal);margin:0 0 10px}.service-comms-card p:not(.eyebrow){color:var(--muted);line-height:1.65}.service-comms-card a{color:var(--teal);font-weight:800}
.image-policy-note{background:#eef6f5;border-left:6px solid var(--blue);border-radius:18px}
.student-permission legend{max-width:calc(100% - 40px);margin:0 auto;text-align:center}

/* A selected route should be unmistakable without making every card loud. */
.choice-card:has(input:checked){background:color-mix(in srgb,var(--accent) 26%,#fffdfa);border-color:var(--accent);box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 24%,transparent),0 8px 18px rgba(15,67,81,.1)}
.choice-card:has(input:checked)>i{background:var(--accent);color:white;border-right-color:transparent}
.choice-card:has(input:checked)::after{border-color:var(--teal);background:var(--teal);color:white;transform:scale(1.08)}
.choice-card::after,.choice-card:has(input:checked)::after{display:none}
.step-notice{display:grid;grid-template-columns:auto 1fr;gap:2px 16px;align-items:center;margin-top:24px;padding:17px 20px;border:1px solid #f1bf98;border-left:6px solid var(--coral);border-radius:15px;background:#fff8f3;color:var(--teal)}
.step-notice::before{content:"!";grid-row:1/3;display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--coral);color:white;font-weight:900}
.step-notice b{font:400 1.25rem "DM Serif Display",serif}.step-notice span{font-size:.78rem;color:var(--muted);line-height:1.4}
.student-card.self-student{border-left-color:var(--aqua);background:#f8fbfa}
.student-card.self-student .school-field{display:none}
.student-card input[readonly]{background:#edf3f2;color:#41585d;border-style:dashed}
.fact-card[hidden]{display:none!important}
[hidden]{display:none!important}
.minor-departure{margin-top:22px;padding:20px 22px;border:1px solid #cfe0de;border-left:5px solid var(--aqua);border-radius:16px;background:#f4f8f7}
.minor-departure legend{font-weight:800;padding:0 5px}.minor-departure p{color:var(--muted);font-size:.82rem;margin:5px 0 15px}
.minor-departure label{display:flex;align-items:center;gap:10px;margin:10px 0;font-weight:700}.minor-departure input{width:20px;height:20px;accent-color:var(--teal)}
.renewal-choice{max-width:430px}.how-found-grid{margin-top:30px}#howFoundOther{display:block;margin-top:18px}
.step[data-step="background"] .choice-grid.compact{grid-template-columns:repeat(2,minmax(0,300px));justify-content:start;gap:10px 14px}
.step[data-step="background"] .choice-grid.compact .choice-card{min-height:82px}
.step[data-step="background"] .choice-grid.compact .choice-card span{padding:14px 18px}
.step[data-step="background"] .choice-grid.compact .choice-card b{font-size:1.18rem}
.step[data-step="background"] .choice-grid.compact.how-found-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:9px 12px}
.step[data-step="background"] .choice-grid.compact.how-found-grid .choice-card{min-height:58px}
.step[data-step="background"] .choice-grid.compact.how-found-grid .choice-card span{padding:10px 14px}
.step[data-step="background"] .choice-grid.compact.how-found-grid .choice-card b{font-size:1.05rem}
.background-details{align-items:end}
.background-details label{display:grid;grid-template-rows:minmax(40px,auto) auto;align-self:stretch}
.background-details label>span{align-self:end}
.confirmation-help{max-width:820px;margin:12px 0 24px;padding:14px 18px;border-left:5px solid var(--aqua);border-radius:0 13px 13px 0;background:#eef6f5;color:var(--muted);font-size:.9rem;line-height:1.55}
.confirmation-help strong{color:var(--teal)}

/* Required markers follow the live validation rules, including conditional fields. */
label:has(>input[required]:not([type="radio"]):not([type="checkbox"]))>span:first-child::after,
label:has(>textarea[required])>span:first-child::after,
label:has(>select[required])>span:first-child::after,
fieldset:has(input[required])>legend::after{content:" *";color:var(--coral);font-family:"DM Sans",sans-serif;font-weight:900}

/* Keep Safari's native date picker without its mobile control stretching vertically. */
input[type="date"]{display:block;height:52px;min-height:52px;max-height:52px;line-height:normal}
input[type="date"]::-webkit-date-and-time-value{min-height:1.2em;text-align:left}
@media(max-width:720px){.step[data-step="background"] .choice-grid.compact,.step[data-step="background"] .choice-grid.compact.how-found-grid{grid-template-columns:1fr}.step[data-step="background"] .choice-grid.compact .choice-card{min-height:0}.background-details label{grid-template-rows:auto auto}}
.sepa-consent{display:grid;grid-template-columns:25px 1fr;gap:14px;align-items:start;margin-top:22px;padding:18px 20px;border:1px solid #9fc7c8;border-radius:15px;background:#fffdfa;cursor:pointer}
.sepa-consent:has(input:checked){border-color:var(--teal);box-shadow:0 0 0 2px rgba(13,69,82,.1)}
.sepa-consent input{width:22px;height:22px;margin-top:2px;accent-color:var(--teal)}
.sepa-consent span{display:flex;flex-direction:column;gap:5px}.sepa-consent small{color:var(--muted);line-height:1.5}
.step[data-step="preview"]{padding-top:38px;padding-bottom:38px}
.step[data-step="preview"] h2{font-size:clamp(2.2rem,4vw,3.35rem);margin-bottom:20px}
.step[data-step="preview"] .summary{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.step[data-step="preview"] .summary article{padding:16px 18px;border:1px solid #d8e5e3;border-left:5px solid var(--aqua);background:#f7faf9;border-radius:14px}
.step[data-step="preview"] .summary article:nth-child(even){border-left-color:#f1bf98}
.step[data-step="preview"] .summary h3{font-size:1.15rem;margin-bottom:4px}
.step[data-step="preview"] .summary p{font-size:.88rem;line-height:1.4}
.step[data-step="preview"] .demo-finish{display:flex;align-items:center;gap:12px;margin-top:14px;padding:14px 18px;border-radius:14px;background:#eef4df;font-size:.9rem;border-left:5px solid #b7c98b}
.step[data-step="preview"] .demo-finish[hidden]{display:none}
.step[data-step="preview"] .demo-finish p{margin:0;color:var(--muted)}
@media(max-width:720px){.step[data-step="preview"] .summary{grid-template-columns:1fr}.step[data-step="preview"] .demo-finish{align-items:flex-start;flex-direction:column;gap:3px}}
.draft-save{justify-self:start;margin:8px 0 18px}.draft-result{padding:17px 20px;border-left:6px solid var(--aqua);border-radius:14px;background:#eef6f5}.draft-result span,.draft-result small{display:block;color:var(--muted);font-size:.75rem}.draft-result strong{display:block;margin:7px 0;font:400 1.75rem "DM Serif Display",serif;letter-spacing:.08em;color:var(--teal)}.draft-divider{display:flex;align-items:center;gap:12px;margin:24px 0 18px;color:var(--muted);font-size:.75rem}.draft-divider::before,.draft-divider::after{content:"";height:1px;flex:1;background:var(--line)}.draft-message{min-height:20px;margin:9px 0;color:var(--teal);font-size:.78rem;font-weight:700}.draft-message.error{color:#a13f36}.draft-dialog-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:12px}.draft-dialog-actions .text-button,.draft-dialog-actions .secondary{justify-self:auto}
.submission-success{margin-top:16px;padding:19px 22px;border:1px solid #cfe0de;border-left:6px solid var(--aqua);border-radius:15px;background:#f3f8f7}.submission-success h3{color:var(--teal);font-size:1.65rem}.submission-success p{margin:6px 0}.submission-success small{color:var(--muted)}