/* MadLeadz app styles — implements The Mad Botter design system
   ("engineering paper meets terminal"): paper surfaces, hairline rules,
   uppercase condensed headings, lowercase mono eyebrows. */

* { box-sizing: border-box; }

/* Offset in-page anchor jumps so the sticky nav never covers the target. */
html { scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* MadLeadz product accent (brand green in product duty) — from the design comp. */
:root {
  --ml-teal: #8cc63f;
  --ml-teal-deep: #6fa32f;
  --ml-teal-soft: #edf5e0;
  --radius-card: 8px;
}

@keyframes mlpulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.45; }
}

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: var(--leading-body);
  color: var(--text-body);
  background: var(--surface-page);
}

.container { width: min(1140px, 100% - 40px); margin-inline: auto; }

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  line-height: var(--leading-display);
  color: var(--text-heading);
  margin: 0 0 16px;
}
h1 { font-size: clamp(3rem, 6vw, 5.4rem); }
h2 { font-size: clamp(1.9rem, 3.4vw, 2.7rem); }
h3 { font-size: 1.35rem; }

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--text-eyebrow);
  text-transform: lowercase;
  color: var(--purple);
  display: block;
  margin-bottom: 12px;
}

.lede { font-size: var(--text-lede); color: var(--text-secondary); max-width: 620px; }

/* --- Nav --- */
.site-nav {
  position: sticky; top: 0; z-index: 10;
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav-inner { display: flex; align-items: center; justify-content: space-between; padding: 14px 0; }
.wordmark {
  display: inline-flex; align-items: center; gap: 9px;
  font-family: var(--font-display); font-weight: 800; font-size: 1.55rem;
  letter-spacing: 0.02em; text-transform: uppercase; line-height: 1;
  color: var(--ink-deep);
  text-decoration: none;
}
.wordmark .dot {
  width: 11px; height: 11px; border-radius: 999px;
  background: var(--ml-teal);
  animation: mlpulse 2s infinite;
}
.wordmark .accent { color: var(--ml-teal); }
@media (prefers-reduced-motion: reduce) { .wordmark .dot { animation: none; } }
/* Radar logo mark — replaces the legacy pulse dot in the wordmark. */
.wordmark-mark { width: 26px; height: 26px; display: block; flex: none; }
.site-footer .wordmark-mark { width: 20px; height: 20px; }
.nav-links { display: flex; align-items: center; gap: 22px; }
.nav-links a {
  font-family: var(--font-body); font-weight: 800; font-size: var(--text-nav);
  text-transform: uppercase; text-decoration: none; color: var(--ink);
}
.nav-links a:hover { color: var(--purple-deep); }
.nav-signout {
  font-family: var(--font-mono); font-size: var(--text-caption);
  background: none; border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 6px 12px; color: var(--muted); cursor: pointer;
}
.nav-toggle {
  display: none; line-height: 0; cursor: pointer;
  background: none; border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 10px 11px; color: var(--ink);
}
.nav-toggle:hover { border-color: var(--purple); color: var(--purple-deep); }

/* Base links: inline content links inherit brand purple, never the UA blue. */
a { color: var(--purple-deep); }
a:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 3px; }

/* --- Hero (grid-paper motif) --- */
.hero {
  background-color: var(--paper-soft);
  background-image:
    linear-gradient(rgba(123, 74, 160, 0.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(123, 74, 160, 0.07) 1px, transparent 1px);
  background-size: 34px 34px;
  border-bottom: 1px solid var(--line);
  padding: 72px 0;
}

/* --- Buttons --- */
.btn {
  display: inline-block;
  font-family: var(--font-body); font-weight: 800; font-size: var(--text-nav);
  text-transform: uppercase; text-decoration: none; text-align: center;
  border: none; border-radius: 6px; cursor: pointer;
  padding: 13px 26px;
  transition: transform 160ms ease, background-color 160ms ease;
}
.btn:hover { transform: translateY(-1px); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); }
.btn-primary, a.btn-primary, a.btn-primary:visited,
input[type="submit"].btn-primary { background: var(--action-primary); color: #fff; }
.btn-primary:hover { background: var(--action-primary-hover); color: #fff; }
.btn-secondary { background: var(--action-secondary); color: var(--tmb-black); }
.btn-ghost {
  background: var(--surface-card); color: var(--ink);
  border: 1px solid var(--line-strong);
}
.btn-google, .btn-microsoft {
  display: inline-flex; align-items: center; gap: 10px;
  background: #fff; color: #3c4043;
  border: 1px solid #dadce0; border-radius: 6px;
  font-family: var(--font-body); font-weight: 500; font-size: 0.95rem;
  text-transform: none; letter-spacing: 0;
  padding: 11px 20px;
}
.btn-google:hover, .btn-microsoft:hover { background: #f8f9fa; border-color: #d2d5d9; }
.btn-ghost:hover { border-color: var(--purple); color: var(--purple-deep); }
.btn-full { display: block; width: 100%; }

/* --- Landing: hero grid + lead brief showcase --- */
.hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(380px, 0.95fr);
  gap: 52px; align-items: center;
}
@media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; } }
.hero-note { margin-top: 18px; font-family: var(--font-mono); font-size: 0.82rem; color: var(--muted); }
.eyebrow-teal { color: var(--ml-teal-deep); }

/* Hero CTA: Google is the anchor (elevated); "see how it works" is a quiet link. */
.hero-cta { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 32px; }
.hero-cta .btn-google { box-shadow: var(--shadow-soft); padding: 13px 22px; }
.hero-cta .btn-google:focus-visible { box-shadow: var(--shadow-soft), 0 0 0 3px var(--focus-ring); }
.hero-cta .btn-ghost {
  background: transparent; border-color: transparent; color: var(--purple);
  text-decoration: underline; text-underline-offset: 4px; text-decoration-color: var(--line-strong);
}
.hero-cta .btn-ghost:hover {
  transform: none; border-color: transparent; color: var(--purple-deep);
  text-decoration-color: currentColor;
}

.brief-card {
  border: 1px solid var(--line-strong);
  border-left: 5px solid var(--ml-teal);
  border-radius: var(--radius-card);
  background: linear-gradient(135deg, rgba(140, 198, 63, 0.07), transparent 46%), #fff;
  box-shadow: 0 6px 22px rgba(123, 74, 160, 0.1);
  overflow: hidden;
}
.brief-card .brief-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  font-family: var(--font-mono); font-size: 0.78rem; color: var(--muted);
}
.brief-card .relevance {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 0.74rem; font-weight: 700; color: var(--green-deep); text-transform: uppercase;
}
.brief-card .relevance .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--green); }
.brief-card .brief-body { padding: 20px 18px; }
.brief-card .brief-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.7rem;
  text-transform: uppercase; line-height: 1; color: var(--ink-deep);
}
.brief-card .brief-role { margin-top: 5px; color: var(--paper-dim); font-size: 0.98rem; }
.brief-card .brief-facts {
  display: grid; grid-template-columns: auto 1fr; gap: 6px 14px;
  margin: 16px 0; font-size: 0.9rem;
}
.brief-card .brief-facts .k { color: var(--muted); font-family: var(--font-mono); font-size: 0.8rem; }
.brief-card .brief-signal { border-top: 1px dashed var(--line-strong); padding-top: 14px; }
.brief-card .brief-signal p { margin: 0 0 8px; font-size: 0.98rem; }
.brief-card .brief-source {
  display: flex; gap: 14px;
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--muted);
}
.brief-card .brief-source a { color: var(--purple); text-decoration: none; }

.pill {
  display: inline-block; font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700;
  text-transform: uppercase; border-radius: 999px; padding: 3px 9px;
}
.pill-signal { color: var(--ml-teal-deep); background: var(--ml-teal-soft); margin-bottom: 8px; }
.pill-verified {
  font-size: 0.68rem; color: var(--green-deep);
  border: 1px solid var(--green); padding: 1px 7px;
}

/* --- Landing: how it works + pricing --- */
.three-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; align-items: stretch; }
@media (max-width: 900px) { .three-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 599px) { .three-grid { grid-template-columns: 1fr; } }
.step-num { font-family: var(--font-mono); font-size: 0.8rem; font-weight: 700; color: var(--ml-teal-deep); }
.step-card h3 { margin: 10px 0 8px; font-size: 1.5rem; }
.step-card p { margin: 0; color: var(--paper-dim); font-size: 0.98rem; }

.section-alt { background: var(--paper-soft); border-bottom: 1px solid var(--line); }

.price-card { display: flex; flex-direction: column; position: relative; }
.price-card .tier {
  font-family: var(--font-mono); font-size: 0.78rem; font-weight: 700;
  text-transform: uppercase; color: var(--muted);
}
.price-card .tier-featured { color: var(--ml-teal-deep); }
.price-card .price {
  margin: 8px 0 2px; font-family: var(--font-display); font-weight: 700;
  font-size: 3.4rem; line-height: 0.9; color: var(--purple-deep);
}
.price-card .price .per { font-family: var(--font-body); font-size: 0.9rem; font-weight: 800; color: var(--muted); }
.price-card .who { margin: 4px 0 18px; color: var(--paper-dim); font-size: 0.92rem; }
.price-card .features { display: flex; flex-direction: column; gap: 9px; font-size: 0.95rem; flex: 1; }
.price-card .features .f { display: flex; gap: 9px; }
.price-card .features .yes { color: var(--green-deep); font-weight: 800; }
.price-card .features .no { color: var(--muted); }
.price-card .cta { margin-top: 20px; }
.price-card.featured { border-color: var(--ml-teal); box-shadow: 0 6px 22px rgba(123, 74, 160, 0.1); }
.popular-badge {
  position: absolute; top: -12px; left: 26px;
  font-family: var(--font-mono); font-size: 0.7rem; font-weight: 700; text-transform: uppercase;
  color: #fff; background: var(--purple); border-radius: 999px; padding: 3px 11px;
}

/* --- Landing footer --- */
.site-footer { padding: 40px 0; }
.site-footer .inner {
  display: flex; flex-wrap: wrap; gap: 16px 40px;
  align-items: center; justify-content: space-between;
}
.site-footer .tag { color: var(--muted); font-size: 0.85rem; margin-left: 8px; }
.site-footer .glass { margin: 0; color: var(--purple-deep); font-family: var(--font-mono); font-size: 0.82rem; }

/* --- Cards & callouts --- */
.card {
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  box-shadow: var(--shadow-soft, 0 2px 10px rgba(123, 74, 160, 0.06));
  padding: 24px;
}
.callout {
  border: 1px solid var(--line-strong); border-radius: 8px;
  padding: 14px 18px; margin: 18px 0;
  background: var(--surface-card);
}
.callout-ok { box-shadow: inset 5px 0 0 var(--green); }
.callout-danger { box-shadow: inset 5px 0 0 var(--danger); }

/* --- Stat readouts --- */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; margin: 26px 0; }
/* Five stat cards: auto-fit strands one on its own row at tablet width, so pin
   the full row from where it fits. */
@media (min-width: 700px) { .stat-grid { grid-template-columns: repeat(5, 1fr); } }
.stat-card {
  background: var(--surface-card);
  background-image: linear-gradient(135deg, rgba(123, 74, 160, 0.08), transparent 48%);
  border: 1px solid var(--line-strong); border-radius: 8px; padding: 18px 20px;
}
.stat-card .stat-label {
  font-family: var(--font-mono); font-size: var(--text-caption);
  text-transform: lowercase; color: var(--muted);
}
.stat-card .stat-value {
  font-family: var(--font-display); font-size: 2.6rem; line-height: 1;
  color: var(--purple-deep); margin-top: 6px;
}

/* --- First-run matches: lead cards streaming in --- */
.lead-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 16px; margin-top: 20px;
}
.lead-card {
  border: 1px solid var(--line-strong); border-left: 4px solid var(--green);
  border-radius: 8px; padding: 16px 18px;
  background: var(--surface-card); box-shadow: var(--shadow-soft);
}
.lead-card-name {
  font-family: var(--font-display); font-weight: 700; font-size: 1.3rem;
  text-transform: uppercase; line-height: 1; color: var(--ink-deep);
}
.lead-card-role { margin-top: 5px; color: var(--paper-dim); font-size: 0.92rem; }
.lead-card-email { margin-top: 10px; font-size: 0.9rem; }
.lead-card-why {
  margin-top: 10px; padding-top: 10px;
  border-top: 1px dashed var(--line-strong); font-size: 0.9rem;
}

/* --- Tables --- */
/* Scroll wide tables inside their own box so the page never scrolls sideways
   on mobile (the data tables exceed 375px otherwise). */
.table-wrap { overflow-x: auto; max-width: 100%; margin-top: 14px; -webkit-overflow-scrolling: touch; }
.table-wrap > table.data { margin-top: 0; }

/* Scroll-shadow cue: a soft fade on whichever edge still has columns
   off-screen, so a narrow screen shows the table scrolls sideways. The cover
   layers (background-attachment: local) ride with the content and hide the
   shadow at the very ends, so it only appears while there's more to scroll.
   Cover colour must match the page background behind the table. */
.table-wrap-fade {
  background:
    linear-gradient(to right, var(--surface-page) 30%, transparent) 0 0 / 44px 100% no-repeat local,
    linear-gradient(to left, var(--surface-page) 30%, transparent) 100% 0 / 44px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(35, 31, 32, 0.16), transparent) 0 0 / 16px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(35, 31, 32, 0.16), transparent) 100% 0 / 16px 100% no-repeat scroll;
}
table.data { width: 100%; border-collapse: collapse; margin-top: 14px; }
table.data th {
  font-family: var(--font-mono); font-size: var(--text-caption); text-transform: lowercase;
  text-align: left; color: var(--muted); font-weight: 400;
  border-bottom: 1px solid var(--line-strong); padding: 8px 10px;
}
table.data td { border-bottom: 1px solid var(--line); padding: 10px; font-size: var(--text-small); }

table.data th a {
  display: inline-flex; align-items: center; gap: 5px; min-height: 32px;
  color: inherit; text-decoration: none; white-space: nowrap;
}
table.data th a:hover { color: var(--purple-deep); }
table.data th a:focus-visible { outline: 2px solid var(--purple); outline-offset: 3px; border-radius: 2px; }
.lead-data-table { min-width: 920px; }
.lead-list-heading {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  margin-top: 32px;
}
.lead-list-heading h3 { margin: 0; }
.lead-list-tabs { display: flex; flex-wrap: wrap; gap: 6px; }
.lead-list-tabs a {
  min-height: 40px; display: inline-flex; align-items: center;
  padding: 8px 12px; border: 1px solid var(--line-strong); border-radius: 6px;
  font-family: var(--font-mono); font-size: var(--text-caption); text-decoration: none;
}
.lead-list-tabs a.active { background: var(--surface-selected); border-color: var(--green); color: var(--ink-deep); }
.lead-review-actions { display: flex; gap: 6px; }
.lead-review-actions form { margin: 0; }
.lead-review-btn {
  width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center;
  border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface-card);
  cursor: pointer; font-size: 1rem;
}
.lead-review-btn-labeled {
  width: auto; gap: 8px; padding: 0 14px;
  font-family: var(--font-body); font-weight: 800; text-transform: uppercase;
}
.lead-detail-actions { margin-top: 18px; }
.linkedin-message-card { margin-top: 20px; }
.linkedin-message-heading {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 18px;
}
.linkedin-message-heading h2 { margin: 5px 0 0; font-size: 1.25rem; }
.linkedin-message-heading .hint { flex: none; }
.linkedin-message-copy {
  margin: 18px 0 10px; padding: 16px;
  border-left: 4px solid var(--purple); background: var(--paper-soft);
  font-size: 1.02rem; line-height: 1.6;
}
.lead-review-btn:hover { transform: translateY(-1px); }
.lead-review-btn:focus-visible { outline: 3px solid var(--focus-ring); outline-offset: 2px; }
.lead-review-up { border-color: var(--green); }
.lead-review-down { border-color: var(--danger); }
.lead-review-up:hover { border-color: var(--green); background: rgba(140, 198, 63, 0.12); }
.lead-review-down:hover { border-color: var(--danger); background: rgba(209, 63, 91, 0.1); }

@media (max-width: 640px) {
  .lead-list-heading { align-items: stretch; flex-direction: column; }
  .lead-list-tabs a { flex: 1; justify-content: center; min-height: 44px; }
  .linkedin-message-heading { align-items: flex-start; flex-direction: column; gap: 8px; }
  .lead-data-table.has-actions th:last-child, .lead-data-table.has-actions td:last-child {
    position: sticky; right: 0; background: var(--surface-page);
    box-shadow: -8px 0 8px -8px rgba(35, 31, 32, 0.18);
  }
}

/* Prev / page-count / next controls under a paginated table. */
.pager { display: flex; align-items: center; gap: 14px; margin-top: 16px; }

/* Lead tables grouped by ICP: a labeled header row before each group. */
tr.icp-group td {
  background: var(--paper-soft); color: var(--purple-deep);
  font-weight: 700; font-size: var(--text-caption); letter-spacing: 0.01em;
  border-top: 2px solid var(--line-strong);
}

.icp-row-archived { opacity: 0.58; }
.icp-row-archived td { background: var(--paper-soft); }
.icp-card-list { display: none; }
.icp-summary-card {
  padding: 16px; background: var(--surface-card);
  border: 1px solid var(--line-strong); border-radius: 8px;
  box-shadow: var(--shadow-soft);
}
.icp-summary-card-archived { opacity: 0.65; background: var(--paper-soft); }
.icp-summary-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; }
.icp-summary-head > div { min-width: 0; }
.icp-summary-name {
  display: inline-flex; align-items: center; min-height: 44px;
  font-family: var(--font-display); font-size: 1.2rem; font-weight: 700;
  line-height: 1.1; text-transform: uppercase;
}
.icp-summary-head .pill { margin-left: 8px; }
.icp-summary-action { flex: none; min-height: 44px; padding: 11px 16px; }
.icp-summary-metrics {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px;
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line);
}
.icp-summary-metrics div { min-width: 0; }
.icp-summary-metrics dt {
  font-family: var(--font-mono); font-size: var(--text-caption);
  color: var(--muted); text-transform: lowercase;
}
.icp-summary-metrics dd { margin: 5px 0 0; color: var(--ink); font-size: var(--text-small); }
.icp-page-actions {
  display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin-top: 24px;
}
.btn-danger { color: #9d2940; border-color: rgba(157, 41, 64, 0.42); }
.btn-danger:hover { background: rgba(209, 63, 91, 0.1); border-color: #9d2940; }

@media (max-width: 560px) {
  .icp-page-actions { align-items: stretch; }
  .icp-page-actions > a, .icp-page-actions > form, .icp-page-actions .btn { width: 100%; }
  .icp-page-actions .btn { justify-content: center; text-align: center; }
}

@media (max-width: 640px) {
  .icp-table-wrap { display: none; }
  .icp-card-list { display: grid; gap: 12px; margin-top: 14px; }
}

.badge {
  font-family: var(--font-mono); font-size: var(--text-caption);
  border-radius: 6px; padding: 2px 8px;
}
.badge-verified { background: rgba(140, 198, 63, 0.18); color: var(--green-deep); }
.badge-risky { background: rgba(234, 163, 60, 0.18); color: #a86a12; }

/* --- Forms --- */
.field { margin-bottom: 18px; }
.field label {
  display: block;
  font-family: var(--font-mono); font-size: var(--text-caption);
  text-transform: lowercase; color: var(--muted); margin-bottom: 6px;
}
.field input[type="text"],
.field input[type="email"],
.field input[type="password"],
.field input[type="url"],
.field input[type="search"],
.field input[type="tel"],
.field input[type="number"] {
  width: 100%; min-height: 44px;
  font-family: var(--font-body); font-size: var(--text-base);
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 11px 13px; background: var(--surface-card); color: var(--ink);
}
.field input[type="text"]:focus,
.field input[type="email"]:focus,
.field input[type="password"]:focus,
.field input[type="url"]:focus,
.field input[type="search"]:focus,
.field input[type="tel"]:focus,
.field input[type="number"]:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-color: var(--green); }
.field textarea {
  width: 100%; min-height: 44px;
  font-family: var(--font-body); font-size: var(--text-base); line-height: 1.4;
  border: 1px solid var(--line-strong); border-radius: 6px;
  padding: 11px 13px; background: var(--surface-card); color: var(--ink);
  resize: vertical;
}
.field textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--focus-ring); border-color: var(--green); }

/* Auth cards: every control spans the card, Google button included
   (button_to wraps the button in a form that must also stretch). */
.card form.button_to { width: 100%; }
.card .btn-google, .card .btn-microsoft { width: 100%; justify-content: center; }
.card input[type="submit"], .card .btn-full { padding: 13px 26px; }
.field .hint { font-size: var(--text-caption); color: var(--muted); margin-top: 4px; }
.checks { display: flex; flex-wrap: wrap; gap: 10px; }
.checks input { accent-color: var(--purple); }
.checks label {
  display: inline-flex; align-items: center; gap: 7px; min-height: 44px;
  font-family: var(--font-body); font-size: var(--text-small); color: var(--ink);
  border: 1px solid var(--line-strong); border-radius: 6px; padding: 8px 12px; cursor: pointer;
}
.checks label:has(input:checked) { background: var(--surface-selected); box-shadow: inset 4px 0 0 var(--green); }
.checks input[type="checkbox"]:focus-visible { outline: 2px solid var(--purple); outline-offset: 2px; }

.section { padding: 42px 0; }

@media (prefers-reduced-motion: reduce) {
  .btn { transition: none; }
}

/* --- Mobile nav: collapse links behind a hamburger dropdown --- */
@media (max-width: 640px) {
  .nav-toggle { display: inline-flex; align-items: center; }
  .nav-links {
    display: none;
    position: absolute; top: 100%; left: 0; right: 0;
    flex-direction: column; align-items: stretch; gap: 4px;
    padding: 12px var(--container-pad, 20px) 16px;
    background: var(--surface-card);
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow);
  }
  .site-nav.nav-open .nav-links { display: flex; }
  .nav-links a { padding: 12px 4px; }
  .nav-links form { width: 100%; }
  .nav-links .btn-google,
  .nav-links .nav-signout { width: 100%; min-height: 44px; justify-content: center; }

  .hero-cta { flex-direction: column; align-items: stretch; }
  .hero-cta .btn-google { width: 100%; justify-content: center; }
  .hero-cta .btn-ghost { text-align: center; }
}

/* --- What's new: one-time release announcement --- */
/* Sits above .site-nav (z-index 10). No JS behind it, so the panel must never
   grow past the viewport — there is no scroll lock and no escape hatch but the
   button. */
.whats-new-scrim {
  position: fixed; inset: 0; z-index: 100;
  display: flex; align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(35, 31, 32, 0.55);
  backdrop-filter: blur(4px);
}
/* Column, not a scrolling block: the heading and the dismiss button stay put
   while only the list scrolls, so a short viewport can never push the one way
   out of the dialog below the fold. */
.whats-new {
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px; max-height: 85vh; overflow: hidden;
  padding: 30px 32px 28px;
  background: var(--surface-card);
  border: 1px solid var(--line-strong);
  border-radius: 12px;
  box-shadow: 0 18px 50px rgba(35, 31, 32, 0.28);
  animation: whats-new-rise 240ms ease-out both;
}
/* Brand secondaries as a hairline over the panel — the one flourish. */
.whats-new::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px;
  border-radius: 12px 12px 0 0;
  background: linear-gradient(90deg, var(--tmb-purple), var(--tmb-green));
}
.whats-new h2 {
  font-family: var(--font-display); font-weight: 800;
  font-size: 1.7rem; line-height: 1.15;
  color: var(--purple-deep); margin: 0 0 22px;
}

/* min-height:0 so the flex item may shrink below its content and actually scroll. */
.whats-new-list {
  list-style: none; margin: 0; padding: 0 4px 0 0; counter-reset: whats-new;
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
}
.whats-new-list li {
  counter-increment: whats-new;
  position: relative; padding: 0 0 16px 34px; margin-bottom: 16px;
  border-bottom: 1px solid var(--line);
}
.whats-new-list li:last-child { border-bottom: 0; margin-bottom: 0; padding-bottom: 0; }
.whats-new-list li::before {
  content: counter(whats-new, decimal-leading-zero);
  position: absolute; left: 0; top: 3px;
  font-family: var(--font-mono); font-size: 0.76rem; color: var(--purple);
}
.whats-new-list h3 {
  font-size: 1rem; font-weight: 700; color: var(--ink-deep); margin: 0 0 5px;
}
.whats-new-list p { margin: 0; color: var(--paper-dim); font-size: 0.94rem; line-height: 1.55; }

.whats-new form.button_to { margin: 22px 0 0; flex: 0 0 auto; }
.whats-new-dismiss { width: 100%; justify-content: center; }

@keyframes whats-new-rise {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .whats-new { animation: none; }
}

/* Bottom sheet on phones: the panel owns the full width and sits in thumb reach. */
@media (max-width: 560px) {
  .whats-new-scrim { align-items: flex-end; padding: 0; }
  .whats-new {
    max-width: none; max-height: 92vh;
    padding: 26px 20px 22px;
    border-radius: 14px 14px 0 0; border-bottom: 0;
  }
  .whats-new::before { border-radius: 14px 14px 0 0; }
  .whats-new h2 { font-size: 1.45rem; }
  .whats-new-dismiss { min-height: 44px; }
}