.product-hero { position: relative; min-height: calc(100svh - 78px); overflow: hidden; color: #f7ecdd; background: radial-gradient(circle at 76% 40%, #442451 0, #25102e 31%, transparent 56%), linear-gradient(135deg, #17091e, #0e0712 70%); }
.product-hero::before { position: absolute; inset: 0; content: ""; opacity: .16; background: url("brand/backgrounds/vault-rings-dark.svg") center / cover no-repeat; }
.product-hero-shell { position: relative; min-height: calc(100svh - 78px); display: grid; grid-template-columns: minmax(0, .88fr) minmax(470px, 1.12fr); gap: 58px; align-items: center; padding-top: 70px; padding-bottom: 96px; }
.hero-copy { position: relative; z-index: 2; }
.hero-copy .status-pill { margin-bottom: 34px; }
.hero-copy .eyebrow { margin-bottom: 20px; color: #cfa7df; }
.hero-copy h1 { margin-bottom: 30px; font-size: clamp(4.3rem, 8.2vw, 8rem); letter-spacing: -.055em; }
.hero-copy h1 em { color: #d7a9e8; font-weight: 450; }
.hero-lead { max-width: 650px; margin: 0; color: #c7b7ca; font-size: clamp(1rem, 1.6vw, 1.18rem); line-height: 1.75; }
.hero-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 24px; margin-top: 36px; }
.hero-text-link { display: inline-flex; gap: 10px; align-items: center; color: #e6d9e7; font-size: .8rem; font-weight: 670; text-underline-offset: 6px; }
.hero-facts { display: flex; flex-wrap: wrap; gap: 12px 28px; margin: 36px 0 0; padding: 0; color: #9f8ea4; list-style: none; font-size: .68rem; font-weight: 620; letter-spacing: .04em; }
.hero-facts li::before { content: "✦"; margin-right: 8px; color: #d3a260; }
.hero-stars i { position: absolute; z-index: 1; width: 3px; height: 3px; border-radius: 50%; background: #d8aae9; box-shadow: 0 0 10px rgba(216, 170, 233, .8); animation: star-pulse 3.2s ease-in-out infinite; }
.hero-stars i:nth-child(1) { top: 17%; left: 8%; }.hero-stars i:nth-child(2) { top: 32%; left: 47%; animation-delay: .8s; }.hero-stars i:nth-child(3) { top: 20%; right: 7%; animation-delay: 1.5s; }.hero-stars i:nth-child(4) { bottom: 20%; left: 22%; animation-delay: 2.1s; }.hero-stars i:nth-child(5) { right: 12%; bottom: 14%; animation-delay: .4s; }.hero-stars i:nth-child(6) { right: 42%; bottom: 7%; animation-delay: 1.1s; }
@keyframes star-pulse { 50% { opacity: .25; transform: scale(.65); } }

.hero-world-scene { position: relative; min-height: 690px; isolation: isolate; }
.hero-world-scene::before { position: absolute; z-index: -2; inset: 13% 2% 0 10%; content: ""; border-radius: 34px; background: radial-gradient(circle at 66% 42%, rgba(174, 112, 199, .3), transparent 48%); filter: blur(26px); }
.hero-art { position: absolute; z-index: 1; inset: 9% 3% 1% 10%; overflow: hidden; border: 1px solid rgba(211, 162, 96, .55); border-radius: 32px 108px 30px 30px; background: #25132d; box-shadow: 0 34px 84px rgba(6, 2, 9, .42); transform: rotate(1.2deg); }
.hero-art::after { position: absolute; inset: 12px; content: ""; pointer-events: none; border: 1px solid rgba(248, 236, 219, .19); border-radius: 23px 93px 22px 22px; }
.hero-art img { width: 100%; height: 100%; object-fit: cover; object-position: 58% center; filter: saturate(.9) contrast(1.02); }
.world-card { position: absolute; z-index: 3; width: 245px; padding: 18px 20px; border: 1px solid rgba(216, 205, 191, .52); border-radius: 13px; color: #332139; background: rgba(251, 247, 239, .96); box-shadow: 0 19px 50px rgba(12, 5, 16, .34); backdrop-filter: blur(10px); }
.world-card span { display: block; margin-bottom: 8px; color: #8b50ae; font-size: .55rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }
.world-card strong { display: block; font-family: var(--site-display); font-size: 1.23rem; line-height: 1.08; }
.world-card p { margin: 9px 0 0; color: #756779; font-size: .67rem; line-height: 1.48; }
.world-card i { color: #8b50ae; font-weight: 550; }
.hero-place { top: 2%; left: 0; transform: rotate(-2.4deg); }
.hero-connection { top: 18%; right: -2%; width: 255px; transform: rotate(1.8deg); }
.turn-page { position: absolute; z-index: 4; bottom: 24px; left: 50%; display: grid; place-items: center; gap: 6px; color: #9c8a9f; font-size: .58rem; font-weight: 680; letter-spacing: .15em; text-decoration: none; text-transform: uppercase; transform: translateX(-50%); }
.turn-page span { width: 23px; height: 37px; border: 1px solid #68536d; border-radius: 14px; }.turn-page span::after { display: block; width: 3px; height: 7px; margin: 7px auto; content: ""; border-radius: 4px; background: #d3a260; }

.feature-ledger { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; }
.feature { min-height: 290px; padding: 30px; border: 1px solid var(--site-line); border-radius: 20px; background: rgba(255, 255, 255, .5); }
.feature-wide { grid-column: 1 / -1; min-height: 500px; display: grid; grid-template-columns: .72fr 1.28fr; gap: 62px; align-items: center; padding: 46px; color: #f5eadc; background: linear-gradient(135deg, #1b0c23, #2b1634); box-shadow: var(--site-shadow); }
.feature h3 { margin: 24px 0 15px; font-size: 2rem; }.feature-wide h3 { max-width: 480px; margin-top: 18px; font-size: clamp(2.6rem, 5vw, 4.5rem); }
.feature p { margin: 0; color: var(--site-muted); font-size: .88rem; line-height: 1.7; }.feature-wide p { max-width: 540px; color: #bdafc1; }
.feature-icon { width: 55px; height: 55px; display: grid; place-items: center; border: 1px solid rgba(179, 138, 82, .42); border-radius: 50%; color: #956a35; background: #fff8ec; font-family: var(--site-display); font-size: 1.7rem; }
.canon-preview { position: relative; min-height: 360px; display: grid; grid-template-columns: minmax(0, 1fr) 76px minmax(0, 1fr) 76px minmax(0, 1fr); align-items: center; }
.canon-card { position: relative; z-index: 2; min-width: 0; min-height: 220px; display: flex; flex-direction: column; justify-content: center; padding: 20px; border: 1px solid rgba(216, 205, 191, .52); border-radius: 16px; color: #2b1d30; background: #f9f2e8; box-shadow: 0 20px 48px rgba(0, 0, 0, .22); }
.canon-character { transform: rotate(-1deg); }
.canon-place { transform: rotate(1deg); }
.canon-artefact { transform: rotate(-.3deg); }
.canon-card-top { display: flex; justify-content: space-between; gap: 12px; margin-bottom: 18px; padding-bottom: 10px; border-bottom: 1px solid #d8cdbf; }
.canon-card-top span { color: #8b50ae; font-size: .56rem; font-weight: 760; letter-spacing: .13em; text-transform: uppercase; }
.canon-card-top i { color: #8b7c8e; font-size: .57rem; font-style: normal; }
.canon-card h4 { margin: 0 0 8px; font-family: var(--site-display); font-size: 1.6rem; font-weight: 620; line-height: 1; }
.canon-card p { color: #665967; font-size: .7rem; line-height: 1.55; }
.canon-relationship { position: relative; z-index: 3; min-width: 0; display: flex; align-items: center; color: #eadfcf; font-size: .52rem; font-weight: 760; letter-spacing: .08em; text-transform: uppercase; }
.canon-relationship::before, .canon-relationship::after { min-width: 0; height: 1px; flex: 1; content: ""; background: #d3a260; box-shadow: 0 0 8px rgba(211, 162, 96, .24); }
.canon-relationship span { flex: 0 0 auto; padding: 5px 8px; border: 1px solid rgba(211, 162, 96, .66); border-radius: 999px; background: #2a1533; }

.story-section { color: #f6ebde; background: #14091a; }
.story-layout { display: grid; grid-template-columns: .85fr 1.15fr; gap: 90px; align-items: center; }
.story-copy .section-title { color: #f6ebde; }.story-copy .section-lead { color: #b9aabd; }
.plain-list { margin: 34px 0 0; padding: 0; list-style: none; }.plain-list li { position: relative; margin: 20px 0; padding-left: 27px; color: #ad9caf; font-size: .82rem; line-height: 1.65; }.plain-list li::before { position: absolute; top: .6em; left: 0; width: 8px; height: 8px; content: ""; border: 1px solid #d3a260; transform: rotate(45deg); }.plain-list strong { color: #eadfcf; }
.story-preview { position: relative; min-height: 760px; padding: 54px 50px 190px; border: 1px solid rgba(234, 220, 199, .25); border-radius: 26px; color: #291d2d; background: #f9f3e9; box-shadow: 0 35px 90px rgba(0, 0, 0, .3); transform: rotate(.7deg); }
.story-preview::before { position: absolute; inset: 13px; content: ""; pointer-events: none; border: 1px solid rgba(179, 138, 82, .22); border-radius: 18px; }
.story-preview-top { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 42px; padding-bottom: 16px; border-bottom: 1px solid #d8cdbf; color: #756779; font-size: .62rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; }.story-preview-top i { color: #8b50ae; font-style: normal; }
.story-preview > p { position: relative; margin: 0; font-family: var(--site-display); font-size: clamp(1.18rem, 1.65vw, 1.48rem); line-height: 1.48; }
.story-preview blockquote { margin: 30px 0 0; padding-left: 22px; border-left: 2px solid #b38a52; color: #765a7d; font-size: 1.08rem; font-style: italic; line-height: 1.35; }
.memory-card { position: absolute; right: -34px; bottom: 74px; width: 320px; padding: 20px; border: 1px solid #b38a52; border-radius: 14px; color: #f3e7d9; background: #24132c; box-shadow: 0 16px 38px rgba(16, 8, 21, .26); }.memory-card span { display: block; margin-bottom: 7px; color: #d3a260; font-size: .54rem; font-weight: 750; letter-spacing: .13em; text-transform: uppercase; }.memory-card strong { font-family: var(--site-display); font-size: 1rem; font-weight: 520; line-height: 1.35; }
.story-actions { position: absolute; right: 38px; bottom: 28px; left: 38px; display: flex; gap: 8px; align-items: center; }.story-actions span { padding: 8px 12px; border: 1px solid #d8cdbf; border-radius: 8px; color: #776b78; font-size: .62rem; }.story-actions b { margin-left: auto; padding: 10px 16px; border-radius: 9px; color: #fff8eb; background: #1a0d22; font-size: .65rem; }

.centered-heading { max-width: 790px; margin: 0 auto 55px; text-align: center; }.centered-heading .section-lead { margin-inline: auto; }
.creator-cards .card { min-height: 315px; }
.principle-section { background: #f1e6d6; }
.principle-list { border-top: 1px solid #cfc1ad; }
.principle-list article { display: grid; grid-template-columns: 80px 1fr; gap: 28px; padding: 34px 0; border-bottom: 1px solid #cfc1ad; }.principle-list article > span { color: #8b50ae; font-size: .68rem; font-weight: 750; letter-spacing: .12em; }.principle-list h3 { margin-bottom: 8px; font-size: 1.8rem; }.principle-list p { max-width: 760px; margin: 0; color: #665967; font-size: .88rem; line-height: 1.7; }
.pricing-section { color: #f6ebde; background: radial-gradient(circle at 50% 0, rgba(102, 54, 120, .35), transparent 34%), #14091a; }
.pricing-heading { display: grid; grid-template-columns: minmax(0, 1fr) minmax(280px, .62fr); gap: 64px; align-items: end; margin-bottom: 48px; }
.pricing-heading .section-title { max-width: 820px; color: #f6ebde; }
.pricing-heading .section-lead { color: #b9aabd; }
.pricing-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 18px; align-items: stretch; }
.pricing-card { position: relative; min-width: 0; display: flex; flex-direction: column; padding: 30px 26px 26px; border: 1px solid rgba(234, 220, 199, .2); border-radius: 21px; background: rgba(249, 243, 233, .055); box-shadow: 0 26px 65px rgba(5, 2, 7, .22); }
.pricing-card-featured { border-color: #b38a52; background: linear-gradient(180deg, rgba(139, 80, 174, .25), rgba(249, 243, 233, .07)); box-shadow: 0 26px 70px rgba(5, 2, 7, .35), 0 0 0 1px rgba(211, 162, 96, .12); }
.pricing-badge { position: absolute; top: 0; left: 50%; padding: 7px 13px; border: 1px solid #b38a52; border-radius: 999px; color: #1a0d22; background: #e6bd80; font-size: .53rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; transform: translate(-50%, -50%); white-space: nowrap; }
.pricing-card-top { min-height: 128px; display: flex; flex-direction: column; justify-content: space-between; gap: 18px; padding-bottom: 22px; border-bottom: 1px solid rgba(234, 220, 199, .16); }
.pricing-label { margin: 0 0 8px; color: #c99ddd; font-size: .57rem; font-weight: 780; letter-spacing: .13em; text-transform: uppercase; }
.pricing-card h3 { margin: 0; color: #f8eddf; font-size: 2.25rem; }
.price { display: flex; align-items: baseline; gap: 3px; margin: 0; color: #fff6e9; font-family: var(--site-display); font-size: 3.15rem; line-height: .92; }
.price > span { align-self: flex-start; padding-top: 4px; color: #d3a260; font-family: var(--site-sans); font-size: .87rem; font-weight: 760; }
.price small { margin-left: 6px; color: #9f8ea4; font-family: var(--site-sans); font-size: .61rem; font-weight: 620; letter-spacing: .03em; }
.pricing-summary { min-height: 100px; margin: 22px 0 18px; color: #c5b7c7; font-size: .78rem; line-height: 1.65; }
.pricing-features { display: grid; gap: 13px; margin: 0; padding: 0; list-style: none; }
.pricing-features li { position: relative; padding-left: 20px; color: #e2d5e2; font-size: .72rem; line-height: 1.5; }
.pricing-features li::before { position: absolute; top: .38em; left: 1px; content: "✦"; color: #d3a260; font-size: .58rem; }
.pricing-note { min-height: 40px; margin: 24px 0 17px; color: #9f8ea4; font-size: .64rem; line-height: 1.5; }
.pricing-button { width: 100%; margin-top: auto; border-color: rgba(234, 220, 199, .28); color: #f8eddf; background: rgba(255, 255, 255, .045); }
.pricing-button:hover { border-color: #b38a52; background: rgba(211, 162, 96, .1); }
.pricing-card-featured .pricing-button { border-color: transparent; }
.pricing-disclaimer { max-width: 960px; margin: 34px auto 0; color: #938397; font-size: .68rem; line-height: 1.65; text-align: center; }
.studio-band { padding: 88px 0; background: #fbf7ef; }
.studio-band-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 90px; align-items: center; padding: 54px; border: 1px solid #d8cdbf; border-radius: 25px; background: rgba(255, 255, 255, .55); box-shadow: 0 22px 60px rgba(36, 23, 42, .07); }
.studio-band h2 { margin: 0; font-size: clamp(2.6rem, 5vw, 4.6rem); }.studio-band-layout > div:last-child p { margin: 0 0 23px; color: #675e69; line-height: 1.75; }

.formkit-form [data-style="clean"] { width: 100%; }
.formkit-form .formkit-field { min-width: 0; }
.formkit-form .formkit-alert { width: 100%; margin: 0 0 16px; padding: 12px 14px; border: 1px solid rgba(234, 220, 199, .3); border-radius: 10px; color: #f5e9d9; background: rgba(16, 8, 21, .7); font-size: .75rem; line-height: 1.5; list-style: none; }
.formkit-form .formkit-alert:empty { display: none; }
.formkit-form .formkit-alert-success { border-color: rgba(129, 204, 164, .58); color: #d8f4e5; background: rgba(32, 89, 59, .35); }
.formkit-form .formkit-alert-error { border-color: rgba(232, 131, 119, .58); color: #ffd8d2; background: rgba(112, 40, 35, .35); }
.formkit-form .formkit-submit { position: relative; overflow: hidden; }
.formkit-form .formkit-submit > span { display: block; }
.formkit-form .formkit-submit[data-active] > span { opacity: 0; }
.formkit-form .formkit-submit[data-active]::after { position: absolute; top: 50%; left: 50%; width: 18px; height: 18px; content: ""; border: 2px solid rgba(34, 20, 39, .28); border-top-color: #221427; border-radius: 50%; animation: kit-submit-spin .75s linear infinite; transform: translate(-50%, -50%); }
.formkit-powered-by-convertkit-container { display: flex; justify-content: flex-end; margin-top: 13px; }
.formkit-powered-by-convertkit { color: #9e8fa2; font-size: .62rem; font-weight: 600; text-decoration-color: rgba(158, 143, 162, .5); text-underline-offset: 3px; }
.formkit-powered-by-convertkit:hover { color: #f1dfc8; }
@keyframes kit-submit-spin { to { transform: translate(-50%, -50%) rotate(360deg); } }

@media (max-width: 1020px) {
  .product-hero-shell { grid-template-columns: 1fr; padding-top: 100px; text-align: center; }
  .hero-copy { max-width: 780px; margin-inline: auto; }.hero-lead { margin-inline: auto; }.hero-actions, .hero-facts { justify-content: center; }
  .hero-world-scene { width: min(100%, 700px); min-height: 680px; margin-inline: auto; }
  .feature-ledger { grid-template-columns: 1fr 1fr; }.feature-wide { grid-template-columns: 1fr; gap: 35px; }.feature:last-child { grid-column: 1 / -1; }
  .story-layout { grid-template-columns: 1fr; gap: 65px; }.story-copy { max-width: 700px; }
  .pricing-grid { grid-template-columns: 1fr 1fr; gap: 24px 16px; }.pricing-card-top, .pricing-summary, .pricing-note { min-height: 0; }
}

@media (max-width: 720px) {
  .product-hero-shell { padding-top: 70px; }.hero-copy h1 { font-size: clamp(4rem, 20vw, 6.6rem); }.hero-actions { flex-direction: column; }.hero-actions .button { width: 100%; }.hero-facts { gap: 10px 16px; }
  .hero-world-scene { min-height: 590px; }.hero-art { inset: 12% 0 0 4%; border-radius: 24px 76px 24px 24px; }.hero-place { top: 2%; left: 0; }.hero-connection { top: 21%; right: -2%; }.world-card { width: min(210px, 58vw); padding: 14px; }.world-card strong { font-size: 1.05rem; }.world-card p { font-size: .61rem; }
  .feature-ledger { grid-template-columns: 1fr; }.feature-wide, .feature:last-child { grid-column: auto; }.feature-wide { padding: 28px; }.feature { min-height: auto; }.canon-preview { grid-template-columns: 1fr; min-height: auto; }.canon-card { min-height: auto; transform: none; }.canon-relationship { min-height: 66px; flex-direction: column; }.canon-relationship::before, .canon-relationship::after { width: 1px; min-height: 16px; flex: 1; }.canon-relationship span { padding: 5px 10px; }
  .story-preview { min-height: 820px; padding: 40px 28px 190px; }.story-preview-top { margin-bottom: 30px; }.story-preview > p { font-size: 1.1rem; }.memory-card { right: 15px; bottom: 70px; width: min(320px, calc(100% - 30px)); }.story-actions { right: 24px; left: 24px; overflow: hidden; }.story-actions span { display: none; }
  .pricing-heading, .pricing-grid { grid-template-columns: 1fr; }.pricing-heading { gap: 24px; margin-bottom: 40px; }.pricing-grid { gap: 28px; }.pricing-card { padding: 28px 24px 24px; }.pricing-card-top { min-height: 0; }.price { font-size: 2.8rem; }
  .principle-list article { grid-template-columns: 48px 1fr; gap: 12px; }.studio-band-layout { grid-template-columns: 1fr; gap: 28px; padding: 28px; }
}