/*
Copyright (c) 2026 Croynel. All rights reserved.

This source code is proprietary and confidential.
Unauthorized copying, modification, distribution, or use,
in whole or in part, is strictly prohibited.
*/

/* The shared footer remains governed by style.css. */
:root { --centya-header-height: clamp(70px, 5.834vw, 84px); --centya-hero-height: clamp(520px, 44.445vw, 640px); }
html { scrollbar-gutter: stable; }
body { background: #111212; font-size: 14px; }
.cinema-container { width: min(1296px, calc(100% - 10.2%)); margin-inline: auto; }
.cinema-header { position: relative; background: #111212; border-color: #ffffff10; backdrop-filter: none; }
.cinema-header .header-inner { height: var(--centya-header-height); gap: 28px; }
.cinema-header .brand { gap: 12px; font-size: clamp(23px, 1.806vw, 26px); font-weight: 650; letter-spacing: -.8px; color: #f4f1e9; }
.cinema-header .brand img { width: 30px; height: auto; aspect-ratio: 1; }
.cinema-header .desktop-nav { display: flex; position: absolute; left: 29.5%; margin: 0; gap: 58px; }
.cinema-header .menu-button { display: none; }
.cinema-header .desktop-nav a { color: #f2efe7; font-size: 14px; }
.cinema-header .header-actions { gap: 32px; }
.cinema-header .sign-in-link { font-size: 14px; color: #f2efe7; }
.cinema-header .header-cta { min-height: 50px; padding: 12px 18px; gap: 22px; font-size: 14px; border-radius: 9px; background: linear-gradient(115deg, #d8bc87, #e0cda7); color: #11120f; box-shadow: inset 0 1px #fff6; }
.cinema-home { position: relative; isolation: isolate; overflow: clip; padding-bottom: 80px; color: #f1eee5; background: #111212; }
.cinema-home::after { position: absolute; z-index: -1; inset: 0; content: ''; opacity: .025; background: url('/assets/graphite-grain.svg'); pointer-events: none; }
.cinema-hero { position: relative; isolation: isolate; display: flex; align-items: center; min-height: var(--centya-hero-height); }
.hero-inner { position: relative; z-index: 2; padding: clamp(76px, 6.25vw, 90px) clamp(24px, 2.223vw, 32px) clamp(88px, 7.084vw, 102px); }
.cinema-hero-copy { width: 730px; max-width: 100%; margin-inline: auto; text-align: center; }
.cinema-hero #hero-title { margin: 0; color: #f2eee4; font: 400 clamp(48px, 5.2vw, 72px)/.99 Georgia, 'Times New Roman', serif; letter-spacing: -.045em; text-wrap: nowrap; }
.cinema-hero #hero-title span { color: #ddc9a5; }
.cinema-hero .hero-description { max-width: none; margin: clamp(20px, 1.945vw, 28px) 0 0; color: #f0eee7; font-size: clamp(15px, 1.3vw, 18px); line-height: 1.45; }
.cinema-hero .hero-actions { justify-content: center; gap: clamp(18px, 1.74vw, 25px); margin-top: clamp(32px, 2.92vw, 42px); flex-wrap: nowrap; }
.cinema-home .button { min-height: clamp(46px, 3.89vw, 56px); padding: clamp(10px, 1.042vw, 15px) clamp(24px, 2.223vw, 32px); border-radius: 8px; gap: clamp(22px, 2.36vw, 34px); font-size: clamp(13px, 1.112vw, 16px); font-weight: 600; }
.cinema-home .button svg { width: 24px; height: 24px; }
.cinema-home .button-primary { color: #11120e; background: linear-gradient(115deg, #d8bb85, #dfcba4); border-color: #ecdab459; box-shadow: inset 0 1px #fff5, 0 0 42px #d2b47b0b; }
.cinema-home .button-secondary { color: #e6d3b0; border-color: #d7c5a583; background: #14151438; }
.cinema-home .button:hover { filter: brightness(1.12); }
.hero-art, .opening-art { position: absolute; inset: 0; width: 100%; height: 100%; overflow: hidden; pointer-events: none; }
.hero-art { z-index: -1; }
.hero-art::after, .opening-art::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 62%, #111212 100%); }


.cinema-workspace { position: relative; z-index: 3; width: min(1280px, calc(89.8% - 12px)); border: 1px solid #cbb78e94; border-radius: 26px; background: linear-gradient(110deg, #262520b8, #141514fa 24%, #1a1b19e8 70%, #121311); box-shadow: inset 0 1px #f7e1b945, 0 0 28px #e4c39413, 0 40px 50px -24px #000, 0 38px 25px -35px #efd5a6b3; }
.cinema-workspace::before { position: absolute; z-index: -1; content: ''; inset: -35px -35px -80px; border-radius: 50%; background: radial-gradient(ellipse at 45% 50%, #c7a96f15, transparent 68%); pointer-events: none; }
.cinema-workspace-bar { display: flex; align-items: center; min-height: clamp(53px, 5.14vw, 74px); padding-inline: 28px; gap: 25px; border-bottom: 1px solid #bda88520; }
.preview-logo { display: flex; align-items: center; gap: 10px; padding-right: 26px; border-right: 1px solid #bda88515; font-size: 19px; font-weight: 600; }
.preview-project { display: flex; align-items: center; gap: 12px; padding: 10px 0; background: none; border: 0; font-size: 14px; white-space: nowrap; }
.preview-project svg { width: 12px; height: 12px; rotate: 90deg; }
.cinema-workspace .workspace-tabs { margin: 0 auto; gap: 16px; align-items: center; }
.cinema-workspace .workspace-tabs button { min-height: 38px; padding: 10px 15px; gap: 10px; font-size: 12px; color: #eee7d9; }
.cinema-workspace .workspace-tabs button svg { width: 18px; height: 18px; }
.cinema-workspace .workspace-tab-marker { border: 0; background: #bda47a35; box-shadow: inset 0 1px #f5dbae0c; }
.cinema-workspace .workspace-tabs button[aria-selected='true'] { color: #f0dbb5; }
.preview-actions { display: flex; margin-left: auto; gap: 7px; }
.preview-actions .icon-button { width: 32px; height: 34px; padding: 6px; color: #dbd6c9; font-size: 25px; }
.cinema-workspace-body { display: grid; grid-template-columns: 16% minmax(0, 1fr); min-height: clamp(328px, 31.12vw, 448px); }
.cinema-sidebar { border-right: 1px solid #bda8851a; padding: 24px 17px; }
.cinema-sidebar button, .cinema-sidebar a { display: flex; align-items: center; gap: 14px; width: 100%; padding: 11px 13px; min-height: 43px; border: 0; border-radius: 7px; background: none; color: #e5e1d5; text-align: left; font-size: 12px; }
.cinema-sidebar svg { width: 18px; height: 18px; }
.cinema-sidebar button.is-selected { color: #efd8ad; background: #bda47a2e; }
.cinema-sidebar button:hover, .cinema-sidebar a:hover { background: #bda47a16; }
.sidebar-project { border-top: 1px solid #bda88520; margin-top: 26px; padding-top: 22px; }
.sidebar-project > span { display: block; padding: 0 13px 8px; color: #a6a297; font-size: 10px; }
.sidebar-project button, .sidebar-project a { min-height: 38px; padding-block: 8px; }
.cinema-panels { min-width: 0; padding: 14px 12px 22px; }
.cinema-writing.writing-preview { display: grid; grid-template-columns: 1.75fr .94fr 1.05fr; gap: 12px; height: clamp(298px, 28.48vw, 410px); }
.cinema-editor { display: flex; flex-direction: column; }
.cinema-editor, .cinema-world, .cinema-connections { overflow: hidden; min-width: 0; border: 1px solid #e0c59c20; border-radius: 12px; background: radial-gradient(ellipse at 60% 10%, #ffffff04, transparent 80%), #1b1c19c9; box-shadow: inset 0 1px #ffffff03; }
.cinema-panel-bar { display: flex; flex-shrink: 0; align-items: center; gap: 12px; min-height: 56px; padding: 12px 18px; color: #f2eee5; font-size: 13px; line-height: 1.2; }
.cinema-panel-bar > span:first-child { display: flex; align-items: center; gap: 10px; font-weight: 550; }
.cinema-panel-bar svg { width: 19px; height: 19px; }
.cinema-panel-bar > button { display: inline-flex; align-items: center; gap: 6px; border: 0; padding: 0; background: none; color: inherit; font-size: 22px; }
.cinema-panel-bar .chapter-trigger { font-size: 13px; }
.chapter-trigger svg { width: 12px; height: 12px; rotate: 90deg; }
.cinema-panel-bar > button:last-child { margin-left: auto; }
.cinema-panel-bar #editor-word-count { margin-left: auto; font-size: 12px; color: #cecbbf; white-space: nowrap; }
.cinema-editor .manuscript-preview { width: auto; height: auto; flex: 1; margin: 0; padding: clamp(12px, 1.46vw, 21px) clamp(23px, 2.084vw, 30px) 28px; border: 0; background: transparent; box-shadow: none; overflow: auto; color: #ece7dc; }
.cinema-editor #sample-chapter-title { margin: 0 0 26px; color: #f1ece0; font: 400 clamp(24px, 1.945vw, 28px)/1.25 Georgia, serif; letter-spacing: -.7px; }
.cinema-editor .manuscript-body { font: clamp(13px, 1.042vw, 15px)/1.5 Georgia, serif; min-height: 0; }
.cinema-editor .manuscript-body p + p { margin-top: 24px; }
.cinema-world .cinema-panel-bar, .cinema-connections .cinema-panel-bar { border-bottom: 1px solid #c9b38d15; padding-inline: 15px; }
.cinema-connections .cinema-panel-bar svg { color: #d9bd85; }
.cinema-world-list { padding: 10px 15px 14px; }
.cinema-world-list > button { display: flex; align-items: center; gap: 14px; width: 100%; min-width: 0; padding: 7px 0; border: 0; background: none; text-align: left; }
.cinema-world-list img { width: clamp(49px, 4.584vw, 66px); height: auto; aspect-ratio: 1; flex: 0 0 clamp(49px, 4.584vw, 66px); object-fit: cover; border: 1px solid #cbb78d33; border-radius: 8px; filter: saturate(.65) brightness(.82); }
.cinema-world-list .pass-thumb { object-position: 88% 60%; }
.cinema-world-list [data-entry="elara"] img { object-position: 50% 30%; }
.cinema-world-list [data-entry="crown"] img { object-position: 50% 40%; }
.cinema-world-list strong { display: block; color: #f0ede4; font-size: 13px; font-weight: 550; line-height: 1.4; }
.cinema-world-list small { display: block; margin-top: 5px; color: #c2bfb3; font-size: 11px; line-height: 1.35; }
.cinema-world-list button:hover strong { color: #e7c68b; }
.mini-graph { position: relative; height: calc(100% - 56px); }
.mini-threads { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #c9aa72; stroke-width: 1; }
.mini-node { position: absolute; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 45px; padding: 7px 10px; border: 1px solid #c4b08b4d; border-radius: 9px; background: linear-gradient(145deg, #302f28, #1e1f1b); box-shadow: inset 0 1px #ead6b00d, 0 5px 14px #0002; color: #eee9dc; font-size: 12px; line-height: 1.15; }
.mini-node svg { width: 19px; height: 19px; color: #d9bd85; }
.mini-place { top: 12%; left: 5%; width: 39%; }
.mini-artifact { top: 12%; right: 4%; width: 42%; }
.mini-character { top: 43%; left: 23%; width: 53%; border-color: #d6bb81c4; box-shadow: 0 0 18px #d8b57810, inset 0 1px #f5dbb333; }
.mini-pass { top: 72%; left: 23%; width: 53%; }
.mini-node:hover { border-color: #efd09b; }
.cinema-workspace .cinema-writing.is-focused { grid-template-columns: minmax(0, 1fr); }
.cinema-writing.is-focused > :not(.cinema-editor) { display: none; }
.cinema-workspace .content-preview, .cinema-workspace .relations-preview { min-height: clamp(298px, 28.48vw, 410px); background: #1b1c19; border: 1px solid #cbb78d26; border-radius: 12px; overflow: hidden; }
.cinema-workspace .content-preview { grid-template-columns: minmax(0, 1fr) 250px; }
.cinema-workspace .panel-bar, .cinema-workspace .details-preview, .cinema-workspace .workspace-caption { background: #171815; border-color: #cbb78d26; }
.cinema-workspace .content-tools { padding: 18px 22px 8px; }
.cinema-workspace .character-grid { padding: 14px 22px; gap: 14px; }
.cinema-workspace .character-card { min-height: 113px; padding: 16px; background: #20211c; border-color: #cbb78d26; }
.cinema-workspace .character-detail { padding: 20px; }
.cinema-workspace .character-detail > .character-avatar { margin-top: 12px; }
.cinema-workspace .character-detail h3 { margin-top: 14px; }
.cinema-workspace .character-detail dl { margin-top: 14px; }
.cinema-workspace .workspace-caption { min-height: 48px; padding: 10px 22px; }
.cinema-workspace .relation-canvas { height: 325px; background-color: #1c1d18; }
.cinema-workspace .relation-node { background: #23241e; }
.cinema-workspace .relation-label { background: #1c1d18; }

.cinema-features { display: grid; grid-template-columns: 1.12fr 1fr; grid-template-rows: 1fr 1.06fr; gap: clamp(20px, 1.806vw, 26px); margin-top: clamp(90px, 8.612vw, 124px); }
.cinema-feature { position: relative; overflow: hidden; min-width: 0; padding: clamp(25px, 2.362vw, 34px) clamp(30px, 2.778vw, 40px); border: 1px solid #c7b38d6e; border-radius: 17px; background: radial-gradient(ellipse at 55% 35%, #c6b18a08, transparent 75%), linear-gradient(130deg, #21221d73, #1a1b1752); box-shadow: inset 0 1px #f5dab00c; }
.cinema-feature h2 { margin-top: 18px; color: #f1ebdf; font: 400 clamp(24px, 1.945vw, 28px)/1.12 Georgia, serif; letter-spacing: -.6px; }
.cinema-feature p { margin-top: 15px; color: #e4e1d7; font-size: clamp(14px, 1.112vw, 16px); line-height: 1.5; }
.feature-world { grid-row: 1 / 3; min-height: clamp(371px, 35.28vw, 508px); }
.feature-world .feature-symbol { width: 40px; height: 40px; }
.feature-symbol { display: block; width: 38px; height: 38px; color: #e5bf7c; stroke-width: 1.4; }
.feature-connections, .feature-writing { padding-right: 60px; }
.feature-connections .feature-symbol, .feature-writing .feature-symbol { width: 30px; height: auto; aspect-ratio: 1; }
.feature-arrow { position: absolute; right: 34px; top: 44%; width: 28px; height: 28px; color: #e6c48b; transition: translate 200ms; }
a.cinema-feature:hover { border-color: #e4c18a; background-color: #bda37a08; }
a.cinema-feature:hover .feature-arrow { translate: 5px; }
.feature-world-map { position: relative; height: clamp(173px, 16.32vw, 235px); margin: clamp(24px, 1.945vw, 28px) 0 -16px; }
.feature-threads { position: absolute; inset: 0; width: 100%; height: 100%; stroke: #cfb17a; stroke-width: 1; }
.world-tile { position: absolute; overflow: hidden; padding: 0 0 11px; width: 25%; border: 1px solid #dac39a70; border-radius: 13px; color: #f0ece1; background: linear-gradient(130deg, #313129, #1d1e19); text-align: left; box-shadow: 0 10px 20px #0004, inset 0 1px #f3dbb433; }
.world-tile img { width: 100%; height: auto; aspect-ratio: 1.42; object-fit: cover; mask-image: linear-gradient(#000 65%, transparent); filter: saturate(.7) brightness(.82); }
.world-tile strong, .world-tile small { display: block; position: relative; margin-inline: 17px; }
.world-tile strong { margin-top: -2px; font-size: 15px; font-weight: 550; line-height: 1.15; }
.world-tile small { margin-top: 5px; font-size: 12px; color: #c3bcae; }
.tile-elara { left: 3%; bottom: 0; }
.tile-elara img { object-position: 50% 30%; }
.tile-crown img { object-position: 50% 40%; }
.tile-valemor { width: 31%; top: 0; left: 36%; border-color: #e8cd94b3; }
.tile-valemor img { object-position: 50% 40%; }
.tile-crown { right: 0; bottom: 0; }
.world-tile:hover { border-color: #f2d095; translate: 0 -3px; }

.cinema-dialog, .cinema-popover { color: #f0e9dc; background: radial-gradient(ellipse at top, #bda47a0c, transparent 65%), #1a1c19; border: 1px solid #cbb78d70; border-radius: 18px; box-shadow: 0 30px 100px #0009; }
.cinema-dialog { width: min(640px, calc(100% - 32px)); max-height: calc(100svh - 40px); padding: 44px; }
.cinema-dialog::backdrop { background: #080a09bf; backdrop-filter: blur(12px); }
.cinema-dialog-close { position: absolute; right: 14px; top: 14px; }
.cinema-dialog h2 { margin-top: 15px; font: 400 30px/1.2 Georgia, serif; letter-spacing: -.8px; }
.cinema-dialog .eyebrow { margin-top: 20px; letter-spacing: 1.3px; }
.cinema-dialog p:not(.eyebrow) { color: #c3bfb2; line-height: 1.8; margin-top: 18px; }
.cinema-dialog .wishlist-form { margin-top: 28px; }
.cinema-dialog .wishlist-entry { display: flex; flex-direction: column; background: #11130f; border-radius: 9px; padding: 6px; }
.cinema-dialog .wishlist-entry .button { justify-content: space-between; }
.cinema-dialog .wishlist-success { width: 100%; margin-top: 24px; }
.entry-dialog { width: min(540px, calc(100% - 32px)); }
.entry-dialog > img { width: 100%; height: 245px; object-fit: cover; border-radius: 10px; }
.entry-dialog .button { margin-top: 24px; }
.entry-note { font-size: 11px; }
.cinema-popover { width: min(390px, calc(100% - 32px)); padding: 26px; margin: auto; }
.cinema-popover::backdrop { background: #0005; }
.cinema-popover h2 { font: 400 23px/1.25 Georgia, serif; margin-bottom: 16px; }
.cinema-popover > button { display: block; width: 100%; border: 0; border-radius: 5px; background: transparent; padding: 13px 8px; font-size: 13px; text-align: left; }
.cinema-popover > button:hover { background: #cbb78d18; }
.cinema-popover p { font-size: 13px; }
.cinema-popover .popover-note { font-size: 11px; color: #c3baa8; margin-top: 20px; }
.cinema-popover .format-preview { padding: 0; background: transparent; border: 0; }
.cinema-popover .format-preview label { flex: 1; font-size: 12px; }
.cinema-popover .format-preview select { display: block; margin-top: 8px; }
.cinema-popover .format-preview button { margin-top: 16px; background: #cbb78d16; }

/* Page and dialog type follows the same scale as the landing page. */
.page-intro h1 { font-size: clamp(34px, 3.334vw, 48px); line-height: 1.15; }
.page-intro > p:not(.eyebrow) { font-size: 14px; }
.questions-section h2 { font-size: 26px; }
.catalog-product-heading h2 { font-size: 24px; }
.catalog-offer-intro h3 { font-size: 21px; }
.plan-column h3 { font-size: 16px; }
.plan-column .offer-price { font-size: 32px; }
.contact-panel h2, .resource h2 { font-size: 21px; }
#search-dialog h2 { font-size: 25px; }

/* Two native scroll-snap scenes; each selection deck exposes one offer. */
html:has(.pricing-section .catalog-product) { scroll-snap-type: y mandatory; scroll-padding-top: calc(var(--centya-header-height) + 1px); }
body:has(.pricing-section) .cinema-header { position: sticky; top: 0; z-index: 40; }
.pricing-section { width: 100%; padding: 0; }
.pricing-section .catalog-toolbar { width: min(1200px, calc(100% - 40px)); margin-inline: auto; }
.pricing-section .catalog-toolbar.is-ready { min-height: 0; padding: 0; border: 0; }
.pricing-section-navigation { position: sticky; z-index: 25; top: calc(var(--centya-header-height) + 20px); display: flex; align-items: center; width: fit-content; max-width: calc(100% - 32px); height: 44px; margin: 0 auto -44px; padding: 4px; gap: 4px; border: 1px solid #cbb78d30; border-radius: 30px; background: #151714e8; box-shadow: 0 6px 24px #0003; backdrop-filter: blur(16px); }
.pricing-section-navigation a { display: flex; align-items: center; justify-content: center; min-height: 34px; padding: 6px 24px; border-radius: 24px; color: #a8a396; font-size: 12px; white-space: nowrap; }
.pricing-section-navigation a[aria-current] { color: #efd9b1; background: #bda47a24; box-shadow: inset 0 1px #f5dbae12; }
.pricing-section-navigation a:hover { color: #f0dfc0; }
.pricing-section .catalog-product { position: relative; isolation: isolate; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 22px; min-height: calc(100svh - var(--centya-header-height) - 1px); margin: 0; padding: 88px 24px 30px; overflow: clip; scroll-snap-align: start; scroll-snap-stop: always; }
.pricing-section .catalog-product + .catalog-product { margin: 0; border-top: 1px solid #cbb78d15; }
.pricing-section .catalog-product::before { position: absolute; z-index: -1; content: ''; inset: 0; pointer-events: none; background: radial-gradient(ellipse 38% 60% at 50% 52%, #b79a5e13, transparent 80%); }
.pricing-section .catalog-packs::before { background: radial-gradient(ellipse 38% 60% at 50% 52%, #a9957514, transparent 80%); }
.pricing-section .catalog-product-heading { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 0; text-align: center; }
.pricing-section .catalog-product-heading .pricing-section-kicker { color: #aa9571; font-size: 9px; letter-spacing: 2px; }
.pricing-section .catalog-product-heading h2 { color: #f1ebdf; font: 400 26px/1.2 Georgia, serif; letter-spacing: -.5px; }
.pricing-section .catalog-product-heading .pricing-section-description { max-width: 420px; color: #aaa698; font-size: 12px; }
.pricing-carousel { position: relative; width: min(760px, 100%); display: flex; flex-direction: column; align-items: center; gap: 16px; }
.pricing-stage { position: relative; display: grid; place-items: center; width: 100%; isolation: isolate; }
.pricing-stage::before, .pricing-stage::after { position: absolute; z-index: -1; content: ''; width: min(560px, 84vw); aspect-ratio: 1; border: 1px solid #cbb78d13; border-radius: 50%; pointer-events: none; }
.pricing-stage::after { width: min(650px, 98vw); border-style: dashed; border-color: #cbb78d0c; }
.pricing-deck { width: min(390px, calc(100% - 144px)); min-width: 0; perspective: 1200px; touch-action: pan-y pinch-zoom; outline-offset: 6px; border-radius: 20px; }
.pricing-section .pricing-card { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; width: 100%; min-width: 0; min-height: 450px; padding: 32px; border: 1px solid #cbb78d66; border-radius: 20px; background: radial-gradient(ellipse at 50% 0, #c6ab7412, transparent 65%), linear-gradient(145deg, #262720, #191b17); box-shadow: inset 0 1px #f4dcb41a, 0 24px 65px -30px #000c, 0 0 40px #b99d6308; backface-visibility: hidden; transform-origin: center; }
.pricing-section .pricing-card::before { content: attr(data-position); position: absolute; right: 24px; top: 24px; color: #bda47a65; font: 11px/1 var(--sans); letter-spacing: 1px; }
.pricing-section .pricing-card-heading { padding-bottom: 24px; text-align: center; }
.pricing-section .pricing-card-kind { margin: 0 0 12px; color: #b6a485; font-size: 9px; font-weight: 500; letter-spacing: 1.8px; }
.pricing-section .pricing-card h3 { margin: 0; color: #f0eade; font: 400 32px/1.2 Georgia, serif; letter-spacing: -.6px; }
.pricing-section .pricing-card .offer-price { margin: 0; color: #eddbb8; font: 400 40px/1.2 Georgia, serif; letter-spacing: -1px; text-align: center; }
.pricing-section .pricing-card .offer-price span { display: block; margin-top: 6px; color: #a9a599; font: 400 11px/1.5 var(--sans); letter-spacing: 0; }
.pricing-section .pricing-card .offer-details { margin-top: 24px; padding-top: 20px; border-top: 1px solid #cbb78d26; color: #d4cdbf; text-align: center; }
.pricing-section .pricing-card .offer-details p { margin: 0; font-size: 13px; line-height: 1.8; overflow-wrap: anywhere; }
.pricing-section .pricing-card .offer-details p + p { margin-top: 10px; }
.pricing-section .pricing-card-purchase { margin-top: auto; padding-top: 24px; }
.pricing-section .pricing-card .offer-action { display: flex; justify-content: space-between; gap: 12px; width: 100%; min-height: 46px; margin: 0; padding: 12px 18px; border: 1px solid #ecdab459; border-radius: 8px; color: #171811; background: linear-gradient(115deg, #d8bb85, #dfcba4); font-size: 13px; line-height: 1.4; }
.pricing-section .pricing-card .offer-action:hover { background: #e6cfa5; border-color: #f1d5a9; }
.pricing-section .plan-advanced { border-color: #d2b47ba6; background: radial-gradient(ellipse at 50% 0, #d4b47a18, transparent 65%), linear-gradient(145deg, #302c22, #1b1c18); }
.pricing-section .plan-variant-field { margin-top: auto; padding-top: 20px; }
.pricing-section .plan-variant-field label { display: block; margin-bottom: 8px; color: #c8b99d; font-size: 11px; line-height: 1.4; }
.pricing-section .plan-variant-select { width: 100%; min-width: 0; min-height: 42px; padding: 9px 12px; border: 1px solid #cbb78d66; border-radius: 7px; color: #f0e7d7; background: #1b1c18; font: inherit; font-size: 13px; color-scheme: dark; }
.pricing-section .plan-variant-select:focus-visible { outline: 2px solid #ddc397; outline-offset: 3px; }
.pricing-section .plan-advanced .pricing-card-purchase { margin-top: 0; padding-top: 16px; }
.carousel-arrow { position: absolute; z-index: 2; top: calc(50% - 26px); display: grid; place-items: center; width: 52px; height: 52px; padding: 0; border: 1px solid #cbb78d50; border-radius: 50%; color: #e6cda4; background: #1a1c17a6; transition: background-color 180ms, border-color 180ms, scale 180ms; }
.carousel-arrow span { font: 24px/1 var(--sans); }
.carousel-previous { left: 36px; }
.carousel-next { right: 36px; }
.carousel-arrow:hover { background: #bda47a22; border-color: #dec495; scale: 1.06; }
.carousel-arrow:disabled { opacity: .25; cursor: default; scale: 1; }
.carousel-choices { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; max-width: 100%; }
.carousel-choice { min-height: 34px; padding: 7px 13px; border: 1px solid transparent; border-radius: 6px; color: #aaa496; background: transparent; font-size: 11px; line-height: 1.5; }
.carousel-choice[aria-pressed='true'] { color: #f0dbb6; border-color: #cbb78d45; background: #bda47a12; }
.carousel-choice:hover { color: #f0dbb6; background: #bda47a12; }
.carousel-count { color: #a99c85; font-size: 10px; letter-spacing: 1.2px; font-variant-numeric: tabular-nums; }
.pricing-scroll-next { display: flex; align-items: center; gap: 14px; min-height: 30px; color: #b8aa91; font-size: 11px; }
.pricing-scroll-next span { font-size: 18px; }
.pricing-information { padding-block: 28px 36px; scroll-snap-align: start; }
.pricing-information .pricing-note { margin: 0; font-size: 11px; line-height: 1.7; }
.pricing-information .store-link { margin-top: 8px; font-size: 12px; }
.pricing-help { margin-top: 24px; border-top: 1px solid #cbb78d20; }
.pricing-help > summary { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 20px; color: #d6c5a7; font-size: 13px; cursor: pointer; list-style: none; }
.pricing-help > summary::-webkit-details-marker { display: none; }
.pricing-help > summary > span { font-size: 20px; }
.pricing-help[open] > summary > span { rotate: 45deg; }
.pricing-help .questions-section { padding-block: 28px 36px; gap: 64px; }
body:has(.pricing-section) .site-footer { scroll-snap-align: end; }
.pricing-section .catalog-loading { display: flex; justify-content: center; align-items: center; min-height: calc(100svh - var(--centya-header-height)); padding: 40px; }
.pricing-section .catalog-loading > div { display: block; width: min(390px, 100%); min-height: 430px; border-radius: 20px; }
@media (max-width: 760px) {
  .pricing-section .catalog-product { gap: 20px; padding: 84px 18px 26px; }
  .pricing-section-navigation a { padding-inline: 20px; font-size: 11px; }
  .pricing-section .catalog-product-heading h2 { font-size: 23px; }
  .pricing-deck { width: min(360px, calc(100% - 96px)); }
  .pricing-section .pricing-card { min-height: 450px; padding: 28px; }
  .pricing-section .pricing-card h3 { font-size: 29px; }
  .pricing-section .pricing-card .offer-price { font-size: 36px; }
  .carousel-arrow { width: 40px; height: 40px; top: calc(50% - 20px); }
  .carousel-previous { left: 0; }.carousel-next { right: 0; }
  .carousel-choice { padding-inline: 10px; font-size: 10px; }
  .pricing-help .questions-section { gap: 28px; }
}
@media (max-width: 480px) {
  .pricing-section .catalog-product { padding-inline: 16px; }
  .pricing-carousel { gap: 12px; }
  .pricing-stage { padding-bottom: 56px; }
  .pricing-deck { width: min(360px, 100%); }
  .carousel-arrow { top: auto; bottom: 0; width: 40px; height: 40px; }
  .carousel-previous { left: calc(50% - 52px); }.carousel-next { right: calc(50% - 52px); }
  .pricing-section .pricing-card { min-height: 450px; padding: 26px; }
  .pricing-section .pricing-card h3 { font-size: 28px; }
  .pricing-section .catalog-product-heading h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .pricing-section .catalog-product-heading .pricing-section-description { display: none; }
  .carousel-choices { gap: 4px; }
  .carousel-choice { padding-inline: 8px; }
}
@media (max-height: 760px) {
  .pricing-section .catalog-product { gap: 14px; padding-block: 76px 20px; }
  .pricing-section .catalog-product-heading .pricing-section-description { display: none; }
  .pricing-section .pricing-card { min-height: 430px; padding-block: 24px; }
  .pricing-section .pricing-card-heading { padding-bottom: 18px; }
  .pricing-section .pricing-card .offer-details { margin-top: 18px; padding-top: 14px; }
  .pricing-scroll-next { display: none; }
}
@media (max-width: 480px) and (max-height: 760px) {
  .pricing-section .catalog-product { gap: 0; padding-block: 70px 12px; }
  .pricing-section .catalog-product-heading { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .carousel-choices { display: none; }
  .carousel-count { position: absolute; bottom: 12px; left: 50%; translate: -50% 0; }
  .carousel-count .carousel-name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .carousel-previous { left: calc(50% - 90px); }.carousel-next { right: calc(50% - 90px); }
}
@media (prefers-reduced-motion: reduce) {
  html:has(.pricing-section) { scroll-behavior: auto; }
  .carousel-arrow:hover { scale: none; }
}

/* The opening is progressive enhancement and never obscures a no-script visit. */
.opening { display: none; position: fixed; z-index: 1000; inset: 0; overflow: hidden; background: #111212; color: #eddbb8; opacity: 1; transition: opacity 750ms ease, visibility 750ms; }
.is-loading { overflow: hidden; scroll-behavior: auto; }
.is-loading .opening { display: grid; place-items: center; }
.opening.is-leaving { opacity: 0; visibility: hidden; pointer-events: none; }
.opening-landscape { position: absolute; inset: 0; background: #111212; }
.opening-scene { position: absolute; top: calc(var(--centya-header-height) + 1px); left: 0; right: 0; height: var(--centya-hero-height); }

.opening-haze { position: absolute; inset: 0; background: radial-gradient(ellipse 40% 45% at 50% 48%, #070a08dc, #05070750 70%, transparent); }
.opening-grain { position: absolute; inset: 0; background: url('/assets/graphite-grain.svg'); opacity: .012; }
.opening-center { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; width: min(440px, calc(100vw - 64px)); padding-block: 35px; }
.opening-mark { width: 58px; height: 58px; filter: drop-shadow(0 0 22px #d3ac6525); }
.opening-name { margin-top: 28px; padding-left: 8px; color: #f5eedf; font: 400 52px/1.1 Georgia, serif; letter-spacing: 8px; }
.opening-tagline { margin-top: 24px; color: #d8cbb5; font: 400 16px/1.6 Georgia, serif; letter-spacing: .25px; }
.opening-loading { width: 256px; max-width: 100%; margin-top: 58px; }
.opening-progress { height: 2px; background: #d6bd8d26; }
.opening-progress > span { display: block; width: calc(var(--opening-progress, 0) * 1%); height: 100%; background: linear-gradient(90deg, #9b7d47, #eed4a1); box-shadow: 0 0 12px #dbb77a50; transition: width 800ms ease; }
.opening-loading-label { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-top: 19px; }
.opening-status { margin: 0; color: #d9c8a9; font-size: 10px; line-height: 1.5; letter-spacing: 1.7px; text-transform: uppercase; }
#opening-percent { color: #d9c8a9; font-size: 10px; font-variant-numeric: tabular-nums; letter-spacing: 1px; }


/* Fill the entire upper section; only its lower edge fades into the page. */
.hero-art picture, .opening-art picture { display: block; width: 100%; height: 100%; }
.hero-background, .opening-background { position: static; width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: center top; transform: none; animation: none; }
.opening-art { opacity: .2; }

/* Preserve the shared footer's established geometry. */
body:has(.cinema-home) .site-footer { width: min(1360px, calc(100% - 112px)); border-top-color: #d9c49f29; }
@media (max-width: 1100px) { body:has(.cinema-home) .site-footer { width: calc(100% - 64px); } }
@media (max-width: 800px) { body:has(.cinema-home) .site-footer { width: calc(100% - 40px); } }

@media (max-width: 1200px) {
  .cinema-header .desktop-nav { gap: 40px; }
  .cinema-header .header-actions { gap: 24px; }
  .cinema-header .desktop-nav a, .cinema-header .sign-in-link { font-size: 14px; }
  .cinema-header .header-cta { min-height: 38px; padding: 9px 13px; font-size: 13px; gap: 14px; }
  .cinema-home .button svg { width: 20px; height: 20px; }
  .cinema-workspace { border-radius: 21px; }
  .cinema-workspace-bar { padding-inline: 22px; gap: 20px; }
  .preview-logo { font-size: 16px; padding-right: 18px; }
  .preview-project { font-size: 12px; }
  .cinema-workspace .workspace-tabs { gap: 8px; }
  .cinema-workspace .workspace-tabs button { padding: 9px 13px; font-size: 11px; }
  .preview-actions { gap: 3px; }
  .cinema-sidebar { padding: 18px 12px; }
  .cinema-sidebar button, .cinema-sidebar a { gap: 10px; font-size: 10px; padding: 8px 9px; min-height: 34px; }
  .sidebar-project { margin-top: 17px; padding-top: 17px; }
  .sidebar-project > span { font-size: 8px; }
  .sidebar-project button, .sidebar-project a { min-height: 29px; padding-block: 6px; }
  .cinema-panels { padding: 11px 8px 18px; }
  .cinema-writing.writing-preview { gap: 10px; }
  .cinema-panel-bar { min-height: 43px; padding: 8px 15px; font-size: 11px; }
  .cinema-panel-bar .chapter-trigger, .cinema-panel-bar #editor-word-count { font-size: 10px; }
  .cinema-panel-bar svg { width: 17px; height: 17px; }
  .cinema-editor .manuscript-preview { padding-block: 12px 18px; }
  .cinema-editor #sample-chapter-title { margin-bottom: 18px; }
  .cinema-editor .manuscript-body p + p { margin-top: 19px; }
  .cinema-world-list { padding: 6px 12px; }
  .cinema-world-list > button { padding: 5px 0; gap: 11px; }
  .cinema-world-list strong { font-size: 10px; }
  .cinema-world-list small { font-size: 9px; }
  .cinema-world .cinema-panel-bar, .cinema-connections .cinema-panel-bar { padding-inline: 12px; }
  .mini-graph { height: calc(100% - 43px); }
  .mini-node { min-height: 35px; padding-inline: 6px; gap: 6px; font-size: 9px; }
  .mini-node svg { width: 16px; height: 16px; }
  .cinema-feature h2 { margin-top: 13px; }
  .cinema-feature p { margin-top: 11px; }
  .feature-symbol, .feature-world .feature-symbol, .feature-connections .feature-symbol, .feature-writing .feature-symbol { width: 30px; height: 30px; }
  .world-tile { border-radius: 10px; }
  .world-tile strong { font-size: 12px; }
  .world-tile small { font-size: 10px; }
  .world-tile strong, .world-tile small { margin-inline: 14px; }
  .feature-connections, .feature-writing { padding-block: 25px; padding-right: 44px; }
  .feature-arrow { right: 24px; width: 23px; }
}
@media (max-width: 1000px) {
  .cinema-header .desktop-nav { display: none; }
  .cinema-header .menu-button { display: flex; flex-direction: column; gap: 6px; }
  .cinema-header .menu-button span { display: block; width: 19px; height: 1px; background: #d6c39f; }
  .cinema-header .mobile-nav { z-index: 30; background: #1b1d18; border-color: #bca37a50; }
  .cinema-header .header-actions { gap: 18px; }
  .cinema-hero-copy { max-width: 78%; }
  .cinema-hero #hero-title { font-size: clamp(44px, 5.2vw, 54px); }
  .cinema-workspace-bar { flex-wrap: wrap; padding: 16px 20px 10px; gap: 12px; }
  .cinema-workspace .workspace-tabs { order: 4; width: 100%; justify-content: center; margin-top: 7px; }
  .preview-project { margin-right: auto; }
  .preview-actions { margin-left: 0; }
  .cinema-workspace-body { grid-template-columns: 125px minmax(0, 1fr); }
  .cinema-writing.writing-preview { grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); height: 370px; }
  .cinema-connections { display: none; }
  .cinema-feature h2 { font-size: 24px; }
  .cinema-feature p { font-size: 14px; }
  .cinema-feature p br { display: none; }
  .feature-world { min-height: 430px; }
  .feature-world-map { margin-inline: -10px; }
  .world-tile strong, .world-tile small { margin-inline: 10px; }
  .world-tile strong { font-size: 11px; }
  .feature-arrow { right: 14px; }
}
@media (max-width: 760px) {
  :root { --centya-header-height: 66px; --centya-hero-height: 620px; }
  .cinema-container { width: calc(100% - 40px); }
  .cinema-header .header-inner { height: var(--centya-header-height); gap: 12px; }
  .cinema-header .brand { gap: 8px; font-size: 22px; }
  .cinema-header .brand img { width: 28px; }
  .cinema-header .header-actions { gap: 12px; }
  .cinema-header .sign-in-link { font-size: 12px; }
  .cinema-header .header-cta { display: inline-flex; font-size: 12px; min-height: 38px; padding: 9px 11px; gap: 10px; }
  .cinema-header .header-cta svg { width: 15px; }
  .cinema-header .menu-button { width: 30px; padding: 5px; }
  body:not(:has(.cinema-home)) .cinema-header .header-cta { display: none; }
  .cinema-hero { align-items: flex-start; }
  .hero-inner { padding: 64px 6px 270px; }
  .cinema-hero-copy { max-width: none; width: 100%; }
  .cinema-hero #hero-title { font-size: clamp(32px, 8vw, 44px); line-height: 1.04; }
  .cinema-hero .hero-description { margin-top: 22px; max-width: 440px; font-size: 14px; line-height: 1.55; }
  .cinema-hero .hero-description br { display: none; }
  .cinema-hero .hero-actions { gap: 10px; margin-top: 26px; flex-wrap: wrap; }
  .hero-background, .opening-background { object-position: right top; }
  .cinema-home .button { font-size: 12px; min-height: 46px; padding: 11px 14px; gap: 12px; }
  .cinema-home .button svg { width: 18px; height: 18px; }
  .cinema-workspace { margin-top: 0; border-radius: 18px; }
  .cinema-workspace-bar { padding: 16px 15px 12px; gap: 10px; }
  .preview-logo { font-size: 15px; padding-right: 12px; gap: 7px; }
  .preview-logo img { width: 22px; height: 22px; }
  .preview-project { font-size: 10px; gap: 6px; }
  .preview-project svg { width: 9px; }
  .preview-actions .icon-button { width: 28px; padding: 6px; }
  .preview-actions .preview-updates { display: none; }
  .preview-actions { gap: 0; }
  .cinema-workspace .workspace-tabs { gap: 5px; justify-content: space-between; }
  .cinema-workspace .workspace-tabs button { gap: 6px; font-size: 10px; padding: 9px 8px; min-height: 36px; }
  .cinema-workspace .workspace-tabs button svg { width: 15px; height: 15px; }
  .cinema-workspace-body { grid-template-columns: minmax(0, 1fr); }
  .cinema-sidebar { display: none; }
  .cinema-panels { padding: 10px 10px 14px; }
  .cinema-writing.writing-preview { height: auto; grid-template-columns: minmax(0, 1fr); gap: 12px; }
  .cinema-editor { min-height: 325px; }
  .cinema-editor .manuscript-preview { flex: auto; max-height: 360px; padding: 12px 20px 26px; }
  .cinema-editor #sample-chapter-title { font-size: 25px; }
  .cinema-editor .manuscript-body { font-size: 14px; line-height: 1.6; }
  .cinema-world-list { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; padding: 10px 12px 14px; }
  .cinema-world-list > button { gap: 9px; }
  .cinema-world-list img { width: 45px; height: 45px; flex-basis: 45px; border-radius: 6px; }
  .cinema-world-list small { margin-top: 3px; }
  .cinema-panel-bar { padding-inline: 20px; }
  .cinema-panel-bar > button { font-size: 18px; }
  .cinema-workspace .content-preview { grid-template-columns: minmax(0, 1fr); }
  .cinema-workspace .content-preview .details-preview { border-top: 1px solid #bda47a33; }
  .cinema-workspace .character-card { min-height: 110px; }
  .cinema-workspace .character-grid { padding: 12px; gap: 10px; }
  .cinema-workspace .content-tools { padding: 16px 12px; gap: 10px; }
  .cinema-workspace .content-search { max-width: 155px; }
  .cinema-workspace .character-card strong { font-size: 11px; }
  .cinema-workspace .character-card > span:last-child { font-size: 9px; }
  .cinema-workspace .workspace-caption { gap: 15px; padding: 14px; }
  .cinema-workspace .workspace-caption p { font-size: 10px; }
  .cinema-workspace .relations-preview { min-height: 400px; }
  .cinema-workspace .relation-canvas { height: 365px; }
  .cinema-workspace .relation-node { padding: 8px; gap: 6px; width: 90px; }
  .cinema-workspace .relation-node strong { font-size: 9px; }
  .cinema-workspace .relation-node span { font-size: 8px; }
  .cinema-workspace .node-avatar { width: 25px; height: 29px; font-size: 10px; }
  .cinema-workspace .relation-label { font-size: 8px; }
  .cinema-workspace .relation-legend { font-size: 9px; padding-inline: 12px; }
  .cinema-features { margin-top: 55px; display: flex; flex-direction: column; gap: 18px; }
  .cinema-feature { padding: 27px; border-radius: 14px; }
  .cinema-feature h2 { font-size: 24px; margin-top: 17px; line-height: 1.15; }
  .cinema-feature p { font-size: 14px; line-height: 1.6; }
  .feature-world { min-height: 410px; }
  .feature-world-map { height: 190px; margin: 25px -8px -10px; }
  .world-tile { width: 28%; }
  .tile-valemor { width: 35%; left: 32%; }
  .tile-elara { left: 1%; }
  .world-tile strong { font-size: 11px; }
  .world-tile small { font-size: 10px; }
  .feature-connections, .feature-writing { min-height: 205px; padding-right: 40px; }
  .feature-arrow { right: 19px; top: 42%; }
  .cinema-dialog { padding: 34px 24px; }
  .cinema-dialog h2 { font-size: 28px; }
  .cinema-dialog .wishlist-entry .button { font-size: 13px; }
  .opening-center { width: calc(100vw - 56px); }
  .opening-mark { width: 48px; height: 48px; }
  .opening-name { font-size: 44px; letter-spacing: 6px; margin-top: 27px; }
  .opening-tagline { font-size: 15px; margin-top: 22px; }
  .opening-loading { margin-top: 48px; width: 238px; }
  .opening-status { font-size: 9px; letter-spacing: 1.6px; }
}
@media (max-width: 380px) {
  .cinema-container { width: calc(100% - 28px); }
  .cinema-header .header-actions { gap: 8px; }
  .cinema-header .header-cta { display: none; }
  .cinema-header .brand { font-size: 22px; gap: 5px; }
  .cinema-header .brand img { width: 25px; }
  .cinema-hero .hero-actions { gap: 9px; }
  .cinema-home .button { gap: 10px; padding-inline: 12px; }
  .cinema-hero .hero-description { font-size: 14px; }
  .preview-logo { font-size: 13px; padding-right: 8px; }
  .preview-logo img { width: 19px; }
  .preview-project { font-size: 9px; }
  .cinema-workspace-bar { padding-inline: 12px; gap: 7px; }
  .preview-actions .icon-button { width: 25px; }
  .cinema-workspace .workspace-tabs button { font-size: 9px; padding-inline: 6px; gap: 5px; }
  .cinema-workspace .workspace-tabs { gap: 2px; }
  .cinema-feature { padding: 24px 20px; }
  .cinema-feature h2 { font-size: 23px; }
  .world-tile strong { font-size: 10px; }
  .world-tile small { font-size: 9px; }
  .feature-world { min-height: 390px; }
  .feature-world-map { margin-inline: -7px; height: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .opening *, .opening { animation: none !important; transition: none !important; }
  .world-tile:hover, a.cinema-feature:hover .feature-arrow { translate: none; }
}
@media print {
  .opening, .preview-actions, .cinema-sidebar { display: none !important; }
  .cinema-home { overflow: visible; }
  .cinema-workspace { box-shadow: none; }
}