/* Proto landing: the signed-out page at / on the coach host. Static, no script, no web font.
   Ported from docs/prd/coach-2026-09/proto/approved-2026-09-28.html (landing sections only).
   The values below are Rails DS v2 tokens (rails-tokens.css) copied as written, plus the Proto
   mark ramp from DESIGN.md 3.2, so this page needs nothing outside its own folder. */

/* ---------- tokens: light ---------- */
:root {
  color-scheme: light dark;
  --card: #F5F5F7;
  --bubble: #FFFFFF;
  --stroke: #DCDCE1;
  --fill: rgb(29 29 31 / .06);
  --ink: #1D1D1F;
  --muted: #6A6A70;
  --brand: #0071E3;
  --on-brand: #FFFFFF;
  --focus: #0071E3;
  --link: #0066CC;
  --tile-encre: #0A0A0C;
  --tile-encre-ink: #FFFFFF;
  --mark-strong: #1D1D1F;
  --mark-mid: #6A6A70;
  --mark-soft: #808086;
  --mark-track: #DCDCE1;
  --p-bezel: #0A0A0C;
  --mock-window-shadow: 0 0 0 .5px rgb(0 0 0 / .18), 0 24px 60px rgb(0 0 0 / .14);

  --radius-button: 9px;
  --radius-control: 10px;
  --radius-bubble: 14px;
  --radius-chat: 20px;

  --space-bubble-gap: 6px;
  --space-touch: 44px;
  --space-page-gutter: 24px;
  --space-page-gutter-compact: 16px;
  --space-page-section: 96px;
  --space-page-section-compact: 64px;
  --space-page-content: 1120px;
  --space-page-top: 28px;
  --space-page-footer-bottom: 56px;
  --space-page-lede: 660px;
  --space-page-rules-gap: 14px;
  --space-page-grid-min: 220px;
  --space-page-grid-two-min: 320px;

  --type-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", system-ui, sans-serif;
  --type-page-hero-size: 72px;
  --type-page-hero-compact-size: 48px;
  --type-page-hero-tracking: -0.045em;
  --type-page-section-size: 34px;
  --type-page-section-compact-size: 28px;
  --type-page-section-tracking: -0.022em;
  --type-page-subsection-size: 17px;
  --type-page-lede-size: 18px;
  --type-page-body-size: 16px;
  --type-page-eyebrow-size: 13px;
  --type-page-footer-size: 13px;
  --type-page-rule-size: 15px;
  --type-large-title-size: 30px;
}

/* ---------- tokens: dark (the system's choice) ---------- */
@media screen and (prefers-color-scheme: dark) {
  :root {
    --card: #111113;
    --bubble: #1C1C1F;
    --stroke: #000000;
    --fill: rgb(245 245 247 / .08);
    --ink: #F5F5F7;
    --muted: #9A9AA2;
    --link: #4DA3FF;
    --mark-strong: #F5F5F7;
    --mark-mid: #9A9AA2;
    --mark-soft: #6E6E76;
    --mark-track: #333338;
    --mock-window-shadow: 0 0 0 .5px rgb(0 0 0 / .8), 0 24px 60px rgb(0 0 0 / .6);
  }
}
@media (prefers-contrast: more) {
  :root { --stroke: var(--muted); --mark-track: var(--mark-soft); }
}

/* ---------- base ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { background: var(--card); scroll-padding-block-start: 16px; -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--card); color: var(--ink); font-family: var(--type-family); overflow-x: hidden; }
body.doc { font-size: var(--type-page-body-size); line-height: 1.55; font-weight: 400; }
h1, h2, h3, p, ul, ol, figure { margin: 0; }
a { color: var(--link); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.sr-only {
  position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; inset-block-start: 8px; inset-inline-start: 8px; z-index: 10;
  padding: 8px 14px; border: 1px solid var(--stroke); border-radius: var(--radius-button);
  background: var(--bubble); color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600;
}
.skip-link:not(:focus) { inline-size: 1px; block-size: 1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* ---------- DS type roles (page density) ---------- */
.type-hero { font-size: var(--type-page-hero-size); line-height: 1; font-weight: 700; letter-spacing: var(--type-page-hero-tracking); }
.type-section { font-size: var(--type-page-section-size); line-height: 1.12; font-weight: 700; letter-spacing: var(--type-page-section-tracking); }
.type-subsection { font-size: var(--type-page-subsection-size); line-height: 1.55; font-weight: 600; letter-spacing: -0.01em; }
.type-lede { max-inline-size: var(--space-page-lede); color: var(--muted); font-size: var(--type-page-lede-size); line-height: 1.55; }
.type-eyebrow { color: var(--muted); font-size: var(--type-page-eyebrow-size); line-height: 1.55; font-weight: 600; }

/* ---------- DS doc family ---------- */
.doc-wrap { max-inline-size: var(--space-page-content); margin-inline: auto; padding-inline: var(--space-page-gutter); }
.doc-top {
  display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap;
  padding-block-start: var(--space-page-top);
}
.doc-hero {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 40px; align-items: center;
  padding-block-start: 64px;
}
.doc-section { padding-block-start: var(--space-page-section); }
.doc-grid { display: grid; gap: 16px; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--space-page-grid-min)), 1fr)); }
.doc-grid--two { align-items: start; grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--space-page-grid-two-min)), 1fr)); }
.doc-rules {
  display: grid; gap: var(--space-page-rules-gap); margin: 0; padding: 0; list-style: none;
  font-size: var(--type-page-rule-size); line-height: 1.5;
}
.doc-rules :where(b, strong) { font-weight: 600; }
.doc-footer { padding: var(--space-page-section) 0 var(--space-page-footer-bottom); color: var(--muted); font-size: var(--type-page-footer-size); line-height: 1.55; }

/* ---------- DS components used here ---------- */
.bubble { background: var(--bubble); color: var(--ink); border: 1px solid var(--stroke); border-radius: var(--radius-bubble); }
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-block-size: var(--space-touch);
  padding: 0 18px; border-radius: var(--radius-button); background: var(--fill); color: var(--ink);
  font-size: 15px; font-weight: 600; line-height: 1.2; text-decoration: none; white-space: nowrap;
}
.btn--primary { background: var(--brand); color: var(--on-brand); }
.btn--secondary { background: var(--fill); color: var(--ink); }

/* ---------- top ---------- */
.p-lockup {
  display: inline-flex; align-items: center; gap: 10px; min-block-size: var(--space-touch);
  font-size: 20px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; color: var(--ink); text-decoration: none;
}
.p-tile { inline-size: 30px; block-size: 30px; flex: none; }
.p-tile-bg { fill: var(--tile-encre); }
.p-tile-ink { fill: var(--tile-encre-ink); }
.p-top-links, .p-foot-links { display: flex; flex-wrap: wrap; gap: 2px; }
.p-top-links a, .p-foot-links a {
  display: inline-flex; align-items: center; min-block-size: var(--space-touch); padding: 0 10px;
  border-radius: var(--radius-button); color: var(--muted); text-decoration: none; font-size: 14px;
}
.p-top-links a:hover, .p-foot-links a:hover { background: var(--fill); color: var(--ink); }
.p-foot-links { margin-block-start: 12px; margin-inline-start: -10px; }
.doc-footer p { max-inline-size: 660px; }

/* ---------- hero ---------- */
.p-hero { grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); align-items: center; }
.p-hero h1 { max-inline-size: 11ch; margin-block-start: 8px; }
.p-hero .type-lede { margin-block-start: 18px; }
.p-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-block-start: 28px; }

/* The phone: a static picture of the Today tab, drawn in HTML and CSS. */
.p-phone-wrap { display: grid; justify-items: center; gap: 12px; min-inline-size: 0; }
.p-phone {
  inline-size: min(340px, 100%); padding: 10px; border-radius: 52px;
  background: var(--p-bezel); box-shadow: var(--mock-window-shadow), inset 0 0 0 1px rgb(255 255 255 / .10);
}
.p-screen {
  position: relative; block-size: 690px; overflow: hidden; border-radius: 42px; background: var(--card);
  display: flex; flex-direction: column; font-size: 14px; line-height: 1.5;
}
.p-island {
  position: absolute; z-index: 3; inset-block-start: 10px; inset-inline-start: 50%; translate: -50% 0;
  inline-size: 104px; block-size: 30px; border-radius: 20px; background: #000;
}
.p-sb {
  flex: none; display: flex; align-items: center; justify-content: space-between; block-size: 46px;
  padding: 4px 26px 0 34px; font-size: 14px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.p-sb-icons { display: flex; gap: 6px; align-items: center; }
.p-bars { inline-size: 16px; block-size: 10px; background: linear-gradient(to right, var(--ink) 0 3px, transparent 3px 4px, var(--ink) 4px 7px, transparent 7px 8px, var(--ink) 8px 11px, transparent 11px 12px, var(--ink) 12px 15px); clip-path: polygon(0 100%, 100% 0, 100% 100%); }
.p-batt { inline-size: 22px; block-size: 11px; border: 1px solid var(--muted); border-radius: 3px; background: linear-gradient(to right, var(--ink) 0 75%, transparent 75%); background-clip: content-box; padding: 1.5px; }
.p-app-head { flex: none; display: flex; align-items: center; gap: 8px; block-size: 36px; padding: 0 16px; font-size: 13.5px; font-weight: 600; }
.p-app-head .p-tile { inline-size: 20px; block-size: 20px; }
.p-view { flex: 1; min-block-size: 0; padding: 10px 14px 0; overflow: hidden; }
.p-view-title { font-size: 28px; line-height: 1.3; font-weight: 700; letter-spacing: -0.02em; }
.p-desc { margin-block-start: 2px; color: var(--muted); font-size: 13px; }
.p-group { margin-block-start: 18px; display: flex; flex-direction: column; gap: var(--space-bubble-gap); }
.p-label { padding-inline: 2px; color: var(--muted); font-size: 11.5px; line-height: 1.4; font-weight: 600; }
.p-b { padding: 10px 8px; display: grid; gap: 8px; }

.p-week { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin: 0; padding: 0; list-style: none; }
.p-week li {
  display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 0 8px;
  border: 1px solid transparent; border-radius: 10px;
}
.p-week li.today { border-color: var(--stroke); background: var(--card); }
.p-week li.today :is(.d, .n) { font-weight: 700; }
.p-week .d { color: var(--muted); font-size: 11px; font-weight: 600; line-height: 1.2; }
.p-week .n { font-size: 12.5px; font-weight: 500; line-height: 1.2; font-variant-numeric: tabular-nums; margin-block-end: 3px; }
.p-week i { display: block; inline-size: 10px; block-size: 10px; border: 1.5px solid var(--mark-strong); }
.p-week i.t { border-radius: 50%; inline-size: 11px; block-size: 11px; }
.p-week i.c { rotate: 45deg; inline-size: 8px; block-size: 8px; margin-block: 1px; }
.p-week i.done { background: var(--mark-strong); }
.p-week i.plan { background: transparent; }
.p-week i.miss { border-style: dashed; border-color: var(--mark-mid); }
.p-week i.none { border-color: transparent; }
.p-legend { padding-inline: 4px; color: var(--muted); font-size: 11.5px; }
.p-legend b { color: var(--ink); font-weight: 600; }

.p-list { display: grid; padding-block: 2px; }
.p-item { display: flex; align-items: center; gap: 12px; min-block-size: 58px; padding: 8px 12px; }
.p-item-body { display: grid; flex: 1; min-inline-size: 0; }
.p-item-title { font-weight: 600; }
.p-item-title--quiet { font-weight: 500; }
.p-item-sub { color: var(--muted); font-size: 12.5px; }
.p-chip-btn { padding: 4px 10px; border-radius: var(--radius-button); background: var(--fill); font-size: 12.5px; font-weight: 600; }
.p-ring {
  flex: none; display: grid; place-items: center; inline-size: 40px; block-size: 40px; border-radius: 50%;
  border: 4px solid var(--mark-track); font-size: 11.5px; font-weight: 600; font-variant-numeric: tabular-nums;
}
.p-ring--full { border-color: var(--mark-strong); }

.p-tabbar {
  position: absolute; inset-inline: 0; inset-block-end: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 2px; padding: 6px 8px 18px; background: var(--card);
}
.p-tab {
  display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 5px 0;
  border: 1px solid transparent; border-radius: var(--radius-control); color: var(--muted); font-size: 10.5px; font-weight: 500;
}
.p-tab.is-on { background: var(--bubble); border-color: var(--stroke); color: var(--ink); font-weight: 600; }
.g { display: block; inline-size: 18px; block-size: 18px; border: 1.6px solid currentColor; }
.g-today { border-radius: 2px; background: linear-gradient(currentColor, currentColor) 9px 9px / 4px 4px no-repeat; }
.g-train { border-width: 0; background: linear-gradient(currentColor, currentColor) center / 100% 1.6px no-repeat, linear-gradient(currentColor, currentColor) 3px center / 3px 10px no-repeat, linear-gradient(currentColor, currentColor) 12px center / 3px 10px no-repeat; }
.g-sleep { border-radius: 50%; border-inline-end-color: transparent; rotate: 30deg; }
.g-progress { border-width: 0 0 1.6px; background: linear-gradient(currentColor, currentColor) 2px 100% / 3px 40% no-repeat, linear-gradient(currentColor, currentColor) 7.5px 100% / 3px 65% no-repeat, linear-gradient(currentColor, currentColor) 13px 100% / 3px 90% no-repeat; }
.g-you { border-radius: 50% 50% 4px 4px; }
.p-caption { color: var(--muted); font-size: 12.5px; text-align: center; }

/* ---------- sections ---------- */
.p-section-head { display: grid; gap: 10px; margin-block-end: 32px; }
.p-muted { color: var(--muted); }

.p-steps { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; padding: 0; list-style: none; }
.p-steps > li { display: grid; gap: 12px; align-content: start; }
.p-steps h3 .n { color: var(--muted); font-variant-numeric: tabular-nums; margin-inline-end: 6px; }
.p-steps p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.p-vign {
  block-size: 132px; padding: 14px; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  overflow: hidden; border-radius: var(--radius-chat); font-size: 12.5px; line-height: 1.35;
}
.p-vign--center { align-items: center; }
.p-mini-you { align-self: flex-end; max-inline-size: 92%; padding: 7px 12px; border-radius: 16px; background: var(--ink); color: var(--card); }
.p-mini-agent { align-self: flex-start; max-inline-size: 92%; padding: 7px 12px; border-radius: 16px; background: var(--fill); }
.p-mini-row { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
.p-mini-row b { font-weight: 600; }
.p-mini-row .m { color: var(--muted); margin-inline-start: auto; font-variant-numeric: tabular-nums; }
.p-mini-btn { margin-inline-start: auto; padding: 4px 10px; border-radius: var(--radius-button); background: var(--ink); color: var(--card); font-weight: 600; }
.p-ring--big { inline-size: 72px; block-size: 72px; border-width: 5px; border-color: var(--mark-strong) var(--mark-strong) var(--mark-track) var(--mark-track); font-size: 16px; font-weight: 700; }
.p-mini-bars { display: flex; align-items: flex-end; gap: 6px; block-size: 64px; border-block-end: 1px solid var(--mark-track); }
.p-mini-bars i { flex: 1; background: var(--mark-strong); }
.p-mini-bars i:nth-child(-n+3) { background: transparent; border: 1.5px solid var(--mark-mid); border-block-end: 0; }

.p-areas { grid-template-columns: repeat(auto-fit, minmax(min(100%, 250px), 1fr)); }
.p-area { padding: 20px; display: grid; gap: 14px; align-content: start; border-radius: var(--radius-chat); }
.p-area > p { font-size: 14px; line-height: 1.5; color: var(--muted); }
.p-spec {
  min-block-size: 92px; display: flex; flex-direction: column; justify-content: center; gap: 8px;
  padding: 12px; border-radius: 12px; background: var(--card); font-size: 12.5px;
}
.p-area .p-no { font-size: 13px; }
.p-area .p-no b { color: var(--ink); font-weight: 600; }
.p-night { display: flex; gap: 2px; block-size: 16px; }
.p-night i { display: block; }
.p-night .asleep { background: var(--mark-strong); }
.p-night .bed { background: var(--mark-soft); }
.p-night .awake { border: 1.5px solid var(--mark-mid); }
.p-seg { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2px; padding: 2px; border-radius: var(--radius-control); background: var(--fill); }
.p-seg > span { padding: 5px 0; text-align: center; border: 1px solid transparent; border-radius: 8px; color: var(--muted); }
.p-seg > .on { background: var(--bubble); border-color: var(--stroke); color: var(--ink); font-weight: 600; }
.p-quote { font-size: 13.5px; line-height: 1.5; }

.p-listb { padding: 18px 20px; border-radius: var(--radius-chat); display: grid; gap: 10px; }
.p-listb ul { display: grid; gap: 8px; padding: 0 0 0 18px; font-size: 15px; line-height: 1.5; }
.p-listb li::marker { color: var(--muted); }
.p-rules { margin-block-start: 28px; max-inline-size: 760px; }

.p-hosts { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; list-style: none; }
.p-hosts li {
  display: inline-flex; align-items: center; gap: 8px; min-block-size: 36px; padding: 0 14px;
  border: 1px solid var(--stroke); border-radius: 999px; background: var(--bubble); font-size: 14px; font-weight: 500;
}
.p-hosts li span { color: var(--muted); font-size: 12px; font-weight: 400; }
.p-more { margin-block-start: 24px; color: var(--muted); }

/* ---------- narrower screens ---------- */
@media (width < 1024px) {
  .p-steps { grid-template-columns: repeat(auto-fit, minmax(min(100%, 200px), 1fr)); }
}
@media (width < 860px) {
  .doc-hero, .p-hero { grid-template-columns: minmax(0, 1fr); }
}
@media (width < 600px) {
  .type-hero { font-size: var(--type-page-hero-compact-size); }
  .type-section { font-size: var(--type-page-section-compact-size); }
  .doc-wrap { padding-inline: var(--space-page-gutter-compact); }
  .doc-section { padding-block-start: var(--space-page-section-compact); }
  .doc-hero { padding-block-start: 40px; }
  .p-cta .btn { flex: 1 1 auto; }
}
@media (width < 380px) {
  .p-phone { padding: 8px; border-radius: 46px; }
  .p-screen { border-radius: 38px; }
  .p-sb { padding-inline: 22px 20px; }
  .p-view { padding-inline: 10px; }
}