/* Canonical hosting presentation for the homepage and service pages. */
:where(#hosting-generator) .button { min-height:48px;display:inline-flex;align-items:center;justify-content:center;gap:10px;border-radius:6px;padding:12px 18px;font:inherit;border:1px solid var(--line);font-weight:750;cursor:pointer;text-align:center;white-space:nowrap }
:where(#hosting-generator) .button.primary { color:#031224;background:linear-gradient(90deg,#31f3ee,#4aa0ff);border-color:transparent }
:where(#hosting-generator) .button:disabled { opacity:.62;cursor:wait }
:where(#hosting-generator) .button.secondary { background:#ffffff0e;color:#eef6ff }
:where(#hosting-generator) .section-head { display:flex;justify-content:space-between;align-items:end;gap:32px;margin-bottom:30px }
:where(#hosting-generator) .section-head p { margin:0;color:var(--paper-muted);max-width:520px;font-size:17px;line-height:1.55 }
:where(#hosting-generator).dark .section-head p { color:var(--muted) }
:where(#hosting-generator) .pill { width:fit-content;padding:6px 10px;border:1px solid rgba(30,232,240,.42);border-radius:999px;color:#adfbff;font-size:13px;font-weight:700;display:inline-block;margin-bottom:16px }
:where(#hosting-generator) .generator { display:grid;grid-template-columns:minmax(0,1.16fr) minmax(300px,.84fr);gap:22px;align-items:stretch }
:where(#hosting-generator) .generator>* { min-width:0;max-width:100% }
:where(#hosting-generator) .generator-controls,
:where(#hosting-generator) .generator-summary { border:1px solid rgba(172,210,255,.16);background:#ffffff0b;border-radius:8px;padding:24px }
:where(#hosting-generator) .generator-controls { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px }
:where(#hosting-generator) .field { display:grid;gap:8px }
:where(#hosting-generator) .field span { color:#d9e8f9;font-size:14px;font-weight:800 }
:where(#hosting-generator) .field select,
:where(#hosting-generator) .field input[type=number] { width:100%;min-height:46px;border:1px solid rgba(172,210,255,.26);border-radius:6px;background:#0c1c35;color:#fff;padding:0 12px;font:inherit;outline:none }
:where(#hosting-generator) .field select:focus,
:where(#hosting-generator) .field input[type=number]:focus { border-color:#1ee8f0d1;box-shadow:0 0 0 3px #1ee8f01f }
:where(#hosting-generator) .field small { color:var(--muted);line-height:1.42 }
:where(#hosting-generator) .generator-summary { display:flex;flex-direction:column;justify-content:space-between;gap:18px }
:where(#hosting-generator) .generator-summary h3 { margin:0;font-size:24px;letter-spacing:0 }
:where(#hosting-generator) .generator-price { color:#fff;font-size:clamp(44px,7vw,72px);line-height:.95;font-weight:900;letter-spacing:0 }
:where(#hosting-generator) .generator-summary p { margin:0;color:var(--muted);line-height:1.55 }
:where(#hosting-generator) .generator-note { border-top:1px solid rgba(172,210,255,.14);padding-top:14px;font-size:14px }
#hosting-generator .generator { grid-template-columns:minmax(0,1.08fr) minmax(340px,.92fr);gap:24px;align-items:stretch }
#hosting-generator .generator-controls,
#hosting-generator .generator-summary { border-color:#50d3e138;background:#0a1b31eb;box-shadow:0 18px 48px #01081638 }
#hosting-generator .generator-controls { grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto 1fr;gap:20px;align-content:start;align-items:start;padding:22px }
:where(#hosting-generator) .hosting-generator-heading { display:flex;align-items:center;justify-content:space-between;gap:16px;padding-bottom:16px;border-bottom:1px solid rgba(172,210,255,.14) }
:where(#hosting-generator) .hosting-generator-heading h3 { margin:0;color:#f4fbff;font-size:21px;line-height:1.2;letter-spacing:0 }
:where(#hosting-generator) .hosting-generator-heading .pill { flex:0 0 auto;white-space:nowrap }
:where(#hosting-generator) .hosting-generator-fields { display:grid;gap:18px;width:100% }
#hosting-generator .field { display:grid;grid-template-rows:auto 48px auto;gap:8px;align-content:start;min-width:0 }
#hosting-generator .field select { display:block;height:48px;min-height:48px;max-height:48px;padding:0 14px;border-color:#50d3e14d;background-color:#07182f;font-size:15px;line-height:48px;cursor:pointer }
#hosting-generator .field small { font-size:13px;line-height:1.45 }
:where(#hosting-generator) .static-ip-option { display:grid;grid-template-columns:auto minmax(0,1fr);gap:12px;align-items:center;min-width:0;padding:13px 14px;border:1px solid rgba(98,232,220,.3);border-radius:8px;background:#061526b8;color:#f4fbff;cursor:pointer }
:where(#hosting-generator) .static-ip-option:hover { border-color:#62e8dc9e;background:#0c273dd1 }
:where(#hosting-generator) .static-ip-option:focus-within { outline:2px solid rgba(98,232,220,.72);outline-offset:2px }
:where(#hosting-generator) .static-ip-option input { width:20px;height:20px;margin:0;accent-color:#62e8dc;cursor:pointer }
:where(#hosting-generator) .static-ip-option-copy { display:grid;gap:3px;min-width:0 }
:where(#hosting-generator) .static-ip-option-copy strong { font-size:14px;line-height:1.25 }
:where(#hosting-generator) .static-ip-option-copy small { color:#9fb5cd;font-size:12px;line-height:1.4 }
:where(#hosting-generator) .hosting-inclusions { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:0 22px;padding-top:8px;border-top:1px solid rgba(172,210,255,.14);align-self:end }
:where(#hosting-generator) .hosting-inclusions span { position:relative;min-width:0;padding:10px 0 10px 20px;color:#d9e8f9;font-size:13px;font-weight:700;line-height:1.35 }
:where(#hosting-generator) .hosting-inclusions span:before { content:"";position:absolute;left:0;top:15px;width:8px;height:8px;border-radius:50%;background:#31f3ee;box-shadow:0 0 0 3px #31f3ee1f }
#hosting-generator .generator-summary { gap:14px;padding:22px }
#hosting-generator .generator-summary h3 { margin-top:10px;font-size:22px }
:where(#hosting-generator) .hosting-price-caption { display:block;margin-bottom:6px;color:var(--muted);font-size:12px;font-weight:800;text-transform:uppercase;letter-spacing:0 }
#hosting-generator .generator-price { font-size:clamp(40px,5vw,56px);line-height:1 }
#hosting-generator .mail-breakdown { gap:0;padding:4px 14px }
#hosting-generator .breakdown-row { align-items:center;padding:10px 0;border-bottom:1px solid rgba(172,210,255,.1) }
#hosting-generator .breakdown-row:last-child { border-bottom:0 }
#hosting-generator [data-hosting-summary] { color:#d9e8f9;font-size:13px }
#hosting-generator .button.primary { width:100%;min-height:48px }
@media (max-width:900px) {
#hosting-generator .generator { grid-template-columns:minmax(0,1fr) }
}
@media (max-width:520px) {
#hosting-generator .generator-controls,
#hosting-generator .generator-summary { padding:18px }
:where(#hosting-generator) .hosting-inclusions { grid-template-columns:minmax(0,1fr) }
#hosting-generator .field select { font-size:14px }
#hosting-generator .generator-price { font-size:40px }
}
:where(#hosting-generator) .reseller-hosting-block { margin-top:48px;padding-top:38px;border-top:1px solid rgba(172,210,255,.16) }
:where(#hosting-generator) .reseller-hosting-heading { display:grid;grid-template-columns:minmax(0,1fr) auto;gap:24px;align-items:end;margin-bottom:22px }
:where(#hosting-generator) .reseller-hosting-heading h3 { margin:10px 0 8px;color:#f4fbff;font-size:28px;line-height:1.15;letter-spacing:0 }
:where(#hosting-generator) .reseller-hosting-heading p { max-width:760px;margin:0;color:var(--muted);line-height:1.6 }
:where(#hosting-generator) .reseller-cycle-switch { display:grid;grid-template-columns:repeat(2,minmax(112px,1fr));gap:4px;padding:4px;border:1px solid rgba(172,210,255,.22);border-radius:8px;background:#051225c2 }
:where(#hosting-generator) .reseller-cycle-switch button { min-height:40px;padding:8px 14px;border:0;border-radius:5px;background:transparent;color:#b9cce2;font:inherit;font-size:13px;font-weight:800;letter-spacing:0;cursor:pointer }
:where(#hosting-generator) .reseller-cycle-switch button:hover,
:where(#hosting-generator) .reseller-cycle-switch button:focus-visible { color:#fff;background:#50d3e11a }
:where(#hosting-generator) .reseller-cycle-switch button.is-active { color:#061526;background:#62e8dc }
:where(#hosting-generator) .reseller-hosting-controls { display:grid;gap:10px;min-width:250px }
:where(#hosting-generator) .reseller-static-ip-option { min-height:50px }
:where(#hosting-generator) .reseller-plan-grid { display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px }
:where(#hosting-generator) .reseller-plan { --reseller-accent: #62e8dc;position:relative;display:grid;grid-template-rows:auto auto 1fr auto auto;gap:16px;min-width:0;padding:20px;overflow:hidden;border:1px solid rgba(172,210,255,.18);border-radius:8px;background:#08182de6;box-shadow:0 16px 38px #01081633 }
:where(#hosting-generator) .reseller-plan:before { content:"";position:absolute;inset:0 0 auto;height:3px;background:var(--reseller-accent) }
:where(#hosting-generator) .reseller-plan[data-reseller-plan=studio] { --reseller-accent: #9ee37d }
:where(#hosting-generator) .reseller-plan[data-reseller-plan=scale] { --reseller-accent: #ffd166 }
:where(#hosting-generator) .reseller-plan[data-reseller-plan=atlas] { --reseller-accent: #ff8f70 }
:where(#hosting-generator) .reseller-plan header { display:grid;gap:6px }
:where(#hosting-generator) .reseller-plan h4 { margin:0;color:#fff;font-size:23px;line-height:1.15;letter-spacing:0 }
:where(#hosting-generator) .reseller-plan header p { min-height:40px;margin:0;color:var(--muted);font-size:13px;line-height:1.5 }
:where(#hosting-generator) .reseller-plan-kicker { color:var(--reseller-accent);font-size:12px;font-weight:900;text-transform:uppercase;letter-spacing:0 }
:where(#hosting-generator) .reseller-plan-price { display:grid;gap:3px }
:where(#hosting-generator) .reseller-plan-price strong { color:#fff;font-size:29px;line-height:1;letter-spacing:0 }
:where(#hosting-generator) .reseller-plan-price span { color:#a9bdd5;font-size:12px }
:where(#hosting-generator) .reseller-plan ul { display:grid;align-content:start;gap:9px;margin:0;padding:0;list-style:none }
:where(#hosting-generator) .reseller-plan li { position:relative;padding-left:16px;color:#dceaf8;font-size:13px;line-height:1.4 }
:where(#hosting-generator) .reseller-plan li:before { content:"";position:absolute;left:0;top:7px;width:6px;height:6px;border-radius:50%;background:var(--reseller-accent) }
:where(#hosting-generator) .reseller-plan-billing { display:grid;gap:4px;padding-top:13px;border-top:1px solid rgba(172,210,255,.12) }
:where(#hosting-generator) .reseller-plan-billing span { color:#fff;font-size:14px;font-weight:800 }
:where(#hosting-generator) .reseller-plan-billing small { color:var(--reseller-accent);font-size:12px;line-height:1.35 }
:where(#hosting-generator) .reseller-plan .button { width:100%;min-height:44px;border-color:color-mix(in srgb,var(--reseller-accent) 55%,transparent) }
@media (max-width:1100px) {
:where(#hosting-generator) .reseller-plan-grid { grid-template-columns:repeat(2,minmax(0,1fr)) }
}
@media (max-width:720px) {
:where(#hosting-generator) .reseller-hosting-heading { grid-template-columns:minmax(0,1fr);align-items:start }
:where(#hosting-generator) .reseller-cycle-switch { width:100% }
:where(#hosting-generator) .reseller-hosting-controls { width:100%;min-width:0 }
}
@media (max-width:560px) {
:where(#hosting-generator) .reseller-plan-grid { grid-template-columns:minmax(0,1fr) }
:where(#hosting-generator) .reseller-plan header p { min-height:0 }
}
:where(#hosting-generator) .mail-breakdown { display:grid;gap:10px;border:1px solid rgba(172,210,255,.14);border-radius:8px;padding:14px;background:#030e225c }
:where(#hosting-generator) .breakdown-row { display:flex;justify-content:space-between;gap:18px;color:#d9e8f9;line-height:1.35 }
:where(#hosting-generator) .breakdown-row span:first-child { color:var(--muted) }
@media (max-width:900px) {
:where(#hosting-generator) .generator { grid-template-columns:minmax(0,1fr) }
:where(#hosting-generator) .section-head { align-items:flex-start;flex-direction:column }
}
@media (max-width:560px) {
:where(#hosting-generator) .generator-controls { grid-template-columns:1fr }
:where(#hosting-generator) .button { width:100%;white-space:normal }
}