/* ===================================================================
   Envisor — Marketing Website v4 "Blended Inspirations"
   Design register: blend of Legora (cinematic photography energy,
   forest-green accent, accordion feature list), Hebbia (dark
   asymmetric bento product grid, tracked serif impact statements),
   and Sierra (rounded pill buttons/nav, generous logo wall, gradient
   bento tiles) — reskinned onto v3's cream/ink base and real Envisor
   content. See HANDOFF.md for full sourcing and rationale.
   =================================================================== */

:root {
  --bg: #fafaf9;
  --ink: #0f0e0d;
  --muted: #5c5952;
  --muted-2: #83807a;
  --border: #e4e1da;
  --card: #ffffff;
  --accent: #F2B400;        /* brand yellow — fills: buttons, active states, badges */
  --accent-2: #B8860B;      /* deep amber — hover-darken of fills, and text-on-light contexts where bright yellow reads too low-contrast */
  --accent-tint: #FBEEC7;   /* pale yellow fill for tags/badges */
  --dark-1: #0f0e0d;
  --dark-2: #201f1e;        /* neutral dark gray, for bento/lane cards */
  --dark-3: #0f0e0d;

  /* radius scale — every radius used anywhere on the page routes through one
     of these five, named, so the vocabulary is auditable in one place */
  --radius-sm: 999px;       /* pill buttons/tags — Sierra/Legora signature */
  --radius-md: 14px;        /* small cards: nav dropdown, logo cells */
  --radius-lg: 22px;        /* standard cards: announce, impact, testimonials */
  --radius-xl: 28px;        /* accordion capsules — Legora's own shape */
  --radius-sharp: 8px;      /* the one deliberate exception: Hebbia bento tiles */
  --radius-sharp-sm: 4px;   /* sharp scale's small step — CTAs *inside* the Hebbia bento
                               tiles, sampled from hebbia.com's own 4px buttons. A pill
                               button inside an 8px-radius tile was cancelling the exact
                               contrast that section exists to create. Used nowhere else. */

  /* 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;
}

* { 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 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: -0.01em;
  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(--ink); }
.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); }

/* ---------- Top announcement strip (Legora) ----------
   legora.com opens on a slim full-bleed strip above the nav carrying one line
   of news plus a single forward link — the page's first horizontal edge, and
   part of why its nav reads as anchored rather than floating on the
   background. This page had no equivalent: the nav sat straight on --bg with
   nothing establishing the top of the page. Deliberately NOT sticky — Legora
   pins both bar and nav, permanently taxing viewport height; letting the
   strip scroll away keeps this page's restraint while still landing the
   structural move. */
.topbar { background: var(--ink); }
.topbar-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 0 32px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  font-size: 13px;
  color: rgba(250, 250, 249, 0.72);
}
.topbar-inner a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--accent);
  font-weight: 500;
}
.topbar-inner a svg { transition: transform 0.15s ease; }
.topbar-inner a:hover svg { transform: translateX(3px); }
@media (max-width: 640px) {
  .topbar-inner { height: auto; padding: 10px 20px; gap: 10px; font-size: 12.5px; flex-wrap: wrap; }
}

/* ---------- 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 — Harvey's split text layout + framed product shot bleeding into a Legora-mood band ---------- */
.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: 1.05;
  letter-spacing: -0.01em;
  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; }
}

/* ---------- 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: -0.01em; 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: -0.01em; 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; }
}

/* ---------- 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);
}
.impact-stat { padding: 0 40px; border-left: 1px solid rgba(250,250,249,0.14); }
.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. */
.impact-num { font-family: var(--serif); font-weight: 500; font-size: clamp(30px, 3.4vw, 44px); line-height: 1.1; 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: 1px solid rgba(250,250,249,0.14); 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: '— '; }
}

/* ---------- 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); 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: -0.01em; 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); }
.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; } }

/* ---------- 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; }
}