/* =====================================================================
   RaconCodes — m5.css  (mobile-first conversion layer, loads LAST)
   Goals: headline + CTA on first screen, thumb-friendly targets (>=44px),
   readable type (>=12px), compact cards, swipeable galleries, shorter page.
   ===================================================================== */

/* ---------- global safety ---------- */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scroll-padding-top:76px}
html body{overflow-x:hidden;-webkit-tap-highlight-color:transparent}
html body a,html body button{touch-action:manipulation}
html body img,html body video,html body iframe{max-width:100%}
html body :focus-visible{outline:3px solid #ffd457 !important;outline-offset:2px}

@media(max-width:900px){
  /* room for the sticky contact bar + iPhone home indicator */
  html body{padding-bottom:calc(76px + env(safe-area-inset-bottom)) !important}
  /* the round WhatsApp button duplicates the bottom bar on phones */
  html body .wa-float{display:none !important}
  html body .to-top{bottom:calc(88px + env(safe-area-inset-bottom)) !important;right:12px !important;width:44px !important;height:44px !important}
}

/* ---------- type scale: nothing under 12px on phones ---------- */
@media(max-width:900px){
  html body p,html body li,html body small,html body span,html body a,html body label,html body td{font-size:max(1em,12px)}
  html body .eyebrow,html body .k,html body .plan-badge,html body .bear-tile small,
  html body .sv-topbar-tag,html body .footer-label,html body .stat small,html body [class*="-tag"],html body [class*="badge"] small{font-size:12px !important;letter-spacing:.1em !important}
  html body .hero-copy,html body .sub,html body .section-heading p,html body .ch-head p{font-size:15.5px !important;line-height:1.6 !important}
  html body h2{font-size:clamp(26px,7.4vw,34px) !important;line-height:1.12 !important;letter-spacing:-.01em}
  /* fix "StreamersAround" — <br> is hidden by a global rule, restore it */
  html body h2 br{display:block !important;content:""}
}

/* ---------- top live-servers strip: slimmer, tappable ---------- */
@media(max-width:900px){
}

/* ---------- header: calm, solid, one clear action ---------- */
@media(max-width:900px){
  html body .site-header{margin:0 !important;border-radius:0 !important;min-height:60px !important;padding:8px 12px !important;
    background:rgb(18 4 30 / .94) !important;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
    border-bottom:1px solid rgb(255 255 255 / .08) !important;box-shadow:0 6px 24px rgb(0 0 0 / .35) !important}
  html body .brand-badge,html body .brand-mark{width:40px !important;height:40px !important;border-radius:12px !important;object-fit:cover}
  html body .brand small{display:none !important}
  html body .brand span{font-size:20px !important}
  html body .m-servers{min-height:44px !important;display:inline-flex;align-items:center;font-size:13px !important;font-weight:700 !important}
  html body #menuToggle,html body .menu-toggle{width:44px !important;height:44px !important}
}

/* ---------- HERO: shrink the art so headline + Free Trial are above the fold ---------- */
@media(max-width:900px){
  html body .hero-scene{width:min(58vw,250px) !important;margin:76px auto 0 !important}
  html body .price-badge{top:calc(76px + min(58vw,250px) - 92px) !important;left:max(8px,calc(50% - 176px)) !important;transform:rotate(-6deg) scale(.68) !important;transform-origin:left top}
  html body .hero .hero-content,html body.has-sv-topbar .hero .hero-content{padding:22px 16px 0 !important}
  html body .hero .eyebrow{display:inline-flex;margin:0 0 4px !important}
  html body .hero h1{font-size:clamp(34px,10vw,44px) !important;margin-top:8px !important}
  html body .hero-copy{margin-top:10px !important;font-size:15px !important;}
  /* one dominant button, two secondary underneath */
  html body .hero-actions{margin-top:16px !important;gap:10px !important}
  html body .hero-actions .trial-cta{min-height:56px !important;font-size:16px !important;font-weight:800 !important;border-radius:16px !important;
    box-shadow:0 10px 28px rgb(255 47 160 / .45) !important;animation:m5pulse 2.4s ease-in-out infinite}
  html body .hero-actions a{min-height:50px !important;border-radius:14px !important}
  html body .hero-points{margin-top:14px !important}
  html body .scroll-hint,html body .hero-dots{display:none !important}
}
@keyframes m5pulse{0%,100%{box-shadow:0 10px 28px rgb(255 47 160 / .45)}50%{box-shadow:0 10px 38px rgb(255 47 160 / .8)}}
@media(prefers-reduced-motion:reduce){html body .hero-actions .trial-cta{animation:none !important}}

/* ---------- 4 feature tiles: compact 2×2 cards ---------- */
@media(max-width:900px){
  html body .bear-tiles-inner{gap:10px !important;padding:12px !important}
  html body .bear-tile{padding:14px !important;border:1px solid rgb(255 255 255 / .09) !important;border-radius:16px !important;background:rgb(255 255 255 / .04) !important;min-height:112px}
  html body .bear-tile b,html body .bear-tile strong{font-size:16px !important}
  html body .bear-tile p,html body .bear-tile small,html body .bear-tile span:not(.bear-tile-icon){font-size:12.5px !important;line-height:1.4 !important;color:#cdbbe3 !important}
}

/* ---------- section rhythm: less dead space ---------- */
@media(max-width:900px){
  html body section{scroll-margin-top:72px}
  html body .plans-section,html body .ch-home,html body .watch-section,html body .about-section,
  html body .testimonials-section,html body .cp-home,html body .sv-wall{padding-top:36px !important;padding-bottom:36px !important}
  html body .section-heading,html body .ch-head,html body .watch-head,html body .testimonials-heading{margin-bottom:18px !important}
}

/* ---------- PLAN CARDS: price + button first, benefits tucked under ---------- */
@media(max-width:900px){
  html body .plan-list{display:grid !important;gap:16px !important;padding:0 14px !important}
  html body .plan-row{border-radius:20px !important;padding:16px !important;position:relative}
  html body .plan-row .plan-name img{display:none !important}      /* decorative image pushed the price off-screen */
  html body .plan-row .plan-name{flex-direction:row !important;align-items:center;gap:10px}
  html body .plan-row .plan-name strong{font-size:18px !important}
  html body .plan-row .plan-price strong{font-size:44px !important;line-height:1}
  html body .plan-row ul{display:grid !important;grid-template-columns:1fr;gap:2px !important;margin:12px 0 !important}
  html body .plan-row ul li{font-size:14px !important;padding:7px 0 !important;min-height:0 !important}
  html body .plan-row ul li:nth-child(n+5){display:none}             /* keep 4 strongest benefits */
  html body .plan-row>a,html body .plan-row .plan-cta{min-height:54px !important;font-size:15px !important;border-radius:14px !important;display:flex !important;align-items:center;justify-content:center}
  html body .plan-row .plan-trial{display:block;min-height:44px;line-height:44px;font-size:13.5px !important;text-align:center}
  html body .plan-row.featured{border:2px solid #ffb21b !important;box-shadow:0 0 0 4px rgb(255 178 27 / .12),0 18px 40px rgb(0 0 0 / .4) !important;order:-1}
  html body .plan-row .plan-badge{position:absolute !important;top:-13px !important;right:14px !important;font-size:11.5px !important;padding:5px 12px !important;font-weight:800;z-index:2}
  html body .plan-row{margin-top:6px}
}

/* ---------- 4 service orbs: tidy 2×2, labels readable ---------- */
@media(max-width:900px){
  html body .services-grid{gap:12px !important;padding:8px 14px 24px !important}
  html body .service-item h2{font-size:15px !important;margin-top:8px !important;line-height:1.2 !important}
}

/* ---------- Live TV / Movies / Series cards → swipe row (saves ~1000px) ---------- */
@media(max-width:900px){
  html body .watch-grid{display:flex !important;overflow-x:auto;scroll-snap-type:x mandatory;gap:12px !important;
    padding:4px 14px 14px !important;margin:0 -14px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  html body .watch-grid::-webkit-scrollbar{display:none}
  html body .watch-card{flex:0 0 84% !important;scroll-snap-align:center;margin:0 !important}
  html body .watch-art{max-height:150px;overflow:hidden}
  html body .watch-art svg{max-height:150px;width:100%}
}

/* ---------- WhatsApp review screenshots → swipe carousel (was ~4,500px tall) ---------- */
@media(max-width:900px){
  html body .testimonials-strip{display:flex !important;flex-direction:row !important;overflow-x:auto;scroll-snap-type:x mandatory;
    gap:12px !important;padding:6px 16px 18px !important;margin:0 !important;-webkit-overflow-scrolling:touch;scrollbar-width:none;
    -webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  html body .testimonials-strip::-webkit-scrollbar{display:none}
  html body .testimonial-chat{flex:0 0 74% !important;max-width:300px;scroll-snap-align:center;margin:0 !important}
  html body .testimonial-chat img{width:100% !important;height:auto !important;border-radius:18px !important;box-shadow:0 14px 34px rgb(0 0 0 / .45)}
  html body .testimonials-heading::after{content:"Swipe to read more →";display:block;margin-top:10px;font-size:12.5px;color:#ffd457;font-weight:700}
}

/* ---------- Server cards: bigger tap targets, clearer WhatsApp action ---------- */
@media(max-width:900px){
  html body .sv-card,html body .sv-tile{border-radius:18px !important}
  html body .sv-card a,html body .sv-card button,html body .sv-tile a,html body .sv-tile button{min-width:44px;min-height:44px}
}

/* ---------- Country list: 2-column chips instead of 7 tall rows ---------- */
@media(max-width:900px){
  html body .cp-countries{display:grid !important;grid-template-columns:1fr 1fr;gap:10px !important}
  html body .cp-country{padding:12px !important;min-height:64px;border-radius:14px !important;flex-direction:column;align-items:flex-start;gap:8px}
  html body .cp-country b{font-size:14.5px !important}
  html body .cp-country small{font-size:12px !important;line-height:1.3}
  html body .cp-country:last-child{grid-column:1/-1}
}

/* ---------- footer: 48px links, two tidy columns ---------- */
@media(max-width:900px){
  html body .footer-links a,html body .footer-contact a,html body .footer-countries a{display:flex !important;align-items:center;min-height:44px;font-size:15px !important}
  html body .footer-contact a span{font-size:15px !important}
  html body .footer-bottom{padding-bottom:12px}
  html body .footer-bottom a{min-height:44px;display:inline-flex;align-items:center}
}

/* ---------- sticky contact bar: slimmer, WhatsApp-first, never covers content ---------- */
@media(max-width:900px){
  html body .cta-bar{padding:8px 12px calc(8px + env(safe-area-inset-bottom)) !important;gap:10px !important;
    background:linear-gradient(0deg,rgb(14 2 24 / .98),rgb(14 2 24 / .86)) !important;border-top:1px solid rgb(255 255 255 / .08);
    -webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
  html body .cta-bar a{min-height:52px !important;border-radius:14px !important;font-size:15.5px !important;font-weight:800 !important}
}

/* ---------- forms: 16px inputs stop iOS auto-zoom, 52px height ---------- */
html body input,html body select,html body textarea{font-size:16px !important}
@media(max-width:900px){
  html body input,html body select{min-height:52px !important;border-radius:14px !important}
  html body textarea{border-radius:14px !important;min-height:120px}
}

/* ---------- maps / heavy embeds ---------- */
html body iframe[src*="google.com/maps"]{width:100% !important;min-height:260px;border-radius:18px;border:0}

/* ---------- ≤360px phones ---------- */
@media(max-width:360px){
  html body .hero h1{font-size:32px !important}
  html body .brand span{font-size:18px !important}
  html body .plan-row .plan-price strong{font-size:38px !important}
}

/* ---------- WhatsApp channel popup → friendly bottom sheet, not a blocking modal ---------- */
@media(max-width:900px){
  html body .wc-overlay{align-items:flex-end !important;padding:0 !important;background:rgb(8 1 14 / .55) !important}
  html body .wc-card{width:100% !important;max-width:none !important;border-radius:24px 24px 0 0 !important;max-height:78vh;overflow:auto;
    padding-bottom:env(safe-area-inset-bottom);transform:translateY(100%);transition:transform .35s cubic-bezier(.2,.8,.2,1)}
  html body .wc-overlay.on .wc-card{transform:none}
  html body .wc-cover{height:64px !important}
  html body .wc-steps,html body .wc-post{display:none !important}
  html body .wc-x{width:44px !important;height:44px !important}
  html body .wc-later{min-height:48px}
}


/* =================== v5.1 — fixes from real-phone screenshots =================== */
@media(max-width:900px){
  /* header: one solid full-width bar in BOTH states (was a floating card with page text peeking above it) */
  html body .site-header,html body.has-sv-topbar .site-header,
  html body.header-stuck .site-header,html body.has-sv-topbar.header-stuck .site-header{
    left:0 !important;right:0 !important;width:100% !important;transform:none !important;translate:none !important;
    border-radius:0 !important;border-left:0 !important;border-right:0 !important;margin:0 !important;background:rgb(18 4 30 / .97) !important}
  html body.header-stuck .site-header,html body.has-sv-topbar.header-stuck .site-header{top:0 !important;position:fixed !important}

  /* hero: no scroll-fade / overlap; keep the copy complete */
  html body .hero .hero-content{opacity:1 !important}
  html body .hero-copy{font-size:15px !important;line-height:1.55 !important}
  html body .hero-actions{align-items:stretch}
  html body .hero-actions>*{transform:none !important}
  html body .hero-points{position:relative;z-index:1;margin-top:18px !important}
  html body .hero-scene{width:min(54vw,230px) !important}

  /* plan cards: tapping must NOT flip the card to solid yellow (sticky :hover / :focus-within on touch) */
  html body .plan-row::before,html body .plan-row::after{display:none !important}
  html body .plan-row:hover,html body .plan-row:focus-within,html body .plan-row:active{
    background-color:rgb(26 7 46 / .78) !important;background-image:linear-gradient(rgb(255 255 255 / .075),rgb(255 255 255 / .024)) !important;
    color:#f8efdb !important;transform:none !important;box-shadow:none !important;border-color:rgb(255 255 255 / .18) !important}
  html body .plan-row.featured:hover,html body .plan-row.featured:focus-within,html body .plan-row.featured:active{
    background-color:rgb(32 8 54 / .85) !important;background-image:linear-gradient(rgb(255 47 160 / .16),rgb(255 255 255 / .03)) !important;
    border-color:#ffb21b !important;box-shadow:0 0 0 4px rgb(255 178 27 / .12),0 18px 40px rgb(0 0 0 / .4) !important}
  html body .plan-row:hover li,html body .plan-row:focus-within li{color:#eadcf8 !important;animation:none !important}
  html body .plan-row:hover .plan-name strong,html body .plan-row:focus-within .plan-name strong{color:#fff !important}
  html body .plan-row:hover li svg,html body .plan-row:focus-within li svg{color:#ffd457 !important}
  html body .plan-row:hover .plan-price,html body .plan-row:focus-within .plan-price{background:none !important;border-color:transparent !important;transform:none !important;box-shadow:none !important}
  html body .plan-row:hover .plan-price strong,html body .plan-row:focus-within .plan-price strong{color:#fff !important;background:none !important;-webkit-text-fill-color:#fff !important}
  html body .plan-row:hover .plan-name img{transform:none !important}
  html body .plan-row:hover>a:not(.plan-trial),html body .plan-row:focus-within>a:not(.plan-trial){background:linear-gradient(135deg,#ffd457,#ff9a2e) !important;color:#12031f !important;border-color:transparent !important}
  html body .plan-row.featured:hover>a:not(.plan-trial),html body .plan-row.featured:focus-within>a:not(.plan-trial){background:linear-gradient(135deg,#ff2fa0,#ff7a30) !important;color:#fff !important}

  /* plan cards: tight vertical rhythm (items were ~55px apart) */
  html body .plan-row{display:flex !important;flex-direction:column !important;gap:0 !important;padding:18px 16px 14px !important}
  html body .plan-row .plan-name{order:1;margin-bottom:6px}
  html body .plan-row .plan-price{order:2;margin:4px 0 6px !important;padding:0 !important;background:none !important;border:0 !important}
  html body .plan-row .plan-mo{order:3;margin:0 0 10px !important}
  html body .plan-row ul{order:4;margin:6px 0 14px !important;padding:12px 0 0 !important;border-top:1px solid rgb(255 255 255 / .1);gap:0 !important}
  html body .plan-row ul li{margin:0 !important;padding:5px 0 !important;min-height:32px !important;line-height:1.3 !important;display:flex;align-items:center;gap:10px}
  html body .plan-row>a:not(.plan-trial){order:5}
  html body .plan-row .plan-trial{order:6;margin-top:2px}
  html body .plan-row .plan-price small{display:inline-block;margin:6px 0 0 !important}

  /* menu drawer: compact solid header, even buttons, labels that don't wrap into 4 lines */
  html body .gallery-panel-head{padding:10px 14px !important;min-height:0 !important;background:#17031e !important;border-bottom:1px solid rgb(255 255 255 / .1)}
  html body .gp-brand{flex-direction:row !important;align-items:center !important;gap:12px !important;height:auto !important}
  html body .gp-brand img{width:42px !important;height:42px !important;border-radius:12px}
  html body .gp-brand>div{display:flex;flex-direction:column;gap:0;line-height:1.1}
  html body .gp-brand>div span{font-size:12px !important;letter-spacing:.14em}
  html body .gp-brand>div strong{font-size:20px !important}
  html body .gallery-close{width:44px !important;height:44px !important}
  html body .m-actions{display:grid !important;grid-template-columns:1fr 1fr;gap:10px !important;align-items:stretch !important;padding:12px 14px 4px !important}
  html body .m-actions a{margin:0 !important;min-height:56px !important;height:auto !important;justify-content:center;border-radius:16px !important;font-size:14px !important;transform:none !important}
  html body .m-menu .m-item,html body .mobile-nav .m-item{font-size:16px !important;min-height:58px !important;padding:8px 12px !important;gap:12px !important}
  html body .m-item .m-tx{flex:1 1 auto;min-width:0;line-height:1.2;overflow-wrap:anywhere}
  html body .m-item .nav-live{flex:none;margin-left:auto}
  html body .m-item .m-go{flex:none}
}

@media(max-width:900px){
  html body .plan-row .plan-price,html body .plan-row ul{margin-left:20px !important;margin-right:20px !important}
  html body .plan-row .plan-price{padding:0 !important}
  html body .m-item .m-go{display:none !important}
  html body .m-item .nav-live{font-size:11px !important;padding:2px 8px !important}
  html body .m-item .m-tx{font-size:16px !important}
}
@media(max-width:900px){
  html body .gallery-panel-head{flex:none !important;height:68px !important;min-height:68px !important;align-items:center !important}
  html body .mobile-nav>*{flex-shrink:0}
}

/* =====================================================================
   v5.2 — professional pass: logo, plan cards (no overlap), clean hero
   ===================================================================== */

/* ---- LOGO: full-bleed circular mark, no box-in-a-box ---- */
html body .brand{display:flex !important;align-items:center !important;gap:10px !important;grid-template-columns:none !important;min-width:0}
html body .brand-badge,html body .brand-mark,html body .footer-badge,html body .gp-brand img{
  width:46px !important;height:46px !important;border-radius:50% !important;object-fit:cover !important;padding:0 !important;flex:none !important;
  border:0 !important;background:none !important;
  box-shadow:0 0 0 2px #ffb21b,0 0 0 4px rgb(255 178 27 / .22),0 6px 16px rgb(0 0 0 / .45) !important}
html body .brand span{font-size:22px !important;line-height:1 !important;font-weight:800 !important;letter-spacing:-.01em;white-space:nowrap}
html body .site-header{padding:8px 12px 8px 14px !important;gap:8px !important}
html body .header-tools{gap:8px !important;margin-left:auto}
html body .m-servers{padding:0 12px !important;border-radius:14px !important}
@media(max-width:380px){html body .brand span{font-size:19px !important}html body .brand-badge,html body .brand-mark{width:40px !important;height:40px !important}}

/* ---- HERO: remove decorative clutter that swept across the text ---- */
@media(max-width:900px){
  html body .hs-puff,html body .hs-sp,html body .hs-tvglow{display:none !important}
  html body .hero .eyebrow{white-space:nowrap !important;font-size:11.5px !important;letter-spacing:.1em !important;padding:7px 14px !important;max-width:100%}
  html body .hero-scene{margin-top:84px !important}
  html body .price-badge{top:calc(84px + min(54vw,230px) - 84px) !important}
}

/* ---- PLAN CARDS: flowing layout. Cannot overlap whatever the font/wrapping ---- */
@media(max-width:900px){
  html body .plan-list{display:flex !important;flex-direction:column !important;gap:22px !important;grid-template-columns:none !important;
    grid-template-rows:none !important;grid-auto-rows:auto !important;height:auto !important;max-height:none !important;padding:8px 14px 0 !important;max-width:none !important}
  html body .plan-row{display:grid !important;grid-template-columns:1fr !important;grid-template-rows:none !important;height:auto !important;min-height:0 !important;
    overflow:visible !important;transform:none !important;margin:0 !important;flex:none !important;gap:0 !important;padding:20px 18px 16px !important;border-radius:22px !important}
  html body .plan-row.featured,html body .plan-row.featured:hover{transform:none !important}
  html body .plan-row .plan-name{display:flex !important;flex-direction:row !important;align-items:center !important;justify-content:space-between !important;gap:12px !important;margin:0 0 10px !important;padding:0 !important;min-height:0 !important;background:none !important;border:0 !important}
  html body .plan-row .plan-name strong{flex:1 1 auto;min-width:0;font-size:19px !important;line-height:1.2 !important;position:static !important;padding:0 !important}
  html body .plan-row .plan-name .plan-badge{position:static !important;flex:none !important;margin:0 !important;white-space:nowrap}
  html body .plan-row .plan-price{display:flex !important;align-items:baseline !important;flex-wrap:wrap !important;gap:4px 10px !important;margin:0 !important;padding:0 !important;border:0 !important;background:none !important;box-shadow:none !important;width:auto !important;transform:none !important}
  html body .plan-row .plan-price strong{font-size:46px !important;line-height:1 !important;margin:0 !important;display:inline-flex;align-items:baseline;gap:8px}
  html body .plan-row .plan-price strong span{font-size:15px !important;letter-spacing:.08em}
  html body .plan-row .plan-price small{margin:0 0 0 auto !important;display:inline-block !important;padding:4px 10px !important;border-radius:999px !important;font-size:12.5px !important;align-self:center}
  html body .plan-row .plan-mo{display:flex !important;flex-wrap:wrap;align-items:center;gap:8px 10px;margin:8px 0 0 !important;padding:0 0 14px !important;border:0 !important;border-bottom:1px solid rgb(255 255 255 / .1) !important;font-size:14px !important}
  html body .plan-row ul{margin:12px 0 16px !important;padding:0 !important;border:0 !important}
  html body .plan-row ul li{padding:6px 0 !important;min-height:30px !important;font-size:14.5px !important}
  html body .plan-row>a:not(.plan-trial){margin:0 !important;min-height:56px !important;border-radius:16px !important;font-size:16px !important;font-weight:800 !important}
  html body .plan-row .plan-trial{margin:6px 0 0 !important;font-size:14px !important;min-height:44px !important;line-height:44px !important}
  html body .plan-row .plan-trial{color:#ffb6dc !important}
}

/* ---- services (4 image cards): consistent radius, thin border, readable label ---- */
@media(max-width:900px){
  html body .service-orbit{border-radius:20px !important;border-width:1.5px !important;overflow:hidden}
  html body .services-grid{grid-template-columns:1fr 1fr !important;gap:12px !important}
}

/* v5.3 — plan card = plain vertical stack (ignore legacy grid placements) */
@media(max-width:900px){
  html body .plan-row{display:flex !important;flex-direction:column !important;align-items:stretch !important}
  html body .plan-row>*{grid-area:auto !important;grid-row:auto !important;grid-column:auto !important;position:static !important;
    transform:none !important;float:none !important;width:auto !important;max-width:none !important;inset:auto !important;translate:none !important}
  html body .plan-row .plan-name{order:1 !important}
  html body .plan-row .plan-price{order:2 !important;align-self:flex-start}
  html body .plan-row .plan-mo{order:3 !important}
  html body .plan-row ul{order:4 !important}
  html body .plan-row>a:not(.plan-trial){order:5 !important;display:flex !important;align-items:center;justify-content:center;width:100% !important}
  html body .plan-row .plan-trial{order:6 !important;display:block !important;text-align:center;margin-top:8px !important;height:auto !important}
  html body .plan-row .plan-price{width:100% !important;justify-content:flex-start}
  html body .plan-row .plan-price small{margin-left:auto !important}
}
@media(max-width:900px){
  html body .plan-row .plan-price{flex-wrap:nowrap !important;align-items:center !important}
  html body .plan-row .plan-price strong{flex:0 1 auto}
  html body .plan-row .plan-price small{margin-left:auto !important;white-space:nowrap}
}
html body .site-header .brand img.brand-mark.brand-badge{width:48px !important;height:48px !important}
@media(max-width:380px){html body .site-header .brand img.brand-mark.brand-badge{width:42px !important;height:42px !important}}

/* video block removed: let the Anti-Freeze text use the full width */
html body .about-details{grid-template-columns:1fr !important}
html body .about-details .fast-connected{max-width:none}

/* =================== v5.4 — polish pass =================== */
@media(max-width:900px){
  /* plan price: left aligned, chip on the right (legacy pseudo-elements were pushing it to the centre) */
  html body .plan-row .plan-price::before,html body .plan-row .plan-price::after,html body .plan-row .plan-name::before{display:none !important;content:none !important}
  html body .plan-row .plan-price{text-align:left !important;justify-content:flex-start !important;padding-left:0 !important}
  html body .plan-row .plan-price strong{margin-left:0 !important}
  /* keep the plan icon tile on the left, restore a real MOST POPULAR badge */
  html body .plan-row .plan-name{padding-left:0 !important}
  html body .plan-row.featured .plan-name::after{content:"POPULAR" !important;display:inline-block !important;flex:none;order:3;
    background:linear-gradient(135deg,#ffd457,#ff9a2e);color:#2a0838;font-weight:800;font-size:11.5px;letter-spacing:.08em;padding:5px 12px;border-radius:999px;white-space:nowrap}
  html body .plan-row:not(.featured) .plan-name::after{content:none !important}

  /* eyebrow pills: when text wraps keep a soft rounded rectangle, not a stretched pill */
  html body .eyebrow,html body [class*="eyebrow"]{border-radius:14px !important;line-height:1.35 !important;max-width:100%}

  /* footer: shorter, calmer */
  html body .footer-main{gap:22px !important}
  html body .footer-links,html body .footer-contact{gap:0 !important}
  html body .footer-links a,html body .footer-contact a,html body .footer-contact>span{min-height:44px !important;padding:0 !important;font-size:15px !important}
  html body .footer-links{display:grid !important;grid-template-columns:1fr 1fr;column-gap:16px}
  html body .footer-links .footer-label{grid-column:1/-1}
  html body .footer-countries{display:contents !important}
  html body .site-footer{padding-bottom:12px !important}
}
@media(max-width:900px){
  html body .plan-row .plan-price{flex-direction:row !important;align-items:center !important;justify-content:flex-start !important}
  html body .plan-row.featured .plan-name::after{position:static !important;inset:auto !important;width:auto !important;height:auto !important;transform:none !important;
    opacity:1 !important;box-shadow:none !important;margin:0 !important;border:0 !important;filter:none !important;animation:none !important;border-radius:999px !important;line-height:1.2 !important;z-index:auto !important;clip-path:none !important}
}