/* ========================================================================== Mornio — mornioapp.com Calm, trustworthy, premium. Light + dark. Mobile-first, accessible. No external fonts/trackers — fast, private, system font stack. ========================================================================== */ :root { color-scheme: light dark; /* Type */ --font: -apple-system, BlinkMacSystemFont, "Segoe UI", "Inter", Roboto, Helvetica, Arial, "Apple Color Emoji", sans-serif; /* Spacing scale */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 3rem; --sp-8: 4rem; --sp-9: 6rem; --radius: 16px; --radius-sm: 10px; --radius-lg: 28px; --container: 1120px; --measure: 68ch; /* Light theme (default) — warm dawn off-white */ --bg: #FBFAF6; --bg-tint: #F4F1E9; --surface: #FFFFFF; --surface-2: #F6F4EE; --text: #1B2230; --text-muted: #525B6E; --border: #E8E3D7; --border-strong: #D8D2C3; --brand: #33518F; /* dawn indigo — primary actions/links */ --brand-ink: #25406F; /* darker for hover */ --brand-soft: #EAEFF9; /* tinted brand background */ --on-brand: #FFFFFF; --sun: #F2A65A; /* decorative sunrise */ --sun-2: #E97E67; /* decorative coral */ --sky: #BFD3F2; /* decorative sky */ --good: #2E7D5B; --good-soft: #E4F1EA; --focus: #1C49B8; --shadow: 0 1px 2px rgba(20,28,48,.04), 0 8px 28px rgba(20,28,48,.08); --shadow-lg: 0 2px 6px rgba(20,28,48,.06), 0 24px 60px rgba(20,28,48,.14); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0F1320; --bg-tint: #141A2A; --surface: #161C2C; --surface-2: #1C2336; --text: #ECEFF6; --text-muted: #A6AFC2; --border: #28304A; --border-strong: #36405E; --brand: #9DB2FF; --brand-ink: #B9C8FF; --brand-soft: #1B2440; --on-brand: #0F1320; --sun: #F2A65A; --sun-2: #E97E67; --sky: #2A3A63; --good: #6FD3A2; --good-soft: #15281F; --focus: #9DB2FF; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.45); --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.55); } } /* Manual override via the theme toggle (data-theme on ). */ :root[data-theme="dark"] { --bg: #0F1320; --bg-tint: #141A2A; --surface: #161C2C; --surface-2: #1C2336; --text: #ECEFF6; --text-muted: #A6AFC2; --border: #28304A; --border-strong: #36405E; --brand: #9DB2FF; --brand-ink: #B9C8FF; --brand-soft: #1B2440; --on-brand: #0F1320; --sky: #2A3A63; --good: #6FD3A2; --good-soft: #15281F; --focus: #9DB2FF; --shadow: 0 1px 2px rgba(0,0,0,.3), 0 8px 28px rgba(0,0,0,.45); --shadow-lg: 0 2px 6px rgba(0,0,0,.35), 0 24px 60px rgba(0,0,0,.55); } /* ------------------------------ Base ------------------------------------ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; font-size: 1.0625rem; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } h1, h2, h3, h4 { line-height: 1.15; letter-spacing: -0.02em; margin: 0 0 var(--sp-4); font-weight: 700; } h1 { font-size: clamp(2.25rem, 6vw, 3.6rem); } h2 { font-size: clamp(1.6rem, 3.6vw, 2.4rem); } h3 { font-size: 1.25rem; letter-spacing: -0.01em; } p { margin: 0 0 var(--sp-4); max-width: var(--measure); } a { color: var(--brand); text-decoration-color: color-mix(in srgb, var(--brand) 40%, transparent); text-underline-offset: 2px; } a:hover { color: var(--brand-ink); } img, svg { max-width: 100%; height: auto; } ul, ol { padding-left: 1.25rem; } li { margin-bottom: var(--sp-2); } strong { font-weight: 650; } hr { border: none; border-top: 1px solid var(--border); margin: var(--sp-7) 0; } /* Focus — always visible for keyboard users */ :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 4px; } .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--sp-5); } .narrow { max-width: 760px; } .skip-link { position: absolute; left: var(--sp-4); top: -100px; background: var(--brand); color: var(--on-brand); padding: var(--sp-3) var(--sp-4); border-radius: var(--radius-sm); z-index: 200; transition: top .15s ease; font-weight: 600; } .skip-link:focus { top: var(--sp-4); color: var(--on-brand); } .eyebrow { text-transform: uppercase; letter-spacing: .12em; font-size: .78rem; font-weight: 700; color: var(--brand); margin: 0 0 var(--sp-3); } .muted { color: var(--text-muted); } .center { text-align: center; } .center p { margin-inline: auto; } /* ------------------------------ Header ---------------------------------- */ .site-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 82%, transparent); backdrop-filter: saturate(140%) blur(14px); -webkit-backdrop-filter: saturate(140%) blur(14px); border-bottom: 1px solid var(--border); } .nav { display: flex; align-items: center; gap: var(--sp-5); height: 64px; } .brand { display: inline-flex; align-items: center; gap: var(--sp-3); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.02em; color: var(--text); text-decoration: none; } .brand:hover { color: var(--text); } .brand .logo { width: 34px; height: 34px; flex: none; } .nav-links { display: flex; gap: var(--sp-2); margin-left: auto; align-items: center; } .nav-links a { color: var(--text-muted); text-decoration: none; font-weight: 550; padding: var(--sp-2) var(--sp-3); border-radius: var(--radius-sm); font-size: .98rem; } .nav-links a:hover { color: var(--text); background: var(--surface-2); } .nav-links a[aria-current="page"] { color: var(--text); } .icon-btn { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); color: var(--text); cursor: pointer; } .icon-btn:hover { background: var(--surface-2); } .icon-btn .sun-icon { display: none; } :root[data-theme="dark"] .icon-btn .sun-icon, :root:not([data-theme="light"]) .icon-btn .sun-icon { display: block; } :root[data-theme="dark"] .icon-btn .moon-icon, :root:not([data-theme="light"]) .icon-btn .moon-icon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .icon-btn .sun-icon { display: none; } :root:not([data-theme="dark"]) .icon-btn .moon-icon { display: block; } } .nav-toggle { display: none; } /* ------------------------------ Buttons --------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); font-weight: 650; font-size: 1rem; line-height: 1; padding: 0.9rem 1.4rem; border-radius: 999px; border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: transform .08s ease, background .15s ease; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--brand); color: var(--on-brand); } .btn-primary:hover { background: var(--brand-ink); color: var(--on-brand); } .btn-ghost { background: var(--surface); color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); color: var(--text); } /* "Coming soon" App Store badge — NOT a link until a real URL is configured. */ .appstore { display: inline-flex; align-items: center; gap: var(--sp-3); padding: 0.7rem 1.2rem; border-radius: var(--radius-sm); background: var(--text); color: var(--bg); font-weight: 600; text-decoration: none; } .appstore[aria-disabled="true"] { opacity: .9; cursor: default; } .appstore .badge-label { display: flex; flex-direction: column; line-height: 1.1; text-align: left; } .appstore .badge-label .small { font-size: .72rem; opacity: .8; } .appstore .badge-label .big { font-size: 1.05rem; font-weight: 700; letter-spacing: -.01em; } .appstore svg { width: 26px; height: 26px; flex: none; } .cta-row { display: flex; flex-wrap: wrap; gap: var(--sp-4); align-items: center; } .compat-note { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: .95rem; color: var(--text-muted); font-weight: 550; } .compat-note svg { width: 18px; height: 18px; color: var(--brand); } /* ------------------------------ Hero ------------------------------------ */ .hero { position: relative; padding: clamp(3rem, 8vw, 6rem) 0 clamp(2.5rem, 6vw, 4.5rem); overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(120% 90% at 85% -10%, color-mix(in srgb, var(--sun) 26%, transparent), transparent 55%), radial-gradient(90% 70% at 0% 0%, color-mix(in srgb, var(--sky) 40%, transparent), transparent 60%); } .hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--sp-8); align-items: center; } .hero h1 { margin-bottom: var(--sp-5); } .hero .lede { font-size: clamp(1.1rem, 2.2vw, 1.3rem); color: var(--text-muted); margin-bottom: var(--sp-4); } .hero-tagline { font-size: 1.02rem; color: var(--text-muted); margin: 0 0 var(--sp-6); max-width: 54ch; } .hero-tagline strong { color: var(--text); font-weight: 650; } .hero-art { display: grid; place-items: center; } /* ---- Calm sunrise motion (all disabled by the prefers-reduced-motion rule above) ---- */ @keyframes mornio-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } @keyframes mornio-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } @keyframes mornio-sun-breathe { 0%, 100% { opacity: .3; transform: scale(1); } 50% { opacity: .65; transform: scale(1.09); } } @keyframes mornio-sun-rays { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Staggered fade-up of the hero copy on load */ .hero-copy > * { animation: mornio-rise .7s ease both; } .hero-copy > *:nth-child(2) { animation-delay: .06s; } .hero-copy > *:nth-child(3) { animation-delay: .12s; } .hero-copy > *:nth-child(4) { animation-delay: .18s; } .hero-copy > *:nth-child(5) { animation-delay: .24s; } .hero-art { animation: mornio-rise .8s ease .16s both; } /* Gentle float of the phone */ .device { animation: mornio-float 7s ease-in-out infinite; will-change: transform; } /* Sun: soft breathing halo + very slow rays */ .sun-glow { transform-box: fill-box; transform-origin: center; animation: mornio-sun-breathe 5.5s ease-in-out infinite; } .sun-rays { transform-box: fill-box; transform-origin: center; animation: mornio-sun-rays 60s linear infinite; } /* ------------------------------ Sections -------------------------------- */ section { padding: clamp(2.75rem, 7vw, 5rem) 0; } .section-head { max-width: 720px; margin: 0 auto var(--sp-7); text-align: center; } .section-head p { margin-inline: auto; } .bg-tint { background: var(--bg-tint); } /* Steps */ .steps { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); counter-reset: step; } .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow); } .step .num { width: 40px; height: 40px; border-radius: 999px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-weight: 800; margin-bottom: var(--sp-4); } .step h3 { margin-bottom: var(--sp-2); } .step p { margin: 0; color: var(--text-muted); } /* Feature cards */ .features { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sp-5); } .feature { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow); } .feature .ic { width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); margin-bottom: var(--sp-4); } .feature .ic svg { width: 26px; height: 26px; } .feature h3 { margin-bottom: var(--sp-2); font-size: 1.15rem; } .feature p { margin: 0; color: var(--text-muted); font-size: .98rem; } /* Use-cases chips */ .chips-group { margin-bottom: var(--sp-6); } .chips-group:last-child { margin-bottom: 0; } .chips-label { text-align: center; font-weight: 650; color: var(--text); margin: 0 0 var(--sp-4); font-size: 1.02rem; } .chips { display: flex; flex-wrap: wrap; gap: var(--sp-3); justify-content: center; } .chip { display: inline-flex; align-items: center; gap: var(--sp-2); background: var(--surface); border: 1px solid var(--border); padding: var(--sp-3) var(--sp-4); border-radius: 999px; font-weight: 550; box-shadow: var(--shadow); } .chip svg { width: 18px; height: 18px; color: var(--brand); } /* Plans */ .plans { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); align-items: stretch; } .plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: var(--sp-7); box-shadow: var(--shadow); display: flex; flex-direction: column; } .plan.featured { border-color: var(--brand); box-shadow: var(--shadow-lg); position: relative; } .plan .tag { position: absolute; top: -12px; right: var(--sp-6); background: var(--brand); color: var(--on-brand); font-size: .76rem; font-weight: 700; padding: var(--sp-1) var(--sp-3); border-radius: 999px; letter-spacing: .02em; } .plan h3 { font-size: 1.4rem; } .plan .plan-sub { color: var(--text-muted); margin-top: -.5rem; } .plan ul { list-style: none; padding: 0; margin: var(--sp-4) 0 0; } .plan li { display: flex; gap: var(--sp-3); align-items: flex-start; margin-bottom: var(--sp-3); } .plan li svg { width: 20px; height: 20px; color: var(--good); flex: none; margin-top: 3px; } /* Compatibility band */ .compat-band { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border)); border-radius: var(--radius-lg); padding: var(--sp-7); text-align: center; } .compat-band h2 { margin-bottom: var(--sp-3); } .compat-band .badge-os { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: 1.15rem; font-weight: 700; color: var(--brand); margin-bottom: var(--sp-3); } /* FAQ */ .faq { max-width: 820px; margin-inline: auto; } .faq details { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); margin-bottom: var(--sp-3); overflow: hidden; } .faq summary { list-style: none; cursor: pointer; padding: var(--sp-5); font-weight: 650; display: flex; justify-content: space-between; align-items: center; gap: var(--sp-4); } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: ""; width: 12px; height: 12px; flex: none; border-right: 2px solid var(--text-muted); border-bottom: 2px solid var(--text-muted); transform: rotate(45deg); transition: transform .2s ease; margin-right: 4px; } .faq details[open] summary::after { transform: rotate(225deg); } .faq .answer { padding: 0 var(--sp-5) var(--sp-5); color: var(--text-muted); } .faq .answer p:last-child { margin-bottom: 0; } /* ------------------------------ Footer ---------------------------------- */ .site-footer { border-top: 1px solid var(--border); background: var(--surface-2); padding: var(--sp-8) 0 var(--sp-7); } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--sp-6); } .footer-grid h4 { font-size: .85rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: var(--sp-4); } .footer-grid ul { list-style: none; padding: 0; margin: 0; } .footer-grid li { margin-bottom: var(--sp-3); } .footer-grid a { color: var(--text); text-decoration: none; } .footer-grid a:hover { text-decoration: underline; } .footer-brand .brand { margin-bottom: var(--sp-3); } .footer-bottom { display: flex; flex-wrap: wrap; gap: var(--sp-3) var(--sp-5); justify-content: space-between; align-items: center; margin-top: var(--sp-7); padding-top: var(--sp-5); border-top: 1px solid var(--border); color: var(--text-muted); font-size: .9rem; } .appstore-soon { display: inline-flex; align-items: center; gap: var(--sp-2); font-size: .9rem; color: var(--text-muted); } .appstore-soon .dot { width: 8px; height: 8px; border-radius: 999px; background: var(--sun); } /* ------------------------------ Legal/doc pages ------------------------- */ .doc { padding-top: var(--sp-8); padding-bottom: var(--sp-8); } .doc-head { margin-bottom: var(--sp-7); } .doc-head .updated { color: var(--text-muted); font-size: .95rem; } .doc-layout { display: grid; grid-template-columns: 240px 1fr; gap: var(--sp-8); align-items: start; } .toc { position: sticky; top: 84px; font-size: .92rem; border-left: 2px solid var(--border); padding-left: var(--sp-4); } .toc h4 { font-size: .78rem; text-transform: uppercase; letter-spacing: .08em; color: var(--text-muted); margin-bottom: var(--sp-3); } .toc ul { list-style: none; padding: 0; margin: 0; } .toc li { margin-bottom: var(--sp-2); } .toc a { color: var(--text-muted); text-decoration: none; } .toc a:hover { color: var(--brand); } .doc-body h2 { margin-top: var(--sp-7); scroll-margin-top: 84px; font-size: 1.5rem; } .doc-body h2:first-child { margin-top: 0; } .doc-body h3 { margin-top: var(--sp-5); font-size: 1.12rem; } .doc-body p, .doc-body li { color: var(--text); } .doc-body ul, .doc-body ol { max-width: var(--measure); } .callout { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 20%, var(--border)); border-radius: var(--radius); padding: var(--sp-5); margin: var(--sp-5) 0; } .callout.warn { background: color-mix(in srgb, var(--sun) 16%, var(--surface)); border-color: color-mix(in srgb, var(--sun) 40%, var(--border)); } .callout p:last-child { margin-bottom: 0; } /* Support page specifics */ .support-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-5); } .support-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: var(--sp-6); box-shadow: var(--shadow); } .support-card h3 { display: flex; align-items: center; gap: var(--sp-3); } .support-card h3 svg { width: 22px; height: 22px; color: var(--brand); } .checklist { list-style: none; padding: 0; margin: var(--sp-3) 0 0; } .checklist li { display: flex; gap: var(--sp-3); align-items: flex-start; } .checklist li::before { content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--brand); margin-top: 10px; flex: none; } .contact-card { background: var(--brand-soft); border: 1px solid color-mix(in srgb, var(--brand) 22%, var(--border)); border-radius: var(--radius-lg); padding: var(--sp-7); text-align: center; margin-bottom: var(--sp-7); } .contact-card .email { font-size: 1.4rem; font-weight: 700; word-break: break-word; } /* 404 */ .notfound { min-height: 60vh; display: grid; place-items: center; text-align: center; padding: var(--sp-8) 0; } .notfound .code { font-size: clamp(4rem, 18vw, 9rem); font-weight: 800; color: var(--brand); letter-spacing: -.04em; line-height: 1; margin: 0; } /* Device mockup */ .device { width: min(300px, 78vw); aspect-ratio: 300 / 610; border-radius: 42px; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); padding: 14px; position: relative; } .device .screen { width: 100%; height: 100%; border-radius: 30px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--sky) 60%, var(--surface)) 0%, var(--surface) 46%); display: flex; flex-direction: column; } .device .notch { position: absolute; top: 22px; left: 50%; transform: translateX(-50%); width: 96px; height: 26px; background: #0b0e16; border-radius: 999px; z-index: 2; } /* ---- "Protected Morning" timeline shown inside the phone (always light, like a real iOS screen). Sizes use container-query units so it scales with the device width. ---- */ .device .screen.pm-screen { background: #FBFCFE; } .pm-screen { container-type: inline-size; position: relative; color: #1B2230; -webkit-font-smoothing: antialiased; } .pm-sky { position: absolute; inset: 0 0 auto 0; height: 33%; overflow: hidden; background: radial-gradient(130% 100% at 80% -25%, #FAD7A8 0%, rgba(250,215,168,0) 62%), linear-gradient(180deg, #E7EFFB 0%, #F2F6FC 72%, #FBFCFE 100%); } .pm-sun { position: absolute; right: 15%; top: 16%; width: 22cqw; height: 22cqw; border-radius: 50%; background: linear-gradient(180deg, #F7C16B, #E97E67); box-shadow: 0 0 9cqw 3cqw rgba(242,166,90,.4); opacity: .9; animation: mornio-sun-breathe 5.5s ease-in-out infinite; } .pm-body { position: relative; z-index: 1; flex: 1; padding: 6cqw 6.5cqw 7cqw; padding-top: 40px; /* fixed status-bar gap clears the notch at any size */ display: flex; flex-direction: column; justify-content: space-between; gap: 4cqw; } .pm-top { display: flex; flex-direction: column; gap: 2cqw; } .pm-pill { align-self: flex-start; display: inline-flex; align-items: center; gap: 1.8cqw; background: #2E7D5B; color: #fff; font-weight: 700; font-size: 4.1cqw; padding: 1.7cqw 3.4cqw 1.7cqw 1.7cqw; border-radius: 999px; box-shadow: 0 2cqw 5cqw rgba(46,125,91,.3); } .pm-pill svg { width: 5cqw; height: 5cqw; padding: 1cqw; box-sizing: border-box; background: rgba(255,255,255,.22); border-radius: 50%; } .pm-when { margin: 0; color: #5A6373; font-size: 3.6cqw; font-weight: 600; } .pm-card { background: #fff; border: 1px solid #EEF1F6; border-radius: 5.5cqw; padding: 4.5cqw 5cqw; text-align: center; box-shadow: 0 1cqw 2cqw rgba(20,28,48,.05), 0 7cqw 16cqw rgba(20,28,48,.09); } .pm-time { font-size: 18cqw; font-weight: 800; letter-spacing: -.6cqw; line-height: 1; } .pm-time span { font-size: 5.4cqw; font-weight: 700; margin-left: 1.4cqw; color: #8A93A3; vertical-align: .7em; } .pm-card-label { margin-top: 1.8cqw; font-weight: 700; font-size: 3.8cqw; min-height: 4.6cqw; } .pm-card-label span { display: none; } .pm-screen[data-pm="0"] .pm-card-label span[data-when="0"] { display: inline; color: #2E7D5B; } .pm-screen[data-pm="1"] .pm-card-label span[data-when="1"] { display: inline; color: #D9812F; } .pm-screen[data-pm="2"] .pm-card-label span[data-when="2"] { display: inline; color: #33518F; } .pm-track { display: flex; flex-direction: column; position: relative; } .pm-track::before { content: ""; position: absolute; left: 3.75cqw; top: 7cqw; bottom: 7cqw; width: 0.5cqw; background: #E2E7EF; border-radius: 2px; z-index: 0; } .stage-wake { --c: #2E7D5B; } .stage-awake { --c: #D9812F; } .stage-backup { --c: #33518F; } .pm-stage { display: flex; gap: 3.4cqw; align-items: flex-start; padding: 2.6cqw 0; opacity: .5; transition: opacity .45s ease; } .pm-node { flex: none; width: 8cqw; height: 8cqw; border-radius: 50%; position: relative; z-index: 1; display: grid; place-items: center; background: var(--c); color: #fff; } .pm-node svg { width: 4.6cqw; height: 4.6cqw; } .pm-info { display: flex; flex-direction: column; gap: .7cqw; padding-top: .5cqw; } .pm-info strong { font-size: 3.95cqw; font-weight: 700; line-height: 1.05; } .pm-info span { font-size: 3.45cqw; color: #5A6373; line-height: 1.25; } /* Stages "light up" as the morning progresses through the states. */ .pm-screen[data-pm="0"] .stage-wake, .pm-screen[data-pm="1"] .stage-wake, .pm-screen[data-pm="1"] .stage-awake, .pm-screen[data-pm="2"] .stage-wake, .pm-screen[data-pm="2"] .stage-awake, .pm-screen[data-pm="2"] .stage-backup { opacity: 1; } @keyframes pm-pulse { 0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--c) 55%, transparent); } 70% { box-shadow: 0 0 0 4cqw transparent; } 100% { box-shadow: 0 0 0 0 transparent; } } .pm-screen[data-pm="0"] .stage-wake .pm-node, .pm-screen[data-pm="1"] .stage-awake .pm-node, .pm-screen[data-pm="2"] .stage-backup .pm-node { animation: pm-pulse 1.8s ease-out infinite; } .pm-status { margin: 0; text-align: center; font-weight: 600; font-size: 3.55cqw; color: #5A6373; } .pm-status span { display: none; } .pm-screen[data-pm="0"] .pm-status span[data-when="0"], .pm-screen[data-pm="1"] .pm-status span[data-when="1"], .pm-screen[data-pm="2"] .pm-status span[data-when="2"] { display: inline; } /* ------------------------------ Responsive ------------------------------ */ @media (max-width: 900px) { .hero-grid { grid-template-columns: 1fr; gap: var(--sp-6); } /* Content-first when stacked: headline + CTA come before the product shot. */ .features { grid-template-columns: 1fr 1fr; } .steps { grid-template-columns: 1fr 1fr; } .doc-layout { grid-template-columns: 1fr; } .toc { position: static; border-left: none; border-top: 1px solid var(--border); padding: var(--sp-4) 0 0; padding-left: 0; } } @media (max-width: 760px) { .nav-links { position: fixed; inset: 64px 0 auto 0; flex-direction: column; align-items: stretch; background: var(--bg); border-bottom: 1px solid var(--border); padding: var(--sp-4); gap: var(--sp-1); transform: translateY(-130%); transition: transform .22s ease; box-shadow: var(--shadow-lg); } .nav-links.open { transform: translateY(0); } .nav-links a { padding: var(--sp-4); font-size: 1.05rem; } .nav-toggle { display: inline-grid; place-items: center; width: 42px; height: 42px; margin-left: auto; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface); cursor: pointer; color: var(--text); } .nav .theme-toggle { margin-left: 0; } .steps { grid-template-columns: 1fr; } .features { grid-template-columns: 1fr; } .plans { grid-template-columns: 1fr; } .support-grid { grid-template-columns: 1fr; } /* Content-first, centered hero on phones; the product shot becomes a smaller supporting visual below the value proposition instead of filling the screen. */ .hero { padding-top: var(--sp-6); } .hero-grid { gap: var(--sp-7); } .hero-copy { text-align: center; } .hero h1 { margin-bottom: var(--sp-4); } .hero .lede, .hero-tagline { margin-left: auto; margin-right: auto; } .hero-tagline { max-width: 42ch; } .cta-row { flex-direction: column; align-items: center; gap: var(--sp-4); } .appstore { width: 100%; max-width: 300px; justify-content: center; padding-block: 0.85rem; } .compat-note { justify-content: center; } .device { width: min(244px, 66vw); } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 440px) { .footer-grid { grid-template-columns: 1fr; } .cta-row { gap: var(--sp-3); } }