/* ===============================================================
   The "mark" design – component layer.

   Loaded only when <html data-design="mark">, after components.css.
   Every rule is scoped to that attribute, so the classic design is
   untouched by anything in this file.

   Most of the new design is not here. It arrives through the tokens
   (app/design.py): the deep green of the wordmark as ink, the bright
   green of the mark for done and for the one primary action, the logo's
   off-white as paper, greys that are the ink thinned out, Figtree. The
   classic component stylesheet and the templates read those tokens, so
   they change tone without a rule being written.

   This file holds what tokens cannot express – shape:

   - Surfaces are flat sheets. No border, no shadow; the paper around a
     sheet is what separates it.
   - Round belongs to the logo's stroke: slots, strokes, the active
     marker. Buttons, fields and chips take a modest corner instead.
   - Labels are sentence case at reading size. No capitals, no tracking.
   - The active place in the sidebar is marked with the logo's stroke
     on the guide line its links hang from, not with a filled row.
   =============================================================== */

/* ---------- Type ------------------------------------------------- */

[data-design="mark"] body {
  font-weight: 500;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Headings carry the weight of the wordmark. Templates set size with a
   utility class; weight and tracking are decided here, once. */
[data-design="mark"] h1 { font-weight: 800; letter-spacing: -0.028em; line-height: 1.12; }
[data-design="mark"] h2 { font-weight: 800; letter-spacing: -0.018em; }
[data-design="mark"] h3 { font-weight: 700; letter-spacing: -0.01em; }
[data-design="mark"] strong,
[data-design="mark"] b { font-weight: 700; }
[data-design="mark"] .ui-display,
[data-design="mark"] .ui-h1 { font-weight: 800; letter-spacing: -0.028em; }
[data-design="mark"] .ui-h2 { font-weight: 800; letter-spacing: -0.018em; }
[data-design="mark"] .ui-h3 { font-weight: 700; }
[data-design="mark"] .ui-eyebrow,
[data-design="mark"] .sidebar-section-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-xs);
  font-weight: 600;
}

/* ---------- Focus -------------------------------------------------
   One ring everywhere: the accent, offset from the control. */
[data-design="mark"] :where(a, button, input, select, textarea, summary, [role="button"], [tabindex="0"]):focus-visible {
  outline: 2.5px solid var(--mark-accent);
  outline-offset: 2px;
}

/* ---------- Surfaces ---------------------------------------------- */

[data-design="mark"] .card,
[data-design="mark"] .card-quiet {
  border-color: transparent;
  box-shadow: none;
  border-radius: var(--radius-lg);
}
/* A sheet on a sheet steps down to the well tone instead of drawing a line. */
[data-design="mark"] .card .card,
[data-design="mark"] .card .card-quiet,
[data-design="mark"] .ui-guide-demo .ui-stat,
[data-design="mark"] .card .ui-stat {
  background: var(--color-neutral-50);
}
[data-design="mark"] a.card:hover,
[data-design="mark"] a.card-link:hover,
[data-design="mark"] .card-link:hover {
  border-color: transparent;
  box-shadow: 0 0 0 2px var(--color-border-strong);
  transform: none;
}
[data-design="mark"] .ui-stat,
[data-design="mark"] .ui-table-wrap,
[data-design="mark"] .ui-guide-demo {
  border-color: transparent;
}
[data-design="mark"] a.ui-stat:hover { border-color: transparent; box-shadow: 0 0 0 2px var(--color-border-strong); }

/* ---------- Buttons ------------------------------------------------ */

[data-design="mark"] .btn {
  border-radius: var(--radius-md);
  font-weight: 700;
  padding: 0.5625rem 0.875rem;
  transition: background-color var(--duration-fast) var(--ease-out),
              color var(--duration-fast) var(--ease-out);
}
[data-design="mark"] .btn-primary {
  background: var(--mark-go);
  color: var(--mark-on-go);
  box-shadow: none;
}
[data-design="mark"] .btn-primary:hover {
  background: color-mix(in srgb, var(--mark-go) 86%, var(--color-surface));
  box-shadow: none;
  transform: none;
}
[data-design="mark"] .btn-primary:active { background: var(--mark-go); transform: none; }
[data-design="mark"] .btn-secondary {
  background: var(--mark-well);
  color: var(--color-ink);
  border-color: transparent;
}
[data-design="mark"] .btn-secondary:hover {
  background: var(--color-border-strong);
  border-color: transparent;
}
[data-design="mark"] .btn-ghost { color: var(--color-ink-soft); }
[data-design="mark"] .btn-ghost:hover { background: var(--mark-well); color: var(--color-ink); }
[data-design="mark"] .btn-danger {
  background: transparent;
  color: var(--color-danger-fg);
  border-color: color-mix(in srgb, var(--color-danger-fg) 40%, transparent);
}
[data-design="mark"] .btn-danger:hover { background: var(--color-danger-bg); }
[data-design="mark"] .btn-sm { padding: 0.375rem 0.625rem; font-size: var(--text-xs); }

/* ---------- Fields --------------------------------------------------- */

[data-design="mark"] .field-clean label {
  font-size: var(--text-sm);
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink-soft);
}
[data-design="mark"] .field-clean input,
[data-design="mark"] .field-clean textarea,
[data-design="mark"] .field-clean select {
  padding: 0.6875rem 0.875rem;
  /* background-color, not the shorthand: the shorthand also wiped the
     select's chevron (a background image), so dropdowns looked like
     text boxes. */
  background-color: var(--color-surface);
  border-color: var(--color-border-strong);
  font-weight: 500;
}
[data-design="mark"] .field-clean select { padding-right: 2.25rem; background-position: right 0.875rem center; }
[data-design="mark"] .field-clean input:focus,
[data-design="mark"] .field-clean textarea:focus,
[data-design="mark"] .field-clean select:focus,
[data-design="mark"] .ui-input:focus,
[data-design="mark"] .ui-filter-field select:focus,
[data-design="mark"] .ui-filter-field input:focus {
  border-color: var(--mark-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mark-accent) 22%, transparent);
}
[data-design="mark"] .ui-input,
[data-design="mark"] .ui-filter-field select,
[data-design="mark"] .ui-filter-field input {
  border-color: transparent;
  background-color: var(--color-surface);
  font-weight: 500;
}
/* Fields that sit on a white sheet take the well tone so they stay visible. */
[data-design="mark"] .card .ui-input,
[data-design="mark"] .card .ui-filter-field select,
[data-design="mark"] .card .ui-filter-field input { background-color: var(--mark-well); }

/* ---------- Badges, pills, chips ---------------------------------------
   A modest corner, a heavier label. The tint comes from the tokens. */
[data-design="mark"] .badge,
[data-design="mark"] .ui-pill {
  border-radius: 6px;
  font-weight: 700;
}
[data-design="mark"] .ui-chip {
  border-radius: var(--radius-md);
  border-color: transparent;
  background: var(--mark-go);
  color: var(--mark-on-go);
  font-weight: 700;
}
[data-design="mark"] .ui-tab-count { border-radius: 6px; }

/* ---------- Icon tiles ----------------------------------------------------
   The tinted square goes; the glyph stays, in the accent. */
[data-design="mark"] .tile-icon {
  background: transparent;
  color: var(--mark-accent);
  width: 1.5rem;
  height: 1.5rem;
}
[data-design="mark"] .tile-icon svg { width: 1.375rem; height: 1.375rem; stroke-width: 2.2; }
[data-design="mark"] .tile-icon-lg { width: 2.25rem; height: 2.25rem; }
[data-design="mark"] .tile-icon-lg svg { width: 2rem; height: 2rem; stroke-width: 2.2; }

/* ---------- Alerts ------------------------------------------------------- */

[data-design="mark"] .alert {
  border-color: transparent;
  border-radius: var(--radius-md);
  font-weight: 500;
}
[data-design="mark"] .alert-title { font-weight: 700; }

/* ---------- The stroke ------------------------------------------------------
   Progress is the logo's line: heavy, round-ended. */
[data-design="mark"] .ui-progress-track { height: 0.625rem; background: var(--mark-well); }
[data-design="mark"] .ui-progress-brand .ui-progress-fill { background: var(--mark-accent); }
/* The bar speaks the stroke's colours, so an amber means the same on a
   bar, a stroke and a chart. */
[data-design="mark"] .ui-progress-ok .ui-progress-fill { background: var(--mark-accent); }
[data-design="mark"] .ui-progress-warn .ui-progress-fill { background: var(--chart-warn); }
[data-design="mark"] .ui-progress-danger .ui-progress-fill { background: var(--chart-bad); }

/* People: initials in ink on the well; the signed-in person's own
   avatar in the top bar is the inverse, so it reads as "you". */
[data-design="mark"] .ui-avatar {
  background: var(--mark-well);
  color: var(--color-ink);
  font-weight: 800;
  letter-spacing: 0;
}

/* Alerts carry the tick slot like the messages after an action. */
[data-design="mark"] .alert .ui-slot { display: block; }
[data-design="mark"] .alert-success .ui-slot-disc { fill: var(--color-ok-fg); }
[data-design="mark"] .alert-success .ui-slot-tick { stroke: var(--color-ok-bg); }
[data-design="mark"] .alert-warning .ui-slot-ring,
[data-design="mark"] .alert-warning .ui-slot-mark { stroke: var(--color-warn-fg); }
[data-design="mark"] .ui-ring {
  background: conic-gradient(var(--mark-accent) calc(var(--pct, 0) * 1%), var(--mark-well) 0);
}
[data-design="mark"] .ui-step,
[data-design="mark"] .ui-step.is-done,
[data-design="mark"] .ui-step.is-current { border-top-width: 4px; border-radius: 2px; }
[data-design="mark"] .ui-step.is-done,
[data-design="mark"] .ui-step.is-current { border-top-color: var(--mark-accent); }
[data-design="mark"] .ui-step.is-done .ui-step-marker {
  background: var(--mark-accent);
  border-color: var(--mark-accent);
  color: var(--mark-on-accent);
}
[data-design="mark"] .ui-step.is-current .ui-step-marker {
  border-color: var(--mark-accent);
  color: var(--color-ink);
  box-shadow: none;
  border-width: 2.5px;
}
[data-design="mark"] .ui-tab[aria-current="page"] { color: var(--color-ink); font-weight: 700; }
[data-design="mark"] .ui-tab[aria-current="page"]::after { height: 3px; border-radius: 99px; background: var(--mark-accent); }

/* ---------- Tables ------------------------------------------------------------ */

[data-design="mark"] .ui-table thead th {
  background: transparent;
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-xs);
  font-weight: 600;
}
[data-design="mark"] .ui-table .is-primary a { font-weight: 700; }
[data-design="mark"] .ui-table tbody td[data-label]::before {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-xs);
}
[data-design="mark"] .ui-page-link { border-radius: var(--radius-sm); font-weight: 600; }
[data-design="mark"] .ui-page-link[aria-current="page"] { background: var(--mark-go); color: var(--mark-on-go); }

/* ---------- Sidebar --------------------------------------------------------------
   The same grouped markup as the classic design. A group is an icon,
   a label and a chevron; its links hang from a guide line and the
   active one is marked on that line. */
/* The rail and the top bar sit on the same paper as the page, so each
   is set off by one hairline. The line is solid where the two meet, at
   the top left, and fades out towards its far end: the rail's towards
   the bottom, the top bar's towards the right. Drawn as a background so
   it stays put while the rail's own content scrolls. */
[data-design="mark"] {
  /* The rule colour: the ink at a quarter strength on the paper. Plainly
     a line, in light and in dark, without becoming a border. */
  --mark-rule: color-mix(in srgb, var(--color-ink) 24%, var(--color-bg));
}
[data-design="mark"] .sidebar-shell {
  border-right: 0;
  background:
    linear-gradient(to bottom, var(--mark-rule) 0, var(--mark-rule) 62%, transparent 100%)
      right top / 1px 100% no-repeat,
    var(--color-bg);
}
[data-design="mark"] .sidebar-group { margin-top: 1px; }
[data-design="mark"] .sidebar-group-header {
  padding: 0.5rem 0.625rem;
  font-size: 0.90625rem;
  font-weight: 600;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-ink-soft);
}
[data-design="mark"] .sidebar-group-header:hover { background: var(--mark-well); }
[data-design="mark"] .sidebar-group-header[aria-expanded="true"] { color: var(--color-ink); font-weight: 700; }
[data-design="mark"] .sidebar-group-header .tile-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: currentColor;
}
[data-design="mark"] .sidebar-group-header .tile-icon svg { width: 1.0625rem; height: 1.0625rem; stroke-width: 2; }
[data-design="mark"] .sidebar-group-header:hover .tile-icon,
[data-design="mark"] .sidebar-group-header[aria-expanded="true"] .tile-icon { color: currentColor; }
[data-design="mark"] .sidebar-group-header .chevron { color: var(--mark-faint); }
[data-design="mark"] .sidebar-group-header[aria-expanded="true"] .chevron { color: var(--color-muted); }

[data-design="mark"] .sidebar-group-body { padding-left: 0; margin-top: 0; }
[data-design="mark"] .sidebar-group-body > div {
  margin: 2px 0 6px 1.125rem;
  padding-left: 0.8125rem;
  border-left: 2px solid var(--mark-line);
  gap: 0;
  /* The active marker sits on the guide line, outside the link's own
     box, so this element must not clip. The collapse still works: the
     row can shrink to nothing (min-height) and the body clips instead. */
  overflow: visible;
  min-height: 0;
}
[data-design="mark"] .sidebar-group-body { overflow: hidden; }

[data-design="mark"] .sidebar-link {
  padding: 0.375rem 0.625rem;
  font-weight: 600;
  color: var(--color-muted);
}
[data-design="mark"] .sidebar-link::before {
  left: calc(-0.8125rem - 3px);
  width: 4px;
  height: 1.125rem;
  border-radius: 99px;
  background: transparent;
  transform: translateY(-50%);
}
[data-design="mark"] .sidebar-link:hover { background: var(--mark-well); color: var(--color-ink); }
[data-design="mark"] .sidebar-link:hover::before { background: transparent; }
[data-design="mark"] .sidebar-link[aria-current="page"] {
  background: transparent;
  color: var(--color-ink);
  font-weight: 700;
}
[data-design="mark"] .sidebar-link[aria-current="page"]::before {
  background: var(--mark-accent);
  transform: translateY(-50%);
}

/* Top-level link (Dashboard): same row as a group header, marked at
   the edge of the rail when active. */
[data-design="mark"] .sidebar-shell > nav > .sidebar-link {
  padding: 0.5rem 0.625rem;
  gap: 0.6rem;
  font-size: 0.90625rem;
  font-weight: 600;
  color: var(--color-ink-soft);
  margin-bottom: 1px;
}
[data-design="mark"] .sidebar-shell > nav > .sidebar-link::before {
  display: block;
  left: -0.4375rem;
}
[data-design="mark"] .sidebar-shell > nav > .sidebar-link .tile-icon {
  width: 1.125rem;
  height: 1.125rem;
  color: currentColor;
  background: transparent;
}
[data-design="mark"] .sidebar-shell > nav > .sidebar-link .tile-icon svg { width: 1.0625rem; height: 1.0625rem; stroke-width: 2; }
[data-design="mark"] .sidebar-shell > nav > .sidebar-link[aria-current="page"] {
  background: transparent;
  color: var(--color-ink);
  font-weight: 700;
}
[data-design="mark"] .sidebar-shell > nav > .sidebar-link[aria-current="page"] .tile-icon {
  background: transparent;
  color: currentColor;
}

/* ---------- Top bar ------------------------------------------------------------------ */

[data-design="mark"] .topbar-shell {
  border-bottom: 0;
  backdrop-filter: none;
  background:
    linear-gradient(to right, var(--mark-rule) 0, var(--mark-rule) 58%, transparent 100%)
      left bottom / 100% 1px no-repeat,
    var(--color-bg);
}
[data-design="mark"] .topbar-input {
  background: var(--color-surface);
  border-radius: var(--radius-md);
}
[data-design="mark"] .topbar-input:hover { background: var(--color-surface); }
[data-design="mark"] .topbar-input:focus-within {
  border-color: var(--mark-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mark-accent) 22%, transparent);
}

/* ---------- Page header ------------------------------------------------------------------ */

[data-design="mark"] .page-header { border-bottom-color: transparent; padding-bottom: 0; }
[data-design="mark"] .page-header h1 { font-size: var(--text-3xl); }

/* ---------- Menus ---------------------------------------------------------------------------- */

[data-design="mark"] .menu-item { border-radius: var(--radius-sm); font-weight: 600; }
[data-design="mark"] .menu-item:hover { background: var(--mark-well); }
[data-design="mark"] .menu-item.is-current { background: var(--mark-well); font-weight: 700; }

/* ---------- Shell, second pass (UI-B) ------------------------------------------------------- */

/* Working inside a client: where you are, said plainly. Context, not a
   warning, so it sits on the well rather than in the warning colour. */
[data-design="mark"] .client-view-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-4);
  padding: 0.5rem var(--space-6);
  background: var(--mark-well);
  color: var(--color-ink-soft);
  font-size: var(--text-sm);
}
[data-design="mark"] .client-view-strip strong { font-weight: 700; color: var(--color-ink); }
@media (max-width: 767px) {
  [data-design="mark"] .client-view-strip { padding: 0.5rem var(--space-4); }
}

/* Top bar: chips and menus as quiet sheets; nothing slides or fades. */
[data-design="mark"] .topbar-summary { transition: none; }
[data-design="mark"] .topbar-summary:hover { background: var(--mark-well); }
[data-design="mark"] .topbar-chip {
  border-color: transparent;
  border-radius: var(--radius-md);
  transition: none;
}
[data-design="mark"] .topbar-chip-active { background: var(--mark-well); border-color: transparent; }
[data-design="mark"] .topbar-chip-active:hover { background: var(--color-border-strong); }
[data-design="mark"] .topbar-chip-parent:hover { background: var(--mark-well); border-color: transparent; }
[data-design="mark"] .topbar-menu {
  padding: 0.375rem;
  border: 0;
  border-radius: var(--radius-lg);
  background: var(--color-surface);
  box-shadow: 0 0 0 1px var(--color-border), 0 18px 40px rgba(2, 30, 20, 0.16);
}
[data-design="mark"] .menu-item { transition: none; }
[data-design="mark"] .menu-section-label {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-xs);
  font-weight: 700;
}
/* The language code is a word in the bar, not a monospaced tag. */
[data-design="mark"] .topbar-lang-code {
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: 700;
  letter-spacing: 0;
  color: var(--color-ink);
}

/* The account menu: who is signed in, profile, sign out. */
[data-design="mark"] .topbar-account > summary { padding: 0.25rem 0.375rem; }
[data-design="mark"] .topbar-account .ui-avatar {
  width: 2rem;
  height: 2rem;
  background: var(--mark-ink);
  color: var(--mark-paper);
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0;
}
[data-design="mark"] .topbar-account-who {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  min-width: 0;
  padding: 0.5rem 0.75rem 0.375rem;
}
[data-design="mark"] .topbar-account-who strong,
[data-design="mark"] .topbar-account-who span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
[data-design="mark"] .topbar-account-who strong { font-weight: 800; color: var(--color-ink); }
[data-design="mark"] .topbar-account-who span { font-size: var(--text-xs); color: var(--color-muted); }

/* Sidebar groups open and close on a caret in the logo's stroke: on
   its side while closed, pointing down while open. */
[data-design="mark"] .sidebar-group-header .chevron { display: inline-flex; transition: none; }
[data-design="mark"] .nav-caret {
  display: block;
  width: 0.875rem;
  height: 0.875rem;
  fill: none;
  stroke: currentColor;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transform: rotate(90deg);
}

/* Messages after an action: what kind each is, said by its glyph and
   its tint; the person closes it. */
[data-design="mark"] .flash-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  margin-bottom: var(--space-5);
}
[data-design="mark"] .flash {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.5rem 0.5rem 0.5rem 0.875rem;
  border-radius: var(--radius-md);
  color: var(--color-ink);
  font-size: var(--text-sm);
  font-weight: 600;
}
[data-design="mark"] .flash-ok { background: var(--color-ok-bg); }
[data-design="mark"] .flash-warn { background: var(--color-warn-bg); }
[data-design="mark"] .flash-bad { background: var(--color-danger-bg); }
[data-design="mark"] .flash .ui-slot { display: block; }
[data-design="mark"] .flash-ok .ui-slot-disc { fill: var(--color-ok-fg); }
[data-design="mark"] .flash-ok .ui-slot-tick { stroke: var(--color-ok-bg); }
[data-design="mark"] .flash-warn .ui-slot-ring,
[data-design="mark"] .flash-warn .ui-slot-mark { stroke: var(--color-warn-fg); }
[data-design="mark"] .flash-close {
  display: inline-flex;
  padding: 0.375rem;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--color-muted);
  cursor: pointer;
}
[data-design="mark"] .flash-close:hover {
  background: color-mix(in srgb, var(--color-ink) 8%, transparent);
  color: var(--color-ink);
}

/* Billing and legal notices: the same flat tinted strip. */
[data-design="mark"] .app-banner {
  border: 0;
  border-radius: var(--radius-md);
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
}
[data-design="mark"] .app-banner a { color: inherit; font-weight: 700; }

/* Page opening: a quiet trail, the title in the wordmark's weight, and
   the page's one sentence about what matters on it now. */
[data-design="mark"] .page-header h1 { letter-spacing: -0.03em; line-height: 1.08; }
[data-design="mark"] .page-header .breadcrumb,
[data-design="mark"] .breadcrumb-trail {
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}
[data-design="mark"] .breadcrumb-current { font-weight: 700; color: var(--color-ink-soft); }
[data-design="mark"] .breadcrumb-trail a:hover,
[data-design="mark"] .page-header .breadcrumb a:hover { color: var(--color-ink); }
[data-design="mark"] .page-header-lede {
  max-width: 40rem;
  margin: var(--space-2) 0 0;
  font-size: 1.0625rem;
  line-height: 1.45;
  color: var(--color-ink-soft);
}

/* ===============================================================
   Charts.

   Colour does one job per chart. State (good, watch, bad) is a fixed
   set that never follows a client's brand colour, staggered in
   lightness so the three stay apart for readers who cannot tell red
   from green; every chart that uses it also prints the label.
   Severity is one hue stepped light to dark. States nobody judges
   (draft, in review, retired) are quiet greys, kept clear of the greens. Each set has its
   own steps for the dark sheet. Charts read these through --mark
   (see the Charts section of components.css).
   =============================================================== */

[data-design="mark"] {
  --chart-good: #0B8F45;
  --chart-warn: #EDB12A;
  --chart-bad: #A3271C;
  --chart-sev-1: #E9A294;
  --chart-sev-2: #D96A58;
  --chart-sev-3: #B4301F;
  --chart-sev-4: #74190F;
  --chart-sev-1-on: #2A0B06;
  --chart-sev-2-on: #2A0B06;
  --chart-sev-3-on: #FFFFFF;
  --chart-sev-4-on: #FFFFFF;
  --chart-quiet-1: #C6D0CB;
  --chart-quiet-2: #8A9993;
  --chart-quiet-3: #3B4A45;
  --chart-line: var(--mark-accent);
  --chart-gap: var(--color-surface);
  --chart-grid: var(--mark-line);
  --chart-axis: var(--color-border-strong);
  /* Which series, when there are several (UI-3a): the same four
     steps as the classic design, checked on both sheets. */
  --chart-cat-1: #2a78d6;
  --chart-cat-2: #eb6834;
  --chart-cat-3: #1baf7a;
  --chart-cat-4: #6250d6;
}
[data-design="mark"][data-theme="dark"] {
  --chart-good: #25C06E;
  --chart-warn: #F8D88F;
  --chart-bad: #C8463A;
  --chart-sev-1: #8E382F;
  --chart-sev-2: #B94A3D;
  --chart-sev-3: #E5695B;
  --chart-sev-4: #FFA395;
  --chart-sev-1-on: #FFFFFF;
  --chart-sev-2-on: #FFFFFF;
  --chart-sev-3-on: #05140F;
  --chart-sev-4-on: #05140F;
  --chart-quiet-1: #44564F;
  --chart-quiet-2: #7F918A;
  --chart-quiet-3: #D3DDD8;
  --chart-cat-1: #3987e5;
  --chart-cat-2: #d95926;
  --chart-cat-3: #199e70;
  --chart-cat-4: #9085e9;
}

/* Heat-map: a cell that holds risks is filled with its band; an empty
   cell keeps only a wash of it, so the eye lands on where the risks
   are. */
[data-design="mark"] .heat-low     { --heat: var(--chart-sev-1); --heat-on: var(--chart-sev-1-on); }
[data-design="mark"] .heat-medium  { --heat: var(--chart-sev-2); --heat-on: var(--chart-sev-2-on); }
[data-design="mark"] .heat-high    { --heat: var(--chart-sev-3); --heat-on: var(--chart-sev-3-on); }
[data-design="mark"] .heat-extreme { --heat: var(--chart-sev-4); --heat-on: var(--chart-sev-4-on); }
[data-design="mark"] .heat-cell {
  border-radius: var(--radius-sm);
  background: var(--heat);
  color: var(--heat-on);
  font-size: var(--text-sm);
  font-weight: 800;
}
[data-design="mark"] .heat-cell.is-empty {
  opacity: 1;
  background: color-mix(in srgb, var(--heat) 20%, var(--color-surface));
  color: var(--color-muted);
}

/* ===============================================================
   Dashboard.

   The page opens with what matters said as a sentence, then the
   programmes as strokes beside the short list of things waiting for
   this person. Figures sit in the sentence and beside their stroke,
   not in boxes.
   =============================================================== */

[data-design="mark"] .dash-lead {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-6);
  margin-bottom: var(--space-6);
}
[data-design="mark"] .dash-date {
  margin: 0 0 var(--space-2);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}
[data-design="mark"] .dash-say {
  margin: 0;
  max-width: 21em;
  font-size: clamp(1.625rem, 2.4vw, 2.125rem);
  line-height: 1.12;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
/* Each sentence wraps as a unit, never mid-phrase. */
[data-design="mark"] .dash-say > span { display: inline-block; }
[data-design="mark"] .dash-sheet h2 { font-weight: 800; letter-spacing: -0.01em; }
[data-design="mark"] .dash-say-good { color: color-mix(in srgb, var(--mark-accent) 78%, var(--mark-ink)); }
[data-design="mark"] .dash-say-bad { color: var(--color-danger-fg); }
[data-design="mark"] .dash-say-dim { color: var(--color-muted); }
@media (max-width: 767px) {
  [data-design="mark"] .dash-lead { flex-direction: column; align-items: flex-start; gap: var(--space-4); }
}

[data-design="mark"] .dash-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
  gap: var(--space-5);
  align-items: start;
  margin-bottom: var(--space-6);
}
[data-design="mark"] .dash-col { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
@media (max-width: 1023px) {
  [data-design="mark"] .dash-grid { grid-template-columns: minmax(0, 1fr); }
}
[data-design="mark"] .dash-sheet { padding: 1.375rem 1.5rem; }
[data-design="mark"] .dash-sheet-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--space-3);
  margin-bottom: var(--space-4);
}
[data-design="mark"] .dash-sheet-head h2 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: 800;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}
[data-design="mark"] .dash-sheet-head a {
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-muted);
  text-decoration: none;
  white-space: nowrap;
}
[data-design="mark"] .dash-sheet-head a:hover { color: var(--color-ink); text-decoration: underline; text-underline-offset: 2px; }
[data-design="mark"] .dash-empty { margin: 0; font-size: var(--text-sm); color: var(--color-muted); }

/* The stroke and the tick slot themselves are shared components now
   (``stroke`` and ``tick_slot`` in partials/_ui.html, styled in the
   component stylesheet). */

[data-design="mark"] .dash-prog {
  display: grid;
  grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr) 6.5rem;
  align-items: center;
  gap: var(--space-4);
  padding: 0.6875rem 0;
}
[data-design="mark"] .dash-prog + .dash-prog,
[data-design="mark"] .dash-item + .dash-item,
[data-design="mark"] .dash-ev + .dash-ev { border-top: 1px solid var(--color-border); }
[data-design="mark"] .dash-prog-name a {
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.25;
  color: var(--color-ink);
  text-decoration: none;
}
[data-design="mark"] .dash-prog-name a:hover { text-decoration: underline; text-underline-offset: 2px; }
[data-design="mark"] .dash-prog small {
  display: block;
  font-size: 0.78125rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--color-muted);
}
[data-design="mark"] .dash-prog-val {
  text-align: right;
  font-size: 1.375rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--color-ink);
}
[data-design="mark"] .dash-prog-val small { margin-top: 0.3125rem; line-height: 1.2; }
[data-design="mark"] .dash-prog-val small.is-bad { color: var(--color-danger-fg); font-weight: 700; }
[data-design="mark"] .dash-prog-val small.is-good { color: var(--color-ok-fg); font-weight: 700; }
@media (max-width: 639px) {
  [data-design="mark"] .dash-prog { grid-template-columns: minmax(0, 1fr) auto; row-gap: var(--space-2); }
  [data-design="mark"] .dash-prog .ui-stroke { grid-column: 1 / -1; order: 3; }
}

[data-design="mark"] .dash-item {
  display: grid;
  grid-template-columns: 1.25rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 0;
  color: inherit;
  text-decoration: none;
}
[data-design="mark"] .dash-item-text { min-width: 0; }
[data-design="mark"] .dash-item b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 0.90625rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--color-ink);
}
[data-design="mark"] .dash-item:hover b { text-decoration: underline; text-underline-offset: 2px; }
[data-design="mark"] .dash-item small { font-size: 0.78125rem; font-weight: 500; color: var(--color-muted); }
[data-design="mark"] .dash-when { font-size: 0.8125rem; font-weight: 600; white-space: nowrap; color: var(--color-muted); }
[data-design="mark"] .dash-when.is-late { font-weight: 700; color: var(--color-danger-fg); }

[data-design="mark"] .dash-item .ui-slot { display: block; }

[data-design="mark"] .dash-ev {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6rem 3rem;
  align-items: center;
  gap: var(--space-4);
  padding: 0.5625rem 0;
}
[data-design="mark"] .dash-ev-label { font-size: var(--text-sm); font-weight: 700; color: var(--color-ink); }
[data-design="mark"] .dash-ev-val { text-align: right; font-size: var(--text-base); font-weight: 800; color: var(--color-ink); }
[data-design="mark"] .dash-ev-val.is-bad { color: var(--color-danger-fg); }

/* Small labels above figures read as words, not as shouted captions. */
[data-design="mark"] .text-xs.uppercase.tracking-wide {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
}

/* ---------- Page roll-out, round 1 (UI-E) ---------------------------------------------------- */

/* Small labels in capitals with wide tracking are a classic habit; the
   new design writes them in sentence case. Form fields that use
   capitals to shape what is typed (codes, country codes) keep them. */
[data-design="mark"] .uppercase:not(input):not(textarea):not(select) { text-transform: none; }
[data-design="mark"] .uppercase:not(input):not(textarea):not(select)[class*="tracking-"] { letter-spacing: 0; }

/* The risk heat-map page, as on the dashboard: a cell that holds risks
   is filled with its band, an empty one keeps only a wash, so the eye
   lands on where the risks are; the risk chips sit on white. */
[data-design="mark"] .heatmap-band-low     { --heat: var(--chart-sev-1); --heat-on: var(--chart-sev-1-on); }
[data-design="mark"] .heatmap-band-medium  { --heat: var(--chart-sev-2); --heat-on: var(--chart-sev-2-on); }
[data-design="mark"] .heatmap-band-high    { --heat: var(--chart-sev-3); --heat-on: var(--chart-sev-3-on); }
[data-design="mark"] .heatmap-band-extreme { --heat: var(--chart-sev-4); --heat-on: var(--chart-sev-4-on); }
[data-design="mark"] .heatmap-cell { border-radius: var(--radius-sm); background: var(--heat); }
[data-design="mark"] .heatmap-cell-meta { color: var(--heat-on); font-weight: 700; }
[data-design="mark"] .heatmap-cell.is-empty { background: color-mix(in srgb, var(--heat) 20%, var(--color-surface)); }
[data-design="mark"] .heatmap-cell.is-empty .heatmap-cell-meta { color: var(--color-muted); font-weight: 600; }
[data-design="mark"] .heatmap-swatch { background: var(--heat); }
/* Compliance by domain: the stacked bar on the chart colours, a thin
   gap of sheet between segments, the logo's round ends. */
[data-design="mark"] .stacked-bar { height: 0.625rem; border-radius: var(--radius-pill); gap: 0; }
[data-design="mark"] .stacked-bar .seg + .seg { box-shadow: inset 2px 0 0 var(--color-surface); }
[data-design="mark"] .seg-implemented,   [data-design="mark"] .swatch-implemented   { background: var(--chart-good); }
[data-design="mark"] .seg-in_progress,   [data-design="mark"] .swatch-in_progress   { background: var(--chart-quiet-3); }
[data-design="mark"] .seg-at_risk,       [data-design="mark"] .swatch-at_risk       { background: var(--chart-warn); }
[data-design="mark"] .seg-non_compliant, [data-design="mark"] .swatch-non_compliant { background: var(--chart-bad); }
[data-design="mark"] .seg-not_started,   [data-design="mark"] .swatch-not_started   { background: var(--chart-quiet-1); border: 0; }
[data-design="mark"] .seg-empty { background: var(--mark-well); }
/* Policy acknowledgement coverage: acknowledged is the good part,
   lapsed acknowledgements are the warning, and the people still to
   acknowledge are the unfilled rest of the bar. */
[data-design="mark"] .seg-acked,   [data-design="mark"] .swatch-acked   { background: var(--chart-good); }
[data-design="mark"] .seg-expired, [data-design="mark"] .swatch-expired { background: var(--chart-warn); }
[data-design="mark"] .seg-pending, [data-design="mark"] .swatch-pending { background: var(--chart-quiet-1); }
[data-design="mark"] .swatch-pending { box-shadow: inset 0 0 0 1px var(--color-border-strong); }
[data-design="mark"] .stacked-bar-thin { height: 0.375rem; }
[data-design="mark"] .cov-legend { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
[data-design="mark"] .cov-legend-item { display: inline-flex; align-items: baseline; gap: 0.5rem; }
[data-design="mark"] .cov-legend-item .swatch { align-self: center; }
[data-design="mark"] .cov-legend-num { font-size: 1.5rem; font-weight: 800; color: var(--color-ink); font-variant-numeric: tabular-nums; }
[data-design="mark"] .cov-legend-label { font-size: 0.8125rem; color: var(--color-muted); }
/* No entrance motion in the new design (owner, 2026-10-13: no
   animations). Table rows, alerts and flash messages appear in place;
   the pulsing dot is still. Loading spinners and skeletons stay: they
   show work in progress, not decoration. */
[data-design="mark"] tbody tr,
[data-design="mark"] [role="status"] > .card-quiet,
[data-design="mark"] [role="status"] > .alert,
[data-design="mark"] .alert-success,
[data-design="mark"] .dashboard-hero-pulse { animation: none; }
/* Ask Atitic: messages appear in place; the role and list labels drop
   the classic design's uppercase. */
[data-design="mark"] .chat-msg { animation: none; }
[data-design="mark"] .chat-msg-role,
[data-design="mark"] .chat-conv-list-header { text-transform: none; letter-spacing: 0; font-size: var(--text-xs); }
/* Due dates (``due_date`` macro): the slot and the words carry the state. */
[data-design="mark"] .ui-due { display: inline-flex; align-items: center; gap: 0.375rem; color: var(--color-muted); font-variant-numeric: tabular-nums; }
[data-design="mark"] .ui-due.is-late { color: var(--color-danger-fg); font-weight: 600; }
/* Magnitudes on a four-step scale (``level_chip``): the heat map's ramp. */
[data-design="mark"] .ui-level {
  display: inline-flex; align-items: center; gap: 0.375rem;
  padding: 0.125rem 0.5rem; border-radius: 6px;
  font-size: 0.75rem; font-weight: 700; line-height: 1.4; white-space: nowrap;
  background: var(--lv); color: var(--lv-on);
}
[data-design="mark"] .ui-level-1 { --lv: var(--chart-sev-1); --lv-on: var(--chart-sev-1-on); }
[data-design="mark"] .ui-level-2 { --lv: var(--chart-sev-2); --lv-on: var(--chart-sev-2-on); }
[data-design="mark"] .ui-level-3 { --lv: var(--chart-sev-3); --lv-on: var(--chart-sev-3-on); }
[data-design="mark"] .ui-level-4 { --lv: var(--chart-sev-4); --lv-on: var(--chart-sev-4-on); }
[data-design="mark"] .ui-level-sub { font-weight: 500; opacity: 0.8; font-variant-numeric: tabular-nums; }
/* The policy editor's open draft: a card marked by its accent edge
   instead of the classic design's warning border. */
[data-design="mark"] .policy-draft { box-shadow: inset 3px 0 0 var(--mark-accent, var(--color-brand-500)), var(--shadow-card); }
[data-design="mark"] .domain-stack-name { font-weight: 700; }
[data-design="mark"] .domain-stack-pct { font-weight: 800; }

[data-design="mark"] .heatmap-chip {
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  font-weight: 700;
  transition: none;
}

/* ===============================================================
   Sign-in surface (layouts/auth.html and the pages on it).

   Left pane: the deep green surface with its soft glow and fine grain,
   as in the classic design, in the logo's own greens. Nothing on it
   moves. Right pane: a white sheet with the form.
   =============================================================== */

[data-design="mark"] .auth-hero {
  color: color-mix(in srgb, var(--mark-paper) 92%, transparent);
  background:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--mark-accent) 30%, transparent) 0%, transparent 55%),
    radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--mark-accent) 16%, transparent) 0%, transparent 55%),
    linear-gradient(155deg, var(--mark-ink) 0%, color-mix(in srgb, var(--mark-ink) 62%, #000) 100%);
  padding: var(--space-8) var(--space-10);
}
[data-design="mark"] .auth-hero-glow {
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mark-accent) 38%, transparent) 0%, transparent 70%);
}
[data-design="mark"] .auth-hero-logo {
  border-radius: var(--radius-md);
  box-shadow: none;
}
[data-design="mark"] .auth-hero-wordmark { font-weight: 800; letter-spacing: -0.02em; }
[data-design="mark"] .auth-hero-pitch { max-width: 30rem; }
[data-design="mark"] .auth-hero-headline {
  font-size: clamp(2.25rem, 3.6vw, 3.375rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  max-width: 11em;
}
[data-design="mark"] .auth-hero-headline > span { display: block; }
[data-design="mark"] .auth-hero-tagline {
  color: color-mix(in srgb, var(--mark-paper) 82%, transparent);
  font-size: var(--text-lg);
  line-height: var(--leading-snug);
  max-width: 26rem;
}
[data-design="mark"] .auth-hero-features li {
  color: color-mix(in srgb, var(--mark-paper) 80%, transparent);
  font-weight: 500;
}
[data-design="mark"] .auth-hero-feature-dot { background: var(--mark-accent); }
@media (max-width: 1023px) {
  [data-design="mark"] .auth-hero { padding: var(--space-5) var(--space-6); }
}

/* ---- The form sheet ---- */
[data-design="mark"] .auth-eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}
[data-design="mark"] .auth-form-title { font-weight: 800; letter-spacing: -0.03em; }
[data-design="mark"] .auth-form-sub a,
[data-design="mark"] .auth-aside-line a,
[data-design="mark"] .auth-support a { color: var(--color-ink); font-weight: 700; text-decoration: underline; text-underline-offset: 2px; }
[data-design="mark"] .auth-cta {
  background: var(--mark-go);
  color: var(--mark-on-go);
  font-weight: 700;
  padding: 0.8125rem 1.25rem;
  box-shadow: none;
}
[data-design="mark"] .auth-cta:hover {
  background: color-mix(in srgb, var(--mark-go) 86%, var(--color-surface));
  transform: none;
  box-shadow: none;
}
[data-design="mark"] .auth-cta:active { transform: none; box-shadow: none; }
/* The button says what it does; it needs no arrow after the words. */
[data-design="mark"] .auth-cta svg { display: none; }
[data-design="mark"] .auth-cta-ghost { border-radius: var(--radius-md); font-weight: 700; }
[data-design="mark"] .auth-divider {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-xs);
  font-weight: 600;
}
[data-design="mark"] .sso-pill {
  border-color: transparent;
  background: var(--mark-well);
}
[data-design="mark"] .sso-pill:hover {
  border-color: transparent;
  background: var(--color-border-strong);
  transform: none;
}
[data-design="mark"] .sso-pill-label { font-size: var(--text-xs); font-weight: 600; color: var(--color-ink-soft); letter-spacing: 0; }
[data-design="mark"] .auth-trial-panel,
[data-design="mark"] .auth-info-card { border-color: transparent; }
[data-design="mark"] .auth-trial-panel-heading {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-sm);
  font-weight: 700;
  color: var(--color-ink);
}
[data-design="mark"] .auth-lang-trigger { border-radius: var(--radius-md); font-weight: 600; }
[data-design="mark"] .auth-lang-option.is-active { background: var(--mark-well); color: var(--color-ink); font-weight: 700; }
[data-design="mark"] .auth-legal-links,
[data-design="mark"] .sso-hint { font-size: var(--text-xs); }

/* ---- Cookie notice ---- */
[data-design="mark"] .cookie-banner-title {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-sm);
  font-weight: 700;
}
[data-design="mark"] .cookie-banner-accept {
  background: var(--mark-go);
  color: var(--mark-on-go);
  border-radius: var(--radius-md);
  font-weight: 700;
  box-shadow: none;
}

/* ===============================================================
   Public site (layouts/marketing.html and the pages on it).

   The same language as the product: the paper, white sheets without
   borders, deep green ink, sentence-case labels, headings set left in
   the weight of the wordmark. The landing page opens on the deep
   green textured surface of the sign-in page and every page closes on
   it. Nothing fades, slides or lifts.
   =============================================================== */

[data-design="mark"] .marketing-shell {
  /* The public pages' own colour names, given the design's values. */
  --color-text: var(--color-ink);
  --color-text-muted: var(--color-ink-soft);
  --color-border-subtle: var(--color-border);
  --color-bg-subtle: var(--mark-well);
  --site-rule: color-mix(in srgb, var(--mark-ink) 16%, var(--color-bg));
  /* One left edge for the navigation, every heading and every sheet. */
  --site-col: calc(1200px - 2 * var(--space-4));
  /* The textured green, shared by the hero and the closing block. */
  --site-green:
    radial-gradient(120% 80% at 0% 0%, color-mix(in srgb, var(--mark-accent) 30%, transparent) 0%, transparent 55%),
    radial-gradient(80% 60% at 100% 100%, color-mix(in srgb, var(--mark-accent) 16%, transparent) 0%, transparent 55%),
    linear-gradient(155deg, var(--mark-ink) 0%, color-mix(in srgb, var(--mark-ink) 62%, #000) 100%);
  --site-on-green: color-mix(in srgb, var(--mark-paper) 84%, transparent);
  color: var(--color-ink);
}

/* No motion: sections are simply there. */
[data-design="mark"] .marketing-reveal,
[data-design="mark"] .marketing-scroll-reveal {
  opacity: 1;
  transform: none;
  animation: none;
  transition: none;
  will-change: auto;
}

/* ---------- Navigation ---------- */
[data-design="mark"] .marketing-nav {
  background: color-mix(in srgb, var(--color-bg) 94%, transparent);
  border-bottom: 1px solid var(--site-rule);
}
[data-design="mark"] .marketing-nav-toggle { border-color: transparent; background: var(--mark-well); color: var(--color-ink); }
[data-design="mark"] .marketing-nav[data-open="true"] .marketing-nav-drawer {
  background: var(--color-surface);
  border-top-color: var(--site-rule);
  box-shadow: none;
}
[data-design="mark"] .marketing-links a { color: var(--color-ink-soft); font-weight: 600; transition: none; }
[data-design="mark"] .marketing-links a:hover { color: var(--color-ink); background: var(--mark-well); }
[data-design="mark"] .marketing-links a[aria-current="page"] { color: var(--color-ink); background: var(--mark-well); font-weight: 700; }
[data-design="mark"] .marketing-cta-row { border-top-color: var(--site-rule); }
[data-design="mark"] .marketing-cta-button {
  background: var(--mark-go);
  color: var(--mark-on-go);
  font-weight: 700;
  box-shadow: none;
  transition: none;
}
[data-design="mark"] .marketing-cta-button:hover {
  background: color-mix(in srgb, var(--mark-go) 86%, var(--color-surface));
  transform: none;
}
[data-design="mark"] .marketing-link-button { color: var(--color-ink); font-weight: 700; }
[data-design="mark"] .marketing-link-button:hover { background: var(--mark-well); }
[data-design="mark"] .marketing-lang > summary {
  background: var(--mark-well);
  border-color: transparent;
  border-radius: var(--radius-md);
  color: var(--color-ink-soft);
  font-weight: 600;
}
[data-design="mark"] .marketing-lang > summary:hover,
[data-design="mark"] .marketing-lang[open] > summary { background: var(--color-border-strong); color: var(--color-ink); }
[data-design="mark"] .marketing-lang-menu { background: var(--color-surface); border-color: var(--color-border); box-shadow: var(--shadow-raised); }
[data-design="mark"] .marketing-lang-option:hover { background: var(--mark-well); }
[data-design="mark"] .marketing-lang-option.is-active { background: var(--mark-well); color: var(--color-ink); font-weight: 700; }

/* ---------- Small labels ---------- */
[data-design="mark"] .marketing-eyebrow {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--color-muted);
}
[data-design="mark"] .marketing-page-hero .marketing-eyebrow,
[data-design="mark"] .marketing-section-tinted .marketing-eyebrow { color: var(--color-muted); }

/* ---------- Landing hero ---------- */
[data-design="mark"] .marketing-hero {
  color: #fff;
  background: var(--site-green);
  padding: clamp(3.5rem, 7vw, 6rem) var(--space-4);
}
[data-design="mark"] .marketing-hero-glow {
  inset: -10% auto auto -10%;
  width: 70%;
  height: 70%;
  max-width: none;
  max-height: none;
  background: radial-gradient(closest-side, color-mix(in srgb, var(--mark-accent) 38%, transparent) 0%, transparent 70%);
  filter: blur(40px);
}
[data-design="mark"] .marketing-hero-grain {
  opacity: 1;
  background-image: radial-gradient(rgba(255, 255, 255, 0.06) 1px, transparent 1px);
  background-size: 3px 3px;
  mix-blend-mode: overlay;
}
[data-design="mark"] .marketing-hero-inner {
  max-width: var(--site-col);
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
  gap: clamp(2rem, 5vw, 4.5rem);
  align-items: center;
  text-align: left;
}
[data-design="mark"] .marketing-hero-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-4);
  min-width: 0;
}
[data-design="mark"] .marketing-hero .marketing-eyebrow { color: color-mix(in srgb, var(--mark-accent) 45%, #fff); }
[data-design="mark"] .marketing-hero-headline {
  max-width: 12em;
  font-size: clamp(2.25rem, 4.6vw, 3.75rem);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
}
[data-design="mark"] .marketing-hero-sub {
  max-width: 34rem;
  font-size: 1.0625rem;
  line-height: 1.55;
  color: var(--site-on-green);
}
[data-design="mark"] .marketing-hero-cta { justify-content: flex-start; margin-top: 0; }
[data-design="mark"] .marketing-hero-fineprint { margin: 0; color: color-mix(in srgb, var(--mark-paper) 66%, transparent); }

/* The product itself, still, beside the words: two of its sheets. */
[data-design="mark"] .marketing-hero-shot { min-width: 0; }
[data-design="mark"] .marketing-hero-shot .dash-sheet { box-shadow: 0 24px 48px rgba(0, 0, 0, 0.28); }
[data-design="mark"] .marketing-hero-shot .dash-sheet + .dash-sheet {
  position: relative;
  width: 78%;
  margin: -1.25rem 0 0 auto;
}
[data-design="mark"] .marketing-hero-shot .dash-prog { grid-template-columns: minmax(5rem, 7rem) minmax(0, 1fr) 4rem; }
[data-design="mark"] .marketing-hero-shot .dash-prog-name b { font-size: 0.9375rem; font-weight: 700; color: var(--color-ink); }
[data-design="mark"] .marketing-hero-shot .dash-sheet-head span { font-size: var(--text-sm); font-weight: 700; color: var(--color-muted); }
@media (max-width: 899px) {
  [data-design="mark"] .marketing-hero-inner { grid-template-columns: minmax(0, 1fr); }
  [data-design="mark"] .marketing-hero-shot { display: none; }
}

/* ---------- Buttons ---------- */
[data-design="mark"] .marketing-cta-button-large {
  border: 0;
  background: var(--mark-go);
  color: var(--mark-on-go);
  font-weight: 700;
  box-shadow: none;
  cursor: pointer;
  transition: none;
}
[data-design="mark"] .marketing-cta-button-large:hover {
  background: color-mix(in srgb, var(--mark-go) 86%, var(--color-surface));
  transform: none;
  box-shadow: none;
}
/* The button says what it does; it needs no arrow after the words. */
[data-design="mark"] .marketing-cta-button-large svg { display: none; }
/* On the green, the main button is the white one. */
[data-design="mark"] .marketing-hero .marketing-cta-button-large,
[data-design="mark"] .marketing-section-cta-block .marketing-cta-button-large { background: #fff; color: var(--mark-ink); }
[data-design="mark"] .marketing-hero .marketing-cta-button-large:hover,
[data-design="mark"] .marketing-section-cta-block .marketing-cta-button-large:hover { background: var(--mark-paper); }
[data-design="mark"] .marketing-link-button-large { font-weight: 700; transition: none; }

/* ---------- Page opening on the sub-pages ---------- */
[data-design="mark"] .marketing-page-hero {
  display: grid;
  grid-template-columns: minmax(0, var(--site-col));
  justify-content: center;
  justify-items: start;
  background: transparent;
  border-bottom: 0;
  padding: clamp(2.5rem, 6vw, 4.5rem) var(--space-4) clamp(0.5rem, 2vw, 1.5rem);
  text-align: left;
}
[data-design="mark"] .marketing-page-hero h1 {
  max-width: 17em;
  margin: var(--space-2) 0 var(--space-3);
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 800;
  line-height: 1.04;
  letter-spacing: -0.035em;
  color: var(--color-ink);
}
[data-design="mark"] .marketing-page-hero .marketing-page-lede {
  max-width: 40rem;
  margin: 0;
  font-size: 1.125rem;
  color: var(--color-ink-soft);
}
[data-design="mark"] .marketing-page-hero .marketing-survey-meta { margin: var(--space-3) 0 0; }

/* ---------- Sections ---------- */
[data-design="mark"] .marketing-section-heading { align-items: flex-start; text-align: left; }
[data-design="mark"] .marketing-section-heading h2,
[data-design="mark"] .marketing-story-side h2 {
  font-size: clamp(1.625rem, 3vw, 2.25rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -0.03em;
  color: var(--color-ink);
}
[data-design="mark"] .marketing-section-heading p {
  max-width: 40rem;
  margin: 0;
  font-size: 1.0625rem;
  color: var(--color-ink-soft);
}
[data-design="mark"] .marketing-section-tinted > * { max-width: var(--site-col); }
[data-design="mark"] .marketing-section-cta { text-align: left; }
[data-design="mark"] .marketing-section-cta a,
[data-design="mark"] .marketing-link-arrow {
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: underline;
  text-decoration-color: var(--mark-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 4px;
}

/* ---------- Sheets ---------- */
[data-design="mark"] .marketing-card,
[data-design="mark"] .marketing-card-long,
[data-design="mark"] .marketing-pricing-card,
[data-design="mark"] .marketing-contact-form,
[data-design="mark"] .marketing-survey-lead,
[data-design="mark"] .marketing-survey-section,
[data-design="mark"] .marketing-trial-callout,
[data-design="mark"] .marketing-capability-matrix,
[data-design="mark"] .marketing-legal-toc {
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-lg);
}
[data-design="mark"] .marketing-card,
[data-design="mark"] .marketing-card-long { padding: var(--space-5); transition: none; }
[data-design="mark"] .marketing-card:hover { transform: none; box-shadow: none; }
[data-design="mark"] .marketing-card h3,
[data-design="mark"] .marketing-card-long h3 {
  font-size: 1.125rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--color-ink);
}
[data-design="mark"] .marketing-card p,
[data-design="mark"] .marketing-card-long p { color: var(--color-ink-soft); }
/* The icon stands on the sheet without a tinted tile behind it. */
[data-design="mark"] .marketing-card-icon {
  justify-content: flex-start;
  width: auto;
  height: auto;
  margin-bottom: var(--space-2);
  background: transparent;
  color: var(--mark-accent);
}
[data-design="mark"] .marketing-card-icon svg { width: 1.5rem; height: 1.5rem; }
[data-design="mark"] .marketing-card-long h3 svg,
[data-design="mark"] .marketing-bullet-icon,
[data-design="mark"] .marketing-feature-grid li svg,
[data-design="mark"] .marketing-integration-grid li svg,
[data-design="mark"] .marketing-pricing-card ul li svg,
[data-design="mark"] .marketing-survey-meta svg { color: var(--mark-accent); }
[data-design="mark"] .marketing-feature-grid li,
[data-design="mark"] .marketing-integration-grid li {
  background: var(--color-surface);
  border: 0;
  border-radius: var(--radius-md);
  font-weight: 600;
}
[data-design="mark"] .marketing-integrations-heading {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--text-sm);
  color: var(--color-muted);
}
[data-design="mark"] .marketing-story-points strong { font-weight: 700; color: var(--color-ink); }

/* ---------- Pricing ---------- */
[data-design="mark"] .marketing-trial-callout { padding: var(--space-5); }
[data-design="mark"] .marketing-trial-callout h2 { font-weight: 800; letter-spacing: -0.02em; color: var(--color-ink); }
[data-design="mark"] .marketing-billing-toggle { border: 0; border-radius: var(--radius-md); background: var(--mark-well); }
[data-design="mark"] .marketing-billing-toggle-btn { border-radius: var(--radius-sm); font-weight: 700; transition: none; }
[data-design="mark"] .marketing-billing-toggle-btn:hover { color: var(--color-ink); }
[data-design="mark"] .marketing-billing-toggle-btn.is-active { background: var(--mark-go); color: var(--mark-on-go); }
[data-design="mark"] .marketing-pricing-savings {
  border-radius: var(--radius-sm);
  background: var(--color-ok-bg);
  color: var(--color-ok-fg);
  font-size: var(--text-xs);
  letter-spacing: 0;
  text-transform: none;
}
[data-design="mark"] .marketing-pricing-card { padding: var(--space-5); }
[data-design="mark"] .marketing-pricing-card-featured { transform: none; box-shadow: 0 0 0 2px var(--mark-ink); }
[data-design="mark"] .marketing-pricing-badge {
  border-radius: var(--radius-sm);
  background: var(--mark-ink);
  color: #fff;
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: 0;
  text-transform: none;
}
[data-design="mark"] .marketing-pricing-card header h3 { font-weight: 800; letter-spacing: -0.015em; color: var(--color-ink); }
[data-design="mark"] .marketing-pricing-amount { font-size: 2.25rem; font-weight: 800; letter-spacing: -0.03em; color: var(--color-ink); }
[data-design="mark"] .marketing-pricing-amount span { letter-spacing: 0; }
[data-design="mark"] .marketing-pricing-cta {
  border-color: transparent;
  background: var(--mark-well);
  color: var(--color-ink);
  font-weight: 700;
  transition: none;
}
[data-design="mark"] .marketing-pricing-cta:hover { border-color: transparent; background: var(--color-border-strong); color: var(--color-ink); }
[data-design="mark"] .marketing-pricing-cta-featured,
[data-design="mark"] .marketing-pricing-cta-featured:hover { border-color: transparent; background: var(--mark-go); color: var(--mark-on-go); }
[data-design="mark"] .marketing-pricing-cta-featured:hover { background: color-mix(in srgb, var(--mark-go) 86%, var(--color-surface)); }
[data-design="mark"] .marketing-capability-matrix > summary { background: transparent; font-weight: 700; color: var(--color-ink); }
[data-design="mark"] .marketing-capability-matrix > summary:hover { background: var(--mark-well); }
[data-design="mark"] .marketing-capability-matrix thead th,
[data-design="mark"] .marketing-capability-matrix tbody tr.cap-group th {
  background: var(--mark-well);
  color: var(--color-ink);
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
}
[data-design="mark"] .marketing-capability-matrix thead th { color: var(--color-muted); }
[data-design="mark"] .marketing-faq details { border: 0; border-radius: var(--radius-md); background: var(--color-surface); }
[data-design="mark"] .marketing-faq summary { font-weight: 700; color: var(--color-ink); }
[data-design="mark"] .marketing-faq summary::after { color: var(--color-ink); transition: none; }

/* ---------- Forms ---------- */
[data-design="mark"] .marketing-contact-form { padding: var(--space-5); }
[data-design="mark"] .marketing-field label { font-weight: 700; color: var(--color-ink); }
[data-design="mark"] .marketing-field input,
[data-design="mark"] .marketing-field textarea {
  border-color: transparent;
  background: var(--mark-well);
  color: var(--color-ink);
  transition: none;
}
[data-design="mark"] .marketing-field input:focus,
[data-design="mark"] .marketing-field textarea:focus {
  border-color: var(--mark-ink);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--mark-accent) 30%, transparent);
}
[data-design="mark"] .marketing-contact-aside > div { border: 0; border-radius: var(--radius-lg); background: var(--color-surface); padding: var(--space-4); }
[data-design="mark"] .marketing-contact-aside h3 { font-weight: 800; color: var(--color-ink); }
[data-design="mark"] .marketing-contact-aside a {
  color: var(--color-ink);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}
[data-design="mark"] .marketing-survey-lead legend,
[data-design="mark"] .marketing-survey-section legend { font-weight: 800; color: var(--color-ink); }
[data-design="mark"] .marketing-survey-section-num { background: var(--mark-well); color: var(--color-ink); }
[data-design="mark"] .marketing-survey-question + .marketing-survey-question { border-top-style: solid; }
[data-design="mark"] .marketing-survey-choice { border-color: transparent; background: var(--mark-well); font-weight: 600; transition: none; }
[data-design="mark"] .marketing-survey-choice:hover { border-color: transparent; background: var(--color-border-strong); }
[data-design="mark"] .marketing-survey-choice input { accent-color: var(--mark-ink); }
[data-design="mark"] .marketing-survey-choice:has(input:checked) {
  border-color: transparent;
  background: var(--color-surface);
  box-shadow: inset 0 0 0 2px var(--mark-ink);
  color: var(--color-ink);
  font-weight: 700;
}
[data-design="mark"] .marketing-survey-score {
  align-items: flex-start;
  margin: var(--space-4) 0 0;
  border: 0;
  background: var(--color-surface);
}
[data-design="mark"] .marketing-survey-score span { color: var(--color-muted); font-weight: 600; }
[data-design="mark"] .marketing-survey-score strong { font-weight: 800; letter-spacing: -0.03em; color: var(--color-ink); }

/* ---------- Legal pages ---------- */
[data-design="mark"] .marketing-legal h2 { font-weight: 800; letter-spacing: -0.015em; color: var(--color-ink); }
[data-design="mark"] .marketing-legal a { color: var(--color-ink); font-weight: 600; text-underline-offset: 3px; }
[data-design="mark"] .marketing-legal-table thead th {
  background: var(--mark-well);
  color: var(--color-muted);
  font-size: var(--text-sm);
  letter-spacing: 0;
  text-transform: none;
}
[data-design="mark"] .marketing-legal-toc a:hover { color: var(--color-ink); }

/* ---------- Closing block: the green again ---------- */
[data-design="mark"] .marketing-section-cta-block {
  width: calc(100% - 2 * var(--space-4));
  max-width: var(--site-col);
  padding: clamp(2.5rem, 6vw, 4rem) clamp(1.5rem, 5vw, 4rem);
  border-radius: var(--radius-lg);
  background:
    radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px) 0 0 / 3px 3px,
    var(--site-green);
  color: #fff;
  text-align: left;
}
[data-design="mark"] .marketing-section-cta-block h2 {
  max-width: 18em;
  font-size: clamp(1.75rem, 3.4vw, 2.5rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -0.03em;
  color: #fff;
}
[data-design="mark"] .marketing-section-cta-block p { color: var(--site-on-green); }
[data-design="mark"] .marketing-section-cta-block .marketing-legal-inline,
[data-design="mark"] .marketing-legal-inline {
  margin-left: 0;
  text-align: left;
}
[data-design="mark"] .marketing-section-cta-block .marketing-legal-inline { color: color-mix(in srgb, var(--mark-paper) 70%, transparent); }
[data-design="mark"] .marketing-section-cta-block .marketing-legal-inline a { color: #fff; }

/* ---------- Footer ---------- */
[data-design="mark"] .marketing-footer { border-top: 1px solid var(--site-rule); background: transparent; }
[data-design="mark"] .marketing-footer-brand strong { font-weight: 800; color: var(--color-ink); }
[data-design="mark"] .marketing-footer-brand,
[data-design="mark"] .marketing-footer-links a,
[data-design="mark"] .marketing-footer-meta,
[data-design="mark"] .marketing-footer-meta a { color: var(--color-muted); }
[data-design="mark"] .marketing-footer-links a { font-weight: 600; }
[data-design="mark"] .marketing-footer-links a:hover,
[data-design="mark"] .marketing-footer-meta a:hover { color: var(--color-ink); }