@font-face { font-family: Geist; src: url('/assets/geist-regular.ttf') format('truetype'); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: Newsreader; src: url('/assets/newsreader-italic-latin.woff2') format('woff2'); font-weight: 400; font-style: italic; font-display: swap; }
:root { color-scheme: dark; --black: #000; --text: #eceeed; --quiet: #a5a6a8; --stage-height: 100vh; --story-viewport-height: 100vh; --phone-x: 0px; --phone-y: 0px; }
@supports (height: 100svh) { :root { --stage-height: 100dvh; --story-viewport-height: 100lvh; } }
* { box-sizing: border-box; }
html { background: #000; scrollbar-color: #35393b #000; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body { margin: 0; background: #000; color: var(--text); font: 400 14px/1.4 Geist,-apple-system,BlinkMacSystemFont,sans-serif; -webkit-font-smoothing: antialiased; }
/* Cover only the first layout handoff; keep native scrolling and fixed geometry. */
html.is-starting::after, html.is-revealing::after { content: ""; position: fixed; inset: 0; z-index: 100; background: #000; pointer-events: none; }
html.is-revealing::after { animation: startup-reveal 160ms ease-out both; }
@keyframes startup-reveal { from { opacity: 1; } to { opacity: 0; } }
@media (prefers-reduced-motion: reduce) { html.is-revealing::after { animation: none; opacity: 0; } }
/* A slow module still gets the story: keep its opening headline in place and
   reveal the phone only after its measured position is ready. No-JS uses the reader. */
html.is-story-loading .narrative:not(.is-enhanced) { height: calc(var(--story-viewport-height) + var(--story-travel)); }
html.is-story-loading .narrative:not(.is-enhanced) .stage { display: block; position: sticky; top: 0; height: var(--stage-height); overflow: clip; isolation: isolate; }
html.is-story-loading .narrative:not(.is-enhanced) :is(.phone, .hero-hand) { opacity: 0; }
html.is-story-loading .narrative:not(.is-enhanced) .story-reader { display: none; }
.is-enhanced .hero-hand-pose { animation: startup-phone 160ms ease-out; }
@keyframes startup-phone { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .is-enhanced .hero-hand-pose { animation: none; } }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
a, button { -webkit-tap-highlight-color: transparent; }
a:focus-visible, button:focus-visible { outline: 1px solid currentColor; outline-offset: 5px; }
.contact-link { display: inline-flex; justify-content: center; align-items: center; min-height: 44px; min-width: 44px; padding: 6px 4px; color: inherit; transition: color 160ms ease-out, opacity 160ms ease-out; }
.contact-link:hover { opacity: .78; }
.contact-link:active { opacity: .58; transition-duration: 90ms; }
.site-header { position: fixed; z-index: 10; top: max(22px,env(safe-area-inset-top)); right: max(36px,env(safe-area-inset-right)); color: #d9dbe0; }
.site-header .contact-link { font-size: .875rem; }
body:has(.narrative:not(.is-enhanced)) .site-header { background: #000b; padding-inline: 12px; border-radius: 3px; }
.site-footer { position: fixed; z-index: 10; bottom: max(22px,env(safe-area-inset-bottom)); left: max(36px,env(safe-area-inset-left)); right: max(36px,env(safe-area-inset-right)); display: flex; align-items: center; justify-content: space-between; gap: 14px; color: #94979c; font-size: .75rem; pointer-events: none; }
.yc-backing { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; margin-block: -14px; color: #d9dbe0; pointer-events: auto; }
.yc-backing .backed-by { color: #94979c; margin-right: 2px; }
.yc-backing img { display: block; width: 18px; height: 18px; }
.yc-backing:hover { opacity: .78; }
.site-header.is-on-light { color: #111713; }
.site-footer > span.is-on-light, .yc-backing.is-on-light, .yc-backing.is-on-light .backed-by { color: #4b605e; }
.has-landscape .site-footer > span.is-on-light, .has-landscape .yc-backing.is-on-light { color: #f0f1e9; text-shadow: 0 1px 6px #10241980; }
.has-landscape .yc-backing.is-on-light .backed-by { color: #d5dbd2; }
.narrative { position: relative; --story-screen-count: 12.096; --story-travel: calc(100vh * var(--story-screen-count,7.2)); }
@supports (height: 100svh) { .narrative { --story-travel: calc(100svh * var(--story-screen-count,7.2)); } }
.stage { display: none; }
.narrative.is-enhanced:not(.is-flow) { height: calc(var(--story-viewport-height) + var(--story-travel)); }
.is-enhanced:not(.is-flow) .stage { display: block; position: sticky; top: 0; height: var(--stage-height); overflow: clip; isolation: isolate; }
.work-scene { position: absolute; inset: 0; }
.phone { position: absolute; top: 14svh; left: 50%; width: min(420px,48svh,calc(100vw - 36px)); aspect-ratio: 1016 / 1744; transform: translate(calc(-50% + var(--phone-x)),var(--phone-y)); }
.device-art { display: block; width: 100%; height: 100%; user-select: none; pointer-events: none; }
.phone-screen { position: absolute; inset: 1.2% 2% 0; border-radius: 18% 18% 0 0 / 10.5% 10.5% 0 0; overflow: hidden; isolation: isolate; mask-image: linear-gradient(transparent 0%,transparent 8%,#000 11%,#000 89%,transparent 98%); }
.scene { position: absolute; inset: 0; opacity: 0; visibility: hidden; pointer-events: none; }
.scene--intro { opacity: 1; visibility: visible; }
.screen-composition { position: absolute; inset: 12% 7% 26%; display: flex; flex-direction: column; justify-content: center; align-items: center; }
h2 { font-weight: 400; margin: 0; }
.mountain-position { position: absolute; left: 50%; top: 44%; transform: translate(-50%,-50%); }
.pixel-mountains { display: block; width: 122.472px; height: 95.256px; user-select: none; }
.is-forming .pixel-mountains { opacity: 0; }
.spark-stream { position: absolute; left: 50%; top: 0; width: 192px; height: 100%; transform: translateX(-50%); pointer-events: none; }
.roster-composition { align-items: stretch; inset: 11% 12% 10%; }
.roster-composition h2 { font-size: 2.375rem; font-weight: 400; letter-spacing: -.055em; line-height: 1.1; margin-bottom: 26px; padding-left: 4px; }
.agent-roster { list-style: none; margin: 0; padding: 0; display: grid; gap: 24px; }
.agent-roster li { display: grid; grid-template-columns: 72px minmax(0,1fr); gap: 20px; align-items: center; }
.agent-art { display: block; width: 54px; height: 54px; }
.agent-roster .agent-art { width: 68px; height: 68px; justify-self: center; }
.agent-art svg { display: block; width: 100%; height: 100%; overflow: visible; }
.agent-identity { display: flex; flex-direction: column; gap: 4px; }
.agent-name { font-size: 1.375rem; font-weight: 400; line-height: 1.2; letter-spacing: -.025em; }
.agent-role { font-size: .875rem; line-height: 1.35; color: #a5a6a8; }
.agent-role.is-working { color: transparent; background: linear-gradient(100deg,#a5a6a8 30%,#f1f3f2 48%,#a5a6a8 66%) 100% 0 / 280% 100%; background-clip: text; -webkit-background-clip: text; }
.statement { font-size: clamp(1.625rem,3.2vw,1.9375rem); line-height: 1.22; letter-spacing: -.055em; text-align: center; }
.side-narrative { position: absolute; top: 42%; left: max(6vw,calc(50% - 480px)); width: 350px; height: 140px; transform: translateY(-50%); }
.side-narrative > * { position: absolute; top: 50%; left: 0; margin: 0; opacity: 0; visibility: hidden; transform: translateY(-50%); }
.side-narrative p { font-size: clamp(1.75rem,3.2vw,2.75rem); letter-spacing: -.055em; line-height: 1.18; }
.tool-marks { display: flex; flex-direction: column; align-items: flex-start; gap: 20px; }
.tool-label { font-size: clamp(1.75rem,3.2vw,2.75rem); font-weight: 400; letter-spacing: -.055em; line-height: 1.18; }
.tool-label-mobile { display: none; }
.tool-grid { display: flex; flex-direction: column; gap: 10px; }
.tool-row { display: flex; gap: 10px; width: max-content; }
.tool-tile { display: grid; place-items: center; flex: 0 0 auto; width: 54px; height: 54px; border: 1px solid transparent; border-radius: 13px; background: linear-gradient(145deg,#202021 0%,#171718 72%) padding-box, linear-gradient(160deg,#ffffff45 0%,#ffffff0c 28%,#ffffff02 78%) border-box; }
.tool-tile img { width: 28px; height: 28px; object-fit: contain; }
.ask-proposition > span { display: block; }
.ask-outcome { margin-top: 7px; opacity: 0; }
.orb-position { position: absolute; top: 44%; left: 50%; transform: translate(-50%,-50%); width: 200px; height: 200px; }
.orb-host, .orb-renderer { position: absolute; inset: 0; }
.orb-host > .orb-poster, .orb-renderer > svg { display: block; width: 100%; height: 100%; }
.orb-fallback { position: absolute; inset: 10%; border-radius: 50%; background: radial-gradient(circle at 34% 28%,#fff 0%,#d3eaf6 37%,#92b6d2 75%,#658ba9); }
.orb-poster { position: relative; }
.orb-host.is-live .orb-poster, .orb-host.is-live .orb-fallback { visibility: hidden; }
.request-line { position: absolute; left: 50%; top: 100%; width: 270px; margin-top: 12px; transform: translateX(-50%); display: flex; justify-content: center; align-items: center; gap: 7px; }
.request-copy { margin: 0; text-align: center; font-size: 1.125rem; letter-spacing: -.025em; color: #eceeed; }
.orb-closing-prompt { position: absolute; bottom: 100%; left: 50%; width: 250px; margin: 0 0 16px; transform: translateX(-50%); color: #cbd0d4; font-size: 1.0625rem; line-height: 1.4; letter-spacing: -.025em; text-align: center; opacity: 0; visibility: hidden; }
.request-line .speaking-agent { width: 28px; height: 28px; flex: 0 0 28px; opacity: 0; visibility: hidden; margin-left: -35px; }
.nature-layer { position: absolute; inset: 0; z-index: 2; opacity: 0; visibility: hidden; pointer-events: none; clip-path: circle(0px at 50% 60%); }
.nature-surface { position: absolute; inset: 0; background: linear-gradient(175deg,#dbeaf0 8%,#edf0e6 57%,#d2dfd1 100%); }
.nature-world { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform-origin: 0 0; }
.nature-shading { position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 90%,#03100973,transparent 53%),linear-gradient(180deg,#eff6f26b 0%,#eff6f22e 32%,transparent 52%,transparent 62%,#041812b3 100%); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); opacity: 0; visibility: hidden; pointer-events: none; }
.nature-poster, .nature-poster img, .nature-video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; }
.nature-poster:not(.is-loaded), .nature-video:not(.is-ready) { opacity: 0; }
.nature-poster { transition: opacity 320ms ease-out; }
.nature-video { pointer-events: none; transition: opacity 700ms ease-out; }
.closing-thought { position: absolute; z-index: 3; top: max(88px,10svh); left: 20px; right: 20px; text-align: center; pointer-events: none; }
.closing-clause { display: grid; margin: 0 0 14px; font-size: clamp(1rem,1.8vw,1.25rem); line-height: 1.35; letter-spacing: -.025em; opacity: 0; }
.closing-clause > span { grid-area: 1 / 1; }
.closing-preface { opacity: calc(1 - var(--closing-final,0)); }
.closing-resolution { opacity: var(--closing-final,0); }
.life-title { margin: 0; font: italic 400 clamp(3rem,5.7vw,5rem)/1.08 Newsreader,Georgia,serif; letter-spacing: -.025em; font-optical-sizing: auto; color: #edf1ec; opacity: 0; }
.life-ink { position: absolute; inset: 0; z-index: 3; opacity: 0; visibility: hidden; pointer-events: none; }
.life-ink .closing-clause { color: #111713; opacity: 1; visibility: visible; }
.life-ink .life-title { color: #111713; opacity: 1; }
.stage.is-ending-focused .nature-shading { opacity: 1; visibility: visible; transition: opacity 800ms ease; }
.stage:not(.is-ending-focused) .nature-shading { transition: none; }
.final-actions { position: absolute; z-index: 4; top: calc(max(88px,10svh) + clamp(3.24rem,6.156vw,5.4rem) + 66px); left: 0; right: 0; bottom: 0; text-align: center; opacity: 0; visibility: hidden; color: #111713; }
.media-pending { position: absolute; z-index: 4; bottom: 78px; left: 20px; right: 20px; margin: 0; text-align: center; color: #526863; font-size: .75rem; opacity: 0; }
.environment-control { position: absolute; z-index: 5; bottom: 76px; right: max(26px,env(safe-area-inset-right)); width: 44px; height: 44px; border: 0; background: none; padding: 12px; color: #f5f6f0; background: #0003; border-radius: 50%; cursor: pointer; }
.environment-control svg { fill: none; stroke: currentColor; stroke-width: 1.4; }
.environment-control .play-icon { display: none; }
.environment-control.is-paused .pause-icon { display: none; }
.environment-control.is-paused .play-icon { display: block; }
.story-tools { position: fixed; z-index: 20; left: 20px; right: 20px; top: 78px; pointer-events: none; }
.story-tools a { position: absolute; left: 0; top: 0; max-width: 100%; min-height: 44px; display: inline-flex; align-items: center; padding: 10px 12px; color: #eceeed; background: #000; border: 1px solid #656970; font-size: .8125rem; pointer-events: auto; transform: translateY(calc(-100% - 100px)); }
.story-tools a:focus { transform: none; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.story-reader { max-width: 720px; margin: 0 auto; padding: 100px 28px 90px; }
.reader-chapter { padding: 50px 0 100px; scroll-margin-top: 80px; }
.reader-chapter h2 { font-size: clamp(1.75rem,5vw,2.8rem); line-height: 1.15; letter-spacing: -.04em; }
.reader-lead { margin: 22px 0 36px; font-size: 1.125rem; color: #a5a6a8; }
.reader-roster { list-style: none; padding: 0; margin: 0; display: grid; gap: 22px; color: #a5a6a8; }
.reader-roster strong { display: block; color: #eceeed; font-size: 1.1875rem; font-weight: 600; }
.reader-tools { margin: 30px 0; }
.reader-tools img { object-fit: contain; }
.reader-statement { margin-top: 50px; font-size: 2rem; line-height: 1.2; letter-spacing: -.04em; }
.reader-orb { display: block; width: 170px; height: 170px; margin: 28px 0 8px; }
.reader-dialogue { list-style: none; padding: 0; margin: 0; display: grid; gap: 24px; font-size: 1.125rem; }
.reader-life { position: relative; isolation: isolate; overflow: hidden; width: 100vw; min-height: max(680px,100svh); left: 50%; transform: translateX(-50%); padding: 100px 28px 110px; text-align: center; color: #111713; background: #dbeaf0; }
.reader-landscape, .reader-landscape img { position: absolute; inset: 0; width: 100%; height: 100%; display: block; object-fit: cover; }
.reader-landscape { filter: blur(14px); transform: scale(1.05); }
.reader-life::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 0% 90%,#03100973,transparent 53%),linear-gradient(180deg,#eff6f26b 0%,#eff6f22e 32%,transparent 52%,transparent 62%,#041812b3 100%); pointer-events: none; }
.reader-life-copy { position: relative; z-index: 1; }
.reader-life h2 { font-size: 1rem; line-height: 1.4; }
.reader-life h2 em { display: block; margin-top: 15px; font: italic 400 clamp(2.8rem,8vw,4rem)/1.15 Newsreader,Georgia,serif; color: #111713; letter-spacing: -.05em; }
.reader-life-copy > p { margin-top: 32px; }
.reader-life-copy > .reader-closing-prompt { margin: 22px 0 16px; font-size: 1rem; letter-spacing: -.025em; }
.reader-contact { font-size: 1.125rem; text-decoration: underline; text-underline-offset: 5px; }
.reader-media-pending { color: #a5a6a8; font-size: .75rem; }
.is-flow .story-reader { max-width: none; padding: 100px 0 0; }
.is-flow .reader-chapter { max-width: 680px; margin: 0 auto; padding: 50px 28px 120px; }
.is-flow .reader-life { max-width: none; padding: 100px 28px 110px; }
.is-flow .reader-media-pending { color: #526863; }
.is-enhanced:not(.is-flow) .story-reader { position: absolute; inset: 0; padding: 0; margin: 0; max-width: none; pointer-events: none; }
.is-enhanced:not(.is-flow) .reader-chapter { position: absolute; left: 0; top: calc(var(--anchor-progress) * var(--story-travel)); width: 1px; height: 1px; min-height: 0; margin: 0; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; scroll-margin: 0; transform: none; }
#meet { --anchor-progress: 0; } #ask { --anchor-progress: .185; } #brief { --anchor-progress: .40; } #work { --anchor-progress: .565; } #crew { --anchor-progress: .72; } #life { --anchor-progress: 1; }
.not-found { min-height: 100svh; display: grid; place-content: center; text-align: center; padding: 24px; }
.not-found h1 { margin: 0 0 24px; font-size: 26px; font-weight: 400; letter-spacing: -.8px; }
.not-found a { color: #aaaeb4; text-decoration: underline; text-underline-offset: 5px; }
@media (max-width:900px) and (min-width:761px) { .side-narrative { left: 5vw; width: 230px; } .side-narrative p, .tool-label { font-size: 1.85rem; } .tool-grid, .tool-row { gap: 8px; } .tool-tile { width: 46px; height: 46px; border-radius: 12px; } .tool-tile img { width: 25px; height: 25px; } }
@media (max-width:760px) {
  .phone { width: min(380px,calc(100vw - 36px)); top: 20svh; }
  .side-narrative { top: max(84px,11svh); left: 20px; right: 20px; width: auto; height: 74px; transform: none; text-align: center; }
  .side-narrative > * { top: 50%; left: 50%; transform: translate(-50%,-50%); width: max-content; max-width: 100%; }
  .side-narrative p { font-size: clamp(1.5rem,6vw,2rem); }
  .side-narrative br { display: initial; }
  .side-narrative .tool-marks { top: -7px; transform: translateX(-50%); gap: 10px; align-items: center; }
  .tool-label { font-size: clamp(1.5rem,6vw,2rem); }
  .tool-label-mobile { display: inline; }
  .tool-label-end { display: none; }
  .narrative:not(.is-enhanced) .tool-grid { display: grid; grid-template-columns: repeat(6,34px); }
  .narrative:not(.is-enhanced) .tool-row { display: contents; }
  .tool-grid, .tool-row { gap: 8px; }
  .tool-tile { width: 34px; height: 34px; border-radius: 9px; }
  .tool-tile img { width: 19px; height: 19px; }
  .closing-thought { top: max(83px,10svh); left: 24px; right: 24px; }
  .closing-clause { max-width: 310px; margin: 0 auto 12px; font-size: 1rem; }
  .life-title { font-size: clamp(2.25rem,12.5vw,4rem); }
  .final-actions { top: calc(max(83px,10svh) + 126px); }
}
@media (max-width:600px) {
  .site-header { top: max(14px,env(safe-area-inset-top)); right: max(20px,env(safe-area-inset-right)); }
  .site-footer { left: max(20px,env(safe-area-inset-left)); right: max(20px,env(safe-area-inset-right)); bottom: max(18px,env(safe-area-inset-bottom)); font-size: .6875rem; }
  .yc-backing { gap: 5px; }
  .yc-backing img { width: 16px; height: 16px; }
  .agent-roster { gap: 1.25rem; }
  .orb-position { width: 180px; height: 180px; }
  .media-pending { bottom: 74px; }
}
@media (max-width:350px) {
  .phone { width: calc(100vw - 20px); top: 21svh; }
  .agent-roster li { grid-template-columns: 48px minmax(0,1fr); gap: 11px; }
  .agent-art { width: 48px; height: 48px; }
  .agent-roster { gap: 1.15rem; }
  .roster-composition { inset-inline: 9%; }
  .agent-name { font-size: 1.125rem; }
  .site-footer { left: 14px; right: 14px; gap: 8px; }
  .yc-backing { gap: 4px; }
  .yc-backing .backed-by { margin: 0; }
}
/* A real iPhone has less usable height with Safari's bars visible than a
   device-sized desktop preview. Keep readable type and fit the composition. */
.is-compact .phone { width: min(380px,49svh,calc(100vw - 36px)); top: 18svh; }
.is-compact .roster-composition { justify-content: flex-start; inset: 10% 9% 8%; }
@media (prefers-reduced-motion:reduce) { *, *::before, *::after { scroll-behavior: auto !important; } .contact-link, .nature-poster { transition: none; } }

@media (max-width:760px) {
  .environment-control { bottom: 82px; right: 20px; }
}
@media (prefers-reduced-motion:reduce) { .nature-video { transition: none; } }

.site-header { transition: opacity 300ms ease, visibility 300ms; }
.site-header.is-ending { opacity: 0; visibility: hidden; pointer-events: none; }
/* Rows move as single layers: no vertical movement or changing icon spacing. */
.tool-row { --row-offset: 0px; --row-travel: 7px; transform: translateX(var(--row-offset)); }
.tool-row:nth-child(2) { --row-offset: 20px; --row-travel: -6px; }
.tool-row:nth-child(3) { --row-offset: -5px; --row-travel: 6px; }
.tool-marks .tool-row { animation: tool-row-drift 13s ease-in-out -3s infinite alternate; animation-play-state: paused; }
.tool-marks .tool-row:nth-child(2) { animation-duration: 15s; animation-delay: -6s; }
.tool-marks .tool-row:nth-child(3) { animation-duration: 14s; animation-delay: -8s; }
.tool-marks.is-moving .tool-row { animation-play-state: running; }
@keyframes tool-row-drift { from { transform: translateX(var(--row-offset)); } to { transform: translateX(calc(var(--row-offset) + var(--row-travel))); } }
@media (max-width:760px) { .yc-backing .yc-name { display: none; } }
@media (max-width:900px) {
  .tool-row { --row-travel: 5px; }
  .tool-row:nth-child(2) { --row-offset: 12px; --row-travel: -4px; }
}
@media (prefers-reduced-motion:reduce) { .tool-marks .tool-row { animation: none; } .site-header { transition: none; } }

/* Personal preview: the result earns the quiet ending. */
.site-header .contact-link { border-bottom: 1px solid #656970; padding-inline: 0; }
.side-narrative [data-copy] > p { margin: 0; }
.side-narrative [data-copy] > .copy-detail { margin-top: 22px; max-width: 300px; font-size: 1rem; line-height: 1.55; letter-spacing: -.015em; color: #a5a6a8; }
.side-narrative .tool-marks .copy-detail { margin-top: 0; }
.side-narrative > [data-copy="promise"] { opacity: 1; visibility: visible; }
.promise-copy > p:first-child { font-size: clamp(2.25rem,3.4vw,2.75rem); line-height: 1.12; }
/* The meeting stays above a raised sheet; each person has one short action brief. */
.brief-composition { position: absolute; inset: 11.8% 4% auto; }
.meeting-upcoming { text-align: center; }
.meeting-upcoming h2, .meeting-upcoming h3 { margin: 0; font-size: 1.125rem; line-height: 1.25; font-weight: 400; letter-spacing: -.025em; }
.meeting-join { display: inline-flex; align-items: center; justify-content: center; gap: 7px; margin-top: 12px; padding: 6px 13px; border: 1px solid #34383c; border-radius: 18px; background: linear-gradient(145deg,#1a1c1e,#111213); color: #b6bbc0; font-size: .75rem; line-height: 1.3; }
.meeting-join img { display: block; width: 20px; height: 17px; object-fit: contain; filter: grayscale(1) brightness(1.4); opacity: .72; }
.brief-sheet { margin-top: 23px; margin-inline: 3%; padding: 10px 0 26px; overflow: hidden; border: 1px solid transparent; border-radius: 28px 28px 0 0; background: linear-gradient(165deg,#101113 0%,#030303 38%,#000 78%) padding-box,linear-gradient(140deg,#ffffff60 0%,#ffffff22 18%,#ffffff08 45%,#ffffff00 72%) border-box; }
.sheet-grip { width: 28px; height: 3px; margin: 0 auto 8px; border-radius: 3px; background: #555b61; opacity: .65; }
.brief-track { display: grid; grid-template-columns: 1fr 1fr; align-items: start; width: 200%; }
.meeting-profile { min-width: 0; padding: 0 16px; text-align: center; }
.profile-portrait { display: block; width: 72.5%; max-width: 194px; height: auto; aspect-ratio: 1; object-fit: cover; margin: 0 auto 4px; filter: grayscale(1) brightness(.96); mask-image: radial-gradient(ellipse closest-side,#000 34%,#000f 43%,#000e 51%,#000c 61%,#0009 71%,#0005 81%,#0002 91%,transparent 100%); }
.profile-name { display: flex; justify-content: center; align-items: center; gap: 9px; }
.profile-name h2, .profile-name h3 { margin: 0; font-size: 1.625rem; line-height: 1.2; letter-spacing: -.04em; font-weight: 400; }
.profile-linkedin { flex: 0 0 13px; width: 13px; height: 13px; color: #656c74; }
.profile-role { margin: 7px 0 0; font-size: .75rem; line-height: 1.5; color: #969da4; }
.profile-context { margin: 21px auto 0; max-width: 270px; }
.profile-context p { margin: 0; color: #9ea4aa; font-size: .8125rem; line-height: 1.6; letter-spacing: -.012em; }
.profile-commitment { color: #e1e3e5; }
.brief-position { display: flex; justify-content: center; gap: 7px; margin: 22px 0 0; }
.brief-position span { width: 4px; height: 4px; border-radius: 50%; background: #c8ced2; }
.brief-position span + span { opacity: .25; }
/* One connected job, with a quiet status change as each tool finishes its part. */
.workflow-composition { position: absolute; inset: 15% 7% auto; }
.workflow-card { padding: 27px 23px 22px; border: 1px solid transparent; border-radius: 27px 27px 18px 18px; background: linear-gradient(155deg,#111214 0%,#050506 46%,#000 100%) padding-box,linear-gradient(145deg,#ffffff52,#ffffff15 29%,#ffffff03 72%) border-box; }
.workflow-status { margin: 0 0 30px; font-size: 1.3125rem; font-weight: 400; line-height: 1.25; letter-spacing: -.03em; }
.workflow-steps { list-style: none; margin: 0; padding: 0; }
.workflow-step { position: relative; display: grid; grid-template-columns: 21px minmax(0,1fr) auto; gap: 12px; align-items: start; min-height: 87px; }
.workflow-step:last-child { min-height: 48px; }
.workflow-step:not(:last-child)::after { content: ''; position: absolute; left: 10px; top: 26px; bottom: 7px; width: 1px; background: #292d31; }
.workflow-marker { position: relative; display: grid; place-items: center; width: 21px; height: 21px; margin-top: 1px; border: 1px solid #4b5157; border-radius: 50%; color: #d6dce0; background: #0a0b0c; }
.workflow-check { display: none; width: 19px; height: 19px; fill: none; stroke: currentColor; stroke-width: 1.35; stroke-linecap: round; stroke-linejoin: round; }
.workflow-step[data-state="complete"] .workflow-check { display: block; }
.workflow-step[data-state="complete"] .workflow-marker { border-color: #768c7e; color: #b1cebc; background: #0c100e; }
.workflow-step[data-state="active"] .workflow-marker { border-color: transparent; }
.workflow-spinner { display: none; position: absolute; inset: 0; border: 1px solid #343b41; border-top-color: #e4eaef; border-right-color: #8997a3; border-radius: 50%; }
.workflow-step[data-state="active"] .workflow-spinner { display: block; }
.workflow-composition.is-running .workflow-spinner { animation: workflow-spin 1.2s linear infinite; }
.workflow-step[data-state="waiting"] .workflow-marker { border-color: #30363b; }
.workflow-step[data-state="waiting"] .workflow-marker::after { content: ''; width: 4px; height: 4px; border-radius: 50%; background: #67717a; }
.workflow-task h3 { margin: 0; color: #e2e5e7; font-size: .875rem; font-weight: 400; line-height: 1.5; letter-spacing: -.025em; }
.workflow-provider { display: flex; align-items: center; gap: 6px; margin: 7px 0 0; color: #919aa2; font-size: .6875rem; line-height: 1.3; }
.workflow-provider img { display: block; width: 14px; height: 14px; object-fit: contain; opacity: .95; }
.workflow-state { margin-top: 4px; color: #909aa2; font-size: .625rem; line-height: 1.5; }
.workflow-step[data-state="active"] .workflow-state { color: #d4dde5; }
.workflow-step[data-state="waiting"] .workflow-task h3, .workflow-step[data-state="waiting"] .workflow-state { color: #79828a; }
.reader-workflow { position: static; max-width: 360px; margin-top: 34px; }
.is-compact .workflow-composition { top: 10%; }
.is-compact .workflow-card { padding: 21px 18px; }
.is-compact .workflow-status { font-size: 1.25rem; margin-bottom: 24px; }
.is-compact .workflow-step { min-height: 70px; gap: 10px; }
.is-compact .workflow-step:last-child { min-height: 48px; }
@keyframes workflow-spin { to { transform: rotate(1turn); } }
@media (prefers-reduced-motion:reduce) { .workflow-composition.is-running .workflow-spinner { animation: none; } }
.roster-composition h2 { font-weight: 400; }
.agent-name { font-weight: 400; }
.agent-role { text-transform: none; }
.reader-chapter > .meeting-upcoming { margin-top: 32px; text-align: left; }
.reader-profiles { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 24px; margin-top: 24px; }
.reader-profiles .meeting-profile { padding: 18px 16px 30px; border: 1px solid transparent; border-radius: 28px 28px 0 0; background: linear-gradient(165deg,#101113,#000 78%) padding-box,linear-gradient(140deg,#ffffff40,#ffffff0a 45%,transparent 75%) border-box; }
.reader-profiles .profile-portrait { width: 194px; max-width: 93%; }
.reader-agents-title { margin: 36px 0 26px; font-size: 2.125rem; font-weight: 400; letter-spacing: -.05em; }
.reader-roster { margin-top: 0; gap: 30px; }
@media (max-width:760px) {
  .roster-composition { justify-content: flex-start; inset: 11% 9% 8%; }
  .roster-composition h2 { font-size: 2.375rem; margin-bottom: 26px; text-align: left; padding-left: 4px; }
  .agent-roster { grid-template-columns: minmax(0,1fr); gap: 22px; }
  .agent-roster li { grid-template-columns: 72px minmax(0,1fr); gap: 20px; text-align: left; }
  .agent-roster .agent-art { width: 68px; height: 68px; }
  .agent-name { font-size: 1.375rem; }
  .reader-roster { grid-template-columns: minmax(0,1fr); }
}
.is-compact .roster-composition h2 { font-size: 2.125rem; margin-bottom: 20px; }
.is-compact .agent-roster { gap: 18px; }
.is-compact .agent-roster li { grid-template-columns: 64px minmax(0,1fr); gap: 18px; }
.is-compact .agent-roster .agent-art { width: 60px; height: 60px; }
.is-compact .agent-name { font-size: 1.25rem; }
.is-compact-brief .agent-roster { gap: 14px; }
.is-compact-brief .agent-roster li { grid-template-columns: 56px minmax(0,1fr); }
.is-compact-brief .agent-roster .agent-art { width: 53px; height: 53px; }
.is-compact-roster .roster-composition h2 { font-size: 2.125rem; margin-bottom: 24px; }
.is-compact-roster .agent-roster { gap: 20px; }
.is-compact-roster .agent-roster li { grid-template-columns: 64px minmax(0,1fr); }
.is-compact-roster .agent-roster .agent-art { width: 60px; height: 60px; }
@media (min-width:761px) and (max-width:1000px) {
  .promise-copy > p:first-child { font-size: 1.85rem; }
  .side-narrative [data-copy] > .copy-detail { font-size: .875rem; max-width: 225px; }
  .desktop-break { display: none; }
}
@media (max-width:760px) {
  .side-narrative { top: max(85px,10svh); height: 112px; }
  .promise-copy > p:first-child { font-size: clamp(1.875rem,8.3vw,2.5rem); }
  .side-narrative [data-copy] > .copy-detail { font-size: .8125rem; line-height: 1.5; margin: 13px auto 0; max-width: 275px; }
  .side-narrative .tool-marks { top: 0; gap: 12px; }
  .tool-label-end { display: none; }
  .side-narrative .tool-marks .copy-detail { display: none; }
}
.is-compact .brief-composition { top: 11%; }
.is-compact .brief-sheet { margin-top: 18px; padding-bottom: 18px; }
.is-compact .brief-composition .profile-portrait { max-width: 156px; }
.is-compact .brief-composition .profile-name h3 { font-size: 1.5rem; }
.is-compact .brief-composition .profile-context { margin-top: 16px; }
.is-compact .brief-position { margin-top: 16px; }
.is-compact-brief .brief-composition { top: 10%; }
.is-compact-brief .meeting-upcoming h2 { font-size: 1rem; }
.is-compact-brief .meeting-join { margin-top: 7px; padding: 5px 12px; }
.is-compact-brief .brief-sheet { margin-top: 12px; padding-top: 8px; padding-bottom: 4px; }
.is-compact-brief .sheet-grip { margin-bottom: 5px; }
.is-compact-brief .brief-composition .profile-portrait { max-width: 123px; }
.is-compact-brief .brief-composition .profile-name h3 { font-size: 1.375rem; }
.is-compact-brief .brief-composition .profile-role { font-size: .6875rem; }
.is-compact-brief .brief-composition .profile-context { margin-top: 10px; }
.is-compact-brief .brief-composition .profile-context p { font-size: .75rem; }
.is-compact-brief .brief-position { margin-top: 6px; }
@media (max-width:480px) { .reader-profiles { grid-template-columns: 1fr; gap: 24px; } }
@media (max-width:350px) {
  .side-narrative { height: 105px; }
  .side-narrative [data-copy] > .copy-detail { font-size: .75rem; }
}

/* One quiet, accessible action follows the feature captions. */
.feature-action.preorder-button { position: absolute; z-index: 3; top: 0; left: max(6vw,calc(50% - 480px)); min-width: 134px; min-height: 46px; padding-inline: 26px; font-size: 14px; opacity: 0; visibility: hidden; }
.reader-feature-action.preorder-button { margin-top: 30px; }
@media (max-width:900px) and (min-width:761px) { .feature-action.preorder-button { left: 5vw; } }
@media (max-width:760px) {
  .feature-action.preorder-button { top: auto; left: 50%; bottom: max(24px,env(safe-area-inset-bottom)); transform: translateX(-50%); min-width: 136px; min-height: 46px; }
  .is-compact-brief .feature-action.preorder-button { bottom: max(16px,env(safe-area-inset-bottom)); }
}

/* Let the landscape settle, then make the next step unmistakable. */
.final-actions, .reader-final-actions { display: flex; flex-direction: column; align-items: center; gap: 0; }
.final-actions { pointer-events: none; }
.final-actions.is-revealed { opacity: 1; visibility: visible; transition: opacity 450ms ease; }
.final-actions.is-revealed a { pointer-events: auto; }
.final-actions:not(.is-revealed) { opacity: 0; visibility: hidden; transition: none; }
.final-actions .preorder-button, .reader-final-actions .preorder-button { background: linear-gradient(180deg,#26322c 0%,#1b251f 50%,#111a15 100%); color: #f5f6ef; border-color: #1d2820; min-height: 58px; min-width: 246px; padding-inline: 32px; font-size: 16px; letter-spacing: -.015em; box-shadow: 0 6px 24px #15281b26,inset 0 1px 0 #ffffff26,inset 0 -1px 0 #00000066; }
.final-actions .preorder-button:hover, .reader-final-actions .preorder-button:hover { border-color: #34473a; box-shadow: 0 7px 24px #15281b33,inset 0 1px 0 #ffffff33,inset 0 -1px 0 #00000059; }
.final-actions .preorder-button:active, .reader-final-actions .preorder-button:active { border-color: #18231c; box-shadow: 0 2px 8px #15281b26,inset 0 2px 3px #00000040,inset 0 -1px 0 #ffffff12; }
.final-actions .preorder-button:focus-visible, .reader-final-actions .preorder-button:focus-visible { outline: 2px solid #17231b; outline-offset: 5px; }
.reader-final-actions { margin-top: 24px; }
.ending-company { display: flex; align-items: flex-end; gap: 24px; text-align: left; color: #fff; }
.final-actions .ending-company { position: absolute; left: max(36px,6vw); bottom: max(96px,12svh); max-width: calc(100% - max(36px,6vw) - 96px); }
.reader-final-actions .ending-company { align-self: flex-start; margin-top: max(140px,20svh); }
.ending-story { width: 360px; max-width: 100%; margin: 0; font-size: 1rem; line-height: 1.65; letter-spacing: -.015em; text-wrap: pretty; color: #fff; text-shadow: 0 1px 12px #0008; }
.about-button { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: center; min-width: 136px; min-height: 44px; padding: 10px 26px; border: 1px solid #ffffffb3; border-radius: 999px; color: #fff; background: #ffffff14; font-size: .875rem; font-weight: 500; text-decoration: none; transition: background 180ms ease, border-color 180ms ease; }
.about-button:hover { background: #ffffff2e; border-color: #fff; }
.about-button:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
@media (max-width:760px) {
  .final-actions > .preorder-button, .reader-final-actions > .preorder-button { width: 256px; max-width: 100%; min-width: 0; min-height: 54px; font-size: 15px; }
  .ending-company { flex-direction: column; align-items: flex-start; gap: 16px; }
  .final-actions .ending-company { left: 24px; right: 24px; bottom: 82px; max-width: none; }
  .ending-story { width: 360px; font-size: .9375rem; line-height: 1.6; }
}
@media (prefers-reduced-motion:reduce) { .final-actions.is-revealed, .stage.is-ending-focused .nature-shading, .about-button { transition: none; } }

/* The company story is a separate page, available throughout the phone story. */
.footer-company { display: flex; align-items: center; gap: 18px; }
.footer-about { display: inline-flex; align-items: center; min-height: 44px; margin-block: -14px; pointer-events: auto; }
.footer-about:hover { color: var(--text); text-decoration: underline; text-underline-offset: 5px; }