/* Landing-only styles; policy and support pages use site.css. */
.landing { --page: #0b0d16; --ink: #f2f3ff; --muted: #a1a5b9; --violet: #b7abff; --mint: #a6edd6; background: var(--page); -webkit-font-smoothing: antialiased; overflow-x: clip; }
.landing .shell { width: min(1240px, calc(100% - 96px)); }
.landing h1, .landing h2, .landing h3 { text-wrap: balance; }
.landing a, .motion-toggle { -webkit-tap-highlight-color: transparent; }
.landing section[id], .landing div[id] { scroll-margin-top: 100px; }
.skip-link { position: fixed; top: -80px; left: 20px; z-index: 20; padding: 12px 20px; background: var(--mint); color: var(--page); border-radius: 8px; }
.skip-link:focus { top: 12px; }
.site-header { position: sticky; top: 0; z-index: 10; background: #0b0d16f0; border-bottom: 1px solid #ffffff12; }
.landing-nav { height: 80px; display: flex; align-items: center; justify-content: space-between; gap: 24px; }
.landing .brand { gap: 10px; font-size: 24px; letter-spacing: -.06em; }
.brand img { border-radius: 9px; }
.landing nav { align-items: center; gap: 30px; font-size: 12px; font-weight: 550; }
.landing nav a { display: inline-flex; align-items: center; min-height: 44px; }
.landing nav .nav-cta { color: var(--ink); border: 1px solid #404352; border-radius: 30px; min-height: 36px; padding: 0 17px; gap: 18px; }
.story { display: grid; grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr); column-gap: 16px; position: relative; }
.chapter { grid-column: 1; min-height: 86svh; display: flex; flex-direction: column; justify-content: center; align-items: flex-start; padding: 76px 0; position: relative; z-index: 2; }
.chapter-intro { grid-row: 1; min-height: calc(100svh - 80px); }
.chapter[data-chapter="1"] { grid-row: 2; }
.chapter[data-chapter="2"] { grid-row: 3; }
.landing .eyebrow { font-size: 10px; letter-spacing: .17em; font-weight: 650; color: var(--violet); display: flex; align-items: center; gap: 10px; margin-bottom: 28px; }
.status-dot { display: inline-block; width: 5px; height: 5px; background: var(--mint); border-radius: 100%; box-shadow: 0 0 12px #a6edd640; flex: 0 0 auto; }
.landing h1 { font-size: clamp(60px, 6.65vw, 94px); letter-spacing: -.055em; line-height: 1.02; font-weight: 620; margin: 0 0 30px; }
.landing h1 span, .chapter h2 span { color: var(--violet); }
.chapter h2 { font-size: clamp(44px, 4.7vw, 68px); line-height: 1.06; font-weight: 570; letter-spacing: -.065em; margin-bottom: 26px; }
.chapter-copy { max-width: 365px; font-size: 16px; line-height: 1.75; color: var(--muted); margin-bottom: 30px; }
.primary-link { display: flex; align-items: center; justify-content: space-between; gap: 44px; min-height: 49px; padding: 0 22px; border-radius: 40px; background: var(--mint); color: #12222a; text-decoration: none; font-size: 13px; font-weight: 650; transition: background .2s; }
.primary-link:hover { background: #c9ffeb; }
.primary-link span { font-size: 20px; }
.platform-note { font-size: 11px; color: var(--muted); margin: 18px 0 0; }
.scroll-cue { display: flex; align-items: center; gap: 12px; font-size: 9px; letter-spacing: .08em; color: var(--muted); margin-top: 66px; }
.scroll-cue > span { width: 17px; height: 26px; border: 1px solid #65687e; border-radius: 10px; position: relative; }
.scroll-cue > span::after { content: ""; position: absolute; width: 2px; height: 5px; top: 5px; left: 6px; background: var(--violet); border-radius: 1px; }
.chapter-number { color: #989db4; }
.pro-tag { padding: 2px 5px; border: 1px solid #62617a; border-radius: 4px; font-size: 8px; letter-spacing: .08em; }
.chapter-detail { display: flex; align-items: center; gap: 14px; font-size: 12px; color: #cbc7e9; }
.chapter-detail > span:not(.tiny-wave) { font-size: 24px; color: var(--mint); }
.device-scene { grid-column: 2; grid-row: 1 / 4; position: sticky; align-self: start; top: 80px; height: calc(100svh - 80px); min-height: 580px; max-height: 960px; margin: 0; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; isolation: isolate; }
.scene-atmosphere { position: absolute; inset: 0; overflow: clip; display: grid; place-items: center; z-index: -1; pointer-events: none; }
.scene-glow { position: absolute; width: 110%; height: 80%; border-radius: 50%; background: radial-gradient(ellipse, #56518930 0%, #3c315612 45%, transparent 72%); z-index: -1; pointer-events: none; }
.orbit { position: absolute; width: 90%; height: 48%; border: 1px solid #77779e13; border-radius: 50%; transform: rotate(-32deg); z-index: -1; pointer-events: none; }
.orbit-two { width: 100%; height: 54%; }
.device-canvas { position: relative; width: 540px; height: 680px; perspective: 1300px; transform: scale(.9); }
.device { position: absolute; transform-style: preserve-3d; }
.phone { width: 274px; height: 589px; left: 66px; top: 32px; transform: translate3d(0, 0, 0) rotateX(7deg) rotateY(-14deg) rotateZ(-8deg); }
.phone-rim { height: 100%; padding: 7px; border: 2px solid #a3a5b4; border-radius: 45px; background: linear-gradient(115deg, #858593, #171923 15%, #1d1e2a 78%, #797b87); box-shadow: 2px 0 0 #5a5a6a, 5px 2px 0 #30323f, 9px 5px 0 #13151f, 24px 36px 50px #0007; }
.phone-screen { height: 100%; overflow: hidden; border-radius: 35px; background: #0b0e17; }
.phone-screen img { display: block; width: 100%; height: 100%; object-fit: cover; }
.phone-button { position: absolute; left: -4px; top: 103px; width: 3px; height: 24px; border-radius: 2px 0 0 2px; background: #747582; }
.phone-button-two { top: 146px; height: 40px; }
.phone-button-three { top: 197px; height: 40px; }
.watch { width: 192px; height: 232px; right: 13px; top: 365px; transform: translate3d(0, 0, 70px) rotateX(8deg) rotateY(-17deg) rotateZ(13deg); }
.watch-case { position: relative; z-index: 1; width: 100%; height: 100%; padding: 8px; border-radius: 47px; background: linear-gradient(120deg, #d2cdd1, #625e65 25%, #201e27 51%, #a19ba4 80%, #ddd7dd); border: 1px solid #9d959e; box-shadow: 3px 2px 0 #716c77, 7px 4px 0 #302d36, 18px 20px 28px #0008; }
.watch-screen { height: 100%; background: #080910; border: 2px solid #090910; border-radius: 37px; padding: 12px 12px 8px; overflow: hidden; color: #f3f1ff; font-family: -apple-system, BlinkMacSystemFont, sans-serif; }
.watch-strap { position: absolute; width: 117px; height: 136px; left: 37px; background: repeating-linear-gradient(90deg, #6f6c87 0, #6f6c87 2px, #78748e 3px, #716d88 5px); border: 2px solid #817b99; box-shadow: inset 9px 0 10px #1b153633, inset -9px 0 10px #1b153644; }
.strap-top { bottom: calc(100% - 28px); border-radius: 39px 39px 12px 12px; transform: rotateX(24deg); }
.strap-bottom { top: calc(100% - 28px); border-radius: 10px 10px 43px 43px; height: 123px; transform: rotateX(-24deg); }
.watch-crown { position: absolute; right: -12px; top: 56px; width: 15px; height: 33px; border-radius: 5px; background: repeating-linear-gradient(0deg, #b2acb3 0, #b2acb3 2px, #524c59 3px, #524c59 4px); border-right: 2px solid #b7b1bd; }
.watch-side-button { position: absolute; right: -5px; top: 119px; width: 7px; height: 41px; background: #716b78; border-radius: 3px; }
.watch-status { display: flex; justify-content: space-between; font-size: 9px; margin: 0 3px 13px; font-weight: 600; }
.watch-status > :first-child { color: var(--violet); }
.watch-now { display: flex; align-items: center; gap: 5px; font-size: 6px; letter-spacing: .1em; color: var(--mint); margin-bottom: 7px; }
.tiny-wave { display: inline-flex; align-items: center; gap: 2px; height: 18px; color: var(--mint); }
.tiny-wave i { width: 2px; height: 5px; background: currentColor; border-radius: 2px; }
.tiny-wave i:nth-child(2), .tiny-wave i:nth-child(4) { height: 11px; }
.tiny-wave i:nth-child(3) { height: 17px; }
.watch-now .tiny-wave { height: 10px; transform: scale(.65); transform-origin: left; width: 11px; }
.watch-title { font-size: 19px; line-height: 1.06; letter-spacing: -.04em; font-weight: 650; }
.watch-author { font-size: 7px; color: #b6b0c6; margin: 6px 0 10px; }
.watch-progress { height: 3px; border-radius: 4px; background: #35323f; }
.watch-progress > span { display: block; width: 58%; height: 100%; background: var(--mint); border-radius: inherit; }
.watch-times { display: flex; justify-content: space-between; font-size: 6px; color: #aaa6b7; margin-top: 4px; }
.watch-controls { display: flex; align-items: center; justify-content: space-around; margin-top: 7px; }
.watch-play { display: flex; align-items: center; justify-content: center; gap: 4px; width: 35px; height: 35px; border-radius: 50%; background: var(--violet); }
.watch-play i { display: block; width: 3px; height: 12px; background: #141221; border-radius: 1px; }
.skip-transport { font-size: 28px; line-height: 1; position: relative; }
.skip-transport small { position: absolute; font-size: 7px; top: 12px; left: 9px; }
.scene-caption { position: absolute; bottom: 36px; left: 12%; display: flex; align-items: center; gap: 12px; font-size: 9px; letter-spacing: .07em; color: #a3a4b7; }
.caption-line { width: 24px; height: 1px; background: #78728e; }
.motion-toggle { position: absolute; bottom: 24px; right: 0; display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 10px; border-radius: 30px; border: 1px solid #444253; color: #b7b2ca; font-size: 9px; background: #0f111c; cursor: pointer; }
.motion-toggle[hidden] { display: none; }
.essentials { position: relative; z-index: 3; padding: 108px 0 0; background: #f0f1f8; color: #1b1e32; border-radius: 40px 40px 0 0; }
.section-heading { margin-bottom: 60px; }
.landing .section-heading .eyebrow { color: #635591; }
.section-heading h2 { font-size: clamp(36px, 4.2vw, 58px); line-height: 1.08; font-weight: 580; letter-spacing: -.06em; margin-bottom: 20px; }
.section-heading h2 span { color: #79748a; }
.section-heading > p:last-child { color: #656377; font-size: 15px; }
.essential-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.essential-card { padding: 12px 24px 28px; border: 1px solid #d9d9e4; border-radius: 21px; background: #f9f9ff; }
.feature-art { height: 180px; display: flex; align-items: center; justify-content: center; position: relative; }
.feature-label { color: #746b8b; font-size: 9px; text-transform: uppercase; letter-spacing: .11em; margin: 7px 0 12px; }
.essential-card h3 { font-size: 21px; font-weight: 600; letter-spacing: -.04em; margin-bottom: 12px; }
.essential-card > p:not(.feature-label) { color: #666579; font-size: 13px; line-height: 1.8; margin-bottom: 0; }
.essential-card a { font-size: 11px; color: #514279; display: inline-flex; align-items: center; gap: 20px; min-height: 44px; margin-top: 14px; text-decoration: none; }
.book { width: 50px; height: 93px; border-radius: 5px 9px 9px 5px; box-shadow: inset 5px 0 0 #ffffff20, 8px 10px 18px #29253f15; transform: rotate(-13deg); background: repeating-radial-gradient(ellipse at 70% 60%, transparent 0 8px, #ffffff20 9px 10px), #55506e; }
.book-two { height: 111px; background-color: #8475b5; transform: translateY(-5px); margin-left: 6px; }
.book-three { transform: rotate(13deg); background-color: #b1cabf; margin-left: 6px; }
.bookmark-mark { position: absolute; right: 26px; bottom: 21px; width: 31px; height: 31px; border-radius: 50%; text-align: center; line-height: 29px; font-size: 23px; color: #faf8ff; background: #7567a3; }
.pace-art { gap: 15px; padding-bottom: 25px; }
.pace-art > span { color: #756980; font-size: 14px; }
.pace-art strong { font-size: 34px; font-weight: 550; letter-spacing: -.06em; color: #665785; }
.pace-ticks { position: absolute; top: 118px; width: 75%; height: 15px; background: repeating-linear-gradient(90deg, #bfb9cd 0 1px, transparent 1px 11px); }
.pace-ticks::after { content: ""; width: 2px; height: 26px; position: absolute; left: 50%; top: -5px; background: #756594; }
.privacy-ring { height: 100px; width: 100px; border: 1px solid #d3cede; border-radius: 50%; display: grid; place-items: center; outline: 1px solid #e5e1ed; outline-offset: 17px; background: #eeebf5; }
.privacy-ring svg { width: 47px; color: #7b6b9e; }
.discovery-note { display: flex; align-items: center; gap: 24px; border-top: 1px solid #d8d6e3; margin-top: 64px; padding: 38px 0; }
.discovery-icon { color: #776693; font-size: 42px; }
.discovery-note h3 { font-size: 16px; font-weight: 550; letter-spacing: -.02em; margin-bottom: 4px; }
.discovery-note p { font-size: 11px; color: #686477; max-width: 450px; margin: 0; }
.discovery-word { margin-left: auto; color: #837b94; font-size: 43px; font-weight: 600; letter-spacing: -.055em; }
.invitation { padding: 125px 0 105px; text-align: center; }
.invitation > img { border-radius: 20px; margin-bottom: 28px; }
.landing .invitation .eyebrow { justify-content: center; font-size: 9px; margin-bottom: 24px; }
.invitation h2 { font-size: clamp(48px, 6.7vw, 88px); line-height: 1.05; font-weight: 580; letter-spacing: -.065em; margin-bottom: 27px; }
.invitation h2 span { color: var(--violet); }
.invitation > p { font-size: 14px; color: var(--muted); line-height: 1.8; }
.availability-pill { display: inline-flex; align-items: center; gap: 10px; padding: 15px 23px; border-radius: 30px; border: 1px solid #4a465e; font-size: 12px; margin: 17px 0; }
.invitation .trial-note { font-size: 10px; margin: 0 0 22px; color: #aaa5ba; }
.text-link { display: inline-flex; align-items: center; gap: 20px; font-size: 12px; text-decoration: none; color: var(--violet); min-height: 44px; }
.landing .footer { padding: 38px 0; background: #10121d; }
.landing .footer-inner { align-items: center; }
.landing .footer-brand { color: var(--ink); font-size: 25px; }
.landing .footer p { font-size: 9px; margin: 8px 0 0; }
.footer-note { font-size: 10px; }
.landing .footer nav { gap: 25px; font-size: 11px; }
.reveal-ready [data-reveal] { transition: opacity .65s ease, transform .65s cubic-bezier(.2,.7,.3,1); }
.reveal-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(22px); }
@media (min-width: 1100px) and (min-height: 900px) { .device-canvas { transform: scale(1.05); } }
@media (max-width: 1100px) { .landing .shell { width: calc(100% - 64px); } .device-canvas { transform: scale(.76); } .scene-caption { left: 5%; font-size: 8px; } .motion-toggle { bottom: 62px; } .essential-card { padding-inline: 18px; } }
@media (max-width: 900px) {
  .landing .shell { width: calc(100% - 40px); }
  .landing-nav { height: 68px; gap: 12px; }
  .landing .brand { font-size: 22px; }
  .brand img { width: 28px; height: 28px; }
  .landing nav { gap: 14px; }
  .landing nav .nav-support { display: none; }
  .landing nav .nav-cta { padding-inline: 12px; font-size: 10px; gap: 9px; }
  .story { display: flex; flex-direction: column; }
  .chapter { min-height: 0; padding: 66px 4px; }
  .chapter-intro { order: 0; padding: 64px 0 0; align-items: center; text-align: center; }
  .landing h1 { font-size: clamp(59px, 13vw, 88px); margin-bottom: 22px; }
  .landing .eyebrow { font-size: 9px; margin-bottom: 22px; }
  .chapter-copy { font-size: 14px; max-width: 400px; margin-bottom: 22px; }
  .platform-note { font-size: 10px; }
  .scroll-cue { display: none; }
  .device-scene { order: 1; align-self: auto; position: relative; top: auto; min-height: 0; height: 590px; margin: 0 -20px; overflow: clip; }
  .device-canvas { transform: scale(.69); }
  .scene-caption { left: 50%; transform: translateX(-50%); bottom: 8px; white-space: nowrap; }
  .motion-toggle { bottom: 42px; right: 18px; }
  .chapter[data-chapter="1"] { order: 2; }
  .chapter[data-chapter="2"] { order: 3; padding-top: 20px; padding-bottom: 76px; }
  .chapter h2 { font-size: clamp(43px, 9vw, 63px); }
  .chapter-detail { font-size: 11px; }
  .essentials { padding-top: 68px; border-radius: 25px 25px 0 0; }
  .section-heading { margin-bottom: 35px; }
  .section-heading h2 { font-size: clamp(34px, 7vw, 48px); }
  .essential-grid { grid-template-columns: 1fr; gap: 15px; }
  .essential-card { padding: 12px 26px 28px; }
  .feature-art { height: 157px; }
  .essential-card h3 { font-size: 24px; }
  .essential-card > p:not(.feature-label) { max-width: 450px; }
  .discovery-note { margin-top: 35px; gap: 18px; padding: 28px 0; }
  .discovery-word { display: none; }
  .discovery-note h3 { font-size: 15px; }
  .discovery-icon { font-size: 32px; }
  .invitation { padding-block: 80px; }
  .invitation h2 { font-size: clamp(43px, 10vw, 70px); }
  .landing .footer-inner { gap: 18px; }
  .footer-note { width: 100%; }
}
@media (max-width: 380px) { .landing .shell { width: calc(100% - 32px); } .device-scene { margin-inline: -16px; height: 530px; } .device-canvas { transform: scale(.65); } .landing nav { gap: 10px; } .landing .brand { gap: 6px; } .landing nav .nav-cta { gap: 6px; padding-inline: 9px; } .chapter h2 { font-size: 42px; } }
@media (min-width: 901px) and (max-height: 740px) { .device-scene { min-height: 0; } .device-canvas { transform: scale(.68); } }
@media (min-width: 901px) and (max-height: 550px) { .device-canvas { transform: scale(.42); } .scene-caption { display: none; } .motion-toggle { bottom: 8px; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .reveal-ready [data-reveal], .primary-link { transition: none; } .reveal-ready [data-reveal]:not(.is-visible) { opacity: 1; transform: none; } }
.motion-paused { scroll-behavior: auto; }
.motion-paused [data-reveal] { transition: none; opacity: 1 !important; transform: none !important; }