/* =====================================================================
   Behavioral Pulse — console shell, redesigned to the 2026-08-28 handoff.

   Loaded AFTER pulse.css so it supersedes the older shell rules without
   deleting them mid-migration: surfaces are being rebuilt one at a time, and
   ripping the old sheet out first would leave every un-rebuilt screen
   unstyled. As each surface lands, its rules leave pulse.css and this file
   stops needing to out-specify them.

   Three structural changes from the old shell, not restyles:

   1. The sidebar narrows 256 → 206px and stops borrowing the site-wide
      tokens (--bg-1, --glass-border, --ink). Pulse has its own palette now;
      sharing the site's meant a change to the marketing pages could move the
      console's hairline.
   2. The shared site nav stops being reshaped into a top strip and becomes a
      FLOATING TOOLBAR pinned top-right — the console is an app, and a
      full-width marketing nav across the top of it was the single biggest
      thing making it read as a website with a sidebar bolted on.
   3. The page gains the one gradient in the product: a warm blush at the
      top-left. It is the only gradient anywhere, which is what stops it
      reading as decoration.
   ===================================================================== */

:root {
  /* 206px in the token sheet. The rail is widened here because the sidebar
     lockup is width-bound, not height-bound: at 206px, minus the brand block's
     padding, it had 170px to live in and was already filling 157 of them, so
     "bigger" had a ceiling of about 34px until the rail moved. 20px more gives
     it 198px and 40px of height — and incidentally lets the CBD wordmark above
     it reach its intended 30px, which needs 193px and had been shrinking. */
  --pulse-side-w: 226px;
}

/* ------------------------------------------------------------- page ------ */
body.pulse-console { background:var(--pulse-canvas); }
body.pulse-console #appView.pulse-shell:not(.hidden) {
  background:var(--pulse-page-bg);
  background-attachment:fixed;
  min-height:100vh;
}

/* ---------------------------------------------------------- sidebar ------ */
.pulse-side {
  flex:0 0 var(--pulse-side-w); width:var(--pulse-side-w);
  background:var(--pulse-surface-alt);
  border-right:1px solid var(--pulse-hairline);
}

.pulse-brand,
.pulse-cbd { border-bottom:1px solid var(--pulse-hairline); }

/* Company identity. Fraunces at 17px — the one place the company's own name
   is set in the display face, because it is the answer to "whose console is
   this" and every other label on the surface is interface. */
.pulse-brand-id {
  font:600 17px/1.2 var(--pulse-serif); letter-spacing:-.005em; color:var(--pulse-ink);
}
.pulse-brand-org { gap:9px; padding:16px 14px 18px; }

/* Role + edition pills. Deliberately quiet: they state a fact about the
   session, and a coloured pill here would compete with the semantic scale,
   which is the only thing in the console allowed to mean something by colour. */
.pulse-role-pills { display:flex; align-items:center; gap:6px; }
.pulse-role-pills span {
  padding:2px 8px; border-radius:var(--pulse-r-pill);
  font:600 9.5px/1.6 var(--pulse-mono); letter-spacing:.08em; text-transform:uppercase;
  color:var(--pulse-ink-soft);
}
.pulse-role-pills .is-role    { border:1px solid var(--pulse-ink-a14); }
.pulse-role-pills .is-edition { background:rgba(29,21,24,.06); }

/* ---- nav ---- */
.pulse-nav { padding:16px 10px 0; display:flex; flex-direction:column; gap:16px; }
.pulse-nav-group { display:flex; flex-direction:column; gap:2px; }
.pulse-nav-label {
  padding:0 10px 7px;
  font:600 9.5px/1 var(--pulse-mono); letter-spacing:.13em; text-transform:uppercase;
  color:var(--pulse-ink-faint);
}

/* RADIUS: the README says 14px twice (§Console shell, and the radii table's
   "drawer items"); Pulse Sidebar.dc.html renders 10px. Flagged rather than
   silently resolved — 14px is kept because the radius scale assigns 10px to a
   different role ("inner panels, note blocks, swatch tiles") and two of the
   three sources say 14. Change it here if the mock is the authority.
   Padding and gap below are the mock's exact values. */
.pulse-nav-item {
  display:flex; align-items:center; gap:11px;
  min-height:44px; padding:9px 10px; width:100%;
  border:0; background:transparent; border-radius:var(--pulse-r); cursor:pointer;
  font:500 14px/1.25 var(--pulse-sans); color:rgba(29,21,24,.78);
  text-align:left; transition:background .15s ease-out, color .15s ease-out;
}
.pulse-nav-item svg,
.pulse-nav-item .pulse-nav-ico { width:18px; height:18px; flex:none; color:var(--pulse-ink-faint); }
.pulse-nav-item:hover { background:rgba(29,21,24,.035); }

/* Active. Wash + Press Red label + Brand Red icon — the one place the brand
   colour appears in the nav, and it marks position, never severity. */
.pulse-nav-item.on {
  background:var(--pulse-brand-wash);
  color:var(--pulse-press); font-weight:600;
}
.pulse-nav-item.on svg,
.pulse-nav-item.on .pulse-nav-ico { color:var(--pulse-brand); }
.pulse-nav-item:focus-visible { outline:2px solid var(--pulse-press); outline-offset:-2px; }

.pulse-nav-item.is-disabled { color:var(--pulse-ink-faint); cursor:default; }
.pulse-nav-item.is-disabled:hover { background:transparent; }
/* CORRECTION (28 Aug, after reading Pulse Sidebar.dc.html rather than only the
   README's prose): the design DOES have nav badges. I removed them on the
   claim that it had none — that was wrong. The mock renders them as a Press
   Red plate with white text, carrying "NEW" on Reports. Restored to that.

   What stays suppressed is narrower and has a reason: an item the edition
   does not grant. The design has no disabled nav items at all — an edition
   you cannot use is absent from the rail and argued for by the upsell card
   below it — so a grey UPGRADE pill was inventing a state the design does not
   have, and it was the thing truncating "PulseSX Max" to "PulseSX …". The
   item stays, muted; the pill does not. */
.pulse-nav-item .pulse-nav-lbl { flex:1 1 auto; min-width:0; }
.pulse-nav-soon {
  flex:none; margin-left:auto; padding:2px 6px; border-radius:var(--pulse-r-pill);
  background:var(--pulse-press); color:#fff;
  font:600 9px/1.5 var(--pulse-mono); letter-spacing:.07em; text-transform:uppercase;
}
.pulse-nav-item.is-disabled .pulse-nav-soon { display:none; }

/* A per-group note. The mock carries one under MEASURE — "8 of 12 rated and
   4 of 6 conversation rounds left this year" — which is the only place in the
   console that states an allowance before you spend it rather than after. */
.pulse-nav-note {
  padding:5px 10px 0; font:400 11px/1.45 var(--pulse-sans); color:var(--pulse-ink-soft);
}

/* ---- upsell ---- */
.pulse-side-upsell {
  margin:16px 12px 0; padding:12px 13px; border-radius:var(--pulse-r);
  background:var(--pulse-brand-wash-2); display:flex; flex-direction:column; gap:5px;
}
.pulse-side-upsell b { font:500 11.5px/1.45 var(--pulse-sans); color:var(--pulse-ink); }
.pulse-side-upsell a { font:600 11.5px/1 var(--pulse-sans); color:var(--pulse-press); text-decoration:none; }

/* ---- footer ---- */
.pulse-side-foot {
  margin-top:auto; padding:16px 18px; display:flex; flex-direction:column; gap:12px;
  border-top:1px solid rgba(29,21,24,.09);
  font:400 11.5px/1 var(--pulse-sans); color:var(--pulse-ink-soft);
}

/* ------------------------------------------------- floating toolbar ------ */
/* The shared site nav, reduced to an app toolbar. It floats over the content
   rather than banding across it, so the content column starts at the top of
   the viewport and the sidebar is unambiguously the navigation. */
@media (min-width:901px) {
  body.pulse-console:not(.pulse-bare) .nav {
    position:fixed; top:14px; right:clamp(16px, 2.4vw, 34px); left:auto;
    width:auto; background:transparent; border:0; box-shadow:none; z-index:40;
  }
  body.pulse-console:not(.pulse-bare) .nav .wrap {
    max-width:none; margin:0; padding:0;
  }
  body.pulse-console:not(.pulse-bare) .nav-pill-right {
    margin:0; padding:6px 7px 6px 18px; border-radius:26px;
    background:var(--pulse-surface); border:1px solid var(--pulse-hairline);
    box-shadow:var(--pulse-shadow-raised);
    display:flex; align-items:center; gap:12px;
  }
  /* The content column clears the floating toolbar rather than sitting under
     it — a toolbar that overlaps the page title is worse than a band. */
  body.pulse-console:not(.pulse-bare) .pulse-main { padding-top:64px; }
}

/* ---------------------------------------------------------- content ------ */
.pulse-main { padding:40px 48px 34px; }

/* ------------------------------------------------------- responsive ------
   One responsive app, not a second product. ≥1280 full two-column;
   768–1279 single content column with the rail below; <768 drawer + stacked
   cards. The drawer widens to 306px and takes the horizontal shadow. */
@media (max-width:1279px) {
  .pulse-main { padding:32px 30px 30px; }
}
@media (max-width:900px) {
  .pulse-side {
    flex-basis:var(--pulse-drawer-w); width:var(--pulse-drawer-w);
    box-shadow:var(--pulse-shadow-drawer);
  }
  .pulse-side-scrim { background:var(--pulse-ink-a45); }
  .pulse-main { padding:22px 18px 26px; }
}

/* =====================================================================
   DASHBOARD — the redesigned lead (handoff §2).

   Read order is what changed → how sure → what it costs → what to do, and
   these rules exist to make that order legible rather than merely sequential:
   the headline is a sentence at display size, the movement cards are the only
   things at card weight above the fold, and the KPI tiles that used to lead
   are now visually quieter than the sentence above them.
   ===================================================================== */

.dash-lead { margin:0 0 22px; }
.dash-lead-title { margin:14px 0 0; max-width:22ch; }
.dash-lead-lede  { margin:8px 0 0; max-width:64ch; }

.dash-sec { margin-top:30px; }
.dash-sec > .pt-h2 { margin:0 0 14px; }

/* The dashboard's vertical rhythm, taken from the handoff: one flex column,
   one gap, no per-section margins. Every section's own margin is zeroed here
   rather than at each definition, so a new section inherits the rhythm instead
   of having to remember it. pulse-shell.css loads last, which is what lets a
   single-class selector beat the equally-specific margins it overrides.

   It is also the container every grid below measures itself against: the
   content column, not the viewport, is what the sidebar (open, collapsed or a
   drawer) leaves for the cards. */
.dash-flow { display:flex; flex-direction:column; gap:20px; container:dash / inline-size; }
.dash-flow > * { margin-top:0; margin-bottom:0; }
/* Two blocks are defined further down this sheet with a margin of their own,
   which a later rule of equal weight would win back. They used to sit inside
   a column; now that they are rows of the flow, they get its gap and no more. */
.dash-flow > .dash-steady, .dash-flow > .dash-brief { margin-top:0; }
/* Chips and the one sentence that explains them are a unit, not two sections. */
.dash-quality { display:flex; flex-direction:column; gap:7px; }
.dash-quality > * { margin:0; }

/* SYMMETRY (owner, 2026-09-27). Every row of the dashboard is either one
   full-width block or a set of equal columns that run edge to edge — no
   1.46fr/1fr splits, no column ending short of its neighbour, no card left
   alone at a third of the width. */

/* Movers: one equal column per card, at most three, in a single row. Three
   need ~1000px before the score, the bar and the action block all fit; below
   that they stack rather than leave one orphan under two. */
.dash-move-grid { display:grid; gap:18px; grid-template-columns:minmax(0,1fr); }
.dash-move-grid[data-n="2"] { grid-template-columns:repeat(2, minmax(0,1fr)); }
.dash-move-grid[data-n="3"] { grid-template-columns:repeat(3, minmax(0,1fr)); }
@container dash (max-width:999px) { .dash-move-grid[data-n="3"] { grid-template-columns:minmax(0,1fr); } }
@container dash (max-width:679px) { .dash-move-grid[data-n="2"] { grid-template-columns:minmax(0,1fr); } }
.dash-move-key { margin:10px 0 14px; }
.dash-move-key .sb-key { margin-top:0; }
/* Each card spans two rows of the grid and adopts them as a subgrid: the
   reading goes in the first, the advice in the second. The rows are shared
   across the whole row of cards, so every divider sits on one line and every
   card ends on one line, however long a neighbour's advice runs. A card with
   no advice simply leaves its second row empty. */
.dash-move { display:grid; grid-row:span 2; grid-template-rows:subgrid; row-gap:0; }
.dash-move-grid:not([data-n="1"]) .dash-move-act { flex-direction:column; align-items:stretch; }
.dash-move-grid:not([data-n="1"]) .dash-move-cta {
  margin-left:0; flex-direction:row; align-items:center; justify-content:space-between; }

/* Area and pattern cards on a six-track grid. Each card takes two tracks
   (three up); a last row of two takes three each and a last card alone takes
   all six, so every row ends at the right edge. Exactly four go two by two
   rather than three and one. Below 960px it is two up, a lone last card
   spanning the row; below 600px, one. */
.dash-tiles { display:grid; gap:14px; margin-top:14px; grid-template-columns:repeat(6, minmax(0,1fr)); }
.dash-tiles > * { grid-column:1 / -1; min-width:0; }
@container dash (min-width:600px) and (max-width:959px) {
  .dash-tiles > * { grid-column:span 3; }
  .dash-tiles > :last-child:nth-child(odd) { grid-column:1 / -1; }
}
@container dash (min-width:960px) {
  .dash-tiles > * { grid-column:span 2; }
  .dash-tiles > :last-child:nth-child(3n+1) { grid-column:1 / -1; }
  .dash-tiles > :last-child:nth-child(3n+2),
  .dash-tiles > :nth-last-child(2):nth-child(3n+1) { grid-column:span 3; }
  .dash-tiles > :first-child:nth-last-child(4),
  .dash-tiles > :first-child:nth-last-child(4) ~ * { grid-column:span 3; }
}

/* Needs attention / what's working: the two cards are stretched to one
   height, and the report link rides the bottom edge of its card instead of
   hanging wherever the shorter list ends. */
.dash-att { display:flex; flex-direction:column; }
.dash-att-foot { margin:auto 0 0; padding-top:12px; }
/* The pair stacks when the COLUMN is narrow, like every other grid here — its
   own 720px viewport rule kept it two-up in a 640px column beside the sidebar. */
@container dash (max-width:719px) { .pulse-grid-2 { grid-template-columns:minmax(0,1fr); } }

/* The action block: the half of the card that says what to do about the move.
   Divided from the reading above it because it is a different KIND of claim —
   everything above is measurement, everything below is advice. */
.dash-move-act {
  display:flex; align-items:flex-start; gap:12px;
  margin-top:14px; padding-top:14px; border-top:1px solid var(--pulse-hairline,#eae4de);
}
/* Five lines, as on the Where to act next cards; the whole of it is one
   click away in the report. */
.dash-move-do { display:-webkit-box; -webkit-line-clamp:5; -webkit-box-orient:vertical; overflow:hidden;
  font:500 12.5px/1.5 Inter,system-ui,sans-serif; color:var(--pulse-ink,#1d1518); }
.dash-move-when { display:block; margin-top:4px; font:400 11.5px/1.4 Inter,system-ui,sans-serif; color:var(--pulse-ink-soft,#4a4146); }
.dash-move-cta { margin-left:auto; display:flex; flex-direction:column; align-items:flex-end; gap:6px; flex:0 0 auto; }
.dash-move-open { font:500 11.5px/1 Inter,system-ui,sans-serif; color:var(--pulse-press,#a30611); text-decoration:none; white-space:nowrap; }
.dash-move-open:hover { text-decoration:underline; }
.dash-move-conf { margin-top:6px; font:400 11.5px/1.5 Inter,system-ui,sans-serif; color:var(--pulse-ink-soft,#4a4146); }
/* The move phrase is coloured text beside the pills, not a third pill — three
   pills in a row read as three equal facts, and the size of the move is not
   the same kind of thing as the band it landed in. It takes a line of its own
   under the pills: left to wrap, it sat beside a short pill and under a long
   one, and the reading below it moved from card to card. */
.dash-move-phrase { font:600 12.5px/1 Inter,system-ui,sans-serif; flex-basis:100%; margin-top:3px; }

.dash-move-badges { display:flex; flex-wrap:wrap; gap:6px; margin:9px 0 16px; }
.dash-move-read { display:flex; align-items:flex-end; gap:18px; }
.dash-move-read > div:first-child { flex:none; }
.dash-move-bar { flex:1 1 auto; min-width:0; }

/* Holding steady. The ring glyph is deliberately not an icon from the set —
   an "=" in a circle is the only mark in the product that means "no change",
   and borrowing a chevron or a dash would read as a direction. */
.dash-steady { display:flex; align-items:flex-start; gap:14px; margin-top:18px; }
.dash-steady-ring {
  flex:none; width:26px; height:26px; border-radius:50%;
  border:1.5px solid var(--pulse-ink-a14); display:flex; align-items:center; justify-content:center;
  font:600 12px/1 var(--pulse-mono); color:var(--pulse-ink-faint);
}

/* In brief — the oxblood panel. Three ranked findings, and the same component
   opens every report and every email, so the rank numeral and the cost tag
   have to survive being lifted out of this context unchanged. */
.dash-brief { margin-top:26px; }
.dash-brief-eyebrow { color:#fff; }
.dash-brief-eyebrow::before { background:var(--pulse-amber); }
.dash-brief-rows { display:flex; flex-direction:column; margin-top:16px; }
.brief-row {
  display:grid; grid-template-columns:30px 1fr 200px; gap:14px; align-items:start;
  padding:14px 0; border-bottom:1px solid rgba(255,255,255,.10);
}
.brief-row:last-child { border-bottom:0; }
.brief-n    { font:600 11px/1.6 var(--pulse-mono); color:rgba(255,255,255,.62); }
.brief-head { font:600 14px/1.35 var(--pulse-sans); color:#fff; }
.brief-body { font:400 11.5px/1.55 var(--pulse-sans); color:rgba(255,255,255,.68); margin:5px 0 0; }
.brief-cost {
  display:inline-flex; align-items:center; gap:6px; justify-self:start;
  font:400 11.5px/1.4 var(--pulse-sans); color:rgba(255,255,255,.78);
}
.dash-brief-foot {
  margin:16px 0 0; font:400 11px/1.55 var(--pulse-sans); color:rgba(255,255,255,.55); max-width:70ch;
}
@media (max-width:760px) {
  .brief-row { grid-template-columns:26px 1fr; }
  .brief-cost { grid-column:2; }
}

/* =====================================================================
   REPORT — nine sections, fixed order (handoff §3).
   ===================================================================== */

.rep-head { margin:0 0 20px; }
.rep-title { margin:14px 0 0; max-width:24ch; }
.rep-head-row {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  flex-wrap:wrap; margin-top:16px;
}
.rep-actions { display:flex; gap:8px; flex-wrap:wrap; }

/* Read quality as three bars. A word alone ("low confidence") is a label
   someone can skip; three bars with one filled is a quantity they cannot. */
.rep-quality {
  display:inline-flex; align-items:center; gap:8px;
  font:600 11px/1 var(--pulse-mono); letter-spacing:.08em; text-transform:uppercase;
  padding:6px 11px; border-radius:var(--pulse-r-pill);
}
.rep-qbars { display:inline-flex; align-items:flex-end; gap:2px; }
.rep-qbar { width:3px; height:7px; border-radius:1px; background:currentColor; opacity:.22; }
.rep-qbar:nth-child(2) { height:10px; }
.rep-qbar:nth-child(3) { height:13px; }
.rep-qbar.on { opacity:1; }
.rep-quality--healthy { background:var(--pulse-healthy-tint); color:var(--pulse-healthy-sm); }
.rep-quality--watch   { background:var(--pulse-watch-tint);   color:var(--pulse-watch-sm); }
.rep-quality--risk    { background:var(--pulse-risk-tint);    color:var(--pulse-risk-sm); }

/* Tabs — navigation, not filtering. Active is Press Red 600 over a 2px Brand
   Red underline; the underline sits on the tab, not on the bar, so a wrapped
   row still marks the right one. */
.rep-tabs {
  display:flex; gap:4px; flex-wrap:wrap;
  border-bottom:1px solid var(--pulse-hairline); margin:0 0 26px;
}
.rep-tab {
  background:none; border:0; cursor:pointer; padding:10px 12px;
  font:500 13px/1 var(--pulse-sans); color:var(--pulse-ink-soft);
  border-bottom:2px solid transparent; margin-bottom:-1px;
}
.rep-tab:hover { color:var(--pulse-ink); }
.rep-tab.on { color:var(--pulse-press); font-weight:600; border-bottom-color:var(--pulse-brand); }
.rep-tab:focus-visible { outline:2px solid var(--pulse-press); outline-offset:-2px; border-radius:6px 6px 0 0; }

.rep-sec { margin:0 0 30px; scroll-margin-top:80px; }
.rep-sec > .pt-h2 { margin:0; }
.dash-brief.is-raised { box-shadow:var(--pulse-shadow-raised); }
.dash-brief { scroll-margin-top:80px; }
.rep-head ~ .dash-brief { margin-bottom:30px; }

/* ---- At a glance ----
   Four columns: question, bar, score+trend, note. Below 900px the note drops
   under the question rather than squeezing to two words a line. */
.rep-glance { margin-top:16px; }
.glance-row {
  display:grid; grid-template-columns:1.45fr 250px 132px 1fr; gap:18px; align-items:center;
  padding:14px 0; border-bottom:1px solid var(--pulse-hairline-faint);
}
.glance-row:last-child { border-bottom:0; }
.glance-row.is-noread { opacity:.72; }
.glance-q { display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  font:500 13px/1.35 var(--pulse-sans); color:var(--pulse-ink); }
.glance-bar { min-width:0; }
.glance-score { display:flex; flex-direction:column; gap:3px; }
.glance-trend { font:400 11px/1.3 var(--pulse-mono); color:var(--pulse-ink-faint); }
.glance-note { margin:0; font:400 11.5px/1.55 var(--pulse-sans); color:var(--pulse-ink-soft); }

@media (max-width:1100px) {
  .glance-row { grid-template-columns:1.2fr 200px 110px; }
  .glance-note { grid-column:1 / -1; margin-top:-6px; }
}
@media (max-width:720px) {
  .glance-row { grid-template-columns:1fr auto; gap:10px; }
  .glance-bar { grid-column:1 / -1; }
  .glance-note { grid-column:1 / -1; margin-top:0; }
}

/* ---- What's working — a healthy-tinted block, per the handoff ---- */
.rep-working {
  background:var(--pulse-healthy-block); border-radius:var(--pulse-r);
  padding:20px 22px; margin:0 0 30px; scroll-margin-top:80px;
}
.rep-working-rows { display:flex; flex-direction:column; margin-top:14px; }
.rep-working-row {
  display:grid; grid-template-columns:auto 1fr auto; gap:10px; align-items:center;
  padding:9px 0; border-bottom:1px solid rgba(46,125,50,.14);
}
.rep-working-row:last-child { border-bottom:0; }

.rep-next { margin-top:8px; }

/* =====================================================================
   CHECK-IN WIZARD (handoff §4). The densest surface, and the one that
   determines whether a round can report at all.
   ===================================================================== */

/* Step pills — three states. Completed is HEALTHY green, not brand red: red on
   a finished step reads as a warning about it, where the brand colour marks
   where you are and green marks what is settled. */
.wiz-steps { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 22px; }
.wiz-step {
  display:flex; align-items:center; gap:9px;
  min-height:44px; padding:0 16px 0 7px; border-radius:24px;
  background:var(--pulse-surface); border:1px solid var(--pulse-hairline);
  font:500 13px/1 var(--pulse-sans); color:var(--pulse-ink-soft);
}
.wiz-step .wiz-num {
  width:26px; height:26px; border-radius:50%; flex:none;
  display:inline-flex; align-items:center; justify-content:center;
  font:600 12px/1 var(--pulse-mono);
  background:var(--pulse-tint); color:var(--pulse-ink-soft); border:0;
}
.wiz-step.on {
  background:var(--pulse-brand-wash); border-color:transparent;
  color:var(--pulse-ink); font-weight:600;
}
.wiz-step.on .wiz-num { background:var(--pulse-brand); color:#fff; }
.wiz-step.done .wiz-num { background:var(--pulse-healthy); color:#fff; }
.wiz-step.done { color:var(--pulse-ink-soft); }

/* Round type — shown only when the edition grants more than one shape. */
.wiz-roundtype { display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:12px; margin:0 0 22px; }
.wiz-rt {
  text-align:left; cursor:pointer; padding:15px 17px; border-radius:var(--pulse-r);
  background:var(--pulse-surface); border:1px solid var(--pulse-hairline);
  display:flex; flex-direction:column; gap:5px; position:relative; overflow:hidden;
}
/* The 3px rule again, at 35% when unselected and full when chosen — the same
   grammar the area cards use, so "picked" looks the same everywhere. */
.wiz-rt::before { content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:var(--pulse-brand); opacity:.35; }
.wiz-rt.on::before { opacity:1; }
.wiz-rt.on { border-color:var(--pulse-brand); background:var(--pulse-brand-wash); }
.wiz-rt:focus-visible { outline:2px solid var(--pulse-press); outline-offset:2px; }
.wiz-rt-title { font:600 14px/1.3 var(--pulse-sans); color:var(--pulse-ink); }
.wiz-rt-note  { font:400 11.5px/1.5 var(--pulse-sans); color:var(--pulse-ink-soft); }

/* ---- the rail ----
   Length gauge: comfortable to 30, hard stop at 45. The marker sits at the
   comfort line rather than at the maximum, because the number that matters is
   the one past which people stop answering carefully — not the one past which
   the server refuses. */
.wiz-gauge { margin-top:12px; }
.wiz-gauge-track {
  position:relative; height:8px; border-radius:var(--pulse-r-xs);
  background:var(--pulse-tint); overflow:hidden;
}
.wiz-gauge-fill { position:absolute; inset:0 auto 0 0; border-radius:var(--pulse-r-xs); }
.wiz-gauge-fill--ok    { background:var(--pulse-healthy); }
.wiz-gauge-fill--watch { background:var(--pulse-watch); }
.wiz-gauge-fill--over  { background:var(--pulse-risk); }
.wiz-gauge-comfort { position:absolute; top:-3px; bottom:-3px; width:2px; background:var(--pulse-ink-a32); }
.wiz-gauge-label { display:flex; justify-content:space-between; gap:10px; margin-top:7px;
  font:400 11px/1.4 var(--pulse-mono); color:var(--pulse-ink-faint); }

/* Pre-launch checks — a list whose whole job is to be scannable as pass/warn. */
.wiz-checks { display:flex; flex-direction:column; gap:9px; margin-top:12px; }
.wiz-check { display:grid; grid-template-columns:16px 1fr; gap:9px; align-items:start; }
.wiz-check-ico {
  width:16px; height:16px; border-radius:50%; margin-top:1px;
  display:flex; align-items:center; justify-content:center;
  font:600 9px/1 var(--pulse-mono); color:#fff;
}
.wiz-check--pass .wiz-check-ico { background:var(--pulse-healthy); }
.wiz-check--warn .wiz-check-ico { background:var(--pulse-watch); }
.wiz-check-text { font:400 11.5px/1.5 var(--pulse-sans); color:var(--pulse-ink-soft); }
.wiz-check-text b { font-weight:600; color:var(--pulse-ink); display:block; }

/* ---- the two-column step ----
   "Step 1 — What to diagnose. Content column + 306px rail."

   The rail is not a sidebar of extras. It answers the one question the content
   column cannot: what does everything I have clicked add up to, and will it
   report? That answer has to stay on screen while the clicking happens, which
   is why it is sticky and why it is beside the areas rather than under them —
   a summary you have to scroll back to is a summary you write after the fact.

   Below 1280 it moves under the content rather than shrinking (handoff,
   Responsive): a 200px rail would keep the gauge and lose the reason for it. */
.wiz-2col { display:block; }
.wiz-rail { margin-top:16px; }

@media (min-width:1280px) {
  .wiz-2col {
    display:grid; grid-template-columns:minmax(0,1fr) 306px; gap:22px;
    align-items:start;
  }
  .wiz-2col > .wiz-main { min-width:0; }
  /* 100px, not 24px: the site nav is fixed at z-40 with its bottom edge at
     90px, and it sits in the same right-hand column as the rail. A rail stuck
     any higher parks the proposal panel underneath it. */
  .wiz-rail { margin-top:0; position:sticky; top:100px; }
}

/* Continue stays under the content, NOT in the rail. The rail is sticky, and a
   sticky box taller than the viewport pins its own overflow off-screen: at
   872px of viewport the 876px rail put the button at y=930 and no amount of
   scrolling brought it back. The design's rail ends at the anonymity promise
   for the same reason — a summary can be clipped, an action cannot. */
.wiz-main .wiz-footer { justify-content:flex-end; }

/* Area cards inside the wizard sit on the design's own grid — four across at
   11px, which is what the 706px content column was measured for. The global
   .cat-grid auto-fit would give two fat columns here and lose the shape of the
   groups; outside the wizard it stays as it is. */
.wiz-main .cat-grid { grid-template-columns:repeat(4,1fr); gap:11px; }
@media (max-width:1000px) { .wiz-main .cat-grid { grid-template-columns:repeat(2,1fr); } }
@media (max-width:600px)  { .wiz-main .cat-grid { grid-template-columns:1fr; } }

/* The baseline group holds a single card, and a single card dropped into a
   four-column grid renders as a 210px tower of wrapped words. It is also the
   one card the design lists on its own, above the area groups. */
.wiz-main .cat-grid > .cat-card:only-child { grid-column:1 / -1; }

/* =====================================================================
   WIZARD STEPS 2 AND 3 (handoff §4).

   Both steps are a single content column — no rail. Step 1 has a rail
   because the choice there is open-ended and needs a running total; steps 2
   and 3 are a short list of decisions with an answer already on screen, and a
   summary beside a summary is just the same words twice.
   ===================================================================== */
.wiz-lede { display:flex; flex-direction:column; gap:6px; margin:0 0 18px; }
.wiz-lede h2 { margin:0; font:600 24px/1.15 var(--pulse-serif); letter-spacing:-.01em; color:var(--pulse-ink); }
.wiz-lede p  { margin:0; font:400 12.5px/1.6 var(--pulse-sans); color:var(--pulse-ink-soft); max-width:74ch; }

.wiz-panel { background:var(--pulse-surface); border:1px solid var(--pulse-hairline);
  border-radius:var(--pulse-r); padding:18px 20px; margin:0 0 18px; }
.wiz-panel-head { display:flex; align-items:baseline; justify-content:space-between; gap:12px; }
.wiz-panel-title { font:600 15px/1.15 var(--pulse-serif); color:var(--pulse-ink); }
.wiz-panel-tag { font:600 11px/1 var(--pulse-mono); letter-spacing:.06em; white-space:nowrap; }
.wiz-panel-tag--ok   { color:var(--pulse-healthy); }
.wiz-panel-tag--warn { color:var(--pulse-watch-sm); }
.wiz-panel-foot { margin:13px 0 0; font:400 11.5px/1.55 var(--pulse-sans); color:var(--pulse-ink-soft); }

/* ---- audience rows ----
   The row IS the control. "Everyone is the default" is not a radio button you
   pick, it is what every box being ticked already means, so there is no mode
   to choose and no second place for the audience to be described. */
.wiz-aud-row { display:grid; grid-template-columns:17px 1fr auto 34px; gap:11px; align-items:center;
  padding-top:11px; margin-top:11px; border-top:1px solid var(--pulse-hairline); }
.wiz-aud-name { font:500 12.5px/1.3 var(--pulse-sans); color:var(--pulse-ink); }
.wiz-aud-note { font:400 11.5px/1.35 var(--pulse-sans); color:var(--pulse-watch-sm); text-align:right; }
.wiz-aud-n { font:600 12.5px/1 var(--pulse-mono); color:var(--pulse-ink); text-align:right;
  font-variant-numeric:tabular-nums; }
.wiz-aud-row.is-off .wiz-aud-name,
.wiz-aud-row.is-off .wiz-aud-n { color:var(--pulse-ink-faint); }

.wiz-tick { appearance:none; -webkit-appearance:none; margin:0; flex:none;
  width:17px; height:17px; border-radius:5px; cursor:pointer;
  border:1.5px solid var(--pulse-ink-a32); background:var(--pulse-surface);
  display:grid; place-items:center; }
.wiz-tick:checked { background:var(--pulse-brand); border-color:var(--pulse-brand); }
.wiz-tick:checked::after { content:"\2713"; font:600 9.5px/1 var(--pulse-mono); color:#fff; }
.wiz-tick:disabled { cursor:default; opacity:.6; }
.wiz-tick:focus-visible { outline:2px solid var(--pulse-press); outline-offset:2px; }

/* ---- schedule ----
   Three cards, and in each one the value is the control rather than a label
   sitting above one. */
.wiz-sched { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin:0 0 18px; }
@media (max-width:760px) { .wiz-sched { grid-template-columns:1fr; } }
.wiz-sched-card { background:var(--pulse-surface); border:1px solid var(--pulse-hairline);
  border-radius:var(--pulse-r); padding:14px 15px; display:flex; flex-direction:column; gap:5px; }
.wiz-sched-k { font:600 9.5px/1 var(--pulse-mono); letter-spacing:.11em; color:var(--pulse-ink-faint); }
.wiz-sched-sub { font:400 11px/1.45 var(--pulse-sans); color:var(--pulse-ink-soft); }
.wiz-sched-card select,
.wiz-sched-card input {
  font:600 16px/1.25 var(--pulse-serif); color:var(--pulse-ink);
  background:transparent; border:0; border-bottom:1px solid var(--pulse-hairline);
  border-radius:0; padding:0 0 4px; width:100%; max-width:100%;
}
.wiz-sched-card input[type="number"] { width:5.5ch; }
.wiz-sched-card select:focus-visible,
.wiz-sched-card input:focus-visible { outline:2px solid var(--pulse-press); outline-offset:2px; }
.wiz-sched-card select:disabled { color:var(--pulse-ink-faint); }
.wiz-sched-row { display:flex; align-items:baseline; gap:7px; }
.wiz-sched-unit { font:400 12px/1 var(--pulse-sans); color:var(--pulse-ink-soft); }

/* ---- the amber note ----
   It names the teams. "Some teams are too small" is a sentence a reader cannot
   act on; the names are the only version that lets them decide whether the
   round is still worth running as configured. */
.wiz-amber { background:var(--pulse-watch-tint); border-radius:var(--pulse-r); padding:14px 15px;
  display:flex; gap:11px; align-items:flex-start; margin:0 0 18px; }
.wiz-amber-ico { width:16px; height:16px; border-radius:5px; flex:none;
  background:var(--pulse-watch-sm); color:#fff; font:600 9px/16px var(--pulse-mono); text-align:center; }
.wiz-amber-text { font:400 11.5px/1.6 var(--pulse-sans); color:var(--pulse-ink-soft); }

.wiz-actions { display:flex; gap:9px; flex-wrap:wrap; align-items:center; }

/* ---- step 3 review table ---- */
.wiz-review { background:var(--pulse-surface); border:1px solid var(--pulse-hairline);
  border-radius:var(--pulse-r); overflow:hidden; margin:0 0 18px; }
.wiz-review-row { display:grid; grid-template-columns:126px 1fr 18px; gap:14px; align-items:start;
  padding:13px 18px; border-bottom:1px solid var(--pulse-hairline-faint); }
.wiz-review-row:last-child { border-bottom:0; }
.wiz-review-k { font:600 9.5px/1.5 var(--pulse-mono); letter-spacing:.1em; color:var(--pulse-ink-faint); }
.wiz-review-v { font:500 12.5px/1.5 var(--pulse-sans); color:var(--pulse-ink); }
.wiz-review-ok { width:16px; height:16px; border-radius:5px; background:var(--pulse-healthy);
  color:#fff; font:600 9px/16px var(--pulse-mono); text-align:center; }
.wiz-foot-note { margin:13px 0 0; font:400 11px/1.55 var(--pulse-sans); color:var(--pulse-ink-soft); }
@media (max-width:620px) { .wiz-review-row { grid-template-columns:1fr 18px; } .wiz-review-k { grid-column:1/-1; } }

/* ---- not looked at this round ----
   A wrap of no-reading chips. They use the noread token rather than a band
   colour on purpose: an area nobody asked about has no band, and giving it one
   would be inventing the reading the section exists to say we do not have. */
.dash-unasked { display:flex; flex-wrap:wrap; gap:7px; }

/* "See all N" sits at the far end of the steady card, so the count of what
   moved and the way into everything else share one row. */
.dash-steady { display:flex; align-items:center; gap:14px; flex-wrap:wrap; }
.dash-steady-all { margin-left:auto; flex:none; align-self:center;
  font:500 12px/1 var(--pulse-sans); color:var(--pulse-press); text-decoration:none; white-space:nowrap; }
.dash-steady-all:hover { text-decoration:underline; }

/* ---- Overall Health gauge (handoff §2) ----
   74px conic ring, 56px inner disc, numeral in the mono face at 21px. The ring
   is a conic-gradient rather than an SVG arc so the sweep is one declaration
   driven by a custom property, and the numeral inside stays real text. */
.hg { position:relative; width:74px; height:74px; }
.hg__ring { position:absolute; inset:0; border-radius:50%;
  background:conic-gradient(var(--hg-col) 0 var(--hg-pct), var(--pulse-tint) var(--hg-pct) 100%); }
.hg__disc { position:absolute; inset:9px; border-radius:50%; background:var(--pulse-surface);
  display:grid; place-items:center; }
.hg__n { font:700 21px/1 var(--pulse-mono); color:var(--pulse-ink); font-variant-numeric:tabular-nums; }

/* The KPI row: four equal tiles, Overall health first. Each tile opens with a
   value slot of one fixed height — the ring fills it, the figures sit on its
   centre line — so the four labels and the four sub-lines each share a line
   across the row. The ring used to sit alone in a full-width card (or in the
   aside) with the other three in a row of their own below it. */
.pulse-kpis { --kpi-slot:56px; grid-template-columns:repeat(4, minmax(0,1fr)); }
@container dash (max-width:719px) { .pulse-kpis { grid-template-columns:repeat(2, minmax(0,1fr)); } }
.pulse-kpis .dash-kpi-n { min-height:var(--kpi-slot); display:flex; align-items:center; }
.pulse-kpis .hg { width:var(--kpi-slot); height:var(--kpi-slot); flex:0 0 auto; }
.pulse-kpis .hg__disc { inset:7px; }
.pulse-kpis .hg__n { font-size:17px; }
/* The banded turnout phrase is a sentence, not a figure — it must not inherit
   the numeral size, or "Most have taken part" wraps across three lines. */
.dash-kpi-n--band { font-size:1.05rem; line-height:1.35; }

/* The one sentence under the quality chips. Held to the same measure as the
   lede above it so the header reads as one block, not two. */
.dash-readq { margin:9px 2px 0; max-width:78ch; }

/* The lede and its CTA share a row; the button holds its width and drops below
   the text on a narrow screen rather than squeezing the title.

   flex-end, not flex-start: the site nav is fixed across the top-right of every
   page down to y=90, and a CTA aligned to the top of this block landed at 78
   and sat underneath it. Aligning to the foot of the lede puts the button below
   the nav on any header long enough to have a lede — which is all of them,
   since the eyebrow and title always precede it. */
.dash-lead-row { display:flex; align-items:flex-end; justify-content:space-between; gap:20px; flex-wrap:wrap; }
.dash-lead-cta { flex:none; }

/* =====================================================================
   ACTION PLAN — three columns (handoff §5).

   To do / In progress / Done & resolved. The columns are the status report:
   a flat list forced the reader to open every card to learn where the work
   stood, and the count in each header now says it before anything is read.
   ===================================================================== */
.ap-board { display:grid; grid-template-columns:repeat(3,1fr); gap:14px; align-items:start; }
@media (max-width:1100px) { .ap-board { grid-template-columns:1fr 1fr; } }
@media (max-width:720px)  { .ap-board { grid-template-columns:1fr; } }

.ap-col-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px;
  padding:0 2px 9px; border-bottom:1px solid var(--pulse-hairline); margin-bottom:12px; }
.ap-col-title { margin:0; }
/* The eyebrow's amber dot is budgeted to one per surface, and three column
   headers would spend it three times over. */
.ap-col-title::before { display:none; }
.ap-col-n { font:600 12px/1 var(--pulse-mono); color:var(--pulse-ink-faint); font-variant-numeric:tabular-nums; }
.ap-col-body { display:flex; flex-direction:column; gap:12px; }
.ap-col-empty { margin:0; padding:14px 2px; font:400 11.5px/1.5 var(--pulse-sans); color:var(--pulse-ink-faint); }

.ap-card { display:flex; flex-direction:column; gap:9px; }
.ap-card.is-done, .ap-card.is-resolved { opacity:.72; }
.ap-card-head { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.ap-card-title { font:600 13.5px/1.35 var(--pulse-sans); color:var(--pulse-ink); }
.ap-card-tags { display:flex; flex-wrap:wrap; gap:6px; }
.ap-card-body { margin:0; font:400 12px/1.6 var(--pulse-sans); color:var(--pulse-ink); }
.ap-card-expect { margin:0; font:400 11.5px/1.55 var(--pulse-sans); color:var(--pulse-ink-soft); font-style:italic; }
.ap-card-meta { margin:0; font:400 10.5px/1.4 var(--pulse-mono); letter-spacing:.03em; color:var(--pulse-ink-faint); }

/* The owner's own words get their own ground — it is the one line on the card
   they wrote, and it has to be findable among four the product wrote. */
.ap-note { background:#F7F3EE; border-radius:var(--pulse-r-sm); padding:10px 11px; }
.ap-note-text { margin:0 0 5px; font:400 11.5px/1.55 var(--pulse-sans); color:var(--pulse-ink); white-space:pre-wrap; }
.ap-note .linklike, .ap-note-add { font-size:11px; }
.ap-note-add { align-self:flex-start; }

.status-seg--sm { width:100%; }
.status-seg--sm button { flex:1; padding:6px 4px; font-size:11px; }

.ap-carry { margin:16px 0 0; max-width:86ch;
  font:400 11.5px/1.65 var(--pulse-sans); color:var(--pulse-ink-soft); }
.ap-carry em { font-style:normal; font-weight:600; color:var(--pulse-ink); }

/* =====================================================================
   PEOPLE & DIVISIONS (handoff §6).

   Left: the list and the controls that change it. Right: what the list
   costs you — which teams get a breakdown, which do not, and which
   addresses are going nowhere. Those consequences used to sit as inline
   asides beside the fields that cause them, where they read as warnings
   about a control rather than as a description of the next round.
   ===================================================================== */
.people-2col { display:block; }
.people-rail { margin-top:18px; display:flex; flex-direction:column; gap:14px; }
@media (min-width:1180px) {
  .people-2col { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:22px; align-items:start; }
  .people-main { min-width:0; }
  .people-rail { margin-top:0; position:sticky; top:100px; }
}

.pp-card { padding:16px 17px; }
.pp-rows { display:flex; flex-direction:column; gap:13px; margin-top:13px; }
.pp-row-top { display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
.pp-row-name { font:500 12.5px/1.3 var(--pulse-sans); color:var(--pulse-ink); }
.pp-row-n { font:600 12px/1 var(--pulse-mono); color:var(--pulse-ink); font-variant-numeric:tabular-nums; }
.pp-bar { height:6px; border-radius:var(--pulse-r-xs); background:var(--pulse-tint); overflow:hidden; margin:6px 0 5px; }
.pp-bar-fill { height:100%; border-radius:var(--pulse-r-xs); }
.pp-bar-fill--ok   { background:var(--pulse-healthy); }
.pp-bar-fill--warn { background:var(--pulse-watch); }
.pp-row-note { margin:0; font:400 11px/1.4 var(--pulse-sans); }
.pp-row-note--ok   { color:var(--pulse-healthy); }
.pp-row-note--warn { color:var(--pulse-watch-sm); }

/* The invalid-address block is risk-tinted rather than carded: it is the one
   thing on this page that will silently fail at send time. */
.pp-alert { background:var(--pulse-risk-tint); border-radius:var(--pulse-r); padding:16px 17px; }
.pp-alert-list { margin:9px 0 0; padding-left:18px; }
.pp-alert-list li { font:400 11.5px/1.6 var(--pulse-mono); color:var(--pulse-ink); word-break:break-all; }

/* Roster rows: email, then the badges that say what is wrong with the row. */
.roster-row { display:flex; align-items:center; gap:9px; padding:7px 2px;
  border-bottom:1px solid var(--pulse-hairline-faint); }
.roster-email { flex:1; min-width:0; word-break:break-all;
  font:400 12.5px/1.4 var(--pulse-sans); color:var(--pulse-ink); }
.roster-badges { display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-end; flex:0 1 auto; }
.roster-row .chip-x { border:0; background:none; color:var(--pulse-brand); font-weight:700;
  cursor:pointer; padding:0 4px; font-size:1.05em; line-height:1; flex:none; }

/* The comparison-matrix legend. Without it a column of dashes reads as a
   column of failures — PulseS as a broken PulseSX rather than a smaller,
   complete product — which is the opposite of what a true ladder means. */
.pm-legend { display:flex; flex-wrap:wrap; align-items:baseline; gap:8px 16px; margin:0 0 14px; }
.pm-legend-key { display:inline-flex; align-items:center; gap:6px; flex:none;
  font:500 11.5px/1.4 var(--pulse-sans); color:var(--pulse-ink-soft); }
.pm-legend-note { flex:1 1 340px; min-width:0;
  font:400 11.5px/1.6 var(--pulse-sans); color:var(--pulse-ink-soft); }

/* ---- "what you cannot see here" (handoff §10) ----
   Closes the sample report. The absences are the product, so the block is
   stated positively — a bordered list of facts, not a greyed-out teaser of
   features withheld from the demo. The mark is a plain rule rather than a
   cross: nothing here has failed. */
.cant-see { margin-top:34px; padding-top:26px; border-top:1px solid var(--pulse-hairline); }
.cant-see-rows { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px 26px; }
@media (max-width:760px) { .cant-see-rows { grid-template-columns:1fr; } }
.cant-see-row { display:grid; grid-template-columns:14px 1fr; gap:12px; align-items:start; }
.cant-see-mark { width:14px; height:2px; margin-top:9px; border-radius:1px;
  background:var(--pulse-ink-a32); }

/* Cancel sits with the other round actions but reads quieter than them: it is
   the one control here that destroys the round, and a destructive action that
   competes for attention with "Close & generate report" gets pressed by
   accident. Red only on intent. */
.wave-cancel { color: var(--pulse-ink-faint); }
.wave-cancel:hover { color: var(--pulse-press); border-color: var(--pulse-press); }

/* The optional half of the company profile. Separated by a rule and labelled
   for what it does, because everything above it is required and everything
   below it is not — a reader should be able to stop here without wondering
   whether they have left the form half-finished. */
.co-optional { margin-top:20px; padding-top:18px; border-top:1px solid var(--pulse-hairline); }

/* ---- the site header, inside an application ---------------------------- */
/* Pulse is a console, not a page of the site. The Pulse and BeHR links, site
   search and the language switcher are marketing chrome (a Pulse link would
   point at the page it sits on) with nothing to do in here, so the
   right nav pill sheds them. Search and the account control stay: the account is
   the only sign-out anywhere in Pulse, which has none of its own, and search is
   the one way back into the site's own material from in here. With the rest gone
   the pill no longer
   needs the pill's glass around it either — the same treatment the admin
   console already gives that pill. */
body.pulse-app .nav-pulse-link,
body.pulse-app .nav-behr-link,
body.pulse-app .nav-lang-wrap { display: none; }
body.pulse-app .nav-pill-right,
body.pulse-app .nav.scrolled .nav-pill-right {
  height: auto; padding: 0; background: none; border: 0; box-shadow: none;
  -webkit-backdrop-filter: none; backdrop-filter: none;
}

/* ---- the sidebar lockup ------------------------------------------------ */
/* The headline is the lockup now, so the span that used to hold a line of type
   has to stop treating its child like one: nowrap/ellipsis and a serif stack
   mean nothing to an SVG, and the overflow they come with would clip it. */
.pulse-brand-id .pulse-lockup { display: block; width: 100%; max-width: 198px; height: auto; }

/* The dashboard's lead eyebrow drops the amber dot. The token sheet rations
   that dot to one per screen, and on this page the headline it marks is not
   the thing the eye should land on first — the movement below it is. Scoped to
   .dash-lead so every other eyebrow in the console keeps its dot. */
.dash-lead .pulse-eyebrow::before { display: none; }

/* Sidebar legal links: 12px made them the loudest thing in the rail's foot.
   11px reads as the aside it is — and with the row gap down from 8px to 6px it
   also stops pushing "Sample report" onto a line of its own, which the smaller
   type alone missed by three pixels. */
.pulse-side-foot .pulse-foot { font-size: 11px; gap: 4px 6px; }

/* =====================================================================
   /pulse FRONT DOOR (pulse-intro.js)
   Full site width — this page sits in .wrap like every other page on
   becisions.com, so it gets the same 1152px column rather than a narrow
   reading measure. Width is spent on structure, not on longer lines: the
   copy blocks keep their own max-width in ch, and the grids do the widening.
   ===================================================================== */
.pulse-intro { max-width: none; }

/* ---- hero ---------------------------------------------------------------
   A tinted, rounded panel rather than bare page — the pattern every comparable
   product opens with, and the thing that was missing when this page started at
   a headline on a blank ground. Pitch and action left, the diagram right. */
.pi-hero {
  display: grid; gap: clamp(28px, 3.4vw, 56px); align-items: center;
  margin-bottom: clamp(28px, 3.4vw, 48px);
  padding: clamp(30px, 3.6vw, 52px) clamp(24px, 3vw, 48px);
  border: 1px solid var(--pulse-hairline); border-radius: clamp(16px, 1.6vw, 24px);
  background: linear-gradient(150deg, #FDF3F2 0%, var(--pulse-surface) 58%);
}
@media (min-width: 940px) { .pi-hero { grid-template-columns: 1.1fr .9fr; } }
.pi-lockup { display: block; width: clamp(220px, 22vw, 290px); height: auto; margin-bottom: clamp(20px, 2.2vw, 30px); }
.pi-h1 { margin: 0; max-width: 15ch; font: 600 clamp(32px, 4.6vw, 54px)/1.05 var(--pulse-serif); letter-spacing: -.024em; color: var(--pulse-ink); }
.pi-lede { margin: 18px 0 0; max-width: 50ch; font-size: clamp(16px, 1.3vw, 18px); line-height: 1.6; color: var(--pulse-ink-soft); }
.pi-free { margin: 16px 0 0; max-width: 50ch; padding-left: 14px; border-left: 3px solid var(--pulse-brand); font-size: 14.5px; line-height: 1.55; color: var(--pulse-ink); }

.pi-action { margin-top: clamp(22px, 2.4vw, 30px); }
.pi-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.pi-cta { min-height: 46px; padding-inline: 22px; font-size: 14px; }
.pi-action--notice { padding: 16px 18px; border-radius: var(--pulse-r); background: var(--pulse-surface); border: 1px solid var(--pulse-hairline); }
.pi-action-p { margin: 0; font-size: 14.5px; line-height: 1.6; color: var(--pulse-ink-soft); }
.pi-fine { margin: 16px 0 0; max-width: 52ch; font-size: 12.5px; line-height: 1.65; color: var(--pulse-ink-faint); }
.pi-fine--wide { max-width: none; }
.pi-fine a, .pi-action-p a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.pi-fine a:hover, .pi-action-p a:hover { color: var(--pulse-press); }

/* ---- hero visual ----
   Rings of answers around the quorum mark. Decorative and aria-hidden: it
   carries the feeling of many separate, unidentified people resolving into one
   reading, and the copy beside it carries the claim. */
.pi-visual { margin: 0; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pi-orbit { display: block; width: 100%; max-width: 400px; height: auto; }
.pi-orbit-halo { fill: none; stroke: var(--pulse-hairline); stroke-width: 1; }
.pi-orbit .off { fill: var(--pulse-ink); opacity: .13; }
.pi-orbit .on  { fill: var(--pulse-brand); opacity: .85; }
/* The mark is the subject of the picture; without a plate the inner ring
   crowds it and it reads as five more answers rather than as the thing they
   resolve into. */
.pi-orbit-core { fill: var(--pulse-surface); }
.pi-orbit-mark circle { fill: var(--pulse-brand); }
.pi-visual figcaption { font: 700 10px/1.6 var(--pulse-mono); letter-spacing: .14em; text-transform: uppercase; color: var(--pulse-ink-faint); text-align: center; }

/* Each ring breathes on its own delay, slowly — the product is called Pulse,
   and a still field of dots is a diagram again. Motion is opacity only, so it
   costs no layout, and it stops entirely for anyone who asked it to. */
.pi-ring { transform-origin: 200px 200px; animation: piBreathe 5.6s ease-in-out infinite; }
.pi-ring-1 { animation-delay: .45s; }
.pi-ring-2 { animation-delay: .9s; }
.pi-ring-3 { animation-delay: 1.35s; }
@keyframes piBreathe { 0%, 100% { opacity: .72; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .pi-ring { animation: none; } }

/* ---- shared section rhythm ---- */
.pi-section { padding: clamp(34px, 4vw, 54px) 0; border-top: 1px solid var(--pulse-hairline); }
.pi-h2 { margin: 12px 0 0; max-width: 28ch; font: 600 clamp(21px, 2.5vw, 30px)/1.18 var(--pulse-serif); letter-spacing: -.018em; color: var(--pulse-ink); }
.pi-body { margin: 12px 0 0; max-width: 58ch; font-size: 15px; line-height: 1.62; color: var(--pulse-ink-soft); }

/* ---- three steps, as cards ---- */
.pi-steps { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.pi-step { padding: 20px 22px 22px; border: 1px solid var(--pulse-hairline); border-radius: var(--pulse-r); background: var(--pulse-surface); }
.pi-step-n { font: 700 10px/1 var(--pulse-mono); letter-spacing: .16em; color: var(--pulse-brand); }
.pi-step-h { margin: 11px 0 0; font-size: 16px; font-weight: 600; line-height: 1.3; color: var(--pulse-ink); }
.pi-step-b { margin: 7px 0 0; font-size: 14px; line-height: 1.55; color: var(--pulse-ink-soft); }

/* ---- the ten signals, as a numbered set ---- */
/* At full width a wrapped run of chips reads as leftovers. A grid says "these
   are the ten, all of them, every time", which is the actual claim. */
.pi-signals { list-style: none; margin: 26px 0 0; padding: 0; display: grid; gap: 10px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 190px), 1fr)); }
.pi-signals li { display: flex; align-items: baseline; gap: 9px; padding: 13px 15px; border-radius: var(--pulse-r-sm); background: var(--pulse-tint); font-size: 14px; line-height: 1.3; color: var(--pulse-ink); }
.pi-sig-n { flex: none; font: 700 10px/1 var(--pulse-mono); letter-spacing: .1em; color: var(--pulse-brand); }

/* ---- what comes back ---- */
/* Spaced cards rather than a gapless grid: five items never divide evenly, and
   a gapless grid paints its empty cell as a slab of hairline. */
.pi-readings { margin: 26px 0 0; display: grid; gap: 14px; grid-template-columns: repeat(auto-fit, minmax(min(100%, 290px), 1fr)); }
.pi-reading { padding: 18px 20px; border: 1px solid var(--pulse-hairline); border-radius: var(--pulse-r); background: var(--pulse-surface); }
.pi-reading dt { font-size: 15px; font-weight: 600; color: var(--pulse-ink); }
.pi-reading dd { margin: 7px 0 0; font-size: 13.5px; line-height: 1.55; color: var(--pulse-ink-soft); }

/* ---- the one deep band ---- */
/* The token sheet allows one oxblood band per surface. The anonymity floor is
   what earns it here: it is the page's only hard promise, and the only place
   two numbers can carry the argument on their own. */
.pi-anon { display: grid; gap: clamp(22px, 3vw, 44px); align-items: center; margin: clamp(34px, 4vw, 54px) 0; padding: clamp(28px, 3.4vw, 44px) clamp(24px, 3vw, 44px); border-radius: var(--pulse-r-lg); background: var(--pulse-oxblood); color: #FAF8F5; }
@media (min-width: 860px) { .pi-anon { grid-template-columns: 1.5fr 1fr; } }
.pi-anon-eyebrow { color: #E8B9BC; }
.pi-anon-eyebrow::before { background: var(--pulse-amber); }
.pi-anon-h { margin: 12px 0 0; max-width: 24ch; font: 600 clamp(21px, 2.5vw, 30px)/1.18 var(--pulse-serif); letter-spacing: -.018em; color: #FFF; }
.pi-anon-b { margin: 12px 0 0; max-width: 48ch; font-size: 15px; line-height: 1.62; color: #D9C9CB; }
.pi-floor { margin: 0; display: grid; gap: 14px; }
.pi-floor > div { padding: 16px 18px; border: 1px solid rgba(250,248,245,.16); border-radius: var(--pulse-r); background: rgba(250,248,245,.05); }
.pi-floor dt { font: 600 clamp(26px, 3vw, 34px)/1 var(--pulse-serif); color: #FFF; }
.pi-floor dd { margin: 7px 0 0; font-size: 13px; line-height: 1.45; color: #D9C9CB; }

.pulse-intro .ed-grid { margin-top: 26px; }

/* =====================================================================
   PUBLIC PLANS PAGE (#subscribe, signed out — the bare shell)
   Signed in this is a console screen inside a 1600px content column beside a
   sidebar. Signed out it is a page of becisions.com, and was still wearing the
   console's measurements: 1184px starting at x=48, against the site's 1152 at
   x=64. It now takes the site's column exactly — .wrap is a 1200px max with
   24px of padding inside it, which is what these two rules reproduce.
   ===================================================================== */
#appView.pulse-bare .pulse-main { padding-inline: 24px; }
#appView.pulse-bare .pulse-main > #pulseContent { max-width: 1152px; }

/* A pricing page is a symmetrical object: three equal columns under one
   heading. The heading and the offer above them were left-aligned against
   1184px of width, which read as a console screen that had been widened rather
   than as a page. Centred, the axis the cards already sit on runs the whole
   way up. */
.sub-public-head { text-align: center; }
.sub-public-head h2 { font-family: var(--pulse-serif); font-weight: 600; letter-spacing: -.02em; line-height: 1.1; }
.sub-public-head > .hint { margin-inline: auto !important; }

/* The start-free card was a space-between row: at this width that is 300px of
   void between the pitch and the buttons meant to answer it. */
/* .pulse-card draws a 3px brand rule down its left edge — a reading direction,
   which is the one thing a centred card does not have. The tint and the eyebrow
   carry the emphasis here instead. */
.sub-start::before { display: none; }
.sub-start { display: flex; flex-direction: column; align-items: center; gap: 18px; text-align: center; padding-block: 26px; }
.sub-start > div:first-child > .hint:last-child { margin-inline: auto; }
.sub-start-actions { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }

/* Same fix for the enterprise strip below the cards. */
#appView.pulse-bare .plan-enterprise { justify-content: center; text-align: center; gap: 10px 20px; }

/* Plan matrix column widths.
   The table was table-layout:auto, so the browser sized every column by its
   longest cell: the feature names took 290px, PulseS 165, PulseSX 271, and
   "NUMBERS + WORDS + FOLLOW-UP" pushed PulseSX Max to 424. Three editions being
   compared like for like have to be measured like for like — an edition column
   that is two and a half times another's width reads as a claim about the
   edition. Fixed layout, one third to the feature names and the rest split
   evenly, so the three are identical at every width. */
.pm { table-layout: fixed; }
.pm th:first-child, .pm td:first-child { width: 34%; }
.pm th:not(:first-child), .pm td:not(:first-child) { width: 22%; }