/* Hallmark · shape: product evidence · genre: modern-minimal · theme: brand · redesign: full · job: try
 * hero: compact introduction over the native chart · nav: kept slab · footer: kept colophon
 * signature: the native sentiment chart on quiet canvas · axes: dark/roman-serif/warm · posture: restrained · modes: light+dark · data: sample · v2.0.0 */
/* Hallmark · pre-emit critique: P4 H5 E4 S5 R5 V4 · weakest: variety; range and source now have distinct compositions. */
/* The project's brand tokens and base rules are supplied by marketing.css; foundation mapping is recorded in docs/design/sentiment-pulse-visual-balance/.hallmark/preflight.json. */
.pulse-page :where(h1, h2), .pulse-home h2 { min-width: 0; overflow-wrap: break-word; text-wrap: balance; }
.pulse-page :where(h1, h2) { font-family: var(--font-display); font-weight: 400; letter-spacing: -.035em; line-height: 1.04; }
.pulse-page h2 { font-size: clamp(2.25rem, 3vw + 1rem, 4rem); margin: 0 0 28px; }
.pulse-page p { font-size: 18px; line-height: 1.65; }
.pulse-page .pulse-hero { padding-block: 136px 48px; }
.pulse-intro { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: end; margin-bottom: 56px; }
.pulse-page .pulse-intro h1 { max-width: 14ch; margin: 0; font-size: clamp(3.25rem, 6.4vw, 6.25rem); line-height: .98; letter-spacing: -.04em; font-variation-settings: "opsz" 72; }
.pulse-intro__copy p { max-width: 52ch; margin: 0 0 32px; font-size: clamp(1.125rem, .4vw + 1rem, 1.375rem); line-height: 1.5; }
.pulse-page .on-field a:not(.story-button) { color: var(--color-field-ink); }
.pulse-page .on-field .story-button { --btn-bg: var(--color-field-ink); --btn-ink: var(--color-field); --btn-hover: var(--color-field-press); }
.pulse-live { position: relative; margin-top: 48px; color: var(--text); border: 1px solid var(--border-strong); border-radius: 10px; background: var(--bg); overflow: clip; }
.pulse-live__stage { display: none; position: relative; }
.pulse-live[data-loading] .pulse-live__stage { display: block; }
.pulse-live__frame { display: block; width: 100%; height: 480px; border: 0; visibility: hidden; opacity: 0; transition: opacity 220ms ease-out; }
.pulse-live[data-ready] .pulse-live__frame { visibility: visible; opacity: 1; }
.pulse-live[data-failed] .pulse-live__stage { display: none; }
.pulse-live__loading { position: absolute; inset: 0; display: grid; place-items: center; pointer-events: none; opacity: 1; visibility: visible; transition: opacity 180ms ease-out, visibility 0s linear 180ms; }
.pulse-live__loading-grid { position: absolute; inset: 76px 24px 60px; width: calc(100% - 48px); height: calc(100% - 136px); fill: none; stroke: var(--border-strong); opacity: .65; }
.pulse-live__spinner { width: 24px; height: 24px; border: 2px solid var(--border-strong); border-top-color: var(--amber-text); border-radius: 50%; animation: pulse-loading-spin 1s linear infinite; }
.pulse-live[data-ready] .pulse-live__loading { opacity: 0; visibility: hidden; }
.pulse-live:is([data-ready], [data-failed]) .pulse-live__spinner { animation: none; }
@keyframes pulse-loading-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion: reduce) {
  .pulse-live__spinner { animation: none; }
  .pulse-live__loading, .pulse-live__frame { transition: none; }
}
.pulse-live__fallback[hidden] { display: none; }
.pulse-live__fallback { padding: 24px; }
.pulse-live noscript img { display: block; width: 100%; height: auto; }
.pulse-live noscript p { padding: 16px 24px; }
.pulse-page .on-field .pulse-live a { color: var(--amber-text); }
.pulse-evidence { padding-block: 112px; }
.pulse-evidence--band { background: var(--surface); }
.pulse-evidence__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; margin-bottom: 48px; }
.pulse-evidence__intro h2 { max-width: 22ch; }
.pulse-evidence__intro > p { color: var(--ink-2); max-width: 52ch; margin: 0; }
.pulse-evidence__shot { margin: 0; }
.pulse-evidence__shot img { display: block; width: 100%; height: auto; }
.pulse-evidence__shot picture { display: block; width: 100%; }
/* Each lower figure holds a still screenshot and, once one has booted, a looping
   native scene in the same grid cell. The still keeps its place and its alt
   text underneath, so the scene fades in over it. The frame stays at zero
   height until it is live, so a boot never moves the page. Going live can: the
   zoom and range stills match their scenes' height only at 390 px and from
   1440 px, and the source still is a different crop. sentiment-pulse.js goLive
   swaps out of view without moving what is on screen and eases the height in
   view. */
.pulse-scene { position: relative; display: grid; border: 1px solid var(--border-strong); border-radius: 10px; overflow: clip; background: var(--bg); transition: height 560ms cubic-bezier(.2, .7, .2, 1); }
.pulse-scene > :is(.pulse-scene__still, .pulse-scene__frame) { grid-area: 1 / 1; min-width: 0; }
.pulse-scene__still { transition: opacity 480ms ease; }
.pulse-scene__frame { display: block; width: 100%; border: 0; pointer-events: none; opacity: 0; transition: opacity 480ms ease; }
.pulse-scene:not([data-live]) .pulse-scene__frame { height: 0 !important; }
.pulse-scene[data-live] .pulse-scene__frame { opacity: 1; }
/* Live, the still leaves the layout, so the figure is exactly the scene's height. */
.pulse-scene[data-live] .pulse-scene__still { position: absolute; top: 0; left: 0; width: 100%; opacity: 0; pointer-events: none; }
.pulse-scene__toggle { position: absolute; right: 12px; bottom: 12px; z-index: 1; appearance: none; display: inline-grid; place-items: center; width: 34px; height: 34px; padding: 0; border: 1px solid var(--border-strong); border-radius: 50%; background: var(--bg); color: var(--ink-2); cursor: pointer; opacity: .8; transition: opacity 160ms ease, background-color 160ms ease, color 160ms ease; }
.pulse-scene__toggle:hover, .pulse-scene__toggle:focus-visible { opacity: 1; background: var(--surface2); color: var(--text); }
.pulse-scene__toggle[hidden] { display: none; }
.pulse-scene__toggle svg { grid-area: 1 / 1; width: 14px; height: 14px; fill: currentColor; }
.pulse-scene__toggle .pulse-scene__play, .pulse-scene__toggle[data-paused] .pulse-scene__pause { display: none; }
.pulse-scene__toggle[data-paused] .pulse-scene__play { display: block; margin-left: 2px; }
@media (prefers-reduced-motion: reduce) {
  .pulse-scene__still, .pulse-scene__frame { transition: none; }
}
.pulse-evidence__shot figcaption { color: var(--ink-3); font-size: 14px; line-height: 1.6; margin-top: 16px; }
.pulse-page .pulse-close { padding-block: 112px; border-top: 1px solid var(--border-strong); }
.pulse-close > p { max-width: 55ch; color: var(--ink-2); margin-bottom: 32px; }
.pulse-page .pulse-close__context { max-width: 70ch; font-size: 16px; margin: 48px 0 0; }
.pulse-home { border-top: 1px solid var(--border-strong); }
.pulse-home__intro { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 80px; align-items: start; }
.pulse-home__intro h2 { margin: 0; }
.pulse-home__intro .lead { margin: 0 0 24px; color: var(--ink-2); }
.pulse-page :where(a, button):focus-visible { outline: 2px solid var(--focus-ring, var(--amber-text)); outline-offset: 5px; }
.pulse-page .pulse-scene__toggle:focus-visible { outline-offset: 3px; }
.pulse-page .on-field :where(a, button):focus-visible { outline-color: var(--color-field-ink); }
.pulse-page .on-field .pulse-live :where(a, button):focus-visible { outline-color: var(--focus-ring, var(--amber-text)); }
@media (max-width: 960px) {
  .pulse-intro { grid-template-columns: minmax(0, 1fr); gap: 32px; margin-bottom: 40px; }
  .pulse-page .pulse-intro h1 { max-width: 18ch; font-size: clamp(3.25rem, 8vw, 5.25rem); }
  .pulse-intro__copy p { max-width: 52ch; }
  .pulse-page .pulse-hero { padding-top: 112px; }
  .pulse-evidence__intro, .pulse-home__intro { gap: 40px; }
  .pulse-evidence { padding-block: 80px; }
}
@media (max-width: 640px) {
  .pulse-page .pulse-hero { padding-block: 104px 32px; }
  .pulse-page .pulse-intro h1 { font-size: clamp(2.75rem, 12vw, 4rem); }
  .pulse-evidence__intro, .pulse-home__intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pulse-evidence__intro { margin-bottom: 32px; }
  .pulse-evidence, .pulse-page .pulse-close { padding-block: 72px; }
  .pulse-live { margin-top: 32px; }
  .pulse-live__frame { height: 580px; }
  .pulse-scene__toggle { right: 8px; bottom: 8px; }
  .pulse-live__loading-grid { inset-inline: 16px; width: calc(100% - 32px); }
}

/* Product-tile text and focus stay readable inside the amber field. */
.pulse-live { --focus-ring: var(--amber-text); }
.pulse-page .pulse-live .pulse-live__fallback { color: var(--ink-2); }

/* Product evidence composition: native data is the strongest color on the first screen. */
.pulse-page .pulse-hero { padding-block: 104px 24px; background: var(--bg); color: var(--text); }
.pulse-page .pulse-intro { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; align-items: center; margin-bottom: 32px; }
.pulse-page .pulse-intro h1 { max-width: 16ch; font-size: clamp(2.75rem, 4.5vw, 4.5rem); line-height: 1.03; }
.pulse-page .pulse-intro__copy p { max-width: 52ch; margin-bottom: 20px; font-size: 18px; }
.pulse-page .pulse-intro .story-actions { gap: 16px 24px; }
.pulse-page .pulse-hero .pulse-live { margin-top: 0; }
.pulse-scene__toggle:active { transform: translateY(1px); }
.pulse-page .pulse-evidence--zoom { padding-block: 112px 128px; border-top: 1px solid var(--border-strong); }
.pulse-page .pulse-evidence--band { padding-block: 0 112px; background: var(--bg); }
.pulse-evidence__well { background: var(--surface-evidence); padding: 56px 40px 40px; }
.pulse-evidence__well .pulse-evidence__intro { display: block; margin-bottom: 40px; }
.pulse-evidence__well .pulse-evidence__intro h2 { max-width: 24ch; margin-bottom: 20px; }
.pulse-evidence__well .pulse-evidence__intro p { max-width: 65ch; }
.pulse-page .pulse-evidence--source { background: var(--surface-context); padding-block: 112px; }
.pulse-evidence__document { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: 32px; align-items: center; }
.pulse-evidence__document .pulse-evidence__intro { display: block; margin: 0; max-width: 50ch; }
.pulse-evidence__document .pulse-evidence__intro h2 { max-width: 18ch; }
.pulse-evidence__document .pulse-evidence__source { max-width: 420px; justify-self: end; }
.pulse-page .pulse-close { padding-block: 96px; border: 0; }
.pulse-close__panel { padding: 56px 64px; }
.pulse-close__panel h2 { max-width: 20ch; }
.pulse-page .pulse-close__panel > p { max-width: 65ch; color: var(--color-field-ink); }
.pulse-close__panel .story-actions { margin-top: 32px; }
.pulse-page .pulse-close__context { max-width: 70ch; margin-top: 40px; }
@media (max-width: 960px) {
  .pulse-page .pulse-hero { padding-block: 104px 56px; }
  .pulse-page .pulse-intro { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .pulse-page .pulse-intro h1 { max-width: 20ch; font-size: clamp(2.75rem, 6vw, 4rem); }
  .pulse-evidence__well { padding: 40px 24px 32px; }
  .pulse-evidence__document { gap: 40px; }
  .pulse-page .pulse-evidence--source { padding-block: 80px; }
  .pulse-close__panel { padding: 40px; }
}
@media (max-width: 640px) {
  .pulse-page .pulse-hero { padding-block: 96px 48px; }
  .pulse-page .pulse-intro h1 { max-width: 16ch; font-size: clamp(2.5rem, 10vw, 3.5rem); }
  .pulse-page .pulse-evidence--zoom { padding-block: 72px; }
  .pulse-page .pulse-evidence--band { padding-bottom: 72px; }
  .pulse-evidence__well { padding: 32px 16px 24px; }
  .pulse-evidence__document { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .pulse-evidence__document .pulse-evidence__source { width: 100%; max-width: 420px; justify-self: start; }
  .pulse-page .pulse-evidence--source { padding-block: 72px; }
  .pulse-page .pulse-close { padding-block: 64px; }
  .pulse-close__panel { padding: 32px 24px; }
}
.pulse-evidence__well .pulse-scene { border: 0; border-radius: 0; }