/* /agentic-commerce-suite — page-specific extensions of the landing system.
   Tokens, fonts and every shared component come from landing.css; this sheet
   only sets what has no equivalent there. */

.mod-main { border-top: 1px solid var(--line); }

.mod-hero { padding-block: 84px 66px; }
.mod-hero h1 {
  max-width: 21ch;
  margin: 18px 0 0;
  font-family: var(--font-display);
  font-size: clamp(2.2rem, 5vw, 3.4rem);
  font-weight: 620;
  line-height: 1.06;
  letter-spacing: -0.02em;
  text-wrap: balance;
}
.mod-hero .lede { max-width: 62ch; margin-top: 24px; }
.mod-hero-ctas { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 30px; }
.mod-hero .micro { max-width: 62ch; margin-top: 18px; }

/* The share-of-voice exhibit: the module's own ranking table, set in the
   page's language rather than pasted admin chrome. Real sampled data — the
   caption says from which run. */
.sov-layout {
  display: grid;
  grid-template-columns: minmax(280px, .9fr) minmax(0, 1.1fr);
  gap: clamp(40px, 6vw, 76px);
  align-items: start;
}
.sov-copy .lede { max-width: 44ch; }
.sov-copy p { max-width: 52ch; color: var(--muted); font-size: .9rem; }

.sov-figure { margin: 0; }
.sov-table { width: 100%; border-collapse: collapse; background: var(--white); font-size: .86rem; }
.sov-table caption {
  padding: 12px 14px;
  border: 1px solid var(--line-strong);
  border-bottom: 0;
  background: var(--surface);
  color: var(--ink);
  font-weight: 700;
  text-align: left;
}
.sov-table th {
  padding: 9px 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  color: var(--quiet);
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-align: left;
  text-transform: uppercase;
}
.sov-table td { padding: 9px 14px; border: 1px solid var(--line); }
.sov-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.sov-table .sov-own td { background: var(--rust-soft); font-weight: 700; }
.sov-table .sov-own .sov-domain { color: var(--rust); }
.sov-figure figcaption { margin-top: 10px; color: var(--quiet); font-size: .74rem; line-height: 1.55; }

.sov-gaps {
  margin: 26px 0 0;
  padding: 16px 18px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.sov-gaps p { margin: 0; max-width: none; font-size: .84rem; }
.sov-gaps b { color: var(--ink); }

/* Feature register — the deliverables pattern with a tier tag per row. */
.mod-features { list-style: none; margin: 0; padding: 0; }
.mod-features li {
  display: grid;
  grid-template-columns: 92px minmax(0, 1fr) auto;
  gap: 15px;
  align-items: start;
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.mod-features h3 { margin: 0; font-size: 1rem; }
.mod-features p { max-width: 62ch; margin: 5px 0 0; color: var(--muted); font-size: .84rem; }
.tier-tag {
  padding: 5px 8px;
  border-radius: 999px;
  font-size: .7rem;
  font-weight: 790;
  white-space: nowrap;
}
.tier-tag--free { border: 1px solid var(--line-strong); background: var(--surface); color: var(--quiet); }
.tier-tag--pro { border: 1px solid #F3CDBF; background: var(--accent-soft); color: var(--accent-dark); }

/* Requirements — measurement data, so the mono earns its place. */
.mod-req {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 8px 28px;
  margin: 26px 0 0;
  padding: 18px 20px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: .8rem;
}
.mod-req dt { color: var(--quiet); font-size: .7rem; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; }
.mod-req dd { margin: 2px 0 0; }

.mod-demo-creds {
  max-width: 62ch;
  margin: 20px 0 0;
  padding: 13px 16px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
  font-size: .84rem;
}
.mod-demo-creds b { font-family: var(--font-mono); font-size: .82rem; }

/* Screens — the product itself, so the images lead and the chrome recedes. */
.mod-screens-section { background: #EDF2EC; border-block: 1px solid #D6DFD7; }
.mod-screens { display: grid; gap: 34px; align-items: start; }
.mod-shot { margin: 0; }
.mod-shot img {
  display: block;
  width: 100%;
  height: auto;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--white);
  box-shadow: var(--shadow-sm);
}
.mod-shot figcaption { margin-top: 11px; color: var(--muted); font-size: .82rem; }

/* The first screen carries the argument, so it gets the room; the other two
   sit side by side beneath it. */
@media (min-width: 861px) {
  .mod-screens { grid-template-columns: 1fr 1fr; }
  .mod-shot:first-child { grid-column: 1 / -1; }
  .mod-shot:first-child img { max-width: 760px; margin-inline: auto; }
}

.mod-code-list { max-width: 78ch; margin: 0; padding: 0; list-style: none; }
.mod-code-list li {
  padding: 17px 0;
  border-bottom: 1px solid var(--line);
  color: var(--muted);
  font-size: .87rem;
}
.mod-code-list b { color: var(--ink); }
.mod-code-list code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: .8em;
}

.mod-releases { max-width: 78ch; margin: 0; padding: 0; list-style: none; }
.mod-releases > li { padding: 20px 0; border-bottom: 1px solid var(--line); }
.mod-release-head { display: flex; flex-wrap: wrap; gap: 11px; align-items: baseline; }
.mod-release-head strong { font-size: 1rem; }
.mod-release-head time { color: var(--quiet); font-size: .78rem; }
.mod-releases > li > ul { margin: 9px 0 0; padding-left: 19px; }
.mod-releases > li > ul li { margin-top: 5px; color: var(--muted); font-size: .85rem; }

.mod-faq-more { margin: 22px 0 0; color: var(--muted); font-size: .84rem; }

/* User guide — a Read surface: one column, generous measure. */
.mod-manual { max-width: 74ch; padding-block: 66px 84px; }
.mod-manual-trail { color: var(--quiet); font-size: .78rem; }
.mod-manual h1 {
  margin: 10px 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.9rem, 4vw, 2.7rem);
  font-weight: 620;
  line-height: 1.1;
  letter-spacing: -0.02em;
}
.mod-manual .lede { margin-top: 16px; }
.mod-manual-body { margin-top: 40px; }
.mod-manual-body h2 {
  margin: 46px 0 0;
  padding-top: 20px;
  border-top: 1px solid var(--line);
  font-size: 1.35rem;
}
.mod-manual-body h3 { margin: 32px 0 0; font-size: 1.02rem; }
.mod-manual-body p,
.mod-manual-body li { color: var(--muted); font-size: .9rem; line-height: 1.65; }
.mod-manual-body p { margin: 14px 0 0; }
.mod-manual-body ul,
.mod-manual-body ol { margin: 14px 0 0; padding-left: 21px; }
.mod-manual-body li { margin-top: 7px; }
.mod-manual-body strong { color: var(--ink); }
.mod-manual-body code {
  padding: 1px 5px;
  border-radius: 4px;
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: .82em;
}
.mod-manual-body pre {
  overflow-x: auto;
  margin: 18px 0 0;
  padding: 15px 17px;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius-sm);
  background: var(--surface);
}
.mod-manual-body pre code { padding: 0; background: none; font-size: .8rem; line-height: 1.6; }
.mod-manual-body table { width: 100%; margin: 18px 0 0; border-collapse: collapse; font-size: .84rem; }
.mod-manual-body th,
.mod-manual-body td { padding: 9px 12px; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.mod-manual-body th { background: var(--surface); color: var(--ink); }
.mod-manual-body td { color: var(--muted); }
/* The guide separates sections with `---` and with headings; rendering both
   stacks two rules on top of each other, so the heading's rule wins. */
.mod-manual-body hr { display: none; }
.mod-manual-back { margin-top: 44px; font-size: .85rem; }

@media (max-width: 860px) {
  .mod-manual-body { overflow-x: auto; }
  .mod-hero { padding-block: 60px 48px; }
  .sov-layout { grid-template-columns: 1fr; gap: 34px; }
  .mod-features li { grid-template-columns: 1fr; gap: 6px; }
  .mod-features .tier-tag { justify-self: start; }
  .sov-figure { overflow-x: auto; }
}