/* ==========================================================================
   adoe.ai — marketing layout. Builds on the design system
   (assets/ds/tokens.css + components.css); site-only patterns live here.
   Left-aligned everywhere except the final CTA band. Rules, rows and the
   timeline rail separate content; no grid of identical cards.
   ========================================================================== */

.site-header .brand-mark, .site-footer .brand-mark { width: 22px; height: 22px; }
.footer-tagline { margin-top: var(--s-3); max-width: 34ch; }

/* ---------- section scaffolding ---------- */
h1, h2, h3 { text-wrap: balance; }
.lead, .row-item p, .tl-detail { text-wrap: pretty; }
.band { padding-block: var(--section-pad); border-top: 1px solid var(--rule); }
.band--tight { padding-block: var(--s-7); }
.band--mist { background: var(--mist); }
.section-head { max-width: 720px; margin-bottom: var(--s-7); }
.section-head h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.section-head .lead { margin-top: var(--s-3); }
sup { font-size: 0.7em; line-height: 0; vertical-align: super; }
sup a { color: var(--cobalt); font-weight: var(--fw-medium); }
.lead { font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); color: var(--slate); max-width: var(--measure); }
.more-link { display: inline-flex; align-items: center; gap: var(--s-2); margin-top: var(--s-5); font-weight: var(--fw-medium); }
.split { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); }
.split > .split-aside { grid-column: span 4; }
.split > .split-main { grid-column: span 8; }
@media (max-width: 959px) { .split > .split-aside, .split > .split-main { grid-column: 1 / -1; } }

/* ---------- hero ---------- */
.hero { padding-block: var(--s-8) var(--s-9); }
.hero-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: center; }
.hero-copy { grid-column: span 6; }
.hero-visual { grid-column: span 6; }
.hero h1 { font-size: var(--fs-display); line-height: var(--lh-display); letter-spacing: var(--tracking-display); max-width: 18ch; }
.hero .lead { margin-top: var(--s-5); max-width: 52ch; }
.hero-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); margin-top: var(--s-6); }
.hero-note { margin-top: var(--s-5); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
@media (max-width: 959px) {
  .hero { padding-block: var(--s-7) var(--s-8); }
  .hero-copy, .hero-visual { grid-column: 1 / -1; }
  .hero-visual { margin-top: var(--s-6); }
}

/* ---------- works with ---------- */
.works-with { padding-block: var(--s-7); border-top: 1px solid var(--rule); text-align: center; }
.works-with .logo-row { justify-content: center; }
.works-with h2 { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-medium); color: var(--slate); margin-bottom: var(--s-4); }
.logo-row li { font-size: var(--fs-body); }
.logo-row .logo { width: 24px; height: 24px; }

/* ---------- rows of items separated by rules (outcomes, safety, capabilities) ---------- */
.rows { display: grid; gap: 0; border-top: 1px solid var(--rule); }
.rows--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); }
.rows--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-7); }
.row-item { padding: var(--s-5) 0 var(--s-6); border-bottom: 1px solid var(--rule); }
.row-item > .icon { width: 24px; height: 24px; color: var(--ink); margin-bottom: var(--s-3); }
.row-item h3 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.row-item p { margin-top: var(--s-2); color: var(--slate); max-width: 52ch; }
.row-item .row-meta { margin-top: var(--s-3); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--slate); }
.row-item sup a { text-decoration: none; }
@media (max-width: 959px) { .rows--3, .rows--2 { grid-template-columns: 1fr; } }
.footnotes { margin-top: var(--s-5); padding-top: var(--s-3); font-size: var(--fs-caption); line-height: var(--lh-caption); color: var(--slate); max-width: var(--measure); }
.footnotes ol { margin: 0; padding-left: var(--s-4); }
.footnotes li + li { margin-top: var(--s-1); }

/* ---------- how-it-works rail with expandable groups ---------- */
.tl--wide .stage-list { margin: var(--s-3) 0 0; padding: 0; list-style: none; display: grid; gap: var(--s-2); }
.tl--wide .stage-list li { position: relative; padding-left: var(--s-5); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
.tl--wide .stage-list li::before { content: ""; position: absolute; left: 4px; top: 8px; width: 6px; height: 6px; border-radius: 50%; background: var(--rule-strong); }
.tl--wide .stage-list b { color: var(--ink); font-weight: var(--fw-medium); }
.tl--wide .tl-more > summary { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--cobalt); }
.tl--wide .tl-more > summary:hover { color: var(--cobalt-hover); }

/* ---------- final CTA band (the one centred block) ---------- */
.cta-band { padding-block: var(--s-9); border-top: 1px solid var(--rule); background: var(--mist); text-align: center; }
.cta-band h2 { font-size: var(--fs-h1); line-height: var(--lh-h1); max-width: 22ch; margin-inline: auto; }
.cta-band p { margin: var(--s-4) auto 0; max-width: 56ch; color: var(--slate); font-size: var(--fs-body-lg); line-height: var(--lh-body-lg); }
.cta-band .cluster { justify-content: center; margin-top: var(--s-6); }

/* ---------- inner page hero ---------- */
.page-hero { padding-block: var(--s-8) var(--s-7); }
.page-hero h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); max-width: 24ch; }
.page-hero .lead { margin-top: var(--s-4); }
.page-hero .hero-actions { margin-top: var(--s-5); }
.crumbs { margin-bottom: var(--s-4); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
.crumbs a { color: var(--slate); }
.crumbs a:hover { color: var(--ink); }

/* ---------- stage table (how it works: input / action / safety / result) ---------- */
.stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); padding-block: var(--s-6); border-top: 1px solid var(--rule); }
.stage-head { grid-column: span 4; }
.stage-head .stage-num { font-family: var(--font-mono); font-size: var(--fs-mono); color: var(--slate); }
.stage-head h2 { margin-top: var(--s-2); font-size: var(--fs-h2); line-height: var(--lh-h2); }
.stage-head p { margin-top: var(--s-3); color: var(--slate); }
.stage-body { grid-column: span 8; }
.stage-body .dl { font-size: var(--fs-body); line-height: var(--lh-body); grid-template-columns: 112px minmax(0, 1fr); row-gap: var(--s-3); }
.stage-body .dl dt { font-weight: var(--fw-medium); }
.stage-body .dl dd ul { margin: 0; padding-left: var(--s-5); }
@media (max-width: 959px) { .stage-head, .stage-body { grid-column: 1 / -1; } }

/* ---------- glossary ---------- */
.glossary { display: grid; grid-template-columns: max-content minmax(0, 1fr); gap: var(--s-3) var(--s-6); margin: 0; }
.glossary dt { font-weight: var(--fw-semibold); }
.glossary dd { margin: 0; color: var(--slate); max-width: var(--measure); }
@media (max-width: 559px) { .glossary { grid-template-columns: 1fr; gap: var(--s-1); } .glossary dd + dt { margin-top: var(--s-3); } }

/* ---------- trust centre ---------- */
.toc { position: sticky; top: calc(var(--header-h) + var(--s-5)); }
.toc h2 { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); margin-bottom: var(--s-3); }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s-2); border-left: 1px solid var(--rule); }
.toc a { display: block; padding-left: var(--s-3); margin-left: -1px; border-left: 2px solid transparent; color: var(--slate); text-decoration: none; font-size: var(--fs-small); line-height: var(--lh-small); }
.toc a:hover { color: var(--ink); border-left-color: var(--rule-strong); }
@media (max-width: 959px) { .toc { position: static; } }
.status-list { display: grid; gap: 0; margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--rule); }
.status-list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.status-list li > .icon { margin-top: 2px; }
.status-list li:last-child { border-bottom: 0; }
.status-list b { font-weight: var(--fw-semibold); color: var(--ink); }
.status-list p { margin: var(--s-1) 0 0; color: var(--slate); }
.icon-ok { color: var(--ok); } .icon-warn { color: var(--warn); } .icon-crit { color: var(--crit); } .icon-info { color: var(--slate); }

/* ---------- long-form prose (docs, blog, legal, trust centre) ---------- */
.prose { max-width: 760px; }
.prose > * + * { margin-top: var(--s-4); }
.prose h2 { margin-top: var(--s-7); padding-top: var(--s-5); border-top: 1px solid var(--rule); font-size: var(--fs-h2); line-height: var(--lh-h2); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.prose h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.prose h3 { margin-top: var(--s-6); font-size: var(--fs-h3); line-height: var(--lh-h3); scroll-margin-top: calc(var(--header-h) + var(--s-4)); }
.prose h4 { margin-top: var(--s-5); font-size: var(--fs-body); line-height: var(--lh-body); }
.prose p, .prose li { color: var(--ink); }
.prose p { margin-bottom: 0; }
.prose ul, .prose ol { margin-bottom: 0; }
.prose li + li { margin-top: var(--s-2); }
.prose a:not(.btn) { color: var(--cobalt); text-decoration: underline; text-underline-offset: 3px; }
.prose a:not(.btn):hover { color: var(--cobalt-hover); }
.prose code:not(pre code) { font-family: var(--font-mono); font-size: 0.875em; padding: 0 4px; border: 1px solid var(--rule); border-radius: var(--r-sm); background: var(--mist); overflow-wrap: anywhere; }
.prose pre { margin: var(--s-4) 0 0; padding: var(--s-4); overflow: auto; background: var(--mist); border: 1px solid var(--rule); border-radius: var(--r-lg); font-family: var(--font-mono); font-size: var(--fs-mono-table); line-height: var(--lh-mono-table); }
.prose pre code { font-family: inherit; font-size: inherit; }
.prose table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); line-height: var(--lh-small); }
.prose .table-scroll { overflow-x: auto; }
.prose th, .prose td { padding: var(--s-2) var(--s-3); border-bottom: 1px solid var(--rule); text-align: left; vertical-align: top; }
.prose th { background: var(--mist); font-weight: var(--fw-medium); color: var(--slate); }
.prose blockquote { margin: var(--s-4) 0 0; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--rule-strong); color: var(--slate); }
.prose hr { margin: var(--s-6) 0; }
.callout { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-3); padding: var(--s-4); border: 1px solid var(--rule); border-left: 3px solid var(--tone, var(--rule-strong)); border-radius: var(--r-lg); background: var(--paper); font-size: var(--fs-small); line-height: var(--lh-small); }
.callout > .icon { color: var(--tone, var(--slate)); }
.callout p { margin: 0; color: var(--ink); }
.callout p + p { margin-top: var(--s-2); }
.todo { padding: 0 4px; border-radius: var(--r-sm); background: var(--warn-tint); color: var(--warn); font-family: var(--font-mono); font-size: 0.8125em; }

/* ---------- docs layout ---------- */
.docs-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: var(--s-8); padding-block: var(--s-7) var(--s-9); }
.docs-nav h2 { font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-semibold); margin-bottom: var(--s-3); }
.docs-nav ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.docs-nav a { display: block; padding: 6px 10px; border-radius: var(--r-md); color: var(--slate); text-decoration: none; font-size: var(--fs-small); line-height: var(--lh-small); }
.docs-nav a:hover { background: var(--mist); color: var(--ink); }
.docs-nav a[aria-current="page"] { background: var(--mist); color: var(--ink); font-weight: var(--fw-medium); }
.docs-pager { display: flex; justify-content: space-between; gap: var(--s-4); margin-top: var(--s-8); padding-top: var(--s-5); border-top: 1px solid var(--rule); }
@media (max-width: 959px) { .docs-layout { grid-template-columns: minmax(0, 1fr); gap: var(--s-6); } }

/* ---------- pricing ---------- */
.plans { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border: 1px solid var(--rule); border-radius: var(--r-lg); }
.plan { padding: var(--s-6) var(--s-5); display: flex; flex-direction: column; }
.plan + .plan { border-left: 1px solid var(--rule); }
.plan h2 { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.plan .price { margin-top: var(--s-3); font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); }
.plan .price-note { margin-top: var(--s-1); font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
.plan > p { margin-top: var(--s-4); color: var(--slate); }
.plan > .price { color: var(--ink); }
.plan > .price-note { margin-top: var(--s-1); }
.plan ul { margin: var(--s-5) 0 var(--s-6); padding: 0; list-style: none; display: grid; gap: var(--s-3); }
.plan li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: var(--s-2); font-size: var(--fs-small); line-height: var(--lh-small); }
.plan li .icon { width: 18px; height: 18px; color: var(--ok); margin-top: 1px; }
.plan .btn { margin-top: auto; align-self: flex-start; }
@media (max-width: 959px) { .plans { grid-template-columns: 1fr; } .plan + .plan { border-left: 0; border-top: 1px solid var(--rule); } }
.faq { border-top: 1px solid var(--rule); }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); padding: var(--s-4) 0; cursor: pointer; list-style: none; font-weight: var(--fw-medium); }
.faq summary::-webkit-details-marker { display: none; }
.faq summary .icon { transition: transform var(--dur-fast) var(--ease-out); color: var(--slate); }
.faq details[open] summary .icon { transform: rotate(180deg); }
.faq .faq-body { padding: 0 0 var(--s-5); color: var(--slate); max-width: var(--measure); }

/* ---------- ROI calculator ---------- */
.calc { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.calc-inputs { grid-column: span 7; }
.calc-results { grid-column: span 5; position: sticky; top: calc(var(--header-h) + var(--s-5)); }
.calc-inputs .field + .field { margin-top: var(--s-5); }
.calc-inputs fieldset { margin: var(--s-6) 0 0; padding: var(--s-5) 0 0; border: 0; border-top: 1px solid var(--rule); }
.calc-inputs legend { padding: 0; font-weight: var(--fw-semibold); }
.calc-inputs .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-5) var(--s-4); margin-top: var(--s-5); align-items: start; }
.calc-inputs .grid-2 .field { margin-top: 0; }
.input-unit { position: relative; display: flex; align-items: center; }
.input-unit .input { padding-right: 76px; font-variant-numeric: tabular-nums; }
.input-unit .unit { position: absolute; right: 12px; font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); pointer-events: none; }
.result { padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); }
.result:first-child { padding-top: 0; }
.result dt { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
.result dd { margin: var(--s-1) 0 0; font-size: var(--fs-h2); line-height: var(--lh-h2); font-weight: var(--fw-semibold); font-variant-numeric: tabular-nums; }
.result dd small { display: block; font-size: var(--fs-small); line-height: var(--lh-small); font-weight: var(--fw-regular); color: var(--slate); }
@media (max-width: 959px) { .calc-inputs, .calc-results { grid-column: 1 / -1; } .calc-results { position: static; } .calc-inputs .grid-2 { grid-template-columns: 1fr; } }

/* ---------- integrations ---------- */
.int-group + .int-group { margin-top: var(--s-8); }
.int-group h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); }
.int-group > p { margin-top: var(--s-2); color: var(--slate); max-width: var(--measure); }
.int-group .table-card { margin-top: var(--s-5); }
.int-name { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--fw-medium); white-space: nowrap; }
.int-name svg { width: 20px; height: 20px; color: var(--slate); fill: currentColor; flex: none; }
.int-group .table td { vertical-align: top; padding-block: var(--s-3); }
.int-group .table td:first-child { width: 220px; }

/* ---------- contact ---------- */
.contact-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--gutter); align-items: start; }
.contact-copy { grid-column: span 5; }
.contact-form { grid-column: span 7; }
.contact-form .field + .field { margin-top: var(--s-4); }
.contact-form .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-4); }
@media (max-width: 959px) { .contact-copy, .contact-form { grid-column: 1 / -1; } .contact-form .grid-2 { grid-template-columns: 1fr; } }

/* ---------- blog cards (list rows, not boxes) ---------- */
.post-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
.post-list li { padding: var(--s-5) 0; border-bottom: 1px solid var(--rule); }
.post-list .post-meta { font-size: var(--fs-small); line-height: var(--lh-small); color: var(--slate); }
.post-list h2 { margin-top: var(--s-2); font-size: var(--fs-h3); line-height: var(--lh-h3); }
.post-list h2 a { color: var(--ink); text-decoration: none; }
.post-list h2 a:hover { text-decoration: underline; text-underline-offset: 3px; }
.post-list p { margin-top: var(--s-2); color: var(--slate); max-width: var(--measure); }