/* ============================================================================
   FORMAK — Marketing landing page. Built on the "Kinetic Lab" design language.
   Tokens come from colors_and_type.css. No new colors/type introduced; --accent
   is a token-derived alias so the Tweaks panel can shift the signal hue on brand.
   ========================================================================== */

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{
  margin:0;
  font-family:var(--font-sans);
  font-size:var(--fs-body);
  line-height:1.6;
  color:var(--fg-1);
  background:var(--ink-850);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:hidden;
}
:root{ --accent:var(--pulse-500); --accent-2:var(--pulse-300); }

img{max-width:100%;display:block;}
a{color:inherit;text-decoration:none;}
::selection{ background:var(--pulse-tint); color:var(--fg-1); }

/* faint app-wide signal glow + studio scanlines */
body::before{
  content:"";position:fixed;inset:0;z-index:0;pointer-events:none;
  background:
    radial-gradient(90% 60% at 82% -8%, rgba(22,194,243,0.10), transparent 60%),
    radial-gradient(70% 50% at 0% 100%, rgba(22,194,243,0.05), transparent 65%);
}
.fk-wrap{position:relative;z-index:1;}

.fk-ic svg{width:100%;height:100%;display:block;stroke-width:var(--sw,2);}

/* ---- shared layout -------------------------------------------------------- */
.fk-container{max-width:1180px;margin:0 auto;padding:0 32px;}
.fk-section{padding:104px 0;position:relative;}
.fk-eyebrow{
  font-family:var(--font-mono);font-size:var(--fs-label);font-weight:500;
  letter-spacing:.18em;text-transform:uppercase;color:var(--accent-2);
  display:inline-flex;align-items:center;gap:9px;
}
.fk-eyebrow::before{content:"";width:22px;height:1px;background:var(--accent);opacity:.7;}
.fk-eyebrow.is-muted{color:var(--fg-3);}
.fk-eyebrow.is-muted::before{background:var(--line-strong);opacity:1;}

.fk-h2{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(28px,3.4vw,46px);line-height:1.08;letter-spacing:-.025em;
  color:var(--fg-1);margin:18px 0 0;max-width:18ch;text-wrap:balance;
}
.fk-lead{font-size:var(--fs-body-lg);color:var(--fg-2);line-height:1.6;max-width:54ch;margin:16px 0 0;}

/* ---- buttons -------------------------------------------------------------- */
.fk-btn{
  display:inline-flex;align-items:center;gap:9px;justify-content:center;
  font-family:var(--font-sans);font-weight:600;font-size:14px;line-height:1;
  padding:13px 20px;border-radius:var(--r-sm);border:1px solid transparent;cursor:pointer;
  transition:background var(--t-fast) var(--ease-out),border-color var(--t-fast),
    color var(--t-fast),transform var(--t-fast),box-shadow var(--t-med);
  white-space:nowrap;
}
.fk-btn .fk-ic{width:17px;height:17px;}
.fk-btn--primary{background:var(--accent);color:#04222C;box-shadow:0 0 0 0 var(--pulse-glow);}
.fk-btn--primary:hover{background:var(--accent-2);box-shadow:0 0 26px -4px var(--pulse-glow);}
.fk-btn--primary:active{transform:translateY(1px);}
.fk-btn--secondary{background:var(--ink-700);color:var(--fg-1);border-color:var(--line-strong);}
.fk-btn--secondary:hover{border-color:var(--accent);background:var(--ink-650);}
.fk-btn--ghost{background:transparent;color:var(--fg-2);}
.fk-btn--ghost:hover{color:var(--fg-1);}
.fk-btn--lg{padding:15px 26px;font-size:15px;}
.fk-lang{background:transparent;color:var(--fg-2);border:1px solid var(--line);border-radius:var(--r-sm);padding:7px 12px;font-family:var(--font-mono);font-size:12px;letter-spacing:.04em;cursor:pointer;transition:color var(--t-fast),border-color var(--t-fast);}
.fk-lang:hover{color:var(--fg-1);border-color:var(--accent);}
.fk-i18n-loading [data-i18n],.fk-i18n-loading [data-i18n-title],.fk-i18n-loading [data-i18n-placeholder],.fk-i18n-loading [data-i18n-aria-label]{visibility:hidden;}

/* ---- nav ------------------------------------------------------------------ */
.fk-nav{
  position:sticky;top:0;z-index:40;height:64px;display:flex;align-items:center;
  background:rgba(10,13,19,.62);backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;transition:border-color var(--t-med),background var(--t-med);
}
.fk-nav.is-stuck{border-bottom-color:var(--line);background:rgba(8,11,16,.86);}
.fk-nav__in{display:flex;align-items:center;gap:26px;width:100%;}
.fk-brand{display:flex;align-items:center;gap:11px;}
.fk-brand svg{width:30px;height:30px;}
.fk-brand__logo{height:36px;width:auto;display:block;}
.fk-brand__name{font-family:var(--font-display);font-weight:600;font-size:20px;letter-spacing:.3px;color:var(--fg-1);}
.fk-brand__ver{
  font-family:var(--font-mono);font-size:10px;color:var(--fg-3);
  border:1px solid var(--line);border-radius:var(--r-xs);padding:2px 6px;margin-left:1px;
}
.fk-nav__links{display:flex;align-items:center;gap:28px;margin-left:14px;}
.fk-nav__links a{
  font-size:13.5px;color:var(--fg-3);transition:color var(--t-fast);
  font-weight:500;position:relative;
}
.fk-nav__links a:hover{color:var(--fg-1);}
.fk-nav__spacer{flex:1;}
.fk-nav__cta{display:flex;align-items:center;gap:8px;}
@media(max-width:840px){ .fk-nav__links{display:none;} }

/* ============================================================================
   HERO — 3 directions, switched by [data-hero] on <body>.
   ========================================================================== */
.fk-hero{padding:64px 0 90px;position:relative;}
.fk-hero__grid{
  display:grid;grid-template-columns:1.04fr 1fr;gap:56px;align-items:center;
}
.fk-hero__copy{max-width:33ch;}
.fk-hero h1{
  font-family:var(--font-display);font-weight:600;
  font-size:clamp(38px,5vw,68px);line-height:1.02;letter-spacing:-.035em;
  margin:20px 0 0;color:var(--fg-1);text-wrap:balance;
}
.fk-hero h1 .fk-hl{color:var(--accent-2);}
.fk-hero__sub{font-size:clamp(16px,1.4vw,19px);color:var(--fg-2);line-height:1.55;margin:22px 0 0;max-width:46ch;}
.fk-hero__actions{display:flex;flex-wrap:wrap;gap:13px;margin-top:34px;}
.fk-hero__meta{
  display:flex;flex-wrap:wrap;gap:8px 22px;margin-top:30px;
  font-family:var(--font-mono);font-size:12px;color:var(--fg-3);
}
.fk-hero__meta span{display:inline-flex;align-items:center;gap:8px;}
.fk-hero__meta i{width:5px;height:5px;border-radius:50%;background:var(--accent);box-shadow:0 0 8px var(--pulse-glow);}

/* ---- the capture frame (reused across hero + sections) -------------------- */
.fk-frame{
  position:relative;width:100%;aspect-ratio:16/11;border-radius:var(--r-lg);
  overflow:hidden;border:1px solid var(--line-strong);
  background:radial-gradient(130% 120% at 50% 6%, #11192a 0%, #06080C 78%);
  box-shadow:var(--elev-3);
}
.fk-frame__grid{
  position:absolute;inset:0;opacity:.8;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),
    linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:34px 34px;
  mask-image:linear-gradient(to bottom,transparent 4%,#000 46%,#000 100%);
}
.fk-frame image-slot{position:absolute;inset:0;width:100%;height:100%;border-radius:0;}
.fk-frame__media{position:absolute;inset:0;}
.fk-frame__scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,8,12,.18),rgba(6,8,12,.55));pointer-events:none;}
.fk-frame__overlay{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;}
.fk-frame__overlay .bone{stroke:var(--bone);stroke-width:2.4;stroke-linecap:round;}
.fk-frame__overlay .bone-live{stroke:var(--accent);stroke-width:2.6;stroke-linecap:round;
  filter:drop-shadow(0 0 5px var(--pulse-glow));}
.fk-frame__overlay .arc{stroke:var(--angle-arc);stroke-width:2;fill:none;}

/* joints: hover-to-reveal angle */
.fk-joint{position:absolute;transform:translate(-50%,-50%);pointer-events:auto;cursor:pointer;}
.fk-joint__dot{
  display:block;width:14px;height:14px;border-radius:50%;background:var(--joint);
  border:2px solid #06080C;box-shadow:0 0 0 2px rgba(22,194,243,.25),0 0 12px var(--pulse-glow);
  transition:transform var(--t-fast) var(--ease-out),background var(--t-fast);
}
.fk-joint:hover .fk-joint__dot,.fk-joint.is-on .fk-joint__dot{transform:scale(1.25);background:#fff;}
.fk-joint__tag{
  position:absolute;left:50%;top:-12px;transform:translate(-50%,-100%) scale(.92);
  transform-origin:bottom center;
  font-family:var(--font-mono);font-size:12px;font-variant-numeric:tabular-nums;
  white-space:nowrap;padding:5px 9px;border-radius:var(--r-sm);
  background:rgba(6,8,12,.82);border:1px solid rgba(255,255,255,.16);color:#fff;
  backdrop-filter:blur(8px);opacity:0;transition:opacity var(--t-fast),transform var(--t-fast) var(--ease-out);
  box-shadow:var(--elev-2);
}
.fk-joint__tag b{color:var(--angle-arc);font-weight:500;}
.fk-joint:hover .fk-joint__tag,.fk-joint.is-on .fk-joint__tag{opacity:1;transform:translate(-50%,-100%) scale(1);}
.fk-joint__tag::after{
  content:"";position:absolute;left:50%;bottom:-5px;transform:translateX(-50%) rotate(45deg);
  width:8px;height:8px;background:rgba(6,8,12,.82);border-right:1px solid rgba(255,255,255,.16);
  border-bottom:1px solid rgba(255,255,255,.16);
}

/* floating HUD on the frame */
.fk-frame__hud{
  position:absolute;display:flex;align-items:center;gap:9px;
  font-family:var(--font-mono);font-size:11px;color:#cfd8e6;white-space:nowrap;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-sm);padding:7px 11px;backdrop-filter:blur(8px);
}
.fk-frame__hud--tl{top:14px;left:14px;}
.fk-frame__hud--tr{top:14px;right:14px;}
.fk-frame__rec{display:inline-flex;align-items:center;gap:7px;color:#fff;}
.fk-frame__rec b{width:8px;height:8px;border-radius:50%;background:var(--risk);box-shadow:0 0 9px var(--risk);animation:fk-blink 1.4s var(--ease-in-out) infinite;}
.fk-frame__hud .dim{color:var(--fg-3);}
.fk-frame__corner{position:absolute;width:18px;height:18px;border:1.5px solid rgba(255,255,255,.22);}
.fk-frame__corner.tl{top:10px;left:10px;border-right:0;border-bottom:0;}
.fk-frame__corner.tr{top:10px;right:10px;border-left:0;border-bottom:0;}
.fk-frame__corner.bl{bottom:10px;left:10px;border-right:0;border-top:0;}
.fk-frame__corner.br{bottom:10px;right:10px;border-left:0;border-top:0;}

@keyframes fk-blink{0%,100%{opacity:1;}50%{opacity:.25;}}

/* ---- hero variant: SPLIT (default) ---------------------------------------- */
body[data-hero="split"] .fk-hero__bleed{display:none;}

/* ---- hero variant: FULL-BLEED --------------------------------------------- */
.fk-hero__bleed{display:none;}
body[data-hero="bleed"] .fk-hero__grid{display:none;}
body[data-hero="bleed"] .fk-hero__bleed{display:block;position:relative;}
.fk-hero__bleed .fk-frame{
  aspect-ratio:auto;height:clamp(540px,72vh,720px);border-radius:var(--r-xl);
}
.fk-hero__bleed .fk-bleed-copy{
  position:absolute;left:0;top:0;bottom:0;right:auto;z-index:3;
  width:min(56%,620px);display:flex;flex-direction:column;justify-content:center;
  padding:clamp(28px,4.5vw,60px);
  background:linear-gradient(90deg,rgba(6,8,12,.96) 34%,rgba(6,8,12,.74) 68%,transparent);
}
.fk-hero__bleed h1{margin-top:14px;max-width:16ch;}
.fk-hero__bleed .fk-hero__sub{max-width:42ch;}
.fk-hero__bleed .fk-hero__actions{margin-top:26px;}

/* ---- hero variant: INSTRUMENT --------------------------------------------- */
body[data-hero="instrument"] .fk-hero__grid{
  grid-template-columns:1fr;text-align:center;gap:36px;justify-items:center;
}
body[data-hero="instrument"] .fk-hero__copy{max-width:24ch;}
body[data-hero="instrument"] .fk-hero__sub{margin-left:auto;margin-right:auto;}
body[data-hero="instrument"] .fk-hero__actions{justify-content:center;}
body[data-hero="instrument"] .fk-hero__meta{justify-content:center;}
body[data-hero="instrument"] .fk-hero__framewrap{width:100%;max-width:920px;}
body[data-hero="instrument"] .fk-frame{aspect-ratio:16/8;}
body[data-hero="instrument"] .fk-hero__scrub{display:flex;}

/* instrument scrub strip under the frame */
.fk-hero__scrub{
  display:none;align-items:center;gap:14px;margin-top:14px;
  background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-md);
  padding:12px 16px;
}
.fk-hero__scrub .play{
  width:34px;height:34px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#04222C;border:0;cursor:pointer;transition:background var(--t-fast);
}
.fk-hero__scrub .play:hover{background:var(--accent-2);}
.fk-hero__scrub .play .fk-ic{width:16px;height:16px;}
.fk-hero__scrub .track{flex:1;height:4px;border-radius:2px;background:var(--ink-650);position:relative;}
.fk-hero__scrub .track i{position:absolute;left:0;top:0;bottom:0;width:46%;background:var(--accent);border-radius:2px;}
.fk-hero__scrub .track b{position:absolute;left:46%;top:50%;transform:translate(-50%,-50%);width:12px;height:12px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(22,194,243,.35);}
.fk-hero__scrub .read{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);white-space:nowrap;}

@media(max-width:880px){
  .fk-hero__grid{grid-template-columns:1fr;gap:40px;}
}

/* ---- stat band ------------------------------------------------------------ */
.fk-stats{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink-800);}
.fk-stats__in{display:grid;grid-template-columns:repeat(4,1fr);}
.fk-stat{padding:30px 28px;border-left:1px solid var(--line);}
.fk-stat:first-child{border-left:0;}
.fk-stat__v{font-family:var(--font-display);font-weight:600;font-size:34px;letter-spacing:-.02em;color:var(--fg-1);font-variant-numeric:tabular-nums;}
.fk-stat__v .u{font-family:var(--font-mono);font-size:15px;color:var(--accent-2);margin-left:4px;font-weight:500;}
.fk-stat__k{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-top:8px;}
@media(max-width:760px){ .fk-stats__in{grid-template-columns:1fr 1fr;} .fk-stat:nth-child(3){border-left:0;} }

/* ---- how it works --------------------------------------------------------- */
.fk-steps{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:52px;counter-reset:step;}
.fk-step{
  position:relative;background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-md);
  padding:26px 22px 24px;transition:border-color var(--t-med),transform var(--t-med),background var(--t-med);
}
.fk-step:hover{border-color:var(--line-strong);transform:translateY(-3px);background:var(--ink-750);}
.fk-step__no{font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;color:var(--fg-3);}
.fk-step__ic{
  width:46px;height:46px;border-radius:var(--r-md);margin:16px 0 18px;
  display:flex;align-items:center;justify-content:center;
  background:var(--pulse-tint);color:var(--accent-2);border:1px solid rgba(22,194,243,.22);
}
.fk-step__ic .fk-ic{width:22px;height:22px;}
.fk-step h3{font-family:var(--font-display);font-size:18px;font-weight:600;margin:0 0 8px;letter-spacing:-.01em;}
.fk-step p{font-size:13.5px;color:var(--fg-3);line-height:1.55;margin:0;}
.fk-step__line{
  position:absolute;top:49px;right:-9px;width:18px;height:1px;background:var(--line-strong);z-index:2;
}
.fk-step:last-child .fk-step__line{display:none;}
@media(max-width:900px){ .fk-steps{grid-template-columns:1fr 1fr;} .fk-step__line{display:none;} }

/* ---- review (interactive viewer) ------------------------------------------ */
.fk-review__grid{display:grid;grid-template-columns:1.25fr 1fr;gap:54px;align-items:center;}
.fk-viewer{
  background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden;box-shadow:var(--elev-2);
}
.fk-viewer__stage{position:relative;width:100%;aspect-ratio:16/12;background:radial-gradient(130% 120% at 50% 6%, #0f1622 0%, #06080C 80%);}
.fk-viewer__grid{
  position:absolute;inset:0;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:38px 38px;mask-image:linear-gradient(to bottom,transparent 6%,#000 56%);
}
.fk-viewer__svg{position:absolute;inset:0;width:100%;height:100%;}
.fk-viewer__svg .bone{stroke:var(--bone);stroke-width:2.4;stroke-linecap:round;}
.fk-viewer__svg .bone-live{stroke:var(--accent);stroke-width:2.8;stroke-linecap:round;filter:drop-shadow(0 0 5px var(--pulse-glow));}
.fk-viewer__stat{
  position:absolute;top:13px;left:13px;display:flex;gap:9px;align-items:center;
  font-family:var(--font-mono);font-size:11px;color:#cfd8e6;
  background:rgba(0,0,0,.42);border:1px solid rgba(255,255,255,.13);border-radius:var(--r-sm);padding:6px 10px;backdrop-filter:blur(8px);
}
.fk-viewer__stat .dim{color:var(--fg-3);}
.fk-viewer__angtag{position:absolute;transform:translate(-50%,-50%);
  font-family:var(--font-mono);font-size:11px;font-variant-numeric:tabular-nums;
  color:#06120c;background:var(--angle-arc);padding:2px 7px;border-radius:var(--r-pill);font-weight:600;white-space:nowrap;
  box-shadow:0 0 10px rgba(52,221,146,.4);}
.fk-viewer__bar{display:flex;align-items:center;gap:14px;padding:13px 16px;border-top:1px solid var(--line);}
.fk-viewer__play{
  width:36px;height:36px;border-radius:50%;flex:none;display:flex;align-items:center;justify-content:center;
  background:var(--accent);color:#04222C;border:0;cursor:pointer;transition:background var(--t-fast),transform var(--t-fast);
}
.fk-viewer__play:hover{background:var(--accent-2);}
.fk-viewer__play:active{transform:scale(.95);}
.fk-viewer__play .fk-ic{width:16px;height:16px;}
.fk-track{flex:1;height:5px;border-radius:3px;background:var(--ink-650);position:relative;cursor:pointer;}
.fk-track__fill{position:absolute;left:0;top:0;bottom:0;background:var(--accent);border-radius:3px;width:0;}
.fk-track__knob{position:absolute;top:50%;left:0;transform:translate(-50%,-50%);width:13px;height:13px;border-radius:50%;background:#fff;box-shadow:0 0 0 3px rgba(22,194,243,.35);}
.fk-viewer__frame{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);white-space:nowrap;min-width:74px;text-align:right;}

.fk-review__copy h2{margin-top:18px;}
.fk-anglechips{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px;}
.fk-anglechip{
  display:flex;flex-direction:column;gap:3px;padding:11px 15px;border-radius:var(--r-md);
  background:var(--ink-800);border:1px solid var(--line);min-width:118px;
}
.fk-anglechip .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);}
.fk-anglechip .v{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:22px;font-weight:500;color:var(--fg-1);letter-spacing:-.02em;}
.fk-anglechip .v .u{font-size:13px;color:var(--fg-3);}
@media(max-width:880px){ .fk-review__grid{grid-template-columns:1fr;gap:36px;} }

/* ---- analyze (report sample) ---------------------------------------------- */
.fk-analyze__grid{display:grid;grid-template-columns:1fr 1.15fr;gap:54px;align-items:center;}
.fk-report{
  background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px;box-shadow:var(--elev-2);
}
.fk-report__head{display:flex;align-items:center;gap:10px;margin-bottom:16px;}
.fk-report__by{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);margin-left:auto;}
.fk-report__by b{color:var(--accent-2);font-weight:500;}
.fk-dq{background:var(--ink-900);border:1px solid var(--line);border-radius:var(--r-md);padding:15px 16px;margin-bottom:16px;}
.fk-dq__top{display:flex;align-items:baseline;justify-content:space-between;}
.fk-dq__lvl{font-family:var(--font-display);font-size:22px;font-weight:600;color:var(--optimal);}
.fk-dq__cv{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);}
.fk-dq__steps{display:flex;gap:5px;margin-top:11px;}
.fk-dq__steps span{flex:1;height:5px;border-radius:3px;background:var(--ink-650);}

.fk-finding{background:var(--ink-900);border:1px solid var(--line);border-radius:var(--r-md);padding:16px 17px;}
.fk-finding__top{display:flex;align-items:center;justify-content:space-between;margin-bottom:11px;}
.fk-finding__cls{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:#FF6B6B;font-weight:500;}
.fk-finding__cls i{width:9px;height:9px;border-radius:2px;background:var(--risk);}
.fk-finding__pri{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);}
.fk-finding__ttl{font-family:var(--font-display);font-size:17px;font-weight:600;margin:0 0 13px;letter-spacing:-.01em;color:var(--fg-1);}
.fk-finding__row{display:flex;align-items:flex-end;gap:22px;margin-bottom:14px;}
.fk-finding__big{font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:34px;line-height:.9;font-weight:500;color:#FF6B6B;letter-spacing:-.03em;}
.fk-finding__big .u{font-size:15px;color:var(--fg-3);}
.fk-fact{display:flex;flex-direction:column;gap:3px;}
.fk-fact .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);}
.fk-fact .v{font-family:var(--font-mono);font-size:14px;color:var(--fg-2);}
.fk-gauge{position:relative;height:6px;border-radius:3px;margin-bottom:15px;overflow:hidden;
  background:linear-gradient(90deg,var(--optimal) 0 52%,var(--suboptimal) 52% 74%,var(--risk) 74% 100%);}
.fk-gauge__mark{position:absolute;top:-5px;width:2px;height:16px;background:#fff;box-shadow:0 0 0 2px var(--ink-900);left:88%;}
.fk-finding__div{height:1px;background:var(--line);margin:0 0 13px;}
.fk-finding__why{margin:0 0 14px;}
.fk-finding__why .k{font-family:var(--font-mono);font-size:10px;letter-spacing:.1em;text-transform:uppercase;color:var(--fg-3);margin-right:8px;}
.fk-finding__why .t{font-size:13.5px;color:var(--fg-2);line-height:1.6;}
.fk-cue{display:flex;gap:12px;}
.fk-cue__bar{width:2px;border-radius:2px;background:var(--accent);flex:none;}
.fk-cue__k{font-family:var(--font-mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-2);}
.fk-cue__t{font-size:14px;color:var(--fg-1);line-height:1.5;margin-top:5px;font-style:italic;}

.fk-analyze__feats{display:flex;flex-direction:column;gap:18px;margin-top:30px;}
.fk-feat{display:flex;gap:15px;}
.fk-feat__ic{width:40px;height:40px;flex:none;border-radius:var(--r-md);display:flex;align-items:center;justify-content:center;
  background:var(--ink-800);border:1px solid var(--line);color:var(--accent-2);}
.fk-feat__ic .fk-ic{width:20px;height:20px;}
.fk-feat h4{font-family:var(--font-sans);font-size:15px;font-weight:600;margin:2px 0 4px;color:var(--fg-1);}
.fk-feat p{font-size:13.5px;color:var(--fg-3);margin:0;line-height:1.55;}
@media(max-width:900px){ .fk-analyze__grid{grid-template-columns:1fr;gap:40px;} }

/* ---- audiences ------------------------------------------------------------ */
.fk-aud{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:52px;}
.fk-aud__card{background:var(--ink-800);border:1px solid var(--line);border-radius:var(--r-md);padding:28px 24px;
  transition:border-color var(--t-med),background var(--t-med);}
.fk-aud__card:hover{border-color:var(--line-strong);background:var(--ink-750);}
.fk-aud__tag{font-family:var(--font-mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--accent-2);}
.fk-aud__card h3{font-family:var(--font-display);font-size:20px;font-weight:600;margin:14px 0 10px;letter-spacing:-.01em;}
.fk-aud__card p{font-size:14px;color:var(--fg-2);line-height:1.6;margin:0 0 16px;}
.fk-aud__list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:9px;}
.fk-aud__list li{display:flex;gap:10px;font-size:13px;color:var(--fg-3);align-items:flex-start;}
.fk-aud__list .fk-ic{width:16px;height:16px;color:var(--optimal);flex:none;margin-top:2px;}
@media(max-width:900px){ .fk-aud{grid-template-columns:1fr;} }

/* ---- sports --------------------------------------------------------------- */
.fk-sports{display:flex;flex-wrap:wrap;gap:12px;margin-top:36px;}
.fk-sport{
  display:inline-flex;align-items:center;gap:11px;padding:13px 18px;border-radius:var(--r-pill);
  background:var(--ink-800);border:1px solid var(--line);font-family:var(--font-mono);font-size:13px;color:var(--fg-1);
}
.fk-sport .fk-ic{width:18px;height:18px;color:var(--accent-2);}
.fk-sport.is-soon{color:var(--fg-3);}
.fk-sport.is-soon .fk-ic{color:var(--fg-3);}
.fk-sport__soon{font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--fg-3);
  border:1px solid var(--line-strong);border-radius:var(--r-xs);padding:2px 6px;margin-left:2px;}

/* ---- final CTA ------------------------------------------------------------ */
.fk-cta{position:relative;overflow:hidden;border-top:1px solid var(--line);}
.fk-cta__panel{
  position:relative;background:var(--ink-800);border:1px solid var(--line-strong);border-radius:var(--r-xl);
  padding:clamp(40px,6vw,72px);text-align:center;box-shadow:var(--elev-3);overflow:hidden;
}
.fk-cta__panel .fk-eyebrow{display:flex;justify-content:center;width:100%;}
.fk-cta__panel::before{
  content:"";position:absolute;inset:0;opacity:.5;
  background-image:linear-gradient(var(--grid) 1px,transparent 1px),linear-gradient(90deg,var(--grid) 1px,transparent 1px);
  background-size:42px 42px;mask-image:radial-gradient(circle at 50% 30%,#000,transparent 70%);
}
.fk-cta__glow{position:absolute;top:-40%;left:50%;transform:translateX(-50%);width:60%;height:80%;
  background:radial-gradient(circle, rgba(22,194,243,.18), transparent 65%);pointer-events:none;}
.fk-cta__panel>*{position:relative;}
.fk-cta h2{font-family:var(--font-display);font-weight:600;font-size:clamp(30px,4vw,52px);line-height:1.05;letter-spacing:-.03em;margin:18px auto 0;max-width:18ch;text-wrap:balance;}
.fk-cta p{font-size:var(--fs-body-lg);color:var(--fg-2);margin:18px auto 0;max-width:48ch;}
.fk-cta__form{display:flex;gap:10px;justify-content:center;margin:34px auto 0;max-width:480px;flex-wrap:wrap;}
.fk-cta__input{
  flex:1;min-width:240px;background:var(--ink-900);border:1px solid var(--line-strong);border-radius:var(--r-sm);
  padding:14px 16px;color:var(--fg-1);font-family:var(--font-sans);font-size:14px;transition:border-color var(--t-fast),box-shadow var(--t-fast);
}
.fk-cta__input::placeholder{color:var(--fg-3);}
.fk-cta__input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--pulse-tint);}
.fk-cta__fine{font-family:var(--font-mono);font-size:11px;color:var(--fg-3);margin-top:18px;display:inline-flex;gap:8px;align-items:center;}
.fk-cta__fine .fk-ic{width:13px;height:13px;}

/* ---- footer --------------------------------------------------------------- */
.fk-footer{border-top:1px solid var(--line);padding:48px 0 40px;}
.fk-footer__in{display:flex;align-items:flex-start;gap:40px;flex-wrap:wrap;}
.fk-footer__brand{max-width:300px;}
.fk-footer__brand .fk-brand{margin-bottom:14px;}
.fk-footer__brand p{font-size:13px;color:var(--fg-3);line-height:1.6;margin:0;}
.fk-footer__cols{display:flex;gap:64px;margin-left:auto;flex-wrap:wrap;}
.fk-footer__col h5{font-family:var(--font-mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3);margin:0 0 14px;}
.fk-footer__col a{display:block;font-size:13.5px;color:var(--fg-2);margin-bottom:11px;transition:color var(--t-fast);}
.fk-footer__col a:hover{color:var(--accent-2);}
.fk-footer__bot{display:flex;align-items:center;justify-content:space-between;margin-top:40px;padding-top:24px;border-top:1px solid var(--line);
  font-family:var(--font-mono);font-size:11px;color:var(--fg-3);flex-wrap:wrap;gap:12px;}
.fk-footer__bot .made{display:inline-flex;align-items:center;gap:7px;}
.fk-footer__bot .made b{color:var(--fg-2);font-weight:500;}

/* ---- reveal on scroll ----------------------------------------------------- */
.fk-reveal{opacity:0;transform:translateY(18px);transition:opacity .6s var(--ease-out),transform .6s var(--ease-out);}
.fk-reveal.is-in{opacity:1;transform:none;}

/* ---- motion off ----------------------------------------------------------- */
body[data-motion="off"] *{animation:none !important;}
body[data-motion="off"] .fk-reveal{opacity:1;transform:none;transition:none;}
@media(prefers-reduced-motion:reduce){
  html{scroll-behavior:auto;}
  .fk-reveal{opacity:1;transform:none;transition:none;}
  .fk-frame__rec b{animation:none;}
}

/* ============================================================================
   MOBILE & RESPONSIVE ADAPTATIONS
   Masterful mobile overrides and screen-size agnostic enhancements.
   ========================================================================== */

/* Dynamic viewport heights support */
.fk-drawer {
  height: 100vh;
  height: 100dvh; /* dynamic viewport height to prevent keyboard/address-bar push */
}

/* Nav toggler button */
.fk-nav__toggle {
  display: none;
  flex-direction: column;
  justify-content: space-between;
  width: 20px;
  height: 14px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  z-index: 50;
  position: relative;
  outline: none;
}
.fk-nav__toggle span {
  display: block;
  width: 100%;
  height: 1.5px;
  background-color: var(--fg-1);
  transition: transform var(--t-med) var(--ease-out), opacity var(--t-med) var(--ease-out), background-color var(--t-med);
  border-radius: 1px;
}
.fk-nav__toggle:hover span {
  background-color: var(--accent-2);
}

/* Hamburger morphing into X */
.fk-nav__toggle.is-active span:nth-child(1) {
  transform: translateY(6px) rotate(45deg);
}
.fk-nav__toggle.is-active span:nth-child(2) {
  opacity: 0;
}
.fk-nav__toggle.is-active span:nth-child(3) {
  transform: translateY(-6px) rotate(-45deg);
}

/* Mobile Drawer Overlay */
.fk-drawer {
  position: fixed;
  inset: 0;
  z-index: 45;
  background: rgba(6, 8, 12, 0.96);
  backdrop-filter: blur(24px) saturate(170%);
  -webkit-backdrop-filter: blur(24px) saturate(170%);
  transform: translateY(-100%);
  transition: transform var(--t-slow) cubic-bezier(0.16, 1, 0.3, 1);
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.fk-drawer.is-active {
  transform: translateY(0);
  pointer-events: auto;
}
.fk-drawer__content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 48px;
  width: 100%;
  padding: 80px 32px 40px;
}
.fk-drawer__links {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 28px;
}
.fk-drawer__link {
  font-family: var(--font-display);
  font-size: clamp(20px, 6vw, 28px);
  font-weight: 600;
  color: var(--fg-2);
  transition: color var(--t-fast) var(--ease-out), opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
  opacity: 0;
  transform: translateY(20px);
}
.fk-drawer__link:hover {
  color: var(--accent-2);
}
.fk-drawer__cta {
  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  max-width: 280px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity var(--t-slow) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
.fk-drawer__cta .fk-btn {
  width: 100%;
}

/* Stagger drawer animations when open */
.fk-drawer.is-active .fk-drawer__link {
  opacity: 1;
  transform: translateY(0);
}
.fk-drawer.is-active .fk-drawer__cta {
  opacity: 1;
  transform: translateY(0);
  transition-delay: 0.2s;
}
.fk-drawer.is-active .fk-drawer__links .fk-drawer__link:nth-child(1) { transition-delay: 0.05s; }
.fk-drawer.is-active .fk-drawer__links .fk-drawer__link:nth-child(2) { transition-delay: 0.09s; }
.fk-drawer.is-active .fk-drawer__links .fk-drawer__link:nth-child(3) { transition-delay: 0.13s; }
.fk-drawer.is-active .fk-drawer__links .fk-drawer__link:nth-child(4) { transition-delay: 0.17s; }

/* Responsive adjustments across breakpoints */
@media(max-width: 840px) {
  .fk-nav__links {
    display: none;
  }
  .fk-nav__toggle {
    display: flex;
  }
  .fk-nav__cta {
    margin-right: 12px;
  }
}

@media(max-width: 600px) {
  .fk-nav__cta {
    display: none; /* Hide top CTA to prevent brand/toggle overlap on tiny devices */
  }
}

/* Hero elements and actions stacking */
@media(max-width: 880px) {
  .fk-hero {
    padding: 40px 0 60px;
  }
  .fk-hero__copy {
    max-width: 100%;
    text-align: center;
  }
  .fk-hero__sub {
    margin-left: auto;
    margin-right: auto;
  }
  .fk-hero__actions {
    justify-content: center;
  }
  .fk-hero__meta {
    justify-content: center;
  }
  
  /* Bleed Hero stacking */
  body[data-hero="bleed"] .fk-hero__bleed {
    display: flex;
    flex-direction: column;
    gap: 32px;
  }
  body[data-hero="bleed"] .fk-hero__bleed .fk-frame {
    aspect-ratio: 16/11;
    height: auto;
    border-radius: var(--r-lg);
    order: 2;
  }
  body[data-hero="bleed"] .fk-hero__bleed .fk-bleed-copy {
    position: static;
    width: 100%;
    padding: 0;
    background: transparent;
    text-align: center;
    order: 1;
  }
  body[data-hero="bleed"] .fk-hero__bleed .fk-bleed-copy h1 {
    margin-top: 0;
    max-width: 100%;
  }
  body[data-hero="bleed"] .fk-hero__bleed .fk-hero__sub {
    max-width: 100%;
  }
  body[data-hero="bleed"] .fk-hero__bleed .fk-hero__actions {
    justify-content: center;
    margin-top: 24px;
  }
  .fk-footer__in {
    flex-direction: column;
    align-items: center;
    text-align: center;
    gap: 36px;
  }
  .fk-footer__brand {
    max-width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  .fk-footer__brand p {
    max-width: 42ch;
  }
  .fk-footer__cols {
    margin-left: 0;
    justify-content: center;
    gap: 40px;
  }
  .fk-footer__col {
    text-align: center;
  }
  .fk-footer__bot {
    flex-direction: column;
    align-items: center;
    gap: 10px;
    text-align: center;
  }
}

@media(max-width: 500px) {
  .fk-hero__actions {
    flex-direction: column;
    width: 100%;
  }
  .fk-hero__actions .fk-btn {
    width: 100%;
  }
  .fk-hero__sub {
    font-size: 16px;
  }
  .fk-hero h1 {
    font-size: clamp(32px, 9vw, 44px);
  }
}

/* Lab (Instrument) Hero aspect ratio adjustment */
@media(max-width: 768px) {
  body[data-hero="instrument"] .fk-frame {
    aspect-ratio: 16/11;
  }
}

/* Scrub bar stacking on tiny viewports */
@media(max-width: 480px) {
  .fk-hero__scrub {
    flex-wrap: wrap;
    gap: 12px 8px;
    justify-content: space-between;
    padding: 10px 12px;
  }
  .fk-hero__scrub .track {
    order: 1;
    width: 100%;
    flex: none;
    margin: 4px 0;
  }
  .fk-hero__scrub .play {
    order: 2;
  }
  .fk-hero__scrub .read {
    order: 3;
  }
  
  /* Viewer bar stacking on mobile */
  .fk-viewer__bar {
    flex-wrap: wrap;
    gap: 12px 8px;
    justify-content: space-between;
    padding: 10px 12px;
  }
  .fk-viewer__bar .fk-track {
    order: 1;
    width: 100%;
    flex: none;
    margin: 4px 0;
  }
  .fk-viewer__bar .fk-viewer__play {
    order: 2;
  }
  .fk-viewer__bar .fk-viewer__frame {
    order: 3;
    min-width: auto;
    text-align: right;
  }
}

/* Dynamic grid for stats band */
.fk-stats__in {
  grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
}
@media(max-width: 760px) {
  .fk-stats__in {
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
  }
  .fk-stat {
    border-left: 1px solid var(--line);
    padding: 24px 16px;
  }
  /* Remove arbitrary borders on wrap */
  .fk-stat:nth-child(odd) {
    border-left: 0;
  }
}
@media(max-width: 360px) {
  .fk-stats__in {
    grid-template-columns: 1fr;
  }
  .fk-stat {
    border-left: 0;
    border-bottom: 1px solid var(--line);
    padding: 20px 8px;
  }
  .fk-stat:last-child {
    border-bottom: 0;
  }
}

/* Stacking Steps */
@media(max-width: 580px) {
  .fk-steps {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

/* Symmetrical and flexible angle chips */
.fk-anglechip {
  flex: 1 1 calc(33.333% - 8px);
  min-width: 90px;
  padding: 10px 12px;
}
@media(max-width: 440px) {
  .fk-anglechip {
    flex: 1 1 calc(50% - 6px);
  }
}

/* Large touch targets for joints on touch devices */
.is-touch-device .fk-joint {
  cursor: pointer;
}
.is-touch-device .fk-joint::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 38px;
  height: 38px;
  background: transparent;
  pointer-events: auto;
}

/* Biomechanics card mobile scaling */
@media(max-width: 440px) {
  .fk-finding__row {
    flex-wrap: wrap;
    gap: 14px 16px;
    align-items: center;
  }
  .fk-finding__big {
    width: 100%;
    margin-bottom: 2px;
  }
}

/* CTA Form stacking full-width */
@media(max-width: 480px) {
  .fk-cta__form {
    flex-direction: column;
    align-items: stretch;
    gap: 12px;
    margin-top: 24px;
  }
  .fk-cta__input {
    width: 100%;
    min-width: 0;
  }
  .fk-cta__form .fk-btn {
    width: 100%;
  }
}


/* ============================================================================
   HERO-A — JOINT-ANALYSIS CLOSEUP  (expert-instrument treatment)
   Scoped to the hero-a frame; reuses existing tokens only.
   ========================================================================== */
.fk-frame--analysis{
  background:radial-gradient(120% 120% at 50% 0%, #11203a 0%, #0a1018 55%, #06080C 100%);
}
.fk-frame--analysis .fk-frame__grid{opacity:.5;}

/* hero-a redesigned: numbered cyclist skeleton + joint legend */
.fk-joint__num{position:absolute;top:-7px;left:-7px;width:16px;height:16px;border-radius:50%;
  background:var(--accent-2);color:#06080C;font-family:var(--font-mono);font-size:9px;
  font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;
  box-shadow:0 0 0 2px #06080C,0 0 8px var(--accent-2);pointer-events:none;}
.fk-joint--focal .fk-joint__num{background:var(--angle-arc);box-shadow:0 0 0 2px #06080C,0 0 10px var(--angle-arc);}

.fk-legend{position:absolute;left:12px;bottom:12px;z-index:4;font-family:var(--font-mono);
  background:rgba(0,0,0,.5);border:1px solid rgba(255,255,255,.13);
  border-radius:var(--r-sm);backdrop-filter:blur(8px);padding:9px 11px;
  min-width:184px;box-shadow:var(--elev-2);}
.fk-legend__head{font-size:9px;letter-spacing:.16em;text-transform:uppercase;color:var(--fg-3);
  display:flex;align-items:center;gap:6px;margin-bottom:7px;padding-bottom:6px;
  border-bottom:1px solid rgba(255,255,255,.08);}
.fk-legend__head .dim{color:var(--fg-3);opacity:.7;}
.fk-legend__row{display:grid;grid-template-columns:22px 1fr auto;gap:8px;align-items:center;
  font-size:11px;line-height:1;padding:3px 0;color:var(--fg-2);
  font-variant-numeric:tabular-nums;}
.fk-legend__row .n{color:var(--accent-2);text-align:center;font-weight:600;}
.fk-legend__row.is-focal .n{color:var(--angle-arc);}
.fk-legend__row .k{color:var(--fg-1);}
.fk-legend__row.is-focal .k{color:var(--angle-arc);}
.fk-legend__row .v{color:var(--fg-1);font-weight:600;}
.fk-legend__row.is-focal .v{color:#fff;}

@media(max-width:520px){
  .fk-legend{min-width:160px;padding:7px 9px;}
  .fk-legend__row{font-size:10px;}
}

/* ============================================================================
   VIEWER — instrument chrome + live knee-angle gauge rail
   ========================================================================== */
.fk-viewer__stage{overflow:hidden;}
.fk-viewer__reticle{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:1;}
.fk-viewer__reticle .vr{stroke:rgba(255,255,255,.16);stroke-width:1;}
.fk-viewer__reticle .vr.maj{stroke:rgba(255,255,255,.32);}
.fk-viewer__reticle .vr.cr{stroke:rgba(255,255,255,.5);}
.fk-viewer__reticle .vr.ctr{stroke:rgba(255,255,255,.22);}
.fk-viewer__svg{z-index:2;}
.fk-viewer__stat,.fk-viewer__angtag,.fk-gauge{z-index:3;}

.fk-gauge{position:absolute;top:14px;right:13px;bottom:14px;width:46px;
  display:flex;flex-direction:column;align-items:center;gap:8px;pointer-events:none;}
.fk-gauge__k{font-family:var(--font-mono);font-size:9px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--fg-3);writing-mode:initial;}
.fk-gauge__rail{position:relative;flex:1;width:2px;border-radius:2px;
  background:linear-gradient(var(--line-strong),var(--ink-650));}
.fk-gauge__tick{position:absolute;right:2px;width:6px;height:1px;background:rgba(255,255,255,.22);transform:translateY(50%);}
.fk-gauge__tick.maj{width:10px;background:rgba(255,255,255,.4);}
.fk-gauge__num{position:absolute;right:13px;transform:translateY(50%);
  font-family:var(--font-mono);font-size:8.5px;color:var(--fg-3);
  font-variant-numeric:tabular-nums;}
.fk-gauge__rom{position:absolute;left:-3px;width:8px;height:2px;border-radius:1px;
  background:rgba(150,170,195,.55);transform:translateY(50%);transition:bottom var(--t-fast) linear;}
.fk-gauge__marker{position:absolute;left:50%;bottom:50%;width:13px;height:13px;
  transform:translate(-50%,50%);transition:bottom var(--t-fast) linear;}
.fk-gauge__marker::before{content:"";position:absolute;left:50%;top:50%;
  transform:translate(-50%,-50%);width:9px;height:9px;border-radius:50%;
  background:var(--angle-arc);box-shadow:0 0 10px var(--angle-arc);}
.fk-gauge__marker::after{content:"";position:absolute;right:9px;top:50%;
  transform:translateY(-50%);border:5px solid transparent;border-right-color:var(--angle-arc);}
.fk-gauge__val{position:absolute;right:16px;top:50%;transform:translateY(-50%);
  font-family:var(--font-mono);font-variant-numeric:tabular-nums;font-size:11px;font-weight:600;
  color:#06120c;background:var(--angle-arc);padding:1px 5px;border-radius:var(--r-pill);
  white-space:nowrap;box-shadow:0 0 10px rgba(52,221,146,.4);}

@media(max-width:600px){ .fk-gauge{display:none;} }