/* Signal — solutions pages. Matches the landing: feather-plum palette +
   Space Grotesk / Manrope (eslingshot.com fonts). Styles the existing
   solution-page class structure; fully self-contained (no site.css). */

:root {
  --paper: #f7f5f6; --paper-2: #ffffff; --paper-deep: #f0eaf0;
  --ink: #272330; --ink-soft: #5a5560; --ink-faint: #938d99;
  --line: #e8e2e9; --line-strong: #d9d1da;
  --plum: #6f5f7e; --plum-deep: #4f4360; --plum-2: #7d6c8a; --mauve: #a18a9e; --plum-wash: #efe9f1;
  --danger: #b0483f; --ok: #5a7d63;
  --display: "Space Grotesk", "Manrope", -apple-system, "Segoe UI", sans-serif;
  --body: "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --radius: 16px;
  --shadow: 0 1px 2px rgba(39,35,48,.05), 0 14px 34px -14px rgba(39,35,48,.16);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--body); line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: var(--plum); text-decoration: none; }
h1, h2, h3 { font-family: var(--display); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; text-wrap: balance; }
.container { max-width: 1040px; margin: 0 auto; padding: 0 24px; }

/* nav */
.site-header { background: rgba(247,245,246,.85); backdrop-filter: saturate(140%) blur(12px); -webkit-backdrop-filter: saturate(140%) blur(12px); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 10; }
.nav { display: flex; align-items: center; gap: 1.75rem; padding: 12px 24px; max-width: 1040px; margin: 0 auto; min-height: 64px; }
.logo { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--display); font-weight: 700; font-size: 1.31rem; letter-spacing: -0.02em; color: var(--plum-deep); }
.logo img { height: 27px; width: auto; margin: 0; vertical-align: middle; }
.logo-home { display: inline-flex; align-items: center; }
.logo-stack { display: inline-flex; flex-direction: column; justify-content: center; gap: 1px; line-height: 1; }
.logo-wm { font-family: var(--display); font-weight: 700; font-size: 1.31rem; letter-spacing: -0.02em; color: var(--plum-deep); }
.logo-by { font-family: var(--body); font-size: 0.6rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-faint); transition: color .15s ease; white-space: nowrap; }
.logo-by:hover { color: var(--plum); }
.nav-links { display: flex; align-items: center; gap: 1.5rem; list-style: none; margin: 0 auto 0 0.5rem; padding: 0; flex-wrap: wrap; }
.nav-links a { color: var(--ink-soft); font-size: 0.95rem; font-weight: 500; }
.nav-links a:hover { color: var(--plum); }
.nav-links a[aria-current="page"] { color: var(--plum); font-weight: 600; }
.nav-cta { display: flex; align-items: center; gap: 0.85rem; margin-left: auto; }
.nav-login { color: var(--ink-soft); font-weight: 500; font-size: 0.95rem; }
.nav-login:hover { color: var(--plum); }

/* breadcrumb */
.breadcrumb { max-width: 1040px; margin: 0 auto; padding: 18px 24px 0; font-size: 0.85rem; color: var(--ink-faint); display: flex; flex-wrap: wrap; gap: 0.4rem; align-items: center; }
.breadcrumb a { color: var(--ink-soft); }
.breadcrumb a:hover { color: var(--plum); }
.breadcrumb .sep { color: var(--line-strong); }
.breadcrumb [aria-current="page"] { color: var(--ink); font-weight: 500; }
.btn { display: inline-flex; align-items: center; justify-content: center; background: var(--plum); color: #fff; padding: 0.62rem 1.25rem; border-radius: 999px; font-weight: 600; font-size: 0.95rem; transition: background .15s ease, transform .15s ease, box-shadow .15s ease; }
.btn:hover { background: var(--plum-deep); transform: translateY(-1px); box-shadow: 0 12px 26px -12px rgba(79,67,96,.5); }

/* hero */
.sol-hero { padding: clamp(3rem, 6vw, 4.5rem) 0 2.4rem; }
.sol-hero .kicker { color: var(--plum); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; font-size: 0.78rem; margin: 0 0 12px; }
.sol-hero h1 { font-size: clamp(2rem, 4.2vw, 2.9rem); margin: 0 0 16px; max-width: 20ch; }
.sol-hero .lede { font-size: 1.18rem; color: var(--ink-soft); max-width: 60ch; margin: 0; }

/* sections */
.sol-section { padding: 2.2rem 0; }
.sol-section h2 { font-size: clamp(1.4rem, 2.6vw, 1.85rem); margin: 0 0 16px; }
.sol-problem p { max-width: 70ch; color: var(--ink-soft); margin: 0 0 1rem; }

.sol-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); gap: 16px; padding: 0; margin: 0; list-style: none; }
.sol-cards li { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 22px; transition: border-color .15s ease, transform .15s ease; }
.sol-cards li:hover { border-color: var(--plum); transform: translateY(-2px); }
.sol-cards h3 { margin: 0 0 8px; font-size: 1.08rem; }
.sol-cards p { margin: 0; color: var(--ink-soft); font-size: 0.95rem; }

.sol-how { background: var(--paper-2); border: 1px solid var(--line); border-radius: 18px; padding: clamp(1.6rem, 3vw, 2.2rem); box-shadow: var(--shadow); }
.sol-how ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.sol-how li { padding-left: 30px; position: relative; color: var(--ink-soft); }
.sol-how li::before { content: "✽"; position: absolute; left: 0; top: 1px; color: var(--plum); }
.sol-how strong { color: var(--ink); font-weight: 600; }

.sol-faq details { background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 14px 18px; margin-bottom: 10px; }
.sol-faq summary { cursor: pointer; font-weight: 600; font-family: var(--display); color: var(--ink); }
.sol-faq p { color: var(--ink-soft); margin: 10px 0 0; max-width: 70ch; }

.cta-banner { background: linear-gradient(150deg, #352c43 0%, #4f4360 60%, #6f6079 100%); color: #fff; border-radius: 22px; padding: clamp(2.4rem, 4vw, 3.4rem) 2rem; text-align: center; margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.cta-banner h2 { margin: 0 0 10px; font-size: clamp(1.5rem, 3vw, 2rem); color: #fff; }
.cta-banner p { margin: 0 0 22px; color: rgba(255,255,255,.85); }
.cta-banner .btn { background: #f3eef3; color: var(--plum-deep); }
.cta-banner .btn:hover { background: #fff; }

/* solutions index grid + related links */
.sol-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); gap: 16px; padding: 0; margin: 32px 0 0; list-style: none; }
.sol-grid li { background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; transition: border-color .15s ease, transform .15s ease; }
.sol-grid li:hover { border-color: var(--plum); transform: translateY(-2px); }
.sol-grid a { display: block; padding: 22px; color: inherit; height: 100%; }
.sol-grid .sol-ic { width: 46px; height: 46px; border-radius: 13px; background: linear-gradient(135deg, var(--plum-2), var(--plum-deep)); color: #fff; display: grid; place-items: center; margin-bottom: 15px; box-shadow: 0 9px 20px -9px rgba(79,67,96,.55); }
.sol-grid .sol-ic svg { width: 23px; height: 23px; }
.sol-grid h2 { font-size: 1.05rem; margin: 0 0 6px; color: var(--ink); }
.sol-grid p { margin: 0; font-size: 0.92rem; color: var(--ink-soft); }

/* footer (light, matches landing) */
.site-footer { background: var(--paper-deep); color: var(--ink-soft); margin-top: clamp(3.5rem, 6vw, 5rem); padding: 48px 0; border-top: 1px solid var(--line); }
.site-footer .logo { color: var(--plum-deep); }
.site-footer a { color: var(--ink-soft); margin-right: 16px; }
.site-footer a:hover { color: var(--plum); }
.site-footer p { margin: 0.5rem 0; }
.footer-copy { color: var(--ink-faint); font-size: 0.85rem; margin-top: 24px; }

@media (max-width: 640px) { .sol-hero h1 { font-size: 1.8rem; } .nav-links { gap: 12px; } }
/* keep the header within the viewport on phones — no hamburger here, so drop the
   nav CTA buttons (the big "Start free" sits in the page CTA banner) and keep theme */
@media (max-width: 768px) {
  .nav-cta .btn, .nav-cta .nav-login { display: none; }
}
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--plum); outline-offset: 3px; border-radius: 6px; }

/* nav CTA icons + theme toggle */
.nav-login { display: inline-flex; align-items: center; gap: 0.4rem; }
.cta-ic { width: 16px; height: 16px; flex: none; }
.btn .cta-ic { width: 15px; height: 15px; }
.theme-toggle { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 10px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-soft); cursor: pointer; transition: color .15s ease, border-color .15s ease; }
.theme-toggle:hover { color: var(--plum); border-color: var(--plum); }
.theme-toggle svg { width: 18px; height: 18px; }
.theme-toggle .ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: block; }

/* ---------- dark mode ---------- */
:root { color-scheme: light; }
[data-theme="dark"] {
  color-scheme: dark;
  --paper: #17131f; --paper-2: #221d2e; --paper-deep: #1e1928;
  --ink: #f2eef7; --ink-soft: #bcb4c9; --ink-faint: #8c8499;
  --line: rgba(255,255,255,.10); --line-strong: rgba(255,255,255,.18);
  --plum: #c3aed4; --plum-deep: #d8cbe1; --plum-2: #b19dc0; --mauve: #a18a9e; --plum-wash: rgba(160,138,158,.16);
  --danger: #e59a90; --ok: #86c99a;
  --shadow: 0 1px 2px rgba(0,0,0,.5), 0 14px 34px -14px rgba(0,0,0,.65);
}
[data-theme="dark"] .site-header { background: rgba(23,19,31,.82); }
[data-theme="dark"] .btn { background: #7d6c8a; color: #fff; }
[data-theme="dark"] .btn:hover { background: #8a7897; }
[data-theme="dark"] .sol-grid .sol-ic { background: linear-gradient(135deg, #7d6c8a, #5b4f6b); }
[data-theme="dark"] .cta-banner .btn { background: #2c2638; color: #f2eef7; }