/* Public Daymark marketing routes */
html, body { min-height: 100%; margin: 0; background: #08090b; }
.skip-link { position: fixed; z-index: 100; top: 12px; left: 12px; padding: 10px 14px; transform: translateY(-160%); border-radius: 8px; background: #62c5f6; color: #08090b; font: 700 13px var(--font-ui); text-decoration: none; transition: transform .18s ease; }
.skip-link:focus { transform: translateY(0); }
.marketing-site { display: none; }
body.route-marketing { background: #08090b !important; color: #fff !important; }
body.route-marketing::before { display: none !important; }
body.route-marketing .marketing-site { display: block; min-height: 100vh; background: #08090b; color: #fff; font-family: var(--font-ui); }
body.route-marketing .auth-gate, body.route-marketing .app-shell { display: none !important; }
body.route-login .marketing-site, body.route-signup .marketing-site, body.route-app .marketing-site { display: none !important; }
body.route-login .app-shell, body.route-signup .app-shell { display: none !important; }
body.route-app .auth-gate { display: none !important; }
body.route-app:not(.is-authenticated) .app-shell { display: none !important; }
body.route-app.is-authenticated .app-shell { display: flex !important; }
body.route-login .auth-gate, body.route-signup .auth-gate { display: block !important; }
.marketing-nav, .marketing-main, .marketing-footer { width: min(1180px, calc(100% - 48px)); margin-inline: auto; }
.marketing-nav { display: flex; align-items: center; justify-content: space-between; min-height: 84px; border-bottom: 1px solid #252a33; }
.marketing-brand { display: inline-flex; align-items: center; gap: 9px; color: #fff; font-size: 20px; font-weight: 750; letter-spacing: -.05em; text-decoration: none; }
.marketing-brand .daymark-mark-svg, .marketing-mark .daymark-mark-svg { color: #fff !important; }
.marketing-nav nav { display: flex; align-items: center; gap: 25px; margin-left: auto; margin-right: 28px; }
.marketing-nav a, .marketing-footer a { color: #a7adb8; font-size: 13px; font-weight: 600; text-decoration: none; }
.marketing-nav nav a:hover, .marketing-login:hover, .marketing-footer-links a:hover { color: #fff; }
.marketing-nav-actions, .marketing-actions { display: flex; align-items: center; gap: 16px; }
.marketing-button { display: inline-flex; align-items: center; justify-content: center; gap: 9px; min-height: 46px; padding: 0 18px; border: 1px solid #62c5f6; border-radius: 9px; background: #62c5f6; color: #08090b !important; font-size: 13px; font-weight: 760; text-decoration: none; transition: background .18s ease, border-color .18s ease, transform .18s ease; }
.marketing-button:hover { background: #38a9e6; border-color: #38a9e6; transform: translateY(-1px); }
.marketing-button.small { min-height: 38px; padding-inline: 14px; }
.marketing-button.secondary { border-color: #323842; background: transparent; color: #fff !important; }
.marketing-button.secondary:hover { border-color: #62c5f6; background: rgba(98,197,246,.12); }
.marketing-text-link { display: inline-flex; gap: 9px; color: #fff; font-size: 13px; font-weight: 700; text-decoration: none; }
.marketing-text-link:hover { color: #62c5f6; }
.marketing-eyebrow { margin: 0 0 14px; color: #8d96a4; font: 700 10px/1.2 var(--font-data); letter-spacing: .11em; text-transform: uppercase; }
.hero { display: grid; grid-template-columns: minmax(0, .89fr) minmax(470px, 1.11fr); gap: clamp(44px, 8vw, 128px); align-items: center; min-height: calc(100vh - 84px); padding: 74px 0 92px; }
.hero-copy { max-width: 535px; }
.hero h1, .page-hero h1 { max-width: 700px; margin: 0; color: #fff; font-size: clamp(54px, 7.2vw, 104px); font-weight: 650; letter-spacing: -.075em; line-height: .91; }
.hero h1 em { color: #62c5f6; font-style: normal; }
.hero-lede { max-width: 480px; margin: 28px 0 31px; color: #bbc1ca; font-size: 18px; line-height: 1.55; }
.hero-note { margin: 19px 0 0; color: #707887; font-size: 11px; }
.product-visual { position: relative; min-height: 478px; padding: 22px; overflow: hidden; border: 1px solid #303641; border-radius: 18px; background: #101216; box-shadow: 0 26px 80px rgba(0,0,0,.3); }
.product-visual::before { content: ''; position: absolute; inset: 0; opacity: .24; pointer-events: none; background-image: linear-gradient(#1d222b 1px, transparent 1px), linear-gradient(90deg, #1d222b 1px, transparent 1px); background-size: 42px 42px; mask-image: linear-gradient(140deg, #000, transparent 70%); }
.visual-top, .visual-bottom { position: relative; z-index: 1; display: flex; align-items: center; gap: 13px; color: #9099a7; font: 600 10px var(--font-data); }
.visual-top .visual-logo { margin-right: auto; color: #fff; font: 700 16px var(--font-ui); letter-spacing: -.06em; }.visual-top button { border: 1px solid #333a45; border-radius: 7px; padding: 8px 10px; background: #171a20; color: #fff; font: 600 10px var(--font-ui); }
.visual-title { position: relative; z-index: 1; margin-top: 54px; }.visual-title span, .visual-bottom small { display: block; color: #87909d; font: 700 9px var(--font-data); letter-spacing: .1em; }.visual-title strong { display: block; margin-top: 8px; color: #fff; font-size: 27px; letter-spacing: -.06em; }
.visual-timeline { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(6, 1fr); height: 170px; margin-top: 40px; border-top: 1px solid #2a303a; border-bottom: 1px solid #2a303a; background: #0c0e12; }
.visual-timeline > i { padding: 11px 0 0 8px; border-right: 1px solid #20252e; color: #67707e; font: 600 9px var(--font-data); font-style: normal; }.visual-timeline > em { position: absolute; top: 0; bottom: 0; left: 72%; width: 2px; background: #62c5f6; }.visual-timeline > em::before { content: ''; position: absolute; top: -3px; left: -3px; width: 8px; height: 8px; border-radius: 50%; background: #62c5f6; }
.visual-class { position: absolute; left: 15%; z-index: 2; display: grid; gap: 3px; width: 31%; padding: 10px; border-left: 3px solid #62c5f6; border-radius: 4px; background: #193243; }.visual-class b { color: #fff; font-size: 11px; }.visual-class small { color: #b5dff1; font-size: 9px; }.visual-class.class-one { top: 43px; }.visual-class.class-two { top: 104px; left: 50%; width: 25%; border-left-color: #fff; background: #262b33; }
.visual-bottom { display: grid; grid-template-columns: 1fr 1fr; gap: 11px; margin-top: 18px; }.visual-bottom section { padding: 13px; border: 1px solid #282e37; border-radius: 9px; background: #15181e; }.visual-bottom b, .visual-bottom span { display: block; margin-top: 6px; }.visual-bottom b { color: #fff; font-size: 12px; }.visual-bottom span { color: #9ca5b1; font-size: 10px; }.visual-bottom i { display: inline-block; width: 54px; height: 4px; margin-right: 5px; overflow: hidden; border-radius: 9px; background: #303641; vertical-align: middle; }.visual-bottom i em { display: block; width: 50%; height: 100%; background: #62c5f6; }
.quiet-band { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 31px 0; border-block: 1px solid #252a33; }.quiet-band p { margin: 0; color: #fff; font-size: clamp(20px, 2.2vw, 30px); letter-spacing: -.045em; }.quiet-band span { color: #7b8491; font-size: 12px; }
.workflow, .feature-split, .integrations, .pricing-preview { padding: 132px 0; }.section-intro { max-width: 610px; }.section-intro h2, .final-cta h2, .compact-cta h2, .product-statement h2, .telegram-callout h2 { margin: 0; color: #fff; font-size: clamp(34px, 4.3vw, 59px); letter-spacing: -.065em; line-height: .98; }.section-intro > p:not(.marketing-eyebrow), .product-statement p, .telegram-callout p { margin: 21px 0 27px; color: #aeb5c0; font-size: 16px; line-height: 1.6; }
.workflow-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; margin: 64px 0 0; padding: 0; border-top: 1px solid #2a3039; list-style: none; }.workflow-grid li { min-height: 232px; padding: 25px 24px 20px 0; border-right: 1px solid #2a3039; }.workflow-grid li + li { padding-left: 24px; }.workflow-grid li:last-child { border-right: 0; }.workflow-grid b { color: #62c5f6; font: 700 11px var(--font-data); }.workflow-grid h3 { margin: 50px 0 10px; color: #fff; font-size: 19px; letter-spacing: -.045em; }.workflow-grid p { margin: 0; color: #959eaa; font-size: 13px; line-height: 1.6; }
.feature-split { display: grid; grid-template-columns: minmax(0,.9fr) minmax(420px,1.1fr); gap: clamp(46px, 10vw, 160px); align-items: center; border-top: 1px solid #252a33; }.feature-split.reverse { grid-template-columns: minmax(420px,1.1fr) minmax(0,.9fr); }.feature-art { min-height: 390px; padding: 28px; border: 1px solid #303641; border-radius: 16px; background: #101216; }.timeline-art .art-label { color: #84909d; font: 700 10px var(--font-data); letter-spacing: .1em; }.art-title { margin-top: 8px; color: #fff; font-size: 28px; letter-spacing: -.055em; }.art-track { position: relative; display: grid; grid-template-columns: repeat(6,1fr); height: 190px; margin-top: 36px; border-block: 1px solid #29303a; background: #0d0f13; }.art-track > span { padding: 11px 0 0 8px; border-right: 1px solid #21262e; color: #727d89; font: 600 9px var(--font-data); }.art-track > i { position: absolute; top: 0; bottom: 0; left: 76%; width: 2px; background: #62c5f6; }.art-track > div { position: absolute; top: 57px; left: 17%; display: grid; gap: 4px; width: 31%; padding: 11px; border-left: 3px solid #62c5f6; background: #173446; }.art-track b { color: #fff; font-size: 12px; }.art-track small { color: #b8dfef; font-size: 9px; }.art-track > em { position: absolute; top: 117px; left: 50%; width: 29%; height: 40px; border-left: 3px solid #fff; background: #252a31; }.art-caption { margin-top: 17px; color: #8d96a2; font-size: 11px; }
.panel-grid { display: grid; grid-template-columns: 1.1fr .9fr; gap: 20px; padding: 0 0 132px; }.panel-grid > div:last-child { display: grid; gap: 20px; }.marketing-panel { position: relative; min-height: 248px; padding: 29px; overflow: hidden; border: 1px solid #2b313b; border-radius: 15px; background: #111318; }.marketing-panel.wide { min-height: 516px; display: flex; flex-direction: column; justify-content: end; background: linear-gradient(160deg, #11161e 0%, #111318 64%); }.marketing-panel h3 { max-width: 400px; margin: 0; color: #fff; font-size: clamp(25px, 3vw, 40px); letter-spacing: -.06em; line-height: 1; }.marketing-panel > p:not(.marketing-eyebrow) { max-width: 430px; margin: 16px 0 0; color: #9da6b3; font-size: 13px; line-height: 1.55; }.panel-arrow { position: absolute; top: 25px; right: 25px; color: #62c5f6; font-size: 20px; }.marketing-panel.capture::before { content: 'ECON QUIZ FRI'; position: absolute; top: 44px; right: 24px; left: 24px; padding: 17px; border: 1px solid #353d48; border-radius: 10px; color: #fff; font: 700 13px var(--font-data); }.marketing-panel.grades::before { content: 'ECON 201  ·  92%'; position: absolute; top: 48px; right: 25px; left: 25px; padding-bottom: 17px; border-bottom: 4px solid #62c5f6; color: #dce1e9; font: 700 12px var(--font-data); }
.study-art { display: flex; flex-direction: column; justify-content: center; }.study-art > p, .study-art > span { margin: 0; color: #8d97a4; font: 700 10px var(--font-data); letter-spacing: .1em; }.study-art h3 { max-width: 330px; margin: 18px 0; color: #fff; font-size: 34px; line-height: .98; letter-spacing: -.06em; }.study-art > div { display: flex; gap: 8px; margin: 22px 0; }.study-art > div b { padding: 9px 10px; border: 1px solid #2f3741; border-radius: 7px; color: #ccd4de; font-size: 10px; }.study-art > i { height: 5px; overflow: hidden; border-radius: 10px; background: #303641; }.study-art > i em { display: block; width: 62%; height: 100%; background: #62c5f6; }.study-art small { margin-top: 11px; color: #a3acb7; font-size: 11px; }
.recovery-art { display: grid; align-content: center; }.recovery-art > span { color: #91a0ad; font: 700 10px var(--font-data); letter-spacing: .1em; }.recovery-art h3 { max-width: 380px; margin: 18px 0 32px; color: #fff; font-size: 35px; line-height: .98; letter-spacing: -.06em; }.recovery-art div { position: relative; display: grid; grid-template-columns: 80px 1fr auto; gap: 12px; align-items: center; padding: 14px 0; border-top: 1px solid #29303a; }.recovery-art div b { color: #a7b1bd; font: 700 10px var(--font-data); }.recovery-art div p { margin: 0; color: #fff; font-size: 12px; }.recovery-art div i { width: 14px; height: 14px; border: 2px solid #62c5f6; border-radius: 50%; }.recovery-art small { margin-top: 18px; color: #8c96a3; font-size: 11px; }
.integrations { border-top: 1px solid #252a33; }.integration-grid { display: grid; grid-template-columns: repeat(4,1fr); gap: 12px; margin-top: 50px; }.integration-grid article { min-height: 150px; padding: 20px; border: 1px solid #2b313b; border-radius: 12px; background: #101216; }.integration-grid b { color: #fff; font-size: 14px; }.integration-grid p { margin: 14px 0 0; color: #919ba7; font-size: 12px; line-height: 1.5; }
.pricing-preview { border-top: 1px solid #252a33; }.pricing-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-top: 50px; }.price-card { display: flex; min-height: 455px; flex-direction: column; padding: 25px; border: 1px solid #303641; border-radius: 15px; background: #101216; }.price-card.featured { border-color: #415365; }.price-card h3 { margin: 0; color: #fff; font-size: 37px; letter-spacing: -.065em; }.price-card h3 small { color: #9099a7; font-size: 12px; letter-spacing: 0; }.price-copy { min-height: 39px; margin: 13px 0; color: #a8b0bc; font-size: 13px; line-height: 1.5; }.price-card ul, .support-grid ul { display: grid; gap: 10px; margin: 12px 0 25px; padding: 0; list-style: none; color: #c5cbd4; font-size: 12px; line-height: 1.45; }.price-card li { position: relative; padding-left: 16px; }.price-card li::before { position: absolute; left: 0; content: '•'; color: #62c5f6; }.price-card .marketing-button { margin-top: auto; }.pricing-compact { grid-template-columns: repeat(3, 1fr); }.pricing-compact .price-card { min-height: 405px; }
.final-cta, .compact-cta { padding: 115px 24px; margin-bottom: 96px; border: 1px solid #2d353f; border-radius: 18px; background: #11151a; text-align: center; }.final-cta h2, .compact-cta h2 { max-width: 700px; margin-inline: auto; }.final-cta > p:not(.marketing-eyebrow) { max-width: 510px; margin: 20px auto 30px; color: #abb3bf; font-size: 15px; line-height: 1.6; }.final-cta .marketing-actions { justify-content: center; }.compact-cta { display: flex; align-items: center; justify-content: space-between; gap: 30px; padding: 54px; text-align: left; }.compact-cta h2 { max-width: 560px; margin: 0; font-size: clamp(28px, 3.3vw, 45px); }
.marketing-footer { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 30px; padding: 28px 0 42px; border-top: 1px solid #252a33; }.marketing-footer-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 18px; }.marketing-footer p { margin: 0; color: #707987; font: 500 10px var(--font-data); text-align: right; }
.page-main { padding-bottom: 95px; }.page-hero { max-width: 850px; padding: 116px 0 102px; }.page-hero h1 { font-size: clamp(53px, 7vw, 91px); }.page-hero > p:not(.marketing-eyebrow) { max-width: 650px; margin: 25px 0 30px; color: #afb6c0; font-size: 18px; line-height: 1.6; }.product-statement { display: grid; grid-template-columns: 1fr .82fr; gap: 80px; align-items: center; padding: 0 0 130px; }.product-statement .product-visual { min-height: 390px; transform: scale(.92); transform-origin: left center; }.stacked-features { display: grid; gap: 12px; }.stacked-features .marketing-panel { display: grid; grid-template-columns: 190px minmax(250px,1fr) minmax(270px,.75fr) auto; align-items: center; min-height: 160px; padding: 28px; }.stacked-features .marketing-panel .marketing-eyebrow { margin: 0; }.stacked-features .marketing-panel h3 { font-size: 26px; }.stacked-features .marketing-panel > p:not(.marketing-eyebrow) { margin: 0; }.studio-showcase { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; margin-bottom: 130px; }.studio-tool-card { min-height: 285px; padding: 28px; border: 1px solid #2c343e; border-radius: 14px; background: #101216; }.studio-tool-card span, .focus-demo > span { color: #8c96a4; font: 700 10px var(--font-data); letter-spacing: .1em; }.studio-tool-card h2 { margin: 76px 0 10px; color: #fff; font-size: 32px; letter-spacing: -.06em; }.studio-tool-card p { margin: 0; color: #9ea6b1; font-size: 13px; line-height: 1.55; }.focus-demo { display: grid; padding: 31px; border: 1px solid #2d353f; border-radius: 16px; background: #101216; }.focus-demo > b { margin: 26px 0 5px; color: #fff; font: 600 clamp(58px,8vw,86px)/1 var(--font-data); letter-spacing: -.1em; }.focus-demo p { margin: 0; color: #cbd1d9; font-size: 12px; }.focus-demo div { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 26px; }.focus-demo i { padding: 8px 10px; border: 1px solid #333b46; border-radius: 7px; color: #9fa8b4; font-size: 10px; font-style: normal; }.planning-workflow { padding-top: 0; }.telegram-callout { display: grid; grid-template-columns: 1fr 360px; gap: 110px; align-items: center; padding: 130px 0; border-top: 1px solid #252a33; }.telegram-demo { padding: 24px; border: 1px solid #2d353f; border-radius: 16px; background: #15191f; }.telegram-demo b, .telegram-demo strong { color: #fff; }.telegram-demo span { display: block; margin-top: 5px; color: #8e99a6; font-size: 11px; }.telegram-demo p { margin: 23px 0 0; color: #c3cad2; font-size: 12px; line-height: 1.7; }.full-pricing { margin-bottom: 38px; }.pricing-note { margin: 0; color: #8d96a3; font-size: 12px; }.legal-content { max-width: 770px; padding-bottom: 100px; }.legal-status { margin: 0 0 28px; padding: 14px 16px; border: 1px solid #4b535e; border-radius: 9px; background: #15191f; color: #c0c7d0; font-size: 12px; }.legal-content article { padding: 25px 0; border-top: 1px solid #2a3039; }.legal-content h2 { margin: 0 0 10px; color: #fff; font-size: 25px; letter-spacing: -.05em; }.legal-content p { margin: 0; color: #abb3be; font-size: 14px; line-height: 1.7; }.support-grid { display: grid; grid-template-columns: repeat(3,1fr); gap: 16px; padding-bottom: 100px; }.support-grid article { display: flex; min-height: 300px; flex-direction: column; padding: 26px; border: 1px solid #2c343e; border-radius: 14px; background: #101216; }.support-grid h2 { margin: 0; color: #fff; font-size: 27px; letter-spacing: -.055em; }.support-grid p { margin: 17px 0; color: #9ea7b3; font-size: 13px; line-height: 1.6; }.support-grid .marketing-button { margin-top: auto; }
@media (max-width: 940px) { .marketing-nav nav { display: none; }.hero, .feature-split, .feature-split.reverse, .product-statement, .telegram-callout { grid-template-columns: 1fr; }.hero { padding-top: 60px; }.product-visual { min-height: 410px; }.workflow-grid, .integration-grid, .pricing-grid, .studio-showcase, .support-grid { grid-template-columns: repeat(2,1fr); }.workflow-grid li:nth-child(2) { border-right: 0; }.workflow-grid li:nth-child(n+3) { border-top: 1px solid #2a3039; }.panel-grid { grid-template-columns: 1fr; }.feature-split.reverse .feature-art { order: 2; }.product-statement .product-visual { transform: none; }.stacked-features .marketing-panel { grid-template-columns: 140px 1fr; }.stacked-features .marketing-panel > p:not(.marketing-eyebrow) { grid-column: 2; }.telegram-callout { gap: 36px; }.pricing-compact .price-card { min-height: 420px; }.marketing-footer { grid-template-columns: 1fr; }.marketing-footer-links { justify-content: flex-start; }.marketing-footer p { text-align: left; } }
@media (max-width: 640px) { .marketing-nav, .marketing-main, .marketing-footer { width: min(100% - 32px, 1180px); }.marketing-nav { min-height: 68px; }.marketing-nav-actions { gap: 12px; }.marketing-login { display: none; }.marketing-brand { font-size: 18px; }.marketing-button.small { min-height: 35px; }.hero { display: block; min-height: auto; padding: 68px 0 66px; }.hero h1, .page-hero h1 { font-size: clamp(47px, 16vw, 69px); }.hero-lede, .page-hero > p:not(.marketing-eyebrow) { font-size: 16px; }.product-visual { min-height: 390px; margin-top: 52px; padding: 15px; border-radius: 13px; }.visual-title { margin-top: 38px; }.visual-timeline { height: 145px; margin-top: 30px; }.visual-bottom { grid-template-columns: 1fr; }.visual-bottom section:last-child { display: none; }.quiet-band { display: grid; padding: 25px 0; }.workflow, .feature-split, .integrations, .pricing-preview { padding: 78px 0; }.workflow-grid { grid-template-columns: 1fr; margin-top: 38px; }.workflow-grid li, .workflow-grid li + li { min-height: 155px; padding: 20px 0; border-right: 0; border-top: 1px solid #2a3039; }.workflow-grid li:first-child { border-top: 0; }.workflow-grid h3 { margin-top: 28px; }.feature-split { gap: 38px; }.feature-art { min-height: 310px; padding: 20px; }.panel-grid { padding-bottom: 78px; }.marketing-panel.wide { min-height: 360px; }.integration-grid, .pricing-grid, .studio-showcase, .support-grid { grid-template-columns: 1fr; }.price-card { min-height: 0; }.price-card ul { margin-bottom: 30px; }.final-cta, .compact-cta { margin-bottom: 55px; padding: 60px 20px; }.final-cta .marketing-actions, .compact-cta { align-items: stretch; flex-direction: column; }.final-cta .marketing-button { width: 100%; }.page-hero { padding: 75px 0 60px; }.product-statement { gap: 32px; padding-bottom: 80px; }.stacked-features .marketing-panel { display: block; min-height: 220px; }.stacked-features .marketing-panel .marketing-eyebrow { margin-bottom: 18px; }.stacked-features .marketing-panel > p:not(.marketing-eyebrow) { margin-top: 16px; }.studio-showcase { margin-bottom: 78px; }.telegram-callout { padding: 78px 0; }.marketing-footer { gap: 20px; }.marketing-footer-links { gap: 11px 16px; }.page-main { padding-bottom: 45px; } }
@media (prefers-reduced-motion: reduce) { .marketing-button { transition: none; }.marketing-button:hover { transform: none; } }

/* Cinematic public homepage */
.marketing-nav, .marketing-main, .marketing-footer { width: min(1500px, calc(100% - clamp(48px, 8vw, 160px))); }
.marketing-site a:focus-visible { outline: 2px solid #62c5f6; outline-offset: 4px; }
.hero-story-intro { grid-template-columns: minmax(0, .82fr) minmax(590px, 1.18fr); gap: clamp(48px, 6vw, 118px); min-height: calc(100svh - 84px); padding-block: clamp(72px, 8vh, 124px); }
.hero-story-intro .hero-copy { max-width: 570px; }
.hero-story-intro .product-visual { min-height: min(62vh, 570px); }
.hero-story-intro .visual-title { margin-top: clamp(42px, 6vh, 66px); }

.feature-story { position: relative; height: 440svh; border-top: 1px solid #252a33; }
.story-stage { position: sticky; top: 0; height: 100svh; overflow: hidden; }
.story-stage::before { position: absolute; inset: 0; content: ''; pointer-events: none; background: radial-gradient(circle at 84% 54%, rgba(98, 197, 246, .12), transparent 32%); opacity: .8; }
.story-frame { position: relative; display: grid; grid-template-columns: minmax(310px, .76fr) minmax(580px, 1.24fr); gap: clamp(48px, 7vw, 128px); align-items: center; min-height: 100%; }
.story-copy-stack { position: relative; min-height: 350px; }
.story-copy { position: absolute; inset: 0; display: grid; align-content: center; justify-items: start; opacity: 0; pointer-events: none; transform: translate3d(0, 30px, 0); transition: opacity .52s ease, transform .62s cubic-bezier(.2, .7, .2, 1); }
.story-copy h2 { max-width: 510px; margin: 0; color: #fff; font-size: clamp(48px, 5.2vw, 82px); font-weight: 650; letter-spacing: -.078em; line-height: .91; }
.story-copy > p:not(.marketing-eyebrow) { max-width: 480px; margin: 26px 0 30px; color: #aeb7c3; font-size: 17px; line-height: 1.65; }
.feature-story[data-story-step='0'] .story-copy[data-story-copy='0'], .feature-story[data-story-step='1'] .story-copy[data-story-copy='1'], .feature-story[data-story-step='2'] .story-copy[data-story-copy='2'], .feature-story[data-story-step='3'] .story-copy[data-story-copy='3'] { z-index: 1; opacity: 1; pointer-events: auto; transform: translate3d(0, 0, 0); }
.story-interface { position: relative; min-height: 550px; height: min(67vh, 670px); padding: 20px; overflow: hidden; border: 1px solid #303842; border-radius: 22px; background: #101216; box-shadow: 0 32px 90px rgba(0, 0, 0, .33); }
.story-interface::before { position: absolute; inset: 0; content: ''; pointer-events: none; opacity: .36; background-image: linear-gradient(#202630 1px, transparent 1px), linear-gradient(90deg, #202630 1px, transparent 1px); background-size: 46px 46px; mask-image: linear-gradient(135deg, #000, transparent 72%); }
.story-interface-top { position: relative; z-index: 5; display: flex; align-items: center; gap: 13px; color: #87919e; font: 600 10px var(--font-data); }
.story-brand { margin-right: auto; color: #fff; font: 700 16px var(--font-ui); letter-spacing: -.06em; }
.story-status { padding: 7px 9px; border: 1px solid #30465a; border-radius: 999px; color: #a9dff8; background: rgba(98, 197, 246, .1); }
.story-board { position: absolute; inset: 85px 20px 20px; display: grid; align-content: start; opacity: 0; transform: translate3d(28px, 0, 0) scale(.985); transition: opacity .52s ease, transform .62s cubic-bezier(.2, .7, .2, 1); }
.feature-story[data-story-step='0'] .story-board[data-story-board='0'], .feature-story[data-story-step='1'] .story-board[data-story-board='1'], .feature-story[data-story-step='2'] .story-board[data-story-board='2'], .feature-story[data-story-step='3'] .story-board[data-story-board='3'] { z-index: 2; opacity: 1; transform: translate3d(0, 0, 0) scale(1); }
.story-board-heading { display: grid; gap: 7px; }
.story-board-heading span, .story-day-summary b, .story-course-note span, .story-study-tools span, .story-focus > span, .story-recovery-footer b { color: #8995a3; font: 700 9px var(--font-data); letter-spacing: .11em; }
.story-board-heading strong { color: #fff; font-size: 29px; letter-spacing: -.06em; }
.story-day-timeline { position: relative; display: grid; grid-template-columns: repeat(6, 1fr); height: 228px; margin-top: 32px; overflow: hidden; border-block: 1px solid #29313b; background: #0b0d10; }
.story-day-timeline > i { padding: 12px 0 0 9px; border-right: 1px solid #1e242c; color: #65707d; font: 600 9px var(--font-data); font-style: normal; }
.story-day-timeline > em { position: absolute; top: 0; bottom: 0; left: 76%; width: 2px; background: #62c5f6; }
.story-day-timeline > em::before { position: absolute; top: -4px; left: -3px; width: 8px; height: 8px; border-radius: 50%; content: ''; background: #62c5f6; box-shadow: 0 0 16px rgba(98, 197, 246, .8); }
.story-class { position: absolute; z-index: 2; display: grid; gap: 4px; width: 35%; padding: 13px; border-left: 3px solid #62c5f6; border-radius: 5px; background: #193344; }
.story-class b { color: #fff; font-size: 12px; }.story-class small { color: #bae1f4; font-size: 9px; }.story-class-one { top: 56px; left: 12%; }.story-class-two { top: 139px; left: 47%; width: 29%; border-left-color: #e4e8ed; background: #252b33; }.story-class-two small { color: #c6ced8; }
.story-day-summary { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }.story-day-summary span { display: grid; gap: 5px; padding: 13px; border: 1px solid #29313a; border-radius: 9px; color: #fff; font-size: 12px; background: #15191f; }.story-day-summary small { color: #93a0ad; font-size: 10px; }
.story-course-list { display: grid; gap: 10px; margin-top: 30px; }.story-course-list > div { display: grid; grid-template-columns: 8px 1fr auto; gap: 13px; align-items: center; min-height: 70px; padding: 14px; border: 1px solid #28313b; border-radius: 10px; background: #15191f; }.story-course-list i { width: 8px; height: 32px; border-radius: 8px; background: #62c5f6; }.story-course-list > div:nth-child(2) i { background: #d9e2e9; }.story-course-list > div:nth-child(3) i { background: #6e9db8; }.story-course-list span { display: grid; gap: 4px; }.story-course-list b { color: #fff; font-size: 12px; }.story-course-list small { color: #8e9aa7; font-size: 10px; }.story-course-list em { color: #b9e3f8; font: 700 11px var(--font-data); font-style: normal; }.story-course-note { display: grid; gap: 6px; margin-top: 18px; padding: 17px; border: 1px solid #375166; border-radius: 11px; background: rgba(98, 197, 246, .08); }.story-course-note b { color: #fff; font-size: 13px; }.story-course-note small { color: #a6c9dc; font-size: 10px; }
.story-study-tools { display: grid; grid-template-columns: repeat(3, 1fr); gap: 11px; margin-top: 30px; }.story-study-tools > div { display: grid; align-content: end; min-height: 180px; padding: 14px; border: 1px solid #2a343e; border-radius: 11px; background: #15191f; }.story-study-tools > div:nth-child(2) { background: #182b38; border-color: #386078; }.story-study-tools b { margin-top: 34px; color: #fff; font-size: 17px; letter-spacing: -.05em; }.story-study-tools small { margin-top: 7px; color: #91a1ae; font-size: 10px; }.story-focus { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; margin-top: 15px; padding: 15px; border: 1px solid #314659; border-radius: 11px; background: #10202b; }.story-focus > span { grid-column: 1 / -1; }.story-focus b { color: #fff; font: 650 29px/1 var(--font-data); letter-spacing: -.08em; }.story-focus small { color: #b6d9e9; font-size: 10px; }.story-focus em { padding: 7px 9px; border: 1px solid #476a7f; border-radius: 999px; color: #bde3f5; font-size: 9px; font-style: normal; }
.story-recovery-message { margin: 30px 0 12px; color: #b4bdc7; font-size: 13px; }.story-recovery-list { display: grid; }.story-recovery-list > div { display: grid; grid-template-columns: 82px 1fr auto 16px; gap: 12px; align-items: center; padding: 16px 0; border-top: 1px solid #29313a; }.story-recovery-list span { color: #8996a4; font: 700 10px var(--font-data); }.story-recovery-list b { color: #fff; font-size: 12px; }.story-recovery-list small { color: #9aa5b1; font-size: 10px; }.story-recovery-list i { width: 13px; height: 13px; border: 2px solid #62c5f6; border-radius: 50%; }.story-recovery-footer { display: flex; justify-content: space-between; margin-top: 18px; padding: 15px; border: 1px solid #365267; border-radius: 10px; background: rgba(98, 197, 246, .08); }.story-recovery-footer span { color: #b9e2f7; font-size: 10px; }
.story-progress { position: absolute; bottom: clamp(30px, 6vh, 70px); left: 0; display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }.story-progress li { width: 28px; height: 2px; background: #38424d; transition: background .3s ease, transform .3s ease; }.story-progress li[data-active] { background: #62c5f6; transform: scaleX(1.18); transform-origin: left center; }

@media (min-width: 761px) and (max-width: 940px) { .hero-story-intro { display: grid; grid-template-columns: minmax(0, .85fr) minmax(380px, 1.15fr); gap: 34px; }.hero-story-intro .product-visual { min-height: 465px; }.story-frame { grid-template-columns: minmax(260px, .75fr) minmax(400px, 1.25fr); gap: 38px; }.story-interface { min-height: 505px; }.story-study-tools b { font-size: 14px; }.story-focus { grid-template-columns: auto 1fr; }.story-focus em { display: none; } }
@media (max-width: 760px), (prefers-reduced-motion: reduce) { .feature-story { height: auto; padding: 84px 0; }.story-stage { position: static; height: auto; overflow: visible; }.story-stage::before { display: none; }.story-frame { display: block; min-height: 0; }.story-copy-stack { display: grid; gap: 48px; min-height: 0; }.story-copy { position: static; display: grid; opacity: 1 !important; pointer-events: auto !important; transform: none !important; }.story-copy h2 { font-size: clamp(42px, 12vw, 64px); }.story-copy > p:not(.marketing-eyebrow) { margin-block: 19px 24px; }.story-interface { display: block; height: auto; min-height: 0; margin-top: 58px; padding: 15px; overflow: visible; }.story-interface::before { display: none; }.story-interface-top { padding: 5px 3px 14px; }.story-status { display: none; }.story-board { position: relative; inset: auto; display: block; min-height: 0; margin-top: 12px; padding: 17px; border: 1px solid #2b3540; border-radius: 12px; opacity: 1 !important; transform: none !important; background: #11151b; }.story-board-heading strong { font-size: 22px; }.story-day-timeline { height: 165px; margin-top: 24px; }.story-class { width: 47%; padding: 8px; }.story-class-one { top: 40px; left: 7%; }.story-class-two { top: 101px; left: 44%; width: 42%; }.story-day-summary { grid-template-columns: 1fr; }.story-course-list > div { min-height: 64px; }.story-study-tools { grid-template-columns: 1fr; }.story-study-tools > div { min-height: 0; }.story-study-tools b { margin-top: 18px; }.story-focus { grid-template-columns: auto 1fr; }.story-focus em { display: none; }.story-recovery-list > div { grid-template-columns: 65px 1fr auto 16px; gap: 7px; }.story-progress { display: none; } }
@media (max-width: 640px) { .marketing-nav, .marketing-main, .marketing-footer { width: min(100% - 32px, 1500px); }.hero-story-intro { display: block; padding-block: 68px 72px; }.hero-story-intro .product-visual { min-height: 390px; }.feature-story { padding-block: 68px; } }
@media (prefers-reduced-motion: no-preference) { body.marketing-motion [data-reveal='pending'] { opacity: 0; transform: translate3d(0, 22px, 0); } body.marketing-motion [data-reveal='shown'] { opacity: 1; transform: translate3d(0, 0, 0); transition: opacity .6s ease, transform .7s cubic-bezier(.2, .7, .2, 1); } }

/* Public pages keep their product story readable and easy to tap on a phone. */
@media (max-width: 640px) {
  .marketing-nav { gap: 12px; }.marketing-nav-actions { margin-left: auto; }.marketing-nav-actions .marketing-button { min-height: 42px; padding-inline: 13px; white-space: nowrap; }
  .marketing-actions { align-items: stretch; flex-direction: column; }.marketing-actions .marketing-button { width: 100%; min-height: 50px; }
  .product-visual, .story-interface, .feature-art { max-width: 100%; }
  .marketing-panel, .price-card, .studio-tool-card, .support-grid article { padding: 20px; }
  .page-hero, .hero-story-intro { overflow: hidden; }
}