/*
  June's Help: the base styles of every page (CONTRACTS change 191). The look is the design canvas (L-Landing, L-Welcome, L-Letters):
  warm paper, sage green, a serif for headings, big type and big tap targets, calm borders, the yellow notice. Phone first: this file is
  the phone, and the @media (min-width: 720px) block at the end widens it. The page policy allows no inline style, so every page uses
  these classes; a page builder adds its own file next to this one and names it in the page's `styles`.

  The canvas names Atkinson Hyperlegible and Literata. The page policy allows fonts from our own origin only and none are shipped yet,
  so the stacks below fall back to the reader's own fonts until the files are added here.
*/

:root {
  color-scheme: light;
  --bg: #f7f2eb;
  --ink: #2f2a26;
  --muted: #4d453f;
  --line: #e7ded3;
  --card: #fffdf9;
  --sage: #4f6f5f;
  --sage-dark: #3f5a4c;
  --sage-light: #e4ece5;
  --sage-line: #cfddd2;
  --peach: #f3d9c4;
  --peach-line: #e3c3a8;
  --sand: #efe8de;
  --sand-line: #e1d6c9;
  --notice-bg: #fff0b3;
  --notice-line: #d4a72c;
  --notice-ink: #3a2e00;
  --attention: #8c3b1f;
  --attention-bg: #fbefe7;
  --attention-line: #e2c4b3;
  --font-body: 'Atkinson Hyperlegible', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --font-head: 'Literata', Georgia, 'Times New Roman', serif;
  --font-mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace;
  --radius: 14px;
  --radius-lg: 18px;
}

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 1.65;
}

img,
svg {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

/* ---- type ---- */

h1,
h2,
h3,
h4 {
  margin: 0;
  font-family: var(--font-head);
  overflow-wrap: break-word;
}

h1 {
  font-size: 34px;
  line-height: 42px;
  font-weight: 500;
  letter-spacing: -0.015em;
}

h2 {
  font-size: 26px;
  line-height: 34px;
  font-weight: 600;
}

h3 {
  font-size: 21px;
  line-height: 28px;
  font-weight: 600;
}

h4 {
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
}

p {
  margin: 0;
}

a {
  color: var(--sage);
  text-decoration: underline;
  text-underline-offset: 3px;
}

a:hover {
  color: var(--sage-dark);
}

:focus-visible {
  outline: 3px solid var(--sage-dark);
  outline-offset: 3px;
}

strong {
  font-weight: 700;
}

kbd {
  display: inline-block;
  min-width: 24px;
  padding: 0 7px;
  border: 1px solid var(--sand-line);
  border-radius: 6px;
  background: var(--sand);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 20px;
  text-align: center;
  color: var(--ink);
}

.eyebrow {
  margin: 0;
  font-size: 13px;
  line-height: 18px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

.lede {
  font-size: 20px;
  line-height: 32px;
}

.small {
  font-size: 15px;
  line-height: 24px;
}

.muted {
  color: var(--muted);
}

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

/* ---- layout helpers ---- */

.wrap {
  width: 100%;
  max-width: 1120px;
  margin-right: auto;
  margin-left: auto;
  padding-right: 20px;
  padding-left: 20px;
}

.wrap-narrow {
  max-width: 720px;
}

.page {
  flex: 1 0 auto;
}

/* The skip link moves focus to <main>; the page itself needs no ring around it. */
.page:focus {
  outline: none;
}

.page-pad {
  padding-top: 32px;
  padding-bottom: 48px;
}

.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.stack-lg {
  display: flex;
  flex-direction: column;
  gap: 28px;
}

.row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px 14px;
}

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

/* ---- skip link, header ---- */

.skip-link {
  position: absolute;
  top: -80px;
  left: 12px;
  z-index: 10;
  padding: 10px 16px;
  border-radius: var(--radius);
  background: var(--ink);
  color: #fff;
  font-weight: 700;
  text-decoration: none;
}

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

.site-header {
  border-bottom: 1px solid var(--line);
}

.header-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 8px;
  padding-top: 10px;
  padding-bottom: 10px;
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  font-family: var(--font-head);
  font-weight: 600;
  font-size: 19px;
  line-height: 26px;
  color: var(--ink);
  text-decoration: none;
}

.brand:hover {
  color: var(--ink);
}

.brand-mark {
  flex: none;
}

.header-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0 4px;
  margin-left: auto;
}

.nav-link {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 10px;
  border: 0;
  background: transparent;
  color: var(--ink);
  font-family: inherit;
  font-size: 17px;
  line-height: 24px;
  text-decoration: none;
  cursor: pointer;
}

.nav-link:hover {
  color: var(--ink);
  text-decoration: underline;
}

.nav-link[aria-current='page'] {
  font-weight: 700;
  box-shadow: inset 0 -3px 0 var(--sage);
}

.signout {
  display: inline-flex;
  margin: 0;
}

/* ---- pills and badges ---- */

.pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 0 8px;
  border: 1.5px solid var(--muted);
  border-radius: 999px;
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  letter-spacing: 0.02em;
  white-space: nowrap;
  color: var(--ink);
}

.pill-sage {
  padding: 5px 14px;
  border-color: transparent;
  background: var(--sage-light);
  color: var(--sage-dark);
  font-size: 15px;
  line-height: 22px;
  letter-spacing: 0.01em;
  white-space: normal;
}

.badge {
  display: inline-block;
  padding: 2px 12px;
  border: 1px solid #b9cdbf;
  border-radius: 999px;
  background: var(--sage-light);
  color: var(--sage-dark);
  font-family: var(--font-body);
  font-size: 14px;
  line-height: 20px;
  font-weight: 700;
  white-space: nowrap;
}

.badge-attention {
  border-color: var(--attention-line);
  background: var(--attention-bg);
  color: var(--attention);
}

/* ---- cards and callouts ---- */

.card {
  padding: 20px 20px 22px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--card);
}

.card-raised {
  box-shadow: 0 6px 16px rgba(47, 42, 38, 0.07);
}

.hero-band {
  padding: 24px 20px 26px;
  border-radius: var(--radius-lg);
  background: var(--peach);
}

.alert {
  padding: 14px 18px;
  border: 1px solid var(--attention-line);
  border-left: 5px solid var(--attention);
  border-radius: var(--radius-lg);
  background: var(--attention-bg);
  color: var(--ink);
}

.alert-ok {
  border-color: var(--sage-line);
  border-left-color: var(--sage);
  background: var(--sage-light);
}

/* The yellow notice: big on the upload steps, small on every letter page. The same on a phone; the big one grows on a wider screen. */
.notice {
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 20px;
  border: 1.5px solid var(--notice-line);
  border-radius: var(--radius-lg);
  background: var(--notice-bg);
  color: var(--notice-ink);
}

.notice p {
  min-width: 0;
  font-size: 16px;
  line-height: 24px;
}

.notice-icon {
  flex: none;
  width: 24px;
  height: 24px;
  margin-top: 1px;
}

/* ---- buttons ---- */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 10px 28px;
  border: 2px solid var(--sage);
  border-radius: 16px;
  background: var(--sage);
  color: #fff;
  font-family: inherit;
  font-size: 19px;
  line-height: 26px;
  font-weight: 700;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
}

.button:hover {
  border-color: var(--sage-dark);
  background: var(--sage-dark);
  color: #fff;
}

.button-secondary {
  background: var(--card);
  color: var(--sage-dark);
}

.button-secondary:hover {
  background: var(--sage-light);
  color: var(--sage-dark);
}

.button-small {
  min-height: 48px;
  padding: 6px 20px;
  border-radius: var(--radius);
  font-size: 17px;
  line-height: 24px;
}

.button-block {
  display: flex;
  width: 100%;
}

.button[disabled],
.button[aria-disabled='true'] {
  opacity: 0.55;
  cursor: not-allowed;
}

.link-button {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--sage-dark);
  font-family: inherit;
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/*
  ---- "Opening soon" (preview mode, CONTRACTS change 270) ----
  The plain words that stand where a Start, Sign up or Sign in control was while the site is on air before its accounts: no link, no form, no
  button. So they are drawn as a quiet label (a sage pill with no shadow, no hover and no pointer) and never as a button that does not work.
  It sits where the control sat: in the rows of actions of the offer page, in the help pages' button rows and, as plain muted words like the
  nav links beside them, in the header.
*/

.opening-soon {
  display: inline-flex;
  align-items: center;
  width: fit-content;
  max-width: 100%;
  min-height: 44px;
  padding: 6px 20px;
  border: 1.5px solid var(--sage-line);
  border-radius: 999px;
  background: var(--sage-light);
  color: var(--sage-dark);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 24px;
  font-weight: 700;
  letter-spacing: 0.01em;
  cursor: default;
}

.header-nav .opening-soon {
  padding: 0 10px;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--muted);
  font-weight: 400;
  letter-spacing: 0;
}

/* ---- forms ---- */

form {
  margin: 0;
}

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

legend {
  padding: 0 0 10px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.field {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.field label,
.label {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
}

.hint {
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
}

.field-error {
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--attention);
}

input[type='text'],
input[type='email'],
input[type='tel'],
input[type='search'],
input[type='url'],
input[type='number'],
input[type='password'],
select,
textarea {
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 1.5px solid var(--muted);
  border-radius: var(--radius);
  background: var(--card);
  color: var(--ink);
  font-family: inherit;
  font-size: 18px;
  line-height: 26px;
}

select {
  cursor: pointer;
}

textarea {
  min-height: 132px;
  padding: 12px 16px;
}

input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: 3px solid var(--sage-dark);
  outline-offset: 2px;
}

input[aria-invalid='true'],
select[aria-invalid='true'],
textarea[aria-invalid='true'] {
  border-width: 2px;
  border-color: var(--attention);
}

.choices {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.choice {
  display: flex;
  flex: 1 1 140px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  min-height: 56px;
  padding: 8px 14px;
  border: 1.5px solid var(--muted);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  cursor: pointer;
}

.choice input {
  flex: none;
  width: 22px;
  height: 22px;
  margin: 0;
  accent-color: var(--sage);
}

.choice:has(input:checked) {
  border-color: var(--sage);
  background: var(--sage-light);
  box-shadow: 0 0 0 0.5px var(--sage);
}

/* A box she ticks (the sign-up box and the health box): tall, left aligned, plain weight. */
.choice-check {
  justify-content: flex-start;
  gap: 14px;
  min-height: 68px;
  padding: 12px 18px;
  background: var(--bg);
  font-weight: 400;
}

.choice-check input {
  width: 28px;
  height: 28px;
}

.choice-check > span {
  min-width: 0;
}

/*
  The family seats on the plan page (CONTRACTS change 286, D55): 0 to 10 as a row of numbered buttons. The radio buttons are the real controls
  (a keyboard moves between them, a screen reader reads the group), drawn by their labels; and each choice has its total, which follows the radio
  buttons in the same box so that the one whose button is chosen is the one shown, with no script and no inline style. The seat box (D57) is in
  the same box after the totals and is shown the same way, for any number above none.
*/
.seat-picker {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.seat-picker input[type='radio'] {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.seat-picker input[type='radio'] + label {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 56px;
  padding: 8px 6px;
  border: 1.5px solid var(--muted);
  border-radius: var(--radius);
  background: var(--card);
  font-size: 18px;
  line-height: 26px;
  font-weight: 700;
  cursor: pointer;
}

.seat-picker input[type='radio']:checked + label {
  border-color: var(--sage);
  background: var(--sage-light);
  box-shadow: 0 0 0 0.5px var(--sage);
}

.seat-picker input[type='radio']:focus-visible + label {
  outline: 3px solid var(--sage-dark);
  outline-offset: 2px;
}

.seat-total {
  display: none;
  grid-column: 1 / -1;
  margin-top: 4px;
  font-weight: 700;
}

#seats-0:checked ~ [data-seats='0'],
#seats-1:checked ~ [data-seats='1'],
#seats-2:checked ~ [data-seats='2'],
#seats-3:checked ~ [data-seats='3'],
#seats-4:checked ~ [data-seats='4'],
#seats-5:checked ~ [data-seats='5'],
#seats-6:checked ~ [data-seats='6'],
#seats-7:checked ~ [data-seats='7'],
#seats-8:checked ~ [data-seats='8'],
#seats-9:checked ~ [data-seats='9'],
#seats-10:checked ~ [data-seats='10'] {
  display: block;
}

/* Hidden by the picker's own rule, which is more specific than .choice (it makes the box a flex box): the order of the two in this file does not decide. */
.seat-picker .seat-box {
  display: none;
  grid-column: 1 / -1;
  margin-top: 4px;
}

#seats-1:checked ~ .seat-box,
#seats-2:checked ~ .seat-box,
#seats-3:checked ~ .seat-box,
#seats-4:checked ~ .seat-box,
#seats-5:checked ~ .seat-box,
#seats-6:checked ~ .seat-box,
#seats-7:checked ~ .seat-box,
#seats-8:checked ~ .seat-box,
#seats-9:checked ~ .seat-box,
#seats-10:checked ~ .seat-box {
  display: flex;
}

/* ---- steps of /start ---- */

.step-progress {
  padding-top: 24px;
}

.step-label {
  margin: 0 0 8px;
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  color: var(--sage-dark);
}

.step-bar {
  display: flex;
  gap: 4px;
}

.step-bar .seg {
  flex: 1 1 0;
  height: 8px;
  border: 1px solid var(--sage-line);
  border-radius: 999px;
  background: var(--sage-light);
}

.step-bar .seg.on {
  border-color: var(--sage);
  background: var(--sage);
}

/* ---- disclosures ("Why I ask", "How this works") ---- */

details {
  border-top: 1px solid var(--line);
}

summary {
  display: flex;
  align-items: center;
  gap: 12px;
  min-height: 52px;
  color: var(--sage-dark);
  font-size: 16px;
  line-height: 24px;
  font-weight: 700;
  cursor: pointer;
}

/* ---- lists ---- */

.plain-list {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ---- footer ---- */

.site-footer {
  padding: 16px 0 30px;
  border-top: 1px solid var(--line);
}

.footer-stack {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* The crisis line (CONTRACTS change 342-345, landing v2): the same look as the attorney line, in the footer of every page; its two phone links are bold and in the sage of the other links. */
.attorney-line,
.crisis-line {
  font-size: 15px;
  line-height: 24px;
  color: var(--muted);
}

.crisis-line a {
  color: var(--sage-dark);
  font-weight: 700;
}

.footer-nav {
  display: flex;
  flex-wrap: wrap;
  gap: 0 20px;
}

.footer-nav a {
  display: inline-flex;
  align-items: center;
  min-width: 44px;
  min-height: 44px;
  font-size: 15px;
  line-height: 22px;
}

.postal {
  font-size: 15px;
  line-height: 22px;
  color: var(--muted);
}

/* ---- wider than a phone: one column becomes two where a page asks for it ---- */

@media (min-width: 720px) {
  .wrap {
    padding-right: 24px;
    padding-left: 24px;
  }

  h1 {
    font-size: 44px;
    line-height: 52px;
  }

  h2 {
    font-size: 30px;
    line-height: 38px;
  }

  h3 {
    font-size: 22px;
    line-height: 30px;
  }

  .page-pad {
    padding-top: 48px;
    padding-bottom: 56px;
  }

  .header-row {
    gap: 4px 24px;
    padding-top: 14px;
    padding-bottom: 14px;
  }

  .brand {
    gap: 10px;
    font-size: 22px;
    line-height: 28px;
  }

  .nav-link,
  .header-nav .opening-soon {
    padding: 0 12px;
  }

  .pill {
    padding: 0 10px;
    font-size: 14px;
  }

  .card {
    padding: 28px 32px 30px;
  }

  .hero-band {
    padding: 30px 36px 32px;
  }

  .notice {
    gap: 14px;
    padding: 18px 20px;
  }

  .notice p {
    line-height: 25px;
  }

  .notice-icon {
    width: 26px;
    height: 26px;
  }

  .notice-big {
    gap: 16px;
    padding: 26px 28px;
  }

  .notice-big p {
    font-size: 18px;
    line-height: 30px;
  }

  .notice-big .notice-icon {
    width: 30px;
    height: 30px;
    margin-top: 0;
  }

  .grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 32px;
  }

  .seat-picker {
    grid-template-columns: repeat(11, minmax(0, 1fr));
    gap: 8px;
  }
}