/* ============================================================
   Broker Genius — my-agent.css
   The My Agent feature page.

   Uses the site's tokens and shared pieces (.kicker,
   .section-title, .btn, .container) so it sits in the same
   visual system as the other product pages: 2px ink borders,
   hard shadows, mono micro-labels, brand yellow. Patterns follow
   warehouse.css, with an ma- prefix.
   ============================================================ */

.ma-icon {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.7;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ============================================================
   Hero — the claim on the left, the declaration it builds on
   the right
   ============================================================ */
.ma-hero {
  border-bottom: 2px solid var(--ink);
  background: var(--paper-2);
  padding: 0 28px;
  /* The stored card hangs past the mock's right edge on wide screens. */
  overflow-x: clip;
}
.ma-hero__grid {
  max-width: 1320px;
  margin: 0 auto;
  padding: 72px 0 80px;
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 56px;
  align-items: center;
}

/* --- Lockup: Broker Genius | robot My Agent [Coming soon] --- */
.ma-lockup { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 18px; }
.ma-lockup__logo { height: 30px; width: auto; display: block; }
.ma-lockup__rule { width: 2px; height: 38px; background: var(--sand-2); }
.ma-lockup__agent {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  font-size: 30px;
  font-weight: 700;
  letter-spacing: -0.035em;
  line-height: 1;
  color: var(--ink);
  white-space: nowrap;
}

/* The robot. Stroke width is on the 64px grid, so it lands near the site's
   2px rule at this size. */
.ma-bot { width: 56px; height: 56px; flex: none; overflow: visible; }
.ma-bot > * {
  fill: none;
  stroke: var(--ink);
  stroke-width: 3.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ma-bot__head,
.ma-bot__ear { fill: var(--card); }
.ma-bot__beacon { fill: var(--green); animation: bg-blink 1.8s ease-in-out infinite; }
.ma-bot__eyes { stroke: none; transform-box: fill-box; transform-origin: center; animation: ma-bot-blink 4.5s ease-in-out infinite; }
.ma-bot__eyes circle { fill: var(--ink); }
@keyframes ma-bot-blink {
  0%, 90%, 100% { transform: scaleY(1); }
  94%           { transform: scaleY(0.12); }
}

.ma-badge {
  display: inline-flex;
  align-items: center;
  font: 700 11px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
  padding: 7px 12px;
}
.ma-badge--soon { color: var(--ink); background: var(--accent); border: 1.5px solid var(--ink); }

/* --- Claim --- */
.ma-hero__title {
  font-size: 68px;
  line-height: 1;
  letter-spacing: -0.045em;
  font-weight: 700;
  font-stretch: 96%;
  margin-top: 34px;
  text-wrap: balance;
}
.ma-hero__title-mark {
  display: inline-block;
  line-height: 1.04;
  padding: 2px 12px 7px;
  margin-top: 6px;
  background: var(--accent);
}

.ma-hero__lede {
  font-size: 21px;
  line-height: 1.5;
  color: var(--muted);
  margin-top: 24px;
  max-width: 34ch;
  text-wrap: pretty;
}

/* --- What it does, ticked off --- */
.ma-checks { list-style: none; margin: 28px 0 0; padding: 0; display: grid; gap: 14px; }
.ma-check { display: flex; align-items: center; gap: 14px; font-size: 18px; font-weight: 500; line-height: 1.35; color: var(--ink); }
.ma-check__mark {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--green);
  display: grid;
  place-items: center;
}
.ma-check__mark svg,
.ma-stored__tick svg {
  width: 60%;
  height: 60%;
  fill: none;
  stroke: #fff;
  stroke-width: 3.2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.ma-hero__ctas { display: flex; flex-wrap: wrap; gap: 14px; margin-top: 36px; }
.ma-hero__login { font: 500 13px var(--font-mono); color: var(--muted-2); margin-top: 22px; }
.ma-hero__login a { color: var(--brown); border-bottom: 1px solid currentColor; }
.ma-hero__login a:hover { color: var(--ink); }

/* --- The declaration, and the card that says it is stored --- */
/* The bottom padding is the part of the card that hangs below the mock: the
   card covers only the tab row, leaving "SCHEMA VALID" readable above it. */
.ma-hero__visual { position: relative; padding-bottom: 102px; min-width: 0; }

.ma-stored {
  position: absolute;
  z-index: 1;      /* above the stage, whose tick it overlaps */
  right: -12px;
  bottom: 0;
  width: min(300px, 60%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 10px;
  padding: 34px 20px 20px;
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 6px 6px 0 var(--ink);
  text-align: center;
  /* Same 10s loop as the mock's rail and form, from page load: it lands just
     after item 21, holds while the finished form does, and clears with it. */
  animation: ma-stored 10s linear infinite both;
}
.ma-stored__tick {
  position: absolute;
  top: -26px;
  left: 50%;
  margin-left: -25px;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  background: var(--green);
  border: 2px solid var(--ink);
  display: grid;
  place-items: center;
}
.ma-stored__t { font-size: 23px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.ma-stored__pill {
  font: 600 11px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--green);
  background: #E7F2EA;
  border: 1.5px solid var(--green);
  padding: 7px 12px;
}
@keyframes ma-stored {
  0%, 53%      { opacity: 0; transform: translateY(18px) scale(0.96); }
  56%          { opacity: 1; transform: translateY(-3px) scale(1.01); }
  58%, 88%     { opacity: 1; transform: none; }
  88.01%, 100% { opacity: 0; transform: translateY(18px) scale(0.96); }
}

/* ============================================================
   The run — the agent at work inside the mock (js/my-agent.js)

   The script sets data-scene / data-step and a few classes on
   .ma-run; everything below draws from those. Without
   .is-playing (no script, or less motion asked for) none of it
   shows and the hero is the filled declaration with its card.
   Sizes inside the window are in cqw off the mock's own width,
   like the sheet, with px floors.
   ============================================================ */

/* --- What the agent is doing, above the window --- */
.ma-status {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  max-width: 100%;
  margin-bottom: 18px;
  padding: 8px 14px 8px 10px;
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 3px 3px 0 var(--ink);
  font: 600 13.5px/1.35 var(--font-sans);
  color: var(--ink);
}
.ma-status__bot { flex: none; width: 22px; height: 22px; color: var(--ink); }
.ma-status__dot {
  flex: none;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
  animation: bg-blink 1.8s ease-in-out infinite;
}
/* Every line sits in the same cell, so the pill is always as wide as the
   longest and does not jump about as the lines change. */
.ma-status__says { display: grid; min-width: 0; }
.ma-status__t { grid-area: 1 / 1; visibility: hidden; }
.ma-run:not(.is-playing) .ma-status__t[data-for="stored"],
.ma-run[data-scene="import"] .ma-status__t[data-for="import"],
.ma-run[data-scene="fill"] .ma-status__t[data-for="fill"],
.ma-run[data-scene="attach"] .ma-status__t[data-for="attach"],
.ma-run[data-scene="panel"] .ma-status__t[data-for="panel"],
.ma-run[data-scene="stored"] .ma-status__t[data-for="stored"] { visibility: visible; }

.ma-stage {
  position: relative;
  /* Keeps the scenes' z-indexes (pickers, page, panel) inside the stage, so
     they cannot paint over the stored card's tick or the sticky nav. */
  isolation: isolate;
}
.ma-stage > .asyc { transition: opacity 0.35s ease; }

/* --- The sheet: fills once, in the fill scene, instead of looping --- */
.ma-run.is-playing .asyc__rail,
.ma-run.is-playing .asyc__grid { animation: none; }
.ma-run.is-playing[data-scene="fill"] .asyc__rail { animation: ma-railscan 4.2s linear both; }
.ma-run.is-playing[data-scene="fill"] .asyc__grid { animation: ma-formfill 4.2s linear both; }
/* Nothing is populated while the XML is still being picked. */
.ma-run.is-playing[data-scene="import"] .asyc__footer { opacity: 0; }
.ma-run.is-playing[data-scene="fill"] .asyc__footer { animation: ma-fade-in 0.4s ease 3.9s both; }
@keyframes ma-railscan { from { --asyc-scan: 0; } to { --asyc-scan: 22; } }
@keyframes ma-formfill { from { --asyc-written: 0; } 88%, to { --asyc-written: 30; } }
@keyframes ma-fade-in { from { opacity: 0; } to { opacity: 1; } }

/* The Att. Doc. tab takes over from the S.A.D. while attaching, with a ring
   the first time, as if clicked. */
.ma-run.is-att .asyc__tab--on { background: #EFEEE8; font-weight: 600; }
.ma-run.is-att .asyc__tab:last-child { background: #fff; font-weight: 700; }
.ma-run.is-step[data-step="pick-0"] .asyc__tab:last-child { animation: asyc-tabping 1.4s ease both; }
@keyframes asyc-tabping {
  0%, 55% { box-shadow: 0 0 0 max(2px, 0.3cqw) #F2B531, 0 0 0 max(5px, 0.8cqw) rgba(242, 181, 49, 0.25); }
  100%    { box-shadow: 0 0 0 0 rgba(242, 181, 49, 0); }
}

/* The stored card lands in the last scene rather than on the 10s loop. */
.ma-run.is-playing .ma-stored {
  animation: none;
  opacity: 0;
  visibility: hidden;
  transform: translateY(18px) scale(0.96);
  transition: opacity 0.3s ease, transform 0.45s cubic-bezier(0.3, 1.4, 0.5, 1), visibility 0s 0.45s;
}
.ma-run.is-playing[data-scene="stored"] .ma-stored {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.3s, 0.3s, 0s;
}

/* --- The screens laid over the sheet --- */
.ma-run .asyc__screen { position: relative; }
.asyc-x { display: none; position: absolute; inset: 0; pointer-events: none; }
.ma-run.is-playing .asyc-x { display: block; }

/* File pickers: the XML import, and the attach picker. */
.asyc-dlg {
  --dlg-blue: #3A7BDB;
  position: absolute;
  z-index: 3;
  left: 15%;
  top: 9%;
  width: 70%;
  background: #fff;
  border-radius: max(5px, 0.9cqw);
  box-shadow: 0 1.8cqw 4cqw rgba(16, 22, 42, 0.22), 0 0 0 1px rgba(16, 22, 42, 0.08);
  overflow: hidden;
  font-size: max(8px, 1.35cqw);
  color: #222;
  opacity: 0;
  visibility: hidden;
  transform: translateY(1cqw) scale(0.97);
  transition: opacity 0.22s ease, transform 0.28s ease, visibility 0s 0.28s;
}
.ma-run[data-scene="import"] .asyc-dlg--xml,
.ma-run.is-pick .asyc-dlg--doc {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0.25s, 0.25s, 0s;
}
.asyc-dlg__title {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1cqw;
  padding: 1cqw 1.4cqw;
  background: #ECE9E1;
  border-bottom: 1px solid #DDD8CC;
  font-size: max(8.5px, 1.5cqw);
  font-weight: 700;
}
.asyc-dlg__x { color: #777; font-weight: 400; }
.asyc-dlg__body { display: grid; grid-template-columns: 24% minmax(0, 1fr); }
.asyc-dlg__side {
  list-style: none;
  margin: 0;
  padding: 0.9cqw 0;
  background: #F4F3EF;
  border-right: 1px solid #E4E1D8;
}
.asyc-dlg__side li { padding: 0.75cqw 1.4cqw; color: #555; font-weight: 500; white-space: nowrap; }
.asyc-dlg__side li.is-on { background: var(--dlg-blue); color: #fff; }
.asyc-dlg__row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 28% 15%;
  align-items: center;
  gap: 1cqw;
  padding: 0.8cqw 1.4cqw;
  border-bottom: 1px solid #F0EEE8;
  font-weight: 500;
}
.asyc-dlg__row--head { padding-block: 0.65cqw; color: #666; }
.asyc-dlg__size { text-align: right; }
.asyc-dlg__name { display: flex; align-items: center; gap: 0.9cqw; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asyc-dlg__ico {
  flex: none;
  width: max(8px, 1.5cqw);
  height: max(10px, 1.8cqw);
  border-radius: 2px;
  background: #E05A4F;
}
.asyc-dlg__ico--xml { background: #2C5F8A; }
/* The agent's choice: highlighted a beat after the picker opens. */
.ma-run.is-step[data-scene="import"] .asyc-dlg--xml .asyc-dlg__row.is-on,
.ma-run.is-step.is-pick .asyc-dlg--doc .asyc-dlg__row.is-on { animation: asyc-select var(--ma-step) step-end both; }
@keyframes asyc-select {
  0%        { background: transparent; color: inherit; }
  30%, 100% { background: #3A7BDB; color: #fff; }
}
.asyc-dlg__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.4cqw;
  padding: 1cqw 1.4cqw;
  border-top: 1px solid #E4E1D8;
  background: #FAF9F6;
  font-weight: 600;
}
.asyc-dlg__field { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.asyc-dlg__picked { display: none; }
.asyc-dlg__picked.is-on { display: inline; }
.asyc-dlg__open {
  flex: none;
  padding: 0.6cqw 2.2cqw;
  border-radius: max(4px, 0.6cqw);
  background: var(--dlg-blue);
  color: #fff;
  font-weight: 700;
}
.ma-run.is-step[data-scene="import"] .asyc-dlg--xml .asyc-dlg__open,
.ma-run.is-step.is-pick .asyc-dlg--doc .asyc-dlg__open { animation: asyc-press var(--ma-step) linear both; }
@keyframes asyc-press {
  0%, 78%   { transform: none; background: #3A7BDB; }
  84%       { transform: scale(0.92); background: #2558A8; }
  92%, 100% { transform: none; background: #3A7BDB; }
}

/* The Attached Documents page. */
.asyc-att {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  background: #FCFCFB;
  color: #16211A;
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s 0.3s;
}
.ma-run.is-att .asyc-att { opacity: 1; visibility: visible; transition-delay: 0s; }
.asyc-att__bar {
  flex: none;
  padding: 1.2cqw 1.9cqw;
  background: var(--green);
  color: #fff;
  font-size: max(9.5px, 1.75cqw);
  font-weight: 700;
}
.asyc-att__frame {
  flex: 1 1 auto;
  min-height: 0;
  margin: 1.6cqw 1.9cqw 0;
  border: var(--asyc-rule) solid var(--asyc-frame);
  background: #fff;
}

/* The entry line: the document being filed now. */
.asyc-att__entry {
  display: flex;
  align-items: flex-end;
  gap: 1.4cqw;
  padding: 1.2cqw 1.5cqw 1.3cqw;
  border-bottom: var(--asyc-rule) solid var(--asyc-frame);
}
.asyc-att__add {
  flex: none;
  width: max(14px, 2.8cqw);
  height: max(14px, 2.8cqw);
  display: grid;
  place-items: center;
  border: 1px solid #BFBFB8;
  border-radius: 2px;
  background: #F2F1EC;
  color: var(--green);
  font-size: max(10px, 1.9cqw);
  font-weight: 700;
  line-height: 1;
}
.asyc-att__fields { flex: 1 1 auto; min-width: 0; }
.asyc-att__grid { display: grid; grid-template-columns: 7% 9% minmax(0, 1fr) 12% 19% 13%; column-gap: 1.6cqw; }
.asyc-att__labels { font-size: max(7.5px, 1.15cqw); font-weight: 700; color: var(--green); }
.asyc-att__vals { display: grid; margin-top: 0.5cqw; }
.asyc-att__lines,
.asyc-att__set { grid-area: 1 / 1; }
.asyc-att__lines i { border-bottom: 1px solid #CFCFC8; }
.asyc-att__set { visibility: hidden; font-size: max(8.5px, 1.45cqw); font-weight: 700; }
.asyc-att__set.is-on { visibility: visible; }
.asyc-att__set > span { min-height: 1.5em; padding-bottom: 0.3cqw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* A new document's values type in, field by field. */
.ma-run.is-step.is-fresh .asyc-att__set.is-on > span { animation: bg-typein 0.4s steps(12) both; }
.ma-run.is-step.is-fresh .asyc-att__set.is-on > span:nth-child(2) { animation-delay: 0.12s; }
.ma-run.is-step.is-fresh .asyc-att__set.is-on > span:nth-child(3) { animation-delay: 0.26s; }
.ma-run.is-step.is-fresh .asyc-att__set.is-on > span:nth-child(5) { animation-delay: 0.44s; }
.ma-run.is-step.is-fresh .asyc-att__set.is-on > span:nth-child(6) { animation-delay: 0.58s; }

/* The table of attached documents. */
.asyc-att__table { margin: 1.6cqw 1.5cqw; font-size: max(8px, 1.3cqw); }
.asyc-att__tr { display: grid; grid-template-columns: 6% 7% 9% minmax(0, 1fr) 12% 19% 13%; }
.asyc-att__tr > span {
  min-width: 0;
  padding: 0.75cqw 0.9cqw;
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.asyc-att__th { background: #E6D9BB; border: 1px solid #BCAA80; font-weight: 700; }
.asyc-att__th > span + span { border-left: 1px solid #BCAA80; }
.asyc-att__row {
  background: #EEF1FA;
  border: 1px solid #E1E4EF;
  border-top: 0;
  font-weight: 600;
  opacity: 0;
  transform: translateY(-0.6cqw);
  transition: opacity 0.25s ease, transform 0.3s ease, background-color 0.5s ease;
}
.asyc-att__row.is-in { opacity: 1; transform: none; }
/* The row just filed, as ASYCUDA marks the current line. */
.asyc-att__row.is-new { background: #D9D4F0; }
.asyc-att__row > span + span { border-left: 1px solid #fff; }
.asyc-att__row > .asyc-att__desc,
.asyc-att__row > span:nth-child(6) { text-align: left; }
.asyc-att__row > .asyc-att__auth { background: #fff; }

/* Status line along the foot of the page: what is uploading, and how far. */
.asyc-att__status {
  flex: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.6cqw;
  padding: 1.1cqw 0 1.3cqw;
}
.asyc-att__jobs { display: grid; font-size: max(8.5px, 1.5cqw); font-weight: 600; color: #333; text-align: center; }
.asyc-att__job,
.asyc-att__done { grid-area: 1 / 1; visibility: hidden; }
.asyc-att__job.is-on { visibility: visible; }
.ma-run[data-scene="panel"] .asyc-att__done,
.ma-run[data-scene="stored"] .asyc-att__done { visibility: visible; color: var(--green); }
.asyc-att__prog {
  width: 42%;
  height: max(3px, 0.55cqw);
  border-radius: 99px;
  background: #E4E4E0;
  overflow: hidden;
  visibility: hidden;
}
.ma-run[data-step^="up-"] .asyc-att__prog { visibility: visible; }
.asyc-att__prog i { display: block; height: 100%; background: var(--green); transform-origin: left center; transform: scaleX(0); }
.ma-run.is-step[data-step^="up-"] .asyc-att__prog i { animation: asyc-prog var(--ma-step) ease-in-out both; }
@keyframes asyc-prog {
  0%        { transform: scaleX(0); }
  85%, 100% { transform: scaleX(1); }
}

/* The invoice, dragged out of the picker and onto the page. */
.asyc-att__ghost {
  position: absolute;
  z-index: 4;
  left: 34%;
  top: 58%;
  display: inline-flex;
  align-items: center;
  gap: 0.9cqw;
  padding: 0.8cqw 1.4cqw;
  border-radius: max(4px, 0.7cqw);
  background: #fff;
  box-shadow: 0 0.8cqw 2cqw rgba(16, 22, 42, 0.2), 0 0 0 1px rgba(16, 22, 42, 0.06);
  font-size: max(8.5px, 1.5cqw);
  font-weight: 700;
  white-space: nowrap;
  opacity: 0;
}
.ma-run.is-step[data-step="pick-0"] .asyc-att__ghost { animation: asyc-ghost-pick var(--ma-step) ease both; }
.ma-run.is-step[data-step="up-0"] .asyc-att__ghost { animation: asyc-ghost-up var(--ma-step) ease both; }
@keyframes asyc-ghost-pick {
  0%, 50% { opacity: 0; left: 44%; top: 36%; transform: scale(0.9); }
  58%     { opacity: 1; transform: scale(1.04); }
  100%    { opacity: 1; left: 34%; top: 58%; transform: none; }
}
@keyframes asyc-ghost-up {
  0%   { opacity: 1; left: 34%; top: 58%; transform: none; }
  70%  { opacity: 1; left: 30%; top: 17%; transform: none; }
  100% { opacity: 0; left: 30%; top: 14%; transform: scale(0.9); }
}

/* --- Broker Genius: what was on the entry, all of it gone to ASYCUDA --- */
.ma-bgpanel {
  display: none;
  position: absolute;
  z-index: 5;
  left: 0;
  right: 0;
  top: 7%;
  width: min(540px, 86%);
  margin: 0 auto;
  border-radius: 14px;
  background: #fff;
  box-shadow: 0 18px 40px rgba(16, 22, 42, 0.18), 0 2px 6px rgba(16, 22, 42, 0.06);
  overflow: hidden;
  opacity: 0;
  visibility: hidden;
  translate: 0 18px;
  transition: opacity 0.3s ease, translate 0.4s cubic-bezier(0.3, 1.3, 0.5, 1), visibility 0s 0.4s;
}
.ma-run.is-playing .ma-bgpanel { display: block; }
.ma-run[data-scene="panel"] .ma-bgpanel { opacity: 1; visibility: visible; translate: 0 0; transition-delay: 0.15s, 0.15s, 0s; }
.ma-run.is-playing[data-scene="panel"] .ma-stage > .asyc { opacity: 0.35; }

.ma-bgpanel__head { padding: 20px 24px 14px; border-bottom: 1px solid #EEECE6; }
.ma-bgpanel__t { font-size: 23px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: #15171C; }
.ma-bgpanel__sub { margin-top: 4px; font-size: 13.5px; color: #6B6F7A; }
.ma-bgpanel__rows { list-style: none; margin: 0; padding: 0; }
.ma-bgpanel__row {
  display: grid;
  grid-template-columns: 22px minmax(0, 34%) auto minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 10px 24px;
  border-bottom: 1px solid #F2F0EA;
}
.ma-bgpanel__check {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: #2F4A33;
  display: grid;
  place-items: center;
}
.ma-bgpanel__check svg { width: 62%; height: 62%; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.ma-bgpanel__label { font-size: 16px; font-weight: 700; color: #15171C; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-bgpanel__code {
  justify-self: start;
  padding: 4px 8px;
  border: 1px solid #D3E2CB;
  border-radius: 5px;
  background: #E9F1E4;
  font: 600 11px var(--font-mono);
  letter-spacing: 0.06em;
  color: #2F4A33;
}
.ma-bgpanel__note { justify-self: end; min-width: 0; max-width: 100%; font-size: 13px; color: #8A8E98; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ma-bgpanel__foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 24px; background: #FAF9F6; }
.ma-bgpanel__add { padding: 8px 14px; border: 1px solid #D9D6CE; border-radius: 8px; background: #fff; font-size: 13px; font-weight: 600; color: #30333B; }
.ma-bgpanel__ready { font-size: 13.5px; font-weight: 700; color: #2F4A33; }
/* Ticked off one by one, then the count. */
.ma-run.is-step[data-scene="panel"] .ma-bgpanel__row { animation: ma-row-tick 0.35s ease both; animation-delay: calc(0.45s + var(--n) * 0.3s); }
.ma-run.is-step[data-scene="panel"] .ma-bgpanel__check { animation: ma-check-tick 0.3s ease both; animation-delay: calc(0.45s + var(--n) * 0.3s); }
.ma-run.is-step[data-scene="panel"] .ma-bgpanel__ready { animation: ma-fade-in 0.3s ease 2.1s both; }
@keyframes ma-row-tick { from { opacity: 0.25; } to { opacity: 1; } }
@keyframes ma-check-tick {
  from { background: #C8CCC4; transform: scale(0.8); }
  to   { background: #2F4A33; transform: none; }
}

/* A phone-width window: the pickers lose their sidebar and Kind column, the
   tables their Itm and Authority columns. */
@container (max-width: 430px) {
  .asyc-dlg { left: 4%; top: 7%; width: 92%; }
  .asyc-dlg__body { grid-template-columns: minmax(0, 1fr); }
  .asyc-dlg__side,
  .asyc-dlg__kind { display: none; }
  .asyc-dlg__row { grid-template-columns: minmax(0, 1fr) auto; padding: 5px 6px; }
  .asyc-dlg__title,
  .asyc-dlg__foot { padding: 5px 6px; }
  .asyc-att__auth,
  .asyc-att__itm { display: none; }
  .asyc-att__grid { grid-template-columns: 8% 12% minmax(0, 1fr) 26% 21%; column-gap: 5px; }
  .asyc-att__tr { grid-template-columns: 9% 12% minmax(0, 1fr) 27% 22%; }
  .asyc-att__tr > span { padding: 4px 3px; }
  .asyc-att__entry { padding: 5px 6px 6px; gap: 6px; }
  .asyc-att__table { margin: 7px 6px; }
  .asyc-att__frame { margin: 7px 7px 0; }
  .asyc-att__bar { padding: 5px 8px; }
  .asyc-att__prog { width: 60%; }
}

/* --- The route: Broker Genius → My Agent → ASYCUDA (top of the steps) --- */
.ma-route {
  list-style: none;
  margin: 38px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 112px minmax(0, 1fr) 112px minmax(0, 1fr);
  align-items: stretch;
}
.ma-route__stop {
  display: flex;
  align-items: center;
  gap: 16px;
  border: 2px solid var(--ink);
  background: var(--card);
  box-shadow: 5px 5px 0 rgba(16, 22, 42, 0.10);
  padding: 20px 22px;
  text-align: left;
  min-width: 0;
}
.ma-route__stop--on { background: var(--accent); box-shadow: 6px 6px 0 var(--ink); }
.ma-route__icon { flex: none; width: 40px; height: 40px; color: var(--ink); }
.ma-route__text { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.ma-route__t { font-size: 19px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.ma-route__b { font-size: 14px; line-height: 1.45; color: var(--muted); }
.ma-route__stop--on .ma-route__b { color: #4A3F1E; }

.ma-route__hop {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  padding: 0 8px;
}
.ma-route__hop-l {
  font: 600 9.5px var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--brown);
  white-space: nowrap;
}
.ma-route__hop-a { font-size: 28px; line-height: 1; color: var(--ink); }

/* ============================================================
   Five steps — numbered rows, the last one highlighted
   ============================================================ */
.ma-steps { border-bottom: 2px solid var(--ink); background: var(--tint); padding: 72px 28px; }
.ma-steps__head { max-width: 72ch; }
.ma-steps__title { margin-top: 16px; max-width: 22ch; }
.ma-steps__blurb {
  font-size: 16.5px;
  line-height: 1.65;
  color: var(--muted);
  margin-top: 18px;
  max-width: 56ch;
}

/* Heading on the left, the Download card on the right, a rule between. */
.ma-steps__top { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.95fr); align-items: center; }
.ma-steps__top .ma-steps__head { max-width: none; padding-right: 48px; }
.ma-steps__dl { padding: 30px 0 18px 52px; border-left: 1px solid var(--sand-2); }

/* --- Download My Agent ---
   Drawn as in the mockup: a rounded card with a yellow rule and a soft
   shadow, two platform buttons, and while there is nothing to download yet a
   red Coming soon ribbon over the corner with a yellow fold beneath it.
   The ribbon and fold are CSS shapes; see $ma_downloads for the launch
   switch. */
.ma-dl {
  position: relative;
  max-width: 680px;
  padding: 26px 26px 24px;
  border: 2px solid var(--accent);
  border-radius: 18px;
  background: #FFFDF6;
  box-shadow: 0 14px 34px rgba(16, 22, 42, 0.10), 0 2px 6px rgba(16, 22, 42, 0.05);
}
/* The yellow fold in the corner under the ribbon. */
.ma-dl:not(.is-ready)::before {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 170px;
  height: 150px;
  border-top-right-radius: 16px;
  background: linear-gradient(225deg,
    rgba(251, 206, 108, 0) 0 30%,
    #FBCE6C 30% 37%,
    rgba(251, 206, 108, 0.45) 37% 49%,
    rgba(251, 206, 108, 0) 49%);
  pointer-events: none;
}
.ma-dl__ribbon { position: absolute; z-index: 2; top: -22px; right: -14px; }
.ma-dl__ribbon > span {
  display: block;
  position: relative;
  padding: 10px 22px 10px 26px;
  border-radius: 16px 6px 0 16px;
  background: linear-gradient(180deg, #E3243F 0%, #C8102E 55%, #AE0C26 100%);
  box-shadow: 0 6px 14px rgba(140, 10, 30, 0.28);
  color: #fff;
  font-size: 20px;
  font-weight: 800;
  font-stretch: 104%;
  letter-spacing: 0.02em;
  line-height: 1;
  text-transform: uppercase;
  white-space: nowrap;
}
/* Where the band folds back round the card's edge. */
.ma-dl__ribbon > span::after {
  content: "";
  position: absolute;
  right: 0;
  bottom: -14px;
  border-style: solid;
  border-width: 14px 14px 0 0;
  border-color: #7E0A1C transparent transparent transparent;
}

.ma-dl__head {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  gap: 16px;
  align-items: center;
}
.ma-dl__icon { width: 46px; height: 46px; color: var(--accent-deep); stroke-width: 2.2; }
.ma-dl__t { font-size: 30px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--ink); }
.ma-dl__sub { margin-top: 4px; font-size: 17px; color: var(--muted); }

.ma-dl__btns {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.ma-dl__btn {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
  padding: 16px 18px;
  border: 1.5px solid #D9D6CE;
  border-radius: 14px;
  background: #fff;
  color: var(--ink);
  transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease;
}
a.ma-dl__btn:hover { color: var(--ink); border-color: var(--ink); box-shadow: 0 6px 16px rgba(16, 22, 42, 0.10); transform: translateY(-1px); }
.ma-dl__btn:focus-visible { outline: 3px solid var(--accent-deep); outline-offset: 2px; }
.ma-dl__logo { flex: none; display: grid; place-items: center; width: 44px; height: 44px; }
.ma-dl__logo svg { width: 100%; height: 100%; }
.ma-dl__logo--windows svg { fill: #0078D4; }
.ma-dl__logo--macos svg { fill: var(--ink); }
.ma-dl__text { display: flex; flex-direction: column; min-width: 0; line-height: 1.15; }
.ma-dl__for { font-size: 15px; }
.ma-dl__os { font-size: 24px; font-weight: 700; letter-spacing: -0.02em; }
/* Before launch the platforms are plain tiles, not buttons: a dashed edge, a
   paper fill and no hover, so nothing reads as "download now". */
ul.ma-dl__btns { list-style: none; padding: 0; margin-bottom: 0; }
.ma-dl__btn.is-soon { border-style: dashed; background: #FBF8EF; cursor: default; }
.ma-dl__notify { position: relative; z-index: 1; margin-top: 22px; }

.ma-steps__rows { list-style: none; margin: 38px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; }

.ma-row {
  display: grid;
  grid-template-columns: 76px minmax(0, 1fr) 224px; /* 224: fits "INV · BOL · CWS · PRM · LIC" */
  align-items: center;
  gap: 20px;
  border: 2px solid var(--ink);
  background: var(--card);
  padding: 22px 26px;
  box-shadow: 4px 4px 0 rgba(16, 22, 42, 0.08);
}
.ma-row--on { background: var(--accent); box-shadow: 6px 6px 0 var(--ink); }
.ma-row--on .ma-row__n { color: var(--ink); }
.ma-row--on .ma-row__b { color: #4A3F1E; }
.ma-row--on .ma-row__meta { color: var(--ink); border-color: var(--ink); }

.ma-row__n {
  font: 700 30px var(--font-mono);
  letter-spacing: -0.03em;
  color: var(--sand-2);
  font-variant-numeric: tabular-nums;
}
.ma-row__t { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: var(--ink); }
.ma-row__b { font-size: 14.8px; line-height: 1.6; color: var(--muted); margin-top: 7px; max-width: 70ch; }
.ma-row__meta {
  justify-self: end;
  font: 600 10px var(--font-mono);
  letter-spacing: 0.12em;
  color: var(--brown);
  border: 1px solid var(--line);
  padding: 6px 10px;
  white-space: nowrap;
}

/* The "awaiting your assessment" state on the final row. */
.ma-row__pill {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font: 600 11px var(--font-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  padding: 6px 12px;
}
.ma-row__pill::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--green);
}

/* The entry package: always-sent documents ticked, the others marked optional. */
.ma-docs { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.ma-doc {
  display: inline-flex;
  align-items: stretch;
  border: 1.5px dashed var(--sand);
  background: var(--paper);
  font: 500 11.5px var(--font-mono);
  color: var(--muted-2);
}
.ma-doc--always { border: 1.5px solid var(--ink); background: var(--card); color: var(--ink); }
.ma-doc__code {
  font-weight: 700;
  letter-spacing: 0.06em;
  padding: 6px 9px;
  border-right: 1.5px dashed var(--sand);
}
.ma-doc--always .ma-doc__code { background: var(--ink); color: #fff; border-right: 0; }
.ma-doc__l { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; }
.ma-doc__tick { color: var(--green); font-weight: 700; }

/* ============================================================
   Human-only action — the one thing the agent will not do
   ============================================================ */
.ma-human { border-bottom: 2px solid var(--ink); background: var(--accent); padding: 60px 28px; }
.ma-human__inner {
  max-width: 980px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  gap: 32px;
  align-items: center;
}
.ma-human__icon {
  width: 96px;
  height: 96px;
  padding: 18px;
  color: var(--ink);
  background: var(--card);
  border: 2px solid var(--ink);
  box-shadow: 5px 5px 0 var(--ink);
  stroke-width: 1.5;
}
.ma-human__k { font: 700 11px var(--font-mono); letter-spacing: 0.14em; color: var(--brown); }
.ma-human__t {
  font-size: 40px;
  line-height: 1.06;
  letter-spacing: -0.04em;
  font-weight: 700;
  color: var(--ink);
  margin-top: 10px;
  text-wrap: balance;
}
.ma-human__b { font-size: 17px; line-height: 1.6; color: #4A3F1E; margin-top: 14px; max-width: 62ch; }
.ma-human__b strong { color: var(--ink); }

/* ============================================================
   Control — two panels on ink
   ============================================================ */
.ma-trust { border-bottom: 2px solid var(--ink); background: var(--ink); padding: 72px 28px; }
.ma-trust .kicker { color: var(--accent); }
.ma-trust__title { color: #fff; margin-top: 16px; max-width: 22ch; }

.ma-trust__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 24px;
  margin-top: 40px;
}
.ma-card { border: 2px solid rgba(255, 255, 255, 0.28); background: #16161A; padding: 0 0 28px; }
.ma-card:first-child { border-color: var(--accent); }
.ma-card__bar {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 24px;
  border-bottom: 2px solid rgba(255, 255, 255, 0.18);
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.13em;
  color: var(--accent);
}
.ma-card:first-child .ma-card__bar { border-bottom-color: var(--accent); }
.ma-card__icon { width: 24px; height: 24px; color: var(--accent); }
.ma-card__t {
  font-size: 24px;
  line-height: 1.15;
  letter-spacing: -0.03em;
  font-weight: 700;
  color: #fff;
  margin: 22px 24px 0;
}
.ma-card__b { font-size: 15.5px; line-height: 1.65; color: var(--footer-text); margin: 12px 24px 0; }

/* ============================================================
   FAQ — native <details>, so it works without JavaScript
   ============================================================ */
.ma-faq { border-bottom: 2px solid var(--ink); background: var(--paper); padding: 72px 28px; }
.ma-faq__list { margin-top: 26px; border: 2px solid var(--ink); background: var(--card); }
.ma-faq__item { border-bottom: 1px solid var(--line); }
.ma-faq__item:last-child { border-bottom: 0; }
.ma-faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  padding: 18px 24px;
  font-size: 16.5px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
  list-style: none;
}
.ma-faq__q::-webkit-details-marker { display: none; }
.ma-faq__q:hover { background: var(--line-soft); }
.ma-faq__q:focus-visible { outline: 2px solid var(--brown); outline-offset: -2px; }
.ma-faq__sign { flex: none; width: 18px; height: 18px; position: relative; }
.ma-faq__sign::before,
.ma-faq__sign::after {
  content: "";
  position: absolute;
  background: var(--ink);
  transition: transform 0.18s ease, opacity 0.18s ease;
}
.ma-faq__sign::before { top: 8px; left: 0; width: 18px; height: 2px; }
.ma-faq__sign::after { left: 8px; top: 0; width: 2px; height: 18px; }
.ma-faq__item[open] .ma-faq__sign::after { transform: scaleY(0); opacity: 0; }
.ma-faq__item[open] .ma-faq__q { background: var(--accent); }
.ma-faq__a {
  padding: 0 24px 20px;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--muted);
  max-width: 78ch;
}

/* ============================================================
   Get notified
   ============================================================ */
.ma-notify { border-bottom: 2px solid var(--ink); background: var(--tint); padding: 72px 28px; }
.ma-notify__inner {
  max-width: 1280px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  border: 2px solid var(--ink);
  box-shadow: 8px 8px 0 rgba(16, 22, 42, 0.12);
}
.ma-notify__aside { background: var(--ink); color: #fff; padding: 40px; }
.ma-notify__aside-k { font: 600 10.5px var(--font-mono); letter-spacing: 0.14em; color: var(--accent); }
.ma-notify__aside-t {
  font-size: 34px;
  line-height: 1.08;
  letter-spacing: -0.035em;
  font-weight: 700;
  margin-top: 14px;
  color: #fff;
}
.ma-notify__aside-b { font-size: 15.5px; line-height: 1.65; color: var(--footer-text); margin-top: 16px; }
.ma-notify__points { list-style: none; margin: 26px 0 0; padding: 0; }
.ma-notify__points li {
  padding: 11px 0 11px 22px;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
  font-size: 14.5px;
  color: var(--line-soft);
  position: relative;
}
.ma-notify__points li::before {
  content: "\2713";
  position: absolute;
  left: 0;
  color: var(--accent);
  font-size: 13px;
}

.ma-notify__form { background: var(--card); padding: 34px 40px 40px; }
.ma-notify__form-head {
  font: 600 10.5px var(--font-mono);
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sand);
  padding-bottom: 16px;
  border-bottom: 2px solid var(--ink);
}
.ma-form__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  margin-top: 22px;
}
.ma-field { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.ma-field__l { font: 600 10px var(--font-mono); letter-spacing: 0.12em; color: var(--muted-2); }
/* Inputs carry an intrinsic width that stops a grid track shrinking. */
.ma-input {
  min-width: 0;
  max-width: 100%;
  font: 400 15px var(--font-sans);
  color: var(--ink);
  background: var(--paper-2);
  border: 2px solid var(--ink);
  padding: 12px 14px;
  outline: none;
}
.ma-input:focus { background: #FFFBEF; box-shadow: 3px 3px 0 var(--accent); }
.ma-form__submit { margin-top: 22px; }
.ma-form__actions { margin-top: 22px; }
.ma-form__actions .ma-form__submit { margin-top: 0; }
.ma-form__note { font-size: 13px; color: var(--muted-2); margin-top: 12px; }

/* Contact Form 7 wraps every control in its own span and appends its
   response and validation markup; let that sit inside the layout above. */
.ma-notify__form .wpcf7-form-control-wrap { display: block; }
.ma-notify__form .ma-input { width: 100%; display: block; }
.ma-notify__form .wpcf7-not-valid { border-color: #9B2C2C; }
.ma-notify__form .wpcf7-not-valid-tip {
  display: block;
  margin-top: 6px;
  font: 500 12.5px var(--font-mono);
  color: #9B2C2C;
}
.ma-notify__form .wpcf7-response-output {
  margin: 18px 0 0;
  padding: 13px 16px;
  border: 2px solid var(--ink);
  background: var(--paper-2);
  font-size: 14.5px;
  color: var(--ink);
}
.ma-notify__form form.sent .wpcf7-response-output { border-color: var(--green); background: #E7F2EA; }
.ma-notify__form form.invalid .wpcf7-response-output,
.ma-notify__form form.failed .wpcf7-response-output { border-color: #9B2C2C; background: #F9E9E7; }
.ma-notify__form .wpcf7-spinner { margin: 0 0 0 12px; vertical-align: middle; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1080px) {
  /* Copy first, the declaration under it at the width main.css gives the
     mock here (620px), so the form keeps its printed proportions. */
  .ma-hero__grid { grid-template-columns: minmax(0, 1fr); gap: 48px; padding: 56px 0 64px; }
  .ma-hero__visual { max-width: 640px; }
  .ma-stored { right: 0; }
  .ma-hero__title { font-size: 56px; }
  /* Three stops no longer fit across: stack them, arrows pointing down. */
  .ma-route { grid-template-columns: minmax(0, 1fr); max-width: 560px; }
  .ma-route__hop { flex-direction: row; gap: 10px; padding: 12px 0; }
  .ma-route__hop-a { transform: rotate(90deg); font-size: 24px; }
  /* The Download card goes under the heading. */
  .ma-steps__top { grid-template-columns: minmax(0, 1fr); gap: 44px; }
  .ma-steps__top .ma-steps__head { padding-right: 0; }
  .ma-steps__dl { padding: 0; border-left: 0; }
  .ma-dl { max-width: 640px; }
  .ma-row { grid-template-columns: 60px minmax(0, 1fr); }
  .ma-row__meta { grid-column: 2; justify-self: start; }
  .ma-trust__grid { grid-template-columns: minmax(0, 1fr); }
  .ma-notify__inner { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .ma-hero { padding: 0 20px; }
  .ma-hero__grid { gap: 36px; padding: 40px 0 52px; }
  .ma-lockup { gap: 10px 14px; }
  .ma-lockup__logo { height: 24px; }
  .ma-lockup__rule { height: 30px; }
  .ma-lockup__agent { font-size: 24px; gap: 9px; }
  .ma-bot { width: 44px; height: 44px; }
  .ma-hero__title { font-size: 40px; margin-top: 26px; }
  .ma-hero__lede { font-size: 17px; margin-top: 18px; }
  .ma-checks { gap: 12px; margin-top: 22px; }
  .ma-check { font-size: 16px; gap: 12px; }
  .ma-check__mark { width: 24px; height: 24px; }
  .ma-hero__ctas { margin-top: 30px; }
  /* The document tabs run the full width of the mock here, so the card would
     cover one: hang it wholly below the mock instead, centred. */
  .ma-hero__visual { padding-bottom: 136px; }
  .ma-stored { left: 0; right: 0; margin: 0 auto; width: min(260px, 84%); padding: 28px 14px 14px; gap: 8px; box-shadow: 5px 5px 0 var(--ink); }
  .ma-stored__tick { width: 42px; height: 42px; top: -22px; margin-left: -21px; }
  .ma-stored__t { font-size: 19px; }
  .ma-stored__pill { font-size: 10px; padding: 6px 10px; }
  .ma-route { margin-top: 30px; }
  .ma-steps__top { gap: 38px; }
  .ma-dl { padding: 22px 18px 18px; border-radius: 16px; }
  /* Small enough to stay in the corner, clear of the title. */
  .ma-dl:not(.is-ready)::before { width: 92px; height: 80px; border-top-right-radius: 14px; }
  .ma-dl__ribbon { top: -18px; right: -10px; }
  .ma-dl__ribbon > span { padding: 8px 14px 8px 18px; font-size: 14px; border-radius: 12px 5px 0 12px; }
  .ma-dl__ribbon > span::after { bottom: -10px; border-width: 10px 10px 0 0; }
  .ma-dl__head { grid-template-columns: 42px minmax(0, 1fr); gap: 12px; }
  .ma-dl__icon { width: 38px; height: 38px; }
  .ma-dl__t { font-size: 23px; }
  .ma-dl__sub { font-size: 15px; }
  .ma-dl__btns { grid-template-columns: minmax(0, 1fr); gap: 12px; margin-top: 18px; }
  .ma-dl__btn { padding: 13px 16px; gap: 14px; }
  .ma-dl__logo { width: 36px; height: 36px; }
  .ma-dl__os { font-size: 20px; }
  /* The platform tiles are short now, so keep them side by side; they wrap
     only if the screen is too narrow for both. */
  ul.ma-dl__btns { grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 10px; }
  .ma-dl__btn.is-soon { padding: 11px 12px; gap: 10px; }
  .ma-dl__btn.is-soon .ma-dl__logo { width: 26px; height: 26px; }
  .ma-dl__btn.is-soon .ma-dl__os { font-size: 18px; }
  .ma-dl__notify { display: block; margin-top: 18px; text-align: center; white-space: normal; }
  .ma-status { margin-bottom: 14px; padding: 7px 12px 7px 9px; font-size: 12.5px; }
  .ma-status__bot { width: 20px; height: 20px; }
  .ma-bgpanel { top: 4%; width: 94%; border-radius: 12px; }
  .ma-bgpanel__head { padding: 14px 16px 10px; }
  .ma-bgpanel__t { font-size: 18px; }
  .ma-bgpanel__sub { font-size: 12px; }
  .ma-bgpanel__row { grid-template-columns: 20px minmax(0, 1fr) auto; gap: 10px; padding: 8px 16px; }
  .ma-bgpanel__check { width: 20px; height: 20px; }
  .ma-bgpanel__label { font-size: 14px; }
  .ma-bgpanel__note { display: none; }
  .ma-bgpanel__foot { padding: 10px 16px; }
  .ma-bgpanel__add { padding: 6px 10px; font-size: 12px; }
  .ma-bgpanel__ready { font-size: 12.5px; }
  .ma-route__stop { padding: 16px 18px; }
  .ma-route__icon { width: 34px; height: 34px; }
  .ma-steps, .ma-trust, .ma-faq, .ma-notify { padding: 48px 20px; }
  .ma-human { padding: 44px 20px; }
  .ma-human__inner { grid-template-columns: minmax(0, 1fr); gap: 22px; }
  .ma-human__icon { width: 72px; height: 72px; padding: 13px; }
  .ma-human__t { font-size: 30px; }
  /* One column on phones: the number sits above the title instead of
     taking a 60px gutter out of a 300px row. */
  .ma-row { grid-template-columns: minmax(0, 1fr); padding: 18px; gap: 10px; }
  .ma-row__n { font-size: 20px; }
  .ma-row__meta { grid-column: 1; }
  .ma-notify__aside, .ma-notify__form { padding: 26px 22px; }
  .ma-form__grid { grid-template-columns: minmax(0, 1fr); }
  .ma-faq__q { font-size: 15.5px; padding: 16px 18px; }
  .ma-faq__a { padding: 0 18px 18px; }
}

@media (max-width: 380px) {
  .ma-hero__ctas .btn { white-space: normal; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  .ma-bot__beacon,
  .ma-bot__eyes,
  .ma-status__dot,
  .ma-stored { animation: none; }
  /* js/my-agent.js does not start the run here; this is a backstop. */
  .ma-run .asyc-x,
  .ma-bgpanel { display: none !important; }
  .ma-faq__sign::before,
  .ma-faq__sign::after { transition: none; }
  .ma-dl__btn { transition: none; }
  .ma-dl__btn:hover { transform: none; }
}