/* Hallmark · page styles for this route; stamp and tokens live in site.css · hero: Stage */

.hero--wa { padding-block: var(--space-2xl); }
.wa-hero { display: grid; grid-template-columns: minmax(0, 1fr) 30rem; gap: var(--space-3xl); align-items: center; }
.wa-hero__text { display: grid; gap: var(--space-lg); align-content: center; }
.wa-hero__text h1 { font-size: clamp(2.5rem, 3vw + 1rem, 4.25rem); max-width: none; }
.wa-hero__text .lead { max-width: 46ch; }
.wa-hero__asks { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-top: var(--space-sm); }
.ask { display: inline-flex; flex-wrap: wrap; align-content: center; align-items: baseline; column-gap: var(--space-xs); gap: var(--space-xs); min-height: 44px; padding: var(--space-xs) var(--space-md); border: 1px solid var(--color-rule-strong); border-radius: var(--radius-pill); background: var(--color-paper); color: var(--color-ink); font: 500 var(--text-sm)/1.3 var(--font-body); text-align: left; cursor: pointer; transition: border-color var(--dur-short) var(--ease-out), background-color var(--dur-short) var(--ease-out), transform var(--dur-micro) var(--ease-out); }
.ask small { font-size: var(--text-xs); font-weight: 400; color: var(--color-accent); }
.ask:hover { border-color: var(--color-accent); }
.ask:active { transform: translateY(1px); }
.ask[aria-pressed="true"] { border-color: var(--color-accent); background: var(--color-accent-soft); }
.ask:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 2px; }
/* below ~1200px the pills wrap onto two lines and turn into rounded blobs, so they stack as cards with the label in its own column */
@media (max-width: 75rem) {
  .wa-hero__asks { display: grid; grid-template-columns: minmax(0, 1fr); }
  .ask { display: grid; grid-template-columns: 4.5rem minmax(0, 1fr); align-items: center; gap: var(--space-sm); padding-block: var(--space-xs); border-radius: var(--radius-card); text-align: left; }
  .wa-hero__asks .loop-toggle { justify-self: start; }
}
.wa-hero__panel { margin: 0; height: clamp(30rem, calc(100dvh - 18rem), 33rem); }
.wa-hero__panel .wa { width: 100%; height: 100%; box-shadow: var(--app-elev-panel), var(--app-elev-float); }
@media (max-width: 60rem) {
  .wa-hero { grid-template-columns: minmax(0, 1fr); gap: var(--space-xl); }
  .wa-hero__panel { height: 30rem; }
}

.realfilm { margin: 0; }
.realfilm__frame { position: relative; aspect-ratio: 16 / 9; overflow: hidden; border-radius: var(--radius-card); background: var(--color-panel); outline: 1px solid var(--color-rule-strong); }
.realfilm__frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.realfilm__bar { display: grid; gap: var(--space-sm); margin-top: var(--space-md); }
.chapters { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-xs); list-style: none; }
.chapter { --p: 0; display: grid; gap: var(--space-2xs); width: 100%; height: 100%; align-content: start; padding: var(--space-sm) 0 var(--space-xs); border: 0; background: none; color: var(--color-ink-2); font: 500 var(--text-sm)/1.35 var(--font-body); text-align: left; cursor: pointer; }
.chapter__track { position: relative; display: block; height: 6px; margin-bottom: var(--space-xs); overflow: hidden; border-radius: var(--radius-pill); background: var(--color-rule-strong); transition: background-color var(--dur-short) var(--ease-out); }
.chapter__track i { position: absolute; inset: 0; background: var(--color-accent); transform: scaleX(var(--p)); transform-origin: left center; }
.chapter__time { font-size: var(--text-xs); font-variant-numeric: tabular-nums; color: var(--color-muted); }
.chapter:hover { color: var(--color-ink); }
.chapter:hover .chapter__track { background: color-mix(in oklab, var(--color-accent) 30%, var(--color-rule-strong)); }
.chapter[aria-current="true"] { color: var(--color-ink); }
.chapter[aria-current="true"] .chapter__time { color: var(--color-accent); }
.chapter:active .chapter__track { transform: scaleY(1.4); }
.chapter:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 4px; border-radius: var(--radius-inner); }
@media (max-width: 48rem) { .chapters { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--space-md); } }
.realfilm__controls { display: flex; align-items: center; gap: var(--space-xs); }
.realfilm__controls .hint { flex: 1; min-height: 1lh; font-size: var(--text-sm); color: var(--color-ink-2); }
.points3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); margin-top: var(--space-2xl); list-style: none; }
.points3 li { display: grid; gap: var(--space-xs); align-content: start; padding-top: var(--space-md); border-top: 2px solid var(--color-ink); }
.points3 p { color: var(--color-ink-2); }
@media (max-width: 60rem) { .points3 { grid-template-columns: minmax(0, 1fr); } .realfilm__controls { flex-wrap: wrap; } }

.bento { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gap-columns); }
.bento__tile { display: grid; grid-template-rows: auto 1fr; gap: var(--space-lg); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper-2); min-width: 0; }
.bento__tile--7 { grid-column: span 7; } .bento__tile--5 { grid-column: span 5; } .bento__tile--4 { grid-column: span 4; }
.bento__tile--12 { grid-column: 1 / -1; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); grid-template-rows: auto; align-items: center; }
.bento__copy { display: grid; gap: var(--space-xs); align-content: start; }
.bento__copy p { color: var(--color-ink-2); max-width: 44ch; }
.bento__ui { display: grid; gap: var(--space-sm); align-content: start; padding: var(--space-md); border-radius: 14px; background: var(--app-card); color: var(--app-fg); font: 400 14px/1.5 var(--app-font); font-feature-settings: "cv02", "cv03", "cv04", "cv11"; box-shadow: var(--app-elev-panel); min-width: 0; }
.bento__ui .wa-turn { display: flex; flex-direction: column; gap: var(--space-xs); }
.wa-donut { display: grid; justify-items: center; gap: var(--space-xs); }
.wa-donut svg { width: 120px; height: 120px; }
.wa-donut circle { fill: none; stroke-width: 16; transform: rotate(-90deg); transform-origin: center; }
.wa-donut .ring { stroke: var(--app-muted); }
.wa-donut .s1 { stroke: var(--app-chart-1); } .wa-donut .s2 { stroke: var(--app-chart-3); } .wa-donut .s3 { stroke: var(--app-chart-2); }
.langs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-2xs); padding: var(--space-2xs); border-radius: var(--app-radius); background: var(--app-muted); }
@media (max-width: 40rem) { .langs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.langs button { min-height: 36px; padding: 0 var(--space-xs); border: 0; border-radius: 8px; background: transparent; color: var(--app-muted-fg); font: 500 13px/1 var(--app-font); cursor: pointer; transition: background-color var(--dur-short) var(--ease-out), color var(--dur-short) var(--ease-out); }
.langs button:hover { color: var(--app-fg); }
.langs button[aria-selected="true"] { background: var(--app-card); color: var(--app-fg); box-shadow: var(--app-elev-raised); }
.langs button:focus-visible { outline: 2px solid var(--color-focus); outline-offset: 1px; }
.langs.is-sliding { position: relative; isolation: isolate; }
.langs.is-sliding::before { content: ""; position: absolute; top: 0; left: 0; z-index: -1; width: var(--pill-w); height: var(--pill-h); border-radius: 8px; background: var(--app-card); box-shadow: var(--app-elev-raised); transform: translate(var(--pill-x), var(--pill-y)); }
.langs.is-slide-ready::before { transition: transform var(--dur-long) var(--ease-out), width var(--dur-long) var(--ease-out), height var(--dur-long) var(--ease-out); }
.langs.is-sliding button[aria-selected="true"] { background: transparent; box-shadow: none; }
.bento__ui [role="tabpanel"] { min-height: 9.5rem; }
@media (max-width: 60rem) {
  .bento__tile--7, .bento__tile--5, .bento__tile--4, .bento__tile--12 { grid-column: 1 / -1; }
  .bento__tile--12 { grid-template-columns: minmax(0, 1fr); }
}

/* the sources slide in toward Wattson as the diagram scrolls through */
@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) and (min-width: 60rem) {
    .diagram { view-timeline: --dia block; }
    .diagram ul:first-child li, .diagram ul:last-child li { animation: dia-in linear both; animation-timeline: --dia; }
    .diagram ul:first-child li { --from: -24px; }
    .diagram ul:last-child li { --from: 24px; }
    .diagram li:nth-child(1) { animation-range: entry 20% entry 70%; }
    .diagram li:nth-child(2) { animation-range: entry 30% entry 80%; }
    .diagram li:nth-child(3) { animation-range: entry 40% entry 90%; }
    .diagram__core { animation: dia-core linear both; animation-timeline: --dia; animation-range: entry 50% contain 20%; }
    @keyframes dia-in { from { transform: translateX(var(--from)); } to { transform: none; } }
    @keyframes dia-core { from { transform: scale(0.9); } to { transform: none; } }
  }
}
@media (max-width: 60rem) { .realfilm__chips { flex-wrap: nowrap; overflow-x: auto; padding-bottom: var(--space-2xs); } }

/* outcomes: three cards that read at a glance, each with the measure it moves */
.outcomes { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--gap-columns); list-style: none; }
.outcomes li { display: grid; grid-template-rows: auto auto 1fr auto; gap: var(--space-xs); padding: var(--space-xl); border-radius: var(--radius-card); background: var(--color-paper); box-shadow: inset 0 0 0 1px var(--color-rule); }
.outcomes__icon { display: grid; place-items: center; width: 48px; height: 48px; margin-bottom: var(--space-xs); border-radius: var(--radius-inner); background: var(--color-accent-soft); color: var(--color-accent); }
.outcomes__icon .icon { width: 24px; height: 24px; }
.outcomes h4 { margin: 0; font: 600 var(--text-title)/1.2 var(--font-display); letter-spacing: var(--tracking-display); color: var(--color-ink); }
.outcomes p { color: var(--color-ink-2); }
.outcomes__trend { justify-self: start; display: inline-flex; align-items: center; gap: var(--space-2xs); margin-top: var(--space-sm); padding: var(--space-2xs) var(--space-sm) var(--space-2xs) var(--space-xs); border-radius: var(--radius-pill); background: color-mix(in oklab, var(--color-success) 12%, transparent); color: var(--color-success); font-size: var(--text-sm); font-weight: 500; }
.outcomes__trend .icon { width: 16px; height: 16px; }
[data-mode="dark"] .outcomes__trend { color: oklch(76% 0.13 165); }
@media (prefers-color-scheme: dark) { :root:not([data-mode]) .outcomes__trend { color: oklch(76% 0.13 165); } }
@media (max-width: 60rem) { .outcomes { grid-template-columns: minmax(0, 1fr); } .outcomes li { padding: var(--space-lg); } }

/* the closing band: Wattson periwinkle on the line, nodes and icons; the three steps as cards on a line that draws itself */
.link--up:hover .icon { translate: 0 -2px; }
.close--wattson .chain { --chain-ink: var(--color-accent-on-field); }
.close--wattson .chain--num .chain__steps > li::before { background: var(--color-field); box-shadow: inset 0 0 0 2px var(--color-accent-on-field); color: var(--color-accent-on-field); }
.close--wattson .chain--num .chain__steps > li:last-child::before { background: var(--color-accent-on-field); color: var(--color-field); }
.close--wattson .chain__steps > li { gap: var(--space-sm); padding: var(--space-lg); border-radius: var(--radius-card); background: color-mix(in oklab, var(--color-field-2) 70%, transparent); box-shadow: inset 0 0 0 1px var(--color-field-rule); }
.close--wattson .chain__steps > li:last-child { box-shadow: inset 0 0 0 1px color-mix(in oklab, var(--color-accent-on-field) 55%, transparent); }
.close--wattson .chain__steps b { color: var(--color-field-ink); font-size: var(--text-lg); }
.chain__icon { display: grid; place-items: center; width: 44px; height: 44px; margin-bottom: var(--space-2xs); border-radius: var(--radius-inner); background: color-mix(in oklab, var(--color-accent-on-field) 18%, transparent); color: var(--color-accent-on-field); }
.chain__icon svg { width: 22px; height: 22px; }
.chain__icon svg:not(.icon) { fill: currentColor; width: 26px; height: 26px; }
.close--wattson .chain__steps > li:last-child .chain__icon { background: var(--color-accent-on-field); color: var(--color-field); }
@media (max-width: 60rem) { .close--wattson .chain__steps > li::before, .close--wattson .chain--num .chain__steps > li::before { top: var(--space-lg); } }