/* ============================================================
   BLUEGREY — home.css (rich pages: home, marketplace, product,
   dashboards). Loaded after base.css, which imports the tokens.
   Every value resolves to a token.

   NEW in this pass: full-bleed ZONES (.band / .band--paper) so
   the site alternates carbon (textured) and paper (clean) bands
   instead of being blue everywhere. The paper band simply re-maps
   the semantic colour tokens, so every component inside it
   (cards, buttons, chips, labels) recolours automatically.
   ============================================================ */

/* ---- page wrapper (replaces main.container on rich pages) ---- */
.stack { min-height: 60vh; }

/* ============================================================
   ZONES — full-bleed bands
   ============================================================ */
.band { position: relative; padding-block: var(--space-9); }
.band > .container { position: relative; }
.band--tight { padding-block: var(--space-7); }

/* hero band (home): give it presence. The header is a fixed bar out of
   flow, so every hero pads down by --header-h to compensate. */
.band--hero { display: flex; align-items: center; min-height: 68vh; padding-block: calc(var(--space-9) + var(--space-5) + var(--header-h)) var(--space-9); }
.band--hero > .container { width: 100%; display: grid; gap: var(--space-5); }
/* inner-page hero: shorter, no min-height */
.band--sub { display: block; min-height: 0; padding-block: calc(var(--space-9) + var(--header-h)) var(--space-7); }

/* PAPER ZONE — opaque day surface that covers the carbon page-fx,
   and remaps the colour tokens so children render dark-on-paper. */
.band--paper {
  background: var(--paper);
  --color-page: var(--paper);
  --color-surface: #ffffff;
  --color-surface-raised: #ECE6D9;
  --color-text: #14181D;
  --color-text-secondary: #5C574F;
  --color-text-muted: #837C72;
  --color-text-hi: #14181D;         /* headings on paper are near-black, full strength */
  --color-accent: #455a6d;          /* darker slate — readable on paper */
  --color-accent-bright: var(--blue-paper);   /* Option B blue, deepened for paper */
  --color-accent-fill: rgba(36, 92, 158, .07);
  --color-focus: var(--blue-paper);
  --color-border: rgba(20, 24, 29, .14);
  --color-border-strong: rgba(20, 24, 29, .22);
  --color-border-bright: rgba(36, 92, 158, .45);
  --color-muted-fill: rgba(20, 24, 29, .05);
  --blue-glow: rgba(36, 92, 158, .22);
  --blue-glow-strong: rgba(36, 92, 158, .30);
  --shadow-card-hover: 0 8px 24px -14px rgba(20, 24, 29, .35);
  /* card faces go light on paper (same shapes, day tiles) */
  --viz-bg1: #E7EDF4;
  --viz-bg2: #E4E9EE;
  --viz-bg3: #EFEAE0;
  --viz-shape: rgba(102, 121, 140, .60);
  --viz-shape-blue: rgba(36, 92, 158, .55);
  --viz-shape-soft: rgba(110, 104, 98, .35);
  --spot-glow: rgba(36, 92, 158, .08);
  /* §13 light-mode showcase: a faint darkened-slate halo, not a glow */
  --showcase-glow: rgba(20, 24, 29, .10);
  color: var(--color-text);
}
/* soft hairline seam where a paper band meets carbon */
.band--paper { box-shadow: inset 0 1px 0 rgba(255,255,255,.5), inset 0 -1px 0 rgba(20,24,29,.06); }

/* CARDS: border-in-dark, FILL-IN-PAPER (Brand Pack §10). On carbon a card is
   a hairline border one step off the page; on paper it gains a barely-there
   resting shadow so the fill lifts off the page. */
.band--paper .card,
.band--paper .feature,
.band--paper .usecase { box-shadow: var(--shadow-card-rest); }

/* ---- hero type ---- */
.hero__title {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: clamp(var(--text-2xl), 8vw, var(--text-4xl));
  line-height: var(--leading-tight); letter-spacing: var(--tracking-tight);
  color: var(--color-text-hi);
  max-width: 16ch;
}
.hero__lead {
  font-size: var(--text-md); color: var(--color-text-secondary);
  max-width: var(--maxw-prose);
}
.hero__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }

/* ---- shared lead paragraphs ---- */
.page-lead { font-size: var(--text-md); color: var(--color-text-secondary); max-width: var(--maxw-prose); }
.page-lead a { color: var(--color-accent-bright); transition: var(--transition-colors); }
.page-lead a:hover { color: var(--color-text); }
.track-lead { font-size: var(--text-md); color: var(--color-text-secondary); max-width: var(--maxw-prose); margin-top: var(--space-3); }
.sub-hero { display: grid; gap: var(--space-4); padding-block: var(--space-8) var(--space-6); }

/* ============================================================
   WHAT WE DO — feature tiles
   ============================================================ */
.feature-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.feature {
  display: grid; gap: var(--space-3); align-content: start;
  padding: var(--space-6); border-radius: var(--radius-lg);
  border: var(--border-hairline); background: var(--color-surface);
  transition:
    transform var(--dur-hover) var(--ease-out-expo),
    border-color var(--dur-hover) var(--ease-standard),
    box-shadow var(--dur-hover) var(--ease-standard);
}
a.feature:hover { transform: translateY(-4px); border-color: var(--color-border-bright); box-shadow: var(--shadow-card-hover); }
.js [data-reveal].feature {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    translate var(--dur-reveal-rise) var(--ease-soft-spring),
    transform var(--dur-hover) var(--ease-soft-spring),
    border-color var(--dur-hover) var(--ease-swift),
    box-shadow var(--dur-hover) var(--ease-out);
}
.feature__icon { width: var(--space-8); height: var(--space-8); color: var(--color-accent); }
.feature__icon svg { width: 100%; height: 100%; display: block; }
.feature__t { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-text); }
.feature__d { color: var(--color-text-secondary); }
.feature__cta { font-size: var(--text-sm); color: var(--color-accent-bright); margin-top: var(--space-1); }

/* ============================================================
   MARKETPLACE — grouped grids
   ============================================================ */
.market { display: grid; gap: var(--space-9); }
.market-group { display: grid; gap: var(--space-5); }

/* ---------- flagship-spotlight grid (audit D7, Option A) ----------
   The hub product grid: the flagship takes a full-width feature card
   (text + big viz face, the only strong CTA in the grid); the
   coming-soon cards sit in one row beneath. No orphan rows. */
.market-spotlight { display: grid; gap: var(--space-5); }
.card--flagship {
  grid-template-columns: 1.1fr 1fr;
  align-items: center; gap: var(--space-6);
}
.card--flagship .card__body { display: grid; gap: var(--space-3); align-content: start; }
.card--flagship .card__viz { height: 100%; min-height: var(--space-11); }
@media (max-width: 700px) {
  .card--flagship { grid-template-columns: 1fr; }
  .card--flagship .card__viz { min-height: var(--space-10); }
}

/* ============================================================
   SHOWCASE — split text + media (dashboards)
   ============================================================ */
.showcase { display: grid; gap: var(--space-7); align-items: center; grid-template-columns: 1.05fr 1fr; }
@media (max-width: 860px) { .showcase { grid-template-columns: 1fr; } }
.showcase__text { display: grid; gap: var(--space-4); }
.showcase__big {
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-2xl); line-height: var(--leading-snug);
  letter-spacing: var(--tracking-tight); max-width: 20ch;
  color: var(--color-text-hi);
}
.showcase__d { color: var(--color-text-secondary); max-width: 46ch; }
.showcase__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.showcase__note { margin-top: var(--space-1); }
.showcase__media { min-width: 0; }

/* ============================================================
   SHOT — screenshot frame + labelled placeholder
   ------------------------------------------------------------
   .shot-frame carries a muted, soft, blurred ambient halo BEHIND
   the frame (Brand Pack §13). Slate glow on carbon; a faint dark
   halo on paper (the paper band remaps --showcase-glow below).
   Never flame. The halo sits behind the frame and is decorative-
   only, so it is hidden from a11y and frozen under reduced motion.
   ============================================================ */
.shot-frame { position: relative; isolation: isolate; }
.shot-frame::before {
  content: ""; position: absolute; z-index: -1;
  inset: -12% -8%;
  background: radial-gradient(60% 60% at 50% 45%, var(--showcase-glow), transparent 70%);
  filter: blur(28px);
  pointer-events: none;
}
.shot {
  border-radius: var(--radius-lg); overflow: hidden;
  border: var(--border-hairline); background: var(--color-surface);
  aspect-ratio: var(--ratio, 16 / 10);
}
.shot img { width: 100%; height: 100%; object-fit: cover; display: block; }
.shot--ph {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--space-3); text-align: center; padding: var(--space-6);
  border-style: dashed; border-color: var(--color-border-strong);
  background: var(--color-muted-fill); color: var(--color-text-secondary);
}
.shot__mark { width: var(--space-8); height: var(--space-8); color: var(--color-accent); opacity: .7; }
.shot__mark svg { width: 100%; height: 100%; display: block; }
.shot__label {
  font-family: var(--font-mono); font-size: var(--text-xs);
  letter-spacing: var(--tracking-wide); text-transform: uppercase;
}

/* ============================================================
   TRUST — "works with" logo strip
   ============================================================ */
.trust { display: grid; gap: var(--space-4); justify-items: center; text-align: center; }
.trust__lead { color: var(--color-text-secondary); }
.trust__row { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-6); align-items: center; justify-content: center; }
.trust__item { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-text-secondary); }
.trust__logo { width: 28px; height: 28px; object-fit: contain; display: block; }
.trust__label { font-family: var(--font-display); font-weight: var(--weight-medium); font-size: var(--text-sm); }

/* ============================================================
   USE CASES — "who it's for" band
   ============================================================ */
.usecase-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.usecase {
  display: grid; gap: var(--space-3); align-content: start;
  padding: var(--space-6); border-radius: var(--radius-lg);
  border: var(--border-hairline); background: var(--color-surface);
}
.usecase__n { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-bright); }
.usecase__t { font-family: var(--font-display); font-weight: var(--weight-semibold); font-size: var(--text-md); color: var(--color-text); }

/* ============================================================
   LIVE chip + featured keyline
   ============================================================ */
.chip--live { color: var(--color-accent-bright); border-color: var(--color-border-bright); }
.card--featured { border-color: var(--color-border-bright); }

/* ============================================================
   WHY / features band
   ============================================================ */
.why-grid { display: grid; gap: var(--space-6); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.why { display: grid; gap: var(--space-2); align-content: start; transition: transform var(--dur-hover) var(--ease-out-expo); }
.why:hover { transform: translateY(-4px); }
.why:hover .why__n { color: var(--color-text); }
.js [data-reveal].why {
  transition:
    opacity var(--dur-reveal) var(--ease-out),
    translate var(--dur-reveal-rise) var(--ease-soft-spring),
    transform var(--dur-hover) var(--ease-soft-spring);
}
.why__n { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--color-accent-bright); }
.why__t { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-text); }
.why__d { color: var(--color-text-secondary); }

/* ============================================================
   FLAGSHIP / ROI bands (retained for reuse)
   ============================================================ */
.flagship { border: var(--border-bright); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-7); display: grid; gap: var(--space-3); }
.flagship__big { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); max-width: 32ch; }
.flagship__d { color: var(--color-text-secondary); max-width: var(--maxw-prose); }
.flagship__cta { display: flex; flex-wrap: wrap; gap: var(--space-3); margin-top: var(--space-2); }
.roi { border: var(--border-bright); border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-7); display: grid; gap: var(--space-3); }
.roi__big { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); max-width: 28ch; }
.roi__d { color: var(--color-text-secondary); max-width: var(--maxw-prose); }

/* ============================================================
   CLOSING CTA band
   ============================================================ */
.cta-band { display: grid; gap: var(--space-4); }
.cta-band__big { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-xl); line-height: var(--leading-snug); letter-spacing: var(--tracking-tight); max-width: 24ch; }

/* readable prose column (in-development product pages) */
.prose { display: grid; gap: var(--space-3); max-width: var(--maxw-prose); }
.prose a { color: var(--color-accent-bright); transition: var(--transition-colors); }
.prose a:hover { color: var(--color-text); }

/* ============================================================
   BRAND BADGE ARTWORK — official NEW / PRO marks (Brand Pack §05)
   These are fixed artwork (referenced SVGs), never recoloured or
   restretched: only the rendered height is set, width stays auto.
   NEW (flame) lives on product surfaces; PRO (brass) on /pricing/.
   ============================================================ */
.badge-art { display: inline-block; width: auto; vertical-align: middle; }
.badge-art--new { height: 1.25rem; }
.badge-art--pro { height: 1.6rem; }
/* spec-label that carries a badge needs the badge to sit on the text baseline-ish */
.spec-label--badged { display: inline-flex; align-items: center; gap: var(--space-3); }
.card__name .badge-art--new { height: 1.15rem; }

/* ============================================================
   PRICING — muted slate showcase, pro = brass keyline (Brand Pack §13)
   No flame on this screen, so flame and brass never share it.
   ============================================================ */
.pricing-showcase {
  position: relative; overflow: hidden;
  border: var(--border-hairline); border-radius: var(--radius-lg);
  background: var(--color-surface);
  padding: var(--space-8) var(--space-6);
}
/* soft slate ambient glows (never flame) */
.pricing-showcase::before, .pricing-showcase::after {
  content: ""; position: absolute; border-radius: 50%;
  background: radial-gradient(circle, var(--showcase-glow), transparent 70%);
  pointer-events: none;
}
.pricing-showcase::before { width: 22rem; height: 22rem; top: -8rem; right: -5rem; }
.pricing-showcase::after  { width: 16rem; height: 16rem; bottom: -6rem; left: -4rem; }
.pricing-showcase__cap { position: relative; text-align: center; margin-bottom: var(--space-6); }
.pricing-showcase__note { position: relative; text-align: center; margin-top: var(--space-6); color: var(--color-text-muted); }

.price-grid {
  position: relative; display: grid; gap: var(--space-5);
  grid-template-columns: repeat(2, minmax(0, 1fr));
  max-width: 40rem; margin-inline: auto;
}
@media (max-width: 720px) { .price-grid { grid-template-columns: 1fr; } }
.plan {
  display: grid; gap: var(--space-1); align-content: start;
  border: var(--border-hairline); border-radius: var(--radius-lg);
  background: var(--color-surface-raised); padding: var(--space-6);
}
.plan--pro { border-color: var(--color-reward); }      /* brass keyline */
.plan__name {                                           /* plan-name small */
  font-family: var(--font-mono); font-weight: var(--weight-medium);
  font-size: var(--text-xs); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; color: var(--color-text-secondary);
  min-height: 1.6rem; display: flex; align-items: center;
}
.plan--pro .plan__name { color: var(--color-reward); text-transform: none; }
.plan__price {                                          /* price prominent */
  font-family: var(--font-display); font-weight: var(--weight-bold);
  font-size: var(--text-2xl); line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight); color: var(--color-text-hi);
  margin-top: var(--space-2);
}
.plan__per { font-size: var(--text-sm); color: var(--color-text-secondary); }
.plan__feats { display: grid; gap: var(--space-1); margin: var(--space-4) 0 var(--space-5); }
.plan__feats li {
  position: relative; padding-left: var(--space-5);
  font-size: var(--text-sm); color: var(--color-text-secondary);
}
/* blue checkmarks (Lucide check, drawn via mask so the colour is a token) */
.plan__feats li::before {
  content: ""; position: absolute; left: 0; top: .22em;
  width: var(--space-4); height: var(--space-4);
  background: var(--color-accent-bright);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E") center / contain no-repeat;
}
.plan .btn { justify-self: stretch; justify-content: center; margin-top: auto; }

/* ============================================================
   STATES — empty + loading (Brand Pack §09)
   A dynamic list never leaves a dead screen: it renders an empty
   state (one line + one next step) when there is nothing to show,
   and skeleton blocks shaped like the content while it loads.
   ============================================================ */
.empty-state {
  display: grid; gap: var(--space-3); justify-items: start;
  max-width: var(--maxw-prose);
  padding: var(--space-7); border-radius: var(--radius-lg);
  border: 1px dashed var(--color-border-strong);
  background: var(--color-muted-fill);
}
.empty-state__mark { width: var(--space-7); height: var(--space-7); color: var(--color-accent); opacity: .8; }
.empty-state__mark svg { width: 100%; height: 100%; display: block; }
.empty-state__title { font-family: var(--font-display); font-weight: var(--weight-bold); font-size: var(--text-lg); color: var(--color-text); }
.empty-state__d { color: var(--color-text-secondary); }
.empty-state .btn { margin-top: var(--space-2); }

/* ============================================================
   ROUND-2 CONTRAST — every heading settles at FULL strength.
   Display and card titles on dark read bright ivory (--color-text-hi);
   the paper band remaps the token so they go near-black there.
   ============================================================ */
.feature__t, .why__t, .flagship__big, .roi__big, .cta-band__big,
.empty-state__title, .usecase__t, .card__name {
  color: var(--color-text-hi);
}

/* skeleton loaders — match the shape of what is coming (Brand Pack §09).
   A shimmer sweeps across; frozen flat under reduced motion. */
.skeleton-grid { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); }
.skeleton {
  border-radius: var(--radius-lg); background: var(--color-surface);
  border: var(--border-hairline); min-height: var(--space-10);
  position: relative; overflow: hidden;
}
.skeleton::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, var(--color-muted-fill), transparent);
  transform: translateX(-100%);
  animation: skeleton-sweep 1.4s var(--ease-standard) infinite;
}
@keyframes skeleton-sweep { to { transform: translateX(100%); } }
@media (prefers-reduced-motion: reduce) {
  .skeleton::after { animation: none !important; transform: none !important; opacity: 0; }
}