/* ==========================================================================
   Fabricata Suite 1.0 -- the shared design language of the Fabricata products
   (Cut, Flow, Track, Inspect).

   CANONICAL COPY: fabricata-cut-2026/static/fabricata/suite.css
   The other products carry an identical copy. Do not edit a copy in place:
   change the canonical file and run scripts/sync_fabricata_suite.py.

   What lives here is what the four products must share exactly: the tokens,
   the header, the footer, the family section, the CTA panel, buttons, badges
   and the section heading. Everything is prefixed fx- so it can load next to
   any product's own stylesheet without either touching the other.

   A page opts in by naming its product on the root element:
       <html data-fx-product="flow" data-fx-scheme="auto">
   data-fx-scheme="auto" follows the device's colour scheme (Flow, Track,
   Inspect). "class" follows html[data-theme="dark"] only (Cut, whose public
   site is light unless the visitor has switched the app to dark).

   Colour rule: the product colour marks what is actionable, current or
   belongs to the product -- the primary button, the active link, the product
   designation, badges, selected states. Surfaces stay neutral. A Fabricata
   page is mostly white and slate with one colour doing the work.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Tokens
   -------------------------------------------------------------------------- */
:root{
  /* type: Montserrat 800 for display, Inter for everything else */
  --fx-font-display:"Montserrat", "Inter", system-ui, sans-serif;
  --fx-font-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;

  --fx-text-h1:clamp(2.05rem, 1.15rem + 3.3vw, 3.5rem);
  --fx-text-h2:clamp(1.55rem, 1.1rem + 1.85vw, 2.3rem);
  --fx-text-h3:1.0625rem;
  --fx-text-lede:clamp(1rem, .96rem + .25vw, 1.14rem);
  --fx-text-body:.9375rem;
  --fx-text-small:.8125rem;
  --fx-text-eyebrow:.72rem;
  --fx-text-nav:.9375rem;
  --fx-tracking-display:-.022em;
  --fx-tracking-h2:-.018em;
  --fx-tracking-eyebrow:.14em;

  /* layout: one container, one rhythm */
  --fx-container:1240px;
  --fx-gutter:clamp(20px, 4vw, 40px);
  --fx-section-y:clamp(56px, 7vw, 104px);
  --fx-section-y-tight:clamp(40px, 5vw, 72px);
  --fx-header-h:76px;
  --fx-logo-h:34px;

  /* shape */
  --fx-radius:14px;
  --fx-radius-sm:10px;
  --fx-radius-lg:20px;
  --fx-shadow-sm:0 1px 2px rgba(15,23,42,.05);
  --fx-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.07);

  /* neutrals, shared by every product */
  --fx-ink:#0F172A;
  --fx-slate:#475569;
  --fx-slate-2:#64748B;
  --fx-line:#E2E8F0;
  --fx-line-strong:#CBD5E1;
  --fx-surface:#FFFFFF;
  --fx-surface-2:#F7F9FC;
  --fx-header-bg:rgba(255,255,255,.88);

  /* status, shared */
  --fx-success:#15803D;
  --fx-warning:#B45309;
  --fx-danger:#B91C1C;

  /* the four product colours, for places that show the whole family */
  --fx-cut:#2563EB;
  --fx-flow:#7C3AED;
  --fx-track:#8E2BA3;
  --fx-inspect:#0E7A4F;

  /* the current product; overridden per product below. Cut is the default. */
  --fx-primary:#2563EB;
  --fx-primary-strong:#1D4ED8;
  --fx-primary-deep:#12275E;
  --fx-primary-soft:#EEF4FF;
  --fx-primary-line:#C9D9FB;
  --fx-primary-text:#1D4ED8;
  --fx-on-primary:#FFFFFF;
  --fx-focus:#1D4ED8;
}

/* Each product takes one hue. The 600-weight shade is the brand colour and
   carries white text at AA or better; -strong is hover and small text; -deep
   is the ground of the closing CTA panel; -soft and -line tint the product's
   own highlights. */
[data-fx-product="cut"]{
  --fx-primary:#2563EB; --fx-primary-strong:#1D4ED8; --fx-primary-deep:#12275E;
  --fx-primary-soft:#EEF4FF; --fx-primary-line:#C9D9FB; --fx-primary-text:#1D4ED8;
  --fx-focus:#1D4ED8;
}
[data-fx-product="flow"]{
  --fx-primary:#7C3AED; --fx-primary-strong:#6D28D9; --fx-primary-deep:#2E1065;
  --fx-primary-soft:#F4EFFE; --fx-primary-line:#DCCFFB; --fx-primary-text:#6D28D9;
  --fx-focus:#6D28D9;
}
[data-fx-product="track"]{
  --fx-primary:#8E2BA3; --fx-primary-strong:#74208A; --fx-primary-deep:#3A0F47;
  --fx-primary-soft:#F9EFFB; --fx-primary-line:#EACFF1; --fx-primary-text:#74208A;
  --fx-focus:#74208A;
}
[data-fx-product="inspect"]{
  --fx-primary:#0E7A4F; --fx-primary-strong:#0A6440; --fx-primary-deep:#08331F;
  --fx-primary-soft:#EAF6EF; --fx-primary-line:#BFE3CE; --fx-primary-text:#0A6440;
  --fx-focus:#0A6440;
}

/* Dark: the neutrals invert, the product colours lift so text in them keeps
   AA on the dark surface. Two switches, so each product keeps the dark-mode
   behaviour it already has. */
html[data-theme="dark"]{
  --fx-ink:#E8EEF7; --fx-slate:#A7B7CC; --fx-slate-2:#8698B0;
  --fx-line:#24344B; --fx-line-strong:#33465F;
  --fx-surface:#111C2E; --fx-surface-2:#0D1728; --fx-header-bg:rgba(11,18,32,.86);
  --fx-shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --fx-shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.34);
  --fx-cut:#85B7EB; --fx-flow:#B9A3FB; --fx-track:#DDA3EC; --fx-inspect:#6FD3A2;
}
html[data-theme="dark"][data-fx-product="cut"]{--fx-primary-text:#85B7EB; --fx-primary-soft:#16274A; --fx-primary-line:#27447A; --fx-focus:#93B9F7}
html[data-theme="dark"][data-fx-product="flow"]{--fx-primary-text:#B9A3FB; --fx-primary-soft:#221A3D; --fx-primary-line:#3B2D66; --fx-focus:#C4B5FD}
html[data-theme="dark"][data-fx-product="track"]{--fx-primary-text:#DDA3EC; --fx-primary-soft:#2B1734; --fx-primary-line:#4B2757; --fx-focus:#E6B3F2}
html[data-theme="dark"][data-fx-product="inspect"]{--fx-primary-text:#6FD3A2; --fx-primary-soft:#0F2A1E; --fx-primary-line:#1D4A35; --fx-focus:#8BE3B7}

@media (prefers-color-scheme:dark){
  html[data-fx-scheme="auto"]:not([data-theme="light"]){
    --fx-ink:#E8EEF7; --fx-slate:#A7B7CC; --fx-slate-2:#8698B0;
    --fx-line:#24344B; --fx-line-strong:#33465F;
    --fx-surface:#111C2E; --fx-surface-2:#0D1728; --fx-header-bg:rgba(11,18,32,.86);
    --fx-shadow-sm:0 1px 2px rgba(0,0,0,.3);
    --fx-shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.34);
    --fx-cut:#85B7EB; --fx-flow:#B9A3FB; --fx-track:#DDA3EC; --fx-inspect:#6FD3A2;
  }
  html[data-fx-scheme="auto"]:not([data-theme="light"])[data-fx-product="cut"]{--fx-primary-text:#85B7EB; --fx-primary-soft:#16274A; --fx-primary-line:#27447A; --fx-focus:#93B9F7}
  html[data-fx-scheme="auto"]:not([data-theme="light"])[data-fx-product="flow"]{--fx-primary-text:#B9A3FB; --fx-primary-soft:#221A3D; --fx-primary-line:#3B2D66; --fx-focus:#C4B5FD}
  html[data-fx-scheme="auto"]:not([data-theme="light"])[data-fx-product="track"]{--fx-primary-text:#DDA3EC; --fx-primary-soft:#2B1734; --fx-primary-line:#4B2757; --fx-focus:#E6B3F2}
  html[data-fx-scheme="auto"]:not([data-theme="light"])[data-fx-product="inspect"]{--fx-primary-text:#6FD3A2; --fx-primary-soft:#0F2A1E; --fx-primary-line:#1D4A35; --fx-focus:#8BE3B7}
}

/* --------------------------------------------------------------------------
   2. Primitives: container, type, buttons, badge, mark
   -------------------------------------------------------------------------- */
.fx-container{
  box-sizing:border-box;
  width:100%;
  max-width:var(--fx-container);
  margin-inline:auto;
  padding-inline:var(--fx-gutter);
}
.fx-section{padding-block:var(--fx-section-y)}
.fx-section--tight{padding-block:var(--fx-section-y-tight)}
.fx-section--alt{background:var(--fx-surface-2)}

.fx-sr{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.fx-eyebrow{
  display:inline-block;
  margin:0;
  font-family:var(--fx-font-body);
  font-size:var(--fx-text-eyebrow);
  font-weight:700;
  line-height:1.4;
  letter-spacing:var(--fx-tracking-eyebrow);
  text-transform:uppercase;
  color:var(--fx-primary-text);
}
.fx-h1,.fx-h2{
  margin:0;
  font-family:var(--fx-font-display);
  font-weight:800;
  color:var(--fx-ink);
  letter-spacing:var(--fx-tracking-display);
  text-wrap:balance;
}
.fx-h1{font-size:var(--fx-text-h1); line-height:1.06}
.fx-h2{font-size:var(--fx-text-h2); line-height:1.14; letter-spacing:var(--fx-tracking-h2)}
.fx-h3{
  margin:0;
  font-family:var(--fx-font-body);
  font-size:var(--fx-text-h3);
  font-weight:700;
  line-height:1.35;
  color:var(--fx-ink);
}
.fx-lede{
  margin:0;
  font-family:var(--fx-font-body);
  font-size:var(--fx-text-lede);
  line-height:1.6;
  color:var(--fx-slate);
  max-width:62ch;
}

.fx-section-head{display:grid; gap:12px; max-width:760px; margin-bottom:clamp(28px, 4vw, 44px)}
.fx-section-head--center{margin-inline:auto; text-align:center; justify-items:center}
.fx-section-head--center .fx-lede{margin-inline:auto}
/* Inside a component the primitives are restated one class deeper, so a
   product's own element rules (".page p", ".page h2") cannot restyle them. */
.fx-section-head .fx-eyebrow{margin:0; color:var(--fx-primary-text)}
.fx-section-head .fx-h2{margin:0; font-family:var(--fx-font-display); font-size:var(--fx-text-h2); font-weight:800; line-height:1.14; letter-spacing:var(--fx-tracking-h2); color:var(--fx-ink)}
.fx-section-head .fx-lede{margin:0; font-family:var(--fx-font-body); font-size:var(--fx-text-lede); line-height:1.6; color:var(--fx-slate)}

.fx-btn{
  box-sizing:border-box;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:11px 20px;
  border:1px solid transparent;
  border-radius:var(--fx-radius-sm);
  font-family:var(--fx-font-body);
  font-size:var(--fx-text-body);
  font-weight:600;
  line-height:1.2;
  text-align:center;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .16s linear, border-color .16s linear, color .16s linear;
}
.fx-btn:hover{text-decoration:none}
.fx-btn:active{transform:translateY(1px)}
.fx-btn--sm{min-height:40px; padding:8px 16px}
.fx-btn--lg{min-height:52px; padding:13px 24px; font-size:1rem}
.fx-btn--block{display:flex; width:100%}
.fx-btn--primary{background:var(--fx-primary); border-color:var(--fx-primary); color:var(--fx-on-primary)}
.fx-btn--primary:hover{background:var(--fx-primary-strong); border-color:var(--fx-primary-strong); color:var(--fx-on-primary)}
.fx-btn--secondary{background:var(--fx-surface); border-color:var(--fx-line-strong); color:var(--fx-ink)}
.fx-btn--secondary:hover{border-color:var(--fx-primary); color:var(--fx-primary-text)}
.fx-btn--ghost{background:transparent; color:var(--fx-primary-text); padding-inline:10px}
.fx-btn--ghost:hover{text-decoration:underline; text-underline-offset:3px; color:var(--fx-primary-text)}
.fx-btn svg{flex:none}

.fx-badge{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:3px 10px;
  border-radius:999px;
  border:1px solid var(--fx-primary-line);
  background:var(--fx-primary-soft);
  color:var(--fx-primary-text);
  font-family:var(--fx-font-body);
  font-size:.75rem;
  font-weight:700;
  line-height:1.5;
  white-space:nowrap;
}

/* The Fabricata mark (open ring, square part) drawn in currentColor. */
.fx-mark{display:block; flex:none; color:var(--fx-primary)}
.fx-mark[data-product="cut"]{color:var(--fx-cut)}
.fx-mark[data-product="flow"]{color:var(--fx-flow)}
.fx-mark[data-product="track"]{color:var(--fx-track)}
.fx-mark[data-product="inspect"]{color:var(--fx-inspect)}

.fx-header a:focus-visible,
.fx-header button:focus-visible,
.fx-notice a:focus-visible,
.fx-family a:focus-visible,
.fx-footer a:focus-visible,
.fx-btn:focus-visible{
  outline:3px solid var(--fx-focus);
  outline-offset:2px;
  border-radius:6px;
}

/* --------------------------------------------------------------------------
   3. Notice bar (optional, above the header)
   -------------------------------------------------------------------------- */
.fx-notice{
  background:var(--fx-surface-2);
  border-bottom:1px solid var(--fx-line);
  font-family:var(--fx-font-body);
  font-size:.8125rem;
  color:var(--fx-slate);
}
.fx-notice__row{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:center;
  gap:6px 14px; min-height:40px; padding-block:6px; text-align:center;
}
.fx-notice .fx-notice__row p{margin:0; color:var(--fx-slate)}
.fx-notice__label{
  font-size:.6875rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
  color:var(--fx-primary-text); border:1px solid var(--fx-primary-line); background:var(--fx-surface);
  border-radius:999px; padding:3px 10px;
}
.fx-notice a{color:var(--fx-primary-text); font-weight:700; text-decoration:none}
.fx-notice a:hover{text-decoration:underline; text-underline-offset:3px}
@media (max-width:640px){
  .fx-notice .fx-notice__row p{display:none}
}
@media (max-width:480px){
  .fx-notice__label{display:none}
}

/* --------------------------------------------------------------------------
   4. Header
   Same height, logo size, spacing and behaviour on every product. The only
   things that change are the lockup file, the nav items and the colour.
   -------------------------------------------------------------------------- */
.fx-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--fx-header-bg);
  -webkit-backdrop-filter:saturate(1.4) blur(12px);
  backdrop-filter:saturate(1.4) blur(12px);
  border-bottom:1px solid var(--fx-line);
  font-family:var(--fx-font-body);
  transition:box-shadow .2s linear;
}
.fx-header.is-scrolled{box-shadow:0 6px 24px rgba(15,23,42,.06)}
.fx-header__row{
  position:relative;
  display:flex;
  align-items:center;
  gap:24px;
  min-height:var(--fx-header-h);
}
.fx-brand{
  display:inline-flex;
  align-items:center;
  flex:none;
  min-height:44px;
  text-decoration:none;
}
.fx-brand__logo{display:block; height:var(--fx-logo-h); width:auto; max-width:none}
.fx-brand__logo--dark{display:none}
html[data-theme="dark"] .fx-brand__logo--light{display:none}
html[data-theme="dark"] .fx-brand__logo--dark{display:block}
@media (prefers-color-scheme:dark){
  html[data-fx-scheme="auto"]:not([data-theme="light"]) .fx-brand__logo--light{display:none}
  html[data-fx-scheme="auto"]:not([data-theme="light"]) .fx-brand__logo--dark{display:block}
}

.fx-nav{display:flex; align-items:center; gap:24px; margin-left:auto}
.fx-nav__links{display:flex; align-items:center; gap:4px; margin:0; padding:0; list-style:none}
.fx-nav__links li{margin:0; padding:0}
.fx-nav__link{
  position:relative;
  display:inline-flex;
  align-items:center;
  min-height:40px;
  padding:0 10px;
  border-radius:8px;
  font-size:var(--fx-text-nav);
  font-weight:600;
  line-height:1.2;
  color:var(--fx-slate);
  text-decoration:none;
  white-space:nowrap;
  transition:color .16s linear, background-color .16s linear;
}
.fx-nav__link:hover{color:var(--fx-ink); text-decoration:none}
.fx-nav__link[aria-current="page"]{color:var(--fx-primary-text)}
.fx-nav__link::after{
  content:""; position:absolute; left:10px; right:10px; bottom:4px; height:2px; border-radius:2px;
  background:var(--fx-primary); transform:scaleX(0); transform-origin:left; transition:transform .18s ease;
}
.fx-nav__link:hover::after{transform:scaleX(1); opacity:.35}
.fx-nav__link[aria-current="page"]::after{transform:scaleX(1); opacity:1}
.fx-nav__actions{display:flex; align-items:center; gap:8px}
.fx-nav__actions .fx-nav__link{padding-inline:12px}

.fx-menu-toggle{
  display:none;
  box-sizing:border-box;
  align-items:center;
  justify-content:center;
  width:44px;
  height:44px;
  margin-left:auto;
  padding:0;
  border:1px solid var(--fx-line-strong);
  border-radius:var(--fx-radius-sm);
  background:var(--fx-surface);
  color:var(--fx-ink);
  cursor:pointer;
}
.fx-menu-toggle svg{display:block}
.fx-menu-toggle .fx-icon-close{display:none}
.fx-header.is-open .fx-menu-toggle .fx-icon-open{display:none}
.fx-header.is-open .fx-menu-toggle .fx-icon-close{display:block}

/* Between the full bar and the menu there is a band where six links and two
   actions no longer fit; tighten before collapsing. */
@media (max-width:1180px){
  .fx-nav{gap:14px}
  .fx-nav__link{padding-inline:8px}
}
@media (max-width:960px){
  :root{--fx-header-h:64px; --fx-logo-h:30px}
  .fx-header__row{gap:12px}
  .fx-menu-toggle{display:inline-flex}
  /* Without JavaScript the menu cannot open, so it stays laid out below the
     bar instead. html.fx-js is set by an inline script in each <head>. */
  .fx-nav{
    flex-basis:100%; flex-direction:column; align-items:stretch; gap:12px;
    margin:0; padding:0 0 16px;
  }
  .fx-header__row{flex-wrap:wrap}
  .fx-js .fx-header__row{flex-wrap:nowrap}
  .fx-js .fx-nav{
    display:none;
    position:absolute;
    top:100%;
    left:0;
    right:0;
    padding:8px var(--fx-gutter) 20px;
    background:var(--fx-surface);
    border-bottom:1px solid var(--fx-line);
    box-shadow:0 18px 32px rgba(15,23,42,.10);
    max-height:calc(100vh - var(--fx-header-h));
    max-height:calc(100dvh - var(--fx-header-h));
    overflow-y:auto;
  }
  .fx-js .fx-header.is-open .fx-nav{display:flex}
  html.fx-menu-open{overflow:hidden}
  .fx-nav__links{flex-direction:column; align-items:stretch; gap:0}
  .fx-nav__links li + li{border-top:1px solid var(--fx-line)}
  .fx-nav__link{display:flex; min-height:48px; padding:0 4px; border-radius:0; font-size:1rem}
  .fx-nav__link::after{display:none}
  .fx-nav__link[aria-current="page"]{box-shadow:inset 3px 0 0 var(--fx-primary); padding-left:14px}
  .fx-nav__actions{flex-direction:column-reverse; align-items:stretch; gap:10px}
  .fx-nav__actions .fx-nav__link{
    justify-content:center; min-height:46px; border:1px solid var(--fx-line-strong);
    border-radius:var(--fx-radius-sm); background:var(--fx-surface); color:var(--fx-ink);
  }
  .fx-nav__actions .fx-btn{min-height:46px}
}

/* --------------------------------------------------------------------------
   5. Family section -- "Part of Fabricata"
   -------------------------------------------------------------------------- */
.fx-family{padding-block:var(--fx-section-y); font-family:var(--fx-font-body)}
.fx-family__grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0, 1fr));
  gap:16px;
  margin:0;
  padding:0;
  list-style:none;
}
.fx-family__card{
  position:relative;
  display:flex;
  flex-direction:column;
  gap:10px;
  margin:0;
  padding:22px 22px 20px;
  background:var(--fx-surface);
  border:1px solid var(--fx-line);
  border-radius:var(--fx-radius);
  box-shadow:var(--fx-shadow-sm);
  transition:border-color .16s linear, box-shadow .16s linear;
}
.fx-family__card::before{
  content:""; position:absolute; left:22px; right:22px; top:-1px; height:3px; border-radius:0 0 3px 3px;
  background:var(--fx-card-colour, var(--fx-primary));
}
.fx-family__card[data-product="cut"]{--fx-card-colour:var(--fx-cut)}
.fx-family__card[data-product="flow"]{--fx-card-colour:var(--fx-flow)}
.fx-family__card[data-product="track"]{--fx-card-colour:var(--fx-track)}
.fx-family__card[data-product="inspect"]{--fx-card-colour:var(--fx-inspect)}
.fx-family__card:not(.is-current):hover{border-color:var(--fx-card-colour); box-shadow:var(--fx-shadow)}
.fx-family__card.is-current{background:var(--fx-primary-soft); border-color:var(--fx-primary-line)}
.fx-family__top{display:flex; align-items:center; gap:10px; min-height:32px}
.fx-family .fx-family__name{
  margin:0;
  font-family:var(--fx-font-display);
  font-size:1.125rem;
  font-weight:800;
  line-height:1.2;
  letter-spacing:-.01em;
  color:var(--fx-ink);
}
.fx-family .fx-family__name span{color:var(--fx-card-colour)}
.fx-family .fx-family__role{margin:4px 0 0; font-size:.9375rem; font-weight:700; line-height:1.35; color:var(--fx-ink)}
.fx-family .fx-family__desc{margin:0; font-size:.875rem; line-height:1.6; color:var(--fx-slate)}
.fx-family .fx-family__link{
  margin-top:auto;
  padding-top:8px;
  display:inline-flex;
  align-items:center;
  gap:6px;
  font-size:.875rem;
  font-weight:700;
  color:var(--fx-ink);
  text-decoration:none;
}
.fx-family__link::after{content:""; position:absolute; inset:0; border-radius:var(--fx-radius)}
.fx-family__link svg{transition:transform .16s linear}
.fx-family__card:hover .fx-family__link{color:var(--fx-ink); text-decoration:none}
.fx-family__card:hover .fx-family__link svg{transform:translateX(3px)}
.fx-family .fx-family__here{margin-top:auto; padding-top:8px; font-size:.875rem; font-weight:600; color:var(--fx-primary-text)}
@media (max-width:1080px){.fx-family__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}}
@media (max-width:600px){.fx-family__grid{grid-template-columns:1fr}}

/* --------------------------------------------------------------------------
   6. Closing CTA panel
   The ground is the product's deep shade; a faint drawing in the corner is
   the product's own device -- Cut's measuring ticks, Flow's stage rail,
   Track's progress bars, Inspect's photograph grid.
   -------------------------------------------------------------------------- */
.fx-cta{
  position:relative;
  overflow:hidden;
  display:grid;
  grid-template-columns:minmax(0, 1fr) auto;
  align-items:center;
  gap:24px 40px;
  padding:clamp(28px, 4.4vw, 56px);
  border-radius:var(--fx-radius-lg);
  background:var(--fx-primary-deep);
  color:#fff;
  font-family:var(--fx-font-body);
}
html[data-theme="dark"] .fx-cta{box-shadow:inset 0 0 0 1px rgba(255,255,255,.08)}
.fx-cta > *{position:relative; z-index:1}
.fx-cta .fx-eyebrow{color:rgba(255,255,255,.72)}
.fx-cta .fx-h2{color:#fff; max-width:24ch; margin:8px 0 0}
.fx-cta .fx-eyebrow + .fx-h2{margin-top:10px}
.fx-cta .fx-h2:first-child{margin-top:0}
.fx-cta .fx-cta__text{margin:12px 0 0; color:rgba(255,255,255,.82); line-height:1.6; max-width:60ch}
.fx-cta__actions{display:flex; flex-wrap:wrap; gap:12px; justify-content:flex-end}
.fx-cta .fx-btn--primary{background:#fff; border-color:#fff; color:var(--fx-primary-deep)}
.fx-cta .fx-btn--primary:hover{background:var(--fx-primary-soft); border-color:var(--fx-primary-soft); color:var(--fx-primary-deep)}
html[data-theme="dark"] .fx-cta .fx-btn--primary:hover{background:#E8EEF7; border-color:#E8EEF7}
.fx-cta .fx-btn--secondary{background:transparent; border-color:rgba(255,255,255,.45); color:#fff}
.fx-cta .fx-btn--secondary:hover{border-color:#fff; color:#fff}
.fx-cta a:focus-visible{outline-color:#fff}
.fx-cta::after{content:""; position:absolute; pointer-events:none; z-index:0}
[data-fx-product="cut"] .fx-cta::after{
  right:-40px; bottom:-30px; width:300px; height:120px;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 20px);
}
[data-fx-product="flow"] .fx-cta::after{
  right:32px; bottom:28px; width:280px; height:8px;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.26) 0 50px, transparent 50px 58px);
  border-radius:4px;
}
[data-fx-product="track"] .fx-cta::after{
  right:-10px; bottom:26px; width:260px; height:60px;
  background:
    linear-gradient(rgba(255,255,255,.24), rgba(255,255,255,.24)) 0 0 / 88% 8px no-repeat,
    linear-gradient(rgba(255,255,255,.18), rgba(255,255,255,.18)) 0 26px / 64% 8px no-repeat,
    linear-gradient(rgba(255,255,255,.12), rgba(255,255,255,.12)) 0 52px / 40% 8px no-repeat;
}
[data-fx-product="inspect"] .fx-cta::after{
  right:-20px; bottom:-20px; width:240px; height:150px;
  background-image:
    repeating-linear-gradient(90deg, rgba(255,255,255,.14) 0 1px, transparent 1px 48px),
    repeating-linear-gradient(0deg, rgba(255,255,255,.14) 0 1px, transparent 1px 36px);
}
@media (max-width:860px){
  .fx-cta{grid-template-columns:1fr}
  .fx-cta__actions{justify-content:flex-start}
  .fx-cta::after{opacity:.6}
}
@media (max-width:480px){
  .fx-cta__actions .fx-btn{width:100%}
}

/* --------------------------------------------------------------------------
   7. Footer
   -------------------------------------------------------------------------- */
.fx-footer{
  background:var(--fx-surface-2);
  border-top:1px solid var(--fx-line);
  padding-block:56px 32px;
  font-family:var(--fx-font-body);
  font-size:.875rem;
  color:var(--fx-slate);
}
.fx-footer__grid{
  display:grid;
  grid-template-columns:minmax(0, 1.5fr) repeat(4, minmax(0, 1fr));
  gap:32px;
}
.fx-footer__brand .fx-brand__logo{height:30px}
.fx-footer .fx-footer__blurb{margin:16px 0 0; max-width:36ch; line-height:1.6; color:var(--fx-slate)}
.fx-footer .fx-footer__family-note{margin:12px 0 0; max-width:36ch; font-size:.8125rem; line-height:1.55; color:var(--fx-slate-2)}
.fx-footer__col h2{
  margin:0 0 14px;
  font-family:var(--fx-font-body);
  font-size:.72rem;
  font-weight:700;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fx-slate-2);
}
.fx-footer__col ul{margin:0; padding:0; list-style:none; display:grid; gap:9px}
.fx-footer__col li{margin:0; padding:0; line-height:1.45}
.fx-footer__col a{color:var(--fx-slate); font-weight:500; text-decoration:none}
.fx-footer__col a:hover{color:var(--fx-ink); text-decoration:underline; text-underline-offset:3px}
.fx-footer__col .fx-footer__text{color:var(--fx-slate-2); font-size:.8125rem}
.fx-footer__product{display:inline-flex; align-items:center; gap:8px}
.fx-footer__product[aria-current="page"]{color:var(--fx-ink); font-weight:700}
.fx-footer__base{
  display:flex; flex-wrap:wrap; justify-content:space-between; gap:8px 24px;
  margin-top:44px; padding-top:20px; border-top:1px solid var(--fx-line);
  font-size:.8125rem; color:var(--fx-slate-2);
}
.fx-footer .fx-footer__base p{margin:0; color:var(--fx-slate-2)}
.fx-footer__base a{color:var(--fx-slate-2)}
@media (max-width:960px){
  .fx-footer__grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
  .fx-footer__brand{grid-column:1 / -1}
}
@media (max-width:420px){
  .fx-footer__grid{grid-template-columns:1fr}
}

/* --------------------------------------------------------------------------
   8. Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion:reduce){
  .fx-header, .fx-nav__link, .fx-nav__link::after, .fx-btn,
  .fx-family__card, .fx-family__link svg{transition:none}
  .fx-btn:active{transform:none}
}

/* --------------------------------------------------------------------------
   9. Print: the chrome is not the document
   -------------------------------------------------------------------------- */
@media print{
  .fx-notice, .fx-header, .fx-footer, .fx-family, .fx-cta{display:none !important}
}