/* perspectives-v10.css: Perspectives index, article pages, use-case sections and the guide form. */

/* ---- index */
.persp-feature{display:grid;grid-template-columns:1.2fr 1fr;gap:48px;align-items:end;padding:44px 0;border-top:1px solid var(--line-on-ink);border-bottom:1px solid var(--line-on-ink)}
.persp-feature h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,3.6vw,52px);line-height:1.08}
.persp-feature h2 em{color:var(--amber-soft)}
.persp-feature p{color:var(--bone-2);font-size:17px;line-height:1.7}
.persp-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px;margin-top:44px}
.persp-card{display:flex;flex-direction:column;gap:12px;padding:26px;border:1px solid var(--line-on-ink);border-radius:2px;color:inherit;text-decoration:none;transition:border-color .2s}
.persp-card:hover,.persp-card:focus-visible{border-color:var(--amber)}
.persp-card h3{font-family:var(--serif);font-weight:400;font-size:26px;line-height:1.15}
.persp-card p{color:var(--bone-2);font-size:15px;line-height:1.65}
.persp-meta,.persp-card .persp-meta{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3);margin-top:auto}

/* ---- article */
.post{max-width:760px;padding-top:150px;padding-bottom:40px}
.crumbs{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3)}
.crumbs a{color:var(--amber)}
.post-head h1{font-family:var(--serif);font-weight:400;font-size:clamp(40px,5vw,66px);line-height:1.06;margin-top:26px}
.post-head h1 em{color:var(--amber-soft)}
.byline{margin-top:22px;font-size:14px;color:var(--bone-3)}
.byline a{color:var(--bone)}
.answer{margin-top:36px;padding:26px 28px;background:var(--ink-2);border-left:3px solid var(--amber)}
.answer .lbl{font-family:var(--mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--amber)}
.answer p{margin-top:10px;font-family:var(--serif);font-size:22px;line-height:1.45;color:var(--bone)}
.post-body{margin-top:40px;font-size:18px;line-height:1.75;color:var(--bone-2)}
.post-body h2,.post-faq h2,.post-sources h2{font-family:var(--serif);font-weight:400;font-size:clamp(28px,3vw,38px);line-height:1.15;color:var(--bone);margin:48px 0 16px}
.post-body h3{font-family:var(--serif);font-weight:400;font-size:26px;color:var(--bone);margin:34px 0 10px}
.post-body p+p,.post-body p+ul,.post-body ul+p,.post-body ol+p,.post-body p+ol{margin-top:16px}
.post-body ul,.post-body ol{padding-left:22px}
.post-body li+li{margin-top:8px}
.post-body strong{color:var(--bone);font-weight:600}
.post-body a{color:var(--amber)}
.post-faq h3{font-family:var(--sans);font-size:18px;font-weight:600;color:var(--bone);margin-top:26px}
.post-faq p{margin-top:8px;font-size:17px;line-height:1.7;color:var(--bone-2)}
.post-sources ol{padding-left:20px;font-size:14px;line-height:1.6;color:var(--bone-3)}
.post-sources li+li{margin-top:8px}
.post-sources a{color:var(--amber)}
.related{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:28px}

/* ---- use cases (index-v10, solutions-v10) */
.uc-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:40px}
.uc{padding:28px;border:1px solid var(--line-on-ink);border-radius:2px;background:color-mix(in oklab,var(--ink-2) 70%,transparent)}
.uc .k{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--amber)}
.uc h3{font-family:var(--serif);font-weight:400;font-size:28px;line-height:1.15;margin:10px 0 14px}
.uc dl{display:grid;grid-template-columns:130px 1fr;gap:10px 18px;font-size:15px;line-height:1.6}
.uc dt{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--bone-3);padding-top:3px}
.uc dd{color:var(--bone-2)}
.uc dd b{color:var(--bone);font-weight:600}
.uc-group{margin-top:56px}
.uc-group>h3{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--bone-3);padding-bottom:12px;border-bottom:1px solid var(--line-on-ink)}
.uc-stat{display:flex;gap:22px;align-items:baseline;margin-top:30px;max-width:780px}
.uc-stat .n{font-family:var(--serif);font-size:64px;line-height:1;color:var(--amber)}
.uc-stat p{color:var(--bone-2);font-size:16px;line-height:1.6}
.uc-stat .src{display:block;margin-top:6px;font-size:13px;color:var(--bone-3)}
.uc-light{background:var(--bone);color:var(--ink)}
.uc-light .pre,.uc-light .h-1{color:var(--ink)}
.uc-light .h-1 em{color:var(--amber-deep)}
.uc-light .uc{background:var(--warm-white);border-color:color-mix(in oklab,var(--ink) 18%,transparent)}
.uc-light .uc .k{color:var(--amber-deep)}
.uc-light .uc dt{color:color-mix(in oklab,var(--ink) 60%,transparent)}
.uc-light .uc dd{color:color-mix(in oklab,var(--ink) 85%,transparent)}
.uc-light .uc dd b{color:var(--ink)}
.uc-light .uc-stat .n{color:var(--amber-deep)}
.uc-light .uc-stat p{color:color-mix(in oklab,var(--ink) 85%,transparent)}
.uc-light .uc-stat .src{color:color-mix(in oklab,var(--ink) 60%,transparent)}
.uc-light .text-link{color:var(--ink)}

/* ---- guide form */
.guide-cta{background:var(--ink-2);border-top:1px solid var(--line-on-ink)}
.guide-grid{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
.guide-grid .h-1{margin-top:18px}
.guide-grid>div>p{margin-top:20px;color:var(--bone-2);font-size:17px;line-height:1.7;max-width:46ch}
.lg-form,.lg-next{display:grid;gap:16px}
.lg-form label{display:grid;gap:6px;font-size:13px;color:var(--bone-3)}
.lg-form input[type=text],.lg-form input[type=email]{font:inherit;font-size:16px;color:var(--bone);background:var(--ink);border:1px solid var(--line-on-ink);border-radius:2px;padding:13px 14px}
.lg-form input:focus-visible{outline:2px solid var(--amber);outline-offset:2px}
.lg-form .check{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;font-size:14px;line-height:1.55;color:var(--bone-2)}
.lg-form .check input{width:18px;height:18px;margin-top:2px;accent-color:var(--amber)}
.lg-pick{display:grid;gap:10px;border:0;padding:0;margin:0}
.lg-pick legend{font-size:13px;color:var(--bone-3);margin-bottom:6px}
.lg-pick label{display:grid;grid-template-columns:20px 1fr;gap:12px;align-items:start;padding:12px 14px;border:1px solid var(--line-on-ink);border-radius:2px;font-size:15px;color:var(--bone-2);cursor:pointer}
.lg-pick label:has(input:checked){border-color:var(--amber);color:var(--bone)}
.lg-pick input{accent-color:var(--amber);margin-top:3px}
.lg-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.lg-note{font-size:13px;line-height:1.6;color:var(--bone-3)}
.lg-note a{color:var(--amber)}
.lg-status{min-height:1.4em;font-size:14px;color:var(--amber-soft)}
.lg-next h3{font-family:var(--serif);font-weight:400;font-size:32px;line-height:1.1}
.lg-next h3:focus{outline:none}
.lg-upsell{margin-top:12px;padding-top:22px;border-top:1px solid var(--line-on-ink);display:grid;gap:14px}
.lg-upsell p{color:var(--bone-2);font-size:15px;line-height:1.65}
.lg-done{font-family:var(--serif);font-size:24px;line-height:1.4;color:var(--bone)}
.lg-form .btn,.lg-next .btn{justify-self:start}

@media(max-width:900px){
 .persp-feature,.guide-grid{grid-template-columns:1fr;gap:28px}
 .persp-grid,.related,.uc-grid{grid-template-columns:1fr}
 .post{padding-top:130px}
 .answer p{font-size:20px}
 .post-body{font-size:17px}
 .uc dl{grid-template-columns:1fr;gap:2px}
 .uc dd{margin-bottom:10px}
 .uc-stat .n{font-size:48px}
}

/* infographic under the short answer (2026-10-19) */
.post-figure{margin:28px 0 8px}
.post-figure img{display:block;width:100%;height:auto;border-radius:14px}
.post-figure figcaption{font-size:.85rem;line-height:1.5;opacity:.78;margin-top:10px}