/* Approved hosting presentation. Every rule is scoped to this page. */
body[data-page="hosting"] .hosting-hero{padding:46px 0 20px;border-bottom:0;overflow:visible}
body[data-page="hosting"] .hosting-hero .eyebrow{margin:0 auto 13px;font-size:12px;letter-spacing:.16em}
body[data-page="hosting"] .hosting-hero h1{max-width:100%;margin:0 auto;font-size:clamp(30px,3.15vw,43px);line-height:1.2;letter-spacing:-.025em}
body[data-page="hosting"] .hosting-hero p{max-width:66ch;margin:14px auto 0;font-size:16px;line-height:1.6;color:#c4d7e8}
body[data-page="hosting"] .hosting-packages{padding:0 0 36px}
body[data-page="hosting"] .hosting-packages .plan-toggle{display:flex;width:fit-content;max-width:100%;gap:0;flex-wrap:nowrap;margin:0 auto;background:#03182c;border:1px solid #145783;border-radius:999px;padding:3px}
body[data-page="hosting"] .hosting-packages .toggle-btn{min-width:104px;min-height:40px;padding:8px 18px;border:0;border-radius:999px;background:transparent;color:#c6d5e2;font-size:14px;line-height:1.4}
body[data-page="hosting"] .hosting-packages .toggle-btn.active{background:#0787ff;color:#fff;box-shadow:0 4px 16px #0087ff30}
body[data-page="hosting"] .hosting-state{max-width:72ch;min-height:22px;margin:10px auto 22px;font-size:13px;line-height:1.6}
body[data-page="hosting"] .hosting-state.is-error{color:#ffc1c7}
body[data-page="hosting"] .plans{grid-template-columns:repeat(4,minmax(0,1fr));gap:16px;align-items:stretch}
body[data-page="hosting"] .plans .plan{display:flex;flex-direction:column;min-width:0;padding:24px 19px 18px;border:1px solid #14577e;border-radius:18px;background:#041c32;box-shadow:0 8px 25px #00101e33;text-align:center}
body[data-page="hosting"] .plans .plan[hidden]{display:none}
body[data-page="hosting"] .plans .plan.popular{border:2px solid #078fff;padding:23px 18px 17px;background:#062540;box-shadow:0 0 24px #0087ff29}
body[data-page="hosting"] .popular-tag{top:-12px;right:auto;left:50%;transform:translateX(-50%);padding:6px 17px;max-width:calc(100% - 24px);border-radius:999px;background:#0787ff;color:#fff;font-size:12px;line-height:1.35;white-space:normal;text-align:center}
body[data-page="hosting"] .popular-tag[hidden]{display:none}
body[data-page="hosting"] .plans .plan-head{display:flex;flex-direction:column;gap:12px;min-height:0;width:100%;text-align:center}
body[data-page="hosting"] .plans .plan-head>div{width:100%;min-width:0}
body[data-page="hosting"] .hosting-plan-art{display:block;width:min(100%,244px);height:186px;object-fit:cover;object-position:50% 60%;margin:0 auto;flex:0 0 auto}
body[data-page="hosting"] .plans .plan h3{margin:0;font-size:23px;font-weight:750;line-height:1.3;letter-spacing:-.02em;overflow-wrap:break-word}
body[data-page="hosting"] .plans .plan-head .small{min-height:20px;max-width:100%;margin:8px auto 0;font-size:13px;line-height:1.5;color:#c6d8e8}
body[data-page="hosting"] .plans .price{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:center;gap:5px 7px;margin:14px 0 0;font-size:44px;font-weight:800;line-height:1.2;letter-spacing:-.025em;font-variant-numeric:tabular-nums;color:#f5f9ff}
body[data-page="hosting"] .plans .price .price-value{font-size:inherit;font-weight:inherit;color:inherit;white-space:nowrap}
body[data-page="hosting"] .plans .price .price-unit{font-size:15px;font-weight:450;line-height:1.4;letter-spacing:0;color:#c6d8e8;white-space:nowrap}
body[data-page="hosting"] .hosting-price-detail{min-height:22px;margin:8px 0 15px;font-size:12px;line-height:1.6;color:#c2d3e3;text-wrap:balance}
body[data-page="hosting"] .plans .feature-list{display:flex;flex-direction:column;gap:12px;flex:1;width:100%;margin:0 0 20px;padding:16px 0 0;border-top:1px solid #1d536f;list-style:none}
body[data-page="hosting"] .plans .feature-list li{display:flex;align-items:flex-start;justify-content:flex-start!important;gap:10px;min-width:0;max-width:100%;margin:0;padding:0;font-size:13px;line-height:1.5;text-align:left!important;overflow-wrap:anywhere;color:#d2e1ec}
body[data-page="hosting"] .plans .feature-list li::before{content:"";display:block;position:static;flex:0 0 18px;width:18px;height:18px;margin-top:2px;background:url('/assets/hosting-icons-20261012/info-circle.svg') center/contain no-repeat}
body[data-page="hosting"] .plans .select-plan{display:flex;align-items:center;justify-content:center;width:100%;min-width:0;min-height:48px;margin:0;padding:11px 12px;border:1px solid #078fff;border-radius:10px;background:#031a2e;color:#fff;font-size:14px;font-weight:700;line-height:1.4;text-align:center;white-space:normal}
body[data-page="hosting"] .plans .select-plan.primary{background:#0787ff;border-color:#0787ff;box-shadow:0 5px 15px #0087ff26}
body[data-page="hosting"] .plans .select-plan:hover:not(:disabled){background:#103350}
body[data-page="hosting"] .plans .select-plan.primary:hover:not(:disabled){background:#1677df}
body[data-page="hosting"] .hosting-benefits{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:center;margin-top:22px;padding:14px 0;background:#041c32;border:1px solid #14577e;border-radius:14px}
body[data-page="hosting"] .hosting-benefits .item{display:flex;flex-direction:row;align-items:center;justify-content:center;gap:13px;min-width:0;padding:0 14px;font-size:14px;line-height:1.5}
body[data-page="hosting"] .hosting-benefits .item+.item{border-left:1px solid #174d70}
body[data-page="hosting"] .hosting-benefits .item img{width:27px;height:27px;flex:0 0 27px}
body[data-page="hosting"] .hosting-benefits .item b{font-weight:550;min-width:0}
body[data-page="hosting"] .hosting-packages .dashboard-grid{margin-top:24px!important}
@media(min-width:641px) and (max-width:980px){
  body[data-page="hosting"] .plans{grid-template-columns:repeat(2,minmax(0,1fr));gap:22px}
  body[data-page="hosting"] .hosting-plan-art{width:244px;height:186px}
  body[data-page="hosting"] .plans .price{font-size:42px}
}
@media(max-width:640px){
  body[data-page="hosting"] .hosting-hero{padding:25px 0 18px}
  body[data-page="hosting"] .hosting-hero .eyebrow{font-size:10px;letter-spacing:.12em;margin-bottom:10px}
  body[data-page="hosting"] .hosting-hero h1{max-width:18ch;font-size:30px;line-height:1.2}
  body[data-page="hosting"] .hosting-hero p{max-width:34ch;margin-top:12px;font-size:14px;line-height:1.6}
  body[data-page="hosting"] .hosting-packages .container{width:calc(100% - 28px)}
  body[data-page="hosting"] .hosting-state{margin:10px auto 23px;font-size:12px;max-width:40ch}
  body[data-page="hosting"] .plans{grid-template-columns:minmax(0,1fr);gap:25px}
  body[data-page="hosting"] .plans .plan{padding:18px 20px;border-radius:16px}
  body[data-page="hosting"] .plans .plan.popular{padding:17px 19px}
  body[data-page="hosting"] .hosting-plan-art{width:222px;height:170px}
  body[data-page="hosting"] .plans .plan-head{gap:10px}
  body[data-page="hosting"] .plans .plan h3{font-size:23px}
  body[data-page="hosting"] .plans .plan-head .small{min-height:0;margin-top:5px;font-size:13px}
  body[data-page="hosting"] .plans .price{font-size:43px;margin-top:15px}
  body[data-page="hosting"] .hosting-price-detail{min-height:0;margin:7px 0 15px}
  body[data-page="hosting"] .plans .feature-list{padding-top:15px;margin-bottom:17px}
  body[data-page="hosting"] .plans .select-plan{min-height:48px}
  body[data-page="hosting"] .hosting-benefits{grid-template-columns:1fr;padding:5px 16px;gap:0;margin-top:22px}
  body[data-page="hosting"] .hosting-benefits .item{padding:13px 0;gap:11px}
  body[data-page="hosting"] .hosting-benefits .item+.item{border-left:0;border-top:1px solid #174d70}
}
@media(prefers-reduced-motion:reduce){body[data-page="hosting"] .plan,body[data-page="hosting"] .select-plan{transition:none;animation:none}}