/* Landing hero chrome + Atticus phone component */

.hero.hero-cinematic {
    min-height: 100vh;
    padding-top: 108px;
    padding-bottom: 56px;
    color: #f4ecdc;
}
.hero.hero-cinematic::before { display: none; }
.hero-atmosphere {
    position: absolute; inset: 0; z-index: 0; overflow: hidden; background: #1a211c;
}
.hero-atmosphere img,
.hero-atmosphere video {
    position: absolute; inset: 0; width: 100%; height: 100%;
    object-fit: cover; object-position: 62% 50%;
}
.hero-atmosphere img { animation: atmosphere-drift 28s ease-in-out infinite alternate; }
.hero-atmosphere video { display: none; }
.hero-atmosphere.has-video video { display: block; }
.hero-atmosphere.has-video img { display: none; animation: none; }
.hero-scrim {
    position: absolute; inset: 0; z-index: 1; pointer-events: none;
    background:
        linear-gradient(90deg, rgba(14, 18, 15, 0.72) 0%, rgba(14, 18, 15, 0.38) 42%, rgba(14, 18, 15, 0.18) 100%),
        linear-gradient(180deg, rgba(14, 18, 15, 0.35) 0%, transparent 28%, rgba(14, 18, 15, 0.28) 100%);
}
.hero.hero-cinematic > .container { position: relative; z-index: 2; }
.hero.hero-cinematic .hero-content { gap: 48px; min-height: calc(100vh - 164px); }
.hero.hero-cinematic .hero-description { color: rgba(244, 236, 220, 0.9); max-width: 680px; }
.hero.hero-cinematic .hero-description .text-accent { color: #d4b072; }
.hero.hero-cinematic .rotator-word { color: #edcf8f; font-weight: 600; }
.hero.hero-cinematic .hero-note { color: rgba(244, 236, 220, 0.8); }
.hero.hero-cinematic .hero-badge { background: rgba(244, 236, 220, 0.12); color: #f4ecdc; }
.hero.hero-cinematic .btn-primary { background: #f4ecdc; color: #1f3329; }
.hero.hero-cinematic .btn-primary:hover { background: #fff8ea; color: #1f3329; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.28); }
.hero.hero-cinematic .hero-visual { display: flex; justify-content: center; align-items: center; }
.header:not(.scrolled) .logo-ink { display: none; }
.header.scrolled .logo-cream { display: none; }
.header:not(.scrolled) .nav-links a { color: rgba(244, 236, 220, 0.78); }
.header:not(.scrolled) .nav-links a:hover,
.header:not(.scrolled) .nav-links a.active { color: #f4ecdc; }
.header:not(.scrolled) .nav-links a::after { background: #f4ecdc; }
.header:not(.scrolled) .btn-primary { background: #f4ecdc; color: #1f3329; }
.header:not(.scrolled) .mobile-menu-btn span { background: #f4ecdc; }
@keyframes atmosphere-drift { from { transform: scale(1); } to { transform: scale(1.06); } }
@media (prefers-reduced-motion: reduce) { .hero-atmosphere img { animation: none; } }

/* Smaller laptops: keep the two-column hero, tighten the gap so copy still fits three lines. */
@media (max-width: 1280px) {
    .hero.hero-cinematic .hero-content { gap: 32px; }
    .ahp-stage { --w: min(clamp(300px, 26vw, 380px), calc((100vh - 88px) / 2.35)); }
}

/* Tablet and below: copy first, phone scales down, no 100vh stretch gap. */
@media (max-width: 1100px) {
    .hero.hero-cinematic {
        min-height: 0;
        padding-top: 96px;
        padding-bottom: 40px;
    }
    .hero.hero-cinematic .hero-content {
        grid-template-columns: 1fr;
        gap: 28px;
        min-height: 0;
        align-content: start;
    }
    .hero.hero-cinematic .hero-content > * { min-width: 0; }
    .hero.hero-cinematic .hero-text { text-align: center; }
    .hero.hero-cinematic .hero-description { max-width: min(42rem, 100%); margin-left: auto; margin-right: auto; }
    .hero.hero-cinematic .hero-buttons { justify-content: center; }
    .hero.hero-cinematic .hero-visual { order: 0; }
    .ahp-stage {
        --w: clamp(240px, 42vw, 320px);
        width: calc(var(--w) + 36px);
        min-height: calc(var(--w) * 2.24 + 32px);
    }
}

@media (max-width: 760px) {
    .hero.hero-cinematic { padding-top: 88px; padding-bottom: 32px; }
    .hero.hero-cinematic > .container { max-width: 100%; }
    .hero.hero-cinematic .hero-content { width: 100%; max-width: 100%; }
    .hero.hero-cinematic h1 { font-size: clamp(2.25rem, 9vw, 2.75rem); }
    .hero.hero-cinematic .rotator-word { display: block; }
    .hero.hero-cinematic .hero-text {
        width: 100%;
        max-width: calc(100vw - 48px);
        padding: 0;
        box-sizing: border-box;
    }
    .hero.hero-cinematic .hero-description,
    .hero.hero-cinematic .hero-note {
        width: 100%;
        max-width: calc(100vw - 48px);
        box-sizing: border-box;
        overflow-wrap: break-word;
        font-size: 1.0625rem;
    }
    .hero.hero-cinematic .hero-description br { display: none; }
    .ahp-stage {
        --w: clamp(220px, 64vw, 300px);
        width: calc(var(--w) + 24px);
        min-height: calc(var(--w) * 2.24 + 24px);
    }
}

/* Below-fold: same cream-on-forest as the hero header */
.header.scrolled {
    background: rgba(244, 236, 220, 0.92);
}

.books-strip {
    border-top: none;
}

.how-it-works .section-header h2,
.for-authors-text h2 {
    color: #f4ecdc;
}

.how-it-works .section-header p,
.for-authors-text p,
.how-it-works .step p {
    color: rgba(244, 236, 220, 0.72);
}

.how-it-works .step h3 {
    color: #f4ecdc;
}

.for-authors-cta .btn-accent {
    background: #f4ecdc;
    color: #1f3329;
}

.for-authors-cta .btn-accent:hover {
    background: #fff8ea;
    color: #1f3329;
}

.footer {
    background: #1a211c;
}

.prompt-card {
    background: #f4ecdc;
}

@media (prefers-reduced-motion: reduce) {
    .animate-on-scroll {
        opacity: 1;
        transform: none;
    }
}

/* ATTICUS PHONE — shared component styles. Every class prefixed .ahp-
   Geometry measured off 1320×2868 captures (iPhone 16 Pro Max, 440×956pt):
   1cqw = 1% of screen width, 1cqh = 1% of screen height. */

/* ── stage / device (transparent outside the phone) ─────────────────────── */
.ahp-stage{--w:min(clamp(340px,29vw,440px),calc((100vh - 96px) / 2.3));position:relative;isolation:isolate;display:grid;place-items:center;width:calc(var(--w) + 60px);min-height:calc(var(--w) * 2.24 + 48px);perspective:2000px;font-family:"Merriweather Sans",system-ui,sans-serif}
.ahp-stage *{box-sizing:border-box;margin:0;padding:0}
/* localized forest pillow so the window light does not melt the right rail */
.ahp-stage::before{content:"";position:absolute;z-index:-1;left:4%;top:3%;width:92%;height:94%;border-radius:46% / 40%;background:radial-gradient(ellipse at 54% 44%,rgb(8 18 14 / 86%) 0%,rgb(12 24 18 / 62%) 34%,rgb(14 28 20 / 28%) 58%,transparent 74%);filter:blur(28px);pointer-events:none}
.ahp-ground{position:absolute;z-index:-2;left:8%;bottom:.6%;width:84%;height:12%;border-radius:50%;background:radial-gradient(ellipse,rgb(6 14 11 / 62%) 0 18%,rgb(10 20 16 / 32%) 46%,transparent 76%);filter:blur(18px)}
/* titanium: dark body for separation; sunlight is a thin warm rim on the window-facing right edge */
.ahp-phone{position:relative;width:var(--w);padding:calc(var(--w) * .021);border-radius:calc(var(--w) * .156);transform-style:preserve-3d;background:linear-gradient(90deg,#5e605a 0%,#d4cec0 1.5%,#efe8d8 3.4%,#8e8e86 8%,#3d3f3b 18%,#323430 48%,#2a2c28 82%,#232522 91%,#3a382f 95%,#f2ddb0 97.6%,#e8c98a 99.2%,#4a4638 100%);box-shadow:0 2px 3px rgb(0 0 0 / 30%),0 12px 22px rgb(8 16 12 / 32%),0 36px 70px rgb(8 16 12 / 46%),22px 6px 48px rgb(6 16 12 / 48%),inset 1px 1px 0 rgb(255 255 255 / 42%),inset -1.5px 0 0 rgb(255 230 186 / 62%),inset -1px -1px 0 rgb(0 0 0 / 48%);animation:ahp-breathe 10s ease-in-out infinite}
.ahp-phone::before{content:"";position:absolute;z-index:80;inset:-1px;border-radius:inherit;padding:1.2px;background:linear-gradient(90deg,rgb(255 248 236 / 42%) 0%,rgb(255 255 255 / 10%) 10%,transparent 26%,transparent 78%,rgb(255 228 176 / 55%) 92%,rgb(255 244 214 / 92%) 100%);-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.ahp-btn{position:absolute;z-index:-1;width:3px;border-radius:3px;background:linear-gradient(#d8d3c8,#5c5d58 18% 82%,#a4a096);box-shadow:0 0 0 1px rgb(0 0 0 / 26%)}
.ahp-btn--a{left:-3px;top:19%;height:5%}.ahp-btn--u{left:-3px;top:27%;height:8%}.ahp-btn--d{left:-3px;top:37%;height:8%}
.ahp-btn--p{right:-3px;top:29%;height:13%;background:linear-gradient(#8a8a82,#3f403c 18% 82%,#6d6d66)}
.ahp-screen{position:relative;container-type:size;width:100%;aspect-ratio:440/956;overflow:hidden;border-radius:calc(var(--w) * .135);background:#f3ebe0;color:#171310;box-shadow:inset 0 0 0 1.5px rgb(0 0 0 / 88%),inset 0 0 0 3px rgb(255 255 255 / 8%),0 0 0 1px rgb(255 255 255 / 18%)}
.ahp-app{position:absolute;inset:0;overflow:hidden;background:#f3ebe0}
.ahp-warm{position:absolute;z-index:60;inset:0;pointer-events:none;background:linear-gradient(200deg,rgb(255 236 197 / 22%),rgb(255 244 224 / 6%) 46%,rgb(255 228 186 / 14%));mix-blend-mode:soft-light}
.ahp-glass{position:absolute;z-index:95;inset:0;pointer-events:none;background:linear-gradient(118deg,rgb(255 255 255 / 9%),transparent 22% 100%);mix-blend-mode:screen}
.ahp-island{position:absolute;z-index:75;top:1.15cqh;left:50%;width:28.4cqw;height:3.8cqh;border-radius:999px;background:#030404;transform:translateX(-50%)}

/* status bar (x-demo only) */
.ahp-status{position:absolute;z-index:70;top:0;left:0;right:0;display:flex;align-items:center;justify-content:space-between;height:5.9cqh;padding:0 5.4cqw 0 5cqw;color:#05080d;font-family:-apple-system,"SF Pro Text",system-ui,sans-serif;font-size:3.9cqw;font-weight:600;letter-spacing:-.01em;pointer-events:none;transition:color 300ms ease}
.ahp-app[data-view="player"] .ahp-status{color:#fff}
.ahp-time{width:28cqw;text-align:center}
.ahp-sicons{display:flex;align-items:center;gap:1.4cqw}
.ahp-sicons svg{height:2.6cqw;width:auto;display:block}
.ahp-stage[data-mode="hero"] .ahp-status{display:none}
.ahp-stage[data-mode="hero"] .ahp-sugg{display:none}

/* ── screens ─────────────────────────────────────────────────────────────── */
.ahp-library,.ahp-chat{position:absolute;inset:0;transform-origin:50% 42%}
.ahp-library{z-index:4;transition:opacity 420ms cubic-bezier(.4,0,.6,1) 60ms,transform 650ms cubic-bezier(.2,.85,.25,1)}
.ahp-app:not([data-view="library"]) .ahp-library{opacity:.55;transform:scale(.955);pointer-events:none}
.ahp-chat{z-index:12;background:#f3ebe0;opacity:0;transform:scale(1.035);pointer-events:none;transition:opacity 420ms ease 40ms,transform 650ms cubic-bezier(.2,.85,.25,1)}
.ahp-app[data-view="chat"] .ahp-chat{opacity:1;transform:none;pointer-events:auto}
.ahp-app:not([data-view="chat"]) .ahp-chat{transition:opacity 320ms ease,transform 0s 320ms}
.ahp-app.returning .ahp-chat{transform:scale(.985);transition:opacity 480ms cubic-bezier(.4,0,.6,1) 60ms,transform 720ms cubic-bezier(.25,.9,.25,1)}
.ahp-app.returning .ahp-library{transition:opacity 480ms cubic-bezier(.4,0,.6,1) 120ms,transform 720ms cubic-bezier(.25,.9,.25,1)}
.ahp-chat.ahp-mute{visibility:hidden}

/* ── library ─────────────────────────────────────────────────────────────── */
.ahp-lhead{position:absolute;top:5.9cqh;left:0;right:0;display:flex;align-items:center;justify-content:space-between;height:6.6cqh;padding:0 5cqw}
.ahp-brand{display:flex;align-items:center;gap:2cqw}
.ahp-mark{width:10cqw;height:10cqw;display:block;object-fit:contain}
.ahp-word{display:block;height:5.8cqw;width:auto}
.ahp-beta{margin-left:.6cqw;padding:.55cqh 1.6cqw;border-radius:1.4cqw;color:#4a90f8;background:#e3eefe;font-size:2.5cqw;font-weight:700;letter-spacing:.04em}
.ahp-tools{display:flex;gap:2.8cqw}
.ahp-tool{display:grid;place-items:center;width:7.3cqw;aspect-ratio:1;border-radius:50%;color:#5f5749;background:#efe6d6}
.ahp-tool svg{width:58%;height:58%}
.ahp-h2{position:absolute;left:4.7cqw;font-size:6.36cqw;line-height:1;font-weight:800;letter-spacing:-.035em;color:#0f172a}
.ahp-h2--cr{top:13.9cqh}.ahp-h2--ml{top:64.4cqh}
.ahp-rail{position:absolute;top:18.4cqh;left:0;right:0;display:flex;gap:3.4cqw;padding-left:4.9cqw;overflow:hidden}
.ahp-card{flex:0 0 60cqw;display:flex;flex-direction:column;height:43.8cqh;padding:2.5cqw 2.7cqw 3.6cqw;border-radius:5.45cqw;color:#fff}
.ahp-card--purple{background:linear-gradient(163deg,#b45fe6 0%,#9046cd 26%,#7229a4 56%,#4d0f74 84%,#3d0a5c 100%);box-shadow:0 12px 26px rgb(61 7 92 / 24%)}
.ahp-card--blue{background:linear-gradient(163deg,#5b9df0 0%,#3f6fd0 34%,#22409e 72%,#152a72 100%);box-shadow:0 12px 26px rgb(21 42 114 / 22%)}
.ahp-coverwrap{width:100%;aspect-ratio:1;overflow:hidden;border-radius:3.64cqw;background:#fff;transition:background 200ms ease;box-shadow:0 8px 14px rgb(0 0 0 / 36%),0 3px 5px rgb(0 0 0 / 26%)}
.ahp-cover{display:block;width:100%;height:100%;object-fit:cover}
.ahp-coverwrap.ahp-hollow,.ahp-pwrap.ahp-hollow{background:transparent}
.ahp-track{height:.9cqw;margin:5cqw 0 1.8cqw;overflow:hidden;border-radius:999px;background:rgb(255 255 255 / 22%)}
.ahp-track i{display:block;height:100%;border-radius:inherit;background:#fff}
.ahp-plabel{color:rgb(255 255 255 / 88%);font-size:2.5cqw;font-weight:500;letter-spacing:.27cqw}
.ahp-btitle{margin-top:2cqw;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:4.09cqw;line-height:1.2;font-weight:800;letter-spacing:-.02em}
.ahp-bauthor{margin-top:.6cqw;overflow:hidden;color:rgb(255 255 255 / 90%);white-space:nowrap;text-overflow:ellipsis;font-size:3.18cqw;font-weight:400}
.ahp-acts{display:grid;grid-template-columns:1fr 1fr;gap:2.3cqw;margin-top:auto}
.ahp-acts--one{grid-template-columns:1fr}
.ahp-pill{position:relative;display:flex;align-items:center;justify-content:center;gap:1.3cqw;height:8.6cqw;border:0;border-radius:999px;color:#0f172a;background:#fff;font:inherit;font-size:3.18cqw;font-weight:700;letter-spacing:-.01em;box-shadow:0 4px 9px rgb(0 0 0 / 15%)}
.ahp-pill svg{width:2.9cqw;height:2.9cqw}
.ahp-ask{color:#fff;background:#3b82f6;box-shadow:0 4px 12px rgb(59 130 246 / 46%)}
/* one gentle invitation before the tap */
.ahp-ask.ahp-invite{animation:ahp-invite 900ms cubic-bezier(.3,.7,.3,1) 1}
@keyframes ahp-invite{0%,100%{box-shadow:0 4px 12px rgb(59 130 246 / 46%)}45%{box-shadow:0 4px 12px rgb(59 130 246 / 46%),0 0 0 1.6cqw rgb(59 130 246 / 28%)}}
.ahp-grid{position:absolute;top:68.3cqh;left:4.7cqw;right:4.7cqw;display:grid;grid-template-columns:1fr 1fr;gap:4cqw}
.ahp-tile{aspect-ratio:1;overflow:hidden;border-radius:2.73cqw;background:#fff;box-shadow:0 6px 14px rgb(15 23 42 / 12%)}
.ahp-tile img{width:100%;height:100%;object-fit:cover}
.ahp-tabs{position:absolute;z-index:31;left:6.8cqw;right:6.8cqw;bottom:2.6cqh;display:grid;grid-template-columns:repeat(3,1fr);align-items:center;height:5.9cqh;padding:.4cqh 1.4cqw;border-radius:999px;background:rgb(247 239 226 / 94%);box-shadow:0 8px 24px rgb(15 23 42 / 12%),0 0 0 .5px rgb(15 23 42 / 5%);backdrop-filter:blur(18px)}
.ahp-tab{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:.35cqh;height:100%;border-radius:999px;color:#2c3646;font-size:2.73cqw;font-weight:500}
.ahp-tab svg{width:5.9cqw;height:5.9cqw}
.ahp-tab.on{color:#3b82f6;background:#d8e7fb;font-weight:600}
/* hero: no tags tab, no mini player — but a full shelf under the rail */
.ahp-stage[data-mode="hero"] .ahp-mini,.ahp-stage[data-mode="hero"] .ahp-tab--tags{display:none}
.ahp-stage[data-mode="hero"] .ahp-tabs{grid-template-columns:1fr 1fr;left:22cqw;right:22cqw}
.ahp-stage[data-mode="hero"] .ahp-h2--cr{top:13.2cqh}
.ahp-stage[data-mode="hero"] .ahp-rail{top:17.8cqh}
.ahp-stage[data-mode="hero"] .ahp-h2--ml{top:65.4cqh}
.ahp-stage[data-mode="hero"] .ahp-grid{top:70.3cqh;bottom:5.1cqh;overflow:hidden;grid-template-columns:repeat(3,1fr);grid-auto-rows:max-content;align-content:start;gap:3cqw}

/* ── mini player (x-demo) ────────────────────────────────────────────────── */
.ahp-mini{position:absolute;z-index:34;left:6.8cqw;right:6.8cqw;bottom:9.7cqh;display:flex;align-items:center;gap:2.6cqw;height:4.9cqh;padding:0 2.4cqw;border-radius:999px;background:rgb(247 239 226 / 92%);box-shadow:0 6px 20px rgb(15 23 42 / 14%),0 0 0 .5px rgb(15 23 42 / 6%);backdrop-filter:blur(18px);transition:opacity 300ms ease,transform 460ms cubic-bezier(.2,.85,.25,1)}
.ahp-app[data-view="player"] .ahp-mini{opacity:0;transform:translateY(3cqh) scale(.96);pointer-events:none}
.ahp-mcover{flex:0 0 auto;width:7.3cqw;aspect-ratio:1;border-radius:1.36cqw;object-fit:cover;box-shadow:0 2px 5px rgb(15 23 42 / 20%)}
.ahp-mcopy{flex:1;min-width:0}
.ahp-mtitle{overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-size:3.4cqw;font-weight:700;letter-spacing:-.02em;color:#111827}
.ahp-msub{display:flex;gap:.8cqw;margin-top:.2cqh;color:#3f4a5a;font-size:2.95cqw}
.ahp-msub i{flex:1;min-width:0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font-style:normal}
.ahp-msub b{flex:0 0 auto;font-weight:400;font-variant-numeric:tabular-nums}
.ahp-mctrl{display:flex;align-items:center;gap:1.6cqw;color:#111827}
.ahp-mctrl svg{display:block}
.ahp-c15,.ahp-c30{width:6.6cqw;height:6.6cqw}
.ahp-cpause{width:9.6cqw;height:9.6cqw}

/* ── full player sheet ───────────────────────────────────────────────────── */
.ahp-player{position:absolute;z-index:8;inset:0;display:flex;flex-direction:column;padding:6.9cqh 4.64cqw 2.6cqh;color:#fff;background:linear-gradient(#4a8bf5 0%,#3b74ea 16%,#2c58cd 36%,#1e3d99 58%,#14265c 80%,#0c1430 100%);transform:translateY(100%);transition:transform 660ms cubic-bezier(.2,.85,.25,1);box-shadow:0 -12px 40px rgb(4 10 30 / 40%)}
.ahp-app[data-view="player"] .ahp-player,.ahp-app[data-view="chat"] .ahp-player{transform:none}
/* hero: the chat sits on the library, so the sheet only rises when it is the view */
.ahp-stage[data-mode="hero"] .ahp-app[data-view="chat"] .ahp-player{transform:translateY(100%)}
.ahp-stage[data-mode="hero"] .ahp-app[data-view="player"] .ahp-player{transform:none}
/* the chat is opaque, so it must cover before the sheet slides off the shelf */
.ahp-stage[data-mode="hero"] .ahp-app[data-view="chat"] .ahp-chat{transition:opacity 200ms ease,transform 650ms cubic-bezier(.2,.85,.25,1)}
.ahp-pgrab{flex:0 0 auto;width:9.9cqw;height:.52cqh;margin:0 auto;border-radius:999px;background:rgb(255 255 255 / 62%)}
.ahp-phead{flex:0 0 auto;display:flex;align-items:flex-start;gap:3cqw;margin-top:2cqh}
.ahp-pwrap{flex:0 0 auto;width:22.8cqw;aspect-ratio:1;overflow:hidden;border-radius:2.73cqw;background:#fff;transition:background 200ms ease;box-shadow:0 6px 16px rgb(4 10 30 / 34%)}
.ahp-pcover{display:block;width:100%;height:100%;object-fit:cover}
.ahp-pmeta{flex:1;min-width:0;padding-top:1.6cqh}
.ahp-ptitle{font-size:5.2cqw;line-height:1.1;font-weight:800;letter-spacing:-.03em}
.ahp-pauth{margin-top:.4cqh;color:rgb(255 255 255 / 88%);font-size:4cqw;font-weight:400}
.ahp-pchap{margin-top:.35cqh;overflow:hidden;color:rgb(255 255 255 / 78%);white-space:nowrap;text-overflow:ellipsis;font-size:3.3cqw;font-weight:400}
.ahp-queue{flex:0 0 auto;display:grid;place-items:center;width:9.4cqw;aspect-ratio:1;margin-top:1.9cqh;border-radius:50%;background:rgb(255 255 255 / 18%)}
.ahp-queue svg{width:52%;height:52%}
.ahp-seg{flex:0 0 auto;display:grid;grid-template-columns:1fr 1fr;gap:.4cqw;margin-top:2.6cqh;padding:.4cqw;border-radius:999px;background:rgb(255 255 255 / 14%)}
.ahp-segb{display:flex;align-items:center;justify-content:center;gap:1.6cqw;height:4cqh;border-radius:999px;color:rgb(255 255 255 / 70%);font-size:4cqw;font-weight:500;transition:background 320ms ease,color 320ms ease}
.ahp-segb svg{width:4cqw;height:4cqw}
.ahp-app[data-tab="ask"] .ahp-segb--a,.ahp-app[data-tab="transcript"] .ahp-segb--t{color:#fff;background:rgb(255 255 255 / 26%);font-weight:600}
.ahp-panel{position:relative;flex:1;min-height:0;margin-top:4.8cqh;overflow:hidden}
.ahp-pane{position:absolute;inset:0;z-index:1;opacity:0;pointer-events:none;transition:opacity 300ms ease,transform 460ms cubic-bezier(.2,.85,.25,1)}
.ahp-pane--a{transform:translateX(-4cqw)}
.ahp-pane--t{transform:translateX(4cqw)}
.ahp-app[data-tab="ask"] .ahp-pane--a,.ahp-app[data-tab="transcript"] .ahp-pane--t{opacity:1;transform:none;pointer-events:auto}
.ahp-prow{display:flex;align-items:center;gap:2.2cqw;height:4.5cqh;padding:0 3.2cqw;border-radius:2.4cqw;background:rgb(255 255 255 / 15%);font-size:4.2cqw;font-weight:400;white-space:nowrap}
.ahp-prow+.ahp-prow{margin-top:1.1cqh}
.ahp-prow svg{flex:0 0 auto;width:4cqw;height:4cqw}
.ahp-ptime{margin-left:auto;color:rgb(255 255 255 / 80%);font-size:3.6cqw;font-variant-numeric:tabular-nums}
.ahp-tagb{display:flex;align-items:center;gap:1.2cqw;height:3.1cqh;padding:0 2.4cqw;border-radius:999px;background:rgb(255 255 255 / 22%);font-size:3.6cqw;font-weight:500}
.ahp-tagb svg{width:3.2cqw;height:3.2cqw}
.ahp-rel{display:flex;align-items:center;margin:3.1cqh 0 .4cqh}
.ahp-rel span{color:rgb(255 255 255 / 66%);font-size:2.95cqw;font-weight:600;letter-spacing:.14em}
.ahp-refresh{display:grid;place-items:center;width:6.4cqw;aspect-ratio:1;margin-left:auto;border-radius:50%;background:rgb(255 255 255 / 16%)}
.ahp-refresh svg{width:52%;height:52%}
.ahp-pitem{display:flex;align-items:flex-start;gap:2.4cqw;padding:1.45cqh .6cqw;border-top:.5px solid rgb(255 255 255 / 16%);font-size:4.2cqw;font-weight:300;line-height:1.3;opacity:0;transform:translateY(1.6cqh);transition:transform 420ms cubic-bezier(.2,.9,.3,1.1),opacity 300ms ease}
.ahp-pitem:first-of-type{border-top:0}
.ahp-pitem svg{flex:0 0 auto;width:3.6cqw;height:3.6cqw;margin-top:.6cqw;opacity:.9}
.ahp-plist.on .ahp-pitem{opacity:1;transform:none}
.ahp-plist.on .ahp-pitem:nth-of-type(2){transition-delay:60ms}
.ahp-plist.on .ahp-pitem:nth-of-type(3){transition-delay:120ms}
.ahp-plist.on .ahp-pitem:nth-of-type(4){transition-delay:180ms}
.ahp-plist.on .ahp-pitem:nth-of-type(5){transition-delay:240ms}

/* transcript: muted except what the audio has reached */
.ahp-tscript{position:absolute;inset:0;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 2cqh,#000 calc(100% - 7cqh),transparent);mask:linear-gradient(transparent,#000 2cqh,#000 calc(100% - 7cqh),transparent)}
.ahp-tinner{padding:1.4cqh .4cqw 8cqh;transition:transform 700ms cubic-bezier(.2,.85,.25,1)}
.ahp-tp{margin:0 0 1.5cqh;color:rgb(255 255 255 / 34%);font-size:4.5cqw;line-height:1.45;font-weight:300;text-wrap:pretty;transition:color 400ms ease,opacity 240ms ease}
.ahp-w{font-weight:inherit;transition:color 300ms ease,text-shadow 300ms ease}
.ahp-lv:not(.ahp-kara).on .ahp-w{color:#fff;text-shadow:0 0 12px rgb(255 255 255 / 22%);transition-delay:calc(var(--i) * var(--step,40ms))}
.ahp-lv.ahp-said .ahp-w{color:rgb(255 255 255 / 56%);transition-delay:0s}
/* karaoke: words lit individually by the clock, no staggered delay */
.ahp-lv.ahp-kara .ahp-w{transition:color 180ms ease,text-shadow 180ms ease;transition-delay:0s}
.ahp-lv.ahp-kara .ahp-w.lit{color:#fff;text-shadow:0 0 12px rgb(255 255 255 / 22%)}
/* only the word being spoken carries weight; heard words return to normal */
.ahp-lv.ahp-kara .ahp-w.now{font-weight:600}
.ahp-stage[data-mode="hero"] .ahp-tp{font-size:4.7cqw;line-height:1.48}
.ahp-app.menu .ahp-pane--t{z-index:31}
.ahp-app.menu .ahp-tp:not(.ahp-sel){opacity:.45}
.ahp-tp.ahp-sel .ahp-lv{background:rgb(4 14 48 / 34%);border-radius:2.05cqw;box-shadow:0 0 0 1.2cqw rgb(4 14 48 / 34%);-webkit-box-decoration-break:clone;box-decoration-break:clone}
/* the passage under the finger is the brightest thing on the screen */
.ahp-tp.ahp-sel .ahp-lv .ahp-w{color:#fff}
.ahp-tpills{position:absolute;z-index:3;left:0;right:0;bottom:1.2cqh;display:flex;justify-content:center;gap:2cqw}
.ahp-tpill{flex:0 0 auto;display:flex;align-items:center;gap:1.2cqw;height:3.5cqh;padding:0 3.2cqw;white-space:nowrap;border-radius:999px;background:rgb(255 255 255 / 20%);font-size:3.6cqw;font-weight:500;backdrop-filter:blur(10px)}
.ahp-tpill--h{background:#3b82f6;box-shadow:0 3px 10px rgb(11 32 92 / 40%)}
.ahp-tpill svg{flex:0 0 auto;width:3.2cqw;height:3.2cqw}
.ahp-stage[data-mode="hero"] .ahp-tpills{display:none}

/* long-press menu (x-demo) */
.ahp-scrim{position:absolute;z-index:30;inset:0;background:rgb(8 20 60 / 22%);opacity:0;pointer-events:none;transition:opacity 220ms ease}
.ahp-app.menu .ahp-scrim{opacity:1}
.ahp-menu{position:absolute;z-index:40;left:22cqw;top:25.6cqh;width:56cqw;will-change:transform;padding:1.15cqh 0;border-radius:3.86cqw;background:linear-gradient(rgb(216 230 253 / 94%),rgb(199 218 250 / 94%));backdrop-filter:blur(24px) saturate(160%);-webkit-backdrop-filter:blur(24px) saturate(160%);color:#0d1b34;opacity:0;transform:scale(.9);transform-origin:16% 0;pointer-events:none;box-shadow:0 18px 40px rgb(4 10 30 / 30%),0 2px 6px rgb(4 10 30 / 16%),inset 0 0 0 .5px rgb(255 255 255 / 80%);transition:opacity 170ms ease,transform 260ms cubic-bezier(.2,1.06,.3,1)}
.ahp-app.menu .ahp-menu{opacity:1;transform:none}
.ahp-mrow{display:flex;align-items:center;gap:3.4cqw;padding:1.35cqh 6cqw;font-size:4.1cqw;font-weight:500;transition:background 160ms ease}
.ahp-mrow svg{width:4.8cqw;height:4.8cqw}
.ahp-mrow.ahp-hot{background:rgb(10 60 160 / 14%)}

/* transport */
.ahp-foot{flex:0 0 auto;margin-top:1.6cqh}
.ahp-pbar{position:relative;height:.42cqh;border-radius:999px;background:rgb(255 255 255 / 26%)}
.ahp-pbar i{position:absolute;left:0;top:0;bottom:0;border-radius:999px;background:#fff;transition:width 900ms linear}
.ahp-pbar b{position:absolute;top:50%;width:3.1cqw;aspect-ratio:1;border-radius:50%;background:#fff;transform:translate(-50%,-50%);transition:left 900ms linear}
.ahp-app.kara .ahp-pbar i,.ahp-app.kara .ahp-pbar b{transition:none}
.ahp-ptimes{display:flex;justify-content:space-between;margin-top:1.1cqh;color:rgb(255 255 255 / 82%);font-size:3.2cqw;font-variant-numeric:tabular-nums}
.ahp-pctrl{display:flex;align-items:center;justify-content:space-between;margin-top:2.2cqh;padding:0 .8cqw}
.ahp-pctrl svg{display:block}
.ahp-rate{font-size:4.2cqw;font-weight:600}
.ahp-skip{width:9cqw;height:9cqw}
.ahp-play{width:11cqw;height:11cqw}
.ahp-pctrl .ahp-pa{display:none}
.ahp-app.playing .ahp-pctrl .ahp-pi{display:none}
.ahp-app.playing .ahp-pctrl .ahp-pa{display:block}
.ahp-air{width:7.8cqw;height:7.8cqw}

/* ── chat ────────────────────────────────────────────────────────────────── */
.ahp-chead{position:absolute;z-index:20;top:5.9cqh;left:0;right:0;display:flex;align-items:center;gap:3cqw;height:8.4cqh;padding:0 5cqw;background:rgb(243 235 224 / 96%);border-bottom:.5px solid rgb(15 23 42 / 10%);backdrop-filter:blur(12px)}
.ahp-cthumb{flex:0 0 auto;width:10.6cqw;aspect-ratio:1;border-radius:1.82cqw;object-fit:cover;box-shadow:0 1px 4px rgb(15 23 42 / 22%)}
.ahp-cmeta{min-width:0;opacity:0;transform:translateX(-2.4cqw);transition:opacity 360ms ease,transform 520ms cubic-bezier(.2,.85,.25,1)}
.ahp-app[data-view="chat"] .ahp-cmeta{opacity:1;transform:none;transition-delay:640ms}
.ahp-ctitle{font-size:4.6cqw;line-height:1.1;font-weight:800;letter-spacing:-.025em;color:#111827}
.ahp-cauthor{margin-top:.2cqh;overflow:hidden;color:#6b6353;white-space:nowrap;text-overflow:ellipsis;font-size:3.1cqw}
.ahp-cbody{position:absolute;top:14.3cqh;left:0;right:0;bottom:15.8cqh;overflow:hidden;-webkit-mask:linear-gradient(transparent,#000 2.2cqh,#000 calc(100% - 4.6cqh),transparent);mask:linear-gradient(transparent,#000 2.2cqh,#000 calc(100% - 4.6cqh),transparent)}
.ahp-stage[data-mode="hero"] .ahp-cbody{bottom:11cqh}
.ahp-scroll{padding:3.6cqh 5.9cqw 6cqh;transition:transform 640ms cubic-bezier(.2,.85,.25,1)}
.ahp-q{width:86%;margin:0 0 0 auto;padding:3.2cqw 4cqw;border-radius:4.55cqw 4.55cqw .91cqw 4.55cqw;background:linear-gradient(135deg,#f6eee0,#efe4d2);box-shadow:0 2px 4px rgb(0 0 0 / 5%);color:#0f172a;font-size:4.2cqw;line-height:1.32}
.ahp-q--wide{width:100%;margin:0;border-radius:4.55cqw}
.ahp-q strong{font-weight:700}
.ahp-q i{display:block;margin-top:1.1cqh;padding-left:2.4cqw;border-left:.6cqw solid rgb(59 52 39 / 18%);font-family:"Source Serif 4",Georgia,serif;font-optical-sizing:auto;color:#4b4234;font-size:3.75cqw;line-height:1.4}
.ahp-q.typing::after{content:"";display:inline-block;width:.45cqw;height:1em;margin-left:.3cqw;vertical-align:-.15em;background:#3b82f6;animation:ahp-caret 700ms steps(1) infinite}
@keyframes ahp-caret{50%{opacity:0}}
.ahp-think{display:flex;align-items:center;gap:2cqw;height:0;margin-top:2.4cqh;color:#6b6455;font-size:3.9cqw;overflow:visible}
.ahp-think.on{height:auto}
.ahp-tmark{width:7.2cqw;height:7.2cqw;object-fit:contain;animation:ahp-pulse 2s ease-in-out infinite}
.ahp-ans{margin-top:2.4cqh}
.ahp-ans h3{margin:0 0 .85cqh;font-size:4.7cqw;line-height:1.25;font-weight:700;letter-spacing:-.015em;color:#0f172a}
.ahp-ans p{margin:0 0 1.5cqh;font-family:"Source Serif 4",Georgia,serif;font-optical-sizing:auto;color:#1e293b;font-size:4.5cqw;line-height:1.42;text-wrap:pretty}
.ahp-ans p:last-child{margin-bottom:0}
.ahp-ans em{font-style:italic}
.ahp-ans strong{font-weight:600;color:#0f172a}
/* hero: the app sans carries the answer; serif is reserved for the book's own words */
.ahp-stage[data-mode="hero"] .ahp-ans p{font-family:"Merriweather Sans",system-ui,sans-serif;font-size:4.3cqw;line-height:1.5;color:#26221c}
.ahp-stage[data-mode="hero"] .ahp-ans strong{font-weight:700;color:#0f172a}
.ahp-stage[data-mode="hero"] .ahp-ans h3{font-size:4.9cqw}
.ahp-stage[data-mode="hero"] .ahp-q{font-size:4.4cqw}
.ahp-quote{margin:1.6cqh 0 0;padding:.4cqh 0 .4cqh 2.73cqw;border-left:.68cqw solid #ddd5c5;font-family:"Source Serif 4",Georgia,serif;font-optical-sizing:auto;color:#475569;font-style:italic;font-size:4.5cqw;line-height:1.36;text-wrap:pretty}
.ahp-stage[data-mode="hero"] .ahp-quote{font-size:4.3cqw;line-height:1.5;color:#3d3628;border-left-color:#d6ccb8}
.ahp-cite{display:inline-block;margin-left:1cqw;padding:.36cqh 1.8cqw;border-radius:.91cqw;background:#e9e4d6;color:#17429c;font-family:"Merriweather Sans",system-ui,sans-serif;font-style:normal;font-size:3.4cqw;line-height:1.3;font-weight:600;box-shadow:inset 0 0 0 .5px rgb(23 66 156 / 26%);white-space:nowrap;vertical-align:.1em;opacity:0;transform:translateY(.4cqh) scale(.94);transition:opacity 260ms ease,transform 420ms cubic-bezier(.2,1.2,.3,1),background 260ms ease,color 260ms ease,box-shadow 260ms ease}
.ahp-cite.on{opacity:1;transform:none}
/* the citation lights just before it is tapped */
.ahp-cite.lit{background:#3b82f6;color:#fff;box-shadow:0 2px 8px rgb(59 130 246 / 40%)}
.ahp-sugg{display:flex;flex-direction:column;gap:1.36cqw;margin-top:1.8cqw;padding-top:.85cqh}
.ahp-sp{display:flex;align-items:flex-start;gap:2.1cqw;width:100%;padding:2.9cqw 3.6cqw;border-radius:2.73cqw;background:#fffdf8;color:#2f6fe0;font:inherit;font-size:3.75cqw;line-height:1.3;font-weight:500;text-align:left;box-shadow:0 2px 4px rgb(0 0 0 / 6%);opacity:0;transform:translateY(2cqh);transition:transform 400ms cubic-bezier(.2,.9,.3,1.15),opacity 300ms ease}
.ahp-sugg.on .ahp-sp{opacity:1;transform:none}
.ahp-sugg.on .ahp-sp:nth-child(2){transition-delay:80ms}
.ahp-sugg.on .ahp-sp:nth-child(3){transition-delay:160ms}
.ahp-sp svg{flex:0 0 auto;width:3.4cqw;height:3.4cqw;margin-top:.6cqw}
.ahp-conv{display:none}
.ahp-chat[data-conv="1"] .ahp-conv--1,.ahp-chat[data-conv="2"] .ahp-conv--2{display:block}
.ahp-composer{position:absolute;z-index:33;left:6.36cqw;right:6.36cqw;bottom:2.6cqh;display:flex;align-items:center;gap:2.7cqw;height:5.4cqh;padding:0 1cqw 0 4.4cqw;border-radius:999px;background:rgb(255 255 255 / 66%);box-shadow:0 4px 14px rgb(15 23 42 / 8%),inset 0 0 0 .5px rgb(255 255 255 / 70%);backdrop-filter:blur(16px);color:#6b6353;font-size:3.5cqw;font-weight:400;opacity:0;transform:translateY(1.6cqh);transition:opacity 320ms ease,transform 560ms cubic-bezier(.2,.85,.25,1)}
.ahp-app[data-view="chat"] .ahp-composer{opacity:1;transform:none;transition-delay:560ms}
.ahp-voice{display:flex;align-items:center;gap:1.4cqw;height:3.35cqh;padding:0 2.73cqw;border-radius:4.55cqw;color:#fff;background:linear-gradient(135deg,#3b82f6,#2563eb);box-shadow:0 2px 4px rgb(59 130 246 / 20%);font-size:3.3cqw;font-weight:500}
.ahp-voice svg{width:3.6cqw;height:3.6cqw}
/* answer speed, sitting in the bar with the mic */
.ahp-mode{display:flex;align-items:center;gap:1.1cqw;margin-left:auto;height:3.35cqh;padding:0 2.4cqw;border-radius:4.55cqw;color:#5c6b7f;background:rgb(15 23 42 / 6%);box-shadow:inset 0 0 0 .5px rgb(15 23 42 / 8%);font-size:3.1cqw;font-weight:600;letter-spacing:-.01em}
.ahp-mode svg{width:3cqw;height:3cqw;color:#f0a02a}

/* reveal + shared element */
.ahp-r{opacity:0;transform:translateY(1.2cqh);transition:opacity 300ms ease,transform 420ms cubic-bezier(.2,.85,.25,1)}
.ahp-r.on{opacity:1;transform:none}
.ahp-think.ahp-r{transition:opacity 220ms ease,transform 320ms ease}
.ahp-tap{transform:scale(.965);opacity:.82;transition:transform 210ms cubic-bezier(.2,.9,.3,1.2),opacity 210ms ease}
.ahp-ripple{position:absolute;z-index:88;width:15cqw;aspect-ratio:1;margin:-7.5cqw 0 0 -7.5cqw;border-radius:50%;background:radial-gradient(circle,rgb(255 255 255 / 50%) 0 34%,rgb(255 255 255 / 20%) 58%,transparent 72%);box-shadow:0 0 0 .4cqw rgb(255 255 255 / 32%);pointer-events:none;animation:ahp-ripple 640ms cubic-bezier(.22,.9,.3,1) forwards}
.ahp-ripple--d{background:radial-gradient(circle,rgb(23 66 156 / 32%) 0 34%,rgb(23 66 156 / 15%) 58%,transparent 72%);box-shadow:0 0 0 .4cqw rgb(23 66 156 / 22%)}
@keyframes ahp-ripple{0%{opacity:0;transform:scale(.34)}22%{opacity:1}100%{opacity:0;transform:scale(1.18)}}
.ahp-fly{position:absolute;z-index:90;display:none;overflow:hidden;transform-origin:0 0;pointer-events:none;backface-visibility:hidden;will-change:transform}
.ahp-fly img{display:block;width:100%;height:100%;object-fit:cover}

/* nearly frontal, ≤3px of drift */
@keyframes ahp-breathe{0%,100%{transform:perspective(2000px) rotateY(-1.6deg) rotateX(.5deg) translate3d(0,0,0)}50%{transform:perspective(2000px) rotateY(-1.3deg) rotateX(.4deg) translate3d(0,-3px,0)}}
@keyframes ahp-pulse{0%,100%{opacity:.7;filter:drop-shadow(0 0 2px rgb(59 130 246 / .3))}50%{opacity:1;filter:drop-shadow(0 0 7px rgb(59 130 246 / .8))}}
@media (max-width:760px){.ahp-phone{animation:none;transform:perspective(2000px) rotateY(-1deg)}}
@media (prefers-reduced-motion:reduce){.ahp-phone{animation:none;transform:perspective(2000px) rotateY(-1.4deg)}.ahp-library{display:none}.ahp-chat,.ahp-cmeta,.ahp-composer{opacity:1;transform:none}.ahp-r,.ahp-cite{opacity:1;transform:none;transition:none}.ahp-ripple{display:none}.ahp-think{display:none}.ahp-tmark{animation:none}.ahp-ask.ahp-invite{animation:none}}