.interactive { background: radial-gradient(ellipse at top right, #301015 0, transparent 55%), #090a0d; }
.tool-tabs { display:flex; gap:10px; overflow-x:auto; margin:32px 0 20px; padding-bottom:8px; }
.tool-tabs a { flex:0 0 auto; padding:14px 18px; border:1px solid var(--line); border-radius:12px; font-weight:700; background:#14151a; }
.tool-tabs a[aria-current="true"] { background:var(--red); border-color:var(--red); color:white; }
.tool-panel { border:1px solid var(--line); border-radius:24px; padding:32px; background:linear-gradient(130deg,#1b1c22,#0c0d10); margin-bottom:20px; scroll-margin-top:100px; }
.tool-panel[hidden] { display:none; }
.tool-intro { max-width:750px; margin-bottom:28px; }
.tool-badge { color:#ead09a; font-size:.78rem; letter-spacing:.06em; text-transform:uppercase; font-weight:700; }
.tool-intro h3 { font-size:clamp(1.6rem,3vw,2.5rem); line-height:1.15; margin:14px 0; letter-spacing:-.03em; }
.tool-intro p,.tool-result p { color:var(--muted); }
.tool-columns { display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; }
.tool-form { display:grid; gap:18px; min-width:0; }
.tool-form label { display:grid; gap:8px; color:#eee; font-size:.92rem; }
.tool-form input,.tool-form select,.tool-form textarea { width:100%; min-width:0; max-width:100%; min-height:48px; padding:12px; color:white; color-scheme:dark; background:#090a0e; border:1px solid #555761; border-radius:10px; font:inherit; font-size:16px; }
.tool-form input[type="range"] { padding:0; accent-color:var(--red); }
.tool-input-row { display:grid; grid-template-columns:1fr 1fr; gap:14px; min-width:0; }
.tool-input-row label { min-width:0; }
.tool-form button { width:100%; }
.tool-result { min-width:0; border:1px solid #393329; border-radius:18px; background:linear-gradient(145deg,#272119,#141418); padding:26px; overflow-wrap:anywhere; }
.tool-result h4 { font-size:1.45rem; line-height:1.25; margin:12px 0 18px; }
.tool-result ol { padding-left:22px; }
.tool-result li { margin-bottom:12px; }
.tool-result .btn,.tool-result .text-link { display:flex; margin-top:16px; }
.tool-note { color:#b8bbc2; font-size:.82rem; margin:12px 0; }
.tool-result .result-number { display:block; font-size:clamp(1.8rem,4vw,3rem); font-weight:800; color:#f2d399; letter-spacing:-.04em; }
.demo-metrics { display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:24px; }
.demo-metrics div { min-width:0; padding:20px; border:1px solid var(--line); background:#111217; border-radius:14px; }
.demo-metrics span { display:block; font-size:.8rem; color:var(--muted); }
.demo-metrics strong { display:block; font-size:clamp(1.3rem,3vw,2rem); overflow-wrap:anywhere; }
.activity-list { max-height:260px; overflow-y:auto; }
.tool-text-button { color:#eed09b; background:none; border:0; padding:12px 0; cursor:pointer; font:inherit; text-decoration:underline; }
.case-study-card details { margin-top:22px; }
.case-study-card summary { cursor:pointer; color:#ead09a; min-height:44px; padding:10px 0; }
.case-study-card details p { margin:12px 0; }
.case-study-card details { scroll-margin-top:110px; }
.interactive :focus-visible,.case-study-card summary:focus-visible { outline:3px solid #eed09b; outline-offset:4px; }
.call-preview { white-space:pre-wrap; font:inherit; color:var(--muted); }
@media(max-width:700px) {
  .tool-panel { padding:20px 16px; border-radius:18px; }
  .tool-columns { grid-template-columns:1fr; gap:20px; }
  .tool-result { padding:20px; }
  .demo-metrics { gap:6px; }
  .demo-metrics div { padding:12px 8px; }
  .tool-tabs { margin-top:24px; }
  .tool-tabs a { padding:12px 14px; font-size:.88rem; }
}
