/* Public website refresh. Shared chrome, with homepage composition scoped below. */
:root {
    --text-xs: .75rem;
    --text-sm: .875rem;
    --text-base: 1rem;
    --container-max: 1280px;
    --container-padding: 40px;
    --header-height: 88px;
}
.skip-link { position: fixed; top: 8px; left: 8px; transform: translateY(-180%); z-index: 10001; background: var(--ink); color: var(--washi); padding: 12px 20px; }
.skip-link:focus { transform: none; }
:focus-visible { outline: 2px solid var(--vermilion); outline-offset: 6px; }
.header { border-bottom: 1px solid var(--hairline); }
.nav-logo-text, .footer-logo-text { letter-spacing: -.055em; }
.nav-links a { font-size: .875rem; letter-spacing: .04em; }
.nav-cta { background: var(--vermilion); color: #fff; border-radius: 5px; letter-spacing: .06em; font-size: .75rem; padding: 14px 20px; }
.nav-cta:hover { background: var(--vermilion-dark); color: #fff; }
.theme-toggle, .mobile-menu-toggle { min-width: 44px; min-height: 44px; }
.text-link { display: inline-flex; align-items: center; gap: 24px; font-size: 1rem; color: var(--ink); border-bottom: 1px solid var(--ink); padding-bottom: 6px; }
.text-link span { font-size: 1.5rem; color: var(--vermilion); transition: transform .2s; }
.text-link:hover span { transform: translate(3px,-3px); }
.art-dark { display: none !important; }
[data-theme="dark"] .art-dark { display: block !important; }
[data-theme="dark"] .art-light { display: none !important; }
.marketing-home .section-title { font-size: clamp(2.25rem,4vw,3.5rem); font-weight: 500; letter-spacing: -.05em; line-height: 1.25; }
.marketing-home .eyebrow { letter-spacing: .15em; font-size: .75rem; }
.marketing-home .hero { min-height: 850px; padding: calc(var(--header-height) + 78px) 0 88px; display: block; isolation: isolate; }
.hero-landscape { position: absolute; inset: 20% 0 0; z-index: -1; background: url('/assets/hero-panorama-1536-e38ee76ca7fb59ec.webp') center bottom / cover no-repeat; opacity: .7; mask-image: linear-gradient(transparent, #000 65%); }
[data-theme="dark"] .hero-landscape { filter: invert(.92) hue-rotate(175deg); opacity: .35; }
.marketing-home .hero-container { display: grid; grid-template-columns: 1.12fr 1fr; gap: 24px; align-items: center; }
.marketing-home .hero-content { padding: 0 0 60px; margin: 0; max-width: none; text-align: left; }
.marketing-home .hero-eyebrow { margin-bottom: 28px; }
.marketing-home .hero-title { font-size: clamp(3.25rem,5.4vw,4.8rem); line-height: 1.13; letter-spacing: -.065em; font-weight: 500; margin-bottom: 28px; }
.marketing-home .hero-title span { color: var(--vermilion); }
.marketing-home .hero-subtitle { margin: 0 0 30px; max-width: 440px; font-size: 1.125rem; line-height: 1.7; }
.marketing-home .hero-cta { justify-content: flex-start; margin-bottom: 18px; gap: 12px; }
.marketing-home .store-badge img { height: 48px; width: auto; }
.marketing-home .hero-stats { justify-content: flex-start; flex-wrap: nowrap; margin-top: 44px; }
.marketing-home .stat { align-items: flex-start; padding: 0 24px; }
.marketing-home .stat:first-child { padding-left: 0; }
.marketing-home .stat-number { font-size: 1.125rem; white-space: nowrap; }
.marketing-home .stat-label { font-size: .75rem; letter-spacing: .02em; text-transform: none; color: var(--ink-secondary); }
.hero-devices { height: 600px; position: relative; margin-left: 10px; }
.marketing-home .phone-frame { border-radius: 38px; padding: 7px; background: #292621; box-shadow: 0 36px 65px -24px #19171080, 0 0 0 1px #ffffff45, inset 0 0 0 2px #79756c; }
.marketing-home .phone-screen { border-radius: 31px; }
.hero-devices .phone-primary { width: 254px; position: absolute; right: 0; top: 5px; transform: rotate(5deg); z-index: 2; }
.hero-devices .phone-secondary { width: 220px; position: absolute; left: 0; top: 96px; transform: rotate(-8deg); }
.hero-devices .phone-screen img { height: auto; aspect-ratio: 1170 / 2532; }
.device-note { position: absolute; left: 0; top: -30px; font-family: var(--font-display); font-size: .875rem; color: var(--ink-secondary); display: flex; align-items: center; gap: 10px; }
.note-rule { width: 28px; height: 1px; background: var(--vermilion); }
.marketing-home .ritual { border-top: 1px solid var(--hairline); padding: 88px 0 100px; background: var(--washi); }
.marketing-home .ritual .section-header { max-width: none; text-align: left; margin-bottom: 58px; }
.marketing-home .ritual-steps { max-width: none; gap: 64px; }
.marketing-home .ritual-steps::before { display: none; }
.marketing-home .ritual-step { text-align: left; padding-top: 20px; border-top: 1px solid var(--hairline); }
.marketing-home .ritual-step-num { padding: 0; background: none; font-size: .875rem; color: var(--vermilion); margin-bottom: 24px; }
.marketing-home .ritual-step-title { font-size: 1.5rem; letter-spacing: -.025em; }
.marketing-home .ritual-step-text { font-size: 1rem; max-width: none; }
.marketing-home .features { padding: 100px 0; background: var(--surface); border-top: 1px solid var(--hairline); }
.marketing-home .feature-heading { max-width: none; display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: end; text-align: left; margin-bottom: 52px; }
.feature-heading .section-subtitle { max-width: 330px; margin-bottom: 20px; font-size: 1.125rem; }
.feature-stories { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; }
.feature-story { min-width: 0; }
.story-art { overflow: hidden; background: var(--washi); aspect-ratio: 1.15; }
.story-art img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.feature-story:hover .story-art img { transform: scale(1.025); }
.story-copy { padding: 26px 0 0; }
.story-copy .eyebrow { color: var(--vermilion); margin-bottom: 12px; }
.story-copy h3, .feature-details h3 { font-family: var(--font-display); font-weight: 500; line-height: 1.35; font-size: 1.65rem; letter-spacing: -.04em; margin-bottom: 16px; }
.story-copy > p:last-child, .feature-details p { color: var(--ink-secondary); font-size: 1rem; line-height: 1.7; }
.premium-note { margin-top: 28px; color: var(--ink-secondary); font-size: .875rem; }
.feature-details { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 44px; border-top: 1px solid var(--hairline); margin-top: 56px; padding-top: 40px; }
.detail-number { display: block; color: var(--vermilion); font-size: .75rem; margin-bottom: 16px; }
.feature-details h3 { font-size: 1.3rem; }
.marketing-home .about { padding: 100px 0 0; overflow: hidden; background: var(--washi-deep); }
.marketing-home .about-content { display: grid; grid-template-columns: 1.1fr 1fr; gap: 100px; align-items: center; }
.marketing-home .about-text { padding-bottom: 100px; }
.marketing-home .about-text p { font-size: 1.0625rem; max-width: 470px; }
.marketing-home .about-text .eyebrow { font-size: .75rem; }
.marketing-home .about-text .text-link { margin-top: 14px; }
.marketing-home .about-image { display: block; position: relative; height: 620px; order: initial; }
.library-preview { width: 310px; margin: 0 auto; border-radius: 30px 30px 0 0; border: 7px solid #292621; box-shadow: 0 30px 70px #221f1b30; }
.image-caption { position: absolute; bottom: 0; left: 0; right: 0; padding: 45px 0 22px; margin: 0; text-align: center; background: linear-gradient(transparent,var(--washi-deep) 60%); font-family: var(--font-display); font-size: 1rem; }
.marketing-home .faq { padding: 100px 0; }
.marketing-home .faq > .container { display: grid; grid-template-columns: .8fr 1.2fr; gap: 80px; }
.marketing-home .faq .section-header { text-align: left; margin: 0; }
.marketing-home .faq-list { width: 100%; }
.marketing-home .faq-question { padding: 24px 0; font-size: 1.0625rem; line-height: 1.5; }
.marketing-home .faq-answer p { font-size: 1rem; }
.marketing-home .cta { position: relative; isolation: isolate; padding: 104px 0; overflow: hidden; border-top: 1px solid var(--hairline); }
.marketing-home .cta::before { content: ''; position: absolute; inset: 0; z-index: -1; background: url('/assets/hero-panorama-1536-e38ee76ca7fb59ec.webp') center bottom / cover; filter: invert(.92) hue-rotate(175deg); opacity: .22; }
.marketing-home .cta-title { font-size: clamp(2.75rem,5.5vw,4.75rem); letter-spacing: -.055em; font-weight: 500; line-height: 1.15; }
.marketing-home .cta-subtitle { max-width: 440px; margin: 24px auto 32px; font-size: 1.0625rem; }
.footer { padding-top: 64px; }
.footer-tagline { font-size: 1rem; }
@media (min-width: 1450px) { .marketing-home .hero { min-height: 900px; } }
@media (max-width: 1100px) {
    :root { --container-padding: 32px; }
    .marketing-home .hero-container { grid-template-columns: 1.15fr 1fr; }
    .marketing-home .hero { min-height: 760px; padding-top: 155px; }
    .marketing-home .hero-title { font-size: clamp(2.6rem,5.3vw,3.7rem); }
    .hero-devices { height: 540px; }
    .hero-devices .phone-primary { width: 220px; }
    .hero-devices .phone-secondary { width: 185px; top: 125px; left: -10px; }
    .marketing-home .stat { padding: 0 14px; }
    .marketing-home .about-content { gap: 48px; }
    .marketing-home .about-text .eyebrow, .marketing-home .about-text .section-title { text-align: left; }
    .marketing-home .faq > .container { gap: 40px; }
}
@media (max-width: 800px) {
    :root { --container-padding: 24px; --header-height: 76px; }
    .marketing-home .hero { padding-top: 122px; padding-bottom: 40px; min-height: 0; }
    .marketing-home .hero-container { grid-template-columns: 1fr; gap: 28px; }
    .marketing-home .hero-content { padding: 0; text-align: center; max-width: 600px; margin: auto; }
    .marketing-home .hero-title { font-size: clamp(2.75rem,8vw,4rem); }
    .marketing-home .hero-subtitle { margin-left: auto; margin-right: auto; }
    .marketing-home .hero-cta, .marketing-home .hero-stats { justify-content: center; }
    .marketing-home .hero-cta { flex-direction: row; }
    .marketing-home .stat { align-items: center; }
    .marketing-home .stat:first-child { padding-left: 14px; }
    .hero-devices { width: 390px; max-width: 100%; height: 555px; margin: 25px auto 0; }
    .hero-devices .phone-primary { right: 10px; }
    .hero-devices .phone-secondary { left: 10px; top: 65px; }
    .device-note { display: none; }
    .hero-landscape { inset: 30% 0 0; }
    .marketing-home .ritual, .marketing-home .features, .marketing-home .faq { padding: 64px 0; }
    .marketing-home .ritual-steps { gap: 24px; }
    .marketing-home .feature-heading { grid-template-columns: 1fr; gap: 8px; }
    .feature-heading .section-subtitle { max-width: 460px; }
    .feature-stories { gap: 20px; grid-template-columns: 1fr; }
    .feature-story { display: grid; grid-template-columns: .8fr 1fr; align-items: center; gap: 24px; padding-bottom: 20px; }
    .story-copy { padding-top: 0; }
    .story-copy h3 { font-size: 1.5rem; }
    .feature-details { gap: 24px; }
    .marketing-home .about { padding-top: 64px; }
    .marketing-home .about-content { grid-template-columns: 1fr; gap: 44px; }
    .marketing-home .about-text { padding-bottom: 0; }
    .marketing-home .about-text p { margin-left: 0; }
    .marketing-home .about-image { height: 530px; }
    .marketing-home .faq > .container { grid-template-columns: 1fr; }
    .marketing-home .cta { padding: 80px 0; }
    .footer-links { grid-template-columns: repeat(3,1fr); text-align: left; gap: 20px; }
}
@media (max-width: 480px) {
    :root { --container-padding: 22px; }
    .nav-logo-text { font-size: 1.6rem; }
    .nav { gap: 10px; }
    .marketing-home .hero-title { font-size: clamp(2.5rem,10vw,3rem); }
    .marketing-home .hero-eyebrow { font-size: .6875rem; letter-spacing: .09em; }
    .marketing-home .hero-subtitle { font-size: 1.0625rem; }
    .marketing-home .hero-stats { margin-top: 30px; }
    .marketing-home .stat { padding: 0 10px; }
    .marketing-home .stat:first-child { padding-left: 0; }
    .marketing-home .stat:last-child { padding-right: 0; }
    .marketing-home .stat-number { font-size: 1rem; }
    .marketing-home .stat-label { font-size: .75rem; }
    .hero-devices { height: 480px; }
    .hero-devices .phone-primary { width: 195px; }
    .hero-devices .phone-secondary { width: 165px; top: 70px; left: 2px; }
    .marketing-home .phone-frame { border-radius: 28px; padding: 5px; }
    .marketing-home .phone-screen { border-radius: 23px; }
    .feature-story { display: block; margin-bottom: 20px; }
    .story-art { aspect-ratio: 1.35; }
    .story-copy { padding-top: 24px; }
    .feature-details { grid-template-columns: 1fr; gap: 32px; }
    .footer-links { grid-template-columns: repeat(2,1fr); row-gap: 32px; }
    .marketing-home .cta-buttons { flex-direction: row; }
}
@media (prefers-reduced-motion: reduce) {
    .story-art img, .text-link span { transition: none; }
}
.brand-mark { width: 36px; height: 36px; object-fit: contain; }
.nav-logo-text { font-size: 1.65rem; }
.footer-logo { display: inline-flex; align-items: center; gap: 12px; }
.marketing-home .hero-title { font-size: clamp(3.25rem,4.8vw,4.3rem); }
.faq-item.active .faq-answer { max-height: none; }
@media (max-width: 1100px) and (min-width: 801px) { .marketing-home .hero-title { font-size: clamp(2.6rem,4.8vw,3.5rem); } }
@media (max-width: 800px) { .marketing-home .hero-title { font-size: clamp(2.75rem,7.6vw,4rem); } }
@media (max-width: 480px) {
    .marketing-home .hero-title { font-size: clamp(2.25rem,9.3vw,2.75rem); }
    .nav-logo-text { font-size: 1.4rem; }
    .nav-logo { gap: 7px; }
    .brand-mark { width: 30px; height: 30px; }
}
.marketing-home h1, .marketing-home h2, .marketing-home h3 { overflow-wrap: anywhere; }
@media (min-width: 1101px) {
    .marketing-home .hero-title { font-size: 3.8rem; }
    .hero-landscape { opacity: .45; }
}
@media (max-width: 900px) {
    .nav-links, .nav-cta { display: none; }
    .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; }
    .nav-actions { margin-left: auto; gap: 4px; }
}
@media (max-width: 480px) {
    .nav-logo-text { font-size: 22px; }
}
.modal { transition: opacity .3s ease; }
.marketing-home .hero-content, .marketing-home .hero-container > *, .marketing-home .feature-heading > * { min-width: 0; }
@media (max-width: 800px) {
    .marketing-home .hero-container { grid-template-columns: minmax(0,1fr); }
    .marketing-home .hero-content { width: 100%; }
    .marketing-home .hero-stats { flex-wrap: wrap; gap: 16px 0; }
    .marketing-home .stat-number { white-space: normal; }
}

/* 1.0.3: product screens stay light, matching the app's default appearance. */
.iphone-download { display: inline-flex; align-items: center; justify-content: center; gap: 24px; min-height: 48px; text-transform: none; letter-spacing: .02em; }
.hero-access-note { margin: -4px 0 26px; font-size: .875rem; color: var(--ink-secondary); }
.ritual-account-note { margin-top: 36px; color: var(--ink-secondary); font-size: .875rem; }
.story-art.story-device { aspect-ratio: 1 / 1.2; padding: 28px 34px 0; border: 1px solid var(--hairline); }
.story-device img { height: auto; object-fit: initial; border: 6px solid #292621; border-radius: 26px 26px 0 0; }
.subscription-note { max-width: 590px; margin: 24px auto 0; font-size: .875rem; line-height: 1.7; color: var(--night-text); }
@media (max-width: 800px) { .story-art.story-device { padding: 18px 20px 0; } }
@media (max-width: 480px) { .story-art.story-device { padding: 24px 40px 0; aspect-ratio: 1 / 1.05; } }
@media (max-width: 800px) {
    .marketing-home .hero-stats { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 0; align-items: start; }
    .marketing-home .stat { min-width: 0; padding: 0 10px; }
    .marketing-home .stat-number { overflow-wrap: anywhere; }
}
/* Root-relative container queries also adapt when visitors enlarge text. */
.header { container-type: inline-size; container-name: public-header; }
.marketing-home .hero { container-type: inline-size; container-name: public-hero; }
@container public-header (max-width: 70rem) {
    .nav-links, .nav-cta { display: none; }
    .mobile-menu-toggle { display: flex; align-items: center; justify-content: center; }
    .nav-actions { margin-left: auto; gap: 4px; }
}
@container public-hero (max-width: 53rem) {
    .marketing-home .hero-container { grid-template-columns: minmax(0,1fr); gap: 28px; }
    .marketing-home .hero-content { width: 100%; max-width: 960px; margin: auto; text-align: center; padding-bottom: 0; }
    .marketing-home .hero-subtitle { margin-left: auto; margin-right: auto; }
    .marketing-home .hero-cta, .marketing-home .hero-stats { justify-content: center; }
    .hero-devices { width: 390px; max-width: 100%; margin: 25px auto 0; }
    .device-note { display: none; }
}

.marketing-home .hero-title { hyphens: auto; }
.marketing-home .about-image { overflow: hidden; }