/* Carried-over pages
   Pages imported from the live site by tools/site/import_live_pages.py keep their original
   markup and class names (pageHero, sectionTitle, priceGrid, ag-card, ...). This sheet maps
   that vocabulary onto the design system, so the copy stays verbatim while the visual layer
   matches the rebuilt pages. Every value comes from tokens.css; scope is .carry only.
   Spec: DESIGN.md. */

/* ---- Sections and containers ---------------------------------------------------------- */
.carry > section { padding-top: var(--space-64); padding-bottom: var(--space-64); }
.carry > section:first-child { padding-top: var(--space-64); padding-bottom: var(--space-48); }
.carry > section.white, .carry > section.alt { background: var(--surface-raised); border-block: 1px solid var(--line); }
.carry > section.dark { background: var(--ink-surface); color: var(--ink-text); }
.carry .ag-container, .carry .ref-container {
  max-width: var(--container); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter);
}

/* Decoration that only made sense with the old stylesheet */
.carry [class*="hero-bg"], .carry [class*="hero-mesh"], .carry [class*="hero-mark"],
.carry .ag-orb, .carry .ref-orb, .carry [class*="cta-ring"], .carry .ag-float { display: none; }

/* ---- Type ------------------------------------------------------------------------------ */
.carry h1 {
  margin: var(--space-16) 0 0; max-width: 900px;
  font-size: var(--type-display-xl-size); line-height: var(--type-display-xl-line);
  letter-spacing: var(--type-display-xl-tracking);
}
.carry h1 em, .carry h2 em { font-style: normal; color: var(--dawn-text); }
.carry h2 {
  margin: var(--space-48) 0 0;
  font-size: var(--type-heading-2-size); line-height: var(--type-heading-2-line);
  letter-spacing: var(--type-heading-2-tracking);
}
.carry h3 {
  margin: var(--space-24) 0 0;
  font-size: var(--type-heading-3-size); line-height: var(--type-heading-3-line);
  letter-spacing: var(--type-heading-3-tracking);
}
.carry h4 { margin: var(--space-20) 0 0; font-size: var(--type-body-lg-size); }
.carry :is(h2, h3, h4):first-child { margin-top: 0; }
.carry p, .carry ul, .carry ol { margin: var(--space-12) 0 0; }
.carry li + li { margin-top: var(--space-8); }
.carry ul, .carry ol { padding-left: 1.25em; }
.carry strong, .carry b { font-weight: 600; }
.carry small { font-size: var(--type-small-size); color: var(--ink-muted); }
.carry hr { border: 0; border-top: 1px solid var(--line); margin: var(--space-32) 0; }

/* Hero: the first section of every carried page */
.carry > section:first-child > :is(.wrap, .ag-container, .ref-container) > p,
.carry > section:first-child p:is(.ag-lede, .ref-lede, .authorLead) {
  margin-top: var(--space-24); max-width: var(--measure-narrow);
  font-size: var(--type-lead-size); line-height: var(--type-lead-line); color: var(--ink-muted);
}
.carry :is([class*="HeroGrid"], [class*="hero-grid"]) {
  display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); gap: var(--space-48); align-items: center;
}

/* Section heads */
.carry :is(.sectionTitle, .ag-head, .ref-section-head, .platformHead) { max-width: 760px; margin-bottom: var(--space-32); }
.carry :is(.sectionLead, .ag-copy, .ag-lede, .ref-lede, .planCopy, .authorLead) { color: var(--ink-muted); }

/* Eyebrows and kickers */
.carry :is(.kicker, .ag-kicker, .ag-eyebrow, .eyebrow, .ref-kicker, .ref-eyebrow, .authorEyebrow, .miniLabel, .ag-panel-label, .ag-console-label, .docTocTitle) {
  display: inline-flex; align-items: center; gap: var(--space-8);
  font-family: var(--font-text); font-size: var(--type-eyebrow-size); line-height: var(--type-eyebrow-line);
  font-weight: var(--type-eyebrow-weight); letter-spacing: var(--type-eyebrow-tracking);
  text-transform: uppercase; color: var(--dawn-text);
}
.carry :is(.ag-eyebrow, .ag-kicker) i { display: none; }

/* Breadcrumbs */
.carry :is(.ag-crumb, .authorCrumb, .crumbs) {
  display: flex; flex-wrap: wrap; gap: var(--space-8); margin-bottom: var(--space-16);
  font-size: var(--type-small-size); color: var(--ink-muted);
}
.carry :is(.ag-crumb, .authorCrumb, .crumbs) a { color: var(--ink-muted); }

/* ---- Grids ----------------------------------------------------------------------------- */
.carry :is([class*="Grid"], [class*="grid"], .split, .ag-split, .steps, .ref-steps, .stack, .productStrip,
           .cards3, .ag-proposals, .ref-benefits, .planStrip, .roadmap, .capflow, .ag-strip-inner):not([class*="HeroGrid"]):not([class*="hero-grid"]) {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr));
  gap: var(--space-20); margin-top: var(--space-24);
}
.carry :is(.ag-grid-4, .appsGrid, .storegrid) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 220px), 1fr)); }
.carry :is(.split, .ag-split) { grid-template-columns: repeat(auto-fit, minmax(min(100%, 380px), 1fr)); gap: var(--space-40); align-items: start; }
.carry .priceGrid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)); align-items: stretch; }

/* ---- Cards ----------------------------------------------------------------------------- */
.carry :is([class*="Card"], [class*="card"], [class*="Box"], .ag-panel, .ag-proposal, .ag-step, .ag-scenario,
           .step, .stackItem, .mapItem, .focusItem, .methodStep, .ref-step, .ref-faq-item, .safetyItem, .trustTile,
           .feature, .ref-benefit, .ref-calc, .ref-commission, .appProduct, details):not([class*="Grid"]):not([class*="grid"]):not([class*="Body"]):not([class*="Meta"]):not([class*="Card"] [class*="Card"]) {
  background: var(--surface-raised); border: 1px solid var(--line); border-radius: var(--radius-lg);
  padding: var(--space-24); box-shadow: var(--shadow-card); min-width: 0;
}
.carry :is([class*="Grid"], [class*="grid"]) > * { margin-top: 0; }
.carry .contentCard, .carry .policy, .carry .docBody { max-width: var(--measure); }
.carry .legalDoc > * { max-width: var(--measure); }
.carry .contentCard { padding: var(--space-40); }

/* CTA panels: ink, like the rebuilt pages' cta-band */
.carry :is(.ctaBox, .ag-cta-panel, .ref-cta-panel, .authorCtaBox, .finishBox) {
  background: var(--ink-surface); color: var(--ink-text); border-color: var(--ink-line); padding: var(--space-48);
  border-radius: var(--radius-xl);
}
.carry :is(.ctaBox, .ag-cta-panel, .ref-cta-panel, .authorCtaBox, .finishBox) :is(p, small, li) { color: var(--ink-muted-text); }
.carry :is(.ctaBox, .ag-cta-panel, .ref-cta-panel, .authorCtaBox, .finishBox) :is(.kicker, .ag-kicker, .ref-kicker) { color: var(--ink-dawn-text); }
.carry :is(.ctaBox, .ag-cta-panel, .ref-cta-panel, .authorCtaBox, .finishBox) a:not([class*="btn"]) { color: var(--ink-dawn-text); }

/* Mock product consoles on the specialist pages */
.carry .ag-console {
  background: var(--ink-surface); color: var(--ink-text); border-radius: var(--radius-xl); padding: var(--space-20);
  box-shadow: var(--shadow-pop); font-size: var(--type-small-size);
}
.carry .ag-console :is(p, span, small) { color: var(--ink-muted-text); }
.carry .ag-console :is(b, strong) { color: var(--ink-text); }
.carry .ag-console-side { display: none; }
.carry .ag-signal { display: grid; gap: 2px; padding: var(--space-12) 0; border-top: 1px solid var(--ink-line); }
.carry .ag-signal > span { font-size: var(--type-caption-size); text-transform: uppercase; letter-spacing: var(--type-eyebrow-tracking); }
.carry .ag-signal > em { font-size: var(--type-caption-size); color: var(--ink-dawn-text); font-style: normal; }
.carry .ag-signal.verified > em { color: var(--ink-approve); }
.carry .ag-console-foot { display: flex; flex-wrap: wrap; gap: var(--space-8); padding-top: var(--space-12); border-top: 1px solid var(--ink-line); }
.carry .ag-console-foot > span { padding: 2px 10px; border-radius: var(--radius-pill); background: var(--ink-raised); }
.carry .ag-console-bar { display: flex; gap: var(--space-8); margin-bottom: var(--space-12); color: var(--ink-muted-text); }
.carry .ag-console :is(.ag-proposal, .ag-panel) { background: var(--ink-raised); border-color: var(--ink-line); box-shadow: none; color: var(--ink-text); }

/* ---- Buttons and actions --------------------------------------------------------------- */
.carry :is(.heroActions, .ag-actions, .ag-cta-actions, .planActions, .authorActions, .ref-actions, .ref-cta-actions, .actions) {
  display: flex; flex-wrap: wrap; gap: var(--space-12); margin-top: var(--space-32);
}
.carry :is(.btn, .ag-btn, .ref-btn) {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--space-8);
  min-height: 52px; padding: 0 26px; border-radius: var(--radius-pill);
  font-family: var(--font-text); font-size: var(--type-body-size); font-weight: 600; text-decoration: none;
  background: transparent; color: var(--ink); border: 1.5px solid var(--line-strong);
  transition: background-color var(--motion-instant) var(--ease-standard), border-color var(--motion-instant) var(--ease-standard);
}
.carry :is(.btn, .ag-btn, .ref-btn) { white-space: nowrap; }
.carry :is(.btn, .ag-btn, .ref-btn) svg { width: 18px; height: 18px; flex: none; }
.carry :is(.btn, .ag-btn, .ref-btn):hover { border-color: var(--ink); color: var(--ink); }
.carry :is(.btn, .ag-btn, .ref-btn).primary { background: var(--dawn); color: var(--on-dawn); border-color: var(--dawn); }
.carry :is(.btn, .ag-btn, .ref-btn).primary:hover { background: var(--dawn-hover); border-color: var(--dawn-hover); color: var(--on-dawn); }
.carry :is(.ctaBox, .ag-cta-panel, .ref-cta-panel, .authorCtaBox, .finishBox) :is(.btn, .ag-btn, .ref-btn):not(.primary) { color: var(--ink-text); border-color: var(--ink-line-strong); }
.carry :is(.ctaBox, .ag-cta-panel, .ref-cta-panel, .authorCtaBox, .finishBox) :is(.btn, .ag-btn, .ref-btn).primary { background: var(--ink-dawn); border-color: var(--ink-dawn); }
.carry :is(.ag-textlink, .arrow, .ag-card-arrow) { font-weight: 600; text-decoration: none; }

/* ---- Labels, badges, chips ------------------------------------------------------------- */
.carry :is(.badge, .planBadge, .ag-status, .ag-chip, .channelPill, .platformTag, .problemStatus, .trustChip, .pill,
           .status, .ref-badge, .articleType, .carry-brand, .channelRow > span, .trustRow > span, .ag-micro > span,
           .authorTags > *, .roleChips > *, .ag-chips > *) {
  display: inline-flex; align-items: center; gap: 6px; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--surface-sunken); color: var(--ink); font-size: var(--type-small-size); line-height: 1.4;
  font-weight: 500; white-space: nowrap; border: 0; box-shadow: none;
}
.carry :is(.channelRow, .trustRow, .ag-micro, .authorTags, .roleChips, .ag-chips, .problemHeroMeta, .platformRow) {
  display: flex; flex-wrap: wrap; gap: var(--space-8); margin-top: var(--space-20);
}
.carry :is(.ag-status, .planBadge, .badge).dev, .carry .pending { background: var(--status-pending-soft); color: var(--status-pending-text); }
.carry :is(.ag-status, .planBadge, .badge, .problemStatus).verified, .carry .planBadge.green { background: var(--status-verified-soft); color: var(--approve); }
.carry .ag-status i { display: none; }

/* ---- Pricing --------------------------------------------------------------------------- */
.carry .planCard { display: flex; flex-direction: column; padding: var(--space-32); }
.carry .planCard.primary { border: 2px solid var(--dawn); box-shadow: var(--shadow-soft); }
.carry .planCard > :is(.planBadge, .badge) { align-self: flex-start; }
.carry .planTitle { margin-top: var(--space-16); }
.carry .price {
  margin-top: var(--space-20); font-family: var(--font-display); font-weight: 600;
  font-size: var(--type-stat-size); line-height: var(--type-stat-line); letter-spacing: var(--type-stat-tracking);
}
.carry .price small { font-family: var(--font-text); font-size: var(--type-body-size); letter-spacing: 0; }
.carry .price.request { font-size: var(--type-heading-2-size); }
.carry .priceLine { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-16); margin-top: var(--space-24); }
.carry .priceLine > div { display: flex; flex-direction: column; }
.carry .priceLine strong { font-family: var(--font-display); font-size: var(--type-heading-3-size); line-height: var(--type-heading-3-line); }
.carry .appTop { display: flex; align-items: center; gap: var(--space-12); }
.carry .appTop .appIcon { margin-bottom: 0; font-weight: 600; }
.carry .annual, .carry .planNote, .carry .appFootnote { margin-top: var(--space-8); color: var(--ink-muted); font-size: var(--type-small-size); }
.carry .planActions { margin-top: auto; padding-top: var(--space-24); }

/* Feature and rule lists: checks instead of bullets */
.carry :is(.featureList, .ruleList, .ag-list, .capList, .ref-benefit-points) { list-style: none; padding-left: 0; }
.carry :is(.featureList, .ruleList, .ag-list, .capList, .ref-benefit-points) > li { position: relative; padding-left: 28px; }
.carry :is(.featureList, .ruleList, .ag-list, .capList, .ref-benefit-points) > li::before {
  content: ""; position: absolute; left: 0; top: 0.3em; width: 16px; height: 16px; border-radius: 50%;
  background: var(--dawn-soft); box-shadow: inset 0 0 0 5px var(--dawn-soft), inset 0 0 0 16px var(--dawn-strong);
}

/* ---- Steps and numbers ----------------------------------------------------------------- */
.carry :is(.num, .stepNum, .ref-step-num) {
  display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%;
  background: var(--ink); color: var(--ink-text); font-family: var(--font-mono); font-size: var(--type-mono-sm-size);
  margin-bottom: var(--space-12);
}

/* ---- Icons and images ------------------------------------------------------------------ */
/* Every carried icon is a 24x24 outline glyph (the live site drew them with stroke, not fill) */
.carry svg {
  display: inline-block; flex: none; width: 1.15em; height: 1.15em; vertical-align: -0.2em;
  fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round;
}
.carry :is([class*="icon"], [class*="Icon"], .ag-strip-icon) svg { width: 22px; height: 22px; }
.carry .ref-microtrust { display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-16); margin-top: var(--space-20); font-size: var(--type-small-size); color: var(--ink-muted); }
.carry .ref-microtrust span { display: inline-flex; align-items: center; gap: 6px; }
.carry .ref-microtrust svg { color: var(--approve); }
.carry :is([class*="icon"], [class*="Icon"], .ag-strip-icon) {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: var(--radius-md);
  background: var(--dawn-soft); color: var(--dawn-strong); margin-bottom: var(--space-12);
}
.carry :is(.ag-strip-item) { display: flex; gap: var(--space-12); align-items: center; }
.carry :is(.ag-strip-item) .ag-strip-icon { margin-bottom: 0; flex: none; }
.carry img { height: auto; border-radius: var(--radius-lg); }
.carry .authorPortraitMeta { display: flex; justify-content: space-between; gap: var(--space-12); margin-top: var(--space-12); font-size: var(--type-small-size); }
.carry .authorPortraitMeta span { color: var(--ink-muted); }
.carry .carry-brand { background: var(--surface-raised); border: 1px solid var(--line); }

/* ---- Tables, code, FAQ ----------------------------------------------------------------- */
.carry table { width: 100%; border-collapse: collapse; margin-top: var(--space-24); font-size: var(--type-body-sm-size); }
.carry :is(th, td) { text-align: left; vertical-align: top; padding: var(--space-12) var(--space-16); border-bottom: 1px solid var(--line); }
.carry th { font-weight: 600; background: var(--surface-sunken); }
.carry .docTableWrap, .carry .projectMatrix, .carry .platformMatrix, .carry .matrix { overflow-x: auto; }
.carry code { font-family: var(--font-mono); font-size: 0.9em; background: var(--surface-sunken); padding: 2px 6px; border-radius: var(--radius-sm); }
.carry pre, .carry .codeSample { overflow-x: auto; background: var(--ink-surface); color: var(--ink-text); padding: var(--space-20); border-radius: var(--radius-lg); }
.carry pre code { background: none; padding: 0; color: inherit; }
.carry details { margin-top: var(--space-12); }
.carry summary { cursor: pointer; font-weight: 600; }
.carry details[open] summary { margin-bottom: var(--space-8); }

/* ---- Documents: legal, security, policy ------------------------------------------------ */
.carry .docShell { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: var(--space-48); align-items: start; }
.carry :is(.docAside, .docToc) { position: sticky; top: calc(var(--nav-height) + 2 * var(--nav-offset)); font-size: var(--type-small-size); }
.carry .docTocList { display: flex; flex-direction: column; gap: var(--space-8); margin-top: var(--space-12); }
.carry .docTocList a { color: var(--ink-muted); text-decoration: none; }
.carry .summary { background: var(--dawn-soft); border-radius: var(--radius-lg); padding: var(--space-20); }
.carry :is(.legalDoc, .docBody, .policy) h2 { margin-top: var(--space-40); }

/* Links inside running text */
.carry :is(p, li, td) a { text-underline-offset: 3px; }
.carry :is(.backlinks, .problemLinks, .docLinks, .trustLinks, .policyLinks, .links, .ag-related) {
  display: flex; flex-wrap: wrap; gap: var(--space-8) var(--space-20); margin-top: var(--space-20);
}
.carry .problemLinks { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 240px), 1fr)); gap: var(--space-12); }
.carry .problemLinks > a {
  display: block; padding: var(--space-16) var(--space-20); border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--surface-raised); font-weight: 600; text-decoration: none;
}
.carry :is(.problemLinks, .docLinks, .links) a small { display: block; margin-top: 4px; font-weight: 400; color: var(--ink-muted); }

/* ---- Responsive ------------------------------------------------------------------------ */
@media (max-width: 1040px) {
  .carry :is([class*="HeroGrid"], [class*="hero-grid"]), .carry .docShell { grid-template-columns: minmax(0, 1fr); gap: var(--space-32); }
  .carry :is(.docAside, .docToc) { position: static; }
}
@media (max-width: 520px) {
  .carry > section { padding-top: var(--space-48); padding-bottom: var(--space-48); }
  .carry > section:first-child { padding-top: var(--space-40); }
  .carry .contentCard, .carry :is(.ctaBox, .ag-cta-panel, .ref-cta-panel, .authorCtaBox, .finishBox) { padding: var(--space-24); }
  .carry :is(.heroActions, .ag-actions, .ag-cta-actions, .planActions, .authorActions, .ref-actions) > * { flex: 1 1 100%; }
  .carry :is(.badge, .planBadge, .ag-status, .ag-chip, .channelPill, .carry-brand) { white-space: normal; }
  .carry :is(.btn, .ag-btn, .ref-btn) { white-space: normal; text-align: center; padding-block: var(--space-12); }
  .carry table { font-size: var(--type-small-size); }
  .carry :is(th, td) { padding: var(--space-8); }
}

/* Official marks inside carried copy; a single plan card sits centred */
.carry img.brand-logo { width: 16px; height: 16px; border-radius: 0; margin-right: 6px; }
.carry :is(.carry-brand, .channelRow > span, .trustRow > span, .channelPill) img.brand-logo { margin-right: 0; }
.carry .priceGrid:has(> .planCard:only-child) { grid-template-columns: minmax(0, 600px); justify-content: center; }