/* ==========================================================================
   StakeClaimer unified design layer
   Loaded LAST on every HTML document. Visual only: no layout removal,
   no display:none, no content changes. Pages keep their own structure/JS.
   ========================================================================== */
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,600;9..40,700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root {
  --sc-bg: oklch(0.172 0.035 245.8);
  --sc-bg-deep: oklch(0.145 0.03 245.8);
  --sc-surface: oklch(0.239 0.035 241.6);
  --sc-surface-2: oklch(0.283 0.032 238.6);
  --sc-fg: oklch(0.975 0.005 260);
  --sc-muted: oklch(0.685 0.043 258.8);
  --sc-subtle: oklch(0.52 0.035 252);
  --sc-border: oklch(0.349 0.039 249);
  --sc-border-strong: oklch(0.42 0.045 245);
  --sc-primary: oklch(0.81 0.214 151.8);
  --sc-primary-fg: oklch(0.18 0.04 160);
  --sc-info: oklch(0.8 0.12 210);
  --sc-warning: oklch(0.77 0.174 64.1);
  --sc-destructive: oklch(0.643 0.215 28.8);
  --sc-radius: 0.75rem;
  --sc-radius-sm: 0.5rem;
  --sc-display: 'Space Grotesk', ui-sans-serif, system-ui, sans-serif;
  --sc-body: 'DM Sans', ui-sans-serif, system-ui, sans-serif;
  --sc-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace;
  --sc-shadow: 0 18px 40px -28px oklch(0 0 0 / 0.9);
  --sc-glow: 0 0 0 1px color-mix(in oklab, var(--sc-primary) 30%, transparent),
             0 14px 40px -22px color-mix(in oklab, var(--sc-primary) 70%, transparent);
  --sc-focus: 0 0 0 2px var(--sc-bg), 0 0 0 4px var(--sc-info);

  /* Feed shared values into the older theme layers so they agree */
  --background: var(--sc-bg);
  --foreground: var(--sc-fg);
  --surface: var(--sc-surface);
  --surface-2: var(--sc-surface-2);
  --card: var(--sc-surface-2);
  --primary: var(--sc-primary);
  --primary-foreground: var(--sc-primary-fg);
  --muted-foreground: var(--sc-muted);
  --border: var(--sc-border);
  --warning: var(--sc-warning);
  --destructive: var(--sc-destructive);
  --lv-bg: var(--sc-bg);
  --lv-fg: var(--sc-fg);
  --lv-surface: var(--sc-surface);
  --lv-surface-2: var(--sc-surface-2);
  --lv-primary: var(--sc-primary);
  --lv-primary-fg: var(--sc-primary-fg);
  --lv-muted: var(--sc-muted);
  --lv-warning: var(--sc-warning);
  --lv-border: var(--sc-border);
  --lv-display: var(--sc-display);
  --lv-body: var(--sc-body);
  --lv-mono: var(--sc-mono);
  color-scheme: dark;
}

/* ---------- Base ---------- */
html { background: var(--sc-bg-deep); }
body {
  background:
    radial-gradient(ellipse 70% 40% at 50% -8%, color-mix(in oklab, var(--sc-primary) 9%, transparent), transparent 70%),
    var(--sc-bg) !important;
  color: var(--sc-fg);
  font-family: var(--sc-body) !important;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
h1, h2, h3, h4, .title, .hero-title {
  font-family: var(--sc-display) !important;
  letter-spacing: -0.022em;
  color: var(--sc-fg);
}
h1 { line-height: 1.08; }
p, li, dd, td { color: inherit; }
code, kbd, samp, pre, .code, .mono, .price, .status, .badge-mono, [class*="code-value"], [class*="price"] {
  font-family: var(--sc-mono) !important;
}
pre, code:not(pre code) {
  background: color-mix(in oklab, var(--sc-bg-deep) 70%, var(--sc-surface));
  border: 1px solid var(--sc-border);
  border-radius: var(--sc-radius-sm);
}
code:not(pre code) { padding: 0.1em 0.38em; font-size: 0.9em; }
hr { border: 0; border-top: 1px solid var(--sc-border); }
::selection { background: color-mix(in oklab, var(--sc-primary) 35%, transparent); color: var(--sc-fg); }

/* ---------- Links ---------- */
a { color: var(--sc-info); text-underline-offset: 3px; }
a:hover { color: var(--sc-primary); }

/* ---------- Focus (consistent, keyboard only) ---------- */
:focus-visible {
  outline: none !important;
  box-shadow: var(--sc-focus) !important;
  border-radius: var(--sc-radius-sm);
}

/* ---------- Skip link ---------- */
.sc-skip, .skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 10000;
  padding: 10px 14px; border-radius: var(--sc-radius-sm);
  background: var(--sc-primary); color: var(--sc-primary-fg) !important;
  font: 700 14px/1 var(--sc-body); text-decoration: none;
}
.sc-skip:focus, .skip-link:focus { top: 12px; }

/* ---------- Panels / cards ---------- */
.card, .panel, .box, .lv-card, .faq-item, .step, .plan, .plan-card, .feature,
.feature-card, .summary, .order-summary, details {
  border-color: var(--sc-border) !important;
  border-radius: var(--sc-radius) !important;
  background-color: var(--sc-surface) !important;
  box-shadow: var(--sc-shadow);
}
details > summary { cursor: pointer; font-family: var(--sc-display); font-weight: 600; }

/* ---------- Buttons ---------- */
button, .btn, .button, .lv-button, input[type="submit"], input[type="button"] {
  font-family: var(--sc-body) !important;
  border-radius: var(--sc-radius-sm);
  transition: transform .15s ease, filter .15s ease, border-color .15s ease, background-color .15s ease;
}
.btn-primary, .button-primary, .lv-button-primary, .cta, .cta-primary, button[type="submit"], .primary-btn {
  background: linear-gradient(135deg, var(--sc-primary), color-mix(in oklab, var(--sc-primary) 72%, var(--sc-info))) !important;
  color: var(--sc-primary-fg) !important;
  border-color: transparent !important;
  box-shadow: var(--sc-glow);
  font-weight: 700;
}
.btn-primary:hover, .lv-button-primary:hover, .cta:hover, button[type="submit"]:hover { filter: brightness(1.06); }
button:disabled, .btn:disabled, [aria-disabled="true"] { opacity: .55; cursor: not-allowed; transform: none !important; filter: none !important; }
.btn-secondary, .btn-ghost, .lv-button-ghost, .button-ghost, .secondary-btn {
  background: color-mix(in oklab, var(--sc-surface) 75%, transparent) !important;
  border: 1px solid var(--sc-border) !important;
  color: var(--sc-fg) !important;
}
.btn-secondary:hover, .btn-ghost:hover, .lv-button-ghost:hover { border-color: var(--sc-primary) !important; color: var(--sc-primary) !important; }
.btn-danger, .danger, .destructive { --_c: var(--sc-destructive); }

/* ---------- Forms ---------- */
input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="submit"]):not([type="button"]),
select, textarea {
  background-color: var(--sc-bg-deep) !important;
  border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius-sm) !important;
  color: var(--sc-fg) !important;
  font-family: var(--sc-body);
}
input::placeholder, textarea::placeholder { color: var(--sc-subtle) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--sc-info) !important; }
input[aria-invalid="true"], .invalid, .error input { border-color: var(--sc-destructive) !important; }
input[type="checkbox"], input[type="radio"], input[type="range"] { accent-color: var(--sc-primary); }
label { color: var(--sc-fg); }

/* ---------- Status semantics ---------- */
.error, .err, .alert-error, .text-error, [role="alert"].error { color: var(--sc-destructive); }
.warning, .warn, .alert-warning { color: var(--sc-warning); }
.success, .ok, .alert-success { color: var(--sc-primary); }
.info, .alert-info { color: var(--sc-info); }

/* ---------- Tables (admin + data) ---------- */
table { border-color: var(--sc-border); }
th {
  font-family: var(--sc-body); font-weight: 600; font-size: .78em;
  letter-spacing: .08em; text-transform: uppercase; color: var(--sc-muted);
}
td, th { border-color: var(--sc-border) !important; }
td { font-variant-numeric: tabular-nums; }

/* ---------- Scrollbars ---------- */
* { scrollbar-color: var(--sc-border-strong) transparent; scrollbar-width: thin; }

/* ---------- Compact surfaces (admin, miniapp, fb-tab, checkout) ---------- */
body.sc-compact { font-size: 14px; }
body.sc-compact h1 { font-size: clamp(1.4rem, 2vw, 1.8rem); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* Home hero: keep headline centred now that the hero logo is gone (logo lives in the header only) */
.lv-hero { text-align: center; }
.lv-hero h1 { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }
.lv-hero p { margin-left: auto !important; margin-right: auto !important; text-align: center !important; }

/* ==========================================================================
   Product pages (rain, stake-auto-claimer, free, app, mobile)
   ========================================================================== */
.product-hero-grid > .hero h1, .simple-product-hero h1, body h1 {
  letter-spacing: -0.03em !important;
}
.product-hero-grid > .hero h1 span, .simple-product-hero h1 span, h1 .g, .lv-hero h1 span {
  color: var(--sc-primary) !important;
  text-shadow: 0 0 32px color-mix(in oklab, var(--sc-primary) 28%, transparent) !important;
  background: none !important; -webkit-text-fill-color: currentColor !important;
}
/* Primary/ghost CTAs: one size and shape everywhere */
.product-hero-grid .hero a, .simple-product-hero a[class], .hero-actions a, .actions a, .cta-row a {
  min-height: 48px; border-radius: var(--sc-radius-sm) !important;
  font-family: var(--sc-body) !important; font-weight: 700 !important;
}
.product-hero-grid .hero a:not(:first-of-type), .simple-product-hero a[class]:not(:first-of-type) {
  border-color: var(--sc-border-strong) !important;
  color: var(--sc-fg) !important;
  background: color-mix(in oklab, var(--sc-surface) 70%, transparent) !important;
}
.product-hero-grid .hero a:not(:first-of-type):hover, .simple-product-hero a[class]:not(:first-of-type):hover {
  border-color: var(--sc-primary) !important; color: var(--sc-primary) !important;
}
/* Small eyebrow pills */
.product-hero-grid .hero .eyebrow, .simple-product-hero .eyebrow, .pill, .tag {
  border-color: color-mix(in oklab, var(--sc-primary) 35%, transparent) !important;
  background: color-mix(in oklab, var(--sc-primary) 8%, transparent) !important;
  color: var(--sc-primary) !important;
  font-family: var(--sc-mono) !important;
}
/* Section eyebrows */
.kicker, .section-label, .eyebrow-label { color: var(--sc-info) !important; font-family: var(--sc-mono) !important; letter-spacing: .14em; }
/* Unify the old neon green everywhere on top of older layers */
:root { --sc-green: var(--sc-primary); --green: var(--sc-primary); --accent-green: var(--sc-primary); }
.sc-install, .sc-buy { background: var(--sc-primary) !important; color: var(--sc-primary-fg) !important; }
.sc-nav { background: color-mix(in oklab, var(--sc-bg-deep) 88%, transparent) !important; border-bottom-color: var(--sc-border) !important; backdrop-filter: blur(16px) !important; }

@media (max-width: 640px) {
  .product-hero-grid > .hero h1, .simple-product-hero h1 { font-size: clamp(34px, 10vw, 44px) !important; }
  .product-hero-grid .hero a, .simple-product-hero a[class] { width: 100%; justify-content: center; }
}

/* ==========================================================================
   Guide pages (body.sc-guide) — same language as the product pages
   ========================================================================== */
body.sc-guide .container, body.sc-guide main.guide, body.sc-guide .android-guide,
body.sc-guide .rain-guide, body.sc-guide > .hero, body.sc-guide .wrap {
  width: min(1120px, calc(100% - 40px)) !important; max-width: none !important;
  margin-left: auto !important; margin-right: auto !important;
}
body.sc-guide .container, body.sc-guide main.guide, body.sc-guide .android-guide, body.sc-guide .rain-guide { padding-top: 56px !important; }
/* Hero headline: product scale, left aligned, green accent */
body.sc-guide h1 {
  font-size: clamp(40px, 5vw, 64px) !important; line-height: 1.03 !important;
  letter-spacing: -0.035em !important; font-weight: 700 !important;
  text-align: left !important; margin: 14px 0 16px !important; max-width: 860px;
}
body.sc-guide h1 span, body.sc-guide h1 .green { color: var(--sc-primary) !important; }
body.sc-guide h1 + .sub, body.sc-guide .lede, body.sc-guide .guide-hero > p:not(.guide-version), body.sc-guide > .hero .sub {
  max-width: 680px; font-size: 17px !important; line-height: 1.6 !important;
  color: var(--sc-muted) !important; text-align: left !important; margin-left: 0 !important;
}
body.sc-guide > .hero { text-align: left !important; padding-top: 56px !important; }
/* Eyebrow / breadcrumb / kicker = product pill */
body.sc-guide .back, body.sc-guide .crumb {
  display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px;
  border: 1px solid var(--sc-border); border-radius: 999px;
  color: var(--sc-muted) !important; font: 500 12px/1 var(--sc-mono) !important; text-decoration: none !important;
}
body.sc-guide .back:hover, body.sc-guide .crumb:hover { border-color: var(--sc-primary); color: var(--sc-primary) !important; }
body.sc-guide .guide-kicker, body.sc-guide .eyebrow {
  display: inline-block; padding: 6px 12px; border-radius: 999px;
  border: 1px solid color-mix(in oklab, var(--sc-primary) 35%, transparent);
  background: color-mix(in oklab, var(--sc-primary) 8%, transparent);
  color: var(--sc-primary) !important; font: 600 11px/1.2 var(--sc-mono) !important; letter-spacing: .12em; text-transform: uppercase;
}
/* Section headings */
body.sc-guide h2 { font-size: clamp(24px, 2.6vw, 30px) !important; letter-spacing: -0.02em !important; }
body.sc-guide h3 { font-size: 18px !important; }
/* Cards and steps: product card look */
body.sc-guide .card, body.sc-guide .step, body.sc-guide .guide-step, body.sc-guide .faq-item,
body.sc-guide .ist-card, body.sc-guide .stat-card, body.sc-guide .safety-banner {
  background: var(--sc-surface) !important; border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important; box-shadow: var(--sc-shadow) !important;
}
body.sc-guide .step, body.sc-guide .guide-step, body.sc-guide .faq-item, body.sc-guide .card { padding: 22px 24px !important; }
body.sc-guide .step-num, body.sc-guide .ist-num, body.sc-guide .guide-step > span:first-child, body.sc-guide .n {
  border: 1px solid color-mix(in oklab, var(--sc-primary) 45%, transparent) !important;
  background: color-mix(in oklab, var(--sc-primary) 10%, transparent) !important;
  color: var(--sc-primary) !important; font-family: var(--sc-mono) !important; border-radius: 999px !important;
}
body.sc-guide .faq-item .q { font-family: var(--sc-display); font-size: 17px; color: var(--sc-fg); }
body.sc-guide .faq-item .a, body.sc-guide .step p, body.sc-guide .card p { color: var(--sc-muted); line-height: 1.65; }
/* Stats */
body.sc-guide .stat-card .num, body.sc-guide .hero-stats .num { color: var(--sc-primary) !important; font-family: var(--sc-display) !important; }
/* Guide buttons = product buttons */
body.sc-guide .guide-button, body.sc-guide .btn-big, body.sc-guide .ist-btn, body.sc-guide a.btn {
  min-height: 48px; display: inline-flex; align-items: center; justify-content: center; padding: 0 22px;
  border-radius: var(--sc-radius-sm) !important; font: 700 15px/1 var(--sc-body) !important; text-transform: none !important; letter-spacing: 0 !important;
  background: var(--sc-primary) !important; color: var(--sc-primary-fg) !important; border: 1px solid transparent !important; box-shadow: var(--sc-glow);
}
body.sc-guide .guide-button.secondary {
  background: color-mix(in oklab, var(--sc-surface) 70%, transparent) !important;
  color: var(--sc-fg) !important; border-color: var(--sc-border-strong) !important; box-shadow: none;
}
body.sc-guide .guide-button.secondary:hover { border-color: var(--sc-primary) !important; color: var(--sc-primary) !important; }
body.sc-guide .guide-version { font: 500 12px/1.4 var(--sc-mono) !important; color: var(--sc-subtle) !important; letter-spacing: .06em; }
/* Old in-page logo/nav (replaced by the shared header) — keep for no-JS, just tone down */
body.sc-guide.sc-shell-ready > .logo { display: none; }

@media (max-width: 640px) {
  body.sc-guide h1 { font-size: clamp(32px, 9vw, 40px) !important; }
  body.sc-guide .guide-button, body.sc-guide .btn-big { width: 100%; }
  body.sc-guide .step, body.sc-guide .guide-step, body.sc-guide .faq-item, body.sc-guide .card { padding: 18px !important; }
}
/* Step cards with a numbered badge keep room for the badge */
body.sc-guide .step { position: relative; padding-left: 84px !important; }
body.sc-guide .step > .step-num { position: absolute !important; left: 22px !important; top: 22px !important; margin: 0 !important; width: 42px !important; height: 42px !important; display: grid; place-items: center; }
body.sc-guide .step h2 { margin-top: 6px !important; font-size: 22px !important; }
/* Install page is a centred wizard: keep its centred heading */
body.sc-guide h1:has(+ .sub) { }
body.sc-guide .ist-head h1, body.sc-guide h1.center, body.sc-guide .hero-center h1 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
@media (max-width: 640px) { body.sc-guide .step { padding-left: 18px !important; padding-top: 74px !important; } body.sc-guide .step > .step-num { left: 18px !important; top: 18px !important; } }
body.sc-guide .ih-hero{padding-top:48px!important;text-align:center}body.sc-guide .ih-hero h1{text-align:center!important;margin-left:auto!important;margin-right:auto!important}body.sc-guide .ih-hero .hero-brand{display:inline-block;padding:6px 12px;border-radius:999px;border:1px solid color-mix(in oklab,var(--sc-primary) 35%,transparent);background:color-mix(in oklab,var(--sc-primary) 8%,transparent);color:var(--sc-primary)!important;font:600 11px/1.2 var(--sc-mono)!important;letter-spacing:.12em}body.sc-guide .ih-hero p{text-align:center!important;margin-left:auto!important;margin-right:auto!important}

/* ==========================================================================
   Checkout (body.sc-checkout) — product-page look, same content and logic
   ========================================================================== */
body.sc-checkout main { width: min(1120px, calc(100% - 40px)) !important; padding: 56px 0 72px !important; }
body.sc-checkout .shell { grid-template-columns: minmax(0, 1.35fr) minmax(300px, .65fr) !important; gap: 24px !important; align-items: start; }
body.sc-checkout .panel {
  background: var(--sc-surface) !important; border: 1px solid var(--sc-border) !important;
  border-radius: var(--sc-radius) !important; box-shadow: var(--sc-shadow) !important; padding: 32px !important;
}
body.sc-checkout .shell > .panel:first-child h1, body.sc-checkout .status h1 {
  font-size: clamp(32px, 3.6vw, 46px) !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; margin: 0 0 12px !important;
}
body.sc-checkout #checkout-copy, body.sc-checkout #status-text { font-size: 16px; line-height: 1.6; color: var(--sc-muted) !important; margin-bottom: 28px !important; }
/* Plan picker */
body.sc-checkout .plans { gap: 12px !important; margin-bottom: 26px !important; }
body.sc-checkout .plan {
  background: color-mix(in oklab, var(--sc-bg-deep) 55%, var(--sc-surface)) !important;
  border: 1px solid var(--sc-border) !important; border-radius: var(--sc-radius) !important;
  padding: 18px !important; box-shadow: none !important; min-height: 84px; transition: border-color .15s ease, transform .15s ease;
}
body.sc-checkout .plan:hover { border-color: var(--sc-border-strong) !important; transform: translateY(-1px); }
body.sc-checkout .plan.active {
  border-color: var(--sc-primary) !important;
  background: color-mix(in oklab, var(--sc-primary) 7%, var(--sc-surface)) !important;
  box-shadow: 0 0 0 1px var(--sc-primary), 0 14px 40px -24px color-mix(in oklab, var(--sc-primary) 70%, transparent) !important;
}
body.sc-checkout .plan strong { font-family: var(--sc-display); font-size: 17px !important; color: var(--sc-fg); }
body.sc-checkout .plan small { color: var(--sc-muted) !important; font-family: var(--sc-mono); font-size: 12px; }
body.sc-checkout .plan .price { color: var(--sc-primary) !important; font-family: var(--sc-mono) !important; font-size: 20px !important; font-weight: 700 !important; }
/* Fields */
body.sc-checkout label { font-family: var(--sc-display); font-weight: 600 !important; font-size: 15px; margin-bottom: 8px !important; }
body.sc-checkout input { height: 52px !important; font-size: 16px !important; padding: 0 16px !important; }
body.sc-checkout .hint { color: var(--sc-subtle) !important; font-size: 13px !important; }
/* Primary CTA = product primary button */
body.sc-checkout button.primary {
  height: 54px !important; border-radius: var(--sc-radius-sm) !important;
  background: var(--sc-primary) !important; color: var(--sc-primary-fg) !important;
  font: 700 16px/1 var(--sc-body) !important; box-shadow: var(--sc-glow) !important;
}
body.sc-checkout button.primary:not(:disabled):hover { filter: brightness(1.06); transform: translateY(-1px); }
body.sc-checkout .error { color: var(--sc-destructive) !important; font-size: 14px !important; }
/* Summary */
body.sc-checkout .summary { position: sticky; top: 100px; }
body.sc-checkout .summary h2 { font-family: var(--sc-mono) !important; font-size: 11px !important; font-weight: 600 !important; letter-spacing: .14em; text-transform: uppercase; color: var(--sc-info) !important; margin-bottom: 10px !important; }
body.sc-checkout .line { padding: 14px 0 !important; border-bottom: 1px solid var(--sc-border) !important; color: var(--sc-muted) !important; }
body.sc-checkout .line b { font-family: var(--sc-mono); color: var(--sc-fg) !important; }
body.sc-checkout .line:last-of-type b { color: var(--sc-primary) !important; font-size: 18px; }
body.sc-checkout .safe {
  background: color-mix(in oklab, var(--sc-primary) 7%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--sc-primary) 28%, transparent) !important;
  border-radius: var(--sc-radius-sm) !important; color: var(--sc-muted) !important; font-size: 13px !important; line-height: 1.55;
}
body.sc-checkout .alt a, body.sc-checkout .status a:not(.share-success a) { color: var(--sc-info) !important; }
/* Status / receipt */
body.sc-checkout .status { max-width: 720px; margin: 0 auto; padding: 44px 32px !important; }
body.sc-checkout .status .icon {
  background: color-mix(in oklab, var(--sc-primary) 10%, transparent) !important;
  border: 1px solid color-mix(in oklab, var(--sc-primary) 45%, transparent) !important;
}
body.sc-checkout .share-success { border-top-color: var(--sc-border) !important; }
body.sc-checkout .share-success a {
  border-radius: var(--sc-radius-sm) !important; background: color-mix(in oklab, var(--sc-primary) 10%, transparent) !important;
  border-color: color-mix(in oklab, var(--sc-primary) 35%, transparent) !important; color: var(--sc-primary) !important;
}
@media (max-width: 760px) {
  body.sc-checkout .shell { grid-template-columns: 1fr !important; }
  body.sc-checkout .summary { position: static; }
  body.sc-checkout .panel { padding: 22px !important; }
  body.sc-checkout main { padding-top: 28px !important; }
}
body.sc-checkout #sum-price{color:var(--sc-primary)!important;font-size:18px}

/* ==========================================================================
   Earn, Share & Earn, community, SEO landing pages (also body.sc-guide)
   ========================================================================== */
/* Centred heroes stay centred (earn, landing pages) */
body.sc-guide > .hero, body.sc-guide .hero.center { text-align: center !important; }
body.sc-guide > .hero h1, body.sc-guide > .hero .sub, body.sc-guide > .hero .sub2 { text-align: center !important; margin-left: auto !important; margin-right: auto !important; }
/* Share & Earn */
body.sc-guide .se-kicker { display: inline-block; padding: 6px 12px; border-radius: 999px; border: 1px solid color-mix(in oklab, var(--sc-primary) 35%, transparent); background: color-mix(in oklab, var(--sc-primary) 8%, transparent); color: var(--sc-primary) !important; font: 600 11px/1.2 var(--sc-mono) !important; letter-spacing: .12em; text-transform: uppercase; }
body.sc-guide .se-lede { color: var(--sc-muted) !important; max-width: 680px; }
body.sc-guide .se-shell { width: min(1120px, calc(100% - 40px)) !important; margin: 0 auto !important; }
/* Uppercase emoji buttons on earn → product buttons */
body.sc-guide .btn-big, body.sc-guide .btn-outline, body.sc-guide .btn-secondary { text-transform: none !important; letter-spacing: 0 !important; }
body.sc-guide .btn-outline, body.sc-guide a.btn-big + a {
  background: color-mix(in oklab, var(--sc-surface) 70%, transparent) !important; color: var(--sc-fg) !important;
  border: 1px solid var(--sc-border-strong) !important; box-shadow: none !important;
}
/* Forum / blog / contact lists */
body.sc-guide .topic, body.sc-guide .topic-item, body.sc-guide .blog-card, body.sc-guide .post, body.sc-guide .reply, body.sc-guide .rules, body.sc-guide .forum-rules {
  background: var(--sc-surface) !important; border: 1px solid var(--sc-border) !important; border-radius: var(--sc-radius) !important;
}
body.sc-guide .topic:hover, body.sc-guide .blog-card:hover { border-color: var(--sc-border-strong) !important; }
body.sc-guide .btn-new, body.sc-guide #new-topic-btn, body.sc-guide .new-topic, body.sc-guide .card button:not(.secondary), body.sc-guide #send, body.sc-guide #submit {
  background: var(--sc-primary) !important; color: var(--sc-primary-fg) !important; border-radius: var(--sc-radius-sm) !important;
  font: 700 15px/1 var(--sc-body) !important; min-height: 46px; padding: 0 20px !important; border: 0 !important; box-shadow: var(--sc-glow);
}
body.sc-guide .empty, body.sc-guide .loading { color: var(--sc-subtle) !important; font-family: var(--sc-mono); font-size: 13px; }
/* In-page legacy footers sit above the shared footer: quieter */
body.sc-guide .container > .footer, body.sc-guide .container > footer { opacity: .75; }

/* Campaign checkout */
body.sc-checkout .cm-checkout { width: min(720px, calc(100% - 40px)) !important; margin: 0 auto; padding: 56px 0 72px !important; }
body.sc-checkout .cm-brand { font-family: var(--sc-display); font-weight: 700; font-size: 20px; color: var(--sc-fg); }
body.sc-checkout .cm-brand span { color: var(--sc-primary); }
body.sc-checkout .cm-card { background: var(--sc-surface) !important; border: 1px solid var(--sc-border) !important; border-radius: var(--sc-radius) !important; box-shadow: var(--sc-shadow) !important; padding: 32px !important; }
body.sc-checkout .cm-card h1 { font-size: clamp(30px, 3.6vw, 42px) !important; letter-spacing: -0.03em !important; }
body.sc-checkout .cm-card button, body.sc-checkout .cm-card .cm-primary { background: var(--sc-primary) !important; color: var(--sc-primary-fg) !important; border-radius: var(--sc-radius-sm) !important; font: 700 16px/1 var(--sc-body) !important; min-height: 52px; border: 0 !important; box-shadow: var(--sc-glow); }
body.sc-checkout .cm-checkout footer, body.sc-checkout .cm-checkout footer p { color: var(--sc-subtle) !important; font-size: 13px; }
/* Corrections: only the how-it-works timeline gets the side badge; plain sections stay unboxed */
body.sc-guide .step { padding-left: 24px !important; }
body.sc-guide .step > .step-num { position: static !important; }
body.sc-guide .steps > .step { padding-left: 84px !important; }
body.sc-guide .steps > .step > .step-num { position: absolute !important; }
body.sc-guide > .section, body.sc-guide .wrap > .section { background: transparent !important; border: 0 !important; box-shadow: none !important; }
@media (max-width: 640px) { body.sc-guide .steps > .step { padding-left: 18px !important; } }

/* ===== Compact tools: admin, miniapp, fb-tab, social ===== */
body.sc-compact:not(.sc-checkout) { background: var(--sc-bg, #0b0f0d); }
body.sc-compact:not(.sc-checkout) h1,
body.sc-compact:not(.sc-checkout) h2 { font-family: var(--sc-font-display, "Space Grotesk", sans-serif); letter-spacing: -0.01em; text-transform: none; }
body.sc-compact:not(.sc-checkout) .card,
body.sc-compact:not(.sc-checkout) .panel,
body.sc-compact:not(.sc-checkout) section.box { border-radius: 14px; border: 1px solid var(--sc-border, rgba(255,255,255,.08)); }
body.sc-compact:not(.sc-checkout) table th { font-family: var(--sc-font-mono, "JetBrains Mono", monospace); font-size: .75rem; text-transform: uppercase; letter-spacing: .06em; color: var(--sc-muted, #9aa59f); }
body.sc-compact:not(.sc-checkout) table td, body.sc-compact:not(.sc-checkout) table th { padding: .55rem .7rem; }
body.sc-compact:not(.sc-checkout) button, body.sc-compact:not(.sc-checkout) .btn { border-radius: 10px; }

/* Live codes page: calm CTA row (no green strip) */
body.sc-guide .cta { background: none !important; border: 0 !important; box-shadow: none !important; padding: 8px 0 !important; }
body.sc-guide .cta .btn-ghost { background: transparent !important; color: var(--sc-fg, #e8eee9) !important; border: 1px solid var(--sc-border, rgba(255,255,255,.18)) !important; box-shadow: none !important; }
body.sc-guide .cta .btn-ghost:hover { border-color: var(--sc-primary) !important; color: var(--sc-primary) !important; }

/* ===== Home page polish ===== */
.lv-stats { display: grid !important; grid-template-columns: repeat(3, 1fr); gap: 16px; max-width: none !important; width: 100%; margin-inline: 0 !important; }
.lv-stat { text-align: left; padding: 20px 24px !important; }
#code-total:empty::before { content: "—"; color: var(--sc-muted, #9aa59f); }
.lv-hero h1 { line-height: 1.05; }
.feed-head { margin-top: 56px; }
.feed-head .eyebrow, section.cta .eyebrow { color: var(--sc-primary) !important; font-family: var(--sc-font-mono, "JetBrains Mono", monospace); letter-spacing: .12em; }
body:not(.sc-guide) section.cta { background: linear-gradient(135deg, color-mix(in oklch, var(--sc-primary) 14%, transparent), transparent 70%), var(--sc-surface, #111a1f) !important; border: 1px solid color-mix(in oklch, var(--sc-primary) 35%, transparent) !important; color: inherit !important; box-shadow: none !important; }
body:not(.sc-guide) section.cta h2 { color: var(--sc-fg, #eef3ef) !important; }
body:not(.sc-guide) section.cta p { color: var(--sc-muted, #9aa59f) !important; }
body:not(.sc-guide) section.cta .cta-or { color: var(--sc-muted, #9aa59f) !important; }
@media (max-width: 640px) { .lv-stats { grid-template-columns: 1fr; } }