/* ============================================================
   Tiempo — /product
   The offer grid, the tabbed use-case board, the how-it-works channel
   simulator, the spoke index and their supporting diagrams.
   ============================================================ */

/* =========================================================================
   MARKETING SECTIONS
   Promoted from the homepage into the shared library so new pages can reuse
   them. Documented in reference-docs/style-guide.md §5.13–5.16 and rendered
   live in site/_wip/components.html. Match those snippets verbatim.
   ========================================================================= */

/* §5.13 / §5.14 — Overlay hero (image or video behind text) */
.overlay-hero {
  position: relative;
  width: 100%;
  height: var(--hero-h);
  overflow: hidden;
}

.overlay-hero img,
.overlay-hero video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.overlay-hero img { filter: brightness(0.65); }

.overlay-hero__fallback {
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, var(--media-mid) 0%, #2e0b09 45%, #190302 100%);
  z-index: 0;
}

.overlay-hero__content {
  position: absolute;
  bottom: 44px;
  left: var(--pad-x);
  right: var(--pad-x);
  max-width: 620px;
  z-index: 1;
}

.overlay-hero__content h1 {
  font-family: 'F37 Bobby', Georgia, serif;
  font-weight: 300;
  font-size: var(--fs-hero);
  color: var(--crema);
  line-height: 1.1;
  letter-spacing: -0.02em;
}

.overlay-hero__content h1 em { font-style: italic; }

.overlay-hero__content p {
  color: rgba(var(--crema-rgb), 0.72);
  margin-top: 12px;
  max-width: 560px;
  line-height: 1.5;
}

@media (max-width: 767px) {
  .overlay-hero__content h1 { font-size: var(--fs-h1); }
}

/* ---- Tab pills + panels (interactive) ---- */
.tab-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 32px;
}

.tab-pill {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid rgba(var(--media-rgb), 0.25);
  background: transparent;
  color: var(--media);
  cursor: pointer;
  transition: background 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}

.tab-pill:hover { border-color: var(--clockwork); color: var(--clockwork); }

.tab-pill.active { background: var(--clockwork); color: var(--crema); border-color: var(--clockwork); }

.tab-panels { display: grid; }

.tab-panel {
  grid-area: 1 / 1;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease;
}

.tab-panel.active { opacity: 1; visibility: visible; }

.tabs--dark .tab-pill { border-color: rgba(var(--crema-rgb), 0.3); color: var(--crema); }

.tabs--dark .tab-pill:hover { border-color: var(--crema); }

.tabs--dark .tab-pill.active { background: var(--crema); color: var(--media); border-color: var(--crema); }

/* ═══════════════════════════════════════════════════════════════
   PRODUCT PAGE SECTIONS
   Section rhythm mirrors a 12-column, 1216-of-1440 reference grid:
   header block sits above the content with an 80px gap, content
   cards run 440px tall, and the offer grid alternates 6/3/3 and
   3/3/6 spans so neither row reads as a plain card wall.
   ═══════════════════════════════════════════════════════════════ */

/* ── Section header: heading + lede, left aligned ── */
.sec-head { max-width: 840px; margin: 0 0 56px; }

.sec-head--wide { max-width: 1064px; }

.sec-head--center { margin-inline: auto; text-align: center; }

/* The assistant band follows its heading directly, so it needs less air
   than the default 56px between the two */

/* The hero's jump link lands here, so the heading has to clear the fixed nav.
   72px, the same figure #use-cases already uses on this page. */
#what-you-get { scroll-margin-top: 72px; }

/* Secondary hero CTA. Same treatment and position as the homepage hero, which
   page-service.css and page-work.css also carry verbatim; see the note in
   CLAUDE.md about where a shared rule belongs before copying it a fifth time.
   .overlay-hero is position: relative, so this anchors to the hero box. It
   sits below .overlay-hero__content's 44px and centres, while the content is
   left-aligned in the gutter, so the two never meet on a wide screen. */
.hero-secondary-cta {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  color: rgba(var(--crema-rgb), 0.65);
  font-size: var(--fs-body);
  font-family: var(--font-body);
  text-decoration: none;
  transition: color 0.2s;
  white-space: nowrap;
  z-index: 5;
}

.hero-secondary-cta:hover { color: rgba(var(--crema-rgb), 0.9); text-decoration: underline; }

/* Mobile lives with its base rule on purpose. This override used to sit ~70
   lines above .hero-secondary-cta and never applied: same single-class
   specificity, so the later declaration won whatever the media query said,
   and the link stayed at bottom: 28px where it overlapped the Book a Call
   button by 14px at 375. CLAUDE.md rule 3 is exactly this. */
@media (max-width: 767px) {
  .hero-secondary-cta { bottom: 8px; font-size: var(--fs-sm); }
}

.sec-head h2 { font-size: var(--fs-h1); line-height: 1.1; margin: 0 0 18px; }

.sec-head__lede {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  margin: 0;
  opacity: 0.92;
}

/* ── Offer grid ──────────────────────────────────────────────────
   One full-bleed card leads, equal cards follow. Heading pinned to
   the top, copy to the foot, media filling the space between, so
   every card reads the same way regardless of its span. */
/* 28px above the heading, the same band the homepage uses */
.offer-section { padding: var(--band) var(--pad-x); background: var(--crema); }

.offer-section__inner { max-width: var(--content-max); margin: 0 auto; }

.offer-grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  gap: 18px;
}

.offer-card {
  grid-column: span 4;
  min-height: 304px;
  position: relative;
  border-radius: 16px;
  overflow: hidden;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 26px 28px;
  color: var(--crema);
}

.offer-card--wide { grid-column: span 12; min-height: 256px; }

.offer-card { background: var(--media); }

.offer-card--half { grid-column: span 6; }

.offer-card__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -2;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
}

.offer-card:hover .offer-card__img { transform: scale(1.04); }

/* Placeholder stand-in for a card image. Hatched neutral block plus a
   corner tag, so an empty slot never reads as an intentionally dark photo. */
.offer-card__ph {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    repeating-linear-gradient(45deg,
      rgba(var(--crema-rgb), 0.055) 0 8px,
      rgba(var(--crema-rgb), 0) 8px 16px),
    var(--media);
}

/* Corner tag so an empty slot reads as awaiting art, not as a dark photo. */
.offer-card__ph::after {
  content: "Image";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  color: rgba(var(--crema-rgb), 0.5);
  border: 1px dashed rgba(var(--crema-rgb), 0.3);
  padding: 5px 12px;
  border-radius: 4px;
}

/* Any placeholder can name what belongs in the slot. */
.offer-card__ph[data-label]::after { content: attr(data-label); }

.offer-card__ph[data-label=""]::after { display: none; }

.offer-card h3 {
  font-family: 'F37 Bobby', Georgia, serif;
  font-weight: 300;
  font-size: var(--fs-h2);
  color: var(--crema);
  margin: 0;
}

.offer-card p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(var(--crema-rgb), 0.86);
  margin: 0;
  max-width: 48ch;
}

.audience .sec-head__lede { color: rgba(var(--crema-rgb), 0.78); }

.split-feature .sec-head { margin-bottom: 36px; }

.split-feature .sec-head__lede { color: rgba(var(--crema-rgb), 0.78); }

/* ── Spoke grid: the city and role index ── */
.spoke-section { padding: var(--band) var(--pad-x); background: var(--crema); }

.spoke-section__inner { max-width: var(--content-max); margin: 0 auto; }

.spoke-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 14px;
}

.spoke-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 24px;
  border: 1px solid rgba(var(--sand-rgb), 0.28);
  border-radius: 12px;
  background: rgba(var(--sand-rgb), 0.05);
  color: var(--clockwork);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-body);
  text-decoration: none;
  transition: background-color 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.spoke-link:hover {
  background: rgba(var(--sand-rgb), 0.11);
  border-color: var(--clockwork);
  transform: translateY(-2px);
}

.spoke-link svg { flex: 0 0 auto; }

@media (max-width: 1024px) {
  /* 2-up, with the wide card and the trailing card filling their row
     so an odd count never leaves a hole. */
  .offer-card, .offer-card--half { grid-column: span 6; min-height: 256px; }
  .offer-card--wide,
  .offer-card:last-child { grid-column: span 12; }
  .offer-card--wide { min-height: 224px; }
}

@media (max-width: 767px) {
  /* Product page sections drop to the homepage's 20px mobile band.
     .model and .faq--clockwork take the same drop further down the file,
     after their own base rules. */
  .offer-section, .spoke-section {
    padding: var(--band-sm) var(--pad-x);
  }
  .sec-head { margin-bottom: 36px; }
  .offer-grid { gap: 12px; }
  .offer-card, .offer-card--wide, .offer-card--half { grid-column: span 12; min-height: 208px; }
  .offer-card { padding: 20px 22px; }
  .spoke-grid { grid-template-columns: 1fr; }
}

/* ── Product page surface alternation ────────────────────────────
   The product page runs crema / clockwork / crema / clockwork down
   the page. These modifiers flip the surface and everything that
   has to move with it, so no page-level overrides are needed. */

/* Offer grid on clockwork */
.offer-section--clockwork { background: var(--clockwork); }

.offer-section--clockwork .sec-head h2 { color: var(--crema); }

.offer-section--clockwork .sec-head__lede { color: rgba(var(--crema-rgb), 0.82); }

/* Spoke index on clockwork. The link pills invert: the golden tint reads as
   mud on this surface, so they take a cream wash and a cream border. */
.spoke-section--clockwork { background: var(--clockwork); }

.spoke-section--clockwork .sec-head h2 { color: var(--crema); }

.spoke-section--clockwork .sec-head__lede { color: rgba(var(--crema-rgb), 0.82); }

.spoke-section--clockwork .spoke-link {
  border-color: rgba(var(--crema-rgb), 0.28);
  background: rgba(var(--crema-rgb), 0.06);
  color: var(--crema);
}

.spoke-section--clockwork .spoke-link:hover {
  background: rgba(var(--crema-rgb), 0.12);
  border-color: var(--crema);
}

/* ═══════════════════════════════════════════════════════════════
   OFFER-CARD DIAGRAMS (.od) — waitlist-bento fidelity
   Absolute nodes over an SVG layer of animated dashed connectors,
   mirroring site/waitlist.html's .wl-diagram system. Node fills
   stay within Crema / Media Noche / Honey. Animations arm when the
   card's own .reveal observer adds .is-visible; reduced-motion
   freezes everything to final state.
   ═══════════════════════════════════════════════════════════════ */
.od { position: relative; flex: none; height: 190px; margin: 16px 0; }

/* Copy pins to the card foot so the diagram band sits at one height
   everywhere. On a diagram card the heading sits under the figure, so the
   heading takes the push and the copy follows straight after it. */
.offer-card > p { margin-top: auto; }

/* On a diagram card the heading sits directly under the figure, with no
   gap of its own. The figure band is a fixed height, so headings line up
   across the row and the slack drops to the card foot. */
/* A 28px display heading does not want the body's 1.85 leading. Tightening
   it is what closes the gap to the copy; the top margins add back what the
   leading used to hold, so only the heading-to-copy gap changes. */
.offer-card > .od ~ h3 { line-height: 1.2; margin-top: -7px; }

.offer-card > .od ~ h3 + p { margin-top: 6px; margin-bottom: auto; }

.od-svg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 0;
}

.od-line {
  fill: none; stroke: rgba(var(--crema-rgb), 0.5); stroke-width: 1.5;
  stroke-dasharray: 3 5; vector-effect: non-scaling-stroke;
  animation: od-flow 1.1s linear infinite; animation-play-state: paused;
}

.od-line--honey { stroke: rgba(var(--honey-rgb), 0.85); }

.offer-card.is-visible .od-line { animation-play-state: running; }

.od-node {
  position: absolute; transform: translate(-50%, -50%); z-index: 1;
  opacity: 0; animation: od-fade 0.55s ease forwards; animation-play-state: paused;
}

.offer-card.is-visible .od-node { animation-play-state: running; }

/* Media Noche box (default), Honey box, Crema box */
.od-chip {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.72rem; line-height: 1.25; white-space: nowrap;
  padding: 7px 12px; border-radius: 9px;
  background: var(--media);
  border: 1px solid rgba(var(--crema-rgb), 0.28);
  color: rgba(var(--crema-rgb), 0.92);
}

.od-chip--honey { background: var(--honey); border-color: var(--honey); color: var(--crema); font-weight: 500; }

.od-chip--crema { background: var(--crema); border-color: var(--crema); color: var(--media); font-weight: 500; }

/* The assistant: honey pill with headshot + pulsing ring */
.od-pill {
  display: flex; align-items: center; gap: 10px;
  background: var(--honey); border-radius: 40px;
  padding: 6px 16px 6px 6px; z-index: 2;
}

.od-pill::after {
  content: ""; position: absolute; inset: -6px; border-radius: 46px;
  border: 1.5px solid rgba(var(--honey-rgb), 0.65);
  animation: od-ring 2.6s ease-out infinite; animation-play-state: paused;
}

.offer-card.is-visible .od-pill::after { animation-play-state: running; }

.od-pill img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(var(--crema-rgb), 0.5); flex-shrink: 0;
}

.od-pill span {
  font-family: 'DM Sans', sans-serif; font-size: 0.8rem;
  color: var(--crema); font-weight: 500; white-space: nowrap;
}

/* Photo node: avatar over a small label */
.od-ava {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  width: 82px; text-align: center;
}

.od-ava img {
  width: 40px; height: 40px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(var(--crema-rgb), 0.22); background: var(--media-warm);
}

.od-ava span {
  font-family: 'DM Sans', sans-serif; font-size: 0.66rem; line-height: 1.2;
  color: rgba(var(--crema-rgb), 0.72);
}

/* ── Graph: the roster drawn as a network rather than a list. A
      triangulated plexus, popping in from the middle out, with three live
      spokes running out from the user. Link opacity is set per line by the
      script, so the mesh reads with depth instead of flat. ── */
.od-graph { position: absolute; inset: 0; width: 100%; height: 100%; }

.od-graph__edge {
  fill: none; stroke: rgba(var(--crema-rgb), 0.16); stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.od-graph__node {
  fill: rgba(var(--crema-rgb), 0.14); stroke: rgba(var(--crema-rgb), 0.42);
  stroke-width: 1; vector-effect: non-scaling-stroke;
  opacity: 0; transform-box: fill-box; transform-origin: center;
  animation: od-pop 0.5s ease forwards; animation-play-state: paused;
}

/* A handful of nodes carry more weight, the way the reference art has a
   few dots sitting forward of the mesh */
.od-graph__node--bright { fill: rgba(var(--crema-rgb), 0.4); stroke: rgba(var(--crema-rgb), 0.7); }

/* The dots the live lines run through */
.od-graph__node--lit { fill: rgba(var(--honey-rgb), 0.5); stroke: var(--honey); }

.od-graph__node--hot { fill: var(--honey); stroke: var(--honey); }

.od-graph__ico {
  fill: var(--crema);
  opacity: 0; animation: od-fade 0.5s ease forwards; animation-play-state: paused;
}

.offer-card.is-visible .od-graph__node,
.offer-card.is-visible .od-graph__ico { animation-play-state: running; }

/* ── Dashboard: the same board the assistants work in, stripped back,
      with their cursors moving over it ── */
.odd-win {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  border: 1px solid rgba(var(--crema-rgb), 0.16); border-radius: 12px;
  background: rgba(var(--crema-rgb), 0.04); overflow: hidden;
}

.odd-top {
  display: flex; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid rgba(var(--crema-rgb), 0.12);
}

.odd-tab {
  font-family: 'DM Sans', sans-serif; font-size: 0.6875rem; line-height: 1;
  padding: 5px 9px; border-radius: 999px;
  color: rgba(var(--crema-rgb), 0.6); border: 1px solid rgba(var(--crema-rgb), 0.16);
}

.odd-tab.is-on { background: var(--honey); border-color: var(--honey); color: var(--crema); }

.odd-body { flex: 1; display: grid; grid-template-columns: 38px 1fr; min-height: 0; }

.odd-rail {
  display: flex; flex-direction: column; gap: 9px; padding: 12px 9px;
  border-right: 1px solid rgba(var(--crema-rgb), 0.12);
}

.odd-rail i { height: 5px; border-radius: 3px; background: rgba(var(--crema-rgb), 0.16); }

.odd-rail i:first-child { background: rgba(var(--honey-rgb), 0.7); }

.odd-main { display: flex; flex-direction: column; justify-content: center; gap: 8px; padding: 10px; }

.odd-row {
  display: flex; align-items: center; gap: 9px;
  padding: 8px 10px; border-radius: 9px;
  background: rgba(var(--crema-rgb), 0.05); border: 1px solid rgba(var(--crema-rgb), 0.1);
}

.odd-ava { width: 14px; height: 14px; border-radius: 50%; flex: none; background: rgba(var(--crema-rgb), 0.22); }

.odd-row:first-child .odd-ava { background: var(--honey); }

.odd-label {
  font-family: 'DM Sans', sans-serif; font-size: 0.6875rem; line-height: 1;
  color: rgba(var(--crema-rgb), 0.78); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.odd-tag {
  margin-left: auto; font-family: 'DM Sans', sans-serif;
  font-size: 0.625rem; line-height: 1; white-space: nowrap;
  padding: 4px 8px; border-radius: 999px;
  color: rgba(var(--crema-rgb), 0.6); border: 1px solid rgba(var(--crema-rgb), 0.18);
}

.odd-tag--live { background: var(--honey); border-color: var(--honey); color: var(--crema); }

/* Agent cursors: always moving, so the board never reads as a still.
   Named tag under the arrow, the way a shared design file looks. */
.odd-cur {
  position: absolute; z-index: 2;
  display: flex; align-items: flex-start; gap: 3px;
  animation-iteration-count: infinite; animation-timing-function: cubic-bezier(.6,0,.35,1);
  animation-play-state: paused;
}

.odd-cur svg { width: 15px; height: 15px; flex: none; display: block; }

/* Stroking the fill colour is what rounds the arrow's points */
.odd-cur path {
  fill: var(--cur); stroke: var(--cur); stroke-width: 2.4;
  stroke-linejoin: round; stroke-linecap: round;
}

.odd-cur b {
  margin-top: 9px; padding: 3px 6px; border-radius: 6px;
  font-family: 'DM Sans', sans-serif; font-weight: 500;
  font-size: 0.5625rem; line-height: 1; white-space: nowrap;
  background: var(--cur); color: var(--cur-ink);
}

.offer-card.is-visible .odd-cur { animation-play-state: running; }

/* One colour per person, so the board reads as three people, not one */
.odd-cur--a {
  --cur: var(--honey); --cur-ink: var(--crema);
  left: 16%; top: 64%; animation-name: odd-cur-a; animation-duration: 12s;
}

.odd-cur--b {
  --cur: var(--terracotta); --cur-ink: var(--media);
  left: 76%; top: 28%; animation-name: odd-cur-b; animation-duration: 15s;
}

.odd-cur--c {
  --cur: var(--crema); --cur-ink: var(--media);
  left: 44%; top: 82%; animation-name: odd-cur-c; animation-duration: 18s;
}

@media (max-width: 767px) {
  .od {
    height: auto; min-height: 0;
    display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
    gap: 10px 10px; padding: 6px 0;
  }
  /* Self-contained panels, not coordinate constellations: they hold
     their band at every width instead of reflowing into a wrap. */
  .od--graph, .od--dash { height: 190px; display: block; padding: 0; }
  .od-svg { display: none; }
  .od-node { position: static; transform: none; }
  .od-pill { flex-basis: 100%; justify-content: center; width: max-content; margin: 0 auto; }
  .od-pill::after { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .od-line, .od-pill::after, .odd-cur { animation: none !important; }
  .od-node { opacity: 1 !important; animation: none !important; }
  .od-graph__node, .od-graph__ico { opacity: 1 !important; animation: none !important; }
}

/* ── Feature list (.od-list) ────────────────────────────────────
   The waitlist's .wl-flowlist re-cut for a media card: icon rows
   that light up in sequence with a honey check. Use where a
   constellation would repeat an adjacent diagram's shape. */
.od-list {
  list-style: none; margin: 16px 0; padding: 0;
  flex: none; display: flex; flex-direction: column; justify-content: center;
  gap: 8px; max-width: 480px;
}

.od-list li {
  display: flex; align-items: center; gap: 12px;
  padding: 8px 12px; border-radius: 12px;
  background: rgba(var(--crema-rgb), 0.05);
  border: 1px solid rgba(var(--crema-rgb), 0.13);
  opacity: 0.55; transform: translateX(-5px);
  transition: opacity .4s ease, transform .4s ease, background-color .4s ease, border-color .4s ease;
}

.od-list li.lit {
  opacity: 1; transform: none;
  background: rgba(var(--honey-rgb), 0.14);
  border-color: rgba(var(--honey-rgb), 0.45);
}

.od-list-ico {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  display: grid; place-items: center;
  background: rgba(var(--crema-rgb), 0.08);
  border: 1px solid rgba(var(--crema-rgb), 0.16);
  color: var(--crema);
  transition: background-color .4s ease, border-color .4s ease;
}

.od-list li.lit .od-list-ico { background: var(--honey); border-color: var(--honey); }

.od-list-ico svg { width: 19px; height: 19px; }

.od-list-label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9rem; font-weight: 500;
  color: rgba(var(--crema-rgb), 0.9);
}

.od-list-check {
  margin-left: auto; width: 20px; height: 20px;
  display: grid; place-items: center;
  color: var(--honey); opacity: 0; transition: opacity .3s ease;
}

.od-list-check svg { width: 18px; height: 18px; }

.od-list li.lit .od-list-check { opacity: 1; }

@media (max-width: 767px) {
  .od-list { max-width: none; }
}

@media (prefers-reduced-motion: reduce) {
  .od-list li, .od-list-ico, .od-list-check { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   ASSISTANT BAND (.od-band) — Option C
   The assistant leads the offer section uncarded: a framed cycling
   portrait left, copy and quality chips right, sitting straight on
   the clockwork ground. The diagram cards below are the only cards,
   so the section stops reading as a grid of equal blocks.
   ═══════════════════════════════════════════════════════════════ */
.od-band {
  display: grid;
  grid-template-columns: 1fr;
  gap: 36px;
  align-items: stretch;
  margin-bottom: 40px;
}

/* min-width: 0 because a grid item's default min-width: auto refuses to go
   below its content's max-content width, and the chip track inside is far
   wider than the column by design. Without it that track sets the floor for
   the 1fr column and the whole band grows to 4558px. */
.od-band__copy { display: flex; flex-direction: column; padding: 8px 0; min-width: 0; }

/* The chip row spans the full band width. The track inside it is wider than
   that on purpose, and its window is what clips it back. */
.od-band__copy .od-chipflow { width: 100%; }

/* An h2 since the section head above it went: this is the section's heading
   now, and it runs at --fs-h1 the way that one did rather than the --fs-h2 it
   used as a subordinate title. */
.od-band__copy h2 {
  font-family: 'F37 Bobby', Georgia, serif;
  font-weight: 300;
  font-size: var(--fs-h1);
  color: var(--crema);
  line-height: 1.1;
  margin: 0 0 12px;
}

.od-band__copy > p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.55;
  color: rgba(var(--crema-rgb), 0.86);
  margin: 0;
  max-width: 58ch;
}

/* Emphasised words in the band copy. The same 2px and 1px the rest of the site
   underlines at, taken from .process-step-text p u rather than picked afresh.
   No decoration-color: that rule pins clockwork because it sits on cream, and
   this copy is on the clockwork band itself, so currentColor is what keeps the
   line with the type. */
.od-band__copy > p u {
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
/* Qualities re-cut as chips, pinned to the band's foot. They keep the
   .od-list classes so the light-up sequence still runs. */
.od-list--chips {
  margin: 0; max-width: none;
  display: flex; flex-direction: row; flex-wrap: nowrap;
  justify-content: flex-start;
  width: max-content;
  /* Spacing is margin-right on the chip, not gap on the track. A gap
     leaves the seam one gap short of a full set, and the row stutters
     once a lap. Same reason .chan-stack__item carries its own margin. */
  gap: 0;
  animation: stackPan var(--chip-pan) linear infinite;
}

.od-list--chips li {
  flex: 0 0 auto;
  gap: 9px;
  padding: 7px 15px 7px 9px;
  border-radius: 999px;
  margin-right: var(--chip-gap);
}

/* No disc. The glyph itself fills the footprint the circle used to hold,
   so the chip carries a mark rather than a badge. */
.od-list--chips .od-list-ico {
  width: 20px; height: 20px;
  background: none;
  border: 0;
  border-radius: 0;
}

.od-list--chips .od-list-ico svg { width: 100%; height: 100%; }

/* ── Lit chip: solid crema, clockwork type and glyph ──
   The band sits on clockwork, so a honey chip put a third warm tone a few
   pixels from the honey elsewhere on the page. A solid crema pill reverses
   the surface instead: the chip becomes the light thing on the dark ground
   and the text goes back to the section's own colour. Clockwork on crema
   measures 6.8:1. The icon keeps a tile so it still reads as an icon, now
   a clockwork wash inside the pill rather than a filled honey disc.
   Unlit chips are unchanged: they stay the translucent cream state and
   the odlist script fades each one to this on its way in. */
.od-list--chips li.lit {
  background: var(--crema);
  border-color: var(--crema);
}

/* With the disc gone the colour is the only thing that lights, so it does
   all the work the filled circle used to. The background and border have
   to be cleared again here: the base .od-list li.lit .od-list-ico rule
   that fills the disc honey is a three-class selector and outranks the
   two-class --chips rule above. */
.od-list--chips li.lit .od-list-ico {
  background: none;
  border-color: transparent;
  color: var(--clockwork);
}

.od-list--chips li.lit .od-list-label,
.od-list--chips li.lit .od-list-check { color: var(--clockwork); }

/* The base rows only transition box colours, so without these the type
   would snap to clockwork while the pill was still fading. */
.od-list--chips .od-list-ico,
.od-list--chips .od-list-label,
.od-list--chips .od-list-check { transition: color .4s ease, background-color .4s ease, border-color .4s ease, opacity .3s ease; }

/* ── The chip row runs (.od-chipflow) ───────────────────────────
   Nine chips will not sit side by side in this column, and wrapping them
   buries the last three a long way under the band. So the row runs past a
   window instead, on the same mechanism as the tools row in .chan-stack:
   the set is carried twice and the track slides left by exactly one set,
   so at the wrap set two is already where set one began and nothing moves
   on screen. To add a chip, add its <li> to BOTH sets or the seam drifts. */
.od-chipflow {
  --chip-pan: 66s;         /* one lap. 1979px of chips at about 30px a second,
                              the speed the tools row already runs at. Chip
                              widths come from fixed type and padding, so the
                              set stays that wide at every breakpoint. Retune
                              this whenever a chip is added or dropped, or the
                              row quietly runs at the wrong speed. */
  --chip-gap: 10px;
  margin-top: auto;        /* still pinned to the foot of the copy column,
                              the way the wrapped block was */
  padding-top: 24px;
}

/* The clip and the fade live on the window, not on .od-chipflow, so the
   spacing above the row stays outside the mask. Fading both ends is what
   sells it as a strip running past a window rather than a row that hits
   the column edge and stops dead. */
.od-chipflow__window {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

@media (max-width: 1024px) {
  .od-band { grid-template-columns: 1fr; gap: 20px; margin-bottom: 28px; }

}

@media (max-width: 767px) {
  .od-band { margin-bottom: 22px; }
  .od-band__copy { padding: 0; }
  /* A 40px fade eats a quarter of a 335px column, and unlike a logo a
     half-faded word is hard to read. Tighten it so the chip stays legible
     right up to the edge. */
  .od-chipflow__window {
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
            mask-image: linear-gradient(90deg, transparent, #000 18px, #000 calc(100% - 18px), transparent);
  }
}

.faq-card__a-text .a-line {
  display: block;
  opacity: 0;
  transform: translateY(10px);
  transition: opacity 0.5s ease, transform 0.6s cubic-bezier(0.16, 1, 0.3, 1);
}

/* Open state: pointer, keyboard, and touch all land here */
.faq-card:hover,
.faq-card:focus-visible,
.faq-card.tapped { height: var(--faq-card-h-open); }

.faq-card:hover .faq-card__divider,
.faq-card:focus-visible .faq-card__divider,
.faq-card.tapped .faq-card__divider { opacity: 1; }

.faq-card:hover .faq-card__a-wrap,
.faq-card:focus-visible .faq-card__a-wrap,
.faq-card.tapped .faq-card__a-wrap { max-height: 320px; }

.faq-card:hover .faq-card__a-label,
.faq-card:focus-visible .faq-card__a-label,
.faq-card.tapped .faq-card__a-label { opacity: 1; transform: translateY(0); }

.faq-card:hover .faq-card__a-text .a-line,
.faq-card:focus-visible .faq-card__a-text .a-line,
.faq-card.tapped .faq-card__a-text .a-line { opacity: 1; transform: translateY(0); }

.faq-card:hover .faq-card__a-text .a-line:nth-child(1),
.faq-card:focus-visible .faq-card__a-text .a-line:nth-child(1),
.faq-card.tapped .faq-card__a-text .a-line:nth-child(1) { transition-delay: 0.2s; }

.faq-card:hover .faq-card__a-text .a-line:nth-child(2),
.faq-card:focus-visible .faq-card__a-text .a-line:nth-child(2),
.faq-card.tapped .faq-card__a-text .a-line:nth-child(2) { transition-delay: 0.35s; }

.faq-card:hover .faq-card__a-text .a-line:nth-child(3),
.faq-card:focus-visible .faq-card__a-text .a-line:nth-child(3),
.faq-card.tapped .faq-card__a-text .a-line:nth-child(3) { transition-delay: 0.5s; }

.faq-card:hover .faq-card__a-text .a-line:nth-child(4),
.faq-card:focus-visible .faq-card__a-text .a-line:nth-child(4),
.faq-card.tapped .faq-card__a-text .a-line:nth-child(4) { transition-delay: 0.65s; }

@media (max-width: 767px) {
  .faq-card:hover, .faq-card:focus-visible, .faq-card.tapped { height: auto; }
}

@media (prefers-reduced-motion: reduce) {
  .faq-track, .faq-card, .faq-card__a-wrap, .faq-card__a-label, .faq-card__a-text .a-line { transition: none; }
}

/* ============================================================
   §10.9 Use-case explorer (.uc-*)
   The granular "what we actually do" band. Reuses the homepage
   handoff component: a segmented pill rail (icon + label, masked
   from /icons/*.svg) switching stacked panels. Two differences
   from the homepage original, both forced by the surface:
     · it sits on crema, not media, so every tint is inverted
     · the label stays --clockwork in EVERY state, so the active
       pill is a raised crema chip, not a clockwork fill
   The rail is still .tab-pills > .tab-pill[data-tab] inside a
   [data-tabs] scope, so the shared tab script drives it as-is.
   ============================================================ */

/* Neither end takes the .section default of 80px. The head comes down to
   the 28px every neighbouring band on this page runs, so the page keeps
   one rhythm; the foot matches the board-to-CTA gap, so the CTA sits in
   even space rather than floating in a deep section foot. */
#use-cases { scroll-margin-top: 72px; padding-top: 28px; padding-bottom: 34px; }

/* Lede runs clockwork here, not the default grey body colour. Full
   opacity so the token reads true (6.8:1 on crema). */
#use-cases .sec-head__lede { color: var(--clockwork); opacity: 1; }

.tab-pills--rail {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  width: max-content;
  max-width: 100%;
  margin: 0 0 40px;
  padding: 5px;
  background: rgba(var(--clockwork-rgb), 0.05);
  border: 1px solid rgba(var(--clockwork-rgb), 0.10);
  border-radius: 100px;
}

/* The homepage rail needs its own .pills-visible fade because it is not
   inside a .reveal wrapper. This one is: the section's reveal already fades
   it in on the same curve, so a second opacity animation is redundant and
   only risks stranding the rail invisible if the observer never fires. */

/* Base .tab-pill is a standalone outlined pill; inside the rail it drops its
   border and the chip carries the state. */
.tab-pills--rail .tab-pill {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: rgba(var(--clockwork-rgb), 0.86);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.tab-pills--rail .tab-pill:hover { color: var(--clockwork); }

.tab-pills--rail .tab-pill.active {
  background: var(--crema);
  color: var(--clockwork);
  box-shadow: 0 4px 14px rgba(var(--clockwork-rgb), 0.35);
}

.tab-pills--rail .tab-pill:focus-visible { outline: 2px solid var(--clockwork); outline-offset: 2px; }

/* Centred under its section head, which carries sec-head--center. The rail is
   width: max-content so it shrinks to its pills; auto margins are what centre
   that, not the justify-content it already has, which only distributes the
   pills inside the box. Scoped to the section because this is the only rail on
   the site and the next one may not want to be centred. */
#use-cases .tab-pills--rail { margin-inline: auto; }

/* Matched to the homepage's .handoff-header, which runs 10px rather than the
   18px shared by every other head on this page. The two headings are the same
   type at the same size, 40px on 44px, so the value carries over as it stands:
   16.8px optical there against 17.1px here, the 0.3px being this lede's 17px
   body against that one's 16px. Scoped to this section so the spoke index head
   further down keeps the standard spacing. */
#use-cases .sec-head h2 { margin-bottom: 10px; }

/* The shared 56px is a lot of air here, because the first spoke card carries
   20px of its own top padding underneath it and the lede adds 5px of
   half-leading above that. 32px sits between the two other heads on this page,
   which run 36px and used to run 28px. Scoped, so the shared value stands. */
#locations .sec-head { margin-bottom: 32px; }

/* Masked icon: background is currentColor, so it tracks the label
   through every state without a second colour rule. */
.tab-pill__ic {
  width: 15px; height: 15px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* ---- The board each tab swaps in ---- */
/* Flex, not a 1fr grid row: the stacked panels sit in an auto-sized grid
   row, and an fr row inside it resolves circularly and inflates. As a
   flex row the board just stretches to the panel's own used height. */
/* No crossfade on the panel itself. Two opaque clockwork boards fading
   through each other let the crema section flash between them, so the swap
   is instant and all the motion lives on the board's contents. */
.tab-panels--stretch .tab-panel { display: flex; transition: none; }

.tab-panels--stretch .uc-board { flex: 1 1 auto; min-width: 0; }

.uc-board {
  display: flex;
  flex-direction: column;
  background: var(--clockwork);
  border-radius: 16px;
  padding: 34px;
}

.uc-board__head {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid rgba(var(--crema-rgb), 0.16);
}

.uc-board__title {
  font-size: var(--fs-h2);
  color: var(--crema);
  line-height: 1.05;
  letter-spacing: -0.02em;
  margin: 0;
}

/* Four equal columns divided by hairlines. Padding rather than gap
   so the rules land in the middle of the space, not off to one side. */
.uc-groups { display: grid; grid-template-columns: repeat(4, 1fr); flex: 1 1 auto; }

.uc-group {
  padding: 0 30px;
  border-left: 1px solid rgba(var(--crema-rgb), 0.14);
}

.uc-group:first-child { padding-left: 0; border-left: none; }

.uc-group:last-child { padding-right: 0; }

.uc-group__title {
  display: flex;
  align-items: center;
  gap: 9px;
  font-family: 'F37 Bobby', Georgia, serif;
  font-weight: 300;
  font-size: 1.125rem;
  color: var(--crema);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0 0 18px;
}

.uc-group__ic {
  width: 16px; height: 16px; flex-shrink: 0;
  background: var(--crema);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

.uc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }

.uc-item {
  position: relative;
  margin: 0 -10px;
  padding: 8px 10px 8px 25px;
  border-radius: 10px;
  background: rgba(var(--crema-rgb), 0);
  /* Same chip treatment as the homepage .mail-row: 10px radius, a soft
     translucent wash, and a 3px nudge on the same 0.25s ease. */
  transition: transform 0.25s ease, background 0.25s ease;
}

.uc-item::before {
  content: '';
  position: absolute;
  left: 10px; top: 15px;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: rgba(var(--crema-rgb), 0.5);
  transition: background 0.3s ease, transform 0.3s ease;
}

.uc-item:hover {
  background: rgba(var(--crema-rgb), 0.11);
  transform: translateX(3px);
}

.uc-item:hover::before { background: var(--crema); transform: scale(1.4); }

.uc-item__name {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-weight: 500;
  font-size: 0.9375rem;
  color: var(--crema);
  line-height: 1.35;
  margin-bottom: 3px;
}

.uc-item__desc {
  display: block;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  color: rgba(var(--crema-rgb), 0.85);
  line-height: 1.5;
}

/* The section CTA sits below the board, on the crema, so it reads as one
   ask for all five tabs rather than five. */
.uc-cta { margin-top: 34px; text-align: center; }

/* The board lands before anything inside it.
   These used to key off `.reveal.is-visible`, which meant the columns rose
   at the same moment the section itself started rising: two motions on top
   of each other, and the columns finished long before the board they sit in
   had arrived. reveal.js now flips the section to `is-filled` once its own
   reveal has visually landed (data-fill on the section), so the panel
   arrives bare and then fills. Same handoff the homepage cards use.

   Keying on `.tab-panel.active` rather than the section is what makes a tab
   switch replay the cascade, and that still holds. */
#use-cases.is-holding .uc-board__head,
#use-cases.is-holding .uc-group { opacity: 0; }

/* The head carries the new pillar name, so it fades rather than sitting
   still, but it does not move: the board edge stays put through the swap. */
#use-cases.is-filled .tab-panel.active .uc-board__head {
  animation: ucFade 0.4s ease both;
}

#use-cases.is-filled .tab-panel.active .uc-group {
  animation: ucColRise 0.55s cubic-bezier(0.16,1,0.3,1) both;
}

#use-cases.is-filled .tab-panel.active .uc-group:nth-child(2) { animation-delay: 0.07s; }

#use-cases.is-filled .tab-panel.active .uc-group:nth-child(3) { animation-delay: 0.14s; }

#use-cases.is-filled .tab-panel.active .uc-group:nth-child(4) { animation-delay: 0.21s; }

@media (max-width: 1024px) {
  .uc-groups { grid-template-columns: repeat(2, 1fr); row-gap: 32px; }
  .uc-group:nth-child(odd) { padding-left: 0; border-left: none; }
  .uc-group:nth-child(even) { padding-right: 0; }
}

@media (max-width: 767px) {
  .tab-pills--rail { border-radius: 22px; margin-bottom: 26px; }
  .tab-pills--rail .tab-pill { padding: 7px 13px; }
  .uc-board { padding: 26px 22px; border-radius: 14px; }
  .uc-board__head { margin-bottom: 24px; padding-bottom: 20px; }
  .uc-cta { margin-top: 26px; }
  #use-cases { padding-bottom: 26px; }
  .uc-groups { grid-template-columns: 1fr; row-gap: 28px; }
  .uc-group { padding: 0; border-left: none; }
}

@media (prefers-reduced-motion: reduce) {
  #use-cases.is-filled .tab-panel.active .uc-group,
  #use-cases.is-filled .tab-panel.active .uc-board__head { animation: none; }
  .uc-item, .uc-item::before, .tab-pills--rail .tab-pill { transition: none; }
  .uc-item:hover { transform: none; }
}

/* ============================================================
   11.10 How it works (.hiw) — the process told twice. Numbered
   steps on the left say what happens; a message feed on the right
   shows what it sounds like. The feed is an illustration, not a
   screenshot, so it carries a visible caption.
   Surface-agnostic: colours come from currentColor and the
   --hiw-* pair, which the --clockwork modifier flips.
   ============================================================ */
.hiw-section {
  --hiw-line: rgba(var(--crema-rgb), 0.10);
  --hiw-mute: rgba(var(--crema-rgb), 0.62);
  --hiw-fill: rgba(var(--crema-rgb), 0.05);
  /* Tighter than the 80px .section band: the boxes already carry their own
     inner padding, so the full band reads as dead space on this one. */
  padding-block: 48px;
}

.hiw {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 40px;
  align-items: start;
}

/* ── Intro box. The homepage workflow boxes are a 5% tint of the accent
      over a hairline border at a 10px radius; this is the same box scaled
      up to hold a heading. ── */
.hiw__intro {
  background: var(--hiw-fill);
  border: 1px solid var(--hiw-line);
  border-radius: 12px;
  padding: 34px 34px 36px;
}

.hiw__intro h2 {
  font-size: var(--fs-h1);
  line-height: 1.1;
  margin: 0 0 20px;
}

.hiw__intro p {
  font-family: 'DM Sans', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.65;
  margin: 0 0 14px;
  opacity: 0.86;
}

.hiw__intro p:last-child { margin-bottom: 0; }

/* ── Steps ── */
.hiw__steps { list-style: none; margin: 0; padding: 0; }

.hiw-step {
  display: grid;
  grid-template-columns: 34px 1fr;
  gap: 4px 14px;
  padding: 20px 0;
  border-top: 1px solid var(--hiw-line);
}

.hiw__steps > .hiw-step:first-child { border-top: 0; padding-top: 0; }

.hiw__steps > .hiw-step:last-child { padding-bottom: 0; }

.hiw-step__no {
  grid-row: 1 / span 2;
  font-family: 'F37 Bobby', 'Georgia', serif;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--hiw-mute);
}

.hiw-step__t {
  font-size: var(--fs-h3);
  line-height: 1.25;
  margin: 0 0 6px;
}

.hiw-step__p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.65;
  margin: 0;
  opacity: 0.86;
}

/* ── Feed ── */
.hiw__feed { margin: 0; }

.hiw-day {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--hiw-mute);
  margin: 22px 0 12px;
}

.hiw-day:first-child { margin-top: 0; }

.hiw-msg {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.6;
  padding: 13px 16px;
  border: 1px solid var(--hiw-line);
  border-radius: 12px;
  margin: 0 0 9px;
  max-width: 88%;
}

.hiw-msg__who {
  display: block;
  font-size: var(--fs-micro);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  opacity: 0.6;
  margin-bottom: 5px;
}

/* Them: the solid pill, because the assistant's messages are the point.
   You: the outline, sitting back. */
.hiw-msg--them {
  background: var(--clockwork);
  border-color: var(--clockwork);
  color: var(--crema);
  border-bottom-left-radius: 5px;
}

.hiw-msg--you {
  background: var(--hiw-fill);
  margin-left: auto;
  border-bottom-right-radius: 5px;
}

.hiw__note {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-xs);
  line-height: 1.5;
  color: var(--hiw-mute);
  margin: 18px 0 0;
}

.hiw__cta { margin-top: 40px; text-align: center; }

/* When the CTA is all that is left in the band, its top margin would push
   the button off-centre against the section padding. */
.hiw__cta:first-child { margin-top: 0; }

.reveal.is-visible .hiw__intro,
.reveal.is-visible .hiw-step,
.reveal.is-visible .hiw-day,
.reveal.is-visible .hiw-msg {
  animation: hiwRise 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

.reveal.is-visible .hiw-step:nth-child(2) { animation-delay: 0.06s; }

.reveal.is-visible .hiw-step:nth-child(3) { animation-delay: 0.12s; }

.reveal.is-visible .hiw-step:nth-child(4) { animation-delay: 0.18s; }

.reveal.is-visible .hiw__feed > *:nth-child(n+2)  { animation-delay: 0.20s; }

.reveal.is-visible .hiw__feed > *:nth-child(n+4)  { animation-delay: 0.34s; }

.reveal.is-visible .hiw__feed > *:nth-child(n+6)  { animation-delay: 0.48s; }

.reveal.is-visible .hiw__feed > *:nth-child(n+8)  { animation-delay: 0.62s; }

.reveal.is-visible .hiw__feed > *:nth-child(n+10) { animation-delay: 0.76s; }

/* ── Surface modifier: the whole thing on crema ── */
.hiw-section--crema {
  --hiw-line: rgba(var(--clockwork-rgb), 0.12);
  --hiw-mute: var(--golden);
  --hiw-fill: rgba(var(--clockwork-rgb), 0.05);
}

.hiw-section--crema .hiw-msg--you { color: var(--tierrita); }

@media (max-width: 1024px) {
  .hiw { grid-template-columns: 1fr; gap: 44px; }
  .hiw-msg { max-width: 94%; }
}

@media (max-width: 767px) {
  .hiw-section { padding-block: 36px; }
  .hiw__intro { padding: 24px 22px 26px; }
  .hiw__cta { margin-top: 30px; }
  .hiw-step { padding: 16px 0; grid-template-columns: 28px 1fr; }
  .hiw-msg { max-width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .reveal.is-visible .hiw__intro,
  .reveal.is-visible .hiw-step,
  .reveal.is-visible .hiw-day,
  .reveal.is-visible .hiw-msg { animation: none; }
}

/* ============================================================
   11.11 Handoff header + meta card (.handoff-header, .handoff-meta)
   Lifted verbatim from the homepage handoff section so the product
   page runs the identical component. Two things could not come with
   it: `grid-area: meta` and `align-self: stretch`, which only mean
   something inside .handoff-panel's grid, and the cardFadeIn hook,
   which .reveal covers here. Everything else is byte-for-byte.
   Built for a var(--media) surface. Needs /icons/check.svg.
   ============================================================ */
.handoff-header { text-align: center; margin-bottom: 26px; }

.handoff-header h2 {
  font-size: var(--fs-h1);
  font-weight: 300;
  color: var(--crema);
  line-height: 1.1;
  margin-bottom: 10px;
}

.handoff-header p {
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-body);
  color: rgba(var(--crema-rgb), 0.55);
  max-width: 460px;
  margin: 0 auto;
  line-height: 1.6;
}

/* Meta card: assistant + team + TiempOS hub diagram */
.handoff-meta {
  display: flex; flex-direction: column; gap: 6px;
  background: rgba(var(--crema-rgb), 0.05);
  border: 1px solid rgba(var(--crema-rgb), 0.10);
  border-radius: 14px;
  padding: 16px 18px 12px;
  transition: border-color 0.3s ease;
}

/* Off the homepage it has no 1.55fr/1fr column to sit in, and the
   diagram's percentage positioning smears across a full-width band. */
.handoff-meta--solo { max-width: 620px; margin: 0 auto; }

.meta-top { display: flex; align-items: center; gap: 11px; }

.meta-text { display: flex; flex-direction: column; gap: 2px; }

.meta-title { font-family: 'DM Sans', sans-serif; font-size: var(--fs-xs); color: rgba(var(--crema-rgb), 0.85); }

.meta-sub { font-family: 'DM Sans', sans-serif; font-size: 0.75rem; color: rgba(var(--crema-rgb), 0.45); }

.meta-check {
  margin-left: auto;
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--honey); flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
}

.meta-check::after {
  content: ''; width: 13px; height: 13px; background: var(--crema);
  -webkit-mask: url('/icons/check.svg') center / contain no-repeat;
  mask: url('/icons/check.svg') center / contain no-repeat;
}

.meta-diagram { position: relative; flex: 1 1 auto; min-height: 190px; }

/* Outcome metrics + human-check line under the flow diagram */
.meta-foot {
  margin-top: auto; padding-top: 13px;
  border-top: 1px solid rgba(var(--crema-rgb), 0.08);
  display: flex; flex-direction: column; gap: 10px;
}

.meta-metrics { display: flex; gap: 7px; }

/* Lines are HTML elements so they share the dot's exact positioning system */
.md-lh { position: absolute; background: rgba(var(--crema-rgb), 0.18); z-index: 0; }

.md-lh { height: 1.5px; transform: translateY(-50%); }

.md-dotv {
  position: absolute; width: 7px; height: 7px;
  transform: translate(-50%, -50%);
  border-radius: 50%; background: var(--honey);
  box-shadow: 0 0 8px rgba(var(--honey-rgb), 0.55);
  z-index: 0; opacity: 0;
}

/* Node = the circle itself; labels hang off it so line endpoints hit dead centre */
.md-node {
  position: absolute; transform: translate(-50%, -50%);
  z-index: 1;
  transition: filter 0.25s ease;
}

.md-node:hover { filter: brightness(1.15); }

.md-node img {
  display: block;
  width: 34px; height: 34px; border-radius: 50%; object-fit: cover;
  border: 1px solid rgba(var(--crema-rgb), 0.25); background: var(--media-warm);
  transition: transform 0.25s ease;
}

.md-node:hover img { transform: scale(1.08); }

.md-ava {
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--bark);
  border: 1px solid rgba(var(--crema-rgb), 0.22);
  color: rgba(var(--crema-rgb), 0.85);
}

.md-ava svg { width: 16px; height: 16px; }

.md-ic {
  display: grid; place-items: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--bark);
  border: 1px solid rgba(var(--crema-rgb), 0.22);
}

.md-ic i {
  width: 15px; height: 15px; background: rgba(var(--crema-rgb), 0.85);
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

.md-ic svg { width: 15px; height: 15px; fill: rgba(var(--crema-rgb), 0.85); }

.md-lab {
  position: absolute; top: calc(100% + 5px); left: 50%; transform: translateX(-50%);
  font-family: 'DM Sans', sans-serif; font-size: 0.6rem; line-height: 1.2;
  color: rgba(var(--crema-rgb), 0.6); white-space: nowrap;
}

.md-asst {
  display: flex; flex-direction: row; align-items: center; gap: 8px;
  background: var(--honey); border-radius: 40px; padding: 5px 13px 5px 5px;
  z-index: 2;
}

.md-asst::after {
  content: ''; position: absolute; inset: -5px; border-radius: 44px;
  border: 1.5px solid rgba(var(--honey-rgb), 0.65);
  animation: hoRing 2.6s ease-out infinite;
}

.md-asst img { width: 30px; height: 30px; border-color: rgba(var(--crema-rgb), 0.5); }

.md-asst .md-lab { position: static; transform: none; font-size: 0.72rem; color: var(--crema); font-weight: 500; }

@media (hover: hover) {
  .handoff-meta:hover { border-color: rgba(var(--crema-rgb), 0.22); }
}

@media (max-width: 767px) {
  .handoff-header h2 { font-size: var(--fs-h2); }
  .meta-diagram { height: 190px; }
}

@media (prefers-reduced-motion: reduce) {
  .md-asst::after { display: none; }
  .md-dotv { display: none; }
}

/* ============================================================
   11.12 Channel chat (.chan) — the meta card with the relay diagram
   swapped for a live conversation. Three channels on the shared
   [data-tabs] machinery; each one changes the SHAPE of the window,
   not the palette, so the section still runs three colours. The
   logo is what does the recognising. Media noche only.
   ============================================================ */

/* Copy column, then the interactive block. The copy explains how the
   operation runs; the rail and card show it. */
/* Both columns sit on the section's own --pad-x gutters, so this band lines
   up with every other section on the page instead of floating inset. The
   copy column grows into the slack rather than the gap doing so. */
.chan-layout {
  display: grid;
  grid-template-columns: minmax(0, 520px) minmax(0, 620px);
  justify-content: space-between;
  gap: 64px;
  /* Stretch, not start: the copy column is the taller of the two, so the
     card takes its height from the row and lands on the section's own
     bottom padding instead of stopping short of it. */
  align-items: stretch;
}

/* The 520px column IS the measure. A 46ch cap used to sit on these, which
   at the body size resolves to 472px: the prose stopped 48px short of the
   rule under the lede while the heading and the tool bar ran the full
   width, so the column had two different right edges. 520 at this size is
   about 55ch, still a comfortable line. */
/* The section's only heading lives here, so the whole band reads off one
   left axis: text on this side, the product on the other. */
.chan__copy h2 {
  font-size: var(--fs-h1);
  line-height: 1.1;
  color: var(--crema);
  margin: 0 0 16px;
}

.chan__lede {
  font-size: 1.0625rem !important;
  line-height: 1.6 !important;
  color: rgba(var(--crema-rgb), 0.86) !important;
  margin: 0 0 26px !important;
  padding-bottom: 26px;
  border-bottom: 1px solid rgba(var(--crema-rgb), 0.12);
}

.chan__copy p {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.9375rem;
  line-height: 1.75;
  color: rgba(var(--crema-rgb), 0.72);
  margin: 0 0 14px;
}

.chan__copy p:last-child { margin-bottom: 0; }

/* ── The stack. One line of monochrome marks naming the software the work
      happens in, panning left forever. Crema at low opacity, so the row
      sits under the prose as a footnote rather than a fourth colour: the
      section still runs media noche, crema, and honey. Masked files, like
      every other icon on this page, so each mark takes its colour from the
      box. The files in /icons/logos are the official brand marks, cropped
      to their ink.

      The loop: the track carries the set TWICE and slides left by exactly
      one set. At that point set two sits where set one started, the frame
      resets, and nothing moves on screen. The spacing is margin-right, not
      gap, because gap would leave the seam half a gap short and the row
      would stutter once a lap.
      To add a tool: add its <li> to BOTH sets, or the seam drifts. ── */
.chan-stack {
  --pan: 36s;              /* one lap. 1066px of marks at about 30px a second */
  --pan-gap: 30px;
  margin: 12px 0 0;
  padding: 24px 0 0;
}

/* Sentence case at reading weight, not a spaced-out uppercase kicker. It
   names the row and then gets out of the way. Crema at 0.55 measures
   5.8:1 on media noche.
   Scoped through .chan-stack because it is a <p> inside .chan__copy, and
   that column's own paragraph rule is a two-class selector: a bare class
   here loses to it on size, colour, and the 46ch cap. */
.chan-stack .chan-stack__label {
  font-family: 'DM Sans', sans-serif;
  /* One step up the scale: --fs-xs -> --fs-body. 500 is the heaviest DM
     Sans weight this page loads, so it is the site's bold; 600 or 700
     would be a browser-faked one. */
  font-size: var(--fs-body);
  font-weight: 500;
  line-height: 1.3;
  color: rgba(var(--crema-rgb), 0.55);
  max-width: none;
  margin: 0 0 14px;
}

/* The clip and the fade live here, not on .chan-stack, or the label sits
   inside the mask and its first characters fade out with the marks. */
.chan-stack__window {
  overflow: hidden;
  /* The row is wider than the column by design, so without this the marks
     would hit the column edges and stop dead. Fading both ends is what
     sells it as a strip running past a window. */
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
          mask-image: linear-gradient(90deg, transparent, #000 40px, #000 calc(100% - 40px), transparent);
}

.chan-stack__track {
  list-style: none;
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0; padding: 0;
  animation: stackPan var(--pan) linear infinite;
}

.chan-stack__item {
  flex: none;
  margin-right: var(--pan-gap);
  /* --w and --h are the mark's own box, not a shared square. Each file is
     the official brand SVG cropped to its ink, and the pair is sized so
     every mark covers the same optical AREA: a wide wordmark comes out
     short and long, a square mark comes out square, and neither shouts
     over the other. Recompute the pair if you swap a file in. */
  width: var(--w, 25px); height: var(--h, 25px);
  background: rgba(var(--crema-rgb), 0.62);
  -webkit-mask: var(--logo) center / contain no-repeat;
  mask: var(--logo) center / contain no-repeat;
}

/* Rail sits on top of the card, so the two read as one object. The width
   comes from the .chan-layout track, not from here: a percentage inside a
   max-content track is circular and collapses the copy column.
   Flex column so the panels below the rail can take the leftover height. */
.chan { display: flex; flex-direction: column; min-width: 0; }

/* Grid and flex items default to min-width: auto, so they refuse to shrink
   below their content's min-content width. The nowrap snippet in each email
   fold row sets that floor high enough to push the whole card past its
   column. Zero it down the chain so the card tracks its track. */
.chan .tab-panels,
.chan .tab-panel,
.chan .handoff-meta,
.chan .chat,
.chan .callx,
.chan .callx__feed,
.chan .doc,
.chan .doc__main,
.chan .mail-item--fold { min-width: 0; }

/* The panels are grid-stacked at 1/1. Sizing that row at 1fr hands the
   band's height down through the panel to the card, which is what lets
   .chat flex rather than sit at a guessed pixel value. */
.chan .tab-panels { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); }

/* Card first, then the line about the channel. A flex column rather than a
   plain block, so the card takes the height the band leaves and the note
   sits under it at its own size. */
.chan .tab-panel { display: flex; flex-direction: column; min-height: 0; }

/* The panels stack in one grid cell, so the cell is as tall as the tallest
   channel. Without this the shorter cards sit short of it whenever a line
   wraps on one channel and not another. */
.chan .handoff-meta { max-width: 100%; flex: 1 1 auto; min-height: 0; }

/* One line per channel, under the card, swapped by the same tab script
   that swaps the card. Height is RESERVED for two lines rather than left
   to the copy: the panels share one grid cell, so a note that wrapped to
   two lines on one channel and one on another would resize the card as
   you moved between tabs. Keep each note inside two lines at 620px, or
   raise the reserve to match the longest one. */
.chan-note {
  flex: none;
  margin: 14px 0 0;
  min-height: calc(2 * 1.55em);
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8125rem;
  line-height: 1.55;
  color: rgba(var(--crema-rgb), 0.6);
}

/* ── The homepage handoff tab group, copied across verbatim so the two
      pages run the identical component: same padding, gaps, radius, idle
      and hover colours, active chip, shadow, and 0.25s transitions. Only
      .handoff-tabs--vert below is new, and it changes nothing but the
      axis. If the homepage rules change, change these with them. ── */
.handoff-tabs {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 3px;
  width: max-content;
  max-width: 100%;
  margin: 0 auto 40px;
  padding: 5px;
  background: rgba(var(--crema-rgb), 0.05);
  border: 1px solid rgba(var(--crema-rgb), 0.10);
  border-radius: 100px;
  opacity: 0;
}

.handoff-tabs.pills-visible {
  animation: pillsFadeIn 0.8s cubic-bezier(0.16,1,0.3,1) both;
}

.handoff-tab {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 15px;
  border: none;
  border-radius: 100px;
  background: transparent;
  color: rgba(var(--crema-rgb), 0.55);
  font-family: 'DM Sans', sans-serif;
  font-size: var(--fs-xs);
  cursor: pointer;
  white-space: nowrap;
  transition: color 0.25s ease, background 0.25s ease, box-shadow 0.25s ease;
}

.handoff-tab:hover { color: rgba(var(--crema-rgb), 0.9); }

.handoff-tab.active {
  background: var(--honey);
  color: var(--crema);
  box-shadow: 0 4px 14px rgba(var(--honey-rgb), 0.35);
}

.handoff-tab-ic {
  width: 15px; height: 15px; flex-shrink: 0;
  background: currentColor;
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-position: center; mask-position: center;
  -webkit-mask-size: contain; mask-size: contain;
}

/* Margin only. Everything else is inherited untouched from above. The group
   keeps the homepage's auto-centring so it sits centred over the card it
   controls; only the vertical spacing changes, to sit it tight on the card
   rather than in the middle of a band. */
.handoff-tabs--top { margin: 0 auto 14px; }

/* The card keeps .handoff-meta's shell; only its middle changes. */
/* ── The window ── */
/* No frame of its own. The card is already a box; a second one inside it
   just draws a border around a border. The messages carry the shape.
   Fixed height, not min-height: all three channels have to measure the
   same whatever they hold, and the overflow is the point. */
.chat {
  /* Was a flat 300px so all three channels measured the same. They still
     do: the panels share one grid cell, so whatever the band leaves is the
     same number for each. Basis 0 means the scroller takes exactly that
     slack, which is how the card reaches the section's bottom padding.
     The min-height is the floor the stacked layouts fall back to. */
  flex: 1 1 0;
  min-height: 300px;
  display: flex; flex-direction: column; gap: 7px;
  padding: 4px 2px 0 0;
  overflow-y: auto;
  overscroll-behavior: contain;
  scrollbar-width: thin;
  scrollbar-color: rgba(var(--crema-rgb), 0.22) transparent;
}

/* Every scroller in the card wears the same thin thumb, wherever it sits:
   the chat body, the workspace canvas, the transcript column. */
.chat, .doc__main, .callx__feed { scrollbar-width: thin; scrollbar-color: rgba(var(--crema-rgb), 0.22) transparent; }

.chat::-webkit-scrollbar, .doc__main::-webkit-scrollbar, .callx__feed::-webkit-scrollbar { width: 5px; }

.chat::-webkit-scrollbar-track, .doc__main::-webkit-scrollbar-track, .callx__feed::-webkit-scrollbar-track { background: transparent; }

.chat::-webkit-scrollbar-thumb, .doc__main::-webkit-scrollbar-thumb, .callx__feed::-webkit-scrollbar-thumb {
  background: rgba(var(--crema-rgb), 0.22); border-radius: 3px;
}

.chat::-webkit-scrollbar-thumb:hover, .doc__main::-webkit-scrollbar-thumb:hover, .callx__feed::-webkit-scrollbar-thumb:hover { background: rgba(var(--crema-rgb), 0.35); }

/* Messages must not shrink to fit the box */
.chat > * { flex: 0 0 auto; }

/* ── Composer. Pinned under the scroll area, inside the card. ── */
/* Every channel gets the same bar under its scroller, so the cards measure
   identically whatever the bar holds: a composer on WhatsApp and iMessage,
   mail actions on Email, a .chan-foot on Phone and Notion. */
.composer, .mail__actions, .chan-foot {
  height: 47px;
  display: flex; align-items: center; gap: 8px;
  margin-top: 10px; padding-top: 10px;
  border-top: 1px solid rgba(var(--crema-rgb), 0.10);
}

.composer input {
  flex: 1; min-width: 0;
  font-family: 'DM Sans', sans-serif; font-size: 0.78rem;
  color: var(--crema);
  background: rgba(var(--crema-rgb), 0.06);
  border: 1px solid rgba(var(--crema-rgb), 0.14);
  border-radius: 999px;
  padding: 9px 14px;
  transition: border-color 0.2s ease, background 0.2s ease;
}

.composer input::placeholder { color: rgba(var(--crema-rgb), 0.38); }

.composer input:focus {
  outline: none;
  border-color: rgba(var(--crema-rgb), 0.45);
  background: rgba(var(--crema-rgb), 0.09);
}

.composer button {
  flex: none; width: 34px; height: 34px; border-radius: 50%;
  border: 0; cursor: pointer;
  background: var(--honey);
  display: grid; place-items: center;
  transition: transform 0.15s ease, background 0.2s ease;
}

.composer button::before {
  content: ''; width: 14px; height: 14px; background: var(--crema);
  -webkit-mask: url('/icons/paper-plane.svg') center / contain no-repeat;
  mask: url('/icons/paper-plane.svg') center / contain no-repeat;
}

.composer button:hover { background: var(--honey-hover); transform: scale(1.06); }

.composer button:active { transform: scale(0.96); }

.composer button:disabled { opacity: 0.4; cursor: default; transform: none; }

.chat__day {
  align-self: center;
  font-family: 'DM Sans', sans-serif; font-size: 0.6rem;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(var(--crema-rgb), 0.38);
  margin-bottom: 2px;
}

.chat-msg {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; line-height: 1.45;
  padding: 8px 11px;
  max-width: 82%;
  position: relative;
}

/* In = your assistant, and the filled bubble, because their message is
   the thing being sold. Out = you, sitting back. */
.chat-msg--in { background: var(--honey); color: var(--crema); align-self: flex-start; }

/* Cream on honey measures 3.7:1, under the 4.5:1 AA needs at this size.
   Kept deliberately for the look; the timestamp runs at 0.72 rather than
   the usual 0.55 so it does not fall further behind. */
.chat-msg--in .chat-msg__t { opacity: 0.72; }

.chat-msg--out {
  background: rgba(var(--crema-rgb), 0.08);
  border: 1px solid rgba(var(--crema-rgb), 0.12);
  color: rgba(var(--crema-rgb), 0.88);
  align-self: flex-end;
}

.chat-msg__t {
  display: block;
  font-size: 0.58rem; line-height: 1;
  margin-top: 5px; text-align: right;
  opacity: 0.55;
}

.chat-msg__t .tick {
  position: relative; display: inline-block;
  width: 15px; height: 9px; margin-left: 5px; vertical-align: -1px;
}

.chat-msg__t .tick::before,
.chat-msg__t .tick::after {
  content: ''; position: absolute; top: 0; width: 9px; height: 9px;
  background: currentColor;
  -webkit-mask: url('/icons/check.svg') center / contain no-repeat;
  mask: url('/icons/check.svg') center / contain no-repeat;
}

.chat-msg__t .tick::before { left: 0; }

.chat-msg__t .tick::after { left: 6px; }

/* Single tick for a sent-not-read line */

.chat__receipt {
  align-self: flex-end;
  font-family: 'DM Sans', sans-serif; font-size: 0.58rem;
  color: rgba(var(--crema-rgb), 0.4);
  margin-top: -3px;
}

.chat__typing {
  align-self: flex-start;
  display: flex; align-items: center; gap: 4px;
  padding: 9px 12px; border-radius: 14px;
  background: rgba(var(--crema-rgb), 0.08);
}

.chat__typing i {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(var(--crema-rgb), 0.55);
  animation: chatType 1.3s ease-in-out infinite;
}

.chat__typing i:nth-child(2) { animation-delay: 0.18s; }

.chat__typing i:nth-child(3) { animation-delay: 0.36s; }

/* ── WhatsApp: tailed bubbles, time and ticks inside ── */
.chat--wa .chat-msg { border-radius: 12px; }

.chat--wa .chat-msg--in  { border-bottom-left-radius: 3px; }

.chat--wa .chat-msg--out { border-bottom-right-radius: 3px; }

/* ── iMessage: fully round, no tail, one receipt under the last line ── */
.chat--im .chat-msg { border-radius: 17px; padding: 8px 13px; }

.chat--im .chat-msg__t { display: none; }

/* ── Email: not a bubble UI at all. A thread with two collapsed
      messages above the open one, and an action row under it.
      DM Sans only, including the subject: F37 Bobby is a display
      face and a mail client does not set its subject lines in one. ── */
.chat--em { gap: 0; }

.mail__head {
  display: flex; align-items: flex-start; gap: 10px;
  padding-bottom: 14px; margin-bottom: 6px;
  border-bottom: 1px solid rgba(var(--crema-rgb), 0.10);
}

.mail__subject {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.92rem; font-weight: 500; line-height: 1.45;
  color: var(--crema); margin: 0; flex: 1;
}

.mail__count {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.62rem; line-height: 1;
  color: rgba(var(--crema-rgb), 0.6);
  padding: 4px 7px; border-radius: 999px;
  background: rgba(var(--crema-rgb), 0.07);
  border: 1px solid rgba(var(--crema-rgb), 0.12);
  flex: none;
}

.mail__label {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.58rem; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--honey);
  padding: 3px 8px; border-radius: 4px;
  background: rgba(var(--honey-rgb), 0.12);
  border: 1px solid rgba(var(--honey-rgb), 0.3);
  flex: none; align-self: center;
}

/* One earlier message, folded to a single line the way a mail client
   collapses everything above the message you are reading. */
.mail-item {
  font-family: 'DM Sans', sans-serif;
  padding: 12px 0;
  border-bottom: 1px solid rgba(var(--crema-rgb), 0.07);
}

.mail-item--fold {
  display: flex; align-items: baseline; gap: 10px;
  width: 100%; text-align: left;
  font-size: 0.74rem; line-height: 1.5;
  background: none; border: 0; border-bottom: 1px solid rgba(var(--crema-rgb), 0.07);
  cursor: pointer; color: inherit;
  transition: background 0.15s ease;
}

.mail-item--fold:hover { background: rgba(var(--crema-rgb), 0.04); }

.mail-item--fold::after {
  content: ''; width: 9px; height: 9px; flex: none; margin-left: 2px;
  background: rgba(var(--crema-rgb), 0.4);
  -webkit-mask: url('/icons/angle-small-down.svg') center / contain no-repeat;
  mask: url('/icons/angle-small-down.svg') center / contain no-repeat;
  transition: transform 0.2s ease;
}

.mail-item--fold[aria-expanded="true"]::after { transform: rotate(180deg); }

/* Once the row is open the full text sits directly under it, so the clipped
   preview is just the same sentence twice, the second time cut off. */
.mail-item--fold[aria-expanded="true"] span { visibility: hidden; }

.mail__unfold {
  display: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem; line-height: 1.7;
  color: rgba(var(--crema-rgb), 0.7);
  padding: 2px 0 15px 2px;
  border-bottom: 1px solid rgba(var(--crema-rgb), 0.07);
  margin: 0;
}

.mail__unfold.is-open { display: block; }

.mail-item--fold b { font-weight: 500; color: rgba(var(--crema-rgb), 0.72); flex: none; }

.mail-item--fold span {
  color: rgba(var(--crema-rgb), 0.4);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.mail-item--fold i {
  font-style: normal; margin-left: auto; flex: none;
  color: rgba(var(--crema-rgb), 0.32); font-size: 0.64rem;
}

.mail__actions span, .chan-foot span { cursor: pointer; transition: background 0.15s ease, color 0.15s ease; }

.mail__actions span:hover, .chan-foot span:hover { background: rgba(var(--crema-rgb), 0.12); color: var(--crema); }

/* The open one */
.mail-item--open { border-bottom: 0; padding: 18px 0 4px; }

.mail__from { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; }

.mail__ava {
  width: 26px; height: 26px; border-radius: 50%;
  object-fit: cover; flex: none;
  border: 1px solid rgba(var(--crema-rgb), 0.25);
  background: var(--media-warm);
}

.mail__who { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

.mail__who b {
  font-family: 'DM Sans', sans-serif; font-weight: 500;
  font-size: 0.74rem; color: rgba(var(--crema-rgb), 0.85); line-height: 1.2;
}

.mail__who span {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.64rem; color: rgba(var(--crema-rgb), 0.45); line-height: 1.2;
}

.mail__time {
  margin-left: auto; flex: none;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.64rem; color: rgba(var(--crema-rgb), 0.45);
}

.mail__body {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.8rem; line-height: 1.75;
  color: rgba(var(--crema-rgb), 0.88);
  margin: 0 0 16px;
}

.mail__attach { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 4px; }

.mail__attach span {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'DM Sans', sans-serif; font-size: 0.66rem;
  color: rgba(var(--crema-rgb), 0.7);
  padding: 5px 9px; border-radius: 6px;
  background: rgba(var(--crema-rgb), 0.06);
  border: 1px solid rgba(var(--crema-rgb), 0.12);
}

.mail__attach span::before {
  content: ''; width: 10px; height: 10px; flex: none;
  background: rgba(var(--crema-rgb), 0.55);
  -webkit-mask: url('/icons/clip.svg') center / contain no-repeat;
  mask: url('/icons/clip.svg') center / contain no-repeat;
}

.mail__actions span, .chan-foot span {
  font-family: 'DM Sans', sans-serif; font-size: 0.7rem; line-height: 1;
  color: rgba(var(--crema-rgb), 0.6);
  padding: 10px 16px; border-radius: 999px;
  border: 1px solid rgba(var(--crema-rgb), 0.16);
}

.mail__actions span:first-child, .chan-foot span:first-child {
  color: var(--crema);
  background: rgba(var(--crema-rgb), 0.09);
  border-color: rgba(var(--crema-rgb), 0.24);
}

/* ── Phone: the one channel that is not a message thread at all, and the
      only one that runs two UIs side by side. Left is the handset while
      the call is still live; right is what that call is already turning
      into. The point of the split is the arrow between them: you are not
      on the call, the work is happening anyway, and the tasks land before
      anyone hangs up. ── */
.callx {
  flex: 1 1 0;
  min-height: 300px;
  display: grid;
  grid-template-columns: 168px minmax(0, 1fr);
  gap: 18px;
}

/* ── Handset ── */
.callx__phone {
  display: flex; flex-direction: column;
  border-radius: 14px;
  border: 1px solid rgba(var(--crema-rgb), 0.10);
  background: rgba(var(--crema-rgb), 0.04);
  padding: 18px 14px 14px;
}

.callx__screen { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; text-align: center; }

.callx__ava {
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--honey); color: var(--crema);
  font-family: 'DM Sans', sans-serif; font-size: 0.85rem; font-weight: 500;
  letter-spacing: 0.02em;
  margin-bottom: 11px;
}

.callx__who {
  font-family: 'DM Sans', sans-serif; font-weight: 500;
  font-size: 0.82rem; line-height: 1.3;
  color: var(--crema); margin: 0 0 4px;
}

.callx__state {
  font-family: 'DM Sans', sans-serif; font-size: 0.68rem; line-height: 1.3;
  color: rgba(var(--crema-rgb), 0.55); margin: 0 0 12px;
}

/* The timer is the live bit, so it takes the cream the label does not. */
.callx__state i {
  font-style: normal; margin-left: 7px;
  color: rgba(var(--crema-rgb), 0.9);
  font-variant-numeric: tabular-nums;
}

.callx__rec {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: 'DM Sans', sans-serif; font-size: 0.62rem; line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(var(--crema-rgb), 0.72);
  padding: 5px 10px; border-radius: 999px;
  background: rgba(var(--honey-rgb), 0.16);
  border: 1px solid rgba(var(--honey-rgb), 0.4);
  margin: 0 0 14px;
}

.callx__rec i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--honey);
  animation: recPulse 1.6s ease-in-out infinite;
}

/* Twelve bars on staggered delays. Not a real reading of anything, and it
   never pretends to be: it is the visual for "this line is open". */
.callx__wave { display: flex; align-items: center; gap: 3px; height: 26px; margin-top: auto; }

.callx__wave i {
  flex: 1; min-width: 0; border-radius: 2px;
  background: rgba(var(--crema-rgb), 0.35);
  animation: waveBob 1.1s ease-in-out infinite;
}

.callx__wave i:nth-child(3n)   { animation-delay: 0.15s; background: rgba(var(--honey-rgb), 0.75); }

.callx__wave i:nth-child(3n+1) { animation-delay: 0.3s; }

.callx__wave i:nth-child(4n)   { animation-delay: 0.45s; }

.callx__keys { display: flex; justify-content: center; gap: 9px; margin-top: 14px; }

.callx__key {
  width: 30px; height: 30px; border-radius: 50%;
  background: rgba(var(--crema-rgb), 0.08);
  border: 1px solid rgba(var(--crema-rgb), 0.14);
  display: grid; place-items: center;
}

.callx__key::before {
  content: ''; width: 13px; height: 13px;
  background: rgba(var(--crema-rgb), 0.7);
  -webkit-mask: var(--ic) center / contain no-repeat;
  mask: var(--ic) center / contain no-repeat;
}

.callx__key--end { background: var(--clockwork); border-color: var(--clockwork); }

.callx__key--end::before { background: var(--crema); }

/* ── Transcript, and what it produces ── */
.callx__feed { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding-right: 2px; }

.callx__feed > * { flex: 0 0 auto; }

.callx__lab {
  display: flex; align-items: center; gap: 7px;
  font-family: 'DM Sans', sans-serif; font-size: 0.62rem; line-height: 1;
  letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(var(--crema-rgb), 0.5);
  margin: 0 0 11px;
}

.callx__lab > i {
  width: 6px; height: 6px; border-radius: 50%; background: var(--honey);
  animation: recPulse 1.6s ease-in-out infinite;
}

.callx__lab--tasks {
  margin-top: 16px; padding-top: 14px;
  border-top: 1px solid rgba(var(--crema-rgb), 0.10);
}

.callx__lab--tasks span {
  font-size: 0.6rem; letter-spacing: 0;
  color: var(--crema);
  padding: 3px 7px; border-radius: 999px;
  background: rgba(var(--honey-rgb), 0.9);
}

.callx__lines { display: flex; flex-direction: column; gap: 9px; }

.tx {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.74rem; line-height: 1.55;
  color: rgba(var(--crema-rgb), 0.82);
  margin: 0; padding-left: 11px;
  border-left: 2px solid rgba(var(--crema-rgb), 0.14);
}

.tx b {
  display: block; font-weight: 500;
  font-size: 0.6rem; line-height: 1;
  letter-spacing: 0.04em;
  color: rgba(var(--crema-rgb), 0.45);
  margin-bottom: 5px;
}

/* Your assistant's turns take the honey edge, so the column reads as two
   voices without a second colour or a bubble. */
.tx--us { border-left-color: var(--honey); }

.tx--us b { color: rgba(var(--honey-rgb), 0.95); }

.callx__tasks { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }

.ctask {
  position: relative;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.74rem; line-height: 1.45;
  color: rgba(var(--crema-rgb), 0.88);
  padding: 9px 11px 9px 30px;
  border-radius: 8px;
  background: rgba(var(--honey-rgb), 0.10);
  border: 1px solid rgba(var(--honey-rgb), 0.28);
}

.ctask::before {
  content: ''; position: absolute; left: 10px; top: 11px;
  width: 11px; height: 11px; background: var(--honey);
  -webkit-mask: url('/icons/plus-small.svg') center / contain no-repeat;
  mask: url('/icons/plus-small.svg') center / contain no-repeat;
}

/* The tasks land AFTER the lines that produced them, one at a time, every
   time the tab is opened. That order is the whole argument of the panel,
   so it is animation with a job, not decoration. */
.reveal.is-visible .tab-panel.active .tx {
  animation: txIn 0.5s cubic-bezier(0.16,1,0.3,1) both;
}

.reveal.is-visible .tab-panel.active .tx:nth-child(2) { animation-delay: 0.10s; }

.reveal.is-visible .tab-panel.active .tx:nth-child(3) { animation-delay: 0.20s; }

.reveal.is-visible .tab-panel.active .tx:nth-child(4) { animation-delay: 0.30s; }

.reveal.is-visible .tab-panel.active .tx:nth-child(5) { animation-delay: 0.40s; }

.reveal.is-visible .tab-panel.active .callx__lab--tasks { animation: txIn 0.5s ease both 0.55s; }

.reveal.is-visible .tab-panel.active .ctask {
  animation: taskIn 0.55s cubic-bezier(0.16,1,0.3,1) both;
}

.reveal.is-visible .tab-panel.active .ctask:nth-child(1) { animation-delay: 0.68s; }

.reveal.is-visible .tab-panel.active .ctask:nth-child(2) { animation-delay: 0.86s; }

.reveal.is-visible .tab-panel.active .ctask:nth-child(3) { animation-delay: 1.04s; }

/* ── Workspaces: the desktop shell, not a single page. A left rail with a
      workspace switcher, a search row and a page tree, then the page
      itself as blocks. It stands in for every tool your assistant works
      inside, so it keeps that furniture and drops the palette. ── */
.doc {
  flex: 1 1 0;
  min-height: 300px;
  display: grid;
  grid-template-columns: 146px minmax(0, 1fr);
  gap: 0;
}

/* ── Left rail ── */
.doc__side {
  display: flex; flex-direction: column;
  padding-right: 14px; margin-right: 16px;
  border-right: 1px solid rgba(var(--crema-rgb), 0.10);
  font-family: 'DM Sans', sans-serif;
}

.doc__ws {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.7rem; font-weight: 500; line-height: 1;
  color: rgba(var(--crema-rgb), 0.88);
  margin: 0 0 12px;
}

.doc__ws span {
  width: 18px; height: 18px; border-radius: 4px; flex: none;
  display: grid; place-items: center;
  background: var(--honey); color: var(--crema);
  font-size: 0.58rem; font-weight: 500;
}

.doc__ws i {
  width: 9px; height: 9px; margin-left: auto; flex: none;
  background: rgba(var(--crema-rgb), 0.4);
  -webkit-mask: url('/icons/angle-small-down.svg') center / contain no-repeat;
  mask: url('/icons/angle-small-down.svg') center / contain no-repeat;
}

.doc__search {
  display: flex; align-items: center; gap: 7px;
  font-size: 0.66rem; line-height: 1;
  color: rgba(var(--crema-rgb), 0.42);
  padding: 7px 9px; border-radius: 6px;
  background: rgba(var(--crema-rgb), 0.05);
  border: 1px solid rgba(var(--crema-rgb), 0.09);
  margin: 0 0 14px;
}

.doc__search::before {
  content: ''; width: 11px; height: 11px; flex: none;
  background: rgba(var(--crema-rgb), 0.42);
  -webkit-mask: url('/icons/search.svg') center / contain no-repeat;
  mask: url('/icons/search.svg') center / contain no-repeat;
}

.doc__side-lab {
  font-size: 0.58rem; line-height: 1;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: rgba(var(--crema-rgb), 0.38);
  margin: 0 0 8px; padding-left: 8px;
}

.doc__tree { list-style: none; margin: 0; padding: 0; }

.doc__page {
  position: relative;
  font-size: 0.7rem; line-height: 1.3;
  color: rgba(var(--crema-rgb), 0.6);
  padding: 7px 8px 7px 22px;
  border-radius: 6px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.doc__page::before {
  content: ''; position: absolute; left: 7px; top: 9px;
  width: 9px; height: 9px;
  background: rgba(var(--crema-rgb), 0.35);
  -webkit-mask: url('/icons/file.svg') center / contain no-repeat;
  mask: url('/icons/file.svg') center / contain no-repeat;
}

/* The open page is the only lit row in the rail, which is what tells you
   the canvas on the right belongs to it. */
.doc__page.is-open {
  background: rgba(var(--crema-rgb), 0.09);
  color: var(--crema);
}

.doc__page.is-open::before { background: var(--honey); }

.doc__new {
  display: flex; align-items: center; gap: 6px;
  font-size: 0.66rem; line-height: 1;
  color: rgba(var(--crema-rgb), 0.42);
  margin: 12px 0 0; padding-left: 8px;
}

.doc__new::before {
  content: ''; width: 11px; height: 11px; flex: none;
  background: rgba(var(--crema-rgb), 0.42);
  -webkit-mask: url('/icons/plus-small.svg') center / contain no-repeat;
  mask: url('/icons/plus-small.svg') center / contain no-repeat;
}

/* ── The page ── */
.doc__main { min-height: 0; overflow-y: auto; padding-right: 2px; }

.doc__crumb {
  display: flex; align-items: center; gap: 7px;
  font-family: 'DM Sans', sans-serif; font-size: 0.66rem;
  color: rgba(var(--crema-rgb), 0.42);
  margin: 0 0 10px;
}

.doc__crumb i { font-style: normal; color: rgba(var(--crema-rgb), 0.25); }

.doc__title {
  font-family: 'DM Sans', sans-serif; font-weight: 500;
  font-size: 1.05rem; line-height: 1.3;
  color: var(--crema);
  margin: 0 0 12px;
}

.doc__props { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 16px; }

.doc__prop {
  display: inline-flex; align-items: baseline; gap: 7px;
  font-family: 'DM Sans', sans-serif; font-size: 0.68rem;
  color: rgba(var(--crema-rgb), 0.78);
  padding: 5px 10px; border-radius: 6px;
  background: rgba(var(--crema-rgb), 0.05);
  border: 1px solid rgba(var(--crema-rgb), 0.10);
}

.doc__prop b { font-weight: 400; color: rgba(var(--crema-rgb), 0.5); }

.doc__todo { list-style: none; margin: 0 0 14px; padding: 0; }

.doc__task {
  position: relative;
  display: flex; align-items: flex-start;
  padding: 7px 0 7px 26px;
  font-family: 'DM Sans', sans-serif;
  font-size: 0.78rem; line-height: 1.5;
  color: rgba(var(--crema-rgb), 0.82);
}

.doc__task::before {
  content: ''; position: absolute; left: 0; top: 9px;
  width: 14px; height: 14px; border-radius: 3px;
  border: 1.5px solid rgba(var(--crema-rgb), 0.28);
}

/* Done rows fill honey and take the check the read receipts already use,
   so the card runs one tick glyph rather than two. */
.doc__task.is-done { color: rgba(var(--crema-rgb), 0.5); text-decoration: line-through; }

.doc__task.is-done::before { background: var(--honey); border-color: var(--honey); }

.doc__task.is-done::after {
  content: ''; position: absolute; left: 3px; top: 12px;
  width: 9px; height: 9px; background: var(--crema);
  -webkit-mask: url('/icons/check.svg') center / contain no-repeat;
  mask: url('/icons/check.svg') center / contain no-repeat;
}

.doc__toggle {
  display: flex; align-items: center; gap: 9px;
  font-family: 'DM Sans', sans-serif; font-size: 0.78rem;
  color: rgba(var(--crema-rgb), 0.72);
  padding: 7px 0 7px 26px; margin: 0 0 8px;
  position: relative;
}

.doc__toggle::before {
  content: ''; position: absolute; left: 3px; top: 12px;
  width: 9px; height: 9px;
  background: rgba(var(--crema-rgb), 0.45);
  -webkit-mask: url('/icons/angle-small-down.svg') center / contain no-repeat;
  mask: url('/icons/angle-small-down.svg') center / contain no-repeat;
}

.doc__toggle span {
  font-size: 0.62rem; line-height: 1;
  color: rgba(var(--crema-rgb), 0.6);
  padding: 4px 7px; border-radius: 999px;
  background: rgba(var(--crema-rgb), 0.07);
}

/* The open toggle's contents: a database block, because a page of nothing
   but checkboxes does not read as a workspace. */
.doc__table { margin: 0 0 16px 26px; }

.doc__row {
  display: grid; grid-template-columns: minmax(0,1fr) 84px 62px;
  gap: 10px; align-items: baseline;
  font-family: 'DM Sans', sans-serif; font-size: 0.72rem; line-height: 1.4;
  color: rgba(var(--crema-rgb), 0.8);
  padding: 8px 0;
  border-bottom: 1px solid rgba(var(--crema-rgb), 0.07);
  margin: 0;
}

.doc__row span { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.doc__row:last-child { border-bottom: 0; }

.doc__row--head {
  font-size: 0.6rem; letter-spacing: 0.05em; text-transform: uppercase;
  color: rgba(var(--crema-rgb), 0.42);
  padding-top: 0;
}

.doc__callout {
  font-family: 'DM Sans', sans-serif;
  font-size: 0.76rem; line-height: 1.6;
  color: rgba(var(--crema-rgb), 0.72);
  padding: 12px 14px; border-radius: 8px;
  border-left: 2px solid var(--honey);
  background: rgba(var(--honey-rgb), 0.08);
  margin: 0;
}

@media (max-width: 1200px) {
  .callx { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  /* The handset lies down into a status bar. Both rows wrap: at 375px the
     screen and the keys cannot share a line, and without the wrap the key
     cluster walks straight out of the card. */
  .callx__phone {
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 10px 12px; padding: 12px 14px;
  }
  .callx__screen {
    flex: 1 1 auto; min-width: 0;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    text-align: left; gap: 9px;
  }
  .callx__ava { width: 34px; height: 34px; font-size: 0.72rem; margin: 0; }
  .callx__who {
    margin: 0; min-width: 0;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .callx__state { margin: 0; }
  .callx__rec { margin: 0; }
  .callx__wave { display: none; }
  .callx__keys { flex: none; margin: 0 0 0 auto; }
  .doc { grid-template-columns: minmax(0, 1fr); }
  .doc__side { display: none; }
}

@media (max-width: 1200px) {
  /* Copy stacks above the interactive block before the rail has to move. */
  .chan-layout { grid-template-columns: minmax(0, 620px); justify-content: start; gap: 36px; }
}

@media (max-width: 767px) {
  /* Same two lines the homepage uses at this width. */
  .handoff-tabs--top { border-radius: 22px; }
  /* The card narrows enough here that the longest notes take a third line,
     so the reserve goes up with them. Every panel gets the same reserve,
     which is the point: the card must not resize as you change tabs. */
  .chan-note { min-height: calc(3 * 1.55em); }
  .handoff-tabs--top .handoff-tab { padding: 7px 13px; }
  .chat-msg { max-width: 90%; }
  /* The sender and the time hold their width, so the preview is the only
     thing that can give, and by this width it has nothing left. Drop it to
     its own line and let it wrap instead of clipping to a stub. */
  .mail-item--fold { flex-wrap: wrap; row-gap: 3px; }
  .mail-item--fold span {
    order: 3; flex: 1 0 100%;
    white-space: normal; text-overflow: clip;
  }
  .mail-item--fold[aria-expanded="true"] span { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .chat__typing i { animation: none; opacity: 0.55; }
  .callx__wave i { animation: none; height: 55%; }
  .callx__rec i, .callx__lab > i { animation: none; }
  .reveal.is-visible .tab-panel.active .tx,
  .reveal.is-visible .tab-panel.active .ctask,
  .reveal.is-visible .tab-panel.active .callx__lab--tasks { animation: none; }
  /* No pan. The row becomes a scroller the reader drives, so the marks
     past the fold are still reachable rather than simply lost. */
  .chan-stack__window { overflow-x: auto; scrollbar-width: none; }
  .chan-stack__window::-webkit-scrollbar { display: none; }
  .chan-stack__track { animation: none; }
  /* Same deal for the chip row: it stops and becomes a scroller, so the
     chips past the fold stay reachable rather than simply lost. */
  .od-chipflow__window { overflow-x: auto; scrollbar-width: none; }
  .od-chipflow__window::-webkit-scrollbar { display: none; }
  .od-chipflow .od-list--chips { animation: none; }
}