:root{--bg:#06131e;--panel:#0c1c2a;--panel2:#102638;--line:#21435f;--text:#eaf6ff;--muted:#b6d4e8;--blue:#57c7ff;--cyan:#9ef1ff;--green:#89f0c1;--red:#ff6f93;--max:1200px;}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,Arial,sans-serif;background:radial-gradient(circle at top,#0e2437 0,#071522 38%,#06111a 100%);color:var(--text);line-height:1.6}a{color:#8cd8ff;text-decoration:none}a:hover{text-decoration:underline}.wrap{width:min(var(--max),calc(100% - 2rem));margin-inline:auto}.topbar{position:sticky;top:0;z-index:40;background:rgba(4,13,20,.82);backdrop-filter:blur(12px);border-bottom:1px solid rgba(140,216,255,.14)}.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.8rem 0}.brand{display:flex;align-items:center;gap:.9rem;color:#fff;white-space:nowrap}.brand strong{display:block;font-size:1.05rem}.brand small{display:block;color:var(--muted)}.nav{display:flex;gap:1rem;flex-wrap:wrap;justify-content:flex-end}.nav a{padding:.5rem .75rem;border:1px solid transparent;border-radius:999px}.nav a:hover{border-color:rgba(140,216,255,.22);background:rgba(255,255,255,.03);text-decoration:none}.hero{position:relative;overflow:hidden;border-bottom:1px solid rgba(140,216,255,.12);background:linear-gradient(180deg,rgba(16,39,60,.4),rgba(7,20,32,.8)), url('/assets/brand/source-icon.png') center/contain no-repeat;min-height:260px}.hero-overlay{position:absolute;inset:0;background:radial-gradient(circle at center,rgba(106,208,255,.18),transparent 38%),linear-gradient(90deg,rgba(7,20,32,.96),rgba(7,20,32,.58) 42%,rgba(7,20,32,.9) 100%)}.hero-content{position:relative;padding:3rem 0 3.2rem}.eyebrow{text-transform:uppercase;letter-spacing:.15em;color:#9ddcff;font-size:.78rem;font-weight:700}.hero h1{margin:.4rem 0 1rem;font-size:clamp(2rem,4vw,3.6rem);line-height:1.08;max-width:12ch}.lede{max-width:60ch;color:#dbefff;font-size:1.05rem}.chips{display:flex;gap:.65rem;flex-wrap:wrap;margin-top:1rem}.chip{display:inline-flex;align-items:center;border:1px solid rgba(140,216,255,.16);background:rgba(255,255,255,.03);padding:.55rem .85rem;border-radius:999px;font-size:.9rem;color:#d8efff}.chip.primary{border-color:rgba(156,239,255,.35);background:rgba(87,199,255,.12)}.content-grid{display:grid;grid-template-columns:280px minmax(0,1fr);gap:1.35rem;padding:1.5rem 0 2.5rem}.side-card,.panel,.answer-box,.feature-card,.home-card,.tool-card,.diagram-card{background:linear-gradient(180deg,rgba(17,38,56,.95),rgba(10,25,38,.95));border:1px solid rgba(140,216,255,.12);border-radius:22px;box-shadow:0 10px 30px rgba(0,0,0,.22)}.side-card{padding:1rem}.sticky{position:sticky;top:5rem}.side-links,.checklist,.meta-list,.card-list,.related-grid,.stat-list{list-style:none;padding:0;margin:0}.side-links li+li,.checklist li+li,.card-list li+li{margin-top:.55rem}.side-links a,.related-grid a{display:block;padding:.55rem .65rem;border-radius:12px;background:rgba(255,255,255,.02)}.side-links a:hover,.related-grid a:hover{background:rgba(87,199,255,.12);text-decoration:none}.article>*+*{margin-top:1rem}.article h2{font-size:1.55rem;margin-top:1.6rem}.article h3{font-size:1.15rem;margin-top:1.1rem;color:#e8fbff}.answer-box{padding:1.1rem 1.2rem;background:linear-gradient(135deg,rgba(26,67,103,.95),rgba(15,28,44,.95))}.answer-box strong{display:block;font-size:1.02rem;margin-bottom:.35rem}.panel{padding:1.1rem 1.15rem}.checklist li{padding-left:1.2rem;position:relative}.checklist li:before{content:'•';position:absolute;left:0;color:var(--cyan)}.callout{padding:1rem 1.15rem;border-left:4px solid var(--red);background:rgba(255,111,147,.08);border-radius:18px}.stats-grid,.card-grid,.tool-grid,.hub-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem}.feature-card,.home-card,.tool-card{padding:1rem 1.05rem}.home-card h2,.feature-card h2,.tool-card h2{margin:.1rem 0 .55rem;font-size:1.15rem}.muted{color:var(--muted)}.diagram-card{padding:.85rem;overflow:hidden}.diagram-card img{display:block;width:100%;height:auto;border-radius:18px}.diagram-card figcaption{padding-top:.8rem;color:#e4f7ff;font-size:.96rem}.related-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:.75rem}.footer{border-top:1px solid rgba(140,216,255,.12);background:#06111a}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:1rem;padding:2rem 0}.footer h2{font-size:1rem;margin-top:0}.kpi{font-size:2rem;font-weight:800}.table{width:100%;border-collapse:collapse;margin-top:.75rem}.table th,.table td{padding:.8rem;border-bottom:1px solid rgba(140,216,255,.12);text-align:left;vertical-align:top}.table th{color:#dff6ff}.tag{display:inline-block;border-radius:999px;padding:.35rem .65rem;font-size:.85rem;background:rgba(87,199,255,.12);border:1px solid rgba(87,199,255,.18)}.tool-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.8rem}.tool-form label{display:flex;flex-direction:column;gap:.4rem;font-size:.95rem}.tool-form input,.tool-form select{padding:.75rem .85rem;border-radius:14px;border:1px solid rgba(140,216,255,.16);background:#071522;color:#fff}.tool-output{margin-top:1rem;padding:1rem 1.15rem;background:rgba(87,199,255,.08);border-radius:18px;border:1px solid rgba(140,216,255,.16)}.notice{border-left:4px solid var(--green);padding:1rem 1.1rem;background:rgba(137,240,193,.08);border-radius:16px}@media (max-width:960px){.content-grid{grid-template-columns:1fr}.sidebar{order:2}.sticky{position:static}.footer-grid{grid-template-columns:1fr 1fr}.hero{background-size:cover}.hero h1{max-width:none}}@media (max-width:640px){.nav-wrap{flex-direction:column;align-items:flex-start}.nav{justify-content:flex-start}.footer-grid{grid-template-columns:1fr}.hero-content{padding:2.3rem 0 2.6rem}.wrap{width:min(var(--max),calc(100% - 1rem))}}

.media-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:1rem}.screenshot-card{background:linear-gradient(180deg,rgba(17,38,56,.95),rgba(10,25,38,.95));border:1px solid rgba(140,216,255,.12);border-radius:22px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.22)}.screenshot-card img{display:block;width:100%;height:220px;object-fit:cover;background:#091625}.screenshot-card figcaption{padding:.8rem .95rem;color:#d9efff;font-size:.94rem}.badge-row{display:flex;gap:.5rem;flex-wrap:wrap;margin-bottom:.45rem}.mini-badge{display:inline-flex;padding:.26rem .55rem;border-radius:999px;border:1px solid rgba(140,216,255,.16);background:rgba(255,255,255,.03);font-size:.78rem;color:#d9efff}.official-note{color:#8ef0c5}.art-note{color:#ffd6e1}

/* Homepage redesign */
body.home-redesign{
  background:
    radial-gradient(circle at 20% 0%, rgba(45,113,180,.30), transparent 28%),
    radial-gradient(circle at 88% 18%, rgba(170,27,51,.16), transparent 20%),
    linear-gradient(180deg,#06101a 0%, #071523 30%, #050d16 100%);
  color:#edf7ff;
}
.topbar-premium{background:rgba(4,10,18,.9); border-bottom:1px solid rgba(113,200,255,.18); box-shadow:0 10px 30px rgba(0,0,0,.35)}
.nav-premium a{position:relative; padding:.7rem .85rem; font-size:.95rem; color:#d6efff}
.nav-premium a.active::after,.nav-premium a:hover::after{content:""; position:absolute; left:.9rem; right:.9rem; bottom:.2rem; height:3px; border-radius:10px; background:linear-gradient(90deg,#ff516c,#39d0ff)}
.nav-search{width:42px; height:42px; display:grid; place-items:center; border-radius:14px; border:1px solid rgba(113,200,255,.18); background:linear-gradient(180deg,rgba(16,34,49,.95),rgba(7,18,28,.95)); color:#d9f4ff; font-size:1.15rem}
.home-main{padding:1.35rem 0 2rem}
.home-hero{display:grid; grid-template-columns: 1.03fr 1.12fr; gap:1rem; align-items:stretch; margin-bottom:1rem}
.frost-frame{position:relative; overflow:hidden; background:linear-gradient(180deg,rgba(13,28,42,.97),rgba(8,19,30,.97)); border:1px solid rgba(116,203,255,.18); border-radius:24px; box-shadow:0 18px 45px rgba(0,0,0,.36), inset 0 1px 0 rgba(255,255,255,.04)}
.frost-frame::before{content:""; position:absolute; inset:0; pointer-events:none; background:linear-gradient(180deg,rgba(255,255,255,.07),transparent 15%,transparent 88%,rgba(111,215,255,.05)); mix-blend-mode:screen}
.frost-frame::after{content:""; position:absolute; inset:0; pointer-events:none; box-shadow:inset 0 0 0 1px rgba(179,230,255,.05), inset 0 -40px 70px rgba(11,44,70,.25)}
.hero-panel{min-height:520px}
.hero-copy{padding:2.2rem 2rem 1.8rem; display:flex; flex-direction:column; justify-content:center; background:
 linear-gradient(180deg,rgba(6,16,26,.70),rgba(6,16,26,.92)),
 radial-gradient(circle at right top, rgba(255,80,108,.10), transparent 22%),
 radial-gradient(circle at left center, rgba(57,208,255,.12), transparent 26%)}
.hero-copy .eyebrow{text-transform:uppercase; letter-spacing:.18em; font-size:.8rem; color:#8dcfff; margin-bottom:.7rem; font-weight:700}
.hero-copy h1{margin:0 0 .85rem; font-size:clamp(3.1rem, 7vw, 5rem); line-height:.92; text-transform:uppercase; letter-spacing:.02em; max-width:6ch; text-shadow:0 0 25px rgba(57,208,255,.14)}
.hero-text{font-size:1.08rem; color:#d8edf8; max-width:48ch; margin-bottom:1.25rem}
.hero-actions{display:flex; flex-wrap:wrap; gap:.85rem; margin-bottom:1.2rem}
.hero-btn{display:inline-flex; align-items:center; justify-content:center; padding:.95rem 1.3rem; border-radius:14px; font-weight:800; letter-spacing:.02em; text-transform:uppercase; box-shadow:0 14px 30px rgba(0,0,0,.25); border:1px solid rgba(255,255,255,.08); text-decoration:none}
.hero-btn:hover{text-decoration:none; transform:translateY(-1px)}
.hero-btn-red{background:linear-gradient(180deg,#290912,#18070d); color:#fff; border-color:rgba(255,79,111,.45); box-shadow:0 0 0 1px rgba(255,79,111,.18), 0 0 20px rgba(255,79,111,.28), inset 0 0 22px rgba(255,41,75,.18)}
.hero-btn-blue{background:linear-gradient(180deg,#0b2130,#09151f); color:#dff7ff; border-color:rgba(57,208,255,.42); box-shadow:0 0 0 1px rgba(57,208,255,.16), 0 0 20px rgba(57,208,255,.18), inset 0 0 22px rgba(57,208,255,.10)}
.hero-meta{display:flex; gap:.9rem; flex-wrap:wrap}
.meta-chip{display:flex; gap:.75rem; align-items:center; background:rgba(4,12,20,.55); border:1px solid rgba(113,200,255,.14); padding:.8rem 1rem; border-radius:18px; min-width:230px}
.meta-chip span{width:32px; height:32px; display:grid; place-items:center; border-radius:50%; background:rgba(57,208,255,.12); color:#a6eaff}
.meta-chip strong{display:block; font-size:.95rem}.meta-chip small{display:block; color:#9ab9cf}
.hero-scene{position:relative; min-height:520px; background:#050e18}
.hero-scene-art{position:absolute; inset:0; background:
 linear-gradient(90deg, rgba(7,20,32,.16), rgba(7,20,32,.0) 28%, rgba(7,20,32,.36) 100%),
 url('/assets/feature-art/corridor-shadow.png') center/cover no-repeat}
.hero-quote{position:absolute; right:1.25rem; bottom:1.3rem; max-width:160px; background:rgba(9,18,31,.6); border:1px solid rgba(118,205,255,.16); border-radius:18px; padding:1rem 1rem; font-size:1.2rem; line-height:1.35; text-transform:uppercase; color:#cfeaff}
.hero-scribble{position:absolute; right:1.2rem; top:1.4rem; text-align:right; font-size:2rem; line-height:.95; color:rgba(220,243,255,.75); text-transform:uppercase; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; transform:rotate(-4deg); text-shadow:0 0 12px rgba(57,208,255,.18)}
.home-body-grid{display:grid; grid-template-columns:240px minmax(0,1fr); gap:1rem; align-items:start}
.home-sidebar{padding:1rem; position:sticky; top:5.2rem; min-height:520px; background:
 linear-gradient(180deg,rgba(9,19,29,.97),rgba(8,18,29,.96)),
 radial-gradient(circle at left bottom, rgba(255,66,90,.08), transparent 35%)}
.side-title{font-size:1.55rem; text-transform:uppercase; letter-spacing:.06em; margin:.2rem 0 1rem; color:#d9f4ff; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif}
.access-list{list-style:none; margin:0; padding:0; display:grid; gap:.6rem}
.access-list a{display:flex; align-items:center; gap:.7rem; padding:.72rem .8rem; border-radius:14px; border:1px solid rgba(113,200,255,.12); background:linear-gradient(180deg,rgba(12,28,42,.95),rgba(8,18,29,.95)); color:#d9efff; font-size:.95rem}
.access-list a:hover{text-decoration:none; background:linear-gradient(180deg,rgba(16,40,60,.98),rgba(8,18,29,.98)); transform:translateX(3px)}
.access-list span{width:24px; text-align:center; color:#8de5ff}
.side-poster{margin-top:1rem; position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(113,200,255,.12)}
.side-poster img{display:block; width:100%; height:220px; object-fit:cover; filter:saturate(.95) contrast(1.04)}
.poster-caption{position:absolute; left:.9rem; bottom:.9rem; text-transform:uppercase; font-size:1.2rem; line-height:1.1; color:#dff5ff; text-shadow:0 0 12px rgba(0,0,0,.55); font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif}
.home-content-stack{display:grid; gap:1rem}
.content-panel{padding:1.15rem 1.1rem 1.2rem}
.panel-headline{display:flex; justify-content:space-between; align-items:end; gap:1rem; margin-bottom:.95rem}
.panel-headline h2{margin:0; font-size:2rem; line-height:1; text-transform:uppercase; letter-spacing:.03em; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif}
.panel-headline h2::after{content:" //"; color:#ff4f6f}
.panel-headline span{color:#86a9c0; text-transform:uppercase; font-size:.78rem; letter-spacing:.14em}
.showcase-grid{display:grid; grid-template-columns:1fr 1fr; gap:1rem}
.showcase-card{margin:0; border-radius:18px; overflow:hidden; background:linear-gradient(180deg,rgba(10,25,38,.95),rgba(7,17,26,.98)); border:1px solid rgba(113,200,255,.12)}
.showcase-card img{display:block; width:100%; height:230px; object-fit:cover}
.showcase-card figcaption{padding:1rem}.showcase-card strong{display:block; margin:.4rem 0 .3rem; font-size:1rem}.showcase-card p{margin:0; color:#9fbed2}
.card-chip{display:inline-flex; align-items:center; padding:.35rem .6rem; border-radius:999px; font-size:.78rem; font-weight:700; letter-spacing:.02em; border:1px solid rgba(113,200,255,.18); background:rgba(57,208,255,.10); color:#d8f3ff}
.tool-chip{background:rgba(255,79,111,.12); border-color:rgba(255,79,111,.25)}
.official-chip{background:rgba(57,208,255,.15)}
.focus-panel{position:relative; padding-right:180px}
.focus-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.focus-card{padding:1.1rem; border-radius:18px; border:1px solid rgba(113,200,255,.12); background:linear-gradient(180deg,rgba(8,20,31,.92),rgba(9,19,29,.98))}
.focus-icon{width:48px; height:48px; display:grid; place-items:center; border-radius:16px; background:rgba(57,208,255,.10); border:1px solid rgba(57,208,255,.18); color:#a9edff; font-size:1.4rem; margin-bottom:.8rem}
.focus-card h3{margin:0 0 .45rem; font-size:1.15rem; text-transform:uppercase; letter-spacing:.03em}.focus-card p{margin:0; color:#a7c1d2}
.focus-callout{position:absolute; right:1.1rem; bottom:1.2rem; width:120px; font-size:1.35rem; line-height:1.02; text-transform:uppercase; color:#d6efff; opacity:.88; text-shadow:0 0 10px rgba(255,255,255,.06); font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif}
.start-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.start-card{display:block; border-radius:20px; overflow:hidden; background:linear-gradient(180deg,rgba(10,24,38,.98),rgba(7,17,26,.98)); border:1px solid rgba(113,200,255,.14); box-shadow:0 12px 24px rgba(0,0,0,.22)}
.start-card:hover{text-decoration:none; transform:translateY(-2px)}
.start-card img{display:block; width:100%; height:180px; object-fit:cover}
.start-copy{padding:1rem; min-height:215px; display:flex; flex-direction:column}.start-copy h3{margin:.65rem 0 .55rem; font-size:1.25rem; text-transform:uppercase; line-height:1}.start-copy p{margin:0; color:#b6cede}.start-copy em{margin-top:auto; align-self:flex-end; font-style:normal; font-size:1.5rem; color:#87dcff}
.signature-grid{display:grid; grid-template-columns:1fr 1.2fr; gap:1rem; align-items:stretch}
.signature-copy,.signature-diagram{border-radius:18px; border:1px solid rgba(113,200,255,.12); background:linear-gradient(180deg,rgba(10,24,38,.95),rgba(7,17,26,.98)); padding:1rem}
.signature-point{display:flex; gap:1rem; margin-bottom:1rem}
.sig-icon{width:54px; height:54px; border-radius:16px; display:grid; place-items:center; background:rgba(57,208,255,.10); color:#a9edff; border:1px solid rgba(57,208,255,.18); font-size:1.35rem; flex:none}
.signature-point h3{margin:0 0 .35rem; font-size:1.15rem; text-transform:uppercase}.signature-point p{margin:0; color:#a6bfd1}
.big-button{margin-top:.5rem}
.signature-diagram h3{margin:.1rem 0 .9rem; text-transform:uppercase; font-size:1.35rem}.signature-diagram img{display:block; width:100%; height:auto; border-radius:14px; background:#08131f}.signature-diagram p{margin:.8rem 0 0; color:#a3bed3}
.hub-grid-rich{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.hub-card-rich{display:grid; grid-template-columns:160px 1fr; overflow:hidden; border-radius:18px; border:1px solid rgba(113,200,255,.12); background:linear-gradient(180deg,rgba(10,24,38,.96),rgba(7,17,26,.98)); min-height:160px}
.hub-card-rich:hover{text-decoration:none; transform:translateY(-2px)}
.hub-card-rich img{width:100%; height:100%; object-fit:cover}
.hub-card-rich div{padding:1rem}.hub-card-rich h3{margin:.45rem 0; font-size:1.25rem; text-transform:uppercase}.hub-card-rich p{margin:0; color:#a8c3d7}.hub-icon{display:inline-grid; place-items:center; width:40px; height:40px; border-radius:14px; background:rgba(57,208,255,.10); border:1px solid rgba(57,208,255,.18)}
.footer-premium{background:linear-gradient(180deg,#06111a,#03080d); border-top:1px solid rgba(113,200,255,.12)}
.footer-mantra{font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size:1.7rem; line-height:1; color:#6d97b0; text-transform:uppercase}
@media (max-width:1200px){
  .home-hero{grid-template-columns:1fr}
  .home-body-grid{grid-template-columns:1fr}
  .home-sidebar{position:static; min-height:0}
  .focus-panel{padding-right:1.1rem}
  .focus-callout{position:static; width:auto; margin-top:1rem}
  .start-grid{grid-template-columns:repeat(2,1fr)}
  .hub-grid-rich{grid-template-columns:1fr}
}
@media (max-width:840px){
  .showcase-grid,.focus-grid,.signature-grid{grid-template-columns:1fr}
  .start-grid{grid-template-columns:1fr}
  .hub-card-rich{grid-template-columns:1fr}
  .hub-card-rich img{height:180px}
  .hero-copy h1{max-width:none}
}
@media (max-width:640px){
  .hero-panel,.hero-scene{min-height:420px}
  .hero-copy{padding:1.45rem}
  .panel-headline{flex-direction:column; align-items:flex-start}
  .hero-quote{max-width:140px; font-size:1rem}
}


/* Inner-page redesign system */
body.page-redesign{background:radial-gradient(circle at 12% 0%, rgba(55,126,190,.22), transparent 22%),radial-gradient(circle at 85% 16%, rgba(170,27,51,.12), transparent 18%),linear-gradient(180deg,#07121d 0%,#06111a 34%,#040a10 100%);color:#edf7ff}
.page-main{padding:1.2rem 0 2rem}
.page-redesign .hero{background:none; min-height:auto; border:none}
.page-shell{display:grid; grid-template-columns:280px minmax(0,1fr); gap:1rem; align-items:start}
.page-sidebar{position:sticky; top:5.2rem; padding:1rem; border-radius:24px; background:linear-gradient(180deg,rgba(9,19,29,.97),rgba(8,18,29,.96)); border:1px solid rgba(116,203,255,.16); box-shadow:0 18px 45px rgba(0,0,0,.36)}
.page-sidebar .side-title{font-size:1.45rem; text-transform:uppercase; letter-spacing:.05em; margin:.2rem 0 1rem; color:#d9f4ff; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif}
.page-sidebar .access-list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem}
.page-sidebar .access-list a{display:flex;gap:.7rem;align-items:center;padding:.72rem .8rem;border-radius:14px;border:1px solid rgba(113,200,255,.12);background:linear-gradient(180deg,rgba(12,28,42,.95),rgba(8,18,29,.95));color:#d9efff;font-size:.95rem}
.page-sidebar .access-list a:hover{text-decoration:none;transform:translateX(3px)}
.page-sidebar .access-list span{width:24px;text-align:center;color:#8de5ff}
.page-sidebar .side-poster{margin-top:1rem; position:relative; border-radius:18px; overflow:hidden; border:1px solid rgba(113,200,255,.12)}
.page-sidebar .side-poster img{display:block; width:100%; height:220px; object-fit:cover}
.page-sidebar .poster-caption{position:absolute; left:.9rem; bottom:.9rem; text-transform:uppercase; font-size:1.12rem; line-height:1.05; color:#e8f8ff; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; text-shadow:0 0 12px rgba(0,0,0,.55)}
.page-content{display:grid; gap:1rem}
.page-hero-card{position:relative; overflow:hidden; min-height:320px; display:grid; grid-template-columns:1.1fr .95fr; border-radius:26px; border:1px solid rgba(116,203,255,.18); box-shadow:0 18px 45px rgba(0,0,0,.36); background:linear-gradient(180deg,rgba(13,28,42,.98),rgba(8,19,30,.98))}
.page-hero-card::before{content:'';position:absolute;inset:0;background:radial-gradient(circle at right top, rgba(255,79,111,.10), transparent 22%),radial-gradient(circle at left center, rgba(57,208,255,.11), transparent 26%);pointer-events:none}
.page-hero-copy{padding:2rem 1.8rem; position:relative; z-index:1; display:flex; flex-direction:column; justify-content:center}
.page-hero-copy .eyebrow{font-size:.78rem; letter-spacing:.17em; text-transform:uppercase; color:#8dd3ff; font-weight:700; margin-bottom:.6rem}
.page-hero-copy h1{margin:0 0 .75rem; font-size:clamp(2.2rem,4.4vw,4rem); line-height:.95; text-transform:uppercase; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif}
.page-hero-copy p{margin:0 0 1rem; color:#d7edf9; max-width:52ch}
.hero-chip-row{display:flex;gap:.7rem;flex-wrap:wrap}
.hero-chip-row .chip{padding:.6rem .85rem}
.page-hero-art{position:relative; min-height:320px; background:#09131c}
.page-hero-art img{position:absolute; inset:0; width:100%; height:100%; object-fit:cover}
.page-hero-art .overlay-note{position:absolute; right:1rem; bottom:1rem; background:rgba(8,18,29,.62); border:1px solid rgba(116,203,255,.18); border-radius:18px; padding:.9rem 1rem; color:#dff5ff; font-size:1.05rem; text-transform:uppercase; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; max-width:180px}
.page-hero-art .scribble{position:absolute; right:1rem; top:1rem; color:#cfe7f9; opacity:.8; font-size:1.55rem; line-height:1; text-transform:uppercase; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; transform:rotate(-5deg)}
.panel-premium{padding:1.15rem 1.1rem 1.2rem; border-radius:24px; background:linear-gradient(180deg,rgba(13,28,42,.97),rgba(8,19,30,.97)); border:1px solid rgba(116,203,255,.14); box-shadow:0 16px 30px rgba(0,0,0,.22)}
.panel-premium h2{margin:0 0 .8rem; font-size:1.9rem; line-height:1; text-transform:uppercase; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif}.panel-premium h2::after{content:' //'; color:#ff4f6f}
.intro-split{display:grid; grid-template-columns:1.1fr .9fr; gap:1rem; align-items:stretch}
.intro-box{padding:1.1rem; border-radius:18px; border:1px solid rgba(116,203,255,.12); background:linear-gradient(180deg,rgba(8,20,31,.92),rgba(9,19,29,.98))}
.intro-box p{margin:.5rem 0 0; color:#d6ebf7}
.mini-kpi-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:.8rem; margin-top:.9rem}
.mini-kpi{padding:1rem; border-radius:18px; border:1px solid rgba(116,203,255,.12); background:linear-gradient(180deg,rgba(9,20,32,.98),rgba(6,15,24,.98))}
.mini-kpi strong{display:block; font-size:1.65rem; color:#fff; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif}.mini-kpi span{display:block; color:#9ebfd4; text-transform:uppercase; font-size:.8rem; letter-spacing:.08em}
.step-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:1rem}
.step-card{display:grid; grid-template-columns:64px 1fr; gap:1rem; padding:1rem; border-radius:20px; border:1px solid rgba(116,203,255,.12); background:linear-gradient(180deg,rgba(9,20,32,.98),rgba(6,15,24,.98))}
.step-number{width:64px; height:64px; display:grid; place-items:center; border-radius:18px; background:linear-gradient(180deg,#211019,#12080d); color:#fff; border:1px solid rgba(255,79,111,.38); font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size:1.6rem; box-shadow:0 0 18px rgba(255,79,111,.22)}
.step-card h3{margin:.25rem 0 .4rem; font-size:1.2rem; text-transform:uppercase}
.step-card p{margin:0; color:#aac6d8}
.quote-strip{display:grid; place-items:center; text-align:center; padding:1.2rem; border-radius:20px; border:1px dashed rgba(116,203,255,.18); color:#dff5ff; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size:1.5rem; line-height:1.1; text-transform:uppercase; background:linear-gradient(180deg,rgba(10,24,38,.65),rgba(7,17,26,.88))}
.mistake-list{display:grid; grid-template-columns:repeat(2,1fr); gap:.8rem; list-style:none; margin:0; padding:0}
.mistake-list li{padding:1rem; border-radius:18px; background:linear-gradient(180deg,rgba(10,24,38,.98),rgba(7,17,26,.98)); border:1px solid rgba(116,203,255,.12); color:#cce4f2}
.related-grid-rich{display:grid; grid-template-columns:repeat(4,1fr); gap:1rem}
.related-tile{display:block; padding:1rem; border-radius:18px; border:1px solid rgba(116,203,255,.12); background:linear-gradient(180deg,rgba(10,24,38,.98),rgba(7,17,26,.98)); color:#e7f7ff}
.related-tile:hover{text-decoration:none; transform:translateY(-2px)}
.related-tile span{display:block; color:#84d7ff; margin-bottom:.4rem; font-size:.8rem; text-transform:uppercase; letter-spacing:.1em}
.tool-shell{display:grid; grid-template-columns:1.05fr .95fr; gap:1rem}
.tool-console,.tool-explain{padding:1rem; border-radius:20px; border:1px solid rgba(116,203,255,.12); background:linear-gradient(180deg,rgba(9,20,32,.98),rgba(6,15,24,.98))}
.tool-console-head{display:flex; justify-content:space-between; align-items:center; margin-bottom:.8rem; padding-bottom:.6rem; border-bottom:1px solid rgba(116,203,255,.12)}
.tool-lights{display:flex; gap:.45rem}.tool-lights span{width:10px;height:10px;border-radius:50%;display:block}.tool-lights span:nth-child(1){background:#ff6d88}.tool-lights span:nth-child(2){background:#ffe26a}.tool-lights span:nth-child(3){background:#7dffae}
.tool-title{font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; text-transform:uppercase; letter-spacing:.08em}
.page-redesign .tool-form input,.page-redesign .tool-form select{background:#08131f; border:1px solid rgba(116,203,255,.16); color:#eef7ff}
.page-redesign #run-tool{margin-top:.35rem}
.tool-diagram{margin-top:1rem; border-radius:18px; overflow:hidden; border:1px solid rgba(116,203,255,.12)}
.tool-diagram img{display:block; width:100%; height:auto; background:#08131f}
.hub-card-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:1rem}
.hub-feature{display:block; overflow:hidden; border-radius:20px; background:linear-gradient(180deg,rgba(10,24,38,.98),rgba(7,17,26,.98)); border:1px solid rgba(116,203,255,.12)}
.hub-feature:hover{text-decoration:none; transform:translateY(-2px)}
.hub-feature img{display:block; width:100%; height:180px; object-fit:cover}
.hub-feature div{padding:1rem}.hub-feature h3{margin:.55rem 0 .45rem; text-transform:uppercase; font-size:1.22rem}.hub-feature p{margin:0; color:#aac6d8}
.tagline-note{padding:1rem; border-radius:18px; border:1px dashed rgba(116,203,255,.16); color:#d9efff; text-transform:uppercase; font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif; font-size:1.35rem; line-height:1.05; text-align:center}
.page-footer-note{color:#7ea4bd; text-transform:uppercase; font-size:.85rem; letter-spacing:.12em}
@media (max-width:1180px){.page-shell{grid-template-columns:1fr}.page-sidebar{position:static}.related-grid-rich,.hub-card-grid{grid-template-columns:repeat(2,1fr)}.page-hero-card,.intro-split,.tool-shell{grid-template-columns:1fr}}
@media (max-width:760px){.mini-kpi-grid,.step-grid,.mistake-list,.related-grid-rich,.hub-card-grid{grid-template-columns:1fr}.page-hero-card{grid-template-columns:1fr}.page-hero-art{min-height:240px}.page-hero-copy{padding:1.4rem}.page-hero-copy h1{font-size:2.6rem}}


/* Remaining guide page conversion helpers */
.page-redesign .answer-box{padding:1.1rem 1.2rem;border-radius:20px;background:linear-gradient(135deg,rgba(24,61,94,.96),rgba(10,24,38,.98));border:1px solid rgba(116,203,255,.15);box-shadow:0 14px 30px rgba(0,0,0,.18)}
.page-redesign .answer-box strong{display:block;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;text-transform:uppercase;font-size:1.5rem;letter-spacing:.03em;margin-bottom:.25rem}
.page-redesign .answer-box p{margin:0;color:#d6ecf7}
.page-redesign .panel-premium p{color:#bed6e5}
.page-redesign .panel-premium .table{background:rgba(6,15,24,.38);border-radius:14px;overflow:hidden}
.page-redesign .panel-premium .table th{background:rgba(57,208,255,.08);text-transform:uppercase;font-size:.82rem;letter-spacing:.06em}
.page-redesign .panel-premium .checklist{display:grid;gap:.55rem}
.page-redesign .panel-premium .checklist li{padding:.7rem .75rem .7rem 1.7rem;border-radius:14px;background:rgba(7,18,29,.65);border:1px solid rgba(116,203,255,.08)}
.page-redesign .panel-premium .checklist li:before{left:.65rem;top:.62rem}
.page-redesign .callout{border-left:4px solid #ff5a78;background:linear-gradient(90deg,rgba(255,90,120,.10),rgba(9,20,32,.72));border-radius:18px;padding:1rem 1.1rem;color:#e7f4fb;border-top:1px solid rgba(255,90,120,.12);border-right:1px solid rgba(116,203,255,.06);border-bottom:1px solid rgba(116,203,255,.06)}
.page-redesign .notice{border-left:4px solid #7ef0bc;background:linear-gradient(90deg,rgba(126,240,188,.09),rgba(9,20,32,.72));border-radius:18px;padding:1rem 1.1rem;border-top:1px solid rgba(126,240,188,.12);border-right:1px solid rgba(116,203,255,.06);border-bottom:1px solid rgba(116,203,255,.06)}
.page-redesign .diagram-card{background:linear-gradient(180deg,rgba(7,17,26,.98),rgba(5,13,21,.98));border:1px solid rgba(116,203,255,.12);border-radius:20px;overflow:hidden}
.page-redesign .diagram-card img{border-radius:16px}
.page-redesign .media-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
.page-redesign .screenshot-card{background:linear-gradient(180deg,rgba(9,21,33,.98),rgba(6,15,24,.98));border:1px solid rgba(116,203,255,.12);border-radius:20px}
.page-redesign .screenshot-card img{height:230px}
.page-redesign .related-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem}
.page-redesign .related-grid li{margin:0}
.page-redesign .related-grid a{display:block;padding:.85rem;border-radius:14px;background:linear-gradient(180deg,rgba(10,24,38,.96),rgba(7,17,26,.98));border:1px solid rgba(116,203,255,.12);color:#dff5ff}
.page-redesign .related-grid a:hover{text-decoration:none;transform:translateY(-1px)}
.page-visual-strip{display:grid;grid-template-columns:1.35fr .65fr;gap:1rem}
.page-visual-main,.page-visual-side{position:relative;overflow:hidden;border-radius:20px;border:1px solid rgba(116,203,255,.12);min-height:230px;background:#07111a}
.page-visual-main img,.page-visual-side img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.page-visual-main::after,.page-visual-side::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(4,10,17,.88) 100%)}
.page-visual-label{position:absolute;left:1rem;bottom:.9rem;z-index:2;color:#fff;text-transform:uppercase;font-family:Impact,Haettenschweiler,'Arial Narrow Bold',sans-serif;font-size:1.25rem;letter-spacing:.04em;text-shadow:0 2px 12px rgba(0,0,0,.8)}
.page-visual-label small{display:block;font-family:Inter,Arial,sans-serif;font-size:.72rem;letter-spacing:.08em;color:#a9cbe0;margin-top:.25rem}
@media (max-width:760px){.page-redesign .media-grid,.page-redesign .related-grid,.page-visual-strip{grid-template-columns:1fr}.page-visual-side{min-height:180px}}

@media (max-width:760px){
  .page-sidebar{display:none}
  .topbar-premium .nav-wrap{display:block;padding:.65rem 0 .45rem}
  .topbar-premium .brand{margin-bottom:.45rem}
  .topbar-premium .nav-premium{display:flex;flex-wrap:nowrap;justify-content:flex-start;gap:.1rem;width:100%;overflow-x:auto;padding-bottom:.35rem;scrollbar-width:thin}
  .topbar-premium .nav-premium a{flex:0 0 auto;padding:.5rem .65rem}
  .topbar-premium .nav-search{display:none}
}