:root { color-scheme: light; --ink: #40364d; --muted: #706577; --purple: #7657ba; --purple-dark: #60439e; --line: #e4dfe8; --paper: #faf8f4; font-family: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
body { margin: 0; background: var(--paper); color: var(--ink); }
button { font: inherit; cursor: pointer; }
a { color: var(--purple-dark); }
button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }
[hidden] { display: none !important; }
button:focus-visible, a:focus-visible, [tabindex="-1"]:focus-visible { outline: 3px solid #916219; outline-offset: 4px; }
button:disabled { color: #6c6275; background: #eeeaf1; border-color: #b7acbe; box-shadow: none; cursor: default; }
.skip-link { position: absolute; top: -100px; left: 20px; z-index: 5; background: #fff; padding: 16px; border: 2px solid var(--purple-dark); border-radius: 10px; }
.skip-link:focus { top: 15px; }
.purchase-header { max-width: 1320px; margin: 0 auto; padding: 27px 5%; display: flex; align-items: center; justify-content: space-between; gap: 24px; border-bottom: 1px solid var(--line); }
.brand { display: flex; align-items: center; gap: 13px; font-size: 27px; font-weight: 800; letter-spacing: -.9px; color: var(--ink); text-decoration: none; }
.brand img { flex: 0 0 44px; }
.brand-accent { color: var(--purple); }
.brand small { display: block; margin-top: 7px; font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: .3px; }
.header-links { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 48px; min-width: 48px; padding: 12px 18px; border: 1px solid transparent; border-radius: 13px; font-size: 14px; font-weight: 700; line-height: 1.5; text-align: center; text-decoration: none; }
.button-primary { background: var(--purple); color: #fff; box-shadow: 0 3px 0 #5f449d; }
.button-primary:hover:enabled { background: var(--purple-dark); }
.button-secondary { border-color: #8d7f9a; background: #fff; color: #5b4c6b; box-shadow: 0 2px 0 #eee9e3; }
.button-secondary:hover:enabled, a.button-secondary:hover { background: #f4effb; }
.full-width { width: 100%; }
.purchase-main { max-width: 1160px; margin: 0 auto; padding: 46px 4.5% 36px; }
.purchase-intro { max-width: 730px; margin-bottom: 28px; }
.eyebrow { display: block; font-size: 11px; font-weight: 750; letter-spacing: 1.7px; color: var(--muted); line-height: 1.7; }
h1 { font-size: clamp(36px, 4.4vw, 53px); letter-spacing: -1.8px; line-height: 1.13; margin: 15px 0 18px; font-weight: 800; }
h1 span { color: var(--purple); }
h2 { font-size: 25px; line-height: 1.3; letter-spacing: -.65px; margin: 7px 0 10px; }
h3 { font-size: 25px; line-height: 1.3; letter-spacing: -.6px; margin: 11px 0 12px; }
h4 { font-size: 18px; margin: 0 0 9px; }
p { font-size: 15px; line-height: 1.75; color: var(--muted); margin: 10px 0 15px; }
.small-copy { font-size: 13px; line-height: 1.7; }
.review-notice { background: #f0eaf9; border: 1px solid #cfc0e4; border-radius: 18px; padding: 20px 23px; display: flex; align-items: flex-start; gap: 17px; margin-bottom: 24px; }
.review-notice strong { font-size: 14px; line-height: 1.6; color: #513b72; }
.review-notice p { font-size: 13px; color: #655375; margin: 5px 0 0; }
.notice-symbol { color: #694f95; font-size: 28px; line-height: 1.2; }
.page-message { color: #405d47; max-width: 830px; font-size: 14px; margin: 0 0 24px; }
.page-message:empty { display: none; }
.error-card { background: #fff1f1; border: 1px solid #c78089; color: #943747; border-radius: 18px; padding: 22px; margin-bottom: 24px; }
.error-card h2 { font-size: 21px; margin-top: 0; }
.error-card p { color: #943747; font-size: 14px; }
.loading-note { padding: 18px 0; color: var(--muted); font-size: 14px; }
.account-summary { border: 1px solid var(--line); border-radius: 22px; padding: 27px; display: flex; justify-content: space-between; gap: 26px; background: #fff; box-shadow: 0 3px 0 #eee9e3; }
.account-summary > div:first-child { flex: 1; min-width: 0; }
.account-summary h2 { font-size: 23px; margin-top: 9px; }
.account-summary p { font-size: 14px; margin-bottom: 9px; }
.summary-actions { display: flex; flex-direction: column; align-items: stretch; gap: 12px; justify-content: center; min-width: 206px; }
.text-link { display: inline-flex; align-items: center; justify-content: center; min-height: 48px; font-size: 13px; font-weight: 700; text-underline-offset: 4px; }
.free-strip { display: flex; align-items: flex-start; gap: 23px; margin: 28px 0 42px; padding: 26px 28px; border-radius: 22px; border: 1px solid #d5e1d0; background: #edf3e9; }
.free-icon { flex: 0 0 46px; display: grid; place-items: center; width: 46px; height: 46px; color: #45614c; background: #dbe8d5; border-radius: 15px; font-size: 29px; }
.free-strip h2 { font-size: 21px; color: #45614c; margin-top: 0; }
.free-strip p { font-size: 14px; color: #536557; }
.free-strip .small-copy { font-size: 13px; margin-bottom: 0; }
.section-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 28px; margin: 0 0 23px; }
.section-heading h2 { margin-bottom: 0; }
.section-heading > p { max-width: 260px; font-size: 13px; margin: 0 0 2px; }
.collections-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 25px; }
.offer-card { border: 1px solid var(--line); border-radius: 24px; overflow: hidden; background: #fff; box-shadow: 0 4px 0 #eee9e3; display: flex; flex-direction: column; }
.collection-illustration { padding: 10px 14px 17px; text-align: center; }
.collection-illustration svg { display: block; width: 100%; height: auto; max-height: 195px; }
.collection-illustration span { font-size: 10px; font-weight: 800; letter-spacing: 2px; }
.ocean-illustration { background: #e3f1f0; color: #3b6468; }
.library-illustration { background: #f3e9da; color: #775c3f; }
.collection-illustration svg path, .collection-illustration svg circle { stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ocean-whale { fill: #b4d8d5; stroke: #3b6468; }
.ocean-whale path + path { fill: none; }
.little-fish { fill: #f5d696; stroke: #745a35; }
.coral { fill: none; stroke: #9e5d55; }
.wave-line { fill: none; stroke: #8abebc; }
.bubble { fill: none; stroke: #6c8d8e; }
.spark-line { fill: none; stroke: #88713e; }
.library-rocket { fill: #d7c9e9; stroke: #695487; }
.library-rocket path + path { fill: #e9c892; }
.library-rocket circle { fill: #f9f7f2; }
.library-flower { stroke: #716c42; fill: none; }
.library-flower path + path { fill: #e8bead; stroke: #936a58; }
.library-flower circle { fill: #eed89b; stroke: #936a58; }
.doodle-line { fill: none; stroke: #9d7855; }
.offer-body { padding: 25px 27px 28px; display: flex; flex: 1; flex-direction: column; }
.offer-type { font-size: 10px; letter-spacing: 1.5px; font-weight: 800; color: #79618c; line-height: 1.7; }
.offer-body > p { font-size: 14px; margin-top: 0; }
.feature-list { list-style: none; padding: 0; margin: 10px 0 23px; color: #5c5366; font-size: 14px; line-height: 1.7; }
.feature-list li { margin: 9px 0; padding-left: 23px; position: relative; }
.feature-list li::before { content: '✓'; position: absolute; left: 0; top: 0; color: #4f7158; font-weight: 800; }
.offer-purchase { margin-top: auto; padding-top: 17px; border-top: 1px solid var(--line); }
.offer-price { font-size: 22px; font-weight: 800; line-height: 1.4; color: var(--ink); letter-spacing: -.4px; margin: 5px 0; overflow-wrap: anywhere; }
.price-detail { font-size: 12px; line-height: 1.7; margin: 7px 0 18px; }
.whole-studio { margin-top: 43px; }
.studio-grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: 25px; }
.membership-card { padding: 28px; border: 1px solid #cbbbdc; border-radius: 24px; background: #f5f0fc; }
.membership-card h3 { font-size: 26px; }
.membership-card > p { font-size: 14px; }
.membership-card > .small-copy { font-size: 13px; }
.membership-options { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; border-top: 1px solid #d9cde7; margin-top: 23px; padding-top: 23px; }
.membership-option .offer-price { font-size: 19px; }
.membership-option .button { padding-left: 10px; padding-right: 10px; font-size: 13px; }
.lifetime-card { padding: 28px; border: 1px solid #dcc8a3; border-radius: 24px; background: #f6efdf; display: flex; flex-direction: column; align-items: flex-start; }
.lifetime-symbol { display: block; font-size: 35px; color: #8e6826; line-height: 1; margin-bottom: 16px; }
.lifetime-card .offer-type { color: #806131; }
.lifetime-card h3 { font-size: 25px; }
.lifetime-card > p { font-size: 14px; }
.lifetime-card .offer-price { margin-top: auto; padding-top: 10px; font-size: 22px; }
.lifetime-card .price-detail { font-size: 12px; }
.orders-section { margin-top: 44px; }
.orders-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 15px; }
.order-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; border: 1px solid var(--line); border-radius: 19px; background: #fff; padding: 22px; }
.order-title { font-size: 17px; margin: 0 0 8px; letter-spacing: 0; }
.order-row p { font-size: 14px; margin: 5px 0; }
.order-row .small-copy { font-size: 12px; }
.order-actions { display: flex; flex-direction: column; align-items: stretch; gap: 11px; min-width: 185px; }
.good-to-know { border-top: 1px solid var(--line); margin-top: 46px; padding-top: 25px; }
.good-to-know > h2 { font-size: 23px; }
.details-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; margin-top: 23px; }
.details-grid h3 { font-size: 15px; letter-spacing: 0; margin: 0 0 8px; }
.details-grid p { font-size: 13px; margin-top: 0; }
.purchase-footer { max-width: 1160px; margin: 0 auto; padding: 25px 4.5% 30px; display: flex; align-items: center; justify-content: space-between; gap: 22px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.purchase-footer p { font-size: 12px; margin: 0; }
.purchase-footer > span { color: #9c80b4; font-size: 22px; }
dialog { border: 1px solid #bba9cd; border-radius: 23px; background: #faf8f4; color: var(--ink); width: min(520px, calc(100% - 32px)); max-height: calc(100% - 32px); padding: 29px; overflow-y: auto; box-shadow: 0 18px 75px #30223c38; }
dialog::backdrop { background: #30223c70; }
dialog form { display: flex; justify-content: flex-end; margin: -8px -8px 10px; }
.dialog-close { width: 48px; padding: 0; font-size: 28px; }
dialog h2 { font-size: 28px; margin-top: 9px; }
.confirmation-warning { padding: 15px; font-size: 13px; background: #f1e9da; color: #725630; border-radius: 12px; }
.checkout-market-confirmation { display: flex; align-items: flex-start; gap: 13px; min-height: 48px; margin: 18px 0; padding: 14px; border: 1px solid #cbbbdc; border-radius: 12px; background: #f5f0fc; color: #40364d; font-size: 14px; line-height: 1.7; cursor: pointer; }
.checkout-market-confirmation input { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; accent-color: #60439e; cursor: pointer; }
.checkout-market-confirmation input:focus-visible { outline: 3px solid #916219; outline-offset: 4px; }
@media (max-width: 900px) { .purchase-header { flex-wrap: wrap; gap: 20px; } .header-links .button { font-size: 12px; } .studio-grid { grid-template-columns: minmax(0, 1fr); } .lifetime-card { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 28px; } .lifetime-card .lifetime-symbol { display: none; } .lifetime-card .offer-type, .lifetime-card h3, .lifetime-card > p:first-of-type { grid-column: 1; } .lifetime-card .offer-price { grid-column: 2; grid-row: 1 / span 2; margin: 0; align-self: end; } .lifetime-card .price-detail { grid-column: 2; grid-row: 3; } .lifetime-card .button { grid-column: 2; grid-row: 4; } }
@media (max-width: 650px) { .purchase-header { padding: 21px 5%; } .brand { font-size: 23px; } .header-links { width: 100%; gap: 10px; } .header-links .button { flex: 1; padding-left: 10px; padding-right: 10px; } .purchase-main { padding: 30px 5%; } h1 { font-size: 38px; letter-spacing: -1.4px; } .review-notice { padding: 19px; gap: 13px; } .account-summary { flex-direction: column; padding: 23px; gap: 16px; } .summary-actions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); min-width: 0; } .summary-actions .button { font-size: 12px; padding: 11px 8px; } .summary-actions .text-link { grid-column: 1 / -1; } .free-strip { padding: 22px; gap: 15px; margin-bottom: 34px; } .free-icon { display: none; } .section-heading { display: block; margin-bottom: 20px; } .section-heading > p { margin-top: 12px; max-width: none; } .collections-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .offer-body { padding: 24px; } .collection-illustration svg { max-height: 170px; } .membership-card, .lifetime-card { padding: 24px; } .membership-options { gap: 17px; } .membership-option .offer-price { font-size: 17px; } .membership-option .button { font-size: 12px; } .lifetime-card { display: flex; } .lifetime-card .lifetime-symbol { display: block; } .lifetime-card .offer-price { margin-top: 10px; } .order-row { align-items: stretch; flex-direction: column; gap: 16px; } .order-actions { flex-direction: row; min-width: 0; } .order-actions .button { flex: 1; font-size: 12px; padding: 10px; } .details-grid { grid-template-columns: minmax(0, 1fr); gap: 12px; } .purchase-footer { flex-wrap: wrap; padding: 22px 5% 28px; gap: 12px; } .purchase-footer p { order: 3; flex: 1 0 100%; } }
@media (max-width: 370px) { h1 { font-size: 33px; } .membership-options { grid-template-columns: minmax(0, 1fr); gap: 24px; } .membership-option + .membership-option { padding-top: 23px; border-top: 1px solid #d9cde7; } .membership-option .offer-price { font-size: 20px; } .membership-option .button { font-size: 14px; } .summary-actions { grid-template-columns: minmax(0, 1fr); } .summary-actions .text-link { grid-column: auto; } dialog { padding: 23px; } }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { scroll-behavior: auto !important; animation: none !important; transition: none !important; } }

/* Refund actions share the existing parent layout and wrap on narrow phones. */
.order-actions { flex-wrap: wrap; }

.us-purchase-panel { margin: 24px 0; }
.us-purchase-panel[hidden] { display: none; }

.subscription-management-panel { margin: 24px 0; }
.subscription-management-panel[hidden] { display: none; }

.membership-review-panel { width: 100%; max-width: 780px; min-width: 0; margin: 24px 0; padding: 27px; border: 1px solid #cbbbdc; border-radius: 22px; background: #fff; box-shadow: 0 3px 0 #eee9e3; overflow-wrap: anywhere; }
.membership-review-panel h2 { font-size: 23px; margin-top: 9px; }
.membership-review-status { color: #40364d; }
.membership-review-status:empty { display: none; }
.membership-setup-link { margin: 2px 0 15px; max-width: 100%; }
.membership-setup-link[aria-disabled="true"] { pointer-events: none; color: #6c6275; background: #eeeaf1; border-color: #b7acbe; box-shadow: none; }
.membership-consent { display: flex; align-items: flex-start; gap: 13px; min-height: 48px; padding: 13px 15px; margin: 8px 0 19px; border: 1px solid #cbbbdc; border-radius: 13px; background: #f5f0fc; color: #40364d; font-size: 14px; line-height: 1.7; cursor: pointer; }
.membership-consent:has(input[hidden]) { display: none; }
.membership-consent input { flex: 0 0 24px; width: 24px; height: 24px; margin: 0; accent-color: #60439e; cursor: pointer; }
.membership-consent input:focus-visible { outline: 3px solid #916219; outline-offset: 4px; }
.membership-consent input:disabled { cursor: default; }
.membership-consent span { flex: 1; min-width: 0; }
.membership-panel-actions { display: flex; flex-wrap: wrap; gap: 12px; align-items: stretch; }
.membership-panel-actions .button { max-width: 100%; }
.membership-review-panel .membership-close-note { margin: 17px 0 0; }
.order-row > div:first-child { min-width: 0; overflow-wrap: anywhere; }
.order-actions { max-width: 100%; }
.order-actions .button { overflow-wrap: anywhere; }
@media (max-width: 650px) { .membership-review-panel { padding: 23px; } .membership-panel-actions { flex-direction: column; } .membership-setup-link { width: 100%; } .order-actions .button { flex-basis: 145px; } }

.space-illustration { background: #eee8f8; color: #65508f; }
.space-illustration img { display: block; width: 100%; height: 190px; object-fit: contain; margin-bottom: 15px; }
@media (min-width: 1000px) { .collections-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }