/* The family homepage has its own editorial palette; product and gaming pages
   keep their existing Tailwind theme. No external fonts or animation library. */
:root { color-scheme: light; --paper: #faf7f0; --ink: #243e3b; --teal: #174d48; --muted: #5f6c67; --apricot: #efb38d; --line: #dfdfd3; --ease: cubic-bezier(.2,.75,.25,1); }
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 110px; }
body { margin: 0; background: var(--paper); color: var(--ink); font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Arial, sans-serif; font-size: 16px; line-height: 1.65; -webkit-font-smoothing: antialiased; }
::selection { background: #f0c3a4; color: #173d39; }
a { color: inherit; text-decoration: none; }
button { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
button { cursor: pointer; }
button:disabled { cursor: default; }
button[hidden], [hidden] { display: none !important; }
img { max-width: 100%; display: block; }
h1, h2, h3, p, figure { margin: 0; }
h1, h2, h3 { line-height: 1.12; letter-spacing: -.045em; font-weight: 600; }
h1 em, h2 em { font-family: Georgia, "Times New Roman", serif; font-weight: 400; letter-spacing: -.055em; color: var(--teal); }
:focus-visible { outline: 3px solid #247782; outline-offset: 5px; }
.section-wrap { width: min(1248px, calc(100% - 112px)); margin-inline: auto; }
.icon-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.65; stroke-linecap: round; stroke-linejoin: round; }
.skip-link { position: fixed; top: 10px; left: 16px; transform: translateY(-150%); background: white; padding: 12px 20px; border-radius: 8px; z-index: 100; }
.skip-link:focus { transform: none; }
.button { display: inline-flex; align-items: center; justify-content: center; gap: 25px; min-height: 57px; padding: 15px 24px; border: 1px solid transparent; border-radius: 8px; background: var(--teal); color: white; font-size: 15px; font-weight: 600; line-height: 1.3; transition: background .2s, transform .2s; }
.button:hover { background: #236159; transform: translateY(-2px); }
.button:disabled { background: #d9e8da; color: #244f42; transform: none; }
.button-small { min-height: 47px; padding: 12px 19px; gap: 18px; }
.button .icon { width: 20px; height: 20px; }
.text-link { display: inline-flex; gap: 13px; align-items: center; font-size: 15px; font-weight: 600; text-decoration: underline; text-decoration-color: #b5c2b5; text-underline-offset: 5px; }
.text-link:hover { color: #367d7b; }
.text-link span { font-size: 22px; font-weight: 400; text-decoration: none; }
.eyebrow { font-size: 11px; font-weight: 650; letter-spacing: 1.7px; text-transform: uppercase; display: flex; align-items: center; gap: 10px; }
.tiny-sun { font-size: 25px; color: #b9683d; line-height: 1; }
.hero { display: grid; grid-template-columns: 1.06fr 1fr; align-items: center; gap: 45px; padding-block: 86px 104px; }
.hero h1 { font-size: clamp(43px,4.55vw,66px); line-height: 1.11; margin: 27px 0 26px; letter-spacing: -.055em; }
.hero-description { font-size: 17px; max-width: 445px; color: var(--muted); line-height: 1.85; }
.hero-actions { display: flex; align-items: center; gap: 26px; margin-top: 31px; }
.hero-reassurance { margin-top: 23px; font-size: 12px; color: #626e66; }
.hero-art { position: relative; min-width: 0; padding-bottom: 35px; }
.hero-image-wrap { border-radius: 140px 24px 24px 24px; overflow: hidden; background: #e4d5b8; }
.hero-image { width: 100%; height: 516px; object-fit: cover; object-position: 51% 50%; }
.hero-note { position: absolute; top: 16px; left: -26px; background: #fffdf8; border-radius: 7px; box-shadow: 0 5px 25px #183c3412; padding: 13px 17px; display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; transform: rotate(-5deg); }
.note-dot { width: 8px; height: 8px; border-radius: 50%; background: #5c927a; }
.day-card { position: absolute; bottom: 0; left: -39px; right: 20px; padding: 23px 24px 25px; background: #fffefa; border: 1px solid #efeee5; border-radius: 12px; box-shadow: 0 12px 40px #2a423b12; }
.day-card-heading { display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; }
.example-tag { font-size: 9px; color: #69756b; font-weight: 400; }
.day-track { padding: 0; margin: 23px 0 0; list-style: none; display: grid; grid-template-columns: repeat(4,1fr); gap: 7px; }
.day-part { font-size: 11px; display: flex; flex-direction: column; align-items: center; gap: 7px; }
.day-part .icon { width: 21px; height: 21px; }
.day-line { width: 100%; height: 9px; border-radius: 3px; background: #d7e6ea; margin-top: 4px; }
.screen .day-line { background: #edb68d; }.outside .day-line { background: #bccfba; }.together .day-line { background: #ddc5c2; }
.intro-band { border-block: 1px solid var(--line); padding-block: 34px; display: grid; grid-template-columns: 1fr 1fr; gap: 55px; }
.intro-band > p { font-size: 23px; line-height: 1.4; letter-spacing: -.5px; }
.intro-band strong { font-weight: 550; color: #4f7971; }
.intro-detail { display: flex; gap: 40px; align-items: center; justify-content: space-between; }
.intro-detail p { max-width: 390px; font-size: 14px; color: var(--muted); line-height: 1.8; }
.down-link { width: 43px; height: 43px; border: 1px solid #b7c6b9; border-radius: 50%; flex: 0 0 auto; display: grid; place-items: center; font-size: 23px; }
.story-section { display: grid; grid-template-columns: 1fr 1fr; gap: 100px; align-items: center; padding-block: 115px; }
.story-copy { max-width: 450px; }
.chapter { display: flex; align-items: center; gap: 13px; font-size: 11px; font-weight: 600; letter-spacing: 1.1px; text-transform: uppercase; margin-bottom: 23px; }
.chapter > span { display: grid; place-items: center; width: 29px; height: 29px; border: 1px solid #c4cdbd; border-radius: 50%; font-size: 10px; letter-spacing: 0; }
.story-copy h2 { font-size: clamp(36px,3.65vw,51px); margin-bottom: 27px; }
.story-copy > p:not(.chapter):not(.benefit-takeaway):not(.product-note) { font-size: 16px; line-height: 1.85; color: var(--muted); margin-bottom: 17px; }
.story-copy .benefit-takeaway { position: relative; font-size: 16px; line-height: 1.65; font-weight: 600; padding-left: 29px; margin-top: 28px; color: var(--teal); }
.benefit-takeaway > span { position: absolute; left: 0; top: -5px; font-size: 26px; color: #b77245; font-weight: 400; }
.story-copy .product-note { font-size: 12px; line-height: 1.75; color: #687266; margin-top: 22px; max-width: 370px; }
.scene { position: relative; padding: 38px; border-radius: 24px; min-width: 0; }
.scene figcaption { font-size: 11px; line-height: 1.6; color: #626f64; text-align: center; margin-top: 24px; padding-inline: 8px; }
.management-scene { background: #e7eee4; padding-top: 77px; }
.ui-panel { background: #fffefa; border: 1px solid #eceee4; border-radius: 13px; box-shadow: 0 13px 32px #24483b0c; }
.panel-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 17px 21px; border-bottom: 1px solid #edf0e9; }
.panel-brand { display: flex; align-items: center; gap: 9px; font-size: 12px; font-weight: 600; }
.sample-pill { display: inline-block; border: 1px solid #d9dfd5; border-radius: 4px; padding: 2px 6px; font-size: 9px; letter-spacing: .3px; color: #617063; }
.overview-title { display: flex; align-items: center; gap: 11px; padding: 24px 22px 18px; }
.avatar { width: 38px; height: 38px; display: grid; place-items: center; background: #eadfc9; border-radius: 50%; font-family: Georgia,serif; font-size: 20px; }
.overview-title h3 { font-size: 17px; letter-spacing: -.4px; }.overview-title p { font-size: 11px; color: var(--muted); margin-top: 3px; }
.overview-title > .icon { margin-left: auto; color: #bb8750; }
.overview-limit { display: flex; align-items: center; justify-content: space-between; gap: 14px; margin: 0 22px 15px; padding: 17px 15px; background: #f1f4ed; border-radius: 7px; font-size: 11px; }
.overview-limit > strong { font-size: 28px; font-weight: 500; line-height: 1; white-space: nowrap; letter-spacing: -1px; }.overview-limit strong span { font-size: 14px; margin-left: 2px; letter-spacing: 0; }
.overview-row { display: flex; gap: 10px; align-items: center; padding: 14px 22px; border-bottom: 1px solid #edf0e9; font-size: 10px; }
.overview-row strong { display: block; font-size: 12px; font-weight: 600; }.overview-row div > span { display: block; color: var(--muted); margin-top: 2px; }.overview-row time { margin-left: auto; white-space: nowrap; }
.icon-tile { width: 32px; height: 35px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 7px; }.icon-tile .icon { width: 18px; height: 18px; }.blue { background: #e2edef; }.apricot { background: #f6e4d2; }
.overview-footer { padding: 15px 20px; display: flex; align-items: center; justify-content: center; gap: 6px; font-size: 11px; color: #42715d; }.overview-footer .icon { width: 16px; height: 16px; }
.reminder { position: absolute; font-family: Georgia,serif; font-style: italic; font-size: 14px; padding: 9px 12px; background: #f8f4de; border: 1px solid #e2e0ca; border-radius: 3px; z-index: 1; }
.reminder-one { left: 18px; top: 18px; transform: rotate(-6deg); opacity: .75; }.reminder-two { top: 32px; right: 18px; transform: rotate(5deg); opacity: .75; }
.reverse .story-copy { grid-column: 2; grid-row: 1; padding-left: 20px; max-width: 470px; }.reverse > figure { grid-column: 1; grid-row: 1; }
.bonus-section { background: #f1ecdf; }.bonus-section .story-section { padding-block: 96px; }
.bonus-scene { background: transparent; padding: 8px 24px 0; }
.agreement-note { position: relative; background: #fff9e9; width: 265px; margin-left: 0; padding: 24px 26px; transform: rotate(-5deg); box-shadow: 0 6px 18px #4b453c0a; border: 1px solid #e4dcca; }
.agreement-note > .icon { display: block; margin-bottom: 12px; color: #8b6d48; }.agreement-note > span:not(.note-tape) { display: block; font-size: 10px; letter-spacing: .5px; color: #716755; }
.agreement-note strong { display: block; font-family: Georgia,serif; font-size: 23px; font-weight: 400; line-height: 1.3; margin-block: 7px 15px; }.agreement-note small { font-size: 10px; color: #716755; }
.note-tape { position: absolute; height: 23px; width: 85px; top: -12px; left: calc(50% - 42px); background: #ddcdb1b3; transform: rotate(4deg); }
.connection-arrow { position: absolute; top: 97px; right: 22px; font-size: 78px; font-family: Georgia,serif; color: #81957e; line-height: 1; }
.bonus-panel { margin: -4px 0 0 62px; position: relative; transform: rotate(2deg); text-align: center; }.bonus-panel .panel-top { padding: 14px 17px; }.bonus-panel .panel-brand { font-size: 11px; }
.bonus-amount { display: flex; align-items: baseline; justify-content: center; gap: 7px; color: var(--teal); padding-top: 18px; }.bonus-amount > strong { font-size: 53px; font-weight: 500; line-height: 1.1; letter-spacing: -2px; }.bonus-amount > span:first-child { font-size: 27px; font-weight: 300; }.bonus-amount > span:last-child { font-size: 12px; }
.bonus-panel > p:not(.demo-status) { font-size: 12px; color: var(--muted); margin-top: 6px; }
.bonus-rule { display: flex; align-items: center; justify-content: center; gap: 7px; font-size: 11px; margin: 16px; }.bonus-rule .icon { width: 16px; height: 16px; }
.demo-controls { display: none; }.interactive-ready .demo-controls { display: flex; }.bonus-panel .demo-controls { flex-direction: column; align-items: center; padding-inline: 17px; gap: 8px; }.bonus-button { min-height: 44px; width: 100%; font-size: 11px; padding: 12px 9px; gap: 8px; border-radius: 6px; }.bonus-button .icon { width: 16px; height: 16px; }
.reset-demo { background: none; border: 0; color: #496657; text-decoration: underline; text-underline-offset: 3px; font-size: 11px; min-height: 32px; padding: 5px 12px; }
.demo-status { font-size: 10px; line-height: 1.5; min-height: 43px; padding: 12px 16px 17px; color: #52694d; }
.bonus-panel.is-granted { border-color: #739d76; }.bonus-panel.is-granted .bonus-amount { color: #376b4a; }
.story-ownership { padding-block: 116px 137px; }
.ownership-scene { position: relative; margin-left: -25px; }.ownership-scene > img { width: 100%; height: 495px; object-fit: cover; object-position: 59% 50%; border-radius: 24px 110px 24px 24px; }
.choice-note { position: absolute; bottom: -23px; left: 25px; right: -15px; display: flex; align-items: center; gap: 15px; background: #fffdf6; padding: 19px 23px; border: 1px solid #e6e8dc; box-shadow: 0 8px 25px #253a3612; border-radius: 9px; font-size: 12px; line-height: 1.6; }
.choice-note .icon { width: 30px; height: 30px; color: #66815a; }.choice-note strong { font-size: 13px; font-weight: 600; }
.finish-section { background: #eaf0ed; }.finish-section .story-section { padding-block: 95px; }.finish-section .text-link { margin-top: 24px; font-size: 13px; }
.finish-scene { padding: 14px 40px 0; }.session-panel { padding-bottom: 21px; }.session-panel .panel-top { padding: 17px; }.session-panel .panel-brand { font-size: 11px; }.session-panel .panel-brand .icon { width: 18px; height: 18px; }
.time-dial { position: relative; width: 207px; margin: 24px auto 15px; }.time-dial > svg { width: 100%; height: auto; display: block; transform: rotate(-90deg); fill: none; stroke-width: 8px; }
.dial-track { stroke: #e7ece3; }.dial-progress { stroke: #ba875a; stroke-dasharray: 521.505; stroke-dashoffset: 391.129; stroke-linecap: round; transition: stroke-dashoffset .65s var(--ease), stroke .4s; }
.time-dial > div { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }.time-dial strong { font-size: 64px; line-height: 1; letter-spacing: -3px; font-weight: 450; }.time-dial span { color: var(--muted); font-size: 12px; margin-top: 8px; }
.session-message { text-align: center; padding-inline: 22px; min-height: 103px; }.session-message h3 { font-size: 23px; letter-spacing: -.65px; margin-bottom: 11px; }.session-message p { font-size: 12px; color: var(--muted); line-height: 1.75; white-space: pre-line; }
.session-steps { margin: 18px 21px 0; background: #f0f2eb; border-radius: 7px; padding: 4px; gap: 4px; }.session-steps button { flex: 1; min-height: 40px; padding: 8px 3px; border: 1px solid transparent; background: transparent; border-radius: 5px; font-size: 11px; color: #546458; }.session-steps button[aria-pressed="true"] { background: #fffefa; color: #24483f; box-shadow: 0 2px 5px #173b3512; border-color: #e0e4d8; }.session-steps button:hover { color: #174d48; text-decoration: underline; text-underline-offset: 3px; }
.how-section { padding-block: 104px 93px; text-align: center; }.how-heading .eyebrow { justify-content: center; margin-bottom: 22px; }.how-heading h2 { font-size: 48px; }.how-heading > p:last-child { color: var(--muted); font-size: 15px; margin-top: 22px; }
.how-steps { list-style: none; padding: 0; margin: 64px 0 36px; display: grid; grid-template-columns: repeat(3,1fr); text-align: left; gap: 44px; }
.how-steps > li { position: relative; border-top: 1px solid #bdcbbb; padding: 29px 15px 0 0; }.step-number { position: absolute; top: -15px; left: 0; background: var(--paper); padding-right: 15px; font-family: Georgia,serif; color: #5b7867; font-size: 18px; }
.how-steps .icon { width: 33px; height: 33px; color: #637d70; margin-bottom: 22px; }.how-steps h3 { font-size: 20px; margin-bottom: 14px; letter-spacing: -.55px; }.how-steps p { font-size: 14px; color: var(--muted); line-height: 1.85; max-width: 300px; }
.how-help { font-size: 13px; }
.final-section { background: #214e46; color: #fcf8ee; position: relative; overflow: hidden; }
.final-inner { position: relative; padding-block: 77px 58px; text-align: center; }.final-inner > .eyebrow { justify-content: center; color: #d1dfcd; font-size: 10px; letter-spacing: 2px; margin-bottom: 23px; }.final-inner h2 { font-size: 52px; }.final-inner h2 em { color: #f3c3a1; }.final-inner > p:not(.eyebrow) { font-size: 15px; line-height: 1.85; color: #d4dfd4; margin-top: 24px; }.final-inner > .button { margin-top: 31px; }.button-apricot { color: #243e35; background: #efb38d; }.button-apricot:hover { background: #f2c6a4; }
.final-sun { position: absolute; top: 38px; left: 5px; font-size: 128px; line-height: 1; font-weight: 200; color: #86a893; transform: rotate(12deg); }
.final-day { margin: 65px auto 0; padding-top: 25px; border-top: 1px solid #527569; display: flex; justify-content: center; gap: 43px; }.final-day span { display: flex; align-items: center; gap: 10px; font-size: 11px; color: #d9e5d5; }.final-day .icon { width: 20px; height: 20px; color: #e7c5a3; }

/* Progressive enhancement: all content has a meaningful, visible static state.
   These classes are added only after the motion observer is ready. */
.motion-ready [data-reveal] { transition: opacity .7s var(--ease), transform .7s var(--ease); }
.motion-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(22px); }
.motion-ready .day-part { transition: transform .85s var(--ease), opacity .85s var(--ease); }
.motion-ready .day-part:nth-child(2) { transition-delay: .09s; }.motion-ready .day-part:nth-child(3) { transition-delay: .18s; }.motion-ready .day-part:nth-child(4) { transition-delay: .27s; }
.motion-ready .hero-art:not(.is-visible) .day-part:nth-child(1) { transform: translate(-17px,-28px) rotate(-8deg); opacity: .35; }.motion-ready .hero-art:not(.is-visible) .day-part:nth-child(2) { transform: translate(4px,-37px) rotate(5deg); opacity: .35; }.motion-ready .hero-art:not(.is-visible) .day-part:nth-child(3) { transform: translate(8px,-22px) rotate(-6deg); opacity: .35; }.motion-ready .hero-art:not(.is-visible) .day-part:nth-child(4) { transform: translate(18px,-38px) rotate(8deg); opacity: .35; }
.motion-ready .overview, .motion-ready .reminder, .motion-ready .bonus-panel, .motion-ready .choice-note, .motion-ready .how-steps > li { transition: transform .85s var(--ease), opacity .85s var(--ease); }
.motion-ready .management-scene:not(.is-visible) .overview { transform: translateY(25px) scale(.97); opacity: .65; }.motion-ready .management-scene:not(.is-visible) .reminder-one { transform: translate(24px,70px) rotate(-10deg); opacity: 1; }.motion-ready .management-scene:not(.is-visible) .reminder-two { transform: translate(-12px,140px) rotate(11deg); opacity: 1; }
.motion-ready .bonus-scene:not(.is-visible) .bonus-panel { transform: translateY(30px) rotate(-2deg); opacity: .3; }.motion-ready .ownership-scene:not(.is-visible) .choice-note { transform: translateY(22px); opacity: .25; }
.motion-ready .finish-scene:not(.is-visible) .dial-progress { stroke-dashoffset: 130.376; }.motion-ready .finish-scene .dial-progress { transition-duration: 1.15s; }
.motion-ready .how-steps:not(.is-visible) > li { transform: translateY(20px); opacity: .25; }.motion-ready .how-steps > li:nth-child(2) { transition-delay: .12s; }.motion-ready .how-steps > li:nth-child(3) { transition-delay: .24s; }

@media (min-width: 1550px) { .hero { padding-block: 104px 124px; }.hero-image { height: 540px; } }
@media (max-width: 1100px) {
  .section-wrap { width: calc(100% - 72px); }
  .hero { gap: 30px; padding-block: 70px 82px; }.hero h1 { font-size: 4.65vw; }.hero .eyebrow { font-size: 9px; letter-spacing: 1.1px; }.hero-image { height: 465px; }.hero-description { font-size: 15px; }.hero-actions { gap: 20px; }.hero-actions .text-link { font-size: 13px; }.hero-reassurance { font-size: 11px; }.day-card { left: -20px; right: 10px; padding: 18px; }.day-card-heading { flex-wrap: wrap; gap: 3px; }.day-card-heading > span:first-child { font-size: 11px; }
  .story-section { gap: 55px; }.story-copy h2 { font-size: 39px; }.scene { padding-inline: 24px; }.bonus-scene { padding-inline: 0; }.bonus-panel { margin-left: 38px; }.connection-arrow { right: 6px; }.finish-scene { padding-inline: 15px; }.ownership-scene { margin-left: 0; }.overview-row { padding-inline: 14px; gap: 7px; }.overview-row time { font-size: 9px; }.overview-limit { margin-inline: 14px; }.overview-limit > strong { font-size: 23px; }
  .final-sun { font-size: 88px; }.final-day { gap: 25px; }
}
@media (max-width: 800px) {
  html { scroll-padding-top: 95px; }.section-wrap { width: calc(100% - 44px); }
  .hero { grid-template-columns: 1fr; gap: 46px; padding-block: 46px 61px; }.hero-copy { max-width: 590px; }.hero .eyebrow { font-size: 10px; letter-spacing: 1.15px; }.hero h1 { font-size: clamp(40px,7.7vw,60px); margin-block: 22px; }.hero-description { font-size: 16px; max-width: 500px; }.hero-actions { margin-top: 25px; gap: 26px; }.hero-reassurance { font-size: 12px; margin-top: 19px; }.hero-art { width: 94%; margin-left: auto; }.hero-image { height: auto; aspect-ratio: 1.35; }.hero-image-wrap { border-top-left-radius: 100px; }.hero-note { top: 17px; left: -14px; }.day-card { left: -18px; right: 18px; padding: 22px; }.day-card-heading { flex-wrap: nowrap; }.day-card-heading > span:first-child { font-size: 12px; }.day-track { margin-top: 18px; }
  .intro-band { grid-template-columns: 1fr; gap: 20px; padding-block: 30px; }.intro-band > p { font-size: 23px; }.intro-detail { gap: 25px; }.intro-detail p { max-width: 520px; }
  .story-section { grid-template-columns: 1fr; gap: 43px; padding-block: 68px; }.story-copy { max-width: 570px; }.story-copy h2 { font-size: clamp(36px,6.4vw,46px); max-width: 480px; }.story-copy > p:not(.chapter):not(.benefit-takeaway):not(.product-note) { font-size: 15px; }.chapter { margin-bottom: 19px; }.story-copy .benefit-takeaway { margin-top: 23px; font-size: 15px; }
  .scene { max-width: 500px; width: 100%; margin-inline: auto; padding-inline: 35px; }.reverse .story-copy { grid-column: auto; grid-row: auto; padding-left: 0; max-width: 570px; }.reverse > figure { grid-column: auto; grid-row: auto; }.bonus-section .story-section, .finish-section .story-section { padding-block: 64px; }.bonus-scene { padding: 17px 13px 0; }.bonus-panel { margin-left: 75px; }.agreement-note { width: 265px; }.connection-arrow { right: 24px; top: 105px; }.story-copy .product-note { max-width: 470px; }
  .ownership-scene { max-width: 550px; width: 100%; margin: 0 auto 22px; }.ownership-scene > img { height: 445px; }.choice-note { left: 20px; right: 10px; }.finish-scene { padding: 0 20px; }.overview-row { padding-inline: 22px; gap: 11px; }.overview-row time { font-size: 10px; }.overview-limit { margin-inline: 22px; }.overview-limit > strong { font-size: 28px; }
  .how-section { padding-block: 70px; }.how-heading h2 { font-size: 39px; }.how-heading > p:last-child { font-size: 14px; max-width: 370px; margin-inline: auto; }.how-steps { grid-template-columns: 1fr; gap: 37px; margin: 44px auto 26px; max-width: 490px; }.how-steps > li { padding-top: 27px; padding-left: 57px; }.how-steps .icon { position: absolute; left: 0; top: 30px; width: 28px; height: 28px; }.how-steps h3 { font-size: 19px; }.how-steps p { max-width: 420px; }.how-steps .step-number { top: -15px; }.how-heading .eyebrow { font-size: 10px; }
  .final-inner { padding-block: 61px 39px; }.final-inner h2 { font-size: 38px; }.final-inner > p:not(.eyebrow) { font-size: 14px; }.final-sun { position: static; font-size: 56px; display: block; margin-bottom: 22px; }.final-day { display: grid; grid-template-columns: 1fr 1fr; gap: 19px; margin-top: 43px; text-align: left; max-width: 400px; }.final-day span { font-size: 10px; }
}
@media (max-width: 390px) {
  .section-wrap { width: calc(100% - 36px); }.hero h1 { font-size: 37px; }.hero .eyebrow { font-size: 8px; letter-spacing: 1px; }.hero-actions { gap: 19px; }.hero-actions .button { padding-inline: 17px; gap: 14px; }.hero-reassurance { font-size: 10px; }.hero-note { font-size: 10px; padding: 10px 12px; }.day-card { padding: 17px 12px; left: -12px; right: 8px; }.day-card-heading { flex-wrap: wrap; }.day-part { font-size: 9px; }.scene { padding-inline: 18px; }.overview-row { padding-inline: 12px; gap: 7px; }.overview-row strong { font-size: 11px; }.overview-row div > span { font-size: 9px; }.overview-limit { margin-inline: 12px; }.overview-limit > strong { font-size: 23px; }.bonus-scene { padding-inline: 0; }.bonus-panel { margin-left: 28px; }.agreement-note { width: 240px; }.connection-arrow { right: 0; top: 130px; font-size: 60px; }.panel-brand { font-size: 11px; }.finish-scene { padding-inline: 5px; }.session-steps { margin-inline: 14px; }.choice-note { padding: 15px; left: 8px; right: 8px; }.choice-note strong { font-size: 11px; }.final-inner h2 { font-size: 34px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .motion-ready [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
}
@media print {.hero, .story-section { break-inside: avoid; }.demo-controls { display: none !important; }[data-reveal] { opacity: 1 !important; transform: none !important; }.section-wrap { width: 95%; }.story-section { padding-block: 30px; }.final-section { background: white; color: var(--ink); }.final-inner h2 em, .final-inner > p { color: var(--ink) !important; }
}