/*
 * Contentstack Canoe site: home page (/). Owner: page-home (WP-B, UX pass 2026-09-27).
 * Mobile first. Breakpoints: 480, 768, 1024 and 1200 (the hero grid keeps its 1280 and 1600 steps for the mock tiers).
 * Seven sections: 1 hero, 2 two audiences (alt), 3 how it works + report tabs, 4 agents and MCP (alt),
 * 5 pricing teaser, 6 FAQ (alt), 7 final CTA (the only URL form on the page).
 * Shared pieces from site.css (UX plan S1 to S12): .engine-row, .snap-row, .tab-list-fill, .tab-stack, .row-list,
 * .fig-cap, .faq-layout, .actions-stack-xs, .cta-band and the --section-y, --hero-pt/pb and --r-frame tokens.
 */

/* 1. Hero ---------------------------------------------------------------------------------------- */
.home-hero { position: relative; isolation: isolate; overflow-x: clip; padding-block: var(--hero-pt) var(--hero-pb); }
.home-hero-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "cta" "visual"; }
.home-hero-copy { grid-area: copy; min-width: 0; }
.home-hero-copy > * + * { margin-top: 16px; }
.home-hero-copy > .eyebrow + * { margin-top: 14px; }
.home-hero-copy > .eyebrow, .home-agents-copy > .eyebrow { display: flex; width: fit-content; }
.home-hero-title { font-size: var(--fs-h1); max-width: 16ch; }
.home-hero-lead { max-width: 46ch; }
.home-hero-cta { grid-area: cta; margin-top: 24px; min-width: 0; }
.home-hero-cta .hero-note { margin-top: 12px; }
.home-engine-row { margin-top: 10px; }
.home-hero-visual { grid-area: visual; min-width: 0; margin-top: 16px; }
@media (max-width: 767px) { .home-hero { padding-bottom: 24px; } }
/* Keep the four engines on one line down to 360 (they need about 323px with a 10px gap); below that, two even rows */
@media (max-width: 399px) { .home-engine-row { column-gap: 10px; } }
@media (max-width: 359px) { .home-engine-row { display: grid; grid-template-columns: repeat(2, max-content); column-gap: 20px; } }

/* Tablet: centred copy, CTAs and engines, then the wide mock */
@media (min-width: 768px) {
  .home-hero-grid { justify-items: center; text-align: center; }
  .home-hero-copy { max-width: 760px; }
  .home-hero-copy > .eyebrow, .home-hero-title, .home-hero-lead { margin-inline: auto; }
  .home-hero-lead { text-wrap: balance; }
  .home-hero-cta { margin-top: 32px; }
  .home-hero-cta .actions, .home-engine-row { justify-content: center; }
  .home-engine-row { gap: 10px 20px; margin-top: 18px; }
  .home-hero-visual { width: 100%; margin-top: 40px; text-align: left; }
}

/* Desktop: copy left, mock right. The mock column never drops below 560px so it keeps the dashboard layout. */
@media (min-width: 1024px) {
  .home-hero { padding-block: clamp(32px, 3.6vw, 56px) clamp(40px, 4vw, 64px); }
  .home-hero-grid {
    /* The mock picks its layout from its own width. Keep it at 560 to 639px or 720px and up:
       in between, the tablet layout clips the sentiment delta chip. */
    grid-template-columns: minmax(330px, 1fr) minmax(560px, 639px);
    grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". visual" "copy visual" "cta visual" ". visual";
    column-gap: clamp(40px, 4vw, 64px); justify-items: stretch; text-align: left;
  }
  .home-hero-copy { max-width: 540px; }
  .home-hero-copy > .eyebrow, .home-hero-title { max-width: none; margin-inline: 0; }
  .home-hero-lead { margin-inline: 0; text-wrap: pretty; }
  .home-hero-cta .actions, .home-engine-row { justify-content: flex-start; }
  .home-engine-row { gap: 6px 14px; font-size: 13px; }
  .home-engine-row .engine-logo { width: 16px; height: 16px; }
  .home-hero-visual { width: auto; margin-top: 0; align-self: center; }
}
/* 1024 to 1279: the copy column is only about 330px wide beside the mock, so the H1 steps down from --fs-h1 */
@media (min-width: 1024px) and (max-width: 1279px) {
  .home-hero-title { font-size: clamp(38px, 3.8vw, 46px); }
  .home-engine-row { gap: 6px 12px; }
}
@media (min-width: 1280px) {
  .home-hero-grid { grid-template-columns: minmax(330px, 5fr) minmax(720px, 7fr); }
  .home-engine-row { gap: 8px 18px; font-size: 14px; }
  .home-engine-row .engine-logo { width: 18px; height: 18px; }
}
/* Wide screens: let the mock bleed into the right margin (never past it, even with a classic scrollbar) */
@media (min-width: 1600px) {
  .home-hero-visual { margin-right: calc(-1 * clamp(0px, (100vw - var(--maxw)) / 2 - 48px, 220px)); }
}

/* 2. Two audiences: three sourced statistics, a swipe row below 768 ----------------------------- */
.home-stats { --snap-w: 80%; }
.home-stat { padding: 20px; gap: 8px; }
.home-stat .stat-num { font-size: 44px; }
.home-stat .stat-claim { font-size: 15px; line-height: 1.45; }
.home-stat .stat-source { padding-top: 10px; }
.home-stat-to { font-size: .42em; font-weight: 500; letter-spacing: -.01em; color: var(--muted); margin: 0 .22em; vertical-align: .32em; }
@media (min-width: 768px) {
  .home-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
  .home-stat { padding: clamp(20px, 2.4vw, 28px); gap: 10px; }
  .home-stat .stat-num { font-size: clamp(44px, 4.4vw, 56px); }
  .home-stat .stat-source { padding-top: 14px; }
}

/* 3. How it works: four steps, then the report in one tabbed frame ------------------------------- */
.home-steps .step-text { max-width: 34ch; }
@media (max-width: 767px) {
  /* Phones: a 2 x 2 grid of step titles; the one-line texts show from 768 */
  .home-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 16px; }
  .home-steps .step { padding: 52px 0 0; }
  .home-steps .step::before, .home-steps .step-text { display: none; }
  .home-steps .step-title { padding-top: 0; font-size: 16px; line-height: 1.3; }
}
@media (min-width: 768px) {
  .home-steps { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
  .home-steps .step { padding: 56px 0 0; }
  .home-steps .step::before { left: 52px; right: -12px; top: 20px; bottom: auto; width: auto; height: 1px; background: linear-gradient(90deg, var(--line), var(--line-soft)); }
  .home-steps .step:last-child::before { display: none; }
  .home-steps .step-title { padding-top: 0; font-size: 17px; }
  .home-steps .step-text { margin-top: 6px; font-size: 14.5px; }
}

/* Report tabs: every panel sits in the same grid cell (.tab-stack), so the frame is as tall as the tallest
   panel and nothing under it moves when the tab changes. */
.home-report { margin-top: clamp(32px, 4vw, 56px); }
.home-report .tab-list { margin-bottom: 16px; }
.home-report .tab { min-height: 40px; padding: 7px 6px; font-size: 14px; }
.home-report-frames { --panel-display: grid; }
.home-report-panel { display: grid; grid-template-rows: auto 1fr; gap: 12px; min-width: 0; }
.home-report-copy h3 { font-size: 17px; line-height: 1.3; letter-spacing: -.01em; }
.home-report-copy p { display: none; }
.home-media {
  display: grid; align-items: center; padding: 12px;
  background:
    radial-gradient(120% 90% at 100% 0%, var(--accent-soft), transparent 60%),
    radial-gradient(circle at 1px 1px, color-mix(in srgb, var(--ink) 9%, transparent) 1px, transparent 1.5px) 0 0 / 18px 18px,
    var(--bg-2);
}
.home-media > .cm-panel { box-shadow: var(--shadow-lg); }
.home-report-media { min-width: 0; border: 1px solid var(--line); border-radius: var(--r-frame); }
.home-report-media > .cm-panel { align-self: center; }
/* Keep the panels short: only the first recommendation shows its reason and steps */
.home-report .cm-rec + .cm-rec :is(.cm-how, .cm-rwy) { display: none; }
.home-report-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; margin-top: 16px; }
.home-report-audit { display: flex; gap: 10px; align-items: flex-start; max-width: 62ch; color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.home-report-audit .icon { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.home-report-audit strong { color: var(--ink); font-weight: 600; }
@media (min-width: 1200px) { .home-report-audit { max-width: none; } }
@media (max-width: 767px) {
  .home-report .cm-tp > li:nth-child(n+2),
  .home-report .cm-doms > li:nth-child(n+4),
  .home-report .cm-rec:nth-child(n+3),
  .home-report .cm-rec .cm-rwy { display: none; }
  .home-report-all { display: none; }
}
@media (min-width: 768px) {
  .home-report .tab-list { margin-bottom: 24px; }
  .home-report .tab { padding: 8px 18px; font-size: 14.5px; }
  .home-report-panel { gap: 16px; }
  .home-report-copy h3 { font-size: var(--fs-h3); line-height: 1.25; }
  .home-report-copy p { display: block; margin-top: 8px; color: var(--ink-2); }
  .home-report-media { padding: clamp(20px, 2vw, 24px); }
}
/* From 1024 the copy sits beside the frame; the caption lines up under the frame. At 768 to 1023 the copy stays
   above a full-width frame: beside it, the frame is only about 430px wide and the ranking mock truncates names. */
@media (min-width: 1024px) {
  .home-report-frames, .home-report-cap { --report-gap: clamp(32px, 4vw, 56px); }
  .home-report-panel { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: none; gap: var(--report-gap); }
  .home-report-copy { align-self: center; }
  .home-report-copy p { max-width: 40ch; }
  .home-report-cap { margin-left: calc((100% - var(--report-gap)) * 4 / 11 + var(--report-gap)); }
}

/* 4. Agents and MCP ------------------------------------------------------------------------------- */
.home-agents-grid { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-areas: "copy" "visual" "links"; gap: 24px; }
.home-agents-copy { grid-area: copy; min-width: 0; }
.home-agents-copy > * + * { margin-top: 12px; }
.home-agents-copy > .eyebrow + * { margin-top: 14px; }
.home-agents-copy .lead { max-width: 44ch; }
.home-agents-visual { grid-area: visual; display: grid; gap: 16px; align-content: start; min-width: 0; }
.home-agents-links { grid-area: links; display: grid; gap: 20px; min-width: 0; }
.home-agents-links .actions { flex-wrap: nowrap; gap: 8px; }
.home-agents-links .actions .btn { padding-inline: 14px; }
/* Phones: the two doc buttons share the row equally, like the pricing CTA row */
@media (max-width: 767px) { .home-agents-links .actions .btn { flex: 1 1 0; min-width: 0; } }
/* The code block is for desktop readers; phones get the example questions instead */
@media (max-width: 767px) { .home-code { display: none; } }
.home-code pre { font-size: 13px; }
@media (min-width: 1024px) and (max-width: 1199px) { .home-code pre { font-size: 12px; padding-inline: 16px; } }
.home-asks { padding: 16px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--surface); box-shadow: var(--highlight), var(--shadow); }
.home-asks-title { font-size: 13px; font-weight: 500; color: var(--muted); }
.home-asks ul { display: grid; gap: 8px; margin-top: 12px; }
.home-asks li { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 12px; align-items: start; padding: 12px 14px; border-radius: 10px; background: var(--card-2); color: var(--ink); font-size: 15px; line-height: 1.45; }
:root[data-theme="dark"] .home-asks li { background: var(--card); }
.home-asks li .icon { width: 18px; height: 18px; margin-top: 1px; color: var(--accent); }
/* Agent OS: one line, one link */
.home-aos { display: grid; grid-template-columns: 20px minmax(0, 1fr); gap: 10px; align-items: start; padding-top: 16px; border-top: 1px solid var(--line-soft); color: var(--ink-2); font-size: 15px; line-height: 1.5; }
.home-aos .icon { width: 20px; height: 20px; margin-top: 2px; color: var(--accent); }
.home-aos strong { color: var(--ink); font-weight: 600; }
@media (min-width: 1024px) {
  .home-agents-grid {
    grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); grid-template-areas: "copy visual" "links visual";
    align-items: start; column-gap: 64px; row-gap: 28px;
  }
  .home-agents-visual { align-self: center; }
}

/* 5. Pricing teaser: three cards from 768; one list surface with a CTA row below 768 ---------------- */
.home-pricing-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 8px 24px; margin-bottom: clamp(24px, 3.5vw, 48px); }
.home-pricing-head .section-head { margin-bottom: 0; }
.home-plans { display: grid; }
.home-plan { position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
@media (min-width: 768px) {
  .home-plans { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); }
  .home-plan {
    padding: clamp(22px, 2.4vw, 28px); border: 1px solid var(--line); border-radius: var(--r-frame);
    background: var(--surface); box-shadow: var(--highlight), var(--shadow);
  }
  .home-plan-featured { border-color: var(--accent-line); box-shadow: var(--highlight), 0 0 0 1px var(--accent-line), var(--shadow); }
  .home-plan-featured::before {
    content: ""; position: absolute; inset: 0; z-index: 0; border-radius: inherit; pointer-events: none;
    background: radial-gradient(120% 70% at 50% 0%, var(--accent-soft), transparent 70%);
  }
}
/* The cards share one set of rows (name, price, text, button), so prices, dividers and buttons line up even when
   the Growth and Enterprise badges wrap under the name at 768 to 1023 */
@supports (grid-template-rows: subgrid) {
  @media (min-width: 768px) {
    .home-plans { row-gap: 0; }
    .home-plan { display: grid; grid-row: span 4; grid-template-rows: subgrid; row-gap: 6px; }
    .home-plan-name { align-self: start; }
    .home-plan .btn { align-self: end; margin-top: 0; }
  }
}
.home-plan > * { position: relative; }
.home-plan-name { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: 18px; line-height: 1.3; letter-spacing: -.01em; }
.home-plan-price { display: flex; align-items: baseline; gap: 8px; min-height: 44px; margin-top: 6px; }
.home-plan-amount { font-size: clamp(36px, 3.6vw, 44px); line-height: 1; font-weight: 600; letter-spacing: -.035em; color: var(--ink); font-variant-numeric: tabular-nums; }
.home-plan-amount-text { font-size: clamp(28px, 2.8vw, 34px); letter-spacing: -.025em; }
.home-plan-per { font-size: 15px; color: var(--muted); }
.home-plan-text { margin: 4px 0 8px; padding-top: 12px; border-top: 1px solid var(--line-soft); color: var(--ink-2); font-size: 15px; line-height: 1.6; }
.home-plan .btn { margin-top: auto; }
.home-plans-cta, .home-plan-link { display: none; }
/* Fair use footnote: "Unlimited" carries a.fn-ref (site.css) pointing at #fair-use under the plans */
.home-plans-note { margin-top: 14px; }
@media (max-width: 767px) {
  .home-pricing-head { margin-bottom: 20px; }
  .home-pricing-more { display: none; }
  .home-plans { box-shadow: var(--highlight), var(--shadow); }
  .home-plans > .home-plan {
    display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 4px 12px; padding: 16px 18px;
  }
  /* Growth: a light accent tint and a 3px accent bar on the left */
  .home-plans > .home-plan-featured { background: color-mix(in srgb, var(--accent) 6%, var(--surface)); box-shadow: inset 3px 0 0 var(--accent); }
  .home-plan-name { grid-column: 1; grid-row: 1; gap: 8px; font-size: 16px; }
  .home-plan-name .badge-accent { display: none; }
  .home-plan-price { grid-column: 2; grid-row: 1; justify-self: end; min-height: 0; margin: 0; gap: 4px; }
  .home-plan-amount { font-size: 24px; letter-spacing: -.03em; }
  .home-plan-amount-text { font-size: 20px; }
  .home-plan-per { font-size: 13px; }
  .home-plan-text { grid-column: 1 / -1; margin: 0; padding: 0; border: 0; font-size: 14px; line-height: 1.5; }
  .home-plan .btn { display: none; }
  .home-plan-link { display: inline-flex; padding-block: 10px; margin-block: -10px; }
  .home-plans-cta { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: 16px; }
  .home-plans-cta .btn { flex: 1 1 0; min-width: 0; padding-inline: 12px; }
}

/* 6. FAQ (shared .faq-layout) --------------------------------------------------------------------- */
.home-faq-body { min-width: 0; }
.home-faq-more { margin-top: 20px; }

/* 7. Final CTA ----------------------------------------------------------------------------------- */
.home-final .cta-band h2 { max-width: 22ch; }
@media (min-width: 1024px) { .home-final .cta-band h2 { max-width: none; } }

/* Touch widths: small text links get a taller hit area without moving anything (WCAG 2.5.8) */
@media (max-width: 1023px) {
  .home-report-audit .btn-link, .home-report-all, .home-aos .btn-link, .home-pricing-more, .home-faq-more .btn-link { padding-block: 10px; margin-block: -10px; }
}

/* Workaround (reported to MOCK): with reduced motion, mock.js leaves the static leaderboard rows without
   their final translateY, so they stack on row 1. Inline transforms from mock.js still win when present. */
@media (prefers-reduced-motion: reduce) {
  .home-media .cm-lb .cm-row:nth-of-type(2) { transform: translateY(100%); }
  .home-media .cm-lb .cm-row:nth-of-type(3) { transform: translateY(300%); }
  .home-media .cm-lb .cm-row:nth-of-type(4) { transform: translateY(200%); }
  .home-media .cm-lb .cm-row:nth-of-type(5) { transform: translateY(400%); }
  .home-media .cm-lb .cm-row:nth-of-type(6) { transform: translateY(500%); }
}