/* ══════════════════════════════════════════════════
   पैशाचं झाड — Public site styles
   ══════════════════════════════════════════════════ */

/* ── PUBLIC-SITE-ONLY BASE ──────────────────────────
   Shared tokens (:root), reset, fonts, focus-visible and
   reduced-motion base all live in shared.css — loaded
   before this file. Only this site's own additions here. */
html  { scroll-behavior:smooth; overflow-x:clip; }
body  { overflow-x:clip; }

.skip-link {
  position:absolute; left:12px; top:-48px; z-index:10000;
  background:var(--text); color:white; padding:9px 18px; border-radius: var(--radius-sm);
  font-size:var(--text-xs); font-weight:700; font-family:var(--font-mr);
  transition:top .15s ease;
}
.skip-link:focus { top:12px; }

/* ── REDUCED MOTION (generic reset lives in shared.css) ── */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1 !important; transform:none !important; }
}

/* ── NAV ────────────────────────────────────────── */
nav {
  position:sticky; top:0; z-index:500; height:64px;
  background:rgba(255,255,255,.94); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  border-bottom:1px solid var(--border);
  display:flex; align-items:center; padding:0 6%; gap:28px;
}
.brand { display:flex; align-items:center; flex-shrink:0; }
/* Full logo lockup (icon + wordmark) used as-is in the header.
   Height-driven so it scales down cleanly on smaller screens.
   mix-blend-mode:multiply melts the logo's white canvas into the
   off-white nav behind it — only the white areas are affected,
   the black linework and green fill render unchanged. */
.brand-logo-full { height:44px; width:auto; display:block; }

.nav-links { display:flex; gap:var(--space-5); list-style:none; }
.nav-links a {
  font-size:var(--text-sm); font-weight:600; color:var(--muted); white-space:nowrap;
  font-family:var(--font-mr); transition:color .2s; position:relative; padding:6px 0;
}
/* Keeps the visible text+underline compact (unchanged) while extending the
   actual tappable area to 44px — growing the link's own box directly would
   push the ::after underline down away from the text instead. */
.nav-links a::before { content:''; position:absolute; inset:-13px 0; }
.nav-links a::after {
  content:''; position:absolute; left:0; right:0; bottom:0; height:2px;
  background:var(--accent); border-radius:2px; transform:scaleX(0); transition:transform .2s ease;
}
.nav-links a:hover { color:var(--text); }
.nav-links a[aria-current="page"] { color:var(--text); }
.nav-links a[aria-current="page"]::after { transform:scaleX(1); }
.main-nav { flex:1; justify-content:center; }

.nav-right { display:flex; align-items:center; gap:14px; margin-left:auto; flex-shrink:0; }
.nav-cta { padding:9px 20px; font-size:var(--text-xs); gap:6px; }

/* Language toggle — sliding pill indicator behind the active label */
.lang-toggle {
  position:relative; display:flex; background:var(--bg2); border:1px solid var(--border);
  border-radius: var(--radius-pill); padding:3px; flex-shrink:0;
}
.lang-indicator {
  position:absolute; top:3px; left:3px; width:calc(50% - 3px); height:calc(100% - 6px);
  background:var(--text); border-radius: var(--radius-pill);
  transition:transform .25s cubic-bezier(.4,0,.2,1);
}
.lang-toggle.lang-en .lang-indicator { transform:translateX(100%); }
.lang-toggle:has(#lb-en.on) .lang-indicator { transform:translateX(100%); }
.lb {
  position:relative; z-index:1; padding:8px 14px; font-size:var(--text-xs); font-weight:700;
  border:none; white-space:nowrap; background:transparent; color:var(--muted);
  cursor:pointer; transition:color .18s; min-height:44px; border-radius: var(--radius-pill);
  display:inline-flex; align-items:center; justify-content:center;
}
.lb.on { color:white; }

/* ── HERO ───────────────────────────────────────── */
.hero {
  background:var(--bg); padding:var(--space-9) 6% var(--space-9);
  /* no border-bottom here — the .sec.alt section right after it already
     draws a border-top on this exact seam; both together doubled the line */
  position:relative; overflow:hidden;
}
.hero-inner { max-width:740px; position:relative; z-index:1; }
.hero-pill {
  display:inline-flex; align-items:center; gap:6px;
  background:var(--accent-bg); border:1px solid rgba(81,122,75,.28);
  color:var(--accent-text); padding:5px 14px; border-radius: var(--radius-pill);
  font-size:var(--text-xs); font-weight:600; margin-bottom:26px;
}
.hero h1 {
  font-size:clamp(28px,7vw,64px); font-weight:700; color:var(--text);
  line-height:1.18; margin-bottom:18px; letter-spacing:-.5px;
  min-width:0;
}
/* each verse-half is one complete phrase — keep it on a single line at
   every width instead of letting it wrap mid-phrase; the h1's fluid
   font-size (above) is what actually makes room for it to fit. */
.hero h1 span, .hero h1 em { display:inline-block; white-space:nowrap; max-width:100%; }
.hero h1 em { color:var(--accent); font-style:normal; }
.hero p {
  font-size:var(--text-lg); color:var(--muted); line-height:1.75;
  margin-bottom:34px; max-width:460px;
}
.hero-btns { display:flex; gap:10px; flex-wrap:wrap; }
.btn-primary {
  padding:12px 24px; background:var(--text); color:white; border:none;
  border-radius: var(--radius-pill); font-size:var(--text-sm); font-weight:700; white-space:nowrap;
  font-family:var(--font-mr); transition:all .2s;
  display:inline-flex; align-items:center; gap:7px;
}
.btn-primary:hover { background:#2a2a2a; transform:translateY(-1px); }
.btn-outline {
  padding:12px 24px; background:transparent; color:var(--text);
  border:1.5px solid var(--border); border-radius: var(--radius-pill);
  font-size:var(--text-sm); font-weight:600; font-family:var(--font-mr); white-space:nowrap;
  transition:all .2s; display:inline-flex; align-items:center; gap:7px;
}
.btn-outline:hover { border-color:var(--text); transform:translateY(-1px); }

/* ── PAGE INTRO (Learn / Tools / About headers) ─── */
.page-intro {
  background:var(--bg); padding:var(--space-7) 6% var(--space-7); border-bottom:1px solid var(--border);
}
.page-intro-inner { max-width:640px; }
.page-intro h1 {
  font-size:clamp(28px,4vw,42px); font-weight:700; color:var(--text);
  line-height:1.15; margin-bottom:var(--space-3); letter-spacing:-.4px;
  overflow-wrap:anywhere; min-width:0;
}
.page-intro p { font-size:var(--text-base); color:var(--muted); line-height:1.75; }

/* ── SECTION COMMON ─────────────────────────────── */
.sec { padding:var(--space-8) 6%; }
.sec.alt { background:var(--bg2); border-top:1px solid var(--border); border-bottom:1px solid var(--border); }
/* No divider by default — every section already alternates background via
   .sec/.sec.alt, so a second rule right under the title was pure
   redundancy. Kept only on headings with no subtitle text (.sec-head-rule)
   — there, the line is the only thing giving the heading breathing room
   before the grid/list starts; where a subtitle paragraph already exists,
   that text does the same job. */
.sec-head { margin-bottom:var(--space-6); }
.sec-head-rule { padding-bottom:var(--space-5); border-bottom:1px solid var(--border); }
.sec-head h2 {
  font-size:clamp(24px,3vw,36px); font-weight:700; color:var(--text);
  margin-bottom:8px; letter-spacing:-.3px; overflow-wrap:anywhere; min-width:0;
}
.sec-head p { font-size:var(--text-base); color:var(--muted); line-height:1.65; }

/* ── ABOUT: who we are + services ───────────────── */
.about-who { max-width:760px; }
.about-who > p { font-size:var(--text-base); color:var(--text); line-height:1.75; margin:0 0 var(--space-6); }
.about-services-heading { font-size:var(--text-lg); font-weight:700; color:var(--text); margin:0 0 var(--space-4); }
.about-services-list { list-style:none; padding:0; margin:0 0 var(--space-4); display:grid; gap:var(--space-3); }
.about-services-list li { display:flex; align-items:baseline; gap:10px; font-size:var(--text-base); color:var(--text); line-height:1.6; }
.about-services-list li::before { content:'✓'; color:var(--accent-text); font-weight:700; flex-shrink:0; }
.about-services-note { font-size:var(--text-sm); color:var(--muted); font-style:italic; margin:0; }

/* ── VIDEOS ─────────────────────────────────────── */
.vid-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:1100px; }
.vid-card {
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
  transition:border-color .2s, transform .2s; background:white; cursor:pointer;
}
.vid-card:hover { border-color:#c4c4be; transform:translateY(-2px); }

.vid-thumb { position:relative; padding-bottom:56.25%; }
.vid-thumb-inner {
  position:absolute; inset:0; display:flex; align-items:center; justify-content:center;
}
.play-ring {
  width:42px; height:42px; border-radius:50%;
  background:rgba(255,255,255,.2); border:1.5px solid rgba(255,255,255,.5);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-base); padding-left:3px; -webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px); transition:background .2s;
}
.vid-card:hover .play-ring { background:rgba(255,255,255,.35); }
.vid-platform {
  position:absolute; bottom:8px; left:8px;
  padding:3px 8px; border-radius:4px; font-size:var(--text-2xs); font-weight:700; font-family:var(--font-en);
}
.yt { background:#A61B1B; color:white; }
.ig { background:linear-gradient(45deg,#A8461A,#A62F3D,#93205A,#7A1D6E,#5D1969); color:white; }
.vid-duration {
  position:absolute; bottom:8px; right:8px;
  background:rgba(0,0,0,.65); color:white; font-size:var(--text-2xs); font-weight:600;
  padding:2px 5px; border-radius:3px; font-family:var(--font-en);
}
.vid-body { padding:20px 22px; }
.vid-title { font-size:var(--text-sm); font-weight:700; color:var(--text); margin-bottom:8px; line-height:1.5; }
.vid-desc {
  font-size:var(--text-xs); color:var(--muted); line-height:1.65; margin-bottom:14px;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
}
.vid-link { font-size:var(--text-xs); font-weight:700; color:var(--accent-text); white-space:nowrap; transition:color .2s; }
.vid-link:hover { color:#3aa653; }

/* ── TOOLS ──────────────────────────────────────── */
.tools-controls { display:flex; gap:var(--space-3); flex-wrap:wrap; align-items:center; margin-bottom:28px; }
.tool-search {
  flex:1; min-width:180px; max-width:260px; height:40px;
  border:1px solid var(--border); border-radius: var(--radius-md); padding:0 14px;
  font-size:var(--text-sm); outline:none; background:white; transition:border-color .2s;
}
.tool-search:focus { border-color:var(--accent); }
.cat-filters { display:flex; gap:6px; flex-wrap:wrap; }
.cat-btn {
  padding:9px 16px; border:1px solid var(--border); border-radius: var(--radius-pill);
  background:white; font-size:var(--text-xs); font-weight:600; color:var(--muted);
  cursor:pointer; transition:all .18s; white-space:nowrap; min-height:40px;
}
.cat-btn.on { background:var(--text); border-color:var(--text); color:white; }
.cat-btn:hover:not(.on) { border-color:var(--text); color:var(--text); }

/* ── आर्थिक स्वातंत्र्य कॅल्क्युलेटर — featured link-out card (standalone page) ── */
.ff-hero {
  display: flex; gap: 20px; align-items: center;
  /* two stops only — a third, lighter stop used to drop below 4.5:1 contrast
     for the card's own text at its lightest point; keep both ends AA-safe. */
  background: linear-gradient(115deg, #3E5F39 0%, #476A41 100%);
  border: 1.5px solid #3E5F39; border-radius: var(--r);
  padding: 22px 26px; margin-bottom: 30px; cursor: pointer;
  transition: transform .2s, box-shadow .2s; text-decoration: none;
}
.ff-hero:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(62,95,57,.3); }
.ff-hero-art { font-size: 46px; flex-shrink: 0; }
.ff-hero-tag {
  display: inline-block; background: rgba(0,0,0,.28); color: #FFF6D9; font-size: var(--text-2xs);
  font-weight: 700; letter-spacing: .07em; border-radius: var(--radius-xl); padding: 4px 11px; margin-bottom: 8px;
}
.ff-hero-title { font-size: clamp(16px, 2.4vw, 20px); font-weight: 700; color: white; margin-bottom: 6px; }
.ff-hero p { font-size: var(--text-xs); color: rgba(255,255,255,.95); line-height: 1.6; margin: 0 0 10px; }
.ff-hero-btn { font-size: var(--text-sm); font-weight: 700; color: #FFF6D9; }
@media (max-width: 700px) {
  .ff-hero { flex-direction: column; text-align: center; gap: 8px; }
}

.tool-grid {
  display:grid; grid-template-columns:repeat(auto-fill, minmax(152px,1fr));
  gap:18px; max-width:1100px;
}
.tool-item {
  border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; cursor:pointer; background:white;
  transition:border-color .2s, transform .2s;
}
.tool-item:hover { border-color:#c4c4be; transform:translateY(-2px); }
.tool-item[data-hidden="1"] { display:none; }

.tool-icon-box {
  padding:22px 16px 18px; display:flex; align-items:center; justify-content:center;
  font-size:32px; border-bottom:1px solid var(--border);
}
.tool-meta { padding:12px 13px 14px; }
.tool-name { font-size:var(--text-xs); font-weight:700; color:var(--text); margin-bottom:4px; }
.tool-desc { font-size:var(--text-2xs); color:var(--muted); line-height:1.5; }

/* ── MODAL (desktop) / DRAWER (mobile, see 700px breakpoint below) ── */
#modal-wrap {
  display:none; position:fixed; inset:0; z-index:1000;
  background:rgba(0,0,0,.3); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:16px;
}
#modal-wrap.open { display:flex; }
#modal-box {
  background:white; border-radius: var(--radius-xl); width:100%; max-width:560px;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 20px 60px rgba(var(--shadow-rgb),.12);
  animation:modalIn .22s ease;
}
@keyframes modalIn { from{opacity:0;transform:translateY(12px) scale(.97);} to{opacity:1;transform:none;} }
.modal-drag { display:none; } /* shown only in the mobile drawer layout */

.modal-hd {
  display:flex; align-items:center; gap:var(--space-3); padding:22px 22px 18px;
  border-bottom:1px solid var(--border);
  position:sticky; top:0; background:white; z-index:1;
}
.modal-icon { font-size:26px; }
.modal-title { font-size:var(--text-lg); font-weight:700; color:var(--text); flex:1; }
.modal-close {
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg); font-size:var(--text-sm); display:flex; align-items:center; justify-content:center;
  cursor:pointer; color:var(--muted); transition:background .2s; flex-shrink:0;
}
.modal-close:hover { background:var(--border); }
.modal-body { padding:22px; }

/* description — shown by default, 1-2 plain-language sentences */
.modal-desc { font-size:var(--text-sm); color:var(--muted); line-height:1.65; margin-bottom:14px; }

/* [ℹ️] expandable formula / methodology panel — hidden until toggled */
.info-toggle {
  display:flex; align-items:center; gap:7px; width:100%;
  background:var(--accent-bg); border:1px solid rgba(81,122,75,.22); border-radius: var(--radius-md);
  padding:10px 14px; font-size:var(--text-xs); font-weight:700; color:var(--accent-text);
  font-family:var(--font-mr); cursor:pointer; transition:background .2s; margin-bottom:14px;
}
.info-toggle:hover { background:#E4EFE1; }
.info-toggle .info-chev { margin-left:auto; transition:transform .2s; font-size:var(--text-2xs); }
.info-toggle.on .info-chev { transform:rotate(180deg); }
.info-panel {
  background:var(--bg); border:1px solid var(--border); border-radius: var(--radius-md);
  padding:14px 16px; margin:-6px 0 16px; font-size:var(--text-xs); color:var(--text); line-height:1.6;
}
.info-narrative { color:var(--muted); margin-bottom:10px; }
.info-kicker { font-size:var(--text-2xs); font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-text); margin-bottom:6px; }
.info-formula {
  font-family:var(--font-en), monospace; font-size:var(--text-sm); font-weight:600; color:var(--text);
  background:white; border:1px solid var(--border); border-radius: var(--radius-sm); padding:9px 12px;
  margin-bottom:10px; overflow-x:auto; white-space:nowrap;
}
.info-vars { display:flex; flex-direction:column; gap:var(--space-1); margin-bottom:10px; }
.info-var { font-size:var(--text-xs); color:var(--muted); }
.info-var b { color:var(--text); font-family:var(--font-en), monospace; }
.info-example {
  font-size:var(--text-xs); color:var(--muted); padding-top:10px; border-top:1px dashed var(--border);
}
.info-example b { color:var(--text); }

.field-group { margin-bottom:14px; }
.field-label { font-size:var(--text-xs); font-weight:600; color:var(--text); display:block; margin-bottom:5px; }
.field-wrap { position:relative; display:flex; }
.field-pfx, .field-sfx {
  position:absolute; top:0; bottom:0; display:flex; align-items:center;
  font-size:var(--text-xs); font-weight:600; color:var(--muted); pointer-events:none;
}
.field-pfx { left:12px; }
.field-sfx { right:12px; }
.field-input {
  width:100%; height:44px; border:1px solid var(--border); border-radius: var(--radius-md);
  font-size:var(--text-sm); font-weight:600; outline:none; transition:border-color .2s;
  background:white; color:var(--text);
}
.field-input.has-pfx { padding-left:28px; }
.field-input.has-sfx { padding-right:36px; padding-left:12px; }
.field-input:focus { border-color:var(--accent); }
/* live "= ₹1,23,456" hint under ₹ fields — a type=number input can't show
   grouped digits while typing, so this mirrors the value in Indian format */
.field-hint { font-size:var(--text-2xs); color:var(--muted); margin-top:5px; font-family:var(--font-en); }

.btn-calc {
  width:100%; height:46px; background:var(--text); color:white; border:none;
  border-radius: var(--radius-md); font-size:var(--text-base); font-weight:700; font-family:var(--font-mr);
  transition:background .2s; margin-top:6px; cursor:pointer;
}
.btn-calc:hover { background:#2a2a2a; }

/* result view — replaces the form view rather than stacking on top of it */
.btn-back {
  display:flex; align-items:center; gap:var(--space-2); background:none; border:none;
  font-size:var(--text-xs); font-weight:600; color:var(--muted); font-family:var(--font-mr);
  cursor:pointer; padding:4px 0 16px; transition:color .2s;
}
.btn-back:hover { color:var(--text); }

#modal-result {
  background:var(--bg); border:1px solid var(--border);
  border-radius: var(--r); overflow:hidden;
}
.res-row {
  display:flex; justify-content:space-between; align-items:center;
  padding:12px 16px; border-bottom:1px solid var(--border);
}
.res-row:last-child { border-bottom:none; }
.res-label { font-size:var(--text-xs); color:var(--muted); }
.res-value { font-size:var(--text-sm); font-weight:700; color:var(--text); font-family:var(--font-en); }
.res-row.big .res-label { font-size:var(--text-sm); font-weight:700; color:var(--text); }
.res-row.big .res-value { font-size:var(--text-lg); font-weight:700; color:var(--text); }
.res-row.pos .res-value { color:var(--accent-text); }
.res-row.neg .res-value { color:var(--err-text); }

.modal-disclaimer { font-size:var(--text-2xs); color:var(--muted); line-height:1.5; margin-top:14px; }
.modal-disclaimer-link { display:inline-block; font-size:var(--text-2xs); color:var(--accent-text); text-decoration:underline; line-height:1.5; margin-top:6px; }
.modal-disclaimer-link:hover { color:var(--focus); }
.share-row { display:flex; gap:10px; margin-top:14px; }
.btn-share, .btn-copy {
  flex:1; height:44px; border-radius: var(--radius-md); font-size:var(--text-sm); font-weight:700;
  font-family:var(--font-mr); cursor:pointer; display:flex; align-items:center;
  justify-content:center; gap:7px; transition:background .2s, border-color .2s;
}
.btn-share { background:var(--text); color:white; border:none; }
.btn-share:hover { background:#2a2a2a; }
.btn-copy { background:white; color:var(--text); border:1px solid var(--border); }
.btn-copy:hover { border-color:var(--text); }
.copy-status { display:block; text-align:center; font-size:var(--text-xs); color:var(--accent-text); margin-top:8px; min-height:16px; }

/* ── ARTICLES ────────────────────────────────────── */
.art-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px; max-width:1100px; }
.art-card {
  border:1px solid var(--border); border-radius:var(--r); padding:26px 28px;
  background:white; transition:border-color .2s, transform .2s; cursor:pointer;
}
.art-card:hover { border-color:#c4c4be; transform:translateY(-2px); }
.art-tag {
  display:inline-block; background:var(--accent-bg); color:var(--accent-text);
  padding:3px 10px; border-radius: var(--radius-xl); font-size:var(--text-2xs); font-weight:700; margin-bottom:12px;
}
.art-title { font-size:var(--text-lg); font-weight:700; color:var(--text); margin-bottom:10px; line-height:1.45; }
.art-excerpt { font-size:var(--text-sm); color:var(--muted); line-height:1.7; margin-bottom:16px; }
.art-meta { display:flex; gap:var(--space-3); font-size:var(--text-2xs); color:var(--meta); font-family:var(--font-en); }
.art-read { font-size:var(--text-xs); font-weight:700; color:var(--text); white-space:nowrap; transition:color .2s; }
.art-read:hover { color:var(--accent); }
.art-permalink { display:inline-block; margin-top:10px; font-size:var(--text-2xs); font-weight:600; color:var(--muted); text-decoration:none; }
.art-permalink:hover { color:var(--accent-text); text-decoration:underline; }

/* ── FOOTER ─────────────────────────────────────── */
footer {
  background:var(--bg2); border-top:1px solid var(--border);
  padding:var(--space-7) 6% var(--space-6); color:var(--muted);
}
.foot-top { display:grid; grid-template-columns:2fr 1fr 1fr 1fr 1fr; gap:34px; margin-bottom:40px; }
.foot-accent-line { width:36px; height:3px; background:var(--accent); border-radius:2px; margin-bottom:16px; }
.foot-brand-name { font-size:var(--text-lg); font-weight:700; color:var(--text); margin-bottom:10px; }
.foot-brand-desc { font-size:var(--text-xs); line-height:1.75; color:var(--muted); }
.foot-social { display:flex; gap:14px; margin-top:16px; flex-wrap:wrap; }
.foot-social a {
  font-size:var(--text-xs); font-weight:700; color:var(--text);
  border:1px solid var(--border); background:white;
  padding:6px 14px; border-radius: var(--radius-pill); transition:border-color .2s;
  display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
}
.foot-social a:hover { border-color:var(--text); }
.foot-col-title {
  font-size:var(--text-2xs); font-weight:700; color:var(--text);
  margin-bottom:14px; text-transform:uppercase; letter-spacing:.08em; font-family:var(--font-en);
}
.foot-links { list-style:none; display:flex; flex-direction:column; gap:9px; }
.foot-links a { font-size:var(--text-xs); color:var(--muted); transition:color .18s; }
.foot-links a:hover { color:var(--text); }
.foot-bot {
  border-top:1px solid var(--border); padding-top:20px;
  display:flex; justify-content:space-between; font-size:var(--text-xs); color:var(--muted);
}

/* ── SCROLL REVEAL ───────────────────────────────── */
.reveal { opacity:0; transform:translateY(16px); transition:opacity .4s ease, transform .4s ease; }
.reveal.show { opacity:1; transform:translateY(0); }

/* ── VIDEO IFRAME ───────────────────────────────── */
.vid-thumb iframe {
  position:absolute; inset:0; width:100%; height:100%; border:0;
}
/* Click-to-play affordance on thumbnails that open the popup player */
.vid-thumb.playable, .reel-thumb.playable { cursor:pointer; }
.vid-thumb.playable:hover .play-ring,
.reel-thumb.playable:hover .reel-play { background:rgba(255,255,255,.4); transform:scale(1.06); }
.play-ring, .reel-play { transition:background .2s, transform .2s; }

/* ── MEDIA PLAYER MODAL (videos + reels popup) ──── */
#media-wrap {
  display:none; position:fixed; inset:0; z-index:1200;
  background:rgba(0,0,0,.62); -webkit-backdrop-filter:blur(5px);backdrop-filter:blur(5px);
  align-items:center; justify-content:center; padding:20px;
}
#media-wrap.open { display:flex; }
.media-box {
  position:relative; width:100%; background:#000; border-radius: var(--r);
  overflow:hidden; box-shadow:0 24px 64px rgba(var(--shadow-rgb),.45); animation:modalIn .22s ease;
}
.media-box.wide     { max-width:900px; }
.media-box.portrait { max-width:400px; }
.media-frame-wrap { position:relative; width:100%; }
.media-box.wide     .media-frame-wrap { padding-bottom:56.25%; }      /* 16:9 */
.media-box.portrait .media-frame-wrap { height:min(80vh,720px); }     /* IG reel portrait */
#media-frame { position:absolute; inset:0; width:100%; height:100%; border:0; background:#000; }
.media-close {
  position:absolute; top:-15px; right:-15px; z-index:2;
  width:40px; height:40px; border-radius:50%; border:none;
  background:#fff; color:var(--text); font-size:var(--text-base); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  box-shadow:0 4px 14px rgba(var(--shadow-rgb),.32);
}
.media-close:hover { background:var(--border); }
@media (max-width:540px) { .media-close { top:8px; right:8px; } }

/* ── REEL CARD ──────────────────────────────────── */
.reel-grid {
  display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr));
  gap:18px; max-width:680px;
}
.reel-card {
  border:1px solid var(--border); border-radius:var(--r); overflow:hidden;
  background:white; transition:border-color .2s, transform .2s;
}
.reel-card:hover { border-color:#c4c4be; transform:translateY(-2px); }
.reel-thumb {
  position:relative; padding-bottom:100%;
}
.reel-thumb-inner {
  position:absolute; inset:0;
  background:linear-gradient(135deg,#f09433 0%,#e6683c 25%,#dc2743 50%,#cc2366 75%,#bc1888 100%);
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px;
}
.reel-play {
  width:48px; height:48px; border-radius:50%;
  background:rgba(255,255,255,.22); border:1.5px solid rgba(255,255,255,.55);
  display:flex; align-items:center; justify-content:center;
  font-size:var(--text-lg); padding-left:4px; color:white;
}
.reel-label {
  font-size:var(--text-2xs); font-weight:700; color:rgba(255,255,255,.85);
  letter-spacing:.05em; font-family:var(--font-en);
  background:rgba(0,0,0,.25); padding:3px 10px; border-radius: var(--r);
}
.reel-body { padding:16px 18px; }
.reel-title { font-size:var(--text-sm); font-weight:700; color:var(--text); margin-bottom:6px; line-height:1.45; }
.reel-desc  { font-size:var(--text-xs); color:var(--muted); line-height:1.6; margin-bottom:12px; }
.reel-link  { font-size:var(--text-xs); font-weight:700; color:#bc1888; white-space:nowrap; }
.reel-link:hover { opacity:.8; }

/* ── BLOG MODAL ─────────────────────────────────── */
#blog-wrap {
  display:none; position:fixed; inset:0; z-index:1100;
  background:rgba(0,0,0,.3); -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  align-items:center; justify-content:center; padding:16px;
}
#blog-wrap.open { display:flex; }
#blog-box {
  background:white; border-radius: var(--radius-xl); width:100%; max-width:680px;
  max-height:90vh; overflow-y:auto;
  box-shadow:0 24px 64px rgba(var(--shadow-rgb),.13);
  animation:modalIn .22s ease;
}
.blog-hd {
  padding:28px 32px 0; position:sticky; top:0; background:white; z-index:1;
  border-bottom:1px solid var(--border); padding-bottom:20px;
}
.blog-hd-top { display:flex; align-items:flex-start; justify-content:space-between; gap:var(--space-4); }
.blog-close {
  width:40px; height:40px; border-radius:50%; border:1px solid var(--border);
  background:var(--bg); font-size:var(--text-sm); display:flex; align-items:center;
  justify-content:center; cursor:pointer; color:var(--muted); flex-shrink:0;
  transition:background .2s;
}
.blog-close:hover { background:var(--border); }
.blog-tag {
  display:inline-block; background:var(--accent-bg); color:var(--accent-text);
  padding:3px 10px; border-radius: var(--radius-xl); font-size:var(--text-2xs); font-weight:700;
  margin-bottom:10px;
}
.blog-title {
  font-size:clamp(20px,2.5vw,26px); font-weight:700; color:var(--text);
  line-height:1.3; margin-bottom:12px; overflow-wrap:anywhere; min-width:0;
}
.blog-meta { display:flex; gap:14px; font-size:var(--text-xs); color:var(--meta); font-family:var(--font-en); }
.blog-body { padding:28px 32px 32px; }
.blog-body p { font-size:var(--text-base); color:var(--muted); line-height:1.85; margin-bottom:18px; }
/* Article section headings. The stored article bodies use <h2> (they sit
   directly under the article's <h1>, so <h3> skipped a level); <h3> is kept
   here so any older content that still uses it keeps the same look. */
.blog-body h2,
.blog-body h3 {
  font-size:var(--text-lg); font-weight:700; color:var(--text);
  margin:28px 0 10px; letter-spacing:-.2px;
}
.blog-body ul { padding-left:20px; margin-bottom:18px; }
.blog-body li { font-size:var(--text-base); color:var(--muted); line-height:1.75; margin-bottom:6px; }
.blog-body .highlight {
  background:var(--accent-bg); border-left:3px solid var(--accent);
  padding:14px 18px; border-radius:0 10px 10px 0; margin-bottom:18px;
  font-size:var(--text-sm); color:var(--accent-text); line-height:1.7;
}

/* ── SECTION CTA (below preview grids) ──────────── */
.sec-cta { margin-top:var(--space-6); }
/* These are the only button in their section (no adjacent .btn-primary,
   unlike the hero/final-cta pairs), so give them the same accent-tinted
   treatment already used for .hero-pill and other secondary-but-visible
   elements — reusing existing tokens instead of a one-off color keeps it
   reading as part of the system rather than a new button style. */
.sec-cta .btn-outline {
  background:var(--accent-bg); border-color:rgba(81,122,75,.35); color:var(--accent-text);
}
.sec-cta .btn-outline:hover {
  background:var(--accent); border-color:var(--accent); color:#fff;
}

/* ── WHY / GROW CARDS (illustrated) ──────────────── */
.why-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; max-width:1100px; }
.why-card {
  background:white; border:1px solid var(--border); border-radius:var(--r);
  overflow:hidden; display:flex; flex-direction:column;
  transition:border-color .2s, transform .2s, box-shadow .2s;
}
.why-card:hover { border-color:#c4c4be; transform:translateY(-3px); box-shadow:0 14px 30px rgba(var(--shadow-rgb),.09); }
.why-media { position:relative; aspect-ratio:4/3; background:var(--beige); overflow:hidden; }
.why-media img { width:100%; height:100%; object-fit:cover; display:block; }
.why-step {
  position:absolute; left:12px; top:12px; width:28px; height:28px; border-radius:50%;
  background:var(--accent); color:white; font-size:var(--text-xs); font-weight:700;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-en);
  box-shadow:0 2px 8px rgba(var(--shadow-rgb),.2);
}
.why-body { padding:18px 20px 22px; }
.why-title { font-size:var(--text-base); font-weight:700; color:var(--text); margin-bottom:7px; line-height:1.4; }
.why-desc { font-size:var(--text-xs); color:var(--muted); line-height:1.65; }

/* ── CONTENT PREVIEW CARDS ──────────────────────── */
.preview-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:1100px; }
.preview-card {
  background:white; border:1px solid var(--border); border-radius:var(--r);
  padding:22px 22px 20px; transition:border-color .2s, transform .2s;
  cursor:pointer;
}
.preview-card:hover { border-color:#c4c4be; transform:translateY(-2px); }
.preview-kind {
  font-size:var(--text-2xs); font-weight:700; color:var(--muted); text-transform:uppercase;
  letter-spacing:.06em; display:block; margin-bottom:10px;
}
.preview-title { font-size:var(--text-sm); font-weight:700; color:var(--text); line-height:1.5; margin-bottom:14px; }
.preview-link { font-size:var(--text-xs); font-weight:700; color:var(--accent-text); }
.preview-link:hover { color:#3aa653; }

/* ── TESTIMONIALS ────────────────────────────────── */
.testi-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; max-width:1100px; }
.testi-card {
  background:white; border:1px solid var(--border); border-radius:var(--r);
  padding:26px 24px; transition:border-color .2s, transform .2s;
}
.testi-card:hover { border-color:#c4c4be; transform:translateY(-2px); }
.testi-quote { font-size:var(--text-sm); color:var(--text); line-height:1.75; margin-bottom:18px; }
.testi-name { font-size:var(--text-sm); font-weight:700; color:var(--text); }
.testi-role { font-size:var(--text-xs); color:var(--muted); margin-top:2px; }

/* ── FAQ ACCORDION ───────────────────────────────── */
.faq-list { display:flex; flex-direction:column; gap:10px; max-width:800px; }
.faq-item {
  background:white; border:1px solid var(--border); border-radius: var(--r);
  padding:16px 20px;
}
.faq-item summary {
  font-size:var(--text-sm); font-weight:700; color:var(--text); cursor:pointer;
  list-style:none; display:flex; align-items:center; justify-content:space-between;
  min-height:44px;
}
.faq-item summary::-webkit-details-marker { display:none; }
.faq-item summary::after {
  content:'+'; font-size:var(--text-lg); font-weight:400; color:var(--muted); margin-left:12px;
  transition:transform .2s;
}
.faq-item[open] summary::after { transform:rotate(45deg); }
.faq-item p { font-size:var(--text-sm); color:var(--muted); line-height:1.7; margin-top:14px; }

/* ── ABOUT / PHILOSOPHY — reuses .why-grid / .why-card ─── */

/* ── FINAL CTA ───────────────────────────────────── */
.final-cta {
  padding:var(--space-8) 6%; text-align:center; background:var(--text); color:white;
}
.final-cta h2 { font-size:clamp(24px,3.2vw,38px); font-weight:700; margin-bottom:12px; letter-spacing:-.3px; }
.final-cta p { font-size:var(--text-base); color:rgba(255,255,255,.72); margin-bottom:28px; }
/* White text at 4.96:1 — the previous #0e2f18 measured 2.94:1, failing AA.
   Hover darkens (matches every other button's hover direction on this site)
   instead of the old brighten-to-#3aa653, which also failed contrast (3.11:1). */
.final-cta .btn-primary { background:var(--accent); color:#fff; }
.final-cta .btn-primary:hover { background:var(--accent-text); }
.final-cta .btn-outline { border-color:rgba(255,255,255,.4); color:#fff; }
.final-cta .btn-outline:hover { border-color:#fff; }
.final-cta a:focus-visible { outline-color:var(--focus-on-dark); }
.cta-btns { display:flex; gap:var(--space-3); flex-wrap:wrap; justify-content:center; }

/* ── FOUNDERS (About page) ──────────────────────── */
/* container matches every other section's 1100px column for consistent
   page rhythm; cards themselves stay a sensible width for short text
   content instead of stretching to fill (they'd look sparse if they did) */
.founders-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,340px)); gap:18px; max-width:1100px; margin-top:32px; justify-content:start; }
.founder-card {
  background:white; border:1px solid var(--border); border-radius:var(--r); padding:22px 24px;
}
.founder-photo { width:56px; height:56px; border-radius:50%; object-fit:cover; display:block; margin-bottom:12px; border:1px solid var(--border); }
.founder-name { font-size:var(--text-base); font-weight:700; color:var(--text); }
.founder-cred { font-size:var(--text-xs); color:var(--muted); margin-top:4px; line-height:1.6; }

.foot-link-disabled { opacity:.5; cursor:not-allowed; }
.foot-link-disabled:hover { color:var(--muted) !important; }

/* ── SECTION LABEL ──────────────────────────────── */
.sec-label {
  font-size:var(--text-2xs); font-weight:700; color:var(--muted); letter-spacing:.1em;
  text-transform:uppercase; font-family:var(--font-en);
  margin-bottom:16px; display:block;
}

/* ── RESPONSIVE ─────────────────────────────────── */
@media (max-width:960px) {
  .vid-grid    { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .art-grid    { grid-template-columns:minmax(0,1fr); }
  /* Brand blurb needs its own line to stay readable; the four short
     link/contact/social columns pair up two-to-a-row underneath it —
     halves the footer's scroll height vs. stacking all five full-width. */
  .foot-top    { grid-template-columns:1fr 1fr; }
  .foot-top > div:first-child { grid-column:1 / -1; }
  .why-grid    { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .preview-grid,
  .testi-grid  { grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:700px) {
  .tool-grid   { grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); }

  /* Card rows become swipeable, snap-scrolling carousels on mobile instead
     of a tall vertical stack — each card sized so the next one peeks in,
     signalling there's more without needing dots/arrows. Applies to every
     "browse a few cards" row (why-cards, videos/reels, tool previews,
     testimonials); deliberately NOT applied to .tool-grid (searchable/
     filterable — users need to scan the whole set, not swipe past it),
     .art-grid (article previews read better as a scannable vertical list)
     or .founders-grid (too few items for a carousel to add anything). */
  .why-grid, .vid-grid, .preview-grid, .testi-grid {
    display:flex; grid-template-columns:none; overflow-x:auto; scroll-snap-type:x mandatory;
    gap:14px; padding-bottom:6px; scrollbar-width:none; -webkit-overflow-scrolling:touch;
  }
  .why-grid::-webkit-scrollbar, .vid-grid::-webkit-scrollbar,
  .preview-grid::-webkit-scrollbar, .testi-grid::-webkit-scrollbar { display:none; }
  .why-card, .vid-card, .preview-card, .testi-card { scroll-snap-align:start; }
  .why-card:hover, .vid-card:hover, .preview-card:hover, .testi-card:hover { transform:none; }
  .why-card                    { flex:0 0 78%; max-width:300px; }
  .vid-card                    { flex:0 0 85%; max-width:340px; }
  .preview-card, .testi-card   { flex:0 0 82%; max-width:320px; }

  .founders-grid { grid-template-columns:minmax(0,1fr); }
  .foot-bot   { flex-direction:column; gap:6px; }
  .hero       { padding:var(--space-8) 6% var(--space-7); }

  /* Nav reflows: brand + lang/CTA on top, main links become a scrollable
     strip below (still reachable + focusable, never fully hidden) */
  nav { height:auto; flex-wrap:wrap; padding:10px 5%; gap:10px 12px; }
  .nav-cta   { display:none; }
  .brand-logo-full { height:40px; }
  .main-nav {
    order:3; flex-basis:100%; justify-content:flex-start;
    overflow-x:auto; -webkit-overflow-scrolling:touch; gap:18px;
    padding-bottom:2px;
  }
  .main-nav li { flex-shrink:0; }
  .main-nav a { display:inline-flex; align-items:center; min-height:44px; }

  /* Tool modal → bottom drawer: full-width, slides up from the bottom edge,
     rounded only on top, stacked inputs (already the default single-column
     layout), full-height action buttons. Same DOM/JS, just a different shell. */
  #modal-wrap { align-items:flex-end; padding:0; }
  #modal-box {
    max-width:100%; max-height:88vh; border-radius: var(--radius-xl) 20px 0 0;
    animation:drawerIn .26s ease;
  }
  .modal-drag {
    display:block; width:36px; height:4px; border-radius:3px;
    background:var(--border); margin:10px auto 0;
  }
  .modal-hd { padding:14px 18px 14px; }
  .modal-body { padding:18px 18px 26px; }
  .share-row { flex-direction:column; }
}
@keyframes drawerIn { from{transform:translateY(100%);} to{transform:translateY(0);} }
@media (max-width:380px) {
  nav { padding:10px 4%; }
  .brand-logo-full { height:34px; }
  .lb { padding:5px 10px; }
}


/* ── PAGE ROUTER (Home / Learn / Tools / About) ─── */
.page-section[hidden] { display:none; }
/* showPage() in site.js scrollIntoView()s these on every nav click, but the
   64px sticky nav sits right on top of the scroll destination with no
   offset — without this, the new page's own heading loads hidden behind
   the header. Covers both the top-level page targets and the in-page
   anchors (#faq, #final-cta, #videos, #articles) the same router scrolls to. */
.page-section, .sec, .final-cta { scroll-margin-top:64px; }
@media (max-width:700px) {
  .page-section, .sec, .final-cta { scroll-margin-top:130px; }
}