/* ==========================================================================
   Landing page — Core Messaging Framework build.

   Visual language is inherited from the Mission Brief dashboard rather than
   invented here: every colour is a --mb-* token from css/theme.css, and the
   type/rhythm follows advance_prep_cards.css (Space Grotesk display, Space
   Mono eyebrows, 8px radii, hairline borders). The landing page should read
   as the front door to the same product.

   Because the tokens are themed, this page follows html[data-theme="dark"]
   automatically — same as the workspace.

   Prefix rr2- keeps it clear of landing.css and Bootstrap, both still loaded.
   ========================================================================== */

:root {
  /* Aliases only — the three canonical faces are defined in app.css. */
  --rr2-body: var(--font-body);

  /* Body type scale. Five steps on whole pixels, matching the dashboard —
     the page had ten sizes including four half-pixel pairs (12/12.5, 13/13.5,
     14/14.5, 15/15.5) that read as unresolved rather than deliberate.
       13  meta, notes, labels, footer
       14  UI, nav, buttons, controls, small body
       15  body copy
       16  section intros, emphasis
       19  hero and section ledes                                          */

  --rr2-gutter: 56px;
  --rr2-max: 1180px;
  --rr2-radius: 8px;
  --rr2-radius-lg: 12px;
}

.rr2 {
  background: var(--mb-surface);
  color: var(--mb-ink);
  font-family: var(--font-body);
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}

.rr2 *,
.rr2 *::before,
.rr2 *::after { box-sizing: border-box; }

/* Scoped to unclassed links only — `.rr2 a` (0,1,1) would otherwise outrank
   every single-class button rule below (0,1,0) and repaint their text. */
.rr2 a { text-decoration: none; }
.rr2 a:not([class]) { color: var(--mb-blue); }
.rr2 a:not([class]):hover { color: var(--mb-blue-2); }

/* The rr-* system ships no focus-visible styling (PRODUCT.md A6). */
.rr2 a:focus-visible,
.rr2 button:focus-visible,
.rr2 input:focus-visible {
  outline: 2px solid var(--mb-blue);
  outline-offset: 2px;
  border-radius: 4px;
}

.rr2-inner { max-width: var(--rr2-max); margin: 0 auto; }

/* Shared ---------------------------------------------------------------- */

/* One micro-label scale across the system, matching the dashboard's
   .rr-eyebrow (11px, .11em, faint). Everything in the eyebrow family below
   uses these metrics; only colour varies, and only where it means something. */
.rr2-eyebrow {
  font: 700 11px/1.3 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mb-faint);
  margin: 0;
}

.rr2-section-h {
  font: 700 30px/1.22 var(--font-display);
  letter-spacing: -.6px;
  color: var(--mb-ink);
  margin: 12px 0 0;
}

.rr2-eyebrow--live {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

.rr2-section-h-accent { color: var(--mb-red); }

.rr2-section-sub {
  font: 400 16px/1.62 var(--font-body);
  color: var(--mb-meta);
  margin: 12px 0 0;
  max-width: 660px;
  text-wrap: pretty;
}

/* Buttons --------------------------------------------------------------- */

.rr2-btn {
  display: inline-block;
  border: none;
  cursor: pointer;
  text-align: center;
  font-family: var(--font-body);
  border-radius: var(--rr2-radius);
}

.rr2-btn--primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 700 14px/1 var(--font-body);
  color: var(--mb-on-fill);
  background: var(--mb-blue-fill);
  padding: 14px 24px;
  border-radius: 10px;
}

.rr2-btn-arrow { font-size: 13px; transition: transform .16s ease; }
.rr2-btn--primary:hover .rr2-btn-arrow { transform: translateX(3px); }

.rr2-btn--primary:hover { background: var(--mb-blue-2); color: var(--mb-on-fill); }

.rr2-btn--primary-sm {
  font: 700 13px/1 var(--font-body);
  color: var(--mb-on-fill);
  background: var(--mb-blue-fill);
  padding: 11px 18px;
  flex: none;
}

.rr2-btn--primary-sm:hover { background: var(--mb-blue-2); color: var(--mb-on-fill); }

.rr2-btn--primary-wide {
  display: block;
  width: 100%;
  font: 700 14px/1 var(--font-body);
  color: var(--mb-on-fill);
  background: var(--mb-blue-fill);
  padding: 15px 22px;
  margin-top: 18px;
}

.rr2-btn--primary-wide:hover { background: var(--mb-blue-2); color: var(--mb-on-fill); }

.rr2-btn--ghost {
  display: inline-block;
  font: 600 14px/1 var(--font-body);
  color: var(--mb-ink);
  background: var(--mb-surface);
  border: 1px solid var(--mb-btn-line);
  padding: 13px 22px;
  border-radius: 10px;
}

.rr2-btn--ghost:hover { color: var(--mb-ink); border-color: var(--mb-chip-line); background: var(--mb-hover); }

.rr2-secondary-link {
  display: inline-block;
  font: 400 14px/1.5 var(--font-body);
  color: var(--mb-muted);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.rr2-secondary-link:hover { color: var(--mb-ink); }

/* Nav ------------------------------------------------------------------- */

.rr2-nav {
  background: var(--mb-surface);
  border-bottom: 1px solid var(--mb-line);
  padding: 16px var(--rr2-gutter);
}

.rr2-nav-inner {
  max-width: var(--rr2-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

.rr2-wordmark { display: inline-flex; align-items: center; }
.rr2-wordmark img { height: 28px; width: auto; display: block; }

.rr2-nav-links { display: flex; align-items: center; gap: 28px; }

.rr2-nav-link {
  font: 600 14px/1 var(--font-body);
  color: var(--mb-body);
}

.rr2-nav-link:hover { color: var(--mb-blue); }

.rr2-nav-cta {
  font: 700 14px/1 var(--font-body);
  color: var(--mb-on-fill);
  background: var(--mb-blue-fill);
  border-radius: var(--rr2-radius);
  padding: 10px 18px;
  white-space: nowrap;
}

.rr2-nav-cta:hover { color: var(--mb-on-fill); background: var(--mb-blue-2); }

/* Hero ------------------------------------------------------------------ */

.rr2-hero {
  position: relative;
  background: var(--mb-surface);
  padding: 92px var(--rr2-gutter) 88px;
  text-align: center;
  overflow: hidden;
}

/* Orbit rings live behind the hero. The .orbit-* system itself comes from
   landing.css (still loaded site-wide) — including its prefers-reduced-motion
   handling — so only stacking and containment are set here. */
.rr2-hero-inner { position: relative; z-index: 2; max-width: 960px; margin: 0 auto; }

/* Scaled ~1.6x from the landing.css defaults. The previous hero was
   min-height:500px, so the same fixed-size rings overflowed further and read
   as much larger; this hero is taller, so the rings need to grow to keep that
   presence. Sizes only — animation, colour and the reduced-motion and
   small-screen rules all still come from landing.css. */
.rr2-hero .orbit-container { opacity: .5; }

.rr2-hero .orbit-1 { width: 460px;  height: 460px; }
.rr2-hero .orbit-2 { width: 780px;  height: 780px; }
.rr2-hero .orbit-3 { width: 1120px; height: 1120px; }
.rr2-hero .orbit-4 { width: 1480px; height: 1480px; }
.rr2-hero .orbit-5 { width: 1860px; height: 1860px; }

.rr2-hero .orbit-1 .orbit-dot { width: 7px;  height: 7px;  top: -3.5px; }
.rr2-hero .orbit-2 .orbit-dot { width: 8px;  height: 8px;  top: -4px; }
.rr2-hero .orbit-3 .orbit-dot { width: 9px;  height: 9px;  top: -4.5px; }
.rr2-hero .orbit-4 .orbit-dot { width: 7px;  height: 7px;  top: -3.5px; }

/* The two-tone rule above the headline, from the reference. */
.rr2-hero-rule {
  display: flex;
  justify-content: center;
  gap: 6px;
  margin-bottom: 30px;
}

.rr2-hero-rule span { display: block; height: 4px; border-radius: 2px; }
.rr2-hero-rule span:first-child { width: 74px; background: var(--mb-blue); }
.rr2-hero-rule span:last-child { width: 26px; background: var(--mb-red); }

/* Dot used by the hero eyebrow and the Mission Brief section, lifted from
   the dashboard's .rr-dot / .rr-dot-live pair. */
.rr2-dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--mb-dot);
  display: inline-block;
}

.rr2-dot--live { background: var(--mb-red); box-shadow: 0 0 0 3px var(--mb-red-soft); }

.rr2-hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mb-faint);
  margin: 0 0 28px;
}

/* Locked wording, dashboard headline treatment: sentence case Space Grotesk,
   tight tracking, a single red accent rather than a three-colour split. */
.rr2-h1 {
  font: 700 clamp(38px, 5.6vw, 66px)/1.04 var(--font-display);
  letter-spacing: -.035em;
  color: var(--mb-ink);
  margin: 0;
  text-wrap: balance;
}

.rr2-h1-line { display: block; }
.rr2-h1-accent { color: var(--mb-red); }

/* pricing.html still uses the older three-span headline markup. */
.rr2-h1-prep,
.rr2-h1-decides { color: var(--mb-ink); }
.rr2-h1-revenue { color: var(--mb-red); }

.rr2-hero-sub {
  font: 400 19px/1.6 var(--font-body);
  color: var(--mb-meta);
  margin: 24px auto 0;
  max-width: 630px;
  text-wrap: pretty;
}

.rr2-hero-sub strong { font-weight: 700; color: var(--mb-ink); }

.rr2-badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 26px;
  padding: 12px 26px;
  border: 1px solid var(--mb-chip-line);
  border-radius: 999px;
  background: var(--mb-surface);
  font: 700 16px/1 var(--font-body);
  color: var(--mb-blue);
}

.rr2-badge-dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--mb-red);
  flex: none;
}

.rr2-cta-row {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 32px;
  flex-wrap: wrap;
}

.rr2-hero-note {
  font: 400 14px/1.6 var(--font-body);
  color: var(--mb-muted);
  margin: 18px auto 0;
  max-width: 520px;
}

/* Generic section ------------------------------------------------------- */

.rr2-section { padding: 76px var(--rr2-gutter); }
.rr2-section--tint { background: var(--mb-surface-2); border-top: 1px solid var(--mb-line); border-bottom: 1px solid var(--mb-line); }
.rr2-section--canvas {
  background: var(--mb-canvas);
  border-top: 1px solid var(--mb-line-2);
  border-bottom: 1px solid var(--mb-line-2);
  padding-bottom: 88px;
}

/* Card grid ------------------------------------------------------------- */

.rr2-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-top: 32px;
}

.rr2-grid--2 { grid-template-columns: repeat(2, 1fr); }

.rr2-card {
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--rr2-radius);
  padding: 22px 22px 24px;
}

.rr2-card-n {
  font: 700 11px/1.3 var(--font-mono);
  letter-spacing: .12em;
  color: var(--mb-red);
}

.rr2-card-h {
  font: 700 17px/1.3 var(--font-display);
  letter-spacing: -.3px;
  color: var(--mb-ink);
  margin: 12px 0 0;
}

.rr2-card-b {
  font: 400 14px/1.6 var(--font-body);
  color: var(--mb-meta);
  margin: 9px 0 0;
  text-wrap: pretty;
}

/* Scatter list (why context is scattered) -------------------------------- */

.rr2-scatter {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px 20px;
}

.rr2-scatter li {
  display: flex;
  gap: 11px;
  align-items: baseline;
  font: 400 15px/1.6 var(--font-body);
  color: var(--mb-meta);
  border-bottom: 1px solid var(--mb-line);
  padding-bottom: 10px;
}

.rr2-scatter-dot {
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mb-dot);
  transform: translateY(-2px);
}

/* Specimen (what a focused strategy contains) ---------------------------- */

/* The specimen is the thing the page is selling, so it gets the only real
   elevation on the page: white card on the canvas ground, a red rule across
   the top (the same accent the dashboard uses on its active tab), and a
   tinted header band. */
.rr2-spec-card {
  position: relative;
  max-width: var(--rr2-max);
  margin: 36px auto 0;
  background: var(--mb-surface);
  border: 1px solid var(--mb-frame-line);
  border-radius: var(--rr2-radius-lg);
  overflow: hidden;
  box-shadow: 0 18px 44px rgba(16, 22, 38, .10), 0 2px 6px rgba(16, 22, 38, .04);
}

.rr2-spec-card::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--mb-red);
}

html[data-theme="dark"] .rr2-spec-card {
  box-shadow: 0 18px 44px rgba(0, 0, 0, .45), 0 2px 6px rgba(0, 0, 0, .3);
}

.rr2-spec-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 22px 24px;
  background: var(--mb-surface-2);
  border-bottom: 1px solid var(--mb-line);
  flex-wrap: wrap;
}

.rr2-spec-title {
  font: 700 19px/1.25 var(--font-display);
  letter-spacing: -.4px;
  color: var(--mb-ink);
  margin: 8px 0 0;
}

.rr2-spec-title-sub {
  font: 400 14px/1.25 var(--font-body);
  color: var(--mb-muted);
  letter-spacing: 0;
}

.rr2-spec-chips { display: flex; align-items: center; gap: 8px; }

.rr2-chip {
  font: 700 10.5px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mb-blue);
  background: var(--mb-blue-soft);
  border-radius: 999px;
  padding: 6px 11px;
  white-space: nowrap;
}

.rr2-chip--quiet { color: var(--mb-meta); background: var(--mb-pill); }

.rr2-spec-tabs {
  display: flex;
  align-items: center;
  padding: 0 24px;
  border-bottom: 1px solid var(--mb-line);
  background: var(--mb-surface);
  overflow-x: auto;
}

.rr2-tab {
  font: 600 13px/1 var(--font-body);
  padding: 14px 4px;
  margin-right: 26px;
  cursor: pointer;
  color: var(--mb-muted);
  background: none;
  border: none;
  border-bottom: 2px solid transparent;
  white-space: nowrap;
}

.rr2-tab[aria-selected="true"] { color: var(--mb-ink); border-bottom-color: var(--mb-red); }

.rr2-spec-body { padding: 22px 24px; min-height: 200px; }
.rr2-tabpanel[hidden] { display: none; }

.rr2-sblock {
  border: 1px solid var(--mb-line);
  border-radius: var(--rr2-radius);
  padding: 15px 17px;
  margin-bottom: 11px;
}

.rr2-sblock--green { border-color: var(--mb-win-line); background: var(--mb-win-bg); }

.rr2-slab {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mb-faint);
  margin: 0;
}

.rr2-slab--green { color: var(--mb-green); }

.rr2-squote {
  font: 400 15px/1.6 var(--font-body);
  color: var(--mb-body);
  margin: 10px 0 0;
  text-wrap: pretty;
}

.rr2-stxt {
  font: 400 14px/1.6 var(--font-body);
  color: var(--mb-meta);
  margin: 10px 0 0;
  text-wrap: pretty;
}

.rr2-sask {
  font: 600 15px/1.55 var(--font-body);
  color: var(--mb-ink);
  margin: 10px 0 0;
}

.rr2-qlist { list-style: none; margin: 0; padding: 0; }

.rr2-qrow {
  display: flex;
  gap: 13px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--mb-line);
}

.rr2-qrow:last-child { border-bottom: none; }

.rr2-qnum {
  flex: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--mb-blue-fill);
  color: var(--mb-on-fill);
  font: 700 10.5px/1 var(--font-mono);
}

.rr2-qtxt { font: 400 14px/1.55 var(--font-body); color: var(--mb-body); }

.rr2-obj-card {
  border: 1px solid var(--mb-line);
  border-radius: var(--rr2-radius);
  overflow: hidden;
  margin-bottom: 10px;
}

.rr2-obj-q {
  font: 600 14px/1.4 var(--font-body);
  color: var(--mb-ink);
  background: var(--mb-surface-2);
  padding: 12px 15px;
  margin: 0;
}

.rr2-obj-a {
  display: flex;
  gap: 10px;
  font: 400 14px/1.55 var(--font-body);
  color: var(--mb-meta);
  padding: 12px 15px;
  margin: 0;
}

.rr2-obj-arrow { flex: none; color: var(--mb-green); font: 700 14px/1.5 var(--font-body); }

.rr2-spec-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 16px 24px;
  background: var(--mb-surface-2);
  border-top: 1px solid var(--mb-line);
  flex-wrap: wrap;
}

.rr2-spec-foot-txt {
  font: 400 13px/1.55 var(--font-body);
  color: var(--mb-muted);
  max-width: 620px;
  margin: 0;
  text-wrap: pretty;
}

/* Calculator ------------------------------------------------------------ */

.rr2-calc-card {
  max-width: var(--rr2-max);
  margin: 32px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--rr2-radius-lg);
  overflow: hidden;
}

.rr2-calc-left { padding: 28px 30px 32px; }
.rr2-calc-right { padding: 28px 30px 32px; background: var(--mb-surface-2); border-left: 1px solid var(--mb-line); }

.rr2-calc-fields { display: flex; flex-direction: column; gap: 10px; margin-top: 20px; }

.rr2-calc-field {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  background: var(--mb-surface-2);
  border: 1px solid var(--mb-line);
  border-radius: var(--rr2-radius);
  padding: 11px 14px;
  cursor: text;
}

.rr2-calc-lab { font: 500 14px/1.3 var(--font-body); color: var(--mb-body); }

.rr2-calc-input {
  flex: none;
  width: 88px;
  font: 700 15px/1 var(--font-mono);
  color: var(--mb-ink);
  background: transparent;
  border: none;
  border-bottom: 1.5px solid var(--mb-btn-line);
  padding: 4px 2px;
  text-align: right;
}

.rr2-calc-input:focus { border-bottom-color: var(--mb-blue); }

.rr2-result { padding: 14px 0; border-bottom: 1px solid var(--mb-line); }
.rr2-result:first-child { padding-top: 0; }
.rr2-result:last-of-type { border-bottom: none; }

.rr2-result-val { font: 700 30px/1 var(--font-display); letter-spacing: -1px; color: var(--mb-ink); margin: 0; }
.rr2-result-lab { font: 400 13px/1.45 var(--font-body); color: var(--mb-muted); margin: 6px 0 0; }

.rr2-disclaimer { font: 400 13px/1.55 var(--font-body); color: var(--mb-faint); margin: 16px 0 0; text-wrap: pretty; }
.rr2-calc-note { font: 400 13px/1.5 var(--font-body); color: var(--mb-muted); margin: 11px 0 0; text-align: center; }

@media (max-width: 1080px) {
  .rr2-calc-card { grid-template-columns: 1fr; }
  .rr2-calc-right { border-left: none; border-top: 1px solid var(--mb-line); }
}

/* Booking --------------------------------------------------------------- */

.rr2-book { padding: 76px var(--rr2-gutter); background: var(--mb-surface-2); border-top: 1px solid var(--mb-line); }

.rr2-book-inner {
  max-width: var(--rr2-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 56px;
  align-items: center;
}

.rr2-book-h {
  font: 700 34px/1.18 var(--font-display);
  letter-spacing: -.9px;
  color: var(--mb-ink);
  margin: 12px 0 0;
}

.rr2-book-sub {
  font: 400 16px/1.6 var(--font-body);
  color: var(--mb-meta);
  margin: 14px 0 0;
  max-width: 460px;
  text-wrap: pretty;
}

.rr2-book-points { display: flex; flex-direction: column; gap: 10px; margin: 22px 0 0; padding: 0; list-style: none; }
.rr2-bp { display: flex; gap: 10px; align-items: baseline; }
.rr2-bp-check { flex: none; color: var(--mb-green); font: 700 14px/1.5 var(--font-body); }
.rr2-bp-txt { font: 400 14px/1.5 var(--font-body); color: var(--mb-body); }

.rr2-form-card {
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--rr2-radius-lg);
  padding: 26px 26px 28px;
}

.rr2-form-h {
  font: 700 17px/1.3 var(--font-display);
  color: var(--mb-ink);
  margin: 0 0 18px;
}

.rr2-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 14px; }

.rr2-field-lab { font: 600 13px/1 var(--font-body); color: var(--mb-body); }

.rr2-input {
  font: 400 14px/1 var(--font-body);
  color: var(--mb-ink);
  background: var(--mb-surface);
  border: 1px solid var(--mb-btn-line);
  border-radius: var(--rr2-radius);
  padding: 12px 13px;
  width: 100%;
  font-family: var(--font-body);
}

.rr2-input::placeholder { color: var(--mb-dim-3); }
.rr2-input:focus { border-color: var(--mb-blue); }

.rr2-field-error { font: 600 13px/1.4 var(--font-body); color: var(--mb-red); }
.rr2-input--invalid { border-color: var(--mb-red); }

.rr2-form-foot {
  font: 400 13px/1.55 var(--font-body);
  color: var(--mb-muted);
  margin-top: 14px;
  text-align: center;
  text-wrap: pretty;
}

.rr2-form-alert {
  border-radius: var(--rr2-radius);
  padding: 12px 14px;
  margin-bottom: 15px;
  font: 400 14px/1.5 var(--font-body);
}

.rr2-form-alert--ok { background: var(--mb-win-bg); border: 1px solid var(--mb-win-line); color: var(--mb-green); }
.rr2-form-alert--err { background: var(--mb-red-soft); border: 1px solid var(--mb-red); color: var(--mb-red); }

/* Founder --------------------------------------------------------------- */

.rr2-founder-grid {
  max-width: var(--rr2-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 240px 1fr;
  gap: 44px;
  align-items: center;
}

.rr2-portrait {
  width: 100%;
  height: 280px;
  object-fit: cover;
  object-position: center top;
  border-radius: var(--rr2-radius-lg);
  border: 1px solid var(--mb-line);
  display: block;
}

.rr2-founder-quote {
  font: 400 23px/1.45 var(--font-display);
  color: var(--mb-ink);
  margin: 14px 0 0;
  max-width: 640px;
  text-wrap: pretty;
}

.rr2-founder-name { font: 700 15px/1 var(--font-body); color: var(--mb-ink); margin: 20px 0 0; }
.rr2-founder-role { font: 400 14px/1 var(--font-body); color: var(--mb-muted); }

.rr2-founder-bio {
  font: 400 14px/1.62 var(--font-body);
  color: var(--mb-meta);
  margin: 12px 0 0;
  max-width: 600px;
  text-wrap: pretty;
}

/* Pricing --------------------------------------------------------------- */

.rr2-price-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 30px; }

.rr2-tier {
  border: 1px solid var(--mb-line);
  background: var(--mb-surface);
  border-radius: var(--rr2-radius);
  padding: 20px 20px 22px;
}

.rr2-tier--hi { border-color: var(--mb-blue); background: var(--mb-blue-soft); }

.rr2-tier-seats {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mb-faint);
}

.rr2-tier-price {
  font: 700 28px/1 var(--font-display);
  letter-spacing: -.8px;
  color: var(--mb-ink);
  margin: 13px 0 0;
}

.rr2-tier-unit { font: 400 13px/1.4 var(--font-body); color: var(--mb-muted); margin: 8px 0 0; }

/* Pricing page ----------------------------------------------------------
   Shares the tier/card vocabulary above. The IDs and input names inside the
   markup are a hard contract with static/js/pricing_checkout.js — restyle
   freely, but do not rename them.
   ---------------------------------------------------------------------- */

.rr2-center { text-align: center; }
.rr2-center .rr2-section-sub { margin-left: auto; margin-right: auto; }

/* Billing interval toggle (radio pill) */
.rr2-toggle {
  display: inline-flex;
  padding: 4px;
  background: var(--mb-pill);
  border: 1px solid var(--mb-line);
  border-radius: 999px;
  margin-top: 26px;
}

.rr2-toggle input { position: absolute; opacity: 0; pointer-events: none; }

.rr2-toggle label {
  display: block;
  padding: 9px 20px;
  border-radius: 999px;
  font: 600 14px/1 var(--font-body);
  color: var(--mb-meta);
  cursor: pointer;
  margin: 0;
}

.rr2-toggle input:checked + label {
  background: var(--mb-surface);
  color: var(--mb-ink);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
}

.rr2-toggle input:focus-visible + label { outline: 2px solid var(--mb-blue); outline-offset: 2px; }

.rr2-tiers { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-top: 26px; }

.rr2-tier-price span {
  font: 400 13px/1 var(--font-body);
  color: var(--mb-muted);
  letter-spacing: 0;
  margin-left: 3px;
}

.rr2-tier-price--text { font-size: 22px; }
.rr2-tier-sub { font: 400 13px/1.4 var(--font-body); color: var(--mb-faint); margin: 6px 0 0; }

.rr2-example { font: 400 14px/1.5 var(--font-body); color: var(--mb-muted); margin: 20px 0 0; text-align: center; }

/* Purchase form */
.rr2-purchase {
  max-width: 620px;
  margin: 26px auto 0;
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--rr2-radius-lg);
  padding: 24px 26px 26px;
  text-align: center;
}

.rr2-summary-box {
  background: var(--mb-surface-2);
  border: 1px solid var(--mb-line);
  border-radius: var(--rr2-radius);
  padding: 14px 16px;
  margin-bottom: 16px;
}

.rr2-summary-total { display: block; font: 700 26px/1 var(--font-display); letter-spacing: -.7px; color: var(--mb-ink); }
.rr2-summary-detail { display: block; font: 400 13px/1.4 var(--font-body); color: var(--mb-muted); margin-top: 6px; }

.rr2-purchase-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: center;
  gap: 12px;
}

.rr2-seat-field { display: flex; flex-direction: column; gap: 6px; text-align: left; }
.rr2-seat-field label { font: 600 13px/1 var(--font-body); color: var(--mb-body); }

.rr2-seat-input {
  width: 130px;
  font: 400 14px/1 var(--font-body);
  color: var(--mb-ink);
  background: var(--mb-surface);
  border: 1px solid var(--mb-btn-line);
  border-radius: var(--rr2-radius);
  padding: 12px 13px;
}

.rr2-seat-input:focus { border-color: var(--mb-blue); }

.rr2-purchase-note { font: 400 13px/1.55 var(--font-body); color: var(--mb-muted); margin: 14px 0 0; text-wrap: pretty; }

/* Trial / pilot band */
.rr2-pilot {
  max-width: var(--rr2-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-left: 3px solid var(--mb-blue);
  border-radius: var(--rr2-radius-lg);
  padding: 28px 32px;
}

.rr2-pilot-lab {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mb-faint);
  margin: 0;
}

.rr2-pilot-h { font: 700 22px/1.3 var(--font-display); letter-spacing: -.5px; color: var(--mb-ink); margin: 10px 0 0; }
.rr2-pilot-b { font: 400 14px/1.62 var(--font-body); color: var(--mb-meta); margin: 10px 0 0; max-width: 640px; text-wrap: pretty; }
.rr2-pilot-cta { flex: none; }

/* FAQ (native <details>; JS enforces one-open-at-a-time) */
.rr2-faq { max-width: 800px; margin: 30px auto 0; }

.rr2-faq-item {
  border: 1px solid var(--mb-line);
  border-radius: var(--rr2-radius);
  background: var(--mb-surface);
  margin-bottom: 10px;
  overflow: hidden;
}

.rr2-faq-item summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 18px;
  cursor: pointer;
  font: 600 15px/1.4 var(--font-body);
  color: var(--mb-ink);
  list-style: none;
}

.rr2-faq-item summary::-webkit-details-marker { display: none; }
.rr2-faq-item summary::marker { content: ''; }
.rr2-faq-item[open] summary { border-bottom: 1px solid var(--mb-line); }
.rr2-faq-item summary i { color: var(--mb-faint); font-size: 12px; transition: transform .18s ease; }
.rr2-faq-item[open] summary i { transform: rotate(180deg); }

@media (prefers-reduced-motion: reduce) {
  .rr2-faq-item summary i { transition: none; }
}

.rr2-faq-answer {
  padding: 15px 18px 17px;
  font: 400 14px/1.62 var(--font-body);
  color: var(--mb-meta);
  text-wrap: pretty;
}

@media (max-width: 1080px) {
  .rr2-tiers { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 620px) {
  .rr2-tiers { grid-template-columns: 1fr; }
  .rr2-pilot { flex-direction: column; align-items: flex-start; gap: 20px; }
  .rr2-toggle { width: 100%; justify-content: center; }
  .rr2-toggle label { padding: 9px 14px; font-size: 12.5px; }
}

/* About ------------------------------------------------------------------
   Long-form marketing copy plus leadership bios. Shares the section rhythm
   with the landing page; only the prose scale and the bio card are new.
   ---------------------------------------------------------------------- */

/* Narrower measure for running prose than the marketing grid uses. */
/* Same measure as the document pages, so every long-form page lines up. */
.rr2-measure { max-width: 760px; }

.rr2-prose {
  font: 400 15px/1.72 var(--font-body);
  color: var(--mb-meta);
  margin: 0 0 16px;
  text-wrap: pretty;
}

/* Opening statement of a section — the callout treatment the legal pages
   use for their lead-in note. */
.rr2-lede {
  font: 600 19px/1.6 var(--font-body);
  color: var(--mb-ink);
  border-left: 3px solid var(--mb-blue);
  padding: 2px 0 2px 20px;
  margin: 0 0 26px;
  text-wrap: pretty;
}

.rr2-emphasis {
  font: 700 16px/1.6 var(--font-body);
  color: var(--mb-ink);
  margin: 6px 0 0;
  text-wrap: pretty;
}

/* A list is a heavier block than a paragraph; give the closing line room. */
.rr2-scatter + .rr2-emphasis { margin-top: 24px; }

.rr2-section-h + .rr2-prose,
.rr2-section-h + .rr2-scatter { margin-top: 18px; }

/* One column, for lists that read as statements rather than a scan grid. */
.rr2-scatter--single { grid-template-columns: 1fr; }

/* Leadership ------------------------------------------------------------- */

/* Matches .rr2-measure so the cards line up with the section heading. */
.rr2-bio-list {
  max-width: 760px;
  margin: 34px auto 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.rr2-bio {
  display: grid;
  grid-template-columns: 132px 1fr;
  gap: 26px;
  align-items: start;
  background: var(--mb-surface);
  border: 1px solid var(--mb-line);
  border-radius: var(--rr2-radius-lg);
  padding: 26px 28px;
}

.rr2-bio-shot {
  width: 132px;
  height: 132px;
  border-radius: var(--rr2-radius);
  object-fit: cover;
  border: 1px solid var(--mb-line);
  display: block;
}

.rr2-bio-shot-img--top { object-position: center top; }

.rr2-bio-name {
  font: 700 19px/1.25 var(--font-display);
  letter-spacing: -.3px;
  color: var(--mb-ink);
  margin: 0;
}

.rr2-bio-role {
  font: 700 11px/1 var(--font-mono);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--mb-red);
  margin: 9px 0 0;
}

.rr2-bio-text { margin-top: 15px; }

.rr2-bio-text p {
  font: 400 15px/1.68 var(--font-body);
  color: var(--mb-meta);
  margin: 0 0 12px;
  text-wrap: pretty;
}

.rr2-bio-text p:last-child { margin-bottom: 0; }

@media (max-width: 620px) {
  .rr2-bio { grid-template-columns: 1fr; gap: 18px; padding: 22px; }
  .rr2-lede { font-size: 17px; }
}

/* Document pages (About, Privacy Policy, Terms of Use) -------------------------
   Long-form reading, so the measure is narrower than the marketing sections
   and the type scale is its own. Every colour is a theme token, which is what
   makes these pages follow dark mode like the rest of the site — the previous
   version hard-coded black-on-white inline and could not.
   ---------------------------------------------------------------------- */

.rr2-doc-head {
  padding: 64px var(--rr2-gutter) 40px;
  border-bottom: 1px solid var(--mb-line);
  background: var(--mb-surface);
}

.rr2-doc-head-inner { max-width: 760px; margin: 0 auto; }

.rr2-doc-h1 {
  font: 700 clamp(30px, 4vw, 42px)/1.12 var(--font-display);
  letter-spacing: -.03em;
  color: var(--mb-ink);
  margin: 14px 0 0;
}

.rr2-legal-body {
  padding: 48px var(--rr2-gutter) 72px;
  background: var(--mb-surface);
}

.rr2-legal-inner { max-width: 760px; margin: 0 auto; }

/* Lead-in callout above the first section. */
.rr2-legal-note {
  border: 1px solid var(--mb-line);
  border-left: 3px solid var(--mb-blue);
  border-radius: var(--rr2-radius);
  background: var(--mb-surface-2);
  padding: 16px 20px;
  margin: 0 0 40px;
  font: 400 15px/1.65 var(--font-body);
  color: var(--mb-body);
  text-wrap: pretty;
}

/* landing.css carries a bare `section { padding: 6rem 0 }` rule that these
   <section> elements inherit, so the padding is reset explicitly. */
.rr2-legal-section { margin: 0 0 40px; padding: 0; }

.rr2-legal-section h2 {
  font: 700 21px/1.3 var(--font-display);
  letter-spacing: -.4px;
  color: var(--mb-ink);
  margin: 0 0 16px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--mb-line-2);
}

.rr2-legal-section h3 {
  font: 700 15.5px/1.4 var(--font-display);
  letter-spacing: -.2px;
  color: var(--mb-ink);
  margin: 26px 0 10px;
}

.rr2-legal-section p {
  font: 400 15px/1.72 var(--font-body);
  color: var(--mb-meta);
  margin: 0 0 14px;
  text-wrap: pretty;
}

.rr2-legal-section p:last-child { margin-bottom: 0; }

.rr2-legal-section ul {
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}

.rr2-legal-section li {
  position: relative;
  font: 400 15px/1.72 var(--font-body);
  color: var(--mb-meta);
  padding: 0 0 0 20px;
  margin: 0 0 9px;
  text-wrap: pretty;
}

/* Dot bullet matching .rr2-scatter rather than a browser marker. */
.rr2-legal-section li::before {
  content: '';
  position: absolute;
  left: 3px;
  top: .68em;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--mb-dot);
}

.rr2-legal-section strong { color: var(--mb-ink); font-weight: 700; }

.rr2-legal-section a { color: var(--mb-blue); text-decoration: underline; text-underline-offset: 3px; }
.rr2-legal-section a:hover { color: var(--mb-blue-2); }

/* Closing contact card — the specimen card's accent rule, at small scale. */
.rr2-legal-contact {
  position: relative;
  border: 1px solid var(--mb-frame-line);
  border-radius: var(--rr2-radius-lg);
  background: var(--mb-surface-2);
  padding: 24px 26px;
  margin-top: 48px;
  overflow: hidden;
}

.rr2-legal-contact::before {
  content: '';
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: var(--mb-red);
}

.rr2-legal-contact h3 {
  font: 700 17px/1.3 var(--font-display);
  letter-spacing: -.3px;
  color: var(--mb-ink);
  margin: 0 0 10px;
}

.rr2-legal-contact p {
  font: 400 15px/1.7 var(--font-body);
  color: var(--mb-meta);
  margin: 0;
}

@media (max-width: 620px) {
  .rr2-doc-head { padding-top: 44px; padding-bottom: 30px; }
  .rr2-legal-body { padding-top: 36px; padding-bottom: 52px; }
  .rr2-legal-section h2 { font-size: 19px; }
}

/* Footer ---------------------------------------------------------------- */

.rr2-footer {
  background: var(--mb-surface);
  border-top: 1px solid var(--mb-line);
  padding: 26px var(--rr2-gutter);
}

.rr2-footer-inner {
  max-width: var(--rr2-max);
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  flex-wrap: wrap;
}

.rr2-footer-mark img { height: 18px; width: auto; display: block; }
.rr2-footer-txt { font: 400 13px/1 var(--font-body); color: var(--mb-muted); }
.rr2-footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
.rr2-footer-link { font: 400 13px/1 var(--font-body); color: var(--mb-muted); }
.rr2-footer-link:hover { color: var(--mb-ink); }

/* Responsive ------------------------------------------------------------ */

@media (max-width: 1080px) {
  :root { --rr2-gutter: 32px; }
  .rr2-hero-sub { font-size: 17px; }
  .rr2-grid { grid-template-columns: 1fr; }
  .rr2-price-grid { grid-template-columns: repeat(2, 1fr); }
  .rr2-book-inner { grid-template-columns: 1fr; gap: 36px; }
  .rr2-founder-grid { grid-template-columns: 200px 1fr; gap: 30px; }
}

@media (max-width: 860px) {
  .rr2-section-h { font-size: 25px; }
  .rr2-book-h { font-size: 27px; }
  .rr2-scatter { grid-template-columns: 1fr; }
  .rr2-founder-grid { grid-template-columns: 1fr; }
  .rr2-portrait { max-width: 220px; height: 250px; }
  .rr2-nav-inner { flex-wrap: wrap; gap: 12px; }
  .rr2-nav-links { gap: 18px; width: 100%; justify-content: space-between; }
}

@media (max-width: 620px) {
  :root { --rr2-gutter: 20px; }
  /* Below the clamp's floor the two headline lines would wrap on narrow
     phones, so the small end gets its own scale. */
  .rr2-h1 { font-size: clamp(29px, 8vw, 42px); letter-spacing: -.028em; }
  .rr2-hero { padding-top: 60px; padding-bottom: 68px; }
  .rr2-hero-sub { font-size: 16px; }
  .rr2-hero-eyebrow { font-size: 10px; letter-spacing: .1em; }
  .rr2-badge { font-size: 14px; padding: 10px 18px; }
  .rr2-price-grid { grid-template-columns: 1fr; }
  .rr2-cta-row > .rr2-btn { width: 100%; justify-content: center; }
  .rr2-nav-link { font-size: 12.5px; }
}