/* Desktop layout (1024px and wider) only. Phones never load this file: it is linked with
   media="(min-width: 1024px)". Mobile is locked; check with: node tools/mobile-lock.cjs check */

:root { --section: 128px; }

/* ---------- hero: two columns, everything on the first screen ---------- */
.hero { padding-top: 40px; padding-bottom: 24px; }
.hero-grid {
  grid-template-columns: minmax(0, 1fr) minmax(0, 540px);
  grid-template-rows: auto 1fr;
  grid-template-areas: "head media" "copy media";
  column-gap: 72px; row-gap: 0; align-items: start; min-height: 0;
}
.hero-head { grid-column: 1; grid-row: 1; padding-top: 48px; }
.hero h1 { font-size: clamp(4.6rem, 7.2vw, 7.4rem); max-width: 8.5ch; }
.hero-copy-left { grid-column: 1; grid-row: 2; padding: 0; }
.hero-copy-left .lede { margin-top: 28px; max-width: 30ch; }
.hero-media { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: center; }
.hero-stage {
  display: grid; grid-template-columns: 1fr; grid-template-areas: none; gap: 12px;
  padding: 28px; border-radius: 30px; align-items: stretch;
}
.hero-stage .hero-prompt, .hero-stage .sheet, .hero-stage .hero-stats { grid-area: auto; max-width: none; margin: 0; }
.hero-stage .sheet { padding: 20px 22px; }
.hero-stage .sheet dl { gap: 7px 14px; margin-top: 14px; }

/* ---------- builder teaser: the second button is for phones ---------- */
.teaser-again { display: none; }

/* ---------- testimonials: shorter video cards so the row lines up with the dashboard ---------- */
.videos { align-items: stretch; }
.vcard { aspect-ratio: 4 / 5; }
.videos .dash { height: 100%; }

/* ---------- "It knows removals": a full-width bento with no holes ---------- */
.mosaic {
  grid-template-columns: repeat(12, 1fr); gap: 12px; grid-auto-flow: row;
  grid-template-areas:
    "h h h h h f f f a a a a"
    "h h h h h l l l l l l l"
    "b b b b s s s s c c c c";
}
.mosaic > .tile { grid-column: auto; grid-row: auto; min-height: 0; padding: 28px; }
.mosaic > .t-head { grid-area: h; min-height: 0; justify-content: flex-end; }
.mosaic > .t-fig { grid-area: f; min-height: 220px; }
.mosaic > .t-s1 { grid-area: a; justify-content: center; }
.mosaic > .t-list { grid-area: l; justify-content: center; }
.mosaic > .t-s2 { grid-area: b; justify-content: center; }
.mosaic > .t-side { grid-area: s; flex-direction: row; align-items: center; gap: 18px; padding: 20px; }
.mosaic > .t-side img { width: 44%; flex: none; aspect-ratio: 4 / 3; height: auto; }
.mosaic > .t-s3 { grid-area: c; }
.mosaic .t-list ul { grid-template-columns: repeat(3, 1fr); gap: 12px 20px; }
.mosaic .t-head h2 { font-size: clamp(3rem, 4.6vw, 4.4rem); }
.mosaic .t-s1 .big, .mosaic .t-s2 .big, .mosaic .t-s3 .big { font-size: 1.45rem; }

/* ---------- chart: figures and their lines sit on one baseline ---------- */
.hours-head { grid-template-columns: 300px minmax(0, 1fr); align-items: center; gap: 48px; }
.hours-head .hours-fig { font-size: clamp(6rem, 11vw, 9.5rem); }
.hours-head-2 { margin-top: 56px; }
.hours-head-2 .hours-h2b { max-width: none; }
.hours-fact { margin-left: calc(300px + 48px); max-width: 52ch; }
.section.hours { padding-bottom: 80px; }

/* ---------- builder page: no photo under the wizard ---------- */
.builder-photo { display: none; }

/* ---------- results: recordings two across ---------- */
.wall-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }

/* ---------- floating button stays clear of content edges ---------- */
.fab { right: 28px; bottom: 28px; }

/* ---------- builder teaser: a long "Build your own" button under the preview card ---------- */
.teaser-again { display: flex; margin: 20px 0 0 calc(50% + 32px); }
.teaser-again .btn { width: 100%; justify-content: center; min-height: 64px; font-size: 1.1rem; }
.m-only { display: none; }
.d-only { display: inline; }

/* ---------- real calls: three obvious, clickable cards ---------- */
.call-index { gap: 10px; margin-top: 32px; }
.call-tab {
  position: relative; background: #fff; color: var(--muted); border-radius: 20px;
  padding: 18px 72px 18px 22px; box-shadow: inset 0 0 0 1px rgba(18, 56, 45, 0.1);
  transition: background-color 180ms ease, box-shadow 180ms ease, transform 160ms var(--ease-out);
}
.call-tab:nth-child(2) { background: #f1faf5; }
.call-tab:nth-child(3) { background: #e3f5eb; }
.call-tab b { font-size: clamp(1.4rem, 1.9vw, 1.75rem); color: var(--ink); }
.call-tab::after {
  content: ""; position: absolute; right: 20px; top: 50%; width: 38px; height: 38px; margin-top: -19px;
  border-radius: 50%; background: var(--mint) no-repeat 56% 50% / 12px
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 12'%3E%3Cpath d='M0 0l10 6-10 6z' fill='%2312382d'/%3E%3C/svg%3E");
  transition: transform 180ms var(--ease-out);
}
.call-tab:hover { box-shadow: inset 0 0 0 1.5px var(--forest); }
.call-tab:hover::after { transform: scale(1.08); }
.call-tab[aria-selected="true"] { background: var(--forest); color: var(--on-forest-muted); box-shadow: none; }
.call-tab[aria-selected="true"] b { color: var(--paper); }
.call-tab[aria-selected="true"]::after {
  background-color: var(--yellow, #f2c94c);
}

/* ---------- integrations: groups stack in two columns with no holes ---------- */
.int-groups { grid-template-columns: 1fr 1fr; align-items: start; gap: 36px 40px; }
.int-group:nth-child(1) { grid-column: 1; grid-row: 1; }
.int-group:nth-child(2) { grid-column: 2; grid-row: 1 / span 2; }
.int-group:nth-child(3) { grid-column: 1; grid-row: 2 / span 2; }
.int-group:nth-child(4) { grid-column: 2; grid-row: 3 / span 2; }
.int-group:nth-child(5) { grid-column: 1; grid-row: 4; }

/* ---------- builder: choices on the right and the live preview on the left share one view ---------- */
.builder { padding-top: 28px; }
.builder-grid { grid-template-columns: 5fr 7fr; column-gap: 56px; row-gap: 28px; align-items: start; }
.builder-side { display: contents; }
.builder-h1 { grid-column: 1; grid-row: 1; align-self: end; font-size: clamp(3.2rem, 4.8vw, 4.6rem); max-width: 12ch; }
.builder-side .lede { grid-column: 2; grid-row: 1; align-self: end; margin: 0; max-width: 46ch; }
.builder-live { grid-column: 1; grid-row: 2; position: sticky; top: 100px; }
.builder-live .preview { margin-top: 0; }
.builder-main { grid-column: 2; grid-row: 2; position: sticky; top: 100px; }