/* ==========================================================================
   US Disaster Alert — "Public notice" design system
   Print logic: structure comes from scale, hard rules and one alarm red.
   No cards, no shadows, no border radius. Red appears only where something
   is actually wrong, so it never competes with the interface.

   VIEWPORT FIT
   Every section fills one screen. That works because the root font size is
   driven by the viewport, so type, spacing and rules all scale together —
   the layout is identical on a 13" laptop and a 32" monitor, just larger.
   Sections use min-height, never height, so nothing is ever clipped: if a
   screen is too short for the content, that section grows and scrolls.
   ========================================================================== */

/* --- Fluid root ---------------------------------------------------------
   Everything downstream is in rem, so this one rule scales the entire page.
   Weighted toward viewport height because height is what constrains a
   full-screen section; the vw term keeps narrow windows from over-shrinking. */

html {
  font-size: clamp(12.5px, calc(0.58vh + 0.40vw + 2.6px), 18.5px);
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 0;
}

/* No scroll snapping. It was on the landing page, and the hero was a snap
   target sitting directly below the masthead — so the browser snapped the
   hero to the top on load and scrolled the header off-screen, which is why
   you had to scroll up to find it. Proximity snapping also fought the user
   mid-scroll, which read as the page staggering. Sections still fill the
   screen; they just no longer grab the scroll position. */

@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* --- Tokens ------------------------------------------------------------- */

:root {
  --paper:       #F3F5F7;
  --paper-pure:  #FFFFFF;
  --ink:         #11171C;
  --ink-soft:    #2A343C;
  --mute:        #5C6A74;
  --rule:        #C9D2D8;
  --rule-strong: #11171C;

  /* Severity. Never used for interactive elements. */
  --sev-extreme:  #E02B20;
  --sev-elevated: #A65B00;
  --sev-watch:    #5C6A74;

  --font-display: "Archivo Black", "Arial Black", sans-serif;
  --font-text:    Archivo, "Helvetica Neue", Arial, sans-serif;
  --font-data:    "IBM Plex Mono", ui-monospace, Menlo, monospace;

  --w-page:  74rem;
  --w-app:   42rem;
  --gutter:  8.5rem;    /* left margin column for section markers */
  --pad-x:   2.6rem;
  --header-h: 4.4rem;

  /* Vertical rhythm inside a full-screen section. */
  --band-pad: clamp(1.5rem, 5vh, 3.4rem);
  --head-gap: clamp(1.1rem, 3.4vh, 2.4rem);
}

/* --- Base --------------------------------------------------------------- */

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

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-text);
  font-size: 1rem;
  line-height: 1.58;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-weight: 400; letter-spacing: -0.025em; line-height: 1.03; }
p { margin: 0; }
ul, ol, dl, dd { margin: 0; padding: 0; }
li { list-style: none; }
img, svg { display: block; max-width: 100%; }

a { color: var(--ink); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--sev-extreme); outline-offset: 2px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; }
}

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--ink); color: var(--paper);
  padding: 0.75rem 1.2rem; font-weight: 600; text-decoration: none;
}
.skip-link:focus { left: 0; }

.visually-hidden {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --- Shell -------------------------------------------------------------- */

.sheet     { width: min(100%, var(--w-page)); margin-inline: auto; padding-inline: var(--pad-x); }
.sheet-app { width: min(100%, var(--w-app));  margin-inline: auto; padding-inline: var(--pad-x); }

/* One section, one screen. min-height means content is never clipped. */
.band {
  min-height: 100svh;
  display: grid;
  align-content: center;
  padding-block: var(--band-pad);
}
.band-ruled { border-top: 2px solid var(--rule-strong); }

/* The hero shares its screen with the masthead. */
.hero { min-height: calc(100svh - var(--header-h)); }

/* Section marker sits above its title, and the band spans the full sheet.
   It used to live in an 8.5rem left margin like print marginalia, which cost
   every section that much width and left them visibly narrower than the
   hero. Above the title it reads the same and the content runs edge to edge. */
.band-head {
  margin-bottom: var(--head-gap);
}
.band-marker {
  font-family: var(--font-data);
  font-size: 0.72rem;
  color: var(--mute);
  margin-bottom: 0.6rem;
}
.band-title { font-size: min(2.35rem, 6.5vw); max-width: 22ch; }
.band-lede { margin-top: 0.85rem; color: var(--mute); font-size: 1.02rem; max-width: 58ch; }

.band-body {
  display: block;
}

/* The empty markers inside .band-body existed only to hold the old gutter
   column open. With no gutter they are dead weight. */
.band-body > .band-marker { display: none; }

/* --- Header ------------------------------------------------------------- */

.masthead { background: var(--paper); }
.masthead-inner {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  min-height: var(--header-h);
  border-bottom: 2px solid var(--rule-strong);
}
.wordmark {
  font-family: var(--font-display);
  font-size: 0.98rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}
.wordmark:hover { text-decoration: none; }

.nav { margin-left: auto; display: flex; align-items: center; gap: 1.45rem; }
.nav-link { font-size: 0.88rem; color: var(--mute); text-decoration: none; }
.nav-link:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 4px; }

.nav-toggle {
  display: none;
  margin-left: auto;
  font: 600 0.85rem var(--font-text);
  padding: 0.5rem 0.9rem;
  background: none;
  border: 2px solid var(--ink);
  color: var(--ink);
  cursor: pointer;
}

.nav-drawer { display: none; }
.nav-drawer.is-open {
  display: block;
  border-bottom: 2px solid var(--rule-strong);
  padding-block: 1rem 1.5rem;
}
.nav-drawer a { display: block; padding-block: 0.6rem; text-decoration: none; font-size: 0.95rem; }
.nav-drawer .btn { margin-top: 0.9rem; }

@media (max-width: 900px) {
  .nav { display: none; }
  .nav-toggle { display: block; }
}

/* --- Buttons ------------------------------------------------------------ */

.btn {
  display: inline-block;
  font: 600 0.88rem var(--font-text);
  padding: 0.75rem 1.45rem;
  border: 2px solid var(--ink);
  background: none;
  color: var(--ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color 0.12s linear, color 0.12s linear;
}
.btn:hover { text-decoration: none; }
.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover { background: var(--ink-soft); }
.btn-open:hover { background: var(--ink); color: var(--paper); }
.btn-block { display: block; width: 100%; text-align: center; }

.invert .btn { border-color: var(--paper); color: var(--paper); }
.invert .btn-solid { background: var(--paper); color: var(--ink); }
.invert .btn-solid:hover { background: #fff; }
.invert .btn-open:hover { background: var(--paper); color: var(--ink); }

/* --- Hero --------------------------------------------------------------- */

.hero-title { font-size: min(4.35rem, 11.5vw); line-height: 0.93; max-width: 19ch; }
.hero-grid {
  display: grid;
  grid-template-columns: 1.08fr 0.92fr;
  gap: 3rem;
  margin-top: clamp(1.25rem, 4vh, 2.4rem);
  align-items: start;
}
.hero-lede { font-size: 1.05rem; line-height: 1.6; color: var(--mute); max-width: 48ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: 0.7rem; margin-top: 1.6rem; }
.hero-fine { margin-top: 1rem; font-size: 0.85rem; color: var(--mute); }

@media (max-width: 900px) {
  .hero-grid { grid-template-columns: 1fr; gap: 2.25rem; }
}

/* --- Notice (the alert artifact) ---------------------------------------- */

.notice { border: 2px solid var(--ink); background: var(--paper-pure); }
.notice-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0.9rem;
  background: var(--sev-watch);
  color: #fff;
  font: 600 0.74rem var(--font-text);
  letter-spacing: 0.08em;
}
.notice[data-severity="extreme"]  .notice-bar { background: var(--sev-extreme); }
.notice[data-severity="elevated"] .notice-bar { background: var(--sev-elevated); }

.notice-body { padding: 1.05rem 1.1rem 1.2rem; }
.notice-event { font-size: 1.42rem; line-height: 1.06; }
.notice-where { margin-top: 0.35rem; font-size: 0.86rem; color: var(--mute); }
.notice-text { margin-top: 0.8rem; font-size: 0.91rem; line-height: 1.52; }

.notice-fields {
  margin-top: 1rem;
  padding-top: 0.8rem;
  border-top: 1px solid var(--rule);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.26rem 1.2rem;
  font-family: var(--font-data);
  font-size: 0.71rem;
}
.notice-fields dt { color: var(--mute); }
.notice-fields dd { margin: 0; }

.notice-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
@media (max-width: 900px) { .notice-row { grid-template-columns: 1fr; } }

/* --- Comparison --------------------------------------------------------- */

.versus { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.versus-col { padding-right: 2.25rem; }
.versus-col + .versus-col { padding-right: 0; padding-left: 2.25rem; border-left: 2px solid var(--rule-strong); }
.versus-name { font-size: 1.22rem; }
.versus-sub { margin-top: 0.3rem; font-size: 0.85rem; color: var(--mute); }
.versus-list { margin-top: 1.2rem; }
.versus-list li { padding: 0.62rem 0; border-top: 1px solid var(--rule); font-size: 0.92rem; }
.versus-note { margin-top: 1.8rem; font-size: 0.9rem; color: var(--mute); max-width: 70ch; }

@media (max-width: 780px) {
  .versus { grid-template-columns: 1fr; }
  .versus-col { padding-right: 0; }
  .versus-col + .versus-col {
    padding-left: 0; border-left: 0;
    border-top: 2px solid var(--rule-strong); margin-top: 1.75rem; padding-top: 1.75rem;
  }
}

/* --- Coverage table ----------------------------------------------------- */

.coverage { width: 100%; border-collapse: collapse; text-align: left; }
.coverage th {
  font-family: var(--font-data);
  font-size: 0.7rem;
  font-weight: 400;
  color: var(--mute);
  padding: 0 0 0.6rem;
  border-bottom: 2px solid var(--rule-strong);
  vertical-align: bottom;
}
.coverage td { padding: 0.85rem 1.5rem 0.85rem 0; border-bottom: 1px solid var(--rule); vertical-align: top; }
.coverage td:last-child { padding-right: 0; }
.coverage .c-hazard { font-weight: 600; width: 19%; }
.coverage .c-what { color: var(--ink-soft); font-size: 0.9rem; width: 43%; }
.coverage .c-source { font-family: var(--font-data); font-size: 0.71rem; color: var(--mute); line-height: 1.5; }

@media (max-width: 780px) {
  .coverage, .coverage tbody, .coverage tr, .coverage td { display: block; width: 100%; }
  .coverage thead { display: none; }
  .coverage tr { border-bottom: 1px solid var(--rule); padding-block: 0.9rem; }
  .coverage td { border: 0; padding: 0 0 0.35rem; }
  .coverage .c-hazard { width: auto; font-size: 1.05rem; }
  .coverage .c-what { width: auto; }
}

/* --- Steps (a real sequence, so numbered) ------------------------------- */

.steps { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; }
.step { padding: 0 1.75rem; border-left: 1px solid var(--rule); }
.step:first-child { padding-left: 0; border-left: 0; }
.step:last-child { padding-right: 0; }
.step-n { font-family: var(--font-data); font-size: 0.72rem; color: var(--sev-extreme); display: block; margin-bottom: 0.6rem; }
.step h3 { font-size: 1.1rem; }
.step p { margin-top: 0.55rem; font-size: 0.91rem; color: var(--mute); }

@media (max-width: 780px) {
  .steps { grid-template-columns: 1fr; }
  .step { padding: 1.35rem 0 0; border-left: 0; border-top: 1px solid var(--rule); margin-top: 1.35rem; }
  .step:first-child { margin-top: 0; border-top: 0; padding-top: 0; }
}

/* --- Plans -------------------------------------------------------------- */

.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; align-items: stretch; }
.plan {
  padding: 1.6rem 1.6rem 1.75rem;
  border: 2px solid var(--rule-strong);
  border-right-width: 0;
  display: flex;
  flex-direction: column;
}
.plan:last-child { border-right-width: 2px; }
.plan-featured { background: var(--ink); color: var(--paper); }
.plan-featured .plan-for,
.plan-featured .plan-annual,
.plan-featured .plan-list li { color: #B9C4CC; }
.plan-featured .plan-list li { border-top-color: #35424C; }

.plan-flag { font-family: var(--font-data); font-size: 0.68rem; color: var(--sev-extreme); display: block; margin-bottom: 0.45rem; }
.plan-featured .plan-flag { color: #FF7A70; }
.plan-name { font-size: 1.18rem; }
.plan-price { margin-top: 0.8rem; font-family: var(--font-display); font-size: 2.35rem; letter-spacing: -0.035em; line-height: 1; }
.plan-price span { font-family: var(--font-text); font-size: 0.85rem; font-weight: 500; letter-spacing: 0; color: var(--mute); }
.plan-featured .plan-price span { color: #B9C4CC; }
.plan-annual { margin-top: 0.35rem; font-size: 0.82rem; color: var(--mute); }
.plan-for { margin-top: 0.85rem; font-size: 0.89rem; color: var(--mute); }
.plan-list { margin-top: 1.15rem; margin-bottom: 1.6rem; }
.plan-list li { padding: 0.5rem 0; border-top: 1px solid var(--rule); font-size: 0.88rem; }
.plan-cta { margin-top: auto; }
.plan-note { margin-top: 1.6rem; font-size: 0.86rem; color: var(--mute); max-width: 74ch; }

@media (max-width: 900px) {
  .plans { grid-template-columns: 1fr; }
  .plan { border-right-width: 2px; border-bottom-width: 0; }
  .plan:last-child { border-bottom-width: 2px; }
}

/* --- Questions ---------------------------------------------------------- */

.qa { display: grid; grid-template-columns: 1fr 1fr; gap: 0 3rem; }
.qa-item { padding: 1.05rem 0; border-top: 1px solid var(--rule); }
.qa-q { font-size: 1rem; }
.qa-a { margin-top: 0.5rem; font-size: 0.9rem; color: var(--mute); }

@media (max-width: 780px) { .qa { grid-template-columns: 1fr; } }

/* --- Finale: closer and footer share the last screen -------------------- */

.finale { display: grid; grid-template-rows: 1fr auto; }
.finale-full { min-height: 100svh; }

.closer { background: var(--ink); color: var(--paper); display: grid; align-content: center; padding: 3rem var(--pad-x); }
.closer-inner {
  width: min(100%, var(--w-page));
  margin-inline: auto;
  display: flex;
  flex-wrap: wrap;
  gap: 2rem;
  align-items: center;
  justify-content: space-between;
}
.closer h2 { font-size: min(2.2rem, 6vw); max-width: 20ch; }
.closer p { margin-top: 0.75rem; color: #B9C4CC; max-width: 44ch; font-size: 0.95rem; }

/* --- Footer ------------------------------------------------------------- */

.footer { background: var(--ink); color: var(--paper); padding-block: 2.5rem 2rem; border-top: 1px solid #35424C; }
.footer-grid { display: grid; grid-template-columns: 1.7fr 1fr 1fr 1fr; gap: 2.5rem; }
.footer h3 { font-family: var(--font-text); font-weight: 600; font-size: 0.85rem; margin-bottom: 0.8rem; }
.footer-name { font-family: var(--font-display); font-size: 0.96rem; }
.footer-disclaimer { margin-top: 0.8rem; font-size: 0.79rem; line-height: 1.55; color: #8D99A3; max-width: 44ch; }
.footer-links li { padding-block: 0.26rem; }
.footer-links a { color: #B9C4CC; font-size: 0.87rem; text-decoration: none; }
.footer-links a:hover { color: var(--paper); text-decoration: underline; text-underline-offset: 3px; }
.footer-base {
  margin-top: 2rem; padding-top: 1.2rem;
  border-top: 1px solid #35424C;
  display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between;
  font-size: 0.77rem; color: #8D99A3;
}

@media (max-width: 780px) { .footer-grid { grid-template-columns: 1fr 1fr; } }

/* --- Flash messages ----------------------------------------------------- */

.flashes { margin-bottom: 1.5rem; }
.flash {
  border: 2px solid var(--ink);
  border-left-width: 6px;
  background: var(--paper-pure);
  padding: 0.8rem 1.05rem;
  margin-bottom: 0.75rem;
  font-size: 0.91rem;
}
.flash-error   { border-left-color: var(--sev-extreme); }
.flash-warning { border-left-color: var(--sev-elevated); }
.flash-success { border-left-color: var(--ink); }

/* --- Narrow and short screens -------------------------------------------
   Below these thresholds a full screen can't hold a section without
   squeezing type past readability, so sections revert to natural height
   and snapping is switched off. Content always wins over the effect. */

@media (max-width: 900px) {
  :root { --gutter: 0rem; --pad-x: 1.4rem; }
}

@media (max-width: 780px), (max-height: 540px) {
  .band, .hero, .finale-full { min-height: 0; }
  .band { padding-block: 2.75rem; }
  .hero { padding-block: 2.25rem 3rem; }
}

/* --- App pages and forms ------------------------------------------------
   Auth screens are not full-viewport sections; they size to their content
   so a keyboard opening on mobile never pushes fields out of reach. */

.page { padding-block: clamp(2rem, 6vh, 4rem); }
.page-title { font-size: min(2.1rem, 7vw); }
.page-lede { margin-top: 0.8rem; color: var(--mute); font-size: 1rem; max-width: 54ch; }

.form { margin-top: 2rem; max-width: 30rem; }
.field { margin-bottom: 1.2rem; }
.field-label { display: block; font-weight: 600; font-size: 0.9rem; margin-bottom: 0.4rem; }
.field-hint { margin-top: 0.4rem; font-size: 0.8rem; color: var(--mute); }
.field-input {
  width: 100%;
  font: 400 1rem var(--font-text);
  color: var(--ink);
  background: var(--paper-pure);
  border: 2px solid var(--ink);
  padding: 0.7rem 0.85rem;
}
.field-input::placeholder { color: #9AA8B1; }
.field-input:focus { outline: 3px solid var(--sev-extreme); outline-offset: 0; }

.form-error {
  border: 2px solid var(--sev-extreme);
  border-left-width: 6px;
  background: var(--paper-pure);
  padding: 0.8rem 1rem;
  margin-bottom: 1.4rem;
  font-size: 0.9rem;
}
.form-actions { margin-top: 1.6rem; }
.form-aside { margin-top: 1.5rem; padding-top: 1.2rem; border-top: 1px solid var(--rule); font-size: 0.9rem; color: var(--mute); }
.form-aside a { color: var(--ink); }

.legal-note { margin-top: 1.2rem; font-size: 0.78rem; color: var(--mute); line-height: 1.55; max-width: 44ch; }

/* Verification reminder shown across the app until the address is confirmed. */
.banner {
  border: 2px solid var(--ink);
  border-left-width: 6px;
  border-left-color: var(--sev-elevated);
  background: var(--paper-pure);
  padding: 0.9rem 1.1rem;
  margin-bottom: 1.75rem;
  font-size: 0.9rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem;
  align-items: center;
  justify-content: space-between;
}
.banner form { margin: 0; }
.banner .btn { padding: 0.45rem 0.9rem; font-size: 0.8rem; }

.prose { max-width: 62ch; margin-top: 1.5rem; }
.prose p + p { margin-top: 1rem; }

.error-code { font-family: var(--font-data); font-size: 0.8rem; color: var(--mute); margin-bottom: 0.6rem; }

/* --- Signed-in area -----------------------------------------------------
   App screens are working surfaces, not marketing. They size to content and
   use a wider shell than the auth forms. Same rules as everything else:
   hard 2px divisions, no shadows, no radius, red reserved for severity. */

.app { padding-block: clamp(1.75rem, 5vh, 3rem); }

.app-head {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding-bottom: 1rem;
  border-bottom: 2px solid var(--rule-strong);
  margin-bottom: 1.75rem;
}
.app-title { font-size: min(2rem, 7vw); }
.app-sub { margin-top: 0.4rem; color: var(--mute); font-size: 0.92rem; }

/* Section tabs. A rule under the active one, no pills, no background. */
.tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 2rem;
}
.tab {
  padding: 0.6rem 0 0.7rem;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--mute);
  text-decoration: none;
  border-bottom: 3px solid transparent;
  margin-bottom: -1px;
}
.tab:hover { color: var(--ink); text-decoration: none; }
.tab[aria-current="page"] { color: var(--ink); border-bottom-color: var(--ink); }

.panel { border: 2px solid var(--rule-strong); margin-bottom: 1.75rem; }
.panel-head {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem 1rem;
  align-items: baseline;
  justify-content: space-between;
  padding: 0.9rem 1.1rem;
  border-bottom: 2px solid var(--rule-strong);
}
.panel-title { font-size: 1.05rem; }
.panel-body { padding: 1.1rem; }
.panel-body > p + p { margin-top: 0.8rem; }

/* Record rows. Separated by hairlines rather than boxed as cards. */
.rows { }
.row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.5rem 1.25rem;
  align-items: start;
  padding: 0.95rem 1.1rem;
  border-top: 1px solid var(--rule);
}
.row:first-child { border-top: 0; }
.row-main { min-width: 0; }
.row-title { font-weight: 600; font-size: 0.98rem; }
.row-meta {
  margin-top: 0.3rem;
  font-family: var(--font-data);
  font-size: 0.71rem;
  color: var(--mute);
  line-height: 1.6;
  overflow-wrap: anywhere;
}
.row-actions { display: flex; gap: 0.5rem; align-items: center; }
.row-actions .btn { padding: 0.45rem 0.9rem; font-size: 0.8rem; }

/* Severity tag. The only place colour carries meaning. */
.tag {
  display: inline-block;
  font: 600 0.68rem var(--font-text);
  letter-spacing: 0.07em;
  padding: 0.2rem 0.5rem;
  color: #fff;
  background: var(--sev-watch);
  white-space: nowrap;
}
.tag-extreme  { background: var(--sev-extreme); }
.tag-severe   { background: var(--sev-elevated); }
.tag-moderate { background: var(--sev-elevated); }
.tag-minor    { background: var(--sev-watch); }
.tag-unknown  { background: var(--sev-watch); }

/* Neutral status marker, deliberately not coloured — a delivery state is
   not a severity and must never read like one. */
.state {
  font-family: var(--font-data);
  font-size: 0.7rem;
  color: var(--mute);
  white-space: nowrap;
}

.empty {
  padding: 2rem 1.1rem;
  text-align: center;
  color: var(--mute);
  font-size: 0.93rem;
}
.empty .btn { margin-top: 1rem; }

/* Preferences grid: one row per hazard. */
.pref-row {
  display: grid;
  grid-template-columns: 1.1fr 1.4fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1.1rem;
  border-top: 1px solid var(--rule);
}
.pref-row:first-child { border-top: 0; }
.pref-name { font-weight: 600; font-size: 0.95rem; }
.pref-select {
  width: 100%;
  font: 400 0.9rem var(--font-text);
  color: var(--ink);
  background: var(--paper-pure);
  border: 2px solid var(--ink);
  padding: 0.5rem 0.6rem;
}
.pref-select:disabled { opacity: 0.45; }
.check { display: inline-flex; align-items: center; gap: 0.45rem; font-size: 0.86rem; }
.check input { width: 1.05rem; height: 1.05rem; accent-color: var(--ink); }

.field-row { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-end; }
.field-row .field { flex: 1 1 10rem; margin-bottom: 0; }

@media (max-width: 720px) {
  .pref-row { grid-template-columns: 1fr; gap: 0.6rem; }
  .row { grid-template-columns: 1fr; }
  .row-actions { justify-content: flex-start; }
}

/* Status page latency figures. */
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0; }
.stat { padding: 1.1rem; border-left: 1px solid var(--rule); }
.stat:first-child { border-left: 0; }
.stat-value { font-family: var(--font-display); font-size: 1.9rem; letter-spacing: -0.03em; }
.stat-label { margin-top: 0.3rem; font-size: 0.8rem; color: var(--mute); }
.stat-ok   { color: var(--ink); }
.stat-bad  { color: var(--sev-extreme); }

/* "planned" marker on plan bullets.
   Deliberately not red: alarm red is reserved for severity, and a feature
   that does not exist yet is not an emergency. Monospace and quiet, so it
   reads as a label rather than a sales badge. */
.soon {
  display: inline-block;
  font: 600 0.62rem var(--font-data);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.1rem 0.4rem;
  margin-left: 0.35rem;
  color: var(--ink-soft);
  background: transparent;
  border: 1px solid var(--rule-strong);
  vertical-align: 0.08em;
  white-space: nowrap;
}
.plan-featured .soon { color: #B9C4CC; border-color: #35424C; }

/* --- Flash region --------------------------------------------------------
   Pinned to the top of the viewport rather than the top of the document.
   Messages used to render above a full-screen hero, so anything triggered
   from further down the page — a failed checkout from the pricing section —
   was reported somewhere the person was not looking, and the button simply
   looked broken. */
.flash-region {
  position: sticky;
  top: 0;
  z-index: 50;
  padding-top: 1rem;
  background: var(--paper);
  border-bottom: 2px solid var(--rule-strong);
  padding-bottom: 0.25rem;
}
.flash {
  display: flex;
  align-items: flex-start;
  gap: 0.9rem;
  justify-content: space-between;
}
.flash-close {
  flex: none;
  background: none;
  border: 0;
  font: 400 1.25rem/1 var(--font-text);
  color: var(--mute);
  cursor: pointer;
  padding: 0 0.15rem;
}
.flash-close:hover { color: var(--ink); }

@media (prefers-reduced-motion: no-preference) {
  .flash-region { scroll-margin-top: 0; }
}

/* --- Spacing utilities ---------------------------------------------------
   These exist because the Content-Security-Policy sets style-src 'self',
   which blocks inline style attributes as well as <style> blocks. Every
   style="..." in the templates was being dropped by the browser, silently —
   the markup looked fine and the spacing simply never applied. Classes are
   served from this file, so they are allowed. */
.u-inline  { display: inline; }
.u-mt-xs   { margin-top: 0.35rem; }
.u-mt-sm   { margin-top: 0.9rem; }
.u-mt-md   { margin-top: 1.1rem; }
.u-ml-sm   { margin-left: 0.5rem; }
.rows-ruled { border-top: 2px solid var(--rule-strong); }