:root {
  color-scheme: dark;
  --background: #070708;
  --text: #f7f7f4;
  --muted: #b7b8c2;
  --brand: #ff3038;
  --focus: #ff7180;
  --surface: #111116;
  --surface-input: #0b0b0d;
  --border-default: #2b2b33;
  --border-divider: #ffffff24;
  --ease-out: cubic-bezier(.2, .7, .2, 1);
  --display: "MTS Wide", sans-serif;
  --page-gutter: clamp(20px, 5.5556vw, 80px);
  --section-space: clamp(64px, 7.7778vw, 112px);
  font-family: Onest, sans-serif;
  color: var(--text);
  background: var(--background);
  font-synthesis: none;
}
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-behavior: smooth; }
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-color: #81818c var(--background); }
}
@media (forced-colors: active) {
  html { scrollbar-color: auto; }
}
body, h1, h2, h3, h4, p, figure, dl, dd { margin: 0; }
button, a { -webkit-tap-highlight-color: transparent; }
button { font: inherit; color: inherit; border: 0; padding: 0; background: none; }
a { color: inherit; text-decoration: none; }
button, summary { cursor: pointer; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
img { display: block; }
h1, h2, h3, h4 { font-family: var(--display); font-weight: 700; overflow-wrap: anywhere; }
h2 { font-size: clamp(30px, 3.75vw, 54px); line-height: 1.12; text-wrap: balance; }
.landing { max-width: 1440px; margin-inline: auto; }
.section { position: relative; padding: var(--section-space) var(--page-gutter); scroll-margin-top: 24px; }
.skip-link { position: fixed; top: 12px; left: 12px; padding: 14px; background: #a00510; z-index: 10; transform: translateY(-150%); }
.skip-link:focus { transform: none; }
.button { position: relative; isolation: isolate; display: inline-flex; justify-content: center; align-items: center; gap: 8px; width: 196px; max-width: 100%; min-height: 44px; border: 1px solid #ff6b80b8; border-radius: 18px; background: linear-gradient(90deg,#570408,#b8050e 55%,#f51729); box-shadow: inset 0 1px #ffadb838,0 8px 18px #ff14242e; font-size: 18px; font-weight: 600; line-height: 1.222223; padding: 10px 14px; transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.button::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; background: linear-gradient(110deg, #ff839914, #ffb5c533); opacity: 0; transition: opacity 180ms ease; pointer-events: none; }
@media (hover: hover) { .button:hover::before { opacity: 1; } }
.button:active::before { opacity: .45; }
.button .chevron { transition: transform 180ms ease; }
@media (hover: hover) { .button:hover .chevron { transform: translateX(2px); } }
.button--secondary { background: linear-gradient(90deg, #111116, #202026 55%, #3a3a42); border-color: #f7f7f447; box-shadow: inset 0 1px #ffffff24,0 8px 18px #0000003d; }
.chevron { flex: 0 0 20px; }

/* Hero: source frame 1412 × 1237, inset 14 px. */
.hero { position: relative; display: flow-root; margin-inline: clamp(8px, .9722vw, 14px); padding-top: 24px; overflow: clip; border-radius: clamp(24px, 4.0972vw, 59px) 0 clamp(40px, 6.0417vw, 87px) clamp(40px, 6.0417vw, 87px); }
.hero-atmosphere { position: absolute; inset: 0; overflow: clip; border-radius: inherit; pointer-events: none; }
.hero-pixels { position: absolute; top: -125px; }
.hero-pixels--one { left: -103px; }
.hero-pixels--two { left: -124px; }
.hero-halo { position: absolute; left: -300px; top: 437px; }
.hero-signals { position: absolute; left: 0; top: 650px; }
.hero-ghost { position: absolute; left: 160px; top: 900px; width: 1120px; height: 240px; font: 600 230px Montserrat,sans-serif; letter-spacing: -12px; color: #ff1f260d; text-align: center; }
.site-header { position: relative; z-index: 3; margin: 0 clamp(16px, 4.5833vw, 66px); min-height: 64px; display: flex; gap: 20px; align-items: center; justify-content: space-between; }
.brand { display: flex; width: 160px; flex-shrink: 0; align-items: center; gap: 10px; min-height: 48px; font-size: 16px; font-weight: 600; letter-spacing: .16px; }
.navigation { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(16px, 2.0833vw, 30px); font-size: 14px; font-weight: 500; line-height: 1.428572; }
.navigation a, .navigation button { min-width: 44px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--muted); border-radius: 8px; }
.navigation a[aria-current] { color: var(--text); }
.navigation-panel { min-width: 0; }
.login { width: 160px; }
.menu-toggle { display: none; }
.hero-content { position: relative; width: min(1120px, calc(100% - 32px)); margin: clamp(56px, 5vw, 72px) auto 0; text-align: center; }
.hero h1 { font-size: clamp(32px, calc(14.8571px + 5.3571vw), 92px); line-height: 1.043478; letter-spacing: -.037em; }
.hero h1 span { display: block; }
.hero-mobile-break { display: none; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: clamp(12px, 1.3889vw, 20px); min-height: 56px; margin-top: clamp(15px, calc(33px - 1.25vw), 28px); }
.hero-media { --media-border: clamp(6px, .6944vw, 10px); --media-radius: clamp(28px, 3.6806vw, 53px); position: relative; width: min(1148px, calc(100% - 32px)); margin: clamp(19px, calc(56.286px - 2.5893vw), 48px) auto clamp(-52px, calc(116px - 11.6667vw), 32px); border: var(--media-border) solid #ffffff1a; border-radius: var(--media-radius); box-shadow: 0 0 62px -18px #ff080f4d,0 36px 90px -12px #0000009e; }
.hero-media > img { width: 100%; height: auto; border-radius: calc(var(--media-radius) - var(--media-border)); }

/* Benefits. Decorative assets retain the source crop and rotation. */
.benefits { background: var(--background); padding-bottom: 64px; }
.benefits h2 { color: #faf7fa; }
.benefit-grid { display: grid; grid-template-columns: 610fr 650fr; gap: 20px; margin-top: clamp(32px, 4.1667vw, 60px); }
.benefit-stack { display: grid; gap: 20px; }
.benefit { container-type: inline-size; position: relative; min-height: 200px; border-radius: 32px; overflow: clip; isolation: isolate; box-shadow: 0 20px 34px -10px #47000585; }
.benefit--fast { min-height: 420px; }
.benefit-art { position: absolute; display: grid; place-items: center; pointer-events: none; }
.benefit--fast .benefit-art { width: 139.1549cqw; height: 82.2808cqw; right: -15.2213cqw; bottom: -30.8049cqw; }
.benefit--fast .benefit-art img { width: 133.9334cqw; height: 72.0300cqw; object-fit: cover; transform: rotate(4.48deg); }
.benefit--limits .benefit-art { width: 101.8043cqw; height: 101.8043cqw; right: -25.6323cqw; bottom: -49.4785cqw; }
.benefit--limits .benefit-art img { width: 98.2392cqw; height: 98.2392cqw; object-fit: cover; transform: rotate(-2.12deg) scaleY(-1); }
.benefit--upgrade .benefit-art { width: 61.3660cqw; height: 61.3660cqw; right: -11.52cqw; bottom: -24.9046cqw; }
.benefit--upgrade .benefit-art img { width: 54.4615cqw; height: 54.4615cqw; object-fit: cover; transform: rotate(7.82deg); }
.benefit-copy { position: relative; margin: clamp(24px, 2.1528vw, 31px); }
.benefit-copy h3 { font-size: clamp(23px, 2vw, 29px); line-height: 1.4; color: #faf7fa; text-wrap: balance; }
.benefit-copy p { margin-top: 16px; font-size: 14px; font-weight: 500; line-height: 1.5; color: #e5d9de; max-width: 520px; }
.benefit--fast h3 { line-height: 1.2; }
.benefit--fast p { max-width: 390px; font-size: 17px; font-weight: 400; line-height: 1.53; }
.benefit--upgrade p { max-width: 430px; }
.benefit-ghost, .benefit-extra-ghost { position: absolute; font: 700 49px/.85 var(--display); color: transparent; -webkit-text-stroke: .4px #9999992e; opacity: .58; white-space: nowrap; pointer-events: none; }
.benefit--fast .benefit-ghost { left: -20px; top: -11px; }
.benefit--limits .benefit-ghost { left: -165px; top: -1px; }
.benefit--upgrade .benefit-ghost { left: -242px; top: -1px; }
.benefit-extra-ghost { left: 41px; top: -1px; }

.methods, .pricing, .faq { padding-block: 64px; }
.methods-header { padding-bottom: 48px; border-bottom: 1px solid #ffffff24; }
.methods-header h2 { font-size: clamp(30px, 4.0278vw, 58px); line-height: 1.10345; }
.methods-header p { width: 760px; max-width: 100%; margin-top: 24px; font-size: 17px; line-height: 1.53; color: var(--muted); }
.target-grid { display: grid; grid-template-columns: minmax(0, 1.95fr) minmax(0, 1fr); gap: 24px; margin-top: clamp(32px, 3.8889vw, 56px); }
.target-stack { display: grid; gap: 24px; align-content: start; }
.target { container-type: inline-size; position: relative; min-height: 225px; padding-bottom: 24px; overflow: clip; border-radius: 30px; isolation: isolate; box-shadow: 0 18px 40px -14px #47000657; }
.target--network { min-height: 474px; box-shadow: 0 28px 58px -20px #61000970; }
.target-copy { position: relative; margin: 27px 31px 0; }
.target--network .target-copy { margin-top: 29px; }
.eyebrow { font-size: 11px; font-weight: 600; line-height: 1.272728; letter-spacing: .99px; color: #ff7080; }
.target--network .eyebrow { color: #ff6b7a; }
.target--game .eyebrow { color: #ff8547; }
.target h3 { font-size: clamp(32px, 2.8vw, 40px); line-height: 1.4; margin-top: 10px; }
.target--network h3 { margin-top: 8px; }
.target-description { margin-top: 4px; max-width: 330px; font-size: 14px; font-weight: 500; line-height: 1.5; color: #d6ccd6; }
.target--network .target-description { max-width: 520px; }
.target--game .target-description { color: #dbc9c7; }
.target-pixels { position: absolute; mix-blend-mode: screen; pointer-events: none; }
.target--game .target-pixels { left: -48.64px; top: -79px; }
.target--web .target-pixels { left: -18.13px; top: -139px; }
.target-orbit { position: absolute; width: 933.702px; height: 629.207px; top: 100px; left: -177px; display: grid; place-items: center; mix-blend-mode: overlay; pointer-events: none; }
.target-orbit img { transform: rotate(172.15deg) scaleY(-1); }
.target-number { position: absolute; top: 9px; right: 31px; width: 96px; font: 700 58px/64px var(--display); text-align: right; opacity: .07; color: transparent; background: linear-gradient(transparent,white); background-clip: text; }
.target--web .target-number { width: 96px; }
.method-rail { position: relative; margin: 23px 31px 0; display: flex; flex-wrap: wrap; gap: 10px; }
.method-rail span { flex: 1; min-height: 36px; padding: 6px 10px; display: flex; justify-content: center; align-items: center; border: 1px solid #ffe5eb21; border-radius: 999px; background: #05020466; backdrop-filter: blur(5px); color: #fff6f7; font-size: 16px; font-weight: 600; line-height: 1.375; letter-spacing: .16px; }
.target--web .method-rail { display: grid; grid-template-columns: repeat(auto-fit, minmax(112px, 1fr)); }
.hologram { position: absolute; width: 1424.341px; height: 1424.341px; left: calc(50% - 714.999px); top: calc(50% - 207px); display: grid; place-items: center; pointer-events: none; }
.hologram img { width: 1298.319px; height: 1298.319px; object-fit: cover; transform: rotate(5.87deg); }
.hologram--dodge { mix-blend-mode: color-dodge; }
.hologram--soft { mix-blend-mode: soft-light; }
.network-orbit { position: absolute; display: grid; place-items: center; mix-blend-mode: overlay; pointer-events: none; }
.network-orbit--top { left: -446px; top: -873px; width: 2307.364px; height: 1695.011px; }
.network-orbit--top img { transform: rotate(-14.25deg) scaleY(-1); }
.network-orbit--bottom { left: -1025.18px; top: 290.28px; width: 2133.72px; height: 1334.459px; }
.network-orbit--bottom img { transform: rotate(-3.13deg) scaleY(-1); }
.network-pixels { position: absolute; left: -43.88px; top: -53px; mix-blend-mode: screen; pointer-events: none; }
.network-number { position: absolute; top: -5px; right: 31px; font: 600 150px/160px Montserrat,sans-serif; opacity: .06; background: linear-gradient(transparent,white); color: transparent; background-clip: text; pointer-events: none; }
.protocols { position: relative; margin: 36px 31px 0; }
.protocol { position: relative; min-height: 104px; padding: 17px; border: 1px solid #ffe0e529; border-radius: 16px; background: #0903054d; backdrop-filter: blur(12px); overflow: hidden; }
.protocol--tcp { min-height: 146px; }
.protocol-label { position: relative; color: #ff5463; font-size: 11px; font-weight: 600; line-height: 1.272728; letter-spacing: .99px; }
.protocol-label span { color: #ffe5eb94; }
.method-chips { position: relative; display: flex; flex-wrap: wrap; align-content: start; gap: 8px; margin-top: 10px; }
.protocol--tcp .method-chips { max-width: 428px; }
.method-chip { display: inline-flex; align-items: center; justify-content: center; max-width: 100%; min-height: 34px; padding: 6px 10px; border-radius: 999px; border: 1px solid #ffe5eb21; background: #05020466; backdrop-filter: blur(7px); font-size: 14px; font-weight: 500; line-height: 1.428572; color: #f7f2f2eb; overflow-wrap: anywhere; text-align: center; }
.method-chip--premium, .method-rail .method-chip--premium { color: #ff5463f5; border-color: #ff54634d; background: #0502047a; }
.protocol-rail { display: grid; grid-template-columns: minmax(0,146fr) minmax(0,318fr) minmax(0,278fr); gap: 12px; margin-top: 12px; }
.protocol-pixels { position: absolute; pointer-events: none; }
.protocol--tcp .protocol-pixels { left: 273px; top: 51px; }
.protocol--amp .protocol-pixels { left: -75px; top: 41px; }
.protocol--udp .protocol-pixels { left: -25px; top: 39px; }
.protocol--special .protocol-pixels { left: -67px; top: 37px; }

.pricing { overflow: clip; }
.pricing-intro { position: relative; display: grid; grid-template-columns: minmax(0, 710fr) minmax(0, 470fr); gap: clamp(24px, 5.5556vw, 80px); align-items: center; }
.pricing-intro h2 { color: #f7f5f6; }
.pricing-intro p { font-size: 17px; line-height: 1.53; color: var(--muted); }
.plan-group { position: relative; margin-top: clamp(22px, calc(58px - 2.5vw), 40px); }
.plan-group + .plan-group { margin-top: 66px; }
.plan-group-header { display: grid; grid-template-columns: 1fr 3fr; align-items: center; min-height: 79px; padding-bottom: 18px; border-bottom: 1px solid #2b2426; }
.plan-group-header h3 { font-size: clamp(30px, 2.7778vw, 40px); line-height: 1.5; color: #f7f5f6; }
.plan-group-header p { font-size: 17px; line-height: 1.53; color: var(--muted); }
.plan-grid { --plan-columns: 4; display: flex; flex-wrap: wrap; justify-content: center; gap: 24px; margin-top: clamp(28px, 2.7083vw, 39px); }
.plan { width: calc((100% - (var(--plan-columns) - 1) * 24px) / var(--plan-columns)); position: relative; min-height: 446px; border-radius: 34.5px; overflow: clip; isolation: isolate; display: flex; }
/* A single stroke follows the source radius; highlights stay above artwork. */
.benefit::before, .target::before, .plan::before {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: 2;
}
.benefit::before { border: 1px solid #dbc7cc42; box-shadow: inset 0 1px 2px #ffbfc71a; }
.target::before { border: 1px solid #ffc7d147; box-shadow: inset 0 1px 2px #ffc7d114; }
.target--network::before { border-color: #ffb8c23d; box-shadow: inset 0 1px 2px #ffc2cc14; }
.target--game::before { border-color: #ff472e4d; box-shadow: inset 0 1px 2px #ffb89417; }
.plan::before { border: 1.75px solid #ffffff29; }
@supports (mask-composite: exclude) {
  .plan::before {
    border: 0; padding: 1.75px;
    /* Follow the surface light vertically, with the red source at the upper right. */
    background: radial-gradient(ellipse at 100% 0, #ff536761, transparent 55%), linear-gradient(180deg, #ffffff29 0%, #ffffff29 36%, #ff536761 82%, #fff7fa 100%);
    mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
    mask-repeat: no-repeat; mask-composite: exclude;
  }
}
.benefit-veil { position: absolute; inset: 0; border-radius: inherit; pointer-events: none; }
.target-veil { position: absolute; inset: 0; pointer-events: none; }
.plan-content { position: relative; display: flex; flex: 1; flex-direction: column; min-width: 0; margin: 52px clamp(20px, 1.9444vw, 28px) 33px; }
.plan h4 { display: flex; align-items: baseline; gap: 14px; min-width: 0; font-size: 28px; line-height: 1.25; color: white; overflow-wrap: anywhere; padding-left: 4px; }
.plan h4 span { flex: 1 1 0; min-width: 0; overflow: hidden; white-space: nowrap; -webkit-text-stroke: 1px #ffffff80; color: transparent; opacity: .3; }
.plan--long h4 { font-size: 26px; }
.plan-metrics { margin: 33px 4px 40.294px; display: flex; flex-direction: column; gap: 34px; font: 400 16px/1.375 var(--display); font-variant-numeric: tabular-nums; color: #ffffffcc; }
.metric { position: relative; display: flex; justify-content: space-between; align-items: baseline; gap: 8px; min-height: 22px; }
.metric dt { min-width: 0; overflow-wrap: anywhere; }
.metric:not(:last-child)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -17px; height: 1px; background: #ffffff29; }
.metric dd { flex-shrink: 0; }
.plan-price { position: relative; isolation: isolate; width: 100%; min-height: 64.706px; margin-top: auto; padding: 14px 8px; display: flex; align-items: center; justify-content: center; border-radius: 26.471px; background: #000; box-shadow: 0 5.882px 26.47px #00000080; font: 400 16px/1.375 var(--display); color: white; transition: transform 180ms var(--ease-out), opacity 180ms var(--ease-out); }
.plan-orbit { position: absolute; left: -10px; bottom: 0; width: 202px; height: 183px; overflow: clip; pointer-events: none; }
.plan-orbit img { position: absolute; top: 0; left: -178.568px; mix-blend-mode: overlay; }
.arc { position: absolute; pointer-events: none; mix-blend-mode: screen; filter: blur(1.6px); background: linear-gradient(90deg,#ff051400,#ff0514b8 22%,#ff051485 68%,#ff051400); mask-image: url('./assets/211-2-ArcRedFalloff.webp'); mask-repeat: no-repeat; }
.arc--basic { width: 1220px; height: 404px; left: 250px; top: 856px; mask-size: 1242.388px 477.726px; opacity: .06; }
.arc--premium { width: 1200px; height: 450px; left: 250px; top: 2284px; mask-image: url('./assets/premium-arc.webp'); mask-size: 1225.234px 522.419px; opacity: .05; }

.faq { background: var(--background); overflow: clip; }
.faq-layout { display: grid; grid-template-columns: minmax(0, 400fr) minmax(0, 760fr); justify-content: space-between; gap: clamp(32px, 4.1667vw, 60px); position: relative; }
.faq-intro>p { margin-top: 20px; width: 350px; max-width: 100%; color: var(--muted); font-size: 17px; line-height: 1.53; }
.faq-intro hr { height: 1px; margin: 20px 0; border: 0; background: #ffffff24; }
.support-link { min-height: 44px; display: inline-flex; gap: 8px; align-items: center; padding: 0 12px; border-radius: 4px; font-size: 14px; font-weight: 500; line-height: 1.428572; }
.faq-item { border-bottom: 1px solid #ffffff24; }
.faq-item summary { display: flex; justify-content: space-between; align-items: center; gap: 16px; width: 100%; min-height: 77px; padding: 28px 0 27px; list-style: none; text-align: left; font-size: 18px; font-weight: 600; line-height: 1.4; transition: color 180ms var(--ease-out); }
.faq-item summary:focus-visible { outline-offset: -2px; border-radius: 4px; }
.faq-item[open] summary { min-height: 50px; padding-bottom: 0; }
.faq-item summary::-webkit-details-marker { display: none; }
@media (hover: hover) { .faq-item summary:hover { color: #ffb5c0; } }
.faq-symbol { flex: 0 0 20px; text-align: center; color: var(--brand); }
.faq-symbol::after { content: "+"; }
.faq-item[open] .faq-symbol::after { content: "−"; }
.faq-answer { display: flow-root; }
.faq-answer a { color: var(--text); text-decoration: underline; text-underline-offset: 3px; }
.faq-answer p { margin-top: 16px; padding-bottom: 29px; width: 650px; max-width: calc(100% - 28px); font-size: 17px; line-height: 1.53; color: var(--muted); }
.arc--faq { width: 1471.135px; height: 525.441px; left: -86.567px; top: 465.448px; transform: rotate(6deg); mask-size: 1255.546px 529.312px; opacity: .09; filter: blur(1.25px); background: none; mask-image: none; }
.arc--faq::before { content: ""; position: absolute; left: 0; top: 0; width: 1220px; height: 404px; background: linear-gradient(90deg,#ff051400,#ff0514b8 22%,#ff051485 68%,#ff051400); mask: url('./assets/211-2-ArcRedFalloff.webp') 0 0 / 1255.546px 529.312px no-repeat; }
.ready { padding-top: clamp(64px, 7.7778vw, 112px); padding-bottom: 26px; overflow: clip; }
.ready-wash { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; }
.ready-pattern { position: absolute; top: 12px; left: 46px; white-space: nowrap; font-size: 88px; font-weight: 800; line-height: .84; letter-spacing: -1.76px; color: transparent; -webkit-text-stroke: .6px #bc62713d; opacity: .62; filter: blur(.2px); mix-blend-mode: screen; mask-image: url('./assets/90-432-PanicOutlineField.svg'); mask-size: 1440px 660px; mask-position: -46px -12px; mask-repeat: no-repeat; }
.ready-content { position: relative; display: flex; flex-direction: column; align-items: center; gap: 32px; }
.ready h2 { text-align: center; max-width: 1018px; }
.ready .button { width: 220px; }
.site-footer { position: relative; margin-top: clamp(64px, 8.8889vw, 128px); min-height: 96px; padding-block: 24px; display: flex; flex-wrap: wrap; gap: 20px; justify-content: space-between; align-items: center; border-top: 1px solid #ffffff1f; font-size: 14px; font-weight: 500; line-height: 1.428572; }
.site-footer nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 19px; }
.footer-link { display: inline-flex; align-items: center; justify-content: center; color: var(--muted); min-width: 44px; min-height: 44px; }


.plans-toggle { position: relative; isolation: isolate; display: flex; align-items: center; justify-content: center; gap: 12px; margin: 24px auto 0; min-height: 44px; padding: 10px 18px; border: 1px solid #f7f7f447; border-radius: 18px; background: linear-gradient(90deg, #111116, #202026 55%, #3a3a42); box-shadow: inset 0 1px #ffffff24, 0 8px 18px #0000003d; color: var(--text); font-size: 14px; font-weight: 600; line-height: 22px; transition: transform 180ms ease, opacity 180ms ease; }
.plans-toggle span { color: inherit; }
.plan-disclosure, .plans-extra, .plans-extra-content { display: contents; }
.plans-extra { overflow-anchor: none; }
.plans-extra.is-animating { overflow: clip; }

/* Column changes preserve readable type instead of shrinking card content. */
@media (width < 1360px) {
  .plan-grid { --plan-columns: 3; }
}
@media (width < 1200px) {
  .benefit-grid, .target-grid { grid-template-columns: minmax(0, 1fr); }
  .benefit-stack, .target-stack { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .benefit--fast { min-height: 360px; }
  .benefit--fast .benefit-art { width: 848.845px; height: 501.913px; right: -60px; bottom: -188px; }
  .benefit--fast .benefit-art img { width: 816.994px; height: 439.383px; }
  .benefit-stack .benefit { min-height: 300px; }
  .benefit-copy h3 { font-size: clamp(23px, 2.5vw, 29px); line-height: 1.2; }
  .benefit--fast .benefit-copy { max-width: 460px; padding-bottom: 160px; }
  .benefit-stack .benefit-copy { padding-bottom: 100px; }
  .benefit--upgrade .benefit-art { width: 90cqw; height: 90cqw; right: -10cqw; bottom: -22cqw; }
  .benefit--upgrade .benefit-art img { width: 80cqw; height: 80cqw; }
  .benefit--limits .benefit-art { right: -8cqw; bottom: -40cqw; }
}
@media (width < 1000px) {
  .benefits, .methods, .pricing { padding-bottom: 40px; }
  .methods, .pricing, .faq { padding-top: 40px; }
  .plan-grid { --plan-columns: 2; }
  .pricing-intro, .plan-group-header, .faq-layout { grid-template-columns: minmax(0, 1fr); gap: 20px; }
  .faq-intro { max-width: 560px; }
  .faq-intro > p { width: auto; }
  .faq-layout { gap: 32px; }
  .plan-group-header { gap: 12px; }
}
/* A disclosure panel, not a second row of header links. Without JS links stay in flow. */
@media (width < 960px) {
  .site-header { gap: 12px; flex-wrap: wrap; }
  .brand { width: auto; }
  .login { width: clamp(82px, 14vw, 120px); font-size: 16px; }
  .menu-toggle { margin-left: auto; flex: 0 0 44px; min-height: 44px; border-radius: 8px; color: var(--muted); }
  .menu-ready .menu-toggle { display: block; }
  .navigation-panel { order: 3; width: 100%; }
  .menu-ready .navigation-panel { position: absolute; top: calc(100% + 8px); inset-inline: 0; padding: 8px; border: 1px solid var(--border-default); border-radius: 18px; background: var(--surface); box-shadow: inset 0 1px #ffffff14, 0 16px 36px #00000066; max-height: calc(100dvh - 112px); overflow-y: auto; overscroll-behavior: contain; }
  .navigation { flex-direction: column; align-items: stretch; gap: 4px; }
  .navigation a, .navigation button { justify-content: flex-start; padding-inline: 12px; }
  .navigation a[aria-current] { background: #ffffff0a; box-shadow: inset 2px 0 var(--brand); }
  .navigation a:focus-visible, .navigation button:focus-visible { outline-offset: -2px; }
}
@media (width < 760px) {
  .benefit-stack, .target-stack { grid-template-columns: minmax(0, 1fr); }
  /* Cap illustration scale at a 360px card so wide single-column cards stay readable. */
  .benefit { --art-unit: min(1cqw, 3.6px); }
  .benefit-stack { display: contents; }
  .benefit-grid { grid-auto-rows: 1fr; }
  .benefit--fast { min-height: 300px; }
  .benefit--fast .benefit-copy { max-width: none; }
  .benefit--fast .benefit-art { width: calc(139.1549 * var(--art-unit)); height: calc(82.2808 * var(--art-unit)); right: calc(-15.2213 * var(--art-unit)); bottom: calc(-30.8049 * var(--art-unit)); }
  .benefit--fast .benefit-art img { width: calc(133.9334 * var(--art-unit)); height: calc(72.0300 * var(--art-unit)); }
  .benefit--fast .benefit-copy, .benefit-stack .benefit-copy { padding-bottom: clamp(110px, 23vw, 150px); }
  .benefit--upgrade .benefit-art { width: calc(70 * var(--art-unit)); height: calc(70 * var(--art-unit)); right: calc(-6 * var(--art-unit)); bottom: calc(-16 * var(--art-unit)); }
  .benefit--upgrade .benefit-art img { width: calc(62 * var(--art-unit)); height: calc(62 * var(--art-unit)); }
  .benefit--limits .benefit-art { width: calc(101.8043 * var(--art-unit)); height: calc(101.8043 * var(--art-unit)); right: calc(-8 * var(--art-unit)); bottom: calc(-36 * var(--art-unit)); }
  .benefit--limits .benefit-art img { width: calc(98.2392 * var(--art-unit)); height: calc(98.2392 * var(--art-unit)); }
  .benefit-copy p, .benefit--fast p { max-width: none; font-size: 16px; font-weight: 400; line-height: 1.5; }
  .benefit-copy h3 { font-size: clamp(23px, 4.2vw, 29px); }
  .target-copy, .protocols, .method-rail { margin-inline: 24px; }
  .protocols { margin-top: 28px; }
  .protocol { padding: 14px; }
  .target--network { min-height: 0; }
  .methods-header { padding-bottom: 32px; }
  .methods-header p, .pricing-intro p, .plan-group-header p, .faq-intro > p, .faq-answer p { font-size: 16px; line-height: 1.5; }
  .target-description { font-size: 16px; font-weight: 400; }
  .faq-item summary { font-size: 16px; line-height: 1.5; }
  .site-footer { justify-content: center; text-align: center; gap: 12px; }
}
@media (width < 680px) {
  .hero h1 { line-height: 1.08; }
  .hero h1 .hero-ending, .hero h1 .hero-last { display: inline; }
  .hero-mobile-break { display: initial; }
  .plans-ready .plan-disclosure { display: block; width: 100%; }
  .plans-ready .plans-extra { display: block; }
  .plans-ready .plans-extra-content { display: flex; flex-direction: column; align-items: center; gap: 24px; padding-top: 24px; }
  .plans-ready .plans-toggle { margin: 0 auto; min-height: 48px; }

  .plan-grid { --plan-columns: 1; }
  .plan { max-width: 440px; }
  .plan-content { margin-inline: 24px; }
  .plan-group + .plan-group { margin-top: 56px; }
  .hero-actions { padding-inline: 4px; }
  .hero-actions .button { min-height: 48px; flex: 1 1 180px; max-width: 220px; font-size: 16px; }
  .hero-pixels { top: -190px; left: -600px; }
  .hero-halo { top: 140px; left: -830px; }
  .hero-signals { top: 310px; left: -360px; }
  .hero-ghost { display: none; }
}
@media (width < 480px) {
  .hero-actions { flex-direction: column; }
  .hero-actions .button { flex: none; width: 100%; max-width: 320px; }
}
@container (width < 750px) {
  .protocol-rail { grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); }
  .protocol--special { grid-column: 1 / -1; }
}
@container (width < 460px) {
  .protocol-rail { grid-template-columns: minmax(0, 1fr); }
  .protocol--special { grid-column: auto; }
  .protocol-rail .protocol { min-height: 93px; }
  .method-rail { gap: 8px; }
  .method-rail span { font-size: 14px; padding-inline: 8px; }
  .hologram { width: 172cqw; height: 172cqw; left: -36cqw; top: auto; bottom: -70cqw; }
  .hologram img { width: 157cqw; height: 157cqw; }
}


.menu-icon { position: relative; display: block; width: 20px; height: 16px; margin: auto; }
.menu-icon::before, .menu-icon::after { content: ""; position: absolute; left: 0; top: 4px; width: 20px; height: 1.5px; border-radius: 1px; background: currentColor; transition: transform 180ms ease; }
.menu-icon::after { top: 11px; }
.menu-toggle[aria-expanded="true"] .menu-icon::before { transform: translateY(3.5px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-icon::after { transform: translateY(-3.5px) rotate(-45deg); }
.plan-price::before, .plans-toggle::before { content: ""; position: absolute; inset: 0; z-index: -1; border-radius: inherit; pointer-events: none; background: linear-gradient(110deg, #ffffff08, #ffffff26); opacity: 0; transition: opacity 180ms ease; }
.navigation a, .navigation button, .menu-toggle, .footer-link, .support-link { transition: color 180ms ease, transform 180ms ease; }
@media (hover: hover) {
  .plan-price:hover::before, .plans-toggle:hover::before { opacity: 1; }
  .navigation a:hover, .navigation button:hover, .menu-toggle:hover, .footer-link:hover, .support-link:hover { color: var(--text); }
}
.button:active, .plan-price:active, .plans-toggle:active, .menu-toggle:active, .navigation button:active, .footer-link:active, .support-link:active, .is-pressed { transform: translateY(1px); transition-duration: 120ms; }
.button.is-pressed::before, .plan-price:active::before, .plan-price.is-pressed::before, .plans-toggle:active::before, .plans-toggle.is-pressed::before { opacity: .65; }
.navigation a:active, .navigation button:active, .navigation .is-pressed { color: var(--brand); opacity: .88; }
.navigation a:focus-visible, .navigation button:focus-visible, .menu-toggle:focus-visible, .button:focus-visible, .plans-toggle:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.button:active, .button.is-pressed { opacity: .88; }
.faq-item summary:active { color: var(--brand); transition-duration: 120ms; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .button, .button::before, .button .chevron, .plan-price, .plan-price::before, .plans-toggle, .plans-toggle::before, .faq-item summary, .menu-icon::before, .menu-icon::after, .navigation a, .navigation button, .menu-toggle, .footer-link, .support-link { transition: none; }
  .button:active, .plan-price:active, .plans-toggle:active, .menu-toggle:active, .navigation button:active, .footer-link:active, .support-link:active, .is-pressed { transform: none; }
}