/* Homepage-only V4 daylight system. Keep layout and text readable before any JS runs. */
:root {
  color-scheme: light;
  --ink: #173944;
  --muted: #526d76;
  --teal: #087f8d;
  --line: #c5dce0;
  --panel: #ffffff;
  --night: #edf6f4;
}

html { background: #edf6f4; scroll-padding-top: 86px; }
body { background: #edf6f4; color: #173944; }
.container { width: min(calc(100% - clamp(32px, 6vw, 96px)), 1220px); }
.topbar { background: #f8fcf9f2 !important; border-color: #c8dcdf !important; box-shadow: 0 8px 28px #173d4a12 !important; }
.nav { min-width: 0; }
.brand strong { color: #173944; }
.brand small { color: #607982; }
.nav-links a { color: #365b65 !important; }
.nav-links a:hover { color: #087f8d !important; }
.nav-actions > .button { flex-shrink: 0; }

.hero {
  min-height: clamp(650px, calc(100svh - 76px), 840px);
  background: linear-gradient(90deg, #f4faf4ed 0%, #f4faf4d1 46%, #f4faf47a 100%), url("daytime-valley.jpg") center 54% / cover !important;
  border-bottom: 1px solid #c5dce0 !important;
}
.hero:before { background: linear-gradient(90deg, #f4faf4c9 0%, #f4faf48a 50%, #f4faf422 100%) !important; }
.hero:after { background: linear-gradient(0deg, #edf6f4df 0%, #edf6f400 35%, #f7fbf433 100%) !important; }
.hero-photo { display: none !important; }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(22px, 3.4vw, 48px); align-items: center; padding-block: clamp(58px, 7vw, 88px) clamp(96px, 9vw, 120px); }
.hero-content { width: auto; max-width: 650px; padding: 0; }
.hero-visual { display: grid; grid-template-rows: minmax(0, 1fr) auto; width: 100%; max-width: 560px; height: clamp(570px, 46vw, 680px); justify-self: end; margin: 0; overflow: hidden; border: 1px solid #b7d6da; border-radius: clamp(18px, 2vw, 28px); background: radial-gradient(ellipse at 50% 40%, #d4efea 0%, #e7f2f3 58%, #dcebf1 100%); box-shadow: 0 24px 64px #183e4a25, 0 0 0 8px #ffffff2e; }
.hero-visual img { display: block; width: 100%; height: 100%; padding: 10px; object-fit: contain; object-position: center; }
.hero-visual figcaption { padding: 10px 14px; color: #4f6e76; background: #f9fcf5; font-size: 10px; letter-spacing: .035em; }
.hero .eyebrow, .section .eyebrow, .film-section .eyebrow { color: #087f8d !important; }
.hero h1 { color: #173944 !important; font-size: clamp(52px, 6.2vw, 82px); text-shadow: none !important; }
.hero h1 .shine { color: #087f8d !important; filter: none !important; }
.hero-copy, .hero-proof { color: #31555f !important; }
.hero-note, .hero-privacy-note, .hero-foot { color: #526d76 !important; }
.hero-demo-link { color: #145765 !important; }
.hero-float { display: none !important; }
.float-top { color: #526d76 !important; }
.status-pill { color: #075965 !important; background: #d7f4e9 !important; }
.float-rule { color: #254c57 !important; border-color: #b6d6db !important; background: #ffffffc9 !important; }
.hero-orbit, .hero-orbit:before, .hero-orbit:after { border-color: #4a9eac55 !important; }
.orbit-light { background: #37b8c3 !important; box-shadow: 0 0 30px 10px #54c4c288 !important; }
.scroll-cue, .scroll-cue b { color: #3c606b !important; }

.quick-start { background: url("textures/quick-start.svg?v=20261112-cinematic-v2"), radial-gradient(ellipse at 92% 0%, #8ed8cf2c, transparent 36%), linear-gradient(110deg, #f8fcf9, #eaf5f3) !important; border-color: #d1e2e2 !important;  background-size: cover, auto, auto; background-position: 73% 18%, 92% 0%, center; background-repeat: no-repeat; background-blend-mode: normal, normal, normal; }
.quick-start a { min-width: 0; color: #173d49 !important; background: #fff !important; border-color: #c4dcdf !important; }
.quick-start small { color: #55717a !important; }

#main > .section,
#main > .film-section,
#main > section[aria-labelledby="final-title"] {
  color: #173944 !important;
  background: linear-gradient(145deg, #f7fbf8 0%, #edf6f5 100%) !important;
  border-color: #d1e2e2 !important;
}
#main > #how { background: url("textures/how.svg?v=20261112-cinematic-v2"), radial-gradient(ellipse at 92% 18%, #71d2c747, transparent 45%), linear-gradient(145deg, #f4faf5, #e3f1ed) !important;  background-size: cover, auto, auto; background-position: 18% 62%, 92% 18%, center; background-repeat: no-repeat; background-blend-mode: normal, normal, normal; }
#main > #v4 { background: url("textures/v4.svg?v=20261112-cinematic-v2"), radial-gradient(ellipse at 82% 8%, #74bce542, transparent 46%), linear-gradient(135deg, #eaf4f3, #e2edf3) !important;  background-size: cover, auto, auto; background-position: 66% 10%, 82% 8%, center; background-repeat: no-repeat; background-blend-mode: normal, normal, normal; }
#main > #plan { background: url("textures/plan.svg?v=20261112-cinematic-v2"), radial-gradient(ellipse at 7% 88%, #79d1b93d, transparent 44%), linear-gradient(145deg, #f8f9f3, #e8f2eb) !important;  background-size: cover, auto, auto; background-position: 14% 76%, 7% 88%, center; background-repeat: no-repeat; background-blend-mode: normal, normal, normal; }
#main > #protection { background: url("textures/protection.svg?v=20261112-cinematic-v2"), radial-gradient(ellipse at 92% 52%, #78b6d93c, transparent 44%), linear-gradient(135deg, #e5f1f1, #f1f8f4) !important;  background-size: cover, auto, auto; background-position: 88% 54%, 92% 52%, center; background-repeat: no-repeat; background-blend-mode: normal, normal, normal; }
#main > #pause { background: url("textures/pause.svg?v=20261112-cinematic-v2"), radial-gradient(ellipse at 88% 20%, #81c7d347, transparent 48%), linear-gradient(110deg, #f3f9f4, #e3eef2) !important;  background-size: cover, auto, auto; background-position: 42% 32%, 88% 20%, center; background-repeat: no-repeat; background-blend-mode: normal, normal, normal; }
#main > #reflect { background: url("textures/reflect.svg?v=20261112-cinematic-v2"), radial-gradient(ellipse at 4% 82%, #78d0b743, transparent 43%), linear-gradient(145deg, #f3f8f0, #e6f2ec) !important;  background-size: cover, auto, auto; background-position: 84% 11%, 4% 82%, center; background-repeat: no-repeat; background-blend-mode: normal, normal, normal; }
#main > #pricing { background: url("textures/pricing.svg?v=20261112-cinematic-v2"), radial-gradient(ellipse at 100% 0%, #79bfe23b, transparent 43%), linear-gradient(145deg, #f5f8f3, #e3eff1) !important;  background-size: cover, auto, auto; background-position: 22% 72%, 100% 0%, center; background-repeat: no-repeat; background-blend-mode: normal, normal, normal; }
#main > #privacy { background: url("textures/privacy.svg?v=20261112-cinematic-v2"), radial-gradient(ellipse at 8% 12%, #82d3c543, transparent 44%), linear-gradient(145deg, #eaf4ef, #f4f8f5) !important;  background-size: cover, auto, auto; background-position: 75% 26%, 8% 12%, center; background-repeat: no-repeat; background-blend-mode: normal, normal, normal; }
#main > #faq { background: url("textures/faq.svg?v=20261112-cinematic-v2"), radial-gradient(ellipse at 92% 90%, #75b7d945, transparent 46%), linear-gradient(145deg, #e5f0f3, #f2f7f7) !important;  background-size: cover, auto, auto; background-position: 15% 54%, 92% 90%, center; background-repeat: no-repeat; background-blend-mode: normal, normal, normal; }
#main > #film { background: url("textures/film.svg?v=20261112-cinematic-v2"), radial-gradient(ellipse at 10% 8%, #72d2c43d, transparent 46%), linear-gradient(135deg, #e7f2f0, #f5f9f5 58%, #e3eff3) !important;  background-size: cover, auto, auto; background-position: 74% 37%, 10% 8%, center; background-repeat: no-repeat; background-blend-mode: normal, normal, normal; }
#main > section[aria-labelledby="final-title"] { background: url("textures/final.svg?v=20261112-cinematic-v2"), radial-gradient(ellipse at 90% 10%, #70d0be44, transparent 45%), linear-gradient(145deg, #f2f8f3, #e2eef1) !important;  background-size: cover, auto, auto; background-position: 31% 62%, 90% 10%, center; background-repeat: no-repeat; background-blend-mode: normal, normal, normal; }
#main #v4 .v4-showcase { background: url("textures/showcase.svg?v=20261112-cinematic-v2"), radial-gradient(ellipse at 68% 24%, #dcefeb, transparent 58%), linear-gradient(135deg, #eaf4f4, #e1eef2) !important;  background-size: cover, auto, auto; background-position: 24% 65%, 68% 24%, center; background-repeat: no-repeat; background-blend-mode: normal, normal, normal; }
#main .section { padding-block: clamp(56px, 7.2vw, 96px); }
#main .section-head { grid-template-columns: minmax(0, 1.1fr) minmax(250px, .75fr); gap: clamp(24px, 4vw, 56px); margin-bottom: clamp(28px, 4vw, 46px); }
#main .section-head > div, #main .section-head > p { min-width: 0; }
#main .section-head h2,
#main .pause-copy h2,
#main .reflect-copy h2,
#main .faq-intro h2,
#main .final-copy h2,
#main .film-copy h2,
#main .reel-library-head h2 {
  color: #173944 !important;
  max-width: 790px;
  font-size: clamp(36px, 4.7vw, 62px);
  line-height: 1.04;
  letter-spacing: -.055em;
  overflow-wrap: break-word;
  text-wrap: pretty;
}
#main .section-head h2 em,
#main .pause-copy h2 em,
#main .reflect-copy h2 em,
#main .faq-intro h2 em,
#main .final-copy h2 em,
#main .film-copy h2 em,
#main .reel-library-head h2 em { color: #087f8d !important; }
#main .section-head p,
#main .pause-copy > p,
#main .reflect-copy > p,
#main .faq-intro > p,
#main .final-copy > p,
#main .reel-library-head > p { color: #526d76 !important; }
#main .section-link { border-color: #c5dce0 !important; }
#main .section-link p { color: #526d76 !important; }
#main .text-link, #main .film-secondary { color: #087f8d !important; }

/* Never leave copy hidden if a browser blocks the scroll observer. */
#main .reveal { opacity: 1 !important; transform: none !important; transition: none !important; }

#how .story-grid { grid-template-columns: minmax(0, .82fr) minmax(0, 1.18fr); gap: clamp(22px, 4vw, 48px); }
#how .story-step { color: #284e59 !important; border-color: #c8dfe1 !important; background: #ffffffb8 !important; }
#how .story-step:hover { background: #f2fbf8 !important; }
#how .story-step[aria-pressed="true"] { color: #143e4b !important; border-color: #62b9c0 !important; background: linear-gradient(112deg, #dff6ed, #dceefa) !important; transform: none; }
#how .story-step small, #how .story-instruction { color: #55717a !important; }
#how .story-status { color: #075965 !important; background: #e3f5f0 !important; border-color: #b8d9d9 !important; }
#how .story-num { color: #087f8d !important; border-color: #88bcc3 !important; }
#how .story-step[aria-pressed="true"] .story-num { color: #fff !important; background: #087f8d !important; }
#how .story-stage { min-height: 520px; border-color: #b9d9dc !important; background: radial-gradient(circle at 50% 42%, #e4f5ef, #eaf4f6 70%) !important; box-shadow: 0 20px 54px #173d4a12 !important; }
#how .story-stage:before, #how .story-stage:after { border-color: #65aeb344 !important; box-shadow: none !important; }
#how .poster-frame { border-color: #b9d6dc !important; background: #fff !important; box-shadow: 0 16px 36px #143d4a1c !important; }
#how .story-panel[data-art="landscape"] { padding: 18px; }
#how .story-panel[data-art="landscape"] .poster-frame { width: min(100%, 620px); height: auto; max-width: 100%; max-height: none; aspect-ratio: 4 / 3; transform: none; }
#how .story-panel[data-art="landscape"] .poster-frame img { width: 100%; height: 100%; max-height: none; object-fit: contain; }
#how .story-panel[data-art="landscape"] .panel-label { left: 50%; bottom: 4%; transform: translateX(-50%); color: #173944 !important; border-color: #c0dadd !important; background: #f8fcf2ed !important; box-shadow: 0 5px 18px #173d4a18 !important; white-space: nowrap; }
#how .story-panel[data-panel="0"] .panel-label { color: #173944 !important; }
#how .story-progress i { background: #9dbdc1 !important; }
#how .story-progress i.active { background: #087f8d !important; box-shadow: none !important; }
#how .campaign-note { color: #526d76 !important; }

#v4 .v4-device-note { color: #526d76 !important; }
#v4 .v4-card, #v4 .v4-watch { color: #173944 !important; border-color: #c1d9dd !important; background: #ffffff !important; box-shadow: 0 12px 34px #173d4a0c !important; }
#v4 .v4-card img { background: #e8f2f4 !important; }
#v4 .v4-card figcaption b, #v4 .v4-watch h3 { color: #173944 !important; }
#v4 .v4-card figcaption span, #v4 .v4-watch p { color: #526d76 !important; }
#v4 .v4-watch .eyebrow { color: #087f8d !important; }

#film .reel-library-head { grid-template-columns: minmax(0, 1fr) minmax(250px, .75fr); gap: clamp(24px, 4vw, 52px); }
#film .reel-card { min-width: 0; background: #fff !important; border-color: #c1d9dd !important; box-shadow: 0 14px 36px #123d4a0b !important; }
#film .reel-card video { display: block; width: 100%; max-width: 100%; background: #dcebef; }
#film .reel-card-copy { color: #173944 !important; }
#film .reel-card-copy h3 { color: #173944 !important; }
#film .reel-card-copy p { color: #526d76 !important; }
#film .reel-note { color: #526d76 !important; }

#plan .choice-grid { grid-template-columns: minmax(0, .9fr) minmax(0, 1.1fr); gap: clamp(16px, 2.5vw, 26px); }
#plan .choice-controls, #protection .schedule-console { color: #173944 !important; border-color: #c1d9dd !important; background: #fff !important; box-shadow: 0 14px 36px #123d4a0b !important; }
#plan .choice-label, #protection .schedule-group label { color: #42636d !important; }
#plan .mode { color: #315762 !important; border-color: #c4dcdf !important; background: #f3f9f8 !important; }
#plan .mode[aria-pressed="true"] { color: #fff !important; border-color: #087f8d !important; background: linear-gradient(120deg, #087f8d, #328cb0) !important; }
#plan .mode-icon { color: #087f8d !important; background: #e3f4f0 !important; }
#plan .privacy-hint { color: #526d76 !important; border-color: #c5dce0 !important; }
#plan .plan-card { min-width: 0; color: #173944 !important; border-color: #bdd7da !important; background: #fff !important; box-shadow: 0 16px 38px #173d4a12 !important; }
#plan .plan-card-top { color: #526d76 !important; }
#plan .plan-card-top .category { color: #075965 !important; background: #dff4ef !important; }
#plan .plan-card h3 { color: #173944 !important; }
#plan .plan-field { border-color: #d5e4e5 !important; }
#plan .plan-field small { color: #087f8d !important; }
#plan .plan-field p { color: #31555f !important; }
#plan .plan-card-aside { border-color: #c5dce0 !important; background: #eef7f4 !important; }
#plan .aside-orbit { border-color: #63aeb0 !important; box-shadow: none !important; }
#plan .aside-orbit:before { border-color: #85c4c2 !important; }
#plan .aside-orbit:after { background: #d1eee5 !important; border-color: #7fbab5 !important; }
#plan .aside-orbit b { color: #075965 !important; }
#plan .aside-caption, #plan .plan-card-aside small { color: #526d76 !important; }

#protection .schedule-group { border-color: #d5e4e5 !important; }
#protection .console-live { color: #087f8d !important; }
#protection .pill { color: #315762 !important; border-color: #c4dcdf !important; background: #f3f9f8 !important; }
#protection .pill[aria-pressed="true"] { color: #073846 !important; border-color: #6db9bd !important; background: #c8efe3 !important; }
#protection .schedule-review { color: #173944 !important; border-color: #c1d9dd !important; background: linear-gradient(125deg, #e5f5ec, #d6ece9) !important; box-shadow: none !important; }
#protection .schedule-review small { color: #087f8d !important; }
#protection .schedule-review p, #protection .disclaimer { color: #526d76 !important; }
#protection .screen-showcase { width: min(100%, 680px); height: auto; min-height: 0; overflow: visible; }
#protection .screen-showcase:before, #protection .screen-showcase:after, #protection .visual-orbit { display: none; }
#protection .screen-showcase figure { width: 100%; max-width: 680px; margin: 0; transform: none; filter: drop-shadow(0 18px 28px #173d4a16); }
#protection .screen-showcase img { width: 100%; border-color: #c1d9dd; border-radius: 20px; box-shadow: 0 10px 28px #173d4a14; }
#protection .screen-showcase figcaption { color: #526d76 !important; }

#pause .pause-step { color: #31555f !important; }
#pause .pause-step span { color: #087f8d !important; border-color: #9fcbd0 !important; }
#pause .timer-card { color: #173944 !important; border-color: #b5d8dc !important; background: linear-gradient(145deg, #fbfef9, #e7f5f3) !important; box-shadow: 0 20px 54px #15475214 !important; }
#pause .timer-head { border-color: #d4e6e6 !important; }
#pause .timer-head b { color: #17434e !important; }
#pause .timer-head span, #pause .timer-state, #pause .timer-caveat { color: #526d76 !important; }
#pause .timer-phase, #pause .breath-cue, #pause .breath-word, #pause .timer-read { color: #087f8d !important; }
#pause .timer-screen h3 { color: #173944 !important; }
#pause .timer-screen p { color: #526d76 !important; }
#pause .breath-inner { border-color: #9bcbd0 !important; background: radial-gradient(circle at 48% 25%, #fff, #e5f5f3 78%) !important; }
#pause .breath-time { color: #153b48 !important; }
#pause .pause-journey span { color: #718990 !important; text-shadow: none !important; }
#pause .pause-journey span.active { color: #087f8d !important; }

#reflect .reflect-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 4vw, 54px); }
#reflect .reflect-card { min-width: 0; color: #173944 !important; border-color: #c1d9dd !important; background: #fff !important; box-shadow: 0 14px 36px #123d4a0b !important; }
#reflect .reflect-card strong, #reflect .reflect-card h3, #reflect .reflect-insight strong { color: #173944 !important; }
#reflect .reflect-card p, #reflect .reflect-insight p, #reflect .reflect-note, #reflect .bar-label { color: #526d76 !important; }
#reflect .switch { border-color: #c1d9dd !important; background: #f1f8f7 !important; }
#reflect .switch button { color: #526d76 !important; }
#reflect .switch button[aria-pressed="true"] { color: #075965 !important; background: #c9eee5 !important; }
#reflect .chart { border-color: #d3e3e4 !important; }
#reflect .bar { background: linear-gradient(180deg, #62cfc3, #4d9cce) !important; box-shadow: none !important; }
#reflect .reflect-insight { color: #173944 !important; border-color: #c1d9dd !important; background: #f4faf8 !important; }
#reflect .reflect-list span { color: #31555f !important; }
#reflect .reflect-list b { color: #087f8d !important; }
#reflect .reflect-app-screen { width: min(100%, 380px); margin: 20px auto 0; }
#reflect .reflect-app-screen img { width: 100%; border-color: #c1d9dd; border-radius: 20px; transform: none; box-shadow: 0 14px 34px #173d4a14; }
#reflect .reflect-app-screen figcaption { color: #526d76 !important; }

#pricing .price-card { min-width: 0; color: #173944 !important; border-color: #c1d9dd !important; background: #fff !important; box-shadow: 0 14px 36px #123d4a0b !important; }
#pricing .price-card h3, #pricing .price-card strong { color: #173944 !important; }
#pricing .price-card ul, #pricing .price-period, #pricing .price-options span { color: #526d76 !important; }
#pricing .price-label, #pricing .price-card li:before { color: #087f8d !important; }
#pricing .price-options div { border-color: #c1d9dd !important; background: #eef7f5 !important; }
#pricing .annual-note { color: #3e6871 !important; }
#pricing .pricing-terms { color: #526d76 !important; }
#pricing .pricing-fit { grid-template-columns: minmax(150px, auto) minmax(0, 1fr) auto; color: #31555f !important; border-color: #c1d9dd !important; background: #fff !important; }
#pricing .pricing-fit b { color: #173944 !important; }
#pricing .pricing-fit a { color: #087f8d !important; }

#privacy .trust-strip { background: #fff !important; border-color: #c1d9dd !important; }
#privacy .trust-item { color: #173944 !important; border-color: #d4e3e4 !important; background: #fff !important; box-shadow: none !important; }
#privacy .trust-item b { color: #173944 !important; }
#privacy .trust-item p { color: #526d76 !important; }
#privacy .trust-icon { color: #087f8d !important; border-color: #c1d9dd !important; background: #e9f6f2 !important; }
#privacy .founder-note { color: #173944 !important; border-color: #c1d9dd !important; background: #fff !important; box-shadow: 0 14px 36px #123d4a0b !important; }
#privacy .founder-note h3 { color: #173944 !important; }
#privacy .founder-note p, #privacy .section-link p { color: #526d76 !important; }

#faq .faq-list details { border-color: #c1d9dd !important; background: #fff !important; box-shadow: 0 8px 22px #123d4a0a !important; }
#faq .faq-list details[open] { background: #f5fbf9 !important; }
#faq .faq-list summary { color: #173944 !important; }
#faq .faq-answer { color: #526d76 !important; }
#faq .faq-answer a { color: #087f8d !important; }

#main > section[aria-labelledby="final-title"] { padding-block: clamp(42px, 6vw, 78px); }
#main .final-cta { grid-template-columns: minmax(0, 1fr) minmax(250px, .7fr); min-height: 0; padding: clamp(26px, 4vw, 52px); border-color: #bdd7da !important; background: linear-gradient(115deg, #e0f3e9, #d8edf2 68%, #e5eafb) !important; box-shadow: 0 16px 40px #173d4a12 !important; }
#main .final-cta:before { display: none; }
#main .final-copy, #main .final-art { z-index: 1; }
#main .final-copy h2 { color: #173944 !important; }
#main .final-copy p { color: #526d76 !important; }
#main .final-art { display: grid; align-content: center; justify-self: center; width: min(100%, 380px); min-height: 270px; height: auto; max-height: none; padding: clamp(24px, 4vw, 40px); border: 1px solid #afd1d3; border-radius: 26px; background: radial-gradient(circle at 82% 18%, #b9e9dc 0, transparent 42%), linear-gradient(145deg, #fafff7, #dff0f2); color: #173944; box-shadow: 0 14px 34px #173d4a15; transform: none; filter: none; }
#main .final-art span { color: #087f8d; font-size: 10px; font-weight: 800; letter-spacing: .17em; }
#main .final-art strong { display: block; margin-top: 18px; color: #173944; font-size: clamp(30px, 4vw, 48px); line-height: 1.02; letter-spacing: -.05em; }
#main .final-art i { display: block; width: 56px; height: 4px; margin-top: 20px; border-radius: 99px; background: linear-gradient(90deg, #42b9ad, #5f9ed1); }
#main .final-art small { display: block; margin-top: 18px; color: #526d76; font-size: 11px; }

.footer { color: #496972; }
.footer-main { border-color: #c8dcdf !important; }
.footer-links a, .footer-meta, .footer-disclaimer { color: #5e777e !important; }
.footer-links a:hover { color: #087f8d !important; }
.back-to-top { color: #15515f !important; background: #f7fcf8e8 !important; border-color: #b7d5d9 !important; }

@media (max-width: 1000px) {
  .nav { height: 68px; }
  .nav-links { display: none; position: fixed; inset: 68px 0 auto; padding: 14px 22px 20px; background: #f8fcf9f7 !important; border-bottom: 1px solid #c9dfe0; box-shadow: 0 18px 32px #173d4a18; }
  .nav-links.open { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px 12px; }
  .nav-links a { padding: 12px 10px; border-radius: 9px; font-size: 13px !important; }
  .menu-toggle { display: grid !important; place-items: center; width: 42px; height: 42px; border: 1px solid #9fc6cd !important; border-radius: 50%; color: #183d49 !important; background: #fff !important; }
  .hero { min-height: clamp(600px, calc(100svh - 68px), 780px); }
  .hero-content { width: auto; }
  #main .section-head, #film .reel-library-head { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  #how .story-grid, #plan .choice-grid, #reflect .reflect-grid { grid-template-columns: minmax(0, 1fr); }
  #how .story-stage { order: -1; min-height: 470px; }
  #reflect .reflect-copy { display: grid; grid-template-columns: minmax(0, 1fr) minmax(220px, .65fr); gap: 24px; align-items: center; }
  #reflect .reflect-app-screen { margin: 0 auto; }
}

@media (max-width: 880px) {
  .hero { min-height: 0; }
  .hero-layout { grid-template-columns: minmax(0, 1fr); gap: 25px; padding-block: 54px 92px; }
  .hero-content { max-width: 700px; }
  .hero-visual { width: min(100%, 620px); height: clamp(520px, 82vw, 660px); justify-self: center; }
}

@media (max-width: 760px) {
  html { scroll-padding-top: 76px; }
  .container { width: min(calc(100% - 36px), 1220px); }
  .nav { height: 64px; }
  .nav-links { inset-block-start: 64px; }
  .nav-actions > .button { min-height: 40px; padding: 9px 12px; font-size: 10px; }
  .hero { min-height: 0; align-items: flex-start; }
  .hero:before { background: linear-gradient(180deg, #f4faf4ea 0%, #f4faf4c8 72%, #edf6f4b8 100%) !important; }
  .hero-layout { gap: 18px; padding-block: 42px 76px; }
  .hero-content { width: 100%; padding: 0; }
  .hero-visual { width: min(100%, 600px); height: clamp(420px, 114vw, 630px); min-height: 0; border-radius: 18px; }
  .hero-visual img { padding: 8px; }
  .hero-visual figcaption { padding: 8px 11px; font-size: 9px; }
  .hero h1 { max-width: 590px; font-size: clamp(44px, 10.5vw, 68px); }
  .hero-copy { max-width: 56ch; font-size: 15px; }
  .hero-float, .hero-foot { display: none; }
  .hero-ctas { gap: 10px; }
  .quick-start-head { align-items: flex-start; flex-direction: column; gap: .2rem; }
  .quick-start-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #main .section { padding-block: 54px; }
  #main .section-head { margin-bottom: 27px; }
  #main .section-head h2, #main .pause-copy h2, #main .reflect-copy h2, #main .faq-intro h2, #main .final-copy h2, #main .film-copy h2, #main .reel-library-head h2 { font-size: clamp(34px, 8.2vw, 50px); }
  #how .story-grid { gap: 18px; }
  #how .story-stage { min-height: 420px; border-radius: 22px; }
  #how .story-panel[data-art="landscape"] .poster-frame { width: min(100%, 480px); }
  #how .story-panel[data-art="landscape"] .panel-label { bottom: 3%; font-size: 8px; }
  #how .story-panel:not([data-art="landscape"]) .poster-frame { width: min(67%, 300px); max-height: 365px; }
  #how .story-panel:not([data-art="landscape"]) .poster-frame img { max-height: 355px; }
  #plan .choice-grid, #reflect .reflect-grid { grid-template-columns: minmax(0, 1fr); }
  #plan .plan-card { grid-template-columns: minmax(0, 1fr); }
  #plan .plan-card-aside { display: grid; grid-template-columns: 58px minmax(0, 1fr); gap: 12px; align-items: center; padding: 16px; }
  #plan .aside-orbit { width: 54px; margin: 0; }
  #plan .aside-orbit:before { inset: 7px; }
  #plan .aside-orbit:after { inset: 15px; }
  #plan .aside-orbit b { font-size: 11px; }
  #plan .aside-caption { text-align: left; }
  #plan .plan-card-aside .button, #plan .plan-card-aside small { grid-column: 1 / -1; }
  #protection .screen-showcase { width: 100%; }
  #protection .screen-showcase img { border-radius: 16px; }
  #pause .pause-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  #pause .timer-card { padding: 22px 17px; }
  #pause .timer-controls { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #pause .timer-controls .button { min-width: 0; width: 100%; padding-inline: 9px; font-size: 10px; }
  #pause .timer-controls .button:only-child { grid-column: 1 / -1; }
  #reflect .reflect-copy { grid-template-columns: minmax(0, 1fr) minmax(170px, .7fr); gap: 16px; }
  #pricing .pricing-grid { grid-template-columns: minmax(0, 1fr); }
  #pricing .pricing-fit { grid-template-columns: minmax(0, 1fr); }
  #privacy .trust-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  #privacy .trust-item:nth-child(2) { border-right: 0; }
  #privacy .trust-item:nth-child(-n+2) { border-bottom: 1px solid #d4e3e4; }
  #main .final-cta { grid-template-columns: minmax(0, 1fr); }
  #main .final-art { width: min(100%, 440px); min-height: 230px; }
  .footer-main { align-items: flex-start; flex-direction: column; }
  .footer-links { gap: 12px 18px; }
  .footer-meta { align-items: flex-start; flex-direction: column; }
}

@media (max-width: 560px) {
  .quick-start-grid, #v4 .v4-gallery { grid-template-columns: minmax(0, 1fr); }
  #reflect .reflect-copy { grid-template-columns: minmax(0, 1fr); }
  #reflect .reflect-app-screen { width: min(100%, 420px); }
  #privacy .trust-strip { grid-template-columns: minmax(0, 1fr); }
  #privacy .trust-item { border-right: 0; border-bottom: 1px solid #d4e3e4; }
  #privacy .trust-item:last-child { border-bottom: 0; }
  #pause .pause-journey { grid-template-columns: minmax(0, 1fr) 10px minmax(0, 1fr) 10px minmax(0, 1fr); gap: 4px; font-size: 8px; letter-spacing: 0; }
  .footer-links { gap: 10px 14px; }
}

@media (max-width: 420px) {
  .nav { gap: 8px; }
  .brand { gap: 7px; }
  .brand small { font-size: 7px; letter-spacing: .08em; }
  .nav-actions { flex: 0 0 auto; gap: 8px; }
  .menu-toggle { flex: 0 0 42px; }
}

/* Cinematic motion layers stay clear of the approved product artwork and copy. */
.hero-visual { position: relative; isolation: isolate; }
.hero-visual img { position: relative; z-index: 0; }
.hero-visual figcaption { position: relative; z-index: 3; }
.hero-motion-layer { position: absolute; z-index: 2; inset: 10px 10px 42px; overflow: hidden; border-radius: 20px; pointer-events: none; }
.hero-motion-orbit { position: absolute; top: 50%; left: 50%; width: min(88%, 500px); aspect-ratio: 1; border: 1px solid #58e4d66b; border-radius: 50%; transform: translate(-50%, -50%); animation: sicuur-hero-orbit 26s linear infinite; }
.hero-motion-orbit::before { position: absolute; top: 14%; left: 50%; width: 8px; height: 8px; border: 1px solid #f6fffa; border-radius: 50%; background: #7cf5e4; box-shadow: 0 0 18px 7px #5edccc88; content: ""; transform: translateX(-50%); }
.hero-motion-orbit--inner { width: min(68%, 380px); border-color: #7ad5f266; border-style: dashed; animation-duration: 36s; animation-direction: reverse; }
.hero-motion-orbit--inner::before { top: 76%; width: 5px; height: 5px; background: #8dc8ff; box-shadow: 0 0 14px 6px #85bcff77; }
.hero-motion-sweep { position: absolute; top: -14%; bottom: -14%; left: -35%; width: 22%; background: linear-gradient(90deg, transparent, #ffffff26 48%, transparent); transform: skewX(-18deg); animation: sicuur-hero-sweep 11s 1.8s ease-in-out infinite; }
.hero-motion-spark { position: absolute; top: 24%; right: 17%; width: 5px; height: 5px; border-radius: 50%; background: #e7ffff; box-shadow: 0 0 16px 5px #6df0de8c; animation: sicuur-hero-spark 3.8s ease-in-out infinite; }
@keyframes sicuur-hero-orbit { to { transform: translate(-50%, -50%) rotate(360deg); } }
@keyframes sicuur-hero-sweep { 0%, 18% { left: -35%; opacity: 0; } 28% { opacity: .8; } 58% { left: 116%; opacity: 0; } 100% { left: 116%; opacity: 0; } }
@keyframes sicuur-hero-spark { 0%, 100% { opacity: .35; transform: scale(.72); } 50% { opacity: 1; transform: scale(1.35); } }

/* Center the feature gallery and give visitors direct, keyboard-accessible controls. */
#how .story-stage { min-height: 600px; border-color: #75b9c6 !important; background: radial-gradient(ellipse at 50% 44%, #397b88 0%, #1b5065 42%, #0e2c45 100%) !important; box-shadow: 0 28px 72px #153c4a24, inset 0 1px #ffffff54 !important; }
#how .story-stage::before, #how .story-stage::after { border-color: #a9efe55c !important; box-shadow: 0 0 38px #63d6d126 !important; }
#how .story-panel { padding: 34px 72px 72px; }
#how .poster-frame { display: grid; width: min(78%, 390px); max-height: 535px; place-items: center; padding: 8px; border-color: #f5fffc !important; border-radius: 24px; background: #f8fcf8 !important; box-shadow: 0 26px 70px #031d2e72 !important; transform: none; }
#how .poster-frame img { width: 100%; max-height: 515px; border-radius: 16px; object-fit: contain; }
#how .story-panel.active .poster-frame { animation: sicuur-poster-float 8s ease-in-out infinite; }
@keyframes sicuur-poster-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } }
#how .panel-label { left: 50%; bottom: 38px; max-width: calc(100% - 32px); overflow: hidden; padding: 10px 15px; border-color: #c3dce0 !important; background: #f9fcf5f5 !important; color: #153d49 !important; font-size: 10px; text-overflow: ellipsis; white-space: nowrap; box-shadow: 0 8px 22px #092d3b30 !important; transform: translateX(-50%); }
#how .story-panel[data-panel="0"] .panel-label { color: #153d49 !important; }
#how .story-nav { position: absolute; z-index: 6; top: 50%; display: grid; width: 44px; height: 44px; place-items: center; padding: 0; border: 1px solid #d4eef0; border-radius: 50%; background: #f9fcf5ee; color: #123c49; box-shadow: 0 8px 25px #052a3970; font-size: 21px; line-height: 1; cursor: pointer; transform: translateY(-50%); transition: background .2s, transform .2s, box-shadow .2s; }
#how .story-nav:hover { background: #fff; box-shadow: 0 12px 30px #052a397a; transform: translateY(-50%) scale(1.06); }
#how .story-nav:focus-visible { outline: 3px solid #087f8d; outline-offset: 3px; }
#how .story-nav--previous { left: 16px; }
#how .story-nav--next { right: 16px; }
#how .story-progress { bottom: 14px; }
#how .story-progress i { background: #a8c7cc !important; }
#how .story-progress i.active { background: #40d1c2 !important; box-shadow: 0 0 14px #45d8c966 !important; }

/* Give the reel library a clear visual break after the device showcase. */
#film { padding-block: clamp(76px, 7.2vw, 112px) !important; }
#film .reel-library-head { margin-bottom: clamp(30px, 4vw, 48px); }

/* The sample plan aside now explains what it is and why visitors can trust it. */
#plan .plan-card-aside { position: relative; isolation: isolate; display: flex !important; flex-direction: column; justify-content: center; align-items: stretch; gap: 20px; min-width: 0; overflow: hidden; padding: clamp(24px, 3vw, 38px); border: 0 !important; border-left: 1px solid #d7e7e6 !important; background: radial-gradient(circle at 84% 12%, #42cfc54d 0, transparent 34%), radial-gradient(circle at 12% 94%, #559be239 0, transparent 42%), linear-gradient(145deg, #092b43 0%, #124b60 57%, #0b3049 100%) !important; color: #f3fffb !important; }
#plan .plan-card-aside::before, #plan .plan-card-aside::after { position: absolute; z-index: -1; width: 245px; aspect-ratio: 1; border: 1px solid #8cebdd36; border-radius: 50%; content: ""; pointer-events: none; }
#plan .plan-card-aside::before { top: -122px; right: -86px; box-shadow: 0 0 0 22px #93eee20a, 0 0 0 54px #93eee208; animation: sicuur-aside-orbit 34s linear infinite; }
#plan .plan-card-aside::after { bottom: -140px; left: -126px; width: 220px; border-color: #92c9ff32; animation: sicuur-aside-orbit 42s linear infinite reverse; }
@keyframes sicuur-aside-orbit { to { transform: rotate(360deg); } }
#plan .plan-aside-intro, #plan .plan-aside-actions { position: relative; z-index: 1; }
#plan .plan-aside-intro { display: flex !important; flex-direction: column; align-items: center; gap: 12px; }
#plan .aside-kicker { color: #b9f5e6; font-size: 9px; font-weight: 800; letter-spacing: .17em; text-align: center; }
#plan .aside-orbit { width: 128px; margin: 4px auto 0; border-color: #97eee2 !important; background: radial-gradient(circle, #43b9bb33 0%, #143d5538 62%, transparent 64%); box-shadow: 0 0 0 9px #89eee018, 0 0 32px #4bdac72b !important; animation: sicuur-aside-pulse 5.5s ease-in-out infinite; }
#plan .aside-orbit::before { border-color: #a4f3e778 !important; }
#plan .aside-orbit::after { border-color: #c3e5ed77 !important; background: #8ce5d31e !important; }
@keyframes sicuur-aside-pulse { 0%, 100% { box-shadow: 0 0 0 8px #89eee012, 0 0 25px #4bdac71c; } 50% { box-shadow: 0 0 0 13px #89eee023, 0 0 42px #4bdac743; } }
#plan .plan-card-aside .aside-orbit b { color: #f5fffb !important; font-size: 20px; letter-spacing: .04em; }
#plan .aside-caption { max-width: 24ch; margin: 0 auto; color: #f3fffb !important; font-size: 15px; line-height: 1.55; text-align: center; }
#plan .aside-proof { display: inline-flex; align-items: center; gap: 7px; margin: 0; padding: 7px 10px; border: 1px solid #c1eee63b; border-radius: 999px; background: #ffffff0e; color: #d9efed; font-size: 9px; line-height: 1.35; }
#plan .aside-proof span { display: grid; width: 17px; height: 17px; place-items: center; border-radius: 50%; background: #81e5cc; color: #0c3945; font-size: 10px; font-weight: 800; }
#plan .plan-aside-actions { display: grid; gap: 8px; margin-top: auto; }
#plan .plan-card-aside .button { min-height: 48px; border-color: #c6fff0 !important; background: linear-gradient(105deg, #b8f2df, #87dce5) !important; color: #123b48 !important; box-shadow: 0 8px 25px #031e3152 !important; }
#plan .plan-card-aside .button:hover { box-shadow: 0 12px 32px #031e3170 !important; }
#plan .plan-card-aside small { margin: 0; color: #d6e8eb !important; font-size: 9px; line-height: 1.5; text-align: center; }

/* Align the schedule controls and reduce the phone artwork's visual weight. */
#protection .schedule-layout { grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr); gap: clamp(24px, 4vw, 54px); align-items: start; }
#protection .schedule-console { align-self: start; }
#protection .screen-showcase { display: grid; width: 100%; max-width: none; height: auto; min-height: 0; align-self: start; justify-items: center; overflow: visible; padding-top: 0; }
#protection .screen-showcase::before, #protection .screen-showcase::after, #protection .screen-showcase .visual-orbit { display: none !important; }
#protection .screen-showcase figure { width: min(100%, 300px); max-width: 300px; margin: 0 auto; padding: 9px; border: 1px solid #bddadd; border-radius: 22px; background: #f8fcf9e8; box-shadow: 0 18px 42px #163d4a20; filter: none; transform: none; }
#protection .screen-showcase img { width: 100%; height: auto; border: 0; border-radius: 15px; box-shadow: none; }
#protection .screen-showcase figcaption { margin-top: 9px; color: #425f69 !important; font-size: 9px; line-height: 1.5; letter-spacing: .025em; text-align: center; text-transform: none; }

/* High-contrast Pause copy beside a clear, unfiltered valley scene. */
#pause.section.pause-section { background: url("textures/pause.svg?v=20261112-cinematic-v2"), radial-gradient(ellipse at 88% 20%, #a8d7df35, transparent 46%), linear-gradient(110deg, #f5faf6 0%, #edf6f3 54%, #e8f2f4 100%) !important;  background-size: cover, auto, auto; background-position: 60% 14%, 88% 20%, center; background-repeat: no-repeat; background-blend-mode: normal, normal, normal; }
#pause .pause-copy { padding: clamp(23px, 3vw, 38px); border: 1px solid #bdd8dc; border-radius: 26px; background: #fbfdf7ed; box-shadow: 0 18px 46px #173d4a13; }
#pause .pause-copy .eyebrow { color: #075e6b !important; }
#pause .pause-copy h2 { color: #133744 !important; font-size: clamp(44px, 5vw, 68px); }
#pause .pause-copy h2 em { color: #087f8d !important; }
#pause .pause-copy > p { max-width: 48ch; color: #294e59 !important; font-size: 15px; line-height: 1.7; }
#pause .pause-steps { gap: 13px; margin-top: 24px; }
#pause .pause-step { gap: 13px; color: #244a56 !important; font-size: 15px; line-height: 1.45; }
#pause .pause-step span { width: 30px; height: 30px; border-color: #72afb8 !important; color: #075e6b !important; background: #e5f5f0; font-size: 10px; font-weight: 750; }
#pause .pause-copy .section-link { border-color: #bfd7da !important; }
#pause .pause-copy .section-link p { color: #315761 !important; font-size: 13px; }
#pause .pause-copy .text-link { color: #056876 !important; }
#pause .timer-card { padding: 15px; border-color: #bfd7da !important; background: #f8fcf8 !important; box-shadow: 0 22px 56px #123e4c20 !important; }
#pause .timer-screen { --pause-window-center-y: 135px; --pause-window-radius: 81px; --pause-window-edge: 90px; position: relative; z-index: 1; overflow: hidden; padding: 24px 18px 20px; border: 1px solid #bed8dd; border-radius: 22px; background-color: #dcebef; background-image: url("daytime-valley.jpg"); background-position: center 49%; background-size: cover; background-repeat: no-repeat; }
#pause .timer-screen h3 { color: #143b47 !important; font-size: 24px; }
#pause .timer-screen p { color: #315762 !important; font-size: 12px; }
#pause .breath { background: conic-gradient(#087f8d var(--progress, 0deg), #087f8d35 var(--progress, 0deg) 360deg); box-shadow: 0 0 30px #37bab538; animation: none !important; }
@keyframes sicuur-bubble-float { 0%, 100% { transform: translateY(0) scale(1); } 50% { transform: translateY(-5px) scale(1.015); } }
#pause .breath-inner { border: 1px solid #148895 !important; background: transparent !important; color: #123a47 !important; box-shadow: inset 0 0 0 8px #e9fff420; }
#pause .breath-time { color: #123a47 !important; text-shadow: 0 1px 0 #ffffff8c; }
#pause .breath-word, #pause .breath-cue { color: #075e6b !important; text-shadow: 0 1px 0 #ffffffa6; }
#pause .breath::before, #pause .breath::after { border-color: #158b986b !important; }
#pause .pause-journey span { color: #345964 !important; }
#pause .pause-journey span.active { color: #075e6b !important; }
#pause .timer-head span, #pause .timer-state, #pause .timer-caveat { color: #385b65 !important; }

/* Keep the reflection narrative readable, with the app artwork as supporting proof. */
#reflect .reflect-grid { grid-template-columns: minmax(0, .94fr) minmax(0, 1.06fr); gap: clamp(26px, 4vw, 54px); align-items: center; }
#reflect .reflect-copy { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(180px, .9fr); gap: clamp(18px, 2.4vw, 30px); align-items: center; min-width: 0; }
#reflect .reflect-details { min-width: 0; }
#reflect .reflect-details h2 { font-size: clamp(39px, 4.3vw, 56px); line-height: 1.02; }
#reflect .reflect-details > p { color: #355863 !important; font-size: 14px; line-height: 1.7; }
#reflect .reflect-list { gap: 10px; margin: 20px 0; }
#reflect .reflect-list span { color: #294e59 !important; font-size: 12px; }
#reflect .reflect-app-screen { width: min(100%, 240px); margin: 0 auto; }
#reflect .reflect-app-screen img { width: 100%; border-radius: 18px; }
#reflect .reflect-app-screen figcaption { font-size: 8px; line-height: 1.4; letter-spacing: .04em; }

@media (max-width: 1000px) {
  #reflect .reflect-grid { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  #reflect .reflect-copy { grid-template-columns: minmax(0, 1.7fr) minmax(190px, .9fr); gap: 24px; }
}

@media (max-width: 760px) {
  #how .story-stage { min-height: clamp(430px, 118vw, 520px); }
  #how .story-panel { padding: 24px 50px 72px; }
  #how .poster-frame { width: min(80%, 320px); max-height: 385px; }
  #how .poster-frame img { max-height: 365px; }
  #how .panel-label { bottom: 38px; max-width: calc(100% - 28px); padding: 8px 10px; font-size: 8px; }
  #how .story-nav { width: 36px; height: 36px; font-size: 18px; }
  #how .story-nav--previous { left: 10px; }
  #how .story-nav--next { right: 10px; }
  #film { padding-block: 60px !important; }
  #film .reel-library-head { margin-bottom: 28px; }
  #plan .plan-card-aside { min-height: 0; gap: 18px; padding: 23px 21px; border: 0 !important; border-top: 1px solid #c1e6e3 !important; }
  #plan .plan-aside-intro { display: flex !important; flex-direction: column; align-items: center; gap: 10px; }
  #plan .aside-orbit { width: 104px; margin: 4px auto 0; }
  #plan .aside-caption { max-width: 32ch; font-size: 14px; }
  #plan .aside-proof { font-size: 9px; }
  #plan .plan-aside-actions { margin-top: 0; }
  #protection .schedule-layout { grid-template-columns: minmax(0, 1fr); gap: 24px; }
  #protection .screen-showcase { order: -1; }
  #protection .screen-showcase figure { width: min(100%, 270px); max-width: 270px; }
  #pause .pause-copy { padding: 22px 19px; border-radius: 22px; }
  #pause .pause-copy h2 { font-size: clamp(40px, 10vw, 55px); }
  #pause .pause-copy > p { font-size: 14px; }
  #pause .pause-step { font-size: 14px; }
  #pause .timer-card { padding: 11px; }
  #pause .timer-screen { padding: 22px 13px 18px; }
  #pause .timer-screen h3 { font-size: 21px; }
  #reflect .reflect-copy { grid-template-columns: minmax(0, 1fr); gap: 18px; }
  #reflect .reflect-app-screen { width: min(100%, 300px); margin: 4px auto 0; }
}

@media (prefers-reduced-motion: reduce) {
  #main *, #main *::before, #main *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* Give the hero feature a real device silhouette and a more distinctive motion field. */
#top .hero-visual {
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  position: relative;
  width: min(100%, 350px);
  max-width: 350px;
  height: clamp(600px, 46vw, 680px);
  justify-self: center;
  overflow: visible;
  padding: 10px 10px 12px;
  border: 0;
  border-radius: 50px;
  background: linear-gradient(135deg, #a9b8c0 0%, #1b2730 10%, #080e14 48%, #566570 100%);
  box-shadow: inset 0 0 0 2px #d1dce04c, inset 0 0 0 5px #060b10, 0 28px 72px #1337473d;
}
#top .hero-visual::before {
  position: absolute;
  z-index: 4;
  top: 17px;
  left: 50%;
  width: 82px;
  height: 23px;
  border: 1px solid #263139;
  border-radius: 999px;
  background: #030609;
  box-shadow: inset 0 1px 2px #ffffff16, 16px 0 0 -9px #24323b;
  content: "";
  transform: translateX(-50%);
  pointer-events: none;
}
#top .hero-visual::after {
  position: absolute;
  z-index: -1;
  top: 168px;
  right: -4px;
  width: 4px;
  height: 58px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, #35444d, #85949a, #29343a);
  box-shadow: 0 76px 0 -1px #52616a;
  content: "";
}
#top .hero-visual img {
  position: relative;
  z-index: 1;
  width: 100%;
  height: 100%;
  min-height: 0;
  padding: 0;
  border-radius: 39px 39px 9px 9px;
  object-fit: cover;
  object-position: center top;
}
#top .hero-visual figcaption {
  position: relative;
  z-index: 2;
  padding: 8px 4px 1px;
  border-radius: 0 0 34px 34px;
  background: #090f14;
  color: #c4d4d9;
  font-size: 8px;
  letter-spacing: .025em;
  line-height: 1.35;
  text-align: center;
}
#top .hero-motion-layer {
  z-index: 0;
  inset: -46px -74px -28px;
  overflow: visible;
  border-radius: 0;
}
#top .hero-motion-orbit {
  width: min(135%, 490px);
  border: 2px solid transparent;
  border-top-color: #11a9a0d6;
  border-right-color: #42d9ccad;
  border-bottom-color: #55b7f26b;
  box-shadow: 0 0 22px #34d9cb36, inset 0 0 18px #5cebd32a;
}
#top .hero-motion-orbit::before { width: 10px; height: 10px; box-shadow: 0 0 24px 9px #28d7caad; }
#top .hero-motion-orbit--inner { width: min(116%, 410px); border: 1px dashed #58afe6b8; box-shadow: 0 0 20px #48baf044; }
#top .hero-motion-orbit--inner::before { width: 7px; height: 7px; box-shadow: 0 0 18px 7px #76c2ff9c; }
#top .hero-motion-orbit--accent { position: absolute; top: 50%; left: 50%; width: min(147%, 520px); aspect-ratio: 1.65; border: 1px solid #13a6a080; border-left-color: #59efe0; border-right-color: #a0d9ff; border-radius: 50%; box-shadow: 0 0 24px #33d9cf35; transform: translate(-50%, -50%) rotate(-22deg); animation: sicuur-hero-orbit 19s linear infinite reverse; }
#top .hero-motion-sweep { top: -24%; bottom: -24%; left: -42%; width: 34%; background: linear-gradient(90deg, transparent, #dfffff82 44%, #53f4e858 55%, transparent); filter: blur(1px); animation-duration: 7s; }
#top .hero-motion-spark { top: 18%; right: 13%; width: 9px; height: 9px; background: #efffff; box-shadow: 0 0 28px 10px #57eee0b5; }
#top .hero-motion-flare { position: absolute; top: 13%; right: 6%; width: 92px; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle, #cbfffa9e 0, #61eee46b 9%, #3ad8d927 28%, transparent 70%); animation: sicuur-hero-flare 4.4s ease-in-out infinite; }
#top .hero-motion-particle { position: absolute; width: 6px; height: 6px; border: 1px solid #eefffc; border-radius: 50%; background: #64e7d9; box-shadow: 0 0 18px 5px #65e8dc91; animation: sicuur-hero-spark 3.4s ease-in-out infinite; }
#top .hero-motion-particle--one { top: 33%; left: 8%; }
#top .hero-motion-particle--two { right: 2%; bottom: 29%; width: 4px; height: 4px; animation-delay: -1.8s; }
@keyframes sicuur-hero-flare { 0%, 100% { opacity: .4; transform: scale(.78); } 50% { opacity: 1; transform: scale(1.18); } }

/* Let the app artwork sit directly in the gallery stage without a white mount. */
#how .poster-frame { padding: 0; border: 0 !important; border-radius: 0; background: transparent !important; box-shadow: none !important; }
#how .poster-frame img { border-radius: 15px; box-shadow: 0 28px 65px #031d2e76; }

/* Make the personal-plan orbit read as the focal graphic, with two moving paths. */
#plan .aside-orbit {
  position: relative;
  width: 178px;
  margin: 6px auto 2px;
  border: 1px solid #b2fff0 !important;
  background: radial-gradient(circle, #8df4de33 0, #54c8c629 26%, #143d5538 55%, transparent 70%);
  box-shadow: 0 0 0 11px #89eee01c, 0 0 0 25px #89eee010, 0 0 46px #4bdac758 !important;
  animation: sicuur-aside-focus 4.4s ease-in-out infinite;
}
#plan .aside-orbit::before { inset: 17px; border: 1px solid #c2fff08a !important; box-shadow: 0 0 24px #46e4d33d; }
#plan .aside-orbit::after { inset: 45px; border: 1px solid #d7ffff9c !important; background: radial-gradient(circle, #7fe9d251, #0c34495e) !important; box-shadow: 0 0 22px #61e8d674; }
#plan .aside-orbit .orbit-track { position: absolute; z-index: 1; inset: -13px 22px; border: 1px dashed #c5fff08d; border-radius: 50%; pointer-events: none; }
#plan .aside-orbit .orbit-track::before { position: absolute; top: 10%; left: 50%; width: 10px; height: 10px; border: 1px solid #f3fffb; border-radius: 50%; background: #72f3df; box-shadow: 0 0 18px 7px #68f4dfb0; content: ""; transform: translateX(-50%); }
#plan .aside-orbit .orbit-track--wide { transform: rotate(43deg); animation: sicuur-aside-path 12s linear infinite; }
#plan .aside-orbit .orbit-track--tall { inset: -17px 33px; border-color: #86c9ff8c; transform: rotate(-45deg); animation: sicuur-aside-path 16s linear infinite reverse; }
#plan .aside-orbit .orbit-track--tall::before { background: #8ac7ff; box-shadow: 0 0 16px 6px #78baff9c; }
#plan .plan-card-aside .aside-orbit b { position: relative; z-index: 2; display: grid; width: 62px; height: 62px; place-items: center; border: 1px solid #d0fff1bd; border-radius: 50%; background: radial-gradient(circle at 35% 25%, #8ff5df44, #16465d 80%); box-shadow: 0 0 28px #5ce5d17a, inset 0 0 16px #80efdf3d; color: #fff !important; font-size: 19px; }
@keyframes sicuur-aside-focus { 0%,100% { box-shadow: 0 0 0 9px #89eee015, 0 0 34px #4bdac737; } 50% { box-shadow: 0 0 0 15px #89eee02b, 0 0 56px #4bdac77a; } }
@keyframes sicuur-aside-path { to { transform: rotate(403deg); } }

/* Wash the landscape behind the Pause copy while leaving its timer bubble untouched. */
#pause .timer-screen::before { position: absolute; z-index: 0; inset: 0; background: linear-gradient(180deg, #f5fffcad 0%, #f4fff0a8 57%, #efffedbd 100%); content: ""; pointer-events: none; }
#pause .timer-screen > :not(.sr-only) { position: relative; z-index: 1; }

/* Put the reflection explanation first and the illustrative chart directly beside it. */
#reflect .reflect-grid { grid-template-columns: minmax(0, 1.04fr) minmax(0, .96fr); gap: clamp(30px, 4vw, 58px); align-items: center; }
#reflect .reflect-copy { display: block; min-width: 0; }
#reflect .reflect-details h2 { max-width: 14ch; font-size: clamp(40px, 4.35vw, 58px); line-height: 1.03; }
#reflect .reflect-details > p { max-width: 50ch; font-size: 14px; line-height: 1.75; }
#reflect .reflect-card { min-height: 390px; width: 100%; }
#reflect .bar-label { position: static; color: #526d76 !important; }

@media (max-width: 760px) {
  #top .hero-visual { width: min(100%, 330px); height: clamp(590px, 162vw, 650px); justify-self: center; border-radius: 45px; }
  #top .hero-visual img { border-radius: 34px 34px 8px 8px; }
  #top .hero-visual::before { top: 15px; width: 72px; height: 21px; }
  #top .hero-motion-layer { inset: -22px -24px -14px; }
  #top .hero-motion-orbit { width: 124%; }
  #top .hero-motion-orbit--inner { width: 107%; }
  #top .hero-motion-orbit--accent { width: 132%; }
  #how .poster-frame { width: min(80%, 320px); max-height: 385px; }
  #how .poster-frame img { max-height: 365px; }
  #plan .plan-card-aside { display: flex !important; flex-direction: column; align-items: stretch; }
  #plan .aside-orbit { width: 158px; margin: 5px auto; }
  #plan .aside-orbit::before { inset: 14px; }
  #plan .aside-orbit::after { inset: 40px; }
  #plan .aside-orbit .orbit-track--wide { inset: -12px 20px; }
  #plan .aside-orbit .orbit-track--tall { inset: -15px 30px; }
  #reflect .reflect-grid { grid-template-columns: minmax(0, 1fr); gap: 26px; }
  #reflect .reflect-details h2 { max-width: 15ch; }
  #reflect .reflect-card { min-height: 0; }
}

@media (prefers-reduced-motion: reduce) {
  #top .hero-motion-layer *, #plan .aside-orbit, #plan .aside-orbit .orbit-track { animation-duration: .01ms !important; animation-iteration-count: 1 !important; }
}

/* Present each feature artwork inside the matching device, with room for the full art. */
#how .story-stage { min-height: 660px; }
#how .story-panel { padding: 14px 48px 58px; }
#how .poster-frame[data-device="iphone"] {
  display: block;
  margin: 0 auto;
  width: min(72%, 268px);
  max-height: none;
  aspect-ratio: .46;
  overflow: hidden;
  padding: 22px 7px 9px !important;
  border: 2px solid #87959b !important;
  border-radius: 43px !important;
  background: linear-gradient(135deg, #c5d0d3 0%, #273239 9%, #05090d 30%, #11191e 88%, #859198 100%) !important;
  box-shadow: 0 26px 65px #031521a8, inset 0 0 0 2px #d5e0e244 !important;
  transform: none;
}
#how .poster-frame[data-device="iphone"]::before {
  position: absolute;
  z-index: 3;
  top: 7px;
  left: 50%;
  width: 62px;
  height: 10px;
  border-radius: 99px;
  background: #020508;
  box-shadow: inset 0 1px 2px #ffffff20;
  content: "";
  transform: translateX(-50%);
}
#how .poster-frame[data-device="iphone"]::after {
  position: absolute;
  top: 29%;
  right: -4px;
  width: 3px;
  height: 48px;
  border-radius: 0 4px 4px 0;
  background: linear-gradient(90deg, #4a5960, #c3ced0, #4a5960);
  box-shadow: 0 64px 0 -1px #65747a;
  content: "";
}
#how .poster-frame[data-device="iphone"] img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 31px;
  object-fit: cover;
  box-shadow: none;
}
#how .story-panel .poster-frame[data-device="watch"] {
  display: block;
  width: min(84%, 350px);
  max-height: none;
  aspect-ratio: 416 / 496;
  overflow: visible;
  padding: 8px !important;
  border: 3px solid #aab6bb !important;
  border-radius: 52px !important;
  background: linear-gradient(145deg, #1c282e, #05090d 53%, #68767b) !important;
  box-shadow: 0 23px 62px #03152199, inset 0 0 0 2px #d5e0e240 !important;
  transform: none;
}
#how .poster-frame[data-device="watch"]::before {
  position: absolute;
  top: 29%;
  right: -9px;
  width: 7px;
  height: 34px;
  border: 1px solid #c9d4d6;
  border-radius: 0 6px 6px 0;
  background: linear-gradient(90deg, #8b999d, #dbe2e2);
  content: "";
}
#how .poster-frame[data-device="watch"] img {
  display: block;
  width: 100%;
  height: 100%;
  max-height: none;
  border-radius: 41px;
  object-fit: cover;
  box-shadow: none;
}
#how .panel-label { bottom: 14px; left: 50%; transform: translateX(-50%); white-space: nowrap; }

/* Size the iPhone protection artwork to balance the schedule controls. */
#protection .screen-showcase figure {
  width: min(100%, 260px);
  max-width: 260px;
  padding: 0;
  border: 0;
  border-radius: 16px;
  background: transparent;
  box-shadow: none;
}
#protection .screen-showcase img { width: 100%; height: auto; border-radius: 16px; box-shadow: 0 24px 55px #123e4c26; }
#protection .screen-showcase figcaption { margin-top: 12px; }

/* Give the active feature caption clear space above the gallery progress dots. */
#how .story-stage .panel-label { bottom: 44px; }
#how .story-stage .story-progress { bottom: 18px; }

/* Keep the landscape bright for surrounding copy while letting the bubble read as a clear window. */
#pause .timer-screen::before {
  -webkit-mask-image: radial-gradient(circle var(--pause-window-edge) at 50% var(--pause-window-center-y), transparent 0 var(--pause-window-radius), #000 var(--pause-window-edge));
  mask-image: radial-gradient(circle var(--pause-window-edge) at 50% var(--pause-window-center-y), transparent 0 var(--pause-window-radius), #000 var(--pause-window-edge));
}

/* Align the pricing introduction to the price cards and give the comparison a clear place. */
#pricing .pricing-head {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: end;
  gap: 18px;
  max-width: 1060px;
  margin-inline: auto;
}
#pricing .pricing-head > p { max-width: 42ch; margin: 0 0 5px; font-size: 14px; line-height: 1.7; }
#pricing .pricing-grid { max-width: 1060px; }
#pricing .pricing-fit {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.2fr) auto;
  align-items: center;
  gap: clamp(16px, 2.2vw, 30px);
  max-width: 1060px;
  margin: 28px auto 0;
  padding: clamp(21px, 2.5vw, 30px);
  border: 1px solid #b7d7dc !important;
  border-radius: 22px;
  background: linear-gradient(115deg, #fbfdf9f5, #edf8f5f5) !important;
  box-shadow: 0 18px 42px #123e4c12;
}
#pricing .pricing-fit .eyebrow { margin-bottom: 7px; color: #087f8d !important; }
#pricing .pricing-fit h3 { margin: 0; color: #173944 !important; font-size: clamp(19px, 2vw, 25px); line-height: 1.15; letter-spacing: -.035em; }
#pricing .pricing-fit p { margin: 0; color: #31555f !important; font-size: 13px; line-height: 1.7; }
#pricing .pricing-fit a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  min-height: 46px;
  padding: 11px 16px;
  border: 1px solid #9acbd0;
  border-radius: 999px;
  background: #fff;
  color: #087482 !important;
  font-size: 11px;
  font-weight: 750;
  line-height: 1.3;
  text-align: center;
  text-decoration: none;
}
#pricing .pricing-fit a:hover { background: #e8f7f3; border-color: #39aaa9; }
#pricing .pricing-terms { max-width: 1060px; margin-top: 17px; }

@media (max-width: 760px) {
  #how .story-stage { min-height: clamp(520px, 120vw, 620px); }
  #how .story-panel { padding: 12px 48px 58px; }
  #how .poster-frame[data-device="iphone"] { width: min(72%, 268px); }
  #how .poster-frame[data-device="watch"] { width: min(84%, 350px); }
  #how .panel-label { bottom: 13px; max-width: calc(100% - 18px); font-size: 8px; }
  #protection .screen-showcase { order: -1; }
  #protection .screen-showcase figure { width: min(100%, 430px); max-width: 430px; }
  #pricing .pricing-head { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  #pricing .pricing-head > p { max-width: 55ch; margin: 0; }
  #pricing .pricing-fit { grid-template-columns: minmax(0, 1fr); align-items: start; gap: 12px; margin-top: 22px; padding: 21px; }
  #pricing .pricing-fit a { justify-self: start; margin-top: 2px; }
  #pause .timer-screen::before {
    -webkit-mask-image: radial-gradient(circle var(--pause-window-edge) at 50% var(--pause-window-center-y), transparent 0 var(--pause-window-radius), #000 var(--pause-window-edge));
    mask-image: radial-gradient(circle var(--pause-window-edge) at 50% var(--pause-window-center-y), transparent 0 var(--pause-window-radius), #000 var(--pause-window-edge));
  }
  #pause .timer-screen { --pause-window-center-y: 133px; --pause-window-radius: 69px; --pause-window-edge: 78px; }
}

@media (max-width: 400px) {
  #pause .timer-screen { --pause-window-center-y: 114px; }
}

/* Keep the Watch slide compact and close to the source artwork's device proportions. */
#how .story-panel .poster-frame[data-device="watch"] {
  width: min(78%, 300px);
  height: auto !important;
  margin: 0 auto;
  aspect-ratio: 416 / 496;
}
#how .story-panel .poster-frame[data-device="watch"] img { height: 100%; }

/* Match every section heading to the H1's dark-and-teal contrast. */
#main h2 { color: #173944 !important; }
#main h2 em { color: #087f8d !important; }
#main .quick-start-head h2 em { font-family: var(--serif); font-style: italic; }
@media (max-width: 760px) {
  #how .story-panel .poster-frame[data-device="watch"] { width: min(84%, 320px); }
}

/* Cinematic depth: individual paper grain, uneven light and restrained scroll parallax. */
#top .hero-motion-layer {
  background: url("textures/cinematic-ribbons.svg?v=20261112-cinematic-v2") 48% 56% / 122% 118% no-repeat;
  animation: sicuur-ribbon-drift 17s ease-in-out infinite alternate;
}
#top .hero-motion-orbit,
#top .hero-motion-flare { display: none !important; }
#top .hero-motion-sweep { opacity: .72; }
#top .hero-motion-spark { top: 22%; right: 9%; }
#top .hero-motion-particle--one { top: 64%; left: 1%; }
#top .hero-motion-particle--two { right: 4%; bottom: 19%; }
@keyframes sicuur-ribbon-drift {
  from { background-position: 44% 62%; }
  to { background-position: 58% 38%; }
}

/* The feature gallery uses uneven contour lines instead of orbit rings. */
#how .story-stage::before,
#how .story-stage::after {
  aspect-ratio: auto;
  border-radius: 58% 42% 63% 37% / 38% 62% 38% 62%;
  animation: sicuur-contour-drift 21s ease-in-out infinite alternate;
}
#how .story-stage::before {
  top: 43%; left: 55%; width: 76%; height: 58%;
  transform: translate(-50%, -50%) rotate(-14deg);
}
#how .story-stage::after {
  top: 58%; left: 43%; width: 53%; height: 84%;
  border-radius: 39% 61% 47% 53% / 63% 37% 59% 41%;
  animation-duration: 28s;
  transform: translate(-50%, -50%) rotate(21deg);
}
@keyframes sicuur-contour-drift {
  from { border-radius: 58% 42% 63% 37% / 38% 62% 38% 62%; }
  to { border-radius: 45% 55% 34% 66% / 59% 41% 67% 33%; }
}

/* A personal-plan map with a single off-center focal shape, not nested circles. */
#plan .plan-card-aside {
  background-image:
    url("textures/decision-contours.svg?v=20261112-cinematic-v2"),
    radial-gradient(ellipse at 78% 18%, #42cfc54d 0, transparent 38%),
    radial-gradient(ellipse at 18% 90%, #559be239 0, transparent 45%),
    linear-gradient(145deg, #092b43 0%, #124b60 57%, #0b3049 100%) !important;
  background-size: cover, auto, auto, auto;
  background-position: 54% 50%, 78% 18%, 18% 90%, center;
}
#plan .plan-card-aside::before,
#plan .plan-card-aside::after { display: none !important; }
#plan .aside-orbit {
  width: 188px; height: 156px; aspect-ratio: auto;
  margin: 4px auto 2px;
  border: 0 !important;
  border-radius: 48% 52% 36% 64% / 57% 39% 61% 43%;
  background: radial-gradient(ellipse at 42% 53%, #62e3d34c 0, #55c8c629 32%, transparent 72%);
  box-shadow: 0 0 48px #4bdac74a !important;
  animation: sicuur-plan-drift 8s ease-in-out infinite alternate;
}
#plan .aside-orbit::before {
  inset: -3px 20px 12px -9px;
  border: 1px solid #9ef1e17c !important;
  border-radius: 64% 36% 42% 58% / 48% 61% 39% 52%;
  box-shadow: 0 0 26px #46e4d333;
  transform: rotate(-15deg);
}
#plan .aside-orbit::after {
  inset: 12px -8px -4px 21px;
  border: 1px dashed #99d5f17d !important;
  border-radius: 37% 63% 58% 42% / 62% 39% 61% 38%;
  background: transparent !important;
  box-shadow: none;
  transform: rotate(23deg);
}
#plan .aside-orbit .orbit-track { display: none !important; }
#plan .plan-card-aside .aside-orbit b {
  width: 74px; height: 66px;
  border: 1px solid #d0fff1bd;
  border-radius: 35% 65% 51% 49% / 45% 39% 61% 55%;
  background: radial-gradient(ellipse at 35% 25%, #8ff5df44, #16465d 80%);
  box-shadow: 0 0 28px #5ce5d17a, inset 0 0 16px #80efdf3d;
  transform: rotate(-7deg);
}
@keyframes sicuur-plan-drift {
  from { translate: 0 2px; rotate: -2deg; }
  to { translate: 0 -5px; rotate: 2deg; }
}

/* Scroll movement stays small enough to preserve reading comfort. */
#top .hero-visual,
#how .story-stage,
#protection .screen-showcase figure,
#reflect .reflect-card {
  translate: 0 var(--cinematic-depth, 0px);
}

@media (max-width: 760px) {
  #top .hero-motion-layer { background-size: 142% 124%; }
  #how .story-stage::before { width: 108%; height: 56%; }
  #how .story-stage::after { width: 72%; height: 92%; }
  #plan .aside-orbit { width: 164px; height: 142px; }
}

@media (prefers-reduced-motion: reduce) {
  #top .hero-motion-layer,
  #how .story-stage::before,
  #how .story-stage::after,
  #plan .aside-orbit { animation: none !important; }
  #top .hero-visual,
  #how .story-stage,
  #protection .screen-showcase figure,
  #reflect .reflect-card { translate: none !important; }
}

/* Preserve a phone-sized artwork on narrow screens; do not let the gallery's wider rule stretch it. */
@media (max-width: 760px) {
  #protection .screen-showcase figure { width: min(100%, 240px) !important; max-width: 240px !important; }
}

/* Keep the page's vertical rhythm compact and consistent across sections. */
#main > .section:not([aria-labelledby="final-title"]) {
  padding-block: clamp(44px, 4.1vw, 60px) !important;
}
#main > .film-section { padding-block: 0 !important; }
#film > .container {
  padding-top: clamp(36px, 3vw, 44px) !important;
  padding-bottom: clamp(36px, 3.5vw, 52px) !important;
}
#main .section-head { margin-bottom: clamp(20px, 2.7vw, 34px); }

/* Keep the protection copy and artwork paired around a shared visual centre. */
@media (min-width: 761px) {
  #protection .section-head { align-items: center; }
  #protection .schedule-layout {
    grid-template-columns: minmax(0, 1.08fr) minmax(0, .92fr);
    align-items: center;
  }
  #protection .schedule-console,
  #protection .screen-showcase { align-self: center; }
}

/* Render the plan controls' phone and pause symbols consistently across fonts. */
#plan .mode-icon svg,
#plan .moment-options .moment-option > span svg {
  display: block;
  width: 17px;
  height: 17px;
  flex: none;
  stroke: #087f8d !important;
  stroke-width: 2 !important;
}

/* Keep moment icons distinct against the selected button's light surface. */
#plan .moment-option[aria-pressed="true"] > span {
  color: #075965 !important;
  background: #b9e8e0 !important;
}

/* Let both pricing calls to action share the same baseline on desktop. */
#pricing .price-card {
  display: flex;
  flex-direction: column;
}
#pricing .price-card > .button { margin-top: auto; }

@media (max-width: 760px) {
  #main > .section:not([aria-labelledby="final-title"]) { padding-block: 40px !important; }
  #main > .film-section { padding-block: 0 !important; }
  #film > .container { padding: 24px 0 36px !important; }
  #main .section-head { margin-bottom: 20px; }
  #protection .schedule-layout { align-items: stretch; }
  #protection .schedule-console,
  #protection .screen-showcase { align-self: stretch; }
}

/* One static daytime landscape plate stays fixed behind every homepage section. */
html, body { background: transparent !important; }
body { position: relative; isolation: isolate; }
.site-cinematic-bg {
  position: fixed;
  z-index: -2;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 58%;
  opacity: 1;
  filter: saturate(.9) contrast(1.02);
  transform-origin: 50% 52%;
  will-change: transform;
  pointer-events: none;
}
body::before {
  content: "";
  position: fixed;
  z-index: -1;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(104deg, #f6fbf5bf 0%, #f4faf5a6 47%, #eff7f37d 100%);
}
#top.hero {
  display: flex;
  height: auto;
  min-height: clamp(650px, calc(100svh - 76px), 840px);
  overflow: hidden;
  isolation: isolate;
  background: transparent !important;
}
#top.hero::before, #top.hero::after { display: none !important; }
#top .hero-layout {
  position: relative;
  top: auto;
  height: auto;
  padding-block: clamp(58px, 7vw, 88px) clamp(96px, 9vw, 120px);
}
.quick-start {
  background: #f5fbf6b8 !important;
  border-color: #d1e2e2b8 !important;
  backdrop-filter: blur(5px);
}
.ticker { background: #d8f3eabf !important; }
#main > .section,
#main > .film-section,
#main > #how,
#main > #v4,
#main > #plan,
#main > #protection,
#main > #pause,
#main > #reflect,
#main > #pricing,
#main > #privacy,
#main > #faq,
#main > #film,
#main > section[aria-labelledby="final-title"] {
  background: transparent !important;
  border-color: #b9d5d5a8 !important;
}
#main #v4 .v4-showcase { background: transparent !important; }
#main > #pause::before { display: none !important; }
.footer { background: transparent !important; }
#top .hero-visual,
#how .story-stage,
#protection .screen-showcase figure,
#reflect .reflect-card { translate: none !important; }

@media (max-width: 880px) {
  #top.hero { min-height: 0; }
  #top .hero-layout { padding-block: 48px 88px; }
  .site-cinematic-bg { object-position: 50% 58%; }
  body::before {
    background: linear-gradient(180deg, #f5faf5ca 0%, #f3f9f5a8 52%, #eef7f287 100%);
  }
}
@media (prefers-reduced-motion: reduce) {
  .site-cinematic-bg { animation: none !important; transform: none !important; will-change: auto; }
}

/* Keep compact navigation accessible without a separate menu toggle. */
@media (max-width: 1000px) {
  html { scroll-padding-top: 112px; }
  .nav { height: auto !important; min-height: 68px; flex-wrap: wrap; gap: 0 14px; padding-block: 8px; }
  .brand { order: 0; }
  .nav-actions { order: 1; }
  .nav-links {
    display: flex !important;
    position: static !important;
    order: 2;
    flex: 1 0 100%;
    width: 100%;
    gap: clamp(15px, 4vw, 24px);
    overflow-x: auto;
    padding: 7px 0 3px !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .nav-links::-webkit-scrollbar { display: none; }
  .nav-links a { flex: 0 0 auto; padding: 9px 0 !important; font-size: 11px !important; }
}
@media (max-width: 420px) {
  .nav-actions > .button { min-height: 36px !important; padding: 8px 10px !important; font-size: 9px !important; }
  .theme-toggle { width: 36px; height: 36px; flex-basis: 36px; }
}

/* One restrained shimmer glides across the hero image in either theme. */
#top .hero-motion-layer {
  z-index: 2 !important;
  inset: 10px 10px 42px !important;
  overflow: hidden !important;
  border-radius: 39px 39px 9px 9px !important;
  background: none !important;
  animation: none !important;
}
#top .hero-motion-layer > :not(.hero-motion-sweep) { display: none !important; }
#top .hero-motion-sweep {
  z-index: 1;
  top: -12%;
  bottom: -12%;
  left: -55%;
  width: 31%;
  background: linear-gradient(105deg, transparent 8%, #ffffff12 34%, #eaffff72 49%, #9afff08a 53%, #ffffff38 61%, transparent 88%);
  filter: blur(2px);
  opacity: 0;
  transform: skewX(-18deg);
  animation: sicuur-image-shimmer 8.5s ease-in-out infinite;
}
@keyframes sicuur-image-shimmer {
  0%, 34% { left: -55%; opacity: 0; }
  42% { opacity: .72; }
  65%, 100% { left: 125%; opacity: 0; }
}
@media (prefers-reduced-motion: reduce) {
  #top .hero-motion-sweep { animation: none !important; opacity: 0 !important; }
}