/* The chat-first update (Nov 2026): the founders block, the real app capture in the
   feature board, the Prompt Book numbers and the note on archive prompts. Loaded last. */

/* Hero: the chat column of a real capture, at a size you can read */
.hero-native-proof .shot-media{aspect-ratio:auto;max-width:640px;border:1px solid var(--surface-active);border-radius:10px;background:#141310}
.hero-screen .hero-native-proof .shot-media img{max-height:none;aspect-ratio:auto;object-fit:contain}
.hero-screen .hero-native-proof figcaption{max-width:640px}

/* "Describe it in a chat": the start of a real session, framed like an app window */
.compose-feature .feature-shot{display:block;width:calc(100% - 72px);height:auto;margin:0 36px 28px;border:1px solid var(--surface-active);border-radius:10px;background:#141310}
@media (max-width:800px){.compose-feature .feature-shot{width:calc(100% - 52px);margin:0 26px 24px}}
@media (max-width:520px){.compose-feature .feature-shot{width:calc(100% - 50px);margin:0 25px 22px}}

/* The Prompt Book's two numbers */
.examples-feature{display:flex;flex-direction:column}
.book-facts{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:auto 36px 36px}
.book-facts>div{background:var(--surface-raised);padding:24px}
.book-facts dt{font-family:var(--display);font-size:clamp(40px,4.4vw,72px);line-height:1;letter-spacing:-.04em}
.book-facts dd{margin-top:12px;font-size:var(--small);color:var(--muted)}
@media (max-width:800px){.book-facts{margin:8px 26px 26px}}
@media (max-width:520px){.book-facts{margin:8px 25px 25px;gap:8px}.book-facts>div{padding:18px}}

/* The archive prompts say where they came from */
.prompt-details .prompt-origin,.archive-prompt .prompt-origin{font-size:var(--small);color:var(--muted)}

/* Who makes Layrs */
.maker-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--gap)}
.maker-card{background:var(--surface-raised);padding:var(--pad);display:flex;flex-direction:column;gap:10px;min-width:0;box-shadow:inset 0 0 0 1px var(--line)}
.maker-name{font-size:clamp(24px,2.2vw,32px);line-height:1.2;letter-spacing:-.025em;font-weight:500;overflow-wrap:anywhere}
.maker-role{font-size:var(--small);color:var(--muted)}
.maker-line{font-size:var(--body);max-width:42ch;margin-top:12px;overflow-wrap:anywhere}
.maker-link{font-size:var(--small);color:var(--muted);margin-top:auto;padding-top:20px;overflow-wrap:anywhere}
@media (max-width:800px){.maker-list{grid-template-columns:1fr}}
@media (max-width:520px){.maker-card{padding:24px}}

/* Hero line: two lines on a laptop; where it must wrap, "Your Mac / makes it." */
.hero-copy h2{text-wrap:balance}
@media (min-width:801px){.hero .hero-copy h2{font-size:clamp(32px,3.4vw,66px)}}