@charset "UTF-8";
@font-face { font-family: Manrope; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/ui/fonts/manrope-latin.woff2") format("woff2"); }
:root { color-scheme: light; --ink: #193856; --muted: #63778b; --blue: #0a66c2; --mint: #9ef0cb; --line: #dae6f0; font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; font-synthesis: none; }
* { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 100px; }
body { margin: 0; background: #f7f9fc; color: var(--ink); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; }
a { color: inherit; }
a, summary, button { touch-action: manipulation; -webkit-tap-highlight-color: transparent; }
button { font: inherit; cursor: pointer; }
button[hidden] { display: none; }
a:focus-visible, summary:focus-visible, button:focus-visible, [tabindex="0"]:focus-visible { outline: 3px solid #0a66c2; outline-offset: 5px; }
.glass-shell a:focus-visible, .closing-section a:focus-visible { outline-color: #fff; }
.wrap { width: min(1120px, 100%); margin: 0 auto; padding-left: max(40px, env(safe-area-inset-left)); padding-right: max(40px, env(safe-area-inset-right)); }
.svg-library { position: absolute; width: 0; height: 0; overflow: hidden; }
.icon { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; flex-shrink: 0; }
.skip-link { position: absolute; top: -100px; left: 24px; padding: 12px 20px; border-radius: 10px; background: #fff; color: #17477e; z-index: 20; }
.skip-link:focus { top: 12px; }
.landing-stage { position: relative; isolation: isolate; padding: 42px 34px 62px; overflow: hidden; background: radial-gradient(ellipse at 88% 4%, #c2e3fc, transparent 52%), radial-gradient(ellipse at 0 70%, #dbf3e9, transparent 55%), #edf2ff; }
.glass-shell { position: relative; max-width: 1230px; margin: auto; border-radius: 42px; border: 1px solid #ffffff8a; overflow: hidden; background: radial-gradient(ellipse at 100% 80%, #30b3b51c, transparent 50%), linear-gradient(130deg, #163e9d, #0c61b4 63%, #075377); box-shadow: 0 25px 65px -35px #1647768c, inset 0 1px 0 #ffffff30; }
.glass-shell::after { content: ""; position: absolute; inset: 20% -10% 0 45%; background: radial-gradient(ellipse, #a0d8fb12, transparent 67%); pointer-events: none; z-index: 0; }
.ambient-orb { position: absolute; z-index: -1; border-radius: 50%; }
.ambient-green { width: 190px; height: 190px; top: -45px; left: -35px; background: radial-gradient(circle at 30% 25%, #baffdf, #43dca1 55%, #05a271); box-shadow: inset -12px -20px 30px #19856320; }
.ambient-gold { width: 96px; height: 96px; top: 92px; left: -33px; background: radial-gradient(circle at 30% 25%, #fff1af, #ffcb53 55%, #e8a42b); }
.site-header { position: relative; z-index: 3; display: flex; align-items: center; justify-content: space-between; min-height: 102px; gap: 24px; color: #fff; }
.brand { display: inline-flex; align-items: center; min-height: 44px; gap: 9px; color: #fff; font-weight: 750; font-size: 24px; letter-spacing: -.9px; text-decoration: none; }
.brand img { width: 30px; height: 30px; border-radius: 50%; box-shadow: 0 0 0 3px #ffffff26; }
.site-header nav { display: flex; align-items: center; gap: 32px; font-size: 12px; }
.header-explore { min-height: 44px; display: flex; align-items: center; text-decoration: none; }
.header-download { min-height: 44px; display: inline-flex; align-items: center; padding: 0 18px; border: 1px solid #a9d8fc83; border-radius: 99px; background: #ffffff12; text-decoration: none; font-weight: 600; }
.header-download::after { content: "↗"; margin-left: 10px; font-size: 17px; }
.hero { position: relative; padding: 23px 0 105px; color: #fff; }
.hero-layout { position: relative; z-index: 2; display: grid; grid-template-columns: 1.1fr 1fr; gap: 27px; align-items: center; }
.hero-intro { min-width: 0; padding-bottom: 10px; }
.eyebrow { font-size: 11px; font-weight: 650; margin: 0 0 20px; letter-spacing: .1px; }
.hero .eyebrow { display: flex; align-items: center; gap: 8px; color: #eff8ff; }
.eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: #a1f4ce; box-shadow: 0 0 0 4px #9ef0cb1c; }
h1 { font-size: clamp(42px, 4.65vw, 64px); line-height: 1.13; letter-spacing: -2.5px; font-weight: 650; margin: 0; animation: rise-in .85s both; }
h1 > span { color: #b1f7d6; display: inline-block; position: relative; }
.headline-stroke { position: absolute; width: 100%; height: 20px; left: 0; bottom: -15px; fill: none; stroke: #ffda76; stroke-width: 3; stroke-linecap: round; pointer-events: none; }
.headline-stroke path { stroke-dasharray: 1; animation: connection-draw 1.3s .3s both; }
.hero-description { margin: 33px 0 0; max-width: 380px; color: #eff7ff; font-size: 14px; line-height: 1.85; animation: rise-in .9s .05s both; }
.download-panel { margin-top: 26px; max-width: 403px; scroll-margin-top: 30px; }
.download-panel h2 { font-size: 12px; font-weight: 500; margin: 0 0 13px; line-height: 1.65; color: #f4f9ff; }
/* Original sources are retained. Apple uses an outer-fill-only derivative and
   Google's gray edge is masked; a separate black backing supplies the shadow. */
.store-options { --store-badge-height: 48px; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.store-option { flex: 0 0 auto; }
.store-button { position: relative; isolation: isolate; min-height: 44px; height: calc(var(--store-badge-height) * 250 / 166); display: flex; align-items: center; justify-content: center; border: 0; border-radius: 7px; color: #fff; text-decoration: none; }
.store-button::before { content: ""; position: absolute; inset: 0; margin: auto; height: var(--store-badge-height); border-radius: calc(var(--store-badge-height) * .15); background: #000; box-shadow: 0 9px 20px -4px #031a4f80, 0 3px 7px #031a4f33; pointer-events: none; z-index: -1; }
.store-option-ios .store-button::before { width: calc(var(--store-badge-height) * 2.99160175); }
.store-option-android .store-button::before { width: calc(var(--store-badge-height) * 562 / 166); }
.store-option-ios .store-button { width: calc(var(--store-badge-height) * 3.49160175); }
.store-option-android .store-button { width: calc(var(--store-badge-height) * 646 / 166); }
.store-badge { display: block; flex: 0 0 auto; object-fit: contain; }
.store-option-ios .store-badge { height: var(--store-badge-height); width: auto; }
.store-option-android .store-badge { width: 100%; height: auto; clip-path: inset(20% 8% round calc(var(--store-badge-height) * .2)); }
.download-description { font-size: 11px; color: #f2f8ff; margin: 15px 0 0; line-height: 1.7; }
.download-button { display: inline-flex; align-items: center; justify-content: center; min-width: 44px; min-height: 44px; margin-top: 5px; padding: 8px 0; color: #fff; font-size: 10px; text-decoration: underline; text-underline-offset: 3px; }
.download-button small { font-size: inherit; }
.hero-art-stage { position: relative; min-width: 0; isolation: isolate; }
.physics-board { position: relative; transform-origin: center; }
.hero-mosaic { position: relative; width: 100%; aspect-ratio: .95; min-width: 0; }
.scene-orbs { position: absolute; width: 116%; height: 116%; left: -8%; top: -8%; pointer-events: none; }
.scene-orb { animation: orb-arrive 1.5s cubic-bezier(.2, .8, .2, 1) both; transform-box: fill-box; transform-origin: center; }
.device-shadow { position: absolute; width: 50%; height: 8%; left: 30%; bottom: 0; background: #0b417ba1; filter: blur(17px); border-radius: 50%; transform: rotate(-8deg); }
.hero-device { position: absolute; width: 50%; height: 87%; top: 3%; left: 32%; border: 9px solid #f3faff; border-radius: 36px; background: #e2eff8; box-shadow: -7px 3px 0 #adcee7, 16px 27px 39px #05377151, inset 0 0 0 1px #fff; transform: rotate(7deg); animation: device-arrive 1.2s cubic-bezier(.16, 1, .3, 1) both; }
.device-screen { position: relative; height: 100%; overflow: hidden; border-radius: 26px; padding: 37px 15px 12px; background: linear-gradient(160deg, #72b3e2, #286daa 62%, #175c9b); }
.device-notch { position: absolute; left: calc(50% - 39px); top: -1px; width: 78px; height: 16px; border-radius: 0 0 13px 13px; background: #f3faff; }
.device-notch::after { content: ""; display: block; width: 26px; height: 3px; margin: 4px auto; border-radius: 3px; background: #d6e2eb; }
.device-wordmark { color: #fff; font-size: 15px; font-weight: 750; letter-spacing: -.6px; }
.device-wordmark span { color: #9af0c5; }
.device-welcome { font-size: 6px; letter-spacing: 1.15px; color: #effaff; margin-top: 25px; }
.device-headline { font-size: 27px; font-weight: 650; line-height: 1.15; letter-spacing: -.9px; margin-top: 9px; color: #fff; }
.device-icons { display: flex; justify-content: space-between; margin-top: 20px; color: #fff; gap: 5px; }
.device-icons > span { display: flex; flex-direction: column; align-items: center; gap: 5px; font-size: 6px; min-width: 0; }
.device-icons .icon { width: 32px; height: 32px; padding: 8px; border: 1px solid #ffffff3b; border-radius: 10px; background: #ffffff1d; }
.device-message { display: flex; align-items: center; gap: 6px; margin-top: 20px; padding: 9px 7px; border-radius: 10px; background: #ffffffed; color: #295274; }
.device-message-icon { display: grid; place-items: center; width: 24px; height: 28px; background: #d4f2e4; border-radius: 7px; color: #288260; flex-shrink: 0; }
.device-message-icon .icon { width: 14px; height: 14px; }
.device-message strong { display: block; font-size: 7px; font-weight: 700; }
.device-message div > span { display: block; font-size: 5.7px; margin-top: 2px; }
.device-ripples { position: absolute; width: 130%; aspect-ratio: 1; left: -15%; bottom: -48%; pointer-events: none; }
.device-ripples span { position: absolute; inset: 0; border-radius: 50%; background: #dbf0ff2c; }
.device-ripples span:nth-child(2) { inset: 15%; background: #eaf7ff31; }
.device-ripples span:nth-child(3) { inset: 30%; background: #f3fbff45; }
.device-home { position: absolute; bottom: 7px; left: calc(50% - 22px); width: 44px; height: 3px; background: #fff; border-radius: 9px; }
.floating-panel { position: absolute; border-radius: 20px; background: #fff; color: #264967; border: 1px solid #ffffffd9; box-shadow: 0 18px 30px #03396a2e, inset 0 1px 0 #fff; animation: panel-arrive 1.05s .14s both; }
.profile-panel { width: 42%; top: 0; right: -1%; padding: 16px; display: grid; grid-template-columns: 32px 1fr; gap: 10px; transform: rotate(-5deg); }
.profile-avatar { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 10px; background: #e4eefb; color: #337cbd; }
.profile-avatar .icon { width: 20px; height: 20px; }
.profile-caption { align-self: center; min-width: 0; }
.profile-caption strong { display: block; font-size: 11px; font-weight: 750; }
.profile-caption > span { display: block; font-size: 7px; color: #678398; margin-top: 2px; }
.profile-bars { display: grid; gap: 6px; grid-column: 1 / -1; margin: 4px 0; }
.profile-bars i { display: block; height: 5px; border-radius: 3px; background: #e8eef3; width: 100%; }
.profile-bars i:first-child { width: 85%; background: #3086cf; }
.profile-bars i:nth-child(2) { width: 68%; }
.profile-ready { display: flex; align-items: center; gap: 5px; grid-column: 1 / -1; font-size: 8px; color: #528773; }
.profile-ready > span { display: grid; place-items: center; width: 15px; height: 15px; border-radius: 50%; background: #d8f4e6; color: #198857; font-size: 9px; }
.opportunity-panel { width: 44%; left: -1%; top: 41%; padding: 17px; transform: rotate(-7deg); background: linear-gradient(135deg, #fff, #f1f8ff); }
.opportunity-icon { display: grid; place-items: center; width: 33px; height: 33px; border-radius: 11px; background: #fff0c7; color: #a47318; margin-bottom: 12px; }
.opportunity-icon .icon { width: 20px; height: 20px; }
.panel-kicker { display: block; font-size: 6px; font-weight: 700; letter-spacing: .8px; color: #6b8ca8; margin-bottom: 5px; }
.opportunity-panel strong { display: block; font-size: 22px; line-height: 1.15; letter-spacing: -.7px; font-weight: 700; }
.opportunity-location { display: flex; align-items: center; gap: 3px; font-size: 7px; color: #688ba3; margin-top: 13px; }
.opportunity-location .icon { width: 11px; height: 11px; }
.people-panel { width: 58%; right: -2%; bottom: 4%; padding: 12px; display: flex; align-items: center; gap: 10px; border-radius: 17px; transform: rotate(-4deg); }
.people-avatars { display: flex; flex-shrink: 0; padding-left: 3px; }
.people-avatars span { display: grid; place-items: center; width: 25px; height: 25px; border: 2px solid #fff; border-radius: 50%; margin-left: -5px; background: #afd6ee; color: #2c6186; font-size: 8px; font-weight: 800; }
.people-avatars span:nth-child(2) { background: #f5d69b; color: #8b682c; }
.people-avatars span:nth-child(3) { background: #b7e5d2; color: #3e7f67; }
.people-panel > div:nth-child(2) { min-width: 0; flex: 1; }
.people-panel strong { display: block; font-size: 10px; line-height: 1.3; font-weight: 750; }
.people-panel div > span:not(.people-avatars span) { display: block; font-size: 7px; color: #6b8aa0; margin-top: 3px; }
.people-panel > .icon { width: 11px; height: 11px; color: #8ab6d6; }
.hero-terrain { position: absolute; bottom: -2px; width: 100%; height: 165px; left: 0; z-index: 1; pointer-events: none; animation: terrain-arrive 1.2s both; }
.feature-nav { display: flex; position: sticky; top: 12px; z-index: 8; width: max-content; max-width: calc(100% - 32px); margin: -31px auto 0; align-items: center; justify-content: center; gap: 30px; padding: 9px 27px; border-radius: 22px; background: #fff; border: 1px solid #e5eef8; box-shadow: 0 12px 30px -15px #2d679c48; }
.feature-nav a { display: flex; align-items: center; gap: 7px; min-height: 44px; color: #486882; font-size: 11px; font-weight: 650; text-decoration: none; }
.feature-nav .icon { width: 17px; height: 17px; color: #3484c6; }
.chapter, #feed, #network, #jobs, #clips, #blogs { scroll-margin-top: 105px; }
.chapter { padding-top: 80px; padding-bottom: 75px; }
.chapter-heading { text-align: center; margin-bottom: 40px; }
.chapter-heading .eyebrow { color: #256b9d; font-size: 10px; letter-spacing: 1.7px; margin-bottom: 16px; }
.chapter-heading h2 { font-size: clamp(34px, 3.6vw, 47px); font-weight: 650; letter-spacing: -1.8px; line-height: 1.18; margin: 0; color: #23435f; }
.chapter-heading h2 > span { color: #3987c0; }
.chapter-heading > p:last-child { font-size: 14px; line-height: 1.8; color: #526b80; margin: 19px 0 0; }
.connections-ribbon { display: block; width: min(100%, 660px); height: auto; margin: 0 auto 33px; }
.journey-route { stroke-dasharray: 1; stroke-dashoffset: 0; }
.journey-node { transform-box: fill-box; transform-origin: center; }
.story-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 27px; }
.story-card { border-radius: 29px; min-width: 0; overflow: hidden; border: 1px solid #e4eef8; box-shadow: 0 16px 40px -27px #2a689958; }
.story-copy { padding: 15px 33px 34px; }
.feature-label { display: flex; align-items: center; gap: 7px; font-size: 10px; font-weight: 750; color: #256b9d; margin-bottom: 14px; }
.feature-label .icon { width: 17px; height: 17px; }
.story-copy h3 { margin: 0; font-size: clamp(26px, 2.6vw, 34px); line-height: 1.2; letter-spacing: -1.2px; font-weight: 650; }
.story-copy p { font-size: 14px; line-height: 1.85; color: #526b80; margin: 15px 0 0; }
.feed-story { background: linear-gradient(145deg, #dfefff, #fff); }
.feed-demo { width: 75%; max-width: 335px; margin: 33px auto 30px; border-radius: 19px; background: #fff; box-shadow: 0 14px 36px -18px #486d8170; transform: rotate(-3deg); overflow: hidden; }
.demo-profile { display: flex; align-items: center; gap: 8px; padding: 13px; }
.demo-avatar { display: grid; place-items: center; width: 29px; height: 29px; border-radius: 50%; background: #dde8f7; color: #56749a; font-size: 11px; font-weight: 600; }
.demo-profile > div { flex: 1; }
.demo-profile strong { display: block; font-size: 10px; font-weight: 600; }
.demo-profile small { display: block; font-size: 8px; color: #84868d; margin-top: 2px; }
.demo-profile > span:last-child { font-size: 16px; color: #8c9198; }
.feed-landscape { display: block; width: 100%; height: 171px; object-fit: cover; background: #b8d8e8; }
.demo-comment { display: flex; align-items: center; gap: 9px; padding: 7px 13px; font-size: 9px; color: #6d7279; }
.demo-comment span:first-child { font-size: 25px; color: #8a5b54; }
.demo-comment span:last-child { margin-left: auto; font-size: 20px; }
.demo-compose { display: flex; align-items: center; justify-content: space-between; font-size: 8px; margin: 0 13px 13px; padding: 9px; background: #f2f4f7; border-radius: 7px; color: #838891; }
.demo-compose span:last-child { font-size: 14px; color: #4173ab; }
.network-story { background: #ddf5e9; }
.network-demo { position: relative; width: 100%; height: 354px; }
.network-lines { position: absolute; width: 100%; height: 100%; fill: none; stroke: #a8d4c2; stroke-width: 1; }
.network-lines path { stroke-dasharray: 3 6; }
.network-center { display: grid; place-items: center; position: absolute; top: 40%; left: calc(50% - 39px); width: 78px; height: 78px; background: #fff; box-shadow: 0 12px 30px -14px #274a835c; border-radius: 25px; }
.network-center img { border-radius: 50%; }
.network-person { position: absolute; display: grid; place-items: center; border-radius: 50%; width: 53px; height: 53px; font-family: Georgia, serif; font-size: 23px; color: #476279; border: 5px solid #ffffffb5; }
.person-one { left: 15%; top: 18%; background: #8fc1ee; }
.person-two { right: 15%; top: 14%; background: #efc07d; color: #8f6150; }
.person-three { left: 15%; bottom: 16%; background: #9bd3b3; color: #667b52; }
.person-four { right: 15%; bottom: 14%; background: #bcb0e1; color: #73618c; }
.connection-chip { position: absolute; bottom: 6px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; align-items: center; white-space: nowrap; padding: 8px 13px; border: 1px solid #b9dacb; border-radius: 99px; background: #f8fffb; font-size: 9px; color: #356b56; }
.connection-chip .icon { width: 15px; height: 15px; }

.product-section { position: relative; overflow: hidden; background: linear-gradient(120deg, #e3f0ff, #edf7fd 45%, #d3e8fb); border-top: 1px solid #fff; border-bottom: 1px solid #fff; }
.product-layout { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr 1fr; gap: 65px; align-items: center; padding-top: 78px; padding-bottom: 56px; }
.product-copy .eyebrow { color: #25679a; font-size: 10px; letter-spacing: 1.2px; }
.product-copy h2 { margin: 0; font-size: clamp(32px, 3.4vw, 43px); font-weight: 650; line-height: 1.2; letter-spacing: -1.7px; }
.product-copy h2 > span { color: #2879b2; }
.product-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.9; max-width: 395px; color: #4d667b; margin: 23px 0 17px; }
.job-benefits { list-style: none; margin: 22px 0 12px; padding: 0; }
.job-benefits li { display: flex; align-items: flex-start; gap: 10px; font-size: 12px; line-height: 1.8; margin: 15px 0; color: #4d667b; }
.job-benefits .icon { width: 17px; height: 17px; color: #3185c6; margin-top: 2px; }
.text-link { display: inline-flex; align-items: center; gap: 7px; min-height: 44px; color: #256b9d; font-size: 12px; font-weight: 650; text-decoration: none; }
.text-link .icon { width: 14px; height: 14px; }
.product-copy .text-link { color: #25679a; }
.app-sections { display: none; }
.product-preview { margin: 0; min-width: 0; text-align: center; }
.jobs-backdrop { position: absolute; width: 75%; height: 100%; top: 0; right: -10%; opacity: .3; pointer-events: none; }
.phone { width: 310px; max-width: 100%; margin: 0 auto; padding: 7px; border: 2px solid #727277; border-radius: 48px; background: #202024; box-shadow: 0 2px 0 1px #d0d0d4, 0 28px 38px -22px #1818234a; }
.phone-screen { background: #fff; border-radius: 38px; overflow: hidden; }
.phone-status { display: flex; position: relative; justify-content: space-between; align-items: center; height: 40px; padding: 5px 23px 0; font-size: 11px; font-weight: 600; }
.phone-status svg { width: 36px; height: 12px; }
.camera { position: absolute; width: 72px; height: 19px; border-radius: 20px; background: #202024; left: calc(50% - 36px); top: 8px; }
.preview-brand { display: flex; align-items: center; justify-content: space-between; padding: 15px 17px 14px; }
.preview-brand > span:first-child { display: flex; align-items: center; gap: 5px; font-weight: 650; font-size: 18px; letter-spacing: -.8px; }
.preview-avatar { display: grid; place-items: center; width: 26px; height: 26px; background: #e8eef9; border-radius: 50%; color: #3263a8; font-size: 10px; font-weight: 600; }
.preview-content { text-align: left; padding: 8px 16px 16px; }
.preview-eyebrow { font-size: 8px; letter-spacing: 1.2px; font-weight: 600; color: var(--blue); margin: 0 0 9px; }
.preview-content h3 { font-size: 32px; line-height: 1.09; font-weight: 650; letter-spacing: -1.15px; margin: 0 0 18px; }
.preview-search { display: flex; align-items: center; gap: 7px; padding: 12px; font-size: 9px; border: 1px solid #e8e8ed; border-radius: 9px; color: #70707c; background: #fafafb; }
.preview-search .icon { width: 15px; height: 15px; }
.preview-filters { display: flex; gap: 8px; margin: 13px 0; font-size: 8px; }
.preview-filters span { padding: 6px 12px; border-radius: 20px; border: 1px solid #e8e8ed; color: #63636c; }
.preview-filters .selected { background: #2868d2; border-color: #2868d2; color: #fff; }
.preview-map { border-radius: 12px; overflow: hidden; background: #fff; border: 1px solid #e5e9e8; }
.map-art { display: block; width: 100%; height: auto; }
.map-route { stroke-dasharray: 150; stroke-dashoffset: 0; animation: route-arrive 1.7s .25s both; }
.map-label { display: flex; align-items: center; gap: 5px; padding: 10px 8px; color: #42524a; font-size: 8px; }
.map-label .icon { width: 12px; height: 12px; }
.preview-job { display: flex; align-items: center; gap: 8px; margin-top: 14px; }
.job-icon { width: 33px; height: 33px; flex-shrink: 0; display: grid; place-items: center; border-radius: 8px; background: #edf2fa; color: #3668b5; }
.job-icon .icon { width: 17px; height: 17px; }
.preview-job > div { flex: 1; }
.preview-job strong { display: block; font-size: 10px; font-weight: 600; }
.preview-job div > span { display: block; font-size: 8px; color: #73737d; margin-top: 3px; }
.preview-job > .icon { width: 12px; height: 12px; color: #787880; }
.preview-nav { display: flex; justify-content: space-around; padding: 11px 10px 7px; border-top: 1px solid #ededf1; }
.preview-nav > span { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #74747c; font-size: 7px; }
.preview-nav .icon { width: 17px; height: 17px; }
.preview-nav .selected { color: var(--blue); }
.home-indicator { width: 86px; height: 4px; border-radius: 4px; background: #28282e; margin: 7px auto 8px; }
.product-preview figcaption { margin-top: 25px; font-size: 10px; color: #6e6e77; }
.product-preview figcaption > span { display: block; color: #74747b; font-size: 9px; margin-top: 2px; }

.phone { border-color: #f8fcff; border-width: 4px; padding: 5px; background: #d6e9f7; box-shadow: -5px 4px 0 #a6c7df, 15px 30px 38px -20px #3a79a35e; transform: rotate(4deg); }
.phone-screen { border-radius: 37px; }
.camera { background: #dcecf7; }
.preview-content h3 { font-family: Manrope, sans-serif; font-size: 29px; font-weight: 650; }
.home-indicator { background: #b3cfdf; }
.product-preview figcaption { font-size: 10px; color: #4d667b; margin-top: 26px; }
.product-preview figcaption > span { color: #4d667b; }
.clips-story { background: #0a66c2; color: #fff; }
.clips-story .feature-label { color: #ffffff; }
.clips-story .story-copy p { color: #e4f1ff; }
.clips-demo { position: relative; height: 375px; margin-top: 12px; overflow: hidden; }
.clip-back, .clip-front { position: absolute; width: 179px; height: 295px; border: 5px solid #fff; background: #315d66; border-radius: 23px; overflow: hidden; top: 29px; }
.clip-back { left: 17%; transform: rotate(-13deg) translateY(15px); opacity: .65; }
.clip-front { left: 39%; transform: rotate(9deg); box-shadow: 0 18px 30px #0003; }
.clip-front > svg, .clip-back > svg { display: block; width: 100%; height: 100%; }
.clip-front::after { content: ""; position: absolute; inset: 40% 0 0; background: linear-gradient(transparent, #173d49de); pointer-events: none; }
.clip-play { display: grid; place-items: center; position: absolute; top: 36%; left: calc(50% - 23px); width: 46px; height: 46px; border: 1px solid #ffffff8f; border-radius: 50%; font-size: 15px; color: #fff; background: #ffffff24; padding-left: 3px; }
.clip-caption { position: absolute; left: 14px; bottom: 27px; z-index: 1; color: #fff; }
.clip-caption > span { display: block; font-size: 8px; letter-spacing: 1px; margin-bottom: 8px; }
.clip-caption > strong { font-size: 23px; line-height: 1.12; letter-spacing: -.7px; }
.clip-progress { position: absolute; bottom: 14px; left: 14px; right: 14px; height: 2px; background: #ffffff6b; z-index: 1; }
.clip-progress > span { display: block; width: 55%; height: 100%; background: #fff; transform-origin: left; }
.blogs-story { background: #fff3d9; }
.blogs-story .feature-label { color: #876015; }
.blogs-story .story-copy p { color: #766039; }
.blog-demo { position: relative; height: 387px; overflow: hidden; }
.editorial-sheet { position: absolute; top: 32px; left: 17%; width: 68%; background: #fffdf7; border-radius: 6px; padding: 22px 23px; box-shadow: 0 17px 30px -17px #6a563c52; transform: rotate(6deg); }
.editorial-kicker { font-size: 7px; letter-spacing: 1.5px; color: #8f7d61; }
.editorial-sheet h4 { font-family: Georgia, serif; font-size: 34px; font-weight: 400; line-height: 1.02; letter-spacing: -1px; margin: 11px 0 15px; color: #4f5448; }
.editorial-art { position: relative; height: 91px; overflow: hidden; background: #dfebc8; border-radius: 3px; }
.editorial-art > span { position: absolute; width: 88px; height: 120px; border: 15px solid #6d994d; border-radius: 70px 70px 0 0; bottom: -30px; left: 12%; }
.editorial-art > span:nth-child(2) { left: 39%; height: 94px; border-color: #9ec579; }
.editorial-art > span:nth-child(3) { left: 69%; height: 141px; border-color: #b8d99b; }
.editorial-sheet p { font-family: Georgia, serif; font-size: 11px; line-height: 1.4; color: #736e5d; margin: 13px 0; }
.editorial-lines > span { display: block; height: 2px; background: #e4e1d7; margin-top: 5px; }
.editorial-lines > span:last-child { width: 70%; }
.reading-tag { position: absolute; bottom: 9px; left: 50%; transform: translateX(-50%); display: flex; gap: 7px; align-items: center; white-space: nowrap; background: #fff9e9; border: 1px solid #ecd5a5; border-radius: 99px; padding: 9px 13px; font-size: 9px; color: #8b652b; }
.reading-tag .icon { width: 15px; height: 15px; }

.clips-story { background: linear-gradient(140deg, #152652, #174576); color: #fff; }
.clips-story .feature-label { color: #f1f8ff; }
.clips-story .story-copy p { color: #f1f8ff; }
.blogs-story { background: linear-gradient(145deg, #ffedbe, #fff8e9); }
.blogs-story .story-copy p { color: #715f44; }
.preview-note { margin: 24px 0 0; text-align: center; color: #526b80; font-size: 10px; }
.closing-section { position: relative; overflow: hidden; margin: 0 auto; max-width: 1120px; border-radius: 34px; padding: 64px 0 69px; background: radial-gradient(ellipse at 0 100%, #238b984a, transparent 65%), linear-gradient(120deg, #102c5b, #174880); color: #fff; text-align: center; isolation: isolate; }
.closing-section::before, .closing-section::after { content: ""; position: absolute; z-index: -1; width: 330px; height: 330px; border: 45px solid #ffffff0d; border-radius: 50%; }
.closing-section::before { left: -80px; top: -180px; } .closing-section::after { right: -40px; bottom: -180px; }
.closing-section .eyebrow { color: #fff; font-size: 9px; letter-spacing: 1.3px; }
.closing-section h2 { font-size: clamp(36px, 4vw, 51px); font-weight: 600; letter-spacing: -1.9px; line-height: 1.16; margin: 0; }
.closing-section a { display: inline-flex; align-items: center; gap: 10px; padding: 10px 21px; min-height: 44px; margin-top: 25px; border-radius: 99px; color: #1b6250; background: #b5f1d5; font-size: 12px; font-weight: 750; text-decoration: none; }
.closing-section .icon { width: 15px; height: 15px; }
.help-section { padding-top: 64px; padding-bottom: 45px; max-width: 960px; }
.help-section h2 { font-size: 28px; font-weight: 650; letter-spacing: -1px; margin: 0 0 23px; }
.help-row details { border-bottom: 1px solid #dce7f1; }
.help-row summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; min-height: 67px; gap: 20px; padding: 15px 0; color: #3a5c77; font-size: 13px; font-weight: 650; }
.help-row summary::-webkit-details-marker { display: none; }
.details-plus { font-size: 23px; font-weight: 400; color: #6c9ac0; transition: transform .2s; }
details[open] .details-plus { transform: rotate(45deg); }
.help-row details p { color: #526b80; margin: 0; padding: 0 25px 22px 0; font-size: 14px; line-height: 1.85; }
.site-footer { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 16px; padding-top: 12px; padding-bottom: max(32px, env(safe-area-inset-bottom)); color: #526b80; font-size: 10px; }
.footer-brand { font-size: 21px; font-weight: 750; letter-spacing: -.9px; color: #2f607f; display: flex; align-items: center; min-height: 44px; text-decoration: none; }
.back-top { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; text-decoration: none; color: #256b9d; font-weight: 600; }
.back-top .icon { width: 13px; height: 13px; }
html.motion-ready [data-reveal] { transition: opacity .7s ease, transform .8s cubic-bezier(.2, .7, .2, 1); }
html.motion-ready [data-reveal]:not(.is-visible) { opacity: 0; transform: translateY(24px); }
html.motion-ready [data-reveal].is-visible { opacity: 1; transform: translateY(0); }
.is-visible .journey-route { animation: connection-draw 2.4s ease both; }
.is-visible .journey-node { animation: orb-arrive .9s cubic-bezier(.16, 1.4, .35, 1) both; }
.is-visible .node-two { animation-delay: .1s; } .is-visible .node-three { animation-delay: .2s; } .is-visible .node-four { animation-delay: .3s; } .is-visible .node-five { animation-delay: .4s; }
.is-visible .network-person { animation: orb-arrive .85s .1s both; }
.is-visible .map-route { animation: route-arrive 1.7s .25s both; stroke-dasharray: 150; }
.is-visible .clip-progress > span { animation: progress-arrive 2.4s .2s both; transform-origin: left; }

/* Uncropped native screenshots: the surrounding artwork is decorative. */
.app-screen, .hero-companion img { display: block; width: 100%; height: auto; }
.hero-real .hero-mosaic { aspect-ratio: .87; }
.ambient-aura { position: absolute; z-index: -1; border-radius: 50%; pointer-events: none; filter: blur(12px); }
.aura-cyan { width: 94%; aspect-ratio: 1; top: 11%; left: 1%; background: radial-gradient(circle, #30e6d6a6, #38b3ff3d 48%, transparent 70%); }
.aura-peach { width: 68%; aspect-ratio: 1; top: 8%; right: -3%; background: radial-gradient(circle, #ffa8b285, #9e7aec35 44%, transparent 70%); }
.aura-gold { width: 65%; aspect-ratio: 1; top: 50%; left: -5%; background: radial-gradient(circle, #ffd2768c, #5ee9b345 50%, transparent 73%); }
.hero-real .hero-device { width: 48%; height: auto; left: 46%; top: 4%; border: 6px solid #f3faff; border-radius: 26px; background: #071b2c; box-shadow: -4px 3px 0 #a7c6e5, 12px 24px 35px #02215260; }
.hero-real .device-screen { padding: 0; height: auto; border-radius: 20px; background: #071b2c; }
.hero-companion { position: absolute; width: 45%; top: 13%; left: 5%; overflow: hidden; border: 6px solid #bdd8f0; border-radius: 25px; background: #071b2c; transform: rotate(-9deg); box-shadow: -3px 3px 0 #6d9ac4, 0 24px 35px #02215245; animation: companion-arrive 1.2s .12s cubic-bezier(.16, 1, .3, 1) both; }
.hero-orbits { position: absolute; width: 116%; height: 106%; left: -8%; top: -2%; overflow: visible; pointer-events: none; fill: #ffdc78; }
.orbit-trace { fill: none; stroke: #a4e5e982; stroke-width: 1.5; stroke-dasharray: 1; animation: connection-draw 2s .2s both; }
.orbit-trace-two { stroke: #ffdc78; stroke-width: 2; animation-delay: .7s; }
.screen-tag { position: absolute; display: flex; align-items: center; gap: 7px; max-width: 92%; padding: 10px 13px; border-radius: 99px; font-size: 10px; font-weight: 750; box-shadow: 0 9px 20px #02215225; animation: panel-arrive 1.2s .25s both; }
.screen-tag .icon { width: 17px; height: 17px; }
.screen-tag-life { top: 1%; left: 0; background: #000; color: #fff; font-weight: 400; box-shadow: 0 8px 20px #0000003d, 0 2px 6px #0000001f; transform: rotate(-5deg); }
.screen-tag-jobs { bottom: 4%; left: 0; background: #ffdc7f; color: #5b4317; transform: rotate(-5deg); }
.screen-tag-real { right: 1%; bottom: -5%; color: #fff; border: 1px solid #cbe6fc50; background: #0c2d59e6; font-size: 9px; font-weight: 550; }
.screen-tag-real > span { width: 5px; height: 5px; border-radius: 50%; background: #b5f3cf; }
.real-product-phone { width: 290px; border-radius: 34px; border-width: 5px; padding: 0; background: #071b2c; }
.real-product-phone .phone-screen { border-radius: 25px; background: #071b2c; }

/* Scroll-snap is native, not an autoplay carousel. */
.screens-section { position: relative; isolation: isolate; overflow: hidden; padding: 87px 0 57px; background: linear-gradient(145deg, #edf2ff 2%, #e5f5ef 48%, #fff2d6 100%); }
.screens-contours { position: absolute; z-index: -1; width: 100%; height: 100%; top: 0; pointer-events: none; fill: #95c9dd; opacity: .27; }
.screens-contours path { fill: none; stroke-width: 2; }
.contour-blue { stroke: #809fea; } .contour-mint { stroke: #35b59c; } .contour-gold { stroke: #e4ae32; }
.screens-heading { display: grid; grid-template-columns: 1.25fr 1fr; gap: 45px; align-items: end; margin-bottom: 27px; }
.screens-heading .eyebrow { color: #1b527e; font-size: 10px; letter-spacing: 1.7px; margin-bottom: 16px; }
.screens-heading h2 { font-size: clamp(31px, 3.2vw, 43px); font-weight: 650; line-height: 1.2; letter-spacing: -1.8px; margin: 0; color: #203653; }
.screens-heading h2 span { color: #326eae; }
.screens-intro p { color: #3d5670; font-size: 14px; margin: 0; line-height: 1.85; }
.screens-intro .text-link { margin-top: 8px; color: #1b527e; }
.screens-window { position: relative; }
.screenshot-track { display: grid; grid-auto-flow: column; grid-auto-columns: 230px; gap: 24px; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; scroll-padding-inline: 6px; padding: 18px 6px 27px; scrollbar-width: thin; scrollbar-color: #7091be #e2eafa; border-radius: 16px; }
.screenshot-card { margin: 0; min-width: 0; scroll-snap-align: start; }
.is-visible .screenshot-card { animation: rise-in .7s both; }
.is-visible .shot-1 { animation-delay: .08s; } .is-visible .shot-2 { animation-delay: .16s; } .is-visible .shot-3 { animation-delay: .24s; } .is-visible .shot-4 { animation-delay: .32s; }
.shot-link { display: block; position: relative; padding: 6px; border: 1px solid #ffffff; border-radius: 26px; background: #0a2137; box-shadow: 0 13px 24px -16px #173b7a94; transition: transform .35s cubic-bezier(.2, .8, .3, 1), box-shadow .35s; }
.shot-link img { display: block; width: 100%; height: auto; aspect-ratio: 9 / 20; object-fit: contain; border-radius: 20px; color: #fff; font-size: 14px; background: #0a2137; }
.shot-expand { position: absolute; right: 15px; bottom: 15px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: #fff; background: #092345ef; border: 1px solid #a0badb; box-shadow: 0 4px 12px #06142833; }
.shot-expand .icon { width: 17px; height: 17px; }
.screenshot-card figcaption { margin-top: 20px; padding: 0 3px; }
.shot-label { display: flex; align-items: center; gap: 7px; color: #3d5b78; font-size: 10px; }
.shot-label .icon { width: 25px; height: 25px; padding: 5px; color: #1f68a4; background: #d6eaff; border-radius: 8px; }
.shot-1 .shot-label .icon { background: #d6f2e1; color: #256c51; }
.shot-2 .shot-label .icon { background: #fff0c7; color: #815914; }
.shot-3 .shot-label .icon { background: #e6e2ff; color: #655298; }
.shot-5 .shot-label .icon, .shot-6 .shot-label .icon { background: #ffdfd1; color: #843d26; }
.screenshot-card strong { display: block; font-size: 15px; font-weight: 650; line-height: 1.5; color: #213d5c; margin-top: 8px; }
.screens-footer { display: flex; align-items: center; justify-content: space-between; gap: 20px; margin-top: 18px; }
.screens-footer p { margin: 0; color: #3d5670; font-size: 10px; line-height: 1.9; }
.screens-footer p > span { color: inherit; }
.gallery-controls { display: flex; gap: 9px; flex-shrink: 0; }
.gallery-controls button { width: 44px; height: 44px; border-radius: 50%; border: 1px solid #b5c9df; color: #214976; background: #fff; display: grid; place-items: center; transition: background .2s, transform .2s; }
.gallery-controls button[hidden] { display: none; }
.gallery-controls button:disabled { opacity: .4; cursor: default; }
.gallery-controls button .icon { width: 19px; height: 19px; }
[data-gallery-prev] .icon, [data-viewer-prev] .icon { transform: rotate(180deg); }

.screenshot-viewer-open { overflow: hidden; }
.shot-viewer:not([open]) { display: none; }
.shot-viewer[open] { display: grid; place-items: center; }
.shot-viewer { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; border: 0; padding: max(16px, env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) max(16px, env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); color: #fff; background: #07182cdb; overflow: auto; }
.shot-viewer::backdrop { background: #061526bd; }
.viewer-panel { display: flex; flex-direction: column; width: min(650px, 100%); max-height: 100%; min-height: 0; animation: viewer-arrive .23s ease both; }
.viewer-heading { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; padding-bottom: 14px; }
.viewer-heading h2 { font-size: 16px; margin: 0; font-weight: 650; }
.viewer-heading p { font-size: 11px; color: #c6d9eb; margin: 3px 0 0; }
.shot-viewer button { display: grid; place-items: center; width: 44px; height: 44px; flex-shrink: 0; border-radius: 50%; border: 1px solid #7394b4; background: #15334f; color: #fff; }
.shot-viewer button:focus-visible { outline-color: #fff; }
.shot-viewer button .icon { width: 20px; height: 20px; }
.viewer-stage { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; }
.viewer-stage img { display: block; width: auto; height: auto; max-width: 100%; max-height: calc(100vh - 170px); max-height: calc(100dvh - 170px); object-fit: contain; border-radius: 12px; }
[data-viewer-status] { position: absolute; top: 50%; left: 0; right: 0; width: max-content; max-width: min(340px, 100%); margin: 0 auto; padding: 9px 14px; border-radius: 10px; border: 1px solid #527595; background: #0a243f; transform: translateY(-50%); color: #fff; font-size: 14px; text-align: center; }
[data-viewer-status]:empty { display: none; }
.viewer-image-unavailable .viewer-stage { min-height: 160px; }
.viewer-image-unavailable .viewer-stage img { visibility: hidden; }
.viewer-controls { display: flex; align-items: center; justify-content: space-between; gap: 15px; padding-top: 13px; flex-shrink: 0; }
.viewer-controls p { font-size: 11px; color: #c6d9eb; text-align: center; margin: 0; }
@keyframes companion-arrive { from { opacity: .1; transform: rotate(-3deg) translateY(25px); } to { opacity: 1; transform: rotate(-9deg) translateY(0); } }
@keyframes viewer-arrive { from { opacity: .3; transform: translateY(8px) scale(.985); } to { opacity: 1; transform: translateY(0) scale(1); } }
@keyframes rise-in { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } }
@keyframes device-arrive { from { opacity: .2; transform: rotate(2deg) translateY(22px); } to { opacity: 1; transform: rotate(7deg) translateY(0); } }
@keyframes panel-arrive { from { opacity: .1; translate: 0 22px; } to { opacity: 1; translate: 0 0; } }
@keyframes orb-arrive { from { opacity: 0; scale: .8; } to { opacity: 1; scale: 1; } }
@keyframes terrain-arrive { from { opacity: .5; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
@keyframes connection-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
@keyframes route-arrive { from { stroke-dashoffset: 150; } to { stroke-dashoffset: 0; } }
@keyframes progress-arrive { from { scale: .05 1; } to { scale: 1 1; } }
@media (hover: hover) and (pointer: fine) {
  .physics-board { transform: perspective(1100px) rotateX(var(--tilt-x, 0deg)) rotateY(var(--tilt-y, 0deg)) translateY(var(--lift, 0px)); }
  .header-download:hover { border-color: #fff; }
  .header-explore:hover, .text-link:hover, .back-top:hover { text-decoration: underline; text-underline-offset: 4px; }
  .feature-nav a:hover { color: #0a66c2; }
  .shot-link:hover { transform: translateY(-7px); box-shadow: 0 18px 30px -12px #173b7a75; }
  .gallery-controls button:not(:disabled):hover { background: #e4f0ff; transform: translateY(-2px); }
  .shot-viewer button:hover { background: #254d72; }
  .story-card .feature-label .icon { transition: transform .3s; }
  .story-card:hover .feature-label .icon { transform: rotate(-8deg) scale(1.15); }
}
@media (max-width: 1100px) {
  .landing-stage { padding: 27px 23px 58px; }
  .wrap { padding-left: 32px; padding-right: 32px; }
  .glass-shell { border-radius: 35px; }
  .site-header { min-height: 90px; }
  .hero-layout { gap: 22px; }
  h1 { font-size: clamp(39px, 4.8vw, 53px); }
  .store-options { --store-badge-height: 40px; }
  .profile-panel { padding: 13px; gap: 8px; grid-template-columns: 27px 1fr; }
  .profile-avatar { width: 27px; height: 27px; }
  .profile-caption strong { font-size: 10px; }
  .opportunity-panel { padding: 14px; }
  .opportunity-panel strong { font-size: 19px; }
  .opportunity-location { font-size: 6px; }
  .people-panel { gap: 7px; padding: 10px; }
  .people-panel strong { font-size: 9px; }
  .people-avatars span { width: 22px; height: 22px; }
  .device-screen { padding-left: 12px; padding-right: 12px; }
  .device-headline { font-size: 24px; }
  .device-welcome { margin-top: 19px; }
  .device-message { margin-top: 16px; }
  .closing-section { max-width: calc(100% - 48px); }
}
@media (max-width: 900px) {
  .hero { padding-top: 19px; padding-bottom: 83px; }
  .hero-layout { grid-template-columns: 1fr; gap: 39px; }
  .hero-intro { text-align: center; max-width: 580px; margin: auto; width: 100%; }
  .hero .eyebrow { justify-content: center; }
  h1 { font-size: clamp(40px, 6.9vw, 55px); letter-spacing: -2px; }
  .hero-description, .download-panel { margin-left: auto; margin-right: auto; }
  .hero-description { max-width: 395px; font-size: 14px; }
  .download-panel { max-width: 410px; }
  .store-options { justify-content: center; }
  .hero-art-stage { width: min(100%, 450px); margin: auto; }
  .hero-mosaic { aspect-ratio: 1.03; }
  .hero-device { height: 92%; top: 2%; }
  .hero-terrain { height: 115px; }
  .profile-panel { top: 1%; }
  .chapter { padding-top: 65px; padding-bottom: 61px; }
  .story-grid { gap: 18px; }
  .story-copy { padding-left: 27px; padding-right: 27px; }
  .story-copy h3 { font-size: 28px; }
  .product-layout { gap: 35px; padding-top: 60px; padding-bottom: 48px; }
  .product-copy h2 { font-size: 34px; }
  .network-demo { height: 340px; }
  .clip-back { left: 9%; } .clip-front { left: 32%; }
  .editorial-sheet { left: 12%; width: 76%; padding: 20px; }
}
@media (max-width: 650px) {
  .landing-stage { padding: 15px 12px 48px; }
  .glass-shell { border-radius: 29px; }
  .wrap { padding-left: max(22px, env(safe-area-inset-left)); padding-right: max(22px, env(safe-area-inset-right)); }
  .site-header { min-height: 74px; gap: 12px; }
  .brand { font-size: 20px; gap: 7px; } .brand img { width: 25px; height: 25px; }
  .site-header nav { gap: 0; }
  .header-explore { display: none; }
  .header-download { padding: 0 12px; min-height: 44px; font-size: 10px; }
  .header-download::after { margin-left: 6px; font-size: 14px; }
  .ambient-green { width: 120px; height: 120px; left: -45px; top: -25px; }
  .ambient-gold { width: 63px; height: 63px; left: -26px; top: 66px; }
  .hero { padding: 21px 0 68px; }
  .hero-layout { gap: 32px; }
  .hero .eyebrow { font-size: 9px; margin-bottom: 20px; gap: 7px; }
  .eyebrow-dot { width: 5px; height: 5px; }
  h1 { font-size: clamp(30px, 8.7vw, 43px); line-height: 1.19; letter-spacing: -1.35px; }
  .hero-description { font-size: 14px; line-height: 1.8; margin-top: 19px; max-width: 315px; }
  .download-panel { margin-top: 22px; }
  .download-panel h2 { font-size: 12px; margin-bottom: 12px; }
  .store-options { justify-content: center; gap: 6px; }
  .download-description { font-size: 11px; }
  .hero-art-stage { max-width: 375px; }
  .hero-mosaic { aspect-ratio: .97; }
  .hero-device { border-width: 7px; border-radius: 29px; box-shadow: -5px 3px 0 #adcee7, 13px 20px 30px #05377151; }
  .device-screen { border-radius: 22px; padding: 29px 11px 9px; }
  .device-notch { width: 58px; height: 12px; left: calc(50% - 29px); }
  .device-wordmark { font-size: 12px; }
  .device-welcome { font-size: 5px; letter-spacing: .75px; margin-top: 17px; }
  .device-headline { font-size: 22px; margin-top: 7px; }
  .device-icons { margin-top: 15px; gap: 3px; }
  .device-icons .icon { width: 26px; height: 26px; padding: 6px; border-radius: 8px; }
  .device-icons > span { font-size: 5px; }
  .device-message { margin-top: 16px; padding: 7px 5px; gap: 4px; }
  .device-message-icon { width: 19px; height: 22px; }
  .device-message strong { font-size: 5.8px; }
  .device-message div > span { font-size: 4.5px; }
  .profile-panel { padding: 11px; gap: 7px; grid-template-columns: 23px 1fr; border-radius: 16px; right: -2%; }
  .profile-avatar { width: 23px; height: 23px; border-radius: 7px; }
  .profile-avatar .icon { width: 15px; height: 15px; }
  .profile-caption strong { font-size: 8px; }
  .profile-caption > span { font-size: 5.5px; }
  .profile-bars { gap: 5px; }
  .profile-bars i { height: 4px; }
  .profile-ready { font-size: 6px; }
  .profile-ready > span { width: 12px; height: 12px; font-size: 7px; }
  .opportunity-panel { width: 44%; padding: 12px; border-radius: 16px; left: -2%; }
  .opportunity-icon { width: 26px; height: 26px; border-radius: 8px; margin-bottom: 9px; }
  .opportunity-icon .icon { width: 16px; height: 16px; }
  .panel-kicker { font-size: 5px; letter-spacing: .55px; }
  .opportunity-panel strong { font-size: 17px; letter-spacing: -.5px; }
  .opportunity-location { font-size: 5.5px; margin-top: 10px; gap: 2px; }
  .opportunity-location .icon { width: 8px; height: 8px; }
  .people-panel { padding: 9px; gap: 6px; border-radius: 14px; bottom: 1%; }
  .people-avatars span { width: 20px; height: 20px; font-size: 6px; }
  .people-panel strong { font-size: 8px; }
  .people-panel div > span:not(.people-avatars span) { font-size: 5.5px; }
  .people-panel > .icon { display: none; }
  .hero-terrain { height: 85px; width: 160%; left: -55%; }
  .feature-nav { top: 8px; width: calc(100% - 38px); max-width: 470px; gap: 0; justify-content: space-between; padding: 7px 16px; border-radius: 20px; margin-top: -27px; }
  .feature-nav a { flex-direction: column; gap: 4px; justify-content: center; min-width: 36px; font-size: 8px; }
  .feature-nav .icon { width: 17px; height: 17px; }
  .chapter, #feed, #network, #jobs, #clips, #blogs { scroll-margin-top: 95px; }
  .chapter { padding-top: 48px; padding-bottom: 45px; }
  .chapter-heading { margin-bottom: 28px; }
  .chapter-heading h2 { font-size: 31px; letter-spacing: -1.3px; line-height: 1.23; }
  .chapter-heading .eyebrow { font-size: 8px; letter-spacing: 1.3px; }
  .chapter-heading > p:last-child { font-size: 14px; }
  .connections-ribbon { margin-bottom: 26px; }
  .story-grid { grid-template-columns: 1fr; gap: 22px; }
  .story-copy { padding: 9px 27px 30px; }
  .story-copy h3 { font-size: 28px; letter-spacing: -1.15px; }
  .story-copy p { font-size: 14px; }
  .story-card { border-radius: 26px; }
  .feed-demo { width: 78%; margin-top: 28px; }
  .feed-landscape { height: 150px; }
  .network-demo { height: 305px; }
  .product-layout { grid-template-columns: 1fr; padding-top: 46px; padding-bottom: 33px; gap: 32px; }
  .product-copy { text-align: center; max-width: 370px; margin: auto; }
  .product-copy h2 { font-size: 31px; letter-spacing: -1.3px; }
  .product-copy > p:not(.eyebrow) { font-size: 14px; line-height: 1.9; margin-top: 17px; }
  .job-benefits { text-align: left; max-width: 295px; margin: 20px auto 12px; }
  .job-benefits li { font-size: 12px; gap: 8px; }
  .phone { width: 290px; max-width: 100%; }
  .phone-screen { border-radius: 33px; }
  .preview-content h3 { font-size: 27px; }
  .jobs-backdrop { width: 140%; right: -38%; top: auto; bottom: 0; height: 75%; }
  .clips-demo { height: 329px; }
  .clip-back, .clip-front { width: 150px; height: 255px; top: 27px; border-width: 4px; }
  .clip-back { left: 14%; } .clip-front { left: 36%; }
  .clip-caption > strong { font-size: 21px; }
  .blog-demo { height: 343px; }
  .editorial-sheet { width: 70%; left: 17%; padding: 18px; }
  .editorial-sheet h4 { font-size: 29px; }
  .editorial-art { height: 75px; }
  .reading-tag { bottom: 14px; }
  .preview-note { font-size: 10px; line-height: 1.8; }
  .closing-section { max-width: calc(100% - 28px); padding: 48px 0 52px; border-radius: 27px; }
  .closing-section h2 { font-size: 34px; letter-spacing: -1.4px; }
  .help-section { padding-top: 43px; padding-bottom: 25px; }
  .help-section h2 { font-size: 24px; }
  .help-row summary { min-height: 63px; font-size: 12px; }
  .help-row details p { font-size: 14px; padding-right: 10px; }
  .site-footer { gap: 3px 15px; font-size: 9px; }
  .site-footer > span { order: 3; flex-basis: 100%; }
  html.motion-ready [data-reveal] { transition-duration: .5s; }
  html.motion-ready [data-reveal]:not(.is-visible) { transform: translateY(16px); }
}
@media (max-width: 360px) {
  .landing-stage { padding-left: 9px; padding-right: 9px; }
  .glass-shell { border-radius: 25px; }
  .wrap { padding-left: max(18px, env(safe-area-inset-left)); padding-right: max(18px, env(safe-area-inset-right)); }
  .brand { font-size: 18px; gap: 6px; } .brand img { width: 23px; height: 23px; }
  .header-download { padding: 0 10px; font-size: 9px; }
  h1 { font-size: 30px; letter-spacing: -1.3px; }
  .hero .eyebrow { font-size: 8px; }
  .hero-description { font-size: 14px; }
  .hero-device { border-width: 6px; border-radius: 25px; }
  .device-screen { border-radius: 19px; padding: 26px 9px 8px; }
  .device-headline { font-size: 18px; }
  .device-wordmark { font-size: 11px; }
  .device-welcome { margin-top: 14px; }
  .device-icons { margin-top: 12px; }
  .device-icons .icon { width: 23px; height: 23px; padding: 5px; }
  .device-message { margin-top: 12px; }
  .device-message strong { font-size: 5px; }
  .device-message div > span { font-size: 4px; }
  .profile-panel { padding: 9px; gap: 6px; }
  .profile-caption strong { font-size: 7px; }
  .profile-caption > span { font-size: 5px; }
  .opportunity-panel { padding: 10px; }
  .opportunity-panel strong { font-size: 15px; }
  .opportunity-location { font-size: 4.8px; }
  .people-panel { width: 59%; gap: 5px; padding: 8px; }
  .people-panel strong { font-size: 7px; }
  .people-panel div > span:not(.people-avatars span) { font-size: 5px; }
  .people-avatars span { width: 18px; height: 18px; }
  .chapter-heading h2 { font-size: 28px; }
  .story-copy { padding-left: 24px; padding-right: 24px; }
  .story-copy h3, .product-copy h2 { font-size: 27px; }
  .clip-back { left: 9%; } .clip-front { left: 31%; }
}
@media (max-width: 900px) {
  .screens-heading { grid-template-columns: 1fr; gap: 20px; }
  .screens-intro { max-width: 430px; }
  .hero-real .hero-mosaic { aspect-ratio: .87; }
  .hero-real .hero-device { top: 4%; height: auto; }
}
@media (max-width: 650px) {
  .hero-description { margin-top: 30px; }
  .headline-stroke { height: 14px; bottom: -10px; }
  .hero-real .hero-device { border-width: 4px; border-radius: 21px; }
  .hero-real .device-screen { border-radius: 17px; }
  .hero-companion { border-width: 4px; border-radius: 20px; }
  .screen-tag { padding: 7px 10px; gap: 5px; font-size: 8px; }
  .screen-tag .icon { width: 14px; height: 14px; }
  .screen-tag-real { font-size: 7px; padding: 7px 9px; bottom: -5%; }
  .screens-section { padding-top: 55px; padding-bottom: 35px; }
  .screens-heading { margin-bottom: 17px; gap: 20px; }
  .screens-heading h2 { font-size: 30px; letter-spacing: -1.2px; }
  .screens-heading .eyebrow { font-size: 9px; }
  .screens-intro p { font-size: 14px; }
  .screenshot-track { grid-auto-columns: min(72vw, 250px); gap: 20px; padding-bottom: 22px; }
  .screens-footer { align-items: flex-start; gap: 10px; }
  .screens-footer p { font-size: 9px; }
  .gallery-controls { gap: 6px; }
  .gallery-controls button { width: 44px; height: 44px; }
  .real-product-phone { width: 270px; }
}
@media (max-width: 360px) {
  .screens-heading h2 { font-size: 27px; }
  .screen-tag { padding: 6px 8px; font-size: 7px; }
  .screen-tag-real { font-size: 6px; }
  .screens-footer { flex-wrap: wrap; }
  .gallery-controls { margin-left: auto; }
}

@media (min-width: 1101px) {
  .wrap { width: min(1440px, 100%); padding-left: 48px; padding-right: 48px; }
  .landing-stage { padding: 26px 28px 54px; }
  .glass-shell { max-width: 1600px; }
  .site-header { min-height: 94px; }
  .hero { padding-top: 18px; padding-bottom: 85px; }
  .hero-layout { grid-template-columns: 1.03fr 1fr; gap: 42px; }
  .hero-art-stage { width: 100%; max-width: 560px; justify-self: center; }
  h1 { font-size: clamp(58px, 4.85vw, 76px); letter-spacing: -2.8px; }
  .hero-description { max-width: 440px; font-size: 16px; line-height: 1.8; }
  .download-panel { max-width: 435px; margin-top: 28px; }
  .store-options { --store-badge-height: 54px; }
  .chapter { padding-top: 62px; padding-bottom: 62px; }
  .chapter-heading { margin-bottom: 33px; }
  .story-grid { gap: 30px; }
  .story-card { display: grid; grid-template-columns: 1fr; }
  .story-copy { padding: 16px 37px 37px; }
  .story-copy p { max-width: 490px; font-size: 15px; }
  .feed-demo { max-width: 380px; width: 76%; }
  .feed-landscape { height: 185px; }
  .network-demo { height: 382px; }
  .product-layout { gap: 74px; padding-top: 64px; padding-bottom: 52px; }
  .product-copy { max-width: 600px; }
  .product-copy h2 { font-size: 47px; }
  .product-copy > p:not(.eyebrow) { max-width: 490px; font-size: 16px; }
  .job-benefits li { font-size: 13px; }
  .real-product-phone { width: 320px; }
  .screens-section { padding-top: 69px; }
  .screens-heading { gap: 70px; grid-template-columns: 1.1fr 1fr; }
  .screens-heading h2 { font-size: 45px; }
  .screens-intro { max-width: 470px; justify-self: end; }
  .screens-intro p { font-size: 15px; }
  .screenshot-track { grid-auto-columns: 245px; gap: 27px; }
  .closing-section { max-width: 1344px; }
  .help-section { max-width: 1240px; }
  .help-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; align-items: start; }
  .help-row summary { align-items: flex-start; gap: 10px; font-size: 13px; }
  .help-row details p { padding-right: 0; font-size: 13px; }
}

/* Ambient decoration is compositor-driven and paused unless its zone is visible.
   The gallery and its screenshots never auto-advance. No-JS stays static. */
@keyframes ambient-green-drift { from { transform: translate(0, 0) scale(1); } to { transform: translate(27px, 22px) scale(1.08); } }
@keyframes ambient-gold-drift { from { transform: translate(0, 0); } to { transform: translate(19px, -24px); } }
@keyframes ambient-cyan-flow { from { transform: translate(-18px, 15px) scale(.94); } to { transform: translate(22px, -22px) scale(1.08); } }
@keyframes ambient-peach-flow { from { transform: translate(0, -9px) scale(1); } to { transform: translate(-23px, 30px) scale(1.16); } }
@keyframes ambient-gold-flow { from { transform: translate(-12px, 8px) scale(1.02); } to { transform: translate(25px, -15px) scale(.9); } }
@keyframes ambient-orbit-flow { from { transform: rotate(-5deg); } to { transform: rotate(7deg); } }
@keyframes ambient-contour-flow { from { transform: translate(-1%, -1%) scale(1.04); } to { transform: translate(2%, 2%) scale(1.08); } }
@keyframes ambient-wave-flow { from { transform: translateY(0) scaleX(1.01); } to { transform: translateY(10px) scaleX(1.04); } }
@keyframes ambient-halo-flow { from { transform: translate(0, 0) scale(1); } to { transform: translate(32px, 19px) scale(1.12); } }
@media (prefers-reduced-motion: no-preference) {
  .ambient-green { animation: ambient-green-drift 7s ease-in-out infinite alternate paused; }
  .ambient-gold { animation: ambient-gold-drift 6s ease-in-out infinite alternate paused; }
  .aura-cyan { animation: ambient-cyan-flow 9s ease-in-out infinite alternate paused; }
  .aura-peach { animation: ambient-peach-flow 12s ease-in-out infinite alternate paused; }
  .aura-gold { animation: ambient-gold-flow 8s ease-in-out infinite alternate paused; }
  .hero-orbits { animation: ambient-orbit-flow 14s ease-in-out infinite alternate paused; }
  .screens-contours { animation: ambient-contour-flow 15s ease-in-out infinite alternate paused; }
  .hero-terrain { animation: terrain-arrive 1.2s both, ambient-wave-flow 8s ease-in-out infinite alternate; animation-play-state: running, paused; }
  .closing-section::before { border-color: #6be8dc1c; animation: ambient-halo-flow 10s ease-in-out infinite alternate paused; }
  .closing-section::after { border-color: #ffd2791f; animation: ambient-halo-flow 13s ease-in-out infinite alternate-reverse paused; }
  .ambient-active .ambient-orb, .ambient-active .ambient-aura, .ambient-active .hero-orbits,
  .ambient-active .screens-contours, .closing-section.ambient-active::before, .closing-section.ambient-active::after { animation-play-state: running; }
  .ambient-active .hero-terrain { animation-play-state: running, running; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .physics-board { transform: none !important; }
  html.motion-ready [data-reveal]:not(.is-visible) { opacity: 1; transform: none; }
}