/* ============================================================
   assets/css/landing.css — SmartSwap public marketing pages
   ------------------------------------------------------------
   Used by index.php and about.php. Loaded via head.php's $styles.
   Part 1 is the original landing <style> block (moved verbatim).
   Part 2 adds semantic classes for the card / list / label
   structures that were previously repeated as inline styles.
   ============================================================ */

/* ─────────────────────────────────────────────────────────────
   PART 1 — original landing styles (moved from index.php <style>)
   ───────────────────────────────────────────────────────────── */
.landing-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 64px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border2);
}
.landing-nav .logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-serif); font-size: 1.35rem; font-weight: 700;
  color: var(--c-text); text-decoration: none; letter-spacing: -0.5px;
}
.landing-nav .logo img { height: 32px; width: auto; }
.landing-nav .nav-links { display: flex; align-items: center; gap: 24px; }
.landing-nav .nav-links a { font-size: 14px; font-weight: 500; color: var(--c-text2); text-decoration: none; }
.landing-nav .nav-links a:hover { color: var(--c-text); }
.landing-nav .nav-links a.btn-primary { color: #fff !important; }

.lp-section { padding: 80px 0; }
.lp-section-alt { padding: 80px 0; background: var(--c-surface); }
.lp-container { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

.section-eyebrow-lp {
  font-size: 11px; font-weight: 600; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--c-accent); margin-bottom: 12px;
}
.lp-title { font-family: var(--font-serif); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 18px; }
.lp-sub { font-size: 1.05rem; color: var(--c-text2); line-height: 1.75; max-width: 560px; margin-bottom: 32px; }

/* Hero */
.hero-lp {
  padding: 80px 0 60px;
  background: var(--c-bg);
  position: relative; overflow: hidden;
}
.hero-lp::before {
  content: '';
  position: absolute; top: -60px; right: -80px;
  width: 480px; height: 480px; border-radius: 50%;
  background: radial-gradient(circle, rgba(45,106,79,0.07) 0%, transparent 70%);
  pointer-events: none;
}
.hero-lp::after {
  content: '';
  position: absolute; bottom: -40px; left: -60px;
  width: 320px; height: 320px; border-radius: 50%;
  background: radial-gradient(circle, rgba(183,228,199,0.1) 0%, transparent 70%);
  pointer-events: none;
}
.hero-grid {
  display: grid; grid-template-columns: 1fr 440px; gap: 64px; align-items: center;
  position: relative; z-index: 1;
}
@media (max-width: 880px) { .hero-grid { grid-template-columns: 1fr; } .hero-right { display: none; } }

.hero-badge {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--c-accent); background: rgba(45,106,79,0.08);
  border: 1px solid rgba(45,106,79,0.2); padding: 5px 12px; border-radius: 99px;
  margin-bottom: 18px;
}
.hero-badge::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--c-accent); }

.hero-title-lp {
  font-family: var(--font-serif); font-size: clamp(2.2rem, 4.5vw, 3.4rem);
  font-weight: 700; line-height: 1.15; letter-spacing: -0.02em;
  color: var(--c-text); margin-bottom: 20px;
}
.hero-title-lp em { font-style: italic; color: var(--c-accent2); }

/* Breathwork demo card in hero */
.demo-card {
  background: var(--c-surface); border-radius: 20px;
  border: 1px solid var(--c-border2); box-shadow: 0 8px 32px rgba(0,0,0,0.08);
  padding: 32px 24px; text-align: center;
}
.demo-card-label { font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text3); margin-bottom: 20px; }
.demo-presets-lp { display: flex; gap: 6px; justify-content: center; margin-bottom: 16px; flex-wrap: wrap; }

/* Swap cards */
.swap-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 14px; }
.swap-card-lp {
  background: var(--c-surface); border-radius: 16px;
  border: 1px solid var(--c-border2); padding: 20px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.05);
  transition: box-shadow 0.2s, transform 0.2s;
}
.swap-card-lp:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.08); transform: translateY(-2px); }

/* Feature grid */
.feature-grid-lp { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px,1fr)); gap: 14px; }
.feature-card-lp {
  background: var(--c-surface); border-radius: 16px;
  border: 1px solid var(--c-border2); padding: 24px;
  transition: box-shadow 0.2s, transform 0.15s;
}
.feature-card-lp:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.07); transform: translateY(-2px); }
.feature-card-lp.featured-card {
  grid-column: span 2; background: var(--c-accent); color: #fff;
}
@media (max-width: 640px) { .feature-card-lp.featured-card { grid-column: span 1; } }
.feature-card-lp.featured-card h3,
.feature-card-lp.featured-card p,
.feature-card-lp.featured-card li { color: rgba(255,255,255,0.9); }

/* Pricing */
.pricing-grid-lp { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 18px; align-items: start; }
.pricing-card-lp {
  background: var(--c-surface); border-radius: 20px;
  border: 1px solid var(--c-border); padding: 28px;
  position: relative;
}
.pricing-card-lp.featured {
  border: 2px solid var(--c-accent);
  box-shadow: 0 0 0 4px rgba(45,106,79,0.08);
  transform: scale(1.02);
}
@media (max-width: 700px) { .pricing-card-lp.featured { transform: none; } }
.pricing-badge-lp {
  position: absolute; top: -13px; left: 50%; transform: translateX(-50%);
  background: var(--c-accent); color: #fff; font-size: 11px; font-weight: 700;
  padding: 3px 16px; border-radius: 99px; white-space: nowrap;
}
.price-lp {
  font-family: var(--font-serif); font-size: 2.8rem; font-weight: 700; color: var(--c-text);
}

/* Testimonials */
.testimonial-grid-lp { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 16px; }
.testimonial-lp {
  background: var(--c-surface); border-radius: 16px; padding: 24px;
  border: 1px solid var(--c-border2);
}

/* FAQ */
.faq-item-lp { padding: 20px 0; border-bottom: 1px solid var(--c-border2); }
.faq-q-lp { font-family: var(--font-serif); font-size: 1rem; font-weight: 700; color: var(--c-text); margin-bottom: 8px; }
.faq-a-lp { font-size: 14px; color: var(--c-text2); line-height: 1.7; }

/* Science callout */
.science-section { background: var(--c-text); color: #fff; padding: 80px 0; }
.nerve-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: center; }
@media (max-width:700px) { .nerve-grid { grid-template-columns: 1fr; gap: 40px; } }

/* Footer */
.lp-footer { background: var(--c-text); color: rgba(255,255,255,0.5); padding: 48px 0 24px; border-top: 1px solid rgba(255,255,255,0.06); }
.lp-footer .logo { color: #fff; }
.lp-footer .logo span { color: var(--c-accent3); }

/* ─────────────────────────────────────────────────────────────
   PART 2 — semantic classes replacing repeated inline styles
   ───────────────────────────────────────────────────────────── */

/* Small uppercase mini-label (was repeated ~15×) */
.lp-label {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.08em; color: var(--c-text3);
}
.lp-label--accent { color: var(--c-accent); letter-spacing: 0.1em; }
.lp-label--wide   { letter-spacing: 0.12em; }

/* Section heading helper used across sections */
.lp-h2 { font-size: clamp(1.8rem, 3vw, 2.4rem); }

/* Hero mini-stats strip */
.lp-stats-strip {
  display: flex; margin-top: 36px; background: var(--c-surface);
  border-radius: 14px; border: 1px solid var(--c-border2);
  overflow: hidden; width: fit-content; max-width: 100%; flex-wrap: wrap;
}
.lp-stats-strip .div { width: 1px; background: var(--c-border2); }
.lp-mini-stat { padding: 14px 22px; text-align: center; }
.lp-mini-stat .n { font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700; color: var(--c-text); }
.lp-mini-stat .l { font-size: 11px; color: var(--c-text3); margin-top: 2px; font-weight: 500; }

/* Swap card internals */
.lp-swap-topic { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 10px; }
.lp-swap-old {
  background: var(--c-bg); border-radius: 8px; padding: 10px 12px;
  font-size: 13px; color: var(--c-text3); line-height: 1.5;
  text-decoration: line-through; text-decoration-color: rgba(0,0,0,0.15); margin-bottom: 8px;
}
.lp-swap-arrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.07em; color: var(--c-accent); text-align: center; padding: 4px 0; }
.lp-swap-new {
  background: rgba(45,106,79,0.06); border-left: 3px solid var(--c-accent);
  border-radius: 0 8px 8px 0; padding: 10px 12px; font-size: 13px; color: var(--c-text); line-height: 1.5;
}
.lp-swap-try { margin-top: 10px; padding: 8px 12px; background: rgba(45,106,79,0.04); border-radius: 6px; font-size: 12px; color: var(--c-text2); line-height: 1.5; }

/* Module cards (Practice / Track grids) */
.lp-mod-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 16px; margin-bottom: 40px; }
.lp-mod-card { background: var(--c-surface); border-radius: 14px; border: 1px solid var(--c-border2); padding: 24px; box-shadow: var(--shadow-sm); position: relative; }
.lp-mod-card.esoteric { background: linear-gradient(135deg, rgba(45,106,79,0.03), rgba(45,106,79,0.07)); border-color: rgba(45,106,79,0.18); }
.lp-mod-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.lp-mod-head .icon { font-size: 28px; }
.lp-mod-head h3 { font-size: 1rem; margin: 0 0 4px; }
.lp-mod-desc { font-size: 13px; color: var(--c-text2); line-height: 1.65; margin-bottom: 14px; }
.lp-mod-sci  { font-size: 12px; color: var(--c-text2); line-height: 1.6; margin-bottom: 12px; }
.lp-mod-flag { position: absolute; top: 14px; right: 14px; font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text3); background: var(--c-bg2); padding: 2px 8px; border-radius: 20px; }
.access-badge { font-size: 10px; padding: 2px 8px; border-radius: 20px; font-weight: 700; background: rgba(156,107,46,0.1); color: var(--c-gold); }
.access-badge.free { background: rgba(45,106,79,0.1); color: var(--c-accent); }

.lp-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.lp-tag  { font-size: 10px; background: var(--c-bg2); border-radius: 20px; padding: 3px 9px; color: var(--c-text3); }

/* Section divider row ("✦ Experimental ───") */
.lp-divider-row { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; }
.lp-divider-row .line { flex: 1; height: 1px; background: var(--c-border2); }
.lp-experimental { border-top: 1px solid var(--c-border2); padding-top: 36px; }

/* Leaderboard preview */
.lp-lb-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 16px; margin-bottom: 28px; }
.lp-stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px,1fr)); gap: 12px; margin-bottom: 32px; }
.lp-stat-tile { background: var(--c-surface); border-radius: 14px; border: 1px solid var(--c-border2); padding: 18px; text-align: center; }
.lp-stat-tile .n { font-family: var(--font-serif); font-size: 1.8rem; font-weight: 700; color: var(--c-text); }
.lp-stat-tile .l { font-size: 12px; color: var(--c-text3); margin-top: 3px; }
.lp-lb-card { background: var(--c-surface); border-radius: 16px; border: 1px solid var(--c-border2); padding: 22px; }
.lp-lb-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 16px; }
.lp-lb-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.lp-lb-rank { font-size: 14px; min-width: 20px; text-align: center; }
.lp-lb-name { flex: 1; font-size: 14px; font-weight: 500; color: var(--c-text); }
.lp-lb-val  { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; }
.lp-lb-val .u { font-size: 11px; font-family: var(--font-sans); color: var(--c-text3); }
.lp-avatar {
  width: 32px; height: 32px; border-radius: 50%; color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 600; flex-shrink: 0; background: var(--c-accent);
}

/* Pricing feature list */
.lp-plan-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text3); margin-bottom: 10px; }
.lp-price-row { display: flex; align-items: baseline; gap: 4px; margin-bottom: 4px; }
.lp-price-row .per { font-size: 14px; color: var(--c-text3); }
.lp-plan-note { font-size: 13px; color: var(--c-text3); margin-bottom: 20px; }
.lp-feat-list { list-style: none; margin-bottom: 24px; display: flex; flex-direction: column; gap: 8px; }
.lp-feat { font-size: 13px; padding-left: 22px; position: relative; color: var(--c-text2); }
.lp-feat::before { content: '✓'; position: absolute; left: 0; color: var(--c-accent); font-weight: 700; }
.lp-feat.dim { opacity: 0.65; }
.lp-feat.no  { color: var(--c-text3); }
.lp-feat.no::before { content: '–'; color: var(--c-text3); }
.lp-feat-sub { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--c-text3); padding-left: 0; list-style: none; }

/* Guru cards + steps */
.lp-guru-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px,1fr)); gap: 16px; margin-bottom: 40px; }
.lp-guru-card { background: var(--c-surface); border-radius: 16px; border: 1px solid var(--c-border2); padding: 24px; }
.lp-guru-card .ic { font-size: 2rem; margin-bottom: 14px; }
.lp-guru-card h3 { font-family: var(--font-serif); font-size: 1.05rem; margin: 0 0 10px; }
.lp-guru-card p { font-size: 13px; color: var(--c-text2); line-height: 1.7; margin: 0; }
.lp-guru-cta { background: linear-gradient(135deg, rgba(45,106,79,0.08), rgba(61,64,91,0.06)); border-color: rgba(45,106,79,0.2); display: flex; flex-direction: column; justify-content: space-between; }
.lp-howto { background: var(--c-surface); border-radius: 18px; border: 1px solid var(--c-border2); padding: 32px; margin-top: 16px; }
.lp-step { display: flex; gap: 16px; padding: 16px 0; }
.lp-step + .lp-step { border-top: 1px solid var(--c-border2); }
.lp-step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--c-accent); color: #fff; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; margin-top: 1px; }
.lp-step .t { font-weight: 600; font-size: 14px; color: var(--c-text); margin-bottom: 3px; }
.lp-step .d { font-size: 13px; color: var(--c-text2); line-height: 1.65; }

/* Nerve diagram (dark science section) */
.nerve-col { display: flex; flex-direction: column; align-items: center; }
.nerve-node { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: 12px; padding: 14px 32px; text-align: center; min-width: 180px; }
.nerve-node .n { font-family: var(--font-serif); font-size: 1.05rem; font-weight: 700; color: #fff; }
.nerve-node .s { font-size: 12px; color: rgba(255,255,255,0.45); margin-top: 2px; }
.nerve-line { width: 2px; height: 36px; background: linear-gradient(to bottom, rgba(183,228,199,0.6), rgba(183,228,199,0.2)); }
.nerve-badge { margin-top: 18px; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--c-accent3); border: 1px solid rgba(183,228,199,0.3); padding: 5px 16px; border-radius: 99px; }
.science-section .sci-eyebrow { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-accent3); margin-bottom: 12px; }
.science-section h2 { font-family: var(--font-serif); font-size: clamp(1.8rem, 3vw, 2.4rem); color: #fff; margin-bottom: 18px; }
.science-section p { color: rgba(255,255,255,0.65); line-height: 1.75; margin-bottom: 14px; }

/* Final CTA box */
.lp-final-cta { max-width: 560px; margin: 0 auto; text-align: center; background: var(--c-surface); border-radius: 20px; padding: 56px 40px; border: 1px solid var(--c-border2); box-shadow: 0 8px 32px rgba(0,0,0,0.06); position: relative; overflow: hidden; }
.lp-final-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--c-accent); }
.lp-final-cta h2 { font-family: var(--font-serif); font-size: 2rem; margin-bottom: 14px; }

/* Footer columns */
.lp-footer-top { display: flex; justify-content: space-between; gap: 40px; flex-wrap: wrap; margin-bottom: 40px; }
.lp-footer-cols { display: flex; gap: 48px; flex-wrap: wrap; }
.lp-footer-col { display: flex; flex-direction: column; gap: 8px; }
.lp-footer-col strong { color: rgba(255,255,255,0.7); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; }
.lp-footer-col a { font-size: 14px; color: rgba(255,255,255,0.45); text-decoration: none; }
.lp-footer-col a:hover { color: rgba(255,255,255,0.8); }
.lp-footer-bottom { border-top: 1px solid rgba(255,255,255,0.08); padding-top: 20px; }
.lp-footer-bottom p { font-size: 13px; }

/* Mobile padding trims */
@media (max-width: 600px) {
  .landing-nav { padding: 0 16px; }
  .lp-container { padding: 0 16px; }
  .lp-section, .lp-section-alt, .hero-lp, .science-section { padding-top: 48px; padding-bottom: 48px; }
  .landing-nav .nav-links a:not(.btn) { display: none; }
}

/* Section background helpers (alternating landing sections) */
.bg-base { background: var(--c-bg); }
.bg-alt2 { background: var(--c-bg2); }

/* ─────────────────────────────────────────────────────────────
   ABOUT PAGE — moved from about.php <style>, plus helper classes
   ───────────────────────────────────────────────────────────── */
.about-nav {
  position: sticky; top: 0; z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 32px; height: 64px;
  background: rgba(255,255,255,0.95); backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--c-border2);
}
.about-nav .logo {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-serif); font-size: 1.3rem; font-weight: 700;
  color: var(--c-text); text-decoration: none;
}
.about-nav .logo img { height: 30px; width: auto; }
.about-nav .logo .swap { color: var(--c-accent); font-weight: 400; }
.about-nav .links { display: flex; align-items: center; gap: 22px; }
.about-nav .links a { font-size: 14px; font-weight: 500; color: var(--c-text2); text-decoration: none; }
.about-nav .links a:hover { color: var(--c-text); }
.about-nav .links a.btn-primary { color: #fff !important; }

.about-wrap { max-width: 1100px; margin: 0 auto; padding: 0 32px; }

/* Hero */
.about-hero {
  padding: 72px 0 56px;
  background: var(--c-bg);
  border-bottom: 1px solid var(--c-border2);
}
.about-hero .eyebrow {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.12em; color: var(--c-accent); margin-bottom: 16px;
}
.about-hero h1 {
  font-family: var(--font-serif); font-size: clamp(2rem, 4vw, 3rem);
  font-weight: 700; line-height: 1.2; margin-bottom: 20px; color: var(--c-text);
}
.about-hero h1 em { font-style: italic; color: var(--c-accent2); }
.about-hero p {
  font-size: 1.05rem; color: var(--c-text2); line-height: 1.8; max-width: 620px;
}

/* Body sections */
.about-section { padding: 64px 0; border-bottom: 1px solid var(--c-border2); }
.about-section:last-of-type { border-bottom: none; }
.about-section h2 {
  font-family: var(--font-serif); font-size: 1.6rem; font-weight: 700;
  color: var(--c-text); margin-bottom: 20px; line-height: 1.3;
}
.about-section h2 em { font-style: italic; color: var(--c-accent2); }
.about-section p {
  font-size: 15px; color: var(--c-text2); line-height: 1.85; margin-bottom: 18px;
}
.about-section p strong { color: var(--c-text); font-weight: 600; }
.about-section p:last-child { margin-bottom: 0; }
.about-subhead { font-family: var(--font-serif); font-size: 1.1rem; font-weight: 700; margin: 28px 0 16px; }

/* Pull quote */
.pull-quote {
  border-left: 3px solid var(--c-accent);
  border-radius: 0 12px 12px 0;
  background: rgba(45,106,79,0.05);
  padding: 20px 24px; margin: 28px 0;
  font-family: var(--font-serif); font-size: 1.15rem; font-style: italic;
  color: var(--c-text); line-height: 1.65;
}
.pull-quote cite {
  display: block; margin-top: 10px; font-size: 12px; font-style: normal;
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--c-text3); font-family: var(--font-sans);
}

/* Principle cards */
.principle-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 28px 0;
}
@media (max-width: 580px) { .principle-grid { grid-template-columns: 1fr; } }
.principle-card {
  background: var(--c-surface); border-radius: 16px; padding: 22px;
  border: 1px solid var(--c-border2);
}
.principle-card .icon { font-size: 28px; margin-bottom: 12px; display: block; }
.principle-card h3 {
  font-family: var(--font-serif); font-size: 1rem; font-weight: 700;
  color: var(--c-text); margin-bottom: 8px;
}
.principle-card p { font-size: 13px; color: var(--c-text2); line-height: 1.7; margin: 0; }

/* Roadmap */
.roadmap-head { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--c-text3); margin-bottom: 16px; }
.roadmap-item {
  display: flex; gap: 16px; align-items: flex-start; margin-bottom: 20px;
}
.roadmap-badge {
  flex-shrink: 0; padding: 4px 14px; border-radius: 99px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em;
  text-transform: uppercase; margin-top: 2px; white-space: nowrap;
}
.roadmap-badge.live    { background: rgba(45,106,79,0.1); color: var(--c-accent); }
.roadmap-badge.soon    { background: rgba(212,168,83,0.12); color: var(--c-gold); }
.roadmap-badge.planned { background: var(--c-bg2); color: var(--c-text3); }
.roadmap-item strong { display: block; font-size: 14px; color: var(--c-text); margin-bottom: 3px; }
.roadmap-item span   { font-size: 13px; color: var(--c-text2); line-height: 1.6; }

/* Apply-as-Guru callout */
.about-apply { margin-top: 28px; padding: 24px; background: rgba(45,106,79,0.06); border-radius: 14px; border: 1px solid rgba(45,106,79,0.15); }
.about-apply .h { font-size: 13px; font-weight: 700; color: var(--c-accent); margin-bottom: 8px; }
.about-apply p  { font-size: 14px; color: var(--c-text2); line-height: 1.65; margin: 0 0 16px; }

/* Final CTA */
.about-cta {
  background: var(--c-text); color: #fff;
  padding: 72px 0; text-align: center;
}
.about-cta h2 {
  font-family: var(--font-serif); font-size: clamp(1.6rem, 3vw, 2.2rem);
  color: #fff; margin-bottom: 14px;
}
.about-cta p { color: rgba(255,255,255,0.65); font-size: 15px; margin-bottom: 28px; max-width: 480px; margin-left: auto; margin-right: auto; }
.about-cta .btn-outline { border-color: rgba(255,255,255,0.3); color: #fff; }
.about-cta .dim { font-size: 13px; margin-top: 16px; color: rgba(255,255,255,0.4); margin-bottom: 0; }

/* About footer */
.about-footer { background: var(--c-text); padding: 32px 0; border-top: 1px solid rgba(255,255,255,0.06); }
.about-footer .inner { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
.about-footer .links { display: flex; gap: 24px; flex-wrap: wrap; }
.about-footer a { font-size: 13px; color: rgba(255,255,255,0.4); text-decoration: none; }
.about-footer a:hover { color: rgba(255,255,255,0.7); }
.about-footer .copy { font-size: 12px; color: rgba(255,255,255,0.25); margin: 0; }

@media (max-width: 600px) {
  .about-nav { padding: 0 16px; }
  .about-wrap { padding: 0 20px; }
  .about-hero { padding: 48px 0 40px; }
  .about-section { padding: 48px 0; }
}

/* ─────────────────────────────────────────────────────────────
   LEGAL PAGES (privacy.php, terms.php) — moved from inline <style>
   ───────────────────────────────────────────────────────────── */
.policy-nav { position:sticky;top:0;z-index:100;display:flex;align-items:center;justify-content:space-between;padding:0 32px;height:64px;background:rgba(255,255,255,0.96);backdrop-filter:blur(12px);border-bottom:1px solid var(--c-border2); }
.policy-nav .logo { display:flex;align-items:center;gap:10px;font-family:var(--font-serif);font-size:1.3rem;font-weight:700;color:var(--c-text);text-decoration:none; }
.policy-nav .logo img { height:30px;width:auto; }
.policy-nav .logo .swap { color:var(--c-accent);font-weight:400; }
.policy-nav .links { display:flex;align-items:center;gap:20px; }
.policy-nav .links a { font-size:14px;color:var(--c-text2);text-decoration:none;font-weight:500; }
.policy-nav .links a:hover { color:var(--c-text); }
.policy-nav .links a.btn-primary { color:#fff!important; }

.policy-hero { background:var(--c-bg2);border-bottom:1px solid var(--c-border2);padding:52px 32px 44px; }
.policy-hero-inner { max-width:760px;margin:0 auto; }
.policy-hero small { font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:0.1em;color:var(--c-accent); }
.policy-hero h1 { font-family:var(--font-serif);font-size:2.2rem;margin:8px 0 10px; }
.policy-hero p { font-size:14px;color:var(--c-text3);margin:0; }

.policy-body { max-width:760px;margin:0 auto;padding:52px 32px 80px; }
.policy-body h2 { font-family:var(--font-serif);font-size:1.2rem;font-weight:700;color:var(--c-text);margin:40px 0 12px;padding-top:8px;border-top:1px solid var(--c-border2); }
.policy-body h2:first-of-type { margin-top:0;border-top:none;padding-top:0; }
.policy-body p { font-size:15px;color:var(--c-text2);line-height:1.85;margin-bottom:16px; }
.policy-body ul, .policy-body ol { padding-left:22px;margin-bottom:16px; }
.policy-body li { font-size:15px;color:var(--c-text2);line-height:1.75;margin-bottom:8px; }
.policy-body a { color:var(--c-accent); }
.policy-body strong { color:var(--c-text);font-weight:600; }
.policy-callout { background:rgba(45,106,79,0.06);border-left:3px solid var(--c-accent);border-radius:0 10px 10px 0;padding:16px 20px;margin:0 0 28px;font-size:14px;color:var(--c-text2);line-height:1.75; }
.policy-callout-warn { background:rgba(212,168,83,0.08);border-left:3px solid var(--c-gold);border-radius:0 10px 10px 0;padding:16px 20px;margin:16px 0 28px;font-size:14px;color:var(--c-text2);line-height:1.75; }
.policy-footer-strip { border-top:1px solid var(--c-border2);padding-top:28px;margin-top:48px;font-size:13px;color:var(--c-text3);display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center; }
.policy-footer-strip a { color:var(--c-accent); }
@media(max-width:600px){.policy-hero,.policy-body{padding-left:20px;padding-right:20px;}.policy-nav{padding:0 16px;}}