/* ==========================================================================
   Products page (.prod-)
   Hero with staggered featured cards · sticky group index · group catalogues
   · revenue pipeline · one-suite thread · closing earth band
   ========================================================================== */

/* ---------- 1. Hero ---------- */
.prod-hero { padding-bottom: clamp(64px, 8vw, 112px); }
/* Restrained firelight behind the cards, plus a faint data-stream texture (<= 3%). */
.prod-hero::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  right: -12%; top: 4%; width: min(1100px, 95vw); aspect-ratio: 1.35;
  background: radial-gradient(closest-side at 55% 62%, rgba(242, 161, 91, 0.13), rgba(199, 102, 44, 0.05) 52%, transparent 78%);
}
.prod-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background: repeating-linear-gradient(90deg, rgba(214, 226, 240, 0.028) 0 1px, transparent 1px 88px);
  -webkit-mask-image: radial-gradient(60% 70% at 72% 45%, #000, transparent 75%);
  mask-image: radial-gradient(60% 70% at 72% 45%, #000, transparent 75%);
}
.prod-hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: clamp(40px, 4.4vw, 64px); align-items: start; }
/* Shared --fs-h1, capped so "One operating layer." (9.6em) holds one line in the copy column: the shared size
   in the one-column layout (1180px and below, phones from 390px), about 55px in the two-column layout. */
.prod-hero__copy { container-type: inline-size; }
.prod-hero h1 { font-size: min(var(--fs-h1), calc(100cqi / 9.7)); letter-spacing: -0.03em; max-width: 12.5em; }
.prod-hero__line { display: block; }
.prod-hero .lede { max-width: 30em; }
.prod-hero .checklist { margin-top: 36px; gap: 14px; max-width: 30em; }
.prod-hero .checklist li { color: var(--text); font-size: 0.975rem; }

/* Staggered 3-over-2 (concept deck-03): six tracks, bottom pair offset by half a card. */
.prod-hero__stage { padding-top: 38px; position: relative; }
.prod-hero__cards { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 16px; }
.prod-hero__cards > .pcard { grid-column: span 2; }
.prod-hero__cards > .pcard:nth-child(4) { grid-column: 2 / span 2; }
.prod-hero__cards > .pcard:nth-child(5) { grid-column: 4 / span 2; }

.prod-hero .pcard {
  align-items: center; text-align: center; gap: 12px; padding: 30px 18px 24px;
  background: linear-gradient(180deg, rgba(20, 27, 35, 0.78), rgba(10, 14, 19, 0.78));
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
}
.prod-hero .pcard > .flex { justify-content: center; }
.prod-hero .pcard .pmark { width: 56px; height: 56px; }
.prod-hero .pcard__label { display: none; }
.prod-hero .pcard h3 { font-size: 1.2rem; margin-top: 6px; }
.prod-hero .pcard p { font-size: 0.9rem; line-height: 1.5; max-width: 15em; }
.prod-hero .pcard .link-arrow { align-self: center; margin-top: auto; padding-top: 12px; }
.prod-hero .pcard::before { opacity: 0.32; }
.prod-hero .pcard:hover::before, .prod-hero .pcard:focus-within::before { opacity: 1; }

/* Product-colour hairline on every card on this page. */
.prod-hero .pcard::after, .prod-grid .pcard::after {
  content: ""; position: absolute; top: 0; left: 18%; right: 18%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--p) 80%, #fff), transparent); opacity: 0.55;
}

/* ---------- 2. Group index ---------- */
/* --prod-index-h is the sticky bar's full height (borders included); jump targets sit flush under it. */
.prod-catalogue { position: relative; --prod-index-h: 62px; }
.prod-index {
  position: sticky; top: var(--header-h); z-index: 40;
  background: rgba(7, 9, 12, 0.86); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-block: 1px solid var(--line);
}
.prod-index__inner { display: flex; align-items: center; gap: 20px 40px; height: calc(var(--prod-index-h) - 2px); }
.prod-index__label { flex: none; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); }
.prod-index__list { list-style: none; display: flex; flex-wrap: nowrap; gap: 0 clamp(20px, 2.6vw, 40px); align-self: stretch; }
.prod-index__list li { display: flex; }
.prod-index__list a {
  position: relative; display: inline-flex; align-items: center; gap: 8px;
  font-size: 0.9rem; color: var(--text-2); white-space: nowrap; transition: color 0.2s;
}
.prod-index__list a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: var(--ember);
  transform: scaleX(0); transform-origin: left; transition: transform 0.35s var(--ease);
}
.prod-index__list a:hover { color: var(--text); }
.prod-index__list a:hover::after { transform: scaleX(1); }
.prod-index__list a:focus-visible { outline-offset: -2px; }
.prod-index__n { font-family: var(--font-mono); font-size: 0.72rem; color: var(--text-3); font-variant-numeric: tabular-nums; }

/* Active group follows the scroll where scroll-driven animations exist (no JS). */
@supports (animation-timeline: view()) {
  .prod-catalogue { timeline-scope: --prod-care, --prod-revenue, --prod-finance, --prod-growth, --prod-insights; }
  .prod-group { view-timeline-inset: 42% 57%; }
  #care { view-timeline-name: --prod-care; }
  #revenue { view-timeline-name: --prod-revenue; }
  #finance { view-timeline-name: --prod-finance; }
  #growth { view-timeline-name: --prod-growth; }
  #insights { view-timeline-name: --prod-insights; }
  .prod-index__list a { animation: prod-on linear; }
  .prod-index__list a::after { animation: prod-bar linear; }
  .prod-index__list a .prod-index__n { animation: prod-num linear; }
  .prod-index__list a[href="#care"], .prod-index__list a[href="#care"]::after, .prod-index__list a[href="#care"] .prod-index__n { animation-timeline: --prod-care; }
  .prod-index__list a[href="#revenue"], .prod-index__list a[href="#revenue"]::after, .prod-index__list a[href="#revenue"] .prod-index__n { animation-timeline: --prod-revenue; }
  .prod-index__list a[href="#finance"], .prod-index__list a[href="#finance"]::after, .prod-index__list a[href="#finance"] .prod-index__n { animation-timeline: --prod-finance; }
  .prod-index__list a[href="#growth"], .prod-index__list a[href="#growth"]::after, .prod-index__list a[href="#growth"] .prod-index__n { animation-timeline: --prod-growth; }
  .prod-index__list a[href="#insights"], .prod-index__list a[href="#insights"]::after, .prod-index__list a[href="#insights"] .prod-index__n { animation-timeline: --prod-insights; }
}
@keyframes prod-on { from, to { color: var(--text); } }
@keyframes prod-bar { from, to { transform: scaleX(1); } }
@keyframes prod-num { from, to { color: var(--ember); } }

/* ---------- 3. Group sections ---------- */
/* html scroll-padding already clears the header plus 16px, so subtract those 16px here. */
.prod-group { --sec-bg: var(--bg); scroll-margin-top: calc(var(--prod-index-h) - 16px); }
.prod-group.section--night { --sec-bg: var(--bg-2); }
.prod-group__head { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 20px clamp(32px, 6vw, 96px); align-items: end; margin-bottom: clamp(32px, 4vw, 52px); }
.prod-group__kicker { display: flex; align-items: center; flex-wrap: wrap; gap: 10px 14px; margin-bottom: 18px; }
.prod-group__num { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ember); letter-spacing: 0.04em; }
.prod-group__count { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.06em; color: var(--text-3); padding-left: 14px; border-left: 1px solid var(--line-strong); }
.prod-group__head h2 { max-width: 14em; }
.prod-group__head .lede { font-size: 1.0625rem; max-width: 32em; }

.prod-grid { --gap: 16px; align-items: stretch; }
.prod-grid .pcard { min-height: 100%; }
.prod-grid .pcard > .flex { min-height: 48px; align-items: flex-start; }
/* Catalogue cards carry no label line (the group heading names the area), except in Insights, where
   Clinilytics' "Product" line matches the platform-layer cards' "Platform layer" line beside it. */
.prod-grid .pcard .pcard__label { min-height: 1.45em; margin-top: 4px; margin-bottom: -6px; line-height: 1.45; letter-spacing: 0.08em; }

/* Platform-layer cards (not links). */
.prod-layer {
  position: relative; display: flex; flex-direction: column; gap: 14px; padding: 24px; border-radius: var(--radius);
  border: 1px dashed var(--line-strong);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.02), rgba(255, 255, 255, 0)), rgba(16, 22, 29, 0.55);
}
.prod-layer > .flex { min-height: 48px; align-items: flex-start; }
.prod-layer .icon-ring { width: 48px; height: 48px; color: var(--ember-hot); }
.prod-layer .icon-ring svg { width: 21px; height: 21px; }
.prod-layer p { font-size: 0.9375rem; color: var(--text-2); }
.prod-layer .prod-layer__kind {
  min-height: 1.45em; margin-top: 4px; margin-bottom: -6px;
  font-family: var(--font-mono); font-size: 0.6875rem; line-height: 1.45; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--ember) 70%, var(--text));
}
.prod-layer h3 { font-size: 1.2rem; }

/* Example-screen tile that closes a row. The screenshot never sets the row height: the tile takes
   the row's height (or a fixed aspect ratio on narrow screens) and the image covers it. */
.prod-tile { position: relative; margin: 0; min-height: 240px; border-radius: var(--radius); isolation: isolate; }
.prod-tile--span2 { grid-column: span 2; }
.prod-tile .shot-wrap { position: absolute; inset: 0; margin: 0; }
.prod-tile .shot-wrap::before { inset: 20% 10% -4% 10%; opacity: 0.5; }
.prod-tile .shot { height: 100%; border-radius: var(--radius); display: flex; flex-direction: column; }
/* Crop to the left ~76% of the screen. Every example screen shows a sample user's photo avatar,
   name and title at the top right (from x ~79%), which must stay out of frame. At 132% width the
   right edge is cut at 1/1.32 = 76% whether the image is width- or height-bound. */
.prod-tile .shot img { flex: 1 1 auto; min-height: 0; width: 132%; max-width: none; height: 100%; object-fit: cover; object-position: left top; }
.prod-tile__tag {
  position: absolute; left: 12px; bottom: 12px; z-index: 2;
  font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--text); background: rgba(7, 9, 12, 0.82); border: 1px solid var(--line-strong);
  padding: 5px 10px; border-radius: 999px; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}

/* Revenue pipeline: Capture → Greenlight → Conduit → Salvage, with the learning loop back. */
.prod-pipe { margin-bottom: clamp(28px, 3.4vw, 44px); }
.prod-pipe__steps {
  list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  border: 1px solid var(--line); border-radius: var(--radius);
  background: linear-gradient(180deg, rgba(20, 27, 35, 0.7), rgba(12, 17, 23, 0.7));
}
.prod-pipe__step { position: relative; display: flex; align-items: center; gap: 14px; padding: 18px 22px; }
.prod-pipe__step + .prod-pipe__step { border-left: 1px solid var(--line); }
.prod-pipe__step::before {
  content: ""; position: absolute; left: 22px; right: 22px; bottom: -1px; height: 1px;
  background: linear-gradient(90deg, color-mix(in srgb, var(--p) 70%, transparent), transparent);
}
.prod-pipe__text { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.prod-pipe__stage { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-3); }
.prod-pipe__name { font-family: var(--font-display); font-size: 1.1rem; color: var(--text); letter-spacing: -0.01em; line-height: 1.2; }
.prod-pipe__arrow {
  position: absolute; right: -15px; top: 50%; z-index: 1; transform: translateY(-50%);
  display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
  background: var(--sec-bg); border: 1px solid var(--line-strong); color: var(--ember);
}
.prod-pipe__arrow svg { width: 14px; height: 14px; }
.prod-pipe__loop {
  position: relative; height: 30px; margin-inline: 12.5%;
  border: 1px dashed rgba(242, 161, 91, 0.42); border-top: 0; border-radius: 0 0 16px 16px;
}
.prod-pipe__loop::before { /* arrowhead into Capture */
  content: ""; position: absolute; left: -5px; top: -2px; width: 9px; height: 9px;
  border-left: 1px solid rgba(242, 161, 91, 0.75); border-top: 1px solid rgba(242, 161, 91, 0.75); transform: rotate(45deg);
}
.prod-pipe__loop span {
  position: absolute; left: 50%; bottom: 0; transform: translate(-50%, 50%);
  display: inline-flex; align-items: center; gap: 8px; padding: 0 14px; white-space: nowrap;
  background: var(--sec-bg); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.04em; color: var(--ember-hot);
}
.prod-pipe__loop svg { width: 14px; height: 14px; color: var(--ember); }

/* ---------- 4. One suite ---------- */
.prod-suite .section-head .lede { max-width: 34em; }
.prod-thread { margin-top: clamp(48px, 6vw, 80px); }
.prod-thread__groups { list-style: none; display: flex; justify-content: center; gap: clamp(16px, 2.2vw, 32px); position: relative; }
.prod-thread__groups::before { /* the one layer they sit on */
  content: ""; position: absolute; left: 0; right: 0; top: 52px; height: 1px;
  background: linear-gradient(90deg, transparent, rgba(242, 161, 91, 0.2) 8%, rgba(242, 161, 91, 0.75) 50%, rgba(242, 161, 91, 0.2) 92%, transparent);
}
.prod-thread__group { display: flex; flex-direction: column; align-items: center; gap: 30px; }
.prod-thread__marks { display: flex; gap: clamp(6px, 0.7vw, 10px); height: 36px; align-items: center; }
.prod-thread__marks .pmark { width: clamp(24px, 2.4vw, 36px); height: clamp(24px, 2.4vw, 36px); }
/* Products without a mark file: an outlined mono initial, so it reads as a glyph, not a placeholder. */
.prod-thread__marks .pmark--fallback {
  background: transparent; border: 1px solid color-mix(in srgb, var(--p) 60%, transparent); border-radius: 50%;
  color: var(--p); font-family: var(--font-mono); font-weight: 500; font-size: clamp(0.6875rem, 1vw, 0.9375rem);
}
.prod-thread__label { position: relative; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-2); white-space: nowrap; }
.prod-thread__label::before { /* tick up to the line */
  content: ""; position: absolute; left: 50%; bottom: calc(100% + 6px); width: 1px; height: 10px; background: rgba(242, 161, 91, 0.6);
}
.prod-thread__cap { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 0; margin-top: clamp(40px, 5vw, 56px); font-size: 0.9375rem; color: var(--text); }
.prod-thread__cap li { padding-inline: 18px; }
.prod-thread__cap li + li { border-left: 1px solid var(--line-strong); }

/* ---------- 5. Closing earth band ---------- */
.prod-earth {
  position: relative; isolation: isolate; overflow: hidden;
  min-height: clamp(520px, 64vh, 700px);
  padding-top: clamp(72px, 8vw, 112px); padding-bottom: 48px;
  border-top: 1px solid var(--line);
}
.prod-earth__media { position: absolute; inset: 0; z-index: -1; }
.prod-earth__media .ember-canvas { opacity: 0.92; }
.prod-earth__media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(180deg, var(--bg) 0%, rgba(7, 9, 12, 0) 26%),
    linear-gradient(90deg, rgba(7, 9, 12, 0.72) 0%, rgba(7, 9, 12, 0.3) 42%, transparent 68%),
    linear-gradient(0deg, var(--bg) 0%, transparent 16%);
}
.prod-earth__inner { max-width: 940px; }
.prod-earth__title { font-weight: 300; font-size: clamp(1.9rem, 1.25rem + 2vw, 2.95rem); line-height: 1.14; letter-spacing: -0.03em; }
.prod-earth__title span { display: block; color: var(--text-2); }
.prod-earth .actions { margin-top: clamp(28px, 3vw, 40px); }
.prod-earth .btn { min-height: 54px; padding-inline: 26px; box-shadow: 0 14px 40px -16px rgba(255, 211, 161, 0.35); }

/* ---------- Responsive ---------- */
@media (max-width: 1180px) {
  .prod-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .prod-hero h1 { max-width: 15em; }
  .prod-hero__stage { padding-top: 8px; }
}
/* The group index stops being sticky where the header switches to its menu button,
   before its one-row list would have to wrap. */
@media (max-width: 1080px) {
  .prod-index { position: relative; top: auto; }
  .prod-index__inner { flex-direction: column; align-items: flex-start; gap: 14px; height: auto; padding-block: 20px; }
  .prod-index__list { flex-wrap: wrap; gap: 8px; align-self: auto; }
  .prod-index__list a { padding: 9px 14px; border: 1px solid var(--line-strong); border-radius: 999px; white-space: normal; }
  .prod-index__list a::after { display: none; }
  .prod-group { scroll-margin-top: 0; }

  .prod-thread__groups { flex-wrap: wrap; row-gap: 36px; }
  .prod-thread__groups::before { display: none; }
  .prod-thread__group { gap: 14px; }
  .prod-thread__label { align-self: stretch; text-align: center; padding-top: 10px; border-top: 1px solid rgba(242, 161, 91, 0.5); }
  .prod-thread__label::before { display: none; }
}
@media (max-width: 1024px) {
  .prod-pipe__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .prod-pipe__step:nth-child(3) { border-left: 0; }
  .prod-pipe__step:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .prod-pipe__step:nth-child(2) .prod-pipe__arrow { display: none; }
  .prod-tile--span2 { aspect-ratio: 2 / 1; }
  .prod-pipe__loop { height: auto; margin: 16px 0 0; border: 0; }
  .prod-pipe__loop::before { display: none; }
  .prod-pipe__loop span { position: static; transform: none; padding: 0; white-space: normal; background: none; }
}
@media (max-width: 860px) {
  .prod-group__head { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
  /* Group kicker: the count gets its own line, so a wrapped count never starts with an orphaned divider. */
  .prod-group__kicker { row-gap: 8px; }
  .prod-group__count { flex-basis: 100%; padding-left: 0; border-left: 0; }

  /* Hero: the featured five keep the 3-over-2 stagger as compact mark-and-name tiles,
     so the catalogue starts within the first screen and a half. */
  .prod-hero__cards { gap: 8px; }
  .prod-hero .pcard { gap: 8px; padding: 16px 6px 14px; }
  .prod-hero .pcard .pmark { width: 40px; height: 40px; }
  .prod-hero .pcard h3 { margin-top: 0; font-size: clamp(0.8125rem, 3.5vw, 0.9375rem); letter-spacing: -0.01em; overflow-wrap: anywhere; }
  .prod-hero .pcard p, .prod-hero .pcard .link-arrow { display: none; }
  .prod-hero .pcard::before { opacity: 0.18; }

  /* Catalogue cards become compact rows: mark | name, badge, line. */
  /* No row gap: the mark spans four rows but a card fills only two to four, and empty tracks must
     not add space. The spacing lives on the rows' own margins instead. */
  .prod-grid .pcard, .prod-layer {
    display: grid; grid-template-columns: 44px minmax(0, 1fr); column-gap: 16px; row-gap: 0;
    align-items: start; text-align: left; padding: 18px 18px 20px;
  }
  .prod-grid .pcard > .flex, .prod-layer > .flex { display: contents; }
  .prod-grid .pcard .pmark, .prod-layer .icon-ring { grid-column: 1; grid-row: 1 / span 4; width: 44px; height: 44px; }
  .prod-grid .pcard > :not(.flex):not(.cover), .prod-grid .pcard .badge, .prod-layer > :not(.flex), .prod-layer .badge { grid-column: 2; }
  .prod-grid .pcard .pcard__label, .prod-layer .prod-layer__kind { order: 1; min-height: 0; margin: 0; }
  .prod-grid .pcard h3, .prod-layer h3 { order: 2; font-size: 1.1rem; margin-top: 0; }
  .prod-grid .pcard .pcard__label + h3, .prod-layer .prod-layer__kind + h3 { margin-top: 4px; }
  .prod-grid .pcard .badge, .prod-layer .badge { order: 3; justify-self: start; margin-block: 6px 4px; }
  .prod-grid .pcard p:not(.pcard__label), .prod-layer p:not(.prod-layer__kind) { order: 4; max-width: none; font-size: 0.9rem; margin-top: 4px; }
  .prod-grid .pcard .link-arrow { display: none; }
  .prod-grid .pcard::after { left: 18px; right: auto; width: 38%; }

  .prod-tile, .prod-tile--span2 { grid-column: auto; min-height: 0; aspect-ratio: 4 / 3; }

  .prod-pipe__steps { grid-template-columns: minmax(0, 1fr); }
  .prod-pipe__step + .prod-pipe__step { border-left: 0; border-top: 1px solid var(--line); }
  .prod-pipe__step .prod-pipe__arrow, .prod-pipe__step:nth-child(2) .prod-pipe__arrow { display: grid; right: 22px; left: auto; top: auto; bottom: -15px; transform: rotate(90deg); }

  .prod-thread__marks { flex-wrap: wrap; justify-content: center; height: auto; }
  .prod-thread__marks .pmark { width: 28px; height: 28px; }
  .prod-thread__cap { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.875rem; text-align: center; }
  .prod-thread__cap li { padding: 12px 8px; }
  .prod-thread__cap li + li { border-left: 0; }
  .prod-thread__cap li:nth-child(even) { border-left: 1px solid var(--line); }
  .prod-thread__cap li:nth-child(n + 3) { border-top: 1px solid var(--line); }

  /* Taller on phones so the horizon (55% down) sits below the wrapped second action, not behind it. */
  .prod-earth { min-height: 660px; padding-top: 64px; }
}

@media (prefers-reduced-motion: reduce) {
  .prod-index__list a::after { transition: none; }
}