/* ============================================================
   Flairr site design (2026-10-07)
   Modelled on firecrawl.dev: a light grid page (#f9f9f9), hairline
   container rails, numbered section labels in mono, animated ASCII
   art behind section heads, and one accent colour. Firecrawl's
   orange ("heat") is Flairr blue here: change --blue to re-tint.
   Type: Inter (free stand-in for Suisse) + Geist Mono + Roboto Mono, self-hosted.
   ============================================================ */

@font-face { font-family: "Inter"; src: url("/fonts/Inter-latin.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Inter"; src: url("/fonts/Inter-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Roboto Mono"; src: url("/fonts/RobotoMono-latin.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: "Roboto Mono"; src: url("/fonts/RobotoMono-latin-ext.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Geist Mono"; src: url("/fonts/GeistMono-Variable.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; }

:root {
  --blue: #1440d9;
  --blue-hover: color-mix(in oklab, var(--blue), black 7%);
  --blue-press: color-mix(in oklab, var(--blue), black 13%);
  --blue-90: color-mix(in srgb, var(--blue) 90%, transparent);
  --blue-80: color-mix(in srgb, var(--blue) 80%, transparent);
  /* Light blues for tints, tags, pills, outlines and chart fills. Solid
     colours from a true blue scale, not see-through cobalt: cobalt leans
     violet, so a faint wash of it over the grey page reads lavender. */
  --blue-40: #9cbaf7;   /* outlines on highlighted things */
  --blue-24: #bfd3fb;
  --blue-16: #d3e3fd;   /* THE highlight: text selection, tags, pills, chips, chart fills, checks; always with cobalt on it */
  --blue-12: #dde8fd;   /* soft glows (live dots, focus rings) */
  --blue-4: #f0f5fe;    /* large areas: the open item, a highlighted cell */

  --bg: #f9f9f9;
  --bg-2: #fbfbfb;
  --surface: #fff;
  --ink: #262626;
  --ink-88: rgba(38, 38, 38, .88);
  --ink-72: rgba(38, 38, 38, .72);
  --ink-56: rgba(38, 38, 38, .56);
  --ink-40: rgba(38, 38, 38, .4);
  --ink-64: rgba(38, 38, 38, .64);
  --ink-32: rgba(38, 38, 38, .32);
  --ink-16: rgba(38, 38, 38, .16);
  --a2: rgba(0, 0, 0, .02);
  --a4: rgba(0, 0, 0, .04);
  --a6: rgba(0, 0, 0, .06);
  --a7: rgba(0, 0, 0, .07);
  --a8: rgba(0, 0, 0, .08);
  --line: #ededed;
  --line-2: #e8e8e8;
  --line-3: #e6e6e6;
  --ill: #dbdbdb;

  --wrap: 1112px;
  --gut: 16px;
  --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --mono: "Geist Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;


  /* Type scale, taken from firecrawl.dev's CSS (2026-10-07). Firecrawl sets
     everything in Suisse Int'l (licensed); Inter is the closest free match
     and has the same in-between weights. Three weights only: 400 body, 450
     labels/buttons/nav, 500 titles. Geist Mono for labels and code, Roboto
     Mono for the ASCII art, as on firecrawl.dev. Titles are Inter 600 at
     -3% tracking: that matches Suisse 500's stroke and width side by side
     (Inter at the same nominal 500 reads thinner and wider). Titles track tight
     (about -1%) with line-height = size + 4px. Below 995px titles shrink and
     small text grows (see the media block at the end of :root rules). */
  --h1: 600 60px/64px var(--sans);   --h1-ls: -.03em;
  --h2: 600 52px/56px var(--sans);   --h2-ls: -.03em;
  --h3: 600 40px/44px var(--sans);   --h3-ls: -.03em;
  --h4: 600 32px/36px var(--sans);   --h4-ls: -.03em;
  --h5: 600 24px/32px var(--sans);   --h5-ls: -.03em;
  --h-blog: 600 28px/36px var(--sans); --h-blog-ls: -.025em;
  --body-xl: 400 20px/28px var(--sans);  --label-xl: 450 20px/28px var(--sans); --xl-ls: -.1px;
  --body-lg: 400 16px/24px var(--sans);  --label-lg: 450 16px/24px var(--sans); --lg-ls: 0;
  --body-md: 400 14px/20px var(--sans);  --label-md: 450 14px/20px var(--sans); --md-ls: .14px;
  --body-sm: 400 13px/20px var(--sans);  --label-sm: 450 13px/20px var(--sans);
  --body-xs: 400 12px/20px var(--sans);  --label-xs: 450 12px/20px var(--sans);
  --body-input: 400 15px/24px var(--sans);
  --mono-md: 400 14px/22px var(--mono);
  --mono-sm: 500 13px/20px var(--mono);
  --mono-xs: 400 12px/16px var(--mono);

  --shadow-card: 0 0 0 1px var(--a4), 0 1px 1px rgba(0,0,0,.02), 0 4px 8px -4px rgba(0,0,0,.04), 0 16px 24px -8px rgba(0,0,0,.06);
  --shadow-pop: 0 0 0 1px var(--a4), 0 2px 4px rgba(0,0,0,.03), 0 12px 32px -8px rgba(0,0,0,.08), 0 40px 60px -24px rgba(0,0,0,.08);
  --shadow-btn: inset 0 -6px 12px color-mix(in srgb, color-mix(in oklab, var(--blue), black 29%) 22%, transparent), 0 2px 4px var(--blue-12), 0 1px 1px var(--blue-12), 0 .5px .5px var(--blue-16), 0 .25px .25px color-mix(in srgb, var(--blue) 20%, transparent);
  --shadow-btn-hover: inset 0 -6px 12px color-mix(in srgb, color-mix(in oklab, var(--blue), black 29%) 22%, transparent), 0 4px 8px var(--blue-16), 0 1px 1px var(--blue-12), 0 .5px .5px var(--blue-16), 0 .25px .25px color-mix(in srgb, var(--blue) 20%, transparent);
}

@media (max-width: 995px) {
  :root {
    --h1: 600 44px/48px var(--sans);  --h1-ls: -.03em;
    --h2: 600 36px/40px var(--sans);  --h2-ls: -.03em;
    --h3: 600 32px/36px var(--sans);  --h3-ls: -.03em;
    --h4: 600 22px/26px var(--sans);  --h4-ls: -.03em;
    --h-blog: 600 24px/32px var(--sans); --h-blog-ls: -.025em;
    --body-xl: 400 20px/28px var(--sans); --label-xl: 450 20px/28px var(--sans); --xl-ls: -.1px;
    --body-lg: 400 18px/26px var(--sans); --label-lg: 450 18px/26px var(--sans); --lg-ls: -.09px;
    --body-md: 400 16px/24px var(--sans); --label-md: 450 16px/24px var(--sans); --md-ls: .16px;
    --body-sm: 400 15px/22px var(--sans); --label-sm: 450 15px/22px var(--sans);
    --body-xs: 400 13px/20px var(--sans);
  }
}

*, *::before, *::after { box-sizing: border-box; }
h1, h2, h3, h4 { text-wrap: balance; }
p { text-wrap: pretty; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 88px; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font: var(--body-lg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
  text-rendering: optimizeLegibility;
}
img, svg, video, canvas { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
h1, h2, h3, h4, h5, h6, p, ul, ol, figure, blockquote, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }
/* selected text turns cobalt on a clear light blue (a solid colour: a see-through cobalt tint reads violet) */
::selection { background: var(--blue-16); color: var(--blue); }
:focus-visible { outline: 2px solid var(--blue); outline-offset: 2px; border-radius: 4px; }

.wrap { width: min(var(--wrap), 100% - var(--gut) * 2); margin-inline: auto; position: relative; }
.mono { font-family: var(--mono); }
.hl { color: var(--blue); font-style: normal; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ---------- Page rails: the two hairlines that run the length of the page ----------
   Firecrawl draws every line crossing as a curved "+" (the connector below) and
   rounds the inside corners of every cell with a 6px wedge in the line colour
   (--cv), so the grid reads soft rather than ruled. */
:root {
  --conn: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='22' height='21' viewBox='0 0 22 21'%3E%3Cpath d='M10.5 4C10.5 7.31371 7.81371 10 4.5 10H0.5V11H4.5C7.81371 11 10.5 13.6863 10.5 17V21H11.5V17C11.5 13.6863 14.1863 11 17.5 11H21.5V10H17.5C14.1863 10 11.5 7.31371 11.5 4V0H10.5V4Z' fill='%23ededed'/%3E%3C/svg%3E");
  --cv:
    radial-gradient(circle at 100% 100%, transparent 5.5px, var(--line) 6px) 0 0 / 6px 6px no-repeat,
    radial-gradient(circle at 0 100%, transparent 5.5px, var(--line) 6px) 100% 0 / 6px 6px no-repeat,
    radial-gradient(circle at 100% 0, transparent 5.5px, var(--line) 6px) 0 100% / 6px 6px no-repeat,
    radial-gradient(circle at 0 0, transparent 5.5px, var(--line) 6px) 100% 100% / 6px 6px no-repeat;
}
.page-lines {
  position: fixed; inset: 0 auto 0 50%;
  width: min(var(--wrap), 100% - var(--gut) * 2);
  transform: translateX(-50%);
  border-inline: 1px solid var(--line);
  pointer-events: none;
  z-index: 3;
}
main, .ftr { position: relative; z-index: 1; }

/* full-bleed horizontal hairline, with a connector where it meets each rail */
.seam { position: relative; height: 0; z-index: 4; }
.seam::before {
  content: ""; position: absolute; top: 0; left: 50%; width: 100vw; transform: translateX(-50%);
  border-top: 1px solid var(--line);
}
.seam::after {
  content: ""; position: absolute; top: -10px; left: -10.5px; right: -10.5px; height: 21px;
  background: var(--conn) 0 0 / 22px 21px no-repeat, var(--conn) 100% 0 / 22px 21px no-repeat;
  pointer-events: none;
}

/* rounded inside corners on every grid cell and block */
.cv, .cells > *, .faq > *, .ux-item, .ux-panel, .ba > *, .cta > *, .logos > *, .ftr-top > *, .ftr-col, .ftr-cols > *, .shead, .checkcols > *, .icongrid > *, .wall > *, .tl-main, .story-main, .lhero-top { position: relative; }
.cv::after, .cells > *::after, .faq > *::after, .ux-item::after, .ux-panel::after, .ba > *::after, .cta > *::after, .logos > *::after,
.ftr-top > *::after, .ftr-col::after, .ftr-cols > *::after, .shead::after, .checkcols > *::after, .icongrid > *::after, .wall > *::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; background: var(--cv); z-index: 2;
}

/* ---------- Buttons (Firecrawl .button-primary / -secondary / -tertiary) ---------- */
.btn {
  position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  padding: 8px 14px; border-radius: 10px;
  font: var(--label-md); white-space: nowrap; color: var(--ink);
  transition: background-color .2s, box-shadow .2s, color .2s, scale .1s;
}
.btn:active { scale: .99; transition-duration: 50ms; }
.btn svg { width: 16px; height: 16px; flex: none; position: relative; }
.btn > span { position: relative; }
.btn-primary { background: var(--blue); color: #fff; box-shadow: inset 0 -1px 0 color-mix(in srgb, color-mix(in oklab, var(--blue), black 42%) 25%, transparent); }
.btn-primary::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(#fff, transparent); opacity: .06; transition: opacity .2s; pointer-events: none; }
.btn-primary:hover { background: var(--blue-hover); }
.btn-primary:active { background: var(--blue-press); }
.btn-2 { background: var(--a4); }
.btn-2:hover { background: var(--a6); }
.btn-2:active { background: var(--a7); }
.btn-3 { background: transparent; }
.btn-3:hover { background: var(--a4); }
.btn-3:active { background: var(--a7); }
.btn-white { background: #fff; color: var(--ink); box-shadow: 0 1px 2px rgba(0,0,0,.08); }
.btn-white:hover { background: color-mix(in srgb, var(--blue) 5%, #fff); }
.btn-line { color: #fff; box-shadow: inset 0 0 0 1px rgba(255,255,255,.5); }
.btn-line:hover { background: rgba(255,255,255,.12); }
.btn-sm { padding: 6px 12px; border-radius: 8px; }
.btn-3.btn-sm { padding: 6px 10px; }
.btn-lg { padding: 10px 16px; }
.btns { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 12px; }
.btns.start { justify-content: flex-start; }

.link {
  display: inline-flex; align-items: center; gap: 4px;
  color: var(--blue); font: var(--label-md); transition: opacity .15s;
}
.link:hover { opacity: .8; }
.link svg { width: 16px; height: 16px; transition: transform .2s; }
.link:hover svg { transform: translateX(2px); }

/* ---------- Header (Firecrawl: 100px, own rails, divider, connectors) ---------- */
.hdr { position: sticky; top: 0; z-index: 101; background: var(--bg); }
.hdr::after { content: ""; position: absolute; left: 50%; bottom: -1px; width: 100vw; height: 1px; transform: translateX(-50%); background: var(--line); }
.hdr-rails, .mega-rails {
  position: absolute; top: 0; bottom: 0; left: 50%; transform: translateX(-50%);
  width: min(var(--wrap), 100% - var(--gut) * 2);
  border-inline: 1px solid var(--line); pointer-events: none;
}
.hdr-rails::after, .mega-rails::after {
  content: ""; position: absolute; left: -11.5px; right: -11.5px; height: 21px; bottom: -11px;
  background: var(--conn) 0 0 / 22px 21px no-repeat, var(--conn) 100% 0 / 22px 21px no-repeat; z-index: 2;
}
.mega-rails::after { bottom: auto; top: -11px; }
.hdr-in { height: 100px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; padding-inline: 56px; }
.hdr-logo { display: flex; align-items: center; justify-self: start; }
.hdr-logo img { height: 22px; width: auto; }
.hdr-nav { display: flex; align-items: center; gap: 8px; }
.hdr-link {
  position: relative; display: flex; align-items: center; height: 32px; padding: 6px; border-radius: 8px;
  font: var(--label-md); color: var(--ink); transition: scale 50ms;
}
.hdr-link > * { position: relative; }
.hdr-link > span { padding: 0 4px; }
.hdr-link::before { content: ""; position: absolute; inset: 0; border-radius: inherit; transform: scale(.95); transition: background-color .15s, transform .15s; }
.hdr-link:hover::before, .hdr-link.is-current::before, .hdr-drop[aria-expanded="true"]::before { background: var(--a4); transform: none; }
.hdr-link:active { scale: .98; }
.hdr-link:active::before { background: var(--a7); }
.hdr-drop svg { width: 18px; height: 20px; transition: transform .2s; }
.hdr-drop[aria-expanded="true"] svg { transform: rotate(180deg); }
.hdr-right { display: flex; align-items: center; justify-content: flex-end; gap: 8px; }
/* the three lines sit on one centre point, so the open X crosses exactly in the middle of the button */
.burger { display: none; position: relative; flex: none; width: 36px; height: 36px; border-radius: 8px; }
.burger:hover { background: var(--a4); }
.burger span { position: absolute; left: 10px; top: 50%; width: 16px; height: 1.5px; margin-top: -.75px; background: var(--ink); border-radius: 2px; transition: transform .2s, opacity .2s; }
.burger span:nth-child(1) { transform: translateY(-5px); }
.burger span:nth-child(3) { transform: translateY(5px); }
.burger[aria-expanded="true"] span:nth-child(1) { transform: rotate(45deg); }
.burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.burger[aria-expanded="true"] span:nth-child(3) { transform: rotate(-45deg); }

/* mega menu (Firecrawl header dropdown: full width, hairline grid, dimmed page) */
/* the panel unrolls down from the header and rolls back up (clip-path, no fade);
   the side margins in the inset keep the rail connectors at its top edge visible */
.mega {
  position: absolute; top: calc(100% + 1px); left: 0; right: 0;
  background: var(--bg); border-bottom: 1px solid var(--line);
  visibility: hidden; clip-path: inset(-12px -12px 100% -12px);
  transition: clip-path .3s cubic-bezier(.4, 0, .2, 1), visibility 0s linear .3s;
}
.mega.is-open { visibility: visible; clip-path: inset(-12px -12px -12px -12px); transition: clip-path .42s cubic-bezier(.32, .72, 0, 1), visibility 0s; }
.mega-in { transform: translateY(-10px); transition: transform .3s cubic-bezier(.4, 0, .2, 1); }
.mega.is-open .mega-in { transform: none; transition-duration: .42s; transition-timing-function: cubic-bezier(.32, .72, 0, 1); }
/* moving straight from one dropdown to the other swaps the panels in place */
.mega.swap, .mega.swap .mega-in { transition: none; }
/* a hover bridge from the open button down to its panel, so the pointer can
   cross the header without the panel closing */
.hdr-drop[aria-expanded="true"]::after { content: ""; position: absolute; left: -24px; right: -24px; top: 100%; height: 44px; }
@media (prefers-reduced-motion: reduce) { .mega, .mega.is-open, .mega-in { transition: none; } }
.mega-in { display: flex; gap: 16px; }
.mega-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.mega-side { width: 360px; flex: none; display: flex; flex-direction: column; }
/* breathing room under the last row; each column's edges run down through it to the panel's bottom */
.mega-main, .mega-side { padding-bottom: 24px; box-shadow: inset 1px 0 var(--line), inset -1px 0 var(--line); }
.mega-title { padding: 20px 44px; font: var(--body-md); color: var(--ink-64); border-inline: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.mega-grid { flex: 1; display: grid; grid-template-columns: 1fr 1fr; grid-auto-rows: 1fr; column-gap: 16px; }
/* Services: the AI operating system leads across the top, the two ways in sit under it */
.mega-grid-3 > :first-child { grid-column: 1 / -1; }
.mega-item {
  display: flex; gap: 16px; align-items: flex-start; padding: 16px 44px;
  border-inline: 1px solid var(--line); border-bottom: 1px solid var(--line);
  transition: background-color .15s, color .15s;
}
.mega-item:hover { background: var(--a2); color: var(--blue); }
.mega-ico { display: flex; flex: none; padding-top: 1px; }
.mega-ico svg { width: 20px; height: 20px; }
.mega-item b { display: block; font: var(--label-md); }
.mega-item small { display: block; margin-top: 4px; font: var(--body-md); color: var(--ink-64); text-wrap: pretty; }
.mega-feature { padding: 28px 44px; border-inline: 1px solid var(--line); border-bottom: 1px solid var(--line); flex: 1; }
.mega-tile { width: 40px; height: 40px; border-radius: 10px; display: grid; place-items: center; background: var(--blue); }
.mega-tile img { width: 20px; height: auto; filter: invert(1); }
.mega-feature p { margin-top: 16px; font: var(--label-lg); max-width: 220px; }
/* Services: the side column shows proof, the panel's own; its card links to the case study */
a.mega-feature { display: block; transition: background-color .15s; }
a.mega-feature:hover { background: var(--a2); }
.mega-feature p b { font-weight: 500; color: var(--blue); }
.mega-tile svg { width: 20px; height: 20px; color: #fff; }
.mega-dim { position: fixed; inset: 0; z-index: 100; background: rgba(38,38,38,.4); opacity: 0; visibility: hidden; transition: opacity .3s, visibility .3s; }
body.mega-on .mega-dim { opacity: 1; visibility: visible; }

/* mobile menu (Firecrawl: a stack of outlined cards, Resources folds open in place) */
.mnav {
  position: fixed; inset: 72px 0 0; z-index: 100;
  display: flex; flex-direction: column; gap: 4px;
  background: var(--bg); overflow-y: auto; overscroll-behavior: contain;
  padding: 8px var(--gut) 24px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity .2s, transform .2s, visibility .2s;
}
.mnav.open { opacity: 1; visibility: visible; transform: none; }
.mnav > a:not(.btn), .mnav-group { border: 1px solid var(--line); border-radius: 10px; }
.mnav > a:not(.btn), .mnav-toggle {
  display: flex; align-items: center; justify-content: space-between; width: 100%;
  min-height: 56px; padding: 0 20px; font: var(--label-lg); color: var(--ink); text-align: left;
  transition: background-color .15s, color .15s;
}
.mnav > a:not(.btn):active, .mnav-toggle:active { background: var(--a4); }
.mnav > a.is-current { color: var(--blue); }
.mnav-toggle svg { width: 18px; height: 20px; color: var(--ink-40); transition: transform .2s; }
.mnav-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }
.mnav-sub { display: none; padding: 0 0 8px; }
.mnav-toggle[aria-expanded="true"] + .mnav-sub { display: block; }
.mnav-sub a { display: block; padding: 10px 20px; font: var(--label-md); color: var(--ink-64); }
.mnav-sub a:active, .mnav-sub a[aria-current="page"] { color: var(--blue); }
.mnav .btn { margin-top: 8px; width: 100%; padding: 10px 14px; }
body.menu-open { overflow: hidden; }

/* ---------- Section rails: [ 01 / 08 ] · LABEL (Firecrawl: 140px gap, 106px row) ---------- */
.gap { height: 140px; }
.gap-sm { height: 64px; }
.rail { position: relative; } /* the split line meets the seams plainly: no connector marks there, they read as crosses into the next section */
.rail-in { height: 106px; display: flex; align-items: center; padding-left: 42px; }
.rail-in::before { content: ""; position: absolute; left: 0; top: 50%; width: 2px; height: 16px; margin-top: -8px; background: var(--blue); }
.rail-in::after { content: ""; position: absolute; left: 50%; top: 0; bottom: 0; border-left: 1px solid var(--line); }
.rail-label { display: flex; align-items: center; gap: 12px; font: var(--mono-xs); text-transform: uppercase; color: var(--ink-16); white-space: nowrap; }
.rail-label b { font-weight: 400; color: var(--blue); }
.rail-label i { font-style: normal; width: 8px; text-align: center; }
.rail-label .rl-t { color: var(--ink-32); }

/* ---------- ASCII art canvases (js/site.js) ---------- */
.ascii { position: absolute; pointer-events: none; user-select: none; }

/* ---------- Section head (Firecrawl: 143px padding, badge on its own underline) ---------- */
.shead { position: relative; text-align: center; padding: 143px 24px; overflow: hidden; }
.shead > .ascii { inset: 10px; width: calc(100% - 20px); height: calc(100% - 20px); }
.shead > *:not(.ascii) { position: relative; }
.shead h2, .h2 {
  font: var(--h2); letter-spacing: var(--h2-ls);
  max-width: 820px; margin: 0 auto; padding: 12px 20px 8px; text-wrap: balance;
}
.shead p { max-width: 440px; margin: 0 auto; padding: 8px 20px; color: var(--ink-72); font: var(--body-lg); letter-spacing: var(--lg-ls); text-wrap: pretty; }
.shead p + p { margin-top: 4px; }
.shead .btns { margin-top: 24px; }

.badge {
  display: flex; align-items: center; gap: 10px; width: max-content; max-width: 100%; text-wrap: balance;
  margin: 0 auto; padding: 16px 12px;
  font: var(--label-xs); color: var(--ink);
  background: var(--bg); box-shadow: inset 0 -1px var(--line);
  position: relative;
}
.badge::before, .badge::after { content: "//"; color: var(--ink-16); font: var(--label-xs); }
.badge::after { transform: scaleX(-1); }
.badge-ico { width: 16px; height: 16px; border-radius: 4px; display: grid; place-items: center; background: var(--blue); color: #fff; }
.badge-ico svg { width: 10px; height: 10px; }
.shead .badge + h2, .shead .badge + div > h2 { margin-top: 0; }

/* ---------- Hero (Firecrawl frame: concentric columns, top row of cells, open centre) ----------
   js/site.js builds the frame into .hero-frame from data-tags. */
.hero { position: relative; overflow: hidden; }
.hero-frame { position: absolute; top: 0; left: 0; right: 0; height: 100%; pointer-events: none; }
.hf { position: absolute; top: 0; bottom: 0; left: 50%; width: 1112px; margin-left: -556px; }
.hf i { position: absolute; display: block; }
.hf .v { top: 0; width: 1px; background: var(--line); }
.hf .h { height: 1px; background: var(--line); }
.hf .c { background: var(--cv); }
.hf .b { left: -2000px; right: -2000px; height: 1px; background: var(--line); }
.hf .t.long { font-size: 10px; letter-spacing: -.02em; }
.hf .t { font: var(--mono-xs); font-style: normal; color: rgba(38,38,38,.16); text-transform: uppercase; text-align: center; width: 102px; white-space: nowrap; }
.hf .s { width: 47px; height: 47px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); }
.hf .s::before { content: ""; position: absolute; inset: 0; background: var(--blue); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47 47'%3E%3Cpath d='M24 18C24 21.3137 26.6863 24 30 24H34V25H30C26.6863 25 24 27.6863 24 31V35H23V31C23 27.6863 20.3137 25 17 25H13V24H17C20.3137 24 23 21.3137 23 18V14H24V18Z' fill='%23000'/%3E%3C/svg%3E") center / 47px 47px no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 47 47'%3E%3Cpath d='M24 18C24 21.3137 26.6863 24 30 24H34V25H30C26.6863 25 24 27.6863 24 31V35H23V31C23 27.6863 20.3137 25 17 25H13V24H17C20.3137 24 23 21.3137 23 18V14H24V18Z' fill='%23000'/%3E%3C/svg%3E") center / 47px 47px no-repeat; }
.hf .p { display: grid; grid-template-columns: repeat(3, 6px); gap: 3px; }
.hf .p b { width: 6px; height: 6px; border-radius: 1px; background: var(--ill); }
.hf .p b.o { background: transparent; }
.hf .p b.x { background: var(--blue-40); }

.hero-in { position: relative; text-align: center; padding: 154px 24px 72px; }
.hero h1, .h1 {
  font: var(--h1); letter-spacing: var(--h1-ls);
  max-width: 820px; margin: 0 auto 16px; text-wrap: balance;
}
.hero h1 .hl { display: block; }
.hero .sub { max-width: 480px; margin: 0 auto; color: var(--ink); font: var(--body-lg); letter-spacing: var(--lg-ls); text-wrap: pretty; }
.hero .sub mark { background: var(--a4); color: var(--ink); padding: 1px 6px; border-radius: 6px; }
.hero .btns { margin-top: 28px; }
.pill {
  display: flex; width: max-content; align-items: center; margin: 0 auto 16px;
  padding: 4px; border-radius: 999px;
  box-shadow: inset 0 0 0 1px var(--line);
  font: var(--label-xs); color: var(--ink);
}
.pill > span:first-child { padding: 0 8px; }
.pill i { position: relative; width: 18px; height: 18px; margin: 1px; border-radius: 999px; background: var(--ink); color: #fff; display: grid; place-items: center; transition: width .2s, background-color .2s; }
.pill:hover i { width: 30px; background: var(--blue); }
.pill i svg { width: 10px; height: 10px; }

/* the "ask your business" box (Firecrawl hero input: 552px, 20px radius, 10px halo) */
.askbox {
  position: relative; z-index: 5;
  width: min(552px, 100%); margin: 24px auto 0; text-align: left;
  background: var(--surface); border-radius: 20px;
  box-shadow: 0 0 44px rgba(0,0,0,.02), 0 88px 56px -20px rgba(0,0,0,.03), 0 56px 56px -20px rgba(0,0,0,.02), 0 32px 32px -20px rgba(0,0,0,.03), 0 16px 24px -12px rgba(0,0,0,.03), 0 0 0 1px rgba(0,0,0,.05), 0 0 0 10px var(--bg);
}
.askbox-in { display: flex; align-items: center; gap: 8px; padding: 16px; border-bottom: 1px solid rgba(0,0,0,.05); color: var(--ink-40); }
.askbox-in svg { width: 20px; height: 20px; flex: none; }
.askbox-q { color: var(--ink-56); font: var(--body-input); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 24px; }
.askbox-q::after { content: ""; display: inline-block; width: 1px; height: 18px; margin-left: 1px; vertical-align: -3px; background: var(--blue); animation: caret 1s steps(1) infinite; }
@keyframes caret { 50% { opacity: 0; } }
.askbox-foot { display: flex; align-items: center; justify-content: space-between; padding: 10px; }
.seg { position: relative; display: flex; align-items: center; padding: 2px; border-radius: 10px; background: var(--a4); box-shadow: inset 0 6px 12px rgba(0,0,0,.02), inset 0 .75px .75px rgba(0,0,0,.02), inset 0 .25px .25px rgba(0,0,0,.04); }
.seg > span { position: relative; z-index: 1; display: inline-flex; align-items: center; height: 32px; padding: 6px 12px; border-radius: 8px; font: var(--label-md); color: var(--ink-56); cursor: pointer; user-select: none; -webkit-tap-highlight-color: transparent; transition: color .25s, transform .35s cubic-bezier(.34,1.56,.64,1); }
.seg > span:hover { color: var(--ink-88); }
.seg > span:active { transform: scale(.94); transition-duration: .12s; }
.seg > span:focus-visible { outline: 2px solid var(--blue-40); outline-offset: 1px; }
.seg > span.on { color: var(--ink); }
/* the white pill springs to the selected tab: a short overshoot, then it settles */
.seg-ind { position: absolute; left: 0; top: 2px; bottom: 2px; width: 0; border-radius: 8px; background: var(--surface); pointer-events: none;
  box-shadow: 0 6px 12px -3px rgba(0,0,0,.04), 0 3px 6px -1px rgba(0,0,0,.04), 0 1px 2px rgba(0,0,0,.04), 0 .5px .5px rgba(0,0,0,.06);
  transition: transform .55s cubic-bezier(.34,1.4,.5,1), width .55s cubic-bezier(.34,1.4,.5,1), opacity .2s; }
.js .seg > span.on { background: none; box-shadow: none; }
.seg > span + span::before { content: ""; position: absolute; left: -.5px; top: 10px; width: 1px; height: 12px; background: rgba(0,0,0,.05); }
.seg > span.on::before, .seg > span.on + span::before { display: none; }
.askbox-go { padding: 8px 12px; }
.askbox-go svg { width: 16px; height: 16px; }

/* ---------- Cell grids (hairline dividers) ---------- */
.cells { display: grid; gap: 1px; background: var(--line); position: relative; }
.cells > * { background: var(--bg); min-width: 0; }
.cells-2 { grid-template-columns: repeat(2, 1fr); }
.cells-3 { grid-template-columns: repeat(3, 1fr); }
.cells-4 { grid-template-columns: repeat(4, 1fr); }
.cell { padding: 40px 32px; position: relative; }
.cell-lg { padding: 56px 48px; }

/* centred feature card (Firecrawl "Search / Scrape / Interact": 20px radius, frosted active panel) */
.feat { padding: 12px; text-align: center; position: relative; }
.feat-box { display: block; position: relative; padding: 32px 20px; border-radius: 20px; }
button.feat { width: 100%; font: inherit; color: inherit; cursor: pointer; padding: 44px 32px; }
.feat .pixico { margin: 0 auto 20px; }
.feat h3, .feat-t { display: block; font: var(--label-md); margin-bottom: 8px; }
.feat p, .feat-d { display: block; margin: 0 auto; max-width: 240px; color: var(--ink-72); font: var(--body-md); letter-spacing: var(--md-ls); }
.feat .link { margin-top: 8px; font: var(--label-xs); }
.feat-card { position: absolute; inset: 12px; border-radius: 20px; opacity: 0; transform: scale(.98); transition: opacity .25s, transform .25s, box-shadow .25s, background-color .25s; box-shadow: inset 0 0 0 1px var(--line); }
.feat > *:not(.feat-card) { position: relative; z-index: 1; }
button.feat:hover .feat-card { opacity: 1; transform: none; }
.feat.is-active .feat-card { opacity: 1; transform: none; background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); box-shadow: 0 40px 48px -20px rgba(0,0,0,.02), 0 32px 32px -20px rgba(0,0,0,.03), 0 16px 24px -12px rgba(0,0,0,.03), 0 0 0 1px rgba(0,0,0,.03); }

/* pixel icon: a 3x3 dot glyph like Firecrawl's */
.pixico { display: grid; grid-template-columns: repeat(3, 6px); gap: 2px; width: max-content; }
.pixico i { width: 6px; height: 6px; border-radius: 1px; background: var(--ink-32); }
.pixico i.b { background: var(--blue); }
.pixico i.o { background: transparent; }

/* left-aligned copy cell (Firecrawl "Industry-leading reliability.") */
.copy { padding: 60px 88px 56px 64px; }
.cells-3 > .copy, .cells-4 > .copy { padding: 48px 40px 44px; }
.copy-tag { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-64); font: var(--label-sm); margin-bottom: 16px; }
.copy-tag svg { width: 16px; height: 16px; }
.lead { font: var(--body-lg); letter-spacing: var(--lg-ls); color: var(--ink-64); text-wrap: pretty; } /* the same size as every run-in card (.run, .checkcols) */
.lead b, .lead strong { color: var(--ink); font: var(--label-lg); font-weight: 500; }
/* the bold title runs straight into the grey text, as one sentence (as on
   firecrawl.dev); .lead.stack puts a title with no full stop on its own line */
.copy .link { margin-top: 16px; font: var(--label-lg); }
.copy p + p { margin-top: 12px; }
.copy .small { font: var(--body-sm); color: var(--ink-40); margin-top: 14px; }
/* a source cited inside the sentence, instead of a line under it */
a.src { color: inherit; text-decoration: underline; text-decoration-color: var(--ink-16); text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color .15s, text-decoration-color .15s; }
a.src:hover { color: var(--blue); text-decoration-color: var(--blue-40); }

/* stat cells */
.stat { padding: 32px 28px; }
.stat b { display: block; color: var(--blue); font: var(--h3); letter-spacing: var(--h3-ls); font-variant-numeric: tabular-nums; }
.stat > span { display: block; margin-top: 8px; font: var(--label-md); }
.stat small { display: block; margin-top: 2px; font: var(--body-sm); color: var(--ink-56); }
.stat.c { text-align: center; padding: 40px 24px; }

/* numbered step cells (Firecrawl "How it works") */
.step { padding: 32px 28px 40px; }
.step-no { font: var(--mono-xs); color: var(--ink-32); }
.step-no b { font-weight: 400; color: var(--blue); }
.step h3 { margin-top: 20px; font: var(--label-lg); letter-spacing: var(--lg-ls); }
.step p { margin-top: 8px; color: var(--ink-72); font: var(--body-md); letter-spacing: var(--md-ls); }
/* Run-in (as on firecrawl.dev): the bold title runs straight into the grey
   text as one sentence. .run on a step or item; checklist titles always */
.run { font: var(--body-lg); letter-spacing: var(--lg-ls); } /* sets the line height the run-in sentence sits on */
.run.run > h3 { display: inline; margin: 0; font: var(--label-lg); font-weight: 500; letter-spacing: var(--lg-ls); color: var(--ink); }
.run > h3::after { content: " "; }
.run.run > h3 + p { display: inline; margin: 0; font: var(--body-lg); color: var(--ink-64); }
.run > h3 + p + * { margin-top: 12px; }
.run > h3 + p + .link { display: flex; width: fit-content; }
.step.run .step-no { display: block; margin-bottom: 20px; }

/* short point cells (security row) */
.pt { margin-top: 14px; font: var(--label-lg); letter-spacing: var(--lg-ls); text-wrap: pretty; }

/* chips */
.chip { display: inline-flex; align-items: center; height: 20px; padding: 0 6px; border-radius: 6px; background: var(--blue-16); color: var(--blue); font: var(--mono-xs); font-size: 11px; text-transform: uppercase; }
.chip-grey { background: var(--a4); color: var(--ink-56); }

/* ---------- Windows, code, mock UI ---------- */
.win { background: var(--surface); border-radius: 12px; box-shadow: var(--shadow-card); overflow: hidden; text-align: left; }
.win-bar { height: 40px; display: flex; align-items: center; gap: 6px; padding: 0 14px; border-bottom: 1px solid var(--line); }
.win-bar > i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-3); }
.win-bar .win-t { margin-left: auto; white-space: nowrap; font: var(--mono-xs); font-size: 11px; color: var(--ink-40); text-transform: uppercase; }
.win-bar .win-url { margin-left: 8px; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font: var(--body-xs); color: var(--ink-40); }
.win-bar .win-url b { color: var(--ink); font-weight: 400; }

.done-chip { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px 0 6px; border-radius: 999px; background: var(--surface); box-shadow: var(--shadow-card); font: var(--mono-xs); font-size: 11px; line-height: 28px; color: var(--ink); }
.done-chip i { width: 16px; height: 16px; border-radius: 50%; background: var(--blue); display: grid; place-items: center; color: #fff; }
.done-chip i svg { width: 10px; height: 10px; }

/* the "systems → one answer" mock under the home hero */
/* systems -> one answer (home): Firecrawl's scraping wireframe. A faint
   outline-only picture of the business's systems; an outline box steps
   through them, each label decodes as it is read, the matching records turn
   blue and the answer window fills in. js: scanDemo. */
.scan { padding: 24px 32px 0; }
.scan-frame { position: relative; border-radius: 16px 16px 0 0; box-shadow: inset 0 0 0 1px var(--line); padding: 0 6px; overflow: hidden;
  -webkit-mask: linear-gradient(#000 70%, rgba(0,0,0,.35)); mask: linear-gradient(#000 70%, rgba(0,0,0,.35)); }
.scan-chrome { position: relative; height: 42px; display: flex; align-items: center; gap: 8px; padding: 0 11px; }
.scan-chrome > i { width: 10px; height: 10px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-3); }
/* the open tab runs straight into the page: no line under it, and its sides
   flare out into the page's top edge (a ring cut from a 10px circle) */
.scan-chrome { z-index: 2; }
.scan-tab { position: absolute; left: 84px; bottom: -1px; width: 180px; height: 31px; box-sizing: border-box; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; background: var(--bg); display: flex; align-items: center; padding-left: 9px; }
.scan-tab::before, .scan-tab::after { content: ""; position: absolute; bottom: 0; width: 10px; height: 10px; }
.scan-tab::before { left: -10px; background: radial-gradient(circle at 0 0, transparent 9px, var(--line) 9px, var(--line) 10px, var(--bg) 10px); }
.scan-tab::after { right: -10px; background: radial-gradient(circle at 100% 0, transparent 9px, var(--line) 9px, var(--line) 10px, var(--bg) 10px); }
.scan-tab i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-3); }
.scan-end { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.scan-end i { width: 16px; height: 16px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-3); }
.scan-end b { width: 44px; height: 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-3); }
.scan-page { position: relative; border-radius: 10px 10px 0 0; box-shadow: inset 0 0 0 1px var(--line); }
.sk { display: block; flex: none; height: 16px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-3); transition: box-shadow .35s, background-color .35s; }
.sk-c { width: 24px; height: 24px; }
.sk-btn { width: 72px; height: 24px; }
.sk-box { height: 32px; border-radius: 8px; }
.sk-thin { height: 10px; }
.sk-row { display: flex; gap: 8px; flex-wrap: wrap; justify-self: start; width: max-content; max-width: 100%; }
.sk-boxes { gap: 16px; max-width: 300px; }
.sk-text { gap: 6px; max-width: 300px; }
.scan-item.hit .sk.m { box-shadow: inset 0 0 0 1px var(--blue-40); background: var(--blue-4); }
.scan-tag { flex: none; font: var(--mono-xs); font-size: 11px; line-height: 16px; padding: 4px 6px; border-radius: 6px; background: var(--a4); color: var(--ink-56); white-space: pre; transition: background-color .3s, color .3s; }
.scan-tag.on { background: var(--blue-16); color: var(--blue); }
.scan-item { display: flex; align-items: center; gap: 20px; }
.scan-top { display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 20px 28px; box-shadow: inset 0 -1px 0 var(--line); }
.scan-body { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
.scan-src { display: grid; gap: 28px; align-content: start; padding: 40px 24px 40px 40px; }
.scan-src .scan-item { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 16px; align-items: start; }
.scan-src .scan-tag { justify-self: end; }
.scan-hi { position: absolute; left: 0; top: 0; width: 0; height: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--blue-40); opacity: 0; pointer-events: none; z-index: 1;
  transition: transform .6s cubic-bezier(.34,1.25,.5,1), width .6s cubic-bezier(.34,1.25,.5,1), height .6s cubic-bezier(.34,1.25,.5,1), opacity .3s; }
.scan-hi.on { opacity: 1; }
.scan-win { position: relative; box-shadow: inset 1px 0 0 var(--line); min-height: 300px; padding-bottom: 64px; }
.scan-bar { display: flex; align-items: center; gap: 10px; padding: 13px 15px; box-shadow: inset 0 -1px 0 var(--line); }
.scan-bar i { width: 12px; height: 12px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-3); }
.scan-bar span { margin-left: auto; font: var(--mono-xs); font-size: 11px; color: var(--ink-32); text-transform: uppercase; }
.scan-code { padding: 18px 20px 0 0; font: var(--mono-md); font-size: 13px; counter-reset: ln; }
.scan-code .ln { display: grid; grid-template-columns: 44px 80px 1fr; min-height: 22px; align-items: center; }
.scan-code .ln::before { counter-increment: ln; content: counter(ln); padding-right: 16px; text-align: right; color: var(--ink-32); }
.scan-code b { font-weight: 400; color: var(--ink); }
.scan-code .v { color: var(--blue); min-width: 0; overflow-wrap: anywhere; }
.scan-code .v.ph { display: block; width: var(--pw, 120px); max-width: 100%; height: 10px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-3); }
.scan-chip { position: absolute; right: 20px; bottom: 20px; display: inline-flex; align-items: center; gap: 8px; height: 32px; padding: 0 12px 0 6px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); font: var(--mono-sm); font-size: 12px; color: var(--ink); white-space: pre; }
.sc-ico { position: relative; width: 20px; height: 20px; }
.sc-spin { position: absolute; inset: 3px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.sc-spin i { border-radius: 1px; background: var(--blue); opacity: .15; animation: sc-dot .8s steps(1) infinite; }
.sc-spin i:nth-child(5) { visibility: hidden; }
.sc-spin i:nth-child(1) { animation-delay: 0s; } .sc-spin i:nth-child(2) { animation-delay: .1s; } .sc-spin i:nth-child(3) { animation-delay: .2s; }
.sc-spin i:nth-child(6) { animation-delay: .3s; } .sc-spin i:nth-child(9) { animation-delay: .4s; } .sc-spin i:nth-child(8) { animation-delay: .5s; }
.sc-spin i:nth-child(7) { animation-delay: .6s; } .sc-spin i:nth-child(4) { animation-delay: .7s; }
@keyframes sc-dot { 0% { opacity: 1; } 12.5% { opacity: .55; } 25% { opacity: .15; } }
.sc-ok { position: absolute; inset: 1px; border-radius: 50%; background: var(--blue); color: #fff; display: grid; place-items: center; transform: scale(0); transition: transform .45s cubic-bezier(.34,1.56,.64,1); }
.sc-ok svg { width: 10px; height: 10px; }
.scan-chip.is-done .sc-spin { display: none; }
.scan-chip.is-done .sc-ok { transform: none; }
.sc-t { overflow: hidden; }

/* ---------- Feature tab scenes (home section 01) ----------
   One scene per tab, each in the browser mockup of the scan under the hero
   (outline frame, mono labels, outline pills, blue for what matters), with
   the browser as the app: One view (the browser is the dashboard; the
   systems sit outside it and feed it down wires), Insights in seconds (the
   browser is a chat: a question is sent and the answer comes up in the
   thread), Work done (the follow-ups page: a deck written, approved and
   sent). Driven by homeScenes() in js/site.js. */
.dm-label { font: var(--mono-xs); font-size: 11px; line-height: 16px; color: var(--ink-56); text-transform: uppercase; letter-spacing: .02em; }
.dm-live { display: inline-flex; align-items: center; gap: 8px; font: var(--mono-xs); font-size: 11px; color: var(--ink-56); text-transform: uppercase; }
.dm-live i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--blue-12); }
.scan-ask { flex: 1; min-width: 0; font: var(--body-md); color: var(--ink); }
.scan-ask.typing .ty-on::after { content: ""; display: inline-block; width: 1px; height: 1.1em; margin: 0 -3px 0 2px; vertical-align: -3px; background: var(--blue); }
/* the hero's typed question keeps its finished size: the rest of the text
   waits in place, invisible */
.dz-fin { visibility: hidden; }

/* a drafted follow-up (the Work done deck) */
.db-card { padding: 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-3); transition: box-shadow .35s, opacity .35s; }
.db-to { display: flex; align-items: baseline; gap: 8px; font: var(--label-sm); }
.db-to b { font-weight: 500; color: var(--ink); }
.db-to span { color: var(--ink-56); }
.db-re { margin-top: 2px; font: var(--mono-xs); font-size: 11px; color: var(--ink-56); }
.db-lines { display: grid; gap: 6px; margin: 12px 0 14px; }
.db-lines i { position: relative; display: block; width: var(--w); height: 8px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line-3); overflow: hidden; }
.db-lines i::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: var(--blue-16); transform-origin: left; transform: scaleX(1); }
.db-card.is-writing .db-lines i::after { transform: scaleX(0); }
.db-card.is-writing .db-lines i.on::after { transform: scaleX(1); transition: transform .55s linear; }
.db-card.is-writing { box-shadow: inset 0 0 0 1px var(--blue-40); }
.db-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.db-btn { position: relative; display: inline-grid; height: 24px; padding: 0 10px; border-radius: 6px; font: var(--mono-xs); font-size: 11px; line-height: 24px; box-shadow: inset 0 0 0 1px var(--line-3); color: var(--ink-40); transition: background-color .3s, color .3s, box-shadow .3s, transform .15s; }
.db-btn > span { grid-area: 1 / 1; transition: opacity .25s; }
.db-btn .s { opacity: 0; }
.db-card.is-ready .db-btn { box-shadow: inset 0 0 0 1px var(--blue-40); color: var(--blue); }
.db-card.is-ready .db-btn.press { transform: scale(.94); background: var(--blue); color: #fff; }
.db-card.is-sent { opacity: .72; }
.db-card.is-sent .db-btn { background: var(--blue-16); color: var(--blue); box-shadow: none; }
.db-card.is-sent .db-btn .a { opacity: 0; }
.db-card.is-sent .db-btn .s { opacity: 1; }
.db-card.is-new { animation: fadeUp .45s cubic-bezier(.22, 1, .36, 1); }
.db-card.is-hidden { display: none; }
/* the scenes themselves are at the end of this file ("Feature tab scenes:
   the stages"), after the cell pictures' kit they build on */

/* ---------- Feature tabs (home section 01) ---------- */
.tabpanels { padding: 48px 32px 56px; }
.tab-panel { display: none; }
.tab-panel.is-active { display: block; animation: fadeUp .5s cubic-bezier(.22,1,.36,1); }
@keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

/* ---------- Questions grid (home 02) ---------- */
.asks .cell { padding: 28px 32px; display: flex; gap: 16px; align-items: flex-start; transition: background-color .2s; }
.asks .cell:hover { background: var(--surface); }
.asks .cell { list-style: none; }
.asks .q-no { font: var(--mono-xs); line-height: 28px; color: var(--blue); flex: none; }
.asks .q { font: var(--label-xl); letter-spacing: var(--xl-ls); }

/* ---------- Use-case list + panel (Firecrawl "Use cases") ---------- */
/* ---------- Use cases (home 05), after firecrawl.dev's use-case switcher ----------
   A list on the left (pixel icon, one-line title, one line of text; the
   open one tinted with a blue bar and its link), the open case's preview on
   the right: the use cases page's own picture of it (cellArt) and a strip
   with the result. Each .ux-e holds an item and its panel; on desktop the entries
   dissolve into one grid (items down the left, every panel stacked in the
   right column, so the box keeps the tallest panel's height); on phones each
   item opens its panel under it, like a drop-down. js/site.js: useCases(). */
.ux { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); grid-template-rows: auto auto auto 1fr; gap: 1px; background: var(--line); }
.ux-e { display: contents; }
.ux-item, .ux-panel, .ux-fill { background: var(--bg); }
.ux-item { grid-column: 1; position: relative; padding: 26px 28px; transition: background-color .2s; }
.ux-e:nth-child(1) .ux-item { grid-row: 1; } .ux-e:nth-child(2) .ux-item { grid-row: 2; } .ux-e:nth-child(3) .ux-item { grid-row: 3; }
.ux-fill { grid-column: 1; grid-row: 4; }
.ux-btn { display: block; width: 100%; text-align: left; font: inherit; color: inherit; cursor: pointer; }
.ux-btn::before { content: ""; position: absolute; inset: 0; } /* the whole item is the button */
.ux-t { display: flex; align-items: center; gap: 10px; font: var(--label-lg); letter-spacing: var(--lg-ls); color: var(--ink); white-space: nowrap; transition: color .2s; }
.ux-d { display: block; margin-top: 6px; color: var(--ink-56); font: var(--body-md); letter-spacing: var(--md-ls); }
.ux-item .link { position: relative; z-index: 3; margin-top: 12px; visibility: hidden; } /* room kept on every item, so opening one never moves the list */
.ux-item:hover { background: var(--bg-2); }
.is-open > .ux-item { background: linear-gradient(var(--blue-4), var(--blue-4)), var(--bg); }
.is-open > .ux-item::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--blue); z-index: 3; }
.is-open > .ux-item .ux-t { color: var(--blue); }
.is-open > .ux-item .link { visibility: visible; }

.ux-panel { grid-column: 2; grid-row: 1 / -1; display: grid; grid-template-rows: auto 1fr auto; min-width: 0; visibility: hidden; opacity: 0; transition: opacity .3s, visibility 0s .3s; }
.is-open > .ux-panel { visibility: visible; opacity: 1; transition: opacity .3s; }
.ux-panel { grid-template-rows: 1fr auto; }
.ux-panel .uca { border-top: 0; }
@media (min-width: 996px) { .ux-panel .uca { height: auto; min-height: 300px; } } /* fills the panel beside the list */

/* the result strip (Firecrawl's logo + one line) */
.ux-foot { display: flex; align-items: center; gap: 24px; padding: 22px 32px; border-top: 1px solid var(--line); }
.ux-stat { flex: none; display: grid; place-items: center; gap: 2px; min-width: 84px; padding: 10px 14px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-3); text-align: center; }
.ux-stat b { font: 600 24px/28px var(--sans); letter-spacing: -.03em; color: var(--blue); }
.ux-stat span { font: var(--mono-xs); font-size: 10px; color: var(--ink-56); text-transform: uppercase; }
.ux-foot p { font: var(--body-lg); letter-spacing: var(--lg-ls); color: var(--ink-72); max-width: 520px; }

/* generic link card */
.card { display: flex; flex-direction: column; gap: 10px; padding: 32px; transition: background-color .2s; position: relative; }
a.card:hover { background: var(--surface); }
.card h3 { font: var(--label-xl); letter-spacing: var(--xl-ls); }
.card p { color: var(--ink-72); font: var(--body-md); letter-spacing: var(--md-ls); }
.card .card-foot { margin-top: auto; padding-top: 16px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; }
.card .card-stat b { display: block; color: var(--blue); font: var(--h4); letter-spacing: var(--h4-ls); }
.card .card-stat span { font: var(--body-sm); color: var(--ink-56); }
.card .arrow { width: 32px; height: 32px; border-radius: 8px; display: grid; place-items: center; background: var(--a4); color: var(--ink-72); flex: none; transition: background-color .2s, color .2s; }
.card .arrow svg { width: 16px; height: 16px; }
a.card:hover .arrow { background: var(--blue); color: #fff; }

/* ---------- Blue band (Firecrawl "Alexandria") ---------- */
.band { position: relative; background: var(--blue); color: #fff; overflow: hidden; text-align: center; padding: 64px 24px 72px; }
.band > .ascii { inset: 0; width: 100%; height: 100%; }
.band > *:not(.ascii) { position: relative; }
.band .pill { box-shadow: inset 0 0 0 1px rgba(255,255,255,.3); color: #fff; padding: 4px 12px; background: rgba(255,255,255,.08); }
.band h2 { font: var(--h2); letter-spacing: var(--h2-ls); max-width: 760px; margin: 0 auto; text-wrap: balance; }
.band p { max-width: 520px; margin: 16px auto 0; color: rgba(255,255,255,.88); }
.band .btns { margin-top: 28px; }

/* tick list (Firecrawl "Perfect for") */
.ticks { display: grid; gap: 22px; }
.ticks li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; font: var(--body-md); letter-spacing: var(--md-ls); color: var(--ink-72); }
.ticks li::before {
  content: ""; width: 18px; height: 18px; margin-top: 2px; border-radius: 50%;
  background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000'%3E%3Ccircle cx='9' cy='9' r='8.25' stroke-width='1.5'/%3E%3Cpath transform='translate(3 3) scale(.5)' d='M7 12.5l3.2 3.2L17 9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%23000'%3E%3Ccircle cx='9' cy='9' r='8.25' stroke-width='1.5'/%3E%3Cpath transform='translate(3 3) scale(.5)' d='M7 12.5l3.2 3.2L17 9' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 18px no-repeat;
}
.ticks li b { display: block; color: var(--ink); font: var(--label-lg); }
.ticks.cols { grid-template-columns: 1fr 1fr; column-gap: 48px; }

/* ---------- Testimonials ---------- */
.quote { padding: 0; display: grid; grid-template-rows: auto 1fr; }
.quote-head { display: flex; align-items: center; gap: 12px; padding: 18px 24px; border-bottom: 1px solid var(--line); }
.quote-head b { display: block; font: var(--label-md); }
.quote-head small { display: block; font: var(--body-sm); color: var(--ink-56); }
.quote-head img { margin-left: auto; height: 20px; width: auto; opacity: .5; filter: grayscale(1) brightness(0); }
.quote blockquote { padding: 24px; font: var(--body-lg); color: var(--ink); }
.quote blockquote::before { content: "\201C"; }
.quote blockquote::after { content: "\201D"; }

/* ---------- CTA block (Firecrawl "Ready to build?") ---------- */
.cta { display: grid; grid-template-columns: 1fr minmax(0, 560px) 1fr; position: relative; min-height: 416px; }
.cta-side { position: relative; overflow: hidden; }
.cta-side > .ascii { inset: 24px 0; width: 100%; height: calc(100% - 48px); }
.hero-tag { position: absolute; font: var(--mono-xs); font-size: 10px; color: rgba(38,38,38,.24); text-transform: uppercase; white-space: nowrap; }
.cta-side .hero-tag { bottom: 24px; }
.cta-mid { border-inline: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 56px 32px; }
.cta-mid h2 { font: var(--h3); letter-spacing: var(--h3-ls); text-wrap: balance; }
.cta-mid p { margin-top: 12px; color: var(--ink-72); text-wrap: pretty; }
.cta-mid p strong { color: var(--ink); font-weight: 500; }
.cta-mid .btns { margin-top: 24px; }
.cta-mid .link-q { margin-top: 18px; font: var(--body-sm); color: var(--ink-56); display: inline-flex; align-items: center; gap: 2px; }
.cta-mid .link-q svg { width: 14px; height: 14px; }
.cta-mid .link-q:hover { color: var(--ink); }

/* ---------- FAQ (Firecrawl: "General" title left, questions start 111px down on the right) ---------- */
.faq { display: grid; grid-template-columns: 1fr 1fr; position: relative; }
.faq::before { content: ""; position: absolute; left: 0; right: 0; top: 111px; height: 1px; background: var(--line); }
.faq > .faq-side { box-shadow: inset -1px 0 var(--line); }
.faq-side { padding: 40px 64px; }
.faq-side h3 { font: var(--h5); letter-spacing: var(--h5-ls); }
.faq-side p { margin-top: 48px; color: var(--ink-64); font: var(--body-md); max-width: 360px; }
.faq-list { display: grid; align-content: start; padding-top: 112px; }
.faq-item { border-bottom: 1px solid var(--line); }
.faq-item:last-child { border-bottom: 0; }
.faq-item h3 { font: inherit; }
.faq-q {
  width: 100%; display: flex; align-items: center; gap: 16px; text-align: left;
  padding: 20px 64px; font: var(--label-lg); letter-spacing: var(--lg-ls);
}
.faq-q > span:first-child { flex: 1; min-width: 0; }
.faq-ico { flex: none; width: 16px; height: 16px; position: relative; color: var(--ink-40); }
.faq-ico::before { content: ""; position: absolute; inset: 3px 4px 5px; border: solid currentColor; border-width: 0 1.25px 1.25px 0; transform: rotate(45deg); transition: transform .2s; }
.faq-item.open .faq-ico::before { transform: translateY(3px) rotate(-135deg); }
.faq-a { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s cubic-bezier(.22,1,.36,1); }
.faq-item.open .faq-a { grid-template-rows: 1fr; }
.faq-a-inner { overflow: hidden; }
.faq-a-inner::before { content: ""; display: block; margin: 0 64px; border-top: 1px solid var(--line); }
.faq-a-inner > * { padding: 0 64px; color: var(--ink-64); font: var(--body-lg); letter-spacing: var(--lg-ls); }
.faq-a-inner > :first-child { padding-top: 20px; }
.faq-a-inner > :last-child { padding-bottom: 20px; }
.faq-a-inner > * + * { margin-top: 10px; }
.faq-a-inner a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.faq.single { grid-template-columns: 1fr; }
.faq.single::before { display: none; }
.faq.single .faq-list { padding-top: 0; }

/* ---------- Forms ---------- */
.form { display: grid; gap: 12px; text-align: left; }
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.form input[type=text], .form input[type=email], .form input[type=tel], .form select, .form textarea {
  width: 100%; height: 42px; padding: 0 14px; border-radius: 10px;
  background: var(--surface); color: var(--ink);
  border: 0; box-shadow: inset 0 0 0 1px var(--line-3), 0 1px 2px rgba(0,0,0,.03);
  font: var(--body-input); outline: none; transition: box-shadow .15s;
  -webkit-appearance: none; appearance: none;
}
.form textarea { height: auto; padding: 12px 14px; resize: vertical; min-height: 110px; line-height: 22px; }
.form input::placeholder, .form textarea::placeholder { color: var(--ink-40); }
.form input:focus, .form select:focus, .form textarea:focus { box-shadow: inset 0 0 0 1px var(--blue), 0 0 0 3px var(--blue-12); }
.select-wrap { position: relative; }
.select-wrap::after { content: ""; position: absolute; right: 16px; top: 16px; width: 6px; height: 6px; border: solid var(--ink-40); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; }
.form select { padding-right: 36px; cursor: pointer; }
.form select:invalid, .form select:has(option[value=""]:checked) { color: var(--ink-40); }
.budget-field { border: 0; padding: 0; margin: 4px 0 0; }
.budget-field legend { font: var(--label-sm); color: var(--ink-56); margin-bottom: 8px; padding: 0; }
.budget-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.budget-pill { position: relative; }
.budget-pill input { position: absolute; opacity: 0; inset: 0; cursor: pointer; }
.budget-pill span { display: flex; align-items: center; justify-content: center; height: 38px; border-radius: 10px; background: var(--surface); box-shadow: inset 0 0 0 1px var(--line-3); font: var(--label-sm); transition: box-shadow .15s, color .15s, background-color .15s; text-align: center; }
.budget-pill input:checked + span { box-shadow: inset 0 0 0 1.5px var(--blue); color: var(--blue); background: var(--blue-4); }
.budget-pill input:focus-visible + span { outline: 2px solid var(--blue); outline-offset: 2px; }
.form .btn { justify-self: start; }
.form-legal { font: var(--body-xs); color: var(--ink-56); }
.form-legal a { text-decoration: underline; text-underline-offset: 2px; }
.form-status { font: var(--body-md); color: var(--ink-72); }
.form-status.is-error { color: #c4321f; }
.form-success { padding: 24px 0; text-align: center; }
.form-success h3 { font: var(--h5); letter-spacing: var(--h5-ls); }
.form-success p { margin-top: 8px; color: var(--ink-72); }
.form-card { background: var(--surface); border-radius: 16px; box-shadow: var(--shadow-card); padding: 28px; }

/* ---------- Logo strip (Firecrawl: 204x128 cells) ---------- */
.logos { display: grid; grid-template-columns: 260px 1fr; }
.logos-lead { padding: 28px 32px; display: flex; align-items: center; font: var(--label-lg); border-right: 1px solid var(--line); }
.logos-track { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); mask-image: linear-gradient(90deg, transparent, #000 6%, #000 94%, transparent); }
.logos-row { display: flex; width: max-content; animation: marquee 48s linear infinite; }
.logos-row:hover { animation-play-state: paused; }
.logos-row > div { width: 204px; height: 128px; display: grid; place-items: center; border-right: 1px solid var(--line); padding: 0 32px; }
.logos-row img { max-height: 28px; width: auto; max-width: 128px; filter: grayscale(1) brightness(0); opacity: .8; }
@keyframes marquee { to { transform: translateX(-50%); } }

/* ---------- Inner page hero ---------- */
.phero .hero-in { padding: 154px 24px 120px; }
.phero h1 .hl { display: inline; }
.phero h1 { max-width: 700px; }
.phero .sub { color: var(--ink-72); max-width: 600px; text-wrap: balance; }
/* the three service pages open like the homepage and Firecrawl's search page:
   pill, a two-line title with the second line in blue, subline, two buttons,
   inside the framed side columns */
.ohero .hero-in { padding-bottom: 120px; }
.ohero .sub { max-width: 560px; }
.eyebrow { display: inline-block; margin-bottom: 16px; font: var(--mono-xs); text-transform: uppercase; color: var(--ink-40); }
.eyebrow b { color: var(--blue); font-weight: 400; }
.crumbs { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-bottom: 18px; font: var(--mono-xs); text-transform: uppercase; color: var(--ink-40); }
.crumbs a:hover { color: var(--ink); }
.crumbs span[aria-hidden] { color: var(--ink-32); }

/* ---------- Prose (about, legal, blog, case studies) ---------- */
.prose-wrap { padding: 72px 32px 80px; }
.prose { max-width: 720px; margin: 0 auto; color: var(--ink-72); font: var(--body-lg); line-height: 26px; }
.prose > * + * { margin-top: 18px; }
.prose h2 { color: var(--ink); font: var(--h5); letter-spacing: var(--h5-ls); margin-top: 48px; text-wrap: balance; }
.prose h3 { color: var(--ink); font: var(--label-xl); letter-spacing: var(--xl-ls); margin-top: 36px; }
.prose h4 { color: var(--ink); font: var(--label-lg); margin-top: 28px; }
.prose h2 + *, .prose h3 + *, .prose h4 + * { margin-top: 10px; }
.prose h2 + h3 { margin-top: 20px; }
.prose > :first-child { margin-top: 0; }
.prose strong, .prose b { color: var(--ink); font-weight: 450; }
.prose a { color: var(--blue); text-decoration: underline; text-decoration-color: var(--blue-40); text-underline-offset: 3px; }
.prose a:hover { text-decoration-color: var(--blue); }
.prose ul, .prose ol { padding-left: 22px; }
.prose ul { list-style: none; padding-left: 0; }
.prose ul > li { position: relative; padding-left: 22px; }
.prose ul > li::before { content: ""; position: absolute; left: 4px; top: 12px; width: 6px; height: 6px; border-radius: 1px; background: var(--blue); }
.prose ol { list-style: decimal; }
.prose ol > li::marker { font-family: var(--mono); font-size: 13px; color: var(--blue); }
.prose li + li { margin-top: 8px; }
.prose blockquote { padding: 4px 0 4px 20px; border-left: 2px solid var(--blue); color: var(--ink); font: var(--body-xl); letter-spacing: var(--xl-ls); }
.prose blockquote cite { display: block; margin-top: 12px; font: var(--body-sm); font-style: normal; color: var(--ink-56); letter-spacing: 0; }
.prose figure img, .prose > img { border-radius: 12px; box-shadow: var(--shadow-card); width: 100%; height: auto; }
.prose figcaption { margin-top: 10px; font: var(--body-sm); color: var(--ink-40); text-align: center; }
.prose hr { border: 0; border-top: 1px solid var(--line); margin: 40px 0; }
.prose code { font-family: var(--mono); font-size: .86em; background: var(--a4); padding: 2px 5px; border-radius: 5px; color: var(--ink); }
.prose pre { background: var(--surface); box-shadow: var(--shadow-card); border-radius: 12px; padding: 18px 20px; overflow-x: auto; font: var(--mono-md); font-size: 13px; color: var(--ink); }
.prose pre code { background: none; padding: 0; }
.prose table { width: 100%; border-collapse: collapse; font: var(--body-md); display: block; overflow-x: auto; }
.prose th, .prose td { text-align: left; padding: 12px 14px; border-bottom: 1px solid var(--line); vertical-align: top; }
.prose th { color: var(--ink); font: var(--label-sm); background: var(--a2); }
.prose .lede { color: var(--ink); font: var(--body-xl); letter-spacing: var(--xl-ls); }

/* About-style blue callout with dither (Firecrawl "Our mission") */
.callout {
  position: relative; overflow: hidden; border-radius: 14px; padding: 28px 28px 32px;
  background-color: var(--blue); color: #fff;
  background-image: radial-gradient(rgba(255,255,255,.14) 1px, transparent 1.2px);
  background-size: 6px 6px;
}
.callout .eyebrow { color: rgba(255,255,255,.6); margin-bottom: 10px; }
.callout p, .callout blockquote { color: #fff; font: var(--h4); letter-spacing: var(--h4-ls); border: 0; padding: 0; }
.callout small { display: block; margin-top: 14px; font: var(--body-md); color: rgba(255,255,255,.75); }

/* bordered numbered list (Firecrawl About "[ 01 ] Search") */
.nlist { display: grid; gap: 12px; }
.nlist > li, .nlist > div { display: grid; grid-template-columns: 56px 1fr; gap: 4px; padding: 20px 20px 20px 16px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-3); background: var(--bg-2); }
.nlist .n { font: var(--mono-xs); font-size: 11px; line-height: 24px; color: var(--ink-32); }
.nlist h3, .nlist h4 { color: var(--ink); font: var(--label-lg); margin: 0; }
.nlist h3 small, .nlist h4 small { color: var(--ink-40); font: var(--body-md); margin-left: 6px; }
.nlist p { margin: 4px 0 0; font: var(--body-md); letter-spacing: var(--md-ls); color: var(--ink-72); }
.prose .nlist > li { padding-left: 16px; }
.prose .nlist > li::before { display: none; }

/* before / after rows */
.ba { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--line); }
.ba > * { background: var(--bg); }
.ba-q { grid-column: 1 / -1; padding: 22px 32px; font: var(--label-xl); letter-spacing: var(--xl-ls); display: flex; gap: 14px; align-items: baseline; }
.ba-q .step-no { flex: none; }
.ba-side { padding: 24px 32px 28px; }
.ba-side .chip { margin-bottom: 12px; }
.ba-side p { color: var(--ink-72); font: var(--body-lg); }
.ba-side.after { background: var(--surface); }
.ba-side.after p { color: var(--ink); }

/* team cards */
/* team: a framed portrait on a blue tint (the cutout stands on the frame's
   bottom edge, inside hairline guides like the use-case pictures), then
   name, role, bio and a LinkedIn link pinned to the card's foot */
.team { display: grid; grid-template-columns: repeat(2, minmax(0, 380px)); gap: 16px; justify-content: center; }
.person { display: flex; flex-direction: column; padding: 8px; border-radius: 14px; box-shadow: inset 0 0 0 1px var(--line-3); background: var(--bg-2); }
.person-ph { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 9px; background: var(--blue-4); box-shadow: inset 0 0 0 1px var(--blue-12); }
.person-ph::before, .person-ph::after { content: ""; position: absolute; pointer-events: none; }
.person-ph::before { top: 0; bottom: 0; left: 40px; right: 40px; border-inline: 1px solid var(--blue-16); }
.person-ph::after { left: 0; right: 0; top: 24px; bottom: 24px; border-block: 1px solid var(--blue-16); }
.person-ph img { position: absolute; z-index: 1; left: 50%; bottom: 0; width: 104%; height: auto; transform: translateX(-50%); transform-origin: 50% 100%; transition: transform .5s cubic-bezier(.22,1,.36,1); }
.person:hover .person-ph img { transform: translateX(-50%) scale(1.025); }
@media (prefers-reduced-motion: reduce) { .person:hover .person-ph img { transform: translateX(-50%); } }
.person figcaption { display: flex; flex-direction: column; flex: 1; padding: 20px 16px 12px; }
.person b { display: block; font: var(--label-lg); }
.person figcaption > span { display: block; margin-top: 2px; font: var(--body-sm); color: var(--blue); }
.person p { margin-top: 12px; font: var(--body-sm); color: var(--ink-56); }
.person a { display: inline-flex; align-items: center; gap: 8px; align-self: flex-start; margin-top: auto; padding-top: 16px; font: var(--label-sm); color: var(--ink-56); transition: color .2s; }
.person a svg { width: 14px; height: 14px; }
.person a:hover { color: var(--blue); }

/* ---------- Blog index ---------- */
.blog-head { padding: 40px 32px 32px; }
.blog-head h1 { font: var(--h3); letter-spacing: var(--h3-ls); }
.blog-head p { margin-top: 8px; color: var(--ink-72); max-width: 560px; }
.post-feature { display: grid; grid-template-columns: 1.4fr 1fr; }
.post-feature .post-cover { aspect-ratio: auto; height: 100%; min-height: 320px; border-right: 1px solid var(--line); }
.post-feature .post-body { padding: 40px; justify-content: center; }
.post-feature h2 { font: var(--h-blog); letter-spacing: var(--h-blog-ls); }
.post { display: flex; flex-direction: column; transition: background-color .2s; }
a.post:hover { background: var(--surface); }
.post-cover { aspect-ratio: 16 / 9; overflow: hidden; background: var(--blue-4); position: relative; border-bottom: 1px solid var(--line); }
.post-cover img { width: 100%; height: 100%; object-fit: cover; }
.post-body { padding: 28px 28px 24px; display: flex; flex-direction: column; gap: 10px; flex: 1; }
.post h2, .post h3 { font: var(--label-xl); letter-spacing: var(--xl-ls); text-wrap: balance; }
.post p { color: var(--ink-56); font: var(--body-md); letter-spacing: var(--md-ls); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.post-meta { margin-top: auto; padding-top: 14px; display: flex; justify-content: space-between; align-items: center; font: var(--body-sm); color: var(--ink-56); }
.post-meta .who { display: flex; align-items: center; gap: 8px; }
.post-meta .who img { width: 20px; height: 20px; border-radius: 50%; object-fit: cover; }

/* article header */
.art-head { text-align: center; padding: 88px 24px 56px; }
.art-head h1 { font: var(--h2); letter-spacing: var(--h2-ls); max-width: 860px; margin: 0 auto; text-wrap: balance; }
.art-head .sub { max-width: 640px; margin: 16px auto 0; color: var(--ink-72); font: var(--body-lg); }
.art-meta { margin-top: 24px; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 16px; font: var(--body-sm); color: var(--ink-56); }
.art-meta .who { display: inline-flex; align-items: center; gap: 8px; color: var(--ink); }
.art-meta .who img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.art-cover { padding: 32px; }
.art-cover img { width: 100%; max-width: 960px; margin: 0 auto; border-radius: 14px; box-shadow: var(--shadow-card); height: auto; }

/* ---------- Footer (Firecrawl: pill strips, brand cell, social rows, link columns) ---------- */
.pills { display: flex; gap: 12px; padding: 15px; }
.pills i { flex: 1; height: 12px; border-radius: 999px; box-shadow: inset 0 0 0 1px var(--line); }
.pills i.dot { flex: none; width: 12px; }
.ftr-top { display: grid; grid-template-columns: 1fr 1fr; }
.ftr-brand { position: relative; padding: 56px 64px; min-height: 336px; border-right: 1px solid var(--line); overflow: hidden; }
.ftr-brand img { height: 22px; width: auto; margin-bottom: 32px; }
.ftr-brand p { font: var(--label-xl); letter-spacing: var(--xl-ls); }
.ftr-brand .ascii { left: 10px; right: 10px; bottom: 10px; height: 150px; width: calc(100% - 20px); }
.ftr-side { display: grid; grid-template-columns: 1fr 1fr; }
.ftr-col { display: flex; flex-direction: column; }
.ftr-col + .ftr-col { border-left: 1px solid var(--line); }
.ftr-block { height: 192px; padding: 28px; display: flex; flex-direction: column; align-items: flex-start; }
.ftr-label { margin-bottom: 28px; font: var(--body-md); color: var(--ink-64); }
.ftr-big { font: var(--label-lg); color: var(--ink); display: inline-flex; align-items: center; gap: 6px; }
.ftr-big::after { content: "\2192"; color: var(--blue); transition: transform .2s; }
.ftr-big:hover::after { transform: translateX(3px); }
.ftr-note { margin-top: 4px; font: var(--body-sm); color: var(--ink-56); }
.ftr-seal { width: 88px; height: 88px; padding: 9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); margin-top: -12px; }
.ftr-seal > span { display: grid; place-content: center; width: 70px; height: 70px; border-radius: 50%; text-align: center; background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.4)); box-shadow: 0 16px 24px -6px rgba(0,0,0,.04), 0 8px 12px -4px rgba(0,0,0,.04), 0 4px 8px -2px rgba(0,0,0,.03), 0 0 0 1px rgba(0,0,0,.03); }
.ftr-seal b { font: var(--label-xs); font-size: 11px; color: var(--blue); }
.ftr-seal small { font: var(--mono-xs); font-size: 9px; color: var(--ink-40); }
.ftr-row { display: flex; gap: 16px; align-items: center; padding: 16px 28px; border-top: 1px solid var(--line); font: var(--body-md); color: var(--ink-72); transition: color .2s; }
.ftr-row:hover { color: var(--blue); }
.ftr-row svg { width: 16px; height: 16px; flex: none; }
.ftr-cols { display: grid; grid-template-columns: repeat(4, 1fr); }
.ftr-cols > div { border-right: 1px solid var(--line); }
.ftr-cols > div:last-child { border-right: 0; }
.ftr-cols h4 { padding: 20px 24px; font: var(--label-md); border-bottom: 1px solid var(--line); }
.ftr-cols a { display: block; padding: 14px 24px; font: var(--body-md); color: var(--ink-72); border-bottom: 1px solid var(--line); transition: color .15s, background-color .15s; }
.ftr-cols a:last-child { border-bottom: 0; }
.ftr-cols a:hover { color: var(--blue); background: var(--a2); }
.ftr-legal { display: grid; grid-template-columns: repeat(4, 1fr); }
.ftr-legal > * { padding: 18px 24px; font: var(--body-md); color: var(--ink-72); border-right: 1px solid var(--line); }
.ftr-legal > *:last-child { border-right: 0; }
.ftr-legal a:hover { color: var(--blue); }
.ftr-legal .copy-c { color: var(--ink-40); }
.ftr-status { padding: 16px 24px; font: var(--body-sm); color: var(--blue); display: flex; align-items: center; gap: 10px; }
.ftr-status i { width: 6px; height: 6px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--blue-16); }
.ftr-pad { height: 48px; }

/* ---------- Reveal ---------- */
.js .rv { opacity: 0; transform: translateY(10px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); }
.js .rv.in { opacity: 1; transform: none; }
/* inside hairline grids the cell itself must stay painted (its background is
   what hides the divider colour), so only its content fades in */
.js .cells > .rv, .js .cells > .rv.in, .js .stack > .rv, .js .stack > .rv.in, .js .faq > .rv, .js .ba > .rv { opacity: 1; transform: none; }
.js .stack > .rv > *, .js .faq > .rv > *, .js .ba > .rv > *, .js .cells > .rv > * { opacity: 0; transform: translateY(10px); transition: opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); transition-delay: inherit; }
.js .cells > .rv.in > *, .js .stack > .rv.in > *, .js .faq > .rv.in > *, .js .ba > .rv.in > * { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .js .rv, .js .cells > .rv > *, .js .stack > .rv > *, .js .faq > .rv > *, .js .ba > .rv > * { opacity: 1; transform: none; transition: none; }
  .logos-row { animation: none; }
  html { scroll-behavior: auto; }
  .askbox-q::after { animation: none; }
}

/* ============================================================
   Responsive
   ============================================================ */
@media (min-width: 996px) {
  /* two-up rows get Firecrawl's 16px twin-line gutter instead of one shared line */
  .cells-2 { background: none; column-gap: 16px; row-gap: 0; }
  .cells-2 > * { box-shadow: inset 1px 0 var(--line), inset -1px 0 var(--line), inset 0 -1px var(--line); }
  .cells-2 > :nth-last-child(-n+2):nth-child(odd), .cells-2 > :last-child { box-shadow: inset 1px 0 var(--line), inset -1px 0 var(--line); }
}
@media (max-width: 1180px) {
  .hdr-in { padding-inline: 24px; }
  .hdr-nav { gap: 2px; }
  .hdr-right .btn-3 span { display: none; }
}
@media (max-width: 995px) {
  .hdr-nav, .hdr-right .btn { display: none; }
  .burger { display: block; }
  .hdr-in { height: 72px; padding-inline: 16px; grid-template-columns: 1fr auto; }
  .mega, .mega-dim { display: none; }
  .hero-frame { display: none; }
  .hero-in { padding: 72px 16px 48px; }
  .phero .hero-in { padding: 72px 16px 64px; }
  .ohero .hero-in { padding-bottom: 64px; }
  .gap { height: 92px; }
  .rail-in { height: 64px; padding-left: 24px; }
  .shead { padding: 88px 16px; }
  .copy, .cells-3 > .copy, .cells-4 > .copy { padding: 32px; }
  .cells-4 { grid-template-columns: repeat(2, 1fr); }
  .cells-3 { grid-template-columns: 1fr; }
  .cells-3.keep { grid-template-columns: repeat(3, 1fr); }
  .faq { grid-template-columns: 1fr; }
  .faq::before { display: none; }
  .faq > .faq-side { box-shadow: inset 0 -1px var(--line); }
  .faq-side { padding: 24px 20px; }
  .faq-side p { margin-top: 8px; }
  .faq-list { padding-top: 0; }
  .faq-q { padding: 18px 20px; }
  .faq-a-inner::before { margin: 0 20px; }
  .faq-a-inner > * { padding-inline: 20px; }
  .cta { grid-template-columns: 1fr; }
  .cta-side { display: none; }
  .cta-mid { border-inline: 0; }
  .ftr-top { grid-template-columns: 1fr; }
  .ftr-brand { border-right: 0; border-bottom: 1px solid var(--line); min-height: 260px; padding: 40px 24px; }
  .ftr-cols { grid-template-columns: repeat(2, 1fr); }
  .ftr-cols > div:nth-child(2) { border-right: 0; }
  .ftr-legal { grid-template-columns: repeat(2, 1fr); }
  .ftr-legal > *:nth-child(2) { border-right: 0; }
  .ftr-legal > * { border-bottom: 1px solid var(--line); }
  .post-feature { grid-template-columns: 1fr; }
  .post-feature .post-cover { min-height: 220px; border-right: 0; border-bottom: 1px solid var(--line); }
  .scan { padding: 16px 0 0; }
  .scan-tab { display: none; }
  .scan-top { padding: 16px; flex-wrap: wrap; justify-content: flex-start; gap: 14px 20px; }
  .scan-brand { display: none; }
  .scan-body { grid-template-columns: minmax(0, 1fr); }
  .scan-src { padding: 24px 16px; gap: 20px; }
  .scan-src .scan-item { grid-template-columns: 68px minmax(0, 1fr); gap: 12px; }
  .scan-top .scan-item { min-width: 0; }
  .sk-boxes, .sk-text { max-width: 100%; }
  .sk-boxes { gap: 10px; }
  .scan-top .sk-row .sk:nth-child(n+4) { display: none; }
  .scan-win { box-shadow: inset 0 1px 0 var(--line); }
  .scan-code { padding-right: 16px; }
  .scan-code .ln { grid-template-columns: 34px 72px minmax(0, 1fr); align-items: start; }
  /* feature tabs: one skinny row, icon and title only */
  #tabbed .cells-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  #tabbed button.feat { padding: 14px 6px 12px; }
  #tabbed .feat canvas.px { margin-bottom: 8px; }
  #tabbed .feat-t { margin: 0; font-size: 13px; line-height: 17px; }
  #tabbed .feat-d { display: none; }
  #tabbed .feat-card, #tabbed .feat-slide::before { inset: 4px; border-radius: 12px; }
  .logos { grid-template-columns: 1fr; }
  .logos-lead { border-right: 0; border-bottom: 1px solid var(--line); justify-content: center; text-align: center; padding: 20px; }
  .logos-row > div { width: 160px; height: 96px; }
}
@media (max-width: 680px) {
  .gap { height: 64px; }
  .rail-in { padding-left: 20px; }
  .rail-in::after { display: none; }
  .cells-2, .cells-4, .cells-3.keep { grid-template-columns: 1fr; }
  .cells-4.stats2 { grid-template-columns: 1fr 1fr; }
  .cell-lg { padding: 32px 24px; }
  .cell { padding: 28px 20px; }
  .tabpanels { padding: 32px 0 40px; }
  .asks .cell { padding: 22px 20px; }
  .ba { grid-template-columns: 1fr; }
  .ba-q, .ba-side { padding-inline: 20px; }
  .ticks.cols { grid-template-columns: 1fr; }
  .form-row { grid-template-columns: 1fr; }
  .budget-grid { grid-template-columns: 1fr 1fr; }
  .cta-mid { padding: 48px 16px; }
  .askbox-foot { gap: 8px; }
  .askbox-foot .seg { min-width: 0; overflow-x: auto; scrollbar-width: none; }
  .askbox-foot .seg::-webkit-scrollbar { display: none; }
  .askbox-foot .seg > span { padding: 6px 9px; flex: none; }
  .askbox-foot { padding: 8px; }
  .askbox-foot .seg > span canvas.px { display: none; }
  .prose-wrap { padding: 48px 16px 56px; }
  .team { grid-template-columns: minmax(0, 400px); }
  .art-head { padding: 64px 16px 40px; }
  .art-cover { padding: 16px; }
  .blog-head { padding: 32px 20px 24px; }
  .post-feature .post-body { padding: 28px 20px; }
  .ftr-side { grid-template-columns: 1fr; }
  .ftr-col + .ftr-col { border-left: 0; border-top: 1px solid var(--line); }
  .ftr-block { height: auto; }
  .ftr-legal { grid-template-columns: 1fr; }
  .ftr-brand p br { display: none; }
  .ftr-legal > * { border-right: 0; }
  .logos-row > div { width: 140px; height: 80px; }
  .nlist > li, .nlist > div { grid-template-columns: 1fr; }
}

/* ---------- Cookie consent card (markup built by js/consent.js) ---------- */
.cookie-card {
  position: fixed; left: 20px; bottom: 20px; z-index: 120;
  width: min(420px, calc(100vw - 40px));
  padding: 20px 22px; border-radius: 14px;
  background: var(--surface); color: var(--ink);
  box-shadow: var(--shadow-pop);
  opacity: 0; transform: translateY(14px);
  transition: opacity .4s cubic-bezier(.22,1,.36,1), transform .5s cubic-bezier(.22,1,.36,1);
  outline: none;
}
.cookie-card.is-open { opacity: 1; transform: none; }
.cookie-kicker { margin: 0 0 8px; font: var(--mono-xs); font-size: 11px; text-transform: uppercase; color: var(--ink-40); }
.cookie-title { margin: 0 0 8px; font: var(--label-xl); letter-spacing: var(--xl-ls); }
.cookie-title .cursive { font-style: normal; color: var(--blue); }
.cookie-desc { margin: 0 0 16px; font: var(--body-sm); color: var(--ink-72); }
.cookie-desc a { color: var(--blue); text-decoration: underline; text-underline-offset: 2px; }
.cookie-actions { display: flex; gap: 8px; }
.cookie-actions .btn { flex: 1 1 0; min-width: 0; }
.cookie-actions .btn-outline { background: var(--a4); color: var(--ink); }
.cookie-actions .btn-outline:hover { background: var(--a6); }
@media (max-width: 600px) { .cookie-card { left: 12px; right: 12px; bottom: 12px; width: auto; } }

/* ---------- Blog covers (Firecrawl-style: grey ground, halftone swirl, big type) ----------
   Reuses the existing .bl-cover markup (wash / pattern / grain / art); the
   variant class only moves the halftone so neighbouring covers differ. */
.bl-cover { position: relative; overflow: hidden; background: #f1f1f1; display: grid; place-items: center; aspect-ratio: 16 / 9; --mx: 18%; --my: 30%; --mx2: 86%; --my2: 80%; }
.post-feature .bl-cover { aspect-ratio: auto; }
.bl-cover-wash { position: absolute; inset: 0;
  background-image: radial-gradient(rgba(38,38,38,.2) 1px, transparent 1.4px);
  background-size: 6px 6px;
  -webkit-mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0 8%, transparent 9% 15%, #000 16% 20%, transparent 21% 27%, rgba(0,0,0,.6) 28% 31%, transparent 32%), radial-gradient(circle at var(--mx2) var(--my2), #000 0 10%, transparent 11% 18%, rgba(0,0,0,.6) 19% 23%, transparent 24%);
          mask-image: radial-gradient(circle at var(--mx) var(--my), #000 0 8%, transparent 9% 15%, #000 16% 20%, transparent 21% 27%, rgba(0,0,0,.6) 28% 31%, transparent 32%), radial-gradient(circle at var(--mx2) var(--my2), #000 0 10%, transparent 11% 18%, rgba(0,0,0,.6) 19% 23%, transparent 24%);
}
.bl-cover-pattern, .bl-cover-grain { display: none; }
.bl-cover-art { position: relative; padding: 24px; text-align: center; }
.bl-cover-text { margin: 0; font: 600 44px/1 var(--sans); letter-spacing: -.02em; color: var(--ink); text-wrap: balance; }
.bl-cover-tag { display: block; margin-top: 6px; font: 500 .62em/1.1 var(--sans); color: var(--blue); letter-spacing: -.01em; }
.post-feature .bl-cover-text { font-size: 64px; }
.bl-cover--v02, .bl-cover--v07, .bl-cover--v12, .bl-cover--v17 { --mx: 82%; --my: 22%; --mx2: 12%; --my2: 84%; }
.bl-cover--v03, .bl-cover--v08, .bl-cover--v13, .bl-cover--v18 { --mx: 50%; --my: 110%; --mx2: 92%; --my2: 6%; }
.bl-cover--v04, .bl-cover--v09, .bl-cover--v14, .bl-cover--v19 { --mx: 8%; --my: 88%; --mx2: 78%; --my2: 14%; }
.bl-cover--v05, .bl-cover--v10, .bl-cover--v15, .bl-cover--v20 { --mx: 92%; --my: 60%; --mx2: 20%; --my2: 8%; }
@media (max-width: 680px) { .bl-cover-text { font-size: 34px; } .post-feature .bl-cover-text { font-size: 44px; } }

/* ---------- Small title utilities for split layouts ---------- */
.h3 { font: var(--h3); letter-spacing: var(--h3-ls); text-wrap: balance; }
.h4 { font: var(--h4); letter-spacing: var(--h4-ls); text-wrap: balance; }
.h5 { font: var(--h5); letter-spacing: var(--h5-ls); text-wrap: balance; }
.copy > p:not(.lead):not(.small) { color: var(--ink-72); font: var(--body-lg); }
.copy > .h3 + p, .copy > .h4 + p, .copy > .h5 + p { margin-top: 16px; }
.copy > .btns, .copy > .ticks, .copy > .nlist { margin-top: 24px; }

/* ---------- Page-specific: what-we-build, use-cases, security (2026-10-07) ---------- */
/* what-we-build.html: decorative ASCII cell beside a layer's copy */
.layer-art { position: relative; min-height: 240px; overflow: hidden; }
.layer-art > .ascii { inset: 0; width: 100%; height: 100%; }
/* use-cases.html: stacked result stats and note cell beside a case, chip alignment inside cards */
.cells > .stack { display: grid; grid-auto-rows: 1fr; gap: 1px; background: var(--line); }
.stack > * { background: var(--bg); display: flex; flex-direction: column; justify-content: center; }
.cell .pixico { margin-bottom: 18px; }
.cell > .h4 { max-width: 380px; text-wrap: balance; }
.card .chip { align-self: flex-start; }
.card.card-stack .card-foot { flex-direction: column; align-items: flex-start; gap: 14px; }
/* the closing card in a 3-column grid of 7: spans the last two cells */
.card.card-cta { grid-column: span 2; justify-content: center; }
.card.card-cta p { max-width: 460px; }
.card.card-cta .link { margin-top: 6px; }
@media (max-width: 995px) { .card.card-cta { grid-column: auto; } }

/* ---------- Blog (index fillers, featured row, article author) ---------- */
.post.post-feature { display: grid; }
.post-body .chip { align-self: flex-start; }
.post-body .link { margin-top: 6px; }
.prose .author-row { display: flex; align-items: center; gap: 14px; margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); }
.prose .author-row .avatar { width: 48px; height: 48px; border-radius: 50%; object-fit: cover; flex: none; }
.prose .author-row b { display: block; color: var(--ink); font: var(--label-lg); }
.prose .author-row span { display: block; color: var(--ink-56); font: var(--body-md); }
@media (max-width: 995px) { .cells > .fill { display: none; } }

/* ---------- about.html / contact.html (page-specific) ---------- */
.logos.solo { grid-template-columns: 1fr; }
.prose-wrap > .callout { max-width: 720px; margin-inline: auto; }
.callout + .prose { margin-top: 56px; }
.callout h2.eyebrow { font: var(--mono-xs); letter-spacing: 0; margin: 0 0 10px; text-transform: uppercase; }
.callout blockquote { margin: 0; }
.nlist.prose { max-width: 720px; margin-inline: auto; padding: 0; list-style: none; }
.contact-info .copy + .copy { border-top: 1px solid var(--line); }
.contact-info .lead a:hover b { color: var(--blue); }
@media (max-width: 995px) { #contact.cells-2 { grid-template-columns: 1fr; } }
.post .bl-cover-text { display: block; overflow: visible; color: var(--ink); font: 600 44px/1 var(--sans); letter-spacing: -.02em; }
.post .bl-cover-text--sm { font-size: 36px; }
.post .bl-cover-art { max-width: 100%; }
@media (max-width: 680px) { .post .bl-cover-text { font-size: 34px; } .post .bl-cover-text--sm { font-size: 30px; } .post-feature .bl-cover-text { font-size: 44px; } }
.post .bl-cover-mock-title { display: block; overflow: visible; color: var(--ink); font: 600 30px/1 var(--sans); letter-spacing: -.02em; }
.bl-cover-logo { filter: brightness(0); opacity: .85; }
.bl-cover-wordmark { display: block; width: 40%; aspect-ratio: 191 / 47; background: var(--ink); -webkit-mask: url("/assets/flairr-logo-white.svg") center / contain no-repeat; mask: url("/assets/flairr-logo-white.svg") center / contain no-repeat; }
.copy .small a { text-decoration: underline; text-underline-offset: 2px; }
.ticks.inl li b { display: inline; font: inherit; font-weight: 450; color: var(--ink); }
.copy > .chip + .ticks { margin-top: 20px; }
.copy > .ticks + .lead { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.step .chip { margin-top: 12px; }
.step p { text-wrap: pretty; }
.step .ticks, .step .link { margin-top: 20px; }
.win picture, .win img { display: block; width: 100%; height: auto; }
.lead.stack b { display: block; margin-bottom: 8px; }

/* ---------- Case studies / products (facts row, stat text) ---------- */
.cs-facts { grid-template-columns: repeat(5, 1fr); }
.cs-facts > div { padding: 28px 28px 32px; }
.cs-facts dt { font: var(--mono-xs); text-transform: uppercase; color: var(--ink-40); }
.cs-facts dd { margin-top: 10px; font: var(--label-lg); letter-spacing: var(--lg-ls); }
.stat > p { margin-top: 12px; color: var(--ink-72); font: var(--body-md); letter-spacing: var(--md-ls); }
@media (max-width: 995px) {
  .cs-facts { grid-template-columns: repeat(2, 1fr); }
  .cs-facts > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
}
@media (max-width: 680px) { .cs-facts { grid-template-columns: 1fr; } }

/* ---------- Scripted demos (js/demos.js) on the light grid ----------
   demos.css paints a blue sky stage; Firecrawl's product windows are flat
   white on the grey page, so the stage goes flat with a faint dot grid. */

/* ---------- Living cells + pixel icons ---------- */
.hf .hf-art { max-width: none; }
.hf .hf-anim { position: absolute; left: -101px; top: 0; max-width: none; pointer-events: none; }
canvas.px { display: block; flex: none; }
.feat canvas.px { margin: 0 auto 20px; }
.seg > span canvas.px { margin-right: 7px; }
.btn canvas.px { margin-left: 4px; }

/* the feature tabs' gliding panel (replaces the per-card panel once JS runs) */
.has-slide { position: relative; }
.has-slide .feat-card { background: none; -webkit-backdrop-filter: none; backdrop-filter: none; box-shadow: inset 0 0 0 1px #e0e0e0; }
.has-slide .feat.is-active .feat-card { opacity: 0; }
.has-slide .feat:not(.is-active):focus-visible .feat-card { opacity: 1; transform: none; }
.has-slide .feat:focus-visible { outline: none; }
.feat-slide {
  position: absolute; left: 0; top: 0; z-index: 1; pointer-events: none;
  padding: 12px; box-sizing: border-box; transition: transform .35s cubic-bezier(.22,1,.36,1), width .35s cubic-bezier(.22,1,.36,1), height .35s;
}
.feat-slide::before {
  content: ""; position: absolute; inset: 12px; border-radius: 20px;
  background: rgba(255,255,255,.72); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  box-shadow: 0 40px 48px -20px rgba(0,0,0,.02), 0 32px 32px -20px rgba(0,0,0,.03), 0 16px 24px -12px rgba(0,0,0,.03), 0 0 0 1px rgba(0,0,0,.03);
}
.has-slide > .feat > *:not(.feat-card) { z-index: 2; }

/* Phone article sizes: h2 a clear step above h3, pull quotes below both */
@media (max-width: 995px) {
  .prose h2 { font: 600 26px/32px var(--sans); letter-spacing: -.025em; }
  .prose h3 { font: var(--label-lg); }
  .prose blockquote { font: var(--body-lg); }
}

/* Use cases without published numbers: what the hub holds, in rows */
.facts > .fact-head { flex-direction: row; justify-content: flex-start; align-items: center; gap: 16px; padding: 32px 28px; }
.facts > .fact-head canvas.px, .facts > .fact-head .pixico { margin: 0; }
.facts > .fact-head .h4 { max-width: 360px; text-wrap: balance; }
.fact { padding: 24px 28px 26px; }
.fact > span { font: var(--mono-xs); text-transform: uppercase; color: var(--ink-40); }
.fact > p { margin-top: 6px; font: var(--label-lg); letter-spacing: var(--lg-ls); color: var(--ink); }

/* Article tables: full width, scroll sideways on phones */
.prose .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.prose .table-wrap table { display: table; min-width: 600px; }
.prose .table-wrap tr:last-child td { border-bottom: 0; }
.prose .table-wrap td:first-child { color: var(--ink); font: var(--label-sm); white-space: nowrap; }
.prose .table-wrap th:first-child { width: 1%; }

@media (max-width: 680px) {
  .prose .table-wrap table, .prose .table-wrap tbody, .prose .table-wrap tr, .prose .table-wrap td { display: block; min-width: 0; }
  .prose .table-wrap thead { display: none; }
  .prose .table-wrap tr { padding: 16px 18px; border-bottom: 1px solid var(--line); }
  .prose .table-wrap tr:last-child { border-bottom: 0; }
  .prose .table-wrap td { padding: 0; border: 0; }
  .prose .table-wrap td:first-child { margin-bottom: 8px; }
  .prose .table-wrap td[data-label] + td[data-label] { margin-top: 8px; }
  .prose .table-wrap td[data-label]::before { content: attr(data-label); display: block; font: var(--mono-xs); text-transform: uppercase; color: var(--ink-40); margin-bottom: 2px; }
}

/* A type cover at the top of an article (same look as its blog card) */
.prose .art-type-cover .bl-cover { border-radius: 12px; box-shadow: 0 0 0 1px var(--line); }
.prose .art-type-cover .bl-cover-text { font-size: 64px; }
@media (max-width: 680px) { .prose .art-type-cover .bl-cover-text { font-size: 40px; } }

/* =====================================================================
   Page layout variety (2026-10-07). Firecrawl's subpages share the grid,
   rails and type but not one template: some open on the framed hero, some
   on a plain centred hero, some on a small left title; sections switch
   between centred heads, plain left heads, reading columns, big numbers,
   checklists, icon grids, timelines and walls. These are those blocks.
   Markup for each is in docs/site-design/README.md, "Layout kit".
   ===================================================================== */

/* --- Hero B: plain centred, no frame, a band of ASCII behind the buttons --- */
.hero.plain .hero-in { padding: 128px 24px 112px; }
.hero.plain .hero-band { position: absolute; left: 0; right: 0; bottom: 24px; height: 150px; width: 100%; }
.hero.plain .hero-in > *:not(.hero-band) { position: relative; }

/* --- Hero C: small left title (Firecrawl's Blog / Careers / Changelog) --- */
.lhero { position: relative; }
.lhero-top { padding: 72px 64px 48px; }
.lhero-eyebrow { display: block; margin-bottom: 18px; font: var(--mono-xs); text-transform: uppercase; color: var(--ink-40); }
.lhero-eyebrow b { font-weight: 400; color: var(--blue); }
.lhero h1 { font: var(--h2); letter-spacing: var(--h2-ls); max-width: 820px; text-align: left; margin: 0; }
.lhero h1 .hl { display: inline; }
.lhero-top .sub { max-width: 560px; margin: 16px 0 0; color: var(--ink-72); font: var(--body-lg); letter-spacing: var(--lg-ls); text-align: left; } /* the subline sits right under the heading */
.lhero-top .btns { margin-top: 24px; justify-content: flex-start; }
.lhero .hero-art { position: absolute; right: 10px; top: 10px; width: 46%; height: calc(100% - 20px); pointer-events: none; }
.lhero-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; padding: 0 64px 32px; font: var(--mono-xs); text-transform: uppercase; color: var(--ink-40); }
.lhero-meta b { font-weight: 400; color: var(--ink); }

/* --- Plain left section head (no badge), as on Firecrawl's use-case pages --- */
.lhead { padding: 80px 64px 36px; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px 64px; align-items: end; }
.lhead h2 { font: var(--h4); letter-spacing: var(--h4-ls); margin: 0; max-width: 520px; }
.lhead p { margin: 0; max-width: 460px; color: var(--ink-72); font: var(--body-lg); letter-spacing: var(--lg-ls); }
.lhead.solo { grid-template-columns: 1fr; }

/* --- Reading column (Firecrawl's About: narrow, left-aligned, document-like) --- */
.read { max-width: 680px; margin: 0 auto; padding: 96px 24px 104px; }
.read h2 { font: var(--h4); letter-spacing: var(--h4-ls); margin: 0 0 24px; }
.read p { color: var(--ink-72); font: var(--body-lg); letter-spacing: var(--lg-ls); }
.read p + p { margin-top: 16px; }
.read p b, .read p strong { color: var(--ink); font-weight: 450; }
.read .nlist { margin-top: 28px; }
.read > * + h2 { margin-top: 64px; }
.mission { margin-top: 40px; padding: 28px 32px 32px; border-radius: 16px; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(rgba(255,255,255,.16) 1px, transparent 1.3px) 0 0 / 8px 8px, var(--blue); }
.mission span { display: block; font: var(--mono-xs); text-transform: uppercase; color: rgba(255,255,255,.72); margin-bottom: 10px; }
.read .mission p, .mission p { color: #fff; font: var(--label-xl); letter-spacing: var(--xl-ls); }

/* --- Big numbers, no boxes (Firecrawl's About stats) --- */
.bignums { display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px 24px; padding: 88px 64px 96px; text-align: center; }
.bignums > div > b { display: block; color: var(--blue); font: 600 56px/60px var(--sans); letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.bignums > div > span { display: block; margin-top: 8px; font: var(--label-md); }
.bignums > div > small { display: block; margin-top: 2px; font: var(--body-sm); color: var(--ink-56); }
.bignums.two { grid-template-columns: repeat(2, 1fr); }
.bignums.four { grid-template-columns: repeat(4, 1fr); }

/* --- Checklist columns (Firecrawl's Enterprise features) --- */
.checkcols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.checkcols > div { background: var(--bg); padding: 40px 36px 44px; }
.checkcols h3 { font: var(--label-xl); letter-spacing: var(--xl-ls); }
.checkcols h3 + p { margin-top: 4px; color: var(--ink-56); font: var(--body-sm); }
.checkcols ul { margin-top: 20px; display: grid; gap: 12px; }
.checkcols li b { color: var(--ink); font: var(--label-lg); font-weight: 500; }
.checkcols li { position: relative; padding-left: 28px; font: var(--body-lg); letter-spacing: var(--lg-ls); color: var(--ink-64); }
.checkcols li::before { content: ""; position: absolute; left: 0; top: 3px; width: 16px; height: 16px; border-radius: 50%; background: var(--blue-16);
  -webkit-mask: none; }
.checkcols li::after { content: ""; position: absolute; left: 4px; top: 7px; width: 8px; height: 8px; background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 4.2 3.1 6.2 7 1.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 8px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 4.2 3.1 6.2 7 1.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 8px no-repeat; }
.checkcols.no li::before { background: var(--a6); }
.checkcols.no li::after { background: var(--ink-56);
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2 2l4 4M6 2 2 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E");
          mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M2 2l4 4M6 2 2 6' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); }

/* --- Two-column icon list (Firecrawl's "Perfect for") --- */
.perfect { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px 64px; padding: 8px 64px 88px; }
.perfect > div { position: relative; padding-left: 32px; }
.perfect > div::before { content: ""; position: absolute; left: 0; top: 3px; width: 18px; height: 18px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--blue); }
.perfect > div::after { content: ""; position: absolute; left: 5px; top: 8px; width: 8px; height: 8px; background: var(--blue);
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 4.2 3.1 6.2 7 1.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 8px no-repeat;
          mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Cpath d='M1 4.2 3.1 6.2 7 1.8' fill='none' stroke='%23000' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 8px 8px no-repeat; }
.perfect h3 { font: var(--label-lg); letter-spacing: var(--lg-ls); }
.perfect p { margin-top: 6px; color: var(--ink-72); font: var(--body-md); letter-spacing: var(--md-ls); }

/* --- Icon grid (Firecrawl's "Built for any task") --- */
.icongrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; background: var(--line); }
.icongrid > div { background: var(--bg); padding: 44px 32px 48px; text-align: center; }
.icongrid canvas.px, .icongrid .pixico { margin: 0 auto 18px; }
.icongrid h3 { font: var(--label-lg); letter-spacing: var(--lg-ls); }
.icongrid p { margin: 8px auto 0; max-width: 280px; color: var(--ink-56); font: var(--body-md); letter-spacing: var(--md-ls); }

/* --- Timeline rows: label column + content (Firecrawl's Changelog / customer stories) --- */
.tline > .tl { display: grid; grid-template-columns: 260px minmax(0, 1fr); border-top: 1px solid var(--line); }
.tline > .tl:first-child { border-top: 0; }
.tl-side { padding: 48px 32px 48px 42px; border-right: 1px solid var(--line); position: relative; }
.tl-side .tl-date { position: sticky; top: 120px; display: block; font: var(--mono-xs); text-transform: uppercase; color: var(--ink-40); }
.tl-side .tl-date b { font-weight: 400; color: var(--blue); }
.tl-side .tl-kind { display: block; margin-top: 10px; font: var(--label-md); color: var(--ink); position: sticky; top: 144px; }
.tl-side::before { content: ""; position: absolute; left: 0; top: 50px; width: 2px; height: 12px; background: var(--blue); }
.tl-main { padding: 48px 64px 56px; min-width: 0; }
.tl-main h2, .tl-main h3 { font: var(--h5); letter-spacing: var(--h5-ls); max-width: 640px; }
.tl-main h2 .hl, .tl-main h3 .hl { color: var(--blue); }
.tl-main > p, .tl-main .lead { margin-top: 14px; max-width: 640px; color: var(--ink-72); font: var(--body-lg); letter-spacing: var(--lg-ls); }
.tl-main .lead b { color: var(--ink); font: var(--label-lg); }
.tl-main .lead + .lead { margin-top: 12px; }
.tl-main .link { margin-top: 18px; }
.tl-nums { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }
.tl-nums > div { padding: 16px 20px 18px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-3); background: var(--bg-2); min-width: 150px; }
.tl-nums b { display: block; color: var(--blue); font: 600 28px/32px var(--sans); letter-spacing: -.01em; }
.tl-nums span { display: block; margin-top: 4px; font: var(--body-sm); color: var(--ink-72); max-width: 180px; }
.tl-facts { margin-top: 24px; display: grid; gap: 0; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-3); background: var(--bg-2); max-width: 640px; }
.tl-facts > div { padding: 14px 20px; display: grid; grid-template-columns: 120px 1fr; gap: 16px; border-top: 1px solid var(--line); }
.tl-facts > div:first-child { border-top: 0; }
.tl-facts span { font: var(--mono-xs); text-transform: uppercase; color: var(--ink-40); padding-top: 3px; }
.tl-facts p { font: var(--label-md); color: var(--ink); }

/* --- Quote wall (Firecrawl's "People love building with") --- */

/* --- Story layout (case studies): facts beside a reading column --- */
.story { display: grid; grid-template-columns: 300px minmax(0, 1fr); }
.story-side { border-right: 1px solid var(--line); padding: 56px 32px; }
.story-side dl { position: sticky; top: 120px; display: grid; gap: 22px; }
.story-side dt { font: var(--mono-xs); text-transform: uppercase; color: var(--ink-40); }
.story-side dd { margin-top: 6px; font: var(--label-md); color: var(--ink); }
.story-main { padding: 56px 64px 72px; min-width: 0; }
.story-main .prose { margin: 0; max-width: 680px; }

/* --- Seals row (security) --- */
.seals { display: flex; flex-wrap: wrap; justify-content: center; gap: 48px 72px; padding: 72px 32px 80px; }
.seals > div { display: grid; justify-items: center; text-align: center; max-width: 240px; }
/* the same badge as the footer's: a soft white disc inside a thin outer ring */
.seals .seal { position: relative; width: 70px; height: 70px; margin-top: 9px; border-radius: 50%; display: grid; place-items: center; align-content: center; background: linear-gradient(180deg, rgba(255,255,255,.8), rgba(255,255,255,.4)); box-shadow: 0 16px 24px -6px rgba(0,0,0,.04), 0 8px 12px -4px rgba(0,0,0,.04), 0 4px 8px -2px rgba(0,0,0,.03), 0 0 0 1px rgba(0,0,0,.03); font: 500 13px/1 var(--sans); color: var(--blue); letter-spacing: .02em; }
.seals .seal::before { content: ""; position: absolute; inset: -9px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line); pointer-events: none; }
.seals .seal small { display: block; margin-top: 3px; font: var(--mono-xs); font-size: 9px; color: var(--ink-40); letter-spacing: 0; }
.seals h3 { margin-top: 27px; font: var(--label-lg); }
.seals p { margin-top: 6px; font: var(--body-sm); color: var(--ink-56); }

@media (max-width: 995px) {
  .hero.plain .hero-in { padding: 72px 16px 72px; }
  .lhero-top { padding: 48px 24px 32px; }
  .lhero h1 { font: var(--h2); }
  .lhero .hero-art { display: none; }
  .lhero-meta { padding: 0 24px 24px; }
  .lhead { grid-template-columns: 1fr; padding: 56px 24px 28px; }
  .read { padding: 64px 20px 72px; }
  .bignums, .bignums.four { grid-template-columns: repeat(2, 1fr); padding: 56px 24px 64px; gap: 40px 16px; }
  .bignums > div > b { font-size: 40px; line-height: 44px; }
  .checkcols, .icongrid { grid-template-columns: 1fr; }
  .perfect { grid-template-columns: 1fr; padding: 4px 24px 56px; gap: 24px; }
  .tline > .tl { grid-template-columns: 1fr; }
  .tl-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 24px 24px 20px; }
  .tl-side::before { top: 26px; }
  .tl-side .tl-date, .tl-side .tl-kind { position: static; }
  .tl-main { padding: 28px 24px 40px; }
  .tl-facts > div { grid-template-columns: 1fr; gap: 4px; }
  .story { grid-template-columns: 1fr; }
  .story-side { border-right: 0; border-bottom: 1px solid var(--line); padding: 32px 24px; }
  .story-side dl { position: static; grid-template-columns: repeat(2, 1fr); }
  .story-main { padding: 40px 20px 56px; }
}
@media (max-width: 680px) { .bignums, .bignums.two, .bignums.four { grid-template-columns: 1fr 1fr; } .checkcols > div { padding: 32px; } }

/* Layout kit follow-ups */
.tl-fh { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.tl-fh .h4, .tl-fh p { font: var(--label-lg); letter-spacing: var(--lg-ls); color: var(--ink); }
@media (max-width: 680px) {
  .bignums > div:last-child:nth-child(odd) { grid-column: 1 / -1; }
  .bignums { padding: 40px 20px 48px; }
}
.tl-side .tl-kind small { display: block; margin-top: 4px; font: var(--body-sm); color: var(--ink-56); }
.tl-facts > div { grid-template-columns: minmax(120px, max-content) 1fr; }
.tl-facts span { white-space: nowrap; }
.tl-facts .link { margin-top: 4px; }
.read .mission + p { margin-top: 36px; }
.icongrid.two { grid-template-columns: repeat(2, 1fr); }
.bignums { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
@media (max-width: 995px) {
  .bignums, .bignums.four { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
  .icongrid.two { grid-template-columns: 1fr; }
  .tl-facts > div { grid-template-columns: 1fr; }
}
@media (max-width: 420px) {
  .askbox-foot .seg > span { padding: 6px 8px; font-size: 14px; }
  .askbox-foot .askbox-go { padding: 8px 10px; }
}

/* Ask box on phones: the four tabs become one dropdown. A white outlined
   button with the tab's pixel icon; the menu springs open above it (the hero
   clips anything that hangs below). */
.seg-drop { display: none; position: relative; }
.seg-drop-btn { display: inline-flex; align-items: center; gap: 8px; height: 36px; padding: 0 12px 0 11px; border-radius: 10px;
  background: var(--surface); color: var(--ink); font: var(--label-md); box-shadow: inset 0 0 0 1px var(--a8), 0 1px 2px rgba(0,0,0,.04);
  -webkit-tap-highlight-color: transparent; transition: transform .35s cubic-bezier(.34,1.56,.64,1), box-shadow .2s; }
.seg-drop-btn:active { transform: scale(.96); transition-duration: .12s; }
.seg-drop-btn:focus-visible { outline: 2px solid var(--blue-40); outline-offset: 2px; }
.seg-drop.open .seg-drop-btn { box-shadow: inset 0 0 0 1px var(--blue-40), 0 1px 2px rgba(0,0,0,.04); }
.sd-ico { display: none; }
.sd-ico.on { display: inline-flex; }
.sd-chev { width: 7px; height: 7px; margin: -3px 0 0 4px; border-right: 1.5px solid var(--ink-56); border-bottom: 1.5px solid var(--ink-56); transform: rotate(45deg); transition: transform .35s cubic-bezier(.34,1.56,.64,1), margin .35s; }
.seg-drop.open .sd-chev { transform: rotate(225deg); margin-top: 4px; }
.seg-drop-menu { position: absolute; left: 0; bottom: calc(100% + 8px); z-index: 20; min-width: 188px; padding: 4px; border-radius: 12px; background: var(--surface);
  box-shadow: 0 0 0 1px var(--a6), 0 16px 32px -12px rgba(0,0,0,.14), 0 4px 10px -4px rgba(0,0,0,.06);
  transform-origin: 18px 100%; opacity: 0; visibility: hidden; transform: translateY(6px) scale(.94);
  transition: opacity .18s, transform .4s cubic-bezier(.34,1.45,.5,1), visibility 0s .4s; }
.seg-drop.open .seg-drop-menu { opacity: 1; visibility: visible; transform: none; transition: opacity .18s, transform .45s cubic-bezier(.34,1.45,.5,1), visibility 0s; }
.sd-opt { display: flex; align-items: center; gap: 10px; width: 100%; height: 40px; padding: 0 12px; border-radius: 8px; text-align: left; font: var(--label-md); color: var(--ink-72); transition: background-color .15s, color .15s; }
.sd-opt:hover, .sd-opt:focus-visible { background: var(--a4); color: var(--ink); outline: 0; }
.sd-opt.is-active { color: var(--ink); background: var(--blue-4); }
.sd-opt.is-active::after { content: ""; margin-left: auto; width: 9px; height: 5px; border-left: 1.5px solid var(--blue); border-bottom: 1.5px solid var(--blue); transform: rotate(-45deg) translateY(-2px); }
@media (max-width: 680px) {
  .askbox-foot .seg { display: none; }
  .seg-drop { display: block; }
}

.scan-msearch { display: none; }
.scan-go { position: relative; flex: none; display: inline-flex; align-items: center; height: 34px; padding: 0 14px; border-radius: 10px;
  font: 500 13px/1 var(--sans); color: var(--blue); box-shadow: inset 0 0 0 1px var(--blue-40); background: var(--blue-4);
  transition: background-color .2s, color .2s, transform .15s; }
.scan-go.press { background: var(--blue); color: #fff; transform: scale(.95); }
.scan-go::after { content: ""; position: absolute; left: 50%; top: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%;
  background: var(--blue-24); opacity: 0; transform: scale(.3); pointer-events: none; }
.scan-go.tap::after { animation: scanTap .55s ease-out; }
@keyframes scanTap { 0% { opacity: 1; transform: scale(.3); } 100% { opacity: 0; transform: scale(2); } }
.scan .scan-code .ln, .scan .scan-chip { transition: opacity .35s; }
.scan .scan-code .ln.pre, .scan .scan-chip.pre { opacity: 0; }

/* Phones: the mockups are still (no animation, see PHONE in js/site.js)
   and cut down to what reads at this size, as on firecrawl.dev: the hero
   scan keeps the browser top and the answer; each tab scene keeps its core
   (the chart, the drafts, the four numbers). */
@media (max-width: 680px) {
  .scan .scan-frame { -webkit-mask: none; mask: none; }
  .scan .scan-src, .scan .scan-hi { display: none; }
  .scan .scan-top { flex-wrap: nowrap; justify-content: space-between; padding: 14px 16px; }
  .scan .scan-top .scan-brand { display: flex; gap: 10px; align-items: center; }
  .scan .scan-top .scan-item:nth-child(2), .scan .scan-top .scan-tag { display: none; }
  .scan .scan-win { box-shadow: none; padding-bottom: 60px; }
  .scan .scan-code { padding-top: 14px; }

  /* fewer words, smaller type: the question is a plain search bar */
  .scan-ask { position: relative; padding: 8px 12px 8px 34px; border-radius: 10px; box-shadow: inset 0 0 0 1px var(--line-3);
    font-size: 13px; line-height: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .scan-ask::before { content: ""; position: absolute; left: 12px; top: 50%; width: 14px; height: 14px; margin-top: -7px; background: var(--ink-40);
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'%3E%3Ccircle cx='11' cy='11' r='7'/%3E%3Cpath d='M20 20l-3.6-3.6'/%3E%3C/svg%3E") center / contain no-repeat; }
  .dm-label, .dm-live, .scan-tag { font-size: 10px; }
  .scan .scan-code { font-size: 12px; }
  .scan .scan-code .ln { grid-template-columns: 70px minmax(0, 1fr); padding-left: 16px; }
  .scan .scan-code .ln::before { display: none; }
  .scan .scan-chip { height: 28px; font-size: 11px; right: 14px; bottom: 14px; }
  .scan .scan-win { min-height: 0; padding-bottom: 56px; }
  .scan .scan-code .ln:empty { display: none; }
  /* the hero scan's top row is a search bar with a Search button; the
     question lives there, so the answer drops its question line */
  .scan .scan-top > .scan-item { display: none !important; }
  .scan .scan-msearch { display: flex; align-items: center; gap: 8px; width: 100%; }
  .scan .scan-msearch .scan-ask { flex: 1; }
  .scan .scan-top { padding: 12px; }
  .scan .scan-code .ln:first-child { display: none; }
  /* a shorter question where one is given (data-short) */
  .scan-ask[data-short] { font-size: 0; }
  .scan-ask[data-short]::after { content: attr(data-short); font-size: 13px; }
}

/* Phones: the impact numbers under the logos, tighter */
@media (max-width: 680px) {
  [data-impact-row] .stat.c { padding: 20px 16px; }
  [data-impact-row] .stat > span { margin-top: 4px; }
}

/* Narrow screens: the section-head art stays (Firecrawl keeps it on phones),
   full strength in the open space above and below the words and faded behind
   them, since the text spans almost the whole width here */
@media (max-width: 995px) {
  .shead > .ascii {
    -webkit-mask: linear-gradient(#000 0, #000 48px, rgba(0,0,0,.32) 104px, rgba(0,0,0,.32) calc(100% - 104px), #000 calc(100% - 48px), #000 100%);
    mask: linear-gradient(#000 0, #000 48px, rgba(0,0,0,.32) 104px, rgba(0,0,0,.32) calc(100% - 104px), #000 calc(100% - 48px), #000 100%);
  }
}

/* Phones: step cards as tight as the copy cards (Firecrawl: 32px) */
@media (max-width: 680px) {
  .step { padding: 32px; }
}

/* Phones: hero and closing-CTA buttons stack full width, so they are the same size */
@media (max-width: 680px) {
  .hero .btns, .cta-mid .btns { flex-direction: column; align-items: stretch; width: 100%; }
  .hero .btns .btn, .cta-mid .btns .btn { width: 100%; }
}

/* Narrow screens: each use case opens its preview right under it */
@media (max-width: 995px) {
  .ux { display: block; background: none; }
  .ux-e { display: block; border-bottom: 1px solid var(--line); }
  .ux-e:last-of-type { border-bottom: 0; }
  .ux-fill { display: none; }
  .ux-item { padding: 20px 20px 20px 22px; }
  .ux-btn { padding-right: 28px; }
  .ux-btn::after { content: ""; position: absolute; right: 24px; top: 30px; width: 8px; height: 8px; border: solid var(--ink-40); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); transition: transform .25s; }
  .is-open .ux-btn::after { transform: rotate(-135deg); top: 34px; border-color: var(--blue); }
  .ux-t { white-space: normal; }
  .ux-panel { display: none; border-top: 1px solid var(--line); }
  .is-open > .ux-panel { display: grid; animation: fadeUp .35s cubic-bezier(.22,1,.36,1); }
}
@media (max-width: 680px) {
  .ux-foot { padding: 16px; gap: 14px; }
  .ux-stat { min-width: 72px; padding: 8px 12px; }
  .ux-stat b { font-size: 20px; line-height: 24px; }
  .ux-foot p { font: var(--body-sm); }
}
@media (max-width: 995px) { .ux-item .link { display: none; } .is-open > .ux-item .link { display: inline-flex; } }

/* Phones: every bold-title card at one size, 16px (body-lg is 18px here) */
@media (max-width: 680px) {
  .lead, .run, .run.run > h3 + p, .checkcols li { font: var(--body-md); line-height: 22px; letter-spacing: var(--md-ls); }
  .lead b, .lead strong, .run.run > h3, .checkcols li b { font: var(--label-md); font-weight: 500; line-height: 22px; letter-spacing: var(--md-ls); }
  .copy-tag { margin-bottom: 12px; }
  /* use cases: tighter, less text (the line under a title only on the open one) */
  .ux-item { padding: 14px 16px; }
  .ux-btn { padding-right: 24px; }
  .ux-t { font: var(--label-md); font-weight: 500; gap: 8px; }
  .ux-d { display: none; margin-top: 4px; font: var(--body-sm); }
  .is-open .ux-d { display: block; }
  .ux-item .link { margin-top: 6px; font: var(--label-sm); }
  .ux-btn::after { right: 18px; top: 19px; }
  .is-open .ux-btn::after { top: 23px; }
  .ux-foot { padding: 12px 14px; gap: 12px; }
  .ux-foot p { font: var(--body-xs); }
  .ux-stat b { font-size: 18px; line-height: 22px; }
}

/* ---------- Testimonials wall (testimonials.html) ----------
   Firecrawl's customer-stories grid: hairline cells, the quote is the cell's
   main text and who said it sits along the bottom (name and role, logo on
   the right). The featured quote takes the whole first row; the longest
   takes two columns so a row never carries a tall empty cell. */
.wall { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-flow: dense; gap: 1px; background: var(--line); }
.wall > figure { display: flex; flex-direction: column; margin: 0; padding: 40px 40px 32px; background: var(--bg); }
.wall > figure blockquote { order: 1; padding: 0; font: var(--body-lg); letter-spacing: var(--lg-ls); color: var(--ink); }
.wall > figure .quote-head { order: 2; margin-top: auto; padding: 32px 0 0; border: 0; }
.wall > figure.big { grid-column: 1 / -1; padding: 48px 48px 36px; }
.wall > figure.big blockquote { font: var(--label-xl); letter-spacing: var(--xl-ls); max-width: 900px; }
.wall > figure.wide { grid-column: span 2; }
@media (max-width: 995px) { .wall { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 680px) {
  .wall { grid-template-columns: minmax(0, 1fr); }
  .wall > figure, .wall > figure.big { padding: 28px 24px 24px; grid-column: auto; }
  .wall > figure blockquote, .wall > figure.big blockquote { font: var(--body-md); line-height: 22px; }
  .wall > figure .quote-head { padding-top: 20px; }
}

/* ---------- Reviews on the home page: two rows sliding past (firecrawl.dev) ----------
   Each row is its cells twice over, moved left by half its width on a loop
   (the second row the other way), so it never jumps. Hover pauses it.
   Reduced motion: still rows you can scroll sideways. */
.marq { overflow: hidden; }
.marq-row { overflow: hidden; border-bottom: 1px solid var(--line); }
.marq-row:last-child { border-bottom: 0; }
.marq-track { display: flex; width: max-content; animation: marq 70s linear infinite; }
.marq-row.rev .marq-track { animation-direction: reverse; animation-duration: 80s; }
.marq:hover .marq-track { animation-play-state: paused; }
@keyframes marq { from { transform: translateX(0); } to { transform: translateX(-50%); } }
.mq { flex: none; width: 380px; margin: 0; border-right: 1px solid var(--line); background: var(--bg); display: flex; flex-direction: column; }
.mq figcaption { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 20px 28px; border-bottom: 1px solid var(--line); }
.mq figcaption b { display: block; font: var(--label-md); font-weight: 500; }
.mq figcaption small { display: block; font: var(--body-sm); color: var(--ink-56); }
.mq figcaption img { height: 20px; width: auto; opacity: .5; filter: grayscale(1) brightness(0); flex: none; }
.mq blockquote { padding: 24px 28px 28px; font: var(--body-lg); letter-spacing: var(--lg-ls); color: var(--ink); }
.mq blockquote::before { content: "\201C"; }
.mq blockquote::after { content: "\201D"; }
@media (prefers-reduced-motion: reduce) {
  .marq-track { animation: none; }
  .marq-row { overflow-x: auto; }
  .mq[aria-hidden="true"] { display: none; }
}
@media (max-width: 680px) {
  .mq { width: 290px; }
  .mq figcaption { padding: 16px 20px; }
  .mq blockquote { padding: 18px 20px 22px; font: var(--body-md); line-height: 22px; }
  .marq-track { animation-duration: 55s; }
  .marq-row.rev .marq-track { animation-duration: 62s; }
}

/* ============================================================
   Use cases page: Firecrawl's search feature cells. Each case is a cell
   with a short run-in text over a framed picture; rows run wide, two-up,
   wide, with the 16px twin-line gutter between the two-up cells. Each
   picture is one small UI fragment doing one calm thing on a loop (after
   firecrawl.dev/search): flat cobalt on white, light blue tints, mono for
   data, nothing else on the page moves. js/site.js useCaseArt() runs them
   only while on screen; reduced motion gets the finished state.
   ============================================================ */
.ucg { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 16px; }
.ucg > .seam { grid-column: 1 / -1; }
.uc { grid-row: span 2; display: grid; grid-template-rows: subgrid; min-width: 0; box-shadow: inset 1px 0 var(--line), inset -1px 0 var(--line); }
.uc.wide { grid-column: 1 / -1; box-shadow: none; }
.uc-t { padding: 48px 56px 40px; }
.uc.wide .uc-t { padding: 56px 56px 44px; text-align: center; }
.uc-k { display: inline-flex; align-items: center; gap: 8px; font: var(--label-sm); color: var(--ink-64); }
.uc-k svg { width: 16px; height: 16px; flex: none; }
.uc-t p { margin-top: 14px; max-width: 520px; font: var(--body-lg); letter-spacing: var(--lg-ls); color: var(--ink-64); }
.uc.wide .uc-t p { max-width: 600px; margin-inline: auto; }
.uc-t p b { font: var(--label-lg); color: var(--ink); }
.uc-f { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 20px; margin-top: 18px; font: var(--label-sm); color: var(--ink-64); }
.uc.wide .uc-f { justify-content: center; }
.uc-f b { margin-right: 5px; font-weight: 600; color: var(--blue); }
.uc-f .link { font: var(--label-sm); }

/* the framed picture: hairline guides cross the area like a drafting frame */
.uca { position: relative; display: grid; place-items: center; height: 300px; overflow: hidden; border-top: 1px solid var(--line); }
.uca::before, .uca::after { content: ""; position: absolute; pointer-events: none; }
.uca::before { top: 0; bottom: 0; left: 56px; right: 56px; border-inline: 1px solid var(--line); }
.uca::after { left: 0; right: 0; top: 28px; bottom: 28px; border-block: 1px solid var(--line); }
.uc.wide .uca::before { left: calc(50% - 270px); right: calc(50% - 270px); }
/* the picture sits dead centre and scales as one piece to fit the inner box (--k, set by useCaseArt) */
.uca > * { position: absolute; left: 50%; top: 50%; z-index: 1; transform: translate(-50%, -50%) scale(var(--k, 1)); }

@media (max-width: 995px) {
  .ucg { grid-template-columns: minmax(0, 1fr); }
  .uc, .uc.wide { grid-column: 1; box-shadow: none; }
  .uc:not(.wide) + .uc:not(.wide) { box-shadow: inset 0 1px var(--line); }
  .uc-t, .uc.wide .uc-t { padding: 32px 24px 28px; text-align: left; }
  .uc.wide .uc-t p { margin-inline: 0; }
  .uc.wide .uc-f { justify-content: flex-start; }
  .uca { height: 260px; }
  .uca::before, .uc.wide .uca::before { left: 24px; right: 24px; }
  .uca::after { top: 20px; bottom: 20px; }
}
@media (max-width: 680px) {
  .uc-k { font: 450 13px/20px var(--sans); white-space: nowrap; }
  .uc-t p { margin-top: 10px; }
  .uc-f { margin-top: 14px; gap: 4px 16px; }
  .uca { height: 270px; }
}
@media (max-width: 360px) {
  .uc-k { font-size: 12px; gap: 6px; }
}

/* ============================================================
   Service page heads (AI Operating System, AI Assessment, What we build),
   after firecrawl.dev/search: two pairs of full-height lines frame the head,
   with a mono tag box at the top and bottom of each side column, and a
   product window under the buttons where a question types itself and the
   answers come back as cards. js/site.js serviceDemo() runs the window
   while it is on screen; phones get the filled-in window, still.
   ============================================================ */
.ohero .hero-in { padding-top: 112px; }
.sframe { position: absolute; top: 0; bottom: 0; left: 50%; width: min(var(--wrap), 100% - var(--gut) * 2); transform: translateX(-50%); pointer-events: none; }
.sframe i { position: absolute; top: 0; bottom: 0; border-inline: 1px solid var(--line); }
.sframe i:nth-child(1) { left: 101px; right: 101px; }
.sframe i:nth-child(2) { left: 202px; right: 202px; }
.sf-tag { position: absolute; width: 101px; height: 200px; padding-top: 16px; text-align: center; font: var(--mono-xs); text-transform: uppercase; color: var(--ink-16); white-space: nowrap; }
.sf-tag.tl, .sf-tag.bl { left: 101px; }
.sf-tag.tr, .sf-tag.br { right: 101px; }
.sf-tag.tl, .sf-tag.tr { top: 0; border-bottom: 1px solid var(--line); }
.sf-tag.bl, .sf-tag.br { bottom: 0; display: flex; align-items: flex-end; justify-content: center; padding: 0 0 16px; border-top: 1px solid var(--line); }

.sdemo { position: relative; display: flex; flex-direction: column; max-width: 624px; height: 520px; margin: 64px auto 0; overflow: hidden; text-align: left; border-radius: 12px; background: #fff; box-shadow: 0 0 0 1px var(--line), 0 24px 48px -32px rgba(0, 0, 0, .12); }
.sd-bar { display: flex; gap: 6px; padding: 11px 16px; border-bottom: 1px solid var(--line); }
.sd-bar i { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-16); opacity: .6; }
.sd-head { padding: 12px 16px; background: var(--bg-2); border-bottom: 1px solid var(--line); }
.sd-input { display: flex; align-items: center; gap: 10px; height: 42px; padding: 0 12px; border-radius: 8px; background: #fff; box-shadow: inset 0 0 0 1px var(--line); }
.sd-input > svg { flex: none; width: 15px; height: 15px; color: var(--ink-40); }
.sd-q { min-width: 0; font: 400 15px/20px var(--mono); color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sd-caret { flex: none; width: 1.5px; height: 17px; background: var(--blue); animation: sd-blink 1s steps(1) infinite; }
.sdemo:not(.typing) .sd-caret { visibility: hidden; }
@keyframes sd-blink { 50% { opacity: 0; } }
.sd-ok { margin-left: auto; flex: none; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); color: #fff; opacity: 0; transform: scale(.6); transition: opacity .2s, transform .25s cubic-bezier(.3, 1.6, .5, 1); }
.sd-ok svg { width: 10px; height: 10px; }
.sdemo.done .sd-ok { opacity: 1; transform: none; }
.sd-meta { display: flex; align-items: center; gap: 6px; height: 20px; margin-top: 8px; padding-left: 4px; font: var(--label-xs); color: var(--ink-40); }
.sd-meta b { font-weight: 450; color: var(--blue); }
.sd-spin { width: 10px; height: 10px; border-radius: 50%; border: 1.5px solid var(--blue-24); border-top-color: var(--blue); animation: sd-spin .7s linear infinite; }
@keyframes sd-spin { to { transform: rotate(360deg); } }
.sd-list { flex: 1; min-height: 0; overflow: hidden; -webkit-mask-image: linear-gradient(#000 75%, transparent); mask-image: linear-gradient(#000 75%, transparent); }
.sd-res { padding: 16px 24px 18px; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(8px); transition: opacity .45s, transform .45s cubic-bezier(.2, .7, .3, 1); }
.sd-res.in, html:not(.js) .sd-res { opacity: 1; transform: none; }
.sd-chip { display: inline-flex; align-items: center; gap: 7px; height: 24px; padding: 0 8px 0 6px; border-radius: 6px; background: var(--bg-2); box-shadow: inset 0 0 0 1px var(--line); font: 400 12px/16px var(--mono); color: var(--ink); }
.sd-chip svg { width: 13px; height: 13px; color: var(--blue); }
.sd-code { margin: 10px 0 0; font: 400 12.5px/20px var(--mono); color: var(--ink); white-space: pre-wrap; }
.sd-code .p { color: var(--ink-32); }
.sd-code .k { color: var(--blue); }

@media (max-width: 995px) {
  .sframe { display: none; }
  .ohero .hero-in { padding-top: 72px; }
  .sdemo { margin-top: 48px; height: 470px; }
}
@media (max-width: 680px) {
  .sdemo { height: 430px; margin-top: 40px; }
  .sd-head { padding: 10px 12px; }
  .sd-q { font-size: 13px; }
  .sd-input { gap: 8px; padding: 0 10px; }
  .sd-caret { display: none; }
  .sd-res { padding: 14px 16px 16px; }
  .sd-code { font-size: 11.5px; line-height: 18px; }
}
@media (max-width: 380px) {
  .sd-q { font-size: 12px; }
}

/* ============================================================
   Cell pictures (2026-10-11, second pass), after firecrawl.dev's feature
   pictures. Shapes, not words: grey skeleton bars instead of fake text and
   figures, one short real label at most. Blue arrives as the action: a
   tint washes over the skeleton, then one badge, check or bar turns solid.
   The space round the object is filled (an ASCII halo or bed from the
   site's own ASCII engine, rings, cropped neighbours, a stack behind).
   Outlined window dots, 1.5px borders, wide soft shadows, a cursor that
   glides and clicks, a pixel spinner, letters that scramble. No icons.
   Each picture's root is sized to the object it shows; js/site.js
   cellArt() runs it while on screen; reduced motion keeps the shipped
   (finished) state.
   ============================================================ */
.cx { --bd: #e5e5e5; --sk: #ececec; --sk2: #dfdfdf; }
.cx canvas.ascii { position: absolute; z-index: 0; pointer-events: none; }
.cx svg, .cx canvas { max-width: none; } /* the site's media reset would cap the halo and the rings at the object's width */
.cx-card { position: relative; z-index: 1; background: #fff; border: 1.5px solid var(--bd); border-radius: 14px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 18px 36px -20px rgba(0, 0, 0, .16); }
.cx-top { display: flex; align-items: center; gap: 10px; height: 30px; padding: 0 11px; border-bottom: 1.5px solid #efefef; }
.cx-dots { display: flex; align-items: center; gap: 5px; align-self: stretch; padding-right: 10px; border-right: 1.5px solid #efefef; }
.cx-dots i { width: 7px; height: 7px; border-radius: 50%; box-shadow: inset 0 0 0 1.2px #d6d6d6; }
.cx-url { display: flex; align-items: center; gap: 7px; min-width: 0; font: 400 11.5px/14px var(--sans); color: #a6a6a6; white-space: nowrap; transition: opacity .3s; }
.cx-url::before { content: ""; flex: none; width: 11px; height: 11px; border-radius: 3px; background: #f0f0f0; }
.cx-url.sw { opacity: 0; }
.cx-body { position: relative; padding: 14px 16px; }
.cx-ghost { position: absolute; z-index: 0; height: 26px; background: #fff; border: 1.5px solid var(--bd); border-bottom: 0; border-radius: 14px 14px 0 0; }
.cx-ghost::after { content: ""; position: absolute; left: 34px; top: 0; bottom: 0; border-left: 1.5px solid #efefef; }
.cx .sk { display: block; flex: none; height: 5px; border-radius: 3px; background: var(--sk); transition: background-color .6s calc(var(--i, 0) * 50ms); }
.cx .sk.h { height: 6px; background: var(--sk2); }
.cx .sq { display: block; border-radius: 6px; background: var(--sk); transition: background-color .6s calc(var(--i, 0) * 50ms); }
.tint .sk, .tint .sq { background: var(--blue-16); }
.tint .sk.h { background: var(--blue-24); }
.cx .sk.b, .cx .sq.b { background: var(--blue); }
.cx .sk.n { width: 26px; }
.cx.snap, .cx.snap *, .cx .snap, .cx .snap * { transition: none !important; }
/* nothing moves while the picture is off screen; nothing loops under reduced motion */
.uca:not(.run) .cx-orb, .uca:not(.run) .cx-chip > .cx-px, .uca:not(.run) .cx-spin i, .uca:not(.run) .cx-live { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) { .cx-orb, .cx-chip > .cx-px, .cx-spin i { animation: none; } .cx-spin i { opacity: .6; } }

/* the status pill: a pixel spinner while it works, a blue check when done */
.cx-pill { position: absolute; z-index: 3; display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 16px 0 12px; border-radius: 17px; background: #fff; border: 1.5px solid var(--bd); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .2); font: 400 12.5px/16px var(--mono); color: var(--ink); white-space: nowrap; transition: opacity .35s, transform .35s cubic-bezier(.2, .7, .3, 1); }
.cx-pill.hide { opacity: 0; transform: translateY(6px); }
.cx-spin { display: grid; grid-template-columns: repeat(4, 3px); gap: 1.5px; flex: none; }
.cx-spin i { width: 3px; height: 3px; border-radius: .5px; background: var(--blue); opacity: .15; animation: cx-spin 1.1s linear infinite; animation-delay: calc(var(--d) * -1.1s); }
@keyframes cx-spin { 0%, 100% { opacity: .14; } 30% { opacity: 1; } 60% { opacity: .38; } }
.cx-ok, .cx-tick { display: grid; place-items: center; flex: none; width: 16px; height: 16px; border-radius: 50%; background: var(--blue); }
.cx-ok svg, .cx-tick svg { width: 10px; height: 10px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-pill:not(.done) .cx-ok, .cx-pill.done .cx-spin { display: none; }
.cx-pill.done .cx-ok { animation: cx-pop .35s cubic-bezier(.3, 1.5, .5, 1); }
@keyframes cx-pop { 0% { opacity: 0; transform: scale(.6); } 100% { opacity: 1; transform: none; } }

/* a small label whose letters scramble into the next word; blue when it lands */
.cx-badge { position: absolute; z-index: 3; display: inline-grid; place-items: center; height: 22px; padding: 0 7px; border-radius: 6px; background: #a8a8a8; color: #fff; font: 500 11px/1 var(--sans); letter-spacing: .04em; white-space: nowrap; transition: background-color .45s, opacity .3s; }
.cx-badge.on { background: var(--blue); }
.cx-badge.hide { opacity: 0; }

/* the cursor: glides between points (--x, --y) and clicks */
.cx-cur { position: absolute; left: 0; top: 0; z-index: 8; width: 14px; height: 20px; transform: translate(var(--x, 0px), var(--y, 0px)); transition: transform .95s cubic-bezier(.45, 0, .15, 1), opacity .35s; }
.cx-cur.jump { transition: opacity .35s; }
.cx-cur.gone { opacity: 0; }
.cx-cur svg { display: block; width: 14px; height: 20px; overflow: visible; transform-origin: 2px 2px; transition: transform .12s; filter: drop-shadow(0 1px 1.2px rgba(0, 0, 0, .25)); }
.cx-cur path { fill: #1d1d1d; stroke: #fff; stroke-width: 1.3; stroke-linejoin: round; }
.cx-cur.click svg { transform: scale(.84); }
.cx-cur b { position: absolute; left: 12px; top: 17px; padding: 2px 6px; border-radius: 2px 6px 6px 6px; background: #1d1d1d; color: #fff; font: 500 10.5px/14px var(--sans); white-space: nowrap; }
.cx-cur.a path { fill: var(--blue); }
.cx-cur.a b { background: var(--blue); }

/* a page with its corner cut (an SVG behind the content) */
.cx-doc { position: absolute; z-index: 1; }
.cx-pg { position: absolute; left: 0; top: 0; overflow: visible; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .03)) drop-shadow(0 14px 20px rgba(0, 0, 0, .07)); }
.cx-pg path { fill: #fff; stroke: var(--bd); stroke-width: 1.5; }
.cx-pg path.fold { fill: #f6f6f6; }
.cx-doc .cx-in, .cx-nb .cx-in { position: relative; display: grid; align-content: start; gap: 8px; padding: 18px 16px; }
.cx-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.cx-btn { display: block; width: 58px; height: 18px; border-radius: 9px; background: var(--sk); transition: background-color .3s, transform .15s; }
.cx-btn.on { background: var(--blue); }
.cx-btn.press { transform: scale(.92); }

/* ---- use cases ---- */
/* ask: a question in a prompt bar, sent; the halo round it turns blue while it works */
.cx-ask { width: 440px; height: 64px; }
.cx-ask canvas { left: -200px; top: -110px; width: calc(100% + 400px); height: calc(100% + 220px); }
.cx-field { display: flex; align-items: center; gap: 12px; height: 64px; padding: 0 11px 0 26px; border-radius: 32px; box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 22px 40px -22px rgba(0, 0, 0, .2); }
.cx-q { flex: 1; min-width: 0; font: 400 17px/22px var(--sans); color: #9c9c9c; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity .35s, transform .35s cubic-bezier(.2, .7, .3, 1); }
.cx-q.out { opacity: 0; transform: translateY(-5px); }
.cx-q.pre { opacity: 0; transform: translateY(5px); transition: none; }
.cx-send { display: grid; place-items: center; flex: none; width: 42px; height: 42px; border-radius: 50%; background: #1d1d1d; transition: transform .15s; }
.cx-send svg { width: 17px; height: 17px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cx-ask.press .cx-send { transform: scale(.9); }

/* sync: a quote is priced line by line, sent, and lands in the books */
.cx-sync { width: 344px; height: 196px; }
.cx-sync .q { left: 0; top: 0; width: 150px; height: 178px; }
.cx-sync .q .cx-in { gap: 0; padding: 18px 16px 0; }
.cx-sync .q .sk.h { margin-bottom: 14px; }
.cx-rows { display: grid; gap: 10px; }
.cx-row.p .sk { background: var(--blue-16); }
.cx-rule { display: block; height: 1.5px; margin: 13px 0 11px; background: #efefef; }
.cx-sync .cx-btn { margin: 16px 0 0 auto; }
.cx-sync .cx-badge { left: 14px; top: -11px; }
.cx-wire { position: absolute; left: 150px; top: 46px; width: 70px; height: 60px; overflow: visible; }
.cx-wire path { fill: none; stroke: #d9d9d9; stroke-width: 1.5; stroke-dasharray: 3 4; }
.cx-wire circle { fill: var(--blue); opacity: 0; transition: opacity .2s; }
.cx-led { position: absolute; left: 220px; top: 30px; width: 124px; padding: 12px 14px 10px; border-radius: 12px; }
.cx-lh { display: block; padding-bottom: 10px; margin-bottom: 4px; border-bottom: 1.5px solid #efefef; }
.cx-lrows { display: grid; }
.cx-lrows .cx-row { height: 22px; }
.cx-lrows .cx-row.new { overflow: hidden; transition: height .5s cubic-bezier(.2, .7, .3, 1), opacity .4s; }
.cx-led.wait .cx-row.new { height: 0; opacity: 0; }

/* cite: a scan runs down the policy, stops on the line, and the answer is traced to it */
.cx-cite { width: 330px; height: 200px; }
.cx-cite .pg { left: 0; top: 0; width: 168px; height: 196px; }
.cx-cite .pg .cx-in { gap: 0; padding: 18px 16px 0; }
.cx-cite .pg .sk.h { margin-bottom: 14px; }
.cx-par { display: grid; gap: 7px; margin-bottom: 14px; }
.cx-scan { position: absolute; z-index: 1; left: 10px; right: 10px; top: 0; height: 15px; border-radius: 4px; background: rgba(20, 64, 217, .07); box-shadow: inset 2px 0 var(--blue); opacity: 0; transform: translateY(var(--y, 40px)); transition: transform 1.4s cubic-bezier(.45, 0, .2, 1), opacity .3s; }
.cx-scan.on { opacity: 1; }
.cx-link { position: absolute; z-index: 2; left: 0; top: 0; width: 330px; height: 200px; overflow: visible; pointer-events: none; }
.cx-link path { fill: none; stroke: var(--blue); stroke-width: 1.5; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .6s cubic-bezier(.4, 0, .2, 1), opacity .3s; }
.cx-cite.linked .cx-link path { stroke-dashoffset: 0; }
.cx-ans { position: absolute; left: 174px; top: 84px; width: 156px; display: grid; gap: 8px; padding: 18px 14px 16px; border-radius: 12px; }
.cx-ans .sk.h { margin-bottom: 3px; }
.cx-ans .cx-badge { right: 10px; top: -11px; }

/* fx: one quote in three currencies, the figures re-priced each time, margin checked, made an order */
.cx-fx { width: 300px; height: 190px; }
.cx-nb { position: absolute; z-index: 0; opacity: .9; }
.cx-fx .cx-nb { top: 12px; width: 132px; height: 168px; }
.cx-fx .cx-nb.l { left: -250px; }
.cx-fx .cx-nb.r { right: -250px; }
.cx-fx .cx-win { position: absolute; inset: 0; }
.cx-fx .cx-body { display: grid; gap: 12px; padding: 12px 14px; }
.cx-seg { position: relative; justify-self: start; display: grid; grid-template-columns: repeat(3, 44px); height: 24px; padding: 2px; border-radius: 8px; background: #f3f3f3; }
.cx-seg i { position: absolute; left: 2px; top: 2px; width: 44px; height: 20px; border-radius: 6px; background: #fff; box-shadow: 0 1px 2px rgba(0, 0, 0, .08), 0 0 0 1px rgba(0, 0, 0, .04); transform: translateX(calc(var(--c) * 44px)); transition: transform .45s cubic-bezier(.65, 0, .35, 1); }
.cx-seg span { position: relative; display: grid; place-items: center; font: 400 10.5px/1 var(--mono); color: #a3a3a3; transition: color .3s; }
.cx-seg span.on { color: var(--ink); }
.cx-fx .cx-rows { gap: 9px; }
.cx-num { font: 400 12px/16px var(--mono); color: var(--ink); white-space: pre; }
.cx-mg { display: flex; align-items: center; gap: 14px; margin-top: 2px; }
.cx-trk { position: relative; flex: 1; height: 5px; border-radius: 3px; background: #f0f0f0; }
.cx-trk i { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; background: var(--sk2); transition: width 1s cubic-bezier(.2, .7, .3, 1), background-color .4s; }
.cx-trk.ok i { background: var(--blue); }
.cx-trk b { position: absolute; left: 60%; top: -4px; bottom: -4px; width: 1.5px; border-radius: 1px; background: #cfcfcf; }
.cx-fx .cx-btn { width: 64px; height: 20px; }
.cx-fx .cx-badge { right: -10px; top: -11px; }

/* ---- AI operating system ---- */
/* book: a day picked on the calendar, then a time, and the call is booked */
.cx-book { width: 380px; height: 202px; }
.cx-book .cx-ghost.g1 { left: 10px; width: 236px; top: -6px; }
.cx-book .cx-ghost.g2 { left: 20px; width: 216px; top: -12px; }
.cx-cal { position: absolute; left: 0; top: 0; width: 256px; padding: 14px 14px 18px; }
.cx-mh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.cx-mh b { font: 500 13px/16px var(--sans); color: var(--ink); }
.cx-mh span { display: flex; gap: 6px; }
.cx-mh span i { width: 14px; height: 14px; border-radius: 4px; background: #f2f2f2; }
.cx-wk, .cx-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cx-wk { margin-bottom: 7px; }
.cx-wk i { justify-self: center; width: 12px; height: 4px; border-radius: 2px; background: #ededed; }
.cx-days i { height: 19px; border-radius: 6px; background: #fff; box-shadow: inset 0 0 0 1.5px #ececec; transition: background-color .3s, box-shadow .3s; }
.cx-days i.x { background: #f6f6f6; box-shadow: none; }
.cx-days i.on { background: var(--blue); box-shadow: 0 0 0 3px var(--blue-16); }
.cx-slots { position: absolute; left: 268px; top: 26px; z-index: 0; width: 112px; display: grid; gap: 8px; padding: 14px 12px; border-radius: 12px; opacity: 0; transform: translateX(-16px); transition: opacity .4s, transform .5s cubic-bezier(.2, .7, .3, 1); }
.cx-slots.open { opacity: 1; transform: none; }
.cx-slots .sk.h { margin-bottom: 2px; }
.cx-slots span { display: grid; place-items: center; height: 26px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px #ececec; font: 400 11.5px/1 var(--mono); color: #8f8f8f; transition: background-color .3s, color .3s, box-shadow .3s; }
.cx-slots span.on { background: var(--blue); color: #fff; box-shadow: none; }
.cx-book .cx-pill { left: 128px; translate: -50% 0; top: 168px; }

/* weeks: the Assessment, a week at a time; each week's window comes off the stack grey, then the work washes it blue */
.cx-weeks { width: 320px; height: 186px; }
.cx-weeks .cx-ghost.g1 { left: 10px; right: 10px; top: -6px; }
.cx-weeks .cx-ghost.g2 { left: 20px; right: 20px; top: -12px; }
.cx-weeks .cx-win { position: absolute; inset: 0; transition: opacity .45s, transform .6s cubic-bezier(.2, .7, .3, 1); }
.cx-weeks .cx-win.pre { opacity: 0; transform: translateY(-14px) scale(.97); transition: none; }
.cx-weeks .cx-win.old { opacity: 0; transform: translateY(6px); transition: opacity .3s, transform .3s; }
.cx-weeks .cx-body { display: grid; padding: 14px 16px; }
.cx-weeks .cx-body > .sk.h { margin-bottom: 12px; }
.cx-lr { display: flex; align-items: center; gap: 10px; height: 27px; }
.cx-lr > span { display: grid; gap: 6px; }
.sq.av { width: 18px; height: 18px; border-radius: 50%; }
.cx-br { display: grid; grid-template-columns: 62px 1fr; align-items: center; height: 27px; }
.sq.bar { height: 9px; border-radius: 4px; }
.cx-bp { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.cx-bp > span { display: grid; gap: 7px; }
.cx-bp .sq { height: 42px; border-radius: 8px; }

/* build: three pieces built one after another on the foundation, each going live */
.cx-build { width: 324px; height: 196px; }
.cx-build canvas { left: -110px; top: 74px; width: calc(100% + 220px); height: 110px; }
.cx-mods { position: absolute; left: 0; top: 12px; display: flex; gap: 14px; }
.cx-mod { position: relative; z-index: 1; display: grid; align-content: start; gap: 8px; width: 98px; height: 118px; padding: 24px 12px 12px; border-radius: 12px; background: #fff; border: 1.5px solid var(--bd); box-shadow: 0 1px 2px rgba(0, 0, 0, .03), 0 14px 28px -18px rgba(0, 0, 0, .16); overflow: hidden; transition: border-color .4s, box-shadow .4s, background-color .4s; }
.cx-mod > * { transition: opacity .4s, background-color .6s; }
.cx-mod .sq { height: 26px; margin-top: 4px; }
.cx-mod .cx-badge { left: 10px; top: 0; height: 18px; border-radius: 0 0 6px 6px; font-size: 10px; }
.cx-mod:not(.live) .cx-badge { opacity: 0; }
.cx-mod.wait { background: rgba(255, 255, 255, .4); border-style: dashed; border-color: #d4d4d4; box-shadow: none; }
.cx-mod.wait > * { opacity: 0; }
.cx-mod::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 100%; background: linear-gradient(to top, var(--blue-12), rgba(255, 255, 255, 0)); transform: scaleY(0); transform-origin: bottom; opacity: 0; pointer-events: none; }
.cx-mod.up::after { animation: cx-rise 1.1s cubic-bezier(.2, .7, .3, 1); }
@keyframes cx-rise { 0% { transform: scaleY(0); opacity: 1; } 70% { transform: scaleY(1); opacity: 1; } 100% { transform: scaleY(1); opacity: 0; } }
.cx-build .cx-pill { left: 50%; translate: -50% 0; top: 152px; }

/* orbit: the systems turn round the operating system on their rings; each check pings, and new ones join the outer ring */
.cx-orbit { width: 196px; height: 112px; }
.cx-rings { position: absolute; left: 50%; top: 50%; width: 1120px; height: 1120px; translate: -50% -50%; overflow: visible; pointer-events: none; }
.cx-rings circle { fill: none; stroke: #e9e9e9; stroke-width: 1; }
.cx-orb { position: absolute; left: 50%; top: 50%; width: 0; height: 0; animation: cx-turn var(--s) linear infinite; }
.cx-orb.rev { animation-direction: reverse; }
@keyframes cx-turn { to { transform: rotate(360deg); } }
.cx-chip { position: absolute; left: -16px; top: -16px; display: grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 1.5px #e6e6e6, 0 4px 10px -6px rgba(0, 0, 0, .14); transform: rotate(var(--a)) translateX(var(--r)) rotate(calc(-1 * var(--a))); transition: box-shadow .4s, opacity .5s, scale .6s cubic-bezier(.3, 1.4, .5, 1); }
.cx-chip > .cx-px { animation: cx-turn var(--s) linear infinite reverse; }
.cx-orb.rev .cx-chip > .cx-px { animation-direction: normal; }
.cx-px { display: grid; grid-template-columns: repeat(3, 3px); gap: 2px; }
.cx-px i { width: 3px; height: 3px; border-radius: .5px; background: #bababa; transition: background-color .4s; }
.cx-px i.o { background: #eeeeee; }
.cx-chip.ping { box-shadow: 0 0 0 1.5px var(--blue-40), 0 4px 10px -6px rgba(0, 0, 0, .14); }
.cx-chip.ping .cx-px i:not(.o) { background: var(--blue); }
.cx-chip::after { content: ""; position: absolute; inset: 0; border-radius: 50%; box-shadow: 0 0 0 1.5px var(--blue); opacity: 0; }
.cx-chip.ping::after { animation: cx-ring 1.3s ease-out; }
@keyframes cx-ring { 0% { opacity: .6; transform: scale(1); } 100% { opacity: 0; transform: scale(2.3); } }
.cx-chip.add { opacity: 0; scale: .4; }
.cx-chip.add.in { opacity: 1; scale: 1; }
.cx-orbit canvas { left: -64px; top: -60px; width: calc(100% + 128px); height: calc(100% + 120px); }
.cx-hub { position: absolute; inset: 0; }
.cx-hub .cx-body { display: grid; gap: 9px; padding: 14px 16px; }
.cx-hub .sk { transition: background-color .5s; }
.cx-live { position: absolute; right: 14px; top: 12px; width: 7px; height: 7px; border-radius: 50%; background: var(--blue); box-shadow: 0 0 0 3px var(--blue-16); }

/* ---- AI assessment ---- */
/* cursors: you and Flairr in the same brief, each section selected and ticked, then agreed */
.cx-cursors { width: 330px; height: 204px; }
.cx-cursors .cx-win { position: absolute; left: 0; top: 0; width: 330px; }
.cx-cursors .cx-body { display: grid; gap: 12px; padding: 14px 16px 22px; }
.cx-sec { display: grid; gap: 7px; }
.cx-sh { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.cx-tick { background: transparent; box-shadow: inset 0 0 0 1.5px #dcdcdc; transition: background-color .3s, box-shadow .3s; }
.cx-tick svg { opacity: 0; transition: opacity .2s; }
.cx-tick.on { background: var(--blue); box-shadow: none; }
.cx-tick.on svg { opacity: 1; }
.sk.ln { position: relative; }
.sk.ln u { position: absolute; left: -3px; top: -4px; bottom: -4px; width: calc(100% + 6px); border-radius: 3px; background: rgba(20, 64, 217, .15); transform: scaleX(0); transform-origin: left; transition: transform .9s cubic-bezier(.45, 0, .2, 1), opacity .3s; }
.sk.ln.sel u { transform: none; }
.cx-cursors .cx-pill { left: 50%; translate: -50% 0; top: 170px; }

/* voice: an interview, live; the transcript writes itself and the line that matters lights up */
.cx-voice { width: 300px; height: 150px; }
.cx-mic { position: absolute; left: 0; top: 0; z-index: 2; width: 300px; display: flex; align-items: center; gap: 12px; height: 54px; padding: 0 18px 0 12px; border-radius: 27px; }
.cx-av { flex: none; width: 30px; height: 30px; border-radius: 50%; background: #efefef; }
.cx-wave { flex: 1; display: flex; align-items: center; gap: 2.5px; height: 24px; }
.cx-wave i { flex: none; width: 2.5px; border-radius: 2px; background: #cfcfcf; transition: background-color .3s; }
.cx-mic.hot .cx-wave i { background: var(--blue); }
.cx-time { flex: none; font: 400 12px/16px var(--mono); color: #9a9a9a; }
.cx-tr { position: absolute; left: 14px; right: 14px; top: 34px; display: grid; gap: 12px; padding: 36px 18px 20px; border-radius: 14px; }
.cx-tr .sk { transition: background-color .4s; }

/* heat: where the hours go, filled in week by week; the hottest row is framed: fix first */
.cx-heat { width: 300px; height: 176px; }
.cx-heat .cx-card { position: absolute; inset: 0; padding: 14px 16px; }
.cx-hh { display: flex; align-items: center; justify-content: space-between; height: 22px; margin-bottom: 12px; }
.cx-heat .cx-badge { position: static; }
.cx-heat:not(.found) .cx-badge { opacity: 0; }
.cx-grid { position: relative; display: grid; gap: 5px; }
.cx-hr { display: grid; grid-template-columns: 68px repeat(10, 16px); gap: 4px; align-items: center; height: 18px; }
.cx-hr i { height: 16px; border-radius: 4px; background: #f3f3f3; transition: background-color .5s; }
.cx-grid.lit .cx-hr i.l1 { background: var(--blue-12); }
.cx-grid.lit .cx-hr i.l2 { background: var(--blue-24); }
.cx-grid.lit .cx-hr i.l3 { background: var(--blue-40); }
.cx-heat.found .cx-hr.top i.l3 { background: var(--blue); }
.cx-frame { position: absolute; left: -6px; right: -6px; top: calc(var(--r) * 23px - 4px); height: 26px; border-radius: 7px; box-shadow: inset 0 0 0 1.5px var(--blue); transform: scaleX(0); transform-origin: left; transition: transform .6s cubic-bezier(.45, 0, .2, 1), opacity .3s; }
.cx-heat.found .cx-frame { transform: none; }

/* plan: the blueprint is written and costed; phase 1 lights up, then phase 2, and it is ready */
.cx-plan { width: 160px; height: 206px; }
.cx-plan canvas { left: -210px; top: 92px; width: calc(100% + 420px); height: 124px; }
.cx-plan .pg { left: 0; top: 0; width: 160px; height: 200px; }
.cx-plan .pg .cx-in { gap: 8px; padding: 20px 18px; }
.cx-gap { display: block; height: 6px; }
.cx-plan .pg.t1 .g1, .cx-plan .pg.done .g1 { background: var(--blue); }
.cx-plan .pg.t2 .g2, .cx-plan .pg.done .g2 { background: var(--blue-40); }
.cx-plan .cx-badge { left: 120px; top: 120px; }
.cx-plan .cx-pill { left: 50%; translate: -50% 0; top: 172px; }

/* ---- what we build ---- */
/* merge: the same business in three systems slides into one place */
.cx-merge { --dx: 168px; width: 480px; height: 150px; }
.cx-merge canvas { left: 30px; top: -70px; width: 420px; height: 290px; opacity: 0; transition: opacity .7s; }
.cx-merge.joined canvas { opacity: 1; transition-delay: .8s; }
.cx-src { position: absolute; left: 50%; top: 50%; width: 140px; --x: calc((var(--n) - 1) * var(--dx)); --y: 0px; translate: calc(-50% + var(--x)) calc(-50% + var(--y)); transition: translate .85s cubic-bezier(.65, 0, .35, 1), opacity .45s, scale .85s cubic-bezier(.65, 0, .35, 1); }
.cx-src .cx-body { display: grid; gap: 8px; padding: 12px 14px; }
.cx-merge.joined .cx-src { --x: 0px; --y: calc(-10px - var(--n) * 6px); scale: .9; opacity: 0; transition-delay: calc(var(--n) * 60ms); }
.cx-one { position: absolute; left: 50%; top: 50%; width: 244px; translate: -50% -50%; opacity: 0; scale: .96; transition: opacity .5s, scale .6s cubic-bezier(.2, .7, .3, 1); }
.cx-merge.joined .cx-one { opacity: 1; scale: 1; transition-delay: .45s; }
.cx-one .cx-body { display: grid; gap: 11px; padding: 14px 16px; }
.cx-one .cx-row { justify-content: flex-start; }
.cx-one .sq { width: 16px; height: 16px; border-radius: 5px; }
.cx-one .sk.n { margin-left: auto; }

/* chart: a question answered as a chart that draws itself; the crosshair reads the latest point */
.cx-chart { width: 320px; height: 196px; }
.cx-chart .cx-card { position: absolute; inset: 0; padding: 14px 16px 16px; }
.cx-ch { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.cx-plot { position: relative; display: block; height: 138px; border-radius: 8px; background: radial-gradient(circle, #e0e0e0 1px, transparent 1.3px) 0 0 / 12px 12px; }
.cx-plot svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
.cx-plot .line { fill: none; stroke: var(--blue); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; vector-effect: non-scaling-stroke; }
.cx-plot .area { fill: url(#cx-g); transition: opacity .5s; }
.cx-x { position: absolute; top: 0; bottom: 0; left: 0; width: 0; border-left: 1.5px dashed #cdcdcd; transform: translateX(var(--px, 0px)); transition: opacity .3s; }
.cx-dot { position: absolute; left: -5px; top: -5px; width: 10px; height: 10px; border-radius: 50%; background: #fff; box-shadow: inset 0 0 0 2px var(--blue), 0 0 0 4px var(--blue-12); transform: translate(var(--px, 0px), var(--py, 0px)); transition: opacity .3s; }
.cx-tip { position: absolute; left: 0; top: 0; display: grid; place-items: center; height: 24px; padding: 0 9px; border-radius: 7px; background: #fff; box-shadow: 0 0 0 1.5px var(--bd), 0 8px 16px -10px rgba(0, 0, 0, .2); font: 400 11.5px/1 var(--mono); color: var(--blue); white-space: pre; transform: translate(calc(var(--px, 0px) - 100% + 12px), calc(var(--py, 0px) - 36px)); transition: opacity .3s; }
.cx-chart.idle .cx-x, .cx-chart.idle .cx-dot, .cx-chart.idle .cx-tip, .cx-chart.idle .area, .cx-chart.notip .cx-tip { opacity: 0; }

/* board: the team's hub; a card is dragged to the next stage, and on to done */
.cx-board { width: 330px; height: 198px; }
.cx-board .cx-win { position: absolute; inset: 0; }
.cx-board .cx-body { height: 165px; padding: 12px; }
.cx-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; height: 100%; }
.cx-col { padding: 9px 8px; border-radius: 10px; background: #f7f7f7; }
.cx-colh { display: flex; align-items: center; justify-content: space-between; height: 12px; }
.cx-colh b { font: 400 10px/1 var(--mono); color: #a6a6a6; }
.cx-kc { position: absolute; left: 0; top: 0; z-index: 1; display: grid; align-content: center; gap: 6px; width: 80px; height: 34px; padding: 0 10px; border-radius: 8px; background: #fff; box-shadow: 0 0 0 1.5px #e8e8e8, 0 2px 4px -2px rgba(0, 0, 0, .06); transform: translate(var(--x), var(--y)) rotate(var(--rot, 0deg)) scale(var(--sc, 1)); transition: transform .5s cubic-bezier(.45, 0, .2, 1), box-shadow .3s; }
.cx-kc .sk { height: 4px; }
.cx-kc.lift { --rot: 2.5deg; --sc: 1.05; z-index: 3; box-shadow: 0 0 0 1.5px #e3e3e3, 0 14px 24px -12px rgba(0, 0, 0, .24); }
.cx-kc.drag { transition: transform .95s cubic-bezier(.45, 0, .15, 1), box-shadow .3s; }
.cx-kc.done .sk { background: var(--blue-24); }
.cx-kc.done .sk:first-child { background: var(--blue); }

/* belt: work moves along the belt through the gate and comes out handled; now and then it waits for a person to approve */
.cx-belt { width: 124px; height: 204px; }
.cx-track { position: absolute; left: -620px; right: -620px; top: 62px; height: 76px; border-block: 1.5px solid #ececec; pointer-events: none; }
.cx-it { position: absolute; z-index: 1; left: 39px; top: 71px; width: 46px; height: 58px; transform: translateX(var(--tx, 0px)); }
.cx-it .cx-pg { filter: drop-shadow(0 6px 10px rgba(0, 0, 0, .06)); }
.cx-it .cx-in { position: relative; display: grid; gap: 6px; padding: 12px 8px; }
.cx-it .sk { height: 3.5px; transition: background-color .3s; }
.cx-it.done .sk { background: var(--blue-24); }
.cx-it.done .sk.h { background: var(--blue); }
.cx-belt canvas { left: -92px; top: 0; width: 308px; height: 204px; }
.cx-gate { position: absolute; z-index: 2; left: 22px; top: 50px; width: 80px; height: 100px; border-radius: 14px; border: 1.5px solid var(--bd); background: rgba(255, 255, 255, .5); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); box-shadow: 0 18px 36px -20px rgba(0, 0, 0, .16); }
.cx-beam { position: absolute; left: 50%; top: 12px; bottom: 12px; width: 1.5px; margin-left: -.75px; border-radius: 1px; background: var(--blue); box-shadow: 0 0 10px 1px var(--blue-24); }
.cx-ask2 { position: absolute; z-index: 4; left: 50%; top: 8px; translate: -50% 0; display: inline-flex; align-items: center; gap: 10px; height: 32px; padding: 0 4px 0 12px; border-radius: 16px; background: #fff; border: 1.5px solid var(--bd); box-shadow: 0 10px 24px -14px rgba(0, 0, 0, .2); font: 400 12px/16px var(--mono); color: var(--ink); white-space: nowrap; opacity: 0; transform: translateY(5px); transition: opacity .3s, transform .35s cubic-bezier(.2, .7, .3, 1); }
.cx-belt.need .cx-ask2 { opacity: 1; transform: none; }
.cx-yes { display: grid; place-items: center; height: 22px; padding: 0 9px; border-radius: 11px; background: var(--blue); color: #fff; font: 450 11px/1 var(--sans); transition: transform .15s, background-color .2s; }
.cx-belt.press .cx-yes { transform: scale(.92); background: var(--blue-press); }
.cx-belt .cx-pill { left: 50%; translate: -50% 0; top: 170px; }

/* phones: pictures narrow to about 280px so they keep close to full size */
@media (max-width: 680px) {
  .cx-merge { --dx: 0px; width: 300px; height: 190px; }
  .cx-merge .cx-src { width: 132px; }
  .cx-merge:not(.joined) .cx-src:nth-of-type(1) { --x: -72px; --y: -44px; }
  .cx-merge:not(.joined) .cx-src:nth-of-type(2) { --x: 72px; --y: -44px; }
  .cx-merge:not(.joined) .cx-src:nth-of-type(3) { --x: 0px; --y: 44px; }
  .cx-merge canvas { left: -60px; top: -50px; }
  .cx-book { width: 262px; }
  .cx-book .cx-slots { left: 146px; top: 78px; z-index: 2; }
  .cx-ask { width: 320px; height: 60px; }
  .cx-field { height: 60px; padding-left: 22px; }
  .cx-q { font-size: 15.5px; }
}

/* ---------- Feature tab scenes: the stages (home section 01) ----------
   After the cell pictures' kit (.cx-card, .cx-pill, .cx-badge, .cx-cur),
   which these build on and partly override. */
/* ---- the tab scenes: the browser mockup is the app, in the live page's
   outline style (no white cards inside it); what feeds it sits outside.
   Fonts are set in px here: the stages are fixed sizes, scaled as a whole. ---- */
.hv, .hi, .hw { position: relative; }
.hv-box, .hi-box, .hw-box { --bd: #e5e5e5; --sk: #ececec; --sk2: #dfdfdf; position: absolute; left: 50%; top: 0; transform: translateX(-50%) scale(var(--k, 1)); transform-origin: top center; }
.vframe { max-width: 1062px; margin: 0 auto; }
.vframe .scan-frame, .hv-win.scan-frame { border-radius: 16px; padding: 0 6px 6px; -webkit-mask: none; mask: none; }
.vframe .scan-page, .hv-win .scan-page { border-radius: 10px; overflow: hidden; }
/* a page's top bar: what the page is, and its state */
.hv-bar { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: 52px; padding: 0 20px; box-shadow: inset 0 -1px 0 var(--line); }
.hv-title { font: 450 14px/20px var(--sans); color: var(--ink); white-space: nowrap; }
/* a status line inside a page: the pixel spinner, then a blue check */
.hc-st.cx-pill, .hw-st.cx-pill { height: 24px; padding: 0; gap: 8px; border: 0; background: none; box-shadow: none; font: 400 12px/16px var(--mono); color: var(--ink-56); }
.hi-box .cx-cur, .hw-box .cx-cur { z-index: 9; }
/* the site's phone rules shrink these shared labels; a stage keeps its own
   sizes, since it is scaled as a whole */
.hv-box .dm-label, .hv-box .dm-live, .hi-box .dm-label, .hi-box .scan-tag, .hw-box .dm-label { font-size: 11px; }

/* ---- one view: the browser is the dashboard; your systems sit outside it and feed it ---- */
.hv { height: 488px; }
.hv-box { width: 1048px; height: 488px; }
.hv canvas { left: 184px; top: 0; width: 680px; height: 488px; }
.hv-wires { position: absolute; z-index: 2; left: 0; top: 0; width: 1048px; height: 488px; overflow: visible; pointer-events: none; transition: opacity .6s .5s; }
.hv-wires path { fill: none; stroke: #d6d6d6; stroke-width: 1.2; stroke-dasharray: 3 4; }
.hv-wires .dot { fill: var(--blue); }
.hv-wires .port { fill: var(--bg); stroke: #cdcdcd; stroke-width: 1.2; transition: fill .3s, stroke .3s; }
.hv-wires .port.lit { fill: var(--blue); stroke: var(--blue); }
.hv-src { position: absolute; z-index: 3; top: calc(116px + var(--r) * 112px); display: flex; align-items: center; gap: 12px; width: 150px; height: 58px; padding: 0 12px; border-radius: 12px; transition: transform .8s cubic-bezier(.2, .7, .3, 1) calc(var(--r) * 90ms), opacity .5s calc(var(--r) * 90ms), border-color .4s; }
.hv-src.l { left: 20px; }
.hv-src.r { right: 20px; }
.hv-src .hx-l { display: grid; gap: 6px; }
.hv-src .cx-badge { position: static; flex: none; }
.hv-src.ping { border-color: var(--blue-40); }
.hv-src.ping .cx-badge { background: var(--blue); }
.hv-box.pre .hv-src.l { transform: translateX(-200px); opacity: 0; }
.hv-box.pre .hv-src.r { transform: translateX(200px); opacity: 0; }
.hv-box.pre .hv-wires { opacity: 0; }
.hv-win { position: absolute; z-index: 1; left: 250px; top: 38px; width: 548px; background: var(--bg); }
.hv-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 14px; }
.hv-tile, .hv-feed { border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-3); transition: box-shadow .4s, background-color .4s; }
.hv-tile { display: grid; align-content: start; gap: 4px; height: 96px; padding: 12px 16px; }
.hv-n { font: 600 26px/32px var(--sans); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; }
.hv-ts { font: 400 12px/16px var(--sans); color: var(--ink-56); transition: opacity .4s; }
.hv-tile.hit, .hv-feed.hit { box-shadow: inset 0 0 0 1px var(--blue-40); background: var(--blue-4); }
.hv-feed { grid-column: 1 / -1; display: grid; align-content: center; gap: 6px; height: 70px; padding: 0 16px; }
.hv-ln { display: flex; align-items: baseline; gap: 12px; height: 20px; font: 400 13px/20px var(--sans); color: var(--ink-72); white-space: nowrap; overflow: hidden; transition: opacity .4s; }
.hv-ln .dm-label { flex: none; color: var(--blue); }
.hv-msg { overflow: hidden; text-overflow: ellipsis; transition: color .4s; }
.hv-ln.new .hv-msg { color: var(--blue); }
/* while it fills for the first time, a tile's line waits for its system */
.hv-box.cold .hv-tile:not(.fed) .hv-ts, .hv-box.cold .hv-ln:not(.fed) { opacity: 0; }

/* ---- insights: the browser is a chat; ask, and the answer comes up in the thread ---- */
.hi { height: 440px; }
.hi-box { width: 1048px; height: 440px; }
.hc-side { position: absolute; left: 0; top: 0; bottom: 0; width: 200px; display: grid; align-content: start; gap: 2px; padding: 14px 12px; box-shadow: inset -1px 0 0 var(--line); }
.hc-new { display: flex; align-items: center; gap: 10px; height: 36px; padding: 0 8px; margin-bottom: 8px; }
.hc-new .sk-c { height: 20px; }
.hc-side .dm-label { padding: 12px 8px 6px; }
.hc-it { display: flex; align-items: center; height: 32px; padding: 0 8px; border-radius: 8px; }
.hc-it.on { background: var(--a4); }
.hc-main { position: absolute; left: 200px; right: 0; top: 0; bottom: 0; }
.hc-view { position: absolute; left: 0; right: 0; top: 0; bottom: 92px; overflow: hidden; -webkit-mask: linear-gradient(transparent, #000 40px); mask: linear-gradient(transparent, #000 40px); }
.hc-thread { position: absolute; left: 124px; top: 0; width: 600px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 30px; padding: 20px 0; transform: translateY(var(--y, 0px)); transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .4s; }
.hc-thread.snap { transition: none; }
.hc-thread.out { opacity: 0; }
.hc-msg, .hc-ans { display: grid; grid-template-columns: minmax(0, 1fr); gap: 14px; }
.hc-you { justify-self: end; max-width: 78%; padding: 10px 16px; border-radius: 18px 18px 6px 18px; background: var(--a4); font: 400 14px/20px var(--sans); color: var(--ink); }
.hc-skel { display: grid; justify-items: start; gap: 10px; }
.hc-skel .sk { max-width: 100%; }
.hc-tbl { display: grid; justify-self: stretch; margin: 6px 0; border-radius: 8px; box-shadow: inset 0 0 0 1px var(--line-3); }
.hc-tr { display: flex; justify-content: space-between; padding: 11px 14px; }
.hc-tr + .hc-tr { box-shadow: inset 0 1px 0 var(--line-3); }
/* the new question goes into the thread; the answer comes up under it */
.hc-now .hc-you { opacity: 0; transform: translateY(16px); transition: opacity .4s, transform .5s cubic-bezier(.2, .7, .3, 1); }
.hi-box.sent .hc-now .hc-you { opacity: 1; transform: none; }
.hc-st.cx-pill { position: static; justify-self: start; }
.hi-box:not(.sent) .hc-st { opacity: 0; }
.hc-body, .hc-src { transition: opacity .45s, transform .5s cubic-bezier(.2, .7, .3, 1); }
.hi-box:not(.told) .hc-body, .hi-box:not(.told) .hc-src { opacity: 0; transform: translateY(8px); }
.hc-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 24px; }
.hc-sum { display: grid; align-content: start; justify-items: start; gap: 8px; }
.hc-big { font: 600 34px/40px var(--sans); letter-spacing: -.03em; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.hc-d { padding: 4px 8px; border-radius: 6px; background: var(--blue-16); color: var(--blue); font: 400 12px/16px var(--mono); }
.hc-text { margin: 2px 0 0; min-height: 57px; font: 400 13px/19px var(--sans); color: var(--ink-72); }
.hc-chart { display: grid; gap: 12px; padding: 14px 16px 12px; border-radius: 12px; box-shadow: inset 0 0 0 1px var(--line-3); }
.hc-plot { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.hc-col { display: grid; justify-items: center; gap: 6px; }
.hc-val { min-height: 16px; font: 400 12px/16px var(--mono); color: var(--blue); white-space: pre; }
.hc-bars { position: relative; display: flex; align-items: flex-end; justify-content: center; gap: 6px; width: 100%; height: 84px; background: repeating-linear-gradient(to top, transparent 0 27px, var(--line) 27px 28px); }
.hc-bars::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line-3); }
.hc-bars i { width: 24px; height: calc(var(--h) * 100%); border-radius: 5px 5px 0 0; transform-origin: bottom; transition: transform .9s cubic-bezier(.22, 1, .36, 1), height .6s; }
.hc-bars i:nth-child(2) { transition-delay: .08s; }
.hc-bars .ly, .hc-key .ly { background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-3); }
.hc-bars .ty, .hc-key .ty { background: linear-gradient(var(--blue-16), var(--blue-16)) var(--bg); box-shadow: inset 0 0 0 1px var(--blue-40); }
.hc-bars .ty.lead { background: var(--blue); box-shadow: none; }
.hi-box:not(.grown) .hc-bars i { transform: scaleY(0); }
.hc-key { display: flex; flex-wrap: wrap; gap: 6px 16px; font: 400 11px/14px var(--mono); color: var(--ink-56); text-transform: uppercase; }
.hc-key span { display: inline-flex; align-items: center; gap: 6px; }
.hc-key b { font-weight: 400; }
.hc-key i { width: 10px; height: 10px; border-radius: 3px; }
.hc-src { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.hc-src .dm-label { margin-right: 4px; }
.hc-src .scan-tag { transition: opacity .3s, background-color .3s, color .3s; }
.hc-src .scan-tag.off { opacity: 0; }
/* the composer: the send button turns blue once there is something to send */
.hc-comp { position: absolute; left: 124px; bottom: 36px; width: 600px; display: flex; align-items: center; gap: 10px; height: 52px; padding: 0 8px 0 20px; border-radius: 26px; background: var(--bg); box-shadow: inset 0 0 0 1px var(--line-3); }
.hc-q { flex: 1; min-width: 0; font: 400 14px/20px var(--sans); color: var(--ink); white-space: nowrap; overflow: hidden; }
.hc-q:not(.typing):empty::before { content: attr(data-ph); color: var(--ink-40); }
.hc-q.typing::after { content: ""; display: inline-block; width: 1.5px; height: 16px; margin-left: 1px; vertical-align: -3px; background: var(--blue); }
.hc-send { display: grid; place-items: center; flex: none; width: 36px; height: 36px; border-radius: 50%; box-shadow: inset 0 0 0 1px var(--line-3); transition: background-color .3s, box-shadow .3s, transform .15s; }
.hc-send svg { width: 16px; height: 16px; fill: none; stroke: var(--ink-40); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: stroke .3s; }
.hc-comp.has .hc-send { background: var(--blue); box-shadow: none; }
.hc-comp.has .hc-send svg { stroke: #fff; }
.hc-comp.press .hc-send { transform: scale(.9); }
.hc-note { position: absolute; left: 50%; bottom: 14px; translate: -50% 0; }

/* ---- work done: the browser is the follow-ups page; a deck written, approved, sent ---- */
.hw { height: 440px; }
.hw-box { width: 1048px; height: 440px; }
.hw-card.db-card { position: absolute; left: 324px; top: 136px; width: 400px; padding: 16px 18px; border-radius: 12px; background: var(--bg); transform-origin: 50% 100%; transition: transform .75s cubic-bezier(.45, 0, .2, 1), opacity .5s, box-shadow .35s; }
.hw-card[data-slot="0"] { z-index: 4; }
.hw-card[data-slot="1"] { z-index: 3; transform: translate(-16px, -14px) rotate(-3deg) scale(.97); }
.hw-card[data-slot="2"] { z-index: 2; transform: translate(16px, -24px) rotate(2.5deg) scale(.94); }
.hw-card[data-slot="sent"] { z-index: 5; transform: translate(380px, 16px) rotate(6deg) scale(.36); opacity: 0; transition: transform .8s cubic-bezier(.45, 0, .2, 1), opacity .35s .45s; }
.hw-card[data-slot="in"] { transform: translate(-420px, 10px) rotate(-5deg) scale(.9); opacity: 0; transition: none; }
.hw-card > * { transition: opacity .4s; }
.hw-card:not([data-slot="0"]) > * { opacity: .5; }
.hw-card .db-to { align-items: center; font: 450 13px/20px var(--sans); }
.hw-q { margin-left: auto; }
.hw-card .db-lines { gap: 8px; margin: 14px 0 16px; }
.hw-card.blank .db-lines i::after { transform: scaleX(0); }
.hw-out { position: absolute; left: 850px; top: 184px; display: grid; justify-items: center; align-content: center; gap: 4px; width: 140px; height: 100px; border-radius: 12px; border: 1px dashed #d4d4d4; }
.hw-oc { font: 600 26px/30px var(--sans); color: var(--ink); font-variant-numeric: tabular-nums; transition: color .4s; }
.hw-out.bump .hw-oc { animation: cx-pop .35s cubic-bezier(.3, 1.5, .5, 1); color: var(--blue); }
.hw-st.cx-pill { left: 50%; translate: -50% 0; top: 372px; }

/* ---- phones (js adds .compact): each stage keeps the browser and drops what sits outside it ---- */
.compact.hv-box { width: 400px; height: 420px; }
.compact.hv-box > .hv-src, .compact.hv-box > .hv-wires, .compact.hv-box > canvas { display: none; }
.compact .hv-win { left: 0; top: 4px; width: 400px; }
.compact.hi-box { width: 400px; height: 480px; }
.compact .hc-side, .compact .hc-src .dm-label { display: none; }
.compact .hc-main { left: 0; }
.compact .hc-thread, .compact .hc-comp { left: 16px; width: 368px; }
.compact .hc-body { grid-template-columns: 148px minmax(0, 1fr); gap: 16px; }
.compact .hc-big { font-size: 26px; line-height: 32px; }
.compact .hc-bars i { width: 16px; }
.compact.hw-box { width: 440px; height: 400px; }
.compact .hw-card.db-card { left: 20px; top: 104px; }
.compact .hw-out, .compact .hv-bar > .dm-label { display: none; }
.compact .hw-st.cx-pill { top: 336px; }