/* The website's one stylesheet. Colours follow the phone app (src/design/tokens.ts): dark, with
   the brand green for the main action and for "live". System fonts only, so a visit sends nothing
   to a font service. No inline styles anywhere: the security headers allow only this file. */
:root {
  --bg: #0a0b0c;
  --card: #15171a;
  --card-2: #1b1e21;
  --border: #2a2e2b;
  --border-2: #3a3f3c;
  --text: #f5f5f3;
  --text-2: #c7cac7;
  --muted: #8d928f;
  --brand: #39b54a;
  --brand-hover: #4fc066;
  --brand-subtle: #0e3314;
  --on-brand: #06140a;
  --warn: #e8a33d;
  --warn-subtle: #3a2c0c;
  --danger: #f06a5f;
  --radius: 14px;
  color-scheme: dark;
  font-family: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.55;
  color: var(--text);
  background: var(--bg);
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body { margin: 0; background: var(--bg); overflow-x: hidden; }
a { color: var(--brand); text-decoration: none; }
a:hover { color: var(--brand-hover); text-decoration: underline; }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; }
img { max-width: 100%; }
.sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.icon { width: 22px; height: 22px; flex-shrink: 0; }

h1 { font-size: 2rem; line-height: 1.2; margin: 24px 0 12px; }
h2 { font-size: 1.3rem; margin: 40px 0 8px; }
h3 { font-size: 1.05rem; margin: 24px 0 4px; }
p, li { color: var(--text-2); }
strong { color: var(--text); }
.lead { font-size: 1.2rem; color: var(--text); }
.muted { color: var(--muted); }
.small { font-size: 0.9rem; }

/* Header: logo, links, Get the app. On a phone the links wrap to a second row. */
.top { max-width: 1120px; margin: 0 auto; padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 20px; }
.brand { display: inline-flex; align-items: center; gap: 10px; color: var(--text); font-weight: 700; font-size: 1.25rem; min-height: 44px; }
.brand:hover { color: var(--text); text-decoration: none; }
.mark { width: 32px; height: 32px; border-radius: 8px; }
.wordmark { height: 24px; width: auto; }
.top .button { margin-left: auto; }
.top nav { order: 3; width: 100%; display: flex; gap: 22px; }
.top nav a { color: var(--text-2); font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; }
.top nav a:hover { color: var(--text); }
@media (min-width: 720px) {
  .top nav { order: 0; width: auto; margin-left: auto; }
  .top .button { margin-left: 0; }
}

main { max-width: 760px; margin: 0 auto; padding: 0 16px 48px; }
main.wide { max-width: none; padding: 0; }
.wrap { max-width: 1120px; margin: 0 auto; padding-left: 16px; padding-right: 16px; }
.wrap.narrow { max-width: 760px; }

/* Buttons: at least 44 px tall. */
.button { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; font: inherit; font-weight: 700; background: var(--brand); color: var(--on-brand); border: 1px solid var(--brand); border-radius: 10px; padding: 10px 20px; cursor: pointer; text-align: center; }
.button:hover { background: var(--brand-hover); border-color: var(--brand-hover); color: var(--on-brand); text-decoration: none; }
.button:disabled { opacity: 0.5; cursor: default; }
.button.secondary { background: transparent; color: var(--text); border-color: var(--border-2); }
.button.secondary:hover { background: var(--card-2); color: var(--text); border-color: var(--muted); }
.top .button { min-height: 44px; padding: 8px 16px; font-size: 0.95rem; }
.actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 0; }
.stores { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 16px 0; }

.eyebrow { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; margin: 0 0 10px; font-size: 0.8rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand); }
.chip { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text); background: var(--card-2); border: 1px solid var(--border-2); }
.plan-tag { display: inline-block; vertical-align: middle; margin-left: 4px; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.03em; color: var(--text-2); border: 1px solid var(--border-2); white-space: nowrap; }

/* Home sections. */
.section { padding: 56px 0; border-top: 1px solid var(--border); }
.section h2 { font-size: clamp(1.55rem, 4.6vw, 2.2rem); line-height: 1.15; letter-spacing: -0.01em; margin: 0 0 16px; color: var(--text); text-wrap: balance; }

/* The phone frame, drawn in CSS around a screenshot (no maker's device artwork). */
.phone { width: 260px; max-width: 72vw; padding: 9px; border-radius: 40px; background: #16181b; border: 1px solid #34393a; box-shadow: 0 28px 60px -24px rgba(0, 0, 0, 0.85), inset 0 0 0 1px #000; margin: 0 auto; }
.phone img { display: block; width: 100%; height: auto; border-radius: 31px; background: var(--bg); }

.hero { display: grid; gap: 36px; padding-top: 28px; padding-bottom: 56px; }
.hero h1 { font-size: clamp(2rem, 7.4vw, 3.5rem); line-height: 1.06; letter-spacing: -0.025em; margin: 0 0 16px; text-wrap: balance; }
.hero .lead { max-width: 34em; margin: 0; text-wrap: pretty; }
.reassure { list-style: none; padding: 0; margin: 20px 0 0; display: flex; flex-wrap: wrap; gap: 6px 18px; }
.reassure li { display: inline-flex; align-items: center; gap: 6px; color: var(--text-2); font-size: 0.95rem; }
.reassure .icon { width: 18px; height: 18px; color: var(--brand); }
@media (min-width: 960px) {
  .hero { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; padding-top: 48px; padding-bottom: 80px; }
  .hero .phone { width: 300px; }
}

.why { display: grid; gap: 28px; }
.why p { max-width: 36em; text-wrap: pretty; }
.points { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; align-content: start; }
.points li { display: flex; gap: 14px; align-items: flex-start; background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 18px; }
.points .icon { color: var(--brand); margin-top: 2px; }
.points strong { display: block; }
.points span { display: block; color: var(--text-2); }
@media (min-width: 960px) { .why { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 56px; } }

.industries { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.industries li { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; display: grid; gap: 6px; align-content: start; }
.industries .icon { color: var(--brand); width: 26px; height: 26px; margin-bottom: 4px; }
.industries strong { font-size: 1.05rem; }
.industries span { color: var(--text-2); font-size: 0.95rem; }

.steps { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 40px; }
.steps li { display: grid; gap: 6px; justify-items: start; align-content: start; }
.steps h3 { margin: 6px 0 0; font-size: 1.15rem; color: var(--text); }
.steps p { margin: 0 0 18px; max-width: 26em; }
.steps .phone { width: 220px; }
.num { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: var(--brand-subtle); color: var(--brand); border: 1px solid var(--brand); font-weight: 800; }
@media (min-width: 720px) { .steps { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 28px; } .steps .phone { width: 100%; max-width: 230px; margin: 0; } }

.features { list-style: none; padding: 0; margin: 8px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); }
.features li { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; }
.features .icon { color: var(--brand); width: 26px; height: 26px; }
.features h3 { margin: 10px 0 4px; color: var(--text); }
.features p { margin: 0; font-size: 0.95rem; }

.spot { display: grid; gap: 24px; align-items: center; margin-top: 40px; background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 28px 20px; }
.spot h3 { margin: 0 0 8px; font-size: 1.3rem; color: var(--text); }
.spot p { margin: 0; max-width: 30em; }
.spot .phone { width: 230px; }
@media (min-width: 720px) {
  .spot { grid-template-columns: minmax(0, 1fr) auto; padding: 36px 48px; gap: 48px; }
  .spot:nth-of-type(even) { grid-template-columns: auto minmax(0, 1fr); }
  .spot:nth-of-type(even) .spot-text { order: 2; }
}

/* Pricing: radio buttons drive the Passes / Yearly toggle, so it works with no script at all. */
.pricing { position: relative; }
.bill-input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; }
.bill-toggle { display: inline-flex; gap: 4px; padding: 4px; margin: 8px 0 24px; background: var(--card); border: 1px solid var(--border); border-radius: 999px; }
.bill-toggle label { min-height: 44px; min-width: 104px; padding: 0 20px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; font-weight: 700; color: var(--text-2); cursor: pointer; }
.bill-toggle label:hover { color: var(--text); }
#bill-passes:checked ~ .bill-toggle label[for="bill-passes"],
#bill-yearly:checked ~ .bill-toggle label[for="bill-yearly"] { background: var(--brand); color: var(--on-brand); }
#bill-passes:focus-visible ~ .bill-toggle label[for="bill-passes"],
#bill-yearly:focus-visible ~ .bill-toggle label[for="bill-yearly"] { outline: 2px solid var(--brand); outline-offset: 3px; }
#bill-yearly:checked ~ .plans .only-passes,
#bill-passes:checked ~ .plans .only-yearly { display: none; }

.pprice { display: block; font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; color: var(--text); line-height: 1.15; }
.pprice small { font-size: 0.9rem; font-weight: 600; color: var(--muted); letter-spacing: 0; }
.pnote { display: block; font-size: 0.88rem; font-weight: 400; color: var(--muted); }
.tick { width: 20px; height: 20px; color: var(--brand); vertical-align: middle; }
.dash { color: var(--muted); }

/* The plan table, at every width. On phones the plan names stay at the top, the row names stay
   pinned at the left (only the plan columns slide, on the narrowest phones), the rows every plan
   shares become one line under the table, and the row names are shortened. */
.ptable-wrap { overflow-x: auto; overscroll-behavior-x: contain; margin: 0 -16px 8px; padding: 0 16px; }
.ptable { width: 100%; min-width: 300px; border-collapse: separate; border-spacing: 0; margin: 0 0 8px; font-size: 0.85rem; }
.ptable th, .ptable td { padding: 9px 6px; border-bottom: 1px solid var(--border); text-align: center; vertical-align: middle; color: var(--text); }
.ptable tbody th { position: sticky; left: 0; z-index: 1; background: var(--bg); text-align: left; font-weight: 500; color: var(--text-2); padding-left: 0; min-width: 84px; }
.ptable thead td { position: sticky; left: 0; z-index: 1; background: var(--bg); }
.ptable thead th { vertical-align: bottom; font-weight: 700; padding-top: 12px; padding-bottom: 12px; min-width: 64px; }
.ptable .pname { display: block; font-size: 0.85rem; line-height: 1.2; margin-bottom: 4px; }
.ptable .pprice { font-size: 1.1rem; }
.ptable .pprice small { display: block; font-size: 0.72rem; }
.ptable .pnote { display: none; }
.ptable .pop { background: rgba(57, 181, 74, 0.07); }
.ptable thead th.pop { border-top: 2px solid var(--brand); border-radius: 12px 12px 0 0; }
.ptable tbody tr:last-child .pop { border-radius: 0 0 12px 12px; }
.ptable .chip { display: none; border-color: var(--brand); color: var(--brand); }
.ptable .tick { width: 18px; height: 18px; }
.ptable .long { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ptable .shared { display: none; }
.every-plan { margin: 0 0 16px; font-size: 0.92rem; color: var(--text-2); }
@media (min-width: 960px) {
  .ptable-wrap { overflow: visible; margin: 0; padding: 0; }
  .ptable { table-layout: fixed; margin: 0 0 16px; font-size: 0.95rem; }
  .ptable th, .ptable td { padding: 12px 14px; }
  .ptable tbody th { position: static; width: 30%; padding-left: 14px; }
  .ptable thead td { position: static; }
  .ptable thead th { padding-top: 18px; padding-bottom: 18px; }
  .ptable .pname { font-size: 1.05rem; }
  .ptable .pprice { font-size: 1.9rem; }
  .ptable .pprice small { display: inline; font-size: 0.9rem; }
  .ptable .pnote { display: block; }
  .ptable .chip { display: inline-flex; margin-bottom: 8px; }
  .ptable .tick { width: 20px; height: 20px; }
  .ptable .long { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; }
  .ptable .short { display: none; }
  .ptable .shared { display: table-row; }
  .every-plan { display: none; }
}

.cta { background: var(--card); border: 1px solid var(--border); border-radius: 20px; padding: 36px 22px; text-align: center; }
.cta h2 { max-width: 20em; margin-left: auto; margin-right: auto; }
.cta .actions { justify-content: center; }
.cta .actions p { width: 100%; margin: 0; }
@media (min-width: 720px) { .cta { padding: 56px 48px; } }

/* Safety line: an icon and words, never colour alone. */
.safety { display: flex; gap: 12px; align-items: flex-start; border: 1px solid var(--warn); background: var(--warn-subtle); border-radius: 12px; padding: 14px 16px; color: var(--text); margin: 40px 0 56px; }
.safety .icon { color: var(--warn); margin-top: 2px; }
.draft { border: 1px solid var(--warn); background: var(--warn-subtle); color: var(--text); border-radius: 8px; padding: 12px 16px; }

/* Footer. */
.foot { border-top: 1px solid var(--border); color: var(--muted); font-size: 0.92rem; }
.foot-in { max-width: 1120px; margin: 0 auto; padding: 36px 16px 40px; display: grid; gap: 28px; }
.foot h2 { font-size: 0.78rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 4px; }
.foot nav a, .foot .contact a { display: flex; align-items: center; min-height: 44px; color: var(--text-2); }
.foot nav a:hover, .foot .contact a:hover { color: var(--text); }
.foot-brand p { margin: 8px 0 0; max-width: 22em; }
.foot-legal { grid-column: 1 / -1; border-top: 1px solid var(--border); padding-top: 20px; display: grid; gap: 8px; }
.foot-legal p { margin: 0; color: var(--muted); }
@media (min-width: 720px) { .foot-in { grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); } }

/* The legal pages' tables (who we share with, how long we keep it). */
main table { width: 100%; border-collapse: collapse; margin: 12px 0; font-size: 0.95rem; display: block; overflow-x: auto; }
main table th, main table td { text-align: left; vertical-align: top; padding: 8px 10px; border-bottom: 1px solid var(--border); color: var(--text-2); }
main table th { color: var(--text); }

/* The join page. */
.code { font-family: ui-monospace, 'IBM Plex Mono', Menlo, Consolas, monospace; font-size: 2.6rem; font-weight: 700; letter-spacing: 0.12em; color: var(--text); background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 12px 20px; display: inline-block; margin: 8px 0 16px; }

/* Questions (home and support). */
details { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 0 16px; margin: 8px 0; }
summary { cursor: pointer; font-weight: 600; color: var(--text); min-height: 52px; display: flex; align-items: center; padding: 10px 0; }
details p { margin: 0 0 14px; }

/* The delete-my-data form. */
form.request { background: var(--card); border: 1px solid var(--border); border-radius: 12px; padding: 20px; display: grid; gap: 16px; }
form.request label { display: grid; gap: 6px; font-weight: 600; color: var(--text); }
form.request label span { font-weight: 400; color: var(--muted); font-size: 0.9rem; }
input, textarea { font: inherit; color: var(--text); background: var(--bg); border: 1px solid var(--border); border-radius: 8px; padding: 10px 12px; width: 100%; min-height: 44px; }
textarea { min-height: 80px; resize: vertical; }
.robots { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.message { border-radius: 8px; padding: 12px; margin: 0; }
.message.ok { color: var(--text); border: 1px solid var(--brand); background: var(--brand-subtle); }
.message.error { color: var(--danger); border: 1px solid var(--danger); }

@media (max-width: 480px) {
  h1 { font-size: 1.8rem; }
  .code { font-size: 2rem; }
}

/* Narrow phones: a smaller logo so it and the Get the app button share one row. */
@media (max-width: 400px) {
  .mark { width: 28px; height: 28px; }
  .wordmark { height: 18px; }
}

/* Phones: the long sections (industries, steps, features, the two spotlights, plan cards) become
   rows you swipe sideways, with the next card peeking in at the edge, so the page is far shorter.
   Only the row scrolls sideways, never the page. Wider screens keep the grids above. */
.swipe-hint { display: none; }
@media (max-width: 719px) {
  .rail { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; margin-left: -16px; margin-right: -16px; padding: 2px 16px 8px; scroll-padding: 0 16px; }
  .rail::-webkit-scrollbar { display: none; }
  .rail > * { flex: 0 0 84%; scroll-snap-align: start; }
  .steps.rail > li { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 18px; justify-items: center; text-align: center; }
  .steps.rail .num { justify-self: center; }
  .steps.rail .phone { width: 190px; }
  .spots { margin-top: 32px; }
  .spots .spot { margin-top: 0; padding: 22px 18px; }
  .spots .phone { width: 190px; }
  .swipe-hint { display: block; margin: 6px 0 0; text-align: right; font-size: 0.85rem; color: var(--muted); }
}

/* "One plan, whole crew": a short, centred band straight after the hero. */
.oneplan { text-align: center; background: var(--brand-subtle); border-top-color: var(--brand); border-bottom: 1px solid var(--brand); padding: 40px 0; }
.oneplan .eyebrow { justify-content: center; }
.oneplan h2 { margin-bottom: 10px; }
.oneplan p:last-child { margin: 0 auto; max-width: 34em; color: var(--text); font-size: 1.05rem; }