/* ============================================================
   redesign.css
   Supplementary stylesheet for the 2026 re-skin.
   Supplements styles.css (Tailwind) - does NOT replace it.
   Header, nav-bar, submenu, footer: untouched (Tailwind owns them).
   This file only styles the new in-view content blocks and the
   re-skinned sub-pages.

   Design tokens are deliberately accent-agnostic at the root.
   Each content view overrides --rd-accent to its own hue, so the
   same components re-tint per app takeover without a JS change.
   ============================================================ */

/* ----------- Fonts (self-hosted) ----------- */
/* DM Sans for body, JetBrains Mono for eyebrows/tech labels */
@font-face {
  font-family: 'DM Sans';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url('/fonts/dm-sans-v17-latin-regular.woff2') format('woff2');
  size-adjust: 101%;
  ascent-override: 95%;
  descent-override: 25%;
  line-gap-override: 0%;
}
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/dm-sans-v17-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/dm-sans-v17-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'DM Sans'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/dm-sans-v17-latin-700.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400; font-display: swap; src: url('/fonts/jetbrains-mono-v24-latin-regular.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 500; font-display: swap; src: url('/fonts/jetbrains-mono-v24-latin-500.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 600; font-display: swap; src: url('/fonts/jetbrains-mono-v24-latin-600.woff2') format('woff2'); }
@font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 700; font-display: swap; src: url('/fonts/jetbrains-mono-v24-latin-700.woff2') format('woff2'); }

/* ----------- Base tokens ----------- */
:root {
  --rd-bg-deep: #060a10;
  --rd-bg-card: rgba(15, 23, 42, 0.7);
  --rd-bg-card-dim: rgba(15, 23, 42, 0.4);
  --rd-text: #e2e8f0;
  --rd-text-dim: #94a3b8;
  --rd-text-faint: #64748b;
  --rd-border-soft: rgba(255, 255, 255, 0.08);
  --rd-green-play: #3ddc84;

  --rd-font-main: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --rd-font-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  /* Default accent - used on sub-pages (about, contact, etc.) */
  /* Feedings sky-blue, matches chrome #00baff */
  --rd-accent: #00baff;
  --rd-accent-dim: rgba(0, 186, 255, 0.15);
  --rd-accent-border: rgba(0, 186, 255, 0.25);
  --rd-accent-border-hover: rgba(0, 186, 255, 0.5);
}

/* ----------- Per-view accent scoping ----------- */
/* Main view: Feedings sky-blue, matches chrome #00baff */
#mainContent {
  --rd-accent: #00baff;
  --rd-accent-dim: rgba(0, 186, 255, 0.15);
  --rd-accent-border: rgba(0, 186, 255, 0.25);
  --rd-accent-border-hover: rgba(0, 186, 255, 0.5);
}
/* RSS view: cyan/blue */
#rssContent {
  --rd-accent: #22d3ee;
  --rd-accent-dim: rgba(34, 211, 238, 0.15);
  --rd-accent-border: rgba(34, 211, 238, 0.25);
  --rd-accent-border-hover: rgba(34, 211, 238, 0.5);
}
/* BenchCalc view: teal */
#benchContent {
  --rd-accent: #2dd4bf;
  --rd-accent-dim: rgba(45, 212, 191, 0.15);
  --rd-accent-border: rgba(45, 212, 191, 0.25);
  --rd-accent-border-hover: rgba(45, 212, 191, 0.5);
}
/* Influence view: gold */
#influenceContent {
  --rd-accent: #fbbf24;
  --rd-accent-dim: rgba(251, 191, 36, 0.15);
  --rd-accent-border: rgba(251, 191, 36, 0.25);
  --rd-accent-border-hover: rgba(251, 191, 36, 0.5);
}

/* ============================================================
   Layout wrapper for re-skinned content
   Use: <div class="rd"> ... </div> around new-style content.
   Keeps Tailwind utilities working on surrounding chrome.
   ============================================================ */
.rd {
  font-family: var(--rd-font-main);
  color: var(--rd-text);
  line-height: 1.65;
}
.rd .rd-mono { font-family: var(--rd-font-mono); }

/* Section wrapper - replaces the `glass + pill-badge + gradient-hero` pattern */
.rd-section {
  max-width: 860px;
  margin: 0 auto;
  padding: 4rem 1.5rem;
}
.rd-section-wide { max-width: 1000px; }

/* ----------- Eyebrow tags (replaces pill badges) ----------- */
.rd-eyebrow {
  font-family: var(--rd-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-accent);
  margin-bottom: 0.75rem;
  display: block;
}

/* ----------- Headings ----------- */
.rd h1, .rd .rd-h1 {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 1.25rem;
  color: #fff;
}
.rd h2, .rd .rd-h2 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.01em;
  margin: 0 0 1rem;
  color: #fff;
}
.rd h3, .rd .rd-h3 {
  font-size: 1.1rem;
  font-weight: 700;
  color: #fff;
  margin: 1.5rem 0 0.5rem;
}
.rd .rd-accent { color: var(--rd-accent); }

/* ----------- Prose ----------- */
.rd p, .rd .rd-p {
  color: var(--rd-text-dim);
  margin: 0 0 1.1rem;
  font-size: 1rem;
  line-height: 1.75;
}
.rd .rd-lede {
  font-size: 1.05rem;
  color: var(--rd-text-dim);
  line-height: 1.75;
  max-width: 62ch;
}
.rd a { color: var(--rd-accent); text-decoration: none; }
.rd a:hover { text-decoration: underline; }

/* Card/tile/button-shaped links: no underline, use lift + glow instead */
.rd a.rd-hero-phone:hover,
.rd a.rd-hero-phone-cap:hover,
.rd a.rd-hero-strip:hover,
.rd a.rd-trio-tile:hover,
.rd a.rd-card-clickable:hover,
.rd a.rd-store-btn:hover,
.rd a.rd-fp-item-head:hover { text-decoration: none; }

/* Hover polish for components that had weak or no hover effect */
body.has-mouse .rd-hero-phone-cap { transition: color 0.2s, letter-spacing 0.2s, opacity 0.2s; }
body.has-mouse .rd-hero-phone-cap:hover { opacity: 1; letter-spacing: 0.1em; color: #fff; }

body.has-mouse .rd-hero-strip { transition: transform 0.2s, box-shadow 0.2s, border-color 0.2s; }
body.has-mouse .rd-hero-strip:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(0,0,0,0.35); }
body.has-mouse .rd-hero-strip.feedings:hover { box-shadow: 0 6px 20px rgba(0,186,255,0.45); }

body.has-mouse .rd-card-clickable { transition: transform 0.2s, border-color 0.2s, box-shadow 0.2s; }
body.has-mouse .rd-card-clickable:hover { transform: translateY(-2px); border-color: var(--rd-accent); box-shadow: 0 6px 20px rgba(0,0,0,0.3); }

body.has-mouse .rd-store-btn { transition: transform 0.2s, border-color 0.2s, background 0.2s; }
body.has-mouse .rd-store-btn:hover { transform: translateY(-2px); border-color: var(--rd-accent); background: rgba(255,255,255,0.02); }

body.has-mouse .rd-fp-item-head { transition: color 0.2s; }
body.has-mouse .rd-fp-item-head:hover .rd-fp-subheading { color: var(--rd-accent); }
.rd strong { color: var(--rd-text); font-weight: 600; }

/* ----------- En-dash lists (replaces emoji-bullet lists) ----------- */
.rd .rd-list { list-style: none; padding: 0; margin: 0 0 1.25rem; }
.rd .rd-list li {
  position: relative;
  padding-left: 1.1rem;
  font-size: 0.95rem;
  color: var(--rd-text-dim);
  line-height: 1.85;
}
.rd .rd-list li::before {
  content: '\2013';
  position: absolute;
  left: 0;
  color: var(--rd-text-faint);
}
.rd .rd-list li strong { color: var(--rd-text); font-weight: 600; }

/* ----------- Tabbed feature panels (replaces card-grid of 10) ----------- */
.rd-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0;
  border-bottom: 1px solid var(--rd-accent-border);
  margin-bottom: 2rem;
}
.rd-tab {
  padding: 0.8rem 0;
  margin-right: 2rem;
  background: transparent;
  border: none;
  cursor: pointer;
  color: var(--rd-text-faint);
  font-family: var(--rd-font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: color 0.2s;
  position: relative;
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
}
.rd-tab .rd-tab-count {
  font-size: 0.7rem;
  color: var(--rd-text-faint);
  font-weight: 500;
}
body.has-mouse .rd-tab:hover { color: var(--rd-text); }
.rd-tab.active { color: var(--rd-accent); }
.rd-tab.active .rd-tab-count { color: var(--rd-accent); }
.rd-tab.active::after {
  content: '';
  position: absolute;
  bottom: -1px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--rd-accent);
}
.rd-panel { min-height: 280px; transition: opacity 0.15s ease; }
.rd-panel.swapping { opacity: 0; }
.rd-panel-part {
  font-family: var(--rd-font-mono);
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-accent);
  margin-bottom: 0.6rem;
}
.rd-panel h3 {
  font-size: 1.3rem;
  font-weight: 700;
  margin: 0 0 0.5rem;
  letter-spacing: -0.01em;
  color: #fff;
}
.rd-panel p { max-width: 62ch; margin-bottom: 1.25rem; }

/* ----------- Quiet cards (single accent, no rainbow) ----------- */
/* Use for places that still need grouping but shouldn't scream. */
.rd-card {
  background: var(--rd-bg-card);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid var(--rd-border-soft);
  border-radius: 0.75rem;
  padding: 1.5rem;
  transition: border-color 0.2s ease;
}
body.has-mouse .rd-card:hover {
  border-color: var(--rd-accent-border-hover);
}
.rd-card h3 { margin-top: 0; }
.rd-card-title {
  font-family: var(--rd-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-accent);
  margin-bottom: 0.5rem;
}

/* Uniform accent-tinted icon square - replaces per-card rainbow gradient boxes */
.rd-card-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rd-accent-dim);
  border: 1px solid var(--rd-accent-border);
  flex-shrink: 0;
  font-size: 1.25rem;
  line-height: 1;
}

/* Clickable card - used on feature cards that open modals */
.rd-card-clickable {
  cursor: pointer;
}

/* ----------- Store buttons (Android / App Store / MS Store Soon) ----------- */
.rd-stores { display: inline-flex; gap: 0.6rem; flex-wrap: wrap; align-items: center; }
.rd-store-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.55rem 1rem;
  border-radius: 0.6rem;
  font-size: 0.85rem;
  font-weight: 600;
  font-family: var(--rd-font-main);
  text-decoration: none;
  transition: all 0.2s ease;
  border: 1.5px solid;
  cursor: pointer;
}
.rd-store-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.rd-store-btn-android {
  background: rgba(61, 220, 132, 0.08);
  border-color: rgba(61, 220, 132, 0.3);
  color: var(--rd-green-play);
}
body.has-mouse .rd-store-btn-android:hover {
  background: rgba(61, 220, 132, 0.15);
  border-color: var(--rd-green-play);
  text-decoration: none;
}
.rd-store-btn-ios {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
body.has-mouse .rd-store-btn-ios:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}
.rd-store-btn-ms {
  background: rgba(255, 255, 255, 0.03);
  border-color: rgba(255, 255, 255, 0.12);
  color: rgba(255, 255, 255, 0.45);
  cursor: not-allowed;
  position: relative;
}
body.has-mouse .rd-store-btn-ms:hover {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.18);
  color: rgba(255, 255, 255, 0.6);
  text-decoration: none;
}
.rd-store-btn-ms .rd-soon-tag {
  font-size: 0.55rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.35);
  margin-left: 0.25rem;
  padding: 0.1rem 0.3rem;
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 0.2rem;
}
.rd-store-btn-ms-live {
  background: rgba(255, 255, 255, 0.05);
  border-color: rgba(255, 255, 255, 0.2);
  color: #fff;
}
body.has-mouse .rd-store-btn-ms-live:hover {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.4);
  text-decoration: none;
}

/* ----------- Stat row (replaces "1000+ USERS!" hero boxes) ----------- */
.rd-meta {
  font-size: 0.95rem;
  color: var(--rd-text-dim);
  line-height: 1.9;
  margin: 0 0 1.5rem;
}
.rd-meta .rd-stat {
  color: var(--rd-accent);
  font-weight: 700;
}
.rd-meta .rd-price {
  color: var(--rd-accent);
  font-weight: 700;
}

/* ----------- Quiet divider ----------- */
.rd-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--rd-text-faint);
  margin: 2.5rem 0;
}
.rd-divider::before,
.rd-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--rd-accent-border) 30%, var(--rd-accent-border) 70%, transparent);
}
.rd-divider-text {
  font-family: var(--rd-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-text-faint);
}

/* ============================================================
   Release / update sections (matches benchcalc.co.uk/updates).
   Used on main view news cards, and on any standalone updates
   pages (BC view changelog, Influence view changelog, etc.)
   No glass card, no pill. Horizontal gradient rules top and
   bottom. Version/date tag in mono. Inline tags for NEW,
   IMPROVED, FIX, TIP coloured per their meaning (teal/accent,
   amber, red, amber).
   ============================================================ */
.rd-release-section {
  position: relative;
  padding: 1.75rem 0;
  margin-bottom: 3rem;
}
.rd-release-section:last-child { margin-bottom: 0; }
.rd-release-section::before,
.rd-release-section::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--rd-accent-border-hover) 20%, var(--rd-accent-border-hover) 80%, transparent);
}
.rd-release-section::before { top: 0; }
.rd-release-section::after { bottom: 0; }

/* Variant: current / latest (purple) */
.rd-release-section.current::before,
.rd-release-section.current::after {
  background: linear-gradient(90deg, transparent, rgba(139, 92, 246, 0.7) 20%, rgba(139, 92, 246, 0.7) 80%, transparent);
}
/* Variant: future / coming soon (amber) */
.rd-release-section.future::before,
.rd-release-section.future::after {
  background: linear-gradient(90deg, transparent, rgba(250, 204, 21, 0.55) 20%, rgba(250, 204, 21, 0.55) 80%, transparent);
}

.rd-release-tag {
  font-family: var(--rd-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-accent);
  margin-bottom: 0.6rem;
  display: block;
}
.rd-release-tag.current { color: #a78bfa; }
.rd-release-tag.future { color: #facc15; }

.rd-release-section h2,
.rd-release-section h3 {
  color: #fff;
  margin: 0 0 0.75rem;
}
.rd-release-section p {
  color: var(--rd-text-dim);
  margin: 0 0 0.7rem;
  line-height: 1.7;
  font-size: 0.95rem;
}
.rd-release-section p:last-child { margin-bottom: 0; }

/* Inline NEW / IMPROVED / FIX / TIP tags */
.rd-tag-new,
.rd-tag-imp,
.rd-tag-fix,
.rd-tag-tip,
.rd-tag-ann,
.rd-tag-community {
  font-family: var(--rd-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  margin-right: 0.3rem;
}
.rd-tag-new { color: var(--rd-accent); }
.rd-tag-imp { color: #facc15; }
.rd-tag-tip { color: #facc15; }
.rd-tag-fix { color: #f87171; }
.rd-tag-ann { color: var(--rd-accent); }
.rd-tag-community { color: #a78bfa; }

/* Expand / collapse affordance for news items */
.rd-release-section[data-collapsible] {
  cursor: pointer;
  transition: background 0.2s ease;
}
.rd-release-section[data-collapsible] .rd-release-arrow {
  float: right;
  color: var(--rd-text-faint);
  font-size: 0.8rem;
  transition: transform 0.3s ease;
  margin-top: 0.2rem;
}
.rd-release-section[data-collapsible].expanded .rd-release-arrow {
  transform: rotate(180deg);
}
.rd-release-section[data-collapsible] .rd-release-body {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.rd-release-section[data-collapsible].expanded .rd-release-body {
  display: block;
}

/* ============================================================
   Mobile
   ============================================================ */
@media (max-width: 640px) {
  .rd-section { padding: 2.5rem 1.25rem; }
  .rd-tab { margin-right: 1.25rem; font-size: 0.72rem; }
  .rd-release-section { padding: 1.25rem 0; margin-bottom: 2rem; }
}

/* ============================================================
   Legal pages (privacy / terms / cookies / delete-account)
   Scoped to main[id^="content"] > article — does not bleed elsewhere.
   Leaves .info-box / .info-title and takeover CSS alone.
   ============================================================ */
main[id^="content"] > article {
  background: var(--rd-bg-card) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  border: 1px solid var(--rd-border-soft) !important;
  border-radius: var(--rd-radius-md) !important;
  padding: 2.5rem !important;
  color: var(--rd-text-dim);
  font-family: var(--rd-font-sans);
  line-height: 1.7;
}
main[id^="content"] > article h1 {
  color: var(--rd-text);
  font-family: var(--rd-font-sans);
  font-size: 2rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem;
}
main[id^="content"] > article h2 {
  color: var(--rd-text);
  font-family: var(--rd-font-sans);
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  margin: 2rem 0 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--rd-border-soft);
}
main[id^="content"] > article h3 {
  color: var(--rd-text);
  font-family: var(--rd-font-sans);
  font-size: 1rem;
  font-weight: 600;
  margin: 1.25rem 0 0.5rem;
}
main[id^="content"] > article p {
  color: var(--rd-text-dim);
  margin: 0 0 0.85rem;
  font-size: 0.95rem;
}
main[id^="content"] > article ul,
main[id^="content"] > article ol {
  margin: 0 0 1rem;
  padding-left: 1.25rem;
  color: var(--rd-text-dim);
  font-size: 0.92rem;
}
main[id^="content"] > article li {
  margin-bottom: 0.35rem;
}
main[id^="content"] > article li::marker {
  color: var(--rd-accent);
}
main[id^="content"] > article strong {
  color: var(--rd-text);
  font-weight: 600;
}
main[id^="content"] > article a {
  color: var(--rd-accent);
  text-decoration: none;
  border-bottom: 1px solid var(--rd-accent-border);
  transition: border-color 0.2s;
}
body.has-mouse main[id^="content"] > article a:hover {
  border-bottom-color: var(--rd-accent);
}
/* "Last Updated" date paragraph just after h1 */
main[id^="content"] > article h1 + p {
  font-family: var(--rd-font-mono);
  font-size: 0.78rem;
  color: var(--rd-text-faint);
  letter-spacing: 0.03em;
  margin-bottom: 2rem;
}
@media (max-width: 640px) {
  main[id^="content"] > article { padding: 1.5rem !important; }
  main[id^="content"] > article h1 { font-size: 1.5rem; }
  main[id^="content"] > article h2 { font-size: 1.1rem; }
}

/* ============================================================
   BC-pattern components (2026 about/contact/features rewrite)
   ============================================================ */

/* Canonical 1000px container */
.rd-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 1.5rem;
}
.rd-container + .rd-container { padding-top: 3rem; }

/* Hero: page-kicker + h1 + page-lede (centered) */
.rd-page-kicker {
  font-family: var(--rd-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-accent);
  display: block;
  margin-bottom: 0.75rem;
}
.rd .rd-page-lede {
  color: var(--rd-text-dim);
  max-width: 560px;
  margin: 0 auto 2.5rem;
  font-size: 1rem;
  line-height: 1.65;
}

/* Section heading + lede (BC .section-h / .section-lede) */
.rd .rd-section-h {
  font-size: clamp(1.8rem, 3.5vw, 2.5rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0 0 1rem;
  color: #fff;
}
.rd .rd-section-lede {
  font-size: 1rem;
  color: var(--rd-text-dim);
  line-height: 1.7;
  max-width: 60ch;
  margin: 0 0 2.5rem;
}

/* Features panel grid (BC .fp-columns) */
.rd-fp-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3.5rem 3rem;
}
.rd-fp-columns-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 2rem;
}
@media (max-width: 720px) {
  .rd-fp-columns,
  .rd-fp-columns-3 {
    grid-template-columns: 1fr;
    gap: 1.75rem;
  }
}

/* Features item: icon-box + subheading head, prose beneath */
.rd-fp-item-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-bottom: 0.5rem;
}
.rd-fp-icon-box {
  width: 2rem;
  height: 2rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--rd-accent-dim);
  border: 1px solid var(--rd-accent-border);
  flex-shrink: 0;
  font-size: 1rem;
  line-height: 1;
  overflow: hidden;
}
.rd-fp-icon-box img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
}
.rd .rd-fp-subheading {
  font-size: 0.95rem;
  font-weight: 700;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}
.rd-fp-item p {
  font-size: 0.9rem;
  color: var(--rd-text-dim);
  line-height: 1.7;
  margin: 0;
}
.rd-fp-item-platforms {
  font-family: var(--rd-font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--rd-text-faint);
  margin-top: 0.5rem;
  text-transform: uppercase;
}

/* Numbered kicker (BC .fp-part) for Philosophy 01/02/03/04 */
.rd-fp-part {
  font-family: var(--rd-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-accent);
  margin-bottom: 0.4rem;
  display: block;
}

/* Contact grid (BC .contact-grid) */
.rd-contact-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 3rem 4rem;
}
@media (max-width: 720px) {
  .rd-contact-grid {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
}

/* Category heading (BC .cat-heading) */
.rd-cat-heading {
  font-family: var(--rd-font-mono);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-accent);
  padding-bottom: 0.6rem;
  margin-bottom: 0.25rem;
  border-bottom: 1px solid var(--rd-accent-border);
}

/* Contact row (BC .contact-row) */
.rd-contact-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0;
  border-bottom: 1px solid var(--rd-accent-dim);
}
.rd-contact-row:last-child { border-bottom: none; }
.rd-contact-row-left {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  color: var(--rd-text);
  font-weight: 600;
  font-size: 0.92rem;
}
.rd-contact-row-left svg {
  width: 16px;
  height: 16px;
  color: var(--rd-text-faint);
  flex-shrink: 0;
}
.rd-contact-row-right {
  font-family: var(--rd-font-mono);
  font-size: 0.82rem;
  color: var(--rd-text-dim);
  text-align: right;
}
.rd-contact-row-right a {
  color: var(--rd-text-dim);
  text-decoration: none;
}
body.has-mouse .rd-contact-row-right a:hover { color: var(--rd-accent); }

/* ============================================================
   Features tabs (BC What's In It pattern) + Get stores row
   ============================================================ */

/* Panel swap — only panels with data-panel are tab-controlled */
.rd-panel[data-panel] { display: none; }
.rd-panel[data-panel].active { display: block; }

/* Store button row (BC .get-stores) */
.rd-get-stores {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  margin: 0 0 2.5rem;
}

/* Beta quota rows inside a feature item */
.rd-fp-quota {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid var(--rd-accent-dim);
}
.rd-fp-quota-row {
  display: grid;
  grid-template-columns: 7rem 1fr;
  gap: 0.75rem;
  align-items: baseline;
  font-size: 0.82rem;
  line-height: 1.4;
}
.rd-fp-quota-row .rd-fp-quota-label {
  font-family: var(--rd-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-text-dim);
}
.rd-fp-quota-row .rd-fp-quota-value {
  color: var(--rd-text-dim);
}
.rd-fp-quota-row.supporter .rd-fp-quota-label { color: #a78bfa; }
.rd-fp-quota-row.supporter .rd-fp-quota-value { color: #c4b5fd; }

/* Beta status tag (LIVE OPEN BETA / IN DEVELOPMENT) */
.rd-fp-status {
  font-family: var(--rd-font-mono);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #c4b5fd;
  margin-top: 0.15rem;
  display: inline-block;
}
.rd-fp-status.dev { color: #fbbf24; }

/* ============================================================
   Hero accent phone — small splash mockup next to text in BC/Influence heros
   Desktop: 2-col grid (text | small phone + caption)
   Mobile: text stacks; phone hidden; compact horizontal strip shown instead
   ============================================================ */
.rd-hero-grid {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2.5rem;
  align-items: start;
}
@media (max-width: 767px) {
  .rd-hero-grid { grid-template-columns: 1fr; }
}

/* Desktop phone column */
.rd-hero-phone-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.85rem;
  padding-top: 0.5rem;
}
@media (max-width: 767px) {
  .rd-hero-phone-col { display: none; }
}

.rd-hero-phone {
  width: 160px;
  aspect-ratio: 9 / 19;
  background: #0a0a0f;
  border: 1.5px solid rgba(255,255,255,0.08);
  border-radius: 28px;
  padding: 4px;
  box-shadow: 0 10px 40px -5px rgba(0,0,0,0.5);
  text-decoration: none;
  display: block;
  transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}
body.has-mouse .rd-hero-phone:hover {
  transform: translateY(-4px);
  box-shadow: 0 18px 50px -5px rgba(0,0,0,0.6);
  border-color: var(--rd-accent-border);
}
.rd-hero-phone-screen {
  width: 100%;
  height: 100%;
  background: linear-gradient(135deg, #000 0%, #0a0a1a 50%, #000 100%);
  border-radius: 22px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  position: relative;
}
.rd-hero-splash-emoji {
  font-size: 2.6rem;
  line-height: 1;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.25));
  animation: rdHeroSplashPulse 2.6s ease-in-out infinite;
}
@keyframes rdHeroSplashPulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06); }
}
.rd-hero-splash-title {
  margin-top: 0.75rem;
  font-size: 0.82rem;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rd-hero-splash-subtitle {
  margin-top: 0.25rem;
  font-size: 0.55rem;
  color: rgba(255,255,255,0.45);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.rd-hero-phone-cap {
  font-family: var(--rd-font-mono);
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-accent);
  text-decoration: none;
  transition: opacity 0.2s;
}
body.has-mouse .rd-hero-phone-cap:hover { opacity: 0.8; }

/* Mobile-only compact strip — same splash gradient as desktop phone */
.rd-hero-strip {
  display: none;
  margin-top: 1.5rem;
  padding: 0.9rem 1rem;
  background: linear-gradient(135deg, #000 0%, #0a0a1a 50%, #000 100%);
  border: 1px solid #000;
  border-radius: 0.5rem;
  text-decoration: none;
  align-items: center;
  gap: 0.85rem;
}
@media (max-width: 767px) {
  .rd-hero-strip { display: flex; }
}
.rd-hero-strip-icon {
  font-size: 1.5rem;
  line-height: 1;
  flex-shrink: 0;
  filter: drop-shadow(0 0 8px rgba(255,255,255,0.2));
}
.rd-hero-strip-title {
  flex: 1;
  font-weight: 700;
  color: #fff;
  font-size: 0.9rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.rd-hero-strip-cta {
  font-family: var(--rd-font-mono);
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--rd-accent);
  flex-shrink: 0;
}

/* Feedings variant — sky-blue splash with ringing bell (matches quickboot.js) */
.rd-hero-phone.feedings .rd-hero-phone-screen {
  background: #00baff;
}
.rd-hero-phone.feedings .rd-hero-splash-emoji {
  animation: rdHeroRingBell 0.8s ease-in-out infinite;
  transform-origin: top center;
  filter: drop-shadow(0 0 10px rgba(255,255,255,0.35));
}
.rd-hero-phone.feedings .rd-hero-splash-title {
  color: #000;
}
.rd-hero-phone.feedings .rd-hero-splash-subtitle {
  color: rgba(0,0,0,0.55);
}
@keyframes rdHeroRingBell {
  0%, 100% { transform: rotate(0deg); }
  10%  { transform: rotate(12deg); }
  20%  { transform: rotate(-10deg); }
  30%  { transform: rotate(8deg); }
  40%  { transform: rotate(-6deg); }
  50%  { transform: rotate(4deg); }
  60%  { transform: rotate(-2deg); }
  70%  { transform: rotate(1deg); }
}

/* Feedings mobile strip variant */
.rd-hero-strip.feedings {
  background: #00baff;
  border: 1px solid #000;
}
.rd-hero-strip.feedings .rd-hero-strip-icon {
  filter: drop-shadow(0 0 4px rgba(255,255,255,0.3));
}
.rd-hero-strip.feedings .rd-hero-strip-title {
  color: #000;
}
.rd-hero-strip.feedings .rd-hero-strip-cta {
  color: rgba(0,0,0,0.6);
}

/* ============================================================
   .rd-trio — three app splash tiles on landing hero right col
   ============================================================ */
.rd-trio {
  display: flex;
  flex-direction: column;
  gap: 0.85rem;
  width: 260px;
  max-width: 100%;
}

.rd-trio-tile {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  column-gap: 0.85rem;
  row-gap: 0.1rem;
  align-items: center;
  padding: 0.95rem 1.1rem;
  border-radius: var(--border-radius-md, 0.6rem);
  text-decoration: none;
  border: 1.5px solid transparent;
  width: 100%;
  box-sizing: border-box;
  transition: padding 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, background 0.35s ease;
}

.rd-trio-tile .rd-trio-emoji {
  transition: font-size 0.35s ease, filter 0.35s ease;
}

.rd-trio-title,
.rd-trio-subtitle {
  word-break: break-word;
  overflow-wrap: anywhere;
}

.rd-trio-emoji {
  grid-row: 1 / 3;
  font-size: 2rem;
  line-height: 1;
  align-self: center;
}

.rd-trio-title {
  grid-column: 2;
  grid-row: 1;
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: 0.02em;
  line-height: 1.1;
}

.rd-trio-subtitle {
  grid-column: 2;
  grid-row: 2;
  font-family: var(--rd-font-mono);
  font-size: 0.68rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1.1;
}

/* FeeDings tile — sky-blue with rocking bell */
.rd-trio-feedings {
  background: #00baff;
  border-color: #000;
}
.rd-trio-feedings .rd-trio-emoji {
  animation: rdHeroRingBell 2.4s ease-in-out infinite;
  transform-origin: top center;
}
.rd-trio-feedings .rd-trio-title {
  color: #000;
}
.rd-trio-feedings .rd-trio-subtitle {
  color: rgba(0,0,0,0.6);
}
body.has-mouse .rd-trio-feedings:hover {
  padding-top: 2.8rem;
  padding-bottom: 2.8rem;
  box-shadow: 0 12px 40px rgba(0,186,255,0.55), 0 0 60px rgba(0,186,255,0.25);
}
body.has-mouse .rd-trio-feedings:hover .rd-trio-emoji {
  font-size: 3.2rem;
  filter: drop-shadow(0 0 18px rgba(255,255,255,0.55));
}

/* BenchCalc tile — dark with teal glow */
.rd-trio-benchcalc {
  background: linear-gradient(135deg, #0a1a17, #0d2a23);
  border-color: rgba(45,212,191,0.35);
}
.rd-trio-benchcalc .rd-trio-emoji {
  filter: drop-shadow(0 0 10px rgba(45,212,191,0.5));
  animation: rdTrioPulse 2.8s ease-in-out infinite;
}
.rd-trio-benchcalc .rd-trio-title {
  color: #fff;
}
.rd-trio-benchcalc .rd-trio-subtitle {
  color: #2dd4bf;
}
body.has-mouse .rd-trio-benchcalc:hover {
  padding-top: 2.8rem;
  padding-bottom: 2.8rem;
  border-color: rgba(45,212,191,0.9);
  box-shadow: 0 12px 40px rgba(45,212,191,0.45), 0 0 60px rgba(45,212,191,0.2);
}
body.has-mouse .rd-trio-benchcalc:hover .rd-trio-emoji {
  font-size: 3.2rem;
  filter: drop-shadow(0 0 20px rgba(45,212,191,0.85));
}

/* Influence tile — dark with gold glow */
.rd-trio-influence {
  background: linear-gradient(135deg, #1a1700, #2a2400);
  border-color: rgba(255,215,0,0.3);
}
.rd-trio-influence .rd-trio-emoji {
  filter: drop-shadow(0 0 10px rgba(255,215,0,0.6));
  animation: rdTrioSparkle 2.2s ease-in-out infinite;
}
.rd-trio-influence .rd-trio-title {
  color: #fff;
}
.rd-trio-influence .rd-trio-subtitle {
  color: #FFD700;
}
body.has-mouse .rd-trio-influence:hover {
  padding-top: 2.8rem;
  padding-bottom: 2.8rem;
  border-color: rgba(255,215,0,0.9);
  box-shadow: 0 12px 40px rgba(255,215,0,0.45), 0 0 60px rgba(255,215,0,0.2);
}
body.has-mouse .rd-trio-influence:hover .rd-trio-emoji {
  font-size: 3.2rem;
  filter: drop-shadow(0 0 20px rgba(255,215,0,0.95));
}

@keyframes rdTrioPulse {
  0%, 100% { transform: scale(1); }
  50%      { transform: scale(1.08); }
}

@keyframes rdTrioSparkle {
  0%, 100% { transform: rotate(0deg) scale(1); }
  25%      { transform: rotate(8deg) scale(1.06); }
  75%      { transform: rotate(-8deg) scale(1.06); }
}

/* ============================================================
   BattleCanvas controls
   ============================================================ */
.bc-ctrl {
  background: var(--rd-bg-card);
  border: 1px solid var(--rd-border);
  color: var(--rd-text);
  padding: 0.5rem 1rem;
  border-radius: 0.4rem;
  font-family: var(--rd-font-mono);
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s, transform 0.15s;
}
body.has-mouse .bc-ctrl:hover {
  background: var(--rd-bg-deep);
  border-color: var(--rd-accent);
}
.bc-ctrl.active {
  border-color: var(--rd-accent);
  background: var(--rd-accent-dim);
  color: var(--rd-accent);
}
.bc-ctrl-reset {
  border-color: rgba(248,113,113,0.4);
  color: #f87171;
}
body.has-mouse .bc-ctrl-reset:hover {
  border-color: #f87171;
  background: rgba(248,113,113,0.12);
}