/* Apple Design: immediate feedback, quiet hierarchy, accessible materials. */
:root {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  font-size: 100%;
  font-optical-sizing: auto;
  --accent: #0062cc;
  --chrome: #f9f9fbeb;
  --shadow: 0 .25rem 1rem #15152204, 0 1.5rem 4rem #15152206;
}
html[data-theme=dark] {
  --accent: #226ec7;
  --chrome: #202024ed;
  --shadow: 0 1rem 3rem #0002;
}
body { letter-spacing: 0; }
main { max-width: 70rem; padding-inline: 1.5rem; margin-block: 1.5rem 4rem; }
.header { max-width: 74rem; padding: 1.5rem 2.5rem; }
.brand { font-size: 1.5rem; letter-spacing: .16em; }
.brand span { font-size: .8125rem; letter-spacing: .025em; margin-top: .2rem; }
h1 { font-size: clamp(2rem, 4vw, 3rem); line-height: 1.12; letter-spacing: -.035em; margin-block: .4rem 1rem; }
h2 { font-size: 1.375rem; line-height: 1.25; letter-spacing: -.02em; margin-bottom: 1.25rem; }
h3 { font-size: 1rem; line-height: 1.35; letter-spacing: -.01em; }
.eyebrow { font-size: .875rem; letter-spacing: .055em; line-height: 1.5; }
.grid { gap: 1.5rem; align-items: start; }
.stack { gap: 1.5rem; }
.card { padding: 2rem; border: 1px solid var(--line); border-radius: 1.75rem; }
.login { max-width: 30rem; margin-block: 2.5rem; padding: 2.25rem; }
.login h1 { font-size: 2.5rem; white-space: pre-line; letter-spacing: -.035em; }
.intro { margin-bottom: 1.75rem; }
.big-plan { font-size: 3rem; letter-spacing: -.035em; line-height: 1.1; margin-block: 1.5rem .75rem; }
.facts { margin-block: 1.5rem 2rem; font-variant-numeric: tabular-nums; }
.facts>div { gap: 1.25rem; padding-block: 1rem; }
.facts dd { overflow-wrap: anywhere; font-weight: 550; }
.actions { gap: .5rem; margin-block: 1rem; }
.actions+.muted { margin-top: 1.25rem; }
button { min-height: 2.75rem; padding: .625rem 1rem; border-radius: .875rem; font-weight: 550; line-height: 1.35; -webkit-tap-highlight-color: transparent; }
button:active:not(:disabled) { opacity: .72; }
button:disabled { opacity: .65; cursor: progress; }
button[aria-busy=true] { box-shadow: inset 0 0 0 2px currentColor; }
button.primary { box-shadow: 0 .125rem .375rem #0062cc1a; }
.outline { background: var(--surface); }
.quiet { color: var(--ink); }
.test-banner { font-size: .875rem; padding: .625rem 1rem; line-height: 1.5; }
nav {
  display: flex; gap: .25rem; flex-wrap: wrap; width: fit-content; max-width: 100%;
  position: sticky; top: .75rem; z-index: 5; margin-block: 1.75rem;
  padding: .375rem; border-radius: 1.25rem; background: var(--surface);
  box-shadow: 0 .5rem 2rem #0000000a;
}
nav button { color: var(--ink); font-size: .9375rem; border-radius: .9375rem; }
nav button[aria-current=page] { background: var(--ink); color: var(--surface); }
@supports (backdrop-filter: blur(1px)) {
  nav { background: var(--chrome); backdrop-filter: blur(1.25rem) saturate(140%); -webkit-backdrop-filter: blur(1.25rem) saturate(140%); }
}
.tabs { border-radius: 1rem; padding: .25rem; margin-block: .875rem; }
.tabs button { border-radius: .75rem; }
.tabs button[aria-pressed=true] { box-shadow: 0 .125rem .375rem #00000012; color: var(--ink); }
.price { font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1.15; letter-spacing: -.04em; margin-block: 1.75rem 1.25rem; }
.price small { font-size: 1rem; letter-spacing: 0; font-weight: 400; color: var(--muted); white-space: nowrap; }
.pill { white-space: normal; font-size: .875rem; padding: .375rem .75rem; line-height: 1.35; }
.notice { padding: 1rem 1.125rem; border-radius: 1rem; font-size: .9375rem; line-height: 1.6; margin-block: 1rem; }
.muted { line-height: 1.6; }
label { font-size: .9375rem; line-height: 1.4; margin-block: 1rem .5rem; font-weight: 550; }
input:not([type=checkbox]), select, textarea { min-height: 3rem; padding: .75rem .875rem; border-radius: .875rem; }
textarea { resize: vertical; }
.check { gap: .75rem; padding-block: .5rem; font-weight: 400; }
.check input { width: 1.25rem; height: 1.25rem; }
form>button { margin-top: 1rem; }
hr { border: 0; border-top: 1px solid var(--line); margin-block: 1.75rem; }
.field-error, .inline-error { color: var(--danger); font-size: .9375rem; line-height: 1.5; margin-block: .5rem 1rem; }
[aria-invalid=true] { border-color: var(--danger)!important; }
.inline-error { border-left: .1875rem solid var(--danger); padding: .75rem 1rem; background: var(--bg); border-radius: .5rem; }
.empty { padding-block: 2rem; }
td, th { padding: 1rem .75rem; }
dialog { padding: 2rem; width: min(94vw, 32rem); max-height: 85dvh; overflow-y: auto; border-radius: 1.75rem; }
dialog[open] { animation: none; }
dialog::backdrop { background: #0b11205e; }
dialog .quiet { margin-top: 1rem; }
#toast { padding: .875rem 1.25rem; border-radius: 1rem; bottom: max(1.5rem, env(safe-area-inset-bottom)); }
.footer { font-size: .875rem; padding: 1.25rem 2rem; }
#footer-help { font-size: .875rem; }
:focus-visible { scroll-margin-block: 8rem; }
@media (hover:hover) {
  button.quiet:hover:not(:disabled), button.outline:hover:not(:disabled) { background: var(--wash); }
  nav button[aria-current=page]:hover:not(:disabled) { background: var(--ink); }
}
@media (prefers-reduced-motion:no-preference) {
  body, .card, input, textarea, nav { transition: background-color .18s ease, color .18s ease, border-color .18s ease; }
  button { transition: transform .1s ease-out, opacity .1s ease-out, background-color .15s ease; }
  button:active:not(:disabled) { transform: scale(.98); }
}
@media (prefers-reduced-motion:reduce) {
  *, *::before, *::after { animation: none!important; transition: none!important; scroll-behavior: auto!important; }
  button:active:not(:disabled) { transform: none; opacity: .72; }
}
@media (prefers-reduced-transparency:reduce) {
  nav { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; }
}
@media (prefers-contrast:more) {
  :root { --muted: #34343b; --line: #74747d; --chrome: #fff; }
  html[data-theme=dark] { --muted: #e2e2e7; --line: #a3a3ad; --chrome: #202024; }
  nav { background: var(--surface); backdrop-filter: none; -webkit-backdrop-filter: none; border: 1px solid var(--ink); }
  .pill, .outline { border: 1px solid var(--ink); }
}
@media (max-width:760px) {
  main { padding-inline: 1rem; }
  .header { padding: 1.25rem; }
  .card, .login { padding: 1.5rem; border-radius: 1.5rem; }
  .login { margin-block: 1.5rem; }
  .login h1 { font-size: 2rem; }
  nav { position: static; width: 100%; margin-block: 1.25rem; }
  nav button { flex: 1 1 auto; padding-inline: .75rem; }
  .big-plan { font-size: 2.5rem; }
  .facts>div { align-items: start; flex-wrap: wrap; gap: .5rem; }
  .facts dd { text-align: left; }
  dialog { padding: 1.5rem; }
  .footer { padding-inline: 1rem; }
}