/*
 * A product's page, the same for every product in config/products.yml (products/show): its bar, the promise and the
 * product in its scene, a way to try it now on the page's night band, what it does beside its screen, the pinned
 * stepper of how it works, questions, and the next step with the other products. Sections a product has nothing for
 * are left out. The page is composed from the design system (10_base.css, 12_motion.css): this file arranges it, and
 * places and sizes the product cards, which are 25_products.css's own.
 *
 * Its structure is drawn in the system's lines. The bar's divider stands over the column rule of the sections that
 * split (.split), the stepper's and the questions' rows run into that rule, and the ruled rows of cells (the other
 * products, the features without a screen) run from rail to rail, so their outer edges are the rails themselves.
 */

/* ---------- On this page ---------- */
/* The product bar's height (what lines up with .split's column rule uses --split-pad, from 10_base.css) */
:root { --bar-h: 52px; }

/* ---------- The product's bar (products/_bar) ---------- */
/* On a product's page the bar is the sticky one: the site's header scrolls away above it, and anchors and focus land
   just clear of it. The header leaves its Get in touch and our number to the bar and the hero, so neither is doubled. */
body:has(.product-bar) .site-nav { position: relative; }
body:has(.product-bar) :is(.nav-cta, .nav-call__number) { display: none; }
html:has(.product-bar) { scroll-padding-top: var(--bar-h); }

/* Ruled above and below, on paper; once it's stuck at the top (the product-bar controller), it takes the header's
   blurred paper instead, and the rule above it, which would only draw along the window's edge, goes. While a night band
   passes under it, the controller gives it the night surface, so it darkens with the band instead of turning grey. */
.product-bar {
  position: sticky; top: 0; z-index: 45;
  height: var(--bar-h);
  border-block: 1px solid var(--line);
  background: var(--surface); color: var(--ink);
  view-transition-name: product-bar;
  transition: background-color var(--dur-ui) var(--ease-out), border-color var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
}
.product-bar.is-stuck {
  border-top-color: transparent;
  background: color-mix(in srgb, var(--c-paper) 85%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
}
/* On night it's a near-solid night surface without the blur, which would pull the paper above the window into a pale
   band along its top (as the site's header does on night) */
.product-bar.is-stuck.surface-night {
  background: color-mix(in srgb, var(--c-night) 97%, transparent);
  -webkit-backdrop-filter: none; backdrop-filter: none;
}
.product-bar__inner { display: flex; align-items: center; height: 100%; }

/* The name (where it stands is the hero's to say), which leads back to the top */
.product-bar__title { position: relative; display: flex; align-items: center; flex: none; min-width: 0; }
.product-bar__name {
  font-family: var(--font-display); font-size: var(--text-subheading); font-weight: 500; line-height: 1;
  letter-spacing: -0.012em; white-space: nowrap; text-decoration: none;
}

/* A link to each section, the one being read underlined along the bar's lower rule (the scroll-spy controller) */
.product-bar__links { display: none; list-style: none; }
.product-bar__links > li { display: flex; }
.product-bar__link {
  position: relative; display: flex; align-items: center; padding-inline: 12px;
  font-size: var(--text-ui); font-weight: 500; color: var(--ink-mute); text-decoration: none; white-space: nowrap;
  transition: color var(--dur-fast);
}
.product-bar__link:hover, .product-bar__link[aria-current] { color: var(--ink); }
.product-bar__link::after {
  content: ""; position: absolute; left: 12px; right: 12px; bottom: -1px; height: 1px; background: var(--ink);
  transform: scaleX(0); transform-origin: left center; transition: transform var(--dur-ui) var(--ease-out);
}
.product-bar__link[aria-current]::after { transform: none; }
.product-bar__link:focus-visible { outline-offset: -6px; }

.product-bar__action { flex: none; margin-left: auto; }

/* Wide screens: the name takes the first third of the frame, as .split's head does (10_base.css), so the links start
   at the column rule of the sections below, with a divider standing over it */
@media (min-width: 64em) {
  .product-bar__title { width: calc((100% + 2 * var(--frame-inset)) / 3 - var(--frame-inset)); }
  .product-bar__links {
    display: flex; align-self: stretch; margin-right: var(--space-5);
    padding-left: calc(var(--split-pad) - 12px); border-left: 1px solid var(--line);
  }
}
/* Phones: the name, its link as tall as the bar, beside a full-size action */
@media (max-width: 47.99em) {
  .product-bar__name { font-size: 1.125rem; }
  .product-bar__name::before { content: ""; position: absolute; inset: -12px 0; }
  .product-bar__action .btn--sm { --btn-h: 44px; }
}

/* ---------- The promise ---------- */
.product-hero { padding-top: clamp(40px, 5.5vw, 88px); }

/* "Products / HeyHi Voice ── ● Live", in the kicker's mono: the way back, the product, and where it stands */
.product-hero__kicker { flex-wrap: wrap; gap: 8px 12px; margin-bottom: clamp(20px, 2.4vw, 36px); }
.product-hero__crumb { color: inherit; text-decoration: none; transition: color var(--dur-fast); }
.product-hero__crumb:hover { color: var(--ink); }
.product-hero__name { display: inline-flex; align-items: center; gap: 12px; color: var(--ink); }
.product-hero__name::before { content: "/"; content: "/" / ""; color: var(--ink-mute); }
/* Its status, in the status's own sentence case (10_base.css), and how far along it is when its entry says ("Early
   prototype"), kept together on one line, after a short rule; on phones, where the row wraps, without the rule */
.product-hero__where { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; }
.product-hero__where::before { content: ""; width: 32px; height: 1px; margin-inline: 2px; background: var(--line-strong); }
.product-hero__where .status { text-transform: none; }
.product-hero__progress {
  font-family: var(--font-text); font-size: var(--text-caption); font-weight: 500; letter-spacing: 0; text-transform: none;
  color: var(--ink-mute);
}
.product-hero__progress::before { content: "·"; content: "·" / ""; margin-right: 12px; }
@media (max-width: 47.99em) { .product-hero__where::before { display: none; } }

.product-hero__title { max-width: 14em; }
.product-hero__row { display: grid; gap: var(--space-6); margin-top: clamp(28px, 3vw, 48px); }
.product-hero__intro { max-width: 34em; }
@media (min-width: 64em) {
  .product-hero__row { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); column-gap: var(--col-gap); align-items: end; }
  .product-hero__actions { justify-content: flex-end; }
}
/* On phones the actions run the full width, as the homepage's do */
@media (max-width: 47.99em) { .product-hero__actions .btn { flex: 1 1 auto; } }

/* The scene ends the section: it opens to the window's full width as the page scrolls (10_base.css), and its lower
   edge meets the next band. It's as tall as half the window is wide, within what a screen shows. The card never takes
   more than about a third of the photograph's width, so on narrower screens it keeps to its side and clear of the
   people in the picture. */
.product-hero__scene { margin-top: clamp(48px, 5.5vw, 88px); }
.product-hero__scene .scene__card { --card-w: 400px; --card-y: 8%; --card-x: 3.5%; }
@media (min-width: 48em) {
  .product-hero:has(.product-hero__scene) { padding-bottom: 0; }
  .product-hero__scene .scene__photo { aspect-ratio: auto; height: min(50vw, 84svh, 820px); }
  .product-hero__scene .scene__card { width: min(var(--card-w), 34%); }
}
/* On phones the card sits across the photograph's lower edge, so the section keeps a margin under it */
@media (max-width: 47.99em) {
  .product-hero { padding-bottom: var(--space-8); }
  .product-hero__scene .scene__photo { --scene-ratio-sm: 4 / 3.7; }
}

/* Without a photograph, the product is a concept on a lit mat: see "The product as a concept", at the end */
.product-hero:has(.product-hero__stage) { padding-bottom: clamp(56px, 7vw, 112px); }

/* ---------- Try it: the night band ---------- */
.product-demo__layout { display: grid; gap: var(--space-8); }
.product-demo__text { display: grid; gap: var(--space-5); align-content: center; justify-items: start; }
.product-demo__text .kicker { margin-bottom: var(--space-1); }
.product-demo__text .t-lead { max-width: 27em; }
.product-demo__actions { margin-top: var(--space-3); }
@media (min-width: 64em) {
  .product-demo__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--col-gap) * 2); align-items: center; }
}

/* The stage the card stands on: a raised night panel lit from its top edge, a wash of white falling from a brighter
   hairline there, with the product and where it stands in its upper corners */
.product-demo__stage {
  position: relative; display: grid; place-items: center;
  min-height: clamp(400px, 36vw, 540px);
  padding: clamp(76px, 7.5vw, 112px) clamp(20px, 4vw, 64px) clamp(56px, 5.5vw, 88px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 80% 62% at 50% 0%, color-mix(in srgb, var(--c-white) 7%, transparent), transparent 72%),
    var(--c-night-raised);
}
.product-demo__stage::before {
  content: ""; position: absolute; top: -1px; left: 14%; right: 14%; height: 1px; pointer-events: none;
  background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--c-white) 30%, transparent), transparent);
}
.product-demo__stage > .ui-card { width: min(100%, 440px); }
.product-demo__corner {
  position: absolute; top: clamp(18px, 2vw, 24px);
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; line-height: 1.3;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-mute);
}
.product-demo__corner .status { text-transform: none; }
.product-demo__corner--start { left: clamp(18px, 2.2vw, 28px); }
.product-demo__corner--end { right: clamp(18px, 2.2vw, 28px); }
@media (max-width: 47.99em) {
  .product-demo__stage { min-height: 0; padding-inline: var(--space-3); }
}

/* ---------- Features ---------- */
/* Beside a screen, the features run down a ruled list, and the screen, on a warm panel, stays in view while they pass */
.product-does__layout { display: grid; gap: var(--space-8); align-items: start; }
.feature { display: grid; gap: var(--space-2); align-content: start; padding-block: clamp(24px, 2.6vw, 36px) clamp(28px, 3vw, 40px); }
.feature__text { max-width: 32em; color: var(--ink-soft); }
.product-does__screen { padding: clamp(16px, 3.6vw, 56px); border-radius: var(--radius-lg); background: var(--surface-raised); }
@media (min-width: 64em) {
  .product-does__layout { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); column-gap: calc(var(--col-gap) * 2); }
  .product-does__screen { position: sticky; top: calc(var(--bar-h) + 40px); }
}
@media (max-width: 47.99em) {
  .product-does__screen { margin-inline: calc(-1 * var(--space-2)); border-radius: var(--radius-md); }
}

/* Without one, they fill a grid ruled into cells, three abreast (two when there are two or four), from rail to rail */
.product-does__layout--plain .features { display: grid; grid-template-columns: minmax(0, 1fr); }
.product-does__layout--plain .feature { padding-block: var(--space-6) var(--space-7); }
@media (min-width: 48em) {
  .product-does__layout--plain .features {
    grid-template-columns: repeat(2, minmax(0, 1fr)); margin-inline: calc(-1 * var(--frame-inset));
  }
  .product-does__layout--plain .feature { padding-inline: max(var(--frame-inset), 20px); border-left: 1px solid var(--line); }
}
@media (min-width: 64em) {
  .product-does__layout--plain .features { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .product-does__layout--plain .features:has(> :nth-child(4):last-child, > :nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.product-does__layout--plain .features:has(> :only-child) { grid-template-columns: minmax(0, 1fr); }

/* ---------- How it works: the pinned stepper ---------- */
/* The head stays in view under the bar while the steps pass, each a row run into the column rule: its number in the
   serif, its title and its words, with room around them but no more than they need */
.product-steps .split__aside > *, .product-faq .split__aside > * { top: calc(var(--bar-h) + 40px); }
/* Stacked, the split's own gap is all the head needs under it */
:is(.product-steps, .product-faq) .split__aside .section-head { margin-bottom: 0; }
.steps { list-style: none; border-bottom: 1px solid var(--line); }
.step {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--space-4) var(--col-gap); align-content: start;
  padding-block: clamp(28px, 3.2vw, 48px) clamp(36px, 4vw, 56px);
  border-top: 1px solid var(--line);
}
.step__number {
  font-family: var(--font-display); font-size: var(--text-title); font-weight: 400; line-height: 0.9;
  letter-spacing: var(--tracking-title); font-variant-numeric: tabular-nums lining-nums;
}
.step__body { display: grid; gap: var(--space-2); align-content: start; }
.step__text { max-width: 32em; font-size: var(--text-body); color: var(--ink-soft); }

@media (min-width: 48em) {
  .step { grid-template-columns: minmax(0, 2fr) minmax(0, 5fr); }
  .step__body { padding-top: 0.45em; }
}
@media (min-width: 64em) {
  .steps { margin-left: calc(-1 * var(--split-pad)); }
  .step { padding-left: var(--split-pad); }
  /* Where each step's rule meets the column rule, a node, filled once the steps have reached it */
  .step::before {
    content: ""; position: absolute; left: -4px; top: -4px; width: 7px; height: 7px; border-radius: 50%;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong);
    transition: background-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out);
  }
  .product-steps__layout.is-active .step:is(.is-current, .is-past)::before { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); }
}
/* While the steps are read, the others step back a little (never below the contrast their words need), and a line
   fills down the column rule as they pass the window's middle (a view timeline, where the browser has one) */
@media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
  .product-steps__layout.is-active .step > * { opacity: 0.62; transition: opacity var(--dur-reveal) var(--ease-out); }
  .product-steps__layout.is-active .step.is-current > * { opacity: 1; }
}
@supports (animation-timeline: view()) {
  @media (min-width: 64em) and (prefers-reduced-motion: no-preference) {
    .product-steps__main { position: relative; view-timeline: --steps block; view-timeline-inset: 50% 50%; }
    .product-steps__main::before {
      content: ""; position: absolute; z-index: 1; top: 0; bottom: 0; left: -1px; width: 1px; pointer-events: none;
      background: var(--ink); transform: scaleY(0); transform-origin: 50% 0;
      animation: steps-progress linear both; animation-timeline: --steps; animation-range: cover 0% cover 100%;
    }
  }
}
@keyframes steps-progress { to { transform: scaleY(1); } }

/* The map under the pinned heading: a node for each step, its number, joined by a line that fills to the step being
   read, whose title stands beside its node. Without the stepper it's a plain index, every title showing. It's only on
   wide screens, where the head stays in view beside the steps. */
.step-map { display: none; }
@media (min-width: 64em) {
  .step-map { list-style: none; display: grid; gap: 20px; margin-top: var(--space-7); }
  .step-map__node { position: relative; display: flex; align-items: center; gap: var(--space-4); min-height: 30px; }
  .step-map__number {
    position: relative; z-index: 1; flex: none; display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%;
    background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-strong);
    font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; line-height: 1; letter-spacing: 0.02em;
    color: var(--ink-mute); font-variant-numeric: tabular-nums;
    transition: background-color var(--dur-ui) var(--ease-out), box-shadow var(--dur-ui) var(--ease-out), color var(--dur-ui) var(--ease-out);
  }
  .step-map__node:not(:last-child)::before, .step-map__node:not(:last-child)::after {
    content: ""; position: absolute; left: 14.5px; top: 30px; width: 1px; height: 20px; background: var(--line-strong);
  }
  .step-map__node:not(:last-child)::after {
    background: var(--ink); transform: scaleY(0); transform-origin: center top; transition: transform var(--dur-ui) var(--ease-out);
  }
  .step-map__node.is-past::after { transform: none; }
  .step-map__node.is-past .step-map__number { box-shadow: inset 0 0 0 1px var(--ink); color: var(--ink); }
  .step-map__node.is-current .step-map__number { background: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); color: var(--on-ink); }
  .step-map__title { min-width: 0; font-size: var(--text-small); font-weight: 600; line-height: 1.3; color: var(--ink); }
  .product-steps__layout.is-active .step-map__title {
    opacity: 0; transform: translate3d(-6px, 0, 0); transition: opacity var(--dur-ui) var(--ease-out), transform var(--dur-ui) var(--ease-out);
  }
  .product-steps__layout.is-active .step-map__node.is-current .step-map__title { opacity: 1; transform: none; }
}

/* ---------- Questions ---------- */
/* The questions run into the column rule, ruled off row by row; a plus turns as an answer opens, and the answer's
   height eases open where the browser can animate it */
.faq-ask { color: var(--ink-soft); }
.faqs { border-bottom: 1px solid var(--line); }
.faq { border-top: 1px solid var(--line); }
.faq__question {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-6);
  min-height: 44px; padding-block: clamp(20px, 2.2vw, 30px); cursor: pointer; list-style: none;
  font-size: var(--text-subheading); font-weight: 500; line-height: 1.3; letter-spacing: -0.012em;
}
.faq__question::-webkit-details-marker { display: none; }
.faq__question:focus-visible { outline-offset: -2px; }
.faq__icon { position: relative; flex: none; width: 14px; height: 14px; color: var(--ink-soft); transition: transform var(--dur-ui) var(--ease-in-out), color var(--dur-fast); }
.faq__icon::before, .faq__icon::after { content: ""; position: absolute; left: 0; right: 0; top: calc(50% - 0.75px); height: 1.5px; background: currentColor; }
.faq__icon::after { transform: rotate(90deg); }
.faq__question:hover .faq__icon { color: var(--ink); }
.faq[open] .faq__icon { color: var(--ink); transform: rotate(45deg); }
.faq::details-content {
  block-size: 0; overflow-y: clip;
  transition: block-size var(--dur-ui) var(--ease-in-out), content-visibility var(--dur-ui) var(--ease-in-out) allow-discrete;
}
.faq[open]::details-content { block-size: auto; }
.faq__answer { max-width: 40em; padding: 0 var(--space-8) clamp(24px, 2.6vw, 34px) 0; color: var(--ink-soft); }
@media (min-width: 64em) {
  .faqs { margin-left: calc(-1 * var(--split-pad)); }
  .faq__question, .faq__answer { padding-left: var(--split-pad); }
}
@media (max-width: 47.99em) {
  .faq__answer { padding-right: 0; }
}

/* ---------- The next step, and the other products ---------- */
/* The invitation at nearly the headline's size, its actions at the end of its last line */
.product-next__head { display: grid; gap: var(--space-6); }
.product-next__head > .kicker { margin-bottom: var(--space-1); }
.product-next__title {
  max-width: 13em;
  font-size: calc(var(--text-hero) * 0.8); line-height: var(--leading-hero); letter-spacing: var(--tracking-hero);
}
@media (min-width: 64em) {
  .product-next__head { grid-template-columns: minmax(0, 8fr) minmax(0, 4fr); column-gap: var(--col-gap); align-items: end; }
  .product-next__head > .kicker { grid-column: 1 / -1; }
  .product-next__actions { justify-content: flex-end; padding-bottom: 0.4em; }
}

/* More from HeyHi: one row ruled into cells from rail to rail, each cell a link, its arrow moving when pointed at */
.product-more { margin-top: clamp(96px, 10vw, 168px); }
.product-more__title { margin-bottom: var(--space-5); }
.product-more__list { list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); border-top: 1px solid var(--line); }
.product-more__item { border-bottom: 1px solid var(--line); }
.product-more__link {
  display: grid; grid-template-rows: auto auto 1fr; gap: var(--space-3); height: 100%;
  padding-block: var(--space-5) var(--space-6); color: var(--ink); text-decoration: none;
  transition: background-color var(--dur-ui) var(--ease-out);
}
.product-more__top { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); margin-bottom: var(--space-4); }
.product-more__arrow { width: 18px; height: 18px; color: var(--ink-mute); transition: transform var(--dur-ui) var(--ease-out), color var(--dur-fast); }
.product-more__name { font-family: var(--font-display); font-size: clamp(1.625rem, 1.3rem + 0.9vw, 2.125rem); line-height: var(--leading-heading); letter-spacing: var(--tracking-heading); }
.product-more__line { max-width: 26em; font-size: var(--text-small); line-height: 1.55; color: var(--ink-soft); }
.product-more__link:hover { background: color-mix(in srgb, var(--ink) 3%, transparent); }
.product-more__link:hover .product-more__arrow { color: var(--ink); transform: translate(2px, -2px); }
.product-more__link:focus-visible { outline-offset: -2px; }
@media (min-width: 48em) {
  .product-more__list {
    grid-template-columns: repeat(auto-fit, minmax(13.5rem, 1fr));
    margin-inline: calc(-1 * var(--frame-inset)); border-bottom: 1px solid var(--line);
  }
  .product-more__item { border-bottom: 0; border-left: 1px solid var(--line); }
  .product-more__link { min-height: clamp(220px, 19vw, 272px); padding: var(--space-5) max(var(--frame-inset), 20px) var(--space-6); }
}

/* ---------- The product as a concept, until it has a photograph (products/sections/_hero) ---------- */
/* A product that nobody can use yet shows a concept of itself rather than a photograph: a mat as wide as the scenes,
   lit from above (a wash of white falling from a bright top edge onto the warm panel, a little shade at the foot) and
   close around what it holds, so the composition is in view from the start. Its card stands large in front; behind it,
   higher and to the left, its own screen. A mono label in the corner says it's a concept. The screen arrives, then the
   card, whose rows settle in; then the item the card is waiting on (the one that's due) breathes, as a live mark does,
   while motion is welcome. A product without a screen shows its card alone. */
.product-concept {
  position: relative; isolation: isolate; overflow: hidden;
  display: grid; place-items: center;
  margin-top: clamp(36px, 3.4vw, 52px);
  padding: clamp(56px, 4.4vw, 64px) clamp(16px, 5vw, 80px) clamp(44px, 4vw, 60px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background:
    radial-gradient(ellipse 70% 62% at 50% 0%, color-mix(in srgb, var(--c-white) 80%, transparent), transparent 72%),
    radial-gradient(ellipse 85% 42% at 50% 112%, color-mix(in srgb, var(--c-ink) 6%, transparent), transparent 72%),
    var(--c-panel);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--c-white) 90%, transparent);
}
.product-concept__label {
  position: absolute; top: clamp(18px, 2vw, 24px); left: clamp(18px, 2.2vw, 28px);
  font-family: var(--font-mono); font-size: var(--text-label); font-weight: 500; line-height: 1.3;
  letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--ink-mute);
}

/* The two cards share one cell: the screen at the back, the card in front, lower and to the right */
.product-concept__stack { display: grid; width: min(100%, 940px); }
.product-concept__stack > * { grid-area: 1 / 1; min-width: 0; }
.product-concept__back { justify-self: start; align-self: start; width: 66%; }
.product-concept__back > .ui-card { box-shadow: var(--shadow-pop); }
.product-concept__front { position: relative; z-index: 1; justify-self: end; align-self: start; width: min(100%, 470px); margin-top: clamp(56px, 5vw, 72px); }
.product-concept--single .product-concept__front { justify-self: center; margin-top: 0; }

/* The cards' rows settle in as each arrives */
@media (scripting: enabled) and (prefers-reduced-motion: no-preference) {
  :is(.product-concept__back, .product-concept__front).is-in :is(.checklist__item, .pipeline__row, .call__line) {
    animation: concept-row var(--dur-reveal) var(--ease-out) backwards;
  }
  :is(.product-concept__back, .product-concept__front).is-in :is(.checklist__item, .pipeline__row, .call__line):nth-child(1) { animation-delay: 0.64s; }
  :is(.product-concept__back, .product-concept__front).is-in :is(.checklist__item, .pipeline__row, .call__line):nth-child(2) { animation-delay: 0.74s; }
  :is(.product-concept__back, .product-concept__front).is-in :is(.checklist__item, .pipeline__row, .call__line):nth-child(3) { animation-delay: 0.84s; }
  :is(.product-concept__back, .product-concept__front).is-in :is(.checklist__item, .pipeline__row, .call__line):nth-child(4) { animation-delay: 0.94s; }
  :is(.product-concept__back, .product-concept__front).is-in :is(.checklist__item, .pipeline__row, .call__line):nth-child(n + 5) { animation-delay: 1.04s; }
}
@keyframes concept-row { from { opacity: 0; transform: translate3d(0, 10px, 0); } }

/* The loop: once the card is in, the mark of the item it's waiting on breathes, as a live status does (10_base.css) */
@media (prefers-reduced-motion: no-preference) {
  .product-concept__front .checklist__item--due .checklist__mark { position: relative; }
  .product-concept__front .checklist__item--due .checklist__mark::after {
    content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--amber); pointer-events: none; opacity: 0;
    animation: status-breathe 2.4s var(--ease-in-out) 2.4s infinite;
  }
}

/* Phones: the two cards stack, the card overlapping the screen's lower part */
@media (max-width: 47.99em) {
  .product-concept { padding: 56px var(--space-4) var(--space-6); border-radius: var(--radius-md); }
  .product-concept__label { top: 18px; left: var(--space-4); }
  .product-concept__back { width: 90%; }
  .product-concept__front { width: 92%; margin-top: 120px; }
}