/* ===================================================================== POCOSHIFT — layout / section styles ===================================================================== */ /* ===== Nav ===== */ .nav { position: sticky; top: 0; z-index: 50; background: oklch(from var(--bg) l c h / 0.85); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid var(--line); } .nav__inner { display: flex; align-items: center; height: 64px; gap: 32px; } .nav__brand { display: flex; align-items: center; gap: 12px; } .nav__logo { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; } .nav__logo img { width: 100%; height: 100%; object-fit: contain; display: block; } .nav__wordmark { font-size: 22px; letter-spacing: -0.02em; padding-top: 6px; } .nav__beta { margin-left: 4px; } .nav__links { display: flex; gap: 26px; font-size: 14.5px; color: var(--ink-2); margin-left: auto; } .nav__links a:hover { color: var(--ink); } .nav__cta { display: flex; align-items: center; gap: 10px; } /* ===== Language switcher ===== */ .lang-switch { position: relative; } .lang-switch__btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; font-size: 13px; letter-spacing: 0.02em; } .lang-switch__btn svg { opacity: 0.85; } .lang-switch__caret { font-size: 10px; opacity: 0.7; transition: transform 160ms ease; } .lang-switch.is-open .lang-switch__caret { transform: rotate(180deg); } .lang-switch__menu { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; max-height: 360px; overflow-y: auto; margin: 0; padding: 6px; list-style: none; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md, 10px); box-shadow: var(--shadow-lg, 0 12px 32px rgba(0,0,0,0.18)); z-index: 60; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 140ms ease, transform 140ms ease, visibility 140ms; font-size: 13.5px; } .lang-switch.is-open .lang-switch__menu { opacity: 1; visibility: visible; transform: translateY(0); } .lang-switch__menu li { padding: 8px 12px; border-radius: 6px; cursor: pointer; color: var(--ink); white-space: nowrap; } .lang-switch__menu li:hover, .lang-switch__menu li:focus { background: var(--surface, rgba(0,0,0,0.04)); } /* Hide Google Translate's injected widget chrome — we use a cookie hack so the official UI never needs to be visible. */ #gtranslate-hidden { display: none !important; } .goog-te-banner-frame, .skiptranslate iframe.goog-te-banner-frame { display: none !important; } body { top: 0 !important; } /* GT pushes down — undo it. */ .goog-tooltip, .goog-tooltip:hover { display: none !important; } .goog-text-highlight { background: transparent !important; box-shadow: none !important; } /* ===== Hero ===== */ .hero { padding: 56px 0 64px; border-top: none; } .hero__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 64px; align-items: start; padding-top: 32px; padding-bottom: 72px; } .hero__copy { max-width: 560px; } .hero__h1 { font-size: clamp(48px, 5.8vw, 84px); line-height: 0.98; letter-spacing: -0.025em; margin: 22px 0 22px; } .hero__sub { font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 510px; margin-bottom: 32px; } .hero__ctas { display: flex; gap: 12px; margin-bottom: 38px; } .hero__trust { list-style: none; margin: 0; padding: 22px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 6px 22px; font-size: 13px; color: var(--ink-3); } .hero__trust li { white-space: nowrap; } .hero__trust strong { color: var(--ink); font-weight: 500; } /* Race board (hero right) */ .hero__race { padding: 22px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-lg); } .race__head { display: flex; justify-content: space-between; align-items: flex-start; } .race__title { font-size: 22px; margin-top: 4px; } .race__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; } .race__row { display: grid; grid-template-columns: 22px 28px 1fr 110px auto auto; align-items: center; gap: 12px; padding: 12px 4px; border-top: 1px solid var(--line); cursor: pointer; transition: background 160ms ease; } .race__row:hover { background: var(--surface); } .race__row.is-selected { background: var(--surface); } .race__rank { color: var(--ink-3); font-size: 12px; } .race__name .serif { font-size: 16px; line-height: 1.2; } .race__name .kicker { font-size: 9.5px; } .race__bar { width: 110px; height: 4px; background: var(--line); border-radius: 999px; overflow: hidden; } .race__bar-fill { height: 100%; border-radius: 999px; transition: width 600ms cubic-bezier(.2,.7,.3,1); } .race__value { font-size: 13.5px; font-weight: 500; padding: 2px 6px; border-radius: 4px; min-width: 86px; text-align: right; } .race__pct { font-size: 12px; min-width: 64px; text-align: right; } .race__foot { display: flex; justify-content: space-between; font-size: 12px; color: var(--ink-3); padding-top: 4px; border-top: 1px solid var(--line); padding: 12px 0 0; } /* Press strip */ .press { display: flex; align-items: center; gap: 32px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 22px 32px; } .press__label { white-space: nowrap; } .press__logos { display: flex; gap: 38px; flex-wrap: wrap; flex: 1; font-family: var(--serif); font-size: 17px; color: var(--ink-3); justify-content: space-around; font-style: italic; } /* ===== Section heads ===== */ .sec-head { max-width: 760px; margin-bottom: 56px; } .sec-head__h2 { font-size: clamp(36px, 4.2vw, 56px); line-height: 1.02; margin-top: 14px; } .sec-head__sub { font-size: 18px; margin-top: 18px; max-width: 560px; } .sec-head--center { margin-left: auto; margin-right: auto; text-align: center; } .sec-head--narrow { max-width: 560px; } .sec-head--row { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; max-width: none; } /* ===== Manager grid ===== */ .mgr-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; } .mgr-card { text-align: left; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); padding: 22px; display: flex; flex-direction: column; gap: 14px; cursor: pointer; transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease, background 200ms ease; } .mgr-card:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-md); } .mgr-card.is-selected { border-color: var(--ink); box-shadow: var(--shadow-lg); } .mgr-card__top { display: flex; justify-content: space-between; align-items: flex-start; } .mgr-card__mark { width: 44px; height: 44px; display: inline-flex; align-items: center; justify-content: center; border-radius: 12px; background: oklch(from currentColor l c h / 0.08); } .mgr-card__rank { font-size: 12px; color: var(--ink-3); } .mgr-card__head h3 { font-size: 28px; letter-spacing: -0.02em; } .mgr-card__head .kicker { margin-top: 4px; } .mgr-card__style { font-size: 15px; line-height: 1.5; } .mgr-card__perf { display: flex; justify-content: space-between; align-items: flex-end; margin-top: 4px; } .mgr-card__value { font-size: 26px; margin-top: 4px; letter-spacing: -0.02em; } .mgr-card__spark { text-align: right; } .mgr-card__pct { font-size: 13.5px; margin-top: 4px; font-weight: 500; } .mgr-card__stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px 12px; font-size: 12px; } .mgr-card__stats > div { display: flex; flex-direction: column; gap: 2px; } .mgr-card__stats dt { color: var(--ink-3); margin: 0; } .mgr-card__stats dd { color: var(--ink); margin: 0; font-weight: 500; font-size: 14px; } .mgr-card__quote { font-size: 17px; line-height: 1.35; margin: 0; padding: 14px 0 0; border-top: 1px solid var(--line); color: var(--ink-2); } .mgr-card__cta { display: flex; justify-content: space-between; align-items: center; margin-top: auto; padding-top: 8px; font-size: 14px; color: var(--ink); } .mgr-card.is-selected .mgr-card__cta { color: var(--accent); font-weight: 500; } .managers__foot { margin-top: 26px; font-size: 12px; font-family: var(--mono); } /* ===== How it works ===== */ .steps { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--r-lg); overflow: hidden; } .step { background: var(--bg-elev); padding: 28px 24px 32px; display: flex; flex-direction: column; gap: 12px; min-height: 280px; } .step__n { color: var(--ink-3); font-size: 12px; } .step__t { font-size: 22px; letter-spacing: -0.02em; line-height: 1.2; } .step__d { font-size: 15px; } .step__foot { margin-top: auto; font-size: 12px; color: var(--ink-3); padding-top: 12px; border-top: 1px solid var(--line); } /* ===== Race full ===== */ .race-full { background: var(--surface); } .board { padding: 8px 0 0; overflow: hidden; } .board__head { display: grid; grid-template-columns: 80px 1fr 150px 110px 240px 110px; align-items: center; gap: 16px; padding: 14px 24px; font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); border-bottom: 1px solid var(--line); } .board__row { display: grid; grid-template-columns: 80px 1fr 150px 110px 240px 110px; align-items: center; gap: 16px; padding: 22px 24px; border-bottom: 1px solid var(--line); transition: background 160ms ease; } .board__row:last-child { border-bottom: none; } .board__row:hover { background: var(--surface-2); } .board__rank { display: flex; align-items: center; gap: 10px; font-size: 18px; color: var(--ink-2); } .medal { display: inline-block; width: 12px; height: 12px; border-radius: 999px; } .medal--gold { background: var(--gold); } .medal--silver { background: var(--silver); } .medal--bronze { background: var(--bronze); } .medal--none { background: var(--line-2); } .board__mgr { display: flex; align-items: center; gap: 14px; } .board__mark { width: 40px; height: 40px; display: inline-flex; align-items: center; justify-content: center; border-radius: 10px; background: oklch(from currentColor l c h / 0.08); } .board__name { font-size: 20px; } .board__val { font-size: 19px; letter-spacing: -0.01em; } .board__eta { color: var(--ink-2); } .board__spark { overflow: hidden; } .race-full__foot { margin-top: 16px; font-size: 11px; } /* ===== Social proof ===== */ .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; margin-bottom: 56px; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 28px 0; } .stat__n { font-size: 46px; letter-spacing: -0.025em; line-height: 1; margin-bottom: 8px; } .stat__t { font-size: 14px; } .quotes { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } .quote { padding: 28px; display: flex; flex-direction: column; gap: 22px; } .quote__q { font-size: 22px; line-height: 1.35; margin: 0; letter-spacing: -0.01em; } .quote__cap { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: 14px; } .quote__avatar { width: 44px; height: 44px; border-radius: 999px; border: 1px solid var(--line); } .quote__n { font-size: 14px; font-weight: 500; } /* ===== Authority ===== */ .authority { background: var(--surface); } .auth-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .auth { padding: 26px; display: flex; flex-direction: column; gap: 10px; min-height: 200px; } .auth__kicker { color: var(--accent); } .auth__t { font-size: 22px; line-height: 1.2; letter-spacing: -0.015em; } .auth__d { font-size: 14px; line-height: 1.45; } /* ===== FAQ ===== */ .faq__wrap { display: grid; grid-template-columns: 320px 1fr; gap: 64px; align-items: flex-start; } .faq__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .faq__item { border-bottom: 1px solid var(--line); } .faq__btn { width: 100%; display: flex; justify-content: space-between; align-items: center; text-align: left; background: none; border: none; padding: 22px 0; cursor: pointer; } .faq__q { font-size: 22px; letter-spacing: -0.015em; } .faq__caret { font-family: var(--mono); font-size: 20px; color: var(--ink-3); } .faq__a { max-height: 0; overflow: hidden; font-size: 16px; line-height: 1.55; transition: max-height 300ms ease, padding 300ms ease; padding: 0 0 0; max-width: 700px; } .faq__item.is-open .faq__a { max-height: 240px; padding: 0 0 22px; } /* ===== Final CTA ===== */ .cta { background: var(--ink); color: var(--bg); border-top: none; } .cta__wrap { text-align: center; padding: 28px 0 12px; display: flex; flex-direction: column; align-items: center; } .cta__chip { background: oklch(from var(--bg) l c h / 0.08); border-color: oklch(from var(--bg) l c h / 0.18); color: oklch(from var(--bg) l c h / 0.85); } .cta__chip .dot { background: var(--accent); } .cta__h2 { font-size: clamp(44px, 5.5vw, 76px); line-height: 0.98; letter-spacing: -0.025em; margin: 24px 0 22px; } .cta__sub { font-size: 19px; color: oklch(from var(--bg) l c h / 0.7) !important; max-width: 640px; line-height: 1.5; } .cta__sub .mono { color: oklch(from var(--bg) l c h / 1); } .cta__buttons { display: flex; gap: 12px; margin: 36px 0 24px; } .cta .btn--accent { background: var(--accent); color: var(--accent-ink); } .cta .btn--ghost { border-color: oklch(from var(--bg) l c h / 0.25); color: var(--bg); } .cta .btn--ghost:hover { background: oklch(from var(--bg) l c h / 0.08); } .btn--lg { padding: 16px 22px; font-size: 16px; } .cta__micro { list-style: none; margin: 0; padding: 0; display: flex; gap: 24px; font-size: 12px; color: oklch(from var(--bg) l c h / 0.5); } .cta__micro li { display: block; } /* ===== Footer ===== */ .footer { background: var(--bg); border-top: 1px solid var(--line); padding: 64px 0 32px; } .footer__inner { display: grid; grid-template-columns: 1.2fr 2fr; gap: 64px; margin-bottom: 56px; } .footer__word { font-size: 36px; letter-spacing: -0.02em; } .footer__tag { margin-top: 8px; max-width: 280px; font-size: 14px; } .footer__cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; } .footer__cols ul { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 14.5px; color: var(--ink-2); } .footer__legal { border-top: 1px solid var(--line); padding-top: 24px; font-size: 11px; max-width: 880px; line-height: 1.55; } /* ===== Brand logo images ===== */ .logo-chip { display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex-shrink: 0; } .logo-chip--lg { width: 56px; height: 56px; border-radius: 14px; } .logo-chip--md { width: 44px; height: 44px; } .logo-img { display: block; object-fit: contain; } .logo-img--xs { width: 16px; height: 16px; } .logo-img--sm { width: 22px; height: 22px; } .logo-img--md { width: 26px; height: 26px; } .logo-img--lg { width: 32px; height: 32px; } /* Invert mono brand marks in dark mode so they read on the dark surface */ [data-theme="dark"] .logo-img { filter: invert(1) hue-rotate(180deg) brightness(1.05); } /* Override card defaults so the logo lives inside the chip cleanly */ .mgr-card__mark { width: 56px; height: 56px; background: var(--surface); border: 1px solid var(--line); border-radius: 14px; } .board__mark { background: var(--surface); border: 1px solid var(--line); } .race__mark { width: 28px; height: 28px; background: var(--surface); border: 1px solid var(--line); border-radius: 8px; } .quote__mark { width: 36px; height: 36px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; } /* ===== Hero refined ===== */ .hero { position: relative; /* `clip` instead of `hidden` so it still contains the rain/gradient backgrounds, but doesn't break `position: sticky` on .hero__viz. */ overflow: clip; } /* Matrix-style numbers rain — sits BEHIND content */ .hero__rain { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 1; /* above ::before/::after gradients, below all content */ opacity: 0.45; } [data-theme="dark"] .hero__rain { opacity: 0.4; } /* Subtle background — radial gradient + soft grid */ .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(ellipse 80% 50% at 80% 0%, oklch(from var(--accent) l c h / 0.08), transparent 60%), radial-gradient(ellipse 60% 50% at 0% 30%, oklch(from var(--accent) l c h / 0.05), transparent 60%); } .hero::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, oklch(from var(--ink) l c h / 0.025) 1px, transparent 1px), linear-gradient(to bottom, oklch(from var(--ink) l c h / 0.025) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black, transparent 70%); -webkit-mask-image: radial-gradient(ellipse 60% 50% at 50% 0%, black, transparent 70%); } .hero > * { position: relative; z-index: 2; } .hero > .hero__rain { z-index: 1; } .hero__eyebrow { margin-bottom: 24px; display: flex; flex-direction: column; gap: 18px; align-items: flex-start; } /* ===== Floating AI logo orbs ===== */ .hero__ai-row { display: flex; gap: 12px; padding: 10px 2px 14px; margin: 4px 0 18px; } .ai-orb { position: relative; width: 52px; height: 52px; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 1px 0 oklch(1 0 0 / 0.6) inset, 0 6px 16px oklch(0 0 0 / 0.06); color: var(--ink); cursor: pointer; animation: orb-float 5.4s ease-in-out infinite; transition: transform 220ms cubic-bezier(.2,.7,.3,1), box-shadow 220ms ease, border-color 220ms ease; will-change: transform; } .ai-orb:nth-child(1) { animation-delay: 0.0s; } .ai-orb:nth-child(2) { animation-delay: 0.55s; } .ai-orb:nth-child(3) { animation-delay: 1.1s; } .ai-orb:nth-child(4) { animation-delay: 1.65s; } .ai-orb img, .ai-orb svg { display: block; width: 24px; height: 24px; object-fit: contain; } .ai-orb:hover { transform: translateY(-6px) scale(1.06); border-color: var(--ink-2); box-shadow: 0 1px 0 oklch(1 0 0 / 0.7) inset, 0 16px 32px oklch(0 0 0 / 0.16); animation-play-state: paused; z-index: 2; } .ai-orb__name { position: absolute; bottom: -28px; left: 50%; transform: translateX(-50%) translateY(-4px); font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); background: var(--ink); color: var(--bg); padding: 4px 8px; border-radius: 999px; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 180ms ease, transform 220ms cubic-bezier(.2,.7,.3,1); } .ai-orb:hover .ai-orb__name { opacity: 1; transform: translateX(-50%) translateY(0); } /* Subtle bobbing — staggered per orb */ @keyframes orb-float { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-6px) rotate(-1.2deg); } } /* Dark-mode adjustments for orbs (logo inversion already handled globally) */ [data-theme="dark"] .ai-orb { background: var(--bg-elev); box-shadow: 0 1px 0 oklch(1 0 0 / 0.04) inset, 0 6px 16px oklch(0 0 0 / 0.3); } .hero__h1 em { font-style: italic; color: var(--accent); font-weight: 400; } .hero__viz { display: flex; flex-direction: column; gap: 14px; position: sticky; top: 96px; align-self: start; /* Aligns the top of the viz with the top of the H1 (skips past the eyebrow chip). */ margin-top: 68px; padding-bottom: 1rem; } @media (min-width: 1181px) { .hero__viz { padding-bottom: 1rem !important; } } /* ===== Trust strip — icon chips ===== */ .hero__trust--icons { list-style: none; margin: 0; padding: 24px 0 0; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: 13px; color: var(--ink-2); } .hero__trust--icons li { display: inline-flex; align-items: center; gap: 7px; } .hero__trust--icons svg { color: var(--accent); flex-shrink: 0; } .hero__trust--icons strong { color: var(--ink); font-weight: 500; } /* Trust strip sits OUTSIDE .hero__grid so the grid's bottom equals the bottom of .hero__copy, which is the boundary .hero__viz's sticky behavior uses. */ .hero__trust--full { margin-top: 16px; } /* ===== Deposit calculator ===== */ .hero__calc { margin: 28px 0 0rem; padding: 22px 22px 24px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); display: flex; flex-direction: column; gap: 14px; width: 100%; max-width: none; } .calc__head { display: flex; justify-content: space-between; align-items: baseline; } .calc__amount { font-size: 32px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink); } .calc__slider-wrap { display: flex; flex-direction: column; gap: 6px; } .calc__slider { -webkit-appearance: none; appearance: none; width: 100%; height: 6px; border-radius: 999px; background: linear-gradient(to right, var(--accent) 0%, var(--accent) var(--calc-fill, 0%), var(--line) var(--calc-fill, 0%), var(--line) 100%); outline: none; cursor: grab; } .calc__slider:active { cursor: grabbing; } .calc__slider::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 22px; height: 22px; border-radius: 999px; background: var(--bg-elev); border: 2px solid var(--accent); box-shadow: 0 2px 8px oklch(0 0 0 / 0.18); cursor: grab; transition: transform 120ms ease; } .calc__slider::-webkit-slider-thumb:hover { transform: scale(1.1); } .calc__slider::-moz-range-thumb { width: 22px; height: 22px; border-radius: 999px; background: var(--bg-elev); border: 2px solid var(--accent); box-shadow: 0 2px 8px oklch(0 0 0 / 0.18); cursor: grab; } .calc__rail { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-3); } .calc__proj { font-size: 17px; line-height: 1.45; letter-spacing: -0.005em; color: var(--ink-2); margin: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px; } .calc__proj .serif { color: var(--ink); font-size: 18px; } .calc__proj .mono { color: var(--ink); font-weight: 500; } .calc__years { color: var(--accent) !important; font-style: italic; font-size: 19px !important; } .calc__mgr-chip { width: 22px; height: 22px; border-radius: 6px; background: var(--surface); border: 1px solid var(--line); display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; align-self: center; } /* Manager picker (dropdown) */ .calc__mgr-btn { position: relative; display: inline-flex; align-items: center; gap: 8px; padding: 4px 10px 4px 4px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; font-family: var(--serif); font-size: 18px; letter-spacing: -0.01em; transition: border-color 160ms ease, background 160ms ease, transform 120ms ease; } .calc__mgr-btn:hover { border-color: var(--ink-2); background: var(--bg-elev); } .calc__mgr-btn[aria-expanded="true"] { border-color: var(--ink); background: var(--bg-elev); } .calc__mgr-caret { font-size: 11px; color: var(--ink-3); font-family: var(--sans); margin-left: 2px; } .calc__mgr-menu { position: absolute; list-style: none; margin: 0; padding: 6px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-lg); display: none; flex-direction: column; gap: 2px; z-index: 10; min-width: 220px; } .calc__mgr-menu.is-open { display: flex; animation: dd-in 180ms cubic-bezier(.2,.7,.3,1); } @keyframes dd-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } } .calc__mgr-item { display: grid; grid-template-columns: 28px 1fr auto; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; font-family: var(--sans); font-size: 13px; color: var(--ink); transition: background 120ms ease; } .calc__mgr-item:hover { background: var(--surface); } .calc__mgr-item.is-on { background: var(--surface); } .calc__mgr-item .logo-chip { width: 28px; height: 28px; border-radius: 8px; } .calc__mgr-item__name { display: flex; flex-direction: column; gap: 2px; font-family: var(--serif); font-size: 16px; letter-spacing: -0.01em; } .calc__mgr-item__persona { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .calc__mgr-item__pct { font-family: var(--mono); font-size: 12px; font-weight: 500; } .calc__mgr-item__check { width: 14px; height: 14px; color: var(--accent); opacity: 0; } .calc__mgr-item.is-on .calc__mgr-item__check { opacity: 1; } /* ===== Leader card (hero right) ===== */ .leader-card { padding: 18px 20px 20px; background: var(--ink); color: var(--bg); border-radius: var(--r-lg); box-shadow: var(--shadow-lg); border: 1px solid var(--ink); display: flex; flex-direction: column; gap: 16px; position: relative; overflow: hidden; } .leader-card::before { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse 80% 60% at 90% 0%, oklch(from var(--accent) l c h / 0.35), transparent 60%); pointer-events: none; } .leader-card > * { position: relative; z-index: 1; } .leader-card .kicker { color: oklch(from var(--bg) l c h / 0.65); } .leader-card__bar { display: flex; justify-content: space-between; align-items: center; } .leader-card__bar .chip { background: oklch(from var(--bg) l c h / 0.1); border-color: oklch(from var(--bg) l c h / 0.2); color: oklch(from var(--bg) l c h / 0.95); font-weight: 500; } .leader-card__hero { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 16px; } .leader-card__hero .logo-chip { background: oklch(from var(--bg) l c h / 0.1); border-color: oklch(from var(--bg) l c h / 0.18); } .leader-card__name { font-size: 32px; letter-spacing: -0.02em; line-height: 1; color: var(--bg); } .leader-card__pct { font-size: 28px; font-weight: 500; letter-spacing: -0.015em; } .leader-card__pct.pos { color: oklch(0.85 0.16 150); } .leader-card__pct.neg { color: oklch(0.85 0.17 25); } .leader-card__stats { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 14px; padding-top: 14px; border-top: 1px solid oklch(from var(--bg) l c h / 0.12); } .leader-card__val { font-size: 18px; letter-spacing: -0.01em; margin-top: 4px; color: var(--bg); } .leader-card__val--text { font-family: var(--sans); font-size: 13px; line-height: 1.35; color: oklch(from var(--bg) l c h / 0.85); font-weight: 400; } [data-theme="dark"] .leader-card .logo-img { /* page-level invert already applied; cancel local inside leader card so dark logos stay dark on the dark surface */ } /* Invert mono brand marks inside the dark leader-card so they read on it */ .leader-card .logo-img { filter: invert(1) hue-rotate(180deg) brightness(1.05); } [data-theme="dark"] .leader-card .logo-img { filter: none; } /* Pulse chip */ .chip--pulse .dot { animation: pulse 1.6s ease-in-out infinite; } /* ===== Big multi-line chart ===== */ .bigchart { padding: 20px 22px 16px; display: flex; flex-direction: column; gap: 14px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); } .bigchart--dark { background: oklch(0.13 0.015 250); border-color: oklch(0.25 0.02 250); color: oklch(0.96 0.005 80); box-shadow: 0 24px 64px oklch(0 0 0 / 0.35); margin-bottom: 28px; padding: 28px; } .bigchart__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .bigchart__title { font-size: 26px; margin-top: 4px; letter-spacing: -0.02em; } .bigchart__plot { width: 100%; min-height: 240px; } .bigchart__plot--xl { min-height: 360px; } .bigchart__legend { display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; } .legend-chip { display: inline-flex; align-items: center; gap: 8px; padding: 5px 10px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 12px; } .legend-chip__dot { width: 8px; height: 8px; border-radius: 999px; display: inline-block; } .legend-chip__name { font-family: var(--serif); letter-spacing: -0.01em; } .legend-chip__pct { font-size: 11px; font-weight: 500; } .bigchart__legend--invert .legend-chip { background: oklch(1 0 0 / 0.05); border-color: oklch(1 0 0 / 0.12); color: oklch(1 0 0 / 0.92); } /* Compact hero race list (no progress bar — the chart shows progress) */ .hero__race { padding: 6px 16px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-md); } .race__list--compact { padding: 0; margin: 0; list-style: none; } .race__row--compact { display: grid; grid-template-columns: 24px 26px 1fr auto auto; align-items: center; gap: 14px; padding: 11px 4px; border-top: 1px solid var(--line); cursor: pointer; transition: background 140ms ease; } .race__row--compact:first-child { border-top: none; } .race__row--compact:hover { background: var(--surface); } .race__row--compact.is-selected { background: var(--surface); } .race__row--compact .race__rank { font-size: 11px; color: var(--ink-3); } .race__row--compact .race__name .serif { font-size: 16px; } .race__row--compact .race__value { font-size: 14px; font-weight: 500; min-width: 78px; text-align: right; } .race__row--compact .race__pct { font-size: 12px; min-width: 62px; text-align: right; } /* ===== Activity feed (dark navy — Bloomberg-style) ===== */ .activity { background: oklch(0.19 0.075 252); color: oklch(0.96 0.005 80); padding: 0 0 96px; border-top: none; } .activity .kicker { color: oklch(1 0 0 / 0.55); } .fg-2-inv { color: oklch(1 0 0 / 0.7) !important; } .muted-inv { color: oklch(1 0 0 / 0.5); } .sec-head--invert .sec-head__h2 { color: oklch(0.97 0.005 80); } .sec-head--invert .kicker { color: oklch(1 0 0 / 0.55); } .chip--invert { background: oklch(1 0 0 / 0.06); border-color: oklch(1 0 0 / 0.14); color: oklch(1 0 0 / 0.85); } .activity__marquee { overflow: hidden; border-bottom: 1px solid oklch(1 0 0 / 0.1); border-top: 1px solid oklch(1 0 0 / 0.1); margin-bottom: 80px; background: oklch(0.14 0.08 252); } .activity__track { display: flex; gap: 22px; white-space: nowrap; padding: 14px 0; animation: marquee 60s linear infinite; width: max-content; font-family: var(--mono); font-size: 12.5px; letter-spacing: 0.04em; color: oklch(1 0 0 / 0.75); } .mq-seg b { color: oklch(0.97 0.005 80); font-weight: 500; } .mq-seg .pos { color: oklch(0.78 0.15 150); } .mq-seg .neg { color: oklch(0.78 0.16 25); } .mq-sep { color: oklch(1 0 0 / 0.25); } .activity__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: oklch(1 0 0 / 0.08); border: 1px solid oklch(1 0 0 / 0.08); border-radius: var(--r-lg); overflow: hidden; } .activity-col { background: oklch(0.23 0.085 252); padding: 20px 20px 16px; display: flex; flex-direction: column; gap: 14px; } .activity-col__head { display: flex; gap: 12px; align-items: center; padding-bottom: 12px; border-bottom: 1px solid oklch(1 0 0 / 0.08); } .activity-col__head .logo-chip { background: oklch(1 0 0 / 0.08); border-color: oklch(1 0 0 / 0.1); } .activity-col__name { font-size: 18px; } .activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 1px; } .activity-row { display: grid; grid-template-columns: 56px 1fr 52px 58px; align-items: center; gap: 10px; padding: 9px 0; font-size: 12px; border-bottom: 1px dashed oklch(1 0 0 / 0.06); } .activity-row__t { text-align: right; } .activity-row > .mono:last-child { text-align: right; } .activity-row:last-child { border-bottom: none; } .tag { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.06em; padding: 3px 6px; border-radius: 4px; text-align: center; background: oklch(1 0 0 / 0.08); color: oklch(1 0 0 / 0.85); } .tag--buy { background: oklch(0.5 0.12 150 / 0.25); color: oklch(0.85 0.15 150); } .tag--sell { background: oklch(0.55 0.16 25 / 0.25); color: oklch(0.85 0.16 25); } .tag--hold { background: oklch(1 0 0 / 0.1); color: oklch(1 0 0 / 0.6); } .tag--pairs { background: oklch(0.5 0.13 290 / 0.28); color: oklch(0.84 0.14 290); } .tag--rebal { background: oklch(0.55 0.12 60 / 0.28); color: oklch(0.85 0.13 60); } .activity-row__sym { font-weight: 500; color: oklch(0.97 0.005 80); } .activity-row__sz { color: oklch(1 0 0 / 0.55); font-size: 11px; } .activity-row__t { color: oklch(1 0 0 / 0.4); font-size: 11px; text-align: right; } .activity-col__foot { display: flex; justify-content: space-between; font-size: 12px; padding-top: 10px; border-top: 1px solid oklch(1 0 0 / 0.08); letter-spacing: 0.04em; text-transform: uppercase; font-size: 10px; } .activity-col__foot .pos { color: oklch(0.78 0.15 150); } .activity-col__foot .neg { color: oklch(0.78 0.16 25); } /* ===== Race section dark ===== */ .race-full { background: oklch(0.12 0.015 250); color: oklch(0.96 0.005 80); border-top: none; } .race-full .kicker { color: oklch(1 0 0 / 0.55); } .race-full .sec-head__sub { color: oklch(1 0 0 / 0.7); } .leader-name { font-style: italic; color: var(--accent); font-weight: 400; } .board--dark { background: oklch(0.15 0.018 250); border-color: oklch(1 0 0 / 0.08); } .board--dark .board__head { color: oklch(1 0 0 / 0.5); border-bottom-color: oklch(1 0 0 / 0.08); } .board--dark .board__row { border-bottom-color: oklch(1 0 0 / 0.06); } .board--dark .board__row:hover { background: oklch(1 0 0 / 0.04); } .board--dark .board__rank { color: oklch(1 0 0 / 0.6); } .board--dark .board__mark { background: oklch(1 0 0 / 0.07); border-color: oklch(1 0 0 / 0.1); } .board--dark .board__name { color: oklch(0.97 0.005 80); } .board--dark .board__eta { color: oklch(1 0 0 / 0.6); } .board--dark .pos { color: oklch(0.78 0.15 150); } .board--dark .neg { color: oklch(0.78 0.16 25); } .board--dark .medal--none { background: oklch(1 0 0 / 0.18); } /* Force logo invert inside dark sections regardless of page theme */ .activity .logo-img, .race-full .logo-img { filter: invert(1) hue-rotate(180deg) brightness(1.05); } [data-theme="dark"] .activity .logo-img, [data-theme="dark"] .race-full .logo-img { /* In dark theme, page-level invert already applied — cancel local one */ filter: none; } /* ===== Section rhythm ===== */ .managers { background: var(--bg); } .how { background: var(--surface); } .proof { background: var(--bg); } /* authority already uses var(--surface) */ .faq { background: var(--bg); } .memo { background: var(--bg); } .inbox { background: var(--surface); } /* ===== Inbox preview (dedicated section) ===== */ .inbox__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 80px; align-items: center; } .inbox__copy { display: flex; flex-direction: column; gap: 22px; } .inbox__copy .sec-head__h2 { margin-top: 6px; } .inbox__copy .sec-head__sub { margin-top: 0; max-width: 520px; } .inbox__bullets { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 14px; } .inbox__bullets li { display: grid; grid-template-columns: 28px 1fr; align-items: center; gap: 12px; font-size: 15.5px; color: var(--ink-2); } .inbox__bullet-icon { width: 28px; height: 28px; border-radius: 999px; background: var(--accent-soft); color: var(--accent); display: inline-flex; align-items: center; justify-content: center; } .inbox__bullets strong { color: var(--ink); font-weight: 500; } .inbox__visual { display: flex; justify-content: center; position: relative; } .inbox__visual::before { content: ""; position: absolute; inset: -10% -5%; background: radial-gradient(ellipse 60% 50% at 50% 50%, oklch(from var(--accent) l c h / 0.12), transparent 70%); pointer-events: none; z-index: 0; } /* Section head tweaks for memo (now single-column) */ .sec-head--memo { margin-bottom: 28px; max-width: 720px; } @media (max-width: 1180px) { .inbox__grid { grid-template-columns: 1fr; gap: 56px; } .inbox__visual { order: -1; max-width: 480px; margin: 0 auto; } } @media (max-width: 600px) { .inbox__grid { gap: 40px; } } .research { background: var(--surface); } /* ===== AI Research section ===== */ .research__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: 80px; align-items: start; } .research__copy { display: flex; flex-direction: column; gap: 22px; } .research__copy .sec-head__h2 { margin-top: 6px; } .research__copy .sec-head__sub { margin-top: 0; max-width: 520px; } .research-steps { list-style: none; margin: 26px 0 0; padding: 0; display: flex; flex-direction: column; gap: 0; } .research-step { display: grid; grid-template-columns: 56px 1fr; gap: 22px; padding: 24px 0; border-top: 1px solid var(--line); position: relative; } .research-step:first-child { border-top: none; } .research-step__num { font-size: 12px; color: var(--ink-3); letter-spacing: 0.04em; padding-top: 6px; } .research-step__head { display: flex; align-items: center; gap: 12px; margin-bottom: 8px; flex-wrap: wrap; } .research-step h3 { font-size: 22px; letter-spacing: -0.015em; line-height: 1.2; } .research-step p { font-size: 15px; line-height: 1.55; max-width: 560px; } .chip--mini { padding: 3px 8px 3px 8px; font-size: 10px; letter-spacing: 0.08em; } /* Right column: AI control-room mockup */ .research__visual { position: sticky; top: 96px; align-self: start; } .research-mock { position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: auto auto auto; grid-template-areas: "news chart" "research chart" "decision decision"; gap: 14px; padding: 22px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 28px; box-shadow: var(--shadow-lg); min-height: 480px; } .research-mock::before { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: 28px; background: radial-gradient(ellipse 60% 50% at 80% 100%, oklch(from var(--accent) l c h / 0.12), transparent 70%); } .rmock-card { background: var(--bg); border: 1px solid var(--line); border-radius: 14px; padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; position: relative; z-index: 1; box-shadow: 0 1px 0 oklch(from var(--bg-elev) l c h / 0.6) inset, var(--shadow-sm); } .rmock-card__head { display: flex; justify-content: space-between; align-items: center; gap: 8px; } .rmock-news { grid-area: news; } .rmock-chart { grid-area: chart; } .rmock-research { grid-area: research; } .rmock-decision { grid-area: decision; background: var(--ink); color: var(--bg); border-color: var(--ink); } .rmock-decision .kicker, .rmock-decision .rmock-decision__label { color: oklch(from var(--bg) l c h / 0.6); } .rmock-decision .chip--mini { background: oklch(from var(--bg) l c h / 0.1); border-color: oklch(from var(--bg) l c h / 0.18); color: oklch(from var(--bg) l c h / 0.95); } .rmock-news__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; } .rmock-news__list li { display: grid; grid-template-columns: 58px 1fr; gap: 8px; font-size: 11.5px; line-height: 1.4; color: var(--ink-2); } .rmock-news__list li:first-child { color: var(--ink); font-weight: 500; } .rmock-time { color: var(--ink-3); font-size: 10.5px; } .rmock-chart__svg { width: 100%; height: 90px; display: block; } .rmock-sym { font-size: 17px; letter-spacing: -0.01em; } .rmock-sym .mono { font-size: 12px; margin-left: 4px; } .rmock-chart__indicators { display: flex; flex-wrap: wrap; gap: 4px 10px; font-size: 10.5px; color: var(--ink-3); border-top: 1px dashed var(--line); padding-top: 8px; } .rmock-research__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; } .rmock-research__list li { display: grid; grid-template-columns: 36px 1fr; align-items: start; gap: 10px; font-size: 11.5px; line-height: 1.4; } .rmock-bank { background: var(--ink); color: var(--bg); font-family: var(--mono); font-size: 9px; letter-spacing: 0.08em; font-weight: 500; border-radius: 4px; padding: 4px 0; text-align: center; } .rmock-snip { color: var(--ink-2); } .rmock-decision__body { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 14px; } .rmock-decision__action { font-size: 26px; font-weight: 500; letter-spacing: 0.04em; padding: 10px 16px; border-radius: 10px; background: var(--accent); color: var(--accent-ink); } .rmock-decision__sym .serif { font-size: 24px; letter-spacing: -0.015em; color: var(--bg); } .rmock-decision__sym .kicker { margin-top: 2px; } .rmock-lines { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } @media (max-width: 1180px) { .research__grid { grid-template-columns: 1fr; gap: 48px; } .research__visual { position: static; } } @media (max-width: 600px) { .research-mock { grid-template-columns: 1fr; grid-template-areas: "news" "chart" "research" "decision"; padding: 18px; min-height: 0; } .research-step { grid-template-columns: 44px 1fr; gap: 14px; } .research-step h3 { font-size: 19px; } } .memo .wrap { max-width: 1320px; } /* Section head tweaks inside the memo */ .sec-head--memo { margin-bottom: 28px; max-width: 720px; } .sec-head--memo .sec-head__h2 { font-size: clamp(30px, 3.6vw, 44px); } /* Mail icon / envelope visual (used in inbox preview section) */ .memo-mailicon { position: relative; width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 22px; z-index: 1; } .memo-mailicon__badge { position: absolute; top: -16px; right: 8px; display: inline-flex; align-items: center; gap: 6px; background: var(--ink); color: var(--bg); padding: 6px 12px; border-radius: 999px; font-size: 10px; letter-spacing: 0.12em; z-index: 2; box-shadow: 0 4px 12px oklch(0 0 0 / 0.12); animation: float-y 4.5s ease-in-out infinite; } .memo-mailicon__badge-dot { width: 6px; height: 6px; border-radius: 999px; background: var(--accent); box-shadow: 0 0 0 0 var(--accent); animation: pulse 1.6s ease-in-out infinite; } @keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .memo-envelope { width: 100%; height: auto; filter: drop-shadow(0 24px 36px oklch(0 0 0 / 0.12)) drop-shadow(0 2px 4px oklch(0 0 0 / 0.06)); animation: float-y 6s ease-in-out infinite; } .memo-mailicon__stamp { display: flex; flex-direction: column; gap: 8px; padding: 16px 18px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: 14px; } .memo-mailicon__sender { display: flex; align-items: center; gap: 12px; font-size: 22px; letter-spacing: -0.015em; } .memo-mailicon__meta { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; font-size: 12px; background: var(--bg); border: 1px solid var(--line); border-radius: 12px; padding: 14px 16px; } .memo-mailicon__meta li { display: grid; grid-template-columns: 72px 1fr; gap: 10px; align-items: baseline; padding-bottom: 8px; border-bottom: 1px dashed var(--line); } .memo-mailicon__meta li:last-child { padding-bottom: 0; border-bottom: none; } .memo-mailicon__meta .muted { color: var(--ink-3); letter-spacing: 0.04em; } .memo-mailicon__meta li span:nth-child(2) { color: var(--ink); font-weight: 500; font-variant-numeric: tabular-nums; } /* ===== Weekly memo ===== */ .memo-tabs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 22px; } .memo-tab { appearance: none; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-md); padding: 14px 16px; display: grid; grid-template-columns: 36px 1fr; grid-template-rows: auto auto; grid-template-areas: "logo name" "logo persona"; align-items: center; gap: 2px 14px; text-align: left; cursor: pointer; transition: border-color 180ms ease, transform 180ms ease, background 180ms ease, box-shadow 180ms ease; } .memo-tab:hover { border-color: var(--line-2); transform: translateY(-2px); box-shadow: var(--shadow-md); } .memo-tab.is-on { border-color: var(--ink); background: var(--bg-elev); box-shadow: var(--shadow-md); } .memo-tab .logo-chip { grid-area: logo; width: 36px; height: 36px; border-radius: 10px; } .memo-tab__name { grid-area: name; font-size: 17px; letter-spacing: -0.01em; line-height: 1.1; } .memo-tab__persona { grid-area: persona; font-size: 10px; line-height: 1.1; } .memo-card { padding: 36px 40px 40px; background: var(--bg-elev); border: 1px solid var(--line); border-radius: var(--r-xl); box-shadow: var(--shadow-lg); position: relative; overflow: hidden; } .memo-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--accent); } .memo-card__head { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 16px; padding-bottom: 22px; border-bottom: 1px solid var(--line); margin-bottom: 24px; } .memo-card__from { display: flex; align-items: center; gap: 14px; } .memo-card__avatar { width: 44px !important; height: 44px !important; border-radius: 12px !important; } .memo-card__name { font-size: 22px; letter-spacing: -0.015em; margin-top: 2px; } .memo-card__meta { text-align: right; font-size: 11px; } .memo-card__subj { font-size: clamp(28px, 3.4vw, 40px); letter-spacing: -0.02em; line-height: 1.1; margin-bottom: 32px; max-width: 720px; } .memo-card__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; margin-bottom: 28px; } .memo-col { display: flex; flex-direction: column; gap: 16px; } .memo-col__label { font-size: 11px; color: var(--ink); letter-spacing: 0.12em; padding-bottom: 12px; border-bottom: 1px dashed var(--line); } .memo-col ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 16px; } .memo-col li { display: grid; grid-template-columns: auto 1fr; gap: 12px; align-items: start; font-size: 15px; line-height: 1.55; color: var(--ink-2); } .memo-tag { font-size: 9px; font-weight: 500; letter-spacing: 0.08em; padding: 4px 7px; border-radius: 4px; text-transform: uppercase; white-space: nowrap; margin-top: 3px; } .memo-tag--past { background: var(--surface); color: var(--ink-3); border: 1px solid var(--line); } .memo-tag--next { border: 1px solid currentColor; background: transparent; } .memo-card__quote { font-size: 22px; line-height: 1.4; letter-spacing: -0.01em; padding: 22px 0 0; border-top: 1px solid var(--line); color: var(--ink); margin: 0; font-style: italic; } .memo-card__sig { margin-top: 12px; font-size: 12px; font-style: normal; color: var(--ink-3); letter-spacing: 0.04em; } .memo-cta { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 18px; margin-top: 28px; padding-top: 28px; border-top: 1px solid var(--line); } .memo-cta p { font-size: 15px; max-width: 380px; } .memo-form { display: flex; gap: 8px; flex: 0 0 auto; } .memo-form input { padding: 12px 16px; border: 1px solid var(--line); border-radius: 999px; background: var(--bg); color: var(--ink); font-family: var(--mono); font-size: 13.5px; width: 240px; outline: none; transition: border-color 160ms ease; } .memo-form input:focus { border-color: var(--ink); } .memo-form button.is-done { background: var(--pos); color: var(--accent-ink); } .sec-head__h2 em { font-style: italic; color: var(--accent); font-weight: 400; } .tw-swatches { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .tw-sw { display: flex; align-items: center; gap: 10px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--line); border-radius: 10px; font-size: 13px; color: var(--ink); cursor: pointer; transition: border-color 160ms ease; } .tw-sw:hover { border-color: var(--line-2); } .tw-sw.is-on { border-color: var(--ink); background: var(--bg-elev); } .tw-sw__chip { width: 16px; height: 16px; border-radius: 999px; border: 1px solid oklch(0 0 0 / 0.15); } /* ============================================================ Responsive ============================================================ */ /* --- Tablet --- */ @media (max-width: 1180px) { :root { --gutter: 32px; } section { padding: 80px 0; } .hero { padding: 40px 0 56px; } .hero__grid { grid-template-columns: 1fr; gap: 56px; padding: 24px 0 40px; justify-items: center; text-align: center; } .hero__copy { max-width: 720px; align-items: center; text-align: center; } .hero__eyebrow { align-items: center; } .hero__ai-row { justify-content: center; } .hero__ctas { justify-content: center; flex-wrap: wrap; } .hero__trust--icons { justify-content: center; } .hero__h1 { font-size: clamp(44px, 8vw, 72px); } .hero__calc { max-width: none; text-align: left; } .hero__viz { width: 100%; max-width: 720px; position: static; padding: 20px; margin-top: 0; } /* Nav compacts earlier so links don't wrap */ .nav__inner { gap: 18px; } .nav__links { gap: 18px; font-size: 13.5px; } .nav__links a { white-space: nowrap; } .nav__beta { display: none; } .steps { grid-template-columns: repeat(2, 1fr); } .stats { grid-template-columns: repeat(2, 1fr); } .auth-grid { grid-template-columns: repeat(2, 1fr); } .activity__grid { grid-template-columns: repeat(2, 1fr); } .footer__inner { grid-template-columns: 1fr; gap: 32px; } .board__head, .board__row { grid-template-columns: 56px 1.2fr 120px 90px 180px 90px; gap: 12px; padding-left: 18px; padding-right: 18px; } .board__spark svg { width: 100%; } } /* --- Small tablet / large phone --- */ @media (max-width: 960px) { section { padding: 64px 0; } .hero { padding: 32px 0 48px; } :root { --gutter: 28px; } .nav__inner { gap: 16px; height: 60px; } .nav__links { display: none; } .nav__cta { margin-left: auto; } .sec-head__h2 { font-size: clamp(30px, 5.5vw, 44px); } .sec-head { margin-bottom: 40px; } .sec-head--row { flex-direction: column; align-items: flex-start; gap: 16px; } .mgr-grid { grid-template-columns: repeat(2, 1fr); gap: 14px; } .quotes { grid-template-columns: 1fr; } .faq__wrap { grid-template-columns: 1fr; gap: 24px; } .press { flex-direction: column; align-items: flex-start; gap: 12px; padding: 20px 0; } .press__logos { gap: 20px 26px; font-size: 15px; justify-content: flex-start; } /* Leaderboard collapses to stacked cards */ .board__head { display: none; } .board__row { grid-template-columns: 40px 1fr auto; grid-template-areas: "rank mgr value" "rank mgr pct" "spark spark spark" "eta eta eta"; gap: 6px 12px; padding: 18px 16px; } .board__rank { grid-area: rank; align-self: start; } .board__mgr { grid-area: mgr; } .board__val { grid-area: value; text-align: right; } .board__row > .mono:nth-of-type(2) { grid-area: pct; text-align: right; font-size: 13px; } .board__spark { grid-area: spark; margin-top: 8px; } .board__eta { grid-area: eta; text-align: left; font-size: 12px; color: var(--ink-3); padding-top: 4px; border-top: 1px dashed var(--line); } .board__spark svg { width: 100% !important; height: 36px !important; } /* Leader card stack on mobile */ .leader-card__stats { grid-template-columns: 1fr 1fr; } .leader-card__stats > div:last-child { grid-column: 1 / -1; } .leader-card__hero { grid-template-columns: auto 1fr; } .leader-card__pct { grid-column: 1 / -1; font-size: 24px; text-align: right; } /* Activity feed */ .activity__grid { grid-template-columns: 1fr; } .activity-row { grid-template-columns: 52px 1fr 50px 56px; gap: 10px; } /* CTAs stack */ .hero__ctas { flex-direction: column; align-items: stretch; margin-left: 1rem; margin-right: 1rem;} .hero__ctas .btn { justify-content: center; } .cta__buttons { flex-direction: column; width: 100%; max-width: 360px; } .cta__buttons .btn { justify-content: center; } .cta__micro { flex-direction: column; gap: 4px; align-items: center; } /* AI orb row scales down */ .ai-orb { width: 46px; height: 46px; border-radius: 14px; } .ai-orb img, .ai-orb svg { width: 20px; height: 20px; } /* Hero calc compacts */ .calc__amount { font-size: 26px; } .calc__proj { font-size: 15px; line-height: 1.5; } .calc__proj .serif { font-size: 16px; } .calc__years { font-size: 17px !important; } /* Big charts shrink */ .bigchart { padding: 18px 18px 14px; } .bigchart--dark { padding: 22px 18px; margin-bottom: 22px; } .bigchart__plot--xl { min-height: 280px; } /* Manager card density */ .mgr-card { padding: 18px; } /* Memo collapses on tablet */ .memo-tabs { grid-template-columns: repeat(2, 1fr); gap: 10px; } .memo-card { padding: 28px 24px 30px; } .memo-card__cols { grid-template-columns: 1fr; gap: 28px; } .memo-card__subj { font-size: clamp(24px, 5vw, 32px); } .memo-cta { flex-direction: column; align-items: flex-start; } .memo-form { width: 100%; } .memo-form input { flex: 1; width: auto; } /* Step cards */ .step { padding: 24px 20px 28px; min-height: 0; } .step__t { font-size: 20px; } /* Stats */ .stat__n { font-size: 38px; } } /* --- Phone --- */ @media (max-width: 600px) { :root { --gutter: 18px; } section { padding: 56px 0; } .hero { padding: 24px 0 40px; } .nav__inner { height: 56px; } .nav__wordmark { font-size: 20px; } .nav__cta .btn:not(#theme-toggle):not(:last-child) { display: none; } .nav__cta .btn { padding: 10px 14px; font-size: 13px; } .hero__h1 { font-size: clamp(38px, 11vw, 56px); line-height: 1; } .hero__sub { font-size: 17px; } .hero__eyebrow .chip span:last-child { font-size: 11px; } .sec-head__h2 { font-size: clamp(26px, 7vw, 36px); } .sec-head__sub { font-size: 16px; } .steps { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } .auth-grid { grid-template-columns: 1fr; } .mgr-grid { grid-template-columns: 1fr; } /* === Leader card · mobile polish === */ .leader-card { padding: 16px 16px 18px; gap: 14px; border-radius: 16px; } .leader-card::before { /* Brighten the accent glow a touch on small screens for contrast. */ background: radial-gradient(ellipse 110% 70% at 80% 0%, oklch(from var(--accent) l c h / 0.42), transparent 65%); } .leader-card__bar { gap: 10px; } .leader-card__bar .kicker { font-size: 10.5px; letter-spacing: 0.14em; } .leader-card__bar .chip { font-size: 10px; padding: 4px 9px 4px 7px; } /* Hero block: logo + name on row 1, percent as its own emphatic row */ .leader-card__hero { grid-template-columns: auto 1fr; grid-template-areas: "logo name" "pct pct"; gap: 8px 14px; align-items: center; } .leader-card__hero .logo-chip { grid-area: logo; width: 52px; height: 52px; } .leader-card__hero .logo-chip svg { width: 28px; height: 28px; } .leader-card__namewrap { grid-area: name; min-width: 0; } .leader-card__name { font-size: 30px; line-height: 1; letter-spacing: -0.025em; } .leader-card__namewrap .kicker { margin-top: 6px; display: block; } .leader-card__pct { grid-area: pct; text-align: left; font-size: 38px; line-height: 1; letter-spacing: -0.025em; padding: 10px 12px; margin-top: 4px; border-radius: 12px; background: oklch(from var(--bg) l c h / 0.08); border: 1px solid oklch(from var(--bg) l c h / 0.14); display: flex; align-items: baseline; gap: 8px; } /* Stats: two compact cells, strategy spans full row */ .leader-card__stats { grid-template-columns: 1fr 1fr; gap: 12px 14px; padding-top: 12px; } .leader-card__stats > div:last-child { grid-column: 1 / -1; } .leader-card__stats > div { padding: 10px 12px; border-radius: 10px; background: oklch(from var(--bg) l c h / 0.05); border: 1px solid oklch(from var(--bg) l c h / 0.08); } .leader-card__stats .kicker { font-size: 10px; } .leader-card__val { font-size: 17px; margin-top: 3px; } .leader-card__val--text { font-size: 13.5px; line-height: 1.4; } /* Manager card: compact stats */ .mgr-card__stats { grid-template-columns: repeat(2, 1fr); gap: 12px; } .mgr-card__perf { flex-direction: column; align-items: flex-start; gap: 12px; } .mgr-card__spark { text-align: left; width: 100%; } .mgr-card__spark svg { width: 100%; } /* Hero compact race list */ .race__row--compact { grid-template-columns: 20px 22px 1fr auto; gap: 10px; padding: 10px 4px; } .race__row--compact .race__pct { display: none; } /* Memo: single column tabs on phone */ .memo-tabs { grid-template-columns: 1fr 1fr; } .memo-tab { padding: 12px 14px; } .memo-card { padding: 24px 20px 26px; border-radius: var(--r-lg); } .memo-card__quote { font-size: 18px; } .memo-form { flex-direction: column; } .memo-form input { width: 100%; } .memo-form .btn { justify-content: center; } /* Big CTAs full-width */ .btn--lg { padding: 14px 18px; font-size: 15px; } .cta__h2 { font-size: clamp(36px, 9vw, 56px); } .cta__sub { font-size: 17px; } /* Quotes */ .quote { padding: 22px; } .quote__q { font-size: 19px; } /* FAQ */ .faq__q { font-size: 18px; } /* Press */ .press__logos { font-size: 13px; gap: 14px 18px; } /* AI orbs */ .ai-orb { width: 42px; height: 42px; border-radius: 12px; } .hero__ai-row { gap: 10px; } /* Trust */ .hero__trust--icons { font-size: 12px; gap: 8px 14px; } /* Footer */ .footer__cols { grid-template-columns: repeat(2, 1fr); } .footer__word { font-size: 28px; } } /* ============================================================ Extra responsive polish — narrow phones & tablets ============================================================ */ /* Prevent any content (cards, code blocks, long URLs) from forcing horizontal scroll */ .wrap, .card, .modal__card, .legal-body, p, li, blockquote { min-width: 0; } .wrap { width: 100%; } /* Long unbreakable strings (URLs, wallet addresses, codes) wrap gracefully */ .hero__sub, .sec-head__sub, .lede, .fg-2, .modal__sub, .faq__a, .quote__q, .hc-callout, .hc-article p, .hc-article li { overflow-wrap: anywhere; word-break: break-word; } /* Lang menu shouldn't fall off the right edge on small screens */ @media (max-width: 600px) { .lang-switch__menu { right: auto; left: 0; min-width: 180px; max-width: calc(100vw - 32px); } } /* Hero race compact row — fluid on narrow phones */ @media (max-width: 480px) { .race__row--compact { grid-template-columns: 20px 22px minmax(0, 1fr) auto; gap: 8px; padding: 10px 2px; } .race__row--compact .race__name .serif { font-size: 14.5px; } .race__row--compact .race__value { min-width: 0; font-size: 13px; } .race__row--compact .race__pct { display: none; } .hero__race { padding: 4px 12px; } } /* Calculator projection wraps cleanly on phones */ @media (max-width: 600px) { .calc__proj { font-size: 15px; gap: 4px; line-height: 1.55; } .calc__proj .serif { font-size: 16px; } .calc__years { font-size: 17px !important; } .calc__amount { font-size: 24px; } .calc__head { gap: 10px; flex-wrap: wrap; } .hero__calc { padding: 18px; } } /* Press logos: ensure they wrap nicely on narrow phones */ @media (max-width: 480px) { .press { padding: 16px 0; gap: 12px; } .press__logos { gap: 10px 16px; font-size: 13px; } } /* Activity rows on very small phones — drop the size column for breathing room */ @media (max-width: 480px) { .activity-row { grid-template-columns: 48px 1fr auto; gap: 8px; font-size: 11.5px; } .activity-row__sz { display: none; } .activity-col { padding: 16px 14px 12px; } } /* Quote captions stack nicer on very small phones */ @media (max-width: 420px) { .quote__cap { grid-template-columns: 40px 1fr; gap: 10px; } .quote__cap .quote__mark { grid-column: 1 / -1; justify-self: start; } } /* Final CTA buttons full-width on very small phones */ @media (max-width: 420px) { .cta__buttons { max-width: 100%; } .cta__buttons .btn { width: 100%; } .cta__sub { font-size: 15.5px; } } /* FAQ items: tighter padding + question text wraps */ @media (max-width: 480px) { .faq__btn { padding: 18px 0; gap: 12px; } .faq__q { font-size: 16.5px; } .faq__a { font-size: 15px; } .faq__item.is-open .faq__a { max-height: 400px; } } /* Footer collapses to single column on very small phones */ @media (max-width: 420px) { .footer__cols { grid-template-columns: 1fr; gap: 22px; } .footer__inner { gap: 28px; margin-bottom: 36px; } .footer__word { font-size: 26px; } } /* Section / hero padding tighter on narrow phones */ @media (max-width: 420px) { :root { --gutter: 16px; } section { padding: 44px 0; } .hero { padding: 20px 0 32px; } .page-hero { padding: 56px 0 36px; } .page-section { padding: 44px 0; } } /* Buttons should never overflow their container on small screens */ .btn { max-width: 100%; } .btn > span:not(.arrow) { overflow: hidden; text-overflow: ellipsis; } /* Authority grid: 2 cols on tablet, 1 col on small phone */ @media (max-width: 720px) { .auth-grid { grid-template-columns: 1fr; } } /* Stats: full column on the smallest screens */ @media (max-width: 380px) { .stats { grid-template-columns: 1fr; gap: 14px; padding: 22px 0; } .stat__n { font-size: 32px; } } /* Trust strip items wrap rather than overflow */ .hero__trust li { white-space: normal; } /* Leader card on the very smallest devices */ @media (max-width: 380px) { .leader-card__name { font-size: 26px; } .leader-card__pct { font-size: 32px; padding: 8px 10px; } }