/* Product pages (tools/build_home.py): blocks moved off the homepage — why now,
   remediate/migrate/retain, CLI, focused practice, walkthrough, fixture replay, coverage. */
  /* ---------- why-now grid ---------- */
  .why{display:grid;grid-template-columns:repeat(3,1fr);gap:32px}
  .why .item{padding:24px;background:#fff;border:1px solid var(--line);
    border-radius:6px}
  .why .item .num{font-size:36px;font-weight:700;color:var(--accent);
    line-height:1;margin-bottom:8px}
  .why .item h3{font-size:18px;margin-bottom:8px}
  .why .item p{font-size:15px;color:var(--slate);margin:0}
  /* ---------- remediate / migrate / retain ---------- */
  .decide{display:grid;grid-template-columns:repeat(3,1fr);gap:24px}
  .decide .d{padding:26px;background:#fff;border:1px solid var(--line);border-top:4px solid var(--good);border-radius:8px}
  .decide .d.now{border-top-color:var(--accent)}
  .decide .d.mig{border-top-color:var(--accent-soft)}
  .decide .k{font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;color:var(--good);margin-bottom:10px}
  .decide .d.now .k{color:var(--accent)}
  .decide .d.mig .k{color:#b4532f}
  .decide .algs{font-family:'JetBrains Mono','SF Mono',Menlo,monospace;font-size:14px;font-weight:600;color:var(--navy);margin:0 0 12px}
  .decide p{font-size:15px;color:var(--slate);margin:0}

  /* ---------- CLI / runs-in-your-perimeter ---------- */
  .cli-grid{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:48px;align-items:center}
  .cli{background:#081c36;color:var(--warm);border:1px solid rgba(243,239,231,.14);border-radius:12px;
    padding:20px 22px;margin:0;font-size:13.5px;line-height:1.9;overflow-x:auto;white-space:pre}
  .cli .p{color:#7fd3a0;user-select:none}
  .cli-cap{font-size:14px;color:var(--slate);margin:12px 0 0}
  .cli-points{list-style:none;padding:0;margin:0 0 22px}
  .cli-points li{position:relative;padding-left:26px;margin-bottom:10px;font-size:15.5px;color:var(--slate)}
  .cli-points li::before{content:"✓";position:absolute;left:0;color:var(--good);font-weight:700}
  .cli-points b{color:var(--navy)}
  .cli-links{display:flex;flex-wrap:wrap;gap:8px 20px;font-size:15px}
  .cli-links a{color:var(--accent);font-weight:600;border-bottom:none}
  .reg-note{font-size:13px;color:var(--slate-soft);text-align:center;margin:10px auto 0;max-width:760px}
  /* ---------- interactive demo ---------- */
  .idemo{display:grid;grid-template-columns:1.1fr 1fr;gap:24px;margin-top:32px}
  /* terminal */
  .idemo-term{background:#0a1828;border:1px solid #1d3557;border-radius:10px;
    overflow:hidden;box-shadow:0 16px 48px rgba(11,37,69,.18);
    display:flex;flex-direction:column;min-height:520px}
  .idemo-term-bar{display:flex;align-items:center;gap:8px;padding:10px 14px;
    background:#0e2138;border-bottom:1px solid #1d3557}
  .idemo-term-bar .dot{width:11px;height:11px;border-radius:50%;flex:0 0 auto}
  .idemo-term-bar .dot.red{background:#ff5f57}
  .idemo-term-bar .dot.yellow{background:#febc2e}
  .idemo-term-bar .dot.green{background:#28c840}
  .idemo-term-bar .idemo-term-title{flex:1;text-align:center;color:#94a3b8;
    font-family:'JetBrains Mono','SF Mono',Menlo,monospace;font-size:12px;
    letter-spacing:.5px}
  .idemo-replay{background:var(--accent);color:#fff;border:none;
    padding:6px 14px;border-radius:6px;font-size:12px;font-weight:600;
    cursor:pointer;font-family:inherit;transition:background .15s ease}
  .idemo-replay:hover{background:#a02e22}
  .idemo-replay[disabled]{background:#1d3557;color:#94a3b8;cursor:wait}
  .idemo-term-body{font-family:'JetBrains Mono','SF Mono',Menlo,monospace;
    font-size:13px;line-height:1.55;color:#e8eef5;padding:18px 20px;
    overflow-y:auto;flex:1;white-space:pre;min-height:0}
  .idemo-term-body .ln{display:block;min-height:1.55em}
  .idemo-term-body .prompt{color:#7ee787;font-weight:600}
  .idemo-term-body .cmd{color:#e8eef5}
  .idemo-term-body .dim{color:#94a3b8}
  .idemo-term-body .info{color:#79c0ff}
  .idemo-term-body .good{color:#7ee787}
  .idemo-term-body .warn{color:#ffa657}
  .idemo-term-body .crit{color:#ff7b72;font-weight:600}
  .idemo-term-body .box{color:#94a3b8}
  .idemo-term-body .cursor{display:inline-block;width:7px;height:14px;
    background:#7ee787;margin-left:2px;animation:idemo-blink 1s steps(2) infinite;
    vertical-align:text-bottom}
  @keyframes idemo-blink{50%{opacity:0}}
  /* output panel */
  .idemo-out{display:flex;flex-direction:column;background:#fff;
    border:1px solid var(--line);border-radius:10px;overflow:hidden;
    box-shadow:0 16px 48px rgba(11,37,69,.06);min-height:520px}
  .idemo-tabs{display:flex;background:var(--warm);border-bottom:1px solid var(--line)}
  .idemo-tab{flex:1;padding:14px 12px;background:none;border:none;cursor:pointer;
    font-family:inherit;font-size:13px;font-weight:600;color:var(--slate);
    letter-spacing:.3px;border-bottom:2px solid transparent;
    transition:color .15s ease, border-color .15s ease}
  .idemo-tab:hover{color:var(--navy)}
  .idemo-tab.active{color:var(--navy);border-bottom-color:var(--accent)}
  .idemo-panels{flex:1;display:flex;align-items:center;justify-content:center;
    padding:16px;background:var(--warm)}
  .idemo-panel{display:none;width:100%}
  .idemo-panel.active{display:block}
  .idemo-panel img{width:100%;height:auto;display:block;border-radius:4px}
  /* ---------- focused practice ---------- */
  .focus{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:8px}
  .focus .pillar{padding:28px;background:#fff;border:1px solid var(--line);border-radius:8px}
  .focus .pillar h3{color:var(--navy);font-size:18px;margin:0 0 8px}
  .focus .pillar p{font-size:15px;color:var(--slate);margin:0}
  .focus-intro{max-width:720px;color:var(--slate);font-size:16px}
  .focus-posture{margin-top:24px}
  /* ---------- video facade ---------- */
  .yt{position:relative;max-width:880px;margin:0 auto;aspect-ratio:16/9;border-radius:12px;
    overflow:hidden;cursor:pointer;background:#0a1828 center/cover no-repeat;
    border:1px solid var(--line);box-shadow:0 16px 48px rgba(11,37,69,.18)}
  .yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
  .yt-play{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:2;
    width:76px;height:76px;border-radius:50%;border:none;background:rgba(192,57,43,.94);
    color:#fff;font-size:26px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.35);transition:transform .12s}
  .yt-play:hover{transform:translate(-50%,-50%) scale(1.06);background:#c0392b}
  /* ---------- detection matrix ---------- */
  .detect{width:100%;border-collapse:collapse;margin-top:24px;font-size:15px;
    background:#fff;border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .detect th,.detect td{text-align:left;padding:12px 16px;border-bottom:1px solid var(--line)}
  .detect th{background:var(--navy);color:#fff;font-size:13px;letter-spacing:.5px}
  .detect td{color:var(--slate)}
  .detect tr:last-child td{border-bottom:none}
  .badge-s{display:inline-block;font-size:11px;font-weight:700;letter-spacing:.5px;
    padding:3px 10px;border-radius:20px;text-transform:uppercase;white-space:nowrap}
  .badge-ok{background:#e6f4ea;color:#2a7f4a}
  .badge-plat{background:#e7eefc;color:#1d3557}
  .badge-road{background:#fff4e5;color:#b25e00}
  @media (max-width:880px){ .detect{font-size:13px} .detect th,.detect td{padding:9px 10px} }
  .split2{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.2fr);gap:48px;align-items:center}
  .prose{max-width:760px}
  .prose p,.prose li{color:var(--slate)}
  .prose h3{margin-top:28px}
  .boxes{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;margin:8px 0}
  .boxes .box{background:#fff;border:1px solid var(--line);border-radius:10px;padding:22px}
  .boxes .box h3{margin:0 0 6px;font-size:18px}
  .boxes .box p{margin:0;font-size:15px;color:var(--slate)}
  .ig-wrap{margin:0}
  .ig-wrap figcaption{font-size:13px;color:var(--slate-soft);margin-top:10px;text-align:center}
  section.dark .ig-wrap figcaption{color:var(--warm);opacity:.6}
  .related{display:flex;flex-wrap:wrap;gap:12px 28px;font-size:15px}
  @media (max-width:880px){
    .why,.decide,.cli-grid,.focus,.boxes,.split2{grid-template-columns:minmax(0,1fr)}
    .idemo{grid-template-columns:1fr}
    .idemo-term-body{font-size:11.5px;padding:14px 16px}
    .idemo-term{min-height:420px}
    .idemo-out{min-height:auto}
  }