/* ===========================================================================
   gCode design system — marketing pages (May 2026)
   Page-level components extracted from gcode_designs/home.html.
   Loaded after gcode-designs.css. Applies to home, /chariot, /forge,
   /bharat, /pricing, /docs, /changelog, /privacy, /terms, /about.
   =========================================================================== */

/* Top nav */
.topnav { position: sticky; top: 0; z-index: 30; backdrop-filter: blur(10px); background: color-mix(in oklab, var(--bg) 78%, transparent); border-bottom: 1px solid var(--rule); }
.topnav .row { max-width: 1280px; margin: 0 auto; padding: 14px 28px; display: flex; align-items: center; gap: 22px; }
.topnav nav { display: flex; gap: 22px; font-size: 12.5px; color: var(--ink-2); }
.topnav nav a:hover { color: var(--ink); }
.topnav .gap { flex: 1; }
.topnav .pill { font-size: 10.5px; }

/* HERO */
.hero { position: relative; padding: 80px 0 100px; overflow: hidden; border-bottom: 1px solid var(--rule); }
.hero::before {
  content: ""; position: absolute; inset: -10% -10% auto -10%; height: 80%;
  background:
    radial-gradient(50% 60% at 30% 20%, color-mix(in oklab, var(--acc) 14%, transparent) 0%, transparent 60%),
    radial-gradient(40% 70% at 80% 10%, color-mix(in oklab, var(--info) 10%, transparent) 0%, transparent 70%);
  pointer-events: none;
}
.hero::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(var(--rule) 1px, transparent 1px),
    linear-gradient(90deg, var(--rule) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: .25;
  mask-image: radial-gradient(50% 60% at 50% 30%, black, transparent 80%);
}
.hero .wrap { max-width: 1280px; margin: 0 auto; padding: 0 28px; position: relative; }
.hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; gap: 60px; align-items: center; }
.hero h1 {
  font-size: clamp(44px, 6vw, 78px);
  line-height: 1.02;
  letter-spacing: -0.035em;
  margin: 18px 0 22px;
  font-weight: 600;
  color: var(--ink);
}
.hero h1 em {
  font-family: var(--font-serif);
  font-style: italic;
  color: var(--acc);
  font-weight: 400;
  letter-spacing: -0.02em;
}
.hero .sub { font-size: 16px; color: var(--ink-2); max-width: 540px; line-height: 1.55; margin-bottom: 28px; }
.hero .cta-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.hero .cmd-install {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 9px 14px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 6px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-2);
}
.hero .cmd-install .dollar { color: var(--acc); }
.hero .cmd-install .copy { color: var(--muted); padding: 1px 4px; cursor: pointer; background: transparent; border: 0; }
.hero .cmd-install .copy:hover { color: var(--ink); }
.hero .platforms {
  display: flex; align-items: center; gap: 14px;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--muted);
  margin-top: 32px;
  padding-top: 22px;
  border-top: 1px dashed var(--rule);
  flex-wrap: wrap;
}
.hero .platforms span { color: var(--ink-2); }

/* Hero terminal mockup */
.demo {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 30px 60px -20px rgba(0,0,0,.6), 0 0 0 1px var(--rule);
  transform: rotate(-1.2deg);
  position: relative;
}
.demo::after {
  content: ""; position: absolute; inset: 0;
  border-radius: 12px;
  box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--acc) 12%, transparent);
  pointer-events: none;
}
.demo .chrome { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--rule); background: var(--bg-2); }
.demo .chrome .traffic { display: inline-flex; gap: 6px; }
.demo .chrome .traffic i { width: 11px; height: 11px; border-radius: 999px; display: inline-block; }
.demo .chrome .traffic i.r { background: #FF5F56; }
.demo .chrome .traffic i.y { background: #FFBD2E; }
.demo .chrome .traffic i.g { background: #27C93F; }
.demo .chrome .ttl { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.demo .body {
  padding: 20px 22px 22px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--ink-2);
  line-height: 1.7;
  min-height: 380px;
}
.demo .body .pr { color: var(--acc); }
.demo .body .me { color: var(--ink); }
.demo .body .cl { color: #FFB454; }
.demo .body .info { color: var(--info); }
.demo .body .acc { color: var(--acc); }
.demo .body .muted { color: var(--muted); }
.demo .body .row { display: block; }
.demo .body .tool {
  display: inline-block;
  background: var(--bg-3);
  border: 1px solid var(--rule);
  border-left: 2px solid var(--info);
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 11.5px;
  margin: 4px 0;
}
.demo .body .caret { display: inline-block; width: 8px; height: 14px; background: var(--acc); vertical-align: middle; animation: pulse-dot 1.1s ease-in-out infinite; }

@keyframes pulse-dot { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } }

/* SOCIAL PROOF */
.proof { padding: 36px 28px; border-bottom: 1px solid var(--rule); }
.proof .wrap { max-width: 1280px; margin: 0 auto; }
.proof .row {
  display: flex;
  align-items: center;
  gap: 36px;
  flex-wrap: wrap;
  justify-content: center;
}
.proof .lbl { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.proof .logo { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); letter-spacing: 0.04em; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 4px; }
.proof .logo b { color: var(--ink); font-weight: 600; }

/* SECTION container */
.sec { padding: 100px 28px; border-bottom: 1px solid var(--rule); position: relative; }
.sec .wrap { max-width: 1280px; margin: 0 auto; }
.sec h2 { font-size: clamp(34px, 4vw, 52px); letter-spacing: -0.03em; line-height: 1.05; margin: 14px 0 12px; font-weight: 600; max-width: 800px; }
.sec h2 em { font-family: var(--font-serif); font-style: italic; color: var(--acc); font-weight: 400; }
.sec .lede { color: var(--ink-2); font-size: 16px; max-width: 640px; line-height: 1.55; }

/* FEATURE — multi-agent style grid */
.f-multi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 60px; align-items: center; margin-top: 60px; }
.agent-board {
  background: var(--panel);
  border: 1px solid var(--rule);
  border-radius: 12px;
  padding: 18px;
  display: flex; flex-direction: column; gap: 10px;
}
.agent-row {
  display: grid; grid-template-columns: 30px 1fr auto; gap: 12px; align-items: center;
  padding: 12px 14px;
  background: var(--bg-2);
  border: 1px solid var(--rule);
  border-radius: 8px;
}
.agent-row.live { border-color: color-mix(in oklab, var(--acc) 30%, var(--rule)); box-shadow: 0 0 0 1px color-mix(in oklab, var(--acc) 12%, transparent); }
.agent-row .av { width: 30px; height: 30px; border-radius: 6px; display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; font-size: 11px; color: var(--bg); }
.agent-row .av.cl { background: linear-gradient(135deg, #FFB454, #FF7A4D); }
.agent-row .av.gp { background: linear-gradient(135deg, var(--info), #4D7AFF); }
.agent-row .av.cd { background: linear-gradient(135deg, var(--plum), var(--hot)); }
.agent-row .av.ll { background: linear-gradient(135deg, var(--acc), var(--acc-2)); color: var(--acc-ink); }
.agent-row .meta .who { font-size: 13px; color: var(--ink); }
.agent-row .meta .who b { font-weight: 500; }
.agent-row .meta .task { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }
.agent-row .meta .task .acc { color: var(--acc); }
.agent-row .stat { font-family: var(--font-mono); font-size: 11px; color: var(--muted); }
.agent-row .stat.run { color: var(--acc); }
.agent-row .stat.run::before { content: "● "; color: var(--acc); }

/* benefit list */
ul.blist { display: flex; flex-direction: column; gap: 18px; margin-top: 24px; padding: 0; }
ul.blist li { list-style: none; display: grid; grid-template-columns: 28px 1fr; gap: 14px; align-items: start; }
.blist .t { font-size: 16px; color: var(--ink); margin-bottom: 4px; font-weight: 500; }
.blist .d { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.blist .ic { width: 24px; height: 24px; border-radius: 5px; background: color-mix(in oklab, var(--acc) 18%, var(--bg-2)); color: var(--acc); display: grid; place-items: center; font-family: var(--font-mono); font-size: 12px; font-weight: 700; margin-top: 1px; }

/* FEATURE — three column */
.three { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 60px; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); }
.three .col { padding: 36px 30px; border-right: 1px solid var(--rule); }
.three .col:last-child { border-right: 0; }
.three .col .num { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--muted); }
.three .col h3 { margin: 14px 0 8px; font-size: 22px; letter-spacing: -0.015em; line-height: 1.15; font-weight: 500; }
.three .col h3 em { font-family: var(--font-serif); font-style: italic; color: var(--acc); font-weight: 400; }
.three .col p { color: var(--ink-2); font-size: 13.5px; line-height: 1.55; }
.three .col .badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; padding: 4px 10px; background: var(--bg-2); border: 1px solid var(--rule); border-radius: 999px; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-2); }

/* TESTIMONIALS */
.quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 60px; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; }
.quote { padding: 28px 26px; border-right: 1px solid var(--rule); background: var(--panel); display: flex; flex-direction: column; gap: 18px; }
.quote:last-child { border-right: 0; }
.quote .body { font-size: 16px; color: var(--ink); line-height: 1.45; letter-spacing: -0.005em; }
.quote .body em { font-family: var(--font-serif); font-style: italic; color: var(--acc); }
.quote .who { display: flex; align-items: center; gap: 12px; padding-top: 18px; border-top: 1px dashed var(--rule); }
.quote .av { width: 32px; height: 32px; border-radius: 5px; background: var(--rule-2); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; font-size: 11px; color: var(--ink); }
.quote .av.a { background: linear-gradient(135deg, var(--acc), var(--info)); color: var(--acc-ink); }
.quote .av.b { background: linear-gradient(135deg, var(--plum), var(--info)); color: white; }
.quote .av.c { background: linear-gradient(135deg, var(--warn), var(--hot)); color: white; }
.quote .who .name { font-size: 13px; color: var(--ink); }
.quote .who .role { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); }

/* PRICING preview */
.price-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 50px; border: 1px solid var(--rule); border-radius: 14px; overflow: hidden; background: var(--panel); }
.price { padding: 32px 28px; border-right: 1px solid var(--rule); display: flex; flex-direction: column; gap: 14px; position: relative; }
.price:last-child { border-right: 0; }
.price .nm { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); }
.price .amt { font-size: 42px; font-weight: 600; letter-spacing: -0.02em; }
.price .amt em { font-family: var(--font-serif); font-style: italic; color: var(--acc); font-weight: 400; }
.price .amt .per { font-size: 13px; color: var(--muted); font-weight: 400; }
.price .blurb { color: var(--ink-2); font-size: 13.5px; line-height: 1.5; }
.price ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; padding-top: 16px; border-top: 1px dashed var(--rule); }
.price ul li { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; font-size: 12.5px; color: var(--ink-2); }
.price ul li::before { content: "✓"; color: var(--acc); font-family: var(--font-mono); font-size: 12px; }
.price.hi { background: color-mix(in oklab, var(--acc) 6%, var(--panel)); }
.price.hi::before { content: "MOST USERS"; position: absolute; top: 14px; right: 14px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: 0.1em; color: var(--acc-ink); background: var(--acc); padding: 2px 7px; border-radius: 3px; }
.price .cta { margin-top: auto; padding-top: 18px; }

/* FINAL CTA */
.final {
  padding: 120px 28px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.final::before {
  content: ""; position: absolute; inset: 0;
  background:
    radial-gradient(40% 60% at 50% 50%, color-mix(in oklab, var(--acc) 10%, transparent), transparent 70%);
}
.final .wrap { max-width: 720px; margin: 0 auto; position: relative; }
.final h2 { font-size: clamp(40px, 5vw, 64px); font-weight: 600; letter-spacing: -0.03em; line-height: 1.05; margin: 18px 0 22px; }
.final h2 em { font-family: var(--font-serif); font-style: italic; color: var(--acc); font-weight: 400; }
.final p { color: var(--ink-2); font-size: 16px; max-width: 540px; margin: 0 auto 30px; line-height: 1.55; }

/* Footer */
footer.site-footer { padding: 60px 28px 36px; border-top: 1px solid var(--rule); }
footer.site-footer .wrap { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr 1fr; gap: 40px; }
footer.site-footer h4 { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 16px; font-weight: 500; }
footer.site-footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
footer.site-footer a { color: var(--ink-2); font-size: 13px; }
footer.site-footer a:hover { color: var(--ink); }
footer.site-footer .colophon { color: var(--muted); font-size: 12px; line-height: 1.55; max-width: 320px; margin-top: 16px; }
footer.site-footer .legal {
  max-width: 1280px; margin: 40px auto 0; padding-top: 24px;
  border-top: 1px solid var(--rule);
  display: flex; gap: 22px; align-items: center;
  font-family: var(--font-mono); font-size: 11px; color: var(--muted);
  flex-wrap: wrap;
}
footer.site-footer .legal .gap { flex: 1; }

/* Eyebrow inside marketing sections — small visual separation hint. */
.sec .eyebrow,
.hero .eyebrow,
.final .eyebrow { margin-bottom: 8px; }

/* Auth-aware CTA visibility helpers for SiteHeader.
   Server renders both states; client hides the wrong one once Clerk hydrates. */
.gv-auth-signed-in,
.gv-auth-signed-out { display: inline-flex; }

/* Responsive: collapse two-column hero, side-by-side grids on mobile. */
@media (max-width: 880px) {
  .topnav .row { gap: 12px; padding: 12px 18px; }
  .topnav nav { display: none; }
  .hero { padding: 56px 0 64px; }
  .hero-grid { grid-template-columns: 1fr; gap: 32px; }
  .demo { transform: none; }
  .sec { padding: 64px 18px; }
  .f-multi-grid { grid-template-columns: 1fr; gap: 32px; }
  .three { grid-template-columns: 1fr; }
  .three .col { border-right: 0; border-bottom: 1px solid var(--rule); }
  .three .col:last-child { border-bottom: 0; }
  .quotes { grid-template-columns: 1fr; }
  .quote { border-right: 0; border-bottom: 1px solid var(--rule); }
  .quote:last-child { border-bottom: 0; }
  .price-grid { grid-template-columns: 1fr; }
  .price { border-right: 0; border-bottom: 1px solid var(--rule); }
  .price:last-child { border-bottom: 0; }
  .final { padding: 72px 18px; }
  footer.site-footer { padding: 40px 18px 28px; }
  footer.site-footer .wrap { grid-template-columns: 1fr 1fr; }
  footer.site-footer .wrap > div:first-child { grid-column: 1 / -1; }
}