/* Promise section ("Verified in every way"). Owner: journeys builder.
   One full-viewport stage: big two-tone head, three large feature lines on the left (tabs that
   auto-advance), one large live vignette on the right, a quiet works-with row. The section is
   ~85svh so the next section peeks below it. Content sits on the page column (--rail-w).
   Tokens only, hairlines, no shadows. Green only for verified. */

/* Frame, padding, marks, min-height and the head come from the section system (layout.css). */
.promise {
  --pm-dur: 7s;
  /* the stage takes what the screen has left after the frame, head and works-with row */
  --pm-stage-h: clamp(340px, calc(var(--sec-h) - 2 * var(--sec-pad-y) - var(--gap-head) - var(--gap-after) - 2 * var(--w-section) - 24px), 560px);
  /* anchor lands with this top hairline under the header's own line (html scroll-padding = topbar + 16) */
  scroll-margin-top: -17px;
}

/* ---------- stage: feature lines left, live screen right ---------- */
.pm-stage {
  display: grid; grid-template-columns: minmax(260px, 4fr) minmax(0, 7fr); grid-template-rows: minmax(var(--pm-stage-h), auto);
  gap: clamp(var(--sp-32), 4.5vw, var(--sp-96)); margin-top: var(--gap-head);
}
.pm-tabs { display: flex; flex-direction: column; justify-content: center; gap: var(--gap-items); }
.pm-tab {
  position: relative; display: grid; grid-template-columns: var(--pm-band) minmax(0, 1fr); gap: clamp(16px, 1.4vw, 22px);
  width: 100%; margin: 0; padding: var(--sp-4) 0; border: 0; background: none; text-align: left;
  font: inherit; color: inherit; cursor: pointer; border-radius: 4px;
}
.pm-tab:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px; }
/* Timer band: the extension's "checking" ring as a vertical strip (calls.css .ring, scaled 1.4x).
   Resting / done = light track. Active = 2-column dot matrix with a running light, filling top to
   bottom with a solid rounded ink bar. Reduced motion: the active band is solid ink. */
.promise { --pm-band: 7px; --pm-dot: 2.8px; --pm-dot-dx: 2.1px; --pm-track: var(--ring-track, var(--line-strong)); }
.pm-tab__bar { position: relative; align-self: stretch; width: var(--pm-band); border-radius: 999px; background: var(--pm-track); transition: background-color var(--dur) var(--ease-out); }
.pm-tab__fill { position: absolute; inset: 0; border-radius: 999px; background: var(--ink); clip-path: inset(0 0 100% 0 round 999px); }
.pm-tab.is-active .pm-tab__fill { clip-path: inset(0 0 0 0 round 999px); }
.pm-dots { position: absolute; inset: 0; opacity: 0; }
.pm-dot { position: absolute; left: 50%; width: var(--pm-dot); height: var(--pm-dot); margin-left: calc(var(--pm-dot) / -2); border-radius: 50%; background: var(--ink); opacity: .35; }
.pm-dot--l { translate: calc(var(--pm-dot-dx) * -1) 0; } .pm-dot--r { translate: var(--pm-dot-dx) 0; }
.promise.is-motion .pm-tab.is-active .pm-tab__bar { background: transparent; }
.promise.is-motion .pm-tab.is-active .pm-dots { opacity: 1; }
.promise.is-motion .pm-tab.is-active .pm-dot { animation: ring-scan 1.4s linear infinite; animation-delay: calc(var(--p, 0) * 1.4s - 1.4s); }
@keyframes ring-scan { 0%, 30%, 100% { opacity: .35; } 12% { opacity: 1; } }
.pm-tab__text { display: grid; gap: var(--gap-title); font-family: var(--font-body); text-wrap: pretty; }
.pm-tab__title {
  font-size: var(--w-title); line-height: 1.3; font-weight: var(--fw-title); letter-spacing: -.01em;
  color: var(--muted); transition: color var(--dur) var(--ease-out);
}
.pm-tab__desc {
  max-width: 36ch; font-size: var(--w-lead); line-height: 1.55; font-weight: 400;
  color: var(--muted); transition: color var(--dur) var(--ease-out);
}
.pm-tab.is-active .pm-tab__title, .pm-tab:hover .pm-tab__title { color: var(--ink); }
.pm-tab:hover .pm-tab__desc { color: var(--ink-2); }

.pm-screen {
  position: relative; min-height: 0; container-type: size;
  border: 1px solid var(--line-strong); border-radius: 16px; background: var(--tile-2); overflow: hidden;
}
.pm-panel { position: absolute; inset: 0; display: grid; padding: clamp(14px, 4.4cqmin, 24px); opacity: 0; visibility: hidden; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s linear var(--dur-slow); }
.pm-panel.is-active { opacity: 1; visibility: visible; transition: opacity var(--dur-slow) var(--ease-out), visibility 0s; }
.pm-v { position: relative; width: 100%; height: 100%; font-family: var(--font-body); color: var(--ink); }
.pm-v video, .pm-v img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; filter: grayscale(1); background: var(--tile); }

/* shared pill (status chip) */
.pm-pill {
  display: inline-flex; align-items: center; gap: 8px; padding: 8px 14px 8px 10px; white-space: nowrap;
  border: 1px solid var(--line-strong); border-radius: 999px; background: var(--paper);
  font-family: var(--font-body); font-size: clamp(11px, 2.2cqmin, 13px); font-weight: 600; color: var(--ink); max-width: 100%;
}
.pm-pill .px-icon { --px-size: 16px; }
.pm-ok-ic { color: var(--signal); }
/* A finding named in the Verified panel: ink. */
.pm-pill--note .px-icon { color: var(--ink); }

/* ---------- 1: call grid + people panel (fills the stage) ---------- */
.pm-v--call { display: grid; grid-template-columns: minmax(0, 1.75fr) minmax(0, 1fr); gap: 14px; align-items: stretch; }
.pm-grid { display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; min-height: 0; }
.pm-tile { position: relative; min-height: 0; border-radius: 10px; overflow: hidden; background: var(--tile); }
.pm-name {
  position: absolute; left: 10px; bottom: 10px; padding: 3px 9px; border-radius: 6px; background: var(--paper);
  font-size: clamp(11px, 2cqmin, 12px); font-weight: 600; color: var(--ink);
}
.pm-people { display: flex; flex-direction: column; min-height: 0; padding: clamp(12px, 3cqmin, 18px) clamp(12px, 2.8cqmin, 16px); border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); }
.pm-people__head { display: flex; justify-content: space-between; align-items: baseline; margin: 0; font-size: clamp(13px, 2.8cqmin, 16px); font-weight: 700; }
.pm-count { font-variant-numeric: tabular-nums; color: var(--muted); }
.pm-people__sub { margin: 1.6cqmin 0 .8cqmin; font-size: 11px; }
.pm-list { list-style: none; margin: 0 0 16px; padding: 0; }
.pm-row {
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 10px;
  padding: clamp(7px, 1.8cqmin, 11px) 0; border-top: 1px solid var(--line); font-size: clamp(12px, 2.5cqmin, 14px); font-weight: 600;
}
.pm-row img { width: clamp(22px, 5.4cqmin, 30px); height: clamp(22px, 5.4cqmin, 30px); border-radius: 50%; object-position: center 25%; }
.pm-row .px-icon { --px-size: 16px; }
.pm-meta { font-size: 11px; font-weight: 600; color: var(--muted); }
.pm-people .pm-pill { align-self: flex-start; margin-top: auto; }

/* ---------- 2: laptop webcam (fills the stage) ---------- */
.pm-v--cam { display: flex; flex-direction: column; padding-inline: 3%; }
.pm-laptop { display: flex; flex-direction: column; width: 100%; height: 100%; }
.pm-lid { position: relative; flex: 1 1 auto; min-height: 0; display: flex; padding: clamp(18px, 4cqmin, 28px) clamp(12px, 2.6cqmin, 18px) clamp(10px, 2.2cqmin, 14px); border: 1px solid var(--line-strong); border-bottom: 0; border-radius: 16px 16px 0 0; background: var(--paper); }
.pm-lens { position: absolute; top: clamp(6px, 1.6cqmin, 10px); left: 50%; width: 8px; height: 8px; margin-left: -4px; border-radius: 50%; background: var(--ink); }
.pm-lens::after { content: ''; position: absolute; inset: -6px; border-radius: 50%; border: 1px solid var(--signal); opacity: 0; }
.pm-display { position: relative; flex: 1 1 auto; min-height: 0; border-radius: 6px; overflow: hidden; background: var(--tile); }
.pm-base { position: relative; flex: none; height: clamp(10px, 2.6cqmin, 16px); margin-inline: -3.2%; border: 1px solid var(--line-strong); border-radius: 2px 2px 14px 14px; background: var(--paper); }
.pm-base::before { content: ''; position: absolute; left: 50%; top: -1px; width: 16%; height: 45%; translate: -50% 0; border: 1px solid var(--line-strong); border-top: 0; border-radius: 0 0 8px 8px; background: var(--tile-2); }
.pm-brackets { position: absolute; left: 50%; top: 14%; width: min(30%, 46cqh); height: 68%; translate: -50% 0; }
.pm-brackets i { position: absolute; width: 20%; height: 14%; border: 0 solid var(--paper); }
.pm-brackets i:nth-child(1) { left: 0; top: 0; border-top-width: 2px; border-left-width: 2px; }
.pm-brackets i:nth-child(2) { right: 0; top: 0; border-top-width: 2px; border-right-width: 2px; }
.pm-brackets i:nth-child(3) { left: 0; bottom: 0; border-bottom-width: 2px; border-left-width: 2px; }
.pm-brackets i:nth-child(4) { right: 0; bottom: 0; border-bottom-width: 2px; border-right-width: 2px; }
.pm-pill--cam { position: absolute; left: 14px; bottom: 14px; }

/* ---------- 3: desktop with a hidden window (fills the stage) ---------- */
.pm-v--screen { display: flex; }
.pm-desk { flex: 1 1 auto; display: grid; grid-template-rows: auto 1fr; border: 1px solid var(--line-strong); border-radius: 12px; background: var(--paper); overflow: hidden; }
.pm-desk__bar, .pm-win__bar { display: flex; gap: 6px; padding: 10px 12px; border-bottom: 1px solid var(--line); }
.pm-win__bar { padding: 8px 10px; gap: 5px; }
.pm-desk__bar i, .pm-win__bar i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid var(--line-strong); }
.pm-win__bar i { width: 7px; height: 7px; }
.pm-desk__body { position: relative; overflow: hidden; background: var(--tile-2); }
.pm-win { position: absolute; display: flex; flex-direction: column; border: 1px solid var(--line-strong); border-radius: 10px; background: var(--paper); overflow: hidden; }
.pm-win video, .pm-win img { flex: 1 1 auto; min-height: 0; }
/* Label: the people in these screens are drawn, made-up people. */
.pm-illus { position: absolute; z-index: 3; right: 10px; bottom: 8px; padding: 2px 8px; border-radius: 6px; background: var(--paper); border: 1px solid var(--line); pointer-events: none; }
.pm-win b { display: block; height: clamp(7px, 1.8cqmin, 10px); margin: clamp(9px, 2.4cqmin, 14px) 14px 0; border-radius: 4px; background: var(--line); }
.pm-win b:nth-of-type(2n) { width: 62%; } .pm-win b:nth-of-type(3) { width: 80%; } .pm-win b:nth-of-type(5) { width: 45%; }
.pm-win--call { left: 4%; top: 7%; width: 54%; height: 86%; }
.pm-win--hidden {
  right: 4%; top: 7%; width: 35%; height: 60%; padding-top: clamp(30px, 7cqmin, 42px);
  border: 1.5px dashed var(--ink); background: color-mix(in srgb, var(--paper) 88%, transparent);
}
.pm-win--hidden b { background: var(--ink-2); opacity: .55; transform-origin: left; }
.pm-hidden-tag { position: absolute; left: 14px; top: clamp(9px, 2.4cqmin, 14px); font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink); }
.pm-scan { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; background: var(--ink); opacity: 0; }
.pm-pill--note { position: absolute; right: 4%; top: 74%; }

/* ---------- works-with row ---------- */
.pm-with {
  display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px clamp(20px, 3vw, 48px);
  margin: var(--gap-after) 0 0; font-family: var(--font-body); font-size: var(--w-meta); font-weight: 600; color: var(--muted);
}
.pm-with__item { display: inline-flex; align-items: center; gap: 8px; }
.pm-with .px-icon { --px-size: 16px; color: var(--ink); }

/* ---------- motion: plays only with .is-motion (JS, motion allowed); the default is the finished still ---------- */
.promise.is-motion .pm-tab.is-active .pm-tab__fill { animation: pm-fill var(--pm-dur) linear both; }
.promise.is-motion .pm-panel.is-run .pm-tile { animation: pm-rise .7s var(--ease-out) both; animation-delay: calc(var(--i) * 90ms); }
.promise.is-motion .pm-panel.is-run .pm-row { animation: pm-rise .55s var(--ease-out) both; animation-delay: calc(.5s + var(--i) * 140ms); }
.promise.is-motion .pm-panel.is-run .pm-count { animation: pm-count 1s steps(4, end) both; animation-delay: .5s; }
.promise.is-motion .pm-panel.is-run .pm-people .pm-pill { animation: pm-pop .5s var(--ease-snap) both; animation-delay: 1.4s; }
.promise.is-motion .pm-panel.is-run .pm-lens::after { animation: pm-ping 1.6s var(--ease-out) 3 both; animation-delay: .3s; }
.promise.is-motion .pm-panel.is-run .pm-brackets { animation: pm-lock .8s var(--ease-snap) both; animation-delay: .6s; }
.promise.is-motion .pm-panel.is-run .pm-pill--cam { animation: pm-pop .5s var(--ease-snap) both; animation-delay: 1.4s; }
.promise.is-motion .pm-panel.is-run .pm-win--call { animation: pm-rise .6s var(--ease-out) both; }
.promise.is-motion .pm-panel.is-run .pm-win--hidden { animation: pm-reveal .5s steps(5, end) both; animation-delay: 1.5s; }
.promise.is-motion .pm-panel.is-run .pm-win--hidden b { animation: pm-type .9s steps(6, end) both; animation-delay: calc(2s + var(--i) * .3s); }
.promise.is-motion .pm-panel.is-run .pm-scan { animation: pm-scan 1.7s var(--ease-in-out) both; animation-delay: .4s; }
.promise.is-motion .pm-panel.is-run .pm-pill--note { animation: pm-pop .5s var(--ease-snap) both; animation-delay: 2.2s; }
/* off screen: everything waits; hover or focus on the stage: only the timer waits */
.promise.is-paused .pm-tab__fill, .promise.is-paused .pm-dot, .promise.is-paused .pm-panel * , .promise.is-held .pm-tab__fill { animation-play-state: paused !important; }

@keyframes pm-fill { from { clip-path: inset(0 0 100% 0 round 999px); } to { clip-path: inset(0 0 0 0 round 999px); } }
@keyframes pm-rise { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes pm-pop { from { opacity: 0; transform: translateY(6px) scale(.92); } to { opacity: 1; transform: none; } }
@keyframes pm-count { from { opacity: .2; } to { opacity: 1; } }
@keyframes pm-ping { 0% { opacity: .9; transform: scale(.5); } 100% { opacity: 0; transform: scale(2.2); } }
@keyframes pm-lock { from { opacity: 0; transform: scale(1.25); } to { opacity: 1; transform: none; } }
@keyframes pm-reveal { from { opacity: 0; } to { opacity: 1; } }
@keyframes pm-type { from { transform: scaleX(0); } to { transform: none; } }
@keyframes pm-scan { 0% { opacity: 0; transform: translateX(0); } 10% { opacity: .7; } 90% { opacity: .7; } 100% { opacity: 0; transform: translateX(100cqw); } }

/* ---------- smaller desktops ---------- */
@media (max-width: 1199px) {
  .pm-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); }
}

/* ---------- tablet portrait + phone: stack, height relaxes ---------- */
@media (max-width: 899px), (max-height: 560px) {
  .promise { height: auto; min-height: 0; max-height: none; }
  .pm-stage { display: flex; flex-direction: column-reverse; gap: var(--sp-32); margin-top: var(--sp-48); }
  .pm-screen { aspect-ratio: 1 / 1; max-height: 520px; width: 100%; }
  .pm-tabs { gap: var(--sp-16); }
  .pm-v--call { grid-template-columns: 1fr; }
  .pm-grid { display: none; }
  .pm-people { width: 100%; }
}
@media (max-width: 899px) and (min-width: 600px) {
  .pm-screen { aspect-ratio: 4 / 3; }
  .pm-v--call { grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr); }
  .pm-grid { display: grid; }
}

/* Three people in the call (2026-10-20): the active speaker takes the full left column, so
   the grid has no empty cell. */
.pm-grid > .pm-tile:first-child { grid-row: 1 / span 2; }