` still styles. */ .ridge{position:absolute;left:0;right:0;width:100%;pointer-events:none} .ridge svg{display:block;width:100%;height:auto} /* ============================================================================ HERO — SPLIT FOLD (E2, 2026-10-23 from PRD-hero-v9-split.md) One screen at ≥921px (100svh, 620px floor): headline left, transparent film right, both centred in a band between the nav and the partner logos (E4). No ridges, no stars, no hue — only two colourless drift fields on .sky. Mobile <921px stacks text → film with no masks (boxed cut). Keep CSS blocks together so a React port lifts them as one component. ============================================================================ */ .hero{position:relative; z-index:61; background:linear-gradient(180deg,#000 0%,#000 38%,#030403 62%,var(--bg) 100%); --glow-x:70%} .hero + .credband{background:var(--bg)} /* no seam into CredBand */ nav{z-index:70} /* above hero's grain copy */ /* backdrop grain copy, masked clear at top, full at foot — meets next section seamlessly */ .hero::after{content:""; position:absolute; inset:0; z-index:5; pointer-events:none; opacity:.055; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-mask:linear-gradient(180deg,transparent 0%,transparent 40%,#000 100%); mask:linear-gradient(180deg,transparent 0%,transparent 40%,#000 100%)} /* sky hosts two colourless drift fields — transform-only, cheap, stops for reduced motion */ .hero .sky{overflow:hidden; background:none; -webkit-mask:linear-gradient(180deg,transparent 0%,#000 34%,#000 55%,transparent 90%); mask:linear-gradient(180deg,transparent 0%,#000 34%,#000 55%,transparent 90%)} .hero .sky::before,.hero .sky::after{content:""; position:absolute; border-radius:50%; pointer-events:none; will-change:transform} .hero .sky::before{width:72vmax; height:72vmax; left:calc(var(--glow-x) - 36vmax); top:calc(52% - 36vmax); background:radial-gradient(closest-side,rgba(255,255,255,.050) 0%,rgba(255,255,255,.020) 42%,transparent 100%); animation:hs-drift-a 26s ease-in-out infinite alternate} .hero .sky::after{width:54vmax; height:54vmax; left:calc(var(--glow-x) - 44vmax); top:calc(62% - 27vmax); background:radial-gradient(closest-side,rgba(255,255,255,.032) 0%,rgba(255,255,255,.012) 48%,transparent 100%); animation:hs-drift-b 34s ease-in-out infinite alternate} @keyframes hs-drift-a{0%{transform:translate(-8vw,-5vh) scale(1)} 50%{transform:translate(5vw,6vh) scale(1.1)} 100%{transform:translate(9vw,-6vh) scale(.92)}} @keyframes hs-drift-b{0%{transform:translate(2vw,4vh) scale(1)} 50%{transform:translate(-12vw,-8vh) scale(1.16)} 100%{transform:translate(6vw,2vh) scale(.94)}} @media (prefers-reduced-motion:reduce){.hero .sky::before,.hero .sky::after{animation:none}} /* layout tokens for the band — reused by E4's logo row. 2026-10-23 Dylan: text column wider (--tw 400→680) and smaller center gap so the headline's right edge and the film's left edge meet closer to the centreline — less dead air between them at wide viewports. */ .hero{--navb:74px; --vpad:clamp(56px,10svh,130px); --logos-h:clamp(72px,11svh,112px); --gutter:max(var(--pad),calc((100vw - 1280px) / 2)); /* 2026-10-28 Dylan: --tw widened from 38vw→42vw so the hero text column at 1440 native matches what he sees at 90% zoom on wider screens — keeps "Imagine your sales team" on one line. */ --tw:clamp(400px,42vw,680px)} /* ----- desktop (≥921px): one screen, text column left, film column right ----- Gutters live on the band's inset, NOT on padding inside the columns, so the --tw width is the ACTUAL text width (not a cell containing padding + text). Earlier bug: padding-left:var(--gutter) inside .hero-content shrank the text from 620px to ~310px at 1900 wide and forced 'sales team' to wrap. */ @media (min-width:921px){ /* 2026-10-25 Dylan: hero fills the viewport again so the logo marquee sits at the ACTUAL bottom of the fold, not floating ~300px above it. Reduced --vpad from the earlier pass still holds — headline + film sit tighter in the band's centre so there's no air pocket under them. */ .hero{min-height:100svh; --vpad:clamp(44px,7svh,88px); --logos-h:clamp(64px,9svh,96px)} .hero-inner.hero-split{position:absolute; inset:calc(var(--navb) + var(--vpad)) var(--gutter) calc(var(--logos-h) + .6 * var(--vpad)) var(--gutter); display:grid; grid-template-columns:var(--tw) 1fr; gap:clamp(24px,2vw,40px); align-items:center; padding:0; margin:0; max-width:none; z-index:6} /* 2026-10-27 Dylan: title was vertically centred in the full-height hero band, which at tall viewports pushed the headline ~400px below the nav because justify-content:center spread the "unused" vertical space symmetrically above and below. Anchor the text column to the top of the band + a tunable padding-top so the headline sits closer to the nav. Film gets the same margin-top so the two columns stay visually aligned. */ /* 2026-10-28 Dylan: content column centred vertically in the hero band so the gap below the CTA closes instead of sitting as dead space. Film column centres on the same axis so the two stay visually aligned. */ .hero-split .hero-content{display:flex; flex-direction:column; justify-content:center; text-align:left; max-width:none; align-items:flex-start; padding:0} .hero-split .alpha-hero{align-self:center; margin-top:0} /* 2026-10-23 (overnight critic): film's second width candidate was `remaining-row-width / .943`, which at 1920 wide inflated the film to 602px inside a 568px column — it bled 34px past the master 1280 container's right edge. Dropping the /.943 inflation locks the film to its actual column cell at any viewport ≥1281, so its right edge aligns with the logo marquee + the site's 1280 frame. */ .alpha-hero{justify-self:end; width:min( calc((100svh - var(--navb) - 2*var(--vpad) - var(--logos-h) - .6*var(--vpad)) * (1440/1240)), calc(100vw - 2*var(--gutter) - var(--tw) - 40px), 44vw, 900px); max-width:none} } /* ----- film box — rectangle × circle feather (E3, 2026-10-23) ----- The base rectangle (horizontal + vertical gradients) is intersected with a radial gradient driven by --iris (0 open, 1 closed) — valley-iris.js reads the film's own mediaTime and animates --iris 0 → 1 between 4.9–5.25s (closed over the market map dive) and back 1 → 0 between 8.25–8.95s (open before the email card lands). When --iris=0 the radial resolves to #000 at 300%/400%, i.e. a solid plate that lets the rectangle alone show. When --iris=1 the radial is #000 at 74% and transparent at 100% — a circle inside the box. Phones use the boxed cut and skip the mask. */ /* unconditional base: no width here. The @media (min-width:921px) rule above sets width:min(...); the @media (max-width:920px) rule below sets width:100%. Setting width:100% unconditionally wins source order and inflates the film. */ .alpha-hero{position:relative; margin:0; padding:0} .alpha-film{position:relative; width:100%; aspect-ratio:1440/1240; --ia:calc(300% - 226% * var(--iris, 0)); --ib:calc(400% - 300% * var(--iris, 0)); -webkit-mask: linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%), linear-gradient(180deg,transparent 0,#000 6%,#000 96%,transparent 100%), radial-gradient(50% 58% at 50% 52%,#000 var(--ia),transparent var(--ib)); -webkit-mask-composite:source-in, source-in; mask: linear-gradient(90deg,transparent 0,#000 8%,#000 92%,transparent 100%), linear-gradient(180deg,transparent 0,#000 6%,#000 96%,transparent 100%), radial-gradient(50% 58% at 50% 52%,#000 var(--ia),transparent var(--ib)); mask-composite:intersect, intersect} .alpha-film__media,.alpha-film__still{position:absolute; inset:0; width:100%; height:100%; display:block; background:transparent; object-fit:contain} .alpha-film__media{opacity:0} .alpha-film[data-playing] .alpha-film__media{opacity:1} .alpha-film[data-playing] .alpha-film__still{visibility:hidden} /* pause control — hover-only (Dylan 2026-10-23: skip E5's always-visible rebuild) */ .alpha-film__toggle{position:absolute; right:9%; bottom:11%; z-index:3; font:600 12px/1 Saans,system-ui,sans-serif; letter-spacing:.04em; color:#B7BCAC; background:rgba(20,24,18,.72); border:1px solid rgba(244,243,236,.14); border-radius:999px; padding:7px 12px; cursor:pointer; opacity:0; transition:opacity .2s} .alpha-film:hover .alpha-film__toggle,.alpha-film__toggle:focus-visible{opacity:1} /* type + sub + CTA (R1 applied globally — sentence case, Greed 600) */ .hero-inner{position:relative} .hero .pill{margin-bottom:30px} .h1{font-family:var(--display); font-weight:600; text-transform:none; letter-spacing:-.02em; line-height:1.06; text-wrap:balance; font-size:clamp(36px,min(3.95vw,6.4svh),68px); max-width:14ch; margin:0 auto} .hero .h1{max-width:none; margin:0} .hero .h1 .grad{display:block; width:fit-content} .hero-sub{margin:clamp(24px,3.8svh,38px) 0 0; max-width:26em; color:var(--ink-2); font-size:clamp(15px,min(1.3vw,2.2svh),20px); line-height:1.62; text-wrap:pretty} /* default is center (used by DawnCTA + apply page). Hero-specific left-align is scoped below. */ .hero-cta-row{margin-top:clamp(32px,5.2svh,52px); display:flex; justify-content:center; align-items:center; gap:14px} .hero .hero-cta-row{justify-content:flex-start} /* 2026-10-29 Cian: hero sub in the Labs body style — bigger, tighter, first sentence bright, the rest softer. Same words. */ .hero .hero-sub{color:var(--ink); line-height:1.4; letter-spacing:-.016em} .hero .hero-sub b{font-weight:500} .hero .hero-sub .mu{opacity:.56} @media (min-width:921px){ .hero .hero-sub{font-size:clamp(16px,min(1.4vw,2.5svh),21px); max-width:28em; margin-top:clamp(18px,3svh,30px)} .hero .hero-cta-row{margin-top:clamp(24px,4.4svh,44px)} } /* ===== HERO LOGOS (E4, 2026-10-23) — the partner marquee pinned to the fold's foot. Quieter than the credband one it came from: smaller marks, lower opacity, bigger gap, so it reads as proof not a feature. CredBand keeps the stat cards. ===== */ /* 2026-10-23 Dylan: logo marquee aligns to the hero's 1280 frame — same --gutter as the headline + film, so the row of marks starts and ends on the master border set by the hero. */ .hero-logos{position:absolute; left:var(--gutter); right:var(--gutter); bottom:0; z-index:3; height:var(--logos-h); display:flex; align-items:flex-end; padding-bottom:16px; pointer-events:none} /* bump specificity past `.motion-ready .rv.in{opacity:1}` so the .42 fade actually lands — Dylan 23 Oct: logos read as quiet proof not a feature. */ .hero-logos .marquee.rv,.hero-logos .marquee.rv.in,.hero-logos .marquee{width:100%; opacity:.42; pointer-events:auto} .hero-logos .mq-set{gap:clamp(44px,4.6vw,76px)} .hero-logos .mq-set li>img{height:calc(clamp(20px,1.85vw,28px) * var(--s, 1))} /* 2026-10-29 Cian: logos sit at the foot of the screen. The generic .marquee margin-bottom (52–76px, meant for the credband strip) was lifting the hero row ~65px off the bottom edge. */ .hero-logos .marquee{margin-bottom:0} @media (min-width:921px){ .hero-logos{padding-bottom:clamp(18px,3.4svh,34px)} } /* ----- phones (<921px): stack text → film, boxed cut, no masks. Logos sit in flow ----- */ @media (max-width:920px){ .hero{min-height:0; height:auto; padding:124px var(--pad) 40px} .hero-inner.hero-split{display:flex; flex-direction:column; gap:28px; align-items:center; margin:0 auto; max-width:420px} .hero-split .hero-content{text-align:center; align-items:center} .hero .h1{text-align:center; max-width:14ch; margin:0 auto} .hero .h1 .grad{margin:0 auto} .hero-sub{text-align:center; margin:26px auto 0} .hero-cta-row{justify-content:center} .alpha-hero{width:100%; max-width:none; margin:0 auto; justify-self:center} .alpha-film{-webkit-mask:none; mask:none; border-radius:16px; overflow:hidden; background:#0b100d; border:1px solid rgba(244,243,236,.12)} .hero-logos{position:relative; height:auto; margin-top:36px; padding-bottom:20px} } /* ============ CREDIBILITY ============ */ .credband{padding:clamp(90px,12vw,140px) 0;background:linear-gradient(180deg,#050704 0%,var(--bg) 30%)} /* .cred-head (centred pill above an h2) was the pre-E8 header pattern — E8 (2026-10-24) replaced it with .cred-intro (eyebrow + left-aligned h2 + right lede). Selectors removed 2026-10-25 after they sat matching nothing for a day. */ /* ---- logo marquee. The set is authored once; JS clones it and adds .mq-ready, and only then does the track start running and translate by exactly half its width — which is one set, so the seam lands on itself. Without JS, or under reduced motion, the same single set stays as a centred wrapped strip. The base64 marks therefore appear once in the document, not twice. ---- */ .marquee{--mq-gap:clamp(52px,6vw,92px);position:relative;overflow:hidden; margin-bottom:clamp(52px,6.5vw,76px)} .marquee.is-running{ -webkit-mask:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%); mask:linear-gradient(90deg,transparent 0,#000 11%,#000 89%,transparent 100%)} .mq-track{display:flex;flex-wrap:wrap;justify-content:center;row-gap:30px} .mq-track.mq-ready{flex-wrap:nowrap;justify-content:flex-start;width:max-content; animation:mq-run var(--mq-dur,52s) linear infinite} .marquee:hover .mq-ready,.marquee:focus-within .mq-ready{animation-play-state:paused} @keyframes mq-run{to{transform:translate3d(-50%,0,0)}} .mq-set{display:flex;align-items:center;flex-wrap:wrap;justify-content:center; gap:var(--mq-gap);row-gap:30px;list-style:none;margin:0} .mq-ready .mq-set{flex-wrap:nowrap;padding-right:var(--mq-gap)} /* static fallback (reduced motion, or JS off): wrap the full partner list with tighter spacing, keeping every company visible. */ .mq-track:not(.mq-ready){--mq-gap:clamp(28px,3.4vw,52px);padding:0 var(--pad)} .mq-track:not(.mq-ready) img{height:calc(clamp(22px,2.1vw,30px) * var(--s,1))} .mq-set li{flex:0 0 auto;display:flex;align-items:center} .mq-set img{display:block;width:auto;height:calc(clamp(28px,2.7vw,38px) * var(--s,1)); opacity:.5;transition:opacity .35s var(--ease)} .mq-set li:hover img{opacity:.92} .mq-moshi{gap:10px} .mq-moshi img{filter:grayscale(1)} .mq-name{font-family:var(--display);font-weight:600;line-height:1; font-size:clamp(28px,2.7vw,38px);opacity:.5;transition:opacity .35s var(--ease)} .mq-moshi:hover .mq-name{opacity:.92} .mq-track:not(.mq-ready) .mq-name{font-size:clamp(22px,2.1vw,30px)} /* ---- proof cards: same light, slower, staggered, one accent hue each ---- */ .cred-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(28px,3vw,56px)} .cred-card{--aura-w:1px;--aura-dur:15s;--aura-beam:.40turn;--aura-op:.62; position:relative;display:flex;flex-direction:column;border-radius:18px;padding:28px 28px 30px; border:1px solid rgba(244,243,236,.085); background: radial-gradient(118% 88% at 100% 0%, var(--ca,rgba(206,252,151,.12)), transparent 62%), linear-gradient(155deg,rgba(244,243,236,.075),rgba(244,243,236,.022) 46%,rgba(244,243,236,.008)); box-shadow:0 30px 60px -36px rgba(0,0,0,.7),inset 0 1px 0 rgba(244,243,236,.10); transition:transform .45s var(--ease),box-shadow .45s var(--ease),border-color .45s var(--ease)} .cred-card:hover{transform:translateY(-3px);--aura-op:1; border-color:rgba(244,243,236,.14); box-shadow:0 44px 80px -40px rgba(0,0,0,.8),inset 0 1px 0 rgba(244,243,236,.14)} .cred-card .mono-note{display:block;color:var(--ink-3); font-family:var(--body);font-weight:500;letter-spacing:.15em} /* brand face; Saans sets tighter than mono, so the tracking goes up to hold the rhythm */ .cred-num{font-family:var(--display);font-weight:600;font-size:clamp(46px,5vw,64px);line-height:.98; letter-spacing:-.02em;margin:20px 0 14px;font-variant-numeric:tabular-nums} /* pinned to the floor, so a two-line caption grows upward and every card in the row keeps the same last baseline however the copy wraps */ .cred-sub{margin-top:auto;color:var(--ink-2);font-size:15.5px;line-height:1.5;max-width:22ch} /* ---------- Direction C · Dawn horizon (lifted verbatim from the Callout Card Directions artifact fe6514fc) ---------- Each card carries a sunrise: .glow is an accent ellipse rising into the glass, .horizon is the crisp 1.5px arc (the top border of a wide ellipse) + bloom, both sliding up on hover; a coloured drop-shadow throws light onto the page. Label takes --acc, the figure stays pure ink with a soft glow. Scoped to .v-c so it's an additive skin. */ .v-c .cred-card{--aura-op:.45;border-color:rgba(244,243,236,.11);padding-bottom:76px; background:linear-gradient(180deg,rgba(244,243,236,.07),rgba(244,243,236,.02) 60%,rgba(244,243,236,.01)); box-shadow:0 60px 90px -56px color-mix(in srgb,var(--acc) 60%,transparent), 0 30px 60px -36px rgba(0,0,0,.8),inset 0 1px 0 rgba(244,243,236,.12)} .v-c .clip{position:absolute;inset:0;border-radius:inherit;overflow:hidden;z-index:1;pointer-events:none} .v-c .glow,.v-c .horizon{position:absolute;left:-20%;width:140%;transition:transform .9s var(--ease)} .v-c .glow{bottom:-66%;height:100%;border-radius:50%; background:radial-gradient(closest-side,color-mix(in srgb,var(--acc) 42%,transparent),color-mix(in srgb,var(--acc) 12%,transparent) 55%,transparent)} .v-c .horizon{bottom:-150px;height:190px;border-radius:50%; border-top:1.5px solid color-mix(in srgb,var(--acc) 85%,white); box-shadow:0 -6px 24px color-mix(in srgb,var(--acc) 55%,transparent),inset 0 10px 30px color-mix(in srgb,var(--acc) 35%,transparent)} .v-c .cred-card:hover .glow{transform:translateY(-16%)} .v-c .cred-card:hover .horizon{transform:translateY(-22px)} /* Card lift on hover. The reveal sets `.motion-ready .rv.in{transform:none}` at (0,3,0), which beats the base `.cred-card:hover` (0,2,0) once a card is in view — so the lift never showed. Re-assert it at (0,3,0), scoped to .v-c and placed after the reveal rule so it wins the tie on hover. */ .v-c .cred-card:hover{transform:translateY(-4px)} .v-c .mono-note{color:var(--acc)} .v-c .cred-num{font-size:clamp(54px,5.8vw,76px);text-shadow:0 0 42px color-mix(in srgb,var(--acc) 38%,transparent)} .v-c .cred-sub{color:#DADDD0;font-size:16px} /* ============ FAQ — native

, matches section-head pattern ============ Picks up Dawn's final pure-#000 and gradients back up to --bg so the two sections flow as ONE black-into-ink wash rather than a block color change. */ .faq{position:relative;padding:clamp(80px,10vw,140px) 0; background:linear-gradient(180deg,#000 0%,#030403 30%,var(--bg) 100%)} .faq .section-head{text-align:center;margin-bottom:clamp(48px,6vw,72px)} .faq .section-head .h2{margin-top:18px;font-size:clamp(28px,3.2vw,42px);line-height:1.1} .faq-list{max-width:720px;margin:0 auto} .faq-row{position:relative} .faq-row>summary{list-style:none;cursor:pointer;padding:22px 2px;display:grid;grid-template-columns:1fr auto;gap:24px;align-items:center; font-family:var(--display);font-weight:500;font-size:clamp(18px,2.1vw,22px);color:var(--ink);line-height:1.3;transition:color .15s} .faq-row>summary::-webkit-details-marker{display:none} .faq-row>summary::after{content:"";width:14px;height:14px;flex-shrink:0;position:relative;transition:transform .18s ease-out; background: linear-gradient(var(--ink-2),var(--ink-2)) center/14px 1.5px no-repeat, linear-gradient(var(--ink-2),var(--ink-2)) center/1.5px 14px no-repeat} .faq-row[open]>summary::after{transform:rotate(45deg); background:linear-gradient(var(--accent),var(--accent)) center/14px 1.5px no-repeat} .faq-row>summary:hover{color:var(--accent)} .faq-row>summary:focus-visible{outline:2px solid var(--accent);outline-offset:4px;border-radius:4px} .faq-answer{padding:0 2px 24px;max-width:60ch} .faq-answer p{margin:0;color:var(--ink-2);font-size:clamp(15px,1.6vw,17px);line-height:1.55} @media (max-width:920px){ .faq{padding:60px 0 72px} .faq .section-head{margin-bottom:32px} .faq-row>summary{padding:18px 2px;font-size:17px} } /* ============ TESTIMONIAL ORBIT (E9, 2026-10-25) — proof row rebuilt as a satellite carousel. One card centre-stage, others circle as 3D company orbs on a lime→cyan→purple→pink ring. All CSS ported value-for-value from the signed-off reference at hero-v9-split-reference/index.html