/* Standalone pages (/pricing, /product, /pro, /power, /parrot, /jarvis, /use-cases) in the cinematic homepage system. Loads after styles.css. */
.cinematic-page{background:#fafaf8}
.page-hero{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:center;padding:clamp(16px,2.4vh,28px) clamp(14px,3vw,32px) 196px;background:#000;color:#fff;overflow:hidden}
.page-hero-bg{position:absolute;inset:0;z-index:-1;overflow:hidden;background:#000 url("assets/video-poster.jpg") center 40%/cover no-repeat}
.page-hero-bg:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.5) 0%,rgba(0,0,0,.62) 60%,rgba(0,0,0,.92) 100%)}
.page-hero-video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:0;transition:opacity 1.2s var(--ease)}
.page-hero-video.is-playing{opacity:1}
@media(max-width:720px){.page-hero-bg{animation:heroDrift 24s ease-in-out infinite alternate}}
@keyframes heroDrift{from{background-size:auto 100%;background-position:40% 40%}to{background-size:auto 112%;background-position:60% 45%}}

.demo-video{position:relative;margin:0;overflow:hidden;border-radius:22px;background:#111}
.demo-video video{display:block;width:100%;height:100%;object-fit:cover}
.demo-video-toggle{position:absolute;right:16px;bottom:16px;width:40px;height:40px;border-radius:50%;background:#fafaf8e6;color:#222;font-size:12px;display:grid;place-items:center;backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);box-shadow:0 4px 16px #00000014;opacity:.85;transition:opacity .25s var(--ease)}
.demo-video-toggle:hover{opacity:1}
.visual-stage .demo-video{border-radius:22px}
.page-intro{display:flex;flex-direction:column;align-items:center;text-align:center;padding:88px 0 0;max-width:1100px}
.page-intro .compatibility-pill{--trust-size:36px;margin:0 0 32px;padding:0 17px;background:#28282a;border:1px solid rgba(255,255,255,.4);color:#c4c2c3;height:36px}
.page-intro .subhead{margin-top:24px}
.headline-long{max-width:980px;font-size:clamp(30px,4.6vw,60px);line-height:1.18}
.headline-long span{white-space:normal}
.page-actions{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:12px;margin-top:36px}
.ghost-cta{display:inline-flex;align-items:center;min-height:48px;padding:0 22px;border-radius:999px;border:1px solid rgba(255,255,255,.28);background:rgba(40,40,42,.55);color:#e4e4e4;font-size:14px;font-weight:500;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);transition:background .25s var(--ease),color .25s var(--ease)}
.ghost-cta:hover{background:rgba(60,60,62,.7);color:#fff}
.page-note{font-size:11px;color:#a6a6a6;margin-top:18px}

.page-story{padding-bottom:0;background:transparent}

/* The first block of main rises into the hero. */
.visual-stage{position:relative;z-index:1;max-width:1120px;margin:-148px auto 0;padding:12px;border-radius:32px;background:#fff;box-shadow:0 1px 0 #00000008,0 24px 60px #1a181414;animation:reveal .85s var(--ease) both;animation-delay:.45s}
.visual-stage .brief-stage,.visual-stage .conversation-stage,.visual-stage .away-visual{border-radius:22px;margin:0}
.visual-stage .conversation-stage{min-height:420px;padding:48px max(32px,12%)}
.visual-stage .away-visual{aspect-ratio:2.2}

.wrapper-scene{display:grid;grid-template-columns:1fr 96px 1fr;align-items:center;gap:24px;padding:64px 48px;background:#f0f0ed;border-radius:22px;min-height:360px}
.terminal-card{background:#17191d;color:#e8e8e8;border-radius:16px;padding:24px;font:13px/22px ui-monospace,SFMono-Regular,Menlo,monospace;box-shadow:0 12px 32px #0000001f}
.terminal-dots{display:flex;gap:6px;margin-bottom:20px}.terminal-dots i{width:10px;height:10px;border-radius:50%;background:#3a3d42}
.terminal-prompt{color:#7fa872;margin-right:8px}
.story .terminal-card p{font-size:13px;line-height:24px;color:#e8e8e8}
.story .terminal-card .terminal-dim{color:#8b9097}
.wrapper-scene .spoken-brief blockquote{font-size:24px;line-height:1.5;letter-spacing:-.04em;margin:24px 0;font-weight:400}

.jarvis-scene{display:grid;gap:24px;padding:48px;background:#f0f0ed;border-radius:22px}
.jarvis-head{display:flex;align-items:center;gap:16px}
.jarvis-head>div{display:grid;gap:2px}.jarvis-head strong{font-size:16px;font-weight:500}.jarvis-head>div>span{font-size:12px;color:#888}
.jarvis-prompt{display:flex;align-items:center;gap:16px;padding:20px 24px;background:#fafaf8;border-radius:16px;color:#555}
.story .jarvis-prompt p{font-size:22px;line-height:30px;letter-spacing:-.03em;color:#222}
.jarvis-tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}
.jarvis-tiles>div{display:grid;gap:8px;padding:20px;background:#fafaf8;border-radius:14px}
.jarvis-tiles span{font-size:11px;color:#999}.jarvis-tiles strong{font-size:15px;font-weight:500;letter-spacing:-.02em}

.listen-scene{display:flex;flex-direction:column;align-items:center;text-align:center;gap:24px;padding:64px 48px;background:#f0f0ed;border-radius:22px}
.listen-orb{width:88px;height:88px;border-radius:50%;display:grid;place-items:center;background:#fafaf8;box-shadow:0 0 0 12px #fafaf880,0 0 0 26px #fafaf840}
.listen-scene blockquote{max-width:640px;margin:0;font-size:28px;line-height:1.4;letter-spacing:-.04em}
.listen-scene .frequency-options span{padding:10px 20px;border-radius:999px;font-size:13px;color:#888}
.listen-scene .frequency-options .is-on{background:#fff;color:#222;box-shadow:0 2px 8px #00000008}

/* Section building blocks */
.feature-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.feature-card{display:flex;flex-direction:column;gap:12px;padding:32px;background:#f0f0ed;border-radius:24px}
.feature-card h3{font-size:18px;line-height:26px;font-weight:500;letter-spacing:-.025em;margin-top:12px}
.story .feature-card p{font-size:14px;line-height:24px;color:#777}
.step-number{font-family:var(--font-display);font-size:28px;line-height:1;color:#b9b8b2}

.steps-section .section-heading{margin-bottom:40px}
.steps-list{list-style:none;padding:0;margin:0 auto;max-width:880px;display:grid;border-top:1px solid #e6e5e0}
.steps-list li{display:grid;grid-template-columns:72px 1fr;align-items:baseline;gap:16px;padding:28px 4px;border-bottom:1px solid #e6e5e0}
.story .steps-list p{font-size:18px;line-height:28px;color:#777}
.steps-list strong{color:#222;font-weight:500}
.detail-body li:before,.tier li:before{content:"";position:absolute;left:2px;top:8px;width:8px;height:8px;border-radius:50%;background:#d9edcf;box-shadow:inset 0 0 0 2px #4f8b43}
.detail-body code,.story .answer-body code,.story .faq-item code{font:13px ui-monospace,SFMono-Regular,Menlo,monospace;background:#efefeb;padding:2px 6px;border-radius:6px;color:#333}

.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;max-width:880px;margin:48px auto 0}
.facts>div{padding:24px;border-radius:20px;background:#f0f0ed}
.facts dt{font-size:11px;color:#999}
.facts dd{margin:8px 0 0;font-size:18px;font-weight:500;letter-spacing:-.02em;color:#222}
.story .facts p{font-size:12px;line-height:20px;color:#888;margin-top:8px}

.related-section .section-heading{margin-bottom:32px}
.related-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.related-card{position:relative;display:flex;flex-direction:column;gap:8px;padding:28px 56px 28px 28px;border-radius:20px;background:#f0f0ed;transition:background .25s var(--ease),transform .3s var(--ease)}
.related-card:hover{background:#e9e9e4;transform:translateY(-2px)}
.related-card strong{font-size:16px;font-weight:500;letter-spacing:-.02em}
.related-card>span:not(.related-arrow){font-size:13px;line-height:22px;color:#888}
.related-arrow{position:absolute;top:28px;right:28px;color:#999;transition:transform .3s var(--ease)}
.related-card:hover .related-arrow{transform:translate(2px,-2px);color:#222}

/* FAQ accordion */
.page-faq{max-width:880px;padding-top:120px;padding-bottom:64px}
.faq-items{border-top:1px solid #e6e5e0}
.faq-item{border-bottom:1px solid #e6e5e0}
.faq-item summary{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 4px;cursor:pointer;list-style:none;font-size:17px;line-height:26px;font-weight:500;letter-spacing:-.02em;color:#222;transition:color .25s var(--ease)}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary:hover{color:#000}
.faq-item summary:focus-visible{outline:2px solid #333;outline-offset:2px;border-radius:8px}
.faq-plus{position:relative;flex-shrink:0;width:28px;height:28px;border-radius:50%;background:#efefeb;transition:transform .35s var(--ease),background .25s var(--ease)}
.faq-plus:before,.faq-plus:after{content:"";position:absolute;left:50%;top:50%;width:10px;height:1.5px;margin:-.75px 0 0 -5px;background:#222;border-radius:2px}
.faq-plus:after{transform:rotate(90deg);transition:transform .35s var(--ease)}
.faq-item[open] .faq-plus{background:#222;transform:rotate(180deg)}
.faq-item[open] .faq-plus:before,.faq-item[open] .faq-plus:after{background:#fff}
.faq-item[open] .faq-plus:after{transform:rotate(0)}
.story .faq-item p{max-width:680px;padding:0 56px 28px 4px;font-size:15px;line-height:26px;color:#7a7a7a}
.faq-item[open] p{animation:faqIn .45s var(--ease)}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}

@media(max-width:1000px){
  .feature-card{padding:24px}
  .wrapper-scene{grid-template-columns:1fr 64px 1fr;padding:40px 24px;gap:16px}
}
@media(max-width:720px){
  .page-hero{padding:20px 20px 160px}
  .header{justify-content:space-between;z-index:4}
  .page-intro{padding-top:56px}
  .page-intro .compatibility-pill{font-size:11px;height:32px;margin-bottom:24px}
  .page-intro .headline{font-size:10vw;letter-spacing:-.06em}
  .page-intro .headline-long{font-size:7.4vw;letter-spacing:-.05em}
  .page-actions{margin-top:28px;flex-direction:column;width:100%;max-width:320px}
  .page-actions>a{width:100%;justify-content:center}
  .visual-stage{margin-top:-120px;padding:6px;border-radius:22px}
  .visual-stage .brief-stage,.visual-stage .conversation-stage,.visual-stage .away-visual,.wrapper-scene,.jarvis-scene,.listen-scene,.visual-stage .demo-video{border-radius:16px}
  .demo-video-toggle{right:10px;bottom:10px;width:34px;height:34px}
  .visual-stage .conversation-stage{padding:24px;min-height:380px}
  .visual-stage .away-visual{aspect-ratio:1.15}
  .wrapper-scene{grid-template-columns:1fr;padding:24px}
  .wrapper-scene .brief-connector{justify-content:center;height:32px}
  .wrapper-scene .brief-connector>span{flex:0 0 40px}
  .jarvis-scene{padding:24px}
  .jarvis-tiles{grid-template-columns:1fr}
  .listen-scene{padding:40px 20px}
  .listen-scene blockquote{font-size:22px}
  .feature-grid,.related-grid,.case-grid,.facts{grid-template-columns:1fr}
  .steps-list li{grid-template-columns:48px 1fr;padding:20px 0}
  .story .steps-list p{font-size:15px;line-height:24px}
  .step-number{font-size:22px}
  .page-faq{padding-top:80px;padding-bottom:32px}
  .faq-item summary{font-size:15px;line-height:22px;padding:20px 0}
  .story .faq-item p{padding:0 0 24px;font-size:14px;line-height:24px}
}
@media(max-width:420px){.page-hero{padding-left:16px;padding-right:16px}.page-story{padding:0 16px}}
@media(prefers-reduced-motion:reduce){.page-hero-bg{animation:none}.page-hero-video{display:none}.visual-stage{animation:none}.faq-item[open] p{animation:none}}

/* /download */
.ghost-cta-light{background:#fff;color:#222;border-color:#e2e1dc;backdrop-filter:none}
.ghost-cta-light:hover{background:#f3f3ef;color:#111}

/* FAQ heading in the display font on every shell page */
.story .page-faq .section-heading h2{font-family:var(--font-display);font-weight:400;letter-spacing:-.04em}