/* ═══════════════════════════════════════════════════════
   The Couples Currency — round-48/54 site components
   Loaded AFTER style.css on every page. Dark premium system.
   ═══════════════════════════════════════════════════════ */

/* ─── kicker + category hero ─── */
.kicker {
  font-size: 0.75rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: #be185d; margin-bottom: 1rem;
}
.hero-sub-strong { color: var(--text-primary); font-weight: 600; }

/* ─── the daily loop: rings + week strip ─── */
.loop-flex { display: flex; gap: 3rem; align-items: center; flex-wrap: wrap; justify-content: center; }
.rings-row { display: flex; gap: 1.6rem; }
.ring-cell { text-align: center; }
.ring-wrap { position: relative; width: 84px; height: 84px; margin: 0 auto 0.6rem; }
.ring-glyph { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.ring-cell b { font-size: 0.75rem; font-weight: 800; color: var(--text-secondary); letter-spacing: 0.04em; }
.loop-text { flex: 1; min-width: 300px; max-width: 480px; }
.loop-text p { color: var(--text-secondary); font-size: 1rem; margin-bottom: 1rem; }
.week-strip { display: flex; gap: 0.5rem; margin-top: 1rem; }
.week-day {
  width: 40px; height: 52px; border-radius: 12px;
  border: 1px solid var(--glass-border); background: var(--glass-bg);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem;
}
.week-day em { font-style: normal; font-size: 0.6rem; font-weight: 900; color: var(--text-muted); }
.week-day .dot { width: 9px; height: 9px; border-radius: 50%; background: rgba(27,26,25,0.10); }
.week-day.done { border-color: rgba(16,185,129,0.4); background: rgba(16,185,129,0.08); }
.week-day.done .dot { background: #10b981; }
.week-day.today { border: 2px solid var(--accent-start); }
.week-day.today .dot { background: var(--accent-start); }

/* ─── five contrast rows ─── */
.contrast-list { display: flex; flex-direction: column; gap: 1rem; }
.contrast-row {
  display: grid; grid-template-columns: 56px 1fr 1fr auto; gap: 1.4rem; align-items: center;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: 1.4rem 1.6rem;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.contrast-row:hover { border-color: rgba(99,102,241,0.35); transform: translateY(-2px); }
.contrast-chip {
  width: 52px; height: 52px; border-radius: 14px;
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.contrast-col b {
  display: block; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.1em;
  text-transform: uppercase; margin-bottom: 0.35rem;
}
.contrast-today b { color: var(--text-muted); }
.contrast-today p { font-size: 0.85rem; color: var(--text-muted); line-height: 1.6; }
.contrast-here b { color: #4f46e5; }
.contrast-here .name {
  font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700;
  color: var(--text-primary); display: block; margin-bottom: 0.25rem;
}
.contrast-here p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
.contrast-go { text-align: right; font-size: 0.8rem; font-weight: 800; color: #4f46e5; white-space: nowrap; }
@media (max-width: 900px) {
  .contrast-row { grid-template-columns: 48px 1fr; }
  .contrast-here { grid-column: 1 / -1; }
  .contrast-go { grid-column: 1 / -1; text-align: left; }
}

/* ─── problem-first cards (round 54b: problem → solution, in that order) ─── */
.pcards { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.4rem; }
.pcard {
  display: flex; flex-direction: column;
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: 1.7rem 1.7rem 1.5rem;
  transition: border-color var(--transition-base), transform var(--transition-base);
}
.pcard:hover { border-color: rgba(99,102,241,0.35); transform: translateY(-2px); }
.pcard-problem b {
  /* round 86: neutral, so it never competes with (or mimics) the card's accent */
  display: block; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.5rem;
}
.pcard-problem p {
  font-family: var(--font-serif); font-size: 1.15rem; line-height: 1.5;
  color: var(--text-primary); margin-bottom: 1.2rem;
}
.pcard-solution {
  display: flex; gap: 0.9rem; align-items: flex-start;
  border-top: 1px solid var(--line-soft); padding-top: 1.2rem; margin-top: auto;
}
.pcard-solution .contrast-chip { width: 44px; height: 44px; border-radius: 12px; }
.pcard-solution .lbl {
  display: block; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.12em;
  text-transform: uppercase; color: #4f46e5; margin-bottom: 0.25rem;
}
.pcard-solution .name { display: block; font-weight: 800; font-size: 1rem; color: var(--text-primary); margin-bottom: 0.3rem; }
.pcard-solution p { font-size: 0.85rem; color: var(--text-secondary); line-height: 1.6; }
.pcard-go { margin-top: 1.1rem; font-size: 0.8rem; font-weight: 800; color: #4f46e5; }

/* ─── phone mockups (stand-ins until the capture pass) ─── */
.phone {
  width: 250px; border-radius: 32px; border: 1px solid rgba(27,26,25,0.10);
  background: #ffffff; box-shadow: var(--shadow-lg);
  padding: 14px 12px 18px; flex-shrink: 0; margin: 0 auto;
}
.phone-notch { width: 84px; height: 5px; border-radius: 99px; background: rgba(27,26,25,0.12); margin: 0 auto 12px; }
.phone-title { font-size: 0.7rem; font-weight: 800; color: var(--text-secondary); text-align: center; margin-bottom: 10px; letter-spacing: 0.06em; }
.phone .mini { display: flex; flex-direction: column; gap: 8px; }
.mini-card {
  background: #ffffff; border: 1px solid var(--line-soft);
  border-radius: 12px; padding: 10px 12px; font-size: 0.72rem; color: var(--text-secondary);
}
.mini-card b { color: var(--text-primary); font-size: 0.74rem; }
.mini-bubble { border-radius: 14px; padding: 8px 12px; font-size: 0.72rem; max-width: 85%; }
.mini-bubble.them { background: #f2f0ed; color: var(--text-secondary); align-self: flex-start; }
.mini-bubble.me { background: linear-gradient(135deg, #6366f1, #a855f7); color: #fff; align-self: flex-end; }
.mini-blur {
  height: 92px; border-radius: 12px; align-self: flex-start; width: 78%;
  background: linear-gradient(120deg, #4c1d95, #9d174d);
  filter: blur(1px); position: relative; overflow: hidden;
}
.mini-blur::after {
  content: "Tap to reveal · 47:59:12"; position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.66rem; font-weight: 800; color: rgba(255,255,255,0.92);
  background: rgba(27,26,25,0.28); backdrop-filter: blur(10px);
}
.mini-tag {
  display: inline-block; font-size: 0.66rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; border-radius: 99px; padding: 2px 9px;
  background: rgba(99,102,241,0.12); color: #4338ca; margin-bottom: 4px;
}
.capture-note {
  margin-top: 0.8rem; text-align: center; font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.06em; color: var(--text-muted);
}

/* ─── hero-scale problem-first (round 54c: every deep dive leads with the problem) ─── */
.hero-problem-kicker {
  font-size: 0.7rem; font-weight: 900; letter-spacing: 0.14em;
  text-transform: uppercase; color: #be185d; margin-bottom: 0.6rem;
}
.hero-problem {
  font-family: var(--font-serif); font-size: clamp(1.25rem, 2.6vw, 1.6rem);
  line-height: 1.45; color: var(--text-primary); max-width: 560px; margin-bottom: 1.6rem;
}
.hero-answer-kicker {
  font-size: 0.7rem; font-weight: 900; letter-spacing: 0.14em;
  text-transform: uppercase; color: #4f46e5; margin-bottom: 0.6rem;
}

/* ─── sub-page scaffolding ─── */
.subhero { display: flex; gap: 3rem; align-items: center; flex-wrap: wrap; padding-top: 2rem; }
.subhero-text { flex: 1; min-width: 300px; }
.subhero-text h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.15; margin-bottom: 1.2rem; }
.subhero-text > p { color: var(--text-secondary); font-size: 1.05rem; max-width: 520px; }
.crumb { font-size: 0.8rem; font-weight: 700; color: var(--text-muted); padding: 1.4rem 0 0.4rem; }
.crumb a { color: var(--fx-deep, #4338ca); }
.step-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.4rem; }
.step-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1.6rem; }
.step-num {
  width: 30px; height: 30px; border-radius: 50%; background: var(--accent-gradient);
  color: #fff; font-size: 0.85rem; font-weight: 900; display: flex; align-items: center;
  justify-content: center; margin-bottom: 0.9rem;
}
.step-card b { display: block; font-size: 1rem; margin-bottom: 0.4rem; color: var(--text-primary); }
.step-card p { font-size: 0.88rem; color: var(--text-secondary); }
.why-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.4rem; }
.why-card { background: var(--glass-bg); border: 1px solid var(--glass-border); border-radius: var(--radius-lg); padding: 1.6rem; }
.why-card b { display: block; font-family: var(--font-serif); font-size: 1.05rem; margin-bottom: 0.5rem; color: var(--text-primary); }
.why-card p { font-size: 0.88rem; color: var(--text-secondary); }
.src-pill {
  /* round 86: follows the page's accent instead of a hardcoded violet, which
     was making every deep dive wear two colours at once. */
  display: inline-block; margin-top: 0.8rem; font-size: 0.7rem; font-weight: 900;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--fx-deep, #6d28d9);
  background: var(--fx-tint, rgba(139,92,246,0.14));
  border: 1px solid var(--fx-a, rgba(139,92,246,0.3));
  border-radius: 99px; padding: 0.25rem 0.7rem;
}
.next-links { display: flex; gap: 0.7rem; flex-wrap: wrap; justify-content: center; padding-top: 1.4rem; }
.next-links a {
  font-size: 0.8rem; font-weight: 800; color: var(--text-secondary);
  border: 1px solid var(--glass-border); border-radius: 99px; padding: 0.55rem 1.1rem;
  transition: color var(--transition-base), border-color var(--transition-base);
}
.next-links a:hover { color: var(--text-primary); border-color: rgba(99,102,241,0.35); }

/* ─── the everything list ─── */
.ev-search {
  display: flex; align-items: center; gap: 0.7rem; max-width: 480px;
  border: 1px solid var(--glass-border); background: var(--glass-bg);
  border-radius: 14px; padding: 0.85rem 1.1rem; margin: 0 0 2rem;
}
.ev-search input {
  flex: 1; background: none; border: 0; outline: 0; color: var(--text-primary);
  font-family: var(--font-sans); font-size: 0.95rem;
}
.ev-cols { columns: 2; column-gap: 1.6rem; }
@media (max-width: 820px) { .ev-cols { columns: 1; } }
.ev-group {
  break-inside: avoid; background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: 1.5rem 1.6rem; margin-bottom: 1.6rem;
}
.ev-head { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.3rem; }
.ev-head h2 { font-size: 1.25rem; margin: 0; }
.ev-chip { width: 40px; height: 40px; border-radius: 11px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.ev-sub { font-size: 0.78rem; color: var(--text-muted); margin-bottom: 0.9rem; font-weight: 600; }
.ev-group ul { list-style: none; }
.ev-group li {
  font-size: 0.85rem; color: var(--text-secondary); line-height: 1.55;
  padding: 0.45rem 0; border-top: 1px solid var(--line-soft);
}
.ev-group li:first-child { border-top: 0; }
.ev-group li.ev-hide { display: none; }
.ev-dive { display: inline-block; margin-top: 0.9rem; font-size: 0.8rem; font-weight: 800; color: #4f46e5; }

/* ─── adults-only badge ─── */
.age-badge {
  display: inline-flex; align-items: center; gap: 0.5rem;
  font-size: 0.72rem; font-weight: 900; letter-spacing: 0.08em;
  border: 1px solid rgba(244,114,182,0.4); color: #be185d;
  background: rgba(244,114,182,0.10); border-radius: 99px; padding: 0.4rem 0.9rem;
}
.age-strip {
  text-align: center; font-size: 0.8rem; color: var(--text-muted);
  padding: 0.9rem 1.2rem; border-top: 1px solid var(--glass-border);
}
.age-strip b { color: var(--text-secondary); }

/* ─── reveal band (the currency) ─── */
.reveal-band {
  background: linear-gradient(160deg, #fffbeb, #fffdf7);
  border: 1px solid rgba(217,119,6,0.22); border-radius: var(--radius-xl);
  padding: 3rem 2.4rem; text-align: center;
}
.reveal-band .kicker { color: #b45309; }
.reveal-band p { max-width: 640px; margin: 0 auto 1.2rem; color: var(--text-secondary); }

/* ─── pricing ─── */
.price-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.6rem; align-items: stretch; }
.price-card {
  background: var(--glass-bg); border: 1px solid var(--glass-border);
  border-radius: var(--radius-xl); padding: 2rem 1.8rem; display: flex; flex-direction: column;
}
.price-card.featured { border-color: rgba(99,102,241,0.55); box-shadow: var(--shadow-glow); }
.price-card .tier { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase; color: #4f46e5; margin-bottom: 0.6rem; }
.price-card .amount { font-family: var(--font-serif); font-size: 2.4rem; font-weight: 900; color: var(--text-primary); line-height: 1.1; font-variant-numeric: lining-nums; }
.price-card .amount .cur { font-family: var(--font-sans); font-weight: 800; font-size: 0.58em; vertical-align: 0.32em; margin-right: 0.05em; }
.price-card .per { font-size: 0.85rem; color: var(--text-muted); margin-bottom: 1.2rem; }
.price-card ul { margin: 0 0 1.6rem; }
.price-card li { font-size: 0.88rem; color: var(--text-secondary); padding: 0.4rem 0; border-top: 1px solid var(--line-soft); }
.price-card li:first-child { border-top: 0; }
.price-card .btn { margin-top: auto; text-align: center; }
.price-note { text-align: center; font-size: 0.85rem; color: var(--text-muted); max-width: 560px; margin: 1.6rem auto 0; }

/* ─── misc ─── */
.quote-figure { border-left: 3px solid var(--accent-start); padding-left: 1.4rem; margin: 1.6rem 0; }
.quote-figure p { font-family: var(--font-serif); font-size: 1.15rem; font-style: italic; color: var(--text-primary); }
.img-card { border-radius: var(--radius-lg); overflow: hidden; border: 1px solid var(--glass-border); background: var(--glass-bg); }
.img-card img { width: 100%; }
.img-card figcaption { font-size: 0.78rem; color: var(--text-muted); padding: 0.8rem 1rem; }
.store-badges { display: flex; gap: 0.8rem; justify-content: center; flex-wrap: wrap; margin-top: 1.4rem; }
.store-badges span {
  font-size: 0.8rem; font-weight: 800; color: var(--text-secondary);
  border: 1.5px solid var(--glass-border); border-radius: 12px; padding: 0.7rem 1.2rem;
}


/* ─── Round 58: quiet section rhythm. Alternating warm washes so the page
   breathes without hard rules or heavy cards. ─── */
section:nth-of-type(even) { background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(246,244,241,0.75) 18%, rgba(246,244,241,0.75) 82%, rgba(255,255,255,0) 100%); }
.pcard, .price-card, .why-card, .step-card, .ev-group, .img-card { background: #ffffff; border-color: var(--glass-border); box-shadow: var(--shadow-sm); }
.pcard:hover, .price-card:hover { box-shadow: var(--shadow-md); }
.phone .mini-card { background: #faf9f7; }
.age-strip { color: var(--text-muted); }

/* ─── Round 58: the research layer, on-page. Soft paper cards, so the
   citations feel like a reading list rather than another feature grid. ─── */
.concept-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.1rem; }
.concept-chip {
  display: block; background: #ffffff; border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); padding: 1.4rem 1.5rem; text-decoration: none;
  box-shadow: var(--shadow-sm);
  transition: border-color var(--transition-base), transform var(--transition-base), box-shadow var(--transition-base);
}
.concept-chip:hover { border-color: rgba(139, 92, 246, 0.4); transform: translateY(-2px); box-shadow: var(--shadow-md); }
.concept-chip b {
  display: block; font-family: var(--font-serif); font-size: 1.1rem;
  color: var(--text-primary); margin-bottom: 0.45rem;
}
.concept-chip p { font-size: 0.88rem; color: var(--text-secondary); line-height: 1.6; margin-bottom: 0.2rem; }
.concept-chip .src-pill { margin-top: 0.7rem; }

/* ─── round 65 · orphan-row fixes (never 3-then-1) ─── */
@media (min-width: 760px) {
  .why-grid:has(> :nth-child(4):last-child) { grid-template-columns: repeat(2, 1fr); }
}
/* the multi-column tricks need real width; at tablet they cram cards */
@media (min-width: 1024px) {
  .step-grid:has(> :nth-child(6):last-child) { grid-template-columns: repeat(3, 1fr); }
  .pcards:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, 1fr); }
  .pcards:has(> :nth-child(5):last-child) > .pcard { grid-column: span 2; }
  .pcards:has(> :nth-child(5):last-child) > .pcard:nth-child(4),
  .pcards:has(> :nth-child(5):last-child) > .pcard:nth-child(5) { grid-column: span 3; }
}
/* ─── round 70 · tablet band: two-up grids, odd last card spans the row ─── */
@media (min-width: 760px) and (max-width: 1023px) {
  .why-grid, .step-grid, .pcards { grid-template-columns: repeat(2, 1fr); }
  .grid-3 { grid-template-columns: repeat(2, 1fr); }
  .why-grid > :nth-child(odd):last-child,
  .step-grid > :nth-child(odd):last-child,
  .pcards > :nth-child(odd):last-child,
  .grid-3 > :nth-child(odd):last-child { grid-column: 1 / -1; width: 100%; max-width: 560px; justify-self: center; }
  /* !important: the figure carries an inline flex:1 */
  .subhero > .img-card { flex: 0 1 100% !important; margin: 0 auto; }
}

/* ─── round 65 · the color therapy, carried into the pages ───
   Each page declares its feature via <body data-accent="…">; the accent
   map is DESIGN-SYSTEM §3, expressed as a deep text tone + a soft tint. */
body[data-accent="messages"] { --fx-deep: #b91c1c; --fx-tint: #fef2f2; --fx-a: #ef4444; --fx-b: #dc2626;  --fx-900: #7f1d1d;}
body[data-accent="library"] { --fx-deep: #1d4ed8; --fx-tint: #eff6ff; --fx-a: #2563eb; --fx-b: #3b82f6;  --fx-900: #1e3a8a;}
body[data-accent="tracker"] { --fx-deep: #15803d; --fx-tint: #f0fdf4; --fx-a: #22c55e; --fx-b: #16a34a;  --fx-900: #14532d;}
body[data-accent="date-night"] { --fx-deep: #be185d; --fx-tint: #fdf2f8; --fx-a: #ec4899; --fx-b: #db2777;  --fx-900: #831843;}
body[data-accent="journal"] { --fx-deep: #0e7490; --fx-tint: #ecfeff; --fx-a: #0891b2; --fx-b: #06b6d4;  --fx-900: #164e63;}
body[data-accent="exchange"] { --fx-deep: #c2410c; --fx-tint: #fff7ed; --fx-a: #f97316; --fx-b: #ea580c;  --fx-900: #7c2d12;}
body[data-accent="privacy"] { --fx-deep: #44403c; --fx-tint: #f5f5f4; --fx-a: #4f46e5; --fx-b: #9333ea;  --fx-900: #1c1917;}
body[data-accent="sessions"] { --fx-deep: #0f766e; --fx-tint: #f0fdfa; --fx-a: #0d9488; --fx-b: #14b8a6;  --fx-900: #134e4a;}
body[data-accent] .step-num { background: linear-gradient(135deg, var(--fx-a), var(--fx-b)); }
body[data-accent] .subhero-text h1 .text-gradient {
  background: linear-gradient(135deg, var(--fx-a), var(--fx-b));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
body[data-accent] .why-card { border-top: 3px solid var(--fx-a); }
body[data-accent] .subhero { padding: 2.2rem 0 2.6rem; }
/* ─── round 100 · A1, the colour band header (Estevan, 2026-09-10) ───
   Ported from the social cards: the same linear-gradient(160deg, 900, accent),
   the same Playfair 900 in white, and the second beat as an italic rather than
   the gradient text it used to be. His note on v1 was that the content has to
   sit in the container and the floating fragment was too far right, so nothing
   here is positioned off the viewport — the hero keeps the page's own rails.
   A page opts in with class="hero-band" on its first section. */
body[data-accent] section:first-of-type:not(.hero-band) { background: linear-gradient(160deg, var(--fx-tint), transparent 70%); padding-bottom: 3rem; }
.hero-band { background: linear-gradient(160deg, var(--fx-900, #1e1b4b), var(--fx-a, #4f46e5));
  color: #fff; padding-bottom: 3.4rem; }
.hero-band .crumb, .hero-band .crumb a { color: rgba(255,255,255,0.72); }
.hero-band .crumb a:hover { color: #fff; }
.hero-band .hero-problem-kicker, .hero-band .hero-answer-kicker { color: rgba(255,255,255,0.72) !important; }
.hero-band .hero-problem { color: rgba(255,255,255,0.8); }
.hero-band .subhero-text h1 { color: #fff; }
/* the card's "cursive" second beat — an italic, not a gradient fill */
body[data-accent] .hero-band .subhero-text h1 .text-gradient {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  /* the base .text-gradient paints with -webkit-text-fill-color, which beats
     `color` outright — without resetting it the second beat renders invisible */
  color: #fff; -webkit-text-fill-color: #fff;
  font-style: italic; font-weight: 700; opacity: 0.95;
}
.hero-band .subhero-text > p { color: rgba(255,255,255,0.8); }
.hero-band .age-badge { background: rgba(255,255,255,0.16) !important; color: #fff !important;
  border-color: rgba(255,255,255,0.32) !important; }
/* the fragment and its chips are white cards already; they just need a deeper
   shadow to sit on colour instead of cream */
.hero-band .appfrag { box-shadow: 0 22px 46px rgba(0,0,0,0.28); border-color: transparent; }
.hero-band .xel { box-shadow: 0 16px 34px rgba(0,0,0,0.3); border-color: transparent; }

/* ─── round 100 · B3, the curiosity strip at the foot ───
   Estevan: "another indicator of another section, to keep people always
   educationally curious." Not navigation — a real piece of the library, tied to
   the page you are on. The pill row stays underneath it. */
.curio { background: linear-gradient(160deg, var(--cu-900, #78350f), var(--cu-a, #f59e0b)); color: #fff;
  border-radius: var(--radius-xl); padding: 1.7rem 1.9rem; display: grid;
  grid-template-columns: 1fr auto; gap: 1.8rem; align-items: center;
  box-shadow: 0 20px 44px -22px rgba(31,27,28,0.5); text-decoration: none; }
.curio .cu-lab { font-size: 0.62rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.7); margin-bottom: 0.5rem; display: block; }
.curio h3 { font-family: var(--font-serif); font-weight: 900; font-size: 1.45rem; line-height: 1.12;
  color: #fff; margin: 0; }
.curio h3 em { font-style: italic; font-weight: 700; opacity: 0.95; }
.curio p { font-size: 0.86rem; line-height: 1.6; color: rgba(255,255,255,0.8); margin-top: 0.55rem;
  max-width: 54ch; }
.curio .cu-go { background: rgba(255,255,255,0.96); color: var(--cu-900, #78350f); border-radius: 99px;
  padding: 0.7rem 1.3rem; font-size: 0.78rem; font-weight: 900; white-space: nowrap; }
@media (max-width: 720px) {
  .curio { grid-template-columns: 1fr; gap: 1.1rem; }
  .curio .cu-go { justify-self: start; }
}
/* round 93 (Estevan): anchor the colour at the BOTTOM of the page and let it
   rise through white, so the centre stays light and the footer carries the hue. */
body[data-accent] { background-image:
  linear-gradient(0deg, var(--fx-tint) 0%, rgba(255,255,255,0) 38%),
  radial-gradient(circle at 12% -5%, rgba(168,85,247,0.05), transparent 42%),
  radial-gradient(rgba(27,26,25,0.045) 1px, transparent 1px);
  background-size: auto, auto, 22px 22px;
  background-attachment: fixed, fixed, scroll; }

/* ─── round 67 · Estevan's edit-bar notes, homepage ─── */
/* N2: the brand lockup moves to the hero's upper corner; the hero pulls
   tight to the nav and gives back ~30% of its height. */
.hero-lockup { position: absolute; top: calc(var(--nav-height) + 1.1rem); left: clamp(1rem, 4vw, 2.6rem);
  display: flex; align-items: center; gap: 0.8rem; text-align: left; z-index: 2; }
.hero-lockup img { width: 72px; height: 72px; object-fit: contain; }
.hero-lockup .tag { font-size: 0.72rem; font-weight: 800; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--fx-deep, #be185d); }
@media (max-width: 720px) { .hero-lockup img { width: 52px; height: 52px; } }
/* N3: "Start tracking your relationship." holds one line at desktop */
.hero-content { max-width: 1160px; }
.hero h1 { font-size: clamp(2.1rem, 3.55vw, 3.15rem); line-height: 1.12; }
/* N4: the loop heading carries the message-ring colors */
.grad-msg { background: linear-gradient(135deg, #4f46e5, #9333ea); -webkit-background-clip: text; background-clip: text; color: transparent; }
/* N5 + N1 sibling: the problem cards wear their feature's color */
.pcard.fx { border-top: 4px solid var(--fx-a); }
/* round 72b: the shade lives on the CARD, rising from its base — the solution
   block floats mid-card in stretched rows, so painting it there left a white
   strip below (Estevan's screenshot) */
.pcard.fx { background: linear-gradient(0deg, var(--fx-tint), rgba(255,255,255,0) 55%), #ffffff; }
.pcard.fx .pcard-solution { background: none; margin-top: auto; padding-top: 1.2rem; border-top: 0; }
.pcard.fx .pcard-solution .lbl { color: var(--fx-deep); }
.pcard.fx .pcard-go { color: var(--fx-deep); }

/* round 67 · hero rhythm tightened with the padding cut */
.hero h1 { margin-bottom: 1rem; }
.hero-content > p { margin-bottom: 1.3rem; }

/* round 67b · the lockup folds into the nav (Estevan's annotation) */
.nav-brandtext { display: flex; flex-direction: column; line-height: 1.1; }
/* tagline matches the app's sidebar lockup: small serif italic, muted, tracking-wide */
.nav-tagline { font-family: var(--font-serif); font-style: italic; font-weight: 400;
  font-size: 0.66rem; letter-spacing: 0.06em; color: #9ca3af; margin-top: 2px; }
.hero-lockup { display: none; }

/* ─── round 68 · second-line echo for headings (privacy flirt line) ─── */
.h2-echo {
  display: inline-block; font-family: var(--font-serif); font-style: italic;
  font-weight: 400; font-size: 0.62em; color: var(--text-muted);
  margin-top: 0.45rem; letter-spacing: 0.01em;
}

/* ─── round 69b · nav at tight desktop widths: logo carries the brand ─── */
.nav-brandtext > span { white-space: nowrap; }
@media (min-width: 768px) and (max-width: 1120px) {
  .nav .nav-brandtext { display: none; }
}

/* ─── round 72 · pre-launch gate dialog ─── */
.gate-overlay { position: fixed; inset: 0; z-index: 4000; display: flex; align-items: center;
  justify-content: center; padding: 1.5rem; background: rgba(27,26,25,0.45); backdrop-filter: blur(6px); }
.gate-card { background: #ffffff; border-radius: var(--radius-xl); padding: 2.6rem 2.2rem;
  max-width: 440px; width: 100%; text-align: center; box-shadow: var(--shadow-lg);
  border-top: 4px solid var(--accent-start); }
.gate-emoji { font-size: 2.2rem; margin-bottom: 0.8rem; }
.gate-card h3 { font-size: 1.45rem; margin-bottom: 0.7rem; }
.gate-card p { color: var(--text-secondary); font-size: 0.98rem; margin-bottom: 1.6rem; }
.gate-form { display: flex; gap: 0.5rem; flex-wrap: wrap; justify-content: center; margin-bottom: 0.6rem; }
.gate-form input { flex: 1; min-width: 200px; font-family: var(--font-sans); font-size: 0.92rem;
  padding: 0.65rem 0.9rem; border: 1px solid var(--glass-border); border-radius: 99px; }
.gate-fineprint { font-size: 0.72rem !important; color: var(--text-muted) !important; margin-bottom: 1rem !important; }
.gate-thanks { font-weight: 800; color: #047857 !important; margin-bottom: 1rem !important; }
.gate-close { border: 1px solid var(--glass-border); background: #fff; }

/* ─── round 78 · scenario depth + FAQ (SEO / answer-engine content) ─── */
.scen-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 1.6rem; }
.scen { background: #fff; border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: 1.7rem 1.8rem; box-shadow: var(--shadow-sm); }
.scen h3 { font-size: 1.2rem; margin-bottom: 0.6rem; }
.scen p { font-size: 0.95rem; line-height: 1.75; color: var(--text-secondary); max-width: none; }
.faq-list { max-width: 760px; margin: 0 auto; display: flex; flex-direction: column; gap: 0.7rem; }
.faq-item { background: #fff; border: 1px solid var(--glass-border); border-radius: var(--radius-md);
  padding: 1.1rem 1.3rem; box-shadow: var(--shadow-sm); }
.faq-item summary { font-family: var(--font-serif); font-size: 1.08rem; font-weight: 700;
  color: var(--text-primary); cursor: pointer; list-style: none; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary::after { content: "+"; float: right; color: #4f46e5; font-weight: 800; }
.faq-item[open] summary::after { content: "\2013"; }
.faq-item p { margin-top: 0.8rem; font-size: 0.93rem; line-height: 1.75; color: var(--text-secondary); max-width: none; }

/* ─── round 83 · Treatments A + D: the app blown open, no phone frames ───
   Estevan's pick. Every floating element names its FEATURE before its state,
   so colour confirms identity and never carries it alone (the rule that keeps
   the orange/red and teal/emerald pairs legal at marketing sizes). */
/* round 84: the frame is sized by the product surface inside it, not by air. */
.exploded { position: relative; flex: 0 1 430px; min-width: 300px;
  display: grid; place-items: center; padding: 2rem 1.9rem; }
.exploded::before { content: ""; position: absolute; inset: -18% -14% auto auto; width: 300px; height: 300px;
  background: radial-gradient(circle, var(--fx-tint, #f5f3ff), transparent 65%); pointer-events: none; }
.exploded::after { content: ""; position: absolute; inset: auto auto -20% -14%; width: 320px; height: 320px;
  background: radial-gradient(circle, var(--fx-tint, #eff6ff), transparent 65%); pointer-events: none; }
.xel { position: absolute; z-index: 3; display: flex; gap: 0.6rem; align-items: center; max-width: 232px;
  background: #fff; border: 1px solid var(--glass-border); border-radius: 16px;
  box-shadow: var(--shadow-md); padding: 0.7rem 0.85rem; animation: xbob 7s ease-in-out infinite; }
@keyframes xbob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.xic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; flex: 0 0 auto; color: #fff; }
.xic svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.xtx { display: block; font-size: 0.84rem; font-weight: 700; color: var(--text-primary); line-height: 1.35; }
.xtx b { display: block; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.09em;
  text-transform: uppercase; margin-bottom: 0.15rem; }
.xtx em { display: block; font-style: normal; font-size: 0.74rem; font-weight: 400; color: var(--text-muted); margin-top: 0.2rem; }

.spotlight { position: relative; display: grid; place-items: center; padding: 2.5rem 1rem;
  background: #fff; border: 1px solid var(--glass-border); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); }
.spot-card { width: min(440px, 100%); background: #fff; border: 1px solid var(--glass-border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); padding: 1.2rem 1.3rem; z-index: 2; }
.spot-row { display: flex; gap: 0.8rem; align-items: center; padding: 0.7rem 0; border-top: 1px solid var(--line-soft); }
.spot-row:first-child { border-top: 0; }
.spot-callout { position: absolute; z-index: 3; max-width: 190px; font-size: 0.76rem; font-weight: 800;
  color: var(--text-primary); background: #fff; border: 1px solid var(--glass-border);
  border-radius: 12px; padding: 0.5rem 0.75rem; box-shadow: var(--shadow-md); }
.spot-callout em { display: block; font-style: normal; font-weight: 400; font-size: 0.72rem; color: var(--text-muted); margin-top: 0.15rem; }
.spot-callout.a { top: 2rem; left: 2rem; }
.spot-callout.b { bottom: 2rem; right: 2rem; }
@media (max-width: 820px) {
  .xel { position: static !important; margin: 0 0 0.65rem; animation: none; max-width: none; }
  .exploded { min-height: auto; }
  .spot-callout { position: static; max-width: none; margin: 0.6rem 0 0; }
  .spotlight { padding: 1.4rem 1rem; }
}

/* ─── round 84 · the actual product surface, drawn (never a screenshot) ─── */
.appfrag { position: relative; z-index: 2; width: 100%; max-width: 360px; background: #fff;
  border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 0.9rem 1rem 2.7rem; }
.af-bar { display: flex; align-items: center; gap: 0.45rem; padding-bottom: 0.6rem;
  border-bottom: 1px solid var(--line-soft); margin-bottom: 0.75rem; }
.af-bar b { font-size: 0.72rem; font-weight: 900; letter-spacing: 0.07em; text-transform: uppercase; color: var(--text-secondary); }
.af-dot { width: 9px; height: 9px; border-radius: 50%; display: block; }
.af-entry { margin-bottom: 0.7rem; }
.af-date { display: block; font-size: 0.63rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted); margin-bottom: 0.25rem; }
.af-entry p { font-size: 0.82rem; line-height: 1.55; color: var(--text-secondary); max-width: none; }
.af-entry p b { color: var(--text-primary); }
.af-chat { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: 0.7rem; }
.af-bub { font-size: 0.78rem; line-height: 1.45; padding: 0.45rem 0.7rem; border-radius: 13px; max-width: 88%; }
.af-bub.them { background: #f4f2ef; color: var(--text-secondary); align-self: flex-start; border-bottom-left-radius: 4px; }
.af-bub.me { background: linear-gradient(135deg, var(--fx-a, #6366f1), var(--fx-b, #a855f7));
  color: #fff; align-self: flex-end; border-bottom-right-radius: 4px; }
/* A covered photo in Flirts is the real image, blurred, with a white pill on
   top - SecurePhoto.tsx. Not a flat swatch with a caption. */
.af-cover { height: 86px; border-radius: 8px; margin-bottom: 0.7rem; position: relative; overflow: hidden;
  display: grid; place-items: center; }
.af-cover-img { position: absolute; inset: -10px;
  background:
    radial-gradient(38% 60% at 28% 34%, rgba(255,214,190,0.95), transparent 70%),
    radial-gradient(30% 50% at 70% 62%, rgba(88,28,135,0.9), transparent 72%),
    linear-gradient(118deg, #7f1d1d, #9d174d 46%, #4c1d95);
  filter: blur(15px); opacity: 0.62; }
.af-reveal { position: relative; z-index: 2; display: inline-flex; align-items: center; gap: 0.34rem;
  background: rgba(255,255,255,0.9); backdrop-filter: blur(6px); border-radius: 99px;
  padding: 0.32rem 0.72rem; font-size: 0.68rem; font-weight: 800; color: var(--text-primary);
  box-shadow: var(--shadow-sm); }
.af-reveal svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2.1;
  stroke-linecap: round; stroke-linejoin: round; }
.af-cover-timer { position: absolute; right: 0.45rem; bottom: 0.4rem; z-index: 2; font-style: normal;
  font-size: 0.58rem; font-weight: 800; color: rgba(255,255,255,0.95); letter-spacing: 0.03em;
  background: rgba(27,26,25,0.34); border-radius: 99px; padding: 0.1rem 0.4rem; }
.af-row { display: flex; gap: 0.6rem; align-items: center; padding: 0.5rem 0; border-top: 1px solid var(--line-soft); }
.af-row:first-of-type { border-top: 0; }
.af-ic { width: 28px; height: 28px; border-radius: 9px; display: grid; place-items: center; font-size: 0.9rem; flex: 0 0 auto; }
.af-row b { display: block; font-size: 0.8rem; color: var(--text-primary); }
.af-row em { display: block; font-style: normal; font-size: 0.7rem; color: var(--text-muted); }
.af-quad { display: grid; grid-template-columns: 1fr 1fr; gap: 0.3rem; margin-top: 0.7rem; }
.af-quad span { font-size: 0.63rem; font-weight: 800; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--text-muted); background: #faf9f7; border-radius: 7px; padding: 0.3rem 0.45rem; text-align: center; }
.af-rings { display: flex; gap: 0.8rem; justify-content: center; margin-bottom: 0.8rem; }
.af-ring { width: 62px; height: 62px; border-radius: 50%; display: grid; place-items: center; text-align: center;
  font-size: 0.56rem; font-weight: 900; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-secondary);
  border: 3.5px solid var(--r, #22c55e); }
.af-ring.dim { border-color: rgba(27,26,25,.12); color: var(--text-muted); }
.af-week { display: flex; gap: 0.3rem; justify-content: center; margin-bottom: 0.8rem; }
.af-week i { width: 22px; height: 30px; border-radius: 7px; border: 1px solid var(--line-soft); background: #faf9f7; display: block; }
.af-week i.on { background: rgba(34,197,94,.16); border-color: rgba(34,197,94,.4); }
.af-week i.now { border: 2px solid var(--accent-start); }
.af-prog { height: 6px; border-radius: 99px; background: #f1efec; overflow: hidden; margin-bottom: 0.8rem; }
.af-prog i { display: block; height: 100%; background: #2563eb; }
.af-plan { background: #fdf2f8; border-radius: 12px; padding: 0.65rem 0.8rem; margin-bottom: 0.7rem; }
.af-plan b { display: block; font-family: var(--font-serif); font-size: 1rem; color: var(--text-primary); }
.af-plan em { font-style: normal; font-size: 0.72rem; color: var(--text-muted); }
.af-ratio { display: flex; align-items: baseline; gap: 0.6rem; margin-bottom: 0.6rem; }
.af-ratio b { font-family: var(--font-serif); font-size: 2rem; font-weight: 900; color: var(--text-primary); }
.af-ratio span { font-size: 0.72rem; color: var(--text-muted); }
.af-foot { display: flex; gap: 0.5rem; align-items: center; flex-wrap: wrap;
  border-top: 1px solid var(--line-soft); padding-top: 0.65rem; }
.af-pill { font-size: 0.63rem; font-weight: 900; letter-spacing: 0.05em; text-transform: uppercase;
  border-radius: 99px; padding: 3px 9px; }
.af-mut { font-size: 0.68rem; color: var(--text-muted); }
@media (max-width: 820px) {
  .appfrag { max-width: none; }
  .exploded { flex: 1 1 auto; padding: 0.6rem 0; }
}

/* ─── round 86 · QA fixes from the desktop + mobile read ─── */
/* the 18+ badge was pink on a red page — a near-miss reads as a mistake */
.age-badge { color: var(--text-secondary) !important; background: rgba(27,26,25,0.05) !important;
  border-color: rgba(27,26,25,0.12) !important; }
/* related-feature pills carry the page's accent rather than stopping the system at the footer */
.next-links a { border-color: var(--fx-a, var(--glass-border)); color: var(--fx-deep, var(--text-secondary)); }
/* quote cards went 2-up on phones and shrank the text to ~10px */
@media (max-width: 640px) {
  .grid-3, .grid-2 { grid-template-columns: 1fr !important; }
  section { padding: 3.6rem 0; }
  .exploded .xel { position: static !important; margin: 0.55rem 0 0; width: 100%; max-width: none; }
}

/* the FAQ toggle was wrapping to its own line when the question filled the row */
.faq-item summary { display: flex; align-items: baseline; justify-content: space-between; gap: 0.9rem; }
.faq-item summary::after { float: none; flex: 0 0 auto; }
/* research citations belong to Advice/Science, which is amber */
.concept-chip .src-pill, #ideas .src-pill {
  color: #b45309; background: rgba(245,158,11,0.12); border-color: rgba(245,158,11,0.35);
}

/* ─── round 88 · pre-launch polish from the desktop read ─── */
body[data-accent="science"] { --fx-deep: #b45309; --fx-tint: #fffbeb; --fx-a: #f59e0b; --fx-b: #d97706;  --fx-900: #78350f;}
/* the footer key read as a stray glyph to the public: near-invisible until hovered,
   but still findable because the whole copyright line lights it up. */
.tb-keyhost #tbKey { opacity: .07 !important; }
.tb-keyhost:hover #tbKey { opacity: .5 !important; }
/* the blog empty state was centred against the wrong axis */
.blog-empty { max-width: 100%; margin: 0 auto; }
/* long-measure guard: no body column runs the full card width */
.science-concept p, .card p, .story-content p { max-width: 68ch; }
/* the never-ending list's header sat off both the centre and the grid */
#ev-head-fix, .ev-header { text-align: left; }

/* ─── round 89 · the instruments, drawn native ───
   These replace the social share cards that were being pasted in as page
   content. Each one carries the tool, the researcher, and the logic. */
.instr-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.6rem; align-items: start; }
.instr { background: #fff; border: 1px solid var(--glass-border); border-top: 3px solid var(--i, #4f46e5);
  border-radius: var(--radius-lg); padding: 1.5rem 1.6rem; box-shadow: var(--shadow-sm); margin: 0; }
.instr-head { display: block; margin-bottom: 1.1rem; }
.instr-head b { display: block; font-family: var(--font-serif); font-size: 1.15rem; font-weight: 800; color: var(--text-primary); }
.instr-head span { display: block; font-size: 0.68rem; font-weight: 900; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--i, #4f46e5); margin-top: 0.2rem; }
.instr-logic { font-size: 0.86rem; line-height: 1.65; color: var(--text-secondary); margin-top: 1.1rem;
  border-top: 1px solid var(--line-soft); padding-top: 0.9rem; max-width: none; }
.instr-logic b { color: var(--text-primary); font-weight: 700; }

/* the Wheel */
.wheel { position: relative; padding: 1.4rem 0 0.2rem; }
.wheel-ax { display: block; font-size: 0.6rem; font-weight: 800; letter-spacing: 0.06em;
  text-transform: uppercase; color: var(--text-muted); text-align: center; }
.wheel-ax.y { display: none; }
.wheel-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; margin-top: 0.6rem; }
.wheel-grid .q { display: block; border: 1.5px solid var(--q); border-radius: 12px; padding: 0.6rem 0.7rem;
  font-size: 0.66rem; color: var(--text-muted); background: #fff; }
.wheel-grid .q b { display: block; font-size: 0.84rem; font-weight: 800; color: var(--q); margin-bottom: 0.1rem; }

/* dual control */
.levers { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; }
.lever { border-radius: 12px; padding: 0.7rem 0.8rem; }
.lever-h { display: block; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.07em;
  text-transform: uppercase; margin-bottom: 0.4rem; }
.lever em { display: block; font-style: normal; font-size: 0.76rem; color: var(--text-secondary); padding: 0.18rem 0; }
.lever.acc { background: rgba(34,197,94,0.09); } .lever.acc .lever-h { color: #15803d; }
.lever.brk { background: rgba(239,68,68,0.08); } .lever.brk .lever-h { color: #b91c1c; }

/* responsive desire */
.timeline { display: flex; flex-direction: column; gap: 0.5rem; }
.tl-row { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8rem; color: var(--text-muted);
  background: #faf9f7; border-radius: 10px; padding: 0.55rem 0.7rem; }
.tl-row i { font-style: normal; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.06em;
  text-transform: uppercase; min-width: 8.6rem; }
.tl-row b { font-weight: 800; color: var(--text-secondary); }
.tl-row u { text-decoration: none; color: var(--text-muted); }
.tl-row.on { background: rgba(168,85,247,0.10); }
.tl-row.on b { color: #7e22ce; }

/* the ratio */
.ratio-viz { text-align: center; }
.ratio-viz .dots { display: flex; gap: 0.35rem; justify-content: center; margin-bottom: 0.6rem; }
.ratio-viz .dots i { width: 15px; height: 15px; border-radius: 50%; display: block; }
.ratio-viz .dots i.p { background: #22c55e; } .ratio-viz .dots i.n { background: #d6d3d1; }
.ratio-viz b { font-family: var(--font-serif); font-size: 2.1rem; font-weight: 900; color: var(--text-primary); }
.ratio-key { display: flex; gap: 0.9rem; justify-content: center; margin-top: 0.3rem; }
.ratio-key em { font-style: normal; font-size: 0.64rem; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase; }
.ratio-key em.p { color: #15803d; } .ratio-key em.n { color: var(--text-muted); }

/* bids */
.bids { display: flex; flex-direction: column; gap: 0.45rem; }
.bid, .bid-arm { border-radius: 11px; padding: 0.55rem 0.75rem; font-size: 0.8rem; }
.bid { background: #faf9f7; } .bid b { color: var(--text-primary); }
.bid em, .bid-arm em { display: block; font-style: normal; font-size: 0.64rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); margin-top: 0.1rem; }
.bid-arm { margin-left: 1.4rem; }
.bid-arm.toward { background: rgba(34,197,94,0.10); } .bid-arm.toward b { color: #15803d; }
.bid-arm.away { background: rgba(27,26,25,0.04); } .bid-arm.away b { color: var(--text-muted); }

/* the ledger */
.ledger { display: flex; flex-direction: column; gap: 0.4rem; }
.led { display: flex; align-items: baseline; gap: 0.55rem; font-size: 0.82rem; color: var(--text-secondary);
  border-radius: 10px; padding: 0.5rem 0.7rem; background: #faf9f7; }
.led b { font-size: 1rem; font-weight: 900; }
.led em { margin-left: auto; font-style: normal; font-size: 0.62rem; font-weight: 800;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-muted); }
.led.in { background: rgba(249,115,22,0.09); } .led.in b { color: #c2410c; }
.led.out b { color: var(--text-muted); }

/* the spark */
.spark { display: flex; flex-direction: column; gap: 0.45rem; }
.spark-step { border-radius: 11px; padding: 0.55rem 0.75rem; background: #faf9f7; font-size: 0.82rem; }
.spark-step b { color: var(--text-primary); }
.spark-step em { display: block; font-style: normal; font-size: 0.7rem; color: var(--text-muted); }
.spark-step.on { background: rgba(236,72,153,0.10); } .spark-step.on b { color: #be185d; }

@media (max-width: 560px) {
  .levers, .wheel-grid { grid-template-columns: 1fr; }
  .tl-row { flex-wrap: wrap; } .tl-row i { min-width: 100%; }
}

/* ─── round 90 · consent bar (marketing site only) ─── */
.consent-bar { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 3500;
  max-width: 720px; margin: 0 auto; display: flex; gap: 1.1rem; align-items: center; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 1.1rem 1.3rem; }
.consent-bar p { font-size: 0.86rem; line-height: 1.6; color: var(--text-secondary); flex: 1; min-width: 260px; max-width: none; margin: 0; }
.consent-bar p b { color: var(--text-primary); }
.consent-btns { display: flex; gap: 0.5rem; flex-wrap: wrap; }
.consent-bar .btn { font-size: 0.82rem; padding: 0.55rem 1.15rem; }
.consent-no { background: #fff; border: 1px solid var(--glass-border); color: var(--text-secondary); }
@media (max-width: 560px) { .consent-bar { padding: 0.9rem 1rem; } .consent-btns { width: 100%; } .consent-btns .btn { flex: 1; } }

/* ─── round 93 · the guides, as the app actually defines them ─── */
.guide-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1.2rem; }
.guide { background: #fff; border: 1px solid var(--glass-border); border-top: 3px solid var(--g);
  border-radius: var(--radius-lg); padding: 1.3rem 1.4rem; box-shadow: var(--shadow-sm); position: relative; }
.guide-dot { position: absolute; top: 1.3rem; right: 1.3rem; width: 10px; height: 10px;
  border-radius: 50%; background: var(--g); display: block; }
.guide b { display: block; font-family: var(--font-serif); font-size: 1.3rem; color: var(--text-primary); }
.guide em { display: block; font-style: normal; font-size: 0.66rem; font-weight: 900; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--g); margin: 0.15rem 0 0.7rem; }
.guide p { font-size: 0.86rem; line-height: 1.6; color: var(--text-secondary); max-width: none; }

/* ─── round 93 · the rings, at the app's real geometry ─── */
.rings3 { display: flex; gap: 1.4rem; justify-content: center; margin-bottom: 0.9rem; }
.ring3 { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; }
.ring3 svg { width: 52px; height: 52px; display: block; }
.ring3 b { font-size: 0.58rem; font-weight: 900; letter-spacing: 0.06em; text-transform: uppercase; }

/* --- round 94 . the product surfaces, at the app's own scale --- */
/* The app rounds at 6-10px. Ours were rounding at 12-16 and reading soft. */
.appfrag { border-radius: 10px; }
.af-row, .af-entry, .af-plan { border-radius: 8px; }
.af-bub { border-radius: 11px; }
.af-bub.them { border-bottom-left-radius: 3px; }
.af-bub.me { border-bottom-right-radius: 3px; }

/* the five check-in dimensions, labelled the way the app labels them */
.af-dims { display: flex; flex-direction: column; gap: 0.42rem; margin-bottom: 0.75rem; }
.af-dims span { display: grid; grid-template-columns: 108px 1fr; align-items: center; gap: 0.6rem; }
.af-dims b { font-size: 0.68rem; font-weight: 700; color: var(--text-secondary); line-height: 1.25; }
.af-dims i { display: block; height: 7px; border-radius: 99px; background: rgba(27,26,25,0.07); position: relative; }
.af-dims i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w);
  background: #22c55e; border-radius: 99px; }

/* the science page ran long and chunky; tighten its rhythm alone */
body[data-accent="science"] section { padding: 4.5rem 0; }
@media (min-width: 768px) { body[data-accent="science"] section { padding: 5.5rem 0; } }
body[data-accent="science"] .grid-2 { gap: 1.3rem; }
body[data-accent="science"] .card.science-concept { padding: 2rem; }

/* the Four Horsemen, each paired with its antidote */
.horse { display: flex; flex-direction: column; gap: 0.45rem; }
.hz { display: grid; grid-template-columns: auto 18px 1fr; align-items: center; gap: 0.5rem;
  background: #faf9f7; border-radius: 10px; padding: 0.5rem 0.7rem; }
.hz b { font-size: 0.78rem; font-weight: 800; color: var(--text-primary); }
.hz i { display: block; height: 1.5px; background: rgba(27,26,25,0.18); position: relative; }
.hz i::after { content: ""; position: absolute; right: -1px; top: -2.5px;
  border-left: 5px solid rgba(27,26,25,0.28); border-top: 3px solid transparent; border-bottom: 3px solid transparent; }
.hz u { text-decoration: none; font-size: 0.74rem; font-weight: 700; color: #15803d; }

/* arousal concordance: two tracks and the distance between them */
.concord { display: flex; flex-direction: column; gap: 0.55rem; }
.cc { display: grid; grid-template-columns: 62px 1fr; align-items: center; gap: 0.6rem; }
.cc i { font-style: normal; font-size: 0.68rem; font-weight: 800; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--text-muted); }
.cc u { display: block; height: 9px; border-radius: 99px; background: rgba(27,26,25,0.07);
  position: relative; text-decoration: none; }
.cc u::after { content: ""; position: absolute; inset: 0 auto 0 0; width: var(--w);
  background: #a855f7; border-radius: 99px; }
.cc-gap { display: block; margin-left: 62px; padding-left: 0.6rem; font-size: 0.66rem; font-weight: 800;
  letter-spacing: 0.05em; text-transform: uppercase; color: #7e22ce; }

/* the science header sentence was orphaning its last word */
body[data-accent="science"] .page-header p { max-width: 680px; }

/* ─── round 96 · sessions: three parties in one thread ─── */
/* The facilitator is not a third bubble in the same shape — it speaks to the
   room, so it sits full width and labelled, the way the session screen draws it. */
.af-fac { background: rgba(13,148,136,0.08); border-left: 2px solid #0d9488; border-radius: 4px 10px 10px 4px;
  padding: 0.45rem 0.7rem; font-size: 0.76rem; line-height: 1.45; color: var(--text-secondary); }
.af-fac b { display: block; font-size: 0.6rem; font-weight: 900; letter-spacing: 0.07em;
  text-transform: uppercase; color: #0f766e; margin-bottom: 0.12rem; }

/* what leaves the room — three settings, the first one the default */
.rel { display: flex; flex-direction: column; gap: 0.45rem; }
.rel-row { display: grid; grid-template-columns: 1fr auto; align-items: baseline; gap: 0.5rem;
  background: #faf9f7; border-radius: 10px; padding: 0.55rem 0.75rem; }
.rel-row b { font-size: 0.8rem; font-weight: 800; color: var(--text-primary); }
.rel-row i { grid-column: 1; font-style: normal; font-size: 0.68rem; color: var(--text-muted); }
.rel-row u { grid-row: 1; grid-column: 2; text-decoration: none; font-size: 0.58rem; font-weight: 900;
  letter-spacing: 0.07em; text-transform: uppercase; color: #0f766e; }
.rel-row.on { background: rgba(13,148,136,0.10); }


/* ═══ round 101 · the deep dive, restructured (Estevan, 2026-09-10) ═══
   "This is exactly what I'm talking about. Yes. Do that to all of them."
   The band was carrying five things at once — a problem kicker, a problem
   paragraph, an answer kicker, the headline and a body paragraph. That is two
   jobs stacked. The band now says WHAT THIS IS; the block below says WHY IT
   NEEDS TO EXIST; and a bento between them SHOWS the tools instead of
   describing them. Drawn first at design-refs/website/deep-dive-v2.html. */

/* the problem, pulled out of the band and made quiet */
.dd-problem { padding: 2.2rem 0 0; }
.dd-problem .box { display: grid; grid-template-columns: auto 1fr; gap: 1.1rem; align-items: start;
  max-width: 780px; margin: 0 auto; background: #fff; border: 1px solid var(--glass-border);
  border-left: 3px solid var(--fx-a, #4f46e5); border-radius: var(--radius-lg); padding: 1.3rem 1.5rem; }
.dd-problem .lab { font-size: 0.62rem; font-weight: 900; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--fx-a, #4f46e5); white-space: nowrap; padding-top: 0.2rem; }
.dd-problem p { font-size: 0.98rem; line-height: 1.7; color: var(--text-secondary); margin: 0; max-width: none; }

/* the feature bento */
.dd-bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.85rem;
  grid-auto-flow: row dense; }
.bt { background: #fff; border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  padding: 1.05rem 1.1rem; }
.bt .bt-ic { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  margin-bottom: 0.7rem; background: var(--fx-a, #4f46e5); }
/* The app's own icons are FILLED and inherit currentColor, so the tile sets
   `color` and the glyph follows. Stroked lookalikes are gone — these come out
   of components/icons/index.tsx via scripts/build-icon-sprite.mjs. */
.bt .bt-ic { width: 38px; height: 38px; }
.bt .bt-ic svg { width: 23px; height: 23px; color: #fff; fill: currentColor; }
.ic-row svg { width: 18px; height: 18px; color: var(--text-muted); fill: currentColor; }
.bt b { display: block; font-family: var(--font-serif); font-size: 1rem; margin-bottom: 0.25rem;
  color: var(--text-primary); }
.bt p { font-size: 0.8rem; line-height: 1.55; color: var(--text-muted); margin: 0; max-width: none; }
.bt.w2 { grid-column: span 2; }
.bt.h2 { grid-row: span 2; }
.bt.dk { background: linear-gradient(160deg, var(--fx-900, #1e1b4b), var(--fx-a, #4f46e5));
  border-color: transparent; }
.bt.dk b { color: #fff; } .bt.dk p { color: rgba(255,255,255,0.78); }
.bt.dk .bt-ic { background: rgba(255,255,255,0.16); }
/* the little live bits inside a tile */
.bt-chips { display: flex; gap: 0.35rem; margin-top: 0.75rem; flex-wrap: wrap; }
.bt-chips span { border: 1px solid var(--line-soft); border-radius: 99px; padding: 0.3rem 0.7rem;
  font-size: 0.7rem; font-weight: 800; color: var(--text-muted); background: #faf9f7; }
.bt.dk .bt-chips span { border-color: rgba(255,255,255,0.28); color: rgba(255,255,255,0.8);
  background: rgba(255,255,255,0.08); }
.bt.dk .bt-chips span.on { background: #fff; color: var(--fx-900, #1e1b4b); border-color: #fff; }
.bt-row { display: flex; gap: 0.4rem; margin-top: 0.75rem; }
.bt-row span { flex: 1; height: 38px; border-radius: 9px; background: #f4f2ef; display: grid;
  place-items: center; }
.bt-row svg { width: 17px; height: 17px; stroke: var(--text-muted); fill: none; stroke-width: 2;
  stroke-linecap: round; }
.bt-emo { display: flex; gap: 0.3rem; margin-top: 0.75rem; }
.bt-emo span { width: 28px; height: 28px; border-radius: 50%; background: #faf9f7;
  border: 1px solid var(--line-soft); display: grid; place-items: center; font-size: 0.85rem; }

/* how you use it, with art */
.dd-steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; }
.dd-step { background: #fff; border: 1px solid var(--glass-border); border-radius: var(--radius-lg);
  overflow: hidden; }
.dd-step .art { height: 132px; background: linear-gradient(160deg, var(--fx-900, #1e1b4b), var(--fx-a, #4f46e5));
  display: grid; place-items: center; padding: 0.9rem; }
.dd-step .mini { background: #fff; border-radius: 10px; padding: 0.65rem 0.7rem; width: 100%;
  box-shadow: 0 12px 26px rgba(0,0,0,0.24); }
.dd-step .mini .mk { font-size: 0.56rem; font-weight: 900; letter-spacing: 0.09em; text-transform: uppercase;
  color: var(--text-muted); }
.dd-step .txt { padding: 1rem 1.1rem 1.15rem; }
.dd-step .n { font-size: 0.6rem; font-weight: 900; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--fx-a, #4f46e5); margin-bottom: 0.35rem; }
.dd-step b { display: block; font-family: var(--font-serif); font-size: 1.05rem; margin-bottom: 0.3rem; }
.dd-step p { font-size: 0.8rem; line-height: 1.6; color: var(--text-muted); margin: 0; max-width: none; }

/* THE REVEAL, on a loop — the thing Estevan actually wanted to see move.
   Pure CSS, so it never needs re-rendering when the app changes. */
.hero-band .af-cover-img { animation: ddReveal 7s ease-in-out infinite; }
.hero-band .af-reveal { animation: ddPill 7s ease-in-out infinite; }
@keyframes ddReveal { 0%, 30% { filter: blur(13px); opacity: 0.6; }
  46%, 78% { filter: blur(0); opacity: 1; } 92%, 100% { filter: blur(13px); opacity: 0.6; } }
@keyframes ddPill { 0%, 30% { opacity: 1; transform: scale(1); } 38% { transform: scale(0.9); }
  46%, 78% { opacity: 0; transform: scale(0.9); } 92%, 100% { opacity: 1; transform: scale(1); } }
@media (prefers-reduced-motion: reduce) {
  .hero-band .af-cover-img, .hero-band .af-reveal { animation: none; }
}

@media (max-width: 900px) {
  .dd-bento { grid-template-columns: repeat(2, 1fr); }
  .dd-steps { grid-template-columns: 1fr; }
  .dd-problem .box { grid-template-columns: 1fr; gap: 0.6rem; }
}


/* ─── round 103 · the background motif (Estevan, 2026-09-10) ───
   The page's own icon, two or three copies at wildly different sizes, ten per
   cent opacity, in front of the background and behind everything else. Built
   by main.js so the arrangement is different on every visit; the CSS only says
   where the layer lives and how quiet it is. */
.bg-motif { position: absolute; inset: 0; z-index: 0; overflow: hidden;
  pointer-events: none; }
.bg-motif svg { position: absolute; display: block; opacity: 0.10;
  color: var(--fx-a, #4f46e5); fill: currentColor; }
/* content has to sit above it, and the band paints its own ground */
body[data-accent] > section, body[data-accent] > footer, body[data-accent] > nav,
body[data-accent] > .mobile-nav { position: relative; z-index: 1; }
.hero-band { position: relative; z-index: 1; }
@media (max-width: 720px) { .bg-motif svg { opacity: 0.07; } }


/* ═══ round 104 · What's Inside — the card as a small version of its page ═══
   Estevan: "a fifty-fifty split... left-justified text, image on the right...
   the floaters can break the boundaries... and when they click into it, it'll
   end up being an expanded version of that." So the card is the same shape as
   the band it opens, just smaller. Drawn at
   design-refs/website/whats-inside-v3.html. */
.wi-rows { display: grid; gap: 1.1rem; }
.wi-two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.1rem; }
.wi-card { background: linear-gradient(160deg, var(--c9), var(--c5)); border-radius: var(--radius-xl);
  position: relative; display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; align-items: center;
  padding: 1.6rem 1.6rem 1.75rem; color: #fff; text-decoration: none; overflow: visible;
  box-shadow: 0 18px 40px -24px rgba(31,27,28,0.55);
  transition: transform var(--transition-base), box-shadow var(--transition-base); }
.wi-card:hover { transform: translateY(-3px); box-shadow: 0 26px 52px -24px rgba(31,27,28,0.6); }
.wi-card.lead { grid-template-columns: 1fr 1.15fr; padding: 2.1rem 2.1rem 2.25rem; }
.wi-lab { font-size: 0.6rem; font-weight: 900; letter-spacing: 0.14em; text-transform: uppercase;
  color: rgba(255,255,255,0.72); margin-bottom: 0.6rem; }
.wi-card h3 { font-family: var(--font-serif); font-weight: 900; font-size: 1.55rem; line-height: 1.1;
  letter-spacing: -0.015em; color: #fff; margin: 0 0 0.55rem; }
.wi-card.lead h3 { font-size: 2.1rem; }
.wi-card h3 em { font-style: italic; font-weight: 700; opacity: 0.95; }
.wi-card > div > p { font-size: 0.82rem; line-height: 1.6; color: rgba(255,255,255,0.82); margin: 0;
  max-width: none; }
.wi-card.lead > div > p { font-size: 0.94rem; max-width: 40ch; }
.wi-go { display: inline-block; margin-top: 0.85rem; font-size: 0.68rem; font-weight: 900;
  letter-spacing: 0.07em; text-transform: uppercase; color: #fff;
  border-bottom: 2px solid rgba(255,255,255,0.45); padding-bottom: 2px; }
/* the right half is a window the surface may hang out of */
.wi-right { position: relative; min-height: 150px; }
.wi-card.lead .wi-right { min-height: 196px; }
.wi-w { position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 104%;
  background: #fff; color: var(--text-primary); border-radius: 12px; padding: 0.7rem 0.75rem;
  box-shadow: 0 18px 38px rgba(0,0,0,0.3); }
.wi-w .wk { font-size: 0.5rem; font-weight: 900; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text-muted); display: flex; align-items: center; gap: 0.3rem; margin-bottom: 0.5rem; }
.wi-w .wk i { width: 7px; height: 7px; border-radius: 50%; background: var(--c5); display: block; }
.wi-w .line { font-size: 0.7rem; line-height: 1.45; color: var(--text-secondary); }
.wi-w .bub { font-size: 0.68rem; border-radius: 9px; padding: 0.35rem 0.55rem; margin-bottom: 0.3rem;
  max-width: 88%; line-height: 1.4; background: #f4f2ef; }
.wi-w .bub.me { background: var(--c5); color: #fff; margin-left: auto; }
/* the floaters, deliberately outside the card */
.wi-float { position: absolute; right: -1.6rem; bottom: -1rem; background: #fff; color: var(--text-primary);
  border-radius: 11px; padding: 0.5rem 0.7rem; box-shadow: 0 16px 34px rgba(0,0,0,0.3);
  display: flex; align-items: center; gap: 0.5rem; font-size: 0.7rem; font-weight: 800;
  z-index: 4; white-space: nowrap; }
.wi-float.tl { right: auto; left: -1.4rem; top: -1rem; bottom: auto; }
.wi-float .fi { width: 24px; height: 24px; border-radius: 7px; background: var(--c5);
  display: grid; place-items: center; flex: 0 0 auto; }
.wi-float .fi svg { width: 14px; height: 14px; color: #fff; fill: currentColor; }
.wi-float em { font-style: normal; font-weight: 600; color: var(--text-muted); font-size: 0.6rem;
  display: block; }
@media (max-width: 1040px) {
  .wi-two { grid-template-columns: 1fr; }
  .wi-card, .wi-card.lead { grid-template-columns: 1fr; }
  .wi-right { min-height: 0; margin-top: 1rem; }
  .wi-w { position: relative; top: 0; transform: none; width: 100%; }
  .wi-float { right: -0.6rem; }
}


/* ═══ round 105 · the rest of the site joins the accent system ═══
   Six pages carried no data-accent, so they got no band, no motif and no
   colour of their own. The feature accents are the app's own section colours;
   these six are the pages ABOUT the product rather than pages about a feature,
   so they take neighbouring hues that do not collide with a feature's. */
body[data-accent="how"]     { --fx-deep: #4338ca; --fx-tint: #eef2ff; --fx-a: #6366f1; --fx-b: #4f46e5; --fx-900: #312e81; }
body[data-accent="pricing"] { --fx-deep: #047857; --fx-tint: #ecfdf5; --fx-a: #10b981; --fx-b: #059669; --fx-900: #064e3b; }
body[data-accent="about"]   { --fx-deep: #be123c; --fx-tint: #fff1f2; --fx-a: #f43f5e; --fx-b: #e11d48; --fx-900: #881337; }
body[data-accent="beta"]    { --fx-deep: #7e22ce; --fx-tint: #faf5ff; --fx-a: #a855f7; --fx-b: #9333ea; --fx-900: #581c87; }
body[data-accent="blog"]    { --fx-deep: #334155; --fx-tint: #f8fafc; --fx-a: #475569; --fx-b: #64748b; --fx-900: #0f172a; }
body[data-accent="upgrade"] { --fx-deep: #a16207; --fx-tint: #fefce8; --fx-a: #eab308; --fx-b: #ca8a04; --fx-900: #713f12; }

/* A band with no app fragment beside it — the pages that are about the
   product rather than about one feature. Same gradient, centred, and the
   headline still breaks into its italic second beat. */
.hero-band.band-solo { padding: calc(var(--nav-height) + 2.6rem) 0 3.2rem; text-align: center; }
.hero-band.band-solo .bandwrap { max-width: 760px; margin: 0 auto; }
.hero-band.band-solo h1 { font-family: var(--font-serif); font-weight: 900; color: #fff;
  font-size: clamp(2.1rem, 5.6vw, 3.5rem); line-height: 1.06; letter-spacing: -0.02em;
  margin: 0.65rem 0 0; }
.hero-band.band-solo h1 em { font-style: italic; font-weight: 700; opacity: 0.95; color: #fff; }
.hero-band.band-solo > .container > .bandwrap > p { color: rgba(255,255,255,0.82);
  font-size: 1.02rem; line-height: 1.65; margin: 1rem auto 0; max-width: 620px; }
.hero-band .band-kick { font-size: 0.64rem; font-weight: 900; letter-spacing: 0.15em;
  text-transform: uppercase; color: rgba(255,255,255,0.72); margin: 0; }
/* the chip row under a solo band — a promise each, not navigation */
.band-chips { display: flex; flex-wrap: wrap; gap: 0.45rem; justify-content: center;
  margin-top: 1.5rem; }
.band-chips span { border: 1px solid rgba(255,255,255,0.3); border-radius: 99px;
  padding: 0.4rem 0.9rem; font-size: 0.74rem; font-weight: 700;
  color: rgba(255,255,255,0.9); }
.band-chips span.on { background: #fff; color: var(--fx-900, #1e1b4b); border-color: #fff; }

/* a figure sitting on colour needs its caption back */
.hero-band figcaption { color: rgba(255,255,255,0.72); }
.hero-band .img-card { box-shadow: 0 22px 46px rgba(0,0,0,0.26); border-color: transparent; }

/* the old .page-header, when it is asked to be a band */
.page-header.hero-band { padding: calc(var(--nav-height) + 2.6rem) 1.5rem 3.2rem; }
.page-header.hero-band::before { display: none; }
.page-header.hero-band h1 { color: #fff; }
.page-header.hero-band h1 em { font-style: italic; font-weight: 700; opacity: 0.95; color: #fff; }
.page-header.hero-band p { color: rgba(255,255,255,0.82); }
.page-header.hero-band p strong { color: #fff; }
.page-header.hero-band .badge { background: rgba(255,255,255,0.16); color: #fff;
  border-color: rgba(255,255,255,0.32); }

@media (max-width: 720px) {
  .hero-band.band-solo { padding-bottom: 2.4rem; }
}

/* beta's hero was a .hero with an opaque white .hero-bg behind it — the band
   gradient would have been painted over. The ground is dropped and the same
   band rules are pointed at .hero-content, which is beta's own wrapper. */
.hero-band .hero-content { position: relative; z-index: 1; }
.hero-band .hero-content .kicker { color: rgba(255,255,255,0.72); }
.hero-band .hero-content h1 { color: #fff; }
body[data-accent] .hero-band .hero-content h1 .text-gradient {
  background: none; -webkit-background-clip: border-box; background-clip: border-box;
  color: #fff; -webkit-text-fill-color: #fff;
  font-style: italic; font-weight: 700; opacity: 0.95;
}
.hero-band .hero-content > p { color: rgba(255,255,255,0.82); }

/* ─── round 105 · the home grid gets the card recipe too ───
   The six pcards were white with a tint wash at the foot. Estevan, round 104:
   "pop these now with colour." The problem half stays on paper — it is the
   part that has to read as somebody else's mess. The answer half becomes the
   same gradient block the deep-dive band and the What's Inside card use, so
   the whole site tells one story about where colour means "ours". */
.pcard.fx { padding: 0; overflow: hidden; background: #fff; border-top-width: 0; }
.pcard.fx .pcard-problem { padding: 1.7rem 1.7rem 0; }
.pcard.fx .pcard-solution {
  background: linear-gradient(160deg, var(--fx-900, #1e1b4b), var(--fx-a, #4f46e5));
  margin-top: auto; padding: 1.35rem 1.7rem 1.5rem; border-top: 0;
  flex-direction: column; gap: 0.85rem;
}
.pcard.fx .pcard-solution .contrast-chip { background: rgba(255,255,255,0.16) !important; }
.pcard.fx .pcard-solution .lbl { color: rgba(255,255,255,0.72); }
.pcard.fx .pcard-solution .name { font-family: var(--font-serif); font-weight: 900;
  font-size: 1.12rem; color: #fff; }
.pcard.fx .pcard-solution p { color: rgba(255,255,255,0.82); }
.pcard.fx .pcard-go { color: #fff; opacity: 0.86; margin-top: 0.2rem; }
.pcard.fx:hover .pcard-go { opacity: 1; }

/* Two bento columns inside 390px leaves about 150px of card, which breaks a
   title like "RSA-OAEP 2048 between you" across four lines. One column below
   520 — the w2 tiles are already full width there either way. */
@media (max-width: 520px) {
  .dd-bento { grid-template-columns: 1fr; }
  .bt.w2, .bt.h2 { grid-column: auto; grid-row: auto; }
}

/* everything.html is the one page that is about all eight features at once, so
   it takes the brand indigo rather than borrowing any one feature's colour. */
body[data-accent="everything"] { --fx-deep: #4338ca; --fx-tint: #eef2ff; --fx-a: #6366f1; --fx-b: #818cf8; --fx-900: #1e1b4b; }

/* The "we are not therapists" line is a compliance statement, and at 0.82 white
   on the amber end of the science band it was the least legible thing on the
   page. It gets its own inset instead of being small print on bright colour. */
.hero-band .band-note {
  max-width: 620px; margin: 1.4rem auto 0; font-size: 0.9rem; line-height: 1.6;
  color: rgba(255,255,255,0.9) !important;
  background: rgba(0,0,0,0.22); border: 1px solid rgba(255,255,255,0.22);
  border-radius: var(--radius-lg); padding: 0.9rem 1.15rem;
}
.hero-band .band-note strong, .hero-band .band-note b { color: #fff; }

/* ═══ round 106 · Estevan's review pass ═══ */

/* The home page was the last one still wearing the old cover — a white radial
   wash while every other page had colour edge to edge. Estevan: "how it works
   has a great cover on top. The science, great. What's inside? Great. What's
   not great is the home page." It takes the brand indigo rather than any one
   feature's colour, because it is about all of them. */
body[data-accent="home"] { --fx-deep: #4338ca; --fx-tint: #eef2ff; --fx-a: #6366f1; --fx-b: #a855f7; --fx-900: #1e1b4b; }
.hero.hero-band { min-height: auto; padding-bottom: 3.4rem; }
/* the two hero buttons now sit on colour: the primary inverts to white, the
   secondary becomes an outline rather than a grey card on a gradient */
.hero-band .hero-buttons .btn-primary { background: #fff; color: var(--fx-900); border-color: #fff; }
.hero-band .hero-buttons .btn-primary:hover { background: rgba(255,255,255,0.9); color: var(--fx-900); }
.hero-band .hero-buttons .btn-secondary { background: rgba(255,255,255,0.1); color: #fff;
  border: 1px solid rgba(255,255,255,0.45); }
.hero-band .hero-buttons .btn-secondary:hover { background: rgba(255,255,255,0.2); color: #fff; }
.hero-band .band-chips { margin-top: 1.6rem; }

/* The problem half of a home card was serif 1.15rem — the loudest type on the
   card, spent on somebody else's mess, sitting above our answer. Estevan asked
   whether the problems need to be there at all. They do: "six apps you're
   already using, just not built for this" is only a claim until you name what
   is broken. But they do not need to out-shout the answer. Same words, half
   the weight, and the colour block is now the thing you see first. */
.pcard.fx .pcard-problem { padding: 1.35rem 1.7rem 0.2rem; }
.pcard.fx .pcard-problem b { font-size: 0.6rem; color: var(--text-muted); opacity: 0.75; }
.pcard.fx .pcard-problem p {
  font-family: var(--font-sans); font-size: 0.88rem; line-height: 1.6;
  color: var(--text-secondary); margin-bottom: 1.1rem;
}

/* "Why it's worth doing" was four flat boxes in a row of narrow columns, and
   the good drawings sat underneath them. Estevan: "needs a little UI UX
   uplift." Two columns so a claim can be a claim, the first one carries the
   page's colour, and the credit sits on its own hairline instead of floating. */
.why-grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); gap: 1rem; }
.why-card { display: flex; flex-direction: column; padding: 1.5rem 1.6rem 1.25rem;
  border-radius: var(--radius-xl); }
.why-card b { font-size: 1.22rem; line-height: 1.25; margin-bottom: 0.55rem; }
.why-card p { font-size: 0.9rem; line-height: 1.65; margin: 0 0 1rem; flex: 1; }
.why-card .src-pill { align-self: flex-start; margin-top: auto; }
body[data-accent] .why-card { border-top: 0; box-shadow: var(--shadow-sm); }
body[data-accent] .why-card::before { content: ''; display: block; width: 34px; height: 3px;
  border-radius: 99px; background: var(--fx-a); margin-bottom: 0.9rem; }
/* the first claim on every deep dive wears the page's colour, so the section
   opens the way the band and the bento opened */
body[data-accent] .why-grid > .why-card:first-child {
  background: linear-gradient(160deg, var(--fx-900, #1e1b4b), var(--fx-a, #4f46e5));
  border-color: transparent; color: #fff;
}
body[data-accent] .why-grid > .why-card:first-child::before { background: rgba(255,255,255,0.5); }
body[data-accent] .why-grid > .why-card:first-child b { color: #fff; }
body[data-accent] .why-grid > .why-card:first-child p { color: rgba(255,255,255,0.82); }
body[data-accent] .why-grid > .why-card:first-child .src-pill {
  background: rgba(255,255,255,0.16); color: #fff; border-color: rgba(255,255,255,0.32);
}

/* the filter's live count on the never-ending list */
.ev-count { font-size: 0.78rem; font-weight: 700; color: var(--text-muted);
  margin: 0.7rem 0 1.4rem; }

@media (max-width: 760px) {
  .why-grid { grid-template-columns: 1fr; }
  .why-card b { font-size: 1.1rem; }
}