/* ============================================================================
   Proxi landing — shared structural + component CSS (variable-driven)
   ----------------------------------------------------------------------------
   This file is THEME-AGNOSTIC. Every color, font, radius and a few size knobs
   come from CSS variables defined by each variation's tokens.css. Swap tokens
   -> the whole page (including the product mockups) re-themes for free.

   Variable contract a tokens.css MUST define (see warm/tokens.css for values):
     Surfaces : --canvas --raised --raised-2 --panel-soft --inverse-bg
     Ink      : --ink --ink-2 --ink-3 --ink-4 --on-accent --inverse-ink --inverse-ink-2
     Lines    : --hairline --hairline-2 --line-strong
     Accent   : --accent --accent-2 --accent-soft --live --selection
     Panels   : --panel-grad-1 --panel-grad-2   (hero product panel + final CTA)
     State    : --ok --ok-bg --ok-bd  --warn --warn-bg --warn-bd
                --danger --danger-bg --danger-bd  --info --info-bg --info-bd
                --tier-bg --tier-fg --tier-bd  --cluster-bg --cluster-fg --cluster-bd
     Shadow   : --shadow-sm --shadow-card --shadow-pop --shadow-hero
     Type     : --font-display --font-body --font-product --font-mono
                --weight-display --tracking-display --tracking-h2
                --hero-size --h1-size --h2-size --h3-size --eyebrow-size
     Shape    : --r-sm --r --r-md --r-lg --r-xl --r-2xl --r-pill --maxw
   ============================================================================ */

/* Cal Sans — the real product's display font (used only inside product mockups). */
@font-face { font-family: "Cal Sans"; src: url("/landing/assets/fonts/CalSans-SemiBold.woff2") format("woff2"); font-weight: 600; font-display: swap; }

*,*::before,*::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
html, body { margin: 0; padding: 0; background: var(--canvas); }
/* Clip horizontal bleed at the source (hero slant, floating logos) so the page
   never scrolls sideways — WITHOUT overflow on html/body, which would break the
   sticky nav. */
.hero, .circuit, .section { overflow-x: clip; }
body {
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  font-feature-settings: "cv11","ss01";
}
a { color: inherit; text-decoration: none; }
img, svg { display: block; max-width: 100%; }
button { font: inherit; color: inherit; cursor: pointer; }
::selection { background: var(--selection, var(--accent)); color: var(--ink); }

/* ── Layout ───────────────────────────────────────────────────────────────*/
.wrap { width: 100%; max-width: var(--maxw, 1200px); margin-inline: auto; padding-inline: 28px; }
.section { position: relative; padding-block: clamp(88px, 11vw, 168px); }
.section--tight { padding-block: clamp(48px, 6vw, 88px); }
.rule { height: 1px; background: var(--hairline); border: 0; margin: 0; }
.center { text-align: center; }

/* ── Type ─────────────────────────────────────────────────────────────────*/
h1,h2,h3,h4 { margin: 0; font-family: var(--font-display); font-weight: var(--weight-display); color: var(--ink); }
h1 { font-size: var(--h1-size); line-height: 1.02; letter-spacing: var(--tracking-display); }
h2 { font-size: var(--h2-size); line-height: 1.06; letter-spacing: var(--tracking-h2); }
h3 { font-size: var(--h3-size); line-height: 1.2; letter-spacing: -0.01em; font-weight: 700; }
p  { margin: 0; }
.muted { color: var(--ink-3); }
.ink2  { color: var(--ink-2); }

.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-body); font-size: var(--eyebrow-size);
  font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--accent); margin: 0 0 16px;
}
/* .eyebrow--plain kept as a no-op alias (used by the CTA card markup) */

.lede {
  font-size: 17.5px;
  line-height: 1.6; color: var(--ink-2); max-width: 60ch;
}
.section__head { max-width: 740px; }
.section__head--center { margin-inline: auto; text-align: center; }
.section__head h2 + .lede { margin-top: 18px; }

/* ── Buttons ──────────────────────────────────────────────────────────────*/
.btn {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 11px 20px; border-radius: var(--r-md);
  font-family: var(--font-body); font-size: 15px; font-weight: 600;
  letter-spacing: 0.005em; border: 1px solid transparent;
  transition: transform .18s var(--ease,cubic-bezier(.16,1,.3,1)), background .18s, border-color .18s, box-shadow .18s, color .18s;
  white-space: nowrap;
}
.btn i { font-size: 15px; }
.btn--primary { background: var(--ink); color: var(--canvas); box-shadow: var(--shadow-sm); }
.btn--primary:hover { transform: translateY(-1px); box-shadow: var(--shadow-card); }
.btn--ghost { background: transparent; color: var(--ink-2); border-color: var(--hairline-2); }
.btn--ghost:hover { background: var(--raised-2); color: var(--ink); }
.btn--accent { background: var(--accent); color: var(--on-accent); }
.btn--accent:hover { transform: translateY(-1px); filter: brightness(1.05); }
.btn--light { background: var(--inverse-ink); color: var(--inverse-bg); }
.btn--light:hover { transform: translateY(-1px); }
/* Slightly larger CTA (scoped modifier — does not affect default .btn sizing) */
.btn--lg { padding: 15px 28px; font-size: 16px; }
.btn--lg i { font-size: 16px; }

/* ── Nav ──────────────────────────────────────────────────────────────────*/
/* NO backdrop-filter here, ever. The sticky nav sat over the hero board's
   GSAP animation, and Chrome-stable's compositor intermittently drew the
   blur's backdrop from a stale/offset snapshot — the whole page flashed
   corrupted frames while the board animated at scroll 0 (July 2026
   "homepage flickers at the top" incident; long-standing Chromium
   backdrop-filter flicker bugs, e.g. crbug 339841685 / 41471914). A solid
   canvas wash + hairline on scroll gives the same clean read without
   creating a backdrop root for the compositor to get wrong. */
.nav {
  position: sticky; top: 0; z-index: 60;
  padding-top: 12px;
  background: color-mix(in srgb, var(--canvas) 78%, transparent);
  border-bottom: 1px solid transparent; transition: border-color .2s, background .2s;
}
.nav.is-scrolled { border-bottom-color: var(--hairline); background: var(--canvas); }
/* Template 3-zone nav: links left · brand lockup center · actions right */
.nav__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; height: 68px; gap: 20px; }
.nav__brand { justify-self: center; display: inline-flex; align-items: center; }
.nav__logo { height: 34px; width: auto; }
.nav__links { display: flex; align-items: center; gap: 4px; justify-self: start; }
.nav__links a { padding: 8px 12px; border-radius: var(--r); font-size: 15px; font-weight: 500; color: var(--ink-2); transition: color .15s, background .15s; }
.nav__links a:hover { color: var(--ink); background: var(--raised-2); }
.nav__right { display: flex; align-items: center; gap: 12px; justify-self: end; }
.nav__login { font-size: 15px; font-weight: 500; color: var(--ink-2); padding: 8px 12px; }
.nav__login:hover { color: var(--ink); }

/* ── Hero (single column: copy → olive product panel → proof) ─────────────*/
.hero { position: relative; overflow: hidden; background: var(--canvas); padding-top: clamp(18px, 2.5vw, 38px); padding-bottom: clamp(48px, 7vw, 96px); }
.hero .wrap { position: relative; z-index: 1; }
.hero__how { display: inline-flex; align-items: center; gap: 8px; font-size: 16px; font-weight: 600; color: var(--ink); }
.hero__how i { font-size: 15px; font-weight: 400; transition: transform .18s var(--ease, ease); }
.hero__how:hover i { transform: translateX(3px); }
.wrap--wide { max-width: 1240px; }

/* The olive gradient product panel. Static CSS on purpose — it must render
   even if JS/GSAP never loads (min-height keeps the hero from collapsing).
   The mockup card inside has square bottom corners and a negative bottom
   margin, so the panel's overflow:hidden crops it mid-row — a deliberate
   "screenshot bleeding off the sheet" crop. Depth comes from the mockup's own
   shadow, NOT from a 3D tilt: a rotateY/rotateX + perspective forces the frame
   onto a composited layer that rasterizes at 1x and softens every glyph.
   Keep it FLAT so the mockup stays razor-sharp at any zoom. */
.hero-panel {
  position: relative; overflow: hidden; border-radius: var(--r-2xl, 26px);
  background: linear-gradient(155deg, var(--panel-grad-1, #eaeddb), var(--panel-grad-2, #dce2c4));
  padding: clamp(24px, 4.5vw, 56px) clamp(16px, 4.5vw, 56px) 0;
  min-height: 320px; margin-top: clamp(44px, 6vw, 64px);
}
.hero-panel .hero__stage, .hero-panel .hsw__root { min-height: 0; }
.hero-panel .hero__stage { margin-bottom: -32px; }
.hero__proof { display: flex; justify-content: center; margin-top: clamp(28px, 4vw, 44px); }
.trustbar { display: inline-flex; align-items: center; gap: 12px; margin-top: 30px; padding: 9px 16px 9px 10px; border-radius: 999px; border: 1px solid var(--hairline-2); background: var(--raised); box-shadow: var(--shadow-sm); max-width: 100%; }
.trustbar--center { margin-top: 0; }
.trustbar__logo { width: 30px; height: 30px; border-radius: 7px; background: var(--ink); padding: 5px; flex: none; display: grid; place-items: center; }
.trustbar__logo img { width: 100%; height: 100%; object-fit: contain; }
.trustbar p { font-size: 13.5px; line-height: 1.4; color: var(--ink-2); text-align: left; }
.trustbar cite { color: var(--ink-3); font-style: normal; }

/* highlighted @mention chip (small pop) */
.mention { display: inline-block; background: var(--accent-soft); color: var(--accent-2); padding: 0 6px; border-radius: 5px; font-weight: 600; }
.statuschip {
  display: inline-flex; align-items: center; gap: 9px; margin-bottom: 26px;
  padding: 7px 14px 7px 12px; border-radius: 999px;
  border: 1px solid var(--line-strong, var(--hairline-2)); background: var(--raised);
  font-size: 13.5px; font-weight: 500; color: var(--ink-2); box-shadow: var(--shadow-sm);
}
.statuschip .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--live, var(--ok));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--live, var(--ok)) 22%, transparent); }
.hero__h1 { font-size: var(--hero-size, clamp(2.4rem,4.6vw,4rem)); max-width: 860px; text-wrap: pretty; }
.hero__sub { margin-top: 24px; font-size: clamp(1.05rem, 1.3vw, 1.1875rem); line-height: 1.55; color: var(--ink-2); max-width: 620px; text-wrap: pretty; }
.hero__sub strong { color: var(--ink); font-weight: 600; }
.cta-row { display: flex; flex-wrap: wrap; gap: 14px 26px; margin-top: 32px; align-items: center; }

/* ── Hero animation switcher (the 5-way variant contest) ───────────────────*/
.hero__stage { position: relative; width: 100%; min-height: 480px; }
.hsw__root { position: relative; width: 100%; min-height: 480px; }
.hero__switch { display: flex; align-items: center; justify-content: center; gap: 16px; margin-top: 22px; flex-wrap: wrap; }
.hero__switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 6px; border-radius: var(--r-lg); }
.hsw__btn { width: 34px; height: 34px; border-radius: 999px; border: 1px solid var(--hairline-2); background: var(--raised); color: var(--ink-3); display: grid; place-items: center; box-shadow: var(--shadow-sm); transition: transform .15s var(--ease,cubic-bezier(.16,1,.3,1)), color .15s, border-color .15s; flex: none; }
.hsw__btn:hover { color: var(--ink); border-color: var(--ink); transform: translateY(-1px); }
.hsw__btn i { font-size: 16px; }
.hsw__meta { display: flex; flex-direction: column; align-items: center; text-align: center; min-width: 200px; }
.hsw__label { font-size: 13.5px; font-weight: 600; color: var(--ink); }
.hsw__blurb { font-size: 11px; color: var(--ink-4); margin-top: 3px; max-width: 30ch; line-height: 1.4; }
.hsw__dots { display: inline-flex; gap: 7px; align-items: center; margin-top: 8px; }
.hsw__dot { width: 7px; height: 7px; border-radius: 999px; background: var(--hairline-2); border: 0; padding: 0; cursor: pointer; transition: background .15s, transform .15s; }
.hsw__dot.on { background: var(--accent); transform: scale(1.3); }
.hsw__count { font-size: 10.5px; color: var(--ink-4); font-family: var(--font-mono); margin-top: 6px; }
.hsw__err { display: grid; place-items: center; min-height: 480px; color: var(--ink-4); font-size: 13px; text-align: center; padding: 20px; }

/* ── Product frame (browser + app chrome) ─────────────────────────────────*/
.frame {
  position: relative;
  background: var(--raised); border: 1px solid var(--hairline-2);
  border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-card);
  /* product mockups use the REAL product font stack (Cal Sans display + Inter UI
     + Geist Mono), regardless of the marketing variant's typography. The
     font-family declaration matters now that the marketing body is Familjen
     Grotesk — without it the re-scoped --font-body never actually applies. */
  --font-display: "Cal Sans", "Inter", system-ui, sans-serif;
  --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;
  --weight-display: 600;
  font-family: var(--font-body);
}
/* Product-UI vizzes outside a .frame keep the real product's Inter, not the
   marketing voice — they are "screenshots", not copy. */
.minicard, .cardstack, .syncbox, .closecard, .loopchip, .dedup__issue, .closerow { font-family: var(--font-product, "Inter", system-ui, sans-serif); }
/* Colored gradient accent edge (Modem signature). Per-section hue via --frame-accent. */
.frame::before {
  content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 5px; z-index: 4;
  background: linear-gradient(180deg, var(--frame-accent, var(--accent)), color-mix(in srgb, var(--frame-accent, var(--accent)) 28%, transparent));
}
.frame__bar { display: flex; align-items: center; gap: 14px; padding: 9px 14px; border-bottom: 1px solid var(--hairline); background: var(--raised-2); }
.frame__dots { display: flex; gap: 6px; }
.frame__dots span { width: 10px; height: 10px; border-radius: 999px; background: var(--hairline-2); }
.frame__url {
  display: inline-flex; align-items: center; gap: 7px; min-width: 240px;
  padding: 4px 12px; border-radius: var(--r); background: var(--raised);
  border: 1px solid var(--hairline); font-family: var(--font-mono); font-size: 11.5px; color: var(--ink-4);
}
.appbar { display: flex; align-items: center; gap: 12px; padding: 9px 16px; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--raised) 90%, transparent); }
.brand { display: flex; align-items: center; gap: 7px; }
.brand img { height: 20px; width: auto; }
.badge-ai {
  font-size: 9px; font-weight: 800; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 4px;
  color: var(--accent-2); background: var(--accent-soft); border: 1px solid var(--hairline-2);
}
.appbar__tabs { display: flex; gap: 2px; margin-inline: auto; }
.appbar__tabs span { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: var(--r); font-size: 12.5px; font-weight: 500; color: var(--ink-4); }
.appbar__tabs .on { color: var(--ink); background: var(--raised-2); }
.appbar__ws { display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: var(--r); border: 1px solid var(--hairline); background: var(--raised); font-size: 12px; color: var(--ink); }
.appbar__ws .sq { width: 20px; height: 20px; border-radius: 5px; background: var(--accent); color: var(--on-accent); display: grid; place-items: center; font-size: 10px; font-weight: 700; }
.avatar { width: 26px; height: 26px; border-radius: 999px; background: var(--ink); color: var(--canvas); display: grid; place-items: center; font-size: 10px; font-weight: 700; flex: none; }

/* ── Source marks + clusters ──────────────────────────────────────────────*/
.srcmark { width: 22px; height: 22px; border-radius: 6px; background: #fff; border: 1px solid var(--hairline-2); display: grid; place-items: center; padding: 3px; flex: none; }
.srcmark img { width: 100%; height: 100%; object-fit: contain; }
.cluster { display: inline-flex; align-items: center; }
.cluster .srcmark { box-shadow: 0 0 0 1.5px var(--raised); }
.cluster .srcmark + .srcmark { margin-left: -8px; }
.cluster .more { min-width: 22px; height: 22px; border-radius: 6px; background: var(--ink); color: var(--canvas); display: inline-grid; place-items: center; font-size: 9px; font-weight: 700; margin-left: -8px; box-shadow: 0 0 0 1.5px var(--raised); padding: 0 5px; }
.chip-cluster { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600; color: var(--cluster-fg); background: var(--cluster-bg); border: 1px solid var(--cluster-bd); padding: 1px 7px; border-radius: 999px; white-space: nowrap; }

/* ── Pills / badges ───────────────────────────────────────────────────────*/
.pill { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: 999px; font-size: 10.5px; font-weight: 600; border: 1px solid var(--hairline-2); color: var(--ink-3); background: var(--raised); white-space: nowrap; }
.pill--mono { font-family: var(--font-mono); }
.pri { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px 1px 6px; border-radius: 999px; font-size: 9.5px; font-weight: 700; letter-spacing: .03em; }
.pri--urgent { color: var(--danger); background: var(--danger-bg); border: 1px solid var(--danger-bd); }
.pri--high { color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-bd); }
.pri--med { color: var(--ink-2); background: var(--raised-2); border: 1px solid var(--hairline-2); }
.pri--low { color: var(--info); background: var(--info-bg); border: 1px solid var(--info-bd); }
.rev { display: inline-flex; align-items: center; gap: 4px; padding: 1px 8px 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--tier-fg); background: var(--tier-bg); border: 1px solid var(--tier-bd); white-space: nowrap; }
.rev .t { opacity: .6; font-weight: 500; }
.tag-ok { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--info); background: var(--info-bg); border: 1px solid var(--info-bd); font-family: var(--font-mono); }
.tag-warn { display: inline-flex; align-items: center; gap: 4px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--warn); background: var(--warn-bg); border: 1px solid var(--warn-bd); }
.tag-done { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: 10.5px; font-weight: 600; color: var(--ok); background: var(--ok-bg); border: 1px solid var(--ok-bd); }

/* ── Inbox mockup ─────────────────────────────────────────────────────────*/
.mock { background: var(--canvas); padding: 22px 24px 14px; }
.mock__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.mock__sub { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.toolbar { display: flex; align-items: center; gap: 10px; margin: 16px 0 12px; flex-wrap: wrap; }
.seg { display: inline-flex; gap: 4px; }
.seg span { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--r); font-size: 12px; font-weight: 500; color: var(--ink-3); }
.seg .on { background: var(--ink); color: var(--canvas); }
.seg .c { font-size: 10px; font-weight: 700; padding: 0 6px; border-radius: 999px; background: var(--raised-2); color: var(--ink-4); }
.seg .on .c { background: color-mix(in srgb, var(--canvas) 22%, transparent); color: var(--canvas); }
.toolbar__spacer { margin-left: auto; }
.searchbox { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: var(--r); background: var(--raised); border: 1px solid var(--hairline-2); font-size: 12px; color: var(--ink-4); min-width: 170px; }
.filterbar { display: flex; align-items: center; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.filterbar .lbl { font-size: 11px; color: var(--ink-4); }
.filterbar .f { padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 500; color: var(--ink-3); }
.filterbar .f.on { background: var(--raised-2); border: 1px solid var(--hairline-2); color: var(--ink); }
.row { display: flex; align-items: center; gap: 14px; padding: 15px 4px; border-bottom: 1px solid var(--hairline); transition: background .15s; }
.row:hover { background: var(--raised-2); }
.row__check { width: 16px; height: 16px; border-radius: 999px; border: 1.5px solid var(--hairline-2); flex: none; }
.row__title { flex: 1; min-width: 0; font-size: 14px; font-weight: 500; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row__cust { font-size: 11px; color: var(--ink-4); flex: none; }
.row__date { font-size: 10.5px; color: var(--ink-4); font-family: var(--font-mono); flex: none; }

/* ── Faithful Issues tab (matches the real product) ───────────────────────*/
.issv { padding: 18px 22px 8px; }
.issv__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 22px; letter-spacing: -0.02em; color: var(--ink); }
.issv__sub { font-size: 12.5px; color: var(--ink-3); margin-top: 5px; }
.issv__tabs { display: flex; align-items: center; gap: 6px; margin: 16px 0 10px; }
.issv__tabs .t { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 7px; font-size: 12.5px; font-weight: 500; color: var(--ink-3); white-space: nowrap; }
.issv__tabs .t b { font-weight: 600; color: var(--ink-4); font-size: 11px; }
.issv__tabs .t.on { background: var(--ink); color: var(--canvas); }
.issv__tabs .t.on b { color: var(--canvas); opacity: .7; }
.issv__tabs .sp { flex: 1; }
.issv__tabs .search { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border: 1px solid var(--hairline-2); border-radius: 7px; font-size: 12px; color: var(--ink-4); }
.issv__tabs .newbtn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 11px; background: var(--ink); color: var(--canvas); border-radius: 7px; font-size: 12px; font-weight: 500; }
.issv__filters { display: flex; align-items: center; gap: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hairline); flex-wrap: wrap; }
.issv__filters .f { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--ink-4); }
.issv__filters .f b { color: var(--ink-2); font-weight: 500; }
.issv__filters .sp { flex: 1; }
.issv__filters .tg { font-size: 11px; color: var(--ink-3); padding: 3px 9px; border-radius: 99px; border: 1px solid var(--hairline-2); }
.issv__filters .tg.on { background: var(--raised-2); color: var(--ink); }
.issv__group { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 600; color: var(--ink-2); padding: 12px 2px 2px; }
.issv__group i { color: var(--ink-4); font-size: 11px; }
.issv__group b { color: var(--ink-4); font-weight: 600; }
.issrow { display: flex; align-items: center; gap: 11px; padding: 12px 4px; border-bottom: 1px solid var(--hairline); }
/* Priority signal bars — matches the product's PriorityPill glyph EXACTLY:
   4 ascending bars (h 4/6/8/10), filled left-to-right up to the tier in the
   tier's exact color, the rest left #e5e7eb gray. "none" = 4 dim gray bars.
   Colors are the product's real priority hues, not the marketing tokens. */
.pbars { display: inline-flex; align-items: flex-end; gap: 1.5px; height: 10px; flex: none; }
.pbars i { width: 2px; background: #e5e7eb; border-radius: 0.8px; }
.pbars i:nth-child(1) { height: 4px; } .pbars i:nth-child(2) { height: 6px; }
.pbars i:nth-child(3) { height: 8px; } .pbars i:nth-child(4) { height: 10px; }
.pbars--low    i:nth-child(-n+1) { background: #1d4ed8; }
.pbars--med    i:nth-child(-n+2) { background: #374151; }
.pbars--high   i:nth-child(-n+3) { background: #c2410c; }
.pbars--urgent i:nth-child(-n+4) { background: #b91c1c; }
.issrow .ck { width: 15px; height: 15px; border-radius: 99px; border: 1.5px solid var(--hairline-2); flex: none; }
.issrow .it { flex: 1; min-width: 0; font-size: 13px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.issrow .it .num { color: var(--ink-4); font-family: var(--font-mono); font-size: 11px; }
.custpill { font-size: 10.5px; color: var(--ink-3); background: var(--raised-2); border: 1px solid var(--hairline); padding: 1px 7px; border-radius: 99px; white-space: nowrap; flex: none; }
.teampill { font-size: 10.5px; color: var(--accent-2); background: var(--accent-soft); border: 1px solid var(--hairline-2); padding: 1px 7px; border-radius: 99px; flex: none; }
.lin { display: inline-flex; align-items: center; gap: 4px; font-size: 10.5px; color: var(--ink-3); border: 1px solid var(--hairline-2); padding: 1px 7px; border-radius: 99px; font-family: var(--font-mono); white-space: nowrap; flex: none; }
.lin .d { width: 5px; height: 5px; border-radius: 9px; background: var(--ink-4); }
.issrow .dt { font-size: 10.5px; color: var(--ink-4); font-family: var(--font-mono); flex: none; min-width: 42px; text-align: right; }
/* hero (narrow column) hides the lower-priority columns so rows never crowd */
.issv--compact .custpill, .issv--compact .teampill { display: none; }

/* ── Signal detail mockup ─────────────────────────────────────────────────*/
.sig { padding: 18px 20px; background: var(--canvas); }
.sig__crumb { font-size: 11.5px; color: var(--ink-4); font-family: var(--font-mono); display: flex; align-items: center; gap: 6px; }
.sig__title { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 22px; letter-spacing: -0.02em; margin-top: 8px; }
.sig__status { display: flex; align-items: center; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
.sig__grid { display: grid; grid-template-columns: 1fr 220px; gap: 18px; margin-top: 16px; }
.card { background: var(--raised); border: 1px solid var(--hairline-2); border-radius: var(--r-md); }
.card__h { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); padding: 12px 14px 0; }
.qrow { display: flex; gap: 12px; padding: 12px 14px; border-top: 1px solid var(--hairline); }
.qrow:first-of-type { border-top: 0; }
.qrow__body { flex: 1; min-width: 0; }
.qrow__meta { font-size: 10.5px; color: var(--ink-4); margin-bottom: 4px; display: flex; gap: 6px; align-items: center; }
.qrow__text { font-size: 12.5px; line-height: 1.5; color: var(--ink); font-style: italic; }
.qrow__text mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--ink); padding: 0 3px; border-radius: 2px; }
.linkgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; padding: 12px 14px; }
.linkslot { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: var(--r); border: 1px dashed var(--hairline-2); font-size: 11.5px; color: var(--ink-3); }
.linkslot.filled { border-style: solid; background: var(--raised-2); color: var(--ink); }
.rail { display: flex; flex-direction: column; gap: 0; }
.prop { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px; border-top: 1px solid var(--hairline); font-size: 12px; }
.prop:first-child { border-top: 0; }
.prop .k { color: var(--ink-4); }
.prop .v { color: var(--ink); font-weight: 500; }

/* ── Ask Proxi chat mockup ────────────────────────────────────────────────*/
.chat { padding: 18px 20px; background: var(--canvas); display: flex; flex-direction: column; gap: 14px; }
.chat__turn { display: flex; gap: 10px; }
.chat__turn.user { justify-content: flex-end; }
.chat__ava { width: 26px; height: 26px; border-radius: 7px; flex: none; display: grid; place-items: center; background: var(--accent); color: var(--on-accent); font-size: 11px; font-weight: 700; }
.chat__bubble { max-width: 80%; font-size: 13px; line-height: 1.55; }
.chat__bubble.ai { color: var(--ink); }
.chat__bubble.user { background: var(--ink); color: var(--canvas); padding: 10px 14px; border-radius: var(--r-md); font-weight: 500; }
.chat__bubble strong { font-weight: 600; }
.insight { margin-top: 10px; padding: 12px 14px; border-radius: var(--r-md); background: var(--raised); border: 1px solid var(--hairline-2); }
.insight .h { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 6px; }
.goalgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 10px; }
.goal { display: flex; gap: 9px; align-items: flex-start; padding: 11px; border-radius: var(--r-md); border: 1px solid var(--hairline-2); background: var(--raised); }
.goal i { color: var(--accent-2); font-size: 16px; margin-top: 1px; }
.goal .t { font-size: 12.5px; font-weight: 600; }
.goal .d { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.chat__input { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 9px 12px; border-radius: var(--r-md); border: 1px solid var(--hairline-2); background: var(--raised); color: var(--ink-4); font-size: 12.5px; }
.chat__input .kbd { margin-left: auto; font-family: var(--font-mono); font-size: 10px; padding: 1px 6px; border-radius: 4px; border: 1px solid var(--hairline-2); }

/* ── Integrations grid mockup ─────────────────────────────────────────────*/
.intscreen { padding: 18px 20px; background: var(--canvas); }
.intbanner { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: var(--r-md); background: var(--ok-bg); border: 1px solid var(--ok-bd); color: var(--ok); font-size: 12.5px; font-weight: 600; margin-bottom: 14px; }
.intgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.intcard { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: var(--r-md); border: 1px solid var(--hairline-2); background: var(--raised); }
.intcard .meta { flex: 1; min-width: 0; }
.intcard .n { font-size: 13px; font-weight: 600; color: var(--ink); }
.intcard .d { font-size: 11px; color: var(--ink-4); margin-top: 1px; }

/* ── Observability mockup ─────────────────────────────────────────────────*/
.obs { padding: 18px 20px; background: var(--canvas); display: grid; grid-template-columns: 1.2fr 1fr; gap: 14px; }
.obs__panel { background: var(--raised); border: 1px solid var(--hairline-2); border-radius: var(--r-md); padding: 14px; }
.obs__panel .h { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); display: flex; align-items: center; gap: 7px; margin-bottom: 10px; }
.obs__metric { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 30px; letter-spacing: -0.02em; color: var(--ink); }
.obs__delta { font-size: 12px; font-weight: 600; color: var(--ok); }
.spark { width: 100%; height: 56px; margin-top: 8px; }
.spark path.line { fill: none; stroke: var(--accent); stroke-width: 2; }
.spark path.area { fill: color-mix(in srgb, var(--accent) 12%, transparent); stroke: none; }
.spark .marker { fill: var(--ok); }
.checkline { display: flex; align-items: center; gap: 8px; padding: 7px 0; font-size: 12.5px; color: var(--ink-2); border-top: 1px solid var(--hairline); }
.checkline:first-of-type { border-top: 0; }
.checkline i { color: var(--ok); font-size: 14px; flex: none; }

/* ── Feature section (alternating text + product media) ───────────────────*/
.feature__grid { display: grid; grid-template-columns: minmax(0,0.85fr) minmax(0,1.15fr); gap: clamp(32px,5vw,72px); align-items: center; }
.feature--reverse .feature__grid { direction: rtl; }
.feature--reverse .feature__grid > * { direction: ltr; }
.feature__copy { max-width: 460px; }
.feature__bullets { list-style: none; margin: 24px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 14px; }
.feature__bullets li { display: flex; gap: 12px; font-size: 15px; line-height: 1.5; color: var(--ink-2); }
.feature__bullets i { color: var(--accent-2); font-size: 18px; margin-top: 1px; flex: none; }
.feature__bullets b { color: var(--ink); font-weight: 600; }
.feature__media .frame { box-shadow: var(--shadow-card); }

/* ── Anatomy (one issue, every channel) ──────────────────────────────────*/
.clusterrow { display: flex; align-items: center; gap: 14px; padding: 16px 20px; background: var(--raised); border: 1px solid var(--hairline-2); border-radius: var(--r-lg); box-shadow: var(--shadow-card); max-width: 1080px; margin-inline: auto; }
.clusterrow .row__title { font-size: 14.5px; white-space: normal; }
.expand-label { display: flex; justify-content: center; margin: 18px 0 14px; }
.expand-label span { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); padding: 5px 14px; border-radius: 999px; background: var(--raised); border: 1px solid var(--hairline-2); box-shadow: var(--shadow-sm); }
.channels { max-width: 1000px; margin-inline: auto; background: var(--raised); border: 1px solid var(--hairline-2); border-radius: var(--r-lg); overflow: hidden; box-shadow: var(--shadow-sm); }
.qchannel { display: flex; align-items: center; gap: 14px; padding: 14px 20px; border-top: 1px solid var(--hairline); }
.qchannel:first-child { border-top: 0; }
.qchannel__src { min-width: 110px; }
.qchannel__src .n { font-size: 12px; font-weight: 600; }
.qchannel__src .k { font-size: 10.5px; color: var(--ink-4); margin-top: 2px; }
.qchannel__q { flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--ink); font-style: italic; }
.qchannel__q mark { background: color-mix(in srgb, var(--warn) 30%, transparent); color: var(--ink); padding: 0 3px; border-radius: 2px; }
.qchannel__meta { text-align: right; min-width: 120px; }
.qchannel__meta .c { font-size: 11.5px; font-weight: 500; }
.qchannel__meta .s { font-size: 10.5px; color: var(--ink-4); }

/* ── Closed loop (stacked, no arrows) ─────────────────────────────────────*/
.loopstack { display: flex; flex-direction: column; gap: 16px; max-width: 660px; margin-inline: auto; }
.loopstep { display: flex; gap: 16px; align-items: flex-start; background: var(--raised); border: 1px solid var(--hairline-2); border-radius: var(--r-lg); padding: 20px 22px; box-shadow: var(--shadow-card); }
.loopstep__n { width: 30px; height: 30px; border-radius: 8px; background: var(--ink); color: var(--canvas); display: grid; place-items: center; font-weight: 700; font-size: 14px; flex: none; }
.loopstep__b { flex: 1; min-width: 0; }
.loopstep__t { font-size: 16px; font-weight: 600; color: var(--ink); }
.loopstep__d { font-size: 13.5px; color: var(--ink-3); margin-top: 4px; line-height: 1.55; }
.loopstep__viz { margin-top: 14px; }
/* literal 3D-ish stack of incoming signal cards */
.cardstack { position: relative; height: 132px; }
.cardstack > span { position: absolute; top: 0; left: 0; display: flex; align-items: center; gap: 9px; width: min(300px,100%); background: var(--raised); border: 1px solid var(--hairline-2); border-radius: 10px; padding: 9px 12px; font-size: 12.5px; color: var(--ink-2); box-shadow: var(--shadow-card); }
.cardstack > span:nth-child(1) { z-index: 4; }
.cardstack > span:nth-child(2) { top: 28px; left: 12px; z-index: 3; opacity: .97; }
.cardstack > span:nth-child(3) { top: 56px; left: 24px; z-index: 2; opacity: .92; }
.cardstack > span:nth-child(4) { top: 84px; left: 36px; z-index: 1; opacity: .86; }
.cardstack em { font-style: italic; color: var(--ink); }
.loopchip { display: inline-flex; align-items: center; gap: 9px; background: var(--raised-2); border: 1px solid var(--hairline-2); border-radius: var(--r-md); padding: 10px 12px; font-size: 13px; }
.loopcode { font-family: var(--font-mono); font-size: 12px; color: var(--ink-2); line-height: 1.8; }
.loopcode i { font-size: 11px; }
.loopreply { background: var(--ok-bg); border: 1px solid var(--ok-bd); border-radius: var(--r-md); padding: 12px 14px; font-size: 13px; color: var(--ink); line-height: 1.5; }

/* ── Cluster proof (simplified anatomy support) ───────────────────────────*/
.cluster-proof { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; max-width: 1000px; margin: 26px auto 0; }
.cproof { display: flex; gap: 12px; background: var(--raised); border: 1px solid var(--hairline-2); border-radius: var(--r-lg); padding: 16px 18px; box-shadow: var(--shadow-sm); }
.cproof .cq { font-size: 13.5px; font-style: italic; color: var(--ink); line-height: 1.45; }
.cproof .cm { font-size: 11.5px; color: var(--ink-4); margin-top: 7px; }

/* ── MARQUEE #1: clustering blueprint (all-SVG, on a white card) ───────────*/
.blueprint { max-width: 900px; margin: 12px auto 0; background: var(--raised); border: 1px solid var(--hairline-2); border-radius: var(--r-2xl); padding: clamp(24px,4vw,44px); box-shadow: var(--shadow-card); }
.blueprint svg { width: 100%; height: auto; display: block; overflow: visible; }
/* node groups pop in one-by-one (per-node delay via inline --d) */
.bp-node { opacity: 0; transform: translateY(8px) scale(.96); transform-box: fill-box; transform-origin: center; transition: opacity .5s cubic-bezier(.34,1.4,.4,1), transform .5s cubic-bezier(.34,1.4,.4,1); }
.blueprint.in .bp-node { opacity: 1; transform: none; transition-delay: var(--d, 0s); }
.bp-node rect { fill: var(--canvas); stroke: var(--hairline-2); }
.bp-label { fill: var(--ink-2); font-family: var(--font-body); font-size: 13px; font-weight: 600; }
.bp-sub { fill: var(--ink-4); font-family: var(--font-mono); font-size: 10px; }
.bp-eyebrow { fill: var(--accent); font-family: var(--font-body); font-size: 9px; font-weight: 700; letter-spacing: .12em; }
.bp-title { fill: var(--ink); font-family: var(--font-display); font-weight: var(--weight-display); font-size: 14px; }
.bp-val { fill: var(--ink); font-family: var(--font-body); font-weight: 700; font-size: 14px; }
/* connector lines draw in (pathLength=1 normalizes the dash) */
.bp-line { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 1; stroke-dashoffset: 1; opacity: .55; }
.blueprint.in .bp-line { stroke-dashoffset: 0; transition: stroke-dashoffset 1s ease .45s; }
/* cluster node box + glow */
.bp-cluster-box { fill: var(--canvas); stroke: color-mix(in srgb, var(--accent) 55%, var(--hairline-2)); }
.blueprint.in .bp-cluster-box { animation: bp-glow 3.2s ease-in-out 1.4s infinite; }
@keyframes bp-glow { 0%,100% { stroke: var(--hairline-2); } 50% { stroke: var(--accent); } }
/* traveling pulse dots (subtle; only after lines draw) */
.bp-pulse { fill: var(--accent); opacity: 0; }
.blueprint.in .bp-pulse { opacity: 1; transition: opacity .3s ease 1.25s; }
/* dotted "mirror to one of" lines out to the tracker nodes */
.bp-out { fill: none; stroke: var(--accent); stroke-width: 1.5; stroke-dasharray: 2 5; opacity: 0; }
.blueprint.in .bp-out { opacity: .55; transition: opacity .4s ease .9s; }
/* When GSAP drives the blueprint (initBlueprint), neutralize the CSS reveal
   transitions/animations so the inline GSAP values fully own opacity/transform
   and the sequence (signals in -> issue forms -> mirror appears) isn't fought. */
.blueprint.gsap-driven .bp-node,
.blueprint.gsap-driven .bp-line,
.blueprint.gsap-driven .bp-out,
.blueprint.gsap-driven .bp-cluster-box,
.blueprint.gsap-driven .bp-pulse,
.blueprint.gsap-driven .bp-ctext { transition: none !important; animation: none !important; }

/* ── Connect your stack ───────────────────────────────────────────────────*/
.connect__cols { display: grid; grid-template-columns: repeat(4,1fr); gap: 16px; }
.colcard { background: var(--raised); border: 1px solid var(--hairline-2); border-radius: var(--r-lg); padding: 18px; }
.colcard__h { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-2); }
.colcard__d { font-size: 12.5px; color: var(--ink-3); margin: 5px 0 12px; }
.connrow { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: var(--r); }
.connrow:hover { background: var(--raised-2); }
.connrow .meta { flex: 1; min-width: 0; }
.connrow .n { font-size: 13px; font-weight: 600; }
.connrow .d { font-size: 11px; color: var(--ink-4); }
.connrow .act { font-size: 10.5px; font-weight: 500; color: var(--ink-3); padding: 2px 8px; border-radius: 999px; border: 1px solid var(--hairline-2); }
.connect__note { text-align: center; margin-top: 28px; font-size: 12.5px; color: var(--ink-4); }
.connect__note a { color: var(--ink); border-bottom: 1px solid var(--hairline-2); }

/* ── FAQ (template two-column: head left, border-top row list right) ──────*/
.faq__grid { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(40px, 6vw, 72px); align-items: start; }
.faq__head { margin: 0; }
.faq__list { max-width: none; }
.faq__item { border-top: 1px solid var(--hairline-2); }
.faq__item:last-child { border-bottom: 1px solid var(--hairline-2); }
.faq__q { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 22px 0; background: transparent; border: 0; text-align: left; }
.faq__q span { font-size: 17.5px; font-weight: 600; color: var(--ink); font-family: var(--font-body); }
.faq__ind { flex: none; font-size: 20px; font-weight: 400; line-height: 1; color: var(--ink-3); }
.faq__ind::before { content: "+"; }
.faq__item.open .faq__ind::before { content: "\2212"; }
.faq__a { max-height: 0; overflow: hidden; transition: max-height .28s var(--ease,cubic-bezier(.16,1,.3,1)); }
.faq__a > div { padding: 0 40px 24px 0; font-size: 15.5px; line-height: 1.65; color: var(--ink-2); }

/* ── Footer (dark) + CTA card — the original design, restored verbatim ────*/
.footer { border-top: 1px solid var(--hairline); }
.cta-card { position: relative; overflow: hidden; background: var(--inverse-bg); color: var(--inverse-ink); border-radius: var(--r-xl); padding: clamp(36px,5vw,64px) clamp(24px,4vw,56px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 40px; align-items: center; box-shadow: var(--shadow-card); }
.cta-card__glow { position: absolute; right: -100px; top: -100px; width: 380px; height: 380px; border-radius: 999px; background: radial-gradient(circle, color-mix(in srgb, var(--accent) 35%, transparent), transparent 70%); filter: blur(20px); pointer-events: none; }
.cta-card .eyebrow { color: color-mix(in srgb, var(--inverse-ink) 65%, transparent); }
.cta-card h2 { color: var(--inverse-ink); font-size: clamp(1.9rem, 3vw, 2.5rem); }
.cta-card p { color: var(--inverse-ink-2); margin-top: 16px; max-width: 460px; font-size: 14.5px; line-height: 1.6; }
.cta-card__right { text-align: right; position: relative; }
.cta-card__right .mailrow { font-size: 11.5px; color: var(--inverse-ink-2); margin-top: 14px; }
.cta-card__right .mailrow a { color: var(--inverse-ink); border-bottom: 1px solid color-mix(in srgb, var(--inverse-ink) 35%, transparent); }
.footcols { display: grid; grid-template-columns: 1.6fr repeat(5, 1fr); gap: 24px; padding-block: 36px; }
.footcols .brandcol p { font-size: 12.5px; color: var(--ink-4); line-height: 1.6; max-width: 280px; margin-top: 14px; }
.footcols h4 { font-family: var(--font-body); font-size: 10.5px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }
.footcols ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.footcols a { font-size: 12.5px; color: var(--ink-3); }
.footcols a:hover { color: var(--ink); }
.footbar { border-top: 1px solid var(--hairline); padding-block: 22px 40px; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; font-size: 11.5px; color: var(--ink-4); }
.footbar .ok { display: inline-flex; align-items: center; gap: 6px; }
.footbar .ok .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--live, var(--ok)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--live, var(--ok)) 20%, transparent); }

/* ── Scroll reveal ────────────────────────────────────────────────────────
   The hidden state is gated behind `html.js` so that if JS never runs (or
   fails), ALL content is visible by default — content is never permanently
   hidden behind an animation. app.js adds `.js`, observes, and has a
   last-resort timeout that reveals everything. */
html.js .reveal { opacity: 0; transform: translateY(18px) scale(.97); transition: opacity .5s cubic-bezier(.34,1.4,.4,1), transform .55s cubic-bezier(.34,1.4,.4,1); }
html.js .reveal.in { opacity: 1; transform: none; }
html.js .reveal[data-delay="1"].in { transition-delay: .06s; }
html.js .reveal[data-delay="2"].in { transition-delay: .12s; }
html.js .reveal[data-delay="3"].in { transition-delay: .18s; }

/* Staggered children: the container gets .in, its direct children pop one-by-one */
html.js [data-stagger] > * { opacity: 0; transform: translateY(16px) scale(.97); transition: opacity .5s cubic-bezier(.34,1.4,.4,1), transform .5s cubic-bezier(.34,1.4,.4,1); }
/* Per-child delay is set inline as --stagger-d by app.js (fire()), indexed off
   the child's position, so the cadence auto-extends to any number of children
   instead of capping at a hand-written nth-child ladder. */
html.js [data-stagger].in > * { opacity: 1; transform: none; transition-delay: var(--stagger-d, 0s); }

/* ── Phase B: typewriter (Ask Proxi) ──────────────────────────────────────*/
.type-dots { display: inline-flex; gap: 4px; align-items: center; height: 1.1em; vertical-align: middle; }
.type-dots i { width: 5px; height: 5px; border-radius: 9px; background: var(--ink-4); animation: td 1s infinite; }
.type-dots i:nth-child(2) { animation-delay: .15s; } .type-dots i:nth-child(3) { animation-delay: .3s; }
@keyframes td { 0%,60%,100% { opacity: .3; transform: translateY(0); } 30% { opacity: 1; transform: translateY(-2px); } }
.tw::after { content: "▌"; margin-left: 1px; color: var(--accent-2); }
.tw.typing::after { animation: caret 1s steps(1) infinite; }
.tw.done::after { content: ""; }
@keyframes caret { 50% { opacity: 0; } }
.post-type { opacity: 0; transform: translateY(8px); transition: opacity .45s cubic-bezier(.34,1.4,.4,1), transform .45s cubic-bezier(.34,1.4,.4,1); }
.post-type.show { opacity: 1; transform: none; }

/* ── Phase B: observability draw (sparkline line + area + marker) ──────────*/
.spark .line { stroke-dasharray: 1; stroke-dashoffset: 1; }
.in .spark .line { stroke-dashoffset: 0; transition: stroke-dashoffset 1.2s ease .3s; }
.spark .area { opacity: 0; }
.in .spark .area { opacity: 1; transition: opacity .7s ease .9s; }
.spark .marker { opacity: 0; }
.in .spark .marker { opacity: 1; transition: opacity .3s ease 1.35s; }

/* ── Phase B: Triage rank list (minimal; revenue bars fill on reveal) ──────*/
.ranklabel { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-4); margin: 4px 0 8px; }
.rankrow { display: flex; align-items: center; gap: 12px; padding: 14px 4px; border-bottom: 1px solid var(--hairline); }
.rankrow .rt { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rankrow .bar { width: 84px; height: 6px; border-radius: 99px; background: var(--raised-2); overflow: hidden; flex: none; }
.rankrow .bar i { display: block; height: 100%; width: 0; border-radius: 99px; background: var(--frame-accent, var(--accent)); transition: width .9s cubic-bezier(.16,1,.3,1) .15s; }
[data-stagger].in .rankrow .bar i { width: var(--w, 50%); }
.rankrow .rv { font-size: 12.5px; font-weight: 700; color: var(--ink); min-width: 46px; text-align: right; }

/* ── Phase B: whole-platform composed mock ────────────────────────────────*/
.platform { display: grid; grid-template-columns: 54px 1fr 268px; min-height: 420px; }
.psidebar { border-right: 1px solid var(--hairline); padding: 14px 0; display: flex; flex-direction: column; align-items: center; gap: 6px; background: var(--raised-2); }
.psidebar .pi { width: 34px; height: 34px; border-radius: 8px; display: grid; place-items: center; color: var(--ink-4); font-size: 16px; }
.psidebar .pi.on { background: var(--raised); color: var(--ink); box-shadow: var(--shadow-sm); }
.pmain { padding: 16px 18px; overflow: hidden; border-right: 1px solid var(--hairline); }
.pmain .h { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 18px; letter-spacing: -.02em; margin-bottom: 12px; }
.prail { padding: 16px; display: flex; flex-direction: column; gap: 10px; }
.prail .rh { font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-4); display: flex; align-items: center; gap: 6px; }
.prail .pmsg { font-size: 12px; line-height: 1.5; padding: 9px 11px; border-radius: 9px; }
.prail .pmsg.u { background: var(--ink); color: var(--canvas); align-self: flex-end; max-width: 88%; }
.prail .pmsg.a { background: var(--raised-2); color: var(--ink); max-width: 94%; }

/* ── v3 Phase 2: 3-up feature cards (elevated: white card > soft viz panel
   > mini app-window). Template anatomy; left-aligned copy. ─────────────────*/
.feature3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.fcard { display: flex; flex-direction: column; background: var(--raised); border: 1px solid var(--hairline-2); border-radius: var(--r-xl); padding: 24px; }
.fcard__viz { background: var(--panel-soft, var(--raised-2)); border: 0; border-radius: var(--r-lg); padding: 22px; min-height: 250px; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.fcard__viz > * { width: 100%; }
.fcard__t { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); margin: 20px 0 0; text-align: left; }
.fcard__d { font-size: 15px; line-height: 1.55; color: var(--ink-2); margin: 8px 0 0; text-align: left; }
.fcard__link { display: inline-flex; align-items: center; gap: 8px; margin-top: 14px; font-size: 14.5px; font-weight: 600; color: var(--ink); }
.fcard__link i { font-size: 15px; transition: transform .18s var(--ease, ease); }
.fcard__link:hover i { transform: translateX(3px); }
/* mini app-window chrome: makes each viz read as a real product surface */
.miniwin { width: 100%; background: var(--raised); border: 1px solid var(--hairline-2); border-radius: 12px; box-shadow: var(--shadow-pop); overflow: hidden; font-family: var(--font-product, "Inter", system-ui, sans-serif); }
.miniwin__bar { display: flex; align-items: center; gap: 5px; height: 28px; padding: 0 12px; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--raised) 55%, var(--panel-soft, var(--raised-2))); }
.miniwin__bar .wd { width: 8px; height: 8px; border-radius: 999px; background: var(--line-strong); flex: none; }
.miniwin__bar .wl { margin-left: 8px; font-family: var(--font-mono); font-size: 9.5px; letter-spacing: .04em; color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.miniwin .minicard { border: 0; box-shadow: none; border-radius: 0; }
/* mini card chrome inside a viz */
.minicard { background: var(--raised); border: 1px solid var(--hairline-2); border-radius: var(--r-lg); padding: 14px; box-shadow: var(--shadow-sm); width: 100%; }

/* ── v3 Phase 2: auto-cycling flow (template pills + wide panel) ───────────*/
.flow { max-width: none; margin-inline: auto; }
.flow__tabs { display: flex; gap: 10px; justify-content: flex-start; margin-bottom: 28px; flex-wrap: wrap; }
.flow__tab { display: inline-flex; align-items: center; gap: 9px; padding: 10px 18px; border-radius: var(--r-pill, 999px); border: 1px solid var(--line-strong, var(--hairline-2)); background: transparent; font-size: 14.5px; font-weight: 600; color: var(--ink-2); cursor: pointer; transition: color .2s, border-color .2s, background .2s; }
.flow__tab .n { opacity: .55; font-weight: 600; transition: color .2s; }
.flow__tab.on { color: var(--canvas); border-color: var(--ink); background: var(--ink); }
.flow__tab.on .n { color: var(--canvas); }
.flow__stage { position: relative; }
.flow__panel { display: none; }
.flow__panel.show { display: block; animation: flowin .45s cubic-bezier(.16,1,.3,1); }
@keyframes flowin { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
.flow__card { background: var(--raised); border: 1px solid var(--hairline-2); border-radius: var(--r-2xl); padding: clamp(28px,4vw,48px); box-shadow: var(--shadow-card); display: grid; grid-template-columns: 5fr 6fr; gap: clamp(24px,4vw,56px); align-items: center; min-height: 380px; }
.flow__card .step { font-size: 12.5px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--accent); }
.flow__card .t { font-size: 29px; font-weight: 700; color: var(--ink); margin-top: 14px; letter-spacing: -.02em; line-height: 1.15; }
.flow__card .d { font-size: 16px; line-height: 1.6; color: var(--ink-2); margin-top: 14px; }
/* soft inner panel that frames each step's product viz */
.flow__viz { background: var(--panel-soft, var(--raised-2)); border-radius: 16px; padding: clamp(20px,3vw,32px); display: flex; flex-direction: column; justify-content: center; min-height: 240px; }
/* terminal-style agent box (Cursor-branded) for the closed-loop "agent ships" step */
.agentbox { background: var(--raised-2); border: 1px solid var(--hairline-2); border-radius: var(--r-md); overflow: hidden; }
.agentbox__bar { display: flex; align-items: center; gap: 8px; padding: 8px 12px; border-bottom: 1px solid var(--hairline); font-size: 12px; font-weight: 600; color: var(--ink-2); }
.agentbox__logo { width: 20px; height: 20px; border-radius: 5px; background: var(--ink); display: grid; place-items: center; flex: none; }
.agentbox__bar .dot3 { margin-left: auto; display: inline-flex; gap: 4px; }
.agentbox__bar .dot3 span { width: 7px; height: 7px; border-radius: 99px; background: var(--hairline-2); }
.agentbox .loopcode { padding: 12px 14px; }

/* ── Two-way sync box (closed-loop step 3) ────────────────────────────────*/
.syncbox { background: var(--raised-2); border: 1px solid var(--hairline-2); border-radius: var(--r-md); padding: 14px; }
.syncbox__top { display: flex; align-items: center; justify-content: center; gap: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline); }
.syncbox__side { display: inline-flex; align-items: center; gap: 7px; font-size: 13px; font-weight: 600; color: var(--ink); }
.syncbox__logo { width: 20px; height: 20px; border-radius: 5px; }
.syncbox__mid { color: var(--accent-2); font-size: 17px; display: grid; place-items: center; }
.syncbox__rows { margin-top: 2px; }
.syncfield { display: flex; align-items: center; gap: 8px; padding: 8px 2px; border-top: 1px solid var(--hairline); font-size: 12.5px; }
.syncfield:first-child { border-top: 0; }
.syncfield .k { color: var(--ink-4); min-width: 66px; }
.syncfield .v { color: var(--ink); font-weight: 500; flex: 1; }
.syncfield i { color: var(--accent-2); font-size: 13px; }

/* ── Auto-close card (closed-loop step 4) ─────────────────────────────────*/
.closecard { background: var(--ok-bg); border: 1px solid var(--ok-bd); border-radius: var(--r-md); padding: 14px; }
.closecard__row { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--ink); flex-wrap: wrap; }
.closecard__row b { font-weight: 600; }
.closecard__note { display: flex; align-items: center; gap: 7px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ok-bd); font-size: 12px; color: var(--ink-3); }
.closecard__note i { color: var(--warn); }

/* Done / stale check chip, shared by the comparison board, feature card 3,
   and the auto-close card. */
.ck-done { width: 17px; height: 17px; border-radius: 999px; background: var(--ok); color: #fff; display: grid; place-items: center; font-size: 10px; flex: none; }
.ck-done--idle { background: var(--warn); }

/* ── Feature card 1: a written issue card ─────────────────────────────────*/
.ic__head { display: flex; align-items: center; gap: 8px; }
.ic__num { font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-4); margin-left: auto; }
.ic__title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.35; margin-top: 10px; }
.ic__quote { display: flex; gap: 6px; font-size: 12px; font-style: italic; color: var(--ink-3); line-height: 1.45; margin-top: 8px; }
.ic__quote i { color: var(--ink-4); font-size: 13px; font-style: normal; flex: none; margin-top: 1px; }
.ic__meta { display: flex; align-items: center; gap: 8px; margin-top: 12px; padding-top: 10px; border-top: 1px solid var(--hairline); }
.ic__rev { margin-left: auto; font-size: 12.5px; font-weight: 700; color: var(--tier-fg); }

/* ── Feature card 2: dedupe (sources collapse into one issue) ──────────────*/
.dedup { display: flex; flex-direction: column; align-items: center; gap: 9px; padding: 10px 0 4px; }
.dedup .cluster .srcmark { box-shadow: 0 0 0 1.5px var(--raised); }
.dedup__arr { color: var(--ink-4); font-size: 16px; }
.dedup__issue { display: flex; align-items: center; gap: 8px; width: 100%; background: var(--raised-2); border: 1px solid var(--hairline-2); border-radius: var(--r-md); padding: 9px 12px; font-size: 13px; font-weight: 600; color: var(--ink); }
.dedup__issue > span:first-child { flex: 1; min-width: 0; }

/* ── Feature card 3: kept current (auto-closed / flagged rows) ─────────────*/
.closerow { display: flex; align-items: center; gap: 9px; padding: 11px 2px; border-bottom: 1px solid var(--hairline); }
.closerow:last-child { border-bottom: 0; }
.closerow__t { flex: 1; min-width: 0; font-size: 12.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.closerow__t--muted { color: var(--ink-4); }

/* ── Comparison board: a messy tracker that cleans itself, row by row ──────
   One Linear-style board. Each row stacks a messy "old" layer and a clean
   "new" layer; a GSAP timeline (initTrackerClean in app.js) crossfades them
   top-to-bottom with a stagger, flashing an accent bar as Proxi "touches" each
   row, the clean metadata popping in, then ticks the issue count down and flips
   the status pill before easing back to messy and looping. Plays only when the
   section is in view. Reduced-motion / no-GSAP shows the clean end-state. */
.tracker { max-width: 1000px; margin: 6px auto 0; background: var(--raised); border: 1px solid var(--hairline-2); border-radius: var(--r-xl); overflow: hidden; box-shadow: var(--shadow-hero); }
.tracker .frame__url { min-width: 0; }
.tracker__state { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; font-size: 11px; font-weight: 600; color: var(--accent-2); background: var(--accent-soft); border: 1px solid var(--hairline-2); padding: 3px 10px; border-radius: 999px; white-space: nowrap; transition: color .3s, background .3s, border-color .3s; }
.tracker__state i { font-size: 13px; }
.tracker__state.is-clean { color: var(--ok); background: var(--ok-bg); border-color: var(--ok-bd); }
.tracker__head { display: flex; align-items: center; gap: 10px; padding: 15px 22px 11px; border-bottom: 1px solid var(--hairline); }
.tracker__h { font-family: var(--font-display); font-weight: var(--weight-display); font-size: 17px; letter-spacing: -.02em; color: var(--ink); }
.tracker__count { font-size: 11px; font-weight: 700; color: var(--ink-4); background: var(--raised-2); border-radius: 999px; padding: 1px 8px; min-width: 26px; text-align: center; }
.tracker__sp { flex: 1; }
.tracker__filter { font-size: 11.5px; color: var(--ink-4); border: 1px solid var(--hairline-2); border-radius: 999px; padding: 2px 10px; }
.tracker__body { position: relative; padding: 2px 0; }
.pbars--none { color: var(--hairline-2); }
/* a single row: messy + clean layers overlaid, plus the left accent bar */
.crow { position: relative; height: 62px; border-top: 1px solid var(--hairline); }
.crow:first-child { border-top: 0; }
.crow__bar { position: absolute; left: 0; top: 9px; bottom: 9px; width: 3px; border-radius: 3px; background: var(--accent); transform: scaleY(0); opacity: 0; box-shadow: 0 0 12px 1px color-mix(in srgb, var(--accent) 55%, transparent); }
.crow__layer { position: absolute; inset: 0 22px; display: flex; align-items: center; gap: 10px; }
.crow__new { opacity: 0; background: var(--raised); }
.crow__t { flex: 1; min-width: 0; font-size: 13.5px; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.crow__t--vague { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); }
.crow__t--done { color: var(--ink-4); text-decoration: line-through; text-decoration-color: var(--hairline-2); }
.crow__meta { display: inline-flex; align-items: center; gap: 7px; flex: none; }
.tracker__legend { display: flex; justify-content: center; gap: 26px; margin-top: 20px; font-size: 12.5px; }
.tracker__leg { display: inline-flex; align-items: center; gap: 7px; color: var(--ink-4); }
.tracker__leg i { font-size: 15px; }
.tracker__leg--new { color: var(--accent-2); font-weight: 600; }
/* shared messy/clean tag pills (also used by the dedupe feature card) */
.vstag { font-size: 10px; font-weight: 600; color: var(--ink-4); background: var(--raised-2); border: 1px solid var(--hairline); padding: 1px 7px; border-radius: 999px; white-space: nowrap; flex: none; }
.vstag--stale { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-bd); }
.vstag--dupe { color: var(--warn); background: var(--warn-bg); border-color: var(--warn-bd); }
.vstag--merge { color: var(--cluster-fg); background: var(--cluster-bg); border-color: var(--cluster-bd); }
@media (max-width: 600px) { .crow { height: 66px; } .crow__layer { inset: 0 16px; } .tracker__filter { display: none; } }

/* ── Connections circuit board (node-grid of integration logos) ───────────
   A PCB-style mesh: logo chips on a grid linked by thin orthogonal traces with
   small "solder" nodes, all routing into the Proxi hub at the center. The <svg>
   is generated + kept responsive by app.js (initCircuit). Logos render in their
   real brand colors (the transparent SVG assets carry their own fills). */
.circuit-head { text-align: center; max-width: 720px; margin-inline: auto; }
.circuit-head .lead { font-size: 13px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--accent); }
.circuit-head__big { font-family: var(--font-display); font-weight: var(--weight-display); font-size: clamp(1.7rem, 3.4vw, 2.7rem); letter-spacing: -.02em; color: var(--ink); margin-top: 8px; line-height: 1.1; }
.circuit-head__sub { font-size: 14px; color: var(--ink-3); margin-top: 12px; }
.circuit { position: relative; max-width: 1120px; margin: clamp(28px,5vw,56px) auto 0; overflow: hidden; }
.circuit__svg { display: block; width: 100%; height: auto; }
.circuit__svg .chip-rect { fill: var(--raised); stroke: var(--hairline); stroke-width: 1; filter: drop-shadow(0 6px 10px rgba(35,40,20,.10)) drop-shadow(0 1px 2px rgba(35,40,20,.05)); }
.circuit__svg image.chip-logo { opacity: 1; }
.circuit__svg .hub-rect { fill: var(--ink); }
.circuit__svg .node { fill: none; stroke: var(--hairline-2); stroke-width: 1.5; }
.circuit__svg .hub-pulse { fill: var(--accent); opacity: .14; transform-box: fill-box; transform-origin: center; animation: ckt-hub 3.2s ease-in-out infinite; }
@keyframes ckt-hub { 0%,100% { transform: scale(.82); opacity: .14; } 50% { transform: scale(1.08); opacity: .04; } }

/* "Build the pipeline" entrance — pipes draw and chips/nodes pop, each delayed by
   its distance from the Proxi hub (set as --d in app.js) so the board grows
   outward from the centre. Hidden until the section scrolls in: initCircuit adds
   .animate (plays the stagger), then .shown (final state, so resizes are instant). */
.circuit__svg .chip, .circuit__svg .node { opacity: 0; transform-box: fill-box; transform-origin: center; }
.circuit__svg .trace { fill: none; stroke: var(--hairline-2); stroke-width: 1.5; stroke-dasharray: var(--len); stroke-dashoffset: var(--len); }
.circuit.animate .circuit__svg .chip,
.circuit.animate .circuit__svg .node { animation: ckt-pop .5s cubic-bezier(.2,.8,.3,1) both var(--d); }
.circuit.animate .circuit__svg .trace { animation: ckt-draw .55s ease-out both var(--d); }
.circuit.shown .circuit__svg .chip,
.circuit.shown .circuit__svg .node { opacity: 1; }
.circuit.shown .circuit__svg .trace { stroke-dashoffset: 0; }
@keyframes ckt-pop { 0% { opacity: 0; transform: scale(.4); } 100% { opacity: 1; transform: scale(1); } }
@keyframes ckt-draw { 0% { stroke-dashoffset: var(--len); } 100% { stroke-dashoffset: 0; } }

/* ── v3 Phase 3: scroll-reveal dark footer ────────────────────────────────*/
.footer { position: relative; background: #0f1012; color: #f4f5f7;
  --ink: #f4f5f7; --ink-2: #c7cad1; --ink-3: #9aa0a8; --ink-4: #80858d; --hairline: rgba(255,255,255,.08); --hairline-2: rgba(255,255,255,.14); --raised: #17181b; --raised-2: #1f2125; }
.footer .footcols h4 { color: var(--ink-2); }
.footer .cta-card { background: #17181b; }

/* ── Responsive ───────────────────────────────────────────────────────────*/
@media (max-width: 940px) {
  /* mobile hero: center the stacked copy */
  .hero__intro { text-align: center; }
  .hero .statuschip { margin-inline: auto; }
  .hero__h1 { margin-inline: auto; }
  .hero .hero__sub, .hero .trustbar { margin-inline: auto; }
  .hero .cta-row { justify-content: center; }
  .hero__h1 { font-size: clamp(2.1rem, 9vw, 3rem); }
  .section { padding-block: clamp(56px, 10vw, 100px); }
  .feature__grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .feature--reverse .feature__grid { direction: ltr; }
  .feature3 { grid-template-columns: 1fr; gap: 28px; max-width: 460px; margin-inline: auto; }
  .flow__card { grid-template-columns: 1fr; }
  .connect__cols { grid-template-columns: 1fr 1fr; }
  .cluster-proof { grid-template-columns: 1fr; }
  .footcols { grid-template-columns: 1fr 1fr; gap: 28px; }
  .faq__grid { grid-template-columns: 1fr; gap: 32px; }
  .cta-card { grid-template-columns: 1fr; gap: 24px; }
  .cta-card__right { text-align: left; }
  .obs { grid-template-columns: 1fr; }
  .sig__grid { grid-template-columns: 1fr; }
  .platform { grid-template-columns: 48px 1fr; min-height: auto; }
  .prail { display: none; }
  .teampill { display: none; }
}
@media (max-width: 600px) {
  .wrap { padding-inline: 18px; }
  .nav__links { display: none; }
  .nav__inner { grid-template-columns: auto 1fr; }
  .nav__brand { justify-self: start; }
  /* phone: stack CTAs full-width, declutter the in-mock product chrome */
  .cta-row { flex-direction: column; align-items: stretch; }
  .cta-row .btn { width: 100%; justify-content: center; }
  .appbar__tabs { display: none; }
  .issv__filters { display: none; }
  .issv__tabs .search, .issv__tabs .newbtn { display: none; }
  .section { padding-block: 56px; }
  /* blueprint: bigger + horizontally scrollable on phones (it's wide) */
  .blueprint { padding: 12px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .blueprint svg { min-width: 600px; }
  .connect__cols { grid-template-columns: 1fr; }
  .footcols { grid-template-columns: 1fr 1fr; }
  .intgrid, .goalgrid, .linkgrid { grid-template-columns: 1fr; }
  .platform { grid-template-columns: 1fr; }
  .psidebar { display: none; }
  .custpill { display: none; }
  .toolbar__spacer { display: none; }
  .feature__media { margin-inline: -4px; }
  /* product mockups scale down so dense rows fit a phone */
  .feature__media .frame { font-size: 13px; }
  .hero-panel .hero__stage { margin-bottom: -24px; }
}

@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
  .reveal, [data-stagger] > * { opacity: 1 !important; transform: none !important; }
  .bp-line { stroke-dashoffset: 0 !important; }
}