/* AYH v5.2.7 alignment system (DD, Nov 11). Load LAST on every page. No markup, copy or Kit form changes.
   Rule: >=834px marketing section headers are centered; <=833px everything sits on one left edge.
   Reading pages (lessons, path, legal, about body, thanks) use one centered 640px column, text left. */

/* 0. One gutter everywhere (site.css pages were 20-33px; home + lessons 24/40) */
@media (max-width:833px){:root{--gutter:24px}}
@media (min-width:834px){:root{--gutter:40px}}

/* 1. HOME (ayh-cro2.css) - section headers centered on tablet/desktop */
@media (min-width:834px){
  .page-home-cro2 .band .h2,
  .page-home-cro2 .band .lead,
  .page-home-cro2 #ladder .back,
  .page-home-cro2 #ladder .teams,
  .page-home-cro2 .signup-live h2,
  .page-home-cro2 .signup-line,
  .page-home-cro2 .signup-fine{text-align:center;margin-left:auto;margin-right:auto;text-wrap:balance}
  .page-home-cro2 .band .lead,
  .page-home-cro2 #ladder .back{max-width:var(--measure)}
  /* video + CTA follow their centered header (was margin-left:0) */
  .page-home-cro2 .path .intro-video{margin-left:auto;margin-right:auto}
  .page-home-cro2 .path .act{display:flex;flex-direction:column;align-items:center}
  /* signup: center the wrapper only; form markup untouched, label/input stay left inside the box */
  .page-home-cro2 #signup .signup-live{max-width:880px;margin-left:auto;margin-right:auto}
  .page-home-cro2 #signup .signup-form{margin-left:auto;margin-right:auto}
}
/* hero: two columns (>=1024) stays left, text paired with the agent card. Stacked tablet (834-1023): centered like every header */
@media (min-width:834px) and (max-width:1023px){
  .page-home-cro2 .hero .txt{text-align:center}
  .page-home-cro2 .hero .sub{margin-left:auto;margin-right:auto}
  .page-home-cro2 .hero .act{display:flex;flex-direction:column;align-items:center}
}

/* 2. LESSONS (ayh-lesson-v3.css) - one 640 column; signup bar joins the same column (was 832px, 100px wider each side) */
.ls .col,
.ls .ls-sign .col{max-width:calc(var(--measure) + 48px)}

/* 3. BEGINNER PATH (ayh-v4.css) - lesson list joins the 640 column (was 720) */
.v4-path .v4-plist .v4-col{max-width:calc(var(--v4-read) + 2*var(--gutter))}
.v4-path .v4-vid-tr{text-align:left}

/* 4. LEGAL + PROSE (site.css: privacy, terms, disclosures, changelog, thanks) - 640 column (was 720) */
.page-prose main>.wrap{max-width:calc(640px + 2*var(--gutter))}
/* Disclosures: the 'Made by AI agents' panel is body copy on a reading page, so it reads left like the rest */
.page-prose .ai-panel{text-align:left;max-width:none}
.page-prose .ai-panel p{margin-left:0;max-width:none}
.page-prose .ai-panel .agent-chips{justify-content:flex-start}

/* 5. ABOUT (site.css) - body prose joins the 640 column; header bands centered >=834, left on phones */
.page-about .band-prose .prose,.page-about .about-copy .band-fine .prose{max-width:640px}
@media (max-width:833px){
  .page-about .hero-copy,.page-about .hero-copy h1,.page-about .hero-sub,
  .page-about .ai-panel,.page-about .ai-panel h2,.page-about .ai-panel p{text-align:left}
  .page-about .hero-sub,.page-about .ai-panel p{margin-left:0}
  .page-about .agent-chips{justify-content:flex-start}
}

/* 6. THANK-YOU (/thanks/, /es/gracias/) - header-only page: centered >=834, left on phones */
@media (max-width:833px){
  .v4-thanks .v4-thanks-in{text-align:left}
  .v4-thanks .v4-lead{margin-left:0}
  .v4-thanks .v4-col{padding-left:0;padding-right:0} /* wrap already gives the 24px gutter (was 48px) */
}

/* 7. HOME hero overflow fix: 744 + 40 gap + 352 = 1136 > 1120 content box (visual ran 16px past the right edge at >=1181) */
@media (min-width:1181px){
  .page-home-cro2 .hero .grid{grid-template-columns:minmax(0,1fr) 352px;gap:24px}
}

/* 8. ES hero H1 (nowrap spans) ran 28px past its column at 1024px. Size step only, no copy change */
@media (min-width:1024px) and (max-width:1180px){
  html[lang=es] .page-home-cro2 .hero h1{font-size:min(66px,calc((100vw - 472px)/8.8))}
}