/* ==========================================================================
   RaconCodes — design v2  ("signal" look)
   Same colours, same information — completely different type, shapes and layout:
   cut-corner cards & buttons, flat full-width header, numbered section titles,
   3-column plan cards, tile services, hex pictures, mirrored hero.
   ========================================================================== */
:root{--rc-font:"Plus Jakarta Sans",system-ui,-apple-system,"Segoe UI",sans-serif;--rc-head:"Sora","Plus Jakarta Sans",system-ui,sans-serif;
  --cut:14px;--cut-s:9px;--line:rgb(255 47 160 / .5);--line2:rgb(255 255 255 / .12);
  --cutpoly:polygon(var(--cut) 0,100% 0,100% calc(100% - var(--cut)),calc(100% - var(--cut)) 100%,0 100%,0 var(--cut));
  --cutpoly-s:polygon(var(--cut-s) 0,100% 0,100% calc(100% - var(--cut-s)),calc(100% - var(--cut-s)) 100%,0 100%,0 var(--cut-s))}
html body,html body *:not(svg):not(svg *){font-family:var(--rc-font) !important}
html body h1,html body h2,html body h3,html body .brand span,html body .plan-price strong,html body .hs-chip,html body .ch-tab,html body .eyebrow,html body .counter,html body .stat-num{font-family:var(--rc-head) !important}
body{letter-spacing:.005em}
h1,h2{letter-spacing:-.02em}

/* ---------- header: flat, full width, no floating pill ---------- */
.site-header{top:34px !important;left:0 !important;transform:none !important;width:100% !important;max-width:none !important;min-height:66px !important;border-radius:0 !important;
  padding:6px max(20px,calc((100vw - 1240px)/2)) !important;background:linear-gradient(180deg,rgb(14 2 26 / .94),rgb(14 2 26 / .86)) !important;
  border:0 !important;border-bottom:1px solid var(--line) !important;box-shadow:0 1px 0 rgb(255 255 255 / .04),0 10px 30px rgb(0 0 0 / .25) !important;
  background-clip:border-box !important}
.brand small{letter-spacing:.22em;font-size:9px;opacity:.8}
.desktop-nav a{position:relative;font-size:13px !important;letter-spacing:.09em;text-transform:uppercase;font-weight:700;padding:10px 4px !important;background:none !important;border-radius:0 !important}
.desktop-nav a::after{content:"";position:absolute;left:4px;right:4px;bottom:2px;height:2px;background:var(--rc-ring);transform:scaleX(0);transform-origin:left;transition:transform .25s}
.desktop-nav a:hover::after,.desktop-nav a.active::after,.desktop-nav a[aria-current]::after{transform:scaleX(1)}
.pill-cta,.m-servers,.menu-control,.header-icon{border-radius:0 !important}
.pill-cta{clip-path:var(--cutpoly-s);padding:0 20px !important;letter-spacing:.08em;font-size:12.5px !important;text-transform:uppercase}
.m-servers{clip-path:var(--cutpoly-s)}
.menu-control{clip-path:var(--cutpoly-s)}
.brand-badge{border-radius:12px !important;box-shadow:0 0 0 2px #ff2fa0 !important}

/* ---------- buttons everywhere: cut corners, uppercase ---------- */
.primary-cta,.outline-cta,.dark-cta,.footer-cta,.sv-cta,.hero-actions a,.plan-row>a,.ch-more,.chsave,.m-hero-tx em{border-radius:0 !important;clip-path:var(--cutpoly-s);text-transform:uppercase;letter-spacing:.07em;font-weight:800 !important;font-size:13px !important}
.hero-actions a{min-height:50px}

/* ---------- section titles: numbered, left-aligned ---------- */
body{counter-reset:rcsec}
.eyebrow{counter-increment:rcsec;display:inline-flex;align-items:center;gap:10px;letter-spacing:.2em !important;font-size:11.5px !important;font-weight:800 !important;color:#ffd457 !important}
.eyebrow::before{content:counter(rcsec,decimal-leading-zero) " /" !important;width:auto !important;height:auto !important;background:none !important;color:#ff4fa8;font-weight:800;letter-spacing:.08em;border-radius:0 !important;box-shadow:none !important}
.eyebrow::after{content:"";display:inline-block;width:46px;height:1px;background:var(--rc-ring)}
.hero .eyebrow::before{content:"[ LIVE ]" !important;color:#ff4fa8}
.section-heading,.ch-head,.ch-home-in,.watch-head,.cp-home-inner,.testimonials-head{text-align:left !important}
.ch-head{margin-left:0 !important}
.ch-head p,.ch-home-in>p{margin-left:0 !important}
h2 em{font-style:normal}

/* ---------- cards: cut corners, thin lines, no rounded pills ---------- */
.plan-row,.bear-tile,.watch-card,.ch-card,.sl-panel,.ct-card,.ct-map-card,.ct-float-card,.dl-codebox,.guide-row,.m-item,.gallery-tile,.rs-card,.ac-card,.sv-card,.testimonial-chat,.dl-app{
  border-radius:0 !important;background:linear-gradient(160deg,rgb(44 12 74 / .88),rgb(20 4 36 / .94)) !important;border:0 !important;
  box-shadow:inset 0 0 0 1px var(--line),inset 0 1px 0 rgb(255 255 255 / .09) !important;clip-path:var(--cutpoly)}
.ch-card,.guide-row,.m-item{clip-path:var(--cutpoly-s)}
.ch-tab{border-radius:0 !important;clip-path:var(--cutpoly-s);letter-spacing:.04em}
.ch-sw,.ch-switch,.ch-search{border-radius:0 !important}
.ch-switch{clip-path:var(--cutpoly-s)}
.ch-search{clip-path:var(--cutpoly-s)}
.pay-chip{border-radius:0;clip-path:var(--cutpoly-s)}
.eyebrow-light{color:#ffd457}

/* ---------- plans: three columns, vertical cards ---------- */
.plan-list{grid-template-columns:repeat(3,minmax(0,1fr)) !important;gap:22px !important;align-items:stretch}
.plan-row{position:relative;display:flex !important;flex-direction:column;gap:14px !important;padding:26px 22px 22px !important}
.plan-row .plan-name{display:flex;flex-direction:column-reverse;gap:12px;order:1}
.plan-row .plan-name strong{font:800 20px/1.2 var(--rc-head) !important}
.plan-row .plan-name img{width:100% !important;height:120px !important;object-fit:cover;border-radius:0 !important;clip-path:var(--cutpoly-s)}
.plan-row .plan-price{order:2;position:relative;align-self:stretch;width:auto !important;height:auto !important;border-radius:0 !important;border:0 !important;box-shadow:none !important;display:flex !important;align-items:baseline;gap:8px;padding:14px 0 6px;background:none !important;border-top:1px solid var(--line2) !important;border-bottom:1px solid var(--line2) !important;margin:0 !important}
.plan-row .plan-price strong{font-size:44px !important;line-height:1;color:#ffd457}
.plan-row .plan-price strong span{font-size:14px !important;margin-left:6px;color:#ff9acb;letter-spacing:.1em}
.plan-row .plan-price small{font-size:13px;color:#d9cde8;margin-left:auto}
.plan-row ul{order:3;display:grid !important;grid-template-columns:1fr !important;gap:9px !important;flex:1}
.plan-row>a{order:4;width:100% !important;justify-content:center}
.plan-row.featured{transform:translateY(-8px)}
.plan-row.featured::before{left:50% !important;transform:translateX(-50%);border-radius:0 !important;clip-path:var(--cutpoly-s);top:0 !important}
@media(max-width:900px){.plan-list{grid-template-columns:1fr !important}.plan-row.featured{transform:none}.plan-row .plan-name{flex-direction:column-reverse}}

/* ---------- services: picture tiles instead of circles ---------- */
.services-grid{gap:18px !important}
.service-item{position:relative;text-align:left}
.service-orbit{width:100% !important;aspect-ratio:4/5 !important;padding:0 !important;border:0 !important;border-radius:0 !important;clip-path:var(--cutpoly);box-shadow:inset 0 0 0 1px var(--line) !important}
.service-orbit::after{inset:0 !important;border-radius:0 !important;background:linear-gradient(180deg,transparent 45%,rgb(14 2 26 / .92)) !important;box-shadow:none !important}
.service-orbit img{border-radius:0 !important}
.orbit-pip{display:none !important}
.service-item h2{position:absolute;left:16px;right:16px;bottom:14px;margin:0 !important;font-size:17px !important;line-height:1.2;text-align:left !important;color:#fff !important;z-index:2;text-shadow:0 2px 10px rgb(0 0 0 / .6)}
.service-item h2::before{content:"";display:block;width:34px;height:3px;margin-bottom:8px;background:var(--rc-ring)}

/* ---------- feature bar under the hero ---------- */
.bear-tiles{padding:0 20px;margin-top:-34px;position:relative;z-index:6}
.bear-tiles-inner{width:min(1200px,100%) !important;margin:0 auto !important;gap:0 !important;background:linear-gradient(160deg,rgb(40 10 68 / .96),rgb(18 3 32 / .97));clip-path:var(--cutpoly);box-shadow:inset 0 0 0 1px var(--line)}
.bear-tile{display:flex !important;flex-direction:row !important;align-items:center !important;text-align:left !important;gap:14px !important;padding:20px 22px !important;clip-path:none !important;box-shadow:none !important;background:none !important;border-right:1px solid var(--line2) !important;min-height:96px}
.bear-tile:last-child{border-right:0 !important}
.bear-tile::before{display:none !important}
.bear-tile-icon{flex:none;width:48px !important;height:48px !important;border-radius:0 !important;clip-path:var(--cutpoly-s)}
.bear-tile strong{display:block;font-size:15px}.bear-tile small{display:block;font-size:12.5px;opacity:.8}
.bear-tile>strong,.bear-tile>small{grid-column:2}
@media(max-width:900px){.bear-tiles{margin-top:8px}.bear-tiles-inner{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.bear-tile{border-right:0 !important;border-bottom:1px solid var(--line2) !important;padding:16px 14px !important;min-height:84px}}

/* ---------- picture strip: hexagons ---------- */
.community-portrait{border-radius:0 !important;box-shadow:none !important;overflow:visible !important;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%);background:var(--rc-ring);padding:3px}
.community-portrait img{border-radius:0 !important;clip-path:polygon(25% 3%,75% 3%,100% 50%,75% 97%,25% 97%,0 50%)}
.community-feature{border-radius:0 !important;clip-path:var(--cutpoly)}

/* ---------- hero: mirrored, with a faint signal grid ---------- */
.hero{background-image:linear-gradient(rgb(255 255 255 / .035) 1px,transparent 1px),linear-gradient(90deg,rgb(255 255 255 / .035) 1px,transparent 1px) !important;background-size:48px 48px !important;background-position:center top}
.hero h1{font-size:clamp(34px,4.2vw,64px) !important;line-height:1.04 !important;text-transform:none}
.hero h1 em,.hero h1 span{font-style:normal}
.hero-copy{max-width:520px}
@media(min-width:901px){
  .hero-scene{right:auto !important;left:max(0px,calc((100vw - 1340px)/2)) !important}
  body .hero .hero-content,body.has-sv-topbar .hero .hero-content{left:auto !important;right:max(32px,calc((100vw - 1230px)/2)) !important;width:min(560px,46%) !important}
  .hero-medallion{left:auto !important;right:max(32px,calc((100vw - 1230px)/2)) !important}
  .price-badge{left:calc(max(32px,calc((100vw - 1230px)/2)) + 560px) !important}
}
@media(max-width:900px){.hero-scene{order:1 !important;margin-top:96px !important}body .hero .hero-content,body.has-sv-topbar .hero .hero-content{order:2 !important;padding-top:6px !important}}

/* ---------- misc ---------- */
.ch-flag{border-radius:3px}
.ch-ini{border-radius:0;clip-path:var(--cutpoly-s)}
.tag,.pill,.chip,.sv-pill,.nav-live{border-radius:0 !important}
.m-hero{border-radius:0 !important;clip-path:var(--cutpoly);box-shadow:none}
.gallery-panel{border-radius:0 !important}
.gallery-panel-head strong{font-family:var(--rc-head) !important}
footer .footer-main h4,footer .footer-main h3{letter-spacing:.18em;font-size:11.5px}

/* ---------- fixes after first review ---------- */
.plan-row.featured::before{position:absolute !important;inset:auto !important;top:-1px !important;left:50% !important;right:auto !important;bottom:auto !important;width:auto !important;height:auto !important;transform:translateX(-50%) !important;padding:6px 16px !important;margin:0 !important;background:linear-gradient(135deg,#ffd457,#ff9a2e) !important;color:#2a0838 !important;font:800 11px/1 var(--rc-head) !important;letter-spacing:.12em !important;opacity:1 !important;clip-path:polygon(0 0,100% 0,calc(100% - 8px) 100%,8px 100%) !important;box-shadow:none !important}
.plan-row.featured{padding-top:38px !important}
.ch-grid{grid-template-columns:repeat(auto-fill,minmax(236px,1fr)) !important}
.ch-name{overflow-wrap:break-word !important;word-break:normal !important;hyphens:auto}
.ch-card::after{display:none !important}
@media(max-width:640px){.ch-grid{grid-template-columns:repeat(2,minmax(0,1fr)) !important}.ch-name{font-size:13.5px !important}}
.brand span{font-size:22px !important}
.brand{gap:10px !important}
@media(min-width:901px){.brand small{display:none !important}}

/* ---------- second review fixes ---------- */
.pill-cta{white-space:nowrap}
.site-header{padding-left:max(28px,calc((100vw - 1240px)/2)) !important;padding-right:max(24px,calc((100vw - 1240px)/2)) !important}
.plan-row .plan-price strong{display:flex !important;align-items:baseline;gap:6px}
.plan-row .plan-price strong span{display:inline !important}
@media(min-width:901px){.price-badge{bottom:96px !important}.hero-medallion{bottom:96px !important}}
@media(max-width:900px){
  .hero .eyebrow::before{content:"" !important;display:none}
  .price-badge{top:calc(96px + min(100vw,460px) - 92px) !important;bottom:auto !important;left:14px !important;transform:rotate(-6deg) scale(.85) !important;transform-origin:left top}
}
@media(max-width:640px){
  .plan-row .plan-name{flex-direction:column-reverse !important;align-items:stretch !important;justify-content:flex-start !important}
  .plan-row .plan-name img{order:0 !important;width:100% !important;height:120px !important}
  .plan-row .plan-name strong{order:0 !important}
  .plan-row .plan-price{width:auto !important;height:auto !important}
  .plan-row{padding:22px 18px 18px !important}
}

/* ---------- third review fixes ---------- */
.plan-row .plan-price strong{width:auto !important;height:auto !important;overflow:visible !important;position:static !important;inset:auto !important}
@media(max-width:900px){
  .bear-tile{flex-direction:column !important;align-items:flex-start !important;gap:10px !important;padding:16px 14px !important}
  .bear-tile strong{font-size:14.5px}.bear-tile small{font-size:12.5px;line-height:1.35}
  .bear-tile:nth-child(odd){border-right:1px solid var(--line2) !important}
}

/* ---------- fourth review fixes ---------- */
.ct-pagehead::before,.ct-pagehead::after{display:none !important}
.sl-hero::before,.sl-hero::after,.dl-hero::before,.dl-hero::after{display:none !important}
.brand{flex:none !important;min-width:max-content;margin-right:26px}
.desktop-nav{margin-left:auto !important;margin-right:auto !important;gap:18px !important}
@media(min-width:901px) and (max-width:1180px){.desktop-nav{gap:10px !important}.desktop-nav a{font-size:12px !important;letter-spacing:.05em}}

/* ---------- fifth review fixes (phone header) ---------- */
@media(max-width:900px){
  .brand{min-width:0 !important;margin-right:0 !important;flex:1 1 auto !important}
  .brand span{font-size:19px !important}
  .site-header{padding-left:10px !important;padding-right:10px !important}
}
@media(max-width:380px){.brand span{font-size:17px !important}}

/* ---------- header fits every desktop width ---------- */
.header-icon{display:none !important}
@media(min-width:901px){
  .brand{margin-right:12px !important}
  .desktop-nav{gap:12px !important}.desktop-nav a{font-size:12.5px !important;letter-spacing:.06em !important;padding:10px 2px !important}
  .site-header{gap:12px !important}
  .pill-cta{padding:0 16px !important;min-height:44px}
}
@media(min-width:901px) and (max-width:1100px){.desktop-nav a{font-size:11.5px !important;letter-spacing:.03em !important}.desktop-nav{gap:8px !important}.pill-cta{padding:0 12px !important;font-size:11.5px !important}}

/* ---------- header on small laptops / tablets landscape ---------- */
@media(min-width:901px) and (max-width:1100px){
  .site-header{padding-left:16px !important;padding-right:14px !important;gap:8px !important}
  .brand{margin-right:4px !important;gap:8px !important}
  .brand span{font-size:18px !important}.brand-badge{width:36px !important;height:36px !important}
  .desktop-nav{gap:2px !important;margin-left:0 !important;margin-right:0 !important;flex:1 1 auto;justify-content:center;min-width:0}
  .desktop-nav a{font-size:11px !important;letter-spacing:0 !important;text-transform:none !important;padding:10px 5px !important;white-space:nowrap}
  .nav-live{display:none !important}
  .pill-cta{padding:0 10px !important;font-size:10.5px !important;min-height:40px !important}
  .pill-cta i,.pill-cta svg{display:none}
  .menu-control{width:44px !important;height:44px !important}
}

/* ---------- price badge sits top-right of the hero text on desktop ---------- */
@media(min-width:901px){.price-badge{left:auto !important;right:max(40px,calc((100vw - 1230px)/2 + 10px)) !important;top:132px !important;bottom:auto !important;transform:rotate(7deg) !important}}