/* ==========================================================================
   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;
}
.m-stats {
  display: flex; gap: 36px; margin-top: 36px;
  padding-top: 28px; border-top: 1px dashed var(--m-border);
}
.m-stats > div { display: flex; flex-direction: column; gap: 4px; }
.m-stat-num {
  font-family: var(--m-mono); font-size: 26px; font-weight: 700;
  color: var(--m-primary); letter-spacing: -0.02em;
}
.m-stat-lbl { font-size: 12px; color: var(--m-muted-fg); letter-spacing: .02em; }

/* X12 marquee */
.m-x12-strip {
  background: var(--m-ink); color: hsl(35 18% 75%);
  border-top: 1px solid var(--m-ink-soft);
  border-bottom: 1px solid var(--m-ink-soft);
  overflow: hidden; padding: 14px 0;
  position: relative; margin-top: 20px;
}
.m-x12-strip::before, .m-x12-strip::after {
  content: ""; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2;
  pointer-events: none;
}
.m-x12-strip::before { left: 0; background: linear-gradient(90deg, var(--m-ink), transparent); }
.m-x12-strip::after  { right: 0; background: linear-gradient(-90deg, var(--m-ink), transparent); }
.m-x12-marquee {
  display: flex; gap: 32px; white-space: nowrap;
  animation: m-marquee 70s linear infinite;
  font-family: var(--m-mono); font-size: 13px;
}
.m-x12-line { display: inline-flex; gap: 32px; }
.m-x12-seg { color: hsl(35 18% 78%); }
.m-x12-seg::before { content: "│ "; color: var(--m-primary-fill); margin-right: 6px; }
@keyframes m-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* 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-eyebrow {
  font-family: var(--m-mono); color: var(--m-muted-fg);
  font-size: 13px; font-weight: 400; margin: 0 0 14px;
}
.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;
}

/* 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-key {
  font-family: var(--m-mono); font-size: 13px;
  color: var(--m-muted-fg);
}
.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; }

/* Reason cards ("Sounds too good to be true?") */
.m-tgttb {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.m-tgttb-card {
  border: 1px solid var(--m-border); border-radius: 12px;
  background: var(--m-bg); padding: 24px;
  display: flex; flex-direction: column; gap: 10px;
}
.m-tgttb-head {
  display: flex; justify-content: space-between; align-items: center;
  margin-bottom: 4px; gap: 8px;
}
.m-tgttb-key {
  font-family: var(--m-mono); font-size: 13px;
  color: var(--m-muted-fg);
}
.m-tgttb-card h3 { margin: 0; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; }
.m-tgttb-card p {
  margin: 0; color: var(--m-muted-fg);
  font-size: 14px; line-height: 1.65;
}

/* 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-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; flex-wrap: wrap; }
.m-as2-key {
  font-family: var(--m-mono); font-size: 13px;
  color: var(--m-muted-fg);
}
.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-tgttb, .m-includes { grid-template-columns: 1fr; }
  .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); }
  .m-stats { flex-wrap: wrap; gap: 22px; }
}

/* "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-eyebrow { margin-bottom: 20px; }
.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; }
}

/* "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-eyebrow { margin-bottom: 20px; }
.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.
   ========================================================================== */
.m-upd-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 40px;
  padding-bottom: 12px;
}
.m-upd-rss {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding-bottom: 10px;
  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-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; }

.m-upd-list { border-top: 1px solid var(--m-border); }
/* "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-head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .m-upd-rss { padding-bottom: 0; }
  .m-upd-title { font-size: 30px; max-width: none; }
  .m-upd-summary { font-size: 16px; }
}