/* ────────────────────────────────────────────────────────────
   Routiply — shared section-tone stylesheet.
   Loaded AFTER each page's inline <style> block so its rules
   win the cascade. Adds muted, tonal section backgrounds while
   keeping white as the base; reserves coral for CTA bands.
   ──────────────────────────────────────────────────────────── */

:root {
  --bg-petrol: #eaf3f7;   /* soft petrol blue */
  --bg-sage:   #eef3ec;   /* muted sage green */
  --bg-sand:   #faf3e8;   /* warm sand / beige */
  --bg-coral:  #fdece4;   /* terracotta accent — CTA bands only */
  --bg-petrol-wash: linear-gradient(180deg, #f7fbfc 0%, var(--bg-petrol) 100%);
  --bg-sand-wash:   linear-gradient(180deg, #ffffff 0%, var(--bg-sand) 100%);
}

/* ── LANDING PAGE SECTIONS ── */
.section-doc {
  background: var(--bg-petrol);
}

.section-corridors {
  /* Replaces the white→alt→white gradient that was inline at views/layout.ejs:467 */
  background: var(--bg-sage);
}

.section-hiw {
  /* Replaces the gradient that was inline at views/layout.ejs:627 */
  background: var(--bg-sand);
}

.manifesto {
  /* Previously transparent; now a soft petrol wash behind the closing quote.
     The existing ::before radial (teal at 4%) still layered on top. */
  background: var(--bg-petrol);
}

footer {
  background: var(--bg-sand);
}

/* ── CORRIDOR PAGES (tn-* palette of section modifiers) ── */
/* Default keep the existing --alt tint when no modifier is applied. */
.tn-section--alt                       { background: var(--bg-alt); }
.tn-section--alt.tn-tone-blue          { background: var(--bg-petrol); }
.tn-section--alt.tn-tone-green         { background: var(--bg-sage); }
.tn-section--alt.tn-tone-sand          { background: var(--bg-sand); }

/* ── ROI PAGE ── */
.roi-tone-blue   { background: var(--bg-petrol); }
.roi-tone-green  { background: var(--bg-sage); }
.roi-tone-sand   { background: var(--bg-sand); }

/* ── CTA BANDS ──
   Coral reserved for the closing per-page CTA band — original
   .tn-cta-section gradient (white→alt) is replaced with a soft coral
   wash. Teal CTAs inside these bands stay teal; the coral is *only* a
   background. Same for the ROI demo form section. The inline ::before
   radial halos still layer on top — they overlay rather than fight. */
.tn-cta-section       { background: var(--bg-coral); }
#demo-form-section    { background: var(--bg-coral); }

/* .tone-cta is also available as a generic modifier for any other
   CTA band we want to add later. */
.tone-cta {
  background: var(--bg-coral);
}
/* --text-dim (#94a3b8) is borderline on coral; tighten it to keep AA
   contrast for muted tags/eyebrows rendered inside the CTA band. */
.tn-cta-section .text-dim,
.tn-cta-section .tn-cta-tag,
.tn-cta-section .console-meta,
.tn-cta-section .cta-form-msg,
#demo-form-section .text-dim,
.tone-cta [style*="--text-dim"] { color: #64748b; }

/* ── PER-CORRIDOR HERO PILLS + CARDS ──
   Stripped the inline background/border off the hero pills in
   views/partials/hero.ejs (lines 29-40) so these class rules win.
   Each corridor gets its own tint: pill background + matching
   card body wash + reusable ::after halo. */
.corr-cta {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 8px;
  text-decoration: none;
  font-family: 'Syne', sans-serif;
  font-weight: 600;
  font-size: 0.9rem;
  letter-spacing: -0.01em;
  border: 1px solid transparent;
  transition: transform 0.2s, background 0.2s, border-color 0.2s;
}
.corr-cta:hover { transform: translateY(-2px); }

/* Drop the default white background so each corridor tint owns the card. */
.corridor-card { background: transparent; }

.corr-cta-saudi, .corridor-card.corr-sa-gcc {
  background: rgba(245,158,11,0.10);
  border-color: rgba(245,158,11,0.35);
  color: #b45309;
}
.corr-cta-tunisia, .corridor-card.corr-tn-ma {
  background: rgba(0,212,170,0.10);
  border-color: rgba(0,212,170,0.35);
  color: #0f766e;
}
.corr-cta-morocco, .corridor-card.corr-ma-eu {
  background: rgba(124,58,237,0.10);
  border-color: rgba(124,58,237,0.35);
  color: #5b21b6;
}
.corr-cta-egypt, .corridor-card.corr-eg-sa {
  background: rgba(0,212,170,0.10);
  border-color: rgba(245,158,11,0.35);
  color: #0f766e;
}
.corr-cta-algeria, .corridor-card.corr-dz-eu {
  background: rgba(225,29,72,0.10);
  border-color: rgba(225,29,72,0.35);
  color: #be123c;
}
.corr-cta-china, .corridor-card.corr-cn-me {
  background: rgba(190,18,60,0.10);
  border-color: rgba(190,18,60,0.35);
  color: #9f1239;
}
.corr-cta-uae, .corridor-card.corr-ae-me {
  background: rgba(249,115,22,0.10);
  border-color: rgba(249,115,22,0.35);
  color: #c2410c;
}
.corr-cta-usa, .corridor-card.corr-us-me {
  background: rgba(74,144,196,0.10);
  border-color: rgba(74,144,196,0.35);
  color: #1e40af;
}
.corr-cta-turkey, .corridor-card.corr-tr-eu {
  background: rgba(20,184,166,0.10);
  border-color: rgba(20,184,166,0.35);
  color: #0f766e;
}
.corr-cta-eu, .corridor-card.corr-eu-me {
  background: rgba(30,58,138,0.10);
  border-color: rgba(30,58,138,0.35);
  color: #1e3a8a;
}

.corridor-card.corr-tn-ma::after  { background: radial-gradient(circle, rgba(0,212,170,0.10)   0%, transparent 70%); }
.corridor-card.corr-ma-eu::after  { background: radial-gradient(circle, rgba(124,58,237,0.10) 0%, transparent 70%); }
.corridor-card.corr-eg-sa::after  { background: radial-gradient(circle, rgba(245,158,11,0.10) 0%, transparent 70%); }
.corridor-card.corr-dz-eu::after  { background: radial-gradient(circle, rgba(225,29,72,0.10)  0%, transparent 70%); }
.corridor-card.corr-sa-gcc::after { background: radial-gradient(circle, rgba(245,158,11,0.10) 0%, transparent 70%); }
.corridor-card.corr-ae-me::after  { background: radial-gradient(circle, rgba(249,115,22,0.10) 0%, transparent 70%); }
.corridor-card.corr-cn-me::after  { background: radial-gradient(circle, rgba(190,18,60,0.10)  0%, transparent 70%); }
.corridor-card.corr-us-me::after  { background: radial-gradient(circle, rgba(74,144,196,0.10) 0%, transparent 70%); }
.corridor-card.corr-tr-eu::after  { background: radial-gradient(circle, rgba(20,184,166,0.10) 0%, transparent 70%); }
.corridor-card.corr-eu-me::after  { background: radial-gradient(circle, rgba(30,58,138,0.10)  0%, transparent 70%); }