/* ============================================================================
   Industry / "Broadsheet" — the design system for the whole ListEdge app.
   Ported from the public design handoff's styles.css, extended to cover the
   signed-in screens (see "authenticated app" below), then repainted to the
   "Broadsheet" handoff (navy + brass on warm paper, Source Serif 4, pill
   buttons) — which started as a marketing-page-only treatment and was
   promoted to the whole app. Loaded from both _PublicLayout.cshtml and
   _Layout.cshtml. Bootstrap is no longer loaded anywhere these classes are in
   play — see README for why (the .btn/.table/.nav names were chosen to collide
   with Bootstrap's, so the two were never meant to load together).

   The Identity area's packaged (non-Login) pages are the one exception: they
   still render Bootstrap markup from the Identity.UI RCL and use
   _LegacyBootstrapLayout.cshtml instead, which loads Bootstrap, not this file.

   The tokens below are Broadsheet values. The .mkt-broadsheet block near the
   end of this file is now only the marketing homepage's own layout components
   (hero, stat row, pricing tiers, isolation band) — the shared colours, fonts
   and component looks all live here in :root and the component rules.
   ============================================================================ */

:root {
  --color-bg: #f7f2e8;       /* warm paper — marketing + sign-in only */
  --color-canvas: #e2dfd9;   /* page ground behind the signed-in app's content panel */
  --color-surface: #fffdf8;  /* white panel — .app-main, .blueprint */
  --color-input-bg: #eae7e2; /* input fill — one step below the white panel, one above the ground */
  --color-text: #20211d;     /* ink */
  --color-accent: #c4802f;   /* brass */
  --color-divider: color-mix(in srgb, #20211d 16%, transparent);

  /* — ink opacity scale: five legibility tiers instead of ad hoc percentages — */
  --ink-body: color-mix(in srgb, var(--color-text) 92%, transparent);        /* paragraphs, data, typed text */
  --ink-caption: color-mix(in srgb, var(--color-text) 82%, transparent);     /* secondary/supporting copy */
  --ink-table-head: color-mix(in srgb, var(--color-text) 70%, transparent); /* column headers, field labels */
  --ink-optional: color-mix(in srgb, var(--color-text) 55%, transparent);    /* de-emphasised "(optional)" tags */
  --ink-on-navy: rgba(247, 242, 232, .86);                                   /* copy sitting on the navy nav/footer/hero */

  --color-neutral-100: #f2ece0;  /* pale paper — .tag-neutral bg */
  --color-neutral-800: #4a4033;  /* warm dark — .tag-neutral text */

  --color-accent-100: #f3e7d2;  /* pale brass — .flash-success / .tag-accent bg */
  --color-accent-500: #d09a4f;
  --color-accent-600: #ac6d22;  /* brass hover */
  --color-accent-700: #8f5817;  /* link colour / deep brass */
  --color-accent-800: #6f4410;  /* link hover / .flash-warning */
  --color-accent-900: #15293c;  /* navy — nav, footer, .fullbleed, inverted cards */

  --color-error: #aa0b56;  /* the one true error colour in the system */

  --font-heading: "Source Serif 4", Georgia, "Times New Roman", serif;
  --font-heading-weight: 600;
  --font-body: "Source Serif 4", Georgia, "Times New Roman", serif;

  --space-1: 3.4px;
  --space-2: 6.8px;
  --space-3: 10.2px;
  --space-4: 13.6px;
  --space-6: 20.4px;
  --space-8: 27.2px;

  --gutter: clamp(20px, 5vw, 48px);
}

*, *::before, *::after { box-sizing: border-box; }

/* — sticky footer: body is a full-height column; header + footer keep their
     natural size, the content region grows to push the footer to the bottom
     even when the page's own content is shorter than the viewport. — */
html, body { height: 100%; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--ink-body);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  font-weight: 400;
  text-wrap: pretty;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

.navwrap, .foot { flex: 0 0 auto; }
.app-main, .layout-main { flex: 1 0 auto; }

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  line-height: 1.12;
  letter-spacing: -0.015em;
  margin: 0 0 var(--space-2);
}

p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
a:hover { color: var(--color-accent-800); }
img { display: block; max-width: 100%; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — page furniture: the "caption rule" pattern from the prototypes — */
.k {
  display: block;
  font: var(--font-heading-weight) 13px/12px var(--font-heading);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-accent-700);
  margin: 0 0 12px;
}
.r { height: 1px; border: 0; margin: 0 0 28px; background: var(--color-divider); }
.d {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 40px;
  line-height: 1.06;
  letter-spacing: -0.02em;
  margin: 0;
}
.d span { display: block; }
.h2 {
  font-family: var(--font-heading);
  font-weight: var(--font-heading-weight);
  font-size: 22px;
  line-height: 24px;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  margin: 0;
}
.p {
  font-size: 15px;
  line-height: 24px;
  margin: 16px 0 0;
  color: var(--ink-body);
}
.muted { color: var(--ink-caption); }

/* — panel: a filled card with a 3px brass top-rule, no border. (Was the
     Industry "blueprint" hairline frame with crosshair register marks; the
     Broadsheet system distinguishes cards by fill + top-rule instead, so the
     .corner marks are retired — the markup can stay, it just renders nothing.) — */
.blueprint {
  position: relative;
  background: var(--color-surface);
  border: 0;
  border-top: 3px solid var(--color-accent);
  border-radius: 0;
}
.blueprint > .corner { display: none; }

/* — buttons: Broadsheet pills (99px). The .btn-group case squares them off —
     adjoining Edit/Deactivate/Delete pills read badly mashed together. — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-body); font-weight: 400;
  font-size: 14px; line-height: 1.2; color: var(--ink-body);
  background: transparent; border: 1px solid var(--color-divider);
  padding: var(--space-2) calc(var(--space-3) * 1.5);
  border-radius: 99px;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-accent-900); border-color: var(--color-accent); }
.btn-primary:hover { background: var(--color-accent-600); border-color: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); border-color: var(--color-accent-700); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-block { width: 100%; }

/* — form fields — */
.field { display: flex; flex-direction: column; gap: 7px; }
.field > .label {
  font: var(--font-heading-weight) 12px/16px var(--font-heading);
  letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-table-head);
}
.field > .label .opt { font-weight: 400; text-transform: none; letter-spacing: 0; color: var(--ink-optional); }
.input {
  width: 100%; min-height: 38px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--ink-body); caret-color: var(--color-accent);
  background: var(--color-input-bg);
  border: 1px solid var(--color-divider); border-radius: 3px;
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; line-height: 22px; padding: 10px 12px; }

/* validation — jQuery-unobtrusive would add these; here they also come from a
   server round-trip. Broadsheet has a dedicated error colour (--color-error). */
.input-validation-error, .input.input-validation-error { border-color: var(--color-error); }
.field-validation-error, .text-danger {
  font-size: 13px; line-height: 18px;
  color: var(--color-error);
}
.validation-summary-errors { font-size: 13px; color: var(--color-error); margin-bottom: 4px; }
.validation-summary-errors ul { margin: 0; padding-left: 1.1em; }

/* compound control: borderless input + static suffix inside one 1px border */
.compound { display: flex; align-items: stretch; border: 1px solid var(--color-divider); background: var(--color-input-bg); }
.compound .input { border: 0; flex: 1; background: transparent; }
.compound .suffix {
  display: flex; align-items: center; padding: 0 12px;
  border-left: 1px solid var(--color-divider);
  font-size: 14px; white-space: nowrap;
  color: var(--ink-caption);
}

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px; border-radius: 0;
}
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-accent  { background: var(--color-accent-100);  color: var(--color-accent-800); }
.tag-outline { border: 1px solid var(--color-accent); color: var(--color-accent); }

/* — nav / header: navy bar, light-on-navy links (both the public .nav and the
     signed-in .app-nav further down live in this same navy .navwrap) — */
.navwrap { background: var(--color-accent-900); border-bottom: 0; }
.nav {
  display: flex; align-items: center; gap: var(--space-6);
  width: 100%;
  padding: 20px var(--gutter);
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px; margin-right: auto; color: var(--color-bg); text-decoration: none;
  display: flex; align-items: center; gap: 10px;
}
.nav a { color: var(--ink-on-navy); text-decoration: none; font-size: 15px; }
.nav a:hover, .nav a[aria-current="location"] { color: var(--color-bg); }
.nav .btn { font-size: 15px; padding: 8px 18px; }
.navwrap :focus-visible { outline-color: var(--color-accent-500); }

/* — parity table — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ink-table-head);
  padding: 13px 20px 13px 0; border-bottom: 1px solid var(--color-divider);
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
}
.table td {
  padding: 13px 20px 13px 0; font-size: 15px; line-height: 22px;
  border-bottom: 1px solid var(--color-divider);
}
.table th:first-child, .table td:first-child { padding-left: 20px; }
.table td.m { color: var(--ink-caption); }
.table tbody tr:last-child td { border-bottom: 0; }
.table tbody tr:hover { background: none; }

/* — layout scaffolding for the public pages — */
.page-main { max-width: var(--page-width, 1180px); margin: 0 auto; padding: 0 var(--gutter); }
.section { padding: 56px 0; }
.rule-top { border-top: 1px solid var(--color-divider); }

/* direct child of the unpadded <main>, so it is already full width */
.fullbleed {
  background: var(--color-accent-900); color: var(--color-bg);
  padding: 64px 0;
}
.fullbleed > .inner { max-width: var(--page-width, 1180px); margin: 0 auto; padding: 0 var(--gutter); }
.fullbleed .headline {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 40px; line-height: 44px; letter-spacing: 0.01em; text-transform: uppercase;
  margin: 0; max-width: 30ch;
}
.fullbleed .body {
  font-size: 16px; line-height: 26px; max-width: 62ch; margin: 24px 0 0;
  color: var(--ink-on-navy);
}

.hero { padding: 84px 0 52px; }
.hero h1 { font-size: 86px; line-height: 90px; max-width: 24ch; }
.hero .sub {
  font-size: 17px; line-height: 26px; max-width: 62ch; margin: 32px 0 0;
  color: var(--ink-body);
}
.hero .actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; }

.tier-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 40px; }
.tier { padding: 24px; }
.tier .basis {
  margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--color-divider);
  font-size: 14px; line-height: 22px; color: var(--ink-caption);
}
.tier-note { font-size: 14px; line-height: 22px; margin: 24px 0 0; color: var(--ink-caption); }

.enquiry-split { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; align-items: start; }
.enquiry-aside .sidenote {
  margin-top: 26px; padding-top: 18px; border-top: 1px solid var(--color-divider);
  font-size: 13px; line-height: 22px; color: var(--ink-caption);
}
.field-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px 24px; }
.field-grid .span-2 { grid-column: 1 / -1; }
.submit-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; padding-top: 4px; flex-wrap: wrap; }
.submit-row .reassure { font-size: 13px; line-height: 20px; color: var(--ink-caption); }

.foot {
  background: var(--color-accent-900); border-top: 0;
  font-size: 13px; color: var(--ink-on-navy);
}
.foot > .inner {
  max-width: var(--page-width, 1180px); margin: 0 auto; padding: 22px var(--gutter);
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px;
}
.foot a { color: var(--ink-on-navy); }
.foot .tag-outline { color: var(--color-bg); border-color: rgba(247, 242, 232, .4); }

/* — sign-in specifics — */
.signin-body { padding: 56px 0 48px; display: flex; flex-direction: column; align-items: stretch; }
.signin-fields { display: flex; flex-direction: column; gap: 20px; }
.utility-row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 13px; line-height: 20px; border-top: 1px solid var(--color-divider);
}
.utility-row a { padding-top: 14px; }
.signin-note { font-size: 13px; line-height: 20px; margin: 24px 0 0; color: var(--ink-caption); }

/* — received / success panel — */
.received-heading { font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 22px; line-height: 24px; text-transform: uppercase; letter-spacing: 0.02em; margin: 0; }

/* ============================================================================
   Authenticated app — components the public pages never needed: a select
   control, checkboxes, a filter bar, a form grid, a richer data table,
   pagination, flash messages, definition lists, button groups, and the
   signed-in nav. See README "Authenticated app re-skin" for the full writeup.
   ============================================================================ */

/* — select — */
select.input {
  appearance: none; -webkit-appearance: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238f5817' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 12px center; padding-right: 32px;
}

/* — checkbox — */
.check { display: flex; align-items: center; gap: 8px; }
.check input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--color-accent); }
.check label {
  font: 400 14px var(--font-body); color: var(--ink-body); text-transform: none; letter-spacing: normal;
}

/* — signed-in shell: a deeper tan "desk" behind a crisp white content panel,
     so the working area reads as a distinct surface rather than sitting
     flush on the same soft paper tone as the marketing/sign-in pages. — */
body.app-shell { background: var(--color-canvas); }

/* — app page shell + heading row — */
/* width:100% so that as a column flex-item (body is now a flex container for
   the sticky footer) the auto side margins still centre a full-width block
   rather than letting it shrink to its content. */
.app-main {
  width: 100%; max-width: 1100px; margin: 28px auto 40px;
  padding: 32px var(--gutter) 40px;
  background: var(--color-surface);
  border: 1px solid var(--color-divider);
  border-radius: 3px;
}
.page-head { display: flex; justify-content: space-between; align-items: center; gap: 16px; flex-wrap: wrap; margin: 4px 0 18px; }

/* — filter / search bar — */
.filter-bar { display: flex; flex-wrap: wrap; gap: 16px; align-items: flex-end; margin: 14px 0 18px; }
.filter-bar .field { flex: 1 1 180px; min-width: 140px; }
.filter-bar .btn { flex: 0 0 auto; }

/* — entity form grid: a 12-unit grid so col-md-N layouts translate directly — */
.form-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; margin: 20px 0; }
.form-grid .span-2  { grid-column: span 2; }
.form-grid .span-3  { grid-column: span 3; }
.form-grid .span-4  { grid-column: span 4; }
.form-grid .span-5  { grid-column: span 5; }
.form-grid .span-6  { grid-column: span 6; }
.form-grid .span-8  { grid-column: span 8; }
.form-grid .span-12 { grid-column: span 12; }
.form-grid .section-label { grid-column: span 12; margin-top: 8px; }

/* — horizontal scroll container so a wide data table never widens the page itself — */
.table-scroll { overflow-x: auto; }

/* — data table: a .table modifier with row states the parity table never needed —
     also tighter row padding than .table's base (the parity table on the
     marketing page keeps the roomier default; these dense admin lists don't). — */
.table.dtable tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }
.dtable th, .dtable td { padding-top: 9px; padding-bottom: 9px; }
.dtable td { line-height: 20px; color: var(--color-text); }
.dtable td a { color: var(--color-text); font-weight: 500; text-decoration: none; }
.dtable td a:hover { color: var(--color-accent-700); text-decoration: underline; }
.dtable .sub { display: block; font-size: 13px; margin-top: 2px; color: var(--ink-body); }
.dtable td.num { text-align: right; }
.dtable tr.empty td { padding: 14px 0; color: var(--ink-caption); }

/* — pagination — */
.pager { display: flex; align-items: center; gap: 8px; list-style: none; margin: 16px 0 0; padding: 0; font-size: 14px; }
.pager-link, .pager-current {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 34px; padding: 0 12px;
  border: 1px solid var(--color-divider); color: var(--ink-body); text-decoration: none;
}
.pager-link:hover { border-color: var(--color-accent); color: var(--color-accent-700); }
.pager-current { color: var(--ink-caption); border-color: transparent; }
.pager-item.is-disabled .pager-link { opacity: 0.4; pointer-events: none; }

/* — flash / status messages — */
.flash { border: 1px solid var(--color-divider); border-left: 3px solid var(--color-divider); padding: 12px 16px; font-size: 14px; line-height: 20px; margin: 16px 0; }
.flash-success { border-left-color: var(--color-accent-600); background: var(--color-accent-100); }
.flash-warning { border-left-color: var(--color-accent-800); background: color-mix(in srgb, var(--color-accent-800) 8%, transparent); }
.flash-neutral { border-left-color: var(--color-divider); background: var(--color-neutral-100); }

/* — definition list (label / value pairs) — */
.deflist { display: grid; grid-template-columns: max-content 1fr; gap: 10px 20px; margin: 0; }
.deflist dt {
  font: var(--font-heading-weight) 12px/20px var(--font-heading);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ink-table-head);
}
.deflist dd { margin: 0; font-size: 15px; line-height: 20px; }

/* — button group: adjoining buttons, collapsed border (a .btn may be wrapped in its own
     <form>, e.g. a POST action button sitting next to plain <a> links) — */
.btn-group { display: inline-flex; flex-wrap: wrap; }
.btn-group .btn { border-radius: 3px; }
.btn-group .btn:not(:first-child) { margin-left: -1px; }
.btn-group > form:not(:first-child) .btn { margin-left: -1px; }

/* — two-column detail layout (contact / address, etc.) — */
.two-col { display: grid; grid-template-columns: repeat(2, 1fr); gap: 32px; margin: 24px 0; }

/* — narrow sidebar + content, e.g. Manage account's tab nav + panel — */
.manage-layout { display: grid; grid-template-columns: 220px 1fr; gap: 32px; align-items: start; margin: 16px 0 24px; }

/* — dashboard stat tiles: a .blueprint card showing one big figure + caption — the app-side
     analogue of the marketing homepage's .mkt-stat (kept separate; that family stays
     marketing-only). Used by the signed-in dashboard's pipeline/live-count rows. — */
.stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 16px; margin: 16px 0 28px; }
.stat-tile { padding: 18px 20px; }
.stat-tile__figure {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 32px; line-height: 1; color: var(--color-accent-900);
}
.stat-tile__caption { font-size: 13px; margin-top: 8px; }

/* — dashboard monthly-volume chart: two-series grouped bars (Rental / Exchange), hand-rolled
     with plain divs — no charting library. Bar heights are set inline per-row as a percentage
     of .chart-bars__track's fixed height. — */
.chart-bars { display: flex; gap: 32px; align-items: flex-end; margin: 16px 0 8px; }
.chart-bars__group { display: flex; flex-direction: column; align-items: center; gap: 10px; flex: 1; }
.chart-bars__track { display: flex; align-items: flex-end; gap: 8px; height: 130px; }
.chart-bars__bar-wrap { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 6px; }
.chart-bars__value { font-size: 12px; }
.chart-bars__bar { width: 26px; border-radius: 2px 2px 0 0; min-height: 2px; }
.chart-bars__bar--rental { background: var(--color-accent); }
.chart-bars__bar--exchange { background: var(--color-accent-900); }
/* — scheduled (forward-looking) bar: hollow + dashed, not a solid fill, since it's a
     different metric (MailDate, not CreatedAtUtc) from the other bars in the same chart. — */
.chart-bars__bar--rental.chart-bars__bar--scheduled { background: transparent; border: 2px dashed var(--color-accent); }
.chart-bars__bar--exchange.chart-bars__bar--scheduled { background: transparent; border: 2px dashed var(--color-accent-900); }
.chart-bars__label { font-size: 13px; }
.chart-legend { display: flex; gap: 18px; margin-top: 4px; font-size: 13px; }
.chart-legend__item { display: inline-flex; align-items: center; gap: 6px; }
.chart-legend__swatch { width: 10px; height: 10px; border-radius: 2px; display: inline-block; }
.chart-legend__swatch--rental { background: var(--color-accent); }
.chart-legend__swatch--exchange { background: var(--color-accent-900); }

/* — tenant branding (the app's nav-brand content) — */
.tenant-branding {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight); font-size: 20px; color: inherit;
}
.tenant-branding__logo { max-height: 28px; width: auto; display: block; }
.tenant-branding__name { line-height: 1; }

/* — signed-in app nav: brand, 9-ish claim-gated links, identity, a toggle for narrow widths — */
.app-nav { display: flex; align-items: center; gap: var(--space-6); width: 100%; padding: 14px var(--gutter); }
.app-nav__toggle { display: none; }
.app-nav__panel { display: flex; align-items: center; justify-content: space-between; flex: 1 1 auto; gap: var(--space-6); }
.app-nav__links { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; }
.app-nav__links a { color: var(--ink-on-navy); text-decoration: none; font-size: 14px; white-space: nowrap; }
.app-nav__links a:hover, .app-nav__links a[aria-current="page"] { color: var(--color-bg); }
/* — nav search: sits in .app-nav__links, right after Tools (last of the links, so it still
     ends up there for a non-admin member with no Tools dropdown to sit next to). Reuses the
     plain .input look (light field, dark text) rather than an on-navy treatment — it needs to
     read as a normal text field, not a nav link. — */
.app-nav__search { width: 180px; margin: 0; }
.app-nav__search .input { min-height: 30px; font-size: 13px; }

.app-nav__identity { display: flex; align-items: center; gap: 16px; font-size: 14px; white-space: nowrap; }
.app-nav__identity a { color: var(--ink-on-navy); text-decoration: none; }
.app-nav__identity a:hover { color: var(--color-bg); }
.app-nav__identity form { margin: 0; }
.app-nav__identity .btn-link {
  border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--color-accent-500);
}
.app-nav__identity .btn-link:hover { color: var(--color-bg); text-decoration: underline; }

/* — nav dropdown: groups a handful of related links (e.g. the TenantAdmin tools) behind one
     trigger instead of listing each as its own top-level link. The trigger matches the plain
     nav-link look; the menu itself is a light popover (Broadsheet has no shadows, so a border
     does the separating), not another navy surface. — */
.app-nav__dropdown { position: relative; font-size: 14px; }
.app-nav__dropdown-toggle {
  display: inline-flex; align-items: center; gap: 7px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; font-size: 14px; color: var(--ink-on-navy); white-space: nowrap;
}
.app-nav__dropdown-toggle:hover { color: var(--color-bg); }
.app-nav__dropdown-toggle::after {
  content: ""; width: 7px; height: 7px; margin-top: -3px;
  border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg); transition: transform .15s ease;
}
.app-nav__dropdown.is-open .app-nav__dropdown-toggle { color: var(--color-bg); }
.app-nav__dropdown.is-open .app-nav__dropdown-toggle::after { transform: rotate(-135deg); margin-top: 3px; }
.app-nav__dropdown-menu {
  display: none; flex-direction: column;
  position: absolute; top: calc(100% + 14px); left: 0; z-index: 40;
  min-width: 210px; padding: 6px;
  background: var(--color-surface); border: 1px solid var(--color-divider); border-radius: 3px;
}
.app-nav__dropdown.is-open .app-nav__dropdown-menu { display: flex; }
.app-nav__dropdown-menu a {
  padding: 9px 10px; border-radius: 3px;
  color: var(--ink-body); font-size: 14px; text-decoration: none; white-space: nowrap;
}
.app-nav__dropdown-menu a:hover, .app-nav__dropdown-menu a[aria-current="page"] {
  background: var(--color-neutral-100); color: var(--color-accent-700);
}

/* ── Responsive ─────────────────────────────────────────────────────────── */
@media (max-width: 880px) {
  .tier-grid { grid-template-columns: 1fr; gap: 44px; }
  .enquiry-split { grid-template-columns: 1fr; gap: 44px; }
  .hero h1 { font-size: 56px; line-height: 58px; }
  .fullbleed .headline { font-size: 32px; line-height: 36px; }
}

@media (max-width: 900px) {
  /* — app nav: collapse behind a toggle once the ~9 links stop fitting — */
  .app-nav { flex-wrap: wrap; }
  .app-nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 36px; height: 36px; padding: 0; margin-left: auto;
    border: 1px solid rgba(247, 242, 232, .4); background: none; cursor: pointer;
  }
  .app-nav__toggle span { position: relative; display: block; width: 18px; height: 2px; background: var(--color-bg); }
  .app-nav__toggle span::before, .app-nav__toggle span::after {
    content: ""; position: absolute; left: 0; width: 18px; height: 2px; background: var(--color-bg);
  }
  .app-nav__toggle span::before { top: -6px; }
  .app-nav__toggle span::after { top: 6px; }
  .app-nav__panel {
    display: none; flex-basis: 100%; flex-direction: column; align-items: flex-start;
    justify-content: flex-start; gap: 16px; padding-top: 16px;
  }
  .app-nav__panel.is-open { display: flex; }
  /* width:100% here isn't decorative — align-items:flex-start makes this column shrink to its
     content's own width, so without it .app-nav__search's 100% below would resolve against
     that shrunk width instead of the actual nav width. */
  .app-nav__links { flex-direction: column; align-items: flex-start; gap: 12px; width: 100%; }
  .app-nav__search { flex: 0 0 100%; width: 100%; }
  .app-nav__identity { flex-direction: column; align-items: flex-start; gap: 10px; }

  /* — dropdown expands inline in the stacked mobile menu instead of floating over it — the
       menu goes transparent over the navy nav here, so its links need the light on-navy
       colors instead of the dark ink meant for the white desktop popover — */
  .app-nav__dropdown { width: 100%; }
  .app-nav__dropdown-menu {
    display: none; position: static; margin-top: 10px; border: 0; padding: 0 0 0 14px;
    background: none;
  }
  .app-nav__dropdown.is-open .app-nav__dropdown-menu { display: flex; }
  .app-nav__dropdown-menu a { color: var(--ink-on-navy); }
  .app-nav__dropdown-menu a:hover, .app-nav__dropdown-menu a[aria-current="page"] {
    background: none; color: var(--color-bg);
  }
}

@media (max-width: 720px) {
  .hero { padding: 56px 0 40px; }
  .hero h1 { font-size: 46px; line-height: 48px; }
  .field-grid { grid-template-columns: 1fr; }

  /* — entity form grid collapses to one column — */
  .form-grid .span-2, .form-grid .span-3, .form-grid .span-4, .form-grid .span-5,
  .form-grid .span-6, .form-grid .span-8 { grid-column: span 12; }

  /* — filter bar stacks — */
  .filter-bar .field, .filter-bar .btn { flex-basis: 100%; }

  /* — two-column detail layout stacks — */
  .two-col { grid-template-columns: 1fr; gap: 20px; }
  .manage-layout { grid-template-columns: 1fr; gap: 20px; }

  /* parity table linearises — thead hidden from sight, kept in the a11y tree */
  .table.parity thead {
    position: absolute; width: 1px; height: 1px; clip-path: inset(50%); overflow: hidden;
  }
  .table.parity, .table.parity tbody, .table.parity tr, .table.parity td { display: block; width: 100%; }
  .table.parity tr {
    padding: 16px 0; border-bottom: 1px solid var(--color-divider);
  }
  .table.parity tr:last-child { border-bottom: 0; }
  .table.parity td { padding: 0; border: 0; }
  .table.parity td:first-child {
    font: var(--font-heading-weight) 13px/24px var(--font-heading);
    letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-accent-700);
    margin-bottom: 6px;
  }
  .table.parity td.m { margin-bottom: 4px; }
  .table.parity td.status { margin-top: 8px; }
}

@media (max-width: 480px) {
  /* header keeps only the brand + the primary action */
  .nav a:not(.nav-brand):not(.btn) { display: none; }
  .compound { flex-wrap: wrap; }
  .compound .suffix { border-left: 0; border-top: 1px solid var(--color-divider); width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  * { scroll-behavior: auto !important; transition: none !important; }
}

/* ============================================================================
   "Broadsheet" — the marketing homepage's own layout components (hero,
   pipeline/ledger cards, stat row, numbered feature grid, the inverted
   system-of-record band, connect cards, the start-here split). The Broadsheet
   colours, fonts and component looks (buttons, inputs, nav, footer, tables,
   tags) are the app-wide defaults up in :root and the component rules — this
   block is the pieces the marketing page needs that no other screen does,
   plus a marketing-only monospace accent face (IBM Plex Mono) used for
   eyebrows, numerals and small technical labels. Still gated on the
   .mkt-broadsheet body class (set only by Views/Home/Marketing.cshtml) so the
   decorative full-bleed bands and mono type stay off the product screens.
   ============================================================================ */

.mkt-broadsheet {
  /* Roles specific to the marketing bands (a brighter brass-on-navy, a teal
     accent, chip fills) that the rest of the app has no use for. */
  --mkt-navy: #15293c;
  --mkt-panel: #fffdf8;
  --mkt-brass-navy: #e0973a;
  --mkt-brass-em: #e8b168;
  --mkt-teal: #5a9696;
  --mkt-teal-fill: rgba(90, 150, 150, .16);
  --mkt-teal-text: #28565a;
  --mkt-teal-em: #8cc4c4;
  --mkt-chip-fill: rgba(196, 128, 47, .14);
  --mkt-chip-text: #7a4a10;
  --mkt-ink-navy: #f7f2e8;
  --mkt-font-mono: "IBM Plex Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
  --mkt-shadow: 0 30px 60px -20px rgba(0, 0, 0, .32);
  --mkt-shadow-sm: 0 24px 48px -18px rgba(0, 0, 0, .28);
}

.mkt-broadsheet em { font-style: italic; font-weight: 400; color: var(--mkt-brass-em); }

/* — nav / buttons: marketing-page sizing on top of the now-global navy nav — */
.mkt-broadsheet .nav { padding: 22px 56px; gap: 32px; }
.mkt-broadsheet .nav-brand { gap: 11px; font-size: 19px; letter-spacing: -.01em; }
.mkt-broadsheet .nav .btn.mkt-btn-pill { min-height: 34px; padding: 0 18px; font-size: 13px; }
.mkt-btn-outline { color: var(--mkt-ink-navy); border-color: rgba(247, 242, 232, .45) !important; }
.mkt-btn-outline:hover { background: rgba(247, 242, 232, .1); }

/* — mono accent: eyebrows, numerals, small technical labels — */
.mkt-mono-label {
  font-family: var(--mkt-font-mono); font-weight: 500;
  letter-spacing: .1em; text-transform: uppercase;
}
.mkt-mono-caption { font-family: var(--mkt-font-mono); font-size: 13px; color: var(--ink-caption); }

.mkt-eyebrow {
  font-family: var(--mkt-font-mono); font-weight: 500;
  font-size: 12.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--mkt-brass-navy); margin-bottom: 22px;
}
.mkt-eyebrow--ink { color: var(--color-accent-700); }
.mkt-display {
  font-size: 68px; line-height: 1.05; letter-spacing: -.028em; font-weight: 600;
  margin: 0; max-width: 23ch; text-wrap: pretty; color: var(--mkt-ink-navy);
}
.mkt-h2 {
  font-size: 44px; line-height: 1.08; letter-spacing: -.024em; font-weight: 600;
  margin: 0; max-width: 26ch; color: var(--mkt-navy);
}
.mkt-h2--navy { color: var(--mkt-ink-navy); font-size: 46px; }
.mkt-h2--start { font-size: 52px; line-height: 1.04; letter-spacing: -.026em; max-width: 14ch; }

/* — hero: content column + a stack of two decorative cards (aria-hidden — the
     product's own order/exchange pipeline and its exchange-balance ledger,
     not abstract shapes) — */
.mkt-hero {
  position: relative; overflow: hidden;
  background: var(--mkt-navy); color: var(--mkt-ink-navy);
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, .88fr);
  gap: 64px; align-items: center;
  padding: 96px 56px 112px;
}
.mkt-hero__dots {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle, rgba(224, 151, 58, .13) 1px, transparent 1.4px);
  background-size: 28px 28px;
}
.mkt-hero__content { position: relative; }
.mkt-hero__sub {
  font-size: 19px; line-height: 1.65; color: var(--ink-on-navy);
  max-width: 54ch; margin: 30px 0 0;
}
.mkt-hero__actions { display: flex; gap: 14px; margin-top: 38px; flex-wrap: wrap; }
.mkt-hero__actions .btn { min-height: 48px; padding: 0 30px; font-size: 15px; }
.mkt-hero__note { margin-top: 32px; font-size: 14.5px; color: rgba(247, 242, 232, .7); font-style: italic; }
.mkt-hero :focus-visible { outline-color: var(--mkt-brass-navy); }

.mkt-hero__cards { position: relative; display: flex; flex-direction: column; gap: 18px; }

.mkt-pipeline {
  background: var(--mkt-panel); color: var(--color-text);
  border-top: 3px solid var(--color-accent); box-shadow: var(--mkt-shadow);
  padding: 26px 28px 28px;
}
.mkt-pipeline__head {
  display: flex; justify-content: space-between; align-items: baseline;
  padding-bottom: 14px; border-bottom: 1px solid var(--color-divider);
}
.mkt-pipeline__head-text { display: flex; flex-direction: column; gap: 2px; }
.mkt-pipeline__head .mkt-mono-label { display: block; font-size: 11px; font-weight: 400; color: var(--ink-table-head); }
.mkt-pipeline__title { font-size: 19px; font-weight: 600; color: var(--mkt-navy); }
.mkt-pipeline__steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 20px; }
.mkt-pipeline__step { display: flex; flex-direction: column; gap: 8px; }
.mkt-pipeline__bar { height: 4px; background: var(--color-divider); }
.mkt-pipeline__step.is-done .mkt-pipeline__bar { background: var(--mkt-teal); }
.mkt-pipeline__step.is-active .mkt-pipeline__bar { background: var(--color-accent); }
.mkt-pipeline__name { font-size: 14px; font-weight: 600; color: var(--mkt-navy); }
.mkt-pipeline__step.is-pending .mkt-pipeline__name { color: var(--ink-optional); }
.mkt-pipeline__status { font-family: var(--mkt-font-mono); font-size: 11.5px; color: var(--ink-table-head); }
.mkt-pipeline__step.is-done .mkt-pipeline__status { color: var(--mkt-teal-text); }
.mkt-pipeline__step.is-active .mkt-pipeline__status { color: var(--color-accent-700); }
.mkt-pipeline__step.is-pending .mkt-pipeline__status { display: flex; align-items: center; gap: 5px; }

.mkt-hero__ledger {
  align-self: flex-end; width: 300px; margin: -4px -12px 0 0;
  background: var(--mkt-panel); color: var(--color-text);
  border-top: 3px solid var(--mkt-teal); box-shadow: var(--mkt-shadow-sm);
  padding: 18px 20px 20px; transform: rotate(-1.8deg);
  font-family: var(--font-body);
}
.mkt-hero__ledger-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mkt-font-mono); font-size: 11px; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-table-head); margin-bottom: 14px; padding-bottom: 12px;
  border-bottom: 1px solid var(--color-divider);
}
.mkt-hero__ledger-badge {
  font-family: var(--font-body); font-size: 11px; letter-spacing: 0; text-transform: none;
  color: var(--mkt-teal-text); background: var(--mkt-teal-fill);
  padding: 3px 10px; border-radius: 99px;
}
.mkt-hero__ledger-row {
  display: flex; justify-content: space-between; gap: 16px;
  font-size: 14px; padding: 9px 0; color: var(--color-text);
  border-bottom: 1px solid var(--color-divider);
}
.mkt-hero__ledger-row span:last-child { font-family: var(--mkt-font-mono); font-size: 13px; font-variant-numeric: tabular-nums; color: var(--ink-caption); }
.mkt-hero__ledger-row--total {
  border-bottom: 0; padding-bottom: 0; margin-top: 2px; font-weight: 600; color: var(--mkt-navy);
}
.mkt-hero__ledger-row--total span:last-child { color: var(--mkt-teal-text); }

/* — stat row: plain paper columns divided by hairlines, not cards — */
.mkt-stats { display: flex; padding: 0 56px; background: var(--color-bg); border-bottom: 1px solid var(--color-divider); }
.mkt-stat { flex: 1 1 0; display: flex; align-items: baseline; gap: 18px; padding: 44px 28px; border-left: 1px solid var(--color-divider); }
.mkt-stat:first-child { border-left: 0; padding-left: 0; }
.mkt-stat:last-child { padding-right: 0; }
.mkt-stat__figure { font-family: var(--mkt-font-mono); font-size: 52px; line-height: 1; letter-spacing: -.03em; color: var(--mkt-navy); }
.mkt-stat--teal .mkt-stat__figure { color: var(--mkt-teal-text); }
.mkt-stat__caption { font-size: 14.5px; line-height: 1.45; color: var(--ink-caption); max-width: 20ch; }

/* — generic paper band — */
.mkt-band { padding: 72px 56px 24px; }
.mkt-band.mkt-start { padding: 76px 56px 84px; }

/* — chips (reused by the feature-grid aside) — */
.mkt-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 24px; }
.mkt-chip { font-size: 12.5px; padding: 6px 14px; border-radius: 99px; }
.mkt-chip--brass { background: var(--mkt-chip-fill); color: var(--mkt-chip-text); }
.mkt-chip--teal { background: var(--mkt-teal-fill); color: var(--mkt-teal-text); }

/* — reused by the feature-grid aside intro, connect cards, and the lead-received state — */
.mkt-tier__body { font-size: 15.5px; line-height: 1.62; color: var(--ink-body); margin: 12px 0 0; }

/* — "What you get": intro aside + numbered feature grid, closing on a CTA strip — */
.mkt-band.mkt-band--split { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); gap: 56px; padding-bottom: 72px; }
.mkt-feature-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.mkt-feature { display: flex; gap: 18px; padding: 24px 0; border-top: 1px solid var(--color-divider); }
.mkt-feature--last { border-bottom: 1px solid var(--color-divider); }
.mkt-feature__num { font-size: 13px; color: var(--color-accent-700); padding-top: 4px; }
.mkt-feature__title { margin: 0 0 6px; font-size: 20px; line-height: 1.25; font-weight: 600; color: var(--mkt-navy); }
.mkt-feature__body { margin: 0; font-size: 15px; line-height: 1.6; color: var(--ink-body); }
.mkt-feature-cta {
  grid-column: 1 / -1; display: flex; flex-direction: column; gap: 14px;
  justify-content: center; padding: 26px 30px; margin-top: 20px;
  background: var(--mkt-navy); color: var(--mkt-ink-navy);
}
.mkt-feature-cta__text { font-size: 19px; line-height: 1.35; font-weight: 600; }
.mkt-feature-cta .btn { align-self: flex-start; }

/* — "System of record": inverted navy band, a document-consolidation illustration + fact list — */
.mkt-band.mkt-band--navy {
  background: var(--mkt-navy); color: var(--mkt-ink-navy);
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: center;
  padding: 88px 56px;
}
.mkt-insight-art { display: flex; flex-direction: column; }
.mkt-insight-art__row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mkt-insight-art__row--narrow { grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 10px; padding: 0 10%; }
.mkt-insight-art__row span {
  padding: 11px 12px; border: 1px dashed rgba(247, 242, 232, .35);
  font-family: var(--mkt-font-mono); font-size: 12px; text-align: center;
  color: rgba(247, 242, 232, .72); text-decoration: line-through rgba(224, 151, 58, .7);
}
.mkt-insight-art__arrow { display: flex; justify-content: center; padding: 16px 0; }
.mkt-insight-art__result {
  display: flex; align-items: center; justify-content: space-between;
  padding: 20px 24px; background: var(--mkt-panel); color: var(--mkt-navy);
  border-top: 3px solid var(--color-accent);
}
.mkt-insight-art__brand { display: flex; align-items: center; font-size: 21px; font-weight: 600; }
.mkt-insight-art__brand-em { color: var(--color-accent-600); }
.mkt-insight-art__tag { font-size: 11.5px; color: var(--mkt-teal-text); }

.mkt-fact-list { display: flex; flex-direction: column; margin-top: 34px; }
.mkt-fact { display: grid; grid-template-columns: 190px minmax(0, 1fr); gap: 22px; padding: 17px 0; border-top: 1px solid rgba(247, 242, 232, .18); }
.mkt-fact--teal { border-bottom: 1px solid rgba(247, 242, 232, .18); }
.mkt-fact__term { font-size: 17px; font-weight: 600; color: var(--mkt-brass-em); }
.mkt-fact--teal .mkt-fact__term { color: var(--mkt-teal-em); }
.mkt-fact__body { font-size: 15.5px; line-height: 1.6; color: rgba(247, 242, 232, .86); }

/* — "Built to connect" — */
.mkt-connect-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; margin-top: 40px; }
.mkt-connect-card { display: flex; flex-direction: column; gap: 14px; padding: 30px 32px 32px; background: var(--mkt-panel); border-top: 3px solid var(--color-accent); }
.mkt-connect-card__head { display: flex; align-items: center; justify-content: space-between; }
.mkt-connect-status { font-size: 11px; padding: 4px 10px; border-radius: 99px; }
.mkt-connect-status--teal { background: var(--mkt-teal-fill); color: var(--mkt-teal-text); }
.mkt-connect-status--brass { background: var(--mkt-chip-fill); color: var(--mkt-chip-text); }
.mkt-connect-card__title { margin: 0; font-size: 23px; font-weight: 600; color: var(--mkt-navy); }

/* — start here — */
.mkt-band.mkt-start { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 64px; align-items: start; }
.mkt-start__body { font-size: 16.5px; line-height: 1.66; color: var(--ink-body); max-width: 38ch; margin: 20px 0 0; }
.mkt-step-list { display: flex; flex-direction: column; margin-top: 30px; max-width: 38ch; }
.mkt-step { display: flex; gap: 15px; padding: 13px 0; border-top: 1px solid var(--color-divider); font-size: 15.5px; }
.mkt-step--last { border-bottom: 1px solid var(--color-divider); }
.mkt-step .mkt-mono-label { font-size: 13px; font-weight: 400; color: var(--color-accent-700); padding-top: 1px; }
.mkt-sidenote { font-size: 14.5px; line-height: 1.7; color: var(--ink-caption); margin: 22px 0 0; font-style: italic; }
.mkt-sidenote a { color: var(--color-accent-700); }
.mkt-panel { background: var(--mkt-panel); border-top: 3px solid var(--color-accent); padding: 32px 34px 34px; }
.mkt-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; }
.mkt-span-2 { grid-column: span 2; }
.mkt-submit-row { grid-column: 1 / -1; display: flex; align-items: center; gap: 16px; margin-top: 24px; flex-wrap: wrap; }
.mkt-submit-row .btn { min-height: 44px; padding: 0 30px; font-size: 15px; }
.mkt-reassure { font-size: 13.5px; color: var(--ink-caption); }
.mkt-received-heading { font-size: 27px; line-height: 1.15; font-weight: 600; color: var(--mkt-navy); margin: 0; }

/* — form field labels: a marketing-only mono treatment (the rest of the app's
     .field > .label keeps the serif heading face — see industry.css header) — */
.mkt-broadsheet .field > .label {
  font-family: var(--mkt-font-mono); font-weight: 500; font-size: 11.5px;
  letter-spacing: .1em; color: var(--ink-table-head);
}

/* — footer: marketing page runs it full-bleed (no centred max-width) — */
.mkt-broadsheet .foot > .inner { max-width: none; margin: 0; padding: 26px 56px; gap: 24px; }
.foot-brand { display: flex; align-items: center; gap: 9px; margin-right: auto; color: var(--color-bg); font-weight: 600; }

/* — responsive (breakpoints per the design brief) — */
@media (max-width: 1100px) {
  .mkt-hero, .mkt-band, .mkt-stats,
  .mkt-broadsheet .nav, .mkt-broadsheet .foot > .inner { padding-left: 32px; padding-right: 32px; }
  .mkt-display { font-size: 52px; }
  .mkt-h2, .mkt-h2--navy { font-size: 34px; }
  .mkt-h2--start { font-size: 40px; }
}
@media (max-width: 980px) {
  .mkt-hero { grid-template-columns: 1fr; gap: 40px; }
  .mkt-band.mkt-band--split { grid-template-columns: 1fr; }
  .mkt-feature-grid { grid-template-columns: 1fr; }
  .mkt-band.mkt-band--navy { grid-template-columns: 1fr; }
  .mkt-band.mkt-start { grid-template-columns: 1fr; gap: 44px; }
}
@media (max-width: 720px) {
  .mkt-stats { flex-direction: column; }
  .mkt-stat { border-left: 0; border-top: 1px solid var(--color-divider); padding-left: 0; }
  .mkt-stat:first-child { border-top: 0; }
  .mkt-pipeline__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
  .mkt-connect-grid { grid-template-columns: 1fr; }
  .mkt-fact { grid-template-columns: 1fr; gap: 6px; }
  .mkt-insight-art__row--narrow { padding: 0; }
}
@media (max-width: 640px) {
  .mkt-display { font-size: 40px; }
  .mkt-field-grid { grid-template-columns: 1fr; }
  .mkt-span-2 { grid-column: auto; }
  .mkt-broadsheet .nav a:not(.nav-brand):not(.btn) { display: none; }
  .mkt-hero__ledger { width: auto; margin: 0; transform: none; }
}