/* ===== Morning Engine tokens (2026 redesign) ===== */
@font-face {
  font-family: "Cabinet Grotesk";
  src: url("/fonts/CabinetGrotesk-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}
@font-face {
  font-family: "Switzer";
  src: url("/fonts/Switzer-Variable.woff2") format("woff2");
  font-weight: 100 1000;
  font-display: swap;
}
:root {
  --daylight: #FDFBF7;
  --ink: #16192B;
  --night: #1C1F33;
  --night-raised: #242841;
  --night-border: #33385A;
  --night-rule: #2C3049;
  --night-text: #E9E7F2;
  --night-muted: #9BA1C4;
  --night-faint: #7C82A6;
  --sunrise: #FF6A3D;
  --sunrise-deep: #E85A2E;
  --sunrise-soft: #FF8A5C;
  --body-muted: #5D5A50;
  --body-subtle: #8B8578;
  --line-soft: #E7E2D7;
  --display: "Cabinet Grotesk", "Helvetica Neue", -apple-system, sans-serif;
  --body: "Switzer", -apple-system, "Segoe UI", Roboto, Helvetica, sans-serif;
  --mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
.wordmark { font-family: var(--display); font-weight: 800; font-size: 1.25rem; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; }
.wordmark i { font-style: normal; color: var(--sunrise); }
.ts { font-family: var(--mono); font-variant-numeric: tabular-nums; }
/* ===== end Morning Engine tokens ===== */

/* ===== Landing page (Morning Engine) ===== */
.lp h1, .lp h2 { font-family: var(--display); letter-spacing: -0.025em; color: var(--ink); line-height: 1.12; }
.lp h1 { font-size: clamp(2.1rem, 5.4vw, 3.4rem); font-weight: 800; max-width: 20ch; margin: 0 0 22px; }
.lp h2 { font-size: clamp(1.5rem, 3.4vw, 2.2rem); font-weight: 800; margin: 0 0 20px; }
.lp p { color: var(--body-muted); }
.wrap { max-width: 1080px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 56px); }
.wrap-narrow { max-width: 720px; }
/* No solid fill — the continuous .page-sky gradient flows through the hero so the descent
   from daylight into dusk is one uninterrupted ramp (no hard edge at the hero's bottom). */
.lp-hero { padding: 28px 0 44px; background: transparent; }
.lp-nav { display: flex; justify-content: space-between; align-items: center; margin-bottom: 72px; }
.lp-login { font-size: 0.9rem; color: var(--body-muted); text-decoration: none; }
.lp-login:hover { color: var(--ink); }
.lp-lede { font-size: 1.12rem; line-height: 1.6; max-width: 52ch; margin: 0 0 30px; }
.lp-cta-row { display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.lp-quiet { color: var(--body-subtle); text-decoration: none; font-size: 0.95rem; }
.lp-quiet:hover { color: var(--ink); }
.lp-hero-grid { display: grid; grid-template-columns: 1fr; gap: 40px; align-items: center; }
.lp-hero-art { margin: 0; }
.lp-hero-art svg { display: block; width: 100%; max-width: 440px; height: auto; margin-inline: auto; filter: drop-shadow(0 6px 34px rgba(14,16,32,0.30)); }
@media (min-width: 820px) {
  .lp-hero-grid { grid-template-columns: 1.05fr 0.95fr; gap: 56px; }
  .lp-hero-art svg { max-width: 470px; margin-inline: 0 0; }
}
/* Quiet entrance — the found lead lifts in; the robot's eyes breathe. Off for reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  .lp-hero-art { opacity: 0; transform: translateY(12px); animation: lp-hero-in .7s ease-out .1s forwards; }
  .lp-hero-lead { transform-box: view-box; opacity: 0; animation: lp-hero-in .7s ease-out .6s forwards; }
  .lp-eye { animation: lp-eye-pulse 3.6s ease-in-out infinite; }
  /* the search: the magnifier sweeps around the shoulder, and the found lead glows as it passes */
  .lp-glass { transform-box: view-box; transform-origin: 256px 236px; animation: lp-sweep 4.8s ease-in-out infinite; }
  .lp-lead-glow { animation: lp-found 4.8s ease-in-out infinite; }
}
@keyframes lp-hero-in { to { opacity: 1; transform: translateY(0); } }
@keyframes lp-eye-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.5; } }
@keyframes lp-sweep { 0%, 100% { transform: rotate(-6deg); } 50% { transform: rotate(5deg); } }
@keyframes lp-found { 0%, 42%, 100% { opacity: 0.1; } 66% { opacity: 0.46; } }

/* --- Scrollytelling scenes --- */
.scene-track { position: relative; }
.scene-copy-inner { max-width: 30rem; }
.lp-scene-cue { color: var(--body-subtle); font-size: 1rem; }
.scene--night { color: var(--night-text); position: relative; }

/* One continuous sky behind the whole page (document-tall gradient), so brightness flows
   smoothly day -> night -> dawn -> day as you scroll (no pinned dark strip). */
.lp { position: relative; }
.page-sky { position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: linear-gradient(180deg,
    #FDFBF7 0%, #FDFBF7 10%, #4A4364 16%, #2A2440 24%, #1C1F33 31%,
    #1C1F33 52%, #C96F4A 60%, #FF9E6B 67%, #FBE0CC 70%, #FDFBF7 74%, #FDFBF7 100%); }
.page-sky-art { position: absolute; top: 13%; left: 0; width: 100%; height: 57%; }
@media (prefers-reduced-motion: no-preference) { .ps-signal { animation: lp-twinkle 2.4s ease-in-out infinite; } }
.ps-signal:nth-child(2) { animation-delay: .5s; } .ps-signal:nth-child(3) { animation-delay: 1s; }
.ps-signal:nth-child(4) { animation-delay: 1.5s; } .ps-signal:nth-child(5) { animation-delay: .8s; }
.scene--night .lp-night-label { color: var(--night-faint); text-transform: uppercase; margin: 0 0 8px; }
.scene--night .lp-time { color: var(--sunrise-soft); }
/* Keep the night copy off the screen edge, and tighten the label/time/line rhythm. */
.scene--night .scene-track { position: relative; z-index: 1; max-width: 1120px; margin-inline: auto; padding-inline: clamp(22px, 5vw, 56px); }
.scene--night .scene-copy-inner p { margin: 0 0 6px; }
/* Full-bleed night->dawn sky behind the floating robot: an absolute full-section layer (out of
   flow, so no page-height games) with a sticky inner that pins to the viewport. */
.scene-sky { position: absolute; inset: 0; z-index: 0; overflow: clip; }
.scene-sky-inner { position: sticky; top: 0; height: 100vh; background: linear-gradient(180deg, #1C1F33, #2A2F4C); }
.scene-sky-dawn { position: absolute; inset: 0; background: linear-gradient(180deg, #241F36 0%, #C96F4A 58%, #FF9E6B 100%); opacity: clamp(0, calc((var(--progress, 0) - 0.6) / 0.25), 1); }
.scene-sky-art { position: absolute; inset: 0; width: 100%; height: 100%; }
.scene--night h2 { color: var(--night-text); }
.scene--night .lp-sunrise-sub { color: var(--night-muted); }
/* Beat 4 lands on the light dawn sky, so its copy is dark (the other beats stay light on night). */
.scene--night .beat[data-beat="4"] h2 { color: #16192B; }
.scene--night .beat[data-beat="4"] .lp-sunrise-sub { color: #241C14; }
.scene--night .beat[data-beat="4"] .lp-time { color: #16192B; }
/* Beat 3 (draft) sits on the dark night sky, so its intro copy + time stay light like the
   earlier beats (the draft panel below carries its own dark background + light text). */
.scene--night .beat[data-beat="3"] .lp-draft { background: rgba(28,31,51,0.92); border-color: rgba(255,255,255,0.12); }

/* The enemy heading sits high in the sky where it's still light — black reads best there.
   The belief heading is deeper in the dusk, so it stays light. */
#enemy .wrap > h2 { color: #16192B; }
.lp-act-belief .wrap > h2 { color: #F2EEF8; }
#enemy .wrap > p { color: #CFC9DD; }
.lp-act-belief .lp-beliefs li { color: #CFC9DD; }
.lp-act-belief .lp-beliefs strong { color: #F2EEF8; }
.scene--night p { color: var(--night-text); }
.scene--night .lp-draft { margin-top: 16px; background: var(--night-raised); border: 1px solid var(--night-border); border-radius: 10px; padding: 18px 20px; }
.scene--night .lp-draft-subj { color: var(--night-muted); font-size: 0.9rem; margin: 0 0 8px; }
.scene--night .lp-draft footer { margin-top: 12px; font-size: 0.72rem; color: var(--night-faint); }

/* Desktop: two columns; sticky robot stage on the right, beats scroll on the left. */
@media (min-width: 820px) {
  .scene-track { display: grid; grid-template-columns: minmax(0,1fr) minmax(0,1fr); gap: 48px; align-items: start; }
  .scene--hero .scene-track { grid-template-columns: 1.05fr 0.95fr; }
  .scene-copy { grid-column: 1; }
  .scene-stage { grid-column: 2; position: sticky; top: 0; height: 100vh; display: grid; place-items: center; will-change: transform; }
  .scene-stage .lp-hero-art { margin: 0; }
  .scene-stage .lp-hero-art svg { max-width: 540px; width: 100%; height: auto; }
  /* Single robot: the night robot is FIXED in place, one instance visible across the whole
     narrative (hero -> dawn). JS fades it out (--robot-op) before pricing. */
  .scene--night .scene-stage { position: fixed; top: 0; left: 50%; width: min(48vw, 620px); height: 100vh; z-index: 1; pointer-events: none; opacity: var(--robot-op, 1); transition: opacity .12s linear; }
  .scene--night .scene-stage .lp-hero-art svg { max-width: 500px; }
  /* Narrative copy stays in the left column so the fixed robot (right) never sits on top of it. */
  #enemy .wrap, .lp-act-belief .wrap { max-width: 1080px; }
  #enemy .wrap > *, .lp-act-belief .wrap > * { max-width: 34rem; }
  .beat { min-height: 74vh; display: flex; align-items: center; }
  /* Hero is a short intro: don't pin (too short to matter) — keep it compact and tight. */
  .scene--hero .beat { min-height: 0; }
  .scene--hero .beat[data-beat="1"] { margin-top: 14px; }
  .scene--hero .scene-stage { position: static; height: auto; align-self: center; }
}

/* Mobile: unpin, stack copy above a single robot per scene. */
@media (max-width: 819.98px) {
  .scene-stage { position: static; height: auto; margin-top: 24px; }
  .scene-stage .lp-hero-art svg { max-width: 360px; margin-inline: auto; }
  .beat { min-height: 0; margin-bottom: 28px; }
  .scene--night { padding: 56px 0; }
  /* The scroll engine is off on narrow screens, and the night scene's sky is a 100vh
     STICKY panel inside a much taller section — everything below it fell through to the
     document-height page-sky (random orange bands behind the closing copy and robot).
     Mobile gets a deterministic arc instead: the whole night section is solid navy with
     light text (closing headline included), and the daybreak act carries the entire
     night->dawn->day bloom itself — its top is the same navy, so the two fuse without a
     seam, and the copy starts below the bloom on plain daylight. */
  .scene--night { background: #1C1F33; }
  /* Desktop inks the final beat for the bloomed dawn behind it; on mobile the section
     stays night navy, so the closing beat keeps the light night palette. The beat-4
     selectors must match the desktop rules' specificity to win. */
  .scene--night h2, .scene--night .beat[data-beat="4"] h2 { color: #F2EEF8; }
  .scene--night .beat[data-beat="4"] .lp-sunrise-sub { color: #CFC9DD; }
  .scene--night .beat[data-beat="4"] .lp-time { color: #FBB988; }
  .lp-act--daybreak { padding-top: 300px;
    background: linear-gradient(180deg, #1C1F33 0px, #54425E 90px, #C96F4A 170px, #FF9E6B 225px, #FBE0CC 265px, #FDFBF7 300px); }
  .lp-act--daybreak ~ .lp-act { background: var(--daylight); }
}

/* Reduced motion: never pin (no tall empty pinned column without scrub). */
@media (prefers-reduced-motion: reduce) {
  .scene-stage { position: static; height: auto; }
  .beat { min-height: 0; margin-bottom: 28px; }
}

/* Scene 1: boot → ready (default state = fully awake, so no-JS shows a normal robot). */
.scene--hero .lp-eye, .scene--hero .r-antenna, .scene--hero .r-scan { transition: opacity .5s ease; }
.scene--hero[data-active="0"] .lp-eye { opacity: 0.28; animation: none; }
.scene--hero[data-active="0"] .r-antenna { opacity: 0.22; }
.scene--hero[data-active="0"] .r-scan { opacity: 0; }
@media (prefers-reduced-motion: no-preference) {
  .scene--hero[data-active="1"] .lp-bot { animation: lp-bob 3.6s ease-in-out infinite; }
}
@keyframes lp-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }

/* Scene 2 (night shift): robot morphs by beat; sky scrubs night->dawn by --progress. */
/* Dawn holds off until the last third of the scene, then blooms (night through the reject beat). */
.scene--night .r-stars { opacity: clamp(0, calc((0.82 - var(--progress, 0)) / 0.25), 1); }
.scene--night .r-glass, .scene--night .r-cards, .scene--night .r-card, .scene--night .r-card-glow,
.scene--night .r-x, .scene--night .r-email, .scene--night .r-inbox, .scene--night .r-check,
.scene--night .r-signals { transition: opacity .5s ease, transform .55s ease; }

/* Watch (beat 0): signals twinkle; magnifier lowered, scanning the sky; cards/email hidden. */
.scene--night .r-signals { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .scene--night[data-active="0"] .r-signal { animation: lp-twinkle 2.2s ease-in-out infinite; } }
.scene--night[data-active="1"] .r-signals, .scene--night[data-active="2"] .r-signals,
.scene--night[data-active="3"] .r-signals, .scene--night[data-active="4"] .r-signals { opacity: 0; }
@keyframes lp-twinkle { 0%, 100% { opacity: .3; } 50% { opacity: 1; } }

.scene--night .r-glass { transform-box: view-box; transform-origin: 256px 236px; }
.scene--night[data-active="0"] .r-glass { opacity: .45; transform: rotate(-17deg); }
.scene--night[data-active="1"] .r-glass, .scene--night[data-active="2"] .r-glass { opacity: 1; transform: rotate(calc(-4deg + 8deg * var(--progress, 0))); }
.scene--night[data-active="3"] .r-glass, .scene--night[data-active="4"] .r-glass { opacity: 0; }

/* Sniff (beat 1): candidate cards fade in. */
.scene--night .r-cards { opacity: 0; }
.scene--night[data-active="1"] .r-cards, .scene--night[data-active="2"] .r-cards { opacity: 1; }
.scene--night .r-card { transition: transform .55s cubic-bezier(.4,0,.7,1), opacity .55s ease; }
.scene--night .r-x { opacity: 0; }
.scene--night .r-card-glow { opacity: 0; }

/* Reject (beat 2+): rejects get an x and fall away (staggered); the survivor glows. */
.scene--night[data-active="2"] .r-x, .scene--night[data-active="3"] .r-x, .scene--night[data-active="4"] .r-x { opacity: 1; }
.scene--night[data-active="2"] .r-card--drop, .scene--night[data-active="3"] .r-card--drop, .scene--night[data-active="4"] .r-card--drop { transform: translateY(66px); opacity: 0; transition-delay: calc(var(--d, 0) * 1s); }
.scene--night[data-active="2"] .r-card-glow { opacity: .42; }

/* Draft (beat 3): the survivor unfolds into an email; its lines type in. */
.scene--night .r-email { opacity: 0; transform-box: view-box; }
.scene--night[data-active="3"] .r-email, .scene--night[data-active="4"] .r-email { opacity: 1; }
.scene--night .r-email-line { transform: scaleX(0); transform-box: fill-box; transform-origin: left; }
@media (prefers-reduced-motion: no-preference) {
  .scene--night[data-active="3"] .r-email-line, .scene--night[data-active="4"] .r-email-line { animation: lp-type .45s steps(10) forwards; }
  .scene--night[data-active="3"] .r-email-line:nth-child(6) { animation-delay: .3s; }
  .scene--night[data-active="3"] .r-email-line:nth-child(7) { animation-delay: .6s; }
}
.scene--night[data-active="4"] .r-email-line { animation: none; transform: scaleX(1); }
@media (prefers-reduced-motion: reduce) { .scene--night .r-email-line { transform: scaleX(1); } }
@keyframes lp-type { to { transform: scaleX(1); } }

/* Dawn / deliver (beat 4): email hands off to the inbox; a check lands. */
.scene--night[data-active="4"] .r-email { transform: translate(28px, -16px) scale(.82); }
.scene--night .r-inbox { opacity: 0; }
.scene--night[data-active="4"] .r-inbox { opacity: 1; }
.scene--night .r-check { opacity: 0; transform: scale(.4); transform-box: fill-box; transform-origin: center; transition: opacity .4s ease, transform .4s cubic-bezier(.2, 1.4, .4, 1); }
.scene--night[data-active="4"] .r-check { opacity: 1; transform: scale(1); }
.lp-act { padding: 88px 0; }
/* The enemy act follows the hero's "scroll on" cue — keep them close so the descent into
   dusk reads as one continuous motion, not a jump across empty daylight. */
#enemy { padding-top: 40px; }
/* A dull "junk email" card — sits on the dark sky, so a soft glass look, not a cheap white box. */
.lp-spam { margin: 26px 0; padding: 20px 24px; border: 1px solid rgba(255,255,255,0.10); border-left: 3px solid var(--sunrise); border-radius: 12px; background: rgba(255,255,255,0.055); backdrop-filter: blur(2px); }
.lp-spam p { font-style: italic; margin: 0 0 10px; color: #D7D2E2; }
.lp-spam footer { font-size: 0.9rem; color: #9A94AC; }
.lp-beliefs { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 20px; }
.lp-beliefs li { padding-left: 22px; border-left: 3px solid var(--sunrise); line-height: 1.6; color: var(--body-muted); }
.lp-beliefs strong { color: var(--ink); display: block; }
.lp-night { background: var(--night); padding: 96px 0; }
.lp-night-label { font-size: 0.72rem; letter-spacing: 0.18em; color: var(--night-faint); margin: 0 0 40px; }
.lp-timeline { border-left: 2px solid var(--night-rule); padding-left: 26px; display: flex; flex-direction: column; gap: 34px; }
.lp-moment p { color: var(--night-text); margin: 0; line-height: 1.6; }
.lp-time { color: var(--sunrise-soft); font-size: 0.85rem; margin: 0 0 6px; }
.lp-draft { margin-top: 16px; background: var(--night-raised); border: 1px solid var(--night-border); border-radius: 10px; padding: 18px 20px; }
.lp-draft-subj { color: var(--night-muted); font-size: 0.9rem; margin: 0 0 8px; }
.lp-draft p { color: #CBD0E8; font-size: 0.95rem; }
.lp-draft footer { margin-top: 12px; font-size: 0.72rem; color: var(--night-faint); }
.lp-sunrise { background: linear-gradient(to bottom, #1C1F33 0%, #54425E 30%, #C96F4A 62%, #F5C97B 82%, #FDFBF7 100%); padding: 130px 0 60px; text-align: center; }
.lp-sunrise h2 { color: #FFFDF9; text-shadow: 0 1px 24px rgba(60,30,50,.35); font-size: clamp(1.9rem, 4.5vw, 2.8rem); }
.lp-sunrise .lp-time { color: #FFE9D2; }
.lp-sunrise-sub { color: #4A4237; font-weight: 500; margin-top: 14px; }
.lp-punch { font-weight: 600; color: var(--ink); }
.lp-ticker { text-align: center; font-size: 1.1rem; color: var(--body-muted); border: 1px dashed var(--line-soft); border-radius: 12px; padding: 18px 22px; background: #fff; }
.lp-ticker strong { color: var(--ink); }
.lp-pricing { background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 30px 34px; }
.lp-price { display: flex; align-items: baseline; gap: 12px; }
.lp-amt { font-family: var(--display); font-weight: 800; font-size: 2.6rem; color: var(--ink); }
.lp-per { color: var(--body-subtle); }
.lp-setup { margin: 6px 0 18px; font-size: 0.95rem; }
.lp-included { list-style: none; padding: 0; margin: 0 0 18px; display: flex; flex-direction: column; gap: 9px; }
.lp-included li { padding-left: 26px; position: relative; color: var(--body-muted); }
.lp-included li::before { content: "*"; position: absolute; left: 4px; top: 1px; color: var(--sunrise); font-weight: 800; font-family: var(--display); }
.lp-terms-line { font-size: 0.88rem; color: var(--body-subtle); margin: 0; }
.lp-form { display: flex; flex-direction: column; gap: 16px; max-width: 440px; margin-top: 24px; }
/* Consent row: checkbox + two quiet lines; links in the brand palette, not browser blue. */
.lp-consent label { display: flex; gap: 10px; align-items: flex-start; font-size: 0.85rem; line-height: 1.55; color: var(--body-muted); font-weight: 400; cursor: pointer; }
.lp-consent input[type="checkbox"] { flex: none; width: 16px; height: 16px; margin-top: 3px; accent-color: var(--sunrise); cursor: pointer; }
.lp-consent span { display: inline; }
.lp-consent a { color: var(--sunrise-deep); text-decoration: none; border-bottom: 1px solid rgba(255,106,61,0.35); transition: border-color .15s ease; }
.lp-consent a:hover { border-bottom-color: var(--sunrise-deep); }
.lp-form-status { min-height: 1.2em; margin: 0; font-size: 0.92rem; }
.lp-form-status.ok { color: #2E7D4F; }
.lp-form-status.err { color: #B3402A; }
.hp { position: absolute !important; left: -9999px !important; }
[data-reveal] { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; }
[data-reveal="left"] { transform: translateX(-30px); }
[data-reveal="right"] { transform: translateX(30px); }
[data-reveal].is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  [data-reveal] { opacity: 1; transform: none; transition: none; }
}
@media (max-width: 640px) {
  .lp-act, .lp-night { padding: 64px 0; }
  .lp-pricing { padding: 22px; }
}
/* ===== end landing ===== */

  * { box-sizing: border-box; }
  html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
  body { margin: 0; background: var(--daylight); color: var(--ink); font-family: var(--body); font-size: 17px; line-height: 1.65; -webkit-font-smoothing: antialiased; }

  h1, h2, h3 { text-wrap: balance; margin: 0; }

  .btn { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; font-size: 0.95rem; font-family: var(--body); padding: 12px 22px; border-radius: 9px; text-decoration: none; border: 1px solid transparent; cursor: pointer; transition: background .15s ease, border-color .15s ease; }
  .btn-primary { background: var(--sunrise); color: #fff; }
  .btn-primary:hover { background: var(--sunrise-deep); }
  .btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-soft); }
  .btn-ghost:hover { border-color: var(--ink); }
  .btn:focus-visible { outline: 3px solid var(--sunrise); outline-offset: 2px; }
  .btn[disabled] { opacity: 0.5; cursor: not-allowed; }

  section { padding: clamp(52px, 8vw, 84px) 0; }

  @media (prefers-reduced-motion: reduce) {
    html { scroll-behavior: auto; }
    .btn:hover, .btn:active { transform: none; }
  }

  .field { display: flex; flex-direction: column; gap: 6px; }
  .field label { font-family: var(--body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--body-muted); }
  .field input, .field textarea { font-family: var(--body); font-size: 1rem; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 8px; background: #fff; color: var(--ink); width: 100%; }
  .field textarea { resize: vertical; }
  .field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--sunrise); outline-offset: 1px; border-color: var(--sunrise); }
  .field input[disabled], .field textarea[disabled] { opacity: 0.65; cursor: not-allowed; }
  .form-status { font-size: 0.84rem; font-weight: 700; color: #3c7a70; margin: 0; min-height: 1em; }
  .form-status.error { color: #B3402A; }
  .auth-card .field span.field-hint { color: var(--body-subtle); font-weight: 400; text-transform: none; }
  .field-check label { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; }
  .field-check input[type="checkbox"] { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--sunrise-deep); cursor: pointer; }

  /* auth pages: email/password form + optional external-provider buttons */
  .auth-page { max-width: 420px; padding-top: 64px; padding-bottom: 64px; }
  .auth-page form { display: flex; flex-direction: column; gap: 18px; }
  .auth-divider { display: flex; align-items: center; gap: 12px; margin: 22px 0; color: var(--body-subtle); font-family: var(--body); font-size: 0.82rem; text-transform: none; letter-spacing: 0; }
  .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: var(--line-soft); }
  .external-logins { display: flex; flex-direction: column; gap: 10px; }
  .btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; background: #fff; color: var(--ink); border: 1px solid var(--line-soft); font-weight: 600; font-size: 0.94rem; font-family: var(--body); padding: 12px 20px; border-radius: 9px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
  .btn-google::before { content: "G"; display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--daylight); border: 1px solid var(--line-soft); color: var(--ink); font-family: var(--body); font-weight: 800; font-size: 0.72rem; }
  .btn-google:hover { border-color: var(--ink); }

  /* auth pages: centered branded card */
  .auth-shell { min-height: 100dvh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 16px; padding: 40px 20px; background: var(--daylight); }
  .auth-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: 0 1px 3px rgba(22,25,43,.06), 0 16px 40px rgba(22,25,43,.07); width: 100%; max-width: 430px; padding: 30px clamp(22px,5vw,34px) 34px; }
  .auth-brand { display: flex; justify-content: center; margin-bottom: 14px; }
  .auth-card h1 { font-family: var(--display); font-weight: 800; font-size: 1.5rem; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 4px; text-align: center; }
  .auth-sub { text-align: center; color: var(--body-muted); font-size: 0.92rem; margin: 0 0 22px; }
  .auth-card form { display: flex; flex-direction: column; gap: 16px; }
  .auth-card .field span { color: #B3402A; font-size: 0.78rem; }
  .auth-card .btn-primary { width: 100%; justify-content: center; margin-top: 4px; }
  .auth-remember { flex-direction: row; align-items: center; }
  .auth-remember label { display: inline-flex; align-items: center; gap: 9px; cursor: pointer; text-transform: none; letter-spacing: 0; font-family: var(--body); font-weight: 500; font-size: 0.9rem; color: var(--body-muted); }
  .auth-remember input[type="checkbox"] { width: 17px; height: 17px; margin: 0; flex: none; accent-color: var(--sunrise-deep); cursor: pointer; }
  .auth-alt { text-align: center; margin: 20px 0 0; font-size: 0.9rem; color: var(--body-muted); }
  .auth-alt a { color: var(--sunrise-deep); font-weight: 700; text-decoration: none; }
  .auth-alt a:hover { text-decoration: underline; }
  .auth-back { font-family: var(--body); font-size: 0.85rem; font-weight: 500; text-transform: none; letter-spacing: 0; color: var(--body-subtle); text-decoration: none; }
  .auth-back:hover { color: var(--ink); }

  /* palette-matched scrollbars */
  html { scrollbar-color: var(--sunrise-deep) var(--daylight); scrollbar-width: thin; }
  ::-webkit-scrollbar { width: 12px; height: 12px; }
  ::-webkit-scrollbar-track { background: var(--daylight); }
  ::-webkit-scrollbar-thumb { background: var(--sunrise-deep); border-radius: 8px; border: 3px solid var(--daylight); }
  ::-webkit-scrollbar-thumb:hover { background: var(--sunrise); }
  ::-webkit-scrollbar-corner { background: var(--daylight); }

  /* morning briefing header + first-visit explainer (/app) */
  .app-briefing { margin: 34px 0 6px; }
  .app-briefing h1 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.5rem, 3.5vw, 2.1rem); margin: 0; }
  .app-briefing-ts { margin: 6px 0 0; font-size: 0.8rem; color: var(--body-subtle); }
  .app-explainer { display: flex; justify-content: space-between; align-items: center; gap: 16px; background: #FFF3EC; border: 1px solid #F5CDB8; border-radius: 10px; padding: 12px 16px; margin: 14px 0; }
  .app-explainer[hidden] { display: none; }
  .app-explainer p { margin: 0; font-size: 0.92rem; color: var(--body-muted); }
  .app-explainer-x { background: none; border: none; color: var(--sunrise-deep); font-weight: 600; cursor: pointer; }

  /* customer zone (/app) */
  .app-zone { padding: 40px 0 64px; }
  .app-sub { color: var(--body-subtle); margin: 0; font-size: 0.95rem; }
  .fit { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; padding: 3px 9px; border-radius: 999px; }
  .fit-yes { background: rgba(60,122,112,0.16); color: #2c6a60; }
  .fit-maybe { background: rgba(176,120,20,0.16); color: #8a5e10; }

  /* shared group heading + empty state (/app/profile, /app/history) */
  .app-group-head { font-size: 0.9rem; font-family: var(--mono); text-transform: uppercase; letter-spacing: 0.06em; color: var(--sunrise-deep); margin: 18px 0 12px; }
  .app-group-empty { grid-column: 1 / -1; color: var(--body-subtle); font-size: 0.9rem; margin: 0; }

  /* ===== Daily briefing queue (/app) ===== */
  .cz-greet { display: flex; align-items: flex-end; justify-content: space-between; gap: 20px; flex-wrap: wrap; margin: 8px 0 4px; }
  .cz-greet .btn { white-space: nowrap; }
  .cz-stat { font-size: 0.82rem; color: var(--body-subtle); margin: 0 0 20px; font-variant-numeric: tabular-nums; }
  .cz-stat b { color: var(--ink); font-weight: 700; }

  .cz-list { display: flex; flex-direction: column; gap: 0; border-top: 1px solid var(--line-soft); margin: 18px 0 0; }
  .lead-row-wrap { display: flex; align-items: center; gap: 10px; border-bottom: 1px solid var(--line-soft); padding: 14px 4px; }
  .lead-row-wrap:hover { background: var(--daylight); }
  .lead-row { flex: 1; min-width: 0; text-decoration: none; color: inherit; display: block; position: relative; }
  .lead-row-main { min-width: 0; }
  .lead-row-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
  .lead-row-co { font-family: var(--display); font-weight: 800; font-size: 0.98rem; color: var(--ink); }
  .lead-row:hover .lead-row-co { color: var(--sunrise-deep); }
  .lead-row-why { color: var(--sunrise-deep); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; white-space: nowrap; }
  .lead-row-subj { color: var(--body-muted); font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .lead-skip-form { flex: none; margin: 0; }
  .cz-skip { display: inline-flex; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--line-soft); color: var(--body-subtle); border-radius: 999px; width: 30px; height: 30px; font-size: 0.9rem; cursor: pointer; transition: all .12s ease; }
  .cz-skip:hover { border-color: var(--sunrise-soft); color: var(--sunrise-deep); background: #fff; }

  .cz-older { text-align: center; font-size: 0.82rem; color: var(--body-subtle); padding: 20px 0 4px; }
  .cz-older a { color: var(--sunrise-deep); font-weight: 600; text-decoration: none; }

  .app-foil { margin: 16px 0; padding: 16px 20px; border: 1px dashed var(--line-soft); border-radius: 12px; background: #FBF8F1; text-align: center; }
  .app-foil p { margin: 0 0 10px; color: var(--body-muted); }

  /* locked / foil rows — blurred inline preview of leads beyond the free quota */
  .lead-row.locked { cursor: pointer; }
  .lead-row.locked .lead-row-main { filter: blur(4.5px); user-select: none; }
  .cz-lock { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; gap: 6px; font-size: 0.74rem; font-weight: 600; color: var(--ink); background: rgba(255,255,255,.86); border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 12px; backdrop-filter: blur(1px); }
  .cz-foilcta { text-align: center; margin-top: 4px; }

  /* billing currency picker (settings + paywall + upgrade modal) */
  .currency-picker { margin: 2px 0 14px; }
  .currency-seg { display: inline-flex; gap: 3px; padding: 4px; background: #FBF8F1; border: 1px solid var(--line-soft); border-radius: 999px; }
  .currency-seg input { position: absolute; opacity: 0; pointer-events: none; }
  .currency-seg label { padding: 7px 16px; border-radius: 999px; font-size: 0.85rem; font-weight: 700; color: var(--body-muted); cursor: pointer; line-height: 1; transition: color .12s ease, background .12s ease, box-shadow .12s ease; }
  .currency-seg label:hover { color: var(--ink); }
  .currency-seg input:checked + label { background: var(--ink); color: #fff; box-shadow: 0 1px 4px rgba(22,25,43,.25); }
  .currency-seg input:focus-visible + label { outline: 3px solid var(--sunrise); outline-offset: 2px; }
  .currency-price { margin: 10px 0 0; font-size: 0.9rem; color: var(--body-muted); }
  .currency-price strong { color: var(--ink); font-weight: 700; }
  .currency-price .cp-eur, .currency-price .cp-usd, .currency-price .cp-gbp { display: none; }
  .currency-picker:has(input[value="eur"]:checked) .cp-eur,
  .currency-picker:has(input[value="usd"]:checked) .cp-usd,
  .currency-picker:has(input[value="gbp"]:checked) .cp-gbp { display: inline; }
  /* ancient browsers without :has() still see the default (EUR) price line */
  @supports not selector(:has(*)) { .currency-price .cp-eur { display: inline; } }

  /* skip-reason chips (lead detail) — same language as the currency pills, quieter */
  .skip-why { margin: 14px 0 4px; }
  .skip-why-label { display: block; font-size: 0.85rem; font-weight: 600; color: var(--ink); margin-bottom: 8px; }
  .reason-seg { display: flex; flex-wrap: wrap; gap: 6px; }
  .reason-seg input { position: absolute; opacity: 0; pointer-events: none; }
  .reason-seg label { padding: 6px 13px; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--body-muted); background: #fff; border: 1px solid var(--line-soft); cursor: pointer; line-height: 1; transition: color .12s ease, background .12s ease, border-color .12s ease; }
  .reason-seg label:hover { color: var(--ink); border-color: var(--ink); }
  .reason-seg input:checked + label { background: var(--ink); color: #fff; border-color: var(--ink); }
  .reason-seg input:focus-visible + label { outline: 3px solid var(--sunrise); outline-offset: 2px; }
  /* ===== end daily briefing queue ===== */

  /* ===== History page (/app/history) ===== */
  .cz-back { display: inline-block; font-size: 0.85rem; color: var(--body-subtle); text-decoration: none; margin-bottom: 18px; }
  .cz-back:hover { color: var(--ink); }
  .cz-h1 { font-family: var(--display); font-size: 1.7rem; margin: 6px 0 16px; letter-spacing: -0.02em; color: var(--ink); }

  .cz-filters { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }
  .cz-chip { font-size: 0.82rem; color: var(--body-subtle); background: #fff; border: 1px solid var(--line-soft); border-radius: 999px; padding: 7px 14px; cursor: pointer; text-decoration: none; }
  .cz-chip:hover { color: var(--ink); }
  .cz-chip.on { background: var(--ink); color: #fff; border-color: var(--ink); }
  .cz-search { margin-left: auto; display: flex; }
  .cz-search input { font: inherit; font-size: 0.86rem; border: 1px solid var(--line-soft); border-radius: 999px; padding: 8px 14px; width: 180px; background: #fff; }

  .cz-row { display: grid; grid-template-columns: 10px 1fr auto; align-items: start; gap: 14px; padding: 16px 8px 16px 4px; border-bottom: 1px solid var(--line-soft); }
  .cz-dot { width: 8px; height: 8px; border-radius: 50%; background: #D8D3C6; margin-top: 7px; }
  .cz-main { min-width: 0; }
  .cz-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
  .cz-co { font-weight: 700; color: var(--ink); font-size: 1.02rem; }
  .cz-co-link, .cz-subj-link { color: inherit; text-decoration: none; }
  .cz-co-link:hover, .cz-subj-link:hover { text-decoration: underline; }
  .cz-subj { color: var(--body-subtle); font-size: 0.92rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cz-why { font-size: 0.72rem; color: var(--sunrise-deep); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; background: none; border: none; padding: 0; cursor: pointer; }
  .cz-why:hover { text-decoration: underline; }
  .cz-reopen-form { display: inline-flex; margin: 0; }

  .cz-stbadge { font-size: 0.68rem; font-weight: 700; letter-spacing: .04em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
  .st-sent { background: #E4F0E6; color: #2F7D46; }
  .st-skip { background: #EDEAE2; color: #77726A; }
  .st-old  { background: #FBEEDD; color: #9A6C2E; }
  /* ===== end history page ===== */

  /* dialog modal (/app upgrade prompt) — namespaced to avoid the landing-page .modal component */
  .lead-modal { border: none; padding: 0; background: transparent; max-width: 400px; width: calc(100% - 40px); color: var(--ink); }
  .lead-modal::backdrop { background: rgba(22, 25, 43, 0.45); }
  .lead-modal-card { margin: 0; background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: 0 20px 48px rgba(22,25,43,0.16); padding: 22px 22px 18px; }
  .lead-modal-eyebrow { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--sunrise-deep); margin: 0 0 8px; }
  .lead-modal-title { font-size: 1.15rem; margin: 0 0 8px; letter-spacing: -0.01em; }
  .lead-modal-detail { margin: 0 0 18px; color: var(--body-muted); font-size: 0.95rem; }
  .lead-modal-actions { display: flex; justify-content: flex-end; align-items: center; gap: 10px; flex-wrap: wrap; }
  .lead-modal[open] .lead-modal-card { animation: lead-modal-pop .16s ease; }
  @keyframes lead-modal-pop { from { transform: translateY(6px) scale(.98); opacity: 0; } to { transform: none; opacity: 1; } }
  @media (prefers-reduced-motion: reduce) { .lead-modal[open] .lead-modal-card { animation: none; } }

  /* lead detail (/app/leads/{id}) */
  .app-detail { max-width: 560px; }
  .app-detail .app-lead-top { margin: 10px 0 8px; }
  .app-detail .app-lead-meta { margin-bottom: 10px; }
  .app-detail .status { font-family: var(--mono); font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--body-subtle); }
  .app-detail-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 8px; }
  .app-detail-actions .btn { padding: 11px 18px; font-size: 0.88rem; }
  /* the detail page sits in .auth-card, which forces .btn-primary full-width; keep it inline here */
  .app-detail-actions .btn-primary { width: auto; margin-top: 0; }
  .app-contact { margin-top: 22px; }
  .app-links { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 8px; }
  .app-link-out { display: inline-flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 0.73rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink); text-decoration: none; background: #fff; border: 1px solid var(--line-soft); border-radius: 8px; padding: 7px 12px; transition: transform .08s ease, box-shadow .08s ease, color .08s ease; }
  .app-link-out:hover, .app-link-out:focus-visible { color: var(--sunrise-deep); transform: translateY(-1px); box-shadow: 0 4px 10px rgba(22,25,43,0.08); }
  .app-link-out::after { content: "↗"; color: var(--sunrise); font-size: 0.85em; }
  .field-error { color: #B3402A; font-size: 0.86rem; font-weight: 600; }
  .field-error:empty { display: none; }

  /* ===== Footer + legal ===== */
  .site-footer { border-top: 1px solid var(--line-soft); background: var(--daylight); padding: 44px 0 30px; margin-top: 0; }
  .site-footer-grid { display: flex; justify-content: space-between; gap: 28px; flex-wrap: wrap; }
  .site-footer-co { font-size: 0.88rem; color: var(--body-subtle); line-height: 1.6; margin: 10px 0 0; }
  .site-footer-nav { display: flex; gap: 22px; align-items: flex-start; flex-wrap: wrap; }
  .site-footer-nav a { color: var(--body-muted); font-size: 0.9rem; text-decoration: none; }
  .site-footer-nav a:hover { color: var(--ink); }
  .site-footer-note { margin: 26px 0 0; font-size: 0.78rem; color: var(--body-subtle); }
  .legal { padding: 56px 0 72px; }
  .legal h1 { font-family: var(--display); font-weight: 800; letter-spacing: -0.02em; font-size: clamp(1.8rem, 4vw, 2.5rem); }
  .legal h2 { font-family: var(--display); font-weight: 700; font-size: 1.25rem; margin: 34px 0 10px; }
  .legal p, .legal li { color: var(--body-muted); line-height: 1.65; }
  .legal-banner { display: inline-block; background: #FFF3EC; border: 1px solid #F5CDB8; color: #A04E1E; border-radius: 8px; padding: 8px 14px; font-size: 0.88rem; margin: 14px 0 6px; }
  /* ===== end footer + legal ===== */

/* ===== Admin mailbox ===== */
.mail-actions { display: flex; gap: 10px; margin: 14px 0 18px; }
.mail-list { display: flex; flex-direction: column; border: 1px solid var(--line-soft); border-radius: 12px; background: #fff; overflow: hidden; }
.mail-row { display: grid; grid-template-columns: 200px 1fr auto; gap: 14px; padding: 13px 18px; text-decoration: none; color: var(--body-muted); border-bottom: 1px solid var(--line-soft); align-items: baseline; }
.mail-row:last-child { border-bottom: none; }
.mail-row:hover { background: var(--daylight); }
.mail-row-unseen .mail-from, .mail-row-unseen .mail-subj { font-weight: 700; color: var(--ink); }
.mail-from { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mail-subj { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mail-date { font-size: 0.78rem; color: var(--body-subtle); }
.mail-empty, .mail-error, .mail-flash, .mail-note { padding: 16px 2px; color: var(--body-subtle); }
.mail-note { font-size: 0.85rem; padding: 8px 2px; }
.mail-error { color: #B3402A; }
.mail-flash { color: #2E7D4F; }
.mail-html { contain: content; max-width: 100%; overflow-x: auto; background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 18px 20px; }
.mail-html img { max-width: 100%; }
.mail-text { white-space: pre-wrap; font-family: var(--body); background: #fff; border: 1px solid var(--line-soft); border-radius: 10px; padding: 18px 20px; color: var(--body-muted); }
.mail-head { margin: 6px 0 14px; }
.mail-head dt { font-size: 0.78rem; color: var(--body-subtle); }
.mail-head dd { margin: 0 0 6px; color: var(--ink); }
.mail-attachments { margin-top: 14px; display: flex; flex-direction: column; gap: 6px; }
@media (max-width: 640px) { .mail-row { grid-template-columns: 1fr auto; } .mail-from { display: none; } }
/* ===== end admin mailbox ===== */

/* ===== Admin console: invite form + companies/users table ===== */
.admin-invite { display: flex; flex-direction: column; gap: 16px; max-width: 440px; margin: 18px 0 8px; }
.admin-table { width: 100%; border-collapse: collapse; border: 1px solid var(--line-soft); border-radius: 12px; background: #fff; overflow: hidden; }
.admin-table th, .admin-table td { padding: 11px 14px; text-align: left; vertical-align: middle; }
.admin-table thead th { font-family: var(--mono); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); background: var(--daylight); border-bottom: 1px solid var(--line-soft); }
.admin-table tbody tr { border-bottom: 1px solid var(--line-soft); }
.admin-table tbody tr:last-child { border-bottom: none; }
.admin-table tbody tr:hover { background: var(--daylight); }
.admin-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.btn-sm { padding: 6px 12px; font-size: 0.85rem; }
.copy-link { font-family: var(--mono); font-size: 0.85rem; width: 100%; padding: 11px 13px; border: 1px solid var(--line-soft); border-radius: 8px; background: var(--daylight); color: var(--ink); }
@media (max-width: 640px) {
  .admin-table { display: block; overflow-x: auto; white-space: nowrap; border-radius: 10px; }
}
/* ===== end admin console ===== */

/* ===== Lead detail ===== */
.lead-detail { padding-bottom: 60px; }
.ld-head { display: flex; justify-content: space-between; align-items: baseline; margin: 6px 0 16px; }
.ld-co { font-family: var(--display); font-weight: 800; font-size: clamp(1.5rem, 3vw, 2rem); margin: 0; display: inline; }
.ld-status { font-size: 0.8rem; color: var(--body-subtle); }
.ld-grid { display: grid; grid-template-columns: 1.6fr 1fr; gap: 16px; align-items: start; }
.ld-col { display: flex; flex-direction: column; gap: 14px; }
.panel { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; padding: 16px 18px; }
.panel h4 { font-family: var(--display); font-size: 0.72rem; text-transform: uppercase; letter-spacing: .08em; color: var(--body-subtle); margin: 0 0 12px; }
.ld-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
.ld-send { background: #FFF8F3; border-color: #F5CDB8; }
.ld-send-note { font-size: 0.82rem; color: var(--body-muted); margin: 0 0 12px; }
.ld-send-btns { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.ld-marksent { margin-top: 14px; display: flex; gap: 10px; align-items: center; }
.ld-copied { color: #2E7D4F; }
.ld-why { color: #B3671A; font-weight: 600; font-size: 0.8rem; margin: 0 0 3px; }
.ld-why-text { color: var(--ink); font-size: 0.95rem; margin: 0 0 12px; line-height: 1.5; }
.ld-facts dt { font-size: 0.72rem; color: var(--body-subtle); }
.ld-facts dd { margin: 0 0 8px; font-size: 0.86rem; color: var(--body-muted); }
.ld-links { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.lnk { color: #E85A2E; text-decoration: none; font-size: 0.86rem; }
.lnk:hover { text-decoration: underline; }
@media (max-width: 900px) { .ld-grid { grid-template-columns: 1fr; } }
/* ===== end lead detail ===== */

/* ===== Focused review (/app/leads/{id}) ===== */
.cz-runbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--daylight); border: 1px solid var(--line-soft); border-radius: 10px; padding: 10px 14px; font-size: 0.84rem; color: var(--body-subtle); margin-bottom: 20px; }
.cz-runbar b { color: var(--ink); }
.cz-review-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.cz-review-why { color: var(--body-subtle); font-size: 0.9rem; margin: 0 0 22px; }
.cz-review-why b { color: var(--ink); font-weight: 600; }
.cz-sendbox { margin-top: 4px; }
.cz-sendhead { font-size: 0.9rem; color: var(--body-muted); margin: 0 0 12px; }
.cz-sendhead b { color: var(--ink); font-weight: 700; }
.cz-sendrow { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; align-items: center; }
/* ===== end focused review ===== */

/* ===== Lead notes ===== */
.ld-notes { background: #FCFAF4; }
.ld-note-list { list-style: none; padding: 0; margin: 0 0 12px; display: flex; flex-direction: column; gap: 10px; }
.ld-note { border-bottom: 1px solid var(--line-soft); padding-bottom: 8px; }
.ld-note-text { margin: 0 0 4px; font-size: 0.88rem; color: var(--ink); white-space: pre-wrap; }
.ld-note-meta { display: flex; justify-content: space-between; align-items: center; }
.ld-note-x { background: none; border: none; color: var(--body-subtle); font-size: 0.78rem; cursor: pointer; }
.ld-note-x:hover { color: #B3402A; }
.ld-note-add textarea { width: 100%; border: 1px solid var(--line-soft); border-radius: 8px; padding: 9px 11px; font-family: var(--body); font-size: 0.88rem; margin-bottom: 8px; }
/* ===== end lead notes ===== */

/* ===== Company profile ===== */
.profile-form { display: flex; flex-direction: column; gap: 14px; margin-bottom: 14px; }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 16px; }
.profile-span-2 { grid-column: 1 / -1; }
.profile .panel h2 { margin-top: 0; }
.profile-polish { margin-top: 8px; align-self: flex-start; }
.profile-actions { display: flex; align-items: center; gap: 14px; padding: 4px 2px; }
.profile-actions .form-status { margin: 0; color: #2E7D4F; }
.profile-hints { margin-top: 6px; }
.profile-hints p { color: var(--body-muted); font-size: 0.9rem; margin: 0 0 10px; }
@media (max-width: 640px) { .profile-grid { grid-template-columns: 1fr; } }
/* ===== end company profile ===== */

/* ============ Public site chrome: sticky nav, static pages, FAQ, examples ============ */
.site-nav { position: sticky; top: 0; z-index: 50; background: rgba(253,251,247,0.92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--line-soft); }
.site-nav-row { display: flex; align-items: center; gap: 22px; padding: 12px 0; }
.site-nav-links { display: flex; gap: 18px; flex-wrap: wrap; margin-left: 8px; }
.site-nav-links a { color: var(--body-muted); text-decoration: none; font-size: 0.92rem; font-weight: 500; padding: 4px 2px; border-bottom: 2px solid transparent; transition: color .15s ease, border-color .15s ease; }
.site-nav-links a:hover { color: var(--ink); border-bottom-color: var(--sunrise); }
.site-nav-actions { margin-left: auto; display: flex; align-items: center; gap: 14px; }
.site-nav-login { color: var(--ink); text-decoration: none; font-size: 0.92rem; font-weight: 600; }
.site-nav-login:hover { color: var(--sunrise-deep); }
.btn-sm { padding: 9px 16px; font-size: 0.88rem; }
@media (max-width: 719.98px) {
  .site-nav-links { display: none; }   /* pages stay reachable via the footer on small screens */
  .site-nav-row { justify-content: space-between; }
}

/* Static pages (about / technology / examples / faq / contact) */
.static-page { padding: 56px 0 88px; }
.static-page h1 { font-family: var(--display); font-size: clamp(1.9rem, 4.4vw, 2.8rem); font-weight: 800; letter-spacing: -0.02em; color: var(--ink); margin: 0 0 14px; }
.static-page h2 { font-family: var(--display); font-size: 1.25rem; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 34px 0 10px; }
.static-page p { color: var(--body-muted); margin: 0 0 14px; }
.static-page p strong, .static-list strong { color: var(--ink); }
.static-lede { font-size: 1.08rem; max-width: 44rem; }
.static-list { list-style: none; padding: 0; margin: 0 0 14px; }
.static-list li { padding: 10px 0 10px 26px; position: relative; color: var(--body-muted); }
.static-list li::before { content: "*"; position: absolute; left: 4px; top: 12px; color: var(--sunrise); font-weight: 800; font-family: var(--display); }
.static-facts { margin-top: 38px; background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; padding: 20px 24px; }
.static-facts h2 { margin-top: 0; }
.static-facts a { color: var(--sunrise-deep); text-decoration: none; }
.static-cta { margin-top: 40px; }

/* FAQ accordion (native details) */
.faq-list { margin-top: 26px; }
.faq-list details { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; margin-bottom: 10px; padding: 0 20px; }
.faq-list summary { cursor: pointer; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 16px 0; font-weight: 600; color: var(--ink); }
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after { content: "+"; font-family: var(--display); font-weight: 800; font-size: 1.2rem; color: var(--sunrise); flex: none; transition: transform .18s ease; }
.faq-list details[open] summary::after { transform: rotate(45deg); }
.faq-list details p { padding-bottom: 16px; margin: 0; }
.faq-list details a { color: var(--sunrise-deep); }

/* Examples: email-shaped cards */
.example-card { margin: 30px 0; }
.example-context { font-size: 0.95rem; }
.example-mail { background: #fff; border: 1px solid var(--line-soft); border-radius: 12px; box-shadow: 0 10px 28px rgba(22,25,43,0.06); padding: 22px 24px; }
.example-subject { font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--line-soft); padding-bottom: 10px; }
.example-mail blockquote { margin: 0 0 14px; padding: 10px 14px; border-left: 3px solid var(--sunrise); background: #FBF7F1; border-radius: 0 8px 8px 0; color: #3A3E52; }
.example-btn { display: inline-block; background: var(--sunrise); color: #fff; font-weight: 600; font-size: 0.9rem; padding: 9px 16px; border-radius: 8px; }
.example-note { color: var(--body-subtle); font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; margin-top: 8px; }

/* Contact page */
.contact-form textarea { resize: vertical; }
.contact-note { font-size: 0.85rem; color: var(--body-muted); }
.contact-note a { color: var(--sunrise-deep); }
.contact-sent { background: #EFF7F0; border: 1px solid #BFDCC5; border-radius: 12px; padding: 18px 22px; margin: 22px 0; color: #22543D; }

/* Footer columns */
.site-footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 28px; align-items: start; }
.site-footer-nav { display: flex; flex-direction: column; gap: 7px; }
.site-footer-nav h3 { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--body-subtle); margin: 0 0 4px; font-family: var(--mono); font-weight: 600; }
.site-footer-nav a { color: var(--body-muted); text-decoration: none; font-size: 0.9rem; }
.site-footer-nav a:hover { color: var(--sunrise-deep); }
.site-footer-co a { color: var(--body-muted); }
@media (max-width: 719.98px) { .site-footer-grid { grid-template-columns: 1fr 1fr; } }

/* ============ Customer zone: phone-width fixes (Android + iPhone) ============ */
@media (max-width: 640px) {
  /* Briefing header: headline and Review-all stack instead of squeezing. */
  .cz-greet { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; }
  .cz-greet .btn { align-self: stretch; text-align: center; justify-content: center; }

  /* Rows: bigger touch target for skip; the row itself is the main tap area. */
  .cz-skip { width: 38px; height: 38px; font-size: 1rem; }
  .lead-row-wrap { padding: 16px 2px; }

  /* Focused review / detail: bars wrap, buttons breathe, headers never collide. */
  .cz-runbar { flex-wrap: wrap; row-gap: 6px; }
  .ld-head { flex-wrap: wrap; gap: 6px; }
  .ld-send-btns .btn, .app-detail-actions .btn { flex: 1 1 auto; justify-content: center; }

  /* History search: full-width, and ≥16px so iOS Safari doesn't zoom on focus. */
  .cz-search input { width: 100%; font-size: 1rem; }
}

/* iPhone notch/safe areas: never LESS than the normal side padding, never inside the notch.
   (max() must include the base padding — max(0px, env()) computes to 0 on most phones and
   would strip the .wrap padding entirely.) */
@supports (padding: max(0px)) {
  .site-nav-row, .wrap { padding-left: max(clamp(20px, 5vw, 56px), env(safe-area-inset-left)); padding-right: max(clamp(20px, 5vw, 56px), env(safe-area-inset-right)); }
}

/* Settings page */
.settings-note { font-size: 0.92rem; color: var(--body-muted); margin: 0 0 14px; }
.settings-actions { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-top: 6px; }

/* Password show/hide toggle */
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 44px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); background: none; border: none; padding: 6px; color: var(--body-subtle); cursor: pointer; display: inline-flex; border-radius: 6px; }
.pw-toggle:hover { color: var(--ink); }
.pw-toggle:focus-visible { outline: 2px solid var(--sunrise); }

/* Sources */
.source-row { border-bottom: 1px solid var(--line-soft); }
.source-row:last-of-type { border-bottom: none; }
.source-row label { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto auto; column-gap: 12px; align-items: baseline; padding: 14px 2px; cursor: pointer; }
.source-row input[type="checkbox"] { grid-row: 1 / span 2; align-self: start; margin-top: 5px; width: 17px; height: 17px; accent-color: var(--sunrise); }
.source-title { font-weight: 700; color: var(--ink); }
.source-desc { grid-column: 2; color: var(--body-muted); font-size: 0.88rem; }

/* Plan badges on the subscription tab */
.plan-badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; }
.plan-full { background: #EAF6EC; color: #22543D; border: 1px solid #BFDCC5; }
.plan-free { background: #FFF3EC; color: #B3671A; border: 1px solid #F5CDB8; }

/* ---- app rail (sidebar shell for /app and /admin) ---- */
.rail-shell { display: flex; min-height: 100vh; }
.rail { width: 216px; flex-shrink: 0; background: #171513; color: #f5f1ea; display: flex; flex-direction: column; padding: 18px 0; position: sticky; top: 0; height: 100vh; overflow-y: auto; }
.rail-wordmark { font-weight: 800; font-size: 1.05rem; color: #f5f1ea; text-decoration: none; padding: 0 20px 18px; letter-spacing: .02em; }
.rail-wordmark i { color: var(--sunrise, #f0a05a); font-style: normal; }
.rail-wordmark .rail-tag { font-family: var(--mono); font-size: .6rem; letter-spacing: .12em; color: #8d867a; margin-left: 6px; vertical-align: 2px; }
.rail-nav { display: flex; flex-direction: column; flex: 1; }
.rail-group { font-family: var(--mono); font-size: .62rem; letter-spacing: .14em; text-transform: uppercase; color: #8d867a; padding: 18px 20px 6px; }
.rail-item { display: block; padding: 9px 20px; color: #cfc9bf; text-decoration: none; font-size: .92rem; border-left: 3px solid transparent; }
.rail-item:hover { color: #fff; background: #221f1b; }
.rail-item.active { background: #2b2723; color: #fff; border-left-color: var(--sunrise, #f0a05a); }
.rail-logout { margin-top: auto; padding: 9px 20px; color: #e8a9a0; background: none; border: none; border-top: 1px solid #2b2723; width: 100%; text-align: left; font-size: .92rem; cursor: pointer; }
.rail-logout:hover { color: #fff; background: #221f1b; }
.rail-main { flex: 1; min-width: 0; }
.rail-topbar { display: none; }

/* ---- portal layout (inside the rail shell) ----
   The rail is fixed: it never scrolls with the page, and the content column is
   offset by its width instead of sharing a flex row with it.
   .wrap's gutter is a viewport-relative clamp, which is right for the full-width
   marketing pages but oversized and inconsistent inside this narrower column —
   these rules re-derive the portal's own rhythm.
   NOTE: this block must stay ABOVE the max-width:860px block below, which resets
   the offset for the mobile overlay — same specificity, so source order decides. */
.rail { position: fixed; top: 0; left: 0; bottom: 0; height: auto; }
.rail-main { margin-left: 216px; flex: 1 1 auto; }
/* The footer renders outside .rail-shell, so it needs the same offset or the
   fixed rail covers its left edge on every portal page. */
.rail-footer { margin-left: 216px; }
.rail-main .wrap { max-width: 1080px; margin-inline: auto; padding-inline: clamp(24px, 3vw, 48px); }
.rail-main .app-zone { padding-top: 30px; padding-bottom: 72px; }
/* The zone already owns the top space; these page headers added a second helping. */
.rail-main .app-briefing { margin-top: 0; }
.rail-main .cz-greet { margin-top: 0; }
.rail-main .cz-h1 { margin-top: 0; }

@media (max-width: 860px) {
  .rail-shell { display: block; }
  .rail { position: fixed; inset: 0 auto 0 0; z-index: 40; transform: translateX(-100%); transition: transform .2s ease; width: 246px; }
  .rail.open { transform: none; box-shadow: 0 0 40px rgba(0,0,0,.4); }
  .rail-topbar { display: flex; align-items: center; gap: 12px; padding: 10px 16px; background: #171513; color: #f5f1ea; position: sticky; top: 0; z-index: 30; }
  .rail-topbar .rail-wordmark { padding: 0; }
  .rail-burger { background: none; border: 1px solid #3a352f; color: #f5f1ea; border-radius: 8px; padding: 6px 10px; font-size: 1rem; cursor: pointer; }
  /* Fixed overlay on mobile, so the content column reclaims the full width. */
  .rail-main { margin-left: 0; }
  .rail-footer { margin-left: 0; }
}

/* ---- portal design system (.pz) ----
   One vocabulary for every page inside the rail: a page header, a card, a form
   field, and a single primary action per view. Pages compose these instead of
   inventing their own panels, so the portal reads as one product.
   Lives after the rail block so .rail-main overrides above still apply. */
.pz-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; margin-bottom: 6px; }
.pz-head h1 { font-family: var(--display); font-weight: 800; letter-spacing: -0.025em; font-size: clamp(1.5rem, 2.6vw, 2rem); margin: 0; color: var(--ink); line-height: 1.1; }
.pz-sub { margin: 6px 0 0; color: var(--body-subtle); font-size: 0.94rem; }
.pz-count { font-family: var(--mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body-subtle); background: #fff; border: 1px solid var(--line-soft); border-radius: 999px; padding: 5px 11px; white-space: nowrap; }

/* Queue rows: company and why-now read first, subject second. */
.pz-queue { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }
.pz-lead { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 16px; background: #fff; border: 1px solid var(--line-soft); border-radius: 14px; padding: 16px 18px; text-decoration: none; transition: border-color .15s, box-shadow .15s, transform .15s; }
.pz-lead:hover { border-color: var(--sunrise-soft); box-shadow: 0 6px 18px rgba(22,25,43,.06); transform: translateY(-1px); }
.pz-lead-co { font-family: var(--display); font-weight: 800; font-size: 1.06rem; color: var(--ink); letter-spacing: -0.01em; text-decoration: none; }
.pz-lead-subj { margin: 7px 0 0; color: var(--body-muted); font-size: 0.95rem; }
.pz-lead-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.pz-why { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.07em; text-transform: uppercase; color: var(--sunrise-deep); background: #FFF1EA; border-radius: 999px; padding: 3px 9px; }
.pz-row-actions { display: flex; align-items: center; gap: 8px; }
.pz-skip { border: 1px solid var(--line-soft); background: #fff; color: var(--body-subtle); border-radius: 10px; width: 34px; height: 34px; cursor: pointer; font-size: 0.9rem; }
.pz-skip:hover { color: var(--sunrise-deep); border-color: var(--sunrise-soft); }

/* Detail: the working surface is wide, context stays quiet beside it. */
.pz-detail { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(260px, 0.85fr); gap: 22px; align-items: start; margin-top: 20px; }
.pz-card { background: #fff; border: 1px solid var(--line-soft); border-radius: 16px; padding: 20px 22px; }
.pz-card + .pz-card { margin-top: 14px; }
.pz-card h2 { font-family: var(--display); font-size: 1rem; font-weight: 800; margin: 0 0 14px; color: var(--ink); letter-spacing: -0.01em; }

.pz-field { margin-bottom: 14px; }
.pz-field label { display: block; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.11em; text-transform: uppercase; color: var(--body-subtle); margin-bottom: 6px; }
.pz-field input, .pz-field textarea, .pz-field select { width: 100%; border: 1px solid var(--line-soft); border-radius: 10px; padding: 11px 13px; font-family: var(--body); font-size: 0.96rem; color: var(--ink); background: #FEFDFB; }
.pz-field textarea { line-height: 1.6; resize: vertical; }
.pz-field input:focus, .pz-field textarea:focus, .pz-field select:focus { outline: 2px solid var(--sunrise-soft); outline-offset: 1px; border-color: transparent; }
.pz-hint { font-size: 0.82rem; color: var(--body-subtle); margin: 6px 0 0; }

/* One primary action per view; everything else is visibly secondary. */
.pz-actions { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; padding-top: 16px; border-top: 1px solid var(--line-soft); }
.pz-actions .spacer { margin-left: auto; }
.pz-btn { border-radius: 11px; padding: 11px 18px; font-family: var(--body); font-weight: 700; font-size: 0.93rem; cursor: pointer; border: 1px solid transparent; text-decoration: none; display: inline-flex; align-items: center; gap: 7px; }
.pz-btn-primary { background: var(--sunrise); color: #fff; }
.pz-btn-primary:hover { background: var(--sunrise-deep); }
.pz-btn-primary:disabled { background: var(--line-soft); color: var(--body-subtle); cursor: not-allowed; }
.pz-btn-quiet { background: #fff; border-color: var(--line-soft); color: var(--body-muted); }
.pz-btn-quiet:hover { color: var(--ink); border-color: var(--body-subtle); }
.pz-btn-danger { background: none; border-color: transparent; color: var(--body-subtle); }
.pz-btn-danger:hover { color: #B4451F; }

/* Facts as a scannable list rather than a form. */
.pz-facts { display: flex; flex-direction: column; margin: 0; }
/* Stacked, not two columns: in a ~260px sidebar a right-aligned value wraps
   raggedly. Label above, value below, both left-aligned — and the label reuses
   the field-label treatment so forms and facts read as one family. */
.pz-fact { display: flex; flex-direction: column; gap: 3px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 0.9rem; }
.pz-fact:last-child { border-bottom: 0; }
.pz-fact dt { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--body-subtle); }
.pz-fact dd { margin: 0; color: var(--ink); font-weight: 600; overflow-wrap: anywhere; }
.pz-note { background: #FFFDF9; border: 1px solid var(--line-soft); border-radius: 11px; padding: 11px 13px; font-size: 0.9rem; color: var(--body-muted); }

/* Status pills: one shape, three meanings. */
.pz-pill { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; font-weight: 700; padding: 4px 10px; border-radius: 999px; }
.pz-pill-yes { background: rgba(60,122,112,.14); color: #2c6a60; }
.pz-pill-maybe { background: #FFF1EA; color: var(--sunrise-deep); }
.pz-pill-sent { background: rgba(22,25,43,.07); color: var(--body-muted); }

.pz-settings { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 20px; }
.pz-settings .full { grid-column: 1 / -1; }
.pz-empty { color: var(--body-subtle); background: #fff; border: 1px dashed var(--line-soft); border-radius: 14px; padding: 26px; text-align: center; }

/* Scannable rows of structured data (the admin area's lists) — a table dressed in the
   same tokens as everything else, wrapped so it scrolls on its own rather than the page. */
.pz-table-wrap { overflow-x: auto; border: 1px solid var(--line-soft); border-radius: 14px; background: #fff; }
.pz-table { width: 100%; border-collapse: collapse; }
/* nowrap keeps short cells (dates, counts, status) on one line, but a long value
   — an email address, a company name — must wrap rather than force a horizontal
   scrollbar inside a card, where the palette-matched amber thumb reads as a
   stray progress bar. Opt individual cells out with .pz-cell-wrap. */
.pz-table th, .pz-table td { padding: 12px 16px; text-align: left; vertical-align: middle; font-size: 0.88rem; white-space: nowrap; }
.pz-table td.pz-cell-wrap, .pz-table th.pz-cell-wrap { white-space: normal; overflow-wrap: anywhere; }
.pz-table thead th { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--body-subtle); background: var(--daylight); border-bottom: 1px solid var(--line-soft); }
.pz-table tbody tr { border-bottom: 1px solid var(--line-soft); }
.pz-table tbody tr:last-child { border-bottom: 0; }
.pz-table tbody tr:hover { background: var(--daylight); }
.pz-table td { color: var(--ink); }
.pz-row-link { font-family: var(--display); font-weight: 800; color: var(--ink); text-decoration: none; letter-spacing: -0.01em; }
.pz-row-link:hover { color: var(--sunrise-deep); }
.pz-cell-sub { display: block; margin-top: 2px; font-size: 0.78rem; color: var(--body-subtle); font-weight: 400; white-space: nowrap; }

/* Cockpit KPI tiles: plain numbers over a label, no chart chrome — scannable in a glance.
   A warning has to read differently from a stat at rest: a sunrise-toned pill for the reason,
   and the whole table row tinted so it never blends into the ordinary rows around it. */
.pz-stats { display: flex; flex-wrap: wrap; gap: 26px 36px; }
.pz-stat { display: flex; flex-direction: column; gap: 4px; min-width: 88px; }
.pz-stat-num { font-family: var(--display); font-weight: 800; font-size: 1.7rem; letter-spacing: -0.02em; color: var(--ink); line-height: 1; }
.pz-stat-label { font-family: var(--mono); font-size: 0.64rem; letter-spacing: 0.09em; text-transform: uppercase; color: var(--body-subtle); }
.pz-stat-sub { font-size: 0.78rem; color: var(--body-subtle); }
.pz-flag { display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 0.66rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--sunrise-deep); background: #FFF1EA; border-radius: 999px; padding: 3px 9px; white-space: nowrap; }
.pz-table tbody tr.pz-row-alarm { background: #FFF8F4; }
.pz-table tbody tr.pz-row-alarm:hover { background: #FFF1EA; }

@media (max-width: 900px) {
  .pz-detail { grid-template-columns: 1fr; }
  .pz-settings { grid-template-columns: 1fr; }
  .pz-head { flex-direction: column; gap: 10px; }
  .pz-lead { grid-template-columns: 1fr; }
  .pz-row-actions { justify-content: flex-start; }
  .pz-table th, .pz-table td { padding: 10px 12px; font-size: 0.84rem; }
  .pz-stats { gap: 18px 28px; }
  .pz-stat-num { font-size: 1.4rem; }
}