:root {
  color-scheme: light;
  --page: #edf3f1;
  --surface: #fff;
  --surface-muted: #e6efec;
  --ink: #102a32;
  --muted: #536a71;
  --primary: #007f7a;
  --primary-strong: #006661;
  --primary-soft: #d9f2ed;
  --action: #006f6b;
  --action-text: #fff;
  --coral: #b94328;
  --warning: #fff1bd;
  --danger: #b33e37;
  --line: #cbdad6;
  --focus: #f4a62a;
  --radius: 1rem;
  --shadow: 0 16px 48px rgb(5 38 46 / 11%);
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

* { box-sizing: border-box; }
html { min-width: 320px; scroll-behavior: smooth; text-size-adjust: 100%; }
html[data-display-size="small"] { font-size: 94%; }
html[data-display-size="large"] { font-size: 108%; }
body { min-height: 100dvh; margin: 0; color: var(--ink); background: radial-gradient(circle at 90% 0, rgb(22 167 155 / 10%), transparent 28rem), var(--page); font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-size: 1rem; line-height: 1.62; }
img { display: block; max-width: 100%; }
a { color: var(--primary-strong); text-underline-offset: .2em; }
button, input, select, textarea { font: inherit; }
button, a, summary { -webkit-tap-highlight-color: transparent; }
:focus-visible { outline: .2rem solid var(--focus); outline-offset: .16rem; }
h1, h2, h3, p { margin: 0; }
h1, h2, h3 { line-height: 1.13; letter-spacing: -.035em; }
h1 { max-width: 22ch; font-size: clamp(1.75rem, 4.6vw, 3.25rem); text-wrap: balance; }
h2 { font-size: clamp(1.35rem, 4vw, 1.9rem); }
h3 { font-size: 1.05rem; }
.skip-link { position: fixed; z-index: 100; inset: .5rem auto auto .5rem; transform: translateY(-170%); border-radius: .55rem; color: #fff; background: #071e27; padding: .7rem 1rem; font-weight: 850; }
.skip-link:focus { transform: none; }
.site-header { position: sticky; z-index: 30; top: 0; padding-top: var(--safe-top); border-bottom: 1px solid var(--line); background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(.8rem); }
.header-inner, .page-shell, .site-footer { width: min(100% - 32px, 70rem); margin-inline: auto; }
.header-inner { min-height: max(3.9rem, var(--sf-density-navigation-size, 68px)); display: grid; align-items: center; gap: .2rem; padding: .3rem var(--safe-right) .4rem var(--safe-left); }
.brand { min-height: var(--sf-density-control-size, 48px); display: inline-flex; align-items: center; gap: .5rem; color: var(--ink); font-weight: 900; text-decoration: none; }
.brand img { width: 2.5rem; height: 2.5rem; object-fit: contain; }
.site-nav { width: 100%; min-width: 0; display: flex; align-items: center; gap: .1rem; overflow-x: auto; }
.site-nav a { min-height: var(--sf-density-control-size, 48px); display: inline-flex; align-items: center; border-radius: .55rem; color: var(--muted); padding: .45rem .5rem; font-size: .75rem; font-weight: 800; text-decoration: none; white-space: nowrap; }
.site-nav a:hover, .site-nav a[aria-current="page"] { color: var(--primary-strong); background: var(--primary-soft); }
.site-nav .signup-link { display: none; color: #fff; background: var(--coral); }
.page-shell { padding: clamp(1.5rem, 6vw, 4.5rem) 0 4rem; }
.hero { display: grid; gap: 1rem; padding-bottom: clamp(1.5rem, 5vw, 3.5rem); }
.eyebrow { display: block; margin-bottom: .45rem; color: var(--primary-strong); font-size: .72rem; font-weight: 900; letter-spacing: .13em; text-transform: uppercase; }
.hero-copy { max-width: 48rem; margin-top: .75rem; color: var(--muted); font-size: clamp(1rem, 2vw, 1.12rem); }
.updated { display: inline-flex; margin-top: .8rem; border-radius: 999px; color: var(--primary-strong); background: var(--primary-soft); padding: .3rem .65rem; font-size: .72rem; font-weight: 850; }
.hero-note { border: 1px solid var(--line); border-left: .3rem solid var(--primary); border-radius: var(--radius); background: var(--surface); box-shadow: var(--shadow); padding: 1rem; }
.hero-note p { margin-top: .35rem; color: var(--muted); font-size: .88rem; }
.content-grid { display: grid; gap: 1rem; align-items: start; }
.section-nav { position: sticky; z-index: 20; top: calc(7rem + var(--safe-top)); display: flex; gap: .3rem; overflow-x: auto; border: 1px solid var(--line); border-radius: .8rem; background: color-mix(in srgb, var(--surface) 96%, transparent); box-shadow: 0 8px 24px rgb(5 38 46 / 7%); padding: .35rem; backdrop-filter: blur(.7rem); }
.section-nav strong { display: none; }
.section-nav a { min-height: var(--sf-density-control-size, 48px); flex: 0 0 auto; display: flex; align-items: center; border-radius: .55rem; color: var(--muted); padding: .45rem .65rem; font-size: .75rem; font-weight: 800; text-decoration: none; }
.section-nav a:hover, .section-nav a:focus-visible { color: var(--primary-strong); background: var(--primary-soft); }
.document, .support-stack { display: grid; min-width: 0; gap: 1rem; }
.hero > *, .content-grid > *, .form-grid > * { min-width: 0; }
.document > section, .support-card { scroll-margin-top: 11rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--surface); box-shadow: 0 8px 30px rgb(6 36 44 / 6%); padding: clamp(1.15rem, 4vw, 2.4rem); }
.document p, .document li, .support-card p { max-width: 72ch; color: var(--muted); overflow-wrap: anywhere; }
.document p { margin-top: .55rem; }
.document h3 { margin-top: 1.25rem; }
.document ul { margin: .6rem 0 0; padding-left: 1.25rem; }
.document li + li { margin-top: .35rem; }
.retention-table { width: 100%; margin-top: 1rem; border-collapse: collapse; font-size: .82rem; }
.retention-table th, .retention-table td { border: 1px solid var(--line); padding: .5rem; text-align: left; vertical-align: top; overflow-wrap: anywhere; }
.retention-table th { color: var(--ink); background: var(--primary-soft); }
.retention-table td { color: var(--muted); }
.support-card > p { margin-top: .5rem; }
.support-options { display: grid; gap: .55rem; margin-top: 1rem; }
.support-option { border: 1px solid var(--line); border-radius: .75rem; background: var(--surface-muted); padding: .8rem; }
.support-option p { margin-top: .25rem; font-size: .82rem; }
.button-row { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .9rem; }
.button-primary, .button-secondary { min-height: var(--sf-density-control-size, 48px); display: inline-flex; align-items: center; justify-content: center; border: 1px solid transparent; border-radius: .6rem; padding: .6rem .9rem; font-size: .85rem; font-weight: 850; text-decoration: none; cursor: pointer; }
.button-primary { color: var(--action-text); background: var(--action); box-shadow: 0 .4rem 1rem rgb(0 90 86 / 20%); }
.button-secondary { border-color: var(--line); color: var(--primary-strong); background: var(--surface); }
.button-primary:disabled { cursor: not-allowed; opacity: .55; }
.contact-form { display: grid; gap: .85rem; margin-top: 1.1rem; }
.form-grid { display: grid; gap: .85rem; }
.contact-form label { display: grid; gap: .35rem; color: var(--ink); font-size: .85rem; font-weight: 800; }
.field-counter { justify-self: end; margin-top: -1.8rem; color: var(--muted); font-size: .72rem; font-weight: 650; }
.contact-form input, .contact-form select, .contact-form textarea { width: 100%; min-height: max(2.85rem, 44px); border: 1px solid var(--line); border-radius: .6rem; color: var(--ink); background: color-mix(in srgb, var(--surface) 85%, var(--surface-muted)); padding: .7rem .8rem; font-size: max(1rem, 16px); font-weight: 400; }
.contact-form textarea { min-height: 10rem; resize: vertical; }
.contact-form input::placeholder, .contact-form textarea::placeholder { color: var(--muted); opacity: 1; }
.contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 .2rem color-mix(in srgb, var(--primary) 20%, transparent); outline: 0; }
.form-help { color: var(--muted); font-size: .76rem; }
.form-status { border-radius: .6rem; color: var(--primary-strong); background: var(--primary-soft); padding: .7rem; font-size: .84rem; font-weight: 750; }
.form-status[data-tone="error"] { color: var(--danger); background: #ffe7e3; }
.form-trap { position: absolute !important; left: -10000px !important; width: 1px !important; height: 1px !important; overflow: hidden !important; }
.faq-list { display: grid; gap: .45rem; margin-top: .8rem; }
.faq-list details { border: 1px solid var(--line); border-radius: .7rem; background: color-mix(in srgb, var(--surface) 75%, var(--surface-muted)); }
.faq-list summary { min-height: var(--sf-density-control-size, 48px); padding: .7rem .8rem; color: var(--ink); font-weight: 800; cursor: pointer; }
.faq-list details p { padding: 0 .8rem .8rem; }
.site-footer { min-height: 6rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; border-top: 1px solid var(--line); color: var(--muted); padding: 1rem var(--safe-right) max(1rem, var(--safe-bottom)) var(--safe-left); font-size: .75rem; }
.footer-links { display: flex; flex-wrap: wrap; gap: .35rem; }
.footer-links a { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; padding-inline: .35rem; }
@media (min-width: 48rem) {
  .header-inner, .page-shell, .site-footer { width: min(100% - 2.5rem, 70rem); }
  .header-inner { display: flex; padding-block: 0; }
  .site-nav { width: auto; }
  .brand img { width: 2.75rem; height: 2.75rem; }
  .site-nav { gap: .25rem; }
  .site-nav a { padding-inline: .7rem; font-size: .8rem; }
  .site-nav .signup-link { display: inline-flex; }
  .section-nav { top: calc(max(3.9rem, var(--sf-density-navigation-size, 68px)) + 1px + var(--safe-top)); }
  .document > section, .support-card { scroll-margin-top: 8.75rem; }
  .hero { grid-template-columns: minmax(0, 1.45fr) minmax(15rem, .55fr); align-items: end; gap: 2rem; }
  .support-options { grid-template-columns: repeat(3, 1fr); }
  .form-grid { grid-template-columns: repeat(2, 1fr); }
  .retention-table { font-size: .86rem; }
}
@media (min-width: 64rem) {
  .content-grid { grid-template-columns: 15rem minmax(0, 1fr); gap: 2.25rem; }
  .section-nav { top: calc(4.6rem + var(--safe-top)); display: grid; gap: .15rem; overflow: visible; padding: .7rem; }
  .section-nav strong { display: block; padding: .45rem .55rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; }
  .section-nav a { min-height: max(2.75rem, 44px); }
  .document > section, .support-card { scroll-margin-top: 5.5rem; }
  .document, .support-stack { gap: 1.25rem; }
}
@media (orientation: landscape) and (max-height: 34rem) and (max-width: 63.99rem) {
  .page-shell { padding-top: clamp(1rem, 4vh, 1.5rem); padding-bottom: 2.5rem; }
  .hero { gap: .75rem; padding-bottom: 1.5rem; }
  h1 { max-width: 22ch; font-size: clamp(2rem, 9vh, 3.25rem); }
  .hero-copy { margin-top: .5rem; font-size: 1rem; }
  .hero-note { padding: .8rem; }
}
.document p a { text-underline-offset: .2em; overflow-wrap: anywhere; }
html[data-theme="dark"] {
  color-scheme: dark;
  --page: #071820;
  --surface: #0d242d;
  --surface-muted: #17353d;
  --ink: #f0f8f7;
  --muted: #afc4c6;
  --primary: #51d5c4;
  --primary-strong: #8de5d9;
  --primary-soft: #123c3c;
  --action: #73daca;
  --action-text: #071820;
  --coral: #b94328;
  --warning: #493b1d;
  --danger: #ff8b80;
  --line: #294851;
  --shadow: 0 18px 50px rgb(0 0 0 / 30%);
}
html[data-theme="dark"] .form-status[data-tone="error"] { background: #472626; }
@media (prefers-color-scheme: dark) {
  html:not([data-theme]) { color-scheme: dark; --page: #071820; --surface: #0d242d; --surface-muted: #17353d; --ink: #f0f8f7; --muted: #afc4c6; --primary: #51d5c4; --primary-strong: #8de5d9; --primary-soft: #123c3c; --action: #73daca; --action-text: #071820; --coral: #b94328; --warning: #493b1d; --danger: #ff8b80; --line: #294851; --shadow: 0 18px 50px rgb(0 0 0 / 30%); }
  html:not([data-theme]) .form-status[data-tone="error"] { background: #472626; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
