/* landing.css — the public landing page at "/" for people who aren't signed in.
   Same palette as the app. Archivo for headlines, Atkinson Hyperlegible (built for readability) for text.
   The design source lives on the "Panic landing page" Design canvas; keep the two in step. */
:root {
  --night: #0a0d14; --night-2: #151a24; --night-3: #222a38; --line: #2c3546;
  --ink: #ffffff; --soft: #d2d9e4; --mute: #9aa6b8;
  --amber: #ffd100; --amber-ink: #141100; --red: #e00122; --red-deep: #a8001c; --red-card: #820016; --red-soft: #ffd3d9;
  --green: #3ccb8f; --green-ink: #052016;
  --police: #0033a0; --police-soft: #ffffff; --police-bg: #0033a0; --police-panel: #00267a; --police-line: #2552b8; --police-mute: #c4d4ff;
  --display: 'Archivo', 'Arial Narrow', system-ui, sans-serif;
  --body: 'Atkinson Hyperlegible', system-ui, -apple-system, sans-serif;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--night); color: var(--ink); font-family: var(--body); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: var(--amber); }
a:hover { color: #ffe066; }
:focus-visible { outline: 3px solid var(--amber); outline-offset: 3px; }
h1, h2, h3 { margin: 0; }
p, ul { margin: 0; }
.wrap { max-width: 1200px; margin: 0 auto; padding-inline: 24px; }
.band { background: var(--night-2); }
.band.red { background: var(--red-deep); }
.band.amber { background: var(--amber); color: var(--amber-ink); }

.h2 { font-family: var(--display); font-stretch: 90%; font-weight: 800; font-size: clamp(34px, 4vw, 52px); line-height: 1.05; letter-spacing: -0.02em; text-wrap: balance; }
.soft { color: var(--soft); }
.mute { color: var(--mute); }

.btn { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 14px 24px; border-radius: 14px; font-weight: 700; text-decoration: none; }
.btn.big { font-size: 19px; padding: 18px 28px; }
.btn.amber { background: var(--amber); color: var(--amber-ink); }
.btn.dark { background: var(--night-3); color: var(--ink); }
.btn.night { background: var(--night); color: var(--ink); }
.btn.block { display: flex; width: 100%; }

/* Header */
.top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding-block: 22px; }
/* The logo: "Panic" in white inside a solid red circle; the "i" is black. */
.logo { display: inline-flex; align-items: center; justify-content: center; white-space: nowrap; width: 3.2em; height: 3.2em; border-radius: 50%; background: var(--red);
  font-family: var(--display); font-weight: 900; font-size: 22px; letter-spacing: -0.04em; line-height: 1; color: #fff; text-decoration: none;
  box-shadow: 0 0 0 0.16em var(--night), 0 0 0 0.4em rgba(224, 1, 34, 0.3), 0 0 0 0.66em rgba(224, 1, 34, 0.12); margin: 0.66em; }
.logo i { font-style: normal; color: #000; }
.top nav { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 16px; }
.top nav a { color: #b7c3d4; text-decoration: none; }
.top nav a.strong { color: var(--ink); font-weight: 700; }
.top nav a.btn { color: var(--amber-ink); }

/* Hero */
.hero { display: flex; flex-wrap: wrap; gap: 56px; align-items: center; padding-block: 56px 96px; }
.hero-copy { flex: 999 1 520px; min-width: 0; display: flex; flex-direction: column; gap: 28px; }
.hero h1 { font-family: var(--display); font-stretch: 85%; font-weight: 900; font-size: clamp(46px, 6.4vw, 88px); line-height: 0.98; letter-spacing: -0.025em; text-wrap: balance; }
.lede { font-size: 21px; color: var(--soft); max-width: 34em; }
.ctas { display: flex; flex-wrap: wrap; gap: 12px; }
.hero-art { flex: 1 1 340px; min-width: 0; display: flex; justify-content: center; position: relative; padding-bottom: 40px; }

.phone { width: 320px; max-width: 100%; border-radius: 44px; background: var(--police-bg); border: 10px solid #05080e; box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5); padding: 30px 22px 26px; display: flex; flex-direction: column; gap: 18px; }
.phone-top { display: flex; justify-content: space-between; align-items: center; }
.phone-top .logo { font-size: 13px; box-shadow: 0 0 0 0.16em var(--police-bg), 0 0 0 0.4em rgba(224, 1, 34, 0.3), 0 0 0 0.66em rgba(224, 1, 34, 0.12); }
.phone-top small { font-size: 12px; color: var(--police-mute); }
.phone-clock { text-align: center; }
.phone-clock b { display: block; font-size: 15px; }
.phone-clock small { display: block; font-size: 13px; color: var(--police-mute); }
.phone-clock .num { font-family: var(--display); font-weight: 800; font-size: 64px; letter-spacing: -0.04em; color: var(--police-soft); line-height: 1.05; font-variant-numeric: tabular-nums; }
.phone-clock .sub { font-size: 13px; }
.stops { background: var(--police-panel); border-radius: 16px; padding: 6px 14px; list-style: none; }
.stops li { display: flex; align-items: center; gap: 10px; padding: 9px 0; font-size: 14px; }
.stops li + li { border-top: 1px solid var(--police-line); }
.stops .dot { width: 12px; height: 12px; border-radius: 50%; flex: none; border: 2px solid var(--amber); }
.stops .done .dot { background: var(--green); border-color: var(--green); }
.stops .done span:last-child { color: var(--police-mute); text-decoration: line-through; }
.stops .made { margin-left: auto; font-size: 12px; font-weight: 700; background: var(--green); color: var(--green-ink); padding: 5px 10px; border-radius: 8px; }
.pill { text-align: center; font-weight: 700; padding: 14px; border-radius: 14px; }
.pill.green { background: var(--green); color: var(--green-ink); }
.pill.red { background: var(--red); color: #fff; }
.sms { position: absolute; right: 0; bottom: 0; width: 290px; max-width: 86%; background: var(--ink); color: #121a26; border-radius: 18px 18px 4px 18px; padding: 14px 16px; font-size: 14px; line-height: 1.45; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); }
.sms small { display: block; font-size: 12px; color: #5a6a80; margin-bottom: 4px; }
.sms b { color: var(--red); }

/* Sections */
.section { padding-block: 92px; display: flex; flex-direction: column; gap: 40px; }
.steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 20px; list-style: none; padding: 0; }
.steps li { background: var(--night); border-radius: 20px; padding: 28px; display: flex; flex-direction: column; gap: 12px; }
.steps .n { font-family: var(--display); font-weight: 900; font-size: 44px; color: var(--amber); line-height: 1; }
.steps h3 { font-size: 22px; }
.features { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 36px 40px; }
.feature { display: flex; flex-direction: column; gap: 8px; border-top: 3px solid var(--red); padding-top: 18px; }
.feature.amber { border-color: var(--amber); }
.feature.green { border-color: var(--green); }
.feature h3 { font-size: 21px; }

.split { display: flex; flex-wrap: wrap; gap: 48px; align-items: center; }
.split > :first-child { flex: 999 1 440px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.split > :last-child { flex: 1 1 320px; min-width: 0; }
.red-soft { color: var(--red-soft); max-width: 32em; }
.alert-card { background: var(--red-card); border-radius: 22px; padding: 26px; display: flex; flex-direction: column; gap: 14px; }
.alert-card h3 { font-family: var(--display); font-weight: 800; font-size: 30px; line-height: 1.1; }
.alert-card small { font-size: 13px; color: var(--red-soft); }
.person { display: flex; align-items: center; gap: 12px; background: rgba(255, 255, 255, 0.08); border-radius: 14px; padding: 12px; }
.avatar { width: 40px; height: 40px; border-radius: 50%; background: var(--night-3); display: grid; place-items: center; font-weight: 700; flex: none; }
.person b { display: block; font-size: 15px; }
.person span span { font-size: 13px; color: var(--red-soft); }

.privacy { display: flex; flex-wrap: wrap; gap: 48px; padding-block: 92px; }
.privacy > * { flex: 1 1 400px; min-width: 0; display: flex; flex-direction: column; gap: 22px; }

/* Pricing: one table, a column per plan, so you can see where each feature starts and how it grows */
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.compare-wrap { overflow-x: auto; margin-top: 8px; border-radius: 22px; background: var(--night); -webkit-overflow-scrolling: touch; }
.compare { width: 100%; min-width: 720px; border-collapse: separate; border-spacing: 0; font-size: 16px; }
.compare th, .compare td { padding: 14px 16px; text-align: center; vertical-align: middle; border-bottom: 1px solid var(--line); }
.compare tbody th { text-align: left; font-weight: 400; color: var(--soft); width: 32%; }
.compare tbody th small { display: block; font-size: 13px; color: var(--mute); }
.compare tbody td { color: var(--ink); font-weight: 700; }
.compare thead th { vertical-align: top; padding: 24px 14px 20px; border-bottom: 2px solid var(--line); }
.compare thead th > * { display: block; }
.compare .pname { font-family: var(--display); font-weight: 800; font-size: 24px; min-height: 52px; }
.compare .pname em { display: block; font-style: normal; font-family: var(--body); font-size: 12px; font-weight: 700; color: var(--amber); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 2px; }
.compare .pprice { font-family: var(--display); font-weight: 800; font-size: 30px; margin-top: 10px; }
.compare .pprice small { font-size: 15px; color: var(--mute); font-family: var(--body); font-weight: 400; }
.compare .pyear { font-size: 14px; color: var(--mute); margin-bottom: 14px; }
.compare thead .btn { display: inline-flex; padding: 10px 14px; font-size: 15px; white-space: nowrap; }
.compare th.featured, .compare td.featured { background: rgba(255, 209, 0, 0.06); }
.compare thead th.featured { box-shadow: inset 0 3px 0 var(--amber); }
.compare tr.group th { text-align: left; font-family: var(--display); font-weight: 800; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber); padding-top: 26px; background: var(--night); }
.compare .yes { color: var(--green); font-size: 20px; }
.compare .no { color: var(--line); }
/* Phones: the feature names stay put while the plans scroll sideways */
.swipe { display: none; }
@media (max-width: 760px) {
  .swipe { display: block; }
  .compare { min-width: 640px; font-size: 15px; }
  .compare th, .compare td { padding: 12px 10px; }
  .compare tbody th, .compare thead td { position: sticky; left: 0; z-index: 1; background: var(--night); }
  .compare tbody th { width: 128px; min-width: 128px; }
}

.faq { max-width: 860px; margin: 0 auto; padding: 92px 24px; display: flex; flex-direction: column; gap: 28px; }
.faq div { display: flex; flex-direction: column; gap: 6px; border-top: 1px solid var(--line); padding-top: 20px; }
.faq h3 { font-size: 20px; }

.closer { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 24px; padding-block: 72px; }
.closer .h2 { font-weight: 900; max-width: 14em; }

.foot { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; padding-block: 36px 48px; font-size: 15px; color: var(--mute); }
.foot nav { display: flex; flex-wrap: wrap; gap: 20px; }
.foot a { color: #b7c3d4; }

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
.small { font-size: 15px; }

/* Privacy policy and Terms (/privacy, /terms) */
.legal { max-width: 760px; padding-block: 24px 48px; }
.legal > * + * { margin-top: 36px; }
.legal h1 + p { margin-top: 12px; }
.legal h2 { font-family: var(--display); font-weight: 800; font-size: 26px; line-height: 1.15; }
.legal h3 { font-size: 18px; margin-top: 18px; }
.legal section > * + * { margin-top: 12px; }
.legal ul { padding-left: 22px; }
.legal li + li { margin-top: 8px; }
.legal p, .legal li { color: var(--soft); }
.legal b { color: var(--ink); }
.legal .callout { background: var(--red-card); border-radius: 18px; padding: 22px 24px; }
.legal .callout p { color: var(--red-soft); }