/* Codexdot ChatGPT-only storefront
   A quiet membership desk: one green action, clear rows, no decorative metrics. */

:root {
  --codexdot-ink: #151a17;
  --codexdot-muted: #59635d;
  --codexdot-workbench: #f4f6f3;
  --codexdot-surface: #ffffff;
  --codexdot-line: #dce2dd;
  --codexdot-line-strong: #bfc9c2;
  --codexdot-green: #147a4b;
  --codexdot-green-dark: #0d5c38;
  --codexdot-green-soft: #e9f5ee;
  --codexdot-amber: #9a5b13;
  --codexdot-amber-soft: #fff4e5;
  --codexdot-max: 1180px;
  --codexdot-radius: 8px;
}

html:has(.codexdot-hero) { background: var(--codexdot-workbench); }

body:has(.codexdot-hero) {
  background: var(--codexdot-workbench);
  color: var(--codexdot-ink);
}

body:has(.codexdot-hero) .dispatch-nav {
  background: rgba(255, 255, 255, 0.98);
  border-bottom-color: var(--codexdot-line-strong);
}

body:has(.codexdot-hero) .nav-inner,
body:has(.codexdot-hero) .container { width: min(calc(100% - 48px), var(--codexdot-max)); }

body:has(.codexdot-hero) .nav-brand-copy b { color: var(--codexdot-ink); letter-spacing: 0; }
body:has(.codexdot-hero) .nav-link.is-active { color: var(--codexdot-green-dark); background: var(--codexdot-green-soft); }

.codexdot-hero {
  border-bottom: 1px solid var(--codexdot-line-strong);
  background: var(--codexdot-workbench);
}

.codexdot-hero-inner {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(340px, 0.88fr);
  gap: clamp(40px, 6vw, 88px);
  align-items: center;
  min-height: 0;
  padding-block: 82px 64px;
}

.codexdot-hero-copy { min-width: 0; max-width: 680px; }

.codexdot-member-index {
  min-width: 0;
  padding: 24px;
  border: 1px solid var(--codexdot-line-strong);
  border-radius: var(--codexdot-radius);
  background: var(--codexdot-surface);
}

.codexdot-member-index-heading { display: flex; align-items: end; justify-content: space-between; gap: 16px; }
.codexdot-member-index-heading h2 { margin: 8px 0 0; color: var(--codexdot-ink); font-size: 22px; line-height: 1.25; }
.codexdot-member-index-heading .text-action { flex: 0 0 auto; min-height: 44px; }
.codexdot-tier-list { margin: 20px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--codexdot-line-strong); }
.codexdot-tier-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 52px; border-bottom: 1px solid var(--codexdot-line); }
.codexdot-tier-row > span:first-child { min-width: 0; font-size: 15px; font-weight: 650; }
.codexdot-tier-state { flex: 0 0 auto; color: var(--codexdot-muted); font-size: 13px; }
.codexdot-tier-state.is-available { color: var(--codexdot-green-dark); font-weight: 700; }
.codexdot-tier-state.is-unavailable { color: var(--codexdot-amber); }
.codexdot-member-index-note { margin: 16px 0 0; color: var(--codexdot-muted); font-size: 12px; line-height: 1.65; }

.codexdot-kicker,
.codexdot-section-kicker {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--codexdot-green-dark);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.14em;
  line-height: 1.25;
}

.codexdot-kicker-mark {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--codexdot-green);
  box-shadow: 0 0 0 5px var(--codexdot-green-soft);
}

.codexdot-hero h1 {
  max-width: 18ch;
  margin: 22px 0 18px;
  color: var(--codexdot-ink);
  font-size: clamp(44px, 6vw, 76px);
  font-weight: 760;
  letter-spacing: -0.03em;
  line-height: 1.06;
  text-wrap: balance;
}

.codexdot-hero h1 em {
  display: block;
  color: var(--codexdot-green);
  font-style: normal;
}

.codexdot-hero-lead {
  max-width: 66ch;
  margin: 0;
  color: var(--codexdot-muted);
  font-size: 18px;
  line-height: 1.8;
  text-wrap: pretty;
  overflow-wrap: anywhere;
}

.codexdot-hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.codexdot-hero-actions .btn { min-height: 48px; }

.codexdot-hero-meta {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 760px;
  margin-top: 34px;
  border-top: 1px solid var(--codexdot-line-strong);
}

.codexdot-hero-meta span { min-width: 0; padding: 16px 18px 0 0; border-right: 1px solid var(--codexdot-line); }
.codexdot-hero-meta span + span { padding-left: 18px; }
.codexdot-hero-meta span:last-child { border-right: 0; }
.codexdot-hero-meta strong,
.codexdot-hero-meta small { display: block; }
.codexdot-hero-meta strong { color: var(--codexdot-ink); font-size: 16px; }
.codexdot-hero-meta small { margin-top: 5px; color: var(--codexdot-muted); font-size: 13px; line-height: 1.45; }
.codexdot-hero-meta small { overflow-wrap: anywhere; }

.codexdot-section { border-bottom: 1px solid var(--codexdot-line-strong); }
.codexdot-choice-section { padding-block: 72px 82px; background: var(--codexdot-surface); }
.codexdot-section-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, 0.62fr); gap: 36px; align-items: end; margin-bottom: 38px; }
.codexdot-section-heading h2,
.codexdot-rules-layout h2,
.codexdot-faq-layout h2 { max-width: 18ch; margin: 12px 0 0; color: var(--codexdot-ink); font-size: clamp(30px, 4vw, 48px); font-weight: 740; letter-spacing: -0.025em; line-height: 1.1; text-wrap: balance; }
.codexdot-section-heading > p,
.codexdot-rules-layout > div:first-child > p,
.codexdot-faq-layout > div:first-child > p { margin: 0; color: var(--codexdot-muted); font-size: 16px; line-height: 1.75; text-wrap: pretty; }

.codexdot-choice-list { border-top: 1px solid var(--codexdot-line-strong); }
.codexdot-choice-row { display: grid; grid-template-columns: 48px minmax(0, 1fr) 140px max-content; gap: 22px; align-items: center; min-height: 126px; padding: 22px 10px; border-bottom: 1px solid var(--codexdot-line); }
.codexdot-choice-row:hover { background: var(--codexdot-workbench); }
.codexdot-choice-row .btn:focus-visible { outline: 3px solid rgba(20, 122, 75, 0.32); outline-offset: 3px; }
.codexdot-choice-copy { min-width: 0; }
.codexdot-choice-number { color: var(--codexdot-green); font: 700 13px/1 SFMono-Regular, Consolas, monospace; }
.codexdot-choice-copy h3 { margin: 0; font-size: 20px; }
.codexdot-choice-copy p { max-width: 55ch; margin: 8px 0 0; color: var(--codexdot-muted); font-size: 14px; line-height: 1.6; }
.codexdot-choice-result span,
.codexdot-choice-result strong { display: block; }
.codexdot-choice-result span { color: var(--codexdot-muted); font-size: 12px; }
.codexdot-choice-result strong { margin-top: 4px; color: var(--codexdot-green-dark); font-size: 15px; }
.codexdot-choice-row .btn { min-height: 44px; white-space: nowrap; }

.codexdot-catalog-section { padding-block: 88px 96px; background: var(--codexdot-workbench); }
.codexdot-section-heading-catalog { margin-bottom: 26px; }
.codexdot-live-catalog { min-height: 180px; }
.codexdot-live-catalog .catalog-empty { border-color: var(--codexdot-line-strong); background: var(--codexdot-surface); }

.codexdot-rules-section { padding-block: 86px; background: var(--codexdot-workbench); }
.codexdot-rules-layout { display: grid; grid-template-columns: minmax(0, 0.75fr) minmax(0, 1fr); gap: clamp(42px, 8vw, 128px); align-items: start; }
.codexdot-rules-layout h2 { max-width: 13ch; }
.codexdot-rules-layout > div:first-child > p { max-width: 32ch; margin-top: 18px; }
.codexdot-rules-list { border-top: 1px solid var(--codexdot-line-strong); }
.codexdot-rule-row { display: grid; grid-template-columns: 28px minmax(0, 1fr); gap: 14px; padding: 21px 0; border-bottom: 1px solid var(--codexdot-line); }
.codexdot-rule-row > span { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; color: var(--codexdot-green-dark); border: 1px solid #9fcbb1; border-radius: 50%; background: var(--codexdot-green-soft); }
.codexdot-rule-row strong { font-size: 16px; }
.codexdot-rule-row p { max-width: 60ch; margin: 5px 0 0; color: var(--codexdot-muted); font-size: 14px; line-height: 1.65; }

.codexdot-faq-section { padding-block: 88px 94px; background: var(--codexdot-surface); }
.codexdot-faq-layout { display: grid; grid-template-columns: minmax(0, 0.64fr) minmax(0, 1fr); gap: clamp(42px, 9vw, 144px); align-items: start; }
.codexdot-faq-layout h2 { max-width: 13ch; }
.codexdot-faq-layout > div:first-child > p { max-width: 32ch; margin-top: 18px; }
.codexdot-faq-actions { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 26px; }
.codexdot-faq-list { border-top: 1px solid var(--codexdot-line-strong); }
.codexdot-faq-list .faq-item { border-bottom-color: var(--codexdot-line); }

@media (max-width: 900px) {
  body:has(.codexdot-hero) .nav-inner,
  body:has(.codexdot-hero) .container { width: min(calc(100% - 36px), var(--codexdot-max)); }
  .codexdot-hero-inner { grid-template-columns: minmax(0, 1.04fr) minmax(295px, 0.96fr); gap: 28px; padding-block: 64px 58px; }
  .codexdot-hero-copy { max-width: none; }
  .codexdot-member-index { width: 100%; }
  .codexdot-rules-layout,
  .codexdot-faq-layout { grid-template-columns: 1fr; gap: 42px; }
  .codexdot-rules-layout h2,
  .codexdot-faq-layout h2 { max-width: 18ch; }
}

@media (max-width: 740px) {
  .codexdot-hero-inner { grid-template-columns: minmax(0, 1fr); gap: 34px; padding-block: 50px 46px; }
  .codexdot-hero-copy { max-width: 760px; }
}

@media (max-width: 640px) {
  body:has(.codexdot-hero) { overflow-x: clip; }
  body:has(.codexdot-hero) .dispatch-nav .nav-inner { width: calc(100% - 20px); gap: 6px; }
  body:has(.codexdot-hero) .dispatch-nav .nav-logo { min-width: 0; flex: 1 1 auto; }
  body:has(.codexdot-hero) .dispatch-nav .nav-brand-copy b { font-size: 15px; white-space: nowrap; }
  body:has(.codexdot-hero) .dispatch-nav .nav-right { flex: 0 0 auto; }
  body:has(.codexdot-hero) .dispatch-nav .nav-right .btn-dark { padding-inline: 10px; font-size: 12px; }
  body:has(.codexdot-hero) .nav-inner,
  body:has(.codexdot-hero) .container { width: min(calc(100% - 28px), var(--codexdot-max)); }
  .codexdot-hero-inner { padding-block: 42px 40px; gap: 34px; }
  .codexdot-hero-inner > * { min-width: 0; max-width: 100%; }
  .codexdot-hero h1 { max-width: 11ch; margin-top: 18px; font-size: clamp(40px, 13vw, 58px); }
  .codexdot-hero-lead { width: 100%; max-width: 100%; font-size: 16px; line-height: 1.7; white-space: normal; word-break: break-all; }
  .codexdot-hero-actions { display: grid; grid-template-columns: 1fr; margin-top: 24px; }
  .codexdot-hero-actions .btn { width: 100%; }
  .codexdot-hero-meta { width: 100%; max-width: 100%; margin-top: 38px; }
  .codexdot-hero-meta span { padding-top: 13px; padding-right: 9px; }
  .codexdot-hero-meta span + span { padding-left: 9px; }
  .codexdot-hero-meta strong { font-size: 14px; }
  .codexdot-hero-meta small { font-size: 12px; }
  .codexdot-member-index { padding: 18px; }
  .codexdot-member-index-heading { align-items: center; }
  .codexdot-member-index-heading h2 { font-size: 20px; }
  .codexdot-tier-row { min-height: 48px; }
  .codexdot-tier-row > span:first-child { font-size: 14px; }
  .codexdot-choice-section,
  .codexdot-catalog-section,
  .codexdot-rules-section,
  .codexdot-faq-section { padding-block: 58px 62px; }
  .codexdot-section-heading { grid-template-columns: 1fr; gap: 14px; margin-bottom: 28px; }
  .codexdot-section-heading h2,
  .codexdot-rules-layout h2,
  .codexdot-faq-layout h2 { max-width: 12ch; font-size: 32px; }
  .codexdot-section-heading > p { font-size: 15px; }
  .codexdot-choice-row { grid-template-columns: 32px minmax(0, 1fr); gap: 12px; min-height: 0; padding: 22px 0; }
  .codexdot-choice-copy h3 { font-size: 18px; }
  .codexdot-choice-result { grid-column: 2; }
  .codexdot-choice-row .btn { grid-column: 2; justify-self: start; }
}