/* ===== IPTV 101 interactive page ===== */
.g101{max-width:880px;display:grid;gap:22px}
.g101-card{position:relative;background:var(--surface);border:1.5px solid var(--line);border-radius:var(--r-lg);padding:34px 36px 30px}
.g101-card h2{font-size:clamp(1.5rem,2.8vw,2.1rem);margin-bottom:.5em}
.g101-card p{color:var(--text-2);font-size:1.05rem}
.g101-card p b{color:var(--text)}
.g101-soft{background:var(--bg-2)}
.g101-num{position:absolute;top:-16px;left:28px;width:34px;height:34px;border-radius:50%;background:var(--orange);color:var(--orange-ink);font-family:var(--display);font-weight:800;display:grid;place-items:center;font-size:1rem}
@media (max-width:600px){.g101-card{padding:28px 22px 24px}}

/* progress strip */
.g101-progress{list-style:none;padding:0;margin:26px 0 0;display:flex;flex-wrap:wrap;gap:8px}
.g101-progress li{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:var(--pill);border:1.5px solid var(--line-2);color:var(--text-3);font-weight:800;font-size:.85rem;transition:all .25s}
.g101-progress li b{width:24px;height:24px;border-radius:50%;background:var(--surface);color:var(--text-3);display:grid;place-items:center;font-size:.8rem}
.g101-progress li.on{color:var(--text);border-color:var(--orange)}
.g101-progress li.on b{background:var(--orange);color:var(--orange-ink)}
.g101-progress li.now{background:var(--orange-soft)}

/* compare pills */
.g101-row{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:18px 0}
@media (max-width:600px){.g101-row{grid-template-columns:1fr}}
.g101-pill{border:1.5px solid var(--line-2);border-radius:var(--r);padding:16px 18px}
.g101-pill b{display:block;margin-bottom:4px}
.g101-pill span{color:var(--text-3);font-size:.95rem}
.g101-pill.on{border-color:var(--orange);background:var(--orange-soft)}
.g101-pill.on span{color:var(--text-2)}

/* three things */
.g101-three{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}
@media (max-width:640px){.g101-three{grid-template-columns:1fr}}
.g101-three div{border:1.5px solid var(--line-2);border-radius:var(--r);padding:18px;display:grid;gap:4px}
.g101-three i{font-style:normal;font-size:1.6rem}
.g101-three b{font-size:1.05rem}
.g101-three span{color:var(--text-3);font-size:.92rem}

/* device picker */
.g101-devices{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:18px}
@media (max-width:760px){.g101-devices{grid-template-columns:1fr 1fr}}
@media (max-width:460px){.g101-devices{grid-template-columns:1fr}}
.g101-dev{display:grid;grid-template-columns:36px 1fr;grid-template-rows:auto auto;column-gap:12px;align-items:center;text-align:left;background:var(--bg);border:2px solid var(--line-2);border-radius:var(--r);padding:16px;cursor:pointer;color:var(--text);font-family:var(--body);text-decoration:none!important;transition:border-color .2s,transform .15s}
.g101-dev svg{grid-row:1/3;width:36px;height:36px;color:var(--orange)}
.g101-dev b{font-weight:800;font-size:1rem}
.g101-dev span{color:var(--text-3);font-size:.85rem;font-weight:600}
.g101-dev:hover{border-color:var(--orange);transform:translateY(-2px)}
.g101-dev.on{border-color:var(--orange);background:var(--orange-soft)}
.g101-dev.on::after{content:"✓";position:absolute;right:12px;top:10px;color:var(--orange);font-weight:800}
.g101-dev{position:relative}
.g101-dev-wa{grid-column:1/-1;border-style:dashed}

/* panel */
.g101-h3{font-family:var(--body);font-size:.8rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--orange);margin:26px 0 10px}
.g101-steps{list-style:none;padding:0;margin:0;display:grid;gap:10px;counter-reset:s}
.g101-steps li{counter-increment:s;display:grid;grid-template-columns:30px 1fr;gap:12px;align-items:start;background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:14px 16px}
.g101-steps li::before{content:counter(s);width:26px;height:26px;border-radius:50%;background:var(--orange);color:var(--orange-ink);display:grid;place-items:center;font-weight:800;font-size:.85rem}
.g101-steps li b{display:block;color:var(--text)}
.g101-steps li span{color:var(--text-2);font-size:.95rem}
.g101-apps{display:grid;gap:10px}
.g101-app{display:grid;grid-template-columns:40px 1fr auto;gap:14px;align-items:center;background:var(--bg);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px}
.g101-app img{width:40px;height:40px;border-radius:10px}
.g101-letter{width:40px;height:40px;border-radius:10px;background:var(--orange);color:var(--orange-ink);display:grid;place-items:center;font-family:var(--display);font-weight:800;font-size:1.3rem}
.g101-app b{display:block;font-weight:800}
.g101-app span{color:var(--text-3);font-size:.88rem;font-weight:600}
.g101-app code{font-family:ui-monospace,Menlo,Consolas,monospace;color:var(--text);background:var(--surface);padding:2px 7px;border-radius:6px;font-size:.9rem}
.g101-app .btn{padding:10px 16px;font-size:.88rem}
.g101-store{font-size:.85rem;font-weight:800;color:var(--text-2);padding:10px 14px;border-radius:var(--pill);border:1.5px solid var(--line-2)}
@media (max-width:560px){.g101-app{grid-template-columns:40px 1fr}.g101-app .btn,.g101-store{grid-column:2}}
.g101-panel .btn-row{margin-top:22px}
.g101-steps li::before{grid-row:1/3;grid-column:1}
.g101-steps li b,.g101-steps li span{grid-column:2}
.g101-app > div{min-width:0}

/* ---- stepper v2 ---- */
.g101-hero h1{margin-left:auto;margin-right:auto}
.g101-bar{height:6px;border-radius:6px;background:var(--surface);border:1px solid var(--line);overflow:hidden;margin:6px 0 12px}
.g101-fill{height:100%;width:0;background:var(--orange);border-radius:6px;transition:width .4s var(--ease)}
.g101-progress{margin:0 0 10px;display:grid;grid-template-columns:repeat(5,1fr);gap:8px}
@media (max-width:700px){.g101-progress{grid-template-columns:repeat(5,1fr);gap:4px}.g101-progress li span{display:none}.g101-progress li{justify-content:center;padding:8px}}
.g101-progress li{cursor:pointer;justify-content:center;user-select:none}
.g101-progress li:not(.on){opacity:.6}
.g101-progress li.on{opacity:1}
.g101-progress li.now{background:var(--orange-soft);border-color:var(--orange)}
.g101-step{display:grid;gap:22px;animation:rise .45s var(--ease) both}
.g101-nav{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:26px;padding-top:18px;border-top:1px solid var(--line)}
.g101-nav .btn-primary{margin-left:auto}
.g101-tag{display:inline-flex;align-items:center;gap:10px;background:var(--orange-soft);color:var(--orange);border-radius:var(--pill);padding:6px 6px 6px 14px;font-weight:800;font-size:.85rem;margin-bottom:10px}
.g101-change{border:0;background:var(--orange);color:var(--orange-ink);border-radius:var(--pill);padding:4px 10px;font:inherit;font-size:.78rem;font-weight:800;cursor:pointer}
.g101-panel .btn-row{margin-top:18px}
.g101-panel .btn-row .btn{padding:12px 18px;font-size:.92rem}

/* ---- v3: listed layout, jump links, spacing, icons ---- */
.g101-jump{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;margin-top:26px}
.g101-jump a{display:inline-flex;align-items:center;gap:8px;padding:8px 14px 8px 8px;border-radius:var(--pill);border:1.5px solid var(--line-2);color:var(--text-2);font-weight:800;font-size:.85rem;text-decoration:none!important;transition:border-color .2s,color .2s}
.g101-jump a b{width:24px;height:24px;border-radius:50%;background:var(--orange);color:var(--orange-ink);display:grid;place-items:center;font-size:.8rem}
.g101-jump a:hover{border-color:var(--orange);color:var(--text)}
.g101-card{scroll-margin-top:90px}
.g101-three i{display:grid;place-items:center;width:44px;height:44px;border-radius:12px;background:var(--orange-soft);color:var(--orange);margin-bottom:6px}
.g101-three i svg{width:22px;height:22px}
.g101-h3{margin:34px 0 12px}
.g101-steps,.g101-apps{margin-bottom:8px}
.g101-steps + .g101-h3,.g101-apps + .g101-h3,.fine + .g101-apps{margin-top:30px}
.g101-change{text-decoration:none!important}

/* offer strip + alt login box */
.g101-offer{margin:18px 0 6px;background:var(--orange);color:var(--orange-ink);border-radius:var(--r);padding:18px 22px;display:grid;grid-template-columns:1fr auto;gap:12px 20px;align-items:center}
.g101-offer-k{grid-column:1/-1;font-size:.76rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;opacity:.8}
.g101-offer ul{list-style:none;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 18px;font-weight:700;font-size:.95rem}
.g101-offer li b{font-weight:800}
.g101-offer .btn{background:var(--orange-ink);color:var(--cream)}
.g101-offer .btn:hover{background:#000;color:#fff}
@media (max-width:640px){.g101-offer{grid-template-columns:1fr}.g101-offer .btn{justify-self:start}}
.g101-alt{margin-top:18px;background:var(--bg);border:1.5px solid var(--line-2);border-radius:var(--r);padding:18px 20px}
.g101-alt > b{display:block;margin-bottom:6px;color:var(--text)}
.g101-alt p{margin:0 0 10px}
.g101-mini{margin:0 0 10px;padding-left:22px;display:grid;gap:8px;color:var(--text-2)}
.g101-mini li::marker{color:var(--orange);font-weight:800}
.g101-mini b{color:var(--text)}
.g101{padding-top:22px}