/* ===========================================================================
   landing_dashboard.css — GENERATED by scripts/build_landing_hero.py.
   Do not hand-edit; edit that script (its SHELL block is the only hand-written
   CSS here) and re-run it.

   A SCOPED COPY of the Overview's rules from ui_concept.css, all of it under
   .m-app. A copy rather than a link: ui_concept.css paints :root and body,
   ships a global reset, and half a dozen of its token names (--accent, --ink,
   --page, --line, --surface, --brand) collide with landing-page tokens holding
   entirely different values. Linking it would restyle the marketing page.

   Three deliberate divergences from the original, all of them consequences of
   the app being drawn inside a box instead of a window:

     1. Every `vw` clamp is pinned to its maximum. A vw inside the stage is the
        marketing page's viewport, which has nothing to do with the width the
        app is being drawn at.
     2. No @media blocks are copied, and the shot is NOT responsive by intent.
        It is the desktop dashboard at every width, scaled down — a phone-width
        fold would have to fire off the marketing viewport while the stage is
        still 1440px wide, which is the wrong width entirely.
     3. The shell (§2) is rewritten rather than copied — see the note there.

   Rules and tokens the landing markup never reaches are pruned. That is why
   re-running the generator is step one after touching the mock markup, and
   scripts/landing_hero_parity.py is step two.
   =========================================================================== */

/* ---------------------------------------------------------------------------
   §0 the stage

   --dash-w, --dash-h and --dash-s are declared in landing.html, on .mock-fit
   and .mock: the frame needs them too (its chrome and its corner radius scale
   with the app), and only .mock-fit's children can read its 100cqw. Everything
   here just inherits the result.

   The app is laid out at a true --dash-w and scaled down whole, so every
   proportion inside holds: the rail is really 232px, the type is really 13px,
   and the reader sees the desktop dashboard rather than a squeezed one.
   --------------------------------------------------------------------------- */
.m-stage{
  height:calc(var(--dash-h) * var(--dash-s));
  overflow:hidden;
}
.m-stage-in{
  transform:scale(var(--dash-s));
  transform-origin:0 0;
}

/* ---------------------------------------------------------------------------
   §1 tokens — ui_concept.css's :root with :root[data-theme="dark"] folded in,
   so the copy carries one palette and no theme switch.
   --------------------------------------------------------------------------- */
.m-app{
  --ink:#E6E9F0;
  --ink-soft:#9AA4B5;
  --page:#090909;
  --paper:#151515;
  --well:#171717;
  --well-hover:color-mix(in srgb, var(--accent) 10%, var(--well) 90%);
  --accent:#6B9FE8;
  --accent-light:#8FB6EF;
  --accent-wash:#182131;
  --series-views:#3987e5;
  --series-clicks:#D9911F;
  --series-leads:#7C6FE0;
  --unread-wash:rgba(88,148,232,.10);
  --unread-badge:#8FB6EF;
  --danger:#B4304A;
  --success:#10B981;
  --warning:#B87A1E;
  --gold:#C08A1B;
  --success-ink:#34d399;
  --danger-ink:#f2879e;
  --warning-ink:#E0A64A;
  --accent-ink:#8FB6EF;
  --tooltip-bg:#31363F;
  --tooltip-ink:#f4f5f7;
  --hairline:rgba(255,255,255,0.09);
  --rail-bg:#101010;
  --rail-ink:#E7E7E7;
  --rail-ink-strong:#F5F5F5;
  --rail-ink-soft:#B0B0B0;
  --rail-ink-dim:#8A8A8A;
  --rail-line:#232323;
  --rail-hover:#1C1C1C;
  --radius:3px;
  --radius-ctl:8px;
  --radius-input:var(--radius-ctl);
  --radius-tile:10px;
  --radius-lg:12px;
  --radius-pill:999px;
  --shadow-sm:0 1px 2px rgba(0,0,0,.3);
  --shadow-md:0 6px 20px rgba(0,0,0,.35);
  --shadow-lg:0 16px 40px rgba(0,0,0,.45);
  --font-display:'Fraunces', Georgia, 'Iowan Old Style', ui-serif, serif;
  --font-body:'DM Sans', 'Segoe UI', ui-sans-serif, system-ui, sans-serif;
  --font-mono:var(--font-body);
  --font-sans:var(--font-body);
  --type-display-xl:600 56px/1.06 var(--font-display);
  --type-display-l:600 40px/1.12 var(--font-display);
  --type-display-m:600 32px/1.18 var(--font-display);
  --fs-value-xl:50px;
  --fs-value-lg:30px;
  --fs-value-md:28px;
  --fs-value-sm:27px;
  --fs-value:26px;
  --fs-h2:22px;
  --fs-h3:18px;
  --fs-panel:17px;
  --track-display-xl:-.024em;
  --track-display-l:-.020em;
  --track-display-m:-.016em;
  --type-h1:700 28px/1.22 var(--font-body);
  --type-h2:600 22px/1.30 var(--font-body);
  --type-h3:600 18px/1.36 var(--font-body);
  --type-h4:600 16px/1.42 var(--font-body);
  --track-h1:-.017em;
  --track-h2:-.013em;
  --track-h3:-.008em;
  --track-h4:-.004em;
  --type-body-lg:400 17px/1.60 var(--font-body);
  --type-body:400 15px/1.60 var(--font-body);
  --type-body-sm:400 13px/1.55 var(--font-body);
  --type-label:500 12px/1.25 var(--font-body);
  --type-data:400 13px/1.40 var(--font-body);
  --type-code:400 13px/1.50 var(--font-body);
  --track-label:.08em;
  --track-eyebrow:.14em;
  --measure-body:68ch;
  --measure-display:56ch;
  --fs-sm:13px;
  --lh-sm:1.55;
  --fs-xs:12.5px;
  --lh-xs:1.50;
  --fs-2xs:11.5px;
  --lh-2xs:1.45;
  --fs-3xs:10.5px;
  --lh-3xs:1.40;
  --type-label-sm:500 var(--fs-3xs)/1.2 var(--font-body);
  --space-1:4px;
  --space-2:8px;
  --space-3:10px;
  --space-4:12px;
  --space-5:14px;
  --space-6:16px;
  --space-7:20px;
  --space-8:24px;
  --space-9:32px;
  --space-10:36px;
  --space-11:56px;
  --space-12:80px;
  --space-3xs:var(--space-1);
  --space-2xs:var(--space-2);
  --space-xs:var(--space-4);
  --space-sm:var(--space-6);
  --space-md:var(--space-8);
  --space-lg:var(--space-10);
  --space-xl:var(--space-11);
  --space-2xl:var(--space-12);
  --space-3xl:120px;
  --brand:#2F6BC9;
  --brand-light:var(--accent-light);
  --brand-wash:var(--accent-wash);
  --brand-hover:#3B74CC;
  --brand-active:#285BAB;
  --brand-deep:#A9C7F0;
  --brand-line:#2A3F5E;
  --brand-wash-2:#1F2C42;
  --on-brand:#FFFFFF;
  --success-deep:var(--success-ink);
  --success-line:#1E4635;
  --success-wash:#12291F;
  --warning-deep:#E0A64A;
  --warning-line:#4A3A1B;
  --warning-wash:#2A2011;
  --danger-deep:var(--danger-ink);
  --danger-line:#4E1F29;
  --danger-wash:#2B1319;
  --danger-hover:#CD3E59;
  --info:var(--brand);
  --info-deep:var(--brand-deep);
  --info-line:var(--brand-line);
  --info-wash:var(--brand-wash);
  --st-new:#A99CE8;
  --st-new-wash:#1E1A33;
  --st-qualified:#6B9FE8;
  --st-qualified-wash:#182131;
  --st-proposal:#D9A44E;
  --st-proposal-wash:#2A2011;
  --st-booked:#45C08D;
  --st-booked-wash:#12291F;
  --st-done:#9AA4B5;
  --st-done-wash:#1E222B;
  --st-lost:#E08A72;
  --st-lost-wash:#2B1610;
  --surface-page:var(--page);
  --surface-card:var(--paper);
  --surface-sunk:var(--well);
  --surface-raised:var(--paper);
  --surface-inverse:#0f1115;
  --on-inverse:var(--tooltip-ink);
  --scrim:rgba(4,6,10,.62);
  --line-hair:1px;
  --line:1.5px;
  --line-thick:2px;
  --radius-xs:var(--radius);
  --radius-sm:4px;
  --radius-md:var(--radius-ctl);
  --radius-xl:var(--radius-lg);
  --shadow-1:var(--shadow-sm);
  --shadow-2:var(--shadow-md);
  --shadow-3:var(--shadow-lg);
  --shadow-4:0 24px 56px -16px rgba(0,0,0,.62), 0 4px 12px -4px rgba(0,0,0,.4);
  --focus-w:2px;
  --focus-offset:2px;
  --focus-color:var(--brand);
  --focus-halo:0 0 0 3px var(--brand-wash-2);
  --z-base:0;
  --z-sticky:20;
  --z-dropdown:300;
  --z-scrim:400;
  --z-modal:500;
  --z-toast:700;
  --z-tooltip:900;
  --z-preloader:9999;
  --dur-1:120ms;
  --dur-2:180ms;
  --dur-3:260ms;
  --dur-4:420ms;
  --ease-out:cubic-bezier(.22,.61,.36,1);
  --ease-in-out:cubic-bezier(.65,0,.35,1);
  --ease-exit:cubic-bezier(.4,0,1,1);
  --row-h:44px;
  --row-px:14px;
  --cell-py:11px;
  --gold-ink:#EAC06B;
  --sidebar-w:232px;
  --topbar-h:72px;
  --rail-ease:cubic-bezier(.22,.61,.36,1);
  --rail-in:.22s;
  --rail-out:.16s;
  --rail-content-delay:.1s;
  --rail-content-in:.18s;
  --rail-content-out:.12s;
  --btn-h-sm:32px;
  --btn-h-md:38px;
  --btn-h-lg:46px;
  --btn-px-sm:var(--space-4);
  --btn-px-md:var(--space-6);
  --btn-px-lg:var(--space-7);
  --btn-gap:7px;
  --btn-sq-sm:var(--btn-h-sm);
  --btn-sq-md:var(--btn-h-md);
  --btn-sq-lg:var(--btn-h-lg);
  --icon-inline:1.15em;
  --icon-stroke:1.5;
}

/* base type the app inherits from its own html/body. The mock's page title
   is a div, not the app's <h1>: the landing page's only h1 is its hero. */
.m-app .m-h1{
  font-family:var(--font-display);
  font-size:30px; font-weight:500; letter-spacing:-0.01em; margin:0;
}
/* No `p` reset: ui_concept.css has none either, and .topline .sub leans on the
   UA default bottom margin. Resetting it here silently closed that gap. */
.m-app .link{ font-size:var(--fs-xs); color:var(--accent); font-weight:600; }
.m-app .view{ display:block; }

/* ---------------------------------------------------------------------------
   §2 shell — the ONE part of this file that is not a copy.

   ui_concept.css builds the shell out of position:fixed, 100vh and
   margin-left:var(--sidebar-w), and folds it at viewport breakpoints. None of
   that survives inside a 1280px box on a marketing page: the rail would pin
   itself to the browser window, and a phone viewport would fire the <=720px
   rules (rail off-canvas, bottom nav) against a stage that is still 1440px
   wide. So the rail/topbar/main are laid out here as a plain grid, at the
   desktop state, and the app is drawn at --dash-w and scaled to fit.
   Every colour, size, radius and weight below is the value that sheet uses.
   --------------------------------------------------------------------------- */
.m-app{
  display:grid;
  grid-template-columns:var(--sidebar-w) minmax(0,1fr);
  width:var(--dash-w);
  min-height:var(--dash-h);
  background:var(--page);
  color:var(--ink);
  /* ui_concept.css's own <body>: 15px/1.5, which most of the Overview
     inherits rather than declaring. Getting this wrong shifts every
     undeclared size in the copy. */
  font-family:var(--font-body);
  font-size:15px;
  line-height:1.5;
  text-align:left;
  cursor:default;
}
.m-app a{ text-decoration:none; color:inherit; }

/* ---- rail ---- */
.m-app .sidebar{
  background:var(--rail-bg);
  color:var(--rail-ink);
  display:flex; flex-direction:column; gap:2px;
  padding:var(--space-7) var(--space-5);
}
.m-app .brand{
  display:flex; align-items:center; gap:var(--space-3);
  padding:2px var(--space-2);
  margin-bottom:var(--space-7);
}
.m-app .brand-logo{ display:block; width:100%; max-width:70px; height:auto; }
.m-app .brand-logo-stack{ position:relative; aspect-ratio:499.85/139.16; }
.m-app .brand-logo-stack img{ position:absolute; inset:0; width:100%; height:100%; display:block; }
.m-app .nav-group{ display:flex; flex-direction:column; gap:2px; }
.m-app .nav-label{
  font-size:var(--fs-3xs);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--rail-ink-dim);
  padding:0 var(--space-3);
  margin:var(--space-3) 0 6px;
  white-space:nowrap;
}
.m-app .nav-item{
  display:flex; align-items:center; gap:var(--space-3);
  padding:var(--space-2) var(--space-3);
  border-radius:var(--radius-ctl);
  color:var(--rail-ink-soft);
  font-size:var(--fs-sm); font-weight:600;
  border:1px solid transparent;
}
/* The rail is dark in both themes, so it takes the light-on-dark accent
   directly rather than reading --accent from the theme pair. */
.m-app .nav-item.active{ background:rgba(107,159,232,.14); color:#8FB6EF; }
/* .nav-icon is 16px at rest and scale(.8) on the expanded desktop rail — the
   rail here is always expanded, so the two collapse into one value. */
.m-app .nav-icon{ width:20px; height:20px; flex-shrink:0; opacity:.85; transform:scale(.8); }
.m-app .nav-txt{ white-space:nowrap; }

/* ---- main column ---- */
.m-app .main{ display:flex; flex-direction:column; min-width:0; }
.m-app .main-inner{ max-width:1180px; width:100%; margin:0 auto; padding:var(--space-8) var(--space-10) 0; }

/* ---- topbar ---- */
.m-app .topbar{
  display:flex; align-items:center; gap:var(--space-6);
  background:var(--page);
  padding:var(--space-6) var(--space-10);
}
.m-app .topbar-actions{ margin-left:auto; display:flex; align-items:center; gap:6px var(--space-2); flex-shrink:0; }
.m-app .search-wrap{ position:relative; flex:0 1 320px; }
.m-app .topbar-search{
  display:flex; align-items:center; gap:var(--space-2);
  background:var(--well);
  border:1px solid var(--hairline);
  border-radius:var(--radius-ctl);
  padding:var(--space-2) var(--space-4);
  max-width:320px; flex:1;
  color:var(--ink-soft);
}
.m-app .topbar-search span{ flex:1; min-width:0; font-size:var(--fs-sm);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.m-app .topbar-search kbd{
  /* form-controls.css hands every control the body face; without it the UA's
     monospace default shows through. */
  font-family:var(--font-body);
  font-size:var(--fs-3xs);
  border:1px solid var(--hairline); border-radius:4px;
  padding:1px 5px; color:var(--ink-soft); flex-shrink:0;
}
.m-app .view-page-split{
  display:inline-flex; align-items:stretch;
  background:var(--paper); border:1px solid var(--hairline);
  border-radius:var(--radius-pill); overflow:hidden;
  height:var(--btn-h-md);
  flex-shrink:1; min-width:0;
}
.m-app .vps-open, .m-app .vps-copy{
  display:inline-flex; align-items:center; justify-content:center;
  width:var(--btn-h-md); flex-shrink:0;
  color:var(--ink-soft);
}
.m-app .vps-open .icon, .m-app .vps-copy .icon{ fill:none; stroke:currentColor; }
.m-app .vps-url{
  display:flex; align-items:center;
  font-size:var(--fs-xs); font-weight:600; color:var(--ink);
  flex:0 1 auto; min-width:0; max-width:180px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  padding-right:var(--space-2);
}
.m-app .vps-url span{ color:var(--ink-soft); font-weight:400; }
.m-app .vps-copy{ box-shadow:inset 1px 0 0 var(--hairline); }
.m-app .vps-seg{
  display:inline-flex; align-items:center; gap:6px;
  font-size:var(--fs-xs); font-weight:600;
  background:var(--brand); color:var(--on-brand);
  padding:0 var(--space-4); white-space:nowrap; flex-shrink:0;
  box-shadow:inset 1px 0 0 var(--hairline);
}
.m-app .bell-btn{
  position:relative;
  width:36px; height:36px;
  display:flex; align-items:center; justify-content:center;
  border-radius:var(--radius-ctl);
  color:var(--ink-soft);
}
.m-app .bell-dot{
  position:absolute; top:6px; right:7px;
  width:7px; height:7px; border-radius:50%;
  background:var(--danger);
  border:1.5px solid var(--paper);
}
.m-app .account-btn{
  display:flex; align-items:center; gap:var(--space-2);
  padding:5px var(--space-2) 5px 5px;
  border-radius:var(--radius-pill);
}
.m-app .avatar{
  width:30px; height:30px; border-radius:50%;
  background:linear-gradient(135deg,var(--brand),var(--brand-light));
  display:flex; align-items:center; justify-content:center;
  color:#fff; font-size:var(--fs-xs); font-weight:600; flex-shrink:0;
}
.m-app .account-name{
  font-size:var(--fs-xs); font-weight:600; color:var(--ink);
  max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.m-app .account-chevron{ color:var(--ink-soft); flex-shrink:0; }
.m-app .icon{ display:block; }

/* ---------------------------------------------------------------------------
   §3 content — copied from ui_concept.css, selectors re-scoped.
   --------------------------------------------------------------------------- */
.m-app .panel, .m-app .tile, .m-app .chart-tabs, .m-app .pill{ transition:background-color .18s ease, border-color .18s ease, color .18s ease; }
.m-app .topline{ display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:var(--space-7);
    margin-bottom:26px;
    flex-wrap:wrap; }
.m-app .topline > div:first-child{ flex:1 1 0; min-width:0; }
.m-app .topline > button, .m-app .topline > span{ flex:0 0 auto; }
.m-app .eyebrow{ font-weight:500;
    font-size:12px;
    line-height:1.2;
    letter-spacing:var(--track-eyebrow);
    text-transform:uppercase;
    color:var(--accent);
    margin:0 0 6px; }
.m-app .u-label{ font:var(--type-label);
    letter-spacing:var(--track-label);
    text-transform:uppercase;
    color:var(--ink-soft);
    margin:0; }
.m-app .topline .sub{ color:var(--ink-soft); font-size:var(--fs-sm); margin-top:4px; }
.m-app .topline .sub{ max-width:var(--measure-body); }
.m-app .bento{ display:grid;
    grid-template-columns:repeat(8, 1fr);
    grid-auto-rows:minmax(88px, auto);
    gap:var(--space-5); }
.m-app .b-chart{ grid-column:span 8; }
.m-app .b-stat{ grid-column:span 2; }
.m-app .b-tile{ grid-column:span 2; }
.m-app .b-kpislot{ grid-column:span 2; }
.m-app .b-leads{ grid-column:span 8; }
.m-app .panel{ background:none;
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    overflow:hidden;
    display:flex;
    flex-direction:column; }
.m-app .tile{ position:relative;
    background:none;
    border:1px solid var(--hairline);
    border-radius:var(--radius-lg);
    padding:var(--space-6) var(--space-6) var(--space-5);
    display:flex;
    flex-direction:column; }
.m-app .tile-head{ display:flex; justify-content:space-between; align-items:flex-start;
    margin-bottom:var(--space-4); }
.m-app .tile-delta{ font-size:var(--fs-2xs); font-weight:500;
    padding:2px var(--space-2);
    border-radius:20px; }
.m-app .tile-delta.up{ background:rgba(16,185,129,.16); color:var(--success-ink); }
.m-app .tile-value{ font-family:var(--font-display);
    font-size:var(--fs-value);
    letter-spacing:-0.01em; }
.m-app .spark{ display:flex; align-items:flex-end; gap:3px; flex:1; min-height:0; padding-top:var(--space-3); }
.m-app .spark i{ flex:1; background:var(--spark, var(--accent)); opacity:.3; border-radius:2px 2px 0 0; display:block; }
.m-app .spark i.now{ opacity:1; }
.m-app .spark i{ cursor:crosshair; transition:opacity .1s ease; }
.m-app .spark i:hover{ opacity:.7; }
.m-app .spark i.now:hover{ opacity:1; }
.m-app .tile-views{ --spark:var(--series-views); }
.m-app .tile-money{ --spark:var(--success); }
.m-app .b-stat{ padding:0; }
.m-app .stat-mini{ flex:1; min-height:0;
    display:flex; flex-direction:column; justify-content:center; gap:4px;
    padding:var(--space-4) var(--space-6); }
.m-app .stat-mini + .stat-mini{ border-top:1px solid var(--hairline); }
.m-app .stat-mini-val{ font-family:var(--font-display); font-size:var(--fs-value-sm); line-height:1.15; letter-spacing:-0.01em; }
.m-app .stat-mini-sub{ font-size:var(--fs-3xs); color:var(--ink-soft); line-height:1.3; }
.m-app .b-kpislot{ padding:0; overflow:hidden; }
.m-app .kpis{ flex:1; min-height:0; display:flex; flex-direction:column; position:relative; }
.m-app .kpis-dots{ position:absolute; top:var(--space-4); right:var(--space-3); z-index:2;
    display:flex; gap:0; }
.m-app .kpis-dot{ width:16px; height:22px; padding:0; border:0; background:none;
    cursor:pointer; display:grid; place-items:center; border-radius:var(--radius-ctl); }
.m-app .kpis-dot::after{ content:''; width:6px; height:6px; border-radius:50%;
    background:var(--ink-soft); opacity:.35;
    transition:background .15s ease, opacity .15s ease; }
.m-app .kpis-dot:hover::after{ opacity:.65; }
.m-app .kpis-dot.is-on::after{ background:var(--accent); opacity:1; }
.m-app .kpis-dot:focus-visible{ outline:2px solid var(--accent); outline-offset:-1px; }
.m-app .kpis-track{ flex:1; min-height:0; display:flex;
    touch-action:pan-y;
    transition:transform .3s cubic-bezier(.22,.61,.36,1); }
.m-app .kpis-slide{ flex:0 0 100%; min-width:0;
    display:flex; flex-direction:column; gap:var(--space-1);
    padding:var(--space-6) var(--space-6) var(--space-5); }
.m-app .kpis-slide > .u-label{ padding-right:56px; }
.m-app .kpis-mid{ flex:1; min-height:0;
    display:flex; flex-direction:column; justify-content:center; gap:var(--space-1); }
.m-app .kpis-val{ font-family:var(--font-display); font-size:var(--fs-value-sm);
    line-height:1.15; letter-spacing:-0.01em; }
.m-app .kpis-sub{ font-size:var(--fs-3xs); color:var(--ink-soft); line-height:1.4; }
.m-app .kpis-cta{ align-self:flex-start; margin-top:var(--space-3); padding:var(--space-2) 0; }
.m-app .kpis-cta:hover{ color:var(--accent-light); }
.m-app .chart-sub{ margin:2px 0 0; font-size:var(--fs-xs); color:var(--ink-soft); }
.m-app .chart-value{ font-family:var(--font-display);
    font-size:var(--fs-value-md);
    letter-spacing:-0.01em;
    padding:var(--space-4) var(--space-7) 0; }
.m-app .chart-value-unit{ font-size:var(--fs-xs); font-weight:400; line-height:1.2;
    color:var(--ink-soft); }
.m-app .chart-grid{ stroke:var(--hairline); stroke-width:1; }
.m-app .stop-a{ stop-color:var(--series-views); stop-opacity:.30; }
.m-app .stop-b{ stop-color:var(--series-views); stop-opacity:0; }
.m-app .chart-axis{ position:relative; height:13px; font-size:var(--fs-3xs); color:var(--ink-soft);
    margin:var(--space-3) var(--space-7) var(--space-6); }
.m-app .chart-axis span{ position:absolute; top:0; white-space:nowrap;
    transform:translateX(-50%); }
.m-app .range-bar{ display:flex; align-items:center; gap:var(--space-3); flex-wrap:wrap; }
.m-app .range-bar-label{ font-size:var(--fs-3xs); letter-spacing:.05em;
    text-transform:uppercase; color:var(--ink-soft); }
.m-app .bento-controls{ display:flex; align-items:center; justify-content:space-between;
    gap:var(--space-5); flex-wrap:wrap; margin-bottom:var(--space-5); }
.m-app .bento-controls .link{ margin-left:auto; }
.m-app .facets{ position:relative; padding:var(--space-6) var(--space-7) 0; display:flex; flex-direction:column; gap:var(--space-3); }
.m-app .facet-label{ font-size:var(--fs-3xs); letter-spacing:.07em;
    text-transform:uppercase; color:var(--ink-soft);
    display:flex; align-items:center; gap:6px; }
.m-app .facet-label::before{ content:""; width:7px; height:7px; border-radius:2px; background:var(--swatch); }
.m-app .facet-views{ --swatch:var(--series-views); }
.m-app .facet-leads{ --swatch:var(--series-leads); }
.m-app .facet-svg{ display:block; width:100%; overflow:visible; }
.m-app .facet-leads .facet-svg{ height:40px; }
.m-app .facet-plot{ position:relative; }
.m-app .chart-yaxis{ position:absolute; inset:0; pointer-events:none; }
.m-app .cy-lbl{ position:absolute; left:0; transform:translateY(-50%); font-size:var(--fs-3xs); line-height:1; color:var(--ink-soft);
    background:var(--paper); padding:1px 4px 1px 0; border-radius:2px; }
.m-app .cy-top{ top:9.6%; }
.m-app .cy-mid{ top:50%; }
.m-app .cy-zero{ top:90.4%; }
.m-app .views-fill{ fill:url(#viewsFill); }
.m-app .views-line{ fill:none; stroke:var(--series-views); stroke-width:2;
    stroke-linecap:round; stroke-linejoin:round;
    vector-effect:non-scaling-stroke; }
.m-app .views-dot{ fill:var(--series-views); stroke:var(--paper); stroke-width:2; vector-effect:non-scaling-stroke; }
.m-app .chart-grid{ vector-effect:non-scaling-stroke; }
.m-app .lead-bar{ fill:var(--series-leads); opacity:.55; }
.m-app .lead-bar.now{ opacity:1; }
.m-app .chart-tabs{ display:flex; gap:2px;
    background:var(--well);
    padding:3px;
    border-radius:var(--radius-ctl);
    flex-shrink:0; }
.m-app [data-theme="light"] .chart-tabs{ background:#ececec; }
.m-app .chart-tab{ border:1px solid transparent;
    background:none;
    color:var(--ink-soft);
    font-size:var(--fs-3xs);
    letter-spacing:.04em;
    padding:5px var(--space-3);
    border-radius:6px;
    cursor:pointer; }
.m-app .chart-tab:hover{ color:var(--ink); }
.m-app .chart-tab.active{ background:var(--paper);
    border-color:var(--hairline);
    color:var(--accent-ink);
    font-weight:600; }
.m-app .chart-tabs{ position:relative;
    --seg-dur:.26s;
    --seg-ease:cubic-bezier(.4,0,.2,1); }
.m-app .chart-tab{ position:relative; z-index:1;
    transition:color var(--seg-dur) var(--seg-ease); }
.m-app .b-chart .panel-head{ padding-bottom:6px; }
.m-app .b-chart .panel-head h2{ font-size:var(--fs-h2); }
.m-app .chart-value-row{ display:flex; align-items:flex-start; flex-wrap:wrap; gap:6px var(--space-7); padding:2px var(--space-7) 0; }
.m-app .chart-value-row .chart-value{ padding:0; font-variant-numeric:tabular-nums; line-height:1.1; }
.m-app .stat-grid{ display:grid; grid-template-columns:auto auto;
    align-items:baseline; column-gap:var(--space-7); row-gap:5px; }
.m-app .stat-figure{ display:flex; align-items:baseline; gap:var(--space-2); }
.m-app .stat-grid .chart-value.sm{ font-size:var(--fs-h3); color:var(--ink-soft); }
.m-app .chart-value-row.in-head{ padding:0; align-items:center; gap:6px var(--space-8); }
.m-app .chart-value-row.in-head .chart-value{ font-size:var(--fs-value); }
.m-app .chart-value-row.in-head .stat-grid .chart-value.sm{ font-size:var(--fs-h3); }
.m-app .panel-head{ display:flex; justify-content:space-between; align-items:center;
    flex-wrap:wrap; gap:var(--space-3);
    padding:var(--space-6) var(--space-7);
    border-bottom:1px solid var(--hairline); }
.m-app .panel-head h2{ font-family:var(--font-display);
    font-size:var(--fs-panel); font-weight:500; margin:0; }
.m-app .panel-head-title{ display:flex; align-items:center; gap:var(--space-3); }
.m-app .pill{ display:inline-flex; align-items:center; gap:6px;
    font-size:var(--fs-3xs); font-weight:600;
    letter-spacing:.05em; text-transform:uppercase;
    padding:3px var(--space-3) 3px var(--space-2);
    border-radius:20px;
    white-space:nowrap; flex-shrink:0; }
.m-app .pill::before{ content:""; width:6px; height:6px; border-radius:50%; flex:none; }
.m-app .pill.new{ background:var(--st-new-wash); color:var(--st-new); }
.m-app .pill.new::before{ background:var(--st-new); }
.m-app .pill.followup{ background:var(--st-proposal-wash); color:var(--st-proposal); }
.m-app .pill.followup::before{ background:var(--st-proposal); }
.m-app .pill.booked{ background:var(--st-booked-wash); color:var(--st-booked); }
.m-app .pill.booked::before{ background:var(--st-booked); }
.m-app .pill.lost{ background:var(--st-lost-wash); color:var(--st-lost); }
.m-app .pill.lost::before{ background:var(--st-lost); }
.m-app .iqx-table-wrap{ overflow-x:auto; }
.m-app table.iqx-table{ width:100%; border-collapse:collapse; }
.m-app .iqx-table th{ text-align:left; font-size:var(--fs-3xs); letter-spacing:.05em; text-transform:uppercase;
    color:var(--ink-soft); font-weight:500;
    padding:var(--space-3) var(--space-6); border-bottom:1px solid var(--hairline); white-space:nowrap; }
.m-app .iqx-table td{ padding:var(--space-4) var(--space-6); border-bottom:1px solid var(--hairline);
    font-size:var(--fs-sm); font-weight:500; vertical-align:middle; white-space:nowrap; }
.m-app .iqx-table tr:last-child td{ border-bottom:none; }
.m-app .iqx-row{ cursor:pointer; transition:background .12s ease; }
.m-app .iqx-row.unread{ background:var(--unread-wash); }
.m-app .iqx-row:hover{ background:var(--well-hover); }
.m-app .iqx-row[hidden]{ display:none; }
.m-app .iqx-name-cell{ display:flex; align-items:center; gap:var(--space-3); }
.m-app .iqx-avatar{ position:relative;
    width:28px; height:28px; border-radius:50%; flex-shrink:0;
    background:linear-gradient(135deg, var(--brand), var(--brand-light));
    display:flex; align-items:center; justify-content:center;
    color:#fff; font-size:var(--fs-2xs); font-weight:600; }
.m-app .iqx-row.unread .iqx-avatar::after{ content:"";
    position:absolute; top:-1px; right:-1px;
    width:9px; height:9px; border-radius:50%;
    background:var(--unread-badge);
    box-shadow:0 0 0 2px var(--paper); }
.m-app .iqx-name-txt{ font-weight:600; }
.m-app .iqx-row.unread .iqx-name-txt{ color:var(--ink); }
.m-app .iqx-open-link{ color:var(--ink-soft); text-decoration:none; }
.m-app .iqx-row:hover .iqx-open-link{ color:var(--accent); }
.m-app .iq-side-sub .pill{ margin-right:4px; }
.m-app .iq-copy-link.copied > .icon:not(.iq-copy-link-done){ opacity:0; }
.m-app .iq-copy-link > .icon{ transition:opacity .14s ease; }
.m-app .pill.draft{ background:var(--well); color:var(--ink-soft); }
.m-app .pill.draft::before{ background:var(--ink-soft); }
.m-app .bk-notify-icon .icon{ position:relative; z-index:1; }
.m-app .shp-copy .icon{ fill:none; stroke:currentColor; }
.m-app .an-perf-tile .spark{ flex:none; height:72px; padding-top:var(--space-4); }
.m-app .an-perf-tile.tile-money{ --spark:var(--success); }
.m-app .an-source-card > .chart-sub{ margin:0; padding:var(--space-4) var(--space-7) 0; }

/* ---------------------------------------------------------------------------
   §4 page builder — the second product shot, in the "Start with a page"
   section of landing.html.

   Same mechanism as the hero: the BUILDER'S OWN markup (the shell's collapsed
   68px rail, then #pbld's .hb-bar, .work, .left with its Content/Design tabs
   and .dp-menu-row list, and the .right live-preview pane), drawn at --dash-w
   and scaled whole by the same --dash-s. Rules are a scoped copy of
   page_builder_concept.css with its [data-theme="dark"] #pbld block folded in,
   exactly the way §1 folds ui_concept.css's dark tokens in.

   IF YOU CHANGE THE BUILDER CHROME, MIRROR IT HERE.

   Two renames, both forced, neither cosmetic:

     .m-builder, not #pbld. The real builder is identified by id and its
     stylesheet keys ~400 selectors off it; an id on a marketing page is a
     hostage to fortune, and the hero next door already establishes the
     ".m-" prefix as "this is app markup on a marketing page".

     .pbsheet, not .sheet. landing.html's OWN mobile nav menu is
     `.sheet{position:fixed; transform:translateX(-50%); opacity:0}` — a
     one-word class rule that reaches straight into the mock and would put
     the preview at the top of the viewport at zero opacity. This is the
     exact trap documented in the hero's note; page_builder_concept.css hits
     the same collision against ui_concept.css's bottom sheet and answers it
     with an explicit reset, which here would mean tracking a marketing rule
     that has nothing to do with the app. Renaming is cheaper and cannot rot.

   The vendor page inside the preview stays LIGHT on purpose. That pane is an
   iframe of the vendor's real public page in the product, and a vendor's page
   is their palette, not the dashboard's — the same reason
   doc_editor_chrome.css keeps the document paper white while its chrome goes
   dark.
   --------------------------------------------------------------------------- */

/* §4.1 tokens — page_builder_concept.css's #pbld block with its own
   [data-theme="dark"] #pbld values folded in. Only the names that DIFFER from
   §1 (or do not exist there at all) are re-pinned; the builder re-declares
   --well and --hairline at its own root, which is why those two come back
   here rather than being inherited.

   They land on .pbld, NOT on .m-builder, because #pbld is where they land in
   the product — and because the shell's Create FAB (§4.9) is a sibling of the
   builder, not a child of it, and has to keep reading §1's --brand. Re-pinning
   one step higher turned its blue gradient into the builder's lighter blue. */
.m-builder{
  --sidebar-w:68px;
  /* the app fills the window exactly rather than growing past it: every pane
     below clips, the way a 100dvh builder does */
  height:var(--dash-h); min-height:0;
  /* the FAB is position:fixed in the shell; inside a scaled stage it anchors
     here instead (§4.9) */
  position:relative;
}
.m-builder .pbld{
  --brand:#6B9FE8; --brand-fill:#2F6BC9; --brand-deep:#3B74CC; --tint:#182131;
  --muted:#9AA4B5; --faint:#6B7686;
  --hairline:rgba(230,233,240,.12); --soft:#101010;
  --good:#34d399; --good-tint:#123324; --amber:#E0A64A; --amber-tint:#3A2E12;
  --danger:#f2879e; --danger-tint:#3A1518;
  --f-bg:#1E1E1E;
  --well:#1E1E1E;
  --serif:'Fraunces',Georgia,serif;
  --bar:56px;
}
.m-builder *, .m-builder *::before, .m-builder *::after{ box-sizing:border-box; }

/* §4.2 the collapsed rail.
   body:has(#pbld) pins --sidebar-w to 68px and turns the shell's rail
   icon-only at every width from 900 up: labels out of flow, icons at a flat
   20px (the shell's .8 shrink cancelled), wordmark swapped for the mark. */
.m-builder .sidebar{ padding:var(--space-7) 14px; overflow:hidden; }
.m-builder .brand{ flex-direction:column; gap:10px; margin-bottom:var(--space-6); padding:2px 0; }
.m-builder .brand-icon{ display:flex; align-items:center; justify-content:center; }
.m-builder .brand-icon img{ width:26px; height:26px; display:block; }
.m-builder .nav-label{ display:none; }
.m-builder .nav-group + .nav-group{ margin-top:var(--space-5); }
.m-builder .nav-item{ justify-content:center; padding:var(--space-2); }
.m-builder .nav-icon{ width:20px; height:20px; transform:none; }
.m-builder .nav-txt{ display:none; }

/* §4.3 #pbld itself — the column beside the rail */
.m-builder .pbld{
  display:flex; flex-direction:column; min-width:0; min-height:0; overflow:hidden;
  background:var(--page); color:var(--ink);
  font-family:'DM Sans',system-ui,sans-serif; font-size:15px; line-height:1.5;
}

/* §4.4 the header bar. Opaque, not frosted: the dark-mode block drops the
   backdrop-filter because a blurred white pane over a dark page reads as a
   smear. The back arrow is display:none whenever the rail is there, so it is
   not in the markup at all. */
.m-builder .hb-bar{
  position:relative; z-index:40;
  flex:none; display:flex; align-items:center; gap:10px;
  height:var(--bar); padding:0 20px;
  background:var(--paper);
  border-bottom:1px solid var(--hairline);
}
.m-builder .hb-id{ min-width:0; flex:1; display:flex; align-items:center; gap:9px; }
.m-builder .hb-title{
  flex:0 1 auto; min-width:0;
  font-family:var(--serif); font-size:16.5px; font-weight:500;
  letter-spacing:-.01em; color:var(--ink);
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.m-builder .hb-pill{
  flex:none; display:inline-flex; align-items:center; gap:5px;
  font-size:9.5px; font-weight:700; letter-spacing:.09em; text-transform:uppercase;
  border-radius:99px; padding:4px 9px;
  color:var(--muted); background:rgba(230,233,240,.07);
}
.m-builder .hb-pill::before{
  content:""; width:5px; height:5px; border-radius:50%;
  background:currentColor; opacity:.75;
}
.m-builder .hb-pill[data-state="live"]{ color:var(--good); background:var(--good-tint); }
.m-builder .hb-pill[data-state="changes"]{ color:var(--amber); background:var(--amber-tint); }
.m-builder .hb-saved{
  flex:none; display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; color:var(--faint); white-space:nowrap;
}
.m-builder .hb-sp{ width:11px; height:11px; flex:none; display:grid; place-items:center; }
.m-builder .hb-sp svg{ width:11px; height:11px; }
.m-builder .hb-saved.ok .hb-sp{ color:var(--good); }
.m-builder .hb-acts{ flex:none; display:flex; align-items:center; gap:8px; }
.m-builder .hb-btn{
  display:inline-flex; align-items:center; gap:7px;
  font:600 13px/1 'DM Sans',sans-serif;
  border-radius:9px; padding:10px 14px; white-space:nowrap;
  border:1px solid var(--hairline); background:#00000040; color:var(--ink);
}
.m-builder .hb-btn svg{ flex:none; width:18px; height:18px; }
.m-builder .hb-btn.hb-primary{
  background:var(--brand-fill); border-color:var(--brand-fill); color:#fff;
}
.m-builder .hb-split{ display:flex; align-items:stretch; }
.m-builder .hb-split .hb-btn{ border-radius:9px 0 0 9px; border-right-color:rgba(255,255,255,.28); }
.m-builder .hb-caret{
  display:grid; place-items:center; width:32px; flex:none;
  border:1px solid var(--brand-fill); border-left:0; border-radius:0 9px 9px 0;
  background:var(--brand-fill); color:#fff;
}
.m-builder .hb-caret svg{ width:13px; height:13px; }

/* §4.5 workspace */
.m-builder .work{
  flex:1; display:grid; grid-template-columns:minmax(0,380px) minmax(0,1fr);
  min-height:0; min-width:0; overflow:hidden;
}
/* .pane is overflow-y:auto in the product. A static shot has no scrollbar to
   show, so it clips instead — the cut-off row at the bottom of each pane is
   what says "this keeps going". */
.m-builder .pane{ min-height:0; min-width:0; overflow:hidden; }
.m-builder .left{
  position:relative; background:var(--paper);
  border-right:1px solid var(--hairline);
  display:flex; flex-direction:column; overflow:hidden;
}
.m-builder .lhead{
  flex:none; display:flex; gap:2px; height:46px; padding:6px;
  border-bottom:1px solid var(--hairline);
}
.m-builder .ltab{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  font:600 12.5px/1 'DM Sans',sans-serif; color:var(--muted);
  background:none; border:0; border-radius:8px; padding:0 8px; white-space:nowrap;
}
.m-builder .ltab[aria-pressed="true"]{ background:var(--tint); color:var(--brand); }
.m-builder .ltab .cnt{
  font:700 10px/1 'DM Sans',sans-serif; color:var(--muted);
  background:rgba(230,233,240,.08);
  border-radius:99px; padding:3px 6px; min-width:20px; text-align:center;
}
.m-builder .ltab[aria-pressed="true"] .cnt{ background:#00000040; color:var(--brand); }
.m-builder .lscroll{ flex:1; min-height:0; overflow:hidden; padding:6px; }

/* §4.6 the row list — design_concept.css's .dp-menu components, which read
   --paper/--well/--hairline/--ink-soft by name and so re-theme off §4.1 alone. */
.m-builder .dp-menu{ display:flex; flex-direction:column; gap:10px; padding:2px 0 8px; }
.m-builder .dp-menu-row{
  display:flex; align-items:center; gap:14px; width:100%;
  padding:13px 16px;
  border:1px solid var(--hairline); border-radius:var(--radius-lg);
  background:var(--paper); text-align:left; color:var(--ink);
  font-family:var(--font-body); font-size:13.5px;
}
.m-builder .dp-menu-icon{
  display:flex; align-items:center; justify-content:center;
  width:38px; height:38px; flex-shrink:0;
  border-radius:12px; background:var(--well); color:var(--ink);
}
.m-builder .dp-menu-icon svg{ width:18px; height:18px; }
.m-builder .dp-menu-icon-text{ font-family:var(--font-display); font-size:13px; font-weight:600; }
.m-builder .dp-menu-info{ flex:1; min-width:0; display:flex; flex-direction:column; }
.m-builder .dp-menu-title{ font-weight:600; }
.m-builder .dp-menu-sub{ font-size:11.5px; color:var(--ink-soft); margin-top:2px; }
.m-builder .dp-menu-value{
  font-size:12.5px; font-weight:600; color:var(--ink-soft);
  max-width:40%; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; flex-shrink:0;
}
.m-builder .dp-menu-count{
  font-family:var(--font-mono); font-size:10.5px; font-weight:600;
  color:var(--ink-soft); background:var(--well);
  border-radius:20px; padding:2px 8px; flex-shrink:0;
}
.m-builder .dp-menu-chev{
  width:16px; height:16px; flex-shrink:0; color:var(--ink-soft);
  fill:none; stroke:currentColor; stroke-width:2; stroke-linecap:round; stroke-linejoin:round;
}
.m-builder .dp-drag-handle{
  display:flex; align-items:center; justify-content:center;
  width:18px; height:28px; flex-shrink:0; margin-left:-6px;
  color:color-mix(in srgb, var(--ink-soft) 35%, var(--paper));
}
.m-builder .dp-drag-handle svg{ width:12px; height:12px; }
/* a switched-off section keeps its row but reads as inactive */
.m-builder .dp-menu-row.is-off .dp-menu-icon,
.m-builder .dp-menu-row.is-off .dp-menu-info{ opacity:.45; }
.m-builder .switch{
  width:38px; height:22px; border-radius:22px; border:none; padding:0;
  position:relative; flex-shrink:0;
  background:color-mix(in srgb, var(--ink-soft) 42%, transparent);
}
.m-builder .switch-thumb{
  position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:50%; background:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25);
}
.m-builder .switch[aria-checked="true"]{ background:var(--accent); }
.m-builder .switch[aria-checked="true"] .switch-thumb{ transform:translateX(16px); }
.m-builder .dp-menu-toggle{ margin-left:2px; }

/* §4.7 the live-preview pane */
.m-builder .right{ background:var(--page); }
.m-builder .rhead{
  display:flex; align-items:center; gap:8px; padding:9px 12px;
  background:var(--paper); border-bottom:1px solid var(--hairline);
}
.m-builder .rhead .lbl{
  font-size:10px; font-weight:700; letter-spacing:.11em;
  text-transform:uppercase; color:var(--faint);
}
.m-builder .devseg{
  display:flex; gap:2px; padding:2px; margin-left:auto;
  background:rgba(230,233,240,.06); border-radius:9px;
}
/* page_builder_concept.css keys these off `button`. Nothing in this shot is
   interactive (the whole app is aria-hidden), so the segments are spans and
   the selectors have to follow — as `button` they matched nothing and the
   device switcher rendered as two bare icons with no track and no pressed
   state. */
.m-builder .devseg > span{
  display:inline-flex; align-items:center; justify-content:center;
  font:600 11.5px/1 'DM Sans',sans-serif; color:var(--muted);
  background:none; border:0; border-radius:7px; padding:7px 11px;
}
.m-builder .devseg > span svg{ width:15px; height:15px; }
.m-builder .devseg > span[aria-pressed="true"]{
  background:#00000040; color:var(--brand); box-shadow:0 1px 2px rgba(0,0,0,.3);
}
/* §0's divergence 1: the vw halves of these two clamps would resolve against
   the marketing viewport, so both are pinned to their maximum. */
.m-builder .rinner{ padding:26px 20px 60px; }
/* The frame is the hairline, and only the hairline. page_builder_concept.css
   pairs that border with a drop shadow, which is what lifts a white sheet off
   a light page — on this near-black pane it darkens nothing that is not
   already dark and just muddies the edge. Dropped, so the one border does the
   whole job of saying where the page stops. */
.m-builder .pbsheet{
  max-width:1100px; margin:0 auto;
  border:1px solid var(--hairline);
  border-radius:12px; overflow:hidden;
}

/* §4.8b the Suggested strip — the first thing in the Content pane, flush to
   its edges rather than inset like the rows under it. */
.m-builder .lscroll > .suggest:first-child{ margin:-6px -6px 8px; }
.m-builder .suggest{ border-bottom:1px solid var(--hairline); background:var(--soft); }
.m-builder .sug-head{ display:flex; align-items:center; gap:8px; padding:6px 8px 6px 10px; }
.m-builder .sug-head .lbl{
  display:flex; align-items:center; gap:6px;
  font-size:10px; font-weight:700; letter-spacing:.11em; text-transform:uppercase;
  color:var(--faint); background:none; border:0; padding:0;
}
.m-builder .sug-head .lbl .cv2{ opacity:.6; transform:rotate(-90deg); width:10px; height:10px; }
.m-builder .sug-pick{ margin-left:auto; }
.m-builder .sug-btn{
  display:inline-flex; align-items:center; gap:6px;
  font:600 12px/1 'DM Sans',sans-serif; color:var(--ink);
  background:var(--paper); border:1px solid var(--hairline); border-radius:8px;
  padding:7px 10px; max-width:180px;
}
.m-builder .sug-btn .cv{ flex:none; opacity:.55; width:11px; height:11px; }

/* ---------------------------------------------------------------------------
   §4.9 the shell's Create FAB.

   partials/_create_fab.html ships from ui_concept/base.html on EVERY dashboard
   page, and the builder's own `body:has(#pbld)` block hides the sidebar, topbar
   and mobile nav but not this — so the bottom-right corner genuinely has a "+"
   on it while you are editing a page. It reads --brand from §1 (the shell's
   #2F6BC9), which is why §4.1's re-pin stops at .pbld.

   position:absolute, not fixed: a fixed element inside a transform:scale()d
   stage anchors to the stage, not the viewport, and would have sat over the
   marketing page rather than in the corner of the window. The offsets are the
   shell's own 28px on the same 1440 canvas, so they scale with everything else.
   --------------------------------------------------------------------------- */
.m-builder .create-wrap{ position:absolute; right:28px; bottom:28px; z-index:50; }
.m-builder .create-fab{
  width:52px; height:52px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:linear-gradient(135deg, var(--brand), var(--brand-light));
  color:#fff; border:none; box-shadow:var(--shadow-lg);
}
.m-builder .create-fab svg{ width:22px; height:22px; }

/* ---------------------------------------------------------------------------
   §4.10 the vendor page inside the preview.

   A real capture, not a drawing. `#pbpFrame` renders the vendor's own public
   page, so the honest thing to put in the sheet is a screenshot of exactly
   that: core/static/core/img/looks/florist.webp, the BUILDER_SHOTS entry in
   `manage.py capture_landing_shots`, taken at a phone viewport on the same
   pipeline as the marquee phones further up the page.

   It is the `florist` COLOUR template, not a photo look, because the vendor's
   name is rendered INTO the shot and the preview's own left panel names the
   vendor too. This is the entry whose businessName is "Meadow & Vine"; a photo
   look arrives branded as itself ("Evergreen & Co.", "Runway & Co.") and would
   disagree with the Basic info row sitting beside it.

   This replaced ~150 lines of hand-built .pvm-* markup and CSS that
   reimplemented one look's palette, type and section layouts by hand. Every
   line of that was a second copy of something the template system already
   owns, and it went stale the moment anyone touched the real template. It also
   cost two webfont families and five external Pexels requests that the page
   now makes none of.

   The shot is 560px wide for a 380px sheet, so it is drawn at 2x and clipped
   by the sheet rather than scaled to fit: the page runs past the bottom of the
   preview here exactly as it does in the product.

   ONE DIVERGENCE, deliberate: the product's .pbp-frame is a fixed 560px tall
   and scrolls internally. Here the sheet fills the pane, because a static shot
   has no scrollbar to offer and the page is the thing being sold. The width is
   the real one — #pbld[data-dev="mobile"] .sheet is 380px.
   --------------------------------------------------------------------------- */
.m-builder[data-dev="mobile"] .pbsheet{ max-width:380px; }
.m-builder .pbsheet{ height:var(--pbp-h); }
.m-builder .pbp-shot{
  display:block; width:100%; height:auto;
  /* the capture's own background, so the sheet is never white behind a photo
     that has not decoded yet */
  background:#F6F4F1;
}

/* ---------------------------------------------------------------------------
   §4.11 Content and Design, taking turns.

   The window alternates between its two tabs, and the preview follows: the
   shipped florist template while Content is up, the same vendor restyled with
   the Evergreen look while Design is. Both panes and both shots are always in
   the DOM, stacked, so the switch is opacity and a small transform and nothing
   is re-laid out inside the already-scaled stage. The switcher itself is in
   the section's script in landing.html (data-tab on .m-builder).
   --------------------------------------------------------------------------- */
/* one thumb that slides, instead of two tabs each painting their own fill */
.m-builder .lhead{ position:relative; }
.m-builder .lhead::before{
  content:""; position:absolute; top:6px; bottom:6px; left:6px; width:calc(50% - 7px);
  border-radius:8px; background:var(--tint);
  transition:transform .45s cubic-bezier(.22,.61,.36,1);
}
.m-builder[data-tab="design"] .lhead::before{ transform:translateX(calc(100% + 2px)); }
.m-builder .ltab{ position:relative; z-index:1; transition:color .3s ease; }
.m-builder .ltab[aria-pressed="true"]{ background:none; }

.m-builder .lpanes{ position:relative; flex:1; min-height:0; }
.m-builder .lpanes > .lpane{
  position:absolute; inset:0;
  transition:opacity .45s ease, transform .55s cubic-bezier(.22,.61,.36,1);
}
.m-builder .lpane[data-pane="design"]{ opacity:0; transform:translateX(18px); }
.m-builder[data-tab="design"] .lpane[data-pane="content"]{ opacity:0; transform:translateX(-18px); }
.m-builder[data-tab="design"] .lpane[data-pane="design"]{ opacity:1; transform:none; }

/* the row the change came from */
.m-builder .dp-menu-row.is-picked{
  border-color:var(--brand);
  box-shadow:0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent);
}
.m-builder .dp-menu-row.is-picked .dp-menu-value{ color:var(--brand); }

.m-builder .pbsheet{ position:relative; }
.m-builder .pbp-shot{ transition:opacity .6s ease; }
.m-builder .pbp-shot.is-design{ position:absolute; inset:0; opacity:0; }
.m-builder[data-tab="design"] .pbp-shot.is-design{ opacity:1; }

@media (prefers-reduced-motion:reduce){
  .m-builder .lhead::before, .m-builder .lpanes > .lpane, .m-builder .pbp-shot{ transition:none; }
}