.hero { padding: 72px 0 64px; }
.hero__grid { display: grid; grid-template-columns: 6fr 6fr; gap: 48px; align-items: center; min-height: 480px; }
.hero__lede { font-size: 20px; color: var(--w6a-ink-500); margin: 20px 0 0; max-width: 30em; text-wrap: pretty; }
.hero__fig { position: relative; }
.bento { display: grid; grid-template-columns: 7fr 5fr; grid-template-rows: auto auto; gap: 20px; }
.tile { display: grid; grid-template-rows: 1fr auto; background: var(--w6a-canvas); border: var(--hair); border-radius: var(--radius-l); overflow: hidden; color: var(--w6a-ink-900); text-decoration: none; }
.tile:hover { color: var(--w6a-ink-900); }
.tile--flag { grid-row: span 2; background: var(--w6a-brand-tint); border-color: color-mix(in srgb, var(--w6a-brand) 18%, transparent); }
.tile__fig { padding: 20px 20px 0; display: grid; place-items: center; min-height: 0; }
.tile__fig > figure { width: 100%; margin: 0; }
.tile--flag .tile__fig > figure { max-width: 560px; }
.tile__fig .vx-browser { max-width: 100%; }
.tile__body { padding: 16px 24px 22px; }
.tile__body .tag { margin-bottom: 4px; }
.tile__d { color: var(--w6a-ink-500); margin: 6px 0 10px; }
.tile--flag .h3 { font-size: 26px; }
.molcard { display: grid; grid-template-columns: 160px 1fr; gap: 16px; align-items: center; margin: 8px 0 20px; padding: 12px 16px 12px 8px; background: var(--w6a-paper); border: var(--hair); border-radius: var(--radius-l); text-decoration: none; color: var(--w6a-ink-900); }
.molcard__mol { margin: 0; }
.molcard__mol canvas { width: 160px; height: 128px; display: block; }
.molcard__mol figcaption { display: none; }
.molcard__t { display: grid; gap: 6px; justify-items: start; }
.molcard__url { font-family: var(--w6a-font-mono); font-size: 20px; font-weight: 600; color: var(--w6a-brand); }
.molcard__d { font-size: var(--fs-small); color: var(--w6a-ink-500); }
.lines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 20px; }
.lines a { display: flex; align-items: center; gap: 10px; padding: 12px 0; border-top: var(--hair); color: var(--w6a-ink-900); text-decoration: none; font-weight: 600; }
.lines a:hover { color: var(--w6a-brand); }
.lines .i-arrow { margin-left: auto; opacity: .5; }
.lines__no { font-family: var(--w6a-font-mono); font-size: 13px; color: var(--w6a-ink-300); }
#aud-lab:checked ~ .tabs__bar [for="aud-lab"], #aud-gov:checked ~ .tabs__bar [for="aud-gov"],
#aud-ent:checked ~ .tabs__bar [for="aud-ent"], #aud-stu:checked ~ .tabs__bar [for="aud-stu"] { background: var(--w6a-brand); border-color: var(--w6a-brand); color: var(--w6a-paper); }
#aud-lab:checked ~ .tabs__panels .tabs__panel--lab, #aud-gov:checked ~ .tabs__panels .tabs__panel--gov,
#aud-ent:checked ~ .tabs__panels .tabs__panel--ent, #aud-stu:checked ~ .tabs__panels .tabs__panel--stu { display: block; }
.tabs__r:focus-visible ~ .tabs__bar .tabs__tab { outline-offset: 2px; }
#aud-lab:focus-visible ~ .tabs__bar [for="aud-lab"], #aud-gov:focus-visible ~ .tabs__bar [for="aud-gov"],
#aud-ent:focus-visible ~ .tabs__bar [for="aud-ent"], #aud-stu:focus-visible ~ .tabs__bar [for="aud-stu"] { outline: 2px solid var(--w6a-brand); }
.kpis .vx-kpis { max-width: none; }
.works { display: grid; grid-template-columns: 7fr 5fr; gap: 56px; align-items: center; }
.works__stage { position: relative; padding-right: 64px; }
.works__stage .vx-phone { position: absolute; right: 0; bottom: -24px; width: 150px; }
.works__side .vx-chart { max-width: 380px; }
.rgrid { display: grid; grid-template-columns: 5fr 7fr; gap: 32px; align-items: start; margin-bottom: 16px; }
.rgrid > figure { background: var(--w6a-paper); border: var(--hair); border-radius: var(--radius-l); padding: 16px; }
@media (max-width: 900px) {
  .hero { padding: 32px 0 40px; }
  .hero__grid { grid-template-columns: 1fr; min-height: 0; gap: 16px; }
  .bento { grid-template-columns: 1fr; }
  .tile--flag { grid-row: auto; }
  .molcard { grid-template-columns: 110px 1fr; }
  .molcard__mol canvas { width: 110px; height: 96px; }
  .lines { grid-template-columns: 1fr; }
  .works { grid-template-columns: 1fr; gap: 32px; }
  .works__stage { padding-right: 40px; }
  .works__stage .vx-phone { width: 96px; }
  .rgrid { grid-template-columns: 1fr; }
}
.flagfig { display: grid; gap: 8px; width: 100%; }
.hero__pdf { gap: 6px; margin-left: 4px; }
.hero__pdf .ico { width: 18px; height: 18px; }
.evhead { display: grid; grid-template-columns: 7fr 5fr; gap: 40px; align-items: center; margin-bottom: 28px; }
.evhead .sec__head { margin-bottom: 0; }
.evhead .vx-chart { max-width: 380px; justify-self: end; width: 100%; }
.evflow { list-style: none; margin: 0 calc(-1 * var(--gutter)); padding: 4px var(--gutter) 18px; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(300px, 30%); gap: 20px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 var(--gutter); overscroll-behavior-x: contain; }
.evflow::-webkit-scrollbar { height: 8px; } .evflow::-webkit-scrollbar-thumb { background: var(--w6a-border); border-radius: 4px; }
.ev { scroll-snap-align: start; background: var(--w6a-paper); border: var(--hair); border-radius: var(--radius-l); padding: 18px; display: flex; flex-direction: column; gap: 10px; min-height: 280px; }
.ev--work { grid-column: span 1; }
.ev--work .vx-browser { margin: 0; }
.ev__t { margin: auto 0 0; font-weight: 600; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ev--paper { background: var(--w6a-brand-tint); border-color: color-mix(in srgb, var(--w6a-brand) 16%, transparent); }
.ev__mark { width: 48px; height: 48px; fill: none; stroke: var(--w6a-brand); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ev__topic { font-size: 20px; font-weight: 600; margin: 0; color: var(--w6a-ink-900); }
.ev__doi { margin-top: auto; font-family: var(--w6a-font-mono); font-size: 13px; word-break: break-all; }
.ev--more { justify-content: center; background: var(--w6a-sunk); }
.cta__svg { width: 44px; height: 44px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
@media (max-width: 900px) {
  .evhead { grid-template-columns: 1fr; gap: 16px; }
  .evhead .vx-chart { justify-self: start; }
  .evflow { grid-auto-columns: 82%; }
  .ev { min-height: 0; }
}
.fam { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.fam__i { display: grid; gap: 8px; align-content: start; padding: 12px; border: 1px solid var(--w6a-border); border-radius: 8px; background: var(--w6a-paper); color: var(--w6a-ink-900); text-decoration: none; transition: border-color .2s, transform .25s; }
.fam__i:hover { border-color: var(--w6a-brand); transform: translateY(-4px); }
.fam__shot { display: block; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 6px; border: 1px solid var(--w6a-border); }
.fam__shot img { width: 100%; height: 100%; object-fit: cover; object-position: top left; display: block; transition: transform 1.2s var(--ease); }
.fam__i:hover .fam__shot img { transform: scale(1.06); }
.fam__t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; color: var(--w6a-brand-deep); }
.fam__t b { font-weight: 600; font-size: 17px; color: var(--w6a-ink-900); }
.fam__d { font-size: var(--fs-small); color: var(--w6a-ink-500); }
.fam__u { font-size: var(--fs-small); color: var(--w6a-brand); font-variant-numeric: tabular-nums; }
@media (max-width: 1100px) { .fam { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .fam { grid-template-columns: 1fr; } }
.reel { margin: 0; --dur: 3.4s; min-width: 0; }
.reel__win { margin: 0; box-shadow: 0 24px 60px -28px rgba(24, 79, 149, .45); }
.reel__stage { position: relative; aspect-ratio: 1440 / 900; overflow: hidden; background: var(--w6a-paper); }
.reel .reel__f { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; opacity: 0; }
.reel .reel__f:first-child { opacity: 1; }
.reel .reel__f:not(:first-child) { animation: reel-f calc(var(--n) * var(--dur)) linear infinite; animation-delay: calc(var(--k) * var(--dur)); }
.reel__bar { position: absolute; left: 0; bottom: 0; height: 3px; width: 100%; background: var(--w6a-brand); transform-origin: 0 50%; transform: scaleX(0); animation: reel-bar var(--dur) linear infinite; }
.reel__steps { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.reel__s { display: inline-flex; align-items: center; gap: 6px; padding: 5px 12px 5px 6px; border: 1px solid var(--vx-line, #dcdcd6); border-radius: 999px; font-size: 13px; line-height: 1.4; font-weight: 600; background: var(--w6a-paper); color: var(--w6a-ink-500);
  animation: reel-s calc(var(--n) * var(--dur)) linear infinite; animation-delay: calc(var(--k) * var(--dur)); }
.reel__s b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--w6a-brand); color: var(--w6a-paper); font-size: 12px; }
.reel__s a { display: inline-flex; align-items: center; gap: 6px; color: inherit; text-decoration: none; padding-left: 6px; }
.reel__s .ico { width: 16px; height: 16px; }
.reel .vx-cap { margin-top: 10px; text-align: left; }
.reel:hover .reel__f, .reel:hover .reel__s, .reel:hover .reel__bar { animation-play-state: paused; }
@keyframes reel-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } }
.vx-static .reel__f, .vx-static .reel__s, .vx-static .reel__bar { animation: none !important; }
.vx-static .reel__s:first-child { background: var(--w6a-brand); border-color: var(--w6a-brand); color: var(--w6a-paper); }
@media print { .reel__f, .reel__s, .reel__bar { animation: none !important; } }
@keyframes reel-f { 0% { opacity: 0; transform: scale(1.02); } 3.00% { opacity: 1; transform: none; } 20.00% { opacity: 1; } 23.00%, 100% { opacity: 0; } }
@keyframes reel-s { 0%, 20.00% { background: var(--w6a-brand); border-color: var(--w6a-brand); color: var(--w6a-paper); } 23.00%, 100% { background: var(--w6a-paper); border-color: var(--vx-line, #dcdcd6); color: var(--w6a-ink-500); } }
.hero__grid { grid-template-columns: 5fr 7fr; }
@media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .reel__s { font-size: 12px; padding: 4px 10px 4px 5px; } }
.flagfig .vx-browser { margin: 0; }
.flagfig .vx-cap { margin: 0; text-align: left; }