.feature-preview-open { width:100%; margin-top:24px; padding:0; background:transparent; text-align:left; color:var(--accent); }
.feature-preview-open:hover { background:transparent; }
.feature-preview-open img { display:block; width:80px; height:80px; object-fit:contain; mix-blend-mode:multiply; transition:transform 250ms ease; }
.feature-preview-open:hover img { transform:translateY(-3px); }
.feature-preview-open > span { display:flex; gap:12px; align-items:center; font-size:13px; }
.feature-preview { width:min(1080px,calc(100% - 48px)); max-width:none; max-height:calc(100dvh - 48px); padding:0; border:0; border-radius:28px; background:var(--surface); color:var(--ink); box-shadow:0 24px 100px #20253610; overscroll-behavior:contain; }
.feature-preview::backdrop { background:rgba(239,242,251,.76); backdrop-filter:blur(12px); }
body:has(.feature-preview[open]) { overflow:hidden; }
.feature-shell { min-height:min(640px,calc(100dvh - 48px)); display:flex; flex-direction:column; gap:16px; padding:32px 40px 64px; }
.feature-top { display:flex; align-items:center; justify-content:space-between; gap:24px; }
.feature-close { display:flex; align-items:center; justify-content:center; width:44px; height:44px; padding:12px; flex-shrink:0; border-radius:50%; background:transparent; color:#50596c; }
.feature-close:hover { background:rgba(32,37,54,.06); }
.feature-close svg { width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.5; stroke-linecap:round; }
.feature-tabs { display:flex; gap:6px; padding:4px 2px; overflow-x:auto; scrollbar-width:thin; flex-shrink:0; }
/* Blur the colour layer only; labels and keyboard focus stay sharp. */
.feature-tabs button { position:relative; isolation:isolate; border:0; border-radius:12px; padding:10px 14px; background:transparent; color:var(--ink); font-size:14px; white-space:nowrap; box-shadow:none; }
.feature-tabs button::before { content:""; position:absolute; inset:2px; z-index:-1; border-radius:10px; background:var(--tab-color); opacity:.09; filter:blur(3px); transition:opacity 180ms ease; pointer-events:none; }
.feature-tabs button:hover { background:transparent; }
.feature-tabs button:hover::before { opacity:.17; }
.feature-tabs button[aria-selected=true] { background:transparent; box-shadow:none; }
.feature-tabs button[aria-selected=true]::before { opacity:.22; }
.feature-tabs button[aria-selected=true]:hover::before { opacity:.28; }
.feature-tabs button:nth-child(1) { --tab-color:#65799F; }
.feature-tabs button:nth-child(2) { --tab-color:#7386AA; }
.feature-tabs button:nth-child(3) { --tab-color:#8295B5; }
.feature-tabs button:nth-child(4) { --tab-color:#93A6BF; }
.feature-tabs button:nth-child(5) { --tab-color:#A6B7CB; }
.feature-tabs button:nth-child(6) { --tab-color:#BAC8D7; }
.feature-tabs button:focus-visible { outline-offset:0; }
.feature-panel { display:grid; grid-template-columns:minmax(0,410px) minmax(0,1fr); gap:32px; align-items:center; flex:1; }
.feature-copy { padding:24px 0; }
#feature-heading { font-size:clamp(30px,4vw,44px); line-height:1.09; font-weight:500; letter-spacing:-.045em; margin:0 0 24px; text-wrap:balance; }
#feature-description { font-size:17px; line-height:28px; color:#626c80; margin:0; max-width:410px; }
.feature-art { display:flex; align-items:center; justify-content:center; min-width:0; }
.feature-art img { width:100%; max-width:460px; height:auto; aspect-ratio:1; object-fit:contain; mask-image:radial-gradient(ellipse at center,black 48%,transparent 73%); }
.feature-panel:focus-visible { outline:2px solid var(--accent); outline-offset:6px; border-radius:8px; }
@media(max-width:760px) {
  .feature-preview { width:calc(100% - 24px); max-height:calc(100dvh - 24px); border-radius:20px; }
  .feature-shell { min-height:0; padding:24px; gap:14px; }
  .feature-top { gap:12px; } .feature-top .wordmark { font-size:11px; }
  .feature-tabs { gap:4px; }
  .feature-panel { grid-template-columns:1fr; gap:0; }
  .feature-copy { padding:16px 0 0; }
  #feature-heading { font-size:32px; margin-bottom:16px; }
  #feature-description { font-size:15px; line-height:24px; }
  .feature-art img { max-width:260px; }
}
@media(prefers-reduced-motion:reduce) { .feature-preview-open img, .feature-tabs button::before { transition:none; } }