/* FAQ landing, level 2.
   Layout: three full-width horizontal bands stacked in a column; heading left, article list right.
   Memorable thing: each field holds one of the project's virus renders that drifts and leans toward the cursor.
   Motion: one load sequence (headline lines rise out of a mask, then search, then panels settle in);
   after that only motion that answers an action. Everything is switched off under reduced motion. */
.faq-index{
  --fx-ink:#002c4f;
  --fx-text:#244b69;
  --fx-mint:#6cd6b2;
  --fx-blue:#3158c9;
  --fx-navy:#002c4f;
  --fx-ease:cubic-bezier(.16,1,.3,1);
}
.faq-index [hidden]{display:none!important}

.fx-main{position:relative;z-index:1;flex:1 0 auto;width:min(100%,1096px);margin:0 auto;padding:clamp(64px,8vw,112px) 48px clamp(88px,10vw,140px)}

/* ---------- Load sequence ---------- */
@keyframes fx-rise{from{transform:translate3d(0,112%,0)}to{transform:translate3d(0,0,0)}}
@keyframes fx-fade{from{opacity:0;transform:translate3d(0,12px,0)}to{opacity:1;transform:translate3d(0,0,0)}}
@keyframes fx-settle{from{opacity:0;transform:translate3d(0,40px,0) scale(.985)}to{opacity:1;transform:translate3d(0,0,0) scale(1)}}

/* ---------- Hero ---------- */
.fx-hero{max-width:860px}
.faq-index .fx-title{font-size:clamp(50px,7.4vw,104px);line-height:1;letter-spacing:-.055em;margin:0 0 clamp(22px,2.4vw,32px);color:var(--fx-ink)}
/* the padding and negative margin keep descenders (j, p) from being clipped by the mask */
.fx-line{display:block;white-space:nowrap;overflow:hidden;padding:.06em 0 .14em;margin:-.06em 0 -.14em}
.fx-line>span{display:inline-block;animation:fx-rise 1.25s var(--fx-ease) both;animation-delay:calc(.12s + var(--i,0) * .1s)}
.fx-lead{font-size:clamp(18px,1.7vw,21px);line-height:1.6;font-weight:500;color:var(--fx-text);margin:0;max-width:34em;text-wrap:pretty;animation:fx-fade 1s var(--fx-ease) .55s both}

/* ---------- Search ---------- */
.fx-search{margin:clamp(28px,3.4vw,40px) 0 0;max-width:660px;animation:fx-fade 1s var(--fx-ease) .7s both}
.fx-field{position:relative;display:flex;align-items:center;height:64px;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border:1.5px solid rgba(0,44,79,.12);border-radius:999px;box-shadow:0 1px 0 #fff inset,0 18px 40px -18px rgba(25,64,99,.28);transition:border-color .3s ease,box-shadow .4s var(--fx-ease),transform .4s var(--fx-ease)}
.fx-field:hover{border-color:rgba(0,44,79,.24)}
.fx-field:focus-within{border-color:var(--fx-blue);transform:translateY(-1px);box-shadow:0 0 0 5px rgba(75,119,255,.2),0 22px 44px -18px rgba(25,64,99,.34)}
.fx-glass{position:absolute;left:24px;color:var(--fx-text);pointer-events:none;transition:color .3s ease}
.fx-field:focus-within .fx-glass{color:var(--fx-blue)}
.fx-field input{flex:1;min-width:0;height:100%;border:0;background:transparent;border-radius:999px;padding:0 64px 0 58px;font:500 18px/1 Inter,Arial,sans-serif;color:var(--fx-ink);outline:none;-webkit-appearance:none;appearance:none}
.fx-field input::placeholder{color:#5c7d96;opacity:1}
.fx-field input::-webkit-search-cancel-button{display:none}
.fx-key{position:absolute;right:20px;display:grid;place-items:center;width:28px;height:28px;border:1.5px solid rgba(0,44,79,.18);border-radius:9px;font:600 13px/1 Inter,Arial,sans-serif;color:#5c7d96;pointer-events:none;transition:opacity .2s ease}
.fx-field input:focus~.fx-key,.fx-field input:not(:placeholder-shown)~.fx-key{opacity:0}
.fx-clear{position:absolute;right:11px;width:42px;height:42px;display:grid;place-items:center;border:0;border-radius:50%;background:transparent;color:var(--fx-text);cursor:pointer;transition:background .2s ease,color .2s ease}
.fx-clear:hover{background:#dcebfa;color:var(--fx-ink)}
.fx-clear:focus-visible{outline:3px solid var(--fx-blue);outline-offset:1px}

.fx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fx-chip{padding:10px 17px;border:1.5px solid rgba(0,44,79,.14);border-radius:999px;background:rgba(255,255,255,.5);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--fx-ink);font:500 14px/1 Inter,Arial,sans-serif;cursor:pointer;transition:background .25s ease,border-color .25s ease,color .25s ease,transform .35s var(--fx-ease)}
.fx-chip:hover{background:#fff;border-color:rgba(0,44,79,.38);transform:translateY(-2px)}
.fx-chip[aria-pressed=true]{background:var(--fx-ink);border-color:var(--fx-ink);color:#fff}
.fx-chip:focus-visible{outline:3px solid var(--fx-blue);outline-offset:3px}
.fx-status{min-height:1.6em;margin:14px 4px 0;font-size:14px;line-height:1.6;font-weight:500;color:var(--fx-text)}

/* ---------- Bento ---------- */
.fx-panels{display:grid;grid-template-columns:minmax(0,1fr);gap:20px;margin-top:clamp(40px,5.4vw,72px)}
.fx-mint{--i:0;view-transition-name:fx-mint}
.fx-blue{--i:1;view-transition-name:fx-blue}
.fx-navy{--i:2;view-transition-name:fx-navy}
.fx-empty{view-transition-name:fx-empty}

.fx-panel{
  scroll-margin-top:24px;
  --bg:linear-gradient(158deg,#7fe2c1 0%,#62d0ac 100%);--fg:var(--fx-ink);--rule:rgba(0,44,79,.22);--chip:rgba(0,44,79,.1);
  --spot:rgba(255,255,255,.5);--shadow:rgba(30,120,100,.55);--mark-bg:#fff;--mark-fg:var(--fx-ink);
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8M6.5 2.5 10 6 6.5 9.5' fill='none' stroke='%23002c4f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8M6.5 2.5 10 6 6.5 9.5' fill='none' stroke='%236cd6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ext:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5 8.5 3.5M4 3.5h4.5V8' fill='none' stroke='%23002c4f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ext-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5 8.5 3.5M4 3.5h4.5V8' fill='none' stroke='%236cd6b2' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  position:relative;isolation:isolate;overflow:hidden;display:grid;grid-template-columns:minmax(0,.72fr) minmax(0,1.28fr);align-items:start;column-gap:clamp(32px,4vw,52px);
  padding:clamp(32px,4vw,52px) clamp(84px,10vw,124px) clamp(32px,4vw,52px) clamp(32px,4vw,52px);border-radius:36px;background:var(--bg);color:var(--fg);
  box-shadow:0 1px 0 rgba(255,255,255,.4) inset,0 36px 60px -36px var(--shadow);
  animation:fx-settle 1.2s var(--fx-ease) both;animation-delay:calc(.85s + var(--i,0) * .13s)
}
.fx-blue{
  --bg:linear-gradient(160deg,#3e69de 0%,#2b4db9 100%);--fg:#fff;--rule:rgba(255,255,255,.28);--chip:rgba(255,255,255,.17);
  --spot:rgba(150,190,255,.42);--shadow:rgba(30,60,160,.6);--mark-fg:#16306e;
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8M6.5 2.5 10 6 6.5 9.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8M6.5 2.5 10 6 6.5 9.5' fill='none' stroke='%232b4db9' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
}
.fx-navy{
  --bg:linear-gradient(160deg,#0a3b64 0%,#00233f 100%);--fg:#fff;--rule:rgba(255,255,255,.24);--chip:rgba(255,255,255,.15);
  --spot:rgba(70,150,230,.34);--shadow:rgba(0,35,63,.7);--mark-bg:var(--fx-mint);
  --arrow:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8M6.5 2.5 10 6 6.5 9.5' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --arrow-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2 6h8M6.5 2.5 10 6 6.5 9.5' fill='none' stroke='%2300233f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ext:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5 8.5 3.5M4 3.5h4.5V8' fill='none' stroke='%23fff' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  --ext-on:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M3.5 8.5 8.5 3.5M4 3.5h4.5V8' fill='none' stroke='%2300233f' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")
}

/* light that follows the pointer (position is set by faq-motion.js) */
.fx-panel::before{content:"";position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(560px circle at var(--mx,78%) var(--my,0%),var(--spot),transparent 62%);opacity:.5;transition:opacity .6s ease}
.fx-panel:hover::before,.fx-panel:focus-within::before{opacity:1}

/* the virus: the same 3D model as the home page, drawn into a canvas that bleeds off the right edge of each band.
   --v is the virus' own width; the canvas is larger so its spikes are never cut off by the canvas itself */
.fx-art{--v:330px;--size:calc(var(--v) * 1.7);--out:62px;position:absolute;z-index:-1;pointer-events:none;display:grid;place-items:center;
  width:var(--size);right:calc(-1 * (var(--out) + var(--size) / 2));top:50%;margin-top:calc(var(--size) / -2);
  transform:translate3d(calc(var(--px,0) * -18px),calc(var(--py,0) * -14px),0);transition:transform 1.1s var(--fx-ease)}
.fx-art img{grid-area:1/1;display:block;width:var(--v);height:auto;animation:fx-drift 16s ease-in-out infinite alternate}
.fx-art canvas{grid-area:1/1;display:block;width:100%;height:auto;aspect-ratio:1}
.fx-art.has-3d img{display:none}
@keyframes fx-drift{from{transform:translate3d(0,-10px,0) rotate(-4deg)}to{transform:translate3d(0,12px,0) rotate(5deg)}}
.fx-mint .fx-art{top:46%}
.fx-blue .fx-art{--v:350px;--out:70px;top:54%}
.fx-navy .fx-art{top:48%}

/* ---------- Panel content ---------- */
.fx-head{align-self:start}
.faq-index .fx-panel h2{margin:0 0 18px;font-size:clamp(38px,3.9vw,54px);line-height:1.02;letter-spacing:-.05em;color:inherit}
.fx-desc{margin:0 0 22px;max-width:21em;font-size:16px;line-height:1.65}
.fx-count{display:inline-block;margin:0;padding:7px 15px;border-radius:999px;background:var(--chip);font-size:14px;line-height:1.4;font-weight:600}

.fx-list{list-style:none;margin:0;padding:0;columns:2;column-gap:clamp(24px,3.4vw,48px)}
.fx-list li{break-inside:avoid}
.fx-list a{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:15px 0;border-bottom:1px solid var(--rule);color:inherit;font:500 17px/1.35 Inter,Arial,sans-serif}
/* the last row of each column needs no rule under it (faq-motion.js marks them, because columns and search change which row that is) */
.fx-list li.fx-last a{border-bottom:0}
.fx-list .fx-label{transition:transform .5s var(--fx-ease)}
.fx-list a:hover .fx-label,.fx-list a:focus-visible .fx-label{transform:translateX(7px)}
.fx-list a::after{content:"";flex:none;width:30px;height:30px;border-radius:50%;background:var(--chip) var(--arrow) center/42% no-repeat;transition:background-color .3s ease,transform .5s var(--fx-ease)}
.fx-list a.fx-ext::after{background-image:var(--ext)}
.fx-list a:hover::after,.fx-list a:focus-visible::after{background-color:var(--fg);background-image:var(--arrow-on);transform:scale(1.08)}
.fx-list a.fx-ext:hover::after,.fx-list a.fx-ext:focus-visible::after{background-image:var(--ext-on)}
.fx-panel a:focus-visible{outline:3px solid currentColor;outline-offset:4px;border-radius:6px}
.fx-label mark{background:var(--mark-bg);color:var(--mark-fg);border-radius:4px;padding:1px 3px;margin:0 -3px}
.fx-sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}

/* ---------- Empty search ---------- */
.fx-empty{padding:clamp(28px,4vw,44px);border:2px dashed rgba(0,44,79,.22);border-radius:36px;color:var(--fx-text);font-size:16px;line-height:1.65}
.fx-empty p{margin:0 0 6px}
.faq-index .fx-empty .fx-empty-title{font:600 clamp(24px,3vw,32px)/1.2 'DM Sans',Inter,Arial,sans-serif;letter-spacing:-.035em;color:var(--fx-ink);margin-bottom:10px}
.fx-reset{margin-top:16px;padding:14px 24px;border:0;border-radius:999px;background:var(--fx-ink);color:#fff;font:600 15px/1 Inter,Arial,sans-serif;cursor:pointer;transition:background .25s ease,transform .35s var(--fx-ease)}
.fx-reset:hover{background:#0d4a7a;transform:translateY(-2px)}
.fx-reset:focus-visible{outline:3px solid var(--fx-blue);outline-offset:3px}

/* ---------- View transitions: panels morph when the search changes the layout ---------- */
::view-transition-group(*){animation-duration:.65s;animation-timing-function:cubic-bezier(.16,1,.3,1)}
::view-transition-old(fx-mint),::view-transition-new(fx-mint),
::view-transition-old(fx-blue),::view-transition-new(fx-blue),
::view-transition-old(fx-navy),::view-transition-new(fx-navy){width:100%;height:100%;object-fit:cover;object-position:top left}
::view-transition-old(root),::view-transition-new(root){animation-duration:.01s}

/* ---------- Responsive ---------- */
@media(max-width:1060px){
  .fx-panel{grid-template-columns:minmax(0,1fr);row-gap:clamp(26px,3vw,36px);padding:clamp(28px,3.8vw,44px)}
  .fx-art,.fx-mint .fx-art,.fx-blue .fx-art,.fx-navy .fx-art{--v:230px;--out:-24px;top:34px}
}
@media(max-width:760px){
  .fx-line{white-space:normal}
  .fx-main{padding-left:20px;padding-right:20px}
  .fx-field{height:58px}
  .fx-field input{font-size:16px;padding-left:54px}
  .fx-key{display:none}
  .fx-panels{gap:22px}
  .fx-panel{padding:40px 30px 26px;border-radius:32px;row-gap:30px}
  .fx-list{columns:1}
  .faq-index .fx-panel h2{font-size:clamp(40px,11.5vw,50px);margin-bottom:16px}
  .fx-desc{max-width:none;margin-bottom:24px;line-height:1.7}
  .fx-list a{padding:18px 0;font-size:17px;gap:16px}
  .fx-art,.fx-mint .fx-art,.fx-blue .fx-art,.fx-navy .fx-art{--v:190px;--out:-14px;top:20px;opacity:.85}
  .fx-list a::after{width:30px;height:30px}
}

/* ---------- Reduced motion: everything is at rest ---------- */
@media(prefers-reduced-motion:reduce){
  .fx-line>span,.fx-lead,.fx-search,.fx-panel,.fx-art img{animation:none}
  .fx-art,.fx-field,.fx-chip,.fx-list .fx-label,.fx-list a::after,.fx-panel::before,.fx-reset{transition:none}
  .fx-list a:hover .fx-label,.fx-list a:focus-visible .fx-label,.fx-chip:hover,.fx-reset:hover,.fx-field:focus-within{transform:none}
  ::view-transition-group(*),::view-transition-old(*),::view-transition-new(*){animation:none!important}
}