@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=Labrada:opsz,wght@12..72,500;12..72,600;12..72,700&family=Quicksand:wght@600;700&display=swap');

:root {
  --navy:#15213b;
  --blue:#0b3fa8;
  --blue-soft:#eef3fc;
  --canvas:#f8f9fd;
  --white:#ffffff;
  --ink:#15213b;
  --muted:#5b6478;
  --line:#d9dee8;
  --pupil:#52aca2;
  --parent:#009899;
  --staff:#6467ea;
  --leadership:#5e2efc;
  --pta:#9a33cc;
  --pupil-dark:#286f68;
  --parent-dark:#006d6f;
  --staff-dark:#4548bd;
  --leadership-dark:#451fc8;
  --pta-dark:#75239c;
  --shadow:0 18px 46px rgba(21,33,59,.09);
}

html { background:var(--canvas); }
body.public-site,
body.facilitator-site {
  background:var(--canvas);
  color:var(--ink);
  font-family:Inter, Arial, sans-serif;
  font-size:16px;
  line-height:1.65;
}

body.public-site :focus-visible,
body.facilitator-site :focus-visible {
  outline:3px solid var(--staff);
  outline-offset:4px;
}

body.public-site .shell { width:min(1160px, calc(100% - 48px)); }
body.facilitator-site .shell { width:min(1080px, calc(100% - 48px)); }

body.public-site .skip,
body.facilitator-site .skip { background:var(--navy); }
.preview-banner { padding:10px 24px; background:#fff2cc; color:#5f4710; border-bottom:1px solid #d9b84c; text-align:center; font-size:.9rem; }

.brand,
.kicker,
body.facilitator-site nav p {
  color:var(--blue);
  font-family:Quicksand, Inter, sans-serif;
  font-weight:700;
  letter-spacing:.13em;
}

body.public-site h1,
body.public-site h2,
body.public-site h3,
body.facilitator-site h1,
body.facilitator-site h2,
body.facilitator-site h3 {
  color:var(--navy);
  font-family:Labrada, Georgia, serif;
}

/* Public workshop site */
body.public-site .hero {
  min-height:700px;
  padding:34px 0 76px;
  background:
    linear-gradient(90deg, transparent 0 67%, rgba(82,172,162,.16) 67% 74%, rgba(0,152,153,.16) 74% 81%, rgba(100,103,234,.15) 81% 88%, rgba(94,46,252,.14) 88% 95%, rgba(154,51,204,.14) 95%),
    var(--blue-soft);
  border-bottom:1px solid var(--line);
}

body.public-site .topline,
body.facilitator-site .topline {
  padding-bottom:22px;
  border-bottom:1px solid rgba(21,33,59,.18);
}

body.public-site .status { color:var(--muted); font-family:Quicksand, sans-serif; }
body.public-site .hero-copy { max-width:880px; padding-top:118px; }
body.public-site h1 {
  max-width:860px;
  font-size:clamp(3.8rem, 8.3vw, 7.8rem);
  font-weight:600;
  letter-spacing:-.055em;
  line-height:.88;
}
body.public-site .hero .lede { max-width:730px; color:var(--muted); }
body.public-site .button,
body.facilitator-site .return {
  border:0;
  border-radius:4px;
  background:var(--blue);
  color:white;
  font-family:Quicksand, sans-serif;
  font-weight:700;
}
body.public-site .button.secondary {
  border:1px solid var(--blue);
  background:rgba(255,255,255,.72);
  color:var(--blue);
}
body.public-site .orbit { border-radius:0; transform:rotate(12deg); }
body.public-site .orbit.one { right:-75px; top:82px; border-color:var(--pupil); opacity:.55; }
body.public-site .orbit.two { right:116px; top:178px; border-color:var(--staff); opacity:.52; }
body.public-site .orbit.three { right:294px; top:121px; border-color:var(--pta); opacity:.52; }

body.public-site main section { padding:96px 0; }
body.public-site .section-head,
body.facilitator-site .layout { align-items:start; }
body.public-site .section-head { grid-template-columns:180px minmax(0,1fr); gap:54px; }
body.public-site .section-head h2 {
  font-size:clamp(2.6rem, 5vw, 4.7rem);
  font-weight:600;
  letter-spacing:-.045em;
  line-height:.98;
}
body.public-site .section-head .summary { color:var(--muted); }

body.public-site .intro { background:var(--white); }
body.public-site .cards { grid-template-columns:repeat(6,minmax(0,1fr)); gap:14px; }
body.public-site .card {
  position:relative;
  grid-column:span 2;
  min-height:250px;
  padding:72px 26px 26px;
  border:1px solid var(--line);
  border-top:0;
  background:var(--white);
  box-shadow:none;
}
body.public-site .card:nth-child(4),
body.public-site .card:nth-child(5) { grid-column:span 3; }
body.public-site .card::before {
  content:'';
  position:absolute;
  inset:0 0 auto;
  height:44px;
  background:var(--role-color);
}
body.public-site .card:nth-child(1) { --role-color:var(--pupil); }
body.public-site .card:nth-child(2) { --role-color:var(--parent); }
body.public-site .card:nth-child(3) { --role-color:var(--staff); }
body.public-site .card:nth-child(4) { --role-color:var(--leadership); }
body.public-site .card:nth-child(5) { --role-color:var(--pta); }
body.public-site .card h3 { font-size:1.55rem; }
body.public-site .card p { color:var(--muted); }

body.public-site .process { background:var(--blue-soft); }
.registration { background:var(--white); }
.registration-layout { display:grid; grid-template-columns:.8fr 1.2fr; gap:18px; align-items:start; }
.registration-note { padding:32px; border-top:6px solid var(--parent); background:var(--blue-soft); }
.registration-note h3 { margin-top:0; font-size:1.6rem; }
.registration-form { display:grid; gap:20px; padding:32px; border:1px solid var(--line); background:white; box-shadow:var(--shadow); }
.registration-form .field { display:grid; gap:7px; }
.registration-form label,.registration-form legend { font-weight:700; }
.registration-form label span { color:var(--muted); font-weight:400; }
.registration-form input[type="text"],.registration-form input[type="email"],.registration-form input:not([type]),.registration-form textarea { width:100%; padding:12px 13px; border:1px solid #aeb6c7; border-radius:3px; background:white; color:var(--ink); font:inherit; }
.registration-form fieldset { display:flex; flex-wrap:wrap; gap:12px 22px; margin:0; padding:0; border:0; }
.registration-form legend { width:100%; margin-bottom:7px; }
.registration-form fieldset label,.registration-form .consent { font-weight:500; }
.registration-form input[type="radio"],.registration-form input[type="checkbox"] { width:1.1rem; height:1.1rem; accent-color:var(--blue); }
.registration-form .button { justify-self:start; cursor:pointer; }
.registration-form .button[disabled] { opacity:.65; cursor:wait; }
.website-field { position:absolute; left:-10000px; width:1px; height:1px; overflow:hidden; }
.form-message { min-height:1.65em; margin:0; font-weight:700; }
.form-message.success { color:var(--parent-dark); }
.form-message.error { color:#9d261f; }
body.public-site .steps { gap:14px; }
body.public-site .step {
  min-height:255px;
  padding:76px 28px 26px;
  border:1px solid var(--line);
  background:rgba(255,255,255,.86);
}
body.public-site .step::before {
  top:24px;
  color:var(--blue);
  font-family:Quicksand, sans-serif;
  font-size:.78rem;
}
body.public-site .step h3 { font-size:1.42rem; }
body.public-site .step p { color:var(--muted); }

body.public-site .contribute {
  background:var(--navy);
  color:white;
}
body.public-site .contribute h2,
body.public-site .contribute h3 { color:white; }
body.public-site .contribute .kicker { color:#aebeff; }
body.public-site .contribute .section-head .summary { color:#d9dee8; }
body.public-site .routes { gap:16px; }
body.public-site .route {
  padding:34px;
  border:1px solid rgba(255,255,255,.28);
  border-top:6px solid var(--pupil);
  background:rgba(255,255,255,.07);
}
body.public-site .route:nth-child(2) { border-top-color:var(--pta); }
body.public-site .route p { color:#d9dee8; }
body.public-site .form-link {
  border-radius:4px;
  background:#d9dee8;
  color:var(--navy);
  font-family:Quicksand, sans-serif;
}

body.public-site .code { background:var(--white); }
body.public-site .code-panel,
body.public-site .code-note {
  padding:36px;
  border:1px solid var(--line);
}
body.public-site .code-panel { border-left:7px solid var(--staff); background:var(--blue-soft); }
body.public-site .code-note { background:#f3efff; color:var(--ink); }
body.public-site .code-note h3 { color:var(--leadership-dark); }

body.public-site .reporting { background:var(--canvas); }
body.public-site .report-flow { border-color:var(--line); background:var(--line); }
body.public-site .report-flow article { background:white; }
body.public-site .report-flow article:nth-child(1) { border-top:5px solid var(--pupil); }
body.public-site .report-flow article:nth-child(2) { border-top:5px solid var(--staff); }
body.public-site .report-flow article:nth-child(3) { border-top:5px solid var(--pta); }
body.public-site .guide-callout {
  padding:32px;
  border-left:7px solid var(--blue);
  background:var(--blue-soft);
}

body.public-site footer,
body.facilitator-site footer { background:var(--navy); color:#d9dee8; }

/* Facilitator guide */
body.facilitator-site { background:var(--canvas); }
body.facilitator-site header {
  padding:30px 0 78px;
  background:
    linear-gradient(90deg, transparent 0 82%, rgba(82,172,162,.24) 82% 88%, rgba(100,103,234,.24) 88% 94%, rgba(154,51,204,.24) 94%),
    var(--navy);
}
body.facilitator-site header .brand,
body.facilitator-site header .kicker { color:#aebeff; }
body.facilitator-site .content .kicker { color:var(--blue); }
body.facilitator-site .back { color:#eef3fc; }
body.facilitator-site .header-copy { padding-top:88px; }
body.facilitator-site h1 {
  max-width:900px;
  font-size:clamp(3.3rem,7.5vw,7rem);
  font-weight:600;
  line-height:.9;
}
body.facilitator-site header h1 { color:white; }
body.facilitator-site .lede { color:#d9dee8; }
body.facilitator-site main { padding:82px 0 100px; }
body.facilitator-site .layout { grid-template-columns:220px minmax(0,1fr); gap:64px; }
body.facilitator-site nav { border-left:4px solid var(--staff); }
body.facilitator-site nav a { color:var(--blue); }
body.facilitator-site h2 {
  font-size:clamp(2.3rem,4.5vw,4rem);
  font-weight:600;
  letter-spacing:-.04em;
  line-height:1;
}
body.facilitator-site h3 { color:var(--blue); }
body.facilitator-site .panel,
body.facilitator-site .question,
body.facilitator-site .callout {
  border:1px solid var(--line);
  background:white;
  box-shadow:none;
}
body.facilitator-site .panel { border-top:6px solid var(--pupil); }
body.facilitator-site .panel:nth-child(2n) { border-top-color:var(--pta); }
body.facilitator-site .question { padding:27px 28px 27px 80px; }
body.facilitator-site .question::before {
  left:27px;
  top:27px;
  border-radius:3px;
  background:var(--blue);
  font-family:Quicksand, sans-serif;
}
body.facilitator-site .prompt { color:var(--blue); }
body.facilitator-site .callout { border-left:7px solid var(--leadership); background:#f3efff; }
body.facilitator-site .callout h3 { color:var(--leadership-dark); }

@media (max-width:760px) {
  body.public-site .shell,
  body.facilitator-site .shell { width:calc(100% - 30px); }
  body.public-site .hero { min-height:auto; background:var(--blue-soft); }
  body.public-site .hero-copy { padding-top:76px; }
  body.public-site h1 { font-size:clamp(3rem,15vw,5.2rem); }
  body.public-site main section { padding:66px 0; }
  body.public-site .section-head { grid-template-columns:1fr; gap:14px; }
  body.public-site .cards { grid-template-columns:1fr; }
  .registration-layout { grid-template-columns:1fr; }
  body.public-site .card,
  body.public-site .card:nth-child(4),
  body.public-site .card:nth-child(5) { grid-column:auto; min-height:0; }
  body.public-site .orbit { display:none; }
  body.facilitator-site header { background:var(--navy); }
  body.facilitator-site .layout { grid-template-columns:1fr; gap:40px; }
}

@media print {
  body.public-site,
  body.facilitator-site { background:white; }
  body.public-site .hero,
  body.facilitator-site header { background:white !important; }
  body.public-site .card::before { border-top:8px solid var(--role-color); background:none; }
}