/* Hosting page — page-scoped layout on top of scroll.css (HostingV2). Prefix: .host- */

/* ── Hero (dust) ── */
.host-hero { padding-block: 132px 128px; }
/* warm glow on the right, above the dust canvas, below the content */
.host-hero::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 50% 70% at 76% 50%, rgba(234,165,114,0.10) 0%, rgba(234,165,114,0) 70%); }
.host-hero__content { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; }
.host-hero h1 { max-width: 1000px; font-size: clamp(56px, 6.67vw, 96px); text-wrap: initial; }
.host-hero__lead { max-width: 560px; }
.host-hero .btn { margin-top: 4px; }
.host-hero .btn:hover .icon, .host-cta .btn:hover .icon { transform: translateY(3px); }
.host-tag { gap: 10px; letter-spacing: 2px; }

@media (max-width: 620px) {
  .host-hero { padding-block: 64px 64px; }
  .host-hero__content { gap: 20px; }
  .host-hero h1 { font-size: clamp(36px, 11.2vw, 46px); text-wrap: balance; }
  .host-hero h1 br { display: none; }
  .host-hero .btn { margin-top: 8px; }
}

/* ── Plans ── */
.host-tiers { --grid-gap: 20px; align-items: stretch; }
.host-tier { gap: 24px; padding: 34px 26px 26px; }
.host-tier__top { display: flex; flex-direction: column; }
.host-tier__name { margin-bottom: 16px; font: 600 12px/1.3 var(--font-body); letter-spacing: 3px; color: var(--ink-muted); }
.host-tier__price { display: flex; align-items: baseline; gap: 4px; white-space: nowrap; }
.host-tier__n { font: 700 56px/1 var(--font-display); color: var(--ink); font-variant-numeric: tabular-nums; }
.host-tier__per { font: 500 18px/1 var(--font-body); color: var(--ink-muted); }
.host-tier__cap { margin-top: 10px; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink-body); }
.host-tier__list { gap: 11px; padding-top: 20px; border-top: 1px solid rgba(26,26,26,0.1); }
.host-tier__list > li { color: #2f3a44; }
.host-tier__btn { margin-top: auto; padding: 15px 20px; font-size: 13px; gap: 8px; }
/* The button is checkout now, so the consult path needs somewhere to live:
   a quiet second line rather than a second button competing with the first. */
.host-tier__talk { margin-top: 10px; text-align: center; font-size: 13px; }
.host-tier__talk a { color: var(--meta); text-decoration: underline; text-underline-offset: 3px; }
.host-tier__talk a:hover { color: var(--coral); }
.host-tier { transition: transform .25s var(--ease-out), box-shadow .25s ease, border-color .25s ease; }
.host-tier:hover { transform: translateY(-4px); box-shadow: 0 28px 50px -30px rgba(26,26,26,0.35); }

/* featured Pro: charcoal card on cream */
.host-tier--featured {
  --c-heading: var(--white); --c-text: var(--slate); --c-soft: var(--soft); --c-accent: var(--coral);
  background: var(--charcoal); border: 2px solid var(--coral); padding: 33px 25px 25px;
  box-shadow: 0 28px 60px rgba(26,26,26,0.22); color-scheme: dark;
}
.host-tier--featured:hover { box-shadow: 0 36px 70px -20px rgba(26,26,26,0.4); }
.host-tier--featured :focus-visible { outline-color: var(--coral); }
.host-tier--featured .host-tier__name { color: var(--coral); }
.host-tier--featured .host-tier__n { color: var(--coral); }
.host-tier--featured .host-tier__per, .host-tier--featured .host-tier__cap { color: var(--slate); }
.host-tier--featured .host-tier__list { border-top-color: rgba(234,165,114,0.22); }
.host-tier--featured .host-tier__list > li { color: var(--soft); }


@media (max-width: 1100px) {
  .host-tier { padding: 30px 22px 22px; }
  .host-tier--featured { padding: 29px 21px 21px; }
  .host-tier__n { font-size: 48px; }
}
@media (max-width: 900px) {
  .host-tier__n { font-size: 56px; }
}
@media (max-width: 620px) {
  .host-tiers { --grid-gap: 12px; }
  .host-tier { gap: 18px; padding: 24px 20px 20px; }
  .host-tier--featured { padding: 23px 19px 19px; }
  .host-tier__name { margin-bottom: 10px; }
  .host-tier__n { font-size: 48px; }
  .host-tier__cap { margin-top: 8px; font-size: 13px; }
  .host-tier__list { padding-top: 16px; }
  .host-tier:hover { transform: none; }
}

/* ── Performance ── */
.host-perf__head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 24px 72px; margin-bottom: 64px; }
.host-perf__head > p { justify-self: stretch; margin-bottom: 8px; }
.host-perf .card { padding: 32px 30px 36px; }
.host-perf .icon-tile { margin-bottom: 6px; }
@media (max-width: 900px) { .host-perf__head { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 620px) {
  .host-perf__head { margin-bottom: 28px; }
  .host-perf__head > p { margin-bottom: 0; }
  .host-perf .card { padding: 20px; }
  .host-perf .icon-tile { margin-bottom: 0; }
}

/* ── Always separate ── */
.host-separate { padding-block: 88px; }
.host-separate__row { display: flex; align-items: center; gap: 64px; }
.host-separate__icon { flex: none; display: grid; place-items: center; width: 88px; height: 88px; border-radius: 20px; border: 1px solid rgba(234,165,114,0.25); background: rgba(234,165,114,0.06); color: var(--coral); }
.host-separate__icon svg { width: 36px; height: 36px; }
.host-separate__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 14px; }
.host-separate__copy > p:not(.eyebrow) { max-width: 600px; font-size: 16px; line-height: 1.7; }
.host-separate__btn { flex: none; padding: 16px 30px; font-weight: 600; letter-spacing: 1px; }
@media (max-width: 1024px) { .host-separate__row { gap: 40px; } }
@media (max-width: 900px) {
  .host-separate__row { flex-wrap: wrap; gap: 28px; }
  .host-separate__copy { flex-basis: calc(100% - 128px); }
  .host-separate__btn { margin-left: 128px; }
}
@media (max-width: 620px) {
  .host-separate { padding-block: 56px; }
  .host-separate__row { flex-direction: column; align-items: flex-start; gap: 20px; }
  .host-separate__icon { width: 64px; height: 64px; border-radius: 16px; }
  .host-separate__icon svg { width: 28px; height: 28px; }
  .host-separate__copy { flex-basis: auto; gap: 12px; }
  .host-separate__copy > p:not(.eyebrow) { font-size: 15px; }
  .host-separate__btn { margin-left: 0; width: 100%; }
}

/* ── FAQ (cream) ── */
.host-faq { border-top: 1px solid var(--c-rule); }
.host-faq .faq__btn { padding-block: 24px; }
.host-faq .faq__icon { width: 30px; height: 30px; border-color: rgba(169,87,31,0.35); }
.host-faq .faq__btn[aria-expanded="true"] .faq__icon { background: var(--coral); border-color: var(--coral); color: var(--ink); }
.host-faq .faq__inner { max-width: 700px; color: var(--ink-body); }
@media (max-width: 620px) {
  .host-faq .faq__btn { padding-block: 18px; }
  .host-faq .faq__icon { width: 26px; height: 26px; }
}

/* ── CTA band (photo) ── */
.host-cta__copy { gap: 26px; }
.host-cta__lead { max-width: 560px; font-size: 18px; line-height: 1.7; }
.host-cta__btns { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 2px; }
.host-cta__book { background: rgba(17,17,17,0.35); padding-inline: 28px; }
@media (max-width: 620px) {
  .host-cta__copy { gap: 20px; }
  .host-cta__lead { font-size: 16px; }
  .host-cta__btns { flex-direction: column; width: 100%; gap: 12px; }
  .host-cta__btns .btn { width: 100%; }
}

/* plan comparison: five columns, first column pinned when it scrolls sideways */
.host-compare .compare--plans col.compare__label-col { width: 30%; }
.compare--plans th, .compare--plans td { padding: 14px 18px; font-size: 14px; }
.compare--plans thead th { text-align: left; color: var(--cream); font-size: 13px; }
.host-compare .compare--plans thead th span { margin-top: 4px; font: 700 15px/1 var(--font-display); color: var(--coral); letter-spacing: .5px; }
.compare--plans tbody th { font-size: 14px; color: var(--slate); }
.compare__group th { background: rgba(149,173,197,0.06); font: 600 11px/1.4 var(--font-body) !important; letter-spacing: 2px; text-transform: uppercase; color: var(--coral) !important; }
.compare__yes { color: var(--coral); font-weight: 700; }
.compare__no { color: rgba(149,173,197,0.4); }
@media (max-width: 900px) {
  .host-compare .compare { overflow-x: auto; }
  .host-compare .compare table { min-width: 720px; }
  .compare--plans th, .compare--plans td { padding: 12px 14px; font-size: 13px; }
}

/* billing terms, where the Stripe checkout placeholder used to sit */
.host-billing { align-self: center; padding: 30px 30px 28px; }
.host-billing__title { font: 700 clamp(19px, 1.8vw, 23px)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: .5px; color: var(--c-heading); }
.host-billing__list { margin-top: 18px; gap: 12px; }
.host-billing__list li { font-size: 14.5px; line-height: 1.55; }
.host-billing__note { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--c-rule); font-size: 13.5px; line-height: 1.55; color: var(--c-text); }

/* "Compare every feature": native details, closed by default, no JS needed.
   The table it holds moved here from the deleted Side by Side section. */
.host-toggle { margin-top: 34px; border: 1px solid var(--c-rule); border-radius: 14px; background: rgba(26,26,26,0.03); }
.host-toggle__summary { display: flex; align-items: center; gap: 12px; padding: 18px 22px; cursor: pointer; list-style: none; font: 600 12px/1 var(--font-body); letter-spacing: 1.6px; text-transform: uppercase; color: var(--c-heading); }
.host-toggle__summary::-webkit-details-marker { display: none; }
.host-toggle__summary::after { content: ''; width: 9px; height: 9px; margin-left: auto; border-right: 2px solid var(--coral); border-bottom: 2px solid var(--coral); transform: rotate(45deg) translate(-2px, -2px); transition: transform .22s var(--ease-out); }
.host-toggle[open] .host-toggle__summary::after { transform: rotate(225deg) translate(-2px, -2px); }
.host-toggle__summary:hover { color: var(--coral-ink); }
.host-toggle__summary:focus-visible { outline: 2px solid var(--coral); outline-offset: -2px; border-radius: 14px; }
.host-toggle__body { padding: 0 22px 24px; }
.host-toggle__note { margin-bottom: 16px; font-size: 13.5px; line-height: 1.55; color: var(--c-text); }
/* the two footnotes used to sit on separate rows 60px apart; they are one row now,
   and wrap to stacked when the pair no longer fits side by side */
.host-plans__foot { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 10px 40px; margin-top: 28px; }
.host-plans__sep, .host-help { font-size: 15px; line-height: 1.6; color: var(--c-text); }
/* the table sits on cream here, not charcoal */
.host-toggle .compare { overflow-x: auto; }
.host-toggle .compare table { min-width: 720px; }
.host-tier--popular { position: relative; border-color: rgba(234,165,114,0.5); }
.host-tier__tag { position: absolute; top: -12px; left: 22px; }
@media (max-width: 620px) {
  .host-toggle__summary { padding: 15px 16px; font-size: 11.5px; }
  .host-toggle__body { padding: 0 16px 18px; }
}

/* The 720px floor forces a sideways scroll inside a 300px card on a phone.
   Above 620px the shared .compare rules keep the table as a table and the floor
   still earns its keep; below that the rows stack, so it only does harm. */
@media (max-width: 620px) {
  .host-compare .compare table,
  .host-toggle .compare table { min-width: 0; }
}