/* ── Inter, self-hosted ───────────────────────────────────────────────────
   Served from our own domain rather than fonts.googleapis.com. This page is a
   private, invitation-only message to named clients; loading its typeface from
   a third party told that third party the IP address of every client who opened
   it, before they had clicked anything. It was the last external request the
   page made on load.

   Only the five weights the stylesheet actually uses (400/500/600/700/800), and
   only the latin subset — the requested set included 300 and 900, which nothing
   references. font-display: swap keeps text readable while the file loads.

   Inter is licensed under the SIL Open Font License 1.1, which expressly permits
   self-hosting; the licence travels with the files in public/fonts/LICENSE.txt. */
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/assets/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url('/assets/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url('/assets/fonts/inter-600.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url('/assets/fonts/inter-700.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter';
  font-style: normal;
  font-weight: 800;
  font-display: swap;
  src: url('/assets/fonts/inter-800.woff2') format('woff2');
}

/* ══════════════════════════════════════════════════════════════════════
   Your Proactive Plan — Taylor Proactive Team
   Light, premium, navy + orange. Matches TPT brand system.
   ONE accent everywhere: the bright brand orange #F48921. Variables are still
   named --gold-* for stability; --gold-deep is kept only as a hook and equals
   the same bright orange.
   ══════════════════════════════════════════════════════════════════════ */

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

:root {
  --navy: #1B2D4F;
  --navy-deep: #12203B;
  --navy-soft: #2A3F66;
  --gold: #F48921;
  --gold-deep: #F48921;
  --gold-dim: rgba(244, 137, 33, 0.12);
  --gold-border: rgba(244, 137, 33, 0.35);
  --bg: #F7F8FA;
  --surface: #FFFFFF;
  --ink: #1B2D4F;
  --body: #3D4A63;
  --muted: #6B7280;
  --faint: #9CA3AF;
  --border: #E5E7EB;
  --border-soft: #EEF0F4;
  --green: #0E7A4E;
  --green-dim: rgba(14, 122, 78, 0.1);
  --red: #B4372F;
  --red-dim: rgba(180, 55, 47, 0.08);
  --shadow-sm: 0 1px 3px rgba(27, 45, 79, 0.06), 0 1px 2px rgba(27, 45, 79, 0.04);
  --shadow-md: 0 10px 30px rgba(27, 45, 79, 0.08), 0 2px 8px rgba(27, 45, 79, 0.05);
  --shadow-lg: 0 24px 60px rgba(27, 45, 79, 0.14), 0 8px 20px rgba(27, 45, 79, 0.06);
  --radius: 14px;
  --radius-lg: 20px;
}

html { scroll-behavior: smooth; }

body {
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  background: var(--bg);
  color: var(--body);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

::selection { background: var(--gold-dim); color: var(--navy); }

/* ── NAV ─────────────────────────────────────────────────────────────── */
nav.site-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 clamp(20px, 4vw, 48px);
  height: 68px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(18px);
  -webkit-backdrop-filter: blur(18px);
  border-bottom: 1px solid var(--border-soft);
}
/* The real wordmark, not a text imitation of it. Sized by HEIGHT everywhere,
   because the lock-up is two stacked lines and the "PROACTIVE TEAM" rule is
   only ~15% of the total height — below about 34px tall that line stops being
   readable, so heights here are floors, not preferences. */
.nav-logo {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  flex: 0 0 auto;
}
.nav-logo img {
  height: 40px;              /* in a 68px bar */
  width: auto;
  display: block;
}
.nav-deadline {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--navy);
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  padding: 7px 14px;
  border-radius: 100px;
  white-space: nowrap;
}
.nav-deadline .dot {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--gold-deep);
  animation: pulse-dot 2.2s ease-in-out infinite;
}
@keyframes pulse-dot {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 137, 33, 0.45); }
  50% { box-shadow: 0 0 0 6px rgba(244, 137, 33, 0); }
}

/* ── PAGE SCAFFOLD ───────────────────────────────────────────────────── */
main { display: block; }
section { padding: clamp(56px, 9vw, 110px) 24px; }
section.tight { padding-top: clamp(32px, 5vw, 56px); padding-bottom: clamp(32px, 5vw, 56px); }
.container { max-width: 1060px; margin: 0 auto; }
.container.narrow { max-width: 720px; }

.section-tag {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--gold-deep);
  margin-bottom: 18px;
}
.section-title {
  font-size: clamp(28px, 4.2vw, 44px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.12;
  color: var(--ink);
  margin-bottom: 18px;
}
.section-title em { font-style: normal; color: var(--gold-deep); }
.section-sub {
  font-size: 17px;
  color: var(--muted);
  line-height: 1.75;
  max-width: 620px;
}
.center { text-align: center; }
.center .section-sub { margin-left: auto; margin-right: auto; }

/* ── HERO ────────────────────────────────────────────────────────────── */
.hero {
  position: relative;
  padding: clamp(64px, 10vw, 120px) 24px clamp(40px, 6vw, 72px);
  text-align: center;
  overflow: hidden;
}
.hero-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%, rgba(244, 137, 33, 0.13) 0%, transparent 60%),
    radial-gradient(ellipse 50% 40% at 12% 70%, rgba(27, 45, 79, 0.05) 0%, transparent 55%),
    radial-gradient(ellipse 50% 40% at 88% 70%, rgba(244, 137, 33, 0.06) 0%, transparent 55%);
}
.hero > * { position: relative; }
.hero-badge {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  background: var(--surface);
  border: 1px solid var(--gold-border);
  color: var(--gold-deep);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 8px 18px;
  border-radius: 100px;
  margin-bottom: 32px;
  box-shadow: var(--shadow-sm);
}
.hero-badge::before {
  content: '';
  width: 6px; height: 6px;
  background: var(--gold);
  border-radius: 50%;
}
.hero h1 {
  font-size: clamp(38px, 6.4vw, 68px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -0.03em;
  color: var(--ink);
  max-width: 840px;
  margin: 0 auto 24px;
}
.hero h1 em { font-style: normal; color: var(--gold-deep); }
.hero-sub {
  font-size: clamp(16px, 2vw, 19px);
  font-weight: 400;
  color: var(--muted);
  max-width: 600px;
  line-height: 1.75;
  margin: 0 auto;
}

/* ── VIDEO PLACEHOLDER ───────────────────────────────────────────────── */
.video-embed {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--navy-deep);
  box-shadow: var(--shadow-lg);
  border: 1px solid rgba(27, 45, 79, 0.2);
}
.video-embed iframe,
.video-embed video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.video-frame {
  position: relative;
  max-width: 860px;
  margin: 0 auto;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background:
    radial-gradient(ellipse 90% 90% at 50% 0%, rgba(244, 137, 33, 0.16) 0%, transparent 55%),
    linear-gradient(160deg, var(--navy-soft) 0%, var(--navy) 45%, var(--navy-deep) 100%);
  box-shadow: var(--shadow-lg);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20px;
  cursor: pointer;
  border: 1px solid rgba(27, 45, 79, 0.2);
}
.video-frame .monogram {
  position: absolute;
  top: 22px; left: 26px;
  line-height: 0;
}
.video-frame .monogram img { height: 34px; width: auto; display: block; opacity: 0.9; }
.play-ring {
  width: clamp(64px, 9vw, 88px);
  height: clamp(64px, 9vw, 88px);
  border-radius: 50%;
  background: rgba(244, 137, 33, 0.14);
  border: 1.5px solid rgba(244, 137, 33, 0.65);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.25s ease, background 0.25s ease;
  animation: play-pulse 2.8s ease-in-out infinite;
}
@keyframes play-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(244, 137, 33, 0.35); }
  50% { box-shadow: 0 0 0 18px rgba(244, 137, 33, 0); }
}
.video-frame:hover .play-ring { transform: scale(1.07); background: rgba(244, 137, 33, 0.24); }
.play-ring svg { width: 30%; height: 30%; fill: var(--gold); margin-left: 4px; }
.video-caption {
  color: rgba(255, 255, 255, 0.75);
  font-size: 14.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.video-caption strong { color: #fff; font-weight: 600; }
.video-note {
  text-align: center;
  font-size: 12.5px;
  color: var(--faint);
  margin-top: 14px;
}

/* ── SELF-HOSTED PLAYER ───────────────────────────────────────────────────
   Custom chrome so the progress bar can be read but not dragged forward. The
   bar shows two fills: .vp-watched is how far they have actually got (and so
   how far back they may click), .vp-fill is where the playhead is now. */
.video-player { position: relative; background: #000; }
.video-player video { display: block; width: 100%; height: 100%; cursor: pointer; }
.vp-controls {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 26px 16px 12px;
  background: linear-gradient(to top, rgba(11, 20, 40, 0.88) 0%, rgba(11, 20, 40, 0) 100%);
  opacity: 1;
  transition: opacity 0.25s ease;
  z-index: 2;
}
.vp-btn {
  flex: 0 0 auto;
  width: 34px; height: 34px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: #fff;
  cursor: pointer;
  transition: background 0.18s ease;
}
.vp-btn:hover { background: rgba(255, 255, 255, 0.16); }
/* Captions are off by default, so the button needs to read as a toggle with a
   visible on-state — otherwise a client turns them on and gets no confirmation
   beyond text appearing over the video. */
.vp-btn.is-on { background: var(--gold); color: var(--navy-deep); }
.vp-btn.is-on:hover { background: var(--gold); filter: brightness(0.94); }
/* Lift the cue text clear of the control bar. */
.video-player video::cue { font-size: 0.9em; line-height: 1.4; background: rgba(11, 20, 40, 0.78); }
.vp-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.vp-btn svg { width: 20px; height: 20px; fill: currentColor; }
.vp-track {
  position: relative;
  flex: 1 1 auto;
  height: 5px;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.24);
  cursor: pointer;
}
/* The lighter band is the seekable region — it doubles as the affordance
   telling a client how far back they are allowed to go. */
.vp-watched {
  position: absolute; inset: 0 auto 0 0;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: rgba(255, 255, 255, 0.42);
}
.vp-fill {
  position: absolute; inset: 0 auto 0 0;
  height: 100%;
  width: 0;
  border-radius: 99px;
  background: var(--gold);
}
.vp-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px; height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--gold);
  box-shadow: 0 1px 5px rgba(11, 20, 40, 0.6);
  pointer-events: none;
}
.vp-time {
  flex: 0 0 auto;
  font-size: 13px;
  font-weight: 600;
  color: rgba(255, 255, 255, 0.94);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vp-left { color: rgba(255, 255, 255, 0.6); font-weight: 500; }
.vp-hint {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%) scale(0.96);
  max-width: 82%;
  padding: 12px 20px;
  border-radius: 10px;
  background: rgba(11, 20, 40, 0.9);
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-align: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease;
  z-index: 3;
}
.vp-show-hint .vp-hint { opacity: 1; transform: translate(-50%, -50%) scale(1); }
@media (max-width: 560px) {
  .vp-controls { gap: 8px; padding: 22px 10px 9px; }
  .vp-time { font-size: 11.5px; }
  .vp-left { display: none; }   /* elapsed / total still shows the remaining time */
  .vp-btn { width: 30px; height: 30px; }
  .vp-btn svg { width: 17px; height: 17px; }
}

/* ── VIDEO FACADE ─────────────────────────────────────────────────────────
   TPT's own shell over the YouTube video: our poster frame, our animated play
   ring, no red YouTube button. The real player is only injected on click (see
   the script in home.ejs), so nothing is requested from YouTube until then.
   It is a real <button>, so it inherits keyboard and screen-reader support. */
.video-facade {
  position: relative;
  display: block;
  width: 100%;
  max-width: 860px;
  margin: 0 auto;
  padding: 0;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-lg);
  overflow: hidden;
  border: 1px solid rgba(27, 45, 79, 0.2);
  background: var(--navy-deep);
  box-shadow: var(--shadow-lg);
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.video-facade .video-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.6s ease;
}
/* Scrim: lifts the play ring and the label off the photo without dulling his face. */
.video-facade::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 62% 62% at 50% 46%, rgba(11, 20, 40, 0.16) 0%, rgba(11, 20, 40, 0.46) 100%),
    linear-gradient(to top, rgba(11, 20, 40, 0.78) 0%, rgba(11, 20, 40, 0) 42%);
  z-index: 1;
}
.video-facade:hover .video-poster { transform: scale(1.035); }
.video-facade .monogram,
.video-facade .play-ring,
.video-facade .facade-label { position: absolute; z-index: 2; }
.video-facade .monogram { top: 20px; left: 24px; line-height: 0; }
.video-facade .monogram img {
  height: 34px;
  width: auto;
  display: block;
  opacity: 0.95;
  /* The poster is a photograph — a shadow keeps the mark legible whatever
     happens to sit behind it. */
  filter: drop-shadow(0 2px 8px rgba(11, 20, 40, 0.6));
}
/* No backdrop-filter here on purpose: blurring the poster behind the ring
   smears whatever it lands on (Merrill's tie) and reads as a rendering fault.
   A soft dark drop-shadow separates the ring from a busy frame far more
   cleanly, and costs nothing on low-end devices. */
.video-facade .play-ring {
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(244, 137, 33, 0.30);
  border-color: rgba(244, 137, 33, 0.95);
  filter: drop-shadow(0 6px 22px rgba(11, 20, 40, 0.55));
}
.video-facade .play-ring svg { filter: drop-shadow(0 1px 2px rgba(11, 20, 40, 0.45)); }
.video-facade:hover .play-ring,
.video-facade:focus-visible .play-ring {
  transform: translate(-50%, -50%) scale(1.08);
  background: rgba(244, 137, 33, 0.36);
}
.video-facade:focus-visible { outline: 3px solid var(--gold); outline-offset: 3px; }
.video-facade .facade-label {
  left: 26px;
  right: 26px;
  bottom: 20px;
  text-align: left;
  font-size: 14.5px;
  font-weight: 500;
  line-height: 1.45;
  color: rgba(255, 255, 255, 0.92);
}
.video-facade .facade-label strong { font-weight: 700; color: #fff; }
.video-facade .facade-dur { color: rgba(255, 255, 255, 0.6); white-space: nowrap; }
@media (max-width: 560px) {
  .video-facade .monogram { top: 14px; left: 16px; }
  .video-facade .monogram img { height: 26px; }
  .video-facade .facade-label { left: 18px; right: 18px; bottom: 14px; font-size: 13px; }
  /* Drop the lead-in on small screens — it pushed the name and runtime onto a
     second line and left "· 9:51" stranded on its own. */
  .video-facade .facade-prefix { display: none; }
}

/* ── LETTER ──────────────────────────────────────────────────────────── */
.letter-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(32px, 5vw, 60px);
  max-width: 760px;
  margin: 0 auto;
  position: relative;
}
.letter-card::before {
  content: '';
  position: absolute;
  top: 0; left: clamp(32px, 5vw, 60px); right: clamp(32px, 5vw, 60px);
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  border-radius: 0 0 3px 3px;
}
.letter-card p {
  font-size: 16.5px;
  line-height: 1.85;
  color: var(--body);
  margin-bottom: 22px;
}
.letter-card p strong { color: var(--ink); font-weight: 600; }
.letter-card p.salutation { font-weight: 600; color: var(--ink); }
.letter-signature { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--border-soft); }
.letter-signature .sig-name {
  font-size: 21px;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: -0.01em;
}
.letter-signature .sig-title { font-size: 13.5px; color: var(--muted); margin-top: 3px; }

.pull-line {
  border-left: 3px solid var(--gold);
  background: var(--gold-dim);
  border-radius: 0 10px 10px 0;
  padding: 18px 22px;
  margin: 26px 0;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  font-weight: 500;
}

/* ── PILLARS (what's changing) ───────────────────────────────────────── */
.pillars {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 52px;
}
.pillar {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 32px 28px;
  box-shadow: var(--shadow-sm);
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.pillar:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.pillar-icon {
  width: 46px; height: 46px;
  border-radius: 12px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 21px;
  margin-bottom: 20px;
}
.pillar h3 {
  font-size: 17px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 10px;
}
.pillar p { font-size: 14.5px; line-height: 1.7; color: var(--muted); }

/* ── ALPHA WEALTH (modular partial) ──────────────────────────────────── */
.alpha-section {
  background:
    radial-gradient(ellipse 80% 70% at 85% 0%, rgba(244, 137, 33, 0.14) 0%, transparent 55%),
    linear-gradient(150deg, var(--navy-soft) 0%, var(--navy) 50%, var(--navy-deep) 100%);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 6vw, 64px);
  color: #E7EBF3;
  box-shadow: var(--shadow-lg);
  overflow: hidden;
  position: relative;
}
.alpha-section .section-tag { color: var(--gold); }
.alpha-section h2 {
  font-size: clamp(25px, 3.6vw, 38px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
  color: #fff;
  margin-bottom: 18px;
  max-width: 640px;
}
.alpha-section h2 em { font-style: normal; color: var(--gold); }
.alpha-section p {
  font-size: 16px;
  line-height: 1.8;
  color: rgba(231, 235, 243, 0.85);
  max-width: 640px;
  margin-bottom: 18px;
}
.alpha-section p strong { color: #fff; font-weight: 600; }
.alpha-points {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 34px;
}
.alpha-point {
  background: rgba(255, 255, 255, 0.05);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  padding: 22px 20px;
}
.alpha-point .ap-title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 14.5px;
  font-weight: 700;
  color: var(--gold);
  margin-bottom: 8px;
}
.alpha-point p { font-size: 13.5px; line-height: 1.65; color: rgba(231, 235, 243, 0.75); margin: 0; }
.alpha-footnote {
  margin-top: 28px;
  font-size: 12.5px;
  color: rgba(231, 235, 243, 0.5);
  max-width: 640px;
}

/* ── DEADLINE BANNER ─────────────────────────────────────────────────── */
.deadline-banner {
  background: var(--surface);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(28px, 4.5vw, 44px);
  display: flex;
  align-items: center;
  gap: clamp(20px, 4vw, 40px);
  flex-wrap: wrap;
}
.deadline-count {
  flex-shrink: 0;
  text-align: center;
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  border-radius: var(--radius);
  padding: 18px 28px;
  min-width: 130px;
}
.deadline-count .dc-num {
  font-size: 42px;
  font-weight: 800;
  color: var(--navy);
  line-height: 1;
  letter-spacing: -0.02em;
}
.deadline-count .dc-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--gold-deep);
  margin-top: 6px;
}
.deadline-copy { flex: 1; min-width: 260px; }
.deadline-copy h3 {
  font-size: 20px;
  font-weight: 700;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}
.deadline-copy p { font-size: 14.5px; line-height: 1.7; color: var(--muted); }
.deadline-copy p strong { color: var(--ink); }

/* ── CHOICE CARDS ────────────────────────────────────────────────────── */
.choice-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-top: 52px;
  max-width: 880px;
  margin-left: auto;
  margin-right: auto;
}
.choice-card {
  border-radius: var(--radius-lg);
  padding: clamp(30px, 4vw, 44px) clamp(26px, 3.5vw, 38px);
  text-align: left;
  display: flex;
  flex-direction: column;
  transition: transform 0.22s ease, box-shadow 0.22s ease;
}
.choice-card:hover { transform: translateY(-5px); }
.choice-card.primary {
  background:
    radial-gradient(ellipse 90% 70% at 80% 0%, rgba(244, 137, 33, 0.18) 0%, transparent 55%),
    linear-gradient(155deg, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%);
  color: #E7EBF3;
  box-shadow: var(--shadow-lg);
}
.choice-card.primary:hover { box-shadow: 0 30px 70px rgba(27, 45, 79, 0.25), 0 10px 24px rgba(27, 45, 79, 0.1); }
.choice-card.secondary {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
}
.choice-card.secondary:hover { box-shadow: var(--shadow-md); }
.choice-eyebrow {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 14px;
}
.choice-card.primary .choice-eyebrow { color: var(--gold); }
.choice-card.secondary .choice-eyebrow { color: var(--faint); }
.choice-card h3 {
  font-size: clamp(20px, 2.6vw, 24px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  margin-bottom: 12px;
}
.choice-card.primary h3 { color: #fff; }
.choice-card.secondary h3 { color: var(--ink); }
.choice-card > p { font-size: 14.5px; line-height: 1.7; margin-bottom: 26px; flex: 1; }
.choice-card.primary > p { color: rgba(231, 235, 243, 0.8); }
.choice-card.secondary > p { color: var(--muted); }

/* ── BUTTONS ─────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.01em;
  padding: 15px 32px;
  border-radius: 10px;
  border: none;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  text-align: center;
}
.btn-gold {
  /* Bright brand orange #F48921 with navy text (strong contrast). */
  background: var(--gold);
  color: var(--navy-deep);
}
.btn-gold:hover { background: var(--gold); color: var(--navy-deep); filter: brightness(0.93); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(244, 137, 33, 0.35); }
.btn-navy {
  background: var(--navy);
  color: #fff;
}
.btn-navy:hover { background: var(--navy-deep); transform: translateY(-2px); box-shadow: 0 12px 30px rgba(27, 45, 79, 0.25); }
.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1.5px solid var(--border);
}
.btn-outline:hover { border-color: var(--navy); transform: translateY(-2px); }
.btn-ghost {
  background: transparent;
  color: var(--muted);
  font-weight: 500;
  padding: 12px 16px;
}
.btn-ghost:hover { color: var(--navy); }
.btn-block { width: 100%; }
.btn:disabled { opacity: 0.55; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── FORMS ───────────────────────────────────────────────────────────── */
.form-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(30px, 4.5vw, 48px);
  max-width: 560px;
  margin: 0 auto;
}
.form-card.wide { max-width: 640px; }
.form-group { margin-bottom: 18px; }
.form-group label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: 7px;
}
.form-group input[type="text"],
.form-group input[type="email"],
.form-group input[type="tel"],
.form-group textarea {
  width: 100%;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 13px 16px;
  color: var(--ink);
  font-family: inherit;
  font-size: 15px;
  outline: none;
  transition: border-color 0.2s, background 0.2s;
}
.form-group input:focus, .form-group textarea:focus {
  border-color: var(--gold);
  background: var(--surface);
  box-shadow: 0 0 0 4px var(--gold-dim);
}
.form-group input::placeholder { color: var(--faint); }

.check-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  margin-bottom: 14px;
}
.check-card:hover { border-color: var(--gold-border); }
.check-card.checked { border-color: var(--gold); background: var(--gold-dim); }
.check-card input[type="checkbox"] {
  flex-shrink: 0;
  width: 20px; height: 20px;
  margin-top: 2px;
  accent-color: var(--navy);
  cursor: pointer;
}
.check-card span { font-size: 14.5px; line-height: 1.65; color: var(--body); }
.check-card span strong { color: var(--ink); }

.form-errors {
  background: var(--red-dim);
  border: 1px solid rgba(180, 55, 47, 0.25);
  border-radius: 10px;
  padding: 14px 18px;
  margin-bottom: 22px;
}
.form-errors p { font-size: 14px; color: var(--red); margin: 2px 0; }

.form-note { font-size: 12.5px; color: var(--faint); text-align: center; margin-top: 16px; line-height: 1.6; }

/* ── CONFIRMATION ────────────────────────────────────────────────────── */
.confirm-check {
  width: 74px; height: 74px;
  border-radius: 50%;
  background: var(--gold-dim);
  border: 1.5px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 26px;
}
.confirm-check svg { width: 34px; height: 34px; stroke: var(--gold-deep); }

.next-steps { max-width: 640px; margin: 44px auto 0; text-align: left; }
.next-step {
  display: flex;
  gap: 18px;
  padding: 20px 0;
  border-bottom: 1px solid var(--border-soft);
}
.next-step:last-child { border-bottom: none; }
.step-num {
  flex-shrink: 0;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--navy);
  color: var(--gold);
  font-size: 14px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
}
.next-step h4 { font-size: 15.5px; font-weight: 700; color: var(--ink); margin-bottom: 4px; }
.next-step p { font-size: 14px; line-height: 1.65; color: var(--muted); }

/* ── CALENDLY PLACEHOLDER ────────────────────────────────────────────── */
.calendly-block {
  background: var(--surface);
  border: 1.5px dashed var(--gold-border);
  border-radius: var(--radius-lg);
  padding: clamp(36px, 5vw, 56px);
  text-align: center;
  max-width: 720px;
  margin: 0 auto;
  box-shadow: var(--shadow-sm);
}
.calendly-block .cal-icon {
  width: 58px; height: 58px;
  border-radius: 16px;
  background: var(--gold-dim);
  border: 1px solid var(--gold-border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  margin: 0 auto 20px;
}
.calendly-block h3 { font-size: 22px; font-weight: 800; color: var(--ink); letter-spacing: -0.015em; margin-bottom: 10px; }
.calendly-block p { font-size: 15px; color: var(--muted); line-height: 1.7; max-width: 460px; margin: 0 auto 26px; }
.calendly-block .cal-note { font-size: 12px; color: var(--faint); margin-top: 18px; margin-bottom: 0; }

/* ── PARTNER CARD (Robert Hall offer) ────────────────────────────────── */
.partner-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: clamp(30px, 4.5vw, 48px);
  max-width: 720px;
  margin: 0 auto;
}
.partner-card .partner-name {
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--navy);
  margin-bottom: 4px;
}
.partner-card .partner-loc { font-size: 13.5px; color: var(--faint); margin-bottom: 20px; }
.partner-card > p { font-size: 15.5px; line-height: 1.75; color: var(--body); margin-bottom: 16px; }
.partner-creds {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  margin: 26px 0;
}
.cred {
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 12px;
  padding: 16px 14px;
  text-align: center;
}
.cred .cred-big { font-size: 19px; font-weight: 800; color: var(--navy); letter-spacing: -0.01em; }
.cred .cred-small { font-size: 12px; color: var(--muted); margin-top: 4px; line-height: 1.45; }

/* ── FOOTER ──────────────────────────────────────────────────────────── */
footer.site-footer {
  border-top: 1px solid var(--border-soft);
  background: var(--surface);
  padding: 36px 24px;
  text-align: center;
}
footer.site-footer .footer-logo {
  height: 44px;
  width: auto;
  display: block;
  margin: 0 auto 16px;
  opacity: 0.85;
}
footer.site-footer p { font-size: 13px; color: var(--faint); }
footer.site-footer a { color: var(--gold-deep); text-decoration: none; font-weight: 500; }
footer.site-footer a:hover { text-decoration: underline; }

/* ══ INTERNAL PAGES (dashboard + partner board) ══════════════════════── */
.warn-banner {
  background: #FEF6E7;
  border-bottom: 1px solid #F3DFB6;
  padding: 9px 24px;
  text-align: center;
  font-size: 12.5px;
  font-weight: 600;
  color: #8A6A1F;
  letter-spacing: 0.02em;
}
.internal-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 24px;
  background: var(--ink, #12203a);
  color: #fff;
  font-size: 12.5px;
}
.internal-bar .ib-brand { display: inline-flex; align-items: center; gap: 9px; font-weight: 600; letter-spacing: 0.02em; }
.internal-bar .ib-brand img { height: 24px; width: auto; display: block; }
.internal-bar .ib-brand > span { opacity: 0.72; }
.internal-bar .ib-right { display: flex; align-items: center; gap: 14px; }
.internal-bar .ib-user { opacity: 0.85; }
.internal-bar .ib-link { color: #fff; text-decoration: none; font-weight: 600; opacity: 0.85; }
.internal-bar .ib-link:hover { opacity: 1; text-decoration: underline; }
.internal-wrap { max-width: 1160px; margin: 0 auto; padding: 40px 24px 80px; }
.internal-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  margin-bottom: 30px;
}
.internal-head h1 { font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; }
.internal-head .sub { font-size: 14px; color: var(--muted); margin-top: 4px; }

.stat-tiles {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 30px;
}
.stat-tile {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  padding: 20px 22px;
  box-shadow: var(--shadow-sm);
}
.stat-tile .st-num { font-size: 30px; font-weight: 800; color: var(--navy); letter-spacing: -0.02em; line-height: 1.1; }
.stat-tile .st-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); margin-top: 6px; }
.stat-tile.gold .st-num { color: var(--gold-deep); }

.filter-tabs { display: flex; gap: 8px; margin-bottom: 22px; flex-wrap: wrap; }
.filter-tab {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--muted);
  text-decoration: none;
  padding: 8px 18px;
  border-radius: 100px;
  border: 1px solid var(--border);
  background: var(--surface);
  transition: all 0.15s;
}
.filter-tab:hover { border-color: var(--navy); color: var(--navy); }
.filter-tab.active { background: var(--navy); border-color: var(--navy); color: #fff; }

.table-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  overflow-x: auto;
}
table.data-table { width: 100%; border-collapse: collapse; min-width: 780px; }
.data-table th {
  text-align: left;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  padding: 14px 18px;
  border-bottom: 1px solid var(--border);
  background: var(--bg);
  white-space: nowrap;
}
.data-table td {
  padding: 14px 18px;
  font-size: 14px;
  color: var(--body);
  border-bottom: 1px solid var(--border-soft);
  vertical-align: middle;
}
.data-table tr:last-child td { border-bottom: none; }
.data-table td .cell-main { font-weight: 600; color: var(--ink); }
.data-table td .cell-sub { font-size: 12.5px; color: var(--faint); margin-top: 1px; }

.badge {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 100px;
  white-space: nowrap;
}
.badge.yes { background: var(--green-dim); color: var(--green); }
.badge.no { background: var(--red-dim); color: var(--red); }
.badge.stage { background: rgba(27, 45, 79, 0.07); color: var(--navy); }
.badge.stage.referral { background: var(--gold-dim); color: var(--gold-deep); }

select.status-select {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 7px 10px;
  cursor: pointer;
  outline: none;
  transition: border-color 0.15s;
}
select.status-select:focus { border-color: var(--gold); }
select.status-select.saved { border-color: var(--green); background: var(--green-dim); }

/* Master-note expander */
.note-toggle {
  font-family: inherit;
  font-size: 14px;
  line-height: 1;
  width: 30px;
  height: 30px;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
  color: var(--faint);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}
.note-toggle:hover { border-color: var(--gold); }
.note-toggle.has-note { border-color: var(--gold-border); background: var(--gold-dim); color: var(--gold-deep); }
.note-toggle.open { border-color: var(--ink); }
.note-row > td { background: var(--bg); padding: 0; }
.note-editor { padding: 14px 16px 18px; }
.note-editor label { display: block; font-size: 12px; color: var(--faint); margin-bottom: 6px; letter-spacing: 0.02em; }
.note-editor label strong { color: var(--ink); font-weight: 600; }
.note-editor textarea {
  width: 100%;
  font-family: inherit;
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 10px 12px;
  resize: vertical;
  outline: none;
  transition: border-color 0.15s;
}
.note-editor textarea:focus { border-color: var(--gold); }
.note-status { font-size: 11.5px; color: var(--faint); margin-top: 5px; min-height: 15px; }
.note-status.saved { color: var(--green); }

.empty-state {
  text-align: center;
  padding: 70px 24px;
  color: var(--faint);
  font-size: 15px;
}
.empty-state .es-icon { font-size: 34px; margin-bottom: 12px; }

/* ── PARTNER BOARD CARDS ─────────────────────────────────────────────── */
.referral-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.referral-card {
  background: var(--surface);
  border: 1px solid var(--border-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  padding: 26px;
}
.referral-card .rc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 4px; }
.referral-card .rc-name { font-size: 18px; font-weight: 800; color: var(--ink); letter-spacing: -0.01em; }
.referral-card .rc-contact { font-size: 13px; color: var(--muted); margin-bottom: 18px; line-height: 1.6; }
.referral-card .rc-contact a { color: var(--navy); text-decoration: none; font-weight: 500; }

.checklist { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.check-item {
  display: flex;
  align-items: center;
  gap: 11px;
  padding: 10px 14px;
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 9px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 500;
  color: var(--body);
  transition: all 0.15s;
  user-select: none;
}
.check-item:hover { border-color: var(--gold-border); }
.check-item.done { background: var(--green-dim); border-color: rgba(14, 122, 78, 0.25); color: var(--green); }
.check-item input { width: 17px; height: 17px; accent-color: var(--green); cursor: pointer; flex-shrink: 0; }

.mf-row { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; }
.mf-row .mf-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted); }
.mf-toggle { display: flex; gap: 6px; }
.mf-btn {
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  padding: 7px 16px;
  border-radius: 100px;
  border: 1.5px solid var(--border);
  background: var(--surface);
  color: var(--muted);
  cursor: pointer;
  transition: all 0.15s;
}
.mf-btn:hover { border-color: var(--navy); color: var(--navy); }
.mf-btn.active-yes { background: var(--green-dim); border-color: var(--green); color: var(--green); }
.mf-btn.active-no { background: var(--red-dim); border-color: var(--red); color: var(--red); }
.mf-btn.active-pending { background: var(--gold-dim); border-color: var(--gold-deep); color: var(--gold-deep); }

.rc-notes textarea {
  width: 100%;
  min-height: 74px;
  background: var(--bg);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--ink);
  resize: vertical;
  outline: none;
  transition: border-color 0.2s;
}
.rc-notes textarea:focus { border-color: var(--gold); }
.rc-notes .notes-status { font-size: 11.5px; color: var(--faint); margin-top: 5px; min-height: 15px; }
.rc-notes .notes-status.saved { color: var(--green); font-weight: 600; }

.progress-track {
  height: 5px;
  background: var(--border-soft);
  border-radius: 100px;
  margin-bottom: 18px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--gold), var(--gold-deep));
  border-radius: 100px;
  transition: width 0.35s ease;
}

/* ── FADE-IN ─────────────────────────────────────────────────────────── */
.fade-up { opacity: 0; transform: translateY(18px); transition: opacity 0.6s ease, transform 0.6s ease; }
.fade-up.visible { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .fade-up { opacity: 1; transform: none; transition: none; }
  .play-ring, .nav-deadline .dot { animation: none; }
}

/* ── § 7216 CONSENT SCREEN ────────────────────────────────────────────────
   Rev. Proc. 2013-14 § 5.03 sets real constraints on how this may look:
   text at least the size of normal body copy, sufficient contrast, and the
   whole thing must print readably. Do not shrink this type to make the page
   look tidier — the size is a compliance property, not a design choice. */
.consent-screen { padding-top: 46px; }
.consent-doc {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: clamp(26px, 4vw, 52px);
  box-shadow: var(--shadow-md, 0 8px 30px rgba(27, 45, 79, 0.08));
}
.consent-title {
  font-size: clamp(23px, 3.2vw, 31px);
  font-weight: 800;
  color: var(--ink);
  letter-spacing: -0.01em;
  margin: 0 0 8px;
}
.consent-meta {
  font-size: 12.5px;
  color: var(--faint);
  margin: 0 0 26px;
  padding-bottom: 18px;
  border-bottom: 1px solid var(--border-soft);
}
.consent-h2 {
  font-size: 15px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--navy);
  margin: 30px 0 10px;
}
/* 16px floor: the site's body copy sits at 15–16px, and the regulation requires
   the consent to be no smaller than that. */
.consent-p, .consent-list li {
  font-size: 16px;
  line-height: 1.72;
  color: var(--body);
  margin: 0 0 14px;
}
.consent-list { margin: 0 0 14px; padding-left: 22px; }
.consent-list li { margin-bottom: 8px; }
/* The statutorily prescribed paragraphs. Given their own treatment so they read
   as the formal notices they are, and so nobody mistakes them for marketing. */
.consent-mandatory {
  font-size: 16px;
  line-height: 1.72;
  color: var(--ink);
  background: var(--gold-dim);
  border-left: 3px solid var(--gold);
  border-radius: 0 8px 8px 0;
  padding: 16px 20px;
  margin: 22px 0;
}
/* Same 16px floor as the rest of the document — this is part of the consent,
   not a footnote to it. */
.consent-contact {
  font-size: 16px;
  line-height: 1.72;
  color: var(--body);
  background: var(--bg);
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  padding: 16px 20px;
  margin: 0 0 14px;
}
.consent-receipt {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
  max-width: 640px;
  margin: 40px auto 0;
  padding: 20px 24px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
}
.consent-receipt strong { display: block; font-size: 15px; color: var(--ink); margin-bottom: 3px; }
.consent-receipt span { font-size: 13.5px; color: var(--muted); line-height: 1.55; }
.consent-receipt .btn { padding: 11px 20px; font-size: 13.5px; flex: 0 0 auto; }

.consent-sign {
  margin-top: 34px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}
.consent-sign label {
  display: block;
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--muted);
  margin-bottom: 8px;
}
.consent-sign input {
  width: 100%;
  padding: 15px 16px;
  font-family: inherit;
  font-size: 17px;
  color: var(--ink);
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  margin-bottom: 10px;
}
.consent-sign input:focus { outline: none; border-color: var(--navy); box-shadow: 0 0 0 3px rgba(27, 45, 79, 0.12); }
.consent-sighelp { font-size: 13.5px; color: var(--muted); margin: 0 0 20px; line-height: 1.6; }
/* The six-digit verification code. Spaced and monospaced so a client reading it
   off their phone can see they have typed it correctly without counting. */
.consent-code-input {
  font-family: ui-monospace, Menlo, Consolas, monospace;
  font-size: 26px;
  letter-spacing: 0.32em;
  text-align: center;
}
.consent-decline { text-align: center; margin-top: 18px; }
.consent-decline a { font-size: 13.5px; color: var(--muted); text-decoration: underline; }
.consent-decline a:hover { color: var(--navy); }

/* § 5.03(3): "able to be formatted in a readable and printer-friendly manner."
   A client who prints this for their records must get the document and nothing
   else — no nav, no footer, no signature input, no buttons. */
@media print {
  nav.site-nav, footer.site-footer, .consent-sign, .consent-decline { display: none !important; }
  .consent-screen { padding: 0; }
  .consent-doc { border: none; box-shadow: none; padding: 0; background: none; }
  .consent-mandatory { background: none; border-left: 2px solid #000; }
  .consent-p, .consent-list li, .consent-mandatory { font-size: 12pt; color: #000; }
}

/* ── STAFF PREVIEW MODE ───────────────────────────────────────────────────
   Deliberately loud. The one real hazard of a preview mode is someone taking a
   preview for the live thing and believing a record was written or a consent
   signed, so this is not styled to blend in. */
.preview-bar {
  position: sticky;
  top: 0;
  z-index: 200;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  padding: 10px clamp(14px, 3vw, 26px);
  background: var(--ink, #12203a);
  color: #fff;
  font-size: 13px;
  border-bottom: 2px solid var(--gold);
}
.pb-tag {
  background: var(--gold);
  color: var(--navy-deep);
  font-weight: 800;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 5px;
}
.pb-label { font-weight: 700; }
.pb-pos { opacity: 0.6; font-variant-numeric: tabular-nums; }
.pb-nav { display: flex; gap: 14px; margin-left: auto; flex-wrap: wrap; }
.pb-nav a { color: #fff; text-decoration: none; font-weight: 600; opacity: 0.9; }
.pb-nav a:hover { opacity: 1; text-decoration: underline; }
.pb-index { border-left: 1px solid rgba(255,255,255,0.25); padding-left: 14px; }
.pb-note { width: 100%; font-size: 12px; opacity: 0.62; }
/* The preview banner replaces the sticky nav's job at the top of the viewport;
   without this they overlap and the logo lands under the bar. */
body.is-preview nav.site-nav { position: static; }

.prev-group {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--muted);
  margin: 32px 0 14px;
}
.prev-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.prev-card {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 20px 22px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  text-decoration: none;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.prev-card:hover { border-color: var(--navy); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(27,45,79,0.10); }
.prev-label { font-size: 15.5px; font-weight: 700; color: var(--ink); }
.prev-note { font-size: 13px; color: var(--muted); line-height: 1.55; }
.prev-go { font-size: 12.5px; font-weight: 700; color: var(--gold-deep); margin-top: 4px; }
.prev-foot { margin-top: 34px; font-size: 13px; color: var(--faint); line-height: 1.6; }
.prev-foot code { background: var(--bg); padding: 2px 6px; border-radius: 4px; font-size: 12px; }

/* Honeypot — see middleware/antibot.js and views/partials/honeypot.ejs.
   Moved off-screen rather than display:none, because some scrapers skip fields
   that are display:none while almost none compute layout. Must stay visually
   unreachable: anything typed here is treated as a bot and the submission is
   silently dropped, so a client who could see it would lose their response. */
.hp-field {
  position: absolute !important;
  left: -9999px !important;
  top: auto !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
}


/* ── Dashboard: offboarding column ────────────────────────────────────────
   Ashley's view of a departing client: how long they have, which reminders
   have gone, whether a § 7216 consent is on file, and a way to give them more
   time. Blank for continuing clients and for rows predating the feature. */
.ob-cell { white-space: nowrap; line-height: 1.5; }
.ob-none { color: var(--faint); }
.ob-when { display: block; font-size: 13px; font-weight: 700; color: var(--navy); }
.ob-when.urgent { color: #B45309; }
.ob-when.closed { color: var(--red, #B91C1C); }
.ob-date { display: block; font-size: 11.5px; color: var(--faint); }
.ob-pips { display: inline-flex; gap: 3px; margin-top: 4px; vertical-align: middle; }
.ob-pips i { width: 7px; height: 7px; border-radius: 50%; background: var(--border); display: block; }
.ob-pips i.on { background: var(--gold); }
.ob-consent {
  display: inline-block; margin-left: 6px; font-size: 10.5px; font-weight: 700;
  letter-spacing: 0.04em; color: var(--green, #15803D);
  background: var(--green-dim, #ECFDF5); border-radius: 4px; padding: 2px 6px;
}
.ob-extend {
  display: inline-block; margin-top: 5px; font-family: inherit; font-size: 11px;
  font-weight: 700; color: var(--navy); background: var(--bg);
  border: 1px solid var(--border); border-radius: 5px; padding: 3px 8px; cursor: pointer;
}
.ob-extend:hover:not(:disabled) { border-color: var(--navy); background: #fff; }
.ob-extend:disabled { opacity: 0.55; cursor: default; }


.row-actions { white-space: nowrap; display: flex; gap: 6px; align-items: center; }
.row-del {
  font-family: inherit; font-size: 13px; font-weight: 700; line-height: 1;
  color: var(--faint); background: transparent; border: 1px solid transparent;
  border-radius: 6px; padding: 6px 8px; cursor: pointer; transition: all 0.15s ease;
}
.row-del:hover:not(:disabled) { color: var(--red, #B91C1C); border-color: var(--red, #B91C1C); background: var(--red-dim, #FEF2F2); }
.row-del:disabled { opacity: 0.4; cursor: default; }

.badge.cohort-t {
  background: rgba(180, 83, 9, 0.10); color: #B45309; margin-left: 6px;
}


/* ── Client links (admin) ─────────────────────────────────────────────── */
.inv-form { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; margin-top: 22px; }
.inv-form label { display: block; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; }
.inv-form textarea { width: 100%; padding: 14px; font-family: ui-monospace, Menlo, monospace; font-size: 13px; border: 1.5px solid var(--border); border-radius: 10px; resize: vertical; }
.inv-hint { font-size: 12.5px; color: var(--faint); margin: 8px 0 18px; }
.inv-cohort { border: none; padding: 0; margin: 0 0 18px; }
.inv-cohort legend { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 10px; }
.inv-cohort label { display: flex; align-items: flex-start; gap: 10px; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 14px; color: var(--body); margin-bottom: 8px; }
.inv-cohort input { margin-top: 3px; }
.inv-result { background: var(--gold-dim); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; padding: 14px 18px; margin-top: 22px; font-size: 14px; color: var(--ink); }
.inv-skipped { margin-top: 10px; font-size: 13px; color: #8A6A1F; }
.inv-skipped ul { margin: 6px 0 0; padding-left: 20px; }
.inv-copy { font-family: inherit; font-size: 12px; font-weight: 700; color: var(--navy); background: var(--bg); border: 1px solid var(--border); border-radius: 6px; padding: 5px 10px; cursor: pointer; }
.inv-copy:hover { border-color: var(--navy); background: #fff; }
.inv-copy.ok { background: var(--green-dim, #ECFDF5); color: var(--green, #15803D); border-color: var(--green, #15803D); }
.inv-url { display: block; font-family: ui-monospace, Menlo, monospace; font-size: 11px; color: var(--faint); margin-top: 5px; word-break: break-all; }

/* ── RESPONSIVE ──────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .pillars, .alpha-points, .partner-creds { grid-template-columns: 1fr; }
  .choice-grid { grid-template-columns: 1fr; }
  .referral-grid { grid-template-columns: 1fr; }
  .stat-tiles { grid-template-columns: repeat(2, 1fr); }
  .deadline-banner { flex-direction: column; text-align: center; }
  .nav-deadline .nd-text-long { display: none; }
}
@media (max-width: 480px) {
  .stat-tiles { grid-template-columns: 1fr; }
  nav.site-nav { padding: 0 16px; }
  /* 32px is about the floor before "PROACTIVE TEAM" stops being readable —
     the deadline pill shrinks first, not the logo. */
  .nav-logo img { height: 32px; }
  footer.site-footer .footer-logo { height: 38px; }
}

/* The TaxDome export picker on Client links. Sized to read as the primary
   action next to the paste box, which is now the secondary path. */
.inv-file {
  display: block;
  width: 100%;
  padding: 14px;
  border: 1.5px dashed var(--border);
  border-radius: 10px;
  background: #fff;
  font-family: inherit;
  font-size: 14px;
  cursor: pointer;
}
.inv-file:hover { border-color: var(--navy); }
.inv-file:focus-visible { outline: 2px solid var(--orange, #F48921); outline-offset: 2px; }

/* ── Referral checklist inside the TPT dashboard ──────────────────────────
   Same four items as the partner board, same endpoint, grouped by who owns
   the step. Ashley works here, not on the partner board. */
.dash-checklist { display: flex; flex-wrap: wrap; gap: 32px; padding: 16px 4px 6px; position: relative; }
.dc-col { min-width: 240px; }
.dc-group {
  font-size: 11px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--faint); margin-bottom: 8px;
}
.dc-item {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: 13.5px; color: var(--body); padding: 5px 0; cursor: pointer;
}
.dc-item input { margin-top: 2px; cursor: pointer; }
.dc-item.done { color: var(--green); text-decoration: line-through; text-decoration-thickness: 1px; }
/* Locked because the client's § 7216 consent does not authorise it. Reads as
   unavailable rather than broken — the reason sits directly underneath. */
.dc-item.locked { color: var(--faint); cursor: not-allowed; text-decoration: none; }
.dc-item.locked input { cursor: not-allowed; }
.dc-lock {
  font-size: 12px; line-height: 1.5; color: var(--red);
  background: var(--red-dim); border-radius: 8px;
  padding: 9px 11px; margin-top: 6px; max-width: 340px;
}
.dc-status { font-size: 12px; align-self: flex-end; margin-left: auto; }
.dc-status.ok { color: var(--green); }
.dc-status.err { color: var(--red); max-width: 320px; line-height: 1.5; }
.check-toggle.open { background: var(--navy); color: #fff; }

/* Partner board: the same grouping and lock treatment. */
.check-group {
  font-size: 10.5px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase;
  color: var(--faint); margin: 10px 0 4px;
}
.check-item.locked { color: var(--faint); cursor: not-allowed; text-decoration: none; }
.check-item.locked input { cursor: not-allowed; }
.check-lock-note {
  font-size: 11.5px; line-height: 1.45; color: var(--red);
  background: var(--red-dim); border-radius: 6px; padding: 7px 9px; margin: 4px 0 2px;
}

/* The referral card, rendered inside a dashboard row. Same card, same classes as
   the partner board — only the chrome around it differs, so the two views cannot
   drift apart visually. */
.referral-card.in-dash {
  margin: 6px 0 10px;
  box-shadow: none;
  border: 1px solid var(--border);
}
.referral-card.in-dash .rc-head { align-items: flex-start; }
/* The client's name doubles as the card opener. Styled as text, not a button —
   it lives in a data table and a row of real buttons would shout. */
.check-toggle {
  background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  display: inline-flex; align-items: baseline; gap: 6px;
}
.check-toggle:hover { color: var(--gold-deep); }
.check-toggle:focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; border-radius: 4px; }
.ct-caret { font-size: 10px; color: var(--faint); transition: transform 0.15s ease; }
.check-toggle.open .ct-caret { transform: rotate(90deg); color: var(--gold-deep); }

/* Robert Hall's half of the referral card, shown read-only inside TPT's
   dashboard. Visibly not an input: this is their answer, not TPT's to change. */
.rh-readout {
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border-soft);
  display: flex; flex-direction: column; gap: 14px;
}
.rh-line { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.rh-label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--faint);
}
.rh-pill {
  font-size: 12.5px; font-weight: 600; padding: 4px 12px; border-radius: 100px;
  border: 1px solid var(--border);
}
.rh-pending { background: var(--bg); color: var(--muted); }
.rh-yes { background: var(--green-dim); color: var(--green); border-color: rgba(14,122,78,0.25); }
.rh-no { background: var(--red-dim); color: var(--red); border-color: rgba(180,55,47,0.25); }
.rh-src { font-size: 11.5px; color: var(--faint); font-style: italic; }
.rh-notes { display: flex; flex-direction: column; gap: 6px; }
.rh-note-body {
  font-size: 13.5px; line-height: 1.65; color: var(--body);
  background: var(--bg); border: 1px solid var(--border-soft);
  border-radius: 8px; padding: 11px 13px; white-space: pre-wrap;
}
.rh-note-empty { font-size: 13px; color: var(--faint); }