/* ═══════════════════════════════════════════════════════════
   YANTRA — THEME B "Soft Paper, polished"  (overlay, loads LAST)
   One file, two surfaces: marketing site (site.css tokens) and
   the app shell (tokens.css). Warm paper + deep green + amber
   accent, glossy iOS-style icon tiles, deeper-but-softer shadows,
   tighter display type. Dark theme kept, re-tuned to match.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. Marketing site tokens (site.css :root) ─────────────── */
:root{
  --bg:#F3F0E8; --bg-2:#EBE6DA; --card:#FCFAF5; --card-2:#F6F2E9;
  --line:#DED7C7; --line-2:#E8E2D4;
  --ink:#0B2A26; --ink-2:#3B5651; --muted:#6B807A; --faint:#A3AFA9;
  --brand:#0F3B33; --brand-2:#0E8A76; --brand-ink:#0F3B33; --brand-soft:#E3ECE7;
  --amber:#F0B429; --amber-soft:rgba(240,180,41,.16);
  --clay:#B8562C; --clay-soft:rgba(184,86,44,.10);
  --gloss:inset 0 1px 0 rgba(255,255,255,.75);
  --shadow-sm:0 1px 2px rgba(11,42,38,.06), 0 1px 1px rgba(11,42,38,.04), inset 0 1px 0 rgba(255,255,255,.65);
  --shadow:0 10px 30px -12px rgba(11,42,38,.22), 0 3px 10px -5px rgba(11,42,38,.10), inset 0 1px 0 rgba(255,255,255,.65);
  --shadow-lg:0 40px 80px -28px rgba(11,42,38,.34), 0 12px 30px -16px rgba(11,42,38,.18), inset 0 1px 0 rgba(255,255,255,.65);
  --glow:0 30px 90px -30px rgba(15,59,51,.45);
}
:root[data-theme="dark"]{
  --bg:#0E1F1C; --bg-2:#122622; --card:#152B27; --card-2:#183330;
  --line:#22403A; --line-2:#1D3833;
  --ink:#F1EEE6; --ink-2:#C6D0CB; --muted:#8FA39D; --faint:#5F726C;
  --brand:#5AD4BB; --brand-2:#7BE8CD; --brand-ink:#9BF0DA; --brand-soft:rgba(90,212,187,.14);
  --amber:#F6C453; --amber-soft:rgba(246,196,83,.16);
}

/* ── 2. Marketing components ──────────────────────────────── */
body{letter-spacing:-.005em}
h1,h2,h3,.hero-h1{letter-spacing:-.03em}
.hero .hero-h1 b, .hero .hero-h1 em{color:var(--brand-2)}
.btn{border-radius:12px;font-weight:650;transition:transform .18s var(--ease),box-shadow .18s var(--ease),background .18s}
.btn-pri{background:linear-gradient(180deg,#145247,#0F3B33);box-shadow:0 8px 20px -8px rgba(15,59,51,.55),var(--gloss);border:1px solid #0C3129}
.btn-pri:hover{transform:translateY(-1px);box-shadow:0 14px 26px -10px rgba(15,59,51,.6),var(--gloss)}
.btn-gho{background:var(--card);border:1px solid var(--line);box-shadow:var(--shadow-sm)}
.btn-gho:hover{border-color:var(--brand-2)}
.nav{backdrop-filter:saturate(1.3) blur(14px)}
.pcard,.card,.plan,.cmp,.faqs details,.pcardx,.msg,.tip{border-radius:18px;box-shadow:var(--shadow-sm)}
.pcard:hover,.pcardx:hover,.plan:hover{box-shadow:var(--shadow);transform:translateY(-3px)}
.plan.best{border-color:var(--brand-2);box-shadow:0 0 0 1px var(--brand-2),var(--shadow-lg);background:linear-gradient(180deg,#FFFFFF,var(--card))}
.plan .pr{letter-spacing:-.04em}
.eyebrow{background:var(--brand-soft);border-radius:99px;padding:5px 12px}
.eyebrow .d{background:var(--amber)}
.signum{opacity:.10}
.cmp .r.head .hd{background:var(--bg-2)}
.cmp .yes b{color:var(--brand-2)}
.tag,.pcardx .tag{color:var(--clay)}
footer.site{border-top:1px solid var(--line-2);background:var(--bg-2)}
::selection{background:rgba(240,180,41,.35)}
/* glossy iOS-style icon tiles (marketing problem/how cards) */
.pcard .ic,.pcard .icon,.how .ic,.uc .ic,[class*="card"] > .ic{
  width:46px;height:46px;border-radius:14px;display:grid;place-items:center;color:#fff;
  background:linear-gradient(145deg,#1B6B5D,#0F3B33);
  box-shadow:0 10px 18px -8px rgba(15,59,51,.55),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -8px 14px -10px rgba(0,0,0,.35)}
.pcard:nth-child(2) .ic,[class*="card"]:nth-child(2) > .ic{background:linear-gradient(145deg,#F5C24B,#D9961B);box-shadow:0 10px 18px -8px rgba(217,150,27,.55),inset 0 1px 0 rgba(255,255,255,.45),inset 0 -8px 14px -10px rgba(0,0,0,.25)}
.pcard:nth-child(3) .ic,[class*="card"]:nth-child(3) > .ic{background:linear-gradient(145deg,#D0714A,#A94A24);box-shadow:0 10px 18px -8px rgba(169,74,36,.55),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -8px 14px -10px rgba(0,0,0,.3)}
.pcard:nth-child(4) .ic,[class*="card"]:nth-child(4) > .ic{background:linear-gradient(145deg,#4B7BE0,#2A4FB4);box-shadow:0 10px 18px -8px rgba(42,79,180,.55),inset 0 1px 0 rgba(255,255,255,.35),inset 0 -8px 14px -10px rgba(0,0,0,.3)}

/* ── 3. App shell tokens (tokens.css) — warm paper unify ──── */
:root{
  --rail-bg:#0F3B33; --rail-fg:#9FB5AC; --rail-fg-active:#FFFFFF; --rail-active-bg:rgba(240,180,41,.22);
  --nav-bg:#F7F4EC; --canvas-bg:#F1EDE3; --surface:#FFFFFF; --surface-2:#F7F4EC; --surface-hover:#F1EDE3;
  --border:#E4DECF; --border-strong:#CFC7B4;
  --text:#12241F; --text-2:#425650; --text-muted:#6B807A; --text-faint:#A3AFA9;
  --primary:#0F3B33; --primary-hover:#0B2E29; --primary-soft:rgba(15,59,51,.08); --primary-soft-2:rgba(15,59,51,.14);
  --node-action:#0F3B33; --node-action-soft:rgba(15,59,51,.10);
  --node-logic:#B8860B; --node-logic-soft:rgba(184,134,11,.12);
  --node-ai-a:#0F3B33; --node-ai-b:#0E8A76;
  --success:#0E8A76; --success-soft:rgba(14,138,118,.14);
  --shadow-xs:0 1px 2px rgba(18,36,31,.05);
  --shadow-sm:0 1px 3px rgba(18,36,31,.08),0 1px 2px rgba(18,36,31,.04);
  --shadow:0 6px 16px -4px rgba(18,36,31,.12),0 2px 6px -2px rgba(18,36,31,.06);
  --shadow-lg:0 16px 40px -10px rgba(18,36,31,.20);
}
:root[data-theme="dark"]{
  --rail-bg:#0A1A17; --nav-bg:#0F1F1C; --canvas-bg:#0C1815; --surface:#122622; --surface-2:#152B27; --surface-hover:#183330;
  --border:#22403A; --border-strong:#2E4E47;
  --text:#F1EEE6; --text-2:#C6D0CB; --text-muted:#8FA39D; --text-faint:#5F726C;
  --primary:#5AD4BB; --primary-hover:#7BE8CD; --primary-soft:rgba(90,212,187,.12); --primary-soft-2:rgba(90,212,187,.2); --on-primary:#062A23;
  --rail-active-bg:rgba(246,196,83,.2);
}

/* ── 4. App components ────────────────────────────────────── */
.rail-logo{background:linear-gradient(135deg,#F0B429,#D9961B);color:#0F3B33;box-shadow:0 6px 16px -4px rgba(240,180,41,.55),inset 0 1px 0 rgba(255,255,255,.5)}
.rail-ico{border-radius:10px;box-shadow:0 4px 10px -3px rgba(0,0,0,.45),inset 0 1px 0 rgba(255,255,255,.28),inset 0 -6px 10px -8px rgba(0,0,0,.35)}
.rail-item.active .rail-ico{box-shadow:0 0 0 2px rgba(240,180,41,.55),0 4px 10px -2px rgba(0,0,0,.5),inset 0 1px 0 rgba(255,255,255,.3)}
.rail-item.active{color:#fff}
.card,.conn-card,.plan-card,.modal,.node,.n{border-radius:14px}
.card{box-shadow:var(--shadow-sm);border-color:var(--border)}
.card:hover{border-color:var(--border-strong)}
.conn-card{transition:transform .15s var(--ease,ease),box-shadow .15s}
.conn-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.conn-logo{border-radius:12px;box-shadow:0 6px 12px -6px rgba(18,36,31,.35),inset 0 1px 0 rgba(255,255,255,.4)}
.btn.btn-primary,.btn-primary{background:linear-gradient(180deg,#145247,#0F3B33);color:#fff;border:1px solid #0C3129;box-shadow:0 6px 14px -6px rgba(15,59,51,.55),inset 0 1px 0 rgba(255,255,255,.18);border-radius:10px}
.btn.btn-primary:hover{transform:translateY(-1px);box-shadow:0 10px 18px -8px rgba(15,59,51,.6)}
.btn-secondary,.btn-ghost{border-radius:10px}
.pill-success,.pill.pill-success{background:rgba(14,138,118,.12);color:#0B6B5B;border:1px solid rgba(14,138,118,.25)}
.topbar h1{font-family:var(--font-display,'Bricolage Grotesque','Inter',sans-serif);letter-spacing:-.025em}
.nav-head h2{letter-spacing:-.02em}
.dir-no{color:#B8860B !important}
.input,.select,textarea.input{border-radius:10px;background:var(--surface);border:1px solid var(--border)}
.input:focus,.select:focus{border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-soft-2)}
.toast{border-radius:12px;box-shadow:var(--shadow-lg)}
/* builder canvas: paper grid */
.canvas,.builder-canvas,#canvas{background-color:var(--canvas-bg);background-image:radial-gradient(rgba(18,36,31,.13) 1px,transparent 1px);background-size:22px 22px}

/* ── 5. Mobile overflow fix ────────────────────────────────
   body had overflow-x:hidden but <html> did not, so the logo
   marquee (2800px wide) let the whole page scroll sideways on
   phones. Clip at the marquee AND stop the document scrolling. */
html{overflow-x:hidden;max-width:100%}
.logo-marquee,.logos{overflow:hidden}
.cmp,.scrollwrap{max-width:100%}
img,svg,video,table{max-width:100%}