/**
 * Shared page skeleton for the 7 hosting marketing pages (market/web-hosting.php,
 * cloud-hosting.php, wordpress-hosting.php, managed-wordpress-hosting.php, laravel-hosting.php,
 * nodejs-hosting.php, python-hosting.php) — 2026-08-13, hosting-marketing-pages pass.
 *
 * ONE shared stylesheet, not 7 hand-typed <style> blocks — the base rhythm/eyebrow/button/reveal/
 * jump-nav/comparison-table/FAQ classes below intentionally reuse the exact same names and visual
 * language market/features.php, market/domains.php and market/uptime.php already established (see
 * those files' own <style> blocks) so every market page on this install reads as one consistent
 * design system — this file just stops that specific vocabulary from being copy-pasted an 8th
 * (and 9th, 10th...) time. Every color/radius/shadow/font below traces to market/_tokens.css's real
 * --mc-* tokens; no new hex literal anywhere in this file.
 *
 * NEW components not needed by the earlier pages: `.hlp-feature-*` (feature grid), `.hlp-sec-*`
 * (security grid), `.hlp-why-*`, `.hlp-hero-visual-*` (the two hero-visual variants — a live
 * "plan snapshot" stat card for the 4 real hosting-product pages, and a small terminal/code card
 * for the 3 developer-stack pages that share Cloud Hosting's plans), `.hlp-cross-*` (the small
 * cross-link band between Cloud Hosting and its 3 stack variants).
 *
 * Linked directly by each of the 7 pages' own <head>, same convention as _tokens.css/_chrome.css.
 */

html, body { overflow-x: hidden; }
:root {
  --hlp-shadow-sm: 0 10px 30px -18px rgba(15, 17, 21, 0.28);
  --hlp-shadow: 0 24px 70px -36px rgba(15, 17, 21, 0.35);
  --hlp-maxw: 1200px;
  --hlp-on-purple-88: color-mix(in srgb, var(--mc-bg) 88%, transparent);
  --hlp-purple-tint: color-mix(in srgb, var(--mc-purple) 10%, var(--mc-bg));
}

.wrap { max-width: var(--hlp-maxw); margin: 0 auto; padding: 0 24px; }
section { padding: 104px 0; }
@media (max-width: 720px) { section { padding: 64px 0; } }

.eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: .78rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--mc-purple); }
/* 2026-08-14 dark-mode contrast fix (found live, via a real getComputedStyle sweep of
   market/web-hosting.php): raw --mc-purple (#a83fff) as text only clears 4.33:1 against the real
   dark page background here -- a genuine AA fail, same underlying issue as every --primary-accented
   consumer on the Smarty side (see custom.css's --primary-glow token comment for the full WCAG
   derivation this mirrors). --primary-glow (defined in _tokens.css's own dark block, #b55cff) clears
   4.7-5.5:1 on these surfaces. This single fix covers every "eyebrow" label across all 7 pages this
   file styles (Security, Comparison, Plans & pricing, etc.). */
:root[data-theme="dark"] .eyebrow { color: var(--primary-glow); }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--mc-purple); }
h1, h2, h3 { margin: 0; font-weight: 800; letter-spacing: -0.02em; color: var(--mc-ink); }
p { margin: 0; line-height: 1.65; }
.muted { color: var(--mc-text-muted); }
a:focus-visible, button:focus-visible, summary:focus-visible { outline: 2px solid var(--mc-purple); outline-offset: 3px; border-radius: 4px; }
[id] { scroll-margin-top: 92px; }

.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s var(--mc-ease), transform .7s var(--mc-ease); }
.reveal.is-visible { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } }

/* ================= BUTTONS ================= */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 14px 26px; border-radius: var(--mc-radius-pill); font-weight: 650; font-size: .96rem; cursor: pointer; border: 1px solid transparent; transition: transform var(--mc-duration) var(--mc-ease), background var(--mc-duration) var(--mc-ease), border-color var(--mc-duration) var(--mc-ease); min-height: 48px; }
.btn-primary { background: var(--mc-purple); color: #fff; }
.btn-primary:hover { background: var(--mc-purple-dark); transform: translateY(-2px); }
/* 2026-08-14 dark-mode contrast fix: white text on raw --mc-purple is only 4.36:1 (same underlying
   fail as custom.css's own .btn-primary fix -- see that token's comment). --mc-purple-dark (aliased
   sitewide as --primary-lifted, #8b2fd9) with white text is 5.99:1. Hover already correctly used
   --mc-purple-dark, unaffected by this fix -- only the resting fill needed it. */
:root[data-theme="dark"] .btn-primary:not(.final-cta .btn-primary) { background: var(--mc-purple-dark); }
.btn-ghost { background: transparent; color: var(--mc-ink); border-color: var(--mc-border); }
.btn-ghost:hover { border-color: var(--mc-purple); color: var(--mc-purple); transform: translateY(-2px); }
.btn-on-dark { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .35); }
.btn-on-dark:hover { border-color: #fff; transform: translateY(-2px); }
.btn-sm { padding: 10px 18px; font-size: .86rem; min-height: 40px; }
.btn-block { width: 100%; }

/* ================= HERO ================= */
.hero { padding: 84px 0 56px; position: relative; overflow: hidden; }
.hero-glow {
  position: absolute; inset: -18% -8% auto -8%; height: 520px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(440px 300px at 18% 12%, color-mix(in srgb, var(--mc-purple) 24%, transparent), transparent 68%),
    radial-gradient(420px 300px at 82% 6%, color-mix(in srgb, var(--hlp-accent, var(--mc-orange)) 20%, transparent), transparent 68%),
    radial-gradient(380px 280px at 50% 55%, color-mix(in srgb, var(--mc-green) 16%, transparent), transparent 70%);
  filter: blur(10px);
}
.hero-inner { position: relative; z-index: 1; }
.hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 56px; align-items: center; }
@media (max-width: 980px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } }
.hero h1 { font-size: clamp(2.35rem, 4.4vw, 3.5rem); line-height: 1.08; margin: 16px 0 20px; }
.hero-accent { color: var(--hlp-accent, var(--mc-purple)); }
.hero p.lead { font-size: 1.1rem; line-height: 1.62; color: var(--mc-text); max-width: 52ch; }
.hero-ctas { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 28px; }
.hero-chips { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 22px 0 0; padding: 0; }
.hero-chip { display: inline-flex; align-items: center; gap: 7px; background: var(--mc-bg-muted); border: 1px solid var(--mc-border); color: var(--mc-text); font-size: .85rem; font-weight: 650; padding: 8px 14px 8px 11px; border-radius: 999px; }
.hero-chip svg { width: 14px; height: 14px; color: var(--hlp-accent, var(--mc-purple)); flex-shrink: 0; }

/* ---- Hero visual: stat card (product pages) ---- */
.hlp-hero-visual { border-radius: var(--mc-radius-xl); border: 1px solid var(--mc-border); background: var(--mc-bg); box-shadow: var(--hlp-shadow); padding: 22px; }
.hlp-hero-visual-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 2px 6px 16px; }
.hlp-hero-visual-title { font-weight: 750; font-size: .92rem; color: var(--mc-ink); }
.hlp-hero-visual-live { display: inline-flex; align-items: center; gap: 7px; font-size: .78rem; font-weight: 700; color: var(--mc-text-muted); }
.hlp-hero-visual-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mc-green); box-shadow: 0 0 0 3px var(--mc-green-soft); animation: hlpPulse 2.2s ease-in-out infinite; }
@keyframes hlpPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.35); opacity: .6; } }
@media (prefers-reduced-motion: reduce) { .hlp-hero-visual-dot { animation: none; } }
.hlp-stat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.hlp-stat-tile { background: var(--mc-bg-muted); border: 1px solid var(--mc-border-soft); border-radius: 16px; padding: 16px 16px; }
.hlp-stat-tile-icon { width: 32px; height: 32px; border-radius: 9px; display: flex; align-items: center; justify-content: center; margin-bottom: 10px; background: var(--hlp-accent-soft, var(--mc-purple-soft)); color: var(--hlp-accent, var(--mc-purple)); }
.hlp-stat-tile-icon svg { width: 16px; height: 16px; }
.hlp-stat-tile-value { font-weight: 800; font-size: 1.02rem; color: var(--mc-ink); }
.hlp-stat-tile-label { font-size: .78rem; color: var(--mc-text-muted); margin-top: 2px; font-weight: 600; line-height: 1.35; }
.hlp-hero-visual-note { margin-top: 16px; font-size: .8rem; color: var(--mc-text-muted); display: flex; gap: 7px; align-items: flex-start; }
.hlp-hero-visual-note svg { flex: none; margin-top: 2px; color: var(--hlp-accent, var(--mc-purple)); }

/* ---- Hero visual: terminal/code card (Laravel/Node.js/Python pages) ---- */
.hlp-term-card { background: #14121c; border-radius: var(--mc-radius-xl); box-shadow: var(--hlp-shadow); overflow: hidden; border: 1px solid rgba(255, 255, 255, .08); }
.hlp-term-bar { display: flex; align-items: center; gap: 8px; padding: 13px 16px; background: rgba(255, 255, 255, .04); }
.hlp-term-dot { width: 10px; height: 10px; border-radius: 50%; }
.hlp-term-bar-label { margin-left: 8px; font-size: .76rem; color: rgba(255, 255, 255, .5); font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; }
.hlp-term-body { padding: 20px 20px 22px; font-family: ui-monospace, "SF Mono", "Cascadia Mono", Menlo, Consolas, monospace; font-size: .86rem; line-height: 1.85; color: #d7d5e0; }
.hlp-term-body .hlp-term-prompt { color: #7ee787; }
.hlp-term-body .hlp-term-cmd { color: #fff; }
.hlp-term-body .hlp-term-comment { color: rgba(255, 255, 255, .4); }
.hlp-term-body .hlp-term-out { color: rgba(255, 255, 255, .62); display: block; padding-left: 1.4em; }
.hlp-term-foot { border-top: 1px solid rgba(255, 255, 255, .08); padding: 14px 18px; font-size: .78rem; color: rgba(255, 255, 255, .55); display: flex; align-items: center; gap: 8px; }
.hlp-term-foot svg { width: 14px; height: 14px; color: #7ee787; flex-shrink: 0; }

/* ================= JUMP NAV ================= */
.jumpnav { padding: 0 0 8px; }
.jump-list { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; }
.jump-link { display: inline-flex; align-items: center; gap: 6px; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--mc-border); color: var(--mc-text); font-weight: 650; font-size: .86rem; text-decoration: none; transition: border-color var(--mc-duration) var(--mc-ease), color var(--mc-duration) var(--mc-ease), background var(--mc-duration) var(--mc-ease); }
.jump-link:hover { border-color: var(--hlp-accent, var(--mc-purple)); color: var(--hlp-accent, var(--mc-purple)); background: var(--hlp-accent-soft, var(--mc-purple-soft)); }

/* ================= SECTION HEADS ================= */
.head-center { text-align: center; max-width: 700px; margin: 0 auto 52px; }
.head-center h2 { font-size: clamp(1.85rem, 3.5vw, 2.6rem); margin-top: 16px; }
.head-center p { margin-top: 16px; font-size: 1.03rem; color: var(--mc-text-muted); }

/* ================= TRUST STRIP ================= */
.hlp-trust { padding: 6px 0 4px; }
.hlp-trust-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--mc-border-soft); border: 1px solid var(--mc-border-soft); border-radius: var(--mc-radius-lg); overflow: hidden; }
@media (max-width: 980px) { .hlp-trust-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .hlp-trust-grid { grid-template-columns: 1fr; } }
.hlp-trust-item { background: var(--mc-bg); padding: 22px 20px; display: flex; gap: 12px; align-items: flex-start; }
.hlp-trust-item svg { flex: none; color: var(--hlp-accent, var(--mc-purple)); margin-top: 1px; }
.hlp-trust-item .t-title { font-weight: 700; font-size: .89rem; color: var(--mc-ink); margin-bottom: 3px; }
.hlp-trust-item .t-sub { font-size: .8rem; color: var(--mc-text-muted); line-height: 1.45; }

/* ================= FEATURE GRID ================= */
.hlp-feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
@media (max-width: 900px) { .hlp-feature-grid { grid-template-columns: 1fr; } }
.hlp-feature-card { border: 1px solid var(--mc-border); border-radius: var(--mc-radius-xl); background: var(--mc-bg); padding: 28px; box-shadow: var(--hlp-shadow-sm); display: flex; flex-direction: column; transition: transform var(--mc-duration) var(--mc-ease), box-shadow var(--mc-duration) var(--mc-ease); }
.hlp-feature-card:hover { transform: translateY(-4px); box-shadow: var(--hlp-shadow); }
.hlp-feature-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; }
.hlp-feature-icon { width: 46px; height: 46px; border-radius: 13px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.hlp-feature-icon svg { width: 21px; height: 21px; }
.hlp-feature-tag { font-size: .72rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--mc-text-muted); background: var(--mc-bg-muted); border: 1px solid var(--mc-border-soft); border-radius: 999px; padding: 4px 10px; }
.hlp-feature-card h3 { font-size: 1.08rem; margin-bottom: 10px; }
.hlp-feature-card p { font-size: .9rem; color: var(--mc-text-muted); flex-grow: 1; }
.hlp-feature-foot { display: flex; align-items: center; gap: 10px; margin-top: 18px; }
.hlp-feature-line { flex: 1 1 auto; height: 2px; border-radius: 2px; }
.hlp-feature-card[data-tint="purple"] .hlp-feature-icon { background: var(--mc-purple-soft); color: var(--mc-purple); }
.hlp-feature-card[data-tint="purple"] .hlp-feature-line { background: linear-gradient(90deg, var(--mc-purple), transparent); }
.hlp-feature-card[data-tint="orange"] .hlp-feature-icon { background: var(--mc-orange-soft); color: var(--mc-orange); }
.hlp-feature-card[data-tint="orange"] .hlp-feature-line { background: linear-gradient(90deg, var(--mc-orange), transparent); }
.hlp-feature-card[data-tint="green"] .hlp-feature-icon { background: var(--mc-green-soft); color: var(--mc-green); }
.hlp-feature-card[data-tint="green"] .hlp-feature-line { background: linear-gradient(90deg, var(--mc-green), transparent); }
.hlp-feature-card[data-tint="blue"] .hlp-feature-icon { background: var(--mc-blue-soft); color: var(--mc-blue); }
.hlp-feature-card[data-tint="blue"] .hlp-feature-line { background: linear-gradient(90deg, var(--mc-blue), transparent); }

/* ================= CONFIGURATOR SECTION WRAP ================= */
.hlp-config-help { text-align: center; margin: 28px 0 0; color: var(--mc-text-muted); font-size: .9rem; }
.hlp-config-help a { color: var(--mc-purple); font-weight: 700; text-decoration: none; }
.hlp-config-help a:hover { text-decoration: underline; }

/* ================= SECURITY GRID ================= */
.hlp-sec-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 900px) { .hlp-sec-grid { grid-template-columns: 1fr; } }
.hlp-sec-item { display: flex; gap: 15px; padding: 24px; border: 1px solid var(--mc-border); border-radius: var(--mc-radius-lg); background: var(--mc-bg); box-shadow: var(--hlp-shadow-sm); }
.hlp-sec-icon { width: 44px; height: 44px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--mc-purple-soft); color: var(--mc-purple); }
.hlp-sec-icon svg { width: 20px; height: 20px; }
.hlp-sec-item h3 { font-size: 1rem; margin-bottom: 6px; }
.hlp-sec-item p { font-size: .87rem; color: var(--mc-text-muted); line-height: 1.55; }
.hlp-sec-note { margin-top: 26px; text-align: center; font-size: .88rem; color: var(--mc-text-muted); }

/* ================= COMPARISON TABLE ================= */
.compare-scroll { overflow-x: auto; border-radius: var(--mc-radius-lg); border: 1px solid var(--mc-border); -webkit-overflow-scrolling: touch; contain: paint; }
.compare-table { width: 100%; min-width: 640px; border-collapse: collapse; background: var(--mc-bg); }
.compare-table th, .compare-table td { padding: 16px 20px; text-align: left; border-bottom: 1px solid var(--mc-border-soft); vertical-align: middle; }
.compare-table thead th { font-size: .74rem; text-transform: uppercase; letter-spacing: .06em; color: var(--mc-text-muted); font-weight: 700; background: var(--mc-bg-muted); }
.compare-table thead th.compare-col-vercaa { color: var(--mc-purple); background: var(--mc-purple-soft); }
/* 2026-08-14 dark-mode contrast fix: raw --mc-purple text against this cell's own --mc-purple-soft
   background (an 18%-alpha translucent purple over the dark page in this theme -- composites to
   roughly rgb(40,20,61) in real measurement) is only 3.83:1. --primary-glow clears it at 4.72:1. */
:root[data-theme="dark"] .compare-table thead th.compare-col-vercaa { color: var(--primary-glow); }
.compare-table tbody tr:last-child td { border-bottom: none; }
.compare-table tbody tr:hover { background: var(--mc-bg-muted); }
.compare-table td.compare-col-vercaa { background: color-mix(in srgb, var(--mc-purple) 5%, var(--mc-bg)); font-weight: 650; }
.compare-feature { font-weight: 650; font-size: .92rem; color: var(--mc-ink); }
.compare-yes, .compare-no, .compare-partial { display: inline-flex; align-items: center; gap: 7px; font-size: .88rem; font-weight: 650; white-space: nowrap; }
.compare-yes { color: var(--mc-green); }
.compare-no { color: var(--mc-text-muted); }
.compare-partial { color: var(--mc-orange); }
.compare-yes svg, .compare-no svg, .compare-partial svg { width: 16px; height: 16px; flex-shrink: 0; }
.compare-note { margin-top: 20px; text-align: center; font-size: .86rem; color: var(--mc-text-muted); }

/* ================= WHY VERCAA ================= */
.hlp-why-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
@media (max-width: 860px) { .hlp-why-grid { grid-template-columns: 1fr; } }
.hlp-why-item { display: flex; gap: 15px; padding: 24px 26px; border-radius: var(--mc-radius-lg); background: var(--mc-bg-muted); border: 1px solid var(--mc-border-soft); }
.hlp-why-icon { width: 42px; height: 42px; border-radius: 12px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: var(--mc-green-soft); color: var(--mc-green); }
.hlp-why-icon svg { width: 19px; height: 19px; }
.hlp-why-item h3 { font-size: .98rem; margin-bottom: 6px; }
.hlp-why-item p { font-size: .87rem; color: var(--mc-text-muted); line-height: 1.55; }

/* ================= CROSS-LINK BAND (Cloud <-> Laravel/Node/Python) ================= */
.hlp-cross-band { border: 1px solid var(--mc-border); border-radius: var(--mc-radius-xl); background: var(--mc-bg-muted); padding: 34px 36px; }
.hlp-cross-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 20px; flex-wrap: wrap; }
.hlp-cross-head h3 { font-size: 1.15rem; }
.hlp-cross-head p { font-size: .88rem; color: var(--mc-text-muted); margin-top: 4px; }
.hlp-cross-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
@media (max-width: 760px) { .hlp-cross-grid { grid-template-columns: 1fr; } }
.hlp-cross-card { display: flex; align-items: center; gap: 13px; padding: 16px; border-radius: 14px; background: var(--mc-bg); border: 1px solid var(--mc-border); text-decoration: none; transition: border-color var(--mc-duration) var(--mc-ease), transform var(--mc-duration) var(--mc-ease); }
.hlp-cross-card:hover { border-color: var(--mc-purple); transform: translateY(-2px); }
.hlp-cross-icon { width: 38px; height: 38px; border-radius: 10px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; background: var(--mc-purple-soft); color: var(--mc-purple); }
.hlp-cross-icon svg { width: 18px; height: 18px; }
.hlp-cross-title { font-weight: 700; font-size: .92rem; color: var(--mc-ink); }
.hlp-cross-sub { font-size: .78rem; color: var(--mc-text-muted); margin-top: 1px; }
.hlp-cross-arrow { margin-left: auto; color: var(--mc-text-muted); flex-shrink: 0; transition: transform var(--mc-duration) var(--mc-ease), color var(--mc-duration) var(--mc-ease); }
.hlp-cross-card:hover .hlp-cross-arrow { color: var(--mc-purple); transform: translateX(3px); }

/* ================= FAQ ================= */
.faq-list { max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 12px; }
.faq-item { border: 1px solid var(--mc-border); border-radius: 16px; background: var(--mc-bg); overflow: hidden; }
.faq-item summary { list-style: none; cursor: pointer; padding: 20px 24px; display: flex; align-items: center; justify-content: space-between; gap: 16px; font-weight: 700; font-size: 1rem; color: var(--mc-ink); min-height: 44px; }
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary svg { flex: none; color: var(--mc-purple); transition: transform var(--mc-duration) var(--mc-ease); }
.faq-item[open] summary svg { transform: rotate(180deg); }
.faq-item .faq-a { padding: 0 24px 22px; font-size: .94rem; color: var(--mc-text-muted); line-height: 1.65; max-width: 70ch; }
.faq-item .faq-a a { color: var(--mc-purple); font-weight: 700; text-decoration: none; }
.faq-item .faq-a a:hover { text-decoration: underline; }

/* ================= FINAL CTA ================= */
.final-cta { border-radius: var(--mc-radius-xl); background: linear-gradient(135deg, var(--mc-purple) 0%, var(--mc-purple-dark) 100%); padding: 60px 48px; text-align: center; color: #fff; }
.final-cta h2 { color: #fff; font-size: clamp(1.8rem, 3.4vw, 2.4rem); }
.final-cta p { color: var(--hlp-on-purple-88); margin-top: 14px; font-size: 1.02rem; }
.final-cta .cta-actions { margin-top: 26px; display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.final-cta .btn-primary { background: #fff; color: var(--mc-purple-dark); }
.final-cta .btn-primary:hover { background: var(--hlp-purple-tint); transform: translateY(-2px); }
@media (max-width: 600px) { .final-cta { padding: 44px 24px; } }
