/* Approved launch plates surround readable HTML. The preview uses the current
   portal's white cards and official mark; the public display figures are solid. */
.pixel { font-family: 'Geist', sans-serif; font-weight: 500; }
.wm .wm-col { animation: none !important; opacity: 1; }
.site-nav a { color: var(--secondary); opacity: 1; }
.reveal, html.js .reveal { opacity: 1; visibility: visible; transform: none; }
.price-band .pill:focus-visible, .price-band a:focus-visible { outline: 2px solid #fff; outline-offset: 3px; }
a, button, select, summary { touch-action: manipulation; }
.launch-hero { padding: 72px 0 0; }
.launch-hero-grid { display: grid; grid-template-columns: 1.1fr 1fr; align-items: center; gap: 40px; }
.launch-hero .display-xl { font-size: clamp(44px, 5vw, 72px); }
.hero-first { white-space: nowrap; }
.launch-hero .hero-copy .lead { max-width: 590px; font-size: 20px; }
.launch-hero .price-line { font-size: 13px; line-height: 1.6; color: var(--secondary); }
.launch-hero .giveaway-line { margin-top: 12px; }
.hero-art { min-width: 0; text-align: center; }
.motion-media { position: relative; overflow: hidden; border-radius: 16px; background: #fff; }
.motion-media img { width: 100%; height: 100%; object-fit: cover; }
.hero-media { aspect-ratio: 1; }
.hero-media picture { display: block; height: 100%; }
.bundle-summary { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); border-block: 1px solid var(--line); margin-top: 48px; }
.bundle-summary a { display: flex; flex-direction: column; justify-content: center; min-height: 98px; text-decoration: none; padding: 16px 24px; }
.bundle-summary a:first-child { padding-left: 0; }
.bundle-summary a + a { border-left: 1px solid var(--line); }
.bundle-summary b { font-size: 24px; font-weight: 600; letter-spacing: -.035em; }
.bundle-summary span { font-size: 14px; color: var(--secondary); }
.bundle-summary a:hover b { text-decoration: underline; text-underline-offset: 4px; }
.bundle-summary .bundle-forever { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-start; gap: 24px; min-height: 98px; padding: 12px 24px; border-top: 1px solid var(--line); border-left: 0; background: var(--accent-wash); }
.bundle-forever b { font-size: 54px; line-height: 1; font-weight: 400; }
.bundle-forever span { color: var(--ink); font-size: 18px; }
.film-section { padding: 56px 0 28px; }
.film-head { display: flex; align-items: end; justify-content: space-between; gap: 24px; margin-bottom: 24px; }
.film-head > p { max-width: 430px; margin: 0 0 4px; color: var(--secondary); font-size: 15px; line-height: 1.5; }
.film-stage { position: relative; }
.film-player { display: block; width: 100%; aspect-ratio: 16 / 9; border: 1px solid var(--line); border-radius: 18px; background: #edf3f6; }
.film-player:focus-visible { outline: 3px solid var(--accent-link); outline-offset: 4px; }
.film-cover { display: none; position: absolute; inset: 0; width: 100%; padding: 0; border: 1px solid var(--line); border-radius: 18px; overflow: hidden; cursor: pointer; background: #edf3f6; }
.film-stage.is-ready .film-cover { display: block; }
.film-cover img { display: block; width: 100%; height: 100%; object-fit: cover; }
.film-play { position: absolute; left: 50%; bottom: 28px; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 12px; min-height: 52px; padding: 0 24px; border-radius: 999px; background: var(--ink); color: #fff; font: 600 16px 'Geist', sans-serif; white-space: nowrap; }
.film-play span { font-size: 13px; }
.film-cover:is(:hover, :focus-visible) .film-play { background: var(--accent-hover); color: var(--ink); }
.film-cover:focus-visible { outline: 3px solid var(--accent-link); outline-offset: 4px; }
.film-next { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-top: 20px; padding: 24px 28px; border: 1px solid var(--line); border-radius: 18px; color: var(--ink); text-decoration: none; background: #f6f9fb; }
.film-next-copy { display: grid; gap: 5px; }
.film-next strong { font-size: clamp(22px, 2.4vw, 30px); letter-spacing: -.04em; }
.film-next-copy > span:last-child { color: var(--secondary); font-size: 15px; line-height: 1.45; }
.film-next-arrow { display: grid; place-items: center; flex: none; width: 58px; height: 58px; border-radius: 50%; background: var(--ink); color: #fff; font-size: 26px; }
.film-next:is(:hover, :focus-visible) { border-color: var(--accent-blue); background: var(--accent-wash); }
.film-next:is(:hover, :focus-visible) .film-next-arrow { background: var(--accent-hover); color: var(--ink); }
.film-next:focus-visible { outline: 3px solid var(--accent-link); outline-offset: 3px; }
.talk-grid { max-width: 1080px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.talk-more { max-width: 1080px; margin-top: 20px; }
.talk-more summary { width: fit-content; min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 15px; font-weight: 500; }
.talk-more summary:is(:hover, :focus-visible) { text-decoration: underline; text-underline-offset: 4px; }
.talk-more .talk-grid { margin-top: 16px; }
.demo-section { padding-top: 72px; }
.demo-section .lead { max-width: 670px; }
.demo-frame { position: relative; padding: 56px 40px 40px; isolation: isolate; border-radius: 24px; margin-top: 32px; }
.portal-atmosphere { position: absolute; inset: 0; z-index: -1; border-radius: inherit; }
.portal-atmosphere img { object-fit: cover; }
.window { background: #fff; box-shadow: 0 24px 64px rgba(26, 50, 80, .12); }
.demo-header { height: auto; min-height: 64px; padding-inline: 24px; gap: 14px; }
.demo-tabs { gap: 0; overflow-x: auto; }
.demo-tab, .demo-home { min-width: 44px; min-height: 44px; height: auto; padding: 12px 8px; opacity: 1; }
.demo-tab img { height: 13px; }
.demo-tab { color: var(--secondary); }
.demo-body { height: auto; overflow: visible; }
.demo-panel { position: static; inset: auto; padding: 32px; height: auto; overflow: visible; opacity: 1; visibility: visible; transform: none; transition: none; }
.demo-panel[hidden] { display: none; }
.demo-body::after, .demo-panel::after { display: none; }
.demo-panel:focus-visible { outline-offset: -4px; }
.demo-mobile-label, .demo-mobile-select { display: none; }
.demo-caption, .demo-cta { background: #fff; padding: 24px; border-radius: 16px; }
.demo-panel .d-title { font-size: clamp(30px, 3.4vw, 44px); }
.demo-panel .d-title-xl { font-size: clamp(30px, 4vw, 52px); }
.demo-panel .d-lead { font-size: 16px; }
.demo-panel .d-small { font-size: 14px; line-height: 1.5; }
.demo-panel .d-pill { margin-top: 8px; }
.demo-panel .d-stats { margin-top: 28px; }
.demo-panel .d-stats b { font-family: 'Geist', sans-serif; font-size: 28px; }
.demo-panel .snapshot { margin-top: 16px; color: var(--secondary); }
.demo-panel .d-row { align-items: start; grid-template-columns: 36px minmax(0, 1fr) auto; padding: 22px 0; }
.demo-panel .d-row .n { color: var(--secondary); font-family: 'Geist', sans-serif; }
.demo-panel .d-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); }
.demo-panel .d-grid-picks { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.demo-panel .d-card { min-height: 130px; padding: 14px; }
.demo-panel .d-foot { flex-wrap: wrap; font-size: 12px; }
.demo-panel .d-foot .act { white-space: nowrap; }
.submission-preview { margin-top: 24px; max-width: 560px; }
.submission-preview .d-input { margin-top: 12px; }
.submission-preview p { margin-top: 8px; }
.signature-kits .d-cover-tile { width: 100%; height: 132px; margin-bottom: 16px; }
.signature-kits .d-box-title { margin-top: 12px; }
.is-frosted .folder { filter: blur(5px); }
.demo-class { border-top: 1px solid var(--line); margin-top: 24px; padding-top: 20px; }
.demo-class .d-box-title { font-size: 26px; margin: 8px 0; }
.demo-class .d-progress { margin: 12px 0; }
.module-preview { list-style: none; padding: 0; margin: 16px 0 12px; }
.module-preview li { display: flex; align-items: center; gap: 12px; border-top: 1px solid var(--line); padding: 12px 0; font-size: 14px; }
.module-preview li .d-small { margin-left: auto; }
.module-preview .d-check { background: #fff; border: 1px solid var(--line-strong); }
.module-preview .d-check::after { display: none; }
.written-preview { margin-top: 24px; }
.feature-proofs .proof-row { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 64px; padding: 64px 0; border-top: 1px solid var(--line); }
.proof-art { min-width: 0; overflow: hidden; border-radius: 16px; }
.proof-art img { width: 100%; }
.proof-copy { min-width: 0; }
.proof-title { font-size: clamp(40px, 4.3vw, 62px); }
.proof-copy .body-s { margin: 20px 0; }
.proof-list { list-style: none; padding: 0; margin: 24px 0; }
.proof-list li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.proof-list b, .proof-list span { display: block; }
.proof-list b { font-size: 18px; font-weight: 600; }
.proof-list span { font-size: 16px; color: var(--secondary); margin-top: 4px; }
.syllabi details { border-block: 1px solid var(--line); }
.syllabi details + details { border-top: 0; }
.syllabi summary { cursor: pointer; padding: 14px 0; font-weight: 600; min-height: 48px; }
.syllabi ol { margin: 0 0 20px; padding-left: 24px; color: var(--secondary); font-size: 15px; }
.syllabi li { margin-top: 8px; }
.currency { font-size: 24px; font-weight: 400; letter-spacing: 0; }
.giveaway-line a { white-space: nowrap; }
@media (max-width: 1100px) {
  .demo-header { flex-wrap: wrap; padding-bottom: 6px; }
  .demo-tabs { flex: 1 1 100%; margin-left: 0; }
  .demo-panel .d-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
  .launch-hero { padding-top: 40px; }
  .launch-hero-grid { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  .launch-hero .display-xl { font-size: 44px; }
  .launch-hero .hero-copy .lead { margin-top: 22px; font-size: 18px; }
  .hero-media { aspect-ratio: auto; height: 250px; }
  .hero-media img { object-position: 50% 50%; }
  .hero-media video { object-position: center; }
  .bundle-summary { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 24px; }
  .bundle-summary a, .bundle-summary a:first-child { padding: 12px 8px; min-height: 74px; }
  .bundle-summary a + a { border-left: 0; }
  .bundle-summary a:nth-child(even) { border-left: 1px solid var(--line); padding-left: 20px; }
  .bundle-summary a:nth-child(n + 3) { border-top: 1px solid var(--line); }
  .bundle-summary a:last-child { grid-column: 1 / -1; }
  .bundle-summary a:nth-child(5) { grid-column: 1 / -1; }
  .bundle-summary .bundle-forever { padding: 14px 16px; min-height: 84px; gap: 14px; }
  .bundle-forever b { font-size: 44px; }
  .bundle-summary .bundle-forever span { font-size: 15px; }
  .bundle-summary b { font-size: 21px; }
  .bundle-summary span { font-size: 13px; }
  .demo-section { padding-top: 48px; }
  .demo-section .display { font-size: 44px; }
  .demo-section .lead { font-size: 17px; }
  .demo-frame { padding: 56px 8px 16px; border-radius: 16px; margin-inline: -8px; }
  .demo-mobile-label { display: block; padding: 16px 16px 6px; font-size: 13px; color: var(--secondary); }
  .demo-mobile-select { display: block; width: calc(100% - 32px); min-height: 44px; margin: 0 16px 16px; border: 1px solid var(--line-strong); border-radius: 12px; padding: 0 12px; background: white; color: var(--ink); font: inherit; font-size: 16px; }
  html:not(.demo-ready) .demo-mobile-label, html:not(.demo-ready) .demo-mobile-select { display: none; }
  .demo-header { display: none; }
  .demo-panel { padding: 24px 16px; }
  .demo-panel .d-cols, .demo-panel .d-split { grid-template-columns: minmax(0, 1fr); }
  .demo-panel .d-grid, .demo-panel .d-grid-picks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-panel .d-doors { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .demo-panel .d-doors > :nth-child(n + 3) { display: block; }
  .demo-panel .d-doors > :last-child { grid-column: 1 / -1; }
  .demo-panel .d-doors .d-small { font-size: 13px; }
  .demo-panel .d-feature { flex-direction: column; align-items: stretch; }
  .demo-panel .d-cover-tile { width: 100%; }
  .demo-panel .d-box { padding: 16px; }
  .demo-panel .d-streak { display: flex; }
  .demo-panel .d-day { padding: 8px 3px; flex-direction: column; }
  .demo-panel .d-week { grid-template-columns: repeat(7, minmax(0, 1fr)); }
  .demo-panel .d-selects { display: flex; flex-wrap: wrap; }
  .demo-panel .d-row { grid-template-columns: 26px minmax(0, 1fr); gap: 10px; }
  .demo-panel .guide-action { grid-column: 2; }
  .demo-panel .d-box-title { font-size: 19px; }
  .demo-panel .d-stats { gap: 0; }
  .demo-panel .d-stats b { font-size: 23px; }
.demo-panel .d-stats span { font-size: 12px; }
  .feature-proofs .proof-row { grid-template-columns: minmax(0, 1fr); gap: 28px; padding: 40px 0; }
  .proof-title { font-size: 42px; }
  .currency { font-size: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Owner-approved 5 October colour seam. Geometry and status colours stay put. */
:root {
  --accent-blue: #277ca9;
  --accent-lilac: #8773ac;
  --accent-peach: #bc805d;
  --accent-ink: linear-gradient(110deg, var(--accent-blue), var(--accent-lilac) 52%, var(--accent-peach));
  --accent-wash: linear-gradient(110deg, #d5ebf6, #e6def3 52%, #f9e9d8);
  --accent-hover: linear-gradient(110deg, #aad5ee, #d5c9ea 52%, #f1d6b7);
  --accent-on-hover: #0b0b0b;
}

/* The real portal folder replaces the generated unlock clip. */
.hero-folder-link { display: block; color: var(--ink); text-decoration: none; border-radius: 24px; }
.hero-folder-stage { display: grid; place-items: center; min-height: 400px; position: relative; isolation: isolate; }
.hero-folder-stage::before { content: ''; position: absolute; inset: 12% 2%; z-index: -1; border-radius: 50%; mask-image: radial-gradient(ellipse, #000 30%, transparent 72%); background: radial-gradient(ellipse at 25% 35%, #d5ebf680, transparent 65%), radial-gradient(ellipse at 75% 65%, #e6def380, transparent 65%), radial-gradient(ellipse at 65% 80%, #f9e9d880, transparent 65%); }
.hero-folder-stage .folder { --s: .94; transition: transform 220ms var(--ease); }
.hero-folder-link:is(:hover, :focus-visible) .folder { transform: translateY(-5px); }
.hero-folder-caption { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; font-size: 14px; color: var(--secondary); }
.hero-folder-link:is(:hover, :focus-visible) .hero-folder-caption { color: var(--ink); text-decoration: underline; text-underline-offset: 5px; }
.display .accent-phrase, .demo-panel .d-title-xl .soft { background: var(--accent-ink); background-clip: text; -webkit-background-clip: text; color: transparent; }
.d-ghost { display: none; opacity: .22; }
.pill:is(:hover, :focus-visible), :is(a, button).d-pill:is(:hover, :focus-visible) { background: var(--accent-hover); color: var(--accent-on-hover); }
.site-nav a:is(:hover, :focus-visible), .foot-nav a:is(:hover, :focus-visible), .link-more:is(:hover, :focus-visible) { background: var(--accent-ink) left bottom / 100% 2px no-repeat; text-decoration-color: transparent; }
/* The last sales section feels like the same world as the preview artwork. */
.price-band { --band-text: var(--ink); --band-muted: var(--secondary); --band-line: var(--line); --band-card: #fff; background: var(--accent-wash); }
.price-card { border-color: var(--line); }
.price-band .pill-light { background: var(--ink); color: #fff; }
.price-band .pill-light:is(:hover, :focus-visible) { background: var(--accent-hover); color: var(--ink); }
.price-band .pill:focus-visible, .price-band a:focus-visible { outline-color: var(--ink); }
@media (min-width: 1024px) { .d-ghost { display: block; } }
@media (max-width: 640px) {
  .film-section { padding: 40px 0 12px; }
  .film-head { display: block; margin-bottom: 18px; }
  .film-head > p { margin-top: 12px; }
  .film-player { border-radius: 12px; }
  .film-cover { border-radius: 12px; }
  .film-play { bottom: 14px; min-height: 44px; padding: 0 18px; font-size: 14px; }
  .film-next { padding: 18px; gap: 12px; }
  .film-next-copy > span:last-child { font-size: 13px; }
  .film-next-arrow { width: 44px; height: 44px; font-size: 21px; }
  .talk-grid { grid-template-columns: minmax(0, 1fr); }
  .hero-folder-stage { min-height: 236px; }
  .hero-folder-stage .folder { --s: .64; }
  .hero-folder-caption { font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-folder-stage .folder { transition: none; }
  .hero-folder-link:is(:hover, :focus-visible) .folder { transform: none; }
}
@keyframes hero-paper-rise { to { translate: 0 calc(-58px * var(--s)); } }
@keyframes hero-paper-rise-back { to { translate: 0 calc(-34px * var(--s)); } }
@media (prefers-reduced-motion: no-preference) {
  .hero-folder-stage { view-timeline-name: --hero-folder-scroll; view-timeline-axis: block; }
  .hero-folder-stage .folder.is-open .folder-sheet { animation: hero-paper-rise linear both; animation-timeline: --hero-folder-scroll; animation-range: cover 45% cover 90%; }
  .hero-folder-stage .folder.is-open .folder-sheet-2 { animation: hero-paper-rise-back linear both; animation-timeline: --hero-folder-scroll; animation-range: cover 45% cover 90%; }
  .film-next-arrow { transition: transform 220ms ease, background 220ms ease; }
  .film-next:is(:hover, :focus-visible) .film-next-arrow { transform: translate(3px, -3px); }
}
@media (forced-colors: active) {
  .display .accent-phrase, .demo-panel .d-title-xl .soft { background: none; color: CanvasText; }
}

.price-band .dm-line a { text-decoration-color: currentColor; }

/* A clearer path from a first look to the room and checkout. */
:root { --accent-link: #246383; --accent-sage: #c7dfd3; --accent-rose: #ebc7c4; }
#demo { scroll-margin-top: 16px; }
.demo-frame { padding-top: 32px; }
a.d-door { color: inherit; text-decoration: none; }
a.d-door:is(:hover, :focus-visible) { border-color: var(--accent-blue); background: #f7fafc; }
a.d-door:is(:hover, :focus-visible) .d-open { color: var(--accent-link); text-decoration: underline; text-underline-offset: 4px; }
.demo-panel.is-on { animation: panel-arrive 240ms ease-out; }
.monthly-drop { font-size: clamp(22px, 2.2vw, 28px); font-weight: 600; line-height: 1.2; color: var(--accent-link); margin-top: 24px; }
.monthly-drop::before { content: '+'; display: inline-grid; place-items: center; width: 32px; height: 32px; margin-right: 8px; border-radius: 10px; background: var(--accent-wash); font-weight: 400; }
.ticks li::before, .price-list li::before { background-color: var(--accent-sage); }
.ticks-no li::before { background-color: var(--accent-rose); }
/* Quiet section labels replace decorative signal dots; urgency keeps its own colour. */
.demo-panel :is(.d-eyebrow, .d-homedate) { display: inline-flex; background: #edf4f6; color: #49616d; padding: 6px 10px; border-radius: 8px; }
.demo-panel .d-eyebrow::before { display: none; }
.demo-panel .d-row .n, .demo-panel .guide-action { color: var(--accent-link); }
.demo-panel .d-row .n { font-variant-numeric: tabular-nums; font-size: 24px; line-height: 1; }
.demo-panel .d-stats b { font-weight: 500; }
.room-scene { margin: 0; position: relative; min-height: 430px; background: #f3f5f6; }
.room-scene > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.room-messages { position: relative; display: grid; gap: 12px; padding: 28px 24px 108px; }
.room-message { display: flex; align-items: center; gap: 12px; max-width: 360px; padding: 14px 16px; border: 1px solid #fff; border-radius: 16px; background: rgba(255,255,255,.96); box-shadow: 0 8px 26px #3346580c; }
.room-message:nth-child(2) { margin-left: 24px; }
.room-message:nth-child(3) { margin-left: 12px; }
.room-avatar { display: grid; place-items: center; flex: 0 0 34px; height: 34px; border-radius: 50%; background: #dfebf2; color: #246383; font-size: 19px; }
.room-message:nth-child(2) .room-avatar { background: #e9e2f1; color: #70558c; }
.room-message:nth-child(3) .room-avatar { background: #e0ece4; color: #436652; }
.room-message b { font-size: 14px; font-weight: 600; }
.room-message p { font-size: 13px; line-height: 1.4; margin: 4px 0 0; color: var(--secondary); }
.room-scene figcaption { position: absolute; bottom: 14px; left: 20px; right: 20px; font-size: 11px; color: #595959; }
.price-band { padding: 72px 0; }
.price-grid { margin-top: 0; grid-template-columns: minmax(0, 1fr); gap: 28px; }
.price-intro .display-xl { font-size: clamp(44px, 5vw, 68px); }
.price-intro h2 span { display: inline-block; }
.price-intro p { color: var(--secondary); max-width: 450px; font-size: 18px; line-height: 1.5; margin-top: 24px; }
.price-card { padding: 28px; }
.price-card .pixel { font-size: 64px; }
.price-card .pill-light { margin-top: 22px; }
.price-summary { font-size: 14px; line-height: 1.5; margin: 20px 0 14px; }
.price-includes { border-top: 1px solid var(--line); }
.price-includes summary { min-height: 44px; display: list-item; padding-block: 12px; cursor: pointer; font-size: 14px; font-weight: 500; color: var(--accent-link); }
.price-includes .price-list { border: 0; margin: 0 0 16px; padding: 4px 0 0; font-size: 14px; gap: 10px; }
.price-card .dm-line { margin-top: 12px; font-size: 13px; }
@media (min-width: 900px) {
  .price-intro { text-align: center; }
  .price-intro h2 { display: flex; justify-content: center; flex-wrap: wrap; column-gap: .22em; }
  .price-intro h2 br { display: none; }
  .price-intro p { max-width: 760px; margin: 16px auto 0; }
  .price-card { padding: 32px; }
  .price-purchase { display: grid; grid-template-columns: 1fr 1fr; align-items: center; gap: 40px; margin-bottom: 24px; }
  .price-card .pill-light { margin-top: 0; }
  .price-summary { margin: 12px 0 0; text-align: center; }
  .price-includes .price-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 40px; }
}
/* Native, short entrances. Reading order and scrolling always stay under the visitor's control. */
@keyframes panel-arrive { from { opacity: .65; transform: translateY(5px); } to { opacity: 1; transform: none; } }
@keyframes gentle-arrive { from { opacity: .25; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@keyframes quote-arrive { from { opacity: .6; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: no-preference) {
  .quote.is-entered { animation: quote-arrive 420ms ease-out both; }
  .room-scene.is-entered .room-message { animation: gentle-arrive 550ms both; }
  .room-scene.is-entered .room-message:nth-child(2) { animation-delay: 160ms; }
  .room-scene.is-entered .room-message:nth-child(3) { animation-delay: 320ms; }
  .price-intro.is-entered h2 span { animation: gentle-arrive 650ms both; }
  .price-intro.is-entered h2 span + br + span { animation-delay: 100ms; }
  .site-nav a, .foot-nav a, .link-more { transition: background-size 220ms ease, color 220ms ease; background-size: 0% 2px; }
  .site-nav a:is(:hover, :focus-visible), .foot-nav a:is(:hover, :focus-visible), .link-more:is(:hover, :focus-visible) { background-size: 100% 2px; }
}
@media (max-width: 640px) {
  html { scroll-padding-top: 72px; }
  #demo { scroll-margin-top: 8px; }
  .demo-frame { padding-top: 16px; }
  .room-scene { min-height: 400px; }
  .room-messages { padding: 20px 14px 104px; gap: 10px; }
  .room-message { padding: 12px; gap: 10px; }
  .room-message:nth-child(2) { margin-left: 12px; }
  .room-message:nth-child(3) { margin-left: 0; }
  .price-band { padding: 48px 0; }
  .price-grid { grid-template-columns: minmax(0,1fr); gap: 28px; }
  .price-intro p { font-size: 16px; margin-top: 18px; }
  .price-card { padding: 24px; }
  .price-card .pixel { font-size: 56px; }
}
@media (prefers-reduced-motion: reduce) {
  .demo-panel.is-on { animation: none; }
}

a.d-pill { text-decoration: none; }

/* Goal and review examples sit after the frozen calendar week. */
.d-next-move { display: grid; gap: 16px; margin-top: 32px; }
.d-next-move [hidden] { display: none; }
.d-next-move h3 { margin: 0 0 12px; font-size: 20px; }
.d-next-move h4 { margin: 16px 0 8px; font-size: 16px; }
.d-next-move p { margin: 12px 0; }
.d-next-move form, .d-next-focus, .d-next-step { display: grid; gap: 12px; min-width: 0; }
.d-next-move label, .d-next-move legend { font-size: 14px; }
.d-next-move summary { cursor: pointer; min-height: 44px; padding: 12px 0; }
.d-next-move textarea { resize: vertical; min-height: 100px; }
.d-next-move button:disabled { opacity: .55; cursor: not-allowed; }
.d-next-move .d-input { box-sizing: border-box; }
.d-next-focus { border: 1px solid var(--line); border-radius: 12px; margin: 16px 0; padding: 16px; }
.d-next-step { border-top: 1px solid var(--line); padding-top: 12px; }
.d-next-fields { display: grid; grid-template-columns: repeat(2,minmax(0,1fr)); gap: 12px; }
.d-next-fields label { display: grid; gap: 8px; }
.d-next-check { display: flex; align-items: center; gap: 12px; min-height: 44px; overflow-wrap: anywhere; }
.d-next-checklist { list-style: none; margin: 12px 0; padding: 0; }
.d-next-checklist li { border-top: 1px solid var(--line); padding: 8px 0; overflow-wrap: anywhere; }
.d-next-checklist small { display: block; color: var(--secondary); }
.d-review-counts { display: flex; flex-wrap: wrap; gap: 24px; font-size: 14px; }
.d-example-work { margin-top: 16px; }
#demo-suggestions > button { display: block; text-align: left; }
.submission-preview form { display: grid; gap: 12px; margin-top: 16px; }
.submission-preview input { box-sizing: border-box; width: 100%; }
.submission-preview button { cursor: pointer; font-family: inherit; min-height: 44px; }
@media(max-width:640px) { .d-next-fields { grid-template-columns: minmax(0,1fr); } }

/* Your Day mirrors the member planner using disposable example data. */
#dp-1 .d-headrow { flex-wrap: wrap; }
#dp-1 .d-box { min-width: 0; }
#dp-1 .d-box-title { margin: 12px 0; }
.d-demo-note { margin-top: 16px; color: var(--secondary); }
#dp-1 .d-input { width: 100%; min-width: 0; font-family: inherit; color: var(--ink); background: #fff; }
#dp-1 input::placeholder { color: var(--secondary); opacity: 1; }
#dp-1 button.d-pill, .d-brief-calendar button.d-pill { border: 0; }
#dp-1 button, .d-brief-calendar button { cursor: pointer; font-family: inherit; min-height: 44px; }
.d-text-button { border: 0; background: transparent; color: var(--secondary); font-size: 14px; padding: 10px 8px; }
.d-text-button:hover { text-decoration: underline; }
.d-task-list { list-style: none; padding: 0; margin: 16px 0; }
.d-task { border-top: 1px solid var(--line); padding: 8px 0; font-size: 14px; }
.d-task-label { display: flex; align-items: center; gap: 10px; min-height: 44px; overflow-wrap: anywhere; }
#dp-1 input[type="checkbox"] { flex: none; width: 18px; height: 18px; accent-color: var(--ink); }
.d-task-actions { display: flex; align-items: center; gap: 8px; }
.d-task-actions { flex-wrap: wrap; }
.d-task-actions select { flex: 1 1 100px; }
.d-task-label > span { min-width: 0; }
.d-task-time { font-variant-numeric: tabular-nums; color: var(--secondary); }
.d-task-actions select { min-width: 0; max-width: 100%; min-height: 44px; padding: 4px 8px; border: 1px solid var(--line-strong); border-radius: 8px; font: inherit; color: var(--secondary); background: #fff; }
.d-task-actions button { min-width: 44px; }
.d-task.is-done .d-task-label span { text-decoration: line-through; color: var(--secondary); }
#dp-1 .d-habit { min-height: 48px; cursor: pointer; }
.d-win-add summary, .d-brief-calendar summary { min-height: 44px; padding: 12px 0; cursor: pointer; font-size: 14px; }
.d-win { padding: 10px 0; border-top: 1px solid var(--line); overflow-wrap: anywhere; font-size: 14px; }
.d-win small { display: block; margin-top: 4px; }
#dp-1 .d-week { list-style: none; padding: 0 0 8px; overflow-x: auto; overscroll-behavior-x: contain; grid-template-columns: repeat(7, minmax(0, 1fr)); }
#dp-1 .d-day { display: block; padding: 14px; min-height: 160px; }
.d-day-heading { display: flex; gap: 6px; align-items: baseline; flex-wrap: wrap; font-size: 13px; font-weight: 500; margin-bottom: 12px; }
#dp-1 .d-day b { font-size: 22px; }
#dp-1 .d-day .d-small { font-size: 13px; }
#dp-1 .d-day .d-task-list { margin: 0; }
.d-calendar-sheet { width: min(560px, calc(100% - 32px)); max-height: calc(100dvh - 32px); margin: auto; padding: 0; border: 1px solid var(--line); border-radius: 16px; background: #fff; color: var(--ink); overflow: auto; }
.d-calendar-sheet::backdrop { background: rgba(11,11,11,.4); }
.d-sheet-panel { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; }
.d-sheet-panel h2 { margin: 0; font-size: 26px; letter-spacing: -.025em; }
.d-sheet-panel p, .d-calendar-notes { font-size: 15px; line-height: 1.5; color: var(--secondary); }
.d-sheet-panel p { margin: 0; }
.d-sheet-panel .d-eyebrow { margin: 0; }
.d-sheet-panel .d-demo-note { margin: 0; }
.d-sheet-panel .d-pill { min-height: 44px; }
.d-sheet-panel > div { width: 100%; }
.d-calendar-head { display: flex; align-items: center; justify-content: flex-end; gap: 12px; }
.d-calendar-head .d-text-button { min-height: 44px; }
.d-sheet-panel :is(input, select) { box-sizing: border-box; width: 100%; min-width: 0; min-height: 44px; padding: 10px 12px; background: var(--blank); color: var(--ink); border: 1px solid var(--line-strong); border-radius: 12px; font: inherit; font-size: 15px; }
.d-sheet-panel label { display: block; font-size: 14px; color: var(--ink); }
.d-sheet-panel select { margin: 6px 0 12px; }
.d-sheet-panel button { cursor: pointer; font-family: inherit; min-height: 44px; }
.d-calendar-options { margin: 12px 0; }
.d-calendar-options label { display: flex; align-items: center; gap: 10px; min-height: 44px; }
.d-calendar-options input[type="checkbox"] { width: 18px; min-height: 18px; height: 18px; accent-color: var(--ink); }
.d-calendar-instructions { margin: 12px 0; }
.d-calendar-instructions summary, .d-completed summary { min-height: 44px; padding: 12px 0; box-sizing: border-box; cursor: pointer; font-size: 14px; }
.d-calendar-instructions p + p { margin-top: 12px; }
.d-task-undo { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin: 16px 0; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; font-size: 14px; overflow-wrap: anywhere; }
.d-task-undo[hidden], .d-completed[hidden] { display: none; }
.d-task-plan-form { display: flex; flex-direction: column; gap: 12px; width: 100%; }
.d-task-plan-form label { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.d-task-plan-form .d-input { margin: 0; }
.d-task-plan-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.d-week-range { margin: 12px 0; font-variant-numeric: tabular-nums; }
.d-week-controls { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-bottom: 12px; }
.d-week-controls label { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; font-size: 14px; }
.d-week-controls .d-input { margin: 0; width: 170px; color: var(--ink); background: var(--blank); }
.d-week-deadline { display: flex; flex-direction: column; gap: 4px; min-height: 44px; margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--line); color: var(--ink); text-decoration: none; overflow-wrap: anywhere; font-size: 14px; }
.d-week-deadline:hover, .d-week-deadline:focus-visible { text-decoration: underline; }
.d-calendar-notes { padding-left: 20px; margin: 16px 0; }
.d-calendar-notes li + li { margin-top: 8px; }
.d-brief-calendar { margin-top: 24px; max-width: 560px; }
[data-recording="on"] #demo-calendar-link { filter: blur(9px); user-select: none; }
@media (max-width: 1023px) {
  #dp-1 .d-cols { grid-template-columns: minmax(0, 1fr); }
  #dp-1 .d-week { grid-template-columns: repeat(7, minmax(230px, 1fr)); }
}
@media (max-width: 640px) { .d-sheet-panel { padding: 20px; } .d-task-plan-fields { grid-template-columns: minmax(0, 1fr); } }

/* Match the member portal's existing outer section border, with plain contents. */
:is(.demo-panel .d-box, .demo-panel .d-card, .d-calendar-sheet):not(:is(.d-box, .d-card, .d-calendar-sheet) *) {
  border-color: transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--accent-ink) border-box;
}
@media (forced-colors: active) {
  :is(.demo-panel .d-box, .demo-panel .d-card, .d-calendar-sheet):not(:is(.d-box, .d-card, .d-calendar-sheet) *) { border-color: CanvasText; background: Canvas; }
}