/* Solia landing — port of the Claude Design draft (2026-08-18). Loaded after style.css; brand tokens there stay untouched. The landing scopes its own theme vars to body.landing: dark by default, toggled to light via data-theme="light" on . The hero is always black space. */ /* single dark theme — black-space hero, dark panel after the scroll */ body.landing { --canvas: #14120B; --surface: #1B1913; --raised: #211F19; --rule: #302E29; --ink: #F3F1EA; --ink-soft: #C9C6BD; --muted: #8A8781; --accent: #EE8239; --gold: #F8B44B; --space: #0D0B06; } body.landing { display: block; margin: 0; overflow-x: clip; background: var(--space); color: var(--ink); font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; -webkit-font-smoothing: antialiased; } body.landing a { color: var(--accent); text-decoration: none; } body.landing a:hover { color: var(--gold); } /* ── fixed sky scene ────────────────────────────────────────────────────── */ .sky { position: fixed; inset: 0; z-index: 0; overflow: hidden; background: radial-gradient(120vmax 70vmax at 50% 120%, rgba(228, 114, 53, .22) 0%, rgba(228, 114, 53, .08) 38%, transparent 62%), #0D0B06; } .sky #fx { position: absolute; inset: 0; width: 100%; height: 100%; } /* ── header ─────────────────────────────────────────────────────────────── */ .landing-header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; gap: 16px; padding: 16px clamp(20px, 4vw, 44px); border-bottom: 1px solid transparent; transition: background .4s ease, border-color .4s ease, backdrop-filter .4s ease; } .landing-header.scrolled { background: color-mix(in srgb, var(--surface) 76%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-bottom-color: var(--rule); } .landing-header .wordmark { display: inline-flex; align-items: center; margin-right: auto; line-height: 0; opacity: 0; transition: opacity .4s ease; pointer-events: none; } .landing-header.scrolled .wordmark { opacity: 1; pointer-events: auto; } .landing-header .wordmark img { height: 34px; width: auto; display: block; } .header-cta { display: inline-flex; align-items: center; height: 36px; padding: 0 18px; border-radius: 999px; background: var(--accent); color: #14120B !important; font: 700 13px/1 Manrope, sans-serif; letter-spacing: .01em; } .header-cta:hover { background: var(--gold); } /* menu button (Support / Legal) — style.css provides the base dropdown */ .landing-header details.menu summary { width: 36px; height: 36px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 85%, transparent); } /* ── dot navigation — always visible, scales with the viewport ──────────── */ .dots { position: fixed; right: clamp(8px, 1.5vw, 20px); top: 50%; transform: translateY(-50%); z-index: 50; display: flex; flex-direction: column; gap: clamp(10px, 1.5vh, 14px); align-items: flex-end; } .dots a { display: flex; align-items: center; gap: clamp(6px, 0.8vw, 10px); justify-content: flex-end; } .dot-label { font: 500 clamp(8px, 0.75vw, 9.5px)/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); opacity: 0; transition: opacity .3s ease; white-space: nowrap; } .dot-line { width: clamp(9px, 1.1vw, 14px); height: 1px; background: var(--accent); opacity: .35; transition: all .3s ease; } .dots a.active .dot-label { opacity: 1; } .dots a.active .dot-line { width: clamp(18px, 2.7vw, 34px); opacity: 1; } /* ── layout shell ───────────────────────────────────────────────────────── */ main.landing { position: relative; z-index: 1; max-width: none; margin: 0; padding: 0; } /* ── hero ───────────────────────────────────────────────────────────────── */ .hero-stage { height: 200vh; } .hero-inner { /* the wordmark's rendered width — hero vertical rhythm derives from it so the gaps SCALE with the lockup (owner ruling 2026-08-21): a fixed 88px read fine at fullscreen but cavernous around a phone-sized wordmark */ --wm-w: clamp(320px, 80vw, 1020px); position: sticky; top: 0; height: 100vh; height: 100svh; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; color: #F3E9D2; will-change: transform, opacity; } /* the agent: weightless drift above the lockup; the source art sits on a near-black card, so screen blending melts it into the space backdrop */ .hero-agent { /* Pluto→kicker gap rides the wordmark scale too (22px at fullscreen) */ margin-bottom: calc(var(--wm-w) * .0216); will-change: transform, opacity; } /* bubble + art float TOGETHER (the .soon-agent pattern) — the drift moved from the img up to this wrapper when Pluto's bubble arrived (2026-08-21). --say-w lives HERE so the bubble AND its sibling dots share it: every bubble measurement below is a fraction of it, cloning the iOS geometry (200×88, r16, 12px type) at any size — mixed px/vw/vh sizing is what made the web bubble drift from the app's proportions (owner screenshots). */ .hero-agent-float { --say-w: min(clamp(208px, 21vw, 300px), 25vh); animation: agent-float 9s ease-in-out infinite; } .hero-agent img { /* vh term: same height budget as the bubble above (choreography anchor) */ width: min(clamp(68px, 9vw, 120px), 12vh); height: auto; display: block; margin: 0 auto; filter: drop-shadow(0 6px 26px rgba(238, 130, 57, .22)); } /* Pluto's intro — a hand-drawn THOUGHT bubble (owner sketch 2026-08-21): wobbly logo-cream oval centred above his head, a small scallop nub at the bottom, then two thought-dots drifting down to him. Four messages, horizontal scroll-snap; click advances; n/4 counter centred at the top. */ .hero-say { position: relative; width: var(--say-w); height: calc(var(--say-w) * .36); /* iOS: 72/200 — trimmed 2026-08-21: less dead space above/below the text */ margin: 0 auto calc(var(--say-w) * .055); /* nub hangs into this gap */ border-radius: calc(var(--say-w) * .08); /* iOS: 16/200 */ /* glass (owner ruling 2026-08-21): translucent raised surface + backdrop blur; border-radius clips the blur to the box. The OUTLINE (incl. the nub) is the .hero-say-shape svg — a translucent fill can't share a seamless outline with a CSS-border nub. */ background: color-mix(in srgb, #211F19 62%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); box-shadow: 0 8px 22px rgba(0, 0, 0, .45); line-height: normal; cursor: pointer; transform: rotate(-2deg); } .hero-say-shape { position: absolute; top: 0; left: 0; width: 100%; height: calc(var(--say-w) * .39); /* 78/200 — box plus the nub's dip */ overflow: visible; pointer-events: none; } /* chevron paging arrows hugging the flanks, toned to the bubble's ground — only the direction you can actually go is shown (JS toggles data-hidden) */ .hero-say-nav { position: absolute; top: 50%; transform: translateY(-50%); width: calc(var(--say-w) * .12); height: calc(var(--say-w) * .14); display: flex; align-items: center; justify-content: center; background: none; border: 0; padding: 0; /* barely-there: a step off the bubble's raised ground, not a UI element */ color: #4E4A42; font: 600 calc(var(--say-w) * .085)/1 Manrope, sans-serif; cursor: pointer; } .hero-say-nav:hover { color: var(--gold); } .hero-say-nav.prev { left: calc(var(--say-w) * .01); } .hero-say-nav.next { right: calc(var(--say-w) * .01); } .hero-say-nav[data-hidden="true"] { visibility: hidden; } /* two thought-dots stepping down toward Pluto's head */ .hero-say-dots { display: flex; flex-direction: column; align-items: center; gap: calc(var(--say-w) * .033); /* spread apart, the last just off his head */ width: max-content; margin: 0 auto 0; /* sit right on Pluto — owner ruling: closer to his head */ } .hero-say-dots span { display: block; border-radius: 50%; /* glass like the box above */ background: color-mix(in srgb, #211F19 62%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--rule); } .hero-say-dots span:nth-child(1) { width: calc(var(--say-w) * .04); height: calc(var(--say-w) * .04); transform: translateX(calc(var(--say-w) * -.06)); } .hero-say-dots span:nth-child(2) { width: calc(var(--say-w) * .025); height: calc(var(--say-w) * .025); transform: translateX(calc(var(--say-w) * -.02)); } .hero-say-track { display: flex; height: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .hero-say-track::-webkit-scrollbar { display: none; } .hero-say-track p { flex: 0 0 100%; scroll-snap-align: start; display: flex; align-items: center; justify-content: center; margin: 0; /* everything in box-widths (--say-w), iOS ratios: side padding clears the chevrons, and the type can never outgrow the box at any window size (counter removed 2026-08-21 → text truly centred) */ padding: calc(var(--say-w) * .05) calc(var(--say-w) * .16); text-align: center; font: 500 calc(var(--say-w) * .06)/1.4 Manrope, sans-serif; /* iOS: 12/200 */ color: var(--gold); /* matches the closing bubble's text */ } @keyframes agent-float { 0%, 100% { transform: translate(0, 0) rotate(-5deg); } 20% { transform: translate(18px, -14px) rotate(4deg); } 45% { transform: translate(-6px, -24px) rotate(-3deg); } 70% { transform: translate(-20px, -8px) rotate(6deg); } } .hero-kicker { margin: 0; font: 600 clamp(12px, 2.05vw, 24px)/1.2 Manrope, sans-serif; letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; opacity: .92; text-shadow: 0 1px 18px rgba(238, 130, 57, .35); } /* the SVG box carries 0.1157×width of empty space above the letter tops and 0.1216×width below them; the margins cancel it AND set the visual gaps to 0.0863×width — i.e. the fullscreen 88px, scaled with the lockup (owner ruling 2026-08-21: same proportions at every size, replacing fixed 88px). Net: gap−whitespace = −.0294 / −.0353 of the wordmark width. */ .hero-title { margin: calc(var(--wm-w) * -.0294) 0 0; line-height: 0; will-change: transform, opacity; } .hero-title svg { width: var(--wm-w); height: auto; display: block; overflow: visible; filter: drop-shadow(0 4px 60px rgba(238, 130, 57, .28)); } .hero-sub { margin: calc(var(--wm-w) * -.0353) 0 0; font: 500 clamp(13px, 2.5vw, 30px)/1.2 Manrope, sans-serif; letter-spacing: .5em; text-indent: .5em; text-transform: uppercase; color: #FBF7EC; text-shadow: 0 1px 18px rgba(238, 130, 57, .35); } .scroll-cue { position: absolute; bottom: 30px; display: flex; flex-direction: column; align-items: center; gap: 4px; color: #F3E9D2 !important; opacity: .62; animation: cue-bob 2.6s ease-in-out infinite; } .cue-text { font: 500 10px/1 "JetBrains Mono", monospace; letter-spacing: .3em; text-indent: .3em; text-transform: uppercase; } @keyframes cue-bob { 50% { transform: translateY(7px); opacity: 1; } } /* SVG rotations (surface churn + planet spin) */ .sun-spin, .sun-spin-rev, .wisp-a, .wisp-b, .planet-spin { transform-box: fill-box; transform-origin: center; animation: svg-spin 22s linear infinite; } .sun-spin-rev { animation: svg-spin 34s linear infinite reverse; } .wisp-a { animation-duration: 16s; } .wisp-b { animation: svg-spin 26s linear infinite reverse; } .planet-spin { animation-duration: 9s; } @keyframes svg-spin { to { transform: rotate(360deg); } } /* ── page panel: reaches the top of the viewport at y = 100vh ───────────── */ .page-body { position: relative; z-index: 2; margin-top: -100vh; background: var(--canvas); border-radius: 36px 36px 0 0; box-shadow: 0 -30px 90px rgba(0, 0, 0, .4); overflow: clip; } .page-body::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 420px; background: radial-gradient(58% 100% at 50% 0%, rgba(248, 180, 75, .13) 0%, transparent 72%); pointer-events: none; } /* ── bands ──────────────────────────────────────────────────────────────── */ .band { position: relative; padding: clamp(62px, 10vh, 114px) clamp(24px, 5vw, 64px) clamp(48px, 7.2vh, 83px); } /* seam star strip: a thin twinkling star field floating in the space between sections (canvas injected by landing.js) */ .seam-fx { position: absolute; left: 0; top: -80px; width: 100%; height: 160px; pointer-events: none; } /* small screens have tighter band gaps — shrink the strip so the stars stay inside the empty seam instead of drifting over content */ @media (max-width: 700px) { .seam-fx { height: 84px; top: -42px; } } .band-inner { max-width: 1080px; margin: 0 auto; } .band-inner.center { text-align: center; } .eyebrow-mono { margin: 0 0 26px; font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); } /* Longhand + px-first fallbacks ON PURPOSE (owner field report 2026-08-21: a statement line rendered microscopic on an older iOS Safari) — clamp() inside the `font` SHORTHAND is a known parse gap in older WebKit, and a dropped shorthand leaves font-size to whatever cascades in. Every browser gets the px value first; ones that parse clamp() upgrade. */ .statement { margin: 0; max-width: 19ch; font-family: Manrope, sans-serif; font-weight: 300; line-height: 1.08; font-size: 40px; font-size: clamp(34px, 5.4vw, 62px); letter-spacing: -.03em; color: var(--ink); text-wrap: pretty; } /* two-line statement: one impactful sentence per line, sized to hold */ .statement-two { max-width: none; font-size: 32px; font-size: clamp(24px, 6.2vw, 80px); } .statement-two > span { display: block; white-space: nowrap; /* belt-and-braces for old-Safari cascade weirdness: the lines may never size independently of their statement */ font-size: inherit; font-family: inherit; letter-spacing: inherit; } .statement-two em, .why-answer em { font-style: normal; color: var(--gold); } /* drawn underline: a thin accent stroke sweeps in beneath the phrase once its parent reveals */ .uline { position: relative; } .uline::after { content: ""; position: absolute; left: 0.02em; right: 0.02em; bottom: 0.04em; height: max(2.5px, 0.05em); border-radius: 999px; background: linear-gradient(90deg, var(--accent), var(--gold)); transform: scaleX(0); transform-origin: left; transition: transform .8s cubic-bezier(.3, 0, .3, 1) .6s; } [data-reveal].in .uline::after { transform: scaleX(1); } /* this line has descenders — drop its underline below them */ .why-answer .uline::after { bottom: -0.22em; } @media (prefers-reduced-motion: reduce) { .uline::after { transform: scaleX(1); transition: none; } } .split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(24px, 5vw, 80px); margin-top: clamp(36px, 5vh, 58px); align-items: start; } .lede { margin: 0; font: 400 clamp(16px, 1.5vw, 19px)/1.65 Manrope, sans-serif; color: var(--ink-soft); max-width: 52ch; } /* why-solia-exists: failure list + closing answer */ .fail-list { background: color-mix(in srgb, var(--surface) 72%, transparent); border: 1px solid var(--rule); border-radius: 18px; padding: clamp(18px, 2.4vw, 28px) clamp(18px, 2.4vw, 28px) clamp(8px, 1.4vw, 14px); } .fail-list li:last-child { border-bottom: 0; } .fail-title { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: .24em; text-transform: uppercase; color: var(--muted); } .fail-icon { width: 18px; height: 18px; flex: none; color: var(--accent); } .fail-list ul { list-style: none; margin: 0; padding: 0; } .fail-list li { display: flex; gap: 14px; align-items: baseline; padding: 12px 0; border-bottom: 1px solid var(--rule); font: 400 15px/1.5 Manrope, sans-serif; color: var(--ink-soft); } .fail-list li::before { content: "—"; color: var(--accent); font: 500 12px/1 "JetBrains Mono", monospace; } .why-answer { margin: clamp(40px, 6vh, 64px) 0 0; max-width: 82ch; font: 400 clamp(17px, 1.8vw, 22px)/1.55 Manrope, sans-serif; color: var(--ink); text-wrap: pretty; } /* what-solia-is: how-we-do-it list + acronym strip */ .how-head { display: grid; grid-template-columns: clamp(40px, 5vw, 64px) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 2.5vw, 32px); margin-top: clamp(48px, 8vh, 90px); } .how-title { margin: 0; font: 500 11px/1 "JetBrains Mono", monospace; letter-spacing: .28em; text-transform: uppercase; color: var(--accent); } .how-list { margin-top: 18px; border-top: 1px solid var(--rule); } .how-row { display: grid; grid-template-columns: clamp(40px, 5vw, 64px) minmax(0, 1fr) minmax(0, 1fr); gap: clamp(14px, 2.5vw, 32px); align-items: start; padding: clamp(20px, 3vh, 30px) 0; border-bottom: 1px solid var(--rule); } .how-diff { list-style: none; margin: 0; padding: 0; /* vertically centred within the row (between its top and bottom rules) */ align-self: center; display: flex; flex-direction: column; justify-content: center; } .how-diff li:first-child { padding-top: 0; } .how-diff li { margin: 0; padding: 3px 0; font: 400 clamp(13.5px, 1.25vw, 15px)/1.6 Manrope, sans-serif; color: var(--ink-soft); } /* them → us comparison pair: the old way struck through, Solia's way after a gold arrow; each phrase wraps as one unit so pairs stack cleanly on narrow screens */ .vs-them { display: inline-block; color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--accent) 55%, transparent); text-decoration-thickness: 1px; } .vs-us { display: inline-block; color: var(--ink-soft); } .vs-us::before { content: "→ "; color: var(--gold); font-weight: 600; } /* wide screens: a pair is always one line */ @media (min-width: 1024px) { .how-diff li { white-space: nowrap; font-size: clamp(12.5px, 1.18vw, 15px); } } /* narrower screens: crossed-out line on top, arrow + Solia's way below */ @media (max-width: 1023px) { .vs-them, .vs-us { display: block; } .how-diff li { padding: 5px 0; } } .how-num { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; font: 500 clamp(10.5px, 1vw, 12px)/1.5 "JetBrains Mono", monospace; letter-spacing: .2em; color: var(--accent); padding-top: 4px; } .how-icon { width: clamp(22px, 2.2vw, 28px); height: auto; color: var(--gold); opacity: .92; } .how-row h3 { margin: 0 0 6px; font: 600 clamp(17px, 1.9vw, 22px)/1.25 Manrope, sans-serif; letter-spacing: -.02em; color: var(--ink); } .how-row p { margin: 0; max-width: 62ch; font: 400 clamp(14.5px, 1.35vw, 16.5px)/1.6 Manrope, sans-serif; color: var(--ink-soft); } /* how-we-do-it description: one dash bullet per sentence */ .how-desc { list-style: none; margin: 0; padding: 0; max-width: 62ch; } .how-desc li { display: flex; gap: 10px; align-items: baseline; margin: 0; padding: 3px 0; font: 400 clamp(14.5px, 1.35vw, 16.5px)/1.6 Manrope, sans-serif; color: var(--ink-soft); } .how-desc li::before { content: "—"; flex: none; color: var(--accent); font: 500 12px/1 "JetBrains Mono", monospace; } .acronym-intro { margin: 0 0 clamp(22px, 3.4vh, 34px); display: flex; flex-direction: column; gap: 9px; } .acr-full { /* scales with the viewport and never wraps — sized so the longest strip (the founder line) stays on one line down to small phones */ font: 500 min(1.26vw, 16px)/1.5 "JetBrains Mono", monospace; white-space: nowrap; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); } .acr-full em { font-style: normal; font-weight: 600; color: var(--gold); } .acr-full .acr-sm { font-size: .82em; } /* founder statement: same two-line style, scaled so the longer second line spans the full content width without clipping (nowrap at the standard size would overflow by ~45%) */ .statement-founder { font-size: 28px; font-size: clamp(18px, 5.3vw, 68px); } /* ── reveal-on-scroll ───────────────────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(24px); transition: opacity .8s ease, transform .8s cubic-bezier(.22, .8, .26, 1); } [data-reveal].in { opacity: 1; transform: none; } [data-reveal].d1 { transition-delay: .08s; } [data-reveal].d2 { transition-delay: .16s; } /* staggers inside #what and #soon */ #what .statement { transition-delay: .06s; } #what .lede { transition-delay: .12s; } #what .acronym-mono { transition-delay: .18s; } #soon .center-statement { transition-delay: .06s; } #soon .soon-lede { transition-delay: .12s; } #soon .waitlist { transition-delay: .18s; } #soon .soon-pill { transition-delay: .24s; } /* ── founder video (template — swap the placeholder for a real player) ──── */ .video-frame { margin-top: clamp(36px, 5vh, 58px); /* spans the full content width (same span as the divider rules) and keeps 16:9 at every viewport */ width: 100%; aspect-ratio: 16 / 9; border-radius: 20px; overflow: hidden; background: var(--raised); border: 1px solid var(--rule); box-shadow: 0 30px 70px rgba(0, 0, 0, .35); } /* founders: two cards side by side — photo, name + role, bio */ .founder-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 3.2vw, 44px); margin-top: clamp(30px, 4.5vh, 52px); align-items: start; } .founder-card { margin: 0; /* photo top-left, name + role beneath it, bio riding to the right */ display: grid; grid-template-columns: auto minmax(0, 1fr); /* row 1 hugs the photo so the caption sits right beneath it even when the facts panel (spanning both rows) runs long */ grid-template-rows: min-content 1fr; gap: 12px clamp(16px, 2vw, 26px); align-items: start; } .founder-card .founder-photo { grid-row: 1; grid-column: 1; } /* facts panel rides beside the photo; the bio spans the full card width */ .founder-facts { grid-row: 1 / span 2; grid-column: 2; margin-top: 2px; } .facts-title { margin: 0 0 10px; font: 500 10.5px/1.5 "JetBrains Mono", monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); } .founder-facts .ticks { gap: 9px; } /* sized so every fact stays on one line beside the photo */ .founder-facts .ticks li { font-size: clamp(9px, 0.9vw, 11.5px); } .founder-caption { grid-row: 2; grid-column: 1; margin: 0; text-align: center; /* never wider than the photo — a long quote must wrap, not stretch the column */ max-width: clamp(150px, 13.7vw, 175px); } .founder-quote { margin: 16px 0 0; font: 400 italic 12px/1.6 Manrope, sans-serif; color: var(--muted); text-align: justify; } .founder-card .founder-bio { grid-row: 3; grid-column: 1 / -1; margin: 10px 0 0; } .founder-photo { /* small headshot, not a poster */ /* matches the widest name ("Brendan Gnydjenko" at full size) */ width: clamp(150px, 13.7vw, 175px); aspect-ratio: 1; border-radius: 22px; background: var(--raised); border: 1px solid var(--rule); display: flex; align-items: center; justify-content: center; overflow: hidden; } .founder-photo .ph-note { margin: 0; } .founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .founder-name { margin: 0; font: 600 clamp(14px, 1.3vw, 16px)/1.3 Manrope, sans-serif; color: var(--ink); } .founder-role { margin: 5px 0 0; font: 500 10.5px/1.4 "JetBrains Mono", monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--accent); } .founder-bio { margin: 12px 0 0; font: 400 clamp(14px, 1.3vw, 15.5px)/1.6 Manrope, sans-serif; color: var(--ink-soft); text-align: justify; } @media (max-width: 700px) { .founder-grid { grid-template-columns: 1fr; gap: 34px; } } .video-frame video { width: 100%; height: 100%; object-fit: cover; display: block; } .video-placeholder { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: radial-gradient(70% 90% at 50% 0%, rgba(238, 130, 57, .10) 0%, transparent 70%), repeating-linear-gradient(-45deg, transparent 0 16px, color-mix(in srgb, var(--rule) 40%, transparent) 16px 17px); } .play-badge { display: grid; place-items: center; width: clamp(56px, 7vw, 72px); height: clamp(56px, 7vw, 72px); border-radius: 50%; background: var(--accent); color: #14120B; box-shadow: 0 0 0 10px color-mix(in srgb, var(--accent) 18%, transparent); } .play-badge svg { margin-left: 3px; } .video-label { font: 500 clamp(9px, 1vw, 11px)/1 "JetBrains Mono", monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } /* ── the app, 04–08: one normal band per surface ────────────────────────── */ .app-split { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: clamp(28px, 5vw, 80px); align-items: center; } .app-copy .eyebrow-mono { margin-bottom: 22px; } .step-title { margin: 0 0 20px; font: 300 clamp(20px, 2.7vw, 33px)/1.14 Manrope, sans-serif; letter-spacing: -.03em; color: var(--ink); } .step-title > span { display: block; white-space: nowrap; } .step-title em { font-style: normal; color: var(--gold); } /* toolkit toggle: pill tabs that swap the copy panel + phone screen */ .tk-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; } .tk-tab { padding: 9px 16px; border-radius: 999px; border: 1px solid var(--rule); background: transparent; color: var(--ink-soft); font: 600 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; transition: color .25s ease, border-color .25s ease, background .25s ease; } .tk-tab:hover { border-color: var(--accent); color: var(--ink); } .tk-tab.is-active { background: var(--accent); border-color: var(--accent); color: #14120B; } .tk-panel { display: none; } .tk-panel.is-active { display: block; } .step-body { margin: 0 0 28px; max-width: 46ch; font: 400 clamp(15px, 1.4vw, 17.5px)/1.65 Manrope, sans-serif; color: var(--ink-soft); } /* two-sentence body: each sentence starts on its own line */ .step-body-two { max-width: none; } .step-body-two > span { display: block; } .ticks { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; max-width: 44ch; } .ticks li { display: flex; gap: 14px; align-items: baseline; font: 400 14.5px/1.5 Manrope, sans-serif; color: var(--ink-soft); } .tick-dot { flex: none; width: 5px; height: 5px; border-radius: 50%; background: var(--accent); transform: translateY(-2px); } /* the phone (always dark, regardless of theme) */ .app-phone { display: flex; justify-content: center; align-items: center; } .phone { position: relative; height: min(600px, 72svh); width: auto; aspect-ratio: 9 / 19.3; max-width: 70vw; border-radius: 44px; background: #0F0D09; padding: 9px; box-shadow: 0 40px 90px rgba(0, 0, 0, .45), 0 0 0 1px var(--rule), inset 0 0 0 1px rgba(255, 255, 255, .06); } .phone-notch { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 88px; height: 24px; border-radius: 999px; background: #000; z-index: 5; } .phone-screen { position: relative; width: 100%; height: 100%; border-radius: 36px; overflow: hidden; background: #14120B; } .phone-glow { position: absolute; inset: 0; background: radial-gradient(90% 45% at 50% 0%, rgba(238, 130, 57, .18) 0%, transparent 70%); } .screen { position: absolute; inset: 0; padding: 56px 18px 22px; display: flex; flex-direction: column; gap: 12px; opacity: 0; transform: scale(.97); transition: opacity .5s ease, transform .7s cubic-bezier(.22, .8, .26, 1); } .screen.is-active { opacity: 1; transform: scale(1); } .screen-head { display: flex; align-items: baseline; justify-content: space-between; } .s-title { font: 600 15px/1 Manrope, sans-serif; color: #F3F1EA; letter-spacing: -.01em; } .s-meta { font: 500 9px/1 "JetBrains Mono", monospace; letter-spacing: .16em; text-transform: uppercase; color: #8A8781; } .srow { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: rgba(255, 255, 255, .035); border: 1px solid rgba(255, 255, 255, .06); } .s-mark { flex: none; width: 3px; height: 26px; border-radius: 2px; } .s-mid { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 5px; } .s-label { font: 600 11.5px/1.2 Manrope, sans-serif; color: #EDE9DF; } .s-track { display: block; height: 4px; border-radius: 2px; background: #302E29; position: relative; overflow: hidden; } .s-fill { position: absolute; inset: 0 auto 0 0; border-radius: 2px; opacity: .85; } .s-val { flex: none; font: 500 9.5px/1 "JetBrains Mono", monospace; color: #8A8781; } .ph-note { margin-top: auto; font: 500 8.5px/1 "JetBrains Mono", monospace; letter-spacing: .18em; text-transform: uppercase; color: #5F5C56; text-align: center; } /* ── early access ───────────────────────────────────────────────────────── */ .closing { padding: clamp(90px, 16vh, 180px) clamp(24px, 5vw, 64px) clamp(70px, 10vh, 120px); text-align: center; overflow: hidden; } /* full-section star field behind the closing (drawn by landing.js) */ .soon-fx { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* the agent, drifting beside the request-access button */ .soon-agent { position: absolute; left: calc(50% + 286px); /* the agent body centres on the button; the bubble rides above */ top: 50%; margin-top: -74px; width: 72px; pointer-events: none; } .soon-agent { animation: agent-float 9s ease-in-out infinite; } .soon-agent img { width: 100%; height: auto; display: block; filter: drop-shadow(0 6px 22px rgba(238, 130, 57, .22)); } /* little chat bubble above the agent — same construction as the hero's thought bubble (owner ruling 2026-08-21): rounded rect, scallop nub merged into one continuous outline, two thought-dots stepping down to him */ .agent-say { position: relative; display: block; width: max-content; /* auto margins CANNOT centre a max-content box wider than its container (they resolve to 0 and it hangs off to the right — owner screenshot); centre with left/translate instead */ left: 50%; margin: 0 0 9px; /* the nub extends ~7px below — keep it off dot one */ padding: 7px 12px 8px; border-radius: 12px; /* glass, same recipe as the hero bubble; outline (incl. nub) lives in the .agent-say-shape svg — see the hero note */ background: color-mix(in srgb, #211F19 62%, transparent); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); font: 600 12.5px/1 Manrope, sans-serif; letter-spacing: .03em; color: var(--gold); transform: translateX(-50%) rotate(-3deg); box-shadow: 0 6px 18px rgba(0, 0, 0, .35); } .agent-say-shape { position: absolute; top: 0; left: 0; width: 100%; height: calc(100% + 5px); /* the nub's dip below the box */ overflow: visible; pointer-events: none; } .agent-say-dots { display: flex; flex-direction: column; align-items: center; gap: 4px; width: max-content; margin: 0 auto 5px; } .agent-say-dots i { display: block; border-radius: 50%; background: color-mix(in srgb, #211F19 62%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); border: 1px solid var(--rule); } /* dots step from UNDER THE NUB (bump centred at 40% of the bubble — moved left 2026-08-21, it met the box too far right) down-right to his head */ .agent-say-dots i:nth-child(1) { width: 6px; height: 6px; transform: translateX(-11px); } .agent-say-dots i:nth-child(2) { width: 4px; height: 4px; transform: translateX(-5px); } /* small screens (owner ruling 2026-08-21): Pluto flows BELOW the request-access button, centred — his own full-width row, so nothing can overlap the input above or the pill below */ @media (max-width: 760px) { .soon-agent { position: static; /* the agent-float drift rises up to 24px — the margin must absorb the whole excursion or the bubble bumps the button at the animation's top */ margin-top: 34px; /* full-row container (flex-basis outranks width in flex layout — a 56px width here made the 100%-width img fill the whole form) with the ART pinned small below */ width: 100%; flex-basis: 100%; display: flex; flex-direction: column; align-items: center; } .soon-agent img { width: 56px; } .agent-say { /* flex centring replaces the desktop left/translate trick */ left: auto; transform: rotate(-3deg); font-size: 11px; padding: 6px 10px 7px; } } .soon-glow { position: absolute; left: 50%; bottom: -260px; transform: translateX(-50%); width: 760px; height: 520px; background: radial-gradient(50% 60% at 50% 100%, rgba(248, 180, 75, .30) 0%, rgba(238, 130, 57, .12) 42%, transparent 72%); pointer-events: none; } .closing .band-inner { position: relative; max-width: 760px; } /* the hero's animated sun, scaled down for the closing */ .mini-sun { width: 212px; height: 212px; margin: 0 auto -20px; animation: sun-breathe 7s ease-in-out infinite; } .mini-sun svg { width: 100%; height: 100%; display: block; overflow: visible; } @keyframes sun-breathe { 50% { transform: scale(1.02); } } .center-statement { margin: 0 auto; max-width: 15ch; border-top: 0; } .soon-lede { margin: 22px auto 0; max-width: 46ch; font: 400 17px/1.65 Manrope, sans-serif; color: var(--ink-soft); } .soon-bright { margin-top: 14px; color: var(--gold); } .waitlist { position: relative; display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; margin: 34px 0 0; } .waitlist input { width: min(340px, 80vw); height: 52px; padding: 0 20px; border-radius: 999px; border: 1px solid var(--rule); background: var(--surface); color: var(--ink); font: 400 15px/1 Manrope, sans-serif; outline: none; } .waitlist input:focus { border-color: var(--accent); } .waitlist button { height: 52px; padding: 0 28px; border: 0; border-radius: 999px; background: var(--accent); color: #14120B; font: 700 14.5px/1 Manrope, sans-serif; cursor: pointer; transition: background .25s ease; } .waitlist button:hover { background: var(--gold); } .soon-pill { display: inline-flex; align-items: center; gap: 10px; margin: 26px 0 0; font: 500 10.5px/1 "JetBrains Mono", monospace; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .soon-pill .pulse { width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 4px rgba(228, 114, 53, .14); } /* ── responsive ─────────────────────────────────────────────────────────── */ @media (max-width: 900px) { .split { grid-template-columns: 1fr; gap: 26px; } .how-head { grid-template-columns: clamp(40px, 5vw, 64px) minmax(0, 1fr); } .how-title-diff { display: none; } .how-row { grid-template-columns: clamp(40px, 5vw, 64px) minmax(0, 1fr); } .how-diff { grid-column: 2; margin-top: 2px; align-self: auto; justify-content: flex-start; } .tri { grid-template-columns: 1fr; } /* app sections: copy on top, phone below */ .app-split { grid-template-columns: 1fr; gap: 30px; } .phone { height: min(560px, 58svh); } .header-cta { display: none; } } /* narrow screens: the rail stays, labels drop, content clears its lane */ @media (max-width: 700px) { .dot-label { display: none; } .band { padding-right: clamp(44px, 12vw, 64px); } .closing .band-inner { padding-right: 0; } } /* very narrow phones: keep every app-section bullet on one line */ @media (max-width: 379px) { .ticks li { font-size: 12.6px; } .step-title { font-size: 15.5px; } } /* ── reduced motion ─────────────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { body.landing * { animation: none !important; } [data-reveal] { opacity: 1; transform: none; transition: none; } }