/* Back — marketing site.
   Hand-written, no framework, no build step. Same tokens as the app:
   status colours, the 13/12/11 radius family, hairlines at 7% black.

   No inline styles anywhere on purpose: the CSP served from _headers uses
   style-src 'self' with no 'unsafe-inline', so an inline style attribute
   would be blocked. Per-item animation delays use :nth-of-type instead. */

:root {
  --ink: #0B0B0C;
  --page: #FBFBFC;
  --band: #F4F4F5;

  --label-1: rgba(0, 0, 0, .88);
  --label-2: rgba(0, 0, 0, .55);
  --label-3: rgba(0, 0, 0, .42);
  --label-4: rgba(0, 0, 0, .32);

  --available: #34C759;
  --available-text: #1E7B36;
  --available-menubar: #248A3D;
  --outage: #FF3B30;
  --outage-text: #C10D02;
  --outage-menubar: #D70015;
  --link: #0A6CFF;
  --link-hover: #0850C4;

  --hairline: rgba(0, 0, 0, .07);
  --separator: rgba(0, 0, 0, .075);

  --cycle: 12s;          /* the hero demo loop */
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--page);
  color: var(--ink);
  font-family: -apple-system, "SF Pro Display", "SF Pro Text", system-ui,
               "Helvetica Neue", sans-serif;
  font-synthesis-weight: none;
}

a { color: var(--link); text-decoration: none; }
a:hover { color: var(--link-hover); }

h1, h2, h3, p { margin: 0; }
ul { margin: 0; padding: 0; list-style: none; }

.shell { width: 100%; max-width: 1440px; margin: 0 auto; }

/* Keyboard users get a way past the nav; visible only when focused. */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 10;
  padding: 10px 16px; background: var(--ink); color: #fff;
  font-size: 13px; font-weight: 560; border-radius: 0 0 8px 0;
}
.skip-link:focus { left: 0; color: #fff; }

:focus-visible { outline: 2px solid var(--link); outline-offset: 3px; border-radius: 4px; }

.dot { border-radius: 99px; background: var(--available); flex: none; }

/* ---------- nav ---------- */

.nav {
  display: flex; align-items: center; justify-content: space-between;
  height: 64px; padding: 0 60px;
  border-bottom: 1px solid var(--hairline);
}
/* The wordmark is a link to home, but it must read as the mark, not as a link. */
.wordmark { display: flex; align-items: center; gap: 9px; color: var(--ink); }
.wordmark:hover { color: var(--ink); }
.wordmark span { font-size: 15px; font-weight: 590; letter-spacing: -.01em; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-links a:not(.btn) { font-size: 13.5px; font-weight: 510; color: var(--label-2); }
.nav-links a:not(.btn):hover { color: var(--label-1); }

.btn {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 8px; background: var(--ink);
  font-size: 13px; font-weight: 560; color: #fff;
  height: 30px; padding: 0 15px;
  transition: opacity .16s ease;
}
.btn:hover { opacity: .82; color: #fff; }

.btn-lg { height: 42px; padding: 0 22px; border-radius: 10px; font-size: 14.5px;
          box-shadow: 0 1px 2px rgba(0, 0, 0, .2); }
.btn-lg:hover { opacity: .85; }

.btn-quiet {
  display: inline-flex; align-items: center; gap: 6px;
  height: 42px; padding: 0 16px; border-radius: 10px;
  font-size: 14.5px; font-weight: 510; color: rgba(0, 0, 0, .6);
  transition: background .16s ease;
}
.btn-quiet:hover { background: rgba(0, 0, 0, .05); color: rgba(0, 0, 0, .6); }

/* ---------- hero ---------- */

.hero { display: flex; align-items: center; gap: 72px; padding: 96px 60px 88px; }
.hero-copy { display: flex; flex-direction: column; max-width: 470px; }

.eyebrow {
  font-size: 11.5px; font-weight: 620; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(0, 0, 0, .36);
}
.hero h1 {
  margin-top: 16px; font-size: 62px; font-weight: 600;
  letter-spacing: -.035em; line-height: 1.02;
}
.hero-sub {
  margin-top: 22px; font-size: 17px; line-height: 1.55;
  color: var(--label-2); text-wrap: pretty;
}
.hero-actions { display: flex; align-items: center; gap: 14px; margin-top: 32px; }
.hero-meta { margin-top: 18px; font-size: 12.5px; color: rgba(0, 0, 0, .38); }

/* the popover, attached to a real menu bar on a desktop backdrop */
.desktop {
  position: relative; flex: 1; border-radius: 18px;
  background: linear-gradient(168deg, #5C6A78 0%, #8A93A0 44%, #C2BFC0 100%);
  box-shadow: 0 30px 70px -28px rgba(0, 0, 0, .45);
  overflow: hidden;
}
.menubar {
  display: flex; align-items: center; justify-content: flex-end; gap: 16px;
  height: 28px; padding: 0 18px;
  background: rgba(255, 255, 255, .34);
  backdrop-filter: blur(24px) saturate(160%);
  -webkit-backdrop-filter: blur(24px) saturate(160%);
}
.menubar-clock { font-size: 12px; font-weight: 510; color: rgba(0, 0, 0, .72); }

/* The menu bar ring: three stacked copies, one per state, cross-faded on the
   same 12s loop as the popover so icon and content never disagree. */
.menubar-icon { position: relative; width: 16px; height: 16px; flex: none; }
.menubar-icon svg { position: absolute; inset: 0; }
.menubar-icon .st-op  { animation: wOp  var(--cycle) linear infinite; }
.menubar-icon .st-out { animation: wOut var(--cycle) linear infinite; }
.menubar-icon .st-rec { animation: wRec var(--cycle) linear infinite; }

/* Notification toasts over the desktop. Left of the popover so they never
   overlap it, which is why they are not in the top-right as macOS would put them. */
.toasts { position: absolute; top: 46px; left: 36px; width: 296px; z-index: 2; }
.toast {
  position: absolute; top: 0; left: 0;
  display: flex; align-items: flex-start; gap: 11px;
  width: 296px; padding: 12px 13px; border-radius: 14px;
  background: rgba(250, 250, 251, .96);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1), 0 14px 32px -12px rgba(0, 0, 0, .45);
}
.toast-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: linear-gradient(180deg, #FBFBFC, #E7E8EA);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1);
}
.toast-text { display: flex; flex-direction: column; gap: 2px; }
.toast-title {
  font-size: 12.5px; font-weight: 640; letter-spacing: -.008em;
  color: rgba(0, 0, 0, .88);
}
.toast-body { font-size: 12px; line-height: 1.35; color: var(--label-2); }
.toast-out { animation: wNotifOut var(--cycle) cubic-bezier(.2, .8, .25, 1) infinite; }
.toast-rec { animation: wNotifRec var(--cycle) cubic-bezier(.2, .8, .25, 1) infinite; }

.popover-wrap { display: flex; justify-content: flex-end; padding: 10px 40px 56px; }

.popover {
  width: 320px; height: 260px;
  display: flex; flex-direction: column;
  border-radius: 13px;
  background: rgba(247, 247, 248, .8);
  backdrop-filter: blur(46px) saturate(180%);
  -webkit-backdrop-filter: blur(46px) saturate(180%);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .14),
              0 1px 0 0 rgba(255, 255, 255, .7) inset,
              0 18px 44px -12px rgba(0, 0, 0, .38);
  animation: wRise .5s cubic-bezier(.2, .8, .25, 1) both;
  overflow: hidden;
}
.popover-head { padding: 14px 18px 0; }
.popover-name {
  font-size: 22px; font-weight: 600; letter-spacing: -.02em;
  line-height: 1.1; color: var(--label-1);
}

/* Fixed-height stage so the three states cross-fade without reflowing —
   the same "state changes never move anything" rule the app follows. */
.popover-stage { position: relative; height: 66px; margin-top: 5px; }
.popover-state { position: absolute; inset: 0; }
.popover-state.st-op  { animation: wOp  var(--cycle) linear infinite; }
.popover-state.st-out { animation: wOut var(--cycle) linear infinite; }
.popover-state.st-rec { animation: wRec var(--cycle) linear infinite; }

.popover-status { display: flex; align-items: center; gap: 7px; }
.popover-status .dot { width: 8px; height: 8px; }
.popover-status span:last-child { font-size: 13px; font-weight: 510; }
.st-op .popover-status span:last-child,
.st-rec .popover-status span:last-child { color: var(--available-text); }
.st-out .popover-status span:last-child { color: var(--outage-text); }
.st-out .dot { background: var(--outage); }

.glow { animation: wGlow 2.8s ease-out infinite; }
.glow-red { animation: wGlowRed 2s ease-out infinite; }

.popover-line {
  margin-top: 9px; font-size: 12.5px; line-height: 1.45; color: rgba(0, 0, 0, .5);
}
.popover-checked {
  display: flex; align-items: center; gap: 6px; margin-top: 8px;
  font-size: 11.5px; font-weight: 510; color: var(--label-4);
  font-variant-numeric: tabular-nums;
}
.popover-checked .dot { width: 5px; height: 5px; animation: wBreathe 3.4s ease-in-out infinite; }
.st-out .popover-checked .dot { animation: wBreathe 1.8s ease-in-out infinite; }

.popover-rule { height: 1px; margin: 13px 18px 0; background: var(--separator); }
.popover-group { padding: 11px 18px 0; }
.caps {
  font-size: 10px; font-weight: 640; letter-spacing: .07em;
  text-transform: uppercase; color: rgba(0, 0, 0, .3);
}
.popover-rows { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.popover-row { display: flex; align-items: center; justify-content: space-between; }
.popover-row span { font-size: 12.5px; font-weight: 510; color: rgba(0, 0, 0, .78); }
.popover-row .dot { width: 7px; height: 7px; }
.popover-spacer { flex: 1; }
.popover-foot {
  display: flex; align-items: center; justify-content: space-between;
  height: 38px; padding: 0 12px 0 18px;
  border-top: 1px solid var(--separator);
  font-size: 11.5px; font-weight: 510; color: var(--label-3);
}
.gear { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; }

/* ---------- how it works ---------- */

.section { padding: 76px 60px; border-top: 1px solid var(--hairline); }
.section-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  margin-bottom: 44px;
}
.section-head h2 {
  max-width: 520px; font-size: 34px; font-weight: 600;
  letter-spacing: -.026em; line-height: 1.14;
}
.section-head p {
  max-width: 280px; font-size: 13.5px; line-height: 1.5;
  color: rgba(0, 0, 0, .45); text-wrap: pretty;
}
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 52px; }
.step {
  display: flex; flex-direction: column; gap: 12px;
  padding-top: 20px; border-top: 1px solid rgba(0, 0, 0, .1);
}
.step-n { font-size: 11.5px; font-weight: 620; letter-spacing: .07em; color: rgba(0, 0, 0, .3); }
.step-t { font-size: 20px; font-weight: 590; letter-spacing: -.018em; line-height: 1.25; }
.step-b { font-size: 14.5px; line-height: 1.55; color: rgba(0, 0, 0, .5); text-wrap: pretty; }

/* ---------- notification moment ---------- */

.moment {
  display: flex; flex-direction: column; align-items: center; gap: 40px;
  padding: 96px 60px 104px; background: var(--ink);
}
.moment-head { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.moment-eyebrow {
  font-size: 11.5px; font-weight: 620; letter-spacing: .08em;
  text-transform: uppercase; color: rgba(255, 255, 255, .38);
}
.moment h2 {
  font-size: 44px; font-weight: 600; letter-spacing: -.03em;
  line-height: 1.1; color: #fff; text-align: center;
}
.moment-sub {
  max-width: 420px; font-size: 15.5px; line-height: 1.55;
  color: rgba(255, 255, 255, .5); text-align: center; text-wrap: pretty;
}
.moment-caption { font-size: 13px; color: rgba(255, 255, 255, .36); }

/* Fixed-height stage so the notifications cross-fade in place rather than
   pushing the caption around — the same no-reflow rule as the popover. */
.banner-stage { position: relative; width: 400px; height: 74px; }

.banner {
  display: flex; align-items: flex-start; gap: 13px;
  width: 400px; padding: 16px 17px; border-radius: 17px;
  background: rgba(246, 246, 247, .97);
  box-shadow: 0 24px 60px -18px rgba(0, 0, 0, .7);
  animation: wRise .6s cubic-bezier(.2, .8, .25, 1) both;
}
/* Both notifications Back can send, on a 9s loop: the recovery one always, the
   outage one only if you opt in. */
.banner-stage .banner {
  position: absolute; inset: 0; width: auto;
}
.bn-out { animation: wBnOut 9s cubic-bezier(.2, .8, .25, 1) infinite; }
.bn-rec { animation: wBnRec 9s cubic-bezier(.2, .8, .25, 1) infinite; }
.banner-icon {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 42px; height: 42px; border-radius: 10px;
  background: linear-gradient(180deg, #FBFBFC, #E7E8EA);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .1);
}
.banner-text { display: flex; flex-direction: column; gap: 3px; padding-top: 2px; }
.banner-title { font-size: 14px; font-weight: 640; letter-spacing: -.01em; color: rgba(0, 0, 0, .9); }
.banner-body { font-size: 13.5px; line-height: 1.4; color: rgba(0, 0, 0, .6); }
.banner-when {
  margin-left: auto; padding-top: 3px;
  font-size: 11.5px; font-weight: 510; color: rgba(0, 0, 0, .34);
}

/* ---------- remote ---------- */

.remote { display: flex; gap: 72px; padding: 88px 60px; align-items: center; }
.remote-copy { display: flex; flex-direction: column; max-width: 430px; }
.remote-copy h2 {
  margin-top: 14px; font-size: 40px; font-weight: 600;
  letter-spacing: -.03em; line-height: 1.08;
}
.remote-copy > p {
  margin-top: 18px; font-size: 16px; line-height: 1.55;
  color: var(--label-2); text-wrap: pretty;
}
.points { display: flex; flex-direction: column; gap: 11px; margin-top: 26px; }
.point {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 14.5px; line-height: 1.5; color: rgba(0, 0, 0, .6);
}
.point svg { margin-top: 3px; flex: none; }

.alerts { display: flex; flex-direction: column; gap: 14px; flex: 1; }
.alert {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 15px 17px; border-radius: 12px; background: #fff;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 8px 22px -14px rgba(0, 0, 0, .3);
}
/* Channel glyph with a pulse behind it — the alert arriving. */
.alert-glyph {
  position: relative; flex: none;
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; background: rgba(0, 0, 0, .05);
}
.alert-glyph svg { position: relative; z-index: 1; }
.ripple {
  position: absolute; inset: 0; border-radius: 9px;
  background: rgba(52, 199, 89, .3);
  animation: wRipple 3.6s ease-out infinite;
}
/* Staggered rather than simultaneous, so it reads as three arrivals. */
.alert:nth-of-type(2) .ripple { animation-delay: .5s; }
.alert:nth-of-type(3) .ripple { animation-delay: 1s; }

.alert-body { display: flex; flex-direction: column; gap: 3px; }
.alert-head { display: flex; align-items: center; gap: 8px; }
.alert-channel { font-size: 13.5px; font-weight: 590; color: rgba(0, 0, 0, .85); }
.alert-meta { font-size: 11.5px; color: rgba(0, 0, 0, .34); }
.alert-text { font-size: 13.5px; line-height: 1.45; color: rgba(0, 0, 0, .6); }
/* display:block so vertical margins apply — these are spans in the markup. */
.fineprint {
  display: block;
  font-size: 12.5px; line-height: 1.5; color: rgba(0, 0, 0, .4); text-wrap: pretty;
}

/* ---------- services + privacy: the practical epilogue ---------- */

.split { display: flex; gap: 72px; padding: 80px 60px; border-top: 1px solid var(--hairline); }
.split-left { display: flex; flex-direction: column; gap: 20px; flex: 1; }
.split-right { display: flex; flex-direction: column; gap: 20px; width: 440px; }
/* Quieter than an act heading: the story is finished, this is reference. */
.split h2 { font-size: 19px; font-weight: 590; letter-spacing: -.016em; }

.service-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 32px; }
.service {
  display: flex; align-items: center; justify-content: space-between;
  height: 36px; border-bottom: 1px solid rgba(0, 0, 0, .06);
}
/* The row is a link to that service's own page — how the per-service pages are
   reachable, without turning this list into a second pitch. */
.service a {
  flex: 1; font-size: 14px; font-weight: 450; color: rgba(0, 0, 0, .78);
  transition: color .16s ease;
}
.service a:hover { color: var(--link); }
.service .dot { width: 7px; height: 7px; }

.facts { display: flex; flex-direction: column; gap: 16px; }
.fact { display: flex; gap: 12px; }
.fact-dot { flex: none; width: 8px; height: 8px; margin-top: 6px; border-radius: 99px; background: rgba(0, 0, 0, .28); }
.fact-dot.on { background: var(--available); }
.fact p { font-size: 14px; line-height: 1.55; color: rgba(0, 0, 0, .58); text-wrap: pretty; }
.fact strong { font-weight: 590; color: rgba(0, 0, 0, .82); }

/* ---------- per-service pages ---------- */

.svc-hero {
  display: flex; flex-direction: column;
  padding: 56px 60px 68px; max-width: 760px;
}
.crumbs { font-size: 12.5px; font-weight: 510; color: var(--label-4); margin-bottom: 20px; }
.crumbs a { color: var(--label-3); }
.crumbs a:hover { color: var(--link); }
.crumbs span { color: var(--label-4); }

.svc-hero h1 { font-size: 52px; font-weight: 600; letter-spacing: -.033em; line-height: 1.04; }
.svc-lede { margin-top: 20px; font-size: 17px; line-height: 1.55; color: var(--label-2); text-wrap: pretty; }
.svc-hero .hero-actions { margin-top: 30px; }
.svc-hero .hero-meta { margin-top: 16px; }

#main .section-head p .dot {
  display: inline-block; width: 7px; height: 7px; margin-right: 8px; vertical-align: middle;
}

.prose { display: flex; flex-direction: column; gap: 18px; max-width: 760px; }
.prose p { font-size: 15.5px; line-height: 1.65; color: rgba(0, 0, 0, .58); text-wrap: pretty; }
.prose strong { font-weight: 590; color: rgba(0, 0, 0, .82); }

.svc-links { display: flex; flex-wrap: wrap; gap: 12px 28px; }
.svc-links a { font-size: 14.5px; font-weight: 510; }

/* ---------- pricing ---------- */

.pricing { padding: 80px 60px; background: var(--band); border-top: 1px solid var(--hairline); }
.pricing .section-head { margin-bottom: 36px; }
.pricing .section-head h2 { font-size: 34px; letter-spacing: -.026em; }
.pricing .section-head p { font-size: 13.5px; color: rgba(0, 0, 0, .45); max-width: none; }

.plans {
  display: flex; border-radius: 14px; background: #fff; overflow: hidden;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .09), 0 12px 30px -20px rgba(0, 0, 0, .3);
}
.plan { flex: 1; display: flex; flex-direction: column; padding: 30px 34px 32px; }
.plan-divider { width: 1px; background: var(--hairline); }
.plan-heading { display: flex; align-items: baseline; gap: 10px; }
.plan-name {
  font-size: 11px; font-weight: 640; letter-spacing: .075em;
  text-transform: uppercase; color: var(--label-3);
}
.plan-once { font-size: 11px; font-weight: 560; color: rgba(0, 0, 0, .34); }
.plan-price {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 12px; font-size: 28px; font-weight: 600; letter-spacing: -.026em;
}
/* Early bird. The struck price stays quiet — the point is the price you pay,
   not the discount, so it reads as information rather than a sales tactic. */
.price-was {
  font-size: 19px; font-weight: 510; color: rgba(0, 0, 0, .32);
  text-decoration: line-through;
  text-decoration-thickness: 1.5px;
}
.price-now { font-size: 28px; font-weight: 600; }
.price-note {
  margin-top: 8px; font-size: 12px; font-weight: 510; color: var(--available-text);
}
.plan-features { display: flex; flex-direction: column; gap: 9px; margin-top: 20px; }
.plan-features li { font-size: 14px; color: rgba(0, 0, 0, .6); }
.plan-grow { flex: 1; min-height: 24px; }
.plan-cta {
  display: flex; align-items: center; justify-content: center;
  height: 38px; margin-top: 24px; border-radius: 9px;
  font-size: 14px; font-weight: 560;
}
.plan-cta.free {
  background: rgba(0, 0, 0, .055); color: rgba(0, 0, 0, .75);
  transition: background .16s ease;
}
.plan-cta.free:hover { background: rgba(0, 0, 0, .09); color: rgba(0, 0, 0, .75); }
.plan-cta.pro { background: var(--ink); color: #fff; transition: opacity .16s ease; }
.plan-cta.pro:hover { opacity: .85; color: #fff; }
.pricing > .fineprint { margin-top: 12px; }

/* First-launch note. Amber rather than red: it is a step to take, not an error. */
.gatekeeper {
  margin-top: 28px; padding: 14px 16px;
  border-radius: 11px;
  background: rgba(255, 149, 0, .09);
  box-shadow: 0 0 0 .5px rgba(255, 149, 0, .25);
  font-size: 13px; line-height: 1.55; color: rgba(0, 0, 0, .62);
  text-wrap: pretty;
}
.gatekeeper strong { font-weight: 590; color: rgba(0, 0, 0, .82); }

/* ---------- faq (accordion) ---------- */

.faq { display: flex; gap: 72px; padding: 80px 60px; }
.faq > h2 {
  width: 280px; flex: none; font-size: 28px; font-weight: 600;
  letter-spacing: -.024em; line-height: 1.16;
}
.faq-list { display: flex; flex-direction: column; flex: 1; }

/* <details> rather than JavaScript: works with no script at all, is keyboard
   operable, and leaves every answer in the DOM for search engines. */
.faq-item { border-top: 1px solid rgba(0, 0, 0, .08); }
.faq-q {
  display: flex; align-items: center; justify-content: space-between; gap: 40px;
  padding: 20px 0; cursor: pointer; list-style: none;
  transition: opacity .16s ease;
}
.faq-q::-webkit-details-marker { display: none; }
.faq-q:hover { opacity: .62; }
.faq-q > span:first-child {
  font-size: 15px; font-weight: 560; letter-spacing: -.01em; color: rgba(0, 0, 0, .85);
}
.faq-chevron {
  flex: none; display: flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 99px; background: rgba(0, 0, 0, .05);
  transition: transform .28s cubic-bezier(.2, .8, .25, 1);
}
.faq-item[open] .faq-chevron { transform: rotate(180deg); }
.faq-a {
  padding: 0 60px 22px 0;
  font-size: 14.5px; line-height: 1.6; color: var(--label-2); text-wrap: pretty;
}
/* Opening animates in. Collapsing is instant: animating a <details> shut needs
   ::details-content, which is too new to rely on. */
.faq-item[open] .faq-a { animation: wFaq .3s cubic-bezier(.2, .8, .25, 1) both; }

/* ---------- final cta + footer ---------- */

.final {
  display: flex; flex-direction: column; align-items: center; gap: 20px;
  padding: 88px 60px 96px; border-top: 1px solid var(--hairline);
}
.final h2 {
  margin-top: 6px; font-size: 38px; font-weight: 600;
  letter-spacing: -.03em; text-align: center; line-height: 1.1;
}
.final p {
  max-width: 400px; font-size: 15.5px; line-height: 1.55;
  color: rgba(0, 0, 0, .5); text-align: center; text-wrap: pretty;
}
.final .btn { height: 44px; padding: 0 26px; border-radius: 10px; font-size: 15px; margin-top: 10px; }
.final small { font-size: 12.5px; color: rgba(0, 0, 0, .36); }

.footer {
  display: flex; align-items: center; justify-content: space-between;
  padding: 26px 60px 40px; border-top: 1px solid var(--hairline);
}
.footer-mark { display: flex; align-items: center; gap: 8px; font-size: 12.5px; color: rgba(0, 0, 0, .38); }
.footer-links { display: flex; align-items: center; gap: 24px; font-size: 12.5px; }
.footer-links a { color: var(--label-3); }
.footer-links span { color: rgba(0, 0, 0, .3); }


/* ---------- Act One: the two-column timeline ---------- */

.story { display: flex; flex-direction: column; gap: 52px;
         padding: 96px 60px 40px; border-top: 1px solid var(--hairline); }
.story-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 60px;
}
.story-head h2 {
  margin-top: 16px; font-size: 44px; font-weight: 600;
  letter-spacing: -.032em; line-height: 1.06;
}
.story-head > p {
  max-width: 340px; font-size: 15.5px; line-height: 1.6;
  color: rgba(0, 0, 0, .52); text-wrap: pretty;
}

.story-cols { display: flex; align-items: stretch; }
.story-col { flex: 1; display: flex; flex-direction: column; padding-right: 52px; }
.story-col-right { padding-right: 0; padding-left: 52px; }
.story-col-head {
  display: flex; align-items: baseline; justify-content: space-between;
  padding-bottom: 14px; border-bottom: 1px solid rgba(0, 0, 0, .14);
}
.story-col-title { font-size: 15px; font-weight: 590; letter-spacing: -.012em; color: rgba(0, 0, 0, .85); }
.story-col-meta { font-size: 12px; font-weight: 510; color: var(--label-4); }
.story-col-meta-good { color: var(--available-text); }

/* The spine between the columns. The green fill grows as you scroll, so the
   two timelines read as one clock. */
.story-spine { width: 1px; background: rgba(0, 0, 0, .09); }
.story-spine span { display: block; width: 1px; height: 100%; background: rgba(52, 199, 89, .55); }

/* Rows are absolutely placed; the generated block above sets each top. */
.tl-axis { position: relative; height: 900px; }
.tl-row { position: absolute; left: 0; right: 0; display: flex; gap: 18px; }
.tl-a1, .tl-a2, .tl-a3, .tl-a4, .tl-a5, .tl-a6, .tl-a7, .tl-a8, .tl-a9, .tl-a10,
.tl-a11, .tl-a12, .tl-a13, .tl-a14, .tl-a15, .tl-a16, .tl-a17, .tl-a18, .tl-a19,
.tl-a20, .tl-a21, .tl-a22, .tl-a23 { align-items: baseline; }
.tl-b1, .tl-b2, .tl-b3, .tl-b4 { align-items: flex-start; }
.tl-time {
  width: 44px; flex: none; font-size: 12px; font-weight: 510;
  font-variant-numeric: tabular-nums;
}
.tl-b1 .tl-time, .tl-b2 .tl-time, .tl-b3 .tl-time, .tl-b4 .tl-time {
  padding-top: 2px; color: rgba(0, 0, 0, .28);
}
.tl-text { line-height: 1.35; }
.tl-body { display: flex; flex-direction: column; gap: 4px; max-width: 400px; }
.tl-head { display: flex; align-items: center; gap: 8px; }
.tl-dot { width: 7px; height: 7px; border-radius: 99px; flex: none; }
.tl-sub {
  padding-left: 15px; font-size: 13.5px; line-height: 1.5;
  color: rgba(0, 0, 0, .44); text-wrap: pretty;
}

/* The thread of quiet time down the right column, and the label for it. */
.tl-thread {
  position: absolute; left: 59px; top: 280px; bottom: 110px; width: 1px;
  background: linear-gradient(180deg, rgba(0, 0, 0, .09), rgba(52, 199, 89, .4));
}
.tl-gap {
  position: absolute; left: 78px; top: 54%;
  display: flex; flex-direction: column; gap: 7px; max-width: 290px;
}
.tl-gap-n { font-size: 34px; font-weight: 600; letter-spacing: -.03em; line-height: 1; color: rgba(0, 0, 0, .16); }
.tl-gap-t { font-size: 14.5px; line-height: 1.55; color: rgba(0, 0, 0, .38); text-wrap: pretty; }

.story-close {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid rgba(0, 0, 0, .1);
  font-size: 14px; line-height: 1.6; color: rgba(0, 0, 0, .45); text-wrap: pretty;
}
.story-close em { font-style: normal; font-weight: 590; color: rgba(0, 0, 0, .7); }

/* ---------- Act Three: channel picker ---------- */

.act3 { display: flex; flex-direction: column; gap: 44px; padding: 96px 60px 88px; }
.ch-wrap { display: flex; gap: 56px; align-items: flex-start; }

/* Radio inputs drive the panels with no JavaScript. They sit before the panels
   so :checked ~ works, and stay keyboard operable as a real radio group. */
.ch-radio { position: absolute; opacity: 0; pointer-events: none; }
.visually-hidden {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap;
}
.ch-left {
  display: flex; flex-direction: column; gap: 20px; width: 420px;
  margin: 0; padding: 0; border: 0;
}
.ch-tabs { display: flex; gap: 6px; padding: 3px; border-radius: 10px; background: rgba(0, 0, 0, .05); }
.ch-tab {
  flex: 1; display: flex; align-items: center; justify-content: center;
  height: 32px; border-radius: 8px; cursor: pointer;
  font-size: 13px; font-weight: 450; color: rgba(0, 0, 0, .5);
  transition: background .2s ease, color .2s ease;
}
.ch-copy { display: flex; flex-direction: column; gap: 14px; }
.ch-blurb { font-size: 15px; line-height: 1.6; color: rgba(0, 0, 0, .58); text-wrap: pretty; }
.ch-copy .points { margin-top: 0; }

.ch-right { flex: 1; display: flex; flex-direction: column; }
.ch-panel {
  display: flex; flex-direction: column; min-height: 300px;
  border-radius: 14px; background: #fff;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 18px 44px -22px rgba(0, 0, 0, .34);
  overflow: hidden;
}
.ch-bar {
  display: flex; align-items: center; gap: 10px; height: 44px; padding: 0 18px;
  border-bottom: 1px solid var(--hairline); background: rgba(0, 0, 0, .02);
}
.ch-glyph {
  position: relative; display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 7px; background: rgba(0, 0, 0, .05);
}
.ch-glyph svg { position: relative; z-index: 1; }
.ch-glyph .ripple { border-radius: 7px; background: rgba(52, 199, 89, .28); }
.ch-surface { font-size: 13.5px; font-weight: 590; letter-spacing: -.01em; color: rgba(0, 0, 0, .82); }
.ch-meta { margin-left: auto; font-size: 11.5px; font-weight: 510; color: rgba(0, 0, 0, .3); }
.ch-thread { display: flex; flex-direction: column; padding: 18px 20px 22px; }
.thread-row { display: flex; gap: 11px; padding: 11px 0; border-bottom: 1px solid rgba(0, 0, 0, .05); }
.thread-icon {
  flex: none; width: 28px; height: 28px; border-radius: 8px; background: rgba(0, 0, 0, .05);
  display: flex; align-items: center; justify-content: center;
}
.thread-text { display: flex; flex-direction: column; gap: 3px; }
.thread-head { display: flex; align-items: baseline; gap: 8px; }
.thread-name { font-size: 13px; font-weight: 590; color: rgba(0, 0, 0, .82); }
.thread-meta { font-size: 11.5px; color: rgba(0, 0, 0, .3); }
.thread-body { font-size: 14px; line-height: 1.45; color: rgba(0, 0, 0, .62); }
.ch-closing { padding-top: 14px; font-size: 12.5px; line-height: 1.55; color: var(--label-3); }

/* Only the selected channel's blurb and panel are shown. */
.ch-blurb, .ch-panel { display: none; }
#ch-slack:checked ~ .ch-left .ch-blurb-slack,
#ch-telegram:checked ~ .ch-left .ch-blurb-telegram,
#ch-email:checked ~ .ch-left .ch-blurb-email { display: block; }
#ch-slack:checked ~ .ch-right .ch-panel-slack,
#ch-telegram:checked ~ .ch-right .ch-panel-telegram,
#ch-email:checked ~ .ch-right .ch-panel-email {
  display: flex; animation: wMsgIn .34s cubic-bezier(.2, .8, .25, 1) both;
}
#ch-slack:checked ~ .ch-left .ch-tab-slack,
#ch-telegram:checked ~ .ch-left .ch-tab-telegram,
#ch-email:checked ~ .ch-left .ch-tab-email {
  background: #fff; font-weight: 560; color: rgba(0, 0, 0, .85);
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .08), 0 1px 2px rgba(0, 0, 0, .1);
}
/* Keyboard focus has to be visible on the label, since the input is hidden. */
.ch-radio:focus-visible ~ .ch-left .ch-tabs { outline: 2px solid var(--link); outline-offset: 3px; }

/* ---------- Act Four: the payoff ---------- */

.act4 {
  display: flex; flex-direction: column; gap: 44px;
  padding: 88px 60px; background: var(--band); border-top: 1px solid var(--hairline);
}
.act4 .story-head h2 { font-size: 40px; letter-spacing: -.03em; line-height: 1.08; }
.perm-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.perm-card {
  display: flex; flex-direction: column; gap: 11px;
  padding: 26px 26px 28px; border-radius: 13px; background: #fff;
  box-shadow: 0 0 0 .5px rgba(0, 0, 0, .07);
}
.perm-icon {
  display: flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; border-radius: 9px; background: rgba(0, 0, 0, .045);
}
.perm-card h3 { margin-top: 4px; font-size: 17px; font-weight: 590; letter-spacing: -.016em; line-height: 1.3; }
.perm-card p { font-size: 14px; line-height: 1.55; color: rgba(0, 0, 0, .52); text-wrap: pretty; }

/* BEGIN story positions (generated) */
/* GENERATED by tools/build-story.py — do not edit by hand.
   Act One's rows are positioned proportionally to elapsed time, which the
   design computes in JS. This site ships no JS and its CSP forbids inline
   styles, so the positions live here instead. */
.tl-a1 { top: 60px; }
.tl-a1 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.71); }
.tl-a1 .tl-time { color: rgba(0,0,0,0.34); }
.tl-a2 { top: 96px; }
.tl-a2 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.70); }
.tl-a2 .tl-time { color: rgba(0,0,0,0.34); }
.tl-a3 { top: 132px; }
.tl-a3 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.70); }
.tl-a3 .tl-time { color: rgba(0,0,0,0.34); }
.tl-a4 { top: 168px; }
.tl-a4 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.68); }
.tl-a4 .tl-time { color: rgba(0,0,0,0.33); }
.tl-a5 { top: 204px; }
.tl-a5 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.68); }
.tl-a5 .tl-time { color: rgba(0,0,0,0.33); }
.tl-a6 { top: 240px; }
.tl-a6 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.67); }
.tl-a6 .tl-time { color: rgba(0,0,0,0.33); }
.tl-a7 { top: 276px; }
.tl-a7 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.65); }
.tl-a7 .tl-time { color: rgba(0,0,0,0.33); }
.tl-a8 { top: 312px; }
.tl-a8 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.65); }
.tl-a8 .tl-time { color: rgba(0,0,0,0.33); }
.tl-a9 { top: 348px; }
.tl-a9 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.64); }
.tl-a9 .tl-time { color: rgba(0,0,0,0.32); }
.tl-a10 { top: 384px; }
.tl-a10 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.62); }
.tl-a10 .tl-time { color: rgba(0,0,0,0.32); }
.tl-a11 { top: 420px; }
.tl-a11 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.61); }
.tl-a11 .tl-time { color: rgba(0,0,0,0.32); }
.tl-a12 { top: 456px; }
.tl-a12 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.59); }
.tl-a12 .tl-time { color: rgba(0,0,0,0.31); }
.tl-a13 { top: 492px; }
.tl-a13 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.58); }
.tl-a13 .tl-time { color: rgba(0,0,0,0.31); }
.tl-a14 { top: 528px; }
.tl-a14 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.56); }
.tl-a14 .tl-time { color: rgba(0,0,0,0.31); }
.tl-a15 { top: 564px; }
.tl-a15 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.54); }
.tl-a15 .tl-time { color: rgba(0,0,0,0.30); }
.tl-a16 { top: 600px; }
.tl-a16 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.53); }
.tl-a16 .tl-time { color: rgba(0,0,0,0.30); }
.tl-a17 { top: 636px; }
.tl-a17 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.51); }
.tl-a17 .tl-time { color: rgba(0,0,0,0.30); }
.tl-a18 { top: 672px; }
.tl-a18 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.49); }
.tl-a18 .tl-time { color: rgba(0,0,0,0.29); }
.tl-a19 { top: 708px; }
.tl-a19 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.46); }
.tl-a19 .tl-time { color: rgba(0,0,0,0.29); }
.tl-a20 { top: 744px; }
.tl-a20 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.44); }
.tl-a20 .tl-time { color: rgba(0,0,0,0.28); }
.tl-a21 { top: 780px; }
.tl-a21 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.42); }
.tl-a21 .tl-time { color: rgba(0,0,0,0.28); }
.tl-a22 { top: 816px; }
.tl-a22 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.42); }
.tl-a22 .tl-time { color: rgba(0,0,0,0.28); }
.tl-a23 { top: 860px; }
.tl-a23 .tl-text { font-size: 16px; font-weight: 560; color: rgba(0,0,0,.62); }
.tl-a23 .tl-time { color: rgba(0,0,0,0.34); }
.tl-b1 { top: 60px; }
.tl-b1 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.71); }
.tl-dot1 { background: #FF3B30; }
.tl-b2 { top: 148px; }
.tl-b2 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.68); }
.tl-dot2 { background: rgba(0,0,0,.22); }
.tl-b3 { top: 236px; }
.tl-b3 .tl-text { font-size: 15px; font-weight: 450; color: rgba(0,0,0,0.65); }
.tl-dot3 { background: rgba(0,0,0,.22); }
.tl-b4 { top: 860px; }
.tl-b4 .tl-text { font-size: 16px; font-weight: 560; color: #1E7B36; }
.tl-dot4 { background: #34C759; }
/* END story positions (generated) */

/* ---------- motion ---------- */

@keyframes wBreathe { 0%, 100% { opacity: 1; } 50% { opacity: .45; } }
@keyframes wRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

@keyframes wGlow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(52, 199, 89, .45); }
  60% { box-shadow: 0 0 0 6px rgba(52, 199, 89, 0); }
}
@keyframes wGlowRed {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255, 59, 48, .45); }
  60% { box-shadow: 0 0 0 6px rgba(255, 59, 48, 0); }
}

/* The 12s loop: operational -> outage -> recovered -> operational. */
@keyframes wOp  { 0%, 20% { opacity: 1; } 24%, 95% { opacity: 0; } 100% { opacity: 1; } }
@keyframes wOut { 0%, 22% { opacity: 0; } 26%, 55% { opacity: 1; } 59%, 100% { opacity: 0; } }
@keyframes wRec { 0%, 57% { opacity: 0; } 61%, 92% { opacity: 1; } 96%, 100% { opacity: 0; } }

@keyframes wNotifOut {
  0%, 27% { opacity: 0; transform: translateY(8px) scale(.99); }
  31%, 50% { opacity: 1; transform: none; }
  54%, 100% { opacity: 0; transform: translateY(-4px); }
}
@keyframes wNotifRec {
  0%, 62% { opacity: 0; transform: translateY(8px) scale(.99); }
  66%, 88% { opacity: 1; transform: none; }
  92%, 100% { opacity: 0; transform: translateY(-4px); }
}

@keyframes wRipple {
  0% { opacity: .5; transform: scale(.7); }
  70%, 100% { opacity: 0; transform: scale(1.9); }
}

/* The notification moment: outage, then recovery, on a 9s loop. */
@keyframes wBnOut {
  0%, 3% { opacity: 0; transform: translateY(10px) scale(.99); }
  9%, 40% { opacity: 1; transform: none; }
  46%, 100% { opacity: 0; transform: translateY(-6px); }
}
@keyframes wBnRec {
  0%, 49% { opacity: 0; transform: translateY(10px) scale(.99); }
  55%, 90% { opacity: 1; transform: none; }
  96%, 100% { opacity: 0; transform: translateY(-6px); }
}

@keyframes wReveal { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@keyframes wLine { from { transform: scaleY(0); } to { transform: scaleY(1); } }
@keyframes wMsgIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
@keyframes wFaq { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }

/* Scroll reveal only where the browser supports scroll-driven animation.
   The default state is visible, so content can never be stranded hidden. */
@supports (animation-timeline: view()) {
  [data-reveal] {
    animation: wReveal .01s linear both;
    animation-timeline: view();
    animation-range: entry 3% cover 22%;
  }
  /* The spine fills as the story scrolls past. */
  [data-spine] {
    transform-origin: top;
    animation: wLine .01s linear both;
    animation-timeline: view();
    animation-range: entry 20% cover 70%;
  }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  /* With the loop stopped, show the state the page is really about. */
  .popover-state.st-op, .menubar-icon .st-op { opacity: 1; }
  .popover-state.st-out, .popover-state.st-rec,
  .menubar-icon .st-out, .menubar-icon .st-rec { opacity: 0; }
  .toast { opacity: 0; }
  .toast-rec { opacity: 1; }
  /* Settle on the notification the section is about. */
  .bn-out { opacity: 0; }
  .bn-rec { opacity: 1; }
}

/* ---------- responsive ----------
   The design is a 1440pt desktop composition. Below that the sections stack
   rather than compress, so nothing truncates and the type stays at its
   designed size for as long as it fits. */

/* Tablet / small laptop: single column, keep desktop type. */
@media (max-width: 1100px) {
  .hero, .remote, .split, .faq { flex-direction: column; gap: 44px; }
  .hero-copy, .remote-copy, .split-right { max-width: none; width: auto; }
  .faq > h2, .split-right { width: auto; }
  .steps { grid-template-columns: 1fr; gap: 32px; }
  .story-head { flex-direction: column; align-items: flex-start; gap: 16px; }
  .story-head > p { max-width: none; }
  .ch-wrap { flex-direction: column; gap: 32px; }
  .ch-left { width: auto; }
  .perm-grid { grid-template-columns: 1fr; gap: 20px; }
  .popover-wrap { justify-content: center; padding: 10px 20px 40px; }
  .hero h1 { font-size: 52px; }
  .svc-hero { padding-left: 20px; padding-right: 20px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 12px; }
  .section-head h2, .section-head p { max-width: none; }
  .desktop { width: 100%; }
}

/* Phone. The whole page becomes one column with 20px gutters; the hero
   mockup keeps its real 320pt popover width and scrolls nothing sideways. */
@media (max-width: 760px) {
  .nav {
    height: auto; padding: 14px 20px; gap: 12px;
    flex-wrap: wrap; justify-content: space-between;
  }
  .nav-links { gap: 0 16px; flex-wrap: wrap; row-gap: 10px; }
  /* The Download button is already the hero CTA; repeating it in a wrapped
     nav on a phone just costs a line. */
  .nav-links .btn { display: none; }

  .hero { padding: 40px 20px 48px; gap: 36px; }
  .hero h1 { font-size: 40px; letter-spacing: -.03em; }
  .hero-sub { font-size: 16px; margin-top: 18px; }
  .hero-actions { margin-top: 26px; gap: 8px; flex-wrap: wrap; }
  .btn-lg, .btn-quiet { height: 46px; }          /* comfortable tap targets */
  .btn-lg { flex: 1 1 auto; justify-content: center; min-width: 200px; }

  /* The toasts are 296px wide and would sit under the popover on a phone,
     so they move to the gutter and the stage gets room for them. */
  .toasts { left: 10px; right: 10px; width: auto; }
  .toast { width: 100%; max-width: 296px; }
  .popover-wrap { padding-top: 96px; }

  .section, .remote, .split, .faq { padding: 52px 20px; }
  .story, .act3, .act4 { padding: 52px 20px; }
  .story-head h2, .act4 .story-head h2 { font-size: 28px; }
  /* Two absolutely-placed timelines will not fit side by side on a phone, so
     the columns stack and each axis shrinks to the height it actually needs. */
  .story-cols { flex-direction: column; gap: 40px; }
  .story-col, .story-col-right { padding: 0; }
  .story-spine { display: none; }
  .tl-axis { height: auto; }
  .tl-row { position: static; margin-bottom: 12px; }
  .tl-thread, .tl-gap { position: static; }
  .tl-gap { margin: 24px 0; max-width: none; }
  .tl-thread { display: none; }
  .pricing { padding: 52px 20px; }
  .final { padding: 60px 20px 68px; }
  .moment { padding: 60px 20px 68px; gap: 32px; }

  .section-head { margin-bottom: 32px; }
  .section-head h2 { font-size: 28px; }
  .steps { gap: 28px; }
  .step-t { font-size: 18px; }

  .moment h2 { font-size: 30px; }
  .moment-sub { font-size: 15px; }
  /* The notification is the product — let it use the full width it has. */
  .banner { width: 100%; max-width: 400px; }
  .banner-stage { width: 100%; max-width: 400px; height: 78px; }

  .remote-copy h2 { font-size: 30px; }
  .remote-copy > p { font-size: 15px; }

  .service-grid { grid-template-columns: 1fr; gap: 0; }

  .plans { flex-direction: column; }
  .plan { padding: 26px 22px 24px; }
  .plan-grow { display: none; }                  /* no need to align columns when stacked */
  .plan-divider { width: auto; height: 1px; }
  .plan-cta { height: 46px; }

  .svc-hero { padding: 36px 20px 44px; }
  .svc-hero h1 { font-size: 34px; }
  .svc-lede { font-size: 16px; }
  .faq > h2 { font-size: 26px; }
  .faq-q { gap: 20px; padding: 18px 0; }
  .faq-a { padding-right: 0; padding-bottom: 18px; }

  .final h2 { font-size: 30px; }
  .final .btn { height: 46px; width: 100%; max-width: 320px; }

  .footer { flex-direction: column; align-items: flex-start; gap: 16px; padding: 24px 20px 32px; }
  .footer-links { flex-wrap: wrap; gap: 8px 20px; }
}

/* Small phones: the 320pt popover is exactly the width of the gutterless
   viewport, so shrink the mockup's own padding rather than the popover. */
@media (max-width: 400px) {
  .hero h1 { font-size: 34px; }
  .popover-wrap { padding: 96px 8px 28px; }
  .desktop { border-radius: 14px; }
  .plan-price { font-size: 26px; }
}