/* ============================
   Product feature pages (/auth, …)
   Builds on home.css: container, buttons, nav and the feature demos
   ============================ */

/* ---------- Hero: two-column intro, then the feature's backdrop and demo on the page container ---------- */
.fp-hero {
  padding-top: calc(var(--hp-nav-height) + clamp(88px, 12vw, 240px));
}
/* Description on the left under the title, buttons on the right level with it */
.fp-hero-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
  margin-top: clamp(24px, 2.4vw, 40px);
}
.fp-hero-eyebrow {
  margin: 0 0 20px;
  font-size: 16px;
  line-height: 1.4;
  color: var(--hp-text-muted);
}
.fp-hero-title {
  max-width: 9em;
  margin: 0;
  font-size: clamp(48px, 5.8vw, 80px);
  font-weight: 500;
  line-height: 1.02;
  letter-spacing: -0.03em;
  color: var(--text-primary);
  text-wrap: balance;
}
.fp-hero-title--wide { max-width: 14em; }
.fp-hero-subtitle {
  max-width: 30em;
  margin: 0;
  font-size: 20px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  color: var(--hp-text-muted);
  text-wrap: pretty;
}
.fp-hero-actions {
  display: flex;
  flex-shrink: 0;
  gap: 12px;
}

/* The inline background is a tiny blurred copy of the hero image, shown until the image loads */
.fp-hero-visual {
  position: relative;
  margin-top: clamp(56px, 7vw, 120px);
  aspect-ratio: 16 / 9;
  min-height: 520px;
  overflow: hidden;
  background: #1a1d2b center / cover no-repeat;
}
.fp-hero-visual > picture > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Hero bento: one frosted frame with the primary Auth demo on the left and a list of sessions on the
   right; the row the demo is working on is highlighted and mirrors its status. Everything is sized
   off --s (set in feature-page.js), the same scale home.js gives the demo, so gaps, radii, and type
   line up across every cell. The demo cell runs 10px past its area on each side because home.js
   insets the scene by 10px. */
.fp-bento {
  --s: 1;
  --g: calc(10px * var(--s));
  /* Row content is a 30px logo in a (368 - 40) / 5 = 65.6px row, so 17.8px clears it on every side */
  --cell-pad: 17.8px;
  --ok: #4CB782;
  --warn: #F2C94C;
  --panel: #0F1011;
  --fg: #F7F8F8;
  --fg-2: #8A8F98;
  --fg-3: #62666D;
  position: absolute;
  top: 50%;
  left: 50%;
  display: grid;
  grid-template-columns: calc(420px * var(--s)) calc(320px * var(--s));
  grid-template-rows: calc(368px * var(--s));
  gap: var(--g);
  padding: var(--g);
  border-radius: calc(18px * var(--s));
  background: rgba(255, 255, 255, 0.16);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(12px);
  color: var(--fg);
  -webkit-font-smoothing: antialiased;
  transform: translate(-50%, -50%);
  opacity: 0;
  animation: heroFadeIn 0.8s ease 0.3s forwards;
}
.fp-bento p { margin: 0; }
.fp-bento-col { display: grid; grid-template-rows: repeat(5, minmax(0, 1fr)); gap: var(--g); min-height: 0; }
.fp-bento-main { position: relative; margin: -10px; }
/* Beside the list, the demo is just the sign-in: the site and its status show on the highlighted row,
   so the demo's own top row is hidden (it stays in the DOM, where the list reads it from) */
@media (min-width: 901px) {
  .fp-bento-main .hp-auth { grid-template-rows: minmax(0, 1fr); }
  .fp-bento-main .hp-auth-source { display: none; }
}
/* Panels share the demo's panel look */
.fp-tile {
  position: relative;
  display: flex;
  align-items: center;
  min-width: 0;
  overflow: hidden;
  padding: 0 calc(var(--cell-pad) * var(--s));
  border-radius: calc(8px * var(--s));
  background: var(--panel);
}
/* Cell contents are laid out at 1x and scaled, like the demo scene */
.fp-tile-body {
  display: flex;
  flex: none;
  align-items: center;
  width: calc(100% / var(--s));
  transform: scale(var(--s));
  transform-origin: left center;
}

.fp-tile { transition: background-color 0.4s ease, box-shadow 0.4s ease; }
/* Rows other than the one in the demo sit back */
.fp-tile-body { gap: 10px; opacity: 0.55; transition: opacity 0.4s ease; }
.fp-tile.is-active {
  background: #1A1D21;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3), 0 0 0 calc(3px * var(--s)) rgba(255, 255, 255, 0.07);
}
.fp-tile.is-active .fp-tile-body { opacity: 1; }
.fp-tile .hp-auth-logo { width: 30px; height: 30px; }
.fp-tile .hp-auth-domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Phones: just the primary demo in the frame */
@media (max-width: 900px) {
  .fp-bento { grid-template-columns: calc(360px * var(--s)); }
  .fp-bento-col { display: none; }
}

.fp-hero-eyebrow,
.fp-hero-title,
.fp-hero-subtitle,
.fp-hero-actions {
  opacity: 0;
  animation: heroBlurIn 0.6s ease forwards;
}
.fp-hero-title { animation-delay: 0.05s; }
.fp-hero-subtitle { animation-delay: 0.15s; }
.fp-hero-actions { animation-delay: 0.25s; }

/* Agents hero: one run end to end. The task you define on the left, the live browser the agent works
   in (with its timeline) in the middle, and the output on the right. feature-page.js sets the scene to 1060×520 (400×620 on
   phones, where it's just the task and the browser) and stretches it to the glass. */
.fp-run-glass {
  inset: 10% 6%;
  border-radius: 18px;
  opacity: 0;
  animation: heroFadeIn 0.8s ease 0.3s forwards;
}
.fp-run {
  /* The homepage console's colours, for its timeline (home.css .hpc-tl-*) */
  --hpc-fg: #F6F6F6;
  --hpc-muted-fg: rgba(246, 246, 246, 0.7);
  --hpc-yellow: #FDFAC3;
  grid-template-columns: 280px minmax(0, 1fr) 320px;
  grid-template-rows: minmax(0, 1fr);
}
.fp-run-task,
.fp-run-out {
  display: flex;
  flex-direction: column;
  min-width: 0;
  min-height: 0;
  padding: 16px;
  border-radius: 8px;
  background: var(--panel);
}
.fp-run-name { font-size: 13px; font-weight: 500; }
.fp-run-label { margin-top: 18px; font-size: 11px; color: var(--fg-2); }
.fp-run-prompt {
  min-height: 70px;
  margin-top: 6px;
  padding: 9px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 11.5px;
  line-height: 17px;
  transition: box-shadow 0.25s ease;
}
.fp-run-prompt.is-focus { box-shadow: inset 0 0 0 1px rgba(247, 248, 248, 0.45); }
.fp-run-prompt .hp-auth-caret { display: inline-block; vertical-align: -2px; }
.fp-run-prompt.is-focus .hp-auth-caret { animation: hpAuthBlink 1s steps(1) infinite; }
/* Schema and output as JSON, with line numbers and the timeline pills' colours */
.fp-json {
  margin-top: 6px;
  padding: 8px 0;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
  font: 11px/18px var(--mono);
  color: var(--fg-3);
  counter-reset: fp-json;
}
.fp-json > div {
  display: flex;
  overflow: hidden;
  padding-right: 10px;
  white-space: pre;
  transition: opacity 0.3s ease;
}
.fp-json > div::before {
  counter-increment: fp-json;
  content: counter(fp-json);
  flex: none;
  width: 18px;
  margin-right: 12px;
  text-align: right;
  color: rgba(255, 255, 255, 0.18);
}
.fp-json .k { color: #8EB4E8; }
.fp-json .s { color: #9EE0C0; }
.fp-json .n { color: #FDFAC3; }
.fp-json b { font-weight: 400; transition: color 0.25s ease; }
.fp-json-field { opacity: 0.25; }
.fp-json-field.is-on { opacity: 1; }
.fp-run-out .fp-json { margin-top: 14px; }

.fp-run-on {
  display: flex;
  flex-direction: column;
  gap: 9px;
  margin: 8px 0 16px;
  font-size: 11.5px;
  opacity: 0.25;
  transition: opacity 0.3s ease;
}
.fp-run-on.is-on { opacity: 1; }
.fp-run-on > div { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.fp-run-on dt { color: var(--fg-3); }
.fp-run-on dd { display: flex; align-items: center; gap: 6px; min-width: 0; margin: 0; }
.fp-run-file {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 8px;
  padding: 8px 10px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.05);
  font-size: 11px;
  opacity: 0.25;
  transition: opacity 0.3s ease;
}
.fp-run-file.is-on { opacity: 1; }
.fp-run-file > span:nth-child(2) { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-run-file em { font-style: normal; color: var(--fg-3); }

.fp-run .hp-auth-logo { width: 16px; height: 16px; border-radius: 4px; font-size: 9px; }
.fp-run .hp-agent-site .hp-auth-logo { width: 15px; height: 15px; border-radius: 3px; font-size: 8px; }
.fp-run-task .hp-auth-btn { flex: none; margin-top: auto; transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s ease, opacity 0.3s ease; }
.fp-run-task .hp-auth-btn.is-sent { opacity: 0.35; }

.fp-run .hp-agent-boot.is-idle .hp-auth-spin { display: none; }
/* The run's timeline under the browser, a tighter version of the homepage console's */
.fp-run-tl {
  flex: none;
  position: relative;
  height: 164px;
  padding: 6px 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.fp-run-tl .hpc-tl-list { grid-template-columns: 12px 50px minmax(0, 1fr) auto; column-gap: 10px; font-size: 11px; }
.fp-run-tl .hpc-tl-row { padding: 5px 0; }
.fp-run-tl .hpc-tl-icon svg { width: 12px; height: 12px; }
.fp-run-tl .hpc-tl-working .hpc-spin { width: 11px; height: 11px; }
.fp-run-tl .hpc-tl-time { font-size: 10px; }
.fp-run-tl-empty {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  font-size: 11px;
  color: var(--fg-3);
}

/* Phones: the task (just its prompt) over the browser */
.fp-run.is-narrow { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.fp-run.is-narrow .fp-run-block,
.fp-run.is-narrow .fp-run-out { display: none; }
.fp-run.is-narrow .fp-run-task .hp-auth-btn { margin-top: 14px; }
.fp-run.is-narrow .fp-run-tl { height: 128px; }

/* Tasks & Automation hero: a workflow run in the Deck Console, built from the homepage console's pieces
   (home.css .hpc-*). feature-page.js sizes the scene to at least 1240×620 (560×760 on phones, where the
   sidebar goes and the selected step sits under the waterfall) and stretches it to the glass. The
   Observability hero uses the same glass and scene. */
.fp-auto-glass,
.fp-obs-glass {
  inset: 10% 6%;
  border-radius: 18px;
  opacity: 0;
  animation: heroFadeIn 0.8s ease 0.3s forwards;
}
.hpc.fp-wf,
.hpc.fp-obs,
.hpc.fp-met {
  top: 10px;
  left: 10px;
  width: var(--w, 1240px);
  height: var(--h, 620px);
  overflow: hidden;
  border-radius: 10px;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
  transform: scale(var(--s, 1));
  pointer-events: none;
  transition: opacity 0.35s ease;
}
.hpc:is(.fp-wf, .fp-obs, .fp-met).is-out { opacity: 0; }
.fp-wf-view { flex: 1; display: flex; flex-direction: column; min-height: 0; padding: 14px 40px 0; }
.fp-wf-view .hpc-crumbs { margin-bottom: 6px; }
.fp-wf-runid { margin-left: auto; color: var(--hpc-fg); }
.fp-wf-split { grid-template-columns: 56fr 44fr; }

/* Waterfall: a minimap of every bar, a time ruler, then one row per task with its bar placed by start
   and grown by duration, against an axis that spans the run so far. As in the Console, a running bar is
   blue and a finished one green, a step that hasn't started is just its dimmed name, and a line marks
   now. A bar is never narrower than its label and duration, so short steps keep their text inside the
   box. Rows of the selected step are highlighted across the pane. */
.fp-wf-pane { overflow: hidden; border-right: 1px solid var(--hpc-border); }
.fp-wf-track { position: relative; flex: none; }
.fp-wf-lane { position: relative; height: 100%; margin: 0 20px; }
.fp-wf-mini { height: 52px; border-bottom: 1px solid var(--hpc-border); background: rgba(255, 255, 255, 0.015); }
.fp-wf-mini i { position: absolute; left: 0; width: 0; height: 2px; border-radius: 1px; background: rgba(246, 246, 246, 0.32); }
.fp-wf-ruler {
  height: 30px;
  border-bottom: 1px solid var(--hpc-border);
  font-size: 10.5px;
  color: var(--hpc-muted-fg);
  font-variant-numeric: tabular-nums;
}
.fp-wf-ruler span { position: absolute; top: 9px; white-space: nowrap; }
.fp-wf-ruler span.is-end { transform: translateX(-100%); }
.fp-wf-rows { position: relative; padding: 4px 0 8px; }
.fp-wf-grid { position: absolute; inset: 0 20px; pointer-events: none; }
.fp-wf-grid i { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255, 255, 255, 0.04); }
.fp-wf-now {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(20px + (100% - 40px) * var(--x, 0));
  width: 1px;
  background: rgba(142, 164, 214, 0.6);
  pointer-events: none;
  transition: opacity 0.3s ease;
}
.fp-wf-now.is-off { opacity: 0; }

.fp-wf-row { position: relative; height: 26px; transition: background-color 0.25s ease, height 0.35s cubic-bezier(0.22, 1, 0.36, 1); }
/* Items appear when their for_each starts and fans out */
.fp-wf-row[data-kind="item"] { height: 0; overflow: visible clip; }
.fp-wf-rows.is-fanned .fp-wf-row[data-kind="item"] { height: 26px; }
.fp-wf-row.is-sel { background: rgba(255, 255, 255, 0.045); }
.fp-wf-row[data-state="run"] { --bg: rgba(84, 125, 197, 0.26); --bd: rgba(120, 160, 230, 0.6); --sel: rgba(150, 185, 245, 0.95); --tx: #C9D8F2; }
.fp-wf-row[data-state="ok"] { --bg: rgba(40, 102, 80, 0.32); --bd: rgba(63, 182, 139, 0.5); --sel: rgba(110, 215, 170, 0.9); --tx: #A7DCC3; }
.fp-wf-row[data-kind="root"] { --bg: rgba(84, 125, 197, 0.08); --bd: rgba(84, 125, 197, 0.45); --sel: rgba(84, 125, 197, 0.45); --tx: #8EB4E8; }
.fp-wf-bar {
  position: absolute;
  top: 3px;
  bottom: 3px;
  display: flex;
  width: 0;
  min-width: max-content;
  border-radius: 4px;
  background: var(--bg, none);
  box-shadow: inset 0 0 0 1px var(--bd, transparent);
  color: var(--tx, rgba(246, 246, 246, 0.36));
  white-space: nowrap;
  transition: background-color 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}
.fp-wf-row.is-sel .fp-wf-bar { box-shadow: inset 0 0 0 1px var(--sel, transparent); }
.fp-wf-in { display: flex; flex: 1; align-items: center; gap: 6px; padding: 0 8px; }
.fp-wf-bar code { display: flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 11px; }
.hpc .fp-wf-bar svg { width: 11px; height: 11px; }
.fp-wf-bar em {
  display: inline-flex;
  align-items: center;
  height: 15px;
  padding: 0 5px;
  border-radius: 3px;
  box-shadow: inset 0 0 0 1px var(--bd, rgba(255, 255, 255, 0.12));
  font-family: var(--mono);
  font-size: 10px;
  font-style: normal;
  font-variant-numeric: tabular-nums;
}
.fp-wf-dur { margin-left: auto; padding-left: 8px; font-family: var(--mono); font-size: 10.5px; font-variant-numeric: tabular-nums; opacity: 0.75; }
.fp-wf-row:not([data-state]) :is(.fp-wf-dur, em) { display: none; }

/* Selected step: its facts, the Formatted/Output tabs, and its output as cards (or that there's none yet) */
.fp-wf-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 16px 24px 0; }
.fp-wf-title { font-size: 13px; font-weight: 500; }
.fp-wf-fn { margin-top: 2px; font-size: 11px; color: var(--hpc-muted-fg); }
.fp-wf-facts { display: flex; gap: 28px; padding: 14px 24px; }
.fp-wf-facts .hpc-strip-item { flex: none; }
.fp-wf-out { flex: 1; min-height: 0; overflow: hidden; padding: 16px 24px; }
.fp-wf-label { color: var(--hpc-muted-fg); }
.fp-wf-card { margin-top: 10px; padding: 6px 12px 0; border: 1px solid var(--hpc-border); border-radius: 10px; }
.fp-wf-card .hpc-kv-card { padding: 0; border-radius: 0; background: none; }
.fp-wf-num { display: block; padding: 4px 4px 0; font-size: 10.5px; color: rgba(246, 246, 246, 0.45); }
.fp-wf-yes,
.fp-wf-no { display: inline-flex; align-items: center; gap: 5px; }
.hpc .fp-wf-yes svg,
.hpc .fp-wf-no svg { width: 12px; height: 12px; }
.fp-wf-yes svg { color: #3FB68B; }
.fp-wf-no { color: var(--hpc-muted-fg); }
.fp-wf-empty { padding-top: 12px; text-align: center; color: var(--hpc-muted-fg); }

/* Phones: no sidebar, a shorter strip, and the selected step under the waterfall */
.hpc.fp-wf.is-narrow { grid-template-columns: minmax(0, 1fr); }
.fp-wf.is-narrow :is(.hpc-side, .fp-wf-runid, .fp-wf-facts, [data-wide]) { display: none; }
.fp-wf.is-narrow .hpc-strip { gap: 28px; }
.fp-wf.is-narrow .fp-wf-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
.fp-wf.is-narrow .fp-wf-pane { border-right: 0; border-bottom: 1px solid var(--hpc-border); }

/* Observability hero: a finished run's page in the Deck Console. The Screenshots tab on the left: a
   strip of every screenshot (laid out like the homepage's, home.css .hp-obs-shot) with the selected one
   ringed, that screenshot large, and its details. The Formatted output on the right, where the row the
   agent read and the file it downloaded light up on the screenshots they came from. */
.fp-obs .fp-wf-view { padding: 14px 20px 0 32px; }
.fp-obs .hpc-strip { gap: 32px; margin: 6px -20px 0 -32px; padding: 10px 20px 14px 32px; }
.fp-obs-split { grid-template-columns: 54fr 46fr; margin: 0 -20px 0 -32px; }
.fp-obs-shots .hpc-utabs { padding-left: 32px; }
.fp-obs-out .hpc-utabs { padding-right: 20px; }
.fp-obs-shots { border-right: 1px solid var(--hpc-border); }
.fp-obs-source { display: inline-flex; align-items: center; gap: 7px; }
.fp-obs .hp-auth-logo { width: 16px; height: 16px; border-radius: 4px; font-size: 9px; }
.fp-obs .hp-obs-input.is-empty { color: #9AA1AA; }

.fp-obs-strip { display: flex; flex: none; align-items: center; gap: 6px; padding: 10px 24px 10px 32px; border-bottom: 1px solid var(--hpc-border); }
.fp-obs .hp-obs-thumb { border-radius: 3px; opacity: 0.45; }
.fp-obs .hp-obs-thumb.is-on { opacity: 1; box-shadow: 0 0 0 1.5px var(--hpc-fg); }
.fp-obs-more {
  display: grid;
  flex: none;
  place-items: center;
  width: 22px;
  height: 22px;
  margin-left: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  color: var(--hpc-muted-fg);
}
.hpc .fp-obs-more svg { width: 12px; height: 12px; }
.fp-obs-stage { overflow: hidden; }
.fp-obs-meta { flex: none; margin: 0; padding: 10px 24px 14px 32px; border-top: 1px solid var(--hpc-border); }
.fp-obs-meta > div { display: flex; align-items: center; height: 28px; }
.fp-obs-meta dt { flex: none; width: 96px; color: var(--hpc-muted-fg); }
.fp-obs-meta dd { display: flex; align-items: center; gap: 7px; min-width: 0; margin: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-variant-numeric: tabular-nums; }
.fp-obs-dot { flex: none; width: 7px; height: 7px; border-radius: 50%; background: var(--hpc-green); }

.fp-obs-body { flex: 1; min-height: 0; overflow: hidden; padding: 16px 20px 16px 24px; }
.fp-obs-seg { display: inline-flex; gap: 2px; padding: 2px; border-radius: 8px; background: rgba(255, 255, 255, 0.04); }
.fp-obs-seg span { padding: 4px 12px; border-radius: 6px; color: var(--hpc-muted-fg); }
.fp-obs-seg .is-on { background: rgba(255, 255, 255, 0.09); color: var(--hpc-fg); }
.fp-obs-label { margin: 18px 0 8px; color: var(--hpc-muted-fg); }
.fp-obs-table { overflow: hidden; border: 1px solid var(--hpc-border); border-radius: 10px; }
.fp-obs-tr {
  display: grid;
  grid-template-columns: 1.2fr 1fr 1.2fr 0.8fr;
  align-items: center;
  gap: 12px;
  height: 36px;
  padding: 0 14px;
  font-variant-numeric: tabular-nums;
  transition: background-color 0.3s ease;
}
.fp-obs-tr + .fp-obs-tr { border-top: 1px solid var(--hpc-border); }
.fp-obs-tr > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fp-obs-th { height: 34px; color: var(--hpc-muted-fg); }
.fp-obs-tr.is-on,
.fp-obs-file.is-on { background: rgba(40, 102, 80, 0.2); }
.fp-obs-file {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 40px;
  padding: 0 14px;
  border: 1px solid var(--hpc-border);
  border-radius: 10px;
  transition: background-color 0.3s ease;
}
.fp-obs-file-ico { display: grid; flex: none; place-items: center; color: var(--hpc-muted-fg); }
.hpc .fp-obs-file-ico svg { width: 14px; height: 14px; }
.fp-obs-file em { margin-left: auto; font-style: normal; color: var(--hpc-muted-fg); }

/* Phones: no sidebar, a shorter strip, the screenshots over the output, and one less output column */
.hpc.fp-obs.is-narrow { grid-template-columns: minmax(0, 1fr); }
.fp-obs.is-narrow :is(.hpc-side, .fp-wf-runid, [data-wide]) { display: none; }
.fp-obs.is-narrow .hpc-strip { gap: 28px; }
/* The output keeps a fixed height (three rows) and the screenshots take the rest */
.fp-obs.is-narrow .fp-obs-split { grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 240px; }
.fp-obs.is-narrow .fp-obs-label { margin-top: 0; }
.fp-obs.is-narrow [data-out="3"] { display: none; }
.fp-obs.is-narrow .fp-obs-shots { border-right: 0; border-bottom: 1px solid var(--hpc-border); }
.fp-obs.is-narrow .fp-obs-tr { grid-template-columns: 1.2fr 1fr 1.2fr; }
.fp-obs.is-narrow .fp-obs-meta { padding: 6px 20px 8px 32px; }
.fp-obs.is-narrow .fp-obs-strip { padding-right: 20px; }
.fp-obs.is-narrow .fp-obs-out :is(.hpc-utabs, .fp-obs-body) { padding-left: 32px; }

/* Metrics: the Console's Success Rate page in a wide frame over art, sized like the heroes (1240×620,
   560×760 on phones). The chart is drawn in a 1000×200 box and stretched to its area; the hover guide,
   dot and tooltip sit over it in fractions of that area (--hx, --hy), set by feature-page.js. */
.fp-met-visual { margin-top: clamp(56px, 6.5vw, 104px); }
.fp-met-glass { inset: 10% 6%; border-radius: 18px; }
.fp-met-page { padding: 22px 20px 0 32px; }
.fp-met .hpc-range { display: inline-flex; align-items: center; }
.fp-met-view { display: flex; flex-direction: column; gap: 12px; min-height: 0; margin-top: 22px; }
.fp-met-view.is-on { animation: hpcViewIn 0.25s ease; }
.fp-met-card { flex: none; padding: 6px 20px 14px 6px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; background: rgba(246, 246, 246, 0.02); }
.fp-met-tabs { display: flex; gap: 6px; }
.fp-met-tabs > div { display: flex; flex-direction: column; gap: 6px; padding: 10px 14px; border-radius: 8px; color: var(--hpc-muted-fg); }
.fp-met-tabs > div.is-on { background: rgba(255, 255, 255, 0.05); }
.fp-met-tabs b { display: flex; align-items: baseline; gap: 8px; font-size: 20px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--hpc-fg); }
.fp-met-tabs > div:not(.is-on) b { color: var(--hpc-muted-fg); }
.fp-met-delta { display: inline-flex; align-items: center; gap: 2px; font-size: 10.5px; font-style: normal; font-weight: 400; }
.fp-met-delta.is-up { color: #3FB68B; }
.fp-met-delta.is-down { color: oklch(0.7 0.17 25); }
.hpc .fp-met-delta svg { width: 10px; height: 10px; }
.fp-met-plot { display: flex; gap: 10px; height: 190px; margin: 14px 0 0 14px; }
.fp-met-area { position: relative; flex: 1; min-width: 0; }
.fp-met-area svg { display: block; width: 100%; height: 100%; overflow: visible; }
.fp-met-area line { stroke: rgba(255, 255, 255, 0.05); }
.fp-met-fill { opacity: 0; transition: opacity 0.6s ease 0.5s; }
.fp-met-line { fill: none; stroke: #3FB68B; stroke-width: 2; stroke-dasharray: 1; stroke-dashoffset: 1; }
.fp-met-view.is-on .fp-met-fill { opacity: 1; }
.fp-met-view.is-on .fp-met-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.1s cubic-bezier(0.45, 0, 0.25, 1); }
.fp-met-y { display: flex; flex: none; flex-direction: column; justify-content: space-between; margin: -6px 0; font-size: 9.5px; color: rgba(246, 246, 246, 0.4); font-variant-numeric: tabular-nums; }
.fp-met-x { display: flex; justify-content: space-between; margin: 10px 42px 0 14px; font-size: 9.5px; color: rgba(246, 246, 246, 0.4); }
.fp-met-guide,
.fp-met-dot,
.fp-met-tip { position: absolute; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; }
.fp-met-area.is-hover :is(.fp-met-guide, .fp-met-dot, .fp-met-tip) { opacity: 1; }
.fp-met-guide { top: 0; bottom: 0; left: calc(var(--hx, 0) * 100%); width: 1px; background: rgba(255, 255, 255, 0.18); }
.fp-met-dot {
  top: calc(var(--hy, 0) * 100%);
  left: calc(var(--hx, 0) * 100%);
  width: 9px;
  height: 9px;
  margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: #3FB68B;
  box-shadow: 0 0 0 3px rgba(63, 182, 139, 0.25);
}
.fp-met-tip {
  top: calc(var(--hy, 0) * 100% - 64px);
  left: calc(var(--hx, 0) * 100% + 14px);
  z-index: 2;
  min-width: 172px;
  padding: 8px 10px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  background: #1A1C1B;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
  font-size: 10.5px;
}
.fp-met-tip.is-left { transform: translateX(calc(-100% - 28px)); }
.fp-met-tip.is-below { top: calc(var(--hy, 0) * 100% + 14px); }
.fp-met-tip p { margin-bottom: 6px; color: var(--hpc-muted-fg); }
.fp-met-tip div { display: flex; align-items: center; gap: 6px; }
.fp-met-tip i { width: 6px; height: 6px; border-radius: 50%; background: #3FB68B; }
.fp-met-tip b { margin-left: auto; font-weight: 500; font-variant-numeric: tabular-nums; }

.fp-met-ov { margin-top: 0; }
.fp-met-ov .hpc-card { transition: border-color 0.2s ease; }
.fp-met-ov .hpc-card.is-hover { border-color: rgba(255, 255, 255, 0.14); }
.fp-met-ov .hpc-card.is-hover .hpc-link { color: var(--hpc-fg); }
.fp-met-ov .hpc-card-value { margin: 12px 0 14px; }
.hpc .fp-met-ov svg.hpc-chart { height: 104px; overflow: visible; }
.fp-met-ov line { stroke: rgba(255, 255, 255, 0.05); }
.fp-met-ov .fp-met-line { stroke-width: 3; }
.fp-met-ov rect { transform: scaleY(0); transform-box: fill-box; transform-origin: bottom; }
.fp-met-view.is-on .fp-met-ov rect { transform: none; transition: transform 0.7s cubic-bezier(0.22, 1, 0.36, 1); }
.fp-met-break { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.fp-met-bcard { padding: 14px 10px 10px; border: 1px solid rgba(255, 255, 255, 0.05); border-radius: 12px; background: rgba(246, 246, 246, 0.02); }
.fp-met-bhead { display: flex; justify-content: space-between; margin: 0 4px 10px; font-weight: 500; }
.fp-met-bhead em { font-style: normal; font-weight: 400; color: var(--hpc-muted-fg); }
.fp-met-row { position: relative; display: flex; align-items: center; justify-content: space-between; height: 26px; margin-top: 4px; padding: 0 8px; border-radius: 4px; transition: box-shadow 0.3s ease; }
.fp-met-row i { position: absolute; inset: 0 auto 0 0; width: 0; border-radius: 4px; background: rgba(40, 102, 80, 0.28); }
.fp-met-row.is-low i { background: rgba(235, 87, 87, 0.2); }
.fp-met-view.is-on .fp-met-row i { width: var(--w); transition: width 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.2s; }
.fp-met-row span,
.fp-met-row b { position: relative; }
.fp-met-row b { font-weight: 500; font-variant-numeric: tabular-nums; }
.fp-met-row.is-flag { box-shadow: inset 0 0 0 1px rgba(242, 139, 139, 0.6); }
.fp-met-row.is-flag b { color: #F28B8B; }

.fp-met-cursor { top: 0; left: 0; z-index: 5; opacity: 0; transition: transform 0.12s linear, opacity 0.3s ease; }
.fp-met-cursor.is-on { opacity: 1; }
.fp-met-cursor.is-slow { transition: transform 0.7s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease; }
.fp-met-cursor.is-click::after { border-color: rgba(247, 248, 248, 0.55); animation-delay: 0s; }

/* Phones: no sidebar, every other date on the axis, and only the by-source breakdown */
.hpc.fp-met.is-narrow { grid-template-columns: minmax(0, 1fr); }
.fp-met.is-narrow :is(.hpc-side, [data-wide]) { display: none; }
.fp-met.is-narrow .fp-met-break { grid-template-columns: minmax(0, 1fr); }
.fp-met.is-narrow .fp-met-x span:nth-child(even) { visibility: hidden; }
.fp-met.is-narrow .fp-met-plot { height: 220px; }
.hpc.fp-met.is-narrow .fp-met-ov svg.hpc-chart { height: 160px; }

@media (max-width: 900px) {
  .fp-hero-row { flex-direction: column; gap: 24px; }
  .fp-hero-subtitle { font-size: 18px; }
  .fp-hero-visual { min-height: 0; aspect-ratio: 1; }
  .fp-hero-visual--run,
  .fp-hero-visual--auto,
  .fp-hero-visual--obs { aspect-ratio: 3 / 4; }
  .fp-met-visual { aspect-ratio: 3 / 4; }
  .fp-run-glass,
  .fp-auto-glass,
  .fp-obs-glass,
  .fp-met-glass { inset: 14px; }
}
@media (max-width: 520px) {
  .fp-hero-actions { width: 100%; }
  .fp-hero-actions .hp-btn { flex: 1; }
}

/* ---------- Sections: title left, description right, then a full-width graphic and cards ---------- */
.fp-section { padding: clamp(120px, 13vw, 220px) 0 0; }
.fp-section--end { padding-bottom: clamp(64px, 7vw, 120px); }
.hp-feature-desc { text-wrap: pretty; }
.deck-cta-inner,
.deck-cta-heading { max-width: 680px; }
.fp-cta--wide .deck-cta-inner,
.fp-cta--wide .deck-cta-heading { max-width: 960px; }
.fp-cta--wide .deck-cta-heading { text-wrap: balance; }
.fp-section-head .hp-customers-desc { max-width: 32em; }
.fp-section-head--full { grid-template-columns: minmax(0, 1fr); }
.fp-section-head--full .hp-customers-title { max-width: none; }
.fp-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}
@media (max-width: 900px) {
  .fp-section-head { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .fp-section-head .hp-customers-desc { font-size: 18px; }
  .fp-cards { grid-template-columns: minmax(0, 1fr); }
  .fp-cards .hp-trust-card { min-height: 200px; }
}

/* ---------- Credential vault diagram: thin-line nested boxes, labels set into the borders ---------- */
.fpd {
  --fpd-mask: #141716;          /* the card tint composited over the page, so labels can mask the lines */
  --fpd-text: rgba(255, 255, 255, 0.52);
  --fpd-strong: rgba(255, 255, 255, 0.9);
  /* One spacing system: the form and vault share a height, Deck and the vault share a padding, and
     every arrow stops --fpd-off short of what it connects */
  --fpd-h: 254px;               /* the form's natural height: three fields, the submit, gaps and padding */
  --fpd-gap: 48px;              /* form to Deck, and Deck to your app */
  --fpd-pad: 40px;
  --fpd-off: 12px;
  --fpd-link: 48px;             /* the arrow from the steps into Encrypted */
  display: grid;
  place-items: center;
  height: clamp(440px, 40vw, 560px);
  margin-top: clamp(56px, 6.5vw, 104px);
  padding: 72px 24px;
  overflow: hidden;
  background: rgba(255, 255, 255, 0.03);
  font-family: var(--mono);
  font-size: 15px;
  line-height: 1.7;
  letter-spacing: 0;
  color: var(--fpd-text);
}
.fpd-flow { display: flex; align-items: center; }
.fpd-list { margin: 0; padding: 0; list-style: none; white-space: nowrap; }
.fpd-list p { margin: 0; }
.fpd-strong { color: var(--fpd-strong); }
.fpd-out .fpd-strong {
  margin-bottom: 8px;
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.fpd-box {
  position: relative;
  display: flex;
  align-items: center;
}
.fpd-deck { padding: var(--fpd-pad); border: 1px dashed rgba(255, 255, 255, 0.2); }
.fpd-vault { height: var(--fpd-h); padding: 0 var(--fpd-pad); border: 1px solid rgba(255, 255, 255, 0.14); }
.fpd-core { padding: 24px; border: 1px solid rgba(255, 255, 255, 0.26); }
.fpd-label {
  position: absolute;
  top: 0;
  left: 50%;
  /* The extra left padding offsets the tracking after the last letter, so the label sits centered */
  padding: 0 10px 0 calc(10px + 0.1em);
  background: var(--fpd-mask);
  font-size: 12px;
  line-height: 1;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--fpd-strong);
  transform: translate(-50%, -50%);
}
.fpd-deck > .fpd-label { color: var(--fpd-text); }

/* Sign-in form: an abstract login, its fields filled in as each cycle starts */
.fpd-form {
  --fpd-field: 148px;
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 16px;
  height: var(--fpd-h);
  padding: 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.fpd-field { display: flex; flex-direction: column; gap: 8px; font-size: 12px; line-height: 1; }
.fpd-input,
.fpd-cells i {
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
}
.fpd-input {
  display: flex;
  align-items: center;
  gap: 5px;
  width: var(--fpd-field);
  height: 24px;
  padding: 0 9px;
}
.fpd-input b {
  width: 0;
  height: 4px;
  border-radius: 2px;
  background: rgba(255, 255, 255, 0.5);
  transition: width 0.5s cubic-bezier(0.45, 0, 0.25, 1);
}
.fpd-form.is-user .fpd-input b { width: 62%; }
.fpd-dots i,
.fpd-cells i::after {
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.7);
  opacity: 0;
  transition: opacity 0.2s ease calc(var(--i) * 45ms);
}
.fpd-form.is-pass .fpd-dots i { opacity: 1; }
.fpd-cells {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 4px;
  width: var(--fpd-field);
}
.fpd-cells i { display: grid; place-items: center; height: 24px; }
.fpd-cells i::after { content: ''; transition-delay: calc(var(--i) * 70ms); }
.fpd-form.is-code .fpd-cells i::after { opacity: 1; }
.fpd-submit {
  height: 24px;
  background: rgba(255, 255, 255, 0.1);
  transition: background-color 0.3s ease;
}
.fpd-submit.is-press { background: rgba(255, 255, 255, 0.24); transition: none; }
.fpd-form.is-reset * { transition: none !important; }

/* Arrows: a hairline with a chevron head; the in/out arrows cross the box borders, and a soft
   highlight runs along each one in turn. The strip of mask behind the line breaks each border it
   crosses, so the arrow reads as one unbroken line. */
.fpd-arrow {
  position: relative;
  z-index: 1;
  flex: none;
  height: 11px;
  background: linear-gradient(var(--fpd-mask), var(--fpd-mask)) 0 50% / 100% 9px no-repeat;
}
.fpd-arrow::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  right: 1px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent) -40px 0 / 40px 100% no-repeat, rgba(255, 255, 255, 0.34);
}
.fpd-arrow::after {
  content: '';
  position: absolute;
  top: 2px;
  right: 1px;
  width: 7px;
  height: 7px;
  border-top: 1px solid rgba(255, 255, 255, 0.6);
  border-right: 1px solid rgba(255, 255, 255, 0.6);
  transform: rotate(45deg);
}
.fpd-arrow.is-pulse::before { animation: fpdPulse 0.8s cubic-bezier(0.45, 0, 0.25, 1); }
@keyframes fpdPulse {
  from { background-position: -40px 0, 0 0; }
  to { background-position: calc(100% + 40px) 0, 0 0; }
}
/* The in and out arrows cross the Deck and Vault borders: the gap, both paddings and both 1px
   borders, less the clearance at each end */
.fpd-arrow--in,
.fpd-arrow--out { width: calc(var(--fpd-gap) + 2 * var(--fpd-pad) + 2px - 2 * var(--fpd-off)); }
.fpd-arrow--in { margin: 0 calc(var(--fpd-off) - 2 * var(--fpd-pad) - 2px) 0 var(--fpd-off); }
.fpd-arrow--core { width: var(--fpd-link); margin: 0 var(--fpd-off); }
.fpd-arrow--out { margin: 0 var(--fpd-off) 0 calc(var(--fpd-off) - 2 * var(--fpd-pad) - 2px); }

/* Encrypted: a dot matrix that flickers as a bright band sweeps across */
.fpd-matrix {
  display: grid;
  grid-template-columns: repeat(18, 4px);
  grid-template-rows: repeat(4, 4px);
  gap: 2px;
}
.fpd-matrix i { border-radius: 50%; background: #fff; opacity: 0.14; }

/* Credential ID swap: both IDs share one grid cell and turn on an axis just behind the text */
[data-cred] { display: grid; perspective: 240px; }
[data-cred] > span { grid-area: 1 / 1; transform-origin: 50% 50% -8px; backface-visibility: hidden; }
.fpd-cred-out { animation: fpdCredOut 0.22s cubic-bezier(0.55, 0, 1, 0.45) forwards; }
.fpd-cred-in { animation: fpdCredIn 0.3s cubic-bezier(0.16, 1, 0.3, 1) 0.06s both; }
@keyframes fpdCredOut { to { opacity: 0; transform: translateY(-45%) rotateX(75deg); } }
@keyframes fpdCredIn { from { opacity: 0; transform: translateY(45%) rotateX(-75deg); } }

/* Browser chrome and a data list, shared by the infrastructure diagram's callout and output */
.fpd-chrome {
  display: flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 26px;
  padding: 0 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}
.fpd-chrome i { flex: none; width: 5px; height: 5px; border-radius: 50%; background: rgba(255, 255, 255, 0.22); }
.fpd-url {
  min-width: 0;
  margin-left: 8px;
  overflow: hidden;
  font-size: 11px;
  line-height: 1;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.fpd-data { margin: 0; padding: 0; list-style: none; }
.fpd-data li {
  opacity: 0;
  transform: translateY(4px);
  transition: opacity 0.25s ease, transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  transition-delay: calc(var(--i) * 90ms);
}
.fpd-data li span { color: var(--fpd-text); }
.fpd-data b { font-weight: inherit; }
.fpd-data.is-on li { opacity: 1; transform: none; }
.fpd-data li { color: var(--fpd-strong); }

/* Hosted infrastructure diagram: Deck's pool of isolated machines, one per task run, with a callout
   that opens up a single machine. An empty slot is a faint dashed outline; a machine starts in it for
   one run and shuts down when the run is done. */
/* The pool and the execution callout share one width: the 7-column grid plus padding and borders.
   A spacer the width of your product's list balances it on the right, so Deck sits centered. */
.fpd--infra {
  --fpd-cell: 24px;
  --fpd-box: calc(7 * var(--fpd-cell) + 36px + 2 * var(--fpd-pad) + 2px);
}
.fpd--infra .fpd-out { width: 16ch; }
.fpd-spacer { margin-left: var(--fpd-gap); }
/* Tasks go in on the top arrow; completed tasks come back out on the one below it */
.fpd-arrows { position: relative; z-index: 1; display: flex; flex: none; flex-direction: column; gap: 14px; }
.fpd-arrows .fpd-arrow { width: 100%; margin: 0; }
.fpd-arrow--back { transform: scaleX(-1); }
.fpd--infra .fpd-pool { justify-content: center; width: var(--fpd-box); padding: 0; }
.fpd-machines {
  display: grid;
  grid-template-columns: repeat(7, var(--fpd-cell));
  grid-auto-rows: calc(var(--fpd-cell) * 1.15);
  gap: 6px;
}
.fpd-machines i {
  position: relative;
  border: 1px dashed rgba(255, 255, 255, 0.1);
  transition: border-color 0.3s ease, background-color 0.3s ease, box-shadow 0.3s ease;
}
/* Each cell is a tiny computer: a title bar, and a progress line while its run works */
.fpd-machines i::before {
  content: '';
  position: absolute;
  top: 6px;
  left: 0;
  right: 0;
  border-top: 1px solid transparent;
  transition: border-color 0.3s ease;
}
.fpd-machines i::after {
  content: '';
  position: absolute;
  left: 4px;
  right: 4px;
  bottom: 5px;
  height: 2px;
  background: rgba(255, 255, 255, 0.7);
  transform: scaleX(0);
  transform-origin: left;
}
.fpd-machines i[data-state] { border-style: solid; border-color: rgba(255, 255, 255, 0.26); }
.fpd-machines i[data-state]::before { border-color: rgba(255, 255, 255, 0.14); }
.fpd-machines i[data-state="boot"] { border-color: rgba(255, 255, 255, 0.6); background: rgba(255, 255, 255, 0.04); }
.fpd-machines i[data-state="run"]::after { transform: none; transition: transform var(--dur, 1.6s) linear; }
.fpd-machines i[data-state="done"]::after { transform: none; opacity: 0.4; }
.fpd-machines i.is-focus { box-shadow: 0 0 0 3px var(--fpd-mask), 0 0 0 4px rgba(255, 255, 255, 0.34); }
/* Callout leader: starts just outside the focused machine (rightmost column, middle row), breaks the
   pool's border with the same mask strip as the arrows, and ends on the callout's border */
.fpd-lead {
  position: relative;
  z-index: 1;
  flex: none;
  width: calc(var(--fpd-pad) + var(--fpd-link) - 4px);
  height: 11px;
  margin-left: calc(4px - var(--fpd-pad) - 1px);
  background: linear-gradient(var(--fpd-mask), var(--fpd-mask)) 0 50% / 100% 9px no-repeat;
}
.fpd-lead::before {
  content: '';
  position: absolute;
  top: 5px;
  left: 0;
  right: 0;
  border-top: 1px dashed rgba(255, 255, 255, 0.34);
}
.fpd-session {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 12px;
  width: var(--fpd-box);
  height: var(--fpd-h);
  padding: 0 var(--fpd-pad);
  border: 1px solid rgba(255, 255, 255, 0.26);
  font-size: 12px;
  line-height: 1;
}
.fpd-sess-head { display: flex; justify-content: space-between; }
.fpd-sess-desk {
  display: flex;
  flex-direction: column;
  height: 64px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14);
  opacity: 0.35;
  transition: opacity 0.3s ease;
}
.fpd-sess-desk .fpd-chrome { height: 20px; }
.fpd-sess-page { display: flex; flex-direction: column; gap: 6px; padding: 9px 10px; }
.fpd-sess-page b {
  display: block;
  height: 3px;
  border-radius: 1.5px;
  background: rgba(255, 255, 255, 0.24);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fpd-sess-page b:nth-child(1) { width: 40%; }
.fpd-sess-page b:nth-child(2) { width: 72%; }
.fpd-sess-page b:nth-child(3) { width: 56%; }
.fpd-session[data-state="running"] .fpd-sess-desk { opacity: 1; }
.fpd-session[data-state="running"] .fpd-sess-page b,
.fpd-session[data-state="completing"] .fpd-sess-page b { transform: none; transition-delay: calc(var(--i) * 150ms); }
.fpd-session[data-state="completing"] .fpd-sess-desk { opacity: 0.6; }
.fpd-sess-spec { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; color: var(--fpd-strong); }
.fpd-sess-spec span { display: inline-block; width: 8ch; color: var(--fpd-text); }
.fpd-sess-spec b { font-weight: inherit; }
.fpd-sess-life { display: grid; grid-template-columns: repeat(4, 1fr); gap: 4px; }
.fpd-sess-life i { height: 2px; background: rgba(255, 255, 255, 0.12); transition: background-color 0.3s ease; }
.fpd-sess-life i.is-on { background: rgba(255, 255, 255, 0.7); }

/* Small laptops: the same diagram a size down so it fits the container */
@media (min-width: 1001px) and (max-width: 1280px) {
  .fpd { padding: 64px 16px; font-size: 13px; }
  .fpd { --fpd-h: 234px; --fpd-gap: 40px; --fpd-pad: 32px; --fpd-link: 36px; }
  .fpd-form { --fpd-field: 112px; gap: 12px; padding: 20px; }
  .fpd-core { padding: 18px; }
  .fpd-matrix { grid-template-columns: repeat(18, 3px); grid-template-rows: repeat(4, 3px); }
  /* The widest diagram: it trades its side padding and a little type size to fit at this tier */
  .fpd--infra { --fpd-cell: 18px; padding-inline: 0; }
  .fpd--infra .fpd-out { font-size: 12px; }
  .fpd-session { font-size: 11px; }
}

/* The diagram stacks a little earlier than the page so the form, vault and output never crowd */
@media (max-width: 1000px) {
  /* minmax(0, 1fr) so the track can't grow past the card to fit a nowrap URL or JSON line */
  .fpd { height: auto; padding: 64px 16px; font-size: 14px; grid-template-columns: minmax(0, 1fr); }
  .fpd-flow,
  .fpd-deck,
  .fpd-vault { flex-direction: column; }
  .fpd-out,
  .fpd-steps { text-align: center; }
  .fpd-form,
  .fpd-vault { height: auto; }
  .fpd-deck { padding: 48px 24px; }
  .fpd-vault { padding: 40px 32px 32px; }
  .fpd-arrow { width: 11px; height: auto; background-position: 1px 0; background-size: 9px 100%; }
  /* Stacked, the arrows run down through the centered labels, so the labels sit on top */
  .fpd-label { z-index: 2; }
  .fpd-arrow::before { top: 0; bottom: 1px; left: 5px; right: auto; width: 1px; height: auto; background: linear-gradient(180deg, transparent, rgba(255, 255, 255, 0.95), transparent) 0 -40px / 100% 40px no-repeat, rgba(255, 255, 255, 0.34); }
  .fpd-arrow::after { top: auto; bottom: 1px; left: 2px; right: auto; transform: rotate(135deg); }
  .fpd-arrow.is-pulse::before { animation-name: fpdPulseDown; }
  /* Same border crossings as the row layout, turned vertical */
  .fpd-arrow--in { height: 104px; margin: 16px 0 -72px; }
  .fpd-arrow--core { height: 48px; margin: 16px 0 -10px; }
  .fpd-arrow--out { height: 100px; margin: -66px 0 16px; }
  /* Stacked, the browser boxes run the full width so the window can shrink to fit a phone */
  .fpd--infra .fpd-flow { width: 100%; }
  .fpd--infra .fpd-deck,
  .fpd--infra .fpd-vault { align-self: stretch; }
  /* Stacked, the callout hangs below the pool on a short vertical leader */
  .fpd--infra .fpd-pool { width: auto; padding: 40px 32px 32px; }
  .fpd--infra .fpd-arrows { flex-direction: row; width: auto; }
  .fpd-arrows .fpd-arrow { width: 11px; height: 100%; }
  .fpd-arrow--back { transform: scaleY(-1); }
  .fpd-spacer { display: none; }
  .fpd--infra .fpd-session { width: auto; height: auto; padding: 40px 32px 32px; }
  .fpd-lead { width: 11px; height: 40px; margin: 0; align-self: center; background: none; }
  .fpd-lead::before { top: 0; bottom: 0; left: 5px; right: auto; border-top: 0; border-left: 1px dashed rgba(255, 255, 255, 0.34); }
}
@keyframes fpdPulseDown {
  from { background-position: 0 -40px, 0 0; }
  to { background-position: 0 calc(100% + 40px), 0 0; }
}

/* Task anatomy diagram (Tasks & Automation): a task is a prompt and a schema, Deck works the site in a
   browser signed in as your user, and JSON in the schema's shape comes back to your product. The
   browser box is a vault box, so the in and out arrows cross it exactly as in the vault diagram. */
.fpd--task {
  --tk-w: 240px;                /* the prompt and schema text */
  --tk-run: 252px;              /* the browser box's content */
}
.fpd-tk-def {
  flex-direction: column;
  align-items: stretch;
  gap: 28px;
  padding: 36px 24px 24px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.fpd-tk-part {
  display: block;
  width: calc(var(--tk-w) + 34px);
  padding: 20px 16px 14px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  font-size: 12px;
  line-height: 1.5;
}
.fpd-tk-part > .fpd-label { color: var(--fpd-text); }
.fpd-tk-prompt { min-height: 4.5em; margin: 0; color: var(--fpd-strong); }
.fpd-tk-caret {
  display: inline-block;
  width: 1px;
  height: 1.1em;
  margin-left: 2px;
  vertical-align: -0.2em;
  background: var(--fpd-strong);
  opacity: 0;
}
.fpd--task.is-typing .fpd-tk-caret { opacity: 1; animation: hpAuthBlink 1s steps(1) infinite; }
.fpd-tk-schema { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; }
.fpd-tk-schema li { display: flex; justify-content: space-between; gap: 12px; opacity: 0.2; transition: opacity 0.3s ease; }
.fpd-tk-schema li.is-on { opacity: 1; }
.fpd-tk-schema b { font-weight: inherit; color: var(--fpd-strong); }

.fpd-tk-run {
  flex-direction: column;
  align-items: stretch;
  justify-content: center;
  gap: 20px;
  width: calc(var(--tk-run) + 2 * var(--fpd-pad) + 2px);
  border-color: rgba(255, 255, 255, 0.26);
  font-size: 12px;
  line-height: 1;
}
.fpd-tk-desk { display: flex; flex-direction: column; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.14); }
.fpd-tk-desk .fpd-chrome { height: 22px; }
.fpd-tk-page { display: flex; flex-direction: column; gap: 6px; padding: 10px; }
.fpd-tk-page b { display: block; height: 3px; border-radius: 1.5px; background: rgba(255, 255, 255, 0.24); transform-origin: left; }
.fpd-tk-page b:nth-child(1) { width: 40%; }
.fpd-tk-page b:nth-child(2) { width: 72%; }
.fpd-tk-page b:nth-child(3) { width: 56%; }
/* Each new page loads in: its lines draw left to right */
.fpd-tk-desk.is-load .fpd-tk-page b { animation: fpdTkLoad 0.5s cubic-bezier(0.22, 1, 0.36, 1) calc(var(--i) * 120ms) both; }
@keyframes fpdTkLoad { from { transform: scaleX(0); } }
.fpd-tk-steps { display: flex; flex-direction: column; gap: 12px; margin: 0; padding: 0; list-style: none; }
.fpd-tk-steps li { display: flex; align-items: center; gap: 10px; opacity: 0.35; transition: opacity 0.3s ease, color 0.3s ease; }
.fpd-tk-steps i {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
  transition: background-color 0.3s ease, box-shadow 0.3s ease;
}
.fpd-tk-steps li[data-state] { opacity: 1; }
.fpd-tk-steps li[data-state="active"] { color: var(--fpd-strong); }
.fpd-tk-steps li[data-state="active"] i { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95); animation: fpdTkBlink 0.8s ease-in-out infinite alternate; }
.fpd-tk-steps li[data-state="done"] i { background: rgba(255, 255, 255, 0.7); box-shadow: none; }
@keyframes fpdTkBlink { to { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.95), 0 0 0 3px rgba(255, 255, 255, 0.12); } }

/* The output's width is fixed, so swapping between tasks never shifts the diagram */
.fpd-tk-out { width: 30ch; font-size: 12px; }
.fpd-tk-json li { white-space: pre; }
.fpd-tk-fade { transition: opacity 0.3s ease; }
.fpd--task.is-out .fpd-tk-fade,
.fpd--task.is-out .fpd-tk-json { opacity: 0; }

@media (min-width: 1001px) and (max-width: 1280px) {
  .fpd--task { --tk-w: 184px; --tk-run: 196px; padding-inline: 0; }
  .fpd-tk-part,
  .fpd-tk-run,
  .fpd-tk-out { font-size: 11px; }
}
@media (max-width: 1000px) {
  /* Stacked, the browser runs the full width; the output keeps its JSON indentation */
  .fpd--task .fpd-flow { width: 100%; }
  .fpd--task .fpd-tk-def,
  .fpd--task .fpd-deck,
  .fpd--task .fpd-vault { align-self: stretch; }
  .fpd-tk-part,
  .fpd-tk-run { width: auto; }
  .fpd-tk-out { text-align: left; }
  .fpd-tk-out .fpd-strong { text-align: center; }
}
@media (max-width: 520px) {
  .fpd--task .fpd-tk-def { padding-inline: 16px; }
  .fpd-tk-prompt { min-height: 6em; }
  .fpd--task .fpd-deck { padding-inline: 16px; }
  .fpd--task .fpd-vault { padding-inline: 20px; }
}

/* ---------- Feature rows: the homepage feature card, copy and demo alternating sides ---------- */
.fp-features { --feature-h: clamp(480px, 40vw, 700px); }

/* Shared by the demos below: a row status that waits on the user */
.hp-auth-status[data-state="warn"] { background: rgba(242, 201, 76, 0.14); color: var(--warn); }
.hp-auth-status[data-state="warn"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* MFA demo: the site's challenge in the agent's browser, and the prompt your product shows the user */
.fp-mfa { grid-template-rows: auto minmax(0, 1fr) auto; }
.fp-mfa-stage { position: relative; display: flex; min-height: 0; }
.fp-mfa-stage .hp-auth-portal { flex: 1; }
.fp-mfa .hp-auth-digits { margin-top: 14px; }
.fp-mfa .hp-auth-digit.is-fill { background: rgba(255, 255, 255, 0.09); }
.fp-mfa-answer { margin-top: 14px; }
/* Third card in the stack: the prompt your product shows, idle until the site asks for something */
.fp-mfa-dock {
  padding: 14px;
  border-radius: 8px;
  background: var(--panel);
}
.fp-mfa-panes { display: grid; }
.fp-mfa-dock .fp-mfa-title { margin-top: 0; }
.fp-mfa-dock .fp-mfa-row { margin-top: 14px; }
.fp-mfa-pane {
  grid-area: 1 / 1;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-mfa-pane.is-on { opacity: 1; transform: none; }
.fp-mfa-pane--note { display: flex; align-items: center; justify-content: center; gap: 8px; }
.fp-mfa-pane--note .hp-auth-sub { margin: 0; }
.fp-mfa-sent { display: grid; place-items: center; width: 18px; height: 18px; border-radius: 50%; background: rgba(76, 183, 130, 0.16); color: var(--ok); }
.fp-mfa-sent svg { width: 10px; height: 10px; }
.fp-mfa-title { margin-top: 6px; font-size: 13px; font-weight: 500; }
.fp-mfa-row { display: flex; gap: 8px; margin-top: 12px; }
.fp-mfa-row .hp-auth-input { flex: 1; min-width: 0; }
.fp-mfa-row .hp-auth-btn { margin-top: 0; padding: 0 14px; }

/* Stealth demo: a login typed at human pace, with the session's checks alongside */
.fp-stealth-stage { display: flex; flex-direction: column; gap: 10px; min-height: 0; }
.fp-stealth-form { display: flex; flex-direction: column; gap: 8px; padding: 14px 40px 16px; }
.fp-stealth-form .hp-auth-btn { margin-top: 4px; }
.fp-stealth-session {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
  min-height: 0;
  padding: 6px 14px;
  border-radius: 8px;
  background: var(--panel);
}
.fp-stealth-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 16px;
  align-items: center;
  gap: 8px;
  height: 28px;
  font-size: 11.5px;
}
.fp-stealth-row > span:first-child { color: var(--fg-2); }
.fp-stealth-val { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; opacity: 0.35; transition: opacity 0.3s ease; }
.fp-stealth-row.is-busy .fp-stealth-val,
.fp-stealth-row.is-ok .fp-stealth-val { opacity: 1; }
.fp-stealth-mark { position: relative; display: grid; place-items: center; width: 16px; height: 16px; }
.fp-stealth-mark .hp-auth-spin { width: 10px; height: 10px; border-width: 1.5px; }
.fp-stealth-row.is-busy .hp-auth-spin { opacity: 1; animation: hpAuthSpin 0.7s linear infinite; }
.fp-stealth-mark svg { width: 12px; height: 12px; color: var(--ok); opacity: 0; transform: scale(0.6); transition: opacity 0.2s ease, transform 0.25s cubic-bezier(0.22, 1, 0.36, 1); }
.fp-stealth-row.is-ok svg { opacity: 1; transform: none; }
.fp-stealth-bars { display: flex; align-items: flex-end; gap: 2px; height: 14px; overflow: hidden; }
.fp-stealth-bars i { flex: none; width: 2px; border-radius: 1px; background: rgba(255, 255, 255, 0.5); }

/* Credential health demo: a pre-run check of each saved login, and the reconnect prompt */
.fp-health { grid-template-rows: auto minmax(0, 1fr) auto; }
.hp-auth-status[data-state="bad"] { background: rgba(235, 87, 87, 0.14); color: #EB5757; }
.hp-auth-status[data-state="bad"]::before { content: ''; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fp-health-run { justify-content: space-between; }
.fp-health-run .hp-auth-meta { flex: 1; }
.fp-health-list {
  display: flex;
  flex-direction: column;
  padding: 4px 12px;
  border-radius: 8px;
  background: var(--panel);
}
.fp-health-row {
  display: flex;
  flex: 1;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.fp-health-row + .fp-health-row { box-shadow: 0 -1px 0 rgba(255, 255, 255, 0.05); }
.fp-health .hp-auth-logo,
.fp-fanout .hp-auth-logo { width: 24px; height: 24px; border-radius: 5px; font-size: 11px; }
.fp-health-row .hp-auth-user { transition: color 0.25s ease; }
.fp-health-row.is-bad .hp-auth-user { color: #EB5757; }
.fp-health-row .hp-auth-status { height: 22px; font-size: 10.5px; }

.fp-health-btn { flex: 1; }

/* Fan-out demo: one task written once, then run on every connected Source of that kind */
.fp-fanout { grid-template-rows: auto minmax(0, 1fr); }
.fp-fanout .fp-mfa-row .hp-auth-btn { flex: none; }
.fp-fanout .hp-auth-user { transition: color 0.25s ease; }
.fp-fanout .is-done .hp-auth-user { color: var(--fg); }

/* Sessions demo: one sign-in, several tasks in the same session, then sign out. Each segment of the
   session bar fills over the time feature-page.js gives it in --d. */
.fp-session { grid-template-rows: auto minmax(0, 1fr); }
.fp-session .hp-auth-logo { width: 24px; height: 24px; border-radius: 5px; font-size: 11px; }
.fp-session-head { display: flex; align-items: center; gap: 10px; }
.fp-session-track { display: flex; gap: 3px; height: 22px; margin-top: 14px; }
.fp-session-track > span {
  position: relative;
  flex: var(--f) 1 0;
  min-width: 0;
  overflow: hidden;
  border-radius: 4px;
  background: rgba(255, 255, 255, 0.05);
}
.fp-session-track > span::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--c);
  transform: scaleX(0);
  transform-origin: left;
}
.fp-session-track > span.is-on::before { transform: none; transition: transform var(--d, 1s) linear; }
.fp-session-track [data-kind="auth"] { --c: rgba(84, 125, 197, 0.4); }
.fp-session-track [data-kind="task"] { --c: rgba(76, 183, 130, 0.32); }
.fp-session-track b {
  position: relative;
  display: block;
  overflow: hidden;
  padding: 0 7px;
  font-size: 10px;
  font-weight: 500;
  line-height: 22px;
  color: var(--fg-2);
  text-overflow: ellipsis;
  white-space: nowrap;
  transition: color 0.3s ease;
}
.fp-session-track .is-on b { color: var(--fg); }
.fp-session-list { padding: 2px 14px; }
/* A shorter frame than the other demos, so three task rows don't stretch tall */
.hp-feature-glass--demo[data-session-demo] { inset: 21% 20% 19%; }
@media (max-width: 900px) {
  .hp-feature-glass--demo[data-session-demo] { inset: 7% 14px; }
}
.fp-session-num {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 11px;
  font-weight: 500;
  color: var(--fg-2);
  transition: background-color 0.3s ease, color 0.3s ease;
}
.fp-session .is-done .fp-session-num { background: rgba(76, 183, 130, 0.14); color: var(--ok); }
.fp-session .hp-auth-user { transition: color 0.25s ease; }
.fp-session .is-done .hp-auth-user { color: var(--fg); }

/* Files demo: a scanned PDF read with OCR into the schema, then stored, with a second download of the
   same file caught as a duplicate. The scan line's sweep time comes from feature-page.js in --d. */
/* The column is pinned so a wider status pill truncates the file name instead of widening the scene.
   The list always holds three rows; the top panel takes whatever height is left. */
.fp-files { grid-template-rows: minmax(0, 1fr) auto; grid-template-columns: minmax(0, 1fr); }
.fp-files .fp-mfa-dock { display: flex; flex-direction: column; min-height: 0; }
.fp-files .hp-auth-logo { width: 24px; height: 24px; border-radius: 5px; font-size: 11px; }
.fp-files .hp-auth-domain { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fp-files-head { display: flex; align-items: center; gap: 10px; }
.fp-files-body {
  display: grid;
  flex: 1;
  grid-template-columns: 124px minmax(0, 1fr);
  gap: 8px;
  min-height: 0;
  margin-top: 14px;
}
.fp-files-page {
  display: grid;
  place-items: center;
  min-height: 0;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
.fp-files-doc {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100px;
  height: 128px;
  padding: 9px 9px 10px;
  border-radius: 2px;
  background-color: #ECE9E2;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.35);
  color: #3A3A3A;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.4s ease, transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-files-doc.is-on { opacity: 1; transform: none; }
.fp-doc-bar { display: block; width: 24px; height: 6px; margin-bottom: 6px; background: #555; }
.fp-doc-title { font-size: 8px; font-weight: 600; letter-spacing: 0.08em; }
.fp-doc-from { margin: 1px 0 7px; font-size: 6px; color: #6A6A6A; }
.fp-doc-line { display: block; width: 100%; height: 3px; margin-bottom: 4px; border-radius: 1px; background: rgba(0, 0, 0, 0.13); }
.fp-doc-row { display: flex; align-items: center; justify-content: space-between; gap: 6px; margin-top: 5px; font-size: 6.5px; }
.fp-doc-row:first-of-type { margin-top: 6px; }
.fp-doc-row span { color: #6A6A6A; }
.fp-doc-row b {
  padding: 1px 2px;
  border-radius: 2px;
  font-weight: 600;
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.fp-doc-row b.is-hit { background: rgba(76, 183, 130, 0.22); box-shadow: 0 0 0 1px rgba(46, 140, 96, 0.9); }
.fp-doc-scan {
  position: absolute;
  top: 0;
  right: -5px;
  left: -5px;
  height: 2px;
  border-radius: 1px;
  background: var(--ok);
  box-shadow: 0 0 10px rgba(76, 183, 130, 0.7);
  opacity: 0;
}
.fp-doc-scan.is-on { opacity: 1; transform: translateY(126px); transition: transform var(--d, 1.8s) linear, opacity 0.2s ease; }
.fp-doc-scan.is-done { opacity: 0; }
.fp-files-schema {
  min-width: 0;
  overflow: hidden;
  border-radius: 6px;
  background: rgba(0, 0, 0, 0.22);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07);
}
/* Sized so the longest line, "invoice_number": "1042", fits the column */
.fp-files-schema .fp-json { margin: 0; padding: 7px 0; border-radius: 0; background: none; box-shadow: none; font-size: 10px; line-height: 17px; }
.fp-files-schema .fp-json > div { padding-right: 8px; }
.fp-files-schema .fp-json > div::before { width: 14px; margin-right: 8px; }

.fp-files-list { display: flex; flex-direction: column; overflow: hidden; padding: 0 14px; border-radius: 8px; background: var(--panel); }
.fp-files-row {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  height: 48px;
  overflow: hidden;
  border-top: 1px solid transparent;
  transition: height 0.45s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.3s ease, border-color 0.3s ease;
}
.fp-files-row:not(.is-hidden) ~ .fp-files-row:not(.is-hidden) { border-color: rgba(255, 255, 255, 0.05); }
.fp-files-row.is-hidden { height: 0; opacity: 0; }
.fp-files-ico {
  display: grid;
  place-items: center;
  flex: none;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg-2);
}
.fp-files-ico svg { width: 12px; height: 12px; }
.fp-files-row .hp-auth-status { height: 22px; font-size: 10.5px; }

/* Recovery demo: the agent's target ring sits where the last run clicked, and moves when the site
   gets in the way (a popup, a slow load, or a shifted layout) */
.fp-recover { grid-template-rows: auto minmax(0, 1fr) auto; }
.fp-recover-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 24px;
  transition: opacity 0.3s ease;
}
.fp-recover-page .hp-auth-title { font-size: 14px; }
.fp-recover-banner {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-recover-banner > p {
  overflow: hidden;
  border-radius: 6px;
  background: rgba(242, 201, 76, 0.1);
  font-size: 11px;
  line-height: 28px;
  text-align: center;
  color: var(--warn);
}
.fp-recover-banner.is-on { grid-template-rows: 1fr; }
.fp-recover-banner.is-on > p { margin-bottom: 12px; }
.fp-recover-bill {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 12px;
  padding: 10px 10px 10px 12px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.04);
}
.fp-recover-bill .hp-auth-meta .hp-auth-domain { font-size: 12px; }
.fp-recover .hp-auth-btn { margin-top: 0; padding: 0 12px; }
.fp-recover-skel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 10px;
  padding: 0 24px;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.fp-recover-skel i { height: 10px; border-radius: 3px; background: rgba(255, 255, 255, 0.06); animation: fpSkel 1.2s ease-in-out infinite alternate; }
.fp-recover-skel i:nth-child(1) { width: 40%; }
.fp-recover-skel i:nth-child(2) { width: 62%; }
.fp-recover-skel i:nth-child(3) { height: 52px; margin-top: 4px; }
@keyframes fpSkel { to { background: rgba(255, 255, 255, 0.11); } }
.fp-recover-body.is-loading .fp-recover-skel { opacity: 1; }
.fp-recover-body.is-loading .fp-recover-page { opacity: 0; }
.fp-recover-modal {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  background: rgba(10, 11, 12, 0.6);
  opacity: 0;
  transition: opacity 0.25s ease;
}
.fp-recover-modal.is-on { opacity: 1; }
.fp-recover-dialog {
  width: 200px;
  padding: 14px;
  border-radius: 8px;
  background: #1C1D20;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4);
  transform: translateY(6px) scale(0.98);
  transition: transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-recover-modal.is-on .fp-recover-dialog { transform: none; }
.fp-recover-dialog .hp-auth-title { font-size: 13px; }
.fp-recover-actions { display: flex; gap: 8px; margin-top: 12px; }
.fp-recover-actions > span { flex: 1; }
.fp-recover-ghost {
  display: grid;
  place-items: center;
  height: 30px;
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.06);
  font-size: 12px;
  font-weight: 500;
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), background-color 0.2s ease;
}
.fp-recover-ghost.is-press { transform: scale(0.97); background: rgba(255, 255, 255, 0.12); }
.fp-recover-ring {
  position: absolute;
  top: 0;
  left: 0;
  border-radius: 8px;
  box-shadow: 0 0 0 1.5px rgba(247, 248, 248, 0.75), 0 0 0 5px rgba(247, 248, 248, 0.08);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, box-shadow 0.25s ease, transform 0.55s cubic-bezier(0.45, 0, 0.25, 1), width 0.55s cubic-bezier(0.45, 0, 0.25, 1), height 0.55s cubic-bezier(0.45, 0, 0.25, 1);
}
.fp-recover-ring.is-on { opacity: 1; }
.fp-recover-ring.is-warn { box-shadow: 0 0 0 1.5px var(--warn), 0 0 0 5px rgba(242, 201, 76, 0.12); }
.fp-recover-ring.is-snap { transition: opacity 0.25s ease; }
.fp-recover .fp-stealth-session { flex: none; }

/* Live view demo: the agent's browser streamed while a task runs, its pointer, and a Live pill with the
   elapsed time */
.fp-live { grid-template-rows: auto minmax(0, 1fr); }
.hp-auth-status[data-state="live"] { background: rgba(235, 87, 87, 0.14); color: #F28B8B; }
.fp-live-pill b { font-weight: 400; font-variant-numeric: tabular-nums; opacity: 0.75; }
.fp-live-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.fp-live-pill[data-state="live"] .fp-live-dot { animation: fpLivePulse 1.4s ease-in-out infinite; }
@keyframes fpLivePulse { 50% { opacity: 0.3; } }
.fp-live .hp-auth-body { overflow: hidden; }
.fp-live-page { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 22px; }
.fp-live-page .hp-auth-title { font-size: 14px; }
.fp-live-form { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 12px; }
.fp-live-form > :first-child { grid-column: 1 / -1; }
.fp-live .hp-auth-input { height: 28px; font-size: 11.5px; }
.fp-live-foot { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.fp-live .hp-auth-btn { margin-top: 0; padding: 0 18px; }
.fp-live-saved {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: 11.5px;
  color: var(--ok);
  opacity: 0;
  transform: translateX(-4px);
  transition: opacity 0.3s ease, transform 0.35s cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-live-saved svg { width: 12px; height: 12px; }
.fp-live-saved.is-on { opacity: 1; transform: none; }
.fp-live-cursor { opacity: 0; transition: transform 0.6s cubic-bezier(0.65, 0, 0.35, 1), opacity 0.3s ease; }
.fp-live-cursor.is-on { opacity: 1; }
.fp-live-cursor.is-click::after { border-color: rgba(247, 248, 248, 0.55); animation-delay: 0s; }

/* Sensitive tasks demo: one finished run. Marking it sensitive blurs the screenshot behind a lock and
   swaps the reasoning and output for Hidden, while the status and timing stay. */
.fp-sens { grid-template-rows: auto minmax(0, 1fr) auto; }
.fp-sens-toggle {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 9px;
  font-size: 12px;
  font-weight: 500;
  color: var(--fg-2);
  transition: transform 0.2s cubic-bezier(0.22, 1, 0.36, 1), color 0.3s ease;
}
.fp-sens-toggle.is-press { transform: scale(0.95); }
.fp-sens-switch { position: relative; width: 34px; height: 20px; border-radius: 10px; background: rgba(255, 255, 255, 0.14); transition: background-color 0.3s ease; }
.fp-sens-switch::after {
  content: '';
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--fg);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}
.fp-sens.is-sensitive .fp-sens-toggle { color: var(--fg); }
.fp-sens.is-sensitive .fp-sens-switch { background: var(--ok); }
.fp-sens.is-sensitive .fp-sens-switch::after { transform: translateX(14px); }
.fp-sens-shot .hp-auth-body { overflow: hidden; }
.fp-sens-page { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; padding: 0 16px; transition: filter 0.5s ease, opacity 0.5s ease; }
.fp-sens-page .hp-auth-title { font-size: 13px; }
.fp-sens-page .hp-auth-sub { margin-top: 2px; }
.fp-sens-lines { margin: 10px 0 0; font-size: 11.5px; }
.fp-sens-lines > div { display: flex; align-items: center; justify-content: space-between; height: 24px; }
.fp-sens-lines dt { color: var(--fg-2); }
.fp-sens-lines dd { margin: 0; font-variant-numeric: tabular-nums; }
.fp-sens-veil { position: absolute; inset: 0; display: grid; place-items: center; }
.fp-sens.is-sensitive .fp-sens-page { filter: blur(7px); opacity: 0.35; }
/* Every detail is one line at the same height, so hiding a value swaps it in place */
.fp-sens-facts { margin: 0; padding: 7px 14px; border-radius: 8px; background: var(--panel); font-size: 11.5px; }
.fp-sens-facts > div { display: grid; grid-template-columns: 72px minmax(0, 1fr); align-items: center; column-gap: 12px; height: 26px; }
.fp-sens-facts dt { color: var(--fg-2); }
.fp-sens-facts dd { display: grid; align-items: center; min-width: 0; margin: 0; font-variant-numeric: tabular-nums; }
.fp-sens-ok { display: inline-flex; align-items: center; gap: 6px; color: var(--ok); }
.fp-sens-ok svg { width: 12px; height: 12px; }
.fp-sens-val,
.fp-sens-mask { grid-area: 1 / 1; transition: opacity 0.35s ease var(--d, 0s), transform 0.35s ease var(--d, 0s); }
.fp-sens-val { overflow: hidden; white-space: pre; text-overflow: ellipsis; }
code.fp-sens-val { font: 10.5px var(--mono); }
.fp-sens-val .k { color: #8EB4E8; }
.fp-sens-val .s { color: #9EE0C0; }
.fp-sens-val .n { color: #FDFAC3; }
.fp-sens-mask {
  display: inline-flex;
  align-items: center;
  justify-self: start;
  gap: 6px;
  height: 20px;
  padding: 0 8px;
  border-radius: 5px;
  background: repeating-linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0 6px, rgba(255, 255, 255, 0.09) 6px 12px);
  font-size: 11px;
  color: var(--fg-2);
  opacity: 0;
  transform: translateY(3px);
}
.fp-sens-veil .fp-sens-mask { justify-self: center; height: 24px; padding: 0 10px; transition-delay: 0.15s; }
.fp-sens-mask svg { width: 11px; height: 11px; }
.fp-sens.is-sensitive .fp-sens-val { opacity: 0; transform: translateY(-3px); }
.fp-sens.is-sensitive .fp-sens-mask { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .fp-live-pill[data-state="live"] .fp-live-dot { animation: none; }
}

/* Output panel header (Agents hero): title and the schema check pill */
.fp-replay-head { display: flex; align-items: center; justify-content: space-between; }
.fp-replay-head .fp-mfa-title { margin: 0; }
.fp-replay-head .hp-auth-status { height: 22px; font-size: 10.5px; }

/* Use-case cards, the homepage's set of three: hover plays each card's art */
.fp-uses {
  --fg: #F7F8F8;
  --fg-2: #8A8F98;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}
.hp-uses-grid.fp-uses { grid-template-columns: repeat(3, minmax(0, 1fr)); }
/* Three across leaves the panels wider than the homepage's four, so each graphic carries more */
.fp-uses .hp-use-glass { left: 20%; }
.fp-uses .hp-use-glass--top { bottom: 9%; }
/* Pay: a roomier confirmation card makes the whole stack taller at the same row spacing */
.fp-uses .hp-use-confirm { padding: 26px 20px; }
.fp-uses .hp-use-confirm dl { row-gap: 14px; }
.fp-uses .hp-use-confirm .hp-use-cbtn { margin-top: 24px; }
/* Submit: the fields spread evenly down the card from just below the top edge */
.fp-uses .hp-use-form { justify-content: space-between; padding-top: 34px; }
.fp-uses .hp-use-form .hp-use-cbtn { margin-top: 0; }
.fp-uses .hp-use-fetch li:nth-child(n + 3) > * { opacity: 0.4; }
@media (hover: hover) {
  .hp-use:is(:hover, :focus-visible) .hp-use-fetch li:nth-child(4) > * { opacity: 1; transition-delay: 1300ms; }
  .hp-use:is(:hover, :focus-visible) .hp-use-fetch li:nth-child(4) i::before { opacity: 1; transition-delay: 1700ms; }
  .hp-use:is(:hover, :focus-visible) .hp-use-fetch li:nth-child(4) i::after { transform: none; transition-delay: 2700ms; }
}
/* Submit: the date and amount share a row, and the receipt is attached under them */
.fp-use-pair { display: grid; flex: none; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.fp-use-pair .hp-use-field:first-child .hp-use-input { margin-right: 0; }
.fp-use-file {
  display: flex;
  flex: none;
  align-items: center;
  gap: 8px;
  height: 36px;
  margin-right: -40px;
  padding: 0 12px;
  border-radius: 6px;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
}
.fp-use-file svg { flex: none; width: 14px; height: 14px; color: var(--fg-2); }
.fp-use-file em { font-style: normal; color: #4CB782; }
@media (max-width: 900px) {
  .hp-uses-grid.fp-uses { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- Two-up: Auth Component vs. the Deck API ---------- */
.fp-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: clamp(56px, 6.5vw, 104px);
}
.fp-split-card {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 20px;
  background: rgba(255, 255, 255, 0.03);
  color: inherit;
  text-decoration: none;
  transition: background-color 0.3s ease;
}
.fp-split-card:focus-visible { outline: 2px solid var(--text-primary); outline-offset: 3px; }
@media (hover: hover) {
  .fp-split-card:hover { background-color: rgba(255, 255, 255, 0.055); }
  .fp-split-card:hover .hp-use-link svg { transform: translateX(4px); }
}
.fp-split-card .hp-use-desc { max-width: 36em; }
/* Gradient art like the homepage use case cards, with the demo set on top */
.fp-split-visual {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  height: 576px;
  margin-top: auto;
  padding: 48px;
  overflow: hidden;
  background: var(--art);
}
.fp-cmp-visual { --art: linear-gradient(180deg, #547DC5, #6C4A99); }
.fp-api-visual { --art: linear-gradient(180deg, #C77BC1, #6C4A99); }

/* Code */
.fp-code {
  margin: 0;
  font-family: var(--mono);
  font-size: 12.5px;
  line-height: 1.75;
  color: rgba(255, 255, 255, 0.72);
  white-space: pre;
}
.fp-code .k { color: #C77BC1; }
.fp-code .f { color: #A2B9E2; }
.fp-code .p { color: #D4C5E9; }
.fp-code .s { color: #9CCBB8; }
.fp-code .c { color: rgba(255, 255, 255, 0.36); }

/* Auth Component: the hosted component as it ships (light theme), stepping through pick, sign in,
   and connecting. Built at 360x480 and scaled to fit the art. */
.fp-ac {
  --ac-blue: #1062FE;
  --ac-line: #E6E8EB;
  --ac-fg: #111318;
  --ac-fg-2: #6B7079;
  position: relative;
  flex: none;
  width: 360px;
  height: 480px;
  overflow: hidden;
  border-radius: 20px;
  background: #fff;
  box-shadow: 0 24px 60px rgba(20, 12, 50, 0.32);
  color: var(--ac-fg);
  font-size: 13px;
  line-height: 1.35;
  transform: scale(var(--s, 1));
  transition: opacity 0.35s ease;
}
.fp-ac.is-out { opacity: 0; }
.fp-ac p { margin: 0; }
.fp-ac-screen {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 16px 24px 24px;
  opacity: 0;
  transform: translateX(14px);
  transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
  pointer-events: none;
}
.fp-ac-screen.is-on { opacity: 1; transform: none; }
.fp-ac-screen.is-past { transform: translateX(-14px); }
.fp-ac.is-reset * { transition: none !important; }
.fp-ac-top { display: grid; grid-template-columns: 24px 1fr 24px; align-items: center; height: 40px; }
.fp-ac-top > :nth-child(2) { justify-self: center; }
.fp-ac-icon { display: grid; place-items: center; width: 24px; height: 24px; color: #4B5059; }
.fp-ac-icon svg { width: 14px; height: 14px; }
.fp-ac-pair { display: flex; align-items: center; gap: 8px; }
.fp-ac-swap { width: 14px; height: 14px; color: #8A8F98; }
/* The Deck app icon: the wordmark on brand green */
.fp-ac-deck {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #19483D;
}
.fp-ac-deck img { display: block; width: 28px; height: auto; }
/* Scoped under .fp-ac so the margins win over the .fp-ac p reset. The 16px above the title matches the
   16px below the subtitle, so the heading sits evenly between the logos and the content. */
.fp-ac .fp-ac-title { margin-top: 16px; text-align: center; font-size: 16px; font-weight: 600; line-height: 24px; letter-spacing: -0.01em; }
.fp-ac .fp-ac-sub { margin-top: 4px; text-align: center; font-size: 13px; line-height: 20px; color: var(--ac-fg-2); }
.fp-ac-input {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--ac-line);
  border-radius: 9px;
  font-size: 13px;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.fp-ac-input svg { flex: none; width: 15px; height: 15px; color: #6B7079; }
.fp-ac-input [data-val]:empty::before { content: attr(data-ph); color: #9A9EA6; }
.fp-ac-input [data-val] { min-width: 0; white-space: nowrap; overflow: hidden; }
.fp-ac-input [data-val] ~ svg { margin-left: auto; }
.fp-ac-input.is-focus { border-color: var(--ac-blue); box-shadow: 0 0 0 3px rgba(16, 98, 254, 0.12); }
.fp-ac-caret { display: none; width: 1px; height: 15px; margin-left: -8px; background: var(--ac-fg); animation: hpAuthBlink 1s steps(1) infinite; }
.fp-ac-input.is-focus .fp-ac-caret { display: block; }
.fp-ac-input [data-val]:empty + .fp-ac-caret { order: -1; margin: 0 -7px 0 0; }
.fp-ac-search { margin-top: 16px; color: #9A9EA6; }
.fp-ac-list { display: flex; flex-direction: column; gap: 8px; margin: 12px 0 0; padding: 0; list-style: none; }
.fp-ac-src {
  display: flex;
  align-items: center;
  gap: 12px;
  height: 44px;
  padding: 0 12px;
  border: 1px solid var(--ac-line);
  border-radius: 10px;
  font-weight: 500;
  transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.12s ease;
}
.fp-ac-src.is-hover { background: #F6F7F9; border-color: #D5D8DD; }
.fp-ac-src.is-press { transform: scale(0.985); }
.fp-ac-logo {
  position: relative;
  display: grid;
  place-items: center;
  flex: none;
  width: 28px;
  height: 28px;
  overflow: hidden;
  border-radius: 7px;
  background: var(--brand);
  color: #fff;
  font-size: 12px;
  font-weight: 600;
}
.fp-ac-logo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fp-ac-logo--lg { width: 40px; height: 40px; border-radius: 10px; }
.fp-ac-field { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.fp-ac-field + .fp-ac-field { margin-top: 16px; }
.fp-ac-label { font-size: 12.5px; font-weight: 500; line-height: 16px; }
.fp-ac-btn {
  display: grid;
  place-items: center;
  height: 42px;
  margin-top: auto;
  border-radius: 9px;
  background: var(--ac-blue);
  color: #fff;
  font-weight: 500;
  opacity: 0.5;
  transition: opacity 0.25s ease, transform 0.12s ease, filter 0.12s ease;
}
.fp-ac-btn.is-ready { opacity: 1; }
.fp-ac-btn.is-press { transform: scale(0.98); filter: brightness(0.9); }
.fp-ac-progress { display: block; height: 4px; margin-top: 16px; overflow: hidden; border-radius: 2px; background: #EEF0F3; }
.fp-ac-progress i { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--ac-blue); transition: width 0.7s cubic-bezier(0.45, 0, 0.25, 1); }
.fp-ac-steps { display: flex; flex-direction: column; gap: 16px; margin: 24px 0 0; padding: 0; list-style: none; }
.fp-ac-steps li { display: flex; align-items: center; gap: 12px; opacity: 0; transition: opacity 0.25s ease, color 0.25s ease; }
.fp-ac-steps li.is-busy,
.fp-ac-steps li.is-done { opacity: 1; }
.fp-ac-steps li.is-done { color: var(--ac-fg-2); }
.fp-ac-step-ico { position: relative; display: grid; place-items: center; width: 16px; height: 16px; color: var(--ac-blue); }
.fp-ac-ok { width: 16px; height: 16px; opacity: 0; }
.fp-ac-spin {
  position: absolute;
  inset: 2px;
  border: 1.5px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  opacity: 0;
}
.fp-ac-steps li.is-busy .fp-ac-spin { opacity: 1; animation: hpAuthSpin 0.7s linear infinite; }
.fp-ac-steps li.is-done .fp-ac-ok { opacity: 1; }

/* Deck API: the server call from the auth flow guide. Narrower side padding than the component's
   panel, so the window can run wider on laptop screens. */
.fp-api-visual { padding-inline: 32px; }
.fp-code-window {
  width: 560px;
  max-width: 100%;
  overflow: hidden;
  border-radius: 12px;
  background: #0F1011;
  box-shadow: 0 24px 60px rgba(20, 12, 50, 0.32);
}
.fp-code-window .fp-code {
  padding: 22px 24px;
  /* Long lines fade out at narrow widths instead of wrapping */
  -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
  mask-image: linear-gradient(90deg, #000 calc(100% - 28px), transparent);
}

/* Automations: Console panels for a trigger and a workflow, built 400px wide and scaled to fit the art */
.fp-trig-visual { --art: linear-gradient(180deg, #547DC5, #31205A); }
.fp-wfl-visual { --art: linear-gradient(180deg, #6C4A99, #31205A); }
.fp-at {
  --ok: #4CB782;
  --panel: #0F1011;
  --fg: #F7F8F8;
  --fg-2: #8A8F98;
  --fg-3: #62666D;
  --hpc-fg: #F7F8F8;
  display: flex;
  flex: none;
  flex-direction: column;
  gap: 16px;
  width: 400px;
  padding: 18px;
  border-radius: 14px;
  background: var(--panel);
  box-shadow: 0 24px 60px rgba(20, 12, 50, 0.32);
  color: var(--fg);
  font-size: 13px;
  line-height: 1.35;
  -webkit-font-smoothing: antialiased;
  transform: scale(var(--s, 1));
}
.fp-at p { margin: 0; }
.fp-at .hp-auth-status { height: 22px; font-size: 10.5px; }

/* Trigger: the schedule trigger on top and the run it starts below, in the feature glass. The trigger
   card takes the workflow builder's yellow outline as it fires, the run card its green one while running. */
.fp-tr { grid-template-rows: auto minmax(0, 1fr); }
/* The split card is half the page wide, so the glass keeps a smaller inset than in the feature rows */
.fp-split-visual .hp-feature-glass--demo { inset: 14% 12%; }
@media (max-width: 900px) {
  .fp-split-visual .hp-feature-glass--demo { inset: 14px; }
}
.fp-tr-card {
  min-width: 0;
  padding: 14px;
  border-radius: 8px;
  background: var(--panel);
  transition: box-shadow 0.3s ease;
}
.fp-tr-card.is-fire { box-shadow: inset 0 0 0 1.5px #BFAE62, 0 0 0 4px rgba(229, 208, 126, 0.07); }
.fp-tr-run.is-run { box-shadow: inset 0 0 0 1.5px #5FA483, 0 0 0 4px rgba(63, 182, 139, 0.07); }
.fp-tr-head { display: flex; align-items: center; gap: 10px; }
.fp-tr-head .hp-auth-domain { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fp-tr .hp-auth-status { height: 22px; font-size: 10.5px; }
.fp-tr-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 24px;
  height: 24px;
  border-radius: 5px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--fg-2);
}
.fp-tr-ico--trigger { background: rgba(229, 208, 126, 0.12); color: #E5D07E; }
.fp-tr-ico svg { width: 13px; height: 13px; }
.fp-tr-kv { margin: 12px 0 0; }
.fp-tr-kv > div { display: flex; align-items: center; height: 30px; font-size: 11.5px; }
.fp-tr-kv dt { flex: none; width: 64px; color: var(--fg-2); }
.fp-tr-kv dd { display: flex; flex: 1; align-items: center; gap: 7px; min-width: 0; margin: 0; }
.fp-tr-kv em { flex: none; margin-left: auto; font-style: normal; color: var(--fg-3); }
.fp-tr-kv-ico { display: grid; flex: none; place-items: center; color: var(--fg-2); }
.fp-tr-kv-ico svg { width: 13px; height: 13px; }
.fp-tr .fp-tr-kv .hp-auth-logo { width: 14px; height: 14px; border-radius: 3px; font-size: 8px; }
.fp-tr-name { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.fp-tr-steps { margin-top: 10px; }
.fp-tr-step {
  display: flex;
  align-items: center;
  gap: 10px;
  height: 32px;
  font-size: 11.5px;
  color: var(--fg-3);
  transition: color 0.25s ease;
}
.fp-tr-step.is-run,
.fp-tr-step.is-done { color: var(--fg); }
.fp-tr-step em { flex: none; margin-left: auto; font-style: normal; color: var(--fg-2); opacity: 0; transition: opacity 0.25s ease; }
.fp-tr-step.is-done em { opacity: 1; }
.fp-tr-dot {
  position: relative;
  display: grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.14);
  transition: background-color 0.25s ease, box-shadow 0.25s ease;
}
.fp-tr-dot .hp-auth-spin { position: static; width: 12px; height: 12px; border-width: 1.5px; }
.fp-tr-dot svg { display: none; width: 10px; height: 10px; color: var(--ok); }
.fp-tr-step.is-run .fp-tr-dot { box-shadow: none; }
.fp-tr-step.is-run .hp-auth-spin { opacity: 1; animation: hpAuthSpin 0.7s linear infinite; }
.fp-tr-step.is-done .fp-tr-dot { background: rgba(76, 183, 130, 0.14); box-shadow: none; }
.fp-tr-step.is-done .hp-auth-spin { display: none; }
.fp-tr-step.is-done svg { display: block; }

/* Workflow: the workflow builder's canvas — a dot grid with the trigger and task cards joined by
   connectors, a port and line under the trigger and a dashed line between tasks. A
   run lights the connectors as it reaches each card; the running card takes the builder's selected
   (green) outline, finished ones a check and what they found, skipped ones dim. */
.fp-at.fp-wb-canvas {
  width: 420px;
  padding: 30px 24px 26px;
  background:
    radial-gradient(circle, rgba(255, 255, 255, 0.075) 1px, transparent 1.3px) 0 0 / 16px 16px,
    #0C0D0D;
}
.fp-wb { display: flex; flex-direction: column; transition: opacity 0.3s ease; }
.fp-wb.is-out { opacity: 0; }
.fp-wb-node {
  position: relative;
  display: flex;
  align-items: center;
  gap: 12px;
  height: 62px;
  padding: 0 14px 0 12px;
  border-radius: 12px;
  background: #101211;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.1);
  transition: box-shadow 0.3s ease, opacity 0.35s ease;
}
.fp-wb-node[data-state="run"] { box-shadow: inset 0 0 0 1.5px #5FA483, 0 0 0 4px rgba(63, 182, 139, 0.07); }
.fp-wb-node[data-kind="trigger"][data-state="run"] { box-shadow: inset 0 0 0 1.5px #BFAE62, 0 0 0 4px rgba(229, 208, 126, 0.07); }
.fp-wb-node[data-state="skip"] { opacity: 0.42; }
.fp-wb-ico {
  display: grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 9px;
  background: rgba(63, 182, 139, 0.1);
  color: #8FD3B0;
}
.fp-wb-node[data-kind="trigger"] .fp-wb-ico { background: rgba(229, 208, 126, 0.13); color: #E5D07E; }
.fp-wb-ico svg { width: 18px; height: 18px; }
.fp-wb-text { flex: 1; min-width: 0; }
.fp-wb-label { overflow: hidden; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; color: var(--fg-2); }
.fp-wb-label b { margin: 0 5px; font-weight: 400; opacity: 0.6; }
.fp-wb-title { margin-top: 2px; overflow: hidden; font-size: 14px; font-weight: 500; white-space: nowrap; text-overflow: ellipsis; }
.fp-wb-if {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 5px;
  height: 22px;
  padding: 0 7px;
  border-radius: 6px;
  background: rgba(84, 125, 197, 0.2);
  font-family: var(--mono);
  font-size: 11.5px;
  color: #B9CBEA;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.fp-wb-if svg { width: 12px; height: 12px; }
/* Once the run has checked the condition: green when it held, grey when it didn't */
.fp-wb-if[data-v="true"] { background: rgba(63, 182, 139, 0.16); color: #A7DCC3; }
.fp-wb-if[data-v="false"] { background: rgba(255, 255, 255, 0.07); color: var(--fg-2); }
.fp-wb-end { display: grid; flex: none; place-items: center; width: 18px; height: 18px; color: var(--fg-2); }
.fp-wb-end > * { grid-area: 1 / 1; }
.fp-wb-more svg { display: block; width: 16px; height: 16px; }
.fp-wb-end .hpc-spin { display: none; width: 12px; height: 12px; }
.fp-wb-end > svg { display: none; width: 14px; height: 14px; color: var(--ok); }
.fp-wb-node[data-state="run"] .fp-wb-more,
.fp-wb-node[data-state="ok"] .fp-wb-more { display: none; }
.fp-wb-node[data-state="run"] .hpc-spin,
.fp-wb-node[data-state="ok"] .fp-wb-end > svg { display: block; }

/* Connectors; is-on once the run has passed through */
.fp-wb-port,
.fp-wb-gap { --link: rgba(255, 255, 255, 0.16); display: flex; flex-direction: column; align-items: center; }
.fp-wb-port.is-on,
.fp-wb-gap.is-on { --link: rgba(95, 164, 131, 0.75); }
.fp-wb-port { position: relative; height: 34px; }
.fp-wb-port::before {
  content: '';
  width: 11px;
  height: 11px;
  margin-top: -6px;
  border-radius: 50%;
  background: #0C0D0D;
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.fp-wb-port i { width: 1.5px; height: 18px; margin-top: 5px; border-radius: 1px; background: var(--link); transition: background-color 0.3s ease; }
.fp-wb-gap { padding: 5px 0; }
.fp-wb-gap i { width: 0; height: 24px; border-left: 1.5px dashed var(--link); transition: border-color 0.3s ease; }

@media (max-width: 900px) {
  .fp-split { grid-template-columns: minmax(0, 1fr); }
  .fp-split-visual { height: 440px; padding: 24px 16px; }
}

/* ---------- Placeholders: subtle boxes where a page's graphics will go ---------- */
.fp-ph {
  background: rgba(255, 255, 255, 0.03);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}
.fp-ph--wide { height: clamp(440px, 40vw, 560px); margin-top: clamp(56px, 6.5vw, 104px); }
.hp-feature-desc + .hp-feature-desc { margin-top: 1em; }
/* Inline, so when a link wraps its arrow follows the last word instead of staying on the first line */
.hp-use-link { display: block; }
.hp-use-link svg { display: inline-block; margin-left: 6px; vertical-align: -3px; }

/* ---------- Phones: tighter spacing so copy and demos get more of the width ---------- */
@media (max-width: 600px) {
  .fp-section { padding-top: 96px; }
  /* Cards: 14px in from the card's edge for demos, 20px for copy */
  .fp-features .hp-feature { padding: 14px; gap: 16px; }
  .fp-features .hp-feature-copy { padding: 10px 6px 2px; }
  .fp-features .hp-feature-title { font-size: 32px; text-wrap: pretty; }
  .fp-features .hp-feature-desc { margin-top: 20px; }
  .fp-features .hp-feature-link { margin-top: 28px; }
  .fp-split-card,
  .fp-uses .hp-use { padding: 14px; }
  .fp-split-card > :not(.fp-split-visual),
  .fp-uses .hp-use > :not(.hp-use-art) { margin-inline: 6px; }
  .fpd { padding-block: 40px; }
  .fp-split-visual { height: 400px; padding: 20px 12px; }
  /* The trigger scene (360×372) fills its frame, so its run card doesn't stretch past the steps */
  .fp-trig-visual { height: auto; aspect-ratio: 1 / 1.03; }
  .fp-code-window .fp-code { padding: 16px 18px; font-size: 11px; }
  /* Icons follow the copy instead of sitting at the bottom of a fixed-height card */
  .fp-cards .hp-trust-card { min-height: 0; }
  .fp-cards .hp-trust-icon { padding-top: 24px; }
  .deck-cta { padding-inline: var(--hp-gutter, 20px); }
  .deck-cta-heading { font-size: 36px; text-wrap: balance; }
  /* Side by side and the same width, like the hero's buttons */
  .deck-cta-actions { flex-direction: row; flex-wrap: nowrap; }
  .deck-cta-actions .hp-btn { flex: 1; max-width: 200px; }
}