:root {
  color-scheme: dark;
  --bg: #0b1522;
  --bg-soft: #111b2a;
  --panel: #172331;
  --panel-light: #202838;
  --line: #3d4055;
  --ink: #f2f8fa;
  --muted: #a7c1cb;
  --faint: #71909a;
  --accent-bright: #4ee7f5;
  --shell: 1160px;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 88px; background: var(--bg); }
body { margin: 0; background: radial-gradient(ellipse at 14% 10%, #772b4b38, transparent 38%), radial-gradient(ellipse at 84% 60%, #14516b2e, transparent 45%), var(--bg); color: var(--ink); font-family: Inter, "Avenir Next", Avenir, "Segoe UI", sans-serif; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; }
button { color: inherit; font: inherit; }
::selection { background: #48b0dc5f; color: #fff; }
.shell { width: min(var(--shell), calc(100% - 56px)); margin-inline: auto; }
.skip-link { position: fixed; z-index: 100; top: 8px; left: 8px; padding: 12px 16px; transform: translateY(-150%); border-radius: 8px; background: #ebf9ff; color: #172429; }
.skip-link:focus { transform: translateY(0); }
.preview-note { min-height: 34px; display: flex; justify-content: center; align-items: center; gap: 8px; padding: 6px 15px; background: linear-gradient(90deg, #2c1c2a, #1b2530 54%, #18313c); color: #d6dce8; font-size: 11px; font-weight: 650; letter-spacing: .025em; text-align: center; }
.preview-note span { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-bright); box-shadow: 0 0 0 4px #56c3f124; }
.site-header { position: sticky; z-index: 30; top: 0; border-bottom: 1px solid #ffffff0b; background: #071723ed; backdrop-filter: blur(15px); }
.nav-wrap { width: min(1280px, calc(100% - 56px)); min-height: 72px; display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-inline: auto; }
.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand-logo-window { position: relative; width: 160px; height: 40px; display: block; flex: 0 0 auto; overflow: hidden; }
.brand-logo { position: absolute; top: -12px; left: 0; display: block; width: 100%; height: auto; max-width: none; }
.main-nav { display: flex; align-items: center; gap: clamp(18px, 3vw, 38px); color: #bac9d0; font-size: 11px; font-weight: 600; }
.main-nav > a:not(.nav-cta) { transition: color .2s; }
.main-nav > a:not(.nav-cta):hover { color: var(--accent-bright); }
.nav-cta { min-height: 37px; display: inline-flex; align-items: center; gap: 14px; padding: 0 15px; border: 1px solid #4db4e059; border-radius: 30px; background: #3ea9d718; color: #a4d9f0; }
.nav-cta span { color: var(--accent-bright); font-size: 14px; }
.menu-toggle { display: none; }

.hero { min-height: 600px; position: relative; isolation: isolate; overflow: hidden; background: #071723; }
.hero:before { content: ""; position: absolute; z-index: -1; inset: 0; opacity: .98; background: radial-gradient(ellipse at 18% 35%, #8b315a72 0%, transparent 48%), radial-gradient(ellipse at 0% 48%, #fa615a48 0%, transparent 25%), radial-gradient(ellipse at 100% 49%, #00dcec58 0%, transparent 27%), radial-gradient(ellipse at 54% 112%, #126f9750 0%, transparent 52%), linear-gradient(110deg, #101521 0%, #0d2634 52%, #072132 100%); }
.hero-layout { min-height: 547px; display: grid; grid-template-columns: minmax(0, .95fr) minmax(390px, 1.05fr); align-items: center; gap: 42px; padding-block: 58px 43px; }
.hero-copy { max-width: 580px; position: relative; z-index: 1; }
.rating-pill { width: fit-content; display: flex; align-items: center; gap: 10px; margin-bottom: 20px; padding: 7px 12px; border: 1px solid #52a5c847; border-radius: 30px; background: #1a2124; color: #b9ced7; font-size: 10px; letter-spacing: .07em; }
.rating-pill > span { color: var(--accent-bright); font-size: 10px; letter-spacing: .12em; }
.rating-pill b { font-weight: 750; }
.eyebrow { margin: 0 0 13px; color: #50b1db; font-size: 10px; font-weight: 850; letter-spacing: .14em; }
.hero h1 { margin: 0; color: #f0f6f9; font-size: clamp(46px, 5.8vw, 72px); font-weight: 850; line-height: 1.03; letter-spacing: -.066em; }
.hero h1 em, h2 em { color: var(--accent-bright); font-style: normal; }
.hero-lead { max-width: 480px; margin: 17px 0 0; color: #a2b2b9; font-size: 12px; line-height: 1.8; }
.hero-actions { display: flex; align-items: center; gap: 12px; margin-top: 23px; }
.button { min-height: 43px; display: inline-flex; justify-content: center; align-items: center; gap: 11px; padding: 0 18px; border: 1px solid transparent; border-radius: 30px; font-size: 12px; font-weight: 750; cursor: pointer; transition: transform .2s ease, box-shadow .2s ease, background .2s ease; }
.button:hover { transform: translateY(-2px); }
.button-primary { background: linear-gradient(110deg, #3da3cf, #54beec); color: #141d21; box-shadow: 0 8px 22px #2d8db63b; }
.button-primary:hover { background: linear-gradient(110deg, #48b2e0, #66c9f3); box-shadow: 0 12px 25px #2d8db657; }
.button-primary span { color: #194f66; font-size: 14px; }
.button-outline { border-color: #65a8c54f; background: #191f21b8; color: #cce1ea; }
.button-outline:hover { border-color: #69bcdf; background: #1d2a30; }
.hero-caption { display: flex; align-items: center; gap: 8px; margin: 25px 0 0; color: #9aabb2; font-size: 11px; }
.hero-caption span { color: #59bae3; }
.hero-visual { position: relative; min-width: 0; padding: 8px 15px 24px; }
.tv-frame { position: relative; z-index: 1; padding: 8px; border: 1px solid #5d6e76; border-radius: 7px; background: linear-gradient(145deg, #404a4e, #131211 36%, #2d3538); box-shadow: 0 24px 48px #06070788, 0 0 0 1px #a3cee11c; transform: perspective(1000px) rotateY(-4deg); }
.tv-screen { min-height: 258px; overflow: hidden; padding: 13px; border: 1px solid #2f3e45; background: radial-gradient(ellipse at 50% 15%, #2e5262 0%, #1e262a 48%, #161514 100%); }
.screen-top { display: flex; align-items: center; justify-content: space-between; color: #9aaeb7; font-size: 10px; }
.screen-brand { color: #e5eff3; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.screen-brand i { color: var(--accent-bright); font-size: 12px; font-style: normal; }
.screen-label { color: #78b9d1; font-size: 10px; font-weight: 750; letter-spacing: .1em; }
.screen-menu { color: #72b3cf; font-size: 14px; }
.screen-hero { min-height: 134px; position: relative; overflow: hidden; display: flex; align-items: center; margin-top: 12px; padding: 16px 18px; border: 1px solid #44748952; background: linear-gradient(100deg, #1d2f36 0%, #244857 50%, #317d9d 100%); }
.screen-hero:after { content: ""; position: absolute; inset: 0; opacity: .58; background: linear-gradient(90deg, #13191c 0%, transparent 66%), radial-gradient(ellipse at 85% 50%, #69caf480, transparent 36%); }
.screen-copy { position: relative; z-index: 1; }
.screen-copy small { display: block; margin-bottom: 8px; color: #83c8e5; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.screen-copy strong { display: block; color: #e8f8ff; font-family: Georgia, serif; font-size: clamp(16px, 2vw, 24px); font-weight: 500; line-height: 1.02; }
.screen-cta { display: inline-flex; align-items: center; gap: 9px; margin-top: 10px; color: #b7dbea; font-size: 10px; }
.screen-cta b { color: #5ac5f3; font-size: 12px; }
.screen-art { width: 43%; height: 100%; position: absolute; top: 0; right: 0; overflow: hidden; background: linear-gradient(155deg, #49a7cf, #264a59 55%, #192124); }
.screen-art:before { content: ""; position: absolute; width: 90px; height: 90px; top: -24px; right: 14px; border: 1px solid #8cd3f27a; border-radius: 50%; box-shadow: 0 0 0 12px #77ccf012, 0 0 0 28px #77ccf010; }
.screen-art i { width: 53px; height: 81px; position: absolute; right: 43px; bottom: -15px; border-radius: 50% 50% 5px 5px; background: linear-gradient(#161a1b 0 30%, #42aad7 30% 64%, #1d2e35 64%); transform: rotate(14deg); }
.screen-art b { width: 63px; height: 22px; position: absolute; right: 5px; bottom: 0; border-radius: 70% 20% 0 0; background: #171e21; }
.screen-art span { width: 14px; height: 14px; position: absolute; top: 34px; right: 63px; border-radius: 50%; background: #78d0f5; box-shadow: 0 0 22px #6dccf4; }
.screen-row-head { display: flex; justify-content: space-between; margin: 14px 1px 8px; color: #d7e7ee; font-size: 10px; }
.screen-row-head span { color: #8db5c5; font-size: 10px; letter-spacing: .08em; }
.screen-cards { display: grid; grid-template-columns: repeat(4, 1fr); gap: 7px; }
.mini-poster { height: 48px; position: relative; overflow: hidden; border: 1px solid #5d9eba55; border-radius: 3px; background: linear-gradient(145deg, #3783a4, #233740); }
.mini-poster:before, .mini-poster:after { content: ""; position: absolute; border-radius: 50%; }
.mini-poster:before { width: 30px; height: 30px; top: -10px; right: -6px; background: #6acbf491; filter: blur(2px); }
.mini-poster:after { width: 50px; height: 20px; bottom: -9px; left: -6px; background: #181e21; }
.poster-two { background: linear-gradient(145deg, #4295b8, #213138 72%); }
.poster-three { background: linear-gradient(145deg, #55a3c4, #2a4855 65%, #192124); }
.poster-four { background: linear-gradient(145deg, #3e7c96, #22282b 75%); }
.tv-neck { width: 70px; height: 17px; position: relative; z-index: 0; margin: -1px auto 0; background: linear-gradient(90deg, #2a3134, #5d6e75, #222729); clip-path: polygon(36% 0, 64% 0, 78% 100%, 22% 100%); }
.tv-base { width: 108px; height: 8px; position: relative; z-index: 0; margin: -1px auto 0; border-radius: 50%; background: linear-gradient(#5a6b72, #1e2325); box-shadow: 0 8px 15px #0607079c; }
.visual-stamp { width: 75px; height: 75px; position: absolute; z-index: 2; right: -4px; bottom: 52px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 1px solid #71c8ed5c; border-radius: 50%; background: #1a2225eb; box-shadow: 0 6px 25px #070b0c70; color: #b4ced9; text-align: center; transform: rotate(7deg); }
.visual-stamp span { color: var(--accent-bright); font-size: 15px; }
.visual-stamp b { margin-top: 4px; font-size: 10px; letter-spacing: .08em; line-height: 1.45; }

.section { padding-block: 86px; }
.center-heading { max-width: 700px; margin: 0 auto 34px; text-align: center; }
.center-heading .eyebrow { margin-bottom: 12px; }
h2 { margin: 0; color: #e8f0f4; font-size: clamp(32px, 4.3vw, 48px); font-weight: 800; line-height: 1.08; letter-spacing: -.055em; }
h2 em { color: var(--accent-bright); }
.center-heading > p:last-child { max-width: 610px; margin: 12px auto 0; color: var(--muted); font-size: 12px; line-height: 1.75; }
.discovery { background: radial-gradient(ellipse at 16% 31%, #7129446b, transparent 43%), radial-gradient(ellipse at 79% 73%, #15566b47, transparent 45%), var(--bg); }
.poster-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 17px; }
.poster-card { min-width: 0; display: flex; flex-direction: column; align-items: center; background: transparent; text-align: center; }
.poster-art { width: clamp(190px, 25vw, 290px); aspect-ratio: 1; height: auto; position: relative; overflow: hidden; margin-inline: auto; border-radius: 50%; box-shadow: 0 18px 48px #06070870, 0 0 42px #3da9d719; }
.poster-cinema .poster-art { background: linear-gradient(150deg, #5db5da 0%, #3685a7 38%, #233740 69%, #191d1e); }
.poster-cinema .poster-art img { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: cover; object-position: center 44%; }
.poster-cinema .poster-art:after { content: ""; position: absolute; inset: 0; background: linear-gradient(0deg, #1317194d, transparent 78%); }
.sun-disc { width: 86px; height: 86px; position: absolute; top: 22px; right: 22%; border-radius: 50%; background: #86d3f4; box-shadow: 0 0 48px #6fcbf39c; }
.ridge { position: absolute; bottom: 0; width: 115%; height: 70%; clip-path: polygon(0 100%, 17% 50%, 28% 72%, 47% 20%, 63% 72%, 78% 35%, 100% 100%); }
.ridge-one { left: -10%; background: linear-gradient(130deg, #294e5e, #20292d); }
.ridge-two { right: -15%; bottom: -8px; opacity: .85; background: linear-gradient(120deg, #3991b7, #213c48 70%); transform: scale(.8); }
.poster-orbit { width: 210px; height: 210px; position: absolute; right: -45px; top: -100px; border: 1px solid #cff1ff69; border-radius: 50%; box-shadow: 0 0 0 19px #cff1ff14, 0 0 0 42px #cff1ff10; }
.poster-sport .poster-art { background: radial-gradient(ellipse at 52% 20%, #67caf5 0, transparent 16%), linear-gradient(160deg, #30708c, #223137 61%, #191616); }
.poster-sport .poster-art img { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: cover; object-position: center; }
.poster-sport .poster-art:before { content: none; }
.stadium-light { width: 7px; height: 7px; position: absolute; top: 25%; left: 25%; border-radius: 50%; background: #d4f2ff; box-shadow: 0 0 12px 7px #77d1f78f, 120px 14px 0 0 #d4f2ff, 120px 14px 12px 7px #77d1f78f; }
.field-mark { width: 62%; height: 48%; position: absolute; bottom: 6%; left: 19%; border: 1px solid #addbee66; border-radius: 50%; }
.ball-mark { width: 30px; height: 30px; position: absolute; right: 36%; bottom: 31%; border: 2px solid #b4e2f6; border-radius: 50%; background: #d5ebf4; box-shadow: 0 7px 13px #10151777; }
.poster-series .poster-art { background: linear-gradient(140deg, #375764, #202629 53%, #3982a1); }
.poster-series .poster-art img { width: 100%; height: 100%; position: absolute; inset: 0; display: block; object-fit: cover; object-position: center 44%; }
.series-window { position: absolute; width: 36%; height: 69%; top: 14%; left: 32%; border: 1px solid #8ecee996; background: linear-gradient(180deg, #24363d, #3d8bac); box-shadow: 0 0 38px #53aacf3a; }
.series-window:before { content: ""; position: absolute; top: 38%; left: -45%; width: 190%; height: 1px; background: #91d4f070; box-shadow: 0 -28px 0 #91d4f047, 0 27px 0 #91d4f047; }
.series-moon { width: 48px; height: 48px; position: absolute; top: 21px; right: 15%; border-radius: 50%; background: #7fd0f3; box-shadow: 0 0 35px #67c5ed7a; }
.series-glow { width: 120px; height: 150px; position: absolute; bottom: -68px; left: 13%; border-radius: 50%; background: #3da5d288; filter: blur(25px); }
.poster-meta { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 14px 8px 0; }
.poster-meta span { color: #68bde1; font-size: 10px; font-weight: 800; letter-spacing: .1em; }
.poster-meta b { color: #e6eff3; font-family: Georgia, serif; font-size: 20px; font-weight: 500; }
.poster-meta small { color: #9aabb2; font-size: 10px; }

.channels { padding-top: 19px; }
.channel-panel { padding: 57px 36px 37px; border: 1px solid #383849; border-radius: 12px; background: radial-gradient(ellipse at 12% 4%, #71304c65, transparent 43%), radial-gradient(ellipse at 88% 100%, #1b617446, transparent 46%), linear-gradient(145deg, #1c1c29, #111c24); box-shadow: 0 25px 65px #06070832; }
.channel-panel .center-heading { margin-bottom: 27px; }
.criteria-grid { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid #323f44; }
.criteria-item { min-height: 99px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border-right: 1px solid #323f44; text-align: center; }
.criteria-item:last-child { border-right: 0; }
.criteria-icon { color: #58c2ef; font-size: 23px; line-height: 1; }
.criteria-item b { color: #dde9ee; font-size: 12px; }
.criteria-item small { color: #9aaab0; font-size: 10px; }

.benefits { padding-top: 76px; background: radial-gradient(ellipse at 14% 32%, #762c4b5c, transparent 48%), radial-gradient(ellipse at 86% 77%, #15536b3e, transparent 50%), linear-gradient(180deg, #0b1522, #121a25 50%, #0b1522); }
.benefit-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 11px; }
.benefit-card { min-height: 150px; padding: 17px 13px 15px; border: 1px solid #353442; border-radius: 8px; background: linear-gradient(145deg, #241b29, #15202a); text-align: center; transition: transform .22s ease, border-color .22s ease, background .22s ease; }
.benefit-card:hover { transform: translateY(-4px); border-color: #527d8b; background: linear-gradient(145deg, #2d2030, #192832); }
.benefit-icon { width: 34px; height: 34px; display: grid; place-items: center; margin: 0 auto 11px; border: 1px solid #6ac6ed77; border-radius: 50%; background: linear-gradient(145deg, #47acd7, #3286aa); color: #e8f8ff; font-size: 14px; box-shadow: 0 0 18px #47acd723; }
.benefit-card h3 { margin: 0; color: #e6f1f5; font-size: 12px; font-weight: 750; }
.benefit-card p { max-width: 230px; margin: 7px auto 0; color: #a0b1b8; font-size: 10px; line-height: 1.65; }

.device-showcase { background: radial-gradient(ellipse at 12% 46%, #812d4e70, transparent 48%), radial-gradient(ellipse at 88% 54%, #17627b50, transparent 49%), linear-gradient(115deg, #111621, #0c1b27 58%, #0a2130); }
.device-showcase-layout { display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); align-items: center; gap: 35px; }
.device-showcase-copy { max-width: 520px; }
.device-showcase-copy h2 { margin-bottom: 15px; }
.device-showcase-copy > p:not(.eyebrow) { margin: 0 0 11px; color: #b3c4cb; font-size: 13px; line-height: 1.8; }
.device-chip-list { display: flex; flex-wrap: wrap; gap: 7px; margin: 18px 0 19px; padding: 0; list-style: none; }
.device-chip-list li { padding: 8px 11px; border: 1px solid #514050; border-radius: 22px; background: linear-gradient(110deg, #352033, #152732); color: #e1e8ed; font-size: 10px; font-weight: 650; }
.device-art-frame { width: 100%; height: clamp(220px, 28vw, 340px); position: relative; overflow: hidden; justify-self: end; margin: 0; }
.device-art-frame:before { content: ""; position: absolute; z-index: 0; inset: 8% 6%; background: radial-gradient(ellipse at 56% 53%, #155e7b55, transparent 62%), radial-gradient(ellipse at 8% 50%, #88354c49, transparent 56%); filter: blur(15px); }
.device-art-frame img { width: 100%; height: auto; position: absolute; z-index: 1; top: 0; left: 0; display: block; transform: translateY(-30%); filter: drop-shadow(0 22px 32px #0009); }

.home-guides { background: radial-gradient(ellipse at 16% 28%, #762a4c5b, transparent 46%), radial-gradient(ellipse at 87% 72%, #14576f45, transparent 48%), #0b1522; }
.home-guide-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 13px; }
.home-guide-card { min-height: 185px; display: flex; flex-direction: column; padding: 19px 17px 16px; border: 1px solid #393646; border-radius: 7px; background: linear-gradient(145deg, #241b29, #14202a); transition: border-color .2s ease, transform .2s ease; }
.home-guide-card:hover { transform: translateY(-3px); border-color: #3c748c; }
.home-guide-category { margin: 0 0 10px; color: #70c8eb; font-size: 10px; font-weight: 850; letter-spacing: .1em; }
.home-guide-card h3 { margin: 0; color: #e8f0f4; font-size: 14px; line-height: 1.35; }
.home-guide-card h3 a:hover { color: #5ec6f3; }
.home-guide-card > p:not(.home-guide-category) { margin: 9px 0 12px; color: #b1c0c6; font-size: 11px; line-height: 1.65; }
.home-guide-link { display: inline-flex; align-items: center; gap: 7px; margin-top: auto; color: #7ed0f2; font-size: 10px; font-weight: 750; }
.home-guide-link span { color: #55c2f0; font-size: 12px; }
.home-guides-action { display: flex; justify-content: center; margin-top: 23px; }

.plans { background: radial-gradient(ellipse at 12% 41%, #722b4a59, transparent 46%), radial-gradient(ellipse at 90% 66%, #15597140, transparent 48%), #0b1522; }
.plan-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); align-items: stretch; gap: 14px; margin-top: 46px; }
.plan-card { position: relative; display: flex; flex-direction: column; padding: 22px 19px 17px; border: 1px solid #383946; border-radius: 8px; background: linear-gradient(145deg, #241c29, #16212b); box-shadow: 0 12px 30px #06070830; }
.plan-featured { z-index: 1; border-color: #688ca0; background: linear-gradient(150deg, #352236, #182631 68%); box-shadow: 0 18px 42px #06070857, 0 0 0 1px #4bb5e312; }
.popular-label { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); width: max-content; padding: 8px 13px; border-radius: 0 0 5px 5px; background: linear-gradient(90deg, #3794bc, #54c1ef); color: #112026; font-size: 10px; font-weight: 900; letter-spacing: .08em; }
.plan-kicker { margin: 3px 0 7px; color: #71c7e8; font-size: 10px; font-weight: 850; letter-spacing: .12em; }
.plan-card h3 { margin: 0; color: #e5f0f4; font-size: 17px; }
.plan-copy { min-height: 34px; margin: 7px 0 12px; color: #b0c0c6; font-size: 10px; line-height: 1.55; }
.plan-price { display: flex; align-items: baseline; gap: 8px; }
.plan-price strong { color: #57bfec; font-size: 29px; font-weight: 850; letter-spacing: -.055em; }
.plan-price small { color: #a9c3cd; font-size: 10px; }
.plan-availability { margin: 5px 0 13px; color: #a2b2b8; font-size: 10px; }
.plan-divider { height: 1px; margin-bottom: 13px; background: #34434a; }
.included-title { margin: 0 0 8px; color: #ddecf2; font-size: 11px; font-weight: 750; }
.plan-card ul { display: grid; gap: 0; margin: 0 0 15px; padding: 0; list-style: none; }
.plan-card li { padding: 8px 0; border-bottom: 1px solid #2a3539; color: #b5c2c8; font-size: 10px; }
.plan-card li:before { content: "✦"; margin-right: 8px; color: #54b8e3; font-size: 10px; }
.plan-button { width: 100%; min-height: 39px; display: flex; align-items: center; justify-content: space-between; margin-top: auto; padding: 0 12px; border: 1px solid #3a6273; border-radius: 4px; background: #1f3138; color: #d0e8f2; font-size: 11px; font-weight: 750; cursor: pointer; transition: background .2s ease; }
.plan-button:hover { background: #264653; }
.plan-button span { color: #5ec1ec; font-size: 14px; }
.plan-button-primary { border-color: transparent; background: linear-gradient(95deg, #399cc6, #53bdeb); color: #132025; }
.plan-button-primary span { color: #1e485a; }
.plan-button-primary:hover { background: linear-gradient(95deg, #46afdc, #65cbf6); }
.payment-marks { display: flex; justify-content: center; align-items: center; gap: 8px; margin-top: 10px; color: #a0b0b7; font-size: 10px; letter-spacing: .08em; }
.payment-marks i { padding: 4px 7px; border: 1px solid #374951; border-radius: 3px; color: #a9d8e9; font-size: 10px; font-style: normal; letter-spacing: 0; }
.payment-block { display: grid; justify-items: center; gap: 5px; margin-top: 13px; padding: 11px 8px 8px; border: 1px solid #91c6e02b; border-radius: 12px; background: linear-gradient(135deg, #0917268c, #1820398c); }
.payment-caption { color: #d1ddec; font-size: 9px; font-weight: 800; letter-spacing: .065em; text-align: center; }
.payment-block .payment-marks { min-height: 24px; gap: 12px; margin: 0; letter-spacing: 0; }
.payment-visa { color: #f4f7ff; font-size: 15px; font-style: italic; font-weight: 950; letter-spacing: -.07em; }
.payment-mastercard { display: inline-flex; align-items: center; position: relative; color: #f4f7ff; font-size: 9px; font-weight: 750; }
.payment-mastercard i { width: 12px; height: 12px; padding: 0; border: 0; border-radius: 50%; background: #eb001b; }
.payment-mastercard i + i { margin-left: -5px; background: #f79e1b; mix-blend-mode: screen; }
.payment-mastercard span { margin-left: 4px; }
.payment-paypal { color: #d9edff; font-size: 11px; font-style: italic; font-weight: 850; letter-spacing: -.06em; }
.payment-note { color: #b6c5d7; font-size: 9px; line-height: 1.35; text-align: center; }

.help-section { padding-block: 20px 65px; background: radial-gradient(ellipse at 12% 46%, #70294761, transparent 45%), radial-gradient(ellipse at 93% 68%, #14566d48, transparent 49%), #0b1522; }
.help-card { min-height: 137px; display: grid; grid-template-columns: 130px minmax(0, 1fr) auto; align-items: center; gap: 25px; padding: 23px 31px; border: 1px solid #505268; border-radius: 11px; background: radial-gradient(ellipse at 5% 50%, #96395570, transparent 46%), radial-gradient(ellipse at 92% 52%, #1380a04a, transparent 48%), linear-gradient(110deg, #241c2a, #192733 65%, #193947); box-shadow: 0 14px 45px #06070837; }
.help-emblem { position: relative; width: 86px; height: 86px; display: grid; place-items: center; margin: auto; border: 1px solid #5cb4d988; border-radius: 50%; background: #171f23; box-shadow: 0 0 26px #43a7d232; color: #55c1ef; font-size: 25px; }
.help-emblem span:nth-child(2) { position: absolute; top: 6px; right: 12px; font-size: 11px; }
.help-emblem span:nth-child(3) { position: absolute; bottom: 9px; left: 11px; font-size: 10px; }
.help-copy .eyebrow { margin-bottom: 8px; }
.help-copy h2 { font-size: clamp(21px, 3vw, 30px); }
.help-copy > p:last-child { margin: 7px 0 0; color: #b2c2c8; font-size: 11px; }
.help-card > .button { white-space: nowrap; }

.faq-section { padding-top: 28px; background: radial-gradient(ellipse at 13% 12%, #722c4b5d, transparent 43%), radial-gradient(ellipse at 87% 22%, #15576e3a, transparent 46%), #0b1522; }
.faq-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0 30px; margin-top: 31px; }
.faq-grid details { border-bottom: 1px solid #273034; }
.faq-grid summary { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 1px; color: #d7e4e9; font-size: 12px; font-weight: 700; cursor: pointer; list-style: none; }
.faq-grid summary::-webkit-details-marker { display: none; }
.faq-grid summary span { width: 21px; height: 21px; flex: 0 0 auto; display: grid; place-items: center; border: 1px solid #3a6476; border-radius: 50%; color: #53b9e5; font-size: 14px; font-weight: 400; transition: transform .2s, background .2s; }
.faq-grid details[open] summary span { transform: rotate(45deg); background: #3d97bd24; }
.faq-grid details p { margin: -2px 29px 14px 1px; color: #b0bec4; font-size: 11px; line-height: 1.75; }

.site-footer { padding: 27px 0 14px; background: radial-gradient(ellipse at 12% 0%, #63263f47, transparent 46%), #080e11; }
.footer-panel { display: grid; grid-template-columns: 1.5fr .75fr .95fr 1.1fr; gap: 35px; padding: 27px 25px; border: 1px solid #373646; border-radius: 10px; background: radial-gradient(ellipse at 0% 50%, #6c294554, transparent 48%), linear-gradient(115deg, #211a27, #17212c 62%, #19313d); }
.footer-brand-row { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; }
.footer-brand-copy { min-width: 0; }
.footer-brand-col h3 { margin: 0; color: #e1edf2; font-size: 12px; line-height: 1.5; }
.footer-brand-copy > p { max-width: 225px; margin: 7px 0 0; color: #acbbc1; font-size: 10px; line-height: 1.65; }
.footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; }
.footer-links h4 { margin: 3px 0 3px; color: #e2edf1; font-size: 10px; }
.footer-links > a, .footer-links > span { color: #b0bec4; font-size: 10px; transition: color .2s; }
.footer-links > a:hover { color: var(--accent-bright); }
.footer-links > span { color: #647880; line-height: 1.5; }
.footer-contact p { max-width: 190px; margin: 0; color: #b0bec4; font-size: 10px; line-height: 1.65; }
.footer-contact-link { padding-bottom: 4px; border-bottom: 1px solid #3e88a7; color: #8bc7e1 !important; }
.footer-contact-link span { margin-left: 5px; color: #53bce9; }
.footer-social-replacement { display: flex; align-items: center; gap: 9px; margin-top: 5px; padding: 8px 9px; border: 1px solid #2d3c42; border-radius: 5px; background: #131617; }
.footer-dot { color: #53bbe8; font-size: 15px; }
.footer-social-replacement b, .footer-social-replacement small { display: block; }
.footer-social-replacement b { color: #d4e2e8; font-size: 10px; }
.footer-social-replacement small { max-width: 160px; margin-top: 3px; color: #a4b2b8; font-size: 10px; line-height: 1.5; }
.footer-bottom { min-height: 48px; display: flex; justify-content: space-between; align-items: center; gap: 12px; color: #9aa9ae; font-size: 10px; }

.detail-dialog { width: min(430px, calc(100% - 32px)); position: fixed; padding: 30px; border: 1px solid #386a80; border-radius: 9px; background: #181e21; color: var(--ink); box-shadow: 0 30px 100px #050708ce; }
.detail-dialog::backdrop { background: #070809cc; backdrop-filter: blur(4px); }
.dialog-close { width: 27px; height: 27px; position: absolute; top: 11px; right: 11px; border: 1px solid #3a4d55; border-radius: 50%; background: #15191a; color: #94c3d7; font-size: 17px; cursor: pointer; }
.dialog-star { color: #56c1ef; font-size: 25px; }
.detail-dialog .eyebrow { margin: 11px 0 8px; }
.detail-dialog h2 { font-size: 27px; }
.dialog-message { color: #a3b3ba; font-size: 10px; line-height: 1.8; }
.dialog-notice { display: flex; align-items: flex-start; gap: 9px; margin-top: 17px; padding: 10px; background: #1f2c31; color: #b2c8d1; font-size: 10px; line-height: 1.6; }
.dialog-notice span { color: #53b9e5; }
.dialog-ok { width: 100%; margin-top: 17px; }
.noscript-note { margin: 0; padding: 13px; background: #222e33; color: #d9eaf2; text-align: center; font-size: 11px; }

@media (max-width: 900px) {
  .hero-layout { grid-template-columns: minmax(0, .9fr) minmax(320px, 1.1fr); gap: 18px; }
  .hero h1 { font-size: clamp(44px, 6.4vw, 60px); }
  .tv-screen { min-height: 224px; }
  .screen-hero { min-height: 113px; }
  .benefit-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .footer-panel { gap: 22px; }
}
@media (max-width: 680px) {
  html { scroll-padding-top: 70px; }
  .shell, .nav-wrap { width: calc(100% - 36px); }
  .preview-note { font-size: 10px; }
  .nav-wrap { min-height: 65px; }
  .brand-logo-window { width: 138px; height: 35px; }
  .brand-logo { top: -9px; }
  .main-nav { position: absolute; top: calc(100% - 1px); left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 0; padding: 8px 18px 15px; border-bottom: 1px solid #2a373d; background: #141819; box-shadow: 0 18px 25px #06070870; }
  .main-nav.is-open { display: flex; }
  .main-nav > a:not(.nav-cta) { padding: 12px 2px; border-bottom: 1px solid #252d31; }
  .nav-cta { justify-content: center; margin-top: 11px; }
  .menu-toggle { width: 37px; height: 37px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border: 1px solid #344e59; border-radius: 6px; background: #181e21; cursor: pointer; }
  .menu-toggle span { width: 15px; height: 1px; background: #8acae6; transition: transform .2s; }
  .menu-toggle[aria-expanded="true"] span:first-child { transform: translateY(3px) rotate(45deg); }
  .menu-toggle[aria-expanded="true"] span:last-child { transform: translateY(-3px) rotate(-45deg); }
  .hero-layout { grid-template-columns: 1fr; gap: 23px; padding-block: 53px 17px; }
  .hero-copy { max-width: 520px; }
  .rating-pill { margin-bottom: 15px; }
  .hero h1 { font-size: clamp(43px, 11.5vw, 63px); }
  .hero-lead { max-width: 460px; font-size: 11px; }
  .hero-actions { flex-wrap: wrap; }
  .hero-visual { max-width: 520px; width: 100%; justify-self: center; padding: 5px 11px 19px; }
  .tv-screen { min-height: 214px; padding: 10px; }
  .screen-hero { min-height: 105px; margin-top: 9px; padding: 13px; }
  .screen-copy strong { font-size: 19px; }
  .screen-cards { gap: 5px; }
  .mini-poster { height: 39px; }
  .visual-stamp { width: 60px; height: 60px; right: 1px; bottom: 39px; }
  .visual-stamp span { font-size: 12px; }
  .visual-stamp b { font-size: 10px; }
  .section { padding-block: 63px; }
  .center-heading { margin-bottom: 26px; }
  h2 { font-size: clamp(30px, 9vw, 42px); }
  .center-heading > p:last-child { font-size: 11px; }
  .poster-grid { grid-template-columns: 1fr; gap: 27px; }
  .poster-card { min-height: 0; }
  .poster-art { width: clamp(180px, 60vw, 230px); height: auto; min-height: 0; }
  .poster-meta { padding: 12px 8px 0; }
  .poster-meta b { font-size: 18px; }
  .channels { padding-top: 1px; }
  .channel-panel { padding: 40px 16px 21px; }
  .criteria-grid { grid-template-columns: repeat(2, 1fr); }
  .criteria-item { min-height: 83px; border-bottom: 1px solid #323f44; }
  .criteria-item:nth-child(2) { border-right: 0; }
  .criteria-item:nth-child(n+3) { border-bottom: 0; }
  .benefit-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .benefit-card { min-height: 145px; padding: 15px 10px; }
  .benefit-card p { font-size: 10px; }
  .device-showcase-layout { grid-template-columns: 1fr; gap: 9px; }
  .device-showcase-copy > p:not(.eyebrow) { font-size: 12px; }
  .device-art-frame { height: clamp(190px, 56vw, 260px); }
  .home-guide-grid { grid-template-columns: 1fr; gap: 9px; }
  .home-guide-card { min-height: 0; padding: 17px 15px; }
  .home-guides-action .button { width: 100%; }
  .plan-grid { grid-template-columns: 1fr; gap: 18px; margin-top: 39px; }
  .plan-card { padding: 22px 19px 17px; }
  .plan-featured { margin-top: 4px; }
  .help-section { padding: 4px 0 51px; }
  .help-card { grid-template-columns: 52px minmax(0, 1fr); gap: 13px; padding: 19px 15px; }
  .help-emblem { width: 48px; height: 48px; font-size: 16px; }
  .help-emblem span:nth-child(2) { top: 0; right: 5px; font-size: 10px; }
  .help-emblem span:nth-child(3) { bottom: 3px; left: 4px; font-size: 10px; }
  .help-copy .eyebrow { font-size: 10px; }
  .help-copy h2 { font-size: 20px; }
  .help-copy > p:last-child { font-size: 10px; }
  .help-card > .button { grid-column: 1 / -1; width: 100%; }
  .faq-section { padding-top: 17px; }
  .faq-grid { grid-template-columns: 1fr; gap: 0; margin-top: 22px; }
  .faq-grid summary { font-size: 11px; }
  .footer-panel { grid-template-columns: repeat(2, 1fr); gap: 27px 18px; padding: 20px 16px; }
  .footer-brand-col { grid-column: 1 / -1; }
  .footer-brand-col h3 br { display: none; }
  .footer-brand-copy > p { max-width: 280px; }
  .footer-contact { grid-column: 1 / -1; }
  .footer-social-replacement { max-width: 280px; }
  .footer-bottom { align-items: flex-start; flex-direction: column; gap: 8px; padding-block: 14px 5px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Keep customer-facing copy comfortable to read across screen sizes. */
.preview-note, .main-nav, .rating-pill, .eyebrow, .button,
.hero-lead, .hero-caption, .center-heading > p:last-child,
.screen-top, .screen-brand, .screen-label, .screen-copy small, .screen-cta, .screen-row-head,
.visual-stamp b, .poster-meta span, .poster-meta small,
.criteria-item b, .criteria-item small, .benefit-card h3, .benefit-card p,
.device-showcase-copy > p:not(.eyebrow), .device-chip-list li,
.home-guide-category, .home-guide-card > p:not(.home-guide-category), .home-guide-link,
.popular-label, .plan-kicker, .plan-copy, .plan-price small, .plan-availability,
.included-title, .plan-card li, .plan-button, .payment-marks,
.help-copy > p:last-child, .faq-grid summary, .faq-grid details p,
.footer-brand-copy > p, .footer-links h4, .footer-links > a, .footer-links > span,
.footer-contact p, .footer-social-replacement b, .footer-social-replacement small,
.footer-bottom, .dialog-message, .dialog-notice {
  font-weight: 600;
}
.preview-note, .main-nav, .button, .eyebrow, .rating-pill, .hero-caption,
.home-guide-category, .home-guide-link, .plan-kicker, .plan-price small,
.plan-availability, .included-title, .plan-card li, .plan-button,
.footer-brand-copy > p, .footer-links h4, .footer-links > a, .footer-links > span,
.footer-contact p, .footer-social-replacement b, .footer-social-replacement small,
.footer-bottom, .payment-marks { font-size: 12px; }
.hero-lead, .center-heading > p:last-child, .benefit-card p,
.device-showcase-copy > p:not(.eyebrow), .home-guide-card > p:not(.home-guide-category),
.plan-copy, .help-copy > p:last-child, .faq-grid details p,
.footer-brand-copy > p, .footer-contact p, .dialog-message, .dialog-notice { font-size: 14px; }
.screen-top, .screen-brand, .screen-label, .screen-copy small, .screen-cta, .screen-row-head,
.visual-stamp b, .poster-meta span, .poster-meta small,
.criteria-item b, .criteria-item small, .benefit-card h3, .device-chip-list li,
.popular-label { font-size: 12px; }
.rating-pill { font-weight: 700; }
.preview-note, .eyebrow, .home-guide-category, .plan-kicker, .included-title,
.footer-links h4, .footer-social-replacement b { font-weight: 750; }
.nav-cta { font-weight: 750; }
.footer-bottom { color: #b5c2c7; }

@media (max-width: 900px) {
  .main-nav { gap: 12px; font-size: 12px; }
  .nav-cta { gap: 8px; padding-inline: 12px; }
}

/* Richer, cinematic visual language used consistently across the site. */
:root {
  --bg: #071522;
  --bg-soft: #0c1d2d;
  --panel: #102438;
  --panel-light: #192f43;
  --line: #315168;
  --ink: #f4f8fd;
  --muted: #b8cbd8;
  --faint: #8299a9;
  --accent-bright: #69d5ff;
  --glow-violet: #9268ff;
  --glow-rose: #ea4b9a;
}
body { background: radial-gradient(ellipse at 8% 3%, #16486670, transparent 34%), radial-gradient(ellipse at 94% 20%, #49244e52, transparent 34%), radial-gradient(ellipse at 50% 68%, #0b42603b, transparent 50%), var(--bg); }
.preview-note { background: linear-gradient(100deg, #101f35, #122a3d 46%, #202140); }
.site-header { border-bottom-color: #7adfff25; background: #061321e8; box-shadow: 0 12px 35px #020b1470; }
.main-nav > a:not(.nav-cta) { position: relative; }
.main-nav > a:not(.nav-cta):after { content: ""; position: absolute; right: 0; bottom: -8px; left: 0; height: 1px; transform: scaleX(0); transform-origin: left; background: linear-gradient(90deg, var(--accent-bright), var(--glow-violet)); transition: transform .2s ease; }
.main-nav > a:not(.nav-cta):hover:after { transform: scaleX(1); }
.nav-cta { border-color: #67d3ff66; background: linear-gradient(110deg, #42b8e01c, #8b66ff1a); color: #d8f3ff; box-shadow: inset 0 0 18px #59c5ef0c; }
.hero { background: #071522; }
.hero:before { background: radial-gradient(ellipse at 17% 35%, #78396c8a 0%, transparent 43%), radial-gradient(ellipse at 0% 56%, #fc715a4a 0%, transparent 25%), radial-gradient(ellipse at 100% 43%, #00d8f482 0%, transparent 28%), radial-gradient(ellipse at 55% 115%, #2384cb65 0%, transparent 54%), linear-gradient(112deg, #101827 0%, #10263a 50%, #08283a 100%); }
.hero:after { content: ""; position: absolute; z-index: -1; width: min(1240px, 110vw); height: 470px; left: 50%; bottom: -355px; transform: translateX(-50%); border: 1px solid #7cdcff2a; border-radius: 50%; box-shadow: 0 0 0 18px #49b9ed0a, 0 0 0 43px #8b69ff0a, 0 0 100px #35a9e51b; pointer-events: none; }
.rating-pill { border-color: #75d8ff55; background: linear-gradient(115deg, #15273cdb, #201d36cf); box-shadow: inset 0 0 20px #67d7ff0c, 0 0 24px #55c1f012; }
.eyebrow { color: #7ddcff; }
.hero h1 em, h2 em { background: linear-gradient(100deg, #69d5ff, #a28aff 58%, #f078c0); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero-lead { color: #c0cedd; }
.button-primary { background: linear-gradient(105deg, #56c9f2, #8d7cff 68%, #ca63bc); color: #091624; box-shadow: 0 8px 28px #3eb7e83c, inset 0 1px #ffffff80; }
.button-primary:hover { background: linear-gradient(105deg, #76dcff, #a394ff 68%, #e87ccc); box-shadow: 0 12px 32px #3eb7e86b; }
.button-outline { border-color: #64c9f367; background: linear-gradient(120deg, #122537d9, #211d34c9); color: #e1f2fa; }
.button-outline:hover { border-color: #83dcff; background: linear-gradient(120deg, #19334a, #2b2547); box-shadow: 0 0 25px #55c4ed1e; }
.tv-frame { border-color: #83b9ce9e; border-radius: 14px; background: linear-gradient(145deg, #80929c, #202b39 18%, #121b2a 43%, #526b7c); box-shadow: 0 30px 62px #020711a3, 0 0 0 1px #c7edff24, 0 0 70px #39b7e52b; }
.tv-screen { border-color: #77b8d052; background: radial-gradient(ellipse at 82% 15%, #245b79 0%, transparent 44%), linear-gradient(145deg, #15263a, #111a28 66%, #251d38); }
.screen-hero { border-color: #64bce080; background: linear-gradient(100deg, #172c40 0%, #224c68 51%, #574278 100%); }
.screen-hero:after { background: linear-gradient(90deg, #101927 0%, transparent 72%), radial-gradient(ellipse at 85% 48%, #64d8ff80, transparent 38%); }
.screen-art { background: linear-gradient(155deg, #4bb4dc, #375884 56%, #221c37); }
.mini-poster { border-color: #6bbfe579; border-radius: 7px; background: linear-gradient(145deg, #3a97bd, #24374d 70%, #4a2d64); }
.section { position: relative; isolation: isolate; }
.section:before { content: ""; position: absolute; z-index: -1; top: -265px; left: 50%; width: min(1120px, 100vw); height: 420px; transform: translateX(-50%); border: 1px solid #65d2ff1c; border-radius: 50%; box-shadow: 0 0 0 19px #46bae909, 0 0 0 46px #8b68ff08, 0 0 95px #37b8ec12; pointer-events: none; }
.center-heading .eyebrow { display: flex; justify-content: center; align-items: center; gap: 12px; }
.center-heading .eyebrow:before, .center-heading .eyebrow:after { content: ""; width: 28px; height: 1px; background: linear-gradient(90deg, transparent, #6bd5ffad); }
.center-heading .eyebrow:after { transform: rotate(180deg); }
.center-heading > p:last-child { color: #c0d0dd; }
.discovery { background: radial-gradient(ellipse at 16% 30%, #713d7b73, transparent 44%), radial-gradient(ellipse at 79% 74%, #146d8a69, transparent 46%), linear-gradient(180deg, #0a1929, #0b1727); }
.poster-art { box-shadow: 0 0 0 1px #a1e8ff60, 0 0 0 9px #54c9f010, 0 22px 55px #020711a0, 0 0 44px #44bde538; transition: transform .35s ease, box-shadow .35s ease; }
.poster-card:hover .poster-art { transform: translateY(-5px) scale(1.025); box-shadow: 0 0 0 1px #c0f2ffad, 0 0 0 11px #54c9f01b, 0 28px 68px #020711ba, 0 0 58px #44bde55a; }
.poster-meta { gap: 7px; }
.poster-meta span { color: #73d8ff; text-shadow: 0 0 15px #45b9ed5c; }
.poster-meta b { color: #f0f6fc; text-shadow: 0 4px 22px #0008; }
.poster-meta small { color: #bfd0dc; }
.poster-meta { width: clamp(190px, 25vw, 290px); position: relative; gap: 9px; margin-top: 15px; padding: 16px 13px 14px; overflow: hidden; border: 1px solid #6dcdf050; border-radius: 17px; background: radial-gradient(ellipse at 50% 0%, #315a7a5c, transparent 66%), linear-gradient(145deg, #14283bdc, #111d30e8 72%, #1d1c36e8); box-shadow: inset 0 1px #ffffff12, 0 13px 31px #0208136b, 0 0 28px #40b9e517; }
.poster-meta:before { content: ""; position: absolute; top: 0; left: 28%; width: 44%; height: 1px; background: linear-gradient(90deg, transparent, #80e0ff, #a889ff, transparent); box-shadow: 0 0 16px #62d4ff9e; }
.poster-meta b { color: #f4f8ff; font-family: "Avenir Next", Avenir, "Segoe UI", sans-serif; font-size: 22px; font-weight: 800; letter-spacing: -.035em; line-height: 1.15; text-shadow: 0 4px 20px #0008; }
.poster-meta small { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border: 1px solid #738bb733; border-radius: 20px; background: #09182782; color: #c0d0df; font-size: 12px; font-weight: 650; }
.poster-meta small:before { content: ""; width: 5px; height: 5px; flex: 0 0 auto; border-radius: 50%; background: #82dfff; box-shadow: 0 0 9px #69d4ff; }
.channels { background: linear-gradient(180deg, #0b1727, #0a1a29); }
.channel-panel {
  position: relative;
  isolation: isolate;
  border-color: #69c9ed56;
  border-radius: 22px;
  background: linear-gradient(#0613210a, #0613211f), url("assets/criteria-background.png") center center / cover no-repeat, #071723;
  box-shadow: 0 30px 75px #02071378, inset 0 1px #ffffff12, 0 0 55px #51bde71c;
}
.criteria-grid { gap: 11px; border: 0; }
.criteria-item { min-height: 112px; border: 1px solid #4da8cf3e; border-right: 1px solid #4da8cf3e; border-radius: 14px; background: linear-gradient(145deg, #183047bc, #101f30d9); box-shadow: inset 0 1px #ffffff0c, 0 8px 22px #030b1640; }
.criteria-item:last-child { border-right: 1px solid #4da8cf3e; }
.criteria-icon { color: #78dfff; filter: drop-shadow(0 0 9px #45b8f486); }
.criteria-item b { color: #eef7fc; }
.criteria-item small { color: #b5c7d2; }
.benefits { background: radial-gradient(ellipse at 14% 30%, #71397672, transparent 47%), radial-gradient(ellipse at 86% 77%, #145b7a58, transparent 49%), linear-gradient(180deg, #0b1727, #101c2d 50%, #091827); }
.benefit-card { position: relative; overflow: hidden; min-height: 166px; border-color: #5a76a05c; border-radius: 16px; background: radial-gradient(ellipse at 50% -5%, #3d91ae35, transparent 64%), linear-gradient(145deg, #1c2940, #101e2f 76%); box-shadow: inset 0 1px #ffffff0d, 0 12px 28px #030a1454; }
.benefit-card:before { content: ""; position: absolute; top: 0; left: 15%; width: 70%; height: 1px; background: linear-gradient(90deg, transparent, #7be0ff9e, #ae82ff70, transparent); }
.benefit-card:hover { border-color: #7ad7ff9c; background: radial-gradient(ellipse at 50% -5%, #4dbbe247, transparent 64%), linear-gradient(145deg, #22344c, #14263a); box-shadow: 0 17px 38px #030a1475, 0 0 32px #44bce61c; }
.benefit-icon { border-color: #9ee8ffad; background: linear-gradient(145deg, #5bd2f3, #4c91d3 62%, #806ce0); box-shadow: 0 0 0 5px #49bce51a, 0 0 27px #46bee555; }
.benefit-card h3 { color: #f1f8fc; }
.benefit-card p { color: #bdcad7; }
.device-showcase { background: radial-gradient(ellipse at 12% 46%, #783a776c, transparent 48%), radial-gradient(ellipse at 88% 54%, #176f8b69, transparent 49%), linear-gradient(115deg, #101829, #0d2232 58%, #0b2636); }
.device-art-frame:before { background: radial-gradient(ellipse at 56% 53%, #087caa7a, transparent 62%), radial-gradient(ellipse at 8% 50%, #a341795c, transparent 56%); filter: blur(22px); }
.device-art-frame:after { content: ""; position: absolute; z-index: 0; inset: 7% 9%; border: 1px solid #7bdcff39; border-radius: 48% 52% 44% 56%; box-shadow: 0 0 0 12px #67cbf00c, 0 0 45px #38b9ef26; pointer-events: none; }
.device-art-frame img { filter: drop-shadow(0 22px 35px #000b) saturate(1.08); }
.device-chip-list li { border-color: #5abce35e; border-radius: 22px; background: linear-gradient(110deg, #35294c, #153448); color: #e8f5fb; box-shadow: inset 0 1px #ffffff0e; }
.home-guides { background: radial-gradient(ellipse at 16% 28%, #713b786e, transparent 47%), radial-gradient(ellipse at 87% 72%, #125d795f, transparent 48%), linear-gradient(180deg, #0b1727, #0a1827); }
.home-guide-card { position: relative; overflow: hidden; min-height: 210px; border-color: #536d8b6b; border-radius: 16px; background: radial-gradient(ellipse at 100% 0%, #245a7736, transparent 54%), linear-gradient(145deg, #1c2940, #101f30); box-shadow: inset 0 1px #ffffff0b, 0 12px 30px #030a1550; }
.home-guide-card:before { content: ""; position: absolute; top: 0; right: 12%; left: 12%; height: 1px; background: linear-gradient(90deg, transparent, #70d9ff8f, #9c7cff65, transparent); }
.home-guide-card:hover { border-color: #7bd8ff9c; box-shadow: 0 17px 38px #030a147a, 0 0 34px #3db9e91c; }
.home-guide-category { color: #7edcff; }
.home-guide-card h3 { color: #f0f7fc; }
.home-guide-card > p:not(.home-guide-category) { color: #bdcad7; }
.home-guide-link { color: #85ddff; }
.plans { background: radial-gradient(ellipse at 12% 41%, #6a367164, transparent 47%), radial-gradient(ellipse at 90% 66%, #155e7c5c, transparent 48%), linear-gradient(180deg, #0a1727, #101b2b); }
.plan-card { border-color: #576d8b6b; border-radius: 18px; background: radial-gradient(ellipse at 100% 0%, #3b5d7432, transparent 52%), linear-gradient(145deg, #1c2940, #101e30); box-shadow: inset 0 1px #ffffff10, 0 17px 38px #03091375; }
.plan-featured { transform: none; border-color: #87ddffb3; background: radial-gradient(ellipse at 50% 0%, #536a9b66, transparent 57%), linear-gradient(150deg, #292748, #12263a 70%); box-shadow: inset 0 1px #ffffff20, 0 25px 58px #02081396, 0 0 48px #55c2ec27; }
.popular-label { border-radius: 0 0 12px 12px; background: linear-gradient(90deg, #51c7ed, #9077ff 72%, #cf6ebe); color: #071725; box-shadow: 0 8px 24px #43b8e841; }
.plan-kicker { color: #81ddff; }
.plan-price strong { background: linear-gradient(100deg, #63d5ff, #b18cff 78%, #ef89c3); -webkit-background-clip: text; background-clip: text; color: transparent; }
.plan-divider { background: linear-gradient(90deg, transparent, #62cbed6b, #9679ff50, transparent); }
.plan-card li { border-bottom-color: #3a5366; color: #c7d3dc; }
.plan-card li:before { color: #71d7ff; text-shadow: 0 0 9px #57c8f0; }
.plan-button { border-color: #57b8dc78; border-radius: 24px; background: linear-gradient(110deg, #17334a, #252748); }
.plan-button:hover { background: linear-gradient(110deg, #20506b, #39365e); box-shadow: 0 0 24px #46bce526; }
.plan-button-primary { border: 0; background: linear-gradient(105deg, #58c9f2, #8d7cff 68%, #ca63bc); color: #091624; }
.plan-button-primary:hover { background: linear-gradient(105deg, #76dcff, #a394ff 68%, #e87ccc); }
.payment-marks i { border-color: #5387a1; border-radius: 12px; background: #0b1b29; color: #b5eaff; }
.help-section { background: radial-gradient(ellipse at 12% 46%, #703b746e, transparent 46%), radial-gradient(ellipse at 93% 68%, #145f7c5a, transparent 49%), linear-gradient(180deg, #0b1727, #0a1726); }
.help-card {
  position: relative;
  isolation: isolate;
  width: min(1080px, calc(100% - 56px));
  min-height: 160px;
  grid-template-columns: minmax(0, 1fr) auto;
  padding: 22px 26px 22px 180px;
  border-color: #66c8ec62;
  border-radius: 20px;
  background: linear-gradient(90deg, transparent 170px, #061a29 540px), url("assets/help-headset-background.png") left center / auto 100% no-repeat, #061a29;
  box-shadow: inset 0 1px #ffffff14, 0 21px 52px #020a166b, 0 0 43px #46b9e51a;
}
@media (max-width: 900px) {
  .help-card { grid-template-columns: minmax(0, 1fr); gap: 12px; background-size: auto, auto 180px; }
  .help-card > .button { justify-self: start; width: auto; }
}
@media (max-width: 680px) {
  .help-card {
    width: calc(100% - 28px);
    padding: 145px 20px 22px;
    background-position: left top;
    background-size: auto, auto 140px;
  }
  .help-card > .button { width: 100%; white-space: normal; }
}
.help-emblem { border-color: #75d9ffab; background: radial-gradient(circle at 50% 42%, #244969, #151d31 72%); box-shadow: 0 0 0 8px #62d1f31a, 0 0 38px #53c1e94f; }
.faq-section { background: radial-gradient(ellipse at 13% 12%, #71377770, transparent 44%), radial-gradient(ellipse at 87% 22%, #155e7c59, transparent 47%), linear-gradient(180deg, #0b1727, #081522); }
.faq-grid { gap: 11px 14px; }
.faq-grid details { border: 1px solid #47627a75; border-radius: 14px; background: linear-gradient(135deg, #17263aeb, #102033eb); box-shadow: inset 0 1px #ffffff0a, 0 8px 22px #030a1542; transition: border-color .2s ease, background .2s ease; }
.faq-grid details:hover, .faq-grid details[open] { border-color: #68cff080; background: linear-gradient(135deg, #1b3047, #14243a); }
.faq-grid summary { padding: 15px 14px; color: #edf5fa; }
.faq-grid summary span { border-color: #60c4e88a; color: #77dbff; }
.faq-grid details p { margin: -2px 44px 15px 14px; color: #c1ced9; }
.site-footer { background: radial-gradient(ellipse at 12% 0%, #6032685c, transparent 48%), radial-gradient(ellipse at 90% 0%, #145d7a40, transparent 46%), #07111d; }
.footer-panel {
  border-color: #5c718875;
  border-radius: 20px;
  background: linear-gradient(180deg, #04101d99 0%, #04101d80 70%, #04101d33 100%), url("assets/footer-background.png") center bottom / cover no-repeat, #071723;
  box-shadow: inset 0 1px #ffffff13, 0 20px 50px #02081370;
}
.footer-links h4 { color: #eef6fb; }
.footer-panel .footer-brand-copy,
.footer-panel .footer-links {
  text-shadow: 0 2px 5px #000c;
}
.footer-panel .footer-brand-copy h3,
.footer-panel .footer-links h4 {
  color: #fff;
  font-weight: 800;
}
.footer-panel .footer-brand-copy > p,
.footer-panel .footer-links > a,
.footer-panel .footer-links > span,
.footer-panel .footer-contact p,
.footer-panel .footer-social-replacement small {
  color: #eaf3ff;
  font-weight: 700;
}
.footer-links > a:hover { color: #7cddff; }
.footer-contact-link { border-bottom-color: #65c7ec; color: #b1e9ff !important; }
.footer-social-replacement { border-color: #436278; border-radius: 12px; background: linear-gradient(110deg, #142a3b, #1d2037); }
.footer-dot { color: #75dbff; text-shadow: 0 0 14px #62d4ff; }
.footer-bottom { color: #b9cbd7; }
.detail-dialog { border-color: #70d5ff9c; border-radius: 20px; background: radial-gradient(ellipse at 0% 0%, #583b6e, transparent 52%), linear-gradient(145deg, #192942, #0d1c2b); box-shadow: 0 30px 100px #050812e0, 0 0 50px #48bce630; }
.dialog-close { border-color: #5c8aa4; border-radius: 50%; background: #142337; color: #9be5ff; }
.dialog-notice { border: 1px solid #3c6176; border-radius: 10px; background: linear-gradient(110deg, #173148, #24233d); color: #d1e0e9; }
:focus-visible { outline: 2px solid #80ddff; outline-offset: 3px; }

@media (max-width: 900px) {
  .plan-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .plan-featured { transform: none; }
  .section:before { top: -215px; height: 350px; }
}
@media (max-width: 680px) {
  .main-nav { border-bottom-color: #58c9f05c; background: #081624f7; }
  .poster-card { padding-inline: 10px; }
  .poster-meta { width: clamp(180px, 60vw, 230px); }
  .criteria-grid { gap: 8px; }
  .criteria-item { border-bottom: 1px solid #4da8cf3e; }
  .criteria-item:nth-child(n+3) { border-bottom: 1px solid #4da8cf3e; }
  .criteria-item:nth-child(n+3) { border-bottom: 0; }
  .benefit-card { min-height: 157px; }
  .plan-featured { margin-top: 4px; }
  .faq-grid { gap: 9px; }
  .section:before { top: -175px; width: 120vw; height: 300px; }
}

/* Long-duration premium plan: warm gold accents distinguish it from the featured plan. */
.plan-premium {
  z-index: 2;
  overflow: visible;
  transform: none;
  border-color: #f4c66cbd;
  background: radial-gradient(ellipse at 50% 0%, #9b6b3e50, transparent 57%), linear-gradient(150deg, #34243a, #211d35 58%, #142235);
  box-shadow: inset 0 1px #fff2d322, 0 28px 64px #020813a8, 0 0 46px #e6ae4e29;
}
.plan-premium:before {
  position: absolute;
  top: 0;
  left: 14%;
  width: 72%;
  height: 1px;
  background: linear-gradient(90deg, transparent, #ffe4a4, #bd8cff, transparent);
  content: "";
  box-shadow: 0 0 17px #ffd4778c;
}
.plan-premium-label {
  position: absolute;
  top: -13px;
  left: 50%;
  width: max-content;
  max-width: calc(100% - 18px);
  transform: translateX(-50%);
  padding: 8px 13px;
  border: 1px solid #ffe2a0a6;
  border-radius: 999px;
  background: linear-gradient(100deg, #ffe38a, #f2b95b 52%, #bd8cff);
  box-shadow: 0 8px 24px #e6ae4e3b;
  color: #261a32;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  text-align: center;
  white-space: nowrap;
}
.plan-premium .plan-kicker { color: #ffd582; }
.plan-premium .plan-price strong { background: linear-gradient(100deg, #ffe08a, #ffbf59 58%, #e9a9cb); -webkit-background-clip: text; background-clip: text; }
.plan-premium .plan-divider { background: linear-gradient(90deg, transparent, #efc56c91, #a98af266, transparent); }
.plan-premium .plan-card li:before, .plan-premium li:before { color: #ffd27a; text-shadow: 0 0 10px #f0b64d9c; }
.plan-premium .plan-button { border-color: #ffe08ad9; background: linear-gradient(105deg, #72503a, #57406c 58%, #493457); color: #fff8e8; box-shadow: 0 7px 19px #d99a4230, inset 0 1px #fff3d43b; }
.plan-premium .plan-button span { color: #ffd582; }
.plan-premium .plan-button:hover { background: linear-gradient(105deg, #89603f, #694b7e 58%, #584067); box-shadow: 0 0 25px #edbd5750, inset 0 1px #fff3d45c; }
.plan-premium .payment-marks i { border-color: #c7a75c; background: #211b2e; color: #ffe2a0; }
.plan-premium .payment-block { border-color: #eac46a45; background: linear-gradient(135deg, #211b2eb3, #302442a6); }

@media (max-width: 900px) {
  .plan-premium { transform: none; }
}

/* Give the information and benefit icons the luminous badge treatment from the reference. */
.criteria-icon,
.benefit-icon {
  position: relative;
  width: 46px;
  height: 46px;
  display: grid;
  place-items: center;
  flex: 0 0 auto;
  border: 1px solid #a5eaff;
  border-radius: 50%;
  background: radial-gradient(circle at 32% 25%, #79e3ff 0, #4daee9 40%, #6477dc 76%, #8069d9 100%);
  color: #f1fbff;
  font-size: 18px;
  line-height: 1;
  text-shadow: 0 1px 5px #123b68a6;
  box-shadow: 0 0 0 6px #48c7ee19, 0 0 26px #45c5ed5c, inset 0 2px 6px #ffffff52, inset 0 -5px 10px #283d9a40;
  transition: transform .22s ease, box-shadow .22s ease;
}
.criteria-icon:before,
.benefit-icon:before {
  position: absolute;
  inset: -8px;
  border: 1px solid #71d9f52e;
  border-radius: 50%;
  content: "";
  pointer-events: none;
}
.criteria-item:hover .criteria-icon,
.benefit-card:hover .benefit-icon {
  transform: translateY(-2px) scale(1.04);
  box-shadow: 0 0 0 7px #48c7ee24, 0 0 34px #45c5ed7a, inset 0 2px 6px #ffffff62, inset 0 -5px 10px #283d9a40;
}
.benefit-icon { margin-bottom: 13px; }

@media (max-width: 680px) {
  .criteria-icon,
  .benefit-icon { width: 42px; height: 42px; font-size: 17px; }
}

/* Use the supplied multi-screen artwork in the hero while keeping the existing color palette. */
.hero:before {
  opacity: 1;
  background-image:
    radial-gradient(ellipse at 17% 35%, #78396c8a 0%, transparent 43%),
    radial-gradient(ellipse at 0% 56%, #fc715a4a 0%, transparent 25%),
    radial-gradient(ellipse at 100% 43%, #00d8f482 0%, transparent 28%),
    radial-gradient(ellipse at 55% 115%, #2384cb65 0%, transparent 54%),
    linear-gradient(110deg, #101827e8 0%, #101c2dc2 35%, #10263a68 58%, #08283a55 100%),
    url("assets/hero-iptv-background.png");
  background-repeat: no-repeat;
  background-size: cover, cover, cover, cover, cover, min(1120px, 88vw) auto;
  background-position: center, center, center, center, center, right center;
}
.hero-layout { position: relative; z-index: 1; }
.hero h1, .hero-lead, .hero .eyebrow { text-shadow: 0 2px 16px #07131fc9; }

@media (max-width: 680px) {
  .hero:before {
    background-image:
      radial-gradient(ellipse at 17% 35%, #78396c8a 0%, transparent 43%),
      radial-gradient(ellipse at 0% 56%, #fc715a4a 0%, transparent 25%),
      radial-gradient(ellipse at 100% 43%, #00d8f482 0%, transparent 28%),
      radial-gradient(ellipse at 55% 115%, #2384cb65 0%, transparent 54%),
      linear-gradient(180deg, #101827e8 0%, #101c2dc9 45%, #10263a69 100%),
      url("assets/hero-iptv-background.png");
    background-size: cover, cover, cover, cover, cover, auto 48%;
    background-position: center, center, center, center, center, center bottom;
  }
}

/* Larger, heavier supporting text and a more finished navigation bar. */
.preview-note,
.rating-pill,
.hero-caption,
.button,
.main-nav,
.nav-cta { font-size: 14px; font-weight: 700; }
.preview-note { min-height: 40px; }
.eyebrow,
.home-guide-category,
.plan-kicker,
.included-title,
.footer-links h4,
.footer-social-replacement b { font-size: 13px; font-weight: 800; }
.hero-lead,
.center-heading > p:last-child,
.benefit-card p,
.device-showcase-copy > p:not(.eyebrow),
.home-guide-card > p:not(.home-guide-category),
.plan-copy,
.help-copy > p:last-child,
.faq-grid details p,
.footer-brand-copy > p,
.footer-contact p,
.dialog-message,
.dialog-notice { font-size: 15px; font-weight: 600; line-height: 1.75; }
.screen-top,
.screen-brand,
.screen-label,
.screen-copy small,
.screen-cta,
.screen-row-head,
.visual-stamp b,
.poster-meta span,
.poster-meta small,
.criteria-item b,
.criteria-item small,
.benefit-card h3,
.device-chip-list li,
.popular-label,
.plan-price small,
.plan-availability,
.plan-card li,
.plan-button,
.payment-marks,
.payment-marks i,
.home-guide-link,
.faq-grid summary,
.footer-links > a,
.footer-links > span,
.footer-social-replacement small,
.footer-bottom { font-size: 14px; font-weight: 650; }
.criteria-item small,
.benefit-card p,
.plan-copy,
.plan-card li,
.footer-contact p { line-height: 1.7; }
.hero-caption,
.criteria-item small,
.plan-price small,
.plan-availability,
.poster-meta small,
.home-guide-card > p:not(.home-guide-category),
.footer-brand-copy > p,
.footer-contact p,
.footer-bottom { color: #c3d2df; }
.help-copy .eyebrow { font-size: 13px; font-weight: 800; }

.site-header {
  border-bottom: 1px solid #69d5ff42;
  background: linear-gradient(105deg, #071522f2, #0c2032f0 55%, #171a33f0);
  box-shadow: 0 15px 42px #02071180, inset 0 1px #ffffff0b;
  backdrop-filter: blur(18px);
}
.nav-wrap { min-height: 82px; }
.main-nav {
  gap: 4px;
  padding: 5px;
  border: 1px solid #65bde23b;
  border-radius: 18px;
  background: linear-gradient(115deg, #12263bd9, #181d35d9);
  box-shadow: inset 0 1px #ffffff12, 0 9px 26px #020a1560;
}
.main-nav > a:not(.nav-cta) {
  padding: 11px 12px;
  border-radius: 12px;
  color: #d5e2ee;
  transition: color .2s ease, background .2s ease, box-shadow .2s ease;
}
.main-nav > a:not(.nav-cta):after { display: none; }
.main-nav > a:not(.nav-cta):hover {
  background: linear-gradient(120deg, #50c4ec22, #9d7cff24);
  color: #f1fbff;
  box-shadow: inset 0 1px #b9eeff20;
}
.nav-cta {
  min-height: 43px;
  margin-left: 3px;
  padding-inline: 16px;
  border: 1px solid #a3e8ffad;
  border-radius: 13px;
  background: linear-gradient(105deg, #56c9f2, #8d7cff 68%, #ca63bc);
  color: #071725;
  font-weight: 850;
  box-shadow: 0 7px 22px #3eb7e83b, inset 0 1px #ffffff80;
}
.nav-cta:hover { box-shadow: 0 10px 28px #3eb7e85e, inset 0 1px #ffffffa0; }
.nav-cta span { color: #10203a; font-size: 17px; }

@media (max-width: 900px) {
  .nav-wrap { gap: 12px; }
  .main-nav { gap: 0; padding: 3px; font-size: 13px; }
  .main-nav > a:not(.nav-cta) { padding: 10px 7px; font-size: 13px; }
  .nav-cta { min-height: 38px; gap: 5px; padding-inline: 8px; font-size: 13px; }
}
@media (max-width: 680px) {
  .nav-wrap { min-height: 72px; }
  .main-nav {
    top: calc(100% - 1px);
    left: 0;
    right: 0;
    display: none;
    flex-direction: column;
    align-items: stretch;
    gap: 4px;
    padding: 12px 18px 17px;
    border: 1px solid #65bde24a;
    border-top: 0;
    border-radius: 0 0 18px 18px;
    background: linear-gradient(145deg, #0d1f32f7, #171b32f7);
    box-shadow: 0 18px 32px #02071191;
    font-size: 15px;
  }
  .main-nav.is-open { display: flex; }
  .main-nav > a:not(.nav-cta) { padding: 13px 12px; border-bottom: 1px solid #85d8ff22; font-size: 15px; }
  .nav-cta { justify-content: center; margin: 8px 0 0; font-size: 15px; }
  .hero-lead,
  .center-heading > p:last-child,
  .benefit-card p,
  .device-showcase-copy > p:not(.eyebrow),
  .home-guide-card > p:not(.home-guide-category),
  .plan-copy,
  .help-copy > p:last-child,
  .faq-grid details p,
  .footer-brand-copy > p,
  .footer-contact p { font-size: 14px; }
  .footer-links > a,
  .footer-links > span,
  .footer-bottom { font-size: 13px; }
}

/* Sharper hero accent and a more readable, keyword-rich introduction. */
.hero h1 em {
  display: inline-block;
  background: linear-gradient(100deg, #76eaff 0%, #b69bff 51%, #ff89dc 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  text-shadow: none;
  filter: none;
  -webkit-text-stroke: 0;
}
.hero-lead {
  max-width: 510px;
  padding: 12px 15px;
  border-left: 2px solid #71dcff;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(100deg, #071522dc 0%, #0b1729ba 75%, #101b307d 100%);
  box-shadow: inset 0 1px #ffffff0d, 0 10px 25px #02081250;
  color: #f0f6ff;
  font-size: 16px;
  font-weight: 700;
  line-height: 1.75;
  text-shadow: 0 2px 7px #020812;
}
@media (max-width: 680px) {
  .hero-lead { padding: 10px 12px; font-size: 15px; }
}
.preview-note {
  border-bottom: 1px solid #bd789047;
  background: radial-gradient(ellipse at 50% 0%, #75435b5c, transparent 72%), linear-gradient(105deg, #34233b 0%, #48283f 52%, #2b202f 100%);
  box-shadow: inset 0 1px #ffffff12;
  color: #f0eaf5;
}

/* FAQ cards with a geometrically centered expand icon. */
.faq-section .faq-grid { gap: 14px 18px; align-items: start; }
.faq-section .faq-grid details {
  min-width: 0;
  border: 1px solid #7198b75e;
  border-radius: 17px;
  background: linear-gradient(120deg, #1b2e43f2, #112236f2 72%, #24263de8);
  box-shadow: inset 0 1px #d2ecff0d, 0 10px 24px #020a1638;
}
.faq-section .faq-grid details:is(:hover, [open]) {
  border-color: #8bd9ff9c;
  background: linear-gradient(120deg, #20384ef5, #15283df5 72%, #302b49eb);
  box-shadow: inset 0 1px #d2ecff14, 0 12px 28px #020a164d;
}
.faq-section .faq-grid summary {
  min-height: 76px;
  gap: 18px;
  padding: 19px 20px;
  color: #f2f7ff;
  font-size: 15px;
  font-weight: 750;
  line-height: 1.55;
  border-radius: 16px;
}
.faq-section .faq-grid summary:focus-visible { outline: 2px solid #92deff; outline-offset: 4px; }
.faq-section .faq-grid summary > span {
  position: relative;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  padding: 0;
  border: 1px solid #8bddff80;
  border-radius: 50%;
  background: linear-gradient(135deg, #56c9f229, #9b7cf52e);
  color: #b8ecff;
  transform: none;
  box-shadow: inset 0 1px #ffffff12;
}
.faq-section .faq-grid summary > span::before,
.faq-section .faq-grid summary > span::after {
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  width: 12px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transform: translate(-50%, -50%);
  transition: transform .2s ease, opacity .2s ease;
}
.faq-section .faq-grid summary > span::after { transform: translate(-50%, -50%) rotate(90deg); }
.faq-section .faq-grid details[open] summary > span { background: linear-gradient(135deg, #56c9f2, #a78aff); color: #102038; }
.faq-section .faq-grid details[open] summary > span::after { transform: translate(-50%, -50%) rotate(0deg); opacity: 0; }
.faq-section .faq-grid details > p { margin: 0 20px 20px; padding-top: 15px; border-top: 1px solid #98c8e12b; color: #d4e2f0; font-size: 15px; line-height: 1.8; }
@media (max-width: 680px) {
  .faq-section .faq-grid summary { gap: 12px; padding: 16px; font-size: 14px; }
  .faq-section .faq-grid details > p { margin: 0 16px 18px; font-size: 14px; }
}

.main-nav > a.nav-referral {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  border: 1px solid #b79afa70;
  background: linear-gradient(115deg, #27334b, #38294d);
  color: #f0eaff;
  white-space: nowrap;
}
.main-nav > a.nav-referral { align-items: center; line-height: 1; }
.nav-referral span {
  display: inline-flex;
  flex: 0 0 auto;
  align-items: center;
  justify-content: center;
  min-height: 25px;
  padding: 0 8px;
  border: 1px solid #d0baff45;
  border-radius: 8px;
  background: linear-gradient(120deg, #b99cff30, #e4b5ff24);
  color: #e6d8ff;
  font-size: 11px;
  font-weight: 850;
  line-height: 1;
  white-space: nowrap;
}
@media (min-width: 681px) and (max-width: 1100px) {
  .nav-wrap { min-height: 72px; }
  .menu-toggle { width: 40px; height: 40px; display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 5px; border: 1px solid #527894; border-radius: 9px; background: #142337; cursor: pointer; }
  .menu-toggle span { width: 17px; height: 2px; background: #a1e1ff; }
  .main-nav { position: absolute; top: 100%; left: 0; right: 0; display: none; flex-direction: column; align-items: stretch; gap: 5px; padding: 12px 22px 18px; border-radius: 0 0 18px 18px; background: #0d1f32fa; }
  .main-nav.is-open { display: flex; }
  .main-nav > a:not(.nav-cta) { padding: 12px; font-size: 15px; }
  .main-nav .nav-cta { justify-content: center; margin: 4px 0 0; font-size: 15px; }
}

/* Separate, lightweight frames for each footer group. */
.site-footer .footer-panel {
  grid-template-columns: minmax(0, 1.3fr) minmax(0, .85fr) minmax(0, 1fr) minmax(0, 1.2fr);
  gap: 16px;
  align-items: stretch;
}
.footer-panel .footer-brand-copy,
.footer-panel > .footer-links {
  min-width: 0;
  padding: 21px 18px;
  border: 1px solid #7398b35c;
  border-radius: 15px;
  background: linear-gradient(135deg, #142a3bd9, #1d2037cc);
  box-shadow: inset 0 1px #ffffff09, 0 8px 22px #020b1526;
}
.footer-panel > .footer-brand-col {
  min-width: 0;
  padding: 0;
  border: 0;
  background: none;
  box-shadow: none;
}
.footer-panel .footer-brand-row { height: 100%; }
.footer-panel .footer-brand-row > .brand { margin: 5px 0 2px 10px; }
.footer-panel .footer-brand-copy { width: 100%; flex: 1; }
.footer-panel > .footer-links h4 {
  width: 100%;
  margin: 0 0 7px;
  padding-bottom: 12px;
  border-bottom: 1px solid #88bdd32e;
}
.footer-panel > .footer-links > a,
.footer-panel > .footer-links > span { max-width: 100%; overflow-wrap: anywhere; }
.footer-panel .footer-brand-copy > p,
.footer-panel .footer-contact p { max-width: none; }
.footer-panel .footer-social-replacement { width: 100%; box-sizing: border-box; }
@media (max-width: 1000px) {
  .site-footer .footer-panel { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  .site-footer .footer-panel { gap: 12px; }
  .footer-panel .footer-brand-copy,
  .footer-panel > .footer-links { padding: 18px 15px; }
}
@media (max-width: 480px) {
  .site-footer .footer-panel { grid-template-columns: minmax(0, 1fr); }
}

/* Match the selected plan; 3 and 6 months share the standard palette. */
.detail-dialog {
  --order-border: #576d8b9c;
  --order-surface: radial-gradient(ellipse at 100% 0%, #3b5d7432, transparent 52%), linear-gradient(145deg, #1c2940, #101e30);
  --order-glow: #46bce526;
  --order-accent: #85ddff;
  --order-input-border: #5c8aa4;
  --order-input: #091a2c;
  --order-summary: linear-gradient(110deg, #17334a, #252748);
  --order-copy: #d0deed;
  --order-muted: #b5c8dd;
  --order-button: linear-gradient(110deg, #17334a, #252748);
  --order-button-hover: linear-gradient(110deg, #20506b, #39365e);
  --order-button-ink: #e3f3ff;
}
.detail-dialog[data-plan-theme="featured"] {
  --order-border: #87ddffb3;
  --order-surface: radial-gradient(ellipse at 50% 0%, #536a9b66, transparent 57%), linear-gradient(150deg, #292748, #12263a 70%);
  --order-glow: #55c2ec42;
  --order-input-border: #8d8ed4;
  --order-input: #141d34;
  --order-summary: linear-gradient(110deg, #263654, #342b55);
  --order-button: linear-gradient(105deg, #58c9f2, #8d7cff 68%, #ca63bc);
  --order-button-hover: linear-gradient(105deg, #76dcff, #a394ff 68%, #e87ccc);
  --order-button-ink: #091624;
}
.detail-dialog[data-plan-theme="premium"] {
  --order-border: #f4c66cbd;
  --order-surface: radial-gradient(ellipse at 50% 0%, #9b6b3e50, transparent 57%), linear-gradient(150deg, #34243a, #211d35 58%, #142235);
  --order-glow: #e6ae4e3b;
  --order-accent: #ffe2a0;
  --order-input-border: #b59c768c;
  --order-input: #18182a;
  --order-summary: linear-gradient(105deg, #463344, #342b4b);
  --order-copy: #dfd4e5;
  --order-muted: #cbbbd4;
  --order-button: linear-gradient(100deg, #ffe38a, #f2b95b 52%, #bd8cff);
  --order-button-hover: linear-gradient(100deg, #ffebaa, #ffca76 52%, #cfacff);
  --order-button-ink: #261a32;
}
/* Plan request form. */
.detail-dialog {
  width: min(490px, calc(100% - 28px));
  max-height: calc(100dvh - 32px);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-color: var(--order-border);
  background: var(--order-surface);
  box-shadow: inset 0 1px #fff2d322, 0 28px 80px #020813b8, 0 0 46px var(--order-glow);
}
body:has(.detail-dialog[open]) { overflow: hidden; }
.detail-dialog .dialog-close { width: 36px; height: 36px; cursor: pointer; border-color: var(--order-input-border); background: var(--order-input); color: var(--order-accent); }
.detail-dialog .dialog-star, .detail-dialog .eyebrow { color: var(--order-accent); }
.detail-dialog .dialog-message { color: var(--order-copy); }
.order-summary { margin: 15px 0; padding: 13px 15px; border: 1px solid var(--order-input-border); border-radius: 12px; background: var(--order-summary); color: var(--order-accent); font-size: 18px; font-weight: 800; }
#order-form { display: flex; flex-direction: column; }
#order-form label { margin: 16px 0 8px; color: #f0f7ff; font-size: 15px; font-weight: 750; }
#order-form label span { color: var(--order-muted); font-size: 12px; font-weight: 600; }
#order-form input { width: 100%; min-height: 48px; padding: 12px 14px; border: 1px solid var(--order-input-border); border-radius: 10px; background: var(--order-input); color: #f5f8ff; font: inherit; font-size: 16px; }
#order-form input::placeholder { color: var(--order-muted); }
#order-form input:focus-visible { outline: 2px solid var(--order-accent); outline-offset: 3px; }
#order-form input:user-invalid { border-color: #ff9eae; }
.order-explainer { margin: 17px 0; color: var(--order-copy); font-size: 13px; line-height: 1.65; }
.order-submit { width: 100%; min-height: 48px; font-size: 15px; font-weight: 800; }
.detail-dialog .order-submit { background: var(--order-button); color: var(--order-button-ink); box-shadow: 0 8px 24px var(--order-glow), inset 0 1px #fff2d380; }
.detail-dialog .order-submit span { color: var(--order-button-ink); }
.detail-dialog .order-submit:hover { background: var(--order-button-hover); box-shadow: 0 12px 30px var(--order-glow); }
.detail-dialog button:focus-visible { outline: 2px solid var(--order-accent); outline-offset: 4px; }
.order-footnote { margin: 12px 0 0; color: var(--order-muted); text-align: center; font-size: 12px; line-height: 1.6; }
@media (max-width: 680px) {
  .detail-dialog { padding: 25px 20px; }
  .detail-dialog h2 { font-size: 24px; }
}

/* Referral offer. */
.referral-section { padding: 8px 0 40px; }
.referral-card {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  display: grid;
  grid-template-columns: 132px minmax(0, 1fr) auto;
  align-items: center;
  gap: 30px;
  padding: 34px;
  border: 1px solid #93cfff75;
  border-radius: 24px;
  background: linear-gradient(90deg, #071522b3 0%, #071522a6 42%, #07152266 68%, #0715221a 100%), url("assets/referral-background.png") center center / cover no-repeat, #071522;
  box-shadow: inset 0 1px #ffffff1a, 0 18px 45px #020a164d;
}
.referral-card::after { content: none; }
.referral-reward { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; width: 122px; height: 134px; border: 1px solid #b9eaff99; border-radius: 26px; background: linear-gradient(140deg, #5edbfa, #9182ff 65%, #dd7bc9); color: #0b1c31; box-shadow: 0 12px 30px #020b1840, inset 0 1px #ffffff8c; transform: rotate(-7deg); }
.referral-reward > span { font-size: 58px; font-weight: 900; line-height: 1.1; letter-spacing: -.06em; }
.referral-reward b { margin-top: 7px; font-size: 11px; font-weight: 900; letter-spacing: .08em; }
.referral-reward i { position: absolute; top: -13px; right: -10px; font-size: 32px; font-style: normal; color: #b9f2ff; }
.referral-label { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 13px; padding: 7px 11px; border: 1px solid #9db7ff52; border-radius: 30px; background: #070f245c; color: #a8e8ff; font-size: 11px; font-weight: 850; letter-spacing: .1em; }
.referral-copy h2 { margin: 0; font-size: clamp(26px, 3vw, 36px); line-height: 1.2; font-weight: 850; }
.referral-copy h2 em { text-shadow: none; }
.referral-copy > p:not(.referral-label) { max-width: 580px; margin: 13px 0 0; color: #e2edf8; font-size: 15px; font-weight: 600; line-height: 1.7; }
.referral-copy strong { color: #fff; font-weight: 800; }
.referral-copy > p.referral-note { margin-top: 7px; color: #c4d5e7; font-size: 13px; }
.referral-actions { display: flex; flex-direction: row; align-items: stretch; gap: 12px; }
.referral-actions .button { min-height: 48px; white-space: nowrap; font-weight: 800; }
.referral-offers { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 42px; padding: 10px 15px; border: 1px solid #95d8fa52; border-radius: 22px; background: linear-gradient(110deg, #10283bbd, #28253db3); backdrop-filter: blur(6px); color: #e6f6ff; font-size: 14px; font-weight: 700; box-shadow: inset 0 1px #ffffff0d; transition: background .2s ease, border-color .2s ease; }
.referral-offers:hover { border-color: #95d8fa99; background: linear-gradient(110deg, #173b50e6, #393157db); }
.referral-card a:focus-visible { outline: 2px solid #b9f2ff; outline-offset: 5px; }
@media (max-width: 1000px) {
  .referral-card { grid-template-columns: 110px minmax(0, 1fr); gap: 23px; padding: 28px; }
  .referral-reward { width: 100px; height: 114px; }
  .referral-actions { grid-column: 2; align-items: stretch; }
}
@media (max-width: 680px) {
  .referral-card { grid-template-columns: minmax(0, 1fr); gap: 23px; padding: 26px 22px; background-image: linear-gradient(180deg, #07152273, #071522d9 48%, #071522ed), url("assets/referral-background.png"); background-position: center, 72% center; }
  .referral-reward { width: 84px; height: 88px; border-radius: 20px; }
  .referral-reward > span { font-size: 42px; }
  .referral-reward b { font-size: 9px; }
  .referral-actions { grid-column: 1; align-items: stretch; text-align: center; }
  .referral-actions .button,
  .referral-actions .referral-offers { flex: 1 1 0; min-width: 0; padding: 10px 9px; gap: 6px; font-size: 12px; line-height: 1.4; white-space: normal; }
}

/* Fixed contact shortcut, outside content and scroll animations. */
.whatsapp-float {
  position: fixed;
  z-index: 90;
  right: calc(26px + env(safe-area-inset-right, 0px));
  bottom: calc(30px + env(safe-area-inset-bottom, 0px));
  display: grid;
  place-items: center;
  width: 62px;
  height: 62px;
  border: 1px solid #a1e5ff9c;
  border-radius: 50%;
  background: linear-gradient(135deg, #4bd4fa 0%, #8585ff 58%, #de79c9 100%);
  color: #071b2d;
  box-shadow: 0 8px 28px #020b1880, 0 0 0 5px #76d2f414, inset 0 1px #ffffff80;
  transition: transform .2s ease, box-shadow .2s ease;
}
.whatsapp-float:hover,
.whatsapp-float:focus-visible {
  transform: translateY(-3px);
  box-shadow: 0 12px 32px #020b1890, 0 0 0 6px #76d2f426;
}
.whatsapp-float:focus-visible { outline: 3px solid #d4f4ff; outline-offset: 5px; }
.whatsapp-tooltip {
  position: absolute;
  right: calc(100% + 14px);
  padding: 10px 14px;
  border: 1px solid #83cfff66;
  border-radius: 12px;
  background: #102238;
  color: #eff7ff;
  font-size: 14px;
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease;
}
.whatsapp-float:is(:hover, :focus-visible) .whatsapp-tooltip { opacity: 1; visibility: visible; }
.site-footer { padding-bottom: 100px; }
@media (max-width: 768px) {
  .whatsapp-float {
    width: 56px;
    height: 56px;
    right: calc(24px + env(safe-area-inset-right, 0px));
    bottom: calc(32px + env(safe-area-inset-bottom, 0px));
  }
  .whatsapp-tooltip { max-width: calc(100vw - 120px - env(safe-area-inset-right, 0px)); white-space: normal; }
}
@media (prefers-reduced-motion: reduce) {
  .whatsapp-float:is(:hover, :focus-visible) { transform: none; }
}

/* Keep phone plans in one readable column, after the tablet overrides. */
@media (max-width: 768px) {
  .plans .plan-grid {
    grid-template-columns: minmax(0, 1fr);
    width: min(460px, 100%);
    margin: 30px auto 0;
    gap: 22px;
  }
  .plans .plan-card {
    min-width: 0;
    width: clamp(158px, 20vw, 180px);
    flex: 0 0 clamp(158px, 20vw, 180px);
    margin: 0;
    padding: 24px 22px 20px;
    transform: none;
  }
  .plans .popular-label,
  .plans .plan-premium-label {
    position: static;
    align-self: flex-start;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 17px;
    padding: 8px 11px;
    transform: none;
    border-radius: 10px;
    white-space: normal;
    font-size: 11px;
    line-height: 1.45;
  }
  .plans .plan-card h3 { font-size: 22px; line-height: 1.35; }
  .plans .plan-copy { min-height: 0; margin-bottom: 16px; }
  .plans .plan-price { flex-wrap: wrap; gap: 5px 10px; }
  .plans .plan-price strong { font-size: 36px; }
  .plans .plan-card li { padding-block: 11px; }
  .plans .plan-button { min-height: 48px; padding: 12px 15px; font-size: 15px; }
}

/* Editorial cards shared by the homepage and the guide library. */
body :is(.home-guide-grid, .guide-grid) {
  gap: 22px;
  align-items: stretch;
}
:is(.home-guide-grid, .guide-grid) > :is(.home-guide-card, .guide-card) {
  --card-accent: #81dcff;
  position: relative;
  min-width: 0;
  min-height: 290px;
  padding: 27px 25px 21px;
  border: 1px solid transparent;
  border-radius: 20px;
  background:
    linear-gradient(145deg, #20344b, #102135 65%, #13263b) padding-box,
    linear-gradient(135deg, #83d8f4a8, #7195b14d 48%, #a28af58c) border-box;
  box-shadow: 0 16px 32px #020a164d, inset 0 1px #ffffff0d;
  transition: transform .2s ease, box-shadow .2s ease;
}
:is(.home-guide-grid, .guide-grid) > :is(.home-guide-card, .guide-card):nth-child(3n + 2) {
  --card-accent: #c2afff;
  background:
    linear-gradient(145deg, #2c304d, #172338 65%, #19283f) padding-box,
    linear-gradient(135deg, #b6a0ffa8, #7195b14d 48%, #79d7ee8c) border-box;
}
:is(.home-guide-grid, .guide-grid) > :is(.home-guide-card, .guide-card)::before {
  top: 0;
  left: 25px;
  right: auto;
  width: 54px;
  height: 3px;
  border-radius: 0 0 4px 4px;
  background: var(--card-accent);
}
:is(.home-guide-grid, .guide-grid) :is(.home-guide-category, .guide-card-category) {
  align-self: flex-start;
  max-width: 100%;
  margin: 0 0 20px;
  padding: 6px 10px;
  border: 1px solid #c2deff26;
  border-radius: 7px;
  background: #08162559;
  color: var(--card-accent);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: .08em;
  text-shadow: none;
}
:is(.home-guide-grid, .guide-grid) :is(.home-guide-card h3, .guide-card h2) {
  margin: 0;
  font-family: inherit;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.025em;
  color: #f4f8ff;
  text-wrap: balance;
}
:is(.home-guide-grid, .guide-grid) :is(.home-guide-card, .guide-card) > p:not(.home-guide-category):not(.guide-card-category) {
  margin: 14px 0 24px;
  color: #c6d6e7;
  font-size: 15px;
  font-weight: 600;
  line-height: 1.75;
}
:is(.home-guide-grid, .guide-grid) :is(.home-guide-link, .guide-card-link) {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid #a4c8e330;
  color: #edf6ff;
  font-size: 14px;
  font-weight: 750;
}
:is(.home-guide-grid, .guide-grid) :is(.home-guide-link, .guide-card-link) span {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  border: 1px solid #99dfff66;
  border-radius: 10px;
  background: #87cfff15;
  color: var(--card-accent);
  font-size: 19px;
}
:is(.home-guide-grid, .guide-grid) > :is(.home-guide-card, .guide-card):is(:hover, :focus-within) {
  transform: translateY(-4px);
  box-shadow: 0 20px 40px #020a1673, 0 0 0 1px #9bdcff70;
}
:is(.home-guide-grid, .guide-grid) a:focus-visible {
  outline: 2px solid var(--card-accent);
  outline-offset: 5px;
  border-radius: 4px;
}
@media (min-width: 681px) and (max-width: 1000px) {
  body :is(.home-guide-grid, .guide-grid) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 680px) {
  body :is(.home-guide-grid, .guide-grid) { gap: 17px; }
  :is(.home-guide-grid, .guide-grid) > :is(.home-guide-card, .guide-card) { min-height: 0; padding: 23px 21px 19px; }
  :is(.home-guide-grid, .guide-grid) :is(.home-guide-card h3, .guide-card h2) { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  :is(.home-guide-grid, .guide-grid) > :is(.home-guide-card, .guide-card):is(:hover, :focus-within) { transform: none; }
}


/* Center the mobile presentation while preserving desktop layouts. */
@media (max-width: 768px) {
  body main, body .site-footer, body .detail-dialog { text-align: center; }
  body .shell { width: calc(100% - 32px); margin-inline: auto; }
  body .hero-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  body .hero-copy { width: 100%; max-width: 520px; margin-inline: auto; }
  body .hero-lead { margin-inline: auto; border-left: 0; border-top: 2px solid #71dcff; border-radius: 12px; }
  body .hero-actions, body .hero-caption, body .device-chip-list { justify-content: center; }
  body .main-nav > a { justify-content: center; text-align: center; }
  body .device-showcase-layout { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  body .device-showcase-copy { text-align: center; }
  body .plans .plan-price, body .plans .plan-button { justify-content: center; }
  body .plans .popular-label, body .plans .plan-premium-label { align-self: center; }
  body .referral-card { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  body .referral-copy > p { margin-inline: auto; }
  body .referral-actions { grid-column: 1; justify-content: center; width: 100%; }
  body .help-card { grid-template-columns: minmax(0, 1fr); justify-items: center; padding: 145px 20px 24px; background-position: center top; background-size: auto, auto 140px; }
  body .help-card > .button { justify-self: center; }
  body :is(.home-guide-grid, .guide-grid) :is(.home-guide-category, .guide-card-category) { align-self: center; }
  body :is(.home-guide-grid, .guide-grid) :is(.home-guide-link, .guide-card-link) { justify-content: center; }
  body .faq-section .faq-grid summary { position: relative; justify-content: center; padding-inline: 54px; text-align: center; }
  body .faq-section .faq-grid summary > span { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); }
  body .footer-panel .footer-links, body .footer-panel .footer-brand-row, body .footer-bottom { align-items: center; text-align: center; }
  body .footer-panel .footer-brand-row > .brand { margin: 5px auto 2px; }
  body .footer-panel .footer-brand-copy > p { margin-inline: auto; }
  body .footer-panel .footer-social-replacement { justify-content: center; }
  body .guide-index-hero, body .guide-article-hero, body .guide-lead { margin-inline: auto; text-align: center; }
  body .guide-topic-nav, body .guide-meta { justify-content: center; flex-wrap: wrap; }
  body .guide-list-heading { flex-direction: column; align-items: center; }
  body #order-form label { text-align: center; }
  body #order-form input { text-align: center; }
}

/* Mobile artwork framing: keep complete subjects above the text. */
@media (max-width: 768px) {
  body .hero-copy .rating-pill { margin-inline: auto; justify-content: center; max-width: 100%; text-align: center; }
  body .referral-card {
    padding-top: 245px;
    background-color: #071522;
    background-image: linear-gradient(180deg, transparent 0, #07152215 150px, #071522 240px), url("assets/referral-background.png");
    background-size: 100% 100%, auto 250px;
    background-position: center, right top;
    background-repeat: no-repeat;
  }
  body .help-card {
    overflow: hidden;
    padding-top: 205px;
    background-color: #061a29;
    background-image: linear-gradient(180deg, transparent 130px, #061a29 195px), url("assets/help-headset-background.png");
    background-size: 100% 100%, auto 190px;
    background-position: center, left top;
    background-repeat: no-repeat;
  }
}

/* Matching dimensions for the two menu calls to action. */
@media (max-width: 1100px) {
  .site-header .main-nav > a.nav-referral,
  .site-header .main-nav > a.nav-cta {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 48px;
    min-height: 48px;
    margin: 4px 0 0;
    padding: 0 14px;
    border-width: 1px;
    border-radius: 13px;
    font-size: 15px;
    line-height: 1.2;
  }
}

/* Keep decorative overflow inside the mobile viewport and the contact button visible. */
@media (max-width: 768px) {
  html, body { width: 100%; max-width: 100%; overflow-x: clip; }
  body main { min-width: 0; width: 100%; }
  body .section::before { width: 100%; }
  body > .whatsapp-float {
    position: fixed;
    left: auto;
    right: calc(12px + env(safe-area-inset-right, 0px));
    bottom: calc(32px + env(safe-area-inset-bottom, 0px));
    width: 56px;
    height: 56px;
    margin: 0;
    transform: none;
    z-index: 100;
  }
  body > .whatsapp-float svg { display: block; width: 34px; height: 34px; }
}

/* Keep every payment mark level and use Mastercard's red and orange colours. */
.plan-card .payment-block .payment-marks {
  display: flex;
  flex-flow: row nowrap;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-width: 0;
  gap: clamp(7px, 2vw, 13px);
}
.plan-card .payment-caption { display: block; width: 100%; white-space: nowrap; font-size: clamp(7px, .72vw, 9px); letter-spacing: .025em; }
.plan-card .payment-visa,
.plan-card .payment-mastercard,
.plan-card .payment-paypal { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; height: 20px; line-height: 1; white-space: nowrap; }
.plan-card .payment-mastercard i,
.plan-premium .payment-block .payment-mastercard i {
  display: block;
  width: 12px;
  height: 12px;
  flex: 0 0 12px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: #eb001b;
}
.plan-card .payment-mastercard i + i,
.plan-premium .payment-block .payment-mastercard i + i { margin-left: -5px; background: #f79e1b; mix-blend-mode: normal; }
.plan-card .payment-mastercard span { margin-left: 4px; }
.plan-card .payment-note { display: block; width: 100%; }

/* Final mobile plan layout and contained payment panel. */
@media (max-width: 768px) {
  body main #offres .shell { width: calc(100% - 32px); max-width: 460px; }
  body main #offres .plan-grid {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    width: 100%;
    max-width: 460px;
    gap: 18px;
    margin: 28px auto 0;
  }
  body main #offres .plan-grid > .plan-card {
    display: flex;
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    margin: 0;
    transform: none;
    text-align: center;
  }
  body main #offres .plan-card ul { width: 100%; text-align: left; }
  body main #offres .payment-block {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
    min-width: 0;
    padding: 12px 10px 9px;
    overflow: hidden;
  }
  body main #offres .payment-caption { white-space: normal; }
  body main #offres .payment-marks { flex-wrap: nowrap; gap: 10px; }
  body main #offres .payment-mastercard { font-size: 9px; }
}

/* Give the featured 12-month plan the premium pill shape, in its own colours. */
.plans .plan-featured > .popular-label {
  top: -13px;
  width: max-content;
  max-width: calc(100% - 18px);
  padding: 8px 13px;
  border: 1px solid #86ddffb3;
  border-radius: 999px;
  background: linear-gradient(100deg, #51c7ed, #9077ff 66%, #cf6ebe);
  box-shadow: 0 8px 24px #43b8e841;
  color: #071725;
  text-align: center;
  white-space: normal;
}
.plans .plan-featured > .popular-label {
  box-sizing: border-box;
  width: 192px;
  height: 39px;
  padding: 3px 10px;
  font-size: 9px;
  line-height: 1.12;
  text-wrap: balance;
}
.plans .plan-featured > .popular-label {
  box-sizing: border-box;
  width: 192px;
  height: 39px;
  padding: 8px 13px;
  font-size: 10px;
  line-height: 1;
  letter-spacing: .09em;
  white-space: nowrap;
}
/* Match the featured badge's full styling and natural size to the premium badge. */
.plans .plan-featured > .popular-label {
  position: absolute;
  top: -13px;
  left: 50%;
  width: max-content;
  height: auto;
  max-width: calc(100% - 18px);
  box-sizing: content-box;
  transform: translateX(-50%);
  padding: 8px 13px;
  border: 1px solid #86ddffb3;
  border-radius: 999px;
  background: linear-gradient(100deg, #51c7ed, #9077ff 66%, #cf6ebe);
  box-shadow: 0 8px 24px #43b8e841;
  color: #071725;
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .09em;
  line-height: normal;
  text-align: center;
  white-space: nowrap;
}

/* Keep a trial shortcut visible beside the mobile menu while retaining the menu CTA. */
.mobile-trial-cta { display: none; }
@media (max-width: 680px) {
  .site-header .nav-wrap { gap: 8px; }
  .site-header .mobile-trial-cta {
    display: inline-flex;
    flex: 0 0 auto;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 37px;
    padding: 0 11px;
    border: 1px solid #8adfff;
    border-radius: 999px;
    background: linear-gradient(105deg, #51c7ed, #9077ff 68%, #cf6ebe);
    color: #071725;
    font-size: 12px;
    font-weight: 850;
    white-space: nowrap;
  }
  .site-header .mobile-trial-cta span { font-size: 14px; }
}
@media (max-width: 360px) {
  .site-header .brand-logo-window { width: 120px; }
  .site-header .mobile-trial-cta { min-height: 35px; padding-inline: 8px; font-size: 11px; }
  .site-header .menu-toggle { width: 35px; height: 35px; flex: 0 0 35px; }
}