/* Aspra — dark mode only. Celestial editorial: canvas indigo, parchment cream, lantern gold. */ :root { --bg: #0F0B1A; --canvas-top: #120E24; --canvas-deep: #080512; --surface: #1A1428; --surface-2: #221836; --surface-top: #241B42; --surface-bottom: #151028; --surface-rim: #3A2E63; --accent: #D8B97A; --accent-hi: #E8CF96; --lantern-deep: #A9853F; --gold-on-light: #A6782E; --accent-glow: rgba(232, 207, 150, 0.30); /* One gold material, three grades — mirrors AspraCraft.Grad. goldFill = objects (CTAs, badges, tiles, stars). goldText = emphasized text and numerals. Anything gold and wider than ~16px uses one of these; dots, hairlines and sub-16px glyphs stay flat, where a gradient would not read. */ --grad-gold-fill: linear-gradient(135deg, var(--accent-hi) 0%, var(--accent) 55%, var(--lantern-deep) 100%); --grad-gold-text: linear-gradient(180deg, var(--accent-hi) 0%, var(--accent) 52%, var(--lantern-deep) 100%); --grad-card: linear-gradient(135deg, var(--surface-top), var(--surface-bottom)); --text: #F0E6D2; --text-2: rgba(240, 230, 210, 0.74); --text-3: rgba(240, 230, 210, 0.52); --line: rgba(240, 230, 210, 0.10); --line-strong: rgba(240, 230, 210, 0.18); --destructive: #F0E6D2; --font-display: ui-rounded, "SF Pro Rounded", -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", system-ui, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, "SF Pro Text", "SF Pro", "Inter", system-ui, sans-serif; --maxw: 1240px; --pad-x: clamp(20px, 4vw, 56px); --radius-sm: 8px; --radius: 14px; --radius-lg: 22px; } * { box-sizing: border-box; } /* Base canvas = the deepest sky tone; the fixed .page-atmo layer paints the full app sky gradient (canvas-top → bg → canvas-deep) in viewport space. */ /* The sky (.page-atmo / .page-atmo-stars) is fixed at a negative z-index, and a background on paints OVER negative-z-index layers. Giving body its own background was hiding the entire atmosphere: the hero kept its constellation (that canvas is scoped inside .hero) and everything below it went flat black. The base colour lives on only; body stays transparent. */ html { margin: 0; padding: 0; background: var(--canvas-deep); } body { margin: 0; padding: 0; background: transparent; color: var(--text); } body { font-family: var(--font-body); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "ss01", "cv11"; overflow-x: hidden; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } img, video { display: block; max-width: 100%; } /* No italics anywhere — neutralize any default emphasis */ em, i, cite, address { font-style: normal; } .container { max-width: var(--maxw); margin: 0 auto; padding-left: var(--pad-x); padding-right: var(--pad-x); } /* ───────── Constellation divider ───────── The kit's section punctuation: rising dots reaching a star. Twice per page. */ .constellation-divider { display: flex; align-items: center; gap: 10px; max-width: 420px; margin: 0 auto; padding: 0 var(--pad-x); } .cd-line { flex: 1; height: 1px; } .cd-line--lead { background: linear-gradient(90deg, transparent, rgba(216, 185, 122, 0.4)); } .cd-line--trail { background: linear-gradient(90deg, rgba(216, 185, 122, 0.4), transparent); } .cd-dot { border-radius: 999px; background: var(--accent); flex-shrink: 0; } .cd-dot--1 { width: 4px; height: 4px; opacity: 0.45; } .cd-dot--2 { width: 5px; height: 5px; opacity: 0.7; } .cd-dot--3 { width: 6px; height: 6px; background: var(--accent-hi); opacity: 1; } .cd-star { flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(232, 207, 150, 0.7)); } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.02em; margin: 0; text-wrap: balance; } h1 { font-size: clamp(44px, 6.4vw, 88px); line-height: 1.02; letter-spacing: -0.035em; font-weight: 600; } h2 { font-size: clamp(34px, 4.2vw, 56px); line-height: 1.05; letter-spacing: -0.025em; } h3 { font-size: clamp(22px, 1.8vw, 28px); line-height: 1.15; } p { margin: 0; } /* ───────── Gold text utilities ───────── Kit rule: glow follows gold OBJECTS; prose never glows. .gold-text — emphasized words render in the rich 3-stop goldText gradient (lanternGlow → lantern → lanternDeep), zero shadow. .gold-numeral — hero numerals only: same fill, plus the sanctioned lantern glow (via drop-shadow so it composites under the clipped fill). */ .gold-text, .gold-numeral { color: var(--accent); /* fallback where background-clip: text is unsupported */ text-shadow: none; } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .gold-text, .gold-numeral { background-image: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } } .gold-numeral { filter: drop-shadow(0 0 24px rgba(232, 207, 150, 0.32)) drop-shadow(0 0 8px rgba(232, 207, 150, 0.22)); } /* ───────── Buttons ───────── Primary = AspraGoldCTA: goldFill capsule, canvas-deep ink, white catch-light, the one sanctioned glow near prose. Secondary = AspraSecondaryButton: cool rim-lit slab, 12px rect — the demoted path. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: var(--font-display); font-weight: 600; font-size: 17px; letter-spacing: -0.005em; padding: 17px 26px; border-radius: 999px; border: 1px solid transparent; transition: transform 0.2s ease, box-shadow 0.3s ease, background 0.2s ease, border-color 0.2s ease, color 0.2s ease; white-space: nowrap; cursor: pointer; line-height: 1.2; } .btn:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; } .btn-primary { background: var(--grad-gold-fill); color: var(--canvas-deep); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 18px rgba(216, 185, 122, 0.45); } .btn-primary:hover { transform: translateY(-1px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 8px 22px rgba(216, 185, 122, 0.60); } .btn-primary:active { transform: translateY(0); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 6px 18px rgba(216, 185, 122, 0.45); transition-duration: 0.08s; } .btn-primary:disabled { opacity: 0.4; transform: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35); cursor: default; } .btn-secondary { background: var(--grad-card); border-color: rgba(58, 46, 99, 0.9); border-radius: 12px; color: var(--text-2); font-weight: 500; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.16); } .btn-secondary:hover { border-color: rgba(216, 185, 122, 0.35); color: var(--text); } .btn-secondary:active { border-color: rgba(216, 185, 122, 0.45); transition-duration: 0.08s; } .btn-sm { padding: 10px 16px; font-size: 14px; } /* Tertiary — a quiet inline text action. No box, no fill; the arrow carries it. */ .btn-tertiary { display: inline-flex; align-items: center; gap: 8px; background: none; border: none; padding: 4px 0; font-family: var(--font-display); font-size: 15px; font-weight: 500; color: var(--text-2); cursor: pointer; transition: color 0.2s ease; } .btn-tertiary .arrow { transition: transform 0.25s ease; } .btn-tertiary:hover { color: var(--accent-hi); } .btn-tertiary:hover .arrow { transform: translateX(3px); } .btn-tertiary:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 4px; } .btn .arrow { transition: transform 0.25s ease; } .btn:hover .arrow { transform: translateX(3px); } @media (prefers-reduced-motion: reduce) { .btn-primary:hover { transform: none; } .btn:hover .arrow, .btn-tertiary:hover .arrow { transform: none; } } /* ───────── AspraCraft slabs (web port) ───────── .slab full card: card gradient + rim + top catch-light + layered shadow .slab--gold emphasized: warmer rim and a gold cast .slab--light list tier: half-strength fill, one soft shadow (many on screen) */ .slab { background: var(--grad-card); border: 1px solid var(--surface-rim); border-radius: var(--radius-lg); box-shadow: inset 0 1px 0 rgba(232, 207, 150, 0.16), inset 1px 0 0 rgba(232, 207, 150, 0.06), 0 2px 8px rgba(3, 2, 8, 0.4), 0 24px 70px -30px rgba(3, 2, 8, 0.85); } .slab--gold { border-color: rgba(216, 185, 122, 0.45); box-shadow: inset 0 1px 0 rgba(232, 207, 150, 0.24), inset 1px 0 0 rgba(232, 207, 150, 0.08), 0 2px 8px rgba(3, 2, 8, 0.4), 0 24px 70px -30px rgba(3, 2, 8, 0.85), 0 0 44px -12px rgba(216, 185, 122, 0.22); } .slab--light { background: linear-gradient(135deg, rgba(36, 27, 66, 0.55), rgba(21, 16, 40, 0.55)); border: 1px solid rgba(58, 46, 99, 0.6); border-radius: var(--radius-lg); box-shadow: 0 10px 26px -14px rgba(3, 2, 8, 0.65); } /* ───────── AspraChip (web port) — small capsule tag on a lantern wash ───────── */ .chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 11px; border-radius: 999px; background: rgba(216, 185, 122, 0.14); border: 1px solid rgba(216, 185, 122, 0.5); } .chip > span { font-family: var(--font-display); font-size: 12px; font-weight: 600; letter-spacing: 0.05em; color: var(--accent); } @supports ((-webkit-background-clip: text) or (background-clip: text)) { .chip > span { background-image: var(--grad-gold-text); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } } /* ───────── Sticky navbar ───────── */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; padding: 14px 0; transition: background 0.3s ease, backdrop-filter 0.3s ease, border-color 0.3s ease; border-bottom: 1px solid transparent; } .nav.scrolled { background: rgba(15, 11, 26, 0.72); backdrop-filter: saturate(1.4) blur(18px); -webkit-backdrop-filter: saturate(1.4) blur(18px); border-bottom-color: var(--line); } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .wordmark { font-family: var(--font-display); font-weight: 600; font-size: 20px; letter-spacing: -0.02em; display: inline-flex; align-items: center; gap: 10px; color: var(--text); } .wordmark .mark { flex-shrink: 0; display: block; } .nav-links { display: flex; align-items: center; gap: 28px; } /* ───────── Nav waitlist link — matches Features / Pricing ───────── */ .nav-links a { font-size: 14px; color: var(--text-2); transition: color 0.2s; } .nav-links a:hover { color: var(--text); } @media (max-width: 640px) { .nav-links .link-hide-mobile { display: none; } } /* ───────── Hero ───────── */ .hero { position: relative; min-height: 100vh; min-height: 100svh; display: flex; align-items: center; overflow: hidden; isolation: isolate; /* Quiet depth behind the constellation canvas; the base sky comes from the fixed .page-atmo layer (html/body fall back to canvas-deep if JS fails). */ background: radial-gradient(110% 80% at 65% 0%, rgba(216, 185, 122, 0.05), transparent 55%), radial-gradient(90% 75% at 12% 100%, rgba(34, 24, 54, 0.85), transparent 60%); } /* Live constellation field — drawn by ConstellationCanvas in app.jsx. */ .hero-canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; } /* Fade the star field into the page background at the bottom edge. */ .hero::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 140px; z-index: -1; background: linear-gradient(180deg, transparent, var(--canvas-deep)); pointer-events: none; } .hero-inner { position: relative; padding-top: 140px; padding-bottom: 120px; width: 100%; } .hero-grid { display: grid; /* The copy column has to hold "meant to become." on ONE line at the h1's top size, or the headline takes a fourth line and shoves the CTAs under the fold on a 760px-tall laptop. That needs ~700px, so the copy column gets the room. */ grid-template-columns: minmax(0, 1.35fr) minmax(0, 0.65fr); gap: clamp(32px, 4.5vw, 64px); align-items: center; } .hero-copy { max-width: 720px; } .hero h1 { margin-top: 22px; } .hero-sub { margin-top: 26px; font-size: clamp(17px, 1.4vw, 20px); line-height: 1.55; color: var(--text); max-width: 560px; } .hero-cta-row { margin-top: 38px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; } /* ── Hero copy entrance — headline lines → sub → CTAs ── */ @keyframes heroRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } } .hero-copy > * { animation: heroRise 0.85s cubic-bezier(0.22, 1, 0.36, 1) both; } .hero-copy > h1 { animation: none; } /* the headline animates line by line */ .h1-line { display: inline-block; animation: heroRise 0.9s cubic-bezier(0.22, 1, 0.36, 1) both; } h1 .h1-line:nth-of-type(1) { animation-delay: 0.2s; } h1 .h1-line:nth-of-type(2) { animation-delay: 0.34s; } .hero-copy > .hero-sub { animation-delay: 0.5s; } .hero-copy > .hero-cta-row { animation-delay: 0.62s; } .hero-copy > /* ── 3D floating iPhone — sits back in space at a slight 3/4 angle ── */ .hero-phone { position: relative; justify-self: end; /* Scales with the viewport instead of sitting at a fixed 292px across the whole desktop range, which is what made it look pinned rather than placed. */ width: clamp(210px, 23vw, 300px); margin-right: clamp(0px, 2.5vw, 44px); /* Deeper perspective + origin above centre = the device reads as an object seen from slightly in front, not a flat card pinned to the glass. */ perspective: 1500px; perspective-origin: 50% 38%; animation: heroRise 1.1s cubic-bezier(0.22, 1, 0.36, 1) 0.4s both; } /* Outer layer = cursor tilt (driven by JS). */ .hero-phone-tilt { transform-style: preserve-3d; will-change: transform; } /* Middle layer = idle float + a resting 3/4 pose that gently breathes in 3D. */ .hero-phone-float { transform-style: preserve-3d; animation: heroFloat 12s ease-in-out infinite; } .hero-phone-inner { position: relative; transform-style: preserve-3d; } /* The fold-cap lives on the WRAP, not the img. The video layer is positioned in % against the wrap, so a max-height on the image alone would shear the two apart on short viewports. 0.4816 is the device aspect (984/2043). */ .hero-phone .feat-phone-screen-wrap { width: min(100%, calc(min(72svh, 640px) * 0.4816)); /* 984/2043 */ margin: 0 auto; } .hero-phone img { width: 100%; height: auto; display: block; /* A deeper, softer ground shadow reads as distance — the device floats well above the page rather than resting on it. */ filter: drop-shadow(0 48px 80px rgba(3, 2, 8, 0.75)) drop-shadow(0 14px 34px rgba(3, 2, 8, 0.55)) drop-shadow(0 6px 20px rgba(216, 185, 122, 0.10)); } /* Glass sheen — a specular band confined to the device silhouette (masked by the same PNG) that sweeps as the cursor moves. This is what sells "behind glass, out of reach" instead of "a screenshot you can touch". */ /* Lantern pool beneath the device — the hero's second luminous moment. */ .hero-phone-glow { position: absolute; left: 50%; bottom: -7%; width: 88%; height: 20%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(216, 185, 122, 0.20), transparent 72%); filter: blur(28px); z-index: -1; pointer-events: none; } /* Resting pose lives in the float keyframe: a held -10deg yaw with a small breathing sway, so even untouched the phone reads as a 3D object in space. */ @keyframes heroFloat { 0%, 100% { transform: translateY(0) rotateY(0deg) rotateX(0.5deg); } 50% { transform: translateY(-7px) rotateY(0.6deg) rotateX(1deg); } } /* Raised from 980px: between 981 and 1060 the copy column was being crushed while the phone held its width, which is the band where it read as broken. */ @media (max-width: 1060px) { .hero-grid { grid-template-columns: 1fr; gap: 56px; } .hero-inner { padding-top: 120px; padding-bottom: 140px; } .hero-phone { width: min(60vw, 260px); margin: 0 auto; justify-self: center; } /* No cursor tilt on narrow layouts, whatever the pointer type. */ .hero-phone-tilt { transform: none !important; } } @media (prefers-reduced-motion: reduce) { .hero-copy > *, .h1-line, .hero-phone { animation: none; } /* Keep the resting 3/4 pose, drop the motion. */ .hero-phone-float { animation: none; transform: none; } .hero-phone-tilt { transform: none !important; } } .hero-tagline { margin-top: 28px; font-size: 14px; color: var(--text-3); display: inline-flex; align-items: center; gap: 12px; } .hero-tagline .dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 12px var(--accent-glow); } /* ───────── Sections ───────── */ section { position: relative; padding: clamp(96px, 12vw, 160px) 0; } .section-head { max-width: 760px; margin-bottom: 64px; } .section-head h2 { margin-top: 0; /* the h2 is the section label; nothing sits above it */ } .section-head .lead { margin-top: 22px; font-size: clamp(17px, 1.4vw, 19px); color: var(--text); max-width: 640px; line-height: 1.55; } .section-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--line-strong), transparent); } /* The restart cycle — one slab. Left: three attempts that collapse, then the gold line that does not. Right: three beats on a node spine. */ .cycle-card { display: grid; grid-template-columns: 1.05fr 1fr; gap: clamp(28px, 4vw, 56px); align-items: center; padding: clamp(28px, 4vw, 48px); /* Pulled off the house violet so the gold escape line owns the only colour in the box, but kept a purple-black rather than a neutral one so it still belongs to the sky it sits on. */ background: linear-gradient(160deg, #1A1526 0%, #100C1B 100%); border-color: rgba(240, 230, 210, 0.13); box-shadow: inset 0 1px 0 rgba(232, 207, 150, 0.14), 0 2px 8px rgba(3, 2, 8, 0.4), 0 24px 70px -30px rgba(3, 2, 8, 0.85); } .cycle-art svg { width: 100%; height: auto; display: block; } /* Was a 13px mumble at the bottom of the chart. It is the emotional pivot of the whole page, so it is now the loudest line between the hero and the close. */ .cycle-verdict { margin-top: 22px; font-family: var(--font-display); font-size: clamp(22px, 2.8vw, 32px); font-weight: 650; letter-spacing: -0.01em; line-height: 1.25; color: var(--text); } .cycle-beats { list-style: none; margin: 0; padding: 0; display: grid; gap: 22px; position: relative; } .cycle-beats::before { content: ""; position: absolute; left: 15px; top: 34px; bottom: 34px; width: 2px; border-radius: 2px; background: linear-gradient(180deg, rgba(232, 207, 150, 0.9) 0%, rgba(216, 185, 122, 0.55) 45%, rgba(240, 230, 210, 0.16) 100%); } .cycle-beats li { display: grid; grid-template-columns: 32px 1fr; gap: 16px; align-items: start; } .cycle-node { position: relative; z-index: 1; width: 32px; height: 32px; border-radius: 50%; background: linear-gradient(135deg, #231C33, #150F22); border: 1px solid rgba(240, 230, 210, 0.14); box-shadow: inset 0 1px 0 rgba(232, 207, 150, 0.2), 0 4px 10px rgba(3, 2, 8, 0.45); display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-display); font-size: 12px; font-weight: 700; color: var(--accent); } .cycle-beats h3 { font-size: 19px; margin-bottom: 6px; } .cycle-beats p { color: var(--text-2); font-size: 15px; max-width: 44ch; } @media (max-width: 900px) { .cycle-card { grid-template-columns: 1fr; } .cycle-art { order: 1; } /* beats first, the drawing after */ } /* Two modes */ .modes-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .mode { position: relative; padding: 44px 40px 40px; overflow: hidden; min-height: 460px; display: flex; flex-direction: column; } .mode .mode-art { margin-top: auto; padding-top: 36px; } .mode .chip { margin-bottom: 18px; align-self: flex-start; } .mode h3 { font-size: clamp(26px, 2.2vw, 34px); margin-bottom: 16px; } .mode p { color: var(--text); max-width: 38ch; } /* Glyph artwork */ .glyph { width: 100%; height: 180px; position: relative; border-top: 1px solid var(--line); padding-top: 24px; } .glyph svg { width: 100%; height: 100%; } @media (max-width: 900px) { .modes-grid { grid-template-columns: 1fr; } } /* Onboarding */ .onboard { display: grid; /* Copy leads, device follows on the right. Mirrors .how-grid so the two chapters read as one column of prose with the phones out to the side. */ grid-template-columns: 1.05fr 0.9fr; gap: clamp(40px, 5vw, 72px); align-items: center; } /* Onboarding mock is now the floating device (see .feat-phone), not a card. */ .onboard-mock { display: flex; justify-content: center; align-items: center; } .onboard-copy h2 { margin-bottom: 22px; } .onboard-copy p { color: var(--text); font-size: 17px; } .onboard-steps { list-style: none; padding: 0; margin: 32px 0 0; display: grid; gap: 16px; } .onboard-steps li { display: grid; grid-template-columns: 36px 1fr; gap: 16px; align-items: start; padding: 14px 0; border-top: 1px solid var(--line); } .onboard-steps li:first-child { border-top: none; padding-top: 0; } .onboard-steps .n { font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--accent); letter-spacing: 0.04em; } .onboard-steps .t { color: var(--text); font-weight: 500; } .onboard-steps .d { color: var(--text); font-size: 14px; margin-top: 2px; } @media (max-width: 980px) { .onboard { grid-template-columns: 1fr; } } /* Features grid */ .features { display: grid; grid-template-columns: repeat(12, 1fr); gap: 20px; } .feature { padding: 32px; display: flex; flex-direction: column; gap: 14px; min-height: 280px; position: relative; overflow: hidden; } .feature h3 { font-size: 22px; } .feature p { color: var(--text); font-size: 15px; } .feature .feature-tag { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); } .feature .feature-art { margin-top: auto; height: 110px; border-top: 1px solid var(--line); padding-top: 16px; } .feature.large { grid-column: span 6; } .feature.small { grid-column: span 4; } .feature.wide { grid-column: span 8; } .feature.tall { grid-column: span 6; } @media (max-width: 980px) { .features { grid-template-columns: 1fr 1fr; } .feature.large, .feature.small, .feature.wide, .feature.tall { grid-column: span 2; } } @media (max-width: 600px) { .features { grid-template-columns: 1fr; } .feature.large, .feature.small, .feature.wide, .feature.tall { grid-column: span 1; } } .stat-card .num { font-family: var(--font-display); font-size: clamp(36px, 3.4vw, 48px); font-weight: 600; letter-spacing: -0.03em; color: var(--text); line-height: 1; } .stat-card .num .pct { color: var(--accent-hi); } .stat-card .label { margin-top: 12px; color: var(--text-2); font-size: 14px; line-height: 1.45; } @media (max-width: 980px) { } @media (max-width: 560px) { } /* Pricing */ .pricing { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; max-width: 980px; margin: 0 auto; } /* Pricing — the in-app paywall, rendered for the web. */ .paywall-card { position: relative; padding: 36px 32px 32px; display: flex; flex-direction: column; align-items: flex-start; } .tier-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .tier-head h3 { font-size: 24px; letter-spacing: -0.02em; } .tier-tile { width: 44px; height: 44px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .tier-tile--gold { background: linear-gradient(135deg, var(--accent-hi), var(--lantern-deep)); box-shadow: 0 4px 12px rgba(216, 185, 122, 0.4); } .tier-tile--violet { background: linear-gradient(135deg, #9D8BE8, #5B48B0); box-shadow: 0 4px 12px rgba(157, 139, 232, 0.35); } .badge--gold { font-family: var(--font-display); font-size: 11px; font-weight: 600; letter-spacing: 0.04em; padding: 5px 10px; border-radius: 999px; background: var(--grad-gold-fill); color: var(--canvas-deep); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 2px 8px rgba(216, 185, 122, 0.4); white-space: nowrap; } .tier-tagline { color: var(--text-2); font-size: 15px; margin-bottom: 22px; } .tier-price { font-family: var(--font-display); font-size: 44px; font-weight: 700; letter-spacing: -0.03em; line-height: 1; margin-bottom: 8px; } .tier-detail { color: var(--text-2); font-size: 15px; margin-bottom: 12px; } .tier-save { margin-bottom: 14px; } .tier-weekly { color: var(--text-3); font-size: 13px; margin-bottom: 24px; } .tier-bullets { list-style: none; padding: 24px 0 0; margin: 0 0 30px; border-top: 1px solid var(--line); display: grid; gap: 12px; width: 100%; } .tier-bullets li { display: grid; grid-template-columns: 16px 1fr; gap: 10px; align-items: start; font-size: 14.5px; color: var(--text); } .tier-bullets svg { margin-top: 4px; } .paywall-card .btn { margin-top: auto; width: 100%; justify-content: center; } #pricing { padding-bottom: clamp(56px, 7vw, 88px); } @media (max-width: 760px) { .pricing { grid-template-columns: 1fr; } } /* Final CTA */ .final-cta { text-align: center; padding: clamp(120px, 16vw, 200px) 0; position: relative; overflow: hidden; } .final-cta::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 50% 100%, rgba(216, 185, 122, 0.20), transparent 60%), radial-gradient(ellipse 60% 40% at 50% 0%, rgba(216, 185, 122, 0.10), transparent 60%); z-index: 0; pointer-events: none; } .final-cta > * { position: relative; z-index: 1; } .final-cta h2 { max-width: 16ch; margin: 18px auto 0; font-size: clamp(40px, 6vw, 80px); } .final-cta p { margin: 24px auto 0; color: var(--text); max-width: 52ch; } .final-cta .btn { margin-top: 40px; } /* ───────── FAQ accordion ───────── */ .faq-list { max-width: 800px; display: flex; flex-direction: column; gap: 12px; } .faq-item { padding: 0 22px; border-radius: var(--radius); transition: border-color 0.25s ease; } .faq-item--open { border-color: rgba(216, 185, 122, 0.35); } .faq-q { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: 19px 0; background: transparent; border: none; color: var(--text-2); font-family: var(--font-display); font-size: 16px; font-weight: 500; text-align: left; cursor: pointer; transition: color 0.2s; } .faq-q:hover { color: var(--text); } .faq-q:focus-visible { outline: 2px solid var(--accent-hi); outline-offset: 3px; border-radius: 6px; } .faq-item--open .faq-q { color: var(--text); } .faq-icon { flex-shrink: 0; width: 24px; height: 24px; border: 1px solid var(--line-strong); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-3); transition: border-color 0.25s, color 0.25s, transform 0.3s ease; } .faq-item--open .faq-icon { border-color: var(--accent); color: var(--accent); transform: rotate(90deg); } .faq-icon-v { transition: opacity 0.2s ease; } .faq-item--open .faq-icon-v { opacity: 0; } /* Smooth open. The old rule animated max-height between 0 and a hardcoded 400px, so a 90px answer finished moving in the first fifth of the duration and then sat still. A grid row eased from 0fr to 1fr travels exactly the content's own height, so the motion matches what you actually see. */ .faq-a-wrap { display: grid; grid-template-rows: 0fr; transition: grid-template-rows 0.4s cubic-bezier(0.2, 0.7, 0.2, 1); } .faq-item--open .faq-a-wrap { grid-template-rows: 1fr; } .faq-a-inner { overflow: hidden; min-height: 0; /* without this the row will not shrink below content height */ } .faq-a { padding: 2px 32px 22px 0; font-size: 15px; color: var(--text); line-height: 1.65; max-width: 68ch; } @media (prefers-reduced-motion: reduce) { .faq-a-wrap, .faq-icon { transition: none; } } /* The ask at the peak of desire: the reader has just seen how their plan gets built. */ .plan-cta { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 36px; } .plan-cta-note { font-size: 14px; color: var(--text-3); } /* The one number from the old research grid, placed where it actually convinces: at the moment the reader decides whether a witness matters. */ .witness-evidence { margin: 44px auto 0; max-width: 560px; text-align: center; font-size: 15.5px; line-height: 1.6; color: var(--text-2); } .witness-evidence strong { color: var(--text); font-weight: 650; } .witness-evidence .src { display: block; margin-top: 10px; font-size: 13px; color: var(--text-3); } /* ───────── How it works ───────── */ .how-grid { display: grid; grid-template-columns: 1.05fr 0.9fr; gap: 72px; align-items: center; } .how-copy h2 { margin-top: 0; } .how-body { margin-top: 26px; color: var(--text); font-size: clamp(17px, 1.4vw, 19px); line-height: 1.6; max-width: 52ch; } .how-mock { display: flex; justify-content: center; align-items: center; } /* ───────── Feature device ───────── The same iPhone render family as the hero, floated at a resting 3D pose. Two poses: --right tilts the face outward to the right; --center sits near straight-on. Idle float + a lantern pool beneath, no cursor tilt. */ .feat-phone { position: relative; width: min(100%, 300px); margin: 0 auto; perspective: 1600px; perspective-origin: 50% 40%; } /* Outer layer = cursor tilt (driven by JS), matching the hero phone. */ .feat-phone-tilt { transform-style: preserve-3d; will-change: transform; } .feat-phone-float { transform-style: preserve-3d; animation: featFloat 13s ease-in-out infinite; } .feat-phone img { width: 100%; height: auto; display: block; filter: drop-shadow(0 44px 78px rgba(3, 2, 8, 0.72)) drop-shadow(0 12px 30px rgba(3, 2, 8, 0.52)) drop-shadow(0 6px 20px rgba(216, 185, 122, 0.10)); } /* Animated device: the device image carries the bezel (so the white titanium edge always renders, even if the video never loads), and the recording sits inside its screen. Percentages are the device's real screen window, measured from the titanium frame the renders are composited on. */ .feat-phone-screen-wrap { position: relative; width: 100%; } .feat-phone-screen { position: absolute; z-index: 1; /* The device's real screen window, measured from the titanium frame the renders are now built on (984x2043 export). */ left: 3.652%; top: 1.488%; width: 92.697%; height: 97.005%; object-fit: cover; display: block; border-radius: 16.29% / 7.50%; /* the frame's real screen radius */ background: #0F0B1A; /* Hidden until it actually plays, so the device underneath (which already shows the finished plan) is what you see under reduced motion or if the video never loads. */ opacity: 0; transition: opacity 0.35s ease; } .feat-phone-screen.is-playing { opacity: 1; } @media (prefers-reduced-motion: reduce) { .feat-phone-screen { display: none; } } .feat-phone-glow { position: absolute; left: 50%; bottom: -6%; width: 84%; height: 20%; transform: translateX(-50%); background: radial-gradient(50% 50% at 50% 50%, rgba(216, 185, 122, 0.18), transparent 72%); filter: blur(30px); z-index: -1; pointer-events: none; } /* Resting poses live in the float keyframes so the device breathes in 3D. */ .feat-phone--right .feat-phone-float { animation-name: featFloatRight; } .feat-phone--left .feat-phone-float { animation-name: featFloatLeft; } .feat-phone--center .feat-phone-float { animation-name: featFloatCenter; } @keyframes featFloat { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes featFloatRight { 0%, 100% { transform: translateY(0) rotateY(12deg) rotateX(3deg); } 50% { transform: translateY(-8px) rotateY(10deg) rotateX(3.4deg); } } /* Mirror of featFloatRight: the device turns its face back toward the copy. */ @keyframes featFloatLeft { 0%, 100% { transform: translateY(0) rotateY(-12deg) rotateX(3deg); } 50% { transform: translateY(-8px) rotateY(-10deg) rotateX(3.4deg); } } @keyframes featFloatCenter { 0%, 100% { transform: translateY(0) rotateY(-2deg) rotateX(2deg); } 50% { transform: translateY(-8px) rotateY(-0.5deg) rotateX(2.4deg); } } @media (prefers-reduced-motion: reduce) { .feat-phone-tilt { transform: none !important; } .feat-phone-float { animation: none; } .feat-phone--right .feat-phone-float { transform: rotateY(12deg) rotateX(3deg); } .feat-phone--left .feat-phone-float { transform: rotateY(-12deg) rotateX(3deg); } .feat-phone--center .feat-phone-float { transform: rotateY(-2deg) rotateX(2deg); } } @media (max-width: 900px) { .how-grid { grid-template-columns: 1fr; gap: 56px; } /* On narrow screens, lead with the copy and put the mockup below. */ .feat-phone { width: min(66vw, 260px); } } /* ───────── Comparison table ───────── */ .compare { border-radius: var(--radius-lg); overflow: hidden; } .compare-head, .compare-row { display: grid; grid-template-columns: 1.1fr 1.8fr 1.3fr; gap: 24px; padding: 22px 28px; align-items: center; } .compare-head { font-family: var(--font-display); font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--text-3); border-bottom: 1px solid var(--line); background: rgba(34,24,54,0.45); font-weight: 600; } .compare-row { border-bottom: 1px solid var(--line); font-size: 15px; color: var(--text); line-height: 1.55; transition: background 0.25s ease, border-color 0.25s ease; } .compare-row:last-child { border-bottom: none; } .compare-option-name { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -0.01em; color: var(--text); } .compare-cost { color: var(--text-2); } .compare-label { display: none; font-family: var(--font-display); font-size: 12px; letter-spacing: 0; text-transform: none; color: var(--text-3); margin-bottom: 6px; font-weight: 600; } /* Highlighted Aspra row */ .compare-row--highlight { background: linear-gradient(90deg, rgba(216,185,122,0.10), rgba(216,185,122,0.04) 60%, rgba(216,185,122,0.02)), rgba(34,24,54,0.5); border-top: 1px solid rgba(216,185,122,0.40); border-bottom: 1px solid rgba(216,185,122,0.40); margin-top: -1px; position: relative; } /* Aspra row name renders in vote-gold via .gold-text (set in app.jsx); no glow on prose. */ .compare-row--highlight .compare-cost { color: var(--text); } .compare-pip { flex-shrink: 0; filter: drop-shadow(0 0 6px rgba(232, 207, 150, 0.55)); } .compare-close { margin: 28px auto 0; text-align: center; font-size: clamp(15px, 1.2vw, 17px); color: var(--text); max-width: 60ch; line-height: 1.6; } @media (max-width: 760px) { .compare-head { display: none; } .compare-row { grid-template-columns: 1fr; gap: 16px; padding: 22px 22px 24px; } .compare-label { display: block; } .compare-cell { display: block; } .compare-option-name { font-size: 18px; } } /* ───────── Waitlist mini-section ───────── */ .waitlist-section { padding: clamp(56px, 7vw, 96px) 0; border-top: 1px solid var(--line); } .waitlist-mini { display: flex; flex-direction: column; align-items: center; gap: 28px; text-align: center; } .waitlist-mini-text { font-size: clamp(15px, 1.2vw, 18px); color: var(--text); max-width: 52ch; line-height: 1.6; } /* Footer — brand + follow on one line, every link on the next two. */ footer { border-top: 1px solid var(--line); padding: 56px 0 36px; } .foot-main { display: flex; justify-content: space-between; align-items: center; /* was flex-start, which left a void under the brand block */ gap: 32px; flex-wrap: wrap; } .foot-brand { display: flex; flex-direction: column; gap: 12px; } .foot-brand p { max-width: 320px; font-size: 14px; } .foot-follow { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .foot-follow h4 { font-family: var(--font-display); font-size: 13px; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--text-2); margin: 0; } .foot-links { margin-top: 36px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 10px 26px; font-size: 14px; color: var(--text-2); } /* The guide pages stay real links (they carry the site's internal SEO), just set quieter and inline so the footer stays short. */ .foot-guides { margin-top: 14px; display: flex; flex-wrap: wrap; gap: 8px 20px; font-size: 13px; color: var(--text-3); } .foot-links a:hover, .foot-guides a:hover { color: var(--accent-hi); } .foot-bottom { margin-top: 26px; font-size: 13px; color: var(--text-3); } /* Scroll reveal */ .reveal { opacity: 0; transform: translateY(32px); filter: blur(6px); transition: opacity 1s cubic-bezier(0.2, 0.7, 0.2, 1), transform 1s cubic-bezier(0.2, 0.7, 0.2, 1), filter 1s cubic-bezier(0.2, 0.7, 0.2, 1); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: translateY(0); filter: blur(0); } .reveal.delay-1 { transition-delay: 0.08s; } .reveal.delay-2 { transition-delay: 0.16s; } .reveal.delay-3 { transition-delay: 0.24s; } .reveal.delay-4 { transition-delay: 0.32s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; filter: none; transition: none; } } /* ───────── Micro-interactions (down-page polish) ───────── */ /* Card lift + lantern edge on hover — calm, one small step up, no bounce. */ .cycle-card, .mode, .paywall-card, .feature, .compare { transition: transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1), box-shadow 0.4s ease, border-color 0.3s ease, background 0.3s ease; } @media (hover: hover) and (pointer: fine) { .cycle-card:hover, .mode:hover, .paywall-card:hover, .feature:hover { transform: translateY(-4px); border-color: rgba(216, 185, 122, 0.30); box-shadow: 0 26px 60px -28px rgba(3, 2, 8, 0.85), 0 0 0 1px rgba(216, 185, 122, 0.10), 0 0 44px -14px rgba(216, 185, 122, 0.16); } /* Slab cards keep their rim catch-light while lifted. */ .mode.pair:hover, .paywall-card.slab--gold:hover, .founding-card:hover { border-color: var(--surface-rim); box-shadow: inset 0 1px 0 rgba(232, 207, 150, 0.16), inset 1px 0 0 rgba(232, 207, 150, 0.06), 0 26px 60px -28px rgba(3, 2, 8, 0.85), 0 0 44px -14px rgba(216, 185, 122, 0.16); } } /* Primary button: a single specular sweep on hover (the "premium" tell). */ .btn-primary { position: relative; overflow: hidden; } .btn-primary > * { position: relative; z-index: 1; } .btn-primary::after { content: ""; position: absolute; top: 0; left: -60%; width: 45%; height: 100%; background: linear-gradient(100deg, transparent, rgba(255, 250, 238, 0.5), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; z-index: 0; } @media (hover: hover) and (pointer: fine) { .btn-primary:hover::after { animation: btnShine 0.9s ease; } } @keyframes btnShine { 0% { left: -60%; opacity: 0; } 12% { opacity: 1; } 100% { left: 130%; opacity: 0; } } @media (prefers-reduced-motion: reduce) { .btn-primary::after { display: none; } .cycle-card:hover, .mode:hover, .paywall-card:hover, .feature:hover { transform: none; } } /* ───────── Continuous sky — one seamless, scroll-reactive atmosphere ───────── Replaces the old per-section background blocks (which met at hard seams). A single fixed layer sits behind the entire page: a cool base, a warm lantern glow that rises as you scroll, and a fixed starfield that fades in the deeper you go. Because it's one continuous fixed layer, sections never seam. */ .page-atmo, .page-atmo-stars { position: fixed; inset: 0; pointer-events: none; } .page-atmo { z-index: -3; /* The app sky, viewport-fixed: canvas-top crest → bg (~34%) → canvas-deep floor, with the cool atmospheric pool at the bottom. Two standing violet auroras sit under everything, so the page below the hero has depth to sit on instead of going flat black the moment the hero scrolls away. */ background: radial-gradient(70% 45% at 12% 30%, rgba(96, 78, 168, 0.10), transparent 70%), radial-gradient(65% 45% at 90% 68%, rgba(120, 96, 180, 0.09), transparent 70%), radial-gradient(125% 70% at 50% 122%, rgba(26, 22, 48, 0.5), transparent 72%), linear-gradient(180deg, var(--canvas-top) 0%, var(--bg) 34%, var(--canvas-deep) 100%); } /* Warm lantern glow rising from below; opacity is driven by scroll (--atmo-warm). */ .page-atmo::after { content: ""; position: absolute; inset: 0; background: radial-gradient(135% 95% at 50% 138%, rgba(216, 185, 122, 0.17), transparent 62%), radial-gradient(90% 60% at 82% 125%, rgba(120, 96, 180, 0.07), transparent 60%), radial-gradient(60% 40% at 8% 82%, rgba(216, 185, 122, 0.05), transparent 68%); opacity: var(--atmo-warm, 0); transition: opacity 0.25s linear; } .page-atmo-stars { z-index: -2; opacity: 0; /* JS ramps this with scroll depth */ transition: opacity 0.6s ease; } @media (prefers-reduced-motion: reduce) { .page-atmo::after { opacity: 0.5; } .page-atmo-stars { opacity: 0.3; } } /* ───────── Nav waitlist secondary ───────── */ .nav-waitlist { font-size: 13px; color: var(--text-3); transition: color 0.2s; } .nav-waitlist:hover { color: var(--text-2); } /* ───────── Hero founding meta ───────── */ .hero-founding-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 18px 28px; margin-top: 16px; margin-bottom: 10px; } /* ───────── Waitlist secondary link ───────── */ .waitlist-secondary { font-size: 13px; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(240, 230, 210, 0.25); transition: color 0.2s, text-decoration-color 0.2s; } .waitlist-secondary:hover { color: var(--text-2); text-decoration-color: rgba(240, 230, 210, 0.55); } /* ───────── Scarcity line ───────── */ .scarcity { display: inline-block; font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--text-3); } /* ───────── Founding card ───────── */ .founding-card { position: relative; background: linear-gradient(135deg, var(--surface-top), var(--surface-bottom)); border: 1px solid var(--surface-rim); border-radius: var(--radius-lg); padding: 48px 44px; margin-bottom: 20px; box-shadow: inset 0 1px 0 rgba(232, 207, 150, 0.16), inset 1px 0 0 rgba(232, 207, 150, 0.06), 0 2px 8px rgba(3, 2, 8, 0.4), 0 30px 90px -35px rgba(3, 2, 8, 0.85); overflow: hidden; display: grid; grid-template-columns: 1fr auto; gap: 32px 56px; align-items: start; } .founding-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 207, 150, 0.55), transparent); } .founding-badge { border-color: var(--accent); color: var(--accent-hi); } .founding-left { display: flex; flex-direction: column; gap: 16px; } .founding-price { display: flex; align-items: baseline; gap: 14px; margin: 4px 0; } .founding-amount { font-family: var(--font-display); font-size: clamp(52px, 6vw, 80px); font-weight: 600; letter-spacing: -0.04em; line-height: 1; } .founding-once { font-size: 16px; color: var(--text); max-width: 22ch; line-height: 1.4; } .founding-title { font-size: clamp(24px, 2vw, 30px); margin-bottom: 4px; } .founding-what-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); margin-top: 4px; } .founding-features { list-style: none; padding: 0; margin: 4px 0 0; display: grid; gap: 10px; border-top: 1px solid var(--line); padding-top: 20px; } .founding-features li { display: grid; grid-template-columns: 18px 1fr; gap: 10px; font-size: 14px; color: var(--text); } .founding-right { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-top: 8px; min-width: 220px; } .founding-right .btn { width: 100%; justify-content: center; } .founding-refund { font-size: 12px; color: var(--text-3); line-height: 1.5; max-width: 24ch; } .founding-scarcity { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); opacity: 0.7; } @media (max-width: 840px) { .founding-card { grid-template-columns: 1fr; padding: 36px 28px; } .founding-right { padding-top: 0; border-top: 1px solid var(--line); padding-top: 24px; min-width: unset; width: 100%; } .founding-right .btn { width: auto; } } /* ───────── Standard plans label ───────── */ .std-plans-label { font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-3); text-align: center; margin: 40px 0 20px; display: flex; align-items: center; gap: 16px; } .std-plans-label::before, .std-plans-label::after { content: ""; flex: 1; height: 1px; background: var(--line); } /* ───────── Final CTA actions stack ───────── */ .final-cta-actions { display: flex; flex-direction: column; align-items: center; gap: 14px; } .final-cta-actions .founding-refund { max-width: 36ch; text-align: center; } /* Tiny helpers */ .muted { color: var(--text-2); } .dim { color: var(--text-3); } .row { display: flex; gap: 12px; align-items: center; } .spacer-sm { height: 12px; } /* ───────── Social icons ───────── */ .social-row { display: flex; gap: 12px; flex-wrap: wrap; } .social-link { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid rgba(216, 185, 122, 0.28); color: var(--accent); transition: color 0.2s, border-color 0.2s, box-shadow 0.25s; flex-shrink: 0; } .social-link:hover { color: var(--accent-hi); border-color: var(--accent); box-shadow: 0 0 18px rgba(216, 185, 122, 0.35); } .social-row--quiet { gap: 10px; } .social-link--quiet { width: 34px; height: 34px; border-color: var(--line); color: var(--text-3); } .social-link--quiet:hover { color: var(--accent-hi); border-color: rgba(216, 185, 122, 0.35); box-shadow: 0 0 10px rgba(216, 185, 122, 0.20); } /* ───────── Waitlist modal ───────── */ .modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(15, 11, 26, 0.80); backdrop-filter: saturate(1.2) blur(14px); -webkit-backdrop-filter: saturate(1.2) blur(14px); display: flex; align-items: center; justify-content: center; padding: 24px; } .modal { position: relative; background: linear-gradient(135deg, var(--surface-top), var(--surface-bottom)); border: 1px solid var(--surface-rim); border-radius: var(--radius-lg); padding: 52px 48px 48px; width: 100%; max-width: 480px; box-shadow: inset 0 1px 0 rgba(232, 207, 150, 0.16), inset 1px 0 0 rgba(232, 207, 150, 0.06), 0 2px 8px rgba(3, 2, 8, 0.4), 0 40px 120px -40px rgba(3, 2, 8, 0.9); overflow: hidden; } .modal::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(232, 207, 150, 0.55), transparent); pointer-events: none; } .modal-close { position: absolute; top: 16px; right: 16px; width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--text-3); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: border-color 0.2s, color 0.2s; } .modal-close:hover { border-color: var(--accent); color: var(--accent); } .modal-title { font-size: clamp(24px, 2.2vw, 30px); margin-bottom: 12px; } .modal-sub { font-size: 15px; color: var(--text-2); line-height: 1.65; margin-bottom: 28px; max-width: 36ch; } .modal form { display: flex; flex-direction: column; gap: 12px; } .modal-input { width: 100%; background: var(--surface-2); border: 1px solid var(--line-strong); border-radius: var(--radius); padding: 14px 16px; font-family: var(--font-body); font-size: 15px; color: var(--text); outline: none; transition: border-color 0.2s, box-shadow 0.2s; } .modal-input::placeholder { color: var(--text-3); } .modal-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(216, 185, 122, 0.12); } .modal-submit { width: 100%; justify-content: center; } .modal-error { font-size: 13.5px; color: var(--destructive); line-height: 1.5; margin-top: 2px; } @media (max-width: 560px) { .modal { padding: 44px 28px 36px; } } /* ───────── FAQ heading reset ───────── */ .faq-q-heading { margin: 0; font-size: inherit; font-weight: inherit; letter-spacing: inherit; line-height: inherit; } /* ───────── WaitlistSecondary as button ───────── */ button.waitlist-secondary { background: none; border: none; padding: 0; cursor: pointer; font-size: 13px; color: var(--text-3); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(240, 230, 210, 0.25); transition: color 0.2s, text-decoration-color 0.2s; font-family: inherit; } button.waitlist-secondary:hover { color: var(--text-2); text-decoration-color: rgba(240, 230, 210, 0.55); } /* ───────── Nav waitlist button ───────── */ button.nav-waitlist { background: none; border: none; padding: 0; cursor: pointer; font-size: 14px; color: var(--text-3); font-family: inherit; transition: color 0.2s; } button.nav-waitlist:hover { color: var(--text-2); } /* ───────── Feature grid: half-width card ───────── */ .feature.half { grid-column: span 6; } @media (max-width: 980px) { .feature.half { grid-column: span 2; } } @media (max-width: 600px) { .feature.half { grid-column: span 1; } } /* ───────── Hero: App Store badge placeholder ───────── */ .app-store-badge { display: inline-flex; align-items: center; gap: 9px; padding: 9px 16px; border: 1px solid var(--line-strong); border-radius: 10px; font-size: 13px; color: var(--text-3); letter-spacing: 0.01em; cursor: default; user-select: none; background: rgba(255,255,255,0.03); } /* Pre-launch "pending approval" note + follow CTA */ .hero-pending { display: inline-flex; align-items: center; gap: 9px; margin: 0 0 14px; font-size: 13.5px; color: var(--text-3); letter-spacing: 0.01em; } .hero-pending-dot { width: 7px; height: 7px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 3px rgba(216, 185, 122, 0.18); flex-shrink: 0; } .final-cta-actions /* ───────── Section backgrounds ───────── The old per-section drifting gold blobs (secGlowDrift) are retired: backgrounds glow only via the sky's aurora — the single fixed .page-atmo layer above. Sections stay transparent so the continuous sky shows through. */ section { isolation: isolate; }