.hx-combo{
  --co-glass:rgba(255,255,255,.74);          /* frosted stat / chip surface   */
  --co-glass-line:rgba(26,73,24,.10);        /* frosted hairline (green ink)  */
  --co-glow-1:rgba(107,191,60,.22);          /* backdrop orb — brand green    */
  --co-glow-2:rgba(244,198,51,.20);          /* backdrop orb — gold glint     */
  --co-grid:rgba(39,102,30,.07);             /* faint dotted grid             */
  --co-deep:#173f14;                         /* receipt-card chrome ink       */
  --co-ondark-22:rgba(255,255,255,.22); --co-ondark-60:rgba(255,255,255,.6);
  --co-ink-55:rgba(26,73,24,.58);
  --co-mask-stop:#000;
  --co-r-2xl:20px;
}

/* ══ HERO — brand-green wash + a floating "your bundle" receipt card ═════════ */
.co-hero{position:relative;overflow:hidden;background:var(--hx-hero-grad);padding-block:clamp(44px,6vw,92px)}
.co-bg{position:absolute;inset:0;pointer-events:none}
.co-bg .orb{position:absolute;border-radius:50%;filter:blur(6px)}
.co-bg .orb-1{inset:-16% -8% auto auto;width:52vw;height:52vw;max-width:560px;max-height:560px;background:radial-gradient(circle at 50% 50%,var(--co-glow-1),transparent 66%)}
.co-bg .orb-2{inset:auto auto -22% -10%;width:44vw;height:44vw;max-width:480px;max-height:480px;background:radial-gradient(circle at 50% 50%,var(--co-glow-2),transparent 66%)}
.co-bg .grid{position:absolute;inset:0;background-image:radial-gradient(var(--co-grid) 1px,transparent 1.4px);background-size:26px 26px;-webkit-mask-image:linear-gradient(180deg,var(--co-mask-stop),transparent 82%);mask-image:linear-gradient(180deg,var(--co-mask-stop),transparent 82%)}

.co-hero-grid{position:relative;display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);align-items:center;gap:clamp(28px,4vw,60px)}
.co-hero-copy{max-width:600px}
.co-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:var(--hx-fs-xs);font-weight:var(--hx-fw-bold);letter-spacing:.08em;text-transform:uppercase;color:var(--hx-green-800);background:var(--co-glass);border:1px solid var(--co-glass-line);padding:6px 13px;border-radius:var(--hx-r-pill);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.co-eyebrow .dot{width:7px;height:7px;border-radius:50%;background:var(--hx-green-500);box-shadow:0 0 0 0 var(--co-glow-1);animation:co-pulse 2.4s var(--hx-ease) infinite}
@keyframes co-pulse{0%{box-shadow:0 0 0 0 var(--co-glow-1)}70%{box-shadow:0 0 0 8px transparent}100%{box-shadow:0 0 0 0 transparent}}

.co-hero-copy h1{margin:18px 0 0;font-size:var(--hx-fs-hero);font-weight:var(--hx-fw-black);line-height:var(--hx-lh-tight);letter-spacing:var(--hx-tracking-tight);color:var(--hx-green-900)}
.co-hero-copy h1 .accent{background:linear-gradient(120deg,var(--hx-green-700),var(--hx-teal-600));-webkit-background-clip:text;background-clip:text;color:transparent}
.co-sub{margin:16px 0 0;font-size:var(--hx-fs-md);color:var(--hx-green-900);opacity:.82;max-width:56ch}
.co-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:28px}
.co-trust{list-style:none;display:flex;flex-wrap:wrap;gap:9px 20px;margin:22px 0 0;padding:0}
.co-trust li{display:inline-flex;align-items:center;gap:7px;font-size:var(--hx-fs-sm);font-weight:var(--hx-fw-semi);color:var(--hx-green-900)}
.co-trust svg{width:17px;height:17px;color:var(--hx-green-700);flex:none}

/* ── floating "your bundle" receipt card (decorative) ──────────────────────── */
.co-hero-visual{position:relative;justify-self:end;width:100%;max-width:420px}
.co-receipt{position:relative;background:var(--hx-card);border:1px solid var(--co-glass-line);border-radius:var(--co-r-2xl);box-shadow:var(--hx-e-3);overflow:hidden;animation:co-float 7s var(--hx-ease) infinite}
@keyframes co-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-9px)}}
.co-receipt-bar{display:flex;align-items:center;gap:8px;padding:12px 16px;background:var(--co-deep)}
.co-receipt-bar i{width:9px;height:9px;border-radius:50%;background:var(--co-ondark-22);flex:none}
.co-receipt-bar .ttl{margin-left:6px;font-size:var(--hx-fs-xs);font-weight:var(--hx-fw-bold);letter-spacing:.04em;color:var(--co-ondark-60)}
.co-receipt-body{padding:20px 18px 22px}
.co-line{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:12px 0;border-bottom:1px dashed var(--hx-green-200)}
.co-line .co-what{display:flex;align-items:center;gap:11px}
.co-line .hx-tile{width:38px;height:38px}
.co-line .hx-tile svg{width:20px;height:20px}
.co-line b{display:block;font-size:var(--hx-fs-sm);font-weight:var(--hx-fw-bold);color:var(--hx-ink);line-height:1.2}
.co-line span{font-size:var(--hx-fs-xs);color:var(--hx-muted)}
.co-line .co-tag{font-size:var(--hx-fs-xs);font-weight:var(--hx-fw-bold);color:var(--hx-green-700);background:var(--hx-green-50);border:1px solid var(--hx-green-100);border-radius:var(--hx-r-pill);padding:3px 10px;white-space:nowrap}
.co-total{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:14px}
.co-total .lbl{font-size:var(--hx-fs-sm);font-weight:var(--hx-fw-semi);color:var(--hx-muted)}
.co-total .amt{font-size:var(--hx-fs-xl);font-weight:var(--hx-fw-black);color:var(--hx-green-900);line-height:1}
.co-total .amt small{font-size:var(--hx-fs-sm);font-weight:var(--hx-fw-semi);color:var(--hx-muted)}
.co-badge{position:absolute;left:-18px;bottom:26px;display:flex;align-items:center;gap:10px;background:var(--hx-card);border:1px solid var(--co-glass-line);border-radius:var(--hx-r);box-shadow:var(--hx-e-2);padding:11px 14px;animation:co-float 7s var(--hx-ease) infinite reverse}
.co-badge .g{width:34px;height:34px;border-radius:50%;background:conic-gradient(var(--hx-gold-b) 0 78%,var(--hx-tile) 78% 100%);display:flex;align-items:center;justify-content:center;flex:none}
.co-badge .g i{width:24px;height:24px;border-radius:50%;background:var(--hx-card)}
.co-badge b{font-size:var(--hx-fs-sm);font-weight:var(--hx-fw-black);color:var(--hx-ink);line-height:1}
.co-badge span{font-size:var(--hx-fs-xs);color:var(--hx-muted);font-weight:var(--hx-fw-semi)}
@media (prefers-reduced-motion:reduce){.co-receipt,.co-badge{animation:none}}

/* ── frosted stat cards ────────────────────────────────────────────────────── */
.co-stats{position:relative;display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:clamp(34px,4.5vw,56px)}
.co-stat{background:var(--co-glass);border:1px solid var(--co-glass-line);border-radius:var(--hx-r-lg);padding:16px 18px;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.co-stat b{display:block;font-size:var(--hx-fs-xl);font-weight:var(--hx-fw-black);color:var(--hx-green-900);line-height:1}
.co-stat span{display:block;margin-top:6px;font-size:var(--hx-fs-xs);font-weight:var(--hx-fw-semi);letter-spacing:.05em;text-transform:uppercase;color:var(--co-ink-55)}

/* reused by the closing CTA band */
.hx-hero-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;margin-top:26px}

/* ══ HOSTING TYPES — pick the engine your combo runs on ═════════════════════ */
.co-types{display:grid;grid-template-columns:repeat(auto-fit,minmax(206px,1fr));gap:18px}
.co-type{display:flex;flex-direction:column;background:var(--hx-card);border:1px solid var(--hx-line);border-radius:var(--hx-r-lg);box-shadow:var(--hx-e-1);padding:22px 20px}
.co-type .hx-tile{margin-bottom:14px}
.co-type h3{margin:0;font-size:var(--hx-fs-md);font-weight:var(--hx-fw-bold);color:var(--hx-ink)}
.co-type p{margin:8px 0 0;font-size:var(--hx-fs-sm);color:var(--hx-body);line-height:1.55}

/* ══ COMBO PLANS — hosting-type dropdown + pricing tiers + .in / .com extension toggle ══ */
/* controls row — the category dropdown + the .in/.com toggle sit side by side, centered */
.co-plan-controls{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:14px 22px;margin:18px auto 0}
/* hosting-type dropdown — swap the whole plan set (web / windows / wordpress / ssd) */
.co-hostselect{display:inline-flex;align-items:center;gap:10px}
.co-hostselect .lbl{font-size:var(--hx-fs-sm);font-weight:var(--hx-fw-semi);color:var(--hx-muted)}
.co-hostselect .sel-wrap{position:relative;display:inline-flex;align-items:center}
.co-hostselect select{appearance:none;-webkit-appearance:none;font-family:inherit;font-size:var(--hx-fs-sm);font-weight:var(--hx-fw-bold);color:var(--hx-green-800);background:var(--hx-card);border:1px solid var(--hx-green-100);border-radius:var(--hx-r-pill);padding:9px 42px 9px 18px;cursor:pointer;box-shadow:var(--hx-e-1);transition:border-color var(--hx-dur) var(--hx-ease)}
.co-hostselect select:hover{border-color:var(--hx-green-300)}
.co-hostselect .chev{position:absolute;right:15px;width:16px;height:16px;color:var(--hx-green-700);pointer-events:none}
.co-hostgroup[hidden]{display:none}

.co-toggle{display:inline-flex;align-items:center;gap:4px;margin:0 auto;padding:5px;background:var(--hx-green-50);border:1px solid var(--hx-green-100);border-radius:var(--hx-r-pill)}
.co-toggle button{appearance:none;font-family:inherit;font-size:var(--hx-fs-sm);font-weight:var(--hx-fw-bold);color:var(--hx-green-800);background:transparent;border:0;border-radius:var(--hx-r-pill);padding:8px 18px;cursor:pointer;transition:background var(--hx-dur) var(--hx-ease),color var(--hx-dur) var(--hx-ease)}
.co-toggle button[aria-pressed="true"]{background:var(--hx-green-700);color:#fff;box-shadow:var(--hx-e-1)}

/* per-plan "save %" badge — the discount cue (gold, matching the bundle glint) */
.co-save{align-self:flex-start;margin-top:8px;font-size:var(--hx-fs-xs);font-weight:var(--hx-fw-black);letter-spacing:.03em;color:var(--hx-gold-ink);background:var(--hx-gold-soft);border:1px solid var(--hx-gold-border);border-radius:var(--hx-r-pill);padding:3px 10px}

/* advice band under the plan groups */
.co-help{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;margin-top:22px;background:var(--hx-green-50);border:1px solid var(--hx-green-100);border-radius:var(--hx-r-lg);padding:20px 24px}
.co-help h3{margin:0;font-size:var(--hx-fs-md);font-weight:var(--hx-fw-bold);color:var(--hx-green-900)}
.co-help p{margin:5px 0 0;font-size:var(--hx-fs-sm);color:var(--hx-body);max-width:66ch}
.co-help .hx-btn{flex:none}

.co-plans{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:clamp(26px,3.4vw,40px)}
.co-plan{position:relative;display:flex;flex-direction:column;background:var(--hx-card);border:1px solid var(--hx-line);border-radius:var(--hx-r-lg);box-shadow:var(--hx-e-1);padding:24px 22px;transition:transform var(--hx-dur) var(--hx-ease),box-shadow var(--hx-dur) var(--hx-ease),border-color var(--hx-dur) var(--hx-ease)}
.co-plan:hover{transform:translateY(-3px);box-shadow:var(--hx-e-2);border-color:var(--hx-green-300)}
.co-plan.is-popular{border-color:var(--hx-gold-border);box-shadow:var(--hx-e-2)}
.co-pop{position:absolute;top:-11px;left:22px;display:inline-flex;align-items:center;gap:6px;font-size:var(--hx-fs-xs);font-weight:var(--hx-fw-black);letter-spacing:.04em;text-transform:uppercase;color:var(--hx-gold-ink);background:var(--hx-gold-grad);border:1px solid var(--hx-gold-border);border-radius:var(--hx-r-pill);padding:4px 12px}
.co-plan h3{margin:0;font-size:var(--hx-fs-lg);font-weight:var(--hx-fw-black);color:var(--hx-ink);letter-spacing:var(--hx-tracking-tight)}
.co-plan .co-for{margin:4px 0 0;font-size:var(--hx-fs-xs);font-weight:var(--hx-fw-semi);letter-spacing:.03em;text-transform:uppercase;color:var(--hx-muted)}
.co-price{display:flex;align-items:baseline;gap:6px;margin:16px 0 2px}
.co-price .cur{font-size:var(--hx-fs-md);font-weight:var(--hx-fw-bold);color:var(--hx-green-900)}
.co-price .num{font-size:var(--hx-fs-xl);font-weight:var(--hx-fw-black);color:var(--hx-green-900);line-height:1}
.co-price .per{font-size:var(--hx-fs-sm);color:var(--hx-muted);font-weight:var(--hx-fw-semi)}
.co-freedom{display:inline-flex;align-items:center;gap:6px;margin-top:2px;font-size:var(--hx-fs-xs);font-weight:var(--hx-fw-bold);color:var(--hx-green-700)}
.co-freedom svg{width:14px;height:14px}
.co-specs{list-style:none;margin:16px 0 0;padding:16px 0 0;border-top:1px solid var(--hx-line);display:grid;gap:9px}
.co-specs li{display:flex;align-items:center;gap:9px;font-size:var(--hx-fs-sm);color:var(--hx-body)}
.co-specs li svg{width:16px;height:16px;color:var(--hx-green-600);flex:none}
.co-specs li b{color:var(--hx-ink);font-weight:var(--hx-fw-bold)}
.co-plan .hx-btn{margin-top:18px;justify-content:center}


/* ══ HOW IT WORKS — domain → plan → live ═══════════════════════════════════ */
.co-flow{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;counter-reset:co}
.co-step{position:relative;background:var(--hx-card);border:1px solid var(--hx-line);border-radius:var(--hx-r-lg);padding:24px 22px;box-shadow:var(--hx-e-1)}
.co-step::before{counter-increment:co;content:counter(co);position:absolute;top:18px;right:20px;font-size:var(--hx-fs-2xl);font-weight:var(--hx-fw-black);color:var(--hx-green-100);line-height:1}
.co-step .hx-tile{margin-bottom:14px}
.co-step h3{margin:0 0 6px;font-size:var(--hx-fs-md);font-weight:var(--hx-fw-bold);color:var(--hx-ink)}
.co-step p{margin:0;font-size:var(--hx-fs-sm);color:var(--hx-body)}

/* ══ RESPONSIVE — canonical tiers 640 / 1024 / 1440 ════════════════════════ */
@media (max-width:1023.98px){
  .co-hero-grid{grid-template-columns:1fr;gap:36px}
  .co-hero-copy{max-width:none}
  .co-hero-visual{justify-self:center;max-width:420px}
  .co-stats{grid-template-columns:1fr 1fr}
  .co-types{grid-template-columns:1fr 1fr}
  .co-plans{grid-template-columns:1fr 1fr}
  .co-flow{grid-template-columns:1fr 1fr}
}
@media (max-width:639.98px){
  .co-stats{grid-template-columns:1fr 1fr;gap:10px}
  .co-types,.co-plans,.co-flow{grid-template-columns:1fr}
  .co-badge{left:8px}
  .co-trust{gap:8px 16px}
}
.hx-combo .no-plans-section {
    padding: 60px 20px;
    text-align: center;
}
.hx-combo .no-plans-container {
    max-width: 500px;
    margin: 0 auto;
}
.hx-combo .no-plans-icon {
    width: 80px;
    height: 80px;
    margin: 0 auto 20px;
    color: var(--hx-muted);
}
.hx-combo .no-plans-icon svg {
    width: 100%;
    height: 100%;
}
.hx-combo .no-plans-title {
    font-size: var(--hx-fs-xl);
    color: var(--hx-ink);
    margin-bottom: 10px;
}
.hx-combo .no-plans-message {
    color: var(--hx-body);
    margin-bottom: 25px;
    font-size: var(--hx-fs-md);
}
.hx-combo .no-plans-actions {
    display: flex;
    gap: 12px;
    justify-content: center;
    flex-wrap: wrap;
}