/*
 * Canonical layout system.
 *
 * This file owns text flow and responsive structure. The campaign stylesheet
 * still owns colour, illustration and motion. Keeping those responsibilities
 * separate prevents decorative rules from forcing text into fixed boxes.
 */

:root {
  --reading-width: 68ch;
  --heading-tracking: normal;
  --heading-leading: 1.14;
  --body-leading: 1.62;
  --layout-gap: clamp(2rem, 5vw, 5.5rem);
}

html {
  scroll-padding-top: 8rem;
}

body {
  letter-spacing: normal;
}

main :where(section, article, div, figure, figcaption, form, fieldset) {
  min-inline-size: 0;
}

main :where(p, li, summary, label, button, a, span, strong, b, em) {
  overflow-wrap: break-word;
}

main :where(p, li) {
  line-height: var(--body-leading);
}

main :where(h1, h2, h3, h4),
.site-path strong,
.library-figure blockquote,
.film-tabs strong,
.pricing-price strong,
.builder-options b,
.builder-levels b,
.builder-levels strong {
  margin-block-start: 0;
  letter-spacing: var(--heading-tracking);
  line-height: var(--heading-leading);
  overflow-wrap: normal;
  word-break: normal;
  hyphens: none;
  text-wrap: balance;
}

/* Typography is deliberately authoritative: old campaign selectors used
   tighter tracking and line boxes at higher specificity. */
main :is(h1, h2, h3, h4),
.site-path strong,
.library-figure blockquote,
.film-tabs strong,
.pricing-price strong,
.builder-options b,
.builder-levels b,
.builder-levels strong {
  letter-spacing: normal !important;
}

main h1 {
  line-height: 1.15 !important;
}

main h2 {
  line-height: 1.18 !important;
}

main h3 {
  line-height: 1.25 !important;
}

main h4 {
  line-height: 1.3 !important;
}

.library-figure blockquote,
.film-tabs strong,
.site-path strong {
  line-height: 1.3 !important;
}

.pricing-price strong {
  line-height: 1.05 !important;
}

main h1 {
  max-inline-size: 18ch;
  font-size: clamp(2.8rem, 5.1vw, 5.65rem);
  line-height: 1.1;
}

main h2 {
  max-inline-size: 20ch;
  font-size: clamp(2.2rem, 3.9vw, 4.35rem);
  line-height: 1.14;
}

main h3 {
  font-size: clamp(1.45rem, 2.2vw, 2.25rem);
  line-height: 1.22;
}

main h4 {
  line-height: 1.3;
}

main :where(.hero-copy, .subpage-hero-copy > p, .sketch-intro > p, .home-product-proof-head p, .workday-intro > p, .possibilities-intro > p, .yours-intro > p, .pricing-plain > p, .page-cta p) {
  max-inline-size: var(--reading-width);
  line-height: var(--body-leading);
}

/* Content determines block height. No text-bearing section is viewport-locked. */
.hero,
.offer-summary,
.home-product-proof,
.site-paths,
.home-moment,
.subpage-hero,
.library,
.mandate,
.becomes-yours,
.workday,
.capability-proof,
.films,
.pricing,
.faq,
.page-cta,
.sketch-intro,
.assistant-builder {
  block-size: auto;
  min-block-size: 0;
}

.offer-summary-inner,
.home-product-proof-head,
.home-moment,
.subpage-hero,
.library,
.workday-intro,
.possibilities-intro,
.mandate-heading,
.yours-intro,
.hosting-inline,
.pricing-head,
.pricing-plain,
.start-price,
.page-cta,
.builder-result-grid {
  grid-auto-rows: minmax(min-content, max-content);
  align-items: start;
}

.hero-content,
.subpage-hero-copy,
.sketch-intro,
.offer-summary-inner > *,
.home-product-proof-head > *,
.home-moment > *,
.library > *,
.workday-intro > *,
.possibilities-intro > *,
.mandate-heading > *,
.yours-intro > *,
.hosting-inline > *,
.pricing-head > *,
.pricing-plain > *,
.start-price > *,
.page-cta > *,
.builder-result-grid > * {
  min-inline-size: 0;
}

/* Page introductions stay substantial without becoming six-line billboards. */
.hero-content {
  inline-size: min(100%, 52rem);
}

.hero h1,
.subpage-hero h1,
.sketch-intro h1 {
  max-inline-size: 18ch;
  margin-block-end: clamp(1.25rem, 2.5vw, 2rem);
  font-size: clamp(2.8rem, 5.1vw, 5.65rem);
  line-height: 1.1;
}

.subpage-hero h1,
.sketch-intro h1 {
  font-size: clamp(2.8rem, 4.4vw, 4.4rem);
}

.subpage-hero {
  grid-template-columns: minmax(0, 1.08fr) minmax(20rem, 0.92fr);
  gap: var(--layout-gap);
  align-items: center;
  padding-block: clamp(9.5rem, 13vw, 12rem) clamp(5rem, 8vw, 8rem);
}

.subpage-hero-copy {
  max-inline-size: 54rem;
}

.subpage-hero-object,
.day-ribbon,
.level-meter {
  inline-size: min(100%, 44rem);
  max-inline-size: none;
  justify-self: stretch;
}

/* Two-column explanations switch before either side has to squeeze. */
.offer-summary-inner,
.home-product-proof-head,
.home-moment,
.library,
.workday-intro,
.possibilities-intro,
.yours-intro,
.pricing-plain,
.start-price,
.page-cta {
  gap: var(--layout-gap);
}

.library {
  grid-template-columns: minmax(22rem, 0.82fr) minmax(34rem, 1.18fr);
  align-items: start;
}

.library-copy h2 {
  max-inline-size: 15ch;
  margin-block-end: 1.75rem;
}

.library-copy > p,
.library-copy .personal-definition {
  max-inline-size: 58ch;
  line-height: var(--body-leading);
}

.library-figure {
  inline-size: 100%;
  overflow: clip;
}

.library-figure blockquote {
  max-inline-size: 27ch;
  font-size: clamp(1.4rem, 2vw, 2.15rem);
  line-height: 1.24;
}

.library-sources {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.library-sources span {
  block-size: auto;
  min-block-size: 3.5rem;
}

.library-result li {
  grid-template-columns: minmax(9rem, 0.7fr) minmax(0, 1.3fr);
  align-items: start;
}

/* Cards and lists expand with their copy instead of relying on equal fixed heights. */
.mandate-scale,
.pricing-levels,
.capability-ledger,
.film-tabs,
.builder-options,
.builder-levels,
.hosting-options {
  grid-auto-rows: minmax(min-content, max-content);
}

.mandate-scale {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr));
}

.mandate-scale article,
.pricing-level,
.capability-ledger article,
.film-tabs button,
.builder-options label > span,
.builder-levels label > span,
.hosting-options article {
  block-size: auto;
  min-block-size: 0;
}

.mandate-scale h3,
.capability-ledger h3,
.yours-steps h3,
.hosting-options h4 {
  max-inline-size: 28ch;
  margin-block-end: 1rem;
}

.mandate-scale article > p,
.capability-ledger article > p,
.yours-steps article > p,
.hosting-options article > p {
  max-inline-size: 58ch;
  line-height: var(--body-leading);
}

.yours-steps article,
.hosting-inline {
  grid-template-columns: minmax(15rem, 0.72fr) minmax(0, 1.28fr);
  gap: clamp(1.5rem, 5vw, 6rem);
}

.capability-ledger article {
  grid-template-columns: minmax(17rem, 0.85fr) minmax(0, 1.15fr);
  gap: clamp(1.5rem, 4vw, 5rem);
  align-items: start;
}

.live-demo-explainer p,
.home-dashboard-guide p {
  block-size: auto;
  min-block-size: 0;
}

.films-intro,
.pricing-head,
.faq-intro,
.mandate-heading {
  max-inline-size: 70rem;
}

.film-tabs button {
  padding-block: 1.35rem;
}

.film-caption {
  min-inline-size: 0;
}

.film-caption h3,
.film-caption p {
  max-inline-size: 58ch;
}

.pricing-levels {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr));
  align-items: stretch;
}

.pricing-level + .pricing-level {
  border-inline-start: 1px solid color-mix(in oklch, var(--ink) 23%, transparent);
}

.pricing-level h3 {
  margin-block-end: 1.25rem;
  font-size: clamp(2.35rem, 3.5vw, 4rem);
  line-height: 1.1;
}

.pricing-price {
  flex-wrap: wrap;
  align-items: baseline;
  row-gap: 0.5rem;
}

.pricing-price strong {
  font-size: clamp(3rem, 4.5vw, 5rem);
  line-height: 1;
  white-space: normal;
}

.pricing-summary,
.tier-includes,
.pricing-rhythm {
  max-inline-size: 36ch;
}

.faq-list details {
  block-size: auto;
  min-block-size: 0;
}

.faq-list summary {
  min-block-size: 4.5rem;
  padding-block: 1.25rem;
  line-height: 1.35;
}

.faq-list details > p {
  max-inline-size: var(--reading-width);
  margin-block: 0;
  padding: 0 3.5rem 1.75rem 0;
  line-height: var(--body-leading);
}

.builder-question h2 {
  max-inline-size: 20ch;
  font-size: clamp(2.1rem, 3.8vw, 4rem);
  line-height: 1.15;
}

.builder-question > span,
.builder-level-note,
.builder-send p {
  max-inline-size: var(--reading-width);
  line-height: var(--body-leading);
}

.builder-options,
.builder-levels {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: stretch;
}

.builder-options label > span,
.builder-levels label > span {
  padding-block: 1.35rem;
}

.builder-options-mandate label > span {
  min-block-size: 0;
}

/* The grid changes here, not a few pixels later after text has already collided. */
@media (max-width: 74rem) {
  .subpage-hero,
  .library,
  .offer-summary-inner,
  .home-product-proof-head,
  .home-moment,
  .workday-intro,
  .possibilities-intro,
  .yours-intro,
  .pricing-plain,
  .start-price,
  .page-cta {
    grid-template-columns: minmax(0, 1fr);
  }

  .subpage-hero-copy,
  .library-copy,
  .workday-intro > *,
  .possibilities-intro > *,
  .yours-intro > *,
  .pricing-plain > *,
  .start-price > *,
  .page-cta > * {
    max-inline-size: 52rem;
  }

  .subpage-hero-object,
  .day-ribbon,
  .level-meter,
  .library-figure {
    inline-size: min(100%, 52rem);
  }

  .library-copy h2 {
    max-inline-size: 20ch;
  }

  .pricing-levels {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-level + .pricing-level {
    border-inline-start: 0;
    border-block-start: 1px solid color-mix(in oklch, var(--ink) 23%, transparent);
  }
}

@media (max-width: 60rem) {
  .yours-steps article,
  .hosting-inline,
  .capability-ledger article,
  .live-demo-layout,
  .film-stage,
  .builder-result-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .capability-ledger article > p,
  .yours-steps article > p {
    grid-column: auto;
  }

  .film-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  :root {
    --heading-tracking: normal;
    --heading-leading: 1.16;
    --body-leading: 1.58;
  }

  main h1,
  .hero h1,
  .subpage-hero h1,
  .sketch-intro h1 {
    max-inline-size: 100%;
    font-size: clamp(2rem, 9.2vw, 2.75rem);
    line-height: 1.15;
  }

  main h2,
  .library-copy h2,
  .yours-intro h2,
  .builder-question h2 {
    max-inline-size: 100%;
    font-size: clamp(1.95rem, 8.6vw, 2.65rem);
    line-height: 1.16;
  }

  main h3,
  .mandate-scale h3,
  .pricing-level h3 {
    max-inline-size: 100%;
    line-height: 1.22;
  }

  .subpage-hero,
  .sketch-intro {
    padding-block-start: 7.5rem;
  }

  .subpage-hero-object {
    grid-template-columns: minmax(0, 1fr);
    transform: none;
  }

  .subpage-hero-object b {
    grid-column: auto;
  }

  .day-ribbon span {
    grid-template-columns: 4.5rem minmax(0, 1fr);
    min-block-size: 0;
    padding-block: 1.25rem;
  }

  .library-figure {
    padding: 1.35rem;
    border-radius: 1.25rem;
  }

  .library-sources,
  .film-tabs {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .library-result li {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.35rem;
  }

  .pricing-levels,
  .mandate-scale,
  .builder-options,
  .builder-levels {
    grid-template-columns: minmax(0, 1fr);
  }

  .pricing-level {
    padding: 2rem 1.35rem 2.35rem;
  }

  .faq-list details > p {
    padding-inline-end: 0;
  }
}

@media (prefers-reduced-motion: reduce) {
  .pricing-level:hover,
  .pricing-level:focus-within {
    transform: none;
  }
}