/* tvguideapi.com site styles: the material and the homepage sections */
:root { --black:#05070c; --blue:#1f5bff; --yel:#ffd400; --cyan:#22d3ee; --green:#22c55e;
          --page:#fff; --alt:#f5f6f8; --line:#e3e7ec; --line-2:#eef1f4; --panel-2:#0c1018; --panel-line:#1e2532;
          --ink:#0f1b2d; --text:#26354a; --muted:#5d6b7e; --faint:#8a96a6; --on-dark:#e6ebf2; --on-dark-muted:#8f9aab;
          --ok:#15803d; --ok-bg:#e8f8ef; --r:10px; --chw:180px; }
  * { box-sizing:border-box; margin:0; padding:0; }
  body { font-family:Roboto, Calibri, Arial, sans-serif; font-weight:400; background:var(--page); color:var(--ink); font-size:14px; line-height:1.5; }
  a { color:inherit; text-decoration:none; }
  .in { max-width:1200px; margin:0 auto; padding:0 24px; }

  /* material parts */
  .btn { height:40px; min-width:170px; padding:0 18px; border-radius:var(--r); display:inline-grid; place-items:center; font-size:14px; white-space:nowrap; border:1px solid transparent; cursor:pointer; }
  .b-pri { background:var(--yel); color:var(--black); } .b-dark { background:var(--black); color:var(--yel); } .b-sec { background:#fff; color:var(--ink); border-color:var(--line); } .b-ghost { color:var(--on-dark); border-color:#2b3240; }
  .bd { font-size:11px; padding:2px 8px; border-radius:var(--r); white-space:nowrap; }
  .bd-free { background:var(--ok-bg); color:var(--ok); } .bd-paid { background:#fff5cc; color:#7a6200; } .bd-new { background:#e6f8fc; color:#0e7490; }
  .mthd { font-family:'IBM Plex Mono', monospace; font-size:11px; padding:1px 7px; border-radius:6px; background:var(--blue); color:#fff; }
  .ep { font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--blue); white-space:nowrap; }
  .ic { width:34px; height:34px; border-radius:8px; background:#eef3ff; display:grid; place-items:center; color:var(--blue); flex:none; }
  .ic svg { width:16px; height:16px; }
  .grid-bg { position:relative; overflow:hidden; background:var(--black); color:var(--on-dark); }
  .grid-bg::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(34,211,238,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.07) 1px, transparent 1px); background-size:24px 24px; pointer-events:none; }
  .grid-bg > * { position:relative; }

  /* top bar */
  .promo { height:34px; background:#0c1018; color:#c3ccd8; display:flex; align-items:center; justify-content:center; gap:14px; font-size:13px; white-space:nowrap; }
  .promo .k { color:var(--yel); } .promo .go { color:var(--cyan); }
  .topbar { position:sticky; top:0; z-index:30; height:62px; background:var(--black); border-bottom:1px solid #111722; }
  .topbar .in { height:100%; display:grid; grid-template-columns:auto 1fr auto; align-items:center; gap:28px; }
  .brand { display:flex; align-items:center; gap:9px; color:#e6ebf2; --edge:rgba(255,255,255,.28); }
  .brand svg { width:32px; height:32px; }
  .w { font-size:17px; letter-spacing:-.01em; white-space:nowrap; color:#fff; }
  .w .a { background:var(--yel); color:var(--black); border-radius:5px; padding:0 6px; margin-left:3px; }
  .menu { display:flex; gap:4px; white-space:nowrap; }
  .menu a { height:36px; display:inline-flex; align-items:center; gap:6px; padding:0 12px; border-radius:var(--r); color:#c3ccd8; font-size:14px; }
  .menu a:hover { background:#161c28; color:#fff; }
  .menu .car { width:7px; height:7px; border-right:1.5px solid currentColor; border-bottom:1.5px solid currentColor; transform:rotate(45deg) translateY(-2px); opacity:.7; }
  .menu .dot { width:7px; height:7px; border-radius:50%; background:var(--green); box-shadow:0 0 0 3px rgba(34,197,94,.18); }
  .acts { display:grid; grid-template-columns:repeat(2, 120px); gap:8px; }
  .acts .btn { min-width:0; height:36px; font-size:13px; }
  .burger { display:none; width:38px; height:38px; border-radius:var(--r); border:1px solid #2b3240; place-items:center; }
  .burger i, .burger i::before, .burger i::after { width:16px; height:2px; background:#e6ebf2; display:block; position:relative; }
  .burger i::before, .burger i::after { content:''; position:absolute; left:0; } .burger i::before { top:-5px; } .burger i::after { top:5px; }

  /* 1 header: the guide that turns into the API answer */
  .hero { padding:58px 0 0; text-align:center; }
  .kw { font-size:13px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:var(--on-dark-muted); }
  .ht { display:block; font-size:46px; font-weight:300; line-height:1.1; letter-spacing:-.015em; margin-top:10px; color:#fff; }
  .ht em { font-style:normal; color:var(--yel); }
  .hp { color:#aeb8c6; font-size:16px; margin:14px auto 0; max-width:580px; }
  .hb { display:grid; grid-template-columns:repeat(2, 170px); justify-content:center; gap:10px; margin-top:24px; }
  .facts { display:grid; grid-template-columns:repeat(3, auto); justify-content:center; gap:30px; margin-top:28px; }
  .facts div { display:grid; } .facts b { font-weight:300; font-size:24px; color:#fff; font-variant-numeric:tabular-nums; } .facts span { font-size:12px; color:var(--on-dark-muted); white-space:nowrap; }
  .stage { margin:38px auto 0; max-width:1120px; text-align:left; position:relative; }
  .switch { display:flex; justify-content:center; margin-bottom:12px; }
  .switch span { height:32px; min-width:190px; display:inline-grid; place-items:center; font-size:12px; color:var(--on-dark-muted); border:1px solid var(--panel-line); cursor:pointer; white-space:nowrap; }
  .switch span:first-child { border-radius:var(--r) 0 0 var(--r); } .switch span:last-child { border-radius:0 var(--r) var(--r) 0; border-left:0; }
  .switch span.on { background:#141a26; color:#fff; } .switch span.on.api { color:var(--cyan); }
  .screen { position:relative; border:1px solid var(--panel-line); border-bottom:0; border-radius:var(--r) var(--r) 0 0; background:var(--panel-2); overflow:hidden; }
  .layer { position:relative; }
  .layer.code { position:absolute; inset:0; background:#03060a; z-index:3; }
  .hdr { display:grid; grid-template-columns:var(--chw) 1fr; border-bottom:1px solid var(--panel-line); height:36px; align-items:center; }
  .hdr .c1 { padding:0 14px; font-size:12px; color:var(--on-dark-muted); }
  .hdr .times { display:grid; grid-template-columns:repeat(6, 1fr); height:100%; }
  .hdr .times span { padding:0 10px; display:flex; align-items:center; font-size:12px; color:var(--on-dark-muted); border-left:1px solid var(--panel-line); font-variant-numeric:tabular-nums; }
  .row { display:grid; grid-template-columns:var(--chw) 1fr; border-bottom:1px solid var(--panel-line); height:46px; }
  .ch { padding:0 14px; display:flex; align-items:center; gap:10px; font-size:13px; color:#fff; white-space:nowrap; }
  .ch i { width:28px; height:19px; border-radius:4px; background:#1a2130; font-style:normal; font-size:9px; color:#aeb8c6; display:grid; place-items:center; flex:none; }
  .lane { position:relative; }
  .pg { position:absolute; top:6px; bottom:6px; border-radius:6px; background:#141a26; border:1px solid #1f2736; padding:0 10px; display:flex; align-items:center; font-size:12px; color:#c9d3e0; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; transition:background .3s, border-color .3s; }
  .pg.on { background:#1a2a4d; border-color:#2a4fa8; color:#fff; }
  .pg.sport { background:#2a2505; border-color:#5c4f06; color:#ffe680; }
  .nowline { position:absolute; top:0; bottom:0; width:2px; background:var(--yel); box-shadow:0 0 12px rgba(255,212,0,.6); z-index:2; pointer-events:none; }
  .nowline::before { content:'Now'; position:absolute; top:8px; left:6px; font-size:11px; color:var(--black); background:var(--yel); border-radius:4px; padding:0 5px; }
  .code .hdr { font-family:'IBM Plex Mono', monospace; font-size:12px; display:flex; gap:12px; padding:0 14px; color:#8f9aab; }
  .code .hdr .m { background:var(--blue); color:#fff; border-radius:5px; padding:0 6px; }
  .code .hdr .u { color:var(--cyan); } .code .hdr .ok { color:#86efac; margin-left:auto; }
  .code .row { display:flex; align-items:center; padding:0 14px; font-family:'IBM Plex Mono', monospace; font-size:12.5px; white-space:pre; color:#c9d3e0; overflow:hidden; }
  .code .k { color:#6b8fd6; } .code .s { color:#e6ebf2; } .code .id { color:var(--cyan); } .code .t { color:var(--yel); } .code .pn { color:#4b5568; }
  .code::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(34,211,238,.035) 0 1px, transparent 1px 3px); pointer-events:none; }
  .scan { position:absolute; top:0; bottom:0; width:3px; background:var(--cyan); box-shadow:0 0 18px 4px rgba(34,211,238,.55), 0 0 2px #fff; z-index:5; pointer-events:none; opacity:0; }
  .scan::after { content:attr(data-l); position:absolute; top:8px; left:8px; font-family:'IBM Plex Mono', monospace; font-size:11px; color:#03060a; background:var(--cyan); border-radius:4px; padding:0 6px; white-space:nowrap; }
  .flick { animation:flick .18s steps(2) 2; } @keyframes flick { 50% { opacity:.55; } }

  /* section frame */
  section.s { padding:72px 0; }
  .sh { display:grid; grid-template-columns:1fr auto; align-items:end; gap:24px; margin-bottom:28px; }
  .eye { font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); }
  .sh .t { display:block; font-size:30px; font-weight:300; letter-spacing:-.01em; line-height:1.2; margin-top:6px; }
  .sh .p { color:var(--muted); font-size:15px; margin-top:8px; max-width:640px; }
  .sh .acts2 { display:grid; grid-template-columns:repeat(2, 150px); gap:10px; }
  .sh .acts2 .btn { min-width:0; }

  /* 2 data explorer */
  .exp { display:grid; grid-template-columns:300px 1fr; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; min-height:440px; }
  .exp .list { background:var(--alt); border-right:1px solid var(--line); padding:10px; display:grid; gap:4px; align-content:start; }
  .exp .it { height:58px; display:grid; grid-template-columns:34px 1fr auto; align-items:center; gap:12px; padding:0 12px; border-radius:var(--r); cursor:pointer; border:1px solid transparent; }
  .exp .it:hover { background:#fff; }
  .exp .it.on { background:#fff; border-color:var(--line); box-shadow:inset 3px 0 0 var(--yel); }
  .exp .it .tx { display:grid; min-width:0; } .exp .it .tx b { font-weight:400; font-size:14px; white-space:nowrap; } .exp .it .tx span { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .exp .pane { padding:22px 24px; }
  .exp .ph { display:flex; align-items:center; gap:12px; }
  .exp .ph .t { font-size:22px; font-weight:300; }
  .exp .ph .acts3 { margin-left:auto; display:grid; grid-template-columns:repeat(2, 120px); gap:8px; }
  .exp .ph .acts3 .btn { min-width:0; height:36px; font-size:13px; }
  .exp .pd { color:var(--muted); font-size:15px; max-width:640px; }
  .exp .rq { display:flex; align-items:center; gap:10px; border:1px solid var(--line); border-radius:var(--r); padding:9px 12px; background:#fafbfc; }
  .exp .rq .cnt { margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap; }
  .ftb { width:100%; border-collapse:separate; border-spacing:0; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
  .ftb th { background:var(--alt); color:var(--muted); font-weight:400; font-size:12px; text-align:left; padding:9px 12px; border-bottom:1px solid var(--line); white-space:nowrap; }
  .ftb td { padding:9px 12px; border-bottom:1px solid var(--line-2); font-size:13px; white-space:nowrap; color:var(--text); }
  .ftb tr:last-child td { border-bottom:0; }
  .ftb .f { font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--ink); }
  .ftb .ty { color:var(--faint); font-family:'IBM Plex Mono', monospace; font-size:12px; }
  .fade { display:grid; gap:14px; animation:fade .3s ease; } @keyframes fade { from { opacity:0; transform:translateY(4px); } to { opacity:1; transform:none; } }
  .note { display:flex; justify-content:space-between; margin-top:14px; color:var(--muted); font-size:13px; }

  /* mega menus */
  .topbar .in { position:relative; }
  .menu a.on { background:#161c28; color:#fff; }
  .menu a.on .car { transform:rotate(-135deg) translateY(-1px); }
  .mega { position:absolute; left:24px; right:24px; top:61px; background:#fff; color:var(--ink); border:1px solid var(--line); border-top:0; border-radius:0 0 var(--r) var(--r); box-shadow:0 24px 50px rgba(5,7,12,.28); display:none; grid-template-columns:1fr 1fr 1fr 300px; min-height:290px; overflow:hidden; z-index:40; }
  .mega.open { display:grid; animation:drop .18s ease; }
  @keyframes drop { from { opacity:0; transform:translateY(-6px); } to { opacity:1; transform:none; } }
  .mcol { padding:18px 18px 16px; border-right:1px solid var(--line); display:grid; align-content:start; gap:2px; }
  .mcol h4 { font-size:12px; font-weight:400; letter-spacing:.07em; text-transform:uppercase; color:var(--muted); margin-bottom:6px; white-space:nowrap; }
  .mit { display:grid; grid-template-columns:28px 1fr auto; gap:10px; align-items:center; padding:7px 8px; border-radius:var(--r); }
  .mit:hover { background:#f4f6f9; }
  .mit .mi { width:28px; height:28px; border-radius:8px; display:grid; place-items:center; background:#eef3ff; color:var(--blue); }
  .mit .mi svg { width:15px; height:15px; }
  .mit .tx { min-width:0; display:grid; } .mit .t { font-size:14px; white-space:nowrap; } .mit .s { font-size:12px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .mit .num { font-variant-numeric:tabular-nums; color:var(--muted); font-size:12px; white-space:nowrap; }
  .mside { background:#0b0f17; color:#e6ebf2; padding:18px; display:grid; align-content:space-between; gap:14px; position:relative; overflow:hidden; }
  .mside::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(34,211,238,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.07) 1px, transparent 1px); background-size:24px 24px; }
  .mside > * { position:relative; }
  .mside h5 { font-size:12px; font-weight:400; letter-spacing:.07em; text-transform:uppercase; color:#8f9aab; }
  .mside .big { font-size:24px; font-weight:300; margin-top:4px; } .mside p { font-size:13px; color:#aeb8c6; }
  .mside .row2 { display:grid; grid-template-columns:1fr 1fr; gap:8px; } .mside .btn { min-width:0; height:36px; font-size:13px; }
  .mstat { display:grid; grid-template-columns:1fr auto; gap:6px 10px; font-size:13px; } .mstat span:nth-child(odd) { color:#aeb8c6; white-space:nowrap; } .mstat span:nth-child(even) { text-align:right; }
  .scrim { position:fixed; inset:0; background:rgba(5,7,12,.35); z-index:25; display:none; } .scrim.open { display:block; }

  /* section 2, louder */
  .s2 { position:relative; }
  .stats { display:grid; grid-template-columns:repeat(6, 1fr); gap:12px; margin-bottom:44px; }
  .stat { border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; background:#fff; display:grid; gap:2px; position:relative; overflow:hidden; }
  .stat .v { font-size:28px; font-weight:300; font-variant-numeric:tabular-nums; letter-spacing:-.01em; }
  .stat .k { font-size:12px; color:var(--muted); white-space:nowrap; }
  .stat .viz { height:26px; margin-top:8px; display:flex; align-items:flex-end; gap:2px; }
  .stat .viz i { flex:1; background:#dbe5ff; border-radius:1px; transform-origin:bottom; animation:grow 1.2s ease both; }
  .stat .viz i.hi { background:var(--blue); }
  .stat.live .viz i { background:#bbf0cf; } .stat.live .viz i.hi { background:var(--green); }
  .stat.y .viz i { background:#fff1a8; } .stat.y .viz i.hi { background:#e6bf00; }
  @keyframes grow { from { transform:scaleY(.05); } to { transform:scaleY(1); } }
  .stat .pulse { position:absolute; top:14px; right:14px; width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite; }
  @keyframes pulse { 0%,100% { box-shadow:0 0 0 0 rgba(34,197,94,.5); } 50% { box-shadow:0 0 0 6px rgba(34,197,94,0); } }
  .stat .vs { font-size:11px; color:var(--faint); white-space:nowrap; margin-top:4px; }
  .stat .track { height:8px; border-radius:4px; background:var(--line-2); overflow:hidden; margin-top:16px; }
  .stat .track i { display:block; height:100%; width:var(--w); background:var(--blue); border-radius:4px; animation:wide 1.4s ease both; }
  .stat .track i.gr { background:var(--green); } .stat .track i.yl { background:linear-gradient(90deg, #fff1a8, #e6bf00); }
  @keyframes wide { from { width:0; } to { width:var(--w); } }
  .stat .tl { display:grid; grid-template-columns:auto 1fr auto; gap:6px; align-items:center; font-size:10px; color:var(--faint); margin-top:8px; }
  .stat .tl .track { margin-top:0; }
  .stat .dots { display:grid; grid-template-columns:repeat(12, 1fr); gap:3px; margin-top:14px; }
  .stat .dots i { height:10px; border-radius:3px; background:#fff1a8; animation:blink 1.8s infinite; }
  @keyframes blink { 0%,100% { background:#fff1a8; } 30% { background:#e6bf00; } }
  .stat .ekg { width:100%; height:26px; margin-top:8px; }
  .stat .ekg path { fill:none; stroke:var(--green); stroke-width:1.6; stroke-dasharray:240; stroke-dashoffset:240; animation:draw 2.4s linear infinite; }
  @keyframes draw { to { stroke-dashoffset:0; } }
  .stat.key { background:#05070c; border-color:#05070c; } .stat.key .v { color:var(--yel); } .stat.key .k { color:#aeb8c6; } .stat.key .vs { color:#8f9aab; }
  .stat .six { display:grid; grid-template-columns:repeat(6, 1fr); gap:3px; margin-top:14px; }
  .stat .six i { height:10px; border-radius:3px; background:#1a2130; animation:six 2.4s infinite; }
  @keyframes six { 0%,100% { background:#1a2130; } 40% { background:var(--yel); } }
  .plan-sw { display:inline-grid; grid-template-columns:repeat(2, 110px); border:1px solid var(--line); border-radius:var(--r); overflow:hidden; height:32px; }
  .plan-sw span { display:grid; place-items:center; font-size:12px; color:var(--muted); cursor:pointer; white-space:nowrap; }
  .plan-sw span.on { background:var(--black); color:var(--yel); }
  .exp .rq .ps { margin-left:auto; }
  .ftb td.val { transition:color .3s; }
  .ftb td.val.null { color:#a3adba; font-family:'IBM Plex Mono', monospace; font-size:12px; }
  .ftb td.val .lock { display:inline-flex; align-items:center; gap:6px; }
  .ftb td.val .lock b { font-weight:400; font-family:Roboto, sans-serif; font-size:11px; background:#fff5cc; color:#7a6200; border-radius:var(--r); padding:1px 7px; }
  .ftb tr.fill td { background:#fffbe6; transition:background 1.2s; }
  .unlock { display:flex; align-items:center; gap:12px; border:1px dashed #e6c200; background:#fffbe6; border-radius:var(--r); padding:10px 12px; font-size:13px; color:#5c4a00; }
  .unlock .btn { margin-left:auto; min-width:140px; height:34px; font-size:13px; }
  .ladder { margin-top:22px; border-radius:var(--r); padding:26px; display:grid; grid-template-columns:1fr 1.6fr; gap:28px; align-items:center; }
  .ladder .lt { font-size:26px; font-weight:300; color:#fff; line-height:1.25; }
  .ladder .lp { color:#aeb8c6; font-size:14px; margin-top:8px; }
  .ladder .lb { display:grid; grid-template-columns:repeat(2, 170px); gap:10px; margin-top:18px; }
  .rungs { display:grid; grid-template-columns:repeat(4, 1fr); gap:10px; }
  .rung { border:1px solid var(--panel-line); border-radius:var(--r); padding:14px; display:grid; gap:6px; align-content:start; background:#0b0f17; transition:border-color .4s, transform .4s, background .4s; }
  .rung.lit { border-color:var(--yel); background:#14130a; transform:translateY(-4px); }
  .rung .rn { font-size:15px; color:#fff; display:flex; justify-content:space-between; align-items:center; white-space:nowrap; }
  .rung .rx { font-size:12px; color:var(--on-dark-muted); }
  .rung ul { list-style:none; display:grid; gap:4px; font-size:12px; color:#c9d3e0; margin-top:4px; }
  .rung li::before { content:''; display:inline-block; width:5px; height:5px; border-radius:2px; background:var(--cyan); margin-right:7px; transform:translateY(-1px); }
  .rung.lit li::before { background:var(--yel); }

  /* live sport band: full width, darker than the hero, closes it off */
  .band { position:relative; overflow:hidden; background:#020306; color:#e6ebf2; border-top:1px solid #1a1f2a; border-bottom:1px solid #1a1f2a; }
  .band::before { content:''; position:absolute; inset:-40%; background:radial-gradient(closest-side, rgba(255,212,0,.16), transparent 70%) 12% 40%/38% 60% no-repeat, radial-gradient(closest-side, rgba(34,211,238,.13), transparent 70%) 88% 60%/40% 70% no-repeat, radial-gradient(closest-side, rgba(31,91,255,.14), transparent 70%) 55% 0%/50% 60% no-repeat; animation:drift 14s ease-in-out infinite alternate; }
  .band::after { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.07) 1px, transparent 1.3px); background-size:14px 14px; mask-image:linear-gradient(90deg, transparent, #000 20%, #000 80%, transparent); }
  @keyframes drift { from { transform:translate(-3%, -2%) rotate(-2deg); } to { transform:translate(3%, 2%) rotate(2deg); } }
  .band .streak { position:absolute; top:0; bottom:0; width:160px; background:linear-gradient(90deg, transparent, rgba(255,212,0,.10), transparent); transform:skewX(-20deg); animation:streak 6s linear infinite; z-index:1; }
  .band .streak.b { background:linear-gradient(90deg, transparent, rgba(34,211,238,.09), transparent); animation-delay:3s; }
  @keyframes streak { from { left:-20%; } to { left:120%; } }
  .band .in { position:relative; z-index:2; display:grid; grid-template-columns:1fr auto; gap:40px; align-items:center; padding-top:40px; padding-bottom:40px; }
  .band .live { display:inline-flex; align-items:center; gap:8px; font-size:12px; letter-spacing:.08em; text-transform:uppercase; color:#86efac; }
  .band .live i { width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite; }
  .band .bt { display:block; font-size:32px; font-weight:300; line-height:1.2; color:#fff; margin-top:8px; letter-spacing:-.01em; }
  .band .bt em { font-style:normal; color:var(--yel); }
  .band .bs { color:#aeb8c6; font-size:15px; margin-top:8px; max-width:620px; }
  .band .chips { display:grid; grid-template-columns:repeat(6, 108px); gap:8px; margin-top:18px; }
  .band .chips a { height:34px; border-radius:var(--r); border:1px solid #232a38; background:rgba(12,16,24,.7); display:flex; align-items:center; justify-content:center; gap:7px; font-size:13px; color:#c9d3e0; white-space:nowrap; transition:border-color .2s, color .2s; }
  .band .chips a:hover { border-color:var(--yel); color:#fff; }
  .band .chips a i { width:6px; height:6px; border-radius:50%; background:var(--green); }
  .band .bb { display:grid; grid-template-columns:200px; gap:10px; }
  .band .bb .btn { min-width:0; height:46px; font-size:15px; }
  .band .bb small { text-align:center; font-size:12px; color:#8f9aab; }
  .s2 { padding-top:36px; }
  /* 3 how it works: the set receiving calls */
  .s3 { position:relative; overflow:hidden; background:#03050a; color:#e6ebf2; padding:76px 0; }
  .s3::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.3px); background-size:16px 16px; }
  .s3::after { content:''; position:absolute; left:50%; top:46%; width:900px; height:520px; transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgba(31,91,255,.20), transparent 70%); pointer-events:none; }
  .s3 .in { position:relative; z-index:1; }
  .s3 .sh .t { color:#fff; } .s3 .sh .p { color:#aeb8c6; } .s3 .eye { color:#8f9aab; }
  .s3-stage { display:grid; grid-template-columns:330px 1fr 300px; gap:26px; align-items:center; }
  .s3-card { background:rgba(12,16,24,.85); border:1px solid #1e2532; border-radius:var(--r); overflow:hidden; }
  .s3-card .hd { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid #1e2532; font-size:12px; color:#8f9aab; white-space:nowrap; }
  .s3-card .hd i { width:7px; height:7px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite; }
  .s3-card .hd span:last-child { margin-left:auto; font-family:'IBM Plex Mono', monospace; color:#5f6b7d; }
  .s3-log { height:356px; overflow:hidden; padding:6px 0; font-family:'IBM Plex Mono', monospace; font-size:12px; }
  .s3-log .ln { display:grid; grid-template-columns:34px 1fr 34px 46px; gap:8px; padding:6px 14px; align-items:center; white-space:nowrap; animation:lnin .45s ease; }
  .s3-log .ln:first-child { background:rgba(255,212,0,.06); }
  .s3-log .m { color:#fff; background:var(--blue); border-radius:4px; text-align:center; font-size:10px; }
  .s3-log .pa { color:var(--cyan); overflow:hidden; text-overflow:ellipsis; } .s3-log .ok { color:#86efac; } .s3-log .ms { color:#8f9aab; text-align:right; }
  @keyframes lnin { from { opacity:0; transform:translateY(-8px); } to { opacity:1; transform:none; } }
  .s3-tv { position:relative; }
  .s3-tv svg.set { width:100%; height:auto; display:block; }
  .s3-screen { position:absolute; left:9.6%; right:9.6%; top:31.4%; height:52.2%; border-radius:14px; overflow:hidden; background:#000; font-family:'IBM Plex Mono', monospace; }
  .s3-screen::after { content:''; position:absolute; inset:0; background:repeating-linear-gradient(0deg, rgba(255,255,255,.04) 0 1px, transparent 1px 3px), radial-gradient(ellipse at center, transparent 55%, rgba(0,0,0,.55) 100%); pointer-events:none; }
  .s3-screen .tt { display:flex; justify-content:space-between; background:#1f5bff; color:#fff; font-size:12px; padding:5px 12px; }
  .s3-screen .tt b { font-weight:400; color:#ffd400; }
  .s3-screen .bd2 { padding:12px 14px; display:grid; gap:9px; transition:opacity .25s; }
  .s3-screen .chn { display:flex; justify-content:space-between; align-items:baseline; color:#22d3ee; font-size:13px; }
  .s3-screen .chn span:last-child { color:#ffd400; }
  .s3-screen .now { color:#fff; font-size:20px; line-height:1.2; font-family:Roboto, sans-serif; font-weight:300; }
  .s3-screen .sub { color:#8f9aab; font-size:11px; }
  .s3-screen .prg { height:5px; background:#1a2130; border-radius:3px; overflow:hidden; } .s3-screen .prg i { display:block; height:100%; background:#22d3ee; transition:width .6s; }
  .s3-screen .nx { display:grid; grid-template-columns:52px 1fr; gap:6px 10px; font-size:12px; color:#c9d3e0; } .s3-screen .nx span:nth-child(odd) { color:#ffd400; }
  .s3-screen .fx { position:absolute; left:14px; right:14px; bottom:10px; display:grid; grid-template-columns:repeat(4, 1fr); gap:6px; }
  .s3-screen .fx i { height:4px; border-radius:2px; } 
  .s3-screen.flash .bd2 { opacity:0; }
  .s3-screen .noise { position:absolute; inset:0; background:repeating-radial-gradient(#fff 0 .5px, transparent 1px 3px); opacity:0; mix-blend-mode:screen; transition:opacity .1s; }
  .s3-screen.flash .noise { opacity:.22; }
  .s3-beam { position:absolute; top:50%; height:2px; width:40px; background:linear-gradient(90deg, transparent, var(--cyan)); border-radius:2px; opacity:0; }
  .s3-beam.go { animation:beam .7s ease-out; }
  @keyframes beam { 0% { left:-60px; opacity:0; } 20% { opacity:1; } 100% { left:22%; opacity:0; } }
  .s3-rail { height:356px; overflow:hidden; position:relative; }
  .s3-rail .lst { display:grid; }
  .s3-rail .it { display:grid; grid-template-columns:30px 1fr auto; gap:10px; align-items:center; padding:9px 14px; border-bottom:1px solid #141a26; font-size:13px; animation:lnin .45s ease; }
  .s3-rail .cc { font-size:10px; color:#05070c; background:var(--cyan); border-radius:4px; text-align:center; padding:1px 0; }
  .s3-rail .ti { color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .s3-rail .ti small { display:block; color:#8f9aab; font-size:11px; }
  .s3-rail .tm { color:#ffd400; font-family:'IBM Plex Mono', monospace; font-size:12px; }
  .s3-rail::after { content:''; position:absolute; left:0; right:0; bottom:0; height:60px; background:linear-gradient(transparent, rgba(12,16,24,.95)); }
  .s3-steps { display:grid; grid-template-columns:repeat(3, 1fr) 220px; gap:14px; margin-top:34px; align-items:stretch; }
  .s3-step { border:1px solid #1e2532; border-radius:var(--r); padding:16px 18px; background:rgba(12,16,24,.7); display:grid; grid-template-columns:30px 1fr; gap:12px; align-items:start; }
  .s3-step .n { width:30px; height:30px; border-radius:8px; background:#141a26; color:var(--yel); display:grid; place-items:center; font-family:'IBM Plex Mono', monospace; font-size:13px; }
  .s3-step .t { font-size:15px; color:#fff; } .s3-step .d { font-size:13px; color:#8f9aab; margin-top:2px; }
  .s3-cta { display:grid; gap:10px; align-content:center; } .s3-cta .btn { min-width:0; }
  /* 4 the show library */
  .s4 { background:var(--alt); padding:76px 0; border-bottom:1px solid var(--line); }
  .s4-grid { display:grid; grid-template-columns:1fr 1fr; gap:18px; }
  .s4-search { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:18px; display:grid; gap:14px; align-content:start; }
  .s4-in { height:46px; border:1px solid var(--line); border-radius:var(--r); display:flex; align-items:center; gap:10px; padding:0 14px; font-size:16px; color:var(--ink); box-shadow:0 0 0 3px rgba(31,91,255,.10); border-color:var(--blue); }
  .s4-in svg { width:16px; height:16px; color:var(--muted); flex:none; }
  .s4-in .cur { width:2px; height:20px; background:var(--blue); animation:cur 1s steps(2) infinite; }
  @keyframes cur { 50% { opacity:0; } }
  .s4-in .k { margin-left:auto; font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--muted); border:1px solid var(--line); border-radius:6px; padding:0 6px; }
  .s4-show { display:grid; grid-template-columns:96px 1fr; gap:16px; animation:fade .4s ease; }
  .s4-poster { height:136px; border-radius:var(--r); background:linear-gradient(160deg, var(--c1), var(--c2)); position:relative; overflow:hidden; display:flex; align-items:flex-end; padding:10px; color:#fff; font-size:13px; line-height:1.2; }
  .s4-poster::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.18) 1px, transparent 1.3px); background-size:10px 10px; }
  .s4-poster span { position:relative; }
  .s4-meta { display:grid; gap:6px; align-content:start; }
  .s4-meta .nm { font-size:22px; font-weight:300; }
  .s4-meta .tags { display:flex; gap:6px; flex-wrap:wrap; }
  .s4-meta .tags span { font-size:12px; background:var(--alt); border-radius:6px; padding:1px 8px; color:var(--text); white-space:nowrap; }
  .s4-meta .id { font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--blue); }
  .s4-next { border:1px solid var(--line); border-radius:var(--r); display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; padding:10px 12px; background:#fafbfc; font-size:13px; }
  .s4-next .lv { font-size:11px; color:#05070c; background:var(--yel); border-radius:6px; padding:1px 8px; white-space:nowrap; }
  .s4-next .tm { font-family:'IBM Plex Mono', monospace; color:var(--ink); }
  .s4-eps { background:#05070c; border-radius:var(--r); padding:18px; color:#e6ebf2; display:grid; gap:12px; align-content:start; position:relative; overflow:hidden; }
  .s4-eps::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(34,211,238,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.07) 1px, transparent 1px); background-size:24px 24px; }
  .s4-eps > * { position:relative; }
  .s4-eps .hd { display:flex; justify-content:space-between; font-size:12px; color:#8f9aab; letter-spacing:.06em; text-transform:uppercase; }
  .s4-seasons { display:grid; gap:5px; }
  .s4-season { display:grid; grid-template-columns:34px 1fr; gap:8px; align-items:center; font-family:'IBM Plex Mono', monospace; font-size:11px; color:#8f9aab; }
  .s4-season .row2 { display:grid; grid-template-columns:repeat(24, 1fr); gap:3px; }
  .s4-season .row2 i { height:12px; border-radius:2px; background:#141a26; transition:background .3s; }
  .s4-season .row2 i.on { background:#1f5bff; } .s4-season .row2 i.hit { background:var(--yel); box-shadow:0 0 8px rgba(255,212,0,.6); }
  .s4-ep { border:1px solid #1e2532; border-radius:var(--r); padding:10px 12px; display:grid; grid-template-columns:1fr auto; gap:4px 12px; font-size:13px; background:rgba(12,16,24,.8); }
  .s4-ep .t { color:#fff; } .s4-ep .s { color:#8f9aab; font-size:12px; } .s4-ep .m { color:var(--yel); font-family:'IBM Plex Mono', monospace; font-size:12px; text-align:right; }
  .s4-facts { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:18px; }
  .s4-fact { background:#fff; border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:grid; gap:2px; }
  .s4-fact .v { font-size:26px; font-weight:300; font-variant-numeric:tabular-nums; } .s4-fact .k { font-size:12px; color:var(--muted); white-space:nowrap; }
  .s4-fact .track { height:6px; border-radius:3px; background:var(--line-2); overflow:hidden; margin-top:8px; } .s4-fact .track i { display:block; height:100%; background:var(--blue); width:var(--w); animation:wide 1.4s ease both; }

  /* 5 coverage */
  .s5 { padding:76px 0; background:#fff; }
  .s5-grid { display:grid; grid-template-columns:1.25fr 1fr; gap:18px; align-items:stretch; }
  .s5-map { background:#05070c; border-radius:var(--r); padding:18px; color:#e6ebf2; position:relative; overflow:hidden; display:grid; gap:12px; align-content:space-between; }
  .s5-map .hd { display:flex; justify-content:space-between; align-items:center; font-size:12px; color:#8f9aab; letter-spacing:.06em; text-transform:uppercase; }
  .s5-map .hd b { font-weight:300; font-size:28px; color:#fff; letter-spacing:0; text-transform:none; font-variant-numeric:tabular-nums; }
  .s5-map svg { width:100%; height:auto; }
  .s5-map .pip { fill:#1f2a3d; transition:fill .5s; } .s5-map .pip.lit { fill:#22d3ee; } .s5-map .pip.hot { fill:#ffd400; }
  .s5-map .tk { display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
  .s5-map .tk div { border:1px solid #1e2532; border-radius:var(--r); padding:10px 12px; background:rgba(12,16,24,.8); display:grid; }
  .s5-map .tk b { font-weight:300; font-size:20px; color:#fff; } .s5-map .tk span { font-size:12px; color:#8f9aab; white-space:nowrap; }
  .s5-side { display:grid; gap:12px; align-content:start; }
  .s5-fill { border:1px solid var(--line); border-radius:var(--r); padding:16px 18px; display:grid; gap:8px; }
  .s5-fill .hd { font-size:12px; color:var(--muted); letter-spacing:.06em; text-transform:uppercase; }
  .s5-row { display:grid; grid-template-columns:120px 1fr 48px; gap:10px; align-items:center; font-size:13px; }
  .s5-row .bar { height:8px; border-radius:4px; background:var(--line-2); overflow:hidden; display:block; } .s5-row .bar i { display:block; height:100%; background:var(--blue); border-radius:4px; } .s5-row .pc { text-align:right; color:var(--muted); font-variant-numeric:tabular-nums; }
  .s5-row .bar i { width:var(--w); animation:wide 1.4s ease both; }
  .s5-row .bar.warn i { background:#e6a700; } .s5-row .bar.bad i { background:#d98fa0; }
  .s5-cta { border-radius:var(--r); padding:16px 18px; background:#fffbe6; border:1px solid #f3e08a; display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; }
  .s5-cta .t { font-size:15px; } .s5-cta .d { font-size:13px; color:#6b5a14; } .s5-cta .btn { min-width:150px; }
  /* 6 agents and MCP, dark */
  .s6 { position:relative; overflow:hidden; background:#03050a; color:#e6ebf2; padding:80px 0; }
  .s6::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(34,211,238,.06) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.06) 1px, transparent 1px); background-size:24px 24px; mask-image:radial-gradient(ellipse at 70% 50%, #000 30%, transparent 75%); }
  .s6::after { content:''; position:absolute; right:-10%; top:10%; width:700px; height:500px; background:radial-gradient(closest-side, rgba(255,212,0,.10), transparent 70%); pointer-events:none; }
  .s6 .in { position:relative; z-index:1; display:grid; grid-template-columns:1fr 1.05fr; gap:44px; align-items:center; }
  .s6 .eye { color:#8f9aab; }
  .s6 .t6 { display:block; font-size:34px; font-weight:300; line-height:1.18; color:#fff; margin-top:8px; letter-spacing:-.01em; }
  .s6 .t6 em { font-style:normal; color:var(--yel); }
  .s6 .p6 { color:#aeb8c6; font-size:15px; margin-top:12px; max-width:500px; }
  .s6-tools { display:flex; flex-wrap:wrap; gap:6px; margin-top:20px; }
  .s6-tools span { font-family:'IBM Plex Mono', monospace; font-size:12px; color:#c9d3e0; border:1px solid #1e2532; background:rgba(12,16,24,.8); border-radius:6px; padding:3px 9px; transition:border-color .3s, color .3s, background .3s; }
  .s6-tools span.hot { border-color:var(--cyan); color:var(--cyan); background:rgba(34,211,238,.08); }
  .s6-links { display:grid; grid-template-columns:1fr 1fr; gap:10px; margin-top:22px; }
  .s6-links a { border:1px solid #1e2532; border-radius:var(--r); padding:12px 14px; display:grid; gap:2px; background:rgba(12,16,24,.7); transition:border-color .2s; }
  .s6-links a:hover { border-color:#3a4458; } .s6-links b { font-weight:400; color:#fff; font-size:14px; } .s6-links span { color:#8f9aab; font-size:12px; }
  .s6-cta { display:grid; grid-template-columns:repeat(2, 170px); gap:10px; margin-top:22px; } .s6-cta .btn { min-width:0; }
  .s6-chat { background:rgba(12,16,24,.92); border:1px solid #1e2532; border-radius:var(--r); overflow:hidden; box-shadow:0 30px 60px rgba(0,0,0,.45); }
  .s6-chat .bar6 { display:flex; align-items:center; gap:8px; padding:10px 14px; border-bottom:1px solid #1e2532; font-size:12px; color:#8f9aab; }
  .s6-chat .bar6 i { width:9px; height:9px; border-radius:50%; background:#232b3a; } .s6-chat .bar6 span { margin-left:6px; }
  .s6-chat .bar6 b { margin-left:auto; font-weight:400; color:#86efac; display:inline-flex; gap:6px; align-items:center; } .s6-chat .bar6 b::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--green); }
  .s6-msgs { padding:16px; display:grid; gap:12px; height:400px; align-content:start; overflow:hidden; }
  .s6-m { max-width:88%; padding:10px 12px; border-radius:var(--r); font-size:14px; line-height:1.5; animation:lnin .35s ease; }
  .s6-m.me { justify-self:end; background:#1a2130; color:#fff; }
  .s6-m.ai { background:#0b0f17; border:1px solid #1e2532; color:#c9d3e0; }
  .s6-call { display:inline-flex; align-items:center; gap:8px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--cyan); border:1px solid #1e2532; border-radius:6px; padding:3px 9px; }
  .s6-call .sp { width:10px; height:10px; border:2px solid rgba(34,211,238,.3); border-top-color:var(--cyan); border-radius:50%; animation:spin .8s linear infinite; }
  .s6-call .dn { color:#86efac; }
  @keyframes spin { to { transform:rotate(360deg); } }
  .s6-res { width:100%; border-collapse:collapse; margin-top:8px; font-size:12px; }
  .s6-res td { padding:5px 8px; border-top:1px solid #1e2532; color:#c9d3e0; white-space:nowrap; } .s6-res td.t { color:var(--yel); font-family:'IBM Plex Mono', monospace; }
  .s6-in { display:flex; align-items:center; gap:8px; margin:0 16px 16px; height:42px; border:1px solid #1e2532; border-radius:var(--r); padding:0 12px; color:#5f6b7d; font-size:13px; }
  .s6-in span:last-child { margin-left:auto; width:28px; height:28px; border-radius:8px; background:var(--yel); }

  /* 7 lab, light */
  .s7 { background:#fff; padding:80px 0; border-bottom:1px solid var(--line); }
  .s7-grid { display:grid; grid-template-columns:repeat(3, 1fr); gap:14px; }
  .s7-card { border:1px solid var(--line); border-radius:var(--r); overflow:hidden; display:grid; grid-template-rows:auto 1fr auto; background:#fff; transition:box-shadow .2s, border-color .2s; }
  .s7-card:hover { border-color:#c9d2de; box-shadow:0 10px 24px rgba(15,27,45,.07); }
  .s7-card .hd { padding:16px 18px 10px; display:grid; gap:4px; }
  .s7-card .hd .nm { display:flex; align-items:center; justify-content:space-between; font-size:16px; }
  .s7-card .hd .ds { color:var(--muted); font-size:13px; }
  .s7-term { margin:0 18px; background:#05070c; border-radius:var(--r); padding:12px 14px; font-family:'IBM Plex Mono', monospace; font-size:12px; color:#c9d3e0; line-height:1.7; height:170px; overflow:hidden; white-space:pre; }
  .s7-term .pr { color:var(--yel); } .s7-term .c { color:var(--cyan); } .s7-term .g { color:#86efac; } .s7-term .d { color:#6b778a; }
  .s7-term .cur { display:inline-block; width:7px; height:13px; background:#c9d3e0; vertical-align:-2px; animation:cur 1s steps(2) infinite; }
  .s7-card .ft { display:grid; grid-template-columns:1fr repeat(2, 96px); gap:8px; align-items:center; padding:14px 18px; font-size:12px; color:var(--muted); }
  .s7-card .ft .btn { min-width:0; height:32px; font-size:12px; }
  .s7-clients { display:grid; grid-template-columns:repeat(3, minmax(0, 1fr)); gap:14px; margin-top:14px; }
  .s7-cl { border:1px solid var(--line); border-radius:var(--r); padding:14px 16px; display:grid; grid-template-columns:auto 1fr auto; gap:12px; align-items:center; background:var(--alt); }
  .s7-cl .lg { width:36px; height:36px; border-radius:8px; background:#05070c; color:var(--yel); display:grid; place-items:center; font-family:'IBM Plex Mono', monospace; font-size:12px; }
  .s7-cl > div { min-width:0; } .s7-cl .t { font-size:14px; } .s7-cl .c { font-family:'IBM Plex Mono', monospace; font-size:12px; color:var(--blue); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .s7-cl .btn { min-width:0; width:96px; height:32px; font-size:12px; }
  .s7-cl.dk { background:#05070c; border-color:#05070c; color:#e6ebf2; } .s7-cl.dk .c { color:#aeb8c6; font-family:Roboto, sans-serif; } .s7-cl.dk .lg { background:var(--yel); color:#05070c; }
  /* 8 pricing, dark */
  .s8 { position:relative; overflow:hidden; background:#03050a; color:#e6ebf2; padding:80px 0; }
  .s8::before { content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.06) 1px, transparent 1.3px); background-size:16px 16px; }
  .s8::after { content:''; position:absolute; left:50%; top:60%; width:1100px; height:520px; transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgba(255,212,0,.09), transparent 70%); pointer-events:none; }
  .s8 .in { position:relative; z-index:1; }
  .s8 .sh .t { color:#fff; } .s8 .sh .p { color:#aeb8c6; } .s8 .eye { color:#8f9aab; }
  .s8-bar { display:flex; justify-content:space-between; align-items:center; margin-bottom:18px; gap:16px; }
  .s8-tabs, .s8-bill { display:inline-grid; border:1px solid #232a38; border-radius:var(--r); overflow:hidden; height:38px; background:rgba(12,16,24,.8); }
  .s8-tabs { grid-template-columns:repeat(2, 200px); } .s8-bill { grid-template-columns:repeat(2, 150px); }
  .s8-tabs span, .s8-bill span { display:flex; align-items:center; justify-content:center; gap:8px; font-size:13px; color:#8f9aab; cursor:pointer; white-space:nowrap; }
  .s8-tabs span.on, .s8-bill span.on { background:#1a2130; color:#fff; }
  .s8-tabs .bd, .s8-bill .bd { font-size:10px; }
  .s8-plans { display:grid; grid-template-columns:repeat(4, 1fr); gap:14px; }
  .s8-plans.three { grid-template-columns:repeat(3, 1fr); }
  .s8-plan { border:1px solid #1e2532; border-radius:var(--r); padding:20px; background:rgba(12,16,24,.88); display:grid; gap:10px; align-content:start; position:relative; transition:transform .25s, border-color .25s; animation:fade .35s ease; }
  .s8-plan:hover { transform:translateY(-4px); border-color:#3a4458; }
  .s8-plan.pick { border-color:transparent; background:linear-gradient(rgba(12,16,24,.96), rgba(12,16,24,.96)) padding-box, linear-gradient(120deg, #ffd400, #22d3ee, #1f5bff, #ffd400) border-box; background-size:100% 100%, 300% 300%; animation:ring 6s linear infinite, fade .35s ease; border:1px solid transparent; }
  @keyframes ring { to { background-position:0 0, 300% 0; } }
  .s8-plan .pn { display:flex; justify-content:space-between; align-items:center; font-size:16px; color:#fff; white-space:nowrap; }
  .s8-plan .pp { font-size:32px; font-weight:300; color:#fff; } .s8-plan .pp small { font-size:13px; color:#8f9aab; }
  .s8-plan .pd { font-size:13px; color:#aeb8c6; min-height:40px; }
  .s8-plan ul { list-style:none; display:grid; gap:7px; font-size:13px; color:#c9d3e0; border-top:1px solid #1e2532; padding-top:12px; }
  .s8-plan li::before { content:''; display:inline-block; width:6px; height:6px; border-radius:2px; background:var(--cyan); margin-right:9px; transform:translateY(-1px); }
  .s8-plan li.no { color:#5f6b7d; } .s8-plan li.no::before { background:#2b3446; }
  .s8-plan.pick li::before { background:var(--yel); }
  .s8-plan { display:flex; flex-direction:column; } .s8-plan .btn { min-width:0; margin-top:auto; } .s8-plan ul { margin-bottom:16px; }
  .s8-note { display:flex; justify-content:center; gap:28px; margin-top:20px; color:#8f9aab; font-size:13px; white-space:nowrap; flex-wrap:wrap; }
  .s8-note span::before { content:''; display:inline-block; width:6px; height:6px; border-radius:50%; background:var(--green); margin-right:8px; transform:translateY(-1px); }

  /* 9 status and questions, light */
  .s9 { background:var(--alt); padding:80px 0; border-bottom:1px solid var(--line); }
  .s9-grid { display:grid; grid-template-columns:1fr 1.15fr; gap:18px; align-items:start; }
  .s9-status { background:#fff; border:1px solid var(--line); border-radius:var(--r); overflow:hidden; }
  .s9-status .top { display:flex; align-items:center; gap:12px; padding:18px 20px; border-bottom:1px solid var(--line); }
  .s9-status .top .ok { width:36px; height:36px; border-radius:50%; background:var(--ok-bg); display:grid; place-items:center; flex:none; }
  .s9-status .top .ok::after { content:''; width:12px; height:6px; border-left:2px solid var(--ok); border-bottom:2px solid var(--ok); transform:rotate(-45deg) translate(1px,-1px); }
  .s9-status .top .t { font-size:18px; font-weight:300; } .s9-status .top .d { font-size:12px; color:var(--muted); }
  .s9-status .top .btn { margin-left:auto; min-width:120px; height:34px; font-size:13px; }
  .s9-part { padding:14px 20px; border-bottom:1px solid var(--line-2); display:grid; gap:8px; }
  .s9-part:last-child { border-bottom:0; }
  .s9-part .hd { display:flex; justify-content:space-between; align-items:center; font-size:14px; }
  .s9-part .hd small { color:var(--muted); font-size:12px; margin-left:8px; }
  .s9-part .u { display:grid; grid-template-columns:repeat(30, 1fr); gap:2px; height:22px; }
  .s9-part .u i { background:#bbf0cf; border-radius:2px; transform-origin:bottom; animation:grow .8s ease both; }
  .s9-part .lg { display:flex; justify-content:space-between; font-size:11px; color:var(--faint); }
  .s9-pill { font-size:12px; padding:2px 9px; border-radius:var(--r); background:var(--ok-bg); color:var(--ok); display:inline-flex; align-items:center; gap:6px; }
  .s9-pill::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--green); }
  .s9-faq { display:grid; gap:10px; }
  .s9-q { background:#fff; border:1px solid var(--line); border-radius:var(--r); }
  .s9-q summary { list-style:none; cursor:pointer; padding:16px 18px; font-size:15px; display:flex; justify-content:space-between; align-items:center; gap:14px; }
  .s9-q summary::-webkit-details-marker { display:none; }
  .s9-q summary::after { content:''; width:8px; height:8px; border-right:1.5px solid var(--muted); border-bottom:1.5px solid var(--muted); transform:rotate(45deg); flex:none; transition:transform .2s; }
  .s9-q[open] summary::after { transform:rotate(-135deg); }
  .s9-q p { padding:0 18px 16px; color:var(--muted); font-size:14px; }
  .s9-help { display:grid; grid-template-columns:1fr auto; gap:12px; align-items:center; border-radius:var(--r); padding:14px 18px; background:#05070c; color:#e6ebf2; }
  .s9-help .t { font-size:15px; } .s9-help .d { font-size:13px; color:#8f9aab; } .s9-help .btn { min-width:140px; height:36px; font-size:13px; }
  /* 10 live events, dark */
  .s10 { position:relative; overflow:hidden; background:#020306; color:#e6ebf2; padding:84px 0; }
  .s10::before { content:''; position:absolute; inset:-30%; background:radial-gradient(closest-side, rgba(34,197,94,.10), transparent 70%) 15% 30%/40% 50% no-repeat, radial-gradient(closest-side, rgba(255,212,0,.10), transparent 70%) 85% 70%/45% 55% no-repeat; animation:drift 16s ease-in-out infinite alternate; }
  .s10::after { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(34,211,238,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.05) 1px, transparent 1px); background-size:24px 24px; }
  .s10 .in { position:relative; z-index:1; }
  .s10 .sh .t { color:#fff; } .s10 .sh .p { color:#aeb8c6; } .s10 .eye { color:#86efac; display:inline-flex; align-items:center; gap:8px; }
  .s10 .eye i { width:8px; height:8px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite; }
  .s10-grid { display:grid; grid-template-columns:1.5fr 1fr; gap:18px; }
  .board { background:rgba(8,11,17,.92); border:1px solid #1e2532; border-radius:var(--r); overflow:hidden; }
  .board .bh { display:flex; align-items:center; gap:10px; padding:12px 16px; border-bottom:1px solid #1e2532; font-size:12px; color:#8f9aab; letter-spacing:.06em; text-transform:uppercase; }
  .board .bh b { font-weight:400; margin-left:auto; color:var(--yel); font-family:'IBM Plex Mono', monospace; letter-spacing:0; }
  .board .row10 { display:grid; grid-template-columns:96px 1fr 74px 80px 120px; gap:12px; align-items:center; padding:11px 16px; border-bottom:1px solid #141a26; font-size:13px; }
  .board .row10.hd2 { font-size:11px; color:#5f6b7d; text-transform:uppercase; letter-spacing:.06em; padding-top:9px; padding-bottom:9px; }
  .flap { display:inline-flex; gap:2px; font-family:'IBM Plex Mono', monospace; }
  .flap span { background:#141a26; border-radius:3px; padding:2px 2px; color:var(--yel); min-width:12px; text-align:center; position:relative; overflow:hidden; }
  .flap span::after { content:''; position:absolute; left:0; right:0; top:50%; height:1px; background:#05070c; }
  .flap span.flip { animation:flip .3s ease; } @keyframes flip { 0% { transform:rotateX(0); } 50% { transform:rotateX(90deg); } 100% { transform:rotateX(0); } }
  .board .mt { display:grid; min-width:0; } .board .mt b { font-weight:400; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .board .mt small { color:#8f9aab; font-size:12px; }
  .board .num { font-variant-numeric:tabular-nums; color:#c9d3e0; text-align:right; }
  .tag10 { font-size:11px; border-radius:var(--r); padding:2px 8px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap; justify-self:start; }
  .tag10.lv { background:rgba(34,197,94,.14); color:#86efac; } .tag10.lv::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--green); animation:pulse 1.6s infinite; }
  .tag10.rp { background:#141a26; color:#8f9aab; } .tag10.dl { background:rgba(255,212,0,.12); color:#ffe680; }
  .reach { height:6px; background:#141a26; border-radius:3px; overflow:hidden; } .reach i { display:block; height:100%; background:linear-gradient(90deg, #22d3ee, #ffd400); border-radius:3px; transition:width .8s; }
  .board .ft10 { display:flex; justify-content:space-between; padding:11px 16px; font-size:12px; color:#8f9aab; }
  .signal { background:rgba(8,11,17,.92); border:1px solid #1e2532; border-radius:var(--r); padding:18px; display:grid; gap:12px; align-content:start; }
  .signal .k { font-size:12px; color:#8f9aab; letter-spacing:.06em; text-transform:uppercase; }
  .signal .mt2 { font-size:20px; font-weight:300; color:#fff; }
  .signal .big { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
  .signal .big div { border:1px solid #1e2532; border-radius:var(--r); padding:10px 12px; display:grid; } .signal .big b { font-weight:300; font-size:26px; color:var(--yel); font-variant-numeric:tabular-nums; } .signal .big span { font-size:12px; color:#8f9aab; }
  .signal .cty { display:grid; gap:6px; }
  .signal .cr { display:grid; grid-template-columns:30px 1fr 24px; gap:10px; align-items:center; font-size:12px; color:#c9d3e0; }
  .signal .cr .cc { font-size:10px; color:#05070c; background:var(--cyan); border-radius:4px; text-align:center; }
  .signal .cr .br { height:8px; border-radius:4px; background:#141a26; overflow:hidden; } .signal .cr .br i { display:block; height:100%; background:var(--cyan); border-radius:4px; transition:width .8s; }
  .signal .cr span:last-child { text-align:right; font-variant-numeric:tabular-nums; }
  .signal p { font-size:13px; color:#aeb8c6; }
  .s10-uses { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; margin-top:18px; }
  .s10-use { border:1px solid #1e2532; border-radius:var(--r); padding:14px 16px; background:rgba(8,11,17,.85); display:grid; gap:4px; }
  .s10-use b { font-weight:400; color:#fff; font-size:14px; } .s10-use span { font-size:12px; color:#8f9aab; } .s10-use code { font-family:'IBM Plex Mono', monospace; font-size:11px; color:var(--cyan); margin-top:4px; }
  .s10-cta { display:grid; grid-template-columns:repeat(3, 200px); gap:10px; justify-content:center; margin-top:26px; } .s10-cta .btn { min-width:0; }

  /* 11 who it is for, light, then the closing call */
  .s11 { background:#fff; padding:84px 0 0; }
  .s11-grid { display:grid; grid-template-columns:repeat(4, 1fr); gap:12px; }
  .biz { border:1px solid var(--line); border-radius:var(--r); padding:16px; display:grid; gap:8px; align-content:start; background:#fff; transition:border-color .2s, transform .2s, box-shadow .2s; }
  .biz:hover { border-color:#c9d2de; transform:translateY(-3px); box-shadow:0 10px 24px rgba(15,27,45,.07); }
  .biz .top11 { display:flex; align-items:center; gap:10px; } .biz .nm { font-size:15px; white-space:nowrap; }
  .biz .ds { color:var(--muted); font-size:13px; min-height:38px; }
  .biz .gets { display:grid; gap:4px; font-size:12px; color:var(--text); border-top:1px solid var(--line-2); padding-top:8px; }
  .biz .gets span::before { content:''; display:inline-block; width:5px; height:5px; border-radius:2px; background:var(--blue); margin-right:7px; transform:translateY(-1px); }
  .biz .ep { margin-top:2px; }
  .biz.hot { background:#05070c; border-color:#05070c; color:#e6ebf2; } .biz.hot .ds { color:#aeb8c6; } .biz.hot .gets { color:#c9d3e0; border-top-color:#1e2532; } .biz.hot .gets span::before { background:var(--yel); } .biz.hot .ep { color:var(--cyan); } .biz.hot .ic { background:#141a26; color:var(--yel); }
  .devs { margin-top:18px; border:1px solid var(--line); border-radius:var(--r); padding:18px 20px; display:grid; grid-template-columns:auto 1fr auto; gap:20px; align-items:center; background:var(--alt); }
  .devs .t { font-size:18px; font-weight:300; white-space:nowrap; }
  .devs .needs { display:flex; flex-wrap:wrap; gap:6px; }
  .devs .needs span { font-size:12px; border:1px solid var(--line); background:#fff; border-radius:6px; padding:3px 9px; color:var(--text); white-space:nowrap; }
  .devs .btn { min-width:150px; }
  .close { margin-top:64px; position:relative; overflow:hidden; background:#05070c; color:#e6ebf2; }
  .close::before { content:''; position:absolute; inset:0; background-image:linear-gradient(rgba(34,211,238,.07) 1px, transparent 1px), linear-gradient(90deg, rgba(34,211,238,.07) 1px, transparent 1px); background-size:24px 24px; }
  .close::after { content:''; position:absolute; left:50%; top:50%; width:1000px; height:400px; transform:translate(-50%,-50%); background:radial-gradient(closest-side, rgba(255,212,0,.12), transparent 70%); }
  .close .in { position:relative; z-index:1; padding:64px 24px; display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; }
  .close .t { font-size:36px; font-weight:300; color:#fff; line-height:1.18; letter-spacing:-.01em; } .close .t em { font-style:normal; color:var(--yel); }
  .close p { color:#aeb8c6; font-size:15px; margin-top:10px; max-width:620px; }
  .close .bb { display:grid; grid-template-columns:200px; gap:10px; } .close .bb .btn { min-width:0; height:46px; font-size:15px; } .close .bb small { text-align:center; font-size:12px; color:#8f9aab; }
  .foot { background:#05070c; color:#8f9aab; padding:44px 0 30px; border-top:1px solid #111722; }
  .foot .in { display:grid; grid-template-columns:1.4fr repeat(4, 1fr); gap:24px; font-size:13px; }
  .foot h6 { font-size:11px; font-weight:400; letter-spacing:.08em; text-transform:uppercase; color:#5f6b7d; margin-bottom:10px; }
  .foot a { display:block; margin-bottom:6px; white-space:nowrap; } .foot a:hover { color:#fff; }
  .foot .brand svg { width:30px; height:30px; }
  .foot .base { grid-column:1 / -1; display:flex; justify-content:space-between; border-top:1px solid #141a26; padding-top:18px; margin-top:10px; font-size:12px; color:#5f6b7d; }
  @media (max-width:1080px) { .s10-grid { grid-template-columns:1fr; } .s10-uses, .s11-grid { grid-template-columns:1fr 1fr; } .devs { grid-template-columns:1fr; } .close .in { grid-template-columns:1fr; } .foot .in { grid-template-columns:1fr 1fr; } .s10-cta { grid-template-columns:1fr 1fr 1fr; }  .s8-plans, .s8-plans.three { grid-template-columns:1fr 1fr; } .s8-bar { flex-direction:column; align-items:stretch; } .s8-tabs, .s8-bill { grid-template-columns:1fr 1fr; } .s9-grid { grid-template-columns:1fr; }  .s6 .in { grid-template-columns:1fr; } .s7-grid, .s7-clients { grid-template-columns:1fr; }  .s4-grid, .s5-grid { grid-template-columns:1fr; } .s4-facts { grid-template-columns:1fr 1fr; }  .s3-stage { grid-template-columns:1fr; } .s3-log, .s3-rail { height:220px; } .s3-steps { grid-template-columns:1fr 1fr; }  .band .in { grid-template-columns:1fr; } .band .chips { grid-template-columns:repeat(3, 1fr); } .band .bb { grid-template-columns:200px 200px; }  .mega { display:none !important; } .stats { grid-template-columns:repeat(3, 1fr); } .ladder, .rungs { grid-template-columns:1fr 1fr; }  .menu, .acts { display:none; } .burger { display:grid; } .promo { display:none; } .hdr .times span:nth-child(n+4) { display:none; } .hdr .times { grid-template-columns:repeat(3, 1fr); } .exp { grid-template-columns:1fr; } .exp .list { grid-template-columns:repeat(2, 1fr); border-right:0; border-bottom:1px solid var(--line); } .sh { grid-template-columns:1fr; } }
  @media (max-width:620px) { .board .row10 { grid-template-columns:54px 1fr 70px; } .board .row10 > :nth-child(4), .board .row10 > :nth-child(5) { display:none; } .s10-uses, .s11-grid { grid-template-columns:1fr; } .s10-cta { grid-template-columns:1fr; } .close .t { font-size:26px; }  .s8-plans, .s8-plans.three { grid-template-columns:1fr; }  .s6 .t6 { font-size:26px; } .s6-links { grid-template-columns:1fr; } .s6-cta { grid-template-columns:1fr 1fr; }  .s4-facts { grid-template-columns:1fr; } .s4-show { grid-template-columns:72px 1fr; } .s5-map .tk { grid-template-columns:1fr; } .s5-cta { grid-template-columns:1fr; }  .s3-steps { grid-template-columns:1fr; } .s3-screen .now { font-size:15px; }  .band .bt { font-size:24px; } .band .chips { grid-template-columns:repeat(2, 1fr); } .band .bb { grid-template-columns:1fr; }  .stats { grid-template-columns:1fr 1fr; } .ladder, .rungs { grid-template-columns:1fr; }  :root { --chw:116px; } .in { padding:0 16px; } .ht { font-size:32px; } .hb { grid-template-columns:1fr 1fr; } .hb .btn { min-width:0; } .facts { gap:14px; } .code .row { font-size:11px; } .exp .list { grid-template-columns:1fr; } .sh .t { font-size:24px; } .exp .ph { flex-wrap:wrap; } .exp .ph .acts3 { margin-left:0; } section.s { padding:48px 0; } }