/* HostPlanGuide Ocean Blue Edition v3 — original independent editorial design.
   Blue / navy / sky palette with no third-party creative assets. */
:root{
  --ink:#0a2758;
  --muted:#527197;
  --blue:#0879f8;
  --blue2:#0a9bed;
  --purple:#1779eb;
  --line:#d7e8ff;
  --bg:#f3f9ff;
  --soft:#e5f3ff;
  --dark:#072a67;
  --shadow:0 24px 65px rgba(5,68,156,.13);
}
body{background:#f8fbff;color:#102b58}
.announcement{background:#06245a;color:#def1ff}
.notice-dot{background:#3ad5ff;box-shadow:0 0 0 4px #40bcff27}
.announcement a{color:#97e6ff}
.site-header{height:84px;background:rgba(255,255,255,.97);border-bottom:1px solid #d8e9ff;box-shadow:0 4px 30px #06428a0b;backdrop-filter:blur(14px)}
.nav-links a{color:#234575}
.nav-links a:hover{color:#0772e9}
.btn{border-radius:10px}
.btn-blue{background:linear-gradient(110deg,#086aea,#048bf8);box-shadow:0 13px 25px #076fdf30;color:white}
.btn-blue:hover{background:linear-gradient(110deg,#0459cd,#0879ec);box-shadow:0 14px 25px #005fd054}
.nav-cta{padding:14px 20px}
.eyebrow{color:#057aea}
.eyebrow-spark{background:#d8edff;color:#096fe5}
/* Saturated blue hero: clearly blue at every screen size, while keeping content legible. */
.hero{
  position:relative;
  background:
    radial-gradient(ellipse 40% 72% at 89% 30%,#28bbff60 0%,#1497ed23 55%,transparent 74%),
    radial-gradient(ellipse 50% 68% at 5% 108%,#075be6 0%,transparent 78%),
    linear-gradient(118deg,#05245f 0%,#084bad 50%,#0879df 100%);
  padding:90px 0 94px;
}
.hero::before{content:'';position:absolute;inset:0;opacity:.26;pointer-events:none;background-image:linear-gradient(90deg,#ffffff0c 1px,transparent 1px),linear-gradient(#ffffff0c 1px,transparent 1px);background-size:64px 64px;mask-image:linear-gradient(90deg,transparent 0%,#000 100%)}
.hero::after{content:'';position:absolute;right:-9%;top:-41%;width:680px;aspect-ratio:1;border:1px solid #a1e7ff2b;border-radius:50%;pointer-events:none;box-shadow:0 0 0 72px #a6eaff08,0 0 0 170px #a6eaff07}
.hero-layout{position:relative;z-index:1;grid-template-columns:1.02fr 1fr;gap:38px}
.hero .eyebrow{display:inline-block;padding:9px 14px;background:#ffffff18;border:1px solid #8ecbff44;border-radius:99px;color:#b7eaff;letter-spacing:.13em}
.hero .eyebrow-spark{color:#5fd6ff;background:#ffffff24}
.hero h1{color:#fff;font-size:clamp(45px,4.4vw,66px);line-height:1.145;letter-spacing:-.06em;margin:25px 0 23px;max-width:620px}
.hero h1 span{color:#83e3ff}
.hero-lead{color:#d6eaff;font-size:16px;line-height:1.86;max-width:515px;margin-bottom:26px}
.hero-checks span{color:#e8f5ff;font-size:11.5px}
.hero-checks i{background:#2cc9f8;color:#073a7d}
.hero .btn-blue{color:#06387a;background:#fff;box-shadow:0 15px 30px #01204f50}
.hero .btn-blue:hover{background:#d8f5ff}
.hero .btn-outline{background:#ffffff15;color:#fff;border-color:#b0ddff72;box-shadow:none}
.hero .btn-outline:hover{background:#ffffff2b}
.hero-disclosure{color:#c8e4fc;font-size:10.5px}
.hero-visual{min-height:470px}
.visual-aura{background:radial-gradient(circle,#8bd9ff66 0%,#5ac5ff25 44%,transparent 72%)}
.visual-dotgrid{background-image:radial-gradient(#d6f5ff 1.2px,transparent 1.2px);opacity:.4}
.dashboard{border:1px solid #b8e8ff8c;box-shadow:0 42px 92px #001a5080,0 3px 20px #0746a050;transform:rotate(-3deg);border-radius:20px}
.dash-side-icon,.dash-side-line.active{background:#0788f4}
.dash-hello span{color:#04a7ee}
.dash-chart{background:#f9fcff;border-color:#d9ecff}
.dash-metrics>div{background:#fff;border-color:#d9e8fa}
.m-blue{background:#dbf0ff;color:#0472e9}
.m-purple{background:#dceaff;color:#075acc}
.float-pill{border:1px solid #ffffffb0;box-shadow:0 18px 46px #001e5366}
.float-round{background:#def3ff;color:#057dea}
.float-round.purple{background:#def0ff;color:#0575e0}
/* Trust ribbon and product-first plans. */
.feature-ribbon{background:linear-gradient(90deg,#075cce,#0a8ae7);border-bottom:0;box-shadow:0 13px 25px #0753b71a;color:#fff}
.ribbon-grid{padding:28px 0}
.ribbon-grid>div:not(:last-child){border-right:1px solid #b4e1ff55}
.ribbon-icon{color:#fff;background:#ffffff22;border:1px solid #ffffff35}
.ribbon-grid small{color:#cbefff}
.plans-section{background:linear-gradient(180deg,#eef8ff 0%,#f7fbff 100%);padding-top:105px}
.section h2{color:#092d67}
.section h2 span{color:#087ce8}
.section-heading p{color:#5d789c}
.plan-grid{gap:17px}
.plan-card{border:1px solid #d6e9ff;border-top:4px solid #83c5ff;box-shadow:0 15px 38px #0b4ea814;background:#fff;border-radius:17px;padding-top:24px}
.plan-card:hover{transform:translateY(-5px);box-shadow:0 22px 50px #075aaa22;transition:transform .2s,box-shadow .2s}
.plan-card.highlighted{border:2px solid #0b7df1;border-top:5px solid #0673e6;background:linear-gradient(#eaf7ff,#fff 42%);box-shadow:0 22px 52px #0568cc2e;padding-top:24px}
.recommend-strip{background:#056fe7;color:#fff;box-shadow:0 8px 18px #0069d338}
.plan-tag{color:#1471c6}
.plan-head h3{color:#092d67}
.pi-sky{background:#dff3ff;color:#077cde}
.pi-violet{background:#d6efff;color:#0865d8}
.pi-blue{background:#e0ecff;color:#0b72e0}
.pi-ink{background:#e2efff;color:#134d9e}
.plan-price strong{color:#06336f}
.plan-divider{background:#e2effb}
.plan-features li{color:#36587e}
.plan-features li:before{color:#007def}
.btn-plan-outline{border-color:#c8e4ff;background:#e7f5ff;color:#075cca}
.btn-plan-outline:hover{background:#d2edff}
.price-fineprint{background:#e2f2ff;border:1px solid #c7e5ff}
.price-fineprint>span{color:#0676e4}
.price-fineprint p{color:#4c6689}
/* Deep ocean feature chapter. */
.value-section{background:radial-gradient(ellipse 70% 100% at 90% 30%,#0b72ca 0%,transparent 74%),linear-gradient(120deg,#05275f,#074b9c);color:#fff;overflow:hidden}
.value-section h2{color:#fff}
.value-section h2 span{color:#6edbff}
.value-copy p{color:#d0e7ff}
.value-section .eyebrow{color:#85e7ff}
.value-section .text-arrow{color:#95e8ff}
.feature-orb{background:radial-gradient(circle at 35% 25%,#86ebff 0%,#0f9df3 45%,#0860bd 85%);box-shadow:0 25px 50px #00174b88}
.feature-orb i{background:#11b4ee;border-color:#caefff}
.value-card{background:#ffffffef;border-color:#ffffff80;box-shadow:0 14px 30px #002b6470}
.value-card h3{color:#0a326c}
.value-card p{color:#5a7496}
.vi-1,.vi-2,.vi-3,.vi-4{background:#dff3ff;color:#077be5}
/* Blue-tinted tools: no fake speed claims and no unverified testimonials. */
.finder-section{background:linear-gradient(120deg,#e0f2ff,#cce8ff 52%,#eaf6ff)}
.finder-copy h2{color:#082c64}
.finder-copy p{color:#486e95}
.finder-perks div{color:#244c7e}
.finder-perks i{color:#077dec;background:#d3e9ff}
.finder-widget{border:1px solid #aed6ff;box-shadow:0 24px 60px #0766b02f}
.widget-bar{background:linear-gradient(90deg,#053d95,#0767ce)}
.project-options .choice.active,.skill-options .skill.active{border-color:#0b86fa;background:#edf8ff;color:#075ebc;box-shadow:0 0 0 2px #cde9ff}
.match-result{background:#e9f6ff;border-color:#c6e7ff}
.match-icon{background:#057cf4;color:#fff}
.affiliate-tiny{color:#7c91ac}
.comparison-section{background:#f8fcff}
.compare-wrap{border:1px solid #bcdfff;box-shadow:0 15px 35px #0552a00e}
.compare-table thead th{background:#dcf0ff;color:#0a427c}
.compare-table tr:nth-child(even) td,.compare-table tr:nth-child(even) th{background:#f1f9ff}
.compare-table th,.compare-table td{border-color:#e2f0ff}
.compare-note{color:#6382a1}
.guide-section{background:linear-gradient(125deg,#0846a0,#0a73ce);color:#fff}
.guide-section .eyebrow{color:#abedff}
.guide-section h2{color:#fff}
.guide-section h2 span{color:#94e8ff}
.guide-section p{color:#d9ebff}
.progress-meta{color:#afd8fb}
.progress-meta span:first-child{color:#fff}
.progress-track{background:#ffffff34}
#progress-fill{background:#6fe9ff}
.checklist label{background:#fff;border-color:#c8e6ff;box-shadow:0 8px 25px #00357425}
.checklist b{color:#143968}
.checklist small{color:#68829e}
.checklist .custom-checkbox{border-color:#a9cdf5}
.checklist input:checked+.custom-checkbox{background:#067ae3;border-color:#067ae3}
.cost-section{background:#f1f9ff}
.cost-note{background:#dfedff;border-color:#0778e4;color:#42698f}
.calc-card{border:1px solid #b9dbff;box-shadow:0 20px 55px #084c9622}
.calc-head{border-bottom-color:#d9edff}
.calc-answer{background:#e8f5ff}
.calc-answer strong{color:#065ec8}
.faq-section{background:#e7f4ff}
.faqs details{border:1px solid #cae6ff;background:#fff}
.faqs summary:after{color:#0876e4}
.close-section{background:#f8fcff}
.closing-panel{background:radial-gradient(ellipse 60% 150% at 95% 0%,#14a7ed55,transparent 80%),linear-gradient(115deg,#053078,#0763d3 60%,#038fe7);border-radius:25px;box-shadow:0 20px 50px #0060c23a}
.closing-panel .eyebrow{color:#b3efff}
.closing-panel .btn-white{color:#0755b8}
.close-content p,.close-content small{color:#d6edff}
.close-mark span{color:#8be1ff}
.footer{background:#05265e;color:#fff;border-top:0}
.footer p{color:#cae0fc}
.footer-label{background:#ffffff1b;color:#d4ebff;border:1px solid #ffffff22}
.footer-cols a{color:#c0dcfc}
.footer-cols a:hover{color:#fff}
.footer-disclosure{background:#ffffff12;border-color:#7cbdff32;color:#cfdef4}
.footer-disclosure b{color:#fff}
.footer-bottom{color:#b4d2f3;border-top-color:#ffffff23}
.footer .pending-email{color:#b1d3ff}
/* Standalone informational pages retain bright readable cards. */
.article-shell{background:linear-gradient(#eef8ff,#fff)}
/* Responsive tuning */
@media(max-width:1100px){
 .hero-layout{gap:10px}
 .hero h1{font-size:48px}
 .plan-card{padding:24px}
 .plan-card.highlighted{padding:23px}
}
@media(max-width:760px){
 .announcement{background:#05265d}
 .site-header{height:67px}
 .hero{padding:57px 0 53px;background:radial-gradient(circle at 90% 72%,#19a9ef50,transparent 58%),linear-gradient(145deg,#052c6c,#086cce 86%)}
 .hero::after{width:400px;right:-70%;top:-11%}
 .hero h1{font-size:clamp(36px,10.5vw,48px);line-height:1.16;margin-top:22px}
 .hero-lead{font-size:14px;line-height:1.8;margin-bottom:22px}
 .hero-checks{gap:9px 15px}
 .hero-checks span{font-size:10.5px}
 .hero-visual{min-height:350px;margin-top:5px}
 .dashboard{width:90%;transform:rotate(-2deg)}
 .float-speed{left:1px;bottom:16px}
 .float-security{right:-3px;top:12px}
 .feature-ribbon{background:linear-gradient(135deg,#0755c4,#0c90e7)}
 .plans-section{padding-top:74px}
 .plan-grid{gap:17px}
 .value-section{background:linear-gradient(160deg,#04265c,#0a65ba)}
 .value-card{box-shadow:none}
 .guide-section{background:linear-gradient(160deg,#064298,#0877d0)}
 .closing-panel{background:linear-gradient(130deg,#042d77,#0775da)}
 .footer-main{gap:30px}
}
@media(max-width:420px){
 .hero h1{font-size:36px}
 .hero .eyebrow{font-size:9px}
 .hero-visual{min-height:315px}
 .float-pill{padding:8px 9px}
 .float-pill strong{font-size:10px}
 .float-pill small{font-size:8px}
 .plan-grid{gap:19px}
}
@media(prefers-reduced-motion:reduce){.plan-card:hover{transform:none}}
/* Keep the lead and illustration stacked on narrow screens. */
@media(max-width:760px){
  .hero-layout{grid-template-columns:1fr;gap:20px}
  .hero-copy{width:100%;min-width:0}
  .hero-visual{width:100%;min-width:0;margin:12px 0 0;min-height:360px}
  .hero-actions .btn{max-width:100%}
}

/* HostPlanGuide original brand refresh v4 — new icon and wordmark */
.site-header .brand img{width:248px;height:auto;max-height:62px}
.footer .brand img{width:248px;height:auto}
@media(max-width:760px){.site-header .brand img{width:212px;max-height:53px}}
@media(max-width:380px){.site-header .brand img{width:190px}}