/*
 * Homepage (/), per specs/home.md. Loads after marketing_tokens.css and landing_pages.css,
 * which supply the shared header, type, buttons, and .wrap.
 * White navigation and hero; the product canvas (--canvas, #FAF8F4) starts with the first
 * product overview and runs through the mission and closing CTA to the warm-charcoal footer.
 * Sections separate by type size, whitespace, and alignment, never by rules or boxes.
 */
.home { --mission-accent: #7b5b88; --header-border-width: 0px; background: var(--canvas); }
.home h1, .home h2, .home h3, .home p, .home figure { margin: 0; }
.home h2, .home h3 { font: 400 46px/1.08 var(--serif); letter-spacing: -.045em; }
@media (prefers-reduced-motion: no-preference) { html:has(.home) { scroll-behavior: smooth; } }

/* Hero: the tagline is the only H1. The art stands on the hero's bottom edge, right-aligned with the nav content. */
.home .home-hero { overflow: hidden; background: #fff; }
.home .hero-grid { position: relative; display: grid; grid-template-columns: 1.08fr .92fr; align-items: center; gap: 64px; min-height: 664px; }
.home .hero-copy { position: relative; z-index: 2; min-width: 0; padding: 0; transform: translateY(-24px); }
.home .hero-tagline { font: 400 clamp(56px, 5.5vw, 79px)/1.05 var(--serif); letter-spacing: -.052em; max-width: none; margin: 0 0 27px; color: var(--ink); }
.home .hero-body { font-size: 17px; line-height: 1.78; max-width: 44ch; color: var(--muted); }
.home .hero-copy > .primary { margin-top: 29px; }
.home .hero-art { --art-height: 638px; position: relative; height: var(--art-height); align-self: end; display: flex; align-items: flex-end; justify-content: flex-end; background: transparent; }
.home .hero-art-scene { position: relative; width: min(100%, calc(var(--art-height) * .75)); aspect-ratio: 3 / 4; }
.home .hero-art img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; }
/* The transparent gap separates the cone from the connected panda/tree. Shift only the latter
   by about 20px at the 479px desktop art width, proportionally less on small screens. */
.home .hero-art-panda { clip-path: polygon(0 0, 77% 0, 77% 20%, 100% 20%, 100% 100%, 0 100%); transform: translateX(-4.18%); }
.home .hero-art-cone { clip-path: inset(0 0 80% 77%); }

/* Product overviews: product name above the headline, related tools linked in the description, Try Now alone.
   Every lead area has the same size; one row of square thumbnails sits under it. */
.home .chapters { background: var(--canvas); }
.home .category { padding: 94px 0; }
.home main section.category { scroll-margin-top: 76px; } /* the header height, so Learn More lands just below it */
.home .category-editing { padding-bottom: 106px; }
.home .category-grid { display: grid; grid-template-columns: .72fr 1.4fr; gap: 80px; align-items: center; }
.home .category-headshots .category-grid { grid-template-columns: 1.4fr .72fr; }
.home .category-headshots .category-copy { order: 2; }
.home .category-copy, .home .showcase { min-width: 0; }
.home .category-kicker { font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: .12em; text-transform: uppercase; color: var(--muted); }
.home .category h2 { font-size: clamp(37px, 3.8vw, 50px); text-wrap: balance; word-spacing: .025em; margin: 18px 0 23px; }
.home .category-body { font-size: 16px; line-height: 1.75; max-width: 35ch; color: var(--muted); }
.home .category-action { display: flex; flex-wrap: wrap; align-items: center; gap: 18px; margin-top: 27px; }
.home .lead-picture { display: block; width: 100%; aspect-ratio: 1.7; overflow: hidden; background: var(--surface); }
.home .lead-picture > img { display: block; width: 100%; height: 100%; object-fit: cover; }
.home .lead-picture.trio, .home .lead-picture.duo { display: grid; gap: 10px; position: relative; background: transparent; }
.home .lead-picture.trio { grid-template-columns: repeat(3, 1fr); }
.home .lead-picture.duo { grid-template-columns: 1fr 1fr; }
.home .lead-picture.trio > img, .home .lead-picture.duo > img { min-width: 0; object-position: 50% 30%; }
.home .lead-picture.duo figcaption span { position: absolute; top: 12px; padding: 4px 9px; border-radius: 3px; background: rgb(20 17 20 / 62%); color: #fff; font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; }
.home .lead-picture.duo figcaption span:first-child { left: 12px; }
.home .lead-picture.duo figcaption span:last-child { left: calc(50% + 17px); }
.home .samples { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; margin-top: 16px; }
.home .sample { display: block; min-width: 0; }
.home .sample-picture { display: block; aspect-ratio: 1; overflow: hidden; background: var(--surface); }
.home .sample-picture img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center 30%; }
/* Frame only the right portrait, clearing the teaser's center seam without stretching it. */
.home .sample.right-portrait img { width: 203%; max-width: none; margin-left: -103%; object-position: right top; }
.home .sample-picture.split { background: var(--surface) 100% 50% / 200% 100% no-repeat; } /* the result half of a side-by-side teaser */
.home .sample-name { display: block; padding-top: 9px; font-size: 11px; line-height: 1.5; color: var(--muted); }
.home .sample.cutout .sample-picture { background: #dedcce; }
.home .sample.cutout img { object-fit: contain; padding: 7px; }
.home .sample.monochrome img { filter: grayscale(1); }

/* Mission and closing CTA share the canvas. The mission is large and left-aligned; the CTA is smaller and centered. */
.home .mission-band { padding: 136px 0 0; color: var(--ink); }
.home .mission-content { max-width: var(--content-width); }
.home .mission-band p { max-width: 21em; font: 400 clamp(38px, 4vw, 56px)/1.14 var(--serif); letter-spacing: -.035em; }
.home .mission-band p > span { color: var(--mission-accent); }
.home .home-closing { padding: 168px 0 176px; text-align: center; }
.home .home-closing h2 { font: 400 clamp(34px, 3vw, 44px)/1.1 var(--serif); letter-spacing: -.03em; margin: 0 0 28px; }

@media (min-width: 761px) and (max-width: 1100px) {
  .home .hero-grid { gap: 30px; min-height: 610px; }
  .home .hero-tagline { font-size: 62px; }
  .home .hero-body { font-size: 16px; }
  .home .hero-art { --art-height: 565px; }
  .home .category-grid, .home .category-headshots .category-grid { gap: 40px; }
  .home .category h2 { font-size: 43px; }
  .home .category-body { font-size: 15px; }
}

@media (max-width: 760px) {
  .home h2 { font-size: 36px; }
  .home .hero-grid { display: flex; flex-direction: column; align-items: stretch; gap: 24px; width: calc(100% - 40px); min-height: 0; }
  .home .hero-copy { padding: 37px 0 0; transform: none; }
  .home .hero-tagline { font-size: clamp(45px, 12.6vw, 64px); margin-bottom: 23px; }
  .home .hero-body { font-size: 16px; line-height: 1.73; max-width: 42ch; }
  .home .hero-copy > .primary { margin-top: 24px; }
  .home .hero-art { --art-height: 420px; width: 100%; max-width: 390px; align-self: flex-end; }

  .home .category, .home .category-editing { padding: 59px 0 52px; }
  .home main section.category { scroll-margin-top: 64px; }
  .home .category-grid, .home .category-headshots .category-grid { display: flex; flex-direction: column; align-items: stretch; gap: 30px; }
  .home .category-headshots .category-copy { order: 0; }
  .home .category h2 { font-size: 41px; max-width: 13ch; margin: 15px 0 19px; }
  .home .category-body { font-size: 15px; line-height: 1.7; max-width: 39ch; }
  .home .category-action { gap: 20px; margin-top: 20px; }
  .home .lead-picture { aspect-ratio: 1.45; }
  .home .lead-picture.trio, .home .lead-picture.duo { gap: 5px; }
  .home .samples { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-top: 13px; }
  .home .samples > :nth-child(n+5) { display: none; }
  .home .sample-name { padding-top: 7px; line-height: 1.4; }
  .home .sample.cutout img { padding: 4px; }

  .home .mission-band { padding-top: 88px; }
  .home .mission-content { width: auto; padding: 0 24px; }
  .home .mission-band p { font-size: 33px; line-height: 1.2; }
  .home .home-closing { padding: 112px 0 120px; }
  .home .home-closing h2 { font-size: 34px; max-width: 12ch; margin: 0 auto 24px; }

}

@media (max-width: 360px) {
  .home .hero-art { --art-height: 370px; }
  .home .category h2 { font-size: 37px; }
}

@media (prefers-reduced-motion: reduce) {
  .home * { scroll-behavior: auto !important; transition: none !important; }
}