/* ==========================================================================
   Fabricata Inspect — public marketing surface

   Sibling to Fabricata Cut's public layout without copying it: a transparent
   header over a tinted hero, an asymmetric hero with a drawn product panel, a
   fact band, a numbered workflow strip, module cards, a feature split, a role
   list and a closing panel. Prefix: fi- (Cut uses fc-).
   ========================================================================== */

body.is-public { background: var(--bg); }

/* Container, rhythm and type come from the Fabricata Suite tokens (suite.css),
   so Inspect's pages measure the same as every other Fabricata product. */
.container { box-sizing: border-box; width: 100%; max-width: var(--fx-container); margin-inline: auto; padding-inline: var(--fx-gutter); }

.public-shell { display: flex; flex-direction: column; min-height: 100vh; }

.public-main { flex: 1; }

/* ------------------------------------------------------------------- hero */

.fi-hero {
  padding: 46px 0 62px;
  background:
    radial-gradient(circle at 12% 0%, rgba(14,122,79,.13), transparent 42%),
    radial-gradient(circle at 88% 8%, rgba(37,99,235,.07), transparent 38%);
}
.fi-hero-grid { display: grid; gap: 34px; align-items: center; grid-template-columns: 1fr; }
.fi-hero-copy { display: grid; gap: 18px; }
.fi-hero h1 {
  /* The floor drops for narrow screens: at 375px the old 2.2rem minimum put
     this two-sentence headline on four shouting lines. */
  font-size: var(--fx-text-h1); font-weight: 800;
  letter-spacing: var(--fx-tracking-display); line-height: 1.06; text-wrap: balance;
}
.fi-lead { font-size: var(--fx-text-lede); line-height: 1.6; color: var(--muted-ink); max-width: 56ch; }
.fi-eyebrow {
  font-size: var(--fx-text-eyebrow); font-weight: 700; letter-spacing: var(--fx-tracking-eyebrow);
  text-transform: uppercase; color: var(--primary-strong);
}
.fi-cta-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* A miniature of the photographic record — the thing the product produces.
   Every "photograph" in it is drawn line work, not an image: see
   templates/marketing/_art.html for why. */
.fi-sheet {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-md); overflow: hidden;
}
.fi-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border);
  background: var(--surface-2);
}
.fi-sheet-head strong { font-size: 13px; font-weight: 800; letter-spacing: -.01em; }
.fi-sheet-head span { font-family: var(--mono); font-size: 11px; color: var(--muted); }
.fi-sheet-body { padding: 16px; display: grid; gap: 12px; grid-template-columns: repeat(3, 1fr); }
.fi-shot { display: grid; gap: 6px; }
.fi-shot-img {
  aspect-ratio: 4 / 3; border-radius: var(--radius-xs);
  position: relative; overflow: hidden; background: #0b1220;
}
.shot-svg { display: block; width: 100%; height: 100%; }

/* The inspector's sweep across the sheet. Staggered so the six thumbnails
   read as one pass rather than six twitches. */
.shot-scan { animation: fi-scan 5.2s cubic-bezier(.5,0,.5,1) infinite; }
.fi-shot:nth-child(2) .shot-scan { animation-delay: .18s; }
.fi-shot:nth-child(3) .shot-scan { animation-delay: .36s; }
.fi-shot:nth-child(4) .shot-scan { animation-delay: .54s; }
.fi-shot:nth-child(5) .shot-scan { animation-delay: .72s; }
.fi-shot:nth-child(6) .shot-scan { animation-delay: .90s; }
/* The CSS opacity here overrides the SVG opacity attribute on the rect, so
   these values are the whole story. .85 turned a hint of a sweep into a solid
   green band across the drawing it was meant to pass over. */
@keyframes fi-scan {
  0%       { transform: translateY(0);     opacity: 0; }
  10%      { opacity: .18; }
  55%      { transform: translateY(120px); opacity: 0; }
  100%     { transform: translateY(120px); opacity: 0; }
}

/* Callout rings on the weld and stamping vignettes — the "look here" mark an
   inspector would draw on the print. */
.pulse { animation: fi-pulse 3.4s ease-in-out infinite; transform-origin: center; }
@keyframes fi-pulse {
  0%, 100% { opacity: .18; }
  45%      { opacity: .8; }
}

/* Dimension lines draw themselves in, once, on reveal. */
.draw { stroke-dasharray: 120; stroke-dashoffset: 120; }
.is-visible .draw, .fi-sheet .draw { animation: fi-draw 1.1s ease-out forwards; }
@keyframes fi-draw { to { stroke-dashoffset: 0; } }

.fi-shot b { font-size: 9.5px; font-weight: 800; color: var(--primary-strong); text-align: center; }
.fi-shot em { font-style: normal; font-size: 8.5px; color: var(--muted); text-align: center; line-height: 1.3; }
.fi-sheet-foot {
  padding: 12px 18px; border-top: 1px solid var(--border);
  background: var(--surface-2); display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 11px; color: var(--muted); font-weight: 700;
}

/* --------------------------------------------------------------- fact row */

/* The three claims that used to sit as fineprint under the hero CTAs. As a
   band of their own they are readable, and they break the run of card grids
   that follows. */
.fi-facts { padding: 8px 0 4px; }
.fi-fact-row {
  display: grid; gap: 0; margin: 0;
  border-block: 1px solid var(--border);
}
.fi-fact { padding: 20px 0; border-top: 1px solid var(--border); }
.fi-fact:first-child { border-top: 0; }
.fi-fact dt {
  font-weight: 800; font-size: 14.5px; letter-spacing: -.02em;
  color: var(--text); margin-bottom: 5px;
}
.fi-fact dd { margin: 0; color: var(--muted-ink); font-size: 13.5px; }

/* ------------------------------------------------------------------ roles */

.fi-roles { margin: 0; display: grid; gap: 0; }
.fi-role {
  display: grid; gap: 4px; padding: 18px 0;
  border-top: 1px solid var(--border);
}
.fi-role:first-child { border-top: 0; }
.fi-role dt { font-weight: 800; font-size: 1rem; letter-spacing: -.02em; }
.fi-role dd { margin: 0; color: var(--muted-ink); font-size: 14px; }

/* ---------------------------------------------------------------- sections */

.fi-section { padding-block: var(--fx-section-y); }
.fi-section--alt { background: var(--surface-2); border-block: 1px solid var(--border); }
.fi-section-head { max-width: 62ch; margin-bottom: 30px; display: grid; gap: 10px; }
.fi-section-head h2 { font-size: var(--fx-text-h2); line-height: 1.14; letter-spacing: var(--fx-tracking-h2); text-wrap: balance; }
.fi-section-head p { color: var(--muted-ink); font-size: var(--fx-text-lede); line-height: 1.6; }

.fi-grid { display: grid; gap: 16px; grid-template-columns: 1fr; }
.fi-grid--3 { grid-template-columns: 1fr; }
.fi-grid--4 { grid-template-columns: 1fr; }

.fi-card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 22px; display: grid; gap: 10px; align-content: start;
  transition: transform .2s ease, box-shadow .2s ease;
}
.fi-card:hover { transform: translateY(-2px); box-shadow: 0 18px 44px rgba(15,23,42,.08); }
.fi-card h3 { font-size: 1.05rem; }
.fi-card p { color: var(--muted-ink); font-size: 14px; margin: 0; }
.fi-card-top { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.module-glyph {
  width: 30px; height: 30px; flex: 0 0 auto;
  color: var(--primary); opacity: .55;
  transition: opacity .2s ease, transform .2s ease;
}
.fi-card:hover .module-glyph { opacity: 1; transform: translateY(-1px); }
.fi-module-code {
  font-family: var(--mono); font-size: 11px; font-weight: 800;
  letter-spacing: .1em; color: #fff; background: var(--charcoal);
  padding: 4px 9px; border-radius: var(--radius-xs); justify-self: start;
}
.fi-bullets { margin: 4px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.fi-bullets li { font-size: 13.5px; color: var(--text); padding-left: 22px; position: relative; font-weight: 500; }
.fi-bullets li::before {
  content: ""; position: absolute; left: 0; top: 7px;
  width: 12px; height: 7px; border-left: 2.2px solid var(--primary);
  border-bottom: 2.2px solid var(--primary); transform: rotate(-45deg);
}

/* ---------------------------------------------------------------- workflow */

.fi-flow { display: grid; gap: 14px; grid-template-columns: 1fr; position: relative; }
.fi-flow-step {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
  padding: 20px; display: grid; gap: 8px; align-content: start;
  border-top: 5px solid var(--primary);
}

/* Each step shows the device the work actually happens on. */
.fi-flow-art {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius-md); padding: 10px;
  display: grid; place-items: center; margin-bottom: 4px;
}
.stage-svg { width: 100%; max-width: 150px; height: auto; display: block; }

/* The confirmation tick and the capture ping: the small moments of feedback
   the product itself gives, borrowed for the illustration. */
.tick { stroke-dasharray: 26; stroke-dashoffset: 26; }
.is-visible .tick { animation: fi-draw .5s .35s ease-out forwards; }
.ping { transform-origin: 72px 20px; }
.is-visible .ping { animation: fi-ping 2.6s ease-out infinite; }
@keyframes fi-ping {
  0%       { transform: scale(.7); opacity: 0; }
  25%      { opacity: .9; }
  70%,100% { transform: scale(1.5); opacity: 0; }
}
.seal { transform-origin: 60px 54px; }
.is-visible .seal { animation: fi-seal .5s .2s cubic-bezier(.2,1.5,.4,1) backwards; }
@keyframes fi-seal { from { transform: scale(0); } to { transform: scale(1); } }
.fi-flow-num {
  font-family: var(--display); font-size: 13px; font-weight: 800;
  width: 42px; height: 42px; border-radius: var(--radius-md);
  background: var(--primary-soft); color: var(--primary-strong);
  display: grid; place-items: center; letter-spacing: -.02em;
}
.fi-flow-step h3 { font-size: 1rem; }
.fi-flow-step p { font-size: 13.5px; color: var(--muted-ink); margin: 0; }

/* ----------------------------------------------------------------- feature */

.fi-feature { display: grid; gap: 30px; align-items: center; grid-template-columns: 1fr; }
.fi-feature-copy { display: grid; gap: 14px; }
.fi-feature-copy h2 { font-size: clamp(1.5rem, 2.6vw, 2rem); letter-spacing: -.04em; }
.fi-feature-copy p { color: var(--muted-ink); font-size: 14.5px; margin: 0; }
.fi-spec {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); overflow: hidden;
}
.fi-spec-head {
  background: var(--charcoal); color: #fff; padding: 13px 18px;
  font-size: 11px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase;
  border-left: 4px solid var(--primary);
}
.fi-spec table { font-size: 13px; }
.fi-spec th, .fi-spec td { padding: 11px 18px; }
.fi-spec thead th { font-size: 10.5px; }

/* ------------------------------------------------- compression, drawn */

/* The claim this section makes is a ratio, and a ratio is best read as two
   bars to scale rather than as a sentence with numbers in it. */
.fi-gauge {
  display: grid; gap: 12px; margin: 4px 0 6px;
  padding: 18px; border: 1px solid var(--border);
  border-radius: var(--radius-md); background: var(--surface-2);
}
.fi-gauge-row {
  display: grid; gap: 4px 12px; align-items: center;
  grid-template-columns: 1fr auto;
}
.fi-gauge-label { font-size: 12px; font-weight: 700; color: var(--muted-ink); }
.fi-gauge-value {
  font-family: var(--mono); font-size: 12.5px; font-weight: 700;
  color: var(--text); text-align: right; font-variant-numeric: tabular-nums;
}
.fi-gauge-track {
  grid-column: 1 / -1; height: 10px; border-radius: 999px;
  background: var(--border); overflow: hidden;
}
.fi-gauge-fill { display: block; height: 100%; border-radius: 999px; width: 0; }
.fi-gauge-fill--before { background: linear-gradient(90deg, #94a3b8, #64748b); }
.fi-gauge-fill--after  { background: linear-gradient(90deg, var(--primary), var(--primary-strong)); }
.is-visible .fi-gauge-fill--before { animation: fi-fill-before 1.1s .1s cubic-bezier(.2,.8,.3,1) forwards; }
.is-visible .fi-gauge-fill--after  { animation: fi-fill-after  1.1s .45s cubic-bezier(.2,.8,.3,1) forwards; }
@keyframes fi-fill-before { to { width: 100%; } }
/* 550 KB against 8.2 MB is 6.5%, but a 6.5% bar is a sliver nobody can read.
   9% keeps it honest and still visible. */
@keyframes fi-fill-after  { to { width: 9%; } }

.fi-gauge-note {
  display: flex; gap: 12px; align-items: flex-start;
  padding-top: 12px; border-top: 1px solid var(--border);
  font-size: 12.5px; color: var(--muted-ink); line-height: 1.5;
}
.fi-gauge-glyph { width: 26px; height: 26px; flex: 0 0 auto; color: var(--primary); }

/* ------------------------------------------------------- reveal on scroll */

/* The hidden state is scoped to html.js, which an inline script in the head
   sets before first paint. With JavaScript off or blocked, nothing is ever
   hidden and the page reads exactly as it does at the end of the animation --
   the artwork is the content, so it must not depend on a script to appear. */
.js .reveal { opacity: 0; transform: translateY(14px); }
.js .reveal.is-visible {
  opacity: 1; transform: none;
  transition: opacity .6s ease, transform .6s cubic-bezier(.2,.8,.3,1);
}
/* Elements already on screen at load animate together rather than in a
   cascade, which would look like a slow page. */
.js .reveal:nth-child(2).is-visible { transition-delay: .08s; }
.js .reveal:nth-child(3).is-visible { transition-delay: .16s; }
.js .reveal:nth-child(4).is-visible { transition-delay: .24s; }

@media (prefers-reduced-motion: reduce) {
  /* app.css already collapses durations; this also removes the offset, so a
     reveal that never fires cannot leave content shifted down the page. */
  .js .reveal { opacity: 1; transform: none; }
}

@media (min-width: 720px) {
  .fi-fact-row { grid-template-columns: repeat(3, 1fr); column-gap: 32px; }
  .fi-fact { border-top: 0; }
  .fi-roles { grid-template-columns: repeat(2, 1fr); column-gap: 40px; }
  .fi-role:nth-child(2) { border-top: 0; }
  .fi-grid--3 { grid-template-columns: repeat(3, 1fr); }
  .fi-grid--4 { grid-template-columns: repeat(2, 1fr); }
  .fi-flow { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 980px) {
  .fi-hero-grid { grid-template-columns: 1.05fr .95fr; }
  .fi-grid--4 { grid-template-columns: repeat(4, 1fr); }
  .fi-feature { grid-template-columns: 1fr 1fr; }
  .fi-feature--flip .fi-feature-copy { order: 2; }
}

/* --------------------------------------------------------------- dark mode */

/*
  The tokens in app.css already carry most of this. What is left is the few
  places the public page paints its own ground: the hero wash and the
  screenshot frames. The closing panel is the Fabricata Suite's (suite.css).
*/
@media (prefers-color-scheme: dark) {
  .fi-hero {
    background:
      radial-gradient(circle at 12% 0%, rgba(95,207,152,.10), transparent 46%),
      radial-gradient(circle at 88% 8%, rgba(96,165,250,.07), transparent 40%);
  }
  .fi-shot-img { background: #070d18; }
}

/* ---------------------------------------------------------------------------
   Legal pages, the trust section, and the price line.

   Added with /privacy and /terms: the site previously had no page that was
   mostly prose, and no answer to "how much" or "is my data safe" anywhere.
   --------------------------------------------------------------------------- */
.legal-page { padding: 56px 0 80px; }
.legal-page .container { max-width: 74ch; }
.legal-page h1 { margin-bottom: 10px; }
.legal-page h2 {
  font-family: var(--display); font-size: 1.28rem; font-weight: 800;
  letter-spacing: -.02em; margin: 44px 0 12px;
}
.legal-page h3 {
  font-size: 1rem; font-weight: 800; margin: 26px 0 8px; color: var(--text);
}
.legal-page p, .legal-page li { color: var(--muted-ink); line-height: 1.7; }
.legal-page ul { margin: 0 0 18px; padding-left: 22px; }
.legal-page li { margin-bottom: 8px; }
.legal-page strong { color: var(--text); }
.legal-updated {
  font-size: 13px; color: var(--muted-ink); margin-bottom: 34px;
  padding-bottom: 18px; border-bottom: 1px solid var(--border);
}
.fi-price {
  margin-top: 16px; font-size: 14px; font-weight: 700; color: var(--muted-ink);
}

.fi-section-foot {
  margin-top: 28px; text-align: center; font-size: 14.5px; color: var(--muted-ink);
}

/* --- Screenshots ---------------------------------------------------------
   A photograph of the interface, in a drawn browser frame. The frame is CSS
   rather than part of the image so the picture stays a picture of the
   software: no baked-in title bar, no crop, nothing to argue about later. */
.fi-screen { margin: 0; border-radius: 16px; overflow: hidden; background: var(--surface);
             border: 1px solid var(--line); box-shadow: 0 22px 54px rgba(15, 23, 42, .12); }
.fi-screen-chrome { display: flex; align-items: center; gap: 6px;
                    padding: 9px 13px; background: var(--surface-2);
                    border-bottom: 1px solid var(--line); }
.fi-screen-chrome span { width: 9px; height: 9px; border-radius: 50%; background: var(--line); }
.fi-screen-chrome b { font-size: 10.5px; font-weight: 600; color: var(--muted);
                      background: var(--surface); border-radius: 6px;
                      padding: 3px 10px; margin-left: 7px; overflow: hidden;
                      text-overflow: ellipsis; white-space: nowrap; }
/* The intrinsic width/height on the <img> reserves the box before the file
   arrives, so nothing below it jumps when it does. */
.fi-screen img { display: block; width: 100%; height: auto; background: var(--surface-2); }

.fi-hero-shot { min-width: 0; }

.fi-screens { display: grid; gap: 26px; grid-template-columns: 1fr; }
.fi-screen-item h3 { margin: 16px 0 4px; font-size: 1.02rem; letter-spacing: -.02em; }
.fi-screen-item p { margin: 0; color: var(--muted-ink); font-size: .93rem; }
@media (min-width: 760px) {
  .fi-screens { grid-template-columns: repeat(2, 1fr); gap: 30px; }
}