/* ═══════════════════════════════════════════════════════════════
   IC marketing — variation add-ons.
   Extends assets/site.css with components specific to the three
   new landing-page directions (split hero, product device frame,
   numbered stepper, ledger table, index rail, KPI tiles).
   Load AFTER site.css.
   ═══════════════════════════════════════════════════════════════ */

/* ── brand logo image (nav + footer) ── */
.ic-logo { display: block; object-fit: contain; flex: 0 0 auto; }
.footer .brand-col .ic-logo { width: 34px; height: 34px; }

/* ── device frame: product UI on a panel ── */
.device {
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--rule);
  box-shadow: 0 30px 60px -24px rgba(0,0,0,0.45), 0 4px 14px rgba(0,0,0,0.18);
}
.device .bar {
  display: flex; align-items: center; gap: 7px;
  padding: 11px 14px;
  background: var(--paper-2);
  border-bottom: 1px solid var(--rule);
}
.device .bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--rule); display: block; }
.device .bar .addr {
  margin-left: 10px; font-family: 'Geist Mono', monospace; font-size: 10px;
  letter-spacing: 0.1em; color: var(--muted); text-transform: lowercase;
}
.device img { width: 100%; display: block; }

/* ── KPI tiles (small product stat chips) ── */
.kpi { border: 1px solid var(--rule); border-radius: 6px; padding: 18px 20px; background: var(--card); }
.kpi .k { font-family: 'Geist Mono', monospace; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.kpi .v { font-family: 'Newsreader', serif; font-weight: 300; font-size: 40px; line-height: 1; letter-spacing: -0.03em; color: var(--brand); margin-top: 8px; }
.kpi.on-dark { border-color: rgba(244,241,234,0.16); background: rgba(244,241,234,0.04); }
.kpi.on-dark .k { color: rgba(244,241,234,0.6); }

/* ── numbered stepper (horizontal how-it-works) ── */
.stepper { display: grid; gap: 0; grid-template-columns: repeat(3, 1fr); }
.step { padding: 36px 36px 36px 0; border-top: 2px solid var(--ink); position: relative; }
.step + .step { padding-left: 36px; }
.step .sn { font-family: 'Newsreader', serif; font-weight: 300; font-size: 56px; line-height: 1; letter-spacing: -0.04em; color: var(--brand); }
.step h3 { font-family: 'Newsreader', serif; font-size: 26px; line-height: 1.1; margin: 18px 0 10px; }
.step p { font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0; }
@media (max-width: 820px) {
  .stepper { grid-template-columns: 1fr; }
  .step, .step + .step { padding: 28px 0; }
}

/* ── ledger table (variation C) ── */
.ledger { width: 100%; border-collapse: collapse; }
.ledger th {
  text-align: left; padding: 14px 16px;
  font-family: 'Geist Mono', monospace; font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--muted); font-weight: 500;
  border-bottom: 2px solid var(--ink);
}
.ledger th.num-col, .ledger td.num-col { text-align: right; width: 1%; white-space: nowrap; }
.ledger td { padding: 22px 16px; border-bottom: 1px solid var(--rule); vertical-align: top; }
.ledger tr:hover td { background: rgba(0,127,97,0.03); }
.ledger .lx { font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.12em; color: var(--brand); }
.ledger .lt { font-family: 'Newsreader', serif; font-size: 26px; line-height: 1.05; letter-spacing: -0.02em; }
.ledger .ld { font-size: 14px; line-height: 1.6; color: var(--muted); margin-top: 8px; max-width: 540px; }
.ledger .lnum { font-family: 'Newsreader', serif; font-weight: 300; font-size: 34px; letter-spacing: -0.03em; color: var(--brand); }

/* ── index rail (variation C hero) ── */
.index-grid { display: grid; grid-template-columns: 320px 1fr; gap: 80px; align-items: start; }
.idx-list { list-style: none; margin: 0; padding: 0; }
.idx-list li { display: flex; justify-content: space-between; gap: 16px; padding: 14px 0; border-top: 1px solid var(--rule); font-size: 14px; }
.idx-list li:last-child { border-bottom: 1px solid var(--rule); }
.idx-list .lbl { color: var(--ink-2); }
.idx-list .pg { font-family: 'Geist Mono', monospace; font-size: 12px; color: var(--muted); }
@media (max-width: 1100px) { .index-grid { grid-template-columns: 1fr; gap: 40px; } }

/* ── vertical rule between hero columns (variation B) ── */
.split-hero { display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 0; align-items: stretch; }
.split-hero .left { padding: 80px var(--pad) 80px 0; }
.split-hero .right { padding: 64px 0 64px var(--pad); border-left: 1px solid var(--rule); position: relative; }
@media (max-width: 1100px) {
  .split-hero { grid-template-columns: 1fr; }
  .split-hero .left { padding: 56px 0 40px; }
  .split-hero .right { padding: 40px 0; border-left: 0; border-top: 1px solid var(--rule); }
}

/* ── checklist (shared) ── */
.checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.checklist li { display: flex; align-items: flex-start; gap: 12px; font-size: 15px; line-height: 1.5; }
.checklist .ck {
  flex: 0 0 auto; width: 20px; height: 20px; border: 1.5px solid var(--brand);
  color: var(--brand); display: grid; place-items: center; font-size: 11px; margin-top: 1px;
}
.dark .checklist .ck { border-color: var(--brand); }

/* ── logo/proof strip ── */
.proof-strip { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 40px; }
.proof-strip .pl {
  font-family: 'Geist Mono', monospace; font-size: 12px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--muted-2);
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE
   Overrides the design tokens + the few components that hardcode
   light values. Activated by <html data-theme="dark">.
   ═══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --paper:   #0F1512;
  --paper-2: #161D19;
  --card:    #161D19;
  --ink:     #F1EEE6;
  --ink-2:   #CDD3CC;
  --muted:   #9FB0A9;
  --muted-2: #7E8F88;
  --brand:   #36AD8C;
  --brand-d: #2C9276;
  --brand-l: #16241E;
  --rule:    rgba(241,238,230,0.16);
  --rule-2:  rgba(241,238,230,0.08);
}

/* nav: dark translucent instead of paper translucent */
[data-theme="dark"] .nav { background: rgba(15,21,18,0.86); }

/* final CTA stays intentionally dark (don't let inverted --ink flip it) */
[data-theme="dark"] .dark { background: #080B09; color: var(--ink); }
[data-theme="dark"] .dark h1,
[data-theme="dark"] .dark h2,
[data-theme="dark"] .dark h3 { color: var(--ink); }
[data-theme="dark"] .dark .muted { color: rgba(241,238,230,0.72); }
[data-theme="dark"] .dark .eyebrow { color: var(--brand); }
/* the CTA form card reads as a raised surface */
[data-theme="dark"] .dark .card { background: var(--card); }

/* theme toggle button (injected into the nav by chrome.js) */
.theme-toggle {
  display: inline-grid; place-items: center;
  width: 38px; height: 38px; padding: 0;
  background: transparent; border: 1px solid var(--rule); border-radius: 4px;
  color: var(--ink-2); cursor: pointer;
  transition: color 140ms ease, border-color 140ms ease;
}
.theme-toggle:hover { color: var(--brand); border-color: var(--brand); }
.theme-toggle svg { width: 18px; height: 18px; display: block; }
.theme-toggle .ic-sun { display: none; }
[data-theme="dark"] .theme-toggle .ic-moon { display: none; }
[data-theme="dark"] .theme-toggle .ic-sun { display: block; }

/* ═══════════════════════════════════════════════════════════════
   MOBILE NAV (hamburger)
   ═══════════════════════════════════════════════════════════════ */
.nav-toggle {
  display: none;
  width: 38px; height: 38px; padding: 0;
  background: transparent; border: 1px solid var(--rule); border-radius: 4px;
  color: var(--ink-2); cursor: pointer; place-items: center;
}
.nav-toggle svg { width: 20px; height: 20px; display: block; }
.nav-toggle .ic-close { display: none; }
.nav.open .nav-toggle .ic-burger { display: none; }
.nav.open .nav-toggle .ic-close { display: block; }

.nav-mobile { display: none; }

@media (max-width: 860px) {
  .nav .nav-links { display: none; }
  .nav .nav-actions .login { display: none; }
  .nav .nav-actions .btn-sm { display: none; }
  .nav-toggle { display: inline-grid; }

  .nav-mobile {
    display: none;
    flex-direction: column;
    gap: 4px;
    padding: 16px var(--pad) 24px;
    border-top: 1px solid var(--rule);
    background: var(--paper);
  }
  .nav.open .nav-mobile { display: flex; }
  .nav-mobile a {
    font-family: 'Geist', sans-serif; font-size: 17px; color: var(--ink);
    text-decoration: none; padding: 12px 0; border-bottom: 1px solid var(--rule-2, rgba(20,27,23,0.08));
  }
  .nav-mobile a:last-of-type { border-bottom: 0; }
  .nav-mobile a:hover { color: var(--brand); }
  .nav-mobile .btn { font-size: 15px; border-bottom: 0; }
}

/* ═══════════════════════════════════════════════════════════════
   MOBILE OVERFLOW FIXES
   The home page sets its display type (hero 112px, section heads
   56–88px) and the "case" section's fixed 340px column via INLINE
   styles, which the base breakpoints in site.css can't reach. These
   rules scale that type fluidly and stack the fixed grid so nothing
   pushes past the viewport (horizontal scroll) on phones/tablets.
   !important is required to win over the inline styles.
   ═══════════════════════════════════════════════════════════════ */
@media (max-width: 1100px) {
  body[data-page="home"] h1 { font-size: clamp(40px, 8.6vw, 96px) !important; }
}
@media (max-width: 820px) {
  body[data-page="home"] h1 { font-size: clamp(32px, 9vw, 60px) !important; line-height: 1.05 !important; }
  body[data-page="home"] h2 { font-size: clamp(27px, 7vw, 44px) !important; line-height: 1.08 !important; }
  body[data-page="home"] h3 { font-size: clamp(20px, 5vw, 26px) !important; }

  /* "The case" uses an inline 340px + 1fr grid — stack it on mobile */
  #case > .grid { grid-template-columns: 1fr !important; gap: 28px !important; }

  /* section header (big h2 + nowrap "§ 0X" reference) — stack, don't collide */
  .sec-head { flex-direction: column; align-items: flex-start; gap: 12px; margin-bottom: 32px; }
}