/* ============================================================
   Yellow Robots — /capabilities page layer (it-5 slice D, #45;
   re-cut it-8 slice I, #129 — single column, theme-split cards, live
   hover, real-italic quote block)
   Builds on site.css (tokens · reset · surfaces · .yr-eyebrow · .btn).
   The card surface now theme-splits (translucent dark / paper cream), so
   `.yr-cream` twins + the no-JS `@media (prefers-color-scheme: light)`
   mirror live HERE (not appended to site.css — that file's light block is
   census-scanned end-of-file by other suites); selectors scoped under .cp
   so text colours beat the theme's descendant rules.
   ============================================================ */

.cp{ padding-top:clamp(28px,6vw,56px); padding-bottom:clamp(56px,9vw,104px); }
.cp .cp__inner > * + *{ margin-top:var(--yr-sp-8); }

/* ---- header ---- */
.cp .cp-head > * + *{ margin-top:var(--yr-sp-3); }
.cp .cp-title{ font-size:clamp(30px,5vw,42px); max-width:24ch; }
.cp .cp-lead{ font-size:clamp(17px,2vw,20px); font-weight:500; max-width:52ch; }

/* ---- the three jobs-to-be-done, as theme-split cards ---- */
/* margin-top deliberately absent: `.cp .cp__inner > * + *` above is the SAME
   specificity (0,2,0) and would lose to a `margin:0` shorthand here on source
   order alone, zeroing the intended gap above the cards — that was the bug.
   Only reset the side the UA ul default actually sets besides top. Single
   column at every width is the ruled anti-pattern check (#129): no
   multi-column desktop grid for this surface, ever. */
.cp .cp-cards{ list-style:none; margin-bottom:0; padding:0; display:grid;
  grid-template-columns:1fr; gap:var(--yr-sp-5); }
.cp .cp-card{ background:rgba(255,255,255,.045); color:var(--yr-glow-white);
  border:1px solid rgba(252,199,43,.14); border-radius:var(--yr-radius-xl);
  padding:clamp(20px,3vw,30px); transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease; }
.cp .cp-card:hover{ border-color:rgba(252,199,43,.35); box-shadow:var(--yr-shadow-md);
  transform:translateY(-2px); }
.cp .cp-card > * + *{ margin-top:var(--yr-sp-3); }
.cp .cp-card__icon{ display:inline-flex; width:34px; height:34px;
  align-items:center; justify-content:center; border-radius:10px;
  background:rgba(252,199,43,.15); color:var(--yr-gold); }
.cp .cp-card__icon svg{ width:24px; height:24px; }
.cp .cp-card__name{ font-family:var(--yr-font-heading); font-weight:700;
  font-size:15px; white-space:nowrap; color:var(--yr-glow-white); }
/* No font-family override: the vendored real italic face is Urbanist
   (--yr-font-body, inherited from body), same recipe as blog.css's
   `.chime__body` — the italic face's weight axis is 600-800, so 500
   resolves to its nearest real weight rather than a synthesized one. */
.cp .cp-card__problem{ font-style:italic; font-weight:500; font-size:18px;
  line-height:1.55; color:var(--yr-sun);
  border-left:3px solid var(--yr-gold); padding:14px; }
.cp .cp-card__solution{ font-weight:500; font-size:15.5px; line-height:1.62;
  color:var(--yr-glow-white); }

/* ---- the signup path ---- */
.cp .cp-cta{ text-align:center; }

/* ---- cream surface (it-8 slice I, #129): keep these twins in lockstep
   with each other and with the :root:not([data-theme]) mirror below. ---- */
.yr-cream .cp .cp-card{ background:var(--yr-paper); color:var(--yr-ink);
  border-color:var(--yr-cream-2); box-shadow:var(--yr-shadow-sm); }
.yr-cream .cp .cp-card:hover{ border-color:rgba(252,199,43,.35); box-shadow:var(--yr-shadow-md);
  transform:translateY(-2px); }
.yr-cream .cp .cp-card__icon{ background:#FFF3D0; color:var(--yr-ember); }
.yr-cream .cp .cp-card__name{ color:var(--yr-ink); }
.yr-cream .cp .cp-card__problem{ color:var(--yr-ink); }
.yr-cream .cp .cp-card__solution{ color:var(--yr-ink); }

/* ---- no-choice system-light fallback (the no-JS path) — mirror of the
   .yr-cream twins above, scoped :root:not([data-theme]) so an EXPLICIT dark
   choice is never overridden on a light-preference device (model:
   site.css's own no-JS light block). No `.cp-cards` rule below carries a
   `margin`/`margin-top` — the cascade-trap pin above binds this mirror too. ---- */
@media (prefers-color-scheme: light){
  :root:not([data-theme]) .cp .cp-card{ background:var(--yr-paper); color:var(--yr-ink);
    border-color:var(--yr-cream-2); box-shadow:var(--yr-shadow-sm); }
  :root:not([data-theme]) .cp .cp-card:hover{ border-color:rgba(252,199,43,.35); box-shadow:var(--yr-shadow-md);
    transform:translateY(-2px); }
  :root:not([data-theme]) .cp .cp-card__icon{ background:#FFF3D0; color:var(--yr-ember); }
  :root:not([data-theme]) .cp .cp-card__name{ color:var(--yr-ink); }
  :root:not([data-theme]) .cp .cp-card__problem{ color:var(--yr-ink); }
  :root:not([data-theme]) .cp .cp-card__solution{ color:var(--yr-ink); }
}