/* Generated from the approved static build: tokens.css, the shared page stylesheet, f-dark.css and f2.css, in their original cascade order. */

/* ---- tokens.css ---- */
:root {

  --paper:  #F5F7F9;
  --panel:  #FFFFFF;
  --ink:    #0A2440;
  --soft:   #4A5F76;
  --faint:  #8497A8;
  --rule:   #D8E1E9;
  --rule2:  #EDF1F5;

  --blue:     #0D4E9F;
  --blue-bg:  #E7EFF9;
  --orange:      #F47F22;
  --orange-ink:  #B0620A;
  --orange-bg:   #FBEEDD;


  --d: "neue-haas-grotesk-display","Neue Haas Grotesk Display Pro","Helvetica Neue",Helvetica,Arial,sans-serif;
  --t: "neue-haas-grotesk-text","Neue Haas Grotesk Text Pro","Helvetica Neue",Helvetica,Arial,sans-serif;

  --ease: cubic-bezier(.22,1,.36,1);
  --dur-1: 140ms;
  --dur-2: 240ms;


  --btn-r:  1.34em;
  --card-r: 1.6rem;




  --deep:      #06192F;
  --deep-2:    #0E2A46;


  --on-deep:      #E8EFF6;
  --on-deep-soft: #93AAC0;
  --rule-deep:    #1C3A5C;
}

*        { box-sizing: border-box }
html     { font-size: 17px }
body     { margin: 0; background: var(--paper); color: var(--ink);
           font-family: var(--t); line-height: 1.58;
           -webkit-font-smoothing: antialiased }

h1, h2, h3, .lbl, .btn, .fig { font-family: var(--d) }
h1, h2, h3 { font-weight: 400; line-height: 1.08; letter-spacing: -.01em;
             text-wrap: balance; margin: 0 }
h1 b, h2 b { font-weight: 700 }

.wrap { max-width: 1240px; margin: 0 auto; padding: 0 clamp(1.1rem, 4vw, 2.6rem) }

.lbl { display: block; font-size: .62rem; font-weight: 500; letter-spacing: .14em;
       text-transform: uppercase; color: var(--faint); margin-bottom: .9rem }

.btn { display: inline-block; position: relative; isolation: isolate; overflow: hidden;
       border: 1px solid var(--blue); border-radius: 0 var(--btn-r) 0 var(--btn-r);
       color: var(--blue); background: none; padding: .78rem 1.3rem;
       font-size: .7rem; font-weight: 500; letter-spacing: .13em;
       text-transform: uppercase; text-decoration: none; cursor: pointer;
       transition: color var(--dur-2) var(--ease) }
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1;
       background: var(--blue); transform: scaleX(0); transform-origin: left center;
       transition: transform var(--dur-2) var(--ease) }
.btn:hover::before, .btn:focus-visible::before { transform: scaleX(1) }
.btn:hover, .btn:focus-visible { color: #fff }

.btn.go      { border-color: var(--orange-ink); color: var(--orange-ink) }
.btn.go::before { background: var(--orange-ink) }
.btn.light   { border-color: rgba(255,255,255,.55); color: #fff }
.btn.light::before { background: #fff }
.btn.light:hover, .btn.light:focus-visible { color: var(--deep) }

a { color: inherit }
img { max-width: 100%; display: block }

figure { margin: 0 }

section[id] { scroll-margin-top: 84px }

@media (prefers-reduced-motion: reduce) {
  * { animation: none !important; transition: none !important }
}

/* ---- page stylesheet ---- */
:root {

  --pap:    #F5F7F9;
  --pan:    #FFFFFF;
  --sunk:   #EBF0F4;
  --ink:    #0A2440;
  --soft:   #4A5F76;
  --hair:   #D8E1E9;
  --hair-2: #C3CFDA;
  --sig:      #F47F22;
  --sig-fill: #D2600E;
  --on-sig:   #FFFFFF;
  --sig-ink:  #9A5409;
  --sig-disp: #D7660F;
  --sig-bg:   #FBEEDD;
  --r: 2px;
}

body { background: var(--pap); color: var(--ink) }

p, li, dd, figcaption, .card b { text-wrap: pretty }
.nw { white-space: nowrap }

h1 b, h2 b, h3 b { font-weight: 600 }

:root { --cur: url("../logo/cursor-outline.svg") 2 2, auto; --cur-on: url("../logo/cursor-solid.svg") 2 2, pointer }
html { cursor: var(--cur) }
a[href], button, summary, label[for], select, [role="button"], .bn[tabindex] { cursor: var(--cur-on) }
input:not([type="checkbox"], [type="radio"], [type="submit"]), textarea { cursor: text }
::selection { background: var(--sig-fill); color: var(--on-sig) }
a { color: inherit }
img { display: block; max-width: 100% }
figure { margin: 0 }
.wrap { max-width: 1280px }

section { padding-block: clamp(5rem, 10vw, 8.5rem) }

.meas { font-family: var(--t); font-size: .84rem; font-weight: 500; letter-spacing: 0;
  color: var(--soft); font-variant-numeric: tabular-nums }

.panel { background: var(--pan); border: 1px solid var(--hair); border-radius: var(--r) }

:root { --float-gap: .7rem; --hdr-h: 88px }
section[id] { scroll-margin-top: 104px }
header.site { position: sticky; top: var(--float-gap); z-index: 20 }
.hdr { display: flex; align-items: center; gap: 1.1rem;
  max-width: min(1240px, calc(100% - 1.6rem)); margin: 0 auto;
  padding: .72rem clamp(.85rem, 2vw, 1.3rem); background: var(--pan);
  border: 1px solid var(--hair); border-radius: 0 var(--card-r) 0 var(--card-r);
  box-shadow: 0 6px 20px -18px rgba(10,36,64,.42);
  transition: box-shadow var(--dur-2) var(--ease) }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr { background: linear-gradient(to bottom, color-mix(in srgb, var(--pan) 92%, transparent),
      color-mix(in srgb, var(--pan) 86%, transparent));
    border-color: color-mix(in srgb, var(--pan) 55%, transparent);
    -webkit-backdrop-filter: saturate(1.9) blur(26px); backdrop-filter: saturate(1.9) blur(26px);
    box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 72%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--ink) 7%, transparent),
      0 8px 26px -18px rgba(10,36,64,.4) }
  header.site.past .hdr { box-shadow: inset 0 1px 0 color-mix(in srgb, #fff 72%, transparent),
      inset 0 -1px 0 color-mix(in srgb, var(--ink) 7%, transparent),
      0 14px 34px -22px rgba(10,36,64,.5) }
}
.brand { display: flex; align-items: center; flex: 1 1 0; line-height: 0;
  margin-right: clamp(0rem, 1vw, .9rem) }
.brand img { display: block; height: 40px; width: auto }

.brand { gap: 12px; text-decoration: none }
.pb { display: flex; flex-direction: column; justify-content: center; padding-left: 12px;
  border-left: 1px solid var(--hair-2); font-family: var(--t); font-size: 11.5px; line-height: 1.25;
  letter-spacing: .01em; color: var(--soft); white-space: nowrap }
.pb b { font-family: var(--d); font-size: 12.5px; font-weight: 600; letter-spacing: 0; color: var(--ink) }
.mainnav { display: flex; flex: 0 1 auto; justify-content: center; min-width: 0 }
.mainnav a { position: relative; font-family: var(--d); font-size: .88rem; font-weight: 500;
  letter-spacing: .004em; color: var(--ink); text-decoration: none; white-space: nowrap;
  padding: .7rem clamp(.5rem, 1.15vw, .95rem) }

.mainnav a::after { content: ""; position: absolute; left: clamp(.5rem, 1.15vw, .95rem);
  right: clamp(.5rem, 1.15vw, .95rem); bottom: .3rem; height: 2px; background: var(--sig);
  transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease) }
.mainnav a:hover::after, .mainnav a[aria-current="page"]::after { transform: scaleX(1) }
.mainnav a:focus-visible { outline: 2px solid var(--ink); outline-offset: -2px }
.util { display: flex; align-items: center; justify-content: flex-end; gap: .9rem; flex: 1 1 0 }
.util a { font-family: var(--d); font-size: .9rem; font-weight: 500; letter-spacing: .004em;
  color: var(--soft); text-decoration: none }
.util a:hover, .util a[aria-current="page"] { color: var(--ink) }

.util .portal { white-space: nowrap; font-size: .9rem; font-weight: 600; color: var(--on-sig);
  background: var(--sig-fill); border: 1px solid var(--sig-fill); padding: .5rem 1rem; border-radius: 0 1.09em 0 1.09em;
  transition: background var(--dur-2) var(--ease), color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease) }
.util .portal:hover, .util .portal:focus-visible { background: var(--ink); border-color: var(--ink); color: var(--pap) }
.util a:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.burger { display: none; margin-left: auto; flex: none; width: 44px; height: 44px; padding: 0;
  background: none; border: 0; cursor: var(--cur-on); position: relative; color: var(--ink) }
.burger span { position: absolute; left: 11px; width: 22px; height: 1.5px; background: currentColor;
  transition: transform .3s var(--ease), opacity .2s }
.burger span:nth-child(1) { top: 15px } .burger span:nth-child(2) { top: 21px }
.burger span:nth-child(3) { top: 27px }
.burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6px) rotate(45deg) }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0 }
.burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6px) rotate(-45deg) }
.burger:focus-visible { outline: 2px solid var(--ink); outline-offset: -4px }

.scrim { position: fixed; inset: 0; z-index: 30; background: rgba(10,36,64,.5); opacity: 0;
  visibility: hidden; transition: opacity .3s var(--ease), visibility 0s linear .3s }
.drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 40; width: min(88vw, 380px);
  display: flex; flex-direction: column; background: var(--pan); border-left: 1px solid var(--hair);
  transform: translateX(100%); visibility: hidden;
  transition: transform .34s var(--ease), visibility 0s linear .34s }
header.site.open .scrim { opacity: 1; visibility: visible; transition: opacity .3s var(--ease) }
header.site.open .drawer { transform: none; visibility: visible; transition: transform .34s var(--ease) }
.dtop { display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.2rem; border-bottom: 1px solid var(--hair) }
.dtop .brand { flex: none }
.dtop img { display: block; height: 34px; width: auto }
.dnav { display: flex; flex-direction: column; padding: .6rem 1.2rem; overflow-y: auto; flex: 1 }
.dnav a { padding: .9rem 0; font-family: var(--d); font-size: 1.35rem; font-weight: 500;
  letter-spacing: -.012em; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--hair) }
.dnav a[aria-current="page"] { color: var(--sig-ink) }
.dfoot { display: flex; gap: .8rem; padding: 1.1rem 1.2rem 1.4rem; border-top: 1px solid var(--hair) }
.dfoot .act { flex: 1; text-align: center }
@media (prefers-reduced-motion: reduce) { .drawer, .scrim { transition: none } }
@media (max-width: 1080px) {
  .mainnav, .util { display: none }
  .burger { display: block }
  .brand img { height: 36px }
}
@media (max-width: 560px) {
  :root { --float-gap: .45rem; --hdr-h: 72px }
  .hdr { max-width: calc(100% - 1rem); padding: .6rem .8rem }
}

.act { display: inline-block; position: relative; isolation: isolate; overflow: hidden;
  font-family: var(--d); font-size: .92rem; font-weight: 600; letter-spacing: -.005em; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  padding: .8rem 1.35rem; border-radius: 0 var(--btn-r) 0 var(--btn-r);
  background: var(--sig-fill); color: var(--on-sig); border: 1px solid var(--sig-fill); cursor: var(--cur-on);
  transition: color var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease),
    transform var(--dur-1) var(--ease) }

.act::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ink);
  transform: scaleX(0); transform-origin: left center;
  transition: transform var(--dur-2) var(--ease) }
.act:hover::before, .act:focus-visible::before { transform: scaleX(1) }
.act:hover, .act:focus-visible { color: #fff; border-color: var(--ink) }
.act:active { transform: translateY(1px) }
.act:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.act.ghost { background: transparent; color: var(--ink); border-color: var(--ink) }

.hero { border-bottom: 1px solid var(--hair-2) }
.hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr;
  gap: clamp(1.6rem, 4vw, 3.4rem); align-items: center;
  padding-block: clamp(2.4rem, 5vw, 4rem) }
.hero h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); max-width: 18ch; letter-spacing: -.028em;
  line-height: 1.04 }
.hero h1 b { color: var(--sig-disp) }
.hero .sub { color: var(--soft); max-width: 40ch; margin: 1.2rem 0 0; font-size: 1.05rem }
.hero .acts { display: flex; gap: .7rem; margin-top: 1.9rem; flex-wrap: wrap }
.hero figure { position: relative; aspect-ratio: 5 / 4; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--hair-2); background: var(--sunk) }
.hero figure img, .hero figure video { width: 100%; height: 100%; object-fit: cover; object-position: 62% 50% }

.hero figure video { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease) }
.hero figure video.on { opacity: 1 }

.hero figure::after { content: ""; position: absolute; inset: 6px; border-radius: 1px;
  border: 1px solid rgba(255,255,255,.34); pointer-events: none }

.hero { border-bottom: 0; padding-bottom: 2.4rem }
.fbar { position: relative; z-index: 3; margin-top: -2.6rem }
.fa { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 0; padding: 0;
  background: var(--pan);
  border: 1px solid var(--hair); border-radius: 0 var(--card-r) 0 var(--card-r); overflow: hidden;
  box-shadow: 0 26px 60px -34px rgba(10,36,64,.45) }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .fa { background: color-mix(in srgb, var(--pan) 68%, transparent);
    -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3) }
}
.fa-c { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: .9rem; align-items: center;
  padding: 1.2rem 1.4rem; border-left: 1px solid var(--hair);
  transition: background-color .35s var(--ease) }

.fa-c { position: relative; overflow: hidden }
.fa-c::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(105deg, transparent 30%, rgba(255,255,255,.14) 47%, rgba(255,255,255,.04) 54%, transparent 66%)
    -160% 0 / 70% 100% no-repeat }
.fa-c:hover { background-color: color-mix(in srgb, var(--ink) 5%, transparent) }
.fi-ic { transition: transform .35s var(--ease) }
.fa-c:hover .fi-ic { transform: translateY(-3px) }
@media (prefers-reduced-motion: no-preference) {
  .fa-c:hover::after { animation: fa-sheen .9s var(--ease) both }
  @keyframes fa-sheen { from { background-position: -160% 0 } to { background-position: 260% 0 } }
}
.fa-c:first-child { border-left: 0 }
.fi-ic { grid-row: 1 / 3; display: block; width: 28px; height: 28px; color: var(--sig) }
.fi-ic svg { display: block; width: 100%; height: 100% }
.fa-c dd { grid-column: 2; grid-row: 1; margin: 0; font-family: var(--d); font-size: clamp(1.1rem, 1.8vw, 1.45rem);
  font-weight: 600; letter-spacing: -.02em; line-height: 1.15; white-space: nowrap; font-variant-numeric: tabular-nums }
.fa-c dt { grid-column: 2; grid-row: 2; font-family: var(--t); font-size: .84rem; color: var(--soft) }
@media (max-width: 860px) {
  .fa { grid-template-columns: 1fr 1fr }
  .fa-c:nth-child(3) { border-left: 0 }
  .fa-c:nth-child(n+3) { border-top: 1px solid var(--hair) }
}
@media (max-width: 420px) {
  .fa-c { padding: .95rem 1rem; column-gap: .7rem }
  .fi-ic { width: 22px; height: 22px }
  .fa-c dd { font-size: 1.05rem }
}

.say { max-width: 60ch }
.say h2 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); letter-spacing: -.034em; line-height: 1.02 }
.say p { color: var(--soft); margin: 1.3rem 0 0; font-size: 1.06rem; max-width: 56ch }

.say:has(.seek) { max-width: none }
.say p.seek { max-width: 76rem }

.eyebrow { display: block; margin-bottom: .8rem; font-family: var(--d); font-size: 1.02rem;
  font-weight: 500; letter-spacing: -.005em; color: var(--sig-ink) }
.trl-head { margin-top: clamp(3rem, 6vw, 4.4rem) }
.trl-head h3 { font-size: clamp(1.25rem, 2.2vw, 1.6rem); letter-spacing: -.018em }
.tech { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 2.22fr);
  gap: 1.6rem clamp(1.4rem, 3.4vw, 3rem); align-items: stretch;
  margin-top: clamp(3.6rem, 7vw, 5.4rem); padding: .8rem 0; overflow: hidden }

.tech-side { display: flex; flex-direction: column; justify-content: space-between; gap: 1.6rem }
.tech-h { font-size: clamp(1.8rem, 3.2vw, 2.7rem); letter-spacing: -.028em; line-height: 1.02 }
.tech .note { grid-column: 1 / -1; margin: 0 }

.deck-track { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem }
.card { position: relative; display: flex; flex-direction: column; gap: .5rem; min-height: 8.6rem;
  padding: 1rem 1.15rem 1.15rem; background: var(--pan); border: 1px solid var(--hair);
  border-radius: 0 var(--card-r) 0 var(--card-r);
  transition: border-color .3s var(--ease), background-color .3s var(--ease) }
.card:hover { border-color: color-mix(in srgb, var(--sig) 55%, var(--hair)) }
.card-no { color: var(--soft) }
.card b { margin-top: auto; font-family: var(--d); font-size: clamp(.98rem, 1.15vw, 1.1rem); font-weight: 600;
  letter-spacing: -.012em; line-height: 1.2; padding-right: .4rem }
.card-sub { font-size: .8rem; line-height: 1.35; color: var(--soft) }
.card-ic { position: absolute; top: .95rem; right: 1rem; width: 28px; height: 28px; color: var(--sig);
  transition: transform .3s var(--ease) }
.card-ic svg { display: block; width: 100%; height: 100% }
.card:hover .card-ic { transform: translateY(-2px) }
@media (prefers-reduced-motion: reduce) { .card, .card-ic { transition: none } }
@media (max-width: 1000px) {
  .tech { grid-template-columns: 1fr }
  .tech-side { gap: 1rem }
}
@media (max-width: 760px) { .deck-track { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 400px) { .card { min-height: 7.6rem; padding: .85rem .9rem .95rem } .card b { font-size: .92rem } }

.about-home { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 5vw, 4.5rem); align-items: center }

.vid { margin: clamp(2rem, 4vw, 3rem) 0 0; aspect-ratio: 1920 / 720; overflow: hidden;
  background: var(--deep); border: 1px solid var(--hair); border-radius: 0 var(--card-r) 0 var(--card-r) }
.vid video { display: block; width: 100%; height: 100%; object-fit: cover }
.ill { position: relative; margin: 0; aspect-ratio: 560 / 380; width: 100%;
  background: var(--pan); border: 1px solid var(--hair); border-radius: 0 var(--card-r) 0 var(--card-r);
  overflow: hidden; --open: 1 }
.ill.live { --open: 0 }
.ill.live.open { --open: 1 }
.ill-lines { position: absolute; inset: 0; width: 100%; height: 100% }
.ill-dash path { fill: none; stroke: var(--hair-2); stroke-width: 1.5; stroke-dasharray: 4 5 }
.ill-pulse { fill: #FFE2C4; filter: drop-shadow(0 0 4px #F47F22) drop-shadow(0 0 2px #F47F22);
  opacity: var(--open); transition: opacity .4s var(--ease) .6s }

.ill-folder { position: absolute; left: 4%; top: 40%; width: 32%; height: 40%; perspective: 600px }
.ill-back { position: absolute; inset: 0; border-radius: 4px 10px 10px 10px;
  background: color-mix(in srgb, var(--sig) 72%, #000) }
.ill-back::before { content: ""; position: absolute; left: 0; top: -12%; width: 42%; height: 16%;
  border-radius: 6px 6px 0 0; background: inherit }
.ill-front { position: absolute; left: 0; right: 0; bottom: 0; height: 82%; display: flex; align-items: flex-end;
  padding: .55rem .7rem; border-radius: 8px; z-index: 2;
  background: linear-gradient(to bottom, var(--sig), var(--sig-fill) 70%);
  box-shadow: 0 -6px 18px -10px rgba(0,0,0,.6);
  transform-origin: bottom center; transform: rotateX(calc(var(--open) * -32deg));
  transition: transform .7s var(--ease) }
.ill-front span { font-family: var(--d); font-size: clamp(.62rem, 1vw, .78rem); font-weight: 700; color: var(--on-sig) }
.ill-files { position: absolute; inset: 0; z-index: 1 }
.ill-file { position: absolute; left: 12%; top: 18%; width: 92%; display: flex; align-items: center; gap: .4rem;
  padding: .42rem .55rem; border-radius: 6px; background: var(--pap); border: 1px solid var(--hair-2);
  font-family: var(--d); font-size: clamp(.58rem, .95vw, .76rem); font-weight: 600; color: var(--ink); white-space: nowrap;
  box-shadow: 0 8px 18px -12px rgba(0,0,0,.7);
  transform: translate(calc(var(--open) * (var(--i) * 16% - 6%)), calc(var(--open) * (-104% - var(--i) * 80%)))
             rotate(calc(var(--open) * (var(--i) * 4deg - 6deg)));
  transition: transform .8s var(--ease) calc(.15s + var(--i) * .08s) }
.ill-file i, .ill-row i { flex: none; display: block; width: 16px; height: 16px; color: var(--sig) }
.ill-file i svg, .ill-row i svg { display: block; width: 100%; height: 100% }

.ill-hub { position: absolute; left: 49.3%; top: 45.5%; width: 11.4%; aspect-ratio: 1; display: grid; place-items: center;
  border-radius: 50%; background: var(--pap); border: 1px solid var(--hair-2); color: var(--ink);
  box-shadow: 0 0 0 calc(var(--open) * 6px) color-mix(in srgb, var(--sig) 18%, transparent);
  transition: box-shadow .6s var(--ease) .5s }
.ill-hub svg { width: 62%; height: auto }

.ill-out { position: absolute; left: 63%; top: 9%; width: 34%; height: 82%;
  display: grid; grid-template-rows: 1fr 1fr; gap: 6% }
.ill-res { display: grid; justify-items: center; align-content: center; gap: .35rem }
.ill-row { display: flex; align-items: center; gap: .35rem; font-family: var(--d); font-size: clamp(.62rem, 1vw, .82rem);
  font-weight: 600; line-height: 1.15; color: var(--soft);
  transition: color .4s var(--ease) calc(1.9s + var(--i) * .45s) }
.ill-row .ok { width: 15px; height: 15px; color: var(--hair-2); transition: color .4s var(--ease) calc(1.9s + var(--i) * .45s) }
.ill.open .ill-row, .ill:not(.live) .ill-row { color: var(--ink) }
.ill.open .ill-row .ok, .ill:not(.live) .ill-row .ok { color: var(--sig) }

.ill-shop { position: relative; width: 66%; aspect-ratio: 1 / .92 }
.shop-shadow { position: absolute; left: 6%; right: 6%; bottom: -2%; height: 12%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(0,0,0,.55), transparent) }
.shop-body { position: absolute; left: 9%; right: 9%; top: 30%; bottom: 5%; border-radius: 2px 2px 4px 4px;
  background: linear-gradient(180deg, #F5F7F9, #C3CFDA);
  box-shadow: inset -9px 0 0 rgba(10,36,64,.13), inset 0 -3px 0 rgba(10,36,64,.18), 0 10px 18px -10px rgba(0,0,0,.7) }
.shop-win { position: absolute; left: 11%; top: 24%; width: 40%; height: 40%; border-radius: 2px;
  background: linear-gradient(135deg, #7FA7DB, #2B4B70); box-shadow: 0 0 0 2px #E8EFF6, inset 0 0 0 1px rgba(255,255,255,.25);
  transition: background .5s var(--ease) calc(1.5s + var(--i) * .45s), box-shadow .5s var(--ease) calc(1.5s + var(--i) * .45s) }
.shop-door { position: absolute; right: 13%; bottom: 0; width: 25%; height: 68%; border-radius: 2px 2px 0 0;
  background: #0C2440; box-shadow: inset 0 0 0 2px #E8EFF6;
  transition: background .5s var(--ease) calc(1.6s + var(--i) * .45s) }
.shop-door::after { content: ""; position: absolute; right: 18%; top: 52%; width: 12%; height: 6%; border-radius: 1px; background: #E8EFF6 }
.ill.open .shop-win, .ill:not(.live) .shop-win { background: linear-gradient(160deg, #FFE9D2, #F79A55);
  box-shadow: 0 0 0 2px #E8EFF6, 0 0 14px 2px rgba(244,127,34,.55) }
.ill.open .shop-door, .ill:not(.live) .shop-door { background: linear-gradient(180deg, #F79A55, #C2610F) }

.shop-awn { position: absolute; left: 3%; right: 3%; top: 15%; height: 19%; border-radius: 3px 3px 0 0;
  background: repeating-linear-gradient(90deg, var(--sig) 0 12.5%, #FFF4E8 12.5% 25%);
  box-shadow: 0 -3px 0 #C2610F; transform-origin: top; overflow: visible }
.shop-awn::before { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
  background: linear-gradient(100deg, transparent 30%, rgba(255,255,255,.75) 50%, transparent 70%) -150% 0 / 60% 100% no-repeat;
  mix-blend-mode: soft-light }
@media (prefers-reduced-motion: no-preference) {
  .ill.open .shop-awn { animation: awn-flap .9s var(--ease) calc(1.3s + var(--i) * .45s) both }
  .ill.open .shop-awn::before { animation: awn-sheen .9s var(--ease) calc(1.45s + var(--i) * .45s) both }
  @keyframes awn-flap {
    0% { transform: none }
    28% { transform: scaleY(1.14) skewX(-3deg) }
    52% { transform: scaleY(.93) skewX(1.5deg) }
    74% { transform: scaleY(1.04) }
    100% { transform: none } }
  @keyframes awn-sheen { from { background-position: -150% 0 } to { background-position: 250% 0 } }
}
.shop-awn::after { content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 34%;
  background:
    radial-gradient(circle at 50% 0, var(--sig) 0 68%, transparent 70%) 0 0 / 25% 100% repeat-x,
    radial-gradient(circle at 50% 0, #FFF4E8 0 68%, transparent 70%) 12.5% 0 / 25% 100% repeat-x }

.ill-doc { position: relative; width: 46%; aspect-ratio: .8 }
.doc-back, .ill-sheet { position: absolute; inset: 0; border-radius: 3px }
.doc-back { background: linear-gradient(#DDE5ED, #B9C6D3); transform: rotate(5deg) translate(6%, 2%);
  box-shadow: 0 10px 18px -10px rgba(0,0,0,.7) }
.ill-sheet { background: linear-gradient(#FBFCFD, #DDE5ED); transform: rotate(-4deg);
  clip-path: polygon(0 0, 80% 0, 100% 16%, 100% 100%, 0 100%);
  box-shadow: 0 12px 20px -10px rgba(0,0,0,.7) }
.ill-sheet::after { content: ""; position: absolute; top: 0; right: 0; width: 20%; height: 16%;
  background: linear-gradient(225deg, transparent 50%, #B9C6D3 50%) }
.sh-ln { position: absolute; left: 12%; top: 11%; width: 46%; height: 5%; border-radius: 2px; background: #93AAC0 }
.sh-ln.s { top: 20%; width: 30%; opacity: .55 }
.sh-bars { position: absolute; left: 12%; right: 12%; bottom: 9%; height: 52%; display: flex; align-items: flex-end; gap: 9% }
.sh-bars b { flex: 1; height: calc(var(--h) * 100%); border-radius: 2px 2px 0 0;
  background: linear-gradient(#F79A55, #F47F22); opacity: .9;
  transform-origin: bottom; transform: scaleY(calc(.12 + var(--open) * .88)) }
.sh-bars b:nth-child(1) { transition: transform .6s var(--ease) calc(1.7s + var(--i) * .45s) }
.sh-bars b:nth-child(2) { transition: transform .6s var(--ease) calc(1.82s + var(--i) * .45s) }
.sh-bars b:nth-child(3) { transition: transform .6s var(--ease) calc(1.94s + var(--i) * .45s) }
.sh-bars b:nth-child(4) { transition: transform .6s var(--ease) calc(2.06s + var(--i) * .45s) }
.sh-trend { position: absolute; left: 10%; right: 10%; top: 28%; bottom: 12%; width: 80%; height: 60%; overflow: visible }
.sh-trend polyline { fill: none; stroke: #0C2440; stroke-width: 2.4; stroke-linejoin: round; stroke-linecap: round;
  vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--open));
  transition: stroke-dashoffset 1s var(--ease) calc(2s + var(--i) * .45s) }
.sh-arrow { position: absolute; right: 7%; top: 24%; width: 14%; height: auto; overflow: visible;
  opacity: var(--open); transition: opacity .3s var(--ease) calc(2.8s + var(--i) * .45s) }
.sh-arrow path { fill: none; stroke: #0C2440; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round }
@media (prefers-reduced-motion: reduce) {
  .ill-front, .ill-file, .ill-hub, .ill-row, .ill-row i, .ill-pulse, .shop-win, .shop-door,
  .sh-bars b, .sh-trend polyline, .sh-arrow { transition: none }
}
@media (max-width: 900px) { .about-home { grid-template-columns: 1fr } }
@media (max-width: 600px) {
  .ill-out { left: 61%; width: 37% }
  .ill-res { gap: .25rem }
  .ill-row { font-size: .58rem }
  .ill-row .ok { width: 11px; height: 11px }
}

.trl { margin-top: clamp(2.2rem, 4vw, 3.2rem) }

.trl-band { display: grid; grid-template-columns: repeat(9, minmax(0, 1fr)); margin: 0 1px -1px;
  position: relative; z-index: 1 }
.trl-band span { grid-column: 3 / 9; display: flex; align-items: center; min-height: 3.5rem;
  padding: .9rem 1.4rem; background: var(--sig-fill); color: var(--on-sig);
  border-radius: 0 var(--card-r) 0 0; box-shadow: 0 10px 30px -14px rgba(244,127,34,.55);
  font-family: var(--d); font-size: clamp(1rem, 1.5vw, 1.25rem); font-weight: 600;
  letter-spacing: -.01em; line-height: 1.2 }
.trl-row { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(9, minmax(0, 1fr)); gap: 1px; background: var(--hair);
  border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden }

.lvl button { display: flex; flex-direction: column; gap: 1.2rem; width: 100%; height: 100%;
  min-height: 11.5rem; padding: 1.5rem clamp(.6rem, 1.2vw - .25rem, .9rem) 1.4rem; border: 0; margin: 0; text-align: left;
  background: var(--pan); color: var(--ink); font: inherit; cursor: var(--cur-on);
  transition: background var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease) }
.lvl .no { font-family: var(--d); font-size: 2rem; font-weight: 600; letter-spacing: -.03em;
  line-height: 1; font-variant-numeric: tabular-nums }

.lvl button { container-type: inline-size }
.lvl .nm { margin-top: auto; font-size: min(.8rem, 12.4cqi); line-height: 1.35; color: var(--soft);
  hyphens: manual; overflow-wrap: normal }

@media (max-width: 1080px) {
  .lvl .nm { display: none }
  .lvl button { min-height: 4.6rem; padding: 1rem .8rem; justify-content: center }
}
.lvl.out button { background: var(--sunk) }
.lvl.out .no { color: var(--soft) }
.lvl button:hover { background: #fff; box-shadow: inset 0 -2px 0 var(--ink) }
.lvl button[aria-pressed="true"] { background: #fff; box-shadow: inset 0 -3px 0 var(--sig) }
.lvl button:focus-visible { outline: 2px solid var(--ink); outline-offset: -5px }

.trl-pops { margin-top: -1px; position: relative; display: grid; gap: .9rem }
.trl.live .trl-row { border-bottom-left-radius: 0; border-bottom-right-radius: 0 }
.trl.live .trl-pop { border-top-left-radius: 0; border-top-right-radius: 0 }
.trl-pop { position: relative; background: var(--pan); border: 1px solid var(--hair-2);
  border-radius: var(--r); padding: clamp(1.4rem, 2.6vw, 2rem) clamp(1.4rem, 3vw, 2.4rem); display: grid;
  grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: .4rem clamp(1.5rem, 4vw, 3rem); align-items: start }
.trl-pop .meas { grid-column: 1; color: var(--sig-ink) }
.trl-pop h3 { grid-column: 1; font-size: 1.1rem; font-weight: 600 }
.trl-pop p { grid-column: 2; grid-row: 1 / span 2; margin: 0; color: var(--ink); font-size: .95rem }
.trl-pop p.path { grid-row: 3; margin-top: .6rem; color: var(--soft); font-size: .9rem }
.trl-pop p.path b { color: var(--ink); font-weight: 600 }

.trl.live .trl-pop { display: none }
.trl.live .trl-pop.on { display: grid }
.trl.live .trl-pop::before { content: none; position: absolute; top: -6px; left: var(--caret, 2rem);
  width: 10px; height: 10px; background: var(--pan); border-left: 1px solid var(--hair-2);
  border-top: 1px solid var(--hair-2); transform: translateX(-50%) rotate(45deg) }
@media (prefers-reduced-motion: no-preference) {
  .trl.live .trl-pop.on { animation: rise-in .26s var(--ease) both }
  @keyframes rise-in { from { transform: translateY(4px) } }
}

.band { height: clamp(150px, 22vw, 290px); overflow: hidden; background: var(--sunk);
  border-block: 1px solid var(--hair-2) }
.band img, .band video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 62% }

.band { position: relative }
.band video, .ab-diff figure video { position: absolute; inset: 0; opacity: 0; transition: opacity .9s var(--ease) }
.band video.on, .ab-diff figure video.on { opacity: 1 }

.ben { display: grid; grid-template-columns: repeat(6, 1fr); gap: 1rem; margin-top: 2.4rem }
.b { grid-column: span 2; padding: 1.4rem 1.5rem 1.6rem; display: flex;
  flex-direction: column; gap: .45rem;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease) }
.b:nth-child(4), .b:nth-child(5) { grid-column: span 3 }
.b:hover { border-color: var(--sig); transform: translateY(-2px) }
.b .fig { font-family: var(--d); font-size: 1.9rem; font-weight: 700; letter-spacing: -.03em;
  color: var(--sig-disp); font-variant-numeric: tabular-nums; line-height: 1 }
.b h3 { font-size: 1.04rem; font-weight: 600 }
.b p { color: var(--soft); font-size: .92rem; margin: 0 }

.bens { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem;
  margin-top: clamp(2rem, 4vw, 2.8rem) }
.bn { position: relative; margin: 0; min-height: 20rem; display: flex; flex-direction: column;
  justify-content: space-between; gap: 1.4rem; padding: 1.6rem 1.7rem 1.8rem; overflow: hidden;
  background: var(--pan); border: 1px solid var(--hair); border-radius: 0 var(--card-r) 0 var(--card-r);
  transition: background .35s var(--ease), border-color .35s var(--ease), color .35s var(--ease) }
.bn-ic { display: block; width: 40px; height: 40px; color: var(--ink); transition: color .35s var(--ease), transform .35s var(--ease) }
.bn-ic svg { display: block; width: 100%; height: 100% }
.bn-t h3 { font-size: clamp(1.3rem, 2vw, 1.65rem); font-weight: 600; letter-spacing: -.02em;
  line-height: 1.12; max-width: 16ch }
.bn-t p { margin: .7rem 0 0; max-width: 34ch; font-size: .95rem; color: var(--soft) }
.bn:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.bn-img { padding: 0; border: 0; background: var(--sunk) }
.bn-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover }

.bn-img img[data-pic] { opacity: 0; transform: scale(1.06);
  transition: opacity .5s var(--ease), transform .9s var(--ease) }
.bens:has(.bn[data-pic="1"]:is(:hover, :focus-visible)) .bn-img img[data-pic="1"],
.bens:has(.bn[data-pic="2"]:is(:hover, :focus-visible)) .bn-img img[data-pic="2"],
.bens:has(.bn[data-pic="3"]:is(:hover, :focus-visible)) .bn-img img[data-pic="3"],
.bens:has(.bn[data-pic="4"]:is(:hover, :focus-visible)) .bn-img img[data-pic="4"],
.bens:has(.bn[data-pic="5"]:is(:hover, :focus-visible)) .bn-img img[data-pic="5"] { opacity: 1; transform: none }
@media (hover: hover) and (pointer: fine) {
  .bn-t p { max-height: 0; margin-top: 0; opacity: 0; transform: translateY(8px);
    transition: max-height .4s var(--ease), margin-top .4s var(--ease), opacity .3s var(--ease), transform .4s var(--ease) }
  .bn:not(.bn-img):hover, .bn:not(.bn-img):focus-visible {
    background: var(--sig-fill); border-color: var(--sig-fill); color: var(--on-sig) }
  .bn:hover .bn-ic, .bn:focus-visible .bn-ic { color: inherit; transform: translateY(-2px) }
  .bn:hover .bn-t p, .bn:focus-visible .bn-t p { max-height: 8rem; margin-top: .7rem; opacity: 1;
    transform: none; color: inherit }
}
@media (prefers-reduced-motion: reduce) { .bn, .bn-t p, .bn-ic, .bn-img img { transition: none } }
@media (max-width: 1000px) { .bens { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 600px) {
  .bens { grid-template-columns: 1fr }
  .bn { min-height: 13rem }
}

.rail { margin-top: 2.6rem; display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 1px; background: var(--hair); border: 1px solid var(--hair);
  border-radius: var(--r); overflow: hidden }
.det { background: var(--pan); padding: 1.9rem 1.4rem 1.6rem; position: relative }
.det::before { content: ""; position: absolute; top: 0; left: 1.4rem; width: 26px;
  height: 3px; background: var(--hair-2) }
.det:first-child::before { background: var(--sig) }
.det h3 { font-size: clamp(1.45rem, 2.4vw, 1.9rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.08; margin-top: .4rem }
.det p { color: var(--soft); font-size: .89rem; margin: .5rem 0 0 }

.dial { position: relative }
.dial-svg { display: none }
.dial.live { height: 330vh; margin-top: 1.4rem }
.dial.live .dial-stick { position: sticky; top: var(--hdr-h); height: calc(100dvh - var(--hdr-h)); overflow: hidden }
.dial.live .dial-svg { display: block; position: absolute; inset: 0; width: 100%; height: 100% }

.dial.live .say { position: absolute; left: 0; right: 0; margin-inline: auto; text-align: center;
  top: clamp(1.2rem, 4vh, 2.6rem); z-index: 1 }
.dial.live .rail { display: block; position: absolute; margin: 0; background: none; border: 0;
  overflow: visible; left: var(--px, 30%); top: var(--py, 55%); width: var(--pw, 34rem);
  text-align: center }
.dial.live .det { position: absolute; left: 0; top: 0; width: 100%; padding: 0; background: none;
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .3s var(--ease), transform .3s var(--ease), visibility 0s linear .3s }
.dial.live .det.on { opacity: 1; visibility: visible; transform: none;
  transition: opacity .35s var(--ease) .06s, transform .35s var(--ease) .06s, visibility 0s }
.dial.live .det::before { content: none }

.dial.live .det .meas, .dial.live .det h3 { position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap }
.dial.live .det p { margin: 0; font-size: 1.04rem; line-height: 1.6; color: var(--ink) }
.dl-ring { fill: none; stroke: var(--hair-2); stroke-width: 1 }
.dl-tick { stroke: var(--hair-2); stroke-width: 1 }
.dl-tick.major { stroke: var(--soft) }
.dl-pin { stroke: var(--sig); stroke-width: 2 }
.dl-dot { fill: var(--sig) }
.dl-no { font-family: var(--d); font-size: 16px; font-weight: 500; letter-spacing: .02em;
  fill: var(--soft); text-anchor: middle; font-variant-numeric: tabular-nums }
.dl-ic { fill: var(--ink) }

.det-ic { display: block; width: 28px; height: 28px; margin-bottom: .6rem; color: var(--ink) }
.det-ic svg { display: block; width: 100%; height: 100% }
.dial.live .det-ic { display: none }
.dl-no.on { fill: var(--sig-ink) }
.dl-nm { font-family: var(--d); font-weight: 500; letter-spacing: -.03em; fill: var(--ink);
  text-anchor: middle }

.tl { margin-top: clamp(3.6rem, 8vw, 6rem) }
.tl-grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.6rem, 4vw, 3.6rem); align-items: start; margin-top: clamp(1.8rem, 4vw, 2.8rem) }
.route-wrap { position: relative }

.bp { position: sticky; top: calc(var(--hdr-h) + 1.4rem); height: min(calc(100dvh - var(--hdr-h) - 2.8rem), 40rem);
  border: 1px solid var(--hair); border-radius: 0 var(--card-r) 0 var(--card-r); overflow: hidden;
  background:
    linear-gradient(var(--hair) 1px, transparent 1px) 0 0 / 32px 32px,
    linear-gradient(90deg, var(--hair) 1px, transparent 1px) 0 0 / 32px 32px,
    var(--pan);
  background-blend-mode: normal }
.bp::after { content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse at 50% 55%, transparent 35%, var(--pan) 100%) }
.bp-c { position: absolute; inset: 0; width: 100%; height: 100% }
.bp-cap { position: absolute; left: 1.2rem; bottom: 1rem; z-index: 1; margin: 0; display: flex; gap: .8rem;
  font-family: var(--t); font-size: .84rem; font-weight: 500; color: var(--soft) }
.bp-fig { color: var(--sig-ink) }
@media (max-width: 1000px) {
  .tl-grid { grid-template-columns: 1fr }
  .bp { display: none }
}
.spot { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair) }
.sp { display: grid; grid-template-columns: 3rem minmax(0, 1fr); gap: .5rem 1.2rem;
  align-items: baseline; padding: 1.6rem 0; border-bottom: 1px solid var(--hair);
  transition: opacity .45s var(--ease) }
.sp-no { font-family: var(--d); font-size: .95rem; font-weight: 500; font-variant-numeric: tabular-nums;
  color: color-mix(in srgb, var(--sig-ink) calc(30% + var(--k) * .7), var(--soft)) }
.sp-d { grid-column: 2 }
.sp-name { font-size: clamp(1.9rem, 3.6vw, 3.1rem); font-weight: 500; letter-spacing: -.035em; line-height: 1;
  color: color-mix(in srgb, var(--sig) var(--k), var(--ink)); transition: text-shadow .45s var(--ease) }
.sp-d time { font-family: var(--t); font-size: .88rem; font-weight: 500; color: var(--soft);
  font-variant-numeric: tabular-nums }
.sp-d p { margin: .4rem 0 0; color: var(--soft); font-size: .95rem }
.sp-d .sp-note { font-size: .78rem }

.route-wrap.live .spot { margin-left: 3.2rem }
.route { position: absolute; left: 0; top: 0; width: 3.2rem; height: 100%; overflow: visible; pointer-events: none }
.route-plan { fill: none; stroke: var(--hair-2); stroke-width: 2; stroke-linecap: round }
.route-done { fill: none; stroke: url(#route-g); stroke-width: 2; stroke-linecap: round;
  filter: drop-shadow(0 0 4px rgba(244,127,34,.45)) }
.route-pin { fill: var(--pap); stroke: var(--hair-2); stroke-width: 2;
  transition: fill .35s var(--ease), stroke .35s var(--ease) }
.route-pin.past { fill: var(--sig); stroke: var(--sig) }
.route-pin.on { fill: var(--sig); stroke: var(--sig) }
.route-ring { fill: none; stroke: var(--sig); stroke-width: 1.5; opacity: 0;
  transform-box: fill-box; transform-origin: center }
@media (prefers-reduced-motion: no-preference) {
  .route-ring { animation: route-breathe 2.2s var(--ease) infinite }
  @keyframes route-breathe { 0% { transform: scale(.7); opacity: .9 } 100% { transform: scale(2); opacity: 0 } }
}
.route-wrap.live .sp { opacity: .28 }
.route-wrap.live .sp.on { opacity: 1 }
.route-wrap.live .sp.on .sp-name { text-shadow: 0 0 calc(4px + var(--k) * .4)
  color-mix(in srgb, var(--sig) calc(var(--k) * .6), transparent) }
@media (prefers-reduced-motion: reduce) { .sp, .route-pin { transition: none } }
@media (max-width: 760px) {
  .sp { grid-template-columns: 2.4rem minmax(0, 1fr) }
  .route-wrap.live .spot { margin-left: 2.2rem }
  .route { width: 2.2rem }
}

.tl.pin { position: relative }
.tl.pin .tl-stick { position: sticky; top: calc(var(--hdr-h) + 1rem); height: calc(100dvh - var(--hdr-h) - 2rem);
  display: flex; flex-direction: column }
.tl.pin .tl-grid { flex: 1; min-height: 0; align-items: stretch }
.tl.pin .route-win { position: relative; height: 100%; overflow: hidden;
  -webkit-mask-image: linear-gradient(#000 82%, transparent); mask-image: linear-gradient(#000 82%, transparent) }
.tl.pin #route { will-change: transform }
.tl.pin .bp { position: relative; top: 0; height: 100% }
.note { margin-top: 1.4rem; font-size: .83rem; color: var(--soft) }

.grid-m { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1.8rem 1.2rem; margin-top: clamp(2.4rem, 5vw, 3.6rem) }
@media (max-width: 680px) { .grid-m { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.4rem .9rem } }
.grid-m figure { margin: 0 }
.grid-m img { display: block; width: 100%; aspect-ratio: 1; border-radius: var(--r);
  border: 1px solid var(--hair) }
.grid-m img { object-fit: cover; object-position: 50% 50%; filter: grayscale(1) contrast(1.04);
  transition: filter var(--dur-2) var(--ease) }
.grid-m figure:hover img { filter: none }
.grid-m figcaption { margin-top: .55rem; font-size: .78rem; line-height: 1.35; color: var(--soft) }

.li { display: inline-grid; place-items: center; width: 40px; height: 40px; margin: .35rem 0 0 -8px;
  color: var(--soft); border-radius: 6px; transition: color var(--dur-2) var(--ease) }
.li svg { width: 24px; height: 24px; fill: currentColor }
.li:hover, .li:focus-visible { color: #0A66C2 }
.li:focus-visible { outline: 2px solid var(--ink); outline-offset: 0 }
.grid-m figure { display: flex; flex-direction: column; align-items: flex-start }
.grid-m figure img { align-self: stretch }
.grid-m figcaption { flex: 1 }
.grid-m figcaption b { display: block; font-family: var(--d); font-size: .88rem; font-weight: 600;
  color: var(--ink); margin-bottom: .1rem }
.after { display: flex; gap: .7rem; margin-top: 1.5rem; flex-wrap: wrap; align-items: center }
.after .meas { margin-right: auto }

.page-head h1 { font-size: clamp(2.2rem, 4.4vw, 3.4rem); letter-spacing: -.028em;
  line-height: 1.04 }
.page-head .grid-m { margin-top: clamp(1.8rem, 4vw, 2.8rem) }

.posts { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.4rem;
  margin-top: clamp(1.8rem, 4vw, 2.8rem) }
.posts.two { grid-template-columns: repeat(2, minmax(0, 1fr)) }
.post { display: flex; flex-direction: column; background: var(--pan); color: inherit;
  border: 1px solid var(--hair); border-radius: var(--r); overflow: hidden; text-decoration: none;
  transition: border-color var(--dur-2) var(--ease), transform var(--dur-2) var(--ease) }
.post:hover { border-color: var(--sig); transform: translateY(-2px) }
.post:focus-visible { outline: 2px solid var(--ink); outline-offset: 3px }
.post figure { margin: 0; aspect-ratio: 16 / 10; overflow: hidden; background: var(--sunk) }
.post img { display: block; width: 100%; height: 100%; object-fit: cover }
.post .b { display: flex; flex-direction: column; gap: .5rem; flex: 1;
  padding: 1.15rem 1.3rem 1.45rem }
.post h3 { font-size: 1.08rem; font-weight: 600; line-height: 1.25 }
.post p { margin: 0; color: var(--soft); font-size: .92rem }

article.post-page { padding-block: clamp(5rem, 10vw, 8.5rem) }
.article { max-width: 44rem; margin: 0 auto }
.backlink { font-family: var(--t); font-size: .95rem; font-weight: 500; color: var(--sig-ink);
  text-decoration: none }
.backlink::before { content: "\2190\00a0" }
.backlink:hover { text-decoration: underline; text-underline-offset: 3px }
.post-page h1 { margin-top: 1.2rem; font-size: clamp(1.9rem, 4vw, 2.9rem); line-height: 1.08 }
.post-meta { margin: 1rem 0 0 }
.post-cover { margin: 1.8rem 0 0; aspect-ratio: 16 / 10; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--hair); background: var(--sunk) }
.post-cover img { display: block; width: 100%; height: 100%; object-fit: cover }
.prose { margin-top: 2.2rem; font-size: 1.02rem }
.prose p { margin: 0 0 1.1rem }
.prose .lede { font-size: 1.14rem; color: var(--ink) }
.prose h2 { font-size: clamp(1.35rem, 2.4vw, 1.75rem); letter-spacing: -.02em;
  margin: 2.6rem 0 .8rem }
.prose h3 { font-size: 1.1rem; font-weight: 600; margin: 1.9rem 0 .5rem }
.prose ul, .prose ol { margin: 0 0 1.25rem; padding-left: 1.25rem }
.prose li { margin: .4rem 0 }
.prose li::marker { color: var(--sig-ink) }
.prose strong { font-weight: 600; color: var(--ink) }
.prose figure { margin: 2.2rem 0 }
.prose figure img { display: block; width: 100%; border-radius: var(--r);
  border: 1px solid var(--hair) }
.prose figcaption { margin-top: .6rem; font-size: .86rem; color: var(--soft) }
.more { margin-top: clamp(3rem, 6vw, 4.4rem); padding-top: 2rem; border-top: 1px solid var(--hair) }
.more h2 { font-size: 1.3rem }
.more .posts { margin-top: 1.2rem }
@media (max-width: 1000px) { .posts { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 680px) { .posts, .posts.two { grid-template-columns: 1fr } }

.contact { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
  gap: clamp(1.8rem, 5vw, 4rem); align-items: start }
.contact-form .lede { margin: 1rem 0 0; color: var(--soft) }
.form { margin-top: 2rem; display: grid; gap: 1.15rem }
.form .two { display: grid; grid-template-columns: 1fr 1fr; gap: 1.15rem }
.field { display: grid; gap: .45rem }
.field label { font-family: var(--d); font-size: .86rem; font-weight: 500; color: var(--ink) }
.field input, .field textarea { width: 100%; font: inherit; font-size: 1rem; color: var(--ink);
  background: var(--pan); border: 1px solid var(--hair-2); border-radius: var(--r);
  padding: .75rem .85rem; transition: border-color var(--dur-2) var(--ease) }
.field textarea { resize: vertical; min-height: 9rem }
.field input:hover, .field textarea:hover { border-color: var(--soft) }
.field input:focus-visible, .field textarea:focus-visible { outline: 2px solid var(--ink);
  outline-offset: 1px; border-color: var(--ink) }
.field [aria-invalid="true"] { border-color: #B3261E }
.field .err { margin: 0; min-height: 0; font-size: .82rem; color: #B3261E }
.field .err:empty { display: none }
.form .act { justify-self: start; margin-top: .3rem }
.contact-card { background: var(--pan); border: 1px solid var(--hair); border-radius: var(--r);
  padding: 1.5rem 1.5rem 1.6rem }
.contact-card h2 { font-size: 1.35rem }
.contact-card p { margin: .6rem 0 0; color: var(--soft) }
.contact-card address { margin: 1.1rem 0 0; font-style: normal; font-size: .95rem; color: var(--ink) }
.contact-card .act { margin-top: .9rem }
.contact-card .map { margin-top: 1.3rem; aspect-ratio: 4 / 3; overflow: hidden;
  border-radius: var(--r); border: 1px solid var(--hair); background: var(--sunk) }
.contact-card iframe { display: block; width: 100%; height: 100%; border: 0;
  filter: grayscale(1) contrast(1.05) }
@media (max-width: 1000px) { .contact { grid-template-columns: 1fr } }
@media (max-width: 560px) { .form .two { grid-template-columns: 1fr } }

.ab-top-in { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center }
.about-head .lede { margin: 1.4rem 0 0; font-size: clamp(1.08rem, 1.5vw, 1.25rem); line-height: 1.6; color: var(--ink) }
.ab-top .ill { align-self: center }

.ab-intro { padding-top: clamp(3rem, 6vw, 5rem) }
.ab-open { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: end }
.ab-open p { margin: 0; color: var(--soft); font-size: 1.06rem; line-height: 1.65; max-width: 46ch }
.ab-open .ab-lead { font-family: var(--d); font-size: clamp(1.5rem, 2.7vw, 2.2rem); line-height: 1.22; letter-spacing: -.02em;
  font-weight: 400; color: var(--ink); max-width: 26ch }
.ab-state { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
  margin-top: clamp(3.4rem, 7vw, 5.6rem); padding-block: clamp(2.2rem, 4vw, 3rem); border-block: 1px solid var(--hair) }
.ab-state .pull, .ab-close .pull { margin: 0; font-family: var(--d); font-size: clamp(2rem, 4.4vw, 3.6rem); font-weight: 500;
  letter-spacing: -.034em; line-height: 1.02; color: var(--sig-disp); text-wrap: balance }
.ab-state p:not(.pull), .ab-close p:not(.pull) { margin: 0; color: var(--soft); font-size: 1.06rem; line-height: 1.65; max-width: 44ch }
.ab-how { margin-top: clamp(3.4rem, 7vw, 5.6rem) }
.ab-how-k { margin: 0 0 1.6rem; font-family: var(--d); font-size: clamp(1.2rem, 1.9vw, 1.5rem); letter-spacing: -.015em; color: var(--ink) }
.ab-ways { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .8rem }
.ab-ways li, .ab-tri li { display: flex; flex-direction: column; gap: 1.6rem; padding: 1.4rem 1.4rem 1.5rem;
  background: var(--pan); border: 1px solid var(--hair); border-radius: 0 var(--card-r) 0 var(--card-r);
  font-family: var(--d); font-size: 1.14rem; font-weight: 500; line-height: 1.25; letter-spacing: -.01em; color: var(--ink);
  transition: border-color .35s var(--ease), transform .35s var(--ease) }
.ab-ways li > span:last-child::first-letter, .ab-tri li > span:last-child::first-letter { text-transform: uppercase }
.ab-ways li > span:last-child, .ab-tri li > span:last-child { display: block; margin-top: auto }
.ab-ways li:hover, .ab-tri li:hover { border-color: var(--sig); transform: translateY(-3px) }
.ab-ic { display: block; width: 36px; height: 36px; color: var(--sig-ink) }
.ab-ic svg { display: block; width: 100%; height: 100% }
.ab-ways li { min-height: 11rem }

.ab-diff { position: relative; overflow: hidden; padding-block: clamp(5rem, 11vw, 9rem); isolation: isolate }
.ab-diff figure { position: absolute; inset: 0; margin: 0; z-index: -1; background: var(--sunk) }
.ab-diff figure img, .ab-diff figure video { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60% }
.ab-diff figure::after { content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg, rgba(4,16,31,.94) 0, rgba(4,16,31,.78) 48%, rgba(4,16,31,.2)) }
.ab-diff-k { margin: 0 0 1rem; font-family: var(--d); font-size: clamp(1.1rem, 1.7vw, 1.35rem); color: #C9D6E3 }
.ab-diff-q { margin: 0; max-width: 21ch; font-family: var(--d); font-size: clamp(2.1rem, 4.8vw, 4rem); font-weight: 500;
  line-height: 1.04; letter-spacing: -.036em; color: #FFFFFF; text-wrap: balance }
.ab-diff-q::first-letter { text-transform: uppercase }

.ab-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2.4rem, 6vw, 6rem); align-items: start }
.ab-side { position: sticky; top: calc(var(--hdr-h) + 2.4rem) }
.ab-story h2, .ab-vision h2 { font-size: clamp(2.1rem, 4.6vw, 3.7rem); letter-spacing: -.034em; line-height: 1.02 }
.ab-seen { margin: 1.8rem 0 .6rem; color: var(--soft); font-size: 1.06rem }
.ab-said { margin: 0; font-family: var(--d); font-size: clamp(1.6rem, 3vw, 2.5rem); font-weight: 500; line-height: 1.1;
  letter-spacing: -.028em; color: var(--sig-disp); max-width: 17ch; text-wrap: balance }
.ab-main > p { margin: 0 0 1.1rem; color: var(--soft); font-size: 1.06rem; line-height: 1.65; max-width: 52ch }
.ab-main > p:first-child { color: var(--ink); font-size: clamp(1.15rem, 1.6vw, 1.3rem); line-height: 1.55 }
.ab-k { color: var(--ink) !important; font-family: var(--d); font-size: 1.2rem !important; margin-top: 2rem !important }

.venn { position: relative; margin: 1rem 0 2.2rem; width: min(100%, 30rem); aspect-ratio: 1 / .93 }
.venn ul { list-style: none; margin: 0; padding: 0 }
.venn li { --x: 0; --y: 0; position: absolute; width: 58%; aspect-ratio: 1; border-radius: 50%; display: grid;
  border: 1.5px solid var(--sig); background: color-mix(in srgb, var(--sig) 9%, transparent);
  font-family: var(--d); font-size: clamp(.95rem, 1.4vw, 1.08rem); font-weight: 600; line-height: 1.2; color: var(--ink);
  transition: transform 1.1s var(--ease) calc(var(--k) * .12s) }
.venn li span { display: block; max-width: 9.5em; text-align: center; text-wrap: balance }
.venn li span::first-letter { text-transform: uppercase }
.venn li:nth-child(1) { left: 0; top: 0; --x: -14%; --y: -10%; place-items: start center; padding: 21% 18% 0 6% }
.venn li:nth-child(2) { right: 0; top: 0; --x: 14%; --y: -10%; place-items: start center; padding: 21% 6% 0 18% }
.venn li:nth-child(3) { left: 21%; bottom: 0; --y: 16%; place-items: end center; padding: 0 12% 19% }
.venn-mark { position: absolute; left: 50%; top: 47%; width: 15%; aspect-ratio: 1; translate: -50% -50%; display: grid; place-items: center;
  border-radius: 50%; background: var(--sig-fill); color: var(--on-sig); box-shadow: 0 0 0 6px color-mix(in srgb, var(--sig) 22%, transparent);
  transition: scale .6s var(--ease) .9s, opacity .4s var(--ease) .9s }
.venn-mark svg { width: 64%; height: auto }

.ab-vision { border-top: 1px solid var(--hair) }
.ab-vis-lead { margin: 1.8rem 0 0; max-width: 24ch; font-family: var(--d); font-size: clamp(1.7rem, 3.6vw, 3rem); font-weight: 400;
  line-height: 1.1; letter-spacing: -.03em; color: var(--ink); text-wrap: balance }
.ab-vis-row { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 2fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start;
  margin-top: clamp(3rem, 6vw, 4.6rem) }
.ab-vis-row .ab-k { margin: 0 !important; color: var(--soft) !important; font-family: var(--t, inherit); font-size: 1.06rem !important; line-height: 1.65; max-width: 30ch }
.ab-tri { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2.4rem }
.ab-tri li { position: relative; min-height: 9.5rem }
.ab-tri li + li::before { content: "+"; position: absolute; left: -1.7rem; top: 50%; translate: 0 -50%;
  font: 400 1.6rem/1 var(--d); color: var(--sig-ink) }
.ab-close { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center;
  margin-top: clamp(3.4rem, 7vw, 5.6rem); padding-top: clamp(2.2rem, 4vw, 3rem); border-top: 1px solid var(--hair) }

.ab-live .rv { opacity: 0; translate: 0 18px; transition: opacity .8s var(--ease), translate .8s var(--ease) }
.ab-live .rv.in { opacity: 1; translate: none }
.ab-live .venn:not(.in) li { transform: translate(var(--x), var(--y)) }
.ab-live .venn:not(.in) .venn-mark { scale: .4; opacity: 0 }

@media (max-width: 1000px) {
  .ab-top-in { grid-template-columns: 1fr }
  .ab-ways { grid-template-columns: repeat(2, minmax(0, 1fr)) }
  .ab-split { grid-template-columns: 1fr }
  .ab-side { position: static }
  .ab-vis-row { grid-template-columns: 1fr }
}
@media (max-width: 700px) {
  .ab-open, .ab-state, .ab-close { grid-template-columns: 1fr; gap: 1.4rem }
  .ab-tri { grid-template-columns: 1fr; gap: 2rem }
  .ab-tri li + li::before { left: 50%; top: -1.25rem; translate: -50% -50% }
  .ab-diff figure::after { background: linear-gradient(0deg, rgba(4,16,31,.95), rgba(4,16,31,.7)) }
}
@media (max-width: 480px) {
  .ab-ways { grid-template-columns: 1fr } .ab-ways li { min-height: 0 }
  .venn li { font-size: .8rem }
  .venn li:nth-child(1) { padding: 24% 20% 0 8% }
  .venn li:nth-child(2) { padding: 24% 4% 0 16% }
}
.ab-story { overflow-x: clip }

.tx-head .lede { margin: 1.4rem 0 0; max-width: 62ch; font-size: clamp(1.05rem, 1.4vw, 1.2rem); line-height: 1.6; color: var(--soft) }
.tx-jump { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 2rem }
.tx-jump a { padding: .55rem .9rem; border: 1px solid var(--hair-2); border-radius: 0 .8rem 0 .8rem;
  font-family: var(--d); font-size: .92rem; font-weight: 500; color: var(--ink); text-decoration: none;
  transition: border-color .25s var(--ease) }
.tx-jump a:hover, .tx-jump a:focus-visible { border-color: var(--sig) }
.tx-opt { border-top: 1px solid var(--hair); padding-block: clamp(3.6rem, 7vw, 6rem) }
.tx-label { margin-bottom: clamp(2rem, 4vw, 3rem); max-width: 60ch }
.tx-label h2 { font-size: clamp(1.6rem, 2.8vw, 2.4rem); letter-spacing: -.03em }
.tx-label p { margin: .7rem 0 0; color: var(--soft) }
.tx-opt .tech { margin-top: 0 }
.tx-ic { display: block; width: 22px; height: 22px; flex: none; color: var(--sig) }
.tx-ic svg { display: block; width: 100%; height: 100% }

.tx-b, .tx-c, .tx-d { display: grid; grid-template-columns: minmax(0, .78fr) minmax(0, 2.22fr);
  gap: 1.6rem clamp(1.4rem, 3.4vw, 3rem); align-items: start }
.tx-b .note, .tx-c .note, .tx-d .note { grid-column: 1 / -1; margin: 0 }

.tx-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .7rem }
.tx-fam { display: flex; flex-direction: column; padding: 1.2rem 1.15rem 1.1rem; background: var(--pan);
  border: 1px solid var(--hair); border-radius: 0 var(--card-r) 0 var(--card-r) }
.tx-fam > .tx-ic { width: 30px; height: 30px }
.tx-fam h4 { margin: 1.1rem 0 .9rem; font-family: var(--d); font-size: 1.08rem; font-weight: 600; line-height: 1.2;
  letter-spacing: -.012em; min-height: 3.6em }
.tx-fam ul { list-style: none; margin: 0; padding: 0 }
.tx-fam li { display: flex; gap: .6rem; align-items: flex-start; padding: .7rem 0; border-top: 1px solid var(--hair);
  font-size: .9rem; line-height: 1.35; color: var(--ink) }
.tx-fam li .tx-ic { width: 18px; height: 18px; margin-top: .05rem; color: var(--soft) }
.tx-fam small { display: block; margin-top: .2rem; font-size: .78rem; color: var(--soft) }

.tx-c > .tech-side { grid-row: span 2 }
.tx-tabs { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: .4rem;
  padding: .35rem; border: 1px solid var(--hair); border-radius: 0 var(--card-r) 0 var(--card-r); background: var(--sunk) }
.tx-tabs [role=tab] { display: flex; align-items: center; gap: .55rem; padding: .7rem .8rem; border: 0;
  border-radius: 0 .9rem 0 .9rem; background: transparent; color: var(--soft); text-align: left;
  font: 500 .9rem/1.2 var(--d); cursor: var(--cur-on); transition: background .25s var(--ease), color .25s var(--ease) }
.tx-tabs [role=tab] .tx-ic { width: 20px; height: 20px; color: inherit }
.tx-tabs [role=tab]:hover { color: var(--ink) }
.tx-tabs [aria-selected="true"] { background: var(--pan); color: var(--ink); box-shadow: inset 0 -2px 0 var(--sig) }
.tx-tabs [aria-selected="true"] .tx-ic { color: var(--sig) }
.tx-tabs [role=tab]:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px }
.tx-panel { grid-column: 2 }
.tx-three { grid-template-columns: repeat(3, minmax(0, 1fr)) }
@media (prefers-reduced-motion: no-preference) {
  .tx-panel:not([hidden]) { animation: rise-in .3s var(--ease) both }
}

.tx-rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--hair) }
.tx-row { display: grid; grid-template-columns: minmax(0, 17rem) minmax(0, 1fr); gap: 1.4rem;
  padding: 1.25rem 0; border-bottom: 1px solid var(--hair); align-items: baseline }
.tx-row-h { display: flex; gap: .7rem; align-items: center }
.tx-row-h h4 { font-family: var(--d); font-size: 1.05rem; font-weight: 600; line-height: 1.25; letter-spacing: -.01em }
.tx-row ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem }
.tx-row li { padding: .4rem .75rem; border: 1px solid var(--hair-2); border-radius: 0 .7rem 0 .7rem;
  font-size: .9rem; line-height: 1.3; color: var(--ink) }
.tx-row small { color: var(--soft) }

@media (max-width: 1180px) { .tx-cols { grid-template-columns: repeat(2, minmax(0, 1fr)) } }
@media (max-width: 1000px) {
  .tx-b, .tx-c, .tx-d { grid-template-columns: 1fr }
  .tx-c > .tech-side { grid-row: auto }
  .tx-panel { grid-column: 1 }
  .tx-tabs { grid-template-columns: repeat(2, minmax(0, 1fr)) }
}
@media (max-width: 760px) {
  .tx-row { grid-template-columns: 1fr; gap: .8rem }
  .tx-three { grid-template-columns: 1fr }
}
@media (max-width: 560px) { .tx-cols { grid-template-columns: 1fr } .tx-fam h4 { min-height: 0 } }

.faq-wrap { --qn: 2.6rem; --qg: 1rem;
  display: grid; grid-template-columns: minmax(0, .72fr) minmax(0, 1.6fr);
  gap: clamp(2rem, 5vw, 5rem); align-items: start }
.faq-wrap h1 { position: sticky; top: calc(var(--hdr-h) + 2rem); max-width: 9ch }
.faq { margin: 0; border-bottom: 1px solid var(--hair) }
.qa { border-top: 1px solid var(--hair) }
.qa summary { display: grid; grid-template-columns: var(--qn) minmax(0, 1fr) 1.2rem; gap: var(--qg);
  align-items: start; padding: 1.4rem 0; cursor: var(--cur-on); list-style: none }
.qa summary::-webkit-details-marker { display: none }
.qa summary:focus-visible { outline: 2px solid var(--ink); outline-offset: 4px }

.qa .n { font-family: var(--d); font-size: .95rem; font-weight: 500; line-height: 1.53; color: var(--soft);
  font-variant-numeric: tabular-nums }
.qa .q { font-family: var(--d); font-size: 1.12rem; font-weight: 600; line-height: 1.3 }
.qa summary:hover .q { color: var(--sig-ink) }

.qa .pm { position: relative; width: 14px; height: 14px; margin-top: .33rem; justify-self: end }
.qa .pm::before, .qa .pm::after { content: ""; position: absolute; left: 0; top: 6px; width: 14px;
  height: 2px; background: var(--ink); transition: transform var(--dur-2) var(--ease) }
.qa .pm::after { transform: rotate(90deg) }
.qa[open] .pm::after { transform: rotate(0deg) }
.qa[open] .n { color: var(--sig-ink) }
.qa p { margin: -.4rem 0 1.6rem; padding-left: calc(var(--qn) + var(--qg)); padding-right: calc(1.2rem + var(--qg));
  max-width: calc(62ch + var(--qn) + var(--qg)); color: var(--soft); line-height: 1.6 }
@media (max-width: 900px) {
  .faq-wrap { grid-template-columns: 1fr; gap: clamp(1.8rem, 4vw, 2.8rem) }
  .faq-wrap h1 { position: static; max-width: none }
}
@media (max-width: 680px) {
  .faq-wrap { --qn: 2rem; --qg: .7rem }
  .qa p { padding-right: 0 }
  .qa .pm { width: 12px; height: 12px }
  .qa .pm::before, .qa .pm::after { width: 12px; top: 5px }
}

.support { background: var(--pan); border-block: 1px solid var(--hair-2) }
.support .wrap { display: flex; gap: 2.2rem; align-items: center; flex-wrap: wrap;
  padding-block: 1.8rem }
.support ul { list-style: none; display: flex; gap: 2.4rem; margin: 0; padding: 0;
  flex-wrap: wrap; align-items: center }
.support li { line-height: 0 }

.support .logos img { display: block; height: 36px; width: auto; filter: grayscale(1);
  opacity: .72; transition: filter var(--dur-2) var(--ease), opacity var(--dur-2) var(--ease) }
.support .logos li:hover img { filter: none; opacity: 1 }
@media (max-width: 560px) { .support .logos img { height: 28px } }

footer { background: var(--pan); border-top: 1px solid var(--hair); color: var(--soft) }
.foot { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(0, .8fr);
  gap: clamp(1.8rem, 5vw, 4rem); padding-block: clamp(2.6rem, 6vw, 4rem) clamp(2rem, 4vw, 3rem) }
.foot-mark { display: inline-block }
.foot-mark img { display: block; height: 56px; width: auto }
.foot-brand p { margin: 1rem 0 1.4rem; max-width: 36ch; font-size: .95rem }
.foot-nav { display: grid; grid-template-columns: repeat(2, max-content); gap: .7rem 2.6rem;
  align-content: start }
.foot-nav a, .foot-addr a { font-family: var(--d); font-size: .95rem; color: var(--ink);
  text-decoration: none }
.foot-nav a:hover, .foot-addr a:hover { color: var(--sig-ink) }
.foot-nav a[aria-current="page"] { color: var(--sig-ink) }
.foot-addr { font-style: normal; font-size: .95rem; line-height: 1.6 }
.foot-addr a { display: block; width: max-content; margin-top: .7rem; text-decoration: underline;
  text-underline-offset: 3px; text-decoration-color: var(--hair-2) }
.foot-social { display: flex; gap: .2rem; margin: .7rem 0 0 -8px; padding: 0; list-style: none }
.foot-addr .foot-social a { display: grid; place-items: center; width: 40px; height: 40px; margin: 0;
  color: var(--soft); text-decoration: none; border-radius: 6px; transition: color var(--dur-2) var(--ease) }
.foot-social svg { width: 22px; height: 22px; fill: currentColor }
.foot-addr .foot-social a:hover { color: var(--sig-ink) }
.foot-social a:focus-visible { outline: 2px solid var(--ink); outline-offset: 0 }
.foot-base { padding-block: 1.2rem 1.6rem; border-top: 1px solid var(--hair); font-size: .82rem }
@media (max-width: 860px) {
  .foot { grid-template-columns: 1fr 1fr }
  .foot-brand { grid-column: 1 / -1 }
}
@media (max-width: 520px) { .foot { grid-template-columns: 1fr } }

@media (prefers-reduced-motion: no-preference) {
  .hero h1, .hero .sub, .hero .acts, .hero figure { animation: set .62s var(--ease) both }
  .hero .sub { animation-delay: .07s }
  .hero .acts { animation-delay: .13s }
  .hero figure { animation-delay: .05s }
  @keyframes set { from { opacity: 0; transform: translateY(8px) } }

  @supports (animation-timeline: view()) {
    @keyframes nudge { from { transform: translateY(10px) } }
    .b { animation: nudge .5s var(--ease) both;
      animation-timeline: view(); animation-range: entry 4% cover 20% }
  }
}

@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr }

  .lvl .nm { display: none }
  .lvl button { min-height: 4.6rem; padding: 1rem .8rem; justify-content: center }
  .hero figure { aspect-ratio: 16 / 9 }
  .ben { grid-template-columns: repeat(2, 1fr) }
  .b, .b:nth-child(4), .b:nth-child(5) { grid-column: span 1 }
  .rail { grid-template-columns: 1fr 1fr }
}
@media (max-width: 680px) {
  .ben, .rail { grid-template-columns: 1fr }
  .lvl button { min-height: 3.6rem; padding: .8rem .2rem; align-items: center }
  .lvl .nm { display: none }
  .lvl .no { font-size: 1.3rem }
  .trl-band span { font-size: .86rem; min-height: 0; padding: .65rem .8rem }
  .trl-pop { grid-template-columns: 1fr }
  .trl-pop p, .trl-pop p.path { grid-column: 1; grid-row: auto }
}

/* ---- f-dark.css ---- */
:root {
  color-scheme: dark;
  --pap:    #06192F;
  --pan:    #0C2440;
  --sunk:   #041426;
  --ink:    #E8EFF6;
  --soft:   #93AAC0;
  --faint:  #8497A8;
  --hair:   #1C3A5C;
  --hair-2: #2B4B70;
  --sig:      #F47F22;
  --sig-ink:  #F79A55;
  --sig-disp: #F58A35;
  --sig-bg:   #F47F22;
  --sig-fill: #D2600E;
  --on-sig:   #FFFFFF;
  --lift:     #12304F;
}

:root { --pap-end: #020A15 }
html { background: var(--pap-end) }
body { background: linear-gradient(180deg, var(--pap) 0, #041224 45%, var(--pap-end) 100%) no-repeat;
  min-height: 100vh }

::selection { color: var(--on-sig) }

.hdr { box-shadow: 0 6px 20px -16px rgba(0,0,0,.7) }
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .hdr { border-color: color-mix(in srgb, var(--hair) 80%, transparent);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.06), 0 8px 26px -16px rgba(0,0,0,.7) }
  header.site.past .hdr { box-shadow: inset 0 1px 0 rgba(255,255,255,.06),
    0 14px 34px -18px rgba(0,0,0,.8) }
}
.scrim { background: rgba(2,10,20,.66) }

.pb, .pb b { color: #FFFFFF }
.pb { border-left-color: var(--hair-2) }

.act { color: var(--on-sig) }
.act:hover, .act:focus-visible { color: var(--pap); border-color: var(--ink) }
.act.ghost { color: var(--ink); border-color: color-mix(in srgb, var(--ink) 45%, transparent) }
.act.ghost:hover, .act.ghost:focus-visible { color: var(--pap); border-color: var(--ink) }

.hero figure::after { border-color: rgba(255,255,255,.16) }
.fa { border-color: rgba(255,255,255,.12);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.07), 0 26px 60px -30px rgba(0,0,0,.7) }
.fa-c, .fa-c:nth-child(n+3) { border-color: rgba(255,255,255,.08) }

.lvl button:hover { background: var(--lift); box-shadow: inset 0 -2px 0 var(--ink) }
.lvl button[aria-pressed="true"] { background: var(--lift); box-shadow: inset 0 -3px 0 var(--sig) }

.field [aria-invalid="true"] { border-color: #FF8A80 }
.field .err { color: #FF8A80 }

.contact-card iframe { filter: grayscale(1) invert(.9) contrast(.9) brightness(.9) }

.support .logos img { filter: brightness(0) invert(1); opacity: .62 }
.support .logos li:hover img { filter: brightness(0) invert(1); opacity: 1 }

/* ---- f2.css ---- */
:root {
  --grid: color-mix(in srgb, var(--ink) 13%, transparent);
  --gx: max(10px, calc(50% - 640px));
}

body::before, body::after { content: ""; position: fixed; top: 0; bottom: 0; width: 1px;
  background: var(--grid); pointer-events: none; z-index: 5 }
body::before { left: var(--gx) }
body::after { right: var(--gx) }
main > * { position: relative }
.band { overflow: visible }

main > * + *::before, main > * + *::after { content: ""; position: absolute; top: -6px;
  width: 11px; height: 11px; z-index: 6; pointer-events: none;
  background: linear-gradient(var(--sig), var(--sig)) center / 11px 1px no-repeat,
              linear-gradient(var(--sig), var(--sig)) center / 1px 11px no-repeat }
main > * + *::before { left: calc(var(--gx) - 5px) }
main > * + *::after { right: calc(var(--gx) - 5px) }
@media (max-width: 700px) {
  body::before, body::after, main > * + *::before, main > * + *::after { display: none }
}

.hero { overflow: hidden; border-bottom: 0; margin-top: calc(-1 * var(--hdr-h) - var(--float-gap)) }
.hero .wrap { grid-template-columns: minmax(0, 39rem); align-content: center;
  min-height: clamp(560px, 86vh, 800px);
  padding-block: calc(var(--hdr-h) + 3rem) clamp(2rem, 5vw, 3.6rem) }
.hero figure { position: absolute; inset: 0; aspect-ratio: auto; border: 0; border-radius: 0;
  background: var(--sunk); z-index: 0 }
.hero figure::after { content: none }
.hero figure img, .hero figure video { object-position: 70% 50% }

.hero::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(to right, rgba(6,25,47,.9), rgba(6,25,47,.6) 38%, rgba(6,25,47,.1) 70%, transparent),
              linear-gradient(to top, var(--pap), transparent 28%) }

.hero .wrap > div { position: relative; z-index: 2; text-shadow: 0 1px 24px rgba(4,16,31,.55) }
.hero .sub { color: var(--ink) }

.hero { padding-bottom: 0 }
.hero .wrap { padding-bottom: clamp(5rem, 8vw, 6.4rem) }
.fbar { margin-top: -2.2rem }

main > .fbar::before, main > .fbar::after { content: none }
@media (max-width: 1000px) {
  .hero .wrap { grid-template-columns: 1fr; min-height: 620px }
  .hero figure { aspect-ratio: auto }
  .hero::after { background: linear-gradient(to top, var(--pap) 8%, rgba(6,25,47,.7) 55%, rgba(6,25,47,.2)) }
}

@media (max-width: 560px) {
  .hero .wrap { min-height: 760px }
  .hero figure img, .hero figure video { object-position: 64% 0 }
}

.foot { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr) minmax(max-content, .9fr);
  padding-block: clamp(2rem, 4vw, 2.8rem) clamp(1.4rem, 3vw, 2rem) }
.foot-brand p { margin: .8rem 0 1.1rem }
.foot-base { padding-block: .9rem 1.1rem }
@media (max-width: 860px) { .foot { grid-template-columns: 1fr 1fr } }
@media (max-width: 520px) { .foot { grid-template-columns: 1fr } }