/* footer.css — giga's footer, measured. Sources: frames/measure/styles-{1440,390}.json §footer,
   TOKENS.md §4 "Footer", raw/index.html utility classes. giga breakpoints: news-tablet=810,
   nav grid switches at 1100, 1680 narrows the gutter. */

.ft{position:relative;isolation:isolate;overflow:hidden;background:var(--footer-surface);color:var(--fg);z-index:10}
/* the three hairlines are all foreground/10 with the same 6%/94% edge mask */
.ft-rule{height:1px;width:100%;background:rgba(255,255,255,.1);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.ft-rule-top{position:absolute;inset-inline:0;top:0}

/* content box: 390 -> margin 0 8px / pad 64 8 44 ; >=810 -> mx auto / pad 80 44 44 ; >=1680 pad-x 20 */
.ft-inner{display:flex;flex-direction:column;margin:0 8px;max-width:var(--container-nav);padding:64px 8px 44px}
@media (min-width:810px){.ft-inner{margin-inline:auto;padding:80px 44px 44px}}
@media (min-width:1680px){.ft-inner{padding-left:20px;padding-right:20px}}

.ft-grid{display:grid;grid-template-columns:1fr;row-gap:48px}
@media (min-width:1100px){.ft-grid{grid-template-columns:repeat(12,minmax(0,1fr));column-gap:32px}}

/* ---- brand column (3 of 12) ---- */
.ft-brand{display:flex;flex-direction:column;gap:32px}
@media (min-width:1100px){.ft-brand{grid-column:span 3}}
.ft-logo{display:inline-flex;align-items:center;gap:8px;width:-moz-fit-content;width:fit-content;color:var(--fg);transition:color .3s cubic-bezier(0,0,.2,1)}
.ft-logo-mark{display:inline-flex}
.ft-logo-mark img{height:22px;width:auto}
.ft-logo-word{font-family:var(--font-sans);font-size:24px;font-weight:500;line-height:1;letter-spacing:normal}
.ft-logo-nb{white-space:nowrap}
.ft-l{display:inline-block}
/* wordmark letter-in — the footer reuses the header lockup, so it reuses its entrance.
   Curves and delays are JS-RECON §4.3 verbatim: 0.28s, cubic-bezier(.22,1,.36,1), flat 35ms
   stagger, fill both, 2px settle; the mark fades over 0.28s cubic-bezier(0,0,.2,1). Keyframes are re-declared
   here rather than borrowed from header.css so this file stands on its own. */
@keyframes ft-mark-in{0%{opacity:0}to{opacity:1}}
@keyframes ft-letter-in{0%{opacity:0;transform:translateY(2px)}to{opacity:1;transform:translateY(0)}}
.ft-logo-mark{animation:.28s cubic-bezier(0,0,.2,1) both ft-mark-in}
.ft-l{animation:.28s var(--ease-letter) both ft-letter-in}
.ft-l:nth-child(2){animation-delay:35ms}
.ft-l:nth-child(3){animation-delay:70ms}
.ft-l:nth-child(4){animation-delay:105ms}

/* guarantee badges (giga: the compliance row) */
.ft-badges{display:flex;flex-direction:column;gap:14px}
.ft-badge-eye{display:inline-flex;align-items:center;gap:10px}
.ft-badge-dot-wrap{position:relative;display:inline-flex;width:8px;height:8px;align-items:center;justify-content:center}
.ft-badge-dot{width:8px;height:8px;border-radius:2px;background:var(--accent);box-shadow:0 0 4px 0 var(--pulse-accent);--pulse-color:var(--pulse-accent);animation:pulse-dot-colored 2s ease-out infinite}
.ft-badge-eye-label{font-family:var(--font-mono);font-size:11px;line-height:1;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:rgba(255,255,255,.5)}
.ft-badge-row{display:flex;align-items:center;gap:10px}
.ft-badge{position:relative;display:block}
.ft-badge-disc{position:relative;display:block;width:40px;height:40px;border-radius:var(--radius-full);background:rgba(255,255,255,.07);color:rgba(255,255,255,.85)}
.ft-badge-disc svg{position:absolute;inset:0;width:100%;height:100%}
.ft-badge-more{position:relative;display:flex;width:40px;height:40px;align-items:center;justify-content:center;border-radius:var(--radius-full);background:rgba(255,255,255,.04)}
.ft-badge-more-label{font-family:var(--font-mono);font-size:11px;line-height:1;letter-spacing:var(--tracking-eyebrow);color:rgba(255,255,255,.5)}

/* tooltip card: 205px, r10, surface-raised, translateY(4px) scale(.98) -> 0/1 over 200ms cubic-bezier(0,0,.2,1) */
.ft-tip{pointer-events:none;position:absolute;bottom:100%;left:0;z-index:10;margin-bottom:12px;display:flex;flex-direction:column;gap:10px;width:205px;border-radius:var(--radius-menu);background:var(--surface-raised);padding:10px;opacity:0;transform:translateY(4px) scale(.98);transform-origin:bottom left;box-shadow:0 10px 28px rgba(0,0,0,.18);transition:opacity .2s cubic-bezier(0,0,.2,1),transform .2s cubic-bezier(0,0,.2,1)}
.ft-badge:hover .ft-tip,.ft-badge:focus-visible .ft-tip,.ft-badge-more:hover .ft-tip,.ft-badge-more:focus-visible .ft-tip{opacity:1;transform:translateY(0) scale(1)}
.ft-tip-t{font-size:12px;font-weight:500;line-height:12px;color:var(--fg)}
.ft-tip-rule{height:1px;width:100%;background:rgba(255,255,255,.1);
  -webkit-mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent);
  mask-image:linear-gradient(to right,transparent,#000 6%,#000 94%,transparent)}
.ft-tip-d{font-size:12px;line-height:16.5px;color:rgba(255,255,255,.55)}

.ft-social{display:flex;align-items:center;gap:20px;color:var(--fg)}
.ft-social-link{display:inline-flex;align-items:center}
.ft-social-sep{height:18px;width:1px;background:rgba(255,255,255,.15)}

/* ---- link grid (9 of 12; 2 cols below 1100, 5 cols above, Industries spans 2) ---- */
.ft-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px;row-gap:40px}
@media (min-width:1100px){.ft-nav{grid-column:span 9;grid-template-columns:repeat(5,minmax(0,1fr));row-gap:0}}
.ft-col{display:flex;flex-direction:column}
@media (min-width:1100px){.ft-col-wide{grid-column:span 2}}
.ft-col-head{font-family:var(--font-mono);font-size:12px;font-weight:500;line-height:16px;letter-spacing:var(--tracking-eyebrow);text-transform:uppercase;color:rgba(255,255,255,.55)}
.ft-col-body{margin-top:12px}
.ft-col-body ul{display:flex;flex-direction:column}
.ft-col-body li{display:flex}
.ft-col-split{display:grid;grid-template-columns:1fr}
@media (min-width:1100px){.ft-col-split{grid-template-columns:repeat(2,minmax(0,1fr));column-gap:32px}}
.ft-link{display:flex;width:100%;align-items:center;padding:8px 0;font-family:var(--font-sans);font-size:14px;line-height:14px;color:var(--fg)}

/* ---- legal row ---- */
.ft-bottom{margin-top:64px}
@media (min-width:810px){.ft-bottom{margin-top:80px}}
.ft-legal-row{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px;row-gap:12px;padding-top:24px}
.ft-legal{display:flex;flex-wrap:wrap;align-items:center;column-gap:24px;row-gap:12px}
.ft-legal a{padding:4px 0;font-size:12px;line-height:16px;color:var(--fg)}
.ft-copyright{margin-left:auto;flex-shrink:0;font-size:12px;line-height:16px;color:rgba(255,255,255,.5)}

/* ---- hover-dim (JS-RECON §8.3: group-has-[:is(a,button):hover]/menu:opacity-40 + hover:opacity-100!) ---- */
.ft-menu :is(a,button){opacity:1;transition:opacity .2s cubic-bezier(0,0,.2,1)}
.ft-menu:has(:is(a,button):hover) :is(a,button){opacity:.4}
/* the dim rule scores (0,2,2) because :has() inherits its argument's specificity, so the
   un-dim rule has to re-state the :has() compound to win. */
.ft-menu :is(a,button):is(:hover,:focus-visible){opacity:1}
.ft-menu:has(:is(a,button):hover) :is(a,button):is(:hover,:focus-visible){opacity:1}

/* ---- footer-reveal panel (JS-RECON §6.4) ---- */
.fr{pointer-events:none;position:fixed;inset-inline:0;bottom:0;z-index:5;height:0;overflow:hidden;background:#050506}
.fr-canvas{position:absolute;inset-inline:0;bottom:0;display:block;height:100vh;width:100%;font-family:var(--font-sans);color:#eeece6}
.fr-vignette{position:absolute;inset:0;background:radial-gradient(120% 130% at 50% 100%,transparent 46%,rgba(0,0,0,.5) 100%)}

@media (prefers-reduced-motion:reduce){
  .ft-badge-dot{animation:none}
  .ft-logo-mark,.ft-l{animation:none}
  .ft-tip{transition:none}
  .ft-menu :is(a,button){transition:none}
}