/* Home animation (2026-11-10). One navy stage carries four scenes and a summary end frame; the caption and controls sit beneath it as page text.
   Wide stage 1200 x 520; at 900px and under a portrait stage 360 x 560. The script scales the stage to the frame.
   Every rule is scoped under .ha so nothing here touches the rest of the site. */
.ha {
  color-scheme: light;
  --navy: #1E3C70; --navy-800: #16305C; --blue: #3457B5; --blue-100: #E6ECF8;
  --text: #4B4B4B; --muted: #6F6F74; --light: #F7F8FA; --white: #FFFFFF; --border: #D0D7DE;
  --purple: #8B4DAA; --teal: #207870; --teal-light: #5FBFB4; --orange: #D97B00; --orange-dark: #8A4E00;
  --hero-fg: #C3D0EA; --conf-high: #639922;
  --sans: Arial, "Helvetica Neue", Helvetica, "Liberation Sans", system-ui, sans-serif;
  --mono: "SFMono-Regular", Menlo, Consolas, monospace;
}

.ha .frame { position: relative; width: 100%; max-width: 100%; aspect-ratio: 1200 / 520; background: var(--navy); border-radius: 8px; overflow: hidden; }
.ha .stage { position: absolute; left: 0; top: 0; width: 1200px; height: 520px; transform-origin: 0 0; color: var(--white); font-size: 15px; line-height: 1.4;
  background: repeating-linear-gradient(90deg, transparent 0 46px, rgba(255,255,255,.05) 46px 47px); }
.ha .stage * { box-sizing: border-box; }
.ha .el { position: absolute; opacity: 0; transition: opacity .55s ease, transform .55s ease; transform: translateY(8px); }
.ha .el.on { opacity: 1; transform: none; }
.ha .nomotion .el, .ha .nomotion .tok, .ha .nomotion .tok *, .ha .nomotion .ln, .ha .nomotion .ring { transition: none !important; }

/* Scene labels */
.ha .tabs { position: absolute; left: 0; right: 0; top: 0; height: 46px; display: grid; grid-template-columns: repeat(4, 1fr); border-bottom: 1px solid rgba(255,255,255,.14); }
.ha .tabs button { font: inherit; font-size: 13px; font-weight: 700; letter-spacing: .04em; color: var(--hero-fg); opacity: .6; background: none; border: 0; cursor: pointer; text-align: left; padding: 0 0 0 24px; }
.ha .tabs button b { color: var(--teal-light); margin-right: 8px; }
.ha .tabs button.cur { opacity: 1; color: var(--white); box-shadow: inset 0 -2px 0 var(--white); }
.ha .tabs button:focus-visible { outline: 2px solid var(--white); outline-offset: -4px; }
.ha .bar { position: absolute; left: 0; top: 46px; height: 2px; width: 0; background: var(--teal-light); }

/* Shared pieces */
.ha .acard { background: var(--white); color: var(--text); border-radius: 8px; padding: 16px 18px; }
.ha .acard h3 { margin: 0; font-size: 19px; line-height: 1.2; color: var(--navy); }
.ha .pill { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }
.ha .pill.rules { background: var(--purple); color: #fff; }
.ha .pill.model { background: var(--teal); color: #fff; }
.ha .pill.soft { background: var(--blue-100); color: var(--navy); }
.ha .pill.pack { background: var(--teal-light); color: var(--navy); }
.ha .pill.flag { background: var(--orange); color: #fff; text-transform: none; letter-spacing: 0; font-size: 13px; padding: 6px 12px; }
.ha .anote { color: var(--hero-fg); font-size: 15px; }
.ha ul.pts { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; font-size: 14px; }
.ha ul.pts li { padding-left: 16px; position: relative; }
.ha ul.pts li::before { content: ""; position: absolute; left: 0; top: 7px; width: 7px; height: 7px; border-radius: 999px; background: var(--c, var(--navy)); }

/* Scene 1 */
.ha .std { width: 250px; height: 58px; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; padding: 8px 14px; background: rgba(255,255,255,.06); }
.ha .std b { display: block; font-size: 16px; } .ha .std span { font-size: 12.5px; color: var(--hero-fg); }
.ha .a5 { height: 76px; }
.ha .lines { position: absolute; left: 0; top: 0; width: 1200px; height: 520px; pointer-events: none; }
.ha .ln { stroke: var(--teal-light); stroke-width: 1.5; fill: none; stroke-dasharray: 230; stroke-dashoffset: 230; transition: stroke-dashoffset .9s ease; }
.ha .p1 .ln { stroke-dashoffset: 0; } .ha .p4 .ln { opacity: 0; }
.ha .packrow { display: grid; grid-template-columns: 10px 1fr; gap: 10px; align-items: start; margin-top: 12px; font-size: 13.5px; line-height: 1.35; }
.ha .packrow i { width: 9px; height: 9px; border-radius: 999px; margin-top: 4px; }
.ha .packrow b { color: var(--navy); display: block; font-size: 14.5px; }
.ha .big { font-size: 26px; line-height: 1.2; font-weight: 700; }

/* Tables */
.ha .tbl { background: var(--white); border-radius: 8px; overflow: hidden; color: var(--text); }
.ha .tbl .cap { background: var(--light); color: var(--muted); font-size: 12.5px; padding: 7px 12px; border-bottom: 1px solid var(--border); }
.ha .tbl .g { display: grid; font-family: var(--mono); font-size: 12.5px; }
.ha .tbl .g span { padding: 7px 10px; border-bottom: 1px solid #E8EAEE; white-space: nowrap; overflow: hidden; }
.ha .tbl .g .h { background: var(--blue-100); color: var(--navy); font-weight: 700; }
.ha .c4 { grid-template-columns: repeat(4, 1fr); } .ha .c5 { grid-template-columns: 1.25fr 1.25fr .9fr .8fr .8fr; }
.ha .dot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--conf-high); margin-left: 6px; }
.ha .unk { color: var(--orange-dark); font-weight: 700; }
.ha .ahl { outline: 0 solid var(--teal-light); transition: outline-width .3s, background .3s; }
.ha .p13 .ahl { outline-width: 3px; outline-offset: -3px; background: #EAF4F3; }

/* Scene 3 */
.ha .mini { width: 150px; height: 74px; border: 1px solid rgba(255,255,255,.4); border-radius: 8px; padding: 10px 12px; background: rgba(255,255,255,.06); }
.ha .mini b { display: block; font-size: 15px; } .ha .mini span { font-size: 12.5px; color: var(--hero-fg); }
.ha .guard { border: 1.5px dashed var(--teal-light); border-radius: 10px; }
.ha .tok { position: absolute; opacity: 0; font-family: var(--mono); font-size: 13px; font-weight: 700; color: var(--navy); background: var(--white); border: 2px solid var(--teal-light); border-radius: 6px; padding: 5px 10px; white-space: nowrap;
  transition: opacity .35s ease, left 1s ease .45s, top 1s ease .45s, background .4s, border-color .4s, color .4s; }
.ha .tok .b { position: absolute; left: 10px; top: 5px; opacity: 0; transition: opacity .35s; } .ha .tok .a { transition: opacity .35s; }
.ha .tok1 { left: 96px; top: 356px; }
.ha .p7 .tok1 { opacity: 1; left: 600px; top: 366px; }
.ha .p8 .tok1 { left: 960px; top: 150px; } .ha .p8 .tok1 .a { opacity: 0; } .ha .p8 .tok1 .b { opacity: 1; }
.ha .p9 .tok1 { opacity: 0; }
.ha .tok2 { left: 74px; top: 160px; width: 168px; height: 34px; padding: 0; border: 0; background: none; }
.ha .tok2 span { position: absolute; top: 0; width: 52px; height: 28px; background: var(--white); border: 2px solid var(--teal-light); border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 12px; transition: left .7s ease, top .7s ease; }
.ha .tok2 span:nth-child(1) { left: 0; } .ha .tok2 span:nth-child(2) { left: 56px; } .ha .tok2 span:nth-child(3) { left: 112px; }
.ha .p8 .tok2 { opacity: 1; left: 600px; top: 402px; }
.ha .p9 .tok2 { left: 960px; top: 190px; opacity: 0; transition: opacity .4s ease 1.5s, left 1s ease .45s, top 1s ease .45s; }
.ha .p9 .tok2 span:nth-child(2) { left: 0; top: 32px; } .ha .p9 .tok2 span:nth-child(3) { left: 0; top: 64px; }
.ha .tok3 { left: 96px; top: 356px; }
.ha .p10 .tok3 { opacity: 1; left: 600px; top: 366px; }
.ha .p11 .tok3 { left: 606px; top: 440px; background: var(--orange); border-color: var(--orange); color: #fff; }
.ha .p12 .tok { opacity: 0; }

/* Scene 4 */
.ha dl.prov { margin: 12px 0 0; display: flex; flex-direction: column; gap: 10px; font-size: 13.5px; line-height: 1.35; }
.ha dl.prov dt { font-size: 11.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--muted); }
.ha dl.prov dd { margin: 2px 0 0; color: var(--navy); }
.ha .conf { display: flex; align-items: center; gap: 10px; font-weight: 700; color: var(--navy); }
.ha .ring { fill: none; stroke: var(--conf-high); stroke-width: 5; stroke-dasharray: 101; stroke-dashoffset: 101; transition: stroke-dashoffset 1s ease; }
.ha .p14 .ring { stroke-dashoffset: 12; }
.ha .rev b { color: var(--navy); display: block; font-size: 14px; } .ha .rev p { margin: 2px 0 0; font-size: 13px; line-height: 1.35; }
.ha .count { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 999px; background: var(--orange); color: #fff; font-size: 12px; font-weight: 700; margin-left: 8px; vertical-align: 2px; }

/* End frame: three cards, one for each point, titled with the scene labels */
.ha .fin h3 { margin-top: 14px; font-size: 20px; }
.ha .fin p { margin: 6px 0 0; font-size: 15px; line-height: 1.45; }
.ha .fv { height: 132px; display: flex; flex-direction: column; align-items: flex-start; justify-content: center; }
.ha .f1 .fv { align-items: center; }
.ha .f3 .fv { gap: 14px; }
.ha .fchips { display: grid; grid-template-columns: 1.25fr 1fr; gap: 6px; width: 100%; }
.ha .fchips span { font-size: 12.5px; font-weight: 700; color: var(--navy); background: var(--blue-100); border-radius: 6px; padding: 4px 10px; }
.ha .fchips .fwide { grid-column: 1 / -1; text-align: center; }
.ha .fdown { display: block; flex: none; width: 1.5px; height: 12px; background: var(--teal); }
.ha .frow { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ha .fguard { position: relative; width: 100%; border: 1.5px dashed var(--teal); border-radius: 10px; padding: 34px 10px 24px; display: flex; justify-content: center; gap: 8px; }
.ha .fguard em { position: absolute; left: 12px; top: -11px; font-style: normal; font-size: 11px; line-height: 1.4; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: var(--teal-light); color: var(--navy); padding: 3px 9px; border-radius: 999px; }
.ha .fguard .pill { font-size: 11px; }
.ha .pill.frev { background: var(--orange); color: #fff; text-transform: none; letter-spacing: 0; font-size: 13px; padding: 5px 8px 5px 12px; }
.ha .frev .count { background: #fff; color: var(--orange-dark); width: 20px; height: 20px; vertical-align: 0; }
.ha .tabs.all button { opacity: 1; color: var(--white); }

/* Phone and narrow tablet (900px and under): a portrait stage, 360 x 560, each scene stacked top to bottom.
   Same elements and timing as the wide stage; only positions and sizes change. The engine scales by 360 here. */
.ha .lines.m { display: none; }
@media (max-width: 900px) {
  .ha .frame { aspect-ratio: 360 / 560; max-width: 480px; }
  .ha .stage { width: 360px; height: 560px; font-size: 14px; }
  .ha .tabs { display: flex; }
  .ha .tabs button { flex: 0 0 44px; padding: 0; text-align: center; }
  .ha .tabs button b { margin: 0; }
  .ha .tabs button span { display: none; }
  .ha .tabs button.cur { flex: 1 1 auto; text-align: left; padding-left: 14px; }
  .ha .tabs button.cur span { display: inline; margin-left: 8px; }
  .ha .big { font-size: 20px; }
  .ha .lines.d { display: none; }
  .ha .lines.m { display: block; width: 360px; height: 560px; }
  .ha .tbl .cap { padding: 4px 10px; font-size: 12px; }
  .ha .tbl .g { font-size: 12px; }
  .ha .tbl .g span { padding: 4px 6px; }
  .ha .acard { padding: 12px 16px; }
  .ha .acard h3 { font-size: 17px; }

  /* Scene 1: standards two by two, a spine down to the pack */
  .ha .std { width: 176px; height: 66px; padding: 6px 11px; }
  .ha .std b { font-size: 14px; } .ha .std span { display: block; font-size: 12px; line-height: 1.35; }
  .ha .a1 { left: 14px !important; top: 56px !important; } .ha .a2 { left: 206px !important; top: 56px !important; width: 140px; }
  .ha .a3 { left: 14px !important; top: 130px !important; } .ha .a4 { left: 206px !important; top: 130px !important; width: 140px; }
  .ha .a5 { left: 14px !important; top: 204px !important; width: 332px; height: 50px; }
  .ha .a5 span { font-size: 11.5px; white-space: nowrap; }
  .ha .a-pack { left: 14px !important; top: 268px !important; width: 332px !important; height: auto !important; }
  .ha .packrow { margin-top: 9px; font-size: 13px; } .ha .packrow b { font-size: 14px; }
  .ha .a-built { left: 14px !important; top: 526px !important; width: 332px !important; }
  .ha .a-built .anote { display: none; }

  /* Scene 2: three sources stacked, each label in its title bar */
  .ha .b1, .ha .b2, .ha .b3 { left: 14px !important; width: 332px !important; }
  .ha .b1 { top: 60px !important; } .ha .b2 { top: 184px !important; } .ha .b3 { top: 308px !important; }
  .ha .b2 .g { grid-template-columns: .8fr 1.4fr .9fr .9fr; } .ha .b3 .g { grid-template-columns: .8fr 1.4fr .8fr .8fr; }
  .ha .bp { left: auto !important; right: 20px; }
  .ha .bp .pill { font-size: 11px; padding: 2px 8px; }
  .ha .bp1 { top: 62px !important; } .ha .bp2 { top: 186px !important; } .ha .bp3 { top: 310px !important; }
  .ha .b-big { left: 14px !important; top: 438px !important; width: 332px !important; }

  /* Scene 3: sources across the top, the pack frame around both lanes, the output table beneath */
  .ha .mini { width: 104px; height: 28px; padding: 4px 10px; } .ha .mini b { font-size: 13.5px; } .ha .mini span { display: none; }
  .ha .c1 { left: 14px !important; top: 54px !important; } .ha .c2 { left: 128px !important; top: 54px !important; } .ha .c3 { left: 242px !important; top: 54px !important; }
  .ha .c-guard { left: 8px !important; top: 100px !important; width: 344px !important; height: 256px !important; }
  .ha .c-pill { left: 20px !important; top: 89px !important; }
  .ha .c-note { left: 20px !important; top: 346px !important; font-size: 13px !important; }
  .ha .c-lane { left: 16px !important; width: 328px !important; height: 112px !important; padding: 10px 14px; }
  .ha .c-rules { top: 116px !important; } .ha .c-ai { top: 234px !important; }
  .ha .c-lane .pill { font-size: 11px; }
  .ha ul.pts { margin-top: 6px; gap: 3px; font-size: 13px; }
  .ha .c-flag { left: 14px !important; top: 374px !important; width: 332px; }
  .ha .pill.flag { display: block; font-size: 12.5px; line-height: 1.35; padding: 5px 12px; border-radius: 8px; }
  .ha .c-out { left: 14px !important; top: 426px !important; width: 332px !important; }
  .ha .tok { font-size: 12px; padding: 3px 8px; }
  .ha .tok .b { left: 8px; top: 3px; }
  .ha .tok1, .ha .tok3 { left: 262px; top: 56px; }
  .ha .p7 .tok1 { left: 270px; top: 243px; }
  .ha .p8 .tok1 { left: 110px; top: 453px; }
  .ha .tok2 { left: 14px; top: 56px; width: 146px; height: 26px; }
  .ha .tok2 span { width: 46px; height: 24px; font-size: 11.5px; }
  .ha .tok2 span:nth-child(2) { left: 50px; } .ha .tok2 span:nth-child(3) { left: 100px; }
  .ha .p8 .tok2 { left: 186px; top: 243px; }
  .ha .p9 .tok2 { left: 110px; top: 479px; }
  .ha .p9 .tok2 span:nth-child(2) { left: 0; top: 26px; } .ha .p9 .tok2 span:nth-child(3) { left: 0; top: 52px; }
  .ha .p10 .tok3 { left: 270px; top: 243px; }
  .ha .p11 .tok3 { left: 270px; top: 345px; }

  /* Scene 4: table, then the provenance record, then the review list */
  .ha .d-tbl { left: 14px !important; top: 56px !important; width: 332px !important; }
  .ha .d-tbl .g { grid-template-columns: 1.25fr 1.4fr 1.1fr .7fr 1fr; }
  .ha .d-note { left: 14px !important; top: 216px !important; width: 332px !important; font-size: 13px; }
  .ha .d-prov { left: 14px !important; top: 242px !important; width: 332px !important; height: auto !important; }
  .ha dl.prov { display: grid; grid-template-columns: 1fr auto; gap: 8px 16px; margin-top: 8px; font-size: 13px; }
  .ha dl.prov > div:nth-child(2), .ha dl.prov > div:nth-child(3) { grid-column: 1 / -1; }
  .ha dl.prov > div:nth-child(4) { grid-column: 2; grid-row: 1; }
  .ha .conf svg { width: 30px; height: 30px; }
  .ha .d-rev { left: 14px !important; top: 458px !important; width: 332px !important; }
  .ha .d-rev > div { margin-top: 6px !important; }
  /* End frame: three cards stacked, visuals reduced to one row */
  .ha .fin { left: 14px !important; width: 332px !important; height: 152px !important; }
  .ha .f1 { top: 60px !important; } .ha .f2 { top: 220px !important; } .ha .f3 { top: 380px !important; }
  .ha .fv { height: 40px; flex-direction: row; align-items: center; justify-content: flex-start; }
  .ha .fchips, .ha .fdown, .ha .fhide, .ha .fguard em { display: none; }
  .ha .fguard { width: auto; padding: 6px 8px; }
  .ha .fin h3 { margin-top: 8px; font-size: 17px; }
  .ha .fin p { margin-top: 2px; font-size: 13px; line-height: 1.4; }
}

/* Under the stage */
.ha .capbox { min-height: 3.4em; margin: 18px 0 0; display: flex; align-items: flex-start; }
.ha #cap { margin: 0; font-size: 20px; line-height: 1.45; color: var(--navy); max-width: none; text-wrap: pretty; }
@media (max-width: 700px) { .ha #cap { font-size: 17px; } .ha .capbox { min-height: 5.2em; } }
.ha .ctrl { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.ha .ctrl button { font: inherit; font-size: 15px; font-weight: 700; padding: 10px 18px; border-radius: 8px; border: .5px solid var(--navy); background: var(--white); color: var(--navy); cursor: pointer; }
.ha .ctrl button:hover { background: var(--light); }
.ha .ctrl button:focus-visible, .ha .tabs button:focus-visible { outline: 3px solid rgba(52,87,181,.45); outline-offset: 2px; }
.ha { margin: 0 0 68px; }