* { box-sizing: border-box; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
  background: #0d0d12;
  color: #e8e6f0;
  margin: 0;
}
.wrap { max-width: 620px; margin: 0 auto; padding: 40px 24px; }
h1 { font-size: 1.6rem; margin-bottom: 8px; }
h2 { font-size: 1.2rem; margin-top: 28px; }
p.lede { color: #b3adcb; margin-bottom: 28px; }
label { display: block; margin: 16px 0 6px; font-size: 0.9rem; color: #cfcae0; }
input[type=text], input[type=email], input[type=number], textarea, select {
  width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid #34304a;
  background: #17151f; color: #fff; font-size: 0.95rem;
}
.btn {
  display: inline-block; margin-top: 24px; padding: 11px 22px; border-radius: 999px;
  background: linear-gradient(90deg,#6a4bd6,#d6489e); color: #fff; border: none;
  font-weight: 600; font-size: 0.9rem; cursor: pointer; text-decoration: none;
}
.btn.secondary { background: none; border: 1px solid #34304a; color: #cfcae0; }
.progress { color: #8880a8; font-size: 0.8rem; margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.04em; }
.card { background: #17151f; border: 1px solid #26232f; border-radius: 12px; padding: 22px; margin: 16px 0; }
.badge { display: inline-block; padding: 2px 10px; border-radius: 999px; font-size: 0.72rem; font-weight: 600; margin-left: 8px; }
.badge.user { background: #1f3d2e; color: #6fd69a; }
.badge.derived { background: #33291f; color: #e0a15a; }
.badge.recommended { background: #2a2340; color: #b09bee; }
.badge.unconfirmed { background: #402323; color: #e07a7a; }
.completeness-bar { height: 10px; border-radius: 6px; background: #26232f; overflow: hidden; margin: 10px 0; }
.completeness-fill { height: 100%; background: linear-gradient(90deg,#6a4bd6,#d6489e); }
.checkbox-row { display: flex; align-items: center; gap: 8px; margin: 8px 0; }
.checkbox-row label { margin: 0; }
.preset-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 16px 0; }
.preset-card { border: 1px solid #34304a; border-radius: 10px; padding: 14px; text-align: center; }
.mock-placeholder { height: 100px; border-radius: 8px; background: #221f2c; display: flex; align-items: center; justify-content: center; color: #6a6480; font-size: 0.78rem; margin-bottom: 10px; }
.notice { background: #221f2c; border-left: 3px solid #6a4bd6; padding: 12px 16px; border-radius: 6px; font-size: 0.85rem; color: #cfcae0; margin: 16px 0; }
.issue-list { color: #e0a15a; font-size: 0.85rem; }

/* ---- Shared Rithavo header/nav — brand and typography consistent with
   rithavo.com's own nav (same font, size, weight, color, spacing), so
   moving between the two domains reads as one ecosystem, not two sites. */
.site-header {
  display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: 18px 24px;
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--rbg) 82%, transparent);
  backdrop-filter: blur(10px) saturate(1.1);
  border-bottom: 1px solid var(--rline);
}
.wordmark { display: inline-flex; align-items: center; gap: 9px; font-family: var(--rfont-display); font-weight: 500; font-size: 1.2rem; letter-spacing: -0.01em; text-decoration: none; color: var(--rink); }
.wordmark .mark { width: 21px; height: 21px; flex-shrink: 0; }
.site-nav { display: flex; align-items: center; gap: 30px; flex-wrap: wrap; font-family: var(--rfont-body); }
.site-nav a, .site-nav .nav-dropdown summary { text-decoration: none; font-size: 0.9rem; color: var(--rink-soft); font-weight: 500; cursor: pointer; transition: color 0.2s ease; }
.site-nav a:hover, .site-nav a[aria-current="page"], .site-nav .nav-dropdown summary:hover { color: var(--rink); }
@media (max-width: 720px) { .site-nav { display: none; } }

/* "Learn Products" — same pattern as rithavo.com: native <details>/<summary>,
   folded into the exact nav-link selectors above so the label is visually
   identical to Career/Discover/Systems/etc, with no visible marker/arrow. */
.nav-dropdown { position: relative; display: inline-flex; }
.nav-dropdown summary { list-style: none; display: block; }
.nav-dropdown summary::-webkit-details-marker { display: none; }
.nav-dropdown summary::marker { content: none; }
.nav-dropdown-panel {
  position: absolute; top: calc(100% + 14px); left: 50%; transform: translateX(-50%);
  background: var(--rsurface); border: 1px solid var(--rline); border-radius: var(--rradius-md);
  box-shadow: 0 24px 64px rgba(0,0,0,0.5); padding: 8px; min-width: 210px; z-index: 40;
  display: flex; flex-direction: column; gap: 2px;
}
.nav-dropdown-panel a { display: block; padding: 10px 14px; border-radius: 8px; color: var(--rink-soft); font-size: 0.88rem; text-decoration: none; transition: color 0.2s ease, background 0.2s ease; }
.nav-dropdown-panel a:hover { background: var(--rsurface-2); color: var(--rink); }

.header-card-cta {
  display: inline-flex; align-items: center; padding: 10px 18px; border-radius: 999px;
  border: 1px solid var(--rline-strong); color: var(--rink); text-decoration: none;
  font-family: var(--rfont-body); font-size: 0.85rem; font-weight: 600; white-space: nowrap;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.header-card-cta:hover { background: var(--rsurface); }
@media (max-width: 900px) { .header-card-cta { display: none; } }
.mobile-card-cta { color: var(--rg2) !important; font-weight: 600; }

.nav-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 36px; height: 36px; padding: 0; background: none; border: none; cursor: pointer; }
.nav-toggle-bar { display: block; width: 20px; height: 2px; background: var(--rink); border-radius: 2px; transition: transform 0.25s ease, opacity 0.25s ease; }
@media (max-width: 720px) { .nav-toggle { display: flex; } }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(2) { opacity: 0; }
.nav-toggle[aria-expanded="true"] .nav-toggle-bar:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

.mobile-nav { display: none; flex: 1 0 100%; border-top: 1px solid var(--rline); background: var(--rbg); }
.mobile-nav[data-open="true"] { display: block; }
.mobile-nav-links { list-style: none; margin: 0; padding: 16px 4px 20px; display: flex; flex-direction: column; gap: 4px; }
.mobile-nav-links a, .mobile-nav-links .nav-dropdown summary { display: block; padding: 12px 8px; font-size: 0.95rem; font-weight: 500; color: var(--rink-soft); text-decoration: none; border-radius: 8px; font-family: var(--rfont-body); transition: color 0.2s ease, background 0.2s ease; }
.mobile-nav-links a:hover, .mobile-nav-links .nav-dropdown summary:hover { color: var(--rink); background: var(--rsurface); }
.mobile-nav-links .nav-dropdown-panel { position: static; transform: none; border: none; box-shadow: none; background: none; padding: 2px 0 4px 16px; margin: 0; }
.mobile-nav-links .nav-dropdown-panel a { padding: 10px 8px; font-size: 0.9rem; }
@media (min-width: 721px) { .mobile-nav { display: none !important; } }

.wrap.wide { max-width: 900px; }

/* ---- Demo Mode banner ---- */
.demo-banner {
  background: linear-gradient(90deg,#33291f,#2a2340); border: 1px solid #4a4066; color: #e0c08a;
  padding: 10px 16px; border-radius: 8px; font-size: 0.8rem; margin-bottom: 20px; text-align: center;
  letter-spacing: 0.03em; text-transform: uppercase;
}

/* ---- Qualitative bands (never a percentage) ---- */
.band-pill {
  display: inline-block; padding: 4px 14px; border-radius: 999px; font-size: 0.78rem; font-weight: 700;
  letter-spacing: 0.03em; text-transform: uppercase;
}
.band-pill.band-strong, .band-pill.band-ready, .band-pill.band-supported,
.band-pill.band-strongly_demonstrated, .band-pill.band-minor, .band-pill.band-high,
.band-pill.band-low_friction { background: #1f3d2e; color: #6fd69a; }
.band-pill.band-moderate, .band-pill.band-nearly_ready, .band-pill.band-pending,
.band-pill.band-medium, .band-pill.band-moderate_friction { background: #2a2340; color: #b09bee; }
.band-pill.band-limited, .band-pill.band-developing, .band-pill.band-deferred,
.band-pill.band-significant, .band-pill.band-high_friction, .band-pill.band-low { background: #33291f; color: #e0a15a; }
.band-pill.band-not_a_realistic_fit, .band-pill.band-major_transition, .band-pill.band-critical,
.band-pill.band-rejected { background: #402323; color: #e07a7a; }
.band-pill.band-insufficient_information, .band-pill.band-claimed, .band-pill.band-accepted,
.band-pill.band-unknown { background: #26232f; color: #9a94b5; }

/* ---- Target picker ---- */
.target-picker { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; }
.target-picker select { width: auto; min-width: 220px; }

/* ---- Capability / gap / action cards ---- */
.evidence-quote {
  background: #0d0d12; border-left: 2px solid #34304a; padding: 8px 12px; margin: 6px 0;
  font-size: 0.82rem; color: #cfcae0; font-style: italic;
}
.item-meta { font-size: 0.75rem; color: #8880a8; margin-top: 4px; }
.decision-form { display: inline-flex; gap: 6px; margin-top: 8px; }
.decision-form button {
  background: none; border: 1px solid #34304a; color: #cfcae0; border-radius: 6px; padding: 4px 10px;
  font-size: 0.72rem; cursor: pointer;
}
.decision-form button:hover { border-color: #6a4bd6; color: #fff; }

/* ---- Career Paths: chosen vs discovered ---- */
.path-chosen { border: 1px solid #6a4bd6; }
.path-alt { opacity: 0.92; }
.section-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; color: #8880a8; margin: 26px 0 8px; }

/* ---- Evolution ---- */
.evolution-entry { padding: 10px 0; border-bottom: 1px solid #221f2c; font-size: 0.88rem; }
.evolution-entry:last-child { border-bottom: none; }

/* ---- Architecture flow (vertical) ---- */
.arch-flow { display: flex; flex-direction: column; align-items: center; margin: 20px 0; }
.arch-step {
  background: #17151f; border: 1px solid #34304a; border-radius: 10px; padding: 10px 22px;
  font-size: 0.85rem; font-weight: 600; color: #e8e6f0; width: 100%; max-width: 340px; text-align: center;
}
.arch-arrow { color: #6a4bd6; font-size: 1.1rem; line-height: 1.4; }

/* ---- Rithavo Build: sprint timeline ---- */
.timeline { position: relative; margin: 24px 0; padding-left: 28px; }
.timeline::before { content: ""; position: absolute; left: 8px; top: 4px; bottom: 4px; width: 2px; background: #34304a; }
.timeline-item { position: relative; margin-bottom: 18px; }
.timeline-marker {
  position: absolute; left: -28px; top: 2px; width: 18px; height: 18px; border-radius: 50%;
  background: #1f3d2e; color: #6fd69a; display: flex; align-items: center; justify-content: center;
  font-size: 0.7rem; font-weight: 700; border: 2px solid #0d0d12;
}
.timeline-item.current .timeline-marker { background: #2a2340; color: #b09bee; }
.timeline-item summary { cursor: pointer; list-style: none; }
.timeline-item summary::-webkit-details-marker { display: none; }
.sprint-card { background: #17151f; border: 1px solid #26232f; border-radius: 12px; padding: 16px 20px; }
.sprint-card.current { border-color: #6a4bd6; }
.sprint-code { font-size: 0.72rem; color: #8880a8; text-transform: uppercase; letter-spacing: 0.06em; }
.sprint-name { font-size: 1.05rem; font-weight: 700; margin: 2px 0 0; }
.sprint-detail { margin-top: 14px; padding-top: 14px; border-top: 1px solid #26232f; font-size: 0.85rem; color: #cfcae0; }
.sprint-detail ul { margin: 6px 0 0; padding-left: 18px; }
.sprint-stats { display: flex; gap: 18px; margin-top: 10px; font-size: 0.78rem; color: #8880a8; }
.stat-value { color: #fff; font-weight: 700; }
.progress-summary { text-align: center; margin: 8px 0 28px; }
.progress-summary .count { font-size: 2.2rem; font-weight: 800; background: linear-gradient(90deg,#6a4bd6,#d6489e); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* ---- Phase 2E: Build page milestone groups ---- */
.milestone-list { display: flex; flex-direction: column; align-items: stretch; }
.milestone-block { background: #17151f; border: 1px solid #26232f; border-radius: 16px; padding: 24px 26px; margin-bottom: 4px; }
.milestone-header { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.milestone-index {
  flex-shrink: 0; width: 34px; height: 34px; border-radius: 50%; display: flex; align-items: center;
  justify-content: center; font-weight: 800; font-size: 0.95rem; color: #fff;
  background: linear-gradient(135deg,#6a4bd6,#d6489e);
}
.milestone-label { margin: 0; font-size: 1.3rem; }
.milestone-copy { color: #cfcae0; font-size: 0.92rem; line-height: 1.6; margin-bottom: 4px; }
.milestone-row { margin-bottom: 6px; }
.milestone-row strong { color: #e8e6f0; }
.milestone-block .timeline { margin: 18px 0 4px; }
.milestone-arrow { text-align: center; color: #6a4bd6; font-size: 1.1rem; padding: 6px 0; }

/* =====================================================================
   Sprint 1C-12 refinement - Homepage / storytelling. Reuses the exact
   existing palette only (bg #0d0d12, card #17151f, borders #26232f/
   #34304a, text #e8e6f0/#cfcae0/#b3adcb/#8880a8, accent gradient
   #6a4bd6->#d6489e, badge greens/oranges/purples/reds already defined
   above) - no new colors introduced anywhere in this section.
   ===================================================================== */

.wrap.home { max-width: 980px; }

/* ---- Hero ---- */
.hero { text-align: center; padding: 20px 0 8px; }
.hero .eyebrow {
  display: inline-block; padding: 4px 14px; border-radius: 999px; background: #2a2340; color: #b09bee;
  font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 18px;
}
.hero h1 {
  font-size: 2.4rem; line-height: 1.15; max-width: 720px; margin: 0 auto 18px;
  background: linear-gradient(90deg,#fff,#cfcae0); -webkit-background-clip: text; background-clip: text;
}
.hero .hero-lede { font-size: 1.05rem; color: #b3adcb; max-width: 560px; margin: 0 auto 30px; }
.hero .hero-ctas { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 8px; }
.hero .hero-ctas .btn { margin-top: 0; }

/* ---- Human / aspirational journey strip ---- */
.journey-strip { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 48px 0 36px; flex-wrap: wrap; }
.journey-step { font-size: 0.78rem; color: #8880a8; text-transform: uppercase; letter-spacing: 0.05em; }
.journey-step.final { color: #b09bee; font-weight: 700; }
.journey-arrow { color: #6a4bd6; }
.human-frame {
  display: flex; align-items: center; justify-content: center; gap: 28px; margin: 0 auto 8px; max-width: 780px;
  flex-wrap: wrap;
}
.human-photo-slot {
  width: 220px; height: 260px; border-radius: 18px; border: 1px solid #34304a;
  background: linear-gradient(160deg,#17151f,#221f2c); display: flex; flex-direction: column; align-items: center;
  justify-content: center; text-align: center; padding: 20px; color: #6a6480; font-size: 0.78rem; flex-shrink: 0;
  position: relative; overflow: hidden;
}
.human-photo-slot::before {
  content: ""; position: absolute; inset: 0; background: linear-gradient(160deg,#6a4bd622,#d6489e11);
}
.human-photo-slot .slot-icon { font-size: 2.2rem; margin-bottom: 10px; opacity: 0.6; position: relative; }
.human-photo-slot .slot-label { position: relative; font-weight: 600; color: #9a94b5; }
.human-caption { max-width: 320px; text-align: left; }
.human-caption .quote { font-size: 1.15rem; color: #fff; font-style: italic; margin-bottom: 10px; }
.human-caption .who { font-size: 0.8rem; color: #8880a8; }

/* ---- Section shell ---- */
.home-section { margin: 64px 0; }
.home-section .section-kicker {
  font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: #8880a8; text-align: center;
  margin-bottom: 8px;
}
.home-section h2.section-title { font-size: 1.6rem; text-align: center; margin: 0 0 12px; }
.home-section .section-sub { text-align: center; color: #b3adcb; max-width: 560px; margin: 0 auto 32px; }

/* ---- Tutorial / product tour ---- */
.tour { background: #17151f; border: 1px solid #26232f; border-radius: 16px; padding: 28px; }
.tour-stage { display: flex; gap: 24px; align-items: stretch; min-height: 220px; }
.tour-mock { flex: 1; background: #0d0d12; border: 1px solid #26232f; border-radius: 12px; padding: 20px; }
.tour-copy { flex: 1; display: flex; flex-direction: column; justify-content: center; }
.tour-copy .tour-step-label { color: #8880a8; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 6px; }
.tour-copy h3 { margin: 0 0 10px; font-size: 1.25rem; }
.tour-copy p { color: #cfcae0; font-size: 0.92rem; line-height: 1.5; }
.tour-slide { display: none; }
.tour-slide.active { display: flex; gap: 24px; align-items: stretch; width: 100%; }
.tour-dots { display: flex; gap: 8px; justify-content: center; margin-top: 22px; }
.tour-dot { width: 8px; height: 8px; border-radius: 50%; background: #34304a; border: none; cursor: pointer; padding: 0; }
.tour-dot.active { background: linear-gradient(90deg,#6a4bd6,#d6489e); width: 22px; border-radius: 4px; }
.tour-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 6px; }
.tour-nav button { background: none; border: 1px solid #34304a; color: #cfcae0; border-radius: 999px; padding: 6px 16px; font-size: 0.8rem; cursor: pointer; }
.tour-nav button:hover { border-color: #6a4bd6; color: #fff; }

/* ---- Phase 2F: traditional-vs-Rithavo comparison ---- */
.compare-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; align-items: start; margin-top: 8px; }
.compare-col { background: #17151f; border: 1px solid #26232f; border-radius: 14px; padding: 20px; }
.compare-col.rithavo { border-color: #6a4bd6; }
.compare-label { text-align: center; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #8880a8; margin-bottom: 14px; }
.compare-col.rithavo .compare-label { color: #d6489e; }
.compare-flow { display: flex; flex-direction: column; align-items: center; }
.compare-step { width: 100%; text-align: center; background: #0d0d12; border: 1px solid #26232f; border-radius: 8px; padding: 8px 10px; font-size: 0.82rem; color: #8880a8; }
.compare-step.accent { color: #e8e6f0; font-weight: 600; border-color: #34304a; }
.compare-arrow { color: #34304a; font-size: 0.9rem; line-height: 1.6; }
.compare-col.rithavo .compare-arrow { color: #6a4bd6; }
@media (max-width: 640px) { .compare-grid { grid-template-columns: 1fr; } }

/* ---- Core story flow (plain-language) ---- */
.story-flow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; }
.story-card { background: #17151f; border: 1px solid #26232f; border-radius: 12px; padding: 18px; text-align: center; }
.story-card .story-num { color: #6a4bd6; font-size: 0.72rem; font-weight: 700; margin-bottom: 8px; }
.story-card h4 { margin: 0 0 8px; font-size: 0.95rem; }
.story-card p { margin: 0; color: #8880a8; font-size: 0.8rem; line-height: 1.4; }

/* ---- Stats bar ---- */
.stats-bar { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; text-align: center; }
.stats-bar .stat-num { font-size: 2rem; font-weight: 800; background: linear-gradient(90deg,#6a4bd6,#d6489e); -webkit-background-clip: text; background-clip: text; color: transparent; }
.stats-bar .stat-label { color: #8880a8; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; margin-top: 4px; }

/* ---- Final CTA band ---- */
.cta-band { text-align: center; background: linear-gradient(135deg,#1a1626,#17151f); border: 1px solid #34304a; border-radius: 20px; padding: 48px 24px; }
.cta-band h2 { margin-top: 0; }
.cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-top: 20px; }

/* ---- Phase 2J: Career Diagnosis Report Card ---- */
.report-header { text-align: center; margin-bottom: 8px; }
.report-header h1 { margin: 6px 0; }
.report-section { margin-top: 8px; }
.snapshot-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 16px; }
.why-recommended { background: #0d0d12; border: 1px solid #26232f; border-radius: 10px; padding: 14px 16px; margin-top: 12px; }
.why-recommended .why-label { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; color: #b09bee; margin-bottom: 6px; font-weight: 700; }
.why-recommended p { margin: 0 0 8px; color: #e8e6f0; }
.action-plan-list { padding-left: 20px; }
.action-plan-list li { margin-bottom: 10px; color: #cfcae0; }
.muted-card { opacity: 0.7; }

/* ---- Phase 3D: stay-vs-transition, methodology disclosure ---- */
.stay-vs-transition-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 14px; }
.option-card .option-label { font-weight: 700; margin-bottom: 6px; color: #e8e6f0; }
.methodology-details summary { cursor: pointer; list-style: none; }
.methodology-details summary::-webkit-details-marker { display: none; }
.methodology-details[open] summary { margin-bottom: 12px; }

@media (max-width: 640px) {
  .hero h1 { font-size: 1.75rem; }
  .tour-slide.active { flex-direction: column; }
  .human-frame { flex-direction: column; }
  .human-caption { text-align: center; }
  .snapshot-grid { grid-template-columns: 1fr; }
  .stay-vs-transition-grid { grid-template-columns: 1fr; }
}

/* =====================================================================
   RITHAVO CARD / DISCOVER - brand-aligned visual system.

   Entirely additive: new custom properties (--r*, distinct names so
   nothing here can collide with or override an existing rule) and new
   component classes (rcard-, rdiscover-, rpublic- prefixed), applied only in
   card.html / card_public.html / discover.html / discover_public.html /
   discover_invite.html / business.html. No existing selector above this
   line is modified - Career Intelligence, the Report Card, Product Hub,
   onboarding, etc. are visually untouched.

   Palette matches rithavo.com's actual homepage tokens exactly (not an
   approximation): indigo/violet/coral 3-stop gradient + Fraunces serif
   display type, so the Card/Discover surfaces read as the same brand as
   the marketing site and its hero, per the brief. The "curated theme"
   system (Part 9) only ever recombines these same three hex values -
   there is no path for a user to introduce an arbitrary color.
   ===================================================================== */

:root {
  --rg1: #7c6bf0;   /* indigo   */
  --rg2: #c46be8;   /* violet   */
  --rg3: #ff9166;   /* coral    */
  --rbg: #0d0d12;
  --rsurface: #15131c;
  --rsurface-2: #1c1926;
  --rline: #2a2636;
  --rline-strong: #3d3752;
  --rink: #f5f3fa;
  --rink-soft: #cfc9e0;
  --rink-faint: #8e88a8;
  --rfont-display: "Fraunces", ui-serif, Georgia, serif;
  --rfont-body: "Manrope", ui-sans-serif, system-ui, sans-serif;
  --rradius-lg: 24px;
  --rradius-md: 14px;
}

/* Theme variants - Card customization. Four curated DESIGN DIRECTIONS, not
   four color swatches: each also carries its own glow placement/intensity
   and photo-scrim tint, so choosing one changes the atmosphere, not just an
   accent color. Every value still resolves to --rg1/--rg2/--rg3 or a single
   muted neutral (Midnight) - there is no path to an arbitrary color. */
.theme-violet {
  --theme-a: var(--rg1); --theme-b: var(--rg2);
  --theme-glow: var(--rg1); --theme-glow-2: var(--rg2); --theme-scrim: 15,12,26;
}
.theme-sunset {
  --theme-a: var(--rg2); --theme-b: var(--rg3);
  --theme-glow: var(--rg3); --theme-glow-2: var(--rg2); --theme-scrim: 28,14,12;
}
.theme-midnight {
  --theme-a: #4a4470; --theme-b: var(--rg1);
  --theme-glow: #4a4470; --theme-glow-2: var(--rg1); --theme-scrim: 8,8,13;
}
.theme-aurora {
  --theme-a: var(--rg1); --theme-b: var(--rg3);
  --theme-glow: var(--rg2); --theme-glow-2: var(--rg3); --theme-scrim: 16,10,20;
}

.rgrad-text {
  background: linear-gradient(90deg, var(--theme-a, var(--rg1)), var(--theme-b, var(--rg2)));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}

/* ---- Verification seal - reads the existing TrustLevel, never overclaims.
   A medallion, not a flat pill: sits astride the seam between the photo
   and the content sheet (see .rcard-seal placement below), so trust reads
   as part of the identity object rather than a status label bolted on. ---- */
.rseal-badge {
  display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px 6px 6px; border-radius: 999px;
  background: var(--rsurface); border: 1px solid var(--rline-strong);
  box-shadow: 0 10px 24px -10px rgba(0,0,0,0.55);
  font-size: 0.7rem; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; color: var(--rink-soft);
}
.rseal-icon {
  width: 24px; height: 24px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  background: linear-gradient(135deg, var(--theme-a, var(--rg1)), var(--theme-b, var(--rg2))); color: #08070c;
}
.rseal-badge.unverified { color: var(--rink-faint); }
.rseal-badge.unverified .rseal-icon { background: var(--rline-strong); color: var(--rink-faint); }

/* ---- The Rithavo Card - a photo-forward identity object, not a stacked
   profile page. Structure: an outer .rcard (glows allowed to bleed past
   its edges) wrapping a clipped .rcard-frame containing a full-bleed
   photo/logo zone (name + headline overlaid directly on the photo via a
   themed scrim, exactly like a real ID card), a verification seal
   overlapping the seam, and a content sheet below. ---- */
.rcard-page { max-width: 420px; margin: 0 auto; padding: 40px 20px 60px; }
.rcard { position: relative; }
.rcard-glow {
  position: absolute; border-radius: 50%; filter: blur(56px); pointer-events: none; z-index: 0;
}
.rcard-glow-a {
  width: 280px; height: 280px; top: -70px; right: -90px; opacity: 0.85;
  background: radial-gradient(circle, color-mix(in srgb, var(--theme-glow, var(--rg1)) 60%, transparent), transparent 70%);
}
.rcard-glow-b {
  width: 220px; height: 220px; bottom: -70px; left: -70px; opacity: 0.7;
  background: radial-gradient(circle, color-mix(in srgb, var(--theme-glow-2, var(--rg2)) 50%, transparent), transparent 70%);
}
.rcard-frame {
  position: relative; z-index: 1; border-radius: 28px; overflow: hidden;
  background: var(--rsurface); border: 1px solid var(--rline);
  box-shadow: 0 30px 70px -25px rgba(0,0,0,0.65);
}

.rcard-photozone { position: relative; width: 100%; aspect-ratio: 4 / 5; overflow: hidden; background: var(--rsurface-2); }
.kind-business .rcard-photozone { aspect-ratio: 16 / 9; }
.rcard-photo-bleed { width: 100%; height: 100%; object-fit: cover; display: block; }
.rcard-photo-fallback {
  position: relative; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 22%, color-mix(in srgb, var(--theme-a, var(--rg1)) 50%, var(--rsurface-2)), var(--rsurface-2) 72%);
}
.rcard-photo-fallback::before, .rcard-photo-fallback::after {
  content: ""; position: absolute; border: 1px solid color-mix(in srgb, var(--rink) 14%, transparent); border-radius: 50%;
}
.rcard-photo-fallback::before { width: 62%; padding-top: 62%; }
.rcard-photo-fallback::after { width: 92%; padding-top: 92%; }
.rcard-fallback-mark {
  position: relative; font-family: var(--rfont-display); font-size: 4.6rem; font-weight: 500;
  color: color-mix(in srgb, white 88%, var(--theme-a, var(--rg1))); opacity: 0.92;
}
.kind-business .rcard-photo-fallback { align-items: flex-start; padding-top: 14%; }
.kind-business .rcard-fallback-mark { font-size: 2.4rem; }

.rcard-photozone-scrim {
  position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top,
    rgba(var(--theme-scrim, 15,12,26), 0.96) 0%,
    rgba(var(--theme-scrim, 15,12,26), 0.5) 38%,
    rgba(var(--theme-scrim, 15,12,26), 0.05) 70%, transparent 85%);
}
.rcard-brandmark {
  position: absolute; top: 16px; left: 18px; display: flex; align-items: center; gap: 6px;
  font-family: var(--rfont-display); font-size: 0.8rem; color: rgba(255,255,255,0.85); letter-spacing: 0.01em;
}
.rcard-identity { position: absolute; left: 22px; right: 22px; bottom: 18px; }
.rcard-name { font-family: var(--rfont-display); font-size: 1.55rem; font-weight: 500; color: #fff; margin: 0 0 4px; letter-spacing: -0.01em; text-shadow: 0 2px 18px rgba(0,0,0,0.45); }
.rcard-headline { color: rgba(255,255,255,0.85); font-size: 0.9rem; margin: 0; text-shadow: 0 1px 10px rgba(0,0,0,0.4); }

.rcard-seal { position: relative; z-index: 2; display: flex; justify-content: flex-end; padding: 0 20px; margin-top: -18px; }

.rcard-sheet { position: relative; z-index: 1; padding: 16px 22px 24px; }
.rcard-cluster { padding: 14px 0; border-top: 1px solid var(--rline); }
.rcard-cluster:first-child { border-top: none; padding-top: 6px; }
.rcard-cluster-label {
  font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rink-faint);
  font-weight: 700; margin-bottom: 8px;
}
.rcard-cluster-value { font-family: var(--rfont-display); font-size: 1.05rem; color: var(--rink); }
.rcard-cluster-sub { font-size: 0.82rem; color: var(--rink-faint); margin-top: 2px; }

.rcard-intent-strip {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 14px; border-radius: 14px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--theme-a, var(--rg1)) 16%, var(--rsurface-2)),
                                     color-mix(in srgb, var(--theme-b, var(--rg2)) 12%, var(--rsurface-2)));
  border: 1px solid var(--rline);
}

.rchip-row { display: flex; flex-wrap: wrap; gap: 8px; }
.rchip {
  display: inline-flex; align-items: center; padding: 6px 13px; border-radius: 999px;
  background: var(--rsurface-2); border: 1px solid var(--rline); color: var(--rink-soft); font-size: 0.82rem;
}

.rcard-actions { display: flex; gap: 10px; padding: 18px 22px 22px; }
.rbtn {
  flex: 1; text-align: center; padding: 13px 18px; border-radius: 999px; font-weight: 700; font-size: 0.88rem;
  border: none; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; justify-content: center;
}
.rbtn-primary { background: linear-gradient(90deg, var(--theme-a, var(--rg1)), var(--theme-b, var(--rg2))); color: #08070c; }
.rbtn-ghost { background: transparent; border: 1px solid var(--rline-strong); color: var(--rink); }
.rcard-mutual {
  margin: 0 22px 16px; text-align: center; font-size: 0.82rem; color: var(--rink-soft);
  background: var(--rsurface-2); border: 1px solid var(--rline); border-radius: 12px; padding: 10px 14px;
}
.rcard-share-form { margin: 0 22px 22px; padding: 16px; background: var(--rsurface-2); border-radius: 12px; border: 1px solid var(--rline); }
.rcard-share-form .rcheck { display: flex; align-items: center; gap: 8px; font-size: 0.85rem; color: var(--rink-soft); margin-bottom: 8px; }

/* Mobile Card (Part 10): the card becomes the page - full-bleed, photo
   stays large, actions pinned so they're always reachable. Designed for
   mobile specifically (a squarer photozone, not just a shrunk desktop
   card) rather than a uniform scale-down. */
@media (max-width: 560px) {
  .rcard-page { padding: 0; max-width: none; }
  .rcard-frame { border-radius: 0; }
  .rcard-photozone { aspect-ratio: 1 / 1; }
  .rcard-sheet { padding-bottom: 96px; }
  .rcard-actions {
    position: fixed; left: 0; right: 0; bottom: 0; padding: 14px 16px; margin: 0;
    background: color-mix(in srgb, var(--rbg) 92%, transparent); backdrop-filter: blur(10px);
    border-top: 1px solid var(--rline); z-index: 5;
  }
}

/* ---- My Card settings: theme picker + live preview (Part 13/14). The
   preview reuses the SAME .rcard markup the real Card renders (see
   card.html) - no separate preview architecture, no new endpoint; a few
   lines of vanilla JS just toggle classes/visibility on that same markup
   as the form changes, so what you see is what the real Card is. ---- */
.rtheme-picker { display: flex; gap: 12px; flex-wrap: wrap; margin: 8px 0 4px; }
.rtheme-swatch { display: flex; flex-direction: column; align-items: center; gap: 6px; cursor: pointer; }
.rtheme-swatch input { position: absolute; opacity: 0; pointer-events: none; }
.rtheme-swatch-dot {
  width: 40px; height: 40px; border-radius: 50%; border: 2px solid transparent;
  transition: border-color 0.15s ease, transform 0.15s ease;
}
.rtheme-swatch input:checked + .rtheme-swatch-dot { border-color: var(--rink); transform: scale(1.08); }
.rtheme-swatch span.rtheme-name { font-size: 0.72rem; color: var(--rink-faint); }

.rsettings-layout { display: grid; grid-template-columns: minmax(0, 1fr) 380px; gap: 40px; align-items: start; }
.rsettings-form-col { min-width: 0; }
.rpreview-col { position: sticky; top: 24px; }
.rpreview-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rink-faint); font-weight: 700; margin-bottom: 12px; }
.rpreview-col .rcard-page { padding: 0; max-width: none; pointer-events: none; }
.rpreview-col .rcard-actions { display: none; }
@media (max-width: 980px) {
  .rsettings-layout { grid-template-columns: 1fr; }
  .rpreview-col { position: static; max-width: 380px; }
}

/* ---- Discover (authenticated) - Parts 11-12 ---- */
.rdiscover-page { max-width: 1080px; margin: 0 auto; padding: 0 4px; }
.rdiscover-hero { text-align: left; margin-bottom: 8px; }
.rdiscover-hero .reyebrow {
  font-family: var(--rfont-mono, monospace); font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--rink-faint);
}
.rdiscover-hero h1 { font-family: var(--rfont-display); font-size: 2.1rem; font-weight: 500; margin: 8px 0 10px; }
.rdiscover-hero p { color: var(--rink-soft); font-size: 1rem; max-width: 60ch; }

.rdiscover-tabs { display: flex; gap: 10px; margin: 26px 0 30px; flex-wrap: wrap; }
.rtab {
  padding: 10px 20px; border-radius: 999px; font-size: 0.88rem; font-weight: 600; text-decoration: none;
  border: 1px solid var(--rline-strong); color: var(--rink-soft);
}
.rtab.active { background: linear-gradient(90deg, var(--rg1), var(--rg2)); color: #08070c; border-color: transparent; }

.rdiscover-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.rdiscover-empty { color: var(--rink-faint); font-size: 0.95rem; padding: 40px 0; text-align: center; }

/* A Discover tile is a doorway into someone's Card, not a list row - it
   carries a thin accent edge in that Card's own theme colors and a larger,
   photo-forward header so identity reads before anything else. */
.rtile {
  position: relative; background: var(--rsurface); border: 1px solid var(--rline); border-radius: var(--rradius-md);
  padding: 20px 20px 20px 22px; display: flex; flex-direction: column; gap: 14px; overflow: hidden;
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.rtile::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px;
  background: linear-gradient(180deg, var(--theme-a, var(--rg1)), var(--theme-b, var(--rg2)));
}
.rtile:hover { border-color: var(--rline-strong); transform: translateY(-2px); }
.rtile-header { display: flex; align-items: center; gap: 14px; }
.rtile-photo, .rtile-photo-fallback {
  width: 64px; height: 64px; border-radius: 18px; object-fit: cover; flex-shrink: 0;
  border: 1px solid var(--rline-strong);
}
.rtile-photo-fallback {
  display: flex; align-items: center; justify-content: center;
  background: radial-gradient(circle at 30% 25%, color-mix(in srgb, var(--theme-a, var(--rg1)) 45%, var(--rsurface-2)), var(--rsurface-2) 75%);
  font-family: var(--rfont-display); color: var(--rink); font-size: 1.3rem; font-weight: 500;
}
.rtile-kind { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--rink-faint); }
.rtile-name { font-family: var(--rfont-display); font-size: 1.15rem; margin: 2px 0 0; }
.rtile-subtitle { font-size: 0.85rem; color: var(--rink-soft); margin: 0; }
.rtile-location { font-size: 0.78rem; color: var(--rink-faint); }
.rtile-reasons { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; }
.rtile-reasons li { font-size: 0.82rem; color: var(--rink-soft); padding-left: 14px; position: relative; }
.rtile-reasons li::before { content: "-"; position: absolute; left: 0; color: var(--rg2); }
.rtile-actions { display: flex; gap: 8px; margin-top: auto; }
.rtile-actions .rbtn { padding: 9px 14px; font-size: 0.8rem; }

/* ---- Public (unauthenticated) Discover - Parts 2-3 ---- */
.rpublic-wrap { max-width: 880px; margin: 0 auto; padding: 60px 20px 80px; text-align: center; }
.rpublic-hero h1 { font-family: var(--rfont-display); font-size: 2.6rem; font-weight: 500; margin: 10px 0 14px; }
.rpublic-hero p.rpublic-lede { color: var(--rink-soft); font-size: 1.1rem; max-width: 52ch; margin: 0 auto 48px; }
.rpublic-choice-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; text-align: left; }
.rpublic-choice-card {
  position: relative; overflow: hidden; background: var(--rsurface); border: 1px solid var(--rline);
  border-radius: var(--rradius-lg); padding: 32px 26px; text-decoration: none; color: var(--rink);
  transition: border-color 0.2s ease, transform 0.2s ease;
  display: flex; flex-direction: column; min-height: 220px;
}
.rpublic-choice-card::before {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--rg1) 26%, transparent), transparent 60%);
  pointer-events: none;
}
.rpublic-choice-card.rbusiness::before {
  background: radial-gradient(circle at 20% 0%, color-mix(in srgb, var(--rg3) 24%, transparent), transparent 60%);
}
.rpublic-choice-card:hover { border-color: var(--rline-strong); transform: translateY(-3px); }
.rpublic-choice-label { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--rink-faint); position: relative; }
.rpublic-choice-card h2 { font-family: var(--rfont-display); font-size: 1.5rem; font-weight: 500; margin: 10px 0 10px; position: relative; }
.rpublic-choice-card p { color: var(--rink-soft); font-size: 0.92rem; line-height: 1.5; margin: 0; position: relative; flex: 1; }
.rpublic-choice-arrow { margin-top: 16px; font-weight: 700; position: relative; }
.rpublic-choice-card.rbusiness .rpublic-choice-arrow { color: var(--rg3); }
.rpublic-choice-card:not(.rbusiness) .rpublic-choice-arrow { color: var(--rg2); }

/* ---- Public invitation (Part 3) - People/Business nudge screen ---- */
.rinvite-wrap { max-width: 620px; margin: 0 auto; padding: 70px 20px 90px; text-align: center; }
.rinvite-wrap h1 { font-family: var(--rfont-display); font-size: 2.1rem; font-weight: 500; margin: 10px 0 16px; }
.rinvite-wrap p.rinvite-lede { color: var(--rink-soft); font-size: 1.05rem; margin: 0 auto 36px; max-width: 48ch; }
.rinvite-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.rinvite-actions .rbtn-primary { padding: 15px 32px; font-size: 0.95rem; }
.rinvite-secondary { color: var(--rink-faint); font-size: 0.88rem; text-decoration: underline; }

@media (max-width: 640px) {
  .rpublic-choice-grid { grid-template-columns: 1fr; }
  .rpublic-hero h1, .rinvite-wrap h1 { font-size: 1.9rem; }
  .rdiscover-hero h1 { font-size: 1.7rem; }
}