.landing-page { width: 100%; min-height: 100svh; }
.landing-page .masthead { display: flex; justify-content: space-between; align-items: center; padding: 1.2rem clamp(1.2rem, 4vw, 3.5rem); border-bottom: 1px solid #d7ccd2; }
.landing-page .wordmark { font-size: 2.6rem; }
.about-link { color: var(--purple); font-size: 1rem; text-underline-offset: .25em; }
.landing-content { flex: 1; display: flex; flex-direction: column; --content-gutter: clamp(1.2rem, 4vw, 3rem); padding: 1rem var(--content-gutter) 0; }
.landing-columns { flex: 1; display: grid; grid-template-columns: minmax(0, 1fr) 320px; grid-template-areas: "hero hero" "clip signup"; gap: 1.5rem 2rem; align-content: start; width: min(100%, 1344px); margin-inline: auto; }
.landing-page .callout { width: min(100%, 1344px); margin: 0 auto; padding: 0; border: 0; text-align: center; }
.landing-page .homepage-teaser { grid-area: hero; position: relative; text-align: left; }
.landing-page .callout { grid-area: clip; align-self: start; }
.landing-page .homepage-teaser .sample-stage { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr) minmax(0, 1fr); gap: .8rem; margin: 0 0 1rem; }
.landing-page [data-actor="jensen"] { grid-column: 1; grid-row: 1; }
.landing-page :is([data-actor="cassandra"], [data-actor="robo-jcal"]) { grid-column: 3; grid-row: 1; }
.landing-page .landing-headline { grid-column: 2; grid-row: 1; align-self: center; position: relative; margin: 4rem -.5rem 0; font: 700 clamp(2.2rem, 4.7vw, 4.9rem)/.98 Georgia, "Times New Roman", serif; text-align: center; letter-spacing: -.055em; }
.landing-page .landing-headline > span { display: inline; }
.landing-page .landing-headline::after { content: ""; display: block; width: 92%; height: 5px; margin: .4em auto 0; border-top: 3px solid #80618e; border-bottom: 1px solid #80618e; transform: rotate(-2deg); }
.landing-page .homepage-teaser .teaser-controls { position: absolute; top: auto; bottom: 0; left: 50%; transform: translateX(-50%); z-index: 5; margin: 0; }
.landing-page #teaser-replay { font: .7rem Arial, sans-serif; padding: .3rem .5rem; min-height: 30px; background: transparent; color: var(--purple); border: 1px solid #cbbdca; }
.landing-page .callout h2 { margin: .35rem 0 .7rem; font-size: clamp(2rem, 3vw, 2.8rem); font-weight: 400; }
.landing-page .eyebrow { margin: 0; }
.landing-page .full-clip-label { margin: .4rem 0; font-size: .85rem; }
.landing-page audio { display: block; width: min(100%, 650px); margin: .5rem auto; }
.landing-page .episode-links { font-size: .85rem; margin: .7rem 0 0; }
.landing-page .episode-links a { color: var(--purple); }
.landing-page .signup-panel { grid-area: signup; align-self: start; width: 100%; margin: 0; padding: 1.5rem; border: 1px solid #d7ccd2; border-top: 3px solid var(--purple); background: #eee6d8; }
.landing-page .updates { width: 100%; max-width: none; margin: 0; display: grid; grid-template-columns: minmax(220px, .85fr) minmax(0, 1.4fr); gap: .3rem 2rem; align-items: center; }
.landing-page .updates h2 { margin: 0; font-size: 1.7rem; grid-column: 1; }
.landing-page .updates > p { margin: .3rem 0 0; font-size: .85rem; grid-column: 1; }
.landing-page #subscribe-form { grid-column: 2; grid-row: 1 / 3; }
.landing-page #subscribe-form > label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
.landing-page .signup-row { flex-direction: column; }
.landing-page #subscribe-status { margin: .6rem 0 .2rem; }
.landing-page #subscribe-status:empty { display: none; }
.landing-page .contact { display: block; margin: .65rem 0 0; padding: 0; font-size: .85rem; text-align: right; }
a:focus-visible, button:focus-visible { outline: 3px solid #946434; outline-offset: 4px; }
@media (max-width: 760px) {
  .landing-page .masthead { padding-block: 1rem; }
  .landing-page .homepage-teaser .sample-stage { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .5rem; }
  .landing-page .landing-headline { grid-column: 1 / -1; grid-row: 1; margin: .3rem 0 0; max-width: 24ch; justify-self: center; font-size: clamp(1.9rem, 6.3vw, 3rem); line-height: 1.05; }
  .landing-page [data-actor="jensen"] { grid-column: 1; grid-row: 2; }
  .landing-page :is([data-actor="cassandra"], [data-actor="robo-jcal"]) { grid-column: 2; grid-row: 2; }
  .landing-page .homepage-teaser .teaser-controls { top: auto; bottom: 0; }
  .landing-page .callout h2 { margin-top: .5rem; }
  .landing-page .signup-panel { padding: 1.2rem; }
  .landing-page .updates { display: block; }
  .landing-page .updates > p { margin: .6rem 0 1rem; }
  .landing-page .signup-row { flex-direction: column; }
  .landing-page .contact { text-align: left; }
}

.landing-page .teaser-stage { position: relative; isolation: isolate; }
.landing-page .teaser-stage > figure, .landing-page .landing-headline { position: relative; z-index: 1; }
.landing-page .scene-props { position: absolute; inset: auto 0 34px; z-index: 2; pointer-events: none; }
.landing-page .scene-props svg { display: block; width: 100%; height: auto; }
.landing-page .teaser-stage figcaption { position: relative; z-index: 3; }
@media (max-width: 760px) { .landing-page .scene-props { bottom: 20px; } .landing-page .scene-props [data-prop="coffee"] { transform: translate(70px, -30px) scale(1.7); } .landing-page .scene-props [data-prop="books"] { transform: translate(-1320px, -55px) scale(1.7); } .landing-page .scene-props [data-prop="books"][data-target="robot"] { transform: translate(-980px, -55px) scale(1.7); } }

.landing-page .teaser-stage > .props-backdrop { position: absolute; bottom: 59px; width: 100%; height: auto; opacity: 1; z-index: 0; pointer-events: none; }
@media (max-width: 760px) { .landing-page .teaser-stage > .props-backdrop { display: none; } }

.landing-page .hero-stamp { position: absolute; left: 15%; bottom: clamp(90px, 8vw, 115px); z-index: 4; padding: .12rem .35rem; border: 3px solid #9b483d; color: #9b483d; background: #fff6e8; font: bold clamp(1.3rem, 4vw, 3rem)/1 "Cassandra Hand", cursive; transform: translateX(-50%) rotate(-14deg); pointer-events: none; }
.landing-page .hero-stamp[data-state="impact"] { transform: translate(-50%, -20%) rotate(-20deg); }
@media (max-width: 760px) { .landing-page .hero-stamp { left: 25%; bottom: clamp(58px, 12vw, 80px); font-size: clamp(1.1rem, 7vw, 2.5rem); } }

.landing-page .teaser-stage > .props-plant { position: absolute; bottom: 59px; width: 100%; height: auto; z-index: 0; pointer-events: none; }
@media (max-width: 760px) { .landing-page .teaser-stage > .props-plant { bottom: 45px; } }

.landing-page #teaser-replay[hidden] { display: none; }
.landing-page #teaser-replay span { font-size: 1.2rem; vertical-align: -.08em; }

@media (max-width: 560px) { .landing-page #teaser-replay .replay-label { display: none; } .landing-page #teaser-replay { padding: .15rem .3rem; min-width: 28px; } .landing-page .teaser-stage .actor-name { font-size: .95rem; } }

.landing-page #teaser-replay .replay-label { display: none; }
.landing-page #teaser-replay { min-width: 28px; padding: .15rem .3rem; }

.landing-page .teaser-stage { padding-bottom: var(--desk-extension, 0px); }
.landing-page .teaser-stage figcaption { transform: translateY(var(--desk-extension, 0px)); }

.landing-page .signup-panel .updates { display: block; text-align: left; }
.landing-page .signup-panel .updates > p { margin: .45rem 0 .8rem; }

.landing-page .teaser-stage figcaption { visibility: hidden; }
.landing-page .scene-nameplate { position: absolute; bottom: 53px; z-index: 3; padding: .2rem .7rem; color: #34253b; background: #e9d7b6; border: 1px solid #826d57; box-shadow: 2px 2px 0 #aa967b; font: 1.2rem/1.2 "Cassandra Hand", cursive; transform: translateX(-50%) skew(-4deg); }
.landing-page .nameplate-jensen { left: 15%; }
.landing-page .nameplate-cassandra { left: 85%; }
.landing-page .scene-props text, .landing-page .props-backdrop text { font-family: "Cassandra Hand", cursive; }
@media (max-width: 760px) { .landing-page .scene-nameplate { bottom: 28px; font-size: .8rem; padding: .1rem .35rem; } .landing-page .nameplate-jensen { left: 25%; } .landing-page .nameplate-cassandra { left: 75%; } }

.landing-page .scene-nameplate { background: linear-gradient(165deg, #f0e0c4, #d9bf96); border-bottom: 2px solid #765b40; box-shadow: none; transform: translateX(-50%) skew(-7deg); isolation: isolate; }
.landing-page .scene-nameplate::before { content: ""; position: absolute; right: -9px; top: 0; bottom: -3px; width: 9px; background: #a48966; clip-path: polygon(0 0, 100% 100%, 0 100%); border-bottom: 1px solid #765b40; z-index: -1; }
.landing-page .scene-nameplate::after { content: ""; position: absolute; left: -4px; right: -11px; bottom: -5px; height: 5px; background: #b99d77; border: 1px solid #765b40; transform: skew(22deg); z-index: -1; }

[data-robo-scene] .hero-stamp { font-size: clamp(1.5rem, 4.6vw, 3.45rem); transform: translateX(-50%) rotate(-22deg); }
[data-robo-scene] .hero-stamp[data-state="impact"] { transform: translate(-50%, -14%) rotate(-26deg); }
.verdict-poof { position: absolute; left: 15%; bottom: clamp(90px, 8vw, 115px); width: 180px; height: 100px; transform: translateX(-50%); z-index: 4; pointer-events: none; }
@media (max-width: 760px) { [data-robo-scene] .hero-stamp { font-size: clamp(1.25rem, 8vw, 2.9rem); } .verdict-poof { left: 25%; bottom: clamp(58px, 12vw, 80px); width: 90px; height: 55px; } }

.robo-page .landing-content { padding-top: .25rem; }
.robo-page .landing-headline { margin-top: 1rem; }
.robo-page .sketch-bubble { padding: 1.1rem 13% calc(1.1rem + 48px); line-height: 1.4; }
.robo-page .bubble-slot[data-reserved="true"] > .sketch-bubble { top: auto; bottom: 0; }
.robo-page .verdict-poof { width: 205px; height: 115px; transform: translateX(-50%) scale(.85); }
.robo-page .verdict-poof[data-phase="expand"] { transform: translateX(-50%) scale(1.2); }
@media (max-width: 760px) { .robo-page .landing-headline { margin-top: 0; } .robo-page .homepage-teaser .sample-stage { row-gap: .15rem; } .robo-page .sketch-bubble { padding: .7rem 13% calc(.7rem + 48px); line-height: 1.35; } .robo-page .verdict-poof { width: 110px; height: 65px; } }

.robo-page .homepage-teaser .sample-stage > figure { margin-top: -60px; }
@media (max-width: 760px) { .robo-page .homepage-teaser .sample-stage > figure { margin-top: -30px; } }

.robo-page .homepage-teaser .teaser-controls { position: static; transform: none; width: max-content; margin: .6rem auto .5rem; }

/* Signup follows the full-width scene; mobile reading order matches the DOM. */
@media (max-width: 959px) {
  .landing-columns { grid-template-columns: minmax(0, 1fr); grid-template-areas: "hero" "signup" "clip"; }
  .landing-page .signup-panel .updates { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: .3rem 1.5rem; align-items: center; }
  .landing-page .signup-panel .updates h2 { font-size: 1.5rem; }
  .landing-page .signup-panel .updates > p { margin: .3rem 0 0; }
  .landing-page .signup-row { flex-direction: row; }
}
@media (max-width: 600px) {
  .landing-page .signup-panel .updates { display: block; }
  .landing-page .signup-panel .updates > p { margin: .5rem 0 1rem; }
  .landing-page .signup-row { flex-direction: column; }
}

/* End-only scene wash and raised, centered replay affordance. */
.landing-page .teaser-stage::after { content: ""; position: absolute; inset: 0; z-index: 5; background: rgba(255, 255, 255, .28); opacity: 0; pointer-events: none; }
.landing-page .teaser-stage[data-state="idle"]::after { opacity: 1; }
.landing-page .teaser-stage > .landing-headline { z-index: 6; }
.landing-page .homepage-teaser .teaser-controls { position: absolute; margin: 0; bottom: 145px; left: 50%; right: auto; transform: translateX(-50%); z-index: 6; }
.landing-page #teaser-replay { display: flex; align-items: center; justify-content: center; gap: 10px; width: 190px; min-height: 72px; padding: 0 22px; border: 1px solid rgba(70, 49, 94, .23); background: rgba(255, 250, 243, .7); backdrop-filter: blur(7px); color: var(--purple); box-shadow: 0 3px 10px rgba(70, 49, 94, .1); border-radius: 40px; }
.landing-page #teaser-replay[hidden] { display: none; }
.landing-page #teaser-replay span:first-child { font-size: 32px; line-height: 1; }
.landing-page #teaser-replay .replay-label { display: inline; font: 500 20px/1 Arial, sans-serif; }
.landing-page #teaser-replay:hover { background: rgba(255, 250, 243, .9); }
@media (min-width: 761px) { .landing-page .landing-headline { transform: translateY(-95px); } }
@media (max-width: 760px) {
  .landing-page .homepage-teaser .teaser-controls { top: 50%; bottom: auto; transform: translate(-50%, -50%); }
  .landing-page #teaser-replay { width: 150px; min-height: 52px; gap: 8px; padding: 0 16px; }
  .landing-page #teaser-replay span:first-child { font-size: 26px; }
  .landing-page #teaser-replay .replay-label { font-size: 17px; }
}
