/* ============================================================ conva — approved 2026-09 site redesign (marketing + utility pages) Ported directly from the three committed approved mockups (conva_core@b75603a, docs/product/mockups/2026-09-conva-*-approved*.html) — class names, spacing, and type scale carried over from the mockup CSS, hex values mapped onto this site's existing tokens.css (same V4.0 brand values already used by the mockups: azure #4FB8FF, mint #35E0A6, violet #B79CFF, gold #FFC24B). ============================================================ */ /* ---------- display headlines (marketing pages: home, how it works) ---------- The mockups' "ConvaDisplay" custom font is byte-identical to this site's already self-hosted Michroma — confirmed by decoding the mockup's embedded woff2 and diffing it against fonts/michroma-latin.woff2 (same md5). So no new font is needed: apply the existing --font-display at the mockup's regular-weight, large-size, tight-leading treatment. */ .display-h1, .display-h2, .display-h3 { font-family: var(--font-display); font-weight: 400; color: var(--text); text-wrap: balance; } .display-h1 { font-size: clamp(2.15rem, 4.2vw, 3.375rem); line-height: 1.04; letter-spacing: -0.035em; } .display-h2 { font-size: clamp(1.9rem, 4vw, 3.375rem); line-height: 1.08; letter-spacing: -0.025em; } .display-h3 { font-size: clamp(1.4rem, 2.4vw, 2.125rem); line-height: 1.12; } /* ---------- marketing nav (dark editorial — home / how it works / about) ---------- */ .site-nav { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 24px; padding: 0 clamp(20px, 5vw, 76px); border-bottom: 1px solid var(--hairline); position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--void) 88%, transparent); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .site-nav .brand { display: flex; align-items: center; gap: 0.6em; color: var(--text); text-decoration: none; } .site-nav .brand .mark { width: 1.6em; height: 1.6em; color: var(--text); } .site-nav .brand .wordmark { font-size: 1rem; } .site-links { display: none; align-items: center; gap: 26px; font-size: 0.86rem; } .site-links a { color: var(--muted); text-decoration: none; } .site-links a:hover, .site-links a.active-link { color: var(--text); } .site-links .nav-cta { display: inline-flex; align-items: center; justify-content: center; min-height: 40px; padding: 0 1.1rem; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary) !important; font-weight: 700; font-size: 0.85rem; } .site-links .nav-cta:hover { background: var(--primary-lift); } .site-links a[hidden], .site-links .nav-cta[hidden] { display: none; } .mobile-menu-btn { display: inline-flex; width: 42px; height: 42px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--r-11); background: var(--glass); color: var(--text); } @media (min-width: 900px) { .site-links { display: flex; } .mobile-menu-btn { display: none; } } /* mobile nav drawer — every destination stays reachable on narrow viewports */ .mobile-drawer { position: fixed; inset: 0; z-index: 200; background: color-mix(in srgb, var(--void) 96%, transparent); display: flex; flex-direction: column; padding: 18px; gap: 4px; } .mobile-drawer[hidden] { display: none; } .mobile-drawer-head { display: flex; align-items: center; justify-content: space-between; padding: 4px 4px 20px; } .mobile-drawer nav { display: flex; flex-direction: column; gap: 2px; } .mobile-drawer a { display: block; padding: 16px 8px; border-bottom: 1px solid var(--hairline); color: var(--text); text-decoration: none; font-size: 1.15rem; font-family: var(--font-display); font-weight: 400; } .mobile-drawer a.mobile-cta { margin-top: 18px; border: 0; text-align: center; border-radius: var(--r-pill); background: var(--primary); color: var(--on-primary); font-family: var(--font-sans); font-weight: 700; font-size: 1rem; padding: 14px; } .mobile-drawer-close { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); background: var(--glass); color: var(--text); font-size: 1.2rem; } /* ---------- marketing footer ---------- */ .site-footer { min-height: 110px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; padding: 30px clamp(20px, 5vw, 76px); border-top: 1px solid var(--hairline); color: var(--faint); font-size: 0.78rem; } .site-footer .brand { display: flex; align-items: center; gap: 0.6em; color: var(--muted); text-decoration: none; } .site-footer .brand .mark { width: 1.3em; height: 1.3em; } .site-footer-links { display: flex; gap: 20px; flex-wrap: wrap; } .site-footer-links a { color: var(--muted); text-decoration: none; } .site-footer-links a:hover { color: var(--text); } /* ---------- shared eyebrow / kicker (JetBrains Mono, already --font-mono) ---------- */ .kicker { display: block; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--primary); } .kicker.gold { color: var(--gold); } .kicker.mint { color: var(--cyan); } /* ================================================================== HOMEPAGE ================================================================== */ .campaign-hero { position: relative; isolation: isolate; min-height: clamp(700px, 72vw, 860px); overflow: hidden; background: #07101a; color: var(--text); } .campaign-hero-scenes, .campaign-hero-scene, .campaign-hero-shade, .campaign-hero-wash { position: absolute; inset: 0; } .campaign-hero-scenes { z-index: -4; } .campaign-hero-scene { width: 100%; height: 100%; object-fit: cover; object-position: 51% center; display: block; opacity: 0; filter: saturate(.84) contrast(1.02); transition: opacity .38s var(--ease); } .campaign-hero-scene.is-active { opacity: 1; } .campaign-hero-scene-selling { object-position: 51% center; } .campaign-hero-shade { z-index: -3; background: rgba(0,8,17,.08); pointer-events: none; } .campaign-hero-wash { z-index: -2; pointer-events: none; background: linear-gradient(90deg, rgba(243,246,250,.98) 0%, rgba(243,246,250,.91) 28%, rgba(243,246,250,.53) 48%, transparent 70%), linear-gradient(0deg, rgba(3,8,14,.46), transparent 39%); } :root:not([data-theme="light"]) .campaign-hero-scene { filter: brightness(.66) saturate(.74) contrast(1.08) hue-rotate(3deg); } :root:not([data-theme="light"]) .campaign-hero-wash { background: linear-gradient(90deg, rgba(4,10,18,.98) 0%, rgba(4,10,18,.91) 28%, rgba(4,10,18,.56) 48%, transparent 70%), linear-gradient(0deg, rgba(3,8,14,.52), transparent 39%); } .campaign-hero-copy { position: relative; z-index: 3; width: min(590px, 50%); padding: clamp(30px, 4vw, 52px) 0 0 clamp(20px, 4.7vw, 76px); } .campaign-hero-tabs { display: inline-flex; align-items: center; gap: 3px; padding: 3px; margin-bottom: 18px; border: 1px solid var(--border); border-radius: var(--r-11); background: rgba(243,246,250,.76); box-shadow: var(--shadow-sm); backdrop-filter: blur(14px); } :root:not([data-theme="light"]) .campaign-hero-tabs { background: rgba(4,10,18,.76); } .campaign-hero-tab { min-height: 36px; padding: 7px 13px; border: 0; border-radius: var(--r-8); background: transparent; color: var(--text-2); cursor: pointer; font-size: .78rem; font-weight: 600; } .campaign-hero-tab[aria-selected="true"] { background: var(--text); color: var(--void); } .campaign-hero-copy .kicker { color: var(--primary); } .campaign-hero-copy h1 { max-width: 560px; margin: 15px 0 18px; font-size: clamp(2.7rem, 5vw, 4.65rem); line-height: 1.02; letter-spacing: -.055em; } .campaign-hero-copy .subhead { max-width: 520px; margin: 0; color: var(--text-2); font-size: 1.03rem; line-height: 1.55; } .mkt-hero-actions { display: flex; align-items: center; gap: 22px; margin-top: 24px; flex-wrap: wrap; } .ghost-link { color: var(--text) !important; text-decoration: none; border-bottom: 1px solid var(--faint); padding-bottom: 3px; } .campaign-hero-note { margin: 15px 0 0; color: var(--text-2); font: 500 .62rem/1.45 var(--font-mono); letter-spacing: .06em; text-transform: uppercase; } .campaign-hero-magnified { /* bottom clears the taller (selling, 3-cell) card height + gap — both this label and .campaign-conva-card are independently bottom-anchored to .campaign-hero, so it has to clear the taller of the two card states, not just the shorter (meeting, 2-cell) one. */ position: absolute; z-index: 7; left: clamp(20px, 4.7vw, 76px); bottom: 228px; color: rgba(255,255,255,.78); font: 600 .58rem/1.3 var(--font-mono); letter-spacing: .1em; text-transform: uppercase; text-shadow: 0 1px 8px rgba(0,0,0,.8); } .campaign-conva-card { --conva-counter: rgba(4,10,18,.96); position: absolute; z-index: 8; left: clamp(20px, 4.7vw, 76px); bottom: 28px; width: min(620px, 61%); overflow: hidden; color: #eef3f9; background: rgba(4,10,18,.94); border: 1px solid rgba(255,255,255,.2); border-left: 3px solid #ffc24b; border-radius: 12px; box-shadow: 0 22px 60px rgba(0,0,0,.38); backdrop-filter: blur(16px) saturate(1.15); } .campaign-conva-head { min-height: 44px; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 9px 14px; border-bottom: 1px solid rgba(255,255,255,.12); } .campaign-conva-brand { display: flex; align-items: center; gap: 9px; color: #eef3f9; } .campaign-conva-brand .mark { width: 25px; height: 25px; } .campaign-conva-brand b { font: 600 .7rem/1 var(--font-display); letter-spacing: .05em; } .campaign-conva-live { display: flex; align-items: center; gap: 7px; color: #aeb9c8; font: 500 .56rem/1.3 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; } .campaign-conva-live i { width: 6px; height: 6px; border-radius: 50%; background: #35e0a6; box-shadow: 0 0 10px rgba(53,224,166,.8); } /* An author `display` rule beats the UA `[hidden]{display:none}` at equal specificity regardless of source order (see main.css's `.btn[hidden]`) — so `hidden` alone doesn't hide the inactive scenario's grid. Restated. */ .campaign-conva-grid[hidden] { display: none; } .campaign-conva-grid { display: grid; } .campaign-conva-meeting { grid-template-columns: .9fr 1.1fr; } .campaign-conva-selling { grid-template-columns: .86fr .98fr 1.16fr; } .campaign-conva-cell { min-width: 0; padding: 14px; } .campaign-conva-cell + .campaign-conva-cell { border-left: 1px solid rgba(255,255,255,.12); } .campaign-conva-cell small { display: block; color: #35e0a6; font: 600 .55rem/1.3 var(--font-mono); letter-spacing: .11em; text-transform: uppercase; } .campaign-conva-compare small { color: #b79cff; } .campaign-conva-answer small { color: #ffc24b; } .campaign-conva-cell p { margin: 8px 0 0; color: #eef3f9; font-size: .76rem; line-height: 1.42; } .campaign-conva-cell strong { font-weight: 600; } .campaign-conva-cell > span { display: block; margin-top: 9px; color: #93a1b3; font: 500 .5rem/1.35 var(--font-mono); letter-spacing: .01em; } .campaign-conva-cell dl { display: grid; gap: 4px; margin: 8px 0 0; font-size: .68rem; } .campaign-conva-cell dl div { display: flex; justify-content: space-between; gap: 8px; } .campaign-conva-cell dt { color: #9aa8ba; } .campaign-conva-cell dd { margin: 0; color: #eef3f9; } @media (prefers-reduced-motion: reduce) { .campaign-hero-scene { transition: none; } } @media (max-width: 900px) { .campaign-hero { min-height: 860px; } .campaign-hero-copy { width: 59%; } .campaign-hero-copy h1 { font-size: clamp(2.45rem, 6.2vw, 3.5rem); } .campaign-conva-card { width: 66%; } .campaign-conva-selling { grid-template-columns: 1fr 1fr; } .campaign-conva-selling .campaign-conva-cell:last-child { grid-column: 1 / -1; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); } .campaign-hero-magnified { display: none; } } @media (max-width: 640px) { .campaign-hero { min-height: 1000px; } .campaign-hero-scene { object-position: 67% center; } .campaign-hero-scene-selling { object-position: 64% center; } .campaign-hero-wash { background: linear-gradient(180deg, rgba(243,246,250,.98) 0%, rgba(243,246,250,.92) 39%, transparent 69%), linear-gradient(0deg, rgba(3,8,14,.76), transparent 57%); } :root:not([data-theme="light"]) .campaign-hero-wash { background: linear-gradient(180deg, rgba(4,10,18,.98) 0%, rgba(4,10,18,.92) 39%, transparent 69%), linear-gradient(0deg, rgba(3,8,14,.78), transparent 57%); } .campaign-hero-copy { width: auto; padding: 28px 20px 0; } .campaign-hero-tab { min-height: 42px; } .campaign-hero-copy h1 { font-size: clamp(2.15rem, 10.6vw, 3rem); } .campaign-hero-copy .subhead { font-size: .95rem; } .campaign-conva-card { left: 16px; right: 16px; bottom: 18px; width: auto; } .campaign-conva-meeting, .campaign-conva-selling { grid-template-columns: 1fr; } .campaign-conva-cell + .campaign-conva-cell, .campaign-conva-selling .campaign-conva-cell:last-child { grid-column: auto; border-left: 0; border-top: 1px solid rgba(255,255,255,.12); } } .mkt-section { padding: clamp(60px, 9vw, 108px) 0; } .mkt-section .site-width { width: min(1160px, calc(100% - 40px)); margin: 0 auto; } .mkt-section h2 { max-width: 840px; margin: 16px 0 18px; } .mkt-section-lede { max-width: 680px; margin: 0; color: var(--text-2); font-size: 1.02rem; line-height: 1.55; } .story-section { background: var(--deep); } .story-stage { margin-top: 46px; display: grid; grid-template-columns: minmax(0, 1.5fr) minmax(260px, .5fr); min-height: 460px; } .story-visual { position: relative; overflow: hidden; background: var(--panel); } .story-visual > picture { display: block; width: 100%; height: 100%; } .story-visual > img, .story-visual > picture > img { width: 100%; height: 100%; object-fit: cover; display: block; } .story-controls-col { display: flex; flex-direction: column; background: var(--panel); border-left: 1px solid var(--border); } .story-msg-block { padding: 18px; border-bottom: 1px solid var(--border); background: var(--rail, var(--void)); } .story-msg-block span { color: var(--gold); font: 600 0.62rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; } .story-msg-block p { margin: 9px 0 0; font-size: 0.92rem; line-height: 1.4; color: var(--text); } .story-step-btn { flex: 1; min-height: 84px; padding: 20px; text-align: left; border: 0; border-bottom: 1px solid var(--border); background: transparent; color: var(--text-2); cursor: pointer; } .story-step-btn:last-child { border-bottom: 0; } .story-step-btn[aria-pressed="true"] { background: var(--panel-2); color: var(--text); } .story-step-btn small { display: block; color: var(--primary); font: 600 0.62rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; } .story-step-btn strong { display: block; margin-top: 6px; font-size: 0.98rem; font-weight: 600; } .story-step-btn span.step-detail { display: block; margin-top: 6px; font-size: 0.76rem; line-height: 1.4; } .mkt-truth-strip { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 16px; color: var(--text-2); font-size: 0.76rem; } .mkt-truth-strip span { display: inline-flex; align-items: center; gap: 6px; } .mkt-truth-strip i { width: 6px; height: 6px; border-radius: 50%; background: var(--cyan); display: inline-block; } .mkt-truth-strip .future i { background: var(--violet); } .loop-section { background: var(--void); } .loop-row { margin-top: 48px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 20px; } .loop-label { display: flex; align-items: baseline; gap: 10px; margin-bottom: 12px; } .loop-label b { color: var(--primary); font: 600 0.68rem/1.3 var(--font-mono); letter-spacing: 0.12em; } .loop-label strong { font-size: 1.15rem; font-weight: 600; } .loop-item p { margin: 14px 0 0; color: var(--text-2); font-size: 0.86rem; line-height: 1.55; } /* Real, populated V5 product captures — never a blank frame or invented UI. */ .app-capture { border: 1px solid var(--border); background: var(--panel); overflow: hidden; } .app-capture img { display: block; width: 100%; height: auto; } .moments-section { background: var(--deep); } .moment-row { display: grid; grid-template-columns: 1fr 1fr; min-height: 420px; border-top: 1px solid var(--hairline); } .moment-row:last-child { border-bottom: 1px solid var(--hairline); } .moment-row:nth-child(even) .moment-copy { order: 2; } .moment-copy { padding: clamp(36px, 6vw, 64px); display: flex; flex-direction: column; justify-content: center; } .moment-copy .who { color: var(--violet); font: 600 0.66rem/1.3 var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; } .moment-copy h3 { margin: 14px 0; } .moment-copy p { margin: 0; color: var(--text-2); font-size: 0.95rem; line-height: 1.55; } .moment-sequence { margin-top: 22px; display: grid; gap: 8px; } .moment-sequence span { display: flex; gap: 10px; align-items: baseline; color: var(--text-2); font-size: 0.82rem; line-height: 1.4; } .moment-sequence b { color: var(--cyan); font: 600 0.62rem/1.3 var(--font-mono); flex: none; } .moment-photo { position: relative; overflow: hidden; background: var(--panel); min-height: 320px; } .moment-photo > img { width: 100%; height: 100%; object-fit: cover; display: block; } .moment-photo.no-photo { display: flex; align-items: center; justify-content: center; padding: 40px; background: linear-gradient(160deg, var(--panel-2), var(--void)); } .mini-proof { position: absolute; left: 22px; right: 22px; bottom: 22px; padding: 14px; border-left: 3px solid var(--gold); background: rgba(0,6,15,.94); color: var(--text); } .moment-photo.no-photo .mini-proof { position: static; width: 100%; max-width: 340px; background: rgba(0,6,15,.5); border-radius: 8px; } .mini-proof small { color: var(--gold); font: 600 0.62rem/1.3 var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; } .mini-proof p { margin: 7px 0 0; font-size: 0.85rem; line-height: 1.45; } .agency-section { background: var(--panel); } .agency-grid-mkt { display: grid; grid-template-columns: 1.1fr .9fr; gap: 70px; align-items: start; } .agency-quote { margin: 0; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.75rem, 3.6vw, 3.1rem); line-height: 1.14; color: var(--text); } .agency-quote em { color: var(--gold); font-style: normal; } .agency-facts-mkt { display: grid; gap: 22px; } .agency-facts-mkt div { padding-top: 14px; border-top: 1px solid var(--border); } .agency-facts-mkt strong { display: block; font-size: 1rem; font-weight: 600; } .agency-facts-mkt p { margin: 6px 0 0; color: var(--text-2); font-size: 0.86rem; line-height: 1.5; } .film-section { background: var(--void); } .film-strip { margin-top: 44px; display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; } .film-frame { position: relative; min-height: 260px; overflow: hidden; background: var(--panel); } .film-frame img { width: 100%; height: 100%; object-fit: cover; display: block; } .film-frame:nth-child(1) img { object-position: 30% center; } .film-frame:nth-child(2) img { object-position: 55% center; transform: scale(1.15); } .film-frame:nth-child(3) img { object-position: 78% center; transform: scale(1.3); } .film-frame:nth-child(4) { padding: 22px; display: flex; flex-direction: column; justify-content: flex-end; border-left: 3px solid var(--gold); } .film-frame span { position: absolute; top: 12px; left: 12px; color: var(--gold); font: 600 0.6rem/1.3 var(--font-mono); letter-spacing: 0.12em; z-index: 2; } .film-frame strong { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; line-height: 1.15; } .film-frame p { margin: 8px 0 0; color: var(--text-2); font-size: 0.78rem; line-height: 1.5; } .film-note { margin-top: 18px; color: var(--faint); font-size: 0.8rem; line-height: 1.5; } .gold-cta { padding: clamp(70px, 10vw, 120px) 0; text-align: center; background: var(--gold); color: #171003; } .gold-cta .kicker { color: #4c3500; } .gold-cta h2 { max-width: 850px; margin: 16px auto 24px; color: #171003; } .gold-cta p { max-width: 620px; margin: 0 auto 26px; font-size: 1.02rem; line-height: 1.5; } .gold-cta .btn { background: var(--void); color: var(--text) !important; } .gold-cta .btn:hover { background: var(--deep); } /* ================================================================== HOW IT WORKS ================================================================== */ .how-hero { padding: clamp(50px, 8vw, 86px) clamp(20px, 5vw, 76px) clamp(60px, 8vw, 100px); } .how-hero-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, .92fr) minmax(360px, 1.08fr); align-items: center; gap: clamp(36px, 6vw, 80px); } .how-hero-grid h1 { margin-bottom: 22px; font-size: clamp(2.4rem, 5.2vw, 4.4rem); } .how-hero-lede { color: var(--text-2); font-size: clamp(1.05rem, 1.4vw, 1.25rem); line-height: 1.6; max-width: 620px; margin-bottom: 24px; } .how-ally-def { border-left: 2px solid var(--cyan); padding: 4px 0 4px 16px; max-width: 600px; margin: 0 0 26px; color: var(--text-2); line-height: 1.6; } .how-ally-def strong { color: var(--text); font-weight: 600; } .how-hero-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .text-link { color: var(--text); text-decoration: none; border-bottom: 1px solid var(--border-strong); padding-bottom: 3px; } .proof-stage { background: var(--panel-2); border: 1px solid var(--border); border-radius: 20px; overflow: hidden; box-shadow: var(--shadow-hero); } .proof-top { min-height: 66px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .proof-top .proof-label { color: var(--text-2); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; } .proof-top .proof-state { color: var(--cyan); font-size: 0.72rem; border: 1px solid var(--line-inbound); border-radius: var(--r-pill); padding: 5px 9px; } .proof-screen { position: relative; aspect-ratio: 16 / 10; background: var(--panel); overflow: hidden; } .proof-screen img { width: 100%; height: 100%; object-fit: cover; } .proof-note { position: absolute; left: 16px; right: 16px; bottom: 16px; display: flex; gap: 12px; align-items: flex-start; background: rgba(6,8,12,.94); border: 1px solid var(--border-strong); border-radius: 14px; padding: 13px 15px; } .proof-note svg { width: 18px; height: 18px; color: var(--primary); margin-top: 2px; flex: none; } .proof-note strong { display: block; font-weight: 600; margin-bottom: 3px; color: var(--text); } .proof-note span { color: var(--text-2); font-size: 0.78rem; line-height: 1.45; } .stage-controls { display: grid; grid-template-columns: repeat(4,1fr); border-top: 1px solid var(--border); } .stage-control { min-height: 64px; background: var(--panel); border: 0; border-right: 1px solid var(--border); color: var(--faint); text-align: left; padding: 11px 13px; cursor: pointer; } .stage-control:last-child { border-right: 0; } .stage-control small { display: block; font-family: var(--font-mono); font-size: 0.62rem; margin-bottom: 4px; } .stage-control b { font-weight: 600; font-size: 0.8rem; } .stage-control[aria-pressed="true"] { color: var(--text); background: var(--panel-2); box-shadow: inset 0 2px 0 var(--primary); } .category-band { border-block: 1px solid var(--hairline); padding: 32px clamp(20px, 5vw, 76px); } .category-band p { max-width: 1120px; margin: 0 auto; font-size: clamp(1.3rem, 2.6vw, 2.1rem); line-height: 1.3; color: var(--text-2); } .category-band strong { color: var(--text); font-weight: 600; } .chapters-wrap { max-width: 1240px; margin: 0 auto; padding: 60px clamp(20px, 5vw, 76px) 40px; } .chapter-row { display: grid; grid-template-columns: minmax(260px,.75fr) minmax(0,1.25fr); gap: clamp(32px, 6vw, 90px); align-items: center; padding: 60px 0; border-bottom: 1px solid var(--hairline); } .chapter-row:nth-child(even) { grid-template-columns: minmax(0,1.25fr) minmax(260px,.75fr); } .chapter-row:nth-child(even) .chapter-copy { order: 2; } .chapter-index { color: var(--primary); margin-bottom: 16px; } .chapter-copy h2 { margin-bottom: 18px; } .chapter-copy > p { color: var(--text-2); font-size: 1.02rem; line-height: 1.65; margin-bottom: 18px; } .chapter-detail { display: flex; gap: 10px; align-items: flex-start; color: var(--text-2); font-size: 0.86rem; line-height: 1.5; margin-top: 10px; } .chapter-detail svg { width: 16px; height: 16px; color: var(--cyan); margin-top: 2px; flex: none; } .chapter-detail.soon svg { color: var(--gold); } .story-photo-frame { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: 20px; border: 1px solid var(--border); background: var(--panel); box-shadow: var(--shadow-md); } .story-photo-frame img { width: 100%; height: 100%; object-fit: cover; } /* App captures are shown whole — cropping a UI screenshot clips readable text. */ .story-photo-frame.app-frame { aspect-ratio: auto; } .story-photo-frame.app-frame img { height: auto; object-fit: contain; } .scene-status { position: absolute; top: 14px; right: 14px; z-index: 3; padding: 6px 10px; border-radius: var(--r-pill); background: rgba(5,8,12,.9); border: 1px solid var(--line-inbound); color: var(--cyan); font-family: var(--font-mono); font-size: 0.6rem; letter-spacing: 0.08em; text-transform: uppercase; } .platform-truth { padding: clamp(60px,9vw,100px) clamp(20px, 5vw, 76px); background: var(--deep); } .platform-inner { max-width: 1240px; margin: 0 auto; } .platform-inner h2 { max-width: 850px; margin-bottom: 48px; } .platform-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--hairline); } .platform-item { padding: 26px 28px 16px 0; border-bottom: 1px solid var(--hairline); } .platform-item + .platform-item { padding-left: 28px; border-left: 1px solid var(--hairline); } .platform-item h3 { font-size: 1.05rem; font-weight: 600; margin-bottom: 10px; } .platform-item p { color: var(--text-2); line-height: 1.6; font-size: 0.88rem; } .agency-how { max-width: 1240px; margin: 0 auto; padding: clamp(70px,9vw,105px) clamp(20px, 5vw, 76px); display: grid; grid-template-columns: .75fr 1.25fr; gap: clamp(36px,8vw,110px); } .agency-mark { width: 54px; height: 54px; display: grid; place-items: center; border-radius: 50%; border: 1px solid var(--line-inbound); color: var(--primary); } .agency-mark svg { width: 24px; height: 24px; } .agency-how h2 { margin-bottom: 20px; } .agency-how p { color: var(--text-2); font-size: 1.05rem; line-height: 1.65; max-width: 740px; } .agency-rules { display: grid; grid-template-columns: repeat(3,1fr); gap: 14px; margin-top: 28px; } .agency-rules span { color: var(--text-2); border-top: 1px solid var(--hairline); padding-top: 12px; font-size: 0.8rem; line-height: 1.45; } .final-band { padding: clamp(60px,8vw,90px) clamp(20px, 5vw, 76px) clamp(70px,9vw,110px); text-align: center; border-top: 1px solid var(--hairline); } .final-band h2 { max-width: 900px; margin: 0 auto 24px; } .final-band p { max-width: 640px; margin: 0 auto 26px; color: var(--text-2); font-size: 1rem; line-height: 1.6; } /* These panels sit on dark photography (or a dark UI chip) in BOTH themes, so their contents stay on a fixed dark scale rather than following the theme tokens — otherwise the light theme paints dark text on a dark panel. Found by the light-theme screenshot pass. Re-binding the tokens locally keeps every descendant rule below working unchanged. */ .ally-panel, .mini-proof { --text: #eef2f8; --text-2: #b9c2d4; --muted: #b9c2d4; --faint: #8892a6; --primary: #4fb8ff; --cyan: #35e0a6; --violet: #b79cff; --gold: #ffc24b; --border: rgba(255,255,255,.14); --border-strong: rgba(255,255,255,.22); color: #eef2f8; } /* Grid children default to min-width:auto, so a long word or a fixed-width sub-grid can push a `1fr` track wider than the viewport. Every new grid here is explicitly minmax(0,…)-safe. Found by the 320/390px overflow pass. */ .mkt-hero > *, .beta-wrap > *, .how-hero-grid > *, .chapter-row > *, .moment-row > *, .agency-grid-mkt > *, .agency-how > *, .loop-row > *, .os-pane > *, .legal-layout > * { min-width: 0; } @media (max-width: 860px) { .how-hero-grid, .mkt-hero, .chapter-row, .chapter-row:nth-child(even), .agency-how, .moment-row, .moment-row:nth-child(even), .agency-grid-mkt { grid-template-columns: minmax(0, 1fr); } .chapter-row:nth-child(even) .chapter-copy, .moment-row:nth-child(even) .moment-copy { order: 0; } .platform-grid { grid-template-columns: minmax(0, 1fr); } .platform-item + .platform-item { padding-left: 0; border-left: 0; } .story-stage { grid-template-columns: minmax(0, 1fr); } .loop-row { grid-template-columns: minmax(0, 1fr); } .film-strip { grid-template-columns: 1fr 1fr; overflow: clip; } .film-frame:nth-child(2) img, .film-frame:nth-child(3) img { transform: none; } } /* ================================================================== ABOUT ================================================================== */ .about-hero-sec { padding: clamp(56px,9vw,130px) clamp(20px, 6vw, 96px) 70px; } .about-hero-sec h1 { max-width: 960px; font-size: clamp(2.5rem, 6.2vw, 5.2rem); } .about-hero-sec .about-lede { margin-left: auto; max-width: 580px; color: var(--text-2); font-size: 1.1rem; line-height: 1.6; } .editorial-rule { margin-top: 60px; height: 1px; background: var(--hairline); position: relative; } .editorial-rule span { position: absolute; top: 16px; left: 0; color: var(--gold); font-size: 0.78rem; } .belief-sec { display: grid; grid-template-columns: .7fr 1.3fr; gap: clamp(30px,8vw,110px); padding: clamp(50px,8vw,90px) clamp(20px, 6vw, 96px); border-top: 1px solid var(--hairline); } .belief-sec h2 { margin-bottom: 20px; } .belief-sec p { color: var(--text-2); font-size: 1.02rem; line-height: 1.7; max-width: 700px; } .belief-sec p + p { margin-top: 1.1em; } .belief-sec strong { color: var(--text); font-weight: 600; } .principles-sec { padding: clamp(50px,7vw,90px) clamp(20px, 6vw, 96px) 90px; background: var(--deep); } .principles-sec h2 { max-width: 720px; margin-bottom: 44px; } .principle-grid { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--hairline); } .principle-item { padding: 24px 24px 16px 0; min-height: 190px; } .principle-item + .principle-item { border-left: 1px solid var(--hairline); padding-left: 24px; } .principle-item b { color: var(--cyan); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; font-weight: 600; } .principle-item h3 { font-size: 1.15rem; font-weight: 600; margin: 14px 0 10px; } .principle-item p { color: var(--text-2); font-size: 0.86rem; line-height: 1.6; } .ally-story-sec { display: grid; grid-template-columns: 1.1fr .9fr; align-items: center; gap: 60px; padding: clamp(60px,8vw,100px) clamp(20px, 6vw, 96px); } .ally-quote-block { border-left: 2px solid var(--violet); padding: 8px 0 8px 26px; font-family: var(--font-display); font-weight: 400; font-size: clamp(1.5rem, 2.6vw, 2.5rem); line-height: 1.25; } .ally-explain-block h2 { font-size: 1.9rem; margin-bottom: 18px; } .ally-explain-block p { color: var(--text-2); line-height: 1.7; } .about-cta-sec { padding: 80px 20px 96px; border-top: 1px solid var(--hairline); text-align: center; } .about-cta-sec h2 { margin-bottom: 14px; } .about-cta-sec p { color: var(--text-2); margin-bottom: 24px; } /* ================================================================== BETA / SIGN-IN / SIGNUP shared layout ================================================================== */ .beta-wrap { min-height: 700px; display: grid; grid-template-columns: 1.05fr .95fr; } .beta-story { padding: clamp(50px,8vw,110px) clamp(24px,6vw,88px); display: flex; flex-direction: column; justify-content: space-between; border-right: 1px solid var(--hairline); } .beta-story h1 { margin: 20px 0 22px; max-width: 700px; } .beta-story .beta-lede { color: var(--text-2); font-size: 1.05rem; line-height: 1.6; max-width: 580px; } .beta-promise { display: grid; grid-template-columns: repeat(3,1fr); gap: 20px; margin-top: 56px; } .beta-promise div { border-top: 1px solid var(--hairline); padding-top: 12px; color: var(--text-2); font-size: 0.78rem; line-height: 1.5; } .beta-promise b { display: block; color: var(--text); font-weight: 600; margin-bottom: 4px; } .beta-form-side { background: var(--deep); padding: clamp(40px,6vw,66px) clamp(22px,5vw,66px); display: flex; align-items: center; } .beta-form-side .auth-box { width: 100%; max-width: 460px; margin: auto; } @media (max-width: 860px) { .about-hero-sec .about-lede { margin-left: 0; } .belief-sec, .ally-story-sec, .principle-grid { grid-template-columns: minmax(0, 1fr); } .principle-item + .principle-item { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; padding-top: 20px; } .beta-wrap { grid-template-columns: minmax(0, 1fr); } .beta-story { border-right: 0; border-bottom: 1px solid var(--hairline); } .beta-promise { grid-template-columns: minmax(0, 1fr); } } /* ================================================================== DOWNLOAD ================================================================== */ .download-hero-sec { padding: clamp(60px,8vw,95px) clamp(20px, 6vw, 96px) 60px; display: grid; grid-template-columns: 1fr .9fr; gap: 50px; align-items: end; } .download-hero-sec h1 { margin: 18px 0 22px; } .download-hero-sec .dl-lede { color: var(--text-2); font-size: 1.05rem; line-height: 1.6; } .download-status { border-left: 2px solid var(--gold); padding: 6px 0 6px 16px; color: var(--text-2); line-height: 1.6; } .download-status b { display: block; color: var(--gold); font-weight: 600; } .os-chooser { margin: 0 clamp(20px, 6vw, 96px) 80px; border: 1px solid var(--border); border-radius: var(--r-16); background: var(--panel); overflow: hidden; } .os-tabs { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border); } .os-tab { min-height: 88px; border: 0; border-right: 1px solid var(--border); color: var(--text-2); background: var(--panel); cursor: pointer; text-align: left; padding: 14px 20px; display: grid; grid-template-columns: 44px minmax(0, 1fr); align-items: center; gap: 15px; } .os-tab:last-child { border-right: 0; } .os-tab[aria-selected="true"] { color: var(--text); background: var(--panel-2); box-shadow: inset 0 2px 0 var(--primary); } /* The OS mark sits directly before its name — never a text-only label. */ .os-icon { width: 44px; height: 44px; display: grid; place-items: center; border: 1px solid var(--border); border-radius: 11px; color: var(--faint); background: rgba(255,255,255,.025); } .os-icon svg { width: 26px; height: 26px; display: block; fill: currentColor; } .os-tab[aria-selected="true"] .os-icon { color: var(--primary); border-color: color-mix(in srgb, var(--primary) 42%, transparent); background: color-mix(in srgb, var(--primary) 9%, transparent); } .os-label b { display: block; font-weight: 600; } .os-label small { display: block; margin-top: 3px; color: var(--faint); font-size: 0.72rem; } .os-visual { display: grid; gap: 24px; align-content: start; } .platform-showcase { position: relative; min-height: 268px; padding: 32px 24px 26px; overflow: hidden; border: 1px solid var(--border); background: radial-gradient(circle at 78% 5%, rgba(117,168,255,.18), transparent 42%), linear-gradient(145deg, #121923, #090d13 66%); } .platform-showcase.is-mac { background: radial-gradient(circle at 78% 5%, rgba(183,160,255,.19), transparent 42%), linear-gradient(145deg, #151721, #090d13 66%); } .platform-mark { position: absolute; right: 22px; top: 20px; width: 52px; height: 52px; display: grid; place-items: center; color: rgba(117,168,255,.86); } .platform-showcase.is-mac .platform-mark { color: rgba(183,160,255,.88); } .platform-mark svg { width: 42px; height: 42px; display: block; fill: currentColor; } .device { position: relative; width: min(100%, 420px); margin: 16px auto 0; filter: drop-shadow(0 24px 25px rgba(0,0,0,.48)); } .device-screen { position: relative; padding: 9px 9px 11px; border: 1px solid rgba(255,255,255,.2); border-radius: 12px 12px 6px 6px; background: #07090d; } .device-bar { height: 18px; display: flex; align-items: center; gap: 4px; padding: 0 3px 7px; color: var(--faint); font: 0.5rem/1 var(--font-display); letter-spacing: 0.11em; text-transform: uppercase; } .device-bar i { width: 5px; height: 5px; border-radius: 50%; background: #48515e; } .device-bar span { margin-left: auto; } .device-screen img { display: block; width: 100%; height: auto; border: 1px solid color-mix(in srgb, var(--primary) 20%, transparent); background: #05070b; } .device-base { width: 110%; height: 9px; margin-left: -5%; border-radius: 2px 2px 12px 12px; background: linear-gradient(180deg, #87909c, #343a43); box-shadow: inset 0 1px rgba(255,255,255,.35); } .platform-caption { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 20px; } .platform-caption strong { font-size: 0.82rem; font-weight: 500; } .platform-caption span { color: var(--cyan); font: 0.5rem/1.3 var(--font-display); letter-spacing: 0.08em; text-transform: uppercase; } .companion-band { padding: 0 clamp(20px, 6vw, 96px) 90px; } .companion-head { display: grid; grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); gap: 60px; align-items: end; margin-bottom: 32px; } .companion-head p { color: var(--text-2); line-height: 1.7; max-width: 660px; } .companion-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); border: 1px solid var(--border); background: var(--panel); } .companion-card { min-height: 190px; padding: 30px; display: grid; grid-template-columns: 64px minmax(0, 1fr); gap: 22px; align-items: start; } .companion-card + .companion-card { border-left: 1px solid var(--border); } .companion-icon { width: 64px; height: 64px; display: grid; place-items: center; color: var(--violet); border: 1px solid rgba(183,160,255,.36); border-radius: 16px; background: rgba(183,160,255,.08); } .companion-icon.android { color: var(--cyan); border-color: rgba(105,223,189,.36); background: rgba(105,223,189,.08); } .companion-icon svg { width: 34px; height: 34px; display: block; fill: currentColor; } .companion-state { display: inline-block; margin-bottom: 11px; color: var(--gold); font: 0.5rem/1.3 var(--font-display); letter-spacing: 0.1em; text-transform: uppercase; } .companion-card h3 { font-size: 1.15rem; font-weight: 500; margin-bottom: 9px; } .companion-card p { color: var(--text-2); font-size: 0.85rem; line-height: 1.62; } .os-pane { padding: clamp(24px,5vw,52px); display: grid; grid-template-columns: 1fr .9fr; gap: 60px; } .os-pane[hidden] { display: none; } .os-copy h2 { margin-bottom: 16px; font-size: clamp(1.5rem, 2.5vw, 2.25rem); } .os-copy p { color: var(--text-2); line-height: 1.65; } .download-action { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 24px; } /* Signed in, but there is no build to hand over — an explained state, never a link that bounces to sign-in and back. */ .dl-unavailable { padding: 14px 16px; border: 1px solid var(--border); border-left: 2px solid var(--gold); border-radius: var(--r-11); background: color-mix(in srgb, var(--gold) 6%, transparent); } .dl-unavailable b { display: block; margin-bottom: 5px; color: var(--gold); font-size: 0.88rem; font-weight: 600; } .dl-unavailable p { margin: 0; color: var(--text-2); font-size: 0.84rem; line-height: 1.55; } .download-capabilities { border-top: 1px solid var(--hairline); } .download-capability { display: grid; grid-template-columns: 22px 1fr; gap: 10px; padding: 13px 0; border-bottom: 1px solid var(--hairline); color: var(--text-2); font-size: 0.85rem; line-height: 1.5; } .download-capability svg { width: 16px; height: 16px; color: var(--cyan); } .download-capability.limited svg { color: var(--gold); } .dl-handoff { padding: clamp(60px,8vw,95px) clamp(20px, 6vw, 96px); background: var(--deep); } .dl-handoff h2 { max-width: 750px; margin-bottom: 46px; } .dl-steps { display: grid; grid-template-columns: repeat(3,1fr); border-top: 1px solid var(--hairline); } .dl-step { padding: 24px 26px 14px 0; } .dl-step + .dl-step { border-left: 1px solid var(--hairline); padding-left: 26px; } .dl-step b { color: var(--primary); font-family: var(--font-mono); font-size: 0.66rem; letter-spacing: 0.1em; font-weight: 600; } .dl-step h3 { margin: 13px 0 10px; font-size: 1.05rem; font-weight: 600; } .dl-step p { color: var(--text-2); font-size: 0.85rem; line-height: 1.6; } .dl-platform-truth { padding: clamp(50px,7vw,82px) clamp(20px, 6vw, 96px); display: grid; grid-template-columns: .8fr 1.2fr; gap: 50px; } .dl-platform-truth h2 { font-size: 1.7rem; } .dl-platform-truth .truth-copy { color: var(--text-2); line-height: 1.65; } .dl-platform-truth .truth-copy strong { color: var(--text); font-weight: 600; } @media (max-width: 860px) { .download-hero-sec, .os-pane, .dl-platform-truth { grid-template-columns: minmax(0, 1fr); gap: 24px; } .dl-steps { grid-template-columns: minmax(0, 1fr); } .dl-step + .dl-step { border-left: 0; border-top: 1px solid var(--hairline); padding-left: 0; padding-top: 20px; } .os-tab { grid-template-columns: 38px minmax(0, 1fr); gap: 11px; padding: 12px 14px; } .os-icon { width: 38px; height: 38px; border-radius: 9px; } .os-icon svg { width: 22px; height: 22px; } .companion-head { grid-template-columns: minmax(0, 1fr); gap: 16px; } .companion-grid { grid-template-columns: minmax(0, 1fr); } .companion-card { grid-template-columns: 52px minmax(0, 1fr); min-height: 0; padding: 24px 20px; gap: 16px; } .companion-card + .companion-card { border-left: 0; border-top: 1px solid var(--border); } .companion-icon { width: 52px; height: 52px; border-radius: 13px; } .companion-icon svg { width: 28px; height: 28px; } } /* ================================================================== PRIVACY / TERMS (legal) ================================================================== */ .legal-hero-sec { padding: clamp(50px,7vw,80px) clamp(20px, 6vw, 96px) 50px; border-bottom: 1px solid var(--hairline); } .legal-hero-sec h1 { margin: 18px 0 16px; } .legal-hero-sec p { color: var(--text-2); max-width: 640px; line-height: 1.6; } .legal-layout { display: grid; grid-template-columns: 260px 1fr; max-width: 1180px; margin: 0 auto; padding: 56px 24px 100px; gap: 60px; } .legal-nav { align-self: start; border-top: 1px solid var(--hairline); position: sticky; top: 90px; } .legal-tab { width: 100%; min-height: 52px; border: 0; border-bottom: 1px solid var(--hairline); color: var(--text-2); background: transparent; text-align: left; padding: 12px 4px; cursor: pointer; } .legal-tab[aria-selected="true"] { color: var(--text); padding-left: 12px; border-left: 2px solid var(--violet); } .legal-contact { margin-top: 22px; color: var(--faint); font-size: 0.76rem; line-height: 1.55; } .legal-doc[hidden] { display: none; } .legal-doc .doc-meta { color: var(--gold); font-family: var(--font-mono); text-transform: uppercase; letter-spacing: 0.1em; font-size: 0.62rem; } .legal-doc h2 { margin: 12px 0 26px; } .legal-summary { border-left: 2px solid var(--cyan); padding: 4px 0 4px 17px; color: var(--text); font-size: 1.05rem; line-height: 1.6; margin-bottom: 36px; } .legal-doc h3 { font-size: 1.05rem; font-weight: 600; margin: 28px 0 10px; } .legal-doc p, .legal-doc li { color: var(--text-2); font-size: 0.88rem; line-height: 1.7; } .legal-doc ul { padding-left: 20px; list-style: disc; } .legal-doc li { list-style: inherit; } .legal-paths { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 22px 0 30px; } .legal-path { border: 1px solid var(--border); padding: 16px; background: var(--panel-2); border-radius: var(--r-11); } .legal-path b { display: block; margin-bottom: 6px; font-weight: 600; } .legal-path p { font-size: 0.78rem; margin: 0; } @media (max-width: 760px) { .legal-layout { grid-template-columns: minmax(0, 1fr); padding: 30px 20px 70px; gap: 32px; } .legal-nav { position: static; display: grid; grid-template-columns: 1fr 1fr; } .legal-tab { text-align: center; } .legal-tab[aria-selected="true"] { padding-left: 4px; border-left: 0; border-bottom: 2px solid var(--violet); } .legal-contact { grid-column: 1 / -1; } .legal-paths { grid-template-columns: 1fr; } } /* ---------- Apply / Sign in switch (approved beta + sign-in state) ---------- The approved mockup renders this as two equal tabs with a mint underline on the active one. Ours are real routes (/beta.html, /login.html), so the inactive side is a link and the active side a span — auth.css only styles