/* The homepage's own sheet.

   The page is generated by build-postlever.py, which ports the old marketing page
   and remaps every colour literal the page carries itself onto the light ground.
   What is left for this sheet is what that remap cannot reach: css/base.css,
   which the build ports without per-rule colour decisions, and the places where
   a light page wants a different design rather than the same design in other
   colours.

   Every rule is scoped to html[data-ground="light"]. That ties the specificity of
   the html.dark-mode rules it answers, which the page keeps because some of them
   carry layout, and the build links this sheet last so that a tie goes this way.
   Hand-written; the build never touches it, and the in-app tour copies it. */


/* ---- the names base.css asks for ----
   base.css was written for navy and asks for its ink and its veils by names that
   say so: --paper is the light ink, --alpha-white-* are the light veils, --slate-*
   climbs toward white. tokens.css answers the semantic names for a light ground
   but not these, so they are answered here, each by the value that does the same
   job on white. Only this page uses them on a light ground; the OPTIZMO page is
   written against the semantic names alone. */

html[data-ground="light"] {
  --paper:        #0A0E19;
  --paper-2:      #3A4453;
  --paper-muted:  #5C6778;
  --paper-subtle: #5C6778;

  /* Nothing on this page is a dark island any more, so ink "on dark" is the ink. */
  --color-text-on-dark:       #0A0E19;
  --color-text-on-dark-muted: #5C6778;

  --navy:       #FFFFFF;
  --navy-mid:   var(--paper-band);
  --navy-deep:  var(--paper-band);
  --ink-sunken: var(--paper-band);
  --ink-raised: #FFFFFF;

  /* The ramp turned over, so a rule that wanted "nearly the ground" still gets it. */
  --slate-50:  #0A0E19;
  --slate-100: #1B2230;
  --slate-200: #2A3342;
  --slate-300: #3A4453;
  --slate-400: #5C6778;
  --slate-500: #5C6778;
  --slate-600: #8A94A3;
  --slate-700: #D5DCE6;
  --slate-800: #FFFFFF;
  --slate-900: #FFFFFF;

  /* Veils of ink rather than of light. Below 0.30 they draw lines and fills, so
     they stay faint; above it they are text, and navy needs 0.60 on white to
     clear 4.5:1, so the ramp starts there. */
  --alpha-white-4:  rgba(10,14,25,0.03);
  --alpha-white-5:  rgba(10,14,25,0.04);
  --alpha-white-6:  rgba(10,14,25,0.05);
  --alpha-white-8:  rgba(10,14,25,0.08);
  --alpha-white-10: rgba(10,14,25,0.09);
  --alpha-white-12: rgba(10,14,25,0.10);
  --alpha-white-15: rgba(10,14,25,0.12);
  --alpha-white-20: rgba(10,14,25,0.16);
  --alpha-white-25: rgba(10,14,25,0.20);
  --alpha-white-30: rgba(10,14,25,0.26);
  --alpha-white-45: rgba(10,14,25,0.62);
  --alpha-white-50: rgba(10,14,25,0.64);
  --alpha-white-60: rgba(10,14,25,0.66);
  --alpha-white-65: rgba(10,14,25,0.68);
  --alpha-white-70: rgba(10,14,25,0.72);
  --alpha-white-75: rgba(10,14,25,0.76);
  --alpha-white-85: rgba(10,14,25,0.84);
  --alpha-white-90: rgba(10,14,25,0.90);
  --alpha-white-95: rgba(10,14,25,0.95);

  --alpha-navy-dark-95: rgba(255,255,255,0.86);
  --alpha-black-20: rgba(15,23,42,0.06);
  --alpha-black-30: rgba(15,23,42,0.08);
  --alpha-black-50: rgba(15,23,42,0.12);

  --shadow-xl:      0 28px 64px rgba(15,23,42,0.12);
  --shadow-blue:    0 4px 16px rgba(37,99,235,0.18);
  --shadow-blue-lg: 0 6px 20px rgba(37,99,235,0.22);
}


/* ---- the nav ----
   Clear over the hero, then white glass with a hairline once the page moves
   under it, the way the OPTIZMO page's bar sits. */

html[data-ground="light"] nav,
html[data-ground="light"] nav.scrolled,
html[data-ground="light"] [data-theme] nav.scrolled {
  box-shadow: none;
}
html[data-ground="light"] nav.scrolled {
  background: rgba(255,255,255,0.86);
  backdrop-filter: saturate(1.4) blur(12px);
  -webkit-backdrop-filter: saturate(1.4) blur(12px);
  border-bottom: 1px solid var(--color-border);
}

/* Over the hero base.css colours the links with [data-theme] nav.dark-nav:not(.scrolled)
   and turns them --white on hover, so these carry .dark-nav to outweigh it. The
   menu button answers to the same rule. */
html[data-ground="light"] nav.dark-nav .nav-links > li > a:not(.nav-cta) { color: var(--color-text); }
html[data-ground="light"] nav.dark-nav .nav-links > li > a.nav-util { font-weight: var(--font-regular); color: var(--color-text-muted); }
html[data-ground="light"] nav.dark-nav .nav-links > li > a:not(.nav-cta):hover { color: var(--color-text); }
html[data-ground="light"] nav.dark-nav .nav-inner .mobile-toggle { color: var(--color-text); }

html[data-ground="light"] .mobile-menu,
html[data-ground="light"] .mobile-menu-header { background: var(--color-bg); }
html[data-ground="light"] .mobile-menu-header { border-bottom-color: var(--color-border); }


/* ---- hover ink ----
   base.css brightens a control on hover by turning its ink to --white, which on
   navy is the brightest thing there is. --white has to stay white for the ink on
   the blue buttons, so the hovers that ask for it as a brightening are answered
   one by one with the full-strength ink. */

html[data-ground="light"] [data-theme="postlever"] .btn-ghost:hover,
html[data-ground="light"] .mobile-menu a:not(.nav-cta):active,
html[data-ground="light"] .mobile-close:hover { color: var(--color-text); }


/* ---- the hero's second line ----
   The pale end of the blue ramp is what lets it glow on navy. On white it is
   2.5:1, under even the large-text bar, so the gradient runs from the brand blue
   down to its deep step instead. */

html[data-ground="light"] .gradient-text {
  background-image: linear-gradient(135deg, #3B82F6 0%, #2563EB 45%, #1D4ED8 100%);
}
/* The blue words finish the headline's sentence rather than standing on a line of
   their own, which the cycling phrase they replace needed. */
html[data-ground="light"] .ultra-hero-content h1 .gradient-text { display: inline; min-height: 0; }

/* The cycling ending: the static words, the typed copy and the two other phrases
   (reserved by site.js as invisible generated text) share one grid cell, so the
   cell is as wide as the longest phrase and one line tall whatever is typed in
   it. The static words go transparent, not away, while the typed copy runs, so
   they stay the heading's text. */
html[data-ground="light"] .hero-cycle { display: inline-grid; white-space: nowrap; }
html[data-ground="light"] .hero-cycle > *,
html[data-ground="light"] .hero-cycle::before,
html[data-ground="light"] .hero-cycle::after { grid-area: 1 / 1; justify-self: start; }
html[data-ground="light"] .hero-cycle::before { content: attr(data-reserve-a); visibility: hidden; }
html[data-ground="light"] .hero-cycle::after { content: attr(data-reserve-b); visibility: hidden; }
html[data-ground="light"] .hero-cycle-typed { opacity: 0; }
html[data-ground="light"] .hero-cycle.is-cycling .hero-cycle-static { opacity: 0; }
html[data-ground="light"] .hero-cycle.is-cycling .hero-cycle-typed { opacity: 1; }
/* The caret stands outside the flow, so it never widens the line it ends. */
html[data-ground="light"] #heroCycleText { position: relative; }
html[data-ground="light"] #heroCycleText::after {
  position: absolute;
  left: 100%;
  margin-left: 2px;
  font-weight: 300;
  color: #2563EB;
}


/* ---- cards ----
   On navy a card lifts by a veil of light over it, and the build turns that veil
   into one of ink, which on white sinks the card into a grey well instead. That
   is right for a chip or a track and wrong for anything that holds content, so
   the containers become what a card is on this ground: white, a hairline, and a
   shadow to stand it off the band or the stage's wash. */

html[data-ground="light"] .snap-visual {
  background: var(--color-bg);
  border-color: var(--color-border);
  box-shadow: var(--shadow-md);
}

/* The signal feed is drawn as the explorer's screens draw a list: one white
   card under a hairline, no bars of grey. The title in sentence case with the
   day's count in muted ink beside a small live dot; column names small and
   muted on the card itself; events as quiet chips, a tint and its ink; status
   as coloured text after a dot of its colour. */
html[data-ground="light"] .signal-live-panel {
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  box-shadow: var(--shadow-md);
}
html[data-ground="light"] .slp-header { gap: 10px; padding: 12px 14px 8px; background: none; border: 0; }
html[data-ground="light"] .slp-title { font-size: 0.8rem; font-weight: 600; color: var(--color-text); }
html[data-ground="light"] .slp-count-wrap {
  display: inline-flex; align-items: center; gap: 6px; font-size: 0.65rem; color: var(--color-text-muted);
}
html[data-ground="light"] .slp-count-num { font-weight: 500; color: inherit; font-variant-numeric: tabular-nums; }
html[data-ground="light"] .slp-dot { width: 6px; height: 6px; background: #16A34A; box-shadow: none; }
html[data-ground="light"] .slp-cols { padding: 4px 14px 6px; background: none; border-bottom: 1px solid var(--color-border); }
html[data-ground="light"] .slp-cols span {
  font-size: 0.6rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--color-text-muted);
}
html[data-ground="light"] .slp-cols,
html[data-ground="light"] .slp-row { grid-template-columns: 78px minmax(0, 1fr) 58px 76px 26px; }
html[data-ground="light"] .slp-row { padding: 0.45rem 14px; border-bottom: 1px solid var(--color-border); }
html[data-ground="light"] .slp-row:last-child { border-bottom: 0; }
html[data-ground="light"] .slp-badge-type {
  padding: 1px 6px; border: 0; border-radius: 4px;
  font-size: 0.58rem; font-weight: 600; letter-spacing: 0;
}
html[data-ground="light"] .slp-ev--click,
html[data-ground="light"] .slp-ev--open { color: #1D4FD7; background: #EFF6FF; }
html[data-ground="light"] .slp-ev--convert { color: #047253; background: #ECFDF5; }
html[data-ground="light"] .slp-ev--bounce { color: #A54C09; background: #FFFBEB; }
html[data-ground="light"] .slp-ev--unsub { color: #B91C1C; background: #FEF2F2; }
html[data-ground="light"] .slp-ev--defer { color: #4B5563; background: #F3F4F6; }
html[data-ground="light"] .slp-status-text { display: inline-flex; align-items: center; gap: 5px; font-size: 0.6rem; font-weight: 500; }
html[data-ground="light"] .slp-status-text::before {
  content: ''; width: 5px; height: 5px; flex: none; border-radius: 50%; background: currentColor;
}
html[data-ground="light"] .slp-st--ok { color: #047253; }
html[data-ground="light"] .slp-st--warn { color: #A54C09; }
html[data-ground="light"] .slp-st--bad { color: #B91C1C; }
html[data-ground="light"] .slp-st--info { color: #1D4FD7; }
html[data-ground="light"] .slp-email-text,
html[data-ground="light"] .slp-esp-text { font-size: 0.62rem; }
html[data-ground="light"] .slp-foot {
  padding: 8px 14px 10px; border-top: 1px solid var(--color-border);
  font-size: 0.6rem; color: var(--color-text-muted);
}
html[data-ground="light"] .slp-time-text { font-size: 0.6rem; color: var(--color-text-muted); font-variant-numeric: tabular-nums; }

html[data-ground="light"] .cta-split-right .cta-mockup {
  background: var(--color-bg);
  border-color: var(--color-border);
  box-shadow: var(--shadow-lg), 0 1px 2px rgba(15,23,42,0.06);
}



/* ---- the product, as the app draws it in light ----
   The mock's colours come from the app's own light theme
   (optizmo-app/src/index.css, :root), by way of the build's table. What the
   table cannot say is said here. */

/* The rail and the bar above it, as the OPTIZMO page draws its own app: a rail
   of icons alone in the blue the two share (--app-rail, tokens.css), white icons at 80% with the current one at
   full strength on a tile of white at 18%, under a light bar that carries the
   wordmark in ink and its controls muted. The rail is 52px of the window's width
   rather than 178, which the screens beside it get back. The page's own rules
   for the rail are !important, so these are. */
html[data-ground="light"] .dash-topbar { background: #FFFFFF; color: #5E636E; border-bottom: 1px solid #E5E7EB; }
html[data-ground="light"] .dash-topbar-chip { border-color: rgba(94,99,110,0.6); }
html[data-ground="light"] .dash-sidebar {
  width: 52px !important; min-width: 52px !important;
  background: var(--app-rail) !important;
}
html[data-ground="light"] .dash-nav { padding-top: 8px !important; }
/* A label is read by the app's tooltip, not printed; the icon is the item. */
html[data-ground="light"] .dash-nav-item {
  justify-content: center !important; width: 30px !important; height: 26px !important;
  margin: 1px auto !important; padding: 0 !important; border-radius: 7px !important;
  font-size: 0 !important; color: rgba(255,255,255,0.8) !important;
}
html[data-ground="light"] .dash-nav-item svg { width: 13px !important; height: 13px !important; opacity: 1 !important; color: inherit !important; }
html[data-ground="light"] .dash-nav-item:hover { background: rgba(255,255,255,0.1) !important; color: #FFFFFF !important; }
html[data-ground="light"] .dash-nav-item.active { background: rgba(255,255,255,0.18) !important; color: #FFFFFF !important; }
/* The live mock's rail lights its entry with one pill that slides between entries
   (js/rail-glide.js), the entry's own light given over to it. The stages' still copies
   on a phone carry the pill along with the rail they copy, and keep their own light. */
html[data-ground="light"] .dash-nav.has-glide { position: relative; }
html[data-ground="light"] .dash-root:not(.stage-proto-root) .dash-nav.has-glide .dash-nav-item.active { background: transparent !important; }
.dash-nav-glide {
  position: absolute; top: 0; left: 0; border-radius: 7px;
  background: rgba(255,255,255,0.18); pointer-events: none; opacity: 0;
  transition: opacity 0.2s ease;
}
.dash-nav-glide.is-lit { opacity: 1; }
.dash-nav.is-gliding .dash-nav-glide { transition: transform 0.5s cubic-bezier(0.2, 0.8, 0.2, 1), opacity 0.2s ease; }
.stage-proto-root .dash-nav-glide { display: none; }
/* The screen's title rolls over as the screen changes: the new one rises into place as
   the old one rises away, while the screens cross-fade. */
.dash-root:not(.stage-proto-root) .dash-main-title { transition: transform 0.3s ease, opacity 0.3s ease; }
.dash-root:not(.stage-proto-root) .dash-view:not(.active) .dash-main-title { transform: translateY(-0.8em); opacity: 0; }
.dash-root:not(.stage-proto-root) .dash-view.active .dash-main-title { animation: dvTitle 0.5s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
@keyframes dvTitle { from { transform: translateY(0.9em); opacity: 0; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .dash-nav.is-gliding .dash-nav-glide { transition: opacity 0.2s ease; }
  .dash-root:not(.stage-proto-root) .dash-main-title { transition: none; }
  .dash-root:not(.stage-proto-root) .dash-view.active .dash-main-title { animation: none; }
}
html[data-ground="light"] .dash-nav-pill { display: none; }
/* Each group heading is a hairline between groups. */
html[data-ground="light"] .dash-nav-section {
  height: 1px; margin: 6px 14px !important; padding: 0 !important;
  font-size: 0 !important; background: rgba(255,255,255,0.24);
}

/* The mock asks for its state inks by token: the pale steps that read on navy.
   Inside it they take the app's light foregrounds instead, --cautionary-,
   --positive- and --informative-foreground, and its accent takes --primary. */
html[data-ground="light"] .dash-root {
  --amber-light: #A54C09;
  --green-light: #047253;
  --accent-300:  #1D4FD7;
  --accent-400:  #1659E9;
}

/* The app's primary control is --primary, 221 83% 50%, with white ink. The mock
   drew it as a light blue carrying the ground's navy, which was right for dark
   and leaves a pale button with dark letters here. */
html[data-ground="light"] .dash-btn-primary,
html[data-ground="light"] .dlv-chip--on,
html[data-ground="light"] .wfr-toggle--on {
  background: #1659E9;
  color: #FFFFFF !important;
}

/* The app's cards in light are white and lifted by --card-shadow, two layers of
   its neutral hue rather than black; here at the mock's scale. The page's rules
   give them a tint instead, which on white reads as a grey well. */
html[data-ground="light"] .dash-root .dash-metric-card,
html[data-ground="light"] .dash-root .dash-wf-chart-card,
html[data-ground="light"] .dash-root .dlv-chart-card,
html[data-ground="light"] .dash-root .wfr-card {
  background: #FFFFFF;
  box-shadow: 0 1px 1px hsl(220 25% 45% / 0.16), 0 2px 5px -1px hsl(220 25% 45% / 0.10);
}

/* The same cards, drawn by style attributes in the mock's markup rather than by
   a class: the Contacts, Warmups and workflow-steps screens. A tint with a border
   is the mark of one, which is what these match; a chip or a track has no border
   and keeps its tint. Inline styles outrank a sheet, hence !important. */
html[data-ground="light"] .dash-root [style*="background:rgba(10,14,25,0.06);border:1px solid"],
html[data-ground="light"] .dash-root [style*="background:rgba(10,14,25,0.07);border:1px solid"],
html[data-ground="light"] .dash-root .cts-panel {
  background: #FFFFFF !important;
  border-color: #E5E7EB !important;
  box-shadow: 0 1px 1px hsl(220 25% 45% / 0.16), 0 2px 5px -1px hsl(220 25% 45% / 0.10);
}

/* An email is paper on either ground. On navy the mock dimmed it to keep it from
   glaring; on white it can be white, held off the screen by a hairline. */
html[data-ground="light"] .dash-email-preview,
html[data-ground="light"] .dash-deploy-email-preview {
  background: #FFFFFF !important;
  border: 1px solid #E5E7EB;
}



/* ---- eyebrows ----
   Every eyebrow is the shared .eyebrow (type.css), set the way the OPTIZMO page
   sets it. What is left here takes off what the navy page put on its own eyebrow
   classes: tracked capitals, a rule leading in, and an accent ink, the ink
   !important and more specific than the shared rule, so its colour is held here
   against it. The typing reveal stays as it was. */

html[data-ground="light"] .section-eyebrow { gap: 0; letter-spacing: 0; text-transform: none; }
html[data-ground="light"] .section-eyebrow::before { display: none; }
html[data-ground="light"][data-theme] .eyebrow { color: var(--color-text) !important; }

/* A stage's eyebrow is its number and its name, "1. Ingest", one line of the
   eyebrow's own type. The row of dots repeated the progress track below the
   stages, so it goes. The number stands from the start and the name types in
   after it. */
html[data-ground="light"] .step-eyebrow-pips { display: none; }
html[data-ground="light"] .step-eyebrow { gap: 0.3em; }
html[data-ground="light"] .step-eyebrow-num,
html[data-ground="light"] .step-eyebrow-label {
  margin: 0;
  font: inherit;
  letter-spacing: inherit;
  text-transform: none;
  color: inherit;
}
/* The shared title brings its own short gap below; the FAQ keeps the wider one
   it had before its questions. */
html[data-ground="light"] .faq-heading { margin-bottom: var(--space-12); }

/* Stage 01's words arrive with the screen, so its name types as they do; the
   page's script marks it arriving. The same animation the active stage runs. */
html[data-ground="light"] .snap-step.arriving .step-eyebrow-label {
  animation: stepType 0.45s steps(14, end) 0.4s both;
}
html[data-ground="light"] .snap-step.arriving .step-eyebrow-label::after {
  animation: stepCursor 0.5s step-end 0.85s 3, stepCursorFade 0.2s ease 2.35s forwards;
}


/* ---- the ESPs ----
   A row of logos straight on the band, like the OPTIZMO page's providers: no
   cards, no tiles, no borders. Four to a row until all eight fit on one line,
   so the wrap never leaves one alone. */

html[data-ground="light"] .esp-bar-section { border: 0; padding: var(--space-16) 0; }
/* The heading and lead sit centred over the centred row of logos, as the
   feature grid's title does below it. */
html[data-ground="light"] .esp-heading,
html[data-ground="light"] .esp-lead { text-align: center; margin-left: auto; margin-right: auto; }
html[data-ground="light"] .esp-heading { margin-bottom: var(--space-4); }
html[data-ground="light"] .esp-lead { margin-bottom: var(--space-12); text-wrap: balance; }
html[data-ground="light"] .esp-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: var(--space-2);
  row-gap: var(--space-8);
  max-width: calc(4 * 112px + 3 * 8px);
  margin: 0 auto;
  padding: 0;
  list-style: none;
}
html[data-ground="light"] .esp {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--space-3);
  flex: 0 0 calc(25% - 6px);
  min-width: 0;
  text-align: center;
}
@media (min-width: 1080px) {
  html[data-ground="light"] .esp-row { max-width: none; column-gap: var(--space-10); }
  html[data-ground="light"] .esp { flex: 0 0 auto; }
}
html[data-ground="light"] .esp-logo {
  display: block;
  width: 40px;
  height: 40px;
  object-fit: contain;
}
html[data-ground="light"] .esp-logo-crop { overflow: hidden; }
html[data-ground="light"] .esp-logo-crop img {
  display: block;
  max-width: none;
  width: auto;
  height: 37.3px;
  margin-top: 1.3px;
}
html[data-ground="light"] .esp-name {
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1.3;
  color: var(--color-text-muted);
  white-space: nowrap;
}


/* The other hairlines between bands: the lit rules at the top of the
   testimonial, features and FAQ sections. Each band already ends where its
   ground changes. */
html[data-ground="light"] .testimonial-section::after,
html[data-ground="light"] .features-grid-section::before,
html[data-ground="light"] .faq-section::before { display: none; }

/* The hero's decoration (every layer it hides from assistive tech) fades out as
   its ground glides into stage 01's, by the progress the page's script writes to
   --hero-decor. A filter rather than opacity, so it composes with any opacity a
   layer sets on itself. */
html[data-ground="light"] .ultra-stage > [aria-hidden="true"] { filter: opacity(var(--hero-decor, 1)); }

/* ---- the hero's ribbon ----
   The OPTIZMO page's ribbon behind the hero (js/hero-ribbon.js), at nearly the
   Switching section's strength and kept off the words: it shows from just under
   the buttons (--ribbon-clear) and anywhere from the screen's left edge
   rightwards (--ribbon-from). On top of the decoration's
   fade it is gone by halfway through the flight, so it never lingers behind the
   stages; it comes back as the screen does. */
html[data-ground="light"] .hero-ribbon {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity .6s ease;
  /* Under the buttons, or anywhere from the screen's left edge rightwards. */
  -webkit-mask-image:
    linear-gradient(to right, transparent calc(var(--ribbon-from, 50%) - 8%), #000 var(--ribbon-from, 50%)),
    linear-gradient(to bottom, transparent var(--ribbon-clear, 70%), #000 calc(var(--ribbon-clear, 70%) + 40px));
  mask-image:
    linear-gradient(to right, transparent calc(var(--ribbon-from, 50%) - 8%), #000 var(--ribbon-from, 50%)),
    linear-gradient(to bottom, transparent var(--ribbon-clear, 70%), #000 calc(var(--ribbon-clear, 70%) + 40px));
}
html[data-ground="light"] .hero-ribbon.is-drawn { opacity: clamp(0, calc(var(--hero-decor, 1) * 1.8 - 0.9), 0.9); }

/* ---- the one ribbon, on a wide window ----
   From the hero down through the explorer on one canvas (js/ribbon-wide.js),
   held to the window by the explorer's pin and under everything else. It is
   kept off the words by its route, and the first two stages' words also by
   holes around each of their blocks, softly edged, which its script slides as
   the words slide (--hole-0, --hole-1 and their -at). Nowhere else is it cut. */
html[data-ground="light"] .ribbon-wide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  opacity: 0;
  -webkit-mask-image: var(--hole-0, linear-gradient(#000, #000)), var(--hole-1, linear-gradient(#000, #000));
  -webkit-mask-size: var(--hole-size, 100% 100%), var(--hole-size, 100% 100%);
  -webkit-mask-position: var(--hole-0-at, 0 0), var(--hole-1-at, 0 0);
  -webkit-mask-repeat: no-repeat;
  -webkit-mask-composite: source-in;
  mask-image: var(--hole-0, linear-gradient(#000, #000)), var(--hole-1, linear-gradient(#000, #000));
  mask-size: var(--hole-size, 100% 100%), var(--hole-size, 100% 100%);
  mask-position: var(--hole-0-at, 0 0), var(--hole-1-at, 0 0);
  mask-repeat: no-repeat;
  mask-composite: intersect;
}
@media (min-width: 1025px) {
  html[data-ground="light"] .hero-ribbon { display: none; }
}
@media (max-width: 1024px) {
  html[data-ground="light"] .ribbon-wide { display: none; }
}
/* Resized from a phone's width to a wide window, the stage cards made there
   step aside: their screens are hidden on a wide window and their ribbons go too. */
@media (min-width: 1025px) {
  html[data-ground="light"] .stage-card { display: contents; }
  html[data-ground="light"] .stage-ribbon { display: none; }
}
/* The Contacts screen's API sync feed: each row fades in and out where it
   stands. Sliding by 6px into place and 4px out, a row arriving below one
   leaving sat over it, the two squashed into one row's height. */
html[data-ground="light"] #dash-view-contacts.active .cts-row,
html[data-ground="light"] [data-dv="contacts"].active .cts-row { animation-name: ctsFade; }
@keyframes ctsFade {
  0% { opacity: 0; }
  8%, 88% { opacity: 1; }
  100% { opacity: 0; }
}
/* Stacked, the hero's screen sits on the ribbon: room above and below it for
   the ribbon to show in, clear of the buttons. */
@media (max-width: 1024px) {
  html[data-ground="light"] .proto-hero { margin: var(--space-16) auto var(--space-20); }
  /* Each stage's screen on a crop of the ribbon (js/stage-ribbons.js), the
     window's full width so the ribbon runs off both its edges, the screen near
     as wide as the window. */
  html[data-ground="light"] .stage-card {
    position: relative;
    display: flex;
    justify-content: center;
    box-sizing: border-box;
    width: 100vw;
    margin: var(--space-8) calc(50% - 50vw) var(--space-2);
    padding: var(--card-pad-y, 40px) var(--card-pad-x, 16px);
    overflow: hidden;
  }
  html[data-ground="light"] .stage-card:last-child { margin-bottom: 0; }
  html[data-ground="light"] .stage-card > .stage-proto { margin: 0; z-index: 1; }
  /* Faded out over the card's top and bottom rather than cut there. */
  html[data-ground="light"] .stage-ribbon {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    -webkit-mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
    mask-image: linear-gradient(to bottom, transparent, #000 22%, #000 78%, transparent);
  }
  /* Clear of the words above, and faded out at the hero's foot rather than cut. */
  html[data-ground="light"] .hero-ribbon {
    -webkit-mask-image: linear-gradient(to bottom, transparent var(--ribbon-clear, 70%), #000 calc(var(--ribbon-clear, 70%) + 40px),
                                        #000 calc(100% - 90px), transparent);
    mask-image: linear-gradient(to bottom, transparent var(--ribbon-clear, 70%), #000 calc(var(--ribbon-clear, 70%) + 40px),
                                #000 calc(100% - 90px), transparent);
  }
}

/* ---- the stages under the nav ----
   Each stage pads its top to clear the fixed nav and centres its words in what
   is left. The pad was 120px against a 68px nav, so the words, and the screen
   the build centres on the same line, sat 26px low in the space the reader
   actually sees. The pad is the nav's own height, so the pair is centred in the
   window below the nav. */
html[data-ground="light"] .snap-step { padding-top: 68px; }

/* The gap between the screen and the stage's words grows with the window, 96px
   to 160px, and comes out of the screen's width: the words keep their 456px
   column at the right margin, so the screen gives up whatever the gutter needs
   on top of tokens.css's own limits. */
html[data-ground="light"] {
  --stage-gutter: clamp(96px, 7vw, 160px);
  --stage-side: max(clamp(16px, 2vw, 32px), calc((100vw - var(--container-nav)) / 2));
  --stage-right: max(var(--space-10), calc((100vw - var(--container-nav)) / 2));
  --proto-w: max(380px, min(46vw, 820px, calc((100svh - 168px) * 1.3929), calc(100vw - 460px),
                 calc(100vw - var(--stage-side) - var(--stage-right) - 456px - var(--stage-gutter))));
}

/* On a large window the stage composition grows to use it. The panel keeps its
   size up to 1440x900 and grows from there with the smaller of the extra width
   and the extra height, to at most 70% of the height under the nav, never into
   the 456px copy column or the gutter before it, and the pair is centred once it
   outgrows the nav's container. Up to the threshold every term reduces to the
   panel and edges of the layout below it, so nothing jumps on a resize across
   it. site.js reads the panel's width and left edge from here. */
@media (min-width: 1441px) and (min-height: 901px) {
  html[data-ground="light"] {
    --proto-base: max(380px, min(46vw, 820px, calc((100svh - 168px) * 1.3929), calc(100vw - 460px),
                      calc(100vw - var(--stage-side) - var(--stage-right) - 456px - var(--stage-gutter))));
    --proto-grow: max(0px, min(100vw - 1440px, (100svh - 900px) * 1.6));
    --proto-w: max(var(--proto-base), min(var(--proto-base) + var(--proto-grow) * 0.8,
                   100vw - 96px - 456px - var(--stage-gutter), (100svh - 68px) * 0.975, 1360px));
    --stage-left: min(var(--stage-side), calc((100vw - var(--proto-w) - 456px - var(--stage-gutter)) / 2));
  }
  html[data-ground="light"] .snap-proto-wrapper { left: var(--stage-left); }
  html[data-ground="light"] .snap-step {
    padding-left: calc(var(--stage-left) + var(--proto-w) + var(--space-8));
    padding-right: var(--stage-left);
  }
}


/* ---- the brand's workflow canvas ----
   As the app draws it in light (modules/brands/components/brand-workflow-node
   and its parts): a dotted grey plane, white cards lifted by the card shadow
   with the primary blue along their top edge, and dashed primary connectors.
   The canvas is a zoomed-out view in the app as well, so the cards are drawn at
   a little over half the app's sizes, the proportions between them kept. */
html[data-ground="light"] .dash-root .wfc-banner {
  display: flex; align-items: center; gap: 6px;
  padding: 5px 12px;
  font-size: 8px; font-weight: 500; color: #111827;
  background: #EDFDF5; border-bottom: 1px solid #C9F2DD;
}
html[data-ground="light"] .dash-root .wfc-toggle {
  position: relative; flex-shrink: 0; width: 18px; height: 10px;
  border-radius: 999px; background: #059467;
}
html[data-ground="light"] .dash-root .wfc-toggle::after {
  content: ''; position: absolute; top: 1.5px; right: 1.5px;
  width: 7px; height: 7px; border-radius: 50%; background: #FFFFFF;
}
html[data-ground="light"] .dash-root .wfc-crumb { margin-right: 5px; font-size: 8px; color: #5E636E; }
html[data-ground="light"] .dash-root .wfc-tabs {
  display: flex; gap: 12px; padding: 0 12px; border-bottom: 1px solid #E5E7EB;
}
html[data-ground="light"] .dash-root .wfc-tab {
  padding-bottom: 4px; border-bottom: 1.5px solid transparent;
  font-size: 8px; font-weight: 500; color: #111827;
}
html[data-ground="light"] .dash-root .wfc-tab--on { color: #1659E9; border-bottom-color: #1659E9; }

#dash-view-brand-workflows { min-height: 0; }
html[data-ground="light"] .dash-root .wfc-canvas {
  position: relative; flex: 1; min-height: 0; overflow: hidden;
  background-color: #F3F4F6;
  background-image: radial-gradient(#D5D9E0 0.6px, transparent 0.6px);
  background-size: 9px 9px;
}
html[data-ground="light"] .dash-root .wfc-wires { position: absolute; inset: 0; width: 100%; height: 100%; }
html[data-ground="light"] .dash-root .wfc-wire {
  fill: none; stroke: #1659E9; stroke-width: 0.8; stroke-dasharray: 2.5 2.5; opacity: 0.8;
}
html[data-ground="light"] #dash-view-brand-workflows.active .wfc-wire { animation: wfcFlow 1.4s linear infinite; }
html[data-ground="light"] #dash-view-brand-workflows.active .wfc-wire--b { animation-delay: .25s; }
html[data-ground="light"] #dash-view-brand-workflows.active .wfc-wire--c { animation-delay: .5s; }
@keyframes wfcFlow { to { stroke-dashoffset: -10; } }

html[data-ground="light"] .dash-root .wfc-add {
  position: absolute; top: 7px; right: 8px; z-index: 1;
  padding: 3px 7px; border-radius: 4px;
  font-size: 7.5px; font-weight: 600; color: #FFFFFF; background: #1659E9;
}

html[data-ground="light"] .dash-root .wfc-card {
  position: absolute; width: 30%;
  overflow: hidden;
  background: #FFFFFF;
  border: 1px solid #E5E7EB; border-top: 1.5px solid #1659E9; border-radius: 5px;
  box-shadow: 0 1px 2px hsl(220 25% 45% / 0.18), 0 4px 10px -2px hsl(220 25% 45% / 0.12);
  color: #111827;
}
html[data-ground="light"] .dash-root .wfc-card--a { left: 3%; top: 5%; }
html[data-ground="light"] .dash-root .wfc-card--b { right: 3%; top: 30px; }
html[data-ground="light"] .dash-root .wfc-card--c { left: 35%; bottom: 3%; }
/* Where the canvas is tall enough for C to sit wholly below A and B, the three
   are drawn in towards the middle, with C centred under the gap between them,
   so they read as one graph rather than three islands. On a shorter canvas C
   rises level with them and needs the room to the side. */
html[data-ground="light"] .dash-root .wfc-canvas { container-type: size; }
@container (min-height: 450px) {
  html[data-ground="light"] .dash-root .wfc-card--a { left: 10%; }
  html[data-ground="light"] .dash-root .wfc-card--b { right: 9%; }
  html[data-ground="light"] .dash-root .wfc-card--c { left: 35%; }
}

html[data-ground="light"] .dash-root .wfc-card-head { padding: 5px 7px 5px; border-bottom: 1px solid #E5E7EB; }
html[data-ground="light"] .dash-root .wfc-card-head b {
  display: block; overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-size: 8px; font-weight: 600; line-height: 1.2;
}
html[data-ground="light"] .dash-root .wfc-badges { display: flex; gap: 3px; margin-top: 3px; }
html[data-ground="light"] .dash-root .wfc-pill {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 0.5px 3px; border-radius: 3px; border: 1px solid;
  font-style: normal; font-size: 5.5px; font-weight: 500;
}
html[data-ground="light"] .dash-root .wfc-pill--seq { color: #A54C09; background: #FFFBEB; border-color: #FDE58A; }
html[data-ground="light"] .dash-root .wfc-pill--rec { color: #1D4FD7; background: #F0F6FF; border-color: #BEDBFE; }
html[data-ground="light"] .dash-root .wfc-pill--on { color: #047253; background: #EDFDF5; border-color: #A7EBCB; }
html[data-ground="light"] .dash-root .wfc-i { width: 6px; height: 6px; flex-shrink: 0; }

html[data-ground="light"] .dash-root .wfc-band {
  padding: 2px 7px; background: #F5F6F8;
  font-size: 5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #5E636E;
}
html[data-ground="light"] .dash-root .wfc-trig {
  display: flex; gap: 4px; padding: 3px 7px; border-top: 1px solid #E5E7EB;
  background: rgba(22, 89, 233, 0.05);
}
html[data-ground="light"] .dash-root .wfc-trig > .wfc-i { margin-top: 1px; color: #1659E9; }
html[data-ground="light"] .dash-root .wfc-trig-body { display: flex; flex: 1; min-width: 0; flex-direction: column; gap: 1.5px; }
html[data-ground="light"] .dash-root .wfc-trig-top { display: flex; align-items: center; justify-content: space-between; gap: 3px; }
html[data-ground="light"] .dash-root .wfc-trig b { font-size: 6px; font-weight: 600; }
html[data-ground="light"] .dash-root .wfc-trig i { font-style: normal; font-size: 5.5px; color: #5E636E; }
html[data-ground="light"] .dash-root .wfc-cap,
html[data-ground="light"] .dash-root .wfc-count {
  display: inline-flex; align-items: center; gap: 1.5px;
  padding: 0.5px 3px; border-radius: 999px;
  font-style: normal; font-size: 5px; font-weight: 600; color: #1659E9;
  background: #FFFFFF; box-shadow: 0 0 0 0.5px rgba(22, 89, 233, 0.3);
}
html[data-ground="light"] .dash-root .wfc-count .wfc-i { width: 5px; height: 5px; }
html[data-ground="light"] .dash-root .wfc-from {
  display: flex; align-items: center; gap: 4px; padding: 2.5px 7px; border-top: 1px solid #E5E7EB;
  font-size: 6px; font-weight: 500; color: #111827; white-space: nowrap; overflow: hidden;
}
html[data-ground="light"] .dash-root .wfc-from > .wfc-i { color: #5E636E; }
html[data-ground="light"] .dash-root .wfc-from i { font-style: normal; font-weight: 400; color: #5E636E; }
html[data-ground="light"] .dash-root .wfc-step,
html[data-ground="light"] .dash-root .wfc-week {
  display: flex; align-items: flex-start; gap: 5px; padding: 2.5px 7px; border-top: 1px solid #E5E7EB;
  font-size: 6px; font-weight: 500; white-space: nowrap;
}
html[data-ground="light"] .dash-root .wfc-band + .wfc-step,
html[data-ground="light"] .dash-root .wfc-band + .wfc-week,
html[data-ground="light"] .dash-root .wfc-band + .wfc-from,
html[data-ground="light"] .dash-root .wfc-band + .wfc-trig,
html[data-ground="light"] .dash-root .wfc-band + .wfc-exit { border-top: 0; }
html[data-ground="light"] .dash-root .wfc-day {
  flex-shrink: 0; width: 18px; padding: 1px 0; border-radius: 2.5px; text-align: center;
  font-style: normal; font-size: 4.5px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase;
  color: #5E636E; background: #E7EAEE;
}
html[data-ground="light"] .dash-root .wfc-time {
  margin-right: 4px; font-family: var(--font-mono); font-size: 5.5px; color: #5E636E;
}
html[data-ground="light"] .dash-root .wfc-times { display: flex; flex-direction: column; gap: 1.5px; min-width: 0; }
html[data-ground="light"] .dash-root .wfc-exit {
  display: flex; align-items: flex-start; gap: 4px; padding: 3px 7px; border-top: 1px solid #E5E7EB;
}
html[data-ground="light"] .dash-root .wfc-exit > .wfc-i { margin-top: 1px; color: #5E636E; }
html[data-ground="light"] .dash-root .wfc-exit--done { background: #FAFBFB; }
html[data-ground="light"] .dash-root .wfc-exit span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html[data-ground="light"] .dash-root .wfc-exit b {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis; font-size: 6px; font-weight: 600;
}
html[data-ground="light"] .dash-root .wfc-exit i { font-style: normal; font-size: 5.5px; color: #5E636E; }

html[data-ground="light"] .dash-root .wfc-zoom {
  position: absolute; left: 6px; bottom: 6px; display: flex; flex-direction: column;
  border: 1px solid #E5E7EB; border-radius: 3px; background: #FFFFFF; overflow: hidden;
}
html[data-ground="light"] .dash-root .wfc-zoom i {
  display: flex; align-items: center; justify-content: center; width: 11px; height: 11px;
  border-top: 1px solid #E5E7EB; font-style: normal; font-size: 7px; color: #111827;
}
html[data-ground="light"] .dash-root .wfc-zoom i:first-child { border-top: 0; }

/* ---- a page's tabs under its title ----
   The app draws no rule between a page's title and its tab row
   (layouts/tab-layout.tsx, the deployments page): the tab row's own bottom
   border is the only line, and the title stands 24px above the tab labels, which
   is about 18px at the mock's scale. The mock drew the header's rule as well,
   right on top of the labels, so the row read as pressed against it. Where tabs
   follow the header the rule goes and the row takes the app's spacing. The
   Deployments screen's day tabs set their own (the Deployments screen, below). */
html[data-ground="light"] .dash-root .dash-main-header:has(+ .wfc-tabs, + div > .dash-detail-tabs:first-child) {
  border-bottom-color: transparent;
}
html[data-ground="light"] .dash-root .dash-main-header + .wfc-tabs,
html[data-ground="light"] .dash-root .dash-main-header + div > .dash-detail-tabs:first-child { margin-top: 10px; }

/* ---- the stages on a short window ----
   A stage's words, its bullets and its card are about 690px tall at the page's
   size, and a window 720 to 860px tall leaves 650 to 790px under the nav, so on
   a laptop screen stages 2 to 5 ran off the bottom. Below 860px of height the
   words step down a size, the gaps close up, and the card is drawn smaller,
   which keeps the whole stage inside the window below the nav with room above
   and below. Below 760px it steps down once more. Nothing is cut, and the screen
   beside the words is untouched: it already fits. Only where the stages are
   pinned, which is from 1025px wide. */
@media (min-width: 1025px) and (max-height: 860px) {
  /* The copy column may use the whole height under the nav, so the longest
     stage, Send with five points and the tallest card, is never scrolled
     inside it. */
  html[data-ground="light"] .snap-step .snap-right { padding-top: 8px; padding-bottom: 8px; max-height: calc(100vh - 76px); }
  html[data-ground="light"] .snap-step .step-eyebrow { margin-bottom: 8px; }
  html[data-ground="light"] .snap-step .snap-right h2 { font-size: 1.65rem; margin-bottom: 10px; }
  html[data-ground="light"] .snap-step .snap-right p { font-size: 0.95rem; line-height: 1.6; margin-bottom: 12px; }
  html[data-ground="light"] .snap-step .snap-features { gap: 0.35rem; margin-bottom: 14px; }
  html[data-ground="light"] .snap-step .snap-features li { font-size: 0.95rem; line-height: 1.5; }
  html[data-ground="light"] .snap-step .snap-visual { zoom: 0.85; }
}
@media (min-width: 1025px) and (max-height: 760px) {
  html[data-ground="light"] .snap-step .step-eyebrow { margin-bottom: 6px; }
  html[data-ground="light"] .snap-step .snap-right h2 { font-size: 1.5rem; margin-bottom: 8px; }
  html[data-ground="light"] .snap-step .snap-right p { font-size: 0.9rem; margin-bottom: 10px; }
  html[data-ground="light"] .snap-step .snap-features { gap: 0.2rem; margin-bottom: 10px; }
  html[data-ground="light"] .snap-step .snap-features li { font-size: 0.9rem; line-height: 1.45; }
  html[data-ground="light"] .snap-step .snap-visual { zoom: 0.76; }
}

/* ---- incidents, handled ----
   The app's status badges (deliverability-labels, incidents-columns): Resolved
   in the positive green, and Auto-handled, an open incident the platform is
   already dealing with, in the amber family rather than as an alarm. A resolved
   row keeps its severity on the leading edge, as the app's rail does, but loses
   the tint that marked a live critical. */
html[data-ground="light"] .dash-root .dlv-status {
  display: inline-block; padding: 0.5px 4px; border: 1px solid; border-radius: 3px;
  font-style: normal; font-size: 5.5px; font-weight: 600;
}
html[data-ground="light"] .dash-root .dlv-status--resolved { color: #047253; background: #EDFDF5; border-color: #A7EBCB; }
html[data-ground="light"] .dash-root .dlv-status--auto { color: #A54C09; background: #FFFBEB; border-color: #FDE58A; }
html[data-ground="light"] .dash-root .dlv-tr--resolved { background: transparent; }
html[data-ground="light"] .dash-root .dlv-status { white-space: nowrap; }
html[data-ground="light"] .dash-root .dlv-tr { grid-template-columns: 34px 1.5fr 1fr .8fr 40px 34px 1fr 46px; }


/* ---- the Deployments screen ----
   The app's Deployments page (modules/deployments) at the mock's scale of about
   0.68: the send-mode band in the positive tint, the title row, the day tabs, the
   summary card with the day's hourly strip at its foot, the views over the day
   and the tree. The tree's measures run on past the frame's right edge, as the
   app's do past the window's, under a row menu held at the edge. The badges are
   the app's outline badges in light: Scheduled purple, Sending blue, Complete
   green. The screen stays at its top, as the app opens it, on the hero and on
   stage 03 alike. */
html[data-ground="light"] .dash-root .dpl-i { width: 9px; height: 9px; flex-shrink: 0; }
html[data-ground="light"] .dash-root .dpl-titlebar { border-bottom: 0; padding-bottom: 4px; }
html[data-ground="light"] .dash-root .dpl-help { width: 10px; height: 10px; color: #5E636E; }
html[data-ground="light"] .dash-root .dpl-btn { display: inline-flex; align-items: center; gap: 4px; }
html[data-ground="light"] .dash-root .dpl-days {
  display: flex; align-items: flex-end; gap: 14px; margin: 0 16px; border-bottom: 1px solid #E5E7EB;
}
html[data-ground="light"] .dash-root .dpl-day {
  display: flex; align-items: center; gap: 4px; padding: 3px 1px 5px; margin-bottom: -1px;
  border-bottom: 2px solid transparent; font-size: 9.5px; font-weight: 500; color: #5E636E; white-space: nowrap;
}
html[data-ground="light"] .dash-root .dpl-day em {
  font-style: normal; font-size: 7px; font-weight: 600; line-height: 1.4; padding: 0 4px;
  border: 1px solid #E5E7EB; border-radius: 4px; color: #5E636E; font-variant-numeric: tabular-nums;
}
html[data-ground="light"] .dash-root .dpl-day em.dpl-draft { border-color: transparent; background: hsl(220 16% 92%); }
html[data-ground="light"] .dash-root .dpl-day--on { color: #111827; border-bottom-color: #1659E9; }
html[data-ground="light"] .dash-root .dpl-caret { width: 8px; height: 8px; }
html[data-ground="light"] .dash-root .dpl-card {
  margin: 10px 16px 0; padding: 8px 11px 6px; border: 1px solid #E5E7EB; border-radius: 6px; background: #FFFFFF;
  box-shadow: 0 1px 1px hsl(220 25% 45% / 0.16), 0 2px 5px -1px hsl(220 25% 45% / 0.10);
}
html[data-ground="light"] .dash-root .dpl-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; }
html[data-ground="light"] .dash-root .dpl-total,
html[data-ground="light"] .dash-root .dpl-state { display: flex; align-items: baseline; gap: 3px; font-size: 9px; color: #5E636E; white-space: nowrap; }
html[data-ground="light"] .dash-root .dpl-total > b:first-child { font-size: 14px; font-weight: 700; letter-spacing: -0.01em; color: #111827; }
html[data-ground="light"] .dash-root .dpl-sep { font-style: normal; margin: 0 4px; color: rgba(94,99,110,0.5); }
html[data-ground="light"] .dash-root .dpl-chip { font-weight: 600; color: #111827; }
html[data-ground="light"] .dash-root .dpl-chip + .dpl-chip,
html[data-ground="light"] .dash-root .dpl-total b.dpl-chip:not(:first-of-type) { margin-left: 3px; }
html[data-ground="light"] .dash-root .dpl-state b { font-weight: 600; color: #111827; }
html[data-ground="light"] .dash-root .dpl-run { display: inline-flex; align-items: center; gap: 3px; font-weight: 500; color: #1659E9; }
html[data-ground="light"] .dash-root .dpl-run.is-done { color: hsl(163 94% 24%); }
html[data-ground="light"] .dash-root .dpl-spin { width: 8px; height: 8px; align-self: center; }
html[data-ground="light"] .dash-root .dash-view.active .dpl-spin { animation: dplSpin .9s linear infinite; }
@keyframes dplSpin { to { transform: rotate(360deg); } }
html[data-ground="light"] .dash-root .dpl-meter {
  display: block; position: relative; overflow: hidden; height: 3px; border-radius: 2px; background: hsl(220 16% 92%);
}
html[data-ground="light"] .dash-root .dpl-meter > b {
  position: absolute; inset: 0; background: #1659E9; transform-origin: left center; transition: transform .25s linear;
}
html[data-ground="light"] .dash-root .dpl-meter--day { height: 5px; margin: 5px 0 9px; border-radius: 3px; }
html[data-ground="light"] .dash-root .dpl-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 18px; }
html[data-ground="light"] .dash-root .dpl-col-head {
  margin-bottom: 2px; font-size: 6.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: #5E636E;
}
html[data-ground="light"] .dash-root .dpl-kv {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px; padding: 1.5px 0; font-size: 8px; color: #5E636E;
}
html[data-ground="light"] .dash-root .dpl-kv > span { white-space: nowrap; }
html[data-ground="light"] .dash-root .dpl-kv u { display: flex; align-items: baseline; gap: 3px; text-decoration: none; white-space: nowrap; }
html[data-ground="light"] .dash-root .dpl-kv b { font-weight: 500; color: #111827; font-variant-numeric: tabular-nums; }
html[data-ground="light"] .dash-root .dpl-kv em { font-style: normal; font-size: 7px; color: #5E636E; font-variant-numeric: tabular-nums; }
html[data-ground="light"] .dash-root .dpl-kv--rev b { font-weight: 600; color: hsl(163 94% 24%); }
/* The hourly strip: each hour's plan is the bar, and what of it has gone out
   fills it from the foot, which is the app's stacked pair (deployment-hourly-
   volume) drawn as one bar and its fill. */
html[data-ground="light"] .dash-root .dpl-hours {
  display: grid; grid-template-columns: repeat(24, minmax(0, 1fr)); gap: 2px; align-items: end;
  height: 38px; margin-top: 9px; padding-top: 6px; border-top: 1px solid #E5E7EB;
}
html[data-ground="light"] .dash-root .dpl-hr {
  position: relative; height: calc(var(--h) * 100%); min-height: 2px; overflow: hidden;
  border-radius: 1.5px 1.5px 0 0; background: hsl(220 16% 92%);
}
html[data-ground="light"] .dash-root .dpl-hr b {
  position: absolute; inset: 0; background: #1659E9; transform-origin: center bottom; transition: transform .25s linear;
}
html[data-ground="light"] .dash-root .dpl-ticks { display: flex; justify-content: space-between; margin-top: 2px; font-size: 6.5px; color: #5E636E; }
html[data-ground="light"] .dash-root .dpl-viewbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 16px 6px; }
html[data-ground="light"] .dash-root .dpl-seg {
  display: inline-flex; gap: 1px; padding: 2px; border-radius: 5px; background: hsl(220 16% 92%); font-size: 8.5px; color: #5E636E; white-space: nowrap;
}
html[data-ground="light"] .dash-root .dpl-seg > * { padding: 2px 7px; border-radius: 4px; font-weight: 500; }
html[data-ground="light"] .dash-root .dpl-seg > b { background: #FFFFFF; color: #111827; box-shadow: 0 1px 2px hsl(220 25% 45% / 0.18); }
html[data-ground="light"] .dash-root .dpl-btn--cols { flex-shrink: 0; font-size: 8.5px; padding: 2px 6px; }
/* The tree. Fixed columns on one template, wider than the frame: the cells past
   the edge are the measures the app scrolls to. */
html[data-ground="light"] .dash-root .dpl-table {
  --dpl-cols: 16px 132px 46px 70px 64px 54px 54px 38px 50px 48px 38px 44px 38px 52px 58px 52px;
  position: relative; overflow: hidden; margin: 0 16px 12px; border: 1px solid #E5E7EB; border-radius: 6px;
  font-size: 8px; color: #111827; container-type: inline-size;
}
html[data-ground="light"] .dash-root .dpl-tr {
  position: relative; display: grid; grid-template-columns: var(--dpl-cols); align-items: center;
  width: max-content; min-height: 17px; border-top: 1px solid #EEF0F3; background: #FFFFFF;
}
html[data-ground="light"] .dash-root .dpl-c { padding: 0 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ground="light"] .dash-root .dpl-num { text-align: right; font-variant-numeric: tabular-nums; }
html[data-ground="light"] .dash-root .dpl-tr--head {
  min-height: 18px; border-top: 0; background: hsl(220 16% 96.5%); font-size: 7.5px; font-weight: 500; color: #5E636E;
}
html[data-ground="light"] .dash-root .dpl-tr--total { background: hsl(220 16% 96.5%); border-top-color: #E5E7EB; font-weight: 600; }
html[data-ground="light"] .dash-root .dpl-c--x { display: flex; justify-content: center; padding: 0; color: #5E636E; }
html[data-ground="light"] .dash-root .dpl-depth { display: flex; flex-direction: column; }
html[data-ground="light"] .dash-root .dpl-depth .dpl-i { width: 7px; height: 7px; }
html[data-ground="light"] .dash-root .dpl-c--name { display: flex; align-items: center; gap: 4px; }
html[data-ground="light"] .dash-root .dpl-c--name > span { overflow: hidden; text-overflow: ellipsis; }
html[data-ground="light"] .dash-root .dpl-c--name .dpl-i { color: #5E636E; }
html[data-ground="light"] .dash-root .dpl-tr--d0 { font-weight: 600; }
html[data-ground="light"] .dash-root .dpl-c--time { color: #5E636E; font-variant-numeric: tabular-nums; }
html[data-ground="light"] .dash-root .dpl-c--prog { display: flex; align-items: center; justify-content: flex-end; gap: 4px; font-variant-numeric: tabular-nums; }
html[data-ground="light"] .dash-root .dpl-c--prog .dpl-meter { width: 26px; flex-shrink: 0; }
/* The row menu stays at the frame's edge with the row's own fill, as the app's
   sticky actions column does, over the measures running on beneath it. */
html[data-ground="light"] .dash-root .dpl-c--menu {
  position: absolute; top: 0; bottom: 0; left: calc(100cqw - 16px);
  display: flex; align-items: center; justify-content: center; width: 16px; padding: 0;
  background: inherit; box-shadow: -6px 0 6px -4px hsl(220 25% 45% / 0.18); color: #5E636E;
}
html[data-ground="light"] .dash-root .dpl-badge {
  display: inline-flex; align-items: center; gap: 2.5px; padding: 0 4px; border: 1px solid; border-radius: 4px;
  font-size: 7px; font-weight: 500; line-height: 1.6;
}
html[data-ground="light"] .dash-root .dpl-badge .dpl-i { width: 6.5px; height: 6.5px; }
html[data-ground="light"] .dash-root .dpl-badge--purple { background: hsl(270 100% 98%); border-color: hsl(269 100% 92%); color: hsl(272 72% 47%); }
html[data-ground="light"] .dash-root .dpl-badge--blue { background: hsl(214 100% 97%); border-color: hsl(213 97% 87%); color: hsl(224 76% 48%); }
html[data-ground="light"] .dash-root .dpl-badge--green { background: hsl(152 81% 96%); border-color: hsl(152 76% 80%); color: hsl(163 94% 24%); }
/* A row whose status just moved on: its new badge arrives and the row's fill
   glows once and settles. */
html[data-ground="light"] .dash-root .dpl-tr--flip { animation: dplFlip 1.2s ease-out; }
html[data-ground="light"] .dash-root .dpl-tr--flip .dpl-badge { animation: dplBadge .35s cubic-bezier(.2, .8, .2, 1); }
@keyframes dplFlip { from { background: hsl(214 100% 95%); } to { background: #FFFFFF; } }
@keyframes dplBadge { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  html[data-ground="light"] .dash-root .dpl-meter > b,
  html[data-ground="light"] .dash-root .dpl-hr b { transition: none; }
  html[data-ground="light"] .dash-root .dpl-tr--flip,
  html[data-ground="light"] .dash-root .dpl-tr--flip .dpl-badge,
  html[data-ground="light"] .dash-root .dash-view.active .dpl-spin { animation: none; }
}

/* ---- the Analytics screen ----
   The app's Analytics page (modules/performance) at the mock's scale: the scope
   bar as a bordered panel of labelled controls, then "Performance over time" as
   rows of a figure beside its chart, then the send funnel and the breakdown. The
   chart inks are the app's: delivered and opens in the primary chart blue,
   clicks in the secondary sky, hard bounces orange, complaints purple, revenue
   the positive green, the previous period a dashed muted line. */
#dash-view-analytics { overflow: hidden; }
html[data-ground="light"] .dash-root .an-scroll { will-change: transform; }
html[data-ground="light"] .dash-root .an-scroll.at-funnel { transform: translateY(var(--an-to, 0)); }
html[data-ground="light"] .dash-root .an-plot { position: relative; align-self: center; min-width: 0; }
/* The charts, figures and crosshair are drawn by the page's script
   (ANALYTICS_LIFE in build-postlever.py). The explorer sets .an-pending only
   when motion is welcome, and without it the funnel is simply drawn; with it
   the funnel's fills grow from their left once the screen has scrolled there. */
html[data-ground="light"] .dash-root .an-pending .an-fill,
html[data-ground="light"] .dash-root .an-pending .an-stack {
  transform: scaleX(0); transform-origin: left center;
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1) calc(var(--i, 0) * 80ms);
}
html[data-ground="light"] .dash-root .an-pending.an-filled .an-fill,
html[data-ground="light"] .dash-root .an-pending.an-filled .an-stack { transform: none; }
html[data-ground="light"] .dash-root .an-pending.at-funnel { transition: transform 3.25s cubic-bezier(.45, 0, .25, 1); }
html[data-ground="light"] .dash-root .an-body { display: flex; flex-direction: column; gap: 8px; padding: 2px 12px 12px; }
html[data-ground="light"] .dash-root .an-scope {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: 6px 10px;
  padding: 7px 8px; border: 1px solid #E5E7EB; border-radius: 5px; background: #FFFFFF;
}
html[data-ground="light"] .dash-root .an-ctl { display: flex; flex-direction: column; gap: 2px; }
html[data-ground="light"] .dash-root .an-ctl span,
html[data-ground="light"] .dash-root .an-filters > span {
  font-size: 5px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: #5E636E;
}
html[data-ground="light"] .dash-root .an-ctl b {
  padding: 2px 5px; border: 1px solid #7A8599; border-radius: 3px;
  font-size: 6.5px; font-weight: 400; color: #111827; white-space: nowrap;
}
html[data-ground="light"] .dash-root .an-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 3px; width: 100%; }
html[data-ground="light"] .dash-root .an-filters > span { margin-right: 2px; }
html[data-ground="light"] .dash-root .an-filters i {
  padding: 1px 4px; border: 1px solid #E5E7EB; border-radius: 3px; background: #F5F6F8;
  font-style: normal; font-size: 6px; color: #111827;
}
html[data-ground="light"] .dash-root .an-h { margin-top: 2px; font-size: 8px; font-weight: 600; color: #111827; }
html[data-ground="light"] .dash-root .an-card {
  padding: 0 8px; border: 1px solid #E5E7EB; border-radius: 5px; background: #FFFFFF;
  box-shadow: 0 1px 1px hsl(220 25% 45% / 0.16), 0 2px 5px -1px hsl(220 25% 45% / 0.10);
}
html[data-ground="light"] .dash-root .an-row {
  display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 8px; align-items: stretch;
  padding: 5px 0; border-top: 1px solid #E5E7EB;
}
html[data-ground="light"] .dash-root .an-row:first-child { border-top: 0; }
html[data-ground="light"] .dash-root .an-fig { display: flex; flex-direction: column; gap: 1px; padding-right: 7px; border-right: 1px solid #E5E7EB; }
html[data-ground="light"] .dash-root .an-title { display: flex; align-items: center; gap: 3px; font-size: 6px; font-weight: 600; color: #5E636E; }
html[data-ground="light"] .dash-root .an-grade {
  padding: 0 3px; border: 1px solid #A7EBCB; border-radius: 3px; background: #EDFDF5;
  font-size: 5px; font-weight: 600; color: #047253;
}
html[data-ground="light"] .dash-root .an-num { display: flex; align-items: baseline; gap: 4px; }
html[data-ground="light"] .dash-root .an-num b { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: -0.01em; color: #111827; font-variant-numeric: tabular-nums; }
html[data-ground="light"] .dash-root .an-num b.an-money { color: #047253; }
html[data-ground="light"] .dash-root .an-delta { font-style: normal; font-size: 6px; color: #047253; font-variant-numeric: tabular-nums; }
html[data-ground="light"] .dash-root .an-meta { font-size: 5px; color: #5E636E; }
html[data-ground="light"] .dash-root .an-legend { display: flex; flex-wrap: wrap; gap: 1px 5px; margin-top: 1px; font-size: 5px; color: #5E636E; }
html[data-ground="light"] .dash-root .an-legend span { display: inline-flex; align-items: center; gap: 2px; }
html[data-ground="light"] .dash-root .an-sw { width: 4px; height: 4px; border-radius: 1px; }
html[data-ground="light"] .dash-root .an-chart { width: 100%; height: 40px; display: block; align-self: center; }
html[data-ground="light"] .dash-root .an-bar--d { fill: #3B82F6; }
html[data-ground="light"] .dash-root .an-bar--hb { fill: #F59E0B; }
html[data-ground="light"] .dash-root .an-bar--err { fill: #E11D48; }
html[data-ground="light"] .dash-root .an-bar--rev { fill: #059467; }
html[data-ground="light"] .dash-root .an-line { fill: none; stroke: #3B82F6; stroke-width: 1.4; vector-effect: non-scaling-stroke; }
html[data-ground="light"] .dash-root .an-line--prev { stroke: #5E636E; stroke-dasharray: 3 2; opacity: 0.55; }
html[data-ground="light"] .dash-root .an-line--extra { stroke: #93C5FD; }
html[data-ground="light"] .dash-root .an-line--click { stroke: #0D9DDA; }
html[data-ground="light"] .dash-root .an-line--hb { stroke: #F97316; }
html[data-ground="light"] .dash-root .an-line--unsub { stroke: #64748B; }
html[data-ground="light"] .dash-root .an-line--compl { stroke: #9333EA; }
/* Today's point, pulsing once the screen has drawn, in its line's ink. */
html[data-ground="light"] .dash-root .an-live {
  position: absolute; right: -2px; width: 4px; height: 4px; margin-top: -2px; border-radius: 50%;
  color: #3B82F6; background: currentColor; opacity: 0; transition: opacity .3s ease;
}
html[data-ground="light"] .dash-root .an-row:nth-child(3) .an-live { color: #0D9DDA; }
html[data-ground="light"] .dash-root .an-row:nth-child(4) .an-live { color: #F97316; }
html[data-ground="light"] .dash-root .an-row:nth-child(5) .an-live { color: #9333EA; }
html[data-ground="light"] .dash-root .an-alive .an-live { opacity: 1; animation: anPulse 1.6s ease-out infinite; }
@keyframes anPulse {
  from { box-shadow: 0 0 0 0 color-mix(in srgb, currentColor 50%, transparent); }
  to { box-shadow: 0 0 0 5px color-mix(in srgb, currentColor 0%, transparent); }
}
html[data-ground="light"] .dash-root .an-sw--d, html[data-ground="light"] .dash-root .an-sw--open { background: #3B82F6; }
html[data-ground="light"] .dash-root .an-sw--hb { background: #F59E0B; }
html[data-ground="light"] .dash-root .an-sw--err { background: #E11D48; }
html[data-ground="light"] .dash-root .an-sw--mpp { background: #93C5FD; }
html[data-ground="light"] .dash-root .an-sw--prev { background: #A6ABB4; }
html[data-ground="light"] .dash-root .an-sw--click { background: #0D9DDA; }
html[data-ground="light"] .dash-root .an-sw--hbr { background: #F97316; }
html[data-ground="light"] .dash-root .an-sw--unsub { background: #64748B; }
html[data-ground="light"] .dash-root .an-sw--compl { background: #9333EA; }
html[data-ground="light"] .dash-root .an-sw--rev { background: #059467; }
html[data-ground="light"] .dash-root .an-funnel { display: grid; grid-template-columns: 1fr 1fr; gap: 0; padding: 8px 0; }
html[data-ground="light"] .dash-root .an-fcol { padding: 0 10px; min-width: 0; }
html[data-ground="light"] .dash-root .an-fcol + .an-fcol { border-left: 1px solid #E5E7EB; }
html[data-ground="light"] .dash-root .an-fh { margin-bottom: 5px; font-size: 7.5px; font-weight: 600; color: #111827; }

/* The delivery bar: delivered, then a sliver per loss, each at its share of
   everyone sent to, with the app's two-pixel floor so the slivers show. */
html[data-ground="light"] .dash-root .an-stack {
  display: flex; gap: 0.5px; height: 7px; overflow: hidden; border-radius: 1.5px; background: #E8EAEF;
}
html[data-ground="light"] .dash-root .an-seg { display: block; flex: 0 0 auto; min-width: 1px; height: 100%; }
html[data-ground="light"] .dash-root .an-stack-sum {
  display: flex; justify-content: space-between; gap: 6px; margin-top: 2px;
  font-size: 5.5px; color: #111827; font-variant-numeric: tabular-nums;
}
html[data-ground="light"] .dash-root .an-frows { margin-top: 5px; padding-top: 3px; border-top: 1px solid #E5E7EB; }
html[data-ground="light"] .dash-root .an-fcol:last-child .an-frows { margin-top: 0; padding-top: 0; border-top: 0; }
html[data-ground="light"] .dash-root .an-frow {
  display: grid; grid-template-columns: 50px minmax(0, 1fr) 40px 30px; align-items: center; gap: 5px;
  padding: 2px 0; font-size: 6px; color: #111827;
}
html[data-ground="light"] .dash-root .an-frow > span:first-child { display: flex; align-items: center; gap: 3px; min-width: 0; white-space: nowrap; }
html[data-ground="light"] .dash-root .an-frow u { text-decoration: underline dotted #A6ABB4; text-underline-offset: 1px; }
html[data-ground="light"] .dash-root .an-key { width: 4px; height: 4px; border-radius: 1px; flex: none; }
html[data-ground="light"] .dash-root .an-frow b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
html[data-ground="light"] .dash-root .an-frow em { font-style: normal; text-align: right; color: #5E636E; font-variant-numeric: tabular-nums; }
html[data-ground="light"] .dash-root .an-frow--head span {
  display: flex; align-items: center; justify-content: flex-end; gap: 1.5px;
  font-size: 4.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: #5E636E;
}
html[data-ground="light"] .dash-root .an-frow--head svg { width: 5px; height: 5px; fill: none; stroke: currentColor; stroke-width: 2; }
html[data-ground="light"] .dash-root .an-track { display: block; height: 6px; border-radius: 1.5px; background: #E8EAEF; overflow: hidden; }
html[data-ground="light"] .dash-root .an-fill {
  display: block; height: 100%; width: max(var(--w), 1px); border-radius: 1.5px; transform-origin: left center;
}
/* The app's funnel inks: delivered in the chart blue, suppressed and throttled
   slate (neither was ever attempted), send errors orange, soft bounces amber,
   hard bounces purple, conversions the positive green. */
html[data-ground="light"] .dash-root .an-f--d { background: #60A5FA; }
html[data-ground="light"] .dash-root .an-f--click { background: #93C5FD; }
html[data-ground="light"] .dash-root .an-f--conv { background: #059669; }
html[data-ground="light"] .dash-root .an-f--suppressed,
html[data-ground="light"] .dash-root .an-f--throttled { background: #64748B; }
html[data-ground="light"] .dash-root .an-f--errors { background: #F97316; }
html[data-ground="light"] .dash-root .an-f--soft { background: #F59E0B; }
html[data-ground="light"] .dash-root .an-f--hard { background: #9333EA; }

html[data-ground="light"] .dash-root .an-axes { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }
html[data-ground="light"] .dash-root .an-ctl--row { flex-direction: row; align-items: center; gap: 4px; }
html[data-ground="light"] .dash-root .an-ctl--row b { min-width: 48px; background: #FFFFFF; }
html[data-ground="light"] .dash-root .an-count { font-size: 6.5px; color: #5E636E; }
html[data-ground="light"] .dash-root .an-muted { color: #5E636E; }
html[data-ground="light"] .dash-root .an-info { width: 5px; height: 5px; flex: none; fill: none; stroke: #5E636E; stroke-width: 2; }

/* The breakdown, as the app's heat map: the scale on its own line above the
   grid, then one row per workflow, a column per brand and the totals unshaded.
   The four steps are the app's chart blues, palest to deepest, with dark ink on
   all of them. */
html[data-ground="light"] .dash-root .an-scale {
  display: flex; align-items: center; justify-content: flex-end; gap: 3px; font-size: 5.5px; color: #5E636E;
}
html[data-ground="light"] .dash-root .an-scale i { width: 8px; height: 8px; }
html[data-ground="light"] .dash-root .an-scale span:first-child + i { border-radius: 2px 0 0 2px; }
html[data-ground="light"] .dash-root .an-scale i:last-of-type { border-radius: 0 2px 2px 0; }
html[data-ground="light"] .dash-root .an-scale i + i { margin-left: -3px; }
html[data-ground="light"] .dash-root .an-pivot { padding: 0; overflow: hidden; }
html[data-ground="light"] .dash-root .an-pr {
  display: grid; grid-template-columns: minmax(84px, 1.5fr) repeat(5, minmax(0, 1fr)); align-items: stretch;
  border-top: 1px solid #E5E7EB; font-size: 6.5px; color: #111827;
}
html[data-ground="light"] .dash-root .an-pr > * { padding: 2px; }
html[data-ground="light"] .dash-root .an-pn {
  display: flex; align-items: center; gap: 2px; min-width: 0; padding-left: 7px !important;
  border-right: 1px solid #E5E7EB; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
html[data-ground="light"] .dash-root .an-pr--head { border-top: 0; font-size: 6px; font-weight: 600; }
html[data-ground="light"] .dash-root .an-pr--head > span:not(.an-pn) {
  display: flex; align-items: center; justify-content: flex-end; gap: 1.5px; padding: 4px 6px; white-space: nowrap;
}
html[data-ground="light"] .dash-root .an-pr--head svg:not(.an-info) { width: 5px; height: 5px; flex: none; fill: none; stroke: #5E636E; stroke-width: 2.4; }
html[data-ground="light"] .dash-root .an-pr--foot .an-pn { font-weight: 600; }
html[data-ground="light"] .dash-root .an-hc {
  position: relative; display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: 0.5px;
  min-height: 18px; padding: 2px 4px; border-radius: 3px; text-align: right; font-variant-numeric: tabular-nums;
}
html[data-ground="light"] .dash-root .an-hc::before { content: ''; position: absolute; inset: 0; border-radius: inherit; z-index: -1; }
html[data-ground="light"] .dash-root .an-pivot .an-pr > .an-hc { margin: 1.5px; isolation: isolate; }
html[data-ground="light"] .dash-root .an-hc b { font-weight: 500; }
html[data-ground="light"] .dash-root .an-hc small { font-size: 5px; white-space: nowrap; }
html[data-ground="light"] .dash-root .an-hc--total small { color: #5E636E; }
html[data-ground="light"] .dash-root .an-hc--none { color: #5E636E; }
html[data-ground="light"] .dash-root .an-scale .an-hc--s0, html[data-ground="light"] .dash-root .an-hc--s0::before { background: hsl(213 97% 87%); }
html[data-ground="light"] .dash-root .an-scale .an-hc--s1, html[data-ground="light"] .dash-root .an-hc--s1::before { background: hsl(212 96% 78%); }
html[data-ground="light"] .dash-root .an-scale .an-hc--s2, html[data-ground="light"] .dash-root .an-hc--s2::before { background: hsl(213 94% 68%); }
html[data-ground="light"] .dash-root .an-scale .an-hc--s3, html[data-ground="light"] .dash-root .an-hc--s3::before { background: hsl(217 91% 60%); }

/* Workflow entry, as the app's table: the limit per trigger, the queue in the
   cautionary ink with its peak, the drops in the destructive ink, and a day per
   cell. It runs on past the card's right edge, as the app's scrolls. */
html[data-ground="light"] .dash-root .an-desc { margin-top: -5px; font-size: 6.5px; line-height: 1.4; color: #5E636E; }
html[data-ground="light"] .dash-root .an-table { padding: 0; overflow: hidden; }
html[data-ground="light"] .dash-root .an-egrid { width: max-content; }
html[data-ground="light"] .dash-root .an-er {
  display: grid; grid-template-columns: 62px 86px 84px 40px 40px 46px 64px 128px; column-gap: 6px; align-items: center;
  padding: 4px 8px; border-top: 1px solid #E5E7EB; font-size: 6.5px; color: #111827;
}
html[data-ground="light"] .dash-root .an-er > span { min-width: 0; }
html[data-ground="light"] .dash-root .an-er--head { border-top: 0; align-items: end; font-size: 6px; font-weight: 600; }
html[data-ground="light"] .dash-root .an-er--head > span { display: flex; align-items: center; gap: 1.5px; }
html[data-ground="light"] .dash-root .an-er--head > span:nth-child(n+4):nth-child(-n+7) { justify-content: flex-end; text-align: right; }
html[data-ground="light"] .dash-root .an-er--head svg:not(.an-info) { width: 5px; height: 5px; flex: none; fill: none; stroke: #5E636E; stroke-width: 2.4; }
html[data-ground="light"] .dash-root .an-ew { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
html[data-ground="light"] .dash-root .an-lim { display: block; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-ground="light"] .dash-root .an-lim small { margin-left: 2px; font-size: 5.5px; color: #5E636E; }
html[data-ground="light"] .dash-root .an-lim i { font-size: 5.5px; color: #5E636E; }
html[data-ground="light"] .dash-root .an-en { display: flex; flex-direction: column; align-items: flex-end; text-align: right; font-variant-numeric: tabular-nums; }
html[data-ground="light"] .dash-root .an-en b { font-weight: 500; }
html[data-ground="light"] .dash-root .an-en small { font-size: 5.5px; color: #5E636E; white-space: nowrap; }
html[data-ground="light"] .dash-root .an-warn { color: #A54C09; }
html[data-ground="light"] .dash-root .an-bad { color: #B91C1C; }
html[data-ground="light"] .dash-root .an-ed { display: flex; align-items: center; gap: 6px; white-space: nowrap; font-variant-numeric: tabular-nums; }
html[data-ground="light"] .dash-root .an-strip { display: flex; gap: 0.5px; width: 92px; }
html[data-ground="light"] .dash-root .an-day { flex: 1; height: 9px; border-radius: 0.5px; transform-origin: center bottom; }
html[data-ground="light"] .dash-root .an-day--L { background: rgba(220, 38, 38, 0.8); }
html[data-ground="light"] .dash-root .an-day--E { background: rgba(5, 150, 105, 0.7); }
html[data-ground="light"] .dash-root .an-day--P { background: hsl(220 16% 92%); }
html[data-ground="light"] .dash-root .an-pager { display: flex; align-items: center; gap: 4px; font-size: 6px; }
html[data-ground="light"] .dash-root .an-pg { font-style: normal; width: 9px; text-align: center; color: #5E636E; }
html[data-ground="light"] .dash-root .an-pgsel {
  padding: 1px 4px; border-radius: 3px; background: hsl(220 16% 92%); font-weight: 500; color: #111827;
}
html[data-ground="light"] .dash-root .an-sep { width: 1px; height: 10px; margin: 0 6px; background: #E5E7EB; }

/* Arriving at the breakdown, the cells take their shade palest first, a step
   at a time, and each day's cell in the strips stands up left to right. */
html[data-ground="light"] .dash-root .an-pending .an-hc::before {
  opacity: 0; transform: scale(.7);
  transition: opacity .45s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
  transition-delay: calc(var(--s, 0) * 220ms + var(--j, 0) * 18ms);
}
html[data-ground="light"] .dash-root .an-pending.an-heated .an-hc::before { opacity: 1; transform: none; }
html[data-ground="light"] .dash-root .an-pending .an-day {
  transform: scaleY(0); transition: transform .3s cubic-bezier(.22, 1, .36, 1) calc(400ms + var(--d) * 28ms);
}
html[data-ground="light"] .dash-root .an-pending.an-heated .an-day { transform: none; }
html[data-ground="light"] #dash-view-analytics .dash-main-header { border-bottom-color: transparent; }

/* ---- stage 05's card: three subject lines in rotation ---- */
html[data-ground="light"] .snap-visual.sl-card { padding: 14px 16px 12px; }
html[data-ground="light"] .sl-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 10px; }
html[data-ground="light"] .sl-head b { font-size: 13px; font-weight: 600; color: var(--color-text); }
html[data-ground="light"] .sl-head span { font-size: 11px; color: var(--color-text-muted); }
html[data-ground="light"] .sl-row {
  display: grid; grid-template-columns: minmax(0, 1fr) 40px 38px 52px; align-items: center; gap: 8px;
  padding: 7px 0; border-top: 1px solid var(--color-border); font-size: 12px; color: var(--color-text);
}
html[data-ground="light"] .sl-name { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
html[data-ground="light"] .sl-row i { display: block; height: 6px; width: var(--w); border-radius: 3px; background: #3B82F6; }
html[data-ground="light"] .sl-row b { font-weight: 600; text-align: right; font-variant-numeric: tabular-nums; }
html[data-ground="light"] .sl-row--off { color: var(--color-text-muted); }
html[data-ground="light"] .sl-row--off i { background: #C3C8D0; }
html[data-ground="light"] .sl-tag {
  justify-self: start; padding: 1px 6px; border: 1px solid var(--color-border); border-radius: 4px;
  font-style: normal; font-size: 10px; font-weight: 500; color: var(--color-text-muted); background: #F5F6F8;
}
html[data-ground="light"] .sl-tag--lead { color: #1D4FD7; background: #F0F6FF; border-color: #BEDBFE; }
html[data-ground="light"] .sl-foot { padding-top: 7px; border-top: 1px solid var(--color-border); font-size: 10.5px; color: var(--color-text-muted); }

/* ---- the hero ends at its buttons ----
   Nothing follows them now, so on a wide window they keep no space beneath them
   to throw the words off their centre; stacked, the screen's own margin is the
   gap. */
@media (min-width: 1025px) {
  html[data-ground="light"] .ultra-hero-content .hero-ctas { margin-bottom: 0; }
}
@media (max-width: 1024px) {
  html[data-ground="light"] .ultra-hero-content .hero-ctas { margin-bottom: var(--space-2); }
}


/* ---- the suppression section ----
   Words on the left, left-aligned, and the OPTIZMO page's drawing of the check
   on the right, on that page's stage: a rounded panel under a hairline on the
   soft violet and sky ground. Below 1080 the two stack, words first. */
html[data-ground="light"] .supp-split { display: grid; gap: var(--space-10); align-items: center; }
html[data-ground="light"] .supp-words { text-align: left; }
html[data-ground="light"] .supp-stage {
  position: relative;
  height: clamp(240px, 60vw, 360px);
  overflow: hidden;
  background:
    radial-gradient(55% 65% at 12% 12%, rgba(99, 102, 241, 0.16), rgba(99, 102, 241, 0) 70%),
    radial-gradient(55% 65% at 92% 92%, rgba(56, 189, 248, 0.18), rgba(56, 189, 248, 0) 70%),
    radial-gradient(40% 45% at 90% 8%, rgba(251, 140, 90, 0.1), rgba(251, 140, 90, 0) 70%),
    var(--paper-ground);
  border: 1px solid var(--paper-line);
  border-radius: 24px;
}
html[data-ground="light"] .supp-stage .steps-suppression { position: relative; width: 100%; height: 100%; }
html[data-ground="light"] .supp-stage canvas { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; }
@media (min-width: 1080px) {
  html[data-ground="light"] .supp-split { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-16); }
  html[data-ground="light"] .supp-stage { height: clamp(300px, 26vw, 360px); }
}


/* ---- section grounds ----
   From the suppression section's slope down the sections alternate the band's
   grey and the page's white, so no two neighbours share a ground and read as
   one: performance on the band the slope opens onto, the testimonial on white,
   the integrations on the band, the features on white, the FAQ on the band and
   the closing call on white, above the footer's band. The navy page's grounds
   are !important and keyed on the theme, so these are too. */
html[data-ground="light"] .perf-section { background: var(--paper-band); }
html[data-ground="light"][data-theme] .testimonial-section.s-dark { background: var(--paper-ground) !important; }
html[data-ground="light"] .esp-bar-section { background: var(--paper-band) !important; }
html[data-ground="light"] .features-grid-section { background: var(--paper-ground) !important; }
html[data-ground="light"] .faq-section { background: var(--paper-band) !important; }
html[data-ground="light"] .cta-section { background: var(--paper-ground) !important; }
html[data-ground="light"] footer { background: var(--paper-band) !important; }
/* The page's last line, as every page's: in the hero band's colours, ACCESS's
   warm into Postlever's blue (chrome.css, the foot). */
html[data-ground="light"] footer { position: relative; border-top: 0; }
html[data-ground="light"] footer::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 3px;
  background: linear-gradient(90deg, #FB8C5A 0%, #F7748F 30%, #8B8FF6 65%, #2563EB 100%);
}

/* The byline starts where the quote's words do, past its rule, so the quote and
   who said it read as one block. */
html[data-ground="light"] .testimonial-author {
  justify-content: flex-start;
  margin-left: calc(3px + var(--space-8));
  text-align: left;
}

/* The integrations eyebrow sits centred over its centred title. */
html[data-ground="light"] .esp-eyebrow { text-align: center; }


/* ---- performance ----
   Eight figures, four to a row from 1080 and two below, grouped by space alone:
   no cards, no rules between them. The figure is the section's own title face,
   large and in tabular numerals, with a short accent line under it, then what
   it measures in ink and a line of what that means, muted. */
html[data-ground="light"] .perf-head { max-width: 46rem; margin: 0 auto var(--space-8); text-align: center; }
html[data-ground="light"] .perf-head .section-lead { margin: 0 auto; text-wrap: balance; }
html[data-ground="light"] .perf-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 var(--space-6);
  container-type: inline-size;
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1080px) {
  html[data-ground="light"] .perf-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--space-8); }
}
/* Each figure's four parts sit on rows shared across its row of figures, so a
   label that wraps moves its neighbours' lines down with it and every line in
   the row starts level. */
html[data-ground="light"] .perf-item {
  display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 0;
  justify-items: start; align-content: start; min-width: 0;
}
html[data-ground="light"] .perf-fig {
  font-family: var(--font-heading);
  font-weight: var(--font-extrabold);
  /* Sized to the column (a half or a quarter of the grid), so the widest figure
     always fits it and every figure shares one size. */
  font-size: min(3rem, 11cqi);
  line-height: 1.05;
  letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
  white-space: nowrap;
}
@media (min-width: 1080px) {
  html[data-ground="light"] .perf-fig { font-size: min(3rem, 6.6cqi); }
}
html[data-ground="light"] .perf-line {
  display: block;
  width: 40px;
  height: 2px;
  margin: var(--space-3) 0 var(--space-4);
  border-radius: 1px;
  background: var(--color-accent);
  transform-origin: left center;
}
html[data-ground="light"] .perf-label { font-size: var(--text-base); font-weight: 600; line-height: 1.35; color: var(--color-text); }
html[data-ground="light"] .perf-label { align-self: start; }
html[data-ground="light"] .perf-note {
  align-self: start;
  margin-top: var(--space-1);
  padding-bottom: var(--space-10);
  font-size: var(--text-sm);
  line-height: 1.55;
  color: var(--color-text-muted);
}
/* Motion, set by the page's script only where it is welcome: each underline
   draws in from the left over its own --ms, and its figure counts as it lands. */
html[data-ground="light"] .perf-pending .perf-line { transform: scaleX(0); }
html[data-ground="light"] .perf-pending .perf-item.drawn .perf-line {
  transform: none;
  transition: transform var(--ms) cubic-bezier(.22, 1, .36, 1);
}


/* ---- the nav's two groups ----
   The site's pages from the logo, Log in pushed right to the button, as
   chrome.css draws them on the other pages. */
html[data-ground="light"] nav.dark-nav .nav-links { flex: 1; margin-left: clamp(56px, 5vw, 72px); }
html[data-ground="light"] nav.dark-nav .nav-links > li.nav-aside { margin-left: auto; }
html[data-ground="light"] .mobile-menu-gap { display: block; height: var(--space-5); }
html[data-ground="light"] .mobile-menu-body a.nav-util { font-weight: var(--font-regular); color: var(--color-text-muted); }

/* The band runs the window's full width between the lead and the figures:
   the ribbon coming back in from the left over the streaks its fibres run on
   as (js/perf-ribbon.js), the streaks' far ends faded into the section, and
   nothing behind the figures. */
html[data-ground="light"] .perf-band {
  position: relative;
  /* Edge to edge of the window, past the section's own side padding; the page
     clips any sideways overflow, so a scrollbar's width cannot make a scroll. */
  width: 100vw;
  margin-inline: calc(50% - 50vw);
  height: 180px;
  margin-block: 0 var(--space-12);
}
html[data-ground="light"] .perf-streaks,
html[data-ground="light"] .perf-ribbon {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
}
html[data-ground="light"] .perf-streaks {
  -webkit-mask-image: linear-gradient(90deg, #000 86%, transparent);
  mask-image: linear-gradient(90deg, #000 86%, transparent);
}
@media (max-width: 600px) {
  html[data-ground="light"] .perf-band { height: 110px; margin-bottom: var(--space-10); }
}
/* On a stacked window the band is the streaks alone. */
@media (max-width: 1024px) {
  html[data-ground="light"] .perf-ribbon { display: none; }
}

/* From 600px to the 1079px the menu button takes over at, the sheet is a panel
   down the right edge rather than the whole screen, as chrome.css draws it. */
@media (min-width: 600px) and (max-width: 1079px) {
  html[data-ground="light"] .mobile-menu {
    left: auto;
    width: 400px;
    border-left: 1px solid var(--color-border);
    box-shadow: var(--shadow-lg);
  }
}


/* ---- the Integrations menu ----
   chrome.css carries the same rules for the other pages. The panel is the app's
   light surface, one hairline and the soft shadow, under its button, hidden
   until the menu is open. */
html[data-ground="light"] .visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
html[data-ground="light"] .nav-links > li.nav-menu { position: relative; }
html[data-ground="light"] .nav-menu-button {
  display: flex; align-items: center; gap: 4px;
  padding: 8px 0; border: 0; background: none; cursor: pointer;
  font: inherit; font-size: var(--text-sm); font-weight: var(--font-medium); line-height: 1.65;
  color: var(--color-text);
}
html[data-ground="light"] .nav-chevron { transition: transform var(--duration-fast) ease; }
html[data-ground="light"] .nav-menu.open .nav-chevron { transform: rotate(180deg); }
html[data-ground="light"] .nav-external { display: inline-block; vertical-align: 0; margin-left: 3px; opacity: 0.6; }
html[data-ground="light"] .nav-menu-panel {
  display: none;
  position: absolute; top: calc(100% + 8px); left: -16px; z-index: 10;
  width: 320px; padding: 6px;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}
html[data-ground="light"] .nav-menu-panel::before { content: ''; position: absolute; left: 0; right: 0; top: -10px; height: 10px; }
html[data-ground="light"] .nav-menu.open .nav-menu-panel { display: grid; gap: 2px; }
html[data-ground="light"] .nav-menu-item {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 10px 12px; border-radius: 8px;
  color: var(--color-text); text-decoration: none;
}
html[data-ground="light"] .nav-menu-item:hover, html[data-ground="light"] .nav-menu-item:focus-visible { background: var(--paper-band); }
html[data-ground="light"] .nav-menu-item:focus-visible { outline: 2px solid var(--color-accent); outline-offset: -2px; }
html[data-ground="light"] .nav-menu-icon { flex: none; margin-top: 1px; color: var(--color-accent); }
html[data-ground="light"] .nav-menu-item b { display: block; font-size: var(--text-sm); font-weight: var(--font-semibold); line-height: 1.4; }
html[data-ground="light"] .nav-menu-item b + span { display: block; font-size: 0.8rem; line-height: 1.45; color: var(--color-text-muted); }
html[data-ground="light"] .nav-menu-item[aria-current="page"] b { color: var(--color-accent); }
html[data-ground="light"] .mobile-menu-label {
  margin-top: var(--space-2);
  padding: var(--space-2) var(--space-4) 0;
  font-size: 0.8rem; font-weight: var(--font-semibold); color: var(--color-text-muted);
  opacity: 1; transform: none; animation: none;
}
html[data-ground="light"] .mobile-menu-body a.mobile-sub { padding-left: var(--space-8); }


/* ---- stages 1 and 2: the stage happening ----
   One card each in the app's light style, the card the stage visual already is:
   white, one hairline, the soft shadow. Nothing boxed inside it, sentence case,
   tabular figures. The page's script sets .sp-pending only where motion is
   welcome; without it every part shows as it ends. */
html[data-ground="light"] .snap-visual.sp-card {
  display: flex; flex-direction: column; justify-content: center;
  min-height: 259px; padding: 18px 20px;
  font-size: 12.5px; color: var(--color-text); font-variant-numeric: tabular-nums;
}
html[data-ground="light"] .sp-card b { font-weight: 600; }

/* Ingest */
html[data-ground="light"] .sp-file { display: flex; align-items: center; gap: 8px; }
html[data-ground="light"] .sp-file svg { flex: none; color: var(--color-text-muted); }
html[data-ground="light"] .sp-file b { font-size: 13px; }
html[data-ground="light"] .sp-file span { margin-left: auto; color: var(--color-text-muted); }
html[data-ground="light"] .sp-bar { height: 6px; margin: 12px 0 7px; border-radius: 3px; background: #E8EAEF; overflow: hidden; }
html[data-ground="light"] .sp-bar-fill { display: block; height: 100%; background: #2563EB; transform-origin: left center; }
html[data-ground="light"] .sp-stats { display: flex; justify-content: space-between; color: var(--color-text-muted); }
html[data-ground="light"] .sp-stats b { color: var(--color-text); }
html[data-ground="light"] .sp-maps { display: flex; flex-wrap: wrap; gap: 6px 12px; margin: 14px 0 10px; }
html[data-ground="light"] .sp-map { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; }
html[data-ground="light"] .sp-map svg { color: #047253; }
html[data-ground="light"] .sp-result { display: flex; justify-content: space-between; padding: 7px 0; border-top: 1px solid var(--color-border); }
html[data-ground="light"] .sp-result span { color: var(--color-text-muted); }

/* Configure */
html[data-ground="light"] .sp-brand { display: flex; align-items: center; gap: 12px; }
html[data-ground="light"] .sp-logo {
  display: grid; place-items: center; flex: none; width: 38px; height: 38px; border-radius: 9px;
  background: linear-gradient(135deg, #F59E0B, #EA580C); color: #FFFFFF; font-weight: 800; font-size: 17px;
}
html[data-ground="light"] .sp-brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
html[data-ground="light"] .sp-brand-text b { font-size: 14px; }
html[data-ground="light"] .sp-brand-text > span { display: flex; align-items: center; gap: 8px; color: var(--color-text-muted); font-size: 12px; }
html[data-ground="light"] .sp-dkim { display: inline-flex; align-items: center; gap: 3px; font-style: normal; color: #047253; font-weight: 600; }
html[data-ground="light"] .sp-swatches { display: flex; gap: 4px; margin-left: auto; }
html[data-ground="light"] .sp-swatches i { width: 14px; height: 14px; border-radius: 4px; }
html[data-ground="light"] .sp-swatches i:nth-child(1) { background: #F59E0B; }
html[data-ground="light"] .sp-swatches i:nth-child(2) { background: #1E3A5F; }
html[data-ground="light"] .sp-swatches i:nth-child(3) { background: #FDE68A; }
html[data-ground="light"] .sp-flow { display: flex; align-items: center; gap: 8px; font-size: 12.5px; }
/* Configure's three parts spread down the card: the brand, its workflow and its
   split across ESPs. */
html[data-ground="light"] .snap-visual.sp-configure { justify-content: space-between; padding-top: 28px; padding-bottom: 28px; }
html[data-ground="light"] .sp-flow span { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
html[data-ground="light"] .sp-flow span::before { content: ''; width: 7px; height: 7px; border-radius: 50%; border: 1.5px solid #2563EB; background: #FFFFFF; }
html[data-ground="light"] .sp-flow i { flex: 1; height: 1.5px; background: #2563EB; opacity: 0.5; transform-origin: left center; }
html[data-ground="light"] .sp-split-bar { display: flex; height: 10px; gap: 2px; border-radius: 4px; overflow: hidden; background: #E8EAEF; }
html[data-ground="light"] .sp-split-bar i { display: block; height: 100%; }
html[data-ground="light"] .sp-split-a { flex: 0 0 60%; background: #2563EB; }
html[data-ground="light"] .sp-split-b { flex: 1 1 auto; background: #8B8FF6; }
html[data-ground="light"] .sp-split-legend { display: flex; justify-content: space-between; margin-top: 7px; color: var(--color-text-muted); font-size: 12px; }
html[data-ground="light"] .sp-split-legend span { display: inline-flex; align-items: center; gap: 5px; }
html[data-ground="light"] .sp-split-legend i { width: 7px; height: 7px; border-radius: 2px; background: #2563EB; }
html[data-ground="light"] .sp-split-legend span + span i { background: #8B8FF6; }

/* Playing, set and lifted by the page's script. */
html[data-ground="light"] .sp-pending .sp-bar-fill { transform: scaleX(0); }
html[data-ground="light"] .sp-pending .sp-map,
html[data-ground="light"] .sp-pending .sp-result { opacity: 0; transform: translateY(4px); transition: opacity 260ms ease, transform 260ms ease; }
html[data-ground="light"] .sp-pending .sp-map.on,
html[data-ground="light"] .sp-pending .sp-result.on { opacity: 1; transform: none; }
html[data-ground="light"] .sp-pending .sp-brand > *,
html[data-ground="light"] .sp-pending .sp-flow > *,
html[data-ground="light"] .sp-pending .sp-split { opacity: 0; transition: opacity 300ms ease, transform 300ms ease; }
html[data-ground="light"] .sp-pending .sp-brand > * { transform: translateY(4px); }
html[data-ground="light"] .sp-pending.sp-brand-on .sp-brand > * { opacity: 1; transform: none; }
html[data-ground="light"] .sp-pending.sp-brand-on .sp-brand > :nth-child(2) { transition-delay: 120ms; }
html[data-ground="light"] .sp-pending.sp-brand-on .sp-brand > :nth-child(3) { transition-delay: 260ms; }
html[data-ground="light"] .sp-pending .sp-flow i { transform: scaleX(0); }
html[data-ground="light"] .sp-pending.sp-flow-on .sp-flow > * { opacity: 1; }
html[data-ground="light"] .sp-pending.sp-flow-on .sp-flow i { opacity: 0.5; transform: none; }
html[data-ground="light"] .sp-pending.sp-flow-on .sp-flow > :nth-child(2) { transition-delay: 150ms; }
html[data-ground="light"] .sp-pending.sp-flow-on .sp-flow > :nth-child(3) { transition-delay: 300ms; }
html[data-ground="light"] .sp-pending.sp-flow-on .sp-flow > :nth-child(4) { transition-delay: 450ms; }
html[data-ground="light"] .sp-pending.sp-flow-on .sp-flow > :nth-child(5) { transition-delay: 600ms; }
html[data-ground="light"] .sp-pending .sp-split-a { flex-basis: 50%; transition: flex-basis 900ms cubic-bezier(.2, .7, .3, 1); }
html[data-ground="light"] .sp-pending.sp-split-on .sp-split { opacity: 1; }
html[data-ground="light"] .sp-pending.sp-split-on .sp-split-a { flex-basis: 60%; transition-delay: 200ms; }


/* ---- the closing card: last night ----
   The app-light card: one hairline, the soft shadow, sentence case, nothing
   boxed inside. The volume is the page's close blues and violet, stacked by
   ESP; the three moments Postlever acted on its own sit on its top edge with a
   short label above. The page's script sets .nt-pending only where motion is
   welcome; without it the night is shown finished. */
html[data-ground="light"] .nt-card { font-variant-numeric: tabular-nums; color: var(--color-text); }
html[data-ground="light"] .nt-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
html[data-ground="light"] .nt-title { font-size: 0.85rem; color: var(--color-text-muted); }
html[data-ground="light"] .nt-status { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8rem; font-weight: 600; }
html[data-ground="light"] .nt-status i { width: 7px; height: 7px; border-radius: 50%; background: #16A34A; }
html[data-ground="light"] .nt-figs { display: flex; gap: 40px; margin: 14px 0 6px; }
html[data-ground="light"] .nt-fig { display: flex; align-items: baseline; gap: 7px; }
html[data-ground="light"] .nt-fig b {
  font-family: var(--font-heading); font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: var(--font-extrabold);
  line-height: 1; letter-spacing: var(--tracking-tight);
}
html[data-ground="light"] .nt-fig span { font-size: 0.85rem; color: var(--color-text-muted); }
/* The chart: a column of y labels and the plot, a faint grid at 0, 50k and
   100k a quarter-hour on a scale to 125k, which leaves room above the columns
   for the chips. */
html[data-ground="light"] .nt-chart { position: relative; height: 150px; margin-top: 10px; padding-top: 18px; padding-left: 34px; }
html[data-ground="light"] .nt-y {
  position: absolute; left: 0; top: 18px; bottom: 0; width: 28px;
  font-size: 0.66rem; color: var(--color-text-muted); text-align: right;
}
html[data-ground="light"] .nt-y span { position: absolute; right: 0; transform: translateY(-50%); line-height: 1; }
html[data-ground="light"] .nt-y span:nth-child(1) { top: 20%; }
html[data-ground="light"] .nt-y span:nth-child(2) { top: 60%; }
html[data-ground="light"] .nt-y span:nth-child(3) { top: 100%; }
html[data-ground="light"] .nt-unit { position: absolute; left: 0; top: 0; font-size: 0.66rem; color: var(--color-text-muted); }
html[data-ground="light"] .nt-bars { position: relative; height: 100%; }
html[data-ground="light"] .nt-plot { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; }
html[data-ground="light"] .nt-grid { stroke: var(--color-border); stroke-width: 1; vector-effect: non-scaling-stroke; }
html[data-ground="light"] .nt-bar--0 { fill: #2563EB; }
html[data-ground="light"] .nt-bar--1 { fill: #4A7FF1; }
html[data-ground="light"] .nt-bar--2 { fill: #8B8FF6; }
html[data-ground="light"] .nt-bar--3 { fill: #C4C6FA; }
html[data-ground="light"] .nt-col { transform-box: fill-box; transform-origin: 50% 100%; }
/* Each moment: a dashed rule from the axis to just above its column, and a
   short chip on top of it, to the left or the right. */
html[data-ground="light"] .nt-event { position: absolute; left: var(--x); top: var(--top); bottom: 0; width: 0; }
html[data-ground="light"] .nt-rule {
  position: absolute; left: -0.5px; top: 0; bottom: 0; width: 0;
  border-left: 1px dashed rgba(10, 14, 25, 0.45);
}
html[data-ground="light"] .nt-chip {
  position: absolute; bottom: 100%; width: max-content;
  padding: 2px 8px; border-radius: 999px;
  background: var(--color-bg); box-shadow: 0 0 0 1px var(--color-border), 0 1px 3px rgba(15, 23, 42, 0.08);
  font-size: 0.7rem; font-weight: 600; line-height: 1.4; color: var(--color-text); white-space: nowrap;
}
html[data-ground="light"] .nt-event--left .nt-chip { right: -1px; }
html[data-ground="light"] .nt-event--right .nt-chip { left: -1px; }
html[data-ground="light"] .nt-axis { position: relative; height: 1.2em; margin: 6px 0 0 34px; font-size: 0.7rem; color: var(--color-text-muted); }
html[data-ground="light"] .nt-axis span { position: absolute; top: 0; }
html[data-ground="light"] .nt-axis span:nth-child(1) { left: 0; }
html[data-ground="light"] .nt-axis span:nth-child(2) { left: 50%; transform: translateX(-50%); }
html[data-ground="light"] .nt-axis span:nth-child(3) { right: 0; }
/* Playing: the columns grow up in order over about two and a half seconds,
   and each moment appears as they reach it. */
html[data-ground="light"] .nt-pending .nt-col { transform: scaleY(0); }
html[data-ground="light"] .nt-pending.nt-play .nt-col {
  transform: none; transition: transform 300ms cubic-bezier(.2, .7, .3, 1) calc(var(--i) * 75ms);
}
html[data-ground="light"] .nt-pending .nt-event { opacity: 0; transition: opacity 300ms ease; }
html[data-ground="light"] .nt-pending .nt-event.on { opacity: 1; }
html[data-ground="light"] .nt-pending .nt-status i { background: #2563EB; }
html[data-ground="light"] .nt-pending.nt-done .nt-status i { background: #16A34A; }


/* ---- the hero's words on a short window ----
   Centred on 46% of the window, but never closer to the top than the nav's
   height plus 40px; the page's stage script sets --hero-half to half the
   block's height. On a short window the gaps inside the block close up a little, so it
   still fits above the window's foot. */
@media (min-width: 1025px) {
  html[data-ground="light"] .ultra-hero-content { top: max(46%, calc(121px + var(--hero-half, 0px))); }
}
@media (min-width: 1025px) and (max-height: 820px) {
  html[data-ground="light"] .ultra-hero-content h1 { margin-bottom: var(--space-6) !important; }
  html[data-ground="light"] .ultra-hero-content .hero-subtitle { margin-bottom: 28px; }
  html[data-ground="light"] .ultra-hero-content .hero-ctas { margin-bottom: 0; }
}

/* Section leads take type.css's shared rule. The navy page coloured them for
   its dark bands, more specifically than that rule, so the muted ink is held
   here. */
html[data-ground="light"] .s-dark .section-lead,
html[data-ground="light"] .s-deep .section-lead { color: var(--color-text-muted); }


/* "See pricing" at the end of the closing call's early-access line, as
   chrome.css draws it on the other pages. */
html[data-ground="light"] .note-link { font-weight: var(--font-semibold); color: var(--color-accent); text-decoration: none; white-space: nowrap; }
html[data-ground="light"] .note-link:hover { color: var(--color-accent-strong); }
html[data-ground="light"] .note-link:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; border-radius: 3px; }
html[data-ground="light"] .note-chevron {
  display: inline-block; width: 0.8em; height: 0.8em; margin-left: 2px; vertical-align: -0.05em;
  fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round;
  transition: transform 160ms ease;
}
html[data-ground="light"] .note-link:hover .note-chevron { transform: translateX(2px); }

/* The monthly volume's sign for no limit, drawn as a stroke at the other figures'
   cap height and sitting on their baseline. Armed, it is not yet drawn; drawn, its
   stroke runs round its loop as its line draws, then a short blue light runs round
   it for good. Reduced motion, or no script, shows it whole and still. */
html[data-ground="light"] .perf-fig--sign svg {
  display: inline-block;
  height: 0.74em;
  width: auto;
  vertical-align: baseline;
  overflow: visible;
}
html[data-ground="light"] .perf-sign-path,
html[data-ground="light"] .perf-sign-light {
  fill: none;
  stroke-width: 10;
  stroke-linecap: round;
  stroke-linejoin: round;
}
html[data-ground="light"] .perf-sign-path { stroke: currentColor; stroke-dasharray: 100; stroke-dashoffset: 0; }
html[data-ground="light"] .perf-sign-light {
  stroke: #2563EB;
  stroke-dasharray: 10 90;
  opacity: 0;
  animation: perfSignRun 7s linear infinite;
}
html[data-ground="light"] .perf-fig--sign.is-armed .perf-sign-path { stroke-dashoffset: 100; }
html[data-ground="light"] .perf-fig--sign.is-drawn .perf-sign-path {
  transition: stroke-dashoffset 1.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
html[data-ground="light"] .perf-fig--sign.is-drawn .perf-sign-light {
  opacity: 1;
  transition: opacity 0.6s ease 1.2s;
}
@keyframes perfSignRun {
  to { stroke-dashoffset: -100; }
}
@media (prefers-reduced-motion: reduce) {
  html[data-ground="light"] .perf-sign-light { display: none; }
}