/* ============================================================
   Features - page-specific layout.
   Section-by-section translation of the approved Claude Design
   prototype (Features.dc.html), reusing css/page.css (.hero,
   .section, .split, .section-header, .cta), css/vault.css
   (.hero--sub, .vault-h2) and css/components.css (.tick-list,
   .pill) wherever the visual is identical to an existing page.
   Only what's new to this page lives here.

   Almost all of that new material is one thing: mock screenshots
   of the BowerVault app itself. The prototype drew every edge in
   them as a 1px border or an `inset 0 0 0 1px` ring, which is
   precisely what the app removed and what this site removed with
   it (see "Surfaces, not borders" in CLAUDE.md). So every panel,
   tile, chip and field below is separated by tone instead - the
   mock is of the app as it looks now, not as the prototype drew
   it. Row rules inside the mock tables stay: those are divider
   lines between rows in a table, one of the three exceptions.

   The DC source exposes heroGraphic ('Layered stack' | 'Stats
   card' | 'Dashboard window' | 'Leads list' | 'Phone'),
   brandingGraphic, mobileGraphic and reportCard as design-tool
   controls. Implements each one's default as real markup - same
   approach as every other *Layout prop on this site (How It
   Works' stepsLayout, About's storyLayout, Contact's
   nextLayout). */

/* ---- Shared mock-UI scaffolding ---------------------------------
   One "screenshot" of the app: a white panel on whatever ground
   the section gives it. The drop shadow is conditional on purpose
   - on a toned section the change of tone has already separated
   the panel, and a shadow on top of that reads as fussy; on a
   white section white-on-white is exactly the case the shadow is
   for. Same rule the no-borders brief sets out. */
.app-shot {
  min-width: 0;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-card);
}
.section--white .app-shot { box-shadow: 0 24px 60px rgba(12, 8, 1, 0.12); }
/* Header-to-content pull-up, same convention/math as .rest-grid below
   - scoped to .split-header's own sibling (the Overview section's
   shot) rather than .app-shot generally, since the other two uses
   (.leads-panel, .crm-panel) sit beside a .split__copy in a side-by-
   side row, not under a header, and don't want this. */
.split-header + .app-shot { margin-top: -24px; }

/* Browser chrome above a full-window shot. --surface-page-alt is a
   touch deeper than the canvas, so the bar reads as chrome against
   both the page behind it and the white app below it. */
.app-chrome {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  background: var(--surface-page-alt);
}
.app-chrome__dot { width: 10px; height: 10px; border-radius: 999px; background: rgba(12, 8, 1, 0.16); }
.app-chrome__url {
  margin-left: 12px;
  padding: 4px 14px;
  border-radius: 999px;
  background: var(--surface-card);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-secondary);
}

/* The app's own top bar. A 1px bottom shadow rather than a border:
   it sits between two whites (the bar and, above it, the chrome or
   the panel edge) where tone alone can't do the job, and it's a
   single divider line, not a box. */
.app-bar {
  display: flex;
  align-items: center;
  gap: 20px;
  padding: 0 24px;
  height: 64px;
  background: var(--surface-card);
  box-shadow: 0 1px 0 0 rgba(12, 8, 1, 0.15);
}
.app-bar__logo { height: 26px; width: 128px; display: block; transform: translateY(-5px); }
.app-nav { flex: 1; display: flex; align-items: center; gap: 6px; }
.app-nav span { padding: 6px 12px; font-family: var(--font-ui); font-size: 14px; color: var(--text-primary); }
/* The app's own current-page marker, an underline keyline - the
   same device the real site nav uses. */
.app-nav__current { font-weight: 500; box-shadow: inset 0 -2px 0 0 var(--color-pickled-bluewood); }
.app-nav__addons {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-left: 8px;
  border-radius: 8px;
  background: var(--surface-accent);
}
.app-nav__count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 999px;
  background: var(--surface-card);
  color: var(--color-mountain-meadow-darker);
  font-size: 11px;
  font-weight: 600;
}
.app-bar__account { margin-left: auto; font-family: var(--font-ui); font-size: 13px; color: var(--text-secondary); }
.app-bar__signout { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--text-primary); }

/* The app's working area - its canvas, the same #F2F2F2 the site
   now uses, with white blocks on it. */
.app-body {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 28px 24px 32px;
  background: var(--surface-canvas);
}
.app-body__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.app-body__title { display: flex; flex-direction: column; gap: 6px; }
.app-body__title h3 {
  margin: 0;
  font-family: var(--font-heading);
  font-weight: 400;
  font-size: 30px;
  line-height: 1.2;
  letter-spacing: -0.01em;
  color: var(--text-primary);
}
.app-body__title span { font-family: var(--font-body); font-size: 14px; color: var(--text-secondary); }

/* Segmented control. Track in the deeper grey, selected segment
   white - a filled tone, never a ring. */
.app-segmented { display: flex; gap: 4px; padding: 4px; border-radius: 8px; background: var(--surface-page-alt); }
.app-segmented span {
  padding: 6px 14px;
  border-radius: 8px;
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-secondary);
  white-space: nowrap;
}
.app-segmented .is-active { background: var(--surface-card); font-weight: 500; color: var(--text-primary); }

/* Status strip: a single rule above and below, list-divider style. */
.app-status {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
  padding: 12px 0;
  border-top: 1px solid rgba(12, 8, 1, 0.15);
  border-bottom: 1px solid rgba(12, 8, 1, 0.15);
}
.app-status__live { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-family: var(--font-ui); font-size: 13px; color: var(--text-primary); }
.app-status__live b { font-weight: 600; }
.app-status__sep { color: rgba(12, 8, 1, 0.25); }
.app-status__url { color: var(--text-secondary); }
.app-status__link { font-family: var(--font-ui); font-size: 13px; font-weight: 500; color: var(--text-primary); white-space: nowrap; }
.dot { width: 7px; height: 7px; border-radius: 999px; flex: 0 0 auto; }
.dot--live { background: var(--status-success); }
.dot--pending { background: var(--status-warning); }

/* Stat tiles: white on the app canvas, so no edge needed. */
.app-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; }
.app-stat { display: flex; flex-direction: column; gap: 8px; padding: 20px; border-radius: 8px; background: var(--surface-card); }
.app-stat__label { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.app-stat__value { font-family: var(--font-heading); font-size: 38px; line-height: 1.1; color: var(--text-primary); white-space: nowrap; }
.app-stat__note { font-family: var(--font-ui); font-size: 12px; color: var(--text-secondary); }
.app-meter { height: 4px; border-radius: 999px; background: rgba(12, 8, 1, 0.1); overflow: hidden; }
.app-meter span { display: block; height: 100%; background: var(--color-pickled-bluewood); }

/* Table: a white block on the app canvas. Header row in the deeper
   grey, body rows separated by single rules - table dividers, kept
   deliberately. */
.app-table { border-radius: 8px; overflow: hidden; background: var(--surface-card); }
.app-table__row {
  display: grid;
  grid-template-columns: 1fr 1.1fr 1.4fr 1.4fr;
  gap: 16px;
  padding: 14px 20px;
  border-top: 1px solid rgba(12, 8, 1, 0.1);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-primary);
}
.app-table__row span { overflow: hidden; text-overflow: ellipsis; }
.app-table__row--head {
  padding: 12px 20px;
  border-top: 0;
  background: var(--surface-page-alt);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-secondary);
}
.app-table__muted { color: var(--text-secondary); }
.app-table__name { font-weight: 600; }

/* A quiet pill used for the mock's own buttons. The app fills them
   rather than outlining them, so this is the site's standard 5%
   neutral ground (same as .pill and .tag-soon). */
.app-pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  border-radius: 999px;
  background: var(--opacity-neutral-darkest-5);
  font-family: var(--font-ui);
  font-size: 13px;
  font-weight: 500;
  color: var(--text-primary);
  white-space: nowrap;
}
.app-pill--small { padding: 7px 14px; font-size: 12px; }
.app-pill--code { padding: 6px 12px; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-weight: 400; font-size: 12px; }

/* Notes under a full-width shot. */
.shot-notes { width: 100%; max-width: var(--container-lg); display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; }
.shot-note { display: flex; flex-direction: column; gap: 8px; }
.shot-note h3 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 22px; line-height: 1.3; color: var(--text-primary); }
.shot-note p { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--text-primary); text-wrap: pretty; }

/* Two-column section header: heading left, intro paragraph right. */
.split-header { width: 100%; max-width: var(--container-lg); display: flex; flex-wrap: wrap; gap: 24px 64px; align-items: flex-end; }
.split-header__title { flex: 1 1 520px; display: flex; flex-direction: column; gap: 16px; }
.split-header__title h2 { margin: 0; }
.split-header > p { flex: 1 1 360px; margin: 0; max-width: 520px; font-family: var(--font-body); font-size: 16px; line-height: 1.5; color: var(--text-primary); text-wrap: pretty; }

/* The design's hero eyebrow, which is a kicker above the headline
   rather than the page name every other page uses as its h1 - so here
   the headline itself is the h1 and this is a plain span. Uppercased
   in CSS rather than in the markup, so screen readers still read it
   as a sentence. */
.hero__kicker {
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  margin-bottom: -14px;
}

/* ---- Hero: layered dashboard stack --------------------------------
   Home's hero collage in a different arrangement - a leads panel
   with two cards overlapping its corners. The shadows here are
   doing a different job from the panel shadow above: these cards
   overlap each other, so they need depth to read as a stack, not
   as a substitute for an outline. */
.feature-hero__stack { position: relative; width: 100%; max-width: 560px; min-height: 460px; display: flex; align-items: center; }
.feature-hero__glow {
  position: absolute;
  top: 8%;
  right: -6%;
  width: 70%;
  height: 70%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(26, 188, 156, 0.22), rgba(26, 188, 156, 0) 70%);
  filter: blur(8px);
}
.feature-hero__panel {
  position: relative;
  width: 100%;
  border-radius: 12px;
  overflow: hidden;
  background: var(--surface-card);
  box-shadow: 0 34px 80px rgba(12, 8, 1, 0.42);
}
.feature-hero__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 18px;
  height: 52px;
  box-shadow: 0 1px 0 0 rgba(12, 8, 1, 0.12);
}
.feature-hero__bar img { height: 22px; width: 110px; display: block; transform: translateY(-4px); }
.feature-hero__bar span { font-family: var(--font-ui); font-size: 13px; color: var(--text-secondary); }
.feature-hero__bar .is-current { font-weight: 500; color: var(--text-primary); box-shadow: inset 0 -2px 0 0 var(--color-pickled-bluewood); padding: 4px 2px; }
.feature-hero__bar .feature-hero__count { margin-left: auto; font-size: 12px; }
.feature-hero__body { display: flex; flex-direction: column; gap: 14px; padding: 20px 18px 26px; background: var(--surface-canvas); }
.feature-hero__body > span { font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 1.1; color: var(--text-primary); }
.feature-hero__table { border-radius: 8px; overflow: hidden; background: var(--surface-card); }
.feature-hero__row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px 16px;
  border-top: 1px solid rgba(12, 8, 1, 0.1);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-primary);
}
.feature-hero__row--head { padding: 9px 16px; border-top: 0; background: var(--surface-page-alt); font-size: 11px; font-weight: 600; color: var(--text-secondary); }

/* The two cards that overlap the panel. */
.float-card {
  position: absolute;
  z-index: 3;
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 10px;
  background: var(--surface-card);
  box-shadow: 0 22px 50px rgba(12, 8, 1, 0.32);
}
.float-card--toast { top: 22px; right: -20px; max-width: 290px; align-items: flex-start; }
.float-card__text { display: flex; flex-direction: column; gap: 2px; }
.float-card__title { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.float-card__note { font-family: var(--font-ui); font-size: 12px; line-height: 1.45; color: var(--text-secondary); }
.float-card .dot { margin-top: 6px; width: 8px; height: 8px; }

/* The report card is the visitor's report, in the visitor's own
   serif/sans pairing rather than the app's - so it reads as a
   different artefact, which it is. */
.float-card--report {
  bottom: -18px;
  left: -28px;
  width: 220px;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--color-pickled-bluewood);
  box-shadow: 0 24px 54px rgba(12, 8, 1, 0.42);
}
.float-card__eyebrow {
  font-family: var(--font-ui);
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #7FE3CF;
}
.float-card__headline { font-family: var(--font-heading); font-size: 17px; line-height: 1.25; color: #fff; }
.float-card__bars { display: flex; flex-direction: column; gap: 6px; }
.float-card__bars span { display: block; height: 5px; border-radius: 999px; background: rgba(255, 255, 255, 0.28); overflow: hidden; }
.float-card__bars span span { display: block; height: 100%; background: var(--color-mountain-meadow); }
.float-card__bars .is-part { background: rgba(255, 255, 255, 0.55); }

/* ---- Leads panel --------------------------------------------------- */
.leads-panel { flex: 1 1 480px; display: flex; flex-direction: column; }
.leads-panel__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding: 26px 24px 18px; }
.leads-panel__head h3 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: var(--text-primary); }
.leads-panel__head span { font-family: var(--font-body); font-size: 13px; color: var(--text-secondary); }
.leads-panel__title { display: flex; flex-direction: column; gap: 6px; }
.leads-filters { display: flex; align-items: center; gap: 16px; padding: 0 24px 18px; flex-wrap: wrap; }
/* Field underlines, kept - these are form inputs, not blocks. */
.leads-filters__field {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid rgba(12, 8, 1, 0.2);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-primary);
}
.leads-filters__field--search { flex: 1; min-width: 170px; color: var(--text-secondary); }
.leads-filters__field--select { justify-content: space-between; min-width: 110px; }
.leads-filters__caret { color: var(--text-secondary); }
.leads-filters__count { font-family: var(--font-ui); font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.leads-row {
  display: grid;
  grid-template-columns: 1.2fr 1fr 0.5fr;
  gap: 12px;
  align-items: center;
  padding: 16px 24px;
  border-top: 1px solid rgba(12, 8, 1, 0.1);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-primary);
}
.leads-row--head { padding: 12px 24px; font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.leads-row__when { color: var(--text-secondary); }
.leads-row__who { display: flex; flex-direction: column; min-width: 0; }
.leads-row__who b { font-weight: 600; }
.leads-row__who span { font-size: 12px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.leads-row__view { text-align: right; text-decoration: underline; text-underline-offset: 2px; }
.leads-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 24px;
  border-top: 1px solid rgba(12, 8, 1, 0.1);
  font-family: var(--font-ui);
  font-size: 12px;
  color: var(--text-secondary);
}

/* ---- Brevo panel ---------------------------------------------------- */
.crm-panel { flex: 1 1 480px; display: flex; flex-direction: column; }
.crm-panel__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 24px 26px; background: var(--surface-inverse); }
.crm-panel__head h3 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 30px; line-height: 1.1; color: #fff; }
.crm-panel__head p { margin: 0; font-family: var(--font-ui); font-size: 12px; color: rgba(255, 255, 255, 0.7); }
.crm-panel__title { display: flex; flex-direction: column; gap: 6px; }
.crm-panel__state {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: #fff;
  white-space: nowrap;
}
/* Blocks inside the panel, separated by a single rule each - the
   same list-divider exception the tables use. */
.crm-block { display: flex; flex-direction: column; gap: 12px; padding: 24px 26px; border-bottom: 1px solid rgba(12, 8, 1, 0.1); }
.crm-label { font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
/* Chosen list: a mint ground says "this is the selected one". The
   prototype had a mint ground AND a 2px mint ring; the ground says
   it once, which is enough. */
.crm-list {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 8px;
  background: var(--surface-accent);
}
.crm-list__name { display: flex; flex-direction: column; gap: 2px; }
.crm-list__name b { font-family: var(--font-ui); font-size: 14px; font-weight: 600; color: var(--text-primary); }
.crm-list__name span { font-family: var(--font-ui); font-size: 12px; color: var(--text-secondary); }
.crm-block__note { font-family: var(--font-ui); font-size: 12px; color: var(--text-secondary); }
.crm-attrs { display: flex; flex-wrap: wrap; gap: 8px; }
.crm-sync { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 26px; }
.crm-sync__link { font-family: var(--font-ui); font-size: 12px; color: var(--text-secondary); }
.crm-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 26px;
  border-top: 1px solid rgba(12, 8, 1, 0.1);
  font-family: var(--font-ui);
  font-size: 13px;
  color: var(--text-primary);
}
.crm-row span:nth-child(2) { flex: 1; }
.crm-row__time { color: var(--text-secondary); white-space: nowrap; }

/* ---- Branding: the brand kit sheet -------------------------------------
   The design's default here is the brand-kit variant, not the
   settings-and-preview one (confirmed by rendering Features.dc.html;
   its sc-if hint attributes say otherwise and an earlier build
   believed them). A client's palette, their two typefaces, and one
   line of their embed showing the result. Their colours and fonts
   throughout - that is the point of the section. */
.brand-kit { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 22px; padding: 28px; border-radius: 12px; background: var(--card-bg); }
.section--white .brand-kit { box-shadow: 0 24px 60px rgba(12, 8, 1, 0.12); }
.brand-kit__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; }
.brand-kit__name { font-family: 'Playfair Display', Georgia, serif; font-size: 24px; line-height: 1.1; color: #2C3E50; }
.brand-kit__tag {
  padding: 5px 12px;
  border-radius: 999px;
  background: var(--surface-canvas);
  font-family: var(--font-ui);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.brand-kit__swatches { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.brand-kit__swatch { display: flex; flex-direction: column; gap: 8px; }
.brand-kit__chip { height: 72px; border-radius: 8px; }
/* The palest swatch is nearly the card's own white, so it gets a
   deeper ground behind it rather than the export's 1px ring. */
.brand-kit__chip--pale { background: #F4F1EC; outline: 6px solid var(--surface-canvas); outline-offset: -6px; }
.brand-kit__hex { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--text-secondary); }
.brand-kit__fonts { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
/* Filled, not outlined - the export ringed these. */
.brand-kit__font { display: flex; align-items: center; gap: 14px; padding: 16px; border-radius: 8px; background: var(--surface-canvas); }
.brand-kit__aa { flex: 0 0 auto; line-height: 1; color: #2C3E50; }
.brand-kit__aa--serif { font-family: 'Playfair Display', Georgia, serif; font-size: 38px; }
.brand-kit__aa--sans { font-family: 'DM Sans', system-ui, sans-serif; font-size: 34px; }
.brand-kit__font-meta { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.brand-kit__font-meta b { font-family: var(--font-ui); font-size: 13px; font-weight: 500; line-height: 1.3; color: var(--text-primary); }
.brand-kit__font-meta span { font-family: var(--font-ui); font-size: 12px; line-height: 1.3; color: var(--text-secondary); }
.brand-kit__applied { display: flex; flex-direction: column; gap: 10px; padding-top: 20px; border-top: 1px solid var(--border-default); }
.brand-kit__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: 8px; background: #F4F1EC; }
.brand-kit__q { font-family: 'Playfair Display', Georgia, serif; font-size: 16px; color: #2C3E50; }
.brand-kit__cta { padding: 9px 16px; border-radius: 8px; background: #12806A; font-family: 'DM Sans', system-ui, sans-serif; font-size: 12px; font-weight: 500; color: #fff; white-space: nowrap; }

/* ---- Embedding (on navy) -----------------------------------------------
   Panels on the dark ground are lifted out of it rather than
   outlined against it. This section runs on .section--navy specifically
   (a true dark navy, --color-pickled-bluewood, #2C3E50) rather than
   .section--slate (a lighter mid-tone, #6B7784) - it was briefly built
   on slate by mistake, which is too light for white text at any
   translucency to clear 4.5:1 contrast (confirmed against the Claude
   Design source, which specifies navy here). Two other fixes were tried
   and reverted before landing on this: a darker-text/lighter-tint
   version that passed 4.5:1 on paper but still read as muddy dark-on-
   grey, and a solid-white-card version that fixed contrast but abandoned
   the design's dark, translucent look entirely. Putting the section on
   the navy it was actually meant for lets the original white-on-
   translucent design work with genuinely comfortable contrast (6-8:1),
   no card redesign needed. */
.embed-stack { flex: 1 1 480px; min-width: 0; display: flex; flex-direction: column; gap: 20px; }
.embed-card { border-radius: 8px; overflow: hidden; background: rgba(255, 255, 255, 0.08); }
.embed-card__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; background: rgba(255, 255, 255, 0.07); }
.embed-card__bar span:first-child { font-family: var(--font-ui); font-size: 13px; color: #fff; }
.embed-card__copy { padding: 5px 12px; border-radius: 999px; background: rgba(255, 255, 255, 0.16); font-family: var(--font-ui); font-size: 12px; font-weight: 500; color: #fff; }
.embed-card pre {
  margin: 0;
  padding: 22px;
  overflow-x: auto;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 13px;
  line-height: 1.7;
  color: #fff;
}
.domain-card { display: flex; flex-direction: column; gap: 14px; padding: 22px; border-radius: 8px; background: rgba(255, 255, 255, 0.08); }
.domain-card > span:first-child { font-family: var(--font-ui); font-size: 13px; color: #fff; }
.domain-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-family: var(--font-ui); font-size: 14px; color: #fff; }
.domain-row + .domain-row { padding-top: 12px; border-top: 1px solid var(--border-on-dark); }
.domain-row__state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
/* Platform pills on dark: a translucent ground, not an outline. */
.platform-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.pill--on-dark { background: rgba(255, 255, 255, 0.14); color: #fff; }

/* On-dark type for sections on slate or navy now lives in page.css:
   two pages need it. */

/* ---- The rest of the app: card grid ----------------------------------
   Sits on a white section, so .section's own --card-bg hands these
   the F9F9F9 block tone (see page.css). */
.rest-grid { width: 100%; max-width: var(--container-lg); display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
/* Header-to-content spacing convention (see page.css/contact.css/
   how-it-works.css/about.css) - a section's own gap is too much
   between the intro text and the first card, same 32px target as
   everywhere else on the site. -24px here, not -48px, since this
   section's gap is 56px above 960px (.section--gap-56 is itself
   scoped to that range) rather than the usual 80px. Below 960px
   .section--gap-56 doesn't apply at all and the gap falls back to
   the standard 64px tier, so the ≤960px override below still needs
   the usual -32px, same as everywhere else. */
.rest-grid { margin-top: -24px; }
.rest-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 26px;
  border-radius: 8px;
  background: var(--card-bg);
  transition: transform var(--duration-base) var(--ease-standard), box-shadow var(--duration-base) var(--ease-standard), opacity var(--duration-base) var(--ease-standard);
}
.rest-card:hover { transform: translateY(-4px); box-shadow: 0 18px 40px rgba(12, 8, 1, 0.1); }
.rest-card h3 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 24px; line-height: 1.3; color: var(--text-primary); }
.rest-card p { margin: 0; font-family: var(--font-body); font-size: 15px; line-height: 1.5; color: var(--text-primary); text-wrap: pretty; }
.rest-card__tag {
  margin-top: 4px;
  align-self: flex-start;
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--surface-accent);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 500;
  color: var(--color-mountain-meadow-darker);
}

/* ---- Mobile: phone mock ----------------------------------------------
   Drawn at full device size and scaled down, so every inner value
   is a real iPhone-ish measurement rather than a fiddled fraction.
   The wrapper's fixed box is the scaled footprint (412x866 at 0.68),
   since transform doesn't affect layout. */
.phone-frame { flex: 1 1 480px; min-width: 0; display: flex; justify-content: center; }
.phone-stage { position: relative; width: 280px; max-width: 100%; margin: 0 auto; }
/* No z-index: -1 here. .phone-stage is positioned but isn't a
   stacking context, so a negative z-index sent the glow behind the
   section's own background and it never showed at any width. As the
   first positioned child it already sits under the phone, which
   creates its own layer via transform. */
.phone-glow {
  position: absolute;
  top: 4%;
  left: -16%;
  width: 132%;
  height: 86%;
  border-radius: 999px;
  background: radial-gradient(circle, rgba(26, 188, 156, 0.34), rgba(26, 188, 156, 0) 68%);
  filter: blur(10px);
}
.phone-scaler { width: 280px; height: 589px; max-width: 100%; flex: 0 0 auto; display: flex; align-items: flex-start; }
/* The 1.5px inset highlight is the device's own bezel edge, part of
   drawing a physical object - not an outline around a block. */
.phone {
  position: relative;
  width: 412px;
  height: 866px;
  flex: 0 0 auto;
  padding: 11px;
  border-radius: 56px;
  background: #0C0801;
  box-shadow: 0 34px 70px rgba(12, 8, 1, 0.45), inset 0 0 0 1.5px rgba(255, 255, 255, 0.14);
  transform: scale(0.68);
  transform-origin: top left;
}
.phone__button { position: absolute; width: 3px; background: linear-gradient(90deg, #2B2520, #4A423A); border-radius: 2px; z-index: 1; }
.phone__button--mute { left: -3px; top: 148px; height: 34px; }
.phone__button--up { left: -3px; top: 206px; height: 64px; }
.phone__button--down { left: -3px; top: 284px; height: 64px; }
.phone__button--power { right: -3px; top: 232px; height: 98px; }
.phone__screen { position: relative; height: 100%; display: flex; flex-direction: column; border-radius: 46px; overflow: hidden; background: var(--surface-canvas); }
.phone__island { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 92px; height: 26px; border-radius: 999px; background: #0C0801; z-index: 2; }
.phone__home { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); width: 130px; height: 5px; border-radius: 999px; background: rgba(12, 8, 1, 0.28); z-index: 2; }
.phone__status { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; height: 48px; padding: 0 26px; background: var(--surface-card); }
.phone__time { font-family: var(--font-ui); font-size: 14px; font-weight: 600; letter-spacing: -0.01em; color: var(--text-primary); }
.phone__icons { display: flex; align-items: center; gap: 7px; }
.phone__signal { display: flex; align-items: flex-end; gap: 2px; }
.phone__signal span { width: 3px; border-radius: 1px; background: var(--text-primary); }
.phone__battery { width: 21px; height: 11px; border-radius: 3px; box-shadow: inset 0 0 0 1.2px rgba(12, 8, 1, 0.5); padding: 1.8px; box-sizing: border-box; display: block; }
.phone__battery span { display: block; width: 72%; height: 100%; border-radius: 1.5px; background: var(--text-primary); }
.phone__nub { width: 1.5px; height: 4px; border-radius: 0 1px 1px 0; background: rgba(12, 8, 1, 0.5); }
.phone__appbar { flex: 0 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 10px 20px 14px; background: var(--surface-card); }
.phone__menu { display: flex; align-items: center; gap: 10px; font-family: var(--font-ui); font-size: 15px; color: var(--text-primary); }
.phone__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--surface-accent);
  font-family: var(--font-ui);
  font-size: 12px;
  font-weight: 600;
  color: var(--color-mountain-meadow-darker);
}
.phone__title { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding: 0 20px 12px; background: var(--surface-card); }
.phone__title h3 { margin: 0; font-family: var(--font-heading); font-weight: 400; font-size: 28px; line-height: 1.1; color: var(--text-primary); }
.phone__filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 20px 14px; background: var(--surface-card); }
.phone__filter { padding: 6px 12px; border-radius: 999px; background: var(--surface-canvas); font-family: var(--font-ui); font-size: 13px; color: var(--text-primary); white-space: nowrap; }
.phone__filter--search { flex: 1; min-width: 0; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; }
.phone__count { font-family: var(--font-ui); font-size: 13px; color: var(--text-secondary); }
.phone__list { flex: 1; min-height: 0; overflow: hidden; background: var(--surface-card); }
.phone__daymark { padding: 9px 20px; background: var(--surface-page-alt); font-family: var(--font-ui); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--text-secondary); }
.phone__lead { display: flex; align-items: center; gap: 12px; padding: 15px 20px; border-bottom: 1px solid rgba(12, 8, 1, 0.12); }
.phone__lead-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.phone__lead-main b { font-family: var(--font-ui); font-size: 17px; font-weight: 500; line-height: 1.25; color: var(--text-primary); }
.phone__lead-main span { font-family: var(--font-ui); font-size: 14px; color: var(--text-secondary); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.phone__lead-main span:last-child { font-size: 13px; }
.phone__lead-meta { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; font-family: var(--font-ui); font-size: 13px; color: var(--text-secondary); white-space: nowrap; }
.phone__lead-meta .icon { width: 16px; height: 16px; color: rgba(12, 8, 1, 0.35); }
/* The design's "phone surrounded" variant: five cards, two to the
   right and three to the left, each 196px in the 212px of clear space
   either side of the 280px phone. */
.phone-stage .float-card { z-index: 3; width: 196px; box-sizing: border-box; box-shadow: 0 22px 50px rgba(12, 8, 1, 0.26); }
.phone-stage .float-card--alert { top: 96px; right: -212px; align-items: flex-start; padding: 13px 14px; }
.phone-stage .float-card--report { bottom: 56px; right: -212px; left: auto; flex-direction: column; gap: 9px; padding: 18px; box-shadow: 0 24px 54px rgba(12, 8, 1, 0.34); }
.phone-stage .float-card--report .float-card__headline { font-size: 16px; }
.phone-stage .float-card--crm { top: 110px; left: -212px; align-items: center; gap: 10px; padding: 13px 16px; }
.phone-stage .float-card--crm .dot { width: 8px; height: 8px; margin-top: 0; }
.phone-stage .float-card--crm span:last-child { font-family: var(--font-ui); font-size: 13px; font-weight: 600; color: var(--text-primary); }
.phone-stage .float-card--count { top: 214px; left: -212px; flex-direction: column; gap: 4px; padding: 16px 18px; }
.phone-stage .float-card--usage { bottom: 74px; left: -212px; flex-direction: column; gap: 4px; padding: 16px 18px; }
.float-card__count-label { font-family: var(--font-ui); font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.float-card__count-value { font-family: var(--font-heading); font-size: 30px; line-height: 1.1; color: var(--text-primary); }

/* The design's 56px section gap, above the mobile tiers only. As an
   inline style it beat .section's own responsive gap at every width,
   so these two sections stayed at 56px on a phone while every other
   section on the site went to 64px. */
@media (min-width: 961px) {
  .section--gap-56 { gap: 56px; }
}

/* The phone's five surrounding cards sit 212px clear of a 280px
   phone, so the column has to be ~704px wide before they fit. Half a
   row isn't, until about 1400px - below that they used to hang past
   the viewport and give the whole page a horizontal scrollbar. So
   this one split stacks earlier than the rest: full width gives the
   phone the room, and the cards stay. They only drop out at 760,
   which is where the design drops them too. */
@media (max-width: 1400px) {
  .split--phone { flex-direction: column; align-items: stretch; }
  .split--phone > .split__content,
  .split--phone > .phone-frame { flex: 1 1 auto; }
}
/* Below the width where the whole composition fits, the graphic is
   scaled rather than taken apart: same phone, same five cards, same
   glow, just smaller. It measures 704px across - the 280px handset
   plus a 196px card hanging 212px off each side - so it needs about
   744px of viewport once the section's own padding is counted.

   Stepped rather than fluid on purpose. The obvious
   `scale(calc((100vw - 32px) / 704))` silently does nothing: in CSS
   a length divided by a number is still a length, and scale() only
   takes a number, so the declaration is dropped. There is no way to
   get a unitless ratio out of calc, hence the ladder. Each step is
   chosen to still fit at the narrowest width in its own range.

   .phone-frame carries the scaled height: a transform doesn't change
   layout, so without it the section keeps the unscaled 589px and
   leaves a gap underneath. */
@media (max-width: 743px) {
  .phone-stage {
    transform: scale(var(--phone-k, 1));
    transform-origin: top center;
  }
  .phone-frame {
    align-items: flex-start;
    height: calc(589px * var(--phone-k, 1));
  }
}
@media (max-width: 743px) { .phone-stage { --phone-k: 0.90; } .phone-frame { --phone-k: 0.90; } }
@media (max-width: 679px) { .phone-stage { --phone-k: 0.78; } .phone-frame { --phone-k: 0.78; } }
@media (max-width: 594px) { .phone-stage { --phone-k: 0.64; } .phone-frame { --phone-k: 0.64; } }
@media (max-width: 496px) { .phone-stage { --phone-k: 0.50; } .phone-frame { --phone-k: 0.50; } }
@media (max-width: 397px) { .phone-stage { --phone-k: 0.40; } .phone-frame { --phone-k: 0.40; } }
@media (max-width: 327px) { .phone-stage { --phone-k: 0.33; } .phone-frame { --phone-k: 0.33; } }


/* ---- Responsive -------------------------------------------------------
   Two things drive the breakpoints here rather than the usual text
   reflow: the mock tables (fixed column counts that stop making
   sense narrow) and the floating cards beside the hero panel and
   the phone, which sit in negative space that only exists at
   desktop widths. Both drop out rather than being squeezed. */
@media (max-width: 1080px) {
  .app-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot-notes { grid-template-columns: repeat(2, 1fr); }
  .rest-grid { grid-template-columns: repeat(2, 1fr); }
}
/* Below 1005px the hero's own row hasn't stacked yet, but the two
   float-cards' fixed negative offsets push them up and out of
   .feature-hero__stack far enough to collide with the header logo
   above it - drop them rather than repositioning, same as the 760px
   block below does once the row itself has stacked. */
@media (max-width: 1005px) {
  .feature-hero__stack .float-card { display: none; }
}
@media (max-width: 960px) {
  /* .split already stacks (with align-items: stretch, per the
     column-flex trap in CLAUDE.md's gotchas) in page.css's own 960px
     block - these are only the pieces this page's panels add on top:
     flex-basis 480px would otherwise keep reserving a width that no
     longer exists once they're the full column. */
  .leads-panel,
  .crm-panel,
  .brand-kit,
  .embed-stack,
  .phone-frame,
  .laptop-frame { flex: 1 1 auto; }
  .app-table__row,
  .app-table__row--head { grid-template-columns: 1fr 1fr; }
  .app-table__row span:nth-child(3),
  .app-table__row span:nth-child(4) { display: none; }
  .float-card--toast { right: -8px; }
  .float-card--report { left: -8px; }
  /* Tablet+mobile spacing convention (see page.css's own ≤960px block)
     - .section--gap-56 only applies above 960px, so the gap here is
     back to the standard 64px tier, same as everywhere else, and
     needs the matching -32px pull rather than the >960px rule's -24px. */
  .rest-grid { margin-top: -32px; }
  .split-header + .app-shot { margin-top: -32px; }
}
@media (max-width: 760px) {
  .app-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .shot-notes { grid-template-columns: 1fr; }
  .rest-grid { grid-template-columns: 1fr; }
  .app-nav,
  .app-bar__account,
  .app-bar__signout { display: none; }
  .leads-filters__field--select { display: none; }
}
@media (max-width: 400px) {
  /* Two 126px font cards plus their padding stop fitting a 320px
     handset and put a real horizontal scroll on the page. */
  .brand-kit__fonts { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
  /* .feature-hero__stack's 460px min-height (base rule) exists to give
     the float-cards room either side of the panel at desktop widths.
     They're already hidden by 1005px (above), so on a stacked mobile
     hero that reserved height just centres the (shorter) panel inside
     a tall empty box, doubling the gap above and below it compared to
     every other hero's media - dropping it to content height matches
     that same 40px .hero__inner gap other heroes get on mobile. */
  .feature-hero__stack { min-height: 0; }
  .app-shot { border-radius: 8px; }
  .app-body { padding: 20px 16px 24px; }
  .app-body__title h3 { font-size: 24px; }
  .app-stat { padding: 16px; }
  .app-stat__value { font-size: 26px; }
  .leads-panel__head { padding: 20px 16px 14px; }
  .leads-filters { padding: 0 16px 14px; }
  .leads-row,
  .leads-row--head,
  .leads-foot { padding-left: 16px; padding-right: 16px; }
  .crm-panel__head,
  .crm-block,
  .crm-sync,
  .crm-row { padding-left: 18px; padding-right: 18px; }
}
/* The "128 / 150" tile is the widest string in the row and it can't
   wrap (a usage figure split over two lines reads as two numbers), so
   two columns stop fitting before the other three tiles would force
   it. One column below this rather than shrinking the type further. */
@media (max-width: 520px) {
  .app-stats { grid-template-columns: 1fr; }
}