.beta-video {border:1px solid var(--color-line);border-radius:var(--radius-md);overflow:hidden;background:var(--color-canvas)}
.beta-video img,.beta-video video {display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:contain}
.beta-video .micro {padding:0 20px 16px}
.beta-faq {padding-block:72px}.beta-faq h2 {font-family:var(--font-marketing-display);font-weight:700;margin-bottom:28px}.beta-faq details {border-bottom:1px solid var(--color-line);padding:20px 0}.beta-faq summary {cursor:pointer;font-size:1.125rem}.beta-faq p {color:var(--color-muted);line-height:1.7;max-width:700px}
.beta-last {text-align:center}.beta-last p {color:var(--color-muted);margin:24px 0}.beta-onboarding {display:grid;grid-template-columns:1fr 1fr;gap:80px;padding-block:64px;align-items:start}.beta-onboarding h1 {font-family:var(--font-marketing-display);font-size:clamp(2.75rem,5vw,4.5rem);line-height:1.06;margin:20px 0}.beta-onboarding p {line-height:1.7;color:var(--color-muted)}.beta-panel {border:1px solid var(--color-line);border-radius:var(--radius-md);padding:32px;background:var(--color-bg)}.beta-panel h2 {font-size:1.75rem;letter-spacing:-.04em}.beta-panel label {display:block;margin:24px 0 8px}.beta-panel input {width:100%;box-sizing:border-box;padding:14px;border:1px solid var(--color-line-strong);border-radius:var(--radius-control);font:inherit}.beta-panel .button {margin-top:24px;width:100%}.beta-panel button:disabled {opacity:.55;cursor:not-allowed}.beta-onboard-art {width:220px;border-radius:var(--radius-sm);margin-top:32px}.beta-welcome-image {border-radius:var(--radius-sm);margin-bottom:24px}.beta-centered {grid-column:1/-1;max-width:600px;margin:auto;text-align:center}.beta-back {display:block;margin-top:24px}.beta-panel:focus-within {border-color:var(--color-focus)}
@media(max-width:750px){.beta-onboarding{grid-template-columns:1fr;gap:28px;padding-block:32px}.beta-onboard-art{display:none}.beta-panel{padding:24px}.beta-faq{padding-block:48px}.beta-onboarding h1{font-size:2.75rem}}

.beta-pricing {padding-block:64px}.pricing-intro {text-align:center;max-width:720px;margin:0 auto 48px}.pricing-intro h1 {font-family:var(--font-marketing-display);font-size:clamp(3rem,6vw,5rem);line-height:1.05;margin:20px 0}.pricing-intro>p,.pricing-context p {color:var(--color-muted);line-height:1.7}.pricing-layout{display:grid;grid-template-columns:1.1fr 1fr;gap:80px;max-width:960px;margin:auto;align-items:center}.plan-panel{background:var(--color-surface);border-color:var(--color-ink)}.plan-features{padding-left:20px;line-height:2}.plan-features small{display:block;color:var(--color-muted)}.billing-choice{border:0;padding:0;margin:0}.billing-choice legend{font-weight:500}.billing-choice label{padding:16px;border:1px solid var(--color-line);border-radius:var(--radius-sm);display:flex;align-items:center;gap:10px;flex-wrap:wrap;cursor:pointer}.billing-choice label:has(input:checked){border-color:var(--color-focus);background:var(--color-info-surface)}.billing-choice input{width:auto}.billing-choice strong{margin-left:auto}.billing-choice small{display:block;width:100%;padding-left:24px;color:var(--color-muted)}.pricing-context h2{font-size:2rem}.pricing-context a{display:inline-block;margin:8px 0}.header nav{flex-wrap:wrap}.footer{flex-wrap:wrap;gap:20px}
@media(max-width:750px){.pricing-layout{grid-template-columns:1fr;gap:32px}.beta-pricing{padding-block:32px}.pricing-intro{text-align:left}.pricing-context{padding:0 8px}.header nav{gap:12px}.header nav>a{font-size:.875rem}}

/* Editorial FAQ: numbered questions, blue expansion cues, native keyboard controls. */
.beta-last h2 {max-width:850px;margin-inline:auto;text-wrap:balance}
@media(max-width:750px){
}

.beta-faq summary {display:flex;align-items:center;gap:16px;list-style:none}
.beta-faq summary::-webkit-details-marker {display:none}
.faq-chevron {margin-left:auto;flex:0 0 24px;color:var(--color-focus)}
.faq-chevron .chevron-up {display:none}
details[open] .faq-chevron .chevron-down {display:none}
details[open] .faq-chevron .chevron-up {display:initial}

/* Pricing: a focused billing card beside the included tools. */
.beta-pricing {padding-inline:clamp(24px,5vw,72px);box-sizing:border-box}
.pricing-layout {grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(40px,6vw,88px);align-items:start}
.pricing-features {padding-block:24px}
.pricing-features h2 {font-size:2rem;letter-spacing:-.04em;margin:0 0 28px}
.pricing-features .plan-features {list-style:none;padding:0;margin:0;font-size:1.125rem;line-height:1.5}
.pricing-features li {padding:18px 0;border-bottom:1px solid var(--color-line)}
.pricing-features li:first-child {padding-top:0}
.pricing-features small {font-size:.8125rem;margin-top:8px}
.pricing-explainer {max-width:960px;margin:72px auto 0;padding-top:48px;border-top:1px solid var(--color-line)}
.pricing-explainer h2 {margin:0 0 20px}
.pricing-explainer p {max-width:720px}
@media(max-width:750px){
 .pricing-layout {grid-template-columns:1fr;gap:32px}
 .pricing-features {padding-block:0}
 .pricing-explainer {margin-top:48px;padding-top:32px;padding-inline:0}
}

.pricing-features h3 {display:flex;align-items:flex-start;gap:12px;font-size:1.125rem;font-weight:600;line-height:1.5;margin:0;letter-spacing:-.02em}
.feature-check {flex:0 0 24px;margin-top:1.5px;color:var(--color-focus)}
.pricing-features li p {margin:8px 0 0 36px;font-size:.9375rem;line-height:1.65;color:var(--color-muted)}

/* Keep legal links consistent with the contact link on beta pages. */

.pricing-account-layout {display:block;max-width:560px}
.existing-account {margin-top:12px;text-align:center}
.payment-next {text-align:center;margin:12px 0 0}
.features-jump {display:block;text-align:center;margin-top:20px;font-size:.9375rem}
.pricing-features-below {max-width:960px;margin:80px auto 0;padding-top:48px;border-top:1px solid var(--color-line);scroll-margin-top:40px}
.pricing-features-below .plan-features {display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:48px}
.pricing-features-below li:first-child {padding-top:18px}
@media(max-width:750px){.pricing-features-below{margin-top:48px}.pricing-features-below .plan-features{grid-template-columns:1fr}}

.billing-description {font-size:.9375rem;line-height:1.5;color:var(--color-muted);margin:10px 0 0}
.account-card-note {font-size:.6875rem;line-height:1.6;color:var(--color-muted);margin:20px 0 0;text-align:center}
.account-card-note a {font-size:inherit;white-space:nowrap}
.pricing-account-layout {max-width:720px}
@media(min-width:751px){.account-card-note {white-space:nowrap}}

/* Art Deco Card border adapted from Mubanga's CodePen:
   https://codepen.io/mubangadv/pen/MYgEPez — decorative, no interaction. */
.plan-panel {position:relative;border:1px solid var(--color-ink);border-radius:0}
.plan-panel:focus-within {border-color:var(--color-ink)}
.deco-corner {position:absolute;width:.5rem;height:.5rem;border:1px solid var(--color-ink);pointer-events:none;box-sizing:border-box}
.deco-corner::before,.deco-corner::after {content:"";position:absolute;box-sizing:border-box}
.deco-corner::after {width:2rem;height:1rem}
.deco-corner::before {width:1rem;height:2rem}
.deco-corner.left {left:-.5rem}
.deco-corner.right {right:-.5rem}
.deco-corner.top {top:-.5rem}
.deco-corner.bottom {bottom:-.5rem}
.deco-corner.left::after {left:calc(1rem - 2px);border-left:1px solid var(--color-ink)}
.deco-corner.left::before {left:-1px;border-left:1px solid var(--color-ink)}
.deco-corner.right::after {right:calc(1rem - 2px);border-right:1px solid var(--color-ink)}
.deco-corner.right::before {right:-1px;border-right:1px solid var(--color-ink)}
.deco-corner.top::after {top:-1px;border-top:1px solid var(--color-ink)}
.deco-corner.top::before {top:calc(1rem - 2px);border-top:1px solid var(--color-ink)}
.deco-corner.bottom::after {bottom:-1px;border-bottom:1px solid var(--color-ink)}
.deco-corner.bottom::before {bottom:calc(1rem - 2px);border-bottom:1px solid var(--color-ink)}
/* Let long footer copy wrap before it can escape the ornamental frame. */
.account-card-note {white-space:normal}

/* Rails follow the site wrap; only the inner account content is narrow. */
.auth-preview {max-width:1240px;padding:56px var(--beta-content-padding-x) 72px;box-sizing:border-box}
.auth-preview > * {max-width:592px;margin-inline:auto;box-sizing:border-box}
.auth-preview > .beta-panel,.auth-preview > .preview-controls {width:100%}
.auth-preview h1 {font-family:var(--font-marketing-display);font-size:clamp(2.5rem,5vw,4rem);line-height:1.1;text-align:center}
.auth-intro {color:var(--color-muted);line-height:1.6;text-align:center;margin:20px 0 40px}
.auth-secondary {display:block;font-size:.875rem;margin-top:20px}
.auth-status {padding:16px;background:var(--color-info-surface);line-height:1.6;font-size:.9375rem;margin-top:24px}
.auth-status.is-error {background:var(--color-danger-surface);color:var(--color-danger)}
.preview-controls {font-size:.8125rem;margin-top:32px;line-height:1.6;color:var(--color-muted)}
.preview-controls summary {cursor:pointer}
.preview-controls label {display:block;margin:16px 0 8px}
.preview-controls select {font:inherit;max-width:100%;padding:10px;color:var(--color-ink);background:var(--color-surface);border:1px solid var(--color-line)}
.auth-preview-links {display:grid;gap:20px}
[hidden] {display:none!important}

/* Shared horizontal content inset for account and checkout surfaces. */
:root {--beta-content-padding-x:30px}
.beta-panel {padding-inline:var(--beta-content-padding-x)}
.checkout-content {padding-inline:var(--beta-content-padding-x);box-sizing:border-box}
.checkout-content > * {min-width:0}
#checkout-state {padding:24px var(--beta-content-padding-x);background:var(--color-canvas);border-radius:var(--radius-sm);margin-top:24px}
#checkout-state h3 {margin:0;line-height:1.4}
#checkout-state p {margin:12px 0 0}
.billing-consent {margin-top:24px}
.billing-consent label {display:flex;align-items:flex-start;gap:12px;margin:0;font-size:.875rem;line-height:1.6;color:var(--color-muted);cursor:pointer}
.billing-consent input {width:18px;height:18px;flex:0 0 18px;margin:3px 0 0;accent-color:var(--color-focus)}
.billing-consent a {color:var(--color-ink)}

.signup-step {margin:0 0 8px;color:var(--color-muted);font-size:10px;font-weight:600;letter-spacing:.09em}
.onboarding-toast {position:fixed;left:50%;bottom:24px;z-index:10;transform:translateX(-50%);width:min(calc(100% - 32px),560px);box-sizing:border-box;margin:0;padding:14px 18px;border:1px solid var(--color-line-strong);border-radius:var(--radius-md);background:var(--color-ink);color:var(--color-on-action-primary);box-shadow:var(--shadow-float);font-size:.9375rem;line-height:1.5}
#onboarding-handoff p {color:var(--color-muted);line-height:1.6}
#onboarding-handoff .button {display:block;box-sizing:border-box;text-align:center;text-decoration:none}

/* Subscription confirmation: one celebratory beat after server-confirmed access. */
.subscription-confirmation {min-height:calc(100vh - 210px);display:grid;place-items:center;padding:72px var(--beta-content-padding-x);box-sizing:border-box;overflow:hidden}
.confirmation-status {width:min(100%,640px);box-sizing:border-box;text-align:center}
.confirmation-card {position:relative;width:min(100%,760px);box-sizing:border-box;padding:clamp(44px,8vw,88px) clamp(28px,7vw,72px);border:1px solid var(--color-line);border-radius:var(--radius-md);background:var(--color-surface);text-align:center;box-shadow:var(--shadow-float);overflow:hidden;isolation:isolate}
.confirmation-card .eyebrow {margin:0;color:var(--color-muted);font-size:.75rem;letter-spacing:.08em}
.confirmation-card h1 {max-width:650px;margin:18px auto 0;font-family:var(--font-marketing-display);font-size:clamp(3rem,5vw,4rem);line-height:.98;white-space:nowrap}
.confirmation-card h1:focus {outline:none}
.confirmation-lede {max-width:520px;margin:24px auto 0;color:var(--color-muted);font-size:clamp(1.05rem,2.4vw,1.35rem);line-height:1.6;text-wrap:balance}
.confirmation-actions {display:grid;justify-items:center;gap:18px;margin-top:36px}
.confirmation-actions .button {min-width:min(100%,320px);box-sizing:border-box;text-align:center;text-decoration:none}
.confirmation-replay {padding:0;border:0;background:transparent;color:var(--color-ink);font:inherit;font-size:.875rem;text-decoration:underline;text-underline-offset:4px;cursor:pointer}
.confirmation-preview-note {margin:24px 0 0;color:var(--color-muted)}
.active-account-page {min-height:calc(100vh - 210px);display:grid;place-items:center;padding:72px var(--beta-content-padding-x);box-sizing:border-box}
.active-account-handoff .active-account-note {margin:24px 0 0;color:var(--color-muted)}
@media(max-width:650px){.subscription-confirmation{padding-block:36px}.confirmation-card{padding-block:52px}.confirmation-card h1{white-space:normal;text-wrap:balance}.confirmation-actions .button{width:100%}}
@media(prefers-reduced-motion:reduce){.confirmation-replay{display:none}}