/* StarLive Go — site styles. Dark "viewfinder" world, single theme, painted explicitly. */
:root {
  --ink: #0a0d0c;
  --panel: #141917;
  --panel-2: #1c2320;
  --line: #27302c;
  --mist: #e6ece8;
  --slate: #8a968f;
  --signal: #4ac76b;
  --signal-ink: #0a2a14;
  --tally: #e5322d;
  --font-display: "Bricolage Grotesque", "Helvetica Neue", Arial, sans-serif;
  --font-body: "Public Sans", "Helvetica Neue", Arial, sans-serif;
  --font-mono: "JetBrains Mono", "SF Mono", Menlo, Consolas, monospace;
  --measure: 62ch;
  --radius: 14px;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation: none !important; transition: none !important; } }

body {
  margin: 0;
  background: var(--ink);
  color: var(--mist);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  padding-inline: clamp(16px, 4vw, 40px);
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; height: auto; display: block; }
a { color: var(--signal); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:focus-visible, button:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; }

h1, h2, h3 { font-family: var(--font-display); text-wrap: balance; margin: 0; line-height: 1.05; letter-spacing: -0.01em; }
h1 { font-size: clamp(2.4rem, 6vw, 4.6rem); font-weight: 800; }
h2 { font-size: clamp(1.7rem, 3.4vw, 2.6rem); font-weight: 700; }
h3 { font-size: 1.15rem; font-weight: 600; line-height: 1.3; }
p { margin: 0; max-width: var(--measure); }
.muted { color: var(--slate); }
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }
.eyebrow { font-family: var(--font-mono); font-size: 0.74rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--slate); }

.wrap { max-width: 1120px; margin-inline: auto; }
section { padding-block: clamp(56px, 8vw, 104px); border-top: 1px solid var(--line); }
.section-head { display: grid; gap: 14px; margin-bottom: clamp(28px, 4vw, 48px); max-width: 720px; }

/* Top bar */
.topbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-block: 18px; }
.brand { display: flex; align-items: center; gap: 12px; color: var(--mist); text-decoration: none; font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; }
.brand img { width: 36px; height: 36px; border-radius: 9px; }
.nav { display: flex; gap: 22px; flex-wrap: wrap; font-size: 0.95rem; }
.nav a { color: var(--slate); text-decoration: none; }
.nav a:hover { color: var(--mist); }

/* Tally / LIVE pill — the app's own status chrome */
.tally { display: inline-flex; align-items: center; gap: 8px; background: var(--tally); color: #fff; font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; letter-spacing: 0.04em; padding: 6px 12px; border-radius: 999px; }
.tally::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: #fff; animation: blink 1.6s steps(1) infinite; }
@keyframes blink { 50% { opacity: 0.25; } }

/* Buttons */
.btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 20px; border-radius: 999px; font-weight: 600; text-decoration: none; font-size: 0.98rem; border: 1px solid transparent; }
.btn-primary { background: var(--signal); color: var(--signal-ink); }
.btn-primary:hover { background: #5fd57e; }
.btn-ghost { border-color: var(--line); color: var(--mist); }
.btn-ghost:hover { border-color: var(--slate); }
.btn svg { width: 20px; height: 20px; }

/* Hero */
.hero { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: clamp(28px, 5vw, 72px); align-items: center; padding-block: clamp(32px, 6vw, 80px); border-top: 0; }
.hero-copy { display: grid; gap: 22px; }
.hero-copy .lede { font-size: 1.15rem; color: var(--slate); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-meta { display: flex; gap: 18px; flex-wrap: wrap; font-size: 0.85rem; color: var(--slate); }
.phone { position: relative; justify-self: center; width: min(100%, 340px); }
.phone img { border-radius: 36px; border: 1px solid var(--line); box-shadow: 0 30px 80px rgba(0,0,0,0.55); }

/* Destinations */
.dest-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; }
.dest { display: grid; grid-template-columns: auto 1fr; gap: 12px 14px; align-items: start; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 16px 18px; }
.dest .dot { width: 12px; height: 12px; border-radius: 50%; margin-top: 6px; }
.dest strong { display: block; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; }
.dest code { display: block; font-family: var(--font-mono); font-size: 0.74rem; color: var(--slate); margin-top: 6px; overflow-wrap: anywhere; }

/* Widgets — rebuilt with the app's overlay chrome */
.widget-stage { position: relative; border-radius: 20px; overflow: hidden; border: 1px solid var(--line); background: #223026 url("03-record.jpg") center/cover; min-height: 420px; padding: 20px; display: grid; grid-template-rows: auto 1fr auto; }
.widget-row { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.widget-row.bottom { align-items: flex-end; }
.chip { color: #fff; background: rgba(0,0,0,0.58); border: 1px solid rgba(255,255,255,0.18); border-radius: 14px; padding: 9px 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.35); font-family: var(--font-body); }
.chip .big { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; line-height: 1.05; font-variant-numeric: tabular-nums; }
.chip .sub { font-size: 0.78rem; font-weight: 600; opacity: 0.9; }
.chip .details { font-size: 0.68rem; opacity: 0.85; display: flex; gap: 8px; margin-top: 3px; }
.chip.weather { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.chip.weather .icon { font-size: 1.8rem; }
.chip.clock { text-align: right; }
.chip.motion { display: flex; gap: 16px; }
.chip.motion .cell { text-align: center; min-width: 54px; }
.chip.motion .cell .u { font-size: 0.66rem; font-weight: 600; opacity: 0.8; margin-left: 2px; }
.chip.motion .cell .lab { font-size: 0.56rem; font-weight: 800; letter-spacing: 0.08em; opacity: 0.6; }
.chip.place { display: grid; grid-template-columns: auto 1fr; gap: 10px; align-items: center; }
.chip.place .map { width: 84px; height: 52px; border-radius: 8px; background: linear-gradient(135deg, #2f4f45, #1f3a34); position: relative; }
.chip.place .map::after { content: ""; position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; margin: -5px; border-radius: 50%; background: #3b82f6; box-shadow: 0 0 0 2px #fff, 0 0 0 8px rgba(59,130,246,0.25); }
.chip.place .name { font-family: var(--font-display); font-weight: 700; font-size: 0.95rem; }
.chip.place .coords { font-family: var(--font-mono); font-size: 0.66rem; opacity: 0.7; }
.widget-list { display: grid; gap: 18px; align-content: start; }
.widget-list article { display: grid; grid-template-columns: 40px 1fr; gap: 14px; align-items: start; }
.widget-list .glyph { width: 40px; height: 40px; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); display: grid; place-items: center; color: var(--signal); }
.widget-list .glyph svg { width: 20px; height: 20px; }
.two-col { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: clamp(24px, 4vw, 56px); align-items: start; }

/* Feature strip */
.feature-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px; }
.feature { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px; display: grid; gap: 10px; }
.feature .stat { font-family: var(--font-display); font-weight: 800; font-size: 1.9rem; color: var(--signal); line-height: 1; }
.feature p { font-size: 0.95rem; color: var(--slate); }

/* Screens */
.screens { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.screens figure { margin: 0; display: grid; gap: 10px; }
.screens img { border-radius: 22px; border: 1px solid var(--line); }
.screens figcaption { font-size: 0.85rem; color: var(--slate); }

/* Pricing */
.plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.plan { border: 1px solid var(--line); border-radius: var(--radius); padding: 24px; display: grid; gap: 16px; background: var(--panel); }
.plan.pro { border-color: var(--signal); box-shadow: 0 0 0 1px var(--signal) inset; }
.plan .price { font-family: var(--font-display); font-weight: 800; font-size: 2.2rem; line-height: 1; }
.plan .price small { font-family: var(--font-body); font-weight: 500; font-size: 0.95rem; color: var(--slate); margin-left: 6px; }
.plan ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; font-size: 0.95rem; }
.plan li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; align-items: start; }
.plan li svg { width: 18px; height: 18px; margin-top: 3px; }
.plan li.limit svg { color: var(--tally); }
.plan li.ok svg { color: var(--signal); }
.plan .fine { font-size: 0.8rem; color: var(--slate); }

/* Download / footer */
.download { display: grid; gap: 22px; justify-items: start; }
footer { border-top: 1px solid var(--line); padding-block: 28px 40px; display: flex; flex-wrap: wrap; gap: 14px 28px; justify-content: space-between; font-size: 0.85rem; color: var(--slate); }
footer a { color: var(--slate); }

/* Document pages (privacy, support) */
.doc { max-width: 720px; margin-inline: auto; padding-block: clamp(28px, 5vw, 64px); display: grid; gap: 28px; }
.doc header { display: grid; gap: 12px; }
.doc h2 { font-size: 1.45rem; margin-top: 18px; }
.doc h3 { margin-top: 10px; }
.doc p, .doc li { max-width: none; }
.doc ul { padding-left: 22px; margin: 0; display: grid; gap: 6px; }
.doc .toc { display: flex; flex-wrap: wrap; gap: 8px 16px; font-size: 0.9rem; }
.faq details { border-top: 1px solid var(--line); padding-block: 14px; }
.faq details:last-child { border-bottom: 1px solid var(--line); }
.faq summary { cursor: pointer; font-family: var(--font-display); font-weight: 600; font-size: 1.05rem; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::after { content: "+"; color: var(--signal); font-weight: 400; }
.faq details[open] summary::after { content: "–"; }
.faq details > *:not(summary) { margin-top: 10px; color: var(--mist); }
.faq code { font-family: var(--font-mono); font-size: 0.85em; background: var(--panel-2); padding: 1px 6px; border-radius: 5px; }
.callout { border-left: 3px solid var(--signal); background: var(--panel); padding: 14px 18px; border-radius: 0 10px 10px 0; }

@media (max-width: 820px) {
  .hero, .two-col { grid-template-columns: 1fr; }
  .phone { order: -1; width: min(100%, 300px); }
  .widget-stage { min-height: 380px; }
}
@media (max-width: 480px) {
  body { font-size: 16px; }
  .chip.motion { flex-wrap: wrap; gap: 12px; }
  .nav { gap: 14px; }
}