/* Warmer web pages. Chip-deck look from docs/store/DIRECTION.md:
   flat band colors, white strips, ink type, Inter Tight + Geist Mono. No shadows, gradients or blur. */
@font-face { font-family: "Inter Tight"; src: url("/fonts/InterTight.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono.woff2") format("woff2"); font-weight: 100 900; font-display: swap; }

:root {
  --cold: #23486B; --cool: #6FB3C9; --warm: #F4C430; --hot: #F07A26; --here: #D81E2C; --stop: #D9D9D6;
  --paper: #FFFFFF; --ink: #111111; --muted: #5C5C5C; --hairline: #CFCFCC;
  --sans: "Inter Tight", -apple-system, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --gutter: 16px;
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--paper); color: var(--ink); font: 400 17px/1.55 var(--sans); }
a { color: var(--ink); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }
img { display: block; max-width: 100%; }

.wrap { max-width: 1120px; margin: 0 auto; padding: 0 var(--gutter); }
@media (min-width: 720px) { :root { --gutter: 40px; } }

/* Five-stripe mark, same order as the app icon */
.stripes { display: grid; grid-template-columns: repeat(5, 1fr); height: 8px; }
.stripes i:nth-child(1) { background: var(--cold); } .stripes i:nth-child(2) { background: var(--cool); }
.stripes i:nth-child(3) { background: var(--warm); } .stripes i:nth-child(4) { background: var(--hot); }
.stripes i:nth-child(5) { background: var(--here); }

.mono { font-family: var(--mono); font-weight: 600; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }

header.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 64px; }
.brand { display: flex; align-items: center; gap: 10px; text-decoration: none; }
.brand img { width: 28px; height: 28px; border-radius: 7px; }
header.top nav { display: flex; gap: 20px; }
header.top nav a { text-decoration: none; }
header.top nav a:hover, header.top nav a[aria-current] { text-decoration: underline; }

/* Hero chip: flat field + white label strip */
.field { background: var(--hot); overflow: hidden; }
.field .wrap { display: flex; justify-content: center; padding-top: 48px; height: 440px; }
.phone { width: 300px; flex: none; border: 10px solid var(--ink); border-bottom: 0; border-radius: 48px 48px 0 0; overflow: hidden; background: var(--ink); align-self: flex-start; }
.phone img { width: 100%; height: auto; border-radius: 38px 38px 0 0; }
@media (min-width: 720px) { .field .wrap { height: 560px; padding-top: 64px; } .phone { width: 360px; } }

.label { border-bottom: 1px solid var(--hairline); }
.label .wrap { padding-top: 22px; padding-bottom: 40px; }
.label .row { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
h1 { font-weight: 700; font-size: clamp(40px, 7.4vw, 84px); line-height: 1; letter-spacing: -0.022em; margin: 0 0 20px; max-width: 13ch; }
.lede { font-size: 20px; line-height: 1.45; max-width: 36em; margin: 0 0 28px; }

.store { display: inline-flex; flex-direction: column; justify-content: center; min-height: 52px; padding: 8px 20px; background: var(--ink); color: var(--paper); border-radius: 10px; }
.store b { font-weight: 600; font-size: 18px; line-height: 1.2; }
.store small { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: #A3A3A3; }

/* Numbered sections, hairline rows like the app's lists */
section.part { border-bottom: 1px solid var(--hairline); }
section.part .wrap { display: grid; gap: 8px 40px; padding-top: 36px; padding-bottom: 40px; }
@media (min-width: 880px) { section.part .wrap { grid-template-columns: 260px 1fr; } }
section.part h2 { font-weight: 700; font-size: 30px; line-height: 1.1; letter-spacing: -0.015em; margin: 6px 0 0; }
.body { max-width: 40em; }
.body p { margin: 0 0 14px; }
.body h3 { font-weight: 600; font-size: 19px; margin: 22px 0 6px; }
.body h3:first-child { margin-top: 6px; }
ul.lines { list-style: none; margin: 0 0 18px; padding: 0; border-top: 1px solid var(--hairline); }
ul.lines li { padding: 12px 0 12px 28px; border-bottom: 1px solid var(--hairline); position: relative; }
ul.lines li::before { content: "\2013"; position: absolute; left: 4px; font-weight: 600; }
ul.lines.yes li::before { content: "+"; }

/* Band legend: five flat chips in one strip, no gaps */
.bands { display: grid; grid-template-columns: repeat(5, 1fr); margin: 6px 0 20px; }
.bands span { display: flex; align-items: flex-end; min-height: 92px; padding: 10px; font-weight: 700; font-size: 15px; line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; }
.bands .c1 { background: var(--cold); color: #fff; } .bands .c2 { background: var(--cool); }
.bands .c3 { background: var(--warm); } .bands .c4 { background: var(--hot); }
.bands .c5 { background: var(--here); color: #fff; }
@media (max-width: 420px) { .bands span { font-size: 12px; padding: 8px 6px; min-height: 76px; } }

table.plans { width: 100%; border-collapse: collapse; margin: 0 0 14px; border-top: 1px solid var(--hairline); }
table.plans td { padding: 12px 0; border-bottom: 1px solid var(--hairline); vertical-align: top; }
table.plans td:first-child { font-weight: 600; width: 34%; padding-right: 12px; }
table.plans td:nth-child(2) { font-family: var(--mono); font-size: 15px; white-space: nowrap; padding-right: 12px; }
table.plans td:last-child { color: var(--muted); }
@media (max-width: 560px) {
  table.plans tr { display: grid; grid-template-columns: 1fr auto; border-bottom: 1px solid var(--hairline); }
  table.plans td { border-bottom: 0; width: auto !important; }
  table.plans td:nth-child(2) { padding-right: 0; }
  table.plans td:last-child { grid-column: 1 / -1; padding-top: 0; font-size: 15px; }
}

.small { color: var(--muted); font-size: 15px; }

/* Legal pages */
.doc .wrap { max-width: 780px; }
.doc-head { padding: 40px 0 26px; border-bottom: 1px solid var(--hairline); margin-bottom: 8px; }
.doc-head h1 { font-size: clamp(38px, 7vw, 60px); max-width: none; margin: 14px 0 12px; }
.doc-head p { margin: 0; color: var(--muted); }
.doc h2 { font-weight: 700; font-size: 22px; letter-spacing: -0.01em; margin: 34px 0 8px; }
.doc p, .doc li { max-width: 40em; }
.doc ul { padding-left: 22px; }
.doc li { margin-bottom: 6px; }

footer { padding: 28px 0 40px; }
footer .wrap { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 12px 24px; }
footer a { text-decoration: none; } footer a:hover { text-decoration: underline; }
footer nav { display: flex; flex-wrap: wrap; gap: 8px 20px; }