/* ============================================================
   nod.css — Ledger brand tokens + public-surface base styles
   Direction B ("Ledger") · Source of truth: design_hub/reference-library/nod/DIRECTION.md
   ============================================================ */

/* ── Google Fonts: Fraunces (display) + Instrument Sans (body/UI) — same set as the landing ── */
@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,400;1,9..144,500;1,9..144,600&family=Instrument+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');

/* ── Light tokens (base) ── */
:root {
  /* Let native controls (select dropdowns, checkboxes, scrollbars) follow the active theme. */
  color-scheme: light;
  /* Neutrals — cool eucalyptus-gray, tinted toward teal */
  --p-ink:           #15201E;   /* 15.8:1 on bg  — body + heading text */
  --p-ink-soft:      #4F5E5A;   /*  6.45:1 on bg — secondary / labels  */
  --p-ink-faint:     #76847F;   /* large/UI only — placeholders, captions */
  --p-on-accent:     #FFFFFF;   /* text/icon on teal fill */

  --p-bg:            #F7F9F8;   /* page ground */
  --p-surface:       #FFFFFF;   /* card / panel */
  --p-surface-2:     #EDF2F0;   /* inset / tinted region / receipt backing */
  --p-border:        #DCE5E2;   /* default hairline */
  --p-border-strong: #C2CFCB;   /* receipt rules / dividers */

  /* Accent — deep teal-green */
  --p-accent:        #0F6E5E;   /* CTA fill   — white text 6.15:1 (AA) */
  --p-accent-hover:  #0C6053;   /* white text AA */
  --p-accent-active: #0A5247;
  --p-accent-strong: #0F6E5E;   /* accent TEXT on bg — 5.82:1 (AA) */
  --p-accent-tint:   #E2F1ED;   /* identity wash / badge backing */
  --p-accent-ring:   #0F6E5E;   /* focus ring */

  /* Status */
  --p-success:       #1F7A43;   /* 5.06:1 on bg — confirmed / paid */
  --p-success-tint:  #E6F4EC;
  --p-danger:        #9B1C1C;   /* 7.0:1 on tint — inline validation error text */
  --p-danger-tint:   #FDECEC;   /* error block backing */
  --p-danger-border: #F5C2C2;   /* error block hairline */
  --p-focus-ring:    rgba(15, 110, 94, .15);  /* soft accent halo on focused inputs */

  /* Typography */
  --font:         "Instrument Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
  --font-display: "Fraunces", Georgia, "Times New Roman", serif;

  --weight-regular:  400;
  --weight-medium:   500;
  --weight-semibold: 600;
  --weight-bold:     700;

  --text-xs:   .75rem;
  --text-sm:   .875rem;
  --text-base: 1rem;
  --text-md:   1.125rem;
  --text-lg:   1.3125rem;
  --text-xl:   1.625rem;
  --text-2xl:  clamp(1.6rem, 1.2rem + 1.9vw, 2.1rem);
  --text-3xl:  clamp(1.9rem, 1.35rem + 2.5vw, 2.75rem);
  --text-4xl:  clamp(2.3rem, 1.5rem + 3.6vw, 3.25rem);

  --leading-tight:  1.14;
  --leading-snug:   1.3;
  --leading-normal: 1.55;

  --tracking-tight: -.01em;
  --tracking-snug:  -.005em;
  --tracking-wide:  .08em;

  /* Spacing — 4px base grid */
  --space-1:  4px;
  --space-2:  8px;
  --space-3:  12px;
  --space-4:  16px;
  --space-5:  20px;
  --space-6:  24px;
  --space-8:  32px;
  --space-10: 40px;
  --space-12: 48px;

  /* Radius — crisp, document-structured */
  --radius-sm:   6px;
  --radius:      10px;
  --radius-lg:   12px;
  --radius-pill: 999px;

  /* Elevation — restrained hairline + tight cool shadow */
  --shadow-sm: 0 1px 2px rgba(21,32,30,.04), 0 1px 3px rgba(21,32,30,.06);
  --shadow-md: 0 4px 14px rgba(21,32,30,.07), 0 2px 4px rgba(21,32,30,.05);
  --shadow-lg: 0 14px 36px rgba(21,32,30,.10), 0 4px 9px rgba(21,32,30,.06);

  /* Motion — one clock, purposeful only */
  --dur-fast:        120ms;
  --dur-base:        220ms;
  --dur-slow:        420ms;
  --ease-standard:   cubic-bezier(.2,0,0,1);
  --ease-decelerate: cubic-bezier(0,0,0,1);
  --stagger:         80ms;
  --reveal-rise:     16px;

  /* Soft tint borders / inset shadow — tokenized from former hardcoded literals */
  --p-accent-border-soft:  rgba(15,110,94,.15);
  --p-success-border-soft: rgba(31,122,67,.15);
  --shadow-inset-sm:       inset 0 1px 2px rgba(21,32,30,.04);

  /* Glass bar backing (app top bar) — page bg at .82 + backdrop blur, landing retnav DNA */
  --p-glass: rgba(247,249,248,.82);

  /* Safe-area insets (notch / home indicator) */
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
}

/* ── Dark tokens (designed, not inverted) ── */
@media (prefers-color-scheme: dark) {
  :root {
    color-scheme: dark;
    /* Neutrals */
    --p-ink:           #E8EEEC;
    --p-ink-soft:      #9DAEA9;
    --p-ink-faint:     #7E8F8A;
    --p-on-accent:     #0E1513;

    --p-bg:            #0B1110;
    --p-surface:       #0E1513;
    --p-surface-2:     #16201D;
    --p-border:        #23302C;
    --p-border-strong: #34433E;

    /* Accent — lifted teal (perceptually calibrated for dark) */
    --p-accent:        #3FC9AE;
    --p-accent-hover:  #52D4BB;
    --p-accent-active: #67DCC6;
    --p-accent-strong: #3FC9AE;
    --p-accent-tint:   #0F2A25;
    --p-accent-ring:   #3FC9AE;

    /* Status */
    --p-success:       #4ADE80;
    --p-success-tint:  #102A1B;
    --p-danger:        #FCA5A5;   /* error text on dark error backing */
    --p-danger-tint:   #2A1010;   /* error block backing (dark) */
    --p-danger-border: #5C2020;   /* error block hairline (dark) */
    --p-focus-ring:    rgba(63, 201, 174, .2);  /* soft accent halo (dark) */
    --p-glass:         rgba(11, 17, 16, .82);   /* glass bar backing (dark bg tone) */
    --p-accent-border-soft:  rgba(63, 201, 174, .18);  /* soft tint borders recalibrated for dark */
    --p-success-border-soft: rgba(74, 222, 128, .18);

    /* Typography, spacing, radius, motion tokens unchanged from light mode */
  }
}

/* ── Reset + base ── */
*, *::before, *::after {
  box-sizing: border-box;
}

body {
  margin: 0;
  background: var(--p-bg);
  color: var(--p-ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  font-weight: var(--weight-regular);
  /* Prevent font-size inflation on iOS */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

/* ── Reduced motion: all transitions + animations become instant ── */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    transition-duration: 0ms !important;
    animation-duration: 0ms !important;
    animation-delay: 0ms !important;
  }
}

/* ── Public shell: center-if-short, top-if-tall (never clips tall content) ── */
/*    Uses margin:auto on .wrap rather than align-items:center so long pages  */
/*    simply scroll instead of being clipped at the top.                       */
.public-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* ================================================================
   BREAKPOINT SYSTEM — 4 tiers (mobile-first, min-width only)
   ── mobile  : ≤480px        (no media query — base styles)
   ── tablet  : 481px–768px   @media (min-width: 481px)
   ── laptop  : 769px–1024px  @media (min-width: 769px)
   ── desktop : ≥1025px       @media (min-width: 1025px)
   Fluid type via clamp() scales within and across these tiers.
   ================================================================ */

/* ── Layout: .wrap — centered column, comfortable measure (~60ch max) ── */
/*    mobile:  560px max, 20px side gutter                                 */
/*    tablet:  600px max, 24px side gutter (more breathing room)           */
/*    laptop:  620px max, 32px side gutter (comfortable whitespace)        */
/*    desktop: 640px max, 40px side gutter (generous margins)              */
.wrap {
  max-width: 560px;
  width: 100%;
  margin-inline: auto;
  /* margin-block:auto collapses to 0 when content is taller than the viewport */
  margin-block: auto;
  padding: var(--space-8) var(--space-5) var(--space-12);
}

@media (min-width: 481px) {
  .wrap {
    max-width: 600px;
    padding-inline: var(--space-6);
  }
}

@media (min-width: 769px) {
  .wrap {
    max-width: 620px;
    padding-inline: var(--space-8);
  }
}

@media (min-width: 1025px) {
  .wrap {
    max-width: 640px;
    padding-inline: var(--space-10);
  }
}

/* ── Wide wrap modifier — intake form widens for 2-col fields ── */
/*    mobile:  full single-col (no extra width needed)              */
/*    tablet:  640px max (fits 2-col comfortably at 481px+)         */
/*    laptop:  800px max (comfortable 2-col with side margins)      */
/*    desktop: 860px max (the approved wide layout)                 */
@media (min-width: 481px) {
  .wrap--wide {
    max-width: 640px;
  }
}

@media (min-width: 769px) {
  .wrap--wide {
    max-width: 800px;
  }
}

@media (min-width: 1025px) {
  .wrap--wide {
    max-width: 860px;
  }
}

/* ── Card ── */
.card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: var(--space-8) var(--space-6);
}

@media (min-width: 769px) {
  .card {
    padding: var(--space-10) var(--space-8);
  }
}

/* ── Brand header — the lowercase Fraunces wordmark (same identity as the landing) ── */
.brand {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 21px;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--p-ink);
  margin-bottom: var(--space-6);
}

/* ── Headings — Fraunces reads editorial at 400, per the landing's convention ── */
h1 {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--p-ink);
  margin: 0 0 var(--space-4);
}

h2 {
  font-family: var(--font);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  color: var(--p-ink);
  margin: 0 0 var(--space-3);
}

/* ── Muted / secondary text ── */
.muted {
  color: var(--p-ink-soft);
}

/* ── Reward display — Fraunces 600 is the landing's money convention ── */
.reward {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--p-success);
  letter-spacing: var(--tracking-tight);
  margin: var(--space-2) 0 var(--space-5);
}

/* ── Form elements ── */
label {
  display: block;
  font-family: var(--font);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--p-ink);
  margin: var(--space-4) 0 var(--space-2);
}

input[type="text"],
input[type="email"],
input[type="tel"],
textarea {
  display: block;
  width: 100%;
  padding: 11px var(--space-3);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
  background: var(--p-surface);
  color: var(--p-ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
textarea:focus,
input[type="text"]:focus-visible,
input[type="email"]:focus-visible,
input[type="tel"]:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: var(--p-accent-ring);
  box-shadow: 0 0 0 3px var(--p-focus-ring);
}

textarea {
  min-height: 72px;
  resize: vertical;
}

/* Placeholder color */
input::placeholder,
textarea::placeholder {
  color: var(--p-ink-faint);
}

/* ── Attestation block ── */
.attest {
  display: flex;
  gap: var(--space-3);
  align-items: flex-start;
  margin: var(--space-3) 0;
  padding: var(--space-3);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
  background: var(--p-surface-2);
}

.attest input[type="checkbox"] {
  margin-top: 3px;
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  accent-color: var(--p-accent);
}

.attest input[type="checkbox"]:focus-visible {
  outline: 3px solid var(--p-accent-ring);
  outline-offset: 2px;
}

/* ── Primary button ── */
button,
button[type="submit"] {
  display: block;
  width: 100%;
  margin-top: var(--space-5);
  padding: 13px var(--space-6);
  border: 0;
  border-radius: var(--radius);
  background: var(--p-accent);
  color: var(--p-on-accent);
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

button:hover {
  background: var(--p-accent-hover);
  box-shadow: var(--shadow-sm);
}

button:active {
  background: var(--p-accent-active);
  box-shadow: none;
}

button:focus-visible {
  outline: 3px solid var(--p-accent-ring);
  outline-offset: 2px;
}

/* ── Error block ── */
.err {
  background: var(--p-danger-tint);
  border: 1px solid var(--p-danger-border);
  color: var(--p-danger);
  padding: 11px var(--space-3);
  border-radius: var(--radius-sm);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}

/* ── Notice block (positive confirmation: saved / reset / sent) ── */
.notice {
  background: var(--p-success-tint);
  border: 1px solid var(--p-success);
  color: var(--p-success);
  padding: 11px var(--space-3);
  border-radius: var(--radius-sm);
  margin: var(--space-4) 0;
  font-size: var(--text-sm);
}

/* ── Draft banner (legal pages pending attorney review — never represented as final) ── */
.draft-banner {
  background: var(--p-accent-tint);
  border: 1px solid var(--p-accent);
  border-left-width: 4px;
  color: var(--p-ink);
  padding: var(--space-3) var(--space-4);
  border-radius: var(--radius-sm);
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
  line-height: var(--leading-normal);
}
.draft-banner b { color: var(--p-accent-strong); }

/* ── Legal / policy pages (terms, privacy) — shared reading layout ── */
.legal { max-width: 720px; margin: 0 auto; }
.legal-head { margin: 0 0 var(--space-5); }
.legal-kicker {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--p-accent-strong);
  margin: 0 0 var(--space-2);
}
.legal h1 {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  letter-spacing: var(--tracking-tight);
  line-height: var(--leading-tight);
  margin: 0 0 var(--space-2);
}
.legal-dateline { font-size: var(--text-sm); margin: 0; }
.legal-intro {
  font-size: var(--text-md);
  color: var(--p-ink-soft);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-6);
}
.legal h2 {
  font-size: var(--text-md);
  font-weight: var(--weight-semibold);
  color: var(--p-ink);
  margin: var(--space-8) 0 var(--space-3);
  padding-top: var(--space-5);
  border-top: 1px solid var(--p-border);
}
.legal p { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--p-ink); margin: 0 0 var(--space-4); }
.legal ul { font-size: var(--text-sm); line-height: var(--leading-normal); padding-left: var(--space-5); margin: 0 0 var(--space-4); }
.legal li { margin-bottom: var(--space-3); }
.legal li:last-child { margin-bottom: 0; }
.legal-foot { margin-top: var(--space-8); padding-top: var(--space-5); border-top: 1px solid var(--p-border); }

/* ── Agreement sign panel ── */
.agreement-sign-panel .agreement-preview {
  font-family: var(--font);
  font-size: var(--text-sm);
  color: var(--p-ink-soft);
  line-height: var(--leading-normal);
  background: var(--p-surface-2);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
  white-space: pre-wrap;
  word-break: break-word;
  margin: 0 0 var(--space-4);
}
.agreement-sig-block {
  background: var(--p-surface-2);
  border: 1px solid var(--p-border);
  border-left: 4px solid var(--p-success);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-5);
}

/* ── Links ── */
a {
  color: var(--p-accent-strong);
  text-decoration-skip-ink: auto;
  transition: color var(--dur-fast) var(--ease-standard);
}

a:hover {
  text-decoration: underline;
}

a:focus-visible {
  outline: 3px solid var(--p-accent-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* ── Footer ── */
.foot {
  margin-top: var(--space-6);
  font-size: var(--text-xs);
  color: var(--p-ink-soft);
  line-height: var(--leading-normal);
}

/* ── Skip-to-content link (a11y) ── */
.skip-link {
  position: absolute;
  top: -999px;
  left: var(--space-4);
  z-index: 9999;
  background: var(--p-accent);
  color: var(--p-on-accent);
  padding: var(--space-2) var(--space-4);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  text-decoration: none;
}

.skip-link:focus {
  top: var(--space-4);
}

/* ── Paragraphs inside card ── */
.card p {
  margin: 0 0 var(--space-4);
  line-height: var(--leading-normal);
}

.card p:last-child {
  margin-bottom: 0;
}

/* ── Zero-CLS image guard: explicit sizing prevents layout shift on any img ── */
img {
  display: block;
  max-width: 100%;
  height: auto;
}

/* ── Skip-link focus-visible (keyboard-accessible, not just :focus) ── */
.skip-link:focus-visible {
  top: var(--space-4);
  outline: 3px solid var(--p-on-accent);
  outline-offset: 2px;
}

/* ── Branded error / 404 surfaces (calm, money-adjacent recovery) ── */
.error-card {
  max-width: 480px;
  margin: 0 auto;
}

.error-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-pill);
  background: var(--p-surface-2);
  color: var(--p-ink-soft);
  border: 1px solid var(--p-border);
  margin-bottom: var(--space-5);
}

.error-headline {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-2xl);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--p-ink);
  margin: 0 0 var(--space-4);
}

.error-body {
  font-size: var(--text-sm);
  color: var(--p-ink-soft);
  line-height: var(--leading-normal);
  margin: 0 0 var(--space-4);
}

.error-reassurance {
  font-size: var(--text-sm);
  color: var(--p-success);
  line-height: var(--leading-normal);
  margin: var(--space-5) 0 0;
  display: flex;
  align-items: flex-start;
}

/* ── Intake field row: single-col on mobile, 2-col at tablet+ ── */
/*    Wraps logically-paired fields; each child keeps its own label+input.    */
/*    2-col begins at tablet (481px) where .wrap--wide gives enough room.     */
.field-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
}

@media (min-width: 481px) {
  .field-row {
    grid-template-columns: 1fr 1fr;
    gap: 0 var(--space-5);
  }
}

/* ── Touch targets: ensure 44px min height on interactive elements ── */
/*    Base button padding (13px top+bottom) + 1.3 line-height × 1rem      */
/*    = ~13+13+20.8 = 46.8px — already ≥44px. Belt-and-suspenders guard:  */
@media (max-width: 768px) {
  button,
  button[type="submit"],
  .vault-cta-btn {
    min-height: 44px;
  }

  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="password"] {
    min-height: 44px;
    padding-block: 11px;
  }
}

/* ============================================================
   AUTHED APP SHELL (base_app.html) — additive, public surfaces untouched
   ============================================================ */

/* Password inputs share the form-field styling used across the app */
input[type="password"] {
  display: block;
  width: 100%;
  padding: 11px var(--space-3);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
  background: var(--p-surface);
  color: var(--p-ink);
  font-family: var(--font);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}

input[type="password"]:focus,
input[type="password"]:focus-visible {
  outline: none;
  border-color: var(--p-accent-ring);
  box-shadow: 0 0 0 3px var(--p-focus-ring);
}

/* ── App shell layout: sticky top bar + fluid wide content column ── */
.app-shell {
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
  background: var(--p-bg);
}

.app-bar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--p-surface);
  border-bottom: 1px solid var(--p-border);
}
/* Glass treatment where supported (landing retnav DNA); solid surface fallback above */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .app-bar {
    background: var(--p-glass);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
}

.app-bar__inner {
  max-width: 1080px;
  width: 100%;
  margin-inline: auto;
  /* respect the notch/home-bar side insets on mobile; falls back to the spacing scale */
  padding: var(--space-3) max(var(--space-5), var(--safe-right)) var(--space-3) max(var(--space-5), var(--safe-left));
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

@media (min-width: 481px) {
  .app-bar__inner { padding-inline: var(--space-6); }
}
@media (min-width: 769px) {
  .app-bar__inner { padding-inline: var(--space-8); }
}
@media (min-width: 1025px) {
  .app-bar__inner { padding-inline: var(--space-10); }
}

.app-bar__brand {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: 19px;
  letter-spacing: .01em;
  text-transform: lowercase;
  color: var(--p-ink);
  line-height: 1;
  text-decoration: none;
  flex-shrink: 0;
}
.app-bar__brand:hover { text-decoration: none; }

/* Primary nav sits between brand and the trailing logout */
.app-nav {
  display: flex;
  align-items: center;
  gap: var(--space-1);
  margin-left: auto;
}

.app-nav__link {
  display: inline-flex;
  align-items: center;
  min-height: 40px;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--p-ink-soft);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
}
.app-nav__link:hover {
  background: var(--p-surface-2);
  color: var(--p-ink);
  text-decoration: none;
}
.app-nav__link[aria-current="page"] {
  color: var(--p-accent-strong);
  background: var(--p-accent-tint);
  font-weight: var(--weight-semibold);
}

/* Notification bell: an icon-only nav link — bump the glyph and keep it square */
.app-nav__bell { padding-inline: var(--space-2); font-size: var(--text-lg); }

/* Logout: a real <button> styled as a compact ghost, not a full-width CTA */
.app-logout { margin: 0; }
.app-logout button {
  display: inline-flex;
  align-items: center;
  width: auto;
  min-height: 40px;
  margin: 0;
  padding: var(--space-2) var(--space-3);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
  background: var(--p-surface);
  color: var(--p-ink-soft);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: 0;
}
.app-logout button:hover {
  background: var(--p-surface-2);
  color: var(--p-ink);
  box-shadow: none;
}
.app-logout button:active { background: var(--p-border); }

@media (max-width: 480px) {
  /* With the full nav (Dashboard/Contacts/Send/Billing/Settings) the top bar can't fit on one
     phone-width row, so brand + logout stay on row 1 and the nav drops to its own full-width row
     that scrolls horizontally if needed — never forcing the page wider than the viewport. */
  .app-bar__inner { flex-wrap: wrap; row-gap: var(--space-2); }
  .app-logout { margin-left: auto; }
  .app-nav {
    order: 3;
    width: 100%;
    margin-left: 0;
    gap: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .app-nav__link { padding-inline: var(--space-2); flex: 0 0 auto; white-space: nowrap; }
}

/* ── Wide authed content column ── */
.app-main {
  flex: 1;
  width: 100%;
}

.app-wrap {
  max-width: 1080px;
  width: 100%;
  margin-inline: auto;
  padding: var(--space-6) var(--space-5) var(--space-12);
}
@media (min-width: 481px) {
  .app-wrap { padding: var(--space-8) var(--space-6) var(--space-12); }
}
@media (min-width: 769px) {
  .app-wrap { padding: var(--space-8) var(--space-8) var(--space-12); }
}
@media (min-width: 1025px) {
  .app-wrap { padding: var(--space-10) var(--space-10) var(--space-12); }
}

/* ── App footer (legal links under the signed-in shell) ── */
.app-footer {
  border-top: 1px solid var(--p-border);
  margin-top: 0;
}
.app-footer .app-wrap {
  padding-block: var(--space-5);
}

/* ── Section stack rhythm for authed cards ── */
.app-stack > * + * { margin-top: var(--space-5); }

/* ── Soft-gate banner ── */
.gate-banner {
  border: 1px solid var(--p-border);
  border-left: 4px solid var(--p-accent);
  background: var(--p-accent-tint);
  border-radius: var(--radius);
  padding: var(--space-4) var(--space-5);
}
.gate-banner__title {
  font-family: var(--font);
  font-weight: var(--weight-semibold);
  font-size: var(--text-base);
  color: var(--p-ink);
  margin: 0 0 var(--space-1);
}
.gate-banner .muted { font-size: var(--text-sm); }
.gate-banner__actions { margin: var(--space-3) 0 0; }

/* A button that should size to its content, not stretch full width */
.btn-inline {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0;
}

/* ── Authed page header (title + lead) ── */
.app-head { margin-bottom: var(--space-5); }
.app-head h1 { margin-bottom: var(--space-1); }
.app-head .muted { font-size: var(--text-sm); }

/* ── Read-only copy field (share link, vault relay link) ── */
.copy-field {
  width: 100%;
  font-family: var(--font);
  background: var(--p-surface-2);
  color: var(--p-ink);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
}
/* Native <select> styled as a copy-field needs explicit padding to match inputs */
select.copy-field { padding: 0 var(--space-3); }
/* Selects don't inherit the input focus treatment — without this they fall back to the UA blue. */
select.copy-field:focus-visible { outline: 3px solid var(--p-accent-ring); outline-offset: 2px; }

/* /activate: the quiet Cursor-style "Skip for now" under the plan cards — deliberately the
   least-emphasized interactive element on the page. */
.activate-skip { font-size: var(--text-sm); color: var(--p-ink-soft); text-decoration: none; }
.activate-skip:hover { color: var(--p-ink); text-decoration: underline; }

/* Anchors styled as the filled inline button — replaces the invalid <a><button> nesting.
   Anchors don't match the base `button` element selector, so the visuals are restated. */
a.btn-inline {
  display: inline-flex;
  align-items: center;
  width: auto;
  margin: 0;
  padding: 13px var(--space-6);
  border-radius: var(--radius);
  background: var(--p-accent);
  color: var(--p-on-accent);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-snug);
  letter-spacing: var(--tracking-snug);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
a.btn-inline:hover {
  background: var(--p-accent-hover);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
input.copy-field:read-only { cursor: pointer; }

/* ── Field label that is NOT a form-flow label (no top margin spike) ── */
.field-label {
  display: block;
  font-family: var(--font);
  font-weight: var(--weight-medium);
  font-size: var(--text-sm);
  color: var(--p-ink);
  margin: 0 0 var(--space-2);
}

/* ── Referral ledger — single-column record cards (state-temperature system) ── */
.referral-list {
  display: grid;
  /* minmax(0,1fr) not 1fr: a bare 1fr track's min is min-content, so one long unbroken
     string in a receipt value (a long email / job note) blows the whole grid off-screen.
     Pinning the track min to 0 keeps every card at the column width. */
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-4);
}

.referral {
  min-width: 0;   /* belt-and-suspenders with the grid track above */
  border: 1px solid var(--p-border);
  border-top-width: 3px;
  border-top-color: var(--p-border-strong);
  border-radius: var(--radius);
  background: var(--p-surface);
  padding: var(--space-4) var(--space-5) var(--space-5);
}

/* State strips: the ledger's temperature system */
.referral--pending   { border-top-color: var(--p-border-strong); }
.referral--confirmed { border-top-color: var(--p-accent); }
.referral--paid      { border-top-color: var(--p-success); }
.referral--closed,
.referral--expired   { border-top-color: var(--p-border); }
.referral--closed .referral__referrer,
.referral--expired .referral__referrer { color: var(--p-ink-soft); }

.referral__head {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-2) var(--space-3);
  margin-bottom: var(--space-3);
}
.referral__head-primary { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.referral__head-meta {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: var(--space-1);
  flex-shrink: 0;
}

.referral__label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--p-ink-soft);
}

.referral__referrer {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--p-ink);
  line-height: var(--leading-snug);
  overflow-wrap: anywhere;
}

.referral__age {
  font-size: var(--text-xs);
  color: var(--p-ink-soft);
}

/* Receipt block — vault-receipt grammar in dashboard scope */
.referral__receipt {
  background: var(--p-surface-2);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-inset-sm);
  padding: var(--space-3) var(--space-4);
  margin-bottom: var(--space-3);
}
.referral__receipt-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  padding: var(--space-2) 0;
}
.referral__receipt-row:first-child { padding-top: 0; }
.referral__receipt-row:last-child  { padding-bottom: 0; }
.referral__rule {
  border: none;
  border-top: 1px solid var(--p-border-strong);
  margin: 0;
}
.referral__receipt-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--p-ink-soft);
  /* One label interpolates the referrer name ("Pay {name} at"), so it can be arbitrarily
     long — let it break/shrink instead of blowing the flex row off-screen. min-width:0 +
     overflow-wrap so a long unbroken name wraps; no flex-shrink:0 so the row can reflow. */
  min-width: 0;
  overflow-wrap: anywhere;
}
.referral__receipt-value {
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--p-ink);
  text-align: right;
  overflow-wrap: anywhere;
}
.referral__receipt-value--reward {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--p-ink);
  letter-spacing: var(--tracking-tight);
}

.referral__reward {
  font-weight: var(--weight-bold);
  color: var(--p-success);
}
.referral__meta {
  font-size: var(--text-sm);
  color: var(--p-ink-soft);
  margin-top: var(--space-1);
}
.referral__meta b { color: var(--p-ink); font-weight: var(--weight-semibold); }
.referral__meta--warning { color: var(--p-accent-strong); }

/* Vault confirm-link disclosure (open on pending, collapsed on confirmed) */
.referral__vault-disclosure { margin: var(--space-3) 0 0; }
.referral__vault-summary {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--p-ink-soft);
  cursor: pointer;
  list-style: none;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: var(--space-1) 0;
  user-select: none;
}
.referral__vault-summary::-webkit-details-marker { display: none; }
.referral__vault-summary::after { content: "▾"; font-size: .8em; }
details[open] > .referral__vault-summary::after { content: "▴"; }
.referral__vault-summary:focus-visible {
  outline: 3px solid var(--p-accent-ring);
  outline-offset: 2px;
  border-radius: 2px;
}
.referral__vault-disclosure .copy-field { margin-top: var(--space-2); }

/* Confirmed pay zone — the settle-up ritual */
.referral__pay-zone {
  background: var(--p-accent-tint);
  border: 1px solid var(--p-accent-border-soft);
  border-left: 3px solid var(--p-accent);
  border-radius: var(--radius-sm);
  padding: var(--space-4) var(--space-4) var(--space-4) var(--space-5);
  margin-top: var(--space-4);
}
.referral__pay-zone-head {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-3);
  margin-bottom: var(--space-2);
}
.referral__pay-zone-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--p-accent-strong);
}
.referral__pay-zone-amount {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-lg);
  color: var(--p-accent-strong);
  letter-spacing: var(--tracking-tight);
  text-align: right;
  overflow-wrap: anywhere;
}
.referral__pay-via {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  align-items: center;
  margin-bottom: var(--space-3);
}
.referral__pay-zone .referral__paid-form { margin-top: var(--space-2); }
.referral__pay-zone .referral__paid-form button { box-shadow: var(--shadow-sm); }

/* Paid receipt inset — settled, archival calm */
.referral__paid-receipt {
  background: var(--p-success-tint);
  border: 1px solid var(--p-success-border-soft);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin-top: var(--space-3);
}
.referral__paid-receipt .referral__receipt-row { padding: var(--space-1) 0; }
.referral__paid-receipt .referral__receipt-label { color: var(--p-success); }
/* ...except the JOB VALUE row: earned-IN, not paid-OUT — never the settlement green. */
.referral__paid-receipt .referral__receipt-row--job-value .referral__receipt-label { color: var(--p-ink-soft); }

/* Footer action rows: quiet pills; danger only reveals on hover/focus */
.referral__footer-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--p-border);
}
.referral__footer-actions form { margin: 0; display: inline-flex; }

.referral__action-pill.referral__action-pill {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  width: auto;
  min-height: 32px;
  margin: 0;
  padding: 5px 12px;
  border-radius: var(--radius-pill);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  line-height: 1.4;
  letter-spacing: 0;
  color: var(--p-ink-soft);
  background: transparent;
  border: 1px solid var(--p-border);
  cursor: pointer;
  box-shadow: none;
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.referral__action-pill.referral__action-pill:hover,
.referral__action-pill.referral__action-pill:active {
  background: var(--p-surface-2);
  color: var(--p-ink);
  box-shadow: none;
  text-decoration: none;
}
.referral__action-pill.referral__action-pill:focus-visible {
  outline: 3px solid var(--p-accent-ring);
  outline-offset: 2px;
}
.referral__action-pill--danger.referral__action-pill--danger:hover,
.referral__action-pill--danger.referral__action-pill--danger:active,
.referral__action-pill--danger.referral__action-pill--danger:focus-visible {
  background: var(--p-danger-tint);
  color: var(--p-danger);
  border-color: var(--p-danger-border);
}
.referral__action-pill--danger.referral__action-pill--danger:focus-visible {
  outline-color: var(--p-danger);
}

@media (max-width: 768px) {
  .referral__action-pill.referral__action-pill { min-height: 44px; }
}
@media (max-width: 480px) {
  .referral__receipt-row { flex-direction: column; align-items: flex-start; gap: 2px; }
  .referral__receipt-value { text-align: left; }
  .referral__pay-zone-head { flex-direction: column; gap: 2px; }
}

/* Status pills — only element with pill radius */
.pill {
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-pill);
  padding: 2px var(--space-2);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-snug);
  background: var(--p-surface-2);
  color: var(--p-ink-soft);
  white-space: nowrap;
}
.pill--pending { background: var(--p-surface-2); color: var(--p-ink-soft); }
.pill--confirmed,
.pill--paid { background: var(--p-success-tint); color: var(--p-success); }
.pill--sent { background: var(--p-success-tint); color: var(--p-success); }
.pill--error { background: var(--p-danger-tint); color: var(--p-danger); }
.pill--simulated,
.pill--suppressed,
.pill--queued,
.pill--skipped { background: var(--p-surface-2); color: var(--p-ink-soft); }

/* --- Notifications feed: shared by the /notifications page + dashboard card --- */
.notif-header h1 { display: inline-flex; align-items: center; gap: var(--space-2); }
.notif-card__head {
  display: flex; align-items: flex-start; justify-content: space-between;
  gap: var(--space-3); margin-bottom: var(--space-3);
}
.notif-card__all {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 4px;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--p-accent-strong); text-decoration: none; white-space: nowrap;
}
.notif-card__all:hover { text-decoration: underline; }

.notif-list { list-style: none; margin: 0; padding: 0; }
.notif {
  display: flex; gap: var(--space-3); align-items: flex-start;
  padding: var(--space-3) 0; border-top: 1px solid var(--p-border);
}
.notif:first-child { border-top: 0; padding-top: 0; }
.notif__icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: var(--radius-pill);
  font-size: var(--text-base);
  background: var(--p-surface-2); color: var(--p-ink-soft);
}
.notif__icon--sent { background: var(--p-success-tint); color: var(--p-success); }
.notif__icon--error { background: var(--p-danger-tint); color: var(--p-danger); }
.notif__icon--simulated,
.notif__icon--suppressed,
.notif__icon--queued,
.notif__icon--skipped { background: var(--p-accent-tint); color: var(--p-accent-strong); }
.notif__body { flex: 1 1 auto; min-width: 0; }
.notif__head { display: flex; align-items: center; gap: var(--space-2); }
.notif__subject {
  flex: 1 1 auto; min-width: 0;
  font-weight: var(--weight-medium); color: var(--p-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.notif__head .pill { flex: 0 0 auto; }
.notif__meta { margin-top: 2px; font-size: var(--text-xs); color: var(--p-ink-soft); }
.notif__error {
  margin-top: var(--space-2); font-size: var(--text-xs); color: var(--p-danger);
  background: var(--p-danger-tint); border: 1px solid var(--p-danger-border);
  border-radius: var(--radius-sm); padding: var(--space-1) var(--space-2);
  word-break: break-word;
}
.notif__actions {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-top: var(--space-2);
}
.notif__actions form { margin: 0; display: inline-flex; }
/* Two-class selector (+ explicit width/margin resets) so these beat the global
   `button[type="submit"]` CTA rule, which outranks a single class on specificity. */
.notif__actions .notif__action {
  display: inline-flex; align-items: center; gap: 4px;
  width: auto; min-height: 0; margin: 0;
  padding: 5px 11px; border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  line-height: 1.4; letter-spacing: 0;
  color: var(--p-ink-soft); background: transparent;
  border: 1px solid var(--p-border); cursor: pointer; text-decoration: none;
  box-shadow: none;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.notif__actions .notif__action:hover,
.notif__actions .notif__action:active {
  background: var(--p-surface-2); color: var(--p-ink);
  text-decoration: none; box-shadow: none;
}
/* Quiet danger: Delete is neutral at rest (inherits .notif__action), danger tokens only on
   hover / active / focus-visible — matching .referral__action-pill--danger + cx-contact__remove. */
.notif__actions .notif__action--danger:hover,
.notif__actions .notif__action--danger:active,
.notif__actions .notif__action--danger:focus-visible { background: var(--p-danger-tint); color: var(--p-danger); border-color: var(--p-danger-border); }

/* Staged-save footer + rows marked for removal (the editable /notifications page) */
.notif-save {
  display: flex; align-items: center; justify-content: flex-end; gap: var(--space-3);
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--p-border);
}
.notif-save__hint { font-size: var(--text-xs); }
#notif-save[disabled] { opacity: .45; cursor: not-allowed; box-shadow: none; }
.notif--marked { opacity: .6; }
.notif--marked .notif__subject { text-decoration: line-through; }
.notif--marked .notif__del {
  background: var(--p-danger-tint); color: var(--p-danger); border-color: var(--p-danger-border);
}

.notif-empty { text-align: center; padding: var(--space-6) var(--space-4); }
.notif-empty__icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: var(--space-2);
  border-radius: var(--radius-pill); font-size: var(--text-lg);
  background: var(--p-accent-tint); color: var(--p-accent-strong);
}

/* ── Outreach composer — numbered-beat send flow (or-*) ── */
.or-step {
  display: flex;
  gap: var(--space-4);
  padding-bottom: var(--space-6);
  border-bottom: 1px solid var(--p-border);
  margin-bottom: var(--space-6);
}
.or-step--last { border-bottom: 0; padding-bottom: 0; margin-bottom: 0; }

.or-step__num {
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: var(--radius-pill);
  background: var(--p-accent-tint);
  color: var(--p-accent-strong);
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 2px;
}
.or-step__body { flex: 1 1 auto; min-width: 0; }

.or-tpl-grid { display: flex; flex-direction: column; gap: var(--space-2); margin-top: var(--space-2); }
.or-tpl-card { display: block; position: relative; cursor: pointer; margin: 0; }
.or-tpl-radio {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.or-tpl-inner {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--p-border);
  border-radius: var(--radius);
  background: var(--p-surface);
  transition: border-color var(--dur-fast) var(--ease-standard),
              background-color var(--dur-fast) var(--ease-standard);
}
.or-tpl-card:hover .or-tpl-inner { border-color: var(--p-accent-ring); }
.or-tpl-radio:focus-visible + .or-tpl-inner {
  outline: 3px solid var(--p-accent-ring);
  outline-offset: 2px;
}
.or-tpl-radio:checked + .or-tpl-inner {
  border-color: var(--p-accent);
  background: var(--p-accent-tint);
  box-shadow: 0 0 0 1px var(--p-accent);
}
.or-tpl-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  flex-wrap: wrap;
}
.or-tpl-subject { font-weight: var(--weight-semibold); color: var(--p-ink); font-size: var(--text-sm); }
.or-tpl-badge { flex: 0 0 auto; }
.or-tpl-preview {
  font-size: var(--text-xs);
  color: var(--p-ink-soft);
  line-height: 1.55;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.or-merge {
  background: var(--p-accent-tint);
  color: var(--p-accent-strong);
  border-radius: 4px;
  padding: 0 3px;
  font-style: italic;
}
.or-tpl-radio:checked + .or-tpl-inner .or-merge { background: var(--p-surface); }
@media (prefers-color-scheme: dark) {
  .or-tpl-radio:checked + .or-tpl-inner .or-merge { background: var(--p-surface-2); }
}

.or-sim-note { font-size: var(--text-sm); margin: var(--space-2) 0 0; }
.or-cap-note { font-size: var(--text-xs); color: var(--p-ink-soft); margin: var(--space-2) 0 0; }

/* Post-send receipt */
.or-send-receipt {
  background: var(--p-surface-2);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3) var(--space-4);
  margin: 0 0 var(--space-5);
  font-size: var(--text-sm);
}
.or-send-receipt__lede {
  font-family: var(--font-display);
  font-weight: var(--weight-semibold);
  font-size: var(--text-md);
  color: var(--p-success);
  margin: 0 0 var(--space-2);
}
.or-send-receipt__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-4);
  padding: var(--space-2) 0;
  border-top: 1px solid var(--p-border);
}
.or-send-receipt__key {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--p-ink-soft);
  white-space: nowrap;
}
.or-send-receipt__key--success { color: var(--p-success); }
.or-send-receipt__val { color: var(--p-ink); text-align: right; }

/* History engagement lines */
.or-engagement {
  margin-top: 3px;
  font-size: var(--text-xs);
  color: var(--p-ink-soft);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.or-engagement--referred { color: var(--p-success); font-weight: var(--weight-medium); }
.or-engagement--clicked { color: var(--p-accent-strong); }

.or-history-cap {
  font-size: var(--text-xs);
  color: var(--p-ink-soft);
  text-align: center;
  padding-top: var(--space-3);
  margin: 0;
}
.or-remind-note {
  font-size: var(--text-xs);
  color: var(--p-ink-soft);
  margin: var(--space-1) 0 0;
  max-width: 260px;
  text-align: right;
}

@media (max-width: 480px) {
  .or-step { gap: var(--space-3); }
  .or-step__num { flex-basis: 24px; width: 24px; height: 24px; font-size: var(--text-xs); }
  .or-send-receipt__row { flex-direction: column; gap: 2px; }
  .or-send-receipt__val { text-align: left; }
  .or-remind-note { text-align: left; max-width: none; }
}

/* Per-referral action forms reflow as inline pills */
.referral__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-3);
}
.referral__actions form { margin: 0; }
.referral__actions button {
  width: auto;
  margin: 0;
  min-height: 38px;
  padding: var(--space-2) var(--space-4);
  font-size: var(--text-sm);
}
/* Secondary (reject) action reads as ghost */
.referral__actions .btn-secondary {
  background: var(--p-surface);
  color: var(--p-ink-soft);
  border: 1px solid var(--p-border);
}
.referral__actions .btn-secondary:hover {
  background: var(--p-surface-2);
  color: var(--p-ink);
  box-shadow: none;
}

/* The mark-paid form stacks its note input above the action */
.referral__paid-form { margin-top: var(--space-3); }
.referral__paid-form input[type="text"] { margin-bottom: var(--space-2); }
.referral__paid-form button { width: 100%; margin: 0; }

/* ── Billing plan cards — purchase-intent submit buttons in pricing-card grammar ──
   Mirrors .gate-card visually but declared separately: these ARE the checkout action. */
.plan-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  max-width: 560px;
  margin: var(--space-5) 0 var(--space-3);
}
@media (max-width: 480px) {
  .plan-cards { grid-template-columns: 1fr; }
}

button.plan-card {
  all: unset;
  box-sizing: border-box;
  display: block;
  width: 100%;
  cursor: pointer;
  text-align: left;
  user-select: none;
  -webkit-user-select: none;
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--radius);
  overflow: hidden;
  transition: border-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard);
}
button.plan-card--annual {
  border-color: var(--p-accent-border-soft);
  box-shadow: var(--shadow-sm);
}
button.plan-card:hover { border-color: var(--p-accent-ring); }
button.plan-card:focus-visible {
  outline: 3px solid var(--p-accent-ring);
  outline-offset: 2px;
  border-color: var(--p-accent-ring);
}
@media (prefers-color-scheme: dark) {
  button.plan-card { background: var(--p-surface-2); }
}

/* Inner elements are <span>s (buttons allow only phrasing content) — block them here */
.plan-card__band { display: block; height: 3px; background: var(--p-border-strong); }
button.plan-card--annual .plan-card__band {
  background: linear-gradient(90deg, var(--p-accent-hover), var(--p-accent));
}
.plan-card__body { display: block; padding: var(--space-3) var(--space-4) var(--space-4); }
.plan-card__cadence {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--p-ink-soft);
  margin-bottom: var(--space-1);
}
button.plan-card--annual .plan-card__cadence { color: var(--p-accent-strong); }
.plan-card__amount {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--p-ink);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin: 0;
}
button.plan-card--annual .plan-card__amount { color: var(--p-accent-strong); }
.plan-card__per {
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--p-ink-soft);
  margin-left: 2px;
}
.plan-card__note {
  display: block;
  font-size: var(--text-xs);
  color: var(--p-ink-soft);
  margin: var(--space-1) 0 0;
}
.plan-card__choose {
  display: block;
  margin-top: var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: .02em;
  color: var(--p-accent-strong);
}

/* Billing includes — check-chip list (landing pricing__includes grammar) */
.billing-includes {
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  display: grid;
  gap: var(--space-2);
  max-width: 420px;
}
.billing-includes li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: var(--p-ink-soft);
}
.billing-check {
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  background: var(--p-accent-tint);
  color: var(--p-accent);
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Moat callout — the never-touches-money conviction, not fine print */
.billing-moat {
  padding: var(--space-3) var(--space-4);
  background: var(--p-accent-tint);
  border: 1px solid var(--p-accent-border-soft);
  border-left: 3px solid var(--p-accent);
  border-radius: var(--radius-sm);
  margin-bottom: var(--space-2);
}
.billing-moat__title {
  margin: 0;
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  color: var(--p-accent-strong);
}
.billing-moat__body {
  margin: var(--space-1) 0 0;
  font-size: var(--text-sm);
  color: var(--p-ink-soft);
  line-height: var(--leading-normal);
}

/* ============================================================
   ELEVATION LAYER (2026-06-23) — richer depth + density + a soft teal
   gradient-mesh accent, applied site-wide. Stays LIGHT + credible; the
   homeowner trust surfaces (intake/vault) keep calm, no scammy decoration.
   Appended last so it refines the base rules via the cascade.
   ============================================================ */

/* Soft ambient richness on the page grounds (very subtle, never flashy) */
.app-shell,
.public-shell {
  background:
    radial-gradient(120% 80% at 100% -10%, rgba(15,110,94,.05) 0%, transparent 55%),
    radial-gradient(90% 60% at -10% 0%, rgba(15,110,94,.035) 0%, transparent 50%),
    var(--p-bg);
}

/* Soft teal gradient-mesh accent utility — for hero / feature cards */
.mesh {
  background:
    radial-gradient(85% 75% at 10% 12%, var(--p-accent-tint) 0%, transparent 58%),
    radial-gradient(70% 65% at 100% 100%, var(--p-accent-tint) 0%, transparent 55%),
    var(--p-surface);
}

/* Cards: a touch more depth + a smooth hover lift (reduced-motion guarded globally) */
.card {
  box-shadow: var(--shadow-md);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard);
}
.card.mesh { box-shadow: var(--shadow-md); }

/* Authed app header title gets the editorial serif for presence */
.app-head h1 { font-family: var(--font-display); }

/* Dashboard / app cards lift subtly on hover (desktop pointers only) */
@media (hover: hover) and (min-width: 769px) {
  .referral:hover { box-shadow: var(--shadow-md); border-color: var(--p-border-strong); transform: translateY(-1px); }
}

/* Referral record cards: clean surface (state strip carries the temperature) */
.referral {
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--dur-base) var(--ease-standard),
              transform var(--dur-base) var(--ease-standard),
              border-color var(--dur-base) var(--ease-standard);
}

/* Status pills: a hair more presence */
.pill { padding: 3px 10px; font-weight: var(--weight-semibold); }

/* Copy field (share / relay link): inset depth so it reads as a control */
.copy-field { box-shadow: inset 0 1px 2px rgba(21,32,30,.045); }

/* Soft-gate banner: richer teal mesh + light elevation */
.gate-banner {
  background:
    radial-gradient(80% 130% at 0% 0%, rgba(15,110,94,.12) 0%, transparent 60%),
    var(--p-accent-tint);
  box-shadow: var(--shadow-sm);
}
@media (prefers-color-scheme: dark) {
  /* The light-mode teal overlay is invisible on the dark accent-tint surface — use the
     brighter dark-mode accent so the mesh glow reads. */
  .gate-banner {
    background:
      radial-gradient(80% 130% at 0% 0%, rgba(63,201,174,.12) 0%, transparent 60%),
      var(--p-accent-tint);
  }
}

/* Reward figure: editorial serif for a premium, money-credible feel */
.reward { font-family: var(--font-display); }

/* ── "Continue with Google" OAuth button + divider (login / signup) ── */
.btn-oauth {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-3);
  width: 100%;
  min-height: 46px;
  margin: 0;
  padding: 12px var(--space-5);
  border: 1px solid var(--p-border);
  border-radius: var(--radius);
  background: var(--p-surface);
  color: var(--p-ink);
  font-family: var(--font);
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              box-shadow var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.btn-oauth:hover {
  background: var(--p-surface-2);
  border-color: var(--p-border-strong);
  box-shadow: var(--shadow-sm);
  text-decoration: none;
}
.btn-oauth:focus-visible {
  outline: 3px solid var(--p-accent-ring);
  outline-offset: 2px;
}
.btn-oauth__g { width: 18px; height: 18px; flex-shrink: 0; }

.oauth-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-4) 0;
  color: var(--p-ink-faint);
  font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
}
.oauth-divider::before,
.oauth-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--p-border);
}

/* ── Referral share surface (dashboard "Ask for referrals") ── */
.share__row { display: flex; gap: var(--space-2); align-items: center; }
.share__row .copy-field { flex: 1 1 auto; }
.share__actions { display: flex; gap: var(--space-2); flex-wrap: wrap; margin-top: var(--space-3); }
.share__qr { margin-top: var(--space-3); display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-2); }
.share__qr[hidden] { display: none; }
@media (max-width: 480px) {
  .share__actions .btn-secondary { flex: 1 1 100%; text-align: center; }
}

/* ── Mailbox connect (dashboard "Let Nod send for you") ── */
.mailbox-connect { display: flex; flex-direction: column; gap: var(--space-3); }
.mailbox-connect__row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); flex-wrap: wrap; }

/* ── Contacts page (Referral Outreach) ── */
.cx-head { margin-bottom: var(--space-5); }
.cx-eyebrow {
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
  color: var(--p-accent-strong); margin-bottom: var(--space-1);
}
.cx-lede { margin: 0; color: var(--p-ink-soft); font-size: var(--text-base); max-width: 52ch; }

/* Methods sit in a comfortable reading column, not stretched across the whole card */
.cx-methods { max-width: 560px; }
.cx-method { margin: 0; }
.cx-method__title {
  margin: 0 0 var(--space-1); font-size: var(--text-base);
  font-weight: var(--weight-semibold); color: var(--p-ink);
}
.cx-method__hint { margin: 0 0 var(--space-3); font-size: var(--text-sm); color: var(--p-ink-soft); }
.cx-method__actions { display: flex; flex-wrap: wrap; gap: var(--space-2); }

/* "or" divider between methods */
.cx-or {
  display: flex; align-items: center; text-align: center;
  gap: var(--space-3); margin: var(--space-5) 0;
  color: var(--p-ink-soft); font-size: var(--text-xs);
  text-transform: uppercase; letter-spacing: var(--tracking-wide);
}
.cx-or::before, .cx-or::after { content: ""; flex: 1; height: 1px; background: var(--p-border); }

/* Custom file picker: a styled button + the chosen filename, hiding the ugly native input */
.cx-file { display: inline-flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; cursor: pointer; }
.cx-file input[type="file"] { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.cx-file__btn {
  display: inline-flex; align-items: center; min-height: 40px; padding: var(--space-2) var(--space-4);
  border: 1px solid var(--p-border); border-radius: var(--radius-sm);
  background: var(--p-surface); color: var(--p-ink); font-size: var(--text-sm);
  font-weight: var(--weight-medium); transition: background-color var(--dur-fast) var(--ease-standard);
}
.cx-file:hover .cx-file__btn { background: var(--p-surface-2); }
.cx-file input[type="file"]:focus-visible + .cx-file__btn { outline: 2px solid var(--p-accent); outline-offset: 2px; }
.cx-file__name { font-size: var(--text-sm); color: var(--p-ink-soft); }

/* Paste box: a real multi-line textarea, full method width, comfortable height */
.cx-paste {
  display: block; width: 100%; box-sizing: border-box; resize: vertical;
  min-height: 132px; padding: var(--space-3) var(--space-4);
  border: 1px solid var(--p-border); border-radius: var(--radius-sm);
  background: var(--p-surface); color: var(--p-ink);
  font-family: var(--font); font-size: var(--text-sm); line-height: 1.5;
}
.cx-paste:focus { outline: 2px solid var(--p-accent); outline-offset: 1px; border-color: var(--p-accent); }
.cx-paste::placeholder { color: var(--p-ink-soft); opacity: .7; }

.cx-actions { margin-top: var(--space-5); }

/* Contacts list */
.cx-list-head { margin: 0 0 var(--space-4); font-size: var(--text-base); font-weight: var(--weight-semibold); }
.cx-contacts { list-style: none; margin: 0; padding: 0; }
.cx-contact {
  display: flex; align-items: center; gap: var(--space-3);
  padding: var(--space-3) 0; border-top: 1px solid var(--p-border);
}
.cx-contact:first-child { border-top: none; }
.cx-contact__avatar {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--p-accent-tint); color: var(--p-accent-strong);
  font-size: var(--text-sm); font-weight: var(--weight-semibold);
}
.cx-contact__body { display: flex; flex-direction: column; min-width: 0; flex: 1; gap: 2px; }
.cx-contact__head { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; min-width: 0; }
.cx-contact__name {
  font-weight: var(--weight-medium); color: var(--p-ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0;
}
.cx-contact__src-pill { flex-shrink: 0; }
.cx-contact__meta {
  font-size: var(--text-xs); color: var(--p-ink-soft);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* Remove — quiet danger: neutral at rest, danger only on hover/active/focus */
.cx-contact__remove-form { margin: 0; display: flex; align-items: center; flex-shrink: 0; }
.cx-contact__remove {
  display: inline-flex; align-items: center;
  width: auto; min-height: 32px; margin: 0;
  padding: 4px var(--space-3);
  border-radius: var(--radius-pill);
  font-size: var(--text-xs); font-weight: var(--weight-medium);
  line-height: 1.4; letter-spacing: 0;
  color: var(--p-ink-soft);
  background: transparent;
  border: 1px solid var(--p-border);
  cursor: pointer; box-shadow: none;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.cx-contact__remove:hover,
.cx-contact__remove:active {
  background: var(--p-danger-tint);
  color: var(--p-danger);
  border-color: var(--p-danger-border);
  box-shadow: none;
}
.cx-contact__remove:focus-visible {
  outline: 3px solid var(--p-danger);
  outline-offset: 2px;
  background: var(--p-danger-tint);
  color: var(--p-danger);
  border-color: var(--p-danger-border);
}

/* ── CRM provider cards (the landing row-06 promise, in-app) ── */
.cx-crm-grid {
  display: flex; flex-direction: column; gap: var(--space-2);
  margin: var(--space-3) 0 0;
}
.cx-crm-card {
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
  background: var(--p-surface);
}
.cx-crm-card__row {
  display: flex; align-items: center;
  justify-content: space-between; gap: var(--space-3);
}
.cx-crm-card__name { font-weight: var(--weight-semibold); color: var(--p-ink); font-size: var(--text-sm); }
.cx-crm-pill {
  flex-shrink: 0;
  font-size: var(--text-xs); font-weight: var(--weight-semibold);
  letter-spacing: .03em;
  border-radius: var(--radius-pill); padding: 3px 10px;
}
.cx-crm-pill--connected { background: var(--p-accent-tint); color: var(--p-accent-strong); }
.cx-crm-pill--idle { background: var(--p-surface-2); color: var(--p-ink-soft); }

.cx-crm-details__summary {
  cursor: pointer;
  font-size: var(--text-sm); font-weight: var(--weight-medium);
  color: var(--p-accent-strong);
  list-style: none;
  display: inline-flex; align-items: center; gap: var(--space-1);
}
.cx-crm-details__summary::-webkit-details-marker { display: none; }
.cx-crm-details__summary::before { content: "+"; font-weight: var(--weight-bold); }
details[open] > .cx-crm-details__summary::before { content: "−"; }
.cx-crm-details__summary:focus-visible {
  outline: 3px solid var(--p-accent-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

@media (max-width: 480px) {
  .cx-contact__avatar { display: none; }
  .cx-contact__remove { min-height: 44px; }
  .cx-crm-card__row { flex-wrap: wrap; }
}

/* Friendly empty state */
.cx-empty { padding: var(--space-6) var(--space-2); }
.cx-empty__title { margin: 0 0 var(--space-1); font-weight: var(--weight-semibold); color: var(--p-ink); }
.cx-link { color: var(--p-accent-strong); }

/* ── Global secondary button/link — quiet, outlined; works on <button> and <a>.
   (Previously only defined inside .referral__actions, so secondary buttons elsewhere —
   billing cancel, mailbox/import actions, share links, the outreach reminder — fell back to
   the filled-green primary. This gives them the correct quiet emphasis everywhere.) ── */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  margin: 0;
  padding: 10px var(--space-4);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
  background: var(--p-surface);
  color: var(--p-ink-soft);
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  letter-spacing: 0;
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard),
              border-color var(--dur-fast) var(--ease-standard);
}
.btn-secondary:hover {
  background: var(--p-surface-2);
  color: var(--p-ink);
  border-color: var(--p-border-strong);
  box-shadow: none;
  text-decoration: none;
}

/* Contacts: add-a-contact row (Name + Email side by side) + CSV row */
.cx-add-row { display: flex; gap: var(--space-2); align-items: stretch; flex-wrap: wrap; }
.cx-input {
  min-width: 0;
  padding: 10px var(--space-3);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
  background: var(--p-surface);
  color: var(--p-ink);
  font-family: var(--font);
  font-size: var(--text-sm);
  line-height: 1.4;
}
.cx-input:focus { outline: 2px solid var(--p-accent); outline-offset: 1px; border-color: var(--p-accent); }
.cx-input::placeholder { color: var(--p-ink-soft); opacity: .7; }
.cx-input--name  { flex: 1 1 140px; }
.cx-input--email { flex: 1.5 1 200px; }
.cx-input--phone { flex: 1 1 150px; }
.cx-add-row .btn-inline { flex: 0 0 auto; }

.cx-file-row { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }
@media (max-width: 480px) {
  .cx-add-row .btn-inline, .cx-file-row .btn-secondary { width: 100%; }
  /* Name + email stack full-width rather than cramming below their flex-basis */
  .cx-input--name, .cx-input--email, .cx-input--phone { flex: 1 1 100%; }
}

/* CRM export guides (collapsible how-to) */
.cx-guides { margin-top: var(--space-4); }
.cx-guides > summary {
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--p-accent-strong);
  cursor: pointer;
}
.cx-guide-list { margin: 0 0 var(--space-3); padding-left: var(--space-5); }
.cx-guide-list li { font-size: var(--text-sm); color: var(--p-ink); line-height: var(--leading-normal); margin-bottom: var(--space-2); }

/* Import preview table */
.cx-preview { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.cx-preview th {
  text-align: left;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--p-ink-soft);
  padding: 0 var(--space-4) var(--space-2);
  border-bottom: 1px solid var(--p-border);
}
.cx-preview td { padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--p-border); color: var(--p-ink); }
.cx-preview-actions { display: flex; gap: var(--space-3); align-items: center; flex-wrap: wrap; }

/* ── Share tab toggle (Personal | Social) ── */
.share-tabs {
  display: flex;
  gap: 0;
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  margin-bottom: var(--space-4);
  width: fit-content;
}
.share-tab {
  /* reset the global <button> leak (margin-top/width/display) so tabs fill the bar evenly */
  margin: 0;
  width: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-5);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  color: var(--p-ink-soft);
  background: var(--p-surface);
  border: none;
  border-radius: 0;
  box-shadow: none;
  cursor: pointer;
  transition: background var(--dur-fast) var(--ease-standard),
              color var(--dur-fast) var(--ease-standard);
  line-height: 1.4;
}
.share-tab:first-child { border-right: 1px solid var(--p-border); }
.share-tab[aria-selected="true"] {
  background: var(--p-accent-tint);
  color: var(--p-accent-strong);
  font-weight: var(--weight-semibold);
}
.share-tab:focus-visible { outline: 2px solid var(--p-accent); outline-offset: -2px; }

.share-panel { display: none; }
.share-panel[aria-hidden="false"] { display: block; }

/* Personal craft panel (Text it / Email it AI-craft) */
.craft-panel {
  margin-top: var(--space-4);
  padding-top: var(--space-4);
  border-top: 1px solid var(--p-border);
}

/* ── Social generator panel ── */
.sg-row { display: flex; gap: var(--space-3); flex-wrap: wrap; margin-bottom: var(--space-3); }
.sg-row > * { flex: 1 1 140px; }
.sg-label {
  display: block;
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--p-ink-soft);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  margin-bottom: var(--space-1);
}
.sg-caption {
  width: 100%;
  min-height: 140px;
  resize: vertical;
  font-size: var(--text-sm);
  color: var(--p-ink);
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
  padding: var(--space-3);
  font-family: var(--font);
  line-height: var(--leading-normal);
  margin-top: var(--space-3);
  box-sizing: border-box;
}
.sg-caption:focus { outline: 2px solid var(--p-accent); outline-offset: 0; border-color: var(--p-accent); }
.sg-actions {
  display: flex;
  gap: var(--space-2);
  flex-wrap: wrap;
  margin-top: var(--space-3);
}
.sg-hint { font-size: var(--text-xs); color: var(--p-ink-soft); margin: var(--space-2) 0 0; }
@media (max-width: 480px) {
  .sg-row > * { flex: 1 1 100%; }
  .sg-actions > * { flex: 1 1 100%; text-align: center; }
}

/* ============================================================
   DASHBOARD REDESIGN LAYER (2026-07) — pricing-receipt gate banner,
   hero reward band, share-surface hierarchy. Tokens only.
   ============================================================ */

/* ── Gate banner: pricing-receipt variant (echoes the landing pricing cards) ── */
.gate-banner--pricing .gate-banner__title {
  font-family: var(--font-display);
  font-weight: var(--weight-regular);
  font-size: var(--text-lg);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-4);
}

.gate-urgency {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--p-success-tint);
  border: 1px solid var(--p-success-border-soft);
  border-radius: var(--radius-pill);
  padding: 3px var(--space-3);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  color: var(--p-ink); /* success-on-success-tint fails AA at xs size; the dot carries the color */
  margin-bottom: var(--space-3);
}
.gate-urgency::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--p-success);
}

.gate-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-3);
  max-width: 640px;
  margin-bottom: var(--space-2);
}
@media (max-width: 480px) {
  .gate-cards { grid-template-columns: 1fr; }
}

.gate-card {
  background: var(--p-surface);
  border: 1px solid var(--p-border);
  border-radius: var(--radius);
  overflow: hidden;
}
.gate-card--annual {
  border-color: var(--p-accent-border-soft);
  box-shadow: var(--shadow-sm);
}
.gate-card__band { height: 3px; background: var(--p-border-strong); }
.gate-card--annual .gate-card__band {
  background: linear-gradient(90deg, var(--p-accent-hover), var(--p-accent));
}
@media (prefers-color-scheme: dark) {
  .gate-card { background: var(--p-surface-2); }
}
.gate-card__body { padding: var(--space-3) var(--space-4) var(--space-4); }
.gate-card__cadence {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--p-ink-soft);
  margin-bottom: var(--space-1);
}
.gate-card--annual .gate-card__cadence { color: var(--p-accent-strong); }
.gate-card__amount {
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  font-weight: var(--weight-semibold);
  color: var(--p-ink);
  letter-spacing: var(--tracking-tight);
  line-height: 1.1;
  margin: 0;
}
.gate-card--annual .gate-card__amount { color: var(--p-accent-strong); }
.gate-card__per {
  font-family: var(--font);
  font-size: var(--text-sm);
  font-weight: var(--weight-regular);
  color: var(--p-ink-soft);
  margin-left: 2px;
}
.gate-card__note {
  font-size: var(--text-xs);
  color: var(--p-ink-soft);
  margin: var(--space-1) 0 0;
}

.gate-banner__moat {
  font-size: var(--text-xs);
  color: var(--p-ink-soft);
  margin: var(--space-3) 0 0;
  padding-top: var(--space-3);
  border-top: 1px solid var(--p-accent-border-soft);
}

/* ── Dashboard hero: identity head + reward band ── */
.dash-hero__head { margin-bottom: var(--space-4); }
.dash-hero__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--p-accent-strong);
  margin-bottom: var(--space-1);
}
.dash-hero__name { margin: 0; }

.dash-hero__reward-band {
  padding: var(--space-4) 0;
  margin-bottom: var(--space-4);
  border-top: 1px solid var(--p-border);
  border-bottom: 1px solid var(--p-border);
}
.dash-hero__reward-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--p-ink-soft);
  margin-bottom: var(--space-1);
}
.dash-hero__reward {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--p-success);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin: 0;
}
.dash-hero__reward-sub {
  font-size: var(--text-xs);
  color: var(--p-ink-soft);
  margin-top: var(--space-2);
}
.dash-hero__reward-change {
  color: var(--p-accent-strong);
  font-weight: var(--weight-medium);
}

/* ROI band ("jobs brought in") — structurally the reward band, but the value is NEUTRAL
   serif (--p-ink), NOT the reward's green. Green = what you PAY OUT; neutral serif = what
   the referrals BROUGHT IN. Keeping them different colors is the whole point (earned vs paid
   must never read as the same money — a brand red line). */
.dash-hero__roi-band {
  padding: var(--space-4) 0;
  margin-bottom: var(--space-4);
  border-top: 1px solid var(--p-border);
  border-bottom: 1px solid var(--p-border);
}
.dash-hero__roi-label {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--p-ink-soft);
  margin-bottom: var(--space-1);
}
.dash-hero__roi-value {
  font-family: var(--font-display);
  font-size: var(--text-3xl);
  font-weight: var(--weight-semibold);
  color: var(--p-ink);
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin: 0;
}
.dash-hero__roi-value--empty { color: var(--p-ink-faint); }
.dash-hero__roi-sub {
  font-size: var(--text-xs);
  color: var(--p-ink-soft);
  margin-top: var(--space-2);
}
/* '+ Log job value' — quiet inline capture affordance (a <summary>, marker hidden) */
.referral__log-value-wrap { margin-top: var(--space-2); }
.referral__log-value {
  display: inline-block;
  font-size: var(--text-xs);
  color: var(--p-accent-strong);
  font-weight: var(--weight-medium);
  cursor: pointer;
  list-style: none;
}
.referral__log-value::-webkit-details-marker { display: none; }
.referral__log-value:hover { text-decoration: underline; }
.referral__value-form { display: flex; gap: var(--space-2); align-items: center; margin-top: var(--space-2); flex-wrap: wrap; }
.referral__value-form input { max-width: 9rem; }

/* Stat cells (classes replace the old inline styles) */
.dash-stat { text-align: center; }
.dash-stat + .dash-stat { border-left: 1px solid var(--p-border); }
.dash-stat__num {
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: var(--weight-semibold);
  color: var(--p-ink);
  line-height: 1;
}
.dash-stat__num--confirmed { color: var(--p-accent-strong); }
.dash-stat__num--paid { color: var(--p-success); }
.dash-stat__label {
  font-size: var(--text-xs);
  color: var(--p-ink-soft);
  margin-top: var(--space-1);
}

/* ── Share surface hierarchy ── */
.share__head {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
}
.share__eyebrow {
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--p-accent-strong);
  margin: 0;
}

.share__craft-divider {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: var(--space-5) 0 0;
  font-size: var(--text-xs);
  color: var(--p-ink-faint);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
}
.share__craft-divider::before,
.share__craft-divider::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--p-border);
}

.share__first-run-hint {
  margin: var(--space-3) 0 0;
  font-size: var(--text-sm);
  color: var(--p-ink-soft);
  line-height: var(--leading-normal);
}
.share__first-run-hint a {
  color: var(--p-accent-strong);
  font-weight: var(--weight-medium);
}

/* Referral empty state (first-run holding card) */
.referral-empty {
  padding: var(--space-6) var(--space-5);
  border: 1px dashed var(--p-border);
  border-radius: var(--radius);
  background: var(--p-surface-2);
}

/* Dashboard hero stat row — theme-aware inset (was a hardcoded near-white box that
   turned into a glaring light-gray block, with unreadable labels, in dark mode) */
.dash-statrow {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-3);
  margin-bottom: var(--space-5);
  padding: var(--space-4) var(--space-5);
  background: rgba(255, 255, 255, .55);
  border: 1px solid var(--p-border);
  border-radius: var(--radius-sm);
}
@media (prefers-color-scheme: dark) {
  .dash-statrow {
    background: rgba(255, 255, 255, .05);
    border-color: rgba(255, 255, 255, .12);
  }
}
/* Tighten the 3-up stat row on small phones so the labels don't crowd */
@media (max-width: 480px) {
  .dash-statrow {
    gap: var(--space-2);
    padding: var(--space-3);
  }
}