.feature-hero { padding: 88px 0 58px; }
.feature-hero .eyebrow { margin-bottom: 24px; }
.feature-hero h1 { max-width: 900px; margin: 0; font: 600 clamp(44px,7vw,82px)/.99 var(--mono); letter-spacing: -.055em; }
.feature-hero h1 span { color: var(--accent); }
.feature-hero .lede { max-width: 760px; margin: 28px 0 0; color: var(--ink-dim); font-size: clamp(18px,2.2vw,23px); line-height: 1.55; }
.answer-panel { margin: 32px 0 0; padding: 25px 27px; max-width: 860px; border: 1px solid var(--line-strong); border-left: 3px solid var(--accent); border-radius: 12px; background: var(--bg-2); }
.answer-panel h2 { margin: 0 0 9px; font-size: 18px; }
.answer-panel p { margin: 0; color: var(--ink-dim); font-size: 17px; line-height: 1.65; }
.feature-layout { display: grid; grid-template-columns: minmax(0,1fr) 300px; gap: 72px; padding-bottom: 100px; }
.feature-body { max-width: 760px; font-size: 17px; line-height: 1.75; }
.feature-body h2 { margin: 55px 0 14px; font-size: clamp(28px,4vw,42px); line-height: 1.12; letter-spacing: -.035em; }
.feature-body h3 { margin: 30px 0 10px; font-size: 22px; }
.feature-body p { margin: 0 0 19px; color: var(--ink-dim); }
.feature-body strong { color: var(--ink); }
.feature-body ul, .feature-body ol { margin: 0 0 24px; padding-left: 24px; color: var(--ink-dim); }
.feature-body li { margin: 9px 0; padding-left: 4px; }
.feature-body li::marker { color: var(--accent); font-family: var(--mono); }
.feature-shot { margin: 34px 0; overflow: hidden; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); }
.feature-shot img { width: 100%; height: auto; }
.feature-shot figcaption { padding: 11px 15px; border-top: 1px solid var(--line); color: var(--ink-faint); font: 11px/1.5 var(--mono); }
.feature-diagram { display: grid; grid-template-columns: repeat(3,1fr); gap: 10px; margin: 34px 0; }
.feature-diagram span { min-height: 105px; padding: 16px; display: flex; align-items: flex-end; border: 1px solid var(--line); border-radius: 11px; background: var(--bg-2); color: var(--ink); font: 12px/1.5 var(--mono); }
.feature-diagram span:nth-child(2) { border-color: rgba(217,119,87,.45); color: var(--accent); }
.honest-note { margin: 34px 0; padding: 21px 23px; border-radius: 11px; background: color-mix(in srgb,var(--accent) 8%,var(--bg-2)); border: 1px solid rgba(217,119,87,.25); }
.honest-note strong { display: block; margin-bottom: 6px; font-family: var(--mono); }
.honest-note p { margin: 0; }
.feature-aside { position: relative; }
.feature-aside-inner { position: sticky; top: 96px; padding: 22px; border: 1px solid var(--line); border-radius: 13px; background: var(--bg-2); }
.feature-aside .aside-label { margin-bottom: 13px; color: var(--accent); font: 11px/1.3 var(--mono); letter-spacing: .12em; text-transform: uppercase; }
.feature-aside a { display: block; padding: 9px 0; color: var(--ink-dim); font-size: 14px; border-bottom: 1px solid var(--line); }
.feature-aside a:hover { color: var(--accent); }
.feature-aside .button { margin-top: 18px; border-bottom: 1px solid var(--accent); color: #fff8f2; }
.faq-list { margin-top: 24px; }
.faq-item { padding: 20px 0; border-top: 1px solid var(--line); }
.faq-item h3 { margin: 0 0 8px; font-size: 19px; }
.faq-item p { margin: 0; }
.feature-hub-grid { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 16px; padding: 10px 0 100px; }
.feature-card { min-height: 300px; padding: 28px; display: flex; flex-direction: column; border: 1px solid var(--line); border-radius: 14px; background: var(--bg-2); transition: .2s ease; }
.feature-card:hover { transform: translateY(-3px); border-color: rgba(217,119,87,.42); }
.feature-card .n { color: var(--accent); font: 11px/1.3 var(--mono); letter-spacing: .12em; }
.feature-card h2 { margin: 30px 0 12px; font-size: 27px; line-height: 1.08; letter-spacing: -.03em; }
.feature-card p { margin: 0 0 24px; color: var(--ink-dim); }
.feature-card .read-link { margin-top: auto; color: var(--accent); font: 12px/1.4 var(--mono); }
html[data-theme] .answer-panel, html[data-theme] .feature-card, html[data-theme] .feature-aside-inner, html[data-theme] .feature-diagram span { transition: background-color .25s ease,border-color .25s ease,color .25s ease; }
@media(max-width:900px){.feature-layout{grid-template-columns:1fr;gap:24px}.feature-aside{display:none}}
@media(max-width:700px){.feature-hub-grid{grid-template-columns:1fr}.feature-hero{padding-top:64px}.feature-diagram{grid-template-columns:1fr}.feature-diagram span{min-height:76px}}