/* Molten Hosting marketing site. Tokens mirror the management console (website/src/theme.ts):
   dark by default, brand #FD4A19, Inter, 10px radius, outlined cards, one brand button per card. */
:root {
  --brand: #fd4a19;
  --brand-hover: #e8420f;
  --ember: #ffac1a;
  --nav: #12141d;
  --bg: #0c0e15;
  --paper: #161925;
  --divider: rgba(255, 255, 255, 0.12);
  --text: #ffffff;
  --text-2: rgba(255, 255, 255, 0.72);
  --text-3: rgba(255, 255, 255, 0.5);
  --success: #66bb6a;
  --radius: 10px;
  --font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font); line-height: 1.5; -webkit-font-smoothing: antialiased; overflow-x: hidden; }
a { color: var(--brand); }
img { display: block; }
h1, h2, h3, h4, p { margin: 0; }
.container { max-width: 1160px; margin: 0 auto; padding: 0 24px; }

/* Buttons */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 37px; padding: 0 18px; border-radius: var(--radius); font: 600 15px/1 var(--font); text-decoration: none; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: background-color 0.15s, border-color 0.15s, color 0.15s, box-shadow 0.15s; }
.btn-contained { background: var(--brand); color: #fff; }
.btn-contained:hover { background: var(--brand-hover); box-shadow: 0 8px 24px rgba(253, 74, 25, 0.35); }
.btn-outlined { background: transparent; color: inherit; border-color: color-mix(in srgb, currentColor 30%, transparent); }
.btn-outlined:hover { background: rgba(255, 255, 255, 0.06); }
.btn-text { background: transparent; color: #e0e0e0; }
.btn-text:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }

/* App bar */
.appbar { position: sticky; top: 0; z-index: 10; background: rgba(18, 20, 29, 0.85); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--divider); }
.toolbar { display: flex; align-items: center; gap: 8px; min-height: 64px; flex-wrap: wrap; padding-top: 8px; padding-bottom: 8px; }
.brand-link { display: flex; align-items: center; gap: 8px; margin-right: 16px; color: var(--brand); text-decoration: none; font-weight: 700; font-size: 20px; }
.toolbar .spacer { flex: 1; }

/* Hero: an ember glow and a faint grid, like a battle map */
.hero { position: relative; padding: 96px 0 56px; text-align: center; overflow: hidden; }
.hero::before { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 48px 48px; -webkit-mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse 70% 60% at 50% 30%, #000 30%, transparent 75%); pointer-events: none; }
.hero::after { content: ""; position: absolute; left: 50%; top: -220px; width: 900px; height: 600px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(253, 74, 25, 0.35), rgba(255, 172, 26, 0.12) 50%, transparent 75%); filter: blur(10px); pointer-events: none; }
.hero > .container, .hero > .video-wrap { position: relative; z-index: 1; }
.pill { display: inline-flex; align-items: center; gap: 8px; height: 30px; padding: 0 14px; border-radius: 15px; border: 1px solid rgba(253, 74, 25, 0.5); background: rgba(253, 74, 25, 0.1); color: #ffb49c; font-size: 13px; font-weight: 500; margin-bottom: 24px; }
.pill img { width: 16px; height: 16px; }
.hero h1 { font-size: 64px; font-weight: 800; line-height: 1.02; letter-spacing: -0.03em; max-width: 880px; margin: 0 auto 20px; }
.hero h1 .accent { background: linear-gradient(90deg, #ff6a3d, var(--ember)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.hero .lead { color: var(--text-2); font-size: 20px; max-width: 640px; margin: 0 auto 32px; }
.hero-actions { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }
.hero-note { color: var(--text-3); font-size: 14px; margin-top: 16px; }

.video-wrap { max-width: 960px; margin: 48px auto 0; padding: 0 24px; }
.video-frame { position: relative; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: #000; border: 1px solid rgba(255, 255, 255, 0.16); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6), 0 0 0 8px rgba(253, 74, 25, 0.06), 0 0 120px rgba(253, 74, 25, 0.18); }
.video-frame iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.video-caption { color: var(--text-3); font-size: 14px; margin-top: 14px; text-align: center; }
.video-caption a { color: var(--text-2); }

.stats { display: flex; justify-content: center; gap: 48px; flex-wrap: wrap; margin-top: 40px; color: var(--text-2); font-size: 14px; }
.stats strong { display: block; color: var(--text); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }

/* Sections */
.section { padding: 88px 0; }
.section.tight { padding-top: 0; }
.eyebrow { color: var(--brand); font-weight: 600; font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; margin-bottom: 10px; }
.h2 { font-size: 40px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px; }
.lead { color: var(--text-2); font-size: 18px; max-width: 640px; }
.center { text-align: center; }
.center .lead { margin: 0 auto; }
.section-head { margin-bottom: 40px; }

/* Plan comparison table */
.table-wrap { background: var(--paper); border: 1px solid var(--divider); border-radius: 14px; overflow: hidden; }
.plans { width: 100%; border-collapse: collapse; }
.plans th, .plans td { padding: 14px 20px; text-align: left; border-top: 1px solid var(--divider); vertical-align: top; }
.plans thead th { border-top: 0; vertical-align: bottom; padding-top: 24px; }
.plans thead .plan-name { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.plans thead .plan-price { display: flex; align-items: baseline; gap: 4px; margin-top: 6px; }
.plans thead .plan-price .amt { font-size: 36px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; }
.plans thead .plan-price .per { color: var(--text-3); font-size: 14px; }
.plans thead .plan-tagline { color: var(--text-2); font-size: 14px; font-weight: 400; margin-top: 10px; }
.plans .tag { display: inline-flex; align-items: center; height: 24px; padding: 0 10px; border-radius: 12px; background: linear-gradient(90deg, var(--brand), var(--ember)); color: #fff; font-size: 12px; font-weight: 700; white-space: nowrap; }
.plans th.popular, .plans td.popular { background: rgba(253, 74, 25, 0.07); }
.plans thead th.popular { box-shadow: inset 0 3px 0 var(--brand); }
.plans tbody th { font-weight: 500; color: var(--text-2); width: 26%; }
.plans tbody td { color: var(--text); }
.plans .check { color: var(--brand); font-weight: 700; }
.plans .dash { color: var(--text-3); }
.plans tfoot td { padding: 20px; }
.plans tfoot .btn { width: 100%; }
.table-note { color: var(--text-3); font-size: 14px; margin-top: 14px; text-align: center; }
.scroll-hint { display: none; color: var(--text-3); font-size: 13px; margin: 0 0 10px; text-align: center; }

/* How it works */
.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.step { background: var(--paper); border: 1px solid var(--divider); border-radius: var(--radius); padding: 28px; }
.step .num { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; background: linear-gradient(135deg, var(--brand), var(--ember)); color: #fff; font-weight: 700; margin-bottom: 18px; }
.step h3 { font-size: 18px; font-weight: 600; margin-bottom: 6px; }
.step p { color: var(--text-2); }

/* Feature tiles */
.bento { display: grid; grid-template-columns: repeat(6, 1fr); gap: 16px; }
.tile { background: var(--paper); border: 1px solid var(--divider); border-radius: var(--radius); padding: 28px; grid-column: span 2; }
.tile.wide { grid-column: span 3; }
.tile h3 { font-size: 18px; font-weight: 600; margin: 14px 0 6px; }
.tile p { color: var(--text-2); }
.tile .ic { width: 44px; height: 44px; border-radius: 10px; background: rgba(253, 74, 25, 0.14); display: grid; place-items: center; }
.tile .ic img { width: 24px; height: 24px; }
.tile .ic svg { width: 24px; height: 24px; color: #ff8a5f; }

/* Add-ons table */
.addons { background: var(--paper); border: 1px solid var(--divider); border-radius: 14px; overflow: hidden; }
.addons table { width: 100%; border-collapse: collapse; }
.addons th, .addons td { padding: 16px 24px; text-align: left; border-top: 1px solid var(--divider); }
.addons thead th { border-top: 0; color: var(--text-3); font-weight: 500; font-size: 13px; text-transform: uppercase; letter-spacing: 0.04em; }
.addons td.price { text-align: right; font-weight: 600; white-space: nowrap; }
.addons td.what { color: var(--text-2); }
.addons td .name { font-weight: 600; color: var(--text); }
.free { display: inline-flex; align-items: center; height: 22px; padding: 0 10px; border-radius: 11px; background: rgba(102, 187, 106, 0.16); color: var(--success); font-size: 12px; font-weight: 600; margin-left: 8px; white-space: nowrap; }

/* Regions */
.regions { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; }
.region { background: var(--paper); border: 1px solid var(--divider); border-radius: var(--radius); padding: 18px; display: flex; align-items: center; gap: 12px; }
.region .dot { width: 10px; height: 10px; border-radius: 50%; background: var(--success); box-shadow: 0 0 0 4px rgba(102, 187, 106, 0.18); flex: none; }
.region small { display: block; color: var(--text-3); }

/* FAQ */
.faq { display: grid; grid-template-columns: 1fr 1fr; gap: 24px 40px; }
.faq .q { font-weight: 600; margin-bottom: 6px; }
.faq .a { color: var(--text-2); }

/* Final CTA */
.cta { position: relative; overflow: hidden; border-radius: 18px; padding: 64px 40px; text-align: center; background: linear-gradient(135deg, #2a1410, #12141d 60%); border: 1px solid rgba(253, 74, 25, 0.35); }
.cta::before { content: ""; position: absolute; left: 50%; bottom: -200px; width: 700px; height: 400px; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(253, 74, 25, 0.45), transparent); filter: blur(20px); }
.cta > * { position: relative; }
.cta h2 { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.cta p { color: var(--text-2); margin-bottom: 24px; }

/* Footer */
footer { background: var(--nav); color: #bdbdbd; padding: 28px 0; border-top: 1px solid var(--divider); }
footer .row { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 14px; }
footer a { color: inherit; }
footer .links { display: flex; gap: 20px; flex-wrap: wrap; }

/* Long-form pages (terms) */
.prose { max-width: 820px; margin: 0 auto; padding: 64px 24px 88px; color: var(--text-2); }
.prose h1 { color: var(--text); font-size: 40px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.prose .updated { color: var(--text-3); font-size: 14px; margin-bottom: 40px; }
.prose h2 { color: var(--text); font-size: 18px; font-weight: 700; margin: 36px 0 10px; letter-spacing: 0.02em; }
.prose p { margin: 0 0 14px; }
.prose ul { margin: 0 0 14px; padding-left: 22px; }
.prose li { margin-bottom: 6px; }

@media (max-width: 960px) {
  .hero { padding: 56px 0 40px; }
  .hero h1 { font-size: 42px; }
  .hero .lead { font-size: 18px; }
  .section { padding: 56px 0; }
  .h2 { font-size: 30px; }
  .steps, .faq { grid-template-columns: 1fr; }
  .bento { grid-template-columns: 1fr; }
  .tile, .tile.wide { grid-column: span 1; }
  .regions { grid-template-columns: 1fr 1fr; }
  .stats { gap: 24px 32px; }
  .table-wrap, .addons { overflow-x: auto; }
  .plans { min-width: 640px; }
  /* The feature labels stay put while the plan columns scroll sideways. */
  .plans tbody th, .plans thead th:first-child, .plans tfoot td:first-child { position: sticky; left: 0; background: var(--paper); z-index: 1; }
  .plans tbody th { width: 140px; min-width: 140px; }
  .scroll-hint { display: block; }
  .addons table { min-width: 560px; }
  .cta { padding: 48px 24px; }
  .cta h2 { font-size: 28px; }
  .prose h1 { font-size: 30px; }
}
@media (max-width: 600px) {
  .toolbar .nav-secondary { display: none; }
  .regions { grid-template-columns: 1fr; }
}