/* ============================================================
   GETMYPROFILES — Chiaroscuro Rosso Corsa
   Single-typeface, sharp 0-radius, black/white/red theatrical
   Reference: design-md/cinematic/ferrari.md
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=JetBrains+Mono:wght@500;700&display=swap');

/* ---------- 1. DESIGN TOKENS ---------- */

:root {
  /* — surfaces — */
  --bg-light:        #ffffff;
  --bg-dark:         #000000;
  --bg-alt:          #f4f4f4;
  --bg-ink:          #0a0a0a;

  /* — text — */
  --text-on-light:   #000000;
  --text-on-dark:    #ffffff;
  --text-muted:      #6a6a6a;
  --text-muted-dark: #9a9a9a;

  /* — accent (Rosso Corsa) — */
  --red:             #eb2323;
  --red-hover:       #c81a1a;
  --red-bright:      #ff0000;
  --red-deep:        #8b0a0a;

  /* — utility — */
  --border-ink:      #1a1a1a;
  --border-light:    #e5e5e5;
  --rule:            #eb2323;

  /* — type scale (Major Third 1.25 — tighter for legibility, less "marketing-shouting") — */
  --t-11: 0.6875rem;
  --t-13: 0.8125rem;
  --t-16: 1rem;
  --t-18: 1.125rem;
  --t-20: 1.25rem;
  --t-24: 1.5rem;
  --t-28: 1.75rem;
  --t-36: 2.25rem;
  --t-44: 2.75rem;
  --t-56: 3.5rem;
  --t-72: 4.5rem;
  --t-88: 5.5rem;

  /* — spacing (8pt) — tighter section rhythm — */
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 32px;
  --s-5: 40px;
  --s-6: 48px;
  --s-7: 64px;
  --s-8: 80px;
  --s-9: 96px;
  --s-10: 120px;

  /* — motion — */
  --ease-out: cubic-bezier(0.215, 0.61, 0.355, 1);
  --ease-in:  cubic-bezier(0.55, 0.055, 0.675, 0.19);
  --ease-snap: cubic-bezier(0.86, 0, 0.07, 1);
  --d-snap: 150ms;
  --d-normal: 250ms;
  --d-slow: 400ms;

  /* — layout — */
  --max-w: 1200px;
  --max-w-narrow: 960px;
  --gutter: 24px;

  /* — type families — */
  --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono: 'JetBrains Mono', 'SF Mono', monospace;
}

/* ---------- 2. RESET & BASE ---------- */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-sans);
  font-weight: 400;
  font-size: var(--t-16);
  line-height: 1.5;
  letter-spacing: -0.005em;
  background: var(--bg-light);
  color: var(--text-on-light);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'ss01' on, 'cv11' on, 'tnum' off;
  overflow-x: hidden;
}

img, svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button { font-family: inherit; cursor: pointer; border: none; background: none; }

::selection { background: var(--red); color: #fff; }

/* ---------- 3. TYPOGRAPHY ---------- */

.eyebrow {
  font-size: var(--t-11);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--red);
  display: inline-block;
}

/* Display — bold sans-serif, modern and legible */
.display, .h1, .h2 {
  font-family: var(--font-sans);
  font-weight: 800;
  text-wrap: balance;
}

.display {
  font-size: clamp(2.25rem, 5vw, var(--t-72));
  line-height: 1.0;
  letter-spacing: -0.035em;
}

.h1 {
  font-size: clamp(1.875rem, 4vw, 3.5rem);
  line-height: 1.02;
  letter-spacing: -0.03em;
}

.h2 {
  font-size: clamp(1.5rem, 3vw, var(--t-44));
  line-height: 1.05;
  letter-spacing: -0.025em;
}

.h3 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: clamp(1.375rem, 2vw, var(--t-28));
  line-height: 1.15;
  letter-spacing: -0.015em;
}

.h4 {
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--t-20);
  line-height: 1.2;
  letter-spacing: -0.01em;
}

.lead {
  font-size: var(--t-18);
  font-weight: 400;
  line-height: 1.55;
  color: var(--text-muted);
  max-width: 56ch;
}

.lead.on-dark { color: var(--text-muted-dark); }

.label {
  font-size: var(--t-11);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
}

.numeral {
  font-family: var(--font-sans);
  font-weight: 900;
  font-size: clamp(2.5rem, 6vw, var(--t-88));
  line-height: 0.9;
  letter-spacing: -0.04em;
  font-feature-settings: 'tnum' on;
}

.mono {
  font-family: var(--font-mono);
  font-feature-settings: 'tnum' on;
}

/* Accent — bold red emphasis (was serif italic, now bold sans) */
.serif-italic {
  font-family: var(--font-sans);
  font-style: normal;
  font-weight: 800;
}

/* Typewriter — rotating word with blinking cursor */
.typewriter {
  display: inline-block;
  position: relative;
  white-space: nowrap;
}
.typewriter::after {
  content: '';
  display: inline-block;
  width: 0.04em;
  height: 0.78em;
  background: currentColor;
  margin-left: 0.06em;
  vertical-align: baseline;
  animation: tw-cursor 1s steps(1) infinite;
}
@keyframes tw-cursor {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  .typewriter::after { animation: none; opacity: 1; }
}

/* ---------- 4. LAYOUT ---------- */

.container {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.section {
  padding: var(--s-9) 0;
}
@media (max-width: 768px) { .section { padding: var(--s-6) 0; } }

.container-narrow {
  max-width: var(--max-w-narrow);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

.slab-dark {
  background: var(--bg-dark);
  color: var(--text-on-dark);
}

.slab-light {
  background: var(--bg-light);
  color: var(--text-on-light);
}

.slab-alt {
  background: var(--bg-alt);
  color: var(--text-on-light);
}

.grid {
  display: grid;
  gap: var(--s-4);
}

.grid-2  { grid-template-columns: repeat(2, 1fr); }
.grid-3  { grid-template-columns: repeat(3, 1fr); }
.grid-4  { grid-template-columns: repeat(4, 1fr); }
.grid-6  { grid-template-columns: repeat(6, 1fr); }
.grid-12 { grid-template-columns: repeat(12, 1fr); }

.span-4  { grid-column: span 4; }
.span-5  { grid-column: span 5; }
.span-6  { grid-column: span 6; }
.span-7  { grid-column: span 7; }
.span-8  { grid-column: span 8; }
.span-12 { grid-column: span 12; }

@media (max-width: 1024px) {
  .grid-3, .grid-4, .grid-6 { grid-template-columns: repeat(2, 1fr); }
  .grid-12 [class^='span-'] { grid-column: span 12; }
  .grid-2 { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  .grid-3, .grid-4, .grid-6 { grid-template-columns: 1fr; }
}

.row { display: flex; align-items: center; gap: var(--s-2); }
.row-wrap { flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); }
.col { display: flex; flex-direction: column; }
.gap-1 { gap: var(--s-1); }
.gap-2 { gap: var(--s-2); }
.gap-3 { gap: var(--s-3); }
.gap-4 { gap: var(--s-4); }
.gap-5 { gap: var(--s-5); }
.gap-6 { gap: var(--s-6); }

.text-center { text-align: center; }
.mx-auto { margin-left: auto; margin-right: auto; }
.mt-3 { margin-top: var(--s-3); }
.mt-4 { margin-top: var(--s-4); }
.mt-5 { margin-top: var(--s-5); }
.mt-6 { margin-top: var(--s-6); }
.mt-7 { margin-top: var(--s-7); }
.pad-5 { padding: var(--s-5); }

/* ---------- 5. BUTTONS ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s-1);
  padding: 16px 28px;
  font-weight: 700;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  border-radius: 0;
  transition: background-color var(--d-snap) var(--ease-out),
              color var(--d-snap) var(--ease-out),
              transform var(--d-snap) var(--ease-out);
  white-space: nowrap;
  border: none;
  cursor: pointer;
}

.btn:active { transform: translateY(1px); }

.btn-primary {
  background: var(--red);
  color: #fff;
}
.btn-primary:hover { background: var(--red-hover); }

.btn-ghost-light {
  background: transparent;
  color: var(--text-on-light);
  border: 1px solid var(--border-ink);
}
.btn-ghost-light:hover { background: var(--text-on-light); color: var(--bg-light); }

.btn-ghost-dark {
  background: transparent;
  color: var(--text-on-dark);
  border: 1px solid #fff;
}
.btn-ghost-dark:hover { background: #fff; color: var(--bg-dark); }

.btn-sm { padding: 10px 18px; font-size: 12px; }
.btn-lg { padding: 20px 36px; font-size: 15px; }

.btn .icon { width: 16px; height: 16px; }

.btn:focus-visible { outline: 2px solid var(--red-bright); outline-offset: 2px; }

/* link styles */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: 600;
  font-size: var(--t-13);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-on-light);
  border-bottom: 1px solid var(--text-on-light);
  padding-bottom: 2px;
  transition: color var(--d-snap), border-color var(--d-snap), gap var(--d-snap) var(--ease-out);
}
.link-arrow:hover { color: var(--red); border-color: var(--red); gap: 10px; }
.link-arrow.on-dark { color: #fff; border-color: #fff; }
.link-arrow.on-dark:hover { color: var(--red); border-color: var(--red); }

/* ---------- 6. NAVIGATION ---------- */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 100;
  padding: 20px 0;
  background: transparent;
  transition: background-color var(--d-normal) var(--ease-out),
              border-color var(--d-normal) var(--ease-out);
  border-bottom: 1px solid transparent;
}

.nav.scrolled {
  background: var(--bg-dark);
  border-bottom-color: var(--border-ink);
}

.nav .container { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); }

.brand {
  font-weight: 800;
  font-size: 18px;
  letter-spacing: 0.04em;
  color: #fff;
  text-transform: uppercase;
  display: flex; align-items: center; gap: 10px;
}
.brand-mark {
  width: 28px; height: 28px;
  background: var(--red);
  display: grid; place-items: center;
  color: #fff;
}
.brand-mark svg {
  width: 80%;
  height: 80%;
}
.brand .dot { color: var(--red); }

.nav-links {
  display: flex; align-items: center;
  gap: 36px;
  list-style: none;
}
.nav-links a {
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  position: relative;
  padding: 8px 0;
  transition: color var(--d-snap) var(--ease-out);
}
.nav-links a::after {
  content: '';
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 2px;
  background: var(--red);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform var(--d-snap) var(--ease-out);
}
.nav-links a:hover { color: var(--red); }
.nav-links a:hover::after, .nav-links a.active::after { transform: scaleX(1); }

.nav-cta { display: flex; align-items: center; gap: 16px; }
.nav-login {
  color: #fff;
  font-weight: 500;
  font-size: 13px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.nav-login:hover { color: var(--red); }

/* mobile */
.nav-toggle {
  display: none;
  width: 32px; height: 32px;
  color: #fff;
}
@media (max-width: 1024px) {
  .nav-links, .nav-login { display: none; }
  .nav-toggle { display: grid; place-items: center; }
}

/* ---------- 7. HERO ---------- */

.hero {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: 160px 0 var(--s-8);
  position: relative;
  overflow: hidden;
}

.hero h1, .hero .display { max-width: 14ch; }
.hero .lead { max-width: 52ch; color: var(--text-muted-dark); }

.hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: var(--s-7);
  align-items: center;
}
@media (max-width: 1024px) {
  .hero { padding: 128px 0 var(--s-6); }
  .hero-grid { grid-template-columns: 1fr; gap: var(--s-5); }
}

.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 6px 12px;
  border: 1px solid var(--border-ink);
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  margin-bottom: var(--s-3);
}
.hero-eyebrow .dot {
  width: 5px; height: 5px;
  background: var(--red);
}

.hero-ctas { display: flex; gap: 12px; margin-top: var(--s-3); flex-wrap: wrap; }

/* hero visual — phone mockup */
.hero-visual {
  position: relative;
  aspect-ratio: 4 / 5;
  border: 1px solid var(--border-ink);
  background:
    radial-gradient(circle at 75% 25%, rgba(235, 35, 35, 0.15) 0%, transparent 50%),
    linear-gradient(180deg, #050505 0%, #1a1a1a 100%);
  display: grid;
  place-items: center;
  overflow: hidden;
}
.hero-visual::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px);
  background-size: 32px 32px;
  pointer-events: none;
}

/* ---------- 8. TRUST STRIP ---------- */

.trust-strip {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  border-top: 1px solid var(--border-ink);
  border-bottom: 1px solid var(--border-ink);
  padding: var(--s-5) 0;
}
.trust-strip .container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s-4);
  align-items: end;
}
@media (max-width: 768px) {
  .trust-strip .container { grid-template-columns: 1fr; gap: var(--s-3); text-align: left; }
}
.trust-item {
  display: flex;
  flex-direction: column;
  gap: 4px;
  position: relative;
}
.trust-item:not(:last-child)::after {
  content: '';
  position: absolute;
  right: -16px; top: 8px; bottom: 8px;
  width: 1px;
  background: var(--border-ink);
}
@media (max-width: 768px) {
  .trust-item:not(:last-child)::after { display: none; }
}
.trust-num {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2rem, 4.2vw, var(--t-56));
  line-height: 0.95;
  letter-spacing: -0.04em;
  color: #fff;
  font-feature-settings: 'tnum' on;
}
.trust-num .accent { color: var(--red); }
.trust-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted-dark);
  font-weight: 500;
}

/* ---------- 9. FEATURE CARDS ---------- */

.feature-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
}
@media (max-width: 1024px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 640px) { .feature-grid { grid-template-columns: 1fr; } }

.feature-card {
  background: var(--bg-light);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-height: 240px;
  position: relative;
  transition: background-color var(--d-snap) var(--ease-out);
}
.feature-card:hover { background: var(--bg-alt); }
.feature-card .feature-num {
  position: absolute;
  top: var(--s-4); right: var(--s-4);
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: 0.05em;
}
.feature-card .feature-icon {
  width: 40px; height: 40px;
  background: var(--text-on-light);
  color: #fff;
  display: grid; place-items: center;
}
.feature-card .feature-icon svg { width: 20px; height: 20px; }
.feature-card h3 { font-size: var(--t-20); font-weight: 700; font-family: var(--font-sans); letter-spacing: -0.015em; }
.feature-card p { font-size: var(--t-13); color: var(--text-muted); line-height: 1.5; flex-grow: 1; }
.feature-card .link-arrow { align-self: flex-start; }

/* feature card variant: red icon */
.feature-card.featured .feature-icon { background: var(--red); }
.feature-card.featured { background: var(--bg-dark); color: #fff; }
.feature-card.featured h3 { color: #fff; }
.feature-card.featured p { color: var(--text-muted-dark); }
.feature-card.featured .feature-num { color: var(--text-muted-dark); }
.feature-card.featured:hover { background: #0a0a0a; }
.feature-card.featured .link-arrow { color: #fff; border-color: #fff; }
.feature-card.featured .link-arrow:hover { color: var(--red); border-color: var(--red); }

/* ---------- 10. FEATURE SPOTLIGHT (split) ---------- */

.spotlight {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-8);
  align-items: center;
}
.spotlight.reverse { grid-template-columns: 1fr 1fr; }
.spotlight.reverse .spotlight-content { order: 2; }
.spotlight.reverse .spotlight-visual { order: 1; }
@media (max-width: 1024px) {
  .spotlight, .spotlight.reverse { grid-template-columns: 1fr; gap: var(--s-5); }
  .spotlight.reverse .spotlight-content,
  .spotlight.reverse .spotlight-visual { order: 0; }
}

.spotlight-visual {
  aspect-ratio: 4 / 5;
  background: var(--bg-dark);
  border: 1px solid var(--border-ink);
  position: relative;
  overflow: hidden;
}

/* generic placeholder rendering inside .spotlight-visual */
.viz-grid {
  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: 32px 32px;
}

/* ---------- 11. SECTION HEADER ---------- */

.section-header {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-bottom: var(--s-7);
  max-width: 720px;
}
.section-header.centered { margin-left: auto; margin-right: auto; align-items: center; text-align: center; }
.section-header.split {
  flex-direction: row;
  align-items: end;
  justify-content: space-between;
  max-width: 100%;
  gap: var(--s-4);
}
.section-header.split > *:first-child { flex: 1; max-width: 720px; }
@media (max-width: 768px) {
  .section-header.split { flex-direction: column; align-items: flex-start; }
}

/* ---------- 12. TESTIMONIAL ---------- */

.testimonial {
  background: var(--bg-dark);
  color: #fff;
  padding: var(--s-9) 0;
}
.testimonial-quote {
  font-family: var(--font-sans);
  font-size: clamp(1.5rem, 3.2vw, var(--t-44));
  font-weight: 700;
  line-height: 1.2;
  letter-spacing: -0.02em;
  max-width: 24ch;
}
.testimonial-quote::before { content: '"'; color: var(--red); margin-right: 0.05em; }
.testimonial-quote::after { content: '"'; color: var(--red); margin-left: 0.05em; }
.testimonial-author {
  display: flex; align-items: center; gap: var(--s-2);
  margin-top: var(--s-5);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-ink);
  max-width: 22ch;
}
.testimonial-author .avatar {
  width: 48px; height: 48px;
  background: var(--red);
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 18px;
}
.testimonial-author .name { font-weight: 600; font-size: var(--t-16); color: #fff; }
.testimonial-author .role { font-size: 13px; color: var(--text-muted-dark); }

.testimonial-grid {
  display: grid;
  grid-template-columns: 1.2fr 0.8fr;
  gap: var(--s-7);
  align-items: center;
}
@media (max-width: 1024px) { .testimonial-grid { grid-template-columns: 1fr; } }

.testimonial-stats {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
.tstat { padding: var(--s-3); border: 1px solid var(--border-ink); }
.tstat .num { font-family: var(--font-sans); font-size: clamp(2rem, 3.5vw, var(--t-44)); font-weight: 800; line-height: 1; color: #fff; letter-spacing: -0.04em; }
.tstat .num .accent { color: var(--red); }
.tstat .label { font-size: 11px; color: var(--text-muted-dark); margin-top: 8px; text-transform: uppercase; letter-spacing: 0.1em; }

/* ---------- 13b. PRICING CARD (single tier, link-count dropdown) ---------- */

.plan-solo {
  max-width: 420px;
  margin: 0 auto;
}

.plan-card {
  background: var(--bg-dark);
  color: #fff;
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  border: 1px solid var(--border-ink);
  position: relative;
}
.plan-card .plan-name {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--red);
}
.plan-card .plan-tag {
  font-size: 12px;
  color: var(--text-muted-dark);
  margin-top: 2px;
}

.plan-card-head {
  border-bottom: 1px solid var(--border-ink);
  padding-bottom: var(--s-2);
}

.plan-config {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-config-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted-dark);
  font-weight: 600;
}

/* Custom dropdown — chiaroscuro style */
.select-wrap {
  position: relative;
  display: block;
}
.pricing-select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background: transparent;
  border: 1px solid #fff;
  color: #fff;
  padding: 10px 40px 10px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.02em;
  width: 100%;
  cursor: pointer;
  outline: none;
  border-radius: 0;
  transition: border-color var(--d-snap) var(--ease-out), background-color var(--d-snap) var(--ease-out);
}
.pricing-select:hover { background: rgba(255,255,255,0.04); }
.pricing-select:focus { border-color: var(--red); }
.pricing-select option {
  background: var(--bg-dark);
  color: #fff;
  font-family: var(--font-mono);
  font-weight: 600;
  padding: 8px;
}
.select-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  width: 14px;
  height: 14px;
  color: var(--red);
  pointer-events: none;
}

.plan-price-block {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin-top: var(--s-2);
}
.plan-card .plan-price-row {
  display: flex;
  align-items: baseline;
  gap: 4px;
}
.plan-card .plan-currency {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(1.25rem, 2vw, 1.75rem);
  color: #fff;
}
.plan-card .plan-price {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.25rem, 4.5vw, 3.5rem);
  letter-spacing: -0.045em;
  line-height: 1;
  color: #fff;
  font-feature-settings: 'tnum' on;
  transition: opacity var(--d-snap) var(--ease-out);
}
.plan-card .plan-price.changing { opacity: 0.4; }
.plan-card .plan-period {
  font-size: 14px;
  color: var(--text-muted-dark);
  font-weight: 500;
}

.plan-card .plan-divider {
  background: var(--border-ink);
}

.plan-card .plan-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.plan-card .plan-feature {
  display: flex;
  align-items: start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted-dark);
  line-height: 1.4;
}
.plan-card .plan-feature.bold {
  color: #fff;
  font-weight: 500;
}
.plan-card .plan-feature svg {
  width: 16px; height: 16px;
  color: var(--red);
  flex-shrink: 0;
  margin-top: 2px;
}

.plan-cta { margin-top: var(--s-2); }
.plan-fineprint {
  font-size: 12px;
  color: var(--text-muted-dark);
  text-align: center;
  margin-top: 4px;
}

/* ---------- 13. PRICING (legacy 3-tier grid) ---------- */

.pricing-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
}
@media (max-width: 1024px) { .pricing-grid { grid-template-columns: 1fr; } }

.plan {
  background: var(--bg-light);
  padding: var(--s-5);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  position: relative;
}

.plan.featured {
  background: var(--bg-dark);
  color: #fff;
}
.plan.featured .plan-price, .plan.featured h3 { color: #fff; }
.plan.featured .plan-feature { color: var(--text-muted-dark); }
.plan.featured .plan-feature svg { color: var(--red); }
.plan.featured .plan-period { color: var(--text-muted-dark); }
.plan.featured .plan-divider { background: var(--border-ink); }

.plan-badge {
  position: absolute;
  top: 0; right: 0;
  background: var(--red);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 6px 12px;
}

.plan-name {
  font-size: 14px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--text-muted);
}
.plan.featured .plan-name { color: var(--text-muted-dark); }

.plan-price-row { display: flex; align-items: baseline; gap: 4px; }
.plan-price {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: clamp(2.5rem, 4vw, var(--t-72));
  letter-spacing: -0.04em;
  line-height: 1;
  font-feature-settings: 'tnum' on;
}
.plan-period { color: var(--text-muted); font-size: 14px; font-weight: 500; }

.plan-tag { font-size: 13px; color: var(--text-muted); }
.plan.featured .plan-tag { color: var(--text-muted-dark); }

.plan-divider {
  height: 1px;
  background: var(--border-light);
  margin: var(--s-2) 0;
}

.plan-features { list-style: none; display: flex; flex-direction: column; gap: var(--s-1); flex-grow: 1; }
.plan-feature {
  display: flex; align-items: start;
  gap: 12px;
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.4;
}
.plan-feature svg { width: 16px; height: 16px; color: var(--red); flex-shrink: 0; margin-top: 2px; }
.plan-feature.bold { color: var(--text-on-light); font-weight: 500; }
.plan.featured .plan-feature.bold { color: #fff; }

.plan .btn { margin-top: var(--s-2); }

/* annual toggle */
.pricing-toggle {
  display: inline-flex;
  border: 1px solid var(--border-ink);
  padding: 4px;
  background: #fff;
}
.pricing-toggle button {
  padding: 8px 16px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  background: transparent;
  color: var(--text-muted);
}
.pricing-toggle button.active { background: var(--text-on-light); color: #fff; }
.pricing-toggle .save {
  display: inline-block;
  background: var(--red);
  color: #fff;
  padding: 2px 6px;
  font-size: 10px;
  margin-left: 4px;
}

/* ---------- 14. FAQ ---------- */

.faq {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-light);
}
.faq-item {
  border-bottom: 1px solid var(--border-light);
}
.faq-item summary {
  list-style: none;
  cursor: pointer;
  padding: var(--s-3) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  font-size: var(--t-18);
  font-weight: 600;
  letter-spacing: -0.015em;
  transition: color var(--d-snap) var(--ease-out);
}
.faq-item summary::-webkit-details-marker { display: none; }
.faq-item summary:hover { color: var(--red); }
.faq-item .toggle {
  width: 24px; height: 24px;
  position: relative;
  flex-shrink: 0;
  transition: transform var(--d-normal) var(--ease-out);
}
.faq-item .toggle::before,
.faq-item .toggle::after {
  content: '';
  position: absolute;
  background: currentColor;
}
.faq-item .toggle::before { top: 50%; left: 0; right: 0; height: 1.5px; transform: translateY(-50%); }
.faq-item .toggle::after { left: 50%; top: 0; bottom: 0; width: 1.5px; transform: translateX(-50%); transition: opacity var(--d-snap); }
.faq-item[open] .toggle::after { opacity: 0; }
.faq-item[open] summary { color: var(--red); }
.faq-item .answer {
  padding: 0 0 var(--s-3) 0;
  max-width: 70ch;
  color: var(--text-muted);
  font-size: var(--t-16);
  line-height: 1.6;
}

/* ---------- 15. CTA BANNER ---------- */

.cta-banner {
  background: var(--bg-dark);
  color: #fff;
  padding: var(--s-9) 0;
  border-top: 1px solid var(--border-ink);
}
.cta-banner-grid {
  display: grid;
  grid-template-columns: 1.3fr 0.7fr;
  gap: var(--s-6);
  align-items: center;
}
@media (max-width: 1024px) { .cta-banner-grid { grid-template-columns: 1fr; } }
.cta-banner h2 { max-width: 16ch; }
.cta-banner .lead { color: var(--text-muted-dark); }

/* ---------- 16. FOOTER ---------- */

.footer {
  background: var(--bg-dark);
  color: var(--text-on-dark);
  padding: var(--s-8) 0 var(--s-4);
  border-top: 1px solid var(--border-ink);
}
.footer-top {
  display: grid;
  grid-template-columns: 1.5fr 0.7fr 0.7fr 0.7fr 0.7fr;
  gap: var(--s-5);
  padding-bottom: var(--s-6);
  border-bottom: 1px solid var(--border-ink);
}
@media (max-width: 1024px) {
  .footer-top { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-top { grid-template-columns: 1fr; gap: var(--s-3); }
}

.footer h4 {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted-dark);
  margin-bottom: var(--s-2);
}
.footer-links { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.footer-links a {
  color: #fff;
  font-size: 14px;
  transition: color var(--d-snap);
}
.footer-links a:hover { color: var(--red); }

.footer-brand-block {
  display: flex; flex-direction: column; gap: var(--s-2);
  max-width: 32ch;
}
.footer-brand-block p { color: var(--text-muted-dark); font-size: 14px; line-height: 1.5; }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-top: var(--s-3);
  gap: var(--s-3);
  flex-wrap: wrap;
}
.footer-bottom p { color: var(--text-muted-dark); font-size: 13px; }
.footer-social { display: flex; gap: 12px; }
.footer-social a {
  width: 36px; height: 36px;
  border: 1px solid var(--border-ink);
  display: grid; place-items: center;
  color: #fff;
  transition: background-color var(--d-snap), color var(--d-snap), border-color var(--d-snap);
}
.footer-social a:hover { background: var(--red); border-color: var(--red); }
.footer-social svg { width: 16px; height: 16px; }

/* ---------- 17. UTILITY MICRO COMPONENTS ---------- */

.kbd {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border: 1px solid currentColor;
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
}

.tag {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  border: 1px solid currentColor;
}
.tag-red { color: var(--red); }

.divider-red {
  width: 64px;
  height: 2px;
  background: var(--red);
  display: block;
  margin-bottom: var(--s-2);
}

/* ---------- 18. VISUAL MOCKUPS (decorative) ---------- */

/* phone mockup */
.phone {
  width: 240px;
  aspect-ratio: 9/19.5;
  background: #0c0c0c;
  border: 1px solid var(--border-ink);
  position: relative;
  display: flex;
  flex-direction: column;
}
.phone-notch {
  height: 28px;
  background: #000;
  display: grid; place-items: center;
  position: relative;
}
.phone-notch::after {
  content: '';
  width: 64px; height: 16px;
  background: #000;
  border-bottom-left-radius: 8px;
  border-bottom-right-radius: 8px;
  position: absolute;
  top: 0; left: 50%; transform: translateX(-50%);
}
.phone-screen {
  flex: 1;
  background: linear-gradient(180deg, #131313 0%, #050505 100%);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  position: relative;
  overflow: hidden;
}

.phone-app-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 9px;
  color: #888;
  font-family: 'JetBrains Mono', monospace;
  border-bottom: 1px solid var(--border-ink);
  padding-bottom: 8px;
}
.phone-app-bar .url {
  flex: 1;
  background: #1a1a1a;
  padding: 4px 8px;
  color: #fff;
  border: 1px solid var(--border-ink);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.phone-link {
  background: #fff;
  color: #000;
  padding: 12px;
  font-size: 11px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: space-between;
  text-transform: uppercase;
  letter-spacing: 0.05em;
}
.phone-link.accent { background: var(--red); color: #fff; }

/* dashboard mockup (used in analytics page) */
.dashboard-mock {
  background: #0c0c0c;
  border: 1px solid var(--border-ink);
  padding: var(--s-3);
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  position: relative;
}
.dashboard-mock .topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border-ink);
}
.dashboard-mock .topbar h5 { font-size: 13px; font-weight: 600; color: #fff; }
.dashboard-mock .topbar .live { font-size: 10px; color: var(--red); text-transform: uppercase; letter-spacing: 0.1em; font-weight: 700; display: flex; align-items: center; gap: 6px; }
.dashboard-mock .topbar .live::before { content: ''; width: 5px; height: 5px; background: var(--red); }

.dashboard-mock .row-mock {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px;
}
.dashboard-mock .stat-mock {
  border: 1px solid var(--border-ink);
  padding: 10px;
  display: flex; flex-direction: column; gap: 2px;
}
.dashboard-mock .stat-mock .v { font-size: 18px; font-weight: 700; color: #fff; font-feature-settings: 'tnum' on; }
.dashboard-mock .stat-mock .v.accent { color: var(--red); }
.dashboard-mock .stat-mock .l { font-size: 9px; color: var(--text-muted-dark); text-transform: uppercase; letter-spacing: 0.1em; }

.dashboard-mock .chart {
  flex: 1;
  position: relative;
  min-height: 120px;
  border: 1px solid var(--border-ink);
  padding: 8px;
  overflow: hidden;
}
.dashboard-mock .chart svg { width: 100%; height: 100%; }

/* ---------- 19. PROCESS / STEPS ---------- */

.steps {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
}
@media (max-width: 768px) { .steps { grid-template-columns: 1fr; } }
.step {
  background: var(--bg-light);
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.step-num {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 700;
  color: var(--red);
  letter-spacing: 0.1em;
}
.step h4 { font-size: var(--t-20); font-weight: 700; line-height: 1.2; }
.step p { font-size: 14px; color: var(--text-muted); line-height: 1.5; }

/* on dark */
.slab-dark .steps { background: var(--border-ink); border-color: var(--border-ink); }
.slab-dark .step { background: var(--bg-dark); color: #fff; }
.slab-dark .step p { color: var(--text-muted-dark); }

/* ---------- 20. LIST CHECK ---------- */

.check-list { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.check-list li {
  display: flex; gap: 12px; align-items: start;
  font-size: var(--t-16);
  line-height: 1.5;
}
.check-list li svg {
  flex-shrink: 0;
  width: 20px; height: 20px;
  color: var(--red);
  margin-top: 2px;
}

/* ---------- 21. SOCIAL HANDLES (build-your-page mock) ---------- */

.handles {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.handle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid currentColor;
  font-size: 13px;
  font-weight: 500;
  font-family: 'JetBrains Mono', monospace;
}
.handle .at { color: var(--red); }

/* ---------- 22. PROBLEM/SOLUTION CARDS ---------- */

.duo-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1px;
  background: var(--border-light);
  border: 1px solid var(--border-light);
}
@media (max-width: 768px) { .duo-grid { grid-template-columns: 1fr; } }
.duo-card { padding: var(--s-5); display: flex; flex-direction: column; gap: var(--s-2); }
.duo-card.bad { background: var(--bg-light); }
.duo-card.good { background: var(--bg-dark); color: #fff; }
.duo-card.bad .tag { color: #6a6a6a; }
.duo-card.good .tag { color: var(--red); }
.duo-card ul { list-style: none; display: flex; flex-direction: column; gap: 8px; }
.duo-card li {
  display: flex; gap: 10px; align-items: start;
  font-size: 14px;
  line-height: 1.45;
  color: var(--text-muted);
}
.duo-card.good li { color: var(--text-muted-dark); }
.duo-card li svg { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; }
.duo-card.bad li svg { color: #6a6a6a; }
.duo-card.good li svg { color: var(--red); }

/* ---------- 23. ENTRANCE ANIMATIONS (GSAP fallback) ---------- */

.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 600ms var(--ease-out), transform 600ms var(--ease-out);
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

/* Reduce motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- 24. PAGE HERO (subpages) ---------- */

.page-hero {
  background: var(--bg-dark);
  color: #fff;
  padding: 140px 0 var(--s-7);
  border-bottom: 1px solid var(--border-ink);
}
.page-hero .container { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: var(--s-7); align-items: center; }
@media (max-width: 1024px) { .page-hero .container { grid-template-columns: 1fr; } }
.page-hero h1 { max-width: 16ch; }
.page-hero .lead { max-width: 56ch; }

.breadcrumb {
  display: flex; gap: 8px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted-dark);
  margin-bottom: var(--s-3);
}
.breadcrumb .sep { color: var(--border-ink); }
.breadcrumb a:hover { color: var(--red); }
.breadcrumb .current { color: var(--red); }

/* ---------- 26. FLOW DIAGRAM (hero) — bot blocked vs fan passes ---------- */

.flow-diagram {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 28px 24px;
  gap: 12px;
  position: relative;
  z-index: 2;
}

.flow-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

/* ── row marker (01 / 02 + label) ── */
.flow-marker {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding-left: 2px;
}
.flow-num {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.02em;
}
.flow-blocked .flow-num { color: var(--red); }
.flow-pass .flow-num { color: #fff; }

.flow-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--text-muted-dark);
}

/* ── the actual horizontal track ── */
.flow-track {
  display: grid;
  grid-template-columns: 86px 1fr auto 1fr 86px;
  align-items: center;
  gap: 10px;
}

/* ── source node (left) ── */
.flow-source {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.flow-logos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 4px;
  width: 100%;
}
.flow-logos.solo {
  grid-template-columns: 1fr;
  width: auto;
}
.flow-logo {
  width: 100%;
  aspect-ratio: 1;
  border: 1px solid currentColor;
  display: grid;
  place-items: center;
  color: var(--red);
}
.flow-logo.large {
  width: 56px;
}
.flow-logo svg {
  width: 60%;
  height: 60%;
}
.flow-pass .flow-logo { color: #fff; }

.flow-source-cap {
  font-size: 9px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--text-muted-dark);
  text-align: center;
  line-height: 1.2;
}

/* ── animated SVG arrow (dashed line + chevron) ── */
.flow-arrow {
  position: relative;
  display: flex;
  align-items: center;
}
.flow-arrow svg {
  width: 100%;
  height: 12px;
  overflow: visible;
}
.flow-blocked .flow-arrow svg { color: var(--red); }
.flow-pass .flow-arrow svg { color: #fff; }

.flow-stroke {
  animation: dash-march 1.3s linear infinite;
}
@keyframes dash-march {
  to { stroke-dashoffset: -20; }
}

/* ── center gateway: "your link" — beefed up ── */
.flow-gateway {
  background: var(--bg-dark);
  border: 1px solid #fff;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  min-width: 132px;
  position: relative;
  z-index: 2;
}
.flow-blocked .flow-gateway { border-color: rgba(255,255,255,0.4); }
.flow-pass .flow-gateway { border-color: #fff; }

.flow-gateway-icon {
  width: 28px; height: 28px;
  display: grid;
  place-items: center;
  color: var(--red);
  margin-bottom: 2px;
}
.flow-gateway-icon svg { width: 100%; height: 100%; }

.flow-gateway-label {
  font-size: 18px;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #fff;
  line-height: 1.0;
  text-align: center;
}
.flow-gateway-meta {
  font-size: 9px;
  color: var(--text-muted-dark);
  letter-spacing: 0.06em;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 2px;
}
.flow-gateway-meta .dot {
  width: 4px; height: 4px;
  background: var(--red);
  display: inline-block;
}

/* ── outcome node (right) — blocked or success ── */
.flow-outcome {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.flow-outcome-icon {
  width: 56px;
  height: 56px;
  display: grid;
  place-items: center;
}
.flow-outcome-icon svg { width: 60%; height: 60%; }

.flow-outcome.blocked .flow-outcome-icon {
  background: var(--red);
  color: #fff;
}
.flow-outcome.success .flow-outcome-icon {
  background: #fff;
  color: var(--bg-dark);
}

.flow-outcome-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: #fff;
  line-height: 1.2;
}
.flow-outcome.blocked .flow-outcome-label { color: var(--red); }

.flow-outcome-sub {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  color: var(--text-muted-dark);
  line-height: 1.2;
}

/* ── stat ribbon under each row ── */
.flow-stat {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted-dark);
  padding-left: 2px;
  font-weight: 500;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.flow-stat-num {
  font-family: var(--font-sans);
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.03em;
  font-feature-settings: 'tnum' on;
}
.flow-blocked .flow-stat-num { color: var(--red); }
.flow-pass .flow-stat-num { color: #fff; }

/* ── VS divider — bold sans uppercase ── */
.flow-vs {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 14px;
  color: var(--text-muted-dark);
  text-align: center;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  position: relative;
  padding: 8px 0;
}
.flow-vs::before, .flow-vs::after {
  content: '';
  position: absolute;
  top: 50%;
  width: 24%;
  height: 1px;
  background: var(--border-ink);
}
.flow-vs::before { left: 8%; }
.flow-vs::after { right: 8%; }

@media (max-width: 1024px) {
  .flow-diagram { padding: 20px 16px; gap: 8px; }
  .flow-track { grid-template-columns: 72px 1fr auto 1fr 72px; gap: 8px; }
  .flow-logo.large { width: 44px; }
  .flow-gateway { min-width: 110px; padding: 10px 10px; }
  .flow-gateway-label { font-size: 15px; }
  .flow-outcome-icon { width: 44px; height: 44px; }
  .flow-num { font-size: 16px; }
  .flow-stat-num { font-size: 15px; }
  .flow-vs { font-size: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  .flow-stroke { animation: none; }
}

/* ---------- 27. TERMINAL (legacy, unused) ---------- */

.terminal {
  width: 100%;
  height: 100%;
  background: #060606;
  border: 1px solid var(--border-ink);
  display: flex;
  flex-direction: column;
  font-family: var(--font-mono);
  position: relative;
  overflow: hidden;
}

.terminal::before {
  /* subtle grain / scanline texture */
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(255,255,255,0.012) 3px,
      transparent 4px
    );
  pointer-events: none;
  z-index: 1;
}

.terminal-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 18px;
  border-bottom: 1px solid var(--border-ink);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #fff;
  background: #0a0a0a;
}
.terminal-title { display: flex; align-items: center; gap: 8px; }
.terminal-mark {
  width: 8px; height: 8px;
  background: var(--red);
  display: inline-block;
}
.terminal-sep { color: var(--border-ink); }
.terminal-meta {
  color: var(--text-muted-dark);
  font-feature-settings: 'tnum' on;
}

.terminal-body {
  flex: 1;
  padding: 12px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  overflow: hidden;
  position: relative;
  z-index: 2;
}

.log-line {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: start;
  font-size: 11px;
  line-height: 1.5;
  color: #d6d6d6;
  animation: log-enter 480ms var(--ease-out) both;
}
.log-line.exit {
  animation: log-exit 360ms var(--ease-in) both;
}
@keyframes log-enter {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes log-exit {
  from { opacity: 1; transform: translateY(0); }
  to   { opacity: 0; transform: translateY(-12px); }
}

.log-time {
  color: var(--text-muted-dark);
  font-size: 10px;
  padding-top: 2px;
  letter-spacing: 0.04em;
}
.log-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.log-row {
  display: flex;
  gap: 8px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-geo { color: #fff; font-weight: 600; }
.log-ua { color: var(--text-muted-dark); font-size: 10px; }
.log-dest {
  color: #d6d6d6;
  font-size: 10px;
  overflow: hidden;
  text-overflow: ellipsis;
}
.log-dest .arrow { color: var(--red); margin-right: 4px; }

.log-verdict {
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.12em;
  padding: 3px 7px;
  text-transform: uppercase;
  white-space: nowrap;
  align-self: start;
}
.log-verdict.pass {
  background: #fff;
  color: #000;
}
.log-verdict.blocked {
  background: var(--red);
  color: #fff;
}
.log-money {
  color: var(--red);
  font-weight: 700;
  font-size: 10px;
}
.log-layer {
  color: var(--text-muted-dark);
  font-size: 9px;
}

/* dim older entries */
.log-line:nth-child(3) { opacity: 0.7; }
.log-line:nth-child(4) { opacity: 0.45; }
.log-line:nth-child(5) { opacity: 0.22; }

.terminal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 18px;
  border-top: 1px solid var(--border-ink);
  font-size: 10px;
  letter-spacing: 0.1em;
  color: var(--text-muted-dark);
  text-transform: uppercase;
  background: #0a0a0a;
  position: relative;
  z-index: 2;
}
.terminal-footer .mono { color: #fff; font-weight: 700; }

@media (prefers-reduced-motion: reduce) {
  .log-line { animation: none; }
}

/* ---------- 28. TIER LADDER (pricing hero) ---------- */

.tier-ladder {
  width: 100%;
  height: 100%;
  background: #060606;
  border: 1px solid var(--border-ink);
  display: flex;
  flex-direction: column;
  font-family: var(--font-sans);
  position: relative;
  overflow: hidden;
}

.tier-ladder::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(
      0deg,
      transparent 0px,
      transparent 2px,
      rgba(255,255,255,0.012) 3px,
      transparent 4px
    );
  pointer-events: none;
  z-index: 1;
}

.tier-ladder-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-ink);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: #fff;
  background: #0a0a0a;
  z-index: 2;
  position: relative;
}
.tier-ladder-title {
  display: flex;
  align-items: center;
  gap: 8px;
}
.tier-ladder-dot {
  width: 7px;
  height: 7px;
  background: var(--red);
}
.tier-ladder-meta {
  color: var(--text-muted-dark);
}

.tier-row {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 12px;
  align-items: center;
  padding: 10px 16px;
  border-bottom: 1px solid var(--border-ink);
  transition: background-color var(--d-snap) var(--ease-out);
  z-index: 2;
  position: relative;
}
.tier-row:hover { background: rgba(255,255,255,0.025); }

.tier-row.entry {
  background: linear-gradient(90deg, rgba(235,35,35,0.06) 0%, transparent 70%);
  position: relative;
}
.tier-row.entry::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--red);
}

.tier-dot {
  width: 6px;
  height: 6px;
  background: var(--border-ink);
  flex-shrink: 0;
}
.tier-row.entry .tier-dot {
  background: var(--red);
}
.tier-row:hover .tier-dot { background: #fff; }
.tier-row.entry:hover .tier-dot { background: var(--red); }

.tier-info {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.tier-volume {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.005em;
}
.tier-row:not(.entry) .tier-volume {
  color: var(--text-muted-dark);
}
.tier-row:hover .tier-volume { color: #fff; }

.tier-label {
  font-size: 9px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-muted-dark);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tier-price {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: -0.035em;
  font-feature-settings: 'tnum' on;
  color: var(--text-muted-dark);
  white-space: nowrap;
}
.tier-row.entry .tier-price {
  color: #fff;
  font-size: 22px;
}

.tier-ladder-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 16px;
  border-top: 1px solid var(--border-ink);
  font-size: 9px;
  letter-spacing: 0.12em;
  color: var(--text-muted-dark);
  text-transform: uppercase;
  background: #0a0a0a;
  font-weight: 600;
  z-index: 2;
  position: relative;
  margin-top: auto;
}

@media (max-width: 1024px) {
  .tier-ladder-bar, .tier-row, .tier-ladder-foot { padding: 8px 12px; }
  .tier-price { font-size: 16px; }
  .tier-row.entry .tier-price { font-size: 19px; }
  .tier-label { font-size: 8px; }
  .tier-volume { font-size: 11px; }
}

/* ---------- 30. AUTH PAGES (split-screen login) ---------- */

.auth-body {
  margin: 0;
  background: var(--bg-light);
  min-height: 100vh;
}

.auth-layout {
  min-height: 100vh;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
}

/* --- LEFT — dark editorial slab --- */
.auth-side {
  background: var(--bg-dark);
  color: #fff;
  padding: var(--s-6);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  border-right: 1px solid var(--border-ink);
  position: relative;
  min-height: 100vh;
  overflow: hidden;
}
.auth-side::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255,255,255,0.022) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.022) 1px, transparent 1px);
  background-size: 40px 40px;
  pointer-events: none;
}
.auth-side > * { position: relative; z-index: 1; }

.auth-side .brand { color: #fff; }

.auth-side-content {
  max-width: 36ch;
}

.auth-side-foot {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 11px;
  letter-spacing: 0.12em;
  color: var(--text-muted-dark);
  text-transform: uppercase;
  padding-top: var(--s-4);
  border-top: 1px solid var(--border-ink);
}
.auth-back {
  color: #fff;
  font-weight: 600;
  font-family: var(--font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.auth-back:hover { color: var(--red); }

/* --- RIGHT — form slab --- */
.auth-form-wrap {
  background: var(--bg-light);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--s-6) var(--s-4);
}
.auth-form {
  width: 100%;
  max-width: 380px;
}
.auth-form .eyebrow { color: var(--red); }
.auth-sub {
  color: var(--text-muted);
  font-size: 14px;
  margin-top: 6px;
}

.auth-form-fields {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  margin-top: var(--s-4);
}

/* --- form fields --- */
.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.field-label-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
}
.field-label {
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  font-weight: 700;
}
.field-input-wrap {
  position: relative;
}
.field-input {
  appearance: none;
  width: 100%;
  border: 1px solid var(--border-default);
  background: #fff;
  padding: 13px 14px;
  font-family: var(--font-sans);
  font-size: 15px;
  color: var(--text-on-light);
  border-radius: 0;
  transition: border-color var(--d-snap) var(--ease-out);
  outline: none;
}
.field-input::placeholder {
  color: #c5c5c5;
  font-weight: 400;
}
.field-input:hover { border-color: #c5c5c5; }
.field-input:focus { border-color: var(--text-on-light); }

.field-toggle {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  cursor: pointer;
  color: var(--text-muted);
  display: grid;
  place-items: center;
  padding: 4px;
}
.field-toggle:hover { color: var(--red); }
.field-toggle svg { width: 18px; height: 18px; }

.auth-forgot {
  font-size: 11px;
  color: var(--red);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.auth-forgot:hover { text-decoration: underline; }

.auth-check {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted);
  cursor: pointer;
  user-select: none;
  margin-top: 4px;
}
.auth-check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border: 1.5px solid var(--text-on-light);
  background: #fff;
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background-color var(--d-snap) var(--ease-out),
              border-color var(--d-snap) var(--ease-out);
}
.auth-check input[type="checkbox"]:hover {
  border-color: var(--red);
}
.auth-check input[type="checkbox"]:checked {
  background: var(--red);
  border-color: var(--red);
}
.auth-check input[type="checkbox"]:checked::after {
  content: '';
  position: absolute;
  left: 5px; top: 1px;
  width: 5px; height: 10px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

.auth-submit {
  width: 100%;
  margin-top: var(--s-2);
}

.auth-divider {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: var(--s-4) 0 var(--s-3);
  color: var(--text-muted);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 700;
}
.auth-divider::before, .auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--border-light);
}

.auth-bottom {
  text-align: center;
  font-size: 14px;
  color: var(--text-muted);
}
.auth-bottom .link-arrow {
  font-size: 13px;
  margin-left: 4px;
}

.auth-legal {
  text-align: center;
  font-size: 11px;
  color: var(--text-muted);
  margin-top: var(--s-4);
  line-height: 1.5;
}

.auth-error {
  background: rgba(235, 35, 35, 0.06);
  border: 1px solid var(--red);
  border-left-width: 3px;
  padding: 10px 14px;
  font-size: 13px;
  color: var(--red);
  font-weight: 600;
  margin: var(--s-2) 0;
}
.auth-legal a {
  color: var(--text-on-light);
  font-weight: 600;
  border-bottom: 1px solid var(--border-light);
}
.auth-legal a:hover { color: var(--red); border-color: var(--red); }

/* perks list on register page */
.auth-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.auth-perks li {
  display: flex;
  align-items: start;
  gap: 10px;
  font-size: 13px;
  color: var(--text-muted-dark);
  line-height: 1.4;
}
.auth-perks li svg {
  width: 16px; height: 16px;
  color: var(--red);
  flex-shrink: 0;
  margin-top: 2px;
}

/* password strength meter */
.pw-strength {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 4px;
}
.pw-bar {
  flex: 1;
  height: 3px;
  background: var(--border-light);
  display: block;
  overflow: hidden;
}
.pw-bar-fill {
  display: block;
  height: 100%;
  width: 0;
  background: transparent;
  transition: width 200ms var(--ease-out), background-color 200ms var(--ease-out);
}
.pw-label {
  font-family: var(--font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--text-muted);
  text-transform: uppercase;
  white-space: nowrap;
}

/* --- responsive — collapse side on mobile --- */
@media (max-width: 900px) {
  .auth-layout { grid-template-columns: 1fr; }
  .auth-side {
    min-height: auto;
    padding: var(--s-4);
    flex-direction: column;
    gap: var(--s-4);
    border-right: none;
    border-bottom: 1px solid var(--border-ink);
  }
  .auth-side-content { display: none; }
  .auth-side-foot { display: none; }
  .auth-form-wrap { padding: var(--s-5) var(--s-3); }
}

/* ---------- 32. DASHBOARD (post-login app shell) ---------- */

.dash-body {
  margin: 0;
  background: var(--bg-alt);
  min-height: 100vh;
}

.dash-layout {
  display: grid;
  grid-template-columns: 240px 1fr;
  min-height: 100vh;
}

/* --- sidebar (dark slab) --- */
.dash-sidebar {
  background: var(--bg-dark);
  color: #fff;
  border-right: 1px solid var(--border-ink);
  display: flex;
  flex-direction: column;
  position: sticky;
  top: 0;
  height: 100vh;
  overflow-y: auto;
}

.dash-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 20px 20px;
  border-bottom: 1px solid var(--border-ink);
  color: #fff;
  font-weight: 800;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.dash-brand .dot { color: var(--red); }

.dash-nav {
  flex: 1;
  padding: var(--s-3) 0;
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.dash-section {
  display: flex;
  flex-direction: column;
}

.dash-section-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted-dark);
  padding: 0 20px;
  margin-bottom: 8px;
}

.dash-nav-item {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 10px 20px;
  color: var(--text-muted-dark);
  font-size: 13px;
  font-weight: 500;
  letter-spacing: -0.005em;
  transition: color var(--d-snap) var(--ease-out),
              background-color var(--d-snap) var(--ease-out);
  position: relative;
}
.dash-nav-item svg { width: 16px; height: 16px; }
.dash-nav-item:hover { color: #fff; background: rgba(255,255,255,0.025); }
.dash-nav-item.active {
  color: #fff;
  background: rgba(235, 35, 35, 0.08);
}
.dash-nav-item.active::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 2px;
  background: var(--red);
}
.dash-nav-item.active svg { color: var(--red); }

.dash-badge {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  padding: 2px 6px;
  background: var(--red);
  color: #fff;
  letter-spacing: 0.04em;
}
.dash-badge.muted {
  background: transparent;
  border: 1px solid var(--border-ink);
  color: var(--text-muted-dark);
}

.dash-sidebar-foot {
  border-top: 1px solid var(--border-ink);
  padding: var(--s-2) 20px;
}

.dash-user {
  display: flex;
  align-items: center;
  gap: 10px;
}
.dash-avatar {
  width: 32px; height: 32px;
  background: var(--red);
  color: #fff;
  display: grid;
  place-items: center;
  font-weight: 800;
  font-size: 13px;
}
.dash-user-info {
  display: flex;
  flex-direction: column;
  gap: 1px;
  min-width: 0;
  flex: 1;
}
.dash-user-name {
  font-size: 13px;
  font-weight: 600;
  color: #fff;
}
.dash-user-plan {
  font-family: var(--font-mono);
  font-size: 9px;
  color: var(--text-muted-dark);
  letter-spacing: 0.06em;
}

/* --- main area --- */
.dash-main {
  padding: var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  min-width: 0;
}

.dash-card {
  background: #fff;
  border: 1px solid var(--border-light);
  padding: var(--s-3) var(--s-4);
}

.dash-header-card {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-3);
}

.dash-page-title h1 {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 26px;
  letter-spacing: -0.03em;
  line-height: 1.05;
  color: var(--text-on-light);
}
.dash-page-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

.dash-create-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  font-size: 12px;
}
.dash-create-btn svg { width: 14px; height: 14px; }

/* --- table --- */
.dash-table-card {
  padding: 0;
  overflow: visible;
}
.dash-table {
  display: flex;
  flex-direction: column;
}
.dash-table-head,
.dash-row {
  display: grid;
  grid-template-columns: 32px 1fr auto;
  gap: var(--s-2);
  align-items: center;
  padding: 12px 20px;
}
.dash-table-head {
  border-bottom: 1px solid var(--border-light);
  background: var(--bg-alt);
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
}
.dash-row {
  border-bottom: 1px solid var(--border-light);
  transition: background-color var(--d-snap) var(--ease-out);
  position: relative;
}
/* Last row: flip dropdown above the button to avoid clipping */
.dash-row:last-child .dash-menu {
  top: auto;
  bottom: calc(100% + 6px);
}
.dash-row:last-child { border-bottom: none; }
.dash-row:hover { background: var(--bg-alt); }

.dash-drag {
  display: grid;
  place-items: center;
  color: var(--text-muted);
  cursor: grab;
  background: none;
  border: none;
  padding: 4px;
}
.dash-drag:active { cursor: grabbing; }
.dash-drag svg { width: 16px; height: 16px; }
.dash-drag:hover { color: var(--text-on-light); }

.dash-url {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.dash-status {
  width: 8px;
  height: 8px;
  flex-shrink: 0;
  background: var(--text-muted);
}
.dash-status.active { background: var(--red); }
.dash-status.paused { background: var(--text-muted); }

.dash-url-text {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-on-light);
  font-weight: 600;
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.dash-icon-btn {
  display: grid;
  place-items: center;
  background: none;
  border: none;
  color: var(--text-muted);
  padding: 4px;
  cursor: pointer;
  transition: color var(--d-snap);
}
.dash-icon-btn svg { width: 14px; height: 14px; }
.dash-icon-btn:hover { color: var(--text-on-light); }

.dash-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border-default);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--text-on-light);
  background: #fff;
  white-space: nowrap;
  text-transform: none;
  width: fit-content;
}
.dash-tag svg { width: 12px; height: 12px; color: var(--text-muted); }

.dash-note-input {
  appearance: none;
  border: 1px solid transparent;
  background: var(--bg-alt);
  padding: 7px 10px;
  font-family: var(--font-sans);
  font-size: 12px;
  color: var(--text-on-light);
  width: 100%;
  border-radius: 0;
  transition: border-color var(--d-snap);
  outline: none;
}
.dash-note-input::placeholder { color: var(--text-muted); }
.dash-note-input:focus, .dash-note-input:hover {
  border-color: var(--border-default);
  background: #fff;
}

.dash-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}

.dash-action-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: #fff;
  border: 1px solid var(--border-default);
  color: var(--text-on-light);
  cursor: pointer;
  transition: background-color var(--d-snap), border-color var(--d-snap);
  text-transform: none;
  white-space: nowrap;
}
.dash-action-btn svg { width: 12px; height: 12px; color: var(--text-muted); }
.dash-action-btn:hover {
  background: var(--text-on-light);
  border-color: var(--text-on-light);
  color: #fff;
}
.dash-action-btn:hover svg { color: #fff; }

.dash-more svg { width: 16px; height: 16px; }

/* dash row dropdown menu */
.dash-menu-wrap {
  position: relative;
  display: inline-block;
}
.dash-menu {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 168px;
  background: #fff;
  border: 1px solid var(--border-light);
  display: none;
  flex-direction: column;
  z-index: 20;
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
}
.dash-menu.open { display: flex; }

.dash-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  font-size: 13px;
  font-weight: 500;
  color: var(--text-on-light);
  background: transparent;
  border: none;
  cursor: pointer;
  text-align: left;
  width: 100%;
  letter-spacing: -0.005em;
  transition: background-color var(--d-snap) var(--ease-out),
              color var(--d-snap) var(--ease-out);
}
.dash-menu-item:not(:last-child) {
  border-bottom: 1px solid var(--border-light);
}
.dash-menu-item svg {
  width: 14px;
  height: 14px;
  color: var(--text-muted);
  flex-shrink: 0;
}
.dash-menu-item:hover {
  background: var(--bg-alt);
}
.dash-menu-item:hover svg {
  color: var(--text-on-light);
}
.dash-menu-item.danger { color: var(--red); }
.dash-menu-item.danger svg { color: var(--red); }
.dash-menu-item.danger:hover {
  background: rgba(235, 35, 35, 0.06);
}

/* --- toggle --- */
.dash-toggle {
  position: relative;
  display: inline-block;
  width: 34px;
  height: 18px;
  cursor: pointer;
  flex-shrink: 0;
}
.dash-toggle input {
  opacity: 0;
  width: 0;
  height: 0;
}
.dash-toggle-slider {
  position: absolute;
  inset: 0;
  background: var(--border-default);
  transition: background-color var(--d-snap) var(--ease-out);
}
.dash-toggle-slider::before {
  content: '';
  position: absolute;
  left: 2px;
  top: 2px;
  width: 14px;
  height: 14px;
  background: #fff;
  transition: transform var(--d-snap) var(--ease-out);
}
.dash-toggle input:checked + .dash-toggle-slider {
  background: var(--red);
}
.dash-toggle input:checked + .dash-toggle-slider::before {
  transform: translateX(16px);
}

/* --- responsive --- */
@media (max-width: 1024px) {
  .dash-layout { grid-template-columns: 1fr; }
  .dash-sidebar {
    position: relative;
    height: auto;
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--border-ink);
  }
  .dash-nav { padding: var(--s-2) 0; gap: var(--s-2); }
  .dash-sidebar-foot { display: none; }
  .dash-table-head, .dash-row { grid-template-columns: 32px 1fr auto; gap: 10px; }
}

/* ---------- 32b. DASHBOARD CHECKOUT (crypto payment) ---------- */

.checkout-status {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border: 1px solid var(--border-default);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-on-light);
}
.checkout-status-dot {
  width: 8px;
  height: 8px;
  background: var(--red);
  animation: checkout-pulse 1.4s ease-in-out infinite;
}
@keyframes checkout-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

.checkout-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: var(--s-2);
}
@media (max-width: 1024px) { .checkout-grid { grid-template-columns: 1fr; } }

.checkout-section-eyebrow {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.16em;
  color: var(--red);
  margin-bottom: var(--s-3);
}

.checkout-summary {
  display: flex;
  flex-direction: column;
  gap: 0;
}
.checkout-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid var(--border-light);
  gap: 16px;
}
.checkout-row:last-child { border-bottom: none; }
.checkout-row.total { padding: var(--s-2) 0 0; border: none; align-items: flex-start; }
.checkout-row-label {
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--text-muted);
}
.checkout-row-value {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-on-light);
  letter-spacing: -0.005em;
}
.checkout-row-value.mono { font-family: var(--font-mono); font-weight: 700; }

.checkout-total {
  font-family: var(--font-sans);
  font-size: clamp(2rem, 3.5vw, 2.5rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--text-on-light);
  font-feature-settings: 'tnum' on;
}

.checkout-perks {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: var(--s-3);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-light);
}
.checkout-perks li {
  display: flex;
  align-items: start;
  gap: 10px;
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
}
.checkout-perks li svg {
  width: 14px;
  height: 14px;
  color: var(--red);
  flex-shrink: 0;
  margin-top: 2px;
}

/* ─── payment method side ─── */
.checkout-pay-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.pay-method-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  border: 1px solid var(--border-default);
}
.pay-method-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px;
  background: #fff;
  border: none;
  text-align: left;
  cursor: pointer;
  position: relative;
  transition: background-color var(--d-snap), color var(--d-snap);
}
.pay-method-btn:first-child { border-right: 1px solid var(--border-default); }
.pay-method-btn:hover { background: var(--bg-alt); }
.pay-method-btn.active {
  background: var(--text-on-light);
  color: #fff;
}
.pay-method-btn.active .pay-method-sub { color: var(--text-muted-dark); }

.pay-method-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  font-size: 18px;
  font-weight: 800;
  flex-shrink: 0;
}
.pay-method-icon.usdt {
  background: #26A17B;
  color: #fff;
}
.pay-method-icon.eth {
  background: #627EEA;
  color: #fff;
}
.pay-method-icon.eth svg { width: 18px; height: 18px; }

.pay-method-name {
  display: block;
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -0.01em;
}
.pay-method-sub {
  display: block;
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 600;
  margin-top: 2px;
}

/* amount block */
.pay-amount-block {
  background: var(--bg-alt);
  padding: var(--s-3);
  border: 1px solid var(--border-light);
}
.pay-amount-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-top: 6px;
}
.pay-amount-num {
  font-size: clamp(2rem, 4vw, 2.75rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  color: var(--text-on-light);
  line-height: 1;
}
.pay-amount-tag {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--red);
  text-transform: uppercase;
}
.pay-amount-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  letter-spacing: 0.04em;
}

/* address block */
.pay-address-block { padding: 0; }
.pay-network-badge {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  background: var(--red);
  color: #fff;
  vertical-align: 1px;
}
.pay-address-wrap {
  display: grid;
  grid-template-columns: 1fr auto;
  margin-top: 8px;
  border: 1px solid var(--border-default);
}
.pay-address {
  padding: 14px 16px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-on-light);
  overflow-x: auto;
  white-space: nowrap;
  user-select: all;
  letter-spacing: -0.01em;
}
.pay-copy {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 16px;
  background: var(--text-on-light);
  color: #fff;
  border: none;
  font-family: var(--font-sans);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color var(--d-snap);
}
.pay-copy:hover { background: var(--red); }
.pay-copy svg { width: 12px; height: 12px; }

/* QR */
.pay-qr-block {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--s-3);
  align-items: center;
  padding: var(--s-3);
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
}
.pay-qr {
  width: 180px;
  height: 180px;
  background: #fff;
  border: 1px solid var(--border-default);
  display: grid;
  place-items: center;
  padding: 8px;
}
.pay-qr img { display: block; max-width: 100%; height: auto; }
.pay-qr-hint {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
}

/* warning */
.pay-warning {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border: 1px solid var(--red);
  border-left-width: 3px;
  background: rgba(235, 35, 35, 0.04);
}
.pay-warning svg {
  width: 18px;
  height: 18px;
  color: var(--red);
  flex-shrink: 0;
  margin-top: 1px;
}
.pay-warning p {
  font-size: 12px;
  color: var(--text-on-light);
  line-height: 1.5;
}
.pay-warning strong { color: var(--red); font-weight: 700; }

.pay-confirm-btn {
  width: 100%;
}

.pay-fineprint {
  font-size: 11px;
  color: var(--text-muted);
  text-align: center;
  letter-spacing: 0.04em;
}

.dev-simulate-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  padding: 12px 18px;
  background: transparent;
  border: 1.5px dashed var(--red);
  color: var(--red);
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  cursor: pointer;
  margin-top: 6px;
  transition: background-color var(--d-snap), color var(--d-snap);
}
.dev-simulate-btn:hover:not(:disabled) {
  background: var(--red);
  color: #fff;
}
.dev-simulate-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.dev-simulate-btn svg { width: 14px; height: 14px; }

/* NP demo banner */
.np-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: rgba(235, 35, 35, 0.04);
  border: 1px solid var(--red);
  border-left-width: 3px;
  margin-bottom: var(--s-2);
}
.np-banner svg {
  width: 18px;
  height: 18px;
  color: var(--red);
  flex-shrink: 0;
  margin-top: 1px;
}
.np-banner p {
  font-size: 12px;
  color: var(--text-on-light);
  line-height: 1.5;
}
.np-banner strong { color: var(--red); font-weight: 700; }
.np-banner code {
  font-family: var(--font-mono);
  font-size: 11px;
  background: var(--bg-alt);
  padding: 1px 5px;
}

/* Info banner — direct-to-wallet messaging */
.np-info {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 16px;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-left: 3px solid var(--red);
  margin-bottom: var(--s-2);
}
.np-info svg {
  width: 18px;
  height: 18px;
  color: var(--red);
  flex-shrink: 0;
  margin-top: 1px;
}
.np-info p {
  font-size: 12px;
  color: var(--text-on-light);
  line-height: 1.5;
}
.np-info strong { color: var(--red); font-weight: 700; }
.np-info span.mono { color: var(--text-on-light); font-size: 11px; }

/* Highlight the unique amount — user MUST send exactly this */
.pay-amount-num {
  position: relative;
}
.pay-amount-block {
  position: relative;
}
.pay-amount-exact-flag {
  display: inline-block;
  margin-bottom: 6px;
  padding: 2px 8px;
  background: var(--red);
  color: #fff;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

/* status badge states */
.checkout-status.finished {
  background: var(--text-on-light);
  color: #fff;
  border-color: var(--text-on-light);
}
.checkout-status.finished .checkout-status-dot {
  background: #fff;
  animation: none;
}
.checkout-status.failed {
  border-color: var(--text-muted);
  color: var(--text-muted);
}
.checkout-status.failed .checkout-status-dot {
  background: var(--text-muted);
  animation: none;
}

/* success overlay */
.pay-overlay {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.85);
  z-index: 1000;
  display: grid;
  place-items: center;
  padding: 24px;
}
.pay-overlay[hidden] {
  display: none;
}
.pay-overlay-card {
  background: #fff;
  padding: var(--s-6) var(--s-5);
  text-align: center;
  max-width: 420px;
  width: 100%;
  border: 1px solid var(--border-default);
}
.pay-overlay-icon {
  width: 64px;
  height: 64px;
  margin: 0 auto var(--s-3);
  display: grid;
  place-items: center;
}
.pay-overlay-icon.success {
  background: var(--red);
  color: #fff;
}
.pay-overlay-icon svg { width: 32px; height: 32px; }
.pay-overlay-card h2 {
  font-family: var(--font-sans);
  font-size: 24px;
  font-weight: 800;
  letter-spacing: -0.025em;
  margin-bottom: 8px;
}
.pay-overlay-card p {
  font-size: 14px;
  color: var(--text-muted);
  margin-bottom: var(--s-3);
  line-height: 1.5;
}

@media (max-width: 640px) {
  .pay-qr-block { grid-template-columns: 1fr; text-align: center; }
  .pay-qr { margin: 0 auto; }
  .pay-method-toggle { grid-template-columns: 1fr; }
  .pay-method-btn:first-child { border-right: none; border-bottom: 1px solid var(--border-default); }
}

/* ---------- 33. DASHBOARD SUB-PAGES (profile, pricing) ---------- */

.dash-divider {
  height: 1px;
  background: var(--border-light);
  margin: var(--s-3) calc(var(--s-4) * -1);
}

.profile-form {
  margin-top: var(--s-3);
}

.profile-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-3);
}
@media (max-width: 768px) {
  .profile-grid { grid-template-columns: 1fr; }
}

.profile-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--s-2);
  margin-top: var(--s-4);
  padding-top: var(--s-3);
  border-top: 1px solid var(--border-light);
}
.profile-actions .btn { padding: 12px 22px; font-size: 12px; }

.profile-saved-flash {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--s-2);
  padding: 10px 14px;
  background: rgba(235, 35, 35, 0.06);
  border: 1px solid var(--red);
  border-left-width: 3px;
  font-size: 13px;
  font-weight: 600;
  color: var(--red);
}
.profile-saved-flash svg { width: 14px; height: 14px; }

.dash-pricing-inner {
  padding-top: var(--s-3);
}
.dash-pricing-inner .plan-solo { margin: 0 auto; }

/* ---------- 34. DASHBOARD ANALYTICS ---------- */

.dash-stats-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s-2);
}
@media (max-width: 1024px) { .dash-stats-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 540px)  { .dash-stats-grid { grid-template-columns: 1fr; } }

.dash-stat-card {
  background: #fff;
  border: 1px solid var(--border-light);
  padding: var(--s-3);
}
.dash-stat-label {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.14em;
  color: var(--text-muted);
  margin-bottom: 8px;
}
.dash-stat-value {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 32px;
  line-height: 1.05;
  letter-spacing: -0.035em;
  color: var(--text-on-light);
  font-feature-settings: 'tnum' on;
}
.dash-stat-value .suffix { font-size: 0.6em; color: var(--text-muted); }
.dash-stat-delta {
  font-size: 11px;
  font-weight: 600;
  margin-top: 8px;
  letter-spacing: 0.02em;
}
.dash-stat-delta.up { color: var(--red); }
.dash-stat-delta.neutral { color: var(--text-muted); }

.dash-chart {
  position: relative;
  margin-top: var(--s-2);
}
.dash-chart svg {
  width: 100%;
  height: 200px;
  display: block;
}
.dash-chart-x {
  display: flex;
  justify-content: space-between;
  padding-top: 8px;
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.dash-card-head {
  padding-bottom: var(--s-2);
  margin-bottom: var(--s-1);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  border-bottom: 1px solid var(--border-light);
  margin-left: calc(var(--s-4) * -1);
  margin-right: calc(var(--s-4) * -1);
  padding-left: var(--s-4);
  padding-right: var(--s-4);
}
.dash-card-head-title {
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--text-on-light);
}
.dash-card-head-sub {
  font-size: 11px;
  color: var(--text-muted);
}

.dash-perf-head, .dash-perf-row,
.dash-geo-head, .dash-geo-row {
  grid-template-columns: 1.5fr 0.7fr 0.7fr 0.7fr 0.7fr;
}

.dash-back-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  padding: 4px 0;
  transition: color var(--d-snap);
}
.dash-back-link:hover { color: var(--red); }
.dash-back-link svg { width: 14px; height: 14px; }

.dash-link-title {
  font-family: var(--font-mono) !important;
  font-size: 18px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
  font-style: normal !important;
  font-variation-settings: normal !important;
}
.dash-num {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-on-light);
  font-weight: 600;
  font-feature-settings: 'tnum' on;
}
.dash-num.accent { color: var(--red); font-weight: 700; }
.dash-geo {
  font-size: 12px;
  color: var(--text-muted);
  font-weight: 500;
}

/* ---------- 34b. DASHBOARD ANALYTICS — heatmap, funnel, tables ---------- */

.dash-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
@media (max-width: 1024px) { .dash-2col { grid-template-columns: 1fr; } }

/* heatmap */
.heatmap {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-top: var(--s-2);
}
.heatmap-hours,
.heatmap-row {
  display: grid;
  grid-template-columns: 40px repeat(12, 1fr);
  gap: 4px;
  align-items: center;
}
.heatmap-hours {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.05em;
  margin-bottom: 4px;
}
.heatmap-hours span {
  text-align: center;
}
.heatmap-day {
  font-family: var(--font-mono);
  font-size: 10px;
  color: var(--text-muted);
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.heatmap-row {
  grid-template-columns: 40px repeat(24, 1fr);
}
.heatmap-cell {
  aspect-ratio: 1;
  background: var(--bg-alt);
  cursor: default;
  transition: outline var(--d-snap) var(--ease-out);
  min-height: 18px;
}
.heatmap-cell:hover {
  outline: 1.5px solid var(--text-on-light);
  outline-offset: 1px;
}

.heatmap-legend {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: var(--s-2);
  padding-top: var(--s-2);
  border-top: 1px solid var(--border-light);
  font-size: 10px;
  color: var(--text-muted);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.heatmap-legend-cell {
  width: 14px;
  height: 14px;
  border: 1px solid var(--border-light);
}
.heatmap-peak {
  margin-left: auto;
  text-transform: none;
  letter-spacing: 0;
  font-size: 11px;
  color: var(--text-on-light);
}
.heatmap-peak strong {
  color: var(--red);
  font-weight: 700;
  margin-right: 4px;
}

/* conversion funnel */
.funnel {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: var(--s-2);
}
.funnel-stage {
  display: grid;
  grid-template-columns: 1fr 110px;
  gap: 14px;
  align-items: center;
}
.funnel-bar {
  background: var(--text-on-light);
  color: #fff;
  padding: 10px 14px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-width: 200px;
  transition: width var(--d-normal) var(--ease-out);
}
.funnel-bar.accent {
  background: var(--red);
}
.funnel-label {
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.01em;
}
.funnel-num {
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 700;
  font-feature-settings: 'tnum' on;
}
.funnel-pct {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--text-on-light);
  font-weight: 700;
  text-align: right;
}
.funnel-drop {
  display: inline-block;
  font-size: 10px;
  color: var(--red);
  margin-left: 4px;
  font-weight: 600;
}

.funnel-disclaimer {
  margin-top: var(--s-3);
  padding: 12px 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border-light);
  border-left: 2px solid var(--red);
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.funnel-disclaimer svg {
  color: var(--red);
  flex-shrink: 0;
  margin-top: 1px;
}
.funnel-disclaimer strong {
  color: var(--text-on-light);
  font-weight: 700;
}

/* table row variants */
.dash-geo-row-4, .dash-geo-head {
  grid-template-columns: 1.5fr 0.8fr 0.7fr 0.7fr;
}
.dash-ref-head, .dash-ref-row {
  grid-template-columns: 1.5fr 0.6fr 0.6fr;
}
.dash-shield-head, .dash-shield-row {
  grid-template-columns: 1.3fr 0.5fr 1fr;
}

/* ---------- 35. DASHBOARD CREATE FORM ---------- */

.create-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.create-section-head {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 16px;
  align-items: flex-start;
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--border-light);
  margin-bottom: var(--s-3);
}
.create-step-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
  color: var(--red);
  padding: 4px 8px;
  border: 1px solid var(--red);
  width: fit-content;
}
.create-section-h {
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  color: var(--text-on-light);
  line-height: 1.2;
}
.create-section-sub {
  font-size: 12px;
  color: var(--text-muted);
  margin-top: 4px;
  line-height: 1.45;
}

.create-section-body {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/* photo uploader */
.photo-uploader {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: var(--s-2);
  align-items: center;
}
.photo-preview {
  width: 80px;
  height: 80px;
  border: 1px solid var(--border-default);
  background: var(--bg-alt);
  display: grid;
  place-items: center;
  color: var(--text-muted);
  overflow: hidden;
}
.photo-preview svg { width: 32px; height: 32px; }
.photo-uploader-cta {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
}

/* social media list */
.social-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.social-row {
  display: grid;
  grid-template-columns: auto 1fr 40px;
  align-items: stretch;
}
.social-platform {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border-default);
  background: var(--bg-alt);
  padding: 10px 32px 10px 14px;
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-on-light);
  border-radius: 0;
  cursor: pointer;
  min-width: 160px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236a6a6a' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}
.social-row .field-input { padding: 10px 14px; font-size: 13px; }
.social-remove {
  width: 40px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-left: none;
  cursor: pointer;
  color: var(--text-muted);
  display: grid;
  place-items: center;
  transition: color var(--d-snap), background-color var(--d-snap);
}
.social-remove svg { width: 14px; height: 14px; }
.social-remove:hover {
  background: var(--red);
  border-color: var(--red);
  color: #fff;
}

.btn-add-social {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: transparent;
  border: 1px dashed var(--border-default);
  color: var(--text-muted);
  cursor: pointer;
  align-self: flex-start;
  margin-top: 4px;
  transition: color var(--d-snap), border-color var(--d-snap);
}
.btn-add-social:hover {
  color: var(--red);
  border-color: var(--red);
}
.btn-add-social svg { width: 12px; height: 12px; }

.optional-pill {
  display: inline-block;
  margin-left: 8px;
  padding: 2px 8px;
  font-family: var(--font-mono);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
  border: 1px solid var(--border-default);
  vertical-align: 2px;
}
.social-empty-hint {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 8px;
  padding: 8px 12px;
  background: var(--bg-alt);
  border: 1px dashed var(--border-light);
  letter-spacing: 0.02em;
}

/* geo filter rows */
.geo-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.geo-action-cell {
  display: flex;
  align-items: center;
  padding: 0 14px;
  background: var(--bg-alt);
  border: 1px solid var(--border-default);
  border-left: none;
  border-right: none;
}
.geo-action-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  color: var(--red);
}

/* ---------- 36. DASHBOARD CREATE (legacy wizard, unused) ---------- */

.dash-create-grid {
  display: grid;
  grid-template-columns: 260px 1fr;
  gap: var(--s-3);
}
@media (max-width: 900px) { .dash-create-grid { grid-template-columns: 1fr; } }

.dash-steps {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.dash-step {
  display: grid;
  grid-template-columns: 36px 1fr;
  gap: 12px;
  align-items: center;
  padding: 12px 14px;
  background: #fff;
  border: 1px solid var(--border-light);
  color: var(--text-muted);
  transition: border-color var(--d-snap), color var(--d-snap), background-color var(--d-snap);
}
.dash-step:hover { border-color: var(--text-muted); color: var(--text-on-light); }
.dash-step.active {
  border-color: var(--red);
  color: var(--text-on-light);
  background: #fff;
}
.dash-step.active .dash-step-icon { background: var(--red); color: #fff; }

.dash-step-icon {
  width: 36px;
  height: 36px;
  display: grid;
  place-items: center;
  background: var(--bg-alt);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}
.dash-step-icon svg { width: 18px; height: 18px; }

.dash-step-name {
  font-size: 13px;
  font-weight: 600;
  color: inherit;
  line-height: 1.2;
}
.dash-step-sub {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 2px;
}

.dash-create-main {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}
.dash-step-eyebrow {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--red);
  margin-bottom: 8px;
}
.dash-step-h {
  font-family: var(--font-sans);
  font-weight: 800;
  font-size: 22px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  color: var(--text-on-light);
}

/* mode select cards */
.mode-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-2);
}
@media (max-width: 640px) { .mode-grid { grid-template-columns: 1fr; } }

.mode-card {
  display: grid;
  grid-template-columns: 40px 1fr 16px;
  gap: 14px;
  align-items: center;
  padding: var(--s-3);
  border: 1px solid var(--border-light);
  background: #fff;
  cursor: pointer;
  transition: border-color var(--d-snap), background-color var(--d-snap);
  position: relative;
}
.mode-card input[type="radio"] { display: none; }
.mode-card:hover { border-color: var(--text-muted); }
.mode-card.selected {
  border-color: var(--red);
  background: rgba(235, 35, 35, 0.025);
}

.mode-icon {
  width: 40px; height: 40px;
  border: 1px solid var(--border-default);
  display: grid;
  place-items: center;
  color: var(--text-on-light);
}
.mode-card.selected .mode-icon {
  background: var(--red);
  color: #fff;
  border-color: var(--red);
}

.mode-title {
  font-size: 14px;
  font-weight: 700;
  color: var(--text-on-light);
  letter-spacing: -0.005em;
}
.mode-desc {
  font-size: 12px;
  color: var(--text-muted);
  line-height: 1.45;
  margin-top: 3px;
}

.mode-radio {
  width: 16px;
  height: 16px;
  border: 1.5px solid var(--border-default);
  border-radius: 50%;
  position: relative;
  flex-shrink: 0;
}
.mode-card.selected .mode-radio {
  border-color: var(--red);
}
.mode-card.selected .mode-radio::after {
  content: '';
  position: absolute;
  inset: 3px;
  background: var(--red);
  border-radius: 50%;
}

/* URL builder */
.url-builder {
  display: grid;
  grid-template-columns: auto 1fr;
}
.url-domain {
  appearance: none;
  -webkit-appearance: none;
  border: 1px solid var(--border-default);
  background: var(--bg-alt);
  padding: 13px 32px 13px 14px;
  font-family: var(--font-mono);
  font-size: 13px;
  font-weight: 600;
  color: var(--text-on-light);
  border-radius: 0;
  cursor: pointer;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%236a6a6a' stroke-width='2'%3E%3Cpath d='m4 6 4 4 4-4'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 12px;
}
.url-builder .field-input {
  border-left: none;
  font-family: var(--font-mono);
  font-weight: 600;
}

.field-hint {
  font-size: 11px;
  color: var(--text-muted);
  margin-top: 6px;
  letter-spacing: 0.02em;
}

.create-actions {
  display: flex;
  gap: 12px;
  justify-content: flex-end;
  align-items: center;
  padding: var(--s-3) var(--s-4);
  background: #fff;
  border: 1px solid var(--border-light);
}
.create-actions .btn { padding: 12px 22px; font-size: 12px; }

/* ---------- 36. SCROLL BAR ---------- */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: var(--bg-dark); }
::-webkit-scrollbar-thumb { background: var(--border-ink); }
::-webkit-scrollbar-thumb:hover { background: var(--red); }