/* A brighter, layered canvas while keeping the NetConverter dark identity. */
body.product-story-page { background-color: #070b13; background-image: radial-gradient(ellipse 75% 35% at 16% 5%, rgba(49, 95, 166, .18), transparent 70%), radial-gradient(ellipse 55% 26% at 88% 36%, rgba(34, 92, 145, .09), transparent 72%); }
.product-story .story-eyebrow { color: #9cc3ff; }
.product-story .story-section-heading > p, .product-story .story-lede { color: #c2ccda; }
.product-story .story-checks article { border-top-color: #496383; }
.product-story .cta-button { box-shadow: 0 8px 28px rgba(40, 110, 225, .23); }
.terminal-tour { margin: 34px 0 40px; padding: 24px; border: 1px solid #344f74; border-radius: 18px; background: radial-gradient(ellipse at 16% 0%, #173152 0%, #0e1a2c 48%, #0b1422 100%); box-shadow: 0 18px 65px #0003; }
.terminal-tour-heading { display:flex; justify-content:space-between; align-items:center; gap:18px; margin-bottom:18px; }
.product-story .terminal-tour-eyebrow { margin:0 0 6px; color:#91bdff; font-size:.66rem; font-weight:700; letter-spacing:.11em; }
.product-story .terminal-tour-heading h3 { margin:0; font-size:1.08rem; }
.terminal-tour-heading button { flex:none; border:1px solid #5c83b4; border-radius:9px; padding:9px 12px; background:#172b48; color:#d9e9ff; font:inherit; font-size:.77rem; cursor:pointer; }
.terminal-tour-heading button:focus-visible { outline:2px solid #b4d4ff; outline-offset:3px; }
.terminal-tour-layout { display:grid; grid-template-columns:1.35fr 1fr; gap:20px; align-items:start; }
.terminal-tour-screen { margin:0; overflow:hidden; border:1px solid #415676; border-radius:10px; background:#090d15; }
.terminal-tour-screen img { display:block; width:100%; height:auto; }
.terminal-tour-screen figcaption { padding:9px 12px; color:#aabed8; font-size:.7rem; }
.terminal-tour-steps { list-style:none; margin:0; padding:0; display:grid; gap:8px; }
.terminal-tour-steps li { display:flex; gap:12px; padding:12px; border:1px solid transparent; border-radius:10px; background:#ffffff08; transition:background .35s, border-color .35s, box-shadow .35s; }
.terminal-tour-steps li.is-active { background:#1b3a60; border-color:#6ba8fb; box-shadow:0 0 22px #438cf52c; }
.terminal-tour-steps li > span { color:#8ebdff; font-size:.7rem; font-weight:700; padding-top:2px; }
.terminal-tour-steps strong { color:#edf5ff; font-size:.84rem; }
.product-story .terminal-tour-steps p { margin:3px 0 0; color:#c2d3e6; font-size:.76rem; line-height:1.5; }
.product-story .terminal-tour-note { margin:16px 0 0; color:#aebfd3; font-size:.75rem; line-height:1.6; }
@media (max-width:800px) { .terminal-tour-layout { grid-template-columns:1fr; } }
@media (max-width:600px) { .terminal-tour { padding:18px; } .terminal-tour-heading { align-items:flex-start; flex-direction:column; } }
@media (prefers-reduced-motion:reduce) { .terminal-tour-steps li { transition:none; } }
/* Estimator follows the same dark-blue surfaces, Inter labels and blue accents. */
body.estimator-theme { background-color:#070b13; background-image:radial-gradient(ellipse 75% 35% at 16% 5%, rgba(49,95,166,.18), transparent 70%), radial-gradient(ellipse 55% 26% at 88% 36%, rgba(34,92,145,.09), transparent 72%); }
.estimator-theme .estimator-page { font-family:Inter, -apple-system, BlinkMacSystemFont, sans-serif; }
.estimator-theme .estimator-page .eyebrow,.estimator-theme .estimator-page .section-label,.estimator-theme .estimator-page .step-number,.estimator-theme .estimator-page .checklist-title { font-family:Inter, sans-serif; color:#9cc3ff; letter-spacing:.12em; font-weight:600; }
.estimator-theme .estimator-page .hero h1 { letter-spacing:-.045em; }
.estimator-theme .estimator-page .hero h1 em { font-style:normal; color:#85acff; }
.estimator-theme .estimator-page .how-card,.estimator-theme .estimator-page .est-panel,.estimator-theme .est-report { background:#101c2d; border-color:#344d6b; border-radius:14px; }
.estimator-theme .est-field input,.estimator-theme .est-field select { background:#0b1524; border-color:#3a506d; border-radius:9px; }
.estimator-theme .estimator-page .est-field label { font-family:Inter,sans-serif; font-weight:600; letter-spacing:.08em; color:#c1d0e3; }
.estimator-theme .est-flag-chip.is-on { color:#eef5ff; background:#19375c; border-color:#75a8ef; }
.estimator-theme .estimator-page .btn { border-radius:10px; font-weight:600; }
.estimator-theme .estimator-page .btn-primary { box-shadow:0 8px 28px rgba(40,110,225,.23); }
.estimator-theme .est-flag-chip { color:#c0cee0; border-color:#405470; }
.estimator-theme .est-assumptions,.estimator-theme .estimator-page .est-field-hint { color:#b5c4d8; }
/* Migration cards provide context before the click. */
.home-refresh .home-paths { gap:14px; }
.home-refresh .home-paths a { position:relative; display:flex; align-items:center; min-height:140px; padding:23px 24px; background:linear-gradient(125deg,#142840,#0f1827 70%); border:1px solid #36506f; border-radius:14px; transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
.home-refresh .home-paths a:hover { transform:translateY(-3px); border-color:#79adf9; box-shadow:0 14px 34px #17396770; }
.home-refresh .home-paths .path-copy { display:grid; justify-items:start; gap:8px; min-width:0; }
.home-refresh .home-paths .path-kind { font-size:.62rem; font-weight:700; letter-spacing:.12em; color:#98c2ff; }
.home-refresh .home-paths strong { font-size:1.1rem; line-height:1.3; letter-spacing:-.02em; color:#f0f5ff; }
.home-refresh .home-paths strong span { color:#79acff; margin:0 2px; }
.home-refresh .home-paths .path-description { color:#b9c9dc; font-size:.77rem; line-height:1.5; }
.home-refresh .home-paths .path-arrow { display:grid; place-items:center; width:36px; height:36px; flex:none; border:1px solid #476994; border-radius:50%; color:#a8ceff; font-size:1.05rem; }
.home-refresh .home-paths a:focus-visible { outline:3px solid #bdd7ff; outline-offset:3px; }
@media(prefers-reduced-motion:reduce) { .home-refresh .home-paths a { transition:none; } .home-refresh .home-paths a:hover { transform:none; } }
#downloads .skill-card { position:relative; }
.skill-illustration { height:170px; overflow:hidden; margin:0 0 18px; border:1px solid #344f74; border-radius:12px; background:#0b1730; }
.skill-illustration img { display:block; width:100%; height:100%; object-fit:contain; object-position:center; }
@media (max-width:600px) { .skill-illustration { height:155px; } }