/* landing.css — mybaibs.com landing (.lp) + privacy (.pp) views. landing-brand, 2026-09-03.
   Loaded by the router ONLY while the home/privacy views are active (data-lp-asset) and removed
   before any other view renders, so authed views never see it. Every value is a token from
   design-tokens.css; the only literal px are the 1px hairlines and the crop geometry of the
   nav lockup. Scoped under [data-app="mybaibs"] / .lp / .pp so nothing here can reach another view.

   Brand rules in force (landing-brand §1.3). The blue/pink pair appears in exactly five places:
     1. the MB mark (an <img>, the logo's own pixels)
     2. the .lp-wordmark__text gradient wordmark
     3. .lp-btn--primary (gradient fill)
     4. .lp-hero__atmo (the two atmosphere lobes)
     5. .lp-diff__col--ours (one gradient hairline on the card's top edge)
   Plus the H1's single text glow (--glow-text, in --app-accent) and focus rings, both from tokens.
   Nowhere else: no gradient headings, no coloured section labels, no coloured icons, no coloured
   link or footer hovers. Gradient TEXT is the wordmark's alone. */

/* ---- 0. Neutralise the SPA shell's global styles while the landing owns the page ---------- */
@media (prefers-reduced-motion: no-preference) {
  [data-app="mybaibs"] { scroll-behavior: smooth; }
}
[data-app="mybaibs"] body {
  display: block;
  min-height: auto;
  padding: 0;
  margin: 0;
  background: var(--bg-void);
  animation: none;
  color: var(--text-primary);
  font-family: var(--font-ui);
  -webkit-font-smoothing: antialiased;
}
/* The login's field, kept: the legacy body::before already carries the geometry (fixed, inset 0,
   1px lines, z-index 0, behind #app) — we only retint it to the tokens so the grid reads exactly
   as it does on /login. body::after (the legacy lobes) stays off; the hero owns the atmosphere. */
[data-app="mybaibs"] body::before {
  display: block;
  background-image:
    linear-gradient(var(--grid-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line) 1px, transparent 1px);
  background-size: var(--grid-cell) var(--grid-cell);
}
[data-app="mybaibs"] body::after { display: none; }
[data-app="mybaibs"] #app { display: block; max-width: none; width: 100%; padding: 0; animation: none; }
[data-app="mybaibs"] .top-bar,
[data-app="mybaibs"] .footer { display: none; }

/* ---- 1. Frame ------------------------------------------------------------------------------ */
.lp {
  font-family: var(--font-ui);
  color: var(--text-primary);
  background: transparent;       /* the field (body + its grid) shows through */
  line-height: var(--lh-body);
  overflow-x: clip;
  min-height: 100vh;             /* page root fills the viewport so the footer never floats above a void gap */
  display: flex;
  flex-direction: column;
}
.lp-main { flex: 1 0 auto; }
.lp-wrap { width: 100%; max-width: var(--measure-page); margin-inline: auto; padding-inline: var(--s4); }
@media (min-width: 480px)  { .lp-wrap { padding-inline: var(--s5); } }
@media (min-width: 768px)  { .lp-wrap { padding-inline: var(--s8); } }
/* Resets use :where() so they never outrank the block rules below (0,1,0 vs 0,1,1). */
.lp :where(h1, h2, h3) { margin: 0; font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--track-tight); text-wrap: balance; }
.lp :where(p, dl, dd) { margin: 0; }
.lp-section { padding-block: var(--s12); scroll-margin-top: var(--nav-h); }
@media (min-width: 768px) { .lp-section { padding-block: var(--s20); } }
.lp-section h2 { font-size: var(--text-2xl); }
@media (min-width: 1024px) { .lp-section h2 { font-size: var(--text-3xl); } }

/* Section eyebrow — the login's uppercase tracked subhead ("SIGN IN TO YOUR ACCOUNT"), reused as
   a label above each section h2. Same words as the h2, uppercased; aria-hidden so the heading is
   announced once. Sits on --bg-void or --bg-base; --text-secondary clears 4.5:1 on both. */
.lp-eyebrow {
  display: block;
  margin-bottom: var(--s3);
  font-size: var(--text-xs);
  font-weight: 600;
  letter-spacing: var(--track-wide);
  text-transform: uppercase;
  color: var(--text-secondary);
}

/* ---- 2. Nav -------------------------------------------------------------------------------- */
.lp-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  height: var(--nav-h);
  display: flex;
  align-items: center;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease);
}
.lp-nav.is-scrolled { background: var(--nav-scrim); border-bottom-color: var(--border-subtle); }
.lp-nav__inner { display: flex; align-items: center; gap: var(--s4); position: relative; }

/* The lockup: the MB mark beside the gradient wordmark, as on /login. */
.lp-wordmark {
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  text-decoration: none;
  white-space: nowrap;
  border-radius: var(--r-sm);
}
.lp-wordmark__mark { height: var(--s6); width: auto; display: block; }
.lp-wordmark__text {
  font-family: var(--font-wordmark);
  font-weight: 700;
  font-size: var(--text-md);
  letter-spacing: var(--track-wordmark);
  line-height: var(--lh-tight);
  padding-bottom: 0.08em;                /* Orbitron descender room under the clipped gradient */
  background-image: var(--mb-gradient);  /* gradient TEXT — the wordmark only */
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}
@media (min-width: 480px) { .lp-wordmark__text { font-size: var(--text-lg); } }
.lp-nav__links { display: none; }
.lp-nav__links a {
  color: var(--text-secondary);
  text-decoration: none;
  font-size: var(--text-md);
  font-weight: 600;
  padding: var(--s2) var(--s3);
  border-radius: var(--r-sm);
  transition: color var(--dur) var(--ease);
  white-space: nowrap;
}
.lp-nav__links a:hover { color: var(--text-primary); }
.lp-nav__actions { margin-left: auto; display: flex; align-items: center; gap: var(--s2); }
.lp-nav__login {
  color: var(--text-secondary);
  text-decoration: none;
  font-weight: 600;
  font-size: var(--text-sm);
  padding: var(--s2) var(--s2);
  border-radius: var(--r-sm);
  white-space: nowrap;
  transition: color var(--dur) var(--ease);
}
.lp-nav__login:hover { color: var(--text-primary); }
/* Scoped to the nav: .lp-btn (section 3) is later in the cascade at equal specificity. */
.lp-nav__actions .lp-nav__cta { font-size: var(--text-sm); padding: var(--s2) var(--s3); white-space: nowrap; }
.lp-nav__toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--s8);
  height: var(--s10);
  padding: 0;
  background: transparent;
  border: 0;
  border-radius: var(--r-sm);
  color: var(--text-secondary);
  cursor: pointer;
  transition: color var(--dur) var(--ease);
}
.lp-nav__toggle:hover { color: var(--text-primary); }
.lp-nav__toggle .lp-ico { width: var(--s6); height: var(--s6); display: block; }
.lp-nav__toggle .lp-ico--close { display: none; }
.lp-nav.is-open .lp-nav__toggle .lp-ico--open { display: none; }
.lp-nav.is-open .lp-nav__toggle .lp-ico--close { display: block; }
@media (max-width: 767.98px) {
  .lp-nav.is-open { background: var(--nav-scrim); border-bottom-color: var(--border-subtle); }
  .lp-nav.is-open .lp-nav__links {
    display: flex;
    flex-direction: column;
    gap: var(--s1);
    position: absolute;
    top: var(--nav-h);
    left: 0;
    right: 0;
    padding: var(--s3) var(--s3) var(--s5);
    background: var(--bg-surface);
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-2);
  }
  .lp-nav.is-open .lp-nav__links a { padding: var(--s3); font-size: var(--text-lg); }
}
/* Narrow phones: lockup + Log in + CTA + toggle must fit inside 360px without clipping. */
@media (max-width: 479.98px) {
  .lp-nav__inner { gap: var(--s2); }
  .lp-nav__actions { gap: var(--s1); }
  .lp-nav__login { padding-inline: var(--s1); }
  .lp-nav__actions .lp-nav__cta { font-size: var(--text-xs); padding: var(--s2) var(--s2); }
  .lp-nav__toggle { width: var(--s6); }
}
@media (min-width: 768px) {
  .lp-nav__inner { gap: var(--s6); }
  .lp-nav__links { display: flex; gap: var(--s1); }
  .lp-nav__actions { gap: var(--s3); }
  .lp-nav__login { font-size: var(--text-md); padding-inline: var(--s3); }
  .lp-nav__actions .lp-nav__cta { font-size: var(--text-md); padding: var(--s2) var(--s5); }
  .lp-nav__toggle { display: none; }
}

/* ---- 3. Buttons ---------------------------------------------------------------------------- */
.lp-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--s2);
  padding: var(--s3) var(--s6);
  border-radius: var(--r-md);
  border: 1px solid transparent;
  font: inherit;
  font-size: var(--text-md);
  font-weight: 600;
  line-height: var(--lh-snug);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease),
              border-color var(--dur) var(--ease), opacity var(--dur) var(--ease);
}
/* The one gradient control. Weight 700 at --text-btn (18.67px) makes it WCAG large text, so the
   3:1 floor applies: #FFFFFF measures 3.39:1 on the blue stop and 3.34:1 on the pink stop —
   the pink is the lightest point of the ramp, so the whole fill clears the bar. */
.lp-btn--primary {
  background-color: var(--mb-blue);         /* fallback if background-image is dropped */
  background-image: var(--mb-gradient-loop);
  /* The seam fix. .lp-btn carries `border: 1px solid transparent` so the primary and the ghost
     (which has a real border-color) come out the same height. With the default
     `background-origin: padding-box` the gradient TILE is sized and placed to the padding box
     while `background-clip: border-box` paints the border box, so `background-repeat: repeat`
     filled that 1px ring with the NEIGHBOURING tile — the ramp's end on the left edge, its start
     on the right. At DPR 3 that measured as 3 device px of saturated pink down the left edge of a
     blue fill, and 3 device px of blue down the right edge of a pink one, plus the same wrap along
     the corner arcs. Painting from the border box removes the disagreement; no-repeat makes the
     wrap structurally impossible; overflow: clip keeps any future child inside the radius. */
  background-origin: border-box;
  background-clip: border-box;
  background-repeat: no-repeat;
  background-size: 200% 200%;
  overflow: clip;
  color: var(--text-on-gradient);
  font-size: var(--text-btn);
  font-weight: 700;
}
.lp-btn--primary:hover { background-image: var(--mb-gradient-loop-hover); }
.lp-btn--primary:disabled { opacity: .6; cursor: default; }
.lp-btn--primary:disabled:hover { background-image: var(--mb-gradient-loop); }
/* The sweep — the /login .form-btn motion, brand stops. The animation is declared ONLY here, so
   under `prefers-reduced-motion: reduce` the element has no animation-name at all and
   getAnimations() is empty (the global reduce rule in design-tokens.css only shortens durations;
   it would otherwise leave a 0.001ms animation on the element). */
@media (prefers-reduced-motion: no-preference) {
  .lp-btn--primary { animation: lpBtnGradient var(--dur-gradient-loop) var(--ease-gradient-loop) infinite; }
}
@keyframes lpBtnGradient {
  0%   { background-position: 0% 50%; }
  50%  { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}
/* Reduce: the static --mb-gradient (to right), exactly as before this run — but painted from the
   border box, so it carries the seam fix too. */
@media (prefers-reduced-motion: reduce) {
  .lp-btn--primary { background-image: var(--mb-gradient); background-size: auto; }
  .lp-btn--primary:hover { background-image: var(--mb-gradient-hover); }
  .lp-btn--primary:disabled:hover { background-image: var(--mb-gradient); }
}
/* Chrome button — the login top-bar's language (translucent white on the field). Carries no
   brand colour, so the nav can stay compact at 390 without breaking the contrast floor. */
.lp-btn--ghost {
  background-color: var(--input-bg);
  border-color: var(--input-border);
  color: var(--text-primary);
}
.lp-btn--ghost:hover {
  background-color: color-mix(in srgb, var(--text-primary) 14%, transparent);
  border-color: color-mix(in srgb, var(--text-primary) 32%, transparent);
}

/* ---- 4. Hero ------------------------------------------------------------------------------- */
.lp-hero {
  position: relative;
  isolation: isolate;
  overflow: clip;
  min-height: var(--hero-min);
  display: flex;
  align-items: center;
  padding-block: var(--s12) var(--s16);
}
@media (min-width: 1024px) { .lp-hero { padding-block: var(--s16) var(--s20); } }
.lp-hero__atmo {
  position: absolute;
  inset: -35% -25%;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(ellipse 34% 30% at 24% 70%, var(--aurora-core), transparent 100%),
    radial-gradient(ellipse 36% 32% at 76% 28%, var(--aurora-cool), transparent 100%),
    radial-gradient(ellipse 60% 55% at 50% 50%, var(--aurora-halo), transparent 100%);
  transform: rotate(-12deg);
  will-change: transform;
}
.lp--motion .lp-hero__atmo { animation: lp-rotate var(--dur-ambient) linear infinite; }
@keyframes lp-rotate {
  from { transform: rotate(-12deg); }
  to   { transform: rotate(348deg); }
}
.lp-hero__floor {
  position: absolute;
  left: -25%;
  right: -25%;
  bottom: 0;
  height: 50%;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(var(--grid-line-floor) 1px, transparent 1px),
    linear-gradient(90deg, var(--grid-line-floor) 1px, transparent 1px);
  background-size: var(--s16) var(--s16);
  background-position: center bottom;
  transform: perspective(var(--perspective-floor)) rotateX(64deg);
  transform-origin: 50% 100%;
  -webkit-mask-image: linear-gradient(to top, var(--mask-solid) 0%, transparent 100%);
  mask-image: linear-gradient(to top, var(--mask-solid) 0%, transparent 100%);
}
.lp-hero__inner { position: relative; z-index: 1; }
/* Hero eyebrow — the same .lp-eyebrow language as the section labels (uppercase, --track-wide,
   --text-secondary, no brand pair). It expands the wordmark once, above the headline; the gap is
   a step wider than a section eyebrow's because it sits under a display-size H1. */
.lp-hero__eyebrow { margin-bottom: var(--s4); }
@media (min-width: 768px) { .lp-hero__eyebrow { margin-bottom: var(--s5); } }
.lp-hero__h1 {
  font-size: var(--text-display);
  font-weight: 800;
  line-height: var(--lh-tight);
  letter-spacing: var(--track-tight);
  max-width: calc(var(--measure-display) + var(--s16));
  text-shadow: var(--glow-text);           /* the one glow on the page */
}
.lp-hero__row { margin-top: var(--s8); }
.lp-hero__rule { display: none; }
.lp-hero__lead {
  margin-top: 0;
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text-primary);
  max-width: var(--measure-text);
}
.lp-hero__body {
  margin-top: var(--s4);
  font-size: var(--text-md);
  color: var(--text-secondary);
  max-width: var(--measure-text);
}
.lp-hero__cta { margin-top: var(--s8); display: flex; flex-direction: column; align-items: flex-start; gap: var(--s3); }
.lp-hero__aside { font-size: var(--text-sm); color: var(--text-secondary); }
@media (min-width: 768px) {
  .lp-hero__row  { margin-top: var(--s10); }
  .lp-hero__lead { font-size: var(--text-xl); }
  .lp-hero__body { font-size: var(--text-lg); margin-top: var(--s5); }
  .lp-hero__cta  { margin-top: var(--s10); }
  .lp-hero__aside { font-size: var(--text-md); }
}
@media (min-width: 1024px) {
  .lp-hero__row  { display: grid; grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s16); margin-top: var(--s12); }
  .lp-hero__rule { display: block; border-top: 1px solid var(--border-default); }
}
/* Staggered load: opacity only, never transform in a fill-forwards keyframe; gated by .lp--motion
   (set from matchMedia('(prefers-reduced-motion: no-preference)') at render time). */
.lp--motion .lp-hero__eyebrow,
.lp--motion .lp-hero__h1,
.lp--motion .lp-hero__lead,
.lp--motion .lp-hero__body,
.lp--motion .lp-hero__cta,
.lp--motion .lp-hero__markwrap { opacity: 0; animation: lp-fade var(--dur-slow) var(--ease) forwards; }
.lp--motion .lp-hero__lead { animation-delay: var(--dur-slow); }
.lp--motion .lp-hero__body { animation-delay: calc(var(--dur-slow) * 2); }
.lp--motion .lp-hero__cta  { animation-delay: calc(var(--dur-slow) * 3); }
.lp--motion .lp-hero__markwrap { animation-delay: calc(var(--dur-slow) * 2); }
@keyframes lp-fade { from { opacity: 0; } to { opacity: 1; } }

/* ---- 4a. Hero A (shipped) — the mark on the right of the asymmetric split ------------------ */
/* Below 1024 the mark opens the hero above the headline; at 1024 and up the headline spans the
   full measure (so it keeps the three-line wrap) and the mark takes the split's right cell,
   capped at 280px — the width /login gives its own logo box. */
.lp-hero__markwrap { display: flex; justify-content: flex-start; margin-bottom: var(--s6); }
.lp-hero__mark {
  display: block;
  width: auto;
  height: var(--s12);
  filter: drop-shadow(0 0 var(--s10) var(--aurora-core));   /* the lobes' own colour, not a new one */
}
@media (min-width: 768px) { .lp-hero__mark { height: var(--s16); } }
@media (min-width: 1024px) {
  /* Explicit line placement rather than named areas: the mark has to span the headline row as
     well as the lead row, and a named area cannot overlap a headline that spans both columns.
     Rows are 1 eyebrow / 2 headline / 3 lead + body / 4 CTA. Headings and paragraphs are
     margin-reset above, so row 2 is exactly the H1 box and row 3 exactly the lead + body block. */
  .lp-hero__inner {
    display: grid;
    grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
    column-gap: var(--s16);
  }
  .lp-hero__eyebrow { grid-column: 1 / -1; grid-row: 1; }
  .lp-hero__h1 { grid-column: 1 / -1; grid-row: 2; }
  .lp-hero__row { grid-column: 1; grid-row: 3; grid-template-columns: minmax(0, 1fr); gap: 0; }
  .lp-hero__cta { grid-column: 1; grid-row: 4; }
  .lp-hero__rule { display: none; }
  /* The mark spans rows 2-3 and centres across them, so its optical centre lands on the text
     block it belongs to instead of dropping level with the CTA. It precedes the headline in
     source order, so any glyph reaching this column paints over the mark, never under it. */
  .lp-hero__markwrap { grid-column: 2; grid-row: 2 / 4; align-self: center; justify-content: center; margin-bottom: 0; }
  .lp-hero__mark { height: auto; width: 100%; max-width: 280px; }
}

/* ---- 5. The difference (two columns; right first on mobile) ------------------------------- */
.lp-diff { background: var(--bg-base); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.lp-diff__grid { display: grid; gap: var(--s8); }
.lp-diff__col h2 { font-size: var(--text-xl); margin-bottom: var(--s4); }
.lp-diff__col p { font-size: var(--text-lg); line-height: var(--lh-body); max-width: var(--measure-text); }
.lp-diff__col--usual { color: var(--text-secondary); padding-block: var(--s2); }
.lp-diff__col--usual h2 { color: var(--text-secondary); }
/* The one accent-treated card: a gradient hairline painted on the card's own top edge, clipped
   by the radius. No border, so nothing else on the page carries the pair. */
.lp-diff__col--ours {
  background-color: var(--bg-elevated);
  background-image: var(--mb-gradient);
  background-repeat: no-repeat;
  background-size: 100% 1px;
  background-position: top left;
  border-radius: var(--r-lg);
  padding: var(--s6);
  color: var(--text-primary);
  box-shadow: var(--shadow-2);
}
.lp-diff__col--ours p { color: var(--text-primary); }
@media (max-width: 767.98px) { .lp-diff__col--ours { order: -1; } }
@media (min-width: 768px) {
  .lp-diff__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s12); align-items: stretch; }
  .lp-diff__col--ours { padding: var(--s10); }
  .lp-diff__col--usual { padding-block: var(--s6); }
}

/* ---- 7. What we build (one running-text block) -------------------------------------------- */
.lp-build { background: var(--bg-base); border-top: 1px solid var(--border-subtle); border-bottom: 1px solid var(--border-subtle); }
.lp-build__text { margin-top: var(--s6); max-width: var(--measure-text); font-size: var(--text-lg); line-height: var(--lh-body); color: var(--text-primary); }
.lp-build__close { margin-top: var(--s8); max-width: var(--measure-text); font-size: var(--text-xl); font-weight: 600; line-height: var(--lh-snug); letter-spacing: var(--track-tight); color: var(--text-primary); }
@media (min-width: 1024px) {
  .lp-build__inner { display: grid; grid-template-columns: minmax(0, 2fr) minmax(0, 1fr); gap: var(--s16); align-items: start; }
  .lp-build__text { margin-top: var(--s8); }
  .lp-build__close { margin-top: 0; }
}

/* ---- 8. Why work with us (2x2 cells, hairline gaps; not cards) ----------------------------- */
.lp-why__grid { display: grid; gap: 1px; margin-top: var(--s8); background: var(--border-subtle); border: 1px solid var(--border-subtle); }
.lp-why__cell { background: var(--bg-surface); padding: var(--s6); }
.lp-why__cell h3 { font-size: var(--text-lg); font-weight: 700; }
.lp-why__cell p { margin-top: var(--s3); color: var(--text-secondary); font-size: var(--text-md); line-height: var(--lh-body); }
@media (min-width: 768px) {
  .lp-why__grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); margin-top: var(--s10); }
  .lp-why__cell { padding: var(--s8); }
  .lp-why__cell h3 { font-size: var(--text-xl); }
}

/* ---- 9. Start a conversation (form on surface) -------------------------------------------- */
.lp-contact__grid { display: grid; gap: var(--s8); }
.lp-contact__sub { margin-top: var(--s4); color: var(--text-secondary); font-size: var(--text-lg); line-height: var(--lh-body); max-width: var(--measure-text); }
.lp-form {
  display: grid;
  gap: var(--s5);
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s5);
}
.lp-form__row { display: grid; gap: var(--s5); }
.lp-field { display: grid; gap: var(--s2); }
.lp-label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  color: var(--text-secondary);
}
/* The login's field colours: translucent white on the field, 1px translucent border. */
.lp-input {
  width: 100%;
  min-width: 0;
  background: var(--input-bg);
  border: 1px solid var(--input-border);
  border-radius: var(--r-md);
  padding: var(--s3) var(--s4);
  font: inherit;
  font-size: var(--text-md);
  line-height: var(--lh-snug);
  color: var(--text-primary);
  transition: border-color var(--dur) var(--ease);
}
.lp-input::placeholder { color: var(--text-secondary); }
.lp-input:focus-visible { border-color: var(--app-accent); }   /* focus ring, as on /login */
textarea.lp-input { resize: vertical; min-height: calc(var(--s20) + var(--s10)); }
.lp-hp { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
.lp-form__actions { display: grid; gap: var(--s3); }
.lp-form__error { color: var(--danger); font-size: var(--text-sm); line-height: var(--lh-body); }
.lp-form__consent { font-size: var(--text-sm); color: var(--text-secondary); line-height: var(--lh-body); }
.lp-form__done {
  background: var(--bg-surface);
  border: 1px solid var(--border-subtle);
  border-radius: var(--r-lg);
  padding: var(--s6);
  font-size: var(--text-lg);
  font-weight: 600;
  line-height: var(--lh-snug);
  color: var(--text-primary);
}
@media (min-width: 768px) {
  .lp-form { padding: var(--s8); gap: var(--s6); }
  .lp-form__row { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s6); }
  .lp-form__actions { grid-template-columns: max-content; }
  .lp-form__done { padding: var(--s8); font-size: var(--text-xl); }
}
@media (min-width: 1024px) {
  .lp-contact__grid { grid-template-columns: minmax(0, 2fr) minmax(0, 3fr); gap: var(--s16); align-items: start; }
}

/* ---- 10. Footer ---------------------------------------------------------------------------- */
.lp-footer { background: var(--bg-inset); border-top: 1px solid var(--border-subtle); padding-block: var(--s10); color: var(--text-muted); font-size: var(--text-sm); }
.lp-footer__inner { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s3) var(--s6); }
.lp-footer__links { display: flex; flex-wrap: wrap; gap: var(--s3) var(--s5); margin-left: auto; }
/* Footer tagline — takes the full flex line so the copyright/links row below it is untouched.
   --text-secondary lifts it a step above the footer's --text-muted body (8.9:1 on --bg-inset). */
.lp-footer__tagline { flex-basis: 100%; margin-bottom: var(--s3); color: var(--text-secondary); }
.lp-footer a { color: var(--text-muted); text-decoration: none; transition: color var(--dur) var(--ease); }
.lp-footer a:hover { color: var(--text-primary); }

/* ---- 11. Privacy (internal register: no atmosphere, no glow, no gradient but the nav wordmark) ---- */
.pp-main { padding-block: var(--s10) var(--s20); }
.pp-main h1 { font-size: var(--text-2xl); }
.pp-eff { margin-top: var(--s3); font-size: var(--text-sm); color: var(--text-muted); }
.pp-sec { margin-top: var(--s10); }
.pp-sec h2 { font-size: var(--text-xl); font-weight: 700; line-height: var(--lh-tight); letter-spacing: var(--track-tight); }
.pp-body { margin-top: var(--s4); max-width: var(--measure-text); font-size: var(--text-md); line-height: var(--lh-body); color: var(--text-secondary); }
.pp-body + .pp-body { margin-top: var(--s4); }
.pp-body b { color: var(--text-primary); font-weight: 600; }
/* Inline mail links stay neutral: the brand pair is not a link colour (§1.3). */
.pp-body a { color: var(--text-primary); text-decoration: underline; text-underline-offset: 0.2em; text-decoration-thickness: 1px; transition: color var(--dur) var(--ease); }
.pp-body a:hover { color: var(--text-secondary); }
@media (min-width: 768px) {
  .pp-main { padding-block: var(--s16) var(--s20); }
  .pp-main h1 { font-size: var(--text-3xl); }
  .pp-sec { margin-top: var(--s12); }
  .pp-body { font-size: var(--text-lg); }
}

/* 2026-09-08 graphics redesign */
@media (min-width: 1024px) {
  .lp-build__inner { grid-template-columns: minmax(0, 6fr) minmax(0, 5fr); row-gap: var(--s8); }
  .lp-build__head { grid-column: 1; }
  .lp-build__text { grid-column: 1; grid-row: 2; margin-top: 0; }
  .lp-build__aside { grid-column: 2; grid-row: 2; }
}
@media (width < 1024px) {
  .lp-build__aside { margin-top: var(--s8); }
}

/* 2026-09-08 sections redesign */
.lp-how__grid { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--s8); }
.lp-how__head { position: static; }
.lp-how__graphic, .lp-build__graphic { width: 100%; margin: 0; }
.lp-how__graphic svg, .lp-build__graphic svg { display: block; width: 100%; height: auto; }
.lp-how__graphic .lp-how__phone { display: none; }
.lp-steps { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s8); }
.lp-step { padding-top: var(--s4); border-top: 1px solid var(--border-default); }
.lp-step dt { display: flex; align-items: baseline; gap: var(--s3); font-size: var(--text-xl); font-weight: 600; line-height: var(--lh-tight); color: var(--text-primary); }
.lp-step__number { font-size: var(--text-sm); font-weight: 500; color: var(--text-secondary); }
.lp-step dd { margin-top: var(--s3); font-size: var(--text-md); line-height: var(--lh-body); color: var(--text-secondary); }
.lp-build__graphic + .lp-build__close { margin-top: var(--s8); }
@media (width < 1024px) {
  .lp-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .lp-build__graphic { max-width: 560px; margin-inline: auto; }
}
@media (width < 600px) {
  .lp-how__graphic .lp-how__desktop { display: none; }
  .lp-how__graphic .lp-how__phone { display: block; }
  .lp-steps { grid-template-columns: minmax(0, 1fr); gap: var(--s5); }
}

/* landing-reference-r1: selected composition, scoped to home. */
.lp:not(.pp) { overflow-x: visible; }
.lp:not(.pp) .lp-wrap { width: calc(100% - var(--s10)); max-width: var(--lp-frame); padding-inline: 0; }
.lp:not(.pp) .lp-section { padding-block: var(--s10); }
.lp:not(.pp) .lp-section h2 { font-size: var(--text-2xl); }
.lp:not(.pp) .lp-section :where(p,li,div,span) { overflow-wrap: break-word; }
.lp:not(.pp) :where(.lp-diff__col,.lp-compare__copy,.lp-compare__intro,.lp-compare__solution,.lp-contact__head,.lp-contact__formwrap,.lp-field,.lp-build__head,.lp-build__text,.lp-build__aside,.lp-why__cell) { min-width: 0; }
.lp-ref-icon { display: block; width: var(--s6); height: var(--s6); flex: 0 0 var(--s6); fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; pointer-events: none; }
.lp-diff__grid { position: relative; grid-template-columns: minmax(0,1fr); gap: var(--s8); }
.lp-diff__col--usual { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s6); padding: 0; color: var(--text-primary); }
.lp:not(.pp) .lp-diff h2 { color: var(--text-primary); font-size: var(--lp-compare-title); margin-bottom: var(--s4); }
.lp-diff .lp-compare__lead { font-size: var(--lp-body); font-weight: 700; line-height: var(--lh-body); margin-bottom: var(--s3); }
.lp-diff .lp-compare__body { font-size: var(--lp-body); line-height: var(--lh-body); color: var(--text-secondary); }
.lp-diff__col--ours { order: 0; padding: var(--s5); border: 1px solid transparent; border-radius: var(--r-xl); background: linear-gradient(var(--bg-surface),var(--bg-base)) padding-box, var(--mb-gradient) border-box; box-shadow: 0 0 var(--s6) color-mix(in srgb,var(--mb-blue) 9%,transparent); }
.lp-compare__list { list-style: none; padding: 0; margin: var(--s6) 0 0; display: grid; gap: var(--s4); align-content: start; }
.lp-compare__list li { display: flex; align-items: flex-start; gap: var(--s3); font-size: var(--lp-list); line-height: var(--lh-body); min-width: 0; }
.lp-list-sign { display: inline-flex; align-items: center; justify-content: center; width: var(--s6); height: var(--s6); flex: 0 0 var(--s6); border: 1px solid var(--danger); color: var(--danger); border-radius: var(--r-pill); font-size: var(--lp-body); font-weight: 700; line-height: 1; }
.lp-benefits .lp-list-sign { border-color: var(--mb-blue); color: var(--text-on-gradient); background: var(--mb-blue); }
.lp-compare__solution { display: grid; gap: var(--s8); }
.lp-transition { display: flex; justify-content: center; align-items: center; position: relative; pointer-events: none; min-height: var(--s10); }
.lp-transition::before { content: ''; height: 1px; width: 100%; background: var(--border-default); position: absolute; pointer-events: none; }
.lp-transition span { position: relative; display: grid; place-items: center; width: var(--s10); height: var(--s10); border: 1px solid var(--border-strong); border-radius: var(--r-pill); color: var(--text-primary); background: var(--bg-void); font-size: var(--text-xl); transform: rotate(90deg); }
.lp-fragments { align-self: center; min-width: 0; width: 100%; max-width: var(--lp-cluster); margin-inline: auto; padding: var(--s2); pointer-events: none; }
.lp-fragments__notes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s3); margin-bottom: var(--s5); align-items: start; }
.lp-friction { display: block; padding: var(--s2); border: 1px solid var(--border-default); border-radius: var(--r-sm); color: var(--text-secondary); background: var(--bg-base); font-size: var(--text-sm); line-height: var(--lh-body); }
.lp-friction--manual { transform: rotate(-4deg); }
.lp-friction--data { transform: rotate(4deg); margin-top: var(--s3); }
.lp-friction--fit { width: fit-content; max-width: 75%; margin-top: var(--s3); margin-left: auto; transform: rotate(-4deg); }
.lp-fragments__tools { display: grid; grid-template-columns: repeat(4,minmax(0,1fr)); gap: var(--s2) 0; align-items: center; }
.lp-tool { display: flex; gap: var(--s2); align-items: center; min-width: 0; padding: var(--s4) var(--s3); border: 1px solid var(--border-strong); border-radius: var(--r-md); background: linear-gradient(145deg,var(--bg-elevated),var(--bg-surface)); box-shadow: var(--shadow-1); color: var(--text-primary); font-size: var(--text-sm); line-height: var(--lh-body); }
.lp-tool .lp-ref-icon { color: var(--accent-text); }
.lp-tool--sheet { grid-column: 2/5; grid-row: 1; transform: rotate(4deg); margin-right: var(--s3); }
.lp-tool--email { grid-column: 1/4; grid-row: 2; transform: rotate(-1deg); margin-right: var(--s5); }
.lp-tool--crm { grid-column: 3/5; grid-row: 2; margin-top: var(--s10); transform: rotate(1deg); }
.lp-tool--project { grid-column: 2/5; grid-row: 3; margin-right: var(--s4); }
.lp-tool--another { grid-column: 1/4; grid-row: 4; transform: rotate(-4deg); margin-top: var(--s2); }
.lp-system { display: grid; gap: var(--s5); align-items: center; min-width: 0; align-self: center; }
.lp-system__inputs,.lp-system__outcomes { display: grid; gap: var(--s3); min-width: 0; position: relative; }
.lp-system__inputs { grid-template-columns: repeat(3,minmax(0,1fr)); }
.lp-flow-item { display: flex; align-items: center; gap: var(--s2); padding: var(--s3); border: 1px solid var(--border-default); border-radius: var(--r-md); color: var(--text-primary); background: var(--bg-surface); font-size: var(--text-sm); line-height: var(--lh-body); min-width: 0; position: relative; }
.lp-system__inputs .lp-flow-item { flex-direction: column; padding: var(--s2); text-align: center; }
.lp-flow-item .lp-ref-icon { color: var(--accent-text); }
.lp-system__inputs .lp-flow-item::after,.lp-system__outcomes .lp-flow-item::before { content: ''; position: absolute; width: 1px; height: var(--s5); left: 50%; background: var(--mb-blue); pointer-events: none; }
.lp-system__inputs .lp-flow-item::after { top: 100%; }
.lp-system__outcomes .lp-flow-item::before { bottom: 100%; }
.lp-workspace { position: relative; min-width: 0; border: 1px solid var(--border-strong); background: var(--bg-elevated); border-radius: var(--r-lg); }
.lp-workspace__bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); padding: var(--s3); border-bottom: 1px solid var(--border-default); }
.lp-window-dots { color: var(--mb-blue); letter-spacing: .08em; }
.lp-workspace__bar img { width: var(--s10); height: auto; }
.lp-workspace__body { display: grid; grid-template-columns: var(--s6) minmax(0,1fr); gap: var(--s2); padding: var(--s3) var(--s2); }
.lp-workspace__sidebar { display: grid; gap: var(--s3); align-content: start; padding-top: var(--s3); }
.lp-workspace__sidebar i { height: var(--s1); background: var(--border-strong); border-radius: var(--r-sm); }
.lp-workspace__rows { display: grid; gap: var(--s2); }
.lp-workspace__rows > div { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); padding: var(--s2); border: 1px solid var(--border-default); background: var(--bg-surface); border-radius: var(--r-sm); font-size: var(--text-sm); line-height: var(--lh-body); }
.lp-workspace__status { color: var(--accent-text); }
.lp-workspace__badge { display: block; width: fit-content; max-width: calc(100% - var(--s4)); margin: 0 auto var(--s3); padding: var(--s1) var(--s2); border: 1px solid var(--border-strong); border-radius: var(--r-pill); font-size: var(--text-sm); line-height: var(--lh-body); text-align: center; }
.lp-contact__grid { grid-template-columns: minmax(0,1fr); gap: var(--s8); align-items: start; }
.lp-contact__head { display: grid; gap: var(--s8); align-content: start; }
.lp:not(.pp) .lp-contact h2 { font-size: var(--lp-contact-title); text-wrap: initial; max-width: 12ch; }
.lp-contact .lp-contact__sub { font-size: var(--lp-body); color: var(--text-primary); margin-top: var(--s5); }
.lp-messages { display: none; width: var(--lp-message-width); height: var(--lp-message-height); position: relative; pointer-events: none; }
.lp-message { position: absolute; border: 1px solid var(--border-strong); border-radius: var(--r-md); background: var(--bg-surface); pointer-events: none; }
.lp-message::after { content: ''; position: absolute; width: var(--s3); height: var(--s3); bottom: calc(-1 * var(--s2)); left: var(--s4); background: inherit; border-right: 1px solid var(--border-strong); border-bottom: 1px solid var(--border-strong); transform: skewY(-35deg); pointer-events: none; }
.lp-message--rear { width: 60%; height: 55%; left: 0; top: 22%; opacity: .4; }
.lp-message--back { width: 75%; height: 56%; left: 14%; top: 0; padding: var(--s3); display: grid; gap: var(--s2); }
.lp-message--back i { height: var(--s1); width: 100%; background: var(--border-strong); border-radius: var(--r-sm); }
.lp-message--back i:nth-child(2) { width: 78%; }.lp-message--back i:nth-child(3) { width: 52%; }
.lp-message--front { width: 68%; height: 48%; right: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: var(--s2); border-color: var(--mb-blue); }
.lp-message--front::after { left: auto; right: var(--s4); border-color: var(--mb-blue); transform: skewY(35deg); }
.lp-message--front span { width: var(--s2); height: var(--s2); background: var(--mb-blue); border-radius: var(--r-pill); }
.lp-reassurance { padding: 0; margin: 0; list-style: none; display: grid; gap: var(--s5); }
.lp-reassurance li { display: flex; gap: var(--s3); min-width: 0; align-items: start; }
.lp-reassurance__icon { display: grid; place-items: center; width: var(--s10); height: var(--s10); flex: 0 0 var(--s10); border: 1px solid var(--border-strong); border-radius: var(--r-pill); color: var(--accent-text); }
.lp-reassurance h3 { font-size: var(--lp-detail); line-height: var(--lh-body); font-weight: 700; letter-spacing: normal; }
.lp-reassurance p { font-size: var(--lp-detail); line-height: var(--lh-body); color: var(--text-secondary); margin-top: var(--s2); }
.lp-contact .lp-form { border-color: var(--border-default); border-radius: var(--r-xl); padding: var(--s5); gap: var(--s5); }
.lp-contact .lp-form__row { gap: var(--s5); }
.lp-contact .lp-input { min-height: var(--s12); font-size: var(--lp-body); }
.lp-contact textarea.lp-input { min-height: var(--lp-textarea); }
.lp-contact .lp-form__consent,.lp-contact .lp-form__error { font-size: var(--lp-detail); }
.lp-contact #lp-submit { min-height: var(--lp-submit-height); font-size: var(--lp-submit-text); font-weight: 700; }
.lp-build__inner { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s6); }
.lp-build__head,.lp-build__text,.lp-build__aside { grid-column: auto; grid-row: auto; }
.lp-build .lp-build__text { font-size: var(--lp-body); margin: 0; }
.lp-build__aside { margin: 0; }
.lp-build__graphic.lp-build-flow { display: grid; grid-template-columns: minmax(0,1fr); gap: var(--s6); max-width: 100%; margin: 0; align-items: center; }
.lp-build-flow__inputs,.lp-build-flow__outcomes { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: var(--s3); min-width: 0; }
.lp-build-flow .lp-flow-item { padding: var(--s3); }
.lp-build-flow .lp-ref-icon { width: var(--s6); height: var(--s6); }
.lp-build-core { border: 1px solid transparent; background: linear-gradient(var(--bg-elevated),var(--bg-surface)) padding-box,var(--mb-gradient) border-box; border-radius: var(--r-xl); width: var(--s20); min-height: var(--s20); display: grid; place-items: center; margin-inline: auto; position: relative; }
.lp-build-core img { width: 72%; height: auto; }
.lp-build-core::before,.lp-build-core::after { content:''; width: 1px; height: var(--s6); position: absolute; left: 50%; pointer-events: none; }
.lp-build-core::before { bottom: 100%; background: var(--mb-blue); }.lp-build-core::after { top: 100%; background: var(--mb-pink); }
.lp-build-flow__outcomes .lp-ref-icon { color: var(--mb-pink); }
.lp-build .lp-build__close { padding: var(--s5) 0 0; border-top: 1px solid var(--border-default); font-size: var(--lp-submit-text); line-height: var(--lh-body); margin-top: var(--s6); }
.lp-why__grid { grid-template-columns: minmax(0,1fr); gap: var(--s5); border: 0; background: transparent; }
.lp-why__cell { border: 1px solid var(--border-default); border-radius: var(--r-lg); padding: var(--s5); }
.lp-why__cell h3 { font-size: var(--lp-principle-title); line-height: var(--lh-snug); text-wrap: initial; }
.lp-why__cell p { font-size: var(--lp-body); }
.lp-steps { gap: var(--s8); }
.lp-step { border: 0; padding: 0; min-width: 0; position: relative; }
.lp-step dt { display: block; }
.lp-step__title { display: flex; align-items: baseline; gap: var(--s3); padding-top: var(--s4); border-top: 1px solid var(--border-default); font-size: var(--lp-submit-text); }
.lp-step dd { font-size: var(--lp-body); }
.lp-stage-art { height: var(--lp-stage-rail); display: flex; align-items: center; justify-content: center; gap: var(--s2); margin-bottom: var(--s5); color: var(--accent-text); pointer-events: none; }
.lp-stage-window { border: 1px solid var(--border-strong); border-radius: var(--r-md); padding: var(--s3); background: var(--bg-surface); width: 90%; }
.lp-stage-window b { display: flex; border-bottom: 1px solid var(--border-default); padding-bottom: var(--s2); margin-bottom: var(--s3); }
.lp-stage-window i { display: block; min-height: var(--s5); background: var(--bg-elevated); border: 1px solid var(--border-default); border-radius: var(--r-sm); margin-top: var(--s2); }
.lp-stage-art--listen { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); align-content: center; padding: var(--s3); }
.lp-stage-art--listen > div { display: grid; place-items: center; padding: var(--s3); border: 1px solid var(--border-strong); background: var(--bg-surface); border-radius: var(--r-md); }
.lp-stage-art--listen > div:last-child { grid-column: 2; }
.lp-stage-slots { display: grid; grid-template-columns: 1fr 2fr; gap: var(--s2); }.lp-stage-slots i { min-height: var(--s8); margin:0; }.lp-stage-slots i:last-child { grid-column: 1/-1; border-style:dashed; }
.lp-stage-running { display:flex; align-items:center; gap:var(--s3); }.lp-stage-running > .lp-ref-icon { width:var(--s10);height:var(--s10);flex-basis:var(--s10); }.lp-stage-running > div { flex:1;min-width:0; }
@media (min-width:768px) {
 .lp:not(.pp) .lp-wrap { width: calc(100% - var(--s16)); }
 .lp:not(.pp) .lp-section { padding-block: var(--s12); }
 .lp-diff__col--ours { padding: var(--s6); }
 .lp:not(.pp) .lp-diff h2 { font-size: var(--lp-compare-title-wide); }
 .lp:not(.pp) .lp-contact h2 { font-size: var(--lp-contact-title-wide); }
 .lp-system { grid-template-columns: minmax(0,1fr) minmax(0,2fr) minmax(0,1.3fr); gap: var(--s3); }
 .lp-system__inputs { grid-template-columns: minmax(0,1fr); }
 .lp-system__inputs .lp-flow-item::after,.lp-system__outcomes .lp-flow-item::before { width: var(--s3); height:1px; top:50%; bottom:auto; left:auto; }
 .lp-system__inputs .lp-flow-item::after { left:100%; }.lp-system__outcomes .lp-flow-item::before { right:100%; }
 .lp-system__outcomes .lp-flow-item { flex-direction:column; align-items:flex-start; }
 .lp-reassurance { grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--s5); }
 .lp-reassurance li { flex-direction:column; }
 .lp-reassurance li+li { border-left:1px solid var(--border-default);padding-left:var(--s5); }
 .lp-contact .lp-form { padding:var(--s6);gap:var(--s6); }
 .lp-why__grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
 .lp-why__cell { padding:var(--s6); }
 .lp-build__graphic.lp-build-flow { grid-template-columns:minmax(0,1fr) var(--s20) minmax(0,1fr);gap:var(--s6); }
 .lp-build-flow__inputs,.lp-build-flow__outcomes { grid-template-columns:minmax(0,1fr); }
 .lp-build-core::before,.lp-build-core::after { height:1px;width:var(--s6);top:50%;bottom:auto;left:auto; }
 .lp-build-core::before { right:100%; }.lp-build-core::after { left:100%; }
 .lp-build-flow__inputs .lp-flow-item::after,.lp-build-flow__outcomes .lp-flow-item::before { content:'';position:absolute;pointer-events:none;top:50%;width:var(--s6);height:1px;background:var(--mb-blue); }
 .lp-build-flow__inputs .lp-flow-item::after { left:100%; }.lp-build-flow__outcomes .lp-flow-item::before { right:100%;background:var(--mb-pink); }
 .lp-build-flow__inputs { border-right:1px solid var(--mb-blue);padding-right:var(--s6);margin-right:calc(-1 * var(--s6)); }
 .lp-build-flow__outcomes { border-left:1px solid var(--mb-pink);padding-left:var(--s6);margin-left:calc(-1 * var(--s6)); }
}
@media (min-width:1024px) {
 .lp:not(.pp) .lp-section h2 { font-size:var(--lp-section-title); }
 .lp:not(.pp) .lp-diff h2 { font-size:var(--lp-compare-title-wide); }
 .lp:not(.pp) .lp-contact h2 { font-size:var(--lp-contact-title-wide); }
 .lp-diff__col--usual { grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:var(--s6); }
 .lp-compare__solution { grid-template-columns:minmax(0,35fr) minmax(0,65fr);gap:var(--s5);align-items:center; }
 .lp-system { gap:var(--s2);grid-template-columns:minmax(0,22fr) minmax(0,46fr) minmax(0,32fr); }
 .lp-system__inputs .lp-flow-item::after,.lp-system__outcomes .lp-flow-item::before { width:var(--s2); }
 .lp-system .lp-flow-item { padding:var(--s2); }
 .lp-messages { display:block; }
 .lp-contact__head { grid-template-columns:minmax(0,1fr) var(--lp-message-width); }
 .lp-reassurance { grid-column:1/-1; }
 .lp-steps { grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s6); }
 .lp-step:not(:last-child)::after { content:'→';position:absolute;top:calc(var(--lp-stage-rail)/2 - var(--s3));right:calc(-1 * var(--s5));color:var(--text-secondary);pointer-events:none; }
}
@media (min-width:1200px) {
 .lp:not(.pp) .lp-section { padding-block:var(--s16); }
 .lp-diff__grid { grid-template-columns:minmax(0,48fr) minmax(0,52fr);gap:var(--s12);align-items:stretch; }
 .lp-transition { position:absolute;left:calc(48% - var(--s6));top:var(--s6);bottom:var(--s6);width:var(--s10);min-height:0; }
 .lp-transition::before { height:100%;width:1px; }.lp-transition span { transform:none; }
 .lp-diff__col--usual { grid-template-columns:minmax(0,1fr);align-content:start; }
 .lp-compare__solution { grid-template-columns:minmax(0,1fr); }
 .lp-fragments { margin-top:var(--s4); }
 .lp-system { margin-top:var(--s4); }
 .lp-contact__grid { grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s12); }
 .lp-contact__head { grid-template-columns:minmax(0,1fr); }
 .lp-contact__intro { grid-column:1/-1; }
 .lp-messages { margin-left:auto; }
 .lp-build__inner { grid-template-columns:minmax(0,52fr) minmax(0,48fr);column-gap:var(--s12);row-gap:var(--s6); }
 .lp-build__head { grid-column:1;grid-row:1; }.lp-build__text { grid-column:1;grid-row:2; }.lp-build__aside { grid-column:2;grid-row:1/3; }
 .lp-build__graphic.lp-build-flow { gap:var(--s5); }
 .lp-why__grid { grid-template-columns:repeat(4,minmax(0,1fr)); }
}
@media (min-width:1440px) {
 .lp-diff__col--usual { grid-template-columns:minmax(0,55fr) minmax(0,45fr);gap:var(--s4); }
 .lp-compare__solution { grid-template-columns:minmax(0,35fr) minmax(0,65fr);gap:var(--s4); }
 .lp-fragments,.lp-system { margin-top:0; }
 .lp-contact__head { grid-template-columns:minmax(0,1fr) var(--lp-message-width);gap:var(--s8) var(--s6); }
 .lp-contact__intro { grid-column:1/-1; }
 .lp-messages { grid-column:2; }
 .lp-reassurance { grid-column:1/-1; }
}
@media (max-width:767.98px) {
 .lp-steps { grid-template-columns:minmax(0,1fr);gap:var(--s6); }
 .lp-step { padding-left:calc(var(--lp-stage-phone) + var(--s4)); }
 .lp-stage-art { position:absolute;top:0;left:0;width:var(--lp-stage-phone);height:var(--lp-stage-phone);margin:0;gap:var(--s1);padding:0; }
 .lp-stage-art .lp-stage-window { width:100%;padding:var(--s1); }
 .lp-stage-window b { margin-bottom:var(--s1);padding-bottom:var(--s1); }
 .lp-stage-window i { min-height:var(--s1);height:var(--s1);margin-top:var(--s1); }
 .lp-stage-slots { gap:var(--s1); }.lp-stage-slots i { min-height:var(--s2); }
 .lp-stage-art--listen > div { padding:var(--s1); }
 .lp-stage-running { gap:var(--s1); }.lp-stage-running > .lp-ref-icon { width:var(--s6);height:var(--s6);flex-basis:var(--s6); }
 .lp-step__title { padding-top:0;border:0; }
 .lp-system__outcomes { gap:var(--s5); }
 .lp-system__inputs { grid-template-columns:repeat(3,minmax(0,1fr)); }
 .lp-system__inputs .lp-flow-item { overflow-wrap:anywhere; }
}

/* Fidelity correction cycle 1: align panels, bring motif alongside intro, bound branches. */
.lp-diff__col--usual { padding-block: var(--s6); }
.lp-contact__head { align-items: center; }
.lp-build__copy { display: grid; gap: var(--s6); align-content: start; min-width: 0; }
.lp-build__head,.lp-build__text { grid-column: auto; grid-row: auto; }
.lp-stage-art { align-items: end; padding-bottom: var(--s2); }
.lp-stage-art--listen { align-content: end; }
.lp-stage-window i::after { content: ''; display: block; height: 1px; width: 60%; margin: var(--s2); background: var(--border-strong); }
.lp-build-connect { display: none; pointer-events: none; }
@media (min-width:768px) {
 .lp-build-flow__inputs,.lp-build-flow__outcomes { position: relative; align-self: stretch; grid-template-rows: repeat(4,minmax(0,1fr)); border: 0; padding: 0; margin: 0; }
 .lp-build-flow__inputs .lp-flow-item::after,.lp-build-flow__outcomes .lp-flow-item::before,.lp-build-core::before,.lp-build-core::after { display:none; }
 .lp-build__graphic .lp-build-connect { display:block; position:absolute; top:0; width:var(--s6); height:100%; fill:none; stroke:var(--mb-blue); stroke-width:1.4; overflow:visible; }
 .lp-build-connect path { vector-effect:non-scaling-stroke; }
 .lp-build__graphic .lp-build-connect--in { left:100%; }
 .lp-build__graphic .lp-build-connect--out { right:100%; stroke:var(--mb-pink); }
}
@media (min-width:1200px) {
 .lp-build__aside { grid-column:2;grid-row:1; }
 .lp-build__graphic.lp-build-flow { gap:var(--s6); }
 .lp-contact__head { grid-template-columns:minmax(0,1fr) var(--lp-message-width);gap:var(--s8) var(--s6); }
 .lp-contact__intro { grid-column:1;grid-row:1; }
 .lp-messages { grid-column:2;grid-row:1;align-self:center; }
 .lp-reassurance { grid-column:1/-1;grid-row:2; }
}
@media (max-width:767.98px) {
 .lp-fragments__tools { grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3); }
 .lp-tool { padding:var(--s3) var(--s2);gap:var(--s2); }
 .lp-tool--sheet { grid-column:2;grid-row:1;margin:0; }
 .lp-tool--email { grid-column:1;grid-row:2;margin:0; }
 .lp-tool--crm { grid-column:2;grid-row:2;margin:var(--s3) 0 0; }
 .lp-tool--project { grid-column:2;grid-row:3;margin:0; }
 .lp-tool--another { grid-column:1;grid-row:3;margin:var(--s3) 0 0; }
 .lp-stage-window i::after { margin:0;width:60%; }
}

/* Fidelity correction cycle 2 and reflow: preserve type size, let content wrap and grow. */
.lp:not(.pp) .lp-hero__h1 { overflow-wrap: normal; }
.lp-contact__head { grid-template-columns: minmax(0,1fr); }
.lp-contact__intro,.lp-reassurance li > div,.lp-tool > span,.lp-flow-item > span,.lp-step__title > span { min-width:0;max-width:100%;overflow-wrap:anywhere; }
.lp-workspace__rows > div > span { min-width:0;overflow-wrap:anywhere; }
.lp-system__inputs .lp-flow-item > span { width:100%; }
.lp:not(.pp) .lp-nav { height:auto;min-height:var(--nav-h); }
.lp:not(.pp) .lp-nav__inner { flex-wrap:wrap;padding-block:var(--s2); }
.lp:not(.pp) .lp-nav__actions { min-width:0; }
.lp:not(.pp) .lp-nav :where(a,button) { min-height:var(--lp-target); }
.lp:not(.pp) .lp-nav__toggle { min-width:var(--lp-target); }
.lp:not(.pp) .lp-nav__login { display:inline-flex;align-items:center; }
/* polish (2026-09-24): the privacy view's header CTA meets the same 44px target as the landing's
   (--lp-target is scoped to .lp:not(.pp), hence the literal). It grows inside the 64px bar. */
.lp.pp .lp-nav__actions .lp-nav__cta { min-height:44px; }
/* Below 768 the disclosure panel is positioned from .lp-nav__inner, whose height the 40px toggle
   sets; symmetric negative margins keep the CTA's margin box at that height, so the panel stays put. */
@media (max-width:767.98px) { .lp.pp .lp-nav__actions .lp-nav__cta { margin-block:calc((var(--s10) - 44px) / 2); } }
@media (min-width:1024px) and (max-width:1199.98px) {
 .lp-contact__head { grid-template-columns:minmax(0,1fr) var(--lp-message-width); }
}
@media (min-width:1200px) {
 .lp-contact__head { grid-template-columns:minmax(0,1fr) var(--lp-message-width); }
 .lp-contact__sub { max-width:30ch; }
}
@media (min-width:1200px) and (max-width:1439.98px) {
 .lp-fragments__tools { grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--s3); }
 .lp-tool--sheet { grid-column:2;grid-row:1;margin:0; }
 .lp-tool--email { grid-column:1;grid-row:2;margin:0; }
 .lp-tool--crm { grid-column:2;grid-row:2;margin:var(--s3) 0 0; }
 .lp-tool--project { grid-column:2;grid-row:3;margin:0; }
 .lp-tool--another { grid-column:1;grid-row:3;margin:var(--s3) 0 0; }
}
@media (min-width:1440px) {
 .lp-contact .lp-form { grid-template-columns:max-content minmax(0,1fr);column-gap:var(--s6); }
 .lp-contact .lp-form > * { grid-column:1/-1; }
 .lp-contact .lp-form__actions { grid-column:1; }
 .lp-contact .lp-form__consent { grid-column:2;align-self:center; }
}
@media (max-width:767.98px) {
 .lp:not(.pp) .lp-nav__actions { flex-wrap:wrap; }
 .lp:not(.pp) .lp-nav__cta { white-space:normal;min-width:0; }
}
@media (max-width:479.98px) {
 .lp:not(.pp) .lp-nav__actions { width:100%;margin-left:0;justify-content:space-between; }
 .lp:not(.pp) .lp-nav__cta { flex:1; }
 .lp:not(.pp) .lp-nav__links { top:100%; }
 .lp:not(.pp) .lp-section { scroll-margin-top:var(--lp-phone-nav); }
}

/* Final fidelity correction: readable input chips; parallel phone outcome branches. */
@media (min-width:1024px) {
 .lp-system { grid-template-columns:minmax(0,25fr) minmax(0,47fr) minmax(0,28fr); }
}
@media (max-width:767.98px) {
 .lp-system__outcomes { margin-left:var(--s3);padding-left:var(--s3);border-left:1px solid var(--mb-blue); }
 .lp-system__outcomes .lp-flow-item::before { left:calc(-1 * var(--s3));top:50%;bottom:auto;width:var(--s3);height:1px; }
 .lp-system__outcomes::after { content:'';position:absolute;pointer-events:none;bottom:100%;left:-1px;width:calc(50% - var(--s3));height:var(--s5);border-top:1px solid var(--mb-blue);border-left:1px solid var(--mb-blue); }
}

/* Control boundary contrast and clearance for the wrapped phone navigation. */
.lp-contact .lp-input { border-color:var(--text-muted); }
.lp-contact .lp-input:focus-visible { border-color:var(--app-accent); }
@media (max-width:479.98px) { .lp:not(.pp) .lp-section { scroll-margin-top:calc(var(--s16) + var(--s12)); } }

/* Semantic group heading; the panel titles retain their exact visual hierarchy. */
.lp-sr-only { position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;pointer-events:none; }
.lp:not(.pp) .lp-diff__col > .lp-compare__copy > h3,
.lp:not(.pp) .lp-diff__col > .lp-compare__intro > h3 { color:var(--text-primary);font-size:var(--lp-compare-title);margin-bottom:var(--s4); }
@media (min-width:768px) {
 .lp:not(.pp) .lp-diff__col > .lp-compare__copy > h3,
 .lp:not(.pp) .lp-diff__col > .lp-compare__intro > h3 { font-size:var(--lp-compare-title-wide); }
}

/* Fourth visual correction: wide reassurance icon placement and phone connector visibility. */
@media (min-width:1440px) {
 .lp-reassurance { gap:var(--s4); }
 .lp-reassurance li { flex-direction:row; }
 .lp-reassurance li + li { padding-left:var(--s3); }
}
@media (max-width:767.98px) {
 .lp-build__graphic .lp-build-connect { display:none; }
}

/* landing-reference-r2: selected generated art; all meaning remains live HTML. */
.lp:not(.pp) :is(.lp-diff,.lp-how,.lp-build,.lp-contact) { background-color:var(--lp-r2-canvas); }
.lp:not(.pp) .lp-diff { background-image:linear-gradient(var(--lp-r2-grid) 1px,transparent 1px),linear-gradient(90deg,var(--lp-r2-grid) 1px,transparent 1px);background-size:32px 32px; }
.lp:not(.pp) .lp-how { background-image:linear-gradient(180deg,var(--lp-r2-section),var(--lp-r2-canvas) 55%); }
.lp:not(.pp) .lp-why { background:var(--lp-r2-section); }
.lp:not(.pp) .lp-why__cell { background:linear-gradient(145deg,var(--lp-r2-lift),var(--lp-r2-section));border-color:var(--lp-r2-border); }
.lp:not(.pp) .lp-diff__col--ours { background:linear-gradient(155deg,var(--lp-r2-section),var(--lp-r2-canvas) 60%,var(--lp-r2-warm)) padding-box,var(--lp-r2-perimeter) border-box;box-shadow:-8px 0 28px var(--lp-r2-blue-halo),8px 0 28px var(--lp-r2-pink-halo); }
.lp:not(.pp) .lp-contact .lp-form { background:linear-gradient(145deg,var(--lp-r2-lift),var(--lp-r2-section));border-color:var(--lp-r2-border);box-shadow:0 12px 32px var(--lp-r2-blue-halo); }
.lp:not(.pp) .lp-contact .lp-input { background:var(--lp-r2-input); }
.lp-generated { display:block;width:100%;height:auto;pointer-events:none; }
.lp-raster-messages { display:block;width:100%;max-width:200px;height:auto;aspect-ratio:1;margin:0 auto; }
.lp-raster-stage { display:block;width:100%;height:auto;aspect-ratio:4/3;max-width:var(--lp-r2-small-max);padding:0;align-content:normal; }
@media (min-width:1024px) {
 .lp-step:not(:last-child)::after { top:80px; }
}
@media (min-width:1440px) {
 .lp-diff__col--usual { grid-template-columns:minmax(0,52fr) minmax(0,48fr); }
 .lp-compare__solution { grid-template-columns:minmax(0,35fr) minmax(0,65fr); }
}
@media (max-width:767.98px) {
 .lp-raster-stage { position:static;width:100%;max-width:240px;height:auto;margin:0 auto 16px; }
 .lp-step { padding-left:0; }
.lp-raster-messages { max-width:180px; }
}

/* r2 inspect/correct cycle 1: art breathing room and matte-compatible surfaces. */
.lp:not(.pp) .lp-diff__col--ours { background:linear-gradient(160deg,var(--lp-r2-warm),var(--lp-r2-canvas) 45%) padding-box,var(--lp-r2-perimeter) border-box; }
.lp-raster-messages { max-width:240px; }
@media (min-width:1200px) {
 .lp:not(.pp) .lp-diff .lp-wrap { width:calc(100% - 64px);max-width:1536px; }
 .lp-contact__head { grid-template-columns:minmax(0,1fr) 210px;gap:var(--s6); }
}
@media (min-width:1440px) {
 .lp-diff__col--usual { grid-template-columns:minmax(0,49fr) minmax(0,51fr); }
 .lp-compare__solution { grid-template-columns:minmax(0,31fr) minmax(0,69fr); }
}
@media (max-width:767.98px) {
}

/* r2 inspect/correct cycle 2: clean live captions and bounded stage art. */
.lp:not(.pp) .lp-how { background-image:none;border-top:1px solid var(--lp-r2-border); }
@media (max-width:767.98px) {
 .lp-raster-stage { max-width:180px;margin-bottom:12px; }
}

/* r2 cycle 3: decorative overlay hit-testing; selected rasters encoded losslessly. */

/* r2 cycle 4: reflow live labels when text size outgrows the illustration box. */
@container (max-width:18em) {
}
@container (max-width:36em) {
}

/* landing-reference-r3: selected text-baked art and live accessible label lists. */
.lp-raster-cluster,.lp-raster-system,.lp-raster-build.lp-build__graphic { display:block;width:100%;max-width:var(--lp-r2-art-max);padding:0;margin-inline:auto;pointer-events:none; }
.lp-artbox { position:relative;width:100%;margin-inline:auto; }
.lp-artbox > picture { display:block;width:100%; }
.lp-artbox--cluster > picture,.lp-artbox--workspace > picture { aspect-ratio:809/485; }
.lp-artbox--build > picture { aspect-ratio:836/470; }
.lp-artbox > picture > .lp-generated { display:block;position:static;width:100%;height:auto;object-fit:contain; }
.lp-art-labels { display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;list-style:none;margin:12px 0 0;padding:0; }
.lp-art-label { min-width:0;padding:8px;border:1px solid var(--lp-r2-border);border-radius:var(--r-sm);background:var(--lp-r2-chip);color:var(--lp-r2-quiet);font-size:max(13px,.8125rem);line-height:1.4;overflow-wrap:anywhere;text-align:center; }
.lp-artbox--build .lp-build-core { position:absolute;left:50%;top:0;margin-top:26.985645933%;transform:translate(-50%,-50%);width:12%;height:auto;aspect-ratio:auto;padding:0;border:0;border-radius:var(--r-sm);background:none;box-shadow:-3px 0 14px var(--lp-r2-blue-halo),3px 0 14px var(--lp-r2-pink-halo); }
.lp-artbox--build .lp-build-core::before,.lp-artbox--build .lp-build-core::after { display:none; }
.lp-artbox--build .lp-build-core img { width:100%;height:auto; }
@media (min-width:1024px) {
 .lp-artbox--build > .lp-art-labels { position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap; }
}
@media (min-width:1280px) {
 .lp-artbox--cluster > .lp-art-labels,.lp-artbox--workspace > .lp-art-labels { position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap; }
 .lp-diff__col--usual,.lp-compare__solution { grid-template-columns:minmax(0,1fr); }
 .lp-contact__head { grid-template-columns:minmax(0,1fr);justify-items:center;align-content:center;align-self:stretch; }
 .lp-contact__intro { grid-column:1;grid-row:1;text-align:center; }
 .lp-contact__intro h2,.lp-contact__sub { margin-inline:auto; }
 .lp-contact__head > .lp-raster-messages { grid-column:1;grid-row:2;margin:0 auto; }
 .lp-contact__head > .lp-reassurance { grid-column:1;grid-row:3; }
}
@media (width:768px) {
 .lp:not(.pp) .lp-nav__inner { flex-wrap:nowrap;gap:8px; }
 .lp:not(.pp) .lp-nav__links { gap:0; }
 .lp:not(.pp) .lp-nav__links a,.lp:not(.pp) .lp-nav__login { font-size:14px;padding-inline:8px;display:inline-flex;align-items:center; }
 .lp:not(.pp) .lp-nav__actions { gap:4px; }
 .lp:not(.pp) .lp-nav__actions .lp-nav__cta { font-size:14px;padding-inline:12px; }
}

/* r3 inspection cycle 2: preserve the source groups in the visible label lists. */
.lp-art-label[data-group="tools"] + .lp-art-label[data-group="friction"],
.lp-art-label[data-group="inputs"] + .lp-art-label[data-group="workflow_rows"],
.lp-art-label[data-group="workflow_rows"] + .lp-art-label[data-group="badge"],
.lp-art-label[data-group="badge"] + .lp-art-label[data-group="outcomes"],
.lp-art-label[data-group="inputs"] + .lp-art-label[data-group="outcomes"] { grid-column:1; }
.lp-art-label[data-group="badge"] { grid-column:1 / -1; }

/* r3 inspection cycle 3: centre the badge and align build inputs with outcomes. */
.lp-artbox--workspace .lp-art-labels > .lp-art-label[data-group="badge"] { grid-column:1 / -1; }
.lp-artbox--build .lp-art-labels > .lp-art-label[data-group="inputs"] { grid-column:1; }
.lp-artbox--build .lp-art-labels > .lp-art-label[data-group="outcomes"] { grid-column:2; }
.lp-artbox--build .lp-art-label:nth-child(1),.lp-artbox--build .lp-art-label:nth-child(5) { grid-row:1; }
.lp-artbox--build .lp-art-label:nth-child(2),.lp-artbox--build .lp-art-label:nth-child(6) { grid-row:2; }
.lp-artbox--build .lp-art-label:nth-child(3),.lp-artbox--build .lp-art-label:nth-child(7) { grid-row:3; }
.lp-artbox--build .lp-art-label:nth-child(4),.lp-artbox--build .lp-art-label:nth-child(8) { grid-row:4; }

/* images-2 operator correction: compact header; labels are always accessible offscreen. */
.lp-artbox > .lp-art-labels { position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);clip-path:inset(50%);white-space:nowrap; }
@media (min-width:390px) and (max-width:767.98px) {
 .lp:not(.pp) .lp-nav__inner { flex-wrap:nowrap;gap:8px; }
 .lp:not(.pp) .lp-nav__actions { width:auto;margin-left:auto;flex-wrap:nowrap;gap:4px; }
 .lp:not(.pp) .lp-nav__cta { flex:none;white-space:nowrap; }
 .lp:not(.pp) .lp-section { scroll-margin-top:var(--nav-h); }
}

/* Keep baked comparison labels legible through the768–1279 layout transition. */
@media (min-width:768px) and (max-width:1279.98px) { .lp-diff__col--usual,.lp-compare__solution { grid-template-columns:minmax(0,1fr); } }

/* images-3 operator correction: empty A2 panel with canonical image overlay;
   portrait art below768; existing desktop A4 overlay is preserved. */
.lp-workspace-core { position:absolute;left:49.150710315%;top:48.712667353%;transform:translate(-50%,-50%);width:20%;height:auto;padding:0;border:0;background:none;pointer-events:none; }
.lp-workspace-core img { display:block;width:100%;height:auto; }
@media (max-width:767.98px) {
 .lp-artbox--cluster > picture,.lp-artbox--workspace > picture,.lp-artbox--build > picture { aspect-ratio:4/5; }
 .lp-workspace-core { left:49.866310160%;top:47.931526391%;width:25%; }
 .lp-artbox--build .lp-build-core { left:49.955436720%;top:52.853067047%;margin-top:0;width:15%; }
}

/* landing-heading-wrap: headings keep whole words; body-copy wrapping is unchanged. */
.lp :where(h1,h2,h3,dt) { overflow-wrap:normal;word-break:normal;hyphens:none; }
/* Keep the semantic-only heading clipped without making its text overflow a 1px box. */
.lp :where(h1,h2,h3,dt).lp-sr-only { width:auto;max-width:100%;white-space:normal; }
/* Fit the contact title through the narrow copy/motif transition, preserving other widths. */
@media (min-width:1200px) and (max-width:1279.98px) {
 .lp:not(.pp) .lp-contact h2 { font-size:clamp(2.8125rem,calc(7.5vw - 2.8125rem),3.25rem); }
}

/* Inspection cycle 2: enlarged text still fits as whole words; normal-size type is preserved. */
@media (max-width:767.98px) {
 .lp:not(.pp) .lp-hero__h1 { font-size:min(var(--text-display),calc((100vw - 40px)/4.6)); }
 .lp:not(.pp) .lp-build h2 { font-size:min(var(--text-2xl),calc((100vw - 40px)/4.6)); }
 .lp:not(.pp) .lp-contact h2 { font-size:min(var(--lp-contact-title),calc((100vw - 40px)/6.65)); }
}
@media (min-width:1280px) {
 .lp:not(.pp) .lp-contact h2 { font-size:min(var(--lp-contact-title-wide),calc((min(100vw,1344px) - 112px)/13.4)); }
 .lp-reassurance h3 { font-size:min(var(--lp-detail),calc((min(100vw,1344px) - 566px)/42)); }
}