/* ───────────────────────────────────────────────────────────────────── PreBell — refined landing page Direction: keep the trading-terminal soul, push toward Apple's confident silence. Green stays as the sole accent. Decoration is spent only where it earns meaning. ───────────────────────────────────────────────────────────────────── */ /* Fonts now loaded via in each page's (faster than @import here) */ /* Metric-matched fallback fonts: a local system font tuned to occupy the EXACT space of the web font, so when the real font swaps in nothing reflows (kills the font-swap CLS). Values measured against the live fonts in-browser: size-adjust = width ratio; ascent/descent = web font's own metrics ÷ size-adjust. */ @font-face { font-family: "Instrument Serif Fallback"; src: local("Georgia"); size-adjust: 75.81%; ascent-override: 130.6%; descent-override: 40.9%; line-gap-override: 0%; } @font-face { font-family: "Inter Fallback"; src: local("Arial"); size-adjust: 106.7%; ascent-override: 90.81%; descent-override: 22.59%; line-gap-override: 0%; } :root { /* ── Surface ───────────────────────────────────────────────────── */ --ink: #050709; --ink-2: #0c1015; --ink-3: #141a22; --ink-4: #1a2230; /* ── Type ──────────────────────────────────────────────────────── */ --cream: #f1f3f7; --cream-dim: #c0c6d0; --muted: #828a98; --muted-dim: #717d8c; /* was #5a6271 — bumped for WCAG AA 4.5:1 on dark bg */ --muted-faint: #4a5568; /* was #3a4150 — decorative only, kept subtle */ /* ── Lines ─────────────────────────────────────────────────────── */ --rule: rgba(255,255,255,0.06); --rule-strong: rgba(255,255,255,0.10); --rule-bright: rgba(255,255,255,0.16); /* ── Single accent — green, used sparingly ─────────────────────── */ --green: #3fb950; --green-warm: #4ade80; /* gradient top */ --green-deep: #16a34a; /* gradient bottom */ --green-soft: rgba(63,185,80,0.10); --green-line: rgba(63,185,80,0.32); --bear: #f87171; --bear-soft: rgba(248,113,113,0.10); /* ── Type families ─────────────────────────────────────────────── */ --serif: "Instrument Serif", "Instrument Serif Fallback", ui-serif, Georgia, serif; --sans: "Inter", "Inter Fallback", ui-sans-serif, system-ui, -apple-system, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", monospace; /* ── Scale (Apple-influenced display ramp) ─────────────────────── */ --t-display-xxl: clamp(64px, 9.5vw, 132px); --t-display-xl: clamp(48px, 6.4vw, 92px); --t-display-l: clamp(40px, 5vw, 72px); --t-display-m: clamp(32px, 3.8vw, 48px); --t-display-s: 28px; --t-body-l: 18px; --t-body: 15.5px; --t-body-s: 13.5px; --t-eyebrow: 11px; /* ── Spacing ───────────────────────────────────────────────────── */ --sp-section: 100px; --sp-gutter: 56px; --max-w: 1280px; --r-sm: 4px; --r-md: 8px; --r-lg: 14px; --r-xl: 20px; } /* ── Accessibility helpers ───────────────────────────────────────── */ .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } /* Skip-to-main link (visible on focus, hidden otherwise) */ .skip-to-main { position: absolute; top: -100px; left: 16px; z-index: 9999; padding: 10px 22px; background: var(--green); color: #050709; font-weight: 700; font-size: 14px; border-radius: 0 0 8px 8px; text-decoration: none; transition: top 0.15s; } .skip-to-main:focus { top: 0; outline: 3px solid #fff; outline-offset: 2px; } /* Visible focus rings */ :focus-visible { outline: 2px solid var(--green); outline-offset: 3px; border-radius: 3px; } :focus:not(:focus-visible) { outline: none; } /* Nav links — increase touch target height */ .nav-links a { padding: 12px 4px; min-height: 44px; display: inline-flex; align-items: center; } /* ── Reset / base ───────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* overflow-x: clip — body's overflow-x:hidden doesn't stop absolutely-positioned decoration (e.g. the calc card's glow pseudo) from widening the ROOT's scroll area on narrow screens, which let the page pan sideways under the fixed CTA. */ html { scroll-padding-top: 80px; font-feature-settings: "ss01", "cv11"; overflow-x: clip; } body { background: var(--ink); color: var(--cream); font-family: var(--sans); font-size: var(--t-body); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; /* clip, not hidden: hidden turns body into a scroll container once html has overflow-x set, which silently breaks position:sticky (the nav). clip just clips — no scroll container. hidden kept first as old-browser fallback. */ overflow-x: hidden; overflow-x: clip; } a { color: inherit; text-decoration: none; } button { background: none; border: 0; color: inherit; font: inherit; cursor: pointer; padding: 0; } svg { display: block; } ::selection { background: var(--green); color: var(--ink); } ::-webkit-scrollbar { width: 0px; } /* ── Layout primitives ──────────────────────────────────────────── */ .container { max-width: var(--max-w); margin: 0 auto; padding: 0 var(--sp-gutter); } section { position: relative; } /* ── Type primitives ────────────────────────────────────────────── */ .serif { font-family: var(--serif); font-weight: 400; letter-spacing: -0.012em; } .mono { font-family: var(--mono); font-feature-settings: "tnum"; } .italic { font-style: italic; } .num { font-family: var(--mono); font-variant-numeric: tabular-nums; } .eyebrow { font-family: var(--mono); font-size: var(--t-eyebrow); font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .eyebrow-bright { color: var(--cream-dim); } /* ── Hairline rules ─────────────────────────────────────────────── */ .hairline { height: 1px; background: var(--rule); width: 100%; } .hairline-fade { height: 1px; background: linear-gradient(to right, transparent, var(--rule-strong) 30%, var(--rule-strong) 70%, transparent); } /* ── Live dot (used sparingly) ──────────────────────────────────── */ .live-dot { display: inline-block; width: 6px; height: 6px; border-radius: 999px; background: var(--green); position: relative; vertical-align: middle; } .live-dot::after { content: ""; position: absolute; inset: 0; border-radius: 999px; background: var(--green); animation: live-pulse 2.4s ease-out infinite; opacity: 0.4; } @keyframes live-pulse { 0% { transform: scale(1); opacity: 0.6; } 100% { transform: scale(3.2); opacity: 0; } } /* ── Buttons — three tiers, assigned by intent ──────────────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--sans); font-size: 14px; font-weight: 600; letter-spacing: -0.005em; padding: 13px 22px; border-radius: var(--r-md); transition: transform 200ms cubic-bezier(0.16,1,0.3,1), box-shadow 220ms ease, background 200ms ease, color 200ms ease, opacity 200ms ease; white-space: nowrap; cursor: pointer; } .btn .arrow { display: inline-block; transition: transform 240ms cubic-bezier(0.16,1,0.3,1); } .btn:hover .arrow { transform: translateX(3px); } /* primary — the buy moment. Two on the page: Hero CTA, Pricing primary, FinalCTA */ .btn-primary { background: transparent; color: var(--green); border: 1px solid var(--green); box-shadow: none; } .btn-primary:hover { background: var(--green); color: #04240d; border-color: var(--green); box-shadow: inset 0 1px 0 rgba(255,255,255,0.18); transform: translateY(-1px); } /* secondary — the consider. Cream-on-ink, hairline border, subtle */ .btn-secondary { background: rgba(255,255,255,0.04); color: var(--cream); border: 1px solid var(--rule-strong); backdrop-filter: blur(8px); } .btn-secondary:hover { background: rgba(255,255,255,0.08); border-color: var(--rule-bright); } /* ghost — the navigate. Mono uppercase, no chrome */ .btn-ghost { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); padding: 12px 0; border-radius: 0; } .btn-ghost:hover { color: var(--cream); } /* ───────────────────────────────────────────────────────────────────── NAV — frosted, sticky, almost-invisible ───────────────────────────────────────────────────────────────────── */ .nav-wrap { position: sticky; top: 0; z-index: 100; background: rgba(5,7,9,0.72); backdrop-filter: saturate(140%) blur(20px); -webkit-backdrop-filter: saturate(140%) blur(20px); border-bottom: 1px solid var(--rule); } /* (the old bottom sticky CTA bar is gone — the always-visible sticky nav's hamburger drawer carries the Start free CTA on mobile instead) */ .banner { border-bottom: 1px solid var(--rule); background: rgba(255,255,255,0.012); max-height: 64px; overflow: hidden; transition: max-height 360ms cubic-bezier(0.4,0,1,1), opacity 240ms ease; } .banner.dismissed { max-height: 0; opacity: 0; pointer-events: none; } .banner-inner { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 11px 56px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; color: var(--cream-dim); position: relative; } .banner-code { display: inline-flex; align-items: center; gap: 6px; padding: 2px 8px; background: var(--green-soft); border: 1px solid var(--green-line); border-radius: 4px; color: var(--green); font-weight: 600; letter-spacing: 0.12em; cursor: pointer; transition: background 180ms ease; } .banner-code:hover { background: rgba(63,185,80,0.18); } .banner-code.copied { background: rgba(63,185,80,0.22); } .banner-close { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); color: var(--muted-dim); padding: 6px; transition: color 180ms ease; } .banner-close:hover { color: var(--cream); } .nav { display: flex; align-items: center; justify-content: space-between; height: 64px; padding: 0 var(--sp-gutter); } .nav-brand { display: flex; align-items: center; gap: 10px; } .nav-brand .bell-mark { width: 27px; height: 27px; color: var(--cream); border-radius: 26%; display: block; } .nav-brand .bell-mark .accent { stroke: var(--green); } .nav-brand .wordmark { font-family: var(--serif); font-size: 26px; letter-spacing: -0.015em; color: var(--cream); } .nav-brand .wordmark .em { font-style: italic; color: var(--green); } .nav-links { display: flex; align-items: center; gap: 36px; } .nav-links a { font-family: var(--sans); font-size: 13.5px; font-weight: 500; color: var(--cream-dim); transition: color 180ms ease; } .nav-links a:hover { color: var(--cream); } .nav-actions { display: flex; align-items: center; gap: 14px; } .nav-actions .btn { padding: 9px 16px; font-size: 13px; } /* ───────────────────────────────────────────────────────────────────── HERO — confident silence + a single product visual ───────────────────────────────────────────────────────────────────── */ .hero { position: relative; padding: 120px 0 140px; overflow: hidden; isolation: isolate; } .hero::before { /* centered base wash — sits BEHIND the aurora blobs */ content: ""; position: absolute; top: -20%; left: 50%; width: 100vw; height: 80vh; transform: translateX(-50%); background: radial-gradient(ellipse 50% 45% at 50% 50%, rgba(63,185,80,0.07) 0%, transparent 70%); pointer-events: none; z-index: -2; } /* ── Aurora background ────────────────────────────────────────── */ .aurora-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: -1; opacity: 0.3; contain: paint; } .aurora-blob { position: absolute; border-radius: 50%; pointer-events: none; will-change: transform; animation-timing-function: linear; animation-iteration-count: infinite; animation-direction: alternate; } /* Top-right — brightest green */ .aurora-blob-1 { width: 900px; height: 900px; top: -260px; right: -180px; background: radial-gradient(circle, rgba(63, 185, 80, 0.55) 0%, rgba(34, 197, 94, 0.28) 35%, transparent 68%); animation: aurora-drift-1 32s linear infinite alternate; } /* Top-left — cooler teal-green */ .aurora-blob-2 { width: 780px; height: 780px; top: -120px; left: -220px; background: radial-gradient(circle, rgba(15, 118, 110, 0.45) 0%, rgba(21, 128, 61, 0.22) 40%, transparent 70%); animation: aurora-drift-2 38s linear infinite alternate; } /* Bottom-right — soft mint */ .aurora-blob-3 { width: 640px; height: 640px; bottom: -180px; right: 10%; background: radial-gradient(circle, rgba(74, 222, 128, 0.35) 0%, rgba(63, 185, 80, 0.16) 38%, transparent 72%); animation: aurora-drift-3 44s linear infinite alternate; } @keyframes aurora-drift-1 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-40px, 30px, 0) scale(1.08); } 100% { transform: translate3d(20px, -20px, 0) scale(0.96); } } @keyframes aurora-drift-2 { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(50px, -30px, 0) scale(1.05); } 100% { transform: translate3d(-30px, 40px, 0) scale(0.95); } } @keyframes aurora-drift-3 { 0% { transform: translate3d(0, 0, 0) scale(0.98); } 50% { transform: translate3d(-25px, -40px, 0) scale(1.1); } 100% { transform: translate3d(35px, 25px, 0) scale(1); } } @media (prefers-reduced-motion: reduce) { .aurora-blob { animation: none !important; } } .hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 80px; align-items: center; } .hero-eyebrow { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 32px; } .hero h1 { font-family: var(--serif); font-size: var(--t-display-xxl); line-height: 0.98; letter-spacing: -0.035em; color: var(--cream); margin: 0; font-weight: 400; } .hero h1 .em { font-style: italic; color: var(--muted); } .hero h1 .time { font-family: var(--mono); font-weight: 500; font-style: normal; color: var(--green); font-feature-settings: "tnum"; letter-spacing: -0.06em; } .hero p.tagline { font-size: var(--t-body-l); line-height: 1.55; color: var(--cream-dim); margin: 40px 0 0; max-width: 50ch; } .hero p.tagline .em-num { font-family: var(--mono); font-weight: 500; color: var(--cream); font-size: 17px; } .hero-cta-row { margin-top: 48px; display: flex; align-items: center; gap: 20px; } .hero-finepoint { margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); display: flex; flex-wrap: wrap; gap: 18px; } .hero-finepoint .check { color: var(--green); margin-right: 4px; } .hero-stats { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--rule); display: flex; flex-wrap: wrap; align-items: center; gap: 24px 36px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); } .hero-stats .v { color: var(--cream); letter-spacing: 0.04em; text-transform: none; font-size: 13px; } .hero-stats .divider { width: 1px; height: 14px; background: var(--rule-strong); } /* ───────────────────────────────────────────────────────────────────── BIAS TERMINAL — the product hero visual Kept rich, but with refined chrome and quieter shadows. ───────────────────────────────────────────────────────────────────── */ .terminal-frame { position: relative; border-radius: var(--r-lg); background: var(--ink-2); border: 1px solid var(--rule-strong); box-shadow: 0 0 0 1px rgba(63,185,80,0.10), 0 40px 80px -24px rgba(0,0,0,0.7), 0 0 60px -10px rgba(63,185,80,0.10); overflow: hidden; } .terminal-chrome { display: flex; align-items: center; justify-content: space-between; padding: 11px 16px; border-bottom: 1px solid var(--rule); background: rgba(0,0,0,0.4); font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .terminal-chrome .lights { display: flex; gap: 6px; } .terminal-chrome .lights span { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.08); } .terminal-chrome .lights .live { background: var(--green); box-shadow: 0 0 8px rgba(63,185,80,0.6); } .terminal-chrome .title { letter-spacing: 0.22em; } .terminal-chrome .badge { font-size: 9.5px; padding: 2px 8px; border: 1px solid var(--green-line); border-radius: 3px; background: var(--green-soft); color: var(--green); font-weight: 600; } .terminal-header { padding: 18px 22px 16px; border-bottom: 1px solid var(--rule); } .terminal-header .bias-line { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; } .terminal-header .bias-line .lbl { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--bear); } .terminal-header .bias-line .conf { font-family: var(--mono); font-size: 10px; padding: 3px 9px; border: 1px solid var(--green-line); background: var(--green-soft); border-radius: 3px; color: var(--green); letter-spacing: 0.16em; text-transform: uppercase; } .terminal-header h3 { margin: 0; font-family: var(--serif); font-size: 30px; letter-spacing: -0.018em; color: var(--cream); } .terminal-header .preset { display: block; margin-top: 2px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .terminal-section { padding: 18px 22px; border-bottom: 1px solid var(--rule); } .terminal-section:last-of-type { border-bottom: 0; } .terminal-section .k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-dim); margin-bottom: 10px; } .terminal-section .narrative { font-size: 13.5px; line-height: 1.6; color: var(--cream-dim); margin: 0; } .terminal-section .narrative .green { color: var(--green); font-family: var(--mono); } .terminal-section .narrative .bear { color: var(--bear); font-family: var(--mono); } .terminal-section .narrative .amber { color: #fbbf24; font-family: var(--mono); } .terminal-section .narrative .then { color: var(--green); font-weight: 700; } .terminal-section .term-checklist { display: flex; flex-direction: column; gap: 9px; margin-bottom: 12px; } .terminal-section .tc-item { display: flex; align-items: flex-start; gap: 10px; font-size: 13px; line-height: 1.45; color: var(--cream-dim); } .terminal-section .tc-num { font-family: var(--mono); color: var(--bear); } .terminal-section .tc-box { flex: none; width: 13px; height: 13px; margin-top: 2px; border-radius: 3px; border: 1px solid var(--rule-bright); background: rgba(255,255,255,0.03); position: relative; transition: background .2s ease, border-color .2s ease; } .terminal-section .tc-box::after { content: ""; position: absolute; left: 3.5px; top: 0.5px; width: 3px; height: 6.5px; border: solid var(--green); border-width: 0 1.6px 1.6px 0; transform: rotate(45deg) scale(0.4); opacity: 0; transition: opacity .18s ease, transform .25s cubic-bezier(0.34,1.56,0.64,1); } .terminal-section .tc-box.checked { background: rgba(63,185,80,0.16); border-color: var(--green-line); } .terminal-section .tc-box.checked::after { opacity: 1; transform: rotate(45deg) scale(1); } /* Hero terminal load-in: each line "writes" in with a left-to-right wipe */ .terminal-frame .tw-hide { opacity: 0; clip-path: inset(0 100% 0 0); } .terminal-frame .tw-show { opacity: 1; clip-path: inset(0 0 0 0); transition: opacity .38s ease, clip-path .55s cubic-bezier(0.5,0,0.1,1); } @keyframes term-pop { 0% { transform: scale(1); } 45% { transform: scale(1.016); } 100% { transform: scale(1); } } .terminal-frame.term-popped { animation: term-pop 420ms cubic-bezier(0.22,1.2,0.4,1); } /* Summary card */ .terminal-section .term-summary { font-size: 13.5px; line-height: 1.6; color: var(--cream); margin: 0; } .terminal-section .term-summary .lead { font-weight: 700; color: var(--bear); } /* Catalysts strip */ .terminal-section .term-cat { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 12px; padding: 8px 11px; background: rgba(210,153,34,0.06); border: 1px solid rgba(210,153,34,0.2); border-radius: 6px; color: var(--cream-dim); } .terminal-section .term-cat .cat-label { font-family: var(--mono); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; color: #d29922; font-weight: 700; } .terminal-section .term-cat strong { color: var(--cream); font-weight: 600; } .terminal-section .term-cat .cat-when { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.5px; text-transform: uppercase; color: #d29922; background: rgba(210,153,34,0.13); padding: 1px 6px; border-radius: 4px; } /* Reference glossary */ .terminal-section .term-glossary { display: grid; grid-template-columns: 1fr 1fr; gap: 11px 18px; } .terminal-section .term-glossary .gl-item { display: flex; gap: 8px; font-size: 11px; line-height: 1.4; } .terminal-section .term-glossary .gl-k { flex: none; font-family: var(--mono); font-size: 9.5px; font-weight: 700; color: var(--green); width: 38px; padding-top: 1px; } .terminal-section .term-glossary .gl-d { color: var(--muted); } .terminal-levels { padding: 4px 0 8px; } .terminal-levels .row { display: grid; grid-template-columns: 100px 1fr auto; gap: 16px; padding: 7px 22px; align-items: center; border-bottom: 1px dashed rgba(255,255,255,0.04); } .terminal-levels .row:last-child { border-bottom: 0; } .terminal-levels .px { font-family: var(--mono); font-size: 13px; font-weight: 600; letter-spacing: -0.01em; } .terminal-levels .why { font-size: 12px; color: var(--muted); } .terminal-levels .tag { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; padding: 2px 7px; border-radius: 3px; } .tag-bear { color: var(--bear); background: var(--bear-soft); } .tag-bull { color: var(--green); background: var(--green-soft); } .tag-fvg { color: #67e8f9; background: rgba(103,232,249,0.08); } .tag-ob { color: #fbbf24; background: rgba(251,191,36,0.08); } .tag-eq { color: var(--muted); background: rgba(255,255,255,0.04); } /* Primary setup grid inside the terminal */ .setup-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px 28px; margin-top: 2px; } .setup-grid > div { display: flex; flex-direction: column; gap: 2px; } .setup-grid .sg-k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-dim); } .setup-grid .sg-v { font-family: var(--mono); font-size: 12.5px; color: var(--cream-dim); font-weight: 500; letter-spacing: -0.005em; } .terminal-footer { display: flex; justify-content: space-between; padding: 11px 22px; border-top: 1px solid var(--rule); background: rgba(0,0,0,0.3); font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .terminal-footer a { color: var(--green); transition: opacity 180ms ease; } .terminal-footer a:hover { opacity: 0.7; } /* ───────────────────────────────────────────────────────────────────── TICKER — quiet marquee, hairline-bound, no card chrome ───────────────────────────────────────────────────────────────────── */ .ticker { border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); padding: 22px 0; background: rgba(255,255,255,0.012); overflow: hidden; mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 12%, black 88%, transparent); } .ticker-track { display: flex; gap: 64px; animation: ticker-scroll 60s linear infinite; width: max-content; } @keyframes ticker-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ticker-item { display: flex; align-items: baseline; gap: 10px; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: var(--muted); white-space: nowrap; } .ticker-item .sym { color: var(--cream); font-weight: 500; letter-spacing: 0.08em; } .ticker-item .up { color: var(--green); } .ticker-item .dn { color: var(--bear); } .ticker-item .dot { width: 3px; height: 3px; background: var(--muted-faint); border-radius: 999px; margin: 0 8px; display: inline-block; align-self: center; } /* ───────────────────────────────────────────────────────────────────── SECTION HEAD — refined, unified across all sections. Glyph label + tactic-varied h2, per audit Findings 03 & 04. ───────────────────────────────────────────────────────────────────── */ section.body { padding: var(--sp-section) 0; } .section-label { display: inline-flex; align-items: center; gap: 12px; margin-bottom: 28px; } .section-label .index { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; color: var(--green); font-weight: 600; } .section-label .dot { width: 3px; height: 3px; border-radius: 999px; background: var(--muted-faint); } .section-label .name { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .section-h { font-family: var(--serif); font-size: var(--t-display-xl); line-height: 0.96; letter-spacing: -0.028em; color: var(--cream); margin: 0; font-weight: 400; max-width: 18ch; } .section-h .em { font-style: italic; color: var(--muted); } .section-h .live { color: var(--green); } .section-h .num { font-family: var(--mono); font-style: normal; letter-spacing: -0.05em; font-weight: 500; } .section-sub { font-size: var(--t-body-l); line-height: 1.55; color: var(--muted); max-width: 56ch; margin: 24px 0 0; } /* ───────────────────────────────────────────────────────────────────── PROBLEM — editorial column. Hairline-separated frictions. Replaces the 3-card grid. ───────────────────────────────────────────────────────────────────── */ .problem .head-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: end; margin-bottom: 96px; } /* ── the 9:28 ghost clock (fills the head-row's right column) ── */ .problem-clock { justify-self: end; text-align: right; user-select: none; } .pc-time { font-family: var(--mono); font-size: clamp(96px, 11vw, 176px); font-weight: 700; line-height: 0.9; letter-spacing: -0.05em; color: rgba(230,237,243,0.07); font-variant-numeric: tabular-nums; transition: color 0.5s ease; } .pc-time .pc-colon { animation: pcBlink 1s steps(1) infinite; } .problem-clock.pc-late .pc-time { color: rgba(248,81,73,0.16); } .problem-clock.pc-late .pc-time .pc-colon { animation: none; } .pc-caption { display: flex; align-items: center; justify-content: flex-end; gap: 8px; margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .pc-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--green); box-shadow: 0 0 8px rgba(63,185,80,0.6); } .problem-clock.pc-late .pc-dot { background: #f85149; box-shadow: 0 0 8px rgba(248,81,73,0.6); } .problem-clock.pc-late .pc-caption { color: rgba(248,81,73,0.75); } @keyframes pcBlink { 50% { opacity: 0.25; } } @media (max-width: 900px) { .problem-clock { display: none; } } .problem .pull-num { font-family: var(--serif); font-style: italic; font-size: clamp(80px, 11vw, 156px); line-height: 0.9; color: var(--green); letter-spacing: -0.04em; margin: 0; } .problem .pull-num small { display: block; font-family: var(--mono); font-style: normal; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin-top: 12px; letter-spacing: 0.22em; } .friction-list { display: grid; grid-template-columns: 1fr; gap: 0; border-top: 1px solid var(--rule-strong); } .friction-item { display: grid; grid-template-columns: 200px 1fr 1fr; gap: 56px; padding: 48px 0; border-bottom: 1px solid var(--rule); align-items: start; transition: padding 220ms ease; } .friction-item:hover { background: rgba(255,255,255,0.012); } .friction-item .ix-block { display: flex; flex-direction: column; gap: 8px; } .friction-item .ix { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; color: var(--green); font-weight: 600; } .friction-item .stamp { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .friction-item h3 { font-family: var(--serif); font-size: clamp(28px, 3vw, 40px); line-height: 1.05; letter-spacing: -0.018em; color: var(--cream); margin: 0; font-weight: 400; } .friction-item p { font-size: 15px; line-height: 1.6; color: var(--cream-dim); margin: 0; max-width: 44ch; } .problem .closer { margin-top: 72px; display: grid; grid-template-columns: 200px 1fr; gap: 56px; align-items: start; } .problem .closer .marg { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--green); } .problem .closer p { font-family: var(--serif); font-size: clamp(24px, 2.8vw, 36px); font-style: italic; line-height: 1.2; color: var(--cream); margin: 0; max-width: 30ch; letter-spacing: -0.012em; } /* ───────────────────────────────────────────────────────────────────── HOW IT WORKS — a single unified terminal "run sequence" Replaces three identical step-cards in a row. ───────────────────────────────────────────────────────────────────── */ .how .head-row { display: grid; grid-template-columns: 1.4fr 1fr; gap: 80px; align-items: end; margin-bottom: 80px; } .run-sequence { position: relative; border-radius: var(--r-lg); background: var(--ink-2); border: 1px solid var(--rule); overflow: hidden; box-shadow: 0 40px 80px -24px rgba(0,0,0,0.6); } .run-sequence .chrome { display: flex; align-items: center; gap: 12px; padding: 12px 18px; border-bottom: 1px solid var(--rule); background: rgba(0,0,0,0.3); font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .run-sequence .chrome .lights { display: flex; gap: 6px; margin-right: 4px; } .run-sequence .chrome .lights span { width: 9px; height: 9px; border-radius: 999px; background: rgba(255,255,255,0.08); } .run-sequence .chrome .lights .live { background: var(--green); box-shadow: 0 0 8px rgba(63,185,80,0.6); } .run-sequence .chrome .file { color: var(--cream-dim); } .run-sequence .chrome .clock { margin-left: auto; color: var(--green); letter-spacing: 0.18em; } .run-step { display: grid; grid-template-columns: 180px 1fr 1.2fr; gap: 48px; padding: 44px 36px; border-bottom: 1px solid var(--rule); align-items: start; position: relative; } .run-step:last-child { border-bottom: 0; } .run-step .ix-col { display: flex; flex-direction: column; gap: 14px; } .run-step .step-num { font-family: var(--serif); font-style: italic; font-size: 80px; line-height: 0.85; color: var(--green); letter-spacing: -0.04em; } .run-step .step-time { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .run-step h3 { font-family: var(--serif); font-size: clamp(28px, 2.6vw, 36px); line-height: 1.05; letter-spacing: -0.018em; color: var(--cream); margin: 0; font-weight: 400; } .run-step p { font-size: 14.5px; line-height: 1.6; color: var(--muted); margin: 0; max-width: 44ch; } /* tiny "preview" — the artifact each step produces */ .step-artifact { padding-top: 6px; } .step-artifact .label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-dim); margin-bottom: 10px; } .step-artifact .strategy-snip { font-family: var(--mono); font-size: 11.5px; line-height: 1.6; color: var(--cream-dim); padding: 12px 14px; background: rgba(0,0,0,0.4); border: 1px solid var(--rule); border-radius: var(--r-sm); border-left: 2px solid var(--green-line); white-space: pre-line; } .step-artifact .strategy-snip .c { color: var(--muted); } .step-artifact .strategy-snip .g { color: var(--green); } /* ── Preset tiles (Step 01) ── */ .strategy-presets { display: flex; gap: 8px; flex-wrap: wrap; } .sp-tile { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; padding: 7px 16px; border-radius: 6px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: var(--muted); cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s; } .sp-tile:hover { border-color: rgba(255,255,255,0.2); color: var(--fg); } .sp-tile.sp-active { border-color: rgba(63,185,80,0.45); background: rgba(63,185,80,0.09); color: var(--green); } .step-artifact .chart-thumb { aspect-ratio: 16/9; background: linear-gradient(135deg, rgba(0,0,0,0.4), rgba(63,185,80,0.04)), var(--ink-3); border-radius: var(--r-sm); border: 1px solid var(--rule); position: relative; overflow: hidden; } .step-artifact .chart-thumb svg { width: 100%; height: 100%; } .step-artifact .bias-mini { font-family: var(--mono); font-size: 11px; line-height: 1.7; background: rgba(0,0,0,0.4); border: 1px solid var(--rule); border-left: 2px solid var(--green-line); border-radius: var(--r-sm); padding: 12px 14px; color: var(--cream-dim); } .step-artifact .bias-mini .label { color: var(--green); margin-right: 8px; } .step-artifact .bias-mini .px { color: var(--cream); } .run-sequence .footer { display: flex; justify-content: space-between; padding: 13px 22px; border-top: 1px solid var(--rule); background: rgba(0,0,0,0.3); font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } .run-sequence .footer .ok { display: inline-flex; align-items: center; gap: 8px; color: var(--green); } /* ───────────────────────────────────────────────────────────────────── COMPARISON — two columns, no card chrome, hairline divider only. ───────────────────────────────────────────────────────────────────── */ .comparison .head-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: end; margin-bottom: 80px; } .compare-pair { display: grid; grid-template-columns: 1fr 1fr; position: relative; border-top: 1px solid var(--rule-strong); border-bottom: 1px solid var(--rule-strong); } .compare-pair > div { padding: 56px 0; } .compare-pair .col-without { padding-right: 56px; } .compare-pair .col-with { padding-left: 56px; border-left: 1px solid var(--rule); } .compare-pair .col-tag { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 28px; } .compare-pair .col-tag .name { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; } .compare-pair .col-tag .duration { font-family: var(--serif); font-style: italic; font-size: 18px; letter-spacing: -0.01em; } .col-without .col-tag .name { color: var(--bear); } .col-without .col-tag .duration { color: var(--cream-dim); } .col-with .col-tag .name { color: var(--green); } .col-with .col-tag .duration { color: var(--green); } .compare-step { display: grid; grid-template-columns: 80px 1fr; gap: 20px; padding: 11px 0; align-items: baseline; } .compare-step .t { font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; } .compare-step .t-bear { color: rgba(248,113,113,0.6); } .compare-step .t-green { color: var(--green); } .compare-step .txt { font-size: 14.5px; line-height: 1.55; color: var(--cream-dim); } .compare-line { display: flex; align-items: baseline; gap: 12px; margin-top: 28px; padding-top: 20px; border-top: 1px dashed rgba(255,255,255,0.06); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .comparison .closer { margin-top: 80px; display: grid; grid-template-columns: 200px 1fr; gap: 56px; } .comparison .closer .marg { font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--green); } .comparison .closer p { font-family: var(--serif); font-size: clamp(22px, 2.4vw, 32px); font-style: italic; line-height: 1.25; color: var(--cream); margin: 0; max-width: 36ch; letter-spacing: -0.012em; } /* ───────────────────────────────────────────────────────────────────── COMMUNITY — editorial column. No card on the right. ───────────────────────────────────────────────────────────────────── */ .community { background: linear-gradient(180deg, transparent, rgba(63,185,80,0.025) 50%, transparent); } .community .head-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-bottom: 64px; } .community .body-row { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; margin-top: 56px; } .community .body-row p { font-size: 16px; line-height: 1.7; color: var(--cream-dim); margin: 0 0 22px; text-align: center; } .community .body-row p:last-child { margin-bottom: 0; } .community .pull-quote { position: sticky; top: 120px; border-left: 1px solid var(--green-line); padding: 4px 0 4px 36px; margin: 0; } .community .pull-quote .marker { font-family: var(--serif); font-size: 72px; font-style: italic; color: var(--green); line-height: 0.6; margin-bottom: 12px; letter-spacing: -0.04em; } .community .pull-quote q { font-family: var(--serif); font-size: clamp(24px, 2.4vw, 34px); font-style: italic; line-height: 1.2; color: var(--cream); letter-spacing: -0.012em; display: block; quotes: none; } .community .pull-quote q::before, .community .pull-quote q::after { content: ""; } .community .pull-quote .signoff { margin-top: 28px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .community .pull-quote .signoff strong { color: var(--cream); font-weight: 500; } .community .stats-row { margin-top: 80px; padding-top: 32px; border-top: 1px solid var(--rule); display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; } .community .stat .num { font-family: var(--serif); font-size: 56px; font-style: italic; color: var(--green); line-height: 0.9; letter-spacing: -0.02em; font-feature-settings: "tnum"; } .community .stat .lbl { margin-top: 16px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } /* ───────────────────────────────────────────────────────────────────── SAMPLE OUTPUTS — 3 refined terminal cards. Bull / Bear / Neutral. ───────────────────────────────────────────────────────────────────── */ .samples .head-row { display: grid; grid-template-columns: 1.2fr 1fr; gap: 80px; align-items: end; margin-bottom: 64px; } .sample-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .sample { background: var(--ink-2); border: 1px solid var(--rule); border-radius: var(--r-md); overflow: hidden; display: flex; flex-direction: column; transition: border-color 240ms ease, transform 240ms cubic-bezier(0.16,1,0.3,1); } .sample:hover { border-color: var(--rule-bright); transform: translateY(-2px); } .sample .head { display: flex; justify-content: space-between; padding: 12px 16px; border-bottom: 1px solid var(--rule); background: rgba(0,0,0,0.3); font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .sample .head .conf { padding: 1px 7px; border-radius: 3px; border: 1px solid var(--rule); } .sample.bull .head .conf { color: var(--green); border-color: var(--green-line); background: var(--green-soft); } .sample.bear .head .conf { color: var(--bear); border-color: rgba(248,113,113,0.32); background: var(--bear-soft); } .sample.neutral .head .conf { color: var(--muted); } .sample .instrument { padding: 16px 18px 18px; border-bottom: 1px solid var(--rule); } .sample .instrument .dir { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; } .sample.bull .instrument .dir { color: var(--green); } .sample.bear .instrument .dir { color: var(--bear); } .sample.neutral .instrument .dir { color: var(--muted); } .sample .instrument h4 { margin: 8px 0 0; font-family: var(--serif); font-size: 22px; letter-spacing: -0.015em; color: var(--cream); } .sample .instrument .tf { display: block; margin-top: 2px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .sample .narrative { padding: 16px 18px; border-bottom: 1px solid var(--rule); font-size: 12.5px; line-height: 1.6; color: var(--cream-dim); } .sample .levels { padding: 8px 0; border-bottom: 1px solid var(--rule); } .sample .levels .row { display: grid; grid-template-columns: 80px 1fr; gap: 14px; padding: 6px 18px; align-items: baseline; } .sample .levels .px { font-family: var(--mono); font-size: 12.5px; font-weight: 600; } .sample .levels .px-bear { color: var(--bear); } .sample .levels .px-bull { color: var(--green); } .sample .levels .px-neutral { color: var(--cream-dim); } .sample .levels .label { font-size: 11.5px; color: var(--muted); } .sample .setup { padding: 16px 18px 20px; } .sample .setup .k { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted-dim); margin-bottom: 6px; } .sample .setup .v { font-size: 13px; font-weight: 500; color: var(--cream); line-height: 1.45; } .sample.neutral .setup .v { color: var(--muted); font-style: italic; font-weight: 400; } /* ───────────────────────────────────────────────────────────────────── PRICING — two columns, hairline-bound. Mono price as headline. Lifetime is the primary action. ───────────────────────────────────────────────────────────────────── */ .pricing { background: rgba(255,255,255,0.012); border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } .pricing .head-row { text-align: center; margin-bottom: 80px; } .pricing .section-label { justify-content: center; } .pricing .section-h { margin-left: auto; margin-right: auto; max-width: 22ch; } .pricing .section-sub { margin-left: auto; margin-right: auto; } .plans { display: grid; grid-template-columns: 1fr 1.12fr 1fr; gap: 22px; align-items: stretch; padding-top: 40px; } .pricing .plan { position: relative; display: flex; flex-direction: column; padding: 0; background: #0c1015; border: 1px solid rgba(255,255,255,0.10); border-radius: 14px; overflow: visible; box-shadow: 0 0 0 1px rgba(63,185,80,0.06), 0 40px 80px -30px rgba(0,0,0,0.75), 0 0 50px -16px rgba(63,185,80,0.06); transition: transform 300ms cubic-bezier(0.16,1,0.3,1), box-shadow 300ms cubic-bezier(0.16,1,0.3,1), border-color 200ms ease; } /* hover-lift — cards rise on hover (disabled on touch so they don't stick) */ .pricing .plan:hover { transform: translateY(-10px); border-color: rgba(63,185,80,0.32); box-shadow: 0 0 0 1px rgba(63,185,80,0.18), 0 60px 100px -28px rgba(0,0,0,0.85), 0 0 72px -14px rgba(63,185,80,0.16); } .pricing .plan.featured:hover { transform: translateY(-16px); } @media (hover: none) { .pricing .plan:hover { transform: none; } } .pricing .plan .plan-body { display: flex; flex-direction: column; flex: 1 1 auto; padding: 58px 44px 52px; } .pricing .plan.featured { margin-top: -14px; background: radial-gradient(ellipse 50% 40% at 50% 0%, rgba(63,185,80,0.06), transparent 70%), #0c1015; box-shadow: 0 0 0 1px rgba(63,185,80,0.12), 0 40px 80px -30px rgba(0,0,0,0.75), 0 0 50px -16px rgba(63,185,80,0.09); } .pricing .plan.featured .plan-body { padding-top: 64px; background-image: repeating-linear-gradient(0deg, rgba(63,185,80,0.022) 0 1px, transparent 1px 4px); } /* crop-mark corner ticks */ .pricing .plan .cmark { position: absolute; width: 12px; height: 12px; border: 1.5px solid rgba(255,255,255,0.16); pointer-events: none; z-index: 2; } .pricing .plan .cmark.tl { top: 13px; left: 13px; border-right: 0; border-bottom: 0; } .pricing .plan .cmark.tr { top: 13px; right: 13px; border-left: 0; border-bottom: 0; } .pricing .plan .cmark.bl { bottom: 13px; left: 13px; border-right: 0; border-top: 0; } .pricing .plan .cmark.br { bottom: 13px; right: 13px; border-left: 0; border-top: 0; } .pricing .plan.featured .cmark { border-color: rgba(63,185,80,0.32); } /* Best value ribbon */ .pricing .plan.featured .ribbon { position: absolute; top: 0; left: 50%; transform: translateX(-50%); padding: 6px 18px; font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; font-weight: 600; color: #050709; background: linear-gradient(180deg, #4ade80, #16a34a); border: 1px solid rgba(63,185,80,0.5); border-top: 0; border-radius: 0 0 5px 5px; box-shadow: 0 8px 22px rgba(63,185,80,0.30); z-index: 3; white-space: nowrap; } /* Tier label */ .plan .plan-tag { margin-bottom: 20px; } .plan .tier-id { display: flex; align-items: baseline; gap: 10px; } .plan .tier-id .num { font-family: "JetBrains Mono", monospace; font-size: 10px; letter-spacing: 0.18em; color: #828a98; } .plan .tier-id .name { font-family: "JetBrains Mono", monospace; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #c0c6d0; } /* Price */ .plan .price-headline { font-family: "JetBrains Mono", monospace; font-size: clamp(72px, 8vw, 104px); line-height: 0.92; letter-spacing: -0.05em; font-weight: 500; color: #f1f3f7; font-feature-settings: "tnum"; } .plan .price-headline .unit { font-family: "Instrument Serif", serif; font-style: italic; font-size: 26px; font-weight: 400; color: #828a98; letter-spacing: -0.01em; margin-left: 6px; } .plan.trial .price-headline { color: #c0c6d0; } .plan.featured .price-headline { color: #3fb950; } .plan.featured .price-headline .unit { color: rgba(63,185,80,0.65); } /* Voice line */ .plan .plan-summary { margin: 14px 0 0; font-family: "Instrument Serif", serif; font-size: 19px; line-height: 1.25; letter-spacing: 0.01em; color: #f1f3f7; } .plan.featured .plan-summary { color: #4ade80; } /* Feature list */ .plan .feature-list { list-style: none; padding: 26px 0 0; margin: 28px 0 30px; border-top: 1px solid rgba(255,255,255,0.06); display: flex; flex-direction: column; gap: 14px; } .plan .feature-list li { display: flex; align-items: flex-start; gap: 13px; font-size: 14.5px; line-height: 1.5; color: #c0c6d0; } .plan .feature-list li:not(.muted)::before { content: ""; width: 5px; height: 9px; border-right: 1.6px solid #3fb950; border-bottom: 1.6px solid #3fb950; border-radius: 1px; filter: drop-shadow(0 0 4px rgba(63,185,80,0.5)); transform: rotate(45deg); margin-top: 4px; margin-right: 3px; flex-shrink: 0; } .plan .feature-list li.muted { color: #5a6271; } .plan .feature-list li.muted::before { content: ""; width: 12px; height: 13px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235a6271' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='10' rx='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") no-repeat center / contain; border: 0; transform: none; margin-top: 4px; margin-right: 0; flex-shrink: 0; } /* fine print under the summary (mono anchor lines: "≈ 30¢ a day", "Founder pricing") */ .plan .plan-fine { margin: 9px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.01em; color: var(--muted-dim); } /* tier-stacking header above the feature list */ .plan .list-head { margin-top: 28px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.06); font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted-dim); } .plan .list-head em { font-style: normal; color: #3fb950; } .plan .list-head + .feature-list { border-top: 0; padding-top: 0; margin-top: 16px; } /* micro-reassurance under each CTA */ .plan .cta-fine { margin: 11px 0 0; text-align: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--muted-dim); } /* featured CTA is solid at rest (the buy moment reads as THE button) */ .plan.featured .btn-primary { background: linear-gradient(135deg, #4ade80 0%, #16a34a 100%); color: #04240d; border-color: transparent; box-shadow: 0 0 26px rgba(63,185,80,0.35), 0 4px 14px rgba(0,0,0,0.3); } .plan.featured .btn-primary:hover { background: linear-gradient(135deg, #5ce98f 0%, #19b552 100%); color: #04240d; box-shadow: 0 0 40px rgba(63,185,80,0.5), 0 6px 16px rgba(0,0,0,0.35); transform: translateY(-1px); } /* trust row + disclaimer under the grid */ .pricing-trust { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 14px 34px; margin-top: 46px; font-size: 13.5px; color: var(--cream-dim); } .pricing-trust .pt-item { display: inline-flex; align-items: center; gap: 8px; } .pricing-trust .pt-check { color: #3fb950; font-size: 12px; } .pricing-trust .pt-lock { width: 13px; height: 13px; color: var(--muted); } .pricing-disclaimer { margin: 14px 0 0; text-align: center; font-size: 12.5px; color: var(--muted-dim); } .pricing-disclaimer a { color: #3fb950; text-decoration: none; } .pricing-disclaimer a:hover { text-decoration: underline; } .plan .plan-cta { margin-top: auto; } .plan .plan-cta .btn { width: 100%; padding: 16px 20px; } /* ───────────────────────────────────────────────────────────────────── FAQ — Apple-style accordion. Just type, hairlines, generous space. ───────────────────────────────────────────────────────────────────── */ .faq .head-row { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; } .faq .head-row .lead h2 { max-width: 14ch; } .faq .head-row .lead p { margin-top: 28px; font-size: var(--t-body); line-height: 1.6; color: var(--muted); max-width: 36ch; } .faq .head-row .lead p a { color: var(--green); } .faq .head-row .lead p a:hover { opacity: 0.7; } .faq-list { border-top: 1px solid var(--rule-strong); } .faq-item { border-bottom: 1px solid var(--rule); } .faq-q { display: flex; justify-content: space-between; align-items: baseline; gap: 32px; padding: 28px 0; width: 100%; text-align: left; font-family: var(--serif); font-size: clamp(22px, 2.2vw, 28px); letter-spacing: -0.015em; line-height: 1.2; color: var(--cream); transition: color 200ms ease; } .faq-item.open .faq-q { color: var(--cream); } .faq-q:hover { color: var(--green); } .faq-toggle { flex-shrink: 0; width: 26px; height: 26px; position: relative; transition: transform 320ms cubic-bezier(0.16,1,0.3,1); } .faq-toggle::before, .faq-toggle::after { content: ""; position: absolute; background: var(--green); transition: transform 320ms cubic-bezier(0.16,1,0.3,1), opacity 200ms ease; } .faq-toggle::before { /* horizontal */ top: 50%; left: 4px; right: 4px; height: 1.5px; transform: translateY(-50%); } .faq-toggle::after { /* vertical */ left: 50%; top: 4px; bottom: 4px; width: 1.5px; transform: translateX(-50%); } .faq-item.open .faq-toggle::after { opacity: 0; } .faq-a { max-height: 0; opacity: 0; overflow: hidden; transition: max-height 400ms cubic-bezier(0.16,1,0.3,1), opacity 280ms ease; } .faq-item.open .faq-a { max-height: 600px; opacity: 1; } .faq-a p { padding: 0 0 32px 0; max-width: 56ch; font-size: 15.5px; line-height: 1.7; color: var(--cream-dim); margin: 0; } /* ───────────────────────────────────────────────────────────────────── FINAL CTA — centered, confident, one button. ───────────────────────────────────────────────────────────────────── */ .final-cta { padding: 110px 0 120px; text-align: center; position: relative; overflow: hidden; } .final-cta::before { content: ""; position: absolute; bottom: -40%; left: 50%; width: 90vw; height: 100vh; transform: translateX(-50%); background: radial-gradient(ellipse 45% 50% at 50% 100%, rgba(63,185,80,0.12) 0%, transparent 70%); pointer-events: none; } .final-cta .bell-mark { width: 66px; height: 66px; color: var(--green); margin: 0 auto 32px; border-radius: 22%; display: block; } .final-cta h2 { font-family: var(--serif); font-size: var(--t-display-xl); line-height: 0.95; letter-spacing: -0.035em; color: var(--cream); margin: 0; max-width: 16ch; margin-left: auto; margin-right: auto; } .final-cta h2 .em { color: var(--green); font-style: italic; } .final-cta p { margin: 32px auto 0; font-size: var(--t-body-l); line-height: 1.55; color: var(--muted); max-width: 44ch; } .final-cta .cta-wrap { margin-top: 48px; display: flex; flex-direction: column; align-items: center; gap: 18px; width: fit-content; margin-left: auto; margin-right: auto; } .final-cta .finepoint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .final-cta .finepoint .check { color: var(--green); } .final-cta .countdown { margin-top: 56px; display: flex; justify-content: center; align-items: center; gap: 12px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--muted); } .final-cta .countdown .v { color: var(--green); } .final-cta .week-stat { margin-top: 14px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-align: center; } .final-cta .week-stat .v { color: var(--green); } /* ───────────────────────────────────────────────────────────────────── FOOTER ───────────────────────────────────────────────────────────────────── */ footer { border-top: 1px solid var(--rule); padding: 80px 0 32px; background: var(--ink); } footer .row { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 48px; margin-bottom: 64px; } footer h4 { font-family: var(--mono); font-size: 10.5px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); margin: 0 0 20px; } footer ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; } footer ul a { font-size: 13.5px; color: var(--cream-dim); transition: color 180ms ease; } footer ul a:hover { color: var(--green); } footer .brand { display: flex; flex-direction: column; gap: 16px; } footer .brand .wordmark { font-family: var(--serif); font-size: 24px; letter-spacing: -0.015em; color: var(--cream); } footer .brand .wordmark .em { font-style: italic; color: var(--green); } footer .brand p { font-size: 13.5px; line-height: 1.6; color: var(--muted); max-width: 38ch; margin: 0; } footer .legal { padding-top: 28px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; align-items: center; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } footer .legal .countdown { display: inline-flex; align-items: center; gap: 8px; } footer .legal .countdown .v { color: var(--green); } /* ───────────────────────────────────────────────────────────────────── REVEAL — single, restrained fade-up. No bounce, no scale. ───────────────────────────────────────────────────────────────────── */ .reveal { opacity: 0; transform: translateY(16px); transition: opacity 900ms cubic-bezier(0.16,1,0.3,1), transform 900ms cubic-bezier(0.16,1,0.3,1); } .reveal.in { opacity: 1; transform: translateY(0); } /* Safety: if JS is fully off, never leave reveal content hidden (no .js flag = show it) */ html:not(.js) .reveal { opacity: 1; transform: none; transition: none; } /* On-page disclaimers, placed next to the advice-looking content */ .hero-legal { margin: 14px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted-dim); letter-spacing: 0.01em; } .demo-disclaimer { max-width: 580px; margin: 20px auto 0; text-align: center; font-size: 11.5px; line-height: 1.55; color: var(--muted); } /* Interactive demo step controls */ .demo-steps { display: flex; width: 100%; align-items: center; justify-content: center; gap: 10px; margin-top: 26px; flex-wrap: wrap; } .demo-step { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 9px; border-radius: 999px; border: 1px solid var(--rule-strong); background: rgba(255,255,255,0.02); color: var(--muted); font-family: var(--sans); font-size: 13px; font-weight: 500; cursor: pointer; transition: border-color .25s, color .25s, background .25s, transform .15s; } .demo-step:hover { border-color: var(--rule-bright); color: var(--cream-dim); transform: translateY(-1px); } .demo-step-n { display: grid; place-items: center; width: 23px; height: 23px; border-radius: 999px; background: rgba(255,255,255,0.06); color: var(--muted); font-family: var(--mono); font-size: 12px; font-weight: 600; transition: background .25s, color .25s; } .demo-step.is-done .demo-step-n { background: var(--green-soft); color: var(--green); } .demo-step.is-active { border-color: var(--green-line); color: var(--cream); background: var(--green-soft); } .demo-step.is-active .demo-step-n { background: var(--green); color: #052e10; } .demo-replay { margin-left: 4px; padding: 8px 14px; border-radius: 999px; border: 1px solid var(--rule-strong); background: transparent; color: var(--muted); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: color .2s, border-color .2s; } .demo-replay:hover { color: var(--cream); border-color: var(--rule-bright); } /* Animated cursor that drives the demo */ .demo-cursor { position: absolute; left: 50%; top: 62%; z-index: 30; pointer-events: none; opacity: 0; transition: left .75s cubic-bezier(.5,0,.15,1), top .75s cubic-bezier(.5,0,.15,1), opacity .4s ease; filter: drop-shadow(0 3px 5px rgba(0,0,0,0.45)); will-change: left, top; } .demo-cursor svg { display: block; transition: transform .12s ease; } .demo-cursor.clicking svg { transform: scale(0.8); } .demo-cursor-ring { position: absolute; left: 4px; top: 3px; width: 10px; height: 10px; border-radius: 50%; border: 2px solid var(--green); opacity: 0; } .demo-cursor.clicking .demo-cursor-ring { animation: demoCursorClick .55s ease-out; } @keyframes demoCursorClick { 0% { opacity: .85; transform: scale(0.4); } 100% { opacity: 0; transform: scale(3.6); } } @media (prefers-reduced-motion: reduce) { .demo-cursor { display: none; } } /* Demo instrument dropdown the cursor opens */ .demo-field { position: relative; } .demo-instr-menu { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 28; display: flex; flex-direction: column; gap: 2px; padding: 6px; border-radius: 10px; background: #0a0e14; border: 1px solid var(--rule-bright); box-shadow: 0 16px 40px rgba(0,0,0,0.6); opacity: 0; transform: translateY(-6px) scale(0.98); transform-origin: top center; pointer-events: none; transition: opacity .2s ease, transform .22s cubic-bezier(.16,1,.3,1); } .demo-recents { transition: opacity .2s ease; } .demo-stage.menu-open .demo-recents { opacity: 0; } .demo-instr-menu.open { opacity: 1; transform: translateY(0) scale(1); } .demo-instr-opt { padding: 8px 11px; border-radius: 7px; font-family: var(--mono); font-size: 12.5px; color: var(--cream-dim); transition: background .15s, color .15s; } .demo-instr-opt.is-sel, .demo-instr-opt.hot { background: var(--green-soft); color: var(--cream); } .demo-instr-opt .dash { color: var(--muted-dim); } @media (max-width: 560px) { .demo-step-t { display: none; } .demo-step { padding: 8px; } .demo-step-n { width: 26px; height: 26px; } } .reveal-d1 { transition-delay: 80ms; } .reveal-d2 { transition-delay: 160ms; } .reveal-d3 { transition-delay: 240ms; } @media (prefers-reduced-motion: reduce) { .reveal, .reveal-d1, .reveal-d2, .reveal-d3 { opacity: 1; transform: none; transition: none; } .live-dot::after, .ticker-track { animation: none; } .terminal-frame { transition: none; } } /* ───────────────────────────────────────────────────────────────────── RESPONSIVE — graceful, not pixel-perfect. ───────────────────────────────────────────────────────────────────── */ @media (max-width: 1100px) { .hero-grid, .problem .head-row, .how .head-row, .comparison .head-row, .community .head-row, .community .body-row, .samples .head-row, .faq .head-row { grid-template-columns: 1fr; gap: 48px; } .compare-pair { grid-template-columns: 1fr; } .compare-pair .col-with { border-left: 0; border-top: 1px solid var(--rule); padding: 56px 0 0; } .compare-pair .col-without { padding-right: 0; padding-bottom: 56px; } .plans { grid-template-columns: 1fr; gap: 16px; padding-top: 20px; } .pricing .plan.featured { margin-top: 0; } .plan .price-headline { font-size: clamp(64px, 16vw, 96px); } .sample-grid { grid-template-columns: 1fr; } .run-step { grid-template-columns: 1fr; gap: 24px; padding: 36px 24px; } .community .stats-row { grid-template-columns: repeat(2, 1fr); gap: 32px; } .friction-item { grid-template-columns: 1fr; gap: 16px; padding: 32px 0; } .problem .closer, .comparison .closer { grid-template-columns: 1fr; gap: 16px; } } @media (max-width: 860px) { .nav-links { display: none; } .nav-actions .btn-secondary { display: none; } .nav-toggle { display: inline-flex; } } @media (max-width: 720px) { :root { --sp-section: 80px; --sp-gutter: 24px; } .nav-links { display: none; } .nav-actions .btn-secondary { display: none; } .nav-actions { display: none !important; } .hero { padding: 80px 0 100px; } .hero p.tagline { font-size: 16px; margin-top: 28px; } .hero-cta-row { flex-direction: column; align-items: stretch; gap: 12px; } .hero-cta-row .btn { width: 100%; } footer .row { grid-template-columns: 1fr 1fr; } footer .brand { grid-column: 1 / -1; margin-bottom: 16px; } .community .stats-row { grid-template-columns: 1fr 1fr; } .community .pull-quote { position: static; } .banner-inner { padding: 11px 40px 11px 16px; flex-wrap: wrap; } .calc-grid { grid-template-columns: 1fr; gap: 48px; } /* testimonial cards — handled in testimonials media query block */ .demo-form { flex-wrap: wrap; } } /* ───────────────────────────────────────────────────────────────────── Demo section ───────────────────────────────────────────────────────────────────── */ .demo { overflow: hidden; } .demo-wrap { margin-top: 60px; display: flex; flex-direction: column; align-items: center; position: relative; } /* ambient stage glow behind the demo widget. isolation + negative z keeps the glow under every child WITHOUT repositioning them (a blanket `.demo-wrap > * { position:relative }` here once broke the animated cursor, which relies on position:absolute for its left/top choreography) */ .demo-wrap { isolation: isolate; } .demo-wrap::before { content: ""; position: absolute; inset: -10% -14%; background: radial-gradient(ellipse 55% 50% at 50% 42%, rgba(63,185,80,0.07) 0%, transparent 68%); pointer-events: none; z-index: -1; } /* Stage card */ .demo-stage { width: 100%; max-width: 720px; background: var(--ink-2); border: 1px solid var(--rule); border-radius: 12px; overflow: hidden; position: relative; transition: max-width 620ms cubic-bezier(0.22, 0.61, 0.36, 1), transform 600ms cubic-bezier(0.34, 0, 0.2, 1); } /* Green glow via ::before — brightens during analyze/reveal/hold */ .demo-stage::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(ellipse at 50% 0%, rgba(63,185,80,0.10) 0%, transparent 55%); opacity: 0.30; transition: opacity 800ms ease; pointer-events: none; z-index: 0; } .demo-stage[data-stage="analyze"]::before, .demo-stage[data-stage="reveal"]::before, .demo-stage[data-stage="hold"]::before { opacity: 1; } /* Expand on reveal/hold */ .demo-stage[data-stage="reveal"], .demo-stage[data-stage="hold"] { max-width: 1080px; } /* Floating timer pill (top-right of chart canvas) */ .demo-timer-pill { position: absolute; top: 10px; right: 10px; z-index: 4; display: flex; align-items: center; gap: 5px; padding: 4px 10px; background: rgba(5,7,9,0.82); border: 1px solid rgba(255,255,255,0.14); border-radius: 20px; font-family: var(--mono); font-size: 11px; color: var(--green); opacity: 0; transition: opacity 200ms; pointer-events: none; } .demo-stage[data-stage="analyze"] .demo-timer-pill { opacity: 1; } /* Tab bar */ .demo-tabs { display: flex; border-bottom: 1px solid var(--rule); padding: 0 20px; position: relative; z-index: 1; } .demo-tab { position: relative; padding: 11px 14px; font-family: var(--mono); font-size: 11px; color: var(--muted); background: none; border: none; cursor: default; } .demo-tab.is-active { color: var(--cream); } .demo-tab-bar { display: block; position: absolute; bottom: -1px; left: 0; right: 0; height: 2px; background: var(--green); border-radius: 1px 1px 0 0; } .demo-tab:not(.is-active) .demo-tab-bar { display: none; } /* Form row */ .demo-form { display: flex; align-items: flex-end; gap: 16px; padding: 14px 20px 10px; border-bottom: 1px solid var(--rule); position: relative; z-index: 1; } .demo-field { display: flex; flex-direction: column; gap: 5px; flex: 1; } .demo-field-tf { flex: 0 0 90px; } .demo-field label { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .demo-select { display: flex; align-items: center; justify-content: space-between; padding: 6px 10px; background: var(--ink); border: 1px solid var(--rule); border-radius: 6px; font-family: var(--mono); font-size: 12px; color: var(--cream); cursor: default; } .demo-select svg { color: var(--muted); flex-shrink: 0; } .dash { color: var(--muted); } /* Recent chips row */ .demo-recents { display: flex; align-items: center; gap: 8px; padding: 8px 20px 10px; border-bottom: 1px solid var(--rule); position: relative; z-index: 1; } .demo-recent-label { font-family: var(--mono); font-size: 10px; color: var(--muted); margin-right: 2px; } .demo-chip { padding: 3px 9px; font-family: var(--mono); font-size: 10px; border: 1px solid var(--rule); border-radius: 4px; color: var(--muted); cursor: default; } .demo-chip.is-active { color: var(--green); border-color: rgba(63,185,80,0.35); background: rgba(63,185,80,0.07); } /* Canvas: flex row — dropzone always left, output slides in right */ .demo-canvas { display: flex; height: 340px; position: relative; z-index: 1; } /* Left panel: dropzone (flex: 1, always present) */ .demo-dropzone { flex: 1; min-width: 0; min-height: 340px; position: relative; display: flex; flex-direction: column; } /* Drop inner: centered idle placeholder */ .demo-drop-inner { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; padding: 48px 24px; text-align: center; opacity: 1; transition: opacity 300ms ease; background: repeating-linear-gradient( 45deg, transparent, transparent 10px, rgba(255,255,255,0.008) 10px, rgba(255,255,255,0.008) 20px ); } /* Hide idle placeholder once chart slides in */ .demo-stage[data-stage="drop"] .demo-drop-inner, .demo-stage[data-stage="analyze"] .demo-drop-inner, .demo-stage[data-stage="reveal"] .demo-drop-inner, .demo-stage[data-stage="hold"] .demo-drop-inner { opacity: 0; pointer-events: none; } /* CSS-drawn candle icons */ .demo-candles { display: flex; align-items: flex-end; gap: 4px; height: 44px; margin-bottom: 6px; } .demo-candles span { width: 6px; border-radius: 1px; background: var(--muted); opacity: 0.35; } .demo-candles span:nth-child(1) { height: 24px; } .demo-candles span:nth-child(2) { height: 36px; background: var(--green); opacity: 0.45; } .demo-candles span:nth-child(3) { height: 18px; } .demo-candles span:nth-child(4) { height: 30px; background: var(--green); opacity: 0.45; } .demo-candles span:nth-child(5) { height: 22px; } .demo-candles span:nth-child(6) { height: 40px; background: var(--green); opacity: 0.45; } .demo-candles span:nth-child(7) { height: 16px; } .demo-candles span:nth-child(8) { height: 28px; } .demo-drop-title { font-size: 14px; color: var(--cream); font-weight: 500; } .demo-drop-sub { font-size: 12px; color: var(--muted); } .demo-drop-formats { font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.12em; margin-top: 2px; } /* Chart preview: slides up from bottom during drop/analyze */ .demo-chart-preview { position: absolute; inset: 0; opacity: 0; transform: translateY(20px) scale(0.95); transition: opacity 450ms ease, transform 500ms cubic-bezier(0.22, 1, 0.36, 1); } .demo-chart-preview svg { width: 100%; height: 100%; display: block; } .demo-stage[data-stage="drop"] .demo-chart-preview, .demo-stage[data-stage="analyze"] .demo-chart-preview, .demo-stage[data-stage="reveal"] .demo-chart-preview, .demo-stage[data-stage="hold"] .demo-chart-preview { opacity: 1; transform: none; } /* Scanline overlay */ .demo-scanline { position: absolute; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent 0%, var(--green) 40%, rgba(63,185,80,0.6) 60%, transparent 100%); box-shadow: 0 0 16px 3px rgba(63,185,80,0.35); top: -2px; animation: none; } .demo-stage[data-stage="analyze"] .demo-scanline { animation: demo-scan 2.2s linear infinite; } @keyframes demo-scan { from { top: 0; } to { top: 100%; } } /* Right panel: output — slides in on reveal/hold */ .demo-output { flex: 0 0 0; overflow: hidden; opacity: 0; border-left: 1px solid var(--rule); display: flex; flex-direction: column; overflow-y: auto; transition: flex-basis 620ms cubic-bezier(0.22, 0.61, 0.36, 1), opacity 400ms ease 200ms; } .demo-stage[data-stage="reveal"] .demo-output, .demo-stage[data-stage="hold"] .demo-output { flex-basis: 360px; opacity: 1; } /* Output rows — stagger in with delay */ .demo-bias-row, .demo-out-row, .demo-out-section { opacity: 0; transform: translateY(8px); transition: opacity 400ms ease, transform 400ms cubic-bezier(0.22, 1, 0.36, 1); } .demo-stage[data-stage="reveal"] [data-row="bias"], .demo-stage[data-stage="hold"] [data-row="bias"] { opacity: 1; transform: none; transition-delay: 0ms; } .demo-stage[data-stage="reveal"] [data-row="draw"], .demo-stage[data-stage="hold"] [data-row="draw"] { opacity: 1; transform: none; transition-delay: 280ms; } .demo-stage[data-stage="reveal"] [data-row="reason"], .demo-stage[data-stage="hold"] [data-row="reason"] { opacity: 1; transform: none; transition-delay: 600ms; } .demo-stage[data-stage="reveal"] [data-row="levels"], .demo-stage[data-stage="hold"] [data-row="levels"] { opacity: 1; transform: none; transition-delay: 1100ms; } .demo-stage[data-stage="reveal"] [data-row="inv"], .demo-stage[data-stage="hold"] [data-row="inv"] { opacity: 1; transform: none; transition-delay: 1700ms; } /* Bias row */ .demo-bias-row { display: flex; align-items: center; gap: 10px; padding: 11px 16px; border-bottom: 1px solid var(--rule); flex-wrap: wrap; background: rgba(248,113,113,0.04); flex-shrink: 0; } .demo-bias-badge { display: inline-flex; align-items: center; padding: 3px 9px; background: rgba(248,113,113,0.12); border: 1px solid rgba(248,113,113,0.30); border-radius: 4px; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--bear); letter-spacing: 0.08em; } .demo-bias-meta { display: flex; gap: 10px; font-family: var(--mono); font-size: 10px; color: var(--muted); flex-wrap: wrap; } .demo-bias-meta b { color: var(--cream-dim); font-weight: 500; } /* Draw-on row */ .demo-out-row { display: flex; align-items: baseline; gap: 8px; padding: 10px 16px; border-bottom: 1px solid var(--rule); font-size: 12px; flex-shrink: 0; } .demo-out-row .k { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); white-space: nowrap; } .demo-out-row .v { color: var(--cream-dim); flex: 1; line-height: 1.5; } .demo-out-row .muted { color: var(--muted); } /* Content sections */ .demo-out-section { padding: 11px 16px; border-bottom: 1px solid var(--rule); font-size: 12px; flex-shrink: 0; } .demo-out-section p { color: var(--cream-dim); margin: 0; font-size: 11.5px; line-height: 1.6; } .demo-out-h { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.16em; color: var(--muted); margin-bottom: 7px; } /* Key levels table */ .demo-levels-table { width: 100%; border-collapse: collapse; font-size: 11px; margin-top: 2px; } .demo-levels-table th { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.3); padding: 3px 6px 3px 0; text-align: left; border-bottom: 1px solid var(--rule); } .demo-levels-table td { padding: 5px 6px 5px 0; color: var(--cream-dim); vertical-align: top; border-bottom: 1px solid var(--rule); } .demo-levels-table tr:last-child td { border-bottom: none; } .demo-levels-table .muted { color: var(--muted); font-size: 10.5px; } /* Invalidation — red tint */ .demo-out-inv { border-left: 2px solid var(--bear); background: rgba(248,113,113,0.05); border-bottom: none; } /* Tags */ .demo-tag { display: inline-block; font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.1em; padding: 2px 5px; border-radius: 3px; border: 1px solid; white-space: nowrap; } .demo-tag-eqh { color: var(--bear); border-color: rgba(248,113,113,0.35); background: rgba(248,113,113,0.08); } .demo-tag-ob { color: var(--green); border-color: rgba(63,185,80,0.35); background: rgba(63,185,80,0.08); } .demo-tag-eql { color: #60a5fa; border-color: rgba(96,165,250,0.35); background: rgba(96,165,250,0.08); } /* Actions bar */ .demo-actions { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px; border-top: 1px solid var(--rule); background: var(--ink); position: relative; z-index: 1; } .demo-useful { display: flex; align-items: center; gap: 8px; } .demo-useful-lbl { font-family: var(--mono); font-size: 11px; color: var(--muted); } .demo-useful-btn { background: none; border: 1px solid var(--rule); border-radius: 5px; padding: 4px 7px; color: var(--muted); cursor: default; display: flex; align-items: center; transition: color 180ms, border-color 180ms; } .demo-useful-btn:hover { color: var(--green); border-color: rgba(63,185,80,0.3); } .demo-useful-btn-down:hover { color: var(--bear); border-color: rgba(248,113,113,0.3); } .demo-action-buttons { display: flex; gap: 8px; } .demo-action-btn { display: flex; align-items: center; gap: 5px; padding: 5px 12px; font-family: var(--mono); font-size: 10px; color: var(--muted); background: none; border: 1px solid var(--rule); border-radius: 6px; cursor: default; } .demo-action-btn-primary { background: rgba(63,185,80,0.07); border-color: rgba(63,185,80,0.35); color: var(--green); } /* On reveal/hold: let canvas grow vertically so full output is readable */ /* Keep the canvas a fixed height on reveal/hold so the long output scrolls inside its own panel (overflow-y:auto) instead of ballooning the stage and shifting the page (CLS). The width-expand effect is unaffected. */ .demo-stage[data-stage="reveal"] .demo-canvas, .demo-stage[data-stage="hold"] .demo-canvas { align-items: stretch; } /* Responsive: stack output below chart on narrow screens */ @media (max-width: 700px) { .demo-canvas { flex-direction: column; height: auto; min-height: 300px; } /* Column layout: children must stretch full-width. The desktop reveal/hold rule sets align-items:flex-start (for the side-by-side row), which here left-aligns the chart and shrinks it, leaving empty space beside it. */ .demo-stage[data-stage="reveal"] .demo-canvas, .demo-stage[data-stage="hold"] .demo-canvas { align-items: stretch; } .demo-stage[data-stage="reveal"] .demo-output, .demo-stage[data-stage="hold"] .demo-output { flex-basis: auto; border-left: none; border-top: 1px solid var(--rule); } .demo-stage[data-stage="reveal"], .demo-stage[data-stage="hold"] { max-width: 720px; } } /* Reduced motion: jump to final state */ @media (prefers-reduced-motion: reduce) { .demo-stage, .demo-stage::before, .demo-timer-pill, .demo-chart-preview, .demo-drop-inner, .demo-output, .demo-bias-row, .demo-out-row, .demo-out-section { transition: none !important; } .demo-scanline { animation: none !important; } } /* ───────────────────────────────────────────────────────────────────── Risk Calculator section ───────────────────────────────────────────────────────────────────── */ .calc-section { } .calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; margin-top: 60px; } /* ambient stage glow behind the calculator card (same isolation pattern as .demo-wrap) */ .calc-right { position: relative; isolation: isolate; } .calc-right::before { content: ""; position: absolute; inset: -16% -18%; background: radial-gradient(ellipse 58% 52% at 50% 50%, rgba(63,185,80,0.06) 0%, transparent 68%); pointer-events: none; z-index: -1; } .calc-left .section-label { margin-bottom: 20px; } .calc-left .section-h { margin-top: 0; } .calc-left p { margin-top: 20px; font-size: var(--t-body); color: var(--cream-dim); line-height: 1.65; } /* ── New interactive calc card ───────────────────────────────── */ .calc-card { background: var(--ink-2); border: 1px solid var(--rule-strong); border-radius: var(--r-lg); padding: 26px 28px 22px; display: flex; flex-direction: column; gap: 20px; position: relative; overflow: hidden; box-shadow: 0 1px 3px rgba(0,0,0,0.4), 0 8px 32px rgba(0,0,0,0.3), 0 0 80px -20px rgba(63,185,80,0.18); } .calc-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 160px; background: radial-gradient(ellipse at 60% 0%, rgba(63,185,80,0.07) 0%, transparent 70%); pointer-events: none; } /* head */ .calc-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .calc-head-l { display: flex; flex-direction: column; gap: 4px; } .calc-eyebrow { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.18em; color: var(--muted); } .calc-source { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); } .calc-source em { color: var(--cream-dim); font-style: italic; } .src-arrow { color: var(--muted-dim); font-size: 11px; } .src-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; animation: calc-pulse 2.4s ease-in-out infinite; } @keyframes calc-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.85); } } /* segmented risk control */ .calc-seg { display: flex; align-items: center; gap: 2px; background: rgba(255,255,255,0.04); border: 1px solid var(--rule); border-radius: 999px; padding: 3px; } .seg-k { font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; color: var(--muted-dim); padding: 0 6px 0 4px; } .seg-opt { font-family: var(--mono); font-size: 11px; font-weight: 500; padding: 5px 10px; border-radius: 999px; border: none; background: transparent; color: var(--muted); cursor: pointer; transition: color 0.15s, background 0.15s, box-shadow 0.15s; } .seg-opt:hover { color: var(--cream); } .seg-opt.is-active { background: linear-gradient(180deg, rgba(74,222,128,0.18), rgba(22,163,74,0.18)); color: var(--green); box-shadow: inset 0 0 0 1px rgba(63,185,80,0.32); } /* account/entry chip */ .calc-account { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px dashed var(--rule-strong); border-radius: 8px; font-family: var(--mono); font-size: 12px; flex-wrap: wrap; } .calc-account-k { color: var(--muted-dim); } .calc-account-v { color: var(--cream-dim); } .calc-account-v.num { color: var(--cream); letter-spacing: 0.02em; } .calc-account-sep { flex: 1; height: 1px; min-width: 24px; background: linear-gradient(90deg, var(--rule), transparent); } /* hero output */ .calc-hero { display: flex; align-items: center; gap: 24px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); } .calc-hero-num { display: flex; align-items: baseline; gap: 8px; flex-shrink: 0; } .calc-hero-num .n { font-family: var(--mono); font-size: clamp(64px, 7vw, 92px); font-weight: 700; line-height: 1; color: var(--green); text-shadow: 0 0 24px rgba(63,185,80,0.35); } .calc-hero-num .suffix { font-family: var(--serif); font-style: italic; font-size: 18px; color: var(--cream-dim); } .calc-hero-meta { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; flex: 1; } .meta-cell { display: flex; flex-direction: column; gap: 4px; } .meta-k { font-family: var(--mono); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted-dim); } .meta-v { font-family: var(--mono); font-size: 16px; font-weight: 600; color: var(--cream); } .meta-v .dollar { font-size: 12px; color: var(--muted); margin-right: 1px; } .meta-v.gain { color: var(--green); } /* risk/reward ladder */ .calc-ladder { display: flex; flex-direction: column; gap: 0; } .ladder-bar { position: relative; height: 6px; border-radius: 999px; background: rgba(255,255,255,0.04); overflow: visible; } .ladder-fill { position: absolute; top: 0; bottom: 0; border-radius: 999px; } .ladder-fill-risk { background: linear-gradient(90deg, var(--bear), rgba(248,113,113,0.55)); box-shadow: 0 0 10px rgba(248,113,113,0.3); } .ladder-fill-reward { background: linear-gradient(90deg, rgba(63,185,80,0.55), #4ade80); box-shadow: 0 0 10px rgba(63,185,80,0.3); } .ladder-zero { position: absolute; top: -4px; bottom: -4px; width: 1px; background: rgba(255,255,255,0.45); } .ladder-nodes { position: relative; height: 70px; margin-top: 6px; } .ladder-node { position: absolute; display: flex; flex-direction: column; align-items: center; gap: 2px; transform: translateX(-50%); } .ladder-node.n-stop { transform: translateX(0); align-items: flex-start; } .ladder-node.n-t2 { transform: translateX(-100%); align-items: flex-end; } .lnk-dot { width: 6px; height: 6px; border-radius: 50%; border: 1px solid currentColor; margin-bottom: 2px; } .lnk-lbl { font-family: var(--mono); font-size: 9px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--muted); } .lnk-px { font-family: var(--mono); font-size: 11px; font-weight: 600; color: var(--cream-dim); } .lnk-r { font-family: var(--mono); font-size: 10px; color: var(--muted); } /* node accent colors */ .ladder-node.n-stop .lnk-dot { color: var(--bear); box-shadow: 0 0 6px rgba(248,113,113,0.5); } .ladder-node.n-entry .lnk-dot { color: var(--cream); box-shadow: 0 0 6px rgba(241,243,247,0.3); } .ladder-node.n-t1 .lnk-dot { color: var(--green); box-shadow: 0 0 6px rgba(63,185,80,0.5); } .ladder-node.n-t2 .lnk-dot { color: #4ade80; box-shadow: 0 0 8px rgba(74,222,128,0.6); } /* footer */ .calc-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; padding-top: 2px; } .foot-status { display: flex; align-items: center; gap: 7px; font-family: var(--mono); font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.14em; } .foot-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--green); animation: calc-pulse 2.4s ease-in-out infinite; } .foot-eq { font-family: var(--mono); font-size: 11px; color: var(--muted-dim); } .foot-eq .num { color: var(--green); } /* mobile collapse */ @media (max-width: 720px) { .calc-card { padding: 20px 18px 18px; gap: 16px; } .calc-head { flex-direction: column; gap: 12px; } .calc-hero { flex-direction: column; align-items: flex-start; gap: 14px; } .calc-hero-meta { grid-template-columns: repeat(3, 1fr); gap: 10px; } .ladder-nodes { height: 56px; } .lnk-lbl, .lnk-px, .lnk-r { font-size: 9px; } .calc-foot { flex-direction: column; align-items: flex-start; gap: 6px; } } /* ── Section connector (demo → risk) ────────────────────────── */ .section-connector { position: relative; padding: 40px 0 20px; margin: 0 auto; pointer-events: none; } .connector-rail { display: flex; flex-direction: column; align-items: center; gap: 14px; } .connector-line { width: 1px; height: 110px; background: linear-gradient( 180deg, transparent 0%, rgba(63,185,80,0.05) 10%, rgba(63,185,80,0.45) 75%, rgba(63,185,80,0.7) 100% ); box-shadow: 0 0 8px rgba(63,185,80,0.35); } /* second line fades OUT going down */ .connector-line + .connector-badge + .connector-line { background: linear-gradient( 180deg, rgba(63,185,80,0.7) 0%, rgba(63,185,80,0.45) 30%, rgba(63,185,80,0.05) 85%, transparent 100% ); } @keyframes cb-ring-pulse { 0% { box-shadow: 0 0 0 4px rgba(0,0,0,0.4), 0 0 0 0 rgba(63,185,80,0.5), 0 0 24px -4px rgba(63,185,80,0.4); } 70% { box-shadow: 0 0 0 4px rgba(0,0,0,0.4), 0 0 0 10px rgba(63,185,80,0), 0 0 24px -4px rgba(63,185,80,0.4); } 100% { box-shadow: 0 0 0 4px rgba(0,0,0,0.4), 0 0 0 10px rgba(63,185,80,0), 0 0 24px -4px rgba(63,185,80,0.4); } } .connector-badge { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(63,185,80,0.32); border-radius: 999px; background: rgba(63,185,80,0.06); animation: cb-ring-pulse 2.2s ease-out infinite; } .connector-badge .cb-plus { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: 999px; background: var(--green); color: #0a1410; font-family: var(--mono); font-size: 12px; font-weight: 700; line-height: 1; } @media (max-width: 720px) { .section-connector { padding: 28px 0 12px; } .connector-line { height: 72px; } .connector-badge { width: 28px; height: 28px; } .connector-badge .cb-plus { width: 16px; height: 16px; font-size: 11px; } } @media (prefers-reduced-motion: reduce) { .connector-line, .connector-badge, .src-pulse, .foot-pulse { transition: none; animation: none; } } /* ───────────────────────────────────────────────────────────────────── TESTIMONIALS — infinite-loop carousel ───────────────────────────────────────────────────────────────────── */ .testimonials { overflow: hidden; } .testimonials .head-row { display: grid; grid-template-columns: 1fr 1fr; gap: 64px; align-items: end; margin-bottom: 56px; padding-bottom: 8px; } .testimonials .section-h { line-height: 1.04; margin-bottom: 4px; } .testimonial-carousel { position: relative; margin: 0 calc(-1 * var(--sp-gutter)); } .t-rail { position: relative; overflow: hidden; padding-block: 4px 24px; mask-image: linear-gradient(90deg, transparent 0, #000 var(--sp-gutter), #000 calc(100% - var(--sp-gutter)), transparent 100%); -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 var(--sp-gutter), #000 calc(100% - var(--sp-gutter)), transparent 100%); } .t-track { display: flex; gap: 24px; /* NO CSS transition — JS RAFs the slide to avoid compositor stall */ } .testimonial-card { flex: 0 0 440px; background: var(--ink-2); border: 1px solid var(--rule-strong); border-radius: var(--r-lg); padding: 30px 30px 32px; display: flex; flex-direction: column; gap: 22px; position: relative; overflow: hidden; } .testimonial-card::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--ac, var(--green)); opacity: 0.55; } /* per-card accent */ .testimonial-card[data-color="green"] { --ac: #3fb950; --ac-soft: rgba(63,185,80,0.12); } .testimonial-card[data-color="amber"] { --ac: #fbbf24; --ac-soft: rgba(251,191,36,0.12); } .testimonial-card[data-color="cyan"] { --ac: #67e8f9; --ac-soft: rgba(103,232,249,0.12); } .testimonial-card[data-color="bear"] { --ac: #f87171; --ac-soft: rgba(248,113,113,0.12); } .testimonial-card[data-color="violet"] { --ac: #a78bfa; --ac-soft: rgba(167,139,250,0.12); } .testimonial-card .t-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .testimonial-card .t-id { display: flex; align-items: center; gap: 12px; min-width: 0; } .testimonial-card .t-avatar { flex: 0 0 auto; width: 42px; height: 42px; border-radius: 999px; background: radial-gradient(circle at 30% 25%, rgba(255,255,255,0.16), transparent 60%), linear-gradient(135deg, var(--ac), color-mix(in oklch, var(--ac) 60%, #0c1015)); display: grid; place-items: center; box-shadow: 0 0 0 1px rgba(255,255,255,0.06) inset, 0 8px 18px -8px var(--ac-soft); } .testimonial-card .t-avatar span { font-family: var(--mono); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; color: #0c1015; text-shadow: 0 1px 0 rgba(255,255,255,0.18); } .testimonial-card .t-id-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .testimonial-card .t-id-text strong { font-family: var(--sans); font-size: 14.5px; font-weight: 500; letter-spacing: -0.005em; color: var(--cream); } .testimonial-card .t-id-text span { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .testimonial-card .t-verified { flex-shrink: 0; display: inline-flex; align-items: center; gap: 5px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--green); padding: 4px 7px 4px 6px; background: var(--green-soft); border: 1px solid var(--green-line); border-radius: 3px; font-weight: 600; } .testimonial-card .t-rating { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 18px; border-bottom: 1px solid var(--rule); } .testimonial-card .stars { display: inline-flex; gap: 3px; color: var(--ac, var(--green)); line-height: 0; } .testimonial-card .stars svg { filter: drop-shadow(0 0 6px var(--ac-soft)); } .testimonial-card .t-instr { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .testimonial-card q { font-family: var(--serif); font-size: 21px; line-height: 1.42; letter-spacing: -0.012em; color: var(--cream); quotes: none; font-weight: 400; margin: 0; text-wrap: pretty; flex: 1; } .testimonial-card q::before, .testimonial-card q::after { content: ""; } /* ── carousel controls ── */ .t-controls { display: flex; align-items: center; justify-content: center; padding: 0 var(--sp-gutter); margin-top: 32px; } .t-arrows { display: flex; align-items: center; gap: 18px; } .t-count { font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.22em; color: var(--muted); font-feature-settings: "tnum"; min-width: 56px; text-align: center; } .t-count strong { color: var(--cream); font-weight: 500; } .t-arrow { width: 40px; height: 40px; border-radius: 999px; background: var(--ink-2); border: 1px solid var(--rule-strong); color: var(--cream-dim); display: grid; place-items: center; cursor: pointer; transition: color 180ms ease, border-color 180ms ease, transform 180ms ease, background 180ms ease; } .t-arrow:hover { color: var(--cream); border-color: var(--green-line); background: var(--green-soft); } .t-arrow:active { transform: scale(0.94); } @media (max-width: 1100px) { .testimonials .head-row { grid-template-columns: 1fr; gap: 48px; } } @media (max-width: 720px) { .testimonial-card { flex: 0 0 86vw; max-width: 380px; padding: 24px 24px 28px; } .testimonial-card q { font-size: 19px; } } /* ───────────────────────────────────────────────────────────────────── HAMBURGER · MOBILE DRAWER ───────────────────────────────────────────────────────────────────── */ /* ── Toggle button (hidden above 860px via min-width MQ at bottom of file) ── */ .nav-toggle { display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border: 1px solid var(--rule-strong); border-radius: var(--r-md); background: rgba(255,255,255,0.04); color: var(--cream); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; flex-shrink: 0; transition: background 180ms ease, border-color 180ms ease; } .nav-toggle:hover { background: rgba(255,255,255,0.08); border-color: var(--rule-bright); } .nav-toggle-bars { display: flex; flex-direction: column; gap: 4px; width: 16px; } .nav-toggle-bars span { display: block; height: 1.5px; background: currentColor; border-radius: 1px; transition: transform 280ms cubic-bezier(0.16,1,0.3,1), opacity 200ms ease; } /* Animate bars → X when expanded */ .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(1) { transform: translateY(5.5px) rotate(45deg); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(2) { opacity: 0; transform: scaleX(0); } .nav-toggle[aria-expanded="true"] .nav-toggle-bars span:nth-child(3) { transform: translateY(-5.5px) rotate(-45deg); } /* ── Scrim — full-viewport backdrop ── */ .nav-scrim { position: fixed; inset: 0; background: rgba(5,7,9,0.62); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 90; opacity: 0; transition: opacity 280ms ease; } .nav-scrim[data-open="true"] { opacity: 1; } /* ── Drawer — slides in from the right ── */ .nav-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(92vw, 380px); background: var(--ink-2); border-left: 1px solid var(--rule-strong); z-index: 100; overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); transition: transform 340ms cubic-bezier(0.16,1,0.3,1); } .nav-drawer[data-open="true"] { transform: translateX(0); } /* Lock page scroll while drawer is open */ body[data-nav-open="true"] { overflow: hidden; } .nav-drawer-inner { display: flex; flex-direction: column; min-height: 100%; padding-bottom: 32px; } /* Top row: brand + close button */ .nav-drawer-top { display: flex; align-items: center; justify-content: space-between; padding: 16px 24px; border-bottom: 1px solid var(--rule); position: sticky; top: 0; background: var(--ink-2); z-index: 1; } .nav-drawer-brand { display: flex; align-items: center; gap: 10px; } .nav-drawer-brand .bell-mark { width: 20px; height: 20px; color: var(--cream); border-radius: 26%; display: block; } .nav-drawer-brand .bell-mark .accent { stroke: var(--green); } .nav-drawer-brand .wordmark { font-family: var(--serif); font-size: 20px; letter-spacing: -0.015em; color: var(--cream); } .nav-drawer-brand .wordmark .em { font-style: italic; color: var(--green); } .nav-drawer-close { width: 32px; height: 32px; border-radius: 50%; border: 1px solid var(--rule-strong); background: none; color: var(--muted); display: grid; place-items: center; cursor: pointer; flex-shrink: 0; transition: color 180ms ease, border-color 180ms ease, background 180ms ease; } .nav-drawer-close:hover { color: var(--cream); border-color: var(--rule-bright); background: rgba(255,255,255,0.06); } /* Status pill */ .nav-drawer-status { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 8px; padding: 11px 24px; border-bottom: 1px solid var(--rule); font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.10em; color: var(--muted); } .nav-drawer-status .v { color: var(--green); } .nav-drawer-status-sep { color: var(--muted-faint); } /* Serif numbered nav links */ .nav-drawer-links { display: flex; flex-direction: column; flex: 1; padding: 8px 0; } .nav-drawer-link { display: flex; align-items: baseline; gap: 18px; padding: 15px 24px; border-bottom: 1px solid var(--rule); transition: background 160ms ease; } .nav-drawer-link:last-child { border-bottom: 0; } .nav-drawer-link:hover { background: rgba(255,255,255,0.025); } .nav-drawer-link-num { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; color: var(--green); flex-shrink: 0; } .nav-drawer-link-text { font-family: var(--serif); font-size: 28px; letter-spacing: -0.018em; color: var(--cream); font-weight: 400; line-height: 1.1; } /* Founding code chip */ .nav-drawer-code-wrap { padding: 20px 24px 4px; border-top: 1px solid var(--rule); } .nav-drawer-code { width: 100%; display: flex; align-items: center; gap: 10px; padding: 12px 14px; background: var(--green-soft); border: 1px solid var(--green-line); border-radius: var(--r-sm); cursor: pointer; text-align: left; transition: background 180ms ease; } .nav-drawer-code:hover { background: rgba(63,185,80,0.16); } .nav-drawer-code.copied { background: rgba(63,185,80,0.22); } .nav-drawer-code-lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--muted); } .nav-drawer-code-val { font-family: var(--mono); font-size: 13px; font-weight: 700; letter-spacing: 0.12em; color: var(--green); flex: 1; } .nav-drawer-code-action { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .nav-drawer-code-hint { margin: 7px 0 0; font-family: var(--mono); font-size: 10.5px; color: var(--cream-dim); letter-spacing: 0; } /* CTAs */ .nav-drawer-ctas { padding: 20px 24px 0; display: flex; flex-direction: column; gap: 10px; } .nav-drawer-ctas .btn { width: 100%; justify-content: center; padding: 14px 20px; } @media (prefers-reduced-motion: reduce) { .nav-toggle-bars span, .nav-scrim, .nav-drawer { transition: none !important; } } /* ── Hide hamburger above the mobile breakpoint ── */ @media (min-width: 861px) { .nav-toggle { display: none; } } /* ── Scroll Progress Bar ───────────────────────────────────────── */ /* Track / hit area — wider than the visible track for an easier grab */ .scroll-progress { position: fixed; top: 0; right: 0; width: 14px; height: 100vh; z-index: 100; cursor: pointer; touch-action: none; -webkit-user-select: none; user-select: none; display: flex; justify-content: center; } /* Visible track (faint) — narrow by default, thickens on hover/drag */ .scroll-progress::before { content: ""; position: absolute; top: 0; right: 0; width: 3px; height: 100%; background: rgba(255, 255, 255, 0.04); transition: width 0.16s ease, background 0.16s ease; pointer-events: none; } .scroll-progress:hover::before, .scroll-progress:focus-visible::before, .scroll-progress.is-dragging::before { width: 6px; background: rgba(255, 255, 255, 0.07); } .scroll-progress:focus-visible { outline: none; } /* Progress fill — height set in JS each frame. NO height transition. */ .scroll-progress-fill { position: absolute; top: 0; right: 0; width: 3px; height: 0%; background: linear-gradient(180deg, #4ade80, #16a34a); box-shadow: 0 0 12px rgba(63, 185, 80, 0.45); transition: width 0.16s ease; pointer-events: none; will-change: height; } .scroll-progress:hover .scroll-progress-fill, .scroll-progress:focus-visible .scroll-progress-fill, .scroll-progress.is-dragging .scroll-progress-fill { width: 6px; } /* Draggable thumb — pill on top of the track */ .scroll-progress-thumb { position: absolute; top: 0; right: -2px; width: 8px; min-height: 36px; height: 0; border-radius: 999px; background: linear-gradient(180deg, #6df09a, #2ec96a); box-shadow: 0 0 0 1px rgba(15, 26, 18, 0.6), 0 4px 18px rgba(63, 185, 80, 0.45); opacity: 0; transform: translateX(2px); transition: opacity 0.16s ease, width 0.16s ease, transform 0.16s ease; pointer-events: none; will-change: top, height; } .scroll-progress:hover .scroll-progress-thumb, .scroll-progress:focus-visible .scroll-progress-thumb, .scroll-progress.is-dragging .scroll-progress-thumb { opacity: 1; width: 10px; transform: translateX(0); } .scroll-progress.is-dragging { cursor: grabbing; } .scroll-progress.is-dragging .scroll-progress-thumb { box-shadow: 0 0 0 1px rgba(15, 26, 18, 0.6), 0 6px 24px rgba(63, 185, 80, 0.7); transition: width 0.16s ease, transform 0.16s ease; } /* Touch / coarse-pointer: bigger hit area, thumb visible by default */ @media (hover: none) and (pointer: coarse) { .scroll-progress { width: 24px; padding-right: env(safe-area-inset-right, 0); } .scroll-progress::before { width: 4px; } .scroll-progress-fill { width: 4px; } .scroll-progress-thumb { width: 8px; opacity: 0.85; transform: translateX(0); } .scroll-progress.is-dragging .scroll-progress-thumb { width: 12px; } } @media (max-width: 720px) and (hover: hover) { .scroll-progress { width: 12px; } .scroll-progress::before { width: 2px; } .scroll-progress-fill { width: 2px; } } @media (prefers-reduced-motion: reduce) { .scroll-progress::before, .scroll-progress-fill, .scroll-progress-thumb { transition: none; } } /* ── Risk calculator mobile fix ────────────────────────────────────────────── Base .calc-grid rule at line ~2375 was added after the 720px media query, so the cascade order broke the mobile collapse. Scoped + !important fixes it. ─────────────────────────────────────────────────────────────────────────── */ @media (max-width: 900px) { #risk .calc-grid { grid-template-columns: 1fr !important; gap: 40px !important; } #risk .calc-head { flex-direction: column !important; align-items: stretch !important; } #risk .calc-account { flex-wrap: wrap !important; } #risk .calc-hero { flex-direction: column !important; align-items: flex-start !important; gap: 14px !important; } #risk .calc-hero-meta { grid-template-columns: repeat(3, 1fr) !important; width: 100% !important; } #risk .calc-foot { flex-direction: column !important; align-items: flex-start !important; } #risk .calc-foot .foot-eq { font-size: 9px !important; } #risk .lnk-px { font-size: 10px !important; } #risk .lnk-lbl { font-size: 8.5px !important; } #risk .calc-card { overflow: hidden !important; } #risk .calc-hero-meta .meta-cell, #risk .calc-hero-meta .hero-meta-cell { min-width: 0 !important; } } /* ── Card hover effects ────────────────────────────────────────────────────── Pricing cards: lift 6px + green halo intensifies Testimonial cards: lift 4px + per-card accent glow + stripe brightens CTA arrows nudge right on hover All transitions use the site's standard easing. prefers-reduced-motion safe. ─────────────────────────────────────────────────────────────────────────── */ /* Pricing cards */ .pricing .plan { transition: transform 0.32s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.32s cubic-bezier(0.16, 1, 0.3, 1); } .pricing .plan:hover { transform: translateY(-6px); box-shadow: 0 0 0 1px rgba(63,185,80,0.18), 0 40px 80px -20px rgba(0,0,0,0.8), 0 0 60px -10px rgba(63,185,80,0.18); } .pricing .plan.featured:hover { box-shadow: 0 0 0 1px rgba(63,185,80,0.3), 0 40px 80px -20px rgba(0,0,0,0.8), 0 0 70px -8px rgba(63,185,80,0.28); } /* Testimonial cards */ .testimonial-card { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1); } .testimonial-card:hover { transform: translateY(-4px); box-shadow: 0 0 0 1px rgba(var(--ac-rgb, 63,185,80), 0.22), 0 24px 60px -16px rgba(0,0,0,0.6), 0 0 40px -12px color-mix(in srgb, var(--ac, #3fb950) 35%, transparent); } /* Top stripe brightens on hover */ .testimonial-card::before { transition: opacity 0.3s ease; } .testimonial-card:hover::before { opacity: 1; } /* CTA arrows nudge right on hover */ .btn .arrow, .plan-cta .btn::after, .hero-cta-row .btn .arr, a.cta-link:hover { color: var(--green); } .plan-cta .btn, .hero-cta-row .btn { overflow: hidden; } /* Inline arrow nudge — targets spans/elements with arrow content inside buttons */ .btn > .arr, .btn > [class*="arrow"] { display: inline-block; transition: transform 0.22s cubic-bezier(0.16, 1, 0.3, 1); } .btn:hover > .arr, .btn:hover > [class*="arrow"] { transform: translateX(3px); } /* Nav links ease to brand green */ .nav-links a { transition: color 200ms ease; } .nav-links a:hover { color: var(--green); } /* prefers-reduced-motion: strip all the above transitions */ @media (prefers-reduced-motion: reduce) { .pricing .plan, .testimonial-card, .testimonial-card::before, .btn > .arr, .btn > [class*="arrow"] { transition: none; } .pricing .plan:hover, .testimonial-card:hover { transform: none; } } /* ── Info popup (footer Contact / Billing) ─────────────────────────── */ .info-scrim { position: fixed; inset: 0; background: rgba(3,5,7,0.72); backdrop-filter: blur(3px); z-index: 200; opacity: 0; transition: opacity .18s ease; } .info-scrim.open { opacity: 1; } .info-modal { position: fixed; left: 50%; top: 50%; transform: translate(-50%, -46%); width: min(92vw, 420px); background: var(--ink-2); border: 1px solid var(--rule-strong); border-radius: 16px; padding: 28px 26px 24px; z-index: 201; opacity: 0; transition: opacity .18s ease, transform .18s ease; box-shadow: 0 24px 60px rgba(0,0,0,0.5); } .info-modal.open { opacity: 1; transform: translate(-50%, -50%); } .info-modal h3 { font-family: var(--serif); font-size: 26px; color: var(--cream); margin: 0 0 10px; letter-spacing: -0.01em; } .info-modal p { font-family: var(--sans); font-size: 14px; line-height: 1.6; color: var(--muted); margin: 0 0 18px; } .info-modal .info-email { display: flex; align-items: center; gap: 8px; background: var(--ink); border: 1px solid var(--rule); border-radius: 10px; padding: 9px 12px; margin-bottom: 16px; } .info-modal .info-email code { font-family: var(--mono); font-size: 13px; color: var(--green); flex: 1; word-break: break-all; } .info-modal .info-actions { display: flex; gap: 10px; flex-wrap: wrap; } .info-modal .info-btn { flex: 1; min-width: 130px; text-align: center; padding: 11px 14px; border-radius: 10px; font-family: var(--sans); font-size: 13.5px; font-weight: 600; cursor: pointer; text-decoration: none; transition: border-color .15s, color .15s, background .15s; } .info-modal .info-btn.primary { background: linear-gradient(135deg, var(--green-warm), var(--green-deep)); color: #06210f; border: none; } .info-modal .info-btn.ghost { background: transparent; color: var(--cream-dim); border: 1px solid var(--rule-strong); } .info-modal .info-btn.ghost:hover { border-color: var(--rule-bright); color: var(--cream); } .info-modal .info-foot { font-size: 12px; color: var(--muted-dim); margin: 16px 0 0; line-height: 1.55; } .info-modal .info-foot a { color: var(--green); text-decoration: none; } .info-close { position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; display: grid; place-items: center; background: transparent; border: none; color: var(--muted); font-size: 20px; line-height: 1; cursor: pointer; border-radius: 8px; transition: color .15s, background .15s; } .info-close:hover { color: var(--cream); background: var(--rule); } .info-modal .info-form { display: flex; flex-direction: column; gap: 10px; } .info-modal .info-input, .info-modal .info-textarea { width: 100%; box-sizing: border-box; background: var(--ink); border: 1px solid var(--rule-strong); border-radius: 10px; padding: 11px 13px; font-family: var(--sans); font-size: 13.5px; color: var(--cream); transition: border-color .15s; } .info-modal .info-input::placeholder, .info-modal .info-textarea::placeholder { color: var(--muted-dim); } .info-modal .info-input:focus, .info-modal .info-textarea:focus { outline: none; border-color: var(--green-line); } .info-modal .info-textarea { resize: vertical; min-height: 92px; line-height: 1.5; } .info-modal .info-form .info-btn { width: 100%; margin-top: 2px; } .info-modal .info-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .info-modal .info-status { font-size: 12.5px; line-height: 1.5; margin: 2px 0 0; } .info-modal .info-status.ok { color: var(--green); } .info-modal .info-status.err { color: var(--bear); } .info-modal .info-link { background: none; border: none; color: var(--green); font: inherit; cursor: pointer; padding: 0; text-decoration: underline; }