/* ============================================================
   VoltaVPN — marketing page layouts (light editorial surface)
   ------------------------------------------------------------
   Page-level composition on top of foundation.css + components.css.
   Tokens only; the accent stays state-only (badges, dots, the
   live status dot) — never on a button or a heading.
   ============================================================ */

[data-surface="marketing"] main { display: block; }

/* --- Scroll reveal --- */
.js-reveal [data-reveal] {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out);
}
.js-reveal [data-reveal].is-revealed { opacity: 1; transform: none; }

/* --- Mobile nav sheet --- */
[data-surface="marketing"] .mobile-nav:not([hidden]) {
  display: flex;
  flex-direction: column;
  position: fixed;
  inset: 0;
  z-index: 200;
  background: var(--paper-50);
  color: var(--ink-900);
  padding: var(--s-12) var(--s-6);
  gap: var(--s-3);
  overflow-y: auto;
}
[data-surface="marketing"] .mobile-nav a {
  color: inherit;
  text-decoration: none;
  font: 600 var(--t-h5)/1.2 var(--font-sans);
  padding: var(--s-3) 0;
  border-bottom: var(--hairline);
}
[data-surface="marketing"] .mobile-nav .v2-btn { margin-top: var(--s-2); }

/* ============================================================
   HERO — asymmetric editorial, no glow, no gradient on type
   ============================================================ */

.hero {
  padding: var(--s-20) 0 var(--s-16);
}
.hero-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-12);
  align-items: center;
}
@media (min-width: 900px) {
  .hero-grid { grid-template-columns: 1.05fr 0.95fr; }
}
.hero-title {
  font-size: clamp(40px, 7vw, 88px);
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-tight);
  margin: var(--s-4) 0 var(--s-5);
}
.hero-sub {
  font-size: var(--t-lg);
  line-height: var(--lh-base);
  color: var(--ink-700);
  max-width: 46ch;
}
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3);
  align-items: center;
  margin-top: var(--s-8);
}
.hero-spec { margin-top: var(--s-10); }
.hero-spec-status { color: var(--signal); }

/* Network diagram (replaces the spinning globe gimmick) */
.netcard {
  border: var(--hairline);
  border-radius: var(--r-lg);
  background: var(--paper-0);
  overflow: hidden;
}
.netcard-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 11px 15px;
  border-bottom: var(--hairline);
  font: 500 var(--t-xs)/1 var(--font-mono);
  letter-spacing: var(--tracking-eyebrow);
  text-transform: uppercase;
  color: var(--ink-500);
}
.netcard-rows { padding: var(--s-2) 0; }
.netcard-row {
  display: grid;
  grid-template-columns: 1fr auto auto;
  gap: var(--s-4);
  align-items: center;
  padding: 10px 15px;
  font-family: var(--font-mono);
  font-size: var(--t-sm);
}
.netcard-row + .netcard-row { border-top: var(--hairline); }
.netcard-city { color: var(--ink-900); }
.netcard-ms { color: var(--ink-500); font-variant-numeric: tabular-nums; }
.netcard-dot {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--signal); justify-self: end;
}

/* ============================================================
   SECTION HEADINGS
   ============================================================ */

.section-head { margin-bottom: var(--s-10); max-width: 60ch; }
.section-head .v2-eyebrow { display: block; margin-bottom: var(--s-3); }
.section-h2 {
  font-size: clamp(28px, 4vw, var(--t-h4));
  font-weight: 600;
  letter-spacing: var(--tracking-tight);
  line-height: var(--lh-snug);
}
.section-lede {
  margin-top: var(--s-4);
  font-size: var(--t-md);
  color: var(--ink-700);
  line-height: var(--lh-base);
}

/* ============================================================
   FEATURE ROW — numbered editorial columns, hairline-divided
   ============================================================ */

.feature-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-8);
  border-top: var(--hairline);
  padding-top: var(--s-10);
}
@media (min-width: 768px) {
  .feature-row { grid-template-columns: repeat(3, 1fr); gap: 0; }
  .feature-row > * { padding: 0 var(--s-8); }
  .feature-row > * + * { border-left: var(--hairline); }
  .feature-row > *:first-child { padding-left: 0; }
}
.feature-num {
  font: 500 var(--t-xs)/1 var(--font-mono);
  letter-spacing: var(--tracking-mono);
  color: var(--ink-400);
  margin-bottom: var(--s-3);
}
.feature-title { font-size: var(--t-lg); font-weight: 600; margin-bottom: var(--s-2); }
.feature-text { font-size: var(--t-base); color: var(--ink-700); line-height: var(--lh-base); }

/* ============================================================
   PRICING
   ============================================================ */

.pricing-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s-6);
}
@media (min-width: 820px) {
  .pricing-grid { grid-template-columns: repeat(3, 1fr); }
}
.price-card {
  display: flex;
  flex-direction: column;
  border: var(--hairline);
  border-radius: var(--r-lg);
  background: var(--paper-0);
  padding: var(--s-6);
}
.price-card.is-featured { border-color: var(--ink-900); }
.price-card-name { font: 600 var(--t-h6)/1.2 var(--font-sans); margin-bottom: var(--s-1); }
.price-amount {
  font-size: var(--t-h4);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  line-height: 1;
  margin-top: var(--s-3);
}
.price-interval { font: 400 var(--t-sm) var(--font-mono); color: var(--ink-500); margin-top: 6px; }
.price-features {
  list-style: none; padding: 0; margin: var(--s-6) 0;
  display: flex; flex-direction: column; gap: var(--s-3);
  border-top: var(--hairline); padding-top: var(--s-6);
}
.price-features li {
  display: flex; align-items: flex-start; gap: var(--s-2);
  font-size: var(--t-base); color: var(--ink-700);
}
.price-features li [data-lucide] { color: var(--signal); margin-top: 2px; }
.price-features li .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums; color: var(--ink-900); }
.price-card .v2-btn { margin-top: auto; }
.price-per { font: 400 var(--t-sm) var(--font-mono); color: var(--ink-500); margin-left: 4px; }

/* Monthly / yearly billing toggle */
.pricing-toggle {
  display: flex;
  width: fit-content;
  gap: 2px;
  padding: 3px;
  margin: 0 auto var(--s-8);
  border: var(--hairline);
  border-radius: var(--r-md);
  background: var(--paper-0);
}
.pricing-toggle button {
  appearance: none;
  border: 0;
  cursor: pointer;
  padding: 6px 16px;
  border-radius: 4px;
  background: transparent;
  color: var(--ink-500);
  font: 500 var(--t-sm) var(--font-mono);
  line-height: 1;
}
.pricing-toggle button.is-active {
  background: var(--ink-900);
  color: var(--paper-0);
}

/* ============================================================
   STATUS — table of nodes (tables are the house pattern)
   ============================================================ */

.status-summary {
  display: flex; align-items: center; gap: var(--s-2);
  font-family: var(--font-mono); font-size: var(--t-sm); color: var(--ink-500);
  margin-bottom: var(--s-6);
}
.status-wrap { border: var(--hairline); border-radius: var(--r-lg); overflow: hidden; }
.status-wrap .v2-table thead th { padding-inline: var(--s-5); }
.status-wrap .v2-table tbody td { padding-inline: var(--s-5); }
.load-cell { display: flex; align-items: center; gap: var(--s-3); min-width: 160px; }
.load-cell .v2-progress { flex: 1; }
.load-cell .num { min-width: 44px; text-align: right; }

/* ============================================================
   AUTH — centred panel with a spec rail beside it
   ============================================================ */

.auth-wrap {
  min-height: calc(100dvh - 64px);
  display: grid;
  grid-template-columns: 1fr;
  align-items: center;
  gap: var(--s-16);
  padding: var(--s-16) 0;
}
@media (min-width: 900px) {
  .auth-wrap { grid-template-columns: 1fr 1fr; }
}
.auth-aside { display: none; }
@media (min-width: 900px) { .auth-aside { display: block; } }
.auth-aside .auth-aside-h {
  font-size: var(--t-h5); font-weight: 600; letter-spacing: var(--tracking-tight);
  margin: var(--s-4) 0 var(--s-6); max-width: 22ch;
}
.auth-card {
  width: 100%;
  max-width: 420px;
  margin: 0 auto;
  border: var(--hairline);
  border-radius: var(--r-lg);
  background: var(--paper-0);
  padding: var(--s-8);
}
.auth-card h1 { font-size: var(--t-h5); margin: var(--s-2) 0 var(--s-6); }
.auth-foot {
  margin-top: var(--s-6); padding-top: var(--s-5);
  border-top: var(--hairline);
  font-size: var(--t-sm); color: var(--ink-500); text-align: center;
}
.auth-foot a { color: var(--ink-900); text-decoration: underline; text-underline-offset: 3px; }
.form-check { display: flex; align-items: center; gap: var(--s-2); margin: var(--s-1) 0 var(--s-5); }
.form-check input { width: 16px; height: 16px; accent-color: var(--signal); }
.form-check label { font-size: var(--t-sm); color: var(--ink-700); }
.form-link { font-size: var(--t-sm); color: var(--ink-500); }
.form-link:hover { color: var(--ink-900); }

/* ============================================================
   LEGAL / PROSE
   ============================================================ */

.prose { max-width: 70ch; }
.prose h1 { font-size: var(--t-h4); margin-bottom: var(--s-3); }
.prose .updated { font: 400 var(--t-sm) var(--font-mono); color: var(--ink-500); margin-bottom: var(--s-10); }
.prose h2 {
  font-size: var(--t-h6); margin: var(--s-10) 0 var(--s-3);
  padding-top: var(--s-6); border-top: var(--hairline);
}
.prose h3 { font-size: var(--t-md); margin: var(--s-6) 0 var(--s-2); }
.prose p, .prose li { font-size: var(--t-md); line-height: var(--lh-loose); color: var(--ink-700); }
.prose p { margin-bottom: var(--s-4); }
.prose ul, .prose ol { margin: 0 0 var(--s-4); padding-left: var(--s-6); }
.prose li { margin-bottom: var(--s-2); }
.prose a { color: var(--signal-strong); text-decoration: underline; text-underline-offset: 3px; }
.prose strong { color: var(--ink-900); }

/* ============================================================
   FAQ
   ============================================================ */

.faq { border-top: var(--hairline); }
.faq-item { border-bottom: var(--hairline); }
.faq-q {
  width: 100%;
  display: flex; align-items: center; justify-content: space-between; gap: var(--s-4);
  padding: var(--s-5) 0;
  background: none; border: 0; cursor: pointer; text-align: left;
  font: 500 var(--t-md) var(--font-sans); color: var(--ink-900);
}
.faq-q [data-lucide] { color: var(--ink-400); transition: transform var(--dur-base) var(--ease-out); }
.faq-q[aria-expanded="true"] [data-lucide] { transform: rotate(45deg); }
.faq-a { padding: 0 0 var(--s-5); max-width: 70ch; }
.faq-a p { font-size: var(--t-base); color: var(--ink-700); line-height: var(--lh-base); }

/* ============================================================
   CTA STRIP
   ============================================================ */

.cta-strip {
  border: var(--hairline);
  border-radius: var(--r-lg);
  background: var(--paper-0);
  padding: var(--s-12);
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-6);
}
.cta-strip h2 { font-size: var(--t-h5); letter-spacing: var(--tracking-tight); }
.cta-strip p { color: var(--ink-700); margin-top: var(--s-2); max-width: 48ch; }

/* ============================================================
   ERROR PAGES
   ============================================================ */

.error-wrap {
  min-height: calc(100dvh - 64px);
  display: flex; flex-direction: column; justify-content: center;
  padding: var(--s-16) 0;
  max-width: 56ch;
}
.error-code {
  font: 600 clamp(72px, 16vw, 160px)/1 var(--font-mono);
  font-variant-numeric: tabular-nums;
  letter-spacing: var(--tracking-tight);
  color: var(--ink-900);
}
.error-wrap h1 { font-size: var(--t-h5); margin: var(--s-3) 0 var(--s-3); }
.error-wrap p { color: var(--ink-700); font-size: var(--t-md); margin-bottom: var(--s-8); }

/* ============================================================
   RESPONSIVE NAV
   ============================================================ */

@media (max-width: 768px) {
  [data-surface="marketing"] .v2-nav-links,
  [data-surface="marketing"] #nav-actions { display: none; }
  [data-surface="marketing"] .mobile-menu-btn { display: inline-flex; }
}