/* ═══════════════════════════════════════════════════════════════════════
   /solutions/ecommerce — the storefront as a live dataset. Industry umbrella
   that cross-links to the pricing / competitive / marketplace use-cases.
   House rules: warm dark ground, white headings, hairline-on-transparent
   widgets (no card fill), SOLID teal band, purple only to mark. Type scale
   and alignment vary act to act.
   ═══════════════════════════════════════════════════════════════════════ */
@import url("../../_ds/fonts.css");
@import url("../../_ds/theme.css");
@import url("../../_shared/chrome.css");
@import url("../../_shared/components.css");
@import url("../../_shared/audience-switcher.css");

main { position: relative; z-index: 1; overflow-x: clip; }
/* blur-in / blur-out: text sharpens as it enters the viewport and softens as
   it leaves. GPU-promoted so the filter doesn't paint-thrash. */
.blur-t { opacity: 0; filter: blur(12px); transition: opacity 760ms cubic-bezier(0.22,1,0.36,1), filter 760ms cubic-bezier(0.22,1,0.36,1); transform: translateZ(0); backface-visibility: hidden; will-change: filter, opacity; }
.blur-t.is-in { opacity: 1; filter: blur(0); }
@media (prefers-reduced-motion: reduce) { .blur-t { opacity: 1; filter: none; transition: none; } }

/* shared JSON highlight (matches the rest of the site) */
.x-p { color: var(--text-quaternary); }
.x-k { color: var(--text-secondary); }
.x-s { color: var(--text-tertiary); }
.x-n, .x-b { color: var(--text-primary); }
.x-hi { color: #7C4FE8; }
.x-c { color: var(--text-quaternary); }
.x-fn { color: var(--text-primary); font-weight: 500; }

/* ── Act 1 — Hero ─────────────────────────────────────────────────────── */
.ec-hero {
  display: grid; grid-template-columns: 1.02fr 1fr; gap: clamp(28px, 4vw, 72px);
  align-items: center; max-width: 1500px; margin-inline: auto;
  padding: clamp(120px, 15vh, 176px) clamp(20px, 5vw, 72px) clamp(64px, 9vh, 110px);
}
.ec-hero-h1 {
  font-family: var(--font-display); font-weight: 500;
  font-size: var(--mkt-hero-xl); line-height: 0.98; letter-spacing: -0.03em;
  color: var(--text-primary); margin: 0; max-width: 14ch;
}
.ec-hero-h1 em { font-style: normal; color: var(--text-primary); }
.ec-hero-sub { font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5; color: var(--text-secondary); margin: 22px 0 0; max-width: 42ch; }
.ec-hero-cta { margin-top: clamp(26px, 4vh, 40px); }
.ec-hero-x { margin-top: 18px; }

/* shelf widget */
.ec-shelf { border: 1px solid var(--border-subtle); border-radius: 18px; padding: 16px; }
.ec-shelf-bar { display: flex; align-items: center; gap: 10px; padding: 4px 6px 14px; }
.ec-shelf-dot { width: 7px; height: 7px; border-radius: 50%; background: #7C4FE8; box-shadow: 0 0 0 4px color-mix(in srgb, #7C4FE8 18%, transparent); }
.ec-shelf-title { font-family: var(--font-code); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-tertiary); }
.ec-shelf-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.ec-shelf-foot { font-family: var(--font-code); font-size: 11.5px; color: var(--text-quaternary); margin: 14px 6px 4px; }

.ec-tile {
  position: relative; display: block; width: 100%; aspect-ratio: 1 / 1.12;
  border: 1px solid var(--border-subtle); border-radius: 13px; background: transparent;
  cursor: pointer; padding: 0; text-align: left; overflow: hidden;
  transition: border-color 200ms ease, transform 200ms ease;
}
.ec-tile:hover { border-color: var(--border); transform: translateY(-2px); }
.ec-tile-face { position: absolute; inset: 0; padding: 13px; display: flex; flex-direction: column; transition: opacity 360ms cubic-bezier(0.22,1,0.36,1); }
.ec-tile-front { opacity: 1; }
.ec-tile-back { opacity: 0; justify-content: center; }
.ec-tile.is-flipped .ec-tile-front { opacity: 0; }
.ec-tile.is-flipped .ec-tile-back { opacity: 1; }
.ec-tile-thumb { flex: 1; overflow: hidden; border-radius: 9px; margin-bottom: 9px; background: var(--sunken, #241d18); }
.ec-tile-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-tile-name { font-family: var(--font-base); font-size: 12.5px; font-weight: 500; color: var(--text-primary); line-height: 1.2; }
.ec-tile-meta { display: flex; align-items: baseline; justify-content: space-between; margin-top: 4px; }
.ec-tile-store { font-family: var(--font-code); font-size: 10px; color: var(--text-quaternary); }
.ec-tile-price { font-family: var(--font-code); font-size: 12px; color: var(--text-secondary); }
.ec-tile-back code { font-family: var(--font-code); font-size: 11px; line-height: 1.6; color: #7C4FE8; word-break: break-word; }

/* ── Act 2 — Extract ──────────────────────────────────────────────────── */
.ec-extract { max-width: 1500px; margin-inline: auto; padding: clamp(56px, 9vh, 120px) clamp(20px, 5vw, 72px); }
.ec-extract-head { max-width: 760px; }
.ec-extract-h2, .ec-signals-h2, .ec-scale-h2, .ec-hard-h2, .ec-use-h2 {
  font-family: var(--font-display); font-weight: 500; color: var(--text-primary);
  letter-spacing: -0.026em; margin: 0;
}
.ec-extract-h2 { font-size: var(--mkt-h3); line-height: 1.02; }
.ec-extract-h2 em, .ec-signals-h2 em, .ec-scale-h2 em, .ec-hard-h2 em, .ec-use-h2 em, .ec-end-h2 em { font-style: normal; color: var(--text-primary); }
.ec-extract-sub, .ec-signals-sub, .ec-scale-sub, .ec-hard-sub, .ec-use-sub {
  font-family: var(--font-base); font-size: var(--mkt-body); line-height: 1.5;
  color: var(--text-secondary); margin: 16px 0 0; max-width: 52ch;
}
.ec-extract-stage { margin-top: clamp(30px, 4vh, 52px); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(16px, 2vw, 28px); align-items: start; }

.ec-page { border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; }
.ec-page-bar { display: flex; align-items: center; gap: 6px; padding: 11px 14px; border-bottom: 1px solid var(--border-subtle); }
.ec-page-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border); }
.ec-page-url { margin-left: 8px; font-family: var(--font-code); font-size: 11.5px; color: var(--text-tertiary); }
.ec-page-body { display: grid; grid-template-columns: 0.8fr 1fr; gap: 18px; padding: clamp(18px, 2vw, 26px); }
.ec-page-media { border: 1px solid var(--border-subtle); border-radius: 10px; overflow: hidden; aspect-ratio: 1; }
.ec-page-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ec-page-brand { font-family: var(--font-code); font-size: 10.5px; letter-spacing: 0.12em; color: var(--text-quaternary); margin: 0; }
.ec-page-title { font-family: var(--font-display); font-size: var(--mkt-lead); color: var(--text-primary); margin: 6px 0 0; }
.ec-page-price { display: flex; align-items: baseline; gap: 8px; margin: 12px 0 0; font-family: var(--font-base); }
.ec-page-price > span:first-child { font-size: 18px; color: var(--text-primary); font-weight: 500; }
.ec-page-price s { font-size: 13px; color: var(--text-quaternary); }
.ec-page-save { font-family: var(--font-code); font-size: 11px; color: #7C4FE8; }
.ec-page-swatches { display: flex; gap: 5px; margin: 12px 0 0; flex-wrap: wrap; }
.ec-page-swatches span { font-family: var(--font-code); font-size: 10.5px; color: var(--text-secondary); border: 1px solid var(--border-subtle); border-radius: 5px; width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; }
.ec-page-meta { font-family: var(--font-code); font-size: 11.5px; color: var(--text-tertiary); margin: 12px 0 0; }
.ec-page-btn { display: inline-block; margin-top: 16px; font-family: var(--font-base); font-size: 13px; color: var(--text-tertiary); border: 1px solid var(--border-subtle); border-radius: 999px; padding: 8px 18px; }

/* field flash when its counterpart is hovered/active */
[data-x-field].is-lit { color: #7C4FE8 !important; transition: color 160ms ease; }
.ec-page [data-x-field].is-lit { color: #7C4FE8 !important; }

.ec-rec { border: 1px solid var(--border-subtle); border-radius: 14px; overflow: hidden; display: flex; flex-direction: column; }
.ec-rec-seg { padding: 6px 14px 0; border-bottom: 1px solid var(--border-subtle); }
.ec-rec-views { position: relative; }
.ec-rec-view { margin: 0; padding: clamp(16px, 2vw, 26px); overflow-x: auto; }
.ec-rec-view[data-active="false"] { display: none; }
.ec-rec-view code { font-family: var(--font-code); font-size: 12.5px; line-height: 1.75; white-space: pre; }

/* ── Act 3 — Signals ──────────────────────────────────────────────────── */
.ec-signals { max-width: 1200px; margin-inline: auto; padding: clamp(56px, 9vh, 120px) clamp(20px, 5vw, 72px); text-align: center; }
.ec-signals-head { max-width: 640px; margin-inline: auto; }
.ec-signals-h2 { font-size: var(--mkt-h2); line-height: 1.0; }
.ec-signals-sub { margin-inline: auto; }
.ec-signals-body { margin-top: clamp(34px, 5vh, 60px); display: grid; grid-template-columns: 1.3fr 1fr; gap: clamp(20px, 3vw, 48px); align-items: center; text-align: left; }
.ec-sig-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ec-sig { padding: 16px 18px; border-radius: 10px; cursor: pointer; transition: background 200ms ease, opacity 200ms ease; opacity: 0.5; }
.ec-sig:hover { opacity: 0.8; }
.ec-sig.is-active { opacity: 1; }
.ec-sig-t { display: block; font-family: var(--font-display); font-size: var(--mkt-lead); color: var(--text-primary); }
.ec-sig-d { display: block; font-family: var(--font-base); font-size: 13.5px; line-height: 1.45; color: var(--text-secondary); margin-top: 4px; }
.ec-sig-view { position: relative; min-height: 180px; border: 1px solid var(--border-subtle); border-radius: 16px; display: flex; align-items: center; justify-content: center; }
.ec-sig-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 30px; text-align: center; }
.ec-sig-card[hidden] { display: none; }
.ec-sig-field { font-family: var(--font-code); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-quaternary); }
.ec-sig-val { font-family: var(--font-display); font-size: var(--mkt-h2); color: var(--text-primary); line-height: 1; }
.ec-sig-note { font-family: var(--font-code); font-size: 12.5px; color: #7C4FE8; }

/* ── Act 4 — Scale (scroll paint) ─────────────────────────────────────── */
.ec-scale { position: relative; height: 240vh; }
.ec-scale-sticky { position: sticky; top: 0; min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: clamp(40px, 8vh, 90px) clamp(20px, 5vw, 72px); text-align: center; }
.ec-scale-head { max-width: 620px; }
.ec-scale-h2 { font-size: clamp(34px, 5vw, 72px); line-height: 0.98; }
.ec-scale-sub { margin-inline: auto; }
.ec-scale-grid { display: grid; grid-template-columns: repeat(24, 1fr); gap: 6px; width: min(760px, 82vw); }
.ec-scale-cell { aspect-ratio: 1; border-radius: 3px; background: var(--border-subtle); opacity: 0.35; transition: opacity 260ms ease, background 260ms ease; }
.ec-scale-cell.is-on { opacity: 1; background: #7C4FE8; }
.ec-scale-read { font-family: var(--font-code); font-size: 12.5px; color: var(--text-tertiary); }
.ec-scale-read span { color: var(--text-primary); }

/* ── Act 5 — Where it's hard ──────────────────────────────────────────── */
.ec-hard { max-width: 1120px; margin-inline: auto; padding: clamp(56px, 9vh, 120px) clamp(20px, 5vw, 72px); }
.ec-hard-h2 { font-size: var(--mkt-h3); line-height: 1.02; }
.ec-hard-list { list-style: none; margin: clamp(28px, 4vh, 48px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: 16px; overflow: hidden; }
.ec-hard-item { background: var(--background); padding: clamp(22px, 2.6vw, 34px); display: flex; flex-direction: column; gap: 8px; }
.ec-hard-k { font-family: var(--font-display); font-size: var(--mkt-lead); color: var(--text-primary); }
.ec-hard-v { font-family: var(--font-base); font-size: 14px; line-height: 1.5; color: var(--text-secondary); max-width: 40ch; }

/* ── Act 6 — Coverage band (SOLID teal + bloom) ───────────────────────── */
.ec-cover { position: relative; overflow: hidden; isolation: isolate; padding: clamp(90px, 14vh, 180px) clamp(20px, 5vw, 72px); }
.ec-cover-fill { position: absolute; inset: 0; z-index: -1; background: #7C4FE8; clip-path: circle(0% at 15% 15%); transition: clip-path 900ms cubic-bezier(0.22,1,0.36,1); }
.ec-cover.is-in .ec-cover-fill { clip-path: circle(150% at 15% 15%); }
.ec-cover-inner { position: relative; z-index: 1; max-width: 1200px; margin-inline: auto; }
.ec-cover-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-h2); line-height: 1.0; letter-spacing: -0.026em; color: #FFFFFF; margin: 0; }
.ec-cover-list { list-style: none; margin: clamp(30px, 4vh, 52px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(20px, 3vw, 40px); }
.ec-cover-k { font-family: var(--font-display); font-size: clamp(17px, 1.7vw, 23px); color: #FFFFFF; }
.ec-cover-v { font-family: var(--font-base); font-size: 14.5px; line-height: 1.5; color: rgba(255,255,255,0.82); max-width: 38ch; }

/* ── Act 7 — Use-cases ────────────────────────────────────────────────── */
.ec-use { max-width: 1200px; margin-inline: auto; padding: clamp(56px, 9vh, 120px) clamp(20px, 5vw, 72px); }
.ec-use-head { max-width: 620px; }
.ec-use-h2 { font-size: var(--mkt-h2); line-height: 1.0; }
.ec-use-grid { margin-top: clamp(30px, 4vh, 52px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(14px, 1.6vw, 22px); }

/* ── Act 8 — Closer ───────────────────────────────────────────────────── */
.ec-end { padding: clamp(96px, 16vh, 200px) clamp(20px, 5vw, 72px); text-align: center; }
.ec-end-frame { max-width: 780px; margin-inline: auto; }
.ec-end-h2 { font-family: var(--font-display); font-weight: 500; font-size: var(--mkt-hero); line-height: 0.98; letter-spacing: -0.03em; color: var(--text-primary); margin: 0; }
.ec-end-cta { margin-top: clamp(28px, 4vh, 44px); justify-content: center; }
.ec-end-x { margin-top: 20px; }

/* ── Responsive ───────────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .ec-hero { grid-template-columns: 1fr; gap: 40px; }
  .ec-extract-stage { grid-template-columns: 1fr; }
  .ec-signals-body { grid-template-columns: 1fr; }
  .ec-hard-list, .ec-cover-list, .ec-use-grid { grid-template-columns: 1fr; }
  .ec-scale { height: auto; }
  .ec-scale-sticky { position: static; min-height: 0; }
}
@media (max-width: 600px) {
  /* Shelf goes vertical: one tile per row as a compact list line
     (thumb left, name + store/price right). At 3-col the flip's
     absolute back-face JSON overflowed the ~110px tiles. */
  .ec-shelf-grid { grid-template-columns: 1fr; gap: 8px; }
  .ec-tile { aspect-ratio: auto; min-height: 84px; }
  .ec-tile-front {
    display: grid;
    grid-template-columns: 56px 1fr;
    column-gap: 13px;
    align-content: center;
  }
  .ec-tile-thumb { grid-row: 1 / 3; grid-column: 1; flex: none; width: 56px; height: 56px; margin: 0; align-self: center; }
  .ec-tile-name { grid-column: 2; align-self: end; }
  .ec-tile-meta { grid-column: 2; align-self: start; margin-top: 3px; }
}
@media (min-width: 1600px) {
  
  .ec-hero, .ec-extract { max-width: 1640px; }
}