/* ===================================================================
   Envisor — Marketing Website v9 "Hebbia"
   Full redesign (2026-08-23), not a palette swap on v4: near-monochrome
   register modeled on hebbia.com's real identity — white/near-black,
   sharp 8px radius sitewide (not pill), dual-tier nav, a full-bleed
   dark hero (no video asset available, so a bold ink band stands in for
   Hebbia's real video hero), full-bleed section hairlines, and the
   positive-tracking/compressed-leading display serif sampled from
   hebbia.com's own live styles in an earlier session. See HANDOFF.md.
   =================================================================== */

:root {
  --bg: #ffffff;
  --ink: #0a0a0a;
  --muted: #5c5c5c;
  --muted-2: #86867f;
  --border: #e6e6e2;
  --card: #f6f6f4;
  /* Hebbia's real register is near-colorless — one muted signal color
     stands in for what elsewhere on this site is a bright brand accent.
     Used sparingly: the "NEW" badge, link hover, active nav state. */
  --accent: #0a0a0a;        /* CTAs are ink-fill, not a color — see .btn-primary below */
  --accent-2: #0E7C66;      /* the one signal color: muted institutional teal */
  --accent-tint: #E9F2F0;   /* pale tint of the signal color, for tags/badges */
  --dark-1: #0a0a0a;
  --dark-2: #201f1e;
  --dark-3: #0a0a0a;

  /* radius scale — Hebbia's real signature is sharp corners everywhere, not
     the pill-button vocabulary the rest of this repo's versions use. Every
     radius routes through one of these, so the "sharp, precise, institutional"
     read is enforced structurally, not just applied to one bento grid. */
  --radius-sm: 8px;         /* buttons/tags — was 999px (pill) in every other version */
  --radius-md: 10px;        /* small cards: nav dropdown, logo cells */
  --radius-lg: 14px;        /* standard cards: announce, impact, testimonials */
  --radius-xl: 14px;        /* accordion rows — no longer Legora's rounded capsule */
  --radius-sharp: 8px;      /* bento tiles — same value as the base scale now, on purpose */
  --radius-sharp-sm: 4px;   /* CTAs *inside* bento tiles — sampled from hebbia.com's own 4px buttons */

  /* ink washes — resting/active fill pair for the Legora accordion capsules.
     Deliberately neutral, not a hue: Legora separates a closed row from an open
     one by depth of the same neutral, never by color, so the accent stays free
     to do one small, precise job (the toggle chip). */
  --surface-1: rgba(15, 14, 13, 0.04);
  --surface-2: rgba(15, 14, 13, 0.075);

  /* spacing scale — every section's top+bottom padding is one of these three,
     applied explicitly on both sides, so no section depends on a neighbor's
     padding to create its own gap. Widened toward harvey.ai's own generous
     ladder per the CEO's explicit direction (2026-08-22): "Harvey uses a lot
     of white/negative space... that could communicate 'this is serious
     enterprise software.'" */
  --space-tight: 104px;     /* transitional sections: announce, logo wall */
  --space-lg: 152px;        /* standard content sections */
  --space-xl: 168px;        /* bookends: hero band, final CTA */

  /* gradients — named so the palette is visible without reading comments */
  --gradient-announce: linear-gradient(130deg, #4a4a48 0%, #1a1a19 100%);
  --gradient-impact-blue: linear-gradient(131deg, #3D78B6 29.8%, #03BDF5 175.51%);
  --gradient-impact-terracotta: linear-gradient(130deg, #C2674D 0%, #A2462D 100%);
  --bento-charcoal: #2D2828;
  --bento-slate: #5A564F; /* was #57657A, a blue-gray left over from the pre-pivot palette — replaced with a warm neutral gray on-palette with the rest of the black/yellow/white/gray site */
  --bento-mist: #EDF0F3;
  --frame-dark: #3a3a38;   /* hero product-shot frame — was a hardcoded hex */

  --max: 1280px;            /* was 1200 — left the hero headline no room to grow past 54px */
  --serif: 'Libre Caslon Text', Georgia, 'Times New Roman', serif;
  --sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* ---- Display serif tracking (Hebbia forensic pass, 2026-08-22) ----
     Measured from hebbia.com's live computed styles: their display serif
     ("Edict Display") runs at POSITIVE tracking — `--lts-wide: 0.025em` on
     display-1 (62px, letter-spacing 1.5517px = exactly 0.025em) and +0.0116em
     on display-2/3 — with leading pulled *under* the type size
     (`--lh-compressed: 0.9`; measured 55.86px line-height on 62px type).
     Every serif headline on this page was doing the opposite: -0.01em, the
     optical-correction habit that belongs to large *sans* display type. On a
     text-weight transitional serif like Libre Caslon it closes the counters
     and makes the headline read cramped rather than composed. Opening the
     tracking and closing the leading is the single cheapest, most legible
     piece of Hebbia's "institutional" register, and it was the one thing the
     earlier Hebbia sampling never picked up. */
  --lts-display: 0.02em;
  --lh-display: 1.0;

  /* ---- Section hairline (Hebbia `--bd`) ----
     hebbia.com delimits every section with a full-bleed 1px rule via .bd-top /
     .bd-bottom (--bd: 1px solid #1F1F1F, --bd-overlap: -1px so adjacent rules
     collapse into one). Their sections carry *zero* padding themselves — the
     rhythm lives inside — so the rules are the only thing telling you where one
     section ends. This page had no equivalent: sections were separated purely
     by 104–168px of empty background, which at scroll speed reads as one
     undifferentiated column rather than a structured document.

     --rule is the light-ground value, applied via .rule-top below. --rule-dark
     is the same hairline for dark grounds — the page has no two adjacent dark
     *sections* yet (impact and footer both sit between light neighbors, so
     the color change itself is the boundary), so it's wired to the impact
     band's stat-column dividers instead, which were already hand-set to this
     exact rgba value. */
  --rule: 1px solid var(--border);
  --rule-dark: 1px solid rgba(250, 250, 249, 0.14);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3, h4 { font-family: var(--sans); font-weight: 600; margin: 0; line-height: 1.08; letter-spacing: -0.015em; }
/* Every wrapping section heading was dropping a single-word last line
   ("...who deliver the / work") — text-wrap:balance fixes this everywhere a
   heading actually wraps, without touching the hero's hand-set <br>. */
h1, h2 { text-wrap: balance; }
p { margin: 0; }
.wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; }
.eyebrow {
  font-family: var(--sans);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  /* was --accent-2: matches the logo-wall masthead label's neutral tracked-caps
     vocabulary rather than competing in amber with whatever headline follows it */
  color: var(--muted-2);
}
.eyebrow--light { color: rgba(250, 250, 249, 0.7); }

/* ---------- Section rule (Hebbia .bd-top / .bd-bottom) ----------
   Full-bleed 1px hairline at each section boundary on the light ground.
   Applied only where two light sections meet — the dark full-bleed blocks
   (impact, footer) already declare their own boundary by value, exactly as
   hebbia.com's dark/darker sections do, and adding a rule there would be a
   second, redundant edge. The rule sits on the section's own box (not an
   inner wrapper) so it runs edge to edge of the viewport while the content
   inside stays on the --max grid — that viewport-wide line against a
   grid-constrained content column is the whole effect. */
.rule-top { border-top: var(--rule); }

/* ---------- Section header (shared) ----------
   The single most transferable structural move found auditing this page
   against permitflow.com — the closest content parallel to Envisor, selling
   into the same bureaucratic, high-stakes compliance space. Every one of
   their sections opens with the same three-part header (tracked eyebrow ->
   headline -> optional subhead), which is what makes a long, dense,
   unfamiliar-domain page navigable: the eyebrow orients a non-specialist
   visitor before they've read a word of the headline.
   This page previously had five differently-shaped section intros (centered
   620px h2+p; a lone centered h2 at three different clamp scales) and no
   eyebrows anywhere except the hero. One component now covers all of them.
   Headline voice is serif/400 (Harvey's core move — see .sec-head h2 below);
   structure and the eyebrow label are PermitFlow's. */
.sec-head { max-width: var(--max); margin: 0 auto 56px; text-align: center; }
.sec-head .eyebrow { display: block; margin-bottom: 16px; }
.sec-head h2 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.05;
  letter-spacing: var(--lts-display);
  font-size: clamp(30px, 3.8vw, 46px);
  max-width: 20ch;
  margin: 0 auto;
}
.sec-head p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.55;
  max-width: 48ch;
  margin: 18px auto 0;
}
@media (max-width: 640px) {
  .sec-head { margin-bottom: 40px; }
  .sec-head p { font-size: 15px; }
}

/* ---------- Buttons (pill — Sierra/Legora) ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: var(--sans);
  font-size: 14px;
  font-weight: 500;
  border-radius: var(--radius-sm);
  height: 40px;
  padding: 0 22px;
  border: 1px solid transparent;
  cursor: pointer;
  transition: opacity 0.15s ease, background-color 0.15s ease, transform 0.15s ease;
  white-space: nowrap;
}
/* No lift-on-hover: Harvey's buttons change color and nothing else. A 1px
   translate on every button on the page read as busy rather than responsive. */
.btn-primary { background: var(--accent); color: var(--bg); }
.btn-primary:hover { background: var(--accent-2); }
/* Ink-filled pill for the nav CTA. The nav and the hero both used to be brand
   yellow, putting two identical saturated "Book Demo" pills in the first
   viewport with nothing to say which was primary. The nav one is now ink,
   leaving exactly one accent moment above the fold. */
.btn-ink { background: var(--ink); color: var(--bg); }
.btn-ink:hover { background: var(--dark-2); }
.btn-light { background: var(--bg); color: var(--ink); }
.btn-light:hover { opacity: 0.85; }
/* Sierra's two-tier button scale — nav pill (32px, sampled from sierra.ai) stays small via .btn;
   hero/announce CTAs get the larger scale sampled from Sierra's own hero pill (56px, 0 32px). */
.btn-lg { height: 52px; padding: 0 30px; font-size: 15px; }
.btn-outline-light { background: transparent; color: var(--bg); border-color: rgba(250,250,249,0.35); }
.btn-outline-light:hover { border-color: rgba(250,250,249,0.7); }
.btn-text { font-family: var(--sans); font-size: 14px; font-weight: 500; display: inline-flex; align-items: center; gap: 6px; color: var(--accent-2); }
.btn-text svg { transition: transform 0.15s ease; }
.btn-text:hover svg { transform: translateX(3px); }

/* ---------- Utility bar (Hebbia dual-tier nav, upper tier) ----------
   Hebbia runs two stacked nav rows rather than one: a slim utility strip
   (audience-segment links, sign-in) sits above the primary bar (logo,
   Solutions/Company, Request Demo). Replaces the single-row nav every other
   version on this page uses — see .nav below for the second tier. */
.util-bar { background: var(--ink); }
.util-bar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
  height: 34px;
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.6);
}
.util-bar-inner a { color: rgba(255,255,255,0.6); }
.util-bar-inner a:hover { color: #fff; }
.util-bar-spacer { flex: 1; }
@media (max-width: 640px) {
  .util-bar-inner { height: auto; padding: 8px 20px; flex-wrap: wrap; gap: 10px 16px; }
}

/* ---------- Nav ---------- */
.nav {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid transparent;
}
.nav.is-scrolled { border-bottom-color: var(--border); }
.nav-inner {
  max-width: var(--max);
  margin: 0 auto;
  height: 72px;
  padding: 0 32px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.nav-logo { display: flex; align-items: center; height: 30px; }
.nav-logo img { height: 100%; width: auto; }
.nav-links {
  display: flex;
  align-items: center;
  gap: 28px;
  list-style: none;
  margin: 0;
  padding: 0;
  flex: 1;
  padding-left: 40px;
}
.nav-links a, .nav-item > span {
  font-size: 14px;
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.nav-item { position: relative; }
.nav-item svg { opacity: 0.5; }
.nav-dropdown {
  position: absolute;
  top: calc(100% + 14px);
  left: -16px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  box-shadow: 0 16px 40px rgba(15,14,13,0.10);
  padding: 10px;
  width: 280px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(4px);
  transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.nav-item:hover .nav-dropdown,
.nav-item:focus-within .nav-dropdown { opacity: 1; visibility: visible; transform: translateY(0); }
.nav-dropdown a {
  display: block;
  padding: 10px 12px;
  border-radius: var(--radius-md);
}
.nav-dropdown a:hover { background: var(--accent-tint); }
.nav-dropdown .dd-title { font-size: 14px; font-weight: 500; color: var(--ink); }
.nav-dropdown .dd-desc { font-size: 12.5px; color: var(--muted); margin-top: 2px; }
.nav-actions { display: flex; align-items: center; gap: 20px; }
.nav-actions .btn-text { font-size: 14px; color: var(--ink); }
.nav-mobile-toggle { display: none; }

@media (max-width: 860px) {
  .nav-links { display: none; }
  .nav-actions .btn-text { display: none; }
  .nav-mobile-toggle {
    display: flex; flex-direction: column; gap: 4px;
    width: 32px; height: 32px; align-items: center; justify-content: center;
    background: none; border: none; cursor: pointer;
  }
  .nav-mobile-toggle span { width: 20px; height: 1.5px; background: var(--ink); }
}
.mobile-nav {
  display: none;
  flex-direction: column;
  padding: 8px 32px 28px;
  border-top: 1px solid var(--border);
}
.mobile-nav.is-open { display: flex; }
.mobile-nav a { padding: 13px 0; border-bottom: 1px solid var(--border); font-size: 15px; }
.mobile-nav .btn { margin-top: 18px; align-self: flex-start; }

/* ---------- Hero — full-bleed ink band ----------
   hebbia.com's real hero runs a full-width video background; no video asset
   exists here, so a bold near-black band stands in — the page's one loud
   dark moment, up front, rather than reusing the light contained-card hero
   every other version on this page has. */
.hero-band--ink { background: var(--ink); }
.hero-band--ink .hero-headline { color: var(--bg); }
.hero-sub--light { color: rgba(255,255,255,0.68); }
.btn-text--light { color: rgba(255,255,255,0.85); }
.hero-band { position: relative; background: var(--bg); }
.hero-top {
  display: grid;
  /* 1.75fr buys the headline the width it needs at the larger display size below;
     Harvey gives its own h1 comparable room and lets it run to three lines */
  grid-template-columns: 1.75fr 1fr;
  gap: 48px;
  /* was `center` — bottom-aligning the subhead+CTA to the headline's own
     baseline gives the two columns a shared line to sit on, rather than
     floating the right column in the middle of a taller left one */
  align-items: end;
  max-width: var(--max);
  margin: 0 auto;
  padding: 120px 32px 80px;
}
.hero-headline {
  font-family: var(--serif);
  font-weight: 400;
  font-size: clamp(38px, 5vw, 64px);
  line-height: var(--lh-display);
  letter-spacing: var(--lts-display);
  color: var(--ink);
  margin: 20px 0 0;
}
.hero-sub {
  font-size: 17px;
  line-height: 1.6;
  color: var(--muted);
  max-width: 40ch;
}
.hero-cta-row { display: flex; align-items: center; gap: 24px; margin-top: 28px; }

.hero-shot-band {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px var(--space-tight);
}
.hero-shot-frame {
  position: relative;
  background: var(--frame-dark);
  border-radius: var(--radius-lg);
  padding: 56px 56px 0;
}
/* Harvey insets the product shot from the top/sides and lets it bleed off the
   *bottom* of the frame, cropped — reads as a window onto something that
   continues, rather than a picture centered on a mat with even padding on
   all four sides. */
.hero-shot-crop { overflow: hidden; max-height: 540px; border-radius: var(--radius-lg) var(--radius-lg) 0 0; }
.hero-shot-frame img { width: 100%; display: block; }

@media (max-width: 860px) {
  .hero-top { grid-template-columns: 1fr; padding: 80px 24px 40px; align-items: start; }
  .hero-sub { max-width: none; }
  .hero-shot-frame { padding: 32px 32px 0; }
  .hero-shot-crop { max-height: 380px; }
}
@media (max-width: 640px) {
  .hero-headline { font-size: clamp(30px, 9vw, 40px); letter-spacing: 0; }
  .hero-shot-band { padding: 0 20px 60px; }
  .hero-shot-frame { padding: 20px 20px 0; border-radius: var(--radius-md); }
  .hero-shot-crop { max-height: 260px; }
}

/* ---------- Product showcase (Hebbia audit v2) ----------
   hebbia.com's real standout move isn't the bento grid, it's their named
   "Project Showcase" cards — real deal metadata, document icons, live
   status — that make the product feel dense and premium rather than a
   plain feature list. Rebuilt here with Envisor's own four real modules
   as the "named items" and real product screenshots, not invented data. */
.showcase { padding: var(--space-tight) 32px 0; }
.showcase-head { max-width: 640px; margin: 0 auto 48px; text-align: center; }
.showcase-head .eyebrow { display: block; margin-bottom: 16px; }
.showcase-head h2 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: var(--lts-display); font-size: clamp(28px, 3.4vw, 40px); margin-bottom: 14px; }
.showcase-head p { color: var(--muted); font-size: 16px; line-height: 1.55; }
.showcase-grid { max-width: var(--max); margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; }
.showcase-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-sharp);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  background: var(--bg);
  transition: border-color 0.2s ease, transform 0.2s ease;
}
.showcase-card:hover { border-color: var(--ink); transform: translateY(-3px); }
.showcase-card-media { aspect-ratio: 4/3; overflow: hidden; background: var(--card); border-bottom: 1px solid var(--border); }
.showcase-card-media img { width: 100%; height: 100%; object-fit: cover; object-position: top; }
.showcase-card-body { padding: 22px 20px 26px; display: flex; flex-direction: column; gap: 4px; }
.showcase-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: var(--radius-sharp-sm);
  background: var(--accent-tint);
  color: var(--accent-2);
  margin-bottom: 14px;
}
.showcase-card-body h3 { font-size: 17px; font-weight: 600; margin: 0; }
.showcase-tag { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--muted-2); margin: 3px 0 10px; }
.showcase-card-body p { font-size: 14px; line-height: 1.5; color: var(--muted); margin: 0; }
@media (max-width: 980px) { .showcase-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) { .showcase-grid { grid-template-columns: 1fr; } .showcase { padding-top: 64px; } }

/* ---------- Announcement (Introducing MIRA) — Sierra gradient bento card ---------- */
.announce { padding: var(--space-tight) 32px; }
.announce-card {
  max-width: var(--max);
  margin: 0 auto;
  background: var(--gradient-announce);
  border-radius: var(--radius-lg);
  padding: 88px 40px;
  text-align: center;
}
.announce-badge {
  display: inline-block;
  background: rgba(255,255,255,0.18);
  color: var(--bg);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  padding: 5px 12px;
  border-radius: var(--radius-sm);
  margin-bottom: 22px;
}
.announce-card h2 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: var(--lts-display); color: var(--bg); font-size: clamp(32px, 4.2vw, 48px); margin-bottom: 18px; }
.announce-card p {
  max-width: 46ch;
  margin: 0 auto 32px;
  color: rgba(250,250,249,0.82);
  font-size: 17px;
  line-height: 1.55;
}
@media (max-width: 640px) { .announce-card { padding: 56px 28px; border-radius: var(--radius-md); } }

/* ---------- Logo wall (Sierra — bigger, warmer, natural color) ---------- */
/* Classier logo wall (2026-08-21): the bordered-card treatment read as
   utilitarian/form-like. Since every logo here is already a flat black
   silhouette, the card chrome was doing the unifying work a restrained
   opacity treatment can do instead — logos now float directly on the page,
   muted until hovered, bracketed by hairline rules like a masthead rather
   than boxed like form fields. */
.logowall { padding: var(--space-tight) 32px; text-align: center; }
.logowall h3 { font-family: var(--sans); font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); margin: 0 auto 48px; position: relative; display: inline-block; padding: 0 20px; }
.logowall h3::before, .logowall h3::after { content: ''; position: absolute; top: 50%; width: 40px; height: 1px; background: var(--border); }
.logowall h3::before { right: 100%; }
.logowall h3::after { left: 100%; }
.logowall-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 16px;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}
.logo-cell {
  height: 108px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 22px 28px;
}
.logo-cell img {
  max-height: 42px;
  max-width: 100%;
  width: auto;
  height: auto;
  opacity: 0.5;
  transition: opacity 0.2s ease;
}
.logo-cell img.logo-lg { max-height: 58px; }
.logo-cell:hover img { opacity: 1; }
@media (max-width: 860px) {
  .logowall-grid { grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .logo-cell { height: 92px; padding: 18px 22px; }
  .logo-cell img { max-height: 32px; }
  .logo-cell img.logo-lg { max-height: 44px; }
}

/* ---------- Product bento (Hebbia asymmetric grid, real screenshots) ---------- */
.bento { padding: var(--space-lg) 32px; }
/* Simplified to two equal tiles (2026-08-21): the "For Public Agencies" tile
   previously sat above two extra small tiles that re-showed the same map
   image plus a dashboard shot — three images doing one tile's job. Dropped
   the two small tiles entirely so Consultants and Agencies are a plain,
   symmetric pair, each making its point with exactly one screenshot. */
.bento-grid {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px; /* sampled from hebbia.com's own bento grid gap */
}
.bento-tile {
  position: relative;
  border-radius: var(--radius-sharp); /* the one deliberately sharper geometry on
                                          the page — marks this section as its own
                                          "Hebbia mode" against the pill/22px rest */
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 34px 32px 0;
}
.bento-tile--consultants { background: linear-gradient(160deg, var(--bento-charcoal) 0%, var(--dark-1) 100%); }
.bento-tile--agencies { background: linear-gradient(160deg, var(--bento-slate) 0%, var(--dark-2) 100%); }
/* Copy lockup sampled from hebbia.com's own card: title at *positive* 0.02em
   tracking (not the page's default -0.015em) and a subtitle on a wide 46ch
   measure — Hebbia's cards say their piece in one or two calm lines rather
   than a narrow 4-line column, which is where the section's dense-and-
   confident quality actually comes from. */
.bento-tile h3 { color: var(--bg); font-size: 20px; font-weight: 500; letter-spacing: 0.02em; margin-bottom: 8px; }
.bento-tile p {
  color: rgba(250,250,249,0.55);
  font-size: 15px;
  line-height: 1.5;
  max-width: 46ch;
  margin-bottom: 22px;
  /* locks both tiles' copy blocks to the same height so the two CTAs and the
     two screenshot crops land on the same line, not offset by ~20px */
  min-height: 68px;
}
/* Hebbia mode: the page's one non-pill button, matching the section's own
   sharp 8px tiles and hebbia.com's own 4px CTAs. */
.bento-tile .btn { align-self: flex-start; border-radius: var(--radius-sharp-sm); }
/* Harvey's own tiles bleed the screenshot flush to the tile's left/right edges,
   flat top corners (no radius — the tile's own overflow:hidden clips the outer
   corners), cropped hard at the bottom rather than framed as an inset card.
   Height raised 260->340px so the screenshot is the majority of the tile, the
   way Hebbia's own media is, instead of a thin strip under a tall copy block. */
.bento-shot { margin-top: auto; overflow: hidden; height: 340px; margin-left: -32px; margin-right: -32px; border-radius: 0; }
.bento-shot img { width: 100%; height: 100%; object-fit: cover; object-position: top; display: block; }
@media (max-width: 860px) {
  .bento-grid { grid-template-columns: 1fr; }
}

/* ---------- Platform accordion (Legora expanding capsules) ----------
   Rebuilt after a side-by-side re-check against legora.com's live
   "Introducing the Legora aOS" section — the component this was sampled from
   in the first place. Four things had drifted far enough that the section no
   longer read as Legora at all, it read as a generic enterprise settings list:

   1. HUG-WIDTH, NOT FULL-WIDTH. Legora's capsules are exactly as wide as their
      own label — the stack is left-aligned with a ragged right edge, which is
      the entire reason it reads as objects floating in space rather than a
      bordered list. Ours were uniform full-width bars with the toggle
      stranded at the far right of a field of empty space. Rows now hug;
      only the open one stretches.
   2. CONTINUOUS SHAPE. Legora's closed pill and open card share one radius and
      one fill — opening changes size, never identity. Ours changed *color*,
      flooding the row with the yellow tint (a green-era holdover that read
      like a validation warning once the palette pivoted).
   3. THE FILL IS NEUTRAL, NOT A HUE. Open now steps --surface-1 -> --surface-2
      (both the same neutral ink wash) and the accent does one small precise
      job: the toggle chip.
   4. THE TOGGLE IS INLINE. Legora's + sits in a small circle immediately after
      the label while closed, and only travels to the row's far edge once the
      row stretches open.

   The fixed-width badge rail and deep panel indent are gone too — those made
   a borderless table. The category badge is now the small caption line inside
   the open panel, where Legora puts its own label once a row expands.

   Two-column composition: Legora never runs this stack full-bleed — it lives
   in a narrow column with a counterweight beside it, which is what lets
   ragged capsules look composed rather than lost. It's also the page's one
   deliberately left-anchored section, alternating against the centered
   .sec-head rhythm everywhere else — sampled from how legora.com itself
   alternates centered and left-anchored sections rather than running one
   alignment throughout. */
.platform { padding: var(--space-lg) 32px; }
.platform-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1.1fr;
  gap: 80px;
  align-items: start;
}
.platform-intro { max-width: 440px; margin: 0; text-align: left; position: sticky; top: 120px; }
.platform-intro .eyebrow { display: block; margin-bottom: 16px; }
.platform-intro h2 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: var(--lts-display); font-size: clamp(28px, 3.4vw, 40px); margin: 0 0 16px; }
.platform-intro p { color: var(--muted); font-size: 16px; line-height: 1.55; }

.accordion { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.accordion-row {
  max-width: 100%;
  background: var(--surface-1);
  border-radius: var(--radius-xl);
  transition: background 0.2s ease;
}
.accordion-row:hover { background: var(--surface-2); }
.accordion-row.is-open {
  align-self: stretch; /* the one row that leaves the ragged edge */
  background: var(--surface-2);
}
/* 48px closed pill = 24px chip + 2x12px padding */
.accordion-trigger {
  display: flex;
  align-items: center;
  gap: 16px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 12px 12px 12px 22px;
  text-align: left;
  font-family: var(--sans);
}
.accordion-row.is-open .accordion-trigger { width: 100%; justify-content: space-between; }
.accordion-title { font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.005em; }
.accordion-toggle {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: rgba(15,14,13,0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  transition: background 0.2s ease;
}
.accordion-toggle::before, .accordion-toggle::after {
  content: '';
  position: absolute;
  background: var(--ink);
}
.accordion-toggle::before { width: 9px; height: 1.3px; }
.accordion-toggle::after { width: 1.3px; height: 9px; transition: opacity 0.2s ease; }
.accordion-row.is-open .accordion-toggle { background: var(--accent); }
.accordion-row.is-open .accordion-toggle::after { opacity: 0; }
.accordion-panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 0.3s ease;
}
.accordion-row.is-open .accordion-panel { grid-template-rows: 1fr; }
.accordion-panel-inner { overflow: hidden; }
/* text starts at the same inset as the closed pill's label, so the open card
   reads as the same object grown rather than a different component */
.accordion-kicker {
  display: block;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--accent-2);
  padding: 0 24px 8px 22px;
}
.accordion-panel p { max-width: 52ch; color: var(--muted); font-size: 15px; line-height: 1.6; padding: 0 24px 20px 22px; }
.kb-tags { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 24px 20px 22px; margin-top: -8px; }
.kb-tags span { font-size: 11.5px; background: var(--card); padding: 4px 10px; border-radius: var(--radius-sm); color: var(--muted); }
@media (max-width: 980px) {
  .platform-inner { grid-template-columns: 1fr; gap: 44px; }
  .platform-intro { position: static; max-width: 620px; text-align: center; }
  .platform-intro .eyebrow { margin-left: auto; margin-right: auto; width: fit-content; }
}
@media (max-width: 640px) {
  .accordion { align-items: stretch; }
  .accordion-trigger { width: 100%; justify-content: space-between; padding: 12px 12px 12px 20px; }
  .accordion-kicker, .accordion-panel p, .kb-tags { padding-left: 20px; padding-right: 20px; }
}

/* ---------- Grounded knowledge base (Hebbia audit v2) ----------
   hebbia.com's real "integration grid" pattern — many small icon+label tiles
   in dense rows, proving breadth of what the system actually connects to.
   Envisor's real equivalent already existed as five tags buried inside the
   Knowledge Base accordion row (closed by default, easy to miss entirely):
   EIRs, MNDs, Technical Studies, Statutes, Agency Protocols. Surfaced here
   as their own moment rather than inventing a fake integrations list. */
.grounded { padding: var(--space-lg) 32px; }
.grounded-inner { max-width: var(--max); margin: 0 auto; }
.grounded-head { max-width: 620px; margin: 0 auto 44px; text-align: center; }
.grounded-head h2 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: var(--lts-display); font-size: clamp(26px, 3.2vw, 36px); margin: 14px 0 12px; }
.grounded-head p { color: var(--muted); font-size: 15.5px; line-height: 1.55; }
.grounded-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; }
.grounded-tile {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 20px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sharp);
  font-size: 14px;
  font-weight: 600;
  color: var(--ink);
}
.grounded-icon { display: inline-flex; color: var(--accent-2); flex-shrink: 0; }
@media (max-width: 640px) { .grounded-grid { gap: 10px; } .grounded-tile { padding: 12px 16px; font-size: 13px; } }

/* ---------- Workflow ----------
   Rebalanced against permitflow.com's equivalent section: this was the
   thinnest section on the page despite being the "how it works" explainer a
   non-technical civic buyer actually needs most. Two changes: (1) the step
   number becomes the visual anchor — serif, sitting above a hairline instead
   of the old solid-yellow 2px slab, which was the loudest and least
   meaningful use of the accent anywhere on the page; the accent now carries
   as typography, consistent with the hairline vocabulary the impact band,
   testimonials, and logo wall already use. (2) step title and body each move
   up a size so the column reads as content, not a footnote. */
.workflow { padding: var(--space-lg) 32px; }
.workflow-steps {
  max-width: var(--max);
  margin: 0 auto;
  list-style: none;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 32px;
}
.workflow-steps li { border-top: 1px solid var(--border); padding-top: 22px; }
.workflow-num { font-family: var(--serif); font-size: 26px; line-height: 1; color: var(--accent-2); display: block; margin-bottom: 16px; }
.workflow-steps h4 { font-size: 19px; letter-spacing: -0.01em; margin-bottom: 10px; }
.workflow-steps p { font-size: 15px; color: var(--muted); line-height: 1.55; }
@media (max-width: 860px) { .workflow-steps { grid-template-columns: 1fr 1fr; gap: 28px; } }

/* ---------- Impact band — full-bleed dark, tracked-serif stat columns ----------
   Ground-up redesign (2026-08-21): was three separately-colored bento-style
   tiles; now one unified dark band (the page's only other two full-bleed dark
   moments are the announce strip and the footer, so this gives the page a
   third resting beat) with the stats set as plain typographic columns
   separated by hairline rules, no card chrome at all. */
.impact { background: var(--ink); padding: var(--space-lg) 32px; }
.impact-inner { max-width: var(--max); margin: 0 auto; }
/* Left-anchored (was centered): the header and first stat now share the same
   left rail the accordion, bento tiles, and workflow steps sit on, instead of
   floating independently in the middle of their own column. The per-stat
   kicker also drops its tracked-caps treatment — with a section eyebrow now
   sitting above the band, two tiers of tracked uppercase in one section read
   as an echo of each other. The section eyebrow carries the tracked caps; the
   per-stat kicker is a plain sentence-case lede. */
.impact .sec-head { text-align: left; margin: 0 0 64px; }
.impact .sec-head h2 { color: var(--bg); margin: 0; }
.impact .sec-head .eyebrow { color: var(--accent); } /* bright, not --accent-2 — deep amber goes muddy on dark grounds */
.impact-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}
/* --rule-dark here (not a bare rgba repeat): this is the same 1px-on-dark
   hairline hebbia.com's --bd token supplies on its dark grounds, just used as
   an internal column divider rather than a section boundary — the one real
   use of the dark hairline token this page has, since no two dark sections
   currently sit adjacent. */
.impact-stat { padding: 0 40px; border-left: var(--rule-dark); }
.impact-stat:first-child { border-left: none; padding-left: 0; }
.impact-eyebrow { display: block; font-size: 16px; font-weight: 500; line-height: 1.4; color: rgba(250,250,249,0.92); margin-bottom: 18px; }
/* min-height reserves two lines: the outer two stats wrap, the middle one
   doesn't, which otherwise leaves the middle column's description ~44px
   above its neighbors' — three stats in a row need to share a baseline.
   letter-spacing: the big serif numeral is this band's display-scale
   moment, same register as the h2 headlines — it was the one serif display
   element left on the page's old default (0) tracking instead of Hebbia's
   opened-up --lts-display. */
.impact-num { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; letter-spacing: var(--lts-display); color: var(--bg); display: block; margin-bottom: 16px; min-height: 2.3em; }
.impact-desc { font-size: 15px; line-height: 1.55; color: rgba(250,250,249,0.58); max-width: 26ch; }
@media (max-width: 860px) {
  .impact-grid { grid-template-columns: 1fr; gap: 44px; }
  .impact-stat { border-left: none; border-top: var(--rule-dark); padding: 36px 0 0; }
  .impact-stat:first-child { border-top: none; padding-top: 0; }
}

/* ---------- Testimonials (Harvey serif pull-quotes, Sierra card wrap) ---------- */
/* Ground-up redesign (2026-08-21): was three equal bordered/boxed cards;
   now a bookended horizontal "quote log" — no card chrome, just hairline
   rules between rows, editorial-style pairing of a wide serif quote against
   a narrow fixed-width attribution column. Sits directly below the impact
   band's vertical-divider columns, so this deliberately uses horizontal
   rules instead to keep the two sections from reading as the same shape. */
.testimonials { padding: var(--space-lg) 32px; text-align: center; }
.testimonials-inner { max-width: 900px; margin: 0 auto; }
.testimonial-list { display: flex; flex-direction: column; border-top: 1px solid var(--border); text-align: left; }
/* margin:0 is load-bearing: <blockquote> carries a UA default of `1em 40px`,
   which inset every row 40px on each side while the list's own border-top
   spanned the full 900px — the section's top hairline visibly overhung the
   between-row hairlines at both ends, and rows carried phantom vertical
   margins on top of their own padding. */
.testimonial { display: flex; align-items: flex-start; gap: 48px; margin: 0; padding: 36px 0; border-bottom: 1px solid var(--border); }
.testimonial p { font-family: var(--serif); font-size: 20px; line-height: 1.45; flex: 1; margin: 0; }
.testimonial cite { flex-shrink: 0; width: 170px; display: flex; flex-direction: column; gap: 6px; font-style: normal; }
/* role was 12px regular sitting above a 13.5px semibold org — two near-identical
   sizes read as one muddled block. Role now uses the page's established
   tracked-uppercase micro-label vocabulary (impact eyebrow, final-CTA eyebrow,
   logo-wall masthead), which separates the two cleanly. */
.t-role { font-size: 10.5px; font-weight: 600; letter-spacing: 0.09em; text-transform: uppercase; color: var(--muted-2); }
.t-org { font-size: 14px; font-weight: 600; color: var(--ink); }
@media (max-width: 760px) {
  .testimonial { flex-direction: column; gap: 14px; padding: 28px 0; }
  .testimonial cite { width: auto; flex-direction: row; gap: 8px; }
  .t-org::before { content: '— '; }
}

/* ---------- Testimonials (Hebbia audit): single large quote block ----------
   hebbia.com doesn't run a row/card list at all — one large left-aligned
   quote block with a headshot carries the whole section, full stop. Kept
   the two smaller supporting quotes rather than dropping them entirely
   (losing real customer voice felt wrong), but demoted them to a plain
   stacked list well below the featured quote so the hierarchy stays
   unmistakably "one quote is the section" rather than three peers. No real
   headshot photography exists for this quote's speaker, so the avatar is a
   plain initials tile rather than a fabricated photo. */
.testimonials-hebbia .testimonials-inner { max-width: 760px; text-align: left; }
.testimonial-feature { display: flex; gap: 28px; align-items: flex-start; margin-bottom: 56px; }
.testimonial-feature-avatar {
  flex-shrink: 0;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ink);
  color: var(--bg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--sans);
  font-size: 18px;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.testimonial-feature-quote { margin: 0; }
.testimonial-feature-quote p { font-family: var(--serif); font-size: 30px; line-height: 1.32; letter-spacing: var(--lts-display, -0.01em); margin: 0 0 18px; }
.testimonial-feature-quote cite { display: flex; gap: 10px; align-items: baseline; font-style: normal; }
.testimonial-feature-quote .t-org { font-size: 15px; font-weight: 600; color: var(--ink); }
.testimonial-feature-quote .t-role { font-size: 13px; color: var(--muted); }
.testimonial-support { display: flex; flex-direction: column; gap: 22px; padding-top: 28px; border-top: 1px solid var(--border); }
.testimonial-support blockquote { margin: 0; display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; }
.testimonial-support p { font-size: 15px; color: var(--muted); margin: 0; }
.testimonial-support cite { font-style: normal; display: inline-flex; gap: 6px; font-size: 13px; flex-shrink: 0; }
.testimonial-support .t-org { font-weight: 600; color: var(--ink); }
.testimonial-support .t-role { color: var(--muted-2); }
@media (max-width: 640px) {
  .testimonial-feature { flex-direction: column; gap: 18px; }
  .testimonial-feature-quote p { font-size: 24px; }
}

/* ---------- Final CTA ---------- */
/* Ground-up redesign (2026-08-21): was a full-bleed ink slab identical in
   shape to the footer directly beneath it, so the two ran together as one
   block. Now a contained rounded card floating on the page's cream
   background — echoes the hero's contained-frame move from earlier in the
   page, and gives the footer's own full-bleed dark back some contrast to
   land against. */
.final-cta { background: var(--bg); padding: var(--space-xl) 32px; }
.final-cta-card {
  max-width: 880px;
  margin: 0 auto;
  background: var(--ink);
  border-radius: var(--radius-lg);
  padding: 76px 48px;
  text-align: center;
}
.final-cta-eyebrow { display: block; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 20px; }
/* 18ch forced this headline into four lines inside an 880px card — widened so
   it sets in three, with text-wrap:balance handling the break points. */
.final-cta h2 { font-family: var(--serif); font-weight: 400; line-height: 1.05; letter-spacing: var(--lts-display); color: var(--bg); font-size: clamp(30px, 4vw, 48px); max-width: 24ch; margin: 0 auto 36px; }

/* ---------- Footer ---------- */
/* Redesign (2026-08-21): the grid previously reserved 5 tracks
   (1.6fr + repeat(4,1fr)) but only 2 link columns were ever populated,
   leaving a large dead gap on the right at desktop widths. Grid now has
   exactly as many tracks as there are columns, and the freed width goes
   to the brand column (own CTA button) instead of empty space. */
.footer { padding: 72px 32px 40px; background: var(--ink); }
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(240px, 1.7fr) 1fr 1fr;
  gap: 48px;
}
.footer-logo { height: 20px; display: block; margin-bottom: 14px; }
.footer-brand p { font-size: 14px; color: rgba(250,250,249,0.55); max-width: 26ch; line-height: 1.5; margin-bottom: 24px; }
.footer-col h5 { font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(250,250,249,0.4); margin-bottom: 14px; }
.footer-col a { display: block; font-size: 14px; padding: 6px 0; color: var(--bg); }
.footer-col a:hover { color: var(--accent-2); }
.footer-bottom { max-width: var(--max); margin: 48px auto 0; padding-top: 24px; border-top: 1px solid rgba(250,250,249,0.12); font-size: 13px; color: rgba(250,250,249,0.4); }
@media (max-width: 860px) { .footer-inner { grid-template-columns: 1fr 1fr; } }

/* ---------- Footer (Hebbia): 5 link columns + brand ----------
   hebbia.com's own footer runs Product/Solutions/Company/Policies/Follow —
   denser than this repo's other footers, matching Hebbia's information-heavy
   register. */
.footer-hebbia .footer-inner {
  grid-template-columns: minmax(220px, 1.4fr) repeat(4, 0.85fr) 0.7fr;
  gap: 28px;
}
@media (max-width: 980px) {
  .footer-hebbia .footer-inner { grid-template-columns: 1fr 1fr 1fr; }
}
@media (max-width: 640px) {
  .footer-hebbia .footer-inner { grid-template-columns: 1fr 1fr; }
}

/* ---------- Scroll reveal ---------- */
.reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.6s ease, transform 0.6s ease; }
.reveal.is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  html { scroll-behavior: auto; }
}