/* ==========================================================================
   Fabricata Cut landing page
   Loaded only on the landing route. Everything is scoped under .fc so it can
   never collide with app.css section or element rules, especially on padding
   and margins. No token defined here leaks into the authenticated app.

   Design language: measurement, allocation and proof. Structural devices echo
   the kerf idea in the logo (a deliberate gap in a continuous run) without
   ever reproducing the mark itself.
   ========================================================================== */

.fc{
  /* --- anchor and blue family (locked: #2563EB stays dominant) --- */
  --fc-blue:#2563EB;
  --fc-blue-deep:#1B4ACB;
  --fc-navy:#12275E;
  --fc-blue-light:#85B7EB;
  --fc-blue-pale:#E6F1FB;
  /* Blue used as small text. Splits from --fc-blue in dark mode, where #2563EB
     only reaches 3.30:1 on the dark surface and would fail AA for body-size text. */
  --fc-blue-text:#2563EB;

  /* --- cool neutral ramp --- */
  --fc-ink:#0F172A;
  --fc-slate:#475569;
  --fc-slate-2:#64748B;
  --fc-line:#E2E8F0;
  --fc-line-soft:#EDF2F8;
  --fc-surface:#FFFFFF;
  --fc-surface-2:#F7F9FC;
  --fc-bg:#FFFFFF;

  /* --- the one semantic accent: recovered / reusable offcut --- */
  --fc-reclaim:#9A5B06;        /* text-safe on light  */
  --fc-reclaim-fill:#F2A03D;   /* fills and bar tails */
  --fc-reclaim-pale:#FDF2E3;

  /* --- kerf slice --- */
  --fc-kerf:#1E293B;

  --fc-focus:#1B4ACB;
  --fc-radius:14px;
  --fc-radius-sm:10px;
  --fc-shadow:0 1px 2px rgba(15,23,42,.04), 0 12px 32px rgba(15,23,42,.06);
  /* Data face. Figures, part numbers and heat numbers set in Inter with tabular
     numerals: columns still align because every digit is the same width, but the
     page no longer reads as engineering terminal output. */
  --fc-data:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --fc-display:"Montserrat", "Inter", system-ui, sans-serif;
  --fc-body:"Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
}

html[data-theme="dark"] .fc{
  --fc-navy:#8FB6F5;
  --fc-blue-light:#6E9FD8;
  --fc-blue-text:#85B7EB;   /* 8.11:1 on --fc-surface, an approved brand blue */
  --fc-blue-pale:#16274A;
  --fc-ink:#E8EEF7;
  --fc-slate:#A7B7CC;
  --fc-slate-2:#8698B0;
  --fc-line:#24344B;
  --fc-line-soft:#1B2942;
  --fc-surface:#111C2E;
  --fc-surface-2:#0D1728;
  --fc-bg:#0B1220;
  --fc-reclaim:#F6C179;
  --fc-reclaim-fill:#E8A34E;
  --fc-reclaim-pale:#2A2013;
  --fc-kerf:#050A14;
  --fc-focus:#93B9F7;
  --fc-shadow:0 1px 2px rgba(0,0,0,.3), 0 12px 32px rgba(0,0,0,.34);
}

/* --------------------------------------------------------------------------
   Base and rhythm
   -------------------------------------------------------------------------- */
.fc{
  background:var(--fc-bg);
  color:var(--fc-ink);
  font-family:var(--fc-body);
  -webkit-font-smoothing:antialiased;
}
.fc *,
.fc *::before,
.fc *::after{box-sizing:border-box}

.fc-wrap{
  width:100%;
  max-width:1240px;
  margin-inline:auto;
  padding-inline:clamp(20px, 4vw, 40px);
}

.fc-section{padding-block:clamp(56px, 7vw, 104px)}
.fc-section--tight{padding-block:clamp(40px, 5vw, 72px)}
.fc-section--alt{background:var(--fc-surface-2)}

/* Section divider: a measurement rule. Ticks are drawn with a repeating
   gradient, and one deliberate gap echoes the kerf without copying the mark. */
.fc-rule{
  height:1px;
  border:0;
  margin:0;
  background:
    linear-gradient(90deg, var(--fc-line) 0 32%, transparent 32% 36%, var(--fc-line) 36% 100%);
}
.fc-ticks{
  height:10px;
  background-image:repeating-linear-gradient(90deg, var(--fc-line) 0 1px, transparent 1px 16px);
  opacity:.55;
}

/* --------------------------------------------------------------------------
   Type scale
   -------------------------------------------------------------------------- */
.fc h1,.fc h2,.fc h3,.fc h4{margin:0; color:var(--fc-ink)}
.fc h1{
  font-family:var(--fc-display);
  font-weight:800;
  font-size:clamp(2.05rem, 1.15rem + 3.3vw, 3.5rem);
  line-height:1.06;
  letter-spacing:-.022em;
  text-wrap:balance;
}
.fc h2{
  font-family:var(--fc-display);
  font-weight:800;
  font-size:clamp(1.55rem, 1.1rem + 1.85vw, 2.3rem);
  line-height:1.14;
  letter-spacing:-.018em;
  text-wrap:balance;
}
.fc h3{
  font-family:var(--fc-body);
  font-weight:700;
  font-size:1.0625rem;
  line-height:1.35;
  letter-spacing:-.005em;
}
.fc p{margin:0; color:var(--fc-slate); line-height:1.65}
.fc .fc-lead{
  font-size:clamp(1rem, .96rem + .25vw, 1.14rem);
  line-height:1.6;
  color:var(--fc-slate);
  max-width:62ch;
}
/* Scoped as .fc .fc-eyebrow so it outranks the element rules above. As a bare class
   it lost to .fc h2 whenever an eyebrow was applied to a heading, which rendered the
   legal contents title at full display size. */
.fc .fc-eyebrow{
  display:inline-block;
  font-size:.7rem;
  font-weight:600;
  letter-spacing:.15em;
  text-transform:uppercase;
  color:var(--fc-blue-text);
}
.fc-data{
  font-family:var(--fc-data);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  letter-spacing:-.01em;
}
.fc-stack > * + *{margin-top:var(--fc-gap, 16px)}

/* --------------------------------------------------------------------------
   Buttons and focus
   -------------------------------------------------------------------------- */
.fc-btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  min-height:46px;
  padding:12px 20px;
  border-radius:var(--fc-radius-sm);
  border:1px solid transparent;
  font-family:var(--fc-body);
  font-size:.9375rem;
  font-weight:600;
  line-height:1.2;
  text-decoration:none;
  cursor:pointer;
  transition:background-color .16s linear, border-color .16s linear, color .16s linear, transform .16s linear;
}
.fc-btn--primary{background:var(--fc-blue); color:#fff; border-color:var(--fc-blue)}
.fc-btn--primary:hover{background:var(--fc-blue-deep); border-color:var(--fc-blue-deep)}
.fc-btn--secondary{background:var(--fc-surface); color:var(--fc-ink); border-color:var(--fc-line)}
.fc-btn--secondary:hover{border-color:var(--fc-blue); color:var(--fc-blue)}
.fc-btn--ghost{background:transparent; color:var(--fc-blue-text); border-color:transparent; padding-inline:10px}
.fc-btn--ghost:hover{color:var(--fc-blue-deep); text-decoration:underline; text-underline-offset:3px}
.fc-btn:active{transform:translateY(1px)}

.fc a:focus-visible,
.fc button:focus-visible,
.fc summary:focus-visible{
  outline:3px solid var(--fc-focus);
  outline-offset:2px;
  border-radius:6px;
}

.fc-cta-row{display:flex; flex-wrap:wrap; gap:12px; align-items:center}
.fc-fineprint{font-size:.8125rem; color:var(--fc-slate-2); line-height:1.55; max-width:64ch}

/* --------------------------------------------------------------------------
   Cards
   -------------------------------------------------------------------------- */
.fc-card{
  background:var(--fc-surface);
  border:1px solid var(--fc-line);
  border-radius:var(--fc-radius);
  padding:22px;
  transition:border-color .16s linear, transform .16s linear;
}
.fc-card:hover{border-color:var(--fc-blue-light); transform:translateY(-2px)}
/* Explicit column counts. auto-fit picks whatever fits, which repeatedly left a
   short final row: four modules going 3 + 1 at 900px, three report cards going
   2 + 1 at 768px. Each modifier is used with a fixed number of items, so the
   counts below always divide evenly and no card is ever stranded alone. */
.fc-grid{display:grid; gap:16px}
.fc-grid--2{grid-template-columns:1fr}
@media (min-width:720px){.fc-grid--2{grid-template-columns:repeat(2,1fr)}}

.fc-grid--3{grid-template-columns:1fr}
@media (min-width:700px){.fc-grid--3{grid-template-columns:repeat(3,1fr)}}

.fc-grid--4{grid-template-columns:1fr}
@media (min-width:560px){.fc-grid--4{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1100px){.fc-grid--4{grid-template-columns:repeat(4,1fr)}}

.fc-tag{
  display:inline-flex;
  align-items:center;
  padding:5px 10px;
  border-radius:999px;
  background:var(--fc-blue-pale);
  color:var(--fc-blue-deep);
  font-size:.72rem;
  font-weight:600;
  letter-spacing:.04em;
}
html[data-theme="dark"] .fc-tag{color:#BBD5FB}

.fc-icon{width:22px; height:22px; display:block; color:var(--fc-blue); flex:0 0 auto}
.fc-icon--lg{width:26px; height:26px}

/* --------------------------------------------------------------------------
   HERO
   -------------------------------------------------------------------------- */
.fc-hero{
  position:relative;
  padding-block:clamp(40px, 5.5vw, 84px) clamp(48px, 6vw, 92px);
  overflow:hidden;
}
/* Low-contrast steel motif: measurement ticks bleeding off the top right. */
.fc-hero::before{
  content:"";
  position:absolute;
  inset:0 0 auto auto;
  width:min(46%, 560px);
  height:190px;
  background-image:repeating-linear-gradient(90deg, var(--fc-line) 0 1px, transparent 1px 22px);
  opacity:.4;
  pointer-events:none;
  -webkit-mask-image:linear-gradient(200deg, #000, transparent 72%);
  mask-image:linear-gradient(200deg, #000, transparent 72%);
}
.fc-hero-grid{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(32px, 4vw, 52px);
  position:relative;
}
@media (min-width:1040px){
  .fc-hero-grid{grid-template-columns:minmax(0,0.92fr) minmax(0,1.08fr); align-items:start}
}
.fc-hero-copy{--fc-gap:20px}
.fc-hero-badges{display:flex; flex-wrap:wrap; gap:8px}

/* Three facts, so three columns or one, never two with an orphan underneath.
   auto-fit with a 190px minimum sat exactly on the wrap threshold once the hero
   split into two columns, which dropped "Bill in" onto a row of its own from
   1180px up. minmax(0,1fr) lets the columns shrink instead of wrapping. */
.fc-proof{
  display:grid;
  grid-template-columns:1fr;
  gap:0;
  border-top:1px solid var(--fc-line);
}
@media (min-width:620px){
  .fc-proof{grid-template-columns:repeat(3, minmax(0,1fr))}
}
.fc-proof > div{
  padding:14px 18px 14px 0;
  border-right:1px solid var(--fc-line);
}
.fc-proof > div:last-child{border-right:0}
.fc-proof span{
  display:block;
  font-size:.68rem;
  font-weight:600;
  letter-spacing:.14em;
  text-transform:uppercase;
  color:var(--fc-blue-text);
  margin-bottom:5px;
}
.fc-proof strong{display:block; font-size:.875rem; font-weight:600; line-height:1.45; color:var(--fc-ink)}
@media (max-width:640px){
  .fc-proof > div{border-right:0; border-bottom:1px solid var(--fc-line); padding-right:0}
  .fc-proof > div:last-child{border-bottom:0}
}

/* --------------------------------------------------------------------------
   SIGNATURE ELEMENT: bar allocation visual
   A 13,000mm stock bar filling with labelled cut segments, kerf slices shown
   as thin dark rules, and the tail remnant marked as a recovered offcut.
   Percentages are true to the millimetre figures in the labels.
   -------------------------------------------------------------------------- */
.fc-alloc{
  background:var(--fc-surface);
  border:1px solid var(--fc-line);
  border-radius:var(--fc-radius);
  box-shadow:var(--fc-shadow);
  overflow:hidden;
}
.fc-alloc-head{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  padding:14px 18px;
  border-bottom:1px solid var(--fc-line);
  background:var(--fc-surface-2);
  flex-wrap:wrap;
}
.fc-alloc-head strong{font-size:.875rem; font-weight:700; color:var(--fc-ink)}
/* Scoped off .fc-tag: the bare element selector here (0,1,1) outranks .fc-tag (0,1,0),
   which stripped the chip's blue and left --fc-slate-2 on --fc-blue-pale at 4.16:1. */
.fc-alloc-head span:not(.fc-tag){font-size:.78rem; color:var(--fc-slate-2)}
.fc-alloc-body{padding:18px}

.fc-bar-meta{
  display:flex;
  justify-content:space-between;
  gap:10px;
  font-size:.72rem;
  color:var(--fc-slate-2);
  margin-bottom:7px;
}

/* the bar itself */
.fc-bar{
  position:relative;
  display:flex;
  width:100%;
  height:58px;
  border-radius:6px;
  overflow:hidden;
  background:var(--fc-blue-pale);
  border:1px solid var(--fc-line);
  transform-origin:left center;
}
/* Blade pass. A single light sweep that travels the bar once while the segments
   seat, so the allocation reads as something being cut rather than something being
   drawn. The element is the full width of the bar and carries a narrow gradient
   stripe, so translating it by its own width walks the highlight from end to end
   and stays on the compositor. Absolutely positioned, so it is not a flex item. */
.fc-bar::after{
  content:"";
  position:absolute; inset:0; z-index:2;
  pointer-events:none;
  opacity:0;
  background:linear-gradient(100deg,
    transparent 42%, rgba(255,255,255,.34) 50%, transparent 58%);
}
.fc-seg{
  position:relative;
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
  /* 6px rather than 8px: the offcut is the narrowest segment on the bar and its
     length label was losing the last characters to the segment's own overflow. */
  padding:0 6px;
  min-width:0;
  background:var(--fc-blue);
  color:#fff;
  overflow:hidden;
  transform-origin:left center;
}
.fc-seg b{
  font-family:var(--fc-data);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-size:.72rem;
  line-height:1;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.fc-seg i{
  font-style:normal;
  font-family:var(--fc-data);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-size:.66rem;
  line-height:1;
  opacity:.86;
  white-space:nowrap;
  /* The part reference above already ellipsises. The length did not, so on the
     offcut it ran under the segment edge and was cut mid-number, which on a
     measurement graphic reads as a wrong figure rather than a clipped one. */
  overflow:hidden;
  text-overflow:ellipsis;
}
/* The tail carries the smallest share of the bar, so its labels are set a step
   down to keep the full millimetre figure readable inside it. It also gets a
   floor width: at 11 percent of a 546px bar the segment is 60px, which is a
   couple of pixels short of "1,428 mm" and was cutting the number mid-figure.
   The floor costs about a third of a percentage point of width, taken from the
   four cut segments, which is well under anything readable off the graphic and
   every segment still prints its own exact length. */
.fc-seg--offcut b{font-size:.68rem}
.fc-seg--offcut i{font-size:.62rem}
.fc-seg--offcut{min-width:64px}
.fc-seg--alt{background:var(--fc-blue-deep)}
/* kerf: a thin dark slice, the saw's own width. Origin at the top so that when it
   animates it descends through the bar like the cut it represents. */
.fc-kerf{flex:0 0 3px; background:var(--fc-kerf); transform-origin:center top}
/* the recovered tail */
.fc-seg--offcut{
  background:var(--fc-reclaim-fill);
  color:#3A2504;
}
.fc-seg--offcut b,.fc-seg--offcut i{color:#3A2504}

.fc-bar-legend{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:12px;
  font-size:.74rem;
  color:var(--fc-slate);
}
.fc-bar-legend span{display:inline-flex; align-items:center; gap:6px}
.fc-swatch{width:11px; height:11px; border-radius:3px; flex:0 0 auto}
.fc-swatch--cut{background:var(--fc-blue)}
.fc-swatch--kerf{background:var(--fc-kerf)}
.fc-swatch--offcut{background:var(--fc-reclaim-fill)}

/* run KPIs */
.fc-kpis{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(118px,1fr));
  gap:1px;
  margin-top:18px;
  background:var(--fc-line);
  border:1px solid var(--fc-line);
  border-radius:var(--fc-radius-sm);
  overflow:hidden;
}
.fc-kpis > div{background:var(--fc-surface); padding:12px 14px}
/* For a KPI block in a narrow column rather than across a hero. At around 520px
   the default auto-fit lands four 130px columns, which is too tight for a
   figure like "20,250 mm" and breaks the unit onto its own line. Two wider
   columns hold the number and its unit together. */
.fc-kpis--stacked{grid-template-columns:repeat(auto-fit, minmax(200px,1fr))}
.fc-kpis span{
  display:block;
  font-size:.66rem;
  font-weight:600;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:var(--fc-slate-2);
  margin-bottom:4px;
}
.fc-kpis strong{
  display:block;
  font-family:var(--fc-data);
  font-variant-numeric:tabular-nums;
  font-weight:600;
  font-size:1.18rem;
  line-height:1.1;
  color:var(--fc-ink);
}
.fc-kpis .fc-kpi-reclaim strong{color:var(--fc-reclaim)}

/* operator cutting list */
.fc-list{margin-top:18px; border:1px solid var(--fc-line); border-radius:var(--fc-radius-sm); overflow:hidden}
.fc-list-head{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px; flex-wrap:wrap;
  padding:11px 14px; background:var(--fc-surface-2); border-bottom:1px solid var(--fc-line);
}
.fc-list-head strong{font-size:.8125rem; font-weight:700}
.fc-list-head span{font-size:.72rem; color:var(--fc-slate-2)}
.fc-table{width:100%; border-collapse:collapse; font-size:.78rem}
.fc-table th,.fc-table td{padding:9px 14px; text-align:left; border-bottom:1px solid var(--fc-line-soft)}
.fc-table th{
  font-size:.64rem; font-weight:600; letter-spacing:.11em; text-transform:uppercase;
  color:var(--fc-slate-2); background:var(--fc-surface);
}
.fc-table tr:last-child td{border-bottom:0}
.fc-table td{color:var(--fc-slate)}
.fc-table td:first-child{color:var(--fc-ink); font-weight:600}
.fc-table .fc-num{font-family:var(--fc-data);
  font-variant-numeric:tabular-nums; font-weight:600; color:var(--fc-ink)}

.fc-trace{
  display:flex; flex-wrap:wrap; gap:7px; align-items:center;
  margin-top:14px; padding:12px 14px;
  border:1px dashed var(--fc-line); border-radius:var(--fc-radius-sm);
  background:var(--fc-surface-2);
}
.fc-trace-label{font-size:.68rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fc-slate-2); margin-right:2px}
.fc-chip{
  font-family:var(--fc-data);
  font-variant-numeric:tabular-nums; font-weight:600; font-size:.72rem;
  padding:4px 9px; border-radius:6px;
  background:var(--fc-blue-pale); color:var(--fc-blue-deep);
}
html[data-theme="dark"] .fc-chip{color:#BBD5FB}

/* --------------------------------------------------------------------------
   Keyword strip
   -------------------------------------------------------------------------- */
.fc-keywords{
  display:flex; flex-wrap:wrap; gap:10px 28px;
  padding-block:18px;
  border-block:1px solid var(--fc-line);
  font-size:.8125rem; font-weight:600; color:var(--fc-slate);
}
.fc-keywords span{display:inline-flex; align-items:center; gap:9px}
.fc-keywords span::before{
  content:""; width:6px; height:6px; border-radius:2px; background:var(--fc-blue-light); flex:0 0 auto;
}

/* --------------------------------------------------------------------------
   Module / audience / strategy cards
   -------------------------------------------------------------------------- */
.fc-module-code{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:44px; height:24px; padding:0 8px;
  border-radius:6px; background:var(--fc-blue-pale); color:var(--fc-blue-deep);
  font-family:var(--fc-data);
  font-variant-numeric:tabular-nums; font-weight:600; font-size:.72rem; letter-spacing:.06em;
}
html[data-theme="dark"] .fc-module-code{color:#BBD5FB}
.fc-card-top{display:flex; align-items:center; gap:10px; margin-bottom:12px}

/* strategies: each tile gets its own diagram, not a repeated icon */
/* Six strategies, so the column count has to divide into six. auto-fit fitted four
   and orphaned the last two onto a row of their own. */
.fc-strat-grid{grid-template-columns:1fr}
@media (min-width:560px){.fc-strat-grid{grid-template-columns:repeat(2,1fr)}}
@media (min-width:940px){.fc-strat-grid{grid-template-columns:repeat(3,1fr)}}

.fc-strategy{
  background:var(--fc-surface); border:1px solid var(--fc-line);
  border-radius:var(--fc-radius); padding:18px;
  transition:border-color .16s linear, transform .16s linear;
}
.fc-strategy:hover{border-color:var(--fc-blue-light); transform:translateY(-2px)}
.fc-strategy svg{width:100%; height:38px; display:block; margin-bottom:12px}
.fc-strategy h3{font-size:.95rem; margin-bottom:5px}
.fc-strategy p{font-size:.8125rem}

/* --------------------------------------------------------------------------
   Feature blocks A to D
   -------------------------------------------------------------------------- */
.fc-feature{
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:clamp(24px, 3.5vw, 48px);
  align-items:center;
}
@media (min-width:920px){
  .fc-feature{grid-template-columns:repeat(2, minmax(0,1fr))}
  .fc-feature--flip .fc-feature-media{order:-1}
}
.fc-feature + .fc-feature{margin-top:clamp(48px, 6vw, 84px)}
.fc-feature-copy{--fc-gap:14px}
.fc-bullets{list-style:none; margin:0; padding:0; display:grid; gap:9px}
.fc-bullets li{
  position:relative; padding-left:26px;
  font-size:.9rem; line-height:1.55; color:var(--fc-slate);
}
.fc-bullets li::before{
  content:""; position:absolute; left:0; top:.52em;
  width:12px; height:2px; background:var(--fc-blue); border-radius:2px;
}
.fc-spec{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:1px;
  background:var(--fc-line); border:1px solid var(--fc-line);
  border-radius:var(--fc-radius-sm); overflow:hidden;
}
.fc-spec > div{background:var(--fc-surface); padding:12px 14px}
.fc-spec span{display:block; font-size:.66rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--fc-slate-2); margin-bottom:4px}
.fc-spec strong{display:block; font-size:.85rem; font-weight:600; color:var(--fc-ink)}

/* --------------------------------------------------------------------------
   Workflow: six steps on a drawn line
   -------------------------------------------------------------------------- */
/* Explicit column counts rather than auto-fit. auto-fit with minmax(210px,1fr)
   fitted only five columns at 1440px and orphaned step 06 onto a second row,
   which also broke the connector line: the line is absolutely positioned across
   the grid and only makes sense when all six steps share one row. Six divides
   evenly at 6, 3 and 2, so no breakpoint can leave a single step stranded. */
.fc-flow{position:relative; display:grid; gap:18px; grid-template-columns:1fr}
@media (min-width:480px){.fc-flow{grid-template-columns:repeat(2,1fr)}}
@media (min-width:760px){.fc-flow{grid-template-columns:repeat(3,1fr)}}
@media (min-width:1180px){.fc-flow{grid-template-columns:repeat(6,1fr); gap:14px}}
.fc-flow-step{
  position:relative; background:var(--fc-surface);
  border:1px solid var(--fc-line); border-radius:var(--fc-radius);
  padding:18px 18px 20px;
}
/* Number and step icon share the top line: the number carries the sequence, the
   icon says what the step is about. The icon is decorative, because the heading
   underneath already names the step. */
.fc-flow-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:8px; margin-bottom:12px;
}
.fc-flow-top .fc-icon{color:var(--fc-blue-light)}
.fc-flow-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:9px;
  background:var(--fc-blue); color:#fff;
  font-family:var(--fc-data);
  font-variant-numeric:tabular-nums; font-weight:600; font-size:.85rem;
}
.fc-flow-step h3{font-size:.95rem; margin-bottom:5px}
.fc-flow-step p{font-size:.8125rem}
.fc-flow-line{
  position:absolute; left:0; right:0; top:34px; height:2px;
  background:var(--fc-line); z-index:0; display:none;
}
/* Only drawn at the width where the six steps are genuinely on one row. */
@media (min-width:1180px){
  .fc-flow-line{display:block}
  .fc-flow-line::after{
    content:""; position:absolute; inset:0;
    background:linear-gradient(90deg, var(--fc-blue), var(--fc-blue-light));
    transform:scaleX(0); transform-origin:left center;
  }
  .fc-flow.is-in .fc-flow-line::after{
    transform:scaleX(1);
    transition:transform 1s cubic-bezier(.22,.61,.36,1);
  }
}

/* --------------------------------------------------------------------------
   Reports
   -------------------------------------------------------------------------- */
.fc-report svg{width:100%; height:96px; display:block; margin-bottom:14px}

/* --------------------------------------------------------------------------
   Pricing
   -------------------------------------------------------------------------- */
/* Four self-service plans (Enterprise sits in its own block below), so the column
   count divides into four. auto-fit gave three across at 1024px and left Professional
   alone on a second row. Two across is used through the middle range because a price
   card with bullets and two buttons is unreadable at a quarter of 1024px. */
.fc-plans{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:560px){.fc-plans{grid-template-columns:repeat(2,1fr)}}
@media (min-width:1180px){.fc-plans{grid-template-columns:repeat(4,1fr)}}
.fc-plan{
  display:flex; flex-direction:column; gap:12px;
  background:var(--fc-surface); border:1px solid var(--fc-line);
  border-radius:var(--fc-radius); padding:20px;
}
.fc-plan--featured{border-color:var(--fc-blue); box-shadow:0 0 0 1px var(--fc-blue)}
.fc-plan-name{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.fc-plan-name h3{font-size:1rem}
.fc-price{font-family:var(--fc-data);
  font-variant-numeric:tabular-nums; font-weight:600; font-size:1.6rem; line-height:1.1; color:var(--fc-ink)}
.fc-price small{display:block; font-family:var(--fc-body); font-size:.75rem; font-weight:600; color:var(--fc-slate-2); margin-top:5px}
.fc-plan ul{list-style:none; margin:0; padding:0; display:grid; gap:6px; font-size:.8125rem; color:var(--fc-slate)}
.fc-plan ul li{position:relative; padding-left:18px}
.fc-plan ul li::before{content:""; position:absolute; left:0; top:.5em; width:8px; height:2px; border-radius:2px; background:var(--fc-blue-light)}
.fc-plan-excl{font-size:.75rem; color:var(--fc-slate-2); line-height:1.5; border-top:1px solid var(--fc-line-soft); padding-top:10px}
.fc-plan-actions{margin-top:auto; display:flex; flex-wrap:wrap; gap:8px}
/* 44px is the WCAG target minimum, so plan buttons do not shrink below it. */
.fc-plan-actions .fc-btn{flex:1 1 auto; min-height:44px; font-size:.85rem; padding-inline:14px}

/* --------------------------------------------------------------------------
   FAQ
   -------------------------------------------------------------------------- */
.fc-faq{display:grid; gap:10px; max-width:860px}
.fc-faq details{
  background:var(--fc-surface); border:1px solid var(--fc-line);
  border-radius:var(--fc-radius-sm); overflow:hidden;
}
.fc-faq summary{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  padding:15px 18px; cursor:pointer; list-style:none;
  font-size:.9375rem; font-weight:600; color:var(--fc-ink);
}
.fc-faq summary::-webkit-details-marker{display:none}
.fc-faq summary::after{
  content:""; flex:0 0 auto; width:11px; height:11px;
  border-right:2px solid var(--fc-blue); border-bottom:2px solid var(--fc-blue);
  transform:rotate(45deg) translateY(-2px);
  transition:transform .16s linear;
}
.fc-faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.fc-faq summary:hover{background:var(--fc-surface-2)}
.fc-faq-body{padding:0 18px 16px; font-size:.875rem; line-height:1.62; color:var(--fc-slate)}

/* --------------------------------------------------------------------------
   Final CTA
   -------------------------------------------------------------------------- */
.fc-final{
  background:var(--fc-navy);
  border-radius:var(--fc-radius);
  padding:clamp(28px, 4vw, 52px);
  color:#fff;
  position:relative;
  overflow:hidden;
}
html[data-theme="dark"] .fc-final{background:#16233B; border:1px solid var(--fc-line)}
.fc-final::after{
  content:""; position:absolute; right:-40px; bottom:-40px;
  width:260px; height:120px;
  background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.16) 0 1px, transparent 1px 20px);
  pointer-events:none;
}
html[data-theme="dark"] .fc-final::after{background-image:repeating-linear-gradient(90deg, rgba(255,255,255,.1) 0 1px, transparent 1px 20px)}
.fc-final h2,.fc-final .fc-eyebrow{color:#fff}
.fc-final p{color:rgba(255,255,255,.84)}
.fc-final .fc-btn--secondary{background:transparent; color:#fff; border-color:rgba(255,255,255,.4)}
.fc-final .fc-btn--secondary:hover{border-color:#fff; color:#fff}
.fc-final .fc-btn--ghost{color:#fff}
.fc-final .fc-btn--primary{background:#fff; color:var(--fc-navy); border-color:#fff}
.fc-final .fc-btn--primary:hover{background:var(--fc-blue-pale); border-color:var(--fc-blue-pale)}
/* The final CTA panel keeps a white primary button in both themes, so its label cannot
   follow --fc-navy: that token lightens to #8FB6F5 in dark mode, which is 2.06:1 on
   white. Pin the deep navy literal, and pin the hover fill too, because --fc-blue-pale
   inverts to a dark navy that would put dark text on a dark button. */
html[data-theme="dark"] .fc-final .fc-btn--primary{color:#12275E}
html[data-theme="dark"] .fc-final .fc-btn--primary:hover{background:#DCE9FC; border-color:#DCE9FC; color:#12275E}
.fc-final a:focus-visible{outline-color:#fff}

/* --------------------------------------------------------------------------
   Skip link
   -------------------------------------------------------------------------- */
/* Skip link. Moved with transform rather than `top` so the only animated properties
   anywhere on this page remain transform and opacity.

   This element sits outside .fc (it has to be the first focusable node in the body,
   which puts it above the landing wrapper), so the .fc custom properties are not in
   scope here. The literal fallback keeps it readable rather than white on transparent. */
.fc-skip{
  position:absolute; left:12px; top:12px; z-index:60;
  padding:11px 16px; border-radius:8px;
  background:var(--fc-blue,#2563EB); color:#fff; font-weight:600; font-size:.875rem;
  font-family:var(--fc-body,'Inter',system-ui,sans-serif);
  text-decoration:none;
  transform:translateY(-200%);
  transition:transform .14s linear;
}
.fc-skip:focus{transform:none}

/* ==========================================================================
   PUBLIC PAGES
   Shared furniture for every signed-out route other than the landing page:
   pricing, contact, the auth screens and the legal centre. Built from the
   same tokens as the landing sections above, so the two never drift.

   None of these use .fc-reveal. That class is hidden until landing.js adds
   .is-in, and landing.js only loads on the landing route, so a reveal here
   would leave the page blank.
   ========================================================================== */

.fc-page{padding-block:clamp(26px, 3.4vw, 46px) clamp(48px, 6vw, 88px)}
.fc-page-stack > * + *{margin-top:clamp(28px, 3.6vw, 52px)}

/* breadcrumb */
.fc-crumb{display:flex; align-items:center; flex-wrap:wrap; gap:8px; font-size:.8125rem; margin-bottom:18px}
.fc-crumb a{color:var(--fc-blue-text); text-decoration:none; font-weight:600}
.fc-crumb a:hover{text-decoration:underline; text-underline-offset:3px}
.fc-crumb span{color:var(--fc-slate-2)}
/* Decorative, but still visible text, so it has to clear AA like anything else.
   --fc-line was 1.23:1 on the page background. */
.fc-crumb .fc-crumb-sep{color:var(--fc-slate-2); user-select:none}

/* page header */
.fc-page-head{display:grid; gap:14px; max-width:74ch}
.fc-page-head h1{
  font-family:var(--fc-display); font-weight:800;
  font-size:clamp(1.85rem, 1.15rem + 2.4vw, 2.9rem);
  line-height:1.07; letter-spacing:-.022em; text-wrap:balance;
}
.fc-page-head .fc-lead{max-width:66ch}
.fc-page-head .fc-cta-row{margin-top:4px}

/* section heading inside a page */
.fc-head{display:grid; gap:11px; max-width:72ch; margin-bottom:22px}

/* a quiet inline note, used for the billing and activation lines */
.fc-note{
  border:1px solid var(--fc-blue-pale);
  background:var(--fc-blue-pale);
  color:var(--fc-blue-deep);
  border-radius:var(--fc-radius-sm);
  padding:13px 16px; font-size:.85rem; font-weight:600; line-height:1.5;
}
html[data-theme="dark"] .fc-note{color:#BBD5FB; border-color:var(--fc-line)}

/* call-to-action strip: copy on the left, one button on the right */
.fc-strip{
  display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between;
  gap:16px; padding:18px 20px;
  border:1px solid var(--fc-line); border-radius:var(--fc-radius);
  background:var(--fc-surface-2);
}
.fc-strip > div{display:grid; gap:5px; max-width:74ch}
.fc-strip strong{font-size:.95rem; color:var(--fc-ink)}
.fc-strip span{font-size:.8125rem; color:var(--fc-slate); line-height:1.6}

/* enterprise callout */
.fc-enterprise{
  display:grid; gap:18px; align-items:start;
  grid-template-columns:1fr;
  border:1px solid var(--fc-line); border-radius:var(--fc-radius);
  background:var(--fc-surface); padding:22px;
}
@media (min-width:900px){.fc-enterprise{grid-template-columns:1.25fr 1fr auto}}
.fc-enterprise-actions{display:grid; gap:8px; align-content:start; min-width:230px}

/* wide comparison table: scrolls inside its own box, never the page */
.fc-table-wrap{
  overflow-x:auto;
  border:1px solid var(--fc-line);
  border-radius:var(--fc-radius);
  background:var(--fc-surface);
}
.fc-compare{border-collapse:collapse; width:100%; min-width:760px; font-size:.8125rem}
.fc-compare th,.fc-compare td{
  padding:11px 14px; text-align:left; vertical-align:top;
  border-bottom:1px solid var(--fc-line-soft);
}
.fc-compare thead th{
  position:sticky; top:0; z-index:1;
  background:var(--fc-surface-2); color:var(--fc-ink);
  font-weight:700; font-size:.78rem; white-space:nowrap;
  border-bottom:1px solid var(--fc-line);
}
.fc-compare thead th span{
  display:block; font-weight:600; font-size:.66rem; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fc-blue-text); margin-top:2px;
}
.fc-compare tbody th{
  font-weight:600; color:var(--fc-ink); white-space:normal; min-width:190px;
}
.fc-compare tbody td{color:var(--fc-slate); font-variant-numeric:tabular-nums}
.fc-compare tbody tr:last-child th,.fc-compare tbody tr:last-child td{border-bottom:0}
.fc-compare .is-recommended{color:var(--fc-blue-deep)}
html[data-theme="dark"] .fc-compare .is-recommended{color:#BBD5FB}

/* --------------------------------------------------------------------------
   Forms
   -------------------------------------------------------------------------- */
.fc-form{display:grid; gap:16px}
.fc-form-row{display:grid; gap:16px; grid-template-columns:1fr}
@media (min-width:620px){.fc-form-row{grid-template-columns:repeat(2,1fr)}}
.fc-field{display:grid; gap:6px}
.fc-field label{font-size:.8125rem; font-weight:600; color:var(--fc-ink)}
.fc-field .fc-hint{font-size:.75rem; color:var(--fc-slate-2); line-height:1.5}
.fc-field input[type="text"],
.fc-field input[type="email"],
.fc-field input[type="tel"],
.fc-field input[type="password"],
.fc-field select,
.fc-field textarea{
  width:100%;
  min-height:46px;
  padding:11px 13px;
  font-family:var(--fc-body);
  font-size:.9375rem;
  color:var(--fc-ink);
  background:var(--fc-surface);
  border:1px solid var(--fc-line);
  border-radius:var(--fc-radius-sm);
  transition:border-color .14s linear;
}
.fc-field textarea{min-height:132px; resize:vertical; line-height:1.6}
.fc-field input::placeholder,
.fc-field textarea::placeholder{color:var(--fc-slate-2); opacity:1}
.fc-field input:focus-visible,
.fc-field select:focus-visible,
.fc-field textarea:focus-visible{
  outline:3px solid var(--fc-focus);
  outline-offset:1px;
  border-color:var(--fc-blue);
}
/* Password reveal. The .password-field class name is load bearing: app.js finds the
   input with button.closest('.password-field'), so the wrapper keeps that hook even
   though everything else here moved onto the .fc system. */
.fc .password-field{position:relative; display:block}
.fc .password-field input{padding-right:74px}
.fc .password-field .password-toggle{
  position:absolute; right:6px; top:50%; transform:translateY(-50%);
  border:0; background:transparent; cursor:pointer;
  padding:8px 10px; border-radius:8px;
  font-family:var(--fc-body); font-size:.8125rem; font-weight:600;
  color:var(--fc-blue-text);
}
.fc .password-field .password-toggle:hover{background:var(--fc-blue-pale)}
.fc .password-field .password-toggle:focus-visible{outline:3px solid var(--fc-focus); outline-offset:1px}

.fc-check{display:flex; align-items:center; gap:9px; font-size:.8125rem; color:var(--fc-slate)}
.fc-check input{width:17px; height:17px; accent-color:var(--fc-blue); flex:0 0 auto}

/* --------------------------------------------------------------------------
   Auth screens: pitch on the left, form on the right
   -------------------------------------------------------------------------- */
.fc-auth{display:grid; gap:22px; grid-template-columns:1fr; align-items:start}
@media (min-width:940px){.fc-auth{grid-template-columns:1fr .95fr; gap:32px}}
.fc-auth-panel{
  border:1px solid var(--fc-line); border-radius:var(--fc-radius);
  background:var(--fc-surface); padding:clamp(20px,2.4vw,30px);
  box-shadow:var(--fc-shadow);
}
.fc-auth-pitch{display:grid; gap:18px; align-content:start; padding-top:6px}
.fc-auth-points{display:grid; gap:0}
.fc-auth-points > div{padding:15px 0; border-top:1px solid var(--fc-line)}
.fc-auth-points > div:last-child{border-bottom:1px solid var(--fc-line)}
.fc-auth-points strong{display:block; font-size:.9375rem; color:var(--fc-ink); margin-bottom:4px}
.fc-auth-points p{font-size:.85rem}
.fc-steps{display:flex; flex-wrap:wrap; gap:7px; margin-bottom:16px}
.fc-step-pill{
  font-size:.72rem; font-weight:600; padding:5px 10px; border-radius:999px;
  background:var(--fc-surface-2); color:var(--fc-slate-2); border:1px solid var(--fc-line);
}
.fc-step-pill.is-current{background:var(--fc-blue-pale); color:var(--fc-blue-deep); border-color:transparent}
html[data-theme="dark"] .fc-step-pill.is-current{color:#BBD5FB}
.fc-auth-alt{font-size:.8125rem; color:var(--fc-slate); margin-top:2px}
.fc-auth-alt a{color:var(--fc-blue-text); font-weight:600}

/* --------------------------------------------------------------------------
   Legal centre
   -------------------------------------------------------------------------- */
.fc-legal{display:grid; gap:26px; grid-template-columns:1fr; align-items:start}
@media (min-width:1000px){.fc-legal{grid-template-columns:250px 1fr; gap:38px}}
.fc-legal-nav{display:grid; gap:2px; align-content:start}
@media (min-width:1000px){.fc-legal-nav{position:sticky; top:96px}}
.fc-legal-nav a{
  display:block; padding:9px 12px; border-radius:var(--fc-radius-sm);
  font-size:.8125rem; font-weight:600; color:var(--fc-slate); text-decoration:none;
  transition:background-color .14s linear, color .14s linear;
}
.fc-legal-nav a:hover{background:var(--fc-surface-2); color:var(--fc-ink)}
.fc-legal-nav a[aria-current="page"]{background:var(--fc-blue-pale); color:var(--fc-blue-deep)}
html[data-theme="dark"] .fc-legal-nav a[aria-current="page"]{color:#BBD5FB}

/* long-form document body */
.fc-prose{max-width:78ch; color:var(--fc-slate); font-size:.9375rem; line-height:1.75}
.fc-prose > * + *{margin-top:1.05em}
.fc-prose h2{
  font-family:var(--fc-display); font-weight:800;
  font-size:1.3rem; line-height:1.2; color:var(--fc-ink);
  margin-top:1.9em; letter-spacing:-.014em;
}
.fc-prose h3{font-size:1rem; font-weight:700; color:var(--fc-ink); margin-top:1.6em}
.fc-prose ul,.fc-prose ol{padding-left:20px; display:grid; gap:7px}
.fc-prose li{line-height:1.65}
.fc-prose a{color:var(--fc-blue-text); font-weight:600}
.fc-prose strong{color:var(--fc-ink)}
.fc-prose table{border-collapse:collapse; width:100%; font-size:.85rem}
.fc-prose th,.fc-prose td{border:1px solid var(--fc-line); padding:9px 11px; text-align:left}
.fc-prose th{background:var(--fc-surface-2); color:var(--fc-ink); font-weight:700}

.fc-doc-meta{
  display:flex; flex-wrap:wrap; gap:8px 18px;
  font-size:.78rem; color:var(--fc-slate-2);
  padding-bottom:16px; margin-bottom:22px;
  border-bottom:1px solid var(--fc-line);
}

/* --------------------------------------------------------------------------
   MOTION
   Composited properties only: transform and opacity. Nothing animates width,
   height, top or left, so no animation can cause layout shift. Text is painted
   at its final position and only fades, so first paint is never blocked.
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference){
  /* scroll reveals */
  .fc-reveal{opacity:0; transform:translateY(14px)}
  .fc-reveal.is-in{
    opacity:1; transform:none;
    transition:opacity .5s linear, transform .5s cubic-bezier(.22,.61,.36,1);
  }
  .fc-reveal.is-in[data-d="1"]{transition-delay:.06s}
  .fc-reveal.is-in[data-d="2"]{transition-delay:.12s}
  .fc-reveal.is-in[data-d="3"]{transition-delay:.18s}
  .fc-reveal.is-in[data-d="4"]{transition-delay:.24s}

  /* Hero orchestration, one pass, ~1.45s total.
     The hidden start state is gated on .is-armed, which only JavaScript adds. If the
     script never runs the bar simply renders finished, so it can never be left blank.

     Sequence: the stock bar draws left to right, then each segment seats in turn with
     its kerf cutting down after it, a single blade pass sweeps the length, and the
     recovered tail lands last. Labels fade in behind their own segment rather than
     scaling with it, which would squash the text. */
  .fc-hero-anim.is-armed .fc-bar{transform:scaleX(.02); opacity:0}
  .fc-hero-anim.is-armed .fc-seg{opacity:0; transform:scaleX(0)}
  .fc-hero-anim.is-armed .fc-kerf{opacity:0; transform:scaleY(0)}
  .fc-hero-anim.is-armed .fc-seg b,
  .fc-hero-anim.is-armed .fc-seg i{opacity:0}

  .fc-hero-anim.is-ready .fc-bar{
    transform:none; opacity:1;
    transition:transform .42s cubic-bezier(.22,.61,.36,1), opacity .18s linear;
  }
  .fc-hero-anim.is-ready .fc-seg{
    opacity:1; transform:none;
    transition:transform .3s cubic-bezier(.22,.61,.36,1), opacity .22s linear;
  }
  /* the kerf drops through the bar rather than widening into it */
  .fc-hero-anim.is-ready .fc-kerf{
    opacity:1; transform:none;
    transition:transform .16s linear, opacity .1s linear;
  }
  .fc-hero-anim.is-ready .fc-seg b,
  .fc-hero-anim.is-ready .fc-seg i{
    opacity:1;
    transition:opacity .26s linear;
  }
  .fc-hero-anim.is-ready .fc-seg i{opacity:.86}

  /* Seat order across all nine children: segment, kerf, segment, kerf, ...
     Every child is given its own delay so none of them arrives out of turn. */
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(1){transition-delay:.44s}
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(2){transition-delay:.50s}
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(3){transition-delay:.56s}
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(4){transition-delay:.62s}
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(5){transition-delay:.68s}
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(6){transition-delay:.74s}
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(7){transition-delay:.80s}
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(8){transition-delay:.86s}

  /* labels follow their own segment by a beat */
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(1) b,
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(1) i{transition-delay:.58s}
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(3) b,
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(3) i{transition-delay:.70s}
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(5) b,
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(5) i{transition-delay:.82s}
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(7) b,
  .fc-hero-anim.is-ready .fc-bar > *:nth-child(7) i{transition-delay:.94s}
  .fc-hero-anim.is-ready .fc-seg--offcut b,
  .fc-hero-anim.is-ready .fc-seg--offcut i{transition-delay:1.16s}

  /* Diagram bars fill from their left edge when their block scrolls in, so the
     allocation and yield charts read as measurements being taken rather than
     pictures fading up. transform-box:fill-box puts the origin on the rect itself
     rather than the SVG viewport, and scaleX stays on the compositor. */
  .fc-fill{transform:scaleX(0); transform-origin:left center; transform-box:fill-box}
  .fc-reveal.is-in .fc-fill{
    transform:none;
    transition:transform .62s cubic-bezier(.22,.61,.36,1);
    transition-delay:var(--d, 0s);
  }

  /* Strategy tiles: each tile shows the same stock bar allocated a different way, so
     the segments fill from their own left edge as the tile arrives. Done in CSS with
     nth-of-type rather than a class per rect, because the six tiles carry a different
     number of segments each and the markup should stay readable. */
  .fc-strategy svg rect{transform:scaleX(0); transform-origin:left center; transform-box:fill-box}
  .fc-strategy.is-in svg rect{
    transform:none;
    transition:transform .46s cubic-bezier(.22,.61,.36,1);
  }
  .fc-strategy.is-in svg rect:nth-of-type(1){transition-delay:.06s}
  .fc-strategy.is-in svg rect:nth-of-type(2){transition-delay:.14s}
  .fc-strategy.is-in svg rect:nth-of-type(3){transition-delay:.22s}
  .fc-strategy.is-in svg rect:nth-of-type(4){transition-delay:.30s}
  .fc-strategy.is-in svg rect:nth-of-type(5){transition-delay:.38s}
  .fc-strategy.is-in svg rect:nth-of-type(6){transition-delay:.46s}

  /* one blade pass along the bar while the segments are seating */
  .fc-hero-anim.is-ready .fc-bar::after{
    animation:fc-blade .78s linear .46s 1;
  }
  @keyframes fc-blade{
    0%{opacity:0; transform:translateX(-100%)}
    12%{opacity:1}
    88%{opacity:1}
    100%{opacity:0; transform:translateX(100%)}
  }

  /* the recovered tail lands last and is the only thing that pulses */
  .fc-hero-anim.is-ready .fc-seg--offcut{transition-delay:1.02s}
  .fc-hero-anim.is-ready .fc-seg--offcut::after{
    content:""; position:absolute; inset:0;
    background:#fff; opacity:0;
    animation:fc-flash .5s linear 1.24s 1;
  }
  @keyframes fc-flash{0%{opacity:0}40%{opacity:.42}100%{opacity:0}}
}

/* Reduced motion: everything is present, static and readable immediately. */
@media (prefers-reduced-motion: reduce){
  .fc-reveal{opacity:1; transform:none}
  .fc-hero-anim .fc-bar,
  .fc-hero-anim .fc-seg,
  .fc-hero-anim .fc-kerf{opacity:1; transform:none}
  /* labels and the blade pass are held out too, in case the preference is turned on
     after the armed class has already been applied */
  .fc-hero-anim .fc-seg b{opacity:1}
  .fc-hero-anim .fc-seg i{opacity:.86}
  .fc-bar::after{display:none}
  .fc-fill{transform:none}
  .fc-strategy svg rect{transform:none}
  .fc *{animation:none !important; transition:none !important}
}

/* No-JS safety: if the observer never runs, nothing stays invisible. The diagram
   bars need naming explicitly, because their hidden state is a scaleX(0) on the rect
   itself rather than an opacity on the .fc-reveal wrapper. */
.fc-nojs .fc-reveal{opacity:1; transform:none}
.fc-nojs .fc-fill{transform:none}
.fc-nojs .fc-strategy svg rect{transform:none}

/* --------------------------------------------------------------------------
   Narrow screens: the hero visual degrades rather than shrinking illegibly
   -------------------------------------------------------------------------- */
@media (max-width:560px){
  .fc-bar{height:72px}
  .fc-seg{padding:0 5px}
  .fc-seg i{display:none}          /* keep the part reference, drop the length */
  /* The tail used to keep its length here, but it is the narrowest segment on
     the bar, so on a phone that guaranteed a cut-off number. Below this width
     the length drops like every other segment and the width floor is released,
     which keeps the bar honestly proportional. The figure is still carried by
     the panel underneath and by the bar's own aria-label. */
  .fc-seg--offcut{min-width:0}
  .fc-table th:nth-child(4),
  .fc-table td:nth-child(4){display:none}
}
/* Phone widths. The bar is about 350px here, so the tail is roughly 37px and the
   part references need help to stay whole rather than ellipsised. */
@media (max-width:430px){
  .fc-seg{padding:0 4px}
  .fc-seg b{font-size:.62rem; letter-spacing:-.02em}
  .fc-seg--offcut b{font-size:.62rem}
}
@media (max-width:340px){
  .fc-seg b{font-size:.56rem}
  .fc-seg--offcut b{font-size:.56rem}
}

/* On a phone the two smallest segments are around 37px and 48px, which is not
   enough for "BR-221" or "Offcut", and an ellipsised part code reads worse than
   no code at all. Each segment becomes its own container so it can drop its
   label based on its own width rather than on the viewport, which is the thing
   that actually determines whether the text fits. Colour still separates cut,
   kerf and reclaimed tail, the legend names all three, and the operator cutting
   list underneath carries every part reference in full.

   Guarded on @supports so a browser without container queries keeps the
   ellipsis rather than losing the labels. */
@supports (container-type: inline-size){
  @media (max-width:430px){
    .fc-bar .fc-seg{container-type:inline-size}
    @container (max-width:52px){
      .fc-seg b{display:none}
    }
  }
}

/* --------------------------------------------------------------------------
   Touch and phone screens
   -------------------------------------------------------------------------- */

/* iOS Safari zooms the page in whenever a focused field is under 16px, and it
   does not zoom back out on blur. The design size is .9375rem (15px), which is
   one pixel under that line, so every tap into a field on an iPhone left the
   visitor scrolled sideways on a page that is otherwise fully responsive.
   Keyed on pointer:coarse rather than a width, because the trigger is the iOS
   text field itself and an iPad hits it at tablet and desktop widths too. */
@media (pointer:coarse){
  .fc-field input[type="text"],
  .fc-field input[type="email"],
  .fc-field input[type="tel"],
  .fc-field input[type="password"],
  .fc-field input[type="number"],
  .fc-field select,
  .fc-field textarea{font-size:1rem}

  /* The checkbox row is a label wrapping a 17px box, so the whole row is the
     hit area, but at .8125rem it lands about 20px high -- under the 24px
     minimum in WCAG 2.2 target size. The box keeps its drawn size; the row
     gets the height. */
  .fc-check{min-height:24px}

  /* Breadcrumb links land at 21px for the same reason. The row is horizontal
     and the separator between items is a span rather than a link, so growing
     the links vertically cannot put two hit areas next to each other. Inline
     links inside a sentence -- "Forgot password?", "Privacy Policy" -- are
     deliberately left alone: WCAG 2.5.8 exempts them, and padding a link in
     running text overlaps the lines above and below it. */
  .fc-crumb a{padding-block:6px}
}

/* The four feature diagrams are authored in a 420-unit viewBox and set to
   width:100%, so their labels scale with the box. Above about 560px that is
   free legibility -- the diagram is upscaled and 10px captions render at 16px
   or more. Below it the same rule works against them: at a 390px viewport the
   box is 312px, a scale of 0.743, and the captions land at 6.7-8.2px.
   
   15px is the ceiling here, not a preference: "Material traceability PDF" in
   the outputs diagram runs to the edge of the viewBox at 16px. At 15 the
   captions render about 11px on a 390px phone and 12.6px at 430px. Narrower
   than 360px they are still under 11px, which the aria-label on each diagram
   and the spec list beside it continue to cover. */
@media (max-width:480px){
  .fc-figure text{font-size:15px}
}