/* ABC Diatype is scoped to product assets; page typography stays unchanged. */
@font-face { font-family: "ABC Diatype"; src: url("/assets/fonts/ABCDiatype-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "ABC Diatype"; src: url("/assets/fonts/ABCDiatype-Medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "ABC Diatype"; src: url("/assets/fonts/ABCDiatype-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
.ha-scene, .heatmap-shell, .heatmap-preview { --font-body: "ABC Diatype", Arial, sans-serif; --font-mono: var(--font-body); font-family: var(--font-body); }
/* Fresh website illustrations using Kito's app tokens and the film's measured motion. */
.how-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; }
.how-visual[data-how-asset] { container: how-art / inline-size; width: 100%; display: grid; }
.how-visual[data-how-asset] > .ha-scene { grid-area: 1 / 1; }
.ha-scene { --ha-ease: cubic-bezier(.22,1,.36,1); margin: 0; min-width: 0; min-height: 470px; display: flex; flex-direction: column; border-radius: var(--radius-lg); background: var(--color-surface-sunken); overflow: hidden; font-family: var(--font-body); font-size: .875rem; line-height: 1.4; color: var(--color-text-primary); }
.ha-scene *, .ha-scene *::before, .ha-scene *::after { box-sizing: border-box; }
.ha-scene strong, .ha-scene b { font-weight: 500; }
.ha-scene h4 { margin: 0; font-weight: 400; }
.ha-scene .ha-icon { width: 20px; height: 20px; flex-shrink: 0; }
.ha-photo { display: block; object-fit: contain; mix-blend-mode: multiply; }
.ha-label, .ha-art-label { font-size: .75rem; line-height: 1.45; letter-spacing: .065em; text-transform: uppercase; color: var(--site-muted); }
.ha-label { display: block; }
.ha-source { display: inline-flex; align-items: center; gap: 6px; font-size: .75rem; color: var(--color-success); line-height: 1.4; }
.ha-source .ha-icon { width: 15px; height: 15px; }
.ha-done { display: inline-flex; align-items: center; gap: 7px; color: var(--color-success); font-size: .8125rem; }
.ha-done .ha-icon { width: 17px; height: 17px; }
.ha-art-foot { font-size: .8125rem; color: var(--site-muted); text-align: center; }
.ha-centered { display: flex; justify-content: center; }
.ha-scene-footer { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding: 8px 24px; min-height: 52px; border-top: 1px solid var(--color-border-subtle); color: var(--site-muted); font-size: .75rem; }
.ha-scene-footer > button { display: inline-flex; align-items: center; justify-content: flex-end; gap: 6px; min-height: 36px; padding-inline: 6px; font-size: .8125rem; }
.ha-scene-footer .ha-icon { width: 15px; height: 15px; }
.ha-footer-quiet { border-top: 0; }
.ha-footer-quiet > button { margin-left: auto; }
/* Abstract: one idea per composition, with fixed type baselines. */
.ha-abstract { background: var(--color-bg); border: 1px solid var(--color-border-subtle); }
.ha-find-composition, .ha-evidence-composition, .ha-publish-composition, .ha-monitor-composition, .ha-ask-composition { padding: 30px; flex: 1; min-width: 0; }
.ha-scene .ha-find-heading { margin: 0 0 24px; font-size: 1.25rem; line-height: 1.3; letter-spacing: -.02em; }
.ha-find-focus { display: grid; grid-template-columns: minmax(0,.9fr) minmax(0,1.3fr); gap: 24px; align-items: center; }
.ha-find-product { min-width: 0; text-align: center; }
.ha-find-product > img { width: 100%; height: 240px; }
.ha-sku { display: block; margin-top: 10px; font-size: .75rem; color: var(--site-muted); letter-spacing: .04em; }
.ha-finding-slips { display: grid; gap: 12px; }
.ha-slip { background: var(--color-surface); padding: 14px 16px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); }
.ha-slip-status { display: flex; align-items: baseline; flex-wrap: wrap; gap: 5px; margin: 5px 0 7px; }
.ha-slip-status > span { font-size: .8125rem; color: var(--site-muted); }
.ha-slip strong { font-size: 1rem; }
.ha-slip > span:last-child { display: block; font-size: .8125rem; line-height: 1.4; color: var(--site-muted); }
.ha-slip-attention strong { color: var(--color-accent); }
.ha-evidence-composition { display: flex; flex-direction: column; justify-content: center; }
.ha-evidence-files { display: flex; justify-content: center; gap: 12px; }
.ha-evidence-file { display: flex; gap: 8px; align-items: center; padding: 10px 12px; border: 1px solid var(--color-border); border-radius: var(--radius-xs); background: var(--color-surface); font-size: .75rem; }
.ha-evidence-file .ha-icon { width: 17px; height: 17px; }
.ha-evidence-link { width: 1px; height: 26px; align-self: center; background: var(--color-border-strong); }
.ha-material-document { padding: 22px; background: var(--color-surface); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.ha-material-heading { display: flex; align-items: center; gap: 15px; padding-bottom: 16px; border-bottom: 1px solid var(--color-border-subtle); }
.ha-material-heading .ha-photo { width: 45px; height: 54px; }
.ha-material-heading p { margin-top: 5px; font-size: .875rem; }
.ha-material-change { display: grid; grid-template-columns: .7fr 20px 1.3fr; align-items: center; gap: 18px; padding-block: 20px 14px; }
.ha-missing { font-size: 1.125rem; color: var(--color-text-secondary); }
.ha-material-change > .ha-icon { color: var(--color-text-muted); }
.ha-material-value strong { font-size: clamp(1.375rem, 4cqw, 2rem); line-height: 1.15; color: var(--color-success); }
.ha-description-proof { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--color-border-subtle); }
.ha-description-proof p { margin-top: 8px; font-size: .875rem; line-height: 1.55; }
.ha-description-before { padding-block: 16px; }
.ha-description-before p { margin-top: 7px; font-size: .875rem; line-height: 1.5; color: var(--site-muted); text-decoration: line-through; text-decoration-color: var(--color-border-strong); }
.ha-description-after { border-top: 1px solid var(--color-border-subtle); padding-top: 16px; }
.ha-description-after > .ha-label, .ha-description-proposed > .ha-label { color: var(--color-success); }
.ha-description-after > p { margin-block: 8px 12px; font-size: 1rem; line-height: 1.5; }
.ha-description-source { margin-top: 14px; }
.ha-description-proposed { border-top: 1px solid var(--color-border-subtle); padding-top: 14px; }
.ha-description-proposed > p { margin-top: 8px; }
.ha-evidence-composition > .ha-centered { margin-top: 22px; }
.ha-publish-composition { display: flex; flex-direction: column; justify-content: center; }
.ha-publish-composition > .ha-art-label { text-align: center; margin-bottom: 38px; }
.ha-publish-routing { display: grid; grid-template-columns: minmax(0,1fr) 36px minmax(0,1.1fr); align-items: center; }
.ha-data-packet { position: relative; display: flex; flex-direction: column; align-items: flex-start; padding: 22px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-md); }
.ha-data-packet > .ha-icon { width: 32px; height: 32px; margin-bottom: 18px; }
.ha-data-packet > strong { font-size: 1.125rem; }
.ha-data-packet > span:not(.ha-done) { margin-top: 4px; font-size: .75rem; color: var(--site-muted); }
.ha-packet-fields { display: grid; width: 100%; gap: 7px; margin-block: 20px; }
.ha-packet-fields span { border-bottom: 1px solid var(--color-border-subtle); padding-bottom: 5px; font-size: .75rem; color: var(--site-muted); }
.ha-route-line { position: relative; height: 1px; background: var(--color-border-strong); }
.ha-route-line i { position: absolute; top: -2px; right: 0; width: 5px; height: 5px; background: var(--color-success); }
.ha-destination-stack { display: grid; gap: 14px; }
.ha-destination { display: flex; align-items: center; gap: 10px; padding: 16px 12px; border: 1px solid var(--color-border-subtle); border-radius: var(--radius-sm); background: var(--color-surface); }
.ha-destination strong { flex: 1; font-size: .875rem; }
.ha-destination > .ha-icon { color: var(--site-muted); width: 17px; }
.ha-shopping-destination { display: block; }
.ha-shopping-channels { display: grid; gap: 14px; }
.ha-shopping-channel { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: .875rem; line-height: 1.35; }
.ha-shopping-channel > img { display: block; width: 22px; height: 22px; flex: 0 0 22px; object-fit: contain; }
.ha-monitor-heading { text-align: center; }
.ha-monitor-heading > strong { display: block; margin-top: 16px; font-size: clamp(1.5rem, 5cqw, 2rem); letter-spacing: -.03em; line-height: 1.2; font-weight: 400; }
.ha-watch-track { display: flex; align-items: flex-start; gap: 8px; margin: 32px 0; }
.ha-watch-event { flex: 0 1 110px; text-align: center; }
.ha-watch-event > .ha-icon { display: block; margin: 0 auto 10px; }
.ha-watch-event > span { display: block; font-size: .8125rem; }
.ha-watch-rule { height: 1px; background: var(--color-border-strong); flex: 1; margin-top: 10px; }
.ha-attention { color: var(--color-accent); }
.ha-positive { color: var(--color-success); }
.ha-watch-change { display: flex; align-items: center; gap: 18px; padding: 18px 20px; background: var(--color-surface); border-radius: var(--radius-md); border: 1px solid var(--color-border-subtle); }
.ha-watch-change > .ha-photo { width: 65px; height: 78px; }
.ha-watch-change > div:not(.ha-watch-check) { flex: 1; min-width: 0; }
.ha-watch-change p { font-size: 1rem; margin: 5px 0 8px; }
.ha-watch-check { color: var(--color-success); }
.ha-monitor-composition .ha-art-foot { margin-top: 24px; }
/* The film composer: the same spark, return key, prompt and send gesture. */
.ha-ask-composition { display: flex; flex-direction: column; justify-content: center; }
.ha-ask-stage { display: flex; flex-direction: column; width: 100%; }
.ha-film-intro { display: grid; grid-template-rows: 0fr; }
.ha-film-intro > div { min-height: 0; overflow: hidden; }
.ha-film-heading { margin: 0; padding-bottom: 24px; text-align: center; font-size: 1.125rem; line-height: 1.35; font-weight: 400; }
.ha-film-composer { position: relative; display: grid; grid-template-columns: 24px minmax(0,1fr) 38px; gap: 12px; align-items: center; min-height: 74px; padding: 18px 20px; border: .5px solid transparent; border-radius: 14.6667px; corner-shape: round; background: var(--color-surface-sunken); }
.ha-film-message { min-height: 26px; min-width: 0; font-size: 1rem; line-height: 26px; letter-spacing: 0; }
.ha-film-word { white-space: nowrap; }
.ha-film-spark { width: 24px; height: 24px; color: var(--color-text-muted); opacity: 0; }
.ha-film-spark svg { width: 100%; height: 100%; }
.ha-film-placeholder { position: absolute; left: 56px; top: 50%; transform: translateY(-50%); font-size: .75rem; font-weight: 500; letter-spacing: .08em; color: var(--color-text-secondary); opacity: 0; }
.ha-film-send { display: grid; place-items: center; width: 38px; height: 38px; border: .5px solid transparent; border-radius: 10px; corner-shape: round; color: var(--color-bg); background: var(--color-text-primary); opacity: 0; }
.ha-film-send svg { width: 12px; height: 12px; }
.ha-film-pointer { position: absolute; right: 15px; top: calc(50% + 3px); opacity: 0; transform-origin: 3px 2px; filter: drop-shadow(0 1px 2px rgba(38,37,30,.18)); }
.ha-film-reply { margin-top: 28px; padding-inline: 2px; font-size: 1rem; line-height: 1.5; }
.ha-film-reply > img { display: block; width: 48px; height: auto; margin-bottom: 16px; }
.ha-film-reply p { margin: 0; }
.ha-film-reply p + p { margin-top: 10px; }
.ha-film-reply strong { font-weight: 700; }
.ha-film-review { color: var(--site-muted); font-size: .875rem; }
.ha-scene.is-playing .ha-film-intro { animation: ha-film-fold 1000ms var(--ha-ease) 3250ms both; }
.ha-scene.is-playing .ha-film-heading { animation: ha-film-heading 3500ms var(--ha-ease) both; }
.ha-scene.is-playing .ha-film-composer { animation: ha-film-send 1000ms var(--ha-ease) 3250ms both; }
.ha-scene.is-playing .ha-film-char { animation: ha-film-type 1ms linear var(--type-at) both; }
.ha-scene.is-playing .ha-film-placeholder { animation: ha-film-control-out 1ms linear 333ms both; }
.ha-scene.is-playing .ha-film-spark { animation: ha-film-control-out 220ms ease 3250ms both; }
.ha-scene.is-playing .ha-film-send { animation: ha-film-activate 1ms linear 333ms both, ha-film-press 250ms ease 3180ms both, ha-film-control-out 220ms ease 3250ms both; }
.ha-scene.is-playing .ha-film-pointer { animation: ha-film-cursor 3550ms var(--ha-ease) both; }
.ha-scene.is-playing .ha-film-reply { animation: ha-appear 650ms var(--ha-ease) 3500ms both; }
@keyframes ha-film-fold { from { grid-template-rows: 1fr; } to { grid-template-rows: 0fr; } }
@keyframes ha-film-heading { 0% { opacity: 0; transform: translateY(4px); } 17%,85% { opacity: 1; transform: none; } 100% { opacity: 0; transform: translateY(-4px); } }
@keyframes ha-film-send { from { background: rgba(255,255,255,.8); border-color: #D1D1CB; box-shadow: 0 2px 12px rgba(38,37,30,.045); } to { background: var(--color-surface-sunken); border-color: transparent; box-shadow: 0 2px 12px rgba(38,37,30,0); } }
@keyframes ha-film-type { from { opacity: 0; } to { opacity: 1; } }
@keyframes ha-film-control-out { from { opacity: 1; } to { opacity: 0; } }
@keyframes ha-film-activate { from { background: var(--color-surface); color: var(--color-text-secondary); border-color: var(--color-border-subtle); } to { background: var(--color-text-primary); color: var(--color-bg); border-color: transparent; } }
@keyframes ha-film-press { 0%,100% { transform: scale(1); } 50% { transform: scale(.92); } }
@keyframes ha-film-cursor { 0%,64% { opacity: 0; transform: translate(72px,46px); } 69% { opacity: 1; } 89% { opacity: 1; transform: translate(0,0) scale(1); } 93% { opacity: 1; transform: translate(0,0) scale(.92); } 96% { opacity: 1; transform: translate(0,0) scale(1); } 100% { opacity: 0; transform: translate(0,0); } }
.ha-badge { display: inline-block; color: var(--site-muted); padding: 4px 8px; border-radius: var(--radius-xs); background: var(--color-surface-sunken); font-size: .8125rem; line-height: 1.4; }
/* One finite reveal, then a settled result. Motion can be replayed or paused. */
.ha-scene.is-playing { animation: ha-view-in 220ms ease-out both; }
.ha-scene.is-playing .ha-reveal { animation: ha-appear 650ms var(--ha-ease) var(--ha-delay,0ms) both; }
.ha-scene.is-playing .ha-route-line i { animation: ha-route 1500ms var(--ha-ease) 650ms both; }
.ha-offscreen .ha-scene, .ha-offscreen .ha-scene *, .is-motion-paused .ha-scene, .is-motion-paused .ha-scene * { animation-play-state: paused !important; }
@keyframes ha-view-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes ha-appear { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@keyframes ha-route { from { transform: translateX(-30px); opacity: 0; } 20% { opacity: 1; } to { transform: none; opacity: 1; } }
@container how-art (max-width: 480px) {
  .ha-scene { min-height: 0; }
  .ha-find-composition, .ha-evidence-composition, .ha-publish-composition, .ha-monitor-composition, .ha-ask-composition { padding: 22px 18px; }
  .ha-find-focus { gap: 14px; grid-template-columns: minmax(0,.75fr) minmax(0,1.25fr); }
  .ha-find-product > img { height: 185px; }
  .ha-slip { padding: 10px 12px; }
  .ha-slip strong { font-size: .875rem; }
  .ha-slip > span:last-child { font-size: .8125rem; }
  .ha-evidence-files { gap: 8px; }
  .ha-evidence-file { padding: 8px; gap: 6px; }
  .ha-material-document { padding: 16px; }
  .ha-material-change { gap: 12px; }
  .ha-material-value strong { font-size: 1.5rem; }
  .ha-material-heading { gap: 10px; }
  .ha-material-heading p { font-size: .8125rem; }
  .ha-material-heading .ha-label { font-size: .75rem; }
  .ha-evidence-composition > .ha-centered { margin-top: 16px; }
  .ha-publish-routing { grid-template-columns: minmax(0,1fr) 16px minmax(0,1.05fr); }
  .ha-data-packet { padding: 15px 12px; }
  .ha-data-packet > strong { font-size: 1rem; }
  .ha-destination { gap: 6px; padding: 14px 10px; }
  .ha-destination > .ha-icon { display: none; }
  .ha-destination strong { font-size: .8125rem; }
  .ha-publish-composition > .ha-art-label { margin-bottom: 24px; }
  .ha-shopping-channel { gap: 7px; font-size: .8125rem; }
  .ha-shopping-channel > img { width: 18px; height: 18px; flex-basis: 18px; }
  .ha-watch-event > span { font-size: .75rem; }
  .ha-watch-change { gap: 12px; padding: 14px; }
  .ha-watch-change > .ha-photo { width: 45px; height: 60px; }
  .ha-watch-change p { font-size: .875rem; }
  .ha-watch-check { display: none; }
  .ha-watch-track { margin-block: 24px; }
  .ha-film-heading { font-size: 1rem; }
  .ha-film-composer { grid-template-columns: 22px minmax(0,1fr) 34px; gap: 10px; padding: 14px 12px; }
  .ha-film-spark { width: 22px; height: 22px; }
  .ha-film-placeholder { left: 44px; }
  .ha-film-send { width: 34px; height: 34px; }
  .ha-film-pointer { right: 4px; }
  .ha-film-reply { margin-top: 24px; }
  .ha-scene-footer { padding-inline: 18px; }
}
@media (max-width: 800px) {
  .how-heading { align-items: flex-start; flex-direction: column; gap: 20px; }
  .ha-scene-footer > button { min-height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .ha-scene, .ha-scene .ha-reveal, .ha-scene .ha-ask-stage *, .ha-scene .ha-route-line i { animation: none !important; }
  .ha-scene-footer > button { display: none; }
}