/**
 * FILTERD — the parts every tool shares
 * ---------------------------------------------------------------------------
 * Typography, palette, the header, and the handful of element styles that have
 * to match across the audit, the calculator and the planner. Each tool loaded
 * its own copy of all of this, written three times and already drifting, so a
 * change to the brand meant three edits and a hope.
 *
 * Loaded by every tool's index.html, before its own script. Anything specific
 * to one tool stays in that tool.
 * ---------------------------------------------------------------------------
 */

/* Archivo carries its width axis so a tool can set a wider face without a
   second download. The weight range covers every heading in every tool. */
@import url('https://fonts.googleapis.com/css2?family=Archivo:wdth,wght@75..125,400..900&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600;700&display=swap');

:root{
  --ink:#0C0D12; --ink-2:#3A3D4D; --ink-3:#6B6F84;
  --peri:#5B63F0; --peri-2:#8E96FF; --peri-bg:#EEF0FF;
  --line:#DFE1EC; --paper:#F4F5FA;
}

/* ---- type ---------------------------------------------------------------- */
.f-display{font-family:'Archivo',system-ui,sans-serif;letter-spacing:-0.03em;text-transform:uppercase}
.f-body{font-family:'Inter',system-ui,sans-serif}
.f-label{font-family:'JetBrains Mono',ui-monospace,monospace;text-transform:uppercase;letter-spacing:0.08em}
.f-mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-variant-numeric:tabular-nums}

/* ---- the header ---------------------------------------------------------
   One bar across all three tools: the mark, the tool's own name, and a slot
   on the right for whatever that tool needs there. It was three different
   bars before, at three heights, one of them sticky. */
/* The browser's own 8px body margin was showing as a white band above and
   around every page that did not reset it. */
html,body{margin:0}

/* One bar everywhere: the mark, the tools as tabs, and whatever that page
   needs on the right. Full width rather than boxed to the 1240 content column,
   because it is chrome rather than content — a browser does not indent its own
   tab strip to match the page inside it. It also has to be one rule: the
   funnel page and the tools were on different gutters, 48 against 24, which is
   why the two banners did not line up between pages.

   The tabs run to the bottom edge so they join the page below them, so the row
   has no bottom padding and the tabs carry the top space instead — that way
   the mark sits optically centred rather than hanging off their baseline. */
.f-bar{border-bottom:1px solid var(--line);background:var(--paper)}
.f-bar-in{display:flex;align-items:flex-end;gap:28px;padding:0 32px;min-height:50px}
.f-logo{align-self:center}
/* The wordmark from filterd.co.uk rather than a letter in a box. "Toolkit"
   beside it, because the mark says who and this says which. */
.f-logo{display:inline-flex;align-items:center;text-decoration:none;flex:none}
.f-logo img{height:21px;width:auto;display:block}
.f-bar-slot{margin-left:auto;display:flex;align-items:center;gap:10px}
@media (max-width:640px){
  .f-logo img{height:18px}
}

/* ---- the toolkit bar ------------------------------------------------------
   One row across every tool, shaped like the tab strip on a browser: the mark,
   the three tools as tabs with the live one lifted into the page, and whatever
   that tool needs on the right. It was two stacked bars, a hundred pixels of
   chrome before any page began.

   Scoped to .fk-toolpage — the funnel page and the link page keep the plain
   bar underneath. */
.f-sticky{position:sticky;top:0;z-index:60}

.f-tabs{display:flex;align-items:flex-end;gap:3px;min-width:0;margin-top:11px;
  overflow-x:auto;scrollbar-width:none}
.f-tabs::-webkit-scrollbar{display:none}
/* flex:none, or they shrink to fit the bar and clip their own labels rather
   than letting the strip scroll, which is what happens on a phone. */
.f-tab{flex:none;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;color:var(--ink-3);text-decoration:none;
  white-space:nowrap;padding:11px 18px 10px;margin-bottom:-1px;
  background:rgba(255,255,255,.5);border:1px solid var(--line);border-bottom:0;
  border-radius:10px 10px 0 0;transition:color .15s,background .15s}
.f-tab:hover{color:var(--ink);background:rgba(255,255,255,.85)}
.f-tab.on{color:var(--ink);background:#fff;box-shadow:0 -1px 2px rgba(12,13,18,.04)}
/* Visible before anyone has access: the kit is on the page from the first
   screen, it just is not open yet. */
.f-tab-locked{color:var(--ink-3);opacity:.75}
.f-tab-locked::before{content:"";display:inline-block;width:9px;height:11px;margin-right:8px;
  vertical-align:-1px;border:1.5px solid currentColor;border-radius:2px;
  box-shadow:inset 0 3px 0 -1.5px var(--paper),0 -3px 0 -1px currentColor}
.f-tab-locked:hover{opacity:1;background:rgba(255,255,255,.8)}

.f-bar-right{margin-left:auto;display:flex;align-items:center;gap:14px;align-self:center}
.fk-toolpage .f-bar-slot{margin-left:0}
/* Not a tool and not a tab: a pill on the line, in its own colour. */
/* A tinted chip on a tinted bar disappeared. The border is what makes it read
   as a button rather than a label, so it is 2px and the brand colour. */
.f-tab-call{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;text-decoration:none;white-space:nowrap;
  color:var(--peri);background:var(--peri-bg);border:2px solid var(--peri);border-radius:8px;
  padding:6px 12px;transition:background .15s ease,color .15s ease}
.f-tab-call:hover{background:var(--peri);color:#fff}

@media (max-width:640px){
  /* One row will not hold the mark, three tabs and the tool's own controls at
     this width: the tabs are the flexible item, so they collapsed to nothing
     while the controls kept their size. The tabs take the second row and
     scroll; everything else stays on the first. */
  .f-bar-in{flex-wrap:wrap;align-items:center;padding:8px 16px 0;gap:10px}
  .f-bar-right{padding-bottom:0}
  .f-tabs{order:3;width:100%;margin-top:8px}
  .f-tab{font-size:10px;letter-spacing:.07em;padding:10px 12px 9px}
  .f-tab-call{font-size:10px;padding:7px 11px}
}

/* An in-page jump would otherwise land under the sticky header. The audit's
   steps are the only target on a tool page; the funnel page has its own. */
#steps{scroll-margin-top:76px}
.fk [id]{scroll-margin-top:80px}

/* ---- shared surfaces ----------------------------------------------------- */
.mesh{background:
  radial-gradient(60% 80% at 18% 10%, #FFFDF4 0%, rgba(255,253,244,0) 60%),
  radial-gradient(70% 90% at 72% 30%, #AEB7FF 0%, rgba(174,183,255,0) 62%),
  radial-gradient(60% 70% at 95% 85%, #D9C7F5 0%, rgba(217,199,245,0) 60%),
  linear-gradient(180deg,#F2F3FB 0%, #FBFBFE 100%)}
.pill{border-radius:999px}
::selection{background:#5B63F0;color:#fff}

/* ---- controls ------------------------------------------------------------ */
input[type=range]{-webkit-appearance:none;height:4px;border-radius:99px;background:#D3D6E8}
input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;height:20px;width:20px;border-radius:99px;
  background:#0C0D12;border:3px solid #fff;box-shadow:0 1px 5px rgba(12,13,18,.35);cursor:pointer}
input[type=range]::-moz-range-thumb{height:20px;width:20px;border-radius:99px;background:#0C0D12;
  border:3px solid #fff;cursor:pointer}

/* iOS zooms in on any focused field under 16px, which throws the page around
   on every tap. Desktop keeps its density. */
@media (max-width:640px){ input,select,textarea{font-size:16px !important} }

/* On a touch screen a tap counts as a hover and then sticks, so buttons stay
   inverted after being pressed. Only honour hover where there is a pointer. */
@media (hover:none){
  [class*="hover\:"]:hover{background-color:revert-layer !important;color:revert-layer !important;
    border-color:revert-layer !important}
}

/* ===========================================================================
   THE FUNNEL PAGE — everything under .fk
   ---------------------------------------------------------------------------
   The door into the toolkit at `/`, and the vocabulary its sample panels are
   drawn in: a window card, a row with a bar and an amount, a verdict line.
   Those pieces are here rather than in the page because each tool gets the
   same panels above its own header, so they have to match.

   The palette is the toolkit's, which is not yet the palette the three tools
   are drawn in, so it is scoped to .fk rather than sitting on :root. When the
   tools are restyled the two become one and this block loses its own tokens.
   =========================================================================== */

.fk{
  --ink:#12142b; --navy:#232a5c; --navy-deep:#1b2150; --indigo:#5b5bd6;
  --green:#7ed0a0; --green-deep:#2e8f5b; --rose:#e8988c; --red:#c0392b; --amber:#f2c14e;
  --track:#edeff5; --body:#3d4152; --muted:#6b7080; --line:#e3e5ee; --paper:#f4f5f9;

  /* One scale for the whole page. Sizes were set section by section and drifted
     into eleven of them: body copy at 16, 16.5 and 17 doing the same job, one
     section heading at 38 where the rest were 32, and the problem figures at 34
     sitting above the heading they belong under. Every size below is a step,
     and nothing sets a font-size that is not one of these. */
  --t-h1:clamp(40px,4.4vw,56px);   /* the page has one of these */
  --t-h2:clamp(26px,2.6vw,32px);   /* every section heading */
  --t-h3:clamp(20px,1.9vw,23px);   /* every heading inside a section */
  --t-figure:28px;                 /* a number standing on its own */
  --t-lede:18px;                   /* the line under an h1 */
  --t-body:16.5px;
  --t-small:14.5px;                /* captions, asides, form help */
  --t-note:13.5px;
  --t-label:11.5px;                /* mono, uppercase, tracked */

  font-family:'Inter',system-ui,sans-serif; color:var(--ink); background:#fff
}
/* No overflow-x:hidden here, however much the hero's blobs want it: a hidden
   overflow on one axis turns the other into a scroll container, and the page
   then quietly stops answering scrollIntoView — which is how an arrival on
   /#tool-q4-audit lands. The hero clips its own blobs instead. */
/* Kill the browser's default margins on the elements this vocabulary uses.
   Wrapped in :where() so the whole thing weighs nothing: written plainly,
   `.fk h1` is a class and a type and outranks `.fk-thero-h`, which quietly
   deleted the margins every component below sets on itself. A reset should
   lose every argument it has with a component. */
.fk,.fk *,.fk *::before,.fk *::after{box-sizing:border-box}
:where(.fk) :where(h1,h2,h3,h4,p,ul,ol,li,figure,form,fieldset){margin:0;padding:0}
.fk-wrap{max-width:1240px;margin:0 auto;padding:0 48px}
.fk-kicker{color:var(--indigo);font-size:var(--t-label);font-weight:700;letter-spacing:.22em}
.fk h1,.fk h2,.fk h3,.fk h4{font-weight:800;line-height:1.05}
.fk-h1{font-variation-settings:'wdth' 125;font-weight:900;letter-spacing:-.01em;
  font-size:var(--t-h1);line-height:.97;margin:18px 0 20px}
.fk-h1 em{font-style:normal;color:var(--indigo)}
.fk-sub{font-size:var(--t-lede);line-height:1.55;color:var(--body);max-width:26em;margin-bottom:26px}

/* ---- the bar -------------------------------------------------------------
   The shared header, sticky here and carrying two ways in on the right. The
   mark is a link home, because a stranger off an ad has no other way to find
   out who is asking for their email. */
.fk .f-bar{position:sticky;top:0;z-index:50}
.fk .f-mark{text-decoration:none}
.fk-bar-right{margin-left:auto;display:flex;align-items:center;gap:16px;align-self:center;
  font-size:var(--t-note);color:var(--muted)}
.fk-sign{color:var(--indigo);font-weight:600;text-decoration:none}
.fk-btn{display:inline-flex;align-items:center;gap:10px;height:52px;padding:0 24px;border-radius:12px;
  background:var(--navy);color:#fff;font-weight:700;font-size:15.5px;text-decoration:none;
  box-shadow:0 10px 26px rgba(35,42,92,.28);transition:transform .2s ease,box-shadow .2s ease}
.fk-btn:hover{transform:translateY(-1px);box-shadow:0 14px 30px rgba(35,42,92,.34)}
.fk-btn .fk-arr{transition:transform .2s}
.fk-btn:hover .fk-arr{transform:translateX(3px)}
.fk-btn.fk-mini{height:38px;padding:0 16px;font-size:13.5px;border-radius:9px}
.fk-btn:focus-visible,.fk-sign:focus-visible,.fk-tab:focus-visible,.fk-cta:focus-visible{
  outline:3px solid var(--indigo);outline-offset:3px}

/* ---- hero ---------------------------------------------------------------- */
.fk-hero{position:relative;background:#fff;border-bottom:1px solid var(--line)}
@keyframes fk-drift{from{transform:translate(0,0) scale(1)}to{transform:translate(-40px,30px) scale(1.08)}}
.fk-hero-in{position:relative;max-width:1240px;margin:0 auto;padding:64px 48px;
  display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center}
.fk-cta-row{display:flex;align-items:center;gap:18px;flex-wrap:wrap;margin-bottom:22px}
.fk-rise{opacity:0;transform:translateY(14px);animation:fk-rise .7s cubic-bezier(.2,.7,.2,1) forwards}
.fk-d1{animation-delay:.05s}.fk-d2{animation-delay:.15s}.fk-d3{animation-delay:.25s}
.fk-d4{animation-delay:.35s}.fk-d5{animation-delay:.45s}
@keyframes fk-rise{to{opacity:1;transform:none}}

/* ---- the sample panels -------------------------------------------------
   These run on their own smaller sizes (10 to 13px) rather than the page
   scale above. That is deliberate: the panel is pretending to be a piece of
   software, and software is set smaller than a landing page.-
   A window with its three dots, a row per line, a bar and an amount. The
   showcase in the hero rotates three of them; each tool's section shows one. */
.fk-show{position:relative;background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 30px 70px rgba(18,20,43,.16);overflow:hidden;
  opacity:0;transform:translateY(16px) rotate(.4deg);
  animation:fk-rise .8s .25s cubic-bezier(.2,.7,.2,1) forwards}
.fk-show-top{display:flex;align-items:center;gap:6px;padding:12px 16px;
  border-bottom:1px solid var(--line);background:#fafafd}
.fk-dot{width:9px;height:9px;border-radius:50%;background:#e2e4ec;display:inline-block}
.fk-tabs{margin-left:14px;display:flex;gap:4px}
.fk-tab{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;
  text-transform:uppercase;font-weight:700;color:var(--muted);padding:6px 10px;border-radius:7px;
  cursor:pointer;position:relative;overflow:hidden;background:transparent;border:0}
.fk-tab.on{color:var(--ink);background:#fff;box-shadow:0 1px 3px rgba(18,20,43,.08)}
.fk-prog{position:absolute;left:0;bottom:0;height:2px;width:100%;background:var(--indigo);
  transform-origin:left;transform:scaleX(0)}
.fk-tab.on .fk-prog{animation:fk-prog 4.6s linear forwards}
@keyframes fk-prog{to{transform:scaleX(1)}}
.fk-tag{margin-left:auto;font-size:10.5px;letter-spacing:.14em;color:var(--muted);font-weight:700}
/* All three panes share one grid cell, so the card is as tall as the tallest
   of them and nothing gets clipped at the bottom. Stacking them with position:
   absolute meant the container needed a height guessed in advance, and the
   pane with the most in it ran past the edge of the card. Hidden panes keep
   their space with visibility, which also takes them out of the reading
   order — display:none would collapse the card back to one pane's height. */
.fk-panes{display:grid}
.fk-pane{grid-area:1/1;padding:22px 24px 24px;opacity:0;visibility:hidden;transform:translateX(12px);
  pointer-events:none}
/* Only the arriving pane animates. Fading both at once means two sets of
   figures are legible on top of each other for a third of a second, and on a
   tab the browser has stopped painting they can sit like that. */
.fk-pane.on{opacity:1;visibility:visible;transform:none;pointer-events:auto;
  transition:opacity .35s ease,transform .35s ease}
.fk-pane-h{font-family:'Archivo',system-ui,sans-serif;font-weight:800;text-transform:uppercase;
  font-size:13px;margin-bottom:4px}
.fk-lead{font-size:12.5px;color:var(--muted);margin-bottom:14px}
.fk-row{display:grid;grid-template-columns:1.1fr 1.4fr .7fr;gap:12px;align-items:center;
  padding:7px 0;border-top:1px solid var(--line);font-size:12.5px}
/* The rows are wrapped rather than left as siblings of the panel heading, so
   that "the first row" and the stagger below count the rows and not the
   heading above them. */
.fk-rows .fk-row:first-child{border-top:0}
.fk-nm{font-weight:600}
.fk-nm.fk-total{font-weight:700}
.fk-nm.fk-ind{padding-left:12px;color:var(--muted);font-weight:400}
.fk-note{display:block;font-weight:400;color:var(--muted);font-size:11px}
.fk-trk{height:9px;background:var(--track);border-radius:5px;overflow:hidden}
.fk-fill{height:100%;border-radius:5px;transform-origin:left;transform:scaleX(0)}
.on .fk-fill,.in .fk-fill,.fk-thero-card .fk-fill{animation:fk-grow .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes fk-grow{to{transform:scaleX(1)}}
.fk-b{background:var(--navy)}.fk-g{background:var(--green)}
.fk-r{background:var(--rose)}.fk-a{background:var(--amber)}
.fk-amt{text-align:right;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-variant-numeric:tabular-nums;font-size:12.5px;font-weight:700}
.fk-neg{color:var(--red);font-weight:500}.fk-pos{color:var(--green-deep)}.fk-warn{color:#b47d0a}
.fk-stagger .fk-row:nth-child(1) .fk-fill{animation-delay:.05s}
.fk-stagger .fk-row:nth-child(2) .fk-fill{animation-delay:.12s}
.fk-stagger .fk-row:nth-child(3) .fk-fill{animation-delay:.19s}
.fk-stagger .fk-row:nth-child(4) .fk-fill{animation-delay:.26s}
.fk-stagger .fk-row:nth-child(5) .fk-fill{animation-delay:.33s}
.fk-stagger .fk-row:nth-child(6) .fk-fill{animation-delay:.4s}
.fk-stagger .fk-row:nth-child(7) .fk-fill{animation-delay:.47s}
.fk-stagger .fk-row:nth-child(8) .fk-fill{animation-delay:.54s}
.fk-stagger .fk-row:nth-child(9) .fk-fill{animation-delay:.61s}
.fk-stagger .fk-row:nth-child(10) .fk-fill{animation-delay:.68s}
.fk-stats{display:flex;gap:18px;margin-top:14px}
.fk-stats div{flex:1;background:#fafafd;border:1px solid var(--line);border-radius:10px;padding:10px 12px}
.fk-stats small{display:block;font-size:10.5px;letter-spacing:.12em;color:var(--muted);font-weight:700;
  font-family:'JetBrains Mono',ui-monospace,monospace}
.fk-stats b{display:block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:20px;margin-top:4px}
.fk-verdict{margin-top:14px;display:flex;align-items:center;gap:10px;background:#f2fbf6;
  border:1px solid #cdeedb;border-radius:10px;padding:10px 12px;font-size:12.5px;color:#123c26}
.fk-verdict b{font-family:'JetBrains Mono',ui-monospace,monospace}
.fk-verdict.fk-navy{background:#f4f5ff;border-color:#d5d8f0;color:var(--navy)}
.fk-pill{display:inline-block;font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10px;
  letter-spacing:.14em;font-weight:700;padding:4px 8px;border-radius:6px;background:var(--navy);color:#fff}

/* ---- a tool's fold ------------------------------------------------------
   The hero above, with the headline a little smaller — it is a working page,
   not a front door — and the sample panel unrotated beside it. */
/* The left column carries a headline, three lines of how and sometimes two
   buttons, so it gets the wider half here — the reverse of the funnel page,
   where the showcase is the point. */
@media (min-width:961px){
  /* Both columns start on the same line and are measured from the same top,
     rather than being centred against each other — two blocks of different
     height centred on a shared axis is what made this look adrift. */
  .fk-thero .fk-hero-in{grid-template-columns:1fr .95fr;gap:56px;align-items:center;
    padding:56px 24px 60px}
}

/* A tool's fold sits on the same gutter as the tool underneath it — 24px, to
   the same 1240 — so the headline, the strip and the first section below all
   start on one line down the left. The funnel page keeps its wider 48. */
/* fk-toolpage, not fk-tool: fk-tool is a row on the funnel page and putting
   both names on one class turned every tool's header into a two-column grid. */

/* Three sizes that step down clearly — headline, paragraph at about a third of
   it, then the panel's own 12.5px — and a headline with enough mass that its
   half of the fold weighs the same as the card in the other. Centred against
   each other rather than hung from the top: a short column top-aligned beside
   a tall card leaves the whole thing listing to one side. */
.fk-thero-eyebrow{margin-bottom:16px}
.fk-thero-h{font-size:var(--t-h1);line-height:1.02;margin:0 0 24px}
.fk-thero-h em{font-style:normal;color:var(--indigo)}
.fk-thero-card{transform:none}
.fk-thero-cta{margin-top:28px;margin-bottom:0;gap:16px}
.fk-thero-self{font-size:var(--t-small);color:var(--indigo);text-decoration:none;
  border-bottom:1px solid rgba(91,91,214,.35);padding-bottom:2px}
.fk-thero-self:hover{border-bottom-color:var(--indigo)}

/* What the tool does, in a paragraph. Set larger than body copy and on a
   narrow measure so it reads as the second half of the headline rather than
   the start of the page's small print. */
.fk-thero-lede{font-size:var(--t-lede);line-height:1.6;color:var(--body);max-width:32em}
.fk-thero-lede em{font-style:normal;color:var(--indigo);font-weight:500}
.fk-thero-lede b{color:var(--ink);font-weight:600}
.fk-media{display:block;width:100%;height:auto}

/* ---- the three tools ----------------------------------------------------
   The strongest part of the page. Text one side, the tool's own output the
   other, alternating. No icon cards: the panel is the argument. */
.fk-tools{background:#fff;padding:72px 0 40px}
/* Every section heading, by shape rather than by name. Listing the sections
   meant a rename left one unstyled, which is exactly what happened here.
   :where() keeps the weight at zero so any component class still wins. */
:where(.fk) h2{font-family:'Archivo',system-ui,sans-serif;text-transform:uppercase;
  font-size:var(--t-h2);line-height:1.05;margin:12px 0 0;max-width:18em}
/* Every tool reads the same way down the page, numbered, so the three land as
   one set. */
.fk-tool-n{color:var(--indigo);margin-right:10px}
.fk-tool{display:grid;grid-template-columns:1fr 1.05fr;gap:56px;align-items:center;
  padding:52px 0;border-top:1px solid var(--line);margin-top:44px}
.fk-tool:first-of-type{margin-top:0;border-top:0;padding-top:0}
.fk-tool.fk-flip .fk-tool-txt{order:2}
.fk-anim .fk-tool-txt,.fk-anim .fk-tool-vis{opacity:0;transform:translateY(18px);
  transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.fk-anim .fk-tool.in .fk-tool-txt,.fk-anim .fk-tool.in .fk-tool-vis{opacity:1;transform:none}
/* Scoped to the text column, not the whole row: the sample panel beside it
   carries its own h3, and `.fk-tool h3` would outrank the class that styles
   it. Same for the paragraphs. */
.fk-tool-txt h3{font-family:'Archivo',system-ui,sans-serif;text-transform:uppercase;font-size:var(--t-h3);
  line-height:1.06;margin:10px 0 16px}
.fk-tool-txt p{font-size:var(--t-body);line-height:1.55;color:var(--body);max-width:32em;margin-bottom:10px}
.fk-outputs{list-style:none;display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.fk-outputs li{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--t-label);letter-spacing:.06em;
  text-transform:uppercase;font-weight:700;color:var(--navy);background:#f4f5ff;border:1px solid #d9dcf2;
  border-radius:7px;padding:6px 10px}

/* The frame a tool's own output sits in, on this page and in each tool's
   header. It went missing with the section that used to hold it. */
.fk-card{background:#fff;border:1px solid var(--line);border-radius:16px;
  box-shadow:0 18px 44px rgba(18,20,43,.10);overflow:hidden}
.fk-card .fk-show-top{padding:11px 14px}
.fk-card-body{padding:20px 22px 22px}
.fk-card-h{font-family:'Archivo',system-ui,sans-serif;font-weight:800;text-transform:uppercase;
  font-size:13px;line-height:1.2;margin-bottom:12px;color:var(--ink)}

/* ---- a few reasons ------------------------------------------------------
   Six situations, two up. Bordered but unmarked: an icon in the margin, and
   especially a red cross, turns a situation into a verdict on the reader. */
.fk-reasons{background:var(--paper);border-top:1px solid var(--line);padding:72px 0}
.fk-reason-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin:34px 0 0}
.fk-reason{background:#fff;border:1px solid var(--line);border-radius:14px;padding:22px 24px;
  display:grid;grid-template-columns:22px 1fr;gap:14px;align-items:start}
.fk-reason i{width:22px;height:22px;border-radius:50%;background:var(--green);display:grid;
  place-items:center;font-size:12px;font-style:normal;font-weight:800;color:#123c26;margin-top:1px}
.fk-reason h3{font-family:'Inter',system-ui,sans-serif;font-size:var(--t-body);font-weight:600;
  line-height:1.4;color:var(--ink);margin-bottom:6px;text-transform:none;letter-spacing:0}
.fk-reason p{font-size:var(--t-small);line-height:1.55;color:var(--muted)}
/* The way into the tools. A statement, not a heading, so the section does not
   land on "here are the solutions". */
.fk-bridge{margin-top:34px;font-size:var(--t-h3);font-weight:800;color:var(--ink);
  text-transform:uppercase;letter-spacing:-.01em}

/* ---- who built this -----------------------------------------------------
   A heading and a video. Three paragraphs and a logo strip said the same
   things with none of the stories attached, which is the part that only
   carries in someone's voice. */
.fk-proof{background:#fff;border-top:1px solid var(--line);padding:72px 0}
.fk-proof-in{max-width:56em;margin:0 auto;text-align:center}
.fk-proof h2{margin-left:auto;margin-right:auto}
.fk-video{position:relative;margin-top:34px;aspect-ratio:16/9;border-radius:16px;overflow:hidden;
  border:1px solid var(--line);background:#0f1030;
  box-shadow:0 24px 60px rgba(18,20,43,.16)}
.fk-video video{width:100%;height:100%;display:block;object-fit:cover}
/* Waiting for the file. Deliberately inert: a play button that does nothing
   when pressed is worse than an empty frame that explains itself. */
.fk-video-wait{display:grid;place-items:center;gap:16px;align-content:center;
  background:linear-gradient(140deg,#151742,#232a5c 60%,#3a3f86)}
.fk-play{width:66px;height:66px;border-radius:50%;background:rgba(255,255,255,.94);
  display:grid;place-items:center;box-shadow:0 10px 30px rgba(0,0,0,.28)}
.fk-play::after{content:"";border-style:solid;border-width:11px 0 11px 18px;
  border-color:transparent transparent transparent var(--navy);margin-left:5px}
.fk-video-label{font-size:var(--t-label);font-weight:700;color:rgba(255,255,255,.62)}
.fk-video-cap{margin-top:18px;font-size:var(--t-small);color:var(--muted)}
@media (max-width:640px){
  .fk-video{margin-top:26px;border-radius:12px}
  .fk-play{width:52px;height:52px}
  .fk-play::after{border-width:9px 0 9px 15px}
}

/* ---- apply -------------------------------------------------------------- */
.fk-apply{padding:72px 0;
  background:radial-gradient(800px 380px at 50% 0%,rgba(91,91,214,.12),transparent 60%),#fff}
.fk-apply-in{max-width:1240px;margin:0 auto;padding:0 48px;
  display:grid;grid-template-columns:.9fr 1.1fr;gap:56px;align-items:start}
.fk-apply h2{margin-bottom:14px}
.fk-apply-p{font-size:var(--t-body);color:var(--body);line-height:1.55;max-width:30em}
.fk-manual{margin-top:18px;font-size:var(--t-small);line-height:1.55;color:var(--ink);max-width:30em;
  border-left:2px solid var(--green);padding-left:14px}
.fk-approved{margin-top:16px;font-size:var(--t-small);line-height:1.55;color:var(--body);max-width:30em}
/* Beside the button in the hero: free, read by a person, who it is for.
   Not .fk-note, which is the small line under a name inside a sample panel. */
.fk-hero-note{font-size:var(--t-note);line-height:1.55;color:var(--muted);max-width:32em;margin-top:18px}
.fk-k{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:10.5px;letter-spacing:.12em;
  font-weight:700;color:var(--green-deep);padding-top:4px}
.fk-form{background:#fff;border:1px solid var(--line);border-radius:18px;
  box-shadow:0 30px 70px rgba(18,20,43,.14);overflow:hidden}
.fk-form-top{padding:20px 26px 4px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.fk-form-top h3{font-family:'Archivo',system-ui,sans-serif;text-transform:uppercase;font-size:var(--t-h3)}
.fk-form-top .fk-k{color:var(--muted)}
.fk-form form{padding:14px 26px 22px;display:grid;gap:12px}
.fk-two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.fk-form label{display:block;font-size:12.5px;font-weight:600;margin-bottom:6px}
.fk-form label small{font-weight:400;color:var(--muted)}
.fk-form input,.fk-form select{width:100%;height:46px;border:1px solid #d5d8e6;border-radius:10px;
  padding:0 13px;font:inherit;font-size:14.5px;color:var(--ink);background:#fafafd;
  transition:border-color .15s,box-shadow .15s}
.fk-form input:focus,.fk-form select:focus{outline:none;border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(91,91,214,.15)}
.fk-form select{appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
    linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 18px) 20px,calc(100% - 13px) 20px;
  background-size:5px 5px;background-repeat:no-repeat}
.fk-form input.fk-bad,.fk-form select.fk-bad{border-color:var(--red);background:#fffafa}
.fk-err{display:block;margin-top:5px;font-size:12px;color:var(--red);line-height:1.4}
/* Off the page rather than display:none, which some browsers skip when they
   fill a form in and every bot fills in regardless. */
/* display:none rather than parked off-screen. Off-screen still counts as a
   field to Chrome and to every password manager, and they fill it. A robot
   reading the HTML does not read this file at all. */
.fk-hp{display:none}
.fk-cta{height:52px;border:0;border-radius:11px;background:var(--navy);color:#fff;font:inherit;
  font-weight:700;font-size:15.5px;box-shadow:0 8px 22px rgba(35,42,92,.28);margin-top:4px;
  cursor:pointer;transition:transform .2s}
.fk-cta:hover{transform:translateY(-1px)}
.fk-fine{font-size:12px;color:var(--muted);line-height:1.55;text-align:center}
.fk-fine b{color:var(--ink);font-weight:600}
.fk-cta[disabled]{opacity:.6;cursor:default;transform:none}
.fk-sent{padding:34px 26px 38px;text-align:center}
.fk-sent h3{font-family:'Archivo',system-ui,sans-serif;text-transform:uppercase;font-size:var(--t-h3);margin-bottom:10px}
.fk-sent p{font-size:var(--t-small);color:var(--body);line-height:1.55;max-width:26em;margin:0 auto}
.fk-fail{background:#fffafa;border:1px solid #f0d4d4;border-radius:10px;padding:11px 13px;
  font-size:13px;color:var(--red);line-height:1.5}
.fk-fail a{color:var(--red);font-weight:600}
/* One card, centred — the sign-in page and anything else that is a single
   short exchange rather than a page to read. */
.fk-slim{max-width:520px;margin:0 auto;padding:0 24px}
.fk-slim .fk-apply-p{margin-bottom:4px}
.fk-foot{border-top:1px solid var(--line);padding:22px 0;font-size:var(--t-note);color:var(--muted);line-height:1.6}
.fk-foot a{color:var(--ink);font-weight:600;text-decoration:none;border-bottom:1px solid var(--line)}
.fk-foot a:hover{border-bottom-color:var(--ink)}
.fk-noscript{background:#fff4f4;border-bottom:1px solid #f0d4d4;color:#7a2b22;
  padding:12px 48px;font-size:13.5px}

@media (max-width:960px){
  .fk-hero-in,.fk-apply-in{grid-template-columns:1fr;gap:36px;padding:44px 24px}
  .fk-wrap{padding-left:24px;padding-right:24px}
  /* A tool keeps matching the tool below it, which is 16 at this width. */
  .fk-toolpage .fk-hero-in{padding-left:16px;padding-right:16px}
  .fk-noscript{padding:12px 24px}
  .fk-two{grid-template-columns:1fr}
  .fk-show{transform:none}
  .fk-bar-right span{display:none}
}
/* The showcase panes are stacked on top of each other and sized by the tallest,
   which on a narrow screen is tall enough to leave the short ones floating. */
@media (max-width:520px){
  .fk-row{grid-template-columns:1.2fr 1fr;gap:10px}
  .fk-row .fk-trk{display:none}
  .fk-stats{flex-wrap:wrap}
  /* Three tab names and the sample-data mark will not share one line at this
     width — the first tab loses its last letters and the mark its first. The
     tabs take a line of their own underneath. */
  .fk-show-top{flex-wrap:wrap}
  .fk-tabs{order:3;width:100%;margin:8px 0 0;justify-content:space-between}
  .fk-tab{padding:6px 8px;letter-spacing:.08em}
}
@media (prefers-reduced-motion:reduce){
  .fk *,.fk *::before,.fk *::after{animation:none !important;transition:none !important}
  .fk-rise,.fk-show,.fk-tool-txt,.fk-tool-vis{opacity:1 !important;transform:none !important}
  .fk-fill{transform:none !important}
}

/* ---- the gate -----------------------------------------------------------
   The screen in front of a gated tool. One column down the middle, sized to
   sit inside a screen rather than run off the bottom of one: five questions
   paired across two columns, and no heading above them because the mark says
   whose this is.

   It borrows the funnel's form wholesale — same classes, same errors, same
   navy button — so there is one form on this site and not two that drift. */
.gt-wrap{position:relative;min-height:100svh;background:var(--paper);
  display:flex;align-items:center;justify-content:center;padding:28px 24px;overflow:hidden}

/* One soft wash of the brand indigo behind the card, so the page is not a
   white box on a grey field. */
.gt-glow{position:absolute;inset:auto 50% 100% 50%;width:min(1100px,150vw);height:min(1100px,150vw);
  transform:translate(-50%,55%);border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(91,91,214,.16),rgba(91,91,214,.05) 45%,transparent 68%)}

.gt-in{position:relative;width:100%;max-width:1080px;margin:0 auto}
/* The ask on the left, and on the right the thing being asked for. The mark,
   the sentence and the code row stay down the middle of the page. */
.gt-cols{display:grid;grid-template-columns:minmax(0,460px) minmax(0,1fr);gap:44px;
  align-items:center}
.gt-show{min-width:0;margin:0;animation-delay:.1s}
.gt-say{text-align:center;margin-bottom:20px}
.gt-mark{height:34px;width:auto;display:block;margin:0 auto 14px}
.gt-p{font-size:15.5px;line-height:1.5;color:var(--body);margin:0 auto;max-width:56ch}

.gt-card{margin:0;border-radius:18px;box-shadow:0 24px 60px rgba(18,20,43,.13)}
.gt-card form{padding:20px 24px 16px;gap:12px}
.gt-card .fk-cta{width:100%;height:48px;margin-top:4px}
.gt-card .fk-fine{margin-top:8px}

/* Under the card, and quiet: findable by anyone holding a code, not readable
   as the way in by anyone who is not. */
.gt-have{margin-top:20px;padding-top:16px;border-top:1px solid var(--line);text-align:center}
.gt-have label{display:block;margin-bottom:8px}
.gt-have label span{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:11px;
  letter-spacing:.14em;text-transform:uppercase;font-weight:700;color:var(--muted)}
.gt-code-row{display:flex;gap:10px;max-width:420px;margin:0 auto}
.gt-code-row input{flex:1 1 auto;min-width:0;height:48px;border:1px solid #d5d8e6;
  border-radius:11px;padding:0 14px;font:inherit;font-size:15px;color:var(--ink);
  background:#fff;transition:border-color .15s,box-shadow .15s}
.gt-code-row input::placeholder{color:var(--muted)}
.gt-code-row input:focus{outline:none;border-color:var(--indigo);
  box-shadow:0 0 0 3px rgba(91,91,214,.15)}
.gt-code-row input.fk-bad{border-color:var(--red);background:#fffafa}
.gt-open{flex:0 0 auto;height:48px;white-space:nowrap;padding:0 20px;margin-top:0;
  box-shadow:0 6px 16px rgba(35,42,92,.22)}
.gt-have .fk-err{max-width:420px;margin:6px auto 0}


/* One column, and the sample under the form rather than beside it: it is
   what you are being offered, not what you are being asked. */
@media (max-width:1020px){
  .gt-in{max-width:600px}
  .gt-cols{grid-template-columns:minmax(0,1fr);gap:28px}
}
/* On a phone the sample panel is a screenful of scrolling before the first
   field, on a page whose whole job is the first field. It earns its place on
   a wide screen, beside the form, and nowhere else. */
@media (max-width:760px){
  .fk-thero-card{display:none}
  .gt-show{display:none}
}

@media (max-width:560px){
  .gt-wrap{padding:28px 18px}
  .gt-card form{padding:20px 18px 16px}
  .gt-code-row{flex-direction:column}
  .gt-open{width:100%}
}

/* ---- the floating booking button -----------------------------------------
   A mark in the corner that says what it is when you go near it. Shut, it is
   an icon; open, it is the offer in a sentence. Both states are one link to
   the same booking page, so it works with the embed blocked.

   Not on a phone: a fixed corner button there sits on top of the tool rather
   than beside it. And not over the gate — that screen has one thing to do. */
.fk-float{position:fixed;right:20px;bottom:20px;z-index:40;display:block;width:52px;height:52px;
  text-decoration:none;font-family:'Inter',ui-sans-serif,system-ui,sans-serif}
.fk-float-mark{display:grid;place-items:center;width:52px;height:52px;border-radius:50%;
  background:var(--peri);color:#fff;border:2px solid #fff;box-shadow:0 10px 26px rgba(35,42,92,.26);
  transition:transform .18s ease,box-shadow .18s ease}
.fk-float:hover .fk-float-mark,.fk-float:focus-visible .fk-float-mark{
  transform:translateY(-2px);box-shadow:0 14px 30px rgba(35,42,92,.32)}
/* Absolute, so the shut widget is the circle and nothing else. Laid out in
   flow it wrapped one character per line at zero width, which left a 54x410
   invisible link lying over the right-hand side of the tool. */
.fk-float-say{position:absolute;right:63px;bottom:0;width:264px;
  opacity:0;visibility:hidden;pointer-events:none;transform:translateX(10px);
  background:#fff;border:1px solid var(--line);border-radius:14px;padding:13px 15px;
  box-shadow:0 12px 30px rgba(35,42,92,.16);
  transition:opacity .2s ease,transform .26s ease,visibility .26s;transition-delay:.2s}
/* Opens at once, closes on a delay. Without the grace period the card went
   the instant the pointer left the circle, which is mid-reach for anybody
   moving towards the card to read or click it. */
.fk-float:hover .fk-float-say,.fk-float:focus-within .fk-float-say{
  opacity:1;visibility:visible;pointer-events:auto;transform:none;transition-delay:0s}
/* The gap between the card and the circle belongs to neither, so crossing it
   ended the hover and took the card away mid-reach. This bridges it: invisible,
   inside the link, and only there to keep the pointer on the button. */
.fk-float-say::after{content:"";position:absolute;top:0;bottom:0;left:100%;width:13px}
.fk-float-say b{display:block;font-size:13.5px;font-weight:700;color:var(--ink);line-height:1.35}
.fk-float-say span{display:block;margin-top:3px;font-size:13px;line-height:1.45;color:var(--ink-3)}
.fk-float-say em{display:block;margin-top:7px;font-style:normal;font-family:'JetBrains Mono',ui-monospace,monospace;
  font-size:10.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--peri)}
body:has(.gt-wrap) .fk-float{display:none}
@media (max-width:760px){ .fk-float{display:none} }