/* BACKPAICK · the footer. One black world: the FAQ, a hairline grid of categories, the lockup at full width,
   the legal bar. All type is white; hierarchy is weight and size. Hairlines do the structure. */
.fx{--hl:rgba(255,255,255,.22);background:var(--ink);color:#fff;position:relative}
.fx a{color:#fff}
.fx .eyebrow{color:#fff}
.fx p,.fx .fq-a{text-wrap:pretty}
.fx h2,.fx .fg-head{text-wrap:balance}
.fx :focus-visible{outline:2px solid var(--lime);outline-offset:3px;border-radius:4px}
.fx .lbl{font:700 11px/1 Inter;letter-spacing:.14em;text-transform:uppercase;color:#fff;display:block}

/* ---------- 08 · FAQ ---------- */
.fq{padding:clamp(72px,9vw,128px) 0 clamp(56px,7vw,96px);scroll-margin-top:var(--nav)}
.fq .kicker .rule{opacity:.28}
.fq h2{color:#fff}
.fq-intro{font:600 clamp(17px,1.5vw,21px)/1.3 Inter;letter-spacing:-.015em;max-width:40ch;margin-top:clamp(18px,2vw,26px)}
.fq-intro a{text-decoration:underline;text-underline-offset:3px}
.fq-body{display:grid;gap:0;margin-top:clamp(36px,5vw,64px);border-top:1px solid var(--hl)}
@media(min-width:900px){.fq-body{grid-template-columns:minmax(220px,300px) minmax(0,1fr)}}

.fq-cats{display:flex;flex-direction:column;padding:22px 0;gap:2px}
@media(min-width:900px){.fq-cats{border-right:1px solid var(--hl);padding:28px 28px 28px 0;position:sticky;top:calc(var(--nav) + 12px);align-self:start}}
.fq-cats button{display:flex;align-items:center;gap:12px;text-align:left;font:700 12px/1 Inter;letter-spacing:.14em;text-transform:uppercase;color:#fff;padding:12px 0;transition:padding .25s cubic-bezier(.2,.7,.2,1)}
.fq-cats button::before{content:"";width:9px;height:9px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #fff;flex:none;transition:background .2s,box-shadow .2s}
.fq-cats button:hover{padding-left:6px}
.fq-cats button[aria-pressed="true"]::before{background:var(--lime);box-shadow:none}
.fq-cats button[aria-pressed="true"] span{text-decoration:underline;text-decoration-thickness:1.5px;text-underline-offset:5px}
.fq-cats .n{margin-left:auto;font-style:normal;font-weight:500;letter-spacing:.04em;font-variant-numeric:tabular-nums}
@media(max-width:899px){
  .fq-cats{flex-direction:row;flex-wrap:wrap;gap:8px;border-bottom:1px solid var(--hl)}
  .fq-cats button{padding:10px 14px;border-radius:999px;box-shadow:inset 0 0 0 1px var(--hl);font-size:11px}
  .fq-cats button:hover{padding-left:14px}
  .fq-cats button[aria-pressed="true"]{box-shadow:inset 0 0 0 1px #fff}
  .fq-cats button[aria-pressed="true"] span{text-decoration:none}
  .fq-cats .n{display:none}
}

.fq-list{min-width:0}
@media(min-width:900px){.fq-list{padding-left:clamp(28px,4vw,64px)}}
.fq-cat-head{display:flex;align-items:baseline;gap:14px;padding:28px 0 6px}
.fq-cat-head .h3{color:#fff}
.fq-cat-head .serif{font-size:clamp(22px,2.6vw,30px);line-height:1}
.fq-item{border-bottom:1px solid var(--hl)}
.fq-item summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:minmax(0,1fr) 28px;gap:20px;align-items:center;padding:22px 0;font:600 clamp(18px,1.6vw,23px)/1.25 Inter;letter-spacing:-.02em}
.fq-item summary::-webkit-details-marker{display:none}
.fq-item summary i{width:28px;height:28px;border-radius:50%;box-shadow:inset 0 0 0 1.5px #fff;position:relative;transition:transform .3s cubic-bezier(.2,.7,.2,1),background .2s}
.fq-item summary i::before,.fq-item summary i::after{content:"";position:absolute;left:50%;top:50%;width:11px;height:1.5px;background:#fff;transform:translate(-50%,-50%)}
.fq-item summary i::after{transform:translate(-50%,-50%) rotate(90deg)}
.fq-item summary:hover i{background:rgba(255,255,255,.12)}
.fq-item[open] summary i{transform:rotate(45deg);background:var(--lime);box-shadow:none}
.fq-item[open] summary i::before,.fq-item[open] summary i::after{background:var(--cerulean)}
.fq-a{font:400 16.5px/1.55 Inter;max-width:62ch;padding:0 48px 26px 0}
.fq-a p+p{margin-top:12px}
.fq-a b{font-weight:700}
.fq-a a{text-decoration:underline;text-underline-offset:3px}
.fq-item[open] .fq-a{animation:fqin .35s ease both}
@keyframes fqin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
.fq-soon{display:inline-flex;align-items:center;gap:7px;vertical-align:.18em;margin-left:10px;font:700 10.5px/1 Inter;letter-spacing:.12em;text-transform:uppercase;background:var(--lime);color:var(--ink);border-radius:999px;padding:6px 10px}

/* ---------- the grid ---------- */
/* hairlines are box-shadows to the right and below each cell; the grid clips the ones that fall off its edge */
.fg{border-top:1px solid var(--hl);border-bottom:1px solid var(--hl)}
.fg-in{display:grid;grid-template-columns:1fr;clip-path:inset(0);box-shadow:inset 1px 0 0 var(--hl),inset -1px 0 0 var(--hl)}
.fg-cell{padding:clamp(20px,2vw,28px);min-width:0;display:flex;flex-direction:column;box-shadow:1px 0 0 var(--hl),0 1px 0 var(--hl)}
.fg-head{font:900 clamp(26px,2.6vw,38px)/.92 Inter;text-transform:uppercase;letter-spacing:-.045em}
.fg-head .serif{text-transform:none;letter-spacing:-.01em;font-size:1.08em}
.fg-links{list-style:none;display:grid;gap:12px;margin-top:22px}
.fg-links a{font:500 17px/1.2 Inter;letter-spacing:-.01em;display:inline-flex;align-items:center;gap:8px;background:linear-gradient(currentColor,currentColor) 0 100%/0 1.5px no-repeat;padding-bottom:3px;transition:background-size .3s cubic-bezier(.2,.7,.2,1)}
.fg-links a:hover{background-size:100% 1.5px}
.fg-links a[target]::after{content:"↗";font-size:.8em}
.fg-text{font:500 17px/1.35 Inter;letter-spacing:-.01em;margin-top:22px}
.fg-text+.fg-text{margin-top:10px}
.fg-text a{text-decoration:underline;text-underline-offset:3px;overflow-wrap:anywhere}
.fg-mail{overflow-wrap:normal}
.fg-split{padding:0}
.fg-split>div{padding:clamp(20px,2vw,28px)}
.fg-split>div+div{box-shadow:0 -1px 0 var(--hl)}
.fg-big{font:900 clamp(96px,10vw,170px)/.8 Inter;letter-spacing:-.06em;margin-top:18px}
.fg-big+.fg-text{margin-top:14px}
.fg-cell .btn{height:46px;padding:0 18px;font-size:14px}
.fg-cell .btn.violet{box-shadow:none}
.fg-push{margin-top:auto;padding-top:22px}
.fg-pill{display:inline-flex;align-items:center;gap:8px;align-self:flex-start;margin-top:18px;font:700 11px/1 Inter;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap;border-radius:999px;padding:8px 12px;box-shadow:inset 0 0 0 1px #fff}
.fg-pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--lime);animation:fgblink 2.4s ease-in-out infinite}
@keyframes fgblink{50%{opacity:.25}}
/* the subscribe field sits flush on the cell's bottom edge */
.fg-sub{padding-bottom:0}
.fg-sub .fg-text{margin-bottom:22px}
.fg-form{display:grid;grid-template-columns:minmax(0,1fr) 56px;margin:auto calc(-1*clamp(20px,2vw,28px)) 0;box-shadow:0 -1px 0 var(--hl)}
.fg-form input[type=email]{background:transparent;border:0;color:#fff;font:500 16px Inter;padding:18px clamp(20px,2vw,28px);min-width:0;-webkit-appearance:none;border-radius:0}
.fg-form input::placeholder{color:#fff;opacity:.6}
.fg-form input:focus{outline:none;background:rgba(255,255,255,.06)}
.fg-form button{box-shadow:-1px 0 0 var(--hl);color:#fff;font:500 20px Inter;transition:background .2s,color .2s}
.fg-form button:hover{background:var(--lime);color:var(--cerulean)}
.fg-form .hp{position:absolute;left:-9999px}
.fg-ok{font:600 15px/1.35 Inter;padding:18px clamp(20px,2vw,28px);margin:auto calc(-1*clamp(20px,2vw,28px)) 0;box-shadow:0 -1px 0 var(--hl);display:none}
.fg-ok::before{content:"✓ ";color:var(--lime)}
.fg-sub.sent .fg-form{display:none}.fg-sub.sent .fg-ok{display:block}

/* 2 across on phones: the headline, the subscribe field and the funding cell take a full row */
@media(min-width:520px){
  .fg-in{grid-template-columns:1fr 1fr}
  .fg-wide,.fg-sub,.fg-fund{grid-column:1/-1}
}
/* 4 across on tablets and small laptops: headline row, then links + the 10, then the four small cells */
@media(min-width:780px){
  .fg-in{grid-template-columns:repeat(4,minmax(0,1fr))}
  .fg-sub,.fg-fund{grid-column:auto}
  .fg-cell{min-height:220px}
  .fg-wide{min-height:0}
}
/* 5 across from 1200: the headline sits in the first column and the 10 runs two rows tall */
@media(min-width:1200px){
  .fg-in{grid-template-columns:1.5fr 1fr 1fr 1fr 1.15fr}
  .fg-wide{grid-column:auto;min-height:250px}
  .fg-cell{min-height:250px}
  .fg-tall{grid-column:5;grid-row:1/span 2}
}

/* ---------- the lockup, full width, inside a ruler ---------- */
.fw{position:relative;padding:clamp(28px,4vw,56px) 0}
.fw-frame{position:relative;padding:clamp(26px,3.4vw,52px) clamp(12px,2vw,28px)}
.fw-frame::before,.fw-frame::after{content:"";position:absolute;left:clamp(26px,3vw,40px);right:clamp(26px,3vw,40px);height:10px;opacity:.5;
  background:repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 10px) 0 100%/100% 5px no-repeat,repeating-linear-gradient(90deg,#fff 0 1px,transparent 1px 100px) 0 100%/100% 10px no-repeat}
.fw-frame::before{top:0}
.fw-frame::after{bottom:0;transform:scaleY(-1)}
.fw-plus{position:absolute;width:14px;height:14px}
.fw-plus::before,.fw-plus::after{content:"";position:absolute;background:#fff;left:50%;top:50%}
.fw-plus::before{width:14px;height:1px;transform:translate(-50%,-50%)}
.fw-plus::after{width:1px;height:14px;transform:translate(-50%,-50%)}
.fw-plus.tl{left:0;top:-2px}.fw-plus.tr{right:0;top:-2px}.fw-plus.bl{left:0;bottom:-2px}.fw-plus.br{right:0;bottom:-2px}
.fw-svg{display:block;width:100%;height:auto;overflow:visible}
.fw-guides line{stroke:#fff;stroke-opacity:.26;stroke-width:1;vector-effect:non-scaling-stroke;stroke-dasharray:4 6}
.fw-word path{fill:#fff;stroke:#fff;stroke-width:var(--sw,6);stroke-opacity:0;stroke-dasharray:1;stroke-dashoffset:0}
.fw-pk{transform-box:fill-box;transform-origin:50% 4%}
/* on first sight: the letters draw as outlines (construction), fill solid, then the outline lets go; the pack drops in and settles */
.fw.armed .fw-word path{fill:transparent;stroke-opacity:1;stroke-dashoffset:1}
.fw.armed .fw-pk{opacity:0;transform:translateY(-6%) rotate(-8deg)}
.fw.armed .fw-guides line{stroke-opacity:0}
.fw.in .fw-word path{fill:#fff;stroke-opacity:0;stroke-dashoffset:0;transition:stroke-dashoffset 1.5s cubic-bezier(.45,.05,.25,1),fill .6s ease 1.25s,stroke-opacity .5s ease 1.85s}
.fw.in .fw-word path:nth-child(2){transition-delay:0.07s,1.32s,1.92s}
.fw.in .fw-word path:nth-child(3){transition-delay:0.14s,1.39s,1.99s}
.fw.in .fw-word path:nth-child(4){transition-delay:0.21s,1.46s,2.06s}
.fw.in .fw-word path:nth-child(5){transition-delay:0.28s,1.53s,2.13s}
.fw.in .fw-word path:nth-child(6){transition-delay:0.35s,1.60s,2.20s}
.fw.in .fw-word path:nth-child(7){transition-delay:0.42s,1.67s,2.27s}
.fw.in .fw-word path:nth-child(8){transition-delay:0.49s,1.74s,2.34s}
.fw.in .fw-word path:nth-child(9){transition-delay:0.56s,1.81s,2.41s}
.fw.in .fw-pk{opacity:1;transition:opacity .4s ease 1.5s;animation:fwdrop 1.6s cubic-bezier(.2,.7,.2,1) 1.5s both}
.fw.in .fw-guides line{stroke-opacity:.26;transition:stroke-opacity .8s ease}
@keyframes fwdrop{0%{transform:translateY(-6%) rotate(-8deg)}45%{transform:translateY(0) rotate(5deg)}70%{transform:rotate(-2.5deg)}100%{transform:rotate(0)}}
.fw:hover .fw-pk{animation:fwswing 1.6s ease-in-out both}
@keyframes fwswing{0%,100%{transform:rotate(0)}30%{transform:rotate(6deg)}65%{transform:rotate(-4deg)}}
@media(prefers-reduced-motion:reduce){.fw.armed .fw-word path{fill:#fff;stroke-opacity:0;stroke-dashoffset:0}.fw.armed .fw-pk{opacity:1;transform:none}.fw .fw-pk{animation:none!important}.fg-pill::before{animation:none}}

/* ---------- credits + legal bar ---------- */
.fc{font:500 12px/1.5 Inter;letter-spacing:.01em;padding:0 0 18px}
.fb{border-top:1px solid var(--hl)}
.fb-in{display:flex;flex-wrap:wrap;align-items:stretch;justify-content:space-between}
.fb-legal{font:600 11px/1.5 Inter;letter-spacing:.1em;text-transform:uppercase;padding:18px 0;margin-right:24px}
.fb-legal a{text-decoration:underline;text-underline-offset:3px}
.fb-links{display:flex;flex-wrap:wrap}
.fb-links a{display:flex;align-items:center;font:500 15px Inter;padding:16px clamp(16px,2vw,26px);border-left:1px solid var(--hl);transition:background .2s,color .2s}
.fb-links a:hover{background:#fff;color:var(--ink)}
@media(max-width:640px){
  .fb-in{flex-direction:column}
  .fb-links{border-top:1px solid var(--hl);margin:0 calc(-1*var(--gut))}
  .fb-links a{flex:1;justify-content:center;padding:16px 10px}
  .fb-links a:first-child{border-left:0}
}

/* palette v4: the "Soon" pill is a pair, the dots are Light Lime on black */
.fq-soon{background:var(--lime);color:var(--cerulean)}
