/* Self-hosted fonts (no Google). Put the .woff2 files in assets/fonts/. See assets/fonts/FONTS-README.txt */
@font-face{font-family:'Montserrat';font-style:normal;font-weight:200;font-display:swap;src:url('fonts/montserrat-200.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:300;font-display:swap;src:url('fonts/montserrat-300.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/montserrat-400.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/montserrat-500.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/montserrat-600.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:700;font-display:swap;src:url('fonts/montserrat-700.woff2') format('woff2');}
@font-face{font-family:'Montserrat';font-style:normal;font-weight:800;font-display:swap;src:url('fonts/montserrat-800.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/ibm-plex-mono-400.woff2') format('woff2');}
@font-face{font-family:'IBM Plex Mono';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/ibm-plex-mono-500.woff2') format('woff2');}




/* mySAM Landingpage — friendly product
   Light off-white background, generous whitespace, prominent app
   mockup, brand teal accent used purposefully. No editorial S/01,
   no Mono everywhere, no glow washes. */

:root {
  --ms-bg:        #FAFAF7;     /* very soft off-white */
  --ms-bg-2:      #F2F1EC;     /* slight panel tint */
  --ms-paper:     #FFFFFF;
  --ms-ink:       #0B1016;
  --ms-ink-2:     rgba(11, 16, 22, .72);
  --ms-ink-mute:  rgba(11, 16, 22, .54);
  --ms-ink-faint: rgba(11, 16, 22, .28);
  --ms-rule:      rgba(11, 16, 22, .08);
  --ms-rule-strong: rgba(11, 16, 22, .14);

  --ms-accent:        #0C8E79;
  --ms-accent-hi:     #2DD4BF;
  --ms-accent-tint:   #E5F4F1;
  --ms-accent-tint-2: #D9EDE8;
  --ms-on-accent:     #04241F;

  --ms-down:      #BD3D3D;
  --ms-down-tint: #F5E1E1;

  --ms-font: 'Montserrat', -apple-system, BlinkMacSystemFont, sans-serif;
  --ms-mono: 'IBM Plex Mono', ui-monospace, monospace;

  --ms-r-sm:  10px;
  --ms-r-md:  14px;
  --ms-r-lg:  22px;
  --ms-r-pill: 999px;

  --ms-shadow-1: 0 1px 0 rgba(20,22,16,.04), 0 4px 12px -6px rgba(20,22,16,.10);
  --ms-shadow-2: 0 1px 0 rgba(20,22,16,.05), 0 30px 58px -30px rgba(20,22,16,.26), 0 2px 8px rgba(20,22,16,.06);
  --ms-shadow-phone: 0 34px 70px -30px rgba(20,22,16,.32), 0 8px 24px -8px rgba(20,22,16,.12);

  --ms-density: 1;
  --ms-fs-mul:  1;
  --ms-shell-pad: clamp(24px, 4vw, 56px);
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; background: var(--ms-bg); }
html { scroll-behavior: smooth; }
body {
  font-family: var(--ms-font);
  color: var(--ms-ink);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-size: calc(17px * var(--ms-fs-mul));
  line-height: 1.6;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
::selection { background: var(--ms-accent); color: #fff; }

.ms-shell {
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 var(--ms-shell-pad);
}

/* ─── Typography ──────────────────────────────────────────────────── */
.ms-h1 {
  font-family: var(--ms-font);
  font-weight: 300;
  font-size: clamp(40px, 5.4vw, 80px);
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  color: var(--ms-ink);
  text-wrap: balance;
}
.ms-h1 .accent { color: var(--ms-accent); }
.ms-h2 {
  font-family: var(--ms-font);
  font-weight: 300;
  font-size: clamp(28px, 3.4vw, 46px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  margin: 0;
  text-wrap: balance;
}
.ms-h2 .accent { color: var(--ms-accent); }
.ms-h3 {
  font-family: var(--ms-font);
  font-weight: 400;
  font-size: clamp(19px, 1.5vw, 22px);
  letter-spacing: -0.015em;
  line-height: 1.3;
  margin: 0;
}
.ms-body {
  font-size: 17px;
  line-height: 1.65;
  color: var(--ms-ink-2);
  margin: 0;
  text-wrap: pretty;
}
.ms-lead {
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  color: var(--ms-ink-2);
  margin: 0;
  max-width: 60ch;
  text-wrap: pretty;
}
.ms-label {
  display: inline-block;
  font-family: var(--ms-font);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms-accent);
  padding: 0;
  background: transparent;
  border-radius: 0;
}
.ms-mono {
  font-family: var(--ms-mono);
  font-weight: 500;
  font-size: 12px;
  letter-spacing: 0.04em;
  color: var(--ms-ink-mute);
}

/* ─── Top Nav ─────────────────────────────────────────────────────── */
.ms-nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--ms-bg);
  border-bottom: 1px solid transparent;
  transition: background .2s ease, border-color .2s ease;
  padding-top: env(safe-area-inset-top);
}
.ms-nav.scrolled {
  background: rgba(250, 250, 247, .9);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
  border-bottom-color: var(--ms-rule);
}
.ms-nav-inner {
  max-width: 1240px; margin: 0 auto;
  padding: 14px var(--ms-shell-pad);
  display: flex; align-items: center; justify-content: space-between; gap: 24px;
}
.ms-nav-logo img { height: 22px; display: block; }
.ms-nav-links {
  display: flex; gap: 30px;
  font-weight: 500;
  font-size: 14.5px;
  white-space: nowrap;
}
.ms-nav-links a {
  color: var(--ms-ink-2);
  transition: color .15s ease;
}
.ms-nav-links a:hover { color: var(--ms-ink); }
.ms-nav-right { display: flex; align-items: center; gap: 16px; }
.ms-lang {
  display: inline-flex;
  background: var(--ms-bg-2);
  border-radius: var(--ms-r-pill);
  padding: 3px;
  font-size: 12px;
  font-weight: 600;
}
.ms-lang button {
  border: none; background: transparent;
  padding: 6px 10px; border-radius: var(--ms-r-pill);
  color: var(--ms-ink-mute); cursor: pointer;
  font: inherit;
}
.ms-lang button.on {
  background: var(--ms-paper); color: var(--ms-ink);
  box-shadow: 0 1px 2px rgba(15,18,18,.06);
}
@media (max-width: 820px) {
  .ms-nav-links { display: none; }
}

/* ─── Buttons ─────────────────────────────────────────────────────── */
.ms-btn {
  display: inline-flex; align-items: center; gap: 10px;
  white-space: nowrap;
  font-family: var(--ms-font);
  font-weight: 500;
  font-size: 14.5px;
  letter-spacing: -0.005em;
  border: 1px solid transparent;
  background: #3B4143;
  color: #fff;
  padding: 11px 19px;
  border-radius: var(--ms-r-md);
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease, border-color .15s ease, color .15s ease, transform .12s ease, box-shadow .15s ease;
  box-shadow: 0 1px 2px rgba(15, 18, 18, .06), 0 4px 12px -12px rgba(15, 18, 18, .16);
}
.ms-btn:hover { background: #474D4F; box-shadow: 0 1px 2px rgba(15, 18, 18, .06), 0 6px 14px -12px rgba(15, 18, 18, .2); }
.ms-btn:active { transform: translateY(1px); }
/* Pin link colors so the host theme can't recolor button text on hover/visited */
.ms-btn, .ms-btn:link, .ms-btn:visited, .ms-btn:hover, .ms-btn:focus, .ms-btn:active { color: #fff; }
.ms-btn-ghost, .ms-btn-ghost:link, .ms-btn-ghost:visited, .ms-btn-ghost:hover, .ms-btn-ghost:focus, .ms-btn-ghost:active { color: var(--ms-ink); }
.ms-btn-ghost {
  background: transparent;
  color: var(--ms-ink);
  border-color: var(--ms-rule-strong);
  box-shadow: none;
}
.ms-btn-ghost:hover {
  border-color: var(--ms-ink);
  background: transparent;
}
.ms-btn-sm { padding: 8px 14px; font-size: 13px; }
.ms-btn-lg { padding: 13px 22px; font-size: 15px; }
.ms-btn .arrow {
  width: 14px; height: 14px;
  border-right: 1.6px solid currentColor;
  border-top:  1.6px solid currentColor;
  transform: rotate(45deg);
  margin-left: 2px;
  transition: transform .15s ease;
}
.ms-btn:hover .arrow { transform: rotate(45deg) translateX(2px); }

/* ─── Section base ────────────────────────────────────────────────── */
.ms-section {
  padding: calc(96px * var(--ms-density)) 0;
  position: relative;
}
.ms-section-head { margin-bottom: clamp(40px, 4vw, 64px); display: grid; gap: 16px; }
.ms-section-head .ms-label { justify-self: start; }
.ms-section-head .ms-lead { color: var(--ms-ink-2); }

/* center variant */
.ms-section-head.center { text-align: center; justify-items: center; margin-inline: auto; max-width: 720px; }
.ms-section-head.center .ms-label { justify-self: center; }
.ms-section-head.center .ms-lead { margin-inline: auto; }

/* ─── Hero ────────────────────────────────────────────────────────── */
.ms-hero {
  padding: clamp(28px, 4vw, 60px) 0 clamp(48px, 6vw, 80px);
  position: relative;
  overflow: hidden;
}
.ms-hero-bg {
  position: absolute; pointer-events: none; z-index: 0;
  top: -10%; right: -8%;
  width: 740px; height: 740px;
  background: radial-gradient(closest-side, var(--ms-accent-tint), transparent 70%);
  opacity: .7;
  filter: blur(4px);
}
.ms-hero .ms-shell { position: relative; z-index: 1; }

.ms-hero-grid {
  display: grid;
  grid-template-columns: 1.15fr 1fr;
  column-gap: clamp(28px, 5vw, 88px);
  align-items: center;
}
.ms-hero-text { display: grid; gap: 24px; }
.ms-hero-badge {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12.5px; font-weight: 600;
  padding: 7px 12px;
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-pill);
  color: var(--ms-ink-2);
  width: max-content;
  box-shadow: 0 1px 0 rgba(255,255,255,.6);
}
.ms-hero-badge::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--ms-accent-hi);
  box-shadow: 0 0 0 4px rgba(45, 212, 191, .18);
  animation: ms-pulse 1.8s ease-in-out infinite;
}
@keyframes ms-pulse {
  0%, 100% { box-shadow: 0 0 0 4px rgba(45, 212, 191, .18); }
  50%      { box-shadow: 0 0 0 8px rgba(45, 212, 191, .05); }
}
@media (prefers-reduced-motion: reduce) {
  .ms-hero-badge::before { animation: none; }
}
.ms-hero-h1 { max-width: 19ch; }
.ms-hero-sub { font-size: clamp(17px, 1.35vw, 19.5px); color: var(--ms-ink-2); max-width: 52ch; line-height: 1.6; margin: 0; }
.ms-hero-note {
  font-size: clamp(15px, 1.1vw, 17px);
  color: var(--ms-ink);
  font-weight: 500;
  letter-spacing: -0.005em;
  margin: 0;
}
.ms-hero-disclaimer {
  margin: 4px 0 0;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
  line-height: 1.5;
  max-width: 56ch;
}
.ms-hero-ctas { display: flex; flex-wrap: wrap; gap: 14px; align-items: center; }

/* ─── Stacked hero variant (centered, with countdown) ─────────────── */
.ms-hero-stacked { padding-block: clamp(80px, 10vw, 140px) clamp(80px, 9vw, 120px); }
.ms-hero-stack {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(20px, 2.4vw, 32px);
  max-width: 920px;
  margin-inline: auto;
}
.ms-hero-stacked .ms-hero-h1 {
  max-width: 22ch;
  font-size: clamp(36px, 4.6vw, 68px);
  line-height: 1.08;
}
.ms-hero-stacked .ms-hero-sub {
  max-width: 64ch;
  margin-inline: auto;
}
.ms-hero-note {
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.6;
  color: var(--ms-ink-2);
  max-width: 60ch;
  margin: 0;
  text-wrap: pretty;
}
.ms-hero-disclaimer {
  font-size: 12.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
  margin: clamp(4px, .6vw, 12px) 0 0;
  text-wrap: balance;
}
.ms-hero-stacked .ms-countdown { margin-top: clamp(8px, 1.2vw, 18px); }
.ms-hero-stacked .ms-hero-ctas { justify-content: center; margin-top: 4px; }

.ms-hero-risk {
  margin: 4px 0 0;
  font-size: 13px; color: var(--ms-ink-mute); line-height: 1.55;
  max-width: 56ch;
}
.ms-hero-checks {
  list-style: none;
  margin: clamp(8px, 1.2vw, 14px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px 22px;
  font-family: var(--ms-font);
  font-size: clamp(14.5px, 1.05vw, 16px);
  color: var(--ms-ink);
  font-weight: 500;
}
.ms-hero-checks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.ms-hero-check-mark {
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--ms-ink);
  color: var(--ms-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.ms-hero-stacked .ms-hero-checks { justify-content: center; }

.ms-hero-trial {
  margin: clamp(14px, 1.6vw, 22px) 0 0;
  padding-left: clamp(12px, 1.2vw, 16px);
  border-left: 2px solid var(--ms-ink);
  font-size: clamp(14.5px, 1.05vw, 16px);
  line-height: 1.55;
  color: var(--ms-ink);
  font-weight: 500;
  max-width: 52ch;
  text-wrap: pretty;
}
.ms-hero-stacked .ms-hero-trial {
  margin-inline: auto;
  text-align: left;
}
.ms-hero-visual {
  position: relative;
  min-height: 560px;
  display: flex; align-items: center; justify-content: center;
}
.ms-hero-visual .ms-phone {
  width: clamp(260px, 28vw, 380px);
  filter: drop-shadow(var(--ms-shadow-phone));
}
.ms-hero-chip {
  position: absolute;
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-md);
  padding: 12px 16px;
  box-shadow: var(--ms-shadow-2);
  display: grid; gap: 4px;
  font-size: 13.5px;
}
.ms-hero-chip .k { font-family: var(--ms-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--ms-ink-mute); text-transform: uppercase; }
.ms-hero-chip .v { font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.ms-hero-chip .v.up { color: var(--ms-accent); }
.ms-hero-chip-a { top: 14%; left: -4%; }
.ms-hero-chip-b { bottom: 12%; right: -6%; }

@media (max-width: 960px) {
  .ms-hero-grid { grid-template-columns: 1fr; gap: 56px; }
  .ms-hero-visual { min-height: 460px; }
  .ms-hero-chip-a { left: 4%; }
  .ms-hero-chip-b { right: 4%; }
}

/* ─── Phone frame ─────────────────────────────────────────────────── */
.ms-phone {
  position: relative;
  border-radius: 36px;
}
.ms-phone-inner {
  border-radius: 32px;
  overflow: hidden;
  background: #0A0A0B;
  outline: 1px solid rgba(15, 18, 18, .12);
}
.ms-phone-inner img { width: 100%; height: auto; display: block; }
.ms-phone.subtle { filter: none; }
.ms-phone.subtle .ms-phone-inner { box-shadow: 0 12px 30px -16px rgba(15,18,18,.16); }

/* iPhone device mockups: transparent PNG carries its own bezel — drop the CSS frame */
.ms-phone.device { border-radius: 0; filter: none; }
.ms-phone.device .ms-phone-inner { border-radius: 0; overflow: visible; background: transparent; outline: none; box-shadow: none; }
/* shadow via box-shadow on the image itself (not a filter) so the hi-dpi bitmap stays sharp */
.ms-phone.device .ms-phone-inner img { border-radius: 0; box-shadow: none; }
.ms-phone.device { filter: drop-shadow(0 26px 40px rgba(20,22,16,.22)); }
.ms-phone.device.subtle { filter: drop-shadow(0 20px 34px rgba(20,22,16,.16)); }
.ms-phone.device.subtle .ms-phone-inner img { box-shadow: none; }
/* keep the hi-dpi device bitmap on whole pixels — subpixel float transforms soften it */
.ms-hero-v2 .ms-hero-visual .ms-phone.device { animation: none; }

/* ─── App preview ─────────────────────────────────────────────────── */
.ms-preview-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
}
.ms-preview-card {
  background: transparent;
  border: 0;
  border-radius: 0;
  padding: 0;
  display: grid; gap: 18px;
  align-content: start;
  transition: none;
  box-shadow: none;
}
.ms-preview-card:hover {
  transform: none;
  box-shadow: none;
}
.ms-preview-card .ms-phone {
  width: 100%; max-width: 200px; margin: 0 auto;
}
.ms-preview-meta { display: grid; gap: 6px; padding-top: clamp(14px, 1.4vw, 18px); border-top: 1px solid var(--ms-ink); }
.ms-preview-meta h4 {
  font-family: var(--ms-font);
  font-weight: 500; font-size: 15px; margin: 0; letter-spacing: -0.005em;
}
.ms-preview-meta p { font-size: 13.5px; color: var(--ms-ink-2); margin: 0; line-height: 1.5; }
@media (max-width: 940px) { .ms-preview-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ms-preview-grid { grid-template-columns: 1fr; } }

/* ─── How it works ────────────────────────────────────────────────── */
.ms-steps {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(20px, 2.4vw, 32px);
}
.ms-step {
  display: grid;
  gap: clamp(14px, 1.4vw, 20px);
  padding-top: clamp(20px, 2.4vw, 28px);
  border-top: 1px solid var(--ms-ink);
  background: transparent;
  border-radius: 0;
  box-shadow: none;
  align-content: start;
  position: relative;
}
.ms-step:hover { box-shadow: none; }
.ms-step-num {
  width: auto; height: auto; border-radius: 0;
  background: transparent;
  color: var(--ms-ink-mute);
  font-family: var(--ms-font);
  font-weight: 500;
  font-size: 11.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0;
  justify-self: start;
}
.ms-step h3 {
  font-family: var(--ms-font);
  font-weight: 300;
  font-size: clamp(22px, 2vw, 30px);
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ms-ink);
  max-width: 18ch;
  text-wrap: balance;
}
.ms-step p {
  font-size: clamp(14px, 1vw, 15.5px);
  color: var(--ms-ink-2);
  margin: 0;
  line-height: 1.6;
  max-width: 30ch;
}
@media (max-width: 820px) { .ms-steps { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ms-steps { grid-template-columns: 1fr; } }

/* ─── Modes ───────────────────────────────────────────────────────── */
.ms-modes { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.ms-mode {
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-lg);
  padding: 32px;
  display: grid; gap: 24px;
  align-content: start;
}
.ms-mode-auto {
  background: linear-gradient(180deg, var(--ms-paper) 0%, var(--ms-accent-tint) 100%);
  border-color: var(--ms-accent-tint-2);
}
.ms-mode-head { display: grid; gap: 10px; }
.ms-mode-tag { width: max-content; }
.ms-mode-head h3 {
  font-weight: 600;
  font-size: clamp(20px, 1.8vw, 24px);
  line-height: 1.3;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ms-ink);
}
.ms-mode-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; }
.ms-mode-list li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  align-items: center;
  font-size: 15px;
  color: var(--ms-ink);
  font-weight: 500;
}
.ms-mode-list .check {
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--ms-accent-tint); color: var(--ms-accent);
  display: grid; place-items: center;
}
.ms-mode-list .check svg { width: 12px; height: 12px; }
.ms-mode-foot { padding-top: 8px; border-top: 1px solid var(--ms-rule); display: flex; align-items: center; gap: 10px; }
.ms-mode-foot .ms-mono { color: var(--ms-accent); text-transform: uppercase; letter-spacing: 0.06em; font-size: 11.5px; }
@media (max-width: 820px) { .ms-modes { grid-template-columns: 1fr; } }

/* ─── Is / Is-not ─────────────────────────────────────────────────── */
.ms-isnot { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3vw, 40px); }
.ms-isnot-col {
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-lg);
  padding: 32px;
}
.ms-isnot-col h4 {
  font-size: 13.5px; font-weight: 600;
  letter-spacing: 0;
  margin: 0 0 20px;
  color: var(--ms-ink-2);
}
.ms-isnot-col h4 .num { font-family: var(--ms-mono); font-size: 11px; color: var(--ms-ink-mute); margin-right: 10px; letter-spacing: 0.06em; }
.ms-isnot-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.ms-isnot-col li {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  align-items: center;
  font-size: 15px; font-weight: 500;
  color: var(--ms-ink);
}
.ms-isnot-col .mark {
  width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14px; font-weight: 700;
}
.ms-isnot-col.yes .mark { background: var(--ms-accent-tint); color: var(--ms-accent); }
.ms-isnot-col.no  .mark { background: var(--ms-down-tint); color: var(--ms-down); }
.ms-isnot-col.no  li { color: var(--ms-ink-2); }
/* ─── Clarity (is / is-not) ───────────────────────────────────────── */
.ms-clarity {
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  gap: clamp(32px, 4vw, 64px);
  align-items: start;
}
.ms-clarity-divider {
  background: var(--ms-rule);
  width: 1px;
  align-self: stretch;
  justify-self: center;
}
.ms-clarity-col {
  display: grid;
  gap: clamp(20px, 2.4vw, 32px);
}
.ms-clarity-head {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ms-font);
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
}
.ms-clarity-dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ms-ink-mute);
}
.ms-clarity-is    .ms-clarity-dot { background: var(--ms-ink); }
.ms-clarity-isnot .ms-clarity-dot { background: transparent; box-shadow: inset 0 0 0 1px var(--ms-ink-mute); }

.ms-clarity-tags {
  list-style: none; padding: 0; margin: 0;
  display: flex; flex-wrap: wrap;
  gap: 10px 8px;
}
.ms-clarity-tags li {
  font-family: var(--ms-font);
  font-size: clamp(14.5px, 1.05vw, 16.5px);
  font-weight: 500;
  letter-spacing: -0.005em;
  padding: 9px 16px;
  border-radius: var(--ms-r-pill);
  transition: transform .15s ease, background .15s ease;
}
.ms-clarity-is .ms-clarity-tags li {
  background: var(--ms-ink);
  color: var(--ms-bg);
}
.ms-clarity-isnot .ms-clarity-tags li {
  background: transparent;
  color: var(--ms-ink-mute);
  box-shadow: inset 0 0 0 1px var(--ms-rule);
  text-decoration: line-through;
  text-decoration-color: var(--ms-ink-mute);
  text-decoration-thickness: 1px;
}
.ms-clarity-is .ms-clarity-tags li:hover    { transform: translateY(-2px); }
.ms-clarity-isnot .ms-clarity-tags li:hover { transform: translateY(-2px); background: var(--ms-soft, rgba(15,18,18,.04)); }

@media (max-width: 760px) {
  .ms-clarity { grid-template-columns: 1fr; }
  .ms-clarity-divider { display: none; }
}

/* Old .ms-isnot styles still apply if anyone re-uses them — kept above. */

/* ─── Broker ──────────────────────────────────────────────────────── */
.ms-broker-body {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  gap: clamp(28px, 4vw, 64px);
  align-items: start;
}
.ms-broker-text { display: grid; gap: 24px; }
.ms-broker-text p {
  font-size: clamp(17px, 1.35vw, 19px);
  color: var(--ms-ink-2);
  line-height: 1.6;
  margin: 0;
  max-width: 50ch;
}
.ms-broker-points {
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-lg);
  padding: 8px 28px;
  list-style: none;
  margin: 0;
  display: grid;
}
.ms-broker-points li {
  display: grid; grid-template-columns: 30px 1fr; gap: 16px;
  align-items: center;
  padding: 18px 0;
  border-bottom: 1px solid var(--ms-rule);
  font-size: 15px; font-weight: 500;
}
.ms-broker-points li:last-child { border-bottom: none; }
.ms-broker-points .pt-num {
  width: 30px; height: 30px; border-radius: 50%;
  background: var(--ms-accent-tint); color: var(--ms-accent);
  font-family: var(--ms-mono); font-size: 11.5px; font-weight: 600;
  display: grid; place-items: center;
  letter-spacing: 0.04em;
}
@media (max-width: 820px) { .ms-broker-body { grid-template-columns: 1fr; } }

/* ─── Control ─────────────────────────────────────────────────────── */
.ms-control {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 28px);
}
.ms-control-item {
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-md);
  padding: 24px;
  display: grid; gap: 12px;
  align-content: start;
}
.ms-control-num {
  font-family: var(--ms-mono); font-size: 12px; font-weight: 600;
  color: var(--ms-accent); letter-spacing: 0.04em;
}
.ms-control-item h4 { font-weight: 600; font-size: 16.5px; margin: 0; letter-spacing: -0.005em; }
.ms-control-item p { font-size: 14.5px; color: var(--ms-ink-2); margin: 0; line-height: 1.55; }
@media (max-width: 820px) { .ms-control { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .ms-control { grid-template-columns: 1fr; } }

/* ─── Roadmap ─────────────────────────────────────────────────────── */
.ms-phases { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.ms-phase {
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-md);
  padding: 24px;
  display: grid; gap: 12px;
  align-content: start;
}
.ms-phase-mark {
  display: flex; align-items: center; gap: 10px;
  font-family: var(--ms-mono); font-size: 11.5px; letter-spacing: 0.06em;
  color: var(--ms-ink-mute);
}
.ms-phase-mark .pin {
  width: 8px; height: 8px; border-radius: 50%;
  background: transparent; border: 1.5px solid var(--ms-ink-faint);
}
.ms-phase.on .ms-phase-mark { color: var(--ms-accent); }
.ms-phase.on .pin { background: var(--ms-accent); border-color: var(--ms-accent); }
.ms-phase h4 { font-weight: 600; font-size: 18.5px; margin: 0; letter-spacing: -0.01em; }
.ms-phase p { font-size: 14px; color: var(--ms-ink-2); margin: 0; line-height: 1.55; }
@media (max-width: 820px) { .ms-phases { grid-template-columns: 1fr; } }

/* ─── Form ────────────────────────────────────────────────────────── */
.ms-form {
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-lg);
  padding: clamp(28px, 4vw, 44px);
  box-shadow: var(--ms-shadow-2);
  display: grid; gap: 28px;
  max-width: 820px;
}
.ms-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.ms-field { display: grid; gap: 8px; }
.ms-field span {
  font-size: 13px; font-weight: 600; color: var(--ms-ink-2);
  letter-spacing: 0;
}
.ms-field input, .ms-field select {
  font-family: var(--ms-font);
  font-size: 15.5px; font-weight: 500;
  color: var(--ms-ink);
  background: var(--ms-bg);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-sm);
  padding: 13px 14px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ms-field input:focus, .ms-field select:focus {
  border-color: var(--ms-accent);
  background: var(--ms-paper);
  box-shadow: 0 0 0 4px var(--ms-accent-tint);
}
.ms-field input::placeholder { color: var(--ms-ink-mute); }
.ms-field select {
  -webkit-appearance: none; appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--ms-ink) 50%),
    linear-gradient(135deg, var(--ms-ink) 50%, transparent 50%);
  background-position: calc(100% - 16px) center, calc(100% - 10px) center;
  background-size: 6px 6px;
  background-repeat: no-repeat;
  padding-right: 32px;
}
.ms-form-checks { display: grid; gap: 12px; }
.ms-check {
  display: grid; grid-template-columns: 22px 1fr; gap: 12px;
  align-items: start;
  font-size: 14px; color: var(--ms-ink-2); line-height: 1.55;
  cursor: pointer;
}
.ms-check input { position: absolute; opacity: 0; pointer-events: none; }
.ms-check-box {
  width: 22px; height: 22px;
  border: 1.5px solid var(--ms-rule-strong);
  background: var(--ms-bg);
  border-radius: 6px;
  display: grid; place-items: center;
  color: transparent;
  transition: all .12s ease;
}
.ms-check-box svg { width: 13px; height: 13px; }
.ms-check input:checked + .ms-check-box {
  background: var(--ms-accent);
  border-color: var(--ms-accent);
  color: #fff;
}
.ms-form-foot {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
}
.ms-form-success { font-size: 13.5px; color: var(--ms-accent); font-weight: 600; }
@media (max-width: 620px) { .ms-form-grid { grid-template-columns: 1fr; } }

/* ─── Beta block (friendly, not dark) ─────────────────────────────── */
.ms-beta {
  background:
    radial-gradient(130% 85% at 50% -6%, rgba(45,212,191,.15), transparent 52%),
    linear-gradient(180deg, #FBFDFC 0%, #E7EFED 100%);
  border: 1px solid var(--ms-accent-tint-2);
  border-radius: var(--ms-r-lg);
  padding: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: center;
}
.ms-beta-title { max-width: 18ch; }
.ms-beta-text { display: grid; gap: 20px; }
.ms-beta-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 12px; }
.ms-beta-list li {
  display: grid; grid-template-columns: 26px 1fr; gap: 12px;
  align-items: center;
  font-size: 15px; font-weight: 500;
  color: var(--ms-ink);
}
.ms-beta-list .pt-num {
  width: 26px; height: 26px; border-radius: 50%;
  background: var(--ms-paper); color: var(--ms-accent);
  border: 1px solid var(--ms-accent-tint-2);
  font-family: var(--ms-mono); font-size: 11px; font-weight: 600;
  display: grid; place-items: center;
}
@media (max-width: 820px) { .ms-beta { grid-template-columns: 1fr; } }

/* ─── FAQ ─────────────────────────────────────────────────────────── */
.ms-faq {
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-lg);
  overflow: hidden;
  max-width: 920px;
}
.ms-faq-item { border-bottom: 1px solid var(--ms-rule); }
.ms-faq-item:last-child { border-bottom: none; }
.ms-faq-q {
  width: 100%; border: none; background: transparent;
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px;
  padding: 22px clamp(20px, 2.4vw, 28px);
  text-align: left;
  font-family: var(--ms-font);
  font-weight: 600;
  font-size: 16px;
  letter-spacing: -0.005em;
  color: var(--ms-ink);
  cursor: pointer;
  transition: color .15s ease;
}
.ms-faq-q:hover { color: var(--ms-accent); }
.ms-faq-toggle {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--ms-bg-2);
  display: grid; place-items: center;
  flex: none;
  position: relative;
  transition: background .15s ease, transform .2s ease;
}
.ms-faq-toggle::before, .ms-faq-toggle::after {
  content: ""; position: absolute; top: 50%; left: 50%;
  width: 12px; height: 1.5px;
  background: var(--ms-ink);
  transform: translate(-50%, -50%);
  transition: transform .2s ease, opacity .2s ease;
}
.ms-faq-toggle::after { transform: translate(-50%, -50%) rotate(90deg); }
.ms-faq-item.open .ms-faq-toggle { background: var(--ms-accent); }
.ms-faq-item.open .ms-faq-toggle::before,
.ms-faq-item.open .ms-faq-toggle::after { background: #fff; }
.ms-faq-item.open .ms-faq-toggle::after { opacity: 0; }
.ms-faq-a { max-height: 0; overflow: hidden; transition: max-height .25s ease; }
.ms-faq-item.open .ms-faq-a { max-height: 360px; }
.ms-faq-a p {
  font-size: 15px; color: var(--ms-ink-2); line-height: 1.6;
  margin: 0;
  padding: 0 clamp(20px, 2.4vw, 28px) 22px;
  max-width: 64ch;
}

/* ─── Footer ──────────────────────────────────────────────────────── */
.ms-footer {
  padding: clamp(56px, 7vw, 88px) 0 28px;
  border-top: 1px solid var(--ms-rule);
  background: var(--ms-bg);
}
.ms-footer-top {
  display: grid; grid-template-columns: 6fr 6fr; gap: clamp(24px, 4vw, 64px);
  padding-bottom: 48px;
  border-bottom: 1px solid var(--ms-rule);
}
.ms-footer-brand img { height: 26px; }
.ms-footer-brand p { color: var(--ms-ink-2); font-size: 14px; max-width: 32ch; margin: 18px 0 0; line-height: 1.55; }
.ms-footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; }
.ms-footer-cols h5 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
  margin: 0 0 16px;
}
.ms-footer-cols ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; }
.ms-footer-cols a { font-size: 14.5px; color: var(--ms-ink); }
.ms-footer-cols a:hover { color: var(--ms-accent); }
.ms-footer-legal {
  padding: 28px 0;
  border-bottom: 1px solid var(--ms-rule);
}
.ms-footer-legal h6 {
  font-size: 12px; font-weight: 600; letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
  margin: 0 0 12px;
}
.ms-footer-legal p { font-size: 12.5px; color: var(--ms-ink-mute); margin: 0; line-height: 1.6; }
.ms-footer-base {
  padding-top: 22px;
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px;
  font-size: 12.5px; color: var(--ms-ink-mute);
}
@media (max-width: 820px) {
  .ms-footer-top { grid-template-columns: 1fr; }
  .ms-footer-cols { grid-template-columns: 1fr 1fr; }
}

/* ─── Density ─────────────────────────────────────────────────────── */
.ms-density-compact     { --ms-density: 0.74; }
.ms-density-comfortable { --ms-density: 1; }
.ms-density-spacious    { --ms-density: 1.18; }

/* ─── Trust / Logos marquee ───────────────────────────────────────── */
.ms-trust {
  padding-block: clamp(40px, 5vw, 64px);
  border-top: 1px solid var(--ms-rule);
  border-bottom: 1px solid var(--ms-rule);
  background: var(--ms-bg);
}
.ms-trust-shell {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.4vw, 32px);
}
.ms-trust-label {
  font-family: var(--ms-font);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
  text-align: center;
  white-space: nowrap;
}
.ms-trust-marquee {
  overflow: hidden;
  position: relative;
  width: 100%;
  /* Fade out the edges so logos enter/exit cleanly */
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 6%, #000 94%, transparent 100%);
}
.ms-trust-marquee-inner {
  display: flex;
  width: max-content;
  animation: ms-trust-scroll 90s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ms-trust-marquee-inner { animation: none; }
}
.ms-trust:hover .ms-trust-marquee-inner { animation-play-state: paused; }
.ms-trust-track {
  display: flex;
  align-items: center;
  gap: clamp(40px, 5vw, 72px);
  padding-right: clamp(40px, 5vw, 72px);
  flex-shrink: 0;
}
@keyframes ms-trust-scroll {
  to { transform: translateX(-50%); }
}
.ms-trust-logo {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--ms-ink);
  opacity: .55;
  font-family: var(--ms-font);
  font-size: clamp(20px, 1.8vw, 26px);
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  transition: opacity .2s ease;
  user-select: none;
}
.ms-trust-logo:hover { opacity: .9; }
.ms-trust-logo svg {
  width: 1em;
  height: 1em;
  flex-shrink: 0;
}

/* Per-logo style — approximate the wordmark feel of each brand. */
.ms-logo-capital { font-weight: 800; letter-spacing: -0.02em; font-size: clamp(22px, 1.9vw, 28px); }
.ms-logo-capital b { font-weight: 800; }
.ms-logo-capital i {
  font-style: normal;
  margin: 0 1px;
  color: var(--ms-accent);
  opacity: .9;
}

.ms-logo-tv { font-weight: 700; font-size: clamp(20px, 1.7vw, 24px); }
.ms-logo-tv svg { width: 1.05em; height: 0.85em; }

.ms-logo-binance { font-weight: 700; font-size: clamp(18px, 1.5vw, 22px); letter-spacing: 0.12em; }
.ms-logo-binance svg { color: #F0B90B; }

.ms-logo-mt { font-weight: 700; font-size: clamp(20px, 1.7vw, 24px); letter-spacing: -0.01em; }
.ms-logo-mt sup { font-size: .55em; font-weight: 700; margin-left: 2px; }

.ms-logo-ic { font-weight: 800; font-size: clamp(20px, 1.7vw, 24px); letter-spacing: -0.01em; }
.ms-logo-oanda { font-weight: 700; font-size: clamp(20px, 1.7vw, 24px); letter-spacing: 0.04em; }

@media (max-width: 720px) {
  .ms-trust-label { white-space: normal; text-align: center; }
}

/* In minimal accent mode: drop the colored brand bits (binance yellow, capital dot) */
html[data-accent-use="minimal"] .ms-logo-binance svg { color: var(--ms-ink); }
html[data-accent-use="minimal"] .ms-logo-capital i  { color: var(--ms-ink); }

/* ─── Final CTA before footer ────────────────────────────────────── */
.ms-final-cta {
  padding-block: clamp(80px, 9vw, 140px);
  border-top: 1px solid var(--ms-rule);
}
.ms-final-cta-inner {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: clamp(18px, 2vw, 28px);
  max-width: 720px;
  margin-inline: auto;
}
.ms-final-cta-h {
  max-width: 32ch;
  text-wrap: balance;
}
.ms-final-cta-sub {
  font-size: clamp(15.5px, 1.1vw, 17px);
  color: var(--ms-ink-2);
  line-height: 1.55;
  margin: 0;
  max-width: 78ch;
  text-wrap: balance;
}

/* ─── Impact stats grid ──────────────────────────────────────────── */
.ms-impact { padding-block: clamp(72px, 9vw, 120px); }
.ms-impact-grid {
  list-style: none; padding: 0; margin: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0;
  border-top: 1px solid var(--ms-rule);
  border-bottom: 1px solid var(--ms-rule);
}
.ms-impact-stat {
  display: grid;
  align-content: center;
  justify-items: center;
  text-align: center;
  padding: clamp(28px, 4vw, 56px) clamp(16px, 2vw, 24px);
  border-right: 1px solid var(--ms-rule);
  gap: 12px;
  min-height: clamp(140px, 16vw, 220px);
}
.ms-impact-stat:last-child { border-right: 0; }
.ms-impact-v {
  font-family: var(--ms-font);
  font-weight: 300;
  font-size: clamp(40px, 5.5vw, 84px);
  line-height: 1;
  letter-spacing: -0.03em;
  color: var(--ms-ink);
  font-variant-numeric: tabular-nums;
}
.ms-impact-l {
  font-family: var(--ms-font);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
  max-width: 22ch;
  line-height: 1.4;
}
@media (max-width: 860px) {
  .ms-impact-grid { grid-template-columns: 1fr 1fr; }
  .ms-impact-stat:nth-child(2n) { border-right: 0; }
  .ms-impact-stat:nth-child(-n+2) { border-bottom: 1px solid var(--ms-rule); }
}
@media (max-width: 480px) {
  .ms-impact-grid { grid-template-columns: 1fr; }
  .ms-impact-stat { border-right: 0; border-bottom: 1px solid var(--ms-rule); }
  .ms-impact-stat:last-child { border-bottom: 0; }
}

/* ─── Statement (editorial line) ─────────────────────────────────── */
.ms-statement {
  padding-block: clamp(72px, 9vw, 120px);
  text-align: center;
}
.ms-statement-label { margin-bottom: clamp(18px, 2vw, 28px); }
.ms-statement-body {
  font-family: var(--ms-font);
  font-weight: 300;
  font-size: clamp(24px, 3vw, 42px);
  line-height: 1.25;
  letter-spacing: -0.012em;
  color: var(--ms-ink);
  margin: 0 auto;
  max-width: 28ch;
  text-wrap: balance;
}

/* ─── Promises (trust grid) ───────────────────────────────────────── */
.ms-promises {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(20px, 2.4vw, 36px) clamp(28px, 3vw, 56px);
  max-width: 1080px;
  margin-inline: auto;
}
.ms-promise {
  display: grid;
  grid-template-columns: 22px 1fr;
  align-items: start;
  gap: 14px;
  padding-block: clamp(8px, 1vw, 12px);
  border-top: 1px solid var(--ms-rule);
}
.ms-promise-mark {
  width: 22px; height: 22px;
  border-radius: 50%;
  background: var(--ms-ink);
  color: var(--ms-bg);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.ms-promise-text {
  font-family: var(--ms-font);
  font-size: clamp(15px, 1.1vw, 17px);
  font-weight: 500;
  line-height: 1.4;
  color: var(--ms-ink);
  text-wrap: pretty;
}
@media (max-width: 880px) {
  .ms-promises { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .ms-promises { grid-template-columns: 1fr; gap: 0; }
}

/* ─── Pillars (2x2 with floating phones) ─────────────────────────── */

/* Smart wrapping: avoid single-word last lines (orphans) across prose blocks */
.ms-pillar-p,
.ms-step p,
.ms-broker-text p,
.ms-faq-a p,
.ms-newsletter-sub,
.ms-control-item p,
.ms-beta-sub {
  text-wrap: pretty;
}
.ms-pillar-h,
.ms-step h4,
.ms-faq-q,
.ms-impact-stat-label {
  text-wrap: balance;
}

.ms-pillars-section {
  padding-block: clamp(80px, 10vw, 160px);
  perspective: 1200px;
}
.ms-pillars {
  display: grid;
  grid-template-columns: minmax(0, 260px) clamp(340px, 34vw, 560px) minmax(0, 260px);
  grid-template-rows: auto auto;
  column-gap: clamp(20px, 2.5vw, 40px);
  row-gap: clamp(80px, 12vw, 180px);
  align-items: center;
  justify-content: center;
  max-width: 1240px;
  margin-inline: auto;
}
.ms-pillar { max-width: 260px; }
.ms-pillar-tl { grid-column: 1; grid-row: 1; text-align: left; }
.ms-pillar-tr { grid-column: 3; grid-row: 1; text-align: right; }
.ms-pillar-bl { grid-column: 1; grid-row: 2; text-align: left; }
.ms-pillar-br { grid-column: 3; grid-row: 2; text-align: right; }

/* Explicit heading alignment, robust against text-wrap heuristics */
.ms-pillar-tl .ms-pillar-h, .ms-pillar-bl .ms-pillar-h { text-align: left; }
.ms-pillar-tr .ms-pillar-h, .ms-pillar-br .ms-pillar-h { text-align: right; }

.ms-pillar-tr, .ms-pillar-br { margin-left: auto; }
.ms-pillar-rule {
  display: block;
  width: clamp(180px, 22vw, 280px);
  height: 1px;
  background: var(--ms-ink);
  opacity: .85;
  margin-bottom: clamp(32px, 4vw, 56px);
}
.ms-pillar-tr .ms-pillar-rule,
.ms-pillar-br .ms-pillar-rule { margin-left: auto; }

.ms-pillar-h {
  font-family: var(--ms-font);
  font-weight: 300;
  font-size: clamp(34px, 4vw, 56px);
  line-height: 1.05;
  letter-spacing: -0.015em;
  color: var(--ms-ink);
  margin: 0 0 clamp(18px, 2vw, 28px);
}
.ms-pillar-p {
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  color: var(--ms-ink-2);
  margin: 0;
  max-width: 32ch;
}
.ms-pillar-tr .ms-pillar-p,
.ms-pillar-br .ms-pillar-p { margin-left: auto; }

.ms-pillars-stage {
  grid-column: 2;
  grid-row: 1 / span 2;
  position: relative;
  align-self: center;
  justify-self: center;
  width: 100%;
  pointer-events: none;
  perspective: 1200px;
}
.ms-pillars-mock {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 36px 60px rgba(15,18,18,.22));
  transform-origin: 50% 50%;
  transition: transform .4s cubic-bezier(.2,.7,.2,1);
  will-change: transform;
  animation: ms-pillars-float 8s ease-in-out infinite;
}
@keyframes ms-pillars-float {
  0%, 100% { translate: 0 0; }
  50%      { translate: 0 -10px; }
}
@media (prefers-reduced-motion: reduce) {
  .ms-pillars-mock { animation: none; }
}

@media (max-width: 960px) {
  .ms-pillars {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto auto auto;
    row-gap: clamp(56px, 9vw, 88px);
  }
  .ms-pillar {
    grid-column: 1;
    max-width: min(420px, 86%);
  }
  .ms-pillar-h { font-size: clamp(28px, 7.5vw, 40px); overflow-wrap: break-word; hyphens: auto; }
  .ms-pillar-p { font-size: clamp(15px, 3.8vw, 17px); }
  .ms-pillar-rule { width: clamp(120px, 30vw, 200px); }

  /* Zigzag: tl + bl left, tr + br right */
  .ms-pillar-tl { grid-row: 1; text-align: left;  margin-right: auto; }
  .ms-pillars-stage { grid-column: 1; grid-row: 2; max-width: min(420px, 86%); margin-inline: auto; }
  .ms-pillar-tr { grid-row: 3; text-align: right; margin-left: auto; }
  .ms-pillar-bl { grid-row: 4; text-align: left;  margin-right: auto; margin-left: 0; }
  .ms-pillar-br { grid-row: 5; text-align: right; margin-left: auto; }

  .ms-pillar-tl .ms-pillar-rule, .ms-pillar-bl .ms-pillar-rule { margin-left: 0; margin-right: auto; }
  .ms-pillar-tr .ms-pillar-rule, .ms-pillar-br .ms-pillar-rule { margin-left: auto; margin-right: 0; }
  .ms-pillar-tl .ms-pillar-p,    .ms-pillar-bl .ms-pillar-p    { margin-left: 0; margin-right: auto; }
  .ms-pillar-tr .ms-pillar-p,    .ms-pillar-br .ms-pillar-p    { margin-left: auto; margin-right: 0; }
}

@media (max-width: 480px) {
  .ms-pillar { max-width: 92%; }
  .ms-pillar-h { font-size: clamp(26px, 7vw, 34px); }
}

/* ─── Newsletter + Countdown ──────────────────────────────────────── */
.ms-newsletter { padding-block: clamp(80px, 9vw, 140px); }
.ms-countdown {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: clamp(8px, 1.4vw, 20px);
  margin: clamp(28px, 4vw, 48px) 0 clamp(36px, 5vw, 60px);
  font-variant-numeric: tabular-nums;
}
.ms-cd-unit {
  display: flex;
  flex-direction: column;
  align-items: center;
  min-width: clamp(72px, 9vw, 120px);
}
.ms-cd-v {
  font-family: var(--ms-font);
  font-weight: 300;
  font-size: clamp(48px, 8vw, 110px);
  line-height: 1;
  letter-spacing: -0.04em;
  color: var(--ms-ink);
}
.ms-cd-l {
  margin-top: 10px;
  font-family: var(--ms-font);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
}
.ms-cd-sep {
  font-family: var(--ms-font);
  font-weight: 200;
  font-size: clamp(40px, 6vw, 90px);
  line-height: 1;
  color: var(--ms-rule);
  align-self: flex-start;
  padding-top: clamp(4px, .8vw, 12px);
}

.ms-newsletter-form {
  max-width: 580px;
  margin: 0 auto;
  display: grid;
  gap: 14px;
}
.ms-newsletter-field-single { grid-template-columns: 1fr; }
.ms-newsletter-field-single input { padding: 14px 16px; }
.ms-newsletter-note {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--ms-ink-mute);
  text-align: center;
  line-height: 1.55;
}
.ms-newsletter-field {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-md);
  padding: 6px 6px 6px 22px;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.ms-newsletter-field:focus-within {
  border-color: var(--ms-ink);
  box-shadow: 0 0 0 3px var(--ms-soft, rgba(15,18,18,.06));
}
.ms-newsletter-field input {
  font-family: var(--ms-font);
  font-size: 16px;
  font-weight: 500;
  color: var(--ms-ink);
  background: transparent;
  border: 0;
  outline: 0;
  padding: 14px 8px;
  width: 100%;
}
.ms-newsletter-field input::placeholder { color: var(--ms-ink-mute); }
.ms-newsletter-field .ms-btn { white-space: nowrap; }

.ms-newsletter-consent {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 10px;
  font-size: 13px;
  color: var(--ms-ink-2);
  cursor: pointer;
}
.ms-newsletter-consent input { position: absolute; opacity: 0; pointer-events: none; }
.ms-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

@media (max-width: 560px) {
  .ms-cd-sep { display: none; }
  .ms-countdown { gap: 6px; flex-wrap: wrap; }
  .ms-cd-unit { min-width: 70px; }
  .ms-newsletter-field {
    grid-template-columns: 1fr;
    border-radius: var(--ms-r-md);
    padding: 6px;
  }
  .ms-newsletter-field input { padding: 14px 12px; }
}

/* tweaks panel z */
.tweaks-panel { z-index: 100; }

/* ─── Reveal-on-scroll animations ─────────────────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  .ms-reveal {
    opacity: 0;
    transform: translateY(14px);
    transition: opacity .7s ease, transform .7s cubic-bezier(.2, .7, .2, 1);
    will-change: opacity, transform;
  }
  .ms-reveal.is-visible {
    opacity: 1;
    transform: translateY(0);
  }
  /* Pillars stage: parallax JS sets transform on the inner <img>, so animate
     the stage wrapper itself (not transform) to avoid conflicts. */
  .ms-pillars-stage.ms-reveal { transform: none; opacity: 0; }
  .ms-pillars-stage.ms-reveal.is-visible { opacity: 1; }

  /* Clarity tag stagger — staggered via JS-set transition-delay on each <li>. */
  .ms-clarity-tags li {
    opacity: 0;
    transform: translateY(8px);
    transition: opacity .55s ease, transform .55s cubic-bezier(.2, .7, .2, 1);
  }
  .ms-clarity-tags li.is-visible {
    opacity: 1;
    transform: translateY(0);
  }

  /* Hero load-in cascade — runs once when React mounts the section. */
  .ms-hero-text > * {
    opacity: 0;
    animation: ms-hero-fade-in .85s cubic-bezier(.2, .7, .2, 1) forwards;
  }
  .ms-hero-text > *:nth-child(1) { animation-delay: 80ms; }
  .ms-hero-text > *:nth-child(2) { animation-delay: 180ms; }
  .ms-hero-text > *:nth-child(3) { animation-delay: 280ms; }
  .ms-hero-text > *:nth-child(4) { animation-delay: 380ms; }
  .ms-hero-text > *:nth-child(5) { animation-delay: 480ms; }
  .ms-hero-text > *:nth-child(6) { animation-delay: 560ms; }
  .ms-hero-visual {
    opacity: 0;
    animation: ms-hero-fade-in 1s cubic-bezier(.2, .7, .2, 1) 220ms forwards;
  }
}
@keyframes ms-hero-fade-in {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Nav link underline reveal on hover */
.ms-nav-links a {
  position: relative;
  padding: 4px 0;
}
.ms-nav-links a::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: -2px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform .35s cubic-bezier(.2, .7, .2, 1), background-color .15s ease;
}
.ms-nav-links a:hover::after { transform: scaleX(1); }

/* Slightly softer fade on the trust marquee edges */
.ms-trust-marquee {
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 12%, #000 88%, transparent 100%);
}

/* ─── Minimal accent mode ─────────────────────────────────────────────
   Tones the page way down: only the primary CTA stays teal, plus a
   single small dot in the hero badge. Everything else (eyebrows, step
   numbers, FAQ toggles, mode gradients, beta block, link hovers,
   focus rings, hero radial) goes neutral. */
html[data-accent-use="minimal"] {
  --ms-soft:      rgba(15, 18, 18, .045);
  --ms-soft-2:    rgba(15, 18, 18, .08);
}
html[data-accent-use="minimal"] .ms-hero-bg { display: none; }

/* Headline accent span → ink */
html[data-accent-use="minimal"] .ms-h1 .accent,
html[data-accent-use="minimal"] .ms-h2 .accent { color: var(--ms-ink); }

/* Eyebrow label → neutral chip */
html[data-accent-use="minimal"] .ms-label {
  color: var(--ms-ink-mute);
  background: transparent;
}

/* Step numbers, control numbers, broker numbers, mode-foot mono → neutral */
html[data-accent-use="minimal"] .ms-step-num,
html[data-accent-use="minimal"] .ms-broker-points .pt-num {
  background: var(--ms-soft);
  color: var(--ms-ink);
}
html[data-accent-use="minimal"] .ms-control-num,
html[data-accent-use="minimal"] .ms-mode-foot .ms-mono {
  color: var(--ms-ink-mute);
}

/* Mode list checks, is-list marks → neutral (kept readable) */
html[data-accent-use="minimal"] .ms-mode-list .check,
html[data-accent-use="minimal"] .ms-isnot-col.yes .mark {
  background: var(--ms-soft);
  color: var(--ms-ink);
}

/* Clarity tags in minimal mode — already neutral. No-op placeholder. */

/* Auto-mode card → no teal gradient */
html[data-accent-use="minimal"] .ms-mode-auto {
  background: var(--ms-paper);
  border-color: var(--ms-rule);
}

/* Roadmap pin (active) → ink, not teal */
html[data-accent-use="minimal"] .ms-phase.on .ms-phase-mark { color: var(--ms-ink); }
html[data-accent-use="minimal"] .ms-phase.on .pin {
  background: var(--ms-ink);
  border-color: var(--ms-ink);
}

/* Form focus → neutral ring, no teal halo */
html[data-accent-use="minimal"] .ms-field input:focus,
html[data-accent-use="minimal"] .ms-field select:focus {
  border-color: var(--ms-ink);
  box-shadow: 0 0 0 3px var(--ms-soft);
}
html[data-accent-use="minimal"] .ms-check input:checked + .ms-check-box {
  background: var(--ms-ink);
  border-color: var(--ms-ink);
}
html[data-accent-use="minimal"] .ms-form-success { color: var(--ms-ink); }

/* Beta block → off-white, no teal gradient */
html[data-accent-use="minimal"] .ms-beta {
  background: var(--ms-paper);
  border-color: var(--ms-rule);
}
html[data-accent-use="minimal"] .ms-beta-list .pt-num {
  background: var(--ms-soft);
  color: var(--ms-ink);
  border-color: var(--ms-rule);
}

/* FAQ open state → ink, not teal */
html[data-accent-use="minimal"] .ms-faq-q:hover { color: var(--ms-ink); }
html[data-accent-use="minimal"] .ms-faq-item.open .ms-faq-toggle { background: var(--ms-ink); }

/* Footer link hover → ink */
html[data-accent-use="minimal"] .ms-footer-cols a:hover { color: var(--ms-ink); }

/* Hero chip up colour → ink instead of teal */
html[data-accent-use="minimal"] .ms-hero-chip .v.up { color: var(--ms-ink); }

/* Hero badge keeps its pulsing dot (single small spot of colour). */

/* Selection → neutral */
html[data-accent-use="minimal"] ::selection { background: var(--ms-ink); color: var(--ms-bg); }

/* Hero: only one CTA, fewer floating chips in minimal mode */
html[data-accent-use="minimal"] .ms-hero-cta-secondary { display: none; }
html[data-accent-use="minimal"] .ms-hero-chip-b        { display: none; }
html[data-accent-use="minimal"] .ms-hero-chip          { box-shadow: var(--ms-shadow-1); }


/* ---- landing-v2 extras ---- */
/* mySAM Landingpage v2 — additions on top of landing/styles.css
   New patterns: 3-card row, beta progress strip, access steps (5),
   trust grid (3x2), single-column signup, feedback cards. */

/* ─── Hero v2 ─────────────────────────────────────────────────────── */
/* Drop GPU promotion once revealed so text stays crisp on large/hi-dpi screens */
@media (prefers-reduced-motion: no-preference) {
  .ms-reveal.is-visible {
    transform: none;
    will-change: auto;
  }
}
/* Slightly larger logo lockup in the header */
.ms-nav-logo img { height: 46px; }
/* Slightly larger logo lockup in the footer */
.ms-footer-brand img { height: 48px; }

/* Layout: text takes ~2/3, mockup ~1/3. Hero feels spacious and the
   headline gets room to breathe across two display lines. */
.ms-hero-v2 .ms-hero-grid {
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  column-gap: clamp(32px, 5vw, 96px);
}
.ms-hero-v2 .ms-hero-text { gap: clamp(18px, 1.8vw, 24px); }
.ms-hero-kicker {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--ms-font);
  font-size: clamp(12px, 1vw, 13.5px);
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
  margin: 0;
  width: max-content;
  max-width: 100%;
}
.ms-hero-kicker::before {
  content: "";
  width: 28px;
  height: 1px;
  background: var(--ms-ink-mute);
  flex-shrink: 0;
}
.ms-hero-v2 .ms-hero-h1 {
  font-weight: 300;
  font-size: clamp(40px, 5.2vw, 76px);
  line-height: 1.02;
  letter-spacing: -0.022em;
  max-width: 16ch;
}
.ms-hero-v2 .ms-hero-h1 .accent {
  font-weight: 300;
  color: var(--ms-ink);
}
.ms-hero-v2 .ms-hero-sub {
  max-width: 56ch;
  font-size: clamp(16px, 1.2vw, 19px);
  color: var(--ms-ink-2);
}
.ms-hero-v2 .ms-hero-visual {
  min-height: clamp(420px, 44vw, 600px);
}
.ms-hero-v2 .ms-hero-visual .ms-phone {
  width: clamp(250px, 27vw, 370px);
}
@media (max-width: 960px) {
  .ms-hero-v2 .ms-hero-grid { grid-template-columns: 1fr; gap: 48px; }
  .ms-hero-v2 .ms-hero-h1 { max-width: 22ch; }
  .ms-hero-v2 .ms-hero-visual { min-height: 420px; }
}
@media (max-width: 640px) {
  .ms-hero-v2 .ms-hero-grid { gap: 0; }
  .ms-hero-v2 .ms-hero-visual { display: none; }
}

.ms-hero-trust {
  list-style: none;
  margin: clamp(4px, 1vw, 10px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 8px 10px;
}
.ms-hero-fineprint {
  margin: 14px 0 0;
  max-width: 52ch;
  font-family: var(--ms-font);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ms-ink-2);
  opacity: .8;
}
.ms-hero-trust li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ms-font);
  font-size: 13px;
  font-weight: 500;
  color: var(--ms-ink-2);
  padding: 7px 12px;
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-pill);
  white-space: nowrap;
}
.ms-hero-trust li::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ms-accent);
  flex-shrink: 0;
}

/* ─── Challenge list (editorial, 3 columns with dividers) ─────────── */
.ms-challenge-list {
  list-style: none;
  margin: clamp(36px, 4.5vw, 60px) 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(28px, 3.5vw, 56px);
  border-top: 1px solid var(--ms-rule);
  padding-top: clamp(32px, 3.6vw, 48px);
}
.ms-challenge-row {
  display: grid;
  gap: 14px;
  align-content: start;
  position: relative;
}
.ms-challenge-row:not(:first-child)::before {
  content: "";
  position: absolute;
  left: calc(-1 * clamp(14px, 1.75vw, 28px));
  top: 4px;
  bottom: 4px;
  width: 1px;
  background: var(--ms-rule);
}
.ms-challenge-num {
  font-family: var(--ms-font);
  font-weight: 200;
  font-size: clamp(36px, 3.6vw, 56px);
  line-height: 0.9;
  letter-spacing: -0.02em;
  color: var(--ms-ink-faint);
}
.ms-challenge-t {
  font-family: var(--ms-font);
  font-weight: 600;
  font-size: clamp(19px, 1.7vw, 24px);
  line-height: 1.2;
  letter-spacing: -0.015em;
  margin: 0;
  color: var(--ms-ink);
  text-wrap: balance;
}
.ms-challenge-d {
  font-size: clamp(16px, 1vw, 19px);
  line-height: 1.65;
  color: var(--ms-ink-2);
  margin: 0;
  max-width: 40ch;
  text-wrap: pretty;
}
@media (max-width: 880px) {
  .ms-challenge-list { grid-template-columns: 1fr; gap: 0; padding-top: 0; border-top: 0; }
  .ms-challenge-row {
    grid-template-columns: clamp(44px, 12vw, 64px) 1fr;
    align-items: baseline;
    column-gap: clamp(16px, 4vw, 24px);
    row-gap: 8px;
    padding: 26px 0;
    border-top: 1px solid var(--ms-rule);
  }
  .ms-challenge-row:last-child { border-bottom: 1px solid var(--ms-rule); }
  .ms-challenge-row:not(:first-child)::before { display: none; }
  .ms-challenge-num { grid-row: span 2; }
  .ms-challenge-d { grid-column: 2; max-width: none; }
}

/* ─── Three-card row (Problem + Approach) ─────────────────────────── */
.ms-cards-3 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 28px);
}
.ms-card-soft {
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-lg);
  padding: clamp(24px, 2.4vw, 32px);
  display: grid;
  gap: 12px;
  align-content: start;
  box-shadow: var(--ms-shadow-1);
  transition: transform .2s ease, box-shadow .2s ease;
}
.ms-card-soft:hover {
  transform: translateY(-2px);
  box-shadow: var(--ms-shadow-2);
}
.ms-card-soft .ms-card-mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ms-accent-tint);
  color: var(--ms-accent);
  display: grid; place-items: center;
  font-family: var(--ms-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
  margin-bottom: 6px;
}
.ms-card-soft h3 {
  font-family: var(--ms-font);
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 21px);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0;
  color: var(--ms-ink);
}
.ms-card-soft p {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ms-ink-2);
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 880px) { .ms-cards-3 { grid-template-columns: 1fr; } }

/* Approach cards — glass style (translucent, blurred, no green glow) */
.ms-approach .ms-card-soft {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .72) 0%,
    rgba(255, 255, 255, .42) 100%);
  border: 1px solid rgba(255, 255, 255, .9);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .85),
    0 1px 0 rgba(15, 18, 18, .04),
    0 18px 40px -18px rgba(15, 18, 18, .14),
    0 4px 12px -6px rgba(15, 18, 18, .06);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
}
.ms-approach .ms-card-soft:hover {
  background: linear-gradient(180deg,
    rgba(255, 255, 255, .82) 0%,
    rgba(255, 255, 255, .52) 100%);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, .9),
    0 1px 0 rgba(15, 18, 18, .04),
    0 28px 50px -20px rgba(15, 18, 18, .18),
    0 6px 16px -8px rgba(15, 18, 18, .08);
}
.ms-approach .ms-card-soft .ms-card-mark {
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(255, 255, 255, .9);
  color: var(--ms-ink);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Subtle ambient backdrop behind the glass row so the blur has something
   to soften — a single very faint radial tone, not a teal wash. */
.ms-approach { position: relative; isolation: isolate; }
.ms-approach::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    radial-gradient(60% 60% at 20% 30%, rgba(15, 18, 18, .05), transparent 70%),
    radial-gradient(50% 50% at 85% 70%, rgba(15, 18, 18, .04), transparent 70%);
}

/* Minimal-accent mode: glass cards stay glass (no teal anywhere) */
html[data-accent-use="minimal"] .ms-card-soft .ms-card-mark {
  background: var(--ms-soft, rgba(15, 18, 18, .05));
  color: var(--ms-ink);
}

/* ─── Approach steps (phone + text as one unit) ───────────────────── */
.ms-approach-steps {
  position: relative;
  z-index: 1;
  margin-top: clamp(40px, 5vw, 64px);
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(24px, 3vw, 48px);
  align-items: start;
}
.ms-approach-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(20px, 2.4vw, 30px);
  text-align: center;
}
.ms-approach-step-visual {
  width: 100%;
  display: flex;
  justify-content: center;
}
.ms-approach-step .ms-phone {
  width: 100%;
  max-width: 258px;
}
.ms-approach-step-text {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  max-width: 30ch;
}
.ms-approach-step-text .ms-card-mark {
  width: 36px; height: 36px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-family: var(--ms-mono-font, var(--ms-font));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .04em;
  background: rgba(255, 255, 255, .65);
  border: 1px solid rgba(255, 255, 255, .9);
  color: var(--ms-accent);
  box-shadow: 0 1px 0 rgba(15, 18, 18, .04);
}
html[data-accent-use="minimal"] .ms-approach-step-text .ms-card-mark {
  background: var(--ms-soft, rgba(15, 18, 18, .05));
  color: var(--ms-ink);
  border-color: var(--ms-rule);
}
.ms-approach-step-text h3 {
  font-family: var(--ms-font);
  font-weight: 600;
  font-size: clamp(17px, 1.3vw, 20px);
  line-height: 1.3;
  color: var(--ms-ink);
  margin: 0;
}
.ms-approach-step-text p {
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.6;
  color: var(--ms-ink-2);
  margin: 0;
  text-wrap: pretty;
}
@media (max-width: 880px) {
  .ms-approach-steps {
    grid-template-columns: 1fr;
    gap: 48px;
    max-width: 340px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* ─── Beta progress strip ─────────────────────────────────────────── */
.ms-beta-progress {
  margin-top: clamp(28px, 4vw, 44px);
}
.ms-beta-progress-rail {
  position: relative;
  height: 3px;
  background: var(--ms-rule);
  border-radius: 2px;
  margin: 18px 0 28px;
}
.ms-beta-progress-fill {
  position: absolute;
  inset: 0 auto 0 0;
  width: 18%;
  background: var(--ms-accent);
  border-radius: 2px;
}
html[data-accent-use="minimal"] .ms-beta-progress-fill { background: var(--ms-ink); }

.ms-beta-phases {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2.4vw, 32px);
}
.ms-beta-phase {
  display: grid;
  gap: 8px;
  padding-top: 22px;
  border-top: 1px solid var(--ms-ink);
  align-content: start;
  opacity: .55;
  transition: opacity .2s ease;
}
.ms-beta-phase.is-active { opacity: 1; }
.ms-beta-phase .tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ms-font);
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
  width: max-content;
}
.ms-beta-phase.is-active .tag { color: var(--ms-accent); }
html[data-accent-use="minimal"] .ms-beta-phase.is-active .tag { color: var(--ms-ink); }
.ms-beta-phase .tag .dot {
  width: 8px; height: 8px; border-radius: 50%;
  background: var(--ms-ink-faint);
  border: 1px solid transparent;
}
.ms-beta-phase.is-active .tag .dot {
  background: var(--ms-accent);
  box-shadow: 0 0 0 4px var(--ms-accent-tint);
}
html[data-accent-use="minimal"] .ms-beta-phase.is-active .tag .dot {
  background: var(--ms-ink);
  box-shadow: 0 0 0 4px var(--ms-soft, rgba(15,18,18,.06));
}
.ms-beta-phase h4 {
  font-family: var(--ms-font);
  font-weight: 500;
  font-size: clamp(20px, 1.8vw, 26px);
  letter-spacing: -0.015em;
  line-height: 1.2;
  margin: 0;
  color: var(--ms-ink);
}
.ms-beta-phase p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ms-ink-2);
  margin: 0;
  max-width: 32ch;
}
@media (max-width: 820px) {
  .ms-beta-phases { grid-template-columns: 1fr; }
}

.ms-beta-callout {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding: clamp(16px, 2vw, 22px) clamp(20px, 2.4vw, 28px);
  border-left: 2px solid var(--ms-accent);
  background: var(--ms-paper);
  border-radius: 0 var(--ms-r-md) var(--ms-r-md) 0;
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ms-ink);
  max-width: 72ch;
}
html[data-accent-use="minimal"] .ms-beta-callout { border-left-color: var(--ms-ink); }

.ms-beta-foot {
  margin-top: clamp(20px, 2.4vw, 32px);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
}
.ms-beta-note {
  margin: 14px 0 0;
  max-width: 64ch;
  font-family: var(--ms-font);
  font-size: 12.5px;
  line-height: 1.55;
  color: var(--ms-ink-2);
  opacity: .8;
}

/* ─── Access steps (5 steps in a vertical list) ───────────────────── */
.ms-access-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: clamp(28px, 4vw, 64px);
  row-gap: clamp(28px, 4vw, 48px);
  align-items: start;
}
.ms-access-intro {
  position: sticky;
  top: 100px;
}
.ms-access-intro h2 { margin-bottom: 20px; }
.ms-access-intro p { font-size: clamp(16px, 1.2vw, 18px); color: var(--ms-ink-2); line-height: 1.6; max-width: 44ch; }
.ms-access-note {
  margin-top: clamp(20px, 2.4vw, 28px);
  padding: clamp(16px, 2vw, 22px);
  border: 1px dashed var(--ms-rule-strong);
  border-radius: var(--ms-r-md);
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--ms-ink-2);
  max-width: 44ch;
}
.ms-access-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 0;
}
.ms-access-list li {
  display: grid;
  grid-template-columns: 44px 1fr;
  gap: 18px;
  padding: clamp(18px, 2vw, 24px) 0;
  border-top: 1px solid var(--ms-rule);
  align-items: start;
}
.ms-access-list li:first-child { border-top: 1px solid var(--ms-ink); }
.ms-access-list li:last-child { border-bottom: 1px solid var(--ms-rule); }
.ms-access-num {
  width: 36px; height: 36px;
  border-radius: 50%;
  background: var(--ms-accent-tint);
  color: var(--ms-accent);
  display: grid; place-items: center;
  font-family: var(--ms-mono);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
html[data-accent-use="minimal"] .ms-access-num {
  background: var(--ms-soft, rgba(15,18,18,.05));
  color: var(--ms-ink);
}
.ms-access-list h3 {
  font-family: var(--ms-font);
  font-weight: 500;
  font-size: clamp(18px, 1.4vw, 22px);
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin: 0 0 6px;
  color: var(--ms-ink);
}
.ms-access-list p {
  font-size: 14.5px;
  line-height: 1.6;
  color: var(--ms-ink-2);
  margin: 0;
  max-width: 50ch;
}
@media (max-width: 880px) {
  .ms-access-grid { grid-template-columns: 1fr; }
  .ms-access-intro { position: static; }
}

/* ─── Trust grid (3x2) ────────────────────────────────────────────── */
.ms-trust-grid {
  list-style: none;
  padding: 0;
  margin: 0;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1px;
  background: var(--ms-rule);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-lg);
  overflow: hidden;
}
.ms-trust-cell {
  background: var(--ms-paper);
  padding: clamp(24px, 2.4vw, 32px);
  display: grid;
  gap: 14px;
  align-content: start;
}
.ms-trust-cell .ms-trust-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--ms-accent-tint);
  color: var(--ms-accent);
  display: grid; place-items: center;
}
.ms-trust-cell .ms-trust-icon svg { width: 16px; height: 16px; }
html[data-accent-use="minimal"] .ms-trust-cell .ms-trust-icon {
  background: var(--ms-ink);
  color: var(--ms-bg);
}
.ms-trust-cell h4 {
  font-family: var(--ms-font);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: -0.01em;
  margin: 0;
  color: var(--ms-ink);
}
.ms-trust-cell p {
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--ms-ink-2);
  margin: 0;
  max-width: 32ch;
}
@media (max-width: 880px) { .ms-trust-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 540px) { .ms-trust-grid { grid-template-columns: 1fr; } }

/* ─── Signup card ─────────────────────────────────────────────────── */
.ms-signup {
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-lg);
  padding: clamp(28px, 4vw, 48px);
  box-shadow: var(--ms-shadow-2);
  max-width: 640px;
  margin: 0 auto;
  display: grid;
  gap: 18px;
}
.ms-signup-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.ms-signup .ms-field {
  display: grid;
  gap: 6px;
}
.ms-signup .ms-field input {
  font-family: var(--ms-font);
  font-size: 15.5px;
  font-weight: 500;
  color: var(--ms-ink);
  background: var(--ms-bg);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-sm);
  padding: 14px 16px;
  outline: none;
  transition: border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.ms-signup .ms-field input:focus {
  border-color: var(--ms-accent);
  background: var(--ms-paper);
  box-shadow: 0 0 0 4px var(--ms-accent-tint);
}
html[data-accent-use="minimal"] .ms-signup .ms-field input:focus {
  border-color: var(--ms-ink);
  box-shadow: 0 0 0 3px var(--ms-soft, rgba(15,18,18,.06));
}
.ms-signup-submit {
  width: 100%;
  justify-content: center;
  padding: 16px 22px !important;
  font-size: 16px !important;
}
.ms-signup-small {
  font-size: 12.5px;
  color: var(--ms-ink-mute);
  margin: 0;
  line-height: 1.55;
  text-align: center;
  white-space: pre-line;
}
.ms-signup-perks {
  list-style: none;
  margin: clamp(16px, 2vw, 22px) 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 10px 22px;
}
.ms-signup-perks li {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--ms-font);
  font-weight: 500;
  font-size: clamp(13px, 0.85vw, 15px);
  color: var(--ms-ink-2);
}
.ms-signup-perks li svg { color: var(--ms-accent); flex-shrink: 0; }
html[data-accent-use="minimal"] .ms-signup-perks li svg { color: var(--ms-ink); }
.ms-signup-risk {
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
  margin: 4px 0 0;
  text-align: center;
}
.ms-signup-success {
  font-size: 13.5px;
  color: var(--ms-accent);
  font-weight: 600;
  text-align: center;
  margin: 0;
}
html[data-accent-use="minimal"] .ms-signup-success { color: var(--ms-ink); }
@media (max-width: 560px) {
  .ms-signup-row { grid-template-columns: 1fr; }
}

/* ─── Block labels (Watch / In their words) ───────────────────────── */
.ms-block-label {
  font-family: var(--ms-mono-font, var(--ms-font));
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
  margin: 0 0 clamp(18px, 2vw, 24px);
  display: flex;
  align-items: center;
  gap: 12px;
}
.ms-block-label::after {
  content: "";
  flex: 1;
  height: 1px;
  background: var(--ms-rule);
}
.ms-block-label-quotes {
  margin-top: clamp(40px, 5vw, 64px);
}

/* ─── UGC video rail ──────────────────────────────────────────────── */
.ms-ugc-block { margin-top: clamp(28px, 3.4vw, 44px); }
.ms-ugc-rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(210px, 1fr);
  gap: clamp(16px, 2vw, 24px);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding-bottom: 6px;
  margin-inline: calc(-1 * clamp(4px, 1vw, 8px));
  padding-inline: clamp(4px, 1vw, 8px);
  scrollbar-width: thin;
}
@media (min-width: 880px) {
  .ms-ugc-rail {
    grid-template-columns: repeat(5, 1fr);
    grid-auto-flow: row;
    grid-auto-columns: auto;
    gap: clamp(22px, 2.6vw, 34px);
    max-width: none;
    overflow: visible;
  }
}
.ms-ugc-card {
  margin: 0;
  scroll-snap-align: start;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.ms-ugc-media {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--ms-r-lg);
  overflow: hidden;
  background: var(--ms-bg-2);
  box-shadow: var(--ms-shadow-1);
}
.ms-ugc-video,
.ms-ugc-poster {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.ms-ugc-trigger {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  padding: 0;
  cursor: pointer;
  background:
    radial-gradient(120% 80% at 50% 30%, rgba(0,209,178,.10), transparent 60%),
    linear-gradient(180deg, #141919 0%, #0c1010 100%);
  display: grid;
  place-items: center;
  gap: 14px;
  color: var(--ms-paper, #fff);
}
.ms-ugc-card:has(.ms-ugc-trigger[aria-label^="Play"]) .ms-ugc-trigger { cursor: pointer; }
.ms-ugc-empty { position: absolute; inset: 0; }
.ms-ugc-play {
  position: relative;
  z-index: 1;
  width: 56px; height: 56px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(255,255,255,.14);
  border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  transition: transform .2s ease, background .2s ease;
}
.ms-ugc-play svg { width: 24px; height: 24px; margin-left: 3px; }
.ms-ugc-trigger:hover .ms-ugc-play { transform: scale(1.06); background: rgba(255,255,255,.22); }
.ms-ugc-soon {
  position: relative;
  z-index: 1;
  font-family: var(--ms-font);
  font-size: 12.5px;
  font-weight: 500;
  letter-spacing: .02em;
  color: rgba(255,255,255,.62);
}
.ms-ugc-cap {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 18px;
}
.ms-ugc-name {
  font-family: var(--ms-font);
  font-weight: 600;
  font-size: 14px;
  color: var(--ms-ink);
}
.ms-ugc-role {
  font-family: var(--ms-font);
  font-size: 12.5px;
  color: var(--ms-ink-mute);
}

/* ─── Feedback carousel ───────────────────────────────────────────── */
.ms-feedback-stage {
  outline: none;
}
.ms-feedback-stage:focus-visible {
  outline: 2px solid var(--ms-accent);
  outline-offset: 8px;
  border-radius: var(--ms-r-lg);
}

.ms-feedback-controls {
  margin-top: clamp(22px, 2.6vw, 32px);
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(16px, 2vw, 24px);
}

.ms-feedback-nav {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  color: var(--ms-ink);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, color .2s ease;
  box-shadow: var(--ms-shadow-1);
  flex-shrink: 0;
}
.ms-feedback-nav svg { width: 20px; height: 20px; }
.ms-feedback-nav:hover {
  background: var(--ms-ink);
  color: var(--ms-paper);
  border-color: var(--ms-ink);
  transform: translateY(-1px);
}
.ms-feedback-nav:focus-visible {
  outline: 2px solid var(--ms-accent);
  outline-offset: 3px;
}

.ms-feedback-pages {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(18px, 2vw, 26px);
  align-items: stretch;
  min-width: 0;
}
.ms-feedback-card {
  min-width: 0;
  background: var(--ms-paper);
  border: 1px solid var(--ms-rule);
  border-radius: var(--ms-r-lg);
  padding: clamp(26px, 2.4vw, 36px) clamp(24px, 2.2vw, 32px);
  display: grid;
  gap: 18px;
  align-content: start;
  box-shadow: var(--ms-shadow-1);
}
@media (max-width: 880px) {
  .ms-feedback-pages { grid-template-columns: 1fr; }
}
.ms-feedback-mark {
  font-family: var(--ms-font);
  font-weight: 300;
  font-size: 72px;
  line-height: 0.6;
  color: var(--ms-accent);
  opacity: .35;
  margin-bottom: -8px;
  display: block;
}
html[data-accent-use="minimal"] .ms-feedback-mark { color: var(--ms-ink); opacity: .22; }

.ms-feedback-quote {
  font-family: var(--ms-font);
  font-weight: 400;
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.55;
  color: var(--ms-ink);
  margin: 0;
  text-wrap: pretty;
  max-width: 60ch;
}
.ms-feedback-meta {
  display: flex;
  align-items: center;
  gap: 12px;
  font-family: var(--ms-font);
  padding-top: 18px;
  border-top: 1px solid var(--ms-rule);
}
.ms-feedback-avatar {
  flex-shrink: 0;
  width: 38px; height: 38px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: var(--ms-accent-tint);
  color: var(--ms-accent);
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 0;
  text-transform: uppercase;
}
html[data-accent-use="minimal"] .ms-feedback-avatar {
  background: var(--ms-soft, rgba(15,18,18,.05));
  color: var(--ms-ink);
}
.ms-feedback-who {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}
.ms-feedback-name {
  font-size: clamp(14px, 0.9vw, 15.5px);
  font-weight: 600;
  letter-spacing: -0.005em;
  color: var(--ms-ink);
  text-transform: none;
}
.ms-feedback-role {
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
}
.ms-feedback-meta .dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--ms-accent);
}
html[data-accent-use="minimal"] .ms-feedback-meta .dot { background: var(--ms-ink); }

.ms-feedback-dots {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.ms-feedback-dot {
  width: 8px; height: 8px;
  border-radius: 50%;
  border: 1px solid var(--ms-rule-strong);
  background: transparent;
  padding: 0;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, transform .2s ease, width .2s ease;
}
.ms-feedback-dot:hover { border-color: var(--ms-ink); }
.ms-feedback-dot.is-active {
  background: var(--ms-accent);
  border-color: var(--ms-accent);
  width: 24px;
  border-radius: 999px;
}
html[data-accent-use="minimal"] .ms-feedback-dot.is-active {
  background: var(--ms-ink);
  border-color: var(--ms-ink);
}
.ms-feedback-dot:focus-visible {
  outline: 2px solid var(--ms-accent);
  outline-offset: 3px;
}

@media (max-width: 720px) {
  .ms-feedback-card { padding: 26px 22px; }
}
.ms-feedback-nav:disabled { opacity: .35; cursor: default; pointer-events: none; }

/* ─── Beta section card wrapper ───────────────────────────────────── */
.ms-beta-section .ms-beta {
  display: block;
  padding: clamp(36px, 4.4vw, 64px);
  box-shadow: var(--ms-shadow-2);
}
.ms-beta-grid {
  display: grid;
  grid-template-columns: 0.92fr 1.08fr;
  gap: clamp(40px, 5vw, 80px);
  align-items: start;
}
@media (max-width: 880px) {
  .ms-beta-grid { grid-template-columns: 1fr; gap: clamp(36px, 6vw, 48px); }
}

/* Aside — status, headline, CTA */
.ms-beta-aside { display: flex; flex-direction: column; align-items: flex-start; }
.ms-beta-aside .ms-label { margin-bottom: 12px; }
.ms-beta-aside .ms-beta-title { margin: 0 0 18px; max-width: 16ch; }
.ms-beta-sub {
  color: var(--ms-ink-2);
  font-size: clamp(16px, 1.2vw, 18px);
  line-height: 1.6;
  margin: 0;
  max-width: 46ch;
}
.ms-beta-status {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-bottom: clamp(20px, 2.4vw, 28px);
  padding: 7px 14px 7px 12px;
  border-radius: var(--ms-r-pill);
  background: var(--ms-paper);
  border: 1px solid var(--ms-accent-tint-2, var(--ms-rule));
  font-family: var(--ms-font);
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ms-ink);
  box-shadow: var(--ms-shadow-1);
}
.ms-beta-pulse {
  position: relative;
  width: 9px; height: 9px;
  border-radius: 50%;
  background: var(--ms-accent);
  flex-shrink: 0;
}
.ms-beta-pulse::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background: var(--ms-accent);
  animation: ms-beta-ping 2.2s cubic-bezier(0,0,.2,1) infinite;
}
@media (prefers-reduced-motion: reduce) { .ms-beta-pulse::after { animation: none; } }
@keyframes ms-beta-ping {
  0% { transform: scale(1); opacity: .55; }
  70%, 100% { transform: scale(3); opacity: 0; }
}
html[data-accent-use="minimal"] .ms-beta-pulse,
html[data-accent-use="minimal"] .ms-beta-pulse::after { background: var(--ms-ink); }

/* Timeline */
.ms-beta-timeline {
  list-style: none;
  margin: 0;
  padding: clamp(4px, 1vw, 10px) 0 0;
  position: relative;
  display: grid;
  gap: clamp(22px, 2.6vw, 34px);
}
.ms-beta-timeline::before {
  content: "";
  position: absolute;
  left: 10px;
  top: 12px;
  bottom: 14px;
  width: 2px;
  background: linear-gradient(180deg, var(--ms-accent) 0%, var(--ms-rule) 22%, var(--ms-rule) 100%);
}
html[data-accent-use="minimal"] .ms-beta-timeline::before {
  background: linear-gradient(180deg, var(--ms-ink) 0%, var(--ms-rule) 22%, var(--ms-rule) 100%);
}
.ms-beta-step {
  position: relative;
  display: grid;
  grid-template-columns: 22px 1fr;
  gap: clamp(14px, 1.6vw, 22px);
  align-items: start;
}
.ms-beta-step-marker {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: center;
  padding-top: 5px;
}
.ms-beta-step-dot {
  width: 14px; height: 14px;
  border-radius: 50%;
  background: var(--ms-paper);
  border: 2px solid var(--ms-rule-strong);
}
.ms-beta-step.is-active .ms-beta-step-dot {
  background: var(--ms-accent);
  border-color: var(--ms-accent);
  box-shadow: 0 0 0 5px var(--ms-accent-tint, rgba(0,209,178,.16));
}
html[data-accent-use="minimal"] .ms-beta-step.is-active .ms-beta-step-dot {
  background: var(--ms-ink);
  border-color: var(--ms-ink);
  box-shadow: 0 0 0 5px var(--ms-soft, rgba(15,18,18,.06));
}
.ms-beta-step-body { display: grid; gap: 6px; }
.ms-beta-step-tag {
  font-family: var(--ms-mono-font, var(--ms-font));
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
}
.ms-beta-step.is-active .ms-beta-step-tag { color: var(--ms-accent); }
html[data-accent-use="minimal"] .ms-beta-step.is-active .ms-beta-step-tag { color: var(--ms-ink); }
.ms-beta-step-body h4 {
  font-family: var(--ms-font);
  font-weight: 600;
  font-size: clamp(18px, 1.5vw, 22px);
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin: 0;
  color: var(--ms-ink);
}
.ms-beta-step-body p {
  font-size: clamp(16px, 1vw, 18px);
  line-height: 1.6;
  color: var(--ms-ink-2);
  margin: 0;
  max-width: 42ch;
  text-wrap: pretty;
}

/* ─── FAQ readability on large screens ───────────────────────────── */
.ms-faq-q {
  font-size: clamp(17px, 1.1vw, 20px) !important;
}
.ms-faq-a p {
  font-size: clamp(16px, 1vw, 18px) !important;
  line-height: 1.65 !important;
}
.ms-faq-item.open .ms-faq-a { max-height: 640px; }

/* ─── Final CTA v2 ────────────────────────────────────────────────── */
.ms-final-cta-v2 .ms-final-cta-inner { max-width: 760px; }
.ms-final-cta-v2 .ms-final-cta-small {
  margin-top: 4px;
  font-size: 11.5px;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ms-ink-mute);
}

/* ─── Hero v2 visual fine-tune ────────────────────────────────────── */
.ms-hero-v2 .ms-hero-chip-a { top: 10%; }
.ms-hero-v2 .ms-hero-chip-b { bottom: 14%; }
.ms-hero-v2 .ms-hero-chip .k { color: var(--ms-ink-mute); }

/* Subtle "beta" data overlay chip near phone */
.ms-hero-chip.ms-hero-chip-beta {
  top: 50%;
  left: -8%;
  transform: translateY(-50%);
  display: grid;
  gap: 8px;
  min-width: 180px;
}
.ms-hero-chip-beta .row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px;
}
.ms-hero-chip-beta .row .k { font-family: var(--ms-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--ms-ink-mute); text-transform: uppercase; }
.ms-hero-chip-beta .row .v { font-weight: 600; color: var(--ms-ink); }
.ms-hero-chip-beta .bar {
  height: 4px;
  background: var(--ms-bg-2);
  border-radius: 2px;
  position: relative;
  overflow: hidden;
}
.ms-hero-chip-beta .bar::after {
  content: "";
  position: absolute; inset: 0 auto 0 0;
  width: 18%;
  background: var(--ms-accent);
  border-radius: 2px;
}
html[data-accent-use="minimal"] .ms-hero-chip-beta .bar::after { background: var(--ms-ink); }
@media (max-width: 960px) {
  .ms-hero-chip.ms-hero-chip-beta { left: 4%; }
}

/* ─── Section rhythm tweaks ───────────────────────────────────────── */
.ms-section.tight { padding-block: clamp(64px, 7vw, 96px); }

/* Uniform off-white base across the whole page — no colour bands.
   Rhythm comes from white, softly-elevated cards on the off-white base. */
.ms-section.tonal { background: var(--ms-bg); }
.ms-section.tonal .ms-card-soft { background: var(--ms-paper); }
.ms-section.tonal .ms-feedback-card {
  background: var(--ms-paper);
  box-shadow: var(--ms-shadow-2);
}

/* Remove the hero accent glow */
.ms-hero-v2 .ms-hero-bg { display: none; }

/* Repeated CTA strip (lightweight) */
.ms-cta-strip {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  flex-wrap: wrap;
  margin-top: clamp(24px, 3vw, 36px);
}
.ms-cta-strip p {
  margin: 0;
  font-size: 13px;
  color: var(--ms-ink-mute);
}

/* ═══════════════════════════════════════════════════════════════════
   Large-screen typography & layout scale (v2)
   Fluid clamp() so type grows smoothly laptop → desktop → large desktop.
   Mobile minimums are unchanged; only the upper end of each scale grows.
   All scaling is real font-size — no transforms, no scale(), no blur.
   ═══════════════════════════════════════════════════════════════════ */

/* Wider content container on large screens (kept in the 1180–1320 band) */
@media (min-width: 1440px) {
  .ms-shell,
  .ms-nav-inner { max-width: 1320px; }
}

/* — Headings — */
.ms-h1 { font-size: clamp(40px, 5.4vw, 88px); }
.ms-h2 { font-size: clamp(28px, 3.4vw, 54px); }
.ms-h3 { font-size: clamp(20px, 1.6vw, 26px); }
.ms-hero-v2 .ms-hero-h1 { font-size: clamp(40px, 5.2vw, 84px); }

/* — Leads / subheads / body — */
.ms-lead { font-size: clamp(18px, 1.35vw, 24px); }
.ms-body { font-size: clamp(17px, 1.05vw, 20px); }
.ms-hero-v2 .ms-hero-sub { font-size: clamp(18px, 1.25vw, 22px); }
.ms-beta-sub { font-size: clamp(17px, 1.2vw, 21px); }

/* — Eyebrow labels — */
.ms-label { font-size: clamp(12px, 0.78vw, 14px); }

/* — Navigation & buttons — */
.ms-nav-links { font-size: clamp(14.5px, 0.9vw, 17px); }
.ms-btn { font-size: clamp(15px, 0.92vw, 17px); }
.ms-btn-lg { font-size: clamp(16px, 1vw, 18px); }

/* Hero primary CTA — lighter & more elegant: shorter, tighter radius, softer shadow */
.ms-hero-ctas .ms-btn:not(.ms-btn-ghost) {
  padding-top: 11px;
  padding-bottom: 11px;
  border-radius: 11px;
  box-shadow: 0 1px 2px rgba(15, 18, 18, .06), 0 4px 12px -10px rgba(15, 18, 18, .18);
}

/* — Approach step titles — */
.ms-approach-step-text h3 { font-size: clamp(18px, 1.35vw, 23px); }

/* — Beta timeline titles — */
.ms-beta-step-body h4 { font-size: clamp(19px, 1.5vw, 25px); }

/* — Signup form — */
.ms-field span { font-size: clamp(13px, 0.85vw, 15px); }
.ms-field input,
.ms-field select { font-size: clamp(15.5px, 1vw, 17.5px); }
.ms-signup-small { font-size: clamp(12.5px, 0.8vw, 14px); }

/* — Footer — */
.ms-footer-brand p { font-size: clamp(14px, 0.85vw, 16px); }
.ms-footer-cols a { font-size: clamp(14.5px, 0.88vw, 16.5px); }
.ms-footer-cols h5 { font-size: clamp(12px, 0.75vw, 13.5px); }
.ms-footer-legal p,
.ms-footer-base { font-size: clamp(12.5px, 0.8vw, 14px); }

/* Slightly more vertical breathing room on very large screens */
@media (min-width: 1600px) {
  .ms-section { padding: calc(116px * var(--ms-density)) 0; }
}

/* ═══════════════════════════════════════════════════════════════════
   Design upgrades — texture, active nav, micro-interactions
   ═══════════════════════════════════════════════════════════════════ */

/* — Fine grain texture over the whole page (very subtle, premium) — */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 9000;
  pointer-events: none;
  opacity: 0.04;
  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxNjAnIGhlaWdodD0nMTYwJz48ZmlsdGVyIGlkPSduJz48ZmVUdXJidWxlbmNlIHR5cGU9J2ZyYWN0YWxOb2lzZScgYmFzZUZyZXF1ZW5jeT0nMC45JyBudW1PY3RhdmVzPScyJyBzdGl0Y2hUaWxlcz0nc3RpdGNoJy8+PC9maWx0ZXI+PHJlY3Qgd2lkdGg9JzEwMCUnIGhlaWdodD0nMTAwJScgZmlsdGVyPSd1cmwoI24pJy8+PC9zdmc+");
  background-size: 160px 160px;
  mix-blend-mode: multiply;
}

/* — Hero ambient tint — */
html[data-accent-use="minimal"] .ms-hero-v2::before { display: none; }

/* — Active navigation link — */
.ms-nav-links a { position: relative; }
.ms-nav-links a.is-active { color: var(--ms-ink); }
.ms-nav-links a.is-active::after {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--ms-accent);
}
html[data-accent-use="minimal"] .ms-nav-links a.is-active::after { background: var(--ms-ink); }

/* — Micro-hovers — */
.ms-ugc-card { transition: transform .25s ease; }
.ms-ugc-card:hover { transform: translateY(-4px); }
.ms-ugc-card:hover .ms-ugc-media { box-shadow: var(--ms-shadow-2); }
.ms-ugc-media { transition: box-shadow .25s ease; }

.ms-feedback-card { transition: transform .25s ease, box-shadow .25s ease; }
.ms-feedback-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ms-shadow-2);
}

.ms-footer-cols a {
  position: relative;
  background-image: linear-gradient(currentColor, currentColor);
  background-size: 0% 1px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .25s ease, color .15s ease;
  padding-bottom: 1px;
}
.ms-footer-cols a:hover { background-size: 100% 1px; }

.ms-beta-step { transition: transform .2s ease; }
.ms-beta-timeline:hover .ms-beta-step:not(:hover) { opacity: .72; }
.ms-beta-step { transition: transform .2s ease, opacity .2s ease; }

/* — Hero phone gentle float — */
@media (prefers-reduced-motion: no-preference) {
  .ms-hero-v2 .ms-hero-visual .ms-phone {
    animation: ms-hero-float 6.5s ease-in-out infinite;
  }
}
@keyframes ms-hero-float {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-12px); }
}


/* ─── Language switcher ───────────────────────────────────────────── */
.ms-langsel { position: relative; }
.ms-langsel > summary {
  list-style: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ms-font); font-weight: 600; font-size: 13px;
  letter-spacing: 0.04em; color: var(--ms-ink);
  padding: 8px 12px; border: 1px solid var(--ms-rule); border-radius: var(--ms-r-pill, 999px);
  background: rgba(255,255,255,.55); transition: border-color .15s ease, background .15s ease;
  -webkit-user-select: none; user-select: none;
}
.ms-langsel > summary::-webkit-details-marker { display: none; }
.ms-langsel > summary:hover { border-color: var(--ms-ink-mute); }
.ms-langsel-caret { width: 8px; height: 8px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: rotate(45deg) translate(-1px,-1px); opacity: .6; transition: transform .18s ease; }
.ms-langsel[open] > summary .ms-langsel-caret { transform: rotate(-135deg) translate(-1px,-1px); }
.ms-langsel-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 160px; z-index: 60;
  display: flex; flex-direction: column; padding: 6px;
  background: var(--ms-bg, #FAFAF7); border: 1px solid var(--ms-rule);
  border-radius: 14px; box-shadow: 0 8px 30px -12px rgba(15,18,18,.28);
}
.ms-langsel-menu a {
  font-family: var(--ms-font); font-size: 14px; font-weight: 500; color: var(--ms-ink-2);
  padding: 9px 12px; border-radius: 9px; text-decoration: none; white-space: nowrap;
  transition: background .12s ease, color .12s ease;
}
.ms-langsel-menu a:hover { background: var(--ms-bg-2, #F2F1EC); color: var(--ms-ink); }
.ms-langsel-menu a.is-active { color: var(--ms-accent); font-weight: 600; }
@media (max-width: 600px) {
  .ms-nav-logo img { height: 36px; }
  .ms-langsel > summary { padding: 7px 10px; font-size: 12.5px; }
  .ms-nav-right .ms-btn-sm { padding: 9px 13px; }
}
@media (max-width: 430px) {
  .ms-nav-inner { gap: 10px; }
  .ms-nav-right { gap: 8px; }
  .ms-nav-logo img { height: 28px; }
  .ms-langsel > summary { padding: 7px 9px; font-size: 12px; }
  .ms-nav-right .ms-btn-sm { display: inline-flex; padding: 8px 12px; font-size: 12.5px; white-space: nowrap; }
}