/* ==========================================================================
   marketing.css

   Unified design vocabulary for the public marketing site (home, pricing,
   company, resources, contact). Mono-heavy, tag-dot vocabulary, dark schema
   cards, X12 marquee. All rules are scoped under .m-root so they cannot leak
   into other public pages — every marketing template must wrap its root with
   `<div class="m-root">` (ERB) or `<div className="m-root">` (TSX).

   Tediware design tokens declared in application.tailwind.css are referenced
   via local hsl()-wrapped aliases (the global tokens are unwrapped HSL
   triplets).
   ========================================================================== */

.m-root {
  --m-mono: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --m-ink: hsl(17 28% 8%);
  --m-ink-soft: hsl(17 28% 14%);
  --m-ink-soft-2: hsl(17 18% 22%);
  --m-ink-text: hsl(35 18% 92%);
  --m-ink-text-dim: hsl(33 8% 64%);

  --m-bg: hsl(var(--background));
  --m-fg: hsl(var(--foreground));
  /* --m-primary is the text colour: 23 of its 27 uses are `color:`. The four
     that paint a shape (a dot, two borders, an underline) take --m-primary-fill
     so the brand orange stays bright where it is decoration rather than text. */
  --m-primary: hsl(var(--link));
  --m-primary-fill: hsl(var(--primary));
  --m-muted-fg: hsl(var(--muted-foreground));
  --m-border: hsl(var(--border));
  --m-affirmative: hsl(var(--affirmative));
  --m-surface-alt: hsl(44 18% 95%);

  font-family: var(--font-sans, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  color: var(--m-fg);
  background: var(--m-bg);
}

.m-root * { box-sizing: border-box; }
.m-root .m-mono { font-family: var(--m-mono); font-size: 0.93em; }

/* Match the site-wide `container mx-auto px-4` (config/tailwind.config.js). */
.m-wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 1rem; }

/* Hero */
.m-hero { padding: 72px 0 36px; }
.m-h1 {
  font-size: 52px; font-weight: 600;
  letter-spacing: -0.01em; line-height: 1.05;
  margin: 0; text-wrap: balance; max-width: 840px;
}
/* Bands */
.m-band { padding: 88px 0; }
.m-band-cream { background: var(--m-surface-alt); }
.m-sec-head { margin: 0 0 40px; max-width: 720px; }
.m-sec-head-left { text-align: left; }
.m-h2 {
  font-size: 34px; font-weight: 600;
  letter-spacing: -0.015em; line-height: 1.15;
  margin: 0; text-wrap: balance;
}
.m-section-lede {
  margin: 14px 0 0; color: var(--m-muted-fg);
  font-size: 16px; line-height: 1.65; max-width: 640px;
}

/* Mobile screenshot: light device frame on a tinted mat, so it reads as an image
   rather than live UI at phone widths */
.m-phone-shot {
  background: var(--m-surface-alt); border-radius: 16px;
  padding: 20px 16px;
}
.m-phone {
  max-width: 340px; margin: 0 auto;
  background: var(--m-bg); border: 1px solid var(--m-border);
  padding: 18px 8px; border-radius: 28px;
  box-shadow: 0 12px 32px -14px rgba(0,0,0,.18);
}
.m-phone img { display: block; width: 100%; }

/* Tag-dot pill — shared component vocabulary */
.m-tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 2px 9px; border-radius: 999px;
  border: 1px solid var(--m-border); background: var(--m-bg);
  font-family: var(--m-mono); font-size: 11px; font-weight: 500;
  color: var(--m-muted-fg);
  white-space: nowrap;
}
.m-tag::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px; background: hsl(33 8% 60%);
}
.m-tag-modern { color: #2563eb; border-color: #3b82f6; background: rgba(59,130,246,.06); }
.m-tag-modern::before { background: #3b82f6; }
.m-tag-tested { color: hsl(104 49% 30%); border-color: hsla(104,49%,50%,.5); background: hsla(104,49%,50%,.08); }
.m-tag-tested::before { background: var(--m-affirmative); }
.m-tag-prod { color: var(--m-primary); border-color: var(--m-primary-fill); background: hsla(27,91%,51%,.06); }
.m-tag-prod::before { background: var(--m-primary-fill); }
.m-tag-staging { color: #9333ea; border-color: #a855f7; background: rgba(168,85,247,.06); }
.m-tag-staging::before { background: #a855f7; }
.m-tag-legacy { color: #b91c1c; border-color: #ef4444; background: rgba(239,68,68,.06); }
.m-tag-legacy::before { background: #ef4444; }

/* Plan cards */
.m-plans-grid {
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}
.m-plan {
  border: 1px solid var(--m-border); border-radius: 12px;
  background: var(--m-bg); padding: 22px;
  display: flex; flex-direction: column; gap: 14px;
}
.m-plan-pop { border-color: var(--m-primary-fill); box-shadow: 0 0 0 3px hsla(27,91%,51%,.08); }
.m-plan-head {
  display: flex; justify-content: space-between; align-items: flex-start; gap: 8px;
  border-bottom: 1px dashed var(--m-border); padding-bottom: 14px;
}
.m-plan-titles { display: flex; flex-direction: column; gap: 2px; }
.m-plan h3 { margin: 0; font-size: 18px; font-weight: 700; }
.m-plan-price { display: flex; align-items: baseline; gap: 6px; }
.m-plan-num {
  font-size: 32px; font-weight: 800; letter-spacing: -0.02em; color: var(--m-fg);
}
.m-plan-sub { font-family: var(--m-mono); font-size: 13px; color: var(--m-muted-fg); }
.m-plan-blurb {
  margin: 0; font-size: 13.5px; line-height: 1.55; color: var(--m-muted-fg);
}
.m-plan-bullets {
  list-style: none; margin: 0; padding: 14px 0 0;
  display: flex; flex-direction: column; gap: 8px;
  border-top: 1px dashed var(--m-border);
}
.m-plan-bullets li {
  display: flex; flex-direction: column; gap: 2px;
}
.m-bull-k {
  font-family: var(--m-mono); font-size: 10.5px;
  color: var(--m-primary); font-weight: 600; letter-spacing: .02em;
}
.m-bull-v { font-size: 13.5px; line-height: 1.45; }

/* Estimator (React island styles + no-JS fallback) */
.m-est {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  width: 100%;
  border: 1px solid var(--m-border); border-radius: 12px;
  background: var(--m-bg); overflow: hidden;
  box-shadow: var(--tedi-shadow-sm, 0 1px 2px rgb(0 0 0 / 0.05));
}
.m-est-in {
  min-width: 0; padding: 24px; border-right: 1px solid var(--m-border);
  display: flex; flex-direction: column; gap: 22px;
}
.m-est-out {
  min-width: 0; padding: 24px; background: var(--m-surface-alt);
  display: flex; flex-direction: column; gap: 18px;
}
.m-field-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.m-field-help { margin: 8px 0 0; font-size: 13px; line-height: 1.5; color: var(--m-muted-fg); }
.m-num {
  display: flex; align-items: center; overflow: hidden;
  border: 1px solid var(--m-border); border-radius: 8px; background: var(--m-bg);
}
.m-num:focus-within {
  border-color: var(--m-primary-fill);
  box-shadow: 0 0 0 3px hsla(27, 91%, 51%, 0.12);
}
.m-num input {
  flex: 1 1 0; width: 0; min-width: 0; border: 0; outline: 0; background: transparent;
  color: var(--m-fg); font-family: var(--m-mono); font-size: 22px; font-weight: 600;
  padding: 10px 14px; font-variant-numeric: tabular-nums;
}
.m-num-unit {
  font-size: 13px; color: var(--m-muted-fg); padding: 0 14px;
  border-left: 1px solid var(--m-border); align-self: stretch;
  display: flex; align-items: center;
}
.m-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.m-chip {
  font: 500 12.5px var(--m-sans, inherit); padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--m-border); background: var(--m-bg); color: var(--m-fg); cursor: pointer;
}
.m-chip:hover { border-color: var(--m-primary-fill); color: var(--m-primary); }
.m-chip:focus-visible, .m-toggle input:focus-visible { outline: 2px solid var(--m-primary-fill); outline-offset: 2px; }
.m-addons { display: flex; flex-direction: column; gap: 10px; }
.m-addon {
  border: 1px solid var(--m-border); border-radius: 8px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 10px;
}
.m-addon-on { border-color: var(--m-primary-fill); background: hsla(27,91%,51%,.05); }
.m-toggle { display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; }
.m-toggle input { margin: 4px 0 0; accent-color: var(--m-primary-fill); width: 16px; height: 16px; flex-shrink: 0; }
.m-toggle-t { font-weight: 600; font-size: 14px; }
.m-toggle-d { font-size: 13px; color: var(--m-muted-fg); line-height: 1.5; }
.m-addon-sub { display: flex; align-items: center; gap: 10px; padding-left: 26px; font-size: 13px; color: var(--m-muted-fg); }
.m-addon-sub .m-num { flex: 1 1 0; max-width: 150px; }
.m-addon-sub .m-num input { font-size: 15px; padding: 6px 10px; }
.m-rec { display: flex; flex-direction: column; gap: 2px; }
.m-rec-k { font-size: 13px; color: var(--m-muted-fg); }
.m-rec-plan { font-size: 20px; font-weight: 700; letter-spacing: -0.01em; }
.m-rec-total {
  font-family: var(--m-mono); font-size: 40px; font-weight: 800; letter-spacing: -0.03em;
  color: var(--m-primary); font-variant-numeric: tabular-nums; line-height: 1.1;
}
.m-rec-total small { font-family: inherit; font-size: 14px; font-weight: 500; color: var(--m-muted-fg); letter-spacing: 0; }
.m-lines { display: flex; flex-direction: column; border-top: 1px solid var(--m-border); }
.m-line {
  display: flex; justify-content: space-between; gap: 12px; padding: 8px 0;
  border-bottom: 1px solid var(--m-border); font-size: 13.5px; font-variant-numeric: tabular-nums;
}
.m-line-l small { color: var(--m-muted-fg); font-size: 12.5px; }
.m-line-a { white-space: nowrap; font-family: var(--m-mono); }
.m-line-free .m-line-a { color: var(--m-affirmative); font-weight: 600; }
.m-alt { margin: 0; font-size: 13px; color: var(--m-muted-fg); }
.m-alt b { color: var(--m-fg); font-weight: 600; }

.m-calc-note {
  margin: 22px 0 0; font-size: 13.5px;
  color: var(--m-muted-fg); display: flex; align-items: flex-start; gap: 8px;
}
.m-check { color: var(--m-affirmative); font-weight: 700; flex-shrink: 0; }

/* Reasons folio on the pricing page. Composes with .m-sec-head's 40px bottom margin
   to reach the 72px the design puts between the header and the grid. */
.m-reasons {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 72px 96px; margin-top: 32px;
}
.m-reason {
  display: flex; flex-direction: column; gap: 14px;
  border-top: 1px solid var(--m-border); padding-top: 24px;
}
.m-reason-num {
  font-size: 44px; font-weight: 300; line-height: 1;
  letter-spacing: -0.03em; color: var(--m-muted-fg);
  font-variant-numeric: tabular-nums;
}
/* 10px on top of the 14px flex gap: 24px from numeral to title. */
.m-reason h3 { margin: 10px 0 0; font-size: 19px; font-weight: 600; line-height: 1.3; }
.m-reason p {
  margin: 0; color: var(--m-muted-fg);
  font-size: 16px; line-height: 1.6; text-wrap: pretty;
}

/* AS2 add-on */
.m-as2 {
  border: 1px solid var(--m-border); border-radius: 12px;
  background: var(--m-bg);
  display: grid; grid-template-columns: 1fr 280px;
  gap: 0;
}
.m-as2-main { padding: 28px; }
.m-as2-blurb { margin: 0 0 18px; color: var(--m-muted-fg); font-size: 14.5px; line-height: 1.6; max-width: 560px; }
.m-as2-bullets {
  list-style: none; margin: 0; padding: 0;
  display: grid; grid-template-columns: 1fr 1fr; gap: 8px 18px;
}
.m-as2-bullets li { display: flex; align-items: flex-start; gap: 8px; font-size: 14px; line-height: 1.5; }
.m-as2-price {
  border-left: 1px solid var(--m-border); padding: 28px;
  display: flex; flex-direction: column; gap: 6px;
  align-items: flex-start; justify-content: center;
  background: var(--m-surface-alt);
}
.m-as2-num {
  font-family: var(--m-mono); font-size: 36px; font-weight: 800;
  color: var(--m-fg); letter-spacing: -0.02em;
}
.m-as2-intro { display: flex; align-items: center; gap: 28px; }
.m-as2-copy { flex: 1; min-width: 0; }
.m-as2-logo { flex: none; height: 96px; width: auto; }
.m-as2-sub { font-family: var(--m-mono); font-size: 14px; color: var(--m-muted-fg); margin-top: -8px; }
.m-as2-fine { font-size: 12.5px; color: var(--m-muted-fg); line-height: 1.5; margin-top: 8px; }

/* Includes grid */
.m-includes {
  display: grid; grid-template-columns: repeat(3, 1fr);
  gap: 0; border: 1px solid var(--m-border); border-radius: 12px; overflow: hidden;
  background: var(--m-bg);
}
.m-incl {
  padding: 16px 20px;
  border-right: 1px solid var(--m-border);
  border-bottom: 1px solid var(--m-border);
  display: flex; flex-direction: column; gap: 4px;
}
.m-incl:nth-child(3n) { border-right: 0; }
.m-incl:nth-last-child(-n+3) { border-bottom: 0; }
.m-incl-k {
  font-family: var(--m-mono); font-size: 11px;
  color: var(--m-primary); font-weight: 600; letter-spacing: .02em;
}
.m-incl-v { font-size: 14px; line-height: 1.5; }

/* Final CTA — dark band */
.m-final-cta {
  background: var(--m-ink); color: var(--m-ink-text);
  padding: 80px 0; text-align: center;
}
.m-final-cta .m-h2 {
  font-size: 32px; margin: 0 auto 14px; max-width: 720px;
  color: hsl(35 18% 96%); letter-spacing: -0.02em; font-weight: 800;
}
.m-final-cta p { color: var(--m-ink-text-dim); margin: 0 0 24px; font-size: 14.5px; }
.m-cta-row { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; }

/* Trust band — compact dark strip between hero and "it's time to create":
   caption, featured customers + uptime, scrolling partner row */
.m-trust {
  background: var(--m-ink); color: #fff;
  padding: 28px 0 0;
  position: relative; isolation: isolate; overflow: hidden;
}
.m-trust > .m-wrap { position: relative; z-index: 1; }
.m-trust-texture {
  position: absolute; top: 0; left: 0;
  width: calc(100% + 1100px); height: 100%;
  pointer-events: none; z-index: -1;
}
@media (prefers-reduced-motion: no-preference) {
  .m-trust-texture { animation: m-trust-drift 200s linear infinite; }
}
@keyframes m-trust-drift {
  from { transform: translateX(0); }
  to   { transform: translateX(-1100px); }
}
.m-trust-texture text {
  font-family: var(--m-mono);
  font-size: 13px; font-weight: 500;
  letter-spacing: 0.02em;
}
.m-trust-texture .x  { fill: rgba(244, 240, 234, 0.022); }
.m-trust-texture .t  { fill: rgba(244, 240, 234, 0.065); }
.m-trust-texture .t1 { fill: rgba(244, 240, 234, 0.090); }
.m-trust-texture .t2 { fill: rgba(244, 240, 234, 0.040); }
.m-trust-texture .t3 { fill: rgba(244, 240, 234, 0.115); }
.m-trust-caption {
  margin: 0; padding-bottom: 20px;
  font-size: 13px; line-height: 1.5; color: #fff;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.m-trust-row {
  min-height: 74px;
  display: grid; grid-template-columns: 200px minmax(0, 1fr) auto;
  gap: 40px; align-items: center;
  border-bottom: 1px solid rgba(255, 255, 255, .1);
}
.m-trust-row-partners { grid-template-columns: 200px minmax(0, 1fr); border-bottom: 0; }
.m-trust-label {
  font-family: var(--m-mono); font-size: 12px; color: rgba(255, 255, 255, .55);
}
.m-trust-customers { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 40px; }
.m-trust-customer { display: inline-flex; align-items: center; gap: 8px; }
.m-trust-meta {
  font-family: var(--m-mono); font-size: 11px; color: rgba(255, 255, 255, .45);
}
/* Logos are mixed-colour PNGs; flatten them to white and fade with opacity */
.m-trust-logo {
  display: block; height: 16px; width: auto;
  filter: brightness(0) invert(1); opacity: .7;
}
.m-trust-customer .m-trust-logo { opacity: .88; }
.m-trust-logo-lg { height: 18px; }
/* Per-logo optical-size bumps for marks that read smaller than their neighbours */
.m-trust-logo-up1 { height: 22px; }
.m-trust-logo-up2 { height: 28px; }
.m-trust-logo-lg.m-trust-logo-up1 { height: 24px; }
.m-trust-logo-lg.m-trust-logo-up2 { height: 30px; }
/* The scroller bleeds into the grid gap on the left and the wrap padding on the
   right, so the first logo lines up with the customers above while the fades
   sit in the margins rather than pushing the row inward. */
.m-trust-scroller {
  min-width: 0; overflow-x: auto; scrollbar-width: none;
  margin: 0 -1rem 0 -40px; padding: 0 1rem 0 40px;
  -webkit-mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 48px), transparent);
  mask-image: linear-gradient(to right, transparent, #000 40px, #000 calc(100% - 48px), transparent);
}
.m-trust-scroller::-webkit-scrollbar { display: none; }
.m-trust-partners {
  display: flex; align-items: center; gap: 44px;
  padding-right: 32px; width: max-content;
}

/* Uptime — right end of the customers row */
.m-trust-uptime {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--m-mono); font-size: 12px; color: rgba(255, 255, 255, .55);
  white-space: nowrap;
}
.m-trust-uptime-dot {
  width: 6px; height: 6px; border-radius: 50%; flex: none;
  background: var(--m-affirmative);
}
.m-trust-uptime-num { color: #fff; }
.m-trust-uptime-link {
  color: rgba(255, 255, 255, .55);
  text-decoration: underline; text-underline-offset: 3px;
  transition: color 120ms ease-out;
}
.m-trust-uptime-link:hover { color: #fff; }

@media (max-width: 767px) {
  .m-trust { padding-top: 24px; }
  .m-trust-row, .m-trust-row-partners {
    grid-template-columns: 1fr; gap: 12px; min-height: 0; padding: 16px 0;
  }
  .m-trust-customers { gap: 12px 28px; }
  .m-trust-scroller {
    margin: 0 -1rem; padding: 0 1rem;
    -webkit-mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
    mask-image: linear-gradient(to right, transparent, #000 32px, #000 calc(100% - 32px), transparent);
  }
  .m-trust-partners { padding: 0 16px; }
}

@media (max-width: 1100px) {
  .m-plans-grid { grid-template-columns: repeat(2, 1fr); }
  .m-includes { grid-template-columns: repeat(2, 1fr); }
  .m-incl { border-right: 1px solid var(--m-border); }
  .m-incl:nth-child(2n) { border-right: 0; }
  .m-incl:nth-last-child(-n+2) { border-bottom: 0; }
  .m-incl:nth-last-child(3) { border-bottom: 1px solid var(--m-border); }
}


/* Shared mono key label — used above titles in step cards, feature cards,
   and anywhere we want the // section / key vocabulary on a single line. */
.m-key {
  font-family: var(--m-mono); font-size: 13px;
  color: var(--m-muted-fg); font-weight: 400;
  display: block;
}

@media (max-width: 760px) {
  .m-h1 { font-size: 36px; }
  .m-h2 { font-size: 28px; }
  .m-plans-grid, .m-includes { grid-template-columns: 1fr; }
  .m-reasons { grid-template-columns: 1fr; row-gap: 48px; }
  .m-reason-num { font-size: 36px; }
  .m-incl { border-right: 0 !important; }
  .m-incl:not(:last-child) { border-bottom: 1px solid var(--m-border); }
  .m-incl:last-child { border-bottom: 0; }
  .m-as2 { grid-template-columns: 1fr; }
  .m-as2-price { border-left: 0; border-top: 1px solid var(--m-border); }
  .m-as2-intro { gap: 18px; }
  .m-as2-logo { height: 64px; }
  .m-est { grid-template-columns: minmax(0, 1fr); }
  .m-est-in { border-right: 0; border-bottom: 1px solid var(--m-border); }
}

/* "It's time to create" band — left copy, right faux agent-prompt terminal */
.m-ai {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
  gap: 80px; align-items: start;
}
.m-ai-copy .m-section-lede { margin-top: 20px; max-width: none; }
.m-ai-term {
  background: #fff;
  border: 1px solid var(--m-border);
  border-radius: 8px;
  font-family: var(--m-mono); font-size: 14px; line-height: 1.7;
  color: var(--m-fg);
}
.m-ai-term-bar {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 20px; border-bottom: 1px solid var(--m-border);
}
.m-ai-dots { display: flex; gap: 7px; }
.m-ai-dot { width: 10px; height: 10px; border-radius: 50%; display: block; }
.m-ai-dot-r { background: #ec6a5e; }
.m-ai-dot-y { background: #f4bf4f; }
.m-ai-dot-g { background: #61c554; }
.m-ai-term-title { font-size: 12px; color: var(--m-muted-fg); }
.m-ai-term-body { padding: 22px 24px 20px; }
.m-ai-prompt { margin-bottom: 14px; }
.m-ai-opts { display: flex; flex-direction: column; gap: 6px; color: var(--m-muted-fg); }
.m-ai-opt { padding: 4px 12px; white-space: pre-wrap; }
.m-ai-opt-sel {
  color: var(--m-fg); font-weight: 600;
  background: var(--m-surface-alt); border-radius: 4px;
}
.m-ai-term-foot { margin-top: 20px; font-size: 12px; color: var(--m-muted-fg); }
@media (max-width: 767px) {
  .m-ai { grid-template-columns: 1fr; gap: 48px; }
}

/* MCP wordmark (shared/_mcp_mark), used here and in the announcement bar */
.mcp-mark { display: block; flex: none; overflow: visible; color: hsl(var(--muted-foreground)); }
.mcp-mark-bar { opacity: .18; animation: mcp-pulse 2.8s ease-in-out infinite; }
@keyframes mcp-pulse { 0%, 100% { opacity: .18; } 12% { opacity: .85; } 30% { opacity: .18; } }
@media (prefers-reduced-motion: reduce) { .mcp-mark-bar { animation: none; } }

.m-mcp {
  display: flex; align-items: center; gap: 20px;
  margin-top: 64px; padding: 18px 26px;
  background: #fff;
  border: 1px solid hsl(203 66% 50%); border-radius: 10px;
  box-shadow: 0 0 0 3px hsl(203 66% 50% / .08), 0 0 18px hsl(203 66% 50% / .28);
}
.m-mcp-mark {
  flex: none; align-self: stretch; display: flex; align-items: center;
  padding-right: 20px; border-right: 1px solid var(--m-border);
}
.m-mcp p { margin: 0; font-size: 17px; line-height: 1.5; color: var(--m-fg); text-wrap: pretty; }
@media (max-width: 767px) {
  .m-mcp { flex-direction: column; align-items: flex-start; gap: 14px; padding: 18px 20px; }
  .m-mcp-mark { align-self: auto; padding-right: 0; border-right: 0; }
}

/* "The problem" band — header plus a two-column comparison split by a rule */
.m-problem {
  display: flex; flex-direction: column; gap: 56px;
}
.m-problem .m-sec-head { margin: 0; max-width: 600px; }
.m-problem .m-section-lede { margin-top: 20px; max-width: none; }
.m-compare {
  display: grid; grid-template-columns: minmax(0, 1fr) 1px minmax(0, 1fr);
  column-gap: 56px;
}
.m-compare-rule { background: var(--m-border); }
.m-compare-col { display: flex; flex-direction: column; gap: 18px; }
.m-compare-col h3 {
  margin: 0; font-size: 14px; font-weight: 600;
  padding-bottom: 12px; border-bottom: 1px solid var(--m-border);
}
.m-compare-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 18px; }
.m-compare-col li { display: flex; gap: 14px; font-size: 16px; line-height: 1.6; }
.m-compare-col li > span:first-child { flex: none; }
.m-compare-legacy li { color: var(--m-muted-fg); }
.m-compare-legacy li > span:first-child { color: hsl(var(--destructive)); }
.m-compare-modern li { color: var(--m-fg); }
.m-compare-modern li > span:first-child { color: var(--m-affirmative); }
@media (max-width: 767px) {
  .m-compare { grid-template-columns: 1fr; row-gap: 40px; }
  .m-compare-rule { display: none; }
}

/* ==========================================================================
   Expanded tool mode

   The public EDI tools sit inside this page's chrome, but a document and its
   decoding want the whole window. The tool's Expand control stamps
   `data-tool-expanded` on <html> (see ToolPanel's useToolLayout), and these
   rules take the page out of the way: the hero, the tools sub-nav and every
   section below the tool go, and the wrap gives up its 1200px cap.

   Done from here rather than inside the island because everything being
   hidden is Rails-rendered outside it. The site header stays, so the way out
   is never further than the nav you arrived by.
   ========================================================================== */
[data-tool-expanded] .m-hero,
[data-tool-expanded] [data-tool-page-section] {
  display: none;
}

[data-tool-expanded] .resources-nav-container {
  display: none;
}

[data-tool-expanded] .m-band {
  padding: 16px 0 0;
}

/* Both tool pages sit in .m-wrap, and both mark it, so this releases the width
   cap without the rule having to name .m-wrap and catch every other band on
   the site that uses it. */
[data-tool-expanded] [data-tool-page] {
  max-width: none;
  padding-left: 0;
  padding-right: 0;
}

/* ==========================================================================
   Updates index

   Two columns: the pinned post as a masthead on the left, under its header
   image, and the rest of the archive as a dense dated list on the right. The
   masthead is sticky, so on a long archive the featured piece stays put while
   the list scrolls past it. Nothing pinned collapses the page to the list
   alone (.m-upd-cols-solo) rather than leaving a hole where the image goes.
   ========================================================================== */
/* Category tabs: Blog and Changelog are two pages, and this row is the switch
   between them. It carries the rule the list used to draw for itself. */
.m-upd-tabs {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  margin-top: 36px;
  border-bottom: 1px solid var(--m-border);
}
.m-upd-tabnav { display: flex; gap: 32px; }
.m-upd-tab {
  display: inline-flex;
  padding: 0 2px 12px;
  margin-bottom: -1px;
  border-bottom: 2px solid transparent;
  font-size: 16px;
  font-weight: 500;
  color: var(--m-muted-fg);
}
.m-upd-tab:hover { color: var(--m-fg); text-decoration: none; }
.m-upd-tab-on {
  color: var(--m-fg);
  font-weight: 600;
  border-bottom-color: var(--m-primary-fill);
}
.m-upd-rss {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 12px;
  font-family: var(--m-mono);
  font-size: 13px;
  color: var(--m-muted-fg);
  white-space: nowrap;
}
.m-upd-rss:hover { color: var(--m-primary); }
.m-upd-meta-link { color: var(--m-primary); }
.m-upd-meta-link:hover { text-decoration: underline; }

/* Changelog: a tag rail on the left and a dated log on the right, grouped by
   month. Denser than the blog list because these rows are reference material,
   scanned for the one change a reader is looking for. */
.m-upd-log {
  display: flex;
  align-items: flex-start;
  gap: 64px;
  padding: 40px 0 64px;
}
.m-upd-rail {
  flex: 0 0 200px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  position: sticky;
  top: 32px;
}
.m-upd-rail-label {
  font-family: var(--m-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-muted-fg);
  margin-bottom: 6px;
}
.m-upd-log-col {
  flex: 1 1 auto;
  min-width: 0;
  max-width: 840px;
  display: flex;
  flex-direction: column;
}
.m-upd-month {
  font-family: var(--m-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--m-muted-fg);
  padding: 36px 0 10px;
  border-bottom: 1px solid var(--m-border);
}
.m-upd-month:first-child { padding-top: 0; }
.m-upd-log-row {
  display: grid;
  grid-template-columns: 120px minmax(0, 1fr);
  column-gap: 24px;
  padding: 20px 0;
  border-bottom: 1px solid var(--m-border);
  scroll-margin-top: 24px;
}
.m-upd-log-row .m-upd-row-date { padding-top: 4px; }
.m-upd-log-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

@media (max-width: 900px) {
  .m-upd-log { flex-direction: column; gap: 28px; }
  .m-upd-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .m-upd-rail-label { width: 100%; margin-bottom: 0; }
  .m-upd-log-row { grid-template-columns: 1fr; row-gap: 6px; }
}

.m-upd-cols {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 64px;
  padding: 48px 0 64px;
}
.m-upd-pinned {
  flex: 1 1 520px;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.m-upd-list-col {
  flex: 1 1 380px;
  min-width: 0;
  max-width: 520px;
  display: flex;
  flex-direction: column;
}
.m-upd-cols-solo .m-upd-list-col { max-width: 720px; }

@media (min-width: 1100px) {
  .m-upd-pinned { position: sticky; top: 32px; }
}

/* Pinned post */
.m-upd-hero-img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 10px;
  border: 1px solid var(--m-border);
  background: var(--m-surface-alt);
}
.m-upd-meta {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 26px 0 12px;
  font-size: 13px;
  color: var(--m-muted-fg);
}
.m-upd-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--m-muted-fg);
  opacity: 0.6;
}
.m-upd-title {
  margin: 0 0 16px;
  font-size: 40px;
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1.08;
  text-wrap: pretty;
  max-width: 16ch;
}
.m-upd-title a { color: var(--m-fg); }
.m-upd-title a:hover { color: var(--m-primary); }
.m-upd-summary {
  margin: 0 0 20px;
  font-size: 17px;
  line-height: 1.6;
  color: var(--m-muted-fg);
  text-wrap: pretty;
  max-width: 56ch;
}
.m-upd-chips {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 22px;
}
.m-upd-cta {
  align-self: flex-start;
  font-size: 15px;
  font-weight: 500;
  color: var(--m-primary);
}
.m-upd-cta:hover { text-decoration: underline; }

/* Archive list */
.m-upd-filter {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding-bottom: 14px;
  font-size: 13px;
  color: var(--m-muted-fg);
}
.m-upd-filter strong { color: var(--m-fg); font-weight: 600; }
.m-upd-clear { color: var(--m-primary); }
.m-upd-clear:hover { text-decoration: underline; }

/* "See more" anchors the first post the wider page adds, so a row landed on
   keeps a little air above it rather than sitting flush with the viewport. */
.m-upd-row {
  display: flex;
  flex-direction: column;
  gap: 9px;
  padding: 20px 0;
  border-bottom: 1px solid var(--m-border);
  scroll-margin-top: 24px;
}
.m-upd-row-date {
  font-size: 12px;
  color: var(--m-muted-fg);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}
.m-upd-row-title {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.012em;
  line-height: 1.3;
  color: var(--m-fg);
  text-wrap: pretty;
}
.m-upd-row-title:hover { color: var(--m-primary); }
.m-upd-row-sum {
  font-size: 14px;
  line-height: 1.5;
  color: var(--m-muted-fg);
  text-wrap: pretty;
}
.m-upd-row-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 2px;
}

.m-upd-more {
  display: block;
  width: 100%;
  margin-top: 20px;
  padding: 14px;
  text-align: center;
  font-size: 15px;
  color: var(--m-muted-fg);
  background: var(--m-surface-alt);
  border: 1px solid var(--m-border);
  border-radius: 8px;
}
.m-upd-more:hover {
  color: var(--m-primary);
  border-color: var(--m-primary-fill);
  text-decoration: none;
}
.m-upd-empty {
  padding: 48px 0;
  text-align: center;
  font-size: 15px;
  color: var(--m-muted-fg);
}

@media (max-width: 1099px) {
  .m-upd-cols { gap: 48px; }
  .m-upd-list-col { max-width: none; }
}

@media (max-width: 760px) {
  .m-upd-title { font-size: 30px; max-width: none; }
  .m-upd-summary { font-size: 16px; }
}

/* ==========================================================================
   Long-form pages (industries/transportation_logistics)

   Editorial building blocks for a page that is mostly prose: running text, a
   folio without numerals, a definition list, a pull quote, a numbered
   procedure, a plain table and an always-open FAQ. No cards, icons or labels.
   ========================================================================== */
.m-crumbs { margin: 0 0 20px; font-size: 13px; color: var(--m-muted-fg); }
.m-crumbs a:hover { color: var(--m-fg); }

.m-prose { max-width: 680px; }
.m-prose p { margin: 0 0 18px; font-size: 18px; line-height: 1.7; text-wrap: pretty; }
.m-prose p:last-child { margin-bottom: 0; }
.m-prose .m-prose-aside { font-size: 16px; color: var(--m-muted-fg); }
.m-prose .m-prose-body { font-size: 16px; }

/* Band with an illustration filling its full height from just past the prose
   column to the viewport's right edge, cropped as needed. Below 1100px it
   narrows to a fixed-share band and the text makes room for it; on phones it
   is dropped, since a strip there reads as a broken image. */
.m-band-art { position: relative; overflow: hidden; }
.m-band-art-img {
  position: absolute; top: 0; bottom: 0; right: 0;
  left: calc(max(0px, (100% - 1200px) / 2) + 1rem + 680px + 64px);
  width: auto; height: 100%; object-fit: cover; object-position: left center;
}
@media (max-width: 1100px) {
  .m-band-art > .m-wrap { padding-right: calc(30% + 40px); }
  .m-band-art-img { left: auto; width: 30%; }
}
@media (max-width: 767px) {
  .m-band-art > .m-wrap { padding-right: 1rem; }
  .m-band-art-img { display: none; }
}

/* Folio entry with no numeral above the title. */
.m-reason > h3:first-child { margin-top: 0; }
.m-reason p + p { margin-top: -4px; }
.m-reason .m-reason-answer { color: var(--m-fg); }

.m-deflist { max-width: 880px; margin: 0; }
.m-deflist > div {
  display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 24px;
  padding: 20px 0; border-top: 1px solid var(--m-border);
}
.m-deflist dt { font-size: 16px; }
.m-deflist dd { margin: 0; font-size: 16px; line-height: 1.6; color: var(--m-muted-fg); }

.m-pullquote { margin: 0 0 56px; max-width: 880px; }
.m-pullquote blockquote {
  margin: 0; font-size: 26px; line-height: 1.45; letter-spacing: -0.01em; text-wrap: pretty;
}
.m-pullquote figcaption { margin-top: 18px; font-size: 15px; color: var(--m-muted-fg); }

.m-steps { list-style: decimal; margin: 0; padding: 0 0 0 1.4em; max-width: 680px; }
.m-steps li { padding: 0 0 14px 6px; font-size: 18px; line-height: 1.65; }
.m-steps li::marker { color: var(--m-muted-fg); }

.m-table { width: 100%; max-width: 880px; border-collapse: collapse; font-size: 16px; }
.m-table th, .m-table td {
  text-align: left; padding: 16px 24px 16px 0;
  border-top: 1px solid var(--m-border); font-variant-numeric: tabular-nums;
}
.m-table thead th {
  border-top: 0; padding-top: 0;
  font-size: 13px; font-weight: 500; color: var(--m-muted-fg);
}
.m-table tbody th { font-weight: 600; }
.m-table td { color: var(--m-muted-fg); }
.m-table tbody tr:last-child > * { border-bottom: 1px solid var(--m-border); }
.m-table-scroll { max-width: 880px; overflow-x: auto; }
.m-table .m-table-strong { color: var(--m-fg); font-weight: 600; }
.m-table .m-num-col { text-align: right; padding-right: 0; }
.m-load-table td.m-num-col { font-family: var(--m-mono); }
.m-load-table td:first-child { width: 80px; color: var(--m-fg); font-weight: 600; }
.m-table .m-load-total > * { color: var(--m-fg); font-weight: 700; }
.m-table-note { margin: 12px 0 0; font-size: 13px; color: var(--m-muted-fg); }
.m-h3 { margin-bottom: 0; font-size: 22px; font-weight: 600; letter-spacing: -0.01em; }

.m-faq { max-width: 760px; }
.m-faq > div { padding: 28px 0; border-top: 1px solid var(--m-border); }
.m-faq h3 { margin: 0 0 10px; font-size: 19px; font-weight: 600; line-height: 1.35; }
.m-faq p { margin: 0; font-size: 16px; line-height: 1.65; color: var(--m-muted-fg); }

@media (max-width: 760px) {
  .m-prose p, .m-steps li { font-size: 17px; }
  .m-deflist > div { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .m-pullquote blockquote { font-size: 21px; }
  .m-table th, .m-table td { padding-right: 12px; font-size: 14.5px; }
}

/* ==========================================================================
   Product hub (features/index)

   Two chapters bleed their screenshot off one edge of the viewport. The
   5-column grid's inner tracks sum to the .m-wrap content width (1200px less
   2 x 1rem), so the text column lines up with every other page while the
   image frame runs into the outer track.
   ========================================================================== */
.m-prod-hero { padding: clamp(56px, 10vw, 96px) 0 0; }
.m-prod-h1 {
  margin: 0; max-width: 680px;
  font-size: clamp(34px, 6vw, 48px); font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance;
}
.m-prod-lede {
  margin: 24px 0 0; max-width: 580px;
  font-size: 17px; line-height: 1.65; color: var(--m-muted-fg); text-wrap: pretty;
}
.m-prod-ch { padding: clamp(72px, 12vw, 128px) 0 0; }
.m-prod-ch-last { padding-bottom: clamp(72px, 12vw, 128px); }
.m-prod-bleed { overflow: hidden; }
.m-prod-copy { display: flex; flex-direction: column; gap: 14px; }
.m-prod-h2 {
  margin: 0; font-size: 28px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance;
}
.m-prod-copy p {
  margin: 0; font-size: 15px; line-height: 1.65; color: var(--m-muted-fg); text-wrap: pretty;
}
.m-prod-copy p + p { margin-top: 10px; }
.m-prod-more { font-size: 14px; font-weight: 500; color: var(--m-primary); text-decoration: none; }
.m-prod-more:hover { color: var(--m-fg); }

/* Desktop bleed grids. The heading is nudged up 4px so its cap height lines up
   with the frame's top edge. */
.m-prod-grid-r, .m-prod-grid-l { display: grid; align-items: start; }
.m-prod-grid-r { grid-template-columns: minmax(1rem, 1fr) minmax(0, 400px) 64px minmax(0, 704px) minmax(1rem, 1fr); }
.m-prod-grid-l { grid-template-columns: minmax(1rem, 1fr) minmax(0, 704px) 64px minmax(0, 400px) minmax(1rem, 1fr); }
.m-prod-grid-r .m-prod-copy { grid-column: 2; margin-top: -4px; }
.m-prod-grid-l .m-prod-copy { grid-column: 4; grid-row: 1; margin-top: -4px; }

.m-prod-frame {
  overflow: hidden; border: 1px solid var(--m-border); border-radius: 12px;
  background: var(--m-bg); box-shadow: var(--tedi-shadow-sm);
}
.m-prod-frame img { display: block; width: 100%; height: auto; }
/* The terminal screenshot keeps its own dark surround in both themes. */
.m-prod-frame-term { background: #121212; border-color: #2a2622; }
.m-prod-grid-r .m-prod-frame {
  grid-column: 4 / 6; border-right: 0; border-radius: 12px 0 0 12px; padding: 20px 0 20px 20px;
}
.m-prod-grid-r .m-prod-frame img { min-width: 900px; }
.m-prod-grid-l .m-prod-frame {
  grid-column: 1 / 3; grid-row: 1; border-left: 0; border-radius: 0 12px 12px 0;
  padding: 20px 20px 20px 0; display: flex; justify-content: flex-end;
}
.m-prod-grid-l .m-prod-frame img { flex: none; width: max(100%, 760px); }

.m-prod-stack .m-prod-h2 { font-size: 24px; }
.m-prod-stack .m-prod-frame { margin-top: 18px; max-width: 480px; }
.m-prod-stack .m-prod-frame-term { padding: 14px; }

.m-prod-panels { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 20px; margin-top: 40px; }
.m-prod-panels .m-prod-frame { aspect-ratio: 1 / 1; }
.m-prod-panels .m-prod-frame img { height: 100%; object-fit: cover; object-position: left top; }

.m-prod-dark {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 40px 56px; align-items: center;
  background: var(--m-ink); border-radius: 12px; padding: clamp(24px, 5vw, 56px);
}
.m-prod-dark .m-prod-h2 { color: #fff; }
.m-prod-dark .m-prod-copy p { color: hsl(35 15% 82%); }
.m-prod-dark .m-prod-more { color: #fff; }
.m-prod-dark .m-prod-more:hover { color: hsl(35 15% 82%); }
.m-prod-modal {
  overflow: hidden; border-radius: 14px; background: #fff;
  box-shadow: 0 12px 32px rgba(0, 0, 0, .35), 0 0 0 1px hsla(35, 20%, 80%, .14);
}
.m-prod-modal img { display: block; width: 100%; height: auto; }

.m-prod-caps { padding: clamp(64px, 9vw, 88px) 0; }
.m-prod-caps-list { border-top: 1px solid var(--m-border); }
.m-prod-cap {
  display: flex; flex-wrap: wrap; gap: 8px 32px; align-items: baseline;
  padding: 24px 0; border-bottom: 1px solid var(--m-border);
  color: var(--m-fg); text-decoration: none;
}
.m-prod-cap h3 { flex: 2 1 200px; margin: 0; font-size: 15px; font-weight: 600; }
.m-prod-cap p { flex: 3 1 300px; margin: 0; font-size: 14px; line-height: 1.6; color: var(--m-muted-fg); text-wrap: pretty; }
.m-prod-cap span { font-size: 13px; color: var(--m-primary); white-space: nowrap; }

/* Breakpoint per the design: below 768px the bleed chapters stack and the
   observability chapter shows only the trace panel. */
.m-prod-mobile { display: none; }
@media (max-width: 767px) {
  .m-prod-desktop { display: none; }
  .m-prod-mobile { display: block; }
}

/* ==========================================================================
   Comparison pages (compare/show)

   A reference document: a 660px text measure, one full-width table, and
   footnoted claims. Spec: ai/design_briefs/compare-page/README.md. The page
   sits in .m-wrap, so its left edge lines up with the header wordmark.
   ========================================================================== */
.m-cmp {
  --m-cmp-surface: #ffffff;
  --m-cmp-rule-strong: hsl(30 10% 35%);
  --m-cmp-affirmative: hsl(104 49% 30%);
  --m-cmp-partial: hsl(27 95% 45%);
  --m-cmp-fn-bg: hsl(27 91% 51% / 0.10);
  position: relative;
}
html:has(.m-cmp) { scroll-behavior: smooth; }

.m-cmp-main { padding-bottom: 96px; }
.m-cmp-stance, .m-cmp-measure { max-width: 660px; }
.m-cmp-stance { padding-top: 56px; }

.m-cmp-crumbs { display: flex; gap: 8px; margin-bottom: 18px; font-size: 13px; color: var(--m-muted-fg); }
.m-cmp-crumbs a { color: inherit; text-decoration: none; }
.m-cmp-crumbs a:hover { color: var(--m-primary); }

.m-cmp-h1 {
  margin: 0; font-size: 48px; font-weight: 600;
  letter-spacing: -0.03em; line-height: 1.08; text-wrap: balance;
}
.m-cmp-meta {
  display: flex; flex-wrap: wrap; gap: 4px 16px;
  margin: 14px 0 0; font-size: 13px; line-height: 1.5; color: var(--m-muted-fg);
}
.m-cmp-meta a {
  color: inherit; text-decoration: underline; text-decoration-color: var(--m-border);
  text-underline-offset: 2.5px;
}
.m-cmp-meta a:hover { color: var(--m-primary); }
.m-cmp-stance-body { margin-top: 32px; }

.m-cmp-prose { font-size: 17px; line-height: 1.65; text-wrap: pretty; }
.m-cmp-prose p { margin: 0; }
.m-cmp-prose p + p { margin-top: 1em; }
.m-cmp-prose a:not([data-fn]), .m-cmp-link {
  color: var(--m-primary); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2.5px;
}
.m-cmp-prose a:not([data-fn]):hover, .m-cmp-link:hover { color: var(--m-fg); }
.m-cmp-link { font-size: 14px; }

.m-cmp-section {
  margin-top: 72px; padding-top: 40px; border-top: 1px solid var(--m-border);
  scroll-margin-top: 24px;
}
.m-cmp-h2 {
  margin: 0 0 20px; font-size: 28px; font-weight: 600;
  letter-spacing: -0.02em; line-height: 1.2; text-wrap: balance;
}
#comparison .m-cmp-h2 { max-width: 660px; margin-bottom: 0; }
.m-cmp-table-intro { margin: 10px 0 0; max-width: 660px; font-size: 14px; line-height: 1.55; color: var(--m-muted-fg); }

/* Footnote markers */
.m-cmp-fn { position: static; font-size: 0.7em; line-height: 0; vertical-align: super; white-space: nowrap; }
.m-cmp-fn a {
  margin-left: 1px; padding: 1px 3px; border-radius: 3px;
  font-family: var(--m-mono); font-weight: 600;
  color: var(--m-primary); background: var(--m-cmp-fn-bg); text-decoration: none;
}

/* Comparison table. Grid rows rather than table layout so the same markup
   can become stacked cards below 768px; the ARIA roles keep it a table. */
.m-cmp-table { display: block; width: 100%; margin-top: 18px; border-collapse: collapse; }
.m-cmp-table thead, .m-cmp-table tbody { display: block; }
.m-cmp-table tr {
  display: grid; align-items: baseline; column-gap: 32px;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr);
}
.m-cmp-table th, .m-cmp-table td { display: block; padding: 0; text-align: left; font-weight: inherit; }
.m-cmp-table thead tr { padding-top: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--m-cmp-rule-strong); }
.m-cmp-table thead th { font-size: 13px; color: var(--m-muted-fg); }
.m-cmp-group-row { padding: 28px 0 8px; border-bottom: 1px solid var(--m-border); }
.m-cmp-group-row th { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 10px; }
.m-cmp-group-label { font-size: 14px; font-weight: 600; }
.m-cmp-group-count { font-size: 13px; color: var(--m-muted-fg); }
.m-cmp-row { padding: 14px 0; border-bottom: 1px solid var(--m-border); }
.m-cmp-row th { font-size: 15px; line-height: 1.4; font-weight: 600; }
.m-cmp-cell-name { display: none; }
.m-cmp-value { display: flex; align-items: baseline; gap: 8px; font-size: 14px; line-height: 1.4; font-weight: 600; }
.m-cmp-glyph { display: inline-block; width: 14px; flex: none; font-size: 15px; text-align: center; }
.m-cmp-glyph-yes { color: var(--m-cmp-affirmative); }
.m-cmp-glyph-partial { color: var(--m-cmp-partial); }
.m-cmp-glyph-no { color: var(--m-muted-fg); }
.m-cmp-cell-text {
  display: block; margin-top: 2px; padding-left: 22px;
  font-size: 13.5px; line-height: 1.5; color: var(--m-muted-fg);
}

/* Proof CTA */
.m-cmp-cta { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 20px; margin-top: 28px; }

/* FAQ */
.m-cmp-faq-h2 { margin-bottom: 8px; }
.m-cmp-faq { padding: 20px 0; border-bottom: 1px solid var(--m-border); }
.m-cmp-faq summary { list-style: none; cursor: pointer; border-radius: 3px; }
.m-cmp-faq summary::-webkit-details-marker { display: none; }
.m-cmp-faq summary:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; }
.m-cmp-faq h3 { margin: 0; font-size: 17px; line-height: 1.4; font-weight: 600; }
.m-cmp-faq-answer { margin-top: 10px; font-size: 16px; }

/* References */
.m-cmp-refs { display: flex; flex-direction: column; gap: 6px; margin: 0; padding: 0; list-style: none; font-size: 12px; line-height: 1.6; }
.m-cmp-refs li {
  display: grid; grid-template-columns: 26px minmax(0, 1fr); gap: 6px;
  margin: 0 -8px; padding: 6px 8px; border-radius: 6px; scroll-margin-top: 24px;
}
.m-cmp-refs li:target { background: var(--m-cmp-fn-bg); }
.m-cmp-ref-n { font-family: var(--m-mono); color: var(--m-muted-fg); }
.m-cmp-ref-url {
  color: var(--m-primary); text-decoration: underline;
  text-decoration-thickness: 1px; text-underline-offset: 2px; word-break: break-all;
}
.m-cmp-ref-note { margin: 2px 0 0; }
.m-cmp-ref-meta { display: flex; flex-wrap: wrap; gap: 2px 12px; margin: 0; color: var(--m-muted-fg); }
.m-cmp-backlink { margin-left: 4px; font-family: var(--m-mono); color: var(--m-primary); text-decoration: none; }
.m-cmp-refs-footer { margin: 28px 0 0; font-size: 12px; color: var(--m-muted-fg); }
.m-cmp [id^="fn-"] { scroll-margin-top: 24px; }

/* Source preview */
.m-cmp-tip {
  position: absolute; z-index: 30; width: 300px; padding: 10px 12px;
  border: 1px solid var(--m-border); border-radius: 8px;
  background: var(--m-cmp-surface); box-shadow: var(--tedi-shadow-md);
  font-size: 12px; line-height: 1.5; pointer-events: none;
}
.m-cmp-tip[hidden] { display: none; }
.m-cmp-tip > span { display: block; }
.m-cmp-tip > .m-cmp-tip-n, .m-cmp-tip > .m-cmp-tip-host { display: inline; }
.m-cmp-tip-n { margin-right: 6px; font-family: var(--m-mono); color: var(--m-muted-fg); }
.m-cmp-tip-host { font-size: 13px; font-weight: 600; }
.m-cmp-tip-path {
  overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  font-family: var(--m-mono); color: var(--m-muted-fg);
}
.m-cmp-tip-meta { color: var(--m-muted-fg); }

/* /compare hub: platforms by column. One set of markup, restyled as one card
   per platform below 768px so the page never scrolls sideways. */
.m-cmpx-table { display: block; width: 100%; margin-top: 18px; border-collapse: collapse; }
.m-cmpx-table thead, .m-cmpx-table tbody { display: block; }
.m-cmp-table thead, .m-cmpx-table thead { position: sticky; top: 0; z-index: 10; background: var(--m-bg); }
.m-cmpx-table tr {
  display: grid; align-items: baseline;
  grid-template-columns: minmax(0, 2.4fr) repeat(var(--m-cmpx-cols, 8), minmax(0, 1fr));
  border-bottom: 1px solid var(--m-border);
}
.m-cmpx-table th, .m-cmpx-table td { display: block; padding: 0; text-align: left; font-weight: inherit; }
.m-cmpx-table .m-cmpx-head-row { align-items: end; padding-top: 10px; border-bottom-color: var(--m-cmp-rule-strong); }
.m-cmpx-head-row th { padding: 0 6px 10px; font-size: 13px; line-height: 1.35; color: var(--m-muted-fg); text-wrap: balance; }
.m-cmpx-head-row th:first-child { padding-left: 0; padding-right: 16px; }
.m-cmpx-head-row a { color: inherit; text-decoration: none; }
.m-cmpx-head-row a:hover { color: var(--m-primary); }
.m-cmpx-table .m-cmpx-group-row { display: flex; padding: 28px 0 8px; }
.m-cmpx-group-row th { display: flex; align-items: baseline; gap: 10px; }
.m-cmpx-row > th { padding: 14px 16px 14px 0; }
.m-cmpx-row > td { padding: 14px 6px; }
.m-cmpx-tediware > th, .m-cmpx-tediware > td { padding-top: 16px; padding-bottom: 16px; }
.m-cmpx-heading { display: block; }
.m-cmpx-name { font-size: 15px; font-weight: 600; line-height: 1.35; color: var(--m-fg); }
a.m-cmpx-name { color: var(--m-primary); text-decoration: none; }
a.m-cmpx-name:hover { text-decoration: underline; text-underline-offset: 2.5px; }
.m-cmpx-summary { display: block; margin-top: 3px; font-size: 13px; line-height: 1.45; color: var(--m-muted-fg); text-wrap: pretty; }
.m-cmpx-col { display: none; }
.m-cmpx-value { gap: 6px; line-height: 1.35; }
.m-cmpx-value .m-cmp-glyph { width: 12px; }
.m-cmpx-source { color: inherit; text-decoration: underline; text-decoration-color: var(--m-border); text-underline-offset: 2.5px; }
.m-cmpx-source:hover { color: var(--m-primary); }
.m-cmpx-none { font-size: 12.5px; line-height: 1.35; color: var(--m-muted-fg); }

.m-cmpx-defs { margin-top: 32px; }
.m-cmpx-defs h3 { margin: 0 0 10px; font-size: 15px; font-weight: 600; }
.m-cmpx-defs dl { margin: 0; border-top: 1px solid var(--m-border); font-size: 13.5px; line-height: 1.5; }
.m-cmpx-defs dl > div {
  display: grid; grid-template-columns: 160px minmax(0, 1fr); gap: 4px 16px;
  padding: 8px 0; border-bottom: 1px solid var(--m-border); scroll-margin-top: 16px;
}
.m-cmpx-defs dl > div:target { background: var(--m-cmp-fn-bg); }
.m-cmpx-defs dt { font-weight: 600; }
.m-cmpx-defs dd { margin: 0; color: var(--m-muted-fg); text-wrap: pretty; }
.m-cmpx-defs p { margin: 12px 0 0; font-size: 13px; line-height: 1.55; color: var(--m-muted-fg); }

/* Hub citations: collapsed by default, one block per platform. */
.m-cmpx-citations { margin-top: 18px; }
.m-cmpx-citations > summary { display: inline-block; list-style: none; cursor: pointer; font-weight: 600; }
.m-cmpx-citations > summary::-webkit-details-marker { display: none; }
.m-cmpx-citations-hide, .m-cmpx-citations[open] .m-cmpx-citations-show { display: none; }
.m-cmpx-citations[open] .m-cmpx-citations-hide { display: inline; }
.m-cmpx-cite-platform { margin-top: 32px; }
.m-cmpx-cite-platform h3 { margin: 0; font-size: 15px; font-weight: 600; }
.m-cmpx-cite-platform h3 a { color: var(--m-fg); text-decoration: none; }
.m-cmpx-cite-platform h3 a:hover { color: var(--m-primary); }
.m-cmpx-cite-meta { margin: 2px 0 0; font-size: 12px; color: var(--m-muted-fg); }
.m-cmpx-cite-platform ul { margin: 10px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--m-border); }
.m-cmpx-cite-platform li {
  display: grid; grid-template-columns: 200px 90px minmax(0, 1fr); gap: 4px 16px; align-items: baseline;
  padding: 8px 0; border-bottom: 1px solid var(--m-border); font-size: 13px; line-height: 1.5;
}
.m-cmpx-cite-col { color: var(--m-muted-fg); }
.m-cmpx-cite-platform .m-cmp-value { font-size: 13px; }

@media (max-width: 767px) {
  .m-cmpx-table { margin-top: 20px; }
  .m-cmpx-table thead, .m-cmpx-table tbody { display: flex; flex-direction: column; gap: 8px; }
  .m-cmpx-table .m-cmpx-head-row { display: none; }
  .m-cmpx-table .m-cmpx-group-row { padding: 24px 0 2px; border-bottom: 0; }
  .m-cmpx-table .m-cmpx-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 10px 12px;
    padding: 14px 16px; border: 1px solid var(--m-border); border-radius: 8px;
    background: var(--m-cmp-surface);
  }
  .m-cmpx-row > th { grid-column: 1 / -1; padding: 0; }
  .m-cmpx-row > td, .m-cmpx-tediware > td { padding: 0; }
  .m-cmpx-heading { padding-bottom: 12px; border-bottom: 1px solid var(--m-border); }
  .m-cmpx-name { font-size: 16px; }
  .m-cmpx-summary { margin-top: 4px; line-height: 1.5; }
  .m-cmpx-col { display: block; font-size: 12px; line-height: 1.35; color: var(--m-muted-fg); }
  .m-cmpx-value { margin-top: 2px; }
  .m-cmpx-defs dl > div { grid-template-columns: minmax(0, 1fr); }
  .m-cmpx-cite-platform li { grid-template-columns: minmax(0, 1fr) auto; }
  .m-cmpx-cite-platform li .m-cmp-ref-url { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .m-cmp-main { padding-bottom: 64px; }
  .m-cmp-stance { padding-top: 28px; }
  .m-cmp-h1 { font-size: 34px; }
  .m-cmp-stance-body { margin-top: 24px; }
  .m-cmp-prose { font-size: 16px; }
  .m-cmp-section { margin-top: 56px; padding-top: 32px; }
  .m-cmp-h2 { font-size: 24px; }

  .m-cmp-table thead { display: none; }
  .m-cmp-table .m-cmp-group { display: flex; flex-direction: column; gap: 8px; }
  .m-cmp-group-row { padding: 24px 0 10px; border-bottom: 0; }
  .m-cmp-table .m-cmp-row {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 0 12px;
    padding: 14px 16px; border: 1px solid var(--m-border); border-radius: 8px;
    background: var(--m-cmp-surface);
  }
  .m-cmp-row th { grid-column: 1 / -1; margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--m-border); }
  .m-cmp-cell-name { display: block; font-size: 12px; color: var(--m-muted-fg); }
  .m-cmp-value { gap: 6px; margin-top: 2px; }
  .m-cmp-cell-text { margin-top: 4px; padding-left: 0; font-size: 13px; }
}