/* The public website pages (intro and privacy). The app screens use app.css alone. */
  .site { max-width: 40rem; margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 1rem 2.5rem; display: flex; flex-direction: column; gap: 1.75rem; }
  .intro { display: flex; flex-direction: column; gap: 0.875rem; text-align: center; padding-top: 0.5rem; }
  .intro h1 { margin: 0; font-size: clamp(1.875rem, 7vw, 2.5rem); line-height: 1.12; font-weight: 800; letter-spacing: -0.02em; color: var(--brand-navy); }
  .intro p { margin: 0; font-size: 1.125rem; color: var(--muted); }
  .try { align-self: center; min-width: 15rem; font-size: 1.1875rem; text-decoration: none; }
  .how { display: grid; gap: 0.75rem; margin: 0; padding: 0; list-style: none; counter-reset: step; }
  .how li { display: grid; grid-template-columns: auto 1fr; gap: 0.25rem 0.875rem; align-items: start; background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem; box-shadow: var(--shadow); }
  .how .icon-circle { width: 3rem; height: 3rem; grid-row: span 2; }
  .how strong { font-size: 1.125rem; }
  .how span.d { color: var(--muted); }
  .section-title { margin: 0; font-size: 1.25rem; font-weight: 800; text-align: center; }
  .calls { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.125rem; }
  .calls h2 { margin: 0 0 0.375rem; font-size: 1.125rem; }
  .calls p { margin: 0; color: var(--muted); }
  .honest { text-align: center; color: var(--muted); font-size: 0.9375rem; margin: 0; }
  footer { border-top: 1px solid var(--line); padding-top: 1.25rem; display: flex; flex-direction: column; gap: 0.5rem; text-align: center; color: var(--muted); font-size: 0.9375rem; }
  footer nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.25rem 1.25rem; }
  footer a { color: var(--primary); font-weight: 700; }
  .doc { max-width: 40rem; margin: 0 auto; padding: max(1rem, env(safe-area-inset-top)) 1rem 2.5rem; display: flex; flex-direction: column; gap: 1rem; }
  .doc h1 { margin: 0.5rem 0 0; font-size: 1.875rem; font-weight: 800; color: var(--brand-navy); }
  .doc h2 { margin: 0.75rem 0 0; font-size: 1.1875rem; font-weight: 800; }
  .doc p, .doc li { margin: 0; color: var(--text); }
  .doc ul { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
  .doc .muted { color: var(--muted); font-size: 0.9375rem; }
  .doc a { color: var(--primary); font-weight: 700; }
  a.plain { text-decoration: none; }
  .why { background: var(--primary-soft); border-radius: var(--radius); padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.375rem; }
  .why h2 { margin: 0; font-size: 1.125rem; }
  .why p { margin: 0; }
  .why .src { font-size: 0.875rem; color: var(--muted); }
  .why a, .honest a { color: var(--primary); font-weight: 700; }
.doc img { max-width: 100%; height: auto; border: 1px solid #dfe7f3; border-radius: 8px; }
.signup { background: var(--card); border: 2px solid var(--primary); border-radius: var(--radius); padding: 1.25rem 1.125rem; scroll-margin-top: 1rem; }
.signup h2 { margin: 0 0 0.75rem; font-size: 1.375rem; }
.signup-form { display: flex; flex-direction: column; gap: 1rem; }
.signup .choices { border: 0; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.5rem; }
.signup .choices legend { font-weight: 800; font-size: 1.125rem; margin-bottom: 0.5rem; padding: 0; }
.signup .pick { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.875rem 1rem; border: 1.5px solid var(--field); border-radius: var(--radius-tile); cursor: pointer; background: var(--card); }
.signup .pick input { width: 1.5rem; height: 1.5rem; margin: 0.125rem 0 0; flex: none; accent-color: var(--primary); }
.signup .pick span { display: flex; flex-direction: column; gap: 0.125rem; }
.signup .pick small { color: var(--muted); font-size: 0.9375rem; }
.signup .pick.consent { border: 0; padding: 0; font-size: 0.9375rem; color: var(--muted); }
.signup .opt { font-weight: 400; color: var(--muted); font-size: 0.9375rem; }
.signup .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.signup .fine { margin: 0; font-size: 0.9375rem; color: var(--muted); text-align: center; }
.su-msg { margin: 0; min-height: 1.25rem; }
.su-msg.err { color: #b42318; font-weight: 700; }
.su-done h3 { margin: 0 0 0.5rem; font-size: 1.25rem; }
.su-done p { margin: 0 0 0.75rem; }
.su-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; }
.su-table th, .su-table td { text-align: left; padding: 0.5rem 0.375rem; border-bottom: 1px solid var(--line); vertical-align: top; }
.linkish { background: none; border: 0; padding: 0; font: inherit; color: var(--primary); text-decoration: underline; cursor: pointer; }
.err { color: #b42318; }
.under-try { text-align: center; margin: 0.75rem 0 0; } .under-try a { font-weight: 700; }
.calls .trial { margin-top: 12px; padding: 12px 14px; border-radius: 12px; background: #eef3ff; border: 1px solid #c9d6f5; }
.signup .lede-s { margin: -4px 0 16px; color: #4f5f78; }
.voice { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.625rem; }
.voice h2 { margin: 0; font-size: 1.125rem; }
.voice p { margin: 0; color: var(--muted); }
.voice .soon { align-self: flex-start; background: var(--primary-soft); color: var(--primary); font-weight: 800; font-size: 0.8125rem; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.25rem 0.625rem; border-radius: 999px; }
.voice .shots { list-style: none; margin: 0.25rem 0 0; padding: 0 0 0.25rem; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(9.5rem, 1fr); gap: 0.75rem; overflow-x: auto; scroll-snap-type: x mandatory; }
.voice .shots li { scroll-snap-align: start; display: flex; flex-direction: column; gap: 0.375rem; text-align: center; font-size: 0.875rem; font-weight: 700; color: var(--text); }
.voice .shots img { width: 100%; height: auto; border-radius: 1rem; border: 1px solid var(--line); box-shadow: var(--shadow); }
.voice .fine-print { font-size: 0.875rem; }
.voice .levels { margin: 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; color: var(--text); }
.voice .trial { color: var(--text); }
.voice .trial a { color: var(--primary); font-weight: 700; }

/* Homepage (body.home): full-width bands. Other site pages keep the .doc layout above. */
body.home { background: #ffffff; }
.home .wrap { max-width: 72rem; margin: 0 auto; padding-left: 1rem; padding-right: 1rem; }
.home .wrap.narrow { max-width: 44rem; }
.home main { display: block; }
.home .eyebrow { margin: 0 0 0.5rem; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.08em; text-transform: uppercase; color: var(--primary); }
.home .eyebrow.center, .home .band-title { text-align: center; }
.home .band { padding: 4rem 0; }
.home .band.soft { background: var(--bg-soft); }
.home .band-title { margin: 0 auto 2.25rem; max-width: 36rem; font-size: clamp(1.75rem, 4.5vw, 2.5rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; color: var(--brand-navy); }

.topbar { position: sticky; top: 0; z-index: 10; background: rgba(255,255,255,0.92); backdrop-filter: saturate(1.4) blur(10px); -webkit-backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); padding-top: env(safe-area-inset-top); }
.topbar-in { display: flex; align-items: center; gap: 1rem; min-height: 4rem; }
.logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; color: var(--brand-navy); font-weight: 800; font-size: 1.25rem; }
.toplinks { display: none; gap: 1.5rem; margin-left: auto; }
.toplinks a { color: var(--text); text-decoration: none; font-weight: 700; }
.toplinks a:hover { color: var(--primary); }
.pill-btn { margin-left: auto; background: var(--primary); color: #fff; text-decoration: none; font-weight: 800; padding: 0.625rem 1.125rem; border-radius: 999px; white-space: nowrap; }
@media (min-width: 52rem) { .toplinks { display: flex; } .pill-btn { margin-left: 0.5rem; } }

.hero { background: radial-gradient(60rem 30rem at 85% 10%, #3b5bdb55, transparent 60%), radial-gradient(40rem 30rem at 0% 100%, #0b8f9440, transparent 60%), linear-gradient(160deg, #0f2742 0%, #182f6b 55%, #2f49b5 100%); color: #fff; overflow: hidden; }
.hero-in { display: grid; gap: 3rem; padding-top: 3.5rem; padding-bottom: 4rem; align-items: center; }
@media (min-width: 52rem) { .hero-in { grid-template-columns: 1.1fr 0.9fr; padding-top: 5rem; padding-bottom: 5.5rem; } }
.hero .eyebrow { color: #a9c1ff; }
.hero h1 { margin: 0; font-size: clamp(2.25rem, 7vw, 3.75rem); line-height: 1.05; font-weight: 800; letter-spacing: -0.03em; }
.hero h1 span { display: block; background: linear-gradient(90deg, #a9c1ff, #7fe3e6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lede { margin: 1.25rem 0 0; font-size: 1.1875rem; line-height: 1.55; color: #d6e0f5; max-width: 34rem; }
.hero-ctas { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; }
.home .cta { width: auto; text-decoration: none; padding: 0.875rem 1.5rem; font-size: 1.125rem; }
.hero .btn.primary { background: #ffffff; color: var(--primary); box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.btn.ghost { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.55); }
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 1.5rem 0 0; padding: 0; }
.chips li { font-size: 0.9375rem; font-weight: 700; padding: 0.375rem 0.75rem 0.375rem 2rem; border-radius: 999px; background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.18); position: relative; }
.chips li::before { content: ""; position: absolute; left: 0.75rem; top: 50%; width: 0.75rem; height: 0.4rem; border-left: 2.5px solid #7fe3e6; border-bottom: 2.5px solid #7fe3e6; transform: translateY(-70%) rotate(-45deg); }

.hero-phone { position: relative; justify-self: center; width: min(18.5rem, 80vw); }
.phone { background: #0b1526; border-radius: 2.75rem; padding: 0.75rem; box-shadow: 0 40px 80px rgba(0,0,0,0.45), inset 0 0 0 2px #2a3a5a; transform: rotate(2deg); }
.phone-notch { width: 6rem; height: 1.4rem; background: #0b1526; border-radius: 0 0 1rem 1rem; margin: -0.75rem auto 0; position: relative; z-index: 1; }
.phone-screen { background: var(--bg); color: var(--text); border-radius: 2.1rem; padding: 0.75rem 0.875rem 1rem; margin-top: -1.4rem; padding-top: 2rem; display: flex; flex-direction: column; gap: 0.625rem; font-size: 0.875rem; }
.ph-top { display: flex; align-items: center; gap: 0.5rem; font-size: 1rem; }
.ph-doc { background: #fff; border-radius: 0.875rem; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.375rem; box-shadow: var(--shadow); }
.ph-doc-title { font-weight: 800; font-size: 0.75rem; letter-spacing: 0.1em; color: #7a879c; }
.ph-line { height: 0.4rem; border-radius: 1rem; background: #e3e9f3; }
.ph-line.short { width: 60%; }
.ph-hl { font-weight: 800; color: var(--risk-high); background: var(--risk-high-soft); border-radius: 0.375rem; padding: 0.125rem 0.375rem; align-self: flex-start; }
.ph-risk { background: #fff; border: 2px solid var(--risk-high); border-radius: 0.875rem; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.25rem; }
.ph-badge { align-self: flex-start; background: var(--risk-high); color: #fff; font-weight: 800; font-size: 0.75rem; padding: 0.125rem 0.5rem; border-radius: 999px; }
.ph-risk ul { margin: 0.125rem 0 0; padding-left: 1.1rem; }
.ph-next { background: var(--primary-soft); border-radius: 0.875rem; padding: 0.75rem; display: flex; flex-direction: column; gap: 0.125rem; }
.float-card { position: absolute; background: #fff; color: var(--text); font-weight: 800; font-size: 0.875rem; padding: 0.5rem 0.75rem; border-radius: 0.75rem; box-shadow: 0 12px 30px rgba(0,0,0,0.25); display: flex; align-items: center; gap: 0.5rem; white-space: nowrap; }
.float-card .dot { width: 0.625rem; height: 0.625rem; border-radius: 50%; }
.dot.red { background: var(--risk-high); } .dot.blue { background: var(--primary); }
.fc1 { top: 22%; left: -2.5rem; } .fc2 { bottom: 12%; right: -2rem; }
@media (max-width: 30rem) { .fc1 { left: -0.5rem; } .fc2 { right: -0.5rem; } }

.stat-band { background: var(--brand-navy); color: #fff; padding: 2rem 0; border-top: 1px solid rgba(255,255,255,0.08); }
.stat-in { display: grid; gap: 0.5rem 2rem; align-items: center; }
@media (min-width: 52rem) { .stat-in { grid-template-columns: auto 1fr; } }
.big-num { margin: 0; font-size: clamp(2.5rem, 8vw, 3.5rem); font-weight: 800; letter-spacing: -0.03em; color: #ffb4a8; }
.stat-copy { margin: 0; color: #d6e0f5; font-size: 1.0625rem; }
.stat-copy a { color: #a9c1ff; font-size: 0.875rem; }

.steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 52rem) { .steps { grid-template-columns: repeat(3, 1fr); } }
.steps li { background: #fff; border: 1px solid var(--line); border-radius: 1.25rem; padding: 1.5rem; display: flex; flex-direction: column; gap: 0.5rem; box-shadow: var(--shadow); }
.steps .num { width: 2.75rem; height: 2.75rem; border-radius: 50%; background: linear-gradient(135deg, var(--primary), #5b7cf0); color: #fff; font-weight: 800; font-size: 1.25rem; display: grid; place-items: center; margin-bottom: 0.25rem; }
.steps b { font-size: 1.25rem; }
.steps span:not(.num) { color: var(--muted); }

.features { display: grid; gap: 1rem; }
@media (min-width: 40rem) { .features { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 64rem) { .features { grid-template-columns: repeat(3, 1fr); } }
.feat { position: relative; background: #fff; border: 1px solid var(--line); border-radius: 1.25rem; padding: 1.5rem; box-shadow: var(--shadow); transition: transform .2s ease, box-shadow .2s ease; scroll-margin-top: 5rem; }
.feat:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(15,39,66,.06), 0 14px 32px rgba(15,39,66,.12); }
.feat h3 { margin: 0.875rem 0 0.375rem; font-size: 1.25rem; }
.feat p { margin: 0; color: var(--muted); }
.feat a { color: var(--primary); font-weight: 700; }
.ficon { width: 3rem; height: 3rem; border-radius: 0.875rem; display: grid; place-items: center; background: var(--primary-soft); color: var(--primary); }
.ficon.red { background: var(--risk-high-soft); color: var(--risk-high); }
.tag { position: absolute; top: 1.25rem; right: 1.25rem; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.25rem 0.625rem; border-radius: 999px; }
.tag.test { background: #e0f4f4; color: #076a6e; }
.tag.soon { background: var(--risk-high-soft); color: var(--risk-high); }

.example { display: grid; gap: 2.5rem; align-items: center; }
@media (min-width: 52rem) { .example { grid-template-columns: 1fr 1fr; } }
.ex-img { margin: 0; transform: rotate(-2deg); }
.ex-img img { width: 100%; height: auto; border-radius: 1rem; box-shadow: 0 20px 50px rgba(15,39,66,0.2); border: 1px solid var(--line); }
.ex-img figcaption { text-align: center; font-size: 0.875rem; color: var(--muted); margin-top: 0.75rem; }
.ex-copy h2 { margin: 0 0 0.75rem; font-size: clamp(1.75rem, 4.5vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--brand-navy); }
.ex-copy > p { margin: 0 0 1rem; color: var(--muted); font-size: 1.0625rem; }
.checks { list-style: none; margin: 0 0 1.25rem; padding: 0; display: flex; flex-direction: column; gap: 0.75rem; }
.checks li { padding: 0.875rem 1rem 0.875rem 3rem; border-radius: 0.875rem; background: var(--risk-high-soft); position: relative; }
.checks li::before { content: "!"; position: absolute; left: 1rem; top: 0.875rem; width: 1.375rem; height: 1.375rem; border-radius: 50%; background: var(--risk-high); color: #fff; font-weight: 800; display: grid; place-items: center; font-size: 0.875rem; }
.textlink { color: var(--primary); font-weight: 800; }

.band.dark { background: linear-gradient(180deg, #0f2742, #13213d); color: #fff; }
.band.dark .voice { background: none; border: 0; padding-left: 1rem; padding-right: 1rem; gap: 1rem; max-width: 60rem; }
.band.dark .voice h2 { font-size: clamp(1.75rem, 4.5vw, 2.5rem); line-height: 1.15; letter-spacing: -0.02em; }
.band.dark .voice p, .band.dark .voice .levels, .band.dark .voice .trial { color: #d6e0f5; font-size: 1.0625rem; }
.band.dark .voice .levels { list-style: none; padding: 0; display: grid; gap: 0.75rem; }
@media (min-width: 52rem) { .band.dark .voice .levels { grid-template-columns: 1fr 1fr; } }
.band.dark .voice .levels li { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 1rem; padding: 1rem 1.125rem; }
.band.dark .voice .levels li:last-child { border-color: #f0443888; background: rgba(240,68,56,0.12); }
.band.dark .voice .levels b { color: #fff; display: block; font-size: 1.1875rem; margin-bottom: 0.25rem; }
.band.dark .voice .soon { background: rgba(240,68,56,0.15); color: #ffb4a8; display: inline-flex; align-items: center; gap: 0.5rem; }
.pulse { width: 0.5rem; height: 0.5rem; border-radius: 50%; background: #f04438; box-shadow: 0 0 0 0 rgba(240,68,56,0.7); animation: pulse 1.6s infinite; }
@keyframes pulse { 70% { box-shadow: 0 0 0 0.625rem rgba(240,68,56,0); } 100% { box-shadow: 0 0 0 0 rgba(240,68,56,0); } }
@media (prefers-reduced-motion: reduce) { .pulse { animation: none; } .feat { transition: none; } }
.band.dark .voice .shots { grid-auto-columns: minmax(11rem, 1fr); gap: 1.25rem; margin-top: 0.75rem; }
.band.dark .voice .shots li { color: #fff; }
.band.dark .voice .shots img { border: 0; border-radius: 1.5rem; box-shadow: 0 20px 50px rgba(0,0,0,0.4); }
.band.dark .voice .trial { background: rgba(255,255,255,0.06); border-radius: 1rem; padding: 1rem 1.125rem; }
.band.dark .voice .trial a { color: #a9c1ff; }
.band.dark .voice .fine-print { color: #9fb0cc; font-size: 0.875rem; }

#faq details { border-bottom: 1px solid var(--line); padding: 1rem 0; }
#faq summary { cursor: pointer; font-weight: 800; font-size: 1.125rem; list-style: none; display: flex; justify-content: space-between; gap: 1rem; }
#faq summary::-webkit-details-marker { display: none; }
#faq summary::after { content: "+"; color: var(--primary); font-size: 1.5rem; line-height: 1; }
#faq details[open] summary::after { content: "\2212"; }
#faq details p { margin: 0.625rem 0 0; color: var(--muted); }
#faq a { color: var(--primary); font-weight: 700; }

.signup-band .signup { box-shadow: 0 20px 50px rgba(15,39,66,0.12); border-radius: 1.5rem; padding: 1.75rem 1.5rem; }
.home .honest-wrap { padding-top: 2rem; display: flex; flex-direction: column; gap: 0.75rem; }
.home footer { margin-top: 2rem; padding-bottom: 2.5rem; }
.home section[id] { scroll-margin-top: 4.5rem; }
.steps li::before { content: none !important; display: none !important; }
.toplinks a { white-space: nowrap; }
.home .topbar .toplinks { margin-left: auto !important; }
.hero-copy, .hero .lede { text-align: left; }
.fc2 { bottom: -1rem; }
.home .topbar { display: block; }
.home .topbar-in { width: 100%; box-sizing: border-box; }
.hero-note { margin: 1rem 0 0; font-size: 0.9375rem; line-height: 1.5; color: #b9c7e3; max-width: 34rem; }
.hero-note a { color: #fff; font-weight: 700; }
.phone-shot { display: block; width: 100%; height: auto; border-radius: 2.1rem; margin-top: -1.4rem; }
.avail { background: var(--bg-soft); border-bottom: 1px solid var(--line); padding: 1.5rem 0; }
.avail-in { display: grid; gap: 0.75rem; }
@media (min-width: 52rem) { .avail-in { grid-template-columns: repeat(3, 1fr); } }
.av { background: #fff; border: 1px solid var(--line); border-radius: 1rem; padding: 1rem 1.125rem; display: flex; flex-direction: column; gap: 0.25rem; }
.av b { font-size: 1.125rem; }
.av span:not(.av-tag) { color: var(--muted); }
.av a { color: var(--primary); font-weight: 800; margin-top: 0.25rem; }
.av-tag { align-self: flex-start; font-size: 0.75rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; }
.av.now .av-tag { background: #dcf3e4; color: #1d6b3a; }
.av.pilot .av-tag { background: #e0f4f4; color: #076a6e; }
.av.soon .av-tag { background: var(--risk-high-soft); color: var(--risk-high); }
.band.dark .voice .sub { margin-top: -0.5rem; font-weight: 800; color: #a9c1ff; }
.band.dark .voice .needs { background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.12); border-radius: 1rem; padding: 1rem 1.125rem; color: #d6e0f5; }
.band.dark .voice .needs b { color: #fff; }
.band.dark .voice .needs ul { margin: 0.5rem 0 0; padding-left: 1.25rem; display: flex; flex-direction: column; gap: 0.375rem; }
.band.dark .voice .early { font-weight: 800; color: #ffb4a8; font-size: 0.9375rem; }
.band.dark .voice .shots { grid-auto-flow: row; grid-template-columns: 1fr; overflow: visible; justify-items: center; }
.band.dark .voice .shots li { width: min(100%, 20rem); }
.band.dark .voice .shots a { display: block; }
@media (min-width: 52rem) { .band.dark .voice .shots { grid-template-columns: repeat(3, 1fr); } .band.dark .voice .shots li { width: 100%; } }

/* Gentle motion: sections rise in as they scroll into view; phones drift slightly. Off for reduced motion. */
.js-motion .reveal { opacity: 0; transform: translateY(28px); transition: opacity .7s ease, transform .7s cubic-bezier(.2,.7,.2,1); }
.js-motion .reveal.in { opacity: 1; transform: none; }
.js-motion .reveal.d1 { transition-delay: .08s; } .js-motion .reveal.d2 { transition-delay: .16s; } .js-motion .reveal.d3 { transition-delay: .24s; }
.hero h1 { animation: rise .9s cubic-bezier(.2,.7,.2,1) both; }
.hero .lede, .hero-ctas, .hero-note, .chips { animation: rise .9s .12s cubic-bezier(.2,.7,.2,1) both; }
.hero-phone { animation: rise 1s .2s cubic-bezier(.2,.7,.2,1) both; }
.float-card { animation: bob 5s ease-in-out infinite; }
.fc2 { animation-delay: -2.5s; }
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }
@keyframes bob { 50% { transform: translateY(-6px); } }
.phone { transition: transform .2s linear; will-change: transform; }
@media (prefers-reduced-motion: reduce) {
  .js-motion .reveal { opacity: 1; transform: none; transition: none; }
  .hero h1, .hero .lede, .hero-ctas, .hero-note, .chips, .hero-phone, .float-card { animation: none; }
}
@media (max-width: 22rem) { .logo span { font-size: 1.0625rem; } .pill-btn { padding: 0.5rem 0.75rem; font-size: 0.9375rem; } .topbar-in { gap: 0.5rem; } }
.hero .hero-note { color: #c9d5ee; margin-top: 1.25rem; }
.follow-band { padding: 3.5rem 0 0; text-align: center; background: var(--bg-soft); }
.follow h2 { margin: 0 0 0.5rem; font-size: clamp(1.5rem, 4vw, 2rem); color: var(--brand-navy); letter-spacing: -0.02em; }
.follow h2 span { color: var(--primary); }
.follow p:not(.eyebrow) { margin: 0; color: var(--muted); font-size: 1.0625rem; }
.signup .lede-s a { color: var(--primary); font-weight: 700; }

/* Hero phone drawn as a modern iPhone: thin black bezel, titanium edge, Dynamic Island, status bar, side buttons. */
.hero-phone { width: min(19rem, 78vw); }
.hero .phone { position: relative; aspect-ratio: 390 / 844; padding: 0.6rem; border-radius: 3.1rem; background: #0b0f17; box-shadow: 0 0 0 2px #59606d, 0 0 0 4px #2b303a, 0 40px 80px rgba(0,0,0,0.5); }
.hero .phone .phone-notch { display: none; }
.screen { position: relative; height: 100%; border-radius: 2.55rem; overflow: hidden; background: #e8f0fb; display: flex; flex-direction: column; }
.statusbar { flex: none; height: 2.9rem; display: flex; align-items: center; justify-content: space-between; padding: 0.35rem 1.5rem 0; color: #0f2742; font-weight: 700; font-size: 0.9rem; position: relative; }
.island { position: absolute; left: 50%; top: 0.6rem; transform: translateX(-50%); width: 32%; height: 1.65rem; border-radius: 1rem; background: #000; }
.sb-icons { display: flex; align-items: center; gap: 0.3rem; }
.sb-icons svg { fill: #0f2742; }
.batt { width: 1.5rem; height: 0.72rem; border: 1.5px solid #0f2742aa; border-radius: 0.25rem; padding: 1px; position: relative; }
.batt span { display: block; height: 100%; width: 80%; background: #0f2742; border-radius: 0.12rem; }
.batt::after { content: ""; position: absolute; right: -4px; top: 30%; width: 2px; height: 40%; background: #0f2742aa; border-radius: 0 1px 1px 0; }
.hero .phone-shot { margin: 0; border-radius: 0; flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; }
.home-bar { position: absolute; bottom: 0.5rem; left: 50%; transform: translateX(-50%); width: 36%; height: 0.3rem; border-radius: 1rem; background: #0f2742; }
.btn-side { position: absolute; width: 4px; background: #3a404b; border-radius: 2px; }
.btn-action { left: -5px; top: 17%; height: 4%; }
.btn-vol1 { left: -5px; top: 24%; height: 8%; }
.btn-vol2 { left: -5px; top: 34%; height: 8%; }
.btn-power { right: -5px; top: 27%; height: 12%; }
.statusbar { padding: 0.35rem 1.25rem 0 1.6rem; }
.island { width: 28%; }
.sb-icons { gap: 0.2rem; } .sb-icons svg { transform: scale(0.85); }
.fc1 { top: 4%; left: -3rem; }

/* AlarmCue: make it jump out. */
.nav-alarm { display: inline-flex; align-items: center; gap: 0.375rem; }
.nav-alarm .new { background: #d92d20; color: #fff; font-size: 0.6875rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; padding: 0.1rem 0.4rem; border-radius: 999px; }
.alarm-bar { display: block; text-decoration: none; color: #fff; background: linear-gradient(90deg, #b42318, #d92d20 50%, #b42318); }
.alarm-bar-in { display: flex; align-items: center; gap: 0.75rem; min-height: 3.5rem; flex-wrap: wrap; padding-top: 0.625rem; padding-bottom: 0.625rem; font-size: 1.0625rem; }
.ab-dot { width: 0.75rem; height: 0.75rem; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,0.8); animation: pulse-w 1.6s infinite; flex: none; }
@keyframes pulse-w { 70% { box-shadow: 0 0 0 0.75rem rgba(255,255,255,0); } 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); } }
.ab-tag { background: rgba(255,255,255,0.2); font-size: 0.75rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.55rem; border-radius: 999px; }
.ab-text { flex: 1 1 16rem; }
.ab-go { font-weight: 800; white-space: nowrap; }
.alarm-bar:hover .ab-go { text-decoration: underline; }
.band.dark#alarmcue { background: radial-gradient(50rem 28rem at 50% 0%, rgba(217,45,32,0.35), transparent 65%), linear-gradient(180deg, #1a1030, #0f2742 45%, #13213d); }
.band.dark .voice .alarm-title { font-size: clamp(1.5rem, 3.5vw, 2rem); color: #d6e0f5; font-weight: 700; }
.alarm-word { display: block; font-size: clamp(3rem, 11vw, 5.5rem); line-height: 1; font-weight: 800; letter-spacing: -0.04em; background: linear-gradient(90deg, #ff6b5b, #ffb4a8); -webkit-background-clip: text; background-clip: text; color: transparent; margin-bottom: 0.25rem; }
.band.dark .voice .big-phrase { margin: 0.5rem 0 0; font-size: clamp(1.75rem, 5.5vw, 3rem); line-height: 1.15; font-weight: 800; color: #fff; letter-spacing: -0.02em; text-shadow: 0 0 40px rgba(255,107,91,0.55); }
.phrase-result { display: flex; flex-wrap: wrap; gap: 0.5rem; margin: 0 !important; }
.phrase-result span { background: rgba(217,45,32,0.18); border: 1px solid rgba(255,107,91,0.5); color: #ffd2cc; font-weight: 800; font-size: 0.9375rem; padding: 0.375rem 0.75rem; border-radius: 999px; }
@media (prefers-reduced-motion: reduce) { .ab-dot { animation: none; } }
.fc1 { top: 70%; left: -3rem; }

/* Giant AlarmCue showcase under the hero. The whole block links to the AlarmCue section, which lights up on arrival. */
.alarm-hero { position: relative; display: block; overflow: hidden; text-decoration: none; color: #fff; text-align: center; padding: clamp(3.5rem, 9vw, 6.5rem) 0; background: radial-gradient(60% 80% at 50% 50%, #5c0f12 0%, #2a0b1e 55%, #0f1a33 100%); isolation: isolate; }
.ah-in { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 1rem; }
.ah-tag { display: inline-flex; align-items: center; gap: 0.625rem; font-size: 0.875rem; font-weight: 800; letter-spacing: 0.12em; text-transform: uppercase; color: #ffd2cc; background: rgba(217,45,32,0.25); border: 1px solid rgba(255,107,91,0.5); padding: 0.4rem 0.9rem; border-radius: 999px; }
.ah-word { display: block; font-size: clamp(4.25rem, 19vw, 13rem); line-height: 0.9; font-weight: 900; letter-spacing: -0.05em; background: linear-gradient(180deg, #ffffff 0%, #ffb4a8 45%, #ff4d3d 100%); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 0 30px rgba(255,77,61,0.65)) drop-shadow(0 0 80px rgba(255,77,61,0.35)); animation: ah-glow 2.4s ease-in-out infinite; transition: transform .3s ease; }
.alarm-hero:hover .ah-word, .alarm-hero:focus-visible .ah-word { transform: scale(1.03); }
@keyframes ah-glow { 50% { filter: drop-shadow(0 0 45px rgba(255,77,61,0.9)) drop-shadow(0 0 120px rgba(255,77,61,0.5)); } }
.ah-phrase { max-width: 40rem; font-size: clamp(1.25rem, 3.2vw, 1.75rem); line-height: 1.3; font-weight: 700; color: #ffe8e4; }
.ah-go { margin-top: 0.5rem; display: inline-flex; align-items: center; gap: 0.5rem; background: #ff4d3d; color: #fff; font-weight: 800; font-size: 1.125rem; padding: 0.875rem 1.5rem; border-radius: 999px; box-shadow: 0 10px 30px rgba(255,77,61,0.45); }
.alarm-hero:hover .ah-go { background: #ff6b5b; }
.ah-rings { position: absolute; inset: 0; display: grid; place-items: center; z-index: 0; pointer-events: none; }
.ah-rings span { grid-area: 1 / 1; width: 20rem; height: 20rem; border-radius: 50%; border: 2px solid rgba(255,77,61,0.45); animation: ah-ring 4.5s ease-out infinite; opacity: 0; }
.ah-rings span:nth-child(2) { animation-delay: 1.5s; } .ah-rings span:nth-child(3) { animation-delay: 3s; }
@keyframes ah-ring { 0% { transform: scale(0.4); opacity: 0.9; } 100% { transform: scale(3.2); opacity: 0; } }
/* Arriving at #alarmcue spotlights the section. */
#alarmcue:target .voice { animation: spotlight 1.6s ease-out 1; border-radius: 1.5rem; }
@keyframes spotlight { 0% { box-shadow: 0 0 0 0 rgba(255,77,61,0); } 25% { box-shadow: 0 0 0 6px rgba(255,77,61,0.9), 0 0 80px 20px rgba(255,77,61,0.45); } 100% { box-shadow: 0 0 0 0 rgba(255,77,61,0); } }
@media (prefers-reduced-motion: reduce) { .ah-word, .ah-rings span { animation: none; } .ah-rings { display: none; } #alarmcue:target .voice { animation: none; box-shadow: 0 0 0 4px rgba(255,77,61,0.8); } }
.ah-must { font-size: clamp(1.375rem, 3.6vw, 2.125rem); line-height: 1.2; font-weight: 800; color: #fff; letter-spacing: -0.01em; max-width: 44rem; }
.ah-phrase { font-weight: 600; color: #ffd2cc; }
.ah-tag .brand-case { text-transform: none; letter-spacing: 0.02em; font-size: 1rem; }
@media (min-width: 64rem) { .features.four { grid-template-columns: repeat(2, 1fr); max-width: 60rem; margin: 0 auto; } }
.feat-links { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; margin-top: 0.75rem !important; }
.feat-alarm { border: 2px solid #f04438; background: linear-gradient(180deg, #fff, #fff5f4); }
.hero .lede .lede-alarm { color: #ff8a7a; font-weight: 800; text-decoration: none; border-bottom: 2px solid #ff8a7a; }
.fc2 { color: #b42318; }
.alarm-red { color: #b42318; }
.feat-alarm h3 { color: #b42318; }
.feat-alarm a { color: #b42318; }

/* Phone menu: section links under 52rem, where the top links are hidden */
.menu { margin-left: 0.5rem; }
.menu summary { list-style: none; cursor: pointer; min-height: 2.75rem; display: inline-flex; align-items: center; padding: 0.25rem 0.875rem; border: 2px solid var(--line); border-radius: 999px; font-weight: 800; color: var(--text); background: #fff; }
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { border-color: var(--primary); }
.menu nav { position: absolute; top: 100%; left: 0; right: 0; background: #fff; border-bottom: 1px solid var(--line); box-shadow: 0 12px 24px rgba(15,39,66,0.12); display: flex; flex-direction: column; padding: 0.25rem 1rem 0.75rem; }
.menu nav a { padding: 0.875rem 0.25rem; font-weight: 700; font-size: 1.125rem; color: var(--text); text-decoration: none; border-bottom: 1px solid var(--line); }
.menu nav a:last-child { border-bottom: 0; }
@media (min-width: 52rem) { .menu { display: none; } }
@media (max-width: 22rem) { .menu { margin-left: 0.25rem; } .menu summary { padding: 0.25rem 0.625rem; } }

/* Under 40rem the header is too tight for the logo, "Open web app" and Menu together, so that link moves into the menu */
@media (max-width: 39.99rem) { .home .topbar .pill-btn { display: none; } .menu { margin-left: auto; } }
@media (min-width: 40rem) { .menu nav a.menu-app { display: none; } }

.center-text { text-align: center; }
.page-shot { display: block; margin: 1rem auto; max-width: min(100%, 26rem); height: auto; border-radius: 1.25rem; }

.dtop { display: grid; grid-template-columns: 5rem 1fr 5rem; align-items: center; min-height: 3rem; }
.dtop h1 { margin: 0; text-align: center; font-size: 1.25rem; line-height: 1.3; font-weight: 800; }
.demo-h { margin: 0; text-align: center; font-size: 1.5rem; }
.demo-screen .preview img { width: 100%; height: auto; max-height: none; }
.demo-screen .choice-btn.alarm { border-color: #d93025; background: #fff5f5; }
.demo-screen .choice-btn.alarm strong { color: #b3261e; }
.demo-hint { text-align: center; }
.dtop .back.off { visibility: hidden; }

/* Demo phone: a full iPhone frame with a scrolling screen */
.dev-wrap { width: min(20rem, 86vw); margin: 1.25rem auto; }
.dev.phone { position: relative; aspect-ratio: 390 / 844; padding: 0.6rem; border-radius: 3.1rem; background: #0b0f17; box-shadow: 0 0 0 2px #59606d, 0 0 0 4px #2b303a, 0 30px 60px rgba(12, 26, 51, 0.35); transform: none; text-align: left; }
.dev .screen { height: 100%; }
.dev .demo-screen { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0.5rem 0.875rem 2rem; display: flex; flex-direction: column; gap: 1rem; scrollbar-width: none; }
.dev .demo-screen::-webkit-scrollbar { display: none; }
.dev .phone-shot { margin: 0; border-radius: 0; flex: 1; min-height: 0; width: 100%; object-fit: cover; object-position: top; display: block; }
.dev .home-bar { z-index: 2; }
.dev .btn { min-height: 3rem; }
.dev .demo-screen { zoom: 0.78; padding: 0.4rem 0.9rem 2.5rem; }

/* "Tap here" hint on the demo */
.hint-host { position: relative; overflow: visible; }
.tap-hint { position: absolute; right: 0.75rem; bottom: -0.9rem; z-index: 3; display: flex; align-items: center; gap: 0.4rem; pointer-events: none; }
.tap-ring { width: 2.1rem; height: 2.1rem; border-radius: 50%; background: rgba(48, 74, 190, 0.35); border: 2px solid #304abe; animation: tap-pulse 1.4s ease-out infinite; }
.tap-label { background: #304abe; color: #fff; font-weight: 800; font-size: 0.8125rem; padding: 0.3rem 0.65rem; border-radius: 999px; animation: tap-bob 1.4s ease-in-out infinite; box-shadow: 0 4px 12px rgba(12, 26, 51, 0.3); }
@keyframes tap-pulse { 0% { transform: scale(0.7); opacity: 1; } 70% { transform: scale(1.35); opacity: 0.25; } 100% { transform: scale(1.35); opacity: 0; } }
@keyframes tap-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } }
@media (prefers-reduced-motion: reduce) { .tap-ring, .tap-label { animation: none; } }
.hub-title { font-size: 1.5rem; margin: 0 0 0.25rem; }
.tap-hint { bottom: auto; top: 58%; right: 0.5rem; }
.tap-hint { top: 0.3rem; }
.dev .demo-h { font-size: 1.3rem; }

.em-card { border: 2px solid #d93025; background: #fff5f5; border-radius: 1rem; padding: 0.875rem 1rem; display: flex; flex-direction: column; gap: 0.25rem; }
.em-card h2 { margin: 0; font-size: 1.25rem; }
.em-card p { margin: 0; }
.em-tag { color: #b3261e; font-size: 0.8125rem; letter-spacing: 0.06em; }
.em-where { font-weight: 800; }
.demo-map { width: 100%; height: auto; border-radius: 1rem; border: 1px solid var(--line, #d6dce6); display: block; }

.lock { border-radius: 1.25rem; padding: 1.25rem 0.75rem 1rem; background: linear-gradient(160deg, #1d2f63, #0f1a38 55%, #3b1d3f); color: #fff; display: flex; flex-direction: column; gap: 0.5rem; min-height: 24rem; }
.lock-date { margin: 0.5rem 0 0; text-align: center; font-weight: 700; font-size: 0.95rem; opacity: 0.9; }
.lock-time { margin: 0 0 1rem; text-align: center; font-size: 4rem; line-height: 1; font-weight: 700; }
.lock-note { font: inherit; text-align: left; width: 100%; border: 0; cursor: pointer; border-radius: 1.1rem; padding: 0.7rem 0.85rem; background: rgba(255, 255, 255, 0.88); color: #0f2742; display: flex; flex-direction: column; gap: 0.15rem; }
.lock-note strong { font-size: 0.95rem; }
.lock-note span { font-size: 0.85rem; }
.lock-note:first-of-type { border-left: 5px solid #d93025; animation: note-in 0.5s ease-out; }
.lock-app { font-size: 0.7rem !important; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: #5b6678; }
.lock-note2 { background: rgba(255, 255, 255, 0.7); }
@keyframes note-in { from { transform: translateY(-10px); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .lock-note:first-of-type { animation: none; } }
.hero .demo-screen h1, .hero .demo-screen h2, .hero .demo-screen h3, .hero .demo-screen p { color: var(--ink, #0f2742); }
.hero .demo-screen .lede { color: #4a5568; max-width: none; margin: 0; }
.hero .demo-screen .lock * { color: inherit; }
.hero .demo-screen .lock .lock-note, .hero .demo-screen .lock .lock-note * { color: #0f2742; }
.hero .demo-screen .lock .lock-app { color: #5b6678; }

/* Pointing finger that walks people through the demo */
.finger { position: absolute; right: 1rem; bottom: -1.6rem; z-index: 5; width: 2.6rem; height: 2.6rem; pointer-events: none; display: flex; align-items: flex-start; justify-content: center; }
.finger .tap-ring { position: absolute; top: -0.4rem; left: 0.2rem; width: 2.2rem; height: 2.2rem; }
.finger-hand { position: relative; font-size: 2rem; line-height: 1; animation: finger-tap 1.2s ease-in-out infinite; filter: drop-shadow(0 3px 4px rgba(15, 39, 66, 0.35)); }
@keyframes finger-tap { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-9px); } }
@media (prefers-reduced-motion: reduce) { .finger-hand { animation: none; } }
.dtop .back.hint-host .finger { right: auto; left: 0.5rem; bottom: -2rem; }
.lock-note.hint-host .finger { right: 0.6rem; bottom: -1.9rem; }
.choice-btn.hint-host, .list-item.hint-host, .btn.hint-host { overflow: visible; }

/* Second phone: what the emergency contact sees */
.phones { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1.5rem; }
.phones .hero-phone { width: min(18rem, 78vw); }
.phones .mom { animation: rise 0.6s cubic-bezier(.2,.7,.2,1) both; }
.phones .mom[hidden] { display: none; }
@media (min-width: 52rem) { .hero-in.two { grid-template-columns: 0.75fr 1.25fr; } .hero-in.two .hero-copy .hero-ctas, .hero-in.two .chips { display: none; } }
.mom-bar { margin-top: 1rem; text-align: center; }
.mom-label { margin: 0 0 0.5rem; color: #cfe0ff; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.04em; text-transform: uppercase; }
.chips2 { display: inline-flex; gap: 0.4rem; flex-wrap: wrap; justify-content: center; }
.chip2 { font: inherit; cursor: pointer; border: 1px solid rgba(255,255,255,0.45); background: rgba(255,255,255,0.1); color: #fff; font-weight: 700; font-size: 0.875rem; padding: 0.4rem 0.85rem; border-radius: 999px; }
.chip2[aria-pressed="true"] { background: #fff; color: #182f6b; }
.lock-full { min-height: 30rem; }
.hero .demo-screen { color: #0f2742; }
.hero .demo-screen .reasons li, .hero .demo-screen .reasons li span { color: #0f2742; }
.hero .demo-screen .reasons .quote { color: #4a5568; }
.finger-hand { font-size: 2.4rem; }
.hero .mom-bar .mom-label { color: #dbe7ff; }
.lock-note .finger-hand { font-size: 2.4rem !important; }
.lock-note .finger { background: none; }

/* Side callout that points at AlarmCue */
.alarm-call { position: absolute; left: calc(100% + 0.5rem); width: 13.5rem; z-index: 6; display: flex; align-items: center; gap: 0; font: inherit; text-align: left; cursor: pointer; border: 0; padding: 0; background: none; animation: ac-in 0.6s 0.4s both, ac-nudge 2s 1.2s ease-in-out infinite; }
.alarm-call[hidden] { display: none; }
.ac-arrow { color: #ff6a5c; font-size: 1.4rem; line-height: 1; margin-right: -0.25rem; }
.ac-body { display: flex; flex-direction: column; gap: 0.2rem; background: #ff4d3d; color: #fff; padding: 0.7rem 0.85rem; border-radius: 0.9rem; box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); }
.ac-body b { font-size: 1.05rem; letter-spacing: 0.01em; }
.ac-body span { font-size: 0.85rem; line-height: 1.35; font-weight: 600; }
.alarm-call:hover .ac-body, .alarm-call:focus-visible .ac-body { background: #e6392a; }
@keyframes ac-in { from { opacity: 0; transform: translateX(-12px); } to { opacity: 1; transform: none; } }
@keyframes ac-nudge { 0%, 100% { transform: translateX(0); } 50% { transform: translateX(6px); } }
@media (prefers-reduced-motion: reduce) { .alarm-call { animation: none; } }
@media (max-width: 52rem) {
  .alarm-call { left: 50%; width: min(19rem, 86vw); transform: translateX(-50%); top: auto !important; bottom: -4.6rem; animation: none; }
  .ac-arrow { display: none; }
  .phones { padding-bottom: 5rem; }
}
.ac-body em { font-style: normal; font-weight: 800; font-size: 1rem; line-height: 1.25; }
.ac-body b { font-size: 0.8rem; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.9; }
.hero-phone { scroll-margin-top: 5rem; }

/* Screened call demo */
.demo-h2 { margin: 0.25rem 0 0; font-size: 1.05rem; }
.said { font-size: 1.05rem; line-height: 1.45; }
.ringing { min-height: 30rem; border-radius: 1.25rem; padding: 1.5rem 1rem 1.25rem; background: linear-gradient(170deg, #20263a, #0e1220); display: flex; flex-direction: column; align-items: center; gap: 0.5rem; text-align: center; }
.hero .demo-screen .ringing * { color: #fff; }
.ring-top { margin: 0.5rem 0 0; font-size: 0.95rem; opacity: 0.8; }
.ring-num { margin: 0; font-size: 1.9rem !important; font-weight: 700; letter-spacing: 0.01em; }
.ring-sub { margin: 0; opacity: 0.7; }
.ring-heard { margin: 0.6rem 0 0.4rem; text-align: left; background: rgba(255, 255, 255, 0.1); border-radius: 0.9rem; padding: 0.6rem 0.75rem; font-size: 0.78rem; line-height: 1.35; display: flex; flex-direction: column; gap: 0.3rem; }
.ring-heard p { margin: 0 0 0.35rem; }
.ring-btns { margin-top: 0.5rem; width: 100%; display: flex; justify-content: space-around; padding-top: 0.75rem; }
.ring-btn { font: inherit; font-weight: 700; border: 0; cursor: pointer; background: none; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; position: relative; }
.ring-btn span { width: 3.75rem; height: 3.75rem; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 1.5rem; }
.ring-btn.red span { background: #e5392b; }
.ring-btn.green span { background: #2fb344; animation: ring-pulse 1.2s ease-in-out infinite; }
@keyframes ring-pulse { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.1); } }
@media (prefers-reduced-motion: reduce) { .ring-btn.green span { animation: none; } }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.key { font: inherit; cursor: pointer; background: #fff; border: 1px solid #cdd7ea; border-radius: 0.9rem; padding: 0.7rem 0.5rem; display: flex; flex-direction: column; align-items: center; gap: 0.15rem; color: #0f2742; position: relative; }
.key b { font-size: 1.6rem; color: #304abe; }
.key span { font-size: 0.85rem; font-weight: 600; }
.bubble { align-self: flex-start; max-width: 92%; background: #e9e9ef; border-radius: 1.1rem; padding: 0.7rem 0.9rem; font-size: 0.95rem; line-height: 1.4; }
.bubble b { font-size: 0.75rem; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.04em; }
.bubble p { margin: 0.2rem 0 0; }

.ring-btn.green .finger { bottom: -2.2rem; right: -0.2rem; }
.ringing .ring-btn { padding-bottom: 1.8rem; }

/* On phone screens the hero ends after the buttons, so AlarmCue follows right away; computers keep the phone picture. */
@media (max-width: 51.99rem) { body.home .hero .hero-phone:not(#phone) { display: none; } }

/* Backup hub: hero text link and AlarmCue steps */
.hero-link { align-self: center; color: #fff; font-weight: 700; font-size: 1.0625rem; text-decoration: underline; text-underline-offset: 0.25em; padding: 0.75rem 0.5rem; }
.hero-link:hover { color: #a9c1ff; }
#alarmcue-how .steps { text-align: left; max-width: 64rem; margin: 0 auto; }
.alarm-more { margin: 1.5rem 0 0; }
.alarm-more a { color: var(--primary); font-weight: 800; font-size: 1.125rem; }

/* Backup hub only: tighter vertical spacing between sections */
.protect-hub .band { padding: 2.25rem 0; }
.protect-hub .band-title { margin-bottom: 1.5rem; }
.protect-hub .band + .band { padding-top: 0.5rem; }
.protect-hub .alarm-more { margin-top: 1rem; }

/* AlarmCue: the page people in the circle open from their text */
.btn.danger { background: #b42318; color: #fff; border: 0; text-decoration: none; }
.alarm-view { max-width: 30rem; margin: 0 auto; padding: 1rem 1rem 3rem; display: flex; flex-direction: column; gap: 1rem; }
.alarm-view section { display: flex; flex-direction: column; gap: 1rem; }
.alarm-view h1 { margin: 0; font-size: 1.5rem; line-height: 1.25; }
.alarm-view .stack .btn { display: flex; align-items: center; justify-content: center; text-decoration: none; }
.alarm-view .level { display: block; }
.alarm-view .level h1 { margin-bottom: 0.5rem; }
.alarm-view .level p { margin: 0; }
/* Emergency alert: the box flashes red (about once a second) until someone taps "I reached them". */
html.alert-flashing, html.alert-flashing body { animation: alert-page 1.2s ease-in-out infinite; }
html.alert-flashing .alarm-view .level.high { animation: alert-box 1.2s ease-in-out infinite; }
html.alert-flashing .alarm-view .level.high h1, html.alert-flashing .alarm-view .level.high p { color: #fff; }
@keyframes alert-page { 0%, 100% { background-color: #fff; } 50% { background-color: #f8c9c5; } }
/* The words stay white on a dark red that pulses, so they are readable at every moment of the flash. */
@keyframes alert-box { 0%, 100% { background-color: var(--risk-high); } 50% { background-color: #7a1410; } }
@media (prefers-reduced-motion: reduce) {
  html.alert-flashing, html.alert-flashing body { animation: none; background-color: #f8c9c5; }
  html.alert-flashing .alarm-view .level.high { animation: none; background-color: var(--risk-high); color: #fff; }
}

/* Home page (AlarmCue): short sections, alert preview in the hero, closing download */
.home .band { padding: 3rem 0; }
.fine-note { margin: 1rem auto 0; max-width: 40rem; color: var(--muted); font-size: 1rem; line-height: 1.5; text-align: center; }
.hero-note b { color: #fff; }
.hero-alert { margin: 0; justify-self: center; width: 100%; max-width: 22rem; }
.hero-alert img { display: block; width: 100%; height: auto; border-radius: 1.5rem; box-shadow: 0 30px 70px rgba(0,0,0,0.45); }
.hero-alert figcaption { margin-top: 0.75rem; text-align: center; font-size: 0.9375rem; line-height: 1.45; color: #c9d5ee; }
.steps.compact li { padding: 1.125rem 1.25rem; }
.steps.compact b { font-size: 1.1875rem; }
.steps.compact span:not(.num) { font-size: 1.0625rem; line-height: 1.5; }
.ways-sum { text-align: center; font-size: 1.1875rem; color: var(--muted); margin: -0.5rem 0 1.25rem; }
.fold { background: #fff; border: 1px solid var(--line); border-radius: 1rem; box-shadow: var(--shadow); margin: 0 0 0.75rem; }
.fold summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 0.625rem; min-height: 3.25rem; padding: 0.75rem 1.25rem; font-weight: 800; font-size: 1.125rem; color: var(--primary); }
.fold summary::-webkit-details-marker { display: none; }
.fold summary::after { content: "+"; margin-left: auto; font-size: 1.375rem; }
.fold[open] summary::after { content: "\2212"; }
.fold ul { margin: 0; padding: 0 1.25rem 1.25rem 2.5rem; display: grid; gap: 0.75rem; }
.fold li { font-size: 1.0625rem; line-height: 1.55; }
.get-band { background: linear-gradient(180deg, #13284a, #2a3f9a); color: #fff; }
.get-band .band-title { color: #fff; }
.get-copy { font-size: 1.125rem; line-height: 1.55; color: #d6e0f5; margin: 0 auto 1.25rem; max-width: 34rem; }
.get-band .get-btn { max-width: 24rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; padding: 1rem 2rem; font-size: 1.1875rem; background: #fff; color: var(--primary); text-decoration: none; border-radius: 999px; box-shadow: 0 10px 30px rgba(0,0,0,0.25); }
.get-links { margin: 1rem 0 0; color: #c9d5ee; font-size: 1rem; }
.get-links a { color: #fff; font-weight: 700; }
.get-signup { margin: 1.5rem auto 0; max-width: 32rem; text-align: left; background: #fff; color: var(--text, #13213d); border-radius: 1rem; }
.get-signup summary { cursor: pointer; padding: 1rem 1.25rem; font-weight: 800; font-size: 1.0625rem; color: var(--primary); list-style: none; display: flex; justify-content: space-between; align-items: center; min-height: 3rem; }
.get-signup summary::-webkit-details-marker { display: none; }
.get-signup summary::after { content: "+"; font-size: 1.375rem; }
.get-signup[open] summary::after { content: "\2212"; }
.get-signup form { padding: 0 1.25rem 1.25rem; }
.get-signup .fine { margin: 0.75rem 0 0; font-size: 0.9375rem; color: var(--muted); text-align: center; }

@media (max-width: 40rem) {
  .home .band { padding: 2.25rem 0; }
  .home .hero-in { padding-top: 2rem; padding-bottom: 2.5rem; gap: 1.75rem; }
  .home .cta, .home .btn { min-height: 3.25rem; font-size: 1.125rem; }
  .home .hero-ctas .cta, .get-band .get-btn { width: 100%; }
  .home .hero-note { font-size: 1rem; }
  .home #faq summary { font-size: 1.125rem; padding-top: 0.875rem; padding-bottom: 0.875rem; }
  #faq details p { font-size: 1.0625rem; line-height: 1.55; }
  .hero-alert { max-width: 22rem; }
  .steps.compact { gap: 0.75rem; }
}
.get-simple .get-btn { max-width: 24rem; width: 100%; display: inline-flex; align-items: center; justify-content: center; min-height: 3.5rem; font-size: 1.1875rem; text-decoration: none; border-radius: 999px; }
.get-simple .get-links { color: var(--muted); }
.get-simple .get-links a { color: var(--primary); }
.get-simple .get-signup { border: 1px solid var(--line); box-shadow: var(--shadow); }
.hero-alert figcaption { text-align: left; }
.hero-alert .cap-title { display: block; text-align: center; font-weight: 700; color: #fff; margin-bottom: 0.5rem; }
.hero-alert .cap-key { list-style: none; margin: 0 0 0.625rem; padding: 0; display: grid; gap: 0.375rem; font-size: 1rem; line-height: 1.45; color: #d6e0f5; }
.hero-alert .cap-key b { color: #fff; }
.hero-alert .cap-note { display: block; font-size: 0.9375rem; color: #c9d5ee; }
.ways-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.625rem; }
.ways-list > li { background: #fff; border: 1px solid var(--line); border-radius: 1rem; padding: 0.875rem 1.125rem; font-size: 1.0625rem; line-height: 1.5; box-shadow: var(--shadow); }
.ways-list .mini { margin-top: 0.375rem; }
.ways-list .mini summary { cursor: pointer; color: var(--primary); font-weight: 700; min-height: 2.75rem; display: flex; align-items: center; }
.ways-list .mini p { margin: 0.25rem 0 0; color: var(--muted); }
.hero-alert .cap-note { font-size: 1rem; line-height: 1.5; color: #d6e0f5; text-align: center; }
.hero-alert .cap-small { display: block; margin-top: 0.375rem; text-align: center; font-size: 0.875rem; color: #9fb0cc; }
@media (min-width: 52rem) { .home .hero-in { padding-top: 2.5rem; padding-bottom: 3rem; } }
@media (max-width: 40rem) { .home .hero-in { padding-top: 1.25rem; padding-bottom: 2rem; gap: 1.5rem; } .home .hero h1 { margin-top: 0.25rem; } }

/* Landing pages: "Coming soon" tags. Kept here because the site's security policy blocks inline styles. */
.soon-tag { display: inline-block; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #7a4b00; background: #fff3d6; border-radius: 999px; padding: .1rem .55rem; margin-left: .35rem; vertical-align: middle; }
.moments li { margin-bottom: .9rem; }

/* Prominent homepage paths to the three AlarmCue use cases. */
.home .audience-band { background: #f5f7fc; }
.home .audience-band .band-title { margin-bottom: 1rem; }
.audience-intro { max-width: 42rem; margin: 0 auto 2rem; text-align: center; color: var(--muted); font-size: 1.125rem; }
.audience-grid { display: grid; gap: 1rem; }
.audience-card { --audience-accent: #2857ac; display: flex; flex-direction: column; align-items: flex-start; gap: .75rem; padding: 1.75rem; border: 1px solid var(--line); border-top: 5px solid var(--audience-accent); border-radius: 1.25rem; background: #fff; color: var(--brand-navy); text-decoration: none; box-shadow: var(--shadow); }
.audience-dating { --audience-accent: #b91659; }
.audience-family { --audience-accent: #08796e; }
.audience-label { color: var(--audience-accent); font-size: .875rem; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; }
.audience-card h3 { margin: 0; font-size: 1.5rem; line-height: 1.2; }
.audience-card p { margin: 0 0 .5rem; color: var(--muted); line-height: 1.6; }
.audience-link { margin-top: auto; color: var(--audience-accent); font-weight: 800; }
.audience-card:hover { border-color: var(--audience-accent); }
.audience-card:focus-visible { outline: 3px solid var(--audience-accent); outline-offset: 4px; }
@media (min-width: 48rem) { .audience-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 52rem) and (max-width: 74rem) { .home .toplinks { display: none; } }

/* Official App Store and Google Play badges, side by side and the same height (Apple and Google ask for matching sizes). */
.store-badges { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; }
.center-text .store-badges, .get-simple .store-badges { justify-content: center; }
.store-badge { display: inline-block; line-height: 0; border-radius: 10px; }
.store-badge img { height: 54px; width: auto; display: block; }
.store-badge:focus-visible { outline: 3px solid var(--focus, #3b5bdb); outline-offset: 3px; }

/* Dating, College and Family circles, right under the download badges so they show without scrolling. */
.who-boxes { display: flex; justify-content: flex-start; gap: 1.25rem; margin-top: 1.5rem; flex-wrap: wrap; }
.who-box { --who: #2857ac; display: flex; flex-direction: column; align-items: center; gap: .5rem; width: 6.25rem; color: #fff; text-decoration: none; text-align: center; }
.who-box b { display: grid; place-items: center; width: 5.5rem; height: 5.5rem; border-radius: 50%; background: var(--who); border: 4px solid #fff; box-shadow: 0 8px 20px rgba(0,0,0,.25); font-size: .9375rem; font-weight: 800; letter-spacing: .02em; transition: transform .15s; }
.who-box span { font-size: .8125rem; font-weight: 600; line-height: 1.25; opacity: .92; }
.who-dating { --who: #b91659; }
.who-family { --who: #08796e; }
.who-box:hover b { transform: scale(1.05); }
.who-box:focus-visible { outline: 3px solid #fff; outline-offset: 4px; border-radius: 1rem; }
@media (max-width: 30rem) { .who-boxes { justify-content: space-between; gap: .5rem; } }