:root {
  --content-bg: #0b0c0e;
  --content-panel: #121419;
  --content-panel-strong: #171a20;
  --content-line: #292d34;
  --content-text: #f2f2f0;
  --content-muted: #a1a6af;
  --content-quiet: #727984;
  --content-accent: #c7a36a;
  --content-teal: #65cdbf;
}

* { box-sizing: border-box; }

html { background: var(--content-bg); }

body {
  min-width: 320px;
  margin: 0;
  color: var(--content-text);
  background: var(--content-bg);
  font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; }

.content-shell { width: min(calc(100% - 40px), 1120px); margin-inline: auto; }

.content-header {
  position: sticky;
  z-index: 20;
  top: 0;
  border-bottom: 1px solid #272a31;
  background: rgba(9, 10, 12, .94);
  backdrop-filter: blur(14px);
}

.content-header-inner {
  display: flex;
  align-items: center;
  width: min(calc(100% - 64px), 1180px);
  min-height: 76px;
}

.content-brand { display: inline-flex; align-items: center; }
.content-brand img { display: block; width: 178px; height: 54px; object-fit: contain; object-position: left center; }

.content-nav { display: flex; align-items: center; gap: 32px; margin-left: auto; color: #92969e; font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif; font-size: 12px; }
.content-nav a { text-decoration: none; }
.content-nav a:hover { color: var(--content-text); }
.content-header-actions { display: flex; align-items: center; gap: 12px; margin-left: 34px; }
.content-header-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 38px; border: 1px solid #f2f2f0; border-radius: 6px; padding: 0 15px; color: #090a0c; background: #f2f2f0; font-family: Inter, "Segoe UI Variable", "Segoe UI", Arial, sans-serif; font-size: 11px; font-weight: 700; line-height: 1; text-decoration: none; }

.content-main { padding: 88px 0 112px; }

.content-kicker {
  margin: 0 0 16px;
  color: var(--content-accent);
  font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
  font-size: .76rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.content-hero { max-width: 820px; }
.content-hero h1 { max-width: 780px; margin: 0; font-size: clamp(2.5rem, 6vw, 5.2rem); line-height: .98; letter-spacing: -.06em; }
.content-lede { max-width: 720px; margin: 28px 0 0; color: var(--content-muted); font-size: clamp(1.05rem, 2vw, 1.3rem); }

.content-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.content-button { display: inline-flex; align-items: center; justify-content: center; min-height: 46px; border: 1px solid var(--content-line); border-radius: 6px; padding: 0 18px; background: var(--content-panel); font-weight: 700; text-decoration: none; }
.content-button:hover { border-color: var(--content-accent); }
.content-button--primary { border-color: var(--content-text); color: var(--content-bg); background: var(--content-text); }
.content-button--primary:hover { border-color: #d1d1ce; background: #d1d1ce; }

.content-section { margin-top: 84px; }
.content-section h2 { margin: 0 0 22px; font-size: clamp(1.7rem, 3vw, 2.7rem); line-height: 1.05; letter-spacing: -.045em; }
.content-section h3 { margin: 0 0 8px; font-size: 1.12rem; }
.content-section p { max-width: 760px; margin: 0 0 16px; color: var(--content-muted); }
.content-section > p + .content-grid,
.content-section > p + .content-directory,
.content-section > p + .content-table-wrap,
.content-section > p + .content-callout,
.content-section > p + .content-actions { margin-top: 22px; }
.content-grid + p,
.content-directory + p,
.content-table-wrap + p,
.content-callout + p,
.content-faq + .content-actions { margin-top: 22px; }

.content-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.content-card { border: 1px solid var(--content-line); border-radius: 10px; padding: 24px; background: var(--content-panel); }
.content-card p { font-size: .95rem; }
.content-card > :last-child { margin-bottom: 0; }

.content-steps { display: grid; gap: 12px; margin: 0; padding: 0; list-style: none; counter-reset: content-step; }
.content-steps li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 16px; align-items: start; border-top: 1px solid var(--content-line); padding: 18px 0; counter-increment: content-step; }
.content-steps li::before { color: var(--content-accent); content: counter(content-step, decimal-leading-zero); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .8rem; font-weight: 700; }
.content-steps strong { display: block; margin-bottom: 4px; }
.content-steps span { color: var(--content-muted); }

.content-callout { border: 1px solid rgba(101, 205, 191, .25); border-radius: 10px; padding: 24px; background: rgba(101, 205, 191, .06); }
.content-callout p { margin-bottom: 0; }

.content-directory { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.content-directory a { display: block; border: 1px solid var(--content-line); border-radius: 10px; padding: 24px; background: var(--content-panel); text-decoration: none; }
.content-directory a:hover { border-color: var(--content-accent); }
.content-directory span { display: block; margin-bottom: 10px; color: var(--content-accent); font-family: ui-monospace, SFMono-Regular, Consolas, monospace; font-size: .72rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.content-directory strong { display: block; font-size: 1.2rem; }
.content-directory p { margin: 10px 0 0; font-size: .93rem; }

.content-workflow { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 22px 0; }
.content-workflow span { border: 1px solid var(--content-line); border-radius: 7px; padding: 10px 13px; color: var(--content-text); background: var(--content-panel); font-weight: 700; }
.content-workflow i { color: var(--content-accent); font-style: normal; }

.content-table-wrap { overflow-x: auto; border: 1px solid var(--content-line); border-radius: 10px; }
.content-table { width: 100%; border-collapse: collapse; background: var(--content-panel); }
.content-table th, .content-table td { border-bottom: 1px solid var(--content-line); padding: 15px 18px; text-align: left; vertical-align: top; }
.content-table th { color: var(--content-text); font-size: .8rem; letter-spacing: .06em; text-transform: uppercase; }
.content-table td { color: var(--content-muted); }
.content-table tr:last-child td { border-bottom: 0; }

.content-note { border-left: 3px solid var(--content-accent); padding: 4px 0 4px 18px; }
.content-list { max-width: 760px; color: var(--content-muted); }
.content-list li { margin: 9px 0; }
.content-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.content-meta span { border: 1px solid var(--content-line); border-radius: 999px; padding: 6px 10px; color: var(--content-muted); font-size: .8rem; }

.content-faq { display: grid; gap: 14px; }
.content-faq details { border-bottom: 1px solid var(--content-line); padding: 0 0 14px; }
.content-faq summary { cursor: pointer; font-weight: 700; }
.content-faq p { margin: 12px 0 0; }

.pricing-comparison { --price-green: #69c492; --price-violet: #9b8be8; }
.billing-panel { display: flex; align-items: center; justify-content: space-between; gap: 28px; margin-top: 30px; border-bottom: 1px solid var(--content-line); padding: 0 4px 18px; }
.billing-panel > div:first-child strong, .billing-panel > div:first-child span { display: block; }
.billing-panel > div:first-child strong { color: var(--content-text); font-size: .82rem; }
.billing-panel > div:first-child span { margin-top: 4px; color: var(--content-quiet); font-size: .76rem; }
.billing-control { display: flex; align-items: center; gap: 10px; color: var(--content-quiet); font-size: .78rem; white-space: nowrap; }
.billing-control > span { transition: color .2s; }
.billing-control > span.active { color: var(--content-text); }
.billing-control b { margin-left: 4px; color: var(--price-green); font-size: .6rem; font-weight: 700; text-transform: uppercase; }
.billing-switch { position: relative; width: 48px; height: 26px; border: 1px solid #454a54; border-radius: 99px; padding: 3px; background: var(--content-panel); cursor: pointer; }
.billing-switch i { display: block; width: 18px; height: 18px; border-radius: 50%; background: var(--content-text); box-shadow: 0 2px 7px rgba(0, 0, 0, .35); transition: transform .22s ease; }
.billing-switch.annual i { transform: translateX(22px); }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); align-items: stretch; gap: 16px; margin-top: 24px; padding-block: 12px; }
.price-card { position: relative; display: flex; flex-direction: column; overflow: hidden; min-height: 570px; border: 1px solid var(--content-line); border-radius: 10px; padding: 28px; background: var(--content-panel); transition: border-color .2s, background .2s; }
.price-card:hover { border-color: #454a54; background: #15181d; }
.price-card::before { position: absolute; top: 0; right: 0; left: 0; height: 3px; background: var(--content-teal); content: ""; }
.price-card:nth-child(3)::before { background: var(--price-violet); }
.price-card--primary { z-index: 2; border-color: #777b84; background: var(--content-panel-strong); box-shadow: 0 24px 56px rgba(0, 0, 0, .26); transform: scale(1.025); }
.price-card--primary::before { background: var(--content-accent); }
.price-name { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; }
.price-name > span { color: var(--content-text); font-size: 1.25rem; font-weight: 700; }
.price-name strong { color: var(--content-text); font-size: 2rem; }
.price-name small { color: var(--content-quiet); font-size: .72rem; font-weight: 400; }
.content-section .price-card > p { min-height: 52px; margin: 18px 0 0; color: var(--content-muted); font-size: .86rem; line-height: 1.55; }
.plan-hosting { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin-top: 22px; border: 1px solid var(--content-line); border-radius: 7px; padding: 13px; background: #14171c; }
.plan-hosting span { color: var(--content-quiet); font-size: .66rem; text-transform: uppercase; }
.plan-hosting strong { color: var(--content-accent); font-size: .73rem; text-align: right; }
.plan-hosting--online { border-color: rgba(105, 196, 146, .28); background: rgba(105, 196, 146, .035); }
.plan-hosting--online strong { color: var(--price-green); }
.price-card ul { flex: 1; margin: 18px 0 26px; border-top: 1px solid var(--content-line); padding: 16px 0 0; list-style: none; }
.price-card li { margin-top: 12px; color: var(--content-muted); font-size: .8rem; line-height: 1.45; }
.price-card li::before { margin-right: 9px; color: var(--content-text); content: "—"; }
.price-card li sup { margin-left: 2px; }
.price-card .content-button { width: 100%; }
.content-section .pricing-disclaimer { max-width: none; margin: 18px 0 0; color: var(--content-quiet); font-size: .76rem; text-align: right; }
.pricing-disclaimer a { color: var(--content-muted); }

.content-footer { border-top: 1px solid var(--content-line); padding: 24px 0; color: var(--content-quiet); font-size: .86rem; }
.content-footer-inner { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 16px; }
.content-footer nav { display: flex; gap: 18px; }
.content-footer a:hover { color: var(--content-text); }

@media (max-width: 720px) {
  .content-shell { width: min(calc(100% - 28px), 1120px); }
  .content-header-inner { width: calc(100% - 36px); min-height: 76px; gap: 18px; }
  .content-brand { flex: 0 0 auto; }
  .content-brand img { width: 145px; height: 54px; }
  .content-nav { min-width: 0; gap: 16px; overflow-x: auto; white-space: nowrap; font-size: 11px; }
  .content-header-actions { display: none; }
  .content-main { padding: 62px 0 82px; }
  .content-grid { grid-template-columns: 1fr; }
  .content-directory { grid-template-columns: 1fr; }
  .billing-panel { align-items: flex-start; flex-direction: column; }
  .pricing-grid { grid-template-columns: 1fr; }
  .price-card { min-height: 0; }
  .price-card--primary { transform: none; }
  .content-section .price-card > p { min-height: 0; }
  .content-section .pricing-disclaimer { text-align: left; }
}