:root {
  color-scheme: light;
  --page: #f6f7f9;
  --surface: #fff;
  --ink: #17213b;
  --muted: #45516a;
  --line: #d7dce5;
  --navy: #11192d;
  --navy-soft: #1d2b49;
  --hero-text: #d9e0f0;
  --mint: #b5f5d7;
  --green: #07614b;
  --green-soft: #eaf7f1;
  --link: #23468b;
  font: 100% / 1.58 system-ui, sans-serif;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  min-width: 0;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
  color: var(--ink);
  background: var(--page);
}

main { flex: 1; }
p, dl, dd { margin: 0; }
h1, h2, h3, h4 { margin: 0; line-height: 1.12; text-wrap: balance; }
h1 { font-size: clamp(2.65rem, 8vw, 5.7rem); letter-spacing: -.06em; }
h2 { font-size: clamp(1.85rem, 4vw, 2.8rem); letter-spacing: -.04em; }
h3 { font-size: clamp(1.2rem, 3vw, 1.45rem); letter-spacing: -.02em; }
h4 { font-size: 1.13rem; }
a { color: var(--link); text-underline-offset: .18em; overflow-wrap: anywhere; }
a:hover { text-decoration-thickness: .13em; }

:focus-visible {
  outline: .15rem solid currentColor;
  outline-offset: .25rem;
}

.visually-hidden, .skip-link:not(:focus) {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

.skip-link:focus {
  position: fixed;
  z-index: 1;
  inset: 1rem auto auto 1rem;
  padding: .6rem .9rem;
  background: var(--surface);
}

.wrap { width: min(calc(100% - 2rem), 67rem); margin-inline: auto; }

.site-header { color: var(--hero-text); background: var(--navy); }

.site-header-inner, .footer-inner {
  min-height: 4.5rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: .5rem 1rem;
}

.site-header-inner { padding-block: .5rem; }

.site-header nav, .site-footer nav {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem 1.25rem;
}

.site-header a, .site-footer a { color: inherit; }
.site-header nav a { padding-block: .45rem; text-decoration: none; }
.site-header nav a:hover, .site-header nav [aria-current] { color: var(--mint); text-decoration: underline; }

.brand {
  display: inline-flex;
  align-items: center;
  gap: .55rem;
  font-weight: 750;
  letter-spacing: .15em;
  text-decoration: none;
}

.brand-mark {
  display: grid;
  width: 2rem;
  aspect-ratio: 1;
  place-items: center;
  border: 1px solid #74bfa6;
  border-radius: .52rem;
  background: #203a43;
  color: var(--mint);
  letter-spacing: normal;
}

.hero {
  background: radial-gradient(ellipse at 82% 0%, #283f57 0%, transparent 62%), var(--navy);
  border-top: 1px solid #32415e;
  color: var(--surface);
}

.hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.8fr) minmax(15rem, 1fr);
  gap: clamp(1.75rem, 5vw, 4.5rem);
  align-items: end;
  padding-block: clamp(3rem, 8vw, 6rem);
}

.eyebrow {
  margin-bottom: .65rem;
  color: var(--green);
  font-size: .78rem;
  font-weight: 750;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.hero .eyebrow { color: var(--mint); }

.descriptor {
  max-width: 35rem;
  margin-top: .85rem;
  font-size: clamp(1.12rem, 2.6vw, 1.4rem);
  font-weight: 650;
  line-height: 1.38;
}

.hero-copy { max-width: 37rem; margin-top: 1rem; color: var(--hero-text); }

.hero-details {
  padding: .2rem 1.15rem;
  border: 1px solid #485977;
  border-radius: .9rem;
  background: var(--navy-soft);
}

.hero-details div { padding-block: .7rem; }
.hero-details div + div { border-top: 1px solid #485977; }
.hero-details dt { color: var(--hero-text); font-size: .84rem; }
.hero-details dd { font-weight: 650; }

.status-dot {
  display: inline-block;
  width: .55rem;
  height: .55rem;
  margin-right: .25rem;
  border-radius: 50%;
  background: #ffc47d;
}

.enrollment, .example-inner, .policy { padding-block: clamp(2.8rem, 7vw, 5rem); }
.section-intro { max-width: 45rem; margin-top: .85rem; color: var(--muted); }

.enrollment-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: start;
  gap: 1.15rem;
  margin-top: 1.65rem;
}

.panel {
  padding: clamp(1rem, 3vw, 1.65rem);
  border: 1px solid var(--line);
  border-radius: 1rem;
  background: var(--surface);
}

.panel-heading { display: flex; gap: .65rem; align-items: center; margin-bottom: .85rem; }

.step-number {
  display: grid;
  width: 2rem;
  height: 2rem;
  flex-shrink: 0;
  place-items: center;
  border-radius: .5rem;
  background: var(--green-soft);
  color: var(--green);
  font-size: .8rem;
  font-weight: 750;
}

.notice {
  padding: .65rem .8rem;
  border-left: .18rem solid #a46216;
  border-radius: .22rem;
  background: #fff3e3;
  color: #57360e;
  font-size: .91rem;
}

form { margin-top: 1rem; }
fieldset { min-width: 0; padding: 0; margin: 0; border: 0; }
.phone-label { display: block; margin-bottom: .3rem; font-weight: 650; }

input[type="tel"] {
  width: 100%;
  padding: .65rem .75rem;
  border: 1px solid #9da7ba;
  border-radius: .45rem;
  background: var(--page);
  color: var(--ink);
  font: inherit;
}

input[type="tel"]::placeholder { color: var(--muted); }

.checkbox-row {
  display: grid;
  grid-template-columns: 1.125rem minmax(0, 1fr);
  gap: .55rem;
  margin-top: .85rem;
  font-size: .91rem;
}

.checkbox-row input { width: 1rem; height: 1rem; margin: .24rem 0 0; }
.form-policy-links { display: flex; flex-wrap: wrap; gap: .2rem .85rem; margin-top: .1rem; }

button {
  margin-top: .95rem;
  padding: .55rem .9rem;
  border: 1px solid #aab4c4;
  border-radius: .48rem;
  background: #e4e9f1;
  color: #45516a;
  font: inherit;
  font-weight: 750;
  cursor: not-allowed;
}

.preview-note { margin-top: 1.15rem; border-top: 1px solid var(--line); padding-top: .75rem; }
.preview-note summary { width: fit-content; color: var(--link); cursor: pointer; font-size: .91rem; font-weight: 650; }
.sample-screen { margin-top: .65rem; padding: .85rem; border-radius: .55rem; background: var(--green-soft); }
.sample-screen p:last-child { margin-top: .35rem; font-size: .9rem; }

.text-instructions { margin-block: 1rem; }
.keyword-list { border-top: 1px solid var(--line); }
.keyword-list div { display: grid; grid-template-columns: 4rem minmax(0, 1fr); gap: .55rem; padding: .6rem 0; border-bottom: 1px solid var(--line); }
.keyword-list dt { font-size: .88rem; font-weight: 750; }
.keyword-list dd, .form-disclosure { color: var(--muted); font-size: .91rem; }
.form-disclosure { margin-top: .85rem; }

.example-section { border-top: 1px solid var(--line); background: #edf0f5; }
.example-inner { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: clamp(1.5rem, 5vw, 4rem); }
.exchange { display: grid; gap: .7rem; margin: 0; padding: 0; list-style: none; }
.exchange li { min-width: 0; padding: .85rem 1.05rem; border-radius: .85rem; }
.exchange li p + p { margin-top: .6rem; }
.exchange .sender { margin: 0; color: var(--muted); font-size: .78rem; font-weight: 750; }
.exchange .reply { justify-self: end; border: 1px solid #bfddcf; border-end-end-radius: .15rem; background: var(--green-soft); }
.exchange .message { margin-right: min(1.6rem, 5vw); border: 1px solid var(--line); border-end-start-radius: .15rem; background: var(--surface); }

.policy { max-width: 47rem; }
.policy h1 { font-size: clamp(2.5rem, 6vw, 4.4rem); }
.policy h2 { margin-top: 2rem; font-size: 1.42rem; letter-spacing: -.025em; }
.policy p + p, .policy h2 + p { margin-top: .55rem; }
.policy .policy-lead { margin-top: .85rem; color: var(--muted); font-size: 1.1rem; font-weight: 650; }

.site-footer { border-top: 1px solid #485977; background: var(--navy); color: var(--hero-text); }
.footer-inner { padding-block: .8rem; font-size: .89rem; }

@media (max-width: 48rem) {
  .hero-inner, .enrollment-grid, .example-inner { grid-template-columns: minmax(0, 1fr); }
  .hero-details { width: min(100%, 30rem); }
}

@media (max-width: 25rem) {
  .wrap { width: calc(100% - 1.5rem); }
  .site-header nav { gap: .25rem .8rem; }
}