/*
 * ============================================================
 * sections.css — Styles specific to each page section
 * ============================================================
 *
 * WHAT THIS FILE DOES:
 *   - Styles the individual content sections: Modes, Products, Download,
 *     OS Overview, Services, Features, Donations, Support, Verify, Connect.
 *   - Each section has its own clearly labeled block below.
 *
 * EDITING TIPS (no CSS knowledge required):
 *   - All visible text in these sections (titles, descriptions, bullet lists)
 *     comes from content.js — edit that file to change the words.
 *   - To change the green glow behind the Donations section, edit
 *     .donation-section::before and its radial-gradient colors.
 *   - To change icon sizes in the Modes section, edit .mode-icon-wrap dimensions.
 *   - To change the service card icon sizes, edit .service-icon-wrap dimensions.
 *   - Bullet point dots are the ::before pseudo-elements — edit their size/color there.
 *
 * DEPENDENCIES:
 *   - Uses CSS variables from base.css.
 *   - HTML is rendered by app.js (renderModes, renderServices, etc.).
 *   - Content (text, links, lists) is in content.js.
 * ============================================================
 */

/* ════════════════════════════════════════════════════════════
   MODES SECTION (Three Ways To Use It)
   ════════════════════════════════════════════════════════════ */

.mode-head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
  min-width: 0;
}

/* Icon wrapper shared between modes and services */
.mode-icon-wrap,
.service-icon-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(255,255,255,0.03);
  border: 1px solid var(--border);
  border-radius: 18px;
  overflow: hidden;
  flex: 0 0 auto;
}

.mode-icon-wrap {
  width: 68px;
  height: 68px;
  padding: 12px;
}

.mode-icon {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 44px;
  max-height: 44px;
  object-fit: contain;
}

/* Small badge pill inside mode and donation cards */
.mode-badge,
.donation-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(66,243,154,0.12);
  color: var(--accent-strong);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.mode-card h3,
.donation-card h3,
.platform-card h3 {
  margin: 0;
  line-height: 1.2;
}

.mode-description,
.donation-description,
.download-note {
  color: var(--muted);
}

/* ── Shared bullet list styles (modes, donations, support) ── */
.mode-list,
.donation-list,
.support-list,
.spec-list {
  padding: 0;
}

.mode-list,
.donation-list,
.support-list {
  list-style: none;
}

.mode-list,
.donation-list {
  margin: 18px 0 0;
}

.mode-list li,
.donation-list li,
.support-list li {
  position: relative;
}

.mode-list li,
.donation-list li {
  padding: 10px 0 10px 22px;
  border-bottom: 1px solid rgba(123,255,192,0.06);
}

/* Green dot bullet before each list item */
.mode-list li::before,
.donation-list li::before,
.support-list li::before {
  content: "";
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
  position: absolute;
  left: 0;
}

.mode-list li::before,
.donation-list li::before {
  top: 18px;
}

/* ── "Included in every role" strip (above mode cards) ───── */
.modes-included {
  margin: 12px 0 36px;
  padding: 18px 20px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 14px;
  text-align: center;
}

.modes-included-label {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 14px;
}

.modes-included-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 18px 28px;
}

.modes-included-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  min-width: 120px;
  max-width: 200px;
}

.modes-included-icon {
  width: 36px;
  height: 36px;
  object-fit: contain;
}

.modes-included-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #d0dbd6;
}

.modes-included-desc {
  font-size: 0.8rem;
  color: var(--muted);
  line-height: 1.35;
}

.modes-included-text {
  margin: 14px 0 0;
  font-size: 0.85rem;
  color: var(--muted);
  max-width: 640px;
  margin-left: auto;
  margin-right: auto;
}

@media (max-width: 640px) {
  .modes-included-list {
    gap: 14px 18px;
  }
  .modes-included-item {
    min-width: 100px;
  }
}

/* ── Hardware block (definition list) ──────────────────────── */
.mode-hardware {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 12px;
  row-gap: 6px;
  margin: 18px 0 0;
  padding: 14px 16px;
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.mode-hardware::before {
  content: "MINIMUM HARDWARE";
  grid-column: 1 / -1;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-strong);
  margin-bottom: 4px;
}

.mode-hardware dt {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--muted);
  white-space: nowrap;
}

.mode-hardware dd {
  font-size: 0.78rem;
  color: #d0dbd6;
  margin: 0;
  line-height: 1.4;
}

/* ── Path label ─────────────────────────────────────────────── */
.mode-path {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.mode-path-label {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-strong);
  white-space: nowrap;
}

.mode-path-value {
  font-size: 0.85rem;
  color: var(--muted);
}

/* ── Arrow between Node and Server+Desktop cards ────────────── */
.modes-pair-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 28px;
  font-size: 1.4rem;
  color: var(--accent);
  user-select: none;
}

/* ── Two-track card sizing: pair cards share equal width ────── */
.modes-track-pair .mode-card {
  flex: 1;
  min-width: 0;
}

/* ── Footnote below the cards ───────────────────────────────── */
.modes-footnote {
  margin-top: 32px;
  padding: 20px 24px;
  border-radius: 14px;
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.015);
  font-size: 0.88rem;
  color: var(--muted);
  line-height: 1.6;
  max-width: 720px;
}

.modes-footnote strong {
  color: #d0dbd6;
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   DOWNLOAD SECTION
   ════════════════════════════════════════════════════════════ */

.callout,
.support-panel,
.verify-box {
  padding: 24px;
}

.platform-card ol {
  margin: 14px 0 0;
  padding-left: 20px;
  color: var(--muted);
}

.platform-card li + li {
  margin-top: 10px;
}

.diy-build-section {
  margin-top: 48px;
  padding-top: 40px;
  border-top: 1px solid var(--border);
}

.diy-build-section > h3 {
  font-size: 1.4rem;
  margin-bottom: 8px;
}

.diy-build-section > p {
  color: var(--muted);
  margin-bottom: 24px;
}

/* ════════════════════════════════════════════════════════════
   SERVICES SECTION
   ════════════════════════════════════════════════════════════ */

.service-card {
  padding: 18px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  min-width: 0;
}

.service-card-top {
  display: flex;
  align-items: center;
  gap: 14px;
  min-width: 0;
}

.service-desc {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.45;
}

.service-icon-wrap {
  width: 52px;
  height: 52px;
  padding: 10px;
}

.service-icon {
  display: block;
  width: 100%;
  height: 100%;
  max-width: 32px;
  max-height: 32px;
  object-fit: contain;
}

.service-card span {
  font-weight: 600;
  line-height: 1.2;
}

.service-group {
  margin-top: 56px;
}

.service-group:first-of-type {
  margin-top: 0;
}

.service-group-head {
  margin-bottom: 20px;
  max-width: 760px;
}

.service-group-head h3 {
  margin: 6px 0 8px;
  font-size: clamp(1.4rem, 2.2vw, 1.9rem);
  line-height: 1.2;
}

.service-group-head p {
  margin: 0;
  color: var(--muted);
}

.services-foundation {
  margin-top: 44px;
  padding-top: 28px;
  border-top: 1px solid var(--border);
}

.services-foundation .service-grid {
  gap: 16px;
}

.services-foundation .service-card {
  padding: 15px;
  background: linear-gradient(180deg, rgba(255,255,255,0.012), rgba(255,255,255,0));
  box-shadow: none;
}

.services-foundation .service-icon-wrap {
  width: 44px;
  height: 44px;
  padding: 8px;
}

.services-foundation .service-icon {
  max-width: 28px;
  max-height: 28px;
}

/* ════════════════════════════════════════════════════════════
   TWO PATHS SECTION
   ════════════════════════════════════════════════════════════ */

.two-paths-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
}

.two-paths-card {
  background: linear-gradient(180deg, rgba(255,255,255,0.02), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 28px;
}

.two-paths-badge {
  display: inline-block;
  margin-bottom: 10px;
  padding: 6px 11px;
  border-radius: 999px;
  background: rgba(255,255,255,0.04);
  color: var(--muted);
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.two-paths-card h3 {
  margin: 0 0 10px;
  line-height: 1.2;
}

.two-paths-card p {
  margin: 0 0 22px;
  color: var(--muted);
}

.two-paths-card--primary {
  border-color: rgba(66,243,154,0.34);
  box-shadow: 0 0 0 1px rgba(66,243,154,0.15), 0 14px 32px rgba(66,243,154,0.08);
  background: linear-gradient(180deg, rgba(66,243,154,0.07), rgba(255,255,255,0.015));
}

.two-paths-card--primary .two-paths-badge {
  background: rgba(66,243,154,0.12);
  color: var(--accent-strong);
}

.two-paths-card--invite {
  border-color: var(--border);
}

/* ════════════════════════════════════════════════════════════
   FEATURES SECTION
   ════════════════════════════════════════════════════════════ */

.feature-tile { padding: 18px; }

/* ════════════════════════════════════════════════════════════
   INFO / THREE-UP CARDS (used in OS and Support sections)
   ════════════════════════════════════════════════════════════ */

.info-card { padding: 22px; }

/* ════════════════════════════════════════════════════════════
   SUPPORT SECTION
   ════════════════════════════════════════════════════════════ */

.support-list {
  margin: 18px 0 0;
}

.support-list li {
  padding: 10px 0 10px 22px;
  color: var(--text);
}

.support-list li::before {
  top: 17px;
}

/* ════════════════════════════════════════════════════════════
   VERIFY SECTION
   ════════════════════════════════════════════════════════════ */

.verify-links {
  display: grid;
  gap: 16px;
}

.link-card { padding: 20px; }

.link-card strong {
  display: block;
  margin-bottom: 8px;
}

.link-card span { color: var(--muted); }

/* ════════════════════════════════════════════════════════════
   DONATIONS SECTION
   ════════════════════════════════════════════════════════════ */

/* Ambient green glow background effect */
.donation-section {
  position: relative;
  overflow: hidden;
}

.donation-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top right, rgba(66,243,154,0.09), transparent 28%),
    radial-gradient(circle at bottom left, rgba(40,217,120,0.07), transparent 24%);
  pointer-events: none;
}

/* Featured donation card gets a green-tinted background */
.donation-card.featured {
  background:
    linear-gradient(180deg, rgba(66,243,154,0.08), rgba(255,255,255,0.02)),
    linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.01));
}

.donation-amount {
  margin: 10px 0 0;
  color: var(--accent-strong);
  font-size: 1.4rem;
  font-weight: 800;
}

.donation-specs {
  margin-bottom: 24px;
}

/* ════════════════════════════════════════════════════════════
   CONNECT SECTION
   ════════════════════════════════════════════════════════════ */

.connect-section { padding-bottom: 100px; }

/* ════════════════════════════════════════════════════════════
   HUB SECTION
   ════════════════════════════════════════════════════════════ */

.hub-section {
  position: relative;
  overflow: hidden;
}

/* Subtle ambient glow to echo the hero energy */
.hub-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at bottom right, rgba(66,243,154,0.07), transparent 30%),
    radial-gradient(circle at top left, rgba(40,217,120,0.05), transparent 30%);
  pointer-events: none;
}

/* Stacked showcase layout */
.hub-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  z-index: 1;
}

.hub-showcase .section-heading {
  max-width: 720px;
  margin-bottom: 48px;
}

/* Hero image — clickable, full content-column width */
.hub-hero-btn {
  display: block;
  width: 100%;
  max-width: 1100px;
  background: none;
  border: none;
  padding: 0;
  cursor: zoom-in;
  margin: 0 auto 48px;
  border-radius: var(--radius);
  /* focus ring for accessibility */
  outline-offset: 4px;
}

.hub-hero-img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 9; /* supported by all modern browsers (Chrome 88+, Firefox 89+, Safari 15+) */
  object-fit: contain;
  border-radius: var(--radius);
  border: 1px solid rgba(66,243,154,0.28);
  box-shadow:
    0 0 0 1px rgba(66,243,154,0.06),
    0 0 40px rgba(66,243,154,0.14),
    0 0 90px rgba(40,217,120,0.08);
  transition: box-shadow 0.25s ease, border-color 0.25s ease;
}

.hub-hero-btn:hover .hub-hero-img,
.hub-hero-btn:focus-visible .hub-hero-img {
  border-color: rgba(66,243,154,0.50);
  box-shadow:
    0 0 0 1px rgba(66,243,154,0.10),
    0 0 50px rgba(66,243,154,0.22),
    0 0 110px rgba(40,217,120,0.12);
}

/* Feature cards: 4 columns on desktop */
.hub-features {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
  margin: 0 0 40px;
  width: 100%;
  max-width: 1100px;
}

.hub-feature-item {
  background: rgba(255,255,255,0.025);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 18px 20px;
}

.hub-feature-item strong {
  display: block;
  margin-bottom: 6px;
  font-size: 0.95rem;
  color: var(--text);
}

.hub-feature-item p {
  margin: 0;
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

/* CTA button row */
.hub-cta {
  text-align: center;
}

/* ── Lightbox overlay ──────────────────────────────────────── */
.hub-lightbox {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 1000;
  background: rgba(0,0,0,0.88);
  align-items: center;
  justify-content: center;
  padding: 24px;
}

.hub-lightbox--open {
  display: flex;
}

.hub-lightbox-img {
  display: block;
  max-width: 100%;
  max-height: calc(100vh - 80px);
  width: auto;
  height: auto;
  border-radius: var(--radius);
  border: 1px solid rgba(66,243,154,0.30);
  box-shadow: 0 0 60px rgba(66,243,154,0.18);
}

.hub-lightbox-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,0.14);
  border-radius: 50%;
  color: var(--text);
  font-size: 1.4rem;
  line-height: 1;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s, border-color 0.2s;
}

.hub-lightbox-close:hover,
.hub-lightbox-close:focus-visible {
  background: rgba(66,243,154,0.12);
  border-color: rgba(66,243,154,0.35);
  outline: none;
}

/* ════════════════════════════════════════════════════════════
   ROYAL MEMBERSHIP + MEMBERSHIP FORM
   ════════════════════════════════════════════════════════════ */

.royal-tier-section {
  position: relative;
  overflow: hidden;
}

.royal-tier-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at top left, rgba(66,243,154,0.09), transparent 30%),
    radial-gradient(circle at bottom right, rgba(40,217,120,0.06), transparent 26%);
  pointer-events: none;
}

.royal-panel {
  position: relative;
  z-index: 1;
}

.royal-panel p {
  margin-top: 0;
}

.membership-form-wrap {
  background: linear-gradient(180deg, rgba(255,255,255,0.018), rgba(255,255,255,0.008));
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

.membership-form-wrap {
  padding: 24px;
}

/* ════════════════════════════════════════════════════════════
   AGREEMENT MODAL
   ════════════════════════════════════════════════════════════ */

.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal[hidden] {
  display: none !important;
}

.modal-content {
  background: var(--bg-surface, #1a1a1a);
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 600px;
  width: 90%;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.modal-body p {
  color: var(--muted);
  margin: 0;
}

.close-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: var(--muted);
}

.close-modal:hover {
  color: var(--text);
}

button.text-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

button.text-link:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.membership-form {
  display: grid;
  gap: 14px;
}

.membership-form label {
  font-weight: 600;
}

.membership-form input[type="text"] {
  min-height: 48px;
  padding: 0 14px;
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-strong);
  border-radius: 12px;
  color: var(--text);
}

.check-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  color: var(--muted);
  font-weight: 500;
}

.check-row input {
  margin-top: 3px;
}

.form-note,
.form-confirmation {
  margin: 0;
  color: var(--muted);
}

.form-confirmation {
  color: var(--accent-strong);
  font-weight: 600;
}

/* ════════════════════════════════════════════════════════════
   AGREEMENT MODAL
   ════════════════════════════════════════════════════════════ */

.modal {
  position: fixed;
  z-index: 1000;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  align-items: center;
  justify-content: center;
}

.modal[hidden] {
  display: none !important;
}

.modal-content {
  background: var(--bg-surface, #1a1a1a);
  padding: 30px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  max-width: 640px;
  width: 90%;
  position: relative;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}

.modal-body {
  max-height: 60vh;
  overflow-y: auto;
  color: var(--muted);
  line-height: 1.7;
}

.modal-body h1,
.modal-body h2,
.modal-body h3 {
  color: var(--text);
  margin-top: 1.4em;
  margin-bottom: 0.4em;
}

.modal-body h1 {
  font-size: 1.1rem;
}

.modal-body h2 {
  font-size: 1rem;
}

.modal-body h3 {
  font-size: 0.95rem;
}

.modal-body ul {
  padding-left: 1.4em;
}

.close-modal {
  position: absolute;
  top: 15px;
  right: 20px;
  font-size: 24px;
  cursor: pointer;
  color: var(--muted);
  line-height: 1;
}

.close-modal:hover {
  color: var(--text);
}

button.text-link {
  background: none;
  border: none;
  padding: 0;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
  font-family: inherit;
  font-size: inherit;
}

/* ════════════════════════════════════════════════════════════
   ROYAL QUESTIONS LIST
   ════════════════════════════════════════════════════════════ */

.royal-questions {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
}

.royal-questions li {
  line-height: 2;
  font-size: 1.05rem;
  color: var(--text);
}

.royal-questions .q-mark {
  color: var(--accent-strong);
  font-weight: 700;
}

.royal-offer {
  color: var(--muted);
  font-style: italic;
  margin-bottom: 14px;
}

/* ── Build / Download section ───────────────────────────── */
.build-repo-link {
  margin: 0 0 32px;
}

.platform-tabs {
  display: flex;
  gap: 8px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.platform-tab {
  padding: 8px 20px;
  border-radius: 100px;
  border: 1px solid var(--border-strong);
  background: transparent;
  color: var(--muted);
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}

.platform-tab:hover {
  border-color: var(--accent);
  color: var(--text);
}

.platform-tab.active {
  background: var(--accent-deep);
  border-color: var(--accent);
  color: var(--text);
}

.platform-panel {
  display: none;
}

.platform-panel.active {
  display: block;
}

.platform-panel-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 20px;
}

.platform-panel-header h3 {
  margin: 0;
  font-size: 1.3rem;
}

.platform-note {
  padding: 14px 18px;
  background: var(--surface-2);
  border-left: 3px solid var(--accent-deep);
  border-radius: var(--radius-sm);
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
  line-height: 1.6;
}

.build-steps {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 32px;
  counter-reset: build-step;
}

.build-step {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.step-label {
  padding: 12px 18px;
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--text);
  border-bottom: 1px solid var(--border);
  counter-increment: build-step;
  display: flex;
  align-items: center;
  gap: 10px;
}

.step-label::before {
  content: counter(build-step);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--accent-deep);
  color: var(--text);
  font-size: 0.75rem;
  font-weight: 800;
  flex-shrink: 0;
}

.step-cmd {
  margin: 0;
  padding: 14px 18px;
  background: #0a0f0c;
  font-family: "SF Mono", "Fira Mono", "Consolas", monospace;
  font-size: 0.82rem;
  color: var(--accent-strong);
  line-height: 1.7;
  overflow-x: auto;
  white-space: pre;
}

.step-cmd code {
  background: none;
  padding: 0;
  font-size: inherit;
  color: inherit;
}

.build-trust-note {
  padding: 16px 20px;
  background: linear-gradient(135deg, rgba(40,217,120,0.06), rgba(40,217,120,0.02));
  border: 1px solid rgba(40,217,120,0.15);
  border-radius: var(--radius-sm);
  font-size: 0.95rem;
  color: var(--text);
  margin-bottom: 12px;
}

.build-flash-note {
  font-size: 0.85rem;
  color: var(--muted);
  margin: 0;
}

/* ════════════════════════════════════════════════════════════
   ROYAL BRIDGE SECTION (pivot from DIY to Royal Membership)
   ════════════════════════════════════════════════════════════ */

.royal-bridge-section {
  position: relative;
  overflow: hidden;
}

.royal-bridge-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(circle at center, rgba(66,243,154,0.07), transparent 60%);
  pointer-events: none;
}

.royal-bridge-inner {
  position: relative;
  z-index: 1;
  padding: 48px 32px;
  border: 1px solid rgba(123,255,192,0.18);
  border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(66,243,154,0.05), rgba(255,255,255,0.01));
  box-shadow: var(--shadow);
  text-align: center;
}

.royal-bridge-inner h2 {
  margin: 12px 0 18px;
  font-size: clamp(1.5rem, 3vw, 2.2rem);
}

.royal-bridge-text {
  color: var(--muted);
  max-width: 640px;
  margin: 0 auto 28px;
  font-size: 1.05rem;
  line-height: 1.7;
}

/* ════════════════════════════════════════════════════════════
   ROYAL MEMBERSHIP — updated layout styles
   ════════════════════════════════════════════════════════════ */

.royal-split-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;
  align-items: start;
  margin-bottom: 40px;
}

@media (max-width: 800px) {
  .royal-split-layout {
    grid-template-columns: 1fr;
    gap: 24px;
  }
}

.royal-intro {
  color: var(--muted);
  font-size: 1.1rem;
  line-height: 1.7;
  margin: 0 0 32px;
}

.royal-reassurance {
  margin: 0 0 40px;
  padding: 24px 28px;
  background: linear-gradient(135deg, rgba(40,217,120,0.08), rgba(40,217,120,0.02));
  border: 1px solid rgba(40,217,120,0.2);
  border-radius: var(--radius-sm);
}

.royal-reassurance strong {
  display: block;
  margin-bottom: 14px;
  font-size: 1.05rem;
  color: var(--accent-strong);
}

.royal-reassurance ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  gap: 10px;
}

.royal-reassurance li {
  position: relative;
  padding-left: 22px;
  color: var(--text);
  line-height: 1.5;
}

.royal-reassurance li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 7px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--accent);
}

.royal-features {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 18px;
  margin: 0 0 40px;
}

.royal-feature-card {
  padding: 22px;
  background: linear-gradient(180deg, rgba(255,255,255,0.022), rgba(255,255,255,0.01));
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow);
  transition: border-color 0.2s;
}

.royal-feature-card:hover {
  border-color: rgba(123,255,192,0.22);
}

.royal-feature-card strong {
  display: block;
  margin-bottom: 10px;
  font-size: 1rem;
  color: var(--text);
}

.royal-feature-card p {
  margin: 0;
  color: var(--muted);
  font-size: 0.9rem;
  line-height: 1.6;
}

.royal-closing {
  text-align: center;
  max-width: 600px;
  margin: 0 auto;
  padding-top: 8px;
}

.royal-note {
  color: var(--muted);
  font-size: 0.9rem;
  margin-bottom: 20px;
}