/* Managed Webhosting page (jkc-hosting-page.php). Ported from the concept of
   25-09-2026; every class is prefixed jh- so nothing collides with Bootstrap
   (.row, .btn) or the theme. Colours are the site's own tokens, which the
   concept already used one to one. Buttons and eyebrows are the theme's
   (.jkc-btn, .jkc-eyebrow). The concept's dark mode is left out: the rest of
   the site has none, so this page alone would turn dark. */

.jh{
  --jh-navy:var(--jkc-navy,#04155e); --jh-blue:var(--jkc-blue,#007af5); --jh-blue-400:var(--jkc-blue-400,#429efa);
  --jh-blue-200:var(--jkc-blue-200,#bedefd); --jh-blue-100:var(--jkc-blue-100,#e0f0ff); --jh-blue-subtle:var(--jkc-blue-subtle,#f0f7ff);
  --jh-green:#297f49; --jh-green-check:#62cc88;
  --jh-text:var(--jkc-bodytext,#454c68); --jh-text-2:#3f3f46; --jh-text-3:#6b6b74;
  --jh-bg:#fff; --jh-bg-subtle:var(--jkc-bg-subtle,#f1f3f8); --jh-bg-row:#fafbfd;
  --jh-border:var(--jkc-border,#e4e4e7); --jh-border-strong:var(--jkc-border-strong,#d4d4d8);
  --jh-r-l:16px; --jh-r-xl:24px;
  /* Height of the sticky site header, kept current by hosting.js. */
  --jh-top:var(--jh-head,72px);
  color:var(--jh-text); font-size:16px; line-height:1.6;
  scroll-margin-top:var(--jh-top);
}
.jh h2,.jh h3{color:var(--jh-navy); margin:0; letter-spacing:-.4px; line-height:1.15; font-weight:800}
.jh h2{font-size:clamp(25px,3.2vw,35px); letter-spacing:-.7px}
.jh h3{font-size:clamp(17px,1.8vw,20px); letter-spacing:-.2px}
.jh p{margin:0}
.jh ul,.jh ol{margin:0; padding:0; list-style:none}

.jh-sec{padding-block:clamp(52px,7vw,96px); background:var(--jh-bg)}
.jh-sec--subtle{background:var(--jh-bg-subtle)}
.jh-sec--tight{padding-block:clamp(40px,5vw,64px)}
.jh-lede{font-size:clamp(15.5px,1.4vw,17px); line-height:1.65; max-width:66ch}
.jh-head{display:flex; flex-direction:column; gap:11px; max-width:760px; margin-bottom:32px}
.jh-head .jkc-eyebrow{margin:0}
.jh-head--gap{margin-top:56px}
.jh-note{font-size:12.5px; line-height:1.6; color:var(--jh-text-3)}
.jh-mt{margin-top:14px !important}
.jh .jkc-btn{justify-content:center; min-height:44px}
.jh-btn-sm{padding:10px 14px; font-size:13.5px}
.jh-btn-onnavy{background:#fff; color:var(--jh-navy); min-height:48px}
.jh-btn-onnavy:hover{background:var(--jh-blue-100); color:var(--jh-navy)}
.jh button{font:inherit; cursor:pointer}
.jh :focus-visible{outline:3px solid var(--jh-blue); outline-offset:2px; border-radius:4px}

/* ---------- shared vs managed ---------- */
.jh-versus{display:grid; grid-template-columns:repeat(auto-fit,minmax(290px,1fr)); gap:16px}
.jh-vs{border-radius:var(--jh-r-l); padding:24px; display:flex; flex-direction:column; gap:13px}
.jh-vs--bad{background:var(--jh-bg); border:1px solid var(--jh-border)}
.jh-vs--good{background:var(--jh-navy); border:1px solid var(--jh-navy)}
.jh .jh-vs h3{font-size:18px}
.jh .jh-vs--good h3{color:#fff}
.jh-vs ul{display:flex; flex-direction:column; gap:10px}
.jh-vs li{display:flex; align-items:flex-start; gap:10px; font-size:14px; line-height:1.5}
.jh-vs--good li{color:var(--jh-blue-200)}
.jh-vs__ico{flex-shrink:0; margin-top:3px; display:flex; color:var(--jh-text-3)}
.jh-vs--good .jh-vs__ico{color:var(--jh-green-check)}

/* ---------- the matrix ---------- */
.jh-chips{display:none; gap:7px; margin-bottom:14px; overflow-x:auto; scrollbar-width:none; padding-bottom:2px}
.jh-chips::-webkit-scrollbar{display:none}
.jh-chip{flex-shrink:0; min-height:44px; padding:10px 15px; border-radius:999px; border:1px solid var(--jh-border);
  background:var(--jh-bg); color:var(--jh-text); font-size:13.5px; font-weight:700; white-space:nowrap}
.jh-chip[aria-pressed="true"]{background:var(--jh-blue); border-color:var(--jh-blue); color:#fff}

.jh-mxbar{display:flex; flex-wrap:wrap; align-items:center; gap:12px; margin-bottom:14px}
.jh-mxbar .jh-note{margin-right:auto}

.jh-mx{border:1px solid var(--jh-border); border-radius:var(--jh-r-l); background:var(--jh-bg)}
.jh-grid6{display:grid; grid-template-columns:270px repeat(5,minmax(0,1fr))}

.jh-mx__head{position:sticky; top:var(--jh-top); z-index:50; background:var(--jh-bg); border-radius:var(--jh-r-l) var(--jh-r-l) 0 0;
  border-bottom:1px solid var(--jh-border-strong); box-shadow:0 6px 16px -12px rgba(4,21,94,.5)}
.jh-mx__intro{display:flex; align-items:flex-end; padding:16px; font-size:11.5px; font-weight:800;
  letter-spacing:1.1px; text-transform:uppercase; color:var(--jh-text-3)}
.jh-mx__plan{display:flex; flex-direction:column; align-items:center; gap:7px; padding:14px 12px 16px;
  text-align:center; border-left:1px solid var(--jh-border)}
.jh-mx__plan--pop{background:var(--jh-blue-subtle); box-shadow:inset 0 3px 0 var(--jh-blue)}
.jh-mx__badge{font-size:9.5px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#fff;
  background:var(--jh-blue); border-radius:999px; padding:3px 9px; line-height:1.5}
.jh-mx__badge--ghost{visibility:hidden}
.jh-mx__name{font-size:17px; font-weight:800; color:var(--jh-navy); line-height:1.2}
.jh-mx__price{font-size:25px; font-weight:800; color:var(--jh-navy); letter-spacing:-.7px; line-height:1.1}
.jh-mx__price--ask{font-size:18px}
.jh-mx__price small{font-size:12.5px; font-weight:700; color:var(--jh-text-3); letter-spacing:0}
.jh-mx__for{font-size:12px; color:var(--jh-text-3); line-height:1.4; min-height:2.8em}
.jh-mx__plan .jkc-btn{width:100%; margin-top:2px; white-space:normal}

/* category band */
.jh-band{width:100%; display:flex; align-items:center; gap:10px; text-align:left; border:0;
  border-top:1px solid var(--jh-border); background:var(--jh-bg-subtle); padding:15px 16px; min-height:48px;
  font-size:12.5px; font-weight:800; letter-spacing:1px; text-transform:uppercase; color:var(--jh-text-2)}
.jh-band:hover{background:var(--jh-blue-100)}
.jh-band__cnt{margin-left:auto; font-size:11.5px; font-weight:700; letter-spacing:0; text-transform:none; color:var(--jh-text-3)}
.jh-band svg{transition:transform .2s ease; flex-shrink:0}
.jh-band[aria-expanded="true"] svg{transform:rotate(180deg)}
.jh-band-body[hidden]{display:none}
.jh-band-note{padding:11px 16px; font-size:12.5px; color:var(--jh-text-3); background:var(--jh-bg-row); border-top:1px solid var(--jh-border)}
.jh-mx__body > :last-child{border-radius:0 0 var(--jh-r-l) var(--jh-r-l)}

.jh-row{border-top:1px solid var(--jh-border)}
.jh-row:nth-of-type(even){background:var(--jh-bg-row)}
.jh-row > div{padding:12px 14px; font-size:13.5px; display:flex; align-items:center; gap:7px; min-width:0}
.jh-row > div + div{border-left:1px solid var(--jh-border); justify-content:center; text-align:center; font-weight:700; color:var(--jh-navy)}
.jh-row__lbl{color:var(--jh-text-2); font-weight:600}
.jh-row > .jh-pop{background:color-mix(in srgb,var(--jh-blue-subtle) 60%,transparent)}
/* 44px hit area around a 15px icon, without growing the row. */
.jh-info{position:relative; border:0; background:transparent; padding:2px; line-height:0; color:var(--jh-text-3); border-radius:50%}
.jh-info::after{content:""; position:absolute; inset:-14px}
.jh-info:hover,.jh-info[aria-expanded="true"]{color:var(--jh-blue)}
.jh-row > .jh-tip{grid-column:1/-1; border-left:0; display:block; text-align:left; font-weight:400;
  padding:10px 14px 13px; font-size:12.5px; line-height:1.55; color:var(--jh-text-3);
  border-top:1px dashed var(--jh-border); background:var(--jh-blue-subtle)}
.jh-row > .jh-tip[hidden]{display:none}
.jh-dash{color:var(--jh-text-3); font-weight:500}
.jh-check{color:var(--jh-green); display:flex}

.jh-excl{display:flex; flex-wrap:wrap; gap:8px; margin-top:18px !important}
.jh-excl li{display:flex; align-items:center; gap:8px; font-size:13px; color:var(--jh-text-3);
  background:var(--jh-bg); border:1px solid var(--jh-border); border-radius:999px; padding:8px 14px}
.jh-excl .jh-excl__lbl{font-weight:700}

/* ---------- picker ---------- */
.jh-picker{display:grid; grid-template-columns:minmax(0,1.5fr) minmax(0,1fr); gap:18px; align-items:start}
.jh-picker__qs{display:flex; flex-direction:column; gap:18px; background:var(--jh-bg); border:1px solid var(--jh-border); border-radius:var(--jh-r-l); padding:24px}
.jh-q{display:flex; flex-direction:column; gap:9px}
.jh-q__t{font-size:14.5px; font-weight:800; color:var(--jh-navy); display:flex; gap:9px; align-items:baseline}
.jh-q__n{flex-shrink:0; width:22px; height:22px; border-radius:50%; background:var(--jh-blue-100); color:var(--jh-blue);
  font-size:11.5px; font-weight:800; display:inline-flex; align-items:center; justify-content:center; align-self:center}
.jh-opts{display:flex; flex-wrap:wrap; gap:7px}
.jh-opt{min-height:44px; padding:9px 15px; border-radius:999px; border:1px solid var(--jh-border); background:var(--jh-bg);
  color:var(--jh-text); font-size:13.5px; font-weight:700; text-align:left; transition:background .15s ease,border-color .15s ease,color .15s ease}
.jh-opt:hover{border-color:var(--jh-blue-400)}
.jh-opt[aria-pressed="true"]{background:var(--jh-blue); border-color:var(--jh-blue); color:#fff}
.jh-picker__out{position:sticky; top:calc(var(--jh-top) + 16px); background:var(--jh-bg); border:1px solid var(--jh-border);
  border-radius:var(--jh-r-l); padding:24px; display:flex; flex-direction:column; gap:12px}
.jh-picker__out .jkc-eyebrow{color:var(--jh-text-3); margin:0}
.jh-picker__plan{font-size:30px; font-weight:800; color:var(--jh-navy); letter-spacing:-.8px; line-height:1.1}
.jh-picker__price{font-size:14px; font-weight:800; color:var(--jh-green); margin-top:-4px}
.jh-picker__price:empty{display:none}
.jh-picker__hl{display:flex; flex-direction:column; gap:7px}
.jh-picker__hl li{display:flex; align-items:flex-start; gap:8px; font-size:13px; line-height:1.5}
.jh-picker__hl svg{flex-shrink:0; margin-top:2px; color:var(--jh-green)}
.jh-picker__why{font-size:13px; line-height:1.6; color:var(--jh-text-3); padding-top:10px; border-top:1px dashed var(--jh-border)}
.jh-picker__out .jkc-btn[disabled]{opacity:.45; pointer-events:none}

/* ---------- meters ---------- */
.jh-meters{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px}
.jh-meter{background:var(--jh-bg); border:1px solid var(--jh-border); border-radius:var(--jh-r-l); padding:18px 20px; display:flex; flex-direction:column; gap:8px}
.jh-meter__t{font-size:12px; font-weight:800; letter-spacing:.6px; text-transform:uppercase; color:var(--jh-text-3)}
.jh-meter__v{font-size:23px; font-weight:800; color:var(--jh-navy); letter-spacing:-.6px; line-height:1}
.jh-meter__v span{font-size:13px; font-weight:700; color:var(--jh-text-3); letter-spacing:0}
.jh-meter__bar{height:7px; border-radius:999px; background:var(--jh-bg-subtle); overflow:hidden}
.jh-meter__bar i{display:block; height:100%; border-radius:999px; background:var(--jh-green)}
.jh-meter__bar i.is-high{background:#d97706}
.jh-meter__n{font-size:12px; color:var(--jh-text-3)}

/* ---------- scenarios ---------- */
.jh-scen{display:grid; grid-template-columns:repeat(auto-fit,minmax(270px,1fr)); gap:14px}
.jh-sc{background:var(--jh-bg); border:1px solid var(--jh-border); border-radius:var(--jh-r-l); padding:22px; display:flex; flex-direction:column; gap:12px}
.jh .jh-sc h3{font-size:16px}
.jh-sc dl{margin:0; display:flex; flex-direction:column; gap:9px}
.jh-sc dt{font-size:11px; font-weight:800; letter-spacing:.9px; text-transform:uppercase; color:var(--jh-text-3)}
.jh-sc dd{margin:2px 0 0; font-size:13.5px; line-height:1.55}
.jh-sc__time{margin-top:auto; display:inline-flex; align-self:flex-start; align-items:center; gap:7px; background:var(--jh-blue-subtle);
  border-radius:999px; padding:6px 13px; font-size:12.5px; font-weight:800; color:var(--jh-navy)}
.jh-sc__time svg{color:var(--jh-green)}

/* ---------- backup ladder ---------- */
.jh-ladder{border:1px solid var(--jh-border); border-radius:var(--jh-r-l); overflow:hidden; background:var(--jh-bg)}
.jh-lad{display:grid; grid-template-columns:150px minmax(0,1fr) 180px; align-items:center; gap:14px; padding:13px 18px; border-top:1px solid var(--jh-border)}
.jh-lad:first-child{border-top:0}
.jh-lad:nth-child(even){background:var(--jh-bg-row)}
.jh-lad__w{font-size:13.5px; font-weight:800; color:var(--jh-navy)}
.jh-lad__bar{height:10px; border-radius:999px; background:var(--jh-blue-100); position:relative; overflow:hidden}
.jh-lad__bar i{position:absolute; inset:0 auto 0 0; border-radius:999px; background:var(--jh-blue); display:block}
.jh-lad__c{font-size:12.5px; color:var(--jh-text-3); text-align:right; white-space:nowrap}

/* ---------- steps ---------- */
.jh-steps{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px}
.jh-step{background:var(--jh-bg); border:1px solid var(--jh-border); border-radius:var(--jh-r-l); padding:22px 20px; display:flex; flex-direction:column; gap:9px}
.jh-step__n{width:30px; height:30px; border-radius:50%; background:var(--jh-navy); color:#fff; font-size:13px; font-weight:800; display:flex; align-items:center; justify-content:center}
.jh .jh-step h3{font-size:15.5px}
.jh-step p{font-size:13.5px; line-height:1.6}
.jh-step__meta{margin-top:auto; padding-top:10px; border-top:1px dashed var(--jh-border); font-size:12px; font-weight:700; color:var(--jh-text-3); display:flex; flex-direction:column; gap:3px}
.jh-step__meta b{color:var(--jh-green); font-weight:800}

/* ---------- region / AI ---------- */
.jh-duo{display:grid; grid-template-columns:repeat(auto-fit,minmax(310px,1fr)); gap:16px; align-items:stretch}
.jh-panel-dark{background:var(--jh-navy); border-radius:var(--jh-r-l); padding:26px; display:flex; flex-direction:column; gap:12px; color:#fff}
.jh .jh-panel-dark h3{color:#fff}
.jh-panel-dark p{color:var(--jh-blue-200); font-size:14px}
.jh-pill-in{align-self:flex-start; display:inline-flex; border-radius:999px; background:rgba(255,255,255,.15); padding:5px 12px;
  font-size:10px; font-weight:800; letter-spacing:.8px; text-transform:uppercase; color:#fff}
.jh-panel-soft{background:var(--jh-bg); border:1px solid var(--jh-border); border-radius:var(--jh-r-l); padding:26px; display:flex; flex-direction:column; gap:14px}
.jh-panel-soft > p{font-size:14px}
.jh-loc{display:flex; align-items:center; gap:10px; background:var(--jh-bg); border:1px solid var(--jh-border); border-radius:10px;
  padding:12px 15px; font-size:13.5px; font-weight:700; color:var(--jh-text-2)}
.jh-loc--main{border:1.5px solid var(--jh-blue); color:var(--jh-navy)}
.jh-loc--main svg{color:var(--jh-blue)}
.jh-loc b{margin-left:auto; font-size:11px; font-weight:700; color:#fff; background:var(--jh-blue); border-radius:999px; padding:3px 10px}
.jh-loc-row{display:grid; grid-template-columns:repeat(auto-fit,minmax(110px,1fr)); gap:8px}
.jh-ai-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:10px}
.jh-ai{background:var(--jh-bg); border:1px solid var(--jh-border); border-radius:12px; padding:18px 12px; display:flex; flex-direction:column; align-items:center; gap:10px}
.jh-ai__mark{width:36px; height:36px; border-radius:9px; background:var(--jh-bg-subtle); display:flex; align-items:center; justify-content:center; color:var(--jh-navy)}
.jh-ai > span:last-child{font-size:12px; font-weight:700; color:var(--jh-navy); text-align:center}

/* ---------- add-ons ---------- */
.jh-ext-wrap{border:1px solid var(--jh-border); border-radius:var(--jh-r-l); overflow:hidden; background:var(--jh-bg)}
.jh-ext{width:100%; border-collapse:collapse; font-size:14px}
.jh-ext th,.jh-ext td{text-align:left; padding:13px 16px; border-top:1px solid var(--jh-border); vertical-align:top}
.jh-ext th{font-size:11.5px; letter-spacing:1px; text-transform:uppercase; color:var(--jh-text-3); border-top:0}
.jh-ext td:first-child{font-weight:600; color:var(--jh-text-2)}
.jh-ext td:last-child,.jh-ext th:last-child{text-align:right; white-space:nowrap; font-weight:800; color:var(--jh-navy)}
.jh-ext tbody tr:nth-child(odd){background:var(--jh-bg-row)}
.jh-ext__why{display:none; font-size:12.5px; font-weight:400; color:var(--jh-text-3); margin-top:3px}

/* ---------- calculator ---------- */
.jh-calc{display:grid; grid-template-columns:minmax(0,1.6fr) minmax(0,1fr); gap:20px; align-items:start}
.jh-calc__box{background:var(--jh-bg); border:1px solid var(--jh-border); border-radius:var(--jh-r-l); padding:22px; display:flex; flex-direction:column; gap:16px}
.jh-field{display:flex; flex-direction:column; gap:6px}
.jh-field label{font-size:13px; font-weight:700; color:var(--jh-text-2)}
.jh-field select,.jh-field input{min-height:48px; padding:10px 12px; border:1px solid var(--jh-border-strong); border-radius:8px;
  background:var(--jh-bg); color:var(--jh-text-2); font:inherit; font-size:14px; width:100%}
.jh-calc__grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px}
.jh-calc__out{position:sticky; top:calc(var(--jh-top) + 16px); background:var(--jh-navy); color:#fff; border-radius:var(--jh-r-l); padding:24px; display:flex; flex-direction:column; gap:8px}
.jh-calc__big{font-size:38px; font-weight:800; letter-spacing:-1.2px; line-height:1}
.jh-calc__year{font-size:19px; font-weight:800}
.jh-calc__rule{height:1px; background:currentColor; opacity:.25; margin:6px 0}
.jh-calc__out small{font-size:12px; opacity:.85}

/* ---------- speed report ---------- */
.jh-checks{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px; margin:0 0 26px !important}
.jh-ck{display:flex; gap:11px; align-items:flex-start; background:var(--jh-bg); border:1px solid var(--jh-border); border-radius:12px; padding:16px 18px}
.jh-ck svg{flex-shrink:0; margin-top:2px; color:var(--jh-green)}
.jh-ck b{display:block; font-size:14px; color:var(--jh-navy)}
.jh-ck span{font-size:12.5px; line-height:1.5; color:var(--jh-text-3)}

/* ---------- FAQ ---------- */
.jh-faq{border:1px solid var(--jh-border); border-radius:var(--jh-r-l); overflow:hidden; background:var(--jh-bg)}
.jh-faq details{border-top:1px solid var(--jh-border)}
.jh-faq details:first-child{border-top:0}
.jh-faq summary{list-style:none; cursor:pointer; padding:17px 20px; font-size:15.5px; font-weight:700; color:var(--jh-navy);
  display:flex; align-items:center; gap:12px; min-height:56px}
.jh-faq summary::-webkit-details-marker{display:none}
.jh-faq summary:hover{background:var(--jh-bg-row)}
.jh-faq summary svg{margin-left:auto; flex-shrink:0; transition:transform .2s ease; color:var(--jh-text-3)}
.jh-faq details[open] summary svg{transform:rotate(180deg)}
.jh-faq p{padding:0 20px 20px; font-size:14.5px; line-height:1.65; max-width:80ch}

/* ---------- closing CTA ---------- */
.jh-endcta{background:var(--jh-navy); border-radius:var(--jh-r-xl); padding:clamp(32px,5vw,60px); text-align:center; display:flex; flex-direction:column; align-items:center; gap:16px}
.jh .jh-endcta h2{color:#fff}
.jh-endcta p{color:var(--jh-blue-200); max-width:58ch}

/* ---------- responsive ---------- */
@media (max-width:1023px){
  .jh-mx{overflow-x:auto}
  .jh-grid6{grid-template-columns:170px repeat(5,minmax(92px,1fr)); min-width:700px}
  .jh-mx__head{position:static}
  .jh-calc,.jh-picker{grid-template-columns:1fr}
  .jh-calc__out,.jh-picker__out{position:static}
}
@media (max-width:719px){
  .jh-chips{display:flex}
  .jh-mx{overflow-x:visible}
  .jh-grid6{min-width:0; grid-template-columns:minmax(0,1fr) minmax(0,116px)}
  /* One package column at a time; the chips above pick which. */
  .jh-mxwrap [data-col]{display:none !important}
  .jh-mxwrap[data-plan="0"] [data-col="0"],
  .jh-mxwrap[data-plan="1"] [data-col="1"],
  .jh-mxwrap[data-plan="2"] [data-col="2"],
  .jh-mxwrap[data-plan="3"] [data-col="3"],
  .jh-mxwrap[data-plan="4"] [data-col="4"]{display:flex !important}
  /* The head has no label on the left, so there the package takes the full width. */
  .jh-mx__intro{display:none !important}
  .jh-mx__plan{grid-column:1/-1; padding:18px 16px; border-left:0}
  .jh-mx__plan .jkc-btn{max-width:320px}
  .jh-row > div{padding:11px 12px; font-size:13px}
  .jh-ext th:nth-child(2),.jh-ext td:nth-child(2){display:none}
  .jh-ext__why{display:block}
  /* The ladder becomes two lines: name plus frequency on top, bar below. */
  .jh-lad{grid-template-columns:minmax(0,1fr) auto; gap:6px 12px; padding:13px 16px}
  .jh-lad__bar{grid-column:1/-1; order:3}
}
@media (prefers-reduced-motion:reduce){
  .jh *{animation-duration:.01ms !important; transition-duration:.01ms !important}
}