/* ==========================================================================
   Membrero marketing site
   Design system: "Industry" — blueprint/technical, Barlow + Barlow Condensed.
   Tokens below are lifted from the design-system stylesheet that ships with
   the Claude Design project; component classes are derived from the design.
   Plain CSS, no build step.
   ========================================================================== */

:root {
  --bg:            #f2f2f3;
  --surface:       #e9e9ea;
  --panel:         #f5f5f8;
  --ink:           #1d1f20;

  --accent:        #5980a6;
  --accent-300:    #b5d9fd;
  --accent-400:    #94bce3;
  --accent-500:    #749dc4;
  --accent-600:    #597ea3;
  --accent-700:    #416180;
  --accent-900:    #1d2d3d;

  --line:          rgba(29, 31, 32, .16);
  --line-soft:     rgba(29, 31, 32, .12);
  --ink-70:        rgba(29, 31, 32, .72);
  --ink-65:        rgba(29, 31, 32, .68);
  --ink-55:        rgba(29, 31, 32, .55);
  --ink-45:        rgba(29, 31, 32, .45);
  --ink-40:        rgba(29, 31, 32, .40);

  --on-dark:       #f2f2f3;
  --on-dark-72:    rgba(242, 242, 243, .72);
  --on-dark-60:    rgba(242, 242, 243, .60);
  --on-dark-line:  rgba(242, 242, 243, .20);

  --font-head: "Barlow Condensed", system-ui, sans-serif;
  --font-body: "Barlow", system-ui, sans-serif;

  --wrap: 1240px;
  --gutter: 32px;
  --header-h: 70px;
}

/* --------------------------------------------------------------- base ---- */

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

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }
figure { margin: 0; }

a { color: var(--accent-700); text-decoration: none; text-underline-offset: 3px; }
a:hover { color: var(--accent-600); text-decoration: underline; }

h1, h2, h3 { font-family: var(--font-head); font-weight: 600; margin: 0; }

/* Margins are declared explicitly wherever they are wanted, as in the source
   design. Without this reset every <p> carries the browser's 1em top+bottom,
   which is invisible at desktop sizes and dominates the scaled-down mockups. */
p { margin: 0; }

summary { list-style: none; }
summary::-webkit-details-marker { display: none; }

::selection { background: rgba(89, 128, 166, .3); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: var(--accent); color: var(--on-dark);
  padding: 10px 16px; font-family: var(--font-head); text-transform: uppercase;
}
.skip-link:focus { left: 0; }

/* ------------------------------------------------------------ layout ---- */

.wrap { max-width: var(--wrap); margin: 0 auto; padding-inline: var(--gutter); }

.section       { padding-block: 80px; }
.section--tight{ padding-block: 64px; }
.section--wide { padding-block: 88px; }
.rule-top      { border-top: 1px solid var(--line); }
.rule-bottom   { border-bottom: 1px solid var(--line); }

.band-dark    { background: var(--accent-900); color: var(--on-dark); }
.band-surface { background: var(--surface); }

/* Anchored sections must clear the sticky header. */
[id] { scroll-margin-top: var(--header-h); }

/* -------------------------------------------------------- typography ---- */

.kicker {
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-700);
}
.band-dark .kicker { color: var(--accent-400); }

.kicker-tag {
  display: inline-block;
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: .12em;
  background: var(--accent); color: var(--on-dark);
  padding: 5px 10px;
}

.eyebrow {
  font-family: var(--font-body);
  font-size: 11px; letter-spacing: .12em;
  color: var(--accent);
}

.label {
  font-family: var(--font-body);
  font-size: 9px; letter-spacing: .1em;
  color: var(--ink-55);
}
.label--accent { color: var(--accent-700); }

.h-hero { font-size: clamp(40px, 7.6vw, 74px); line-height: .98; letter-spacing: -.02em; text-wrap: balance; }
.h-page { font-size: clamp(36px, 6.4vw, 64px); line-height: 1;   letter-spacing: -.02em; }
.h-1    { font-size: clamp(32px, 5.6vw, 56px); line-height: 1.02; letter-spacing: -.015em; }
.h-2    { font-size: clamp(30px, 5.2vw, 52px); line-height: 1.04; letter-spacing: -.015em; }
.h-3    { font-size: clamp(28px, 4.6vw, 44px); line-height: 1.05; }
.h-4    { font-size: clamp(27px, 4.2vw, 42px); line-height: 1.06; }
.h-5    { font-size: clamp(26px, 4vw,   40px); line-height: 1.06; }

.lede      { font-size: clamp(16px, 1.6vw, 19px); line-height: 1.6;  color: var(--ink-70); margin: 0; }
.band-dark .lede { color: var(--on-dark-72); }
.body-lg   { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.65; color: var(--ink-70); margin: 0; }
.band-dark .body-lg { color: var(--on-dark-72); }
.body      { font-size: 16px; line-height: 1.65; color: var(--ink-70); margin: 0; }
.body-sm   { font-size: 14.5px; line-height: 1.6; color: var(--ink-65); margin: 0; }
.footnote  { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .06em; color: var(--ink-40); }

.measure-sm { max-width: 30em; }
.measure    { max-width: 44em; }
.measure-lg { max-width: 46em; }

.link-arrow {
  font-family: var(--font-body);
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--accent-700); white-space: nowrap;
}

/* ----------------------------------------------------------- buttons ---- */

.btn {
  display: inline-block; text-align: center;
  font-family: var(--font-head); font-weight: 600;
  font-size: 16px; text-transform: uppercase; letter-spacing: .04em;
  padding: 14px 26px; border: 1px solid transparent; border-radius: 0;
  cursor: pointer; text-decoration: none;
}
.btn:hover { text-decoration: none; }
.btn--primary { background: var(--accent); border-color: var(--accent); color: var(--on-dark); }
.btn--primary:hover { background: var(--accent-600); color: var(--on-dark); }
.btn--ghost { color: var(--ink); border-color: var(--line); }
.btn--ghost:hover { background: rgba(89, 128, 166, .1); color: var(--ink); }
.btn--sm { font-size: 14px; padding: 9px 16px; }
.btn--lg { padding: 15px 30px; white-space: nowrap; }
.btn--block { display: block; width: 100%; padding: 11px; font-size: 14px; }

/* --------------------------------------------- blueprint frame + marks ---- */

.frame { position: relative; border: 1px solid var(--line); background: var(--panel); }
.frame > .corner { position: absolute; width: 11px; height: 11px; color: var(--ink-55); }
.frame > .corner::before,
.frame > .corner::after { content: ""; position: absolute; background: currentColor; }
.frame > .corner::before { left: 5px; top: 0; width: 1px; height: 100%; }
.frame > .corner::after  { top: 5px; left: 0; width: 100%; height: 1px; }
.corner.tl { top: -6px; left: -6px; }
.corner.tr { top: -6px; right: -6px; }
.corner.bl { bottom: -6px; left: -6px; }
.corner.br { bottom: -6px; right: -6px; }

.frame--accent { border-color: var(--accent-400); background: rgba(148, 188, 227, .08); }
.frame--accent > .corner { color: var(--accent-400); }
.frame--accent-solid { border-color: var(--accent); background: var(--panel); box-shadow: 0 3px 10px rgba(43, 43, 45, .16); }
.frame--accent-solid > .corner { color: var(--accent); }
.frame--plain { background: transparent; }

.figcap {
  font-family: var(--font-body); font-size: 11px; letter-spacing: .06em;
  color: var(--ink-55); padding: 8px 12px; border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------- logo ----
   Two artworks, both transparent PNGs at 762x120 (aspect 6.35):
     logo.png        navy wordmark — for the light ground
     logo-light.png  pale wordmark — for the dark navy bands, where the navy
                     original is essentially invisible
   Sized by height only; width follows via the aspect ratio, so never set both.
   ------------------------------------------------------------------------ */

.logo { width: auto; }
.logo--header  { height: 26px; }
.logo--console { height: 15px; }
.logo--card    { height: 30px; margin-bottom: 20px; }
.logo--footer  { height: 24px; margin-bottom: 14px; }

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

.site-header {
  position: sticky; top: 0; z-index: 50;
  background: rgba(242, 242, 243, .92);
  backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--line);
}
.site-header .wrap {
  padding-block: 14px;
  display: flex; align-items: center; gap: 40px;
}
.site-header .brand { display: flex; align-items: center; flex-shrink: 0; }
.site-header .brand:hover { text-decoration: none; }
.site-header .brand img { height: 26px; width: auto; mix-blend-mode: multiply; }

.site-nav {
  display: flex; align-items: center; gap: 26px;
  font-family: var(--font-head); font-size: 16px;
  letter-spacing: .02em; text-transform: uppercase;
}
.site-nav a {
  color: var(--ink);
  padding-bottom: 3px;
  border-bottom: 2px solid transparent;
}
.site-nav a:hover { color: var(--ink); text-decoration: none; border-bottom-color: var(--line); }
.site-nav a[aria-current="page"] { border-bottom-color: var(--accent); }

.header-cta { margin-left: auto; display: flex; align-items: center; gap: 10px; }

/* --------------------------------------------------------------- hero ---- */

.hero {
  display: grid; grid-template-columns: 1.02fr .98fr; gap: 56px; align-items: center;
  padding-block: 80px 64px;
}
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; }
.hero-note {
  font-family: var(--font-body); font-size: 11.5px; letter-spacing: .06em; color: var(--ink-55);
}

/* --------------------------------------------------------- stat strip ---- */

.statbar { display: grid; grid-template-columns: repeat(4, 1fr); }
.statbar > div { padding: 26px 24px; border-left: 1px solid var(--line); }
.statbar > div:first-child { padding-left: 0; border-left: 0; }
.statbar > div:last-child { padding-right: 0; }
.stat-num {
  font-family: var(--font-head); font-weight: 600;
  font-size: clamp(30px, 3.4vw, 40px); line-height: 1; color: var(--accent-900);
}
.stat-lab {
  font-family: var(--font-body); font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-55); margin-top: 6px;
}

/* -------------------------------------------------------- replaced-by ---- */

.replace-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 36px; align-items: center; }
.tool-list {
  display: grid; gap: 1px; margin: 0; padding: 0; list-style: none;
  background: rgba(242, 242, 243, .18); border: 1px solid rgba(242, 242, 243, .18);
}
.tool-list > li {
  list-style: none;
  background: var(--accent-900); padding: 14px 18px;
  display: flex; justify-content: space-between; align-items: baseline; gap: 16px;
}
.tool-list .tool-name { font-family: var(--font-head); font-size: 20px; }
.tool-list .tool-n { font-family: var(--font-body); font-size: 11px; color: rgba(242, 242, 243, .5); white-space: nowrap; }
.replace-axis {
  font-family: var(--font-body); font-size: 12px; letter-spacing: .12em;
  color: var(--accent-400); writing-mode: vertical-rl; text-orientation: mixed;
}
.replace-card { padding: 36px 32px; }
.replace-copy { font-size: 17px; line-height: 1.65; color: rgba(242, 242, 243, .85); margin: 0 0 20px; }
.replace-card .logo-invert { margin: 0 0 20px; }

.chips { display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; list-style: none; }
.chip {
  font-family: var(--font-body); font-size: 11px; letter-spacing: .06em;
  border: 1px solid rgba(148, 188, 227, .5); color: var(--accent-400); padding: 5px 9px;
}
.chip--on { border-color: var(--accent-400); background: rgba(148, 188, 227, .18); color: var(--on-dark); }

/* ---------------------------------------------------------- two-up row ---- */

.split { display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; }
.split--even { grid-template-columns: 1fr 1fr; }
.split--wide-right { grid-template-columns: 1fr 1.6fr; }
.split--narrow-left { grid-template-columns: .8fr 1.4fr; }
.split--demo { grid-template-columns: 1.1fr .9fr; gap: 64px; }
.split-media-first > .split-media { order: -1; }

.steps-abc { display: grid; gap: 10px; }
.steps-abc > div { display: flex; gap: 12px; border-top: 1px solid var(--line); padding-top: 10px; }
.steps-abc .step-key {
  font-family: var(--font-body); font-size: 11px; color: var(--accent);
  flex-shrink: 0; padding-top: 3px;
}
.steps-abc .step-text { font-size: 15.5px; line-height: 1.55; }
.steps-abc strong { font-weight: 600; }

/* Bordered feature list used under the module copy. */
.rule-list { display: grid; gap: 8px; font-size: 15px; padding: 0; margin: 0; list-style: none; }
.rule-list > li { border-top: 1px solid var(--line); padding-top: 8px; }

/* ------------------------------------------------------ feature grids ---- */

.section-head {
  display: flex; align-items: flex-end; justify-content: space-between; gap: 40px;
}

/* Hairline grid: 1px gaps over a divider-coloured backdrop. */
.hairline-grid {
  display: grid; gap: 1px;
  background: var(--line); border: 1px solid var(--line);
}
.hairline-grid--3 { grid-template-columns: repeat(3, 1fr); }
.hairline-grid--2 { grid-template-columns: repeat(2, 1fr); }
.hairline-grid--4 { grid-template-columns: repeat(4, 1fr); }
.hairline-grid--dark {
  background: var(--on-dark-line); border-color: var(--on-dark-line);
}

.mod {
  background: var(--bg); padding: 28px 24px 30px;
  min-width: 0;
}
.mod:hover { background: #eaeef3; }
.mod--flagship { background: rgba(148, 188, 227, .16); }
.mod--flagship:hover { background: rgba(148, 188, 227, .16); }
.mod-n { font-family: var(--font-body); font-size: 11px; letter-spacing: .1em; color: var(--accent); margin-bottom: 14px; }
.mod-title { font-size: 26px; line-height: 1.1; margin-bottom: 10px; }

.hairline-grid--dark .mod { background: var(--accent-900); padding: 26px 22px; }
.hairline-grid--dark .mod:hover { background: var(--accent-900); }
.hairline-grid--dark .mod-n { color: var(--accent-400); }
.hairline-grid--dark .mod-title { font-size: 24px; margin-bottom: 8px; }
.hairline-grid--dark .body-sm { color: rgba(242, 242, 243, .7); }

.coming-soon { border: 1px solid var(--line); padding: 26px 26px 28px; }
.coming-soon-head { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.coming-soon .mod { padding: 22px 22px 24px; }
.coming-soon .mod-title { font-size: 24px; margin-bottom: 8px; }

/* --------------------------------------------------------- how it works ---- */

.steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }
.step { border-top: 2px solid var(--accent); padding-top: 22px; }
.step-num {
  font-family: var(--font-head); font-weight: 600;
  font-size: 64px; line-height: .9; color: var(--line); margin-bottom: 12px;
}
.step h3 { font-size: 28px; margin-bottom: 10px; }
.step p { font-size: 15.5px; line-height: 1.65; color: var(--ink-65); margin: 0; }

/* ------------------------------------------------------------ pills ---- */

.pills { display: flex; flex-wrap: wrap; gap: 10px; padding: 0; margin: 0; list-style: none; }
.pill { font-family: var(--font-head); font-size: 19px; border: 1px solid var(--line); padding: 9px 16px; }

/* ------------------------------------------------------ testimonials ---- */

.quote-card { background: var(--bg); padding: 32px 28px; min-width: 0; }
.quote-card blockquote {
  margin: 0 0 22px; font-family: var(--font-head);
  font-size: 24px; line-height: 1.28;
}
.quote-card figcaption {
  font-family: var(--font-body); font-size: 11px; letter-spacing: .06em;
  color: var(--ink-55); line-height: 1.7;
}

/* ---------------------------------------------------------- pricing ---- */

.pricing-lede { font-size: 17px; color: var(--ink-65); margin: 0 0 44px; max-width: 40em; }
.plans { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; align-items: stretch; }
.plan {
  border: 1px solid var(--line); background: var(--bg);
  padding: 26px 20px 24px; display: flex; flex-direction: column; min-width: 0;
}
.plan-head {
  display: flex; justify-content: space-between; align-items: center; gap: 8px;
  margin-bottom: 14px; min-height: 20px;
}
.plan-tier { font-family: var(--font-body); font-size: 11px; letter-spacing: .1em; color: var(--accent-700); }
.plan-flag {
  font-family: var(--font-body); font-size: 10px; letter-spacing: .08em;
  background: var(--accent); color: var(--on-dark); padding: 3px 7px; white-space: nowrap;
}
.plan h3 { font-size: 23px; line-height: 1.15; }
.plan-price { font-family: var(--font-head); font-weight: 600; font-size: 42px; line-height: 1; margin: 12px 0 2px; }
.plan-price span { font-size: 15px; font-weight: 400; color: var(--ink-55); }
.plan-blurb { font-size: 13.5px; line-height: 1.5; color: var(--ink-65); margin: 10px 0 18px; }
.plan-feats { display: grid; gap: 8px; font-size: 13.5px; line-height: 1.45; margin: 0 0 22px; padding: 0; list-style: none; }
.plan-feats > li { border-top: 1px solid var(--line); padding-top: 8px; }
.plan-feats strong { font-weight: 600; }
.plan .btn { margin-top: auto; }

.fees {
  margin-top: 20px; border: 1px solid var(--line); padding: 16px 20px;
  display: flex; flex-wrap: wrap; align-items: center; gap: 12px 32px;
}
.fees-title { font-family: var(--font-body); font-size: 11px; letter-spacing: .1em; color: var(--accent-700); }
.fees .fee { font-size: 14px; color: var(--ink-70); }
.fees .fee strong { font-weight: 600; }
.fees .fee--last { color: var(--ink-55); margin-left: auto; }

/* -------------------------------------------------------------- FAQ ---- */

.faq { border-top: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line); }
.faq summary {
  cursor: pointer; padding: 20px 0;
  font-family: var(--font-head); font-size: 24px;
  display: flex; justify-content: space-between; gap: 20px;
}
.faq summary .sign { color: var(--accent); }
.faq details[open] summary .sign::after { content: ""; }
.faq details[open] summary .sign { transform: rotate(45deg); display: inline-block; }
.faq p { font-size: 15.5px; line-height: 1.65; color: var(--ink-65); margin: 0 0 20px; max-width: 46em; }

/* ------------------------------------------------------------- form ---- */

.demo-form {
  position: relative; border: 1px solid rgba(242, 242, 243, .3);
  padding: 32px 30px; display: grid; gap: 16px;
}
.demo-form > .corner { color: var(--accent-400); }
.demo-form-title { font-family: var(--font-body); font-size: 11px; letter-spacing: .12em; color: var(--accent-400); margin: 0; }
/* Honeypot. Off-canvas rather than display:none — some bots skip hidden
   fields, and this stays in the layout for them while never being seen,
   focusable or announced. */
.hp {
  position: absolute; left: -9999px; top: auto;
  width: 1px; height: 1px; overflow: hidden;
}
.demo-status {
  font-family: var(--font-body); font-size: 12px; letter-spacing: .06em;
  color: var(--accent-400); margin: 0; min-height: 1em;
}
.demo-form label {
  display: grid; gap: 6px;
  font-family: var(--font-body); font-size: 11px; letter-spacing: .08em;
  color: var(--on-dark-60);
}
.demo-form input,
.demo-form select {
  font-family: var(--font-body); font-size: 15px;
  background: transparent; border: 1px solid rgba(242, 242, 243, .3);
  color: var(--on-dark); padding: 11px 12px; border-radius: 0;
}
.demo-form input::placeholder { color: rgba(242, 242, 243, .6); }
.demo-form select option { color: var(--ink); }
.demo-form button {
  font-family: var(--font-head); font-weight: 600; font-size: 16px;
  text-transform: uppercase; letter-spacing: .04em;
  background: var(--accent); color: var(--on-dark);
  border: 0; padding: 14px; cursor: pointer; border-radius: 0;
}
.demo-form button:hover { background: var(--accent-500); }
.demo-form button[disabled] { cursor: default; background: var(--accent-600); }

.demo-points {
  display: grid; gap: 8px;
  font-family: var(--font-body); font-size: 12px; letter-spacing: .06em;
  color: var(--on-dark-60); padding: 0; margin: 0; list-style: none;
}

/* --------------------------------------------------------- CTA banner ---- */

.cta-band {
  display: flex; align-items: center; justify-content: space-between;
  gap: 40px; flex-wrap: wrap;
}

/* ----------------------------------------------------------- console ---- */
/* Static product mockups. Purely decorative — hidden from assistive tech. */

.console-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
}
.console-bar img { height: 15px; width: auto; mix-blend-mode: multiply; }
.console-split { display: grid; grid-template-columns: 1.25fr 1fr; }
.console-cell { padding: 16px 14px; min-width: 0; }
.console-cell--divided { border-right: 1px solid var(--line); }
.console-cell--stacked { padding: 16px 18px; border-bottom: 1px solid var(--line); }
.record-split { display: grid; grid-template-columns: 1.15fr 1fr; }
.phone-stage { background: var(--surface); padding: 26px; display: flex; justify-content: center; }
.console-tabs {
  display: flex; gap: 13px;
  font-family: var(--font-body); font-size: 9.5px; letter-spacing: .1em; color: var(--ink-55);
}
.console-tabs .on { color: var(--accent-700); border-bottom: 1.5px solid var(--accent); padding-bottom: 3px; }
.console-dot { margin-left: auto; width: 18px; height: 18px; border: 1px solid rgba(29, 31, 32, .25); border-radius: 50%; }

.kpis { display: grid; grid-template-columns: repeat(4, 1fr); }
.kpis--3 { grid-template-columns: repeat(3, 1fr); }
.kpis > div { padding: 14px; border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); min-width: 0; }
.kpis > div:last-child { border-right: 0; }
.kpi-num { font-family: var(--font-head); font-weight: 600; font-size: 30px; line-height: 1.1; }
.kpi-num--accent { color: var(--accent-700); }
.kpis--3 .kpi-num { font-size: 28px; }
.kpis--3 > div { padding: 12px 14px; }

.chart { display: flex; align-items: flex-end; gap: 6px; height: 96px; }
.chart--sm { gap: 5px; height: 82px; }
.chart > span { flex: 1; display: block; }
.chart-axis {
  display: flex; justify-content: space-between;
  font-family: var(--font-body); font-size: 8.5px; letter-spacing: .08em; color: var(--ink-40);
  margin-top: 7px; border-top: 1px solid var(--line); padding-top: 6px;
}
.b300 { background: var(--accent-300); }
.b400 { background: var(--accent-400); }
.b500 { background: var(--accent-500); }
.b600 { background: var(--accent); }

.door-list { display: grid; gap: 9px; }
.door-list > div { display: flex; align-items: center; gap: 9px; }
.door-list .marker { width: 7px; height: 7px; background: var(--accent); flex-shrink: 0; }
.door-list .marker--open { background: transparent; border: 1.5px solid var(--ink); }
.door-list .name { font-size: 12.5px; }
.door-list .time { margin-left: auto; font-family: var(--font-body); font-size: 9px; color: var(--ink-45); }
.door-list .flag {
  margin-left: auto; font-family: var(--font-body); font-size: 8.5px; letter-spacing: .06em;
  border: 1px solid rgba(29, 31, 32, .3); padding: 1px 5px;
}

.mail-head { display: flex; align-items: baseline; gap: 10px; margin-bottom: 8px; flex-wrap: wrap; }
.mail-from { font-family: var(--font-head); font-weight: 600; font-size: 20px; }
.mail-badge { font-family: var(--font-body); font-size: 9px; letter-spacing: .08em; border: 1px solid rgba(29, 31, 32, .3); padding: 1px 6px; }
.mail-time { margin-left: auto; font-family: var(--font-body); font-size: 9px; color: var(--ink-45); }
.mail-body { font-size: 14px; line-height: 1.55; color: var(--ink-70); margin: 0; }

.kv { display: grid; gap: 8px 18px; font-size: 12.5px; }
.kv--2 { grid-template-columns: 1fr 1fr; }
.kv > div { display: flex; justify-content: space-between; gap: 8px; border-bottom: 1px solid var(--line-soft); padding-bottom: 5px; min-width: 0; }
.kv .k { color: var(--ink-65); }
.kv .v--accent { color: var(--accent-700); }

.kv-rows { display: grid; gap: 7px; font-size: 12.5px; }
.kv-rows > div { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid rgba(29, 31, 32, .14); padding-top: 6px; }
.kv-rows .k { color: var(--ink-65); }

.draft-quote {
  font-size: 13.5px; line-height: 1.6; color: rgba(29, 31, 32, .82);
  margin: 0; border-left: 2px solid var(--accent); padding-left: 12px;
}

.action-row { display: flex; align-items: center; gap: 10px; border: 1px solid rgba(29, 31, 32, .2); padding: 8px 10px; }
.action-row .tick {
  width: 14px; height: 14px; border: 1.5px solid var(--accent); flex-shrink: 0;
  background:
    linear-gradient(var(--accent), var(--accent)) center / 8px 1.5px no-repeat,
    linear-gradient(var(--accent), var(--accent)) center / 1.5px 8px no-repeat;
}
.action-row .txt { font-size: 13px; }
.fake-btn {
  font-family: var(--font-head); font-weight: 600; font-size: 13px;
  text-transform: uppercase; letter-spacing: .04em; padding: 8px 14px;
}
.fake-btn--primary { background: var(--accent); color: var(--on-dark); }
.fake-btn--ghost { border: 1px solid rgba(29, 31, 32, .2); }
.fake-btn-row { display: flex; align-items: center; gap: 10px; padding-top: 2px; flex-wrap: wrap; }

.avatar {
  width: 38px; height: 38px; border: 1px solid rgba(29, 31, 32, .25);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-head); font-weight: 600; font-size: 17px; color: var(--accent-700);
}
.tags { display: flex; gap: 6px; flex-wrap: wrap; }
.tag-out {
  font-family: var(--font-body); font-size: 10px; letter-spacing: .06em;
  border: 1px solid rgba(29, 31, 32, .28); padding: 3px 7px;
}
.tag-out--accent { border-color: var(--accent); color: var(--accent-700); }

.timeline { display: grid; gap: 11px; font-size: 12px; line-height: 1.4; }
.timeline > div { border-left: 2px solid rgba(29, 31, 32, .2); padding-left: 10px; }
.timeline > div.now { border-left-color: var(--accent); }
.timeline .when { color: var(--ink-55); font-size: 10.5px; }

/* QR mockups drawn in CSS. */
.qr {
  width: 112px; height: 112px; background: var(--bg); padding: 9px;
  display: grid; grid-template-columns: repeat(7, 1fr); grid-template-rows: repeat(7, 1fr); gap: 2px;
}
.qr > span { display: block; }
.qr .eye { border: 3px solid var(--accent-900); }
.qr .px { background: var(--accent-900); }
.qr--sm {
  width: 46px; height: 46px; background: var(--accent-900); padding: 5px;
  grid-template-columns: repeat(5, 1fr); grid-template-rows: repeat(5, 1fr); gap: 1px;
}
.qr--sm .eye { border: 2px solid var(--panel); }
.qr--sm .px { background: var(--panel); }

.source-bars { display: grid; gap: 7px; font-size: 12px; }
.source-bars > div { display: flex; align-items: center; gap: 8px; }
.source-bars .src { width: 88px; color: var(--ink-65); flex-shrink: 0; }
.source-bars .bar { height: 7px; }
.source-bars .n { margin-left: auto; }

.phone {
  width: 236px; border: 1px solid rgba(29, 31, 32, .3);
  background: var(--panel); padding: 8px 8px 12px;
}
.phone-status {
  display: flex; justify-content: space-between;
  font-family: var(--font-body); font-size: 9px; letter-spacing: .08em;
  color: var(--ink-55); padding: 2px 4px 8px;
}
.phone-card { border: 1px solid rgba(29, 31, 32, .18); padding: 12px 12px 14px; margin-bottom: 8px; }
.phone-row {
  border: 1px solid rgba(29, 31, 32, .18); padding: 9px 10px;
  display: flex; align-items: center; gap: 8px;
}
.phone-row .t { font-size: 12px; }
.phone-row .s { font-size: 10px; color: var(--ink-55); }
.phone-chip { font-family: var(--font-body); font-size: 9px; letter-spacing: .06em; border: 1px solid rgba(29, 31, 32, .3); padding: 3px 6px; }
.phone-chip--on { background: var(--accent); color: var(--on-dark); border-color: var(--accent); }
.phone-tabs {
  border-top: 1px solid rgba(29, 31, 32, .18); margin-top: 10px; padding-top: 9px;
  display: flex; justify-content: space-between;
  font-family: var(--font-body); font-size: 9px; letter-spacing: .08em; color: var(--ink-55);
}

.door-panel { background: var(--accent-900); color: var(--on-dark); padding: 26px 24px 24px; }
.door-panel-head {
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--font-body); font-size: 10px; letter-spacing: .1em;
  color: rgba(242, 242, 243, .55); margin-bottom: 20px;
}
.door-scan { display: grid; grid-template-columns: auto 1fr; gap: 22px; align-items: center; }
.door-name { font-family: var(--font-head); font-weight: 600; font-size: 34px; line-height: 1.05; margin-bottom: 4px; }
.door-kv { display: grid; gap: 6px; font-size: 12.5px; }
.door-kv > div { display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid var(--on-dark-line); padding-top: 5px; }
.door-kv .k { color: rgba(242, 242, 243, .6); }
.door-foot {
  margin-top: 20px; border-top: 1px solid var(--on-dark-line); padding-top: 12px;
  display: flex; gap: 20px; flex-wrap: wrap;
  font-family: var(--font-body); font-size: 10px; letter-spacing: .08em; color: rgba(242, 242, 243, .5);
}

.crumb {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 14px; border-bottom: 1px solid var(--line);
  font-family: var(--font-body); font-size: 10px; letter-spacing: .1em; color: var(--ink-55);
  flex-wrap: wrap;
}
.crumb .state { margin-left: auto; border: 1px solid rgba(29, 31, 32, .25); padding: 2px 7px; }

/* ------------------------------------------------------- industries ---- */

.ind-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.ind-icon {
  display: flex; width: 34px; height: 34px; flex-shrink: 0;
  align-items: center; justify-content: center;
  border: 1px solid var(--line); color: var(--accent);
}
.ind-card { background: var(--bg); padding: 30px 26px; min-width: 0; }
.ind-card h3 { font-size: 28px; }
.ind-meta { font-family: var(--font-body); font-size: 10.5px; letter-spacing: .08em; color: var(--accent-700); }

/* ----------------------------------------------------------- footer ---- */

.site-footer { border-top: 1px solid var(--line); }
.footer-grid {
  padding-block: 48px 56px;
  display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 40px;
}
.footer-grid img { height: 24px; width: auto; mix-blend-mode: multiply; margin-bottom: 14px; }
.footer-blurb { font-size: 14.5px; line-height: 1.6; color: rgba(29, 31, 32, .6); max-width: 26em; margin: 0; }
.footer-col { display: grid; gap: 9px; align-content: start; font-size: 14.5px; }
.footer-col h2 {
  font-family: var(--font-body); font-weight: 400;
  font-size: 10.5px; letter-spacing: .1em; color: var(--ink-55); margin-bottom: 4px;
}
.footer-bar { border-top: 1px solid var(--line); }
.footer-bar .wrap {
  padding-block: 16px;
  display: flex; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  font-family: var(--font-body); font-size: 10.5px; letter-spacing: .08em; color: var(--ink-45);
}

/* =================================================== mockup scaling ======
   The product mockups are pictures of software, not layout. Reflowing them on
   a phone — stacking the KPI strip, dropping the chart below the door feed —
   turns a recognisable dashboard into a tall stack of unrelated boxes.

   So they keep their desktop column structure at every width and shrink
   instead. Each mockup is a size container, and its internals are sized in
   cqw (percent of the container's own width), which makes the whole thing
   scale proportionally, like an image. The cqw figures below are the design's
   pixel values divided by ~5.5px, the container width at desktop, so the
   desktop rendering is unchanged.

   The tiny type this produces on a phone is fine: every mockup carries
   role="img" with a descriptive aria-label, so the content reaches assistive
   tech regardless of the rendered size.
   ======================================================================== */

.mock { container-type: inline-size; }

.mock .label            { font-size: clamp(5.5px, 1.64cqw, 9px); }
.mock .console-bar      { padding: clamp(6px, 1.82cqw, 10px) clamp(7px, 2.55cqw, 14px);
                          gap: clamp(6px, 2.55cqw, 14px); }
.mock .console-tabs     { font-size: clamp(5.5px, 1.73cqw, 9.5px); gap: clamp(5px, 2.37cqw, 13px); }
.mock .logo--console    { height: clamp(9px, 2.73cqw, 15px); }
.mock .console-dot      { width: clamp(11px, 3.28cqw, 18px); height: clamp(11px, 3.28cqw, 18px); }
.mock .kpis > div       { padding: clamp(7px, 2.55cqw, 14px); }
.mock .kpis--3 > div    { padding: clamp(6px, 2.19cqw, 12px) clamp(7px, 2.55cqw, 14px); }
.mock .kpi-num          { font-size: clamp(17px, 5.46cqw, 30px); }
.mock .kpis--3 .kpi-num { font-size: clamp(16px, 5.1cqw, 28px); }
.mock .console-cell     { padding: clamp(8px, 2.91cqw, 16px) clamp(7px, 2.55cqw, 14px); }
.mock .console-cell--stacked { padding: clamp(8px, 2.91cqw, 16px) clamp(9px, 3.28cqw, 18px); }
.mock .chart            { height: clamp(52px, 17.5cqw, 96px); gap: clamp(3px, 1.09cqw, 6px); }
.mock .chart--sm        { height: clamp(46px, 14.9cqw, 82px); gap: clamp(2px, .91cqw, 5px); }
.mock .chart-axis       { font-size: clamp(5.5px, 1.55cqw, 8.5px); }
.mock .figcap           { font-size: clamp(7px, 2cqw, 11px); padding: clamp(5px, 1.46cqw, 8px) clamp(7px, 2.19cqw, 12px); }
.mock .crumb            { font-size: clamp(6px, 1.82cqw, 10px); padding: clamp(6px, 1.82cqw, 10px) clamp(7px, 2.55cqw, 14px); }

.mock .door-list        { gap: clamp(5px, 1.64cqw, 9px); }
.mock .door-list .name  { font-size: clamp(8.5px, 2.28cqw, 12.5px); }
.mock .door-list .time  { font-size: clamp(6px, 1.64cqw, 9px); }
.mock .door-list .flag  { font-size: clamp(5.5px, 1.55cqw, 8.5px); }

.mock .mail-from        { font-size: clamp(13px, 3.64cqw, 20px); }
.mock .mail-badge       { font-size: clamp(5.5px, 1.64cqw, 9px); }
.mock .mail-time        { font-size: clamp(6px, 1.64cqw, 9px); }
.mock .mail-body        { font-size: clamp(9px, 2.55cqw, 14px); }
.mock .kv               { font-size: clamp(8px, 2.28cqw, 12.5px); }
.mock .kv-rows          { font-size: clamp(8px, 2.28cqw, 12.5px); }
.mock .draft-quote      { font-size: clamp(9px, 2.46cqw, 13.5px); }
.mock .action-row       { padding: clamp(5px, 1.46cqw, 8px) clamp(6px, 1.82cqw, 10px); gap: clamp(6px, 1.82cqw, 10px); }
.mock .action-row .txt  { font-size: clamp(8.5px, 2.37cqw, 13px); }
.mock .action-row .tick { width: clamp(10px, 2.55cqw, 14px); height: clamp(10px, 2.55cqw, 14px); }
.mock .fake-btn         { font-size: clamp(8.5px, 2.37cqw, 13px); padding: clamp(5px, 1.46cqw, 8px) clamp(9px, 2.55cqw, 14px); }

.mock .avatar           { width: clamp(26px, 6.9cqw, 38px); height: clamp(26px, 6.9cqw, 38px); font-size: clamp(12px, 3.1cqw, 17px); }
.mock .tag-out          { font-size: clamp(6px, 1.82cqw, 10px); }
.mock .timeline         { font-size: clamp(8px, 2.19cqw, 12px); }
.mock .timeline .when   { font-size: clamp(7px, 1.91cqw, 10.5px); }

.mock .qr               { width: clamp(72px, 20.4cqw, 112px); height: clamp(72px, 20.4cqw, 112px); }
.mock .qr--sm           { width: clamp(32px, 8.4cqw, 46px); height: clamp(32px, 8.4cqw, 46px); }
.mock .door-panel       { padding: clamp(14px, 4.7cqw, 26px) clamp(13px, 4.4cqw, 24px); }
.mock .door-panel-head  { font-size: clamp(6px, 1.82cqw, 10px); }
.mock .door-name        { font-size: clamp(21px, 6.19cqw, 34px); }
.mock .door-kv          { font-size: clamp(8px, 2.28cqw, 12.5px); }
.mock .door-foot        { font-size: clamp(6px, 1.82cqw, 10px); }
.mock .door-scan        { gap: clamp(11px, 4cqw, 22px); }

.mock .source-bars      { font-size: clamp(8px, 2.19cqw, 12px); }
.mock .source-bars .src { width: clamp(56px, 16cqw, 88px); }

/* Text that the design set inline at a fixed size. Same treatment, expressed
   as classes so the container scaling can reach it. */
.mock .m-name    { font-size: clamp(14px, 3.93cqw, 22px); line-height: 1.1; }
.mock .m-sub     { font-size: clamp(7.5px, 2.05cqw, 11.5px); color: var(--ink-55); }
.mock .door-sub  { font-size: clamp(9px, 2.5cqw, 14px); }

/* The phone keeps its 236px design width — its internals are drawn for exactly
   that, and it fits inside the stage even on a 390px screen. Only the stage
   padding gives way, so nothing has to reflow. */
.phone-stage.mock { padding: clamp(10px, 4.6cqw, 26px); }
.mock .phone      { width: 236px; max-width: 100%; }

/* ========================================================== responsive ====
   The source design is fixed-width; these are the rules that make it hold
   together below 1240px. Every multi-column grid collapses, and every grid
   child carries min-width:0 so long strings cannot push the track wider
   than the viewport.
   ========================================================================= */

.hero > *, .split > *, .replace-grid > *, .steps > *, .footer-grid > * { min-width: 0; }

@media (max-width: 1080px) {
  :root { --gutter: 24px; }

  .hero { gap: 40px; padding-block: 56px 48px; }
  .split, .split--even, .split--wide-right, .split--narrow-left, .split--demo { gap: 40px; }

  .plans { grid-template-columns: repeat(3, 1fr); }
  .hairline-grid--4 { grid-template-columns: repeat(2, 1fr); }

  .replace-grid { grid-template-columns: 1fr; gap: 24px; }
  .replace-axis { writing-mode: horizontal-tb; text-align: center; }
}

@media (max-width: 900px) {
  .site-header .wrap { gap: 16px; flex-wrap: wrap; }
  .site-nav { order: 3; width: 100%; gap: 20px; overflow-x: auto; padding-bottom: 2px; }
  .header-cta { margin-left: auto; }

  .hero { grid-template-columns: 1fr; }
  .split, .split--even, .split--wide-right, .split--narrow-left, .split--demo { grid-template-columns: 1fr; }
  /* On one column the copy must lead, whatever the desktop order was. */
  .split-media-first > .split-media { order: 1; }

  .hairline-grid--3 { grid-template-columns: repeat(2, 1fr); }
  .steps { grid-template-columns: 1fr; gap: 28px; }
  .section-head { flex-direction: column; align-items: flex-start; gap: 20px; }

  .statbar { grid-template-columns: repeat(2, 1fr); }
  .statbar > div { padding: 22px 18px; border-left: 1px solid var(--line); border-top: 1px solid var(--line); }
  .statbar > div:nth-child(-n+2) { border-top: 0; }
  .statbar > div:nth-child(odd) { padding-left: 0; border-left: 0; }
  .statbar > div:nth-child(even) { padding-right: 0; }

  .fees .fee--last { margin-left: 0; }
}

@media (max-width: 720px) {
  :root { --gutter: 20px; }

  .section, .section--wide { padding-block: 56px; }
  .section--tight { padding-block: 44px; }

  .plans { grid-template-columns: 1fr; }
  .hairline-grid--3, .hairline-grid--2, .hairline-grid--4 { grid-template-columns: 1fr; }

  /* The product mockups deliberately keep their desktop column structure at
     every width — see "mockup scaling" above. They shrink, they do not reflow. */

  .footer-grid { grid-template-columns: 1fr 1fr; gap: 32px; }
  .footer-grid > :first-child { grid-column: 1 / -1; }

  .faq summary { font-size: 20px; padding: 16px 0; }
  .step-num { font-size: 52px; }
  .quote-card blockquote { font-size: 21px; }
  .tool-list .tool-name { font-size: 18px; }
}

@media (max-width: 420px) {
  .footer-grid { grid-template-columns: 1fr; }
}

@media print {
  .site-header { position: static; }
}