/* Hosting page — final design (Oct 2026). Loaded only by hosting.php, after polish.css.
   Hero → "Choose the Perfect Hosting Plan": tabs, size chips, plan card + website promo, perks. */
main.hosting-page{--hb:#1261ff;--hp:#5b2fe8;--hk:#0f1a3a;--hm:#5b6b82;--hl:#e4e9f2}

/* ---------- section ---------- */
main.hosting-page .hp2{max-width:1180px;margin:0 auto;padding:46px 22px 30px}
main.hosting-page .hp2-head{text-align:center;margin-bottom:26px}
main.hosting-page .hp2-head h2{margin:0 0 8px;font-size:36px;line-height:1.2;font-weight:800;letter-spacing:-.5px;color:var(--hk)}
main.hosting-page .hp2-head h2 span{color:var(--hk)}
main.hosting-page .hp2-head p{margin:0;font-size:15px;line-height:1.6;color:var(--hm)}

/* ---------- tabs: icon left, text right ---------- */
main.hosting-page .hp2-tabs{display:flex;gap:14px;margin:0 0 16px}
main.hosting-page .hp2-tab{flex:0 1 280px;display:grid;grid-template-columns:46px minmax(0,1fr);grid-template-rows:auto auto;column-gap:14px;align-items:center;text-align:left;padding:16px 18px;min-height:84px;border-radius:14px;border:1.5px solid var(--hl);background:#fff;cursor:pointer;font:inherit;box-shadow:0 4px 14px rgba(15,42,77,.04);transition:border-color .15s,box-shadow .15s,transform .15s}
main.hosting-page .hp2-tab:hover{border-color:#b9cdf3;transform:translateY(-1px)}
main.hosting-page .hp2-tab:focus-visible{outline:3px solid #c7b8ff;outline-offset:2px}
main.hosting-page .hp2-tic{grid-row:1 / span 2;width:46px;height:46px;border-radius:12px;display:inline-flex;align-items:center;justify-content:center;background:#eef3ff;color:var(--hb)}
main.hosting-page .hp2-tic .icon{width:22px;height:22px}
main.hosting-page .hp2-tab strong{align-self:end;font-size:16px;line-height:1.25;color:var(--hk)}
main.hosting-page .hp2-tab small{align-self:start;font-size:13.5px;line-height:1.35;color:var(--hm)}
main.hosting-page .hp2-tab.active{background:linear-gradient(120deg,#1d5cff,#5b2fe8);border-color:transparent;box-shadow:0 12px 26px rgba(52,72,240,.28)}
main.hosting-page .hp2-tab.active strong{color:#fff}
main.hosting-page .hp2-tab.active small{color:rgba(255,255,255,.85)}
main.hosting-page .hp2-tab.active .hp2-tic{background:rgba(255,255,255,.18);color:#fff}

/* ---------- white box ---------- */
main.hosting-page .hp2-box{background:#fff;border:1px solid var(--hl);border-radius:16px;box-shadow:0 10px 28px rgba(15,42,77,.05);padding:22px}
main.hosting-page .hp2-panel[hidden]{display:none}

/* size chips */
main.hosting-page .hp2-sizes{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 20px}
main.hosting-page .hp2-sizes-label{font-size:14px;font-weight:700;color:var(--hm);margin-right:4px}
main.hosting-page .hp2-size{min-width:66px;height:38px;padding:0 14px;border-radius:6px;border:1px solid #d6deeb;background:#fff;color:#1e2b45;font:inherit;font-size:14px;font-weight:600;cursor:pointer;transition:all .15s}
main.hosting-page .hp2-size:hover{border-color:var(--hb);color:var(--hb)}
main.hosting-page .hp2-size.active{background:var(--hb);border-color:var(--hb);color:#fff;box-shadow:0 6px 14px rgba(18,97,255,.25)}
main.hosting-page .hp2-size:focus-visible{outline:3px solid #c7b8ff;outline-offset:2px}

/* plan card + promo side by side */
main.hosting-page .hp2-grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:22px;align-items:stretch}
main.hosting-page .hp2-card{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);border:1px solid var(--hl);border-radius:12px;background:#fff;box-shadow:0 6px 18px rgba(15,42,77,.05);height:100%}
main.hosting-page .hp2-card[hidden]{display:none}
main.hosting-page .hp2-main{padding:24px 22px;display:flex;flex-direction:column;align-items:flex-start;gap:0}
main.hosting-page .hp2-main h3{margin:0 0 6px;font-size:20px;font-weight:800;color:var(--hk);line-height:1.25}
main.hosting-page .hp2-desc{margin:0 0 10px;font-size:14px;color:#3c4a63}
main.hosting-page .hp2-badge{display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:6px;background:#dcfce7;color:#15803d;font-size:12px;font-weight:700;margin-bottom:4px}
main.hosting-page .hp2-price{margin-top:16px;display:flex;align-items:baseline;gap:6px}
main.hosting-page .hp2-price b{font-size:34px;font-weight:800;color:var(--hb);letter-spacing:-.5px;line-height:1}
main.hosting-page .hp2-price span{font-size:15px;color:var(--hm)}
main.hosting-page .hp2-billed{margin:6px 0 18px;font-size:13.5px;color:var(--hm)}
main.hosting-page .hp-cycle{display:flex;flex-direction:column;gap:10px;width:100%;max-width:230px;margin-bottom:22px}
main.hosting-page .hp-opt{position:relative;cursor:pointer;margin:0}
main.hosting-page .hp-opt input{position:absolute;opacity:0;pointer-events:none}
main.hosting-page .hp-opt span{display:flex;align-items:center;gap:8px;min-height:46px;padding:0 12px 0 40px;border:1.5px solid #dbe4f2;border-radius:10px;background:#fff;position:relative;transition:border-color .15s,background .15s}
main.hosting-page .hp-opt span::before{content:"";position:absolute;left:14px;top:50%;width:16px;height:16px;margin-top:-8px;border-radius:50%;border:2px solid #b6c4da;background:#fff;box-sizing:border-box}
main.hosting-page .hp-opt b{font-size:14px;font-weight:700;color:#1e2b45}
main.hosting-page .hp-opt em{font-style:normal;font-size:14.5px;font-weight:800;color:var(--hk)}
main.hosting-page .hp-opt em small{font-size:12px;font-weight:600;color:var(--hm);margin-left:1px}
main.hosting-page .hp-opt input:checked+span{border-color:var(--hp);background:#f6f2ff}
main.hosting-page .hp-opt input:checked+span::before{border-color:var(--hp);background:radial-gradient(circle,var(--hp) 0 4px,#fff 5px)}
main.hosting-page .hp-opt input:focus-visible+span{outline:3px solid #c7b8ff;outline-offset:2px}
main.hosting-page .hp-add{margin:0}
main.hosting-page .hp2 .btn{min-height:46px;padding:0 24px;border-radius:999px;font-size:15px;font-weight:600}
main.hosting-page .hp-next{display:flex;flex-direction:column;gap:10px;margin-top:12px;width:100%}
main.hosting-page .hp-next[hidden]{display:none}
main.hosting-page .hp-next .btn{width:100%}
main.hosting-page .hp-checkout{background:#fff;color:var(--hp);border:1.5px solid var(--hp)}
main.hosting-page .hp-checkout:hover{background:#f4f0ff}

/* specification column */
main.hosting-page .hp2-spec{padding:24px 22px;border-left:1px solid var(--hl)}
main.hosting-page .hp2-spec h4{display:inline-block;margin:0 0 14px;padding-bottom:4px;font-size:15px;font-weight:700;color:var(--hk);border-bottom:2px solid var(--hk)}
main.hosting-page .hp2-spec ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px}
main.hosting-page .hp2-spec li{display:grid;grid-template-columns:22px minmax(0,1fr) 20px;align-items:center;gap:10px;font-size:14px;color:#1e2b45}
main.hosting-page .hp2-fic{display:inline-flex;color:var(--hb)}
main.hosting-page .hp2-fic .icon{width:18px;height:18px}
main.hosting-page .hp2-fic.ic-server{color:#0e9fb3}
main.hosting-page .hp2-fic.ic-globe{color:#1261ff}
main.hosting-page .hp2-fic.ic-monitor{color:#ea6c0a}
main.hosting-page .hp2-fic.ic-grid{color:#e2531d}
main.hosting-page .hp2-fic.ic-lock{color:#16a34a}
main.hosting-page .hp2-fic.ic-shield-check{color:#0ea5e9}
main.hosting-page .hp2-fic.ic-check-circle{color:#0d9488}
main.hosting-page .hp2-fic.ic-headset{color:#2563eb}
main.hosting-page .hp2-fic.ic-user{color:#7c3aed}
main.hosting-page .hp2-info{position:relative;width:18px;height:18px;border-radius:50%;border:1.5px solid #a3b0c5;background:#fff;color:#7d8aa3;font:700 11px/1 Georgia,serif;font-style:italic;padding:0;cursor:help;display:inline-flex;align-items:center;justify-content:center}
main.hosting-page .hp2-info:hover,main.hosting-page .hp2-info:focus-visible{border-color:var(--hb);color:var(--hb);outline:none}
main.hosting-page .hp2-info::after{content:attr(data-tip);position:absolute;right:-6px;bottom:calc(100% + 8px);width:220px;padding:9px 11px;border-radius:8px;background:#0f1a3a;color:#fff;font:500 12.5px/1.45 inherit;font-family:inherit;font-style:normal;text-align:left;box-shadow:0 10px 24px rgba(15,26,58,.25);opacity:0;visibility:hidden;transform:translateY(4px);transition:all .15s;z-index:20;pointer-events:none}
main.hosting-page .hp2-info:hover::after,main.hosting-page .hp2-info:focus::after{opacity:1;visibility:visible;transform:none}

/* website-design promo */
main.hosting-page .hp2-promo{position:relative;overflow:hidden;border-radius:12px;border:1px solid var(--hl);min-height:430px;display:flex;flex-direction:column;justify-content:space-between;padding:24px;background:linear-gradient(160deg,#f5f2ff 0%,#eaf2ff 60%,#e4ecff 100%);background-size:cover;background-position:center}
main.hosting-page .hp2-promo.has-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.92) 0%,rgba(255,255,255,.75) 38%,rgba(255,255,255,0) 62%)}
main.hosting-page .hp2-promo-copy{position:relative;z-index:2;max-width:330px}
main.hosting-page .hp2-promo-tag{display:inline-block;font-size:12px;font-weight:700;background:#fff1e0;color:#9a4a00;border-radius:999px;padding:4px 10px;margin-bottom:10px}
main.hosting-page .hp2-promo h3{margin:0 0 8px;font-size:30px;line-height:1.08;font-weight:800;letter-spacing:-.6px;color:#0b1020}
main.hosting-page .hp2-promo p{margin:0 0 10px;font-size:13.5px;line-height:1.5;color:#2b3550}
main.hosting-page .hp2-promo-price{font-size:14px;color:#3c4a63}
main.hosting-page .hp2-promo-price b{font-size:20px;color:var(--hp);font-weight:800}
main.hosting-page .hp2-promo-buy{position:relative;z-index:2;display:flex;justify-content:center}
main.hosting-page .hp2-promo-buy .btn{box-shadow:0 10px 22px rgba(91,47,232,.30)}
/* drawn stand-in when no photo is uploaded: three small shop websites */
main.hosting-page .hp2-promo-art{position:absolute;right:-30px;bottom:56px;width:300px;height:220px;z-index:1}
main.hosting-page .pa-win{position:absolute;background:#fff;border-radius:10px;box-shadow:0 14px 30px rgba(40,30,120,.16);overflow:hidden;display:flex;flex-direction:column;gap:6px;padding:0 0 10px}
main.hosting-page .pa-win i{display:block;height:14px;background:#eef1f8;border-bottom:1px solid #e3e8f2}
main.hosting-page .pa-win b{display:block;height:58px;margin:0 8px;border-radius:6px}
main.hosting-page .pa-win span,main.hosting-page .pa-win em{display:block;height:7px;margin:0 8px;border-radius:4px;background:#e6eaf3}
main.hosting-page .pa-win em{width:40%;background:#c9bbff;height:12px}
main.hosting-page .pa-1{left:0;top:40px;width:150px;transform:rotate(-4deg)}
main.hosting-page .pa-1 b{background:linear-gradient(135deg,#ffd6a5,#ff9f68)}
main.hosting-page .pa-2{left:95px;top:0;width:150px;z-index:2}
main.hosting-page .pa-2 b{background:linear-gradient(135deg,#b8f2d0,#3fbf86)}
main.hosting-page .pa-3{left:185px;top:60px;width:130px;transform:rotate(5deg)}
main.hosting-page .pa-3 b{background:linear-gradient(135deg,#c7d7ff,#6c8cff)}

/* perks */
main.hosting-page .hp2-perks{margin-top:18px;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px;background:#fff;border:1px solid var(--hl);border-radius:14px;padding:20px 22px}
main.hosting-page .hp2-perks>div{display:flex;gap:12px;align-items:flex-start}
main.hosting-page .hp2-pic{width:44px;height:44px;flex:none;border-radius:50%;background:#eaf1ff;color:var(--hb);display:inline-flex;align-items:center;justify-content:center}
main.hosting-page .hp2-pic .icon{width:20px;height:20px}
main.hosting-page .hp2-perks strong{display:block;font-size:14.5px;color:var(--hk);margin-bottom:2px}
main.hosting-page .hp2-perks small{display:block;font-size:13px;line-height:1.45;color:var(--hm)}

/* lower sections */
main.hosting-page .hosting-domain-mini{margin-top:8px;margin-bottom:30px}

/* ---------- tablet ---------- */
@media (max-width:1000px){
  main.hosting-page .hp2-grid{grid-template-columns:minmax(0,1fr)}
  main.hosting-page .hp2-promo{min-height:360px}
  main.hosting-page .hp2-perks{grid-template-columns:repeat(2,minmax(0,1fr))}
}

/* ---------- phone: reach "Add to Cart" with little scrolling ---------- */
@media (max-width:620px){
  /* short hero */
  main.hosting-page .hosting-hero{grid-template-columns:minmax(0,1fr);padding-top:14px;padding-bottom:0;gap:0}
  main.hosting-page .hosting-hero-copy{min-width:0;max-width:100%}
  main.hosting-page .hosting-hero-art,main.hosting-page .hosting-hero .eyebrow,main.hosting-page .hosting-hero .actions{display:none}
  main.hosting-page .hosting-hero-copy h1{font-size:25px;line-height:1.2;letter-spacing:-.3px;margin:0 0 8px}
  main.hosting-page .hosting-hero-copy p{font-size:14px;line-height:1.5;margin:0 0 10px;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
  main.hosting-page .hosting-trust{display:flex;flex-wrap:nowrap;overflow-x:auto;gap:6px;margin:0;scrollbar-width:none}
  main.hosting-page .hosting-trust::-webkit-scrollbar{display:none}
  main.hosting-page .hosting-trust span{flex:none;font-size:12px;background:#eef6ff;border-radius:999px;padding:5px 10px;white-space:nowrap}

  main.hosting-page .hp2{padding:18px 16px 20px}
  main.hosting-page .hp2-head{margin-bottom:12px}
  main.hosting-page .hp2-head h2{font-size:22px}
  main.hosting-page .hp2-head p{display:none}
  /* tabs: one swipeable row */
  main.hosting-page .hp2-tabs{overflow-x:auto;gap:8px;margin:0 -16px 12px;padding:2px 16px 6px;scrollbar-width:none}
  main.hosting-page .hp2-tabs::-webkit-scrollbar{display:none}
  main.hosting-page .hp2-tab{flex:none;grid-template-columns:30px auto;grid-template-rows:auto;column-gap:8px;padding:7px 14px 7px 7px;min-height:0;border-radius:999px;box-shadow:none}
  main.hosting-page .hp2-tab.active{box-shadow:none}
  main.hosting-page .hp2-tic{grid-row:auto;width:30px;height:30px;border-radius:50%}
  main.hosting-page .hp2-tic .icon{width:16px;height:16px}
  main.hosting-page .hp2-tab strong{align-self:center;font-size:13.5px;white-space:nowrap}
  main.hosting-page .hp2-tab small{display:none}
  main.hosting-page .hp2-box{padding:12px;border-radius:14px}
  /* sizes: one swipeable row */
  main.hosting-page .hp2-sizes{flex-wrap:nowrap;overflow-x:auto;gap:8px;margin:0 -12px 12px;padding:2px 12px 4px;scrollbar-width:none}
  main.hosting-page .hp2-sizes::-webkit-scrollbar{display:none}
  main.hosting-page .hp2-sizes-label{flex:none;font-size:12.5px}
  main.hosting-page .hp2-size{flex:none;min-width:58px;height:36px;font-size:13.5px}
  /* card: buy box first, specification after */
  main.hosting-page .hp2-grid{gap:14px}
  main.hosting-page .hp2-card{grid-template-columns:minmax(0,1fr)}
  main.hosting-page .hp2-main{padding:16px}
  main.hosting-page .hp2-main h3{font-size:18px}
  main.hosting-page .hp2-desc{font-size:13.5px;margin-bottom:6px}
  main.hosting-page .hp2-price{margin-top:8px}
  main.hosting-page .hp2-price b{font-size:28px}
  main.hosting-page .hp2-billed{margin:4px 0 12px}
  main.hosting-page .hp-cycle{flex-direction:row;max-width:none;margin-bottom:12px}
  main.hosting-page .hp-opt{flex:1}
  main.hosting-page .hp-opt span{flex-direction:column;align-items:flex-start;justify-content:center;gap:0;padding:6px 8px 6px 34px;min-height:52px}
  main.hosting-page .hp-opt span::before{left:11px}
  main.hosting-page .hp-add,main.hosting-page .hp-add .btn{width:100%}
  main.hosting-page .hp2-spec{border-left:0;border-top:1px solid var(--hl);padding:14px 16px}
  main.hosting-page .hp2-spec ul{gap:10px}
  main.hosting-page .hp2-info::after{width:190px}
  main.hosting-page .hp2-promo{min-height:320px;padding:18px}
  main.hosting-page .hp2-promo h3{font-size:24px}
  main.hosting-page .hp2-promo-art{transform:scale(.8);transform-origin:right bottom;bottom:60px}
  main.hosting-page .hp2-promo-buy .btn{width:100%}
  main.hosting-page .hp2-perks{grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:14px}
  main.hosting-page .hp2-perks>div{flex-direction:column;gap:8px}
  main.hosting-page .hp2-pic{width:38px;height:38px}
  /* keep the lower boxes off the screen edges */
  main.hosting-page .hosting-domain-mini,main.hosting-page .hosting-cta{margin-left:16px;margin-right:16px;width:auto;box-sizing:border-box}
}
/* promo: drawing sits between the text and the button, never under the text */
main.hosting-page .hp2-promo-copy{max-width:none}
main.hosting-page .hp2-promo-art{position:relative;right:auto;bottom:auto;width:300px;height:190px;margin:8px auto 14px;flex:none}
@media (max-width:620px){main.hosting-page .hp2-promo-art{transform:scale(.85);transform-origin:center;margin:0 auto 6px;bottom:auto}}
main.hosting-page .hp-next .btn{font-size:14px;padding:0 16px}

/* ===== Oct 8 (2): no divider in the plan card; right side = 3-slide service slider ===== */
main.hosting-page .hp2-spec{border-left:0;padding-left:8px}
main.hosting-page .hp2-promo{position:relative;padding:0;min-height:440px;background:#e9e8e6;display:block;overflow:hidden;border-radius:12px;border:1px solid var(--hl)}
main.hosting-page .hp2-promo::before{display:none}
main.hosting-page .hp2-slide{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:space-between;padding:30px 30px 52px;background-size:cover;background-position:center right;opacity:0;visibility:hidden;transition:opacity .5s ease,visibility .5s}
main.hosting-page .hp2-slide.active{opacity:1;visibility:visible}
main.hosting-page .hp2-slide-1{background-color:#e9e8e6}
main.hosting-page .hp2-slide-2{background-color:#e6eefb}
main.hosting-page .hp2-slide-3{background-color:#e5f3ec}
main.hosting-page .hp2-slide.has-photo::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.85) 0%,rgba(255,255,255,.55) 32%,rgba(255,255,255,0) 55%)}
main.hosting-page .hp2-slide .hp2-promo-copy{position:relative;z-index:2;max-width:360px}
main.hosting-page .hp2-slide h3{margin:0 0 12px;font-family:'Poppins','Inter',sans-serif;font-size:38px;line-height:1.05;font-weight:800;letter-spacing:-1px;color:#0b0b0f}
html[lang=bn] main.hosting-page .hp2-slide h3{font-family:inherit;font-size:32px;line-height:1.2;letter-spacing:-.3px}
main.hosting-page .hp2-slide p{margin:0;font-size:13.5px;line-height:1.5;color:#2a2f3a;max-width:300px}
main.hosting-page .hp2-slide .hp2-promo-buy{position:relative;z-index:2;justify-content:flex-start}
main.hosting-page .hp2-dots{position:absolute;left:0;right:0;bottom:14px;z-index:3;display:flex;justify-content:center;gap:10px}
main.hosting-page .hp2-dot{width:12px;height:12px;padding:0;border-radius:50%;border:0;background:#a3a8b3;cursor:pointer;transition:background .2s,transform .2s}
main.hosting-page .hp2-dot.active{background:var(--hp);transform:scale(1.15)}
main.hosting-page .hp2-dot:focus-visible{outline:3px solid #c7b8ff;outline-offset:2px}
main.hosting-page .hp2-promo-art,main.hosting-page .hp2-promo-tag,main.hosting-page .hp2-promo-price{display:none}
@media (max-width:1000px){main.hosting-page .hp2-promo{min-height:380px}}
@media (max-width:620px){
  main.hosting-page .hp2-spec{border-top:1px solid var(--hl);padding-left:16px}
  main.hosting-page .hp2-promo{min-height:330px}
  main.hosting-page .hp2-slide{padding:20px 18px 44px}
  main.hosting-page .hp2-slide h3{font-size:28px}
  html[lang=bn] main.hosting-page .hp2-slide h3{font-size:24px}
  main.hosting-page .hp2-slide .hp2-promo-buy .btn{width:auto}
}
/* slider: price line + 4th slide colour */
main.hosting-page .hp2-slide-price{margin-top:14px;font-size:14px;font-weight:600;color:#2a2f3a}
main.hosting-page .hp2-slide-price b{font-size:22px;font-weight:800;color:var(--hp);margin-left:2px}
main.hosting-page .hp2-slide-4{background-color:#f6eee4}

/* ===== Oct 8 (3): hero = 3 background photos that dissolve; Poppins SemiBold headings ===== */
main.hosting-page .hh-wrap{position:relative;overflow:hidden;background:#f3f6fd}
main.hosting-page .hh-bg{position:absolute;inset:0;z-index:0}
main.hosting-page .hh-slide{position:absolute;inset:0;background-size:cover;background-position:center right;opacity:0;transition:opacity 1.6s ease-in-out}
main.hosting-page .hh-slide.active{opacity:1}
main.hosting-page .hh-slide-1{background-color:#edf3ff;background-image:linear-gradient(115deg,#f4f7ff 0%,#e6eeff 55%,#dfe6ff 100%)}
main.hosting-page .hh-slide-2{background-color:#ebf8f3;background-image:linear-gradient(115deg,#f3fbf8 0%,#e5f5ef 55%,#dcefff 100%)}
main.hosting-page .hh-slide-3{background-color:#f6f0ff;background-image:linear-gradient(115deg,#faf7ff 0%,#f0e9ff 55%,#ffeede 100%)}
main.hosting-page .hh-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(255,255,255,.94) 0%,rgba(255,255,255,.80) 38%,rgba(255,255,255,.15) 68%,rgba(255,255,255,0) 100%)}
main.hosting-page .hh-wrap .hosting-hero{position:relative;z-index:1;grid-template-columns:minmax(0,1fr);min-height:440px;align-items:center;padding-top:34px;padding-bottom:40px}
main.hosting-page .hh-wrap .hosting-hero-copy{max-width:660px}
main.hosting-page .hosting-hero-copy h1,
main.hosting-page .hp2-head h2,
main.hosting-page .hp2-slide h3{font-family:'Poppins','Inter',sans-serif;font-weight:600;letter-spacing:-.025em}
main.hosting-page .hosting-hero-copy h1{line-height:1.12}
main.hosting-page .hp2-head h2{font-size:38px}
html[lang=bn] main.hosting-page .hp2-head h2,html[lang=bn] main.hosting-page .hp2-slide h3{font-family:'Poppins','Noto Sans Bengali',sans-serif}
@media (max-width:620px){
  main.hosting-page .hh-wrap .hosting-hero{min-height:0;padding-top:18px;padding-bottom:18px}
  main.hosting-page .hh-bg::after{background:linear-gradient(180deg,rgba(255,255,255,.88),rgba(255,255,255,.72))}
  main.hosting-page .hp2-head h2{font-size:23px}
}

/* ===== Self-contained: the hosting page looks the same with or without the site-wide polish.css ===== */
main.hosting-page .btn{min-height:46px;padding:0 22px;border-radius:999px;font-size:15px;font-weight:600;line-height:1.2;display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none;cursor:pointer;transition:background .15s,border-color .15s,transform .15s}
main.hosting-page .btn:hover{transform:translateY(-1px)}
main.hosting-page .btn.primary{background:#5b2fe8;border:1.5px solid #5b2fe8;color:#fff;box-shadow:0 8px 20px rgba(91,47,232,.22)}
main.hosting-page .btn.primary:hover{background:#4a22d6;border-color:#4a22d6;color:#fff}
main.hosting-page .btn.secondary{background:#fff;border:1.5px solid #5b2fe8;color:#5b2fe8;box-shadow:none}
main.hosting-page .btn.secondary:hover{background:#f4f0ff}
main.hosting-page .btn.is-in-cart,main.hosting-page .btn.is-in-cart:disabled{background:#16a34a;border-color:#16a34a;color:#fff;opacity:1;box-shadow:none}
main.hosting-page .btn[disabled]{cursor:default;transform:none}
main.hosting-page .breadcrumbs{font-size:13.5px}
main.hosting-page .hosting-hero .eyebrow{font-size:11.5px;font-weight:800;letter-spacing:.06em;padding:5px 12px}
main.hosting-page .hosting-hero-copy p{font-size:16px;line-height:1.6}
main.hosting-page .hosting-trust span{font-size:13.5px}
main.hosting-page .hosting-domain-mini input,main.hosting-page .hosting-domain-mini select{min-height:46px;font-size:15px;border-radius:10px;border:1.5px solid #d6deeb}
main.hosting-page .hosting-domain-mini .domain-title p,main.hosting-page .hosting-cta p{font-size:14px}

/* ===== Oct 8 (4): same content width as the homepage (1280 container, 22px sides = 1236px);
   plan card and website slider share the row equally ===== */
main.hosting-page .hp2{max-width:1280px;padding-left:22px;padding-right:22px}
main.hosting-page .hp2-grid{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
main.hosting-page .hosting-domain-mini,main.hosting-page .hosting-cta{max-width:1236px;margin-left:auto;margin-right:auto;box-sizing:border-box}
@media (max-width:1000px){main.hosting-page .hp2-grid{grid-template-columns:minmax(0,1fr)}}
@media (max-width:620px){main.hosting-page .hp2{padding-left:16px;padding-right:16px}main.hosting-page .hosting-domain-mini,main.hosting-page .hosting-cta{max-width:none;margin-left:16px;margin-right:16px}}

/* ===== Oct 8 (5): no white box around sizes + plan + slider — they run edge to edge like the tabs and perks ===== */
main.hosting-page .hp2-box{background:transparent;border:0;box-shadow:none;padding:0;border-radius:0}
main.hosting-page .hp2-sizes{margin-bottom:18px}
@media (max-width:620px){main.hosting-page .hp2-box{padding:0}main.hosting-page .hp2-sizes{margin:0 -16px 12px;padding:2px 16px 4px}}

/* ===== Oct 8 (6): hosting banner coloured like the homepage hero (deep purple → navy, white text) ===== */
main.hosting-page .hh-wrap{background:#061a39;color:#fff}
main.hosting-page .hh-slide{background-color:#061a39}
main.hosting-page .hh-slide-1{background-image:linear-gradient(90deg,rgba(59,50,171,.94) 0%,rgba(50,7,169,.86) 30%,rgba(24,10,119,.5) 55%,rgba(3,20,46,.14) 82%),url('../images/hero-bg.svg')}
main.hosting-page .hh-slide-2{background-image:linear-gradient(90deg,rgba(18,44,140,.95) 0%,rgba(12,58,160,.86) 30%,rgba(10,30,110,.5) 55%,rgba(3,20,46,.14) 82%),url('../images/hero-bg.svg')}
main.hosting-page .hh-slide-3{background-image:linear-gradient(90deg,rgba(76,29,149,.95) 0%,rgba(91,33,182,.86) 30%,rgba(30,27,120,.5) 55%,rgba(3,20,46,.14) 82%),url('../images/hero-bg.svg')}
main.hosting-page .hh-slide{background-size:cover;background-position:center right}
/* uploaded photos keep a coloured fade on the left so white text stays readable */
main.hosting-page .hh-bg::after{background:linear-gradient(90deg,rgba(50,7,169,.88) 0%,rgba(40,10,140,.70) 35%,rgba(10,20,80,.25) 62%,rgba(3,20,46,0) 85%)}
main.hosting-page .hh-wrap .hosting-hero-copy h1{color:#fff}
main.hosting-page .hh-wrap .hosting-hero-copy h1 span{color:#8fc1ff}
main.hosting-page .hh-wrap .hosting-hero-copy p{color:rgba(255,255,255,.86)}
main.hosting-page .hh-wrap .breadcrumbs,main.hosting-page .hh-wrap .breadcrumbs a{color:rgba(255,255,255,.75)}
main.hosting-page .hh-wrap .hosting-hero .eyebrow{background:#fff;color:#1f3fb8}
main.hosting-page .hh-wrap .hosting-trust span{color:#fff}
main.hosting-page .hh-wrap .actions .btn.primary{background:#6d3ff0;border-color:#6d3ff0;box-shadow:0 10px 24px rgba(20,8,90,.45)}
main.hosting-page .hh-wrap .actions .btn.primary:hover{background:#5b2fe8;border-color:#5b2fe8}
main.hosting-page .hh-wrap .actions .btn.secondary{background:#16a34a;border-color:#16a34a;color:#fff;box-shadow:0 10px 22px rgba(22,163,74,.30)}
main.hosting-page .hh-wrap .actions .btn.secondary:hover{background:#15803d;border-color:#15803d;color:#fff}
@media (max-width:620px){main.hosting-page .hh-bg::after{background:linear-gradient(180deg,rgba(50,7,169,.80),rgba(24,10,119,.70))}}
@media (max-width:620px){main.hosting-page .hh-wrap .hosting-trust span{background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.18)}}

/* ===== Oct 9: "Add Domain" button + popup, bottom cart strip spacing ===== */
main.hosting-page .hp-add-domain .icon{width:18px;height:18px}
main.hosting-page .hp-add-domain.is-in-cart{background:#ecfdf3;border-color:#86efac;color:#15803d;box-shadow:none;cursor:default}
html.hd-open{overflow:hidden}
.hd-modal{position:fixed;inset:0;z-index:1000;display:flex;align-items:center;justify-content:center;padding:16px}
.hd-modal[hidden]{display:none}
.hd-back{position:absolute;inset:0;background:rgba(10,16,40,.55)}
.hd-box{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);overflow:auto;background:#fff;border-radius:18px;box-shadow:0 30px 70px rgba(10,16,40,.35);padding:26px 24px 20px;color:#0f1a3a}
.hd-x{position:absolute;top:10px;right:12px;width:38px;height:38px;border-radius:50%;border:0;background:#f1f4fa;font-size:22px;line-height:1;cursor:pointer;color:#334155}
.hd-box h3{margin:0 0 4px;font-size:21px;font-weight:700}
.hd-sub{margin:0 0 16px;font-size:14px;color:#15803d;font-weight:600}
.hd-form{display:flex;gap:10px}
.hd-form input{flex:1;min-width:0;height:48px;border:1.5px solid #d6deeb;border-radius:12px;padding:0 14px;font-size:16px}
.hd-form input:focus{outline:none;border-color:#5b2fe8;box-shadow:0 0 0 3px rgba(91,47,232,.14)}
.hd-form .btn,.hd-row .btn{min-height:46px;padding:0 20px;border-radius:999px;background:#5b2fe8;border:1.5px solid #5b2fe8;color:#fff;font-weight:600;font-size:15px;cursor:pointer}
.hd-status{min-height:20px;margin:10px 2px;font-size:14px;color:#5b6b82}
.hd-list{display:flex;flex-direction:column;gap:8px}
.hd-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;padding:10px 12px 10px 14px;border:1px solid #e4e9f2;border-radius:12px}
.hd-row b{font-size:15px;overflow-wrap:anywhere}
.hd-price{font-weight:800;color:#0f1a3a;white-space:nowrap}
.hd-price small{font-weight:500;color:#5b6b82;margin-left:2px}
.hd-row .btn{min-height:38px;padding:0 16px;font-size:14px}
.hd-row .btn.is-in-cart{background:#16a34a;border-color:#16a34a}
.hd-row.is-taken{opacity:.6}
.hd-taken{font-size:13px;color:#b91c1c;font-weight:600}
.hd-own{margin:14px 2px 0;font-size:13px;color:#5b6b82}
main.hosting-page .hd-note{margin-top:14px;padding:12px 16px;border-radius:12px;background:#ecfdf3;border:1px solid #bbf0cf;color:#14532d;font-size:14.5px;font-weight:600}
body.wdh-bottom-cart-visible main.hosting-page{padding-bottom:84px}
@media (max-width:620px){.hd-box{padding:22px 16px 16px}.hd-row{grid-template-columns:minmax(0,1fr) auto}.hd-row .hd-price{grid-column:1}.hd-row .btn,.hd-row .hd-taken{grid-column:2;grid-row:1 / span 2}}

/* ===== Oct 9 (2): more hosting tabs in a sliding row, one-line action buttons, domain popup options ===== */
main.hosting-page .hp2-tabs-wrap{position:relative}
main.hosting-page .hp2-tabs{overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;padding:4px 2px 10px;margin:0 0 6px}
main.hosting-page .hp2-tabs::-webkit-scrollbar{display:none}
main.hosting-page .hp2-tab{flex:0 0 280px;scroll-snap-align:start}
main.hosting-page .hp2-tarr{position:absolute;top:calc(50% - 26px);z-index:3;width:42px;height:42px;border-radius:50%;border:1px solid #d6deeb;background:#fff;color:#1261ff;font-size:26px;line-height:1;cursor:pointer;box-shadow:0 8px 20px rgba(15,42,77,.15);display:flex;align-items:center;justify-content:center;padding-bottom:3px}
main.hosting-page .hp2-tarr[hidden]{display:none}
main.hosting-page .hp2-tarr.prev{left:-14px}
main.hosting-page .hp2-tarr.next{right:-14px}
main.hosting-page .hp2-tarr:hover{background:#1261ff;color:#fff}
/* Added to Cart + domain on one line */
main.hosting-page .hp-actrow{display:flex;flex-wrap:wrap;gap:10px;align-items:center;width:100%}
main.hosting-page .hp-actrow .hp-next{margin-top:0;width:auto;flex:1 1 0;min-width:0;display:flex}
main.hosting-page .hp-actrow .hp-next[hidden]{display:none}
main.hosting-page .hp-actrow .hp-next .btn{width:100%;max-width:100%}
main.hosting-page .hp-add-domain{min-width:0;padding:0 16px}
main.hosting-page .hp-add-domain span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap;min-width:0}
main.hosting-page .hp-add-domain.is-in-cart,main.hosting-page .hp-add-domain.is-in-cart:disabled{background:#16a34a;border-color:#16a34a;color:#fff;cursor:default}
main.hosting-page .hp-dnote{margin:12px 0 0;font-size:13px;line-height:1.5;color:#14532d;background:#ecfdf3;border:1px solid #bbf0cf;border-radius:10px;padding:8px 12px;width:100%;box-sizing:border-box}
main.hosting-page .hp-dnote[hidden]{display:none}
main.hosting-page .hp-dnote a{color:#5b2fe8;font-weight:700;text-decoration:underline}
main.hosting-page .hd-note{display:none}
/* popup: new / existing domain */
.hd-mode{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px;margin:0 0 14px}
.hd-opt{position:relative;cursor:pointer}
.hd-opt input{position:absolute;opacity:0}
.hd-opt span{display:flex;flex-direction:column;gap:2px;padding:12px 12px 12px 38px;border:1.5px solid #dbe4f2;border-radius:12px;position:relative;height:100%;box-sizing:border-box}
.hd-opt span::before{content:"";position:absolute;left:13px;top:15px;width:16px;height:16px;border-radius:50%;border:2px solid #b6c4da;box-sizing:border-box}
.hd-opt b{font-size:14px;color:#0f1a3a}
.hd-opt small{font-size:12.5px;color:#5b6b82}
.hd-opt input:checked+span{border-color:#5b2fe8;background:#f6f2ff}
.hd-opt input:checked+span::before{border-color:#5b2fe8;background:radial-gradient(circle,#5b2fe8 0 4px,#fff 5px)}
.hd-opt input:focus-visible+span{outline:3px solid #c7b8ff;outline-offset:2px}
@media (max-width:620px){
  main.hosting-page .hp2-tab{flex:none}
  main.hosting-page .hp2-tarr{display:none}
  .hd-mode{grid-template-columns:minmax(0,1fr)}
  main.hosting-page .hp-actrow{flex-direction:column;align-items:stretch}
  main.hosting-page .hp-actrow .hp-next{flex:none;width:100%}
}
main.hosting-page .hp2-card{grid-template-columns:minmax(0,1.2fr) minmax(0,1fr)}
main.hosting-page .hp-actrow .hp-add .btn{padding:0 16px;white-space:nowrap}
main.hosting-page .hp-actrow .hp-next{flex:1 1 150px}
main.hosting-page .hp-dnote{overflow-wrap:anywhere}
@media (max-width:1000px){main.hosting-page .hp2-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:620px){main.hosting-page .hp2-card{grid-template-columns:minmax(0,1fr)}}
main.hosting-page .hp-actrow .hp-next{flex:1 1 120px}

/* ===== Oct 9 (3): spec heading as a soft label, buttons lower, domain button wider, note across the card ===== */
main.hosting-page .hp2-spec h4{display:inline-flex;align-items:center;gap:6px;border:0;padding:5px 12px;margin:0 0 14px;border-radius:8px;background:linear-gradient(90deg,#e8efff,#f1ebff);color:#3b2bb8;font-size:13.5px;font-weight:700;letter-spacing:.02em}
main.hosting-page .hp2-spec h4::before{content:"";width:7px;height:7px;border-radius:50%;background:#5b2fe8}
main.hosting-page .hp2-card{grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);grid-template-rows:1fr auto}
main.hosting-page .hp-cycle{margin-bottom:26px}
main.hosting-page .hp-actrow{margin-top:auto;padding-top:4px}
main.hosting-page .hp-actrow .hp-add .btn{padding:0 14px}
main.hosting-page .hp-actrow .hp-next{flex:1 1 170px}
main.hosting-page .hp2-card>.hp-dnote{grid-column:1 / -1;margin:0 22px 22px;padding:12px 16px;font-size:14px;line-height:1.55;width:auto}
@media (max-width:620px){main.hosting-page .hp2-card{grid-template-columns:minmax(0,1fr)}main.hosting-page .hp2-card>.hp-dnote{margin:0 16px 16px}}
main.hosting-page .hp2-card{grid-template-columns:minmax(0,1.12fr) minmax(0,1fr)}@media (max-width:620px){main.hosting-page .hp2-card{grid-template-columns:minmax(0,1fr)}}
main.hosting-page .hp2-slide-price .hp2-ot{display:block;margin-top:2px;font-size:12.5px;font-weight:600;color:#5b6b82}
/* fix-44: plan price in the same purple as the website slider; mobile tab arrow visible + gentle blink */
main.hosting-page .hp2-price b{color:var(--hp)}
@keyframes hp2-arrow-blink{0%,100%{box-shadow:0 0 0 0 rgba(91,47,232,.45);opacity:1}50%{box-shadow:0 0 0 8px rgba(91,47,232,0);opacity:.75}}
@media (max-width:620px){
  main.hosting-page .hp2-tabs-wrap{position:relative}
  main.hosting-page .hp2-tarr.next:not([hidden]){display:grid;place-items:center;right:-4px;top:calc(50% - 21px);width:38px;height:38px;font-size:24px;color:#5b2fe8;border-color:#cdbcff;animation:hp2-arrow-blink 1.8s ease-in-out infinite}
  main.hosting-page .hp2-tarr.prev{display:none}
}
@media (prefers-reduced-motion:reduce){main.hosting-page .hp2-tarr{animation:none!important}}

/* fix-45: breadcrumb on phones too (same as the domain pages), icons for the two new spec lines */
@media (max-width:620px){
  main.hosting-page .hosting-hero .breadcrumbs{display:block;font-size:12.5px;margin:0 0 10px}
}
main.hosting-page .hp2-fic.ic-shield{color:#dc2626}
main.hosting-page .hp2-fic.ic-mail{color:#db2777}