/* Hero capture plate — the only addition to the live landing page.

   Everything below is scoped to .fk-capture*. No existing selector is
   overridden, and all colour comes from the site's own tokens in
   colors_and_type.css, so this drops into the current design as-is. */

/* -- hero proportions ------------------------------------------------------
   Give the capture more of the row: it is the proof, and the copy reads fine
   narrower. The plate also breaks the container's right gutter so it runs
   toward the edge, which reads as a viewport rather than a card.
   The copy column is capped in ch, so it holds its measure in both
   languages while the media absorbs the extra width. */
@media(min-width:881px){
  .fk-hero__grid{grid-template-columns:minmax(0,0.94fr) minmax(0,1.16fr);}
  /* The headline must hold ONE line in both languages: a second line in
     Spanish pushed every section below it down. EN "Movement, measured." and
     ES "Movimiento, medido." are both 19 characters, so one measure serves
     both — the column is sized to the headline and the body copy is capped
     separately so it keeps a readable measure. */
  .fk-hero__copy{max-width:none;}
  /* No `nowrap`: at 56px the Spanish line overflowed its column by 85px, and
     any size that never overflows at narrow desktop is too small at wide.
     Because both headlines are exactly 19 characters they wrap identically,
     so parity holds either way — this size simply lands on one row wherever
     there is room, and wraps in both languages together when there isn't. */
  .fk-hero h1{font-size:clamp(34px,2.6vw,46px);}
  .fk-hero__sub{max-width:36ch;}
}

.fk-capture-study{
  position:relative;width:100%;
  display:flex;flex-direction:column;gap:12px;
}

.fk-capture{
  position:relative;width:100%;aspect-ratio:16/9;overflow:hidden;
  border-radius:var(--r-lg);
  background:#0b1b2e;                 /* matches the clip's graded black point */
  border:1px solid var(--line);
  box-shadow:var(--elev-2);
  z-index:1;
}
/* p5.brush arcs sweeping behind the plate — the same dry-media language as the
   artwork, drawn for this slot rather than cropped from a social piece. */
.fk-hero__framewrap{position:relative;isolation:isolate;}
/* The host reaches well past the plate on every side, or the arcs are simply
   hidden underneath it.

   The canvas is backed opaquely (a transparent one produced the pale cutout
   fringes noted in the art direction guide), but the hero carries a radial
   gradient, so a flat fill shows its rectangle as a seam. Dissolving the
   host's own edges with a mask keeps the opaque backing where the marks are
   and removes the boundary. */
/* The sweep spans the whole hero and sits under its content. Anything scoped
   to the media column is simply hidden behind the video. */
.fk-hero{position:relative;isolation:isolate;overflow:hidden;}
.fk-hero>.fk-container{position:relative;z-index:1;}
.fk-capture-arcs{position:absolute;inset:0;z-index:0;pointer-events:none;}
/* Edge dissolve only — text holes are punched on the canvas. A data-URL
   CSS mask was blank in Helium, and hiding until measure delayed first paint. */
.fk-capture-arcs{
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 94%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 7%,#000 94%,transparent);
}
.fk-capture-arcs canvas{display:block;width:100%;height:100%;}
@media(max-width:880px){.fk-capture-arcs{display:none;}}

/* Pricing: behind the page, full wrap, never in the stacking layer of the cards. */
.fk-wrap[data-capture-arcs]>.fk-capture-arcs{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  /* Side dissolve around a ~1280px core (the cards plus a little field).
     On ultrawide the fade starts far from the bezel, so the outer glow
     stays plain instead of carrying the pattern to the edges. */
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 max(10%,calc(50% - 640px)),#000 min(90%,calc(50% + 640px)),transparent);
  mask-image:linear-gradient(90deg,transparent,#000 max(10%,calc(50% - 640px)),#000 min(90%,calc(50% + 640px)),transparent);
}
.fk-wrap[data-capture-arcs] .fk-pricing{
  min-height:calc(100svh - 64px);
  box-sizing:border-box;
}
.fk-wrap[data-capture-arcs] .fk-pricing__hero,
.fk-wrap[data-capture-arcs] .fk-pricing__balance,
.fk-wrap[data-capture-arcs] .fk-pricing__footnotes,
.fk-wrap[data-capture-arcs] .fk-pricing__status{
  /* Cards glow must not sit on top of the copy above/below the plates. */
  position:relative;
  z-index:1;
}
.fk-wrap[data-capture-arcs] .fk-pricing__cards{
  /* Fade lives on the pair, not on each plate — a per-card ink shadow from
     Member sat on top of Starter's right rim and ate the stroke. Nested
     relative is fine here (the drawer trap is wrap *siblings* only). */
  isolation:isolate;
  position:relative;
}
.fk-wrap[data-capture-arcs] .fk-pricing__cards::before{
  content:"";
  position:absolute;
  /* Stay on the card row so the pool does not wash the title or footnotes. */
  inset:16px -8px;
  border-radius:32px;
  background:var(--ink-850);
  box-shadow:0 0 96px 56px var(--ink-850);
  z-index:-1;
  pointer-events:none;
}
.fk-wrap[data-capture-arcs] .fk-pricing__card,
.fk-wrap[data-capture-arcs] .fk-pricing__card--secondary{
  opacity:1;
  background:var(--ink-800);
  box-shadow:none;
}
.fk-wrap[data-capture-arcs] .fk-pricing__card--primary{
  /* Opaque rim — the default 32% blue sampled the waves. */
  border-color:color-mix(in srgb,rgb(63,127,221) 50%,var(--ink-800));
  box-shadow:0 0 32px -12px var(--pulse-glow);
}
.fk-capture>video{
  position:absolute;inset:0;width:100%;height:100%;
  object-fit:cover;display:block;
}
/* Once hero-capture.js is compositing, the clip is a decode source only and
   the canvas is the single presented surface, so picture and skeleton commit
   in the same frame. Set from JS: if the motion data fails to load the video
   stays visible and the graded clip still stands on its own. */
.fk-capture.is-composited>video{opacity:0;pointer-events:none;}
.fk-capture>canvas{
  position:absolute;inset:0;width:100%;height:100%;display:block;
}

/* Overlay paint. A <canvas> cannot inherit CSS, so hero-capture.js reads these
   with getComputedStyle. Kept here so the overlay is themed from one place. */
.fk-capture{
  --study-bone-near:#f4f1e9;   /* confident segments */
  --study-bone-far:#5f8fbe;    /* low-confidence segments recede */
  --study-joint:#3f7fdd;       /* brand blue */
  --study-ring:#0b1b2e;
  --study-pill-bg:#f4f1e9;
  --study-pill-fg:#10263f;
  --study-lead:#8fb4e6;
}

.fk-capture__bar{
  display:flex;align-items:center;gap:16px;
  font-family:var(--font-mono);font-size:10px;
  letter-spacing:.16em;text-transform:uppercase;
  color:var(--fg-3);
}
.fk-capture__frame{
  font-variant-numeric:tabular-nums;margin-left:auto;
}
.fk-capture__bar button{
  background:none;border:0;padding:6px 0;cursor:pointer;
  font:inherit;letter-spacing:inherit;text-transform:inherit;
  color:var(--fg-2);transition:color var(--t-fast);
}
.fk-capture__bar button:hover{color:var(--fg-1);}

@media(max-width:680px){
  .fk-capture{aspect-ratio:4/3;}
}

.fk-capture-continuation{
  position:absolute;inset:0 0 auto;height:min(100%,560px);
  pointer-events:none;opacity:.58;overflow:hidden;
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 65%,transparent),
    linear-gradient(90deg,transparent 72%,#000 90%,transparent);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 65%,transparent),
    linear-gradient(90deg,transparent 72%,#000 90%,transparent);
  -webkit-mask-composite:source-in;mask-composite:intersect;
}
.fk-capture-continuation[data-side="left"]{
  -webkit-mask-image:linear-gradient(180deg,transparent,#000 30%,#000 65%,transparent),
    linear-gradient(90deg,transparent,#000 10%,transparent 28%);
  mask-image:linear-gradient(180deg,transparent,#000 30%,#000 65%,transparent),
    linear-gradient(90deg,transparent,#000 10%,transparent 28%);
}
.fk-capture-continuation + .fk-container{position:relative;}
.fk-capture-continuation canvas{display:block;width:100%;height:100%;}
@media(max-width:880px){.fk-capture-continuation{display:none;}}

/* CTA panel: same chamber language, nested in the plate, not a page wrap. */
.fk-cta__panel[data-capture-arcs]{isolation:isolate;}
.fk-cta__panel[data-capture-arcs]::before{opacity:.14;}
.fk-cta__panel[data-capture-arcs]>.fk-capture-arcs{
  position:absolute;inset:0;z-index:0;pointer-events:none;
  -webkit-mask-image:radial-gradient(ellipse 80% 74% at 50% 48%,#000 26%,transparent 78%);
  mask-image:radial-gradient(ellipse 80% 74% at 50% 48%,#000 26%,transparent 78%);
}
.fk-cta__panel[data-capture-arcs]>:not(.fk-capture-arcs){position:relative;z-index:1;}

.fk-hero__meta{display:none;}
.fk-stat__k--short{display:none;}
@media(max-width:880px){
  .fk-hero__grid .fk-hero__copy > .fk-eyebrow{display:none;}
  .fk-opening .fk-stats{display:none;}
}
.fk-stats .fk-stats__in{grid-template-columns:repeat(4,minmax(0,1fr));}
@media(max-width:760px){
  .fk-stat__click{display:none;}
  .fk-stat__tap{display:inline;}
  .fk-stats .fk-stats__in{grid-template-columns:repeat(4,minmax(0,1fr));}
  .fk-stats .fk-stat{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:16px 8px;
    border-left:1px solid var(--line);
    border-bottom:0;
    min-width:0;
  }
  .fk-stats .fk-stat:nth-child(odd){border-left:1px solid var(--line);}
  .fk-stats .fk-stat:first-child{border-left:0;}
  .fk-stats .fk-stat__v{
    font-size:22px;
    display:flex;
    align-items:baseline;
    justify-content:center;
    white-space:nowrap;
  }
  .fk-stats .fk-stat__v .u{font-size:10px;margin-left:3px;}
  .fk-stats .fk-stat__k{
    font-size:9px;
    letter-spacing:.03em;
    margin-top:6px;
    line-height:1.2;
    min-height:0;
    white-space:nowrap;
  }
}
@media(max-width:360px){
  .fk-stats .fk-stats__in{grid-template-columns:repeat(4,minmax(0,1fr));}
  .fk-stats .fk-stat{border-bottom:0;padding:14px 6px;}
}

/* First screen: nested frame can be positioned; wrap siblings cannot.
   Padding under the band is reserved for the chevron so zoom cannot cover it. */
.fk-opening{
  box-sizing:border-box;
  height:calc(100svh - 64px);
  overflow:hidden;
}
@media(max-width:880px){
  .fk-opening{height:calc(100dvh - 64px);}
}
.fk-opening__frame{
  position:relative;
  box-sizing:border-box;
  height:100%;
  display:flex;
  flex-direction:column;
  overflow:hidden;
}
.fk-opening .fk-hero{
  flex:0 0 auto;
  display:flex;
  flex-direction:column;
  justify-content:flex-start;
  padding-top:58px;
  padding-bottom:0;
  z-index:1;
}
@media(min-width:881px){
  .fk-opening .fk-hero .fk-hero__grid{transform:translateY(58px);}
}
@media(max-width:880px){
  .fk-opening .fk-hero{padding-top:28px;}
}
.fk-opening .fk-hero > .fk-container{width:100%;position:relative;z-index:1;}
.fk-opening .fk-hero{overflow:visible;}
.fk-opening .fk-stats{flex:0 0 auto;margin-top:auto;position:relative;z-index:1;}
.fk-opening .fk-stats .fk-stat{
  text-align:center;
}
.fk-opening .fk-stats .fk-stat__v{
  display:flex;
  justify-content:center;
  align-items:baseline;
}
.fk-opening__frame > .fk-capture-arcs{
  position:absolute;
  top:0;left:0;right:0;
  bottom:0;
  z-index:0;
  -webkit-mask-image:
    linear-gradient(90deg,transparent,#000 7%,#000 94%,transparent),
    linear-gradient(180deg,transparent 0%,#000 64px,#000 calc(100% - 280px),rgba(0,0,0,.5) calc(100% - 120px),transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:
    linear-gradient(90deg,transparent,#000 7%,#000 94%,transparent),
    linear-gradient(180deg,transparent 0%,#000 64px,#000 calc(100% - 280px),rgba(0,0,0,.5) calc(100% - 120px),transparent 100%);
  mask-composite:intersect;
}
@media(max-width:880px){
  .fk-opening__frame > .fk-capture-arcs{
    opacity:.72;
    -webkit-mask-image:
      linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),
      linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.4) 18%,#000 36%,#000 calc(100% - 180px),rgba(0,0,0,.45) calc(100% - 80px),transparent 100%);
    mask-image:
      linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent),
      linear-gradient(180deg,rgba(0,0,0,.28) 0%,rgba(0,0,0,.4) 18%,#000 36%,#000 calc(100% - 180px),rgba(0,0,0,.45) calc(100% - 80px),transparent 100%);
  }
}
.fk-opening__more{
  position:relative;
  z-index:3;
  flex:0 1 168px;
  min-height:0;
  display:flex;
  align-items:center;
  justify-content:center;
  height:auto;
  max-height:168px;
  margin:0;
  background:transparent;
  color:var(--accent-2);
  opacity:0;
  pointer-events:none;
  animation:fk-opening-more .45s ease 1s forwards;
}
@media(max-width:880px){
  .fk-opening__more{
    position:absolute;
    left:0;right:0;
    bottom:40px;
    flex:none;
    height:44px;
    max-height:44px;
  }
}
.fk-opening__more.is-in{
  opacity:.9;
  pointer-events:auto;
  animation:none;
  transition:opacity .45s ease,transform .45s ease;
}
.fk-opening__more svg{
  width:36px;height:36px;display:block;stroke-width:1.75;
  filter:drop-shadow(0 0 10px var(--ink-850));
}
.fk-opening__more.is-gone{
  opacity:0;
  pointer-events:none;
  animation:none;
  transition:opacity .25s ease;
}
@keyframes fk-opening-more{
  from{opacity:0;transform:translateY(-4px);}
  to{opacity:.9;transform:translateY(0);pointer-events:auto;}
}
@media(prefers-reduced-motion:reduce){
  .fk-opening__more{
    animation:none;
    opacity:.8;
    pointer-events:auto;
  }
}
body[data-motion="off"] .fk-opening__more{
  animation:none;
  opacity:.8;
  pointer-events:auto;
}

.fk-edgefade{
  display:none;
}
@media(max-width:880px){
  .fk-edgefade{
    display:block;
    position:fixed;
    left:0;right:0;bottom:0;
    height:128px;
    pointer-events:none;
    z-index:4;
    background:linear-gradient(180deg,transparent 0%,var(--ink-850) 92%);
    opacity:0;
    transition:opacity .3s ease;
  }
  .fk-edgefade.is-on{opacity:1;}
}