/* ============================================================
   c-ai.chat — Homepage redesign layer
   Trust strip, model/start grids (4→2→1), developer dark panel,
   component variety, section rhythm. Front page only.
   ============================================================ */

/* ---------- TRUST STRIP (slim the big disclosure card) ---------- */
.cai-disclosure{
  max-width:1240px; margin:14px auto 0; padding:11px 18px;
  background:var(--cai-surface-cool);
  border:1px solid color-mix(in srgb,var(--cai-accent) 22%,var(--cai-border));
  border-radius:var(--cai-radius-md);
  font-size:14.5px; line-height:1.55;
}
.cai-disclosure p{ margin:0; color:var(--cai-text); }
.cai-disclosure strong{ color:var(--cai-ink); }

/* ---------- MODEL CARDS: 4 → 2 → 1 (never orphan 3+1) ---------- */
.cai-model-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px;
}
@media (max-width:1024px){ .cai-model-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:560px){ .cai-model-grid{ grid-template-columns:1fr !important; } }
.cai-model-card{ border-radius:var(--cai-radius-md); min-width:0; }
.cai-model-card--flagship{ border-color:var(--cai-accent); }

/* ---------- START HERE: 4 → 2 → 1 ---------- */
.cai-start-grid{
  display:grid !important;
  grid-template-columns:repeat(4,minmax(0,1fr)) !important;
  gap:16px;
}
@media (max-width:1024px){ .cai-start-grid{ grid-template-columns:repeat(2,minmax(0,1fr)) !important; } }
@media (max-width:560px){ .cai-start-grid{ grid-template-columns:1fr !important; } }

/* ---------- COMPONENT VARIETY: break the 8 identical boxes ---------- */
/* Developer section → dark technical panel */
.cai-home-q:has(#claude-code-and-api){
  background:var(--cai-dark-panel);
  border:1px solid #1f2a3f;
  border-radius:var(--cai-radius-lg);
  padding:clamp(24px,4vw,40px);
  color:#E7ECF5;
}
.cai-home-q:has(#claude-code-and-api) .cai-section-h2,
.cai-home-q:has(#claude-code-and-api) h2,
.cai-home-q:has(#claude-code-and-api) strong{ color:#FFFFFF !important; }  /* !important: the heading carries an id, so a bare rule wasn't winning → dark-on-dark */
.cai-home-q:has(#claude-code-and-api) p{ color:#C5D0E0; }
/* links + kicker: --cai-accent-hover is a DARK teal in light mode → ~2.6:1 on
   the always-dark panel. Use a fixed bright cyan that clears AA in both modes. */
.cai-home-q:has(#claude-code-and-api) a{ color:#6CCFE3 !important; }
.cai-home-q:has(#claude-code-and-api) .cai-home-q__kicker{ color:#6CCFE3 !important; }
.cai-home-q:has(#claude-code-and-api) code{ font-family:var(--cai-font-mono); color:#E7ECF5 !important; background:rgba(255,255,255,.08); padding:2px 6px; border-radius:6px; }

/* Cowork → left-accent split feel */
.cai-home-q:has(#claude-cowork){
  border-left:4px solid var(--cai-accent);
  background:var(--cai-surface-warm);
}
/* Updates → lighter, timeline-ready */
.cai-home-q:has(#recent-updates){ background:transparent; border:0; padding-left:0; padding-right:0; }

/* Soften the default identical-box treatment (lighter than heavy borders everywhere) */
.cai-home-q{ border-radius:var(--cai-radius-lg); }

/* ---------- SECTION RHYTHM ---------- */
/* second selector: two homepage headings (#how-we-verify, #frequently-asked-questions)
   are DIRECT children of .entry-content, where `.wp-singular .entry-content > h2`
   (0,2,1) outranks the bare class — match it at 0,3,0 so ALL section headings
   share one scale */
.cai-section-h2,
.wp-singular .entry-content > .cai-section-h2{ font-size:clamp(26px,3vw,34px); line-height:1.18; letter-spacing:-.01em; }
.cai-section-sub{ color:var(--cai-muted); font-size:17px; }

/* prices / model IDs in mono */
.cai-model-card .cai-model-price,
.cai-model-card [class*="price"], .cai-model-card code{ font-family:var(--cai-font-mono); }

/* ============ SPLIT HERO + NAVIGATOR ============ */
/* Split hero + navigator (candidate) */
.cai-home-hero{
  display:grid !important; grid-template-columns:7fr 5fr; gap:clamp(32px,5vw,60px);
  align-items:center; max-width:1240px; margin:8px auto 0; padding:24px 0 8px;
}
.cai-hero-main{ min-width:0; }
.cai-home-eyebrow{ font-family:var(--cai-font-sans); font-weight:700; font-size:13px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--cai-accent); margin:0 0 12px; }
.cai-home-h1{ font-family:var(--cai-font-serif); font-weight:600; letter-spacing:-.02em;
  font-size:clamp(36px,4.6vw,58px); line-height:1.06; color:var(--cai-ink); margin:0 0 .38em; }
.cai-home-lede{ font-size:18px; line-height:1.62; color:var(--cai-text); max-width:60ch; margin:0 0 4px; }
.cai-home-cta-row{ display:flex; flex-wrap:wrap; gap:12px; margin:24px 0 18px; }
.cai-home-cta{ display:inline-flex; align-items:center; gap:8px; padding:12px 20px; min-height:48px;
  border-radius:var(--cai-radius-sm); font-weight:600; font-size:16px; text-decoration:none;
  border:1.5px solid transparent; transition:background .15s,border-color .15s,color .15s; }
.cai-home-cta--primary{ background:var(--cai-accent); color:#fff; }
.cai-home-cta--primary:hover{ background:var(--cai-accent-hover); color:#fff; }
/* In dark mode --cai-accent is a BRIGHT cyan; white text drops to ~2.4:1.
   Dark text on the accent clears AA (the ↗ .cai-cta-ext inherits this). */
[data-theme="dark"] .cai-home-cta--primary,
[data-theme="dark"] .cai-home-cta--primary:hover{ color:#08202A; }
.cai-home-cta--secondary{ background:transparent; color:var(--cai-accent); border-color:var(--cai-border-strong); }
.cai-home-cta--secondary:hover{ border-color:var(--cai-accent); background:var(--cai-accent-soft); }
.cai-cta-ext{ font-size:15px; }
.cai-home-byline{ font-size:14px; color:var(--cai-muted); margin:0; }
.cai-home-byline a{ color:var(--cai-accent); }

/* navigator card */
.cai-hero-nav{ position:relative; overflow:hidden; align-self:center;
  background:var(--cai-surface); border:1px solid var(--cai-border);
  border-radius:var(--cai-radius-lg); padding:22px 22px 18px; box-shadow:0 1px 3px rgba(16,24,39,.05); }
html[data-theme="dark"] .cai-hero-nav{ background:var(--cai-surface-warm); border-color:var(--cai-border); }
.cai-hero-nav__head{ display:flex; align-items:center; gap:9px; margin-bottom:14px; }
.cai-hero-nav__dot{ width:8px; height:8px; border-radius:50%; background:var(--cai-cyan); flex:0 0 auto; }
.cai-hero-nav__title{ font-family:var(--cai-font-sans); font-weight:700; font-size:12.5px;
  letter-spacing:.08em; text-transform:uppercase; color:var(--cai-muted); }
.cai-hero-nav__models{ list-style:none; margin:0 0 14px; padding:0; display:grid; gap:2px; }
.cai-hero-nav__models li{ display:grid; grid-template-columns:auto 1fr auto; align-items:baseline;
  gap:12px; padding:9px 10px; border-radius:8px; }
.cai-hero-nav__models li.is-default{ background:var(--cai-accent-soft); }
.cai-hero-nav__models .m-tier{ font-family:var(--cai-font-mono); font-size:12px; color:var(--cai-muted); }
.cai-hero-nav__models .m-name{ font-family:var(--cai-font-mono); font-weight:600; font-size:15px; color:var(--cai-ink); }
.cai-hero-nav__models .m-role{ font-family:var(--cai-font-sans); font-size:12.5px; color:var(--cai-muted); text-align:right; }
.cai-hero-nav__surfaces{ display:flex; flex-wrap:wrap; gap:6px; position:relative; z-index:1; }
.cai-hero-nav__surfaces span{ font-family:var(--cai-font-mono); font-size:11px; color:var(--cai-text);
  background:var(--cai-surface-warm); border:1px solid var(--cai-border); border-radius:999px; padding:3px 9px; }
html[data-theme="dark"] .cai-hero-nav__surfaces span{ background:var(--cai-surface-cool); }
.cai-hero-nav__motif{ position:absolute; right:-6px; bottom:-4px; width:118px; height:34px; color:var(--cai-cyan); opacity:.32; pointer-events:none; }

@media (max-width:900px){
  .cai-home-hero{ grid-template-columns:1fr; gap:26px; padding-top:8px; }
  .cai-home-lede{ max-width:none; }
  .cai-hero-nav{ order:2; }
}

.cai-hero-nav__models{list-style:none !important;}
.cai-hero-nav__models li::marker{content:none;}