:root { color-scheme: light; --ink:#20203a; --muted:#66657b; --purple:#6740d6; --wash:#f7f5ff; --line:#e7e3f0; --mint:#dff7ec; font-family:Inter,ui-rounded,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
* { box-sizing:border-box; }
body { margin:0; background:radial-gradient(circle at 92% 5%,#e3f8ee 0,transparent 24rem),var(--wash); color:var(--ink); }
a { color:#5630bf; text-underline-offset:3px; }
a:focus-visible,button:focus-visible { outline:3px solid #a48bff; outline-offset:3px; }
.page-shell { width:min(100% - 28px,820px); margin:auto; padding:18px 0 44px; }
.site-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:22px; }
.brand { display:inline-flex; align-items:center; gap:9px; color:var(--ink); font-size:17px; font-weight:900; text-decoration:none; letter-spacing:-.04em; }
.brand-mark { display:block; width:40px; height:40px; flex:0 0 40px; object-fit:contain; }
.header-cta,.cta { display:inline-flex; min-height:44px; align-items:center; justify-content:center; gap:8px; padding:0 15px; border:0; border-radius:14px; color:white; background:#6740d6; font-weight:850; text-decoration:none; }
.page-main { overflow:hidden; padding:clamp(23px,6vw,48px); border:1px solid #fff; border-radius:26px; background:rgba(255,255,255,.94); box-shadow:0 18px 55px rgba(52,39,104,.1); }
h1 { max-width:720px; margin:0 0 14px; font-size:clamp(35px,8vw,62px); line-height:1; letter-spacing:-.07em; }
h2 { margin:35px 0 12px; font-size:clamp(23px,5vw,31px); line-height:1.1; letter-spacing:-.045em; }
h3 { margin:24px 0 8px; font-size:19px; line-height:1.2; letter-spacing:-.025em; }
p,li { color:#4f4e63; font-size:16px; line-height:1.72; }
.lede { max-width:670px; margin:0 0 22px; color:#66657b; font-size:18px; line-height:1.58; }
.crumb { margin:0 0 25px; color:#77758a; font-size:13px; }
.callout { margin:24px 0; padding:18px 19px; border:1px solid #d8f0e4; border-radius:18px; background:#f2fcf7; }
.callout p:last-child { margin-bottom:0; }
.article-ad { margin:30px 0; padding:12px 0; border-block:1px solid var(--line); }
.article-ad-label { margin:0 0 8px; color:#77758a; text-align:center; font-size:11px; line-height:1.3; letter-spacing:.08em; text-transform:uppercase; }
.question-list { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; padding:0; list-style:none; counter-reset:ideas; }
.question-list li { position:relative; min-height:78px; margin:0; padding:15px 15px 14px 48px; border:1px solid var(--line); border-radius:16px; background:#fff; line-height:1.45; counter-increment:ideas; }
.question-list li::before { position:absolute; top:14px; left:14px; display:grid; width:24px; height:24px; place-items:center; border-radius:8px; color:#5630bf; background:#f0ebff; font-size:12px; font-weight:900; content:counter(ideas); }
.steps-list { display:grid; gap:13px; padding:0; list-style:none; counter-reset:steps; }
.steps-list li { position:relative; margin:0; padding:17px 18px 17px 58px; border:1px solid var(--line); border-radius:17px; background:#fff; counter-increment:steps; }
.steps-list li::before { position:absolute; top:17px; left:17px; display:grid; width:28px; height:28px; place-items:center; border-radius:10px; color:#5630bf; background:#f0ebff; font-size:13px; font-weight:900; content:counter(steps); }
.steps-list strong { display:block; margin-bottom:3px; color:var(--ink); }
.faq details { padding:15px 0; border-top:1px solid var(--line); }
.faq summary { color:var(--ink); cursor:pointer; font-weight:850; line-height:1.45; }
.faq details p { margin:9px 0 0; }
.page-footer { margin-top:22px; color:#77758a; text-align:center; font-size:12px; line-height:1.7; }
.page-footer nav { display:flex; flex-wrap:wrap; justify-content:center; gap:8px 16px; margin-top:8px; }
.page-footer a { color:#5f5b73; }
.consent-settings { padding:0; border:0; color:#5f5b73; background:transparent; font:inherit; text-decoration:underline; text-underline-offset:2px; cursor:pointer; }
.consent-banner { position:fixed; z-index:20; right:12px; bottom:max(12px,env(safe-area-inset-bottom)); left:12px; display:flex; max-width:680px; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; margin:0 auto; padding:16px; border:1px solid #dfd9ef; border-radius:18px; background:#fff; box-shadow:0 12px 38px rgba(33,27,62,.2); }
.consent-banner[hidden] { display:none; }
.consent-copy { flex:1 1 280px; margin:0; color:#56546a; font-size:13px; line-height:1.5; }
.consent-actions { display:flex; flex:1 1 210px; justify-content:flex-end; gap:8px; }
.consent-button { min-height:40px; padding:0 13px; border:1px solid #d8d3e5; border-radius:12px; color:var(--ink); background:white; font:inherit; font-size:13px; font-weight:800; }
.consent-button-primary { border-color:#6740d6; color:white; background:#6740d6; }
@media(max-width:600px) { .page-shell { width:min(100% - 20px,820px); padding-top:12px; } .site-header { margin-bottom:14px; } .header-cta { min-height:41px; padding:0 11px; font-size:13px; } .page-main { padding:23px 19px; border-radius:21px; } .question-list { grid-template-columns:1fr; gap:8px; } .question-list li { min-height:62px; padding-top:12px; } .question-list li::before { top:12px; } .consent-banner { right:9px; bottom:max(9px,env(safe-area-inset-bottom)); left:9px; padding:13px; } .consent-actions { justify-content:stretch; } .consent-button { flex:1; } }
@media(prefers-reduced-motion:reduce) { *,*::before,*::after { scroll-behavior:auto!important; transition-duration:.01ms!important; } }
