:root {
  --ink: #111318;
  --muted: #74777e;
  --soft: #f5f6f5;
  --card: #ffffff;
  --border: rgba(17,19,24,.075);
  --green: #18ad68;
  --green-deep: #0b8c53;
  --green-soft: #eaf8f0;
  --shadow: 0 18px 50px rgba(17,19,24,.07), 0 2px 8px rgba(17,19,24,.035);
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  color: var(--ink);
  background: #fbfbfa;
  line-height: 1.55;
}
a { color: var(--green-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
a:focus-visible, button:focus-visible, input:focus-visible { outline: 3px solid rgba(24,173,104,.23); outline-offset: 3px; }
.shell { max-width: 760px; margin: 0 auto; padding: 28px 20px 56px; }
/* The old `.hero` (a rounded card whose photograph came from a CSS
   `url('/images/…')`) is DELETED along with its `.eyebrow`. Nothing referenced it
   after the full-bleed rewrite, and leaving it was a live hazard rather than dead
   weight: deploy_site_prototype.sh rewrites `src="/images/…"` in HTML but never
   touches styles.css, so that one declaration would have pointed the sandbox at
   the REAL site's hero -- exactly the cross-contamination the prototype's own
   README says the rewrites exist to prevent. The support hero is an <img> now,
   which the rewrite does cover. */
.page-header { padding:16px 4px 28px; }
.page-header h1 { font-size:clamp(34px, 6vw, 48px); line-height:1.05; letter-spacing:-.04em; }
.page-header .subtitle { color:var(--muted); font-size:17px; margin-top:8px; }
.page-header .updated { color:#a0a2a7; font-size:13px; margin-top:14px; }
.card { background:var(--card); border:1px solid var(--border); border-radius:22px; box-shadow:0 6px 24px rgba(17,19,24,.035); padding:26px; margin-bottom:16px; }
.card h2 { font-size:21px; line-height:1.15; letter-spacing:-.025em; margin-bottom:12px; }
.card h3 { font-size:16px; margin:18px 0 5px; }
.card h3:first-of-type { margin-top:0; }
.card p, .card li { color:#555960; font-size:15.5px; }
.card p { margin-bottom:9px; }
.card p:last-child { margin-bottom:0; }
.card ul { margin:5px 0 8px 20px; }
.card li { margin-bottom:5px; }
.card strong { color:var(--ink); }
.callout { background:var(--green-soft); border-color:rgba(24,173,104,.18); }
.callout-neutral { background:#f4f4f3; }
.safety { background:#fff8ee; border-color:#f0dfc7; }
.section-title { font-size:15px; font-weight:800; margin:30px 4px 12px; letter-spacing:-.01em; }
/* The table of contents.
   REPLACED 2026-09-10: this was a two-up grid of tall cards -- icon stacked
   ABOVE the label, ~116px of card each, so six topics filled a phone screen and
   a half and the page read as tiles rather than a menu. The mock (and the app's
   own Help & support list, which a person has already seen) is a LIST: tile on
   the left, title and one line of plain language beside it, chevron on the
   right, hairline between rows. Same six destinations, a third of the height. */
.toc { background:var(--card); border:1px solid var(--border); border-radius:20px; overflow:hidden; margin-bottom:20px; box-shadow:0 6px 24px rgba(17,19,24,.035); }
.toc-row { display:flex; align-items:center; gap:14px; padding:13px 16px; color:var(--ink); }
.toc-row + .toc-row { border-top:1px solid var(--border); }
.toc-row:hover { text-decoration:none; background:#fafbfa; }
.toc-row:active { background:#f4f5f4; }
.icon-box { flex:0 0 auto; width:42px; height:42px; border-radius:12px; background:var(--green-soft); display:grid; place-items:center; color:var(--green-deep); }
.icon-box svg { width:22px; height:22px; }
.toc-text { flex:1 1 auto; min-width:0; }
.toc-text b { display:block; font-size:16px; font-weight:700; letter-spacing:-.01em; line-height:1.25; }
.toc-text span { display:block; color:var(--muted); font-size:13.5px; line-height:1.35; margin-top:1px; }
.chev { flex:0 0 auto; width:17px; height:17px; color:#c3c5c9; }
.tip { background:#f6f6f5; border-radius:14px; padding:13px 15px; margin:12px 0 4px; }
.tip p { margin:0; font-size:14px; }
.contact-row { display:flex; flex-wrap:wrap; gap:10px; margin-top:16px; }
.btn { min-height:46px; border-radius:14px; padding:0 20px; display:inline-flex; align-items:center; justify-content:center; gap:8px; font-size:15px; font-weight:750; border:0; cursor:pointer; font-family:inherit; transition:transform .12s ease, opacity .12s ease; }
.btn:hover { text-decoration:none; }
.btn:active { transform:translateY(1px); }
.btn-primary { color:white; background:#111; box-shadow:0 5px 16px rgba(17,17,17,.12); }
.btn-green { color:white; background:var(--green); }
.btn-secondary { color:var(--ink); background:#f1f2f1; }
.form-label { display:block; font-size:13px; font-weight:700; margin:16px 0 7px; }
input[type=email] { width:100%; height:50px; border:1px solid var(--border); border-radius:14px; padding:0 15px; font:inherit; font-size:16px; background:#f7f7f6; color:var(--ink); }
.form-note,.unsub-note { color:var(--muted); font-size:12.5px; margin-top:10px; }
.status { font-size:14px; margin-top:11px; }
.status-success { color:var(--green-deep); font-weight:650; }
.status-error { color:#d94645; font-weight:650; }
.spinner { width:14px; height:14px; display:inline-block; border:2px solid rgba(24,173,104,.2); border-top-color:var(--green); border-radius:50%; animation:spin .8s linear infinite; vertical-align:-2px; }
@keyframes spin { to { transform:rotate(360deg); } }
.product-card { text-align:center; }
.product-card .product-label { font-size:11px; font-weight:800; text-transform:uppercase; letter-spacing:.12em; color:#9a9da3; }
.product-card h2 { font-size:32px; margin:10px 0 4px; }
.product-card .brand-line { font-size:21px; font-weight:760; color:var(--ink); letter-spacing:-.025em; margin-bottom:8px; }
.product-card .product-desc { color:var(--muted); font-size:16px; max-width:480px; margin:0 auto 20px; }
.footer-links { display:flex; gap:18px; justify-content:center; flex-wrap:wrap; margin-top:28px; }
.footer-links a { color:#8d9096; font-size:13px; font-weight:600; }
footer { color:#b1b3b7; text-align:center; font-size:12px; margin-top:12px; }
/* The hero runs FULL BLEED and is the first thing on the page.
   The Turns wordmark + hamburger row that used to sit above it is GONE (Amit,
   2026-09-10): on a phone it spent a whole row restating the name the hero
   already says, and its menu duplicated the footer links. Live has no header on
   these pages either, so removing it also made privacy and terms byte-identical
   in content to live -- the nav had been their only remaining difference. */
.support-hero { position:relative; background:#0d2638; line-height:0; }
.support-hero img { display:block; width:100%; height:clamp(210px, 34vw, 320px); object-fit:cover; object-position:center 58%; }
.support-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,.02) 30%,rgba(0,0,0,.62)); }
/* The overlay shares the shell's column so "Help & Support" lines up with the
   table of contents below it. Pinned to the viewport edge instead, a wide
   desktop window leaves the title stranded far left of the content. */
.support-hero-overlay { position:absolute; z-index:1; bottom:0; left:0; right:0; max-width:760px; margin:0 auto; padding:22px 20px; color:#fff; line-height:1.2; }
.support-hero h1 { font-size:clamp(32px, 7.6vw, 44px); letter-spacing:-.04em; line-height:1.03; }
.support-hero p { color:rgba(255,255,255,.88); margin-top:6px; font-size:16px; }
/* The support page's hero is full bleed, so its shell must not re-add a top gap. */
.support-hero + .shell { padding-top:18px; }

/* Homepage bits ported from the live tree's inline styles. */
.shell-centered { text-align:center; }
.brand-logo img { width:76px; height:76px; border-radius:20px; }
.home-title { font-size:clamp(30px,6vw,40px); letter-spacing:-.035em; margin-top:16px; }
.tagline { color:var(--muted); font-size:16px; margin-top:8px; margin-bottom:26px; }
.product-name { font-size:30px; letter-spacing:-.03em; margin:8px 0 4px; }
.contact-row-centered { justify-content:center; }

/* Live's contact pill, carried over with the copy it belongs to. */
.contact-pill { display:inline-flex; align-items:center; gap:9px; margin-top:14px; padding:11px 16px; border:1px solid var(--border); border-radius:14px; background:#f7f7f6; color:var(--ink); font-weight:650; font-size:15px; }
.contact-pill:hover { text-decoration:none; border-color:rgba(24,173,104,.28); }
@media (max-width:560px) {
  .shell { padding:20px 15px 42px; }
  .card { padding:21px; border-radius:19px; }
  .toc-row { padding:12px 14px; gap:12px; }
  .support-hero-overlay { padding:18px 16px; }
}