/* Shared stylesheet for the marketing-side pages (features, pricing,
   templates, guides, help, billing). Same paper/ink/coral palette and
   typography as the landing page. */
/* CSS vars scoped to .mkt — globals.css redeclares --muted/--ink etc. on
   :root with the dashboard palette, so the previous :root rule here was
   getting clobbered + collapsing every help/pricing text into a light gray
   that read as invisible on paper-cream. Scoping at .mkt beats :root by
   specificity inside the marketing surface. */
.mkt{
  --ink:#251044;--ink-2:#3b2b56;--muted:#746b80;
  --paper:#fffaf0;--paper-2:#f8efdf;--paper-3:#fffdf8;
  --line:#eadfcb;
  --brand:#2b0f55;--purple:#5d2be7;--coral:#ff6f61;--green:#21a567;--blue:#3149a8;
  --shadow:0 28px 90px rgba(45,25,10,.13);--shadow-sm:0 16px 42px rgba(45,25,10,.10);
  --radius:28px;
  margin:0;font-family:Manrope,system-ui,-apple-system,Segoe UI,sans-serif;color:var(--ink);background:var(--paper);overflow-x:hidden;position:relative;min-height:100vh;
}
.mkt *{box-sizing:border-box}
/* Tailwind v4 ships a utility `.collapse { visibility: collapse; }` (intended
   for table-row hiding) that COLLIDES with Bootstrap's accordion `.collapse`.
   Bootstrap toggles `display` to show/hide accordion bodies — Tailwind's
   visibility:collapse on the same element silently hides the content even
   while it's "open." Result: click an accordion, see content for ~1 frame
   during `.collapsing` (no `.collapse` class), then Bootstrap restores
   `.collapse show` and Tailwind hides it again. Override per .mkt. */
.mkt .collapse{visibility:visible}
.mkt:before{content:"";position:fixed;inset:0;pointer-events:none;z-index:-2;background:radial-gradient(circle at 12% 8%,rgba(255,111,97,.12),transparent 28%),radial-gradient(circle at 85% 12%,rgba(93,43,231,.12),transparent 30%),linear-gradient(180deg,#fffaf0 0%,#fbf3e6 50%,#fffaf0 100%)}
.mkt:after{content:"";position:fixed;inset:0;pointer-events:none;z-index:-1;opacity:.26;background-image:url("/landing/new-design/noise.png")}
.mkt a{text-decoration:none;color:inherit}
.mkt .container{max-width:1180px}
.mkt .text-muted{color:var(--muted)!important}
.mkt h1,.mkt h2,.mkt h3,.mkt .display-font{font-family:Fraunces,Georgia,serif;color:var(--ink);letter-spacing:-.018em}
.mkt .script{font-family:Caveat,cursive;color:var(--coral);font-weight:700}
.mkt .btn{border-radius:10px;font-weight:800;padding:.9rem 1.15rem}
.mkt .btn-primary{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:0 12px 24px rgba(43,15,85,.22)}
.mkt .btn-primary:hover{background:#1d0a3e;border-color:#1d0a3e;color:#fff;transform:translateY(-1px)}
.mkt .btn-outline-dark{border-color:var(--brand);color:var(--brand);background:#fffaf0}
.mkt .btn-outline-dark:hover{background:var(--brand);color:#fff}
.mkt .btn-coral{background:var(--coral);border-color:var(--coral);color:#fff}
.mkt .btn-coral:hover{background:#ee5a4c;border-color:#ee5a4c;color:#fff}
.mkt .navbar{padding:1rem 0;background:rgba(255,250,240,.84);backdrop-filter:blur(18px);border-bottom:1px solid rgba(234,223,203,.75)}
.mkt .nav-link{font-weight:800;color:var(--ink-2)!important;font-size:.94rem}
.mkt .nav-link:hover{color:var(--coral)!important}
.mkt .logo{display:flex;align-items:center;gap:.72rem}
.mkt .logo-mark{width:48px;height:48px;display:block;object-fit:contain;flex:0 0 auto;border-radius:12px}
.mkt .logo-text strong{display:block;font-family:Manrope,sans-serif;font-size:1.08rem;font-weight:900;letter-spacing:0;color:var(--brand);line-height:1.05;max-width:220px}
.mkt .section-pad{padding:4.7rem 0}
.mkt .section-title{text-align:center;max-width:850px;margin:0 auto 2.2rem}
.mkt .section-title h2{font-size:clamp(2.2rem,4vw,4rem);line-height:1.07;font-weight:800;margin:0}
.mkt .section-title p{color:var(--muted);font-weight:600;line-height:1.72;margin:1rem auto 0;max-width:720px}
.mkt .page-hero{padding:7.5rem 0 2.5rem;text-align:center}
.mkt .page-hero .eyebrow{display:inline-flex;align-items:center;gap:.5rem;color:var(--coral);font-size:.8rem;letter-spacing:.08em;text-transform:uppercase;font-weight:900;margin-bottom:1rem}
.mkt .page-hero .eyebrow:before{content:"";width:9px;height:9px;border-radius:50%;background:var(--coral);box-shadow:0 0 0 6px rgba(255,111,97,.13)}
.mkt .page-hero h1{font-size:clamp(2.6rem,5vw,4.6rem);line-height:1.03;font-weight:800;margin:0 0 1rem;text-wrap:balance}
.mkt .page-hero p{font-size:1.13rem;line-height:1.78;color:var(--ink-2);max-width:720px;margin:0 auto;font-weight:600}
.mkt .mkt-card{background:#fffdf8;border:1px solid var(--line);border-radius:18px;padding:1.5rem;box-shadow:var(--shadow-sm);height:100%}
.mkt .mkt-card h3{font-size:1.35rem;font-weight:800;margin-bottom:.65rem}
.mkt .mkt-card p{color:var(--muted);font-weight:600;line-height:1.65}
.mkt .icon-circle{width:54px;height:54px;border-radius:50%;background:var(--brand);color:#fff;display:grid;place-items:center;margin-bottom:1rem}
.mkt .icon-circle svg{width:26px;height:26px;stroke:currentColor;stroke-width:2.2;fill:none;stroke-linecap:round;stroke-linejoin:round}
.mkt .footer{background:linear-gradient(135deg,#17052e,#2b0f55);color:#fff;padding:3rem 0;margin-top:2rem}
.mkt .footer .logo-text strong{color:#fff}
.mkt .footer a{display:block;color:#d9cfff;margin:.35rem 0;font-weight:700}
.mkt .footer small{color:#d9cfff}
@media(min-width:992px){.mkt .navbar-expand-lg .navbar-collapse{display:flex!important;flex-basis:auto;visibility:visible!important}.mkt .navbar-expand-lg .navbar-toggler{display:none}.mkt .navbar-expand-lg .navbar-nav{flex-direction:row;visibility:visible!important}.mkt .navbar-expand-lg .navbar-nav *{visibility:visible!important}.mkt .ms-auto{margin-left:auto!important}.mkt .align-items-lg-center{align-items:center!important}}
@media(max-width:575px){.mkt .page-hero{padding-top:6rem}.mkt .section-pad{padding:3.4rem 0}}
/* Scroll-reveal: kept opacity:1 by default at first paint. LandingReveal
   adds data-reveal-pending after hydration (via JS, not via static SSR
   attribute) to switch elements into the hidden-pre-reveal state. Without
   this, any element that JS doesn't visit stays opacity:0 forever — which
   silently hid every accordion body on /help and /pricing. */
.mkt [data-reveal-pending="true"]{opacity:0;transform:translateY(18px);transition:opacity .7s cubic-bezier(0.34,1.56,0.64,1),transform .7s cubic-bezier(0.34,1.56,0.64,1);will-change:opacity,transform}
.mkt [data-reveal-pending="true"][data-reveal-in="true"]{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion: reduce){.mkt [data-reveal-pending="true"]{opacity:1!important;transform:none!important;transition:none!important}}