/* The icon supplies charcoal and mint. System fonts keep every page self-contained. */
:root {
  --bg: #f5f2eb;
  --surface: #fffdf7;
  --fg: #1a1d21;
  --dim: #575c5e;
  --border: #cecec4;
  --link: #076744;
  --mint: #14f8a1;
  --code-bg: #1a1d21;
  --code-fg: #f5f2eb;
  color-scheme: light;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: 24px; }
body { margin: 0; color: var(--fg); background: var(--bg); font: 17px/1.6 -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; }
.home { --bg: #1a1d21; --surface: #22262a; --fg: #f5f2eb; --dim: #b5bab5; --border: #424847; --link: #14f8a1; color-scheme: dark; }
a { color: var(--link); text-underline-offset: .2em; }
a:hover { text-decoration-thickness: 2px; }
button, summary { cursor: pointer; }
button { font: inherit; }
:focus-visible { outline: 3px solid var(--link); outline-offset: 5px; }
img { max-width: 100%; height: auto; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.12; }
p + p { margin-top: 14px; }
code, pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
:not(pre) > code { font-size: .88em; overflow-wrap: anywhere; }
.wrap { width: min(1200px, 100%); padding: 0 40px; margin: auto; }
.top { min-height: 112px; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--border); }
.brand { display: inline-flex; align-items: center; color: var(--fg); font-size: 28px; font-weight: 750; letter-spacing: -.06em; text-decoration: none; }
.brand img { margin-right: 10px; border-radius: 8px; }
.brand span { color: var(--link); }
.top nav { display: flex; gap: 28px; flex-wrap: wrap; }
.top nav a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; font-weight: 650; color: var(--fg); text-decoration: none; }
.top nav a:hover, .top nav a[aria-current] { text-decoration: underline; text-decoration-color: var(--link); text-decoration-thickness: 2px; }
.skip { position: absolute; top: -100px; left: 16px; z-index: 2; background: var(--fg); color: var(--bg); padding: 12px 18px; }
.skip:focus { top: 12px; }
.eyebrow, .field-label { font: 12px/1.5 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; text-transform: uppercase; letter-spacing: .09em; }
.eyebrow { color: var(--dim); margin-bottom: 24px; }
.mint { color: var(--mint); }
.hero { display: grid; grid-template-columns: 1.5fr 1fr; align-items: center; gap: 56px; padding: 64px 0 72px; }
.hero > *, .setup-teaser > * { min-width: 0; }
.hero h1 { font-size: clamp(48px, 6vw, 80px); font-weight: 650; line-height: 1.01; letter-spacing: -.06em; }
.lede { color: var(--dim); font-size: 20px; line-height: 1.55; max-width: 34rem; }
.hero .lede { margin-top: 28px; max-width: 28rem; }
.actions { display: flex; align-items: center; gap: 28px; flex-wrap: wrap; margin: 32px 0 24px; }
.button { display: inline-flex; justify-content: space-between; align-items: center; gap: 32px; min-height: 52px; padding: 12px 22px; background: var(--mint); color: #1a1d21; font-size: 15px; font-weight: 700; text-decoration: none; border: 1px solid transparent; border-radius: 3px; }
.button:hover { background: #74ffc9; }
.text-action { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; color: var(--fg); }
.availability { font-size: 12px; color: var(--fg); line-height: 1.8; }
.availability span { color: var(--dim); }
.hero-proof { padding: 20px 32px; background: #242a2b; border-top: 2px solid var(--mint); }
.proof-label { display: flex; justify-content: space-between; gap: 16px; font: 11px/1.5 ui-monospace, monospace; color: #c3c9c4; margin-bottom: 24px; }
/* #2232: iPhone-display corner ≈14% of width, circular: 14% / 6.7%
   (14% × box width/height on these shots' ~2.09 framed aspect) —
   scales with width, no fixed px. The shots carry content in the
   corner zones (panel edge, key row), so nothing clips: padding
   paints a matching #0b0d0f inset inside the rounded frame. */
.hero-proof img { display: block; width: 100%; max-width: 320px; margin: auto; border: 1px solid #424847; border-radius: 14% / 6.7%; padding: 12px; background: #0b0d0f; }
figcaption { font-size: 12px; color: var(--dim); text-align: center; margin-top: 18px; }
.intro { padding: 72px 0 44px; border-top: 1px solid var(--border); display: grid; grid-template-columns: 1.1fr 1fr; column-gap: 72px; }
.intro .eyebrow { grid-column: 1 / -1; }
.intro h2, .setup-teaser h2 { font-size: clamp(34px, 4vw, 52px); font-weight: 600; letter-spacing: -.045em; }
.intro > p:last-child { color: var(--dim); max-width: 28rem; }
.work-proof { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 72px; padding: 64px 0; border-top: 1px solid var(--border); }
.work-copy { min-width: 0; }
.work-copy h2, .notification-proof h2 { font-size: clamp(34px, 4vw, 52px); font-weight: 600; letter-spacing: -.045em; }
.work-copy p:not(.eyebrow), .notification-proof > p:not(.eyebrow) { margin-top: 24px; color: var(--dim); max-width: 32rem; }
.work-screen { padding: 32px; background: var(--surface); border-top: 2px solid var(--mint); }
.work-screen img { display: block; width: 100%; max-width: 340px; margin: auto; border: 1px solid var(--border); border-radius: 14% / 6.7%; padding: 12px; background: #0b0d0f; }
.notification-proof { padding: 48px; margin: 24px 0 64px; border: 1px solid var(--border); border-left: 3px solid var(--mint); }
.notification-proof > p:not(.eyebrow) { max-width: 44rem; }
.benefits { display: grid; grid-template-columns: repeat(3, 1fr); gap: 48px; padding: 28px 0 80px; }
.benefits article { border-top: 1px solid var(--border); padding-top: 20px; }
.section-number { color: var(--link); font: 12px/1.5 ui-monospace, monospace; }
.benefits h3 { font-size: 20px; font-weight: 600; margin: 28px 0 14px; }
.benefits p { color: var(--dim); font-size: 15px; }
.setup-teaser { background: #f5f2eb; color: #1a1d21; padding: 48px; display: grid; grid-template-columns: 1fr 1fr; gap: 72px; margin-bottom: 80px; }
.setup-teaser .eyebrow, .setup-teaser p { color: #575c5e; }
.setup-teaser p { margin-top: 22px; font-size: 15px; }
.setup-teaser .button { margin-top: 28px; }
.setup-teaser ol { list-style: none; padding: 0; margin: 0; }
.setup-teaser li { display: flex; gap: 20px; padding: 24px 0; border-bottom: 1px solid #cecec4; }
.setup-teaser li:first-child { padding-top: 0; }
.setup-teaser li span { color: #076744; font: 12px/1.5 ui-monospace, monospace; }
.setup-teaser h3 { font-size: 20px; font-weight: 600; }
.setup-teaser li p { margin-top: 8px; }
.screens-link { padding-bottom: 56px; }
.screenshot-section { padding: 32px 0; border-top: 1px solid var(--border); }
.screenshot-section h2 { font-size: 28px; margin-bottom: 28px; }
.screenshot-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px; }
.screenshot-grid a, .screenshot-grid img { display: block; width: 100%; }
.screenshot-grid img { border: 1px solid var(--border); }
/* Documents use the same type and rules on a warm reading surface. */
main:not(.home main) { max-width: 800px; margin: 0 auto; }
.doc-heading { padding: 64px 0 32px; }
.doc-heading h1 { font-size: clamp(42px, 5vw, 64px); font-weight: 650; letter-spacing: -.055em; margin-bottom: 24px; }
.callout { border-left: 3px solid #076744; background: #e7e9de; padding: 20px 24px; margin-bottom: 24px; font-size: 15px; }
.callout p { margin-top: 6px; }
.contents { display: flex; gap: 8px 24px; flex-wrap: wrap; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 12px 0; margin: 28px 0 12px; }
.contents a { display: inline-flex; align-items: center; min-height: 44px; font-size: 14px; }
.steps { list-style: none; padding: 0; margin: 0; counter-reset: step; }
.steps > li { counter-increment: step; position: relative; padding: 48px 0 48px 64px; border-bottom: 1px solid var(--border); }
.steps > li::before { content: "0" counter(step); position: absolute; left: 0; top: 49px; font: 18px/1.5 ui-monospace, monospace; color: var(--link); }
.steps h2, .doc-section h2 { font-size: 28px; letter-spacing: -.025em; margin-bottom: 20px; font-weight: 650; }
.steps p, .doc-section p { max-width: 42rem; }
.os-picker { margin: 24px 0; }
.field-label { margin-bottom: 12px; color: var(--dim); }
.tabs { display: flex; gap: 4px; margin-bottom: 16px; }
.tabs[hidden], [hidden] { display: none !important; }
.tabs button { border: 1px solid var(--border); border-radius: 3px; color: var(--fg); background: transparent; padding: 10px 16px; min-height: 44px; font-size: 14px; }
.tabs button[aria-selected="true"] { background: #1a1d21; color: #f5f2eb; border-color: #1a1d21; }
.panel { margin-bottom: 24px; }
.panel h3 { font-size: 18px; margin: 16px 0; }
.tabs:not([hidden]) ~ .panel h3 { display: none; }
.cmd { margin: 16px 0; padding: 0 16px; background: var(--code-bg); color: var(--code-fg); border: 1px solid #424847; border-radius: 3px; display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.cmd pre { margin: 0; padding: 18px 0; font-size: 13px; line-height: 1.7; white-space: pre-wrap; overflow-wrap: anywhere; }
.copy { background: transparent; color: #14f8a1; border: 1px solid #69716f; border-radius: 3px; padding: 8px 12px; margin: 10px 0; min-height: 44px; font-size: 12px; }
.copy:focus-visible { outline-color: #14f8a1; }
.copy:hover { background: #303737; }
.copy-status { grid-column: 1 / -1; font-size: 12px; color: #d9e1d9; padding-bottom: 12px; }
.copy-status:empty { display: none; }
.note, .dim { font-size: 14px; color: var(--dim); }
details { margin: 16px 0; border-bottom: 1px solid var(--border); }
summary { min-height: 48px; padding: 12px 0; font-size: 15px; font-weight: 650; }
details > p:last-child { margin-bottom: 20px; }
.session-proof { margin: 32px auto; max-width: 230px; }
.session-proof img { display: block; border-radius: 24px; border: 1px solid var(--border); }
.doc-section { padding: 40px 0; border-bottom: 1px solid var(--border); }
table { width: 100%; border-collapse: collapse; table-layout: fixed; font-size: 14px; margin: 24px 0; }
th, td { text-align: left; vertical-align: top; border-bottom: 1px solid var(--border); padding: 16px 16px 16px 0; overflow-wrap: anywhere; }
thead th { color: var(--dim); font-weight: 500; }
th:first-child { width: 44%; }
tbody th { font-weight: 500; }
.next { padding: 48px 0 64px; }
.next h2 { font-size: 32px; letter-spacing: -.035em; }
.next p { margin: 16px 0 24px; }
footer { padding: 28px 0 40px; border-top: 1px solid var(--border); display: flex; align-items: center; gap: 28px; color: var(--dim); font-size: 12px; }
footer p { margin: 0; }
footer > div { margin-left: auto; display: flex; gap: 24px; flex-wrap: wrap; }
footer a:not(.brand) { min-height: 44px; display: inline-flex; align-items: center; color: var(--dim); }
.footer-brand { font-size: 24px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
/* Existing privacy and auth routes retain their markup and copy. */
.doc { padding: 48px 0; }
.doc h1 { font-size: 48px; letter-spacing: -.05em; margin-bottom: 24px; }
.doc > h2 { font-size: 24px; margin: 32px 0 16px; }
.doc > pre { background: var(--code-bg); color: var(--code-fg); white-space: pre-wrap; overflow-wrap: anywhere; padding: 16px; }
@media (max-width: 900px) {
  .wrap { padding: 0 28px; }
  .hero { gap: 28px; }
  .hero-proof { padding: 20px; }
  .hero h1 { font-size: 58px; }
  .setup-teaser { gap: 40px; padding: 32px; }
  .benefits { gap: 28px; }
  .work-proof { gap: 32px; }
  footer { flex-wrap: wrap; }
}
@media (max-width: 680px) {
  .wrap { padding: 0 20px; }
  .top { min-height: 96px; gap: 4px 16px; padding: 16px 0; flex-wrap: wrap; }
  .top nav { gap: 20px; }
  .top nav a { font-size: 13px; }
  .brand { font-size: 24px; }
  .brand img { width: 32px; height: 32px; }
  .hero { grid-template-columns: 1fr; padding: 48px 0; gap: 40px; }
  .hero h1 { font-size: clamp(44px, 10vw, 62px); }
  .hero .lede, .lede { font-size: 18px; }
  .hero-proof { width: 100%; max-width: 380px; justify-self: center; }
  .hero-proof img { width: 100%; }
  .intro { padding-top: 48px; grid-template-columns: 1fr; gap: 24px; }
  .intro .eyebrow { margin: 0; }
  .screenshot-grid { grid-template-columns: 1fr; gap: 24px; }
  .work-proof { grid-template-columns: 1fr; gap: 32px; padding: 48px 0; }
  .work-screen { padding: 24px; width: 100%; max-width: 380px; justify-self: center; }
  .work-screen img { width: 100%; }
  .hosts-proof .work-copy { grid-row: 1; }
  .notification-proof { padding: 28px 24px; margin-bottom: 48px; }
  .benefits { grid-template-columns: 1fr; gap: 28px; padding-bottom: 48px; }
  .benefits h3 { margin-top: 16px; }
  .setup-teaser { grid-template-columns: 1fr; padding: 28px 24px; gap: 32px; margin-bottom: 48px; }
  .doc-heading { padding-top: 40px; }
  .steps > li { padding: 72px 0 32px; }
  .steps > li::before { top: 28px; }
  .steps h2, .doc-section h2 { font-size: 25px; }
  .cmd { gap: 8px; padding: 0 12px; }
  .cmd pre { font-size: 12px; }
  .copy { padding: 8px; }
  .contents { gap: 4px 18px; }
  table { font-size: 13px; }
  th, td { padding: 14px 10px 14px 0; }
  th:first-child { width: 46%; }
  footer { display: block; }
  footer p { margin: 12px 0; }
  footer > div { margin: 12px 0 0; }
}
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; } }