.landing-page { --landing-canvas:#f7ecee; --landing-ink:#302c2b; --landing-muted:#695b60; --landing-line:#ddc9cd; --landing-dark:#382e32; background:var(--landing-canvas); color:var(--landing-ink); padding-left:env(safe-area-inset-left); padding-right:env(safe-area-inset-right); }
.landing-page h1,.landing-page h2,.landing-page h3 { font-weight:650; text-align:left; }
.landing-page a:focus-visible,.landing-page button:focus-visible,.story-track:focus-visible { outline:3px solid #8b4c5b; outline-offset:5px; }
.landing-container { width:min(1180px,calc(100% - 64px)); margin-inline:auto; }
.landing-skip { position:fixed; z-index:50; left:20px; top:-90px; padding:12px 18px; background:var(--landing-dark); color:white; }
.landing-skip:focus { top:8px; }
.landing-header { width:min(1180px,calc(100% - 64px)); margin-inline:auto; display:flex; align-items:center; gap:32px; min-height:96px; border-bottom:1px solid var(--landing-line); }
.landing-header .brand { font-size:20px; min-height:44px; flex-shrink:0; }
.landing-header .brand-mark,.landing-header .brand-mark img { width:40px; height:40px; box-shadow:none; }
.landing-header nav { display:flex; align-items:center; gap:30px; margin-left:auto; }
.landing-header nav a { display:inline-flex; align-items:center; min-height:44px; color:var(--landing-muted); font-size:14px; font-weight:750; text-decoration:none; }
.landing-header nav a:hover { color:var(--landing-ink); }
.landing-nav-cta { display:inline-flex; align-items:center; flex-shrink:0; min-height:44px; text-decoration:none; }
.landing-nav-cta img { height:44px; width:auto; }
.landing-hero { display:grid; grid-template-columns:1fr 1.15fr; align-items:center; gap:40px; padding-block:64px 76px; }
.landing-eyebrow { color:#875260; font-size:14px; font-weight:850; margin:0 0 22px; }
.landing-hero h1 { font-size:clamp(48px,5.2vw,73px); line-height:1.06; max-width:11ch; letter-spacing:-1.4px; }
.landing-lead { color:var(--landing-muted); font-size:21px; font-weight:600; line-height:1.55; max-width:39ch; margin:28px 0 0; }
.landing-actions { display:flex; align-items:center; flex-wrap:wrap; gap:24px; margin-top:32px; }
.landing-text-link { display:inline-flex; align-items:center; min-height:44px; font-size:15px; font-weight:800; text-underline-offset:6px; text-decoration-thickness:1px; }
.landing-facts { display:flex; flex-wrap:wrap; gap:10px 22px; padding:0; margin:35px 0 0; color:var(--landing-muted); font-size:13px; list-style:none; }
.landing-facts li { display:flex; align-items:center; gap:8px; }
.landing-facts li::before { content:""; height:5px; width:5px; border-radius:50%; background:#9c6675; }
.landing-hero-product { position:relative; margin:0; min-width:0; text-align:center; }
.landing-device { --device-width:260px; --device-border:calc(var(--device-width) * 25 / 1116); width:var(--device-width); aspect-ratio:1116 / 2420; background:#fbf7f8; border:var(--device-border) solid #fff; border-radius:calc(var(--device-width) * 162 / 1116); overflow:hidden; box-shadow:none; }
.landing-device img { display:block; width:100%; height:100%; object-fit:cover; border-radius:calc(var(--device-width) * 137 / 1116); }
.landing-device picture { display:block; width:100%; height:100%; }
.landing-hero-fan { position:relative; width:100%; height:620px; }
.landing-hero-product .landing-device { position:absolute; top:50%; left:50%; }
.hero-feed--front { --device-width:250px; transform:translate(-50%,-50%); z-index:3; }
.hero-feed--left { --device-width:220px; transform:translate(calc(-50% - 130px),calc(-50% + 18px)) rotate(-10deg); z-index:1; }
.hero-feed--right { --device-width:220px; transform:translate(calc(-50% + 130px),calc(-50% + 18px)) rotate(10deg); z-index:2; }
.landing-hero-product figcaption { color:var(--landing-muted); font-size:13px; margin-top:5px; }
.landing-story-section { padding-block:90px 60px; border-block:1px solid var(--landing-line); background:transparent; scroll-margin-top:28px; }
.landing-section-heading { max-width:720px; margin-bottom:44px; }
.landing-section-heading h2 { font-size:clamp(42px,4.7vw,62px); line-height:1.08; letter-spacing:-.8px; }
.landing-section-heading>p:last-child { max-width:48ch; color:var(--landing-muted); font-size:19px; line-height:1.6; margin:25px 0 0; }
.story-mobile-hint { display:none; }
.story-layout { position:relative; display:grid; grid-template-columns:1.05fr 1fr; gap:75px; align-items:start; }
.story-track { min-width:0; }
.story-step { min-height:650px; display:grid; grid-template-columns:1fr 1fr; align-items:center; gap:35px; padding-block:60px; border-top:1px solid var(--landing-line); scroll-margin-block:40px; }
.story-copy h3 { font-size:43px; line-height:1.1; letter-spacing:-.6px; margin:0; }
.story-label { color:#875260; font-size:14px; font-weight:850; margin:0 0 20px; }
.story-copy>p:not(.story-label) { color:var(--landing-muted); font-size:19px; line-height:1.65; margin:25px 0 0; max-width:36ch; }
.story-copy ul { list-style:none; padding:0; margin:24px 0 0; font-size:15px; color:var(--landing-ink); }
.story-copy li { display:flex; align-items:start; gap:11px; margin-top:10px; }
.story-copy li::before { content:"✓"; color:#80565d; font-weight:900; }
.story-copy .landing-text-link { display:inline-flex; margin-top:26px; }
.story-inline-media { --device-width:230px; max-width:100%; margin-inline:auto; }
.story-stage { display:none; }
.story-navigation { display:none; }
/* Every feature keeps its image in the document when scripting is unavailable. */
.feature-story:not([data-enhanced]) .story-layout { display:block; }
.feature-story[data-enhanced] .story-step { display:flex; min-height:690px; }
.feature-story[data-enhanced] .story-inline-media { display:none; }
.feature-story[data-enhanced] .story-stage { display:block; position:sticky; top:32px; padding-top:15px; }
.story-stage-surface { display:grid; place-items:center; background:transparent; border:0; padding:28px 18px; }
.story-frames { position:relative; --device-width:min(280px,calc((100vh - 288px) * 1116 / 2420)); }
.story-frames picture { position:absolute; inset:0; }
.story-frames img { position:absolute; inset:0; height:100%; width:100%; object-fit:cover; opacity:0; visibility:hidden; transition:opacity 180ms ease; }
.story-frames img.is-active { opacity:1; visibility:visible; }
.feature-story[data-enhanced] .story-navigation { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:12px; padding:22px 2px 0; }
.story-dots { display:flex; flex:1 1 100%; flex-wrap:wrap; justify-content:center; gap:0; }
.story-dots a { display:flex; align-items:center; gap:6px; color:var(--landing-muted); font-size:11px; font-weight:800; text-decoration:none; min-width:44px; min-height:44px; justify-content:center; padding-inline:5px; }
.story-dot { display:block; height:6px; width:6px; border:1px solid #8b6470; border-radius:50%; }
.story-dots a[aria-current] { color:var(--landing-ink); }
.story-dots a[aria-current] .story-dot { background:var(--landing-dark); border-color:var(--landing-dark); }
.story-arrows { display:flex; align-items:center; gap:9px; margin-inline:auto; }
.story-arrows button { height:44px; width:44px; border:1px solid var(--landing-line); border-radius:50%; background:#fff; color:var(--landing-ink); font:inherit; cursor:pointer; }
.story-arrows button:disabled { opacity:.35; cursor:default; }
.story-arrows [data-story-count] { color:var(--landing-muted); font-size:11px; min-width:26px; text-align:center; }
.landing-guides { padding-block:100px; }
.landing-guides-heading { display:flex; justify-content:space-between; align-items:end; gap:24px; margin-bottom:40px; }
.landing-guides h2 { font-size:clamp(36px,4vw,50px); line-height:1.1; }
.landing-guide-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:24px; }
.landing-guide-grid>a { display:flex; flex-direction:column; align-items:start; text-decoration:none; background:#fff; border:1px solid #e5d3d8; border-radius:24px; padding:28px; }
.landing-guide-mascot { width:96px; height:96px; object-fit:contain; margin-bottom:24px; }
.landing-guide-grid>a:hover h3 { text-decoration:underline; text-underline-offset:5px; }
.landing-guide-grid p { color:#875260; font-size:13px; font-weight:800; margin:0 0 24px; }
.landing-guide-grid h3 { font-size:29px; line-height:1.2; margin-bottom:34px; }
.landing-guide-grid span { color:var(--landing-muted); font-size:14px; font-weight:750; margin-top:auto; }
.landing-faq { display:grid; grid-template-columns:.9fr 1.1fr; gap:90px; padding-block:0 100px; }
.landing-faq h2 { font-size:42px; line-height:1.1; max-width:9ch; }
.landing-faq details { background:#fff; border:1px solid #e5d3d8; border-radius:18px; padding:22px 24px; margin-bottom:14px; }
.landing-faq details:last-child { margin-bottom:0; }
.landing-faq summary { min-height:44px; align-items:center; display:flex; justify-content:space-between; gap:20px; list-style:none; cursor:pointer; font-weight:800; font-size:17px; }
.landing-faq summary::-webkit-details-marker { display:none; }
.landing-faq summary::after { content:"+"; font-size:22px; font-weight:600; line-height:1; flex-shrink:0; }
.landing-faq details[open] summary::after { content:"−"; }
.landing-faq details p { color:var(--landing-muted); font-size:16px; line-height:1.7; max-width:48ch; }
.landing-download { background:var(--landing-dark); color:#fff9f6; }
.landing-download-inner { display:flex; align-items:center; justify-content:space-between; gap:80px; padding-block:75px; }
.landing-download .landing-eyebrow { color:#e8bbc8; }
.landing-download h2 { font-size:clamp(42px,4.6vw,62px); line-height:1.08; }
.landing-download p:not(.landing-eyebrow) { color:#e7d5dc; font-size:19px; line-height:1.6; max-width:37ch; margin:25px 0 30px; }
.landing-download-mascot { background:#f7ecee; border-radius:20px; padding:25px; width:240px; height:auto; }
.landing-footer { display:flex; justify-content:space-between; gap:45px; padding-block:44px; }
.landing-footer .brand { min-height:44px; font-family:"Fraunces",Georgia,serif; font-size:26px; font-weight:700; }
.landing-footer p,.landing-footer small { color:var(--landing-muted); font-size:13px; }
.landing-footer p { margin:8px 0 18px; }
.landing-footer nav { display:flex; align-content:start; flex-wrap:wrap; justify-content:end; gap:16px 24px; max-width:500px; padding-top:8px; }
.landing-footer nav a { display:inline-flex; align-items:center; min-height:44px; min-width:44px; color:var(--landing-muted); font-size:13px; font-weight:750; text-decoration:none; }
@media (max-width:1000px) {
 .landing-header nav { gap:18px; }
 .landing-hero { gap:40px; }
 .landing-hero h1 { font-size:59px; }
 .landing-lead { font-size:19px; }
 .landing-hero { grid-template-columns:1fr; }
 .landing-hero-copy { max-width:650px; }
 .landing-hero-product { width:min(100%,600px); margin-inline:auto; }
 .landing-hero-fan { height:580px; }
 .story-layout { gap:40px; }
 .story-copy h3 { font-size:38px; }
 .story-copy>p:not(.story-label) { font-size:18px; }
 .story-dots { gap:0; }
 .story-dots a span:last-child { display:none; }
 .landing-faq { gap:50px; }
}
@media (max-width:720px), (max-width:1000px) and (max-height:500px) and (orientation:landscape) {
 .landing-container,.landing-header { width:calc(100% - 40px); }
 .landing-header { min-height:80px; gap:14px; }
 .landing-header .brand { font-size:18px; gap:8px; }
 .landing-header .brand-mark,.landing-header .brand-mark img { width:34px; height:34px; }
 .landing-header nav { gap:0; margin-left:auto; }
 .landing-header nav a { display:none; }
 .landing-header nav a[href="/guides"] { display:inline-flex; font-size:13px; }
 .landing-hero { grid-template-columns:1fr; gap:36px; padding-block:45px 52px; }
 .landing-hero h1 { font-size:clamp(43px,9.7vw,62px); max-width:12ch; letter-spacing:-.8px; }
 .landing-eyebrow { font-size:13px; margin-bottom:19px; }
 .landing-lead { font-size:18px; max-width:37ch; margin-top:22px; }
 .landing-actions { margin-top:25px; gap:19px; }
 .landing-actions .app-store-badge img { height:46px; }
 .landing-text-link { display:inline-flex; align-items:center; min-height:44px; font-size:14px; }
 .landing-facts { gap:9px 15px; margin-top:25px; font-size:12px; }
 .landing-hero-fan { height:480px; }
 .hero-feed--front { --device-width:190px; }
 .hero-feed--left { --device-width:152px; transform:translate(calc(-50% - 76px),calc(-50% + 16px)) rotate(-10deg); }
 .hero-feed--right { --device-width:152px; transform:translate(calc(-50% + 76px),calc(-50% + 16px)) rotate(10deg); }
 .landing-hero-product figcaption { font-size:12px; margin-top:0; }
 .landing-story-section { padding-block:55px 40px; overflow:hidden; }
 .landing-section-heading { margin-bottom:30px; }
 .landing-section-heading h2 { font-size:39px; letter-spacing:-.5px; }
 .landing-section-heading>p:last-child { font-size:17px; margin-top:20px; }
 .story-desktop-hint { display:none; }
 .landing-page:has([data-enhanced]) .story-mobile-hint { display:inline; }
 .story-layout { display:block; }
 .feature-story[data-enhanced] .story-track { display:flex; overflow-x:auto; overscroll-behavior-x:contain; scroll-snap-type:x mandatory; scrollbar-width:thin; scrollbar-color:#b38b98 transparent; gap:18px; padding-bottom:18px; }
 .story-step,.feature-story[data-enhanced] .story-step { display:flex; flex-direction:column; align-items:stretch; min-height:0; gap:25px; padding:28px 22px; border:1px solid var(--landing-line); border-radius:16px; background:#fff; }
 .feature-story[data-enhanced] .story-step { flex:0 0 88%; scroll-snap-align:center; scroll-margin:0; }
 .story-step+.story-step { margin-top:25px; }
 .feature-story[data-enhanced] .story-step+.story-step { margin-top:0; }
 .story-copy h3 { font-size:32px; letter-spacing:-.3px; }
 .story-label { font-size:12px; margin-bottom:14px; }
 .story-copy>p:not(.story-label) { font-size:16px; line-height:1.55; margin-top:18px; }
 .story-copy ul { display:none; }
 .story-copy .landing-text-link { display:inline-flex; align-items:center; min-height:44px; font-size:13px; margin-top:16px; }
 .story-inline-media,.feature-story[data-enhanced] .story-inline-media { display:block; --device-width:200px; margin-top:auto; }
 .feature-story[data-enhanced] .story-stage { position:static; padding-top:0; }
 .story-stage-surface { display:none; }
 .feature-story[data-enhanced] .story-navigation { padding-top:15px; }
 .story-dots { gap:0; }
 .story-dots a span:last-child { display:none; }
 .story-dot { width:7px; height:7px; }
 .story-arrows { gap:8px; }
 .story-arrows button { height:44px; width:44px; }
 .landing-guides { padding-block:60px; }
 .landing-guides-heading { display:block; margin-bottom:28px; }
 .landing-guides-heading>.landing-text-link { display:inline-flex; margin-top:20px; }
 .landing-guides h2 { font-size:36px; }
 .landing-guide-grid { grid-template-columns:1fr; gap:18px; }
 .landing-guide-grid>a { padding:26px; }
 .landing-guide-mascot { width:80px; height:80px; margin-bottom:20px; }
 .landing-guide-grid p { margin-bottom:14px; }
 .landing-guide-grid h3 { font-size:27px; max-width:25ch; margin-bottom:22px; }
 .landing-faq { grid-template-columns:1fr; gap:30px; padding-bottom:60px; }
 .landing-faq h2 { font-size:35px; max-width:none; }
 .landing-faq summary { font-size:16px; }
 .landing-download-inner { gap:30px; padding-block:50px; align-items:start; }
 .landing-download h2 { font-size:39px; }
 .landing-download p:not(.landing-eyebrow) { font-size:17px; }
 .landing-download-mascot { display:none; }
 .landing-footer { flex-direction:column; gap:24px; padding-block:35px; }
 .landing-footer nav { justify-content:start; gap:13px 22px; }
}
@media (max-width:360px) { .landing-container,.landing-header { width:calc(100% - 32px); } .landing-header nav { display:none; } .landing-nav-cta { margin-left:auto; } .landing-hero h1 { font-size:42px; } .landing-facts { gap:10px; font-size:11px; } .story-step,.feature-story[data-enhanced] .story-step { padding:24px 17px; } .story-copy h3 { font-size:29px; } .story-inline-media,.feature-story[data-enhanced] .story-inline-media { --device-width:164px; } .landing-hero-fan { height:430px; } .hero-feed--front { --device-width:164px; } .hero-feed--left { --device-width:128px; transform:translate(calc(-50% - 68px),calc(-50% + 16px)) rotate(-10deg); } .hero-feed--right { --device-width:128px; transform:translate(calc(-50% + 68px),calc(-50% + 16px)) rotate(10deg); } }
@media (prefers-reduced-motion:reduce) { .landing-page { scroll-behavior:auto; } .story-frames img { transition:none; } }

@media (min-width:1001px) and (max-width:1150px) { .hero-feed--front { --device-width:230px; } .hero-feed--left { --device-width:200px; transform:translate(calc(-50% - 112px),calc(-50% + 18px)) rotate(-10deg); } .hero-feed--right { --device-width:200px; transform:translate(calc(-50% + 112px),calc(-50% + 18px)) rotate(10deg); } }

@media (max-width:400px) {
 .landing-header nav { display:none; }
 .landing-nav-cta { margin-left:auto; }
 .feature-story[data-enhanced] .story-navigation { justify-content:center; gap:8px; }
}
@media (max-width:1000px) and (max-height:500px) and (orientation:landscape) {
 .landing-hero { grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:24px; padding-block:32px; }
 .landing-hero h1 { font-size:clamp(34px,4.5vw,43px); }
 .landing-lead { font-size:16px; }
 .landing-hero-fan { height:360px; }
 .hero-feed--front { --device-width:148px; }
 .hero-feed--left { --device-width:116px; transform:translate(calc(-50% - 52px),calc(-50% + 12px)) rotate(-10deg); }
 .hero-feed--right { --device-width:116px; transform:translate(calc(-50% + 52px),calc(-50% + 12px)) rotate(10deg); }
 .story-step,.feature-story[data-enhanced] .story-step { display:grid; grid-template-columns:minmax(0,1fr) auto; align-items:center; padding:24px; }
 .story-copy h3 { font-size:28px; }
 .story-copy>p:not(.story-label) { font-size:16px; }
 .story-inline-media,.feature-story[data-enhanced] .story-inline-media { --device-width:148px; margin-top:0; }
}

.story-copy>p.story-note { color:var(--landing-muted); font-size:14px; line-height:1.5; margin-top:18px; }
.landing-more { padding-top:76px; }
.landing-more h2 { font-size:clamp(34px,4vw,50px); line-height:1.1; margin-bottom:32px; }
.landing-more-grid { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:20px; }
.landing-more-grid article { background:#fff; border:1px solid #e5d3d8; border-radius:24px; padding:28px; }
.landing-more-grid h3 { font-size:25px; line-height:1.2; margin:0 0 18px; }
.landing-more-grid p { color:var(--landing-muted); font-size:16px; line-height:1.65; margin:0; }
@media (max-width:1000px) { .landing-more-grid { grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:600px) { .landing-more { padding-top:55px; } .landing-more-grid { grid-template-columns:1fr; gap:16px; } .landing-more-grid article { padding:26px; } }
@media (max-width:360px) { .story-dots { max-width:176px; margin-inline:auto; } }

@media (max-width:1150px) { .story-dots a span:last-child { display:none; } }
.landing-quiz { display: flex; align-items: center; justify-content: space-between; gap: 36px; margin-block: 56px 88px; padding: 36px 44px; background: #fff; border: 1px solid #d9c5cb; border-radius: 24px; }
.landing-quiz > div { max-width: 650px; }
.landing-quiz h2 { text-align: left; font-size: clamp(30px, 4vw, 44px); margin: 16px 0; }
.landing-quiz p:not(.landing-eyebrow) { color: #695b60; font-size: 18px; line-height: 1.7; margin-bottom: 22px; }
.landing-quiz img { width: 160px; height: auto; flex: 0 0 160px; }
@media (max-width: 760px) { .landing-quiz { width: calc(100% - 40px); padding: 28px; gap: 16px; } .landing-quiz img { display: none; } }