/* ===== Base & Typography ===== */
/* Brand colors — sourced from official Lead with How / Alison Kling assets */
:root {
  /* Lead with How brand */
  --green: #8DB88A;          /* sage green — primary LWH brand color */
  --green-light: #A8C8A3;
  --green-soft: #C4D9C2;
  --navy: #2D4860;           /* navy — authority, text, "lead with" */

  /* Alison Kling personal brand */
  --coral: #E8A898;          /* peach-coral — personal/human dimension */
  --coral-light: #EDB9AC;
  --coral-soft: #F5D9D2;

  /* Supporting palette */
  --blue: #9DC3D6;
  --blue-light: #B0D0E0;
  --blue-dark: #2D4860;
  --cream: #FDFCFA;
  --warm-white: #FFFFFF;
  --text: #1C1C1C;
  --text-light: #6B6B6B;
  --border: #E2DDD6;
  --shadow: rgba(45, 72, 96, 0.1);
  --radius: 10px;
}

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

body {
  font-family: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  font-weight: 400;
  color: var(--text);
  background: var(--cream);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 600;
  line-height: 1.3;
  color: #2D4A5E;
}

h1 { font-size: 2.4rem; margin-bottom: 0.5rem; }
h2 { font-size: 1.8rem; margin-bottom: 0.5rem; }
h3 { font-size: 1.3rem; }

a { color: var(--blue); text-decoration: none; }
a:hover { color: var(--green); }

.subtitle {
  font-size: 1.05rem;
  color: var(--text-light);
  margin-bottom: 1.5rem;
  font-weight: 300;
}

.hint { font-size: 0.85rem; color: var(--text-light); font-weight: 300; }

/* ===== Layout ===== */
.container { max-width: 900px; margin: 0 auto; padding: 2rem 1.5rem; }
.container.narrow { max-width: 680px; }

.screen { display: none; min-height: 100vh; }
/* Deep-linked paths: don't show the default landing animation before JS routes */
html.deep-link #screen-landing.active { display: none; }
body.demo-tour-active { overflow-anchor: none; }
.screen.active { display: block; }

/* ===== Buttons ===== */
.btn {
  display: inline-block;
  padding: 0.65rem 1.6rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  border: none;
  transition: all 0.2s ease;
  letter-spacing: 0.03em;
  line-height: 1.4;
}

.btn-primary {
  background: var(--green);
  color: white;
  box-shadow: 0 1px 2px rgba(45,72,96,0.06);
}
.btn-primary:hover { background: #6da66a; color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(45,72,96,0.15); }

.btn-accent {
  background: var(--coral);
  color: white;
  box-shadow: 0 1px 2px rgba(45,72,96,0.06);
}
.btn-accent:hover { background: #d68f7c; color: white; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(45,72,96,0.15); }

.btn-outline {
  background: transparent;
  color: var(--navy);
  border: 1px solid rgba(45,72,96,0.25);
}
.btn-outline:hover { background: var(--navy); color: white; border-color: var(--navy); }

.btn-small {
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
}

.btn-danger {
  background: #c0392b;
  color: white;
}
.btn-danger:hover { background: #e74c3c; }

/* ===== Landing Hero ===== */
.landing-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  text-align: center;
  padding: 2rem 2rem 3rem;
  background: var(--cream);
  position: relative;
  overflow: hidden;
}

/* ── Swirling dots stage ── */
.landing-dots-stage {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  animation: dots-stage-fade 0.8s ease forwards;
  animation-delay: 2.2s;
}
@keyframes dots-stage-fade {
  from { opacity: 1; }
  to   { opacity: 0; }
}

/* Each dot starts at its random position (--sx, --sy) and flies to center */
.ldot {
  position: absolute;
  border-radius: 50%;
  left: var(--sx);
  top: var(--sy);
  opacity: 0;
  will-change: transform, opacity;
  animation: ldot-swirl 1.4s cubic-bezier(0.4, 0, 0.2, 1) both;
  animation-delay: var(--delay);
}
.ldot-mission {
  width: 52px; height: 52px;
  background: var(--navy);
  box-shadow: 0 3px 14px rgba(45,72,96,0.35);
}
.ldot-km {
  width: 42px; height: 42px;
  background: var(--green);
  box-shadow: 0 3px 12px rgba(74,124,89,0.35);
}
.ldot-vision {
  width: 52px; height: 52px;
  background: var(--navy);
  box-shadow: 0 3px 14px rgba(45,72,96,0.35);
}

@keyframes ldot-swirl {
  0%   { opacity: 0; transform: translate(0,0) scale(0.4) rotate(0deg); }
  30%  { opacity: 1; }
  80%  { opacity: 0.9; transform: translate(calc(50vw - var(--sx) - 26px), calc(44vh - var(--sy))) scale(1.1) rotate(180deg); }
  100% { opacity: 0; transform: translate(calc(50vw - var(--sx) - 26px), calc(44vh - var(--sy))) scale(1) rotate(220deg); }
}

/* Photo dots in demo mode */
.ldot-photo {
  background-size: cover !important;
  background-position: center !important;
  background-color: transparent !important;
  box-shadow: 0 4px 18px rgba(0,0,0,0.22) !important;
  border: 2px solid rgba(255,255,255,0.7);
}

/* ── Landing impact model — appears after dots dissolve ──
   SEQUENCE (do not change delays): dots 0-2.2s → circles 2.3s → cards 3.5s ── */
.landing-im-wrap {
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 3;
  opacity: 0;
  animation: landing-im-appear 0.7s ease forwards;
  animation-delay: 2.3s;
  margin-bottom: 2.5rem;
}
@keyframes landing-im-appear {
  from { opacity: 0; transform: scale(0.88); }
  to   { opacity: 1; transform: scale(1); }
}

.landing-im-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.landing-im-circle {
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-weight: 700;
  box-shadow: 0 3px 12px rgba(45,72,96,0.2);
}
.landing-im-circle-mv {
  width: 44px; height: 44px;
  background: var(--navy);
  color: white;
  font-size: 1.1rem;
}
.landing-im-circle-km {
  width: 44px; height: 44px;
  background: var(--green);
  color: white;
  font-size: 1.1rem;
}
.landing-im-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.5);
}
.landing-im-kms {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.landing-im-connector {
  width: 60px;
  flex-shrink: 0;
  padding-top: 12px;
}
.landing-im-connector svg { width: 100%; height: 14px; }

/* ── Landing impact model SVG-rendered swoop ──
   The .landing-im-wrap-svg variant gets its content from
   _renderLandingSwoop() in app.js, which uses the exact same bezier
   code as the dashboard swoop (_renderProjectImpactSwoop). All seven
   nodes (M, KM1-5, V) and the curve are rendered as a single SVG so
   the geometry is guaranteed identical to the dashboard. ──── */
.landing-im-wrap-svg {
  display: block;
  position: relative;
  width: 100%;
  max-width: 880px;
  aspect-ratio: 1000 / 380;
  margin: -3.5rem auto 0;
}
.landing-swoop-svg {
  width: 100%;
  height: 100%;
  display: block;
}
/* Three-phase landing swoop animation:
   Phase 1 — circle pops in at cluster center
   Phase 2 — line draws (inline transition on the path)
   Phase 3 — circle slides from cluster to its position on the line */
.landing-swoop-circle {
  /* offset-path is set inline per-element to a Q bezier from cluster
     to target. offset-distance animates 0% → 100% to slide the circle
     smoothly along that single curve — no keyframe joints, no
     velocity kinks. Scale + opacity animate separately during the
     gather phase. */
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
  offset-anchor: center;
  offset-rotate: 0deg;
  transform: scale(0.4);
  animation:
    landingSwoopGather 0.45s cubic-bezier(0.22, 0.61, 0.36, 1) forwards,
    landingSwoopTravel 1.1s cubic-bezier(0.32, 0.94, 0.6, 1) forwards;
  animation-delay: var(--enter-delay, 0ms), var(--move-delay, 600ms);
}
@keyframes landingSwoopGather {
  0%   { opacity: 0; transform: scale(0.4); }
  100% { opacity: 1; transform: scale(1); }
}
@keyframes landingSwoopTravel {
  0%   { offset-distance: 0%; }
  100% { offset-distance: 100%; }
}
/* Line opacity baseline; the stroke-dashoffset draw-in is set inline. */
.landing-swoop-line {
  /* opacity controlled inline so the line stays hidden until phase 2 */
}
/* Labels are rendered outside the animated circle groups so the circle
   bboxes stay symmetric and offset-path lands them ON the bezier.
   Labels fade in once the impact model has finished assembling. */
.landing-swoop-label {
  opacity: 0;
  animation: landingSwoopLabelFade 0.5s ease-out forwards;
  animation-delay: 2400ms;
}
@keyframes landingSwoopLabelFade {
  to { opacity: 1; }
}
@media (max-width: 640px) {
  .landing-im-wrap-svg { max-width: 100%; }
}

/* ── Legacy CSS-positioned swoop (kept for any old caches; the
   active rendering path is now .landing-im-wrap-svg above) ──── */
.landing-im-wrap-swoop {
  display: block;
  position: relative;
  width: 100%;
  max-width: 760px;
  aspect-ratio: 700 / 267;
  height: auto;
  margin: 0 auto 2.5rem;
}
.landing-im-swoop-path {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
  overflow: visible;
}
.landing-im-wrap-swoop .landing-im-node {
  position: absolute;
  transform: translateX(-50%);
  z-index: 2;
}
/* Exact same bezier curve as the personal dashboard impact-model swoop
   (rendered by _renderPersonalImpactSwoop / proj-im-swoop-svg), scaled
   proportionally from 1000×380 to 700×200. M low-left, V high-right,
   c1 just above M, c2 just below V — smooth S-climb, no overshoot.
   KM positions: t = 1/6, 2/6, 3/6, 4/6, 5/6. */
.landing-im-wrap-swoop .landing-swoop-mission { left: 5.5%;  top: calc(79% - 22px); }
.landing-im-wrap-swoop .landing-swoop-km1     { left: 20.8%; top: calc(74% - 22px); }
.landing-im-wrap-swoop .landing-swoop-km2     { left: 35.5%; top: calc(63.5% - 22px); }
.landing-im-wrap-swoop .landing-swoop-km3     { left: 50%;   top: calc(50% - 22px); }
.landing-im-wrap-swoop .landing-swoop-km4     { left: 64.6%; top: calc(36.6% - 22px); }
.landing-im-wrap-swoop .landing-swoop-km5     { left: 79.3%; top: calc(26% - 22px); }
.landing-im-wrap-swoop .landing-swoop-vision  { left: 94.6%; top: calc(21% - 22px); }

/* Swoop variant palette: navy M/V, lab-blue dashed curve, green KMs.
   Reveal animation darkens from translucent green into full green for
   every numbered circle. */
.landing-im-wrap-swoop .landing-im-circle-mv {
  background: var(--navy, #2d4860);
  color: white;
}
.landing-im-wrap-swoop .landing-im-circle-km {
  background: var(--green, #8db88a);
  color: white;
}
.landing-im-wrap-swoop .landing-km-reveal .landing-im-circle-km {
  background: rgba(141, 184, 138, 0.25);
  animation-name: kmCircleGreenDarken;
}
@keyframes kmCircleGreenDarken {
  to {
    background: var(--green, #8db88a);
    box-shadow: 0 3px 12px rgba(45,72,96,0.2);
  }
}

/* Mobile: keep the smooth S-climb but shrink the circles. aspect-ratio
   keeps the proportional shape consistent at any viewport width. */
@media (max-width: 640px) {
  .landing-im-wrap-swoop {
    max-width: 100%;
  }
  .landing-im-wrap-swoop .landing-im-circle-mv,
  .landing-im-wrap-swoop .landing-im-circle-km {
    width: 36px; height: 36px;
    font-size: 0.95rem;
  }
  .landing-im-wrap-swoop .landing-swoop-mission { top: calc(79% - 18px); }
  .landing-im-wrap-swoop .landing-swoop-km1     { top: calc(74% - 18px); }
  .landing-im-wrap-swoop .landing-swoop-km2     { top: calc(63.5% - 18px); }
  .landing-im-wrap-swoop .landing-swoop-km3     { top: calc(50% - 18px); }
  .landing-im-wrap-swoop .landing-swoop-km4     { top: calc(36.6% - 18px); }
  .landing-im-wrap-swoop .landing-swoop-km5     { top: calc(26% - 18px); }
  .landing-im-wrap-swoop .landing-swoop-vision  { top: calc(21% - 18px); }
}

/* ── KM reveal animation ── */
.landing-km-reveal .landing-im-circle-km {
  background: rgba(141, 184, 138, 0.25);
  box-shadow: none;
  animation: kmCircleDarken 0.5s ease forwards;
  animation-delay: calc(2.3s + var(--km-delay, 0s));
}
@keyframes kmCircleDarken {
  to {
    background: var(--green);
    box-shadow: 0 3px 12px rgba(45,72,96,0.2);
  }
}
.landing-km-label {
  opacity: 0;
  text-transform: none !important;
  letter-spacing: 0 !important;
  font-size: 0.62rem !important;
  font-weight: 600 !important;
  color: var(--navy) !important;
  text-align: center;
  max-width: 68px;
  line-height: 1.3;
  animation: kmLabelFade 0.5s ease forwards;
  animation-delay: calc(2.3s + var(--km-delay, 0s));
}
@keyframes kmLabelFade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Bottom-left logo lockup ── */
.landing-logo-lockup {
  position: absolute;
  bottom: 0.75rem;
  left: 2rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 5;
  opacity: 0;
  animation: fadeIn 1s ease forwards;
  animation-delay: 2.2s;
}
.landing-lockup-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  object-fit: cover;
}
.landing-lockup-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 1.1rem;
  font-weight: 300;
  color: white;
  letter-spacing: 0.02em;
}
.landing-lockup-text strong {
  font-weight: 700;
  color: white;
}

/* Landing wave — actual brand image */
.landing-wave {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 45%;
  pointer-events: none;
  z-index: 0;
  background: url('/static/wave-bottom.png') no-repeat bottom center;
  background-size: 100% 100%;
}

.hero-logo { display: none; } /* replaced by landing-logo-lockup */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.hero-welcome {
  font-family: 'Montserrat', sans-serif;
  font-size: 2.6rem;
  font-weight: 300;
  color: var(--navy);
  margin-top: -2rem;
  margin-bottom: 0.75rem;
  position: relative;
  z-index: 1;
  letter-spacing: 0.02em;
}
.hero-welcome strong {
  font-weight: 700;
  color: var(--green);
}

.hero-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 500;
  color: var(--blue-dark);
  max-width: 600px;
  margin-bottom: 0.15rem;
  line-height: 1.35;
  position: relative;
  z-index: 1;
}
.hero-subtagline {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.55);
  margin: 0 0 1.25rem;
  position: relative;
  z-index: 1;
}

.hero-buttons { display: flex; gap: 1rem; margin-bottom: 2rem; position: relative; z-index: 1; }

/* Homepage hero: single primary CTA replacing the two path cards */
.hero-cta-row {
  display: flex;
  justify-content: center;
  margin-top: 0.25rem;
  margin-bottom: 1.25rem;
  position: relative;
  z-index: 1;
}
.hero-start-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 1.1rem 2.4rem;
  background: var(--navy, #2d4860);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 1.1rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 8px 26px rgba(45, 72, 96, 0.32);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.hero-start-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 12px 34px rgba(45, 72, 96, 0.4);
  background: #3a5a78;
}

/* ===== Path Choice screen ===== */
#screen-path-choice .container {
  max-width: 980px;
  padding-top: 0.25rem;
  padding-bottom: 2rem;
}
.path-choice-header {
  text-align: center;
  max-width: 700px;
  margin: -90px auto 1.4rem;
  position: relative;
  z-index: 2;
}
.path-choice-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.65rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  margin: 0 0 0.3rem;
  line-height: 1.15;
}
.path-choice-sub {
  font-size: 0.88rem;
  color: var(--muted, #6c7a88);
  line-height: 1.5;
  margin: 0;
}
.path-choice-shared {
  max-width: 740px;
  margin: 0 auto 3rem;
  padding: 1.5rem 1.75rem;
  background: rgba(157, 195, 214, 0.08);
  border: 1px solid rgba(157, 195, 214, 0.4);
  border-radius: 14px;
}
.path-choice-shared-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.6);
  margin-bottom: 0.75rem;
  text-align: center;
}
.path-choice-shared-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.45rem 1.5rem;
}
.path-choice-shared-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--text, #2d4860);
}
.path-choice-shared-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green, #8db88a);
  font-size: 0.9rem;
}
@media (max-width: 680px) {
  .path-choice-shared-list { grid-template-columns: 1fr; }
}

/* Team-only addendum inside the org card */
.path-choice-add {
  margin: 1rem 0 1.25rem;
  padding: 0.85rem 1rem;
  background: rgba(141, 184, 138, 0.08);
  border-left: 3px solid var(--green, #8db88a);
  border-radius: 6px;
}
.path-choice-add-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--green, #8db88a);
  margin-bottom: 0.4rem;
}
.path-choice-add-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.path-choice-add-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.88rem;
  line-height: 1.45;
  color: var(--text, #2d4860);
}
.path-choice-add-list li::before {
  content: '+';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green, #8db88a);
  font-weight: 700;
}

.path-choice-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.5rem;
  margin-bottom: 1rem;
  align-items: stretch;
}
@media (max-width: 820px) {
  .path-choice-grid { grid-template-columns: 1fr; gap: 1.25rem; }
}
.path-choice-column {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.path-choice-card {
  background: white;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 14px;
  padding: 1.1rem 1.2rem 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  box-shadow: 0 4px 14px rgba(45, 72, 96, 0.07);
  transition: transform 0.2s, box-shadow 0.25s, border-color 0.2s;
}

/* Light-touch redesign: header + card + expand-down details */
.path-choice-naked-header {
  text-align: center;
  padding: 0 0.5rem;
  margin-bottom: 0.65rem;
}
.path-choice-naked-header .path-choice-figure { margin-bottom: 0.3rem; }
.path-choice-naked-header .path-choice-figure svg { width: 42px; height: 42px; }
.path-choice-org .path-choice-figure svg { width: 60px; height: 42px; }
.path-choice-naked-header .path-choice-h2 {
  font-size: 1.15rem;
  margin-bottom: 0.35rem;
}
.path-choice-naked-header .path-choice-desc {
  font-size: 0.82rem;
  line-height: 1.45;
}
.path-choice-light-card {
  background: white;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 12px;
  padding: 0.8rem 0.9rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  box-shadow: 0 2px 8px rgba(45, 72, 96, 0.05);
}
.path-choice-light-card .path-choice-tier-toggle {
  margin: 0 0 0.5rem;
}
/* Always-visible features list — replaces the expand/collapse behavior */
.path-choice-always-visible {
  list-style: none;
  padding: 0.65rem 0.4rem 0.25rem;
  margin: 0;
  border-top: 1px dashed rgba(45, 72, 96, 0.12);
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.path-choice-always-visible li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.82rem;
  line-height: 1.45;
  color: var(--text, #2d4860);
}
.path-choice-always-visible li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green, #8db88a);
  font-size: 0.75rem;
}
.path-choice-figure {
  display: flex;
  justify-content: center;
  margin-bottom: 0.45rem;
}

/* What's-included readout — sits BELOW the card */
.path-choice-included {
  background: rgba(157, 195, 214, 0.07);
  border: 1px solid rgba(157, 195, 214, 0.3);
  border-radius: 12px;
  padding: 0.95rem 1.1rem 1rem;
  flex: 1;
}
.path-choice-included-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--blue-dark, #2d4860);
  margin-bottom: 0.55rem;
}
.path-choice-included-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.path-choice-included-list li {
  position: relative;
  padding-left: 1rem;
  font-size: 0.85rem;
  line-height: 1.45;
  color: var(--text, #2d4860);
}
.path-choice-included-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green, #8db88a);
  font-size: 0.78rem;
}

/* Monthly / Annual interval toggle — above the path-choice grid */
.path-choice-interval-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  background: rgba(45, 72, 96, 0.04);
  border-radius: 999px;
  padding: 4px;
  width: fit-content;
  margin: 0 auto 1.5rem;
}
.path-choice-interval-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #2d4860);
  opacity: 0.65;
  cursor: pointer;
  transition: all 0.2s ease;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.path-choice-interval-btn:hover { opacity: 0.9; }
.path-choice-interval-btn.path-choice-interval-active {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(45, 72, 96, 0.12);
  opacity: 1;
}
.path-choice-interval-save {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--green, #8db88a);
  background: rgba(141, 184, 138, 0.12);
  padding: 0.15rem 0.45rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Nonprofit / Business toggle — inside the org card, above tier pill */
.path-choice-orgtype-toggle {
  display: flex;
  justify-content: center;
  gap: 0;
  margin: 0 auto 0.75rem;
  width: fit-content;
  background: rgba(45, 72, 96, 0.03);
  border: 1px dashed rgba(45, 72, 96, 0.18);
  border-radius: 999px;
  padding: 3px;
}
.path-choice-orgtype-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.95rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text, #2d4860);
  opacity: 0.55;
  cursor: pointer;
  transition: all 0.2s ease;
  letter-spacing: 0.04em;
}
.path-choice-orgtype-btn:hover { opacity: 0.85; }
.path-choice-orgtype-btn.path-choice-orgtype-active {
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(45, 72, 96, 0.1);
  opacity: 1;
}

/* Pill-style tier toggle: tight, compact, segmented control feel */
.path-choice-tier-pill {
  background: rgba(45, 72, 96, 0.04);
  border-radius: 999px;
  padding: 4px;
  gap: 0;
  display: flex;
  width: fit-content;
  margin: 0.15rem auto 0.45rem;
}
.path-choice-tier-pill .path-choice-tier-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text, #2d4860);
  cursor: pointer;
  transition: all 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.05rem;
  opacity: 0.65;
}
.path-choice-tier-pill .path-choice-tier-btn:hover {
  opacity: 0.9;
}
.path-choice-tier-pill .path-choice-tier-btn.path-choice-tier-active {
  background: #ffffff;
  box-shadow: 0 1px 4px rgba(45, 72, 96, 0.12);
  opacity: 1;
}
/* Tiny brand-aligned color per side: green for individual, lab-blue for org */
.path-choice-individual .path-choice-tier-pill .path-choice-tier-btn.path-choice-tier-active {
  background: rgba(141, 184, 138, 0.18);
  box-shadow: 0 1px 4px rgba(141, 184, 138, 0.28);
  color: #4a7548;
}
.path-choice-org .path-choice-tier-pill .path-choice-tier-btn.path-choice-tier-active {
  background: rgba(157, 195, 214, 0.22);
  box-shadow: 0 1px 4px rgba(157, 195, 214, 0.35);
  color: #2d4860;
}
/* Price number picks up the same per-side accent */
.path-choice-individual .path-choice-price-amount {
  color: #4a7548;
}
.path-choice-org .path-choice-price-amount {
  color: #2d4860;
}
.path-choice-tier-pill .path-choice-tier-meta {
  font-size: 0.65rem;
  font-weight: 500;
  opacity: 0.6;
  letter-spacing: 0.05em;
}

/* Big animated price display */
.path-choice-price-display {
  text-align: center;
  margin: 0.25rem 0 0.3rem;
  font-family: 'Georgia', 'Times New Roman', serif;
}
/* For-profit pricing aside under the org price — small, subtle, italic.
   Inline swap link sits next to the label and flips the price set. */
.path-choice-price-aside {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.4;
  text-align: center;
  color: rgba(45, 72, 96, 0.55);
  margin: 0 0.4rem 0.55rem;
  display: flex;
  justify-content: center;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.path-choice-aside-label {
  display: inline-block;
}
.path-choice-orgtype-swap {
  background: transparent;
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-style: normal;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--coral, #c47e6c);
  padding: 0.15rem 0.35rem;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.path-choice-orgtype-swap:hover {
  background: rgba(196, 126, 108, 0.1);
  color: var(--coral, #c47e6c);
  text-decoration: underline;
}
.path-choice-price-amount {
  font-size: 2.2rem;
  font-weight: 700;
  color: var(--blue-dark, #2d4860);
  letter-spacing: -0.02em;
  display: inline-block;
  line-height: 1.1;
}
.path-choice-price-period {
  font-size: 1rem;
  color: var(--text, #2d4860);
  opacity: 0.6;
  font-family: 'Montserrat', sans-serif;
  margin-left: 0.15rem;
}
@keyframes pathPriceFlash {
  0% { transform: translateY(-6px); opacity: 0.3; }
  100% { transform: translateY(0); opacity: 1; }
}
.path-choice-price-flash {
  animation: pathPriceFlash 0.32s ease-out;
}

/* Streamlined essence + reveal pattern */
.path-choice-essence {
  font-family: 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.45;
  color: var(--text, #2d4860);
  text-align: center;
  margin: 0.4rem 0.3rem 0.5rem;
  opacity: 0.92;
}

/* At-a-glance preview list — 3 short items visible by default */
.path-choice-glance-list {
  list-style: none;
  padding: 0.35rem 0.6rem 0.1rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.path-choice-glance-list li {
  position: relative;
  padding-left: 0.95rem;
  font-size: 0.8rem;
  line-height: 1.35;
  color: var(--text, #2d4860);
  opacity: 0.85;
}
.path-choice-glance-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green, #8db88a);
  font-size: 0.7rem;
}
.path-choice-org .path-choice-glance-list li::before {
  color: var(--blue-light, #9dc3d6);
}

.path-choice-reveal-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--blue-dark, #2d4860);
  opacity: 0.55;
  padding: 0.25rem 0.6rem 0.35rem;
  display: block;
  margin: 0.2rem auto 0;
  transition: opacity 0.18s ease;
}
.path-choice-reveal-btn:hover {
  opacity: 1;
}
.path-choice-hidden {
  display: none;
}
.path-choice-included-list.path-choice-revealed {
  display: flex;
  padding: 0.65rem 0.5rem 0.4rem;
  border-top: 1px dashed rgba(45, 72, 96, 0.12);
  animation: pathReveal 0.28s ease-out;
}
@keyframes pathReveal {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
/* CTA sits below the included readout, full-width of the column */
.path-choice-column .path-choice-cta {
  width: 100%;
  margin-top: 0;
}
.path-choice-tier-toggle {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  justify-content: center;
  width: 100%;
  margin: 0.4rem 0 0.85rem;
  padding: 0.35rem;
  background: rgba(45, 72, 96, 0.04);
  border-radius: 10px;
}
.path-choice-tier-btn {
  flex: 1 1 0;
  min-width: 70px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.1rem;
  padding: 0.55rem 0.6rem;
  background: white;
  border: 1.5px solid var(--border, #e5e5e5);
  border-radius: 10px;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.path-choice-tier-btn:hover {
  border-color: rgba(45, 72, 96, 0.35);
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(45, 72, 96, 0.08);
}
.path-choice-tier-btn:hover { background: rgba(45, 72, 96, 0.05); }
.path-choice-tier-btn.path-choice-tier-active {
  background: white;
  border-color: var(--green, #8db88a);
  box-shadow: 0 2px 8px rgba(141, 184, 138, 0.18);
}
.path-choice-org .path-choice-tier-btn.path-choice-tier-active {
  border-color: var(--navy, #2d4860);
  box-shadow: 0 2px 8px rgba(45, 72, 96, 0.18);
}
.path-choice-tier-btn .path-choice-tier-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  line-height: 1.1;
}
.path-choice-tier-btn .path-choice-tier-meta {
  font-size: 0.62rem;
  color: var(--muted, #6c7a88);
  letter-spacing: 0.02em;
}
.path-choice-tier-btn .path-choice-tier-price {
  font-size: 0.74rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  margin-top: 0.05rem;
}
.path-choice-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 14px 38px rgba(45, 72, 96, 0.16);
  border-color: rgba(45, 72, 96, 0.25);
}
.path-choice-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.45);
  margin-bottom: 0.85rem;
}
.path-choice-icon {
  margin-bottom: 1rem;
}
.path-choice-h2 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.path-choice-desc {
  font-size: 0.88rem;
  color: var(--text, #2d4860);
  line-height: 1.5;
  margin: 0 0 0.9rem;
}
.path-choice-list {
  list-style: none;
  padding: 0;
  margin: 0 0 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.path-choice-list li {
  position: relative;
  padding-left: 1.4rem;
  font-size: 0.9rem;
  line-height: 1.5;
  color: var(--text, #2d4860);
}
.path-choice-list li::before {
  content: '✦';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--green, #8db88a);
  font-size: 0.9rem;
}
.path-choice-price {
  display: flex;
  align-items: baseline;
  gap: 0.25rem;
  margin-top: auto;
  margin-bottom: 0.4rem;
}
.path-choice-price-amount {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
}
.path-choice-price-period {
  font-size: 1rem;
  color: var(--muted, #6c7a88);
  font-weight: 500;
}
.path-choice-price-note {
  font-size: 0.82rem;
  color: var(--muted, #6c7a88);
  font-style: italic;
  margin: 0 0 1.25rem;
}
.path-choice-tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.6rem;
  margin-top: auto;
  margin-bottom: 0.5rem;
  padding: 0.85rem;
  background: rgba(157, 195, 214, 0.1);
  border-radius: 10px;
}
.path-choice-tier {
  text-align: center;
}
.path-choice-tier-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
}
.path-choice-tier-meta {
  font-size: 0.7rem;
  color: var(--muted, #6c7a88);
  letter-spacing: 0.02em;
  margin-bottom: 0.2rem;
}
.path-choice-tier-price {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
}
.path-choice-tier-period {
  font-size: 0.72rem;
  font-weight: 500;
  color: var(--muted, #6c7a88);
}
.path-choice-cta {
  display: block;
  width: 100%;
  padding: 0.7rem 1.2rem;
  background: var(--navy, #2d4860);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: transform 0.15s, background 0.2s, box-shadow 0.2s;
  box-shadow: 0 3px 12px rgba(45, 72, 96, 0.16);
}
.path-choice-cta:hover {
  transform: translateY(-2px);
  background: #3a5a78;
  box-shadow: 0 8px 24px rgba(45, 72, 96, 0.28);
}
.path-choice-individual .path-choice-cta { background: var(--green, #8db88a); }
.path-choice-individual .path-choice-cta:hover { background: #7ca77a; }
/* CTA stretches across the card so the "Start →" reads as the destination */
.path-choice-cta { width: 100%; }
.path-choice-footer {
  text-align: center;
  font-size: 0.85rem;
  color: var(--muted, #6c7a88);
  margin-top: 0.5rem;
}
.path-choice-footer a {
  color: var(--navy, #2d4860);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
}
.path-choice-footer a:hover { opacity: 0.7; }

/* Landing state fades in after the model lands */
#landing-state-new {
  opacity: 0;
  animation: fadeIn 0.8s ease forwards;
  animation-delay: 3.5s;
  z-index: 3;
}

/* Org Picker */
.org-picker {
  width: 100%;
  max-width: 600px;
  margin-top: 1rem;
  position: relative;
  z-index: 1;
}

.org-picker-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  color: var(--text-light);
  margin-bottom: 1rem;
  font-weight: 400;
}

.org-picker-grid {
  display: grid;
  gap: 0.75rem;
  width: 100%;
}

.landing-state { width: 100%; display: flex; flex-direction: column; align-items: center; position: relative; z-index: 1; }
#landing-state-returning { align-items: stretch; padding: 0; position: relative; }
.landing-state.hidden { display: none; }
.landing-add-btn { margin-top: 1rem; font-size: 0.9rem; }

.org-pick-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.25rem;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  width: 100%;
}

.org-pick-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow);
}

.org-pick-personal {
  border-color: var(--coral-soft);
  background: #fffaf9;
}

.org-pick-personal:hover {
  border-color: var(--coral);
}

/* Personal pick card — hero entry on landing page */
.personal-pick-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
  background: white;
  border: 2px solid var(--coral-soft);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s;
  text-align: left;
  width: 100%;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 20px rgba(232, 168, 152, 0.15);
}

.personal-pick-card:hover {
  border-color: var(--coral);
  transform: translateY(-2px);
  box-shadow: 0 8px 28px rgba(232, 168, 152, 0.25);
}

.personal-pick-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--coral-soft);
}

.personal-pick-initial {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--coral-soft);
  color: var(--coral);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Landing footer — subtle AK attribution */
.landing-footer-credit {
  position: relative;
  z-index: 2;
  text-align: center;
  padding: 1.5rem 0 2rem;
  background: var(--navy);
}

.landing-ak-logo {
  height: 28px;
  width: auto;
  opacity: 0.65;
  transition: opacity 0.2s;
}

.landing-ak-logo:hover {
  opacity: 1;
}

.personal-pick-arrow {
  font-size: 1.3rem;
  color: var(--coral);
  flex-shrink: 0;
  margin-left: auto;
}

.landing-bottom-actions {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  margin-top: 1rem;
  width: 100%;
  max-width: 600px;
}

.landing-personal-btn {
  border-color: var(--coral-soft);
  color: var(--coral);
}

.landing-personal-btn:hover {
  background: var(--coral);
  color: white;
  border-color: var(--coral);
}

/* Profile photo upload widget */
.profile-photo-upload {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.25rem;
}

.profile-photo-preview {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  border: 2px dashed var(--border);
  background: var(--cream);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}

.profile-photo-placeholder {
  font-size: 1.8rem;
  color: var(--border);
  line-height: 1;
}

.profile-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.profile-photo-info {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.profile-photo-info p {
  font-size: 0.82rem;
  color: var(--text-light);
}

/* Photo on org pick cards */
.org-pick-photo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
}

/* Personal dashboard hero */
/* ===== Personal Dashboard Layout ===== */

/* Hero band: photo left, identity right */
.personal-hero-band {
  display: flex;
  align-items: center;
  padding: 2.5rem 3rem 2rem;
  background: linear-gradient(135deg, #f5f9f5 0%, #fdfaf8 50%, #fff5f2 100%);
  border-bottom: 1px solid var(--green-soft);
  gap: 1.75rem;
}

.personal-hero-left {
  flex-shrink: 0;
}

.personal-hero-right {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
}

.personal-hero-wd {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.75rem;
}

.nav-pm-circle {
  background: var(--green) !important;
}
.nav-pm-circle:hover {
  background: var(--navy) !important;
}
/* Three side FABs as a single blue family.
   DD = navy (default .nav-wd-pill), TL = light TL-hero blue (matches the
   Thinking Lab gradient's top stop so the button reads as the Lab itself),
   PM = mid TL-hero blue. Hover states step toward navy. */
/* The three side FABs map identity to color: DD navy (formal digest),
   PM agent-green (where the agent actively helps you), TL light blue
   (matches the Thinking Lab hero). Each keeps its color on hover. */
.nav-pm-pill {
  background: var(--green, #8DB88A) !important;
  color: #fff !important;
  box-shadow: 0 2px 8px rgba(141, 184, 138, 0.4) !important;
}
.nav-pm-pill:hover {
  background: var(--green, #8DB88A) !important;
  color: #fff !important;
}
.nav-tl-pill {
  background: #9dc1d6 !important; /* light TL blue, matches Lab hero top */
  color: #fff !important;
}
.nav-tl-pill:hover {
  background: #9dc1d6 !important;
  color: #fff !important;
}

/* Guide button fixed bottom-left */
.guide-toggle-fixed {
  position: fixed;
  bottom: 1.25rem;
  left: 1.25rem;
  z-index: 200;
  opacity: 0.6;
  font-size: 0.65rem;
  padding: 0.25rem 0.6rem;
}
.guide-toggle-fixed:hover { opacity: 1; }
.guide-mode .guide-toggle-fixed {
  opacity: 1;
}

/* Guide button inside the org-anchor bottom band */
.guide-toggle-band {
  position: static;
  opacity: 0.7;
  font-size: 0.65rem;
  padding: 0.25rem 0.6rem;
  z-index: auto;
}
.guide-toggle-band:hover { opacity: 1; }
.guide-mode .guide-toggle-band { opacity: 1; }

.personal-greeting {
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--green);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.1rem;
}

/* Impact model band — full width, below hero */
.personal-model-band {
  padding: 0.85rem 3rem 1rem;
  background: linear-gradient(to right, #f5f9f5, #fdfaf8);
  border-bottom: 1px solid var(--green-soft);
  position: relative;
}

/* Preview-as-visitor toggle — small chip top-right of the impact band.
   Click to flip the personal screen into a "presenting" mode that hides
   editor affordances. Same DOM, CSS-only visual reframe. */
.personal-preview-toggle {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.4rem 0.85rem;
  background: rgba(255,255,255,0.85);
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--navy, #2d4860);
  cursor: pointer;
  z-index: 5;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.personal-preview-toggle:hover {
  background: #ffffff;
  border-color: rgba(45,72,96,0.4);
  transform: translateY(-1px);
}
.personal-preview-toggle .ppt-icon { font-size: 0.9rem; line-height: 1; }
#screen-personal.presenting .personal-preview-toggle {
  background: var(--navy, #2d4860);
  color: #ffffff;
  border-color: var(--navy, #2d4860);
}

/* Presenting mode — hide editor affordances. Visitors see the content;
   the user sees what visitors see. Edit functions still work if you
   click directly, but the visible "click to edit" cues are removed. */
#screen-personal.presenting .personal-impact-mode-toggle,
#screen-personal.presenting .personal-impact-mode-caption,
#screen-personal.presenting .personal-whiteboard-tools,
#screen-personal.presenting .whiteboard-themes-row,
#screen-personal.presenting .im-evolving-badge,
#screen-personal.presenting .mission-reveal-badge,
#screen-personal.presenting .im-emergence-below,
#screen-personal.presenting .sm-km-ghost {
  display: none !important;
}
#screen-personal.presenting .im-anchor-circle[data-act],
#screen-personal.presenting .kate-tagline[data-act],
#screen-personal.presenting .im-editable {
  cursor: default !important;
  pointer-events: none;
}
#screen-personal.presenting [contenteditable="true"] {
  outline: none !important;
}

/* ===== Quote of the Week ===== */
.quote-band {
  padding: 1.5rem 0 2.5rem;
  text-align: center;
}

.quote-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-style: italic;
  font-weight: 500;
  color: var(--green);
  line-height: 1.7;
  margin: 0 auto 0.6rem;
  max-width: 600px;
  border: none;
  outline: none;
  background: transparent;
  display: block;
}

.quote-attribution {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-light);
  border: none;
  outline: none;
  background: transparent;
  display: block;
}

.quote-editing {
  border-bottom: 1px dashed var(--green-light) !important;
}

.quote-edit-btn {
  margin-top: 0.75rem;
  background: transparent;
  border: 1px solid var(--border);
  color: var(--text-light);
  font-size: 0.68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 0.25rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}

.quote-edit-btn:hover {
  border-color: var(--green);
  color: var(--green);
}

/* Metrics spotlight */
.personal-metrics-spotlight {
  display: flex;
  align-items: stretch;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  background: white;
}

.metric-spotlight-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1.75rem 1.5rem;
  gap: 0.3rem;
  border-right: 1px solid var(--border);
  text-align: center;
}

.metric-spotlight-item:last-child {
  border-right: none;
}

.metric-spotlight-number {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.8rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
  border: none;
  outline: none;
  background: transparent;
  text-align: center;
  width: 100%;
  cursor: text;
}

.metric-spotlight-number::placeholder {
  color: var(--border);
}

.metric-spotlight-number:focus {
  color: var(--green);
}

.metric-spotlight-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--text-light);
  line-height: 1.3;
}

/* Key Moves band */
.personal-km-band {
  padding: 2rem 3rem;
}

.personal-km-header {
  margin-bottom: 1.25rem;
}

.personal-km-sub {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-top: 0.15rem;
  font-style: italic;
}

.personal-km-cards {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.personal-km-card {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  background: white;
  border: 1.5px solid var(--border);
  border-left: 4px solid var(--coral);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  transition: box-shadow 0.2s, transform 0.15s;
  cursor: default;
}

.personal-km-card:hover {
  box-shadow: 0 4px 16px var(--shadow);
  transform: translateX(3px);
}

.personal-km-number {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--coral-soft);
  color: var(--coral);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 0.1rem;
}

.personal-km-body {
  flex: 1;
}

.personal-km-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}

.personal-km-desc {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-top: 0.2rem;
  line-height: 1.5;
}

.personal-km-proof {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
  background: var(--cream);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.2rem 0.7rem;
  flex-shrink: 0;
  align-self: center;
  white-space: nowrap;
}

.personal-km-empty {
  background: var(--cream);
  border: 1.5px dashed var(--border);
  border-radius: var(--radius);
  padding: 2rem;
  text-align: center;
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.6;
}

/* Photo circle (used in hero-right) */
.personal-photo-wrap {
  margin-bottom: 0.5rem;
}

.personal-photo-circle {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  background: var(--green-soft);
  border: 3px solid var(--green);
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

.personal-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.personal-photo-initials {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--green);
}

.personal-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.9rem;
  color: var(--navy);
  line-height: 1.2;
}

.personal-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: #b07060;
  font-style: italic;
  line-height: 1.4;
}

.personal-metrics {
  margin-top: 0.5rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.personal-metric-chip {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.02em;
  color: var(--green);
  background: transparent;
  border: 1px solid rgba(147,184,143,0.5);
  border-radius: 20px;
  padding: 0.2rem 0.7rem;
}

/* Right column: impact model */
.personal-model {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Middle band: story cards */
.personal-stories-band {
  padding: 2rem 2rem;
}

.personal-story-cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-top: 1rem;
  align-items: start;
}
@media (max-width: 900px) {
  .personal-story-cards { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 560px) {
  .personal-story-cards { grid-template-columns: 1fr; gap: 0.75rem; }
  .personal-story-card { max-height: none; }
}

.personal-story-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  padding: 0.85rem 0.95rem 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: box-shadow 0.2s, transform 0.2s;
  min-width: 0;
  max-height: 320px;
  overflow: hidden;
}
.personal-story-card .personal-story-excerpt,
.personal-story-card .personal-story-title,
.personal-story-card .lately-pullquote-text,
.personal-story-card .lately-card-text {
  overflow-wrap: anywhere;
  word-break: break-word;
  hyphens: auto;
}
.personal-story-card .personal-story-title {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.personal-story-card .personal-story-excerpt,
.personal-story-card .lately-card-text {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  flex: 0 0 auto;
}

/* Photo slot at the top of every Lately card — image or placeholder glyph.
   Aspect ratio kept shallow so cards stay compact even when no photo. */
.lately-photo-slot {
  width: 100%;
  aspect-ratio: 2.4 / 1;
  border-radius: 10px;
  overflow: hidden;
  margin-bottom: 0.6rem;
  background: rgba(45, 72, 96, 0.04);
  display: flex;
  align-items: center;
  justify-content: center;
}
.lately-photo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.lately-photo-empty {
  background: linear-gradient(135deg, rgba(135, 169, 148, 0.08), rgba(45, 106, 79, 0.04));
}
.lately-photo-glyph {
  font-size: 28px;
  color: rgba(45, 72, 96, 0.28);
}

/* Pull-quote treatment when there's no photo — turns the slot into a
   literary tile rather than a missing-image placeholder. */
.lately-pullquote {
  position: relative;
  background: #faf5ea;
  padding: 16px 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  overflow: hidden;
}
.lately-pullquote-mark {
  position: absolute;
  top: -8px;
  left: 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 56px;
  font-weight: 700;
  color: rgba(196, 126, 108, 0.28);
  line-height: 1;
  pointer-events: none;
}
.lately-pullquote-text {
  position: relative;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.86rem;
  font-style: italic;
  line-height: 1.35;
  color: rgba(45, 72, 96, 0.85);
  padding-left: 4px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.lately-pullquote.lately-photo-memo,
.lately-pullquote.lately-photo-note { background: #f4eee0; }
.lately-pullquote.lately-photo-idea { background: #faf0eb; }
.lately-pullquote.lately-photo-article { background: #eef2f5; }
.lately-pullquote.lately-photo-document { background: #f0f3f5; }
.lately-pullquote.lately-photo-scrapbook { background: #faf0eb; }

.lately-typology {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.5);
}
.lately-photo-empty.lately-photo-memo,
.lately-photo-empty.lately-photo-note { background: linear-gradient(135deg, rgba(107, 138, 163, 0.10), rgba(45, 72, 96, 0.04)); }
.lately-photo-empty.lately-photo-idea { background: linear-gradient(135deg, rgba(196, 126, 108, 0.10), rgba(196, 126, 108, 0.03)); }
.lately-photo-empty.lately-photo-article { background: linear-gradient(135deg, rgba(123, 154, 178, 0.10), rgba(123, 154, 178, 0.03)); }
.lately-photo-empty.lately-photo-document { background: linear-gradient(135deg, rgba(123, 154, 178, 0.10), rgba(123, 154, 178, 0.04)); }
.lately-photo-empty.lately-photo-scrapbook { background: linear-gradient(135deg, rgba(196, 126, 108, 0.10), rgba(196, 126, 108, 0.04)); }

/* Tighter Lately card internals so 4-up doesn't crowd */
.personal-story-card .lately-card-header {
  gap: 6px;
  margin-bottom: 4px;
  flex-wrap: wrap;
}
.personal-story-card .lately-type-pill {
  font-size: 0.56rem;
  padding: 2px 7px;
}
.personal-story-card .personal-story-org {
  font-size: 0.62rem;
  letter-spacing: 0.09em;
}
.personal-story-card .personal-story-title {
  font-size: 1.08rem;
  margin: 0.15rem 0 0.35rem;
}
.personal-story-card .personal-story-excerpt {
  font-size: 0.88rem;
  line-height: 1.45;
}
.personal-story-card .lately-card-footer {
  margin-top: 0.55rem;
  align-items: center;
  gap: 6px;
}
.personal-story-card .lately-tag-group {
  gap: 4px;
  flex-wrap: wrap;
}
.personal-story-card .lately-tag-btn {
  font-size: 0.6rem;
  padding: 2px 8px;
  letter-spacing: 0.04em;
}
.personal-story-card .lately-tag-btn-pick {
  font-size: 0.6rem;
  padding: 2px 8px;
}
.personal-story-card .personal-story-date {
  font-size: 0.7rem;
  color: rgba(45, 72, 96, 0.55);
}

.personal-story-card.lately-card-story    { border-top: 3px solid #87a994; }
.personal-story-card.lately-card-memo     { border-top: 3px solid #6b8aa3; }
.personal-story-card.lately-card-note     { border-top: 3px solid #6b8aa3; }
.personal-story-card.lately-card-idea     { border-top: 3px solid #c47e6c; }
.personal-story-card.lately-card-article  { border-top: 3px solid #7b9ab2; }
.personal-story-card.lately-card-document { border-top: 3px solid #7b9ab2; }
.personal-story-card.lately-card-scrapbook{ border-top: 3px solid #c47e6c; }

.personal-story-card:hover {
  box-shadow: 0 6px 20px var(--shadow);
  transform: translateY(-2px);
}

.personal-story-org {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--coral);
}

.personal-story-photo-wrap {
  margin: 0.5rem 0 0.25rem;
}

.personal-story-photo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  object-fit: cover;
  object-position: center 25%;
  border: 2px solid var(--border);
  display: block;
}

.personal-story-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  color: var(--navy);
  line-height: 1.3;
}

.personal-story-excerpt {
  font-size: 0.8rem;
  color: var(--text-light);
  line-height: 1.5;
}

.personal-story-date {
  font-size: 0.72rem;
  color: var(--border);
  margin-top: 0.5rem;
}

/* Bottom band: two-column org view — full bleed */
.personal-orgs-band {
  position: relative;
  background: var(--navy);
  padding: 2.5rem 2rem 3rem;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1.5rem;
}
.personal-orgs-two-col {
  display: flex;
  gap: 0;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
}
.personal-orgs-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0 2rem;
  min-height: 160px;
}
.personal-orgs-col:first-child {
  border-right: 1px solid rgba(255,255,255,0.12);
}
.personal-orgs-col-heading {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.5);
  margin: 0 0 1rem 0;
  width: 100%;
  text-align: center;
}
.personal-orgs-add-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.85);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  padding: 0.25rem 0;
  text-align: center;
  transition: color 0.15s;
  margin-top: auto;
}
.personal-orgs-add-btn:hover {
  color: white;
}
.personal-orgs-empty {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.35);
  font-style: italic;
  margin: 0;
}

.personal-orgs-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  margin-bottom: -0.5rem;
}

.personal-orgs-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem;
  width: 100%;
}

.personal-org-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.personal-org-circle:hover {
  transform: translateY(-3px);
}

.personal-org-logo {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  border: 2px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.personal-org-photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.personal-org-initial {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: white;
}

.personal-org-name {
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.8);
  text-align: center;
  max-width: 80px;
  line-height: 1.3;
}

.personal-add-org-btn {
  border-color: rgba(255,255,255,0.3);
  color: rgba(255,255,255,0.8);
  font-size: 0.85rem;
}

.personal-add-org-btn:hover {
  background: rgba(255,255,255,0.1);
  color: white;
  border-color: white;
}

/* Org anchor stories band — bottom of dashboard */
.org-anchor-band {
  background: var(--navy);
  padding: 2.5rem 2rem 4.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.75rem;
}

.org-anchor-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: rgba(255,255,255,0.45);
  margin: 0;
}

.org-anchor-strip {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3rem;
}

.org-anchor-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  transition: transform 0.2s;
}

.org-anchor-item:hover {
  transform: translateY(-3px);
}

.org-anchor-circle {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  border: 2px solid rgba(255,255,255,0.25);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, border-color 0.2s;
}

.org-anchor-circle.has-stories {
  background: rgba(255,255,255,0.18);
  border-color: rgba(255,255,255,0.55);
}

.org-anchor-count {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: white;
  line-height: 1;
}

.org-anchor-count:empty::before {
  content: '+';
  font-size: 1.4rem;
  color: rgba(255,255,255,0.4);
  font-family: inherit;
}

.org-anchor-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-align: center;
}

.org-anchor-hint {
  font-size: 0.68rem;
  color: rgba(255,255,255,0.4);
  text-align: center;
  max-width: 80px;
  line-height: 1.3;
}

/* Editable label — click to rename */
.org-anchor-label[contenteditable="true"] {
  cursor: text;
  border-bottom: 1px dashed rgba(255,255,255,0.2);
  outline: none;
  padding-bottom: 1px;
  transition: border-color 0.15s;
}
.org-anchor-label[contenteditable="true"]:hover,
.org-anchor-label[contenteditable="true"]:focus {
  border-bottom-color: rgba(255,255,255,0.55);
}

/* Remove ✕ — visible on item hover */
.org-anchor-remove {
  font-size: 0.65rem;
  color: rgba(255,255,255,0);
  cursor: pointer;
  transition: color 0.15s;
  line-height: 1;
  margin-top: -2px;
}
.org-anchor-item:hover .org-anchor-remove {
  color: rgba(255,255,255,0.35);
}
.org-anchor-item:hover .org-anchor-remove:hover {
  color: rgba(255,255,255,0.75);
}

/* Add new type circle */
.org-anchor-circle-add {
  background: transparent !important;
  border: 2px dashed rgba(255,255,255,0.25) !important;
}
.org-anchor-add:hover .org-anchor-circle-add {
  border-color: rgba(255,255,255,0.5) !important;
}
.org-anchor-plus {
  font-size: 1.6rem;
  color: rgba(255,255,255,0.35);
  line-height: 1;
  font-weight: 300;
}
.org-anchor-add:hover .org-anchor-plus {
  color: rgba(255,255,255,0.65);
}

/* Footer row: AK logo + LWH circle */
.ak-footer-row {
  display: flex;
  align-items: center;
  gap: 2rem;
  margin-top: 1.5rem;
}

.ak-footer-divider {
  width: 1px;
  height: 36px;
  background: rgba(255,255,255,0.18);
}

.ak-footer-logo {
  display: block;
  opacity: 0.7;
  transition: opacity 0.2s;
}
.ak-footer-logo:hover {
  opacity: 1;
}
.ak-footer-logo img {
  height: 30px;
  width: auto;
  display: block;
}

.lwh-circle-link {
  display: flex;
  align-items: center;
  opacity: 0.7;
  transition: opacity 0.2s;
  text-decoration: none;
  margin-top: -4px;
}
.lwh-circle-link:hover {
  opacity: 1;
}
.lwh-circle-img {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: block;
}
.lwh-circle-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  text-align: center;
}

/* ===== HELP SCREEN ===== */
.help-container {
  padding-top: 2rem;
  padding-bottom: 4rem;
}
.help-title {
  font-size: 2.2rem;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.help-sub {
  font-size: 1rem;
  color: var(--text-light);
  margin-bottom: 2.5rem;
}
.help-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.help-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s, border-color 0.2s;
  background: white;
}
.help-card:hover {
  box-shadow: 0 4px 16px rgba(45,72,96,0.1);
  border-color: rgba(45,72,96,0.25);
}
.help-card-header {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1.25rem 1.25rem 1.25rem;
}
.help-card-eyebrow {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sage);
  display: block;
  margin-bottom: 0.2rem;
}
.help-card-header {
  flex-direction: column;
  align-items: flex-start;
  position: relative;
}
.help-card-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.help-card-chevron {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  font-size: 1.3rem;
  color: var(--text-light);
  font-weight: 300;
  line-height: 1;
}
.help-card-body {
  display: none;
  padding: 0 1.25rem 1.25rem;
  border-top: 1px solid var(--border);
}
.help-card.open .help-card-body {
  display: block;
}
.help-card-body p {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 0.75rem;
}
.help-card-body p:last-child { margin-bottom: 0; }
.help-alison-bio-row {
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}
.help-alison-headshot {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  border: 2px solid var(--border);
}
.help-alison-bio-text {
  flex: 1;
}
.help-alison-bio-text p { margin-bottom: 0.6rem; }

.help-alison-link {
  display: inline-block;
  margin-top: 0.5rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
}
.help-alison-link:hover { text-decoration: underline; }
.help-app-screenshot {
  margin-bottom: 1rem;
  border-radius: 8px;
  overflow: hidden;
  background: var(--bg);
}
.help-screenshot-img {
  width: 100%;
  display: block;
  border-radius: 8px;
}
.help-suggest-confirm {
  font-size: 0.85rem;
  color: var(--sage);
  font-weight: 600;
  margin-top: 0.5rem;
}

/* Help quote band */
.help-quote-band {
  margin-top: 3rem;
  text-align: center;
  padding: 2rem 1rem;
  border-top: 1px solid var(--border);
}
.help-quote-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.5;
  max-width: 600px;
  margin: 0 auto 0.75rem;
}
.help-quote-attr {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-light);
  letter-spacing: 0.05em;
}

/* Help screen footer strip */
.help-footer-strip {
  background: var(--navy);
  padding: 1rem 2rem;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
}
.help-footer-item {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.55);
}
.help-footer-dot {
  color: rgba(255,255,255,0.25);
  font-size: 0.72rem;
}
.help-footer-link {
  font-size: 0.72rem;
  color: rgba(255,255,255,0.7);
  text-decoration: none;
  font-weight: 600;
}
.help-footer-link:hover {
  color: white;
}

/* Circle buttons on landing page */
.demo-switcher {
  display: flex;
  background: rgba(255,255,255,0.15);
  border-radius: 20px;
  padding: 2px;
  gap: 2px;
}
.demo-sw-btn {
  background: transparent;
  border: none;
  border-radius: 18px;
  padding: 0.25rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: background 0.18s, color 0.18s;
}
.demo-sw-btn.active {
  background: rgba(255,255,255,0.25);
  color: #fff;
}
.demo-sw-btn:hover:not(.active) {
  color: #fff;
}
.landing-fab-group {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  gap: 0.5rem;
  z-index: 100;
}
.landing-fab-fixed-right {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  left: auto;
  z-index: 100;
}
.landing-help-link {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: none;
  border: 2px solid var(--navy);
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.landing-help-link:hover {
  background: var(--navy);
  color: white;
}

/* ▶ ? help FABs — solid white circles, fixed bottom-left of viewport.
   HIDDEN by default. body.has-scrolled fades them in once the user
   scrolls past ~200px, so they don't shout at the welcome screen. */
.personal-fab-group {
  position: fixed;
  bottom: 1rem;
  left: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease-out;
}
body.has-scrolled .personal-fab-group {
  opacity: 1;
  pointer-events: auto;
}
.personal-help-btn {
  /* White circles with navy icons so they read against the cream
     content above AND the navy band at the page bottom — the same
     pill works at any scroll position. */
  background: #fff;
  border: 1.5px solid rgba(45,72,96,0.18);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s, transform 0.12s, box-shadow 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(45,72,96,0.22);
}
.personal-help-btn:hover {
  background: #fff;
  border-color: var(--coral, #e8a898);
  color: var(--coral, #c98274);
  transform: translateY(-1px);
}
.personal-help-btn:hover {
  background: rgba(255,255,255,0.28);
  color: white;
  border-color: rgba(255,255,255,0.7);
}

.band-fab-group {
  position: absolute;
  bottom: 3rem; /* raised so circles sit fully on the navy band, clear of any wave underneath */
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.band-fab-left { left: 1.5rem; }

/* Guide toggle variant — coral tinted, matches global guide style */
.suggest-fab-guide-toggle {
  background: rgba(232,168,152,0.15) !important;
  border-color: rgba(232,168,152,0.45) !important;
  color: var(--coral) !important;
}
.suggest-fab-guide-toggle:hover {
  background: rgba(232,168,152,0.28) !important;
  border-color: var(--coral) !important;
  color: var(--coral) !important;
}
.guide-mode .suggest-fab-guide-toggle,
.suggest-fab-guide-toggle.active {
  background: var(--coral) !important;
  border-color: var(--coral) !important;
  color: white !important;
}

/* Play button variant — solid white circle, navy ▶ */
.suggest-fab-play {
  background: white !important;
  color: var(--navy) !important;
  border-color: white !important;
  font-size: 0.95rem !important;
}
.suggest-fab-play:hover {
  background: rgba(255,255,255,0.9) !important;
}

/* Nav ? link */
.nav-help-link {
  font-weight: 700;
  font-size: 1rem;
}

/* Tutorial cards */
.tutorial-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  background: white;
  position: relative;
  transition: box-shadow 0.2s, border-color 0.2s;
  cursor: default;
}
.tutorial-card:not(.tutorial-coming-soon) {
  cursor: pointer;
}
.tutorial-card:not(.tutorial-coming-soon):hover {
  box-shadow: 0 4px 16px rgba(45,72,96,0.1);
  border-color: rgba(45,72,96,0.25);
}
.tutorial-thumb {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  flex-shrink: 0;
  opacity: 0.35;
}
.tutorial-card:not(.tutorial-coming-soon) .tutorial-thumb {
  opacity: 1;
}
.tutorial-info {
  flex: 1;
}
.tutorial-label {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--sage);
  display: block;
  margin-bottom: 0.15rem;
}
.tutorial-title {
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.2rem;
}
.tutorial-desc {
  font-size: 0.8rem;
  color: var(--text-light);
  margin: 0;
  line-height: 1.4;
}
.tutorial-badge {
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(45,72,96,0.35);
  white-space: nowrap;
  align-self: flex-start;
}

/* Floating suggestion button */
.org-anchor-band {
  position: relative;
}

.suggest-fab {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(255,255,255,0.1);
  color: rgba(255,255,255,0.75);
  border: 2px solid rgba(255,255,255,0.25);
  font-size: 1.1rem;
  font-weight: 600;
  cursor: pointer;
  z-index: 10;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.suggest-fab:hover {
  background: rgba(255,255,255,0.2);
  color: white;
  border-color: rgba(255,255,255,0.5);
}

.suggest-panel {
  position: absolute;
  bottom: 5rem;
  left: 1.5rem;
  width: 300px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.25);
  padding: 1.25rem 1.25rem 1rem;
  z-index: 20;
  display: none;
  flex-direction: column;
  gap: 0.75rem;
}
.suggest-panel.open {
  display: flex;
}
.suggest-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.suggest-panel-title {
  font-weight: 700;
  font-size: 0.9rem;
  color: var(--navy);
}
.suggest-panel-close {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
}
.suggest-panel-sub {
  font-size: 0.8rem;
  color: var(--text-light);
  margin: 0;
  line-height: 1.4;
}
.suggest-textarea {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: 0.85rem;
  resize: vertical;
  color: var(--navy);
  box-sizing: border-box;
}
.suggest-textarea:focus {
  outline: none;
  border-color: var(--sage);
}
.suggest-send-btn {
  align-self: flex-end;
  padding: 0.45rem 1.1rem;
  font-size: 0.85rem;
}

/* Coral variants for personal impact model circles */
.im-anchor-coral {
  background: var(--coral) !important;
}
.im-anchor-blue {
  background: #8faabf !important;
  box-shadow: 0 3px 12px rgba(45, 72, 96, 0.2) !important;
}
.im-anchor-green {
  background: #8DB88A !important;
  box-shadow: 0 3px 12px rgba(74, 124, 89, 0.25) !important;
}

.im-km-circle-coral {
  background: var(--coral) !important;
  box-shadow: 0 3px 12px rgba(232, 168, 152, 0.4) !important;
}

.im-km-circle-empty.im-km-circle-coral {
  background: transparent !important;
  border-color: var(--coral) !important;
  color: var(--coral) !important;
  box-shadow: none !important;
}

.personal-impact-rail-wrap {
  background: #fffaf9;
  border: 1px solid var(--coral-soft);
  border-radius: var(--radius);
  padding: 2rem 2rem 1.5rem;
  margin-bottom: 2rem;
  margin-top: 2rem;
}

.org-pick-left {
  flex-shrink: 0;
}

.org-pick-icon {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  background: var(--cream);
  border-radius: 50%;
}

.org-pick-info {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.org-pick-info h3 {
  font-size: 1.05rem;
  margin-bottom: 0;
  color: var(--navy);
}

.org-pick-meta {
  font-size: 0.78rem;
  color: var(--text-light);
}

.org-pick-recent {
  font-size: 0.78rem;
  color: var(--text-light);
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.9rem;
  opacity: 0.7;
}

.org-pick-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-shrink: 0;
}

.org-delete-btn {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  font-size: 1.1rem;
  padding: 0.25rem 0.4rem;
  border-radius: 4px;
  font-family: 'Montserrat', sans-serif;
}

.org-delete-btn:hover { color: #c0392b; background: #fef0ef; }

/* ===== Returning Landing State ===== */
.returning-top-band {
  width: 100%;
  margin-bottom: 2rem;
}
.returning-nav-wrap {
  position: relative;
}
.returning-greeting-wrap {
  text-align: center;
  padding: 2rem 1rem 1rem;
  position: relative;
  z-index: 10;
}
.returning-greeting {
  font-size: 2.8rem;
  color: var(--navy);
  margin: 0 0 0.25rem;
}
.returning-subhead {
  color: var(--text-light);
  font-size: 0.95rem;
  margin: 0;
}
.returning-tagline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: #5a7a42;
  margin: 0 auto 1rem;
  max-width: 480px;
  line-height: 1.5;
}
.returning-content {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
  padding: 0 1.5rem 2rem;
}
/* ===== Welcome-back Impact Model ===== */
.welcome-im-wrap {
  width: 100%;
  max-width: 680px;
  margin: 0 auto 1.75rem;
  padding: 1rem 0 0.5rem;
}

.welcome-im-wrap .impact-model-rail {
  padding: 0;
}

/* Shrink anchor and KM nodes so the wave connectors have room */
.welcome-im-wrap .im-anchor-node {
  width: 72px;
}

.welcome-im-wrap .im-km-node {
  width: 72px;
}

.welcome-im-wrap .im-km-row {
  gap: 0.25rem;
}

/* Slightly faded — illustrative, not a real org's model */
.welcome-im-wrap .im-anchor-circle {
  background: rgba(27, 58, 92, 0.78);
  box-shadow: none;
}

.welcome-im-wrap .im-km-circle {
  background: rgba(147, 184, 143, 0.82);
  box-shadow: none;
}

.welcome-im-wrap .im-anchor-tag,
.welcome-im-wrap .im-km-title-empty {
  opacity: 0.7;
}

.welcome-im {
  width: 100%;
  max-width: 560px;
  margin: 0 auto 1.75rem;
  padding: 0 1.5rem;
}

.wim-rail {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0.5rem;
  position: relative;
}

/* Fading road band — fades to transparent on both sides */
.wim-rail::before {
  content: '';
  position: absolute;
  top: 27px; /* half of 54px circle height */
  left: -8%;
  right: -8%;
  height: 46px;
  transform: translateY(-50%);
  background: linear-gradient(
    to right,
    transparent 0%,
    #d0d0d0 14%,
    #d0d0d0 86%,
    transparent 100%
  );
  border-radius: 23px;
  z-index: 0;
}

/* White dashed center line over the road */
.wim-rail::after {
  content: '';
  position: absolute;
  top: 27px;
  left: 6%;
  right: 6%;
  height: 2px;
  transform: translateY(-50%);
  background: repeating-linear-gradient(
    to right,
    white 0px, white 12px,
    transparent 12px, transparent 22px
  );
  z-index: 1;
  pointer-events: none;
}

.wim-anchor {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.wim-kms {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  justify-content: center;
  flex: 1;
  position: relative;
  z-index: 2;
}

.wim-km-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 2;
}
.returning-personal-slot {
  max-width: 420px;
  width: 100%;
  margin: 0 auto;
}

/* ===== Top Nav with Waves ===== */
.top-nav-wrap {
  position: sticky;
  top: 0;
  z-index: 100;
  pointer-events: none;
  /* Solid backdrop so scrolling content doesn't bleed through the wave
     image (which has transparency at the bottom). Alison: "in projects
     when you scroll down it overlaps on top of the LWH header." */
  background: #FFFDF6;
}
.top-nav-wrap .top-nav,
.top-nav-wrap .top-nav * {
  pointer-events: auto;
}

/* Flipped wave image — show only the colorful half (crop out white) */
.top-nav-wrap::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/static/wave-bottom.png') no-repeat bottom center;
  background-size: 100% 200%;
  transform: scaleY(-1);
  z-index: 0;
  pointer-events: none;
}

.top-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.2rem 2rem;
  background: transparent;
  color: white;
  position: relative;
  z-index: 2;
}

/* Provides height so the wave image extends below the nav */
.wave-top-img {
  height: 18vh;
  pointer-events: none;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  cursor: pointer;
  color: white;
}

.nav-brand-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  object-fit: cover;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
}

.nav-brand-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 300;
  letter-spacing: 0.04em;
  color: white;
  text-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

.nav-brand-text strong {
  font-weight: 700;
}

.nav-links { display: flex; gap: 1.5rem; align-items: center; }
.nav-links a { color: rgba(255,255,255,0.95); font-size: 0.9rem; font-weight: 700; text-shadow: 0 1px 2px rgba(0,0,0,0.1); }
.nav-links a:hover { color: white; }
.nav-link-home { opacity: 0.7; font-weight: 500 !important; font-size: 0.8rem !important; }

/* Bottom wave — bottom half of wave-top.png (darker portion) */
.wave-bottom-img {
  width: 100%;
  height: 150px;
  margin-top: 3rem;
  background: url('/static/wave-top.png') no-repeat bottom center;
  background-size: 100% 200%;
}

/* ===== Onboarding ===== */
/* Onboarding wave — same flipped wave as inner pages */
#screen-onboarding > .wave-top-img {
  height: 22vh;
  position: relative;
  overflow: hidden;
}

#screen-onboarding > .wave-top-img::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: url('/static/wave-bottom.png') no-repeat bottom center;
  background-size: 100% 200%;
  transform: scaleY(-1);
}

.back-link {
  display: inline-block;
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 1rem;
}
.back-link:hover { color: var(--blue); }

.onboarding-header {
  text-align: center;
  padding-top: 0.5rem;
  margin-bottom: 2rem;
}

.progress-bar {
  width: 100%;
  max-width: 400px;
  height: 4px;
  background: var(--border);
  border-radius: 4px;
  margin: 1.5rem auto 0.5rem;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--coral);
  border-radius: 4px;
  transition: width 0.4s ease;
  width: 16.66%;
}

.step-label {
  font-size: 0.85rem;
  color: var(--text-light);
}

/* ── Onboarding record button ─────────────────────────────── */
.ob-record-btn {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: none;
  border: 1.5px solid var(--coral);
  color: var(--coral);
  border-radius: 999px;
  padding: 0.35rem 0.85rem 0.35rem 0.65rem;
  font-size: 0.78rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, transform 0.1s;
  margin: 0.5rem auto 0;
}
.ob-record-btn:hover {
  background: var(--coral);
  color: white;
}
.ob-record-btn-conv {
  border-color: var(--green);
  color: var(--green);
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.45rem 1.2rem;
  letter-spacing: 0.04em;
}
.ob-record-btn-conv:hover {
  background: var(--green);
  color: white;
}
.ob-record-btn svg { flex-shrink: 0; transition: transform 0.2s; }
.ob-record-btn.recording {
  background: var(--coral);
  color: white;
  animation: ob-pulse 1.2s ease-in-out infinite;
}
.ob-record-btn.recording svg {
  animation: ob-mic-bounce 0.6s ease-in-out infinite alternate;
}
@keyframes ob-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,83,63,0.4); }
  50% { box-shadow: 0 0 0 7px rgba(232,83,63,0); }
}
@keyframes ob-mic-bounce {
  from { transform: scale(1); }
  to { transform: scale(1.25); }
}

.onboarding-step { display: none; max-width: 600px; margin: 0 auto; }
.onboarding-step.active { display: block; }

.card-select {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: center;
  margin: 2rem 0;
}

.select-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 1.5rem 2rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: white;
  cursor: pointer;
  transition: all 0.25s ease;
  min-width: 150px;
  font-family: 'Montserrat', sans-serif;
}

.select-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 4px 16px var(--shadow); }
.select-card.selected { border-color: var(--coral); background: #fdf3f2; }

.card-icon { font-size: 2rem; margin-bottom: 0.5rem; }
.card-label { font-size: 1rem; font-weight: 500; color: var(--text); }
.card-sub { font-size: 0.8rem; color: var(--coral); font-weight: 500; margin-top: 0.3rem; }

.step-nav {
  display: flex;
  justify-content: space-between;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* ── New onboarding (story-first) ── */
.onboarding-thinking-dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  margin: 1rem auto 0;
}
.onboarding-thinking-dots span {
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--color-primary, #e8533f);
  animation: dot-pulse 1.4s ease-in-out infinite both;
}
.onboarding-thinking-dots span:nth-child(2) { animation-delay: 0.2s; }
.onboarding-thinking-dots span:nth-child(3) { animation-delay: 0.4s; }
@keyframes dot-pulse {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40%            { transform: scale(1);   opacity: 1; }
}

.onboarding-km-reveal {
  background: #f9f6f2;
  border-left: 3px solid var(--color-primary, #e8533f);
  border-radius: 8px;
  padding: 1.2rem 1.4rem;
  margin: 1.5rem 0 1rem;
}
.onboarding-km-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--color-primary, #e8533f);
  margin-bottom: 0.5rem;
}
.onboarding-km-title-input {
  font-size: 1.15rem;
  font-weight: 600;
  border: none;
  border-bottom: 1px solid #ddd;
  background: transparent;
  width: 100%;
  padding: 0.2rem 0;
  outline: none;
  color: #222;
  font-family: inherit;
}
.onboarding-km-title-input:focus { border-bottom-color: var(--color-primary, #e8533f); }
.onboarding-km-desc {
  font-size: 0.9rem;
  color: #555;
  margin-top: 0.6rem;
  line-height: 1.6;
}
.onboarding-km-desc-input {
  width: 100%;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  outline: none;
  resize: none;
  font-family: inherit;
  padding: 0.2rem 0;
  transition: border-color 0.2s;
}
.onboarding-km-desc-input:focus {
  border-bottom-color: var(--color-primary, #e8533f);
}
.onboarding-mission-hint {
  background: #f0f5f0;
  border-radius: 8px;
  padding: 0.9rem 1.2rem;
  margin-top: 1rem;
}
.onboarding-mission-hint-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #5a8a5a;
  margin-bottom: 0.4rem;
}

.onboarding-type-row {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.onboarding-type-btn {
  border: 1.5px solid #ddd;
  border-radius: 20px;
  padding: 0.4rem 1.1rem;
  font-size: 0.85rem;
  background: #fff;
  cursor: pointer;
  color: #444;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
  font-family: inherit;
}
.onboarding-type-btn:hover { border-color: var(--color-primary, #e8533f); color: var(--color-primary, #e8533f); }
.onboarding-type-btn.selected { background: var(--color-primary, #e8533f); border-color: var(--color-primary, #e8533f); color: #fff; }

/* Step 4 model preview */
.onboarding-model-preview {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  margin: 2rem auto 0;
  max-width: 340px;
}
.onboarding-model-connector {
  width: 2px;
  height: 28px;
  background: linear-gradient(to bottom, rgba(45,72,96,0.15), rgba(45,72,96,0.05));
}
.onboarding-model-kms {
  display: flex;
  gap: 1.2rem;
  justify-content: center;
}
.onboarding-model-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.35rem;
}
.onboarding-node-circle {
  width: 52px; height: 52px;
  border-radius: 50%;
  background: #2D4860;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 600;
}
.onboarding-node-circle-km {
  width: 40px; height: 40px;
  font-size: 0.9rem;
  background: #8DB88A;
}
.onboarding-circle-empty {
  background: transparent;
  border: 2px dashed #ccc;
  color: #ccc;
}
.onboarding-node-km-live .onboarding-node-circle-km {
  box-shadow: 0 0 0 3px rgba(141,184,138,0.3);
}
.onboarding-node-label {
  font-size: 0.72rem;
  color: #777;
  text-align: center;
  max-width: 80px;
  line-height: 1.3;
}

.step-hint {
  font-size: 0.95rem;
  color: var(--text-light);
  margin-bottom: 1rem;
  line-height: 1.55;
}

/* Onboarding step 3 polish — replaces the eight-form-field 'tax form'
   look with grouped sections, parchment-tinted backgrounds, and an
   eyebrow + serif heading. Each section reads as a moment, not a row
   of inputs. */
.onboarding-step3-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--green, #2d6a4f);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.onboarding-step3-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 30px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 4px;
  color: #14332a;
}

/* Onboarding philosophy callout — explains the person-first / story-first
   architecture choice so a new user sees the framing before any decision. */
.onboarding-philosophy-callout {
  display: flex;
  gap: 0.85rem;
  align-items: flex-start;
  background: linear-gradient(135deg, rgba(141,184,138,0.10) 0%, rgba(148,184,208,0.08) 100%);
  border: 1px solid rgba(141,184,138,0.32);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  margin: 1rem 0 1.5rem;
}
.opc-spark {
  color: var(--green, #2d6a4f);
  font-size: 1.15rem;
  flex-shrink: 0;
  line-height: 1.2;
  margin-top: 0.05rem;
}
.opc-body { flex: 1; min-width: 0; }
.opc-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy, #14332a);
  line-height: 1.2;
  margin-bottom: 0.3rem;
}
.opc-text {
  font-size: 0.88rem;
  color: var(--text, #2d4860);
  line-height: 1.55;
}
.onboarding-section {
  background: #fbfaf6;
  border: 1px solid #ece5d2;
  border-radius: 12px;
  padding: 18px 20px 14px;
  margin: 18px 0;
}
.onboarding-section-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #6b7280;
  text-transform: uppercase;
  margin-bottom: 10px;
}
.onboarding-field-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1f2a37;
  margin-bottom: 6px;
}
.onboarding-field-hint {
  font-weight: 400;
  font-size: 12px;
  color: #9ca3af;
  margin-left: 4px;
}
.onboarding-prefilled-note {
  font-size: 12px;
  font-style: italic;
  color: var(--green, #2d6a4f);
  margin: 8px 2px 0;
  line-height: 1.4;
}
.org-back-bar-wrap {
  position: fixed;
  top: 92px;
  left: 16px;
  padding: 0;
  z-index: 85;
}
.org-back-bar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  background: #fff;
  border: 1.5px solid var(--green, #2d6a4f);
  border-radius: 50%;
  color: var(--green, #2d6a4f);
  text-decoration: none;
  font-family: Inter, system-ui, sans-serif;
  box-shadow: 0 2px 8px rgba(45,106,79,0.14);
  transition: background 0.18s ease, color 0.18s ease, transform 0.15s ease;
}
.org-back-bar:hover {
  background: var(--green, #2d6a4f);
  color: #fff;
  transform: translateX(-2px);
}
.org-back-arrow {
  font-size: 18px;
  line-height: 1;
  font-weight: 700;
}
.org-back-text {
  /* Hidden — the circle uses the arrow only. Tooltip on hover via title. */
  position: absolute;
  width: 1px; height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
/* Kill any divider line between the dashboard header and the impact model */
#screen-dashboard .kate-profile-container { border-bottom: none !important; }
#screen-dashboard .dash-metrics-row { border-bottom: none !important; }
#screen-dashboard .dash-snapshot-wrap { border-top: none !important; border-bottom: none !important; }
.onboarding-dual-profile-note {
  margin: 12px 4px 0;
  padding: 12px 14px;
  background: rgba(45, 106, 79, 0.06);
  border-left: 3px solid var(--green, #2d6a4f);
  border-radius: 6px;
  font-size: 13px;
  line-height: 1.5;
  color: #3a4a3f;
}
.story-type-hint {
  margin: 8px 2px 0;
  font-size: 12.5px;
  line-height: 1.55;
  color: #6b7773;
  font-style: italic;
}
.story-type-hint strong {
  font-style: normal;
  font-weight: 600;
  color: #3a4a3f;
}

/* Lately feed — polymorphic cards mixing story / memo / idea / article / etc. */
.lately-card-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-bottom: 0.15rem;
}
.lately-type-pill {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(45, 72, 96, 0.08);
  color: var(--navy, #2D4860);
  text-transform: uppercase;
  white-space: nowrap;
}
.lately-type-story    { background: rgba(45, 106, 79, 0.12); color: #2d6a4f; }
.lately-type-memo     { background: rgba(45, 72, 96, 0.10); color: #2D4860; }
.lately-type-note     { background: rgba(45, 72, 96, 0.10); color: #2D4860; }
.lately-type-idea     { background: rgba(196, 126, 108, 0.14); color: #a35e4b; }
.lately-type-article  { background: rgba(123, 154, 178, 0.16); color: #4a6a82; }
.lately-type-document { background: rgba(123, 154, 178, 0.16); color: #4a6a82; }
.lately-type-scrapbook{ background: rgba(196, 126, 108, 0.14); color: #a35e4b; }

/* No more top stripes — cards stay clean like the old look.
   Subtle left border in the type color is a future-restraint option. */

.lately-card-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.5;
  color: var(--text);
  margin: 0;
}
.lately-card-article-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy, #2D4860);
  margin: 0;
  line-height: 1.25;
}
.lately-card-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: #888;
  letter-spacing: 0.04em;
  margin-top: 0.1rem;
}
.lately-agent-strip {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 18px 14px 16px;
  margin-bottom: 14px;
  background: white;
  border: 1px solid rgba(45, 72, 96, 0.08);
  border-left: 4px solid var(--coral, #c47e6c);
  border-radius: 10px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.18s ease;
}
.lately-agent-strip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(45, 72, 96, 0.06);
}
.lately-agent-spark {
  font-size: 18px;
  color: var(--coral, #c47e6c);
  flex-shrink: 0;
  margin-top: 2px;
}
.lately-agent-text {
  flex: 1;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.45;
  color: #2D4860;
  margin: 0;
}
.lately-agent-arrow {
  flex-shrink: 0;
  color: var(--coral, #c47e6c);
  font-size: 18px;
  align-self: center;
}
.lately-agent-strip.is-loading .lately-agent-text {
  font-style: italic;
  color: #888;
}
.lately-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-top: 8px;
}
.lately-tag-btn {
  background: rgba(196, 126, 108, 0.10);
  border: 1px solid rgba(196, 126, 108, 0.25);
  color: var(--coral, #c47e6c);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 4px 10px;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, color 0.15s ease;
}
.lately-tag-btn:hover {
  background: var(--coral, #c47e6c);
  color: #fff;
}
.km-tag-popover {
  z-index: 9999;
  background: white;
  border: 1.5px solid var(--border, #e5dccb);
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(20, 32, 44, 0.18);
  padding: 8px 0;
  min-width: 240px;
  max-width: 320px;
}
.km-tag-popover-header {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: #888;
  text-transform: uppercase;
  padding: 6px 14px 8px;
  border-bottom: 1px solid rgba(0,0,0,0.05);
  margin-bottom: 4px;
}
.km-tag-popover-row {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  background: transparent;
  border: none;
  text-align: left;
  padding: 9px 14px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--text, #2D4860);
  transition: background 0.12s ease;
}
.km-tag-popover-row:hover {
  background: rgba(45, 106, 79, 0.06);
}
.km-tag-popover-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green, #2d6a4f);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  flex-shrink: 0;
}
.km-tag-popover-title {
  font-weight: 500;
}
.km-evidence-section {
  margin-top: 2rem;
}
.lately-agent-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lately-agent-cta {
  align-self: flex-start;
  background: var(--coral, #c47e6c);
  color: white;
  border: none;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  padding: 7px 18px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.lately-agent-cta:hover {
  background: #a35e4b;
  transform: translateY(-1px);
}
.lately-agent-cta:disabled {
  background: #a8a8a8;
  cursor: default;
  transform: none;
}
.lately-tag-group {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.lately-tag-btn-suggest {
  background: rgba(196, 126, 108, 0.10);
  border: 1px solid rgba(196, 126, 108, 0.25);
  color: var(--coral, #c47e6c);
}
.lately-tag-btn-pick {
  background: transparent;
  border: 1px solid rgba(45, 72, 96, 0.18);
  color: #6b7773;
  font-size: 0.65rem;
  padding: 4px 10px;
}
.lately-tag-btn-pick:hover {
  background: #2D4860;
  color: white;
  border-color: #2D4860;
}
.km-tag-popover-reason {
  font-size: 0.78rem;
  color: #6b7773;
  margin-top: 2px;
  line-height: 1.35;
  font-style: italic;
}
.km-tag-popover-suggest .km-tag-popover-header {
  color: var(--coral, #c47e6c);
}

/* Culture Orient — post-onboarding How-You-Sound session */
.culture-orient-box {
  max-width: 560px;
  padding: 2rem 2.25rem 1.75rem;
}
.culture-orient-progress {
  display: flex;
  gap: 8px;
  margin-bottom: 18px;
}
.culture-orient-dot {
  width: 28px;
  height: 4px;
  border-radius: 2px;
  background: rgba(45, 72, 96, 0.12);
  transition: background 0.2s ease;
}
.culture-orient-dot.done {
  background: rgba(45, 106, 79, 0.45);
}
.culture-orient-dot.active {
  background: var(--coral, #c47e6c);
}
.culture-orient-eyebrow {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--coral, #c47e6c);
  margin-bottom: 0.5rem;
}
.culture-orient-spark {
  font-size: 14px;
}
.culture-orient-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--navy, #2D4860);
  line-height: 1.15;
  margin: 0 0 0.75rem;
}
.culture-orient-prompt {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: #6b7773;
  line-height: 1.5;
  margin: 0 0 1.1rem;
}
.culture-orient-input {
  width: 100%;
  border: 1.5px solid var(--border, #e5dccb);
  border-radius: 10px;
  padding: 12px 14px;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.5;
  resize: vertical;
  background: #fdfbf7;
}
.culture-orient-input:focus {
  outline: none;
  border-color: var(--green, #2d6a4f);
  background: #ffffff;
}
.culture-orient-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 18px;
  gap: 12px;
}
.culture-orient-actions-right {
  display: flex;
  gap: 10px;
}
.culture-orient-skip {
  background: none;
  border: none;
  color: rgba(45, 72, 96, 0.55);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 4px;
}
.culture-orient-skip:hover {
  color: rgba(45, 72, 96, 0.9);
}

/* Culture invite card — appears on dashboard after 3 stories.
   Cream/parchment feel: quieter than the agent observation strip, signals
   a structural setup task rather than an in-the-moment observation. */
.culture-invite-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  margin-top: 24px;
  background: #faf5ea;
  border: 1px solid rgba(196, 126, 108, 0.25);
  border-radius: 14px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.18s ease, background 0.18s ease;
  position: relative;
}
.culture-invite-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(45, 72, 96, 0.06);
  background: #f6efde;
}
.culture-invite-spark {
  font-size: 22px;
  color: var(--coral, #c47e6c);
  flex-shrink: 0;
  margin-top: 2px;
}
.culture-invite-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.culture-invite-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--coral, #c47e6c);
  text-transform: uppercase;
}
.culture-invite-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: var(--navy, #2D4860);
  margin: 0;
}
.culture-invite-cta {
  align-self: flex-start;
  background: var(--coral, #c47e6c);
  color: white;
  border: none;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 7px 18px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
}
.culture-invite-cta:hover {
  background: #a35e4b;
  transform: translateY(-1px);
}
.culture-invite-dismiss {
  background: transparent;
  border: none;
  color: rgba(45, 72, 96, 0.45);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  flex-shrink: 0;
}
.culture-invite-dismiss:hover {
  color: rgba(45, 72, 96, 0.9);
}

/* Community band — the outermost circle on Personal Home.
   Discovery + contribution. Quieter than the agent surfaces. */
.community-band {
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
}
.community-band-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.community-band-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy, #2D4860);
  margin: 0 0 0.4rem;
}
.community-band-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.55);
  margin: 0;
}
.community-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.community-card {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 16px 18px;
  background: #faf5ea;
  border: 1px solid rgba(45, 72, 96, 0.06);
  border-radius: 12px;
  cursor: pointer;
  transition: transform 0.16s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.community-card:hover {
  transform: translateY(-2px);
  background: #f6efde;
  box-shadow: 0 5px 16px rgba(45, 72, 96, 0.06);
}
.community-card-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(45, 106, 79, 0.10);
  color: var(--green, #2d6a4f);
  display: flex;
  align-items: center;
  justify-content: center;
}
.community-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.community-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy, #2D4860);
  margin: 0;
  line-height: 1.2;
}
.community-card-desc {
  font-size: 0.85rem;
  color: rgba(45, 72, 96, 0.65);
  line-height: 1.4;
  margin: 0;
}
.community-card-coming {
  display: inline-block;
  margin-top: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(196, 126, 108, 0.85);
  text-transform: uppercase;
}
@media (max-width: 768px) {
  .community-cards { grid-template-columns: 1fr; }
}

/* Leaders Map — illustrated world, brand-styled dots */
.leaders-map-container {
  max-width: 1180px;
  margin: 0 auto;
  padding: 2rem 2rem 4rem;
}
.leaders-map-hero {
  text-align: center;
  margin-bottom: 1.75rem;
}
.leaders-map-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.3rem;
  font-weight: 700;
  color: var(--navy, #2D4860);
  margin: 0 0 0.55rem;
}
.leaders-map-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.65);
  max-width: 620px;
  margin: 0 auto 0.85rem;
  line-height: 1.5;
}
.leaders-map-tally {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--coral, #c47e6c);
  text-transform: uppercase;
}
.leaders-map-filters {
  display: flex;
  justify-content: center;
  gap: 8px;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.lm-filter-pill {
  background: transparent;
  border: 1.5px solid rgba(45, 72, 96, 0.18);
  color: rgba(45, 72, 96, 0.7);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 7px 18px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}
.lm-filter-pill:hover {
  background: rgba(45, 106, 79, 0.05);
  border-color: rgba(45, 106, 79, 0.35);
  color: var(--green, #2d6a4f);
}
.lm-filter-pill.active {
  background: var(--green, #2d6a4f);
  border-color: var(--green, #2d6a4f);
  color: white;
}
/* Scope pills (US / World) above the type filters */
.leaders-map-scope {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-bottom: 0.75rem;
}
.lm-scope-pill {
  background: transparent;
  border: 1.5px solid rgba(45, 72, 96, 0.15);
  color: rgba(45, 72, 96, 0.6);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 18px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.lm-scope-pill:first-child { border-radius: 999px 0 0 999px; }
.lm-scope-pill:last-child { border-radius: 0 999px 999px 0; margin-left: -1.5px; }
.lm-scope-pill.active {
  background: var(--navy, #2D4860);
  border-color: var(--navy, #2D4860);
  color: white;
}

/* Quiet community row replaces the chunky 3-card band */
.community-row {
  padding: 1.5rem 1rem 2rem;
}
.community-row-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: center;
  gap: 10px 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.98rem;
  color: rgba(45, 72, 96, 0.55);
}
.community-row-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--coral, #c47e6c);
  text-transform: uppercase;
  margin-right: 4px;
}
.community-row-link {
  color: var(--navy, #2D4860);
  font-style: italic;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.16s ease, color 0.16s ease;
}
.community-row-link:hover {
  color: var(--green, #2d6a4f);
  border-bottom-color: rgba(45, 106, 79, 0.4);
}
.community-row-sep {
  color: rgba(45, 72, 96, 0.3);
}

/* Mission / Vision chic chip picker — replaces the giant stacked picker card */
.im-mode-picker-chips {
  display: inline-flex;
  gap: 8px;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.im-mode-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: white;
  border: 1.5px solid rgba(45, 72, 96, 0.12);
  border-radius: 999px;
  padding: 6px 14px 6px 12px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--navy, #2D4860);
  cursor: pointer;
  transition: background 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.12s ease;
}
.im-mode-chip:hover {
  transform: translateY(-1px);
}
.im-mode-chip-type:hover {
  border-color: var(--navy, #2D4860);
  background: var(--navy, #2D4860);
  color: white;
}
.im-mode-chip-auto {
  background: rgba(196, 126, 108, 0.06);
  border-color: rgba(196, 126, 108, 0.30);
  color: var(--coral, #c47e6c);
}
.im-mode-chip-auto:hover {
  background: var(--coral, #c47e6c);
  border-color: var(--coral, #c47e6c);
  color: white;
}
.im-mode-chip-icon {
  font-size: 14px;
  line-height: 1;
}
.leaders-map-stage {
  position: relative;
  background: #fdfaf2;
  border: 1px solid rgba(45, 72, 96, 0.06);
  border-radius: 14px;
  overflow: hidden;
  min-height: 460px;
}
.leaders-map-loading {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: rgba(45, 72, 96, 0.55);
  pointer-events: none;
}
.leaders-map-svg {
  width: 100%;
  height: auto;
  display: block;
}
.leaders-map-popover {
  position: absolute;
  width: 260px;
  background: white;
  border: 1px solid rgba(45, 72, 96, 0.08);
  border-left: 3px solid var(--coral, #c47e6c);
  border-radius: 10px;
  box-shadow: 0 10px 28px rgba(20, 32, 44, 0.16);
  padding: 14px 16px;
  z-index: 10;
  pointer-events: auto;
  font-family: Inter, system-ui, sans-serif;
}
.leaders-map-popover.hidden { display: none; }
.lmp-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--coral, #c47e6c);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.lmp-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy, #2D4860);
  margin-bottom: 6px;
  line-height: 1.2;
}
.lmp-mission {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.92rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.7);
  line-height: 1.4;
  margin-bottom: 8px;
}
.lmp-meta {
  font-size: 0.72rem;
  color: rgba(45, 72, 96, 0.55);
  margin-bottom: 8px;
}
.lmp-link {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--green, #2d6a4f);
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 106, 79, 0.3);
  padding-bottom: 1px;
}
.lmp-link:hover {
  color: white;
  background: var(--green, #2d6a4f);
  border-bottom-color: var(--green, #2d6a4f);
  padding: 2px 6px;
  border-radius: 4px;
}
.leaders-map-footnote {
  margin-top: 1rem;
  text-align: center;
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.5);
}

/* Map dot styling for safety — JS sets fill/stroke but in case CSS overrides */
.lm-dot { transition: transform 0.16s ease; }
.lm-dot:hover { transform: scale(1); }

.story-grid-org {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--coral, #c47e6c);
  text-transform: uppercase;
  margin-bottom: 0.35rem;
}

/* Richer save-confirmation card for capture modals — replaces the
   plain 'Saved. View in Thinking Lab →' line with a card that shows
   what landed and where. */
.capture-saved-confirm {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  background: #faf5ea;
  border: 1px solid rgba(45, 106, 79, 0.20);
  border-left: 3px solid var(--green, #2d6a4f);
  border-radius: 10px;
  padding: 12px 14px;
}
.csc-icon {
  flex-shrink: 0;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--green, #2d6a4f);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.78rem;
  font-weight: 700;
}
.csc-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.csc-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy, #2D4860);
}
.csc-preview {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.9rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.6);
  line-height: 1.4;
}
.csc-link {
  align-self: flex-start;
  margin-top: 4px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--green, #2d6a4f);
  text-decoration: none;
  border-bottom: 1px solid rgba(45, 106, 79, 0.3);
  padding-bottom: 1px;
}
.csc-link:hover {
  color: var(--coral, #c47e6c);
  border-bottom-color: var(--coral, #c47e6c);
}

/* ═══════════════════════════════════════════════════════════════
   HOW AGENT PAGE — anchored conversation space
   Visually distinct from Thinking Lab:
   - Sage-green + soft-blue gradient backdrop (vs. Lab's cream/parchment)
   - Cormorant Garamond hero typography front and center
   - Conversation cards as the front-door affordance (no equivalent in Lab)
   - Persistent input bar (Lab has none)
   - Wave divider as identity marker
   ═══════════════════════════════════════════════════════════════ */
#screen-how-agent {
  background: linear-gradient(180deg, #f0f4f1 0%, #e9eff4 50%, #f4ebd9 100%);
  min-height: 100vh;
}
.ha-page {
  max-width: 980px;
  margin: 0 auto;
  padding: 1.5rem 1.75rem 8rem;
}

/* Hero */
.ha-hero {
  text-align: center;
  margin: 1.5rem 0 1.25rem;
}
.ha-hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 700;
  color: var(--navy, #2D4860);
  margin: 0 0 0.5rem;
  line-height: 1.1;
}
.ha-hero-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.62);
  margin: 0;
}

/* Wave divider */
.ha-wave-divider {
  display: block;
  width: 100%;
  height: 40px;
  margin: 0.75rem auto 2.5rem;
  max-width: 720px;
}

/* First-time welcome card on the How Agent page */
.ha-welcome-card {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: white;
  border: 1px solid rgba(196, 126, 108, 0.22);
  border-left: 3px solid var(--coral, #c47e6c);
  border-radius: 14px;
  padding: 18px 22px;
  margin-bottom: 2rem;
  position: relative;
}
.ha-welcome-spark {
  font-size: 22px;
  color: var(--coral, #c47e6c);
  flex-shrink: 0;
  margin-top: 2px;
}
.ha-welcome-body { flex: 1; }
.ha-welcome-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--coral, #c47e6c);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.ha-welcome-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.55;
  color: var(--navy, #2D4860);
  margin: 0;
}
.ha-welcome-dismiss {
  background: transparent;
  border: none;
  color: rgba(45, 72, 96, 0.4);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  flex-shrink: 0;
}
.ha-welcome-dismiss:hover { color: rgba(45, 72, 96, 0.85); }

/* Section eyebrows */
.ha-section-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--coral, #c47e6c);
  text-transform: uppercase;
  text-align: center;
  margin-bottom: 1.1rem;
}
.ha-past-eyebrow {
  color: rgba(45, 72, 96, 0.55);
  margin-top: 2.5rem;
}

/* Card grid */
.ha-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
@media (max-width: 720px) {
  .ha-card-grid { grid-template-columns: 1fr; }
}
.ha-card {
  background: white;
  border: 1px solid rgba(45, 72, 96, 0.08);
  border-radius: 14px;
  padding: 22px 20px 20px;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  position: relative;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ha-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 28px rgba(20, 32, 44, 0.10);
}
.ha-card::after {
  content: '✦';
  position: absolute;
  top: 14px;
  right: 16px;
  color: rgba(196, 126, 108, 0);
  font-size: 12px;
  transition: color 0.18s ease;
}
.ha-card:hover::after {
  color: rgba(196, 126, 108, 0.7);
}

/* Category accents on the left border */
.ha-card-formation { border-left: 4px solid var(--green, #2d6a4f); }
.ha-card-work      { border-left: 4px solid var(--coral, #c47e6c); }
.ha-card-moment    { border-left: 4px solid #7b9ab2; }
.ha-card-free      { border-left: 4px solid rgba(45, 72, 96, 0.35); }

.ha-card-icon {
  font-size: 22px;
  line-height: 1;
  color: rgba(45, 72, 96, 0.45);
  margin-bottom: 4px;
}
.ha-card-formation .ha-card-icon { color: var(--green, #2d6a4f); }
.ha-card-work .ha-card-icon { color: var(--coral, #c47e6c); }
.ha-card-moment .ha-card-icon { color: #7b9ab2; }

.ha-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy, #2D4860);
  line-height: 1.2;
}
.ha-card-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.96rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.62);
  line-height: 1.45;
}

/* Past conversations */
.ha-past-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 720px) {
  .ha-past-grid { grid-template-columns: 1fr; }
}
.ha-past-card {
  background: rgba(255, 255, 255, 0.65);
  border: 1px solid rgba(45, 72, 96, 0.05);
  border-radius: 10px;
  padding: 12px 14px;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.15s ease;
}
.ha-past-card:hover {
  background: white;
  transform: translateY(-1px);
}
.ha-past-card-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(45, 72, 96, 0.5);
  margin-bottom: 5px;
}
.ha-past-card-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--navy, #2D4860);
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ha-past-empty {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.5);
  text-align: center;
  padding: 1rem 2rem;
  grid-column: 1 / -1;
}

/* Active conversation view */
.ha-conversation-active {
  background: rgba(255, 255, 255, 0.55);
  border: 1px solid rgba(45, 72, 96, 0.06);
  border-radius: 14px;
  padding: 1.25rem 1.5rem 1.5rem;
  min-height: 400px;
  display: flex;
  flex-direction: column;
}
.ha-active-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(45, 72, 96, 0.06);
  margin-bottom: 1rem;
}
.ha-active-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--navy, #2D4860);
}
.ha-active-actions {
  display: flex;
  gap: 8px;
}
.ha-active-action {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  background: transparent;
  border: 1px solid rgba(45, 72, 96, 0.18);
  border-radius: 999px;
  color: var(--navy, #2D4860);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.ha-active-action:hover {
  background: var(--green, #2d6a4f);
  border-color: var(--green, #2d6a4f);
  color: white;
}
.ha-active-close:hover {
  background: rgba(45, 72, 96, 0.85);
  border-color: rgba(45, 72, 96, 0.85);
  color: white;
}

/* Thread bubbles */
.ha-thread {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  overflow-y: auto;
  padding-right: 4px;
}
.ha-turn {
  display: flex;
  width: 100%;
}
.ha-turn-bubble {
  max-width: 78%;
  padding: 12px 16px;
  border-radius: 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--navy, #2D4860);
}
.ha-turn-agent { justify-content: flex-start; }
.ha-turn-agent .ha-turn-bubble {
  background: #faf5ea;
  border: 1px solid rgba(196, 126, 108, 0.18);
  border-bottom-left-radius: 4px;
}
.ha-turn-user { justify-content: flex-end; }
.ha-turn-user .ha-turn-bubble {
  background: rgba(196, 126, 108, 0.10);
  border: 1px solid rgba(196, 126, 108, 0.22);
  border-bottom-right-radius: 4px;
  font-family: Inter, system-ui, sans-serif;
  font-size: 0.96rem;
  font-style: normal;
  color: var(--navy, #2D4860);
}
.ha-turn-spark {
  color: var(--coral, #c47e6c);
  font-weight: 700;
  margin-right: 4px;
}
.ha-turn-thinking .ha-turn-bubble em {
  color: rgba(45, 72, 96, 0.55);
}

/* Persistent input bar */
.ha-input-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: linear-gradient(180deg, rgba(240, 244, 241, 0) 0%, rgba(240, 244, 241, 0.95) 30%, #f4ebd9 100%);
  padding: 1.25rem 1.75rem 1.5rem;
  z-index: 50;
  pointer-events: none;
}
.ha-input-inner {
  max-width: 720px;
  margin: 0 auto;
  display: flex;
  gap: 8px;
  align-items: center;
  background: white;
  border: 1px solid rgba(45, 72, 96, 0.10);
  border-radius: 999px;
  padding: 6px 6px 6px 18px;
  box-shadow: 0 6px 20px rgba(20, 32, 44, 0.08);
  pointer-events: auto;
}
.ha-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 0.98rem;
  color: var(--navy, #2D4860);
  padding: 8px 0;
}
.ha-input::placeholder {
  color: rgba(45, 72, 96, 0.4);
  font-style: italic;
}
.ha-mic-btn, .ha-send-btn {
  background: var(--green, #2d6a4f);
  color: white;
  border: none;
  border-radius: 50%;
  width: 38px;
  height: 38px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.12s ease;
  flex-shrink: 0;
}
.ha-mic-btn { background: rgba(45, 106, 79, 0.10); color: var(--green, #2d6a4f); }
.ha-mic-btn:hover { background: var(--green, #2d6a4f); color: white; }
.ha-send-btn:hover { background: #245440; transform: translateX(1px); }

/* ──────────────────────────────────────────────────────────────
   Notecard grid — Notes filter view in the Thinking Lab
   Composition-notebook lined cards, 2-3 column grid, searchable.
   ────────────────────────────────────────────────────────────── */
.tl-notes-search {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fff;
  border: 1px solid rgba(45, 72, 96, 0.12);
  border-radius: 999px;
  padding: 0.5rem 0.75rem 0.5rem 1rem;
  margin: 0 auto 1.5rem;
  max-width: 520px;
  box-shadow: 0 2px 10px rgba(45, 72, 96, 0.06);
}
.tl-notes-search-icon {
  color: rgba(45, 72, 96, 0.45);
  font-size: 1rem;
}
.tl-notes-search-input {
  flex: 1;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--navy, #2D4860);
  padding: 0.25rem 0;
}
.tl-notes-search-input::placeholder {
  color: rgba(45, 72, 96, 0.4);
  font-style: italic;
}
.tl-notes-search-clear {
  background: rgba(45, 72, 96, 0.06);
  border: none;
  color: rgba(45, 72, 96, 0.55);
  border-radius: 50%;
  width: 24px;
  height: 24px;
  font-size: 0.8rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tl-notes-search-clear:hover {
  background: rgba(45, 72, 96, 0.12);
  color: var(--navy);
}

.tl-notes-week-group {
  margin-bottom: 2.5rem;
}
.tl-notes-week-group .tl-week-header {
  margin-bottom: 1rem;
}

.tl-notecard-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}

.tl-notecard {
  position: relative;
  background: #fffdf6;
  border: 1px solid rgba(45, 72, 96, 0.12);
  border-radius: 10px;
  padding: 1.85rem 1rem 1.1rem;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  /* Composition-notebook horizontal rules — repeating linear gradient */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 1.55rem,
    rgba(108, 149, 179, 0.22) 1.55rem,
    rgba(108, 149, 179, 0.22) calc(1.55rem + 1px)
  );
  background-position: 0 1.85rem;
  background-repeat: repeat-y;
  /* Red "margin" line down the left, classic composition notebook */
  box-shadow:
    inset 2.1rem 0 0 -2rem rgba(196, 126, 108, 0.45),
    0 1px 3px rgba(45, 72, 96, 0.05);
  min-height: 9rem;
}
.tl-notecard:hover {
  transform: translateY(-2px);
  border-color: rgba(108, 149, 179, 0.45);
  box-shadow:
    inset 2.1rem 0 0 -2rem rgba(196, 126, 108, 0.6),
    0 6px 18px rgba(45, 72, 96, 0.1);
}
.tl-notecard-corner {
  position: absolute;
  top: 0.5rem;
  right: 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.45);
}
.tl-notecard-delete {
  position: absolute;
  bottom: 0.4rem;
  right: 0.4rem;
  background: transparent;
  border: none;
  color: rgba(192, 57, 43, 0.4);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  opacity: 0;
}
.tl-notecard:hover .tl-notecard-delete { opacity: 1; }
.tl-notecard-delete:hover {
  background: rgba(192, 57, 43, 0.12);
  color: #c0392b;
}
.tl-notecard-body {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  line-height: 1.55rem; /* matches the composition-rule spacing */
  color: var(--navy, #2D4860);
  padding-left: 0.85rem; /* sit inside the red margin line */
  word-break: break-word;
  /* Up to ~5 lines of content shown; longer notes are truncated client-side */
  display: -webkit-box;
  -webkit-line-clamp: 6;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.tl-notecard-hit {
  background: rgba(196, 126, 108, 0.22);
  color: var(--navy);
  border-radius: 3px;
  padding: 0 2px;
}

/* Note detail modal — edit, add to, delete, or chat with the agent about it */
.note-detail-box {
  max-width: 640px;
  width: 92%;
  padding: 2rem 2rem 1.75rem !important;
  background: #fffdf6;
  /* Composition-notebook lines as a subtle background, like the cards */
  background-image: repeating-linear-gradient(
    to bottom,
    transparent 0,
    transparent 1.7rem,
    rgba(108, 149, 179, 0.18) 1.7rem,
    rgba(108, 149, 179, 0.18) calc(1.7rem + 1px)
  );
}
.note-detail-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(45, 72, 96, 0.55);
  margin-bottom: 0.4rem;
}
.note-detail-date {
  color: rgba(196, 126, 108, 0.78);
}
.note-detail-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 1rem;
}
.note-detail-article-meta {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin: 0 0 0.95rem;
}
.note-detail-article-url {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  color: var(--coral, #c47e6c);
  text-decoration: none;
  word-break: break-all;
}
.note-detail-article-url:hover { text-decoration: underline; }
.note-detail-article-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}

/* Editable taxonomy block in the article detail modal — folder +
   hashtag inputs side by side, save on blur. Inline status pill
   confirms the save. */
.note-detail-taxonomy {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.65rem;
  padding-top: 0.65rem;
  border-top: 1px dashed rgba(45,72,96,0.12);
}
.note-detail-taxonomy-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.note-detail-taxonomy-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.55);
  width: 50px;
  flex-shrink: 0;
}
.note-detail-taxonomy-input {
  flex: 1;
  border: 1px solid rgba(45,72,96,0.14);
  border-radius: 8px;
  padding: 0.4rem 0.65rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--navy);
  background: rgba(255,255,255,0.7);
}
.note-detail-taxonomy-input:focus {
  outline: none;
  border-color: rgba(148,184,208,0.7);
  background: #fff;
}
.note-detail-taxonomy-status {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: rgba(45,72,96,0.5);
  transition: color 0.2s ease;
  min-height: 0.9rem;
  align-self: flex-end;
}
.note-detail-taxonomy-status.saved {
  color: rgba(124,158,124,0.95);
}

.note-detail-text {
  width: 100%;
  border: 1px solid rgba(45, 72, 96, 0.14);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: var(--navy);
  background: rgba(255, 255, 255, 0.6);
  resize: vertical;
  min-height: 4.2rem;
}
.note-detail-text:focus {
  outline: none;
  border-color: rgba(141, 184, 138, 0.6);
  background: #fff;
  box-shadow: 0 0 0 3px rgba(141, 184, 138, 0.12);
}
.note-detail-add-row {
  display: flex;
  gap: 0.5rem;
  margin: 0.75rem 0 1rem;
}
.note-detail-addition {
  flex: 1;
  border: 1px solid rgba(45, 72, 96, 0.14);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  color: var(--navy);
  background: #fff;
}
.note-detail-addition:focus {
  outline: none;
  border-color: rgba(141, 184, 138, 0.6);
  box-shadow: 0 0 0 3px rgba(141, 184, 138, 0.12);
}
.note-detail-addition::placeholder {
  color: rgba(45, 72, 96, 0.42);
  font-style: italic;
}
.note-detail-add-btn {
  background: rgba(141, 184, 138, 0.18);
  border: 1px solid rgba(141, 184, 138, 0.5);
  color: var(--green, #8DB88A);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.note-detail-add-btn:hover {
  background: rgba(141, 184, 138, 0.32);
}
.note-detail-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.note-detail-actions-right {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.note-detail-delete-btn {
  color: #c0392b !important;
  border-color: rgba(192, 57, 43, 0.4) !important;
}
.note-detail-delete-btn:hover {
  background: rgba(192, 57, 43, 0.08) !important;
  border-color: rgba(192, 57, 43, 0.6) !important;
}
.note-detail-status {
  margin-top: 0.75rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(192, 57, 43, 0.85);
  font-style: italic;
}

/* ──────────────────────────────────────────────────────────────
   Connections — integrations hub on My Profile
   ────────────────────────────────────────────────────────────── */
.connections-section {
  padding: 3rem 1.25rem 2rem;
}
.connections-header {
  text-align: center;
  margin: 0 auto 2rem;
  max-width: 640px;
}
.connections-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--green, #8DB88A);
  margin-bottom: 0.55rem;
}
.connections-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.4rem;
  line-height: 1.15;
}
.connections-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.08rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.65);
  margin: 0;
}

.connections-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(290px, 1fr));
  gap: 1.1rem;
  max-width: 1080px;
  margin: 0 auto;
}

.connection-card {
  background: #fff;
  border: 1px solid rgba(45, 72, 96, 0.10);
  border-radius: 14px;
  padding: 1.4rem 1.4rem 1.25rem;
  display: flex;
  gap: 0.95rem;
  align-items: flex-start;
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.12s;
}
.connection-card:hover {
  border-color: rgba(141, 184, 138, 0.5);
  box-shadow: 0 4px 14px rgba(45, 72, 96, 0.08);
}
.connection-card-soon {
  background: #fafaf6;
  border-style: dashed;
  opacity: 0.78;
}
.connection-card-active {
  border-left: 3px solid var(--green, #8DB88A);
}

.connection-card-icon {
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: 10px;
  background: rgba(141, 184, 138, 0.14);
  color: var(--green, #8DB88A);
  display: flex;
  align-items: center;
  justify-content: center;
}
.connection-card-soon .connection-card-icon {
  background: rgba(45, 72, 96, 0.06);
  color: rgba(45, 72, 96, 0.45);
}

.connection-card-body { flex: 1; min-width: 0; }
.connection-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.35rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.connection-card-desc {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.88rem;
  color: rgba(45, 72, 96, 0.72);
  line-height: 1.55;
  margin: 0 0 0.85rem;
}
.connection-card-actions {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  align-items: flex-start;
}
.connection-mini-steps {
  margin: 0.4rem 0 1rem;
  padding-left: 1.2rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.86rem;
  color: rgba(45, 72, 96, 0.75);
  line-height: 1.6;
}
.connection-mini-steps li { margin-bottom: 0.4rem; }
.connection-mini-steps strong { color: var(--navy); font-weight: 600; }

.connection-copy-token-btn {
  display: inline-flex;
  align-items: center;
  background: #fff;
  color: var(--navy) !important;
  border: 1.5px solid rgba(141, 184, 138, 0.6);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.connection-copy-token-btn:hover {
  background: #fafaf6;
  border-color: var(--green, #8DB88A);
}
.connection-copy-token-success {
  background: rgba(141, 184, 138, 0.18) !important;
  border-color: var(--green, #8DB88A) !important;
  color: var(--green, #8DB88A) !important;
}

.connection-easy-btn {
  display: inline-flex;
  align-items: center;
  background: var(--green, #8DB88A);
  color: #fff !important;
  text-decoration: none !important;
  border: 1px solid var(--green, #8DB88A);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.connection-easy-btn:hover {
  background: #7aa776;
  border-color: #7aa776;
  transform: translateY(-1px);
}
.connection-easy-btn-disabled {
  background: rgba(45, 72, 96, 0.18) !important;
  border-color: rgba(45, 72, 96, 0.18) !important;
  cursor: default;
  pointer-events: none;
}
.connection-manual-btn {
  background: transparent;
  border: none;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 0.25rem 0;
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-color: rgba(45, 72, 96, 0.3);
}
.connection-manual-btn:hover { text-decoration-color: var(--navy); }
.connection-card-note {
  font-family: Georgia, serif;
  font-size: 0.78rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.55);
  margin: 0.7rem 0 0;
  line-height: 1.45;
}

/* Inbox address row inside the Email-a-note connection card */
.connection-inbox-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.6rem 0 0.45rem;
  background: #fafaf6;
  border: 1px solid rgba(45, 72, 96, 0.12);
  border-radius: 999px;
  padding: 0.3rem 0.4rem 0.3rem 0.85rem;
}
.connection-inbox-addr {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: var(--navy, #2D4860);
  word-break: break-all;
  user-select: all;
}
.connection-inbox-copy {
  background: var(--navy, #2D4860);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.36rem 0.85rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  flex-shrink: 0;
}
.connection-inbox-copy:hover { background: #1d3247; }

/* Trusted senders list — lets a user add multiple email addresses that
   are allowed to route notes into their LWH account (handles the common
   case of a phone defaulting to Gmail instead of their LWH account email). */
.connection-trusted-senders {
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px solid rgba(45, 72, 96, 0.1);
}
.connection-trusted-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.55);
  margin-bottom: 0.5rem;
}
.connection-trusted-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 0.6rem;
}
.connection-trusted-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.32rem 0.55rem 0.32rem 0.75rem;
  background: #fafaf6;
  border: 1px solid rgba(45, 72, 96, 0.12);
  border-radius: 999px;
}
.connection-trusted-row-primary {
  background: rgba(141, 184, 138, 0.12);
  border-color: rgba(141, 184, 138, 0.4);
}
.connection-trusted-email {
  flex: 1;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.82rem;
  color: var(--navy, #2D4860);
  word-break: break-all;
}
.connection-trusted-label-pill {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green, #8DB88A);
  background: rgba(141, 184, 138, 0.2);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  flex-shrink: 0;
}
.connection-trusted-remove {
  background: transparent;
  border: none;
  color: rgba(192, 57, 43, 0.55);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  font-size: 0.78rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.connection-trusted-remove:hover {
  background: rgba(192, 57, 43, 0.12);
  color: #c0392b;
}
.connection-trusted-empty {
  font-style: italic;
  color: rgba(45, 72, 96, 0.5);
  font-size: 0.82rem;
  margin: 0;
}
.connection-trusted-add-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.connection-trusted-input {
  flex: 1;
  background: #fff;
  border: 1px solid rgba(45, 72, 96, 0.14);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--navy);
}
.connection-trusted-input:focus {
  outline: none;
  border-color: rgba(141, 184, 138, 0.6);
  box-shadow: 0 0 0 3px rgba(141, 184, 138, 0.14);
}
.connection-trusted-add-btn {
  background: var(--navy, #2D4860);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  flex-shrink: 0;
}
.connection-trusted-add-btn:hover { background: #1d3247; }

.connection-soon-tag,
.connection-active-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
}
.connection-soon-tag {
  background: rgba(45, 72, 96, 0.08);
  color: rgba(45, 72, 96, 0.6);
}
.connection-active-tag {
  background: rgba(141, 184, 138, 0.18);
  color: var(--green, #8DB88A);
}

/* ──────────────────────────────────────────────────────────────
   Presentation picker — Weissman-style structure-then-outline modal
   ────────────────────────────────────────────────────────────── */
.presentation-picker-content {
  max-width: 720px !important;
  width: 92%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 2rem !important;
  position: relative;
}
.presentation-picker-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.35rem;
}
.presentation-picker-header h3 {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
}
.presentation-picker-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: rgba(45, 72, 96, 0.7);
  font-size: 1.02rem;
  margin: 0 0 1.25rem;
}
.pp-form { display: flex; flex-direction: column; gap: 0.9rem; }
.pp-label {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.6);
}
.pp-label input,
.pp-label textarea {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  color: var(--navy);
  background: #fafaf6;
  border: 1px solid rgba(45, 72, 96, 0.14);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  resize: vertical;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
}
.pp-label input:focus,
.pp-label textarea:focus {
  outline: none;
  background: #fff;
  border-color: rgba(141, 184, 138, 0.7);
  box-shadow: 0 0 0 3px rgba(141, 184, 138, 0.12);
}
.pp-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 0.4rem;
}
.pp-section-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green, #8DB88A);
  margin: 1.4rem 0 0.6rem;
}
.pp-suggestion-list {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.pp-suggestion {
  background: #fafaf6;
  border: 1px solid rgba(45, 72, 96, 0.14);
  border-left: 3px solid rgba(141, 184, 138, 0.5);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.pp-suggestion:hover {
  background: #fff;
  border-left-color: var(--green, #8DB88A);
}
.pp-suggestion-active {
  background: #fff !important;
  border-color: var(--green, #8DB88A) !important;
  border-left-color: var(--green, #8DB88A) !important;
  box-shadow: 0 2px 12px rgba(141, 184, 138, 0.18);
}
.pp-suggestion-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.08rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.pp-suggestion-reason {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.88rem;
  color: rgba(45, 72, 96, 0.7);
  line-height: 1.45;
}
.pp-outline-pre {
  background: #fafaf6;
  border: 1px solid rgba(45, 72, 96, 0.12);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.94rem;
  line-height: 1.6;
  color: var(--navy);
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 50vh;
  overflow-y: auto;
}
.pp-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: rgba(45, 72, 96, 0.6);
  font-size: 1rem;
  margin-top: 1rem;
}
.pp-loading-spark { color: var(--green, #8DB88A); font-size: 1.2rem; }
.pp-empty {
  font-style: italic;
  color: rgba(45, 72, 96, 0.55);
  font-size: 0.9rem;
}

/* Hero subtitle — entire line in Montserrat caps, letter-spaced, white.
   The whole subtitle reads as the Lab's identity tag: YOUR AGENTIC CORE —
   WHERE EVERY THOUGHT, STORY, AND IDEA COMES TOGETHER TO THINK WITH YOU. */
.tl-hero-sub-mono {
  font-family: 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  letter-spacing: 0.14em !important;
  text-transform: uppercase !important;
  color: #fff !important;
  font-size: 0.84rem !important;
  font-style: normal !important;
  line-height: 1.55 !important;
  max-width: 760px;
  margin: 0 auto !important;
}

/* ──────────────────────────────────────────────────────────────
   Hero filter pills — sit inside the blue Lab hero, centered,
   white pills with delicate Patterns/Saved trailing links.
   ────────────────────────────────────────────────────────────── */

/* When the pills sit INSIDE the capture box (above the input line),
   the row needs less margin and the trailing divider works on a
   different translucent backdrop. */
.tl-filters-inset {
  margin: 0 0 0.85rem;
  padding: 0;
  max-width: none;
  justify-content: center;
}
.tl-filters-inset .tl-filter-trailing {
  border-left-color: rgba(255, 255, 255, 0.35);
}
.tl-capture-zone-slim .tl-filters-inset { margin-bottom: 0.7rem; }
.tl-filters-hero {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  margin: 1.5rem auto 1.25rem;
  padding: 0 1rem 1.5rem;
  max-width: 720px;
}
.tl-filter-hero {
  background: rgba(255, 255, 255, 0.92);
  border: 1px solid rgba(255, 255, 255, 0.55);
  color: var(--navy, #2D4860);
  border-radius: 999px;
  padding: 0.42rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  text-shadow: none;
  box-shadow: 0 2px 8px rgba(45, 72, 96, 0.08);
}
.tl-filter-hero:hover {
  background: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45, 72, 96, 0.14);
}
.tl-filter-hero.tl-filter-active {
  background: var(--navy, #2D4860);
  border-color: var(--navy, #2D4860);
  color: #fff;
}
.tl-filter-trailing {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin-left: 0.35rem;
  padding-left: 0.7rem;
  border-left: 1px solid rgba(255, 255, 255, 0.28);
}
.tl-filter-link {
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.78);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  padding: 0.3rem 0.4rem;
  transition: color 0.15s;
  text-shadow: none;
}
.tl-filter-link:hover { color: #fff; }
.tl-filter-link.tl-filter-active {
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}

/* ──────────────────────────────────────────────────────────────
   How Agent embedded inside the Thinking Lab body
   The Lab keeps its blue hero; the agent sits as an inline card
   that re-uses the FAB popover's blue-gradient + green-accent brand.
   ────────────────────────────────────────────────────────────── */

/* Inline agent card — same brand as .how-convo-card but sized for the
   body of the Lab and not overlay-positioned. */
.tl-agent-card {
  max-width: none !important;
  max-height: none !important;
  margin: 0 0 2rem;
  border-radius: 22px;
}

/* On the dedicated How Chats view the agent card IS the content, so
   give it a touch more presence: cozier framing (slightly smaller width,
   a soft shadow, taller thread area) so it reads as a single focused
   conversation surface rather than just a section. */
.tl-agent-card-howchats {
  max-width: 720px !important;
  margin: 0 auto 2rem !important;
  box-shadow: 0 12px 36px rgba(45, 72, 96, 0.16) !important;
  border-radius: 24px;
}
.tl-agent-card-howchats .how-convo-thread {
  min-height: 240px;
  max-height: 460px;
}
.tl-agent-card .how-convo-header {
  padding: 1.1rem 1.5rem 0.6rem;
}
.tl-agent-card .how-convo-thread {
  min-height: 160px;
  max-height: 360px;
  overflow-y: auto;
  margin: 0 1.25rem;
}

/* Welcome strip inside the agent card */
.tl-agent-welcome {
  margin: 0 1.25rem 1rem;
  background: rgba(255, 255, 255, 0.18);
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-left: 3px solid #c4dbbe;
  border-radius: 14px;
  padding: 14px 18px;
  display: flex;
  gap: 12px;
  position: relative;
  color: #fff;
}
.tl-agent-welcome .ha-welcome-spark {
  color: #c4dbbe;
  font-size: 20px;
  flex-shrink: 0;
}
.tl-agent-welcome .ha-welcome-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.55;
  font-weight: 700;
  color: #fff;
  margin: 0;
}
.tl-agent-welcome .ha-welcome-dismiss {
  position: absolute;
  top: 8px; right: 10px;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, 0.6);
  cursor: pointer;
  font-size: 14px;
}

/* Conversation picker — pill row inside the agent card */
.tl-agent-picker {
  padding: 0.25rem 1.25rem 0.9rem;
}
.tl-agent-picker-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.6);
  margin: 0 0 0.55rem;
}
.tl-agent-pill-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.tl-agent-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.26);
  color: #fff;
  border-radius: 999px;
  padding: 0.34rem 0.85rem 0.34rem 0.7rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  letter-spacing: 0.01em;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
  text-shadow: none;
}
.tl-agent-pill span {
  color: #c4dbbe;
  font-size: 0.9rem;
  line-height: 1;
}
.tl-agent-pill:hover {
  background: rgba(255, 255, 255, 0.26);
  transform: translateY(-1px);
}
.tl-agent-pill-free { font-style: italic; opacity: 0.85; }

/* Suggested-for-you label + pills — slightly emphasized so contextual
   prompts read as "the agent already knows you" before the generic presets */
.tl-agent-picker-label-suggested {
  color: #c4dbbe !important;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.tl-agent-picker-label-suggested .tl-agent-spark {
  color: #c4dbbe;
  font-size: 0.85rem;
}
.tl-agent-picker-label-presets {
  margin-top: 1.1rem;
  color: #fff !important;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
}
.tl-agent-picker-label-presets-center {
  text-align: center;
  color: #c4dbbe !important;
  font-size: 0.74rem;
  letter-spacing: 0.22em;
  margin-top: 1.35rem;
  margin-bottom: 0.7rem;
}
.tl-agent-pill-row-presets-center { justify-content: center; }

/* Above-the-card preamble: HOW AGENT eyebrow + intro on the white background,
   centered in green per Alison 2026-05-24. */
.tl-agent-preamble {
  text-align: center;
  margin: 1rem auto 0.55rem;
  max-width: 720px;
  padding: 0 1.25rem;
}
.tl-agent-preamble-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  letter-spacing: 0.22em;
  color: #7c9e7c;
  text-transform: uppercase;
  margin-bottom: 0.7rem;
}
.tl-agent-preamble-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  line-height: 1.55;
  color: #6c8e6c;
  margin: 0;
  font-weight: 400;
}

/* V2 inline How Agent card: input + mic anchored at the top */
.tl-agent-card-v2 .ha-input-cluster {
  padding: 1.05rem 1.25rem 0.4rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tl-agent-card-v2 .ha-input-cluster .how-convo-type-row { padding: 0; }
.tl-agent-card-v2 .ha-mic-row-top {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  padding: 0;
}
.tl-agent-card-v2 .ha-mic-row-top .how-convo-mic {
  width: 44px; height: 44px; min-width: 44px;
}
.tl-agent-card-v2 .ha-header-mid {
  padding: 0.4rem 1.25rem 0;
  text-align: left;
}
.tl-agent-card-v2 .ha-header-mid .how-convo-eyebrow {
  font-weight: 800;
  letter-spacing: 0.18em;
}
.tl-agent-card-v2 .tl-agent-welcome { margin-top: 0.5rem; }
.tl-agent-pill-row-suggested {
  margin-bottom: 0.4rem;
}
.tl-agent-pill-suggested {
  background: rgba(196, 219, 190, 0.18);
  border-color: rgba(196, 219, 190, 0.55);
}
.tl-agent-pill-suggested:hover {
  background: rgba(196, 219, 190, 0.32);
}
.tl-agent-pill-suggested[disabled] {
  cursor: default;
  opacity: 0.55;
}
.tl-agent-pill-suggested[disabled]:hover {
  transform: none;
  background: rgba(196, 219, 190, 0.18);
}

/* Slim capture zone — used when the type buttons are removed and the
   filter pills above the input do double-duty as the type selector. */
.tl-capture-zone-slim {
  padding-bottom: 0.85rem;
}
.tl-capture-zone-slim .tl-input-row { margin-top: 0; }

/* When a preset conversation is active, the picker is hidden; the thread
   takes its place. The save/end footer becomes visible. */
.tl-agent-card .ha-active-only.hidden { display: none; }
.tl-agent-card .ha-conversation-active { padding: 0 1.25rem 0; }
.tl-agent-card .ha-thread { margin: 0; }

/* Past conversations strip — sits in the Lab body, light styled */
.tl-agent-past {
  margin: 0 0 2rem;
}
.tl-agent-past .ha-past-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.55);
  margin-bottom: 0.7rem;
}
.tl-agent-past .ha-past-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
}
.tl-agent-past .ha-past-card {
  background: #fff;
  border: 1px solid rgba(45, 72, 96, 0.10);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.1s;
}
.tl-agent-past .ha-past-card:hover {
  border-color: rgba(45, 106, 79, 0.45);
  transform: translateY(-1px);
}
.tl-agent-past .ha-past-card-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.3rem;
}
.tl-agent-past .ha-past-card-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.4;
}
.tl-agent-past .ha-past-empty {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--text-muted);
  margin: 0;
}

/* Distilled conversation entries in the Thinking Lab — major thoughts up top,
   transcript collapsed in a details element below. */
.tl-convo-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--coral, #c47e6c);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.tl-convo-summary {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.65);
  line-height: 1.45;
  margin: 0 0 0.85rem;
}
.tl-convo-thoughts {
  list-style: none;
  padding: 0;
  margin: 0 0 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tl-convo-thought {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.08rem;
  line-height: 1.45;
  color: var(--navy, #2D4860);
  padding: 10px 14px 10px 16px;
  background: #faf5ea;
  border-left: 3px solid var(--coral, #c47e6c);
  border-radius: 0 8px 8px 0;
  position: relative;
}
.tl-convo-thought::before {
  content: '✦';
  color: rgba(196, 126, 108, 0.4);
  font-size: 0.7rem;
  position: absolute;
  left: 6px;
  top: 12px;
}
.tl-convo-transcript {
  margin-top: 0.5rem;
  border-top: 1px solid rgba(45, 72, 96, 0.06);
  padding-top: 0.6rem;
}
.tl-convo-transcript-toggle {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(45, 72, 96, 0.55);
  cursor: pointer;
  list-style: none;
  display: inline-block;
  padding: 4px 0;
  transition: color 0.15s ease;
}
.tl-convo-transcript-toggle::-webkit-details-marker { display: none; }
.tl-convo-transcript-toggle:hover { color: var(--green, #2d6a4f); }
details[open] .tl-convo-transcript-toggle { color: var(--green, #2d6a4f); }
.tl-convo-transcript-body {
  white-space: pre-wrap;
  font-family: Georgia, serif;
  font-size: 0.88rem;
  line-height: 1.65;
  color: rgba(45, 72, 96, 0.75);
  background: rgba(45, 72, 96, 0.03);
  padding: 14px 16px;
  border-radius: 8px;
  margin-top: 8px;
  max-height: 400px;
  overflow-y: auto;
}

/* Data-sprinkle agent suggestions on the capture form */
.ds-agent-row {
  display: flex;
  gap: 8px;
  margin-top: 8px;
  flex-wrap: wrap;
}

/* Memo capture: 'Upload handwriting' image button + status */
.memo-image-row {
  margin-top: 8px;
  display: flex;
  gap: 8px;
}
.memo-image-btn {
  display: inline-flex;
  align-items: center;
  background: rgba(45, 106, 79, 0.06);
  border: 1px dashed rgba(45, 106, 79, 0.30);
  color: var(--green, #2d6a4f);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 8px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.memo-image-btn:hover {
  background: var(--green, #2d6a4f);
  border-style: solid;
  border-color: var(--green, #2d6a4f);
  color: white;
}
.memo-image-status {
  margin-top: 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.92rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.65);
  padding: 4px 2px;
}
.memo-image-preview {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  background: #faf5ea;
  border: 1px solid rgba(45, 72, 96, 0.08);
  border-left: 3px solid var(--green, #2d6a4f);
  border-radius: 10px;
  padding: 12px 14px;
}
.memo-image-preview img {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 8px;
  flex-shrink: 0;
  background: white;
  border: 1px solid rgba(45, 72, 96, 0.08);
}
.memo-image-preview-actions {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.memo-image-preview-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.98rem;
  font-style: italic;
  color: var(--navy, #2D4860);
  line-height: 1.45;
}
.memo-image-preview-btns {
  display: flex;
  align-items: center;
  gap: 8px;
}
.memo-transcribe-btn {
  background: var(--green, #2d6a4f);
  color: white;
  border: none;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  padding: 7px 18px;
  cursor: pointer;
  transition: background 0.14s ease;
}
.memo-transcribe-btn:hover { background: #245440; }
.memo-transcribe-btn:disabled { background: #a8a8a8; cursor: default; }
.memo-image-cancel {
  background: transparent;
  border: none;
  color: rgba(45, 72, 96, 0.5);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  cursor: pointer;
  padding: 6px 8px;
}
.memo-image-cancel:hover { color: rgba(45, 72, 96, 0.85); }

.memo-shortcut-link {
  background: transparent;
  border: none;
  margin-top: 8px;
  padding: 4px 0;
  color: rgba(45, 72, 96, 0.55);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  cursor: pointer;
  text-align: left;
  display: inline-block;
}
.memo-shortcut-link:hover {
  color: var(--green, #2d6a4f);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Apple Shortcut setup modal */
.shortcut-setup-box {
  max-width: 640px;
}
.shortcut-steps {
  list-style: decimal;
  padding-left: 1.5rem;
  margin: 1rem 0 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.shortcut-steps > li {
  font-family: Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.55;
  color: var(--navy, #2D4860);
}
.shortcut-step-title {
  margin-bottom: 6px;
}
.shortcut-copy-row {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 6px 0 4px;
  padding: 0;
}
.shortcut-copy-row-stack {
  flex-direction: column;
  align-items: stretch;
  gap: 6px;
}
.shortcut-code {
  flex: 1;
  background: #faf5ea;
  border: 1px solid rgba(45, 72, 96, 0.08);
  border-radius: 6px;
  padding: 8px 12px;
  font-family: 'SF Mono', Menlo, Consolas, monospace;
  font-size: 0.78rem;
  color: var(--navy, #2D4860);
  word-break: break-all;
  white-space: pre-wrap;
}
.shortcut-code-block {
  font-size: 0.78rem;
  line-height: 1.5;
  margin: 0;
}
.shortcut-copy-btn {
  background: var(--green, #2d6a4f);
  color: white;
  border: none;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.14s ease;
}
.shortcut-copy-btn:hover {
  background: #245440;
}
.shortcut-copy-btn:disabled {
  background: #a8a8a8;
  cursor: default;
}
.shortcut-hint {
  font-family: Georgia, serif;
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.55);
  margin: 6px 0 0;
  line-height: 1.4;
}

/* Key/Value rows for Shortcut headers + body (iOS Shortcuts uses two
   columns — Key and Value — so each field gets its own copy button) */
.shortcut-kv {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin: 0.6rem 0 0;
  border-left: 2px solid rgba(45, 72, 96, 0.12);
  padding-left: 0.85rem;
}
.shortcut-kv-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.shortcut-kv-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.55);
  min-width: 100px;
  flex-shrink: 0;
}
.shortcut-kv-row .shortcut-code { flex: 1; min-width: 0; }
.shortcut-kv-row-note { align-items: flex-start; }
.shortcut-kv-value-note {
  font-family: Georgia, serif;
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.7);
  line-height: 1.5;
  flex: 1;
}
.shortcut-kv-value-note strong {
  font-style: normal;
  color: var(--navy);
}
.shortcut-note {
  background: rgba(196, 126, 108, 0.08);
  border-left: 3px solid var(--coral, #c47e6c);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  font-family: Georgia, serif;
  font-size: 0.85rem;
  line-height: 1.5;
  color: rgba(45, 72, 96, 0.75);
}
.ds-agent-btn {
  background: rgba(45, 106, 79, 0.08);
  border: 1px solid rgba(45, 106, 79, 0.25);
  color: var(--green, #2d6a4f);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 6px 14px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.16s ease, color 0.16s ease;
}
.ds-agent-btn:hover {
  background: var(--green, #2d6a4f);
  color: white;
}
.ds-agent-btn-research {
  background: rgba(123, 154, 178, 0.10);
  border-color: rgba(123, 154, 178, 0.35);
  color: #4a6a82;
}
.ds-agent-btn-research:hover {
  background: #4a6a82;
  color: white;
}
.ds-suggestions {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 12px;
}
.ds-suggestions-loading,
.ds-suggestions-empty {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.55);
  padding: 8px 4px;
}
.ds-sugg {
  background: #faf5ea;
  border: 1px solid rgba(45, 72, 96, 0.08);
  border-left: 3px solid var(--coral, #c47e6c);
  border-radius: 10px;
  padding: 12px 14px;
}
.ds-sugg-pull { border-left-color: var(--green, #2d6a4f); background: rgba(45, 106, 79, 0.05); }
.ds-sugg-research { border-left-color: #4a6a82; background: rgba(123, 154, 178, 0.06); }
.ds-sugg-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--coral, #c47e6c);
  margin-bottom: 6px;
}
.ds-sugg-pull .ds-sugg-eyebrow { color: var(--green, #2d6a4f); }
.ds-sugg-research .ds-sugg-eyebrow { color: #4a6a82; }
.ds-sugg-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  line-height: 1.45;
  color: var(--navy, #2D4860);
  margin: 0 0 6px;
}
.ds-sugg-source {
  font-size: 0.75rem;
  color: rgba(45, 72, 96, 0.6);
  font-style: italic;
  margin: 0 0 8px;
}
.ds-sugg-source-link {
  color: #4a6a82;
  text-decoration: none;
  border-bottom: 1px solid rgba(74, 106, 130, 0.35);
  font-style: normal;
  font-weight: 600;
}
.ds-sugg-source-link:hover {
  color: #2D4860;
  border-bottom-color: #2D4860;
}
.ds-sugg-verified {
  display: inline-block;
  margin-left: 6px;
  background: rgba(45, 106, 79, 0.12);
  color: var(--green, #2d6a4f);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-style: normal;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 2px 8px;
  border-radius: 999px;
  text-transform: uppercase;
}
.ds-sugg-add {
  background: transparent;
  border: 1.5px solid rgba(45, 72, 96, 0.18);
  color: var(--navy, #2D4860);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 5px 12px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.ds-sugg-add:hover {
  background: var(--navy, #2D4860);
  color: white;
}
.ds-sugg-auto {
  animation: ds-sugg-fade-in 0.5s ease-out;
}
@keyframes ds-sugg-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.ds-sugg-auto-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 2px;
}
.ds-sugg-dismiss {
  background: transparent;
  border: none;
  color: rgba(45, 72, 96, 0.5);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  padding: 5px 8px;
}
.ds-sugg-dismiss:hover {
  color: rgba(45, 72, 96, 0.85);
}

/* Data-sprinkle chips in the story drawer — the small facts that make a
   story land at scale.  Navy-tinted, sit just below the quotes. */
.story-drawer-datasprinkles {
  margin: 1rem 0 0.25rem;
  padding-top: 0.75rem;
  border-top: 1px solid rgba(45,72,96,0.06);
}
.sdds-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(45,72,96,0.5);
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
.sdds-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.sdds-chip {
  display: inline-block;
  background: rgba(45,72,96,0.06);
  color: var(--navy, #2D4860);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 600;
  padding: 4px 12px;
  border-radius: 999px;
  letter-spacing: 0.005em;
}

/* Story-card pulse after save — shows the user where their story now lives */
.story-card-pulse {
  animation: story-card-pulse-anim 2.4s ease-out;
  outline: 2px solid var(--coral, #c47e6c);
  outline-offset: 2px;
  border-radius: var(--radius, 10px);
}
@keyframes story-card-pulse-anim {
  0% {
    box-shadow: 0 0 0 0 rgba(196, 126, 108, 0.55);
    transform: scale(1);
  }
  20% {
    box-shadow: 0 0 0 12px rgba(196, 126, 108, 0);
    transform: scale(1.012);
  }
  60% {
    box-shadow: 0 0 0 0 rgba(196, 126, 108, 0);
    transform: scale(1);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(196, 126, 108, 0);
  }
}
.onboarding-field-input {
  width: 100%;
  border: 1px solid #d4cab2;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'Georgia', serif;
  font-size: 14.5px;
  line-height: 1.5;
  background: #fff;
  color: #1f2a37;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.onboarding-field-input:focus {
  outline: none;
  border-color: var(--green, #2d6a4f);
  box-shadow: 0 0 0 3px rgba(45,106,79,0.10);
}
.onboarding-field-input::placeholder {
  color: #b8b8b8;
  font-style: italic;
}
.onboarding-location-row {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}
.onboarding-location-row .onboarding-field-input {
  width: auto;
}

/* Onboarding typing zone — visually framed container so it's obvious
   THIS is where you write. Replaces the bare-textarea pattern that
   left first-time users unsure if the page was loaded. */
.onboarding-typing-zone {
  background: #fbfaf6;
  border: 1px solid #e6dcc4;
  border-radius: 12px;
  padding: 14px 16px 12px;
  margin: 16px 0;
  position: relative;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.onboarding-typing-zone:focus-within {
  border-color: var(--green, #2d6a4f);
  box-shadow: 0 0 0 3px rgba(45,106,79,0.10);
}
.onboarding-typing-zone-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green, #2d6a4f);
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.onboarding-typing-zone-icon {
  font-size: 12px;
  line-height: 1;
}
.onboarding-typing-zone textarea {
  width: 100%;
  border: 0;
  background: transparent;
  font-family: 'Georgia', serif;
  font-size: 15px;
  line-height: 1.55;
  color: #1f2a37;
  resize: vertical;
  outline: none;
  padding: 0;
}
.onboarding-typing-zone textarea::placeholder {
  color: #9ca3af;
  font-style: italic;
}

/* Three prompt chips — concrete examples so the user knows what counts. */
.onboarding-prompt-chips {
  margin: 14px 0 4px;
}
.onboarding-prompt-chips-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin-bottom: 8px;
}
.onboarding-prompt-chips-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}
.onboarding-prompt-chip {
  text-align: left;
  background: #fff;
  border: 1px solid var(--border, #e6dcc4);
  border-radius: 10px;
  padding: 10px 12px;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 3px;
  transition: border-color 0.15s ease, transform 0.15s ease, box-shadow 0.15s ease;
}
.onboarding-prompt-chip:hover {
  border-color: var(--green, #2d6a4f);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45,72,96,0.08);
}
.opc-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 17px;
  font-weight: 600;
  color: #1f2a37;
}
.opc-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #6b7280;
  line-height: 1.4;
}

/* ===== Forms ===== */
.form-group {
  margin-bottom: 1.25rem;
}

.form-group label {
  display: block;
  font-size: 0.9rem;
  font-weight: 500;
  margin-bottom: 0.4rem;
  color: var(--blue-dark);
}

.label-with-tip {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}

.label-with-tip label {
  margin-bottom: 0;
}

.tip-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.1rem;
  height: 1.1rem;
  border-radius: 50%;
  border: 1.5px solid var(--blue);
  background: transparent;
  color: var(--blue-dark);
  font-size: 0.65rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.2s, color 0.2s;
}

.tip-toggle:hover {
  background: var(--blue);
  color: white;
}

.field-tip {
  display: none;
  font-size: 0.82rem;
  color: var(--text-light);
  background: var(--blue-light);
  border-left: 3px solid var(--blue);
  border-radius: 0 var(--radius) var(--radius) 0;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}

.field-tip.visible {
  display: block;
}

.form-group input,
.form-group textarea,
.form-group select {
  width: 100%;
  padding: 0.7rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  background: white;
  transition: border-color 0.2s;
  color: var(--text);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(141, 175, 200, 0.18);
}

.form-actions {
  display: flex;
  gap: 1rem;
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
}

/* Tags */
.tag-input-group {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.tag-input-group input { flex: 1; }

.tags-display {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.35rem 0.8rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: 20px;
  font-size: 0.85rem;
  color: var(--blue);
}

.tag .remove {
  cursor: pointer;
  color: var(--text-light);
  font-size: 1.1rem;
  line-height: 1;
}
.tag .remove:hover { color: #c0392b; }

/* Key Moves list (onboarding) */
.key-moves-list {
  margin-bottom: 1rem;
}

.km-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.8rem 1rem;
  background: white;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  margin-bottom: 0.5rem;
}

.km-item-title { font-weight: 500; }
.km-item-desc { font-size: 0.85rem; color: var(--text-light); }

/* Checkbox group */
.checkbox-group {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.checkbox-group label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 400;
  font-size: 0.95rem;
  cursor: pointer;
}

.checkbox-group input[type="checkbox"] {
  width: auto;
  accent-color: var(--coral);
}

/* Photo preview */
.photo-preview {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-top: 0.75rem;
}

.photo-thumb-wrap {
  position: relative;
}

.media-type-badge {
  position: absolute;
  bottom: 6px;
  left: 6px;
  background: rgba(0,0,0,0.6);
  color: white;
  font-size: 0.7rem;
  padding: 1px 5px;
  border-radius: 3px;
  pointer-events: none;
}

.photo-thumb {
  width: 100px;
  height: 100px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.photo-remove {
  position: absolute;
  top: -6px;
  right: -6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #c0392b;
  color: white;
  border: none;
  font-size: 14px;
  line-height: 22px;
  text-align: center;
  cursor: pointer;
}

/* ===== Dashboard ===== */

/* Org identity band */
.dash-identity-band {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 2.5rem 2rem 2rem;
  background: linear-gradient(135deg, #f5f9f5 0%, #fdfaf8 100%);
  border-bottom: 1px solid var(--green-soft);
  text-align: center;
}
.dash-identity-left { /* kept for compat */ }
.dash-identity-right { width: 100%; display: flex; flex-direction: column; align-items: center; }

.dash-org-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem;
  color: var(--navy);
  margin-bottom: 1rem;
  outline: none;
  border-bottom: 2px solid transparent;
  transition: border-color 0.15s;
  cursor: text;
}
.dash-org-name:hover,
.dash-org-name:focus {
  border-bottom-color: rgba(147,184,143,0.5);
}
.dash-org-mission:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-style: italic;
}
.dash-org-mission {
  outline: none;
  cursor: text;
}

/* Stats strip */
.dash-stat-strip {
  display: flex;
  align-items: stretch;
  background: var(--navy);
  overflow: hidden;
}
.dash-stat-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 1rem 0.75rem;
  border-right: 1px solid rgba(255,255,255,0.08);
  gap: 0.2rem;
}
.dash-stat-item:last-child { border-right: none; }
.dash-stat-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  color: white;
  line-height: 1;
}
.dash-stat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
}

.dash-logo-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
}

.dash-logo-circle {
  width: 90px;
  height: 90px;
  border-radius: 50%;
  background: white;
  border: 2px solid var(--green-soft);
  box-shadow: 0 2px 12px var(--shadow);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s;
}

.dash-logo-circle:hover {
  box-shadow: 0 4px 20px var(--shadow);
}

.dash-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dash-logo-initial {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--green);
}

.dash-logo-upload-hint {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
  opacity: 0.7;
  transition: opacity 0.15s;
}

.dash-logo-upload-hint:hover {
  opacity: 1;
}

.dash-org-mission {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: #b07060;
  max-width: 520px;
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.dash-metrics-row {
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

.dash-metric-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}

.dash-metric-number {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--navy);
  border: none;
  outline: none;
  background: transparent;
  text-align: center;
  width: 100px;
  line-height: 1;
  cursor: text;
}

.dash-metric-number::placeholder { color: var(--border); }
.dash-metric-number:focus { color: var(--green); }

.dash-metric-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-light);
}

.dashboard-header {
  text-align: center;
  padding: 2.5rem 0 1rem;
}

.stats-bar {
  display: flex;
  justify-content: center;
  gap: 3rem;
  padding: 1.5rem;
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 2px 12px var(--shadow);
  margin-bottom: 2rem;
}

.stat { text-align: center; }
.stat-num {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 700;
  color: #2D4A5E;
}
.stat-label {
  font-size: 0.8rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* ===== Story Highlight ===== */
.story-highlight-wrap {
  padding: 0 2rem 1.5rem;
  max-width: 860px;
  margin: 0 auto;
  width: 100%;
  box-sizing: border-box;
}
.story-highlight-card {
  background: var(--navy);
  border-radius: 18px;
  padding: 1.75rem 2rem 1.5rem;
  color: white;
  position: relative;
}
.story-highlight-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.75rem;
}
.story-highlight-reflection {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 600;
  color: white;
  line-height: 1.5;
  margin-bottom: 0.85rem;
}
.story-highlight-excerpt {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin-bottom: 1rem;
}
.story-highlight-footer {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.story-highlight-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
}
.story-highlight-km {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: var(--green);
  background: rgba(141,184,138,0.15);
  border-radius: 20px;
  padding: 0.15rem 0.6rem;
}
.story-highlight-refresh {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(255,255,255,0.2);
  color: rgba(255,255,255,0.5);
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 0.9rem;
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-highlight-refresh:hover {
  color: white;
  border-color: rgba(255,255,255,0.5);
}

.dashboard-actions {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.section-title {
  margin-bottom: 1.5rem;
  padding-bottom: 0.5rem;
  border-bottom: 2px solid var(--coral);
  display: inline-block;
}

.key-moves-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
}

.km-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.5rem;
  box-shadow: 0 2px 12px var(--shadow);
  border-left: 4px solid var(--coral);
  transition: transform 0.2s, box-shadow 0.2s;
}

.km-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow);
}

.km-card h3 { margin-bottom: 0.4rem; }
.km-card p { font-size: 0.9rem; color: var(--text-light); margin-bottom: 0.8rem; }

.km-story-count {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--coral);
}

/* ===== Impact Model Framework Visual ===== */
.impact-model-wrap {
  background: #FAF8F2;
  border-top: 1px solid rgba(45, 72, 96, 0.08);
  border-bottom: 1px solid rgba(45, 72, 96, 0.08);
  padding: 2rem 4vw 160px;
  margin-bottom: 2rem;
  box-shadow: 0 2px 24px var(--shadow);
  position: relative;
  overflow: hidden;
  width: 100%;
}

/* Brand wave at the bottom of the impact model section */
.impact-model-wrap::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 140px;
  background: url('/static/wave-bottom.png') no-repeat bottom center;
  background-size: 100% 100%;
  pointer-events: none;
  opacity: 1;
}

.dash-public-toggle {
  position: absolute;
  right: 1.5rem;
  bottom: 1rem;
  z-index: 5;
  background: rgba(255,255,255,0.92);
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  box-shadow: 0 2px 8px rgba(45,72,96,0.12);
  backdrop-filter: blur(4px);
}

.impact-model-eyebrow {
  text-align: center;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green, #5C8A57);
  opacity: 0.85;
  margin-bottom: 1.75rem;
}

.impact-model-subtagline {
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.15rem;
  color: rgba(45, 72, 96, 0.7);
  margin: 0.35rem auto 1.1rem;
  letter-spacing: 0.01em;
}

/* Per-tab subtitle that swaps with Stories/Patterns/Data selection.
   Smaller + dimmer than the brand subtagline above, so it reads as
   contextual description rather than a competing tagline. */
.impact-map-tab-sub {
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(45, 72, 96, 0.55);
  max-width: 640px;
  margin: 0 auto 0.9rem;
  padding: 0 1rem;
  line-height: 1.5;
}

/* Lens row — small, left-anchored Stories/Patterns/Data buttons that
   sit BELOW the IM/BP/WB toggle. Quiet by design; the impact map is
   the hero. Dots/Numbers/Re-settle viz controls live on the right
   end of the same row when meaningful (Stories + IM mode). */
.impact-lens-row {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  max-width: 1100px;
  margin: 0.5rem auto 0.4rem;
  padding: 0 1.5rem;
}
.impact-lens-row .im-view-tab {
  background: transparent;
  border: none;
  padding: 0.35rem 0.7rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  color: rgba(45, 72, 96, 0.5);
  cursor: pointer;
  border-radius: 999px;
  transition: all 0.18s ease;
}
.impact-lens-row .im-view-tab:hover { color: rgba(45, 72, 96, 0.85); }
.impact-lens-row .im-view-tab.im-view-tab-active {
  color: var(--navy, #2d4860);
  font-weight: 600;
  background: rgba(45, 72, 96, 0.06);
}
.impact-lens-viz {
  margin-left: auto;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

/* Re-center the impact-model band content (no left rail anymore) so
   the map gets the full width and lives large. */
#impact-map-panel-stories,
#impact-map-panel-patterns,
#impact-map-panel-data {
  max-width: 1100px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* "Play with your model →" CTA row — surfaces below the map on the
   calm home view as the one and only affordance to enter Play mode. */
.impact-play-cta-row {
  display: flex;
  justify-content: center;
  margin: 1rem auto 0.5rem;
  max-width: 1100px;
}
.impact-play-cta {
  background: transparent;
  border: 1px solid rgba(45, 72, 96, 0.18);
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(45, 72, 96, 0.75);
  cursor: pointer;
  transition: all 0.18s ease;
}
.impact-play-cta:hover {
  background: rgba(45, 72, 96, 0.06);
  color: var(--navy, #2d4860);
  border-color: rgba(45, 72, 96, 0.4);
  transform: translateY(-1px);
}

/* Play-mode controls — Stories/Patterns/Data + viz row + tab subtitle.
   Hidden on the home view; surfaced when the band has .play-mode. */
.impact-controls-below {
  display: none;
  max-width: 1100px;
  margin: 1.25rem auto 0;
  padding: 1.25rem 1.5rem 0.5rem;
  border-top: 1px solid rgba(45, 72, 96, 0.08);
}
.personal-model-band.play-mode .impact-controls-below { display: block; }
.personal-model-band.play-mode .impact-play-cta-row { display: none; }

/* Full-screen Play mode. The band expands to cover the viewport so
   the user can play with the map and lenses without other dashboard
   chrome competing for attention. */
.personal-model-band.play-mode {
  position: fixed !important;
  inset: 0 !important;
  z-index: 950 !important;
  background: #FFFDF6 !important;
  overflow-y: auto !important;
  margin: 0 !important;
  padding: 2rem 1.5rem 3rem !important;
  animation: playModeFadeIn 0.25s ease both;
}
@keyframes playModeFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.impact-play-close {
  display: none;
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: rgba(45, 72, 96, 0.08);
  border: none;
  font-size: 1.2rem;
  line-height: 1;
  color: var(--navy, #2d4860);
  cursor: pointer;
  z-index: 10;
  transition: background 0.15s ease, transform 0.12s ease;
}
.impact-play-close:hover {
  background: rgba(45, 72, 96, 0.18);
  transform: rotate(90deg);
}
.personal-model-band.play-mode .impact-play-close { display: flex; align-items: center; justify-content: center; }
/* In play mode, hide the preview-as-visitor chip and let the play
   close button own the top-right corner of the band. */
.personal-model-band.play-mode .personal-preview-toggle { display: none; }

.impact-model-rail {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  position: relative;
  z-index: 1;
  max-width: 900px;
  margin: 0 auto;
}

/* Mission / Vision anchor nodes */
.im-anchor-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
  width: 130px;
}


.im-anchor-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  box-shadow: 0 3px 12px rgba(45, 72, 96, 0.3);
}

.im-anchor-tag {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.5);
  margin-bottom: 0.4rem;
}

.im-anchor-text {
  font-size: 0.76rem;
  color: var(--navy);
  text-align: center;
  line-height: 1.45;
  font-style: italic;
  opacity: 0.75;
}

/* Connecting lines */
.im-connector {
  flex: 1;
  display: flex;
  align-items: center;
  padding-top: 27px;
}

.im-wave {
  width: 100%;
  height: 12px;
  display: block;
}

/* Key Move nodes row */
.im-km-row {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex: 0 0 auto;
}

.im-km-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 120px;
  position: relative;
}

.im-km-circle {
  width: 54px;
  height: 54px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.6rem;
  box-shadow: 0 3px 12px rgba(147, 184, 143, 0.4);
  transition: transform 0.2s, box-shadow 0.2s;
  cursor: default;
}
/* "+ Add a Key Move" circle — always available at the end of the rail */
.im-km-circle-add {
  background: transparent;
  border: 2px dashed rgba(147, 184, 143, 0.5);
  color: rgba(147, 184, 143, 0.9);
  box-shadow: none;
  font-size: 1.5rem;
  line-height: 1;
}
.im-km-add-another:hover .im-km-circle-add {
  background: rgba(147, 184, 143, 0.1);
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 3px 12px rgba(147, 184, 143, 0.25);
}

/* Tiny + appears only when all default Key Move slots are filled */
.im-km-add-tiny {
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.18s ease;
}
.im-km-add-tiny:hover {
  opacity: 1;
}
.im-km-circle-add-tiny {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: transparent;
  border: 1.5px dashed rgba(45, 72, 96, 0.3);
  color: rgba(45, 72, 96, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  line-height: 1;
  box-shadow: none;
}
.im-km-add-tiny:hover .im-km-circle-add-tiny {
  border-color: var(--green, #2d6a4f);
  color: var(--green, #2d6a4f);
}

.im-km-node:hover .im-km-circle {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(147, 184, 143, 0.5);
}

.im-km-title {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--navy);
  text-align: center;
  line-height: 1.3;
  margin-bottom: 0.3rem;
}

.im-km-desc {
  font-size: 0.68rem;
  color: rgba(45, 72, 96, 0.6);
  text-align: center;
  line-height: 1.35;
  margin-bottom: 0.4rem;
  display: none;
}

.im-km-node:hover .im-km-desc {
  display: block;
}

.im-km-node:hover .im-km-count {
  display: none;
}

/* KM scale tooltip — shows top metric on hover */
.im-km-node[data-scale]::after {
  content: attr(data-scale);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: var(--navy);
  color: #fff;
  font-size: 0.67rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
  padding: 4px 9px;
  border-radius: 20px;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s;
  z-index: 10;
}
.im-km-node[data-scale]:hover::after {
  opacity: 1;
}

/* ===== Core Impact Statement — below the rail ===== */
.im-emergence-below {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 520px;
  margin: 2rem auto 0;
  padding: 1.25rem 2rem;
  border: 1.5px dashed var(--green-light);
  border-radius: 14px;
  background: linear-gradient(135deg, #f5f9f5, #fdfcfa);
  position: relative;
  z-index: 1;
  transition: box-shadow 0.3s;
}
.im-emergence-below:hover {
  box-shadow: 0 0 22px rgba(141, 184, 138, 0.25);
}
.im-emergence-below .im-emergence-statement {
  font-size: 1.05rem;
  max-width: 440px;
}

/* ===== Core Impact Statement — Emergence Node (inline/personal) ===== */
.im-emergence-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 200px;
  flex-shrink: 0;
  padding: 0.75rem 1rem;
  border: 1.5px dashed var(--green-light);
  border-radius: 12px;
  background: linear-gradient(135deg, #f5f9f5, #fdfcfa);
  position: relative;
  transition: box-shadow 0.3s;
}

.im-emergence-node:hover {
  box-shadow: 0 0 18px rgba(141, 184, 138, 0.25);
}

.im-emergence-icon {
  font-size: 1.2rem;
  color: var(--green);
  margin-bottom: 0.4rem;
  opacity: 0.7;
  animation: emergence-pulse 3s ease-in-out infinite;
}

@keyframes emergence-pulse {
  0%, 100% { opacity: 0.5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.15); }
}

.im-emergence-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.9rem;
  font-style: italic;
  color: var(--text-light);
  line-height: 1.4;
  margin-bottom: 0.4rem;
}

.im-emergence-hint {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--green);
  letter-spacing: 0.03em;
  opacity: 0.8;
}

/* State 2: Ready to reveal */
.im-emergence-ready {
  border-color: var(--green);
  background: linear-gradient(135deg, #edf7ed, #fdfcfa);
  cursor: default;
}
.im-emergence-reveal-btn {
  margin-top: 0.5rem;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
  transition: background 0.15s;
}
.im-emergence-reveal-btn:hover { background: var(--navy); }

/* State 3: Claimed */
.im-emergence-claimed {
  border-style: solid;
  border-color: var(--green);
  background: linear-gradient(135deg, #edf7ed, #fdfcfa);
  max-width: 240px;
}
.im-emergence-statement {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.5;
  margin-bottom: 0.5rem;
  text-align: center;
}
.im-emergence-cis-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.6);
  text-align: center;
  margin-top: 0.35rem;
  margin-bottom: 0.55rem;
  cursor: help;
  border-bottom: 1px dotted rgba(45, 72, 96, 0.3);
  display: inline-block;
  padding-bottom: 1px;
  align-self: center;
}
.im-emergence-cis-label:hover { color: rgba(45, 72, 96, 0.9); }
@keyframes emergence-reveal {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
.im-emergence-animate {
  animation: emergence-reveal 0.8s ease forwards;
}

/* Reveal / question state */
.im-emergence-reveal { max-width: 240px; }
.im-emergence-question {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-style: italic;
}
.im-emergence-actions {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  justify-content: center;
}
.im-emergence-claim-btn {
  background: var(--green);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.3rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
}
.im-emergence-claim-btn:hover { background: var(--navy); }
.im-emergence-refine-btn {
  background: transparent;
  color: var(--navy);
  border: 1px solid var(--navy);
  border-radius: 20px;
  padding: 0.3rem 0.85rem;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: var(--font);
  cursor: pointer;
}
.im-emergence-skip-btn {
  background: transparent;
  color: var(--text-muted);
  border: none;
  font-size: 0.72rem;
  font-family: var(--font);
  cursor: pointer;
  padding: 0.3rem 0.5rem;
}
.im-emergence-edit {
  width: 100%;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  color: var(--navy);
  border: 1px solid var(--green-light);
  border-radius: 8px;
  padding: 0.5rem;
  resize: vertical;
  margin-bottom: 0.5rem;
  line-height: 1.5;
}
.im-emergence-edit:focus { outline: none; border-color: var(--green); }

.im-km-placeholder {
  cursor: pointer;
  opacity: 0.35;
  transition: opacity 0.2s;
}

.im-km-placeholder:hover {
  opacity: 0.65;
}

.im-km-circle-empty {
  background: transparent !important;
  border: 2px dashed var(--green);
  color: var(--green) !important;
  box-shadow: none !important;
}

.im-km-title-empty {
  color: var(--text-light);
  font-style: italic;
  font-weight: 400;
}

/* Still-forming Key Move slot */
.im-km-forming {
  opacity: 0.45;
  cursor: default;
  pointer-events: none;
}

.im-km-circle-forming {
  background: transparent !important;
  border: 1.5px dashed rgba(141, 184, 138, 0.55);
  color: rgba(141, 184, 138, 0.7) !important;
  box-shadow: none !important;
}
.im-km-circle-forming-coral {
  border-color: rgba(232, 168, 152, 0.7) !important;
  color: rgba(232, 168, 152, 0.95) !important;
}

.im-km-forming-label {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 0.4rem;
  font-style: italic;
}

.im-km-forming-hint {
  font-size: 0.68rem;
  color: #bbb;
  margin-top: 0.15rem;
  font-style: italic;
  line-height: 1.4;
  text-align: center;
}

.im-km-count {
  font-size: 0.68rem;
  color: #5a8a56;
  font-weight: 500;
  text-align: center;
}
.im-km-count-personal {
  color: var(--green);
  font-weight: 600;
}

/* Metrics strip — embedded at the bottom of the framework visual */
.im-metrics-strip {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0 2.5rem;
  border-top: 1px solid rgba(45, 72, 96, 0.1);
  margin-top: 2rem;
  padding: 1.25rem 0 2.5rem;
  position: relative;
  z-index: 1;
}

.im-metric {
  text-align: center;
}

.im-metric-num {
  display: block;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}

.im-metric-label {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.5);
  margin-top: 0.2rem;
}

/* ===== Recent Stories Grid ===== */
.recent-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1.25rem;
  margin-bottom: 3rem;
}

.story-preview-card {
  background: white;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: 0 2px 12px var(--shadow);
  border-top: 3px solid var(--green);
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
  display: flex;
  flex-direction: column;
}

.story-preview-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow);
}

.spc-photo {
  width: 100%;
  height: 150px;
  background-size: cover;
  background-position: center 25%; /* favor the upper portion where faces usually are */
  flex-shrink: 0;
}

.spc-body {
  padding: 1.25rem 1.4rem 1.4rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Cards without photos keep old padding via spc-body */
.story-preview-card:not(.has-photo) .spc-body {
  padding: 1.4rem;
}

.spc-date {
  font-size: 0.72rem;
  color: var(--text-light);
  letter-spacing: 0.04em;
  margin-bottom: 0.4rem;
  text-transform: uppercase;
}

.spc-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.5rem;
  line-height: 1.35;
}

.spc-excerpt {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.5;
  margin-bottom: 0.75rem;
}

.spc-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: auto;
}

.story-km-badge {
  font-size: 0.68rem;
  font-weight: 600;
  background: rgba(147, 184, 143, 0.15);
  color: #5a8a56;
  border: 1px solid rgba(147, 184, 143, 0.4);
  border-radius: 20px;
  padding: 0.15rem 0.6rem;
  letter-spacing: 0.02em;
}

.no-stories-msg {
  text-align: center;
  color: var(--text-light);
  padding: 3rem;
  grid-column: 1 / -1;
}

/* ===== Generate Freeform ===== */
.generate-freeform {
  background: white;
  border: 2px solid var(--green-soft);
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 4px 20px rgba(141, 184, 138, 0.12);
  transition: box-shadow 0.2s;
}

.generate-freeform:focus-within {
  box-shadow: 0 6px 28px rgba(141, 184, 138, 0.22);
  border-color: var(--green);
}

.generate-freeform textarea {
  width: 100%;
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.7;
  resize: none;
  margin-bottom: 1rem;
}

.generate-freeform textarea::placeholder {
  color: var(--text-light);
  font-style: italic;
}

.generate-freeform-btn {
  width: 100%;
  font-size: 1rem;
  padding: 0.85rem;
  letter-spacing: 0.02em;
}

.generate-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin: 1.5rem 0;
  color: var(--text-light);
  font-size: 0.8rem;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.generate-divider::before,
.generate-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border);
}

.freeform-output {
  font-size: 1rem;
  line-height: 1.8;
  color: var(--text);
  white-space: pre-wrap;
}

/* ===== Personal Generate Section ===== */
.personal-generate-section {
  margin-bottom: 0.5rem;
}
.generate-section-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.4);
  margin-bottom: 0.75rem;
}
.generate-section-divider {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgba(45,72,96,0.35);
  letter-spacing: 0.05em;
  margin: 1.25rem 0 1rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.generate-section-divider::before,
.generate-section-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: rgba(45,72,96,0.1);
}
.output-card-personal {
  border-color: rgba(141,184,138,0.3);
  background: linear-gradient(135deg, rgba(141,184,138,0.04), rgba(45,72,96,0.02));
}
.output-card-personal:hover {
  border-color: rgba(141,184,138,0.7);
  box-shadow: 0 6px 20px rgba(141,184,138,0.15);
}
.output-card-personal .output-title { color: #2e6b2c; }

/* ===== Generate Outputs ===== */
.output-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
  margin-bottom: 2rem;
}

.output-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 1.5rem;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all 0.25s;
  font-family: 'Montserrat', sans-serif;
}

.output-card:hover {
  border-color: var(--blue);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px var(--shadow);
}

.output-icon { font-size: 1.8rem; margin-bottom: 0.75rem; }
.output-svg {
  display: block;
  margin-bottom: 0.85rem;
  color: var(--navy);
  transition: color 0.18s ease, transform 0.18s ease;
}
.output-card:hover .output-svg { color: var(--coral); transform: translateY(-1px); }
.output-card-personal .output-svg { color: #3a7d42; }
.output-card-personal:hover .output-svg { color: var(--coral); }
.output-title { font-weight: 600; font-size: 1rem; margin-bottom: 0.3rem; color: var(--blue-dark); }
.output-desc { font-size: 0.85rem; color: var(--text-light); line-height: 1.5; }

.output-panel {
  background: white;
  border-radius: var(--radius);
  box-shadow: 0 4px 20px var(--shadow);
  overflow: hidden;
  margin-top: 1.5rem;
}
.output-with-actions {
  display: flex;
  gap: 0;
  align-items: flex-start;
}
.output-main { flex: 1; min-width: 0; }
.output-action-bar {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 1rem 0.75rem;
  border-left: 1px solid var(--border);
  min-width: 90px;
  align-items: center;
}
.output-action-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.5rem 0.6rem;
  cursor: pointer;
  font-family: inherit;
  width: 72px;
  transition: border-color 0.15s, background 0.15s;
}
.output-action-btn:hover { border-color: var(--navy); background: white; }
.output-action-icon {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
}
.output-action-label {
  font-size: 0.62rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #666;
}
/* ===== Dev Tools (autofill buttons) ===== */
.dev-tools {
  position: fixed;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  z-index: 9999;
}
.dev-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.4rem 0.6rem;
  border-radius: 8px;
  border: 1.5px dashed rgba(45,72,96,0.35);
  background: rgba(255,255,255,0.85);
  color: var(--navy);
  cursor: pointer;
  opacity: 0.5;
  transition: opacity 0.15s;
  backdrop-filter: blur(4px);
}
.dev-btn:hover { opacity: 1; }

/* ===== Floating Refine Box ===== */
/* Floating refine panel — mid-left, follows scroll */
.refine-float {
  position: fixed;
  left: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 9000;
  width: 170px;
  background: white;
  border: 1.5px solid var(--green-soft);
  border-radius: 14px;
  box-shadow: 0 4px 16px rgba(45,72,96,0.12);
  padding: 0.75rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  transition: width 0.2s ease, box-shadow 0.2s ease;
}
.refine-float.active {
  width: 210px;
  box-shadow: 0 6px 22px rgba(45,72,96,0.18);
}
.refine-float.hidden { display: none; }
.refine-float-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  opacity: 0.85;
}
.refine-float-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.55rem;
  font-size: 0.8rem;
  font-family: inherit;
  resize: none;
  background: var(--cream);
  color: var(--navy);
  box-sizing: border-box;
  height: 2.2rem;
  overflow: hidden;
  transition: height 0.22s ease, border-color 0.15s;
}
.refine-float.active .refine-float-input {
  height: 4.5rem;
  overflow: auto;
}
.refine-float-input:focus { outline: none; border-color: var(--green); }
.refine-float-btn {
  background: var(--green);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.42rem 0.75rem;
  font-size: 0.78rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
  transition: opacity 0.15s, max-height 0.22s ease;
  width: 100%;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
}
.refine-float.active .refine-float-btn {
  max-height: 3rem;
  padding: 0.5rem 0.75rem;
  opacity: 1;
}
.refine-float-btn:hover { opacity: 0.85 !important; }
.refine-float-btn:disabled { opacity: 0.5 !important; cursor: default; }

.output-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1.25rem 1.5rem;
  background: url('/static/wave-top.png') no-repeat center center;
  background-size: cover;
  color: white;
}

.output-header h2 {
  color: white;
  font-size: 1.3rem;
  margin: 0;
}

.output-meta { display: flex; align-items: center; gap: 0.75rem; }

.badge {
  padding: 0.25rem 0.6rem;
  border-radius: 12px;
  font-size: 0.75rem;
  font-weight: 500;
}
.badge.claude { background: rgba(255,255,255,0.2); color: white; }
.badge.mock { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }

.output-content {
  padding: 2rem 1.5rem;
  font-size: 0.95rem;
  line-height: 1.8;
  white-space: pre-wrap;
}

.output-content h1, .output-content h2, .output-content h3 {
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}

.output-content h1:first-child { margin-top: 0; }

.hidden { display: none !important; }

/* ===== Modal ===== */
.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.4);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 200;
  overflow-y: auto;
  padding: 1.5rem 0;
}

.modal-content {
  background: white;
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 480px;
  width: 90%;
  max-height: calc(100vh - 3rem);
  overflow-y: auto;
}
.modal-content input,
.modal-content textarea {
  pointer-events: auto;
  position: relative;
  z-index: 1;
}

.modal-content h3 { margin-bottom: 1rem; }

.modal-content .btn {
  margin-top: 1rem;
}

/* Focus picker */
.focus-picker-content {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.focus-picker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.focus-picker-header h3 { margin: 0; }
.focus-picker-close {
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
}
.focus-picker-sub {
  font-size: 0.85rem;
  color: var(--text-light);
  margin: -0.5rem 0 0;
  line-height: 1.4;
}
.focus-section {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.focus-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
}
.focus-story-list,
.focus-km-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  max-height: 180px;
  overflow-y: auto;
  padding: 0.5rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  background: var(--bg);
}
.focus-story-item,
.focus-km-item {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.85rem;
  color: var(--navy);
  cursor: pointer;
  padding: 0.25rem 0.25rem;
  border-radius: 4px;
  transition: background 0.12s;
}
.focus-story-item:hover,
.focus-km-item:hover { background: rgba(45,72,96,0.06); }
.focus-story-title { flex: 1; }
.focus-story-date {
  font-size: 0.72rem;
  color: var(--text-light);
  white-space: nowrap;
}
.focus-audience-input {
  width: 100%;
  border: 1px solid var(--sage);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--navy);
  box-sizing: border-box;
  background: #f8fdf8;
}
.focus-audience-input:focus {
  outline: none;
  border-color: var(--coral);
  background: #fff;
}
.focus-audience-section .focus-section-label {
  font-weight: 600;
  color: var(--navy);
}
.focus-people-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.5rem;
}
.focus-people-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  background: #fff;
  border: 1px solid var(--sage);
  border-radius: 20px;
  padding: 0.25rem 0.65rem;
  font-size: 0.8rem;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.focus-people-chip:hover {
  background: var(--sage);
  color: #fff;
  border-color: var(--sage);
}
.fpc-type {
  font-size: 0.72rem;
  opacity: 0.65;
  text-transform: capitalize;
}
.focus-context-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--navy);
  resize: vertical;
  box-sizing: border-box;
}
.focus-context-input:focus {
  outline: none;
  border-color: var(--sage);
}
.focus-picker-actions {
  display: flex;
  gap: 0.75rem;
  justify-content: flex-end;
  margin-top: 0.25rem;
}
.focus-empty {
  font-size: 0.82rem;
  color: var(--text-light);
  padding: 0.5rem;
  margin: 0;
}

.km-pick-btn {
  display: block;
  width: 100%;
  padding: 0.8rem 1rem;
  margin-bottom: 0.5rem;
  text-align: left;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  transition: all 0.2s;
}

.km-pick-btn:hover { border-color: var(--blue); background: white; }

/* ===== Stories List ===== */
.stories-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-top: 1.5rem;
}

.stories-search-wrap {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: white;
  border: 1px solid rgba(45,72,96,0.15);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  flex: 1 1 320px;
  min-width: 240px;
  max-width: 500px;
  color: rgba(45,72,96,0.55);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.stories-search-wrap:focus-within {
  border-color: var(--navy);
  box-shadow: 0 2px 8px rgba(45,72,96,0.08);
}
.stories-search-icon { flex-shrink: 0; }
.stories-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.88rem;
  color: var(--navy);
  flex: 1;
  min-width: 0;
}
.stories-search-clear {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.4);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0 0.2rem;
  line-height: 1;
  transition: color 0.15s;
}
.stories-search-clear:hover { color: var(--navy); }

.filter-bar { display: flex; gap: 0.75rem; }
.filter-bar select {
  padding: 0.5rem 0.8rem;
  border: 1.5px solid var(--border);
  border-radius: var(--radius);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  background: white;
}

.stories-list {
  display: grid;
  gap: 1rem;
}

.story-card {
  background: white;
  border-radius: var(--radius);
  padding: 1.25rem 1.5rem;
  box-shadow: 0 2px 10px var(--shadow);
  cursor: pointer;
  transition: all 0.2s;
  position: relative;
}

/* ── STORY MEDIA CIRCLE ── */
.story-media-circle {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  overflow: hidden;
  border: 2px solid white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  cursor: pointer;
  flex-shrink: 0;
  transition: transform 0.18s, box-shadow 0.18s;
  z-index: 1;
}
.story-media-circle:hover {
  transform: scale(1.08);
  box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}
.story-media-circle img,
.story-media-circle video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.story-media-circle-play {
  position: absolute;
  inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: rgba(0,0,0,0.3);
  color: white;
  font-size: 0.9rem;
}

/* ── STORY DRAWER ── */
.story-drawer-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  z-index: 8000;
}
.story-drawer-backdrop.visible { display: block; }

.story-drawer {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 16px;
  z-index: 8001;
  width: min(680px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 2rem 2rem 1.5rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.18);
}
.story-drawer.open {
  display: block;
}

.story-drawer-handle { display: none; }

.story-drawer-close {
  position: absolute;
  top: 1rem; right: 1.25rem;
  background: var(--navy, #2D4860);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 0.45rem 1rem 0.45rem 0.85rem;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  line-height: 1;
  box-shadow: 0 3px 10px rgba(45,72,96,0.18);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  z-index: 5;
}
.story-drawer-close:hover {
  background: #1f3047;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(45,72,96,0.24);
}
/* Give the title room from the Done pill (top-right) */
.story-drawer-title { margin-top: 3.5rem; }

/* Coral Edit pill — separates visually from the navy Done pill */
.story-edit-pill {
  display: inline-flex;
  align-items: center;
  background: var(--coral, #E8A898);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 0.45rem 1rem 0.45rem 0.85rem;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin: 0.85rem 0 1rem;
  box-shadow: 0 3px 10px rgba(232, 168, 152, 0.32);
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.story-edit-pill:hover {
  background: #d28e7b;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(232, 168, 152, 0.45);
}

.story-drawer-actions {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.story-drawer-actions .story-edit-pill { margin: 0.85rem 0 1rem; }
.story-delete-pill {
  display: inline-flex;
  align-items: center;
  background: transparent;
  color: rgba(45,72,96,0.55);
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 999px;
  padding: 0.4rem 0.85rem 0.4rem 0.75rem;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  margin: 0.85rem 0 1rem;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.story-delete-pill:hover {
  background: #fff1ee;
  color: #c25555;
  border-color: rgba(194, 85, 85, 0.4);
}

.story-drawer-title {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.3rem;
  padding-right: 2rem;
  line-height: 1.3;
}

.story-drawer-meta {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 1.25rem;
}

.story-drawer-narrative {
  font-size: 0.95rem;
  line-height: 1.8;
  color: var(--text);
  white-space: pre-wrap;
  margin-bottom: 1.25rem;
}

.story-drawer-quotes {
  border-left: 3px solid var(--green);
  padding-left: 1rem;
  margin-bottom: 1.25rem;
}
.story-drawer-quotes p {
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
  font-size: 0.95rem;
}

.story-drawer-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.story-drawer-media-grid img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  aspect-ratio: 4/3;
  cursor: pointer;
}
.story-drawer-media-grid video {
  width: 100%;
  border-radius: 8px;
  background: #000;
  grid-column: 1 / -1; /* full width so controls are usable */
  max-height: 280px;
  object-fit: contain;
}

/* Generate from story */
.story-drawer-generate {
  border-top: 1px solid var(--border);
  padding-top: 1.25rem;
  margin-top: 0.5rem;
}
.story-drawer-generate-label {
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.story-drawer-generate-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s ease;
}
.story-drawer-generate-link:hover { color: var(--coral); }
.story-drawer-generate-link .sdgl-arrow {
  transition: transform 0.15s ease;
  color: var(--coral);
  font-weight: 700;
}
.story-drawer-generate-link:hover .sdgl-arrow { transform: translateX(2px); }
.story-drawer-generate-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1rem;
}
.story-gen-btn {
  padding: 0.45rem 0.9rem;
  border-radius: 20px;
  border: 1.5px solid var(--border);
  background: white;
  font-size: 0.82rem;
  cursor: pointer;
  color: var(--text);
  font-family: inherit;
  transition: border-color 0.15s, background 0.15s;
}
.story-gen-btn:hover { border-color: var(--coral); background: #fff8f6; }
.story-gen-btn.active { border-color: var(--coral); background: #fff8f6; color: var(--coral); font-weight: 600; }
.story-drawer-gen-output {
  background: #f9f7f4;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  font-size: 0.9rem;
  line-height: 1.75;
  color: var(--text);
  white-space: pre-wrap;
  display: none;
  position: relative;
}
.story-drawer-gen-output.visible { display: block; }
.story-gen-copy-btn {
  position: absolute;
  top: 0.6rem; right: 0.75rem;
  background: none; border: none;
  font-size: 0.75rem;
  color: var(--text-muted);
  cursor: pointer;
  font-family: inherit;
}
.story-gen-copy-btn:hover { color: var(--coral); }

.story-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 16px var(--shadow);
}

.story-card-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.4rem;
}

.story-card h3 { font-size: 1.15rem; }
.story-card-date { font-size: 0.8rem; color: var(--text-light); }
.story-card p { font-size: 0.9rem; color: var(--text-light); line-height: 1.6; }

.story-card-tags {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}

.story-tag {
  font-size: 0.75rem;
  padding: 0.2rem 0.6rem;
  background: var(--cream);
  border-radius: 12px;
  color: var(--blue-dark);
  border: 1px solid var(--border);
}

/* ===== Story Detail ===== */
#story-detail-content {
  padding: 2rem 0;
}

#story-detail-content h1 { margin-bottom: 0.3rem; }

.story-detail-meta {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 1.5rem;
}

.story-detail-narrative {
  font-size: 1.05rem;
  line-height: 1.9;
  margin-bottom: 1.5rem;
}

.story-detail-quotes {
  border-left: 3px solid var(--coral);
  padding-left: 1.25rem;
  margin-bottom: 1.5rem;
}

.story-detail-quotes p {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--blue-dark);
  margin-bottom: 0.5rem;
}

.story-detail-photos {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}

.story-detail-photos img {
  max-width: 280px;
  max-height: 220px;
  object-fit: cover;
  border-radius: var(--radius);
  border: 1px solid var(--border);
}

.story-detail-metrics {
  background: var(--cream);
  padding: 1rem 1.25rem;
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.story-detail-metrics h3 { font-size: 1rem; margin-bottom: 0.5rem; }

/* ===== Loading ===== */
.loading-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(250, 248, 245, 0.92);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 300;
}

.spinner {
  width: 48px;
  height: 48px;
  border: 3px solid var(--border);
  border-top-color: var(--coral);
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 1rem;
}

@keyframes spin { to { transform: rotate(360deg); } }

.loading-overlay p {
  font-size: 1rem;
  color: var(--text-light);
}

/* ===== Key Move Path Selector ===== */
.km-path-select {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin: 1.5rem 0;
}

.km-path-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  padding: 1.5rem;
  border: 2px solid var(--border);
  border-radius: var(--radius);
  background: white;
  cursor: pointer;
  transition: all 0.25s ease;
  font-family: 'Montserrat', sans-serif;
  gap: 0.4rem;
}

.km-path-card:hover { border-color: var(--blue); transform: translateY(-2px); box-shadow: 0 4px 16px var(--shadow); }
.km-path-card.selected { border-color: var(--coral); background: #fdf3f2; }

.km-path-icon { font-size: 1.5rem; margin-bottom: 0.25rem; }
.km-path-title { font-weight: 600; font-size: 1rem; color: var(--blue-dark); }
.km-path-desc { font-size: 0.85rem; color: var(--text-light); line-height: 1.5; }

.km-discover-note {
  background: var(--cream);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 1rem 1.25rem;
  margin: 1rem 0;
  font-size: 0.95rem;
  color: var(--text-light);
  font-style: italic;
}

/* ===== Metric Chips ===== */
.metric-suggest-row {
  margin-bottom: 0.75rem;
}

.metric-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
  min-height: 0;
}

.metric-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  border: 1.5px solid var(--border);
  background: white;
  font-size: 0.85rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--text);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, color 0.15s;
}

.metric-chip:hover {
  border-color: var(--green);
  background: var(--green-soft);
  color: var(--navy);
}

.metric-chip-suggested {
  border-color: var(--coral);
  background: #fdf3f2;
  color: var(--navy);
}

.metric-chip-suggested:hover {
  border-color: var(--coral-light);
  background: var(--coral-soft);
}

.metric-chip-label {
  flex: 1;
}

.metric-chip-add {
  font-size: 1rem;
  line-height: 1;
  color: var(--green);
  font-weight: 600;
}

.metric-chip-suggested .metric-chip-add {
  color: var(--coral);
}

.metric-chips-loading {
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
  padding: 0.4rem 0;
}

/* ===== FAB Group ===== */
.fab-group {
  position: fixed;
  bottom: 2rem;
  right: 2rem;
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  align-items: center;
  z-index: 900;
}

/* Play (Tutorials) + ? (Help) — small white-outlined chips anchored
   inside the navy global bottom band, left side. They scroll with the
   band and read white-on-navy. No floating viewport-fixed version. */
.gbb-fab-group {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-right: 0.65rem;
}
.gbb-fab {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: transparent;
  border: 1.25px solid rgba(255,255,255,0.6);
  color: #ffffff;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0;
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.gbb-fab:hover {
  background: rgba(255,255,255,0.12);
  border-color: #ffffff;
  transform: translateY(-1px);
}

.chat-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--coral);
  border: none;
  box-shadow: 0 4px 16px rgba(232, 168, 152, 0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s, box-shadow 0.2s;
}

.chat-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(232, 168, 152, 0.55);
}

.chat-fab-icon {
  font-size: 1.2rem;
  color: white;
  line-height: 1;
}

/* Chat bubbles */
.chat-feed {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.chat-bubble {
  max-width: 88%;
  padding: 0.7rem 1rem;
  border-radius: 12px;
  font-size: 0.92rem;
  line-height: 1.6;
}

.chat-bubble-ai {
  background: var(--cream);
  border: 1px solid var(--border);
  color: var(--text);
  align-self: flex-start;
  border-bottom-left-radius: 4px;
}

.chat-bubble-user {
  background: var(--coral-soft);
  color: var(--navy);
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}

.chat-thinking {
  color: var(--text-light);
  font-style: italic;
}

.chat-story-offer-btn {
  display: inline-block;
  margin: 0.2rem 0 0.5rem 0.25rem;
  background: var(--coral);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.35rem 1rem;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
  align-self: flex-start;
}
.chat-story-offer-btn:hover { opacity: 0.85; }
.chat-story-offer-btn:disabled { opacity: 0.5; cursor: default; }

.chat-project-offer-btn {
  display: inline-block;
  margin: 0.2rem 0 0.5rem 0.25rem;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.35rem 1rem;
  font-size: 0.78rem;
  cursor: pointer;
  font-family: inherit;
  align-self: flex-start;
}
.chat-project-offer-btn:hover { opacity: 0.85; }
.chat-project-offer-btn:disabled { opacity: 0.5; cursor: default; }

.chat-header-actions {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.chat-clear-btn {
  background: none;
  border: none;
  color: var(--text-light);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  border-radius: 4px;
}
.chat-clear-btn:hover { color: var(--text); background: var(--border); }

.chat-input-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  background: var(--cream);
  border-radius: 0 0 14px 14px;
}

.chat-input-row .idea-input {
  flex: 1;
  font-size: 0.85rem;
}

.chat-send-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--coral);
  border: none;
  color: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 0.15s;
}

.chat-send-btn:hover { background: var(--coral-light); }

/* ===== Idea Capture FAB ===== */
.idea-fab {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--green);
  border: none;
  box-shadow: 0 4px 16px rgba(141, 184, 138, 0.45);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 900;
  transition: transform 0.2s, box-shadow 0.2s, background 0.2s;
}

.idea-fab:hover {
  transform: scale(1.08);
  box-shadow: 0 6px 24px rgba(141, 184, 138, 0.55);
}


.idea-fab-saved {
  background: var(--navy) !important;
  transform: scale(1.12) !important;
}

.idea-drawer {
  position: fixed;
  bottom: 5.5rem;
  right: 2rem;
  width: 380px;
  height: 500px;
  background: white;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(45, 72, 96, 0.18);
  border: 1.5px solid var(--green-soft);
  z-index: 950;
  display: flex;
  flex-direction: column;
  animation: drawer-in 0.18s ease;
}

@keyframes drawer-in {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}

.idea-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem 0.6rem;
  border-bottom: 1px solid var(--border);
}

.idea-drawer-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  color: var(--navy);
  font-weight: 600;
}

.idea-drawer-close {
  background: none;
  border: none;
  font-size: 0.9rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 0.2rem;
  line-height: 1;
  transition: color 0.15s;
}

.idea-drawer-close:hover { color: var(--navy); }

.idea-drawer-input {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  background: var(--cream);
}

.idea-drawer-feed {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.idea-card {
  background: white;
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--green);
  border-radius: var(--radius);
  padding: 0.75rem 1rem;
}

.idea-card-text {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 0.3rem;
}

.idea-card-date {
  font-size: 0.7rem;
  color: var(--text-light);
  font-weight: 500;
}

.idea-feed-empty {
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
  text-align: center;
  padding: 2rem 0;
}

.idea-input {
  width: 100%;
  border: none;
  outline: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.6;
  resize: none;
  background: transparent;
}

.idea-input::placeholder {
  color: var(--text-light);
  font-style: italic;
}

.idea-panel-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--border);
}

.idea-hint {
  font-size: 0.72rem;
  color: var(--text-light);
}

/* ===== Responsive ===== */
/* ===== Contributor Flow ===== */
.contributor-join-wrap {
  min-height: 100vh;
  background: linear-gradient(160deg, var(--green-soft) 0%, var(--cream) 60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.contributor-join-logo {
  font-size: 1.2rem;
  color: var(--green);
  margin-bottom: 2rem;
  letter-spacing: 0.02em;
}
.contributor-join-card {
  background: white;
  border-radius: 18px;
  padding: 2.5rem;
  max-width: 440px;
  width: 100%;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
  text-align: center;
}
.contributor-join-eyebrow {
  font-size: 0.85rem;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.5rem;
}
.contributor-join-org {
  font-size: 1.6rem;
  color: var(--navy);
  margin: 0 0 0.75rem;
}
.contributor-join-mission {
  color: var(--text-light);
  font-size: 0.9rem;
  margin-bottom: 1rem;
  font-style: italic;
}
.contributor-join-context {
  background: var(--cream);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  text-align: left;
}
.contributor-join-context p {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.6;
  margin: 0;
}
.contributor-join-personal-note {
  margin-top: 0.5rem !important;
  font-size: 0.82rem !important;
  color: var(--text-light) !important;
  font-style: italic;
}
.contributor-join-form {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.contributor-name-input {
  width: 100%;
  padding: 0.75rem 1rem;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  font-size: 1rem;
  font-family: inherit;
  box-sizing: border-box;
}
.contributor-name-input:focus {
  outline: none;
  border-color: var(--green);
}
.contributor-join-btn { width: 100%; margin-top: 0.25rem; }
.contributor-join-note {
  font-size: 0.8rem;
  color: var(--text-light);
  margin: 0;
}

/* Contributor Home */
.contributor-home-wrap {
  min-height: 100vh;
  background: var(--cream);
}
.contributor-home-header {
  background: linear-gradient(135deg, var(--green) 0%, var(--green-light, #a8cca5) 100%);
  padding: 2rem 1.5rem 1.5rem;
  color: white;
}
.contributor-home-brand {
  font-size: 0.9rem;
  opacity: 0.85;
  margin-bottom: 0.5rem;
}
.contributor-home-greeting {
  font-size: 1.5rem;
  font-weight: 600;
  margin: 0;
}
.contributor-org-band {
  background: white;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.contributor-org-name {
  font-size: 1.1rem;
  color: var(--navy);
  margin: 0 0 0.25rem;
}
.contributor-org-mission {
  color: var(--text-light);
  font-size: 0.875rem;
  margin: 0;
  font-style: italic;
}
.contributor-key-moves {
  padding: 1rem 1.5rem 0;
}
.contributor-km-label {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin: 0 0 0.5rem;
}
.contributor-km-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.contributor-km-pill {
  background: var(--green-soft);
  color: var(--green-dark, #5a8a57);
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  font-size: 0.8rem;
}
.contributor-action-wrap {
  padding: 1.5rem;
}
.contributor-add-btn {
  width: 100%;
  font-size: 1.05rem;
  padding: 0.85rem;
}
.contributor-stories-wrap {
  padding: 0 1.5rem 2rem;
}
.contributor-stories-title {
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-light);
  margin: 0 0 0.75rem;
}
.contributor-story-card {
  background: white;
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin-bottom: 0.5rem;
  border-left: 3px solid var(--green);
}
.contributor-story-title {
  font-weight: 600;
  color: var(--navy);
  font-size: 0.9rem;
}
.contributor-story-date {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 0.2rem;
}
.contributor-no-stories {
  color: var(--text-light);
  font-size: 0.875rem;
  font-style: italic;
  text-align: center;
  padding: 1.5rem 0;
}

/* Invite link banner */
.invite-link-banner {
  background: var(--green-soft);
  border: 1px solid var(--green);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-top: 0.75rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.invite-link-banner.hidden { display: none; }
.invite-link-label {
  font-size: 0.85rem;
  color: var(--text);
  white-space: nowrap;
}
.invite-link-code {
  flex: 1;
  font-size: 0.8rem;
  color: var(--navy);
  background: white;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  border: 1px solid var(--border);
  word-break: break-all;
}
.invite-copy-btn {
  background: var(--green);
  color: white;
  border: none;
  border-radius: 6px;
  padding: 0.35rem 0.8rem;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
}
.invite-copy-btn:hover { opacity: 0.88; }
.invite-close-btn {
  background: none;
  border: none;
  color: var(--text-light);
  cursor: pointer;
  font-size: 1rem;
  padding: 0;
}

/* ===== Contributor → Own Profile Invitation ===== */
.draft-from-quote-btn {
  margin-top: 0.5rem;
  background: none;
  border: 1.5px solid var(--coral);
  color: var(--coral);
  border-radius: 20px;
  padding: 0.35rem 1rem;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s, color 0.15s;
}
.draft-from-quote-btn:hover { background: var(--coral); color: white; }
.draft-from-quote-btn:disabled { opacity: 0.5; cursor: default; }
.draft-from-quote-btn.hidden { display: none; }

.contrib-invite-wrap {
  min-height: 100vh;
  background: linear-gradient(160deg, #f9f0ec 0%, var(--cream) 60%);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}
.contrib-invite-card {
  background: white;
  border-radius: 20px;
  padding: 3rem 2.5rem;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 6px 32px rgba(0,0,0,0.08);
  text-align: center;
}
.contrib-invite-spark {
  font-size: 2rem;
  color: var(--coral);
  margin-bottom: 1rem;
}
.contrib-invite-confirm {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 1.5rem;
}
.contrib-invite-headline {
  font-size: 1.8rem;
  color: var(--navy);
  margin: 0 0 1.25rem;
  line-height: 1.2;
}
.contrib-invite-quote {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--green);
  border-left: 3px solid var(--green);
  margin: 0 0 1.5rem;
  padding: 0.5rem 1rem;
  text-align: left;
  line-height: 1.5;
}
.contrib-invite-body {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.7;
  margin-bottom: 1rem;
}
.contrib-invite-actions {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-top: 2rem;
}

@media (max-width: 768px) {
  h1 { font-size: 1.8rem; }
  .hero-tagline { font-size: 1.2rem; }
  .hero-logo { max-width: 300px; }
  .landing-hero { padding-bottom: 10rem; }
  .landing-wave { height: 35%; }
  .wave-top-img { height: 12vh; }
  #screen-onboarding > .wave-top-img { height: 14vh; }
  .wave-bottom-img { height: 100px; }
  .stats-bar { gap: 1.5rem; }
  .key-moves-grid { grid-template-columns: 1fr; }
  .output-grid { grid-template-columns: 1fr; }
  .top-nav { padding: 0.6rem 0.75rem; flex-wrap: nowrap; gap: 0.5rem; }
  .nav-brand-text { display: none; }
  .nav-brand-icon { width: 32px; height: 32px; }
  .nav-links {
    gap: 1rem;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    flex-wrap: nowrap;
    flex: 1;
    min-width: 0;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { font-size: 0.78rem; white-space: nowrap; }
  .container { padding: 1.25rem 1rem; }
  .hero-buttons { flex-direction: column; }
  .filter-bar { flex-direction: column; }
  .stories-header { flex-direction: column; align-items: flex-start; }
}

/* ===== CONTRIBUTOR BAND ===== */
.contributor-band {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem 0;
  margin: 1rem 0 0.5rem;
  border-top: 1px solid var(--border);
}
.contributor-band-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  white-space: nowrap;
}
.contributor-avatars {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.contributor-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: white;
  cursor: default;
  border: 2px solid white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}

/* ===== PROJECTS ── chic & airy ──────────────────────────────────
   Lighter heading, generous whitespace, group labels as small italic
   eyebrows instead of heavy h2s, softer card borders. */
.projects-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.4rem;
  padding-top: 0.5rem;
}
.projects-header h1 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.05;
}
.projects-header .btn-primary {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.projects-subtitle, #projects-subtitle {
  color: var(--text-light);
  font-size: 0.95rem;
  font-style: italic;
  font-weight: 400;
  margin: 0.35rem 0 1.75rem;
  max-width: 50rem;
  line-height: 1.55;
}
.projects-group-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 500;
  font-style: italic;
  color: var(--navy);
  margin: 2.5rem 0 0.85rem;
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.82;
}
.projects-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(290px, 1fr));
  gap: 1.1rem;
}
.project-card {
  background: white;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 14px;
  padding: 1.3rem 1.35rem;
  cursor: pointer;
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.1s;
  box-shadow: 0 1px 6px rgba(45,72,96,0.03);
}
.project-card:hover {
  box-shadow: 0 6px 20px rgba(45,72,96,0.08);
  border-color: rgba(45,72,96,0.20);
  transform: translateY(-1px);
}
.project-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.project-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.35rem;
  line-height: 1.2;
}
.project-card-funder {
  font-size: 0.82rem;
  color: var(--text-light);
  margin: 0 0 0.4rem;
}
.project-card-desc {
  font-size: 0.85rem;
  color: var(--text);
  margin: 0 0 0.75rem;
  line-height: 1.45;
}
.project-card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
}
.project-story-count, .project-deadline {
  font-size: 0.78rem;
  color: var(--text-light);
}
.project-owner {
  font-size: 0.78rem;
  color: var(--text-light);
}
.project-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2em 0.6em;
  border-radius: 20px;
}
.project-badge-active { background: #e8f5e9; color: #2e7d32; }
.project-badge-ongoing { background: #e3f2fd; color: #1565c0; }
.project-badge-aspirational { background: #fef3c7; color: #92400e; }
.project-badge-complete { background: #f3f4f6; color: #6b7280; }
.projects-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-light);
}
.projects-empty p { margin-bottom: 1rem; }

/* Project Detail — title block on left, action buttons floated right so
   they don't span the whole navy band (Alison's note: "shape/edit
   should be somewhere else or on the right side"). */
.project-detail-header {
  background: var(--navy);
  color: white;
  padding: 2rem;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-areas:
    "meta    actions"
    "title   actions"
    "funder  actions"
    "desc    actions";
  column-gap: 1.5rem;
  align-items: start;
}
.project-detail-header .project-detail-meta { grid-area: meta; }
.project-detail-header .project-detail-name { grid-area: title; }
.project-detail-header .project-detail-funder { grid-area: funder; }
.project-detail-header .project-detail-desc { grid-area: desc; }
.project-detail-header .project-detail-actions {
  grid-area: actions;
  align-self: center;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
}
@media (max-width: 720px) {
  .project-detail-header {
    grid-template-columns: 1fr;
    grid-template-areas: "meta" "title" "funder" "desc" "actions";
  }
  .project-detail-header .project-detail-actions {
    flex-direction: row;
    flex-wrap: wrap;
    align-items: flex-start;
  }
}
.project-detail-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.75rem;
}
.project-detail-meta .project-owner { color: rgba(255,255,255,0.7); }
.project-detail-name {
  font-size: 1.6rem;
  font-weight: 800;
  margin: 0 0 0.3rem;
  color: white;
}
.project-detail-funder {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  margin: 0 0 0.75rem;
}
.project-detail-desc {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.85);
  margin: 0 0 1.25rem;
  max-width: 640px;
  line-height: 1.6;
}
.project-detail-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
}
.project-detail-actions .btn {
  font-size: 0.85rem;
  padding: 0.45rem 1rem;
}
.project-detail-actions .btn-primary { background: white; color: var(--navy); }
.project-detail-actions .btn-primary:hover { background: var(--green); color: white; }
.project-detail-actions .btn-outline { border-color: rgba(255,255,255,0.5); color: white; }
.project-detail-actions .btn-outline:hover { background: rgba(255,255,255,0.15); }
.project-detail-actions .btn-danger { border-color: rgba(255,100,100,0.6); color: rgba(255,180,180,1); }
/* Project sections — cozy and efficient, not expansive. Daily-digest feel:
   constrained width, soft card background, tight rounded edges, no
   hard dividing lines between sections. */
.project-section {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
  margin: 0.7rem auto;
  max-width: 820px;
  box-shadow: 0 1px 4px rgba(45,72,96,0.04);
}

/* Pages that wrap multiple project sections — center them inside a
   constrained column so the whole page reads as a contained feed. */
#project-detail-content > .project-section,
#project-detail-content > .proj-component-host,
#project-detail-content > .proj-im-add-cta,
#project-detail-content > .proj-top-actions,
#project-detail-content > .proj-book-tagline,
#project-detail-content > .proj-book-read-row,
#project-detail-content > .proj-top-wave-wrap {
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
#project-detail-content > .project-detail-header { max-width: none; }
.project-section h3 {
  font-size: 0.85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin: 0 0 0.75rem;
}
.project-story-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0;
  border-bottom: 1px solid var(--border);
  gap: 1rem;
}
.project-story-row:last-child { border-bottom: none; }
.project-story-info { display: flex; flex-direction: column; gap: 0.15rem; flex: 1; }
.project-story-title { font-size: 0.9rem; font-weight: 600; color: var(--navy); }
.project-story-date, .project-story-reason { font-size: 0.78rem; color: var(--text-light); }
.project-story-untag {
  background: none; border: none; cursor: pointer; color: var(--text-light);
  font-size: 0.85rem; padding: 0.2rem 0.4rem; border-radius: 4px;
}
.project-story-untag:hover { background: #fee2e2; color: #dc2626; }
.project-story-count-badge {
  display: inline-block;
  background: var(--navy);
  color: white;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.1em 0.5em;
  border-radius: 20px;
  margin-left: 0.4rem;
  vertical-align: middle;
}
.project-untag-drawer {
  margin-top: 1rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
}
.project-untag-drawer summary {
  padding: 0.75rem 1rem;
  cursor: pointer;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  background: #f8fafc;
}
.project-untagged-list { padding: 0 1rem; }
.btn-sm {
  font-size: 0.78rem;
  padding: 0.25rem 0.65rem;
  border-radius: 6px;
  border: 1px solid var(--navy);
  color: var(--navy);
  background: white;
  cursor: pointer;
  white-space: nowrap;
}
.btn-sm:hover { background: var(--navy); color: white; }
.project-dates p { font-size: 0.88rem; color: var(--text); }

/* KPI Tracker */
.project-section-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.project-section-header-row h3 { margin: 0; }
.project-section-actions { display: flex; gap: 0.5rem; }
.kpi-bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto;
  gap: 0.2rem 0.75rem;
  padding: 0.65rem 0;
  border-bottom: 1px solid var(--border);
}
.kpi-bar-row:last-of-type { border-bottom: none; }
.kpi-bar-meta {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.kpi-bar-label { font-size: 0.88rem; font-weight: 600; color: var(--navy); }
.kpi-bar-value { font-size: 0.82rem; color: var(--text-light); }
.kpi-bar-value-editable {
  cursor: pointer;
  padding: 0.15rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.kpi-bar-value-editable:hover { background: rgba(232,168,152,0.12); color: var(--navy); }
.kpi-bar-value-editable .kpi-edit-pencil {
  opacity: 0;
  font-size: 0.72rem;
  color: var(--coral);
  transition: opacity 0.15s;
}
.kpi-bar-value-editable:hover .kpi-edit-pencil { opacity: 1; }
.kpi-bar-track { cursor: pointer; }
.kpi-bar-track {
  grid-column: 1;
  height: 7px;
  background: #eef0ef;
  border-radius: 4px;
  overflow: hidden;
}
.kpi-bar-fill {
  height: 100%;
  background: var(--green);
  border-radius: 4px;
  transition: width 0.4s ease;
}
.kpi-bar-pct { grid-column: 2; font-size: 0.75rem; font-weight: 700; color: var(--green); white-space: nowrap; }
.kpi-empty { font-size: 0.88rem; color: var(--text-muted); }
.kpi-empty a { color: var(--green); }
.kpi-note { font-size: 0.8rem; color: var(--text-muted); font-style: italic; margin-top: 0.5rem; }
.kpi-extracting { font-size: 0.88rem; color: var(--text-muted); font-style: italic; }
.kpi-editor-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.kpi-editor-row input { border: 1px solid var(--border); border-radius: 6px; padding: 0.4rem 0.6rem; font-size: 0.88rem; flex: 1; min-width: 100px; }
.kpi-remove-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1rem; padding: 0 0.25rem; }
.kpi-remove-btn:hover { color: #dc2626; }

/* Grant Match */
.gm-btn { background: var(--green) !important; }
.modal-box-wide { max-width: 640px !important; }
.modal-sub { font-size: 0.88rem; color: var(--text-muted); margin: -0.25rem 0 1.25rem; line-height: 1.5; }
.gm-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.gm-eyebrow { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.25rem; }
.gm-score-row { display: flex; align-items: baseline; gap: 0.4rem; }
.gm-score { font-size: 2.2rem; font-weight: 800; font-family: 'Cormorant Garamond', serif; line-height: 1; }
.gm-score-label { font-size: 0.82rem; color: var(--text-muted); }
.gm-req-row {
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}
.gm-req-row:last-child { border-bottom: none; }
.gm-req-header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.4rem; }
.gm-req-text { font-size: 0.9rem; color: var(--navy); flex: 1; line-height: 1.45; }
.gm-coverage-strong { font-size: 0.72rem; font-weight: 700; color: var(--green); white-space: nowrap; padding-top: 0.1rem; }
.gm-coverage-partial { font-size: 0.72rem; font-weight: 700; color: #d97706; white-space: nowrap; padding-top: 0.1rem; }
.gm-coverage-missing { font-size: 0.72rem; font-weight: 700; color: #dc2626; white-space: nowrap; padding-top: 0.1rem; }
.gm-story-chips { display: flex; flex-wrap: wrap; gap: 0.35rem; margin-bottom: 0.35rem; }
.gm-story-chip {
  font-size: 0.75rem; background: #eef5f0; color: var(--navy);
  padding: 0.2rem 0.55rem; border-radius: 12px; cursor: pointer;
  border: 1px solid rgba(45,72,96,0.12);
}
.gm-story-chip:hover { background: var(--green); color: white; }
.gm-gap-note { font-size: 0.78rem; color: #dc2626; font-style: italic; }
.gm-section { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); }
.gm-section-label { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-muted); margin-bottom: 0.6rem; }
.gm-narrative { font-size: 0.9rem; line-height: 1.65; color: var(--text); white-space: pre-wrap; background: #f8fafc; padding: 1rem; border-radius: 8px; }
.gm-gaps-list { margin: 0; padding-left: 1.2rem; }
.gm-gaps-list li { font-size: 0.88rem; color: var(--text); margin-bottom: 0.3rem; }
.gm-capture-prompt { font-size: 0.85rem; color: var(--navy); padding: 0.5rem 0.75rem; background: #f0f7f4; border-radius: 6px; margin-bottom: 0.4rem; }

/* Custom Project Components */
.project-add-component-row {
  display: flex;
  justify-content: center;
  padding: 1rem 2rem;
  border-bottom: none;
}

/* Project subcategory: prominent "Add a container" zone at the bottom */
.proj-sub-add-container-row {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  margin: 2.5rem 0 2rem;
  padding: 0 1rem;
}
.proj-sub-add-container-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.95rem 1.6rem 0.95rem 1.25rem;
  background: linear-gradient(135deg, #2d4860 0%, #3a5a78 100%);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 6px 22px rgba(45, 72, 96, 0.28);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.proj-sub-add-container-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(45, 72, 96, 0.38);
  background: linear-gradient(135deg, #3a5a78 0%, #4a6b8c 100%);
}
.proj-sub-add-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.18);
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1;
}
.proj-sub-add-label { letter-spacing: 0.01em; }
.proj-sub-add-hint {
  margin: 0;
  font-size: 0.85rem;
  color: var(--muted, #7c8a98);
  font-style: italic;
  text-align: center;
  max-width: 520px;
}

/* Upload Log: every photo/note inbound from the Shortcut, sortable, reroutable */
.upload-log-link {
  display: inline-block;
  margin-top: 0.5rem;
  color: var(--navy, #2d4860);
  font-weight: 600;
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
  transition: opacity 0.15s;
}
.upload-log-link:hover { opacity: 0.7; }

.upload-log-header {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
.upload-log-title {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--navy, #2d4860);
  margin: 0 0 0.4rem;
}
.upload-log-sub {
  color: var(--muted, #7c8a98);
  font-size: 0.95rem;
  margin: 0 0 1rem;
  max-width: 640px;
}
.upload-log-status {
  font-size: 0.9rem;
  color: var(--muted, #7c8a98);
  font-style: italic;
  margin-bottom: 1rem;
}
.upload-log-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.upload-log-row {
  display: grid;
  grid-template-columns: 56px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 1rem;
  background: white;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 10px;
  transition: box-shadow 0.15s;
}
.upload-log-row:hover { box-shadow: 0 4px 14px rgba(45,72,96,0.08); }
.upload-log-thumb {
  width: 56px;
  height: 56px;
  border-radius: 8px;
  object-fit: cover;
  background: #f3f5f7;
}
.upload-log-thumb-text {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.4rem;
  color: var(--muted, #7c8a98);
}
.upload-log-row-body { min-width: 0; }
.upload-log-row-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.82rem;
  color: var(--muted, #7c8a98);
  margin-bottom: 0.25rem;
}
.upload-log-row-time { font-weight: 600; color: var(--navy, #2d4860); }
.upload-log-row-org { color: var(--green, #6fa37a); font-weight: 500; }
.upload-log-tag {
  background: rgba(45, 72, 96, 0.08);
  color: var(--navy, #2d4860);
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  font-size: 0.72rem;
  letter-spacing: 0.02em;
}
.upload-log-row-text {
  font-size: 0.92rem;
  color: var(--text, #2d4860);
  line-height: 1.4;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.upload-log-row-actions {
  display: flex;
  align-items: center;
}
.upload-log-reroute-select {
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  padding: 0.45rem 0.6rem;
  font-size: 0.85rem;
  background: white;
  color: var(--navy, #2d4860);
  font-family: inherit;
  cursor: pointer;
}
.upload-log-reroute-select:hover { border-color: var(--navy, #2d4860); }
@media (max-width: 680px) {
  .upload-log-row {
    grid-template-columns: 48px 1fr;
    grid-template-areas: "thumb body" "thumb body" "actions actions";
    gap: 0.6rem;
  }
  .upload-log-thumb { grid-area: thumb; width: 48px; height: 48px; }
  .upload-log-row-body { grid-area: body; }
  .upload-log-row-actions { grid-area: actions; margin-top: 0.3rem; }
  .upload-log-row-text { white-space: normal; }
}

/* Card Grid component: grid of clickable cards inside a subcategory container */
.comp-cardgrid { padding: 0.25rem 0 0.5rem; }
.comp-cardgrid-empty {
  margin: 0.5rem 0 1rem;
  font-size: 0.9rem;
  color: var(--muted, #7c8a98);
  font-style: italic;
}
.comp-cardgrid-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.comp-cardgrid-card {
  position: relative;
  background: white;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 12px;
  padding: 1rem 1rem 0.95rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.2s, border-color 0.2s;
  min-height: 110px;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.comp-cardgrid-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(45, 72, 96, 0.12);
  border-color: rgba(45, 72, 96, 0.25);
}
.comp-cardgrid-card-title {
  font-weight: 600;
  font-size: 1rem;
  color: var(--navy, #2d4860);
  line-height: 1.25;
}
.comp-cardgrid-card-subtitle {
  font-size: 0.82rem;
  color: var(--muted, #7c8a98);
  font-style: italic;
}
.comp-cardgrid-card-snippet {
  font-size: 0.85rem;
  color: var(--text, #2d4860);
  line-height: 1.4;
  opacity: 0.85;
  margin-top: 0.15rem;
}
.comp-cardgrid-card-empty {
  font-size: 0.85rem;
  color: #b8c1ca;
  font-style: italic;
}
.comp-cardgrid-card-delete {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--border, #e5e5e5);
  background: rgba(255, 255, 255, 0.95);
  color: #999;
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s;
}
.comp-cardgrid-card:hover .comp-cardgrid-card-delete { opacity: 1; }
.comp-cardgrid-card-delete:hover {
  color: var(--coral, #e87b5f);
  border-color: var(--coral, #e87b5f);
}
.comp-cardgrid-add {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.6rem 1.1rem;
  border: 1.5px dashed rgba(45, 72, 96, 0.35);
  background: transparent;
  color: var(--navy, #2d4860);
  border-radius: 999px;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.comp-cardgrid-add:hover {
  background: rgba(45, 72, 96, 0.05);
  border-color: var(--navy, #2d4860);
}
.comp-cardgrid-add-plus {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--navy, #2d4860);
  color: white;
  font-size: 16px;
  line-height: 1;
}

/* Card-detail modal: open one card, write into it */
.sub-comp-card-modal-box {
  max-width: 760px;
  width: 95vw;
  padding: 2rem 2rem 1.5rem;
  position: relative;
}
.sub-comp-card-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: transparent;
  color: var(--muted, #7c8a98);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  transition: color 0.15s, background 0.15s;
}
.sub-comp-card-close:hover {
  color: var(--coral, #e87b5f);
  background: rgba(0,0,0,0.05);
}
.sub-comp-card-title {
  width: 100%;
  font-size: 1.5rem;
  font-weight: 600;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.35rem 0 0.5rem;
  color: var(--navy, #2d4860);
  font-family: inherit;
  background: transparent;
  margin-bottom: 0.4rem;
}
.sub-comp-card-title:focus {
  outline: none;
  border-bottom-color: var(--green, #6fa37a);
}
.sub-comp-card-subtitle {
  width: 100%;
  font-size: 0.95rem;
  border: none;
  padding: 0.25rem 0;
  color: var(--muted, #7c8a98);
  font-style: italic;
  font-family: inherit;
  background: transparent;
  margin-bottom: 0.85rem;
}
.sub-comp-card-subtitle:focus { outline: none; }
.sub-comp-card-body {
  width: 100%;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 10px;
  padding: 0.95rem 1.1rem;
  font-family: inherit;
  font-size: 1rem;
  line-height: 1.55;
  color: var(--text, #2d4860);
  resize: vertical;
  min-height: 280px;
  background: #fafbfc;
}
.sub-comp-card-body:focus {
  outline: none;
  border-color: var(--green, #6fa37a);
  background: white;
}
.sub-comp-card-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
  gap: 0.75rem;
}
.sub-comp-card-delete-btn {
  background: transparent;
  border: none;
  color: var(--coral, #e87b5f);
  font-size: 0.88rem;
  cursor: pointer;
  padding: 0.5rem 0.75rem;
  font-weight: 500;
}
.sub-comp-card-delete-btn:hover { text-decoration: underline; }

/* Per-component corner delete (hover-revealed) */
.project-custom-comp { position: relative; }
.comp-corner-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border, #e5e5e5);
  background: rgba(255, 255, 255, 0.95);
  color: #999;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
  z-index: 3;
}
.project-custom-comp:hover .comp-corner-delete { opacity: 1; }
.comp-corner-delete:hover {
  color: var(--coral, #e87b5f);
  border-color: var(--coral, #e87b5f);
  background: white;
}
.comp-type-picker {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
  margin-top: 0.25rem;
}
.comp-type-option {
  border: 2px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 0.75rem;
  cursor: pointer;
  text-align: center;
  transition: border-color 0.15s, background 0.15s;
}
.comp-type-option:hover { border-color: var(--green); }
.comp-type-option.selected { border-color: var(--navy); background: #f0f4f8; }
.comp-type-icon { font-size: 1.3rem; margin-bottom: 0.3rem; }
.comp-type-label { font-size: 0.82rem; font-weight: 700; color: var(--navy); }
.comp-type-desc { font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }
.comp-hint { font-size: 0.75rem; color: var(--text-muted); margin-top: 0.35rem; font-style: italic; }
.comp-text-body {
  width: 100%; border: 1px solid var(--border); border-radius: 8px;
  padding: 0.65rem 0.8rem; font-size: 0.88rem; font-family: inherit;
  resize: vertical; color: var(--text); line-height: 1.55;
  box-sizing: border-box;
}
.comp-text-body:focus { outline: none; border-color: var(--green); }
.comp-check-row {
  display: flex; align-items: center; gap: 0.6rem;
  padding: 0.45rem 0; border-bottom: 1px solid var(--border);
}
.comp-check-row:last-of-type { border-bottom: none; }
.comp-check-row input[type=checkbox] { flex-shrink: 0; accent-color: var(--green); width: 15px; height: 15px; }
.comp-check-row span { font-size: 0.88rem; flex: 1; }
.comp-check-done { text-decoration: line-through; color: var(--text-muted); }
.comp-check-del { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 0.8rem; opacity: 0; }
.comp-check-row:hover .comp-check-del { opacity: 1; }
.comp-check-add-row { display: flex; gap: 0.5rem; margin-top: 0.6rem; align-items: center; }
.comp-check-input {
  flex: 1; border: 1px solid var(--border); border-radius: 6px;
  padding: 0.35rem 0.6rem; font-size: 0.85rem;
}
.comp-prompt-preview {
  font-size: 0.82rem; color: var(--text-muted); font-style: italic;
  margin-bottom: 0.75rem; line-height: 1.45;
}
.comp-no-prompt { font-size: 0.82rem; color: var(--text-muted); margin-bottom: 0.75rem; }
.comp-gen-btn { margin-bottom: 0.75rem; }
.comp-gen-output {
  background: #f8fafc; border-radius: 8px; padding: 1rem;
  font-size: 0.88rem; line-height: 1.65; color: var(--text);
  margin-bottom: 0.5rem; border: 1px solid var(--border);
}

/* Project modal */
#project-modal .modal-box {
  max-height: 85vh;
  overflow-y: auto;
}

@media (max-width: 768px) {
  .projects-grid { grid-template-columns: 1fr; }
  .project-detail-header { padding: 1.25rem; }
  .project-section { padding: 1rem; }
  .project-detail-actions { gap: 0.4rem; }
}

/* Project modal overlay */
.modal-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0,0,0,0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 300;
}
.modal-box {
  background: white;
  border-radius: var(--radius);
  padding: 2rem;
  max-width: 540px;
  width: 90%;
  max-height: 85vh;
  overflow-y: auto;
}
.modal-box h2 { margin-top: 0; }

/* ===== PROJECT BUCKETS ─ chic redesign ────────────────────────────
   Light tinted gradient cards in each bucket's color family. Serif numerals
   read as quiet weight, not blasted color. Hover lifts gently. Order on the
   page now flows possibility → execution: Potential → Aspirational → Ongoing/
   Future → Active/Current → New. */
.project-buckets {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.85rem;
  margin: 1.5rem 0 2rem;
}
.project-bucket {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 14px;
  padding: 1.1rem 1.15rem 1rem;
  text-align: left;
  cursor: pointer;
  transition: box-shadow 0.18s, border-color 0.18s, transform 0.12s, background 0.18s;
  position: relative;
  overflow: hidden;
  min-height: 138px;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}
.project-bucket::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(155deg, var(--pb-tint-a, rgba(45,72,96,0.04)) 0%, var(--pb-tint-b, transparent) 100%);
  opacity: 0.9;
  pointer-events: none;
}
.project-bucket > * { position: relative; z-index: 1; }
.project-bucket:hover {
  box-shadow: 0 6px 22px rgba(45,72,96,0.08);
  transform: translateY(-2px);
  border-color: var(--pb-accent, rgba(45,72,96,0.30));
}
.project-bucket-icon {
  position: absolute;
  top: 0.85rem;
  right: 1rem;
  font-size: 1.05rem;
  line-height: 1;
  color: var(--pb-accent, var(--navy));
  opacity: 0.7;
}
.project-bucket-count {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 400;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 0.5rem;
  opacity: 0.85;
}
.project-bucket-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: var(--pb-accent, var(--navy));
  margin-bottom: 0.3rem;
}
.project-bucket-sub {
  font-size: 0.74rem;
  color: var(--text-light);
  line-height: 1.45;
}

/* Per-bucket tints. Possibility tones (Potential/Aspirational) carry warmer
   hues; execution tones (Ongoing/Active) stay cool and grounded. */
.project-bucket-potential {
  --pb-tint-a: rgba(124,158,124,0.14);
  --pb-tint-b: rgba(148,184,208,0.10);
  --pb-accent: var(--green);
}
.project-bucket-aspirational {
  --pb-tint-a: rgba(245,221,141,0.18);
  --pb-tint-b: rgba(232,168,152,0.10);
  --pb-accent: #b6862a;
}
.project-bucket-ongoing {
  --pb-tint-a: rgba(148,184,208,0.16);
  --pb-tint-b: rgba(45,72,96,0.05);
  --pb-accent: #3d6680;
}
.project-bucket-active {
  --pb-tint-a: rgba(45,72,96,0.07);
  --pb-tint-b: rgba(124,158,124,0.05);
  --pb-accent: var(--navy);
}

/* New Project card — dashed, inviting affordance */
.project-bucket-add {
  background: rgba(255,255,255,0.5);
  border-style: dashed;
  border-color: rgba(45,72,96,0.22);
  --pb-accent: var(--text-muted);
}
.project-bucket-add::before { display: none; }
.project-bucket-add:hover {
  background: rgba(124,158,124,0.06);
  border-color: var(--green);
  --pb-accent: var(--green);
}
.project-bucket-add .project-bucket-icon { font-size: 1.4rem; opacity: 0.85; }
.project-bucket-add .project-bucket-count { display: none; }
.project-bucket-add .project-bucket-label { color: var(--text); }

.project-badge-potential { background: rgba(124,158,124,0.14); color: #4a7d4a; }

/* Projects view toggle */
.projects-toggle-row {
  display: flex;
  margin-bottom: 1.25rem;
}
.projects-toggle {
  display: flex;
  background: rgba(45,72,96,0.05);
  border-radius: 999px;
  padding: 3px;
  gap: 2px;
}
.projects-toggle-btn {
  padding: 0.45rem 1.15rem;
  border: none;
  background: transparent;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.projects-toggle-btn:hover { color: var(--navy); }
.projects-toggle-btn.active {
  background: white;
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(45,72,96,0.10);
}

/* Intelligence tabs */
.intel-tabs {
  display: flex;
  gap: 0;
  border-bottom: 2px solid var(--border);
  margin-bottom: 1.5rem;
}
.intel-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
  padding: 0.6rem 1.2rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.intel-tab:hover { color: var(--navy); }
.intel-tab.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}
.intel-panel { display: block; }
.intel-panel.hidden { display: none; }

/* Grant Discovery */
.discover-header { margin-bottom: 1rem; }
.discover-sub { font-size: 0.88rem; color: var(--text-muted); line-height: 1.5; margin: 0 0 1rem; }
.discover-refine-row {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
}
.discover-input {
  flex: 1;
  min-width: 160px;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.5rem 0.8rem;
  font-size: 0.88rem;
}
.discover-loading {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  color: var(--text-muted);
  font-size: 0.88rem;
  padding: 1.5rem 0;
}
.discover-count {
  font-size: 0.78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  margin-bottom: 1rem;
}
.discover-empty { font-size: 0.88rem; color: var(--text-muted); padding: 1rem 0; }
.discover-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1rem;
  background: white;
  transition: box-shadow 0.15s;
}
.discover-card:hover { box-shadow: 0 2px 12px rgba(0,0,0,0.08); }
.discover-card-saved { opacity: 0.6; }
.discover-card-top { margin-bottom: 0.75rem; }
.discover-card-meta { display: flex; gap: 0.75rem; align-items: center; margin-bottom: 0.4rem; flex-wrap: wrap; }
.discover-funder { font-size: 0.75rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.discover-deadline { font-size: 0.75rem; color: #d97706; font-weight: 600; }
.discover-card-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--navy);
  text-decoration: none;
  display: block;
  margin-bottom: 0.4rem;
  line-height: 1.35;
}
.discover-card-title:hover { color: var(--green); }
.discover-card-summary { font-size: 0.85rem; color: var(--text); line-height: 1.5; margin: 0 0 0.4rem; }
.discover-card-fit { font-size: 0.82rem; color: var(--green); font-weight: 600; margin: 0; }
.discover-card-actions { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.discover-saved-label { font-size: 0.82rem; color: var(--green); font-weight: 600; }

.project-bucket-add {
  border: 2px dashed var(--border);
  background: #fafafa;
  opacity: 0.75;
}
.project-bucket-add .project-bucket-icon {
  font-size: 1.6rem;
  color: var(--text-light);
}
.project-bucket-add .project-bucket-label { color: var(--text-light); }
.project-bucket-add:hover {
  opacity: 1;
  border-color: var(--navy);
  background: white;
}
.project-bucket-add:hover .project-bucket-icon,
.project-bucket-add:hover .project-bucket-label { color: var(--navy); }

@media (max-width: 768px) {
  .project-buckets { grid-template-columns: repeat(2, 1fr); }
}

/* ===== Streaming cursor ===== */
.generate-cursor {
  display: inline-block;
  animation: blink 0.7s step-end infinite;
  color: var(--green);
  font-weight: 300;
}
@keyframes blink { 50% { opacity: 0; } }

/* ===== Key Move Detail Screen ===== */
.km-detail-header {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 2rem 0 1.5rem;
  border-bottom: 2px solid var(--green-soft);
  margin-bottom: 1.25rem;
}

/* ── KM VIEW TOGGLE ── */
.km-view-toggle {
  display: flex;
  gap: 0;
  margin-bottom: 1.75rem;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
  width: fit-content;
}
.km-view-btn {
  font-family: var(--font-ui);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.45rem 1.1rem;
  border: none;
  background: transparent;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.18s;
}
.km-view-btn:not(:last-child) { border-right: 1px solid var(--border); }
.km-view-btn.active { background: var(--green); color: #fff; }
.km-view-btn:not(.active):hover { background: var(--green-soft); color: var(--green-dark); }

/* ── PHOTO MAP ── */
.km-photo-map { margin-bottom: 2rem; }

.km-photo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 0.75rem;
}

.km-photo-tile {
  position: relative;
  border-radius: 8px;
  overflow: hidden;
  background: var(--surface);
  border: 1px solid var(--border);
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
  aspect-ratio: 4/3;
}
.km-photo-tile:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.12); }

.km-photo-tile img,
.km-photo-tile video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}

.km-photo-tile-overlay {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 0.5rem 0.6rem 0.4rem;
  background: linear-gradient(transparent, rgba(0,0,0,0.6));
  color: #fff;
  font-size: 0.72rem;
  font-family: var(--font-ui);
  opacity: 0;
  transition: opacity 0.18s;
}
.km-photo-tile:hover .km-photo-tile-overlay { opacity: 1; }

.km-photo-tile-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 36px; height: 36px;
  background: rgba(255,255,255,0.85);
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 1rem;
  pointer-events: none;
}

/* ── PHOTO LIGHTBOX ── */
.km-photo-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.85);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.km-photo-lightbox.hidden { display: none; }

.km-lightbox-inner {
  background: var(--surface);
  border-radius: 10px;
  max-width: 700px;
  width: 100%;
  padding: 1.5rem;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
}

.km-lightbox-close {
  position: absolute;
  top: 0.75rem; right: 0.9rem;
  background: none; border: none;
  font-size: 1.2rem; cursor: pointer;
  color: var(--text-muted);
}

#km-lightbox-media img,
#km-lightbox-media video {
  width: 100%;
  border-radius: 6px;
  margin-bottom: 1rem;
}

.km-lightbox-story {
  font-size: 0.88rem;
  color: var(--text-muted);
  border-top: 1px solid var(--border);
  padding-top: 0.75rem;
}
.km-lightbox-story strong { color: var(--text); display: block; margin-bottom: 0.25rem; }
.km-detail-number {
  width: 52px;
  height: 52px;
  min-width: 52px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
}
.km-detail-title-wrap { flex: 1; }
.km-detail-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.25rem;
}
.km-detail-desc {
  color: #666;
  font-size: 0.95rem;
  margin: 0;
  line-height: 1.5;
}
.km-detail-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  white-space: nowrap;
  margin-top: 0.4rem;
}
.km-quotes-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2rem;
}
.km-quote {
  background: var(--cream);
  border-left: 3px solid var(--green);
  padding: 0.75rem 1rem;
  margin: 0;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--navy);
  border-radius: 0 8px 8px 0;
  flex: 1 1 280px;
  max-width: 480px;
}
.km-section-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.5;
  margin: 2rem 0 0.75rem;
}
.km-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.km-story-card {
  background: white;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.25rem;
}
.km-story-meta {
  font-size: 0.72rem;
  color: #999;
  margin-bottom: 0.4rem;
}
.km-story-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.km-story-narrative {
  font-size: 0.88rem;
  color: #555;
  line-height: 1.6;
  margin: 0 0 0.75rem;
}
.km-story-quote {
  font-style: italic;
  color: var(--navy);
  font-size: 0.88rem;
  border-left: 2px solid var(--green-soft);
  padding-left: 0.75rem;
  margin: 0;
}
.km-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: #999;
}
.km-media-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.km-media-item {
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 1;
  background: var(--cream);
}
.km-media-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.km-data-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.km-data-chip {
  background: var(--green-soft);
  border-radius: 10px;
  padding: 0.75rem 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: 100px;
}
.km-data-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
}
.km-data-label {
  font-size: 0.7rem;
  color: #666;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-top: 0.25rem;
}

/* ===== KM Detail — rebuilt dashboard ===== */
#screen-km-detail { background: #f8fbf8; }

.km-circle-lg {
  width: 62px; height: 62px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.7rem;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  margin-left: -10px;
  box-shadow: 0 4px 16px rgba(45,72,96,0.25);
}
.km-detail-stats { text-align: right; }
.km-detail-daterange {
  font-size: 0.78rem;
  color: var(--text-light);
  margin-top: 4px;
}

/* Timeline — full-width green band */
.km-timeline-wrap {
  position: relative;
  left: 50%;
  width: 100vw;
  transform: translateX(-50%);
  margin: 8px 0 32px;
  background: linear-gradient(170deg, #e8f2e8 0%, #ddeedd 60%, #d4ebd4 100%);
  padding: 28px 48px 20px;
  overflow: visible;
}
.km-timeline-outer { position: relative; overflow: visible; }
.km-tl-track {
  position: relative;
  height: 70px;
  overflow: visible;
}
.km-tl-wave-svg {
  position: absolute;
  top: 0; left: 0;
  width: 100%; height: 100%;
  overflow: visible;
  pointer-events: none;
}
.km-tl-wave {
  fill: none;
  stroke: var(--navy);
  stroke-width: 2;
  opacity: 0.25;
  animation: km-wave-settle 3.8s ease-out both;
}
@keyframes km-wave-settle {
  0%   { d: path('M 0,35 Q 100,-12 200,35 Q 300,82 400,35 Q 500,-12 600,35 Q 700,82 800,35'); }
  18%  { d: path('M 0,35 Q 100,-4 200,35 Q 300,74 400,35 Q 500,-4 600,35 Q 700,74 800,35'); }
  38%  { d: path('M 0,35 Q 100,18 200,35 Q 300,52 400,35 Q 500,18 600,35 Q 700,52 800,35'); }
  58%  { d: path('M 0,35 Q 100,28 200,35 Q 300,42 400,35 Q 500,28 600,35 Q 700,42 800,35'); }
  78%  { d: path('M 0,35 Q 100,33 200,35 Q 300,37 400,35 Q 500,33 600,35 Q 700,37 800,35'); }
  100% { d: path('M 0,35 Q 100,35 200,35 Q 300,35 400,35 Q 500,35 600,35 Q 700,35 800,35'); }
}
.km-tl-dots-layer {
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
}
.km-tl-dot {
  position: absolute;
  top: 50%;
  width: 16px; height: 16px;
  border-radius: 50%;
  background: var(--green);
  border: 3px solid rgba(232,242,232,0.9);
  box-shadow: 0 2px 10px rgba(0,0,0,0.2);
  cursor: pointer;
  opacity: 0;
  animation: km-dot-land 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  z-index: 2;
}
@keyframes km-dot-land {
  from {
    opacity: 0;
    transform: translate(calc(-50% + var(--dx, 0px)), calc(-50% + var(--dy, -48px))) scale(0.15);
  }
  50% { opacity: 1; }
  to {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}
.km-tl-dot:hover {
  transform: translate(-50%, -50%) scale(1.55) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.25);
  transition: transform 0.15s, box-shadow 0.15s;
}
.km-tl-dot.has-data {
  background: var(--navy);
  width: 18px; height: 18px;
}
.km-tl-quarters {
  position: relative;
  height: 46px;
  margin-top: 4px;
}
.km-tl-tick {
  position: absolute;
  top: 0;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.km-tl-tick::before {
  content: '';
  display: block;
  width: 1px; height: 6px;
  background: var(--navy);
  opacity: 0.15;
  margin-bottom: 1px;
}
.km-tl-tick-label {
  font-size: 0.63rem;
  font-weight: 600;
  color: var(--navy);
  opacity: 0.3;
  white-space: nowrap;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.km-tl-tick-year {
  font-size: 0.55rem;
  color: var(--navy);
  opacity: 0.25;
  white-space: nowrap;
  letter-spacing: 0.05em;
}
.km-tl-tick-count {
  font-size: 0.66rem;
  color: var(--navy);
  font-weight: 800;
  opacity: 0.7;
  white-space: nowrap;
}
.km-tl-tick-now .km-tl-tick-label {
  opacity: 0.75;
  font-weight: 800;
  color: var(--navy);
}
.km-tl-tick-now::before {
  opacity: 0.5;
  height: 8px;
}
.km-tl-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
}
.km-tl-toggle {
  display: flex;
  background: rgba(45,72,96,0.1);
  border-radius: 22px;
  padding: 3px;
  gap: 2px;
}
.km-tl-btn {
  background: none;
  border: none;
  padding: 5px 13px;
  border-radius: 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.45;
  cursor: pointer;
  transition: all 0.18s;
}
.km-tl-btn.active {
  background: #fff;
  opacity: 1;
  box-shadow: 0 1px 5px rgba(0,0,0,0.13);
}
.km-tl-btn:hover:not(.active) { opacity: 0.7; }
.km-timeline-card {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.1);
  border-radius: 12px;
  padding: 14px 16px;
  margin-top: 14px;
  box-shadow: 0 2px 14px rgba(0,0,0,0.07);
  max-width: 440px;
  animation: km-card-pop 0.2s ease-out;
}
@keyframes km-card-pop {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}
.km-timeline-card-date {
  font-size: 0.72rem;
  color: var(--text-light);
  margin-bottom: 4px;
}
.km-timeline-card-title {
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 6px;
}
.km-timeline-card-excerpt {
  font-size: 0.875rem;
  color: var(--text);
  line-height: 1.55;
}
.km-timeline-card-metric {
  margin-top: 8px;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--green);
}

/* Anchor stories */
.km-anchor-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 16px;
  margin-bottom: 12px;
}
.km-anchor-card {
  background: #fff;
  border: 1.5px solid rgba(45,72,96,0.08);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.km-anchor-card:hover {
  border-color: #C9A4B8;
  box-shadow: 0 4px 18px rgba(180,100,130,0.1);
}
.km-anchor-card.km-anchor-hero {
  grid-column: 1 / -1;
  flex-direction: row;
  min-height: 140px;
}
.km-anchor-card.km-anchor-hero .km-anchor-photo { flex-shrink: 0; }
.km-anchor-card.km-anchor-hero .km-anchor-photo img {
  width: 180px; height: 100%;
  object-fit: cover;
}
.km-anchor-card.km-anchor-hero .km-anchor-title { font-size: 1.1rem; }
.km-anchor-card.km-anchor-hero .km-anchor-narrative { font-size: 0.875rem; }
.km-anchor-photo img {
  width: 100%;
  height: 130px;
  object-fit: cover;
}
.km-anchor-body {
  padding: 16px;
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.km-anchor-date {
  font-size: 0.72rem;
  color: var(--text-light);
}
.km-anchor-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
}
.km-anchor-narrative {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
}
.km-anchor-quote {
  font-size: 0.82rem;
  font-style: italic;
  color: var(--text-light);
  border-left: 3px solid var(--green);
  padding-left: 10px;
  margin: 4px 0 0;
}
.km-anchor-metrics {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 4px;
}
.km-anchor-metric-chip {
  background: #e9f3e9;
  color: var(--navy);
  font-size: 0.72rem;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 20px;
}
.km-anchor-generate-btn {
  margin-top: auto;
  padding-top: 10px;
  background: none;
  border: none;
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  text-align: left;
  padding-left: 0;
  opacity: 0;
  transition: opacity 0.15s;
  letter-spacing: 0.02em;
}
.km-anchor-card:hover .km-anchor-generate-btn { opacity: 1; }
.km-tcard-generate-link {
  display: block;
  margin-top: 10px;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--green);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.km-tcard-generate-link:hover { color: var(--navy); }
.km-stories-overflow {
  margin-bottom: 28px;
}
.km-stories-all-link {
  font-size: 0.82rem;
  color: var(--navy);
  opacity: 0.5;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: opacity 0.15s;
}
.km-stories-all-link:hover { opacity: 0.9; }

/* Shimmer loading */
@keyframes shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.km-shimmer {
  border-radius: 8px;
  background: linear-gradient(90deg, #efefef 25%, #e0e0e0 50%, #efefef 75%);
  background-size: 200% 100%;
  animation: shimmer 1.4s infinite;
}
.km-shimmer-line { height: 44px; margin-bottom: 10px; }
.km-shimmer-line-short { height: 44px; width: 70%; margin-bottom: 10px; }
.km-shimmer-card { height: 100px; border-radius: 12px; margin-bottom: 12px; }

/* Section reveal animation */
@keyframes km-section-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
.km-section-reveal { animation: km-section-in 0.35s ease-out; }

/* Empty timeline */
.km-tl-empty {
  text-align: center;
  padding: 8px 0 0;
  font-size: 0.8rem;
  color: var(--navy);
  opacity: 0.35;
  font-style: italic;
}

/* Opportunities */
.km-opportunities-body {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 32px;
}
.km-opportunity-item {
  background: #f7f9fc;
  border-left: 3px solid var(--navy);
  padding: 12px 14px;
  border-radius: 0 8px 8px 0;
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
}

/* Capture CTA */
.km-capture-cta {
  padding: 24px 0 48px;
  display: flex;
  justify-content: center;
}
.km-capture-btn {
  background: none;
  border: 1.5px dashed rgba(45,72,96,0.25);
  color: var(--navy);
  opacity: 0.55;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 12px 28px;
  border-radius: 10px;
  cursor: pointer;
  transition: all 0.18s;
  letter-spacing: 0.02em;
}
.km-capture-btn:hover {
  opacity: 1;
  border-color: var(--green);
  color: var(--green);
  background: rgba(141,184,138,0.06);
}

/* People */
.km-people-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 14px;
  margin-bottom: 32px;
}
.km-person-card {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.1);
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 5px;
}
.km-person-name {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
}
.km-person-context {
  font-size: 0.83rem;
  color: var(--text);
  line-height: 1.45;
}
.km-person-story {
  font-size: 0.72rem;
  color: var(--text-light);
  font-style: italic;
}
.km-person-draft-btn {
  margin-top: 8px;
  background: none;
  border: 1px solid var(--navy);
  color: var(--navy);
  font-size: 0.78rem;
  padding: 5px 12px;
  border-radius: 6px;
  cursor: pointer;
  align-self: flex-start;
  transition: background 0.15s, color 0.15s;
}
.km-person-draft-btn:hover { background: var(--navy); color: #fff; }
.km-person-draft-btn:disabled { opacity: 0.5; cursor: default; }
.km-person-draft-text {
  background: #f7f9fc;
  border-radius: 8px;
  padding: 10px 12px;
  font-size: 0.83rem;
  color: var(--text);
  line-height: 1.5;
  white-space: pre-wrap;
}

/* ===== People & Partners ===== */
.people-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding: 2rem 0 1.5rem;
  border-bottom: 2px solid var(--green-soft);
  margin-bottom: 2rem;
}
.people-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.25rem;
}
.people-sub {
  font-size: 0.88rem;
  color: var(--text-light);
  margin: 0;
  line-height: 1.5;
  max-width: 500px;
}
.people-add-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  padding: 9px 20px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  margin-top: 4px;
  transition: background 0.15s;
}
.people-add-btn:hover { background: var(--green); }

/* Form */
.people-form-wrap {
  background: rgba(45,72,96,0.04);
  border: 1px solid rgba(45,72,96,0.1);
  border-radius: 14px;
  padding: 20px;
  margin-bottom: 24px;
  animation: km-section-in 0.2s ease-out;
}
.people-form { display: flex; flex-direction: column; gap: 12px; }
.people-form-row { display: flex; gap: 10px; }
.people-input {
  flex: 1;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
}
.people-input:focus { outline: none; border-color: var(--green); }
.people-select {
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 0.85rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  cursor: pointer;
}
.people-select:focus { outline: none; border-color: var(--green); }
.people-textarea {
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 8px;
  padding: 9px 13px;
  font-size: 0.88rem;
  font-family: inherit;
  color: var(--text);
  background: #fff;
  resize: vertical;
}
.people-textarea:focus { outline: none; border-color: var(--green); }
.people-form-actions { display: flex; gap: 10px; }

/* List */
.people-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  margin-bottom: 40px;
}
.person-card {
  background: #fff;
  border: 1.5px solid rgba(45,72,96,0.08);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.person-card:hover {
  border-color: var(--green-soft);
  box-shadow: 0 3px 14px rgba(0,0,0,0.06);
}
.person-card-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.person-card-name {
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
}
.person-type-badge {
  font-size: 0.64rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  padding: 3px 8px;
  border-radius: 12px;
  white-space: nowrap;
  flex-shrink: 0;
}
.badge-donor    { background: #e8f3e8; color: #3a6e3a; }
.badge-client   { background: #e8eef5; color: var(--navy); }
.badge-partner  { background: #f3ede8; color: #7a4a28; }
.badge-volunteer{ background: #e8f0f5; color: #2a5a7a; }
.badge-sponsor  { background: #f5f0e8; color: #7a5a1a; }
.badge-board    { background: #ede8f5; color: #4a2a7a; }
.badge-vendor   { background: #f0f0f0; color: #555; }
.badge-prospect { background: #fdf0e8; color: #8a4a18; }
.badge-collaborator { background: #e8f3ee; color: #2a6a4a; }
.badge-mentor   { background: #f3e8f0; color: #6a2a5a; }
.person-card-about {
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}
.person-card-quote {
  font-size: 0.8rem;
  font-style: italic;
  color: var(--text-light);
  border-left: 3px solid var(--green-soft);
  padding-left: 10px;
  margin-top: 2px;
}
.person-card-actions {
  display: flex;
  gap: 10px;
  margin-top: 6px;
}
.person-action-btn {
  background: none;
  border: none;
  font-size: 0.75rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.person-action-btn:hover { color: var(--navy); }
.person-action-btn.delete:hover { color: #c0392b; }

/* Empty */
.people-empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--text-light);
}
.people-empty p { margin: 0 0 8px; }
.people-empty-hint {
  font-size: 0.82rem;
  max-width: 420px;
  margin: 0 auto;
  line-height: 1.6;
}

/* ===== Projects org label ===== */
.projects-org-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-top: 2px;
}

/* ===== Org Context Badge ===== */
.org-context-badge {
  position: fixed;
  bottom: 96px;
  right: 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  font-style: italic;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(255,255,255,0.92);
  border: 1.5px solid var(--green-soft);
  border-radius: 20px;
  padding: 5px 13px;
  pointer-events: none;
  z-index: 9999;
  box-shadow: 0 1px 6px rgba(141,184,138,0.18);
  max-width: 220px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s;
}
.org-context-badge.hidden { display: none; }

/* ===== Sign Up Screen ===== */
.signup-container {
  max-width: 520px;
  padding: 2rem 1.5rem 4rem;
}

/* --- Waitlist /join screen --- */

/* Full-screen dot stage so the same swirling-dot keyframes work here too */
.join-dots-stage {
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 2;
  animation: dots-stage-fade 0.8s ease forwards;
  animation-delay: 2.2s;
}

/* Impact model on /join — uses the same .landing-im-* classes/markup as the homepage.
   Centered on desktop, shrunken on mobile so the whole M → 1-5 → V row fits across the top. */
.join-im-wrap {
  width: 100%;
  max-width: 1100px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 1.5rem;
  box-sizing: border-box;
  justify-content: center;
}

@media (max-width: 640px) {
  .join-im-wrap {
    padding: 0 0.4rem;
    gap: 0;
  }
  .join-im-wrap .landing-im-circle-mv,
  .join-im-wrap .landing-im-circle-km {
    width: 32px;
    height: 32px;
    font-size: 0.85rem;
  }
  .join-im-wrap .landing-im-kms {
    gap: 0.4rem;
  }
  .join-im-wrap .landing-im-connector {
    width: 22px;
    padding-top: 6px;
  }
  .join-im-wrap .landing-im-label {
    font-size: 0.5rem;
  }
  .join-im-wrap .landing-km-label {
    font-size: 0.5rem !important;
    max-width: 48px;
  }
  .join-im-wrap .landing-im-node {
    gap: 0.2rem;
  }
}

/* Fade in the form + text after the impact model has settled */
.join-content {
  opacity: 0;
  animation: landing-im-appear 0.7s ease forwards;
  animation-delay: 3.1s;
}

.join-container {
  max-width: 560px;
  padding: 1.25rem 1.5rem 4rem;
}
.join-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.75rem;
}
.join-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 1rem;
}
.join-sub {
  font-size: 1.02rem;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 2rem;
}
.join-form { display: flex; flex-direction: column; gap: 1.1rem; }
.join-field { display: flex; flex-direction: column; gap: 0.4rem; }
.join-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
}
.join-optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  color: rgba(45,72,96,0.45);
  margin-left: 0.4rem;
}
.join-input {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: inherit;
  background: white;
  color: var(--navy);
  transition: border-color 0.15s;
  resize: vertical;
}
.join-input:focus { outline: none; border-color: var(--green); }
.join-submit { margin-top: 0.5rem; }
.join-fine {
  font-size: 0.8rem;
  color: var(--text-muted);
  text-align: center;
  margin-top: 0.5rem;
}
.join-thanks {
  text-align: center;
  padding: 2.5rem 1rem;
}
.join-thanks-icon {
  font-size: 2rem;
  color: var(--green);
  margin-bottom: 0.6rem;
}
.join-thanks-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.join-thanks-body {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.6;
  max-width: 420px;
  margin: 0 auto;
}
.join-thanks a { color: var(--green); font-weight: 600; }

.signup-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.signup-sub {
  font-size: 1rem;
  color: var(--text-light);
  margin-bottom: 2rem;
  line-height: 1.6;
}
.signup-form { display: flex; flex-direction: column; gap: 1.25rem; }
.signup-field { display: flex; flex-direction: column; gap: 0.4rem; }
.signup-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  opacity: 0.7;
}
.signup-input {
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: inherit;
  background: white;
  color: var(--navy);
  transition: border-color 0.15s;
}
.signup-input:focus { outline: none; border-color: var(--green); }
.signup-type-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}
.signup-type-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  padding: 1rem;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  background: white;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s;
}
.signup-type-btn.active {
  border-color: var(--green);
  background: rgba(141,184,138,0.08);
}
.signup-type-icon { font-size: 1.4rem; margin-bottom: 0.25rem; }
.signup-type-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
}
.signup-type-sub {
  font-size: 0.75rem;
  color: var(--text-light);
}
.signup-submit { margin-top: 0.5rem; padding: 0.85rem; font-size: 1rem; }
.signup-fine {
  text-align: center;
  font-size: 0.82rem;
  color: var(--text-light);
  margin-top: 0.25rem;
}
.signup-fine a { color: var(--green); text-decoration: none; }

/* ===== Pricing Screen ===== */
.pricing-launch-banner {
  background: linear-gradient(90deg, #2D4860, #5C8A57);
  color: white;
  text-align: center;
  padding: 0.9rem 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.pricing-launch-banner-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.pricing-launch-banner-btn {
  background: white;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  transition: transform 0.15s;
  white-space: nowrap;
}
.pricing-launch-banner-btn:hover { transform: translateY(-1px); }

.pricing-container {
  max-width: 1000px;
  padding: 0.75rem 1.5rem 4rem;
}
.pricing-header { text-align: center; margin-bottom: 0.75rem; }
.pricing-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.5rem;
}
.pricing-sub {
  font-size: 1rem;
  color: var(--text-light);
  line-height: 1.6;
}
.pricing-im-anim {
  display: flex;
  justify-content: center;
  margin: 0 auto 1.25rem;
  animation: pimFadeIn 0.6s ease both;
}
.pricing-im-wrap {
  display: flex;
  align-items: center;
  gap: 0;
}
/* Override KM reveal delays — no dot animation to wait for on pricing page */
.pricing-im-anim .landing-km-reveal .landing-im-circle-km {
  animation-delay: calc(0.3s + var(--km-delay, 0s)) !important;
}
.pricing-im-anim .landing-km-label {
  animation-delay: calc(0.3s + var(--km-delay, 0s)) !important;
}
.pricing-impact-model {
  max-width: 680px;
  margin: 0 auto 2.75rem;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 4px 32px rgba(45,72,96,0.10), 0 1px 4px rgba(45,72,96,0.06);
  padding: 1.75rem 2rem;
  animation: pimFadeIn 0.8s ease both;
}
@keyframes pimFadeIn {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pim-live-badge {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 1rem;
}
.pim-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 1.25rem;
}
.pim-org-icon {
  width: 28px;
  height: 28px;
  border-radius: 6px;
}
.pim-org-name {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
}
.pim-fields {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 540px) {
  .pim-fields { grid-template-columns: 1fr; }
}
.pim-field {
  background: var(--bg);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.pim-field-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.35rem;
}
.pim-field-value {
  font-size: 0.88rem;
  color: var(--navy);
  line-height: 1.55;
}
.pim-km-section { margin-bottom: 1.1rem; }
.pim-km-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.6rem;
}
.pim-km-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.pim-km-card {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(232,90,79,0.07);
  border: 1px solid rgba(232,90,79,0.18);
  border-radius: 20px;
  padding: 0.35rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
}
.pim-km-num {
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--coral);
  letter-spacing: 0.04em;
}
.pim-footer {
  font-size: 0.78rem;
  color: var(--text-light);
  text-align: right;
  font-style: italic;
  margin-top: 0.25rem;
}
.pricing-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.pricing-card {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 18px;
  padding: 1.75rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  position: relative;
}
.pricing-card-featured {
  border-color: var(--green);
  box-shadow: 0 6px 28px rgba(141,184,138,0.18);
}
.pricing-card-suggested {
  border-color: var(--green);
  box-shadow: 0 6px 28px rgba(141,184,138,0.18);
}
.pricing-featured-tag {
  position: absolute;
  top: -12px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--green);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.25rem 0.85rem;
  border-radius: 20px;
}
.pricing-tier-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.pricing-price {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.8rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin: 0.25rem 0;
}
.price-anchor {
  font-size: 1.4rem;
  font-weight: 400;
  color: var(--text-light);
  text-decoration: line-through;
  margin-right: 0.2rem;
  opacity: 0.6;
}
.price-anchor-sm {
  font-size: 0.75rem;
  color: var(--text-light);
  text-decoration: line-through;
  opacity: 0.55;
  margin-right: 0.15rem;
}
.pricing-per {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--text-light);
}
.pricing-trial {
  font-size: 0.8rem;
  color: var(--green);
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  min-height: 1.2em;
}
.pricing-intelligence-line {
  text-align: center;
  font-size: 1.15rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  color: var(--navy);
  letter-spacing: -0.01em;
  margin: 0 auto 1.5rem;
  max-width: 520px;
}
.pricing-who {
  font-size: 0.875rem;
  color: var(--text-light);
  line-height: 1.5;
  margin: 0 0 0.5rem;
}
.pricing-clarifier {
  font-size: 0.78rem;
  color: var(--green);
  line-height: 1.5;
  margin: 0 0 0.75rem;
  font-style: italic;
}
.pricing-features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.pricing-features li {
  font-size: 0.85rem;
  color: var(--navy);
  padding-left: 1.4rem;
  position: relative;
  line-height: 1.4;
}
.feat-yes::before {
  content: '✓';
  position: absolute;
  left: 0;
  color: var(--green);
  font-weight: 700;
}
.feat-new {
  color: var(--navy, #2D4860);
}
.feat-new::before {
  color: var(--coral, #e8533f) !important;
}
.feat-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  padding-left: 1.4rem;
  margin-top: -0.25rem;
  margin-bottom: 0.25rem;
  line-height: 1.4;
}
.feat-sub::before {
  content: '';
}
.feat-no {
  opacity: 0.35;
}
.feat-no::before {
  content: '–';
  position: absolute;
  left: 0;
  color: var(--text-light);
}
.pricing-cta { width: 100%; }
.pricing-skip {
  text-align: center;
  margin-top: 1.75rem;
  font-size: 0.875rem;
}
.pricing-skip a { color: var(--text-light); text-decoration: none; }
.pricing-skip a:hover { color: var(--green); }
@media (max-width: 768px) {
  .pricing-cards { grid-template-columns: 1fr; }
  .signup-type-toggle { grid-template-columns: 1fr; }
}

.landing-signin-link {
  position: absolute;
  top: 1.25rem;
  left: 2rem;
  z-index: 10;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--coral);
  text-decoration: none;
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
  animation-delay: 2.4s;
}
.landing-signin-link:hover { text-decoration: underline; }

.landing-hero-fabs {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  align-items: center;
  z-index: 10;
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
  animation-delay: 2.4s;
}
.landing-hero-fabs .landing-help-link {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid rgba(45, 72, 96, 0.1);
  background: white;
  color: var(--navy, #2d4860);
  font-size: 1.05rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 14px rgba(45, 72, 96, 0.2);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
}
.landing-hero-fabs .landing-help-link:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(45, 72, 96, 0.3);
  background: var(--cream, #fafbf7);
}
@media (max-width: 720px) {
  .landing-hero-fabs {
    bottom: 1rem;
    right: 1rem;
  }
}

.landing-howitworks-link {
  position: absolute;
  top: 1.25rem;
  right: 2rem;
  z-index: 10;
  font-family: var(--font-body);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--blue);
  text-decoration: none;
  opacity: 0;
  animation: fadeIn 0.6s ease forwards;
  animation-delay: 2.4s;
  transition: color 0.2s;
}
.landing-howitworks-link:hover { color: var(--blue-light); text-decoration: underline; }

/* ===== Demo Page ===== */
.demo-page-container {
  max-width: 820px;
  padding: 3rem 1.5rem 4rem;
  text-align: center;
}
.demo-page-headline {
  font-family: var(--font-display);
  font-size: 2.2rem;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.demo-page-sub {
  font-size: 1rem;
  color: var(--text-light);
  margin-bottom: 2.5rem;
  line-height: 1.6;
}
.demo-page-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.5rem;
}
@media (max-width: 600px) {
  .demo-page-cards { grid-template-columns: 1fr; }
}
.demo-page-card {
  background: white;
  border-radius: 16px;
  padding: 1.4rem 1.25rem;
  box-shadow: 0 2px 16px var(--shadow);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.demo-page-card-featured {
  border: 2px solid var(--green);
}
.demo-page-card-icon {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.1rem;
}
.demo-page-card h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--navy);
  margin: 0;
}
.demo-page-card p {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.6;
  margin: 0;
}
.demo-coming-soon {
  background: var(--cream);
  border-radius: 8px;
  padding: 0.6rem 1.25rem;
  font-size: 0.82rem;
  color: var(--text-light);
  font-style: italic;
}
.demo-start-btn { width: 100%; }
.demo-card-note {
  font-size: 0.78rem !important;
  color: #aaa !important;
}

.demo-signup-bar {
  margin-top: 2rem;
  background: var(--blue);
  border-radius: 12px;
  padding: 1rem 1.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}
.demo-signup-bar span {
  font-size: 0.95rem;
  color: white;
  font-weight: 500;
}
.demo-signup-bar-btn {
  background: white;
  color: var(--navy);
  font-weight: 700;
  font-size: 0.9rem;
  padding: 0.6rem 1.4rem;
  border-radius: 8px;
  text-decoration: none;
  transition: opacity 0.2s;
}
.demo-signup-bar-btn:hover { opacity: 0.85; }

/* Kate persona profile */
.kate-profile-container {
  max-width: 900px;
  padding: 0.6rem 0 0.6rem;
}

.kate-profile-header {
  display: flex;
  align-items: flex-start;
  gap: 1.6rem;
  text-align: left;
  padding: 0.4rem 2rem 0.6rem;
  margin-bottom: 0;
  border-bottom: 0;
  position: relative;
}
.kate-profile-photo { flex-shrink: 0; }
.kate-photo-link {
  display: block;
  position: relative;
  text-decoration: none;
}
.kate-photo-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid white;
  box-shadow: 0 2px 12px var(--shadow);
  transition: opacity 0.2s;
  display: block;
}
.kate-photo-link:hover .kate-photo-img { opacity: 0.85; }
.kate-photo-hint {
  position: absolute;
  bottom: -22px;
  left: 50%;
  transform: translateX(-50%);
  font-size: 0.7rem;
  color: var(--green);
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 0.2s;
}
.kate-photo-link:hover .kate-photo-hint { opacity: 1; }
.kate-name-link {
  color: inherit;
  text-decoration: none;
}
.kate-name-link:hover { color: var(--green); }
.kate-profile-intro { flex: 1; }
.kate-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.2rem;
  line-height: 1.1;
}
.kate-tagline {
  font-size: 0.82rem;
  color: var(--green);
  margin: 0 0 0.35rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  outline: none;
  border-bottom: 1px dashed transparent;
  transition: border-color 0.2s;
}
/* Tagline (mission quote) sits TIGHT under the role tags. */
.kate-statement { margin-top: 0; }

/* Add Org modal — focused org-only form (not first-time onboarding) */
.add-org-modal-content {
  max-width: 560px;
  padding: 1.6rem 1.8rem;
}
.add-org-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--coral, #c98274);
  margin-bottom: 0.3rem;
  text-transform: uppercase;
}
.add-org-form { margin-top: 0.8rem; }
.add-org-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.add-org-hint {
  font-size: 0.74rem;
  color: var(--text-light);
  font-style: italic;
  font-weight: 400;
  letter-spacing: 0;
}
.add-org-input {
  width: 100%;
  background: rgba(255,253,247,0.92);
  border: 1px solid rgba(45,72,96,0.14);
  border-radius: 10px;
  padding: 0.6rem 0.85rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--navy);
  outline: none;
  resize: vertical;
}
.add-org-input:focus {
  border-color: var(--coral, #e8a898);
  background: #fff;
}
.add-org-type-row,
.add-org-admin-mode-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.add-org-type-btn,
.add-org-admin-mode-btn {
  background: rgba(255,253,247,0.92);
  border: 1.5px solid rgba(45,72,96,0.14);
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.add-org-type-btn:hover,
.add-org-admin-mode-btn:hover {
  border-color: var(--coral, #e8a898);
  transform: translateY(-1px);
}
.add-org-type-btn.is-active,
.add-org-admin-mode-btn.is-active {
  background: rgba(232,168,152,0.16);
  border-color: var(--coral, #e8a898);
  box-shadow: 0 0 0 1px rgba(232,168,152,0.40) inset;
}

/* Connect my phone — Account section card */
#connect-phone-section .connect-phone-status {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: var(--text-light);
  padding: 0.8rem 0;
}
.connect-phone-card {
  background: rgba(255,253,247,0.85);
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 14px;
  padding: 1.2rem 1.3rem;
  margin-top: 0.6rem;
}
.connect-phone-steps {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.connect-phone-step {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
}
.connect-phone-step-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--coral, #e8a898);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 800;
  flex-shrink: 0;
}
.connect-phone-step-body { flex: 1; min-width: 0; }
.connect-phone-step-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.connect-phone-step-detail {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.55;
  margin-bottom: 0.5rem;
}
.connect-phone-install-btn {
  display: inline-block;
  background: var(--green, #7c9e7c);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.connect-phone-install-btn:hover {
  background: #6a8c6a;
  transform: translateY(-1px);
}
.connect-phone-step-missing {
  font-size: 0.82rem;
  color: var(--text-light);
  font-style: italic;
  padding: 0.5rem 0.75rem;
  background: rgba(232,168,152,0.10);
  border-radius: 8px;
}
.connect-phone-key-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.connect-phone-key {
  flex: 1;
  background: #fff;
  border: 1.5px solid rgba(45,72,96,0.18);
  border-radius: 8px;
  padding: 0.55rem 0.8rem;
  font-family: 'Menlo', 'Consolas', monospace;
  font-size: 0.9rem;
  color: var(--navy);
  letter-spacing: 0.04em;
  word-break: break-all;
}
.connect-phone-copy-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 0.95rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.connect-phone-copy-btn:hover {
  background: #1f3548;
  transform: translateY(-1px);
}
.kate-tagline:focus { border-bottom-color: rgba(141,184,138,0.5); }
.kate-tagline:empty::before {
  content: attr(data-placeholder);
  color: rgba(141,184,138,0.45);
  pointer-events: none;
}
.personal-share-btn {
  margin-top: 0.75rem;
  background: none;
  border: 1.5px solid var(--green);
  color: var(--green);
  border-radius: 20px;
  padding: 0.35rem 1rem;
  font-size: 0.8rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.03em;
  transition: background 0.15s, color 0.15s;
}
.personal-share-btn:hover { background: var(--green); color: #fff; }
.nav-brand-text-wrap {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.nav-welcome {
  font-size: 0.72rem;
  color: var(--navy);
  opacity: 0.55;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
  white-space: nowrap;
}
.kate-statement {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--navy);
  opacity: 0.7;
  line-height: 1.65;
  margin: 0;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.kate-statement:hover {
  opacity: 0.95;
}
.kate-statement-empty {
  opacity: 0.45;
  color: rgba(45, 72, 96, 0.7);
}
.kate-statement-empty:hover {
  opacity: 0.75;
  color: var(--coral, #c47e6c);
}

.kate-section-label {
  font-size: 0.95rem;
  color: var(--text-light);
  text-align: center;
  margin: 2.5rem auto 1.75rem;
  max-width: 520px;
  line-height: 1.6;
  padding: 0 1.5rem;
}

.kate-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin: 2rem auto;
  padding: 0 1.5rem;
  max-width: 1100px;
  align-items: stretch;
}
@media (max-width: 900px) {
  .kate-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.kate-add-org-inline {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 1.5rem 0.5rem;
  opacity: 0.55;
  transition: opacity 0.2s;
  align-self: center;
}
.kate-add-org-inline:hover { opacity: 1; }
.kao-plus {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-size: 1.4rem;
  line-height: 32px;
  text-align: center;
  display: block;
}
.kao-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--green);
  text-transform: lowercase;
  letter-spacing: 0.04em;
}
@media (max-width: 560px) {
  .kate-cards { grid-template-columns: 1fr; }
  .kate-card { width: 100%; max-width: 100%; }
  .kate-profile-header { flex-direction: column; align-items: center; text-align: center; }
}
.kate-card {
  width: 100%;
  max-width: 100%;
  background: white;
  border-radius: 14px;
  padding: 0;
  box-shadow: 0 2px 14px var(--shadow);
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  border: 1px solid var(--border);
  overflow: hidden;
  transition: transform 0.15s, box-shadow 0.2s;
}
.kate-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 28px var(--shadow);
}

/* Colored top strip — matches app's key move color bars */
.kate-card::before {
  content: '';
  display: block;
  width: 100%;
  height: 4px;
  background: var(--kate-card-color, var(--green));
  flex-shrink: 0;
}
.kate-card:nth-child(1) { --kate-card-color: var(--navy); }
.kate-card:nth-child(2) { --kate-card-color: var(--green); }
.kate-card:nth-child(3) { --kate-card-color: var(--coral); }

.kate-card { position: relative; }

.kate-card-delete {
  position: absolute;
  top: 10px;
  right: 10px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.92);
  color: #999;
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, border-color 0.15s, background 0.15s;
  z-index: 2;
}
.kate-card:hover .kate-card-delete { opacity: 1; }
.kate-card-delete:hover {
  color: var(--coral);
  border-color: var(--coral);
  background: white;
}

.kate-card-inner {
  padding: 1.25rem 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  flex: 1;
  width: 100%;
}
.kate-card-badge {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--kate-card-color, var(--green));
  margin-bottom: 0.1rem;
}
.kate-card:nth-child(1) .kate-card-badge { color: var(--navy); }
.kate-card:nth-child(2) .kate-card-badge { color: var(--green); }
.kate-card:nth-child(3) .kate-card-badge { color: var(--coral); }

.kate-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
  flex-shrink: 0;
}
.kate-card-org {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  line-height: 1.2;
}
.kate-card-role {
  font-size: 0.8rem;
  color: var(--text-light);
  margin: 0;
  font-weight: 500;
}
.kate-card-desc {
  font-size: 0.86rem;
  color: #555;
  line-height: 1.65;
  margin: 0.35rem 0 0.75rem;
  flex: 1;
}
.kate-card-btn {
  margin-top: auto;
  font-size: 0.84rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  color: var(--kate-card-color, var(--green));
  padding: 0.4rem 0 0;
  display: flex;
  align-items: center;
  gap: 0.25rem;
  transition: gap 0.15s;
}
.kate-card:hover .kate-card-btn {
  gap: 0.5rem;
}
.kate-card:nth-child(1) .kate-card-btn { color: var(--navy); }
.kate-card:nth-child(2) .kate-card-btn { color: var(--green); }
.kate-card:nth-child(3) .kate-card-btn { color: var(--coral); }
.kate-footer-note {
  text-align: center;
  font-size: 0.9rem;
  color: var(--text-light);
  font-style: italic;
  line-height: 1.65;
  max-width: 540px;
  margin: 0 auto;
  padding: 0 1.5rem;
}

/* Kate feature spotlight pills */
.kate-spotlight-section {
  margin: 2rem 0 1.75rem;
  text-align: center;
}
.kate-spotlight-label {
  font-size: 0.82rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-bottom: 0.9rem;
}
.kate-spotlight-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  justify-content: center;
}
.kate-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 99px;
  padding: 0.45rem 1rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.15s;
  font-family: var(--font-body);
}
.kate-pill:hover {
  border-color: var(--green);
  box-shadow: 0 2px 10px var(--shadow);
  transform: translateY(-1px);
}
.kate-pill-spark {
  color: var(--coral);
  font-size: 0.95rem;
}

/* Spotlight overlay */
.spotlight-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20,30,48,0.45);
  z-index: 300;
  backdrop-filter: blur(2px);
}
.spotlight-overlay.hidden { display: none; }

/* Spotlight panel */
.spotlight-panel {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 680px;
  max-height: 82vh;
  background: white;
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -8px 40px rgba(0,0,0,0.18);
  z-index: 400;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.spotlight-panel.hidden { display: none; }

.spotlight-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.4rem 1.5rem 0.9rem;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.spotlight-title {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--navy);
  margin: 0 0 0.2rem;
}
.spotlight-sub {
  font-size: 0.88rem;
  color: var(--text-light);
  margin: 0;
  line-height: 1.5;
}
.spotlight-close {
  background: var(--cream);
  border: none;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 0.85rem;
  cursor: pointer;
  color: var(--text-light);
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.spotlight-close:hover { background: var(--border); }

.spotlight-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.spotlight-footer {
  padding: 0.85rem 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 0.82rem;
  color: var(--text-light);
  font-style: italic;
  text-align: center;
  flex-shrink: 0;
}

/* Stories spotlight */
.sp-story-card {
  display: flex;
  gap: 1rem;
  padding: 1rem;
  background: var(--cream);
  border-radius: 12px;
}
.sp-story-photo {
  width: 68px;
  height: 68px;
  border-radius: 10px;
  object-fit: cover;
  flex-shrink: 0;
}
.sp-story-content { flex: 1; min-width: 0; }
.sp-story-meta {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin-bottom: 0.25rem;
}
.sp-story-date {
  font-size: 0.75rem;
  color: var(--text-light);
}
.sp-story-tag {
  font-size: 0.72rem;
  background: var(--navy);
  color: white;
  border-radius: 99px;
  padding: 0.15rem 0.6rem;
  font-weight: 600;
}
.sp-story-title {
  font-family: var(--font-display);
  font-size: 1rem;
  color: var(--navy);
  margin: 0 0 0.3rem;
}
.sp-story-excerpt {
  font-size: 0.82rem;
  color: var(--text-mid, #555);
  line-height: 1.6;
  margin: 0;
}

/* Key Moves spotlight */
.sp-km-body { gap: 0.5rem; }
.sp-km-context {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--text-light);
  margin: 0 0 0.5rem;
}
.sp-km-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.65rem;
}
@media (max-width: 480px) { .sp-km-grid { grid-template-columns: 1fr; } }
.sp-km-card {
  background: white;
  border: 1.5px solid var(--border);
  border-left: 3px solid var(--km-color, var(--navy));
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.sp-km-num {
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.05em;
  color: var(--km-color, var(--navy));
  opacity: 0.5;
  margin-bottom: 0.2rem;
}
.sp-km-card h4 {
  font-family: var(--font-display);
  font-size: 0.95rem;
  color: var(--navy);
  margin: 0 0 0.25rem;
  line-height: 1.3;
}
.sp-km-card p {
  font-size: 0.8rem;
  color: var(--text-light);
  margin: 0;
  line-height: 1.55;
}

/* Digest spotlight */
.sp-digest-body { padding: 1rem 1.5rem; }
.sp-digest-preview {
  background: var(--cream);
  border-radius: 14px;
  padding: 1.25rem;
}
.sp-digest-week {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-light);
  margin-bottom: 0.2rem;
}
.sp-digest-org {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--navy);
  margin: 0 0 1rem;
}
.sp-digest-arc {
  background: white;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  margin-bottom: 1rem;
}
.sp-digest-arc-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-light);
  margin: 0 0 0.4rem;
}
.sp-digest-arc-text {
  font-size: 0.88rem;
  color: var(--navy);
  line-height: 1.65;
  margin: 0;
}
.sp-digest-highlights { display: flex; flex-direction: column; gap: 0.7rem; }
.sp-digest-item {
  display: flex;
  gap: 0.75rem;
  align-items: flex-start;
}
.sp-digest-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 0.35rem;
}
.sp-digest-item-label {
  display: block;
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-light);
  margin-bottom: 0.15rem;
}
.sp-digest-item-val {
  display: block;
  font-size: 0.85rem;
  color: var(--navy);
  line-height: 1.55;
}

/* AI Generate spotlight */
.sp-gen-body { gap: 0.75rem; }
.sp-gen-tabs {
  display: flex;
  gap: 0.4rem;
  background: var(--cream);
  border-radius: 10px;
  padding: 0.3rem;
  flex-shrink: 0;
}
.sp-gen-tab {
  flex: 1;
  padding: 0.45rem 0.5rem;
  border-radius: 7px;
  border: none;
  background: transparent;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  font-family: var(--font-body);
  transition: background 0.15s, color 0.15s;
}
.sp-gen-tab.active {
  background: white;
  color: var(--navy);
  box-shadow: 0 1px 4px var(--shadow);
}
.sp-gen-output { flex: 1; }
.sp-gen-output.hidden { display: none; }
.sp-gen-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--text-light);
  margin: 0 0 0.75rem;
}
.sp-gen-text {
  background: var(--cream);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.sp-gen-text p {
  font-size: 0.9rem;
  color: var(--navy);
  line-height: 1.7;
  margin: 0;
}

/* Pattern Spotter spotlight */
.sp-pattern-body { gap: 1rem; }
.sp-pattern-card {
  background: var(--cream);
  border-radius: 14px;
  padding: 1.25rem;
}
.sp-pattern-card-secondary {
  background: white;
  border: 1.5px solid var(--border);
}
.sp-pattern-spark {
  font-size: 1.3rem;
  color: var(--green);
  margin-bottom: 0.3rem;
}
.sp-pattern-headline {
  font-family: var(--font-display);
  font-size: 1.25rem;
  color: var(--navy);
  margin: 0 0 0.25rem;
}
.sp-pattern-sub {
  font-size: 0.85rem;
  color: var(--text-light);
  margin: 0 0 1rem;
}
.sp-pattern-insight {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.sp-pattern-insight p {
  font-size: 0.9rem;
  color: var(--navy);
  line-height: 1.7;
  margin: 0;
}
.sp-pattern-tag {
  display: inline-block;
  background: rgba(141,184,138,0.15);
  color: var(--green);
  font-size: 0.78rem;
  font-weight: 700;
  padding: 0.3rem 0.85rem;
  border-radius: 99px;
}

/* Demo persona bar — shown when browsing inside a demo org */
.demo-persona-bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 200;
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  padding: 0.55rem 1.25rem;
  font-size: 0.85rem;
  flex-wrap: wrap;
}
.demo-persona-bar.hidden { display: none; }

/* Push sticky nav below the demo bar when it's visible */
body.demo-bar-active .top-nav-wrap {
  top: 40px;
}
body.demo-mode #ha-companion-card-personal {
  display: none;
}
.demo-persona-bar-label { opacity: 0.75; }
.demo-persona-bar-link {
  color: var(--coral, #E8A898);
  font-weight: 600;
  text-decoration: none;
}
.demo-persona-bar-link:hover { text-decoration: underline; }

/* Overview video modal */
.overview-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.overview-modal-panel {
  background: white;
  border-radius: 16px;
  padding: 2.5rem 2rem;
  max-width: 420px;
  width: 90%;
  position: relative;
  text-align: center;
}
.overview-modal-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--text-light);
  cursor: pointer;
  line-height: 1;
}
.overview-modal-icon {
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--navy);
  color: white;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 1.25rem;
  padding-left: 4px;
}
.overview-modal-soon h2 {
  font-family: var(--font-display);
  font-size: 1.4rem;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.overview-modal-soon p {
  font-size: 0.9rem;
  color: var(--text-light);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

/* ===== Demo / Platform Overview Card ===== */
.demo-card {
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  background: var(--navy);
  border-radius: 18px;
  padding: 2rem 2rem 2rem 1.75rem;
  margin-bottom: 2.5rem;
  color: white;
}
.demo-play-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-size: 1.4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding-left: 4px;
}
.demo-card-body { flex: 1; }
.demo-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.4rem;
}
.demo-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: white;
  margin: 0 0 0.6rem;
}
.demo-desc {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.75);
  line-height: 1.6;
  margin-bottom: 1.1rem;
}
.demo-email-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.demo-email-input {
  flex: 1;
  border: 1.5px solid rgba(255,255,255,0.25);
  border-radius: 10px;
  padding: 0.6rem 0.9rem;
  font-size: 0.9rem;
  font-family: inherit;
  background: rgba(255,255,255,0.1);
  color: white;
}
.demo-email-input::placeholder { color: rgba(255,255,255,0.4); }
.demo-email-input:focus { outline: none; border-color: var(--green); }
.demo-email-btn { white-space: nowrap; }
.demo-confirm {
  font-size: 0.875rem;
  color: var(--green);
  font-weight: 600;
  margin-top: 0.5rem;
}

/* ===== Beta Tier Badges ===== */
.beta-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(141,184,138,0.12);
  color: var(--green);
  border: 1px solid rgba(141,184,138,0.35);
  border-radius: 20px;
  padding: 0.2rem 0.55rem;
  vertical-align: middle;
  white-space: nowrap;
}
.beta-badge::before {
  content: '✦';
  font-size: 0.55rem;
}
/* Inline next to section headers */
.beta-badge-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  flex-wrap: wrap;
}

/* ===== Landing Path Cards ===== */
.hero-path-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  max-width: 520px;
  margin: 0 auto;
}
.hero-path-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.4rem;
  background: white;
  border: 1.5px solid rgba(45,72,96,0.15);
  border-radius: 14px;
  padding: 1.2rem 1.1rem 1rem;
  cursor: pointer;
  text-align: left;
  transition: background 0.18s, border-color 0.18s, transform 0.15s, box-shadow 0.18s;
  box-shadow: 0 2px 10px rgba(45,72,96,0.07);
}
.hero-path-card:hover {
  border-color: var(--green);
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45,72,96,0.12);
}
.hero-path-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.25rem;
}
.hero-path-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}
.hero-path-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  color: var(--text-light);
  line-height: 1.4;
}
.hero-path-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: var(--green);
  line-height: 1.4;
  margin-top: 0.25rem;
}
@media (max-width: 500px) {
  .hero-path-cards { grid-template-columns: 1fr; }
}

/* ===== Signup Path Badge ===== */
.signup-path-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(141,184,138,0.1);
  border: 1px solid rgba(141,184,138,0.3);
  border-radius: 20px;
  padding: 0.25rem 0.7rem;
  margin-bottom: 0.75rem;
}
.signup-path-badge:empty { display: none; }

/* ===== Signup Team Size Selector ===== */
.signup-team-size {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0.6rem;
  margin-top: 0.25rem;
}
.signup-size-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  padding: 0.75rem 0.5rem;
  border: 1.5px solid rgba(45,72,96,0.2);
  border-radius: 10px;
  background: white;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.signup-size-btn.active {
  border-color: var(--green);
  background: rgba(141,184,138,0.08);
}
.signup-size-num {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 700;
  color: var(--navy);
}
.signup-size-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: var(--text-light);
}
.signup-size-note {
  font-size: 0.8rem;
  color: var(--text-light);
  margin-top: 0.5rem;
  line-height: 1.5;
}

/* ===== Pricing Screen — Rebuilt ===== */
.pricing-beta-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: rgba(141,184,138,0.12);
  color: var(--green);
  border: 1px solid rgba(141,184,138,0.3);
  border-radius: 20px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.3rem 0.8rem;
  margin-bottom: 1rem;
}
/* Top-level Solo / Team framing — two button columns side by side. The
   one that's "active" reads in solid navy; the other reads dimmer. Acts
   as the primary picker; the focused card below follows. */
.pricing-frames {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2.5rem;
  max-width: 1100px;
  margin: 0.5rem auto 1.25rem;
  padding: 0 1.5rem;
}
.pricing-frame-col {
  background: transparent;
  border: none;
  padding: 0.75rem 0.5rem;
  text-align: center;
  cursor: pointer;
  color: rgba(45, 72, 96, 0.45);
  transition: color 0.18s ease, transform 0.18s ease;
  font-family: inherit;
}
.pricing-frame-col:hover { color: rgba(45, 72, 96, 0.8); transform: translateY(-1px); }
.pricing-frame-col.active { color: var(--navy, #2d4860); }
.pricing-frame-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 52px;
  margin-bottom: 0.6rem;
  color: inherit;
}
.pricing-frame-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: inherit;
  margin: 0 0 0.5rem;
  letter-spacing: 0.005em;
}
.pricing-frame-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  line-height: 1.55;
  color: inherit;
  opacity: 0.78;
  margin: 0;
}
@media (max-width: 720px) {
  .pricing-frames { grid-template-columns: 1fr; gap: 1.5rem; }
}

/* Nonprofit / Business sub-toggle inside the focused card. Sits right
   under the card name and above the Core/Ignite/Enterprise tier row.
   Soft pill, same family as the existing tier pill row. */
.pricing-orgtype-toggle {
  display: inline-flex;
  background: rgba(45, 72, 96, 0.05);
  border-radius: 999px;
  padding: 4px;
  margin: 0.5rem auto 1rem;
  gap: 0;
}
.pricing-orgtype-toggle.hidden { display: none; }
.pricing-orgtype-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--navy, #2d4860);
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.18s ease;
}
.pricing-orgtype-btn:hover { opacity: 0.85; }
.pricing-orgtype-btn.active {
  background: var(--navy, #2d4860);
  color: #ffffff;
  opacity: 1;
  box-shadow: 0 1px 4px rgba(45, 72, 96, 0.18);
}

.pricing-cards-new {
  display: flex;
  justify-content: center;
  max-width: 860px;
  margin: 0 auto 1.5rem;
}
.pricing-interval-toggle {
  display: inline-flex;
  background: rgba(45,72,96,0.08);
  padding: 4px;
  border-radius: 999px;
  margin: 0 auto 1.5rem;
  gap: 0;
  font-family: 'Montserrat', sans-serif;
}
/* In-card variant: smaller, centered under the focus-name, tighter margins */
.pricing-interval-toggle.pricing-interval-incard {
  display: flex;
  width: fit-content;
  margin: 0 auto 0.8rem;
  padding: 3px;
  background: rgba(45,72,96,0.06);
}
.pricing-interval-incard .pricing-interval-btn {
  font-size: 0.78rem;
  padding: 0.4rem 0.95rem;
}

/* 3-pill category toggle: Personal / Nonprofit / Business.
   Top-level decision pill, sits above the monthly/annual toggle. */
.pricing-category-toggle {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  background: rgba(45,72,96,0.06);
  padding: 5px;
  border-radius: 999px;
  margin: 0.5rem auto 1rem;
  max-width: 480px;
  font-family: 'Montserrat', sans-serif;
}
.pricing-cat-btn {
  flex: 1;
  border: none;
  background: transparent;
  padding: 0.65rem 1.1rem;
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(45,72,96,0.65);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.pricing-cat-btn:hover { color: var(--navy, #2d4860); }
.pricing-cat-btn.active {
  background: var(--navy, #2d4860);
  color: #fff;
  box-shadow: 0 2px 6px rgba(45,72,96,0.20);
}

/* The single focused card that swaps content based on the active category */
.pricing-card-focused {
  /* Accent color drives the top stripe + soft tint behind the headline.
     Defaults to green (Team); .pricing-focused-personal overrides to coral. */
  --pcf-accent: var(--green, #8DB88A);
  --pcf-accent-soft: rgba(141, 184, 138, 0.10);
  background: #fff;
  border: 1px solid rgba(45,72,96,0.12);
  border-radius: 18px;
  padding: 0 2.25rem 2rem;
  max-width: 540px;
  margin: 0 auto;
  box-shadow: 0 12px 36px rgba(45,72,96,0.12);
  position: relative;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
}
.pricing-card-focused::before {
  content: '';
  display: block;
  height: 5px;
  margin: 0 -2.25rem 1.4rem;
  background: var(--pcf-accent);
}
.pricing-card-focused.pricing-focused-personal {
  --pcf-accent: var(--coral, #E8A898);
  --pcf-accent-soft: rgba(232, 168, 152, 0.12);
  border-color: rgba(232,168,152,0.45);
}
.pricing-focus-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  margin: 0 -2.25rem 1rem;
  padding: 0.55rem 2.25rem 0.7rem;
  background: var(--pcf-accent-soft);
  border-bottom: 1px solid var(--pcf-accent);
  text-align: center;
}

/* Tier selector — only relevant for Nonprofit / Business. Hidden in Personal. */
.pricing-tier-selector {
  display: flex;
  flex-direction: column;
  gap: 0;
  border-top: 1px solid rgba(45,72,96,0.10);
  border-bottom: 1px solid rgba(45,72,96,0.10);
  margin: 0.5rem 0 1.1rem;
}
.pricing-tier-selector.hidden { display: none; }
.pricing-tier-btn {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: baseline;
  gap: 0.5rem;
  background: transparent;
  border: none;
  padding: 0.7rem 0.3rem;
  border-bottom: 1px solid rgba(45,72,96,0.08);
  cursor: pointer;
  font-family: inherit;
  text-align: left;
  transition: background 0.15s;
}
.pricing-tier-btn:last-child { border-bottom: none; }
.pricing-tier-btn:hover { background: rgba(45,72,96,0.03); }
.pricing-tier-label {
  font-size: 0.92rem;
  font-weight: 700;
  color: rgba(45,72,96,0.50);
  letter-spacing: 0.02em;
}
.pricing-tier-detail {
  font-size: 0.78rem;
  color: rgba(45,72,96,0.50);
}
.pricing-tier-price {
  font-size: 0.85rem;
  font-weight: 700;
  color: rgba(45,72,96,0.50);
}
.pricing-tier-btn.active .pricing-tier-label,
.pricing-tier-btn.active .pricing-tier-detail,
.pricing-tier-btn.active .pricing-tier-price {
  color: var(--navy, #2d4860);
}
.pricing-tier-btn.active { background: rgba(45,72,96,0.04); }
.pricing-cards-new + .pricing-interval-toggle,
.pricing-intelligence-line + .pricing-interval-toggle {
  display: flex;
  width: max-content;
}
.pricing-section .pricing-interval-toggle { display: flex; width: max-content; margin-left: auto; margin-right: auto; }
.pricing-interval-btn {
  border: none;
  background: transparent;
  padding: 8px 22px;
  border-radius: 999px;
  font-weight: 700;
  font-size: 0.88rem;
  color: #2D4860;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.pricing-interval-btn.active {
  background: #2D4860;
  color: white;
  box-shadow: 0 2px 6px rgba(45,72,96,0.18);
}
.pricing-interval-discount {
  font-size: 0.72rem;
  font-weight: 700;
  margin-left: 0.4rem;
  opacity: 0.85;
}
.pricing-savings-line {
  font-size: 0.82rem;
  font-weight: 600;
  color: #1a6b3a;
  margin-top: 0.25rem;
  min-height: 1.2em;
  font-family: 'Montserrat', sans-serif;
}
.pricing-savings-line-light {
  color: #b8d9c2;
}
.pricing-cards-new.personal-only {
  grid-template-columns: minmax(0, 480px);
  max-width: 480px;
  justify-content: center;
}
.pricing-cards-new .pricing-card-new {
  display: flex;
  flex-direction: column;
}
.pricing-select-btn {
  display: block;
  width: 100%;
  padding: 0.75rem 1rem;
  background: var(--navy, #2D4860);
  color: white;
  border: none;
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  margin-top: auto;
  transition: background 0.2s;
}
.pricing-select-btn:hover { background: var(--coral, #e8533f); }
.pricing-select-btn-light {
  background: var(--green);
  border: 1.5px solid var(--green);
  color: white;
}
.pricing-select-btn-light:hover { background: #5c8c7a; border-color: #5c8c7a; }
.pricing-card-new {
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  position: relative;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.pricing-card-new:hover {
  border-color: var(--green);
  box-shadow: 0 8px 32px rgba(141,184,138,0.2);
  transform: translateY(-2px);
}
.pricing-card-new-featured {
  border-color: var(--green);
  box-shadow: 0 8px 32px rgba(141,184,138,0.18);
  position: relative;
}
.pricing-founding-badge {
  display: block;
  text-align: center;
  font-size: 0.7rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.03em;
  color: var(--green);
  background: transparent;
  border: 1px solid rgba(147,184,143,0.5);
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
  margin: 0 auto 0.5rem;
  width: fit-content;
}
.pricing-founding-badge-light {
  color: rgba(147,184,143,0.9);
  background: transparent;
  border-color: rgba(147,184,143,0.4);
}
.pricing-cta-hint {
  text-align: center;
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: auto;
  padding-top: 0.25rem;
}
.pricing-cta-hint-light {
  color: rgba(255,255,255,0.6);
}
.pricing-team-nudge {
  display: block;
  text-align: center;
  font-size: 0.72rem;
  font-style: italic;
  color: var(--coral);
  margin-top: 0.5rem;
  text-decoration: none;
  opacity: 0.85;
  transition: opacity 0.15s;
}
.pricing-team-nudge:hover { opacity: 1; }
.pricing-team-nudge-light {
  color: rgba(255,255,255,0.7);
}
.pricing-team-nudge-light:hover { color: rgba(255,255,255,0.95); }
.pricing-team-num {
  font-size: 1.15rem;
  font-weight: 800;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  line-height: 1;
}
.pricing-tier-row:not(.active) .pricing-team-num {
  color: rgba(45,72,96,0.45);
}
.pricing-team-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: inherit;
}
.pricing-price-row {
  display: flex;
  align-items: baseline;
  gap: 0.2rem;
  justify-content: center;
}
/* Add-ons section on pricing card */
.pricing-addons {
  border-top: 1px solid rgba(255,255,255,0.15);
  padding-top: 0.85rem;
  margin: 0.75rem 0;
}
.pricing-addons-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 0.6rem;
}
.pricing-addon-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.35rem 0;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.pricing-addon-row:last-child { border-bottom: none; }
.pricing-addon-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: rgba(255,255,255,0.85);
}
.pricing-addon-price {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--green);
  white-space: nowrap;
}

/* Team size tier rows on pricing card */
.pricing-tiers {
  margin: 0.25rem 0 0.85rem;
  border-top: 1px solid rgba(255,255,255,0.15);
}
.pricing-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.5rem 0.25rem;
  border-bottom: 1px solid rgba(255,255,255,0.15);
  cursor: pointer;
  transition: opacity 0.15s;
  font-family: 'Montserrat', sans-serif;
  color: rgba(255,255,255,0.6);
}
.pricing-tier-size {
  font-size: 0.75rem;
  font-weight: 400;
}
.pricing-tier-amt {
  font-size: 0.78rem;
  font-weight: 600;
}
.pricing-tier-row.active {
  color: white;
  font-weight: 700;
}
.pricing-tier-row.active .pricing-tier-size,
.pricing-tier-row.active .pricing-tier-amt {
  font-weight: 700;
}
.pricing-tier-row:hover:not(.active) {
  color: rgba(255,255,255,0.85);
}
.pricing-personal-addons-hint {
  font-size: 0.72rem;
  color: rgba(45,72,96,0.55);
  font-style: italic;
  margin: 0.5rem 0 0.75rem;
  line-height: 1.5;
}

.pricing-after-line {
  font-size: 0.72rem;
  color: var(--text-muted);
  text-align: center;
  margin: -0.4rem 0 0.85rem;
  font-style: italic;
  line-height: 1.45;
  padding: 0 0.5rem;
}
.pricing-card-new-featured .pricing-after-line {
  color: rgba(255,255,255,0.65);
}

.pricing-tier-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
  text-align: center;
  padding: 0.5rem 0;
}

.pricing-org-toggle {
  display: flex;
  background: var(--cream);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
}
.pricing-org-btn {
  flex: 1;
  padding: 0.4rem 0.5rem;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.pricing-org-btn.active {
  background: white;
  color: var(--navy);
  box-shadow: 0 1px 4px rgba(45,72,96,0.12);
}

/* Secondary toggle on org card — Standard / Pro */
.pricing-edition-toggle {
  display: flex;
  background: rgba(45,72,96,0.06);
  border-radius: 10px;
  padding: 3px;
  gap: 3px;
  margin-top: 0.6rem;
}
.pricing-edition-btn {
  flex: 1;
  padding: 0.45rem 0.6rem;
  border: none;
  border-radius: 8px;
  background: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
}
.pricing-edition-btn.active {
  background: white;
  color: var(--navy);
  box-shadow: 0 1px 6px rgba(45,72,96,0.14);
}
.pricing-edition-pro-badge {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  color: var(--green);
  background: rgba(141,184,138,0.15);
  padding: 0.1rem 0.4rem;
  border-radius: 8px;
}
.pricing-edition-btn.active .pricing-edition-pro-badge {
  background: rgba(141,184,138,0.22);
}
.pricing-size-select {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.75rem;
  font-size: 0.82rem;
  font-family: inherit;
  color: var(--navy);
  background: var(--cream);
  cursor: pointer;
}
.pricing-size-select:focus { outline: none; border-color: var(--green); }
.pricing-enterprise-line {
  text-align: center;
  font-size: 0.875rem;
  color: var(--text-light);
  max-width: 760px;
  margin: 0 auto 0.75rem;
  padding: 1.25rem;
  border: 1.5px dashed var(--border);
  border-radius: 14px;
  line-height: 1.6;
}
.pricing-enterprise-line a {
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  margin-left: 0.25rem;
}
.pricing-enterprise-line a:hover { color: var(--green); }
@media (max-width: 600px) {
  .pricing-cards-new { grid-template-columns: 1fr; }
}

/* ===== Companion Guide Mode ===== */
.companion-btn {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  z-index: 901;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: 1.5px solid rgba(45,72,96,0.22);
  background: white;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.52rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: rgba(45,72,96,0.42);
  transition: all 0.2s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.07);
}
.companion-btn:hover {
  border-color: #8DB88A;
  color: #8DB88A;
  box-shadow: 0 3px 14px rgba(141,184,138,0.25);
}
.companion-btn.active {
  background: #8DB88A;
  border-color: #8DB88A;
  color: white;
  box-shadow: 0 3px 14px rgba(141,184,138,0.4);
}
@keyframes companion-nudge {
  0%, 100% { box-shadow: 0 2px 10px rgba(0,0,0,0.07); }
  50% { box-shadow: 0 0 0 8px rgba(141,184,138,0.22), 0 2px 10px rgba(0,0,0,0.07); }
}
.companion-btn.nudge {
  animation: companion-nudge 1.8s ease-in-out 3s 4;
}

.guide-on-pill {
  position: fixed;
  bottom: 4.6rem;
  left: 2rem;
  background: #2D4860;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 12px;
  z-index: 900;
  pointer-events: none;
  white-space: nowrap;
  opacity: 0.9;
}

#guide-tip {
  position: fixed;
  z-index: 9999;
  width: 300px;
  background: #2D4860;
  color: #e8eef4;
  border-radius: 12px;
  padding: 14px 18px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12.5px;
  line-height: 1.65;
  box-shadow: 0 10px 36px rgba(0,0,0,0.22);
  pointer-events: none;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.2s, transform 0.2s;
}
#guide-tip.guide-tip-visible {
  opacity: 1;
  transform: translateY(0);
}
#guide-tip::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border: 7px solid transparent;
  border-top: none;
  border-bottom-color: #2D4860;
}
#guide-tip.guide-tip-above {
  transform: translateY(-6px);
}
#guide-tip.guide-tip-above.guide-tip-visible {
  transform: translateY(0);
}
#guide-tip.guide-tip-above::before {
  top: auto;
  bottom: -7px;
  border-top-color: #2D4860;
  border-bottom: none;
}
.guide-tip-label {
  display: block;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #8DB88A;
  margin-bottom: 6px;
}

/* ===== Capture Screen Layout ===== */
.capture-layout {
  display: flex;
  gap: 2rem;
  align-items: flex-start;
  max-width: 940px;
  margin: 0 auto;
  padding: 2rem 1.5rem;
}
.voice-sidebar {
  position: sticky;
  top: 2rem;
  width: 190px;
  flex-shrink: 0;
}
.capture-main {
  flex: 1;
  min-width: 0;
  max-width: 660px;
}
.capture-main h1 { margin-top: 0; }

/* ===== Voice Capture ===== */
.voice-zone {
  background: linear-gradient(160deg, rgba(45,72,96,0.04), rgba(141,184,138,0.09));
  border: 1.5px solid rgba(141,184,138,0.35);
  border-radius: 16px;
  padding: 18px 16px 20px;
  text-align: left;
  width: 100%;
  box-sizing: border-box;
  box-shadow: 0 3px 16px rgba(141,184,138,0.12);
}
.voice-sidebar-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.45);
  margin-bottom: 12px;
}
.voice-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  background: white;
  border: 1.5px solid rgba(45,72,96,0.2);
  border-radius: 50px;
  padding: 10px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: all 0.2s;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
}
.voice-btn:hover {
  border-color: var(--green);
  color: var(--green);
  box-shadow: 0 3px 14px rgba(141,184,138,0.2);
}
.voice-btn.recording {
  background: #c0604a;
  border-color: #c0604a;
  color: white;
  animation: voice-pulse 1.2s ease-in-out infinite;
}
.voice-btn.processing {
  background: rgba(45,72,96,0.06);
  border-color: rgba(45,72,96,0.15);
  color: rgba(45,72,96,0.5);
  cursor: default;
}
@keyframes voice-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(192,96,74,0.4); }
  50% { box-shadow: 0 0 0 8px rgba(192,96,74,0); }
}
.voice-btn-mic { flex-shrink: 0; }
.voice-timer {
  font-family: 'Montserrat', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #c0604a;
  margin-top: 12px;
  letter-spacing: 0.05em;
  text-align: left;
}
.voice-draft {
  margin-top: 14px;
  text-align: left;
}
.voice-added-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.04em;
  margin-bottom: 8px;
}
.voice-transcript {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgba(45,72,96,0.45);
  font-style: italic;
  margin-bottom: 10px;
  line-height: 1.6;
}
.voice-clear-btn {
  background: none;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgba(45,72,96,0.35);
  cursor: pointer;
  padding: 0;
  text-decoration: underline;
}
.voice-clear-btn:hover { color: rgba(45,72,96,0.6); }
/* mobile: stack voice zone above form */
@media (max-width: 640px) {
  .capture-layout { flex-direction: column; }
  .voice-sidebar { position: static; width: 100%; }
  .capture-main { max-width: 100%; }
}

/* ===== Team Section (Dashboard) ===== */
.team-section {
  margin: 1rem 0 1.5rem;
}
.team-section-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 0.75rem;
}
.team-section-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.5);
}
.team-manage-btn {
  background: none;
  border: none;
  color: var(--green);
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.team-manage-btn:hover { color: var(--navy); }

.team-faces-row {
  display: flex;
  align-items: center;
  gap: -8px;
  flex-wrap: nowrap;
}
.team-face {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 2.5px solid white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  font-weight: 700;
  color: white;
  margin-left: -8px;
  cursor: default;
  position: relative;
  object-fit: cover;
  transition: transform 0.15s, z-index 0s;
  z-index: 1;
}
.team-face:first-child { margin-left: 0; }
.team-face:hover { transform: translateY(-3px) scale(1.08); z-index: 10; }
.team-face-lg {
  width: 46px;
  height: 46px;
  font-size: 14px;
}
.team-face-overflow {
  background: rgba(45,72,96,0.12);
  color: rgba(45,72,96,0.7);
  font-size: 11px;
}
.team-faces-row img.team-face {
  object-fit: cover;
}

/* Admin sub-nav cluster — sits below the wave, above the identity band */
.nav-admin-cluster {
  position: absolute;
  top: 100px;
  right: 1.25rem;
  z-index: 200;
}
.nav-admin-cluster-right {
  right: 1.25rem;
}
.nav-link-faded {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem !important;
  font-weight: 500;
  color: var(--navy) !important;
  opacity: 1 !important;
  text-decoration: none;
  padding: 0.32rem 0.65rem;
  border-radius: 7px;
  transition: background 0.12s;
  white-space: nowrap;
}
.nav-link-faded:hover {
  background: rgba(45,72,96,0.07);
  opacity: 1 !important;
}
.nav-link-danger {
  color: var(--coral) !important;
}
.nav-link-danger:hover { background: rgba(211,95,83,0.08) !important; }
.nav-wd-cluster {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.nav-wd-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--navy);
  color: white !important;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none !important;
  box-shadow: 0 2px 8px rgba(45, 72, 96, 0.25);
  transition: background 0.15s, transform 0.15s;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}
.nav-wd-circle:hover { background: var(--green); transform: scale(1.06); }

/* ── WD expanding pill ─────────────────────────────────────── */
.nav-wd-pill {
  display: inline-flex;
  align-items: center;
  background: var(--navy);
  color: white !important;
  border-radius: 50px;
  text-decoration: none !important;
  padding: 0 0.7rem;
  height: 38px;
  max-width: 38px;
  overflow: hidden;
  transition: max-width 1.1s cubic-bezier(0.4, 0, 0.2, 1), background 0.4s ease, padding 0.9s ease;
  white-space: nowrap;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(45, 72, 96, 0.25);
  cursor: pointer;
}
.nav-wd-pill:hover {
  max-width: 280px;
  padding: 0 1.1rem;
  transition: max-width 0.42s cubic-bezier(0.4, 0, 0.2, 1), padding 0.3s ease;
}
.wd-pill-abbr {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  flex-shrink: 0;
  letter-spacing: 0.02em;
}
.wd-pill-full {
  margin-left: 0.65rem;
  opacity: 0;
  transition: opacity 0.5s ease 0s;
  flex-shrink: 0;
  pointer-events: none;
}
.nav-wd-pill:hover .wd-pill-full {
  opacity: 1;
  transition: opacity 0.18s ease 0.2s;
}
.wd-pill-title {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  font-weight: 700;
  line-height: 1.2;
}
.wd-pill-sub {
  display: block;
  font-size: 0.62rem;
  opacity: 0.85;
  margin-top: 0.1rem;
  line-height: 1.2;
}
.nav-wd-circle-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.nav-admin-inner {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 1px;
  background: white;
  border: 1px solid rgba(45,72,96,0.1);
  border-radius: 12px;
  padding: 0.35rem;
  box-shadow: 0 6px 24px rgba(45,72,96,0.13);
  min-width: 160px;
  max-width: 220px;
}
.nav-team-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  background: var(--green);
  color: white !important;
  padding: 3px 10px;
  border-radius: 10px;
  text-decoration: none;
  transition: background 0.15s;
}
.nav-team-link:hover { background: var(--navy); }
.nav-admin-badge {
  display: none;
}
.nav-admin-since {
  font-family: 'Montserrat', sans-serif;
  font-size: 8.5px;
  color: rgba(45,72,96,0.28);
  cursor: default;
  user-select: none;
}

/* ===== Team Management Screen ===== */
.team-page-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 2rem;
  padding-top: 1rem;
}
.team-page-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.25rem;
}
.team-page-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--text-light);
  margin: 0;
}
.team-admin-card {
  margin-bottom: 1.5rem;
}
.team-member-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 14px 18px;
  background: white;
  border: 1.5px solid rgba(45,72,96,0.08);
  border-radius: 12px;
  margin-bottom: 10px;
  transition: border-color 0.2s;
}
.team-member-card:hover {
  border-color: rgba(45,72,96,0.18);
}
.team-member-admin {
  background: linear-gradient(135deg, rgba(45,72,96,0.03), rgba(141,184,138,0.06));
  border-color: rgba(141,184,138,0.3);
}
.team-member-info {
  flex: 1;
  min-width: 0;
}
.team-member-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 2px;
}
.team-member-role {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: var(--text-light);
}
.team-member-stories-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-top: 3px;
  flex-wrap: wrap;
}
.team-member-stories {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: var(--green);
  font-weight: 600;
}
.team-milestone-badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
}
/* Member badges */
.member-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin-top: 5px;
}
.member-badge {
  font-size: 1rem;
  cursor: default;
  line-height: 1;
  transition: transform 0.15s;
}
.member-badge:hover { transform: scale(1.25); }

/* Award badge panel */
.team-award-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--navy);
  background: rgba(45,72,96,0.06);
  border: 1px solid rgba(45,72,96,0.15);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  white-space: nowrap;
}
.team-award-btn:hover { background: rgba(45,72,96,0.12); }
.team-award-panel {
  padding: 0.75rem 1rem;
  background: linear-gradient(135deg, rgba(45,72,96,0.03), rgba(141,184,138,0.05));
  border: 1px solid rgba(45,72,96,0.1);
  border-radius: 10px;
  margin-bottom: 0.5rem;
}
.team-award-label {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.team-award-options { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.team-award-option {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 20px;
  border: 1px solid rgba(45,72,96,0.2);
  background: white;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s;
}
.team-award-option:hover { background: rgba(45,72,96,0.08); }
.team-award-option.awarded {
  background: rgba(141,184,138,0.15);
  border-color: var(--green);
  color: var(--green);
}

.team-celebrate-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  color: var(--coral);
  background: rgba(232,168,152,0.1);
  border: 1px solid rgba(232,168,152,0.3);
  border-radius: 8px;
  padding: 5px 10px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.team-celebrate-btn:hover { background: rgba(232,168,152,0.2); border-color: var(--coral); }
.team-celebrate-panel {
  background: linear-gradient(135deg, rgba(45,72,96,0.03), rgba(141,184,138,0.05));
  border: 1px solid rgba(45,72,96,0.1);
  border-radius: 10px;
  padding: 16px 18px;
  margin: -6px 0 10px;
}
.team-celebrate-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  line-height: 1.7;
  color: var(--navy);
  margin-bottom: 10px;
  white-space: pre-wrap;
}
.team-celebrate-copy {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 600;
  background: none;
  border: 1px solid rgba(45,72,96,0.2);
  border-radius: 6px;
  padding: 4px 12px;
  cursor: pointer;
  color: var(--navy);
  transition: background 0.15s;
}
.team-celebrate-copy:hover { background: rgba(45,72,96,0.06); }
.team-member-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.team-role-select {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  padding: 5px 10px;
  border: 1.5px solid rgba(45,72,96,0.15);
  border-radius: 8px;
  background: white;
  color: var(--navy);
  cursor: pointer;
}
.team-role-select:focus { outline: none; border-color: var(--green); }
.team-role-select:disabled { opacity: 0.4; cursor: not-allowed; }
.team-remove-btn {
  background: none;
  border: none;
  color: rgba(45,72,96,0.3);
  font-size: 14px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.team-remove-btn:hover { color: #c0604a; background: rgba(192,96,74,0.08); }
.team-permission-badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 10px;
}
.badge-admin { background: rgba(45,72,96,0.1); color: var(--navy); }
.badge-editor { background: rgba(141,184,138,0.2); color: #3a6e38; }
.badge-contributor { background: rgba(45,72,96,0.06); color: rgba(45,72,96,0.55); }
.team-empty {
  text-align: center;
  padding: 3rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  color: var(--text-light);
}
.team-empty p { margin-bottom: 1rem; }
.team-members-list { margin-top: 0.5rem; }

/* Graduate card */
.graduate-card {
  display: flex;
  gap: 1.25rem;
  align-items: flex-start;
  background: linear-gradient(135deg, #f9f7f4 0%, #eef4f0 100%);
  border: 1.5px solid rgba(141,184,138,0.35);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
}
.graduate-card-icon { font-size: 2rem; line-height: 1; padding-top: 0.15rem; }
.graduate-card-heading {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.graduate-card-sub {
  font-size: 0.875rem;
  color: var(--text-light);
  line-height: 1.55;
  margin-bottom: 1rem;
  max-width: 520px;
}
.graduate-card-btn { font-size: 0.875rem; }

/* Spots bar */
.team-spots-bar {
  background: white;
  border: 1px solid rgba(45,72,96,0.1);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1.25rem;
}
.team-spots-text {
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.85rem;
  color: var(--navy);
  margin-bottom: 0.6rem;
}
.team-spots-invite {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.team-spot-input {
  flex: 1;
  border: 1px solid rgba(45,72,96,0.2);
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.875rem;
  font-family: inherit;
  color: var(--navy);
  outline: none;
}
.team-spot-input:focus { border-color: var(--green); }
.team-queued-invites { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.team-queued-chip {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.8rem;
  color: var(--navy);
  background: rgba(141,184,138,0.1);
  border-radius: 8px;
  padding: 0.35rem 0.75rem;
}
.team-queued-status {
  color: var(--text-light);
  font-size: 0.75rem;
}

/* ===== Admin Overview Screen ===== */
.admin-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 2rem;
  padding-top: 0.5rem;
}
.admin-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.25rem;
}
.admin-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: rgba(45,72,96,0.45);
  margin: 0;
}

/* Admin: person-nested org cards */
.person-card {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 3px rgba(45,72,96,0.04);
}
.person-card-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(45,72,96,0.08);
  margin-bottom: 0.85rem;
}
.person-card-identity { min-width: 0; flex: 1; }
.person-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  color: #2d4860;
  font-weight: 600;
}
.person-card-email {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(45,72,96,0.55);
  margin-top: 0.15rem;
}
.person-card-summary { text-align: right; flex-shrink: 0; }
.person-card-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: rgba(45,72,96,0.55);
  margin-top: 0.3rem;
  letter-spacing: 0.02em;
}
.person-card-orgs {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.nested-org-card {
  padding: 0.65rem 0.85rem;
  background: rgba(245,245,240,0.5);
  border-radius: 8px;
  border-left: 3px solid rgba(45,72,96,0.10);
}
.nested-org-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.25rem;
}
.nested-org-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: #2d4860;
  font-weight: 600;
}
.nested-org-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  color: rgba(45,72,96,0.6);
  align-items: center;
}
.nested-org-delete {
  margin-left: auto;
  background: transparent;
  border: 1px solid rgba(194, 85, 85, 0.25);
  color: rgba(194, 85, 85, 0.7);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.nested-org-delete:hover {
  background: #fff1ee;
  color: #c25555;
  border-color: #c25555;
}

/* Password show toggle + match hint (reset password screen) */
.pw-show-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin: 0.4rem 0 0.2rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  color: rgba(45,72,96,0.7);
  cursor: pointer;
  user-select: none;
}
.pw-show-toggle input[type="checkbox"] { cursor: pointer; accent-color: #E07A5F; }
.pw-match-hint {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  margin: 0.35rem 0 0;
  min-height: 1.1em;
  color: rgba(45,72,96,0.55);
}
.pw-match-hint.pw-match-ok { color: #4a7c59; font-weight: 600; }
.pw-match-hint.pw-match-warn { color: #c25555; }

/* Admin tab nav — pretty pill row with breathing room from the divider */
.admin-tabs {
  display: flex;
  gap: 0.55rem;
  margin-top: 1.1rem;
  margin-bottom: 2.2rem;
  padding-bottom: 1.4rem;
  border-bottom: 1px solid rgba(45,72,96,0.08);
  flex-wrap: wrap;
}
.admin-tab {
  background: #fff;
  border: 1px solid rgba(45, 72, 96, 0.16);
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(45,72,96,0.62);
  padding: 0.55rem 1.25rem;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
  box-shadow: 0 1px 0 rgba(45, 72, 96, 0.03);
}
.admin-tab:hover {
  color: #2d4860;
  border-color: rgba(45, 72, 96, 0.3);
  transform: translateY(-1px);
}
.admin-tab.admin-tab-active,
.admin-tab.active {
  color: #2d4860;
  background: rgba(224, 122, 95, 0.08);
  border-color: rgba(224, 122, 95, 0.5);
  box-shadow: 0 1px 0 rgba(224, 122, 95, 0.08);
}
.admin-tab.admin-tab-active:hover,
.admin-tab.active:hover {
  background: rgba(224, 122, 95, 0.12);
  border-color: rgba(224, 122, 95, 0.7);
}
.admin-panel.hidden { display: none; }

/* Story drawer: 'shared with orgs' indicator */
.story-shared-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(74, 124, 89, 0.10);
  border: 1px solid rgba(74, 124, 89, 0.22);
  color: #4a7c59;
  padding: 0.35rem 0.8rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  margin: 0.6rem 0 0.4rem;
}
.story-shared-indicator.story-shared-from {
  background: rgba(232, 168, 152, 0.12);
  border-color: rgba(232, 168, 152, 0.35);
  color: #c96649;
}
.story-shared-indicator .ssi-icon { font-weight: 700; }
.story-shared-indicator .ssi-shape {
  margin-left: 0.3rem;
  font-style: italic;
  opacity: 0.85;
}

/* Share-shape modal */
.share-shape-box { max-width: 640px; max-height: 90vh; overflow-y: auto; }
.ssh-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #c96649;
  margin-bottom: 0.45rem;
}
.ssh-eyebrow .ssh-spark { margin-right: 0.3rem; }
.ssh-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  color: #2d4860;
  font-weight: 600;
  margin: 0 0 0.4rem;
  line-height: 1.25;
}
.ssh-sub {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  color: rgba(45,72,96,0.65);
  font-style: italic;
  margin: 0 0 1.2rem;
}
.ssh-proposals { display: flex; flex-direction: column; gap: 1.2rem; }
.ssh-org-block {
  background: #fafafa;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 12px;
  padding: 1rem 1.2rem;
}
.ssh-org-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: #2d4860;
  margin-bottom: 0.3rem;
}
.ssh-org-reason {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(45,72,96,0.6);
  font-style: italic;
  margin-bottom: 0.85rem;
}
.ssh-shapes { display: flex; flex-direction: column; gap: 0.5rem; }
.ssh-shape-option {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 0.6rem 0.85rem;
  background: #fff;
  border: 1px solid rgba(45,72,96,0.12);
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.ssh-shape-option:hover { border-color: rgba(45,72,96,0.25); }
.ssh-shape-option.ssh-recommended { border-color: rgba(224,122,95,0.45); background: rgba(232,168,152,0.06); }
.ssh-shape-option input[type="radio"] { margin-top: 0.2rem; accent-color: #E07A5F; }
.ssh-shape-text { min-width: 0; }
.ssh-shape-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: #2d4860;
}
.ssh-shape-desc {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  color: rgba(45,72,96,0.6);
  margin-top: 0.15rem;
}
.ssh-component-preview {
  background: #fff;
  border-left: 3px solid #E07A5F;
  padding: 0.7rem 0.85rem;
  border-radius: 6px;
  margin-top: 0.85rem;
}
.ssh-component-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: rgba(45,72,96,0.55);
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 0.35rem;
}
.ssh-component-headline {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2d4860;
}
.ssh-component-summary {
  font-family: 'Cormorant Garamond', serif;
  font-size: 0.95rem;
  color: rgba(45,72,96,0.75);
  margin-top: 0.2rem;
  line-height: 1.5;
}
.ssh-loading {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: rgba(45,72,96,0.5);
  padding: 1.5rem;
  text-align: center;
}
.ssh-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(45,72,96,0.08);
}
.ssh-skip, .ssh-confirm {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  border: none;
}
.ssh-skip { background: transparent; color: rgba(45,72,96,0.55); border: 1px solid rgba(45,72,96,0.18); }
.ssh-skip:hover { background: #f5f5f0; color: #2d4860; }
.ssh-confirm { background: #E07A5F; color: #fff; }
.ssh-confirm:hover { background: #c96649; }

/* Capture form: cross-org share toggle */
.story-share-row.hidden { display: none; }
.story-share-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: rgba(45,72,96,0.75);
  cursor: pointer;
  user-select: none;
  padding: 0.5rem 0;
}
.story-share-toggle input[type="checkbox"] {
  cursor: pointer;
  accent-color: #E07A5F;
  width: 16px;
  height: 16px;
}
.story-share-toggle:hover { color: #2d4860; }

/* Admin: Database Backups section */
.admin-backups-section {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 14px;
  padding: 1.2rem 1.4rem 1.4rem;
  margin: 2rem 0;
  box-shadow: 0 1px 3px rgba(45,72,96,0.04);
}
.admin-backups-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.8rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.admin-backups-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(45,72,96,0.08);
}
.admin-backups-run-btn {
  background: #4a7c59;
  color: #fff;
  border: none;
  padding: 0.6rem 1.2rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s ease;
}
.admin-backups-run-btn:hover { background: #3d6a4c; }
.admin-backups-status {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: rgba(45,72,96,0.6);
}
.admin-backups-status.ok { color: #4a7c59; font-weight: 600; }
.admin-backups-status.err { color: #c25555; }
.admin-backups-list { display: flex; flex-direction: column; gap: 0.55rem; }
.admin-backup-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.7rem 0.9rem;
  background: rgba(245,245,240,0.55);
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 8px;
}
.admin-backup-info { min-width: 0; flex: 1; }
.admin-backup-filename {
  font-family: 'Courier New', monospace;
  font-size: 0.82rem;
  color: #2d4860;
  font-weight: 600;
}
.admin-backup-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: rgba(45,72,96,0.55);
  margin-top: 0.15rem;
}
.admin-backup-download {
  background: #fff;
  color: #2d4860;
  border: 1px solid rgba(45,72,96,0.22);
  padding: 0.4rem 0.9rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.admin-backup-download:hover { background: #f5f5f0; }
.admin-backups-empty, .admin-backups-loading {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: rgba(45,72,96,0.5);
  padding: 1rem;
  text-align: center;
}

/* Admin: Email Library editor */
.admin-email-editor-section {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 14px;
  padding: 1.2rem 1.4rem 1.4rem;
  margin: 2rem 0;
  box-shadow: 0 1px 3px rgba(45,72,96,0.04);
}
.admin-email-editor-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 1rem;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.admin-email-grid {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
.admin-email-section {
  border-radius: 14px;
  padding: 1.1rem 1.15rem 1.25rem;
  background: rgba(252, 248, 240, 0.55);
  border: 1px solid rgba(45, 72, 96, 0.07);
}
.admin-email-section.section-pattern {
  background: rgba(252, 244, 232, 0.7);
  border-color: rgba(214, 168, 122, 0.18);
}
.admin-email-section.section-specialized {
  background: rgba(247, 232, 222, 0.7);
  border-color: rgba(213, 122, 90, 0.16);
}
.admin-email-section.section-user_update {
  background: rgba(228, 240, 247, 0.75);
  border-color: rgba(108, 149, 179, 0.22);
}
.admin-email-section.section-one_off {
  background: rgba(232, 240, 232, 0.7);
  border-color: rgba(124, 158, 124, 0.2);
}
.admin-email-section-head {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.85rem;
}
.admin-email-section-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.admin-email-section-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
  color: rgba(45, 72, 96, 0.55);
  margin-top: 0.18rem;
}
.admin-email-section-body {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}
@media (max-width: 700px) { .admin-email-section-body { grid-template-columns: 1fr; } }
.admin-email-empty {
  font-family: Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(45, 72, 96, 0.45);
  padding: 0.5rem 0.25rem;
}
.admin-email-card {
  background: rgba(245,245,240,0.55);
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 10px;
  padding: 0.95rem 1.1rem;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.admin-email-card:hover { background: #fff; border-color: rgba(45,72,96,0.22); transform: translateY(-1px); }
.admin-email-card-key {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(45,72,96,0.55);
}
.admin-email-card-subject {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2d4860;
  line-height: 1.25;
}
.admin-email-card-schedule {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: rgba(45,72,96,0.55);
  font-style: italic;
}
.admin-email-card-stat {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: rgba(45, 72, 96, 0.6);
  margin-top: 0.45rem;
  padding-top: 0.4rem;
  border-top: 1px solid rgba(45, 72, 96, 0.07);
  letter-spacing: 0.01em;
}

/* Override the org-cards grid layout for the user-cards container so
   the segment pills + grid table stack vertically full-width. */
#admin-user-cards { display: block; }

/* Project subcategory-type chips inside the New Project modal */
.pm-subtype-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.4rem;
}
.pm-subtype-chip {
  background: #fff;
  border: 1px solid rgba(45, 72, 96, 0.16);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(45, 72, 96, 0.7);
  padding: 0.5rem 1.05rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pm-subtype-chip:hover {
  border-color: rgba(45, 72, 96, 0.32);
  color: #2d4860;
}
.pm-subtype-chip.is-active {
  background: rgba(124, 158, 124, 0.14);
  border-color: rgba(124, 158, 124, 0.55);
  color: #2d4860;
}

/* Project template chips. Picked one = seeds chapter/movement/phase scaffolding. */
.pm-template-row.hidden { display: none; }
.pm-template-chips {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.55rem;
  margin-top: 0.5rem;
}
.pm-template-chip {
  background: #fff;
  border: 1.5px solid rgba(45,72,96,0.14);
  border-radius: 12px;
  padding: 0.7rem 0.85rem;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  font-family: inherit;
}
.pm-template-chip:hover {
  border-color: rgba(45,72,96,0.32);
  background: rgba(45,72,96,0.02);
}
.pm-template-chip.is-active {
  background: rgba(124,158,124,0.10);
  border-color: rgba(124,158,124,0.65);
  box-shadow: 0 2px 8px rgba(124,158,124,0.18);
}
.pm-tc-icon {
  font-size: 1.1rem;
  color: var(--green);
  font-weight: 600;
}
.pm-tc-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  color: var(--navy);
  letter-spacing: 0.01em;
}
.pm-tc-sub {
  font-size: 0.74rem;
  color: var(--text-light);
  line-height: 1.35;
}
.pm-template-hint {
  margin-top: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: rgba(124,158,124,0.07);
  border-left: 3px solid var(--green);
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text);
  font-style: italic;
}
.pm-template-hint.hidden { display: none; }
@media (max-width: 560px) {
  .pm-template-chips { grid-template-columns: 1fr; }
}

/* Series sub-type chips (sermons / episodes / lessons / issues / talks) */
.pm-series-subtype-row.hidden { display: none; }
.pm-series-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.45rem;
}
.pm-series-chip {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.16);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(45,72,96,0.7);
  padding: 0.45rem 0.95rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.pm-series-chip:hover { border-color: rgba(45,72,96,0.32); color: var(--navy); }
.pm-series-chip.is-active {
  background: rgba(182,134,42,0.12);
  border-color: rgba(182,134,42,0.55);
  color: #8a6420;
}

/* ── Project Upcoming section + wave timeline ────────────────────── */
.project-upcoming-section {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
  margin-bottom: 1.5rem;
}
.pu-wave {
  position: relative;
  height: 60px;
  margin: 0.8rem 0 1.3rem;
}
.pu-wave-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.pu-wave-dots {
  position: absolute;
  inset: 0;
}
.proj-top-wave-wrap {
  margin: 1.25rem 0 1.75rem;
}
.pu-wave-empty {
  opacity: 0.85;
}

/* Lighter top band on the project detail screen — the blue wave was too
   heavy against the warm interior of a sermon/episode/lesson page. Soften
   the wave and switch the nav text to navy so it still reads. */
#screen-project-detail .top-nav-wrap::before {
  opacity: 0.45;
}
#screen-project-detail .nav-brand,
#screen-project-detail .nav-brand-text,
#screen-project-detail .nav-links a {
  color: var(--navy);
  text-shadow: none;
}
#screen-project-detail .nav-brand-text {
  text-shadow: none;
}
#screen-project-detail .nav-links a:hover {
  color: var(--green);
}
#screen-project-detail .wave-top-img {
  height: 12vh;
}

/* Header overlap fix: the sticky top-nav-wrap holds the wave PNG, and the
   project header scrolls below it. Without explicit stacking + opaque
   backdrops the wave's transparent areas let the header text bleed
   through, which is what Alison saw in the screenshot. Lock both layers. */
#screen-project-detail .top-nav-wrap {
  background: #FFFDF6;
  overflow: hidden;
  isolation: isolate;
  z-index: 100;
}
#screen-project-detail #project-detail-content {
  position: relative;
  z-index: 1;
  background: #FFFDF6;
}
#screen-project-detail .project-detail-header {
  position: relative;
  z-index: 2;
  background: var(--navy);
}

/* ── Subcategory detail (sermon / episode / lesson) — contained pink container ─ */
.proj-sub-detail-container {
  background: linear-gradient(155deg, rgba(232,168,152,0.10) 0%, rgba(255,255,255,0.95) 60%, rgba(232,168,152,0.08) 100%);
  border: 1px solid rgba(232,168,152,0.28);
  border-radius: 18px;
  padding: 2rem 2.5rem;
  max-width: 1140px;
  margin: 0 auto 2rem;
  box-shadow: 0 4px 22px rgba(232,168,152,0.10);
}
.proj-sub-detail-actions-row {
  display: flex;
  gap: 0.6rem;
  margin: 1.2rem 0 1.6rem;
  flex-wrap: wrap;
}

/* "Let's go" write-into-this card — the primary affordance on a sermon page */
.proj-sub-lets-go-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 1rem;
  align-items: center;
  background: linear-gradient(135deg, rgba(141,184,138,0.16) 0%, rgba(148,184,208,0.10) 100%);
  border: 1.5px solid rgba(124,158,124,0.45);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  cursor: pointer;
  margin: 1.25rem 0 0;
  transition: transform 0.15s, box-shadow 0.18s, border-color 0.18s;
}
.proj-sub-lets-go-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(124,158,124,0.18);
  border-color: var(--green);
}
.psl-spark {
  font-size: 1.5rem;
  color: var(--green);
  line-height: 1;
}
.psl-body { min-width: 0; }
.psl-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
.psl-sub {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
}
.psl-arrow {
  font-size: 1.5rem;
  color: var(--green);
  font-weight: 700;
  line-height: 1;
}
@media (max-width: 720px) {
  .proj-sub-detail-container { padding: 1.2rem 1.25rem; }
  .proj-sub-lets-go-card { grid-template-columns: auto 1fr; gap: 0.65rem; padding: 0.95rem 1.1rem; }
  .psl-arrow { display: none; }
  .psl-headline { font-size: 1.15rem; }
}

/* ── Rich sermon/episode detail — Daily Digest–style colored containers ── */
.psr-title-editable {
  outline: none;
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  transition: background 0.15s;
  cursor: text;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 0.4rem;
}
/* The subcategory header sits over the navy top wave; give it a solid
   light backdrop so the navy title doesn't go invisible against navy. */
#screen-project-detail .proj-sub-detail-container .project-detail-header {
  background: rgba(255,253,247,0.94);
  border-radius: 14px;
  padding: 1rem 1.25rem 0.8rem;
  margin-bottom: 1rem;
  position: relative;
  z-index: 2;
}
/* Save bar at the top of the sermon detail — clear button + status */
.sub-save-bar {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  margin-top: 0.7rem;
  flex-wrap: wrap;
}
.sub-save-btn {
  padding: 0.45rem 1.1rem;
  font-size: 0.88rem;
}
.sub-save-status {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  color: rgba(45,72,96,0.55);
  font-style: italic;
  flex: 1;
  min-width: 0;
}
.sub-save-status.saving { color: rgba(45,72,96,0.75); }
.sub-save-status.saved { color: var(--green); font-style: normal; font-weight: 600; }
.sub-save-status.error { color: #b34747; font-style: normal; font-weight: 600; }

/* Subcategory "Delete this card" link in the header */
.proj-sub-delete-link {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.45);
  font-family: inherit;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  margin-top: 0.3rem;
  border-radius: 6px;
}
.proj-sub-delete-link:hover { color: #b34747; background: rgba(179,71,71,0.05); }
.psr-title-editable:hover { background: rgba(232,168,152,0.08); }
.psr-title-editable:focus { background: rgba(232,168,152,0.14); }

.psr-tagline {
  outline: none;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  font-weight: 400;
  color: var(--text-light);
  line-height: 1.4;
  margin: 0 0 0.4rem;
  padding: 0.2rem 0.35rem;
  border-radius: 6px;
  transition: background 0.15s;
  cursor: text;
  min-height: 1.6em;
}
.psr-tagline:hover { background: rgba(45,72,96,0.04); }
.psr-tagline:focus { background: rgba(45,72,96,0.06); }
.psr-tagline.psr-placeholder:empty::before {
  content: attr(data-placeholder);
  color: var(--text-muted);
  font-style: italic;
  opacity: 0.7;
}

.psr-section {
  border-radius: 14px;
  padding: 1.1rem 1.35rem;
  margin: 1.1rem 0;
  border: 1px solid transparent;
}
.psr-section-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.85rem;
}
.psr-section-anchor {
  background: linear-gradient(135deg, rgba(141,184,138,0.10) 0%, rgba(148,184,208,0.06) 100%);
  border-color: rgba(124,158,124,0.30);
}
.psr-section-anchor .psr-section-eyebrow { color: var(--green); }
.psr-section-questions {
  background: linear-gradient(135deg, rgba(148,184,208,0.12) 0%, rgba(124,158,124,0.06) 100%);
  border-color: rgba(148,184,208,0.35);
}
.psr-section-questions .psr-section-eyebrow { color: #3d6680; }
.psr-section-body {
  background: linear-gradient(135deg, rgba(232,168,152,0.10) 0%, rgba(245,221,141,0.06) 100%);
  border-color: rgba(232,168,152,0.32);
}
.psr-section-body .psr-section-eyebrow { color: #b6735f; }
.psr-section-citations {
  background: linear-gradient(135deg, rgba(245,221,141,0.16) 0%, rgba(232,168,152,0.08) 100%);
  border-color: rgba(212,180,90,0.40);
}
.psr-section-citations .psr-section-eyebrow { color: #b6862a; }

.psr-field-row { margin-bottom: 0.85rem; }
.psr-field-row:last-child { margin-bottom: 0; }
.psr-field-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.3rem;
  letter-spacing: 0.02em;
}
.psr-field-input {
  width: 100%;
  border: 1px solid rgba(45,72,96,0.14);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-family: inherit;
  font-size: 0.95rem;
  background: rgba(255,255,255,0.7);
  color: var(--text);
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.psr-field-input:focus {
  border-color: var(--navy);
  background: #fff;
}
.psr-field-textarea {
  resize: vertical;
  min-height: 60px;
  line-height: 1.55;
}

.psr-kq-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.psr-kq-row {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
.psr-kq-input {
  flex: 1;
  border: 1px solid rgba(45,72,96,0.14);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  background: rgba(255,255,255,0.7);
  color: var(--text);
  outline: none;
}
.psr-kq-input:focus { background: #fff; border-color: var(--navy); }
.psr-kq-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  font-size: 0.9rem;
}
.psr-kq-remove:hover { color: var(--coral); }
.psr-kq-add-row {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.7rem;
}
.psr-kq-add-input {
  flex: 1;
  border: 1px dashed rgba(45,72,96,0.22);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-family: inherit;
  font-size: 0.9rem;
  background: rgba(255,255,255,0.5);
  outline: none;
}
.psr-kq-add-input:focus { border-style: solid; background: #fff; border-color: var(--navy); }

.psr-body-input {
  width: 100%;
  border: 1px solid rgba(232,168,152,0.30);
  border-radius: 10px;
  padding: 1rem 1.15rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.7;
  background: rgba(255,255,255,0.82);
  color: var(--text);
  outline: none;
  resize: vertical;
  min-height: 220px;
}
.psr-body-input:focus { border-color: var(--coral); background: #fff; }
.psr-body-input::placeholder {
  font-style: italic;
  color: var(--text-muted);
}
/* Primary body: lead the page with the wide writing surface. No section
   eyebrow above — let the page open clean to "write." */
.psr-section-body-primary {
  padding: 0;
  background: transparent;
  border: none;
  margin: 1.5rem 0 0.8rem;
}
.psr-body-input-large {
  min-height: 360px;
  font-size: 1.18rem;
  line-height: 1.8;
  padding: 1.6rem 1.8rem;
  border: 1px solid rgba(232,168,152,0.28);
  background: rgba(255,255,255,0.92);
  border-radius: 12px;
  box-shadow: 0 2px 14px rgba(232,168,152,0.10);
}
.psr-body-input-large:focus {
  background: #fff;
  border-color: rgba(232,168,152,0.55);
  box-shadow: 0 4px 22px rgba(232,168,152,0.18);
}

/* Toggle row — structure + sermon map */
.psr-toggle-row {
  display: flex;
  gap: 0.6rem;
  margin: 0.85rem 0 1rem;
  flex-wrap: wrap;
}
.psr-structure-btn {
  background: rgba(45,72,96,0.05);
  border: 1px solid rgba(45,72,96,0.14);
  border-radius: 999px;
  color: var(--text);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.5rem 1.05rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s, border-color 0.15s;
}
.psr-structure-btn:hover {
  background: rgba(45,72,96,0.10);
  border-color: rgba(45,72,96,0.28);
}
.psr-map-btn {
  background: rgba(124,158,124,0.10);
  border-color: rgba(124,158,124,0.32);
  color: #4a7d4a;
}
.psr-map-btn:hover {
  background: rgba(124,158,124,0.18);
  border-color: rgba(124,158,124,0.55);
}
.psr-structure-icon {
  font-size: 0.85rem;
  line-height: 1;
}

.psr-map-wrap.hidden, .psr-structure-wrap.hidden { display: none; }

.psr-section-map {
  background: linear-gradient(135deg, rgba(124,158,124,0.10) 0%, rgba(148,184,208,0.06) 100%);
  border: 1px solid rgba(124,158,124,0.28);
}
.psr-section-map .psr-section-eyebrow { color: var(--green); }
.psr-map-intro {
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 1rem;
}

.psr-cite-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.7rem;
}
.psr-cite-row {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(212,180,90,0.32);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.6rem;
  align-items: start;
}
.psr-cite-text {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.5;
  font-style: italic;
}
.psr-cite-source {
  grid-column: 1;
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
  font-style: normal;
}
.psr-cite-link {
  color: var(--navy);
  font-size: 0.85rem;
  text-decoration: none;
}
.psr-cite-link:hover { color: var(--green); }
.psr-cite-remove {
  background: transparent;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
}
.psr-cite-remove:hover { color: var(--coral); }
.psr-cite-add-row {
  display: grid;
  grid-template-columns: 1.5fr 1fr auto;
  gap: 0.45rem;
  margin-top: 0.7rem;
}
.psr-cite-add-text, .psr-cite-add-source {
  border: 1px dashed rgba(45,72,96,0.22);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-family: inherit;
  font-size: 0.88rem;
  background: rgba(255,255,255,0.5);
  outline: none;
}
.psr-cite-add-text:focus, .psr-cite-add-source:focus {
  border-style: solid;
  background: #fff;
  border-color: var(--navy);
}

.psr-add-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}
.psr-add-btn:hover { background: #1f3a52; }

.psr-empty {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.88rem;
  padding: 0.5rem 0;
}

@media (max-width: 720px) {
  .psr-title-editable { font-size: 1.5rem; }
  .psr-section { padding: 0.95rem 1.1rem; }
  .psr-cite-add-row { grid-template-columns: 1fr; }
  .psr-body-input { font-size: 1rem; min-height: 180px; }
}

/* Story drawer: share-with-org affordance after the fact (in case the user
   didn't check the share box at capture time). */
.story-share-from-detail {
  background: linear-gradient(135deg, rgba(141,184,138,0.10) 0%, rgba(148,184,208,0.08) 100%);
  border: 1px solid rgba(124,158,124,0.30);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin: 0.85rem 0;
}
.story-share-from-detail-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.story-share-from-detail-btn:hover { background: #4f7c4a; }
.story-share-from-detail-hint {
  font-size: 0.78rem;
  color: var(--text-light);
  margin: 0.5rem 0 0;
  font-style: italic;
  line-height: 1.5;
}
.ssi-unshare-btn {
  background: transparent;
  border: 1px solid rgba(45,72,96,0.18);
  color: var(--text-light);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 0.6rem;
  transition: background 0.15s, color 0.15s;
}
.ssi-unshare-btn:hover {
  background: rgba(232,168,152,0.12);
  color: var(--coral);
}

/* When the user clicks into ANY textarea or input, the placeholder example
   should clear out of the way so they can start typing without erasing it
   character by character. Standard pattern — applies universally. */
input:focus::placeholder,
textarea:focus::placeholder {
  color: transparent !important;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s;
}

/* Generate output: follow-up input — answer clarifying questions / refine. */
.output-followup-wrap {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(45,72,96,0.10);
}
.output-followup-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.5rem;
}
.output-followup-input {
  width: 100%;
  border: 1px solid rgba(45,72,96,0.14);
  border-radius: 10px;
  padding: 0.7rem 0.9rem;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.55;
  background: rgba(255,255,255,0.85);
  outline: none;
  resize: vertical;
  min-height: 70px;
  margin-bottom: 0.6rem;
}
.output-followup-input:focus {
  border-color: var(--navy);
  background: #fff;
}
.output-followup-actions {
  display: flex;
  justify-content: flex-end;
}

/* ── Impact Map: three-view tab switcher ─────────────────────────────── */
.impact-map-view-tabs {
  display: flex;
  justify-content: center;
  gap: 0.4rem;
  margin: 1rem auto 0.6rem;
  flex-wrap: wrap;
}
.im-view-tab {
  background: transparent;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 999px;
  padding: 0.5rem 1.2rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.84rem;
  color: var(--navy);
  cursor: pointer;
  font-weight: 500;
  transition: all 0.15s ease;
}
.im-view-tab:hover { background: rgba(45,72,96,0.05); }
.im-view-tab-active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
  font-weight: 600;
}

.impact-map-panel { animation: imp-fade-in 0.25s ease; }
@keyframes imp-fade-in {
  from { opacity: 0; transform: translateY(6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* Patterns panel */
.impact-patterns-grid {
  max-width: 1000px;
  margin: 1.2rem auto 0;
  display: flex;
  flex-direction: column;
  gap: 1.6rem;
}
.impact-patterns-section {
  background: rgba(255,255,255,0.65);
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
}
.ips-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 0.4rem;
}
.ips-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem;
  color: var(--navy);
  margin: 0 0 0.35rem;
}
.ips-hint {
  font-size: 0.9rem;
  color: rgba(45,72,96,0.7);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.ips-empty {
  font-size: 0.9rem;
  color: rgba(45,72,96,0.55);
  font-style: italic;
  padding: 0.6rem 0;
  margin-bottom: 0.6rem;
}
.ips-orphan-list,
.ips-pattern-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 0.7rem;
}
.ips-orphan-card,
.ips-pattern-card {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.12);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.ips-pattern-card { cursor: default; }
.ips-orphan-card:hover {
  box-shadow: 0 4px 12px rgba(45,72,96,0.08);
  border-color: var(--navy);
}
.ips-orphan-title {
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.ips-orphan-excerpt {
  font-size: 0.82rem;
  color: rgba(45,72,96,0.65);
  line-height: 1.45;
  margin-bottom: 0.45rem;
}
.ips-orphan-action {
  font-size: 0.78rem;
  color: var(--green);
  font-weight: 600;
}
.ips-pattern-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.ips-pattern-desc {
  font-size: 0.85rem;
  color: rgba(45,72,96,0.7);
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.ips-pattern-action { margin-top: 0.5rem; }

/* Data panel */
.impact-data-wrap {
  max-width: 1000px;
  margin: 1.2rem auto 0;
}
.impact-data-add {
  background: linear-gradient(135deg, rgba(141,184,138,0.10) 0%, rgba(148,184,208,0.08) 100%);
  border: 1px solid rgba(124,158,124,0.35);
  border-radius: 16px;
  padding: 1.3rem 1.6rem;
  margin-bottom: 1.5rem;
}
.ipd-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 0.35rem;
}
.ipd-hint {
  font-size: 0.88rem;
  color: rgba(45,72,96,0.7);
  line-height: 1.5;
  margin-bottom: 1rem;
}
.ipd-form {
  display: grid;
  grid-template-columns: 120px 1fr 240px auto;
  gap: 0.6rem;
  align-items: center;
}
@media (max-width: 720px) {
  .ipd-form { grid-template-columns: 1fr; }
}
.ipd-input {
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-family: inherit;
  font-size: 0.92rem;
  background: #fff;
  outline: none;
}
.ipd-input:focus { border-color: var(--navy); }
.ipd-input-value { font-weight: 700; font-family: 'Cormorant Garamond', Georgia, serif; font-size: 1.1rem; }
.impact-data-empty {
  text-align: center;
  color: rgba(45,72,96,0.6);
  padding: 2rem 1rem;
  font-size: 0.95rem;
}
.impact-data-groups {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.ipd-group { background: #fff; border: 1px solid rgba(45,72,96,0.08); border-radius: 14px; padding: 1.1rem 1.3rem; }
.ipd-group-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 0.7rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(45,72,96,0.08);
}
.ipd-group-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
}
.ipd-group-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.55);
}
.ipd-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.7rem;
}
.ipd-card {
  background: rgba(232,168,152,0.08);
  border: 1px solid rgba(232,168,152,0.32);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  position: relative;
  text-align: center;
}
.ipd-card-value {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
  margin-bottom: 0.25rem;
}
.ipd-card-label {
  font-size: 0.82rem;
  color: rgba(45,72,96,0.7);
  line-height: 1.35;
}
.ipd-card-delete {
  position: absolute;
  top: 4px; right: 6px;
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.35);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 4px;
}
.ipd-card-delete:hover { color: #b34747; }

/* SPRINKLE FIELD — playful scattered confetti of stats, color-keyed by KM */
.ipd-sprinkle-field {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.7rem 0.55rem;
  padding: 1.4rem 1rem;
  background: linear-gradient(135deg, rgba(255,253,247,0.7) 0%, rgba(245,250,250,0.7) 100%);
  border-radius: 18px;
  border: 1px dashed rgba(45,72,96,0.10);
  min-height: 200px;
  align-items: center;
}
.ipd-sprinkle {
  background: var(--bg);
  color: var(--text);
  border-radius: 999px;
  padding: 0.6rem 1.05rem;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  box-shadow: 0 3px 10px rgba(45,72,96,0.10);
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  animation: ipd-sprinkle-in 0.4s cubic-bezier(0.34,1.56,0.64,1) both;
  max-width: 200px;
}
.ipd-sprinkle:hover {
  transform: rotate(0deg) translateY(-3px) scale(1.05) !important;
  box-shadow: 0 8px 20px rgba(45,72,96,0.18);
}
.ipd-sprinkle-value {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  line-height: 1;
}
.ipd-sprinkle-label {
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  margin-top: 0.15rem;
  text-align: center;
  opacity: 0.9;
  line-height: 1.2;
}
@keyframes ipd-sprinkle-in {
  from { opacity: 0; transform: scale(0.4); }
  to   { opacity: 1; }
}
.ipd-sprinkle-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem 1.1rem;
  justify-content: center;
  margin: 1rem auto 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(45,72,96,0.7);
}
.ipd-legend-item {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.ipd-legend-dot {
  width: 10px; height: 10px;
  border-radius: 50%;
  display: inline-block;
}

/* Agent-suggested data sprinkles */
.ipd-suggest-btn {
  margin-top: 0.85rem;
  background: rgba(124,158,124,0.10);
  border: 1px dashed rgba(124,158,124,0.45);
  color: var(--navy);
  border-radius: 999px;
  padding: 0.6rem 1.2rem;
  font-family: inherit;
  font-size: 0.88rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  transition: all 0.15s ease;
}
.ipd-suggest-btn:hover {
  background: rgba(124,158,124,0.18);
  border-color: var(--green);
}
.ipd-suggest-spark { color: var(--green); font-size: 1.05rem; }
.ipd-suggestions {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(45,72,96,0.08);
}
.ipd-suggest-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 0.35rem;
}
.ipd-suggest-hint {
  font-size: 0.86rem;
  color: rgba(45,72,96,0.7);
  line-height: 1.5;
  margin-bottom: 0.85rem;
}
.ipd-suggest-loading {
  font-size: 0.9rem;
  color: rgba(45,72,96,0.6);
  font-style: italic;
  padding: 0.7rem 0;
}
.ipd-suggest-empty {
  font-size: 0.9rem;
  color: rgba(45,72,96,0.55);
  font-style: italic;
  padding: 0.7rem 0;
}
.ipd-suggest-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.ipd-suggest-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 0.7rem;
  align-items: center;
  padding: 0.7rem 0.85rem;
  background: rgba(232,168,152,0.06);
  border: 1px solid rgba(232,168,152,0.28);
  border-radius: 10px;
  transition: opacity 0.18s, transform 0.18s;
}
.ipd-suggest-row-gone { opacity: 0; transform: translateX(20px); }
.ipd-suggest-card { min-width: 0; }
.ipd-suggest-value {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.ipd-suggest-label {
  font-size: 0.88rem;
  color: var(--navy);
  margin-top: 0.1rem;
}
.ipd-suggest-km {
  font-size: 0.72rem;
  color: var(--green);
  font-weight: 600;
  margin-top: 0.2rem;
  letter-spacing: 0.05em;
}
.ipd-suggest-evidence {
  font-size: 0.78rem;
  color: rgba(45,72,96,0.55);
  font-style: italic;
  margin-top: 0.25rem;
  line-height: 1.4;
}
.ipd-suggest-actions {
  display: flex;
  gap: 0.3rem;
  align-items: center;
}
.ipd-suggest-accept {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 0.9rem;
  font-family: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.ipd-suggest-accept:hover { background: #5d8665; }
.ipd-suggest-skip {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.45);
  cursor: pointer;
  font-size: 0.95rem;
  padding: 0.4rem 0.6rem;
}
.ipd-suggest-skip:hover { color: #b34747; }
.ipd-suggest-bulk {
  display: flex;
  gap: 0.6rem;
  justify-content: space-between;
  align-items: center;
}
.ipd-suggest-close {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.55);
  cursor: pointer;
  font-family: inherit;
  font-size: 0.85rem;
  padding: 0.4rem 0.7rem;
}
.ipd-suggest-close:hover { color: var(--navy); text-decoration: underline; }

/* ── Instagram mode picker ──────────────────────────────────────────── */
.instagram-mode-content {
  max-width: 560px;
  display: flex;
  flex-direction: column;
  gap: 1.15rem;
}
.instagram-mode-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.instagram-mode-header h3 {
  margin: 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem;
  color: var(--navy);
}
.instagram-mode-sub {
  font-size: 0.9rem;
  color: rgba(45,72,96,0.7);
  margin: -0.5rem 0 0;
  line-height: 1.5;
}
.instagram-mode-options {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.instagram-mode-option {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.85rem;
  align-items: flex-start;
  padding: 0.95rem 1.1rem;
  background: #fff;
  border: 1.5px solid rgba(232,168,152,0.30);
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.instagram-mode-option:hover {
  border-color: var(--green);
  background: rgba(124,158,124,0.05);
}
.instagram-mode-option input[type="checkbox"] {
  margin-top: 0.25rem;
  width: 20px; height: 20px;
  accent-color: var(--green);
  cursor: pointer;
}
.im-mode-body { min-width: 0; }
.im-mode-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.15rem;
}
.im-mode-desc {
  font-size: 0.82rem;
  color: rgba(45,72,96,0.7);
  line-height: 1.45;
}
.instagram-mode-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  flex-wrap: wrap;
}

/* ── How University — side tab + wave popover ────────────────────────── */
.how-u-tab {
  position: fixed;
  left: 0;
  top: 38%;
  transform: translateY(-50%);
  background: linear-gradient(135deg, var(--green) 0%, #5d8665 100%);
  color: #fff;
  border: none;
  border-radius: 0 14px 14px 0;
  padding: 0.85rem 1rem 0.85rem 0.7rem;
  cursor: pointer;
  z-index: 80;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  box-shadow: 3px 4px 14px rgba(45,72,96,0.18);
  font-family: 'Montserrat', sans-serif;
  transition: padding-left 0.18s ease;
}
.how-u-tab:hover { padding-left: 1.1rem; }
.hut-eyebrow {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  opacity: 0.9;
}
.hut-count {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
}

.hu-modal-box { max-width: 760px; padding: 2.2rem 2.4rem; }
.hu-modal-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.4rem;
}
.hu-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  color: var(--navy);
  margin: 0 0 0.5rem;
  line-height: 1.15;
}
.hu-modal-sub {
  font-size: 0.98rem;
  color: rgba(45,72,96,0.75);
  line-height: 1.55;
  margin-bottom: 1.3rem;
}
.hu-wave-wrap {
  width: 100%;
  margin-bottom: 1.4rem;
}
.hu-wave-svg {
  width: 100%;
  height: auto;
  max-height: 220px;
  display: block;
}
.hu-traveler {
  animation: hu-pulse 2.2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes hu-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.7; }
}
.hu-modal-actions {
  display: flex;
  gap: 0.7rem;
  flex-wrap: wrap;
  align-items: center;
}
.hu-modal-dismiss {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.5);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  margin-left: auto;
  padding: 0.5rem;
  display: block;
  margin: 0.5rem 0 0 auto;
}
.hu-modal-dismiss:hover { color: var(--navy); text-decoration: underline; }

/* Step view — game-like challenge cards */
.hu-step-title {
  position: relative;
}
.hu-step-title.hu-step-done {
  color: var(--green);
}
.hu-step-actions {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.8rem;
  align-items: center;
  margin-top: 0.4rem;
}
.hu-step-back, .hu-step-next {
  background: transparent;
  border: none;
  color: var(--navy);
  font-family: inherit;
  font-size: 0.92rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.5rem 0.8rem;
  border-radius: 8px;
  transition: background 0.15s ease;
}
.hu-step-back:hover, .hu-step-next:hover { background: rgba(45,72,96,0.06); }
.hu-step-back-empty { display: inline-block; }
.hu-step-cta {
  font-size: 1rem;
  padding: 0.7rem 1.6rem;
}
.hu-step-revisit {
  font-size: 0.85rem;
  padding: 0.55rem 1rem;
}

/* Dot riding the wave — soft pulse on the current step */
.hu-traveler-halo {
  animation: hu-halo-pulse 1.8s ease-in-out infinite;
  transform-origin: center;
}
@keyframes hu-halo-pulse {
  0%, 100% { r: 13; opacity: 0.22; }
  50%      { r: 16; opacity: 0.08; }
}
.hu-traveler {
  transition: cx 0.6s cubic-bezier(0.22, 1, 0.36, 1), cy 0.6s cubic-bezier(0.22, 1, 0.36, 1);
}

/* Graduation moment */
.hu-graduation {
  text-align: center;
  padding: 0.5rem 0 0.5rem;
}
.hu-grad-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--green);
  margin-bottom: 0.5rem;
}
.hu-grad-medal {
  margin: 0.5rem auto 1rem;
  animation: hu-medal-in 0.9s cubic-bezier(0.22, 1, 0.36, 1) both;
}
@keyframes hu-medal-in {
  from { opacity: 0; transform: scale(0.4) rotate(-12deg); }
  to   { opacity: 1; transform: scale(1) rotate(0); }
}
.hu-grad-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.1rem;
  color: var(--navy);
  margin: 0 0 0.3rem;
  line-height: 1.15;
  animation: hu-grad-fade 0.9s ease 0.2s both;
}
@keyframes hu-grad-fade { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
.hu-grad-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.55);
  margin-bottom: 0.8rem;
  animation: hu-grad-fade 0.9s ease 0.3s both;
}
.hu-grad-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--navy);
  opacity: 0.85;
  margin: 0 0 1.5rem;
  animation: hu-grad-fade 0.9s ease 0.4s both;
}
.hu-grad-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
  flex-wrap: wrap;
  animation: hu-grad-fade 0.9s ease 0.5s both;
}

/* Solo-org grow CTA — a SUBTLE one-line nudge, not a sales card.
   Sits inline with the rest of the dashboard, easy to ignore until
   the user is ready to invite. */
.dash-grow-cta {
  max-width: 1100px;
  margin: 1rem auto 0.5rem;
  padding: 0 1rem;
}
.dash-grow-cta.hidden { display: none; }
.dgc-quiet-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
  flex-wrap: wrap;
  padding: 0.65rem 0.85rem;
  background: rgba(124,158,124,0.05);
  border-radius: 10px;
}
.dgc-quiet-text {
  font-size: 0.84rem;
  color: rgba(45,72,96,0.7);
  font-style: italic;
  line-height: 1.5;
}
.dgc-quiet-link {
  background: transparent;
  border: none;
  color: var(--green);
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.3rem 0.5rem;
  border-radius: 6px;
  white-space: nowrap;
}
.dgc-quiet-link:hover { background: rgba(124,158,124,0.10); text-decoration: underline; }
.dgc-line {
  font-size: 0.92rem;
  color: rgba(45,72,96,0.75);
  line-height: 1.55;
  margin: 0;
}
.dgc-line.dgc-quiet {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin: 0;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* Solo-org graduation emblem — circular team-icon badge on the org dashboard */
.dgc-emblem-wrap {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  padding: 1.1rem 1.4rem;
  background: linear-gradient(135deg, rgba(157, 195, 214, 0.10) 0%, rgba(141, 184, 138, 0.10) 100%);
  border: 1.5px dashed rgba(157, 195, 214, 0.55);
  border-radius: 16px;
  cursor: pointer;
  transition: all 0.2s ease;
}
.dgc-emblem-wrap:hover {
  border-color: rgba(157, 195, 214, 0.85);
  background: linear-gradient(135deg, rgba(157, 195, 214, 0.16) 0%, rgba(141, 184, 138, 0.16) 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(45, 72, 96, 0.08);
}
.dgc-emblem-wrap:focus { outline: 2px solid rgba(45, 72, 96, 0.3); outline-offset: 2px; }
.dgc-emblem-circle {
  flex-shrink: 0;
  width: 84px;
  height: 84px;
  border-radius: 50%;
  background: #ffffff;
  border: 2px solid var(--navy, #2d4860);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(45, 72, 96, 0.08);
}
.dgc-emblem-body { flex: 1; min-width: 0; }
.dgc-emblem-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--green, #8db88a);
  margin-bottom: 0.25rem;
}
.dgc-emblem-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 700;
  color: var(--navy, #2d4860);
  margin: 0 0 0.3rem;
  line-height: 1.15;
}
.dgc-emblem-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(45, 72, 96, 0.78);
  margin: 0;
  font-style: italic;
}
@media (max-width: 600px) {
  .dgc-emblem-wrap { flex-direction: column; text-align: center; padding: 1.25rem; gap: 0.85rem; }
  .dgc-emblem-circle { width: 72px; height: 72px; }
}

.dash-org-graduation {
  background: linear-gradient(135deg, #7C9E7C 0%, #5D8665 60%, #2D4860 100%);
  color: #fff;
  border-radius: 18px;
  padding: 1.6rem 1.8rem;
  margin: 1.5rem auto;
  max-width: 1100px;
  text-align: center;
  box-shadow: 0 12px 36px rgba(45,72,96,0.22);
  animation: dog-in 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
}
.dash-org-graduation.hidden { display: none; }
@keyframes dog-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.dog-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  opacity: 0.85;
  margin-bottom: 0.5rem;
}
.dog-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  margin: 0 0 0.5rem;
}
.dog-line {
  font-size: 0.95rem;
  opacity: 0.9;
  margin: 0 auto 1rem;
  max-width: 700px;
  line-height: 1.55;
}
.dash-org-graduation .btn-primary {
  background: #fff;
  color: var(--navy);
  border: none;
  font-weight: 700;
}
.dash-org-graduation .btn-primary:hover { background: rgba(255,255,255,0.92); }

/* Project Builder — click-add components to a project page */
.proj-builder-cta {
  margin: 2rem auto 1.5rem;
  text-align: center;
  max-width: 720px;
}
.proj-builder-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  padding: 1rem 2rem;
  background: linear-gradient(135deg, rgba(141,184,138,0.10) 0%, rgba(232,168,152,0.10) 100%);
  border: 1.5px dashed rgba(124,158,124,0.45);
  border-radius: 14px;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
}
.proj-builder-btn:hover {
  background: linear-gradient(135deg, rgba(141,184,138,0.18) 0%, rgba(232,168,152,0.15) 100%);
  border-color: var(--green);
  transform: translateY(-1px);
}
.proj-builder-spark { font-size: 1.2rem; color: var(--green); }
.proj-builder-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
}
.proj-builder-hint {
  font-size: 0.78rem;
  color: rgba(45,72,96,0.6);
  font-style: italic;
}

.proj-builder-box { max-width: 720px; padding: 2rem 2.3rem; }
.proj-builder-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 0.4rem;
}
.proj-builder-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.85rem;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.proj-builder-sub {
  font-size: 0.95rem;
  color: rgba(45,72,96,0.7);
  margin-bottom: 1.4rem;
  line-height: 1.5;
}
.proj-builder-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.7rem;
}
.proj-builder-component {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.12);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.proj-builder-component:hover {
  border-color: var(--green);
  background: rgba(124,158,124,0.04);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(45,72,96,0.10);
}
.pbc-icon {
  font-size: 1.2rem;
  color: var(--green);
  font-weight: 700;
}
.pbc-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
}
.pbc-desc {
  font-size: 0.82rem;
  color: rgba(45,72,96,0.65);
  line-height: 1.45;
}

/* Citations, Key Questions, Notes sections */
.proj-citations-list,
.proj-key-questions-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-bottom: 0.7rem;
}
.proj-citation-row,
.proj-kq-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem;
  background: rgba(232,168,152,0.06);
  border: 1px solid rgba(232,168,152,0.25);
  border-radius: 10px;
}
.proj-citation-text,
.proj-kq-text { flex: 1; font-size: 0.9rem; color: var(--navy); line-height: 1.5; }
.proj-kq-spark { color: var(--green); font-size: 1rem; }
.proj-citation-link {
  color: var(--green);
  text-decoration: none;
  font-size: 1rem;
}
.proj-citation-remove,
.proj-kq-remove {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.4);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
}
.proj-citation-remove:hover,
.proj-kq-remove:hover { color: #b34747; background: rgba(179,71,71,0.05); }
.proj-citation-add-row,
.proj-kq-add-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.proj-citation-input,
.proj-kq-input {
  flex: 1;
  border: 1px solid rgba(45,72,96,0.16);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-family: inherit;
  font-size: 0.9rem;
  background: #fff;
  outline: none;
}
.proj-citation-input:focus,
.proj-kq-input:focus { border-color: var(--navy); }
.proj-notes-block-input {
  width: 100%;
  border: 1px solid rgba(45,72,96,0.16);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  font-family: inherit;
  font-size: 0.92rem;
  line-height: 1.55;
  background: #fff;
  resize: vertical;
  min-height: 140px;
  outline: none;
  color: var(--navy);
}
.proj-notes-block-input:focus { border-color: var(--navy); }

/* Project Gallery Wall — photos tagged to a project */
.proj-gallery-section {
  margin-top: 1.2rem;
}
.proj-gallery-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
  gap: 0.6rem;
  margin-top: 0.7rem;
}
.proj-gallery-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 12px;
  overflow: hidden;
  background: rgba(45,72,96,0.06);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.proj-gallery-tile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(45,72,96,0.14);
}
.proj-gallery-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.proj-gallery-remove {
  position: absolute;
  top: 6px; right: 6px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  width: 24px; height: 24px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.85rem;
  display: flex; align-items: center; justify-content: center;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.proj-gallery-tile:hover .proj-gallery-remove { opacity: 1; }
.proj-gallery-remove:hover { background: rgba(0,0,0,0.85); }
.proj-gallery-empty {
  font-size: 0.92rem;
  color: rgba(45,72,96,0.55);
  font-style: italic;
  padding: 1.5rem 0;
  text-align: center;
  background: rgba(255,253,247,0.5);
  border: 1px dashed rgba(45,72,96,0.12);
  border-radius: 12px;
  margin-top: 0.7rem;
}

/* Shape this project with the agent — primary action on project detail */
.proj-shape-btn {
  background: linear-gradient(135deg, var(--green) 0%, #5d8665 100%);
  border: none;
  color: #fff;
  box-shadow: 0 3px 10px rgba(124,158,124,0.22);
}
.proj-shape-btn:hover { background: linear-gradient(135deg, #6f9472 0%, #4d7155 100%); }

/* Agent project proposals — Pattern Spotter scaled to whole projects */
.dash-project-proposals {
  background: linear-gradient(135deg, rgba(124,158,124,0.10) 0%, rgba(232,168,152,0.08) 100%);
  border: 1px solid rgba(124,158,124,0.40);
  border-radius: 16px;
  padding: 1.4rem 1.7rem;
  margin: 1.5rem auto;
  max-width: 1100px;
}
.dash-project-proposals.hidden { display: none; }
.pp-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 0.3rem;
}
.pp-hint {
  font-size: 0.92rem;
  color: rgba(45,72,96,0.75);
  line-height: 1.5;
  margin: 0 0 1.2rem;
}
.pp-list {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 0.9rem;
  margin-bottom: 0.9rem;
}
.pp-card {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.pp-template-badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--green);
  background: rgba(124,158,124,0.10);
  align-self: flex-start;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  margin-bottom: 0.2rem;
}
.pp-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
}
.pp-reasoning {
  font-size: 0.85rem;
  color: rgba(45,72,96,0.7);
  font-style: italic;
  line-height: 1.5;
}
.pp-subs-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(45,72,96,0.5);
  margin-top: 0.4rem;
  text-transform: uppercase;
}
.pp-subs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-bottom: 0.2rem;
}
.pp-sub {
  background: rgba(232,168,152,0.10);
  border: 1px solid rgba(232,168,152,0.32);
  color: var(--navy);
  font-size: 0.75rem;
  padding: 0.25rem 0.55rem;
  border-radius: 999px;
}
.pp-evidence {
  font-size: 0.74rem;
  color: rgba(45,72,96,0.55);
  font-style: italic;
  line-height: 1.4;
  margin-top: 0.25rem;
}
.pp-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
  flex-wrap: wrap;
}
.pp-accept {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: inherit;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.pp-accept:hover { background: #5d8665; }
.pp-skip {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.55);
  font-family: inherit;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.5rem 0.7rem;
}
.pp-skip:hover { color: var(--navy); text-decoration: underline; }
.pp-dismiss-all {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.5);
  font-family: inherit;
  font-size: 0.85rem;
  cursor: pointer;
  margin-left: auto;
  display: block;
}
.pp-dismiss-all:hover { color: var(--navy); text-decoration: underline; }

/* Save-to-Social picker on the story-drawer Generate output */
.story-gen-output-actions {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  margin-bottom: 0.6rem;
  flex-wrap: wrap;
  position: relative;
}
.story-gen-save-wrap { position: relative; }
.story-gen-save-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.35rem 0.85rem;
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.story-gen-save-btn:hover { background: #5d8665; }
.story-gen-save-picker {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 200px;
  background: #fff;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(45,72,96,0.14);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 30;
}
.story-gen-save-picker.hidden { display: none; }
.story-gen-save-picker button {
  background: transparent;
  border: none;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--navy);
  cursor: pointer;
}
.story-gen-save-picker button:hover { background: rgba(45,72,96,0.06); }

/* Create a post inline from inside the Social Library */
.social-create-row {
  text-align: center;
  margin: 0 0 1.25rem;
}
.social-create-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.6rem 1.4rem;
  font-family: inherit;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.social-create-btn:hover { background: #1e2f3f; }
.social-create-hint {
  font-size: 0.78rem;
  color: rgba(45,72,96,0.55);
  margin: 0.45rem 0 0;
  font-style: italic;
}

/* ── Inline stacked Impact Map — replaces the M/KM/V rail on dashboards ─
   When .personal-model-band has class .use-stacked-map, the legacy rail
   (.impact-model-rail-legacy) is hidden and the new svg map shows. To
   flip back to the classic visual, remove .use-stacked-map. */
.stacked-map-inline {
  width: 100%;
  max-width: 1100px;
  margin: 0.25rem auto 0;
  padding: 0.5rem 0 0;
  display: none;
}
.stacked-map-inline .stacked-map-svg {
  width: 100%;
  height: auto;
  max-height: 380px;
  display: block;
}
.use-stacked-map .stacked-map-inline { display: block; }
.use-stacked-map .impact-model-rail-legacy { display: none; }

/* Tighten the personal impact model page so the arc sits up under the
   header instead of being pushed below the fold. Hides the divider HR
   under the quote and trims the kate-profile-container padding.
   Pull the welcome block UP so it sits on top of the wave header,
   not below the wave with a gap. position:relative + z-index keeps
   it interactive over the wave background. */
#screen-myprofile .kate-profile-container {
  padding-top: 0.5rem !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
  /* No negative margin-top here — earlier -110px pull-up was clipping
     the Welcome block (photo + name + tagline) above the viewport on
     normal-sized windows when the wave rendered short. Sit it cleanly
     under the wave instead; visible is better than artful. */
  margin-top: 0 !important;
  position: relative;
  z-index: 5;
}
#screen-myprofile .kate-profile-header { margin-bottom: 0; padding-bottom: 0; }
#screen-myprofile .kate-statement { margin-bottom: 0; }
/* Pull the statement quote tight under the role tagline above. */
#screen-myprofile .kate-tagline + .kate-statement { margin-top: -1rem; line-height: 1.45; }
#screen-myprofile .kate-profile-photo { padding: 0; margin: 0; }
#screen-myprofile .kate-profile-intro { padding: 0; }
#screen-myprofile > hr,
#screen-myprofile hr,
#screen-personal hr { display: none !important; border: none !important; height: 0 !important; margin: 0 !important; padding: 0 !important; }
#screen-myprofile .personal-model-band {
  /* Sit the band cleanly under the Welcome block. Earlier -4rem
     pull-up caused the band's centered content to overlap the
     Welcome block; +0.5rem floated it too far below. Zero margin
     + a small pull on padding lifts it without colliding. */
  margin-top: -0.5rem !important;
  padding-top: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  /* Drop the sage-cream gradient that was reading as gray here. */
  background: transparent !important;
}
/* Belt-and-suspenders: every conceivable separator nuked on screen-myprofile */
#screen-myprofile .kate-profile-container,
#screen-myprofile .kate-profile-header,
#screen-myprofile .kate-profile-intro,
#screen-myprofile .kate-statement { border: none !important; }
#screen-myprofile .impact-model-eyebrow { padding-top: 0.4rem; margin-bottom: 0 !important; }
/* Universal tight-spacing for every dashboard surface that uses the
   kate-profile-container header pattern — Welcome / photo / tagline /
   quote sits close to the top, hr nuked, model band has zero gap. */
#screen-dashboard .impact-model-wrap,
#screen-personal .impact-model-wrap,
#screen-myprofile .impact-model-wrap {
  padding-top: 0 !important;
  margin-top: 0 !important;
  border-top: none !important;
  border-bottom: none !important;
  box-shadow: none !important;
}
/* Carpet-bomb: every direct child of the dashboard above the impact
   model gets all borders/shadows stripped so no faint divider can
   sneak in. Alison: "covenant still has that line above your impact
   model." */
#screen-dashboard > * {
  border-top: 0 !important;
  border-bottom: 0 !important;
}
#screen-dashboard .kate-statement,
#screen-dashboard .kate-tagline,
#screen-dashboard .dash-metrics-row,
#screen-dashboard .dash-snapshot-wrap {
  box-shadow: none !important;
}

/* Build Your Next Project — centered title when below project lists */
.featured-eyebrow-centered {
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: 0.01em;
  text-transform: none;
  margin: 2rem 0 1.25rem;
}
.featured-projects-below {
  margin-top: 2rem;
  padding-top: 1.5rem;
  border-top: 1px solid rgba(45,72,96,0.08);
}
#screen-dashboard .kate-profile-container,
#screen-personal .kate-profile-container { padding-top: 0.5rem !important; padding-bottom: 0 !important; margin-bottom: 0 !important; }
#screen-dashboard .kate-profile-header,
#screen-personal .kate-profile-header { margin-bottom: 0; padding-bottom: 0; }
#screen-dashboard .kate-statement,
#screen-personal .kate-statement { margin-bottom: 0; }
#screen-dashboard .kate-profile-photo,
#screen-personal .kate-profile-photo { padding: 0; margin: 0; }
#screen-dashboard .kate-profile-intro,
#screen-personal .kate-profile-intro { padding: 0; }
#screen-dashboard hr,
#screen-dashboard > hr,
#screen-personal hr,
#screen-personal > hr { display: none !important; border: none !important; height: 0 !important; margin: 0 !important; }
#screen-dashboard .impact-model-eyebrow,
#screen-personal .impact-model-eyebrow { padding-top: 0.4rem; margin-bottom: 0 !important; }
/* Maximum height clamp on the inline SVG so it never grows beyond what fits
   above the fold. */
.stacked-map-inline { max-height: 360px; }
.stacked-map-inline .stacked-map-svg { max-height: 340px; }
.use-stacked-map .impact-model-eyebrow { margin-bottom: 0.2rem; padding-top: 0; }
.use-stacked-map .stacked-map-inline { margin-top: 0; padding-top: 0; }
/* Patterns now live on the Impact Map > Patterns tab. Hide the
   bulky pattern band that used to live on this page. */
#personal-patterns-band { display: none !important; }
/* More chic pattern cards on the Impact Map Patterns panel */
.ips-pattern-card { padding: 0.85rem 1rem; border-radius: 10px; }
.ips-pattern-name { font-size: 1rem; margin-bottom: 0.2rem; }
.ips-pattern-desc { font-size: 0.8rem; line-height: 1.45; }
.ips-pattern-evidence {
  font-size: 0.72rem;
  color: rgba(45,72,96,0.55);
  font-style: italic;
  margin-top: 0.45rem;
  line-height: 1.4;
}
/* Hover state on interactive map elements */
.sm-mv-group:hover circle { fill: rgba(124,158,124,1); }
.sm-km-group:hover circle { fill: rgba(232,168,152,1); }
.sm-dot { transition: r 0.15s ease; }
.sm-dot:hover { r: 10; }
.sm-bar-group:hover rect,
.sm-cap-group:hover circle { fill: rgba(45,72,96,1); }

/* Thinking Lab tile on the Generate page — Thinking Lab blue, not sage */
.generate-thinking-lab-tile {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.9rem;
  align-items: center;
  width: 100%;
  max-width: 760px;
  margin: 0.9rem auto 0;
  padding: 0.95rem 1.15rem;
  background: linear-gradient(135deg, rgba(148,184,208,0.15) 0%, rgba(45,72,96,0.07) 100%);
  border: 1.5px solid rgba(148,184,208,0.55);
  border-radius: 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.15s, box-shadow 0.18s, border-color 0.18s;
}
.generate-thinking-lab-tile:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(45,72,96,0.18);
  border-color: var(--navy);
}
.gtlt-icon {
  font-size: 1.4rem;
  color: #94B8D0;
  line-height: 1;
}
.gtlt-title {
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  margin-bottom: 0.15rem;
}
.gtlt-hint {
  font-size: 0.82rem;
  color: rgba(45,72,96,0.7);
  line-height: 1.4;
}
.gtlt-arrow {
  color: #94B8D0;
  font-weight: 700;
  font-size: 1.1rem;
}

/* ── Generate output: take-this-somewhere action row ───────────────────── */
.output-actions-row {
  margin-top: 1.75rem;
  padding-top: 1.4rem;
  border-top: 1px solid rgba(45,72,96,0.08);
}
.output-actions-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.85rem;
}
.output-actions-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.75rem;
}
@media (max-width: 720px) {
  .output-actions-grid { grid-template-columns: 1fr; }
}
.output-action-card {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(45,72,96,0.14);
  border-radius: 12px;
  padding: 0.95rem 1rem;
  text-align: left;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.15s ease;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  width: 100%;
}
.output-action-card:hover {
  background: #fff;
  border-color: var(--navy);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45,72,96,0.08);
}
.oac-icon {
  font-size: 1.05rem;
  color: var(--green);
  margin-bottom: 0.1rem;
}
.oac-label {
  font-weight: 600;
  font-size: 0.94rem;
  color: var(--navy);
}
.oac-hint {
  font-size: 0.78rem;
  color: rgba(45,72,96,0.65);
  line-height: 1.4;
}
.output-action-card-wrap {
  position: relative;
}
.output-save-picker {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(45,72,96,0.12);
  padding: 0.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  z-index: 30;
}
.output-save-picker button {
  background: transparent;
  border: none;
  text-align: left;
  padding: 0.55rem 0.7rem;
  border-radius: 6px;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--navy);
  cursor: pointer;
}
.output-save-picker button:hover { background: rgba(45,72,96,0.06); }

/* Inline "Chat about this" thread under the draft */
.output-chat {
  margin-top: 1.25rem;
  background: rgba(245,221,141,0.12);
  border: 1px solid rgba(212,180,90,0.32);
  border-radius: 12px;
  padding: 0.9rem 1rem 1rem;
}
.output-chat-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.6rem;
}
.output-chat-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy);
}
.output-chat-close {
  background: transparent; border: none; cursor: pointer;
  font-size: 1.2rem; color: rgba(45,72,96,0.55);
  padding: 0 0.3rem;
}
.output-chat-close:hover { color: var(--navy); }
.output-chat-thread {
  max-height: 320px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 0.55rem;
  margin-bottom: 0.7rem;
}
.output-chat-msg {
  padding: 0.55rem 0.8rem;
  border-radius: 10px;
  font-size: 0.92rem;
  line-height: 1.5;
  max-width: 88%;
}
.output-chat-msg.user {
  background: var(--navy); color: #fff;
  align-self: flex-end;
  border-bottom-right-radius: 4px;
}
.output-chat-msg.agent {
  background: #fff; color: var(--navy);
  align-self: flex-start;
  border: 1px solid rgba(45,72,96,0.10);
  border-bottom-left-radius: 4px;
}
.output-chat-msg.thinking { opacity: 0.6; font-style: italic; }
.output-chat-input-row {
  display: flex; gap: 0.5rem; align-items: flex-end;
}
.output-chat-input {
  flex: 1;
  border: 1px solid rgba(45,72,96,0.14);
  border-radius: 8px;
  padding: 0.55rem 0.7rem;
  font-family: inherit;
  font-size: 0.92rem;
  background: #fff;
  resize: vertical;
  outline: none;
}
.output-chat-input:focus { border-color: var(--navy); }
.output-chat-send {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.05rem;
  font-family: inherit;
  font-weight: 600;
  cursor: pointer;
}
.output-chat-send:hover { background: #1e2f3f; }

/* ── Social Library screen ─────────────────────────────────────────────── */
.social-platform-tabs {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: 1.25rem 0 0.75rem;
  flex-wrap: wrap;
}
.social-platform-tab {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(45,72,96,0.14);
  border-radius: 999px;
  padding: 0.5rem 1.15rem;
  font-family: inherit;
  font-size: 0.92rem;
  color: var(--navy);
  cursor: pointer;
  transition: all 0.15s ease;
}
.social-platform-tab:hover { background: #fff; border-color: var(--navy); }
.social-platform-tab.active {
  background: var(--navy);
  color: #fff;
  border-color: var(--navy);
}
.social-status-tabs {
  display: flex;
  justify-content: center;
  gap: 1rem;
  margin: 0.25rem 0 1.5rem;
  border-bottom: 1px solid rgba(45,72,96,0.10);
}
.social-status-tab {
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.5rem 0.4rem 0.65rem;
  font-family: inherit;
  font-size: 0.88rem;
  color: rgba(45,72,96,0.6);
  cursor: pointer;
  font-weight: 500;
}
.social-status-tab.active {
  color: var(--navy);
  border-bottom-color: var(--green);
  font-weight: 600;
}
.social-posts-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  max-width: 1100px;
  margin: 0 auto;
}
.social-post-card {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 14px;
  padding: 1rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  transition: all 0.15s ease;
}
.social-post-card:hover {
  box-shadow: 0 6px 18px rgba(45,72,96,0.08);
  border-color: rgba(45,72,96,0.20);
}
.social-post-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  color: rgba(45,72,96,0.55);
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.social-post-platform { color: var(--green); font-weight: 600; }
.social-post-text {
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--navy);
  white-space: pre-wrap;
  max-height: 240px;
  overflow: hidden;
  position: relative;
}
.social-post-text.expanded { max-height: none; }
.social-post-send {
  background: rgba(141,184,138,0.10) !important;
  border: 1px solid rgba(141,184,138,0.45) !important;
  color: var(--green, #5e7d5e) !important;
  font-weight: 600;
}
.social-post-send:hover {
  background: rgba(141,184,138,0.20) !important;
  border-color: rgba(141,184,138,0.70) !important;
}
.social-post-canva {
  background: rgba(112,103,255,0.08) !important;
  border: 1px solid rgba(112,103,255,0.42) !important;
  color: #5a51d8 !important;
  font-weight: 600;
}
.social-post-canva:hover {
  background: rgba(112,103,255,0.16) !important;
  border-color: rgba(112,103,255,0.65) !important;
}

.social-post-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin-top: 0.25rem;
}
.social-post-actions button {
  background: transparent;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 8px;
  padding: 0.35rem 0.7rem;
  font-family: inherit;
  font-size: 0.82rem;
  color: var(--navy);
  cursor: pointer;
}
.social-post-actions button:hover { background: rgba(45,72,96,0.05); }
.social-post-actions .primary {
  background: var(--green);
  color: #fff;
  border-color: var(--green);
}
.social-post-actions .primary:hover { background: #5d8665; border-color: #5d8665; }
.social-post-actions .danger { color: #b34747; border-color: rgba(179,71,71,0.3); }
.social-post-actions .danger:hover { background: rgba(179,71,71,0.08); }
.social-posts-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: rgba(45,72,96,0.6);
}
.social-posts-empty p { margin-bottom: 1rem; font-size: 0.95rem; }

/* Social post text inside card — clickable, hint at refine */
.social-post-text {
  cursor: pointer;
  transition: color 0.15s ease;
}
.social-post-text:hover {
  color: var(--green);
}

/* Social post editor modal */
.sp-edit-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.4rem;
}
.sp-edit-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.75rem;
  color: var(--navy);
  margin: 0 0 0.35rem;
}
.sp-edit-sub {
  font-size: 0.9rem;
  color: rgba(45,72,96,0.7);
  margin-bottom: 1.1rem;
  line-height: 1.5;
}
.sp-edit-textarea {
  width: 100%;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--navy);
  background: #fff;
  resize: vertical;
  min-height: 220px;
  outline: none;
}
.sp-edit-textarea:focus { border-color: var(--navy); }
.sp-edit-actions {
  display: flex;
  gap: 0.6rem;
  justify-content: flex-end;
  margin-top: 1.1rem;
  flex-wrap: wrap;
}

/* Photo management inside the social post editor */
.sp-edit-photos-section {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(45,72,96,0.08);
}
.sp-edit-photos-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 0.55rem;
  text-transform: uppercase;
}
.sp-edit-photos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
  gap: 0.55rem;
  margin-bottom: 0.7rem;
}
.sp-edit-photos-empty {
  font-size: 0.85rem;
  color: rgba(45,72,96,0.55);
  font-style: italic;
  margin: 0 0 0.7rem;
}
.sp-edit-photo-tile {
  position: relative;
  aspect-ratio: 1;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(45,72,96,0.06);
}
.sp-edit-photo-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.sp-edit-photo-remove {
  position: absolute;
  top: 4px; right: 4px;
  background: rgba(0,0,0,0.55);
  color: #fff;
  border: none;
  width: 22px; height: 22px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 0.8rem;
  display: flex; align-items: center; justify-content: center;
}
.sp-edit-photo-remove:hover { background: rgba(0,0,0,0.85); }
.sp-edit-add-photo {
  background: transparent;
  border: 1px dashed rgba(45,72,96,0.30);
  color: var(--navy);
  border-radius: 10px;
  padding: 0.6rem 1rem;
  font-family: inherit;
  font-size: 0.88rem;
  cursor: pointer;
  transition: all 0.15s ease;
}
.sp-edit-add-photo:hover {
  background: rgba(124,158,124,0.08);
  border-color: var(--green);
  color: var(--green);
}

/* Photo thumbnail strip on social post cards */
.social-post-photos {
  display: flex;
  gap: 4px;
  align-items: center;
  margin: 0.25rem 0 0.3rem;
  cursor: pointer;
  position: relative;
}
.social-post-photos img {
  width: 48px;
  height: 48px;
  object-fit: cover;
  border-radius: 6px;
  display: block;
}
.social-post-photos-more {
  font-size: 0.75rem;
  color: rgba(45,72,96,0.55);
  font-weight: 600;
  margin-left: 4px;
}

/* Project-level jot notes (loose notes pinned to a project, not yet tagged
   to any subcategory). The agent can flag these for placement later. */
.proj-jot-section {
  background: rgba(245,221,141,0.10);
  border: 1px dashed rgba(212,180,90,0.45);
  border-radius: 12px;
  padding: 1rem 1.2rem;
  margin: 1.25rem auto 1.5rem;
  max-width: 720px;
}
.proj-jot-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b6862a;
  margin-bottom: 0.4rem;
}
.proj-jot-hint {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 0.6rem;
  line-height: 1.55;
}
.proj-jot-input {
  width: 100%;
  border: 1px solid rgba(45,72,96,0.16);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  font-family: inherit;
  font-size: 0.9rem;
  resize: vertical;
  background: #fff;
  outline: none;
  min-height: 60px;
}
.proj-jot-input:focus { border-color: var(--navy); }
.proj-jot-add-row { display: flex; justify-content: flex-end; margin-top: 0.5rem; }
.proj-jot-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  margin-top: 0.85rem;
}
.proj-jot-item {
  background: #fff;
  border: 1px solid rgba(212,180,90,0.32);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: 0.6rem;
  align-items: center;
}
.proj-jot-text {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
}
.proj-jot-tag-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.32rem 0.7rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
}
.proj-jot-delete-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
}
.proj-jot-delete-btn:hover { color: var(--coral); }
.pu-wave-empty-hint {
  position: absolute;
  top: 38px;
  left: 50%;
  transform: translateX(-50%);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  font-style: italic;
  white-space: nowrap;
}
.pu-wave-dot {
  position: absolute;
  top: 18px;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  transform: translateX(-50%);
  cursor: default;
  transition: transform 0.15s;
}
.pu-wave-dot:hover { transform: translateX(-50%) scale(1.25); }
.pu-wave-dot-up { background: var(--coral); box-shadow: 0 0 0 4px rgba(232,168,152,0.20); }
.pu-wave-dot-sub { background: var(--green); box-shadow: 0 0 0 4px rgba(124,158,124,0.18); }
.pu-wave-dot-label {
  position: absolute;
  left: 50%;
  top: 22px;
  transform: translateX(-50%);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  white-space: nowrap;
}

.pu-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
}
.pu-item {
  display: grid;
  grid-template-columns: 130px 1fr auto;
  gap: 1rem;
  align-items: start;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 10px;
  background: rgba(45,72,96,0.02);
}
.pu-item-past { opacity: 0.65; }
.pu-item-sub { background: rgba(124,158,124,0.05); border-color: rgba(124,158,124,0.18); }
.pu-item-date {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
}
.pu-item-body { min-width: 0; }
.pu-item-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.pu-item-who { font-size: 0.82rem; color: var(--text-light); margin-bottom: 0.2rem; }
.pu-item-note { font-size: 0.82rem; color: var(--text); margin-bottom: 0.3rem; line-height: 1.5; }
.pu-status-pill {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  margin-top: 0.3rem;
}
.pu-status-needed { background: rgba(232,168,152,0.18); color: #b6735f; }
.pu-status-progress { background: rgba(245,221,141,0.30); color: #8a6420; }
.pu-status-ready { background: rgba(124,158,124,0.18); color: #4a7d4a; }
.pu-status-done { background: rgba(45,72,96,0.10); color: var(--text-muted); }
.pu-status-sub { background: rgba(124,158,124,0.18); color: #4a7d4a; }
.pu-item-actions {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  align-items: flex-end;
}
.pu-status-select {
  font-family: inherit;
  font-size: 0.78rem;
  padding: 0.35rem 0.6rem;
  border-radius: 6px;
  border: 1px solid rgba(45,72,96,0.18);
  background: #fff;
  color: var(--text);
}
.pu-prep-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}
.pu-prep-btn:hover { background: #4f7c4a; }
.pu-delete-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
}
.pu-delete-btn:hover { color: var(--coral); }
.pu-empty {
  color: var(--text-muted);
  font-style: italic;
  padding: 0.5rem 0;
  font-size: 0.88rem;
}
.pu-past-drawer { margin-top: 1.1rem; }
.pu-past-summary {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.4rem 0;
}
.pu-past-list { margin-top: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem; }

.pu-add-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 0.5rem;
  margin-top: 1.1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(45,72,96,0.12);
}
.pu-add-date, .pu-add-title, .pu-add-who {
  font-family: inherit;
  font-size: 0.88rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 8px;
  background: #fff;
  outline: none;
}
.pu-add-date:focus, .pu-add-title:focus, .pu-add-who:focus { border-color: var(--navy); }
.pu-add-who { max-width: 180px; }
.pu-add-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
}
.pu-add-btn:hover { background: #1f3a52; }
@media (max-width: 720px) {
  .pu-item { grid-template-columns: 1fr; gap: 0.4rem; }
  .pu-item-actions { flex-direction: row; align-items: center; }
  .pu-add-row { grid-template-columns: 1fr; }
}

/* Story-delete Undo toast — appears bottom-center after instant delete */
.story-undo-toast {
  position: fixed;
  left: 50%;
  bottom: 1.5rem;
  transform: translateX(-50%) translateY(150%);
  background: var(--navy);
  color: #fff;
  border-radius: 999px;
  padding: 0.7rem 1.1rem 0.7rem 1.3rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  box-shadow: 0 8px 28px rgba(45,72,96,0.30);
  z-index: 1100;
  opacity: 0;
  transition: transform 0.25s, opacity 0.25s;
  pointer-events: none;
}
.story-undo-toast.is-open {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}
.sut-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
}
.sut-undo {
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
}
.sut-undo:hover { filter: brightness(0.92); }

/* ── Featured projects row — Projects home page ──────────────────────
   Three "Build Your X with How" entry points: Book / Business / Keynote.
   Each card opens New Project with the matching template pre-selected. */
.featured-projects-row { margin: 1.5rem 0 2.25rem; }
.featured-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.85rem;
  padding-left: 0.25rem;
}
.featured-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}
.featured-card {
  background: #fff;
  border: 1.5px solid rgba(45,72,96,0.10);
  border-radius: 14px;
  padding: 1.3rem 1.4rem 1.2rem;
  text-align: left;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s, border-color 0.18s;
  box-shadow: 0 2px 12px rgba(45,72,96,0.04);
  font-family: inherit;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  position: relative;
  overflow: hidden;
}
.featured-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--fc-tint-a, rgba(141,184,138,0.12)) 0%, var(--fc-tint-b, rgba(148,184,208,0.10)) 100%);
  opacity: 0.85;
  pointer-events: none;
  z-index: 0;
}
.featured-card > * { position: relative; z-index: 1; }
.featured-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(45,72,96,0.10);
  border-color: rgba(45,72,96,0.22);
}
.featured-card-book {
  --fc-tint-a: rgba(141,184,138,0.14);
  --fc-tint-b: rgba(148,184,208,0.10);
  --fc-accent: var(--green);
}
.featured-card-business {
  --fc-tint-a: rgba(148,184,208,0.16);
  --fc-tint-b: rgba(45,72,96,0.06);
  --fc-accent: var(--navy);
}
.featured-card-keynote {
  --fc-tint-a: rgba(232,168,152,0.16);
  --fc-tint-b: rgba(245,221,141,0.12);
  --fc-accent: var(--coral);
}
.featured-card-series {
  --fc-tint-a: rgba(245,221,141,0.18);
  --fc-tint-b: rgba(141,184,138,0.10);
  --fc-accent: #b6862a;
}
.fc-spark {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--fc-accent);
  line-height: 1;
}
.fc-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.15;
  margin: 0;
}
.fc-sub {
  font-size: 0.86rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0;
  flex: 1;
}
.fc-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin: 0.4rem 0 0.2rem;
}
.fc-chip {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(45,72,96,0.16);
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.25rem 0.6rem;
  border-radius: 5px;
  white-space: nowrap;
}
.fc-chip-faded {
  background: rgba(255,255,255,0.35);
  color: var(--text-muted);
  border-style: dashed;
  border-color: rgba(45,72,96,0.14);
}
.fc-cta {
  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  background: var(--fc-accent);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  margin-top: 0.55rem;
  transition: filter 0.15s;
}
.featured-card:hover .fc-cta { filter: brightness(0.92); }
@media (max-width: 900px) {
  .featured-cards { grid-template-columns: 1fr; gap: 0.85rem; }
  .featured-card { padding: 1.15rem 1.2rem; }
  .fc-title { font-size: 1.35rem; }
}

/* ── Book Outline component (Book project template) ──────────────── */
.book-outline-section {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(45,72,96,0.04);
}
.book-outline-header {
  border-bottom: 1px solid rgba(45,72,96,0.08);
  padding-bottom: 0.9rem;
  margin-bottom: 1.1rem;
}
.book-outline-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.35rem;
}
.book-outline-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.15;
  margin-bottom: 0.3rem;
}
.book-outline-sub {
  font-size: 0.88rem;
  color: var(--text-light);
  margin-bottom: 0.9rem;
}
.book-outline-toggle {
  display: inline-flex;
  gap: 0.3rem;
  background: rgba(45,72,96,0.06);
  border-radius: 999px;
  padding: 0.3rem;
}
.bot-btn {
  background: transparent;
  border: none;
  color: var(--text-light);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.bot-btn:hover { color: var(--navy); }
.bot-btn.is-active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(45,72,96,0.12);
}
.bot-btn-edit { font-weight: 500; }

/* Outline view — compact rows */
.book-outline-rows {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.bo-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.85rem 0.95rem;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
  background: rgba(45,72,96,0.01);
}
.bo-row:hover {
  border-color: rgba(124,158,124,0.45);
  background: rgba(124,158,124,0.04);
  transform: translateX(2px);
}
.bo-row-empty {
  background: rgba(232,168,152,0.04);
  border-style: dashed;
  border-color: rgba(232,168,152,0.45);
}
.bo-row-empty .bo-row-counts {
  color: var(--coral);
  font-weight: 600;
  font-style: italic;
}
.bo-row-empty:hover {
  background: rgba(232,168,152,0.10);
  border-color: var(--coral);
}
.bo-row-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--green);
  text-align: center;
}
.bo-row-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.96rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.15rem;
}
.bo-row-desc {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 0.2rem;
  line-height: 1.4;
}
.bo-row-counts {
  font-size: 0.75rem;
  color: var(--text-muted);
}
.bo-row-fullness {
  text-align: right;
  min-width: 90px;
}
.bo-bar {
  display: inline-flex;
  gap: 2px;
  margin-bottom: 0.25rem;
}
.bo-bar-seg {
  width: 8px;
  height: 14px;
  background: rgba(45,72,96,0.10);
  border-radius: 2px;
  transition: background 0.15s;
}
.bo-bar-seg.is-filled { background: var(--green); }
.bo-bar-label {
  font-size: 0.7rem;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
}
.bo-empty {
  padding: 1.25rem;
  text-align: center;
  color: var(--text-muted);
  font-style: italic;
}

/* Chapter Maps view — expanded card grid */
.book-maps-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(310px, 1fr));
  gap: 1rem;
}
.book-map-card {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.1s;
}
.book-map-card:hover {
  border-color: rgba(124,158,124,0.45);
  box-shadow: 0 4px 14px rgba(45,72,96,0.06);
  transform: translateY(-1px);
}
.bm-head {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  margin-bottom: 0.4rem;
}
.bm-num {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
}
.bm-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
}
.bm-desc {
  font-size: 0.82rem;
  color: var(--text-light);
  margin-bottom: 0.5rem;
  line-height: 1.45;
}
.bm-counts {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid rgba(45,72,96,0.06);
}
.bm-section-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0.65rem 0 0.35rem;
}
.bm-items {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.bm-item {
  font-size: 0.83rem;
  color: var(--text);
  padding: 0.35rem 0.5rem;
  border-radius: 5px;
  background: rgba(45,72,96,0.03);
  line-height: 1.4;
}
.bm-item-story {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}
.bm-item-story:hover { background: rgba(124,158,124,0.08); }
.bm-item-icon { color: var(--green); font-size: 0.7rem; }
.bm-item-title { flex: 1; font-weight: 600; }
.bm-item-date { font-size: 0.7rem; color: var(--text-muted); }
.bm-item-quote {
  background: rgba(232,168,152,0.06);
  border-left: 2px solid rgba(232,168,152,0.4);
  padding: 0.5rem 0.65rem;
}
.bm-quote-text {
  font-style: italic;
  font-size: 0.82rem;
  line-height: 1.5;
  color: var(--text);
}
.bm-quote-meta {
  font-size: 0.7rem;
  color: var(--text-muted);
  margin-top: 0.2rem;
}
.bm-more {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.25rem 0.5rem;
}
.bm-empty {
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.5rem 0;
}

@media (max-width: 640px) {
  .book-outline-section { padding: 1rem 1.1rem; }
  .book-outline-title { font-size: 1.3rem; }
  .bo-row { grid-template-columns: 32px 1fr auto; gap: 0.6rem; padding: 0.7rem 0.75rem; }
  .bo-row-num { font-size: 1.15rem; }
  .bo-row-fullness { min-width: 80px; }
  .book-maps-grid { grid-template-columns: 1fr; }
}

/* Book totals panel — surfaces words, read time, last activity at the top
   of the outline. The writer feels the manuscript taking shape. */
.book-totals-panel {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  background: rgba(45,72,96,0.03);
  border-radius: 10px;
  margin-bottom: 1.1rem;
  padding: 0.85rem 0.5rem;
}
.bt-cell {
  text-align: center;
  padding: 0.2rem 0.5rem;
  border-right: 1px solid rgba(45,72,96,0.08);
}
.bt-cell:last-child { border-right: none; }
.bt-cell-last { text-align: left; padding-left: 1rem; }
.bt-value {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
}
.bt-value-small {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
  font-style: italic;
}
.bt-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  font-weight: 600;
  margin-top: 0.2rem;
}
@media (max-width: 640px) {
  .book-totals-panel { grid-template-columns: repeat(2, 1fr); gap: 0.5rem 0; padding: 0.7rem 0.4rem; }
  .bt-cell { border-right: none; }
  .bt-cell:nth-child(odd) { border-right: 1px solid rgba(45,72,96,0.08); }
  .bt-cell-last { text-align: center; padding-left: 0.5rem; grid-column: span 2; border-top: 1px solid rgba(45,72,96,0.08); padding-top: 0.65rem; margin-top: 0.3rem; }
  .bt-value { font-size: 1.25rem; }
}

/* Add a chapter directly from the Outline view — zero friction. */
.bo-add-chapter-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 1rem;
  padding-top: 0.9rem;
  border-top: 1px dashed rgba(45,72,96,0.12);
}
.bo-add-chapter-input {
  flex: 1;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  font-family: inherit;
  outline: none;
  background: #fff;
  transition: border-color 0.15s;
}
.bo-add-chapter-input:focus { border-color: var(--navy); }
.bo-add-chapter-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.bo-add-chapter-btn:hover { background: #6e8a6e; }

/* ── Chapter zoom view (Lamott: "don't look down") ──────────────── */
.book-chapter-zoom {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(45,72,96,0.04);
}
.bcz-back-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 0.9rem;
}
.bcz-back-link {
  background: none;
  border: none;
  color: var(--text-light);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.bcz-back-link:hover { color: var(--navy); }
.bcz-chapter-meta {
  font-size: 0.75rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  font-weight: 600;
}
.bcz-chapter-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.15;
  margin: 0 0 0.4rem;
  padding: 0.15rem 0.25rem;
  border-radius: 4px;
  transition: background 0.15s;
  outline: none;
}
.bcz-chapter-title:hover { background: rgba(45,72,96,0.03); }
.bcz-chapter-title:focus { background: rgba(124,158,124,0.06); }
.bcz-chapter-desc {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.55;
  margin-bottom: 1.1rem;
}

/* View / Writing Workshop sub-toggle */
.bcz-mode-toggle {
  display: inline-flex;
  gap: 0.3rem;
  background: rgba(45,72,96,0.06);
  border-radius: 999px;
  padding: 0.3rem;
  margin-bottom: 1.5rem;
}
.bcz-mode-btn {
  background: transparent;
  border: none;
  color: var(--text-light);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.45rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.bcz-mode-btn:hover { color: var(--navy); }
.bcz-mode-btn.is-active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(45,72,96,0.12);
}

/* Read-mode body */
.bcz-section { margin-bottom: 1.3rem; }
.bcz-section-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.bcz-items { display: flex; flex-direction: column; gap: 0.5rem; }
.bcz-item {
  padding: 0.7rem 0.9rem;
  border-radius: 8px;
  background: rgba(45,72,96,0.02);
  border: 1px solid rgba(45,72,96,0.06);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.bcz-item:hover {
  border-color: rgba(124,158,124,0.4);
  background: rgba(124,158,124,0.04);
}
.bcz-item-story {
  display: grid;
  grid-template-columns: 14px 1fr auto;
  gap: 0.6rem;
  align-items: start;
}
.bcz-item-icon { color: var(--green); font-size: 0.85rem; margin-top: 0.15rem; }
.bcz-item-title {
  font-weight: 700;
  color: var(--navy);
  font-size: 0.92rem;
  margin-bottom: 0.15rem;
}
.bcz-item-excerpt {
  font-size: 0.82rem;
  color: var(--text);
  line-height: 1.55;
}
.bcz-item-date {
  font-size: 0.72rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.bcz-item-quote {
  background: rgba(232,168,152,0.05);
  border-left: 3px solid rgba(232,168,152,0.4);
  cursor: default;
}
.bcz-item-quote:hover { background: rgba(232,168,152,0.10); }
.bcz-quote-text {
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--text);
}
.bcz-quote-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin-top: 0.3rem;
}
.bcz-quote-meta a { color: var(--navy); }

/* Empty chapter — warm invitation, not a dead state */
.bcz-empty {
  text-align: center;
  padding: 2rem 1rem 1.5rem;
  background: rgba(232,168,152,0.04);
  border-radius: 10px;
  margin-bottom: 1.3rem;
}
.bcz-empty-spark {
  font-size: 1.5rem;
  color: var(--coral);
  margin-bottom: 0.5rem;
}
.bcz-empty-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.bcz-empty-sub {
  font-size: 0.88rem;
  color: var(--text-light);
  max-width: 32rem;
  margin: 0 auto;
  line-height: 1.55;
}
.bcz-empty-sub em {
  font-style: normal;
  font-weight: 700;
  color: var(--navy);
}

/* Writing Workshop body */
.bcz-workshop {
  background: linear-gradient(135deg, rgba(141,184,138,0.06) 0%, rgba(148,184,208,0.06) 100%);
  border: 1px solid rgba(141,184,138,0.25);
  border-radius: 12px;
  padding: 1.2rem 1.4rem;
}
.bcz-workshop-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.45rem;
}
.bcz-workshop-intro {
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.55;
  margin-bottom: 1.2rem;
}
.bcz-agent-q {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.08);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  padding: 0.95rem 1.15rem;
  margin-bottom: 1rem;
}
.bcz-agent-q-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.35rem;
}
.bcz-agent-q-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 0.5rem;
}
.bcz-agent-q-actions { text-align: right; }
.bcz-agent-q-action {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.bcz-agent-q-action:hover { color: var(--navy); }

/* Voice button — the door to a chapter's first capture */
.bcz-voice-row { margin-bottom: 1rem; }
.bcz-voice-btn {
  width: 100%;
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.9rem 1.2rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.7rem;
  transition: background 0.15s, transform 0.1s;
}
.bcz-voice-btn:hover { background: #1f3a52; }
.bcz-voice-btn:active { transform: scale(0.98); }
.bcz-voice-btn.is-recording {
  background: var(--coral);
  animation: bcz-pulse 1.5s ease-in-out infinite;
}
@keyframes bcz-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(232,168,152,0.45); }
  50% { box-shadow: 0 0 0 10px rgba(232,168,152,0); }
}
.bcz-voice-icon { font-size: 1.1rem; }
.bcz-voice-status {
  margin-top: 0.5rem;
  font-size: 0.82rem;
  color: var(--text-light);
  font-style: italic;
  text-align: center;
}

/* Workshop exercises placeholder */
.bcz-workshop-exercises {
  background: rgba(45,72,96,0.03);
  border-radius: 8px;
  padding: 0.9rem 1.1rem;
  margin-top: 0.5rem;
}
.bcz-workshop-section-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.4rem;
}
.bcz-workshop-coming {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.55;
  font-style: italic;
}

/* Prev / next chapter navigation */
.bcz-nav-row {
  display: flex;
  justify-content: space-between;
  gap: 0.5rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(45,72,96,0.08);
}
.bcz-nav-btn {
  background: transparent;
  border: 1px solid rgba(45,72,96,0.18);
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  max-width: 48%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bcz-nav-btn:hover {
  background: rgba(45,72,96,0.05);
  border-color: rgba(45,72,96,0.32);
}
.bcz-nav-btn-disabled {
  color: var(--text-muted);
  border-color: rgba(45,72,96,0.08);
  cursor: not-allowed;
  font-style: italic;
}

@media (max-width: 640px) {
  .book-chapter-zoom { padding: 1.1rem 1.1rem; }
  .bcz-chapter-title { font-size: 1.6rem; }
  .bcz-agent-q-text { font-size: 1.05rem; }
  .bcz-voice-btn { font-size: 0.88rem; padding: 0.8rem 1rem; }
  .bcz-nav-btn { font-size: 0.75rem; padding: 0.45rem 0.7rem; }
}

/* ── Chapter Map view ──────────────────────────────────────────── */
.bcz-map {
  background: linear-gradient(135deg, rgba(148,184,208,0.07) 0%, rgba(141,184,138,0.05) 100%);
  border: 1px solid rgba(148,184,208,0.30);
  border-radius: 12px;
  padding: 1.3rem 1.5rem;
}
.bcz-map-intro {
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.55;
  margin-bottom: 1.2rem;
  padding-bottom: 0.85rem;
  border-bottom: 1px solid rgba(45,72,96,0.08);
}
.bcz-map-disclaimer {
  display: block;
  margin-top: 0.35rem;
  font-style: italic;
  color: var(--text-muted);
  font-size: 0.82rem;
}
.bcz-map-loading {
  color: var(--text-muted);
  font-style: italic;
  padding: 1.5rem 0;
  text-align: center;
}
.bcz-map-section { margin-bottom: 1.1rem; }
.bcz-map-section:last-child { margin-bottom: 0; }
.bcz-map-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.4rem;
}
.bcz-map-throughline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 500;
  color: var(--navy);
  line-height: 1.45;
  font-style: italic;
  border-left: 3px solid var(--green);
  padding-left: 0.85rem;
}
.bcz-map-themes {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.bcz-map-theme {
  background: rgba(45,72,96,0.06);
  border: 1px solid rgba(45,72,96,0.14);
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.3rem 0.75rem;
  border-radius: 999px;
}
.bcz-map-arc,
.bcz-map-gaps {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.6;
}
.bcz-map-gaps {
  background: rgba(232,168,152,0.06);
  border-left: 3px solid rgba(232,168,152,0.5);
  padding: 0.75rem 0.9rem;
  border-radius: 4px 8px 8px 4px;
}
.bcz-map-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.3rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(45,72,96,0.06);
}
.bcz-map-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}
.bcz-map-refresh {
  background: transparent;
  border: 1px solid rgba(45,72,96,0.18);
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.bcz-map-refresh:hover {
  background: rgba(45,72,96,0.05);
  border-color: rgba(45,72,96,0.32);
}
.bcz-map-empty {
  text-align: center;
  padding: 1.5rem 1rem;
}
.bcz-map-empty-spark {
  font-size: 1.5rem;
  color: var(--green);
  margin-bottom: 0.5rem;
}
.bcz-map-empty-text {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.55;
  max-width: 32rem;
  margin: 0 auto;
}
.bcz-map-error {
  background: rgba(232,168,152,0.08);
  border-left: 3px solid var(--coral);
  padding: 0.85rem 1rem;
  border-radius: 4px 8px 8px 4px;
  font-size: 0.88rem;
  color: var(--text);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bcz-map-retry {
  align-self: flex-start;
  background: var(--coral);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
}

/* Admin Users grid — full table view with first/last/location/business/etc */
.admin-users-segpills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1rem;
}
.admin-users-segpill {
  background: #fff;
  border: 1px solid rgba(45, 72, 96, 0.16);
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: rgba(45, 72, 96, 0.7);
  padding: 0.35rem 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  text-transform: capitalize;
  transition: background 0.15s, border-color 0.15s;
}
.admin-users-segpill span {
  color: rgba(45, 72, 96, 0.4);
  font-weight: 500;
}
.admin-users-segpill:hover { border-color: rgba(45, 72, 96, 0.3); }
.admin-users-segpill.is-active {
  background: rgba(224, 122, 95, 0.1);
  border-color: rgba(224, 122, 95, 0.5);
  color: #2d4860;
}
.admin-users-segpill.is-active span { color: rgba(224, 122, 95, 0.7); }
.admin-users-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  background: #fff;
  border-radius: 12px;
  border: 1px solid rgba(45, 72, 96, 0.08);
  overflow: hidden;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
}
.admin-users-row {
  display: grid;
  grid-template-columns: 0.9fr 1fr 1.4fr 1.1fr 1.1fr 0.5fr 0.55fr 0.9fr 0.6fr 0.7fr 1.3fr;
  gap: 0.6rem;
  padding: 0.8rem 1rem;
  align-items: center;
  border-bottom: 1px solid rgba(45, 72, 96, 0.05);
  color: #2d4860;
}
.admin-users-row:last-child { border-bottom: none; }
.admin-users-row-head {
  background: rgba(45, 72, 96, 0.04);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.55);
}
.admin-users-row:not(.admin-users-row-head):hover {
  background: rgba(45, 72, 96, 0.03);
}
.admin-users-cell-num { text-align: right; font-variant-numeric: tabular-nums; }
.admin-users-cell-email {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.76rem;
  color: rgba(45, 72, 96, 0.75);
  word-break: break-all;
}
.admin-users-empty { color: rgba(45, 72, 96, 0.3); font-style: italic; }
.admin-users-cell-segs { display: flex; flex-wrap: wrap; gap: 0.25rem; }
.admin-users-segchip {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
  background: rgba(45, 72, 96, 0.06);
  color: rgba(45, 72, 96, 0.65);
  text-transform: lowercase;
}
.admin-users-segchip.seg-paying { background: rgba(124, 158, 124, 0.18); color: #4a7c59; }
.admin-users-segchip.seg-trial { background: rgba(214, 168, 122, 0.18); color: #b07d4a; }
.admin-users-segchip.seg-free { background: rgba(45, 72, 96, 0.08); color: rgba(45, 72, 96, 0.55); }
.admin-users-segchip.seg-business { background: rgba(108, 149, 179, 0.18); color: #4a6e88; }
.admin-users-segchip.seg-nonprofit { background: rgba(155, 138, 187, 0.18); color: #6b5e84; }
.admin-users-segchip.seg-individual { background: rgba(45, 72, 96, 0.08); color: rgba(45, 72, 96, 0.55); }
.admin-users-segchip.seg-verified { background: rgba(124, 158, 124, 0.14); color: #4a7c59; }
.admin-users-segchip.seg-unverified { background: rgba(194, 85, 85, 0.12); color: #b14444; }
.admin-users-segchip.seg-admin { background: rgba(224, 122, 95, 0.18); color: #c25540; }
@media (max-width: 1100px) {
  .admin-users-grid { display: flex; flex-direction: column; gap: 0.85rem; background: transparent; border: none; }
  .admin-users-row {
    grid-template-columns: 1fr;
    background: #fff;
    border: 1px solid rgba(45, 72, 96, 0.08);
    border-radius: 10px;
    padding: 1rem;
    gap: 0.4rem;
  }
  .admin-users-row > div::before {
    content: attr(data-label);
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: rgba(45, 72, 96, 0.45);
    display: block;
    margin-bottom: 0.15rem;
  }
  .admin-users-row-head { display: none; }
  .admin-users-cell-num { text-align: left; }
}
.admin-email-card-edit {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #c96649;
  letter-spacing: 0.03em;
  margin-top: 0.4rem;
}
.admin-email-loading {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: rgba(45,72,96,0.5);
  padding: 1.5rem;
  grid-column: 1 / -1;
  text-align: center;
}

/* Email editor modal */
.email-editor-box {
  max-width: 720px;
  max-height: 90vh;
  overflow-y: auto;
}
.email-editor-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #c96649;
  margin-bottom: 0.4rem;
}
.email-editor-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2d4860;
  margin: 0 0 0.3rem;
}
.email-editor-schedule {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(45,72,96,0.6);
  font-style: italic;
  margin-bottom: 1.2rem;
}
.email-editor-fields {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.emed-field { display: flex; flex-direction: column; gap: 0.35rem; }
.emed-field-row { display: flex; gap: 1rem; }
@media (max-width: 600px) { .emed-field-row { flex-direction: column; } }
.emed-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #2d4860;
  letter-spacing: 0.02em;
}
.emed-hint {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 400;
  color: rgba(45,72,96,0.5);
  font-style: italic;
  margin-left: 0.4rem;
}
.emed-input, .emed-textarea {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  color: #2d4860;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 8px;
  background: #fafafa;
  width: 100%;
  box-sizing: border-box;
  line-height: 1.5;
}
.emed-input:focus, .emed-textarea:focus { outline: none; border-color: rgba(224,122,95,0.5); background: #fff; }
.emed-textarea { resize: vertical; min-height: 80px; }
.email-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(45,72,96,0.10);
  padding-top: 1rem;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.email-editor-action-right { display: flex; gap: 0.5rem; }
.email-editor-reset, .email-editor-preview, .email-editor-save {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.email-editor-reset {
  background: transparent;
  color: rgba(45,72,96,0.55);
  border: 1px solid rgba(45,72,96,0.15);
}
.email-editor-reset:hover { background: #f5f5f0; color: #2d4860; }
.email-editor-preview {
  background: #fff;
  color: #2d4860;
  border: 1px solid rgba(45,72,96,0.22);
}
.email-editor-preview:hover { background: #f5f5f0; }
.email-editor-save {
  background: #E07A5F;
  color: #fff;
  border: 1px solid #E07A5F;
}
.email-editor-save:hover { background: #c96649; }
.email-editor-status {
  margin-top: 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: rgba(45,72,96,0.55);
  min-height: 1.1em;
}
.email-editor-history {
  margin-top: 0.55rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(45, 72, 96, 0.7);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  min-height: 1.1em;
}
.email-editor-history-label {
  color: rgba(45, 72, 96, 0.5);
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  font-size: 0.7rem;
}
.email-editor-history-date {
  font-weight: 600;
  color: #2d4860;
}
.email-editor-history-divider { color: rgba(45, 72, 96, 0.3); }
.email-editor-history-empty {
  font-style: italic;
  color: rgba(45, 72, 96, 0.45);
}

/* My Account → Your Plans ledger */
.acct-plans-ledger {
  background: rgba(252, 248, 240, 0.55);
  border: 1px solid rgba(45, 72, 96, 0.08);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.acct-plan-line {
  display: grid;
  grid-template-columns: 1.4fr 2fr auto;
  gap: 1rem;
  align-items: baseline;
  padding: 0.5rem 0;
  border-bottom: 1px solid rgba(45, 72, 96, 0.06);
}
.acct-plan-line:last-of-type { border-bottom: none; }
.acct-plan-line-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
}
.acct-plan-line-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(45, 72, 96, 0.6);
}
.acct-plan-line-price {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  text-align: right;
  font-variant-numeric: tabular-nums;
}
.acct-plan-line-total {
  border-top: 2px solid rgba(45, 72, 96, 0.12);
  padding-top: 0.85rem;
  margin-top: 0.3rem;
}
.acct-plan-line-total .acct-plan-line-name,
.acct-plan-line-total .acct-plan-line-price {
  font-size: 1.15rem;
  color: #2d4860;
}
.acct-plans-loading {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  color: rgba(45, 72, 96, 0.5);
  font-style: italic;
  padding: 0.5rem 0;
}

/* Universal Send modal — photos, notes, screenshots, articles all
   route through here. Triggered from "Upload + send" on Photos page;
   reusable from other entry points (e.g., Send Note button) later. */
.send-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 72, 96, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.2s;
  padding: 1.5rem;
}
.send-modal-overlay.send-modal-show { opacity: 1; }
.send-modal-box {
  background: white;
  border-radius: 18px;
  padding: 1.8rem 1.8rem 1.4rem;
  max-width: 520px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 20px 60px rgba(45, 72, 96, 0.3);
  transform: translateY(16px);
  transition: transform 0.25s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.send-modal-show .send-modal-box { transform: translateY(0); }
.send-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  border: none;
  background: rgba(45, 72, 96, 0.06);
  color: var(--muted, #6c7a88);
  font-size: 18px;
  line-height: 1;
  cursor: pointer;
}
.send-modal-close:hover { background: rgba(45,72,96,0.12); color: var(--navy); }
.send-modal-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--green, #8db88a);
  margin-bottom: 0.5rem;
}
.send-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  margin: 0 0 1rem;
  line-height: 1.2;
}
.send-modal-files-summary {
  background: rgba(141, 184, 138, 0.12);
  border: 1px solid rgba(141,184,138,0.4);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-size: 0.88rem;
  color: var(--navy, #2d4860);
  margin-bottom: 1rem;
}
.send-modal-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted, #6c7a88);
  margin: 0.85rem 0 0.4rem;
}
.send-modal-textarea {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  font-family: inherit;
  font-size: 0.95rem;
  line-height: 1.5;
  color: var(--text, #2d4860);
  background: #fafbfc;
  resize: vertical;
  min-height: 70px;
}
.send-modal-textarea:focus {
  outline: none;
  border-color: var(--green, #8db88a);
  background: white;
}
.send-modal-orgs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.send-modal-org {
  padding: 0.55rem 1rem;
  background: white;
  border: 1.5px solid var(--border, #e5e5e5);
  border-radius: 999px;
  font-family: inherit;
  font-size: 0.88rem;
  color: var(--navy, #2d4860);
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s, transform 0.1s;
}
.send-modal-org:hover {
  border-color: rgba(45,72,96,0.35);
  transform: translateY(-1px);
}
.send-modal-org-selected {
  background: var(--navy, #2d4860);
  color: white;
  border-color: var(--navy, #2d4860);
}
.send-modal-empty {
  color: var(--muted, #6c7a88);
  font-style: italic;
  font-size: 0.88rem;
}
.send-modal-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  margin-top: 0.5rem;
}
.send-modal-skip {
  background: transparent;
  border: none;
  font-family: inherit;
  font-size: 0.9rem;
  color: var(--muted, #6c7a88);
  cursor: pointer;
  padding: 0.55rem 0.9rem;
}
.send-modal-skip:hover { color: var(--navy, #2d4860); }
.send-modal-send {
  background: var(--navy, #2d4860);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 0.65rem 1.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.send-modal-send:hover { background: #3a5a78; transform: translateY(-1px); }
.send-modal-send:disabled { opacity: 0.5; cursor: not-allowed; transform: none; }

/* First-org welcome + first-story capture modals */
.first-org-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 72, 96, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9999;
  opacity: 0;
  transition: opacity 0.25s;
  padding: 1.5rem;
}
.first-org-modal-overlay.first-org-modal-show { opacity: 1; }
.first-org-modal-box {
  background: white;
  border-radius: 20px;
  padding: 2.5rem 2.5rem 2rem;
  max-width: 600px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 24px 70px rgba(45, 72, 96, 0.32);
  transform: translateY(20px);
  transition: transform 0.3s cubic-bezier(0.22, 0.61, 0.36, 1);
}
.first-org-modal-show .first-org-modal-box { transform: translateY(0); }
.first-org-modal-close {
  position: absolute;
  top: 14px;
  right: 16px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: none;
  background: rgba(45, 72, 96, 0.05);
  color: var(--muted, #6c7a88);
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.first-org-modal-close:hover {
  background: rgba(45, 72, 96, 0.1);
  color: var(--navy, #2d4860);
}
.first-org-modal-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--green, #8db88a);
  margin-bottom: 0.75rem;
}
.first-org-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  margin: 0 0 0.7rem;
  line-height: 1.15;
}
.first-org-modal-orgname {
  color: var(--green, #8db88a);
  font-style: italic;
}
.first-org-modal-sub {
  font-size: 1rem;
  color: var(--text, #2d4860);
  line-height: 1.55;
  margin: 0 0 1.5rem;
}
.first-org-modal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  margin-bottom: 1.5rem;
}
.first-org-modal-cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.25rem;
  padding: 0.95rem 1.25rem;
  border: 1.5px solid var(--border, #e5e5e5);
  border-radius: 12px;
  background: white;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: transform 0.12s, border-color 0.15s, box-shadow 0.2s, background 0.15s;
}
.first-org-modal-cta:hover {
  transform: translateY(-2px);
  border-color: var(--green, #8db88a);
  box-shadow: 0 6px 18px rgba(45, 72, 96, 0.12);
}
.first-org-modal-cta-primary {
  background: rgba(141, 184, 138, 0.08);
  border-color: var(--green, #8db88a);
}
.first-org-modal-cta-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
}
.first-org-modal-cta-sub {
  font-size: 0.85rem;
  color: var(--muted, #6c7a88);
}
.first-org-modal-questions {
  background: rgba(157, 195, 214, 0.08);
  border-left: 3px solid var(--blue, #9DC3D6);
  border-radius: 8px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.25rem;
}
.first-org-modal-questions-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--blue-dark, #2d4860);
  margin-bottom: 0.6rem;
}
.first-org-modal-questions-list {
  list-style: none;
  padding: 0;
  margin: 0 0 0.65rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.first-org-modal-questions-list li {
  position: relative;
  padding-left: 1.1rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  color: var(--navy, #2d4860);
  line-height: 1.45;
}
.first-org-modal-questions-list li::before {
  content: '·';
  position: absolute;
  left: 0;
  color: var(--blue, #9DC3D6);
  font-weight: 700;
}
.first-org-modal-questions-hint {
  font-size: 0.82rem;
  color: var(--muted, #6c7a88);
  font-style: italic;
  line-height: 1.5;
}
.first-org-modal-skip {
  display: block;
  background: transparent;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--muted, #6c7a88);
  cursor: pointer;
  padding: 0.5rem 0;
  margin: 0 auto;
}
.first-org-modal-skip:hover { color: var(--navy, #2d4860); }

/* First-story capture modal (second screen) */
.first-story-capture-box { max-width: 640px; }
.first-story-input {
  width: 100%;
  box-sizing: border-box;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-family: inherit;
  font-size: 1rem;
  color: var(--text, #2d4860);
  background: #fafbfc;
  transition: border-color 0.15s, background 0.15s;
  margin-bottom: 0.85rem;
}
.first-story-input:focus {
  outline: none;
  border-color: var(--green, #8db88a);
  background: white;
}
.first-story-title-input {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
}
.first-story-body-input {
  resize: vertical;
  min-height: 180px;
  line-height: 1.55;
}
.first-story-modal-actions { margin-top: 0.5rem; }

/* Admin: Email Sends tracker (Sent tab) */
.admin-sent-section {
  background: white;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 14px;
  padding: 1.75rem 1.5rem;
}
.admin-sent-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.25rem;
  flex-wrap: wrap;
}
.admin-sent-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  margin: 0 0 0.3rem;
}
.admin-sent-sub {
  font-size: 0.9rem;
  color: var(--muted, #6c7a88);
  line-height: 1.5;
  margin: 0;
  max-width: 640px;
}
.admin-sent-actions {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.admin-sent-refresh, .admin-sent-csv-btn {
  display: inline-block;
  padding: 0.55rem 1rem;
  font-size: 0.88rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  border-radius: 999px;
  cursor: pointer;
  text-decoration: none;
  border: 1px solid var(--border, #e5e5e5);
  background: white;
  color: var(--navy, #2d4860);
  transition: background 0.15s, border-color 0.15s;
}
.admin-sent-refresh:hover { background: rgba(45,72,96,0.05); }
.admin-sent-csv-btn {
  background: var(--navy, #2d4860);
  color: white;
  border-color: var(--navy, #2d4860);
}
.admin-sent-csv-btn:hover { background: #3a5a78; }
.admin-sent-status {
  font-size: 0.88rem;
  color: var(--muted, #6c7a88);
  margin-bottom: 0.85rem;
  font-style: italic;
}
.admin-sent-table-wrap {
  overflow-x: auto;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
}
.admin-sent-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.admin-sent-table th, .admin-sent-table td {
  text-align: left;
  padding: 0.65rem 0.85rem;
  border-bottom: 1px solid #eef0f2;
  vertical-align: top;
}
.admin-sent-table th {
  background: rgba(45,72,96,0.04);
  color: var(--navy, #2d4860);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  position: sticky;
  top: 0;
}
.admin-sent-table tbody tr:hover { background: rgba(157,195,214,0.06); }
.admin-sent-table tbody tr:last-child td { border-bottom: none; }
.admin-sent-col-time { white-space: nowrap; min-width: 160px; }
.admin-sent-col-num { text-align: right; white-space: nowrap; }
.admin-sent-template {
  font-family: 'Menlo', monospace;
  font-size: 0.82rem;
  background: rgba(45,72,96,0.06);
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  color: var(--navy, #2d4860);
}

/* Admin: Comp an Org form */
.admin-comp-section {
  background: white;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 14px;
  padding: 2rem;
  max-width: 760px;
}
.admin-comp-header { margin-bottom: 1.5rem; }
.admin-comp-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  margin: 0 0 0.4rem;
}
.admin-comp-sub {
  font-size: 0.92rem;
  color: var(--muted, #6c7a88);
  line-height: 1.55;
  margin: 0;
}
.admin-comp-form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.admin-comp-row { display: flex; flex-direction: column; gap: 0.35rem; }
.admin-comp-row-double {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
}
.admin-comp-row-double > div { display: flex; flex-direction: column; gap: 0.35rem; }
.admin-comp-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted, #6c7a88);
}
.admin-comp-input {
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  padding: 0.7rem 0.85rem;
  font-size: 0.95rem;
  font-family: inherit;
  color: var(--text, #2d4860);
  background: white;
  width: 100%;
  box-sizing: border-box;
}
.admin-comp-input:focus {
  outline: none;
  border-color: var(--navy, #2d4860);
}
.admin-comp-hint {
  font-size: 0.78rem;
  color: var(--muted, #6c7a88);
  font-style: italic;
}
.admin-comp-actions { margin-top: 0.5rem; }
.admin-comp-submit {
  display: inline-flex;
  padding: 0.85rem 1.6rem;
  background: var(--navy, #2d4860);
  color: white;
  border: none;
  border-radius: 999px;
  font-size: 0.95rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: background 0.2s, transform 0.15s;
}
.admin-comp-submit:hover {
  background: #3a5a78;
  transform: translateY(-1px);
}
.admin-comp-result {
  margin-top: 1.5rem;
}
.admin-comp-status, .admin-comp-error {
  padding: 0.85rem 1rem;
  border-radius: 8px;
  font-size: 0.92rem;
}
.admin-comp-status {
  background: rgba(157, 195, 214, 0.1);
  color: var(--navy, #2d4860);
}
.admin-comp-error {
  background: #fdf2f0;
  color: #c0392b;
  border: 1px solid #f5c8c0;
}
.admin-comp-success {
  padding: 1.25rem 1.4rem;
  background: rgba(141, 184, 138, 0.08);
  border: 1px solid rgba(141, 184, 138, 0.45);
  border-radius: 10px;
}
.admin-comp-success-title {
  font-weight: 600;
  font-size: 1.05rem;
  color: var(--navy, #2d4860);
  margin-bottom: 0.6rem;
}
.admin-comp-success-meta {
  font-size: 0.88rem;
  color: var(--text, #2d4860);
  margin-bottom: 0.4rem;
}
.admin-comp-invite-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0.65rem 0 0.6rem;
}
.admin-comp-invite-url {
  flex: 1;
  border: 1px solid var(--border, #e5e5e5);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-size: 0.85rem;
  font-family: 'Menlo', monospace;
  background: white;
  color: var(--navy, #2d4860);
}
.admin-comp-copy-btn {
  padding: 0.6rem 1rem;
  background: var(--navy, #2d4860);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
.admin-comp-copy-btn:hover { background: #3a5a78; }
.admin-comp-success-hint {
  font-size: 0.83rem;
  color: var(--muted, #6c7a88);
  line-height: 1.5;
  margin-top: 0.5rem;
  font-style: italic;
}
.admin-comp-welcome-row {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(45, 72, 96, 0.18);
}
.admin-comp-welcome-link {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
  margin-right: 1.5rem;
}
.admin-comp-welcome-link:hover { opacity: 0.7; }
.admin-comp-welcome-test-btn {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: white;
  background: var(--green, #8db88a);
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  cursor: pointer;
  transition: background 0.2s;
}
.admin-comp-welcome-test-btn:hover { background: #7ca77a; }
.admin-comp-welcome-test-btn:disabled { opacity: 0.6; cursor: default; }
.admin-comp-welcome-hint {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.82rem;
  color: var(--muted, #6c7a88);
  font-style: italic;
  line-height: 1.5;
}

/* Personal Pathway — three-step ladder for individual users:
   Personal → Personal+ → Organization. Same panel idiom as the org
   pricing pathway but a smaller, simpler grid. */
.personal-pathway {
  display: grid;
  grid-template-columns: 1fr 32px 1fr 32px 1fr;
  align-items: stretch;
  gap: 0.5rem;
  padding: 0.5rem 0.25rem;
}
.personal-pathway-step {
  text-align: center;
  padding: 1.1rem 1rem 1.2rem;
  border-radius: 12px;
  border: 1.5px solid var(--border, #e5e5e5);
  background: white;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
}
.personal-pathway-step.personal-pathway-current {
  border-color: var(--green, #8db88a);
  background: rgba(141, 184, 138, 0.06);
  box-shadow: 0 4px 14px rgba(141, 184, 138, 0.15);
}
.personal-pathway-step.personal-pathway-graduate {
  border-color: rgba(157, 195, 214, 0.6);
  background: rgba(157, 195, 214, 0.05);
}
.personal-pathway-marker {
  font-size: 0.8rem;
  color: var(--navy, #2d4860);
  margin-bottom: 0.4rem;
  line-height: 1;
}
.personal-pathway-current .personal-pathway-marker { color: var(--green, #8db88a); }
.personal-pathway-graduate .personal-pathway-marker { color: var(--blue, #9DC3D6); }
.personal-pathway-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  margin-bottom: 0.25rem;
  line-height: 1.1;
}
.personal-pathway-price {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  margin-bottom: 0.45rem;
  line-height: 1;
}
.personal-pathway-period {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--muted, #6c7a88);
}
.personal-pathway-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: var(--navy, #2d4860);
  line-height: 1.35;
  margin-bottom: 0.4rem;
  padding: 0 0.25rem;
}
.acct-section-hint-early {
  display: block;
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: var(--muted, #6c7a88);
  font-style: italic;
}
.personal-pathway-meta {
  font-size: 0.82rem;
  color: var(--muted, #6c7a88);
  line-height: 1.4;
  margin-bottom: 0.6rem;
  flex: 1;
}
.personal-pathway-cta {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  text-decoration: none;
  border-bottom: 1.5px solid currentColor;
  padding-bottom: 1px;
  margin-top: auto;
}
.personal-pathway-cta:hover { opacity: 0.7; }
.personal-pathway-connector {
  height: 1.5px;
  background: rgba(45, 72, 96, 0.15);
  align-self: center;
  border-radius: 1px;
}
.personal-pathway-connector-graduate {
  background: repeating-linear-gradient(
    to right,
    rgba(45, 72, 96, 0.2) 0 6px,
    transparent 6px 12px
  );
  height: 1.5px;
}
@media (max-width: 720px) {
  .personal-pathway {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .personal-pathway-connector {
    width: 1.5px;
    height: 20px;
    margin: 0 auto;
  }
  .personal-pathway-connector-graduate {
    width: 1.5px;
    height: 20px;
    background: repeating-linear-gradient(
      to bottom,
      rgba(45, 72, 96, 0.2) 0 6px,
      transparent 6px 12px
    );
  }
}

/* Pricing Pathway — the gorgeous wave */
.pricing-pathway {
  background: linear-gradient(180deg, rgba(228, 240, 247, 0.6), rgba(252, 248, 240, 0.4));
  border: 1px solid rgba(108, 149, 179, 0.15);
  border-radius: 14px;
  padding: 1.6rem 1.4rem 1.8rem;
  overflow-x: auto;
}
.pp-track {
  display: flex;
  align-items: stretch;
  gap: 0.4rem;
  min-width: 700px;
}
.pp-stop {
  flex: 1 1 0;
  min-width: 110px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.5rem 0.4rem;
  position: relative;
}
.pp-stop-node {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: #fff;
  border: 2px solid rgba(108, 149, 179, 0.45);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: rgba(45, 72, 96, 0.5);
  margin-bottom: 0.6rem;
  transition: background 0.2s, border-color 0.2s, color 0.2s, transform 0.2s;
}
.pp-stop-occupied .pp-stop-node {
  background: linear-gradient(135deg, #6c95b3, #5a83a1);
  border-color: #4a7390;
  color: #fff;
  transform: scale(1.08);
  box-shadow: 0 2px 8px rgba(45, 72, 96, 0.15);
}
.pp-stop-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.005em;
  margin-bottom: 0.15rem;
}
.pp-stop-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  color: rgba(45, 72, 96, 0.55);
  margin-bottom: 0.35rem;
  line-height: 1.3;
}
.pp-stop-price {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(45, 72, 96, 0.7);
  letter-spacing: 0.01em;
}
.pp-stop-markers {
  margin-top: 0.7rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.3rem;
  width: 100%;
}
.pp-marker {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.25rem 0.7rem;
  border-radius: 999px;
  background: #fff;
  border: 1px solid rgba(108, 149, 179, 0.4);
  color: var(--navy);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.pp-marker-self {
  background: rgba(124, 158, 124, 0.18);
  border-color: rgba(124, 158, 124, 0.5);
  color: #4a7c59;
}
.pp-marker-org {
  background: rgba(228, 240, 247, 0.95);
  border-color: rgba(108, 149, 179, 0.55);
  color: #2d4860;
}
.pp-arrow {
  flex: 0 0 24px;
  align-self: center;
  height: 2px;
  background: linear-gradient(90deg, rgba(108, 149, 179, 0.18), rgba(108, 149, 179, 0.6), rgba(108, 149, 179, 0.18));
  border-radius: 1px;
  position: relative;
  margin-top: -1.5rem;
}
.pp-arrow::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -3px;
  width: 8px;
  height: 8px;
  border-top: 2px solid rgba(108, 149, 179, 0.6);
  border-right: 2px solid rgba(108, 149, 179, 0.6);
  transform: rotate(45deg);
}

/* Article card — agent-is-reading state for articles still being summarized */
.art-card-reading {
  display: flex; align-items: center; gap: 0.45rem;
  margin: 0.5rem 0 0.35rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
  color: rgba(45, 72, 96, 0.55);
  font-style: italic;
}
.art-card-reading-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: #7c9e7c;
  animation: art-read-pulse 1.4s infinite ease-in-out;
}
.art-card-reading-dot:nth-child(2) { animation-delay: 0.2s; }
.art-card-reading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes art-read-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.8); }
  40% { opacity: 1; transform: scale(1.15); }
}
.art-card-reading-text { margin-left: 0.2rem; }

.art-card-failed {
  display: flex; align-items: center; justify-content: space-between; gap: 0.6rem;
  margin: 0.5rem 0 0.35rem;
  padding: 0.55rem 0.75rem;
  background: rgba(194, 85, 85, 0.06);
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
  color: rgba(45, 72, 96, 0.7);
}
.art-card-failed-text {
  font-style: italic;
}
.art-card-retry {
  background: #fff;
  border: 1px solid rgba(108, 149, 179, 0.5);
  color: var(--navy);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.art-card-retry:hover { background: rgba(228, 240, 247, 0.85); }

/* Long summary truncation + click-to-expand hint */
.art-card-note-truncated {
  position: relative;
  max-height: 6.5em;
  overflow: hidden;
}
.art-card-note-truncated::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 1.6em;
  background: linear-gradient(180deg, transparent, #fff);
  pointer-events: none;
}
.art-card-expand-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #6c95b3;
  margin-top: 0.4rem;
  letter-spacing: 0.02em;
}

/* Articles density toggle (Full vs Compact) */
.articles-density-toggle {
  display: inline-flex;
  gap: 0.2rem;
  background: rgba(45, 72, 96, 0.05);
  border-radius: 999px;
  padding: 0.2rem;
}
.adt-btn {
  background: transparent;
  border: none;
  width: 30px; height: 26px;
  border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  cursor: pointer;
  color: rgba(45, 72, 96, 0.5);
  transition: background 0.12s, color 0.12s;
}
.adt-btn:hover { color: rgba(45, 72, 96, 0.8); }
.adt-btn.adt-active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(45, 72, 96, 0.1);
}

/* Compact list row for the zoom-out view */
.art-row {
  display: grid;
  grid-template-columns: 1.6fr 0.7fr 1.2fr 0.5fr 28px;
  gap: 0.65rem;
  align-items: center;
  padding: 0.55rem 0.85rem;
  border-bottom: 1px solid rgba(45, 72, 96, 0.06);
  cursor: pointer;
  transition: background 0.12s;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  color: var(--navy);
  position: relative;
}
.art-row:hover { background: rgba(228, 240, 247, 0.4); }
.art-row-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.art-row-host {
  font-size: 0.75rem;
  color: rgba(45, 72, 96, 0.55);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.art-row-tags {
  display: flex; gap: 0.3rem; flex-wrap: nowrap; overflow: hidden;
}
.art-row-tag {
  font-size: 0.7rem;
  padding: 0.12rem 0.5rem;
  border-radius: 999px;
  background: rgba(108, 149, 179, 0.12);
  color: rgba(45, 72, 96, 0.75);
  white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
  max-width: 110px;
}
.art-row-state {
  font-size: 0.7rem;
  color: rgba(45, 72, 96, 0.5);
  font-style: italic;
  padding: 0.12rem 0.5rem;
}
.art-row-state-failed { color: rgba(194, 85, 85, 0.75); }
.art-row-date {
  font-size: 0.74rem;
  color: rgba(45, 72, 96, 0.55);
  font-variant-numeric: tabular-nums;
  text-align: right;
}
.art-row-delete {
  background: transparent;
  border: none;
  color: rgba(45, 72, 96, 0.35);
  cursor: pointer;
  font-size: 0.85rem;
  width: 24px; height: 24px;
  border-radius: 50%;
  transition: background 0.12s, color 0.12s;
}
.art-row-delete:hover {
  background: rgba(194, 85, 85, 0.12);
  color: rgba(194, 85, 85, 0.85);
}

/* Token confirmation block on the iPad Shortcut install card */
.connection-token-confirm {
  background: rgba(252, 244, 232, 0.65);
  border: 1px solid rgba(214, 168, 122, 0.3);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  margin: 0.85rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.ctc-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(45, 72, 96, 0.55);
  text-transform: uppercase;
}
.ctc-email {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  word-break: break-all;
}
.ctc-preview {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.74rem;
  color: rgba(45, 72, 96, 0.6);
}
.ctc-preview code {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  background: rgba(45, 72, 96, 0.06);
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}
.ctc-warning {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  color: #b07d4a;
  margin-top: 0.2rem;
}

/* Short shortcut key card — the human-readable credential for the iPad Shortcut */
.connection-shortcut-key-card {
  background: linear-gradient(135deg, rgba(228, 240, 247, 0.65), rgba(252, 248, 240, 0.45));
  border: 1px solid rgba(108, 149, 179, 0.3);
  border-radius: 12px;
  padding: 1.1rem 1.2rem 1rem;
  margin: 0.85rem 0;
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.csk-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(45, 72, 96, 0.55);
  text-transform: uppercase;
}
.csk-key-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.csk-key {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.45rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--navy);
  background: #fff;
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(45, 72, 96, 0.1);
  user-select: all;
}
.csk-copy-btn {
  background: #6c95b3;
  color: #fff;
  border: none;
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.csk-copy-btn:hover { background: #5a83a1; }
.csk-account {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.82rem;
  color: rgba(45, 72, 96, 0.7);
}
.csk-account strong {
  color: var(--navy);
}
.csk-explainer {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(45, 72, 96, 0.65);
  line-height: 1.5;
}
.csk-explainer a {
  color: #c47e6c;
  text-decoration: underline;
  cursor: pointer;
}

/* iPad Notes → LWH connection — rebuilt clean 2-step component */
.connection-card-shortcut .connection-card-body { gap: 0.85rem; }
.csi-step {
  background: #fff;
  border: 1px solid rgba(45, 72, 96, 0.08);
  border-radius: 12px;
  padding: 1rem 1.15rem 1.05rem;
  margin-top: 0.75rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.csi-step-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.csi-step-num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px; height: 26px;
  border-radius: 50%;
  background: linear-gradient(135deg, #6c95b3, #5a83a1);
  color: #fff;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  flex-shrink: 0;
}
.csi-step-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
}
.csi-step-body {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  margin-left: 0.1rem;
}
.csi-key-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
}
.csi-key {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 1.3rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--navy);
  background: rgba(228, 240, 247, 0.55);
  padding: 0.5rem 0.9rem;
  border-radius: 8px;
  border: 1px solid rgba(108, 149, 179, 0.3);
  user-select: all;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
}
.csi-key-copy {
  background: #6c95b3;
  color: #fff;
  border: none;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.csi-key-copy:hover { background: #5a83a1; }
.csi-key-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(45, 72, 96, 0.65);
  line-height: 1.5;
}
.csi-key-meta strong {
  color: var(--navy);
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
}
.csi-install-btn {
  display: inline-block;
  background: linear-gradient(135deg, #c47e6c, #b56a59);
  color: #fff;
  text-decoration: none;
  padding: 0.65rem 1.3rem;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  text-align: center;
  align-self: flex-start;
  transition: background 0.15s, transform 0.1s;
}
.csi-install-btn:hover {
  background: linear-gradient(135deg, #b56a59, #a55a48);
  transform: translateY(-1px);
}
.csi-install-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(45, 72, 96, 0.6);
  font-style: italic;
}
.csi-outcome {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  background: rgba(124, 158, 124, 0.12);
  border: 1px solid rgba(124, 158, 124, 0.28);
  border-radius: 10px;
  padding: 0.8rem 1rem;
  margin-top: 0.75rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.86rem;
  color: var(--navy);
  line-height: 1.55;
}
.csi-outcome-icon {
  color: #4a7c59;
  font-weight: 700;
  flex-shrink: 0;
}
.csi-footer {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px solid rgba(45, 72, 96, 0.06);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.76rem;
  color: rgba(45, 72, 96, 0.5);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.csi-footer a {
  color: rgba(45, 72, 96, 0.6);
  text-decoration: underline;
  cursor: pointer;
}
.csi-footer a:hover { color: var(--navy); }
.csi-footer-sep { color: rgba(45, 72, 96, 0.3); }

/* Note detail modal — article summary + source blocks */
.note-detail-article-summary {
  background: linear-gradient(135deg, rgba(232, 240, 232, 0.65), rgba(252, 248, 240, 0.5));
  border: 1px solid rgba(124, 158, 124, 0.25);
  border-radius: 12px;
  padding: 1rem 1.2rem 0.85rem;
  margin: 0.7rem 0 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.note-detail-article-summary-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #4a7c59;
  text-transform: uppercase;
}
.note-detail-article-summary-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--navy);
}
.note-detail-article-summary-failed {
  color: rgba(45, 72, 96, 0.7);
  font-style: italic;
  font-size: 0.92rem;
}
/* HOW CONNECTION — one line keyed to this user's HOW. Sits visually below
   the article summary as a distinct, slightly tinted block so it reads as
   "and here's where it lands in YOUR work" — not just more summary. */
.note-detail-article-how-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: #c47e6c;
  text-transform: uppercase;
  margin-top: 0.6rem;
}
.note-detail-article-how-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--navy);
  background: rgba(196, 126, 108, 0.06);
  border-left: 2px solid rgba(196, 126, 108, 0.4);
  padding: 0.5rem 0.85rem;
  border-radius: 0 6px 6px 0;
}
.note-detail-article-resummary {
  align-self: flex-start;
  background: #fff;
  border: 1px solid rgba(108, 149, 179, 0.45);
  color: var(--navy);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 0.2rem;
}
.note-detail-article-resummary:hover { background: rgba(228, 240, 247, 0.9); }

.note-detail-article-source {
  margin: 0.55rem 0;
  border-top: 1px solid rgba(45, 72, 96, 0.06);
  padding-top: 0.55rem;
}
.note-detail-article-source-toggle {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(45, 72, 96, 0.55);
  cursor: pointer;
  list-style: none;
}
.note-detail-article-source-toggle::before {
  content: '▸ ';
  font-size: 0.7rem;
}
details[open] .note-detail-article-source-toggle::before { content: '▾ '; }
.note-detail-article-source-body {
  font-family: 'JetBrains Mono', ui-monospace, monospace;
  font-size: 0.78rem;
  color: rgba(45, 72, 96, 0.7);
  background: rgba(45, 72, 96, 0.03);
  padding: 0.85rem 1rem;
  border-radius: 8px;
  margin-top: 0.5rem;
  max-height: 280px;
  overflow-y: auto;
  white-space: pre-wrap;
  word-break: break-word;
}

/* Doc upload — drag-over state and folder-upload row */
.doc-upload-zone.drag-over {
  background: rgba(228, 240, 247, 0.4) !important;
  border-color: rgba(108, 149, 179, 0.6) !important;
}
.doc-upload-folder-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(45, 72, 96, 0.08);
}
.doc-upload-or {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(45, 72, 96, 0.5);
}
.doc-upload-folder-btn {
  background: rgba(228, 240, 247, 0.6);
  border: 1px solid rgba(108, 149, 179, 0.4);
  color: var(--navy);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.86rem;
  font-weight: 600;
  padding: 0.55rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.doc-upload-folder-btn:hover {
  background: rgba(228, 240, 247, 0.95);
  border-color: rgba(108, 149, 179, 0.7);
}

/* Bulk upload modal */
.bulk-upload-overlay {
  position: fixed; inset: 0;
  background: rgba(45, 72, 96, 0.45);
  backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  z-index: 1000;
  padding: 1.5rem;
}
.bulk-upload-card {
  background: #fff;
  border-radius: 18px;
  padding: 2rem 2rem 1.5rem;
  max-width: 620px; width: 100%; max-height: 80vh;
  display: flex; flex-direction: column;
  position: relative;
  box-shadow: 0 24px 60px rgba(45, 72, 96, 0.3);
}
.bulk-upload-close {
  position: absolute; top: 1rem; right: 1rem;
  background: transparent; border: none; cursor: pointer;
  font-size: 1.2rem; color: rgba(45, 72, 96, 0.5);
  width: 32px; height: 32px;
}
.bulk-upload-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.18em;
  color: #7c9e7c; text-transform: uppercase;
  margin-bottom: 0.5rem;
}
.bulk-upload-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem; color: var(--navy);
  margin: 0 0 0.4rem;
}
.bulk-upload-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.9rem; color: rgba(45, 72, 96, 0.65);
  margin: 0 0 1.2rem;
}
.bulk-upload-body { flex: 1; overflow-y: auto; }
.bulk-upload-progress {
  display: flex; align-items: center; gap: 0.45rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem; color: rgba(45, 72, 96, 0.6);
  padding: 1rem 0;
}
.bulk-upload-progress-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: #6c95b3;
  animation: bul-pulse 1.4s infinite ease-in-out;
}
.bulk-upload-progress-dot:nth-child(2) { animation-delay: 0.2s; }
.bulk-upload-progress-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes bul-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(0.85); }
  40% { opacity: 1; transform: scale(1.1); }
}
.bulk-upload-results {
  display: flex; flex-direction: column; gap: 0.4rem;
}
.bul-row {
  display: flex; justify-content: space-between; align-items: center; gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.84rem;
}
.bul-row-ok { background: rgba(124, 158, 124, 0.08); }
.bul-row-skip { background: rgba(45, 72, 96, 0.04); }
.bul-row-err { background: rgba(194, 85, 85, 0.08); }
.bul-name {
  flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  color: var(--navy);
}
.bul-kind {
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.08em;
  text-transform: uppercase; color: #4a7c59;
  background: #fff;
  padding: 0.2rem 0.55rem; border-radius: 999px;
  margin-right: 0.4rem;
}
.bul-theme {
  font-size: 0.72rem; color: rgba(45, 72, 96, 0.7);
  font-style: italic;
}
.bul-reason {
  font-size: 0.78rem; color: rgba(45, 72, 96, 0.55); font-style: italic;
}
.bulk-upload-actions {
  display: flex; gap: 0.6rem; margin-top: 1.2rem; justify-content: flex-end;
}
.bulk-upload-action {
  background: #6c95b3; color: #fff; border: none;
  padding: 0.65rem 1.2rem; border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.86rem; font-weight: 600;
  cursor: pointer;
}
.bulk-upload-action:hover { background: #5a83a1; }
.bulk-upload-action-secondary {
  background: #fff; color: var(--navy);
  border: 1px solid rgba(45, 72, 96, 0.18);
}
.bulk-upload-action-secondary:hover { background: rgba(45, 72, 96, 0.04); }

/* Org Owner Dashboard Snapshot strip */
.dash-snapshot-wrap {
  max-width: 1080px;
  margin: 0 auto 1.5rem;
  padding: 0 1.5rem;
}
.dash-snapshot-wrap.hidden { display: none; }
.dash-snapshot-strip {
  display: grid;
  grid-template-columns: 1fr 1.6fr 1fr;
  gap: 1rem;
  margin-bottom: 1rem;
}
.dash-snap-card {
  background: rgba(255, 255, 255, 0.6);
  border: 1px solid rgba(45, 72, 96, 0.08);
  border-radius: 14px;
  padding: 1.2rem 1.35rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.dash-snap-value {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.dash-snap-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.55);
}
.dash-snap-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(45, 72, 96, 0.6);
  margin-top: 0.2rem;
}
.dash-snap-impact {
  background: linear-gradient(135deg, rgba(232, 240, 232, 0.6), rgba(252, 248, 240, 0.5));
  border-color: rgba(124, 158, 124, 0.22);
}
.dash-snap-impact-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.45;
  margin-top: 0.25rem;
}
.dash-snap-impact-empty {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.5);
  margin-top: 0.25rem;
}
/* Recent moments feed */
.dash-moments {
  background: rgba(252, 248, 240, 0.55);
  border: 1px solid rgba(45, 72, 96, 0.07);
  border-radius: 14px;
  padding: 1.05rem 1.35rem;
}
.dash-moments-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.55);
  margin-bottom: 0.65rem;
}
.dash-moments-list {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.dash-moment {
  display: flex;
  align-items: baseline;
  gap: 0.55rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.88rem;
  color: var(--navy);
  padding: 0.4rem 0;
  border-bottom: 1px solid rgba(45, 72, 96, 0.05);
}
.dash-moment:last-child { border-bottom: none; }
.dash-moment-icon {
  font-size: 1rem;
  color: #7c9e7c;
  flex-shrink: 0;
}
.dash-moment-text { line-height: 1.5; }
.dash-moment-streak .dash-moment-icon { color: #c47e6c; }
.dash-moment-milestone .dash-moment-icon { color: #6c95b3; }
@media (max-width: 760px) {
  .dash-snapshot-strip { grid-template-columns: 1fr; }
}

/* Global Context Pill — gentle "you're in X" indicator on every in-app screen */
.global-context-pill {
  position: fixed;
  top: 14px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(45, 72, 96, 0.14);
  border-radius: 999px;
  padding: 0.4rem 0.9rem 0.4rem 0.9rem;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  color: var(--navy);
  cursor: pointer;
  box-shadow: 0 2px 12px rgba(45, 72, 96, 0.08);
  transition: background 0.15s, border-color 0.15s, transform 0.12s;
}
.global-context-pill:hover {
  background: #fff;
  border-color: rgba(45, 72, 96, 0.25);
  transform: translateX(-50%) translateY(-1px);
}
.global-context-pill.gcp-personal { border-left: 3px solid #7c9e7c; }
.global-context-pill.gcp-org { border-left: 3px solid #6c95b3; }
.gcp-eyebrow {
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.5);
}
.gcp-name {
  font-weight: 600;
  color: var(--navy);
  max-width: 220px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.gcp-caret { opacity: 0.5; }
.gcp-switcher {
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border: 1px solid rgba(45, 72, 96, 0.12);
  border-radius: 12px;
  padding: 0.55rem;
  min-width: 240px;
  box-shadow: 0 10px 32px rgba(45, 72, 96, 0.14);
  cursor: default;
}
.gcp-switcher-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.55);
  padding: 0.35rem 0.65rem 0.5rem;
}
.gcp-switcher-list {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.gcp-switcher-item {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: transparent;
  border: none;
  width: 100%;
  padding: 0.55rem 0.7rem;
  border-radius: 8px;
  cursor: pointer;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.86rem;
  color: var(--navy);
  text-align: left;
  transition: background 0.12s;
}
.gcp-switcher-item:hover { background: rgba(228, 240, 247, 0.6); }
.gcp-switcher-item-active { background: rgba(124, 158, 124, 0.1); font-weight: 600; }
.gcp-switcher-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.gcp-dot-personal { background: #7c9e7c; }
.gcp-dot-org { background: #6c95b3; }
.gcp-switcher-item-name { flex: 1; }
.gcp-switcher-active-tag {
  font-size: 0.66rem;
  color: rgba(45, 72, 96, 0.5);
  font-weight: 500;
  letter-spacing: 0.04em;
}
.gcp-switcher-loading,
.gcp-switcher-empty {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.8rem;
  color: rgba(45, 72, 96, 0.45);
  font-style: italic;
  padding: 0.5rem 0.65rem;
}
.email-editor-status.ok { color: #4a7c59; }
.email-editor-status.err { color: #c25555; }
.email-editor-send-row {
  margin-top: 1rem;
  padding: 1rem 1.1rem;
  border-radius: 12px;
  background: rgba(228, 240, 247, 0.55);
  border: 1px solid rgba(108, 149, 179, 0.22);
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.email-editor-send-head { display: flex; flex-direction: column; gap: 0.15rem; }
.email-editor-send-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  letter-spacing: -0.005em;
}
.email-editor-send-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(45, 72, 96, 0.55);
}
.email-editor-send-controls {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: wrap;
}
.email-editor-send-test,
.email-editor-send-go {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  padding: 0.55rem 0.95rem;
  border-radius: 999px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
  white-space: nowrap;
}
.email-editor-send-test {
  background: #fff;
  border-color: rgba(108, 149, 179, 0.45);
  color: var(--navy);
}
.email-editor-send-test:hover { background: rgba(228, 240, 247, 0.85); }
.email-editor-send-go {
  background: #6c95b3;
  color: #fff;
  border-color: #6c95b3;
}
.email-editor-send-go:hover { background: #5a83a1; border-color: #5a83a1; }
.email-editor-send-audience,
.email-editor-send-to {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  padding: 0.5rem 0.7rem;
  border: 1px solid rgba(45, 72, 96, 0.15);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  min-width: 0;
}
.email-editor-send-audience { min-width: 160px; }
.email-editor-send-to { flex: 1 1 220px; min-width: 200px; }
.email-editor-send-custom {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.85rem;
  padding: 0.6rem 0.75rem;
  border: 1px solid rgba(45, 72, 96, 0.15);
  border-radius: 8px;
  background: #fff;
  color: var(--navy);
  min-height: 72px;
  resize: vertical;
}
.email-editor-send-custom.hidden { display: none; }
.email-editor-send-count {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.78rem;
  color: rgba(45, 72, 96, 0.6);
  min-height: 1em;
}

/* Documents page: clean card layout with delete + Summary */
.doc-page-card {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.12);
  border-radius: 12px;
  padding: 1.1rem 1.1rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
  position: relative;
}
.doc-page-card:hover { transform: translateY(-2px); border-color: rgba(45,72,96,0.22); box-shadow: 0 4px 14px rgba(45,72,96,0.06); }
.doc-page-card-head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 0.25rem;
}
.doc-page-card-icon { font-size: 1.6rem; line-height: 1; }
.doc-page-card-delete {
  background: transparent;
  border: 1px solid rgba(194, 85, 85, 0.20);
  color: rgba(194, 85, 85, 0.7);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  padding: 0;
}
.doc-page-card-delete:hover {
  background: #fff1ee;
  color: #c25555;
  border-color: #c25555;
}
.doc-page-card-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: #2d4860;
  line-height: 1.3;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  word-break: break-word;
}
.doc-page-card-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: rgba(45,72,96,0.5);
  font-style: italic;
  margin-top: 0.1rem;
}
.doc-page-card-actions {
  display: flex;
  justify-content: flex-start;
  margin-top: 0.6rem;
}
.doc-page-card-summary {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(232, 168, 152, 0.12);
  border: 1px solid rgba(232, 168, 152, 0.35);
  color: #c96649;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.doc-page-card-summary:hover { background: #E07A5F; color: #fff; border-color: #E07A5F; }
.doc-page-card-summary .dpcs-spark { font-size: 0.9rem; line-height: 1; }
.doc-page-card-nosummary {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: rgba(45,72,96,0.4);
  font-style: italic;
}

/* Summary modal */
.doc-summary-box { max-width: 640px; }
.doc-summary-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #c96649;
  margin-bottom: 0.5rem;
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.doc-summary-eyebrow .dpcs-spark { font-size: 0.95rem; }
.doc-summary-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2d4860;
  line-height: 1.25;
  margin: 0 0 0.4rem;
}
.doc-summary-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(45,72,96,0.55);
  margin-bottom: 1rem;
  letter-spacing: 0.01em;
}
.doc-summary-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.6;
  color: #2d4860;
  white-space: pre-wrap;
}
/* Document modal tabs — Summary | Pages | Chat.
   Soft pill-style design: subtle background + SVG icon + label.
   Active tab uses a warm parchment fill + coral text. Inactive tabs
   stay quiet so the active one reads as the focus point. */
.doc-tabs {
  display: flex;
  gap: 4px;
  margin: 20px 0 0;
  padding: 4px;
  background: rgba(45,72,96,0.04);
  border-radius: 12px;
  width: fit-content;
}
.doc-tab {
  background: transparent;
  border: 0;
  padding: 8px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: #6b7280;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 8px;
  transition: color 0.18s ease, background 0.18s ease, box-shadow 0.18s ease;
  outline: none;
}
.doc-tab:focus-visible {
  box-shadow: 0 0 0 2px rgba(45,106,79,0.30);
}
.doc-tab:hover:not(.doc-tab-active) {
  color: #1f2a37;
  background: rgba(45,72,96,0.04);
}
.doc-tab-active {
  background: #fff;
  color: var(--coral, #d97e6f);
  box-shadow: 0 1px 3px rgba(20,30,40,0.08), 0 0 0 1px rgba(217,126,111,0.18);
}
.doc-tab-icon {
  display: inline-flex;
  align-items: center;
  line-height: 1;
}
.doc-tab-icon svg {
  display: block;
}
.doc-tab-label {
  line-height: 1;
}

.doc-tab-panels {
  margin-top: 18px;
  min-height: 180px;
  max-height: 60vh;
  overflow-y: auto;
}
.doc-tab-panel { display: none; }
.doc-tab-panel-active { display: block; }

.doc-pages-loading,
.doc-pages-empty {
  font-family: 'Georgia', serif;
  font-style: italic;
  color: #6b7280;
  text-align: center;
  padding: 40px 0;
}

/* PDF embed in the Pages tab — toolbar with open-in-new-tab link,
   then a tall iframe rendering the real PDF via the browser's native
   viewer. */
.doc-pages-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border, #e6dcc4);
}
.doc-pages-pdf-open {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: var(--green, #2d6a4f);
  text-decoration: none;
  padding: 5px 12px;
  border: 1px solid rgba(45,106,79,0.30);
  border-radius: 999px;
  transition: background 0.15s ease, color 0.15s ease;
}
.doc-pages-pdf-open:hover {
  background: var(--green, #2d6a4f);
  color: #fff;
}
.doc-pages-pdf-frame {
  width: 100%;
  height: 70vh;
  min-height: 480px;
  border: 1px solid var(--border, #e6dcc4);
  border-radius: 8px;
  background: #fafaf6;
}

/* Notice shown when a PDF was uploaded before we started saving the
   original — text-only fallback with a hint to re-upload. */
.doc-pages-text-notice {
  background: #fbf6e8;
  border-left: 3px solid #d4a85c;
  padding: 10px 14px;
  margin-bottom: 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #5a3d00;
  border-radius: 4px;
}
.doc-pages-text-notice strong {
  color: #1f2a37;
}

.doc-chat-intro {
  text-align: center;
  padding: 22px 18px;
}
.doc-chat-intro p {
  font-family: 'Georgia', serif;
  font-size: 14px;
  line-height: 1.55;
  color: #4b5563;
  margin: 0 0 18px;
}
.doc-chat-open-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #f6a48d 0%, #d97e6f 100%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 10px 22px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  box-shadow: 0 3px 12px rgba(217,126,111,0.25);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.doc-chat-open-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(217,126,111,0.32);
}

.doc-summary-actions {
  display: flex;
  justify-content: flex-end;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid rgba(45,72,96,0.10);
}
.doc-summary-done {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: #fff;
  color: #2d4860;
  border: 1px solid rgba(45,72,96,0.22);
  padding: 0.55rem 1.2rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.doc-summary-done:hover {
  background: #4a7c59;
  color: #fff;
  border-color: #4a7c59;
}
.doc-summary-done .doc-summary-check { font-size: 0.95rem; line-height: 1; }
.doc-summary-done.reviewed {
  background: rgba(74, 124, 89, 0.08);
  color: #4a7c59;
  border-color: rgba(74, 124, 89, 0.35);
  cursor: default;
}

/* Doc page card: reviewed badge */
.doc-page-card-icon { position: relative; display: inline-flex; align-items: center; gap: 0.35rem; }
.doc-page-card-readmark {
  font-size: 0.7rem;
  font-weight: 700;
  color: #4a7c59;
  background: rgba(74, 124, 89, 0.12);
  border: 1px solid rgba(74, 124, 89, 0.3);
  border-radius: 999px;
  padding: 0.05rem 0.4rem;
  line-height: 1.2;
  letter-spacing: 0.02em;
  vertical-align: middle;
}
.doc-page-card.is-reviewed { border-color: rgba(74, 124, 89, 0.20); }

/* Doc capture modal: inline library list */
.doc-capture-box { max-height: 90vh; overflow-y: auto; }
.doc-capture-existing {
  margin-top: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid rgba(45,72,96,0.10);
}
.doc-capture-existing-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.6rem;
}
.doc-capture-existing-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.55);
}
.doc-capture-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: rgba(45,72,96,0.45);
}
.doc-capture-search {
  width: 100%;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  padding: 0.55rem 0.85rem;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 999px;
  background: #fafafa;
  color: #2d4860;
  margin-bottom: 0.75rem;
  box-sizing: border-box;
}
.doc-capture-search:focus { outline: none; border-color: rgba(224,122,95,0.5); background: #fff; }
.doc-capture-list { display: flex; flex-direction: column; gap: 0.5rem; max-height: 280px; overflow-y: auto; }
.doc-capture-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.6rem 0.85rem;
  background: rgba(245,245,240,0.55);
  border: 1px solid rgba(45,72,96,0.06);
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.doc-capture-item:hover { background: #fff; border-color: rgba(45,72,96,0.18); }
.doc-capture-item-icon { font-size: 1.3rem; flex-shrink: 0; }
.doc-capture-item-body { min-width: 0; flex: 1; }
.doc-capture-item-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1rem;
  font-weight: 600;
  color: #2d4860;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-capture-item-summary {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  color: rgba(45,72,96,0.6);
  margin-top: 0.15rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.doc-capture-item-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: rgba(45,72,96,0.45);
  font-style: italic;
  flex-shrink: 0;
}
.doc-capture-empty {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: rgba(45,72,96,0.5);
  text-align: center;
  padding: 1.5rem 1rem;
}
.doc-capture-loading {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: rgba(45,72,96,0.45);
  text-align: center;
  padding: 1rem;
}

/* Story saved: top banner */
.lwh-save-banner {
  position: fixed;
  top: 1.25rem;
  left: 50%;
  transform: translateX(-50%) translateY(-160%);
  z-index: 9000;
  background: linear-gradient(135deg, #E8A898 0%, #E07A5F 100%);
  color: #fff;
  border-radius: 14px;
  padding: 0.9rem 1.5rem 0.85rem 1.2rem;
  box-shadow: 0 12px 40px rgba(45,72,96,0.22), 0 4px 12px rgba(224,122,95,0.32);
  display: flex;
  align-items: center;
  gap: 0.85rem;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.55s cubic-bezier(0.34,1.56,0.64,1), opacity 0.35s ease;
  max-width: 92vw;
}
.lwh-save-banner.visible {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
}
.lwh-save-banner.hidden { display: none; }
.lwh-save-banner-icon {
  font-size: 1.4rem;
  line-height: 1;
  animation: lwh-save-sparkle 1.4s ease-in-out infinite;
}
@keyframes lwh-save-sparkle {
  0%, 100% { transform: scale(1) rotate(0deg); opacity: 0.85; }
  50%      { transform: scale(1.15) rotate(8deg); opacity: 1; }
}
.lwh-save-banner-text { min-width: 0; }
.lwh-save-banner-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  line-height: 1.2;
}
.lwh-save-banner-subtitle {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  opacity: 0.85;
  margin-top: 0.15rem;
  letter-spacing: 0.01em;
  font-style: italic;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 320px;
}

/* Milestone badge that fades in alongside the celebration text when the
   user crosses 1 / 5 / 10 / 25 / 50 / 100 stories. */
.lwh-save-banner-badge {
  background: rgba(124,158,124,0.95);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  padding: 0.4rem 0.7rem;
  border-radius: 999px;
  flex-shrink: 0;
  margin-left: 0.4rem;
  animation: lwh-badge-pop 0.6s cubic-bezier(0.34,1.56,0.64,1) both;
  box-shadow: 0 2px 8px rgba(45,72,96,0.18);
}
.lwh-save-banner-badge.hidden { display: none; }
@keyframes lwh-badge-pop {
  0%   { opacity: 0; transform: scale(0.5) rotate(-8deg); }
  60%  { opacity: 1; transform: scale(1.08) rotate(2deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}

/* Milestone variant — bigger, more visual weight. The base banner is
   subtle "story saved"; this is for the actual unlock moments. */
.lwh-save-banner.lwh-save-banner-milestone {
  background: linear-gradient(135deg, #7C9E7C 0%, #5D8665 50%, #2D4860 100%);
  padding: 1.05rem 1.7rem 1rem 1.4rem;
  box-shadow: 0 16px 50px rgba(45,72,96,0.32), 0 6px 18px rgba(124,158,124,0.32);
}
.lwh-save-banner.lwh-save-banner-milestone .lwh-save-banner-title {
  font-size: 1.3rem;
}
.lwh-save-banner.lwh-save-banner-milestone .lwh-save-banner-icon {
  font-size: 1.7rem;
}

/* ── Badge of Honor wall on My Account ────────────────────────────────── */
.acct-badge-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  color: var(--green);
  margin-left: 0.6rem;
  text-transform: uppercase;
}
.acct-badge-intro {
  font-size: 0.88rem;
  color: rgba(45,72,96,0.7);
  margin: 0 0 1.1rem;
  font-style: italic;
}
.acct-badge-grid {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.acct-badge-category {
  padding: 0;
}
.acct-badge-cat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 0.55rem;
  text-transform: uppercase;
}
.acct-badge-row {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 0.65rem;
}
.acct-badge-tile {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 12px;
  padding: 0.85rem 0.9rem;
  text-align: center;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.acct-badge-tile.acct-badge-earned {
  background: linear-gradient(135deg, rgba(124,158,124,0.10) 0%, rgba(255,255,255,1) 70%);
  border-color: rgba(124,158,124,0.45);
}
.acct-badge-tile.acct-badge-earned:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(124,158,124,0.18);
}
.acct-badge-tile.acct-badge-locked {
  opacity: 0.45;
  background: rgba(45,72,96,0.02);
}
.acct-badge-icon {
  font-size: 1.6rem;
  margin-bottom: 0.35rem;
  line-height: 1;
}
.acct-badge-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
}
.acct-badge-wins {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: var(--green);
  font-weight: 700;
  margin-left: 0.25rem;
}
.acct-badge-earned-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  color: var(--green);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-top: 0.3rem;
  font-weight: 600;
}
.acct-badge-criteria {
  font-size: 0.72rem;
  color: rgba(45,72,96,0.6);
  line-height: 1.35;
  margin-top: 0.3rem;
  font-style: italic;
}

/* ── Team Wall on org dashboard ──────────────────────────────────────── */
.dash-team-wall {
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 16px;
  padding: 1.4rem 1.6rem;
  margin: 1.5rem auto;
  max-width: 1100px;
}
.dash-team-wall.hidden { display: none; }
.tw-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 0.35rem;
}
.tw-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  color: var(--navy);
  margin: 0 0 1rem;
}
.tw-totals {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.7rem;
  margin-bottom: 1.3rem;
  padding-bottom: 1.1rem;
  border-bottom: 1px solid rgba(45,72,96,0.08);
}
.tw-total {
  text-align: center;
  padding: 0.6rem 0.4rem;
  background: rgba(232,168,152,0.06);
  border-radius: 10px;
}
.tw-total-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.65rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.tw-total-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.55);
  margin-top: 0.25rem;
}
.tw-members {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.7rem;
}
.tw-member {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 0.7rem;
  padding: 0.75rem 0.85rem;
  background: #fff;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 10px;
}
.tw-member-avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  overflow: hidden;
  background: var(--navy);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
}
.tw-member-avatar img { width: 100%; height: 100%; object-fit: cover; }
.tw-member-body { min-width: 0; }
.tw-member-name {
  font-weight: 600;
  font-size: 0.92rem;
  color: var(--navy);
}
.tw-member-counts {
  font-size: 0.78rem;
  color: rgba(45,72,96,0.65);
  margin-top: 0.2rem;
  display: flex; flex-wrap: wrap; gap: 0.5rem;
}
.tw-member-counts span:not(:last-child)::after { content: ' ·'; opacity: 0.4; }
.tw-member-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.4rem;
}
.tw-badge {
  background: rgba(124,158,124,0.15);
  color: var(--navy);
  font-size: 0.85rem;
  width: 26px; height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(124,158,124,0.35);
}
.tw-badge-more {
  background: transparent;
  color: rgba(45,72,96,0.6);
  font-size: 0.7rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

/* ── Story of the Week card ──────────────────────────────────────────── */
.dash-sotw {
  background: linear-gradient(135deg, rgba(124,158,124,0.10) 0%, rgba(232,168,152,0.08) 100%);
  border: 1px solid rgba(124,158,124,0.32);
  border-radius: 14px;
  padding: 1.1rem 1.4rem;
  margin: 1rem auto 1.5rem;
  max-width: 1100px;
}
.dash-sotw.hidden { display: none; }
.sotw-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--green);
  margin-bottom: 0.3rem;
}
.sotw-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  color: var(--navy);
  cursor: pointer;
  line-height: 1.25;
}
.sotw-title:hover { color: var(--green); }
.sotw-author {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(45,72,96,0.65);
  margin-top: 0.25rem;
  font-style: italic;
}

/* Save story: button transform + new story card highlight */
.btn-saved-pulse {
  background: #4a7c59 !important;
  color: #fff !important;
  animation: lwh-save-pulse 0.85s ease-out;
  box-shadow: 0 0 0 0 rgba(74, 124, 89, 0.55);
}
@keyframes lwh-save-pulse {
  0%   { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 124, 89, 0.55); }
  50%  { transform: scale(1.04); box-shadow: 0 0 0 14px rgba(74, 124, 89, 0); }
  100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(74, 124, 89, 0); }
}
.story-just-saved {
  animation: lwh-card-glow 3.2s ease-out;
  position: relative;
  z-index: 5;
}
@keyframes lwh-card-glow {
  0%   { box-shadow: 0 0 0 0 rgba(224, 122, 95, 0.55), 0 0 0 0 rgba(224, 122, 95, 0.35); transform: scale(1); }
  12%  { box-shadow: 0 0 0 10px rgba(224, 122, 95, 0.28), 0 0 36px 10px rgba(224, 122, 95, 0.38); transform: scale(1.025); }
  35%  { box-shadow: 0 0 0 6px rgba(224, 122, 95, 0.18), 0 0 24px 6px rgba(224, 122, 95, 0.22); transform: scale(1.01); }
  100% { box-shadow: 0 0 0 0 rgba(224, 122, 95, 0), 0 0 0 0 rgba(224, 122, 95, 0); transform: scale(1); }
}

/* Account: Recently Deleted Stories */
.acct-deleted-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 10px;
  margin-bottom: 0.6rem;
  background: #fff;
}
.acct-deleted-text { min-width: 0; flex: 1; }
.acct-deleted-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  color: #2d4860;
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.acct-deleted-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(45,72,96,0.6);
  margin-top: 0.2rem;
}
.acct-deleted-actions {
  display: flex;
  gap: 0.5rem;
  flex-shrink: 0;
}
.acct-deleted-restore, .acct-deleted-purge {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.45rem 0.9rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.acct-deleted-restore {
  background: #fff;
  color: #2d4860;
  border: 1px solid rgba(45,72,96,0.22);
}
.acct-deleted-restore:hover { background: #f5f5f0; border-color: rgba(45,72,96,0.4); }
.acct-deleted-purge {
  background: transparent;
  color: rgba(194, 85, 85, 0.8);
  border: 1px solid rgba(194, 85, 85, 0.3);
}
.acct-deleted-purge:hover { background: #fff1ee; color: #c25555; border-color: #c25555; }

/* Admin: clickable tiles + clear filter */
.admin-stat-clickable { cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; }
.admin-stat-clickable:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(45,72,96,0.08); }
.admin-tile-clear {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.4rem 0.9rem;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 999px;
  background: #fff;
  color: #2d4860;
  cursor: pointer;
  margin-left: 0.5rem;
}
.admin-tile-clear:hover { background: #f5f5f0; }

/* Admin: send email panel */
.admin-send-card {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  margin-bottom: 2rem;
  box-shadow: 0 1px 3px rgba(45,72,96,0.05);
}
.admin-send-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  color: #2d4860;
  margin-bottom: 0.7rem;
  letter-spacing: 0.01em;
}
.admin-send-row {
  display: grid;
  grid-template-columns: 140px 100px 150px 1fr 1fr auto auto;
  gap: 0.6rem;
  align-items: center;
}
@media (max-width: 700px) { .admin-send-row { grid-template-columns: 1fr; } }
/* New two-row layout: fields wrap as needed, actions sit below right-aligned */
.admin-send-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 0.6rem;
  align-items: center;
}
.admin-send-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.5rem;
  margin-top: 0.85rem;
}
.admin-send-input {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 8px;
  color: #2d4860;
  background: #fafafa;
}
.admin-send-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.6rem 1.1rem;
  border: none;
  border-radius: 8px;
  background: #e07a5f;
  color: #fff;
  cursor: pointer;
}
.admin-send-btn:hover { background: #c96649; }
.admin-send-btn.admin-send-preview {
  background: #fff;
  color: #2d4860;
  border: 1px solid rgba(45,72,96,0.22);
}
.admin-send-btn.admin-send-preview:hover { background: #f5f5f0; border-color: rgba(45,72,96,0.4); }
.admin-send-status {
  margin-top: 0.7rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: rgba(45,72,96,0.6);
  min-height: 1.1em;
}
.admin-send-status.ok { color: #4a7c59; }
.admin-send-status.err { color: #c25555; }
.admin-send-custom-wrap {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(45,72,96,0.08);
}
.admin-send-custom-wrap.hidden { display: none; }
.admin-send-custom-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: rgba(45,72,96,0.65);
  letter-spacing: 0.03em;
  margin-bottom: 0.4rem;
}
.admin-send-custom-textarea {
  width: 100%;
  min-height: 90px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.92rem;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 8px;
  color: #2d4860;
  background: #fafafa;
  box-sizing: border-box;
  resize: vertical;
}
.admin-send-audience-count {
  margin-top: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  color: rgba(45,72,96,0.6);
  font-style: italic;
}

/* Stats cards */
.admin-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2.5rem;
}
@media (max-width: 700px) { .admin-stats-row { grid-template-columns: repeat(2, 1fr); } }
.admin-stat-card {
  background: white;
  border: 1px solid rgba(45,72,96,0.1);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  text-align: center;
  box-shadow: 0 2px 12px rgba(45,72,96,0.04);
}
.admin-stat-highlight {
  background: linear-gradient(135deg, rgba(141,184,138,0.12), rgba(45,72,96,0.04));
  border-color: rgba(141,184,138,0.35);
}
.admin-stat-value {
  font-family: 'Cormorant Garamond', serif;
  font-size: 2.4rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 0.4rem;
}
.admin-stat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.4);
}

/* Sections */
.admin-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.25rem;
}
.admin-tab {
  padding: 0.45rem 1.25rem;
  border-radius: 20px;
  border: 1px solid rgba(45,72,96,0.2);
  background: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(45,72,96,0.5);
  cursor: pointer;
  transition: all 0.15s;
}
.admin-tab.active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.admin-section {
  margin-bottom: 2.5rem;
  background: white;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 16px;
  padding: 1.5rem;
  box-shadow: 0 2px 12px rgba(45,72,96,0.04);
}
.admin-section-header {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.admin-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.5);
}
.admin-section-hint {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgba(45,72,96,0.3);
  font-style: italic;
}

/* Chart/map toggle buttons */
.admin-tl-btns {
  display: flex;
  gap: 4px;
}
.admin-tl-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 6px;
  border: 1.5px solid rgba(45,72,96,0.12);
  background: transparent;
  color: rgba(45,72,96,0.4);
  cursor: pointer;
  transition: all 0.15s;
}
.admin-tl-btn:hover { color: var(--navy); border-color: rgba(45,72,96,0.25); }
.admin-tl-btn.active {
  background: rgba(45,72,96,0.08);
  border-color: rgba(45,72,96,0.2);
  color: var(--navy);
}

/* Signup chart */
.admin-chart-wrap {
  position: relative;
  width: 100%;
}
#admin-signup-chart {
  width: 100%;
  display: block;
}

/* --- Customer Activity / Analytics --- */
.admin-funnel-row {
  display: flex;
  align-items: stretch;
  gap: 0.5rem;
  margin: 0.5rem 0 1.25rem;
  flex-wrap: wrap;
}
.admin-funnel-card {
  flex: 1 1 0;
  min-width: 130px;
  background: white;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 12px;
  padding: 0.85rem 0.9rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  position: relative;
}
.admin-funnel-label {
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(45,72,96,0.55);
}
.admin-funnel-count {
  font-family: 'Georgia', serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.1;
}
.admin-funnel-bar {
  width: 100%;
  height: 4px;
  background: rgba(45,72,96,0.08);
  border-radius: 2px;
  overflow: hidden;
  margin-top: 0.15rem;
}
.admin-funnel-bar-fill {
  height: 100%;
  background: #5C8A57;
  border-radius: 2px;
}
.admin-funnel-conv {
  font-size: 0.78rem;
  color: #5C8A57;
  font-weight: 600;
  margin-top: 0.1rem;
}
.admin-funnel-arrow {
  align-self: center;
  font-size: 1.1rem;
  color: rgba(45,72,96,0.3);
  font-weight: 700;
}
.admin-funnel-empty {
  padding: 1.5rem;
  text-align: center;
  color: rgba(45,72,96,0.5);
  font-size: 0.9rem;
  font-style: italic;
  background: rgba(248,251,253,0.6);
  border-radius: 10px;
  width: 100%;
}

.admin-analytics-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 1rem;
}
@media (max-width: 720px) {
  .admin-analytics-grid { grid-template-columns: 1fr; }
}
.admin-analytics-block {
  background: white;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 12px;
  padding: 1rem 1.1rem;
}
.admin-analytics-block-title {
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: rgba(45,72,96,0.55);
  margin-bottom: 0.6rem;
}
.admin-analytics-foot {
  margin-top: 0.4rem;
  font-size: 0.78rem;
  color: rgba(45,72,96,0.6);
}

.admin-events-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 240px;
  overflow-y: auto;
}
.admin-event-row {
  display: grid;
  grid-template-columns: minmax(0,1.4fr) 1fr auto;
  align-items: center;
  gap: 0.6rem;
}
.admin-event-name {
  font-size: 0.82rem;
  color: var(--navy);
  font-family: 'Helvetica', sans-serif;
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.admin-event-bar {
  height: 6px;
  background: rgba(45,72,96,0.08);
  border-radius: 3px;
  overflow: hidden;
}
.admin-event-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, #94B8D0, #5C8A57);
  border-radius: 3px;
}
.admin-event-count {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--navy);
  min-width: 36px;
  text-align: right;
}

/* Waitlist table */
.admin-wl-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.88rem;
}
.admin-wl-table th {
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.55);
  padding: 0.6rem 0.5rem;
  border-bottom: 1px solid rgba(45,72,96,0.1);
}
.admin-wl-table td {
  padding: 0.65rem 0.5rem;
  border-bottom: 1px solid rgba(45,72,96,0.06);
  color: var(--navy);
  vertical-align: middle;
}
.admin-wl-table tr:hover td { background: rgba(248,251,253,0.6); }
.admin-wl-table a { color: var(--green); text-decoration: none; }
.admin-wl-table a:hover { text-decoration: underline; }
.admin-wl-source {
  display: inline-block;
  background: rgba(92,138,87,0.12);
  color: #5C8A57;
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
  font-size: 0.78rem;
  font-weight: 600;
}
.admin-wl-empty { color: rgba(45,72,96,0.35); font-size: 0.85rem; }
.admin-wl-note { color: rgba(45,72,96,0.7); font-size: 0.85rem; }
.admin-wl-note-full {
  color: rgba(45,72,96,0.75);
  font-size: 0.88rem;
  line-height: 1.5;
  font-family: Georgia, 'Times New Roman', serif;
  max-width: 380px;
  white-space: normal;
}
.admin-wl-actions {
  display: flex;
  gap: 0.4rem;
  flex-direction: column;
  align-items: flex-end;
}
.admin-wl-welcome-btn {
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  background: #fff;
  color: #2d4860;
  border: 1px solid rgba(108, 149, 179, 0.5);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.admin-wl-welcome-btn:hover {
  background: rgba(228, 240, 247, 0.85);
  border-color: rgba(108, 149, 179, 0.85);
}
.admin-wl-invite-btn {
  font-family: inherit;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.7rem;
  border-radius: 6px;
  background: var(--green);
  color: white;
  border: none;
  cursor: pointer;
  transition: background 0.15s;
}
.admin-wl-invite-btn:hover { background: #4d7549; }
.admin-wl-invited {
  font-size: 0.8rem;
  color: rgba(92,138,87,0.85);
  font-weight: 600;
}

/* US Map */
.admin-map-wrap {
  width: 100%;
  border-radius: 10px;
  overflow: hidden;
  background: rgba(248,251,253,0.6);
}
#admin-us-map {
  display: block;
  width: 100%;
  height: auto;
}

/* Table controls */
.admin-table-controls {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}
.admin-search {
  flex: 1;
  min-width: 200px;
  max-width: 320px;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  padding: 8px 14px;
  border: 1.5px solid rgba(45,72,96,0.15);
  border-radius: 50px;
  background: rgba(45,72,96,0.03);
  color: var(--navy);
  outline: none;
  transition: border-color 0.2s;
}
.admin-search:focus { border-color: rgba(141,184,138,0.6); background: white; }
.admin-search::placeholder { color: rgba(45,72,96,0.35); }
.admin-filter-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.admin-pill {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 4px 12px;
  border-radius: 50px;
  border: 1.5px solid rgba(45,72,96,0.15);
  background: transparent;
  color: rgba(45,72,96,0.5);
  cursor: pointer;
  transition: all 0.15s;
}
.admin-pill:hover { border-color: rgba(45,72,96,0.3); color: var(--navy); }
.admin-pill.active {
  background: rgba(45,72,96,0.08);
  border-color: rgba(45,72,96,0.25);
  color: var(--navy);
}
.admin-org-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgba(45,72,96,0.35);
  margin-left: auto;
}
.admin-no-results {
  text-align: center;
  padding: 2rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: rgba(45,72,96,0.4);
}
/* Type tags */
.admin-type-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 50px;
  background: rgba(45,72,96,0.07);
  color: rgba(45,72,96,0.6);
}
.admin-type-individual { background: rgba(141,184,138,0.15); color: #3a6e38; }
.admin-type-nonprofit { background: rgba(45,72,96,0.1); color: var(--navy); }
.admin-type-business, .admin-type-corporate { background: rgba(230,180,80,0.15); color: #8a6500; }
.admin-type-education { background: rgba(100,140,200,0.15); color: #2a4a80; }

/* Org table */
.admin-org-table-wrap { overflow-x: auto; }
.admin-org-table {
  width: 100%;
  border-collapse: collapse;
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
}
.admin-org-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.4);
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid rgba(45,72,96,0.1);
  white-space: nowrap;
}
.admin-org-table td {
  padding: 0.65rem 0.75rem;
  color: rgba(45,72,96,0.75);
  border-bottom: 1px solid rgba(45,72,96,0.06);
  white-space: nowrap;
}
.admin-org-name {
  font-weight: 600;
  color: var(--navy) !important;
}
.billing-badge {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 2px 8px;
  border-radius: 50px;
}
.billing-paying {
  background: rgba(141,184,138,0.2);
  color: #2e6b2c;
}
.billing-trial {
  background: rgba(230,180,80,0.2);
  color: #8a6500;
}
.billing-test {
  background: rgba(45,72,96,0.10);
  color: rgba(45,72,96,0.7);
  text-transform: uppercase;
}
.billing-mark-btn {
  background: none;
  border: 1px dashed rgba(45,72,96,0.2);
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 600;
  color: rgba(45,72,96,0.4);
  padding: 2px 8px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.billing-mark-btn:hover {
  border-color: var(--green);
  color: var(--green);
}
.billing-comp-btn {
  background: none;
  border: 1px solid rgba(124,158,124,0.45);
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  color: var(--green);
  padding: 2px 10px;
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
}
.billing-comp-btn:hover {
  background: var(--green);
  color: #fff;
}
.billing-comped-badge {
  background: rgba(124,158,124,0.16);
  border: 1px solid rgba(124,158,124,0.4);
  color: var(--green);
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  font-weight: 700;
  padding: 2px 10px;
  white-space: nowrap;
  cursor: help;
}
.admin-stat-money .admin-stat-value { color: #8a6500; }
.admin-stat-clickable {
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.admin-stat-clickable:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(45,72,96,0.1);
}
.admin-stat-cta {
  font-family: 'Montserrat', sans-serif;
  font-size: 10px;
  color: rgba(138,101,0,0.6);
  margin-top: 4px;
  letter-spacing: 0.04em;
}

/* MRR Modal */
.mrr-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45,72,96,0.45);
  backdrop-filter: blur(3px);
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.mrr-modal {
  background: white;
  border-radius: 20px;
  padding: 2rem;
  width: 100%;
  max-width: 680px;
  box-shadow: 0 20px 60px rgba(45,72,96,0.2);
  max-height: 85vh;
  overflow-y: auto;
}
.mrr-modal-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.5rem;
}
.mrr-modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.mrr-modal-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: rgba(138,101,0,0.7);
}
.mrr-modal-close {
  background: none;
  border: none;
  font-size: 16px;
  color: rgba(45,72,96,0.4);
  cursor: pointer;
  padding: 4px 8px;
  border-radius: 6px;
  line-height: 1;
}
.mrr-modal-close:hover { background: rgba(45,72,96,0.06); color: var(--navy); }
.mrr-paying-list {
  margin-top: 1.5rem;
  border-top: 1px solid rgba(45,72,96,0.08);
  padding-top: 1rem;
}
.mrr-paying-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(45,72,96,0.05);
}
.mrr-paying-name {
  flex: 1;
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.mrr-plan-tag {
  font-size: 10px;
  font-weight: 600;
  background: rgba(45,72,96,0.08);
  color: rgba(45,72,96,0.5);
  padding: 1px 7px;
  border-radius: 50px;
  text-transform: capitalize;
}
.mrr-paying-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgba(45,72,96,0.4);
}
.mrr-paying-amount {
  font-family: 'Montserrat', sans-serif;
  font-size: 13px;
  font-weight: 700;
  color: #8a6500;
}
.mrr-empty {
  font-family: 'Montserrat', sans-serif;
  font-size: 12px;
  color: rgba(45,72,96,0.4);
  text-align: center;
  padding: 1rem 0;
}

/* Org Cards grid */
.admin-org-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.org-card {
  background: rgba(45,72,96,0.02);
  border: 1px solid rgba(45,72,96,0.09);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  transition: box-shadow 0.2s, transform 0.2s;
}
.org-card-deleted {
  opacity: 0.6;
  border-style: dashed;
  border-color: rgba(211,95,83,0.3);
  background: rgba(211,95,83,0.02);
}
.org-card:hover {
  box-shadow: 0 4px 18px rgba(45,72,96,0.08);
  transform: translateY(-1px);
}
.org-card-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.5rem;
}
.org-card-name {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
}
.org-card-badges {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 3px;
  flex-shrink: 0;
}
.org-card-loc {
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgba(45,72,96,0.4);
  margin-bottom: 0.6rem;
}
.org-card-stats {
  display: flex;
  gap: 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 11px;
  color: rgba(45,72,96,0.5);
  flex-wrap: wrap;
}
.org-card-stats strong { color: var(--navy); }
.org-card-story-bar {
  height: 3px;
  background: rgba(45,72,96,0.07);
  border-radius: 2px;
  margin-top: 0.6rem;
  overflow: hidden;
}
.org-card-story-fill {
  height: 100%;
  background: rgba(141,184,138,0.6);
  border-radius: 2px;
  transition: width 0.6s ease;
}
.org-card-action { margin-top: 0.75rem; }
.admin-org-table tr:last-child td { border-bottom: none; }
.admin-org-table tr:hover td { background: rgba(141,184,138,0.05); }

/* Admin nav link */
.nav-admin-overview-link {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy) !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 0.32rem 0.65rem;
  border-radius: 7px;
  background: rgba(45,72,96,0.05);
  margin-bottom: 0.1rem;
  transition: background 0.12s;
}
.nav-admin-overview-link:hover { background: rgba(45,72,96,0.1); }

.nav-my-dashboard-link {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 500;
  padding: 0.32rem 0.65rem;
  border-radius: 7px;
  background: transparent;
  color: var(--navy);
  text-decoration: none;
  transition: background 0.12s;
}
.nav-my-dashboard-link:hover { background: rgba(45,72,96,0.07); }

/* ===== Key Move Explainer ===== */
.km-explainer {
  margin: 1rem 0 1.5rem;
}

.km-explainer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 999px;
  padding: 0.45rem 1rem 0.45rem 0.55rem;
  cursor: pointer;
  transition: border-color 0.2s, background 0.2s;
  font-family: inherit;
}
.km-explainer-btn:hover {
  border-color: var(--green);
  background: rgba(141,184,138,0.06);
}
.km-explainer-btn[aria-expanded="true"] {
  border-color: var(--green);
  background: rgba(141,184,138,0.08);
}

.km-explainer-circle {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  line-height: 1;
}

.km-explainer-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--blue-dark);
}

.km-explainer-arrow {
  font-size: 1.1rem;
  color: var(--text-light);
  transition: transform 0.25s;
  line-height: 1;
}
.km-explainer-btn[aria-expanded="true"] .km-explainer-arrow {
  transform: rotate(90deg);
}

.km-explainer-panel {
  margin-top: 0.75rem;
  border: 1.5px solid var(--green-soft);
  border-radius: var(--radius);
  padding: 1.5rem;
  background: rgba(141,184,138,0.04);
  animation: km-fade-in 0.2s ease;
}

@keyframes km-fade-in {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.km-examples {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}

.km-example {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: white;
  border-radius: 8px;
  border: 1px solid var(--border);
}

.km-example-circle {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-weight: 700;
  font-size: 1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.km-example-body {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}

.km-example-org {
  font-size: 0.7rem;
  font-weight: 600;
  color: var(--text-light);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.km-example-move {
  font-size: 1rem;
  font-weight: 600;
  color: var(--blue-dark);
  line-height: 1.3;
}

.km-explainer-close {
  margin-top: 1.25rem;
  background: none;
  border: none;
  font-size: 0.8rem;
  color: var(--text-light);
  cursor: pointer;
  font-family: inherit;
  text-decoration: underline;
  padding: 0;
}
.km-explainer-close:hover { color: var(--blue-dark); }

/* ===== Pattern Spotter ===== */
.pattern-spotter-card {
  position: relative;
  background: linear-gradient(135deg, #1a2e1a 0%, #2D4860 100%);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1.75rem;
  overflow: hidden;
  cursor: pointer;
}
.pattern-spotter-card:hover .ps-btn { background: rgba(255,255,255,0.25); }
.ps-glow {
  position: absolute;
  top: -40px; right: -40px;
  width: 160px; height: 160px;
  background: radial-gradient(circle, rgba(141,184,138,0.35) 0%, transparent 70%);
  pointer-events: none;
}
.ps-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  position: relative;
  z-index: 1;
}
.ps-icon {
  font-size: 1.6rem;
  color: var(--green-light);
  flex-shrink: 0;
  animation: psIconPulse 3s ease-in-out infinite;
}
@keyframes psIconPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.92); }
}
.ps-text {
  flex: 1;
  color: white;
}
.ps-text strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.15rem;
  font-family: Georgia, serif;
}
.ps-text span {
  font-size: 0.82rem;
  opacity: 0.75;
}
.ps-btn {
  flex-shrink: 0;
  background: rgba(255,255,255,0.15);
  border: 1.5px solid rgba(255,255,255,0.3);
  color: white;
  border-radius: 20px;
  padding: 0.45rem 1.1rem;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.2s;
  white-space: nowrap;
}

/* Pattern Spotter Modal */
.ps-modal-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.55);
  z-index: 8100;
}
.ps-modal-backdrop.visible { display: block; }
.ps-modal {
  display: none;
  position: fixed;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  background: white;
  border-radius: 16px;
  z-index: 8101;
  width: min(660px, 94vw);
  max-height: 88vh;
  overflow-y: auto;
  padding: 2rem;
  box-shadow: 0 24px 64px rgba(0,0,0,0.2);
}
.ps-modal.open { display: block; }
.ps-modal-close {
  position: absolute;
  top: 1rem; right: 1.25rem;
  background: none; border: none;
  font-size: 1.3rem; cursor: pointer;
  color: var(--text-muted);
}
.ps-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}
.ps-modal-icon {
  font-size: 2rem;
  color: var(--green);
  line-height: 1;
  margin-top: 0.1rem;
}
.ps-modal-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--text);
  margin-bottom: 0.25rem;
}
.ps-modal-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
  line-height: 1.5;
}

/* Pattern card */
.ps-pattern-card {
  background: #f9f7f4;
  border-radius: 12px;
  padding: 1.25rem 1.4rem;
  margin-bottom: 1rem;
  border-left: 3px solid var(--green);
}
.ps-pattern-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.4rem;
  font-family: Georgia, serif;
}
.ps-pattern-desc {
  font-size: 0.9rem;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 0.75rem;
}
.ps-pattern-stories {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.9rem;
}
.ps-confidence {
  display: inline-block;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.2rem 0.6rem;
  border-radius: 10px;
  margin-bottom: 0.9rem;
}
.ps-confidence.high { background: #e8f4e8; color: #3a7a3a; }
.ps-confidence.medium { background: #fff3e0; color: #a06000; }
.ps-create-km-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.5rem 1rem;
  font-size: 0.82rem;
  cursor: pointer;
  font-family: inherit;
  font-weight: 600;
  transition: background 0.15s;
}
.ps-create-km-btn:hover { background: #1a2e45; }
.ps-create-km-btn.created { background: var(--green); cursor: default; }

/* Teaser / upgrade nudge */
.ps-teaser-bar {
  background: linear-gradient(135deg, #f5f0ea, #edf4ed);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 0.5rem;
}
.ps-teaser-text {
  font-size: 0.85rem;
  color: var(--text);
}
.ps-teaser-text strong { color: var(--navy); }
.ps-upgrade-btn {
  flex-shrink: 0;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
}

/* ===== Key Move Intelligence ===== */
.km-intel-btn {
  margin-top: 0.6rem;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: linear-gradient(135deg, var(--navy), #1a3a5c);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.45rem 1.1rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: opacity 0.15s;
  white-space: nowrap;
}
.km-intel-btn:hover { opacity: 0.88; }
.km-intel-btn.loading { opacity: 0.6; cursor: default; }

.km-intel-panel {
  background: linear-gradient(135deg, #f0f4f8, #f9f7f4);
  border-radius: 14px;
  padding: 1.5rem;
  margin: 0 1.5rem 1.5rem;
  border: 1px solid var(--border);
}
.km-intel-loading {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.9rem;
}
.km-intel-headline {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  font-family: Georgia, serif;
  line-height: 1.4;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
.km-intel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 600px) { .km-intel-grid { grid-template-columns: 1fr; } }
.km-intel-block { }
.km-intel-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.km-intel-text {
  font-size: 0.88rem;
  line-height: 1.65;
  color: var(--text);
}
.km-intel-capture-prompt {
  background: white;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  border-left: 3px solid var(--coral);
  margin-bottom: 1rem;
}
.km-intel-capture-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
  margin-bottom: 0.3rem;
}
.km-intel-capture-q {
  font-size: 0.92rem;
  font-style: italic;
  color: var(--text);
  line-height: 1.5;
}
.km-intel-people {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.km-intel-person {
  background: white;
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-size: 0.8rem;
  color: var(--navy);
  border: 1px solid var(--border);
}
.km-intel-person strong { display: block; font-weight: 600; }
.km-intel-person span { color: var(--text-muted); font-size: 0.75rem; }

/* ===== Story Coach ===== */
.story-coach-ask-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.5rem;
  background: transparent;
  border: 1px solid rgba(45,72,96,0.18);
  color: rgba(45,72,96,0.65);
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.38rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease, border-color 0.18s ease;
}
.story-coach-ask-btn:hover {
  color: var(--coral, #E8A898);
  border-color: var(--coral, #E8A898);
  background: rgba(232,168,152,0.06);
}
.story-coach-ask-btn:disabled {
  opacity: 0.55;
  cursor: wait;
}
.story-coach-bubble {
  display: none;
  align-items: flex-start;
  gap: 0.5rem;
  background: linear-gradient(135deg, #edf4ed, #f5f0ea);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  margin-top: 0.6rem;
  font-size: 0.88rem;
  color: var(--navy);
  line-height: 1.55;
  border-left: 3px solid var(--green);
  animation: coachFadeIn 0.3s ease;
}
.story-coach-bubble.visible { display: flex; }
@keyframes coachFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: translateY(0); }
}
.story-coach-icon {
  color: var(--green);
  font-size: 0.9rem;
  margin-top: 0.1rem;
  flex-shrink: 0;
}
.story-coach-content {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  flex: 1;
}
.story-coach-response {
  width: 100%;
  min-height: 90px;
  border: 1px solid rgba(82,160,90,0.35);
  border-radius: 8px;
  padding: 0.65rem 0.75rem;
  font-size: 0.9rem;
  font-family: 'Merriweather', Georgia, serif;
  color: var(--navy);
  background: rgba(255,255,255,0.85);
  resize: vertical;
  line-height: 1.6;
  box-sizing: border-box;
}
.story-coach-response:focus { outline: none; border-color: var(--green); background: #fff; }
.story-coach-response::placeholder { color: #aaa; font-style: italic; }
.story-coach-actions { display: flex; justify-content: flex-end; }
.story-coach-add-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 7px;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.story-coach-add-btn:hover { background: var(--navy); }

.km-intel-actions {
  display: flex;
  gap: 0.6rem;
  flex-wrap: wrap;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.km-intel-action-btn {
  padding: 0.5rem 1rem;
  border-radius: 8px;
  border: 1.5px solid var(--border);
  background: white;
  font-size: 0.83rem;
  font-family: inherit;
  cursor: pointer;
  color: var(--text);
  transition: border-color 0.15s, background 0.15s;
}
.km-intel-action-btn:hover { border-color: var(--navy); background: #f5f8fc; }
.km-intel-action-generate { border-color: var(--green); color: var(--navy); font-weight: 600; }
.km-intel-action-generate:hover { background: #edf4ed; }
.km-intel-gen-output {
  margin-top: 0.75rem;
  background: white;
  border-radius: 10px;
  padding: 1rem;
  font-size: 0.88rem;
  line-height: 1.75;
  color: var(--text);
  white-space: pre-wrap;
  border: 1px solid var(--border);
}
.km-intel-gen-output.hidden { display: none; }

/* ===== Weekly Digest ===== */
.weekly-digest {
  background: white;
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 1.5rem;
  margin-bottom: 1.75rem;
  box-shadow: 0 2px 12px rgba(45,72,96,0.06);
}
.digest-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.75rem;
}
.digest-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}
.digest-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--green);
}
.digest-bottom-bar {
  background: #ddeef7;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 0 1.5rem;
  height: 44px;
  border-top: 1px solid rgba(0,0,0,0.06);
}
.digest-bottom-bar-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #4a7a9b;
}
.digest-prefs-toggle-btn {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: #4a7a9b;
  background: transparent;
  border: 1px solid rgba(74,122,155,0.35);
  border-radius: 20px;
  padding: 0.18rem 0.6rem;
  cursor: pointer;
  transition: background 0.15s;
}
.digest-prefs-toggle-btn:hover,
.digest-prefs-toggle-btn.active {
  background: rgba(74,122,155,0.1);
}
.digest-prefs-panel {
  background: var(--cream, #f9f7f2);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 1.1rem 1.25rem 1rem;
  margin: 0.75rem 0 0;
}
.digest-prefs-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.digest-prefs-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.45rem 1.5rem;
  margin-bottom: 0.85rem;
}
.digest-pref-item {
  display: flex;
  align-items: flex-start;
  gap: 0.45rem;
  font-size: 0.8rem;
  color: var(--text);
  cursor: pointer;
  line-height: 1.4;
}
.digest-pref-item input[type="checkbox"] {
  margin-top: 2px;
  accent-color: var(--green);
  flex-shrink: 0;
}
.digest-prefs-sector-wrap {
  margin-bottom: 0.75rem;
}
.digest-prefs-sector-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.45rem 0.75rem;
  font-size: 0.8rem;
  font-family: inherit;
  background: white;
  box-sizing: border-box;
}
.digest-prefs-save-btn {
  background: var(--green);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.3rem 1rem;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  margin-right: 0.5rem;
}
.digest-prefs-saved {
  font-size: 0.75rem;
  color: var(--green);
  font-weight: 600;
}
.digest-week {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.digest-refresh-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.25rem 0.6rem;
  font-size: 0.9rem;
  cursor: pointer;
  color: var(--text-muted);
  transition: color 0.15s, border-color 0.15s;
}
.digest-refresh-btn:hover { color: var(--navy); border-color: var(--navy); }
.digest-opening {
  font-family: Georgia, serif;
  font-size: 1rem;
  line-height: 1.6;
  color: var(--navy);
  font-style: italic;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid var(--border);
}

/* Activity row */
.digest-activity-row {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.25rem;
}
.digest-stat-chip {
  background: #f5f8fc;
  border-radius: 20px;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  color: var(--navy);
  display: flex;
  align-items: center;
  gap: 0.35rem;
}
.digest-stat-chip strong { font-weight: 700; }
.digest-stat-chip.zero { background: #fdf5f0; color: var(--text-muted); }

/* Recent story pills */
.digest-story-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 1.25rem;
}
.digest-story-pill {
  background: #f9f7f4;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  color: var(--text);
  cursor: pointer;
  transition: background 0.15s;
}
.digest-story-pill:hover { background: var(--coral-soft); }

/* Sections */
.digest-section {
  margin-bottom: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.digest-section-label {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}

/* Focus list */
.digest-focus-item {
  display: flex;
  align-items: flex-start;
  gap: 0.65rem;
  margin-bottom: 0.6rem;
  cursor: pointer;
}
.digest-focus-check {
  width: 18px; height: 18px;
  border-radius: 4px;
  border: 2px solid var(--border);
  flex-shrink: 0;
  margin-top: 0.1rem;
  transition: background 0.15s, border-color 0.15s;
  display: flex; align-items: center; justify-content: center;
}
.digest-focus-item.done .digest-focus-check {
  background: var(--green); border-color: var(--green);
}
.digest-focus-item.done .digest-focus-check::after { content: '✓'; color: white; font-size: 0.7rem; }
.digest-focus-text {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.5;
  padding-top: 0.05rem;
}
.digest-focus-item.done .digest-focus-text { text-decoration: line-through; color: var(--text-muted); }

/* Quiet KMs */
.digest-quiet-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.9rem;
  background: #fdf8f5;
  border-radius: 8px;
  margin-bottom: 0.5rem;
  gap: 1rem;
}
.digest-quiet-name { font-size: 0.88rem; font-weight: 600; color: var(--navy); }
.digest-quiet-days { font-size: 0.75rem; color: var(--text-muted); white-space: nowrap; }
.digest-quiet-btn {
  background: var(--coral-soft);
  border: none;
  border-radius: 6px;
  padding: 0.3rem 0.7rem;
  font-size: 0.75rem;
  color: var(--navy);
  cursor: pointer;
  font-family: inherit;
  white-space: nowrap;
  flex-shrink: 0;
}
.digest-quiet-btn:hover { background: var(--coral-light); }

/* Articles */
.digest-article {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--border);
}
.digest-article:last-child { border-bottom: none; }
.digest-article-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  line-height: 1.4;
}
.digest-article-title:hover { text-decoration: underline; }
.digest-article-summary {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.digest-article-relevance {
  font-size: 0.78rem;
  color: var(--green);
  font-style: italic;
  display: flex;
  align-items: center;
  gap: 0.3rem;
}
.digest-article-relevance::before { content: '✦'; font-style: normal; }

/* Loading state */
.digest-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 1rem 0;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.88rem;
}
.digest-loading-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--green);
  animation: digestDot 1.2s ease-in-out infinite;
}
.digest-loading-dot:nth-child(2) { animation-delay: 0.2s; }
.digest-loading-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes digestDot {
  0%, 80%, 100% { transform: scale(0.6); opacity: 0.4; }
  40% { transform: scale(1); opacity: 1; }
}

/* ===== WD Nav Button ===== */
.nav-wd-btn {
  background: var(--navy) !important;
  color: white !important;
  border-radius: 6px;
  padding: 0.25rem 0.6rem !important;
  font-size: 0.72rem !important;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.nav-wd-btn:hover { opacity: 0.85; }

/* ===== Digest Teaser (dashboard) ===== */
.digest-teaser {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  background: linear-gradient(135deg, #f0f4f8, #edf4ed);
  border-radius: 10px;
  padding: 0.75rem 1.1rem;
  margin-bottom: 1.5rem;
  cursor: pointer;
  border: 1px solid var(--border);
  transition: box-shadow 0.15s;
}
.digest-teaser:hover { box-shadow: 0 2px 10px rgba(45,72,96,0.1); }
.digest-teaser-icon {
  background: var(--navy);
  color: white;
  border-radius: 6px;
  padding: 0.2rem 0.5rem;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  flex-shrink: 0;
}
.digest-teaser-text {
  font-size: 0.88rem;
  color: var(--navy);
  font-style: italic;
}

/* ===== Digest Screen ===== */
/* ── Arc band — full bleed week timeline ──────────────────── */
.digest-arc-outer {
  position: relative;
  width: 100%;
}
.digest-arc-label-row {
  position: absolute;
  bottom: 1rem;
  right: 1.25rem;
  display: flex;
  align-items: center;
  gap: 0.75rem;
  z-index: 4;
}
.digest-eyebrow-inline {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.digest-arc-band {
  background: transparent;
  width: 100%;
  overflow: visible;
  line-height: 0;
}
.digest-arc-header {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--text-muted);
  text-align: center;
  padding: 1.25rem 0 0;
  line-height: 1;
}
.digest-arc-svg {
  width: 100%;
  height: auto;
  display: block;
  min-height: 110px;
  max-height: 170px;
  overflow: visible;
}
.digest-arc-legend {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  padding: 0.4rem 0 1.25rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.arc-legend-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  display: inline-block;
}
.arc-legend-story { background: #8db889; }
.arc-legend-note  { background: rgba(220,160,155,0.85); }
.arc-legend-hint  { margin-left: 0.5rem; opacity: 0.6; }

/* Day note popover */
.day-note-popover {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  z-index: 200;
  background: white;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(0,0,0,0.18);
  padding: 1.25rem 1.5rem;
  width: min(340px, 90vw);
}
.dnp-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.day-note-popover textarea {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.7rem;
  font-family: Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.5;
  resize: none;
  outline: none;
  color: var(--navy);
  box-sizing: border-box;
}
.day-note-popover textarea:focus { border-color: var(--green); }
.dnp-actions {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin-top: 0.85rem;
  flex-wrap: wrap;
}
.dnp-btn-note {
  background: rgba(220,160,155,0.18);
  border: 1.5px solid rgba(220,160,155,0.6);
  color: #8b4a48;
  border-radius: 8px;
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.dnp-btn-note:hover { background: rgba(220,160,155,0.3); }
.dnp-btn-story {
  background: var(--navy);
  border: none;
  color: white;
  border-radius: 8px;
  padding: 0.45rem 1rem;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.dnp-btn-story:hover { background: var(--green); }
.dnp-close {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.2rem;
  line-height: 1;
}

/* Week start toggle */
.week-start-toggle {
  display: flex;
  border: 1px solid var(--border);
  border-radius: 6px;
  overflow: hidden;
}
.wst-btn {
  background: none;
  border: none;
  padding: 0.2rem 0.6rem;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
}
.wst-btn.active { background: var(--navy); color: white; }

/* ── Digest wrap + reflection ─────────────────────────────── */
.digest-screen-wrap {
  padding-top: 2rem;
  padding-bottom: 5rem;
  max-width: 860px;
  background: rgba(147, 184, 143, 0.055);
  border-radius: 20px;
  margin-top: 1.25rem;
  margin-bottom: 2rem;
  padding-left: 2rem;
  padding-right: 2rem;
}
/* ── Morning greeting — cream/white centered hero (original treatment) ── */
.digest-greeting-center {
  text-align: center;
  padding: 2.5rem 1rem 2rem;
  border-bottom: 1px solid var(--border);
  margin-bottom: 1.75rem;
}
.digest-morning-date {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-light);
  margin-bottom: 0.5rem;
}
.digest-morning-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}

.digest-reflection-block {
  margin-bottom: 2.25rem;
}
.digest-opening-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-style: normal;
  font-weight: 500;
  color: rgba(45, 72, 96, 0.92);
  line-height: 1.55;
  max-width: none;
  width: 100%;
  margin-top: 1rem;
  padding: 0;
  border: none;
  background: none;
}
.digest-opening-sign {
  display: block;
  margin-top: 0.75rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.65);
}
.digest-opening-jump {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-top: 1rem;
  background: rgba(210, 140, 130, 0.08);
  border: 1px solid rgba(210, 140, 130, 0.35);
  color: var(--coral, #C9806F);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.15s ease;
}
.digest-opening-jump strong {
  font-weight: 700;
  letter-spacing: 0.02em;
}
.digest-opening-jump:hover {
  background: rgba(210, 140, 130, 0.16);
  border-color: rgba(210, 140, 130, 0.55);
  transform: translateY(-1px);
}

/* ── Impact statement ─────────────────────────────────────── */
.digest-impact-wrap {
  background: linear-gradient(135deg, #f5f9f5, #fdfcfa);
  border-left: 3px solid var(--green);
  border-radius: 0 12px 12px 0;
  padding: 1.25rem 1.5rem;
  margin-bottom: 2rem;
}
.digest-impact-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.5rem;
}
.digest-impact-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.5;
}

/* ── Digest zones — 4 themed cards ───────────────────────── */
.digest-zone {
  border-radius: 18px;
  padding: 1.75rem 1.75rem;
  margin-bottom: 1.5rem;
  box-shadow: 0 2px 10px rgba(0,0,0,0.06);
  border-top: 4px solid transparent;
}
.digest-zone-week    { background: rgba(141,184,138,0.14); border-top-color: #52a05a; }
.digest-zone-stories {
  background: rgba(45,72,96,0.03);
  border: 1px solid rgba(45,72,96,0.12);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  border-top: 1px solid rgba(45,72,96,0.12);
}
.digest-zone-world {
  background: rgba(232,168,152,0.05);
  border: 1px solid rgba(232,168,152,0.22);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
  border-top: 1px solid rgba(232,168,152,0.22);
}
.digest-zone-patterns { background: rgba(220,130,120,0.1); border-top-color: var(--coral); }
.dz-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  padding-bottom: 0.85rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.08);
  color: var(--text-muted);
}
.digest-zone-week    .dz-label { color: #3a7d42; border-bottom-color: rgba(82,160,90,0.2); }
.digest-zone-stories .dz-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #2D4860;
  margin-bottom: 0;
  border-bottom: none;
  text-transform: none;
  letter-spacing: 0;
  padding-bottom: 0;
}
.digest-zone-world .dz-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #2D4860;
  margin-bottom: 0;
  border-bottom: none;
  text-transform: none;
  letter-spacing: 0;
  padding-bottom: 0;
}
/* Inside a section-header (icon + title + tagline stack), keep title flush to tagline */
.dz-section-header .dz-label { margin-bottom: 0; padding-bottom: 0; border-bottom: none; }
.digest-zone-patterns .dz-label { color: #b04a40; border-bottom-color: rgba(220,130,120,0.25); }
.dz-sub-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.dz-streak {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dz-stats {
  font-size: 0.82rem;
  color: var(--text-muted);
  text-align: center;
  margin-bottom: 1rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dz-focus, .dz-touchstone {
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 1rem;
}
.dz-touchstone:first-child, .dz-focus:first-child { border-top: none; margin-top: 0; padding-top: 0; }
.dzt-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.dzt-desc {
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.5;
}
.dz-story-spotlight {
  cursor: pointer;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dz-story-spotlight:last-child, .dz-on-this-day:last-child { border-bottom: none; margin-bottom: 0; padding-bottom: 0; }
.dz-share {
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 1rem;
}
.dz-share-hint {
  font-size: 0.8rem;
  color: var(--text-muted);
  margin-bottom: 0.75rem;
}
.dz-this-week, .dz-team {
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 1rem;
}
.dz-share-week-row {
  display: flex;
  gap: 1.75rem;
  align-items: flex-start;
  margin-top: 1rem;
}
.dz-share-week-row > .dz-share,
.dz-share-week-row > .dz-this-week {
  flex: 1;
  min-width: 0;
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}
.dz-share-week-row > .dz-share {
  border-right: 1px solid rgba(0,0,0,0.06);
  padding-right: 1.75rem;
}
@media (max-width: 820px) {
  .dz-share-week-row { flex-direction: column; gap: 0; }
  .dz-share-week-row > .dz-share {
    border-right: none;
    padding-right: 0;
    border-bottom: 1px solid rgba(0,0,0,0.06);
    padding-bottom: 1rem;
    margin-bottom: 1rem;
  }
}
.dz-empty {
  font-size: 0.9rem;
  color: var(--text-muted);
  padding: 0.5rem 0;
}
.dz-encourage {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 1.25rem 0.5rem 0.75rem;
  gap: 0.85rem;
}
.dz-encourage-icon { font-size: 1.4rem; color: var(--navy); opacity: 0.5; }
.dz-encourage-msg {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--navy);
  max-width: 380px;
  line-height: 1.5;
}
.dz-starters {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  justify-content: center;
  max-width: 520px;
}
.dz-starter-chip {
  background: rgba(45,72,96,0.07);
  border: 1px solid rgba(45,72,96,0.15);
  border-radius: 20px;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  font-family: inherit;
  text-align: left;
}
.dz-starter-chip:hover { background: rgba(45,72,96,0.14); border-color: rgba(45,72,96,0.3); }
.dz-capture-link {
  font-size: 0.82rem;
  color: var(--green);
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.dz-capture-link:hover { text-decoration: underline; }
.dz-on-this-day {
  cursor: pointer;
  padding-bottom: 1rem;
  margin-bottom: 1rem;
  border-bottom: 1px solid rgba(0,0,0,0.06);
}
.dz-vision-nudge, .dz-thinking-time, .dz-quiet-kms, .dz-momentum {
  padding-top: 1rem;
  border-top: 1px solid rgba(0,0,0,0.06);
  margin-top: 1rem;
}
.dz-vn-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: var(--navy);
  margin-bottom: 0.6rem;
}
.dz-quiet-hint {
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 0.75rem;
}
/* Keep journal + thought board as standalone white cards */
.digest-rts-section,
.digest-journal-section,
.digest-thought-board {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}
/* news-pair inside a zone needs no extra background */
.digest-zone .digest-news-pair {
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  padding: 0;
  margin: 0;
}
/* ── Digest sections — legacy white cards (journal, thought board) */
.digest-section,
.digest-vision-nudge,
.digest-empty-week {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.5rem 1.5rem;
  margin-bottom: 1rem;
  box-shadow: 0 1px 5px rgba(0,0,0,0.05);
}
.digest-section {
  margin-bottom: 1rem;
}
.digest-section-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.digest-section-subtext {
  font-size: 0.88rem;
  color: var(--text-light);
  line-height: 1.5;
  margin-bottom: 1rem;
  font-style: italic;
}

/* ── Story echo cards ─────────────────────────────────────── */
.digest-story-echo {
  padding: 1.1rem 0;
  border-bottom: 1px solid var(--border);
  cursor: pointer;
  transition: background 0.1s;
}
.digest-story-echo:last-child { border-bottom: none; }
.digest-story-echo:hover { opacity: 0.8; }
.dse-date {
  font-size: 0.7rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  margin-bottom: 0.25rem;
}
.dse-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 0.35rem;
}
.dse-excerpt {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.55;
}

/* Note echo variant */
.dse-note {
  background: rgba(220,160,155,0.07);
  border-left: 3px solid rgba(220,160,155,0.5);
  border-radius: 0 8px 8px 0;
  padding: 0.85rem 1rem;
  position: relative;
  cursor: default;
}
.dse-note:hover { opacity: 1; }
.dse-note-text {
  font-family: Georgia, serif;
  font-size: 0.92rem;
  color: var(--navy);
  line-height: 1.55;
  font-style: italic;
}
.dse-note-delete {
  position: absolute;
  top: 0.6rem; right: 0.7rem;
  background: none;
  border: none;
  font-size: 0.75rem;
  color: rgba(220,160,155,0.6);
  cursor: pointer;
  padding: 0.1rem;
  line-height: 1;
  transition: color 0.12s;
}
.dse-note-delete:hover { color: #c0504a; }

/* Article + document variants — distinct from story and note */
.dse-article {
  background: rgba(123,154,178,0.07);
  border-left: 3px solid rgba(123,154,178,0.50);
  border-radius: 0 8px 8px 0;
  padding: 0.85rem 1rem;
}
.dse-document {
  background: rgba(123,154,178,0.05);
  border-left: 3px solid rgba(123,154,178,0.35);
  border-radius: 0 8px 8px 0;
  padding: 0.85rem 1rem;
}

/* ── Empty week message ───────────────────────────────────── */
.digest-empty-week {
  font-size: 0.92rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 1.5rem 0;
}
.digest-empty-week a { color: var(--green); }

/* ── Quiet KMs ────────────────────────────────────────────── */
.digest-quiet-list { display: flex; flex-direction: column; gap: 0.75rem; }
.digest-quiet-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.75rem 1rem;
  background: #fdf8f5;
  border-radius: 10px;
}
.digest-quiet-name {
  flex: 1;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
}
.digest-quiet-days {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
}
.digest-quiet-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.3rem 0.75rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.digest-quiet-btn:hover { background: var(--green-soft); }

/* ── Encouragement / sustain cards ───────────────────────── */
.digest-section-sustain { padding-top: 2rem; border-top: 1px solid var(--border); }
.digest-sustain-card {
  padding: 1rem 0;
  border-bottom: 1px solid var(--border);
}
.digest-sustain-card:last-child { border-bottom: none; }
.digest-sustain-title {
  display: block;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: 0.35rem;
  transition: color 0.15s;
}
.digest-sustain-title:hover { color: var(--green); }
.digest-sustain-snippet {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.5;
}

/* ── Thinking Time ───────────────────────────────────────── */
.digest-thinking-time {
  background: #fdf6f0;
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin: 1.5rem 0;
}
.dtt-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 0.75rem;
}
.dtt-story-pull {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.4rem;
}
.dtt-excerpt {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.55;
  margin-bottom: 1rem;
}
.dtt-question {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.45;
  margin-bottom: 1rem;
}
.dtt-capture-link {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--coral);
  text-decoration: none;
}
.dtt-capture-link:hover { text-decoration: underline; }

/* ── Digest News Sections ────────────────────────────────── */
.digest-news-section {
  margin: 2rem 0;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 12px rgba(45,72,96,0.07);
}
.dns-header {
  padding: 0.9rem 1.25rem;
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
}
.dns-header-navy { background: var(--navy); }
.dns-header-coral { background: var(--coral); }
.dns-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #fff;
}
.dns-section-sub {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.7);
}
.dns-cards {
  background: #fff;
}
.dns-card {
  display: flex;
  align-items: stretch;
  border-bottom: 1px solid var(--border);
}
.dns-card:last-child { border-bottom: none; }
.dns-card-bar {
  width: 3px;
  flex-shrink: 0;
}
.dns-card-bar-navy { background: var(--navy); }
.dns-card-bar-coral { background: var(--coral); }
.dns-card-body {
  padding: 0.85rem 1.1rem 0.85rem 0.9rem;
  flex: 1;
  min-width: 0;
  overflow: hidden;
}
.dns-title {
  display: block;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--navy);
  text-decoration: none;
  line-height: 1.4;
  margin-bottom: 0.3rem;
  transition: color 0.15s;
  word-break: break-word;
  overflow-wrap: break-word;
}
.dns-title:hover { color: var(--green); }
.dns-snippet {
  font-size: 0.8rem;
  color: var(--text-light);
  line-height: 1.5;
  word-break: break-word;
  overflow-wrap: break-word;
}
.dns-save-btn {
  display: inline-block;
  margin-top: 0.45rem;
  font-size: 0.72rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--green);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.dns-save-btn:hover { color: var(--navy); }
.dns-save-btn.saved { color: var(--text-muted); cursor: default; }

/* Swap-this-article button: round, lives next to Save to Lab */
.dns-swap-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  margin-left: 0.6rem;
  vertical-align: middle;
  border-radius: 50%;
  border: 1px solid rgba(45,72,96,0.18);
  background: transparent;
  color: rgba(45,72,96,0.55);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, transform 0.15s ease, border-color 0.15s ease;
  padding: 0;
}
.dns-swap-btn:hover {
  background: var(--coral);
  color: white;
  border-color: var(--coral);
  transform: rotate(90deg);
}

/* Global toast notifications */
#lwh-toast-host {
  position: fixed;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  pointer-events: none;
}
.lwh-toast {
  background: var(--navy);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.65rem 1.2rem;
  border-radius: 999px;
  box-shadow: 0 6px 20px rgba(45,72,96,0.25);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.3s ease, transform 0.3s ease;
}
.lwh-toast-show {
  opacity: 1;
  transform: translateY(0);
}

/* ── Digest News Sections (stacked) ─────────────────────── */
.digest-news-pair {
  display: flex;
  flex-direction: row;
  gap: 2.5rem;
  margin: 2rem 0;
  align-items: flex-start;
}
.dns-col {
  flex: 1;
  border-radius: 14px;
  overflow: hidden;
  box-shadow: 0 2px 16px rgba(45,72,96,0.08);
  background: #fff;
  min-width: 0;
}
/* Articles inside each dns-col flow as a responsive grid. When the column
   is alone (no Life & Leadership sibling), articles fit 2-up. When both
   columns exist, each col is half-width and articles stack 1-up. */
.dns-col > div[id^="dns-articles-"],
.dns-col .dns-articles-custom {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
  padding: 1rem;
}
@media (max-width: 640px) {
  .digest-news-pair { flex-direction: column; gap: 1.25rem; }
  .dns-col > div[id^="dns-articles-"],
  .dns-col .dns-articles-custom { grid-template-columns: 1fr; gap: 0.75rem; }
}
.dns-col-header {
  padding: 0.75rem 1.1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  flex-wrap: wrap;
}
.dns-col-header-text { display: none; }
.dns-section-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: white;
}
.dns-section-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 400;
  color: rgba(255,255,255,0.75);
  flex-basis: 100%;
  margin-top: 1px;
}
.dns-col-header-navy { background: var(--navy); }
.dns-col-header-coral { background: var(--coral); }
.dns-refresh-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  padding: 2px;
  transition: color 0.15s;
  line-height: 1;
}
.dns-refresh-btn:hover { color: white; }
.dns-refresh-btn.spinning svg { animation: dns-spin 0.7s linear infinite; }
@keyframes dns-spin { to { transform: rotate(360deg); } }

/* ── Digest Team Section ─────────────────────────────────── */
.digest-team-section {
  margin: 2rem 0;
  background: linear-gradient(135deg, #f5f9f4, #fdfcf8);
  border: 1.5px solid rgba(141,184,138,0.35);
  border-radius: 14px;
  padding: 1.25rem 1.5rem;
}
.digest-team-list { margin-top: 0.75rem; }
.digest-team-row {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.7rem 0;
  border-bottom: 1px solid rgba(45,72,96,0.07);
  cursor: pointer;
  transition: background 0.1s;
  border-radius: 6px;
  margin: 0 -0.25rem;
  padding-left: 0.25rem;
  padding-right: 0.25rem;
}
.digest-team-row:last-child { border-bottom: none; }
.digest-team-row:hover { background: rgba(141,184,138,0.1); }
.dtr-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.dtr-body { flex: 1; min-width: 0; }
.dtr-name {
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy);
}
.dtr-role {
  font-weight: 400;
  color: var(--text-muted);
  font-size: 0.75rem;
}
.dtr-title {
  font-size: 0.85rem;
  color: var(--navy);
  margin-top: 0.15rem;
  line-height: 1.35;
}
.dtr-excerpt {
  font-size: 0.75rem;
  color: var(--text-light);
  margin-top: 0.15rem;
  line-height: 1.4;
}

/* ── Digest Email Button ─────────────────────────────────── */
.digest-email-row {
  display: flex;
  justify-content: center;
  margin: 2rem 0 1rem;
}
.digest-email-btn {
  background: transparent;
  border: 1.5px solid var(--navy);
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  padding: 0.6rem 1.4rem;
  border-radius: 50px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.digest-email-btn:hover { background: var(--navy); color: #fff; }
.digest-email-btn:disabled { opacity: 0.6; cursor: default; }

/* Account band (inline green band on personal screen) */
.personal-account-band {
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
  padding: 0 1rem;
  height: 44px;
  margin: 0;
}
/* Global footer: sits at the end of the document flow.
   You only see it when you scroll to the bottom of the page.
   The bar is the last child of <body>, after every screen section.
   Explicitly static positioning to override any cached/inherited rules. */
#global-bottom-bar {
  display: none;
  position: static;
  bottom: auto;
  top: auto;
  left: auto;
  right: auto;
}
body.lwh-in-app #global-bottom-bar { display: flex; position: static; }

/* ── Project AI Tools dropdown ─────────────────────────────────
   One primary button on the project header. Click opens a menu
   with Generate Report / Match Analysis / AI Suggest Stories. */
.proj-ai-tools-wrap { position: relative; display: inline-block; }
.proj-ai-tools-btn .proj-ai-tools-caret {
  margin-left: 0.35rem;
  font-size: 0.7rem;
  opacity: 0.85;
}
.proj-ai-tools-menu {
  position: absolute;
  top: calc(100% + 0.5rem);
  left: 0;
  z-index: 100;
  background: white;
  border: 1px solid rgba(45,72,96,0.12);
  border-radius: 12px;
  box-shadow: 0 8px 28px rgba(45,72,96,0.15);
  padding: 0.4rem;
  min-width: 220px;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.proj-ai-tools-menu.hidden { display: none; }
.proj-ai-tools-item {
  background: transparent;
  border: none;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  padding: 0.6rem 0.85rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.proj-ai-tools-item:hover { background: rgba(232,168,152,0.12); color: var(--coral); }

/* Quiet "Delete project" link — destructive action shouldn't visually compete */
.proj-detail-quiet-link {
  background: transparent;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  cursor: pointer;
  padding: 0.4rem 0.6rem;
  transition: color 0.15s;
  margin-left: auto;
}
.proj-detail-quiet-link:hover { color: var(--coral); }
/* Inside project-content sections the background is light, so the white
   variant above goes invisible. Render as a small round ✕ button that
   reads against any section background. */
.project-section .proj-detail-quiet-link,
.proj-impact-model-section .proj-detail-quiet-link,
.proj-citations-section .proj-detail-quiet-link,
.proj-key-questions-section .proj-detail-quiet-link,
.proj-notes-block-section .proj-detail-quiet-link {
  color: rgba(45,72,96,0.45);
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 50%;
  padding: 0;
  width: 26px;
  height: 26px;
  line-height: 1;
  font-size: 0.85rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.project-section .proj-detail-quiet-link:hover {
  color: var(--coral, #c98274);
  border-color: rgba(232,168,152,0.65);
  background: rgba(232,168,152,0.10);
}

/* The project header sits on a navy background. The global .btn-outline
   uses navy text + navy border, which is invisible here. Override so
   outline buttons in the header read as white-on-navy. */
.project-detail-header .btn-outline {
  background: transparent;
  color: white;
  border: 1px solid rgba(255,255,255,0.4);
}
.project-detail-header .btn-outline:hover {
  background: rgba(255,255,255,0.1);
  border-color: white;
  color: white;
}

/* Promote the primary subcategories section visually since it now sits at top */
.project-subcategories-primary {
  margin-top: 1.5rem !important;
  padding: 1.5rem 1.75rem !important;
  background: rgba(255,255,255,0.7) !important;
  border-radius: 14px !important;
  border: 1px solid rgba(45,72,96,0.08) !important;
}

/* ── Project subcategories ──────────────────────────────────────
   Sub-entities inside a project (coachees, workstreams, partners).
   Visual register: cards in a grid, like Key Move cards but tighter. */
.project-subcategories-section { margin-top: 2rem; }
.proj-sub-empty {
  color: var(--text-light);
  font-style: italic;
  font-size: 0.92rem;
  padding: 1rem 0;
}
.proj-sub-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 320px));
  gap: 0.85rem;
  margin: 0.5rem 0 1.25rem;
  justify-content: center;
}
.proj-sub-card {
  background: linear-gradient(155deg, rgba(141,184,138,0.10) 0%, rgba(148,184,208,0.08) 50%, rgba(232,168,152,0.10) 100%);
  border: 1.5px solid rgba(124,158,124,0.25);
  border-radius: 14px;
  padding: 1.1rem 1.2rem;
  cursor: pointer;
  transition: border-color 0.18s, box-shadow 0.18s, transform 0.12s;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
  position: relative;
  box-shadow: 0 1px 6px rgba(45,72,96,0.04);
}
.proj-sub-card:hover {
  border-color: var(--coral);
  box-shadow: 0 6px 22px rgba(232,168,152,0.20);
  transform: translateY(-2px);
}
/* Alternating colorways for series chapters so they pop and feel rhythmic */
.proj-sub-grid > .proj-sub-card:nth-child(3n+1) {
  background: linear-gradient(155deg, rgba(141,184,138,0.14) 0%, rgba(245,221,141,0.08) 100%);
  border-color: rgba(124,158,124,0.30);
}
.proj-sub-grid > .proj-sub-card:nth-child(3n+2) {
  background: linear-gradient(155deg, rgba(148,184,208,0.16) 0%, rgba(141,184,138,0.08) 100%);
  border-color: rgba(148,184,208,0.35);
}
.proj-sub-grid > .proj-sub-card:nth-child(3n+3) {
  background: linear-gradient(155deg, rgba(232,168,152,0.16) 0%, rgba(245,221,141,0.10) 100%);
  border-color: rgba(232,168,152,0.35);
}
.proj-sub-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
}
.proj-sub-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
}
.proj-sub-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-light);
  white-space: nowrap;
}
.proj-sub-desc {
  font-size: 0.85rem;
  color: var(--text);
  font-style: italic;
  line-height: 1.4;
}
.proj-sub-recent {
  font-size: 0.75rem;
  color: var(--coral);
  font-weight: 500;
}
.proj-sub-actions {
  display: flex;
  gap: 0.4rem;
  margin-top: 0.4rem;
  padding-top: 0.5rem;
  border-top: 1px solid rgba(45,72,96,0.06);
}
.proj-sub-action-btn {
  background: transparent;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.proj-sub-action-btn:hover { color: var(--navy); }
.proj-sub-action-danger:hover { color: var(--coral); }

.proj-sub-card-x {
  position: absolute;
  top: 8px;
  right: 10px;
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.28);
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  z-index: 2;
}
.proj-sub-card:hover .proj-sub-card-x { opacity: 1; }
.proj-sub-card-x:hover {
  color: var(--coral);
  background: rgba(232,168,152,0.12);
}

/* Drag grip on each project sub-card — visible affordance for drag-to-move.
   Always visible so the user knows where to click and drag (the previous
   hover-only state hid it on touch and on quick scans). */
/* Grip sits above the card content; card-head gets padding-top so the
   title never runs under the grip. Was overlapping the first letter. */
.proj-sub-card-grip {
  position: absolute;
  top: 8px;
  left: 8px;
  color: rgba(45,72,96,0.55);
  background: rgba(255,253,247,0.85);
  border: 1px solid rgba(45,72,96,0.12);
  font-size: 0.85rem;
  line-height: 1;
  cursor: grab;
  user-select: none;
  padding: 3px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s, transform 0.1s;
  opacity: 1;
  z-index: 3;
}
.proj-sub-card-grip:hover {
  color: var(--navy);
  background: #fff;
  transform: translateY(-1px);
}
.proj-sub-card-grip:active { cursor: grabbing; }
/* Reserve vertical space above the card head so the grip floats over
   empty padding, not over the title's first letter. */
.proj-sub-card-head { padding-top: 1.2rem; }

/* Project-scoped Impact Model component — added via Project Builder */
.proj-impact-model-section {
  background: linear-gradient(155deg, rgba(245,221,141,0.10) 0%, rgba(141,184,138,0.08) 50%, rgba(148,184,208,0.10) 100%);
  border: 1px solid rgba(141,184,138,0.22);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
}
.proj-im-visual {
  padding-top: 1rem;
}

/* Top action pair hidden — Alison didn't want them here. The "Map this
   Project" affordance shows up as the coral inline CTA above subcategories
   when no Impact Model has been added yet. "Add a category" already lives
   at the bottom of the category groups grid; "+ Add Component" at the
   bottom of the project. */
.proj-top-actions { display: none; }
.proj-top-actions-keep {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.35rem;
  margin: 0.4rem 0 1rem;
  position: relative;
}
.proj-top-action {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  border-radius: 999px;
  padding: 0.3rem 0.75rem 0.3rem 0.35rem;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.proj-top-action:hover {
  transform: translateY(-1px);
}
.proj-top-action-plus {
  width: 20px;
  height: 20px;
  border-radius: 50%;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 800;
  flex-shrink: 0;
}
.proj-top-action-pink {
  background: rgba(232,168,152,0.12);
  border: 1.5px solid rgba(232,168,152,0.55);
  color: var(--navy);
}
.proj-top-action-pink:hover {
  background: rgba(232,168,152,0.22);
  border-color: rgba(232,168,152,0.80);
  box-shadow: 0 4px 14px rgba(232,168,152,0.22);
}
.proj-top-action-pink .proj-top-action-plus {
  background: var(--coral, #e8a898);
}
.proj-top-action-green {
  background: rgba(141,184,138,0.12);
  border: 1.5px solid rgba(141,184,138,0.55);
  color: var(--navy);
}
.proj-top-action-green:hover {
  background: rgba(141,184,138,0.22);
  border-color: rgba(141,184,138,0.80);
  box-shadow: 0 4px 14px rgba(141,184,138,0.22);
}
.proj-top-action-green .proj-top-action-plus {
  background: var(--green, #7c9e7c);
}
.proj-top-add-menu {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin-top: 0.4rem;
  animation: lwh-fan-in 0.22s ease-out;
}

/* Founder pricing pill moved to the bottom-right of the viewport so it's
   a quiet ambient reminder, not a top-of-page banner. Fixed positioning
   keeps it out of the way until the user actively looks for it. */
.personal-founder-pill-row {
  position: fixed;
  bottom: 1rem;
  right: 1rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  z-index: 50;
  background: rgba(255,253,247,0.94);
  padding: 0.2rem 0.5rem 0.2rem 0.4rem;
  border-radius: 999px;
  box-shadow: 0 2px 8px rgba(45,72,96,0.10);
  opacity: 0.85;
  transition: opacity 0.2s;
}
.personal-founder-pill-row:hover { opacity: 1; }
.personal-top-strip-beta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--coral, #c98274);
  background: rgba(232,168,152,0.10);
  border: 1px solid rgba(232,168,152,0.40);
  border-radius: 999px;
  padding: 0.3rem 0.7rem;
  cursor: help;
  white-space: nowrap;
}

/* Chapter Builder — inline outline editor inside the chapter view */
.bcz-builder {
  background: rgba(255,253,247,0.85);
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 14px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1.2rem;
}
.bcz-builder-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--green, #5e7d5e);
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.bcz-builder-empty {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: var(--text-light);
  margin: 0 0 0.6rem;
}
.bcz-builder-row {
  display: flex;
  align-items: flex-start;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.bcz-builder-heading {
  flex: 1;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0.3rem 0 0.1rem;
  padding: 4px 8px;
  border-radius: 6px;
  outline: none;
}
.bcz-builder-heading:focus {
  background: rgba(232,168,152,0.08);
  box-shadow: 0 0 0 1px rgba(232,168,152,0.30);
}
.bcz-builder-heading:empty::before {
  content: attr(data-placeholder);
  color: rgba(45,72,96,0.30);
}
.bcz-builder-section {
  flex: 1;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.55;
  margin: 0;
  padding: 4px 8px;
  border-radius: 6px;
  outline: none;
}
.bcz-builder-section:focus {
  background: rgba(232,168,152,0.08);
  box-shadow: 0 0 0 1px rgba(232,168,152,0.30);
}
.bcz-builder-section:empty::before {
  content: attr(data-placeholder);
  color: rgba(45,72,96,0.30);
}
.bcz-builder-remove {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.30);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 6px 8px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
  margin-top: 8px;
}
.bcz-builder-remove:hover {
  color: var(--coral, #c98274);
  background: rgba(232,168,152,0.12);
}
.bcz-builder-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.bcz-builder-add {
  background: rgba(141,184,138,0.10);
  border: 1px solid rgba(141,184,138,0.40);
  color: var(--green, #5e7d5e);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.bcz-builder-add:hover {
  background: rgba(141,184,138,0.20);
  border-color: rgba(141,184,138,0.65);
  transform: translateY(-1px);
}

/* Book project tagline + "Read my book" CTA */
.proj-book-tagline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: var(--text);
  font-style: italic;
  text-align: center;
  margin: 0.8rem auto 0.4rem;
  max-width: 760px;
  padding: 0 1rem;
  line-height: 1.55;
}
.proj-book-read-row {
  display: flex;
  justify-content: center;
  margin: 0.4rem 0 1.2rem;
}
.proj-book-read-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.15rem;
  background: linear-gradient(140deg, rgba(141,184,138,0.10) 0%, rgba(148,184,208,0.10) 100%);
  border: 1.5px dashed rgba(141,184,138,0.55);
  border-radius: 14px;
  padding: 0.85rem 1.4rem;
  cursor: pointer;
  max-width: 580px;
  transition: background 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s;
}
.proj-book-read-btn:hover {
  background: linear-gradient(140deg, rgba(141,184,138,0.18) 0%, rgba(148,184,208,0.18) 100%);
  border-color: rgba(141,184,138,0.80);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(141,184,138,0.18);
}
.proj-book-read-spark {
  color: var(--coral, #c98274);
  font-size: 1rem;
}
.proj-book-read-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
}
.proj-book-read-hint {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  color: var(--text-light);
  font-style: italic;
  text-align: center;
}

/* Circular back arrow on the impact-as-a-picture screen — sits upper
   left of the container, fixed so it stays visible as the user scrolls
   the swoop. Alison asked for an unmissable back affordance. */
.impact-map-container { position: relative; }
.impact-map-back-arrow {
  position: fixed;
  top: 92px;
  left: 24px;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255,253,247,0.95);
  border: 1.5px solid rgba(45,72,96,0.18);
  color: var(--navy);
  font-size: 1.2rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 3px 12px rgba(45,72,96,0.10);
  z-index: 50;
  transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.impact-map-back-arrow:hover {
  background: #fff;
  border-color: var(--coral, #e8a898);
  color: var(--coral, #c98274);
  transform: translateY(-1px);
  box-shadow: 0 5px 18px rgba(232,168,152,0.22);
}

/* "Shape this Card" CTA — shown on non-sermon cards before the user
   has put any content in. Click it to reveal the structured fields
   below (Anchor / Key questions / Body / Citations). Sermon cards
   skip this state because the structure IS their workflow. */
.card-shape-cta {
  display: flex;
  justify-content: center;
  margin: 1.2rem 0 1.4rem;
}
.card-shape-cta-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
  background: linear-gradient(140deg, rgba(232,168,152,0.10) 0%, rgba(141,184,138,0.10) 100%);
  border: 1.5px dashed rgba(232,168,152,0.55);
  border-radius: 16px;
  padding: 1rem 1.4rem;
  cursor: pointer;
  max-width: 620px;
  width: 100%;
  transition: background 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s;
}
.card-shape-cta-btn:hover {
  background: linear-gradient(140deg, rgba(232,168,152,0.18) 0%, rgba(141,184,138,0.18) 100%);
  border-color: rgba(232,168,152,0.80);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232,168,152,0.18);
}
.card-shape-cta-plus { color: var(--coral, #c98274); font-size: 1.1rem; }
.card-shape-cta-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
}
.card-shape-cta-hint {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--text-light);
  font-style: italic;
  text-align: center;
  max-width: 480px;
}

/* Coral "+ Add Impact Model" CTA shown at the top of every project that
   doesn't have one yet. One clear click adds the swoop component. */
.proj-im-add-cta {
  display: flex;
  justify-content: center;
  margin: 0.4rem 0 1.4rem;
}
.proj-im-add-cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  background: linear-gradient(140deg, rgba(232,168,152,0.10) 0%, rgba(141,184,138,0.10) 100%);
  border: 1.5px dashed rgba(232,168,152,0.55);
  border-radius: 16px;
  padding: 0.95rem 1.3rem;
  cursor: pointer;
  max-width: 760px;
  width: 100%;
  transition: background 0.18s, border-color 0.18s, transform 0.12s, box-shadow 0.18s;
  text-align: left;
}
.proj-im-add-cta-btn:hover {
  background: linear-gradient(140deg, rgba(232,168,152,0.18) 0%, rgba(141,184,138,0.18) 100%);
  border-color: rgba(232,168,152,0.80);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(232,168,152,0.18);
}
.proj-im-add-cta-plus {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--coral, #e8a898);
  color: #fff;
  font-weight: 800;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  flex-shrink: 0;
}
.proj-im-add-cta-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  flex-shrink: 0;
}
.proj-im-add-cta-hint {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--text-light);
  font-style: italic;
}

/* ✕ to hide the top wave on a project */
.proj-top-wave-wrap { position: relative; }
.proj-top-wave-close {
  position: absolute;
  top: 6px;
  right: 6px;
  background: rgba(255,253,247,0.85);
  border: 1px solid rgba(45,72,96,0.18);
  color: rgba(45,72,96,0.55);
  font-size: 0.78rem;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.15s, background 0.15s, color 0.15s;
  z-index: 3;
}
.proj-top-wave-wrap:hover .proj-top-wave-close { opacity: 1; }
.proj-top-wave-close:hover {
  background: rgba(232,168,152,0.18);
  color: var(--coral, #c98274);
  border-color: rgba(232,168,152,0.55);
}

/* The "+ Show N hidden sections" restore strip at the bottom of a project */
.proj-hidden-restore-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.5rem;
  margin: 1.2rem 0 0.6rem;
  padding: 0.6rem 0;
  border-top: 1px dashed rgba(45,72,96,0.12);
}
.proj-hidden-restore-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-light);
  text-transform: uppercase;
}
.proj-hidden-restore-chip {
  background: rgba(141,184,138,0.10);
  border: 1px solid rgba(141,184,138,0.40);
  color: var(--green, #5e7d5e);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.proj-hidden-restore-chip:hover {
  background: rgba(141,184,138,0.20);
  border-color: rgba(141,184,138,0.65);
}

/* Write-into-chapter pair: lives alongside the voice button on the
   Writing Workshop view so the user can talk OR write the response. */
.bcz-write-row {
  margin-top: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.bcz-write-or {
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.9rem;
  color: var(--text-light);
  font-style: italic;
  margin: 0.2rem 0;
}
.bcz-write-input {
  width: 100%;
  background: #fff;
  border: 1px solid rgba(45,72,96,0.16);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.5;
  resize: vertical;
}
.bcz-write-input:focus {
  outline: none;
  border-color: var(--coral, #e8a898);
  box-shadow: 0 0 0 3px rgba(232,168,152,0.12);
}
.bcz-write-actions {
  display: flex;
  justify-content: flex-end;
}
.bcz-write-save {
  font-size: 0.85rem;
  padding: 0.5rem 1rem;
}
.bcz-write-status {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--green, #5e7d5e);
  font-style: italic;
}

/* S/M/L slider for Impact Model size — three pills that smoothly slide
   the swoop bigger or smaller. Active pill highlights with the active
   coral fill. Same control on project-scope and sermon-scope IMs. */
.proj-im-size-slider {
  display: inline-flex;
  background: rgba(45,72,96,0.06);
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 999px;
  padding: 2px;
  gap: 2px;
}
.proj-im-size-step {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.55);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  width: 26px;
  height: 22px;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease-out, color 0.18s ease-out, transform 0.1s;
}
.proj-im-size-step:hover { color: var(--navy); transform: translateY(-1px); }
.proj-im-size-step.is-active {
  background: var(--coral, #e8a898);
  color: #fff;
  box-shadow: 0 1px 4px rgba(232,168,152,0.30);
}
.proj-im-header-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.proj-sub-im-header-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.4rem;
}

/* Movement list under the sermon swoop — drag to reorder, ✕ to delete */
.proj-sub-km-list {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin: 0.6rem 0 0.9rem;
  padding: 0 0.2rem;
}
.proj-sub-km-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  background: rgba(255,253,247,0.85);
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  cursor: grab;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.proj-sub-km-row:active { cursor: grabbing; }
.proj-sub-km-row.is-dragging { opacity: 0.55; transform: rotate(-0.5deg); }
.proj-sub-km-row.is-drop-target {
  border-color: var(--green, #7c9e7c);
  background: rgba(141,184,138,0.10);
}
.proj-sub-km-grip {
  color: rgba(45,72,96,0.30);
  font-size: 0.95rem;
  user-select: none;
}
.proj-sub-km-num {
  width: 22px;
  height: 22px;
  background: var(--green, #7c9e7c);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}
.proj-sub-km-name {
  flex: 1;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--navy);
  cursor: pointer;
}
.proj-sub-km-name:hover { color: var(--coral, #c98274); }
.proj-sub-km-delete {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.30);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.proj-sub-km-delete:hover {
  color: var(--coral, #c98274);
  background: rgba(232,168,152,0.12);
}
.proj-sub-km-empty {
  font-style: italic;
  color: var(--text-light);
  font-size: 0.85rem;
  text-align: center;
  padding: 0.5rem 0;
}
.proj-sub-im-section.is-minimized .proj-sub-km-list {
  display: none;
}

/* Project-level component drag-to-reorder. Each component renders inside
   a host that has a ≡ grip on the left. Drag the grip to pick up the
   whole block; drop on another host to swap positions. */
.proj-component-host {
  position: relative;
  transition: background 0.15s, border-color 0.15s;
  border-radius: 16px;
}
.proj-component-host.is-dragging {
  opacity: 0.55;
  transform: rotate(-0.4deg);
}
.proj-component-host.is-drop-target {
  outline: 2px dashed var(--green, #7c9e7c);
  outline-offset: -2px;
  background: rgba(141,184,138,0.05);
}
.proj-component-grip {
  position: absolute;
  top: 18px;
  left: -22px;
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.20);
  font-size: 1.1rem;
  cursor: grab;
  padding: 2px 4px;
  border-radius: 6px;
  opacity: 0;
  transition: opacity 0.15s, color 0.15s, background 0.15s;
  user-select: none;
  line-height: 1;
}
.proj-component-grip:active { cursor: grabbing; }
.proj-component-host:hover .proj-component-grip { opacity: 1; }
.proj-component-grip:hover {
  color: var(--navy);
  background: rgba(45,72,96,0.06);
}
@media (max-width: 800px) {
  /* On narrower screens, tuck the grip inside the host so it doesn't
     fall off the left edge of the viewport. */
  .proj-component-grip { left: 6px; top: 14px; }
}

/* Three-size sliding container for Impact Model — Small (scope only),
   Medium (default, swoop + M/V text), Large (swoop + M/V + spacious). */
.proj-impact-model-section .proj-im-swoop-wrap,
.proj-sub-im-section .proj-sub-im-swoop-wrap {
  transition: max-height 0.7s cubic-bezier(0.22, 0.61, 0.36, 1), opacity 0.55s ease-out;
  overflow: hidden;
}
.proj-impact-model-section .proj-im-swoop-wrap svg,
.proj-sub-im-section .proj-sub-im-swoop-wrap svg {
  transition: max-height 0.7s cubic-bezier(0.22, 0.61, 0.36, 1);
}

/* Small — scope strip, M/V text hidden */
.proj-impact-model-section.is-size-small,
.proj-sub-im-section.is-size-small {
  padding-top: 0.85rem;
  padding-bottom: 0.85rem;
}
.proj-impact-model-section.is-size-small .proj-im-swoop-wrap,
.proj-sub-im-section.is-size-small .proj-sub-im-swoop-wrap {
  max-height: 110px;
  opacity: 0.94;
}
.proj-impact-model-section.is-size-small .proj-im-swoop-wrap svg,
.proj-sub-im-section.is-size-small .proj-sub-im-swoop-wrap svg {
  max-height: 110px;
}
.proj-impact-model-section.is-size-small .proj-im-mv-row,
.proj-impact-model-section.is-size-small .proj-im-hint-quiet,
.proj-sub-im-section.is-size-small .proj-sub-im-text-row {
  display: none;
}

/* Medium — default rich view */
.proj-impact-model-section.is-size-medium .proj-im-swoop-wrap,
.proj-sub-im-section.is-size-medium .proj-sub-im-swoop-wrap {
  max-height: 360px;
  opacity: 1;
}

/* Large — generous breathing room around the swoop */
.proj-impact-model-section.is-size-large,
.proj-sub-im-section.is-size-large {
  padding-top: 2rem;
  padding-bottom: 2rem;
}
.proj-impact-model-section.is-size-large .proj-im-swoop-wrap,
.proj-sub-im-section.is-size-large .proj-sub-im-swoop-wrap {
  max-height: 560px;
  opacity: 1;
}
.proj-impact-model-section.is-size-large .proj-im-swoop-wrap svg,
.proj-sub-im-section.is-size-large .proj-sub-im-swoop-wrap svg {
  max-height: 560px;
}
.proj-im-swoop-wrap,
.proj-sub-im-swoop-wrap {
  width: 100%;
  margin: 0.4rem 0 1rem;
}
.proj-im-swoop-svg {
  width: 100%;
  height: auto;
  display: block;
}
.proj-im-circle:hover circle {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1.06);
  transition: transform 0.18s ease-out;
}

/* Flow-in animation for each circle on the swoop. Each circle uses its
   own --enter-delay so they cascade from M through the Key Moves up to V. */
.proj-im-circle-enter {
  opacity: 0;
  transform: translateY(8px);
  animation: proj-im-circle-flow-in 0.55s cubic-bezier(0.22, 0.61, 0.36, 1) forwards;
  animation-delay: var(--enter-delay, 0ms);
  transform-box: fill-box;
}
@keyframes proj-im-circle-flow-in {
  0%   { opacity: 0; transform: translateY(10px) scale(0.85); }
  60%  { opacity: 1; transform: translateY(0) scale(1.06); }
  100% { opacity: 1; transform: translateY(0) scale(1); }
}
.proj-im-mv-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.9rem;
  margin-bottom: 0.7rem;
}
.proj-im-mv-card {
  background: rgba(255,253,247,0.78);
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 12px;
  padding: 0.7rem 0.9rem;
}
.proj-im-mv-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  color: rgba(45,72,96,0.55);
  margin-bottom: 0.35rem;
}
.proj-im-hint-quiet {
  font-size: 0.78rem;
  color: var(--text-light);
  font-style: italic;
  text-align: center;
  margin: 0.3rem 0 0;
}
@media (max-width: 700px) {
  .proj-im-mv-row { grid-template-columns: 1fr; }
}
.proj-im-hint {
  font-size: 0.85rem;
  color: var(--text-light);
  font-style: italic;
  margin: 0.2rem 0 1rem;
}
.proj-im-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 0.9rem;
  margin-bottom: 0.35rem;
}
.proj-im-input {
  width: 100%;
  background: rgba(255,253,247,0.85);
  border: 1px solid rgba(45,72,96,0.12);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.4;
  resize: vertical;
}
.proj-im-input:focus {
  outline: none;
  border-color: var(--coral);
  background: #fff;
}
.proj-im-km-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  margin-top: 0.4rem;
}
.proj-im-km-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: rgba(255,253,247,0.85);
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
}
.proj-im-km-spark {
  color: var(--coral);
  font-size: 0.85rem;
}
.proj-im-km-text {
  flex: 1;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.35;
}
.proj-im-km-remove {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.35);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.proj-im-km-remove:hover {
  color: var(--coral);
  background: rgba(232,168,152,0.12);
}
.proj-im-km-add-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.6rem;
}
.proj-im-km-input {
  flex: 1;
  background: rgba(255,253,247,0.95);
  border: 1px solid rgba(45,72,96,0.12);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--navy);
}
.proj-im-km-input:focus {
  outline: none;
  border-color: var(--coral);
  background: #fff;
}

/* Key Move pills — render each subcategory as a numbered pill the user
   can click to open. Lives inside the project Impact Model. */
.proj-im-keymoves-frame {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(45,72,96,0.10);
}
.proj-im-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(45,72,96,0.55);
  text-transform: none;
  margin-left: 0.4rem;
}
.proj-im-km-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.5rem;
}
.proj-im-km-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  background: rgba(141,184,138,0.10);
  border: 1px solid rgba(141,184,138,0.40);
  border-radius: 999px;
  padding: 0.35rem 0.85rem 0.35rem 0.35rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.proj-im-km-pill:hover {
  background: rgba(141,184,138,0.18);
  border-color: rgba(141,184,138,0.60);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(141,184,138,0.18);
}
.proj-im-km-pill-num {
  width: 22px;
  height: 22px;
  background: var(--green, #7c9e7c);
  color: #fff;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
}
.proj-im-km-pill-name {
  color: var(--navy);
  font-size: 1rem;
  font-weight: 500;
}
.proj-im-km-add {
  background: rgba(232,168,152,0.08);
  border-style: dashed;
  border-color: rgba(232,168,152,0.45);
}
.proj-im-km-add .proj-im-km-pill-num {
  background: var(--coral, #e8a898);
}
.proj-im-km-add:hover {
  background: rgba(232,168,152,0.15);
  border-color: rgba(232,168,152,0.65);
}
.proj-im-empty {
  font-style: italic;
  color: var(--text-light);
  font-size: 0.9rem;
  margin: 0.4rem 0 0.6rem;
}

/* Small green arrow that pulses next to the spot where Save just landed
   content. Quiet, not loud — three soft pulses then it fades away. */
.lwh-save-arrow {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  color: var(--green, #7c9e7c);
  background: rgba(141,184,138,0.18);
  border-radius: 50%;
  pointer-events: none;
  animation: lwh-save-arrow-pulse 0.9s ease-out 0s 3, lwh-save-arrow-fade 0.4s ease-out 2.8s 1 forwards;
  z-index: 5;
}
@keyframes lwh-save-arrow-pulse {
  0%   { transform: scale(0.9); box-shadow: 0 0 0 0 rgba(141,184,138,0.55); }
  50%  { transform: scale(1.15); box-shadow: 0 0 0 8px rgba(141,184,138,0.0); }
  100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(141,184,138,0); }
}
@keyframes lwh-save-arrow-fade {
  0%   { opacity: 1; }
  100% { opacity: 0; }
}

/* The Project Builder CTA is now a floating button that stays at the
   upper right as you scroll the project detail. Click it → chips fan
   downward. The whole control lives outside the document flow. */
/* The old fixed-position FAB CSS retained for the case where another
   render path still references .proj-builder-cta; the project detail now
   uses the inline pink/green pair at the top instead, so this can be
   neutralized to display:none — the inline version is what ships. */
.proj-builder-cta { display: none; }
/* Single + button that fans into chic chips for adding components.
   Tap the + → the chip row drops down. Tap again to close. */
.proj-builder-fab-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.6rem;
}
.proj-builder-fab {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: rgba(141,184,138,0.10);
  border: 1.5px solid rgba(141,184,138,0.45);
  color: var(--green, #5e7d5e);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.proj-builder-fab:hover {
  background: rgba(141,184,138,0.18);
  border-color: rgba(141,184,138,0.65);
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(141,184,138,0.22);
}
.proj-builder-fab-plus {
  width: 22px;
  height: 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green, #7c9e7c);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.85rem;
  transition: transform 0.18s ease-out;
}
.proj-builder-fab-wrap.is-open .proj-builder-fab-plus {
  transform: rotate(135deg);
}
.proj-builder-fan {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  justify-content: center;
  max-width: 640px;
  animation: lwh-fan-in 0.22s ease-out;
}
@keyframes lwh-fan-in {
  0%   { opacity: 0; transform: translateY(-6px); }
  100% { opacity: 1; transform: translateY(0); }
}
.proj-builder-chip {
  background: rgba(255,253,247,0.92);
  border: 1px solid rgba(45,72,96,0.14);
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.42rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.proj-builder-chip:hover {
  background: #fff;
  border-color: var(--coral, #e8a898);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(232,168,152,0.20);
}
.proj-builder-chip-more {
  background: transparent;
  border-style: dashed;
  color: var(--text-light);
}
.pbc-icon-mini {
  font-size: 0.85rem;
  color: var(--coral, #e8a898);
}

/* Thinking Lab → Project action button on each entry */
.tl-action-project {
  background: transparent;
  border: 1px solid rgba(141,184,138,0.45);
  color: var(--green, #5e7d5e);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tl-action-project:hover {
  background: rgba(141,184,138,0.12);
  border-color: rgba(141,184,138,0.70);
}

/* "Move to Project" picker modal */
.tl-move-box {
  max-width: 480px;
  padding: 1.6rem 1.8rem;
}
.tl-move-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--coral, #e8a898);
  margin-bottom: 0.3rem;
}
.tl-move-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  color: var(--navy);
  margin: 0 0 0.3rem;
}
.tl-move-sub {
  font-size: 0.85rem;
  color: var(--text-light);
  margin-bottom: 1rem;
}
.tl-move-list {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  max-height: 360px;
  overflow-y: auto;
  margin-bottom: 0.8rem;
}
.tl-move-pick {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(141,184,138,0.06);
  border: 1px solid rgba(141,184,138,0.25);
  border-radius: 12px;
  padding: 0.7rem 0.95rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
  text-align: left;
}
.tl-move-pick:hover {
  background: rgba(141,184,138,0.14);
  border-color: rgba(141,184,138,0.55);
  transform: translateY(-1px);
}
.tl-move-pick-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: var(--navy);
  font-weight: 500;
}
.tl-move-pick-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: var(--text-light);
}
.tl-move-empty {
  font-style: italic;
  color: var(--text-light);
  text-align: center;
  padding: 1rem 0;
}
.tl-move-new {
  width: 100%;
  background: rgba(232,168,152,0.08);
  border: 1px dashed rgba(232,168,152,0.50);
  color: var(--coral, #c98274);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.7rem;
  border-radius: 12px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.tl-move-new:hover {
  background: rgba(232,168,152,0.16);
  border-color: rgba(232,168,152,0.70);
}

/* Subcategory Edit modal — name, description, type picker, and Person
   fields when type is 'person'. */
.sub-edit-box {
  max-width: 560px;
  padding: 1.6rem 1.8rem;
}
.sub-edit-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--coral, #e8a898);
  margin-bottom: 0.3rem;
}
.sub-edit-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  color: var(--navy);
  margin: 0 0 0.9rem;
}
.sub-edit-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-top: 0.85rem;
  margin-bottom: 0.3rem;
}
.sub-edit-input {
  width: 100%;
  background: rgba(255,253,247,0.92);
  border: 1px solid rgba(45,72,96,0.14);
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--navy);
  resize: vertical;
}
.sub-edit-input:focus {
  outline: none;
  border-color: var(--coral, #e8a898);
  background: #fff;
}
.sub-edit-type-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.sub-edit-type-chip {
  background: rgba(255,253,247,0.92);
  border: 1px solid rgba(45,72,96,0.14);
  border-radius: 10px;
  padding: 0.5rem 0.7rem;
  cursor: pointer;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 100px;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.sub-edit-type-chip:hover {
  border-color: var(--coral, #e8a898);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(232,168,152,0.18);
}
.sub-edit-type-chip.is-active {
  background: rgba(232,168,152,0.12);
  border-color: var(--coral, #e8a898);
  box-shadow: 0 0 0 1px rgba(232,168,152,0.40) inset;
}
.sub-edit-type-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
}
.sub-edit-type-hint {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  color: var(--text-light);
}

/* Category picker — pick which container in the project this card lives in,
   or click "+ New category" to spin up a new one and move the card there
   in the same save. */
.sub-edit-group-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.4rem;
}
.sub-edit-group-chip {
  background: rgba(255,253,247,0.92);
  border: 1px solid rgba(45,72,96,0.14);
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.sub-edit-group-chip:hover {
  background: #fff;
  border-color: var(--coral, #e8a898);
  transform: translateY(-1px);
}
.sub-edit-group-chip.is-active {
  background: rgba(232,168,152,0.16);
  border-color: var(--coral, #e8a898);
  box-shadow: 0 0 0 1px rgba(232,168,152,0.40) inset;
}
.sub-edit-group-chip-new {
  background: rgba(141,184,138,0.10);
  border-color: rgba(141,184,138,0.45);
  color: var(--green, #5e7d5e);
  border-style: dashed;
}
.sub-edit-group-chip-new:hover {
  background: rgba(141,184,138,0.20);
  border-color: rgba(141,184,138,0.65);
}
.sub-edit-new-group-input {
  margin-top: 0.35rem;
}
.sub-edit-person-fields {
  margin-top: 0.6rem;
  padding-top: 0.6rem;
  border-top: 1px dashed rgba(45,72,96,0.12);
}
.sub-edit-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.55rem;
  margin-top: 1.2rem;
}

/* "Threading with N other articles" chip on each article card in TL */
.tl-related-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(141,184,138,0.10);
  border: 1px solid rgba(141,184,138,0.35);
  color: var(--green, #5e7d5e);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 999px;
  cursor: pointer;
  margin-top: 0.5rem;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.tl-related-chip:hover {
  background: rgba(141,184,138,0.20);
  border-color: rgba(141,184,138,0.60);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(141,184,138,0.20);
}
.tl-related-topic {
  font-weight: 700;
  color: var(--navy);
}

/* Photo thumbnail strip on Thinking Lab entries. When a note carries
   photos (Shortcut from phone, in-app upload), they render above the
   text as a row of thumbnails. Click → opens full size in a new tab. */
.tl-entry-photos {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-bottom: 0.5rem;
}
.tl-entry-photo {
  width: 96px;
  height: 96px;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid rgba(45,72,96,0.10);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.tl-entry-photo:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(45,72,96,0.15);
}

/* Inline Instagram multi-generate results — rendered into the existing
   Generate output panel after the focus picker fires. Each mode (post /
   carousel / series) becomes a group; each piece inside gets its own
   per-piece action row. */
.ig-results-wrap {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.ig-result-loading {
  background: rgba(255,253,247,0.85);
  border: 1px dashed rgba(141,184,138,0.40);
  border-radius: 14px;
  padding: 1.4rem;
  text-align: center;
}
.ig-result-loading-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--text-light);
  text-transform: uppercase;
  margin-bottom: 0.55rem;
}
.ig-result-loading-dots {
  display: inline-flex;
  gap: 0.35rem;
  margin: 0.5rem 0;
}
.ig-result-loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green, #7c9e7c);
  opacity: 0.4;
  animation: ig-loading-pulse 1.2s ease-in-out infinite;
}
.ig-result-loading-dots span:nth-child(2) { animation-delay: 0.18s; }
.ig-result-loading-dots span:nth-child(3) { animation-delay: 0.36s; }
@keyframes ig-loading-pulse {
  0%, 100% { transform: scale(0.8); opacity: 0.3; }
  50%      { transform: scale(1.1); opacity: 0.85; }
}
.ig-result-loading-hint {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: var(--text-light);
  font-style: italic;
  font-size: 0.9rem;
}
.ig-result-error {
  background: rgba(232,168,152,0.12);
  border: 1px solid rgba(232,168,152,0.45);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  color: var(--navy);
  font-size: 0.9rem;
}

.ig-result-group {
  background: rgba(255,253,247,0.96);
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 16px;
  padding: 1.1rem 1.2rem 0.9rem;
}
.ig-result-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.8rem;
}
.ig-result-group-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
}
.ig-result-group-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-light);
  text-transform: uppercase;
}
.ig-result-piece {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  margin-bottom: 0.7rem;
}
.ig-result-piece:last-child { margin-bottom: 0; }
.ig-result-piece-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
}
.ig-result-piece-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--coral, #c98274);
}
.ig-result-piece-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green, #5e7d5e);
  background: rgba(141,184,138,0.12);
  border: 1px solid rgba(141,184,138,0.35);
  border-radius: 999px;
  padding: 2px 8px;
}
.ig-result-piece-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--navy);
  line-height: 1.55;
  white-space: pre-wrap;
  margin-bottom: 0.7rem;
}
.ig-result-piece-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}
.ig-result-btn {
  background: rgba(255,253,247,0.92);
  border: 1px solid rgba(45,72,96,0.16);
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.4rem 0.8rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s;
}
.ig-result-btn:hover {
  transform: translateY(-1px);
}
.ig-result-btn-send {
  background: rgba(141,184,138,0.10);
  border-color: rgba(141,184,138,0.45);
  color: var(--green, #5e7d5e);
}
.ig-result-btn-send:hover {
  background: rgba(141,184,138,0.20);
  border-color: rgba(141,184,138,0.65);
}
.ig-result-btn-canva {
  background: rgba(112,103,255,0.08);
  border-color: rgba(112,103,255,0.45);
  color: #5a51d8;
}
.ig-result-btn-canva:hover {
  background: rgba(112,103,255,0.18);
  border-color: rgba(112,103,255,0.65);
}
.ig-result-btn-open {
  background: rgba(232,168,152,0.10);
  border-color: rgba(232,168,152,0.50);
  color: var(--coral, #c98274);
}
.ig-result-btn-open:hover {
  background: rgba(232,168,152,0.20);
  border-color: rgba(232,168,152,0.70);
}

/* Multi-category groups inside a project. Each group is a labeled section
   with its own grid of cards, an inline add, rename, and remove. Cards
   can be dragged from one group's grid to another. */
.proj-sub-groups {
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}
.proj-sub-group {
  border: 1px dashed transparent;
  border-radius: 16px;
  padding: 0.4rem 0.5rem;
  transition: border-color 0.15s, background 0.15s;
}
.proj-sub-group.is-drop-target {
  border-color: var(--green, #7c9e7c);
  background: rgba(141,184,138,0.06);
}
.proj-sub-group-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.7rem;
  margin: 0.2rem 0.4rem 0.7rem;
}
.proj-sub-group-head {
  cursor: grab;
}
.proj-sub-group-head:active { cursor: grabbing; }
.proj-sub-group.is-dragging {
  opacity: 0.6;
  transform: rotate(-0.5deg);
}
.proj-sub-group-grip {
  display: inline-block;
  color: rgba(45,72,96,0.30);
  font-size: 1.1rem;
  line-height: 1;
  padding: 0 0.35rem;
  user-select: none;
}
.proj-sub-group-head:hover .proj-sub-group-grip {
  color: rgba(45,72,96,0.55);
}
.proj-sub-group-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0;
  cursor: text;
  flex: 1;
  min-width: 0;
}
.proj-sub-group-actions {
  display: flex;
  gap: 0.3rem;
  opacity: 0.55;
  transition: opacity 0.15s;
}
.proj-sub-group:hover .proj-sub-group-actions,
.proj-sub-group-head:hover .proj-sub-group-actions { opacity: 1; }
.proj-sub-group-action {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.35);
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 6px;
  transition: color 0.15s, background 0.15s;
}
.proj-sub-group-action:hover {
  color: var(--navy);
  background: rgba(45,72,96,0.06);
}
.proj-sub-group-action-danger:hover {
  color: var(--coral, #c98274);
  background: rgba(232,168,152,0.12);
}
.proj-sub-empty-bucket {
  border: 1.5px dashed rgba(45,72,96,0.18);
  border-radius: 14px;
  padding: 1.1rem;
  text-align: center;
  color: var(--text-light);
  font-style: italic;
  font-size: 0.88rem;
}

/* Inline "add a card to this group" row inside each group */
.proj-sub-add-inline {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.7rem;
  padding: 0 0.2rem;
}
.proj-sub-add-inline-input {
  flex: 1;
  background: rgba(255,253,247,0.92);
  border: 1px solid rgba(45,72,96,0.12);
  border-radius: 10px;
  padding: 0.5rem 0.75rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  color: var(--navy);
}
.proj-sub-add-inline-input:focus {
  outline: none;
  border-color: var(--coral);
  background: #fff;
}

/* "Add a category" button below the last group */
.proj-sub-group-add {
  display: flex;
  justify-content: center;
  margin-top: 0.4rem;
}
.proj-sub-group-add-btn {
  background: rgba(141,184,138,0.08);
  border: 1.5px dashed rgba(141,184,138,0.50);
  color: var(--green, #5e7d5e);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.proj-sub-group-add-btn:hover {
  background: rgba(141,184,138,0.16);
  border-color: rgba(141,184,138,0.70);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(141,184,138,0.18);
}
.proj-sub-group-add-plus {
  width: 20px;
  height: 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green, #7c9e7c);
  color: #fff;
  border-radius: 50%;
  font-weight: 800;
  font-size: 0.8rem;
}

/* Dragging visual */
.proj-sub-card.is-dragging {
  opacity: 0.45;
  transform: rotate(-1.5deg);
}
.proj-sub-card[draggable="true"] {
  user-select: none;
}

/* "Quick" project button — green pill that creates a project from just a name */
.projects-header-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
}
.btn-quick-create {
  background: rgba(141,184,138,0.12);
  border: 1px solid rgba(141,184,138,0.50);
  color: var(--green, #5e7d5e);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, transform 0.1s, box-shadow 0.15s;
}
.btn-quick-create:hover {
  background: rgba(141,184,138,0.22);
  border-color: rgba(141,184,138,0.70);
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(141,184,138,0.18);
}

.proj-sub-add-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.proj-sub-add-input {
  flex: 1;
  padding: 0.55rem 0.85rem;
  border: 1px dashed rgba(45,72,96,0.3);
  border-radius: 10px;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  color: var(--navy);
  outline: none;
  transition: border-color 0.15s;
}
.proj-sub-add-input:focus { border-color: var(--coral); border-style: solid; }

/* Project Checklist — simple things-to-do for this project */
.project-checklist-section { }
.proj-checklist-list {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.proj-checklist-empty {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: rgba(45,72,96,0.5);
  margin: 0.5rem 0;
}
.proj-checklist-item {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.65rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.proj-checklist-item:hover { background: rgba(228, 240, 247, 0.4); }
.proj-checklist-item input[type="checkbox"] {
  width: 18px; height: 18px;
  cursor: pointer;
  accent-color: #7c9e7c;
  flex-shrink: 0;
}
.proj-checklist-item-text {
  flex: 1;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.92rem;
  color: var(--navy);
  line-height: 1.45;
}
.proj-checklist-item-done .proj-checklist-item-text {
  color: rgba(45, 72, 96, 0.4);
  text-decoration: line-through;
  font-style: italic;
}
.proj-checklist-item-delete {
  background: transparent;
  border: none;
  color: rgba(45, 72, 96, 0.35);
  cursor: pointer;
  font-size: 0.85rem;
  width: 24px; height: 24px;
  border-radius: 50%;
  opacity: 0;
  transition: opacity 0.12s, background 0.12s, color 0.12s;
}
.proj-checklist-item:hover .proj-checklist-item-delete { opacity: 1; }
.proj-checklist-item-delete:hover {
  background: rgba(194, 85, 85, 0.12);
  color: rgba(194, 85, 85, 0.85);
}
.proj-checklist-done-separator {
  height: 1px;
  background: rgba(45, 72, 96, 0.08);
  margin: 0.5rem 0;
}
.proj-checklist-add-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.proj-checklist-add-input {
  flex: 1;
  padding: 0.55rem 0.85rem;
  border: 1px dashed rgba(45,72,96,0.3);
  border-radius: 10px;
  background: transparent;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 0.88rem;
  color: var(--navy);
  outline: none;
  transition: border-color 0.15s;
}
.proj-checklist-add-input:focus { border-color: var(--coral); border-style: solid; }

/* ── Daily Digest Projects section ──
   Chic card grid showing active projects with name, status, latest
   story, subcategory count. Lives right after The Road. */
.digest-zone-projects {
  background: rgba(45,72,96,0.03);
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 14px;
  padding: 1.75rem 2rem 2rem;
  margin: 2rem 0;
}
.digest-zone-projects .dz-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0;
  border-bottom: none;
  text-transform: none;
  letter-spacing: 0;
  padding-bottom: 0;
}
.digest-proj-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
  margin-top: 1.25rem;
}
.digest-proj-card {
  background: white;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 12px;
  padding: 1rem 1.15rem;
  cursor: pointer;
  transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
  position: relative;
  overflow: hidden;
}
.digest-proj-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 3px;
  background: linear-gradient(180deg, var(--coral), #8DB88A);
}
.digest-proj-card:hover {
  border-color: var(--coral);
  box-shadow: 0 6px 18px rgba(45,72,96,0.08);
  transform: translateY(-2px);
}
.digest-proj-status {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 0.35rem;
}
.digest-proj-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 0.4rem;
}
.digest-proj-desc {
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 0.55rem;
  font-style: italic;
}
.digest-proj-meta {
  display: flex;
  gap: 0.65rem;
  flex-wrap: wrap;
  margin-top: 0.35rem;
}
.digest-proj-meta-bit {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: var(--text-light);
  background: rgba(45,72,96,0.05);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.digest-proj-latest {
  margin-top: 0.75rem;
  padding-top: 0.65rem;
  border-top: 1px solid rgba(45,72,96,0.06);
  font-size: 0.82rem;
  color: var(--navy);
  line-height: 1.35;
}
.dpl-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(141,184,138,0.85);
  margin-right: 0.4rem;
}

/* ── Project Wave Timeline (signature wave at the project level) ── */
.project-wave-section { margin: 1.5rem 0; }
.project-wave-section.project-wave-hidden { padding-bottom: 0.5rem; }
.proj-wave-toggle-btn {
  background: transparent;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 999px;
  padding: 0.3rem 0.85rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--text-light);
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.proj-wave-toggle-btn:hover {
  background: rgba(45,72,96,0.05);
  color: var(--navy);
  border-color: rgba(45,72,96,0.35);
}
.proj-wave-empty {
  padding: 2rem 1.25rem;
  text-align: center;
  font-style: italic;
  color: var(--text-light);
  font-size: 0.9rem;
  background: rgba(255,255,255,0.5);
  border: 1px dashed rgba(45,72,96,0.12);
  border-radius: 12px;
}
.proj-wave-wrap {
  position: relative;
  height: 160px;
  margin: 1rem 0 0.5rem;
  padding: 0 0.5rem;
}
.proj-wave-svg {
  position: absolute;
  top: 40px;
  left: 0;
  width: 100%;
  height: 80px;
}
.proj-wave-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.proj-wave-dot {
  position: absolute;
  width: 32px;
  height: 32px;
  margin-left: -16px;
  margin-top: -16px;
  background: var(--coral);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  animation: projWaveFadeIn 0.55s ease forwards;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 3px 10px rgba(232,168,152,0.4);
  border: 2px solid white;
}
.proj-wave-dot:hover {
  transform: scale(1.2);
  box-shadow: 0 6px 18px rgba(232,168,152,0.55);
}
@keyframes projWaveFadeIn {
  to { opacity: 1; }
}
.proj-wave-rangelabels {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  padding: 0 0.25rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.45);
}
.proj-wave-dates {
  display: flex;
  gap: 1.5rem;
  justify-content: center;
  margin-top: 0.5rem;
  flex-wrap: wrap;
}
.proj-wave-date-marker {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--text-light);
}
.pwdm-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--coral);
  margin-right: 0.4rem;
}

/* Subcategory mini Impact Model — landing-page-style circle row */
.proj-sub-im-circles-row {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0.85rem;
  padding: 1rem 0 1.5rem;
}
.proj-sub-im-circle {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.45rem;
  cursor: pointer;
  background: transparent;
  border: none;
  padding: 0;
  font-family: inherit;
  transition: transform 0.15s ease;
}
.proj-sub-im-circle:hover { transform: translateY(-2px); }
.proj-sub-im-circle-letter,
.proj-sub-im-circle-num {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 700;
  color: white;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.proj-sub-im-circle-mv .proj-sub-im-circle-letter {
  background: var(--navy);
  box-shadow: 0 2px 8px rgba(45,72,96,0.18);
}
.proj-sub-im-circle-km .proj-sub-im-circle-num {
  background: #8DB88A;
  box-shadow: 0 2px 8px rgba(141,184,138,0.25);
}
.proj-sub-im-circle:hover .proj-sub-im-circle-letter,
.proj-sub-im-circle:hover .proj-sub-im-circle-num {
  box-shadow: 0 4px 14px rgba(45,72,96,0.22);
}
.proj-sub-im-circle-add .proj-sub-im-circle-num {
  background: transparent;
  border: 1.5px dashed rgba(141,184,138,0.6);
  color: #6e9b6c;
}
.proj-sub-im-circle-add:hover .proj-sub-im-circle-num {
  background: rgba(141,184,138,0.1);
  border-color: #8DB88A;
}
.proj-sub-im-circle-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
  text-align: center;
  max-width: 90px;
  line-height: 1.25;
}

.proj-sub-im-text-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-top: 0.5rem;
}
@media (max-width: 640px) { .proj-sub-im-text-row { grid-template-columns: 1fr; } }

/* Subcategory mini Impact Model */
.proj-sub-im-section {
  margin: 1.5rem 0 1rem;
  padding: 1.5rem 1.75rem;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 14px;
}
.proj-sub-im-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  color: var(--coral);
  margin-bottom: 1rem;
}
.proj-sub-im-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 640px) { .proj-sub-im-row { grid-template-columns: 1fr; } }
.proj-sub-im-card {
  padding: 1rem 1.1rem;
  background: white;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.proj-sub-im-card:hover {
  border-color: var(--coral);
  box-shadow: 0 2px 8px rgba(45,72,96,0.06);
}
.proj-sub-im-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.5rem;
}
.proj-sub-im-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  line-height: 1.45;
  color: var(--navy);
}
.proj-sub-im-empty {
  font-style: italic;
  color: var(--text-light);
  font-size: 0.88rem;
}
.proj-sub-im-kms { margin-top: 1rem; }
.proj-sub-km-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.75rem;
  margin-top: 0.5rem;
}
.proj-sub-km-card {
  background: white;
  border: 1px solid rgba(141,184,138,0.3);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
  position: relative;
}
.proj-sub-km-card:hover {
  border-color: #8DB88A;
  box-shadow: 0 2px 8px rgba(141,184,138,0.15);
  transform: translateY(-1px);
}
.proj-sub-km-number {
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #8DB88A;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.85rem;
  font-weight: 700;
  margin-bottom: 0.4rem;
}
.proj-sub-km-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.3;
}
.proj-sub-km-desc {
  font-size: 0.78rem;
  color: var(--text);
  font-style: italic;
  margin-top: 0.3rem;
  line-height: 1.4;
}
.proj-sub-km-add {
  background: transparent;
  border: 1px dashed rgba(141,184,138,0.5);
  border-radius: 10px;
  color: #6e9b6c;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0.85rem 1rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.proj-sub-km-add:hover {
  background: rgba(141,184,138,0.08);
  color: #4a7d4a;
  border-color: #8DB88A;
}
.proj-sub-km-add-first { grid-column: 1 / -1; padding: 1.5rem 1rem; }

/* Subcategory timeline (signature wave) */
.proj-sub-timeline-section {
  margin: 1.25rem 0 1.5rem;
  padding: 1.25rem 1.75rem 1rem;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 14px;
}
.proj-sub-timeline-empty {
  font-style: italic;
  color: var(--text-light);
  font-size: 0.88rem;
  padding: 1.25rem 0;
}
.proj-sub-tl-wrap {
  position: relative;
  height: 110px;
  margin: 0.5rem 0;
}
.proj-sub-tl-dots {
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.proj-sub-tl-dot {
  position: absolute;
  width: 26px;
  height: 26px;
  margin-left: -13px;
  margin-top: -13px;
  background: var(--coral);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  animation: subTlFadeIn 0.5s ease forwards;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 2px 6px rgba(232,168,152,0.4);
}
.proj-sub-tl-dot:hover {
  transform: scale(1.18);
  box-shadow: 0 4px 14px rgba(232,168,152,0.55);
}
@keyframes subTlFadeIn {
  to { opacity: 1; }
}

/* Subcategory detail view */
.proj-sub-back-link {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--coral);
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: color 0.15s;
}
.proj-sub-back-link:hover { color: var(--navy); }
.proj-sub-story-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: rgba(255,255,255,0.6);
  border: 1px solid rgba(45,72,96,0.06);
  border-radius: 8px;
  margin-bottom: 0.4rem;
  gap: 0.75rem;
}
.proj-sub-story-info {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  flex: 1;
  min-width: 0;
}
.proj-sub-story-title {
  font-weight: 600;
  color: var(--navy);
  font-size: 0.92rem;
}
.proj-sub-story-date {
  font-size: 0.72rem;
  color: var(--text-light);
}
.proj-sub-notes {
  width: 100%;
  min-height: 120px;
  padding: 0.85rem 1rem;
  border: 1px solid rgba(45,72,96,0.15);
  border-radius: 10px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.5;
  resize: vertical;
  background: white;
}

/* Digest time-horizon toggle: This Week / Next Week / Next Month / Next Year */
.digest-horizon-toggle {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.5rem 0 1.5rem;
}
.dht-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 500;
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.45);
  padding: 0.2rem 0.1rem;
  cursor: pointer;
  transition: color 0.15s ease;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.dht-btn:hover { color: var(--navy); }
.dht-btn.dht-active {
  color: var(--navy);
  font-weight: 700;
  border-bottom: 1.5px solid var(--coral, #E07A5F);
}
.dht-sep {
  color: rgba(45,72,96,0.25);
  font-size: 0.7rem;
  user-select: none;
}

/* Forward-looking horizon panel */
.digest-horizon-panel.hidden { display: none; }
.dhp-loading {
  text-align: center;
  padding: 3rem 1rem;
  font-style: italic;
  color: var(--text-light);
}
.dhp-glyph { color: var(--coral); margin-right: 0.4rem; }
.dhp-card {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 14px;
  padding: 2rem 2rem 1.5rem;
  margin: 1rem 0 2rem;
}
.dhp-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--coral);
  margin-bottom: 0.4rem;
}
.dhp-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.9rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 1rem;
}
.dhp-note {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--navy);
  font-style: italic;
  margin: 0 0 1.5rem;
}
.dhp-section { margin-top: 1.5rem; }
.dhp-section-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 0.6rem;
}
.dhp-events, .dhp-focus {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.dhp-events li {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.5rem 0.75rem;
  background: rgba(232,168,152,0.08);
  border-radius: 8px;
  border-left: 2px solid var(--coral);
}
.dhp-event-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--coral);
  min-width: 80px;
}
.dhp-event-title {
  font-size: 0.92rem;
  color: var(--navy);
}
.dhp-focus li {
  padding: 0.5rem 0.75rem;
  background: rgba(141,184,138,0.08);
  border-radius: 8px;
  border-left: 2px solid #8DB88A;
  font-size: 0.92rem;
  color: var(--navy);
  line-height: 1.45;
}
.dhp-footer { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid rgba(45,72,96,0.06); }
.dhp-back-btn {
  background: transparent;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--coral);
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.dhp-back-btn:hover { color: var(--navy); }

/* iOS "Add to Home Screen" prompt — bottom sheet, dismissible */
.pwa-ios-prompt {
  position: fixed;
  left: 1rem;
  right: 1rem;
  bottom: 1rem;
  background: white;
  border-radius: 14px;
  box-shadow: 0 8px 32px rgba(45,72,96,0.25);
  padding: 0.9rem 1rem 0.9rem 1.1rem;
  z-index: 1000;
  border: 1px solid rgba(45,72,96,0.08);
  animation: pwaSlideUp 0.4s ease;
}
.pwa-ios-prompt.hidden { display: none; }
@keyframes pwaSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.pwa-ios-prompt-inner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.pwa-ios-icon {
  width: 44px;
  height: 44px;
  border-radius: 10px;
  flex-shrink: 0;
}
.pwa-ios-text { flex: 1; min-width: 0; }
.pwa-ios-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.15rem;
}
.pwa-ios-step {
  font-size: 0.78rem;
  color: var(--text-light);
  line-height: 1.4;
}
.pwa-ios-step strong { color: var(--navy); font-weight: 600; }
.pwa-ios-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: transparent;
  border: none;
  color: var(--text-light);
  font-size: 1.5rem;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
}
.pwa-ios-close:hover { color: var(--navy); }

/* "Add a section for the How Agent to bring me" — at the bottom of The Field zone */
.dns-add-section-row {
  display: flex;
  justify-content: center;
  margin-top: 1.5rem;
}
.dns-add-section-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  background: transparent;
  border: 1px dashed rgba(45,72,96,0.3);
  color: var(--navy);
  padding: 0.5rem 1.2rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dns-add-section-btn:hover {
  background: rgba(232,168,152,0.12);
  border-color: var(--coral);
  color: var(--coral);
}
.dns-section-remove {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.4);
  cursor: pointer;
  font-size: 0.85rem;
  margin-left: 0.4rem;
  padding: 0;
  transition: color 0.15s;
}
.dns-section-remove:hover { color: var(--coral); }
.dns-empty {
  padding: 1rem;
  font-style: italic;
  color: var(--text-light);
  font-size: 0.85rem;
  text-align: center;
}

/* ── Admin Feedback queue ── */
.admin-fb-view-toggle {
  display: inline-flex;
  background: rgba(45,72,96,0.05);
  border-radius: 999px;
  padding: 3px;
  margin: 0.5rem 0 1rem;
}
.admin-fb-view-btn {
  background: transparent;
  border: none;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  font-weight: 600;
  color: rgba(45,72,96,0.55);
  cursor: pointer;
  transition: all 0.18s ease;
}
.admin-fb-view-btn:hover { color: var(--navy); }
.admin-fb-view-btn.admin-fb-view-active { background: var(--navy); color: white; }

.admin-fb-feature-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: var(--coral);
  background: rgba(232,168,152,0.15);
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
}

.admin-fb-group { margin-bottom: 1.5rem; }
.admin-fb-group-header {
  display: flex;
  align-items: baseline;
  gap: 0.6rem;
  padding-bottom: 0.5rem;
  margin-bottom: 0.6rem;
  border-bottom: 1px solid rgba(45,72,96,0.08);
}
.admin-fb-group-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
}
.admin-fb-group-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: var(--text-light);
  background: rgba(45,72,96,0.06);
  padding: 0.15rem 0.55rem;
  border-radius: 999px;
}
.admin-fb-group-items { display: flex; flex-direction: column; gap: 0.5rem; }

.admin-fb-filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.5rem 0 1rem;
}
.admin-fb-filter-btn {
  background: transparent;
  border: 1px solid rgba(45,72,96,0.15);
  border-radius: 999px;
  padding: 0.4rem 0.95rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.15s;
}
.admin-fb-filter-btn:hover { color: var(--navy); border-color: rgba(45,72,96,0.3); }
.admin-fb-filter-btn.admin-fb-filter-active { background: var(--navy); color: white; border-color: var(--navy); }

.admin-fb-list { display: flex; flex-direction: column; gap: 0.6rem; }
.admin-fb-card {
  background: white;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 12px;
  padding: 0.85rem 1.1rem 1rem;
}
.admin-fb-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-bottom: 0.5rem;
  flex-wrap: wrap;
}
.admin-fb-status {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.18rem 0.6rem;
  border-radius: 999px;
}
.afb-status-new { background: rgba(232,168,152,0.18); color: #b6735f; }
.afb-status-roadmap { background: rgba(141,184,138,0.18); color: #4a7d4a; }
.afb-status-dream { background: rgba(45,72,96,0.1); color: var(--navy); }
.afb-status-wontfit { background: rgba(45,72,96,0.06); color: var(--text-light); }
.afb-status-done { background: rgba(141,184,138,0.3); color: #2f5d2f; }
.admin-fb-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  color: var(--text-light);
}
.admin-fb-email {
  color: var(--coral);
  text-decoration: none;
}
.admin-fb-email:hover { text-decoration: underline; }
.admin-fb-message {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.55;
  color: var(--navy);
  margin-bottom: 0.55rem;
  white-space: pre-wrap;
}
.admin-fb-source {
  font-size: 0.7rem;
  color: var(--text-light);
  margin-bottom: 0.5rem;
}
.admin-fb-source code {
  background: rgba(45,72,96,0.06);
  padding: 1px 6px;
  border-radius: 4px;
  font-size: 0.72rem;
}
.admin-fb-actions {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(45,72,96,0.06);
}
.admin-fb-select {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(45,72,96,0.15);
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--navy);
  background: white;
}
.admin-fb-delete {
  background: transparent;
  border: 1px solid rgba(45,72,96,0.15);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  color: var(--text-light);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.admin-fb-delete:hover { color: var(--coral); border-color: var(--coral); }

/* ── Admin Stories of Impact: wave timeline + card grid ── */
.admin-cs-wave-wrap { margin: 0.75rem 0 1.5rem; }
.admin-cs-wave {
  position: relative;
  height: 120px;
  background: rgba(255,255,255,0.5);
  border: 1px solid rgba(45,72,96,0.06);
  border-radius: 12px;
  margin: 0 0 1rem;
  overflow: hidden;
}
.admin-cs-dots { position: absolute; inset: 0; pointer-events: none; }
.admin-cs-dot {
  position: absolute;
  width: 28px;
  height: 28px;
  margin-left: -14px;
  margin-top: -14px;
  background: var(--coral);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  cursor: pointer;
  pointer-events: auto;
  opacity: 0;
  animation: adminCsFadeIn 0.5s ease forwards;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 2px 6px rgba(232,168,152,0.4);
  border: 2px solid white;
}
.admin-cs-dot:hover {
  transform: scale(1.2);
  box-shadow: 0 4px 14px rgba(232,168,152,0.55);
}
.admin-cs-dot-photo { background: var(--navy); box-shadow: 0 2px 6px rgba(45,72,96,0.4); }
.admin-cs-dot-photo:hover { box-shadow: 0 4px 14px rgba(45,72,96,0.55); }
@keyframes adminCsFadeIn { to { opacity: 1; } }

.admin-cs-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
  gap: 1rem;
  margin-top: 1rem;
}
.admin-cs-card {
  background: white;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 14px;
  overflow: hidden;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.admin-cs-card:hover { box-shadow: 0 6px 18px rgba(45,72,96,0.08); border-color: rgba(45,72,96,0.12); }
.admin-cs-photo {
  width: 100%;
  height: 180px;
  background-size: cover;
  background-position: center;
  background-color: rgba(45,72,96,0.05);
}
.admin-cs-body { padding: 1rem 1.1rem; }
.admin-cs-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  margin-bottom: 0.5rem;
}
.admin-cs-status {
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: 0.62rem;
}
.acs-status-new { background: rgba(232,168,152,0.18); color: #b6735f; }
.acs-status-reviewed { background: rgba(45,72,96,0.1); color: var(--navy); }
.acs-status-published { background: rgba(141,184,138,0.18); color: #4a7d4a; }
.acs-status-declined { background: rgba(45,72,96,0.06); color: var(--text-light); }
.admin-cs-date { color: var(--text-light); font-size: 0.72rem; }
.admin-cs-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.admin-cs-feature {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 0.55rem;
}
.admin-cs-story {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.55;
  font-style: italic;
  margin-bottom: 0.6rem;
  max-height: 180px;
  overflow: auto;
}
.admin-cs-outcome {
  font-size: 0.85rem;
  color: var(--navy);
  padding: 0.5rem 0.75rem;
  background: rgba(141,184,138,0.08);
  border-left: 2px solid #8DB88A;
  border-radius: 6px;
  margin-bottom: 0.75rem;
}
.admin-cs-feature-request {
  font-size: 0.85rem;
  color: var(--navy);
  padding: 0.5rem 0.75rem;
  background: rgba(232,168,152,0.1);
  border-left: 2px solid var(--coral);
  border-radius: 6px;
  margin-bottom: 0.75rem;
}
.admin-cs-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.75rem;
  padding-top: 0.55rem;
  border-top: 1px solid rgba(45,72,96,0.06);
}
.admin-cs-email {
  color: var(--coral);
  text-decoration: none;
  font-weight: 500;
}
.admin-cs-email:hover { text-decoration: underline; }
.admin-cs-perm { color: #4a7d4a; font-weight: 600; }
.admin-cs-no-perm { color: var(--text-light); font-style: italic; }
.admin-cs-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
  align-items: center;
}
.admin-cs-select {
  flex: 1;
  padding: 0.4rem 0.6rem;
  border: 1px solid rgba(45,72,96,0.15);
  border-radius: 8px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--navy);
  background: white;
}
.admin-cs-delete-btn {
  background: transparent;
  border: 1px solid rgba(45,72,96,0.15);
  border-radius: 8px;
  padding: 0.4rem 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  color: var(--text-light);
  cursor: pointer;
  transition: color 0.15s, border-color 0.15s;
}
.admin-cs-delete-btn:hover { color: var(--coral); border-color: var(--coral); }

/* Account page: Help us improve Lead with How section */
.acct-help-section { padding-bottom: 0.5rem; }
.acct-help-buttons {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 0.85rem;
  margin-top: 0.5rem;
}
.acct-help-card {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  background: white;
  border: 1px solid rgba(45,72,96,0.1);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  text-decoration: none;
  color: var(--navy);
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.acct-help-card:hover {
  border-color: var(--coral);
  box-shadow: 0 4px 14px rgba(45,72,96,0.06);
  transform: translateY(-1px);
}
.acct-help-card-icon {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  color: white;
}
.acct-help-card-story .acct-help-card-icon { background: var(--coral); }
.acct-help-card-feedback .acct-help-card-icon { background: var(--navy); }
.acct-help-card-text { flex: 1; min-width: 0; }
.acct-help-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.acct-help-card-sub {
  font-size: 0.82rem;
  color: var(--text-light);
  line-height: 1.45;
}

/* Story-share nudge — chic centered overlay */
.lwh-nudge-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45,72,96,0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 9000;
  padding: 1rem;
  animation: lwhNudgeFadeIn 0.3s ease;
}
.lwh-nudge-overlay.hidden { display: none; }
@keyframes lwhNudgeFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.lwh-nudge-card {
  background: white;
  border-radius: 18px;
  padding: 2rem 2.25rem 1.75rem;
  max-width: 480px;
  width: 100%;
  box-shadow: 0 24px 70px rgba(45,72,96,0.25);
  position: relative;
  animation: lwhNudgeSlideUp 0.4s ease;
}
@keyframes lwhNudgeSlideUp {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.lwh-nudge-close {
  position: absolute;
  top: 0.6rem;
  right: 0.85rem;
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.4);
  font-size: 1.6rem;
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem 0.5rem;
  transition: color 0.15s;
}
.lwh-nudge-close:hover { color: var(--navy); }
.lwh-nudge-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--coral);
  margin-bottom: 0.5rem;
}
.lwh-nudge-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.85rem;
}
.lwh-nudge-body {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--text);
  margin: 0 0 1.5rem;
}
.lwh-nudge-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  align-items: stretch;
}
.lwh-nudge-primary {
  display: inline-block;
  text-align: center;
  background: var(--coral);
  color: white;
  text-decoration: none;
  padding: 0.85rem 1.25rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  transition: background 0.15s;
}
.lwh-nudge-primary:hover { background: #d68f7c; }
.lwh-nudge-secondary {
  background: transparent;
  border: 1px solid rgba(45,72,96,0.2);
  color: var(--navy);
  padding: 0.7rem 1.2rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.lwh-nudge-secondary:hover { background: rgba(45,72,96,0.04); }
.lwh-nudge-skip {
  background: transparent;
  border: none;
  color: var(--text-light);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 500;
  cursor: pointer;
  padding: 0.5rem;
  margin-top: 0.25rem;
  transition: color 0.15s;
}
.lwh-nudge-skip:hover { color: var(--navy); }

/* Community Story permission row — checkbox + flowing text */
.cys-permission { margin-top: 1rem; }
.cys-permission label {
  display: flex !important;
  align-items: flex-start;
  gap: 0.65rem;
  width: 100%;
  font-size: 0.92rem;
  line-height: 1.5;
  color: var(--navy);
  cursor: pointer;
  margin: 0;
}
.cys-permission label input[type="checkbox"] {
  margin-top: 0.25rem;
  flex-shrink: 0;
}
.cys-permission label span {
  flex: 1;
  min-width: 0;
}

/* Community Story photo preview */
.cys-photo-wrap { display: flex; flex-direction: column; gap: 0.6rem; }
.cys-photo-preview {
  position: relative;
  display: inline-block;
  max-width: 220px;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 4px 14px rgba(45,72,96,0.08);
}
.cys-photo-preview.hidden { display: none; }
.cys-photo-preview img { display: block; width: 100%; height: auto; max-height: 220px; object-fit: cover; }
.cys-photo-remove {
  position: absolute;
  top: 6px;
  right: 6px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(45,72,96,0.85);
  color: white;
  border: none;
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.cys-photo-remove:hover { background: var(--coral); }

/* Compose modal pills + label */
.compose-modal-box { max-width: 580px; }
.compose-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.compose-pill {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 500;
  background: transparent;
  border: 1px solid rgba(45,72,96,0.18);
  color: var(--navy);
  padding: 0.5rem 1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.compose-pill:hover {
  background: rgba(45,72,96,0.04);
  border-color: rgba(45,72,96,0.3);
}
.compose-pill-active {
  background: var(--navy);
  color: white;
  border-color: var(--navy);
}
.compose-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--navy);
  margin-bottom: 0.5rem;
}

/* Chic modal-close button: round, bare, hover-to-tint */
.modal-close {
  position: sticky;
  top: 0.5rem;
  float: right;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  border: 1px solid rgba(45,72,96,0.12);
  cursor: pointer;
  color: var(--navy, #2D4860);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  z-index: 5;
  box-shadow: 0 2px 10px rgba(20, 32, 44, 0.12);
  transition: background 0.15s ease, color 0.15s ease, transform 0.1s ease;
  margin-left: 0.5rem;
}
.modal-close:hover {
  background: var(--navy, #2D4860);
  color: #fff;
  border-color: var(--navy, #2D4860);
  transform: scale(1.06);
}
.gbb-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: white;
  text-decoration: none;
  padding: 0 1rem;
  height: 100%;
  display: flex;
  align-items: center;
  transition: background 0.12s;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.gbb-link:hover { background: rgba(0,0,0,0.1); }
.gbb-danger { color: rgba(255,255,255,0.6); }
.gbb-admin { font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; }
.gbb-profile-switcher {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  border-left: 1px solid rgba(255,255,255,0.25);
  padding-left: 1rem;
  margin-left: 0.5rem;
}
.gbb-switcher-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  border-radius: 20px;
  padding: 0.2rem 0.65rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: background 0.12s, color 0.12s;
  white-space: nowrap;
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gbb-switcher-btn:hover { background: rgba(255,255,255,0.25); color: white; }
.gbb-switcher-btn.active { background: white; color: var(--green); }

/* Journal */
.digest-journal-section {
  max-width: 640px;
  margin: 2.5rem auto 3rem;
  padding: 1.75rem 2rem;
  background: white;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 20px;
}
.digest-journal-callback {
  font-size: 0.875rem;
  color: var(--text-light);
  line-height: 1.55;
  margin-bottom: 1.25rem;
  padding-bottom: 1.25rem;
  border-bottom: 1px solid rgba(45,72,96,0.08);
}
.digest-journal-callback-label {
  font-weight: 600;
  color: var(--navy);
  margin-right: 0.35rem;
}
.digest-journal-callback-date {
  margin-left: 0.5rem;
  font-size: 0.78rem;
  color: rgba(45,72,96,0.4);
}
.digest-journal-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.digest-journal-prompt {
  font-size: 0.875rem;
  color: var(--text-light);
  margin-bottom: 0.85rem;
}
.digest-journal-input-wrap {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
}
.digest-journal-record {
  flex-shrink: 0;
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: 1.5px solid rgba(45,72,96,0.15);
  background: white;
  font-size: 1rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  margin-top: 2px;
}
.digest-journal-record:hover { border-color: var(--green); background: rgba(141,184,138,0.08); }
.digest-journal-record.recording { background: rgba(211,95,83,0.1); border-color: var(--coral); }
.digest-journal-recording-status {
  font-size: 0.75rem;
  color: var(--coral);
  font-weight: 600;
  animation: pulse 1s infinite;
}
.digest-journal-input {
  flex: 1;
  width: 100%;
  border: 1px solid rgba(45,72,96,0.15);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.95rem;
  font-family: 'Lora', Georgia, serif;
  color: var(--navy);
  resize: none;
  outline: none;
  line-height: 1.6;
  box-sizing: border-box;
}
.digest-journal-input:focus { border-color: var(--green); }
.digest-journal-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 0.65rem;
}
.digest-journal-save {
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
}
.digest-journal-save:hover { background: var(--coral); }
.digest-journal-save:disabled { opacity: 0.6; cursor: default; }
.digest-journal-saved {
  font-size: 0.82rem;
  color: var(--green);
  font-weight: 600;
}

/* Badge strip */
.dash-badge-section {
  background: white;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 16px;
  padding: 1rem 1.25rem 1.1rem;
  margin: 1rem 0;
}
.dash-badge-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.4);
  margin-bottom: 0.65rem;
}
.dash-badge-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
}
.badge-streak {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--coral);
  font-family: 'Montserrat', sans-serif;
  background: rgba(232,83,63,0.08);
  padding: 0.4rem 0.85rem;
  border-radius: 50px;
  letter-spacing: 0.02em;
}
.badge-chip {
  font-size: 0.8rem;
  font-weight: 600;
  padding: 0.4rem 0.85rem;
  border-radius: 50px;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.01em;
  cursor: default;
}
.badge-earned {
  background: rgba(141,184,138,0.15);
  color: #3a7a4a;
  border: 1px solid rgba(141,184,138,0.4);
}
.badge-next {
  background: rgba(45,72,96,0.04);
  color: rgba(45,72,96,0.35);
  border: 1px dashed rgba(45,72,96,0.15);
  font-style: italic;
}

/* Email invite form */
.email-invite-form {
  margin-top: 1.25rem;
  border-top: 1px solid #e8e3dc;
  padding-top: 1.25rem;
}
.eif-inner {
  background: #f9f7f4;
  border-radius: 12px;
  padding: 1.25rem 1.25rem 1rem;
}
.eif-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 0.875rem;
}
.eif-fields {
  display: flex;
  flex-direction: column;
  gap: 0.625rem;
  margin-bottom: 0.875rem;
}
.eif-input {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border: 1.5px solid #ddd;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: var(--font-main);
  color: var(--navy);
  background: #fff;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.eif-input:focus { outline: none; border-color: var(--coral); }
.eif-actions {
  display: flex;
  gap: 0.625rem;
}
.eif-actions .btn-primary {
  flex: 1;
}
.eif-actions .btn-ghost {
  color: #888;
  font-size: 0.85rem;
  padding: 0.5rem 0.75rem;
  background: none;
  border: none;
  cursor: pointer;
}
.eif-actions .btn-ghost:hover { color: var(--navy); }
.eif-status {
  font-size: 0.8rem;
  margin-top: 0.625rem;
  padding: 0.5rem 0.75rem;
  border-radius: 6px;
}
.eif-success { background: #edf7ec; color: #2e7d32; }
.eif-error   { background: #fdecea; color: #c62828; }

/* ── Pin Pad ──────────────────────────────────────────────── */
.pin-pad {
  background: #fffdf8;
  border: 1px solid #ede8df;
  border-radius: 14px;
  padding: 1rem 1.25rem 0.85rem;
  margin-bottom: 2rem;
}
.pin-pad-header {
  display: flex;
  align-items: center;
  margin-bottom: 0.6rem;
}
.pin-pad-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.pin-pad-items {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-height: 0;
  margin-bottom: 0.75rem;
}
.pin-pad-items:empty { margin-bottom: 0; }
.pin-item {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: white;
  border: 1px solid #e8e3d8;
  border-radius: 20px;
  padding: 0.35rem 0.75rem 0.35rem 0.9rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  color: var(--navy);
  line-height: 1.3;
  max-width: 100%;
}
.pin-item-text { flex: 1; }
.pin-item-remove {
  background: none;
  border: none;
  color: #c0b8aa;
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
  transition: color 0.12s;
}
.pin-item-remove:hover { color: var(--navy); }
.pin-pad-input-row { display: flex; }
.pin-pad-input {
  width: 100%;
  border: none;
  border-top: 1px solid #ede8df;
  padding: 0.65rem 0;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  color: var(--navy);
  background: transparent;
  outline: none;
}
.pin-pad-input::placeholder { color: #c8c0b0; font-style: italic; }

/* ── Screen body sections (legacy) ───────────────────────── */
.digest-screen-body-section {
  margin-bottom: 1.5rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border);
}

/* ── Story Spark ─────────────────────────────────────────────── */
.story-spark-card {
  background: var(--navy);
  border-radius: 16px;
  padding: 1.75rem 2rem;
  margin-bottom: 2rem;
  transition: opacity 0.2s ease;
  position: relative;
  overflow: hidden;
}
.story-spark-card::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 180px; height: 180px;
  border-radius: 50%;
  background: rgba(255,255,255,0.04);
  pointer-events: none;
}
.spark-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
  margin-bottom: 1rem;
}
.spark-prompt {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 600;
  color: white;
  line-height: 1.45;
  margin-bottom: 1.5rem;
}
.spark-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  flex-wrap: wrap;
}
.spark-write-btn {
  background: white;
  color: var(--navy);
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.25rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.spark-write-btn:hover { background: var(--green); color: white; transform: translateY(-1px); }
.spark-next-btn {
  background: none;
  border: none;
  color: rgba(255,255,255,0.55);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  padding: 0;
  transition: color 0.15s;
}
.spark-next-btn:hover { color: white; }

/* Follow-up spark variant */
.story-spark-card.followup {
  background: linear-gradient(135deg, #1a2744 0%, #162038 100%);
  border-left: 3px solid rgba(255,255,255,0.15);
}
.story-spark-card.followup .spark-eyebrow {
  color: rgba(255,255,255,0.6);
}
.spark-source {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: rgba(255,255,255,0.38);
  font-style: italic;
  margin-top: -0.85rem;
  margin-bottom: 1.25rem;
  letter-spacing: 0.01em;
}

.spark-saved-msg {
  position: absolute;
  bottom: 1.25rem; right: 1.5rem;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green);
  background: white;
  padding: 0.25rem 0.65rem;
  border-radius: 20px;
  animation: fadeIn 0.2s ease;
}

/* Spark capture modal */
.spark-capture-box { max-width: 520px; }
.spark-capture-prompt {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.45;
  margin-bottom: 1.25rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid var(--border);
}
#spark-capture-text {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-family: 'Georgia', serif;
  font-size: 0.95rem;
  line-height: 1.65;
  resize: vertical;
  color: var(--text);
  box-sizing: border-box;
}
#spark-capture-text:focus { outline: none; border-color: var(--green); }
.spark-capture-meta { margin: 0.6rem 0 0.25rem; min-height: 1.2rem; }
.spark-capture-km {
  font-size: 0.75rem;
  font-weight: 700;
  color: var(--green);
  letter-spacing: 0.04em;
}

/* ===== Media Archive ===== */

.media-archive-wrap {
  max-width: 1100px;
  margin: 0 auto;
  padding: 2.5rem 2rem 4rem;
}

.media-archive-header {
  margin-bottom: 2rem;
}

.media-archive-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.3rem;
}

.media-archive-sub {
  font-size: 0.88rem;
  color: var(--text-light);
  margin-bottom: 1.4rem;
}

/* Search bar */
.media-search-bar-wrap {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  max-width: 640px;
  margin: 0 auto;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 40px;
  padding: 0.45rem 0.55rem 0.45rem 1.2rem;
  box-shadow: 0 2px 10px rgba(45,72,96,0.07);
  transition: border-color 0.2s, box-shadow 0.2s;
}
.media-search-bar-wrap:focus-within {
  border-color: var(--green);
  box-shadow: 0 2px 16px rgba(141,184,138,0.18);
}

.media-search-input {
  flex: 1;
  border: none;
  outline: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.86rem;
  color: var(--text);
  background: transparent;
}
.media-search-input::placeholder { color: var(--text-light); }

.media-search-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #fff;
  background: var(--green);
  border: none;
  border-radius: 30px;
  padding: 0.4rem 1rem;
  cursor: pointer;
  transition: background 0.15s;
  flex-shrink: 0;
}
.media-search-btn:hover { background: #7aaa77; }

.media-search-clear {
  background: none;
  border: none;
  font-size: 0.9rem;
  color: var(--text-light);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  flex-shrink: 0;
}
.media-search-clear:hover { color: var(--text); }

.media-search-status {
  text-align: center;
  font-size: 0.8rem;
  color: var(--text-light);
  margin-bottom: 1rem;
  min-height: 1.2em;
}

.media-loading {
  text-align: center;
  color: var(--text-light);
  font-size: 0.88rem;
  padding: 3rem 0;
}

/* Masonry-style grid */
.media-grid {
  columns: 3 240px;
  column-gap: 10px;
}

@media (max-width: 640px) {
  .media-grid { columns: 2 140px; }
}

.media-tile {
  break-inside: avoid;
  margin-bottom: 10px;
  border-radius: 10px;
  overflow: hidden;
  background-color: var(--border);
  background-size: cover;
  background-position: center;
  aspect-ratio: 4/3;
  position: relative;
  cursor: pointer;
  transition: transform 0.2s, box-shadow 0.2s;
}
.media-tile:hover {
  transform: scale(1.015);
  box-shadow: 0 6px 24px rgba(45,72,96,0.18);
}

.media-tile-overlay {
  position: absolute;
  inset: auto 0 0;
  background: linear-gradient(transparent, rgba(20,35,50,0.72));
  padding: 1.5rem 0.75rem 0.6rem;
  opacity: 0;
  transition: opacity 0.2s;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.media-tile:hover .media-tile-overlay { opacity: 1; }

.media-tile-date {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: rgba(255,255,255,0.7);
  text-transform: uppercase;
}

.media-tile-title {
  font-size: 0.78rem;
  color: #fff;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Video tile */
.media-tile-video {
  background: #1a2535;
  aspect-ratio: 16/9;
}
.media-tile-video-el {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  opacity: 0.7;
}
.media-tile-play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.8rem;
  color: rgba(255,255,255,0.85);
  pointer-events: none;
}

.media-empty {
  text-align: center;
  color: var(--text-light);
  font-size: 0.88rem;
  padding: 3rem 0;
}

/* Lightbox */
.media-lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 18, 28, 0.92);
  z-index: 8000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  cursor: pointer;
}
.media-lightbox.hidden { display: none; }

.media-lightbox-inner {
  position: relative;
  max-width: 900px;
  width: 100%;
  background: #fff;
  border-radius: 14px;
  overflow: hidden;
  cursor: default;
  box-shadow: 0 20px 80px rgba(0,0,0,0.5);
}

.media-lightbox-close {
  position: absolute;
  top: 0.8rem;
  right: 0.8rem;
  z-index: 10;
  background: rgba(0,0,0,0.35);
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 30px;
  height: 30px;
  font-size: 0.85rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.media-lightbox-close:hover { background: rgba(0,0,0,0.6); }

.media-lightbox-media { background: #0d1a27; }
.lb-img {
  display: block;
  width: 100%;
  max-height: 65vh;
  object-fit: contain;
}
.lb-video {
  display: block;
  width: 100%;
  max-height: 65vh;
  background: #000;
}

.media-lightbox-info {
  padding: 0.9rem 1.2rem 1.1rem;
  border-top: 1px solid var(--border);
}
.media-lightbox-desc {
  font-size: 0.84rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 0.4rem;
  font-style: italic;
}
.media-lightbox-story {
  font-size: 0.78rem;
  color: var(--text-light);
}
.media-lightbox-story .lb-story-label {
  font-weight: 700;
  color: var(--navy);
  margin-right: 0.3em;
}
.media-lightbox-story a { color: var(--green); font-weight: 600; }

/* Archive nav link */
.nav-media-link {
  color: rgba(255,255,255,0.9) !important;
  font-size: 0.88rem;
  font-weight: 600;
}

/* ===== Dashboard Polaroid Stack ===== */

.dash-photo-entry {
  display: flex;
  align-items: center;
  gap: 1.8rem;
  padding: 1.4rem 2rem;
  margin: 0.5rem 0 1rem;
}

.dash-photo-strip-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
}

.dash-photo-add-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font-size: 1.1rem;
}
.dash-photo-add-btn::before {
  content: attr(data-icon);
}
.dash-photo-add-icon {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 1.2rem;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.dash-photo-add-btn:hover .dash-photo-add-icon {
  background: var(--green);
  transform: scale(1.07);
}
.dash-photo-add-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
}

.dash-polaroid-stack {
  position: relative;
  width: 190px;
  height: 115px;
  cursor: pointer;
  flex-shrink: 0;
}
.dash-polaroid-empty {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.5rem 0;
  line-height: 1.4;
  max-width: 160px;
}

.dash-polaroid {
  position: absolute;
  width: 90px;
  height: 90px;
  background: #fff;
  border-radius: 2px;
  box-shadow: 0 2px 10px rgba(45,72,96,0.18);
  padding: 5px 5px 20px;
  transform: translate(var(--tx, 0px), var(--ty, 0px)) rotate(var(--rot, 0deg));
  transform-origin: center center;
  transition: transform 0.25s ease, box-shadow 0.25s;
  top: 8px;
  left: 8px;
}
.dash-polaroid-stack:hover .dash-polaroid:last-child {
  transform: translate(var(--tx, 0px), calc(var(--ty, 0px) - 7px)) rotate(var(--rot, 0deg));
  box-shadow: 0 8px 22px rgba(45,72,96,0.24);
}

.dash-polaroid-photo {
  width: 100%;
  height: 68px;
  background-size: cover;
  background-position: center;
  background-color: var(--border);
  border-radius: 1px;
}

.dash-polaroid-caption {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-light);
  text-align: center;
  margin-top: 5px;
  text-transform: uppercase;
}

.dash-archive-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

.dash-archive-btn-letter {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.dash-archive-btn:hover .dash-archive-btn-letter {
  background: var(--green);
  transform: scale(1.07);
}

.dash-archive-btn-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-light);
}

/* ===== Demo Org Switcher ===== */
.demo-switcher {
  position: fixed;
  bottom: 1.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 8500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: var(--navy);
  border-radius: 40px;
  padding: 0.4rem 0.5rem 0.4rem 1rem;
  box-shadow: 0 4px 24px rgba(45,72,96,0.35);
}
.demo-switcher.hidden { display: none; }

.demo-switcher-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  padding-right: 0.5rem;
}

.demo-switcher-btn {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  background: rgba(255,255,255,0.08);
  border: 1.5px solid rgba(255,255,255,0.12);
  border-radius: 30px;
  padding: 0.35rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  gap: 0;
}
.demo-switcher-btn:hover {
  background: rgba(255,255,255,0.15);
}
.demo-switcher-btn.active {
  background: var(--green);
  border-color: var(--green);
}

.demo-switcher-type {
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  line-height: 1;
}
.demo-switcher-btn.active .demo-switcher-type {
  color: rgba(255,255,255,0.75);
}

.demo-switcher-name {
  font-size: 0.8rem;
  font-weight: 600;
  color: #fff;
  line-height: 1.4;
}

/* ===== Trial Banner ===== */
.trial-banner {
  margin: 0 2rem 1rem;
  padding: 0.6rem 1.1rem;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 500;
  text-align: center;
}
.trial-banner a { font-weight: 700; margin-left: 0.3em; }
.trial-banner.hidden { display: none; }

.trial-banner-info {
  background: rgba(141, 184, 138, 0.12);
  border: 1px solid rgba(141, 184, 138, 0.35);
  color: #4a7a48;
}
.trial-banner-info a { color: var(--green); }

.trial-banner-urgent {
  background: rgba(232, 168, 152, 0.15);
  border: 1px solid rgba(232, 168, 152, 0.4);
  color: #a05a4a;
}
.trial-banner-urgent a { color: var(--coral); }

.trial-banner-expired {
  background: rgba(45, 72, 96, 0.08);
  border: 1px solid rgba(45, 72, 96, 0.2);
  color: var(--navy);
}
.trial-banner-expired a { color: var(--navy); }

/* ===== Trial Nudge Card ===== */
.trial-nudge {
  margin: 0 2rem 1.5rem;
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  transition: opacity 0.3s;
}
.trial-nudge.hidden { display: none; }
.tn-inner { display: flex; flex-direction: column; gap: 0.6rem; }
.tn-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.tn-message {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  line-height: 1.45;
}
.tn-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 0.25rem;
  flex-wrap: wrap;
}
.tn-btn-primary {
  display: inline-block;
  background: var(--green);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 0.55rem 1.2rem;
  border-radius: 50px;
  text-decoration: none;
  transition: background 0.15s, transform 0.1s;
}
.tn-btn-primary:hover { background: var(--green-dark, #6a9e67); transform: translateY(-1px); }
.tn-dismiss {
  font-size: 0.75rem;
  color: inherit;
  opacity: 0.55;
  text-decoration: none;
  cursor: pointer;
}
.tn-dismiss:hover { opacity: 0.9; }

/* Nudge states */
.trial-nudge-love {
  background: linear-gradient(135deg, #f5f9f4, #fdfcf8);
  border: 1.5px solid rgba(141,184,138,0.4);
}
.trial-nudge-love .tn-eyebrow { color: var(--green); }
.trial-nudge-love .tn-message { color: var(--navy); }
.trial-nudge-love .tn-dismiss { color: var(--navy); }

.trial-nudge-warm {
  background: linear-gradient(135deg, #fdf8f5, #fdfaf8);
  border: 1.5px solid rgba(232,168,152,0.4);
}
.trial-nudge-warm .tn-eyebrow { color: var(--coral); }
.trial-nudge-warm .tn-message { color: var(--navy); }
.trial-nudge-warm .tn-dismiss { color: var(--navy); }
.trial-nudge-warm .tn-btn-primary { background: var(--coral); }
.trial-nudge-warm .tn-btn-primary:hover { background: #d4705a; }

.trial-nudge-urgent {
  background: rgba(45, 72, 96, 0.05);
  border: 1.5px solid rgba(45,72,96,0.2);
}
.trial-nudge-urgent .tn-eyebrow { color: var(--navy); }
.trial-nudge-urgent .tn-message { color: var(--navy); }
.trial-nudge-urgent .tn-dismiss { color: var(--navy); }
.trial-nudge-urgent .tn-btn-primary { background: var(--navy); }
.trial-nudge-urgent .tn-btn-primary:hover { background: #1e3350; }

.trial-nudge-expired {
  background: rgba(45, 72, 96, 0.06);
  border: 1.5px solid rgba(45,72,96,0.25);
  text-align: center;
}
.trial-nudge-expired .tn-eyebrow { color: var(--navy); }
.trial-nudge-expired .tn-message { color: var(--navy); }
.trial-nudge-expired .tn-actions { justify-content: center; }
.trial-nudge-expired .tn-btn-primary { background: var(--navy); }
.trial-nudge-expired .tn-btn-primary:hover { background: #1e3350; }

/* ===== Guide Mode ===== */

@keyframes guide-pulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: 0.7; transform: scale(1.08); }
}

@keyframes guide-beacon-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220, 160, 155, 0.55); }
  60%       { box-shadow: 0 0 0 10px rgba(220, 160, 155, 0); }
}

/* Toggle button in nav */
.guide-toggle-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: var(--coral);
  background: rgba(232, 168, 152, 0.12);
  border: 1.5px solid rgba(232, 168, 152, 0.35);
  border-radius: 20px;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
  white-space: nowrap;
}
.guide-toggle-btn:hover {
  background: rgba(232, 168, 152, 0.22);
  border-color: var(--coral);
}
.guide-mode .guide-toggle-btn {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

/* Floating tip card */
.guide-tip {
  position: fixed;
  z-index: 9200;
  width: 280px;
  background: #fff;
  border-radius: 14px;
  border-left: 4px solid var(--coral);
  box-shadow: 0 8px 32px rgba(45, 72, 96, 0.18), 0 2px 8px rgba(45, 72, 96, 0.1);
  padding: 1.1rem 1.1rem 0.85rem;
  pointer-events: auto;
}
.guide-tip.hidden { display: none; }

.guide-tip-close {
  position: absolute;
  top: 0.55rem;
  right: 0.65rem;
  background: none;
  border: none;
  font-size: 0.85rem;
  color: var(--text-light);
  cursor: pointer;
  line-height: 1;
  padding: 0.15rem 0.3rem;
  border-radius: 4px;
}
.guide-tip-close:hover { background: var(--coral-soft); color: var(--text); }

.guide-tip-star {
  font-size: 1.05rem;
  color: var(--coral);
  margin-bottom: 0.4rem;
  line-height: 1;
}

.guide-tip-text {
  font-size: 0.84rem;
  line-height: 1.55;
  color: var(--text);
  margin-bottom: 0.75rem;
}

.guide-tip-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.guide-tip-progress {
  font-size: 0.7rem;
  color: var(--text-light);
  flex-shrink: 0;
}

.guide-tip-btns {
  display: flex;
  gap: 0.4rem;
  align-items: center;
}

.guide-tip-next {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  color: #fff;
  background: var(--coral);
  border: none;
  border-radius: 20px;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: background 0.15s;
}
.guide-tip-next:hover { background: #d48a80; }

.guide-tip-exit {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--text-light);
  background: none;
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 0.28rem 0.65rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.guide-tip-exit:hover { border-color: var(--coral); color: var(--coral); }

/* Directional arrow on tip card */
.guide-tip-arrow {
  position: absolute;
  width: 0;
  height: 0;
}
.guide-tip.arrow-above .guide-tip-arrow,
.guide-tip.arrow-up .guide-tip-arrow {
  top: -8px;
  left: 28px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-bottom: 8px solid #fff;
}
.guide-tip.arrow-below .guide-tip-arrow,
.guide-tip.arrow-down .guide-tip-arrow {
  bottom: -8px;
  left: 28px;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #fff;
}

/* Beacon hidden — guide toggle button in nav is sufficient indicator */
.guide-beacon { display: none !important; }

/* Org context badge removed — org name is in the nav identity band */
.org-context-badge { display: none !important; }

/* Companion mode button removed — guide is in nav now */
.companion-btn { display: none !important; }

/* Pink glow ring on targeted element */
.guide-highlighted {
  outline: 2px solid rgba(220, 160, 155, 0.7) !important;
  outline-offset: 3px;
  box-shadow: 0 0 0 5px rgba(220, 160, 155, 0.18) !important;
  border-radius: 6px;
  transition: outline 0.2s, box-shadow 0.2s;
  position: relative;
  z-index: 100;
}

/* ===== Demo Tour Teleprompter ===== */
.demo-tour-overlay {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 9999;
  background: rgba(18, 22, 30, 0.93);
  backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255,255,255,0.1);
  font-family: var(--font);
  user-select: none;
}

.demo-tour-overlay.hidden { display: none; }

.dto-progress-bar {
  height: 3px;
  background: rgba(255,255,255,0.12);
  width: 100%;
}

.dto-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--green), #a8d4a5);
  width: 0%;
  transition: width 0.4s linear;
}

.dto-body {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 0.85rem 1.5rem;
}

.dto-line {
  flex: 1;
  font-size: 1.05rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.5;
  letter-spacing: 0.01em;
}

.dto-controls {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}

.dto-counter {
  font-size: 0.75rem;
  color: rgba(255,255,255,0.4);
  font-weight: 500;
  letter-spacing: 0.05em;
}

.dto-stop {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.18);
  color: rgba(255,255,255,0.7);
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.35rem 0.75rem;
  border-radius: 20px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  font-family: var(--font);
}

.dto-stop:hover {
  background: rgba(255,255,255,0.18);
  color: #fff;
}

/* Demo tour — screen fade transitions */
body.demo-tour-active .screen.active {
  animation: tour-fade-in 0.4s ease forwards;
}
@keyframes tour-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
.tour-fade-out {
  opacity: 0 !important;
  transition: opacity 0.3s ease !important;
}

/* Demo tour — key move pulse */
@keyframes km-pulse {
  0%   { transform: scale(1);    box-shadow: 0 0 0 0 rgba(90,160,90,0); }
  40%  { transform: scale(1.06); box-shadow: 0 0 0 8px rgba(90,160,90,0.25); }
  100% { transform: scale(1);    box-shadow: 0 0 0 0 rgba(90,160,90,0); }
}
.im-km-node.tour-km-pulse {
  animation: km-pulse 0.8s ease forwards;
}

/* Demo tour — button highlight/press effect */
.tour-btn-highlight {
  box-shadow: 0 0 0 3px var(--green), 0 0 18px rgba(90, 160, 90, 0.45) !important;
  transition: box-shadow 0.25s ease, transform 0.1s ease !important;
}
.tour-btn-highlight.tour-btn-press {
  transform: scale(0.96) !important;
  box-shadow: 0 0 0 2px var(--green), 0 0 8px rgba(90, 160, 90, 0.3) !important;
}

/* ===== INSTAGRAM HOOKS PANEL ===== */
.output-card-instagram {
  border-color: rgba(225, 48, 108, 0.3);
}
.output-card-instagram:hover {
  border-color: rgba(225, 48, 108, 0.6);
  background: rgba(225, 48, 108, 0.06);
}
.output-card-instagram .output-icon {
  font-size: 1.5rem;
}

.instagram-panel {
  margin-top: 2rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  overflow: hidden;
}
.instagram-panel.hidden {
  display: none;
}
.instagram-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}
.instagram-panel-header h2 {
  font-size: 1.1rem;
  font-weight: 600;
  margin: 0;
  color: var(--text);
}
.instagram-panel-close {
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 1.1rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
  transition: color 0.2s, background 0.2s;
}
.instagram-panel-close:hover {
  color: var(--text);
  background: var(--border);
}
.instagram-panel-sub {
  padding: 0.75rem 1.5rem 0;
  font-size: 0.85rem;
  color: var(--text-muted);
  margin: 0;
}
.instagram-hooks-list {
  padding: 1rem 1.5rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.instagram-loading {
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.9rem;
  padding: 0.5rem 0;
}
.instagram-hook-card {
  background: var(--bg);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 1.1rem 1.2rem 1rem;
  transition: border-color 0.2s;
}
.instagram-hook-card:hover {
  border-color: rgba(225, 48, 108, 0.4);
}
.instagram-hook-style {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(225, 48, 108, 0.7);
  margin-bottom: 0.4rem;
}
.instagram-hook-text {
  font-size: 1rem;
  font-weight: 500;
  color: var(--text);
  line-height: 1.45;
  margin-bottom: 0.85rem;
}
.instagram-hook-actions {
  display: flex;
  gap: 0.5rem;
}
.instagram-expand-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.35rem 0.85rem;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s, background 0.2s;
}
.instagram-expand-btn:hover {
  border-color: rgba(225, 48, 108, 0.5);
  color: var(--text);
  background: rgba(225, 48, 108, 0.06);
}
.instagram-hook-expansion {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
}
.instagram-hook-expansion.hidden {
  display: none;
}
.instagram-expansion-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.6rem;
}
.instagram-expansion-content {
  font-size: 0.9rem;
  line-height: 1.7;
  color: var(--text);
  white-space: pre-wrap;
  margin-bottom: 0.75rem;
}
.instagram-copy-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 0.3rem 0.8rem;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.instagram-copy-btn:hover {
  border-color: var(--green);
  color: var(--green);
}

/* ===== PREPARE ME ===== */
.prepare-me-bar {
  margin: 1rem 0 0.5rem;
}

.prepare-me-btn {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  width: 100%;
  background: linear-gradient(135deg, var(--navy) 0%, #1a3a5c 100%);
  border: none;
  border-radius: 12px;
  padding: 1rem 1.5rem;
  cursor: pointer;
  text-align: left;
  transition: opacity 0.2s, transform 0.15s;
}
.prepare-me-btn:hover {
  opacity: 0.92;
  transform: translateY(-1px);
}
.prepare-me-icon {
  font-size: 1.3rem;
  color: var(--green);
  flex-shrink: 0;
}
.prepare-me-label {
  font-size: 1rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.01em;
}
.prepare-me-sub {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  margin-left: auto;
  white-space: nowrap;
}

/* Prepare Me Modal */
.prepare-me-modal-content {
  max-width: 520px;
  max-height: 85vh;
  overflow-y: auto;
}
#prepare-me-modal.modal {
  align-items: flex-start;
  padding-top: 5vh;
}
.prepare-me-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.25rem;
}
.prepare-me-modal-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.prepare-me-modal-title h3 {
  margin: 0;
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
}
.prepare-me-modal-icon {
  color: var(--green);
  font-size: 1.1rem;
}
.prepare-me-modal-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.prepare-me-modal-close:hover { color: var(--text); }
.prepare-me-modal-sub {
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0.75rem 0 0.5rem;
}
.prepare-me-input-wrap {
  position: relative;
}
.prepare-me-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.85rem 3rem 0.85rem 1rem;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--bg);
  resize: vertical;
  line-height: 1.6;
  font-family: inherit;
  box-sizing: border-box;
  transition: border-color 0.2s;
}
.prepare-me-input:focus {
  outline: none;
  border-color: var(--navy);
}
.prepare-me-record-btn {
  position: absolute;
  bottom: 0.55rem;
  right: 0.55rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 32px;
  height: 32px;
  font-size: 0.95rem;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, border-color 0.15s;
  color: var(--text);
}
.prepare-me-record-btn:hover {
  background: rgba(147,184,143,0.12);
  border-color: var(--green);
}
.prepare-me-record-btn.recording {
  background: var(--coral);
  border-color: var(--coral);
  color: white;
}
.prepare-me-recording-status {
  font-size: 0.72rem;
  color: var(--coral);
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-top: 0.3rem;
  text-align: right;
}
.prepare-me-modal-actions {
  display: flex;
  gap: 0.75rem;
  margin-top: 1rem;
}

/* Briefing overlay */
.briefing-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 20, 35, 0.85);
  z-index: 500;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  overflow-y: auto;
  padding: 2rem 1rem 4rem;
}
.briefing-overlay.hidden { display: none; }

.briefing-panel {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-width: 680px;
  box-shadow: 0 24px 64px rgba(10,20,35,0.35);
  overflow: hidden;
}

.briefing-header {
  background: var(--navy);
  padding: 1.5rem 1.75rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.briefing-eyebrow {
  display: block;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.3rem;
}
.briefing-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.35;
}
.briefing-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.5);
  font-size: 1.2rem;
  cursor: pointer;
  padding: 0.25rem;
  flex-shrink: 0;
  transition: color 0.15s;
}
.briefing-close:hover { color: #fff; }

.briefing-body {
  padding: 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.briefing-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 1rem 0;
}
.briefing-loading-icon {
  color: var(--green);
  animation: emergence-pulse 2s ease-in-out infinite;
}
.briefing-error {
  color: var(--text-muted);
  font-style: italic;
}
.briefing-search-badge {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--green);
  margin-bottom: 0.4rem;
  opacity: 0.8;
}
.briefing-saved-badge {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: var(--coral);
  margin-bottom: 1.2rem;
  opacity: 0.85;
  font-style: italic;
}

.briefing-section {
  border-left: 3px solid var(--green-light);
  padding-left: 1.1rem;
}
.briefing-section-heading {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.5rem;
}
.briefing-section-body {
  font-size: 0.92rem;
  color: var(--navy);
  line-height: 1.7;
}

/* Briefing action buttons — sit on the white panel, so use navy-on-cream pills. */
.briefing-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.85rem 1.25rem 1.1rem;
  flex-wrap: wrap;
  border-top: 1px solid rgba(45,72,96,0.08);
}
.briefing-action-btn {
  background: rgba(45,72,96,0.06);
  border: 1px solid rgba(45,72,96,0.18);
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  white-space: nowrap;
}
.briefing-action-btn:hover {
  background: rgba(45,72,96,0.12);
  border-color: rgba(45,72,96,0.3);
}
.briefing-action-confirm {
  font-size: 0.78rem;
  color: var(--text-light);
  font-style: italic;
  margin-left: 0.25rem;
}
/* "Add to a project" action — the most directional of the briefing actions
   (turns a single briefing into ongoing work). Highlighted slightly with
   a green tint so it reads as the next-step affordance. */
.briefing-action-project {
  background: rgba(124,158,124,0.14);
  border-color: rgba(124,158,124,0.45);
  color: #4a7d4a;
}
.briefing-action-project:hover {
  background: rgba(124,158,124,0.22);
  border-color: rgba(124,158,124,0.65);
}
@media (max-width: 640px) {
  .briefing-actions { padding: 0.75rem 1rem 1rem; gap: 0.4rem; }
  .briefing-action-btn { font-size: 0.75rem; padding: 0.4rem 0.8rem; }
  .briefing-overlay { padding: 0.75rem 0.5rem 1.5rem; }
  .briefing-panel { border-radius: 12px; }
  .briefing-header { padding: 1.1rem 1.1rem; }
  .briefing-title { font-size: 1rem; }
  .briefing-body { padding: 1.1rem 1.1rem 0.5rem; gap: 1rem; }
  .briefing-followup-wrap { margin-top: 0.9rem; padding-top: 0.9rem; }
  .briefing-followup-thread { max-height: 220px; }
  .bf-question, .bf-answer { font-size: 0.85rem; }
}

/* Generate screen — brief nudge */
/* ===== VISION BOARD ===== */
.vision-board {
  max-width: 600px;
  margin: 1.5rem auto;
  background: rgba(141, 184, 138, 0.06);
  border: 1px dashed rgba(141, 184, 138, 0.35);
  border-radius: 16px;
  padding: 1.25rem 1.5rem 1rem;
  text-align: center;
}
.vision-board-header {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
}
.vision-board-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
}
.vision-board-hint {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-style: italic;
}
.vision-board-bubbles {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.85rem;
  min-height: 0;
}
.vision-bubble {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(141,184,138,0.3);
  border-radius: 999px;
  padding: 0.35rem 0.85rem 0.35rem 1rem;
  font-size: 0.84rem;
  color: var(--navy);
  cursor: pointer;
  opacity: 0.75;
  transition: opacity 0.2s, border-color 0.2s, background 0.2s;
  backdrop-filter: blur(4px);
}
.vision-bubble:hover {
  opacity: 1;
  border-color: rgba(141,184,138,0.6);
  background: rgba(255,255,255,0.95);
}
.vision-bubble-text {
  line-height: 1.3;
}
.vision-bubble-x {
  font-size: 1rem;
  color: var(--text-muted);
  opacity: 0;
  transition: opacity 0.15s;
  line-height: 1;
}
.vision-bubble:hover .vision-bubble-x { opacity: 1; }
.vision-board-input-row {
  margin-top: 0.25rem;
  display: flex;
  justify-content: center;
}
.vision-board-input {
  width: 100%;
  max-width: 400px;
  text-align: center;
  background: none;
  border: none;
  border-bottom: 1px solid rgba(141,184,138,0.3);
  padding: 0.4rem 0;
  font-size: 0.88rem;
  color: var(--text);
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.vision-board-input::placeholder { color: var(--text-muted); font-style: italic; }
.vision-board-input:focus { border-color: var(--green); }

/* ===== MEDIA ARCHIVE — add button + placeholder tiles ===== */
.media-archive-title-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}
.media-archive-add-btn {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
}
.media-archive-add-circle {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: rgba(141, 184, 138, 0.18);
  border: 1.5px solid rgba(141,184,138,0.45);
  color: var(--green);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, transform 0.15s;
}
.media-archive-add-icon {
  font-size: 1.1rem;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.media-archive-add-btn:hover .media-archive-add-circle {
  background: rgba(141,184,138,0.32);
  transform: scale(1.06);
}
.media-archive-add-btn:hover .media-archive-add-icon { opacity: 1; }

/* Chic circle upload button — primary action on the Photos page.
   Icon-only, navy background, lifts on hover. Functions as the
   "Send to LWH" action. */
.media-archive-upload-circle-btn {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: var(--navy, #2d4860);
  color: white;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(45, 72, 96, 0.22);
  transition: transform 0.15s, box-shadow 0.2s, background 0.2s;
  flex-shrink: 0;
}
.media-archive-upload-circle-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(45, 72, 96, 0.32);
  background: #3a5a78;
}
/* Secondary single-photo + draft-story button */
.media-archive-add-btn-secondary .media-archive-add-circle {
  width: 38px;
  height: 38px;
  font-size: 1rem;
}

.media-placeholder-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  margin-bottom: 1.5rem;
}
.media-placeholder-tile {
  aspect-ratio: 4/3;
  border-radius: 10px;
  border: 1.5px dashed rgba(45,72,96,0.12);
  background: rgba(45,72,96,0.02);
}
.media-empty-text {
  color: var(--text-muted);
  font-size: 0.85rem;
  line-height: 1.6;
}

/* ===== GENERATE BRIEF NUDGE ===== */
.generate-brief-nudge {
  text-align: center;
  margin-top: 2rem;
  font-size: 0.82rem;
  color: var(--text-muted);
}
.generate-brief-nudge a {
  color: var(--navy);
  text-decoration: none;
  font-weight: 600;
}
.generate-brief-nudge a:hover { color: var(--green); }

/* ===== VISION THOUGHT EXPLORE MODAL ===== */
.vision-thought-modal-content {
  max-width: 520px;
  padding: 2rem;
  border-radius: 16px;
  max-height: 88vh;
  overflow-y: auto;
}
.vision-thought-modal-header {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  margin-bottom: 1.5rem;
}
.vision-thought-modal-icon {
  font-size: 1.4rem;
  color: var(--green);
  flex-shrink: 0;
  margin-top: 2px;
}
.vision-thought-modal-title {
  flex: 1;
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1.4;
  margin: 0;
}
.vision-thought-modal-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  margin-top: 2px;
}
.vision-thought-modal-close:hover { color: var(--text); }
.vision-thought-modal-body { display: flex; flex-direction: column; gap: 1.25rem; }
.vision-explore-section {
  background: var(--bg-card);
  border-radius: 10px;
  padding: 1rem 1.25rem;
  border-left: 3px solid var(--green);
}
.vision-explore-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.4rem;
}
.vision-explore-text {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.6;
}
.vision-explore-question {
  font-size: 1rem;
  font-style: italic;
  color: var(--navy);
  font-weight: 600;
  text-align: center;
  padding: 0.75rem 1rem;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.vision-explore-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: flex-end;
  margin-top: 0.5rem;
}
.vision-explore-loading {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  color: var(--text-muted);
  font-size: 0.95rem;
  padding: 1.5rem 0;
  justify-content: center;
}
.vision-explore-error {
  color: #c0392b;
  font-size: 0.9rem;
  text-align: center;
}
.chat-vision-offer-btn {
  display: inline-block;
  margin: 0.5rem 0 0.25rem;
  padding: 0.45rem 1rem;
  background: transparent;
  border: 1.5px solid var(--green);
  border-radius: 20px;
  color: var(--green);
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.15s;
}
.chat-vision-offer-btn:hover { background: var(--green); color: #fff; }
.digest-vision-nudge {
  background: rgba(82,160,90,0.05);
  border: 1.5px dashed var(--green);
  border-radius: 12px;
  padding: 1rem 1.25rem;
  margin-bottom: 1rem;
}
.digest-vision-nudge-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.4rem;
}
.digest-vision-nudge-text {
  font-size: 0.9rem;
  color: var(--text);
  font-style: italic;
  margin-bottom: 0.6rem;
}
.digest-vision-nudge-btn {
  font-size: 0.82rem;
  padding: 0.3rem 0.85rem;
  border-radius: 16px;
  border: 1.5px solid var(--green);
  background: transparent;
  color: var(--green);
  font-weight: 600;
  cursor: pointer;
}
.digest-vision-nudge-btn:hover { background: var(--green); color: #fff; }

/* ===== GUIDE TOGGLE — GLOBAL FIXED BOTTOM LEFT ===== */
.guide-toggle-global {
  position: fixed;
  bottom: 4.5rem;
  right: 2rem;
  z-index: 900;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1.5px solid rgba(232, 168, 152, 0.4);
  background: rgba(232, 168, 152, 0.1);
  color: var(--coral);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0.55;
  transition: opacity 0.2s, background 0.2s, border-color 0.2s;
}
.guide-toggle-global:hover {
  opacity: 1;
  background: rgba(232, 168, 152, 0.2);
  border-color: var(--coral);
}
.guide-toggle-global.active {
  background: var(--coral);
  border-color: var(--coral);
  color: #fff;
  opacity: 1;
}

/* ===== VISION BOARD — PERSONAL PAGE ENTRY ===== */
.vb-entry {
  max-width: 560px;
  margin: 1.5rem auto 0;
  text-align: center;
  padding: 1.5rem 2rem 1.25rem;
  border-radius: 16px;
  background: radial-gradient(ellipse at center, rgba(232,168,152,0.08) 0%, transparent 72%);
  box-shadow: inset 0 0 0 1px rgba(232,168,152,0.18),
              0 0 40px 10px rgba(232,168,152,0.06);
}
.vb-entry-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin-bottom: 0.6rem;
}
.vb-entry-link {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  text-decoration: none;
}
.vb-entry-link:hover { text-decoration: underline; }
.vb-entry-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-weight: 500;
}
.vb-entry-input-wrap {
  position: relative;
}
.vb-entry-input {
  width: 100%;
  background: transparent;
  border: none;
  border-bottom: 1.5px solid rgba(82,160,90,0.3);
  padding: 0.5rem 0.25rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.95rem;
  color: var(--text);
  text-align: center;
  outline: none;
  transition: border-color 0.2s;
}
.vb-entry-input:focus {
  border-bottom-color: var(--green);
}
.vb-entry-input::placeholder {
  color: var(--text-muted);
  font-style: italic;
}
.vb-entry-flash {
  margin-top: 0.75rem;
  font-size: 1rem;
  font-style: italic;
  color: var(--green);
  min-height: 1.5rem;
}
@keyframes vb-flash-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes vb-flash-out {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-8px); }
}
.vb-flash-in  { animation: vb-flash-in  0.35s ease forwards; }
.vb-flash-out { animation: vb-flash-out 0.6s  ease forwards; }

/* ===== VISION BOARD — FULL PAGE ===== */
.vision-page-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 2rem 1.5rem 4rem;
}
.vision-page-header {
  margin-bottom: 2.5rem;
}
.vision-page-title-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 0.4rem;
}
.vision-page-title {
  font-size: 1.8rem;
  font-weight: 800;
  color: var(--navy);
  margin: 0;
}
.vision-page-add-btn {
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green);
  background: transparent;
  border: 1.5px solid var(--green);
  border-radius: 20px;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.vision-page-add-btn:hover { background: var(--green); color: #fff; }
.vision-page-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin: 0 0 1.2rem;
}
.vision-page-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.vision-page-input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.6rem 0.9rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  color: var(--text);
  background: var(--bg-card);
  outline: none;
  transition: border-color 0.2s;
}
.vision-page-input:focus { border-color: var(--green); }
.vision-page-input::placeholder { color: var(--text-muted); font-style: italic; }
.vision-page-loading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  justify-content: center;
  padding: 3rem 0;
  color: var(--text-muted);
  font-size: 0.95rem;
}
.vision-load-icon {
  color: var(--green);
  animation: spin 2s linear infinite;
}
@keyframes spin {
  0%   { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}
.vision-page-empty {
  text-align: center;
  padding: 3rem 0;
  color: var(--text-muted);
}
.vision-page-empty p { margin: 0 0 0.5rem; font-size: 1rem; }
.vision-page-empty-sub { font-size: 0.85rem; font-style: italic; }
.vision-page-body { display: flex; flex-direction: column; gap: 2rem; }

/* Category block */
.vp-category {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.vp-cat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.85rem 1.25rem;
  background: rgba(45,72,96,0.04);
  border-bottom: 1px solid var(--border);
}
.vp-cat-name {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
.vp-cat-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(45,72,96,0.08);
  border-radius: 10px;
  padding: 0.1rem 0.5rem;
  font-weight: 600;
}
.vp-thoughts {
  padding: 0.5rem 0;
}
.vp-thought {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.65rem 1.25rem;
  transition: background 0.15s;
}
.vp-thought:hover { background: rgba(82,160,90,0.04); }
.vp-thought-text {
  font-size: 0.92rem;
  color: var(--text);
  flex: 1;
  line-height: 1.5;
}
.vp-thought-actions {
  display: flex;
  gap: 0.4rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.vp-thought:hover .vp-thought-actions { opacity: 1; }
@media (hover: none) { .vp-thought-actions { opacity: 1; } }
.vp-thought-explore {
  background: none;
  border: 1px solid var(--green);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 0.7rem;
  color: var(--green);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.vp-thought-explore:hover { background: var(--green); color: #fff; }
.vp-thought-remove {
  background: none;
  border: 1px solid rgba(200,100,100,0.3);
  border-radius: 50%;
  width: 26px;
  height: 26px;
  font-size: 0.85rem;
  color: rgba(200,100,100,0.6);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.vp-thought-remove:hover { background: rgba(200,100,100,0.1); color: #c0392b; border-color: #c0392b; }

/* Suggestions block */
.vp-suggestions {
  border-top: 1px dashed rgba(82,160,90,0.3);
  padding: 0.85rem 1.25rem;
  background: rgba(82,160,90,0.03);
}
.vp-suggestions-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.6rem;
}
.vp-suggestion {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.55;
  padding: 0.3rem 0;
  padding-left: 0.85rem;
  border-left: 2px solid rgba(82,160,90,0.3);
  margin-bottom: 0.4rem;
}
.vp-suggestion:last-child { margin-bottom: 0; }

/* ===== VISION BOARD — RESEARCH SECTION ===== */
.vp-research {
  border: 1.5px solid var(--border);
  border-radius: 14px;
  overflow: hidden;
}
.vp-research-header {
  display: flex;
  align-items: baseline;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  background: rgba(45,72,96,0.04);
  border-bottom: 1px solid var(--border);
  flex-wrap: wrap;
}
.vp-research-label {
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--navy);
}
.vp-research-sub {
  font-size: 0.78rem;
  color: var(--text-muted);
}
.vp-research-card {
  display: block;
  padding: 0.85rem 1.25rem;
  text-decoration: none;
  border-bottom: 1px solid var(--border);
  transition: background 0.15s;
}
.vp-research-card:last-child { border-bottom: none; }
.vp-research-card:hover { background: rgba(45,72,96,0.03); }
.vp-research-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.4;
  margin-bottom: 0.3rem;
}
.vp-research-snippet {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* ===== PERSONAL PAGE — PHOTO CIRCLES STRIP ===== */
.photo-circles-strip {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.65rem;
  padding: 1.5rem 0 0.5rem;
}
.photo-circles-row {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.photo-circle {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  flex-shrink: 0;
  cursor: pointer;
  transition: transform 0.18s, box-shadow 0.18s;
}
.photo-circle-filled {
  background-size: cover;
  background-position: center 25%;
  box-shadow: 0 2px 10px rgba(0,0,0,0.12);
}
.photo-circle-filled:hover {
  transform: scale(1.07);
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
}
.photo-circle-empty {
  background: rgba(45,72,96,0.04);
  border: 2px dashed rgba(45,72,96,0.45);
  transition: border-color 0.18s, background 0.18s;
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(45,72,96,0.45);
  /* Camera icon as background — signals "media will appear here" */
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d4860' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round' opacity='0.45'><path d='M23 19a2 2 0 0 1-2 2H3a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4l2-3h6l2 3h4a2 2 0 0 1 2 2z'/><circle cx='12' cy='13' r='4'/></svg>");
  background-repeat: no-repeat;
  background-position: center;
  background-size: 26px 26px;
}
.photo-circle-empty:hover {
  border-color: var(--coral);
  background-color: rgba(232,168,152,0.1);
}
.photo-circle-add {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1.5px solid rgba(45,72,96,0.18);
  background: transparent;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.18s, color 0.18s, background 0.18s;
  margin-left: 0.25rem;
}
.photo-circle-add:hover {
  border-color: var(--coral);
  color: var(--coral);
  background: rgba(232,168,152,0.06);
}
.photo-circles-archive-link {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-decoration: none;
  text-transform: uppercase;
}
.photo-circles-archive-link:hover { color: var(--navy); }

.photo-circles-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

/* ===== MEDIA ARCHIVE — PHOTO TIMELINE WAVE ===== */
.media-arc-wrap {
  position: relative;
  padding: 1.5rem 2rem 0.5rem;
  margin-bottom: 0.5rem;
  border-bottom: 1px solid var(--border);
}
.media-arc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}
.media-arc-title {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.media-arc-wave {
  stroke: var(--coral) !important;
  opacity: 0.3 !important;
}
.media-arc-dot {
  position: absolute;
  top: 50%;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--coral);
  border: 2.5px solid rgba(255,255,255,0.9);
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  cursor: pointer;
  opacity: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  animation: km-dot-land 0.55s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
  z-index: 2;
  transform: translate(-50%, -50%);
}
.media-arc-dot:hover {
  transform: translate(-50%, -50%) scale(1.5) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.2);
  transition: transform 0.15s, box-shadow 0.15s;
}
.media-arc-dot-video {
  background: var(--navy);
}
.media-arc-card {
  position: absolute;
  bottom: 52px;
  background: var(--navy);
  color: white;
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  min-width: 140px;
  max-width: 220px;
  pointer-events: none;
  z-index: 10;
  box-shadow: 0 4px 16px rgba(0,0,0,0.18);
  transform: translateX(-50%);
}
.mac-date {
  font-size: 0.65rem;
  opacity: 0.65;
  margin-bottom: 0.2rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.mac-title {
  font-size: 0.8rem;
  font-weight: 600;
  line-height: 1.35;
}

/* ===== MEDIA ARCHIVE — TABS ===== */
.media-tabs {
  display: flex;
  gap: 0.25rem;
  padding: 0 2rem 0;
  border-bottom: 1.5px solid var(--border);
  margin-bottom: 1.5rem;
}
.media-tab {
  background: none;
  border: none;
  border-bottom: 2.5px solid transparent;
  padding: 0.6rem 1.1rem;
  margin-bottom: -1.5px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: color 0.15s, border-color 0.15s;
}
.media-tab:hover { color: var(--navy); }
.media-tab.active {
  color: var(--navy);
  border-bottom-color: var(--navy);
}
.media-tab-badge {
  background: var(--coral);
  color: white;
  font-size: 0.6rem;
  font-weight: 800;
  border-radius: 10px;
  padding: 0.1rem 0.4rem;
  min-width: 16px;
  text-align: center;
}

/* ===== MEDIA LIGHTBOX — TRANSCRIPT PANEL ===== */
.media-lightbox-transcript {
  margin-top: 0.75rem;
  background: rgba(45,72,96,0.05);
  border-radius: 8px;
  padding: 0.85rem 1rem;
  border-left: 3px solid var(--navy);
}
.mlt-label {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--navy);
  margin-bottom: 0.4rem;
  opacity: 0.6;
}
.mlt-summary {
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.4rem;
  line-height: 1.4;
}
.mlt-text {
  font-size: 0.8rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-height: 100px;
  overflow-y: auto;
  margin-bottom: 0.4rem;
}
.mlt-km {
  font-size: 0.72rem;
  color: var(--green);
  font-weight: 600;
}
.media-lightbox-transcribe-btn {
  margin-top: 0.75rem;
  width: 100%;
  padding: 0.55rem;
  background: transparent;
  border: 1.5px solid var(--navy);
  border-radius: 8px;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.media-lightbox-transcribe-btn:hover {
  background: var(--navy);
  color: white;
}
.media-lightbox-transcribe-btn:disabled {
  opacity: 0.5;
  cursor: default;
}
/* Photo action toolbar — Write a story + Delete */
.media-lightbox-actions {
  margin-top: 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.media-lightbox-action {
  width: 100%;
  padding: 0.6rem 0.8rem;
  border-radius: 999px;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.15s ease, transform 0.05s ease;
}
.media-lightbox-action:hover { opacity: 0.92; }
.media-lightbox-action:active { transform: translateY(1px); }
.media-lightbox-action-primary {
  background: var(--navy, #2d4860);
  color: #ffffff;
}
.media-lightbox-action-danger {
  background: transparent;
  color: rgba(45, 72, 96, 0.7);
  border: 1px solid rgba(45, 72, 96, 0.18);
  font-weight: 600;
  font-size: 0.72rem;
}
.media-lightbox-action-danger:hover {
  color: #b04848;
  border-color: rgba(176, 72, 72, 0.4);
}
.media-lightbox-action-secondary {
  background: transparent;
  color: var(--navy, #2d4860);
  border: 1.5px solid var(--navy, #2d4860);
}
.media-lightbox-action-secondary:hover {
  background: var(--navy, #2d4860);
  color: #ffffff;
  opacity: 1;
}

/* Apply-photo-to-other-orgs modal */
.share-photo-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45, 72, 96, 0.55);
  z-index: 10001;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.share-photo-overlay.hidden { display: none; }
.share-photo-modal {
  background: #ffffff;
  border-radius: 14px;
  padding: 1.5rem 1.4rem 1.25rem;
  max-width: 420px;
  width: 100%;
  max-height: 85vh;
  overflow-y: auto;
  box-shadow: 0 12px 36px rgba(45, 72, 96, 0.3);
}
.share-photo-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.1rem;
}
.share-photo-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  line-height: 1.25;
}
.share-photo-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: rgba(45, 72, 96, 0.55);
  cursor: pointer;
  padding: 0.1rem 0.4rem;
  line-height: 1;
}
.share-photo-close:hover { color: var(--navy, #2d4860); }
.share-photo-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-bottom: 1.1rem;
}
.share-photo-org-row {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.55rem 0.75rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background 0.12s;
}
.share-photo-org-row:hover {
  background: rgba(45, 72, 96, 0.04);
}
.share-photo-org-cb {
  width: 1rem;
  height: 1rem;
  accent-color: var(--navy, #2d4860);
}
.share-photo-org-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  color: var(--navy, #2d4860);
}
.share-photo-org-tag {
  font-size: 0.65rem;
  background: rgba(141, 184, 138, 0.18);
  color: #4a7548;
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  font-weight: 600;
  margin-left: 0.3rem;
}
.share-photo-empty {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: rgba(45, 72, 96, 0.65);
  text-align: center;
  padding: 1.2rem 0;
  font-style: italic;
}
.share-photo-remove-toggle {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  color: rgba(45, 72, 96, 0.8);
  cursor: pointer;
  padding: 0.55rem 0;
  border-top: 1px solid rgba(45, 72, 96, 0.08);
  margin-bottom: 0.85rem;
}
.share-photo-remove-toggle input {
  accent-color: var(--navy, #2d4860);
}
.share-photo-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
}
.share-photo-cancel {
  background: transparent;
  border: 1px solid rgba(45, 72, 96, 0.2);
  color: rgba(45, 72, 96, 0.75);
  padding: 0.5rem 1.1rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
}
.share-photo-cancel:hover {
  color: var(--navy, #2d4860);
  border-color: var(--navy, #2d4860);
}
.share-photo-submit {
  background: var(--navy, #2d4860);
  color: #ffffff;
  border: none;
  padding: 0.55rem 1.3rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
}
.share-photo-submit:hover { opacity: 0.92; }
.share-photo-submit:disabled { opacity: 0.55; cursor: default; }
/* Transcript badge on video tile */
.media-tile-transcript-badge {
  position: absolute;
  top: 0.4rem;
  left: 0.4rem;
  background: var(--green);
  color: white;
  border-radius: 50%;
  width: 20px;
  height: 20px;
  font-size: 0.6rem;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 1px 4px rgba(0,0,0,0.2);
}

/* ===== Photo Context Modal ===== */
.photo-context-modal-content {
  position: relative;
  background: white;
  border-radius: 20px;
  max-width: 480px;
  width: 92%;
  overflow: hidden;
  box-shadow: 0 24px 60px rgba(45,72,96,0.18);
  display: flex;
  flex-direction: column;
  padding: 0; /* override .modal-content default */
}
.photo-context-close {
  position: absolute;
  top: 0.75rem;
  right: 0.75rem;
  background: rgba(255,255,255,0.85);
  border: none;
  border-radius: 50%;
  width: 28px;
  height: 28px;
  font-size: 0.75rem;
  cursor: pointer;
  color: var(--navy);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.photo-context-close:hover { background: #f0f0f0; }
.pcm-photo-wrap {
  width: 100%;
  max-height: 240px;
  overflow: hidden;
  background: #f3ede6;
}
.pcm-photo {
  width: 100%;
  height: 240px;
  object-fit: cover;
  display: block;
}
.pcm-body {
  padding: 1.5rem 1.75rem 1.75rem;
}
.pcm-observation {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 1.1rem;
  font-style: italic;
}
.pcm-question-wrap {
  margin-bottom: 1.25rem;
}
.pcm-question {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.65rem;
  line-height: 1.4;
}
.pcm-answer {
  width: 100%;
  border: none;
  border-bottom: 1.5px solid rgba(45,72,96,0.2);
  border-radius: 0;
  padding: 0.4rem 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  color: var(--navy);
  resize: none;
  outline: none;
  background: transparent;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.pcm-answer:focus {
  border-bottom-color: var(--coral);
}
.pcm-answer::placeholder { color: rgba(45,72,96,0.35); }
.pcm-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  align-items: center;
}
.pcm-skip-btn {
  background: transparent;
  border: none;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.4rem 0;
  text-decoration: underline;
  transition: color 0.15s;
}
.pcm-skip-btn:hover { color: var(--navy); }
.pcm-build-btn {
  background: var(--coral);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.6rem 1.25rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.pcm-build-btn:hover {
  background: #d94f2c;
  transform: translateY(-1px);
}

/* ===== Story Alignment Pushback Nudge ===== */
.alignment-nudge {
  position: fixed;
  bottom: 5.5rem;
  right: 5.5rem;
  width: 340px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(45,72,96,0.18), 0 2px 8px rgba(45,72,96,0.08);
  padding: 1.4rem 1.5rem 1.25rem;
  z-index: 300;
  border-left: 3px solid var(--coral);
  animation: nudge-slide-up 0.35s cubic-bezier(0.34,1.56,0.64,1) both;
}
@media (max-width: 700px) {
  .alignment-nudge {
    bottom: 5rem;
    right: 1rem;
    left: 1rem;
    width: auto;
  }
}
.alignment-nudge.hidden {
  display: none;
}
@keyframes nudge-slide-up {
  from { opacity: 0; transform: translateY(20px); }
  to   { opacity: 1; transform: translateY(0); }
}
.alignment-nudge-close {
  position: absolute;
  top: 0.6rem;
  right: 0.7rem;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 0.75rem;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 4px;
  transition: color 0.15s;
}
.alignment-nudge-close:hover { color: var(--navy); }
.alignment-nudge-icon {
  font-size: 1.1rem;
  color: var(--coral);
  margin-bottom: 0.5rem;
}
.alignment-nudge-observation {
  font-size: 0.82rem;
  color: var(--text-muted);
  line-height: 1.5;
  margin: 0 0 0.65rem;
  font-style: italic;
}
.alignment-nudge-question {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.75rem;
  line-height: 1.4;
}
.alignment-nudge-input {
  width: 100%;
  border: none;
  border-bottom: 1.5px solid rgba(45,72,96,0.18);
  padding: 0.3rem 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  color: var(--navy);
  background: transparent;
  resize: none;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 0.85rem;
  transition: border-color 0.2s;
}
.alignment-nudge-input:focus { border-bottom-color: var(--coral); }
.alignment-nudge-input::placeholder { color: rgba(45,72,96,0.3); }
.alignment-nudge-actions {
  display: flex;
  justify-content: flex-end;
  gap: 0.6rem;
  align-items: center;
}
.alignment-nudge-skip {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  cursor: pointer;
  text-decoration: underline;
  transition: color 0.15s;
}
.alignment-nudge-skip:hover { color: var(--navy); }
.alignment-nudge-save {
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.45rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.alignment-nudge-save:hover { background: var(--coral); }

/* ===== Chat Web Search Toggle ===== */
.chat-web-toggle-row {
  padding: 0.5rem 1rem 0.25rem;
  border-top: 1px solid rgba(45,72,96,0.06);
}
.chat-web-toggle-label {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  user-select: none;
}
.chat-web-checkbox {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}
.chat-web-toggle-track {
  position: relative;
  width: 28px;
  height: 16px;
  background: rgba(45,72,96,0.15);
  border-radius: 8px;
  transition: background 0.2s;
  flex-shrink: 0;
}
.chat-web-toggle-track::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: white;
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
  transition: transform 0.2s;
}
.chat-web-checkbox:checked + .chat-web-toggle-track {
  background: var(--coral);
}
.chat-web-checkbox:checked + .chat-web-toggle-track::after {
  transform: translateX(12px);
}
.chat-web-toggle-text {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: var(--text-muted);
  transition: color 0.2s;
}
.chat-web-checkbox:checked ~ .chat-web-toggle-text {
  color: var(--coral);
  font-weight: 600;
}

/* ===== Profile Switcher (personal nav) ===== */
.profile-switcher {
  display: flex;
  flex-direction: column;
  gap: 1px;
  border-top: 1px solid rgba(45,72,96,0.07);
  padding-top: 0.3rem;
  margin-top: 0.15rem;
}
.profile-switcher-btn {
  background: transparent;
  border: none;
  border-radius: 7px;
  padding: 0.28rem 0.65rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 500;
  color: rgba(45,72,96,0.6);
  cursor: pointer;
  text-align: left;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.profile-switcher-btn:hover {
  color: var(--navy);
  background: rgba(45,72,96,0.08);
}
.profile-switcher-btn.active {
  background: white;
  color: var(--navy);
  box-shadow: 0 1px 4px rgba(45,72,96,0.12);
}

/* ===== PersonalPro pricing tier best badge ===== */
.pricing-tier-best {
  position: absolute;
  top: -1rem;
  left: 50%;
  transform: translateX(-50%);
  background: var(--coral);
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.25rem 0.85rem;
  border-radius: 20px;
  white-space: nowrap;
  box-shadow: 0 2px 8px rgba(232,90,79,0.3);
}

/* ===== Upgrade Modal ===== */
.checkout-welcome-content {
  position: relative;
  background: white;
  border-radius: 20px;
  max-width: 440px;
  width: 92%;
  padding: 2rem 2rem 1.75rem;
  text-align: left;
}
.checkout-welcome-feature {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 0.9rem;
  color: #2D4860;
}
.checkout-welcome-feature:last-child { border-bottom: none; }
.checkout-welcome-check {
  color: #8DB88A;
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}
.upgrade-modal-content {
  position: relative;
  background: white;
  border-radius: 20px;
  max-width: 420px;
  width: 92%;
  padding: 2rem 2rem 1.75rem;
  text-align: center;
}
.upgrade-modal-close {
  position: absolute;
  top: 0.75rem;
  right: 0.9rem;
  background: none;
  border: none;
  font-size: 0.85rem;
  color: var(--text-muted);
  cursor: pointer;
}
.upgrade-modal-icon {
  font-size: 1.5rem;
  color: var(--coral);
  margin-bottom: 0.75rem;
}
.upgrade-modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.upgrade-modal-body {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.upgrade-modal-cards {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
}
.upgrade-mini-card {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 12px;
  padding: 1rem 0.75rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.upgrade-mini-card:hover {
  border-color: var(--navy);
  box-shadow: 0 2px 12px rgba(45,72,96,0.1);
}
.upgrade-mini-card-featured {
  border-color: var(--coral);
  background: rgba(232,168,152,0.05);
}
.upgrade-mini-card-featured:hover {
  border-color: var(--coral);
  box-shadow: 0 2px 12px rgba(232,168,152,0.25);
}
.umc-tier {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.umc-price {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.umc-price span {
  font-size: 0.85rem;
  font-weight: 400;
}
.umc-desc {
  font-size: 0.72rem;
  color: var(--text-muted);
}
.upgrade-modal-fine {
  font-size: 0.75rem;
  color: var(--text-muted);
  margin: 0;
}
.upgrade-modal-fine a { color: var(--coral); }

/* ===== Soft Lock Bar ===== */
.soft-lock-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 800;
  background: var(--navy);
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.25rem;
  padding: 0.85rem 1.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
}
.slb-text {
  opacity: 0.85;
}
.slb-cta {
  color: var(--coral);
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  transition: opacity 0.15s;
}
.slb-cta:hover { opacity: 0.8; }
.slb-download {
  color: rgba(255,255,255,0.55);
  font-size: 0.75rem;
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color 0.15s;
}
.slb-download:hover { color: white; }
.slb-dismiss {
  background: none;
  border: none;
  color: rgba(255,255,255,0.4);
  cursor: pointer;
  font-size: 0.75rem;
  padding: 0.2rem 0.4rem;
  transition: color 0.15s;
  margin-left: auto;
}
.slb-dismiss:hover { color: white; }
@keyframes slb-shake {
  0%, 100% { transform: translateX(0); }
  20%       { transform: translateX(-6px); }
  40%       { transform: translateX(6px); }
  60%       { transform: translateX(-4px); }
  80%       { transform: translateX(4px); }
}
.slb-shake { animation: slb-shake 0.5s ease; }

/* ===== Delete Account Modal ===== */
.delete-account-modal-content {
  position: relative;
  max-width: 400px;
  width: 92%;
  text-align: center;
  padding: 2.25rem 2rem 2rem;
}
.delete-modal-close {
  position: absolute;
  top: 0.75rem; right: 0.9rem;
  background: none; border: none;
  font-size: 0.85rem; color: var(--text-muted); cursor: pointer;
}
.delete-modal-icon {
  font-size: 1.5rem;
  color: var(--coral);
  margin-bottom: 0.75rem;
}
.delete-modal-icon-warn { color: #c0392b; }
.delete-modal-title {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.65rem;
}
.delete-modal-body {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.delete-modal-download {
  display: block;
  width: 100%;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.7rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  margin-bottom: 0.65rem;
  transition: background 0.15s;
}
.delete-modal-download:hover { background: var(--coral); }
.delete-modal-next {
  background: none;
  border: none;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  cursor: pointer;
  text-decoration: underline;
  padding: 0.3rem;
  transition: color 0.15s;
}
.delete-modal-next:hover { color: var(--navy); }
.delete-confirm-input {
  width: 100%;
  border: 1.5px solid rgba(192,57,43,0.3);
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  color: var(--navy);
  outline: none;
  box-sizing: border-box;
  margin-bottom: 1rem;
  transition: border-color 0.2s;
}
.delete-confirm-input:focus { border-color: #c0392b; }
.delete-modal-actions {
  display: flex;
  gap: 0.65rem;
  justify-content: center;
  margin-bottom: 1.25rem;
}
.delete-modal-cancel {
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--text-muted);
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.delete-modal-cancel:hover { border-color: var(--navy); color: var(--navy); }
.delete-modal-confirm {
  background: #c0392b;
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  transition: opacity 0.15s;
}
.delete-modal-confirm:disabled { opacity: 0.35; cursor: default; }
.delete-modal-confirm:not(:disabled):hover { opacity: 0.85; }
.delete-modal-goodbye {
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: italic;
  margin: 0;
}
.nav-link-danger { color: rgba(192,57,43,0.45) !important; font-size: 0.78rem !important; }
.nav-link-danger:hover { color: #c0392b !important; }

/* ── My Account Screen ── */
.acct-section {
  background: white;
  border: 1.5px solid var(--border, #e8e4df);
  border-radius: 16px;
  padding: 1.5rem 1.75rem;
  margin-bottom: 1.25rem;
}
.acct-tagline-row {
  display: flex;
  gap: 0.6rem;
  align-items: center;
}
.acct-tagline-row input { flex: 1; }
.acct-tagline-save-btn {
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
}
.acct-tagline-save-btn:hover { background: var(--blue); }
.acct-danger-section { border-color: rgba(192,57,43,0.2); }
.acct-section-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral, #e8533f);
  margin-bottom: 1rem;
}
.acct-section-helper {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(45, 72, 96, 0.7);
  margin: 0.6rem 0 0;
  font-style: italic;
}

/* Lightbox folder + hashtag edit (inherits from + writes back to parent note) */
.lightbox-taxonomy-edit {
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(255, 255, 255, 0.18);
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.lightbox-taxonomy-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.lightbox-taxonomy-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.65);
  min-width: 64px;
}
.lightbox-taxonomy-row input {
  flex: 1;
  background: rgba(255, 255, 255, 0.1);
  border: 1px solid rgba(255, 255, 255, 0.22);
  color: #ffffff;
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
}
.lightbox-taxonomy-row input::placeholder { color: rgba(255, 255, 255, 0.4); }
.lightbox-taxonomy-row input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.5);
}
.lightbox-taxonomy-status {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: rgba(255, 255, 255, 0.7);
  font-style: italic;
  align-self: flex-end;
  height: 1em;
}

/* Document summary modal folder + hashtag edit */
.doc-summary-taxonomy {
  margin: 0.6rem 0 1rem;
  padding: 0.65rem 0.85rem;
  background: rgba(157, 195, 214, 0.06);
  border-radius: 8px;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.doc-taxonomy-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
}
.doc-taxonomy-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.55);
  min-width: 72px;
}
.doc-taxonomy-row input {
  flex: 1;
  background: #ffffff;
  border: 1px solid rgba(45, 72, 96, 0.15);
  color: var(--navy, #2d4860);
  padding: 0.4rem 0.7rem;
  border-radius: 6px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
}
.doc-taxonomy-row input:focus {
  outline: none;
  border-color: rgba(45, 72, 96, 0.45);
}
.doc-taxonomy-status {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: rgba(45, 72, 96, 0.55);
  font-style: italic;
  align-self: flex-end;
  height: 1em;
}

/* Photo tile taxonomy overlay — folder + hashtag chips on each photo tile */
.media-tile { position: relative; }
.media-tile-taxonomy {
  position: absolute;
  top: 0.45rem;
  left: 0.45rem;
  right: 0.45rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.25rem;
  pointer-events: none;
}
.media-tile-folder,
.media-tile-hash {
  background: rgba(45, 72, 96, 0.85);
  color: #ffffff;
  padding: 0.12rem 0.45rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.media-tile-folder {
  background: rgba(141, 184, 138, 0.92);
}

/* Article filter chips — folder + hashtag filter bar on the Articles
   view in Thinking Lab. Active chip gets a navy fill. */
.art-filter-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.85rem;
  padding: 0.85rem 1rem;
  background: rgba(157, 195, 214, 0.05);
  border: 1px dashed rgba(157, 195, 214, 0.35);
  border-radius: 10px;
  margin: 0.65rem 0 1rem;
}
.art-filter-group {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
.art-filter-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(45, 72, 96, 0.55);
  margin-right: 0.15rem;
}
.art-filter-chip {
  background: rgba(45, 72, 96, 0.05);
  border: 1px solid rgba(45, 72, 96, 0.15);
  color: var(--navy, #2d4860);
  padding: 0.32rem 0.7rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.art-filter-chip:hover {
  background: rgba(45, 72, 96, 0.12);
}
.art-filter-active {
  background: var(--navy, #2d4860);
  color: #ffffff;
  border-color: var(--navy, #2d4860);
}
.art-filter-active:hover {
  background: var(--navy, #2d4860);
  opacity: 0.92;
}
.art-filter-count {
  font-size: 0.66rem;
  font-weight: 700;
  opacity: 0.7;
}
.art-filter-active .art-filter-count {
  opacity: 0.85;
}
.art-filter-clear {
  background: transparent;
  border: none;
  color: var(--coral, #c47e6c);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0.3rem 0.6rem;
  border-radius: 6px;
  margin-left: auto;
}
.art-filter-clear:hover {
  background: rgba(196, 126, 108, 0.1);
}

/* Cross-library taxonomy (Phase 1+2): Folder + Hashtags on capture modals
   and as small chips on the article cards in Thinking Lab. */
.capture-organize-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.85rem;
  margin-top: 0.4rem;
}
@media (max-width: 600px) {
  .capture-organize-row { grid-template-columns: 1fr; }
}
.capture-organize-folder label,
.capture-organize-tags label {
  font-size: 0.82rem;
  font-weight: 600;
  color: rgba(45, 72, 96, 0.78);
  margin-bottom: 0.35rem;
  display: block;
}
.capture-organize-folder label .hint,
.capture-organize-tags label .hint {
  font-weight: 400;
  color: rgba(45, 72, 96, 0.5);
  font-style: italic;
}
.capture-organize-folder input,
.capture-organize-tags input {
  width: 100%;
  padding: 0.55rem 0.7rem;
  border: 1px solid rgba(45, 72, 96, 0.18);
  border-radius: 8px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--navy, #2d4860);
  background: #ffffff;
}
.capture-organize-folder input:focus,
.capture-organize-tags input:focus {
  outline: none;
  border-color: rgba(45, 72, 96, 0.5);
}
.capture-tag-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.5rem;
}
.capture-tag-chip {
  background: rgba(157, 195, 214, 0.12);
  border: 1px solid rgba(157, 195, 214, 0.45);
  color: var(--navy, #2d4860);
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.12s;
}
.capture-tag-chip:hover {
  background: rgba(157, 195, 214, 0.3);
}
/* On the article cards: folder + hashtag chips, small and quiet */
.tl-entry-taxonomy {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.55rem;
}
.tl-entry-folder-chip {
  background: rgba(141, 184, 138, 0.14);
  color: var(--navy, #2d4860);
  padding: 0.18rem 0.55rem;
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.tl-entry-tag-chip {
  background: rgba(45, 72, 96, 0.07);
  color: var(--navy, #2d4860);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  opacity: 0.85;
}

/* Impact Map three-state mode toggle: Your Impact Model / The Big Picture /
   The Whiteboard. Lives inside the Stories tab only. Pill-style with
   active state filled, caption updates below. */
.impact-map-mode-toggle {
  display: flex;
  background: rgba(45, 72, 96, 0.05);
  border-radius: 999px;
  padding: 4px;
  width: fit-content;
  margin: 1.25rem auto 0.5rem;
  gap: 0;
}
.im-mode-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--navy, #2d4860);
  opacity: 0.6;
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.im-mode-btn:hover { opacity: 0.85; }
.im-mode-btn.im-mode-active {
  background: var(--navy, #2d4860);
  color: #ffffff;
  opacity: 1;
  box-shadow: 0 1px 4px rgba(45, 72, 96, 0.18);
}
.impact-map-mode-caption {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  line-height: 1.5;
  color: rgba(45, 72, 96, 0.65);
  text-align: center;
  margin: 0 auto 1.25rem;
  max-width: 580px;
  padding: 0 1rem;
}
.impact-map-toggle-row-secondary {
  /* Dots / Numbers / Re-settle stays but reads as a secondary control
     under the primary mode toggle. */
  opacity: 0.85;
}

/* Personal dashboard — three-state mode toggle that sits above the
   stacked map. Mirrors the org Impact Map toggle but with distinct
   class names so the two don't collide when querying the DOM. */
/* IM/BP/WB toggle — chic but warmer. Container has a soft coral
   tint (no more gray-on-gray). Active pill is a clean white pill
   with a navy text + a touch of shadow for lift. */
.personal-impact-mode-toggle,
.org-impact-mode-toggle {
  display: flex;
  background: rgba(232, 168, 152, 0.08);
  border-radius: 999px;
  padding: 3px;
  width: fit-content;
  margin: 0.5rem auto 0.4rem;
  gap: 0;
}
.personal-im-mode-btn,
.org-im-mode-btn {
  background: transparent;
  border: none;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgba(45, 72, 96, 0.7);
  cursor: pointer;
  transition: all 0.18s ease;
  white-space: nowrap;
}
.personal-im-mode-btn:hover,
.org-im-mode-btn:hover { color: var(--navy, #2d4860); }
.personal-im-mode-btn.personal-im-mode-active,
.org-im-mode-btn.org-im-mode-active {
  background: #ffffff;
  color: var(--navy, #2d4860);
  font-weight: 600;
  box-shadow: 0 1px 4px rgba(45, 72, 96, 0.12);
}
.personal-impact-mode-caption,
.org-impact-mode-caption {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.5;
  color: rgba(45, 72, 96, 0.65);
  text-align: center;
  margin: 0 auto 0.75rem;
  max-width: 560px;
  padding: 0 1rem;
}

/* "Go in →" affordance — shows under the Whiteboard caption when
   Whiteboard mode is active on the personal dashboard. The preview
   on the dashboard is the doorway; clicking takes you into the
   full-page workspace. */
.personal-whiteboard-goin {
  text-align: center;
  margin: -0.25rem auto 0.75rem;
}
.whiteboard-goin-btn {
  background: transparent;
  border: 1.5px solid rgba(45,72,96,0.25);
  border-radius: 999px;
  padding: 0.4rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--navy, #2d4860);
  cursor: pointer;
  transition: all 0.18s ease;
}
.whiteboard-goin-btn:hover {
  background: var(--navy, #2d4860);
  border-color: var(--navy, #2d4860);
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 3px 10px rgba(45,72,96,0.18);
}

/* Stage-pipeline card grid — book_reviews / blogs subcategories
   render a grid of items (books, posts) instead of a single-piece
   writing form. Click a card to enter that item's writing surface. */
.book-stage-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1rem;
  margin: 1.25rem 0;
}
.book-stage-card,
.book-stage-add-card {
  background: #fff;
  border: 1.5px solid rgba(45,72,96,0.10);
  border-radius: 14px;
  padding: 1.1rem 1.15rem;
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.18s, border-color 0.18s;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
  min-height: 140px;
}
.book-stage-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(45,72,96,0.15);
  border-color: rgba(45,72,96,0.30);
}
.bsc-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  line-height: 1.2;
}
.bsc-author {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(45,72,96,0.7);
}
.bsc-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(45,72,96,0.5);
}
.bsc-body-excerpt {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.92rem;
  color: rgba(45,72,96,0.78);
  line-height: 1.45;
  margin-top: 0.35rem;
}
.bsc-empty {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(45,72,96,0.5);
  margin-top: 0.35rem;
}
.book-stage-add-card {
  background: rgba(45,72,96,0.03);
  border-style: dashed;
  align-items: center;
  justify-content: center;
  text-align: center;
}
.book-stage-add-card:hover {
  background: rgba(45,72,96,0.06);
  border-color: rgba(45,72,96,0.30);
}
.bsc-add-plus {
  font-size: 2rem;
  color: rgba(45,72,96,0.5);
  line-height: 1;
}
.bsc-add-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
}
.book-stage-shape-hint,
.page-components-add-row {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px dashed rgba(45,72,96,0.12);
}
.bssh-hint {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.9rem;
  color: rgba(45,72,96,0.6);
}

/* Shape this page — universal component menu modal. */
.shape-page-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.shape-page-modal.hidden { display: none; }
.shape-page-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45,72,96,0.35);
  backdrop-filter: blur(2px);
}
.shape-page-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 1.75rem 1.75rem 1.25rem;
  width: min(92vw, 640px);
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(45,72,96,0.25);
}
.shape-page-close {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: rgba(45,72,96,0.5);
  cursor: pointer;
  padding: 0.25rem 0.45rem;
}
.shape-page-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(148,184,208,0.95);
  margin-bottom: 0.4rem;
}
.shape-page-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 500;
  color: var(--navy, #2d4860);
  margin: 0 0 0.4rem;
}
.shape-page-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.98rem;
  color: rgba(45,72,96,0.7);
  margin: 0 0 1.1rem;
}
.shape-page-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.7rem;
}
.shape-comp-tile {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
  background: rgba(45,72,96,0.04);
  border: 1.5px solid rgba(45,72,96,0.08);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  cursor: pointer;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.18s ease;
}
.shape-comp-tile:hover {
  background: rgba(45,72,96,0.08);
  border-color: rgba(45,72,96,0.25);
  transform: translateY(-1px);
}
.scp-icon {
  font-size: 1.4rem;
  color: rgba(45,72,96,0.65);
  line-height: 1;
}
.scp-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
}
.scp-desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(45,72,96,0.65);
  line-height: 1.35;
}
.shape-page-coming {
  margin-top: 1.25rem;
  padding-top: 0.85rem;
  border-top: 1px dashed rgba(45,72,96,0.12);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.85rem;
  color: rgba(45,72,96,0.55);
}
.spc-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin-right: 0.5rem;
}

/* Rendered components — Notes, Card grid, To-do, Citations. */
.page-components-wrap {
  margin-top: 1.5rem;
}
.page-components-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(148,184,208,0.95);
  margin-bottom: 0.75rem;
}
.page-comp {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 12px;
  padding: 1rem 1.1rem;
  margin-bottom: 0.85rem;
}
.comp-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.6rem;
}
.comp-title-input {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  padding: 0.2rem 0.3rem;
  border-radius: 4px;
}
.comp-title-input:focus { outline: 1px solid rgba(148,184,208,0.6); background: rgba(148,184,208,0.05); }
.comp-remove {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.4);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  border-radius: 4px;
}
.comp-remove:hover { color: #c97374; background: rgba(201,115,116,0.08); }

.comp-notes-body {
  width: 100%;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  line-height: 1.5;
  color: rgba(45,72,96,0.85);
  resize: vertical;
}

.comp-card-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 0.6rem;
}
.comp-card {
  background: rgba(45,72,96,0.03);
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  position: relative;
}
.comp-card-title {
  width: 100%;
  border: none;
  background: transparent;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  margin-bottom: 0.25rem;
}
.comp-card-body {
  width: 100%;
  border: none;
  background: transparent;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.9rem;
  color: rgba(45,72,96,0.75);
  resize: vertical;
}
.comp-card-remove {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.35);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.1rem 0.35rem;
}
.comp-card-remove:hover { color: #c97374; }
.comp-card-add,
.comp-todo-add,
.comp-cite-add {
  background: rgba(45,72,96,0.04);
  border: 1.5px dashed rgba(45,72,96,0.25);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(45,72,96,0.65);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}
.comp-card-add:hover,
.comp-todo-add:hover,
.comp-cite-add:hover {
  background: rgba(45,72,96,0.08);
  color: var(--navy, #2d4860);
}

.comp-todo-list { display: flex; flex-direction: column; gap: 0.4rem; }
.comp-todo-row { display: flex; align-items: center; gap: 0.6rem; }
.comp-todo-check { width: 18px; height: 18px; cursor: pointer; }
.comp-todo-text {
  flex: 1;
  border: none;
  background: transparent;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: var(--navy, #2d4860);
  padding: 0.3rem 0.4rem;
  border-radius: 4px;
}
.comp-todo-text.is-done {
  text-decoration: line-through;
  opacity: 0.55;
}
.comp-todo-remove {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.35);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.2rem 0.4rem;
}
.comp-todo-remove:hover { color: #c97374; }

.comp-cite-list { display: flex; flex-direction: column; gap: 0.7rem; }
.comp-cite-row {
  background: rgba(45,72,96,0.03);
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  position: relative;
}
.comp-cite-text {
  width: 100%;
  border: none;
  background: transparent;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.98rem;
  color: rgba(45,72,96,0.85);
  resize: vertical;
  margin-bottom: 0.25rem;
}
.comp-cite-source {
  width: 100%;
  border: none;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(45,72,96,0.65);
}
.comp-cite-remove {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.35);
  cursor: pointer;
  font-size: 0.85rem;
}
.comp-cite-remove:hover { color: #c97374; }

/* Gallery — photo wall with caption + remove per tile. */
.comp-gallery-grid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.comp-gallery-item {
  position: relative;
  width: 140px;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  background: rgba(45,72,96,0.03);
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 10px;
  padding: 0.5rem;
}
.comp-gallery-thumb {
  width: 100%;
  aspect-ratio: 1;
  border-radius: 8px;
  background-color: rgba(45,72,96,0.06);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
.comp-gallery-caption {
  width: 100%;
  border: none;
  background: transparent;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(45,72,96,0.78);
  text-align: center;
}
.comp-gallery-remove {
  position: absolute;
  top: 0.3rem;
  right: 0.35rem;
  background: rgba(255,255,255,0.85);
  border: none;
  color: rgba(45,72,96,0.5);
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0.1rem 0.35rem;
  border-radius: 4px;
}
.comp-gallery-remove:hover { color: #c97374; }
.comp-gallery-add {
  width: 140px;
  aspect-ratio: 1;
  background: rgba(45,72,96,0.04);
  border: 1.5px dashed rgba(45,72,96,0.25);
  border-radius: 10px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(45,72,96,0.65);
  cursor: pointer;
  transition: all 0.15s ease;
}
.comp-gallery-add:hover {
  background: rgba(45,72,96,0.08);
  color: var(--navy, #2d4860);
}

/* Data sprinkles — number badges with unit + label. */
.comp-sprinkle-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
}
.comp-sprinkle-card {
  position: relative;
  min-width: 150px;
  background: rgba(148,184,208,0.10);
  border: 1px solid rgba(148,184,208,0.30);
  border-radius: 12px;
  padding: 0.85rem 0.95rem 0.7rem;
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.comp-sprinkle-number {
  border: none;
  background: transparent;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  line-height: 1.05;
  padding: 0;
  width: 100%;
}
.comp-sprinkle-unit {
  border: none;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: rgba(148,184,208,0.95);
  padding: 0;
  width: 100%;
}
.comp-sprinkle-label {
  border: none;
  background: transparent;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(45,72,96,0.78);
  padding: 0.15rem 0 0;
  width: 100%;
}
.comp-sprinkle-remove {
  position: absolute;
  top: 0.3rem;
  right: 0.4rem;
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.4);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.1rem 0.35rem;
}
.comp-sprinkle-remove:hover { color: #c97374; }
.comp-sprinkle-add {
  min-width: 150px;
  background: rgba(45,72,96,0.04);
  border: 1.5px dashed rgba(45,72,96,0.25);
  border-radius: 12px;
  padding: 0.85rem 0.95rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(45,72,96,0.65);
  cursor: pointer;
  transition: all 0.15s ease;
}
.comp-sprinkle-add:hover {
  background: rgba(45,72,96,0.08);
  color: var(--navy, #2d4860);
}

/* Anchor + Through-line — source field and one-line idea field. */
.comp-anchor-label {
  display: block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: rgba(148,184,208,0.95);
  margin: 0.5rem 0 0.3rem;
}
.comp-anchor-passage {
  width: 100%;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: rgba(45,72,96,0.85);
  background: rgba(45,72,96,0.02);
}
.comp-anchor-keyidea {
  width: 100%;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 8px;
  padding: 0.6rem 0.75rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--navy, #2d4860);
  resize: vertical;
}

/* Quotes block — italic Cormorant with coral left border + attribution. */
.comp-quote-list { display: flex; flex-direction: column; gap: 0.7rem; }
.comp-quote-row {
  position: relative;
  background: rgba(45,72,96,0.02);
  border-left: 2px solid #e08a82;
  border-radius: 0 8px 8px 0;
  padding: 0.55rem 0.75rem 0.55rem 0.85rem;
}
.comp-quote-text {
  width: 100%;
  border: none;
  background: transparent;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  line-height: 1.4;
  color: rgba(45,72,96,0.88);
  resize: vertical;
  margin-bottom: 0.2rem;
}
.comp-quote-who {
  width: 100%;
  border: none;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--navy, #2d4860);
  text-align: right;
}
.comp-quote-remove {
  position: absolute;
  top: 0.35rem;
  right: 0.45rem;
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.35);
  cursor: pointer;
  font-size: 0.85rem;
}
.comp-quote-remove:hover { color: #c97374; }
.comp-quote-add {
  background: rgba(45,72,96,0.04);
  border: 1.5px dashed rgba(45,72,96,0.25);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(45,72,96,0.65);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
}
.comp-quote-add:hover {
  background: rgba(45,72,96,0.08);
  color: var(--navy, #2d4860);
}

/* People — named cards with soft tint. */
.comp-person-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.6rem;
}
.comp-person-card {
  position: relative;
  background: rgba(148,184,208,0.08);
  border: 1px solid rgba(148,184,208,0.22);
  border-radius: 10px;
  padding: 0.7rem 0.85rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.comp-person-name {
  width: 100%;
  border: none;
  background: transparent;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
}
.comp-person-role {
  width: 100%;
  border: none;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(148,184,208,0.95);
}
.comp-person-notes {
  width: 100%;
  border: none;
  background: transparent;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.92rem;
  line-height: 1.4;
  color: rgba(45,72,96,0.78);
  resize: vertical;
}
.comp-person-remove {
  position: absolute;
  top: 0.35rem;
  right: 0.4rem;
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.4);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.1rem 0.35rem;
}
.comp-person-remove:hover { color: #c97374; }
.comp-person-add {
  background: rgba(45,72,96,0.04);
  border: 1.5px dashed rgba(45,72,96,0.25);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(45,72,96,0.65);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  grid-column: 1 / -1;
}
.comp-person-add:hover {
  background: rgba(45,72,96,0.08);
  color: var(--navy, #2d4860);
}

/* Timeline — vertical rail of dated entries. */
.comp-timeline-list {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  position: relative;
  padding-left: 0.25rem;
}
.comp-timeline-row {
  display: flex;
  gap: 0.85rem;
  position: relative;
}
.comp-timeline-row::before {
  content: '';
  position: absolute;
  left: 5px;
  top: 18px;
  bottom: -0.85rem;
  width: 1px;
  background: rgba(148,184,208,0.45);
}
.comp-timeline-row:last-of-type::before { display: none; }
.comp-timeline-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: #94b8d0;
  margin-top: 8px;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.comp-timeline-fields {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.comp-timeline-head {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.comp-timeline-date {
  border: 1px solid rgba(45,72,96,0.08);
  background: rgba(45,72,96,0.02);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--navy, #2d4860);
}
.comp-timeline-label {
  flex: 1;
  min-width: 140px;
  border: none;
  background: transparent;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
}
.comp-timeline-body {
  width: 100%;
  border: 1px solid rgba(45,72,96,0.08);
  background: rgba(45,72,96,0.02);
  border-radius: 8px;
  padding: 0.5rem 0.65rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  line-height: 1.4;
  color: rgba(45,72,96,0.8);
  resize: vertical;
}
.comp-timeline-remove {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.4);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.1rem 0.35rem;
}
.comp-timeline-remove:hover { color: #c97374; }
.comp-timeline-add {
  background: rgba(45,72,96,0.04);
  border: 1.5px dashed rgba(45,72,96,0.25);
  border-radius: 10px;
  padding: 0.65rem 0.75rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(45,72,96,0.65);
  cursor: pointer;
  text-align: center;
  transition: all 0.15s ease;
  margin-left: 1.7rem;
}
.comp-timeline-add:hover {
  background: rgba(45,72,96,0.08);
  color: var(--navy, #2d4860);
}

/* The Whiteboard — its own room. Full-page workspace where every story
   floats as a dot. Click any dot → action modal lets you decide. */
.whiteboard-container {
  padding: 1.5rem 1.5rem 3rem;
  max-width: 1400px;
}
.whiteboard-header {
  text-align: center;
  margin-bottom: 1.25rem;
}
.whiteboard-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(148,184,208,0.95);
  margin-bottom: 0.5rem;
}
.whiteboard-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.2rem;
  font-weight: 500;
  color: var(--navy, #2d4860);
  margin: 0 0 0.5rem;
  line-height: 1.2;
}
.whiteboard-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(45,72,96,0.7);
  margin: 0 auto;
  max-width: 640px;
}
.whiteboard-stats {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 1rem;
}
.wbs-chip {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  background: rgba(45,72,96,0.06);
  color: var(--navy, #2d4860);
}
.wbs-chip strong { font-weight: 700; margin-right: 0.25rem; }
.wbs-chip-claimed { background: rgba(45,72,96,0.10); }
.wbs-chip-carry { background: rgba(232,168,152,0.18); }
.wbs-chip-sit { background: rgba(148,184,208,0.18); }

/* Whiteboard layer toggle row — Patterns (today), Data + Groupings
   (Slices 3 + 4). Pill toggles that show/hide layered panels. */
.whiteboard-layer-toggle-row {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin-top: 0.9rem;
}
.wb-layer-toggle {
  background: rgba(45,72,96,0.04);
  border: 1.5px solid rgba(45,72,96,0.12);
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--navy, #2d4860);
  cursor: pointer;
  transition: all 0.18s ease;
}
.wb-layer-toggle:hover { background: rgba(45,72,96,0.08); }
.wb-layer-toggle.wb-layer-active {
  background: var(--navy, #2d4860);
  color: #fff;
  border-color: var(--navy, #2d4860);
  box-shadow: 0 1px 4px rgba(45,72,96,0.18);
}

/* Patterns panel — body-level drawer, fixed to bottom of viewport
   so it overlays whatever screen you're on (the Whiteboard mode
   now lives inline on the personal dashboard, not a separate page). */
.whiteboard-patterns-panel {
  position: fixed;
  bottom: 1rem;
  left: 50%;
  transform: translateX(-50%);
  width: min(94vw, 920px);
  max-height: 60vh;
  overflow-y: auto;
  z-index: 900;
  padding: 1.25rem 1.25rem 1rem;
  background: #fff;
  border: 1px solid rgba(148,184,208,0.55);
  border-radius: 14px;
  box-shadow: 0 12px 36px rgba(45,72,96,0.20);
}
.whiteboard-patterns-panel.hidden { display: none; }

/* Backdrop behind the patterns drawer — clicking it dismisses the
   drawer, same as the × in the corner. Solves the "I can't click
   out of this" trap. */
.whiteboard-patterns-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(45,72,96,0.18);
  backdrop-filter: blur(1px);
  z-index: 895;
  cursor: pointer;
}
.whiteboard-patterns-backdrop.hidden { display: none; }

/* Close × in the corner of the patterns drawer. */
.wbpp-close {
  position: absolute;
  top: 0.5rem;
  right: 0.7rem;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: rgba(45,72,96,0.55);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
  border-radius: 6px;
}
.wbpp-close:hover {
  color: var(--navy, #2d4860);
  background: rgba(45,72,96,0.08);
}
.whiteboard-patterns-panel { position: fixed; }  /* keep the close button positioned */

/* Personal dashboard whiteboard tools row — sits below the caption
   when Whiteboard mode is active. */
.personal-whiteboard-tools {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  margin: -0.25rem auto 0.75rem;
}
.personal-whiteboard-tools.hidden { display: none; }

/* Big Picture themes overlay row — soft cards naming the verb
   clusters the agent has surfaced. Sits above the stacked map. */
.whiteboard-themes-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin: 0 auto 0.85rem;
  max-width: 980px;
  padding: 0 1rem;
}
.whiteboard-themes-row.hidden { display: none; }
.wbt-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  background: rgba(148,184,208,0.10);
  border: 1px solid rgba(148,184,208,0.40);
  border-radius: 10px;
  padding: 0.55rem 0.85rem;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.18s ease;
  text-align: left;
}
.wbt-card:hover {
  background: rgba(148,184,208,0.18);
  border-color: rgba(148,184,208,0.65);
  transform: translateY(-1px);
}
.wbt-card.wbt-card-active {
  background: var(--navy, #2d4860);
  border-color: var(--navy, #2d4860);
  color: #fff;
}
.wbt-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  line-height: 1.15;
}
.wbt-card.wbt-card-active .wbt-card-name { color: #fff; }
.wbt-card-meta {
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: rgba(45,72,96,0.55);
  text-transform: uppercase;
}
.wbt-card.wbt-card-active .wbt-card-meta { color: rgba(255,255,255,0.75); }
.wbt-loading, .wbt-empty {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(45,72,96,0.6);
  text-align: center;
  padding: 0.5rem 1rem;
  width: 100%;
}

/* Dot highlight states when a theme is clicked. Themed dots get a
   coral glow; non-matching dots dim out. */
.sm-dot {
  transition: opacity 0.18s ease, r 0.18s ease, filter 0.18s ease;
}
.sm-dot-themed {
  filter: drop-shadow(0 0 6px rgba(232,168,152,0.9));
}
.sm-dot-dimmed {
  opacity: 0.18;
}
.wbpp-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(148,184,208,0.95);
  margin-bottom: 0.9rem;
}
.wbpp-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 0.85rem;
}
.wbpp-card {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.10);
  border-radius: 10px;
  padding: 0.85rem 1rem;
}
.wbpp-card-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  margin-bottom: 0.35rem;
}
.wbpp-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  line-height: 1.2;
}
.wbpp-card-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  color: rgba(45,72,96,0.55);
  white-space: nowrap;
}
.wbpp-card-desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(45,72,96,0.78);
  line-height: 1.4;
  margin-bottom: 0.45rem;
}
.wbpp-card-evidence {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.wbpp-ev-chip {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.82rem;
  font-style: italic;
  color: rgba(45,72,96,0.6);
  background: rgba(45,72,96,0.04);
  border-radius: 6px;
  padding: 0.25rem 0.5rem;
}
.wbpp-loading,
.wbpp-empty {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(45,72,96,0.6);
  text-align: center;
  padding: 0.5rem;
}

.whiteboard-canvas {
  position: relative;
  width: 100%;
  height: 72vh;
  min-height: 540px;
  background: linear-gradient(135deg, rgba(248,243,238,0.6) 0%, rgba(245,240,232,0.4) 100%);
  border: 1.5px dashed rgba(45,72,96,0.10);
  border-radius: 14px;
  margin-top: 1.25rem;
  overflow: hidden;
}
.whiteboard-empty {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1rem;
  color: rgba(45,72,96,0.6);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.1rem;
}

/* Dot — the unit of the Whiteboard. TL blue by default (still in the
   air). State variants give visual feedback after triage actions. */
.wb-dot {
  position: absolute;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: rgba(148,184,208,0.88);
  border: 1.5px solid #fff;
  box-shadow: 0 1px 3px rgba(45,72,96,0.12);
  cursor: pointer;
  transition: all 0.2s ease;
  transform: translate(-50%, -50%);
}
.wb-dot:hover {
  transform: translate(-50%, -50%) scale(1.5);
  box-shadow: 0 3px 10px rgba(45,72,96,0.25);
  background: rgba(148,184,208,1);
  z-index: 10;
}
.wb-dot-claimed {
  background: rgba(45,72,96,0.86);
}
.wb-dot-claimed:hover { background: rgba(45,72,96,1); }
.wb-dot-carry {
  background: rgba(232,168,152,0.88);
  border-color: #fff;
}
.wb-dot-carry:hover { background: rgba(232,168,152,1); }
.wb-dot-sit {
  background: rgba(148,184,208,0.32);
  opacity: 0.6;
  width: 12px;
  height: 12px;
}
.wb-dot-sit:hover {
  opacity: 1;
  background: rgba(148,184,208,0.7);
}

/* Whiteboard action modal — opens when a dot is clicked. Centered
   overlay, not anchored to the dot, so it works on every screen size. */
.whiteboard-action-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.whiteboard-action-modal.hidden { display: none; }
.wam-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(45,72,96,0.35);
  backdrop-filter: blur(2px);
}
.wam-card {
  position: relative;
  background: #fff;
  border-radius: 16px;
  padding: 1.75rem 1.75rem 1.25rem;
  width: min(92vw, 460px);
  max-height: 86vh;
  overflow-y: auto;
  box-shadow: 0 12px 40px rgba(45,72,96,0.25);
  font-family: 'Montserrat', sans-serif;
}
.wam-close {
  position: absolute;
  top: 0.6rem;
  right: 0.75rem;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  color: rgba(45,72,96,0.5);
  cursor: pointer;
  line-height: 1;
  padding: 0.25rem 0.45rem;
}
.wam-close:hover { color: var(--navy, #2d4860); }
.wam-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(148,184,208,0.95);
  margin-bottom: 0.5rem;
}
.wam-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 500;
  color: var(--navy, #2d4860);
  margin: 0 0 0.4rem;
  line-height: 1.25;
}
.wam-meta {
  font-size: 0.72rem;
  color: rgba(45,72,96,0.55);
  margin-bottom: 0.75rem;
  letter-spacing: 0.02em;
}
.wam-excerpt {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.98rem;
  color: rgba(45,72,96,0.78);
  line-height: 1.5;
  margin: 0 0 1rem;
  border-left: 2px solid rgba(148,184,208,0.5);
  padding-left: 0.9rem;
}

/* Agent's read insight panel — slot between excerpt and action
   buttons. Rule-based today; named after the connection-sentence
   principle (one short paragraph that ties the new artifact to the
   user's existing patterns and people). */
.wam-insight {
  background: rgba(148,184,208,0.08);
  border: 1px solid rgba(148,184,208,0.30);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  margin-bottom: 1rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  color: rgba(45,72,96,0.85);
  line-height: 1.5;
}
.wam-insight:empty { display: none; }
.wam-insight p { margin: 0; }
.wam-insight-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(148,184,208,0.95);
  margin-bottom: 0.45rem;
}
.wam-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 1rem;
}
.wam-action {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  background: rgba(45,72,96,0.04);
  border: 1.5px solid rgba(45,72,96,0.08);
  border-radius: 12px;
  padding: 0.85rem 1.1rem;
  cursor: pointer;
  text-align: left;
  font-family: 'Montserrat', sans-serif;
  transition: all 0.18s ease;
}
.wam-action:hover {
  background: rgba(45,72,96,0.08);
  border-color: rgba(45,72,96,0.18);
  transform: translateX(2px);
}
.wam-action-label {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
}
.wam-action-hint {
  font-size: 0.78rem;
  color: rgba(45,72,96,0.6);
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
}
.wam-action-innovate:hover { border-color: rgba(124,158,124,0.55); background: rgba(124,158,124,0.10); }
.wam-action-collaborate:hover { border-color: rgba(232,168,152,0.55); background: rgba(232,168,152,0.10); }
.wam-action-sit:hover { border-color: rgba(148,184,208,0.55); background: rgba(148,184,208,0.10); }
.wam-footer {
  padding-top: 0.5rem;
  border-top: 1px solid rgba(45,72,96,0.08);
  text-align: center;
}
.wam-open {
  background: transparent;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  color: rgba(45,72,96,0.7);
  cursor: pointer;
  padding: 0.35rem 0.6rem;
  transition: color 0.15s;
}
.wam-open:hover { color: var(--navy, #2d4860); }

/* Whiteboard mode on the personal dashboard — the band gets room to
   breathe so 20+ floaters don't crowd a tight strip. Smooth height
   transition so the room visibly opens up. */
.personal-model-band {
  transition: padding 0.35s ease;
}
.personal-model-band.personal-whiteboard-mode #personal-stacked-map {
  /* The band IS the room now. Claim the viewport so the user can
     actually see the scatter, not a cramped strip. */
  min-height: 70vh;
  transition: min-height 0.35s ease;
}
.personal-model-band #personal-stacked-map {
  transition: min-height 0.35s ease;
}
/* Faded swoop in whiteboard mode — the line is still there but
   recedes so the floating dots can be the subject. */
.personal-model-band.personal-whiteboard-mode .stacked-map-svg path[stroke] {
  opacity: 0.35;
  transition: opacity 0.35s ease;
}

/* Big Picture mode placeholder card */
.impact-map-bigpicture-card {
  background: linear-gradient(135deg, rgba(157, 195, 214, 0.08), rgba(141, 184, 138, 0.08));
  border: 1px dashed rgba(45, 72, 96, 0.18);
  border-radius: 14px;
  padding: 2rem 1.75rem;
  max-width: 520px;
  margin: 1.5rem auto;
  text-align: center;
}
.imbp-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: var(--green, #8db88a);
  margin-bottom: 0.4rem;
}
.imbp-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  margin: 0 0 0.6rem;
}
.imbp-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem;
  line-height: 1.55;
  color: rgba(45, 72, 96, 0.78);
  margin: 0 0 0.65rem;
}
.imbp-coming {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.55);
  margin: 0;
}

/* Whiteboard mode: when stage has imap-mode-whiteboard, faint the swoop +
   KM circles so the floating stories are the focus. */
.imap-mode-whiteboard #impact-map-svg .im-swoop,
.imap-mode-whiteboard #impact-map-svg .im-km-circle {
  opacity: 0.35;
}

/* Invite-teammate nudge — a small wax-seal / merit-badge style emblem
   with the lead-in text curving around the team-of-three icon. Quiet,
   charming, recognizable. Rate-limited to once per session per org per
   surface so it's a moment, not a nag. */
.invite-nudge {
  margin: 1.5rem auto 0.5rem;
  display: flex;
  justify-content: center;
  cursor: pointer;
  outline: none;
}
.invite-nudge:focus { outline: 2px solid rgba(45, 72, 96, 0.3); outline-offset: 6px; border-radius: 50%; }
.invite-nudge-svg {
  width: 130px;
  height: 130px;
  transition: transform 0.25s ease, filter 0.25s ease;
  filter: drop-shadow(0 2px 6px rgba(45, 72, 96, 0.08));
}
.invite-nudge:hover .invite-nudge-svg {
  transform: scale(1.06) rotate(-3deg);
  filter: drop-shadow(0 4px 10px rgba(45, 72, 96, 0.18));
}
.invite-nudge-ringtext {
  font-family: 'Montserrat', sans-serif;
  font-size: 8.6px;
  font-weight: 700;
  letter-spacing: 0.22em;
  fill: #2d4860;
}
/* Slight surface-specific positioning tweaks */
.invite-nudge-project { margin-top: 1.25rem; }
.invite-nudge-generate { margin-top: 2rem; }
.invite-nudge-story { margin-top: 1.75rem; }
.ha-msg-nudge { display: flex; justify-content: center; margin: 0.75rem 0; }
.ha-msg-nudge .invite-nudge { margin: 0; }

/* KM detail page: Download these photos button */
.km-photo-actions {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 0.85rem;
  flex-wrap: wrap;
}
.km-photo-download-btn {
  background: var(--navy, #2d4860);
  color: #ffffff;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: opacity 0.15s;
}
.km-photo-download-btn:hover { opacity: 0.92; }
.km-photo-download-helper {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.85rem;
  color: rgba(45, 72, 96, 0.7);
}

/* Photos page: Select mode + download controls */
.media-tab-spacer { flex: 1; }
.media-tab-action {
  background: transparent;
  border: 1px solid rgba(45, 72, 96, 0.2);
  color: var(--navy, #2d4860);
  padding: 0.4rem 0.85rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  cursor: pointer;
  margin-left: 0.4rem;
  transition: background 0.15s, color 0.15s;
}
.media-tab-action:hover {
  background: var(--navy, #2d4860);
  color: #ffffff;
}
.media-select-bar {
  position: sticky;
  bottom: 1rem;
  left: 0;
  right: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0.75rem 0;
  padding: 0.75rem 1.1rem;
  background: var(--navy, #2d4860);
  color: #ffffff;
  border-radius: 999px;
  box-shadow: 0 6px 18px rgba(45, 72, 96, 0.22);
  z-index: 20;
}
.media-select-bar.hidden { display: none; }
.media-select-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.media-select-bar-actions { display: flex; gap: 0.5rem; }
.media-select-bar-cancel,
.media-select-bar-download {
  border-radius: 999px;
  padding: 0.45rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  border: none;
}
.media-select-bar-cancel {
  background: transparent;
  color: rgba(255, 255, 255, 0.8);
  border: 1px solid rgba(255, 255, 255, 0.35);
}
.media-select-bar-cancel:hover { color: #fff; border-color: #fff; }
.media-select-bar-download {
  background: #ffffff;
  color: var(--navy, #2d4860);
}
.media-select-bar-download:hover { opacity: 0.92; }
.media-select-bar-download:disabled { opacity: 0.5; cursor: default; }
/* Tile selected indicator (only meaningful in select mode) */
.media-grid-selecting .media-tile {
  cursor: pointer;
  position: relative;
}
.media-grid-selecting .media-tile::after {
  content: "";
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.85);
  border: 1.5px solid rgba(45, 72, 96, 0.55);
  z-index: 2;
}
.media-grid-selecting .media-tile-selected {
  box-shadow: 0 0 0 3px var(--coral, #c47e6c);
}
.media-grid-selecting .media-tile-selected::after {
  content: "✓";
  background: var(--coral, #c47e6c);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 14px;
  border-color: var(--coral, #c47e6c);
}

/* My Account → Your data: stacked export options each with a button + helper */
.acct-export-stack {
  padding: 0.75rem 0;
  border-bottom: 1px dashed rgba(45, 72, 96, 0.08);
}
.acct-export-stack:last-child { border-bottom: none; padding-bottom: 0.25rem; }
.acct-export-stack:first-child { padding-top: 0.25rem; }
.acct-export-stack .acct-section-helper { margin-top: 0.45rem; }

/* Recently deleted / restore modals — story trash + org trash */
.deleted-stories-modal-content,
.deleted-orgs-modal-content {
  max-width: 560px;
  width: 100%;
  max-height: 80vh;
  overflow-y: auto;
  padding: 1.6rem 1.5rem 1.4rem;
  background: #fff;
  border-radius: 14px;
}
.deleted-stories-helper {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  color: rgba(45, 72, 96, 0.7);
  font-size: 0.95rem;
  margin: 0 0 1rem;
}
.deleted-loading,
.deleted-empty {
  font-family: 'Cormorant Garamond', Georgia, serif;
  color: rgba(45, 72, 96, 0.65);
  text-align: center;
  padding: 2rem 0;
  font-style: italic;
}
.deleted-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid rgba(45, 72, 96, 0.08);
}
.deleted-row:last-child { border-bottom: none; }
.deleted-row-body { flex: 1; min-width: 0; }
.deleted-row-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy, #2d4860);
  margin-bottom: 0.2rem;
}
.deleted-row-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: rgba(45, 72, 96, 0.6);
  margin-bottom: 0.3rem;
}
.deleted-row-preview {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.9rem;
  color: rgba(45, 72, 96, 0.75);
  line-height: 1.4;
  margin-bottom: 0.35rem;
}
.deleted-row-window {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 600;
  color: var(--coral, #c47e6c);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.deleted-row-actions { flex-shrink: 0; }
.deleted-restore-btn {
  background: var(--navy, #2d4860);
  color: #ffffff;
  border: none;
  padding: 0.45rem 1rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
}
.deleted-restore-btn:hover { opacity: 0.92; }
.deleted-restore-btn:disabled { opacity: 0.55; cursor: default; }
.acct-plan-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
}
.acct-plan-name {
  font-size: 1.15rem;
  font-weight: 700;
  color: #2D4860;
  font-family: 'Montserrat', sans-serif;
}
.acct-plan-meta {
  font-size: 0.82rem;
  color: #888;
  margin-top: 0.2rem;
}
.acct-upgrade-btn {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--coral, #e8533f);
  text-decoration: none;
  white-space: nowrap;
  border: 1.5px solid var(--coral, #e8533f);
  border-radius: 20px;
  padding: 0.4rem 0.9rem;
  transition: background 0.15s, color 0.15s;
}
.acct-upgrade-btn:hover { background: var(--coral, #e8533f); color: white; }
.acct-field-row {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f5f5f5;
}
.acct-field-row:last-of-type { border-bottom: none; }
.acct-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: #888;
  width: 70px;
  flex-shrink: 0;
}
.acct-value {
  font-size: 0.9rem;
  color: #2D4860;
}
.acct-secondary-btn {
  background: none;
  border: 1.5px solid var(--border, #e8e4df);
  border-radius: 20px;
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #2D4860;
  cursor: pointer;
  font-family: inherit;
  transition: border-color 0.15s;
}
.acct-secondary-btn:hover { border-color: #2D4860; }
.acct-input-group { margin-bottom: 0.6rem; }
.acct-input {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1.5px solid var(--border, #e8e4df);
  border-radius: 8px;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.2s;
  box-sizing: border-box;
}
.acct-input:focus { border-color: var(--navy, #2D4860); }
.acct-how-btn-preview {
  background: #f9f7f4;
  border-radius: 10px;
  padding: 1.25rem;
  margin-bottom: 0.75rem;
  display: flex;
  justify-content: center;
}
.acct-embed-box {
  background: #f4f4f4;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  font-size: 0.75rem;
  font-family: monospace;
  color: #555;
  word-break: break-all;
  line-height: 1.5;
}
.acct-team-member {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #f5f5f5;
  font-size: 0.88rem;
  color: #2D4860;
}
.acct-team-member:last-child { border-bottom: none; }
.acct-team-role {
  font-size: 0.75rem;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.acct-danger-btn {
  background: none;
  border: 1.5px solid rgba(192,57,43,0.3);
  border-radius: 20px;
  padding: 0.4rem 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #c0392b;
  cursor: pointer;
  font-family: inherit;
  transition: background 0.15s;
}
.acct-danger-btn:hover { background: rgba(192,57,43,0.06); }

/* ===== SHARE VIEW (public, view-only) ===== */
#screen-share { background: #fafaf8; min-height: 100vh; }

.share-view-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 2rem;
  background: #fff;
  border-bottom: 1px solid #eee;
  position: sticky;
  top: 0;
  z-index: 100;
}
.share-view-signin-link {
  font-size: 0.85rem;
  font-weight: 600;
  color: #E8A898;
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
}
.share-view-signin-link:hover { color: #d4937f; }

.share-view-hero {
  background: #2D4860;
  color: #fff;
  padding: 3rem 2rem 2.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.share-hero-logo {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(255,255,255,0.15);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.share-hero-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.share-hero-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.5rem);
  font-weight: 600;
  margin: 0 0 0.4rem;
  color: #fff;
}
.share-hero-mission {
  font-size: 1rem;
  color: rgba(255,255,255,0.75);
  margin: 0;
  max-width: 600px;
  line-height: 1.5;
}

.share-view-body {
  max-width: 860px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
}
.share-section {
  margin-bottom: 2.5rem;
}
.share-section-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E8A898;
  margin-bottom: 1rem;
}
.share-im-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
}
.share-km-card {
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 10px;
  padding: 0.9rem 1.1rem;
  flex: 1 1 180px;
  min-width: 160px;
}
.share-km-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E8A898;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  font-family: 'Montserrat', sans-serif;
}
.share-km-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #2D4860;
  margin-bottom: 0.25rem;
  font-family: 'Montserrat', sans-serif;
}
.share-km-desc {
  font-size: 0.8rem;
  color: #888;
  line-height: 1.4;
}
.share-km-count {
  font-size: 0.75rem;
  color: #E8A898;
  font-weight: 600;
  margin-top: 0.5rem;
  font-family: 'Montserrat', sans-serif;
}

.share-stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 1rem;
}
.share-story-card {
  background: #fff;
  border: 1px solid #ebe6d6;
  border-radius: 12px;
  padding: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
}
.share-story-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(20, 32, 44, 0.08);
}
.share-story-photo {
  width: 100%;
  aspect-ratio: 2.4 / 1;
  overflow: hidden;
  background: #faf5ea;
}
.share-story-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.share-story-body {
  padding: 1rem 1.15rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.share-story-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy, #2D4860);
  margin: 0;
  line-height: 1.2;
}
.share-story-quote {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.78);
  line-height: 1.45;
  margin: 0;
  padding: 8px 12px;
  background: #faf5ea;
  border-left: 3px solid var(--coral, #c47e6c);
  border-radius: 0 6px 6px 0;
}
.share-story-snippet {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.98rem;
  color: rgba(45, 72, 96, 0.72);
  line-height: 1.5;
  margin: 0;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.share-story-sprinkles {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}
.share-story-sprinkle {
  display: inline-block;
  background: rgba(45, 72, 96, 0.06);
  color: var(--navy, #2D4860);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.88rem;
  font-weight: 600;
  padding: 3px 10px;
  border-radius: 999px;
}
.share-story-kms {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 2px;
}
.share-story-km-tag {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--green, #2d6a4f);
  background: rgba(45, 106, 79, 0.10);
  padding: 3px 9px;
  border-radius: 999px;
  text-transform: uppercase;
}
.share-story-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
  color: rgba(45, 72, 96, 0.4);
  margin-top: 4px;
}
.pub-org-empty {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(45, 72, 96, 0.5);
  text-align: center;
  padding: 1.5rem 0;
}

.share-vision-text {
  font-size: 1rem;
  color: #444;
  line-height: 1.7;
  font-style: italic;
  max-width: 600px;
}

/* Graduate CTA band */
.share-graduate-band {
  background: #2D4860;
  color: #fff;
  padding: 3rem 2rem;
  text-align: center;
}
.share-graduate-inner {
  max-width: 520px;
  margin: 0 auto;
}
.share-graduate-hook {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
}
.share-graduate-sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.75);
  margin: 0 0 1.5rem;
  line-height: 1.6;
}
.share-graduate-actions { margin-bottom: 0.75rem; }
.share-graduate-btn {
  display: inline-block;
  text-decoration: none;
  background: #E8A898;
  color: #fff;
  padding: 0.8rem 2rem;
  border-radius: 24px;
  font-weight: 700;
  font-size: 0.95rem;
}
.share-graduate-btn:hover { background: #d4937f; }
.share-graduate-fine {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.45);
  margin: 0;
}

/* Share link nav highlight */
.nav-share-link { color: #E8A898 !important; font-weight: 600; }
.nav-share-link:hover { color: #d4937f !important; }

/* ===== MERGE WIZARD ===== */
#screen-merge { background: #fafaf8; min-height: 100vh; }

.merge-hero {
  background: #2D4860;
  color: #fff;
  text-align: center;
  padding: 3rem 2rem 2.5rem;
}
.merge-hero-spark {
  font-size: 2rem;
  color: #E8A898;
  margin-bottom: 0.75rem;
}
.merge-hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(2rem, 5vw, 3rem);
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: #fff;
}
.merge-hero-sub {
  font-size: 1rem;
  color: rgba(255,255,255,0.7);
  margin: 0;
}

.merge-body {
  max-width: 900px;
  margin: 0 auto;
  padding: 2.5rem 2rem;
}
.merge-step { }

.merge-orgs-row {
  display: flex;
  gap: 1.5rem;
  align-items: flex-start;
  flex-wrap: wrap;
}
.merge-org-card {
  flex: 1 1 260px;
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 12px;
  padding: 1.5rem;
}
.merge-target-card {
  border-style: dashed;
  border-color: #E8A898;
}
.merge-org-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E8A898;
  margin-bottom: 0.75rem;
  font-family: 'Montserrat', sans-serif;
}
.merge-org-logo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: #2D4860;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.2rem;
  font-weight: 700;
  margin-bottom: 0.75rem;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
}
.merge-org-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.merge-org-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 1rem;
  font-weight: 700;
  color: #2D4860;
  margin-bottom: 0.25rem;
}
.merge-org-mission {
  font-size: 0.82rem;
  color: #666;
  line-height: 1.5;
  margin-bottom: 0.5rem;
}
.merge-org-stats {
  font-size: 0.75rem;
  color: #E8A898;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 0.75rem;
}
.merge-org-kms {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.merge-km-chip {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  background: #f5f5f5;
  border-radius: 20px;
  padding: 0.25rem 0.6rem;
  font-size: 0.75rem;
  color: #444;
  font-family: 'Montserrat', sans-serif;
}
.merge-km-chip-num {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: #E8A898;
  color: #fff;
  font-size: 0.65rem;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  flex-shrink: 0;
}
.merge-target-prompt {
  font-size: 0.88rem;
  color: #888;
  margin: 0 0 1rem;
  line-height: 1.5;
}
.merge-arrow {
  font-size: 2rem;
  color: #E8A898;
  align-self: center;
  flex-shrink: 0;
}
.merge-analyze-btn { margin-top: 0.5rem; }

/* Org picker */
.merge-org-picker { margin-top: 1.5rem; }
.merge-picker-label {
  font-size: 0.85rem;
  font-weight: 600;
  color: #2D4860;
  margin-bottom: 0.75rem;
  font-family: 'Montserrat', sans-serif;
}
.merge-picker-list { display: flex; flex-direction: column; gap: 0.5rem; }
.merge-picker-org {
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 8px;
  padding: 0.75rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s;
}
.merge-picker-org:hover { border-color: #E8A898; }
.merge-picker-org-name {
  font-size: 0.9rem;
  font-weight: 600;
  color: #2D4860;
  font-family: 'Montserrat', sans-serif;
}
.merge-picker-org-mission { font-size: 0.78rem; color: #888; margin-top: 0.2rem; }

/* Analysis */
.merge-analysis-loading {
  text-align: center;
  padding: 4rem 2rem;
  color: #888;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
}
.merge-loading-spark {
  font-size: 2rem;
  color: #E8A898;
  margin-bottom: 1rem;
  animation: pulse 1.5s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

.merge-analysis-section { margin-bottom: 1.75rem; }
.merge-analysis-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E8A898;
  margin-bottom: 0.5rem;
  font-family: 'Montserrat', sans-serif;
}
.merge-analysis-text {
  font-size: 0.95rem;
  color: #444;
  line-height: 1.65;
  margin: 0;
}
.merge-proposed-mission {
  font-style: italic;
  font-size: 1.05rem;
  color: #2D4860;
}
.merge-analysis-halves {
  display: flex;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 1.75rem;
}
.merge-analysis-half { flex: 1 1 240px; }

.merge-proposed-kms-list { display: flex; flex-direction: column; gap: 0.75rem; }
.merge-proposed-km {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  padding: 0.75rem 1rem;
}
.merge-proposed-km-num {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #E8A898;
  color: #fff;
  font-size: 0.8rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-family: 'Montserrat', sans-serif;
}
.merge-proposed-km-title {
  font-size: 0.9rem;
  font-weight: 600;
  color: #2D4860;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 0.2rem;
}
.merge-proposed-km-note {
  font-size: 0.78rem;
  color: #888;
  line-height: 1.4;
}
.merge-km-source {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 20px;
  padding: 0.1rem 0.5rem;
  margin-left: 0.3rem;
}
.merge-km-source-a { background: rgba(232,168,152,0.15); color: #E8A898; }
.merge-km-source-b { background: rgba(45,72,96,0.1); color: #2D4860; }
.merge-km-source-both { background: rgba(141,184,138,0.15); color: #5a9e57; }

/* ===== DIRECTORY ===== */
.dir-hero {
  background: #2D4860;
  color: #fff;
  text-align: center;
  padding: 3rem 2rem 2rem;
}
.dir-hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: clamp(1.8rem, 4vw, 2.8rem);
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: #fff;
}
.dir-hero-sub {
  font-size: 0.95rem;
  color: rgba(255,255,255,0.7);
  margin: 0;
  max-width: 540px;
  margin-inline: auto;
  line-height: 1.6;
}

.dir-search-band {
  background: #fff;
  border-bottom: 1px solid #eee;
  padding: 1rem 2rem;
  position: sticky;
  top: 57px;
  z-index: 90;
}
.dir-search-inner { max-width: 860px; margin: 0 auto; }
.dir-search-input {
  width: 100%;
  padding: 0.65rem 1rem;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  font-size: 0.9rem;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 0.75rem;
  box-sizing: border-box;
}
.dir-search-input:focus { outline: none; border-color: #E8A898; }
.dir-filter-pills { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.dir-pill {
  background: none;
  border: 1.5px solid #ddd;
  border-radius: 20px;
  padding: 0.3rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  color: #888;
  transition: all 0.15s;
}
.dir-pill.active, .dir-pill:hover { border-color: #E8A898; color: #E8A898; background: rgba(232,168,152,0.06); }

.dir-body { max-width: 900px; margin: 0 auto; padding: 2rem 2rem; }
.dir-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.25rem;
}
.dir-org-card {
  background: #fff;
  border: 1.5px solid #e8e8e8;
  border-radius: 12px;
  padding: 1.25rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.dir-org-card:hover { border-color: #E8A898; box-shadow: 0 2px 12px rgba(232,168,152,0.15); }
.dir-org-header { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; }
.dir-org-logo {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #2D4860;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
}
.dir-org-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.dir-org-info { flex: 1; min-width: 0; }
.dir-org-name {
  font-size: 0.92rem;
  font-weight: 700;
  color: #2D4860;
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dir-org-loc { font-size: 0.75rem; color: #aaa; margin-top: 0.1rem; }
.dir-org-type {
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: rgba(45,72,96,0.08);
  color: #2D4860;
  border-radius: 20px;
  padding: 0.2rem 0.6rem;
  white-space: nowrap;
  flex-shrink: 0;
  font-family: 'Montserrat', sans-serif;
}
.dir-org-mission {
  font-size: 0.82rem;
  color: #555;
  line-height: 1.5;
  margin: 0 0 0.75rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.dir-org-stats {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: #E8A898;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
}

.dir-empty { text-align: center; padding: 3rem; color: #bbb; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; }
.dir-loading { text-align: center; padding: 3rem; color: #bbb; font-family: 'Montserrat', sans-serif; font-size: 0.9rem; }

/* Public profile meta */
.pub-org-type-badge {
  display: inline-block;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--coral, #c47e6c);
  background: rgba(196, 126, 108, 0.16);
  padding: 4px 12px;
  border-radius: 999px;
  margin-bottom: 0.65rem;
  font-family: 'Montserrat', sans-serif;
}
.pub-org-type-badge:empty { display: none; }
.pub-org-meta {
  font-size: 0.82rem;
  color: rgba(255,255,255,0.55);
  margin-top: 0.5rem;
  font-family: 'Montserrat', sans-serif;
}

/* Public toggle in My Account */
.acct-toggle-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 0.5rem;
}
.acct-toggle-label {
  font-size: 0.88rem;
  color: #2D4860;
  font-family: 'Montserrat', sans-serif;
  font-weight: 500;
}
.acct-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  flex-shrink: 0;
}
.acct-toggle-switch input { opacity: 0; width: 0; height: 0; }
.acct-toggle-knob {
  position: absolute;
  cursor: pointer;
  inset: 0;
  background: #ddd;
  border-radius: 24px;
  transition: background 0.2s;
}
.acct-toggle-knob::before {
  content: '';
  position: absolute;
  width: 18px;
  height: 18px;
  left: 3px;
  top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.acct-toggle-switch input:checked + .acct-toggle-knob { background: #E8A898; }
.acct-toggle-switch input:checked + .acct-toggle-knob::before { transform: translateX(20px); }

/* ===== LANDING DISCOVERY BAND ===== */
.ldisco-band {
  background: #fff;
  border-top: 1px solid #f0ede8;
  padding: 3rem 2rem 3.5rem;
  position: relative;
}
.ldisco-inner {
  max-width: 860px;
  margin: 0 auto;
  position: relative;
}
.ldisco-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #E8A898;
  text-align: center;
  margin: 0 0 1rem;
}
.ldisco-search-wrap {
  position: relative;
  max-width: 520px;
  margin: 0 auto 1.5rem;
}
.ldisco-search {
  width: 100%;
  padding: 0.85rem 1rem 0.85rem 2.75rem;
  border: 2px solid #e0e0e0;
  border-radius: 50px;
  font-size: 0.95rem;
  font-family: 'Montserrat', sans-serif;
  box-sizing: border-box;
  transition: border-color 0.2s;
  background: #fafaf8;
}
.ldisco-search:focus { outline: none; border-color: #E8A898; background: #fff; }
.ldisco-search-icon {
  position: absolute;
  left: 1rem;
  top: 50%;
  transform: translateY(-50%);
  font-size: 1.2rem;
  color: #ccc;
  pointer-events: none;
}

/* Results grid */
.ldisco-org-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1rem;
  margin-bottom: 1rem;
}
.ldisco-org-card {
  background: #fafaf8;
  border: 1.5px solid #e8e8e8;
  border-radius: 10px;
  padding: 1rem;
  cursor: pointer;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ldisco-org-card:hover { border-color: #E8A898; box-shadow: 0 2px 10px rgba(232,168,152,0.12); }
.ldisco-org-logo {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #2D4860;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  font-weight: 700;
  margin-bottom: 0.6rem;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
  flex-shrink: 0;
}
.ldisco-org-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ldisco-org-name {
  font-size: 0.88rem;
  font-weight: 700;
  color: #2D4860;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 0.15rem;
}
.ldisco-org-loc { font-size: 0.72rem; color: #bbb; margin-bottom: 0.3rem; }
.ldisco-org-mission {
  font-size: 0.78rem;
  color: #666;
  line-height: 1.4;
  margin-bottom: 0.5rem;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.ldisco-org-stats { font-size: 0.72rem; color: #E8A898; font-weight: 600; font-family: 'Montserrat', sans-serif; }
.ldisco-no-results { text-align: center; color: #bbb; font-size: 0.88rem; font-family: 'Montserrat', sans-serif; padding: 1.5rem 0; }
.ldisco-signup-link { background: none; border: none; color: #E8A898; font-weight: 600; cursor: pointer; font-size: 0.88rem; font-family: 'Montserrat', sans-serif; }

/* Org detail */
.ldisco-back-btn {
  background: none;
  border: none;
  color: #888;
  font-size: 0.82rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 1.25rem;
  padding: 0;
}
.ldisco-back-btn:hover { color: #2D4860; }
.ldisco-detail-header {
  display: flex;
  align-items: flex-start;
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.ldisco-detail-logo {
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: #2D4860;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.3rem;
  font-weight: 700;
  flex-shrink: 0;
  overflow: hidden;
  font-family: 'Montserrat', sans-serif;
}
.ldisco-detail-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.ldisco-detail-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: #2D4860;
  margin-bottom: 0.2rem;
}
.ldisco-detail-mission { font-size: 0.88rem; color: #666; line-height: 1.5; }

.ldisco-kms-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #E8A898;
  margin-bottom: 0.75rem;
}
.ldisco-kms-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-bottom: 2rem;
}
.ldisco-km-card {
  background: #fafaf8;
  border: 1.5px solid #e8e8e8;
  border-radius: 10px;
  padding: 0.9rem 1rem;
  flex: 1 1 180px;
  cursor: default;
  transition: border-color 0.15s, box-shadow 0.15s;
  position: relative;
}
.ldisco-km-card:hover { border-color: #E8A898; box-shadow: 0 2px 10px rgba(232,168,152,0.15); }
.ldisco-km-num {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #E8A898;
  color: #fff;
  font-size: 0.75rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.5rem;
  font-family: 'Montserrat', sans-serif;
}
.ldisco-km-title {
  font-size: 0.88rem;
  font-weight: 600;
  color: #2D4860;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 0.25rem;
}
.ldisco-km-desc { font-size: 0.78rem; color: #888; line-height: 1.4; margin-bottom: 0.4rem; }
.ldisco-km-story-count { font-size: 0.72rem; color: #E8A898; font-weight: 600; font-family: 'Montserrat', sans-serif; }

/* Story hover tooltip */
.ldisco-story-tip {
  position: absolute;
  z-index: 200;
  background: #2D4860;
  color: #fff;
  border-radius: 10px;
  padding: 1rem 1.1rem;
  min-width: 240px;
  max-width: 320px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.18);
  pointer-events: none;
}
.ldisco-story-tip-km {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #E8A898;
  margin-bottom: 0.75rem;
  font-family: 'Montserrat', sans-serif;
}
.ldisco-story-tip-item { margin-bottom: 0.75rem; }
.ldisco-story-tip-item:last-child { margin-bottom: 0; }
.ldisco-story-tip-title {
  font-size: 0.85rem;
  font-weight: 600;
  color: #fff;
  margin-bottom: 0.2rem;
  font-family: 'Montserrat', sans-serif;
}
.ldisco-story-tip-snippet {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.65);
  line-height: 1.4;
}

/* Make my own CTA */
.ldisco-make-own { text-align: center; padding-top: 0.5rem; }
.ldisco-make-own-line {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  color: #2D4860;
  margin: 0 0 0.75rem;
}
.ldisco-cta-btn { font-size: 0.95rem; padding: 0.8rem 2rem; border-radius: 24px; }

/* Inline discovery inside landing hero */
.ldisco-inline-wrap {
  max-width: 600px;
  margin: 3.5rem auto 0;
  position: relative;
  padding-bottom: 0.5rem;
}
.ldisco-inline-or {
  text-align: center;
  font-size: 0.75rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  color: rgba(45,72,96,0.35);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin: 0 0 0.75rem;
}
/* Inside the hero the search gets slightly smaller */
.ldisco-inline-wrap .ldisco-search { background: rgba(255,255,255,0.85); font-size: 0.9rem; }
.ldisco-inline-wrap .ldisco-results { margin-top: 0.75rem; }
.ldisco-inline-wrap .ldisco-detail { margin-top: 0.75rem; }
.ldisco-inline-wrap .ldisco-story-tip { position: absolute; }

/* Discovery chips */
.ldisco-chips {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 0.5rem;
  margin-bottom: 0.9rem;
}
.ldisco-chip {
  background: none;
  border: 1.5px solid rgba(45,72,96,0.18);
  border-radius: 20px;
  padding: 0.3rem 0.9rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  color: #2D4860;
  cursor: pointer;
  transition: all 0.15s;
}
.ldisco-chip:hover { border-color: #E8A898; color: #E8A898; }
.ldisco-chip.active { background: #E8A898; border-color: #E8A898; color: #fff; }

.landing-explore-link {
  margin: 1.5rem 0 0;
  text-align: center;
}
.landing-explore-link a {
  font-size: 0.82rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: rgba(45,72,96,0.45);
  text-decoration: none;
  letter-spacing: 0.02em;
}
.landing-explore-link a:hover { color: #E8A898; }

/* ── Directory map ── */
.dir-map-wrap {
  position: relative;
  width: 100%;
  margin-bottom: 2rem;
  border-radius: 10px;
  overflow: hidden;
  background: #f4f7fa;
  border: 1px solid rgba(45,72,96,0.08);
}
.dir-map-canvas {
  display: block;
  width: 100%;
}
.dir-map-tooltip {
  position: absolute;
  background: #1a2f3e;
  color: #fff;
  padding: 0.35rem 0.65rem;
  border-radius: 6px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  pointer-events: none;
  white-space: nowrap;
  z-index: 10;
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
}
.dir-card-highlight {
  outline: 2px solid #E8A898 !important;
  background: rgba(232,168,152,0.07) !important;
}

/* ── Voice draft preview ── */
.voice-draft-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: #2D4860;
  margin-bottom: 0.3rem;
}
.voice-draft-narrative {
  font-size: 0.76rem;
  color: #555;
  line-height: 1.5;
}

/* ── Pricing path switch ── */
.pricing-path-switch {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  margin: 1rem 0 0.25rem;
  font-family: 'Montserrat', sans-serif;
}
.pricing-path-switch-label {
  font-size: 0.8rem;
  color: #aaa;
}
.pricing-path-switch-btn {
  background: none;
  border: none;
  font-size: 0.82rem;
  font-weight: 600;
  color: #E8A898;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  text-decoration: underline;
  padding: 0;
}
.pricing-path-switch-btn:hover { color: #d4836a; }

/* ── Nav public toggle ── */
.nav-public-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-left: 0.25rem;
}
.nav-public-toggle-switch {
  position: relative;
  display: inline-block;
  width: 30px;
  height: 17px;
  cursor: pointer;
  flex-shrink: 0;
}
.nav-public-toggle-switch input { opacity: 0; width: 0; height: 0; }
.nav-public-toggle-knob {
  position: absolute;
  inset: 0;
  background: rgba(45,72,96,0.18);
  border-radius: 17px;
  transition: background 0.2s;
}
.nav-public-toggle-knob::before {
  content: '';
  position: absolute;
  width: 11px; height: 11px;
  left: 3px; top: 3px;
  background: #fff;
  border-radius: 50%;
  transition: transform 0.2s;
}
.nav-public-toggle-switch input:checked + .nav-public-toggle-knob { background: #5c8c7a; }
.nav-public-toggle-switch input:checked + .nav-public-toggle-knob::before { transform: translateX(13px); }
.nav-public-toggle-label {
  font-size: 0.72rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: rgba(45,72,96,0.55);
}
.nav-public-toggle-row.is-public .nav-public-toggle-label { color: #5c8c7a; }

/* Tooltip ? */
.nav-public-tooltip-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 14px; height: 14px;
  border-radius: 50%;
  background: rgba(45,72,96,0.15);
  font-size: 0.65rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  color: rgba(45,72,96,0.5);
  cursor: default;
  position: relative;
}
.nav-public-tooltip-icon:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: #1a2f3e;
  color: #fff;
  font-size: 0.72rem;
  font-weight: 400;
  padding: 0.4rem 0.65rem;
  border-radius: 6px;
  white-space: normal;
  width: 210px;
  line-height: 1.45;
  z-index: 100;
  box-shadow: 0 2px 10px rgba(0,0,0,0.15);
}

/* ===== First-time Welcome Modal ===== */
.first-welcome-content {
  max-width: 400px;
  text-align: center;
  padding: 2.5rem 2rem;
}
.first-welcome-mark {
  font-size: 1.8rem;
  color: var(--coral);
  margin-bottom: 0.75rem;
}
.first-welcome-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  color: var(--navy);
  margin: 0 0 1rem;
}
.first-welcome-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.9rem;
  color: #555;
  line-height: 1.7;
  margin: 0 0 1.5rem;
}
.first-welcome-btn { width: 100%; margin-bottom: 0.75rem; }
.first-welcome-skip {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: #aaa;
  margin: 0;
}
.first-welcome-skip a { color: #aaa; }
.first-welcome-skip a:hover { color: var(--navy); }

/* ===== Empty Stories Card ===== */
.empty-stories-card {
  background: linear-gradient(135deg, #fdf6f3 0%, #f7f4f0 100%);
  border: 1.5px dashed rgba(200,140,120,0.35);
  border-radius: 16px;
  padding: 2.5rem 2rem;
  text-align: center;
  margin: 1rem 0;
}
.empty-stories-icon {
  font-size: 1.5rem;
  color: var(--coral);
  margin-bottom: 1rem;
}
.empty-stories-prompt {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  color: var(--navy);
  line-height: 1.5;
  margin: 0 0 0.75rem;
}
.empty-stories-question {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: #777;
  line-height: 1.6;
  margin: 0 0 1.5rem;
}
.empty-stories-btn { min-width: 220px; }

/* ===== Impact Model Guide Card ===== */
.im-guide-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 0.6rem 0;
  margin-bottom: 1.25rem;
  border-bottom: 1px solid rgba(45,72,96,0.08);
}
.im-guide-header { display: none; }
.im-guide-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 0.35rem;
  flex: 1;
}
.im-guide-step {
  display: flex;
  align-items: center;
}
.im-guide-step:hover:not(.done) {}
.im-guide-check {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ddd;
  display: inline-block;
  font-size: 0;
  flex-shrink: 0;
}
.im-guide-step.done .im-guide-check {
  background: var(--green);
}
.im-guide-step-label { display: none; }
.im-guide-arrow { display: none; }
.im-guide-next-action {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  color: var(--coral);
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
}
.im-guide-next-action:hover { text-decoration: underline; }
.im-guide-dismiss {
  background: none;
  border: none;
  color: #ccc;
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  flex-shrink: 0;
}
.im-guide-dismiss:hover { color: #999; }

/* ===== Story Starters ===== */
.story-starters {
  margin-bottom: 1rem;
}
.story-starters-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 600;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin: 0 0 0.5rem;
}
.story-starters-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.starter-chip {
  background: #fdf6f3;
  border: 1px solid rgba(200,140,120,0.35);
  border-radius: 20px;
  padding: 0.35rem 0.85rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: var(--coral);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
  text-align: left;
}
.starter-chip:hover {
  background: var(--coral);
  color: #fff;
  border-color: var(--coral);
}

/* ===== About You (Account screen) ===== */
.acct-section-hint {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: #aaa;
  margin: -0.5rem 0 1rem;
}
.about-you-q {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  display: block;
  margin-bottom: 0.15rem;
}
.about-you-hint {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: #bbb;
  margin: 0 0 0.5rem;
}
.about-you-fields { display: flex; flex-direction: column; gap: 1rem; }

/* ===== About You Nudge (Dashboard) ===== */
.about-nudge {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  background: #fdf6f3;
  border: 1px solid rgba(200,140,120,0.3);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  margin-bottom: 1.25rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  color: #777;
}
.about-nudge.hidden { display: none; }
.about-nudge-icon { color: var(--coral); font-size: 0.85rem; flex-shrink: 0; }
.about-nudge-text { flex: 1; }
.about-nudge-text a { color: var(--coral); font-weight: 600; }
.about-nudge-dismiss {
  background: none; border: none; color: #ccc;
  font-size: 0.8rem; cursor: pointer; padding: 0; flex-shrink: 0;
}
.about-nudge-dismiss:hover { color: #999; }

/* ===== Vision Two-Path Selector (Onboarding) ===== */
.vision-two-paths {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.vision-path-btn {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: #fff;
  border: 1.5px solid rgba(45,72,96,0.15);
  border-radius: 12px;
  padding: 0.85rem 1rem;
  text-align: left;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
  width: 100%;
}
.vision-path-btn:hover { border-color: var(--coral); }
.vision-path-btn.selected {
  border-color: var(--coral);
  background: #fdf6f3;
}
.vision-path-icon {
  font-size: 1rem;
  color: var(--coral);
  flex-shrink: 0;
  margin-top: 0.1rem;
}
.vision-path-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
  display: block;
}
.vision-path-sub {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  color: #aaa;
  display: block;
  margin-top: 0.15rem;
}
.vision-path-btn {
  flex-direction: column;
  align-items: flex-start;
}

/* ===== Add Org Modal ===== */
.add-org-modal-content {
  max-width: 420px;
  padding: 2.25rem 2rem;
  text-align: center;
}
.add-org-icon { font-size: 1.6rem; color: var(--coral); margin-bottom: 0.75rem; }
.add-org-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem;
  color: var(--navy);
  margin: 0 0 0.75rem;
}
.add-org-body {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  color: #666;
  line-height: 1.65;
  margin: 0 0 1.25rem;
}
.add-org-features {
  list-style: none;
  margin: 0 0 1rem;
  padding: 0;
  text-align: left;
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}
.add-org-features li {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: var(--navy);
}
.add-org-upgrade-note {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  color: #bbb;
  margin: 0 0 1.25rem;
  line-height: 1.5;
}
.add-org-btn { width: 100%; }

/* ===== JOURNAL HISTORY MODAL ===== */
.journal-history-modal-content {
  background: #fff;
  border-radius: 20px;
  max-width: 620px;
  width: 92vw;
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  box-shadow: 0 20px 60px rgba(45,72,96,0.18);
}
.journal-history-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 1.5rem 1.75rem 1rem;
  border-bottom: 1px solid #f0ede8;
  flex-shrink: 0;
}
.journal-history-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.25rem;
}
.journal-history-title {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0;
  font-family: 'Playfair Display', Georgia, serif;
}
.journal-history-close {
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #aaa;
  cursor: pointer;
  padding: 0.1rem 0.3rem;
  line-height: 1;
  margin-top: 0.15rem;
  border-radius: 50%;
  transition: background 0.15s, color 0.15s;
}
.journal-history-close:hover { background: #f5f5f5; color: var(--navy); }
.journal-history-body {
  overflow-y: auto;
  padding: 1rem 1.75rem 1.5rem;
  flex: 1;
}
.journal-history-entry {
  padding: 1.1rem 0;
  border-bottom: 1px solid #f0ede8;
}
.journal-history-entry:last-child { border-bottom: none; }
.journal-history-entry-date {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.45rem;
}
.journal-history-entry-title {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.journal-history-entry-text {
  font-size: 0.9rem;
  color: #555;
  line-height: 1.7;
  white-space: pre-wrap;
}
.journal-history-empty {
  font-size: 0.9rem;
  color: #aaa;
  text-align: center;
  padding: 2rem 0;
  font-style: italic;
}

/* ===== TELL A FRIEND MODAL ===== */
.tell-a-friend-overlay {
  position: fixed;
  inset: 0;
  background: rgba(45,72,96,0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1200;
  padding: 1rem;
}
.tell-a-friend-overlay.hidden { display: none; }
.tell-a-friend-panel {
  background: #fff;
  border-radius: 20px;
  max-width: 500px;
  width: 100%;
  padding: 2rem 2rem 1.75rem;
  position: relative;
  box-shadow: 0 20px 60px rgba(45,72,96,0.18);
}
.taf-close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #aaa;
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  border-radius: 50%;
  line-height: 1;
  transition: background 0.15s;
}
.taf-close:hover { background: #f5f5f5; color: var(--navy); }
.taf-eyebrow {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.4rem;
}
.taf-title {
  font-family: 'Playfair Display', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.taf-sub {
  font-size: 0.88rem;
  color: #777;
  line-height: 1.6;
  margin-bottom: 1.5rem;
}
.taf-link-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
  align-items: center;
}
.taf-link-input {
  flex: 1;
  font-size: 0.82rem;
  color: var(--navy);
  background: #f7f5f1;
  border: 1px solid #e8e4de;
  border-radius: 10px;
  padding: 0.55rem 0.8rem;
  font-family: 'Montserrat', sans-serif;
}
.taf-copy-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 1rem;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s;
  letter-spacing: 0.04em;
}
.taf-copy-btn:hover { background: #3d6080; }
.taf-divider {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  font-size: 0.75rem;
  color: #bbb;
}
.taf-divider::before, .taf-divider::after {
  content: '';
  flex: 1;
  border-top: 1px solid #eee;
}
.taf-email-label {
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #999;
  margin-bottom: 0.5rem;
}
.taf-email-input {
  width: 100%;
  box-sizing: border-box;
  font-size: 0.88rem;
  color: var(--navy);
  border: 1px solid #e8e4de;
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 0.75rem;
  resize: none;
}
.taf-email-input:focus { outline: none; border-color: var(--green); }
.taf-send-btn {
  width: 100%;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.7rem;
  font-size: 0.88rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s;
  margin-bottom: 0.75rem;
}
.taf-send-btn:hover { background: #7aaa76; }
.taf-send-btn:disabled { opacity: 0.55; cursor: default; }
.taf-progress {
  text-align: center;
  margin-top: 0.25rem;
}
.taf-progress-label {
  font-size: 0.78rem;
  color: #aaa;
}
.taf-progress-bar-wrap {
  background: #f0ede8;
  border-radius: 10px;
  height: 5px;
  margin: 0.4rem 0 0.3rem;
  overflow: hidden;
}
.taf-progress-bar {
  background: var(--green);
  height: 100%;
  border-radius: 10px;
  transition: width 0.4s ease;
}
.taf-progress-earned {
  font-size: 0.82rem;
  color: var(--green);
  font-weight: 700;
}
.taf-confirm {
  font-size: 0.82rem;
  color: var(--green);
  font-style: italic;
  text-align: center;
  display: block;
  min-height: 1.2em;
}

/* Tell a Friend button in digest bar */
.digest-taf-btn {
  background: none;
  border: none;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #6a9ab8;
  cursor: pointer;
  padding: 0 0.5rem;
  opacity: 0.8;
  transition: opacity 0.15s;
}
.digest-taf-btn:hover { opacity: 1; }

/* ===== PRICING TRUST SECTION ===== */
.pricing-trust {
  max-width: 640px;
  margin: 2.5rem auto 0;
  padding: 1.75rem 2rem;
  background: rgba(147, 184, 143, 0.07);
  border: 1px solid rgba(147, 184, 143, 0.25);
  border-radius: 16px;
  text-align: center;
}
.pricing-trust-heading {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 1.25rem;
}
.pricing-trust-items {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem 1.5rem;
  text-align: left;
}
.pricing-trust-item {
  display: flex;
  gap: 0.6rem;
  align-items: flex-start;
  font-size: 0.82rem;
  color: #666;
  line-height: 1.55;
  font-family: 'Montserrat', sans-serif;
}
.pricing-trust-icon {
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
@media (max-width: 520px) {
  .pricing-trust-items {
    grid-template-columns: 1fr;
  }
}

/* Journal history button */
.digest-journal-history-btn {
  background: none;
  border: none;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green);
  cursor: pointer;
  padding: 0.4rem 0;
  letter-spacing: 0.04em;
  display: block;
  margin-top: 0.75rem;
  transition: opacity 0.15s;
}
.digest-journal-history-btn:hover { opacity: 0.7; }

/* Digest email message */
.digest-email-msg {
  display: block;
  font-size: 0.78rem;
  color: #999;
  font-style: italic;
  margin-top: 0.5rem;
  text-align: center;
}

/* ===== WELCOME CHALLENGE POPUP ===== */
.welcome-challenge-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 40, 50, 0.6);
  backdrop-filter: blur(4px);
  z-index: 2000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
.welcome-challenge-overlay.hidden { display: none; }

.welcome-challenge-panel {
  background: #fff;
  border-radius: 20px;
  padding: 2.5rem 2rem 2rem;
  max-width: 480px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 60px rgba(0,0,0,0.18);
}

.welcome-challenge-close {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  background: none;
  border: none;
  font-size: 1.1rem;
  color: #aaa;
  cursor: pointer;
  line-height: 1;
}
.welcome-challenge-close:hover { color: #333; }

.wc-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.5rem;
}

.wc-title {
  font-family: Georgia, serif;
  font-size: 1.6rem;
  line-height: 1.25;
  color: var(--navy);
  margin: 0 0 1rem;
}

.wc-body {
  font-size: 0.9rem;
  line-height: 1.65;
  color: #555;
  margin: 0 0 1.5rem;
}

.wc-progress-wrap {
  margin-bottom: 1.5rem;
}
.wc-progress-bar {
  height: 8px;
  background: #eee;
  border-radius: 99px;
  overflow: hidden;
  margin-bottom: 0.4rem;
}
.wc-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 99px;
  transition: width 0.4s ease;
}
.wc-progress-label {
  font-size: 0.78rem;
  color: #888;
}

.wc-badges-row {
  display: flex;
  gap: 0.75rem;
  margin-bottom: 1.75rem;
}
.wc-badge {
  flex: 1;
  background: #f5f5f5;
  border-radius: 12px;
  padding: 0.75rem 0.5rem;
  text-align: center;
  opacity: 0.45;
  transition: opacity 0.3s;
}
.wc-badge.wc-badge-earned {
  opacity: 1;
  background: #f0f8f0;
  border: 1px solid rgba(147,184,143,0.4);
}
.wc-badge-icon { font-size: 1.4rem; margin-bottom: 0.25rem; }
.wc-badge-name { font-size: 0.7rem; font-weight: 700; color: var(--navy); line-height: 1.3; margin-bottom: 0.2rem; }
.wc-badge-req { font-size: 0.65rem; color: #999; }

.wc-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.wc-btn-primary {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 12px;
  padding: 0.85rem 1.5rem;
  font-size: 0.9rem;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s;
}
.wc-btn-primary:hover { background: #1a2f45; }
.wc-btn-secondary {
  background: none;
  border: none;
  color: #aaa;
  font-size: 0.82rem;
  cursor: pointer;
  padding: 0.25rem;
  transition: color 0.15s;
}
.wc-btn-secondary:hover { color: #555; }

/* ===== LEADERBOARD SECTION ===== */
.leaderboard-section {
  margin: 1.5rem 0;
  background: #f9f8f6;
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
}
.leaderboard-section.hidden { display: none; }

.leaderboard-header {
  margin-bottom: 1rem;
}
.leaderboard-eyebrow {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.25rem;
}
.leaderboard-subtitle {
  font-size: 0.82rem;
  color: #888;
}

.leaderboard-list {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.leaderboard-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.65rem 0.75rem;
  background: #fff;
  border-radius: 10px;
  border: 1px solid #eee;
}
.leaderboard-rank {
  font-size: 0.7rem;
  font-weight: 700;
  color: #ccc;
  width: 1.2rem;
  text-align: center;
  flex-shrink: 0;
}
.leaderboard-rank-1 { color: #f5b942; }
.leaderboard-rank-2 { color: #a8a8a8; }
.leaderboard-rank-3 { color: #c6845a; }

.leaderboard-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.75rem;
  font-weight: 700;
  color: #fff;
  flex-shrink: 0;
  overflow: hidden;
}
.leaderboard-avatar img { width: 100%; height: 100%; object-fit: cover; }

.leaderboard-name {
  flex: 1;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--navy);
}
.leaderboard-role {
  font-size: 0.72rem;
  color: #aaa;
  font-weight: 400;
}

.leaderboard-count {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--green);
  flex-shrink: 0;
}
.leaderboard-count-label {
  font-size: 0.68rem;
  color: #bbb;
  font-weight: 400;
}

/* ===== How Agent Onboarding ===== */

#screen-how-agent-onboard {
  background: var(--cream, #FAF8F3);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

.ha-shell {
  max-width: 660px;
  margin: 0 auto;
  padding: 1.5rem 1.25rem 2rem;
  width: 100%;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.ha-header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.75rem;
}

.ha-header-icon {
  font-size: 1.5rem;
  color: var(--green);
  margin-top: 0.1rem;
  flex-shrink: 0;
}

.ha-header-text {
  flex: 1;
}

.ha-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.75rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.2rem;
}

.ha-subtitle {
  font-size: 0.85rem;
  color: #888;
  margin: 0;
  font-family: 'Montserrat', sans-serif;
}

/* Audio toggle button */
.ha-audio-btn {
  background: none;
  border: 1.5px solid var(--green);
  color: var(--green);
  border-radius: 50%;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  margin-top: 0.15rem;
  transition: background 0.15s, color 0.15s, opacity 0.15s;
}
.ha-audio-btn:hover { background: var(--green); color: #fff; }
.ha-audio-btn.ha-audio-off {
  border-color: #ccc;
  color: #ccc;
  opacity: 0.7;
}

/* Messages area */
.ha-messages {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 1.25rem;
  min-height: 240px;
  max-height: 52vh;
  padding-right: 0.25rem;
}

.ha-msg {
  display: flex;
}

.ha-msg-user {
  justify-content: flex-end;
}

.ha-msg-agent {
  justify-content: flex-start;
}

.ha-bubble {
  max-width: 82%;
  padding: 0.75rem 1rem;
  border-radius: 1.1rem;
  font-size: 0.9rem;
  line-height: 1.55;
  font-family: 'Montserrat', sans-serif;
}

.ha-msg-user .ha-bubble {
  background: var(--navy);
  color: #fff;
  border-bottom-right-radius: 0.25rem;
}

.ha-msg-agent .ha-bubble {
  background: #fff;
  color: var(--navy);
  border: 1px solid #e8e4db;
  border-bottom-left-radius: 0.25rem;
}

/* Thinking dots */
.ha-thinking {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 0.7rem 1rem;
  min-width: 56px;
}

.ha-thinking span {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--green);
  opacity: 0.5;
  animation: ha-dot-pulse 1.2s infinite;
}
.ha-thinking span:nth-child(2) { animation-delay: 0.2s; }
.ha-thinking span:nth-child(3) { animation-delay: 0.4s; }

@keyframes ha-dot-pulse {
  0%, 80%, 100% { opacity: 0.3; transform: scale(1); }
  40% { opacity: 1; transform: scale(1.2); }
}

/* Input row */
.ha-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: flex-end;
  background: #fff;
  border: 1px solid #ddd;
  border-radius: 0.85rem;
  padding: 0.45rem 0.45rem 0.45rem 0.6rem;
  box-shadow: 0 1px 6px rgba(45,72,96,0.07);
}

.ha-input {
  flex: 1;
  border: none;
  outline: none;
  font-size: 0.9rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--navy);
  background: transparent;
  resize: none;
  min-height: 24px;
  max-height: 120px;
  line-height: 1.5;
  padding: 0.2rem 0;
}

.ha-input::placeholder { color: #bbb; }

/* Mic button */
.ha-mic-btn {
  background: none;
  border: none;
  color: #bbb;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
  border-radius: 50%;
  transition: color 0.15s, background 0.15s;
}
.ha-mic-btn:hover { color: var(--navy); background: #f0ede6; }

.ha-mic-active {
  color: var(--coral) !important;
  background: rgba(220,80,60,0.08) !important;
  animation: ha-mic-pulse 1s ease-in-out infinite;
}

@keyframes ha-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(220,80,60,0.3); }
  50% { box-shadow: 0 0 0 6px rgba(220,80,60,0); }
}

.ha-send-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 0.6rem;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  flex-shrink: 0;
  transition: opacity 0.15s;
}
.ha-send-btn:hover { opacity: 0.88; }
.ha-send-btn:disabled { opacity: 0.45; cursor: not-allowed; }

/* Build row */
.ha-build-row {
  text-align: center;
  padding: 1.25rem 0 0.5rem;
}

.ha-build-btn {
  padding: 0.85rem 2rem;
  font-size: 0.95rem;
}

.ha-build-note {
  font-size: 0.78rem;
  color: #aaa;
  margin-top: 0.5rem;
}

/* Preview panel */
.ha-preview {
  background: #fff;
  border: 1px solid #e5e0d8;
  border-radius: 1rem;
  padding: 1.5rem;
  margin-top: 1rem;
}

.ha-preview-header {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.25rem;
}

.ha-preview-hint {
  font-size: 0.8rem;
  color: #aaa;
  margin: 0 0 1.25rem;
}

.ha-preview-section {
  margin-bottom: 1.25rem;
}

.ha-preview-label {
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--green);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 0.4rem;
}

.ha-preview-mission {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--navy);
  line-height: 1.55;
  margin: 0;
}

.hap-km {
  border-left: 2px solid var(--green);
  padding-left: 0.85rem;
  margin-bottom: 0.85rem;
}

.hap-km-title {
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.2rem;
}

.hap-km-desc {
  font-size: 0.82rem;
  color: #666;
  line-height: 1.5;
}

.ha-preview-actions {
  display: flex;
  align-items: center;
  gap: 1.25rem;
  margin-top: 1.5rem;
}

.ha-back-link {
  font-size: 0.82rem;
  color: #aaa;
  text-decoration: none;
}
.ha-back-link:hover { color: var(--green); }

/* Footer */
.ha-footer {
  text-align: center;
  padding-top: 1.25rem;
}

.ha-skip-link {
  font-size: 0.8rem;
  color: #bbb;
  text-decoration: none;
  transition: color 0.15s;
}
.ha-skip-link:hover { color: var(--navy); }

/* How Agent companion card (on dashboard) */
/* Thinking Lab companion card — the single CTA to enter the Lab from
   the personal home. Branded in the Lab's signature blue so the entry
   matches the destination. */
.ha-companion-card {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: linear-gradient(165deg, #cfdfec 0%, #b6cdde 100%);
  border: 1px solid rgba(108, 149, 179, 0.45);
  border-radius: 0.9rem;
  padding: 1rem 1.25rem;
  margin: 2.4rem auto 1.5rem; /* breathing room above so it doesn't run into the org buttons */
  max-width: 660px;
  cursor: pointer;
  transition: box-shadow 0.18s, background 0.18s, transform 0.12s;
  box-shadow: 0 2px 10px rgba(45, 72, 96, 0.08);
}
.ha-companion-card:hover {
  background: linear-gradient(165deg, #c6d8e7 0%, #aac4d6 100%);
  box-shadow: 0 4px 16px rgba(45, 72, 96, 0.14);
  transform: translateY(-1px);
}

.ha-companion-card.ha-companion-active {
  border-color: rgba(108, 149, 179, 0.8);
  animation: ha-card-pulse 2.8s ease-in-out infinite;
}

@keyframes ha-card-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(108, 149, 179, 0.22); }
  50% { box-shadow: 0 0 0 6px rgba(108, 149, 179, 0); }
}

/* Notification dot */
.ha-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--navy);
  flex-shrink: 0;
  order: -1;
  animation: ha-dot-breathe 2s ease-in-out infinite;
}

@keyframes ha-dot-breathe {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.6; transform: scale(0.85); }
}

.ha-companion-icon {
  font-size: 1.5rem;
  color: #fff;
  flex-shrink: 0;
  text-shadow: 0 1px 2px rgba(45,72,96,0.18);
}

/* Make the notification dot read against the blue card background */
.ha-companion-card .ha-dot {
  background: #fff;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.35);
}

/* Open up the companion card a bit so the line of italic text breathes
   between the white icon and the white pulsing dot. */
.ha-companion-card {
  padding: 1.35rem 1.5rem;
  gap: 1.1rem;
}

.ha-companion-body {
  flex: 1;
}

.ha-companion-label {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
  margin-bottom: 0.2rem;
}

.ha-companion-teaser {
  font-size: 0.88rem;
  color: var(--navy);
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  line-height: 1.45;
}

.ha-companion-arrow {
  color: var(--green);
  font-size: 1.1rem;
  flex-shrink: 0;
}

/* Companion done row */
.ha-done-row {
  text-align: center;
  padding: 1.5rem 0 0.5rem;
}

.ha-done-msg {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: var(--navy);
  margin: 0 0 1rem;
}

/* Memory count link */
.ha-memory-link {
  font-size: 0.75rem;
  color: #bbb;
  text-decoration: none;
  transition: color 0.15s;
}
.ha-memory-link:hover { color: var(--green); }

/* ── Web Import Modal ──────────────────────────────────────────────────── */

.wi-overlay {
  position: fixed;
  inset: 0;
  background: rgba(30, 40, 55, 0.55);
  z-index: 1200;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}

.wi-panel {
  background: #fff;
  border-radius: 14px;
  width: 100%;
  max-width: 600px;
  max-height: 88vh;
  overflow-y: auto;
  box-shadow: 0 16px 48px rgba(30,40,55,0.22);
  padding: 2rem 2rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.wi-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}

.wi-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.2rem;
}

.wi-sub {
  font-size: 0.85rem;
  color: var(--text-light);
  margin: 0;
}

.wi-close {
  background: transparent;
  border: none;
  font-size: 1rem;
  color: #bbb;
  cursor: pointer;
  padding: 0.2rem;
  flex-shrink: 0;
  line-height: 1;
}
.wi-close:hover { color: var(--navy); }

.wi-url-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}

.wi-url-input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.85rem;
  font-size: 0.9rem;
  font-family: 'Montserrat', sans-serif;
  outline: none;
  transition: border-color 0.15s;
}
.wi-url-input:focus { border-color: var(--green); }

.wi-hint {
  font-size: 0.78rem;
  color: var(--text-light);
  margin: 0.4rem 0 0;
  line-height: 1.5;
}

/* Loading */
.wi-loading-dots {
  display: flex;
  gap: 0.4rem;
  justify-content: center;
  margin: 1.5rem 0 0.75rem;
}
.wi-loading-dots span {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--green);
  animation: ha-think-bounce 1.2s infinite ease-in-out both;
}
.wi-loading-dots span:nth-child(1) { animation-delay: -0.32s; }
.wi-loading-dots span:nth-child(2) { animation-delay: -0.16s; }

.wi-loading-msg {
  text-align: center;
  font-size: 0.88rem;
  color: var(--text-light);
  margin: 0;
}

/* Results */
.wi-results-intro {
  font-size: 0.88rem;
  color: var(--text-light);
  margin: 0;
}

.wi-story-list {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  max-height: 45vh;
  overflow-y: auto;
}

.wi-story-card {
  display: flex;
  align-items: flex-start;
  gap: 0.75rem;
  background: var(--cream);
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.9rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.wi-story-card:has(.wi-story-check:checked) {
  border-color: var(--green);
  background: #f4fbf6;
}

.wi-story-check {
  margin-top: 0.2rem;
  accent-color: var(--green);
  width: 16px;
  height: 16px;
  flex-shrink: 0;
}

.wi-story-body {
  flex: 1;
  min-width: 0;
}

.wi-story-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.2rem;
}

.wi-story-narrative {
  font-size: 0.83rem;
  color: var(--text-light);
  margin: 0 0 0.4rem;
  line-height: 1.55;
}

.wi-story-km {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(141,184,138,0.12);
  border-radius: 20px;
  padding: 0.1rem 0.55rem;
  margin-right: 0.4rem;
}

.wi-story-date {
  font-size: 0.72rem;
  color: #bbb;
}

.wi-results-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  padding-top: 0.5rem;
}

.wi-error-msg {
  font-size: 0.9rem;
  color: #c06050;
  margin: 0 0 1rem;
}

/* ── Inline How Agent (onboarding step 1 chat mode) ── */

.ob-ha-header {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  margin-bottom: 1.1rem;
}

.ob-ha-icon {
  font-size: 1.3rem;
  color: var(--green);
  line-height: 1;
  margin-top: 0.15rem;
  flex-shrink: 0;
}

.ob-ha-title-wrap {
  flex: 1;
}

.ob-ha-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.4rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.15rem;
}

.ob-ha-sub {
  font-size: 0.85rem;
  color: var(--text-light);
  margin: 0;
}

.ob-ha-audio-btn {
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--text-light);
  padding: 0.25rem;
  border-radius: 4px;
  transition: color 0.15s;
  flex-shrink: 0;
}
.ob-ha-audio-btn:hover { color: var(--navy); }
.ob-ha-audio-btn.ha-audio-off { color: #ccc; }

.ob-ha-messages {
  min-height: 160px;
  max-height: 320px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin-bottom: 0.85rem;
  padding: 0.25rem 0;
}

.ob-ha-input-row {
  display: flex;
  align-items: flex-end;
  gap: 0.5rem;
  background: #f7f7f5;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.45rem 0.5rem;
}

.ob-ha-build-row {
  text-align: center;
  padding: 1rem 0 0.25rem;
}

/* Onboarding: How Agent alt path */
.onboarding-ha-alt {
  text-align: center;
  margin-top: 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  color: #bbb;
  font-size: 0.82rem;
}

.onboarding-ha-link {
  color: var(--green);
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 500;
}

/* ===== Personal Landing Page ===== */

/* Centered hero: photo + name + tagline */
.personal-landing-hero {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 3.5rem 2rem 2.5rem;
  background: linear-gradient(160deg, #f5f9f5 0%, #fdfaf8 55%, #fff5f2 100%);
  border-bottom: 1px solid var(--green-soft);
}

/* WD + PM circles — top right corner */
.personal-landing-utils {
  position: absolute;
  top: 1.25rem;
  right: 1.5rem;
  display: flex;
  gap: 1rem;
  align-items: flex-start;
}

/* Make photo circle larger on the landing hero */
.personal-landing-hero .personal-photo-circle {
  width: 108px;
  height: 108px;
  border-width: 3px;
  margin-bottom: 1rem;
  box-shadow: 0 4px 20px rgba(45,72,96,0.12);
}

.personal-landing-hero .personal-photo-initials {
  font-size: 2.4rem;
}

.personal-landing-hero .personal-greeting {
  margin-bottom: 0.25rem;
}

.personal-landing-hero .personal-name {
  font-size: 2.2rem;
  margin-bottom: 0.4rem;
}

.personal-landing-hero .personal-tagline {
  font-size: 1.1rem;
  max-width: 480px;
  margin-bottom: 0.75rem;
}

.personal-landing-hero .personal-metrics {
  justify-content: center;
  margin-top: 0.25rem;
}

/* Photo circle and name are subtly clickable — hint you can go into the model */
.personal-hero-clickable {
  cursor: pointer;
}
.personal-landing-hero .personal-photo-circle.personal-hero-clickable:hover {
  box-shadow: 0 4px 20px rgba(45,72,96,0.22), 0 0 0 3px var(--green-soft);
  transition: box-shadow 0.18s;
}
.personal-landing-hero .personal-name.personal-hero-clickable:hover {
  color: var(--green);
  transition: color 0.15s;
}

/* ===== Context Cards: where you carry your how ===== */

.personal-ctx-section {
  padding: 2.5rem 3rem 1.5rem;
  background: var(--cream);
}

.personal-ctx-eyebrow {
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  color: var(--text-light);
  margin-bottom: 1.25rem;
}

.personal-ctx-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 1.1rem;
  margin-bottom: 1.25rem;
}

/* Individual context card */
.personal-ctx-card {
  background: #fff;
  border-radius: var(--radius);
  border: 1px solid var(--border);
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease;
  box-shadow: 0 2px 8px rgba(45,72,96,0.06);
  display: flex;
  flex-direction: column;
}

.personal-ctx-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(45,72,96,0.13);
}

/* Color strip — top of each card, uses --ctx-color */
.personal-ctx-strip {
  height: 5px;
  background: var(--ctx-color, var(--navy));
  flex-shrink: 0;
}

/* Card body */
.personal-ctx-inner {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding: 1.1rem 1.1rem 1rem;
}

/* Logo circle / org initial */
.personal-ctx-logo {
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--ctx-color, var(--navy));
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  flex-shrink: 0;
  overflow: hidden;
}

.personal-ctx-logo img,
.personal-ctx-logo-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.personal-ctx-logo-initial {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: #fff;
}

/* Name + meta stack */
.personal-ctx-details {
  flex: 1;
  min-width: 0;
}

.personal-ctx-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.personal-ctx-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.3rem;
  align-items: center;
}

.personal-ctx-type {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-light);
}

.personal-ctx-role {
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #fff;
  background: var(--ctx-color, var(--navy));
  border-radius: 20px;
  padding: 0.1rem 0.55rem;
}

/* Right side: story count + arrow */
.personal-ctx-right {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.2rem;
  flex-shrink: 0;
}

.personal-ctx-count {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1;
}

.personal-ctx-count-label {
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-light);
}

.personal-ctx-arrow {
  font-size: 1rem;
  color: var(--ctx-color, var(--navy));
  margin-top: 0.4rem;
  opacity: 0.7;
  transition: opacity 0.15s, transform 0.15s;
}

.personal-ctx-card:hover .personal-ctx-arrow {
  opacity: 1;
  transform: translateX(3px);
}

/* Empty state */
.personal-ctx-empty {
  grid-column: 1 / -1;
  text-align: center;
  padding: 2rem 1rem;
  color: var(--text-light);
  font-size: 0.9rem;
  font-style: italic;
}

/* Action buttons below the grid */
.personal-ctx-actions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
}

.personal-ctx-add-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: #fff;
  background: var(--green);
  border: 1.5px solid var(--green);
  border-radius: 20px;
  padding: 0.4rem 1rem;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s, transform 0.1s;
  box-shadow: 0 2px 6px rgba(141, 184, 138, 0.28);
}

.personal-ctx-add-btn:hover {
  background: #7aa776;
  border-color: #7aa776;
  transform: translateY(-1px);
}

/* Responsive: single column on narrow screens */
@media (max-width: 640px) {
  .personal-landing-hero {
    padding: 2.5rem 1.25rem 2rem;
  }
  .personal-landing-utils {
    top: 0.75rem;
    right: 0.75rem;
    gap: 0.6rem;
  }
  .personal-ctx-section {
    padding: 2rem 1.25rem 1.25rem;
  }
  .personal-ctx-grid {
    grid-template-columns: 1fr;
  }
}
.onboarding-ha-link:hover { text-decoration: underline; }

/* ===== How Agent Drawer (compact floating panel) ===== */
.ha-drawer {
  position: fixed;
  bottom: 5.5rem;
  right: 2rem;
  width: 360px;
  max-width: calc(100vw - 2rem);
  max-height: 480px;
  background: #fff;
  border-radius: 16px;
  box-shadow: 0 8px 40px rgba(45, 72, 96, 0.18);
  display: flex;
  flex-direction: column;
  z-index: 910;
  overflow: hidden;
  border: 1px solid rgba(45, 72, 96, 0.1);
  animation: ha-drawer-in 0.22s ease;
}
.ha-drawer.hidden { display: none; }

@keyframes ha-drawer-in {
  from { opacity: 0; transform: translateY(12px) scale(0.97); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

.ha-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  background: var(--navy);
  color: #fff;
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
}
.ha-drawer-title {
  font-size: 0.9rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.ha-drawer-icon {
  color: var(--coral);
  font-size: 1rem;
}
.ha-drawer-close {
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0.2rem;
  transition: color 0.15s;
}
.ha-drawer-close:hover { color: #fff; }

.ha-drawer-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  min-height: 200px;
  background: #fafafa;
}

.ha-drawer-input-row {
  display: flex;
  align-items: flex-end;
  gap: 0.4rem;
  padding: 0.6rem 0.75rem;
  border-top: 1px solid rgba(45, 72, 96, 0.08);
  background: #fff;
  flex-shrink: 0;
}
.ha-drawer-input-row .ha-input {
  flex: 1;
  font-size: 0.88rem;
  padding: 0.5rem 0.7rem;
  min-height: 36px;
  max-height: 100px;
}

/* Pulsing FAB when How Agent is available */
.chat-fab.ha-fab-pulse {
  animation: ha-fab-pulse 2.4s ease-in-out infinite;
}
@keyframes ha-fab-pulse {
  0%, 100% { box-shadow: 0 4px 16px rgba(232, 168, 152, 0.45); }
  50% { box-shadow: 0 4px 24px rgba(232, 168, 152, 0.8), 0 0 0 8px rgba(232, 168, 152, 0.15); }
}

@media (max-width: 480px) {
  .ha-drawer {
    right: 0;
    bottom: 4.5rem;
    width: 100vw;
    max-width: 100vw;
    border-radius: 16px 16px 0 0;
  }
}

/* ── Product Tour ──────────────────────────────────────── */
.tour-backdrop {
  position: fixed; inset: 0; z-index: 8998;
}
.tour-spotlight {
  position: fixed; z-index: 8999;
  border-radius: 10px;
  box-shadow: 0 0 0 9999px rgba(10,16,32,0.58);
  pointer-events: none;
  transition: top 0.32s ease, left 0.32s ease, width 0.32s ease, height 0.32s ease;
}
.tour-bubble {
  position: fixed; z-index: 9000;
  background: #fff;
  border-radius: 14px;
  padding: 1.2rem 1.4rem 1rem;
  width: 270px;
  box-shadow: 0 8px 36px rgba(0,0,0,0.16), 0 2px 8px rgba(0,0,0,0.07);
  font-family: 'Montserrat', sans-serif;
  transition: top 0.32s ease, left 0.32s ease;
}
.tour-bubble.tour-centered {
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 310px;
  text-align: center;
}
.tour-bubble.tour-centered .tour-bubble-actions { justify-content: center; }
.tour-bubble.tour-centered .tour-btn-skip { display: none; }
.tour-step-dots {
  display: flex; gap: 5px; margin-bottom: 0.7rem;
}
.tour-bubble.tour-centered .tour-step-dots { justify-content: center; }
.tour-step-dot {
  width: 6px; height: 6px; border-radius: 50%; background: #e8e8e8;
  transition: background 0.2s;
}
.tour-step-dot.active { background: #e8a898; }
.tour-bubble-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem; font-weight: 700;
  color: #1a2340; margin-bottom: 0.35rem;
}
.tour-bubble-text {
  font-size: 0.82rem; color: #555; line-height: 1.56;
  margin-bottom: 0.9rem;
}
.tour-bubble-actions {
  display: flex; align-items: center; justify-content: space-between;
}
.tour-btn-next {
  background: #e8a898; color: #fff; border: none;
  border-radius: 20px; padding: 0.42rem 1.15rem;
  font-size: 0.82rem; font-weight: 600; cursor: pointer;
  font-family: 'Montserrat', sans-serif; letter-spacing: 0.01em;
}
.tour-btn-next:hover { background: #d4857a; }
.tour-btn-skip {
  font-size: 0.77rem; color: #c0c0c0; background: none;
  border: none; cursor: pointer; font-family: 'Montserrat', sans-serif; padding: 0;
}
.tour-btn-skip:hover { color: #888; }

/* ── Mission/Vision inline edit ───────────────────────── */
.im-evolving-badge {
  font-size: 0.62rem; font-weight: 500; color: #c4a882;
  background: #fdf6ef; border-radius: 8px; padding: 0.1rem 0.45rem;
  font-family: 'Montserrat', sans-serif; letter-spacing: 0.02em;
  vertical-align: middle; margin-left: 0.35rem;
}
.im-editable {
  cursor: text; border-radius: 6px; padding: 0.3rem 0.4rem; margin: -0.3rem -0.4rem;
  transition: background 0.15s;
  outline: none;
}
.im-editable:hover { background: rgba(232,168,152,0.08); }
.im-editable:focus { background: rgba(232,168,152,0.12); }
.im-editable-empty::before {
  content: attr(data-placeholder);
  color: #bbb; font-style: italic; pointer-events: none;
}
.im-editable-empty:focus::before { display: none; }

/* ── Ideas page ───────────────────────────────────────── */
.ideas-page-card {
  background: #fff; border: 1px solid #f0f0f0; border-radius: 10px;
  padding: 1rem 1.1rem; margin-bottom: 0.75rem;
  box-shadow: 0 1px 4px rgba(0,0,0,0.04);
}
.ideas-page-text {
  font-size: 0.9rem; color: #333; line-height: 1.55; margin: 0 0 0.5rem;
}
.ideas-page-meta {
  display: flex; align-items: center; justify-content: space-between;
}
.ideas-page-date { font-size: 0.75rem; color: #bbb; }
.ideas-delete-btn {
  font-size: 0.75rem; color: #ccc; background: none; border: none;
  cursor: pointer; padding: 0; line-height: 1;
}
.ideas-delete-btn:hover { color: #e57373; }
.ideas-group { margin-bottom: 2rem; }
.ideas-group-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem; font-weight: 700; color: var(--navy);
  margin-bottom: 0.75rem; padding-bottom: 0.4rem;
  border-bottom: 1px solid #f0f0f0;
}
.idea-see-all {
  display: block; text-align: center; font-size: 0.8rem;
  color: var(--coral); margin-top: 0.5rem; text-decoration: none;
}

/* Headshot upload wrapper */
.headshot-upload-wrap {
  position: relative;
  display: inline-block;
  cursor: pointer;
}
.headshot-camera-hint {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  margin-top: 6px;
  font-size: 0.72rem;
  color: var(--coral);
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity 0.2s;
}
.headshot-upload-wrap:hover .headshot-camera-hint { opacity: 0.75; }

/* WD / PM circles inline with profile statement */
.profile-wd-pm-row {
  display: flex;
  gap: 0.5rem;
  margin-top: 0.75rem;
}
.profile-wd-pm-stacked {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  position: fixed;
  right: 2.5rem;
  /* Anchor below the entire top-nav-wrap (nav row ~74px + wave 18vh).
     Earlier calc(18vh + 1rem) only cleared the wave image, missing
     the nav row above it, so DD still sat under the wrap's solid
     cream background. */
  top: calc(18vh + 5.5rem);
  z-index: 110; /* above the sticky top-nav wave (z:100) so they're not cut off */
}
.profile-pill-lg {
  height: 46px;
  max-width: 46px;
  padding: 0 0.8rem;
  font-size: 0.9rem;
}
.profile-pill-lg:hover { max-width: 290px; }
.profile-circle-lg {
  width: 46px;
  height: 46px;
  font-size: 0.9rem;
}

/* Add-org card */
.kate-card-add {
  border: 1.5px dashed rgba(141,184,138,0.55);
  background: transparent;
  opacity: 0.75;
  transition: opacity 0.2s, border-color 0.2s;
}
.kate-card-add:hover { opacity: 1; border-color: var(--green); background: rgba(141,184,138,0.04); }
.kate-card-add-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100%;
  min-height: 160px;
  gap: 0.6rem;
}
.kate-card-add-icon {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(141,184,138,0.3);
  display: flex;
  align-items: center;
  justify-content: center;
}
.kate-card-add-label {
  font-size: 0.8rem;
  font-weight: 600;
  color: rgba(141,184,138,0.9);
  margin: 0;
}

/* ── Pattern Spotter / Ready to Share ─────────────────────── */
.digest-rts-section {
  margin: 2rem 0;
  padding: 1.5rem;
  background: linear-gradient(135deg, #fdfcf9, #f8f6f2);
  border: 1.5px solid rgba(45,72,96,0.1);
  border-radius: 16px;
}
.digest-rts-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 0.3rem;
}
.digest-rts-sub {
  font-size: 0.85rem;
  color: #888;
  margin: 0 0 1.25rem;
}
.digest-rts-loading .digest-rts-sub { font-style: italic; }
.digest-rts-card {
  background: #fff;
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin-bottom: 1rem;
  border: 1px solid rgba(45,72,96,0.08);
}
.rts-pattern-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.rts-pattern-desc {
  font-size: 0.88rem;
  color: #555;
  margin-bottom: 0.5rem;
}
.rts-evidence {
  font-size: 0.75rem;
  color: #aaa;
  margin-bottom: 0.85rem;
  font-style: italic;
}
.rts-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.rts-tab {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: none;
  border: 1.5px solid #ddd;
  border-radius: 20px;
  padding: 0.25rem 0.75rem;
  cursor: pointer;
  color: #aaa;
  transition: all 0.15s;
}
.rts-tab.active { border-color: var(--navy); color: var(--navy); }
.rts-post {
  font-size: 0.88rem;
  line-height: 1.6;
  color: var(--navy);
  white-space: pre-wrap;
  background: #f9f9f9;
  border-radius: 8px;
  padding: 1rem;
  margin-bottom: 0.6rem;
  max-height: 220px;
  overflow-y: auto;
}
.rts-post-actions { display: flex; gap: 0.75rem; }
.rts-copy-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.35rem 1rem;
  cursor: pointer;
  transition: opacity 0.15s;
}
.rts-copy-btn:hover { opacity: 0.85; }
.rts-data-picture {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid #f0f0f0;
}
.rts-dp-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.3rem;
}
.rts-dp-question {
  font-size: 0.85rem;
  color: #555;
  margin-bottom: 0.6rem;
  font-style: italic;
}
.rts-dp-input {
  width: 100%;
  border: 1.5px solid #e0e0e0;
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  font-size: 0.85rem;
  outline: none;
  box-sizing: border-box;
  margin-bottom: 0.5rem;
}
.rts-dp-input:focus { border-color: var(--green); }
.rts-dp-save {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.35rem 1rem;
  cursor: pointer;
}
.rts-refresh-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  color: #aaa;
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.25rem 0;
  margin-top: 0.25rem;
}
.rts-refresh-btn:hover { color: var(--navy); }

/* ── Trending Topics Chips ───────────────────────────────── */
.digest-trending-wrap {
  margin: 0.5rem 0 1.25rem;
  padding: 0 0.25rem;
}
.digest-trending-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #aaa;
  margin-bottom: 0.5rem;
}
.digest-trending-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
}
.digest-trend-chip {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--navy);
  background: rgba(45,72,96,0.07);
  border-radius: 20px;
  padding: 0.25rem 0.7rem;
  letter-spacing: 0.02em;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  border: 1px solid rgba(45,72,96,0.12);
}
.digest-trend-chip:hover {
  background: var(--navy);
  color: white;
}

/* ── Notes Hub ───────────────────────────────────────────── */
.notes-hub-wrap { padding-top: 2rem; padding-bottom: 4rem; }
.notes-hub-header { margin-bottom: 1.5rem; }
.notes-hub-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 700;
  color: var(--navy);
  margin: 0 0 0.35rem;
}
.notes-hub-sub {
  font-size: 0.88rem;
  color: #888;
  margin: 0;
}
.notes-hub-tabs {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
.notes-tab {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  background: none;
  border: 1.5px solid #ddd;
  border-radius: 20px;
  padding: 0.3rem 0.9rem;
  cursor: pointer;
  color: #aaa;
  transition: all 0.15s;
}
.notes-tab.active { border-color: var(--navy); color: var(--navy); background: rgba(45,72,96,0.05); }
.notes-hub-list { display: flex; flex-direction: column; gap: 0.75rem; }
.notes-hub-empty { color: #aaa; font-size: 0.88rem; font-style: italic; }
.notes-hub-item {
  padding: 1rem 1.25rem;
  border-radius: 12px;
  background: #fff;
  border: 1px solid rgba(45,72,96,0.08);
}
.notes-hub-item-journal { border-left: 3px solid var(--coral); }
.notes-hub-item-day { border-left: 3px solid var(--green); }
.notes-hub-item-meta {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  margin-bottom: 0.4rem;
}
.notes-hub-item-date {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.notes-hub-item-kind {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ccc;
}
.notes-hub-item-text {
  font-size: 0.9rem;
  color: var(--navy);
  line-height: 1.55;
}

/* ── Thought Board ────────────────────────────────────────── */
.digest-thought-board {
  margin-top: 1rem;
}
.dtb-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.25rem;
}
.dtb-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--navy);
}
.dtb-view-link {
  font-size: 0.75rem;
  color: var(--green);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
.dtb-view-link:hover { text-decoration: underline; }
.dtb-category {
  margin-bottom: 1.1rem;
  cursor: pointer;
}
.dtb-category:last-child { margin-bottom: 0; }
.dtb-cat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-right: 0.4rem;
}
.dtb-cat-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(147,184,143,0.25);
  font-size: 0.6rem;
  font-weight: 700;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.dtb-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-top: 0.4rem;
}
.dtb-chip {
  padding: 0.3rem 0.7rem;
  border-radius: 20px;
  font-size: 0.77rem;
  line-height: 1.4;
  font-family: 'Montserrat', sans-serif;
}
.dtb-chip-idea {
  background: rgba(141,184,138,0.13);
  color: var(--navy);
  border: 1px solid rgba(141,184,138,0.28);
}
.dtb-chip-note {
  background: rgba(220,160,155,0.1);
  color: var(--navy);
  border: 1px solid rgba(220,160,155,0.28);
}
.dtb-chip-journal {
  background: rgba(45,72,96,0.06);
  color: var(--navy);
  border: 1px solid rgba(45,72,96,0.12);
}
.dtb-chip-more {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed rgba(45,72,96,0.2);
  font-style: italic;
}
.dtb-analyze-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--green);
  text-decoration: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
.dtb-analyze-link:hover { text-decoration: underline; }

/* ── Digest: Quote of the Week ────────────────────────────── */
.digest-quote-block {
  margin: 1.25rem auto 0;
  max-width: 520px;
  text-align: center;
}
.digest-quote-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.6;
  margin-bottom: 0.4rem;
  opacity: 0.85;
}
.digest-quote-attr {
  font-size: 0.75rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--text-muted);
  font-weight: 600;
  letter-spacing: 0.05em;
}

/* ── Digest: What are you thinking about? ──────────────────── */
.digest-thinking-box {
  margin: 0 0 1.5rem;
  padding: 1rem 1.3rem;
  background: white;
  border: 1.5px solid var(--border);
  border-radius: 12px;
}
.digest-thinking-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.6rem;
  letter-spacing: 0.03em;
}
.digest-thinking-input-wrap { position: relative; }
.digest-thinking-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 8px;
  padding: 0.55rem 0.9rem;
  font-size: 0.92rem;
  font-family: inherit;
  outline: none;
  box-sizing: border-box;
  transition: border-color 0.15s;
}
.digest-thinking-input:focus { border-color: var(--navy); }
.digest-thinking-flash {
  font-size: 0.78rem;
  color: var(--green);
  margin-top: 0.4rem;
  font-weight: 600;
}

/* ── Digest: Focus Plan ────────────────────────────────────── */
.digest-focus-plan {
  margin: 1.5rem 0;
  padding: 1.2rem 1.4rem;
  background: linear-gradient(135deg, rgba(45,72,96,0.04), rgba(45,72,96,0.02));
  border: 1.5px solid rgba(45,72,96,0.12);
  border-left: 4px solid var(--navy);
  border-radius: 12px;
}
.digest-focus-list { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.55rem; }
.digest-focus-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.5;
}
.digest-focus-dot {
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--navy);
  margin-top: 0.45rem;
}

/* ── Digest: Story of the Week spotlight ───────────────────── */
.digest-story-spotlight {
  margin: 1.5rem 0;
  padding: 1.4rem 1.6rem;
  background: white;
  border: 1px solid var(--border);
  border-top: 4px solid var(--green);
  border-radius: 14px;
  box-shadow: 0 2px 12px var(--shadow);
  cursor: pointer;
  transition: transform 0.15s, box-shadow 0.15s;
}
.digest-story-spotlight:hover { transform: translateY(-2px); box-shadow: 0 6px 22px var(--shadow); }
.dss-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.5rem;
}
.dss-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.35rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.3rem;
  line-height: 1.3;
}
.dss-date {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-bottom: 0.7rem;
  font-family: 'Montserrat', sans-serif;
}
.dss-excerpt {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.65;
  margin-bottom: 0.9rem;
}
.dss-cta {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--green);
  font-family: 'Montserrat', sans-serif;
}

/* ── Digest: KM Momentum ────────────────────────────────────── */
.digest-km-momentum { margin-top: 0.75rem; display: flex; flex-direction: column; gap: 0.4rem; }
.dkm-row {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.45rem 0.7rem;
  border-radius: 8px;
  font-size: 0.87rem;
}
.dkm-active { background: rgba(141,184,138,0.1); }
.dkm-quiet  { background: rgba(45,72,96,0.04); }
.dkm-dot {
  width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0;
}
.dkm-active .dkm-dot { background: var(--green); }
.dkm-quiet  .dkm-dot { background: rgba(45,72,96,0.25); }
.dkm-title { flex: 1; color: var(--text); font-weight: 500; }
.dkm-count { font-size: 0.77rem; color: var(--text-muted); white-space: nowrap; }

/* ── Digest: streak badge ─────────────────────────────────── */
.digest-streak-badge {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.7rem 1.1rem;
  background: rgba(141, 184, 138, 0.1);
  border-left: 3px solid var(--green);
  border-radius: 0 8px 8px 0;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.dsb-flame { font-size: 1.05rem; flex-shrink: 0; }
.dsb-count {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--navy);
}
.dsb-msg {
  font-size: 0.8rem;
  color: rgba(45,72,96,0.6);
}

/* ── Digest: archive stats line ───────────────────────────── */
.digest-archive-stats {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  color: rgba(45,72,96,0.5);
  letter-spacing: 0.04em;
  text-align: center;
  margin: 0 0 1.25rem;
}

/* ── Digest: daily leadership line ───────────────────────── */
.digest-daily-line {
  background: rgba(45,72,96,0.04);
  border-radius: 10px;
  padding: 1rem 1.2rem;
  margin-bottom: 1.25rem;
}
.ddl-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.4);
  margin-bottom: 0.3rem;
}
.ddl-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--navy);
  margin-bottom: 0.25rem;
}
.ddl-desc {
  font-size: 0.84rem;
  color: rgba(45,72,96,0.68);
  line-height: 1.5;
}

/* ── Digest: on this day ──────────────────────────────────── */
.digest-on-this-day {
  background: rgba(210, 120, 100, 0.06);
  border-left: 3px solid var(--coral);
  border-radius: 0 10px 10px 0;
  padding: 1rem 1.2rem;
  margin-bottom: 1.25rem;
  cursor: pointer;
  transition: background 0.15s;
}
.digest-on-this-day:hover { background: rgba(210, 120, 100, 0.12); }
.otd-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral);
  margin-bottom: 0.2rem;
}
.otd-years {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.76rem;
  color: rgba(45,72,96,0.55);
  margin-bottom: 0.3rem;
}
.otd-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.98rem;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.otd-excerpt {
  font-size: 0.84rem;
  color: rgba(45,72,96,0.72);
  line-height: 1.55;
  margin-bottom: 0.5rem;
}
.otd-cta {
  font-size: 0.77rem;
  font-weight: 600;
  color: var(--coral);
}

/* ── Digest: story ready to share ────────────────────────── */
.digest-share-card {
  background: white;
  border: 1.5px solid rgba(141, 184, 138, 0.45);
  border-radius: 12px;
  padding: 1.2rem 1.25rem;
  margin-bottom: 1.25rem;
}
.dsc-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.67rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.25rem;
}
.dsc-hint {
  font-size: 0.77rem;
  color: rgba(45,72,96,0.5);
  margin-bottom: 0.7rem;
}
.dsc-post {
  font-size: 0.86rem;
  color: var(--navy);
  line-height: 1.65;
  white-space: pre-wrap;
  margin-bottom: 0.9rem;
}
.dsc-actions { display: flex; gap: 0.75rem; }
.dsc-copy-btn {
  background: var(--green);
  color: white;
  border: none;
  border-radius: 20px;
  padding: 0.42rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.77rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.dsc-copy-btn:hover { background: #5f9a5a; }

/* ── Prepare Me: suggested prompts ────────────────────────── */
.pm-suggestions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
  margin: 0.75rem 0 0.25rem;
}
.pm-suggestion-pill {
  background: rgba(45,72,96,0.07);
  border: 1px solid rgba(45,72,96,0.15);
  border-radius: 20px;
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--navy);
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
.pm-suggestion-pill:hover {
  background: rgba(45,72,96,0.13);
  border-color: rgba(45,72,96,0.3);
}

/* ── Prepare Me: follow-up Q&A ─────────────────────────────── */
.briefing-followup-wrap {
  margin: 1.5rem 0 0;
  border-top: 1px solid rgba(45,72,96,0.1);
  padding-top: 1.2rem;
}
.briefing-followup-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--navy);
  margin-bottom: 0.75rem;
}
.briefing-followup-thread {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin-bottom: 0.9rem;
  max-height: 280px;
  overflow-y: auto;
}
.bf-question {
  align-self: flex-end;
  background: var(--navy);
  color: white;
  padding: 0.6rem 1rem;
  border-radius: 14px 14px 4px 14px;
  font-size: 0.88rem;
  max-width: 80%;
  line-height: 1.5;
}
.bf-answer {
  align-self: flex-start;
  background: rgba(141,184,138,0.1);
  border: 1px solid rgba(141,184,138,0.3);
  padding: 0.7rem 1rem;
  border-radius: 4px 14px 14px 14px;
  font-size: 0.88rem;
  max-width: 90%;
  line-height: 1.6;
  color: var(--text);
}
.bf-loading { color: var(--text-muted); font-style: italic; }
.briefing-followup-input-row { display: flex; gap: 0.5rem; }
.briefing-followup-input {
  flex: 1;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 0.55rem 0.9rem;
  font-size: 0.88rem;
  font-family: inherit;
  outline: none;
  transition: border-color 0.15s;
}
.briefing-followup-input:focus { border-color: var(--navy); }
.briefing-followup-btn {
  background: var(--navy);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 0.55rem 1rem;
  font-size: 1rem;
  cursor: pointer;
  transition: background 0.15s;
}
.briefing-followup-btn:hover { background: var(--green); }

/* ── Personal profile: patterns band ──────────────────────── */
.personal-patterns-band {
  margin: 2rem 0;
  padding: 0;
}
.personal-patterns-header { margin-bottom: 1.25rem; }
.personal-patterns-sub {
  font-size: 0.88rem;
  color: var(--text-muted);
  margin-top: 0.25rem;
}
.personal-pattern-card {
  background: white;
  border: 1px solid var(--border);
  border-left: 4px solid var(--green);
  border-radius: 12px;
  padding: 1.1rem 1.3rem;
  margin-bottom: 1rem;
  transition: box-shadow 0.15s;
}
.personal-pattern-card:hover { box-shadow: 0 4px 16px var(--shadow); }
.ppc-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.45rem;
}
.ppc-desc {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 0.5rem;
}
.ppc-evidence {
  font-size: 0.78rem;
  color: var(--text-muted);
  font-style: italic;
  margin-bottom: 0.6rem;
}
.ppc-post-btn {
  background: none;
  border: 1px solid var(--green);
  color: var(--green);
  border-radius: 8px;
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ppc-post-btn:hover { background: var(--green); color: white; }


/* ================================================================
   TRIAL ENDED — day-31 moment
   ================================================================ */
.trial-ended-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20, 32, 44, 0.6);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  overflow-y: auto;
}
.trial-ended-card {
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 600px;
  max-height: 92vh;
  overflow-y: auto;
  padding: 2.25rem 2.25rem 2rem;
  box-shadow: 0 25px 70px rgba(0,0,0,0.4);
  text-align: center;
  animation: teCardIn 0.4s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes teCardIn {
  from { opacity: 0; transform: scale(0.95) translateY(14px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.te-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--green);
  margin-bottom: 0.85rem;
}
.te-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.85rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
  margin: 0 0 0.55rem;
  letter-spacing: -0.01em;
}
.te-intro {
  font-size: 0.95rem;
  color: var(--text-light);
  line-height: 1.5;
  margin: 0 auto 1.4rem;
  max-width: 440px;
}
.te-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 0.85rem;
  margin: 1.25rem 0 1.5rem;
  padding: 1rem 0.5rem;
  background: rgba(141,184,138,0.06);
  border-radius: 14px;
  border: 1px solid rgba(141,184,138,0.18);
}
.te-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.2rem;
}
.te-stat-num {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.85rem;
  font-weight: 700;
  color: var(--navy);
  line-height: 1;
}
.te-stat-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--text-muted);
  text-transform: uppercase;
}
.te-impact-wrap {
  margin: 1.25rem 0 1.5rem;
  padding: 1.25rem 1.5rem;
  background: var(--cream, #faf8f3);
  border-radius: 14px;
  border-left: 3px solid var(--green);
  text-align: left;
}
.te-impact-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 0.4rem;
}
.te-impact-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.4;
  margin: 0;
}
.te-anchor {
  margin: 1.5rem 0 1.4rem;
  padding: 0.95rem 1rem;
  background: rgba(45,72,96,0.04);
  border-radius: 12px;
  border: 1px dashed rgba(45,72,96,0.18);
}
.te-anchor-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--text-muted);
  margin-bottom: 0.35rem;
}
.te-anchor-line {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
  margin: 0;
}
.te-anchor-line strong { color: var(--navy); }
.te-actions {
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  margin: 1.4rem 0 0.85rem;
}
.te-btn {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.95rem 1.5rem;
  border-radius: 14px;
  border: none;
  font-family: inherit;
  cursor: pointer;
  transition: transform 0.12s, box-shadow 0.15s, background 0.15s;
}
.te-btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 16px rgba(141,184,138,0.35);
}
.te-btn-primary:hover {
  transform: translateY(-1px);
  background: var(--green-light, #a8c79d);
  box-shadow: 0 8px 22px rgba(141,184,138,0.4);
}
.te-btn-secondary {
  background: #fff;
  color: var(--navy);
  border: 1.5px solid var(--border);
}
.te-btn-secondary:hover {
  border-color: var(--navy);
  background: rgba(45,72,96,0.03);
}
.te-btn-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}
.te-btn-price {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 700;
  opacity: 0.95;
}
.te-link {
  display: block;
  background: none;
  border: none;
  margin: 0.5rem auto 0;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  text-decoration: none;
  transition: color 0.15s;
}
.te-link:hover { color: var(--navy); }

/* ================================================================
   IMPACT MODEL — Mission / Vision mode picker (empty state)
   ================================================================ */
.im-mode-picker {
  margin-top: 0.5rem;
  padding: 0.85rem 0.85rem 0.95rem;
  background: rgba(141,184,138,0.06);
  border: 1px dashed rgba(141,184,138,0.4);
  border-radius: 12px;
}
.im-mode-picker-prompt {
  font-size: 0.78rem;
  font-style: italic;
  color: var(--text-light);
  margin-bottom: 0.6rem;
  text-align: center;
}
.im-mode-picker-row {
  display: flex;
  flex-direction: column;
  gap: 0.45rem;
}
.im-mode-btn {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0.85rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  font-family: inherit;
  font-size: 0.85rem;
  color: var(--navy);
  cursor: pointer;
  text-align: left;
  transition: border-color 0.15s, background 0.15s, transform 0.12s;
}
.im-mode-btn:hover {
  border-color: var(--navy);
  background: rgba(45,72,96,0.03);
  transform: translateY(-1px);
}
.im-mode-btn-auto:hover { border-color: var(--green); background: rgba(141,184,138,0.06); }
.im-mode-btn-icon {
  width: 22px; height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.95rem;
  background: rgba(45,72,96,0.06);
  border-radius: 6px;
  flex-shrink: 0;
  color: var(--navy);
}
.im-mode-btn-auto .im-mode-btn-icon {
  background: rgba(141,184,138,0.14);
  color: var(--green);
}
.im-mode-btn-label { font-weight: 600; }

/* ================================================================
   DEMO PAYWALL — appears after demo browsers exhaust free uses
   ================================================================ */
.demo-paywall-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20, 32, 44, 0.55);
  z-index: 260;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: dpFadeIn 0.22s ease-out;
}
@keyframes dpFadeIn {
  from { background: rgba(20, 32, 44, 0); }
  to { background: rgba(20, 32, 44, 0.55); }
}
.demo-paywall-card {
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 460px;
  padding: 2.25rem 2rem 1.75rem;
  text-align: center;
  box-shadow: 0 25px 70px rgba(0,0,0,0.32);
  animation: dpCardIn 0.32s cubic-bezier(0.34, 1.4, 0.64, 1);
}
@keyframes dpCardIn {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.dp-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 0.85rem;
}
.dp-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
  margin: 0 0 0.7rem;
  letter-spacing: -0.005em;
}
.dp-body {
  font-size: 0.92rem;
  color: var(--text-light);
  line-height: 1.55;
  margin: 0 0 1.5rem;
}
.dp-actions {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
}
.dp-btn {
  padding: 0.85rem 1.5rem;
  border-radius: 14px;
  border: none;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.92rem;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: transform 0.12s, background 0.15s, color 0.15s;
}
.dp-btn-primary {
  background: var(--green);
  color: #fff;
  box-shadow: 0 4px 16px rgba(141,184,138,0.32);
}
.dp-btn-primary:hover {
  background: var(--green-light, #a8c79d);
  transform: translateY(-1px);
}
.dp-btn-secondary {
  background: none;
  color: var(--text-muted);
}
.dp-btn-secondary:hover { color: var(--navy); }

/* ================================================================
   AGENT SURFACE TIP (when agent has noticed something)
   ================================================================ */
.ha-surface-tip {
  position: fixed;
  bottom: 32px;
  right: 100px;
  background: #fff;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  padding: 0.55rem 1rem;
  border-radius: 22px;
  border: 1px solid var(--green);
  cursor: pointer;
  z-index: 215;
  box-shadow: 0 6px 22px rgba(45,72,96,0.18);
  animation: haTipIn 0.4s ease-out;
  white-space: nowrap;
  transition: transform 0.15s, box-shadow 0.15s;
}
.ha-surface-tip:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(45,72,96,0.25);
}
@keyframes haTipIn {
  from { opacity: 0; transform: translateX(8px); }
  to { opacity: 1; transform: translateX(0); }
}
.chat-fab.ha-fab-surfacing {
  animation: haFabSurfacing 1.6s ease-in-out infinite;
}
@keyframes haFabSurfacing {
  0%, 100% { box-shadow: 0 4px 18px rgba(141,184,138,0.5); }
  50% { box-shadow: 0 4px 28px rgba(141,184,138,0.95), 0 0 0 8px rgba(141,184,138,0.18); }
}

/* ================================================================
   HOW AGENT FORK POPUP + HOW CONVERSATION
   ================================================================ */
.ha-fork-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20, 32, 44, 0.45);
  z-index: 220;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
  animation: haForkBackdropIn 0.2s ease-out;
}
@keyframes haForkBackdropIn {
  from { background: rgba(20, 32, 44, 0); }
  to { background: rgba(20, 32, 44, 0.45); }
}
.ha-fork-modal {
  background: #fff;
  border-radius: 22px;
  width: 100%;
  max-width: 540px;
  padding: 1.6rem 1.6rem 1.4rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.32);
  animation: haForkIn 0.22s cubic-bezier(0.34, 1.56, 0.64, 1);
}
@keyframes haForkIn {
  from { opacity: 0; transform: scale(0.94) translateY(12px); }
  to { opacity: 1; transform: scale(1) translateY(0); }
}
.ha-fork-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1.1rem;
}
.ha-fork-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--green);
}
.ha-fork-close {
  background: rgba(45,72,96,0.06);
  border: none;
  color: var(--text-muted);
  border-radius: 50%;
  width: 30px; height: 30px;
  cursor: pointer;
  font-size: 0.85rem;
  transition: background 0.15s, color 0.15s;
}
.ha-fork-close:hover { background: rgba(45,72,96,0.12); color: var(--navy); }
.ha-fork-cards {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.ha-fork-option {
  display: flex;
  align-items: center;
  gap: 1rem;
  background: #fff;
  border: 1.5px solid var(--border);
  border-radius: 16px;
  padding: 1.1rem 1.25rem;
  font-family: inherit;
  cursor: pointer;
  text-align: left;
  transition: transform 0.12s, border-color 0.15s, background 0.15s, box-shadow 0.15s;
  width: 100%;
}
.ha-fork-option:hover {
  border-color: var(--green);
  background: rgba(141,184,138,0.04);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(141,184,138,0.18);
}
.ha-fork-talk:hover { border-color: var(--green); }
.ha-fork-type:hover { border-color: var(--navy); background: rgba(45,72,96,0.03); box-shadow: 0 4px 16px rgba(45,72,96,0.12); }
.ha-fork-icon {
  font-size: 1.7rem;
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(141,184,138,0.12);
  border-radius: 12px;
}
.ha-fork-type .ha-fork-icon { background: rgba(45,72,96,0.06); }
.ha-fork-body { display: flex; flex-direction: column; gap: 0.2rem; flex: 1; min-width: 0; }
.ha-fork-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.15;
}
.ha-fork-sub {
  font-size: 0.85rem;
  color: var(--text-muted);
  line-height: 1.4;
}

.how-convo-overlay {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(20, 32, 44, 0.55);
  z-index: 240;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.how-convo-card {
  background: linear-gradient(165deg, #a8c9dd 0%, #6c95b3 100%);
  border-radius: 22px;
  width: 100%;
  max-width: 540px;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  color: #fff;
  box-shadow: 0 20px 60px rgba(45,72,96,0.24);
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(45,72,96,0.3);
}
.how-convo-card .how-convo-eyebrow {
  color: #6e9b62;
  text-shadow: none;
}
.how-convo-card .how-convo-thread {
  background: rgba(255,255,255,0.14);
  border-color: rgba(255,255,255,0.22);
}
.how-convo-card .how-convo-type-input {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.3);
}
.how-convo-card .how-convo-type-input::placeholder { color: rgba(255,255,255,0.6); }
.how-convo-card .hcm-agent {
  background: rgba(196,219,190,0.32);
  border-left-color: #c4dbbe;
}
.how-convo-card .how-convo-mic {
  background: #a8c79d;
  box-shadow: 0 6px 20px rgba(168,199,157,0.45);
}
.how-convo-card .how-convo-mic:hover { background: #b8d4ad; }
.how-convo-header {
  padding: 1.25rem 1.5rem 0.75rem;
  border-bottom: 1px solid rgba(255,255,255,0.08);
}
.how-convo-title-row {
  display: flex;
  align-items: center;
  gap: 0.85rem;
}
.how-convo-eyebrow {
  flex: 1;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--green-light, #93b88f);
}
.how-convo-audio-btn, .how-convo-close {
  background: rgba(255,255,255,0.08);
  border: none;
  color: #fff;
  border-radius: 50%;
  width: 32px; height: 32px;
  cursor: pointer;
  font-size: 0.95rem;
  transition: background 0.15s;
}
.how-convo-audio-btn:hover, .how-convo-close:hover { background: rgba(255,255,255,0.18); }
.how-convo-audio-btn.muted { opacity: 0.4; }
.how-convo-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.65);
  margin-top: 0.4rem;
  line-height: 1.4;
}
.how-convo-thread {
  flex: 1;
  overflow-y: auto;
  padding: 1rem 1.5rem;
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  min-height: 200px;
  background: rgba(255,255,255,0.04);
  border-radius: 14px;
  margin: 0.85rem 1.5rem 0;
  border: 1px solid rgba(255,255,255,0.08);
}
.how-convo-thread.is-empty {
  align-items: center;
  justify-content: center;
}
.how-convo-thread.is-empty::before {
  content: 'Your conversation will appear here.';
  color: rgba(255,255,255,0.32);
  font-style: italic;
  font-size: 0.88rem;
}

.how-convo-type-row {
  display: flex;
  gap: 0.55rem;
  padding: 0.85rem 1.5rem 0;
  align-items: center;
}
.how-convo-type-input {
  flex: 1;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 22px;
  padding: 0.65rem 1.1rem;
  font-family: inherit;
  font-size: 0.92rem;
  color: #fff;
  outline: none;
  transition: border-color 0.15s, background 0.15s;
}
.how-convo-type-input::placeholder { color: rgba(255,255,255,0.4); }
.how-convo-type-input:focus {
  border-color: var(--green);
  background: rgba(255,255,255,0.12);
}
.how-convo-type-send {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  border: none;
  background: var(--green);
  color: #fff;
  font-size: 1.1rem;
  font-weight: 700;
  cursor: pointer;
  flex-shrink: 0;
  transition: background 0.15s, transform 0.12s;
}
.how-convo-type-send:hover { background: var(--green-light, #a8c79d); transform: translateY(-1px); }
.how-convo-type-send:disabled { opacity: 0.5; cursor: default; transform: none; }
.hcm {
  border-radius: 14px;
  padding: 0.85rem 1.1rem;
  font-size: 0.92rem;
  line-height: 1.55;
  max-width: 88%;
  word-break: break-word;
}
.hcm-user {
  align-self: flex-end;
  background: rgba(255,255,255,0.12);
  color: #fff;
}
.hcm-agent {
  align-self: flex-start;
  background: rgba(141,184,138,0.18);
  color: #fff;
  border-left: 3px solid var(--green);
}
.hcm-thinking {
  align-self: flex-start;
  color: rgba(255,255,255,0.55);
  font-style: italic;
  font-size: 0.85rem;
}
.how-convo-mic-row {
  padding: 1.25rem 1.5rem 0.5rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
  border-top: 1px solid rgba(255,255,255,0.08);
}
.how-convo-mic {
  width: 84px;
  height: 84px;
  border-radius: 50%;
  border: none;
  background: var(--green);
  color: #fff;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.12s, background 0.15s, box-shadow 0.15s;
  box-shadow: 0 6px 20px rgba(141,184,138,0.4);
  user-select: none;
  -webkit-user-select: none;
}
.how-convo-mic:hover { background: var(--green-light, #a8c79d); }
.how-convo-mic.recording {
  background: #c9695a;
  box-shadow: 0 0 0 0 rgba(201,105,90,0.7);
  animation: hcMicPulse 1.2s infinite;
}
@keyframes hcMicPulse {
  0% { box-shadow: 0 0 0 0 rgba(201,105,90,0.7); }
  70% { box-shadow: 0 0 0 18px rgba(201,105,90,0); }
  100% { box-shadow: 0 0 0 0 rgba(201,105,90,0); }
}
.how-convo-mic-icon { font-size: 1.7rem; }
.how-convo-status {
  font-size: 0.78rem;
  color: rgba(255,255,255,0.55);
  letter-spacing: 0.04em;
}
.how-convo-footer {
  padding: 0.75rem 1.5rem 1.25rem;
  display: flex;
  justify-content: center;
}
.how-convo-save-btn {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.18);
  color: #fff;
  border-radius: 22px;
  padding: 0.55rem 1.4rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 0.15s;
}
.how-convo-save-btn:hover { background: rgba(255,255,255,0.22); }
.how-convo-save-story-btn {
  background: var(--green);
  border-color: var(--green);
}
.how-convo-save-story-btn:hover { background: var(--green-light, #a8c79d); border-color: var(--green-light, #a8c79d); }
.how-convo-footer { gap: 0.6rem; flex-wrap: wrap; }

.hc-story-card { max-width: 580px; }
.hc-story-body {
  flex: 1;
  overflow-y: auto;
  padding: 1.25rem 1.5rem 0.5rem;
}
.hc-story-loading {
  text-align: center;
  font-size: 0.92rem;
  color: rgba(255,255,255,0.65);
  font-style: italic;
  padding: 2rem 0;
}
.hc-story-form { display: flex; flex-direction: column; gap: 0.5rem; }
.hc-story-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.85);
  margin-top: 0.5rem;
}
.hc-story-title-input,
.hc-story-narrative-input,
.hc-story-org-select {
  background: rgba(45,72,96,0.18);
  border: 1px solid rgba(255,255,255,0.28);
  border-radius: 10px;
  padding: 0.65rem 0.85rem;
  font-family: inherit;
  font-size: 0.95rem;
  color: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.hc-story-title-input:focus,
.hc-story-narrative-input:focus,
.hc-story-org-select:focus {
  outline: none;
  border-color: var(--green);
  background: rgba(45,72,96,0.24);
}
.hc-story-narrative-input { font-family: 'Merriweather', Georgia, serif; line-height: 1.55; resize: vertical; }
.hc-story-org-select option { color: var(--text); }
.hc-story-footer { padding-top: 1rem; }

/* ================================================================
   DIGEST WHAT'S NEW (incremental feed since last visit)
   ================================================================ */
.digest-whats-new {
  max-width: 680px;
  margin: 0 auto 1.75rem;
  padding: 1.25rem 1.5rem;
  background: rgba(141,184,138,0.06);
  border-radius: 14px;
  border: 1px solid rgba(141,184,138,0.18);
}
.dwn-header { margin-bottom: 0.85rem; }
.dwn-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--green);
}
.dwn-items {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.dwn-item {
  display: flex;
  gap: 0.85rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid rgba(141,184,138,0.15);
  cursor: pointer;
  transition: padding-left 0.15s;
}
.dwn-item:last-child { border-bottom: none; }
.dwn-item:hover { padding-left: 0.4rem; }
.dwn-item-marker {
  flex-shrink: 0;
  font-size: 0.95rem;
  width: 24px;
  text-align: center;
  padding-top: 0.1rem;
}
.dwn-item-body { flex: 1; min-width: 0; }
.dwn-item-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--text-muted);
  text-transform: uppercase;
  margin-bottom: 0.15rem;
}
.dwn-item-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
  margin-bottom: 0.2rem;
}
.dwn-item-excerpt {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.45;
  word-break: break-word;
}

/* Mirror prompt — different from story draft */
.hc-mirror-card { max-width: 460px; }
.hc-mirror-body { padding: 1.25rem 1.5rem 0.75rem; }
.hc-mirror-question {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  line-height: 1.4;
  color: #fff;
  margin-bottom: 1.4rem;
}
.hc-mirror-question strong {
  color: var(--green-light, #93b88f);
  font-weight: 600;
}
.hc-mirror-actions {
  display: flex;
  gap: 0.55rem;
  flex-direction: column;
}
.hc-mirror-actions .how-convo-save-btn {
  width: 100%;
  text-align: center;
}

/* ================================================================
   DIGEST HEADLINE CARD (the most-alive thing today)
   ================================================================ */
.digest-headline-card {
  max-width: 680px;
  margin: 1.5rem auto 1rem;
  padding: 1.75rem 1.9rem 1.5rem;
  background: linear-gradient(165deg, #a8c9dd 0%, #6c95b3 100%);
  border-radius: 18px;
  color: #fff;
  position: relative;
  box-shadow: 0 6px 26px rgba(45,72,96,0.2);
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(45,72,96,0.25);
}
.digest-headline-card::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 70%);
  pointer-events: none;
}
.dhc-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--green-light, #93b88f);
  margin-bottom: 0.55rem;
}
.dhc-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.85rem;
  font-weight: 600;
  line-height: 1.15;
  margin-bottom: 0.65rem;
  color: #fff;
  letter-spacing: -0.01em;
}
.dhc-body {
  font-size: 0.95rem;
  line-height: 1.55;
  color: rgba(255,255,255,0.78);
  margin-bottom: 1.1rem;
  max-width: 520px;
}
.dhc-action {
  display: inline-block;
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 22px;
  padding: 0.6rem 1.25rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s, transform 0.12s;
}
.dhc-action:hover {
  background: var(--green-light, #a8c79d);
  transform: translateY(-1px);
}

/* ================================================================
   DIGEST TODAY CARD (upcoming events)
   ================================================================ */
.digest-today-card {
  max-width: 680px;
  margin: 1.5rem auto 2rem;
  padding: 1.5rem 1.75rem 1.4rem;
  background: #fff;
  border-radius: 16px;
  border-left: 4px solid var(--green);
  box-shadow: 0 2px 16px rgba(45,72,96,0.08);
}
.dtc-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.85rem;
}
.dtc-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  color: var(--green);
}
.dtc-add-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 0.3rem 0.75rem;
  cursor: pointer;
  transition: all 0.15s;
}
.dtc-add-btn:hover { color: var(--navy); border-color: var(--navy); }
.dtc-events { display: flex; flex-direction: column; gap: 0.7rem; }
.dtc-event {
  display: flex;
  align-items: flex-start;
  gap: 0.85rem;
  padding: 0.6rem 0;
  border-bottom: 1px solid rgba(0,0,0,0.05);
}
.dtc-event:last-child { border-bottom: none; }
.dtc-event-time {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--green);
  text-transform: uppercase;
  min-width: 70px;
  flex-shrink: 0;
  padding-top: 0.15rem;
}
.dtc-event-body { flex: 1; min-width: 0; }
.dtc-event-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.3;
}
.dtc-event-context {
  font-size: 0.85rem;
  color: var(--text-light);
  line-height: 1.45;
  margin-top: 0.2rem;
}
.dtc-event-delete {
  background: none;
  border: none;
  color: var(--text-muted);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 0.15rem 0.4rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.dtc-event:hover .dtc-event-delete { opacity: 0.6; }
.dtc-event-delete:hover { opacity: 1; color: var(--coral); }
.dtc-empty {
  font-size: 0.88rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.4rem 0;
}
.dtc-add-form {
  margin-top: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
}
.dtc-input, .dtc-date {
  font-family: inherit;
  font-size: 0.92rem;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.65rem 0.85rem;
  color: var(--text);
  background: var(--bg);
  transition: border-color 0.15s;
}
.dtc-input:focus, .dtc-date:focus { outline: none; border-color: var(--green); }
.dtc-input-context { font-size: 0.85rem; }
.dtc-form-actions { display: flex; gap: 0.5rem; }
.dtc-save-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.55rem 1.25rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s;
}
.dtc-save-btn:hover { background: var(--navy); }
.dtc-cancel-btn {
  background: none;
  color: var(--text-muted);
  border: none;
  padding: 0.55rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
}
.dtc-cancel-btn:hover { color: var(--navy); }

/* ================================================================
   PERSONAL PULSE CARD (living dashboard context card)
   ================================================================ */
.personal-pulse-card {
  border-top: none;
  /* Light blue underline under the date+mantra strip — quiet visual
     break between the welcome header and the dashboard content below. */
  border-bottom: 1px solid rgba(148, 184, 208, 0.45);
  background: transparent;
  padding: 0.5rem 1.5rem 0.75rem;
  margin: 0 0 1.25rem;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 900px;
  margin-left: auto;
  margin-right: auto;
}

/* ✦ Pattern Detected chip — small pulsing affordance that surfaces
   inline on the personal dashboard. Click → opens the proposal modal.
   Replaces the giant inline card that used to dominate the home page. */
.km-discovery-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  margin: 0 0 1.25rem;
  background: linear-gradient(135deg, rgba(141,184,138,0.18) 0%, rgba(148,184,208,0.16) 100%);
  border: 1px solid rgba(141,184,138,0.55);
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--green, #5C8A57);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 2px 8px rgba(141,184,138,0.15);
}
.km-discovery-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 14px rgba(141,184,138,0.28);
  background: linear-gradient(135deg, rgba(141,184,138,0.26) 0%, rgba(148,184,208,0.22) 100%);
}
.km-disc-chip-pulse {
  position: relative;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--green, #5C8A57);
  flex-shrink: 0;
}
.km-disc-chip-pulse::before {
  content: '';
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  border: 2px solid var(--green, #5C8A57);
  opacity: 0.7;
  animation: kmDiscPulse 1.8s ease-out infinite;
}
@keyframes kmDiscPulse {
  0%   { transform: scale(0.6); opacity: 0.8; }
  70%  { transform: scale(1.6); opacity: 0; }
  100% { transform: scale(1.6); opacity: 0; }
}
.km-disc-chip-arrow {
  font-size: 0.95rem;
  line-height: 1;
}

/* Modal overlay that wraps the existing card on click. */
.km-discovery-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 45, 0.55);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  z-index: 1000;
  animation: kmModalFadeIn 0.2s ease both;
}
.km-discovery-modal-overlay.hidden { display: none; }
.km-discovery-modal-box {
  background: #FFFDF6;
  border-radius: 18px;
  max-width: 560px;
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 24px 64px rgba(20,30,45,0.35);
  position: relative;
  padding: 0.5rem;
  animation: kmModalRise 0.24s ease both;
}
.km-discovery-modal-close {
  position: absolute;
  top: 0.6rem;
  right: 0.85rem;
  background: transparent;
  border: none;
  font-size: 1.4rem;
  line-height: 1;
  color: rgba(45,72,96,0.55);
  cursor: pointer;
  z-index: 2;
}
.km-discovery-modal-close:hover { color: var(--navy, #2d4860); }
.km-discovery-modal-box .km-discovery-card {
  margin: 0;
  border: none;
  background: transparent;
  box-shadow: none;
}
@keyframes kmModalFadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes kmModalRise {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

/* ✦ Key Move discovery card — the abstraction-wedge moment */
.km-discovery-card {
  background: linear-gradient(135deg, rgba(141,184,138,0.10) 0%, rgba(148,184,208,0.10) 100%);
  border: 1px solid rgba(141,184,138,0.45);
  border-radius: 16px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 1.5rem;
  box-shadow: 0 4px 20px rgba(45,72,96,0.06);
}
.km-discovery-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #5C8A57;
  margin-bottom: 0.6rem;
}
.km-discovery-evidence {
  font-size: 0.9rem;
  color: var(--text-light);
  margin-bottom: 0.85rem;
  font-style: italic;
}
.km-discovery-proposal {
  margin-bottom: 1.1rem;
}
.km-discovery-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.55rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.2;
  margin-bottom: 0.25rem;
}
.km-discovery-desc {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.55;
}
.km-discovery-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
}
.km-discovery-accept {
  background: var(--green);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s;
}
.km-discovery-accept:hover { background: #4f7c4a; }
.km-discovery-edit,
.km-discovery-skip {
  background: transparent;
  color: var(--navy);
  border: 1px solid rgba(45,72,96,0.2);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.km-discovery-edit:hover,
.km-discovery-skip:hover { background: rgba(45,72,96,0.06); }

/* Soft-claim variant — surfaces for KMs 1-2 when supporting count is still 2-4. */
.km-discovery-card.soft-claim {
  background: linear-gradient(135deg, rgba(245,221,141,0.18) 0%, rgba(148,184,208,0.10) 100%);
  border-color: rgba(212,180,90,0.55);
}
.km-discovery-card.soft-claim .km-discovery-eyebrow { color: #B68A2C; }
.km-discovery-soft-hint {
  margin-top: 0.7rem;
  padding: 0.7rem 0.9rem;
  background: rgba(255,255,255,0.6);
  border-left: 3px solid rgba(212,180,90,0.6);
  border-radius: 6px;
  font-size: 0.85rem;
  line-height: 1.55;
  color: var(--text-light);
  font-style: italic;
}

/* ✦ Story → existing Key Move suggestion toast (after story save) */
.km-tag-toast {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  max-width: 360px;
  background: white;
  border: 1px solid rgba(141,184,138,0.5);
  border-left: 4px solid #5C8A57;
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(45,72,96,0.18);
  padding: 1rem 1.1rem;
  z-index: 9000;
  animation: kmToastIn 0.25s ease;
}
@keyframes kmToastIn {
  from { transform: translateY(8px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}
.km-tag-toast-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #5C8A57;
  margin-bottom: 0.35rem;
}
.km-tag-toast-text {
  font-size: 0.95rem;
  color: var(--navy);
  line-height: 1.45;
  margin-bottom: 0.3rem;
}
.km-tag-toast-reason {
  font-size: 0.82rem;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 0.7rem;
}
.km-tag-toast-actions {
  display: flex;
  gap: 0.5rem;
}
.km-tag-toast-accept {
  background: var(--green);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}
.km-tag-toast-dismiss {
  background: transparent;
  color: var(--text-light);
  border: 1px solid var(--border);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 600;
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
}
.ppulse-strip {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: #3d6b3a;
  line-height: 1;
  margin: 0;
  text-align: center;
}


/* ================================================================
   THINKING LAB
   ================================================================ */

/* Hero header — soft blue palette to match How Agent chat */
.tl-hero {
  background: linear-gradient(165deg, #a8c9dd 0%, #6c95b3 100%);
  padding: 0 0 2.5rem;
  position: relative;
  overflow: hidden;
  text-shadow: 0 1px 2px rgba(45,72,96,0.25);
}
.tl-hero::before {
  content: '';
  position: absolute;
  top: -60px; right: -60px;
  width: 280px; height: 280px;
  border-radius: 50%;
  background: rgba(255,255,255,0.12);
  pointer-events: none;
}
.tl-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.5rem;
}
.tl-nav-back {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  font-size: 0.82rem;
  font-family: 'Montserrat', sans-serif;
  letter-spacing: 0.03em;
  transition: color 0.15s;
}
.tl-nav-back:hover { color: #fff; }
.tl-nav-brand {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  color: rgba(255,255,255,0.4);
  letter-spacing: 0.06em;
}
.tl-nav-brand strong { color: rgba(255,255,255,0.65); }
.tl-hero-text {
  text-align: center;
  padding: 1.5rem 1rem 2rem;
}
.tl-hero-glyph {
  font-size: 1.8rem;
  color: rgba(82,160,90,0.6);
  margin-bottom: 0.5rem;
}
.tl-hero-greeting {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.45);
  margin: 0 0 0.4rem;
}
.tl-hero-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 3rem;
  font-weight: 600;
  color: #fff;
  margin: 0 0 0.4rem;
  letter-spacing: -0.01em;
}
.tl-hero-sub {
  font-size: 0.9rem;
  color: rgba(255,255,255,0.55);
  margin: 0;
  font-style: italic;
}

/* Quick capture zone */
.tl-capture-zone {
  margin: 0 1rem;
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.15);
  border-radius: 16px;
  padding: 1rem 1.25rem;
  backdrop-filter: blur(8px);
}
.tl-type-row {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
  flex-wrap: wrap;
}
.tl-type-btn {
  background: rgba(255,255,255,0.1);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 20px;
  padding: 0.3rem 0.85rem;
  font-size: 0.78rem;
  font-family: 'Montserrat', sans-serif;
  color: rgba(255,255,255,0.65);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.tl-type-btn:hover { background: rgba(255,255,255,0.18); color: #fff; }
.tl-type-active {
  background: rgba(82,160,90,0.35) !important;
  border-color: rgba(82,160,90,0.6) !important;
  color: #fff !important;
}
.tl-input-row {
  display: flex;
  gap: 0.6rem;
}
.tl-input {
  flex: 1;
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.2);
  border-radius: 10px;
  padding: 0.65rem 0.9rem;
  font-size: 0.92rem;
  color: #fff;
  font-family: inherit;
}
.tl-input:focus { outline: none; background: rgba(255,255,255,0.18); border-color: rgba(82,160,90,0.6); }
.tl-input::placeholder { color: rgba(255,255,255,0.35); font-style: italic; }
.tl-add-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.65rem 1.1rem;
  font-size: 0.85rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  cursor: pointer;
  transition: background 0.15s;
  letter-spacing: 0.04em;
}
.tl-add-btn:hover { background: #3a7d42; }

/* Body */
.tl-body {
  max-width: 700px;
  margin: 0 auto;
  padding: 1.75rem 1rem 5rem;
}

/* Synthesis card */
.tl-synthesis {
  background: #fff;
  border-radius: 16px;
  border-left: 4px solid var(--green);
  padding: 1.5rem 1.5rem 1.25rem;
  margin-bottom: 1.75rem;
  position: relative;
  box-shadow: 0 2px 12px rgba(45,72,96,0.08);
}
.tl-synthesis-header {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.75rem;
}
.tl-synthesis-glyph {
  font-size: 0.9rem;
  color: var(--green);
}
.tl-synthesis-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tl-synthesis-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  color: var(--navy);
  line-height: 1.65;
  font-style: italic;
}
.tl-synthesis-loading {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  color: var(--text-muted);
  font-style: normal;
  letter-spacing: 0.03em;
}
.tl-synthesis-refresh {
  position: absolute;
  top: 1.1rem; right: 1.1rem;
  background: rgba(45,72,96,0.05);
  border: 1px solid var(--border);
  color: var(--text-muted);
  border-radius: 50%;
  width: 28px; height: 28px;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.15s;
}
.tl-synthesis-refresh:hover { background: var(--navy); color: #fff; border-color: var(--navy); }

/* Filter tabs */
.tl-filters {
  display: flex;
  gap: 0.4rem;
  margin-bottom: 1.5rem;
  flex-wrap: wrap;
}
.tl-filter {
  background: transparent;
  border: 1.5px solid var(--border);
  border-radius: 20px;
  padding: 0.3rem 0.85rem;
  font-size: 0.78rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.03em;
}
.tl-filter:hover { border-color: var(--navy); color: var(--navy); }
.tl-filter-active {
  background: var(--navy) !important;
  border-color: var(--navy) !important;
  color: #fff !important;
}

/* Feed */
.tl-feed { display: flex; flex-direction: column; gap: 2rem; }

/* ── Category bands (All view) ───────────────────────────── */
.tl-band {
  background: rgba(255,255,255,0.7);
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.tl-band-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; }
.tl-band-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.15rem;
}
.tl-band-sub { font-size: 0.85rem; color: var(--text-light); font-style: italic; }
.tl-band-seeall {
  background: transparent;
  border: 1px solid rgba(45,72,96,0.2);
  border-radius: 999px;
  padding: 0.4rem 0.9rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  color: var(--navy);
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.tl-band-seeall:hover { background: var(--navy); color: white; }
.tl-band-items { display: flex; flex-direction: column; gap: 0.6rem; }

/* ── Articles drill-in view ───────────────────────────── */
.articles-controls {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin-bottom: 1.5rem;
  padding-bottom: 1rem;
  border-bottom: 1px solid rgba(45,72,96,0.08);
}
.articles-group-tabs {
  display: inline-flex;
  background: rgba(45,72,96,0.05);
  border-radius: 999px;
  padding: 3px;
}
.agt-btn {
  background: transparent;
  border: none;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(45,72,96,0.55);
  cursor: pointer;
  transition: all 0.18s ease;
}
.agt-btn:hover { color: var(--navy); }
.agt-btn.agt-active { background: var(--navy); color: white; }
.articles-search-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  background: white;
  border: 1px solid rgba(45,72,96,0.15);
  border-radius: 999px;
  padding: 0.4rem 0.85rem;
  color: rgba(45,72,96,0.55);
  flex: 1;
  min-width: 200px;
  max-width: 320px;
}
.articles-search-input {
  border: none;
  outline: none;
  background: transparent;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  color: var(--navy);
  width: 100%;
}
.articles-recluster-btn {
  background: var(--coral);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  letter-spacing: 0.02em;
  transition: background 0.15s, transform 0.15s;
}
.articles-recluster-btn:hover { background: #d68f7c; transform: translateY(-1px); }
.articles-recluster-btn:disabled { opacity: 0.6; cursor: wait; }

/* "+ New topic" — creates an empty subject bucket in the By-subject view. */
.articles-newtopic-btn {
  background: transparent;
  border: 1.5px solid rgba(45,72,96,0.20);
  color: var(--navy, #2d4860);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  padding: 0.45rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
  margin-left: 0.5rem;
  transition: all 0.15s ease;
}
.articles-newtopic-btn:hover {
  background: var(--navy, #2d4860);
  color: #fff;
  transform: translateY(-1px);
}

/* Empty topic group — bucket exists but no articles in it yet. */
.art-group-empty {
  opacity: 0.92;
}
.art-group-empty .art-group-count {
  opacity: 0.45;
}
.art-group-empty-hint {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.92rem;
  color: rgba(45,72,96,0.55);
  padding: 0.85rem 1rem;
  text-align: center;
}
.art-group-remove {
  background: transparent;
  border: none;
  color: rgba(45,72,96,0.35);
  font-size: 1rem;
  cursor: pointer;
  padding: 0.1rem 0.45rem;
  margin-left: 0.4rem;
  border-radius: 4px;
}
.art-group-remove:hover {
  color: #c97374;
  background: rgba(201,115,116,0.08);
}

.art-themes-hint {
  background: rgba(232,168,152,0.12);
  border: 1px dashed rgba(232,168,152,0.4);
  color: var(--navy);
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  font-size: 0.88rem;
  margin-bottom: 1rem;
  font-style: italic;
}

.art-group { margin-bottom: 1.75rem; }
.art-group-tinted {
  border-radius: 14px;
  padding: 1.1rem 1.15rem 1.25rem;
  border: 1px solid rgba(45, 72, 96, 0.07);
  background: rgba(252, 248, 240, 0.55);
}
.art-group-tinted.tint-sage {
  background: rgba(232, 240, 232, 0.7);
  border-color: rgba(124, 158, 124, 0.22);
}
.art-group-tinted.tint-sky {
  background: rgba(228, 240, 247, 0.75);
  border-color: rgba(108, 149, 179, 0.24);
}
.art-group-tinted.tint-coral {
  background: rgba(247, 232, 222, 0.7);
  border-color: rgba(213, 122, 90, 0.18);
}
.art-group-tinted.tint-sand {
  background: rgba(252, 244, 232, 0.75);
  border-color: rgba(214, 168, 122, 0.22);
}
.art-group-tinted.tint-lilac {
  background: rgba(238, 234, 247, 0.75);
  border-color: rgba(155, 138, 187, 0.22);
}
.art-group-tinted.tint-mute {
  background: rgba(248, 246, 242, 0.85);
  border-color: rgba(45, 72, 96, 0.08);
}
.art-group-tinted .art-group-header {
  margin-bottom: 0.85rem;
  padding-bottom: 0.6rem;
  border-bottom: 1px solid rgba(45,72,96,0.07);
}
.art-group-header {
  display: flex;
  align-items: baseline;
  gap: 0.65rem;
  margin-bottom: 0.75rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(45,72,96,0.08);
}
.art-group-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--navy);
}
.art-group-count {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: var(--text-light);
  background: rgba(45,72,96,0.06);
  padding: 0.15rem 0.5rem;
  border-radius: 999px;
}
.art-group-items {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.85rem;
}

.art-card {
  position: relative;
  background: white;
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 10px;
  padding: 0.95rem 1rem 0.85rem;
  transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
  min-height: 8rem;
  display: flex;
  flex-direction: column;
}
.art-card:hover {
  border-color: rgba(45,72,96,0.18);
  box-shadow: 0 4px 14px rgba(45,72,96,0.08);
  transform: translateY(-1px);
}
.art-card-delete {
  position: absolute;
  top: 0.4rem;
  right: 0.4rem;
  background: transparent;
  border: none;
  color: rgba(192, 57, 43, 0.4);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  font-size: 0.85rem;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
  opacity: 0;
}
.art-card:hover .art-card-delete { opacity: 1; }
.art-card-delete:hover {
  background: rgba(192, 57, 43, 0.12);
  color: #c0392b;
}
.art-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem;
  margin-bottom: 0.35rem;
}
.art-card-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.35;
}
.art-card-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: var(--coral);
  text-decoration: none;
  white-space: nowrap;
  margin-top: 0.15rem;
}
.art-card-link:hover { text-decoration: underline; }
.art-card-note {
  font-size: 0.86rem;
  color: var(--text);
  font-style: italic;
  line-height: 1.45;
  margin-bottom: 0.5rem;
}
.art-card-meta {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  font-size: 0.72rem;
  color: var(--text-light);
}
.art-tag {
  background: rgba(45,72,96,0.06);
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  font-weight: 500;
  color: var(--navy);
}
.art-tag-theme { background: rgba(232,168,152,0.18); color: #b6735f; }
.art-tag-km    { background: rgba(141,184,138,0.18); color: #4a7d4a; }
.art-tag-subject {
  background: rgba(148,184,208,0.18);
  color: #3d6680;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.art-tag-subject:hover { background: rgba(148,184,208,0.32); color: #2a5470; }
.art-tag-subject-empty {
  background: transparent;
  color: var(--text-muted);
  border: 1px dashed rgba(45,72,96,0.20);
  font-style: italic;
}
.art-tag-subject-empty:hover {
  background: rgba(148,184,208,0.10);
  color: var(--navy);
  border-color: rgba(148,184,208,0.6);
}
.art-tag-date  { color: rgba(45,72,96,0.5); }

/* Week groups */
.tl-week-group { display: flex; flex-direction: column; gap: 0.75rem; }
.tl-week-header {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding-bottom: 0.6rem;
  border-bottom: 1.5px solid var(--border);
}
.tl-week-label {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}
.tl-week-count {
  font-size: 0.7rem;
  color: var(--text-muted);
  background: rgba(45,72,96,0.07);
  border-radius: 10px;
  padding: 0.1rem 0.45rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}

/* Entry cards */
.tl-entry {
  background: #fff;
  border-radius: 12px;
  padding: 0.9rem 1.1rem;
  border-left: 3.5px solid var(--border);
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow 0.15s, opacity 0.3s;
}
.tl-entry:hover { box-shadow: 0 3px 12px rgba(0,0,0,0.09); }
.tl-entry-vision  { border-left-color: #52a05a; background: rgba(82,160,90,0.03); }
.tl-entry-idea    { border-left-color: #C97B5A; background: rgba(201,123,90,0.03); }
.tl-entry-note    { border-left-color: var(--navy); background: rgba(45,72,96,0.03); }
.tl-entry-journal { border-left-color: #C9A85C; background: rgba(201,168,92,0.03); }

.tl-entry-type-badge {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 0.15rem 0.5rem;
  border-radius: 10px;
  margin-bottom: 0.5rem;
}
.tl-badge-vision  { background: rgba(82,160,90,0.12);  color: #3a7d42; }
.tl-badge-idea    { background: rgba(201,123,90,0.12); color: #9a4a25; }
.tl-badge-note    { background: rgba(45,72,96,0.1);   color: var(--navy); }
.tl-badge-journal { background: rgba(201,168,92,0.15); color: #8a6820; }

.tl-entry-text {
  font-size: 0.95rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 0.65rem;
}

.tl-entry-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-items: center;
}
.tl-action-explore, .tl-action-promote {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.25rem 0.65rem;
  font-size: 0.75rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  letter-spacing: 0.02em;
}
.tl-action-explore:hover { border-color: var(--green); color: var(--green); }
.tl-action-promote:hover { border-color: var(--navy); color: var(--navy); background: rgba(45,72,96,0.04); }
.tl-action-delete {
  background: none;
  border: 1px solid rgba(200,100,100,0.35);
  border-radius: 999px;
  color: rgba(192,57,43,0.85);
  font-size: 0.78rem;
  cursor: pointer;
  padding: 0.25rem 0.55rem;
  margin-left: auto;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.tl-action-delete:hover {
  color: #fff;
  background: #c0392b;
  border-color: #c0392b;
}

/* Empty state */
.tl-empty {
  text-align: center;
  padding: 4rem 1rem;
}
.tl-empty-glyph { font-size: 2rem; color: var(--border); margin-bottom: 1rem; }
.tl-empty-msg { font-size: 0.9rem; color: var(--text-muted); font-style: italic; }

/* Responsive */
@media (max-width: 480px) {
  .tl-hero-title { font-size: 2.2rem; }
  .tl-capture-zone { margin: 0 0.75rem; }
  .tl-body { padding: 1.25rem 0.75rem 4rem; }
  .tl-synthesis-text { font-size: 1rem; }
}

/* ===== Thinking Lab — Patterns View ===== */
.tl-patterns-view {
  padding: 0 0 3rem;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.25rem;
  align-items: start;
}
.tl-patterns-view .tl-patterns-loading,
.tl-patterns-view .tl-patterns-empty {
  grid-column: 1 / -1;
}
@media (max-width: 900px) {
  .tl-patterns-view { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 580px) {
  .tl-patterns-view { grid-template-columns: 1fr; }
}
.tl-patterns-loading {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-style: italic;
  font-size: 0.9rem;
}
.tl-patterns-empty {
  text-align: center;
  padding: 3rem 1rem;
  color: var(--text-muted);
  font-size: 0.9rem;
}
.tl-pattern-card {
  background: #fff;
  border-radius: 14px;
  border: 1px solid var(--border);
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(45,72,96,0.06);
  transition: box-shadow 0.2s;
}
.tl-pattern-card:hover { box-shadow: 0 4px 16px rgba(45,72,96,0.1); }
.tl-pattern-card-clickable {
  cursor: pointer;
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.tl-pattern-card-clickable:hover {
  box-shadow: 0 6px 22px rgba(45,72,96,0.14);
  transform: translateY(-1px);
}
.tl-pattern-card-clickable:focus-visible {
  outline: 2px solid var(--green, #2d6a4f);
  outline-offset: 3px;
}
.tl-pattern-open-cue {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6b7280;
  text-transform: uppercase;
  opacity: 0.75;
}
.tl-pattern-card-clickable:hover .tl-pattern-open-cue {
  opacity: 1;
  color: var(--green, #2d6a4f);
}

/* Pattern detail modal — opens when a pattern card is clicked. Lets the
   user read the insight, see every entry, and add a new thought tagged
   to this pattern. */
.pattern-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 30, 40, 0.55);
  z-index: 9000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease;
}
.pattern-modal-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.pattern-modal-overlay.hidden { display: none; }
.pattern-modal-box {
  background: #fff;
  border-radius: 16px;
  max-width: 640px;
  width: 100%;
  max-height: 88vh;
  overflow-y: auto;
  padding: 30px 34px 28px;
  position: relative;
  box-shadow: 0 24px 64px rgba(20,30,40,0.30);
}
.pattern-modal-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: transparent;
  border: 0;
  font-size: 28px;
  line-height: 1;
  color: #6b7280;
  cursor: pointer;
  padding: 6px 10px;
  border-radius: 6px;
}
.pattern-modal-close:hover { background: #f3f4f6; color: #1f2a37; }
.pattern-modal-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--green, #2d6a4f);
  text-transform: uppercase;
  margin-bottom: 6px;
}
.pattern-modal-eyebrow span { margin-right: 4px; }
.pattern-modal-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 10px;
  line-height: 1.25;
}
.pattern-modal-insight {
  font-family: 'Georgia', serif;
  font-size: 15px;
  line-height: 1.55;
  color: #1f2a37;
  background: #faf7f0;
  border-left: 3px solid var(--green, #2d6a4f);
  padding: 12px 16px;
  border-radius: 4px;
  margin-bottom: 18px;
}
.pattern-modal-add {
  background: #fbfaf6;
  border: 1px solid #e6e0d4;
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 18px;
}
.pattern-modal-add-label {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  margin-bottom: 6px;
  letter-spacing: 0.02em;
}
.pattern-modal-input {
  width: 100%;
  border: 1px solid #d4cab2;
  border-radius: 8px;
  padding: 10px 12px;
  font-family: 'Georgia', serif;
  font-size: 14px;
  line-height: 1.5;
  background: #fff;
  resize: vertical;
  color: #1f2a37;
}
.pattern-modal-input:focus {
  outline: none;
  border-color: var(--green, #2d6a4f);
  box-shadow: 0 0 0 3px rgba(45,106,79,0.10);
}
.pattern-modal-add-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 8px;
}
.pattern-modal-add-hint {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  color: #6b7280;
  font-style: italic;
}
.pattern-modal-save {
  background: var(--green, #2d6a4f);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 8px 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease;
}
.pattern-modal-save:hover:not(:disabled) { background: #14332a; }
.pattern-modal-save:disabled { opacity: 0.6; cursor: default; }
.pattern-modal-entries-header {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: #6b7280;
  text-transform: uppercase;
  margin: 0 0 8px;
}
.pattern-modal-entries {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pattern-modal-entry {
  background: #fff;
  border: 1px solid var(--border, #e6e0d4);
  border-radius: 10px;
  padding: 10px 14px;
}
.pattern-modal-entry-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 3px;
}
.pattern-modal-entry-type {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: #6b7280;
  text-transform: uppercase;
}
.pattern-modal-entry-delete {
  background: transparent;
  border: 1px solid rgba(200,100,100,0.30);
  border-radius: 999px;
  color: rgba(192,57,43,0.8);
  font-size: 11px;
  cursor: pointer;
  padding: 1px 8px;
  line-height: 1.4;
  transition: color 0.15s, background 0.15s, border-color 0.15s;
}
.pattern-modal-entry-delete:hover {
  color: #fff;
  background: #c0392b;
  border-color: #c0392b;
}
.pattern-modal-entry-delete:disabled { opacity: 0.4; cursor: default; }
.pattern-modal-entry-text {
  font-family: 'Georgia', serif;
  font-size: 14px;
  line-height: 1.5;
  color: #1f2a37;
}
.pattern-modal-entries-empty {
  font-family: 'Georgia', serif;
  font-style: italic;
  color: #6b7280;
  padding: 10px 0;
}
.tl-pattern-card:nth-child(6n+1) { border-top: 4px solid var(--green); }
.tl-pattern-card:nth-child(6n+2) { border-top: 4px solid var(--navy); }
.tl-pattern-card:nth-child(6n+3) { border-top: 4px solid var(--coral); }
.tl-pattern-card:nth-child(6n+4) { border-top: 4px solid var(--blue); }
.tl-pattern-card:nth-child(6n+5) { border-top: 4px solid #b8a0d4; }
.tl-pattern-card:nth-child(6n+6) { border-top: 4px solid #d4b896; }
.tl-pattern-card-header {
  padding: 1.1rem 1.4rem 0.75rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  user-select: none;
}
.tl-pattern-card-header:hover { background: rgba(45,72,96,0.02); }
.tl-pattern-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1rem;
  color: var(--navy);
  letter-spacing: 0.01em;
  flex: 1;
}
.tl-pattern-header-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.tl-pattern-count {
  font-size: 0.75rem;
  color: var(--text-muted);
  background: rgba(45,72,96,0.06);
  border-radius: 20px;
  padding: 0.15rem 0.55rem;
  font-family: 'Montserrat', sans-serif;
}
.tl-pattern-toggle {
  font-size: 0.65rem;
  color: var(--text-muted);
  transition: transform 0.2s;
}
.tl-pattern-insight {
  padding: 0 1.4rem 1rem;
  font-size: 0.88rem;
  color: var(--text-light);
  font-style: italic;
  line-height: 1.55;
}
.tl-pattern-entries {
  border-top: 1px solid var(--border);
  padding: 0.75rem 1.4rem 1.1rem;
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.tl-pattern-entries.tl-pattern-entries-collapsed {
  display: none;
}
.tl-pattern-entry {
  font-size: 0.85rem;
  color: var(--text);
  line-height: 1.5;
  padding: 0.45rem 0.75rem;
  background: rgba(45,72,96,0.03);
  border-radius: 8px;
  border-left: 3px solid transparent;
}
.tl-pattern-entry[data-type="thought"] { border-left-color: var(--green); }
.tl-pattern-entry[data-type="idea"] { border-left-color: var(--coral); }
.tl-pattern-entry[data-type="note"] { border-left-color: var(--blue); }
.tl-pattern-entry[data-type="journal"] { border-left-color: #b8a0d4; }

/* ===== Capture Import Button ===== */
.capture-import-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.35rem 0.85rem;
  font-size: 0.78rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--text-light);
  cursor: pointer;
  transition: all 0.18s;
  letter-spacing: 0.03em;
}
.capture-import-btn:hover {
  border-color: var(--navy);
  color: var(--navy);
  background: rgba(45,72,96,0.04);
}

/* ===== Import Modal ===== */
.import-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28,28,28,0.55);
  backdrop-filter: blur(4px);
  z-index: 9900;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  animation: fadeIn 0.18s ease;
}
.import-modal-content {
  background: #fff;
  border-radius: 18px;
  width: 100%;
  max-width: 560px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 20px 60px rgba(28,28,28,0.18);
  position: relative;
}
.import-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.4rem 1.6rem 1rem;
  border-bottom: 1px solid var(--border);
}
.import-modal-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 1.05rem;
  color: var(--navy);
  letter-spacing: 0.01em;
}
.import-modal-close {
  background: none;
  border: none;
  font-size: 1.3rem;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  line-height: 1;
  border-radius: 6px;
  transition: background 0.15s;
}
.import-modal-close:hover { background: rgba(45,72,96,0.07); color: var(--navy); }
.import-tabs {
  display: flex;
  gap: 0;
  border-bottom: 1px solid var(--border);
  padding: 0 1.6rem;
}
.import-tab {
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  padding: 0.75rem 1rem;
  font-size: 0.82rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  letter-spacing: 0.02em;
}
.import-tab:hover { color: var(--navy); }
.import-tab.active { color: var(--navy); border-bottom-color: var(--green); }
.import-pane {
  display: none;
  padding: 1.4rem 1.6rem;
}
.import-pane.active { display: block; }
.import-pane-label {
  font-size: 0.8rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.6rem;
}
.import-textarea {
  width: 100%;
  min-height: 140px;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  font-size: 0.9rem;
  font-family: 'Merriweather', Georgia, serif;
  color: var(--text);
  resize: vertical;
  line-height: 1.6;
  transition: border-color 0.15s;
}
.import-textarea:focus { outline: none; border-color: var(--green); }
.import-url-input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 1rem;
  font-size: 0.9rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--text);
  transition: border-color 0.15s;
}
.import-url-input:focus { outline: none; border-color: var(--green); }
.import-url-hint {
  font-size: 0.78rem;
  color: var(--text-muted);
  margin-top: 0.5rem;
  font-style: italic;
}
.import-drop-zone {
  border: 2px dashed var(--border);
  border-radius: 12px;
  padding: 2.5rem 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  background: rgba(141,184,138,0.04);
}
.import-drop-zone:hover, .import-drop-zone.drag-over {
  border-color: var(--green);
  background: rgba(141,184,138,0.1);
}
.import-drop-icon { font-size: 2rem; margin-bottom: 0.6rem; }
.import-drop-label {
  font-size: 0.88rem;
  color: var(--text-muted);
  line-height: 1.5;
}
.import-drop-label strong { color: var(--navy); cursor: pointer; }
.import-preview-img {
  width: 100%;
  max-height: 200px;
  object-fit: contain;
  border-radius: 8px;
  margin-top: 0.75rem;
  border: 1px solid var(--border);
}
.import-status {
  margin-top: 0.85rem;
  font-size: 0.82rem;
  color: var(--text-muted);
  font-style: italic;
  min-height: 1.2em;
}
.import-status.success { color: var(--green); font-style: normal; font-weight: 600; }
.import-status.error { color: #c0392b; font-style: normal; }
.import-actions {
  padding: 0 1.6rem 1.4rem;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}
.import-run-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.7rem 1.6rem;
  font-size: 0.88rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.18s;
}
.import-run-btn:hover { background: var(--green); }
.import-run-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.import-cancel-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.7rem 1.2rem;
  font-size: 0.88rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.import-cancel-btn:hover { border-color: var(--navy); color: var(--navy); }

@media (max-width: 480px) {
  .import-modal-content { border-radius: 14px; }
  .import-modal-header, .import-pane, .import-actions { padding-left: 1.2rem; padding-right: 1.2rem; }
  .import-tabs { padding: 0 1.2rem; }
}

/* ===== Digest — Mini Thinking Lab Card ===== */
.digest-mini-tl {
  background: linear-gradient(165deg, #a8c9dd 0%, #6c95b3 100%);
  border-radius: 18px;
  padding: 1.75rem 1.6rem 1.4rem;
  margin: 2rem 0 1.5rem;
  position: relative;
  overflow: hidden;
  color: white;
  text-shadow: 0 1px 2px rgba(45,72,96,0.25);
  box-shadow: 0 8px 24px rgba(45,72,96,0.12);
}
.digest-mini-tl::before {
  content: '';
  position: absolute;
  top: -40px; right: -40px;
  width: 140px; height: 140px;
  border-radius: 50%;
  background: rgba(196,219,190,0.32);
  pointer-events: none;
}
.digest-mini-tl-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #6e9b62;
  text-shadow: none;
  margin-bottom: 0.3rem;
}
.digest-mini-tl-sub {
  font-size: 0.85rem;
  color: rgba(255,255,255,0.78);
  margin-bottom: 1rem;
  line-height: 1.45;
}
.digest-mini-tl-input-row {
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.digest-mini-tl-input {
  flex: 1;
  background: rgba(255,255,255,0.22);
  border: 1px solid rgba(255,255,255,0.3);
  border-radius: 10px;
  padding: 0.65rem 1rem;
  font-size: 0.9rem;
  font-family: 'Merriweather', Georgia, serif;
  color: #fff;
  transition: border-color 0.15s, background 0.15s;
}
.digest-mini-tl-input::placeholder { color: rgba(255,255,255,0.6); }
.digest-mini-tl-input:focus { outline: none; border-color: #c4dbbe; background: rgba(255,255,255,0.32); }
.digest-mini-tl-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.65rem 1.2rem;
  font-size: 0.82rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  cursor: pointer;
  letter-spacing: 0.04em;
  transition: background 0.15s;
  white-space: nowrap;
}
.digest-mini-tl-btn:hover { background: var(--green-light); }
.digest-mini-tl-flash {
  font-size: 0.78rem;
  color: var(--green-light);
  margin-top: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
.digest-mini-tl-link {
  display: inline-block;
  margin-top: 0.75rem;
  font-size: 0.78rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  color: rgba(255,255,255,0.5);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.15s;
}
.digest-mini-tl-link:hover { color: var(--green-light); }

/* ===== Digest — News Article Bookmark ===== */
.dns-card {
  position: relative;
}
.dns-bookmark-btn {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 1rem;
  color: var(--border);
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  line-height: 1;
  transition: color 0.15s, transform 0.15s;
}
.dns-bookmark-btn:hover { color: var(--navy); transform: scale(1.15); }
.dns-bookmark-btn.saved { color: var(--navy); }

/* ===== Org Admin Dashboard ===== */
.oa-wrap {
  padding: 2rem 1.5rem 5rem;
}
.oa-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 1.75rem;
  flex-wrap: wrap;
  gap: 1rem;
}
.oa-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.3rem;
}
.oa-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.1;
}
.oa-invite-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 0.6rem 1.25rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.15s;
  white-space: nowrap;
}
.oa-invite-btn:hover { background: var(--green); }

/* Stats row */
.oa-stats-row {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 2rem;
}
@media (max-width: 600px) { .oa-stats-row { grid-template-columns: repeat(2, 1fr); } }
.oa-stat {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 1.1rem 1.25rem;
  text-align: center;
}
.oa-stat-accent { border-top: 3px solid var(--green); }
.oa-stat-value {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 1.75rem;
  color: var(--navy);
  line-height: 1;
  margin-bottom: 0.35rem;
}
.oa-stat-label {
  font-size: 0.72rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--text-muted);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

/* Two-column body */
.oa-body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1.75rem;
  align-items: start;
}
@media (max-width: 720px) { .oa-body { grid-template-columns: 1fr; } }

.oa-section-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.85rem;
}

/* Team member cards */
.oa-team-list { display: flex; flex-direction: column; gap: 0.75rem; }
.oa-member-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  transition: box-shadow 0.15s;
}
.oa-member-card:hover { box-shadow: 0 2px 10px rgba(45,72,96,0.08); }
.oa-member-info { flex: 1; min-width: 0; }
.oa-member-name {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.88rem;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.oa-owner-badge {
  display: inline-block;
  background: rgba(141,184,138,0.18);
  color: var(--green);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  border-radius: 10px;
  padding: 0.1rem 0.45rem;
  vertical-align: middle;
  margin-left: 0.3rem;
}
.oa-member-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 0.45rem;
}
.oa-week-count { color: var(--green); font-weight: 600; }
.oa-member-bar-wrap {
  background: rgba(45,72,96,0.07);
  border-radius: 4px;
  height: 5px;
  overflow: hidden;
}
.oa-member-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--green) 0%, var(--navy) 100%);
  border-radius: 4px;
  min-width: 4px;
  transition: width 0.5s ease;
}

/* KM health */
.oa-km-health { display: flex; flex-direction: column; gap: 0.6rem; }
.oa-km-row {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  padding: 0.6rem 0.85rem;
  border-radius: 10px;
  background: #fff;
  border: 1px solid var(--border);
}
.oa-km-active { border-left: 3px solid var(--green); }
.oa-km-quiet  { border-left: 3px solid rgba(45,72,96,0.15); opacity: 0.7; }
.oa-km-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.oa-km-active .oa-km-dot { background: var(--green); }
.oa-km-quiet  .oa-km-dot { background: rgba(45,72,96,0.2); }
.oa-km-title {
  flex: 1;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.82rem;
  color: var(--navy);
}
.oa-km-count {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
}

/* Recent stories */
.oa-recent-stories { display: flex; flex-direction: column; gap: 0.6rem; }
.oa-story-row {
  background: #fff;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 0.75rem 0.9rem;
  cursor: pointer;
  transition: box-shadow 0.15s, border-color 0.15s;
}
.oa-story-row:hover { box-shadow: 0 2px 10px rgba(45,72,96,0.08); border-color: rgba(45,72,96,0.2); }
.oa-story-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 0.85rem;
  color: var(--navy);
  margin-bottom: 0.2rem;
}
.oa-story-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
  margin-bottom: 0.3rem;
}
.oa-story-excerpt {
  font-size: 0.8rem;
  color: var(--text-light);
  line-height: 1.45;
  font-style: italic;
}

/* Pending invites */
.oa-invites-list { display: flex; flex-direction: column; gap: 0.5rem; }
.oa-invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.6rem 0.85rem;
  background: rgba(141,184,138,0.06);
  border: 1px dashed rgba(141,184,138,0.4);
  border-radius: 10px;
}
.oa-invite-email {
  font-size: 0.83rem;
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
}
.oa-invite-meta {
  font-size: 0.72rem;
  color: var(--text-muted);
  font-family: 'Montserrat', sans-serif;
}

.oa-empty-hint {
  font-size: 0.85rem;
  color: var(--text-muted);
  font-style: italic;
  padding: 0.5rem 0;
}

/* Nav org admin link */
.nav-org-admin-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--navy) !important;
  text-decoration: none;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  padding: 0.32rem 0.7rem;
  border-radius: 7px;
  background: rgba(45, 72, 96, 0.06);
  transition: background 0.12s;
}
.nav-org-admin-link:hover { background: rgba(45, 72, 96, 0.12); }

/* Single horizon prompt */
.digest-focus-single {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-style: italic;
  color: var(--navy);
  line-height: 1.6;
  padding: 0.25rem 0 0.1rem;
  width: 100%;
  max-width: 100%;
}
.digest-focus-expand-btn {
  background: none;
  border: none;
  padding: 0.4rem 0 0;
  font-size: 0.82rem;
  color: var(--text-light);
  cursor: pointer;
  letter-spacing: 0.02em;
  display: block;
  margin-top: 0.25rem;
}
.digest-focus-expand-btn:hover { color: var(--navy); }

/* ===== Mission Reveal Badge ===== */
.mission-reveal-badge {
  display: inline-block;
  margin-top: 0.6rem;
  background: linear-gradient(135deg, var(--green) 0%, #5a9e70 100%);
  color: #fff;
  border: none;
  border-radius: 20px;
  padding: 0.3rem 0.85rem;
  font-size: 0.72rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  animation: missionPulse 2.5s ease-in-out infinite;
  transition: transform 0.15s, box-shadow 0.15s;
}
.mission-reveal-badge:hover {
  transform: scale(1.04);
  box-shadow: 0 4px 14px rgba(141,184,138,0.45);
  animation: none;
}
@keyframes missionPulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(141,184,138,0.5); }
  50%       { box-shadow: 0 0 0 7px rgba(141,184,138,0); }
}

/* ===== Mission Reveal Overlay / Drawer ===== */
.mission-reveal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(28,28,28,0.5);
  backdrop-filter: blur(4px);
  z-index: 9800;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  animation: fadeIn 0.2s ease;
}
.mission-reveal-drawer {
  background: #fff;
  border-radius: 22px 22px 0 0;
  width: 100%;
  max-width: 640px;
  padding: 2.25rem 2rem 2.5rem;
  position: relative;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 -8px 40px rgba(28,28,28,0.15);
  animation: slideUp 0.28s cubic-bezier(0.34,1.4,0.64,1);
}
@keyframes slideUp {
  from { transform: translateY(100%); opacity: 0; }
  to   { transform: translateY(0);    opacity: 1; }
}
.mission-reveal-close {
  position: absolute;
  top: 1.1rem; right: 1.3rem;
  background: none; border: none;
  font-size: 1.2rem; color: var(--text-muted);
  cursor: pointer; padding: 0.3rem;
}
.mr-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: 0.4rem;
}
.mr-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.9rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.6rem;
  line-height: 1.2;
}
.mr-basis {
  font-size: 0.88rem;
  color: var(--text-light);
  font-style: italic;
  margin-bottom: 1.5rem;
  line-height: 1.55;
}
.mr-loading {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  padding: 1rem 0;
  color: var(--text-muted);
  font-size: 0.88rem;
}
.mr-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
@media (max-width: 520px) { .mr-cards { grid-template-columns: 1fr; } }
.mr-card {
  border-radius: 14px;
  padding: 1.25rem 1.1rem 1rem;
  position: relative;
}
.mr-card-mission {
  background: rgba(141,184,138,0.08);
  border: 1.5px solid rgba(141,184,138,0.3);
}
.mr-card-vision {
  background: rgba(45,72,96,0.05);
  border: 1.5px solid rgba(45,72,96,0.15);
}
.mr-card-label {
  font-family: 'Montserrat', sans-serif;
  font-weight: 800;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 0.5rem;
}
.mr-card-text {
  font-size: 0.92rem;
  line-height: 1.6;
  color: var(--navy);
  margin-bottom: 0.9rem;
  font-family: 'Merriweather', Georgia, serif;
}
.mr-card-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.mr-accept-btn {
  background: var(--navy);
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  cursor: pointer;
  transition: background 0.15s;
}
.mr-accept-btn:hover { background: var(--green); }
.mr-edit-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 0.4rem 0.9rem;
  font-size: 0.78rem;
  font-family: 'Montserrat', sans-serif;
  color: var(--text-muted);
  cursor: pointer;
  transition: all 0.15s;
}
.mr-edit-btn:hover { border-color: var(--navy); color: var(--navy); }
.mr-card-accepted {
  font-size: 0.85rem;
  color: var(--green);
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  padding: 0.5rem 0;
}
.mr-dismiss-btn {
  background: none;
  border: none;
  font-size: 0.8rem;
  color: var(--text-muted);
  cursor: pointer;
  font-family: 'Montserrat', sans-serif;
  text-decoration: underline;
  padding: 0;
  transition: color 0.15s;
}
.mr-dismiss-btn:hover { color: var(--navy); }

/* ===== Thinking Lab — Saved Articles Tab ===== */
.tl-filter-saved { color: var(--navy); }
.tl-filter-saved.tl-filter-active { border-bottom-color: var(--navy); color: var(--navy); }

.tl-saved-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  padding: 0.5rem 0 4rem;
}
.tl-saved-card {
  background: #fff;
  border-radius: 12px;
  border: 1px solid var(--border);
  padding: 0.85rem 1rem;
  display: grid;
  grid-template-columns: 1fr auto auto;
  align-items: center;
  gap: 0.75rem;
  transition: box-shadow 0.15s;
}
.tl-saved-card:hover { box-shadow: 0 2px 10px rgba(45,72,96,0.08); }
.tl-saved-title {
  font-size: 0.9rem;
  color: var(--navy);
  font-weight: 600;
  text-decoration: none;
  line-height: 1.4;
}
.tl-saved-title:hover { text-decoration: underline; }
.tl-saved-meta {
  font-size: 0.75rem;
  color: var(--text-muted);
  white-space: nowrap;
  font-family: 'Montserrat', sans-serif;
}
.tl-saved-remove {
  background: none;
  border: none;
  color: rgba(180,100,100,0.4);
  font-size: 0.8rem;
  cursor: pointer;
  padding: 0.2rem 0.3rem;
  transition: color 0.15s;
}
.tl-saved-remove:hover { color: #c0392b; }

/* ── How Path (screen 2 of signup) ── */
#screen-how-path { background: var(--bg); }
.hp-wrap {
  max-width: 680px;
  margin: 0 auto;
  padding: 36px 20px 60px;
  text-align: center;
}
.hp-greeting {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.25rem;
  font-style: italic;
  color: var(--mid);
  margin-bottom: 8px;
}
.hp-title {
  font-size: 1.75rem;
  font-weight: 700;
  color: var(--dark);
  margin: 0 0 14px;
  line-height: 1.2;
}
.hp-title-how {
  color: var(--green, #2d6a4f);
  font-style: italic;
}
.hp-intro {
  font-size: 0.9rem;
  color: var(--mid);
  line-height: 1.65;
  max-width: 520px;
  margin: 0 auto 30px;
}

/* Pipeline visual */
.hp-pipeline {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0;
  margin: 0 auto 32px;
  max-width: 320px;
}
.hp-pipe-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}
.hp-pipe-dot {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--green);
  color: white;
  font-size: 0.78rem;
  font-weight: 700;
  font-family: 'Montserrat', sans-serif;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hp-pipe-name {
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-family: 'Montserrat', sans-serif;
  white-space: nowrap;
}
.hp-pipe-line {
  flex: 1;
  height: 2px;
  background: #c8e6d0;
  margin: 0 6px;
  margin-bottom: 20px;
  min-width: 28px;
}

.hp-cta-label {
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-family: 'Montserrat', sans-serif;
  margin: 0 0 16px;
}

/* How-path typing zone — same parchment-framed container as the
   regular onboarding step-1, but with margins that fit the how-path
   layout (pipeline above, chips below). */
.hp-typing-zone {
  margin: 18px 0 12px;
}

.hp-prompt-chips {
  margin-bottom: 8px;
}

.hp-cta-row {
  display: flex;
  justify-content: flex-end;
  margin: 14px 0 24px;
}
.hp-save-btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 24px;
  border-radius: 999px;
}

/* Alternate modes — softer, smaller, below the typing zone. The
   typing zone is the default; talking modes are secondary. */
.hp-alt-modes {
  margin-top: 28px;
  padding-top: 22px;
  border-top: 1px solid var(--border, #e6dcc4);
}
.hp-alt-modes-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: #6b7280;
  margin: 0 0 10px;
}
.hp-alt-modes-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px;
}
.hp-alt-mode-btn {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  background: #fff;
  border: 1px solid var(--border, #e6dcc4);
  border-radius: 10px;
  padding: 10px 14px;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
.hp-alt-mode-btn:hover {
  border-color: var(--green, #2d6a4f);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45,72,96,0.08);
}
.hp-alt-mode-icon {
  font-size: 18px;
  line-height: 1.2;
  color: var(--green, #2d6a4f);
  margin-top: 2px;
}
.hp-alt-mode-text {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.hp-alt-mode-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: #1f2a37;
}
.hp-alt-mode-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  color: #6b7280;
  line-height: 1.4;
}
.hp-cards {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
@media (min-width: 540px) {
  .hp-cards { flex-direction: row; }
}
.hp-card {
  flex: 1;
  background: white;
  border: 2px solid var(--border);
  border-radius: 16px;
  padding: 22px 18px;
  cursor: pointer;
  text-align: left;
  transition: border-color 0.2s, box-shadow 0.2s, transform 0.15s;
}
.hp-card:hover {
  border-color: var(--green);
  box-shadow: 0 6px 24px rgba(0,0,0,0.09);
  transform: translateY(-2px);
}
.hp-card-conversation {
  border-color: #c8e6d0;
  background: linear-gradient(135deg, #f6fdf8 0%, white 100%);
}
.hp-card-icon {
  font-size: 1.3rem;
  color: var(--green);
  margin-bottom: 9px;
}
.hp-card-label {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--dark);
  margin-bottom: 6px;
}
.hp-card-desc {
  font-size: 0.8rem;
  color: var(--mid);
  line-height: 1.55;
  margin-bottom: 12px;
}
.hp-card-cta {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--green);
}

/* ── How Conversation ── */
#screen-how-conversation { background: var(--bg); }
.hc-wrap {
  max-width: 560px;
  margin: 0 auto;
  padding: 32px 20px 60px;
}
.hc-progress-bar {
  height: 4px;
  background: var(--border);
  border-radius: 2px;
  margin-bottom: 20px;
  overflow: hidden;
}
.hc-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 2px;
  transition: width 0.4s ease;
  width: 20%;
}
.hc-question-num {
  font-size: 0.75rem;
  color: var(--mid);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin-bottom: 22px;
  font-family: 'Montserrat', sans-serif;
}
.hc-question-block {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-bottom: 28px;
}
.hc-agent-icon {
  font-size: 1.2rem;
  color: var(--green);
  margin-top: 3px;
  flex-shrink: 0;
}
.hc-question-text {
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.4rem;
  color: var(--dark);
  line-height: 1.45;
  font-style: italic;
}
.hc-answer-block { margin-top: 4px; }
.hc-answer-input {
  width: 100%;
  border: 1.5px solid var(--border);
  border-radius: 10px;
  padding: 14px 16px;
  font-size: 0.95rem;
  font-family: 'Merriweather', serif;
  line-height: 1.65;
  resize: vertical;
  min-height: 110px;
  box-sizing: border-box;
  color: var(--dark);
  background: white;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.hc-answer-input:focus {
  outline: none;
  border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(34,139,64,0.08);
}
.hc-answer-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
}
.hc-next-btn {
  background: var(--green);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.hc-next-btn:hover { background: #1a6b3a; }
.hc-voice-btn {
  display: flex;
  align-items: center;
  gap: 5px;
  background: none;
  border: 1.5px solid var(--border);
  border-radius: 7px;
  padding: 9px 14px;
  font-size: 0.82rem;
  color: var(--mid);
  cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.hc-voice-btn:hover { border-color: var(--green); color: var(--green); }
.hc-voice-btn.recording { border-color: #e74c3c; color: #e74c3c; }

/* Synthesis reveal */
.hc-reveal { margin-top: 8px; }
.hc-reveal-loading {
  display: flex;
  align-items: center;
  gap: 10px;
  color: var(--mid);
  font-size: 0.9rem;
  padding: 28px 0;
}
.hc-reveal-eyebrow {
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--green);
  margin-bottom: 14px;
  font-family: 'Montserrat', sans-serif;
}
.hc-reveal-synthesis {
  font-size: 1rem;
  line-height: 1.75;
  color: var(--dark);
  margin: 0 0 26px;
}
.hc-km-card {
  background: linear-gradient(135deg, #f0faf3 0%, #e8f7ed 100%);
  border: 1.5px solid #c8e6d0;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 20px;
}
.hc-km-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  color: var(--green);
  margin-bottom: 6px;
  font-family: 'Montserrat', sans-serif;
}
.hc-km-title {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--dark);
  margin-bottom: 6px;
}
.hc-km-desc {
  font-size: 0.88rem;
  color: var(--mid);
  line-height: 1.5;
}
.hc-mission-hint {
  background: #fffdf0;
  border: 1.5px solid #e8d96a;
  border-radius: 10px;
  padding: 16px;
  margin-bottom: 22px;
}
.hc-mission-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #9a8000;
  margin-bottom: 6px;
  font-family: 'Montserrat', sans-serif;
}
.hc-mission-text {
  font-size: 0.92rem;
  color: var(--dark);
  font-style: italic;
  font-family: 'Cormorant Garamond', serif;
  font-size: 1.1rem;
}
.hc-continue-btn {
  width: 100%;
  background: var(--green);
  color: white;
  border: none;
  border-radius: 10px;
  padding: 14px 24px;
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.hc-continue-btn:hover { background: #1a6b3a; }

/* Floating admin button (admin users only) */
.admin-floating-btn {
  position: fixed !important;
  bottom: 24px !important;
  left: 24px !important;
  background: #2c4360 !important;
  color: white !important;
  border: none !important;
  padding: 10px 22px !important;
  border-radius: 24px !important;
  font-weight: 700 !important;
  font-size: 0.8rem !important;
  letter-spacing: 0.08em !important;
  cursor: pointer !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.25) !important;
  z-index: 99999 !important;
  transition: transform 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.admin-floating-btn:hover {
  background: #1f3047;
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(0,0,0,0.24);
}
.admin-floating-btn.hidden { display: none; }
.admin-floating-btn--pending { opacity: 0.9; }

/* The floating ADMIN button is redundant — the green bottom bar
   already carries an "LWH Admin" link wherever the bar shows, and
   the landing/auth screens have no need for admin access. So hide
   the floating button across the board. Easy to bring back later
   on specific screens by removing this rule. */
.admin-floating-btn {
  display: none !important;
}

/* Save-feedback toast — bottom-left, above the floating ADMIN button */
.lwh-save-toast {
  position: fixed;
  bottom: 80px;
  left: 24px;
  background: #2D4860;
  color: white;
  padding: 12px 22px;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-weight: 600;
  font-size: 0.88rem;
  letter-spacing: 0.02em;
  box-shadow: 0 6px 20px rgba(0,0,0,0.18);
  z-index: 99999;
  opacity: 0;
  transform: translateY(12px);
  pointer-events: none;
  transition: opacity 0.22s ease, transform 0.22s ease, background 0.18s ease;
}
.lwh-save-toast--show {
  opacity: 1;
  transform: translateY(0);
}
.lwh-save-toast--ok { background: #2e7d4a; }
.lwh-save-toast--err {
  background: #b53b3b;
  padding: 14px 22px;
  font-size: 0.9rem;
}

/* ===== How Conversation — chic icon refresh + continuous mode ===== */
.hc-icon-btn {
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.18);
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
  flex-shrink: 0;
}
.hc-icon-btn:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.35);
  transform: translateY(-1px);
}
.hc-icon-btn:active { transform: translateY(0); }
.hc-icon-svg { display: block; }
.hc-icon-svg.hidden { display: none; }

/* Refined send button */
.how-convo-type-send {
  background: rgba(255,255,255,0.20);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background 0.18s ease, transform 0.18s ease;
  flex-shrink: 0;
}
.how-convo-type-send:hover {
  background: rgba(255,255,255,0.32);
  transform: translateX(2px);
}

/* Refined mic — bigger, gradient, animated pulse when active */
.how-convo-card .how-convo-mic {
  width: 76px !important;
  height: 76px !important;
  border-radius: 50% !important;
  background: linear-gradient(135deg, #9bc594 0%, #6f9e6a 100%) !important;
  border: none !important;
  color: white !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer;
  box-shadow: 0 8px 28px rgba(111,158,106,0.45), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  transition: transform 0.18s ease, box-shadow 0.18s ease !important;
  position: relative;
}
.how-convo-card .how-convo-mic:hover {
  background: linear-gradient(135deg, #aad2a3 0%, #7eaf78 100%) !important;
  transform: scale(1.04);
}
.how-convo-card .how-convo-mic.recording,
.how-convo-card .how-convo-mic.continuous-on {
  background: linear-gradient(135deg, #e8a898 0%, #c47e6c 100%) !important;
  box-shadow: 0 8px 28px rgba(196,126,108,0.55), inset 0 1px 0 rgba(255,255,255,0.18) !important;
  animation: hcMicPulse 1.5s ease-in-out infinite;
}
@keyframes hcMicPulse {
  0%, 100% { transform: scale(1); box-shadow: 0 8px 28px rgba(196,126,108,0.55), inset 0 1px 0 rgba(255,255,255,0.18); }
  50%      { transform: scale(1.06); box-shadow: 0 10px 34px rgba(196,126,108,0.7),  inset 0 1px 0 rgba(255,255,255,0.18); }
}
.hc-mic-svg { display: block; }

/* Continuous-listen toggle pill */
.how-convo-continuous-btn {
  margin-top: 0.75rem;
  background: rgba(255,255,255,0.10);
  border: 1px solid rgba(255,255,255,0.25);
  color: rgba(255,255,255,0.92);
  border-radius: 999px;
  padding: 7px 16px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease, transform 0.18s ease;
}
.how-convo-continuous-btn:hover {
  background: rgba(255,255,255,0.22);
  border-color: rgba(255,255,255,0.4);
}
.how-convo-continuous-btn.active {
  background: rgba(232,168,152,0.92);
  border-color: rgba(232,168,152,0.5);
  color: #2D4860;
  box-shadow: 0 4px 14px rgba(232,168,152,0.5);
}
.hc-continuous-label { letter-spacing: 0.08em; }

/* Polished eyebrow */
.how-convo-card .how-convo-eyebrow {
  font-weight: 800 !important;
  letter-spacing: 0.16em !important;
  font-size: 0.7rem !important;
}

/* Daily Digest — 3-card chapter framer at top */
.digest-chapter-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
  max-width: 760px;
  margin: 1.5rem auto 2rem;
}
.digest-chapter-card {
  background: white;
  border: 1px solid rgba(45,72,96,0.12);
  border-radius: 14px;
  padding: 1.25rem 1rem;
  text-align: center;
  cursor: pointer;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  font-family: inherit;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.4rem;
  box-shadow: 0 2px 8px rgba(45,72,96,0.04);
}
.digest-chapter-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 6px 18px rgba(45,72,96,0.10);
  border-color: rgba(141,184,138,0.6);
}
.digest-chapter-card .dcc-icon {
  font-size: 1.4rem;
  color: var(--green, #8DB88A);
  line-height: 1;
  margin-bottom: 0.2rem;
}
.digest-chapter-card .dcc-svg {
  color: var(--green, #8DB88A);
  margin-bottom: 0.4rem;
  transition: transform 0.25s ease, color 0.25s ease;
}
.digest-chapter-card:hover .dcc-svg {
  color: #2D4860;
  transform: scale(1.06);
}
.digest-field-placeholder {
  background: rgba(141,184,138,0.06);
  border: 1px dashed rgba(141,184,138,0.4);
  border-radius: 12px;
  padding: 1.25rem 1.5rem;
  margin: 1.5rem auto;
  max-width: 720px;
  text-align: center;
}
.digest-field-placeholder .dfp-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  color: var(--green, #6e9b62);
  margin-bottom: 0.5rem;
}
.digest-field-placeholder .dfp-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  color: rgba(45,72,96,0.7);
  line-height: 1.5;
  font-style: italic;
}
.digest-chapter-card .dcc-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #2D4860;
  letter-spacing: 0.01em;
}
.digest-chapter-card .dcc-hint {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  color: rgba(45,72,96,0.55);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .digest-chapter-cards { grid-template-columns: 1fr; max-width: 360px; }
}

/* Branded file input — hidden native control + styled label */
.file-input-wrap {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  flex-wrap: wrap;
}
.file-input-hidden {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.file-input-label {
  display: inline-flex;
  align-items: center;
  background: white;
  color: #2D4860;
  border: 1.5px solid rgba(45,72,96,0.25);
  border-radius: 999px;
  padding: 0.5rem 1.1rem;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
}
.file-input-label:hover {
  background: rgba(141,184,138,0.1);
  border-color: var(--green, #8DB88A);
  transform: translateY(-1px);
}
.file-input-status {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.82rem;
  color: rgba(45,72,96,0.6);
}
.file-input-hint {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.72rem;
  color: rgba(45,72,96,0.5);
  margin-top: 0.5rem;
  letter-spacing: 0.02em;
}

/* Digest section anchors — leave room for the top nav when scrolled to */
#digest-section-impact, #digest-section-field, #digest-section-next {
  scroll-margin-top: 90px;
}

/* Daily Digest — The Road zone (Thinking Lab + Patterns + What's Next) */
.digest-zone-road {
  background: rgba(141,184,138,0.04);
  border: 1px solid rgba(141,184,138,0.18);
  border-radius: 14px;
  padding: 1.5rem 1.75rem;
  margin: 2rem 0;
}
.digest-zone-road .dz-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #2D4860;
  margin-bottom: 0;
}
.road-section {
  margin-bottom: 1.5rem;
}
.road-section:last-child { margin-bottom: 0; }
.road-section-label {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green, #6e9b62);
  margin-bottom: 0.65rem;
}
.road-thoughts { display: flex; flex-direction: column; gap: 0.5rem; }
.road-thought {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  padding: 0.7rem 0.9rem;
  background: white;
  border: 1px solid rgba(45,72,96,0.1);
  border-radius: 10px;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease;
}
.road-thought:hover {
  border-color: var(--green, #8DB88A);
  transform: translateX(2px);
}
.road-thought-icon {
  color: var(--green, #6e9b62);
  font-size: 0.95rem;
  flex-shrink: 0;
  margin-top: 0.05rem;
}
.road-thought-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem;
  color: rgba(45,72,96,0.88);
  line-height: 1.45;
}
.road-section-link {
  display: inline-block;
  margin-top: 0.6rem;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  color: var(--green, #6e9b62);
  text-decoration: none;
  letter-spacing: 0.04em;
}
.road-section-link:hover { color: #2D4860; }

.road-pattern {
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(45,72,96,0.08);
}
.road-pattern:last-child { border-bottom: none; }
.road-pattern-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #2D4860;
  margin-bottom: 0.25rem;
}
.road-pattern-desc {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.98rem;
  color: rgba(45,72,96,0.7);
  line-height: 1.5;
}

.road-suggestions {
  list-style: none;
  padding: 0;
  margin: 0;
}
.road-suggestions li {
  position: relative;
  padding: 0.5rem 0 0.5rem 1.25rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem;
  color: rgba(45,72,96,0.85);
  line-height: 1.5;
  border-bottom: 1px dashed rgba(45,72,96,0.1);
}
.road-suggestions li:last-child { border-bottom: none; }
.road-suggestions li::before {
  content: '→';
  position: absolute;
  left: 0;
  top: 0.5rem;
  color: var(--coral, #E8A898);
  font-weight: 700;
}

/* Key Move encouragement card — small square that floats to the right
   so the core impact statement sits naturally close under the model rail */
.km-encouragement-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  width: 120px;
  height: 120px;
  float: right;
  clear: both;
  margin: 0 1.5rem 0.5rem 0;
  padding: 0.7rem 0.6rem;
  background: linear-gradient(135deg, #f5ebe2 0%, #eed8c9 100%);
  border: 1px solid rgba(232, 168, 152, 0.45);
  border-radius: 16px;
  box-shadow: 0 4px 14px rgba(232, 168, 152, 0.18);
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  pointer-events: none;
}
.km-encouragement-card.show {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.km-encouragement-card .kmenc-icon {
  font-size: 0.95rem;
  color: #c47e6c;
  margin-bottom: 0.1rem;
}
.km-encouragement-card .kmenc-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  font-weight: 700;
  color: #2D4860;
  line-height: 1.05;
}
.km-encouragement-card .kmenc-subtitle {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.72rem;
  font-style: italic;
  color: #c47e6c;
  margin: 0 0 0.25rem;
}
.km-encouragement-card .kmenc-text {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.68rem;
  color: rgba(45, 72, 96, 0.72);
  line-height: 1.3;
}
.km-encouragement-card .kmenc-close {
  position: absolute;
  top: 0.4rem;
  right: 0.5rem;
  background: none;
  border: none;
  font-size: 0.9rem;
  color: rgba(45, 72, 96, 0.4);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  line-height: 1;
}
.km-encouragement-card .kmenc-close:hover { color: rgba(45, 72, 96, 0.8); }

/* Story drawer media grid — star overlay to mark a photo as the key/cover photo */
.story-drawer-media-grid .sdmg-photo {
  position: relative;
  display: inline-block;
}
.story-drawer-media-grid .sdmg-photo img {
  display: block;
  cursor: pointer;
  border-radius: 8px;
}
.sdmg-key-btn {
  position: absolute;
  top: 8px;
  right: 8px;
  background: rgba(255,255,255,0.92);
  border: none;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  color: rgba(45, 72, 96, 0.55);
  box-shadow: 0 2px 8px rgba(0,0,0,0.18);
  transition: transform 0.18s ease, color 0.18s ease, background 0.18s ease;
  line-height: 1;
}
.sdmg-key-btn:hover {
  color: var(--coral, #E8A898);
  transform: scale(1.08);
}
.sdmg-key-btn.active {
  background: var(--coral, #E8A898);
  color: white;
}
.sdmg-photo.is-key img {
  outline: 3px solid var(--coral, #E8A898);
  outline-offset: 1px;
}

/* Mission / Vision quick editor modal — open from M or V circle click */
.mv-editor-overlay {
  position: fixed;
  inset: 0;
  background: rgba(20, 32, 44, 0.55);
  z-index: 250;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem;
}
.mv-editor-overlay.hidden { display: none; }
.mv-editor-card {
  background: white;
  border-radius: 18px;
  padding: 2rem 2.25rem;
  max-width: 560px;
  width: 100%;
  position: relative;
  box-shadow: 0 24px 60px rgba(45,72,96,0.28);
}
.mv-editor-close {
  position: absolute;
  top: 1rem;
  right: 1.1rem;
  background: none;
  border: none;
  font-size: 1.2rem;
  color: rgba(45,72,96,0.5);
  cursor: pointer;
  padding: 0.25rem 0.5rem;
  line-height: 1;
}
.mv-editor-close:hover { color: rgba(45,72,96,0.9); }
.mv-editor-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.16em;
  color: var(--green, #6e9b62);
  margin-bottom: 0.4rem;
}
.mv-editor-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.8rem;
  font-weight: 700;
  color: #2D4860;
  margin: 0 0 0.6rem;
  line-height: 1.15;
}
.mv-editor-hint {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-style: italic;
  color: rgba(45,72,96,0.7);
  line-height: 1.45;
  margin: 0 0 1.25rem;
}
.mv-editor-input {
  width: 100%;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  line-height: 1.5;
  color: #2D4860;
  border: 1.5px solid rgba(45,72,96,0.18);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  outline: none;
  resize: vertical;
  transition: border-color 0.18s ease;
}
.mv-editor-input:focus { border-color: var(--green, #8DB88A); }
.mv-editor-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  margin-top: 1rem;
  flex-wrap: wrap;
}
.mv-editor-discover {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: white;
  border: 1.5px solid rgba(141,184,138,0.55);
  color: var(--green, #6e9b62);
  border-radius: 999px;
  padding: 0.5rem 1rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.mv-editor-discover:hover {
  background: rgba(141,184,138,0.08);
  transform: translateY(-1px);
}
.mv-editor-discover-icon { font-size: 0.9rem; }
.mv-editor-save {
  background: var(--green, #8DB88A);
  color: white;
  border: none;
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease;
}
.mv-editor-save:hover {
  background: #6e9b62;
  transform: translateY(-1px);
}
.mv-editor-status {
  margin-top: 0.85rem;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(45,72,96,0.6);
}
.mv-editor-status.hidden { display: none; }

/* Documents section — uploaded PDFs with AI summaries, Save-to-Lab action */
.documents-band {
  margin: 2.5rem auto;
  max-width: 1100px;
  padding: 0 1.5rem;
}
.documents-sub {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.95rem;
  color: rgba(45,72,96,0.65);
  margin: 0;
}
.documents-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}
.doc-card {
  position: relative;
  background: white;
  border: 1px solid rgba(45,72,96,0.12);
  border-radius: 12px;
  padding: 1.1rem 1.2rem;
  display: flex;
  gap: 0.85rem;
  cursor: pointer;
  transition: border-color 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
}
.doc-card:hover {
  border-color: rgba(141,184,138,0.6);
  transform: translateY(-2px);
  box-shadow: 0 6px 18px rgba(45,72,96,0.08);
}
.doc-card-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1.1;
}
.doc-card-body { flex: 1; min-width: 0; }
.doc-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 700;
  color: #2D4860;
  line-height: 1.2;
  margin-bottom: 0.2rem;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
}
.doc-card-meta {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  letter-spacing: 0.06em;
  color: rgba(45,72,96,0.55);
  margin-bottom: 0.5rem;
  text-transform: uppercase;
}
.doc-card-summary {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.95rem;
  color: rgba(45,72,96,0.78);
  line-height: 1.4;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
}
.doc-card-actions {
  position: absolute;
  top: 0.6rem;
  right: 0.6rem;
  display: flex;
  gap: 0.4rem;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.doc-card:hover .doc-card-actions { opacity: 1; }
.doc-card-lab,
.doc-card-delete {
  background: white;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 999px;
  padding: 0.25rem 0.7rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  cursor: pointer;
  color: rgba(45,72,96,0.65);
}
.doc-card-lab {
  color: var(--green, #6e9b62);
  border-color: rgba(141,184,138,0.5);
}
.doc-card-lab:hover { background: rgba(141,184,138,0.1); }
.doc-card-delete:hover { color: #b53b3b; border-color: #b53b3b; }
.documents-empty {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 0.98rem;
  color: rgba(45,72,96,0.55);
  padding: 1.5rem 1rem;
  text-align: center;
  border: 1px dashed rgba(45,72,96,0.18);
  border-radius: 12px;
}
.documents-empty.hidden { display: none; }

/* Guided onboarding tour — spotlight, backdrop, tooltip card */
.lwh-tour-overlay {
  position: fixed;
  inset: 0;
  z-index: 9998;
  pointer-events: none;
}
.lwh-tour-overlay.hidden { display: none; }
.lwh-tour-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(20, 32, 44, 0.55);
  pointer-events: auto;
}
.lwh-tour-spotlight {
  position: absolute;
  display: none;
  border-radius: 14px;
  background: transparent;
  box-shadow: 0 0 0 10000px rgba(20, 32, 44, 0.55), 0 0 0 3px var(--coral, #E8A898);
  pointer-events: none;
  transition: top 0.45s cubic-bezier(0.65, 0, 0.35, 1),
              left 0.45s cubic-bezier(0.65, 0, 0.35, 1),
              width 0.45s cubic-bezier(0.65, 0, 0.35, 1),
              height 0.45s cubic-bezier(0.65, 0, 0.35, 1);
}
.lwh-tour-card {
  position: absolute;
  width: 360px;
  max-width: calc(100vw - 32px);
  max-height: calc(100vh - 32px);
  background: white;
  border-radius: 16px;
  padding: 1.6rem 1.75rem 1.3rem;
  box-shadow: 0 16px 48px rgba(20, 32, 44, 0.32);
  pointer-events: auto;
  transition: top 0.35s ease, left 0.35s ease;
  z-index: 9999;
  display: flex;
  flex-direction: column;
}
.lwh-tour-card .lwh-tour-body {
  flex: 1 1 auto;
  overflow-y: auto;
  min-height: 0;
}
.lwh-tour-card .lwh-tour-actions {
  flex-shrink: 0;
  margin-top: 0.5rem;
}
.lwh-tour-progress {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  color: rgba(45, 72, 96, 0.45);
  letter-spacing: 0.1em;
  margin-bottom: 0.4rem;
}
.lwh-tour-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 800;
  color: var(--coral, #c47e6c);
  letter-spacing: 0.14em;
  margin-bottom: 0.45rem;
}
.lwh-tour-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: #2D4860;
  margin: 0 0 0.65rem;
  line-height: 1.15;
}
.lwh-tour-body {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.02rem;
  color: rgba(45, 72, 96, 0.78);
  line-height: 1.5;
  margin: 0 0 1.25rem;
}
.lwh-tour-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}
.lwh-tour-skip {
  background: none;
  border: none;
  color: rgba(45, 72, 96, 0.55);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  padding: 0.4rem 0;
}
.lwh-tour-skip:hover { color: rgba(45, 72, 96, 0.9); }
.lwh-tour-back {
  background: white;
  border: 1.5px solid rgba(45, 72, 96, 0.2);
  color: #2D4860;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 0.45rem 1rem;
  cursor: pointer;
  margin-left: auto;
}
.lwh-tour-back:hover { background: rgba(45, 72, 96, 0.05); }
.lwh-tour-next {
  background: var(--navy, #2D4860);
  border: none;
  color: white;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 0.55rem 1.4rem;
  cursor: pointer;
  margin-left: 0.5rem;
}
.lwh-tour-next:hover { background: #1f3047; }

/* Founder pricing promise banner — visible during beta */
.founder-promise-banner {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  background: linear-gradient(95deg, rgba(232,168,152,0.16) 0%, rgba(141,184,138,0.16) 100%);
  border: 1px solid rgba(232,168,152,0.35);
  border-radius: 999px;
  padding: 0.65rem 1.2rem 0.65rem 1.1rem;
  margin: 1rem auto;
  max-width: 720px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1rem;
  color: rgba(45,72,96,0.85);
  position: relative;
}
.founder-promise-banner .fpb-icon {
  color: #c47e6c;
  font-size: 1rem;
  flex-shrink: 0;
}
.founder-promise-banner .fpb-text { flex: 1; }
.founder-promise-banner .fpb-text strong {
  color: #2D4860;
  font-weight: 700;
  font-style: normal;
}
.founder-promise-banner .fpb-dismiss {
  background: none;
  border: none;
  color: rgba(45,72,96,0.4);
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0 0.3rem;
  line-height: 1;
}
.founder-promise-banner .fpb-dismiss:hover { color: rgba(45,72,96,0.8); }

/* Take a Tour button — small floating CTA, top-right under the wave */
.take-tour-btn {
  position: fixed;
  top: 1rem;
  right: 1.25rem;
  background: rgba(255,255,255,0.95);
  border: 1.5px solid var(--coral, rgba(232,168,152,0.6));
  border-radius: 999px;
  padding: 0.45rem 1rem 0.45rem 0.85rem;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: #2D4860;
  cursor: pointer;
  z-index: 100;
  box-shadow: 0 3px 10px rgba(45,72,96,0.12);
  transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}
.take-tour-btn:hover {
  transform: translateY(-1px);
  background: white;
  box-shadow: 0 5px 14px rgba(45,72,96,0.16);
}
.take-tour-btn .ttb-icon {
  color: #c47e6c;
  font-size: 0.95rem;
}

/* Documents page timeline wave */
.docs-arc-wrap { user-select: none; }
.docs-arc-dot {
  display: inline-block;
  transition: transform 0.2s ease, filter 0.2s ease;
}
.docs-arc-dot:hover {
  filter: drop-shadow(0 4px 10px rgba(45,72,96,0.25));
  z-index: 2;
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translate(calc(-50% + var(--dx, 0px)), calc(var(--dy, 0px) + 12px)); }
  to   { opacity: 1; transform: translate(calc(-50% + var(--dx, 0px)), var(--dy, 0px)); }
}

/* Stories page — square card grid + sort toggle */
.stories-sort-toggle {
  display: inline-flex;
  gap: 0;
  background: rgba(45,72,96,0.06);
  border-radius: 999px;
  padding: 3px;
  margin-right: 0.75rem;
}
.stories-sort-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: rgba(45,72,96,0.6);
  background: transparent;
  border: none;
  padding: 0.4rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.18s ease, color 0.18s ease;
}
.stories-sort-btn:hover { color: var(--navy, #2D4860); }
.stories-sort-btn.stories-sort-active {
  background: var(--navy, #2D4860);
  color: #fff;
}

.stories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
  gap: 1.1rem;
  margin: 1.25rem 0 2rem;
}
.story-grid-card {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.1);
  border-radius: 14px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  display: flex;
  flex-direction: column;
  position: relative;
}
/* ── Daily "what the agent noticed across your work" digest section ─── */
.digest-observations {
  background: linear-gradient(135deg, rgba(141,184,138,0.08) 0%, rgba(148,184,208,0.06) 100%);
  border: 1px solid rgba(141,184,138,0.25);
  border-radius: 16px;
  padding: 1.4rem 1.5rem;
  margin: 1.5rem 0;
}
.dobs-header {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1rem;
}
.dobs-spark {
  color: var(--green);
  font-size: 1.1rem;
  line-height: 1;
}
.dobs-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green);
}
.dobs-cards {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
}
.dobs-card {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.08);
  border-left: 3px solid var(--green);
  border-radius: 8px;
  padding: 1rem 1.15rem;
}
.dobs-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.2rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
  margin-bottom: 0.45rem;
}
.dobs-body {
  font-size: 0.92rem;
  color: var(--text);
  line-height: 1.6;
  margin-bottom: 0.6rem;
}
.dobs-anchors {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.dobs-anchor {
  background: rgba(45,72,96,0.06);
  border: 1px solid rgba(45,72,96,0.12);
  color: var(--navy);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.28rem 0.65rem;
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s, border-color 0.15s;
}
.dobs-anchor:hover {
  background: rgba(45,72,96,0.12);
  border-color: rgba(45,72,96,0.30);
}
.dobs-anchor-story { background: rgba(232,168,152,0.12); border-color: rgba(232,168,152,0.35); }
.dobs-anchor-story:hover { background: rgba(232,168,152,0.20); }
.dobs-anchor-article { background: rgba(148,184,208,0.14); border-color: rgba(148,184,208,0.35); }
.dobs-anchor-article:hover { background: rgba(148,184,208,0.24); }
@media (max-width: 640px) {
  .digest-observations { padding: 1.1rem 1.15rem; }
  .dobs-headline { font-size: 1.05rem; }
}

/* ── Impact Map page — dots swirling then landing on the LWH arc ── */
.impact-map-container {
  max-width: 1100px;
  padding: 1.5rem 1.25rem 4rem;
}
.impact-map-header {
  text-align: center;
  margin-bottom: 1.5rem;
}
.impact-map-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--green);
  margin-bottom: 0.4rem;
}
.impact-map-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.5rem;
  font-weight: 500;
  color: var(--navy);
  letter-spacing: -0.01em;
  line-height: 1.1;
  margin: 0 0 0.5rem;
}
.impact-map-sub {
  color: var(--text-light);
  font-size: 0.95rem;
  line-height: 1.6;
  max-width: 50rem;
  margin: 0 auto 1.25rem;
  font-style: italic;
}
.impact-map-toggle-row {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(45,72,96,0.05);
  border-radius: 999px;
  padding: 0.3rem;
}
.im-view-btn {
  background: transparent;
  border: none;
  color: var(--text-light);
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  padding: 0.45rem 1.15rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.im-view-btn:hover { color: var(--navy); }
.im-view-active {
  background: #fff;
  color: var(--navy);
  box-shadow: 0 1px 3px rgba(45,72,96,0.10);
}
.im-resettle-btn {
  background: var(--green);
  color: #fff;
  border: none;
  border-radius: 999px;
  padding: 0.45rem 1.05rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  cursor: pointer;
  margin-left: 0.4rem;
}
.im-resettle-btn:hover { background: #4f7c4a; }

.impact-map-stage {
  background: linear-gradient(180deg, rgba(141,184,138,0.05) 0%, rgba(255,253,248,1) 50%, rgba(232,168,152,0.05) 100%);
  border: 1px solid rgba(45,72,96,0.08);
  border-radius: 18px;
  padding: 1.5rem 1rem 0.5rem;
  margin-bottom: 2rem;
  box-shadow: 0 2px 18px rgba(45,72,96,0.04);
}
.impact-map-svg {
  width: 100%;
  height: auto;
  display: block;
}
.imap-dot {
  transition: r 0.2s, filter 0.2s;
  filter: drop-shadow(0 1px 3px rgba(45,72,96,0.18));
}
.imap-dot:hover {
  r: 12;
  filter: drop-shadow(0 3px 8px rgba(45,72,96,0.35));
}
.imap-dot-orphan {
  animation: imap-orphan-drift 3s ease-in-out infinite alternate;
}
@keyframes imap-orphan-drift {
  0% { transform: translateY(0); }
  100% { transform: translateY(-6px); }
}

.impact-map-orphan-zone {
  background: rgba(232,168,152,0.08);
  border: 1px dashed rgba(232,168,152,0.45);
  border-radius: 14px;
  padding: 1.2rem 1.4rem;
}
.imo-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--coral);
  margin-bottom: 0.4rem;
}
.imo-hint {
  font-size: 0.88rem;
  color: var(--text);
  line-height: 1.55;
  margin: 0 0 1rem;
}
.imo-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 0.7rem;
}
.imo-item {
  background: #fff;
  border: 1px solid rgba(232,168,152,0.30);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
}
.imo-item:hover {
  border-color: var(--coral);
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(232,168,152,0.18);
}
.imo-item-title {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--navy);
  margin-bottom: 0.3rem;
}
.imo-item-excerpt {
  font-size: 0.8rem;
  color: var(--text);
  line-height: 1.5;
  margin-bottom: 0.45rem;
}
.imo-item-action {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--coral);
  letter-spacing: 0.04em;
}

/* Entry link on personal dashboard "Your Lead with How" eyebrow */
.impact-model-eyebrow-link {
  cursor: pointer;
  transition: color 0.15s;
}
.impact-model-eyebrow-link:hover { color: var(--green); }
.ime-arrow {
  display: inline-block;
  margin-left: 0.3rem;
  opacity: 0;
  transition: opacity 0.15s;
}
.impact-model-eyebrow-link:hover .ime-arrow { opacity: 1; }

@media (max-width: 720px) {
  .impact-map-title { font-size: 1.8rem; }
  .impact-map-stage { padding: 0.8rem 0.5rem; }
  .imo-list { grid-template-columns: 1fr; }
}

/* Stories page header: title + Capture button on one row, search below. */
.stories-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}
.stories-add-btn {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 700;
  padding: 0.55rem 1.15rem;
  border-radius: 999px;
  white-space: nowrap;
}

/* Hover-revealed action buttons on each story card — chat with agent + delete */
.story-grid-actions {
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 3;
  display: flex;
  gap: 0.35rem;
  opacity: 0;
  transition: opacity 0.18s;
}
.story-grid-card:hover .story-grid-actions { opacity: 1; }
.story-grid-action {
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(45,72,96,0.15);
  border-radius: 999px;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
  color: var(--text-light);
  box-shadow: 0 2px 6px rgba(45,72,96,0.10);
  transition: background 0.15s, color 0.15s, transform 0.1s;
  padding: 0;
}
.story-grid-action:hover { transform: scale(1.08); }
.story-grid-chat { color: var(--green); }
.story-grid-chat:hover { background: rgba(124,158,124,0.15); color: var(--green); }
.story-grid-delete { color: var(--text-muted); }
.story-grid-delete:hover { background: rgba(232,168,152,0.15); color: var(--coral); }
/* On touch devices the hover doesn't fire — keep actions visible by default. */
@media (hover: none) { .story-grid-actions { opacity: 1; } }
.story-grid-card:hover {
  transform: translateY(-2px);
  border-color: rgba(232,168,152,0.5);
  box-shadow: 0 8px 22px rgba(45,72,96,0.08);
}
.story-grid-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  background: #f4f3ee;
  overflow: hidden;
}
.story-grid-media img,
.story-grid-media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 25%;
  display: block;
}
.story-grid-media-empty {
  background: linear-gradient(135deg, rgba(168,201,221,0.22), rgba(232,168,152,0.18));
  display: flex;
  align-items: center;
  justify-content: center;
}
.story-grid-glyph {
  font-size: 2rem;
  color: rgba(45,72,96,0.32);
}
.story-grid-play {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: rgba(0,0,0,0.55);
  color: #fff;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
}
.story-grid-body {
  padding: 0.9rem 1rem 1rem;
  display: flex;
  flex-direction: column;
  flex: 1;
}
.story-grid-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy, #2D4860);
  margin: 0 0 0.4rem;
  line-height: 1.25;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-grid-snippet {
  font-family: 'Inter', 'Helvetica Neue', Helvetica, sans-serif;
  font-size: 0.85rem;
  color: rgba(45,72,96,0.7);
  line-height: 1.45;
  margin: 0 0 0.7rem;
  flex: 1;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.story-grid-meta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  color: rgba(45,72,96,0.55);
}
.story-grid-date {
  letter-spacing: 0.04em;
}
.story-grid-km {
  background: rgba(141,184,138,0.18);
  color: #3a7d42;
  padding: 0.2rem 0.55rem;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.65rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 60%;
}

.stories-km-group { margin-bottom: 2.5rem; }
.stories-km-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--navy, #2D4860);
  margin: 0 0 0.85rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid rgba(45,72,96,0.1);
}
.stories-km-heading-quiet {
  color: rgba(45,72,96,0.55);
  font-style: italic;
}
.stories-km-heading-link {
  cursor: pointer;
  transition: color 0.18s ease;
}
.stories-km-heading-link:hover {
  color: var(--coral, #E8A898);
}
.stories-km-arrow {
  font-size: 1.1rem;
  color: rgba(45,72,96,0.35);
  margin-left: 0.3rem;
  transition: color 0.18s ease, transform 0.18s ease;
  display: inline-block;
}
.stories-km-heading-link:hover .stories-km-arrow {
  color: var(--coral, #E8A898);
  transform: translateX(3px);
}

/* Signup: "we spotted a possible match" merge suggestion */
.signup-merge-suggest {
  margin-top: 1.25rem;
  padding: 1.25rem 1.25rem 1rem;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(232,168,152,0.1), rgba(168,201,221,0.08));
  border: 1px solid rgba(232,168,152,0.3);
}
.sms-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--coral, #C9806F);
  margin-bottom: 0.5rem;
}
.sms-intro {
  font-size: 0.92rem;
  color: var(--navy);
  margin: 0 0 0.85rem;
  line-height: 1.4;
}
.sms-matches {
  display: flex;
  flex-direction: column;
  gap: 0.55rem;
  margin-bottom: 0.85rem;
}
.sms-match {
  background: #fff;
  border-radius: 8px;
  padding: 0.6rem 0.85rem;
  border: 1px solid rgba(45,72,96,0.1);
}
.sms-match-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--navy);
}
.sms-match-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: rgba(45,72,96,0.6);
  margin-top: 0.2rem;
}
.sms-action-hint {
  font-size: 0.82rem;
  color: rgba(45,72,96,0.7);
  margin: 0 0 0.85rem;
  line-height: 1.45;
}
.sms-dismiss {
  background: transparent;
  border: 1px solid rgba(45,72,96,0.25);
  color: var(--navy);
  padding: 0.42rem 0.95rem;
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.18s ease, border-color 0.18s ease;
}
.sms-dismiss:hover {
  background: rgba(45,72,96,0.05);
  border-color: var(--navy);
}

/* Org admin: prominent merge invite card */
.oa-merge-card {
  background: linear-gradient(135deg, rgba(168,201,221,0.1), rgba(232,168,152,0.08));
  border: 1px solid rgba(45,72,96,0.12);
  border-radius: 12px;
  padding: 1.1rem 1.25rem;
}
.oa-merge-desc {
  font-size: 0.88rem;
  color: rgba(45,72,96,0.75);
  margin: 0 0 0.85rem;
  line-height: 1.45;
}
.oa-merge-btn {
  font-weight: 600;
}

/* Signup trial note + "I'm convinced" skip link */
.signup-trial-note {
  text-align: center;
  font-size: 0.82rem;
  color: rgba(45,72,96,0.6);
  font-style: italic;
  margin: 1rem 0 0.4rem;
}
.signup-skip {
  text-align: center;
  font-size: 0.85rem;
  color: var(--text-muted, rgba(45,72,96,0.7));
  margin: 0 0 1rem;
}
.signup-skip a {
  color: var(--coral, #C9806F);
  font-weight: 600;
  text-decoration: none;
}
.signup-skip a:hover { text-decoration: underline; }

/* ===== Read-only mode (trial expired or subscription canceled) ===== */
body.lwh-readonly .capture-hub-card,
body.lwh-readonly button[onclick*="goToCapture"],
body.lwh-readonly a[onclick*="goToCapture"],
body.lwh-readonly button[onclick*="captureStory"],
body.lwh-readonly button[onclick*="captureDocOrPhoto"],
body.lwh-readonly button[onclick*="openArticleCapture"],
body.lwh-readonly button[onclick*="openMemoCapture"],
body.lwh-readonly #story-save-btn,
body.lwh-readonly .chat-fab,
body.lwh-readonly .ha-fab,
body.lwh-readonly button[onclick*="suggestMetrics"],
body.lwh-readonly button[onclick*="suggestKpis"],
body.lwh-readonly button[onclick*="generateFromKm"],
body.lwh-readonly button[onclick*="openGrantMatch"],
body.lwh-readonly button[onclick*="runGrantDiscovery"],
body.lwh-readonly button[onclick*="runContractIntelligence"] {
  position: relative;
  opacity: 0.45;
  pointer-events: none;
  filter: grayscale(0.4);
}
body.lwh-readonly::after {
  content: 'Read-only · Resume to capture or use AI →';
  position: fixed;
  bottom: 60px;
  left: 50%;
  transform: translateX(-50%);
  background: var(--coral, #C9806F);
  color: #fff;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  z-index: 200;
  cursor: pointer;
  box-shadow: 0 6px 18px rgba(201,128,111,0.35);
}

/* Welcome-back trial-ended card — refresh styles for new copy */
.te-promise {
  margin-top: 1.5rem;
  font-size: 0.82rem;
  color: rgba(45,72,96,0.55);
  font-style: italic;
  text-align: center;
}

/* ===== Capture Hub ===== */
.capture-hub-wrap {
  max-width: 880px;
  margin: 0 auto;
  padding: 3rem 1.5rem 4rem;
  text-align: center;
}
.capture-hub-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(45,72,96,0.5);
  margin-bottom: 0.6rem;
}
.capture-hub-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 2.6rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
}
.capture-hub-sub {
  color: rgba(45,72,96,0.6);
  font-style: italic;
  margin-bottom: 2.5rem;
}
.capture-hub-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  text-align: left;
  max-width: 1100px;
  margin: 0 auto;
}
@media (max-width: 900px) {
  .capture-hub-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .capture-hub-grid { grid-template-columns: 1fr; }
}
.capture-hub-card {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.14);
  border-radius: 16px;
  padding: 1.5rem 1.25rem;
  cursor: pointer;
  transition: transform 0.18s ease, border-color 0.18s ease, box-shadow 0.18s ease;
  text-align: left;
  font-family: inherit;
}
.capture-hub-card:hover {
  transform: translateY(-3px);
  border-color: var(--coral, #C9806F);
  box-shadow: 0 10px 26px rgba(45,72,96,0.1);
}
.chc-icon {
  font-size: 1.8rem;
  margin-bottom: 0.65rem;
  display: block;
}
.chc-svg {
  display: block;
  color: var(--navy, #2D4860);
  margin-bottom: 0.75rem;
  transition: color 0.18s ease, transform 0.18s ease;
}
.capture-hub-card:hover .chc-svg {
  color: var(--coral, #E8A898);
  transform: translateY(-1px);
}
.chc-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.3rem;
  font-weight: 600;
  color: var(--navy);
  margin-bottom: 0.35rem;
}
.chc-hint {
  font-size: 0.85rem;
  color: rgba(45,72,96,0.6);
  line-height: 1.4;
}

/* Article + Memo capture modals */
.capture-modal-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(232,168,152,0.85);
  margin-bottom: 0.4rem;
}
.capture-modal-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.7rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.5rem;
}
.capture-status {
  font-size: 0.82rem;
  color: var(--text-muted, rgba(45,72,96,0.6));
  font-style: italic;
  margin: 0.5rem 0;
}
.memo-capture-mic-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.5rem 0 0.25rem;
}
.memo-capture-mic {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.85rem;
  font-weight: 600;
  background: rgba(232,168,152,0.1);
  border: 1px solid rgba(232,168,152,0.4);
  color: var(--coral, #C9806F);
  padding: 0.55rem 1.1rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease;
}
.memo-capture-mic:hover {
  background: rgba(232,168,152,0.18);
  border-color: rgba(232,168,152,0.6);
}
.memo-capture-mic.recording {
  background: #c0392b;
  color: #fff;
  border-color: #c0392b;
}
.memo-capture-mic-status {
  font-size: 0.82rem;
  color: var(--text-muted, rgba(45,72,96,0.55));
  font-style: italic;
}

/* Document/Photo capture modal upload zone */
.doc-upload-zone {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  padding: 2.5rem 1.5rem;
  border: 2px dashed rgba(45,72,96,0.22);
  border-radius: 14px;
  background: rgba(168,201,221,0.06);
  cursor: pointer;
  transition: border-color 0.18s ease, background 0.18s ease;
  text-align: center;
}
.doc-upload-zone:hover {
  border-color: var(--coral, #C9806F);
  background: rgba(232,168,152,0.06);
}
.dcz-icon {
  font-size: 2.2rem;
}
.dcz-label {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--navy);
}
.dcz-hint {
  font-size: 0.82rem;
  color: rgba(45,72,96,0.55);
  font-style: italic;
}

/* "View what you've captured" link inside capture modals */
.capture-modal-link {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  color: var(--coral, #C9806F);
  text-decoration: none;
  transition: color 0.15s ease;
}
.capture-modal-link:hover {
  color: var(--navy);
}

/* LWH Admin link on the bottom bar — tiny dark navy pill, sits leftmost */
.gbb-link.gbb-admin {
  background: var(--navy, #2D4860);
  color: #fff;
  padding: 0.14rem 0.5rem;
  height: auto;
  border-radius: 999px;
  font-weight: 600;
  letter-spacing: 0.02em;
  font-size: 0.55rem;
  margin-right: 0.5rem;
  margin-left: -0.3rem;
  align-self: center;
}
.gbb-link.gbb-admin:hover {
  background: #1f3850;
  color: #fff;
}

/* Cross-org projects section on the personal Projects page */
.cross-org-section {
  margin-top: 3rem;
  padding: 2rem 0 1rem;
  border-top: 1px solid rgba(45,72,96,0.12);
}
.cross-org-heading {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.6rem;
  font-weight: 600;
  color: var(--navy);
  margin: 0 0 0.4rem;
}
.cross-org-sub {
  color: var(--text-muted, rgba(45,72,96,0.6));
  font-size: 0.9rem;
  margin: 0 0 1.5rem;
  font-style: italic;
}
.cross-org-group {
  margin-bottom: 1.75rem;
}
.cross-org-org-name {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--coral, #C9806F);
  margin: 0 0 0.75rem;
}
.cross-org-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 0.85rem;
}
.cross-org-card {
  background: #fff;
  border: 1px solid rgba(45,72,96,0.12);
  border-radius: 10px;
  padding: 0.85rem 1rem;
  cursor: pointer;
  transition: transform 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}
.cross-org-card:hover {
  transform: translateY(-2px);
  border-color: rgba(45,72,96,0.32);
  box-shadow: 0 6px 18px rgba(45,72,96,0.08);
}
.cross-org-card-status {
  display: inline-block;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.18rem 0.55rem;
  border-radius: 999px;
  margin-bottom: 0.5rem;
}
.cross-org-status-active { background: rgba(82,160,90,0.12); color: #3a7d42; }
.cross-org-status-future, .cross-org-status-aspirational { background: rgba(45,72,96,0.08); color: var(--navy); }
.cross-org-status-potential { background: rgba(232,168,152,0.18); color: var(--coral, #C9806F); }
.cross-org-status-complete, .cross-org-status-done { background: rgba(45,72,96,0.04); color: rgba(45,72,96,0.55); }
.cross-org-status-ongoing { background: rgba(82,160,90,0.1); color: #3a7d42; }
.cross-org-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--navy);
  line-height: 1.25;
}
.cross-org-card-meta {
  font-size: 0.78rem;
  color: rgba(45,72,96,0.55);
  margin-top: 0.3rem;
}

/* Peek banner on project detail page — shows when viewing another org's project */
.project-peek-banner {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  flex-wrap: wrap;
  background: linear-gradient(135deg, rgba(232,168,152,0.12), rgba(82,160,90,0.08));
  border: 1px solid rgba(232,168,152,0.35);
  border-radius: 10px;
  padding: 0.7rem 1.1rem;
  margin: 1rem 1.5rem 0;
}
.project-peek-eyebrow {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.66rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  color: rgba(45,72,96,0.5);
}
.project-peek-target {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--navy);
  margin-right: auto;
}
.project-peek-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.project-peek-back, .project-peek-stay {
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  padding: 0.45rem 0.95rem;
  border-radius: 999px;
  cursor: pointer;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.project-peek-back {
  background: var(--navy);
  color: #fff;
  border: 1px solid var(--navy);
}
.project-peek-back:hover {
  background: #1f3850;
}
.project-peek-stay {
  background: transparent;
  color: rgba(45,72,96,0.7);
  border: 1px solid rgba(45,72,96,0.25);
}
.project-peek-stay:hover {
  color: var(--navy);
  border-color: var(--navy);
}

/* Quiet mode toggle in account settings */
.quiet-toggle-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  cursor: pointer;
  user-select: none;
  margin-top: 0.5rem;
}
.quiet-toggle-row input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  pointer-events: none;
}
.quiet-toggle-label {
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.95rem;
  font-weight: 600;
  color: #2D4860;
}
.quiet-toggle-switch {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 24px;
  background: rgba(45,72,96,0.2);
  border-radius: 999px;
  transition: background 0.2s ease;
}
.quiet-toggle-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  transition: transform 0.2s ease;
}
.quiet-toggle-row input[type="checkbox"]:checked + .quiet-toggle-switch {
  background: var(--coral, #E8A898);
}
.quiet-toggle-row input[type="checkbox"]:checked + .quiet-toggle-switch::after {
  transform: translateX(20px);
}

/* Clickable section titles (Recent Stories → /stories) */
.section-title-link {
  cursor: pointer;
  transition: color 0.18s ease;
}
.section-title-link:hover { color: var(--coral, #E8A898); }

/* Key Move detail page — Edit + Delete buttons in header (hidden until title click) */
.km-detail-actions {
  display: flex;
  gap: 0.5rem;
  margin-top: 0;
  flex-wrap: wrap;
  opacity: 0;
  max-height: 0;
  overflow: hidden;
  pointer-events: none;
  transition: opacity 0.22s ease, max-height 0.22s ease, margin-top 0.22s ease;
}
.km-detail-header.show-edit .km-detail-actions {
  opacity: 1;
  max-height: 60px;
  margin-top: 0.75rem;
  pointer-events: auto;
}
.km-detail-title {
  cursor: pointer;
  transition: color 0.18s ease;
}
.km-detail-title:hover {
  color: var(--coral, #E8A898);
}
.km-detail-edit,
.km-detail-delete {
  display: inline-flex;
  align-items: center;
  font-family: 'Montserrat', 'Inter', sans-serif;
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-radius: 999px;
  padding: 0.42rem 0.95rem;
  cursor: pointer;
  transition: background 0.18s ease, transform 0.18s ease, box-shadow 0.18s ease;
  border: none;
}
.km-detail-edit {
  background: var(--coral, #E8A898);
  color: white;
  box-shadow: 0 3px 10px rgba(232,168,152,0.3);
}
.km-detail-edit:hover {
  background: #d28e7b;
  transform: translateY(-1px);
  box-shadow: 0 5px 14px rgba(232,168,152,0.4);
}
.km-detail-delete {
  background: white;
  color: rgba(45,72,96,0.6);
  border: 1px solid rgba(45,72,96,0.18);
}
.km-detail-delete:hover {
  color: #b53b3b;
  border-color: #b53b3b;
}

/* ===== The Scrapbook ===== */
.doc-capture-merge-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: auto;
}
.doc-capture-select-toggle {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #2D4860;
  background: transparent;
  border: 1px solid #d4cab2;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.doc-capture-select-toggle.active {
  background: #2D4860;
  color: #fffdf6;
  border-color: #2D4860;
}
.doc-capture-merge-count {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #6b7280;
}
.doc-capture-merge-go {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  background: #6da66a;
  color: #fffdf6;
  border: none;
  border-radius: 999px;
  padding: 5px 12px;
  cursor: pointer;
}
.doc-capture-merge-go:disabled {
  background: #b8d4b6;
  cursor: not-allowed;
}
.doc-capture-item.is-selectable {
  position: relative;
  padding-left: 44px;
  cursor: pointer;
}
.doc-capture-item.is-selected {
  background: #f0f9f4 !important;
  border-color: #6da66a !important;
}
.doc-capture-item-check {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #c4baa1;
  background: #fffdf6;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.doc-capture-item-check:hover {
  border-color: #6da66a;
}
.doc-capture-item-check.checked {
  background: #6da66a;
  border-color: #6da66a;
}
.doc-capture-item-check.checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 13px;
  font-family: 'Inter', system-ui, sans-serif;
}

/* Grouping toolbar above documents grid */
.docs-group-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 18px 0 16px;
  flex-wrap: wrap;
}
.docs-group-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: #6b7280;
  margin-right: 4px;
}
.docs-group-btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: #4b5563;
  border: 1px solid #d4cab2;
  border-radius: 999px;
  padding: 7px 16px;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease, border-color 0.12s ease;
}
.docs-group-btn:hover { background: rgba(0,0,0,0.04); }
.docs-group-btn.active {
  background: #2D4860;
  color: #fffdf6;
  border-color: #2D4860;
  font-weight: 600;
}

/* Folder grouping — chic editorial styling */
.docs-folder-group {
  margin-bottom: 40px;
  padding-top: 12px;
}
.docs-folder-heading {
  display: flex;
  align-items: baseline;
  gap: 14px;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 500;
  color: #2D4860;
  margin: 0 0 6px;
  letter-spacing: -0.01em;
}
.docs-folder-heading::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #6da66a;
  flex-shrink: 0;
  align-self: center;
}
/* Folder cards — clickable tiles that open a folder of documents.
   Chic little folder icon at top, name + count below. */
.docs-folder-cards-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 18px;
  margin: 10px 0 24px;
}
.docs-folder-card {
  background: linear-gradient(180deg, #fcfaf5 0%, #f7f2e8 100%);
  border: 1px solid #e6dcc4;
  border-radius: 14px;
  padding: 22px 18px 18px;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  font-family: inherit;
  position: relative;
  transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease;
  overflow: hidden;
}
.docs-folder-card::before {
  /* Subtle "tab" on the folder, top-left */
  content: '';
  position: absolute;
  top: -2px;
  left: 16px;
  width: 70px;
  height: 12px;
  background: #d4c499;
  border-radius: 0 0 8px 8px;
  opacity: 0.55;
}
.docs-folder-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 10px 28px rgba(45,72,96,0.10);
  border-color: #d4c499;
}
.docs-folder-card-icon {
  color: #2d6a4f;
  margin-top: 6px;
}
.docs-folder-card-name {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 22px;
  font-weight: 600;
  color: #1f2a37;
  line-height: 1.2;
  word-break: break-word;
}
.docs-folder-card-count {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #6b7280;
}

/* Back button when drilled into a single folder */
.docs-folder-back {
  background: transparent;
  border: 1px solid #d4cab2;
  border-radius: 999px;
  padding: 6px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: #4b5563;
  cursor: pointer;
  margin-bottom: 14px;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.docs-folder-back:hover {
  background: #faf7f0;
  color: #1f2a37;
  border-color: #b8a87a;
}

.docs-folder-heading-clickable {
  cursor: pointer;
  border-radius: 6px;
  padding: 2px 6px;
  margin-left: -6px;
  transition: background 0.15s ease;
}
.docs-folder-heading-clickable:hover {
  background: rgba(109,166,106,0.10);
}
.docs-folder-heading-edit {
  font-size: 14px;
  color: #9ca3af;
  opacity: 0;
  margin-left: 6px;
  transition: opacity 0.15s ease;
}
.docs-folder-heading-clickable:hover .docs-folder-heading-edit {
  opacity: 1;
}
.docs-folder-count {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #8a7a55;
  font-weight: 600;
}
.docs-folder-group::after {
  content: '';
  display: block;
  width: 100%;
  height: 1px;
  background: linear-gradient(to right, rgba(212,202,178,0.6) 0%, rgba(212,202,178,0) 80%);
  margin: 14px 0 18px;
}
.docs-folder-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
}

/* Per-card folder badge — chic, restrained, serif italic */
.doc-page-card-folder {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 14px;
  font-weight: 500;
  color: #6b7280;
  margin-top: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  align-self: flex-start;
  padding: 2px 0;
  border-bottom: 1px solid transparent;
  transition: color 0.15s ease, border-color 0.15s ease;
}
.doc-page-card-folder::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #c4baa1;
  display: inline-block;
  flex-shrink: 0;
}
.doc-page-card-folder:hover {
  color: #2D4860;
  border-bottom-color: rgba(45,72,96,0.3);
}
.doc-page-card-folder:hover::before {
  background: #6da66a;
}
.doc-page-card-folder-empty {
  color: #a89a72;
  font-style: normal;
  font-size: 12px;
  font-family: 'Inter', system-ui, sans-serif;
}
.doc-page-card-folder-empty::before {
  background: transparent;
  border: 1px dashed #c4baa1;
  width: 8px;
  height: 8px;
}
.doc-page-card-folder-empty:hover {
  color: #6b7280;
  border-bottom-color: transparent;
}
.doc-page-card-folder-empty:hover::before {
  border-color: #6da66a;
}

/* Story-card-style document card: media on top, body below */
.doc-page-card {
  position: relative;
  display: flex;
  flex-direction: column;
  background: #fff;
  border: 1px solid #e8e2d4;
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04), 0 4px 12px rgba(0,0,0,0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.doc-page-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.08), 0 10px 24px rgba(0,0,0,0.06);
}
.doc-page-card-media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  background: #f6f2e8;
  overflow: hidden;
}
.doc-page-card-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.doc-page-card-media-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #f6f2e8 0%, #ebe5d3 100%);
}
.doc-page-card-glyph {
  font-size: 44px;
  opacity: 0.55;
}
/* Text-preview "thumbnail" for PDFs / docs without a page image */
.doc-page-card-media-text {
  background: #fdfaf2;
  padding: 18px 18px 12px;
  display: flex;
  align-items: flex-start;
  box-shadow: inset 0 0 0 1px rgba(138,122,85,0.12);
}
.doc-page-card-textpreview {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 14px;
  line-height: 1.45;
  color: #4b5563;
  font-style: italic;
  overflow: hidden;
  display: -webkit-box;
  -webkit-line-clamp: 7;
  -webkit-box-orient: vertical;
}
.doc-page-card-pagebadge {
  position: absolute;
  bottom: 8px;
  right: 8px;
  background: rgba(45,72,96,0.92);
  color: #fff;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  font-weight: 600;
  padding: 3px 9px;
  border-radius: 999px;
  letter-spacing: 0.02em;
}
.doc-page-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1;
}
.doc-page-card-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 18px;
  font-weight: 600;
  color: #2D4860;
  line-height: 1.2;
  margin: 0;
  cursor: text;
  border-radius: 4px;
  padding: 2px 4px;
  transition: background 0.15s ease;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.doc-page-card-title:hover {
  background: rgba(45,72,96,0.05);
}
.doc-page-card-title-edit {
  font-size: 12px;
  color: #9ca3af;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.doc-page-card-title:hover .doc-page-card-title-edit {
  opacity: 1;
}
.doc-page-card-snippet {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  line-height: 1.5;
  color: #4b5563;
  margin: 2px 0 0;
}
.doc-page-card-meta {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 8px;
}
.doc-page-card-meta .doc-page-card-date {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #8a7a55;
  letter-spacing: 0.02em;
  margin: 0;
}

/* Hide old per-card structure that no longer applies */
.doc-page-card-head { display: none; }
.doc-page-card-actions { display: none; }

.doc-page-card-delete {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: rgba(255,255,255,0.95);
  border: 1px solid rgba(0,0,0,0.1);
  color: #6b7280;
  cursor: pointer;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 1;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.15s ease;
  box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}
.doc-page-card-delete:hover {
  background: #b53b3b;
  border-color: #b53b3b;
  color: #fff;
  transform: scale(1.08);
}

/* Always-on selection checkbox on each document card */
.doc-page-card-checkbox {
  position: absolute;
  top: 10px;
  left: 10px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  border: 2px solid #c4baa1;
  background: #fffdf6;
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease, transform 0.12s ease;
  z-index: 2;
}
.doc-page-card-checkbox:hover {
  transform: scale(1.08);
}
.doc-page-card-checkbox:hover {
  border-color: #6da66a;
}
.doc-page-card-checkbox.checked {
  background: #6da66a;
  border-color: #6da66a;
}
.doc-page-card-checkbox.checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 14px;
  font-family: 'Inter', system-ui, sans-serif;
}
.doc-page-card.is-selected {
  border-color: #6da66a !important;
  background: #f0f9f4;
  box-shadow: 0 0 0 2px rgba(109,166,106,0.25);
}

/* Sticky floating merge bar at the bottom of the screen */
.docs-merge-bar {
  position: fixed;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 60;
  background: #fffdf6;
  border: 1px solid #d4cab2;
  border-radius: 12px;
  box-shadow: 0 10px 30px rgba(0,0,0,0.12), 0 4px 12px rgba(0,0,0,0.06);
  max-width: 720px;
  width: calc(100% - 48px);
}
.docs-merge-bar.hidden { display: none; }
.docs-merge-bar-inner {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px 20px;
}
.docs-merge-bar-left {
  display: flex;
  align-items: center;
}
.docs-merge-count {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: #2D4860;
}
.docs-merge-bar-fields {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.docs-merge-title-input {
  flex: 1;
  min-width: 200px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid #d4cab2;
  border-radius: 999px;
  background: #fff;
  outline: none;
}
.docs-merge-title-input:focus {
  border-color: #6da66a;
  box-shadow: 0 0 0 3px rgba(109,166,106,0.15);
}
.docs-merge-go {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  background: #6da66a;
  color: #fffdf6;
  border: none;
  border-radius: 999px;
  padding: 10px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.12s ease, transform 0.12s ease, box-shadow 0.12s ease;
}
.docs-merge-go:hover:not(:disabled) {
  background: #5d9559;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(109,166,106,0.25);
}
.docs-merge-go:disabled { background: #b8d4b6; cursor: not-allowed; }
.docs-merge-cancel {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 500;
  background: transparent;
  color: #6b7280;
  border: 1px solid #d4cab2;
  border-radius: 999px;
  padding: 9px 14px;
  cursor: pointer;
}
.docs-merge-cancel:hover { background: rgba(0,0,0,0.04); }
@media (min-width: 700px) {
  .docs-merge-bar-inner { flex-direction: row; align-items: center; justify-content: space-between; }
  .docs-merge-bar-left { flex-shrink: 0; }
  .docs-merge-bar-fields { flex: 1; }
}

/* Upload review panel — shown after file is picked, before commit */
.doc-capture-review {
  margin-top: 16px;
  padding: 18px 20px;
  background: #fcfaf5;
  border: 1px solid #e8e2d4;
  border-radius: 8px;
}
.doc-capture-review.hidden { display: none; }
.doc-capture-review-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 14px;
}
.doc-capture-review-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a7a55;
  font-weight: 600;
}
.doc-capture-review-back {
  background: transparent;
  border: none;
  color: #6b7280;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  cursor: pointer;
}
.doc-capture-review-back:hover { color: #2D4860; }
.doc-capture-review-files {
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.doc-capture-review-file {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: #4b5563;
  padding: 6px 10px;
  background: #fff;
  border: 1px solid #e8e2d4;
  border-radius: 6px;
}
.doc-capture-review-file .dcrf-name { margin-left: 4px; }

/* Per-file row with circle + rename + remove */
.dcrf-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  background: #fff;
  border: 1px solid #e8e2d4;
  border-radius: 8px;
  margin-bottom: 6px;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.dcrf-row.is-merge-selected {
  background: #f0f9f4;
  border-color: #6da66a;
}
.dcrf-circle {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 2px solid #c4baa1;
  background: #fffdf6;
  cursor: pointer;
  flex-shrink: 0;
  position: relative;
  transition: border-color 0.15s ease, background 0.15s ease;
}
.dcrf-circle:hover { border-color: #6da66a; }
.dcrf-circle.checked {
  background: #6da66a;
  border-color: #6da66a;
}
.dcrf-circle.checked::after {
  content: '✓';
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  font-family: 'Inter', system-ui, sans-serif;
}
.dcrf-icon {
  font-size: 18px;
  flex-shrink: 0;
}
.dcrf-name-input {
  flex: 1;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  padding: 6px 10px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  outline: none;
  color: #2D4860;
  min-width: 100px;
}
.dcrf-name-input:hover {
  background: rgba(0,0,0,0.03);
  border-color: rgba(0,0,0,0.06);
}
.dcrf-name-input:focus {
  background: #fff;
  border-color: #6da66a;
  box-shadow: 0 0 0 3px rgba(109,166,106,0.15);
}
.dcrf-remove {
  background: transparent;
  border: none;
  color: #b53b3b;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
  padding: 0 6px;
  opacity: 0.5;
  transition: opacity 0.12s ease;
  flex-shrink: 0;
}
.dcrf-remove:hover { opacity: 1; }
.dcrf-add-another {
  margin-top: 6px;
  display: inline-block;
  background: transparent;
  border: 1.5px dashed #c4baa1;
  border-radius: 999px;
  padding: 8px 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  color: #6b7280;
  cursor: pointer;
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.dcrf-add-another:hover {
  color: #2D4860;
  border-color: #2D4860;
  background: rgba(45,72,96,0.05);
}
.doc-capture-folder-suggestions {
  margin-top: 8px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.dcfs-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  color: #8a7a55;
  margin-right: 4px;
}
.dcfs-chip {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  background: #fff;
  color: #2D4860;
  border: 1px solid #d4cab2;
  border-radius: 999px;
  padding: 4px 12px;
  cursor: pointer;
  transition: background 0.12s ease;
}
.dcfs-chip:hover {
  background: #2D4860;
  color: #fff;
  border-color: #2D4860;
}

/* Article link chip — clickable line under article text */
.tl-entry-article-link {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 8px;
  padding: 6px 12px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 500;
  color: var(--coral, #d97e6f);
  background: rgba(217,126,111,0.08);
  border: 1px solid rgba(217,126,111,0.2);
  border-radius: 999px;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.tl-entry-article-link:hover {
  background: var(--coral, #d97e6f);
  color: #fff;
  border-color: var(--coral, #d97e6f);
}

/* Executive summary block on saved articles in Thinking Lab — mirrors the
   AI Summary card on documents so a leader can see "the agent's read"
   without opening the link. */
.tl-entry-article-summary {
  margin-top: 10px;
  padding: 12px 14px;
  background: #faf7f0;
  border-left: 3px solid var(--green, #2d6a4f);
  border-radius: 4px;
  font-family: 'Georgia', serif;
  font-size: 14px;
  line-height: 1.55;
  color: #1f2a37;
}
.tl-entry-article-summary-eyebrow {
  display: block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 9.5px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--green, #2d6a4f);
  margin-bottom: 5px;
}
.tl-entry-article-summary-pending {
  font-style: italic;
  color: #6b7280;
  background: #fbfaf6;
  border-left-color: #d4cab2;
}

/* Document Viewer modal — opens from the AI Summary modal when the user
   wants to see the actual pages, not just the agent's read. */
.doc-viewer-overlay {
  z-index: 8500;
  background: rgba(20, 30, 40, 0.65);
}
.doc-viewer-box {
  background: #fff;
  border-radius: 16px;
  max-width: 760px;
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 28px 32px 24px;
  position: relative;
  box-shadow: 0 24px 64px rgba(20,30,40,0.30);
}
.doc-viewer-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: #6b7280;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.doc-viewer-title {
  font-family: 'Montserrat', sans-serif;
  font-weight: 700;
  font-size: 22px;
  margin: 0 0 4px;
  line-height: 1.25;
  color: #14332a;
}
.doc-viewer-meta {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #6b7280;
  margin-bottom: 18px;
}
.doc-viewer-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}
.doc-viewer-page {
  background: #fafaf6;
  border: 1px solid #e6e0d4;
  border-radius: 8px;
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.doc-viewer-page-label {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.12em;
  color: #6b7280;
  text-transform: uppercase;
  align-self: flex-start;
  margin-bottom: 6px;
}
.doc-viewer-page-img {
  max-width: 100%;
  height: auto;
  border-radius: 4px;
  box-shadow: 0 2px 10px rgba(20,30,40,0.10);
}
.doc-viewer-textpage {
  background: #fbf6e8;
  border: 1px solid #d4c499;
  border-radius: 8px;
  padding: 24px 26px;
  box-shadow: inset 0 0 0 4px rgba(255,255,255,0.5);
}
.doc-viewer-textpage-pre {
  font-family: 'Georgia', serif;
  font-size: 14px;
  line-height: 1.6;
  color: #1f2a37;
  white-space: pre-wrap;
  word-wrap: break-word;
  margin: 0;
}
.doc-viewer-empty {
  font-family: 'Georgia', serif;
  font-style: italic;
  color: #6b7280;
  text-align: center;
  padding: 40px 0;
}
.doc-viewer-actions {
  margin-top: 18px;
  padding-top: 14px;
  border-top: 1px solid #f0ebe0;
}
.doc-viewer-back {
  background: transparent;
  border: 1px solid #d4cab2;
  border-radius: 999px;
  padding: 7px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 600;
  color: #4b5563;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.doc-viewer-back:hover { background: #faf7f0; color: #1f2a37; }

/* "View the document" button in the summary modal */
.doc-summary-view {
  background: rgba(45,106,79,0.10);
  color: var(--green, #2d6a4f);
  border: 1px solid rgba(45,106,79,0.30);
  border-radius: 999px;
  padding: 8px 16px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease;
}
.doc-summary-view:hover {
  background: var(--green, #2d6a4f);
  color: #fff;
}

/* ✓ Saved-to-Lab confirmation state on the digest article card button.
   Replaces the coral hover style with a calm green so the user feels the
   acknowledgement. */
.dns-card .saved-confirmed,
button.saved-confirmed {
  background: rgba(45,106,79,0.10) !important;
  color: var(--green, #2d6a4f) !important;
  border-color: rgba(45,106,79,0.30) !important;
  cursor: default !important;
}

/* Contextual + Add button that appears above the Thinking Lab feed
   when a specific filter is active (Articles, Memos, Ideas, etc.) */
.tl-add-bar {
  margin: 14px 0;
  text-align: center;
}
.tl-add-bar.hidden { display: none; }
.tl-add-btn-contextual {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--coral, #d97e6f);
  background: transparent;
  border: 1.5px dashed rgba(217,126,111,0.5);
  border-radius: 999px;
  padding: 10px 22px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.12s ease;
}
.tl-add-btn-contextual:hover {
  background: var(--coral, #d97e6f);
  color: #fff;
  border-color: var(--coral, #d97e6f);
  border-style: solid;
  transform: translateY(-1px);
}

.doc-capture-review-mode {
  margin-bottom: 16px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.doc-capture-review-mode.hidden { display: none; }
.dcrm-option {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid #e8e2d4;
  border-radius: 8px;
  cursor: pointer;
  transition: border-color 0.12s ease, background 0.12s ease;
}
.dcrm-option:hover {
  border-color: #6da66a;
  background: #fafff7;
}
.dcrm-option input[type="radio"] {
  margin-top: 3px;
  accent-color: #6da66a;
}
.dcrm-option-body {
  flex: 1;
}
.dcrm-option-title {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  font-weight: 600;
  color: #2D4860;
}
.dcrm-option-sub {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #6b7280;
  margin-top: 2px;
}

.docs-merge-go-secondary {
  background: transparent !important;
  color: #2D4860 !important;
  border: 1px solid #2D4860 !important;
}
.docs-merge-go-secondary:hover:not(:disabled) {
  background: #2D4860 !important;
  color: #fff !important;
}

.capture-view-library-link {
  display: inline-block;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  color: var(--navy, #2D4860);
  text-decoration: none;
  padding: 8px 16px;
  border: 1px solid rgba(45,72,96,0.18);
  border-radius: 999px;
  background: transparent;
  transition: background 0.15s ease, color 0.15s ease, transform 0.12s ease;
}
.capture-view-library-link:hover {
  background: var(--navy, #2D4860);
  color: #fffdf6;
  transform: translateY(-1px);
}

.doc-summary-chat {
  margin-left: 12px;
  padding: 10px 18px;
  background: var(--navy, #2D4860);
  color: #fffdf6;
  border: none;
  border-radius: 999px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.doc-summary-chat:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(45,72,96,0.18);
}
.doc-summary-chat .dpcs-spark {
  margin-right: 4px;
}
.scrapbook-search-row {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 24px;
  max-width: 540px;
  margin-left: auto;
  margin-right: auto;
}
.scrapbook-search-input {
  flex: 1;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  padding: 10px 14px;
  border: 1px solid #d8cfb8;
  border-radius: 999px;
  background: #fffdf6;
  outline: none;
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.scrapbook-search-input:focus {
  border-color: #6da66a;
  box-shadow: 0 0 0 3px rgba(109, 166, 106, 0.15);
}
.scrapbook-search-input::placeholder {
  color: #a89a72;
}
.scrapbook-search-count {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  color: #8a7a55;
  white-space: nowrap;
}
.scrapbook-patterns-btn {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  background: transparent;
  color: var(--navy, #2D4860);
  border: 1px solid #d8cfb8;
  border-radius: 999px;
  padding: 8px 16px;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.scrapbook-patterns-btn:hover {
  background: var(--navy, #2D4860);
  color: #fffdf6;
  border-color: var(--navy, #2D4860);
}
.scrapbook-patterns-card {
  max-width: 720px;
  margin: 24px auto 0;
  padding: 24px 28px 22px;
  background: #fffdf6;
  border: 1px solid #e8e2d4;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(0,0,0,0.06), 0 12px 32px rgba(0,0,0,0.04);
  position: relative;
}
.sb-patterns-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 18px;
  border-bottom: 1px dashed #d8cfb8;
  padding-bottom: 12px;
}
.sb-patterns-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #8a7a55;
  font-weight: 600;
}
.sb-patterns-close {
  background: transparent;
  border: none;
  font-size: 22px;
  line-height: 18px;
  color: #888;
  cursor: pointer;
  padding: 0 4px;
}
.sb-patterns-close:hover { color: #2D4860; }
.sb-patterns-loading {
  text-align: center;
  color: #888;
  padding: 20px 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
}
.sb-pattern-item {
  padding: 14px 0;
  border-bottom: 1px dotted #e8e2d4;
}
.sb-pattern-item:last-child { border-bottom: none; }
.sb-pattern-headline {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 19px;
  color: #2D4860;
  line-height: 1.3;
  margin-bottom: 6px;
}
.sb-pattern-quote {
  font-family: 'Caveat', 'Bradley Hand', 'Marker Felt', cursive;
  font-size: 18px;
  color: #2b2b2b;
  line-height: 1.35;
  margin-top: 6px;
}
.sb-pattern-from {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a7a55;
  margin-top: 4px;
}
.scrapbook-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 28px;
  padding-bottom: 60px;
}
/* Staging environment banner — yellow strip across the top of every
   page when LWH_ENV=staging. Pushes the page body down so it doesn't
   overlap the nav. Production deploys never see this. */
.lwh-env-banner {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 99999;
  height: 32px;
  background: repeating-linear-gradient(
    45deg,
    #f5d97a 0,
    #f5d97a 12px,
    #f0c54a 12px,
    #f0c54a 24px
  );
  color: #5a3d00;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  user-select: none;
  pointer-events: none;
}
.lwh-env-banner-dot {
  color: #c0392b;
  font-size: 10px;
  animation: lwh-env-banner-pulse 1.6s ease-in-out infinite;
}
.lwh-env-banner-label {
  letter-spacing: 0.18em;
}
.lwh-env-banner-msg {
  font-weight: 500;
  letter-spacing: 0.06em;
  opacity: 0.85;
  text-transform: none;
}
@keyframes lwh-env-banner-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}
body.lwh-has-env-banner { padding-top: 32px; }

/* AI consent modal — shown once per user after signup. Blocks the
   dashboard until they read + check the box. */
.ai-consent-box {
  max-width: 580px;
  width: 92%;
  padding: 32px 36px;
}
.ai-consent-eyebrow {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: var(--green, #2d6a4f);
  text-transform: uppercase;
  margin-bottom: 8px;
}
.ai-consent-title {
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 28px;
  font-weight: 600;
  line-height: 1.15;
  margin: 0 0 12px;
  color: #14332a;
}
.ai-consent-intro {
  font-family: 'Georgia', serif;
  font-size: 15px;
  line-height: 1.6;
  color: #2D4860;
  margin-bottom: 18px;
}
.ai-consent-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}
.ai-consent-list li {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  line-height: 1.55;
  color: #2D4860;
  padding: 10px 0;
  border-bottom: 1px solid rgba(45,72,96,0.08);
}
.ai-consent-list li:last-child { border-bottom: 0; }
.ai-consent-list strong {
  color: #14332a;
  font-weight: 700;
}
.ai-consent-footer-link {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12.5px;
  color: #6b7280;
  margin-bottom: 18px;
}
.ai-consent-footer-link a {
  color: var(--green, #2d6a4f);
  text-decoration: none;
  font-weight: 600;
}
.ai-consent-footer-link a:hover { text-decoration: underline; }
.ai-consent-check {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  cursor: pointer;
  padding: 12px 14px;
  background: #fbfaf6;
  border: 1px solid var(--border, #e6dcc4);
  border-radius: 8px;
  margin-bottom: 18px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 13.5px;
  color: #2D4860;
  line-height: 1.5;
  user-select: none;
}
.ai-consent-check input[type="checkbox"] {
  margin-top: 3px;
  width: 16px;
  height: 16px;
  accent-color: var(--green, #2d6a4f);
  flex-shrink: 0;
}
.ai-consent-actions {
  display: flex;
  justify-content: flex-end;
}
.ai-consent-continue {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  padding: 11px 28px;
  border-radius: 999px;
  background: var(--green, #2d6a4f);
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background 0.15s ease, opacity 0.15s ease;
}
.ai-consent-continue:hover:not(:disabled) { background: #14332a; }
.ai-consent-continue:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Submit-a-quote button under the digest Quote of the Week. Subtle
   so it doesn't overshadow the quote itself, but visible enough to
   invite a click when someone reads a line that resonates. */
.digest-quote-submit-row {
  margin-top: 10px;
  text-align: right;
}
.digest-quote-submit-btn {
  background: transparent;
  border: none;
  color: rgba(45,106,79,0.55);
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
  padding: 4px 2px;
  cursor: pointer;
  transition: color 0.15s ease;
}
.digest-quote-submit-btn:hover {
  color: var(--green, #2d6a4f);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Save to The Scrapbook pill — branded, warm, distinct from the
   generic .btn-primary so it never gets clobbered by reset CSS. */
.scrapbook-save-row {
  text-align: right;
  margin-top: 20px;
  padding-top: 14px;
  border-top: 1px solid #f0ebe0;
}
.scrapbook-save-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(180deg, #6da66a 0%, #2d6a4f 100%);
  color: #fff;
  border: 0;
  border-radius: 999px;
  padding: 11px 24px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.02em;
  cursor: pointer;
  box-shadow: 0 4px 14px rgba(45,106,79,0.22);
  transition: transform 0.18s ease, box-shadow 0.18s ease, filter 0.18s ease;
}
.scrapbook-save-btn:hover {
  transform: translateY(-1px);
  filter: brightness(1.05);
  box-shadow: 0 8px 22px rgba(45,106,79,0.28);
}
.scrapbook-save-btn:active {
  transform: translateY(0);
  filter: brightness(0.96);
}
.scrapbook-save-btn:disabled {
  opacity: 0.6;
  cursor: default;
  transform: none;
}
.scrapbook-save-spark {
  font-size: 14px;
  line-height: 1;
  color: #fbe7c6;
}

.scrapbook-loading {
  grid-column: 1 / -1;
  text-align: center;
  color: #888;
  padding: 40px 0;
  font-size: 14px;
}
.scrapbook-empty {
  text-align: center;
  padding: 60px 20px;
  color: #666;
}
.scrapbook-empty p {
  font-size: 15px;
  margin-bottom: 18px;
  color: #777;
}
.sb-card {
  position: relative;
  background: #fffdf6;
  border: 1px solid #e8e2d4;
  border-radius: 4px;
  padding: 16px 16px 14px;
  box-shadow: 0 2px 5px rgba(0,0,0,0.06), 0 8px 20px rgba(0,0,0,0.03);
  transition: transform 0.15s ease, box-shadow 0.15s ease;
  font-family: 'Caveat', 'Bradley Hand', 'Marker Felt', cursive;
  font-size: 18px;
  line-height: 1.35;
  color: #2b2b2b;
}
.sb-card:nth-child(3n+1) { transform: rotate(-0.8deg); }
.sb-card:nth-child(3n+2) { transform: rotate(0.6deg); }
.sb-card:nth-child(3n+3) { transform: rotate(-0.3deg); }
.sb-card:hover {
  transform: rotate(0deg) translateY(-2px);
  box-shadow: 0 6px 16px rgba(0,0,0,0.10), 0 12px 28px rgba(0,0,0,0.04);
  z-index: 2;
}
.sb-card-image {
  margin: -16px -16px 12px;
  overflow: hidden;
  background: #f3eedf;
  border-bottom: 1px solid #e8e2d4;
}
.sb-card-image img {
  width: 100%;
  height: auto;
  display: block;
  max-height: 260px;
  object-fit: cover;
}
.sb-card-content {
  white-space: pre-wrap;
  margin-bottom: 10px;
}
.sb-card-source {
  font-family: 'Inter', system-ui, sans-serif;
  font-size: 12px;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #8a7a55;
  border-top: 1px dashed #d8cfb8;
  padding-top: 8px;
  margin-top: 6px;
}
.sb-card-delete {
  position: absolute;
  top: 6px;
  right: 8px;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: rgba(255,255,255,0.85);
  border: 1px solid #ddd;
  color: #999;
  font-size: 16px;
  line-height: 18px;
  cursor: pointer;
  padding: 0;
  opacity: 0;
  transition: opacity 0.15s ease;
}
.sb-card:hover .sb-card-delete {
  opacity: 1;
}
.sb-card-delete:hover {
  background: #fff;
  color: #b53b3b;
  border-color: #b53b3b;
}

/* Digest section card skeleton — shown while the Claude-powered
   /api/orgs/<id>/weekly-digest fetch is running (~30s). The header
   + icon paint instantly; the body shows a soft "we're reading"
   line so the page doesn't look broken. Replaced wholesale when
   _renderDigest swaps in the real content. */
.digest-zone-skel { animation: digestSkelPulse 2.4s ease-in-out infinite; }
.digest-skel-body {
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-style: italic;
  font-size: 1.05rem;
  color: rgba(45, 72, 96, 0.45);
  padding: 1.5rem 1rem 2rem;
  max-width: 540px;
  margin: 0 auto;
}
@keyframes digestSkelPulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 1.0; }
}

/* Combined Impact Model title — replaces the old split eyebrow
   ("YOUR LEAD WITH HOW") + subtagline ("Where the stories stack.")
   stack with a single line: "The Impact Model: Where stories stack".
   Brand green so it reads as the section header without competing
   with the mode toggle + map below. */
.impact-model-title {
  text-align: center;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 1.45rem;
  font-weight: 500;
  color: var(--green, #5C8A57);
  letter-spacing: 0.01em;
  margin: -1rem auto 1rem;
  padding: 0 1rem;
}

/* ── Whiteboard emerging-KM halos + tray ────────────────────────
   The agent's discover-key-moves proposals surfaced visually on
   the Whiteboard. Each proposal becomes a chip above the canvas;
   its supporting dots get a green pulsing halo so the user can
   SEE the pattern, not just read about it.                       */
.wb-emerging-tray {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  justify-content: center;
  padding: 0.4rem 1rem 0.7rem;
  margin-bottom: 0.25rem;
}
.wb-emerging-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem 0.55rem 0.85rem;
  background: linear-gradient(135deg, rgba(141,184,138,0.13), rgba(148,184,208,0.10));
  border: 1px solid rgba(141, 184, 138, 0.55);
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.78rem;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.2s ease, background 0.2s ease;
  box-shadow: 0 2px 8px rgba(141,184,138,0.12);
}
.wb-emerging-chip:hover {
  transform: translateY(-1px);
  box-shadow: 0 6px 18px rgba(141,184,138,0.28);
  background: linear-gradient(135deg, rgba(141,184,138,0.22), rgba(148,184,208,0.15));
}
.wb-emerging-spark { color: var(--green, #5C8A57); font-size: 0.95rem; line-height: 1; }
.wb-emerging-label {
  color: rgba(45, 72, 96, 0.55);
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 0.66rem;
}
.wb-emerging-title { color: var(--navy, #2D4860); font-weight: 700; }
.wb-emerging-count {
  color: rgba(45, 72, 96, 0.5);
  font-style: italic;
  font-family: 'Cormorant Garamond', Georgia, serif;
  font-size: 0.86rem;
}

/* Supporting dot — pulsing green halo. The dot itself can stay its
   underlying color (claimed/sit/carry); the halo is overlay only. */
.wb-dot.wb-dot-emerging {
  box-shadow: 0 0 0 5px rgba(141, 184, 138, 0.20), 0 0 18px rgba(141, 184, 138, 0.45);
  animation: wbEmergingPulse 2.2s ease-in-out infinite;
}
@keyframes wbEmergingPulse {
  0%, 100% { box-shadow: 0 0 0 5px rgba(141, 184, 138, 0.20), 0 0 18px rgba(141, 184, 138, 0.45); }
  50%      { box-shadow: 0 0 0 9px rgba(141, 184, 138, 0.30), 0 0 28px rgba(141, 184, 138, 0.55); }
}

/* Drift zone dots — visually faded so they read as "set aside" but
   still clickable for decide/prune action. Sit in the bottom strip
   of the Whiteboard canvas below all active clusters. */
.wb-dot.wb-dot-drift {
  opacity: 0.55;
  filter: saturate(0.75);
}
.wb-dot.wb-dot-drift:hover {
  opacity: 1;
  filter: saturate(1);
  box-shadow: 0 0 0 4px rgba(45, 72, 96, 0.12);
}

/* Anchor-story quote on KM detail — collapsed by default with a
   "Read more ↓" toggle. Long voice transcripts saved as quotes
   no longer dominate the card; user expands when interested. */
.km-anchor-quote-wrap { position: relative; margin: 0.5rem 0 0.75rem; }
.km-anchor-quote-wrap.collapsed .km-anchor-quote {
  max-height: 4.6rem;
  overflow: hidden;
  position: relative;
  mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000 65%, transparent 100%);
}
.km-anchor-quote-toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  margin-top: 0.4rem;
  padding: 0.35rem 0.85rem;
  background: transparent;
  border: 1px solid rgba(45, 72, 96, 0.18);
  border-radius: 999px;
  font-family: 'Montserrat', sans-serif;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  color: rgba(45, 72, 96, 0.7);
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.km-anchor-quote-toggle:hover {
  background: rgba(45, 72, 96, 0.05);
  color: var(--navy, #2d4860);
  border-color: rgba(45, 72, 96, 0.4);
}
.kaq-arrow { font-size: 0.85rem; line-height: 1; }