/* ─── Reset & base ───────────────────────────────────────────────────── */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0;} :root{ --dark:#06444e; --dark-mid:#0a5560; --lime:#caee10; --lime-dark:#afd00d; --white:#ffffff; --light:#f4f7f4; --light-mid:#e8ede8; --ink:#0d1c1e; --ink-mid:#2a4547; --ink-light:#6b8f8d; --bd-dark:rgba(255,255,255,.1); --bd-light:rgba(13,28,30,.1); } html{-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} body{ font-family:'Aeonik',-apple-system,'Helvetica Neue',sans-serif; background:#08080a; color:var(--white); overflow:hidden; height:100vh; } #main{background:#08080a;} @media(prefers-reduced-motion:reduce){ *{animation-duration:.01ms!important;transition-duration:.01ms!important;} } /* ─── Scroll container (snap) ───────────────────────────────────────── */ #main{ height:100vh; overflow-y:scroll; scroll-snap-type:y mandatory; scroll-behavior:smooth; scrollbar-width:none; } #main::-webkit-scrollbar{display:none;} /* ─── Section base ───────────────────────────────────────────────────── */ section{ min-height:100vh; scroll-snap-align:start; /* Force the browser to stop at every section even when the user flicks past - otherwise fast scrolls skip whole sections. */ scroll-snap-stop:always; overflow:hidden; position:relative; display:flex; flex-direction:column; justify-content:center; /* Reserve room for the 88px fixed nav so section titles never slide under it - content area becomes (100vh − 88px) when the section is exactly viewport-tall, and snap still settles flush with the top so the previous section doesn't peek through. */ padding-top:88px; box-sizing:border-box; } /* s6 (customer story) and s7 (CTA) can outgrow the viewport - let them */ #s6, #s7{ height:auto; min-height:100vh; overflow:visible; } /* ─── Navigation ───────────────────────────────────────────────────── */ /* Imported Webflow nav: keep it pinned + above scene chrome. The Webflow stylesheet (loaded in ) provides all the visual styling. */ .nav{position:fixed;top:0;left:0;right:0;z-index:900;} /* ─── Side nav dots ─────────────────────────────────────────────────── */ /* "Drum" side-nav: vertical track of dots that slides as the user scrolls. The active dot sits a bit above the rail's centre so there's always more visible runway BELOW it - communicating "more sections to come" rather than "this is the end". */ .side-nav{ --dot-size:8px; --dot-gap:16px; --rail-h:260px; --active-y:90px; /* active dot's y inside the rail (top of dot) */ position:fixed;right:22px;top:50%; z-index:800; height:var(--rail-h); width:24px; overflow:hidden; transform:translateY(-50%); pointer-events:none; /* Softer fade - keeps more dots legible, both past and future */ -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); mask-image:linear-gradient(180deg, transparent 0%, #000 14%, #000 86%, transparent 100%); } .side-nav-track{ display:flex;flex-direction:column;align-items:center;gap:var(--dot-gap); --row:calc(var(--dot-size) + var(--dot-gap)); transform:translateY(calc(var(--active-y) - var(--active, 0) * var(--row))); transition:transform .55s cubic-bezier(.22,1,.36,1); } .side-dot{ width:var(--dot-size);height:var(--dot-size);border-radius:50%; background:rgba(255,255,255,.85); cursor:pointer;pointer-events:auto; flex:0 0 auto; /* Smooth falloff - every dot stays visible, the active one is biggest. Clamp at d=4 so edge dots don't disappear or oversize. */ --d:5; --df:min(var(--d, 5), 4); transform:scale(calc(1 - var(--df) * .14)); opacity:calc(1 - var(--df) * .18); transition:transform .5s cubic-bezier(.22,1,.36,1), opacity .4s ease, background .35s ease; } .side-dot.active{ background:#fff; --d:0; transform:scale(1.55); } .side-nav.light-dots .side-dot{background:rgba(13,28,30,.7);} .side-nav.light-dots .side-dot.active{background:var(--ink);} /* Burger icon flips white over dark sections - class toggled in JS based on DARK_SECTION_IDS so the hamburger stays legible on hero, sReset, s3, and s4. */ .nav.over-dark .nav_mobile-icon-closed, .nav.over-dark .nav_mobile-icon-open{ filter:invert(1) brightness(2); } /* ─── Entrance animation primitives ─────────────────────────────────── */ .enter-up{ opacity:0; transform:translateY(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); } .enter-fade{ opacity:0; transition:opacity .9s ease; } .enter-left{ opacity:0; transform:translateX(-28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); } .enter-right{ opacity:0; transform:translateX(28px); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1); } .enter-scale{ opacity:0; transform:scale(.94); transition:opacity .7s ease, transform .7s cubic-bezier(.16,1,.3,1); } /* Delays */ .d1{transition-delay:.1s!important;} .d2{transition-delay:.22s!important;} .d3{transition-delay:.36s!important;} .d4{transition-delay:.50s!important;} .d5{transition-delay:.64s!important;} .d6{transition-delay:.78s!important;} /* Active state - fires all entrances */ .section-active .enter-up, .section-active .enter-fade, .section-active .enter-left, .section-active .enter-right, .section-active .enter-scale{ opacity:1; transform:none; } /* Line-reveal text - transition declared on the base so both forward (reveal) and reverse (re-mask) animations play when `.section-active` toggles. */ .lm{display:block;overflow:hidden;line-height:1.15;} .lm>.l{ display:block;transform:translateY(108%); transition:transform .9s cubic-bezier(.16,1,.3,1); } .section-active .lm>.l{transform:none;} .lm:nth-child(1)>.l{transition-delay:.05s;} .lm:nth-child(2)>.l{transition-delay:.16s;} .lm:nth-child(3)>.l{transition-delay:.27s;} .lm:nth-child(4)>.l{transition-delay:.38s;} /* ─── ████ S1 HERO ██████████████████████████████████████████████████ */ #s1{ position:relative; overflow:hidden; justify-content:center; background:linear-gradient(180deg, #06444D 0%, #0B5965 99.99%, #06444D 100%); } /* particle canvas removed */ /* Studio lighting wash behind the floating cards */ .s1-studio-light{ position:absolute;inset:0;z-index:0;pointer-events:none; background: radial-gradient(ellipse 60% 40% at 20% 50%, rgba(255,255,255,.025) 0%, transparent 70%), radial-gradient(ellipse 40% 60% at 80% 30%, rgba(255,255,255,.018) 0%, transparent 70%), radial-gradient(ellipse 50% 50% at 50% 100%, rgba(60,60,80,.18) 0%, transparent 60%); } /* The floating cards stage - Three.js CSS3DRenderer fills this element */ #s1-cards{ position:absolute;inset:0;z-index:1;pointer-events:none; overflow:hidden; } .s1-tilt-hint{ position:absolute;left:50%;bottom:14px;transform:translateX(-50%); z-index:4;pointer-events:none; font-size:11px;font-weight:500;letter-spacing:.12em;text-transform:uppercase; color:rgba(255,255,255,.6); padding:8px 14px;border-radius:999px; background:rgba(0,0,0,.4);backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); opacity:0;transition:opacity .5s ease; display:none; } @media (max-width: 720px){.s1-tilt-hint{display:inline-flex;}} .s1-tilt-hint.is-visible{opacity:1;} #s1-cards > div{pointer-events:none;} /* Card base - Three.js gives us the 3D math, so no perspective/backdrop here. Layered gradients (rendered relative to the card's box, not the viewport) give a subtle directional-light feel without shimmering during translation. */ #s1-cards .s1c{ position:absolute;left:0;top:0; overflow:hidden; isolation:isolate; background: /* Soft sheen across the top edge */ linear-gradient(180deg, rgba(255,255,255,.06) 0%, transparent 28%), /* Body fill - teal glass tuned to the new hero gradient */ linear-gradient(155deg, rgba(15,110,124,.78) 0%, rgba(11,89,101,.82) 60%, rgba(6,68,77,.86) 100%); -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); border-radius:16px; padding:14px 16px; color:rgba(255,255,255,.6); box-shadow: inset 0 1px 0 rgba(255,255,255,.06), inset 0 -1px 0 rgba(0,0,0,.2), 0 10px 24px rgba(0,0,0,.28); font-family:'Aeonik',-apple-system,'Helvetica Neue',sans-serif; backface-visibility:hidden; -webkit-backface-visibility:hidden; } /* Animated specular highlight - simulates a single light source rotating around the scene. Each card carries its own oversized pseudo whose radial highlight is offset from the rotation centre, so as the pseudo spins the bright spot orbits the card's edges. All cards run the same animation in lock-step so the apparent light direction is shared. */ #s1-cards .s1c::before{ content:""; position:absolute; left:-50%;top:-50%; width:200%;height:200%; background:radial-gradient( circle at 30% 30%, rgba(255,255,255,.18) 0%, rgba(255,255,255,.06) 18%, rgba(255,255,255,0) 38% ); pointer-events:none; z-index:0; animation:s1cLightOrbit 14s linear infinite; will-change:transform; } #s1-cards .s1c.icon-only::before{ background:radial-gradient( circle at 30% 30%, rgba(255,255,255,.22) 0%, rgba(255,255,255,.08) 25%, rgba(255,255,255,0) 45% ); } /* Keep card content above the rotating highlight */ #s1-cards .s1c > *{position:relative;z-index:1;} @keyframes s1cLightOrbit{ to{transform:rotate(360deg);} } @media (prefers-reduced-motion: reduce){ #s1-cards .s1c::before{animation:none;} } /* Soft atmospheric vignette so cards "recede" into the fog */ #s1::before{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:radial-gradient(ellipse 70% 60% at 50% 50%, transparent 0%, rgba(8,8,10,.55) 90%); } #s1-cards .s1c.icon-only{ width:52px;height:52px;border-radius:14px;padding:0; display:flex;align-items:center;justify-content:center; } #s1-cards .s1c-label{ font-size:9.5px;font-weight:500; color:rgba(255,255,255,.32);letter-spacing:.04em;margin-bottom:3px; } #s1-cards .s1c-title{ font-size:15px;font-weight:500;color:rgba(255,255,255,.62); letter-spacing:-.3px;line-height:1.2; } #s1-cards .s1c-sub{ font-size:10px;color:rgba(255,255,255,.28);margin-top:3px; } #s1-cards .s1c-amount, #s1-cards .s1c-bigamount, #s1-cards .s1c-gst, #s1-cards .s1c-ccy, #s1-cards .s1c-sumrow, #s1-cards .s1c-mono{ font-family:'Geist Mono','SF Mono',ui-monospace,monospace; font-feature-settings:"tnum" 1; } #s1-cards .s1c-amount{ font-size:14px;font-weight:500;color:rgba(255,255,255,.62);letter-spacing:-.3px; } #s1-cards .s1c-gst{font-size:9.5px;color:rgba(255,255,255,.28);margin-top:2px;} #s1-cards .s1c-badge{display:none;} #s1-cards .s1c-status{ background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.08); color:rgba(255,255,255,.52);padding:4px 10px;border-radius:8px; font-size:10px;display:flex;align-items:center;gap:6px;font-weight:500; } #s1-cards .s1c-dot{ width:6px;height:6px;border-radius:50%; background:var(--lime); box-shadow:0 0 6px rgba(202,238,16,.7); flex-shrink:0; } #s1-cards .s1c-draft{ display:inline-block;font-size:11px;font-weight:500; padding:5px 14px;border-radius:8px; background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.5); } #s1-cards .s1c-row{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;} #s1-cards .s1c-left{display:flex;align-items:flex-start;} #s1-cards .s1c-icn{ width:30px;height:30px;border-radius:8px; background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09); display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-right:10px; } #s1-cards .s1c-icn-lg{ width:34px;height:34px;border-radius:9px;margin-right:0; } /* Merchant expense card: 2-column, big amount on the right, ~4:3 aspect. Left stack: icon → merchant → date → budget. Right stack: amount + currency → GST. */ #s1-cards .s1c-merchant{ display:flex;justify-content:space-between;align-items:stretch;gap:12px; min-height:118px; } #s1-cards .s1c-merchant-left{ display:flex;flex-direction:column;gap:6px;flex:1;min-width:0; } #s1-cards .s1c-merchant-right{ display:flex;flex-direction:column;align-items:flex-end; justify-content:space-between;text-align:right;flex-shrink:0; } #s1-cards .s1c-merchant-name{ font-size:20px;font-weight:600; color:rgba(255,255,255,.9); letter-spacing:-.4px;line-height:1.1;margin-top:2px; } #s1-cards .s1c-budget{ font-family:'Geist Mono','SF Mono',ui-monospace,monospace; font-size:9.5px;font-weight:500; color:rgba(255,255,255,.4);letter-spacing:.02em; margin-top:auto; } #s1-cards .s1c-bigamt{ font-family:'Geist Mono','SF Mono',ui-monospace,monospace; font-feature-settings:"tnum" 1; font-size:22px;font-weight:600; color:rgba(255,255,255,.92); letter-spacing:-.5px;line-height:1; } #s1-cards .s1c-ccy-tag{ font-family:'Geist Mono','SF Mono',ui-monospace,monospace; font-size:9px;font-weight:600;color:rgba(255,255,255,.5); letter-spacing:.08em;margin-top:4px; } #s1-cards .s1c-div{height:1px;background:rgba(255,255,255,.07);margin:8px 0;} #s1-cards .s1c-sumrow{ display:flex;justify-content:space-between; font-size:10px;color:rgba(255,255,255,.4);margin:2px 0; } #s1-cards .s1c-sumrow.total{ font-size:13px;font-weight:600;color:rgba(255,255,255,.88);margin-top:6px; } #s1-cards .s1c-sumrow.total .amt{font-size:15px;letter-spacing:-.3px;} #s1-cards .s1c-ccy{ font-size:10px;font-weight:600;color:rgba(255,255,255,.4); background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.09); padding:2px 7px;border-radius:5px;margin-left:6px;vertical-align:middle; } #s1-cards .s1c-bigamount{ font-size:22px;font-weight:600;color:rgba(255,255,255,.7); letter-spacing:-.6px;margin-top:4px; } #s1-cards .s1c-sumrow.total{ color:rgba(255,255,255,.6); } /* Lift content above the cards */ .s1-inner{z-index:3!important;} #s1::after{z-index:2!important;} /* Hero tightens on mobile; cards stay visible (driven by device-orientation parallax) */ @media (max-width: 720px){ .s1-inner{padding:0 20px;} .s1-h{font-size:clamp(40px,11vw,68px);line-height:.95;margin-bottom:24px;} .s1-sub{font-size:15px;margin-bottom:32px;} /* Stack actions vertically but button is sized to its content, not full-width */ .s1-actions{flex-direction:column;gap:14px;} .s1-actions .btn-lime{width:auto;} } .s1-inner{ position:relative;z-index:3; max-width:clamp(1100px,72vw,1500px); margin:0 auto; padding:0 24px; text-align:center; display:flex;flex-direction:column;align-items:center; } .s1-eyebrow{ font-size:11px;font-weight:600; letter-spacing:.18em;text-transform:uppercase; color:var(--lime); opacity:.85; margin-bottom:4px; text-align:center; } .s1-h{ font-size:clamp(48px,6.8vw,143px); font-weight:300; line-height:.85; letter-spacing:-.04em; color:#fff; margin-bottom:36px; text-align:center; } .s1-h em{ font-style:normal; font-weight:300; color:#fff; position:relative; isolation:isolate; border-radius:14px; /* Light top, heavier bottom - gives the descender (p) breathing room and pulls the cap-height visual mass into the pill's vertical centre. */ padding:0 .18em .12em; margin:0 .04em .06em 0; display:inline-block; vertical-align:baseline; line-height:.86; } /* Animated highlight bg - wipes in from the left on load, then a subtle gradient flows through the pill continuously. */ .s1-h em::before{ content:"";position:absolute;inset:0;z-index:-1; border-radius:inherit; /* Seamless symmetric gradient: start = end so it can loop without a seam. Tight colour range keeps the shimmer subtle. */ background:linear-gradient(90deg,#407A7D 0%,#528E91 50%,#407A7D 100%); background-size:200% 100%; background-repeat:repeat-x; background-position:0% 50%; clip-path:inset(0 100% 0 0); animation:emHighlightWipe 1.1s cubic-bezier(.22,1,.36,1) .35s forwards, emHighlightShimmer 14s linear 1.5s infinite; } @keyframes emHighlightWipe{ to{clip-path:inset(0 0 0 0);} } @keyframes emHighlightShimmer{ from{background-position:0% 50%;} to {background-position:-200% 50%;} } @media (prefers-reduced-motion: reduce){ .s1-h em::before{animation:none;clip-path:inset(0);background-position:0% 50%;} } .s1-sub{ font-size:clamp(16px,1.4vw,28px); font-weight:400; line-height:1.55; color:rgba(255,255,255,.7); max-width:clamp(520px,50vw,920px); margin:0 auto 52px; letter-spacing:-.005em; text-align:center; } .s1-actions{display:flex;align-items:center;justify-content:center;gap:20px;} .btn-lime{ background:var(--lime);color:var(--ink); font-size:14px;font-weight:700; padding:14px 28px;border-radius:999px; text-decoration:none;letter-spacing:-.01em; transition:transform .2s,opacity .2s; display:inline-flex;align-items:center;gap:8px; } .btn-lime:hover{transform:translateY(-2px);opacity:.9;} .btn-ghost{ font-size:14px;font-weight:500; color:rgba(255,255,255,.6); text-decoration:none;letter-spacing:-.01em; padding:12px 22px;border-radius:999px; border:1px solid rgba(255,255,255,.18); background:transparent; display:inline-flex;align-items:center; transition:color .2s ease, border-color .2s ease, background .2s ease; } .btn-ghost:hover{ color:#fff; border-color:rgba(255,255,255,.35); background:rgba(255,255,255,.05); } .s1-scroll-hint{ position:absolute;bottom:32px;left:50%;transform:translateX(-50%); display:flex;flex-direction:column;align-items:center;gap:8px; opacity:.35;z-index:2; } .s1-scroll-hint span{font-size:11px;letter-spacing:.1em;text-transform:uppercase;} .scroll-chevron{ width:18px;height:18px; border-right:1.5px solid #fff; border-bottom:1.5px solid #fff; transform:rotate(45deg); animation:chevBounce 1.8s ease-in-out infinite; } @keyframes chevBounce{ 0%,100%{transform:rotate(45deg) translateY(0);} 50%{transform:rotate(45deg) translateY(4px);} } /* (Removed lime accent overlay - bg now relies on the agents-bg.jpg image.) */ /* ─── Receipt morphing traveller ────────────────────────────────────── */ #morph-traveller{ position:fixed; right:80px; top:50%; transform:translateY(-50%); z-index:500; pointer-events:none; opacity:0; transition:opacity .4s ease; } #morph-traveller.visible{opacity:1;} .morph-shape{ width:60px; height:80px; position:relative; filter:drop-shadow(0 8px 24px rgba(6,68,78,.18)); } .morph-shape svg{ width:100%;height:100%; overflow:visible; } /* The morphing path */ #morph-path{ fill:none; stroke:rgba(202,238,16,0.7); stroke-width:1.5; transition:d .6s cubic-bezier(.16,1,.3,1); } #morph-fill{ fill:rgba(202,238,16,0.08); transition:d .6s cubic-bezier(.16,1,.3,1); } /* ─── ████ S1B PERSONA CAST - horizontal-scrolljack ████████████ */ #s1b-wrap{position:relative;} #s1b{ position:sticky;top:0; height:100vh; background:#ffffff; color:var(--ink); overflow:hidden; /* snap-align removed: sticky elements' snap points are inconsistently honored when scrolling back up. We use a separate non-sticky `.s1b-snap` marker before this section instead. */ display:flex; flex-direction:column; justify-content:flex-start; padding:0; } .s1b-spacer{ height:100vh; scroll-snap-align:start; scroll-snap-stop:always; pointer-events:none; } /* Snap marker for card 1 - sits at the top of the wrap (above the sticky in DOM order so its 1px occupies the very first pixel) and acts as the proxy snap target the browser reliably honors when scrolling back up. */ .s1b-snap{ position:absolute;top:0;left:0;right:0; height:1px;pointer-events:none;visibility:hidden; scroll-snap-align:start; scroll-snap-stop:always; } .s1b-head{ position:absolute;top:0;left:0;right:0;z-index:3; padding:110px 6vw 0; pointer-events:none; text-align:left; } .s1b-head-inner{ max-width:clamp(1180px,80vw,1480px);margin:0 auto; display:flex;align-items:flex-end;justify-content:space-between;gap:32px; } .s1b-head-left{max-width:clamp(520px,42vw,780px);text-align:left;padding-right:32px;} .s1b-eyebrow{ font-size:11px;font-weight:600; letter-spacing:.24em;text-transform:uppercase; /* Lime is unreadable on white - use Weel teal */ color:#407A7D; margin-bottom:18px;display:block; text-align:left; } .s1b-title{ font-size:clamp(24px,2.4vw,44px); font-weight:300;line-height:1.2;letter-spacing:-.015em; color:rgba(13,28,30,.7);margin:0; text-align:left; text-wrap:balance; } .s1b-title strong{font-weight:500;color:var(--ink);} .s1b-progress{ display:flex;align-items:center;gap:14px; font-size:11px;font-weight:500; letter-spacing:.22em;text-transform:uppercase; color:rgba(13,28,30,.45); } .s1b-progress-track{ width:120px;height:1px; background:rgba(13,28,30,.15);position:relative; } .s1b-progress-fill{ position:absolute;left:0;top:0;bottom:0; background:var(--ink); width:0; transition:width .3s ease; } .s1b-progress-count{color:var(--ink);} .s1b-track{ display:flex; height:100%;width:300vw; will-change:transform; transition:transform .15s linear; } .persona{ flex:0 0 100vw;height:100%; position:relative; display:flex;align-items:center;justify-content:center; padding:clamp(340px,38vh,500px) 6vw clamp(100px,12vh,160px); } .persona-body{ position:relative;z-index:1; width:100%;max-width:clamp(1180px,80vw,1480px);margin:0 auto; background:#0d1c1e; border-radius:28px; overflow:hidden; box-shadow:0 24px 64px rgba(13,28,30,.12); /* Card grows taller on bigger viewports so it doesn't feel squat on wide screens */ min-height:clamp(380px,52vh,620px); max-height:calc(100vh - 440px); /* Smooth fade + lift on enter/exit of the section so the dark canvas doesn't pop into existence the moment #s1b becomes visible. */ opacity:0; transform:translateY(34px) scale(.985); transition:opacity .9s cubic-bezier(.16,1,.3,1), transform .9s cubic-bezier(.16,1,.3,1); } /* Fade in only when the user genuinely lands on the section - a stricter .personas-in class is toggled by a dedicated observer below. */ #s1b.personas-in .persona-body{ opacity:1; transform:none; } /* Stagger the 3 cards so they don't all bloom in lockstep - feels alive */ #s1b.personas-in .persona:nth-child(1) .persona-body{transition-delay:.05s;} #s1b.personas-in .persona:nth-child(2) .persona-body{transition-delay:.18s;} #s1b.personas-in .persona:nth-child(3) .persona-body{transition-delay:.32s;} .persona-bg-num{display:none;} /* Photo is an overlay: initially 0 width (the dark text panel fills the card), then expands to its target width as the persona becomes active. */ .persona-photo{ position:absolute;left:0;top:0;bottom:0; width:0; background-color:#A1CBC2; background-image:url('https://cdn.prod.website-files.com/6833e520890ced50e9cddcf3/6a5dc0b830cc59044ee44e3b_eec-circles.svg'), linear-gradient(180deg, #A1CBC2 0%, #E2F2F2 100%); background-size:140% auto, auto; background-position:center 20%, center; background-repeat:no-repeat; overflow:hidden; z-index:2; transition:width 1s cubic-bezier(.7,0,.2,1); } /* Vary the backdrop pattern per persona so the three cards feel distinct. */ .persona[data-index="1"] .persona-photo{ background-image:url('https://cdn.prod.website-files.com/6833e520890ced50e9cddcf3/6a5dc0b9d7f114f2930286b1_eec-polygons.svg'), linear-gradient(180deg, #A1CBC2 0%, #E2F2F2 100%); } .persona[data-index="2"] .persona-photo{ background-image:url('https://cdn.prod.website-files.com/6833e520890ced50e9cddcf3/6a5dc0b89833f1a0d97f5c3e_eec-building-blocks.svg'), linear-gradient(180deg, #A1CBC2 0%, #E2F2F2 100%); } .persona.is-active .persona-photo{width:42.5%;} .persona-photo::after{content:none;} .persona-photo-img{ position:absolute;right:0;bottom:0; height:100%;width:auto;max-width:none; display:block;opacity:1; z-index:1; } /* Duplicate "01 / 03" in the card removed - the header progress is the single source of truth. Kept the class so legacy markup doesn't break. */ .persona-photo-num{display:none;} .persona-content{ /* Initial state: text panel fills the entire card (full width, no photo column). As `is-active` fires, the photo overlay above expands and the content shrinks down + slides over to the right of it. */ position:absolute;inset:0; display:flex;flex-direction:column;justify-content:center; padding:clamp(36px,4vw,64px) clamp(40px,3.6vw,64px);text-align:left; background:linear-gradient(160deg,#37474F 0%,#262626 100%); gap:clamp(18px,1.6vw,28px); margin-left:0; width:100%; z-index:1; transition:margin-left 1s cubic-bezier(.7,0,.2,1), width 1s cubic-bezier(.7,0,.2,1), padding 1s cubic-bezier(.7,0,.2,1); } .persona.is-active .persona-content{ margin-left:42.5%; width:57.5%; } .persona-job{ font-size:clamp(48px,5vw,96px); font-weight:200;line-height:.95;letter-spacing:-.035em; color:rgba(255,255,255,.6);margin:0;text-align:left; } .persona-job strong{font-weight:500;color:#fff;} .persona-name{ font-size:12px;font-weight:400;color:rgba(255,255,255,.5); letter-spacing:.12em;margin:0;line-height:1.5; text-align:left;text-transform:uppercase; } .persona-name b{color:#CAEE10;font-weight:500;} .persona-quote{ font-size:clamp(19px,1.6vw,30px); font-weight:400;line-height:1.45;letter-spacing:-.01em; color:#fff;margin:0; position:relative;padding-left:14px; } .persona-quote::before{ content:"";position:absolute;left:0;top:6px;bottom:6px;width:1px;background:var(--lime); } .persona-stats,.persona-stat,.persona-stat-key,.persona-stat-val,.persona-watch,.persona-watch-play{display:none;} /* Animated entrance for the persona card content. Each persona starts hidden; when it gains .is-active, its inner pieces fade + rise in a slight stagger. Motion One (loaded below) drives the photo + headline; CSS handles the rest. */ .persona-job, .persona-quote, .persona-name, .persona-divider{ opacity:0; transform:translateY(18px); transition:opacity .6s cubic-bezier(.22,1,.36,1), transform .6s cubic-bezier(.22,1,.36,1); } .persona-divider{ transform:scaleX(.4);transform-origin:left; height:1px;background:rgba(255,255,255,.12); margin:8px 0; } .persona.is-active .persona-job {opacity:1;transform:none;transition-delay:.06s;} .persona.is-active .persona-name {opacity:1;transform:none;transition-delay:.18s;} .persona.is-active .persona-divider{opacity:1;transform:scaleX(1);transition-delay:.28s;} .persona.is-active .persona-quote {opacity:1;transform:none;transition-delay:.36s;} /* Photo fades + slides + zooms when the card becomes active */ .persona-photo-img{ opacity:0; transform:translateX(40px) scale(1.08); filter:saturate(.85); transition: opacity .9s cubic-bezier(.22,1,.36,1), transform .9s cubic-bezier(.22,1,.36,1), filter .6s ease; } .persona.is-active .persona-photo-img{ opacity:1; transform:translateX(0) scale(1); filter:saturate(1); transition-delay:.15s; } /* Section header (eyebrow + title + progress) gets a Motion-driven entrance once */ .s1b-eyebrow,.s1b-title,.s1b-progress{ opacity:0;transform:translateY(14px); transition:opacity .65s cubic-bezier(.22,1,.36,1), transform .65s cubic-bezier(.22,1,.36,1); } #s1b.is-in .s1b-eyebrow {opacity:1;transform:none;transition-delay:.0s;} #s1b.is-in .s1b-title {opacity:1;transform:none;transition-delay:.1s;} #s1b.is-in .s1b-progress{opacity:1;transform:none;transition-delay:.22s;} .s1b-hint{ position:absolute;left:50%;bottom:48px;transform:translateX(-50%);z-index:3; font-size:11px;font-weight:500; letter-spacing:.24em;text-transform:uppercase; color:rgba(255,255,255,.4); display:flex;align-items:center;gap:12px; } .s1b-hint-arrow{ display:inline-block;width:24px;height:1px;background:rgba(255,255,255,.4); position:relative; } .s1b-hint-arrow::after{ content:"";position:absolute;right:-1px;top:-3px; width:7px;height:7px; border-top:1px solid rgba(255,255,255,.4); border-right:1px solid rgba(255,255,255,.4); transform:rotate(45deg); } /* ─── Mobile (≤720px): stack persona body, stack s5 columns, restructure s3 ── */ @media (max-width: 720px){ /* Section header (persona section) shrinks for mobile */ .s1b-head{padding:96px 20px 0;} .s1b-head-inner{flex-direction:column;align-items:flex-start;gap:14px;max-width:none;} .s1b-head-left{max-width:none;padding-right:0;} .s1b-title{font-size:24px;} /* s1b mobile: native swipeable carousel (no vertical scrolljack). The structural overrides + fully-visible card styling live in the authoritative mobile block further down (search "Section 1B"). */ .s1b-progress{display:none;} /* Section 3 - How it works: stack each step's animation + text vertically */ #s3-wrap{height:auto;} #s3{position:relative;height:auto;overflow:visible;flex-direction:column;} .s3-spacer{display:none;} .s3-layout{flex-direction:column;height:auto;} .s3-lottie-col{ width:100%;border-right:0; padding:24px 20px 8px; gap:0; } .s3-lottie-stage{ position:relative; aspect-ratio:auto; max-width:none; height:auto; display:flex;flex-direction:column; } .s3-lottie-item{ position:relative; inset:auto; opacity:1;transform:none;pointer-events:auto; min-height:auto; margin-bottom:24px; padding:32px 24px 28px; } /* Hide the desktop step list - text now lives inside each card */ .s3-text-col{display:none;} /* Mobile step text shown only on small screens */ .s3-mobile-text{ margin-top:22px; padding-top:18px; border-top:1px solid rgba(13,28,30,.08); } .s3-mobile-text .s3-step-num{ color:#0F8200;font-size:11px;font-weight:700;letter-spacing:.16em; text-transform:uppercase;display:block;margin-bottom:6px; } .s3-mobile-text .s3-step-title{ font-size:22px;font-weight:600;color:var(--ink); letter-spacing:-.02em;line-height:1.2;margin-bottom:10px; } .s3-mobile-text .s3-step-body{ font-size:14px;color:var(--ink-light);line-height:1.55;font-weight:400; } /* Section 5 - Built for everyone: stack 3 columns */ .s5-cols{grid-template-columns:1fr;} .s5-col{ padding:32px 20px; border-right:0;border-bottom:1px solid var(--bd-light); } .s5-col:last-child{border-bottom:0;} .s5-head{flex-direction:column;align-items:flex-start;gap:18px;margin-bottom:32px;} .s5-title{font-size:34px;} /* Section 2 - contrast: stack the two halves */ #s2{flex-direction:column;} .s2-half{padding:60px 24px;min-height:auto;} .s2-divider{display:none;} /* Footer + s7 mobile breathing room */ #s7 .s7-h{font-size:38px;} #s7 .s7-video{max-width:100%;} } .s3-mobile-text{display:none;} @media (max-width: 720px){ .s3-mobile-text{display:block;} } /* ─── ████ S2 CONTRAST ██████████████████████████████████████████████ */ #s2{ background:#f3f4f6;flex-direction:row;overflow:hidden; /* Halves carry their own background - let them extend behind the nav instead of leaving a section-base 88px gap above them. */ padding-top:0; } .s2-half{ flex:1; /* No explicit height - let the row flex's default align-items:stretch pull each half to the section's full height. Setting height:100% here breaks when the parent uses min-height (its percentage resolves to auto), leaving empty space below the halves. */ align-self:stretch; display:flex;flex-direction:column; justify-content:center; align-items:flex-start; text-align:left; /* 108px top accounts for the 88px fixed nav + 20px breathing room. Content is justify-content:center so it still vertically centres in the available area below the nav. */ padding:108px 8% 80px; position:relative; } .s2-half.s2-before{ background:var(--dark); border-right:1px solid rgba(255,255,255,.05); /* Anchor for the absolute flashlight layer + the radial vignette */ overflow:hidden; } /* Subtle red rot creeping in from the edges - visual atmosphere for the 'chaos' side. Just enough to feel uneasy, not enough to dominate. */ .s2-before::before{ content:""; position:absolute;inset:0; pointer-events:none; background: radial-gradient(ellipse 60% 50% at 0% 100%, rgba(160,30,40,.18) 0%, transparent 60%), radial-gradient(ellipse 50% 40% at 100% 0%, rgba(160,30,40,.12) 0%, transparent 55%); z-index:0; } /* ── Cursor Flashlight: full-bleed sharp-edged overlay over each half, with a circular hole cut out at the cursor position. The pain/good snippets sit on the section UNDER the overlay and become visible only inside the hole. Mouse coordinates are pushed onto --mx/--my on the half element by JS, then read by the overlay mask. */ .s2-pain-layer, .s2-good-layer{ position:absolute;inset:0; pointer-events:none; z-index:1; /* Hidden until the flashlight activates - otherwise the snippets sit visible as chaotic overlay text before the user moves the cursor in. The .s2-darken / .s2-lime overlay above handles the reveal so the snippets just sit in place once shown. */ opacity:0; transition:opacity .35s ease .15s; } .s2-before.flashlight-touched .s2-pain-layer, .s2-after.flashlight-touched .s2-good-layer{opacity:1;} .s2-half{--mx:50%; --my:50%;} .s2-darken, .s2-lime{ position:absolute;inset:0; pointer-events:none; z-index:4; opacity:0; transition:opacity .35s ease; /* Sharp-edged radial mask: solid outside the circle, fully transparent inside. The 0.5px buffer keeps the edge crisp without aliasing. */ -webkit-mask-image: radial-gradient(circle 180px at var(--mx) var(--my), transparent 0%, transparent calc(100% - 0.5px), #000 100%); mask-image: radial-gradient(circle 180px at var(--mx) var(--my), transparent 0%, transparent calc(100% - 0.5px), #000 100%); -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat; } .s2-darken{background:#000;} .s2-lime{ /* Brand teal-green wash; matches the .lime / hub colour family but deeper so the hole reads as a sharp 'spotlight' on the good content */ background:#0F8200; } .s2-before.flashlight-touched .s2-darken, .s2-after.flashlight-touched .s2-lime{ opacity:1; } /* Thin glowing rim on the inside edge of the circle so the boundary feels intentional (not just a CSS mask). Drawn with box-shadow on a tiny transparent ring positioned at the cursor. */ .s2-half .s2-spot{ position:absolute; left:var(--mx);top:var(--my); width:360px;height:360px; margin:-180px 0 0 -180px; border-radius:50%; pointer-events:none; z-index:5; opacity:0; transition:opacity .3s ease; box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 24px rgba(0,0,0,.5); } .s2-before .s2-spot{ box-shadow: inset 0 0 0 1px rgba(255,255,255,.18), 0 0 24px rgba(0,0,0,.5); } .s2-after .s2-spot{ box-shadow: inset 0 0 0 1px rgba(13,28,30,.35), inset 0 0 30px rgba(202,238,16,.35), 0 0 24px rgba(15,130,0,.5); } .s2-before.flashlight-touched .s2-spot, .s2-after.flashlight-touched .s2-spot{opacity:1;} .s2-pain{ position:absolute; font-family:'Geist Mono','SF Mono',ui-monospace,monospace; font-size:12px;font-weight:500; letter-spacing:-.01em; color:rgba(255,120,120,.92); text-shadow:0 0 14px rgba(255,80,80,.55); white-space:nowrap; /* Gentle drift so the snippets feel alive when revealed */ animation:painFloat 6s ease-in-out infinite; } .s2-pain.tilt-l{transform:rotate(-3deg);} .s2-pain.tilt-r{transform:rotate(2.5deg);} .s2-pain .pain-meta{ display:block; font-size:9.5px;font-weight:400; color:rgba(255,170,170,.55); letter-spacing:.04em;text-transform:uppercase; margin-top:2px; } @keyframes painFloat{ 0%,100%{transform:translateY(0) rotate(var(--rt,0deg));} 50% {transform:translateY(-4px) rotate(var(--rt,0deg));} } /* Good-news snippets revealed by the lime flashlight (layer styling is shared with .s2-pain-layer above). */ .s2-good{ position:absolute; font-family:'Geist Mono','SF Mono',ui-monospace,monospace; font-size:12px;font-weight:500; letter-spacing:-.01em; color:#0d1c1e; white-space:nowrap; animation:painFloat 6s ease-in-out infinite; } .s2-good::before{ content:"✓"; display:inline-block;margin-right:8px; color:#0F8200;font-weight:700; } .s2-good.tilt-l{transform:rotate(-2.5deg);} .s2-good.tilt-r{transform:rotate(2deg);} .s2-good .good-meta{ display:block; font-size:9.5px;font-weight:400; color:rgba(13,28,30,.55); letter-spacing:.04em;text-transform:uppercase; margin-top:2px;margin-left:18px; } /* Hint message that fades in until the user starts moving */ .s2-flashlight-hint{ position:absolute; left:50%;bottom:48px; transform:translateX(-50%); font-size:11px;font-weight:600; letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.4); pointer-events:none; z-index:2; display:flex;align-items:center;gap:10px; animation:hintPulse 2.4s ease-in-out infinite; } .s2-flashlight-hint::before, .s2-flashlight-hint::after{ content:"";width:24px;height:1px;background:rgba(255,255,255,.2); } .s2-before.flashlight-touched .s2-flashlight-hint{ opacity:0;transition:opacity .8s ease; } @keyframes hintPulse{ 0%,100%{opacity:.55;} 50% {opacity:.95;} } /* Mobile: drop the flashlight interaction entirely, let the snippets show as static lists so each side still says something. */ @media (max-width:720px){ .s2-pain-layer, .s2-good-layer{ position:relative;inset:auto; display:grid;grid-template-columns:1fr;gap:14px; margin-top:24px; } .s2-pain, .s2-good{ position:relative;left:auto!important;top:auto!important; transform:none!important;animation:none!important; white-space:normal; } .s2-pain.tilt-l,.s2-pain.tilt-r, .s2-good.tilt-l,.s2-good.tilt-r{transform:none!important;} .s2-flashlight-hint{display:none;} .s2-darken,.s2-lime,.s2-spot{display:none;} } /* (Old dot-cursor flashlight pseudos removed - cursor is now an arrow SVG and the flashlight state is communicated by tag-hiding + arrow opacity tweak only, defined further up.) */ /* ─── ████ MONTH-END DASHBOARD (replaces old "how it works") ████████ */ .me-dashboard{ width:100%;height:100%; display:flex;flex-direction:column; background: radial-gradient(ellipse 80% 50% at 50% 0%, rgba(202,238,16,.05) 0%, transparent 60%), #0c0c10; color:#fff; font-family:'Aeonik',-apple-system,'Helvetica Neue',sans-serif; position:relative; } .me-topbar{ flex:0 0 auto; display:flex;align-items:center;justify-content:space-between; padding:18px clamp(24px,3vw,48px); border-bottom:1px solid rgba(255,255,255,.06); background:rgba(255,255,255,.015); } .me-brand{display:flex;align-items:center;gap:14px;} .me-logo{ font-size:18px;font-weight:700;letter-spacing:-.03em;color:#fff; } .me-divider{width:1px;height:14px;background:rgba(255,255,255,.18);} .me-period{ font-size:12px;font-weight:500; color:rgba(255,255,255,.55);letter-spacing:.02em; } .me-day-pill{ display:inline-flex;align-items:center;gap:8px; font-size:12px;font-weight:600; letter-spacing:.04em;text-transform:uppercase; color:#fff; background:rgba(202,238,16,.12); border:1px solid rgba(202,238,16,.3); padding:7px 14px;border-radius:999px; } .me-pulse{ width:7px;height:7px;border-radius:50%; background:var(--lime); box-shadow:0 0 8px var(--lime); animation:mePulse 1.6s ease-in-out infinite; } @keyframes mePulse{ 0%,100%{transform:scale(1);opacity:1;} 50% {transform:scale(.7);opacity:.55;} } .me-body{ flex:1 1 auto; display:grid; grid-template-columns:300px 1fr; gap:0; min-height:0; } /* ── Left: calendar week ────────────────────────────────────────────── */ .me-cal{ padding:88px clamp(20px,2vw,32px) 32px; border-right:1px solid rgba(255,255,255,.06); background:linear-gradient(180deg,#37474F 0%,#262626 100%); display:flex;flex-direction:column;justify-content:center;gap:18px; } .me-cal-label{ font-size:11px;font-weight:700;letter-spacing:.18em;text-transform:uppercase; color:rgba(255,255,255,.4); } .me-cal-grid{display:flex;flex-direction:column;gap:8px;} .me-day{ position:relative; display:grid;grid-template-columns:36px 1fr auto;gap:14px;align-items:center; padding:14px 14px;border-radius:10px; background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.04); transition:background .4s ease, border-color .4s ease, color .4s ease, opacity .4s ease; opacity:.5; cursor:pointer; } .me-day:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.1);} .me-day:focus-visible{outline:2px solid var(--lime);outline-offset:2px;} .me-day-num{ font-family:'Geist Mono','SF Mono',ui-monospace,monospace; font-size:18px;font-weight:600; color:rgba(255,255,255,.6); letter-spacing:-.04em; } .me-day-task{ font-size:13px;color:rgba(255,255,255,.65); letter-spacing:-.005em; } .me-day > div, .me-day > span{position:relative;z-index:1;} .me-day-check{ width:20px;height:20px;border-radius:50%; background:transparent; border:1.5px solid rgba(255,255,255,.15); position:relative; transition:background .4s ease, border-color .4s ease; } .me-day-check::after{ content:"";position:absolute;left:50%;top:50%; width:8px;height:5px; border-left:2px solid #0a0a0d;border-bottom:2px solid #0a0a0d; transform:translate(-50%,-65%) rotate(-45deg) scale(0); transform-origin:center; transition:transform .35s cubic-bezier(.22,1,.36,1); } /* Day states: active = current day, done = past day */ .me-day.is-active{ background:rgba(202,238,16,.06); border-color:rgba(202,238,16,.35); opacity:1; } .me-day.is-active .me-day-num{color:var(--lime);} .me-day.is-active .me-day-task{color:rgba(255,255,255,.9);} .me-day.is-done{ opacity:1; } .me-day.is-done .me-day-num{color:rgba(202,238,16,.7);text-decoration:line-through;text-decoration-color:rgba(202,238,16,.4);} .me-day.is-done .me-day-task{color:rgba(255,255,255,.55);text-decoration:line-through;text-decoration-color:rgba(255,255,255,.2);} .me-day.is-done .me-day-check{ background:var(--lime);border-color:var(--lime); } .me-day.is-done .me-day-check::after{ transform:translate(-50%,-65%) rotate(-45deg) scale(1); } .me-progress{display:flex;align-items:center;gap:12px;margin-top:auto;} .me-progress-bar{ flex:1;height:4px;border-radius:999px; background:rgba(255,255,255,.08);overflow:hidden; } .me-progress-fill{ height:100%;width:0%; background:linear-gradient(90deg,#0F8200,var(--lime)); border-radius:999px; transition:width .35s cubic-bezier(.22,1,.36,1); } .me-progress-pct{ font-family:'Geist Mono','SF Mono',ui-monospace,monospace; font-size:11px;font-weight:600;letter-spacing:.04em;color:#fff; min-width:36px;text-align:right; } .me-status{ font-size:11px;font-weight:600;letter-spacing:.16em;text-transform:uppercase; color:rgba(255,255,255,.45); padding-top:12px;border-top:1px solid rgba(255,255,255,.06); transition:color .4s ease; } .me-dashboard[data-step="4"] .me-status{color:var(--lime);} /* ── Right: live stage (panels stacked, crossfade per step) ─────────── */ .me-stage{ position:relative; padding:clamp(28px,3.4vw,48px); display:flex;flex-direction:column; min-height:0; overflow:hidden; } .me-stage-eyebrow{display:none;} /* Per-step header - shown only on mobile where each pane stacks as its own card and needs its own "Step 01" label. On desktop the left calendar already labels the steps. */ .me-pane-step{display:none;} .me-mobile-heading{display:none;} .me-pane{ position:absolute; /* Content starts near the top - generous top inset clears the 88px sticky nav with breathing room. Vertical centering removed; content stacks from the top of the pane. */ top:140px;right:clamp(28px,3.4vw,48px); bottom:clamp(28px,3.4vw,48px);left:clamp(28px,3.4vw,48px); display:flex;flex-direction:column;justify-content:flex-start;gap:18px; opacity:0; transform:translateY(20px); pointer-events:none; transition:opacity .55s ease, transform .65s cubic-bezier(.22,1,.36,1); } .me-pane.is-active{ opacity:1;transform:none; pointer-events:auto; } .me-pane-h{ font-size:clamp(24px,2.4vw,36px); font-weight:600;line-height:1.15;letter-spacing:-.025em; color:#fff;margin:0; max-width:clamp(480px,50vw,820px); /* Stack the number above the headline so all 5 steps render with the same rhythm regardless of headline length. Previously used flex-wrap, which let short headlines (e.g. step 02 "Receipts captured in seconds") sit inline with the number while longer ones wrapped - inconsistent visual rhythm across steps. */ display:flex;flex-direction:column;align-items:flex-start; } .me-pane-h-n{ font-family:'Geist Mono','SF Mono',ui-monospace,monospace; font-size:.9em;font-weight:600;letter-spacing:.02em; color:#C1E700; margin-bottom:8px; } .me-pane-sub{ font-size:14px;font-weight:400;line-height:1.55; color:rgba(255,255,255,.55); max-width:clamp(480px,50vw,820px);margin:0; } /* Day 1: transaction feed */ /* Two-column row: tx feed on the left, card + push notification on the right. */ .me-tx-row{ display:flex;gap:32px; align-items:flex-start;margin-top:8px; } .me-tx-side{ display:flex;flex-direction:column;align-items:center;gap:18px; width:clamp(220px,22vw,320px); } .me-tx-card{ width:100%;height:auto;display:block; } /* iOS-style push notification - slides in after the Coles row lands */ .me-push{ width:100%; display:grid;grid-template-columns:38px 1fr;gap:12px; align-items:start; padding:12px 14px;border-radius:16px; background:#FAFAFA; border:1px solid #ECEFF1; box-shadow:1px 1px 2px rgba(19,31,46,.06), 1px 1px 3px rgba(19,31,46,.01); font-family:-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; opacity:0;transform:translateY(-12px) scale(.96); transition:opacity .55s cubic-bezier(.22,1,.36,1), transform .55s cubic-bezier(.22,1,.36,1); } .me-pane.is-active .me-push{ opacity:1;transform:none; transition-delay:1.3s; } .me-push-icon{ width:38px;height:38px;border-radius:9px; background:#0a0a0d; display:flex;align-items:center;justify-content:center; overflow:hidden; } .me-push-icon img{width:26px;height:26px;object-fit:contain;display:block;} .me-push-body{min-width:0;} .me-push-meta{ display:flex;align-items:center;gap:8px; font-size:11px;line-height:1; color:rgba(10,10,13,.55); margin-bottom:4px; } .me-push-app{ font-weight:600;letter-spacing:.02em;color:#0a0a0d; } .me-push-time{margin-left:auto;} .me-push-text{ margin:0;font-size:13px;line-height:1.4; color:#0a0a0d;font-weight:400; } .me-tx-feed{ display:flex;flex-direction:column;gap:6px; max-width:480px; } .me-pane.is-active .me-tx{ animation:meTxIn .6s cubic-bezier(.22,1,.36,1) both; animation-delay:var(--d, 0s); } .me-tx{ display:grid;grid-template-columns:30px 130px 1fr auto;gap:14px;align-items:center; padding:9px 14px;border-radius:10px; background:#f4f6f8; border:1px solid rgba(0,0,0,.06); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); } .me-tx-icon{ width:30px;height:30px;border-radius:8px; background:#fff; border:1px solid rgba(0,0,0,.06); display:flex;align-items:center;justify-content:center; color:#0a0a0d; } .me-tx-icon svg{width:15px;height:15px;stroke:currentColor;stroke-width:1.8;fill:none;stroke-linecap:round;stroke-linejoin:round;} .me-tx-merch{ font-size:13px;font-weight:500;color:#0a0a0d;letter-spacing:-.01em; display:flex;flex-direction:column;gap:1px; } .me-tx-merch small{ font-family:'Geist Mono','SF Mono',ui-monospace,monospace; font-size:9.5px;color:rgba(10,10,13,.5);font-weight:400; } .me-tx-who{ font-size:12px;font-weight:500;color:rgba(10,10,13,.65); letter-spacing:-.005em;white-space:nowrap; text-align:left; } .me-tx-amt{ font-family:'Geist Mono','SF Mono',ui-monospace,monospace; font-size:14px;font-weight:600;color:#0a0a0d;letter-spacing:-.02em; } @keyframes meTxIn{ from{opacity:0;transform:translateY(14px);} to {opacity:1;transform:none;} } /* Result statement - non-clickable indicator that sits inline like the CTA (same shape + position) but uses an outlined chip style so it reads as data/status rather than an action button. Lime fill is reserved for actual CTAs (Steps 02 + 04). Hidden by default; fades in once the pane content above has settled (see .me-pane.is-active rule below). */ .me-pane-stat{ margin-top:18px; align-self:flex-start; display:inline-flex;align-items:baseline;gap:6px; padding:11px 20px; background:transparent; color:var(--ink); font-family:inherit; font-size:13px;font-weight:600;letter-spacing:-.005em; border:1.5px solid rgba(13,28,30,.18); border-radius:999px; opacity:0;transform:translateY(8px); transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .me-pane.is-active .me-pane-stat{ opacity:1;transform:none;transition-delay:1.4s; } .me-stat-n{ font-family:inherit; font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit; } .me-stat-l{ font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit; } .me-stat-l::before{content:"· ";} /* Day 2: receipt + OCR */ .me-receipt-row{ display:grid;grid-template-columns:auto 1fr;gap:32px;align-items:center; margin-top:12px; } .me-receipt{ width:190px;min-height:260px; background:#fafaf7; color:#0a0a0d; border-radius:3px; box-shadow:0 18px 40px rgba(0,0,0,.5); padding:18px 16px 24px; position:relative;overflow:hidden; font-family:'Geist Mono','SF Mono',ui-monospace,monospace; font-size:10px;letter-spacing:.02em; opacity:0;transform:translateY(8px) scale(.98); transition:opacity .55s ease, transform .55s cubic-bezier(.22,1,.36,1); /* zig-zag torn-paper bottom edge */ --tooth:8px; -webkit-mask: linear-gradient(#000 0 0) top/100% calc(100% - var(--tooth)) no-repeat, conic-gradient(from -45deg at 50% 0, #000 90deg, transparent 0) bottom/16px var(--tooth) repeat-x; mask: linear-gradient(#000 0 0) top/100% calc(100% - var(--tooth)) no-repeat, conic-gradient(from -45deg at 50% 0, #000 90deg, transparent 0) bottom/16px var(--tooth) repeat-x; } .me-pane.is-active .me-receipt{opacity:1;transform:none;} /* Scanning bar - runs after the receipt is visible */ .me-receipt-scan{ position:absolute;left:0;right:0;height:34px; background:linear-gradient(180deg, rgba(202,238,16,0) 0%, rgba(202,238,16,.55) 50%, rgba(202,238,16,0) 100%); pointer-events:none;opacity:0;top:-34px; } .me-pane.is-active .me-receipt-scan{ opacity:1; animation:meScan 1.6s cubic-bezier(.4,0,.2,1) .55s 2; } @keyframes meScan{ 0% {top:-34px;} 100%{top:100%;} } .me-receipt-head{ text-align:center;padding-bottom:8px; border-bottom:1px dashed rgba(0,0,0,.25); margin-bottom:8px; } .me-receipt-name{ font-family:'Aeonik',-apple-system,sans-serif; font-size:13px;font-weight:700;letter-spacing:.08em; } .me-receipt-addr{font-size:9px;color:rgba(0,0,0,.55);margin-top:2px;} .me-receipt-line{ display:flex;justify-content:space-between;gap:8px; padding:2px 0;line-height:1.4; } .me-receipt-line.dim{color:rgba(0,0,0,.6);} .me-receipt-divider{ height:0;border-top:1px dashed rgba(0,0,0,.25); margin:6px 0; } .me-receipt-line.total{ font-weight:700;font-size:11px; padding-top:4px; } .me-receipt-foot{ text-align:center;margin-top:10px;font-size:8.5px; color:rgba(0,0,0,.5);letter-spacing:.05em; } .me-receipt-fields{display:flex;flex-direction:column;gap:10px;max-width:380px;} .me-field{ display:grid;grid-template-columns:16px 1fr auto;align-items:center;gap:12px; padding:10px 14px;border-radius:10px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); font-size:13px;color:rgba(255,255,255,.55); opacity:0;transform:translateX(-8px); transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .me-field-ai{ width:14px;height:14px; color:rgba(120,124,130,.85); display:inline-flex;align-items:center;justify-content:center; } .me-field-ai svg{ width:14px;height:14px;fill:none;stroke:currentColor; stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round; } /* Empty rows fade in while the receipt is being scanned (~0.8s onward) */ .me-pane.is-active .me-field{opacity:1;transform:none;} .me-pane.is-active .me-field:nth-child(1){transition-delay:.85s;} .me-pane.is-active .me-field:nth-child(2){transition-delay:1.00s;} .me-pane.is-active .me-field:nth-child(3){transition-delay:1.15s;} .me-pane.is-active .me-field:nth-child(4){transition-delay:1.30s;} .me-pane.is-active .me-field:nth-child(5){transition-delay:1.45s;} .me-field-v{ font-family:'Geist Mono','SF Mono',ui-monospace,monospace; color:#fff;font-weight:500; display:inline-block;overflow:hidden;white-space:nowrap; clip-path:inset(0 100% 0 0); transition:clip-path .45s steps(20, end); } /* Values type in only after the scan has finished sweeping the receipt */ .me-pane.is-active .me-field-v{clip-path:inset(0 0 0 0);} .me-pane.is-active .me-field:nth-child(1) .me-field-v{transition-delay:2.35s;} .me-pane.is-active .me-field:nth-child(2) .me-field-v{transition-delay:2.70s;} .me-pane.is-active .me-field:nth-child(3) .me-field-v{transition-delay:3.05s;} .me-pane.is-active .me-field:nth-child(4) .me-field-v{transition-delay:3.40s;} .me-pane.is-active .me-field:nth-child(5) .me-field-v{transition-delay:3.75s;} /* Day 3: policy rules */ .me-rules{display:flex;flex-direction:column;gap:10px;margin-top:8px;max-width:520px;} .me-rule{ display:flex;align-items:center;gap:14px; padding:14px 18px;border-radius:12px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); font-size:13px;color:rgba(255,255,255,.78); opacity:0;transform:translateY(8px); transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .me-pane.is-active .me-rule{opacity:1;transform:none;} .me-pane.is-active .me-rule:nth-child(1){transition-delay:.1s;} .me-pane.is-active .me-rule:nth-child(2){transition-delay:.3s;} .me-pane.is-active .me-rule:nth-child(3){transition-delay:.5s;} .me-pane.is-active .me-rule:nth-child(4){transition-delay:.7s;} .me-rule-tick{ width:24px;height:24px;border-radius:50%; background:rgba(202,238,16,.18);color:var(--lime); display:flex;align-items:center;justify-content:center; font-size:13px;font-weight:700; } .me-rule-warn{ background:#FFF8EB!important; border:1px solid #FFD080!important; color:#0a0a0d; } .me-rule-warn .me-rule-tick{ background:transparent;color:#FFD080; width:auto;height:auto; } .me-rule-warn .me-rule-tick img{ width:20px;height:20px;display:block; } .me-verdict{ margin-top:18px; align-self:flex-start; display:inline-flex;align-items:baseline;gap:6px; padding:11px 20px; background:transparent; color:var(--ink); font-family:inherit; font-size:13px;font-weight:600;letter-spacing:-.005em; border:1.5px solid rgba(13,28,30,.18); border-radius:999px; opacity:0;transform:translateY(8px); transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .me-pane.is-active .me-verdict{ opacity:1;transform:none;transition-delay:1.0s; } .me-verdict-tag{ font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit; } .me-verdict-meta{ font-size:inherit;font-weight:inherit;color:inherit;letter-spacing:inherit; } .me-verdict-meta::before{content:"· ";} /* Day 4: approvals - scripted flow: rows appear → checkboxes tick → Approve CTA appears + animates a "click" → "Approved" tags fade in. */ .me-approve-list{display:flex;flex-direction:column;gap:8px;margin-top:8px;max-width:600px;} .me-approve-item{ display:grid;grid-template-columns:22px 1fr auto auto;gap:16px;align-items:center; padding:14px 18px;border-radius:10px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.06); font-size:13px; opacity:0;transform:translateX(10px); transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1), background .3s ease; } .me-pane.is-active .me-approve-item{opacity:1;transform:none;} .me-pane.is-active .me-approve-item:nth-child(1){transition-delay:.1s;} .me-pane.is-active .me-approve-item:nth-child(2){transition-delay:.3s;} .me-pane.is-active .me-approve-item:nth-child(3){transition-delay:.5s;} .me-approve-who{color:rgba(255,255,255,.85);font-weight:500;} .me-approve-amt{ font-family:'Geist Mono','SF Mono',ui-monospace,monospace; color:#fff;font-weight:600;font-size:14px; } /* Row checkbox: empty by default, ticks lime when row is "selected" */ .me-approve-check{ width:20px;height:20px;border-radius:5px; border:1.5px solid rgba(255,255,255,.28); background:transparent; display:flex;align-items:center;justify-content:center; transition:background .25s ease, border-color .25s ease; } .me-approve-check svg{ width:13px;height:13px; stroke:var(--ink);stroke-width:2.6;fill:none; stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:18;stroke-dashoffset:18; transition:stroke-dashoffset .35s cubic-bezier(.22,1,.36,1); } .me-pane.is-active .me-approve-item .me-approve-check{ background:var(--lime);border-color:var(--lime); } .me-pane.is-active .me-approve-item .me-approve-check svg{stroke-dashoffset:0;} .me-pane.is-active .me-approve-item:nth-child(1) .me-approve-check{transition-delay:.9s;} .me-pane.is-active .me-approve-item:nth-child(2) .me-approve-check{transition-delay:1.1s;} .me-pane.is-active .me-approve-item:nth-child(3) .me-approve-check{transition-delay:1.3s;} .me-pane.is-active .me-approve-item:nth-child(1) .me-approve-check svg{transition-delay:1.0s;} .me-pane.is-active .me-approve-item:nth-child(2) .me-approve-check svg{transition-delay:1.2s;} .me-pane.is-active .me-approve-item:nth-child(3) .me-approve-check svg{transition-delay:1.4s;} /* "Approved" tag - hidden until after the CTA "click" fires */ .me-approve-act{ font-size:12px;font-weight:600;letter-spacing:-.005em; color:#0D9B0D; padding:5px 10px;border-radius:6px; background:#F2FCF2; border:1px solid #AFE6A5; opacity:0;transform:scale(.88); transition:opacity .35s ease, transform .35s cubic-bezier(.22,1,.36,1); } .me-pane.is-active .me-approve-item .me-approve-act{opacity:1;transform:none;} .me-pane.is-active .me-approve-item:nth-child(1) .me-approve-act{transition-delay:2.4s;} .me-pane.is-active .me-approve-item:nth-child(2) .me-approve-act{transition-delay:2.6s;} .me-pane.is-active .me-approve-item:nth-child(3) .me-approve-act{transition-delay:2.8s;} .me-approve-cta{ margin-top:18px;align-self:flex-start; background:var(--lime);color:var(--ink); font-family:inherit;font-size:14px;font-weight:700; padding:13px 22px;border-radius:999px; border:1.5px solid #C1E700; letter-spacing:-.01em;cursor:pointer; box-shadow:none; opacity:0;transform:translateY(8px); transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1), background .25s ease, border-color .25s ease; } .me-pane.is-active .me-approve-cta{ opacity:1;transform:none;transition-delay:1.6s; animation:meApproveClick .42s cubic-bezier(.22,1,.36,1) 2.05s both; } @keyframes meApproveClick{ 0% {transform:none;} 45% {transform:scale(.94);} 100%{transform:none;} } .me-approve-cta:hover{ background:#C1E700; transform:translateY(-2px); } /* Day 5: ERP sync - Weel hub on the left, connector lines, 3 ERPs right. */ .me-sync{ position:relative; width:100%;max-width:560px; height:280px; margin:16px 0 12px; display:grid; grid-template-columns:110px 1fr 220px; align-items:center; } /* Weel hub (left) */ .me-sync-hub{ grid-column:1/2; display:flex;align-items:center;justify-content:center; width:100px;height:100px; border-radius:20px; background:#f4f6f8; border:1px solid rgba(0,0,0,.08); box-shadow:inset 0 1px 0 rgba(255,255,255,.6); position:relative;z-index:2; opacity:0;transform:scale(.82); transition:opacity .5s ease, transform .55s cubic-bezier(.22,1,.36,1); } .me-pane.is-active .me-sync-hub{opacity:1;transform:scale(1);} .me-sync-hub-logo{ display:block;margin:auto; width:70%;height:70%; object-fit:contain;object-position:center; animation:meHubSpin 14s linear infinite; transform-origin:50% 50%; } @keyframes meHubSpin{ to{transform:rotate(360deg);} } /* Connector SVG (middle) - spans the gap between hub and ERPs */ .me-sync-svg{ position:absolute;left:0;top:0; width:100%;height:100%; pointer-events:none; z-index:1; } .me-sync-line{ fill:none; stroke:rgba(160,196,198,.55); stroke-width:1.5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:600; stroke-dashoffset:600; } .me-pane.is-active .me-sync-line{ animation:meSyncDraw 1.1s cubic-bezier(.22,1,.36,1) forwards; } .me-pane.is-active .me-sync-line:nth-of-type(1){animation-delay:.35s;} .me-pane.is-active .me-sync-line:nth-of-type(2){animation-delay:.45s;} .me-pane.is-active .me-sync-line:nth-of-type(3){animation-delay:.55s;} .me-pane.is-active .me-sync-line:nth-of-type(4){animation-delay:.65s;} .me-pane.is-active .me-sync-line:nth-of-type(5){animation-delay:.75s;} @keyframes meSyncDraw{ to{stroke-dashoffset:0;} } /* Travelling teal packets along each path - animated via JS once lines are drawn */ .me-sync-packet{ opacity:0; fill:#6EA1A4; filter:drop-shadow(0 0 5px rgba(110,161,164,.55)); } .me-pane.is-active .me-sync-packet{ opacity:1; transition:opacity .3s ease 1.6s; } /* ERPs (right column) - square tiles with bigger logos inside */ /* Staggered two-column grid of ERP tiles. Tiles are absolutely positioned by percentage so they track the box at every breakpoint (the connector SVG stretches to match). Inner column hugs left:0; outer column left:54.5%. translateY(-50%) pins each tile's centre to its row, leaving the scale on the same transform for a clean entrance. */ .me-sync-erps{ grid-column:3/4; position:relative; width:100%;height:100%; z-index:2; } .me-sync-erp{ position:absolute;left:0; display:flex;align-items:center;justify-content:center; width:72px;height:72px;padding:12px; background:#f4f6f8; border:1px solid rgba(0,0,0,.06); border-radius:16px; box-shadow:inset 0 1px 0 rgba(255,255,255,.6), 0 6px 16px rgba(15,40,50,.06); opacity:0;transform:translateY(-50%) scale(.9); transition:opacity .45s ease, transform .5s cubic-bezier(.22,1,.36,1); } .me-sync-erp.is-wordmark{padding:14px 9px;} .me-sync-erp img{ width:100%;height:auto;max-height:100%;display:block;object-fit:contain; } .me-pane.is-active .me-sync-erp{opacity:1;transform:translateY(-50%) scale(1);} .me-sync-erp:nth-child(1){left:0; top:17.14%;} .me-sync-erp:nth-child(2){left:54.5%; top:33.57%;} .me-sync-erp:nth-child(3){left:0; top:50%;} .me-sync-erp:nth-child(4){left:54.5%; top:66.43%;} .me-sync-erp:nth-child(5){left:0; top:82.86%;} .me-pane.is-active .me-sync-erp:nth-child(1){transition-delay:1.35s;} .me-pane.is-active .me-sync-erp:nth-child(2){transition-delay:1.5s;} .me-pane.is-active .me-sync-erp:nth-child(3){transition-delay:1.65s;} .me-pane.is-active .me-sync-erp:nth-child(4){transition-delay:1.8s;} .me-pane.is-active .me-sync-erp:nth-child(5){transition-delay:1.95s;} /* Final reveal: "Every expense complete." types out as Step 05 plays */ .me-final{ margin-top:18px; align-self:flex-start; display:inline-flex;align-items:baseline;gap:2px; padding:11px 20px; background:transparent; color:var(--ink); font-family:inherit; font-size:13px;font-weight:600;letter-spacing:-.005em; border:1.5px solid rgba(13,28,30,.18); border-radius:999px; opacity:0;transform:translateY(8px); transition:opacity .4s ease, transform .4s cubic-bezier(.22,1,.36,1); } .me-pane.is-active .me-final{ opacity:1;transform:none;transition-delay:1.9s; } .me-final-text{ white-space:pre; /* preserves trailing space typed in */ } .me-final-caret{ display:inline-block; width:2px;height:1em; background:var(--ink); margin-left:2px; animation:meCaretBlink 0.7s steps(2) infinite; opacity:0; /* hidden until typing begins */ } .me-final.is-typing .me-final-caret{opacity:1;} @keyframes meCaretBlink{ 50%{opacity:0;} } /* ── Desktop: right column (stage) goes white for a less-busy read ──── Calendar sidebar stays dark; only the live-step pane area flips. */ @media (min-width:721px){ .me-stage{background:#fff;} .me-pane-h{color:var(--ink);} .me-pane-sub{color:var(--ink-light);} /* Cards on white bg use a subtle ink tint */ .me-tx, .me-field, .me-rule, .me-approve-item{ background:rgba(13,28,30,.025); border-color:rgba(13,28,30,.07); } .me-tx-icon{ background:rgba(13,28,30,.06); color:var(--ink-light); } .me-tx-merch{color:var(--ink);} .me-tx-merch small{color:var(--ink-light);} .me-tx-amt{color:var(--ink);} /* near-black on light row */ .me-field{color:var(--ink-light);} .me-field-v{color:var(--ink);} .me-rule{color:var(--ink);} .me-rule-tick{background:rgba(15,130,0,.12);color:#0F8200;} .me-rule-warn{ background:rgba(255,180,60,.08); border-color:rgba(180,120,40,.25); } .me-rule-warn .me-rule-tick{ background:rgba(180,120,40,.18); color:#8a5b15; } /* Result pills (me-pane-stat / me-verdict / me-final / me-approve-cta) use a unified lime-bg + ink-text style across all stages, so no stage-specific colour overrides are needed. */ .me-approve-who{color:var(--ink);} .me-approve-amt{color:var(--ink);} .me-approve-act{ background:#F2FCF2; border-color:#AFE6A5; color:#0D9B0D; } /* Sync hub + ERP tiles stay dark on the white stage - they read as real brand chips against the lighter backdrop. */ /* Final typed line on white stage - ink */ .me-final{color:var(--ink);} .me-final-caret{background:var(--ink);} } /* ── Large screens: scale the whole dashboard up ────────────────────── The dashboard is built in fixed px, so on >1500px displays it reads tiny against the full-bleed sticky panel (the rest of the page uses vw-based type that keeps growing). Re-express the key dimensions as fluid clamp()s. Floors equal the current sizes and the vw term is tuned to hit that floor at exactly 1500px, so there's no jump at the breakpoint - everything just grows smoothly above it. */ @media (min-width:1500px){ /* Left calendar column */ .me-body{grid-template-columns:clamp(300px,20vw,400px) 1fr;} .me-cal-label{font-size:clamp(11px,.75vw,15px);} .me-day{padding:clamp(14px,1vw,20px);} .me-day-num{font-size:clamp(18px,1.2vw,26px);} .me-day-task{font-size:clamp(13px,.9vw,18px);} .me-progress-pct,.me-status{font-size:clamp(11px,.75vw,15px);} /* Stage - shared */ .me-pane{top:clamp(140px,9.33vw,200px);gap:clamp(18px,1.2vw,28px);} .me-pane-h{font-size:clamp(36px,2.4vw,56px);} .me-pane-sub{font-size:clamp(14px,.95vw,21px);} /* Step 02 - receipt + OCR fields */ .me-receipt-row{gap:clamp(32px,2.13vw,56px);} .me-receipt{ width:clamp(190px,12.7vw,300px); min-height:clamp(260px,17.3vw,380px); font-size:clamp(10px,.67vw,15px); padding:clamp(18px,1.2vw,26px) clamp(16px,1.07vw,22px) clamp(24px,1.6vw,34px); } .me-receipt-name{font-size:1.3em;} .me-receipt-addr{font-size:.9em;} .me-receipt-line.total{font-size:1.1em;} .me-receipt-foot{font-size:.85em;} .me-receipt-fields{max-width:clamp(380px,25.3vw,560px);gap:clamp(10px,.7vw,16px);} .me-field{font-size:clamp(13px,.9vw,18px);padding:clamp(10px,.7vw,15px) clamp(14px,.95vw,20px);} /* Step 03 - policy rules */ .me-rules{max-width:clamp(520px,34.7vw,760px);gap:clamp(10px,.7vw,16px);} .me-rule{font-size:clamp(13px,.9vw,18px);padding:clamp(14px,1vw,20px) clamp(18px,1.2vw,26px);} .me-rule-tick{width:clamp(24px,1.6vw,34px);height:clamp(24px,1.6vw,34px);font-size:clamp(13px,.9vw,18px);} .me-verdict{font-size:clamp(13px,.9vw,18px);padding:clamp(11px,.73vw,16px) clamp(20px,1.33vw,30px);} /* Step 04 - approvals */ .me-approve-list{max-width:clamp(600px,40vw,860px);gap:clamp(8px,.6vw,14px);} .me-approve-item{font-size:clamp(13px,.9vw,18px);padding:clamp(14px,1vw,20px) clamp(18px,1.2vw,26px);} .me-approve-amt{font-size:clamp(14px,.95vw,19px);} .me-approve-act{font-size:clamp(12px,.85vw,17px);} .me-approve-cta{font-size:clamp(14px,.95vw,20px);padding:clamp(13px,.9vw,18px) clamp(22px,1.47vw,32px);} /* Step 05 - ERP sync */ .me-sync{ max-width:clamp(560px,37.3vw,820px); height:clamp(280px,18.7vw,400px); grid-template-columns:clamp(110px,7.3vw,150px) 1fr clamp(220px,14.7vw,300px); } .me-sync-hub{width:clamp(100px,6.67vw,150px);height:clamp(100px,6.67vw,150px);} .me-sync-erp{width:clamp(72px,4.8vw,100px);height:clamp(72px,4.8vw,100px);} .me-final{font-size:clamp(13px,.9vw,18px);padding:clamp(11px,.73vw,16px) clamp(20px,1.33vw,30px);} } /* Scroll hint - removed from the visible UI for cleaner look; the cursor tag and the calendar progress already communicate position. */ .me-scroll-hint{display:none;} .me-dashboard[data-step="4"] .me-scroll-hint{opacity:0;} .me-scroll-arrow{ width:1px;height:24px;background:linear-gradient(180deg, rgba(202,238,16,.6), transparent); animation:meScrollHint 1.8s ease-in-out infinite; } @keyframes meScrollHint{ 0%,100%{transform:translateY(0);opacity:.7;} 50% {transform:translateY(6px);opacity:1;} } /* Mobile: each step becomes its own full-viewport SCREEN that stacks on top of the previous as the user scrolls. Distinct backgrounds + a top accent line per step make the transition between screens unmissable. */ @media (max-width:720px){ /* The wrap becomes 5 viewports tall so each sticky pane has scroll space before the next pane covers it. */ #s3-wrap{ height:500vh!important; background:linear-gradient(180deg,#37474F 0%,#262626 100%)!important; } #s3{position:relative!important;height:auto!important;overflow:visible!important;background:transparent!important;} .s3-spacer{display:none!important;} .s3-layout{display:block!important;height:auto!important;background:transparent!important;} /* Strip all desktop chrome */ .me-dashboard{height:auto;display:block;background:transparent!important;} /* Mobile section title - sits above the stacking step cards */ .me-mobile-heading{ display:block; text-align:center; color:#fff; font-family:'Aeonik',-apple-system,sans-serif; font-size:34px;font-weight:300;letter-spacing:-.025em;line-height:1.1; margin:0; padding:48px 24px 24px; } .me-topbar{display:none;} .me-body{display:block;} .me-cal{display:none!important;} .me-scroll-hint{display:none;} .me-stage-eyebrow{display:none;} .me-stage{display:block;padding:0;overflow:visible;} /* Each pane = a sticky 100vh screen. Ascending z-index makes the next pane slide UP over the previous as you scroll. */ .me-pane{ position:sticky!important; inset:auto!important; top:0!important; height:100vh!important;min-height:100vh!important; width:100%; margin:0!important; /* Larger top padding leaves a blank line below the mobile nav so the step heading isn't clipped under the sticky top bar. */ padding:96px 24px 40px!important; display:flex!important;flex-direction:column!important;justify-content:flex-start; opacity:1!important;transform:none!important; pointer-events:auto!important; overflow:hidden; gap:16px; /* White stacking cards over the dark section bg */ background:#fff!important;color:var(--ink); border-radius:24px 24px 0 0; box-shadow:0 -10px 32px rgba(0,0,0,.18); } .me-pane[data-step="0"]{z-index:1;} .me-pane[data-step="1"]{z-index:2;} .me-pane[data-step="2"]{z-index:3;} .me-pane[data-step="3"]{z-index:4;} .me-pane[data-step="4"]{z-index:5;} /* Text on white panes */ .me-pane .me-pane-h{color:var(--ink);} .me-pane .me-pane-h-n{color:#C1E700;} .me-pane .me-pane-sub{color:var(--ink-light);} /* Result pills handled by the global lime-bg styling - no mobile override needed. */ .me-pane .me-tx, .me-pane .me-field, .me-pane .me-rule, .me-pane .me-approve-item{ background:rgba(13,28,30,.025); border-color:rgba(13,28,30,.07); } .me-pane .me-tx-icon{background:#fff;border:1px solid rgba(13,28,30,.08);color:var(--ink);} .me-pane .me-tx-merch{color:var(--ink);} .me-pane .me-tx-merch small{color:var(--ink-light);} .me-pane .me-tx-who{color:var(--ink-light);} .me-pane .me-tx-amt{color:var(--ink);} .me-pane .me-field{color:var(--ink-light);} .me-pane .me-field-v{color:var(--ink);} .me-pane .me-rule{color:var(--ink);} .me-pane .me-rule-tick{background:rgba(15,130,0,.12);color:#0F8200;} .me-pane .me-approve-who{color:var(--ink);} .me-pane .me-approve-amt{color:var(--ink);} /* Mobile already has the big number + bold heading - hide the redundant "Step X · …" eyebrow. */ .me-pane-step{display:none!important;} .me-pane-h{ font-size:24px!important;line-height:1.2!important; /* Mobile: read "01 Spending flows in..." as one inline phrase. Desktop keeps the number above; mobile inlines it to save room. */ flex-direction:row!important; align-items:baseline!important; flex-wrap:wrap; gap:8px!important; } .me-pane-h-n{margin-bottom:0!important;} .me-pane-sub{font-size:13px!important;} /* Receipt: stack image above fields, fields go full width below */ .me-receipt-row{grid-template-columns:1fr!important;gap:18px!important;} .me-receipt{margin:0 auto;} .me-receipt-fields{max-width:none!important;width:100%!important;} /* Tx feed: stack feed above the card. Card constrained so it doesn't dominate the screen and crowd out the result chip below. */ .me-tx-row{display:flex!important;flex-direction:column!important;gap:18px!important;} .me-tx-card{width:220px!important;max-width:60%!important;margin:0;display:block;} .me-tx-feed{max-width:none!important;width:100%!important;margin:0;} .me-tx-side{width:100%!important;} /* Hide the name column on narrow mobile so amounts don't overflow */ .me-tx{grid-template-columns:30px 1fr auto!important;gap:12px!important;} .me-tx-who{display:none!important;} /* Approvals: stack the person name underneath the merchant in a lighter weight, since the row is too narrow to fit them inline on mobile. */ .me-approve-who{ display:flex!important;flex-direction:column!important;gap:2px; } .me-approve-merch{font-weight:500;color:var(--ink);} .me-approve-sep{display:none!important;} .me-approve-name{ font-weight:400;font-size:12px; color:rgba(13,28,30,.55); } /* Mobile: all bottom-of-pane elements stretch full-width so CTAs and result chips read with the same visual emphasis as the user scrolls each pane card. */ .me-pane .me-approve-cta, .me-pane .me-pane-stat, .me-pane .me-verdict, .me-pane .me-final{ align-self:stretch; justify-content:center; text-align:center; } /* Sync grid: square ERP tiles, fits a 360px viewport */ .me-sync{ max-width:none!important;height:300px!important; grid-template-columns:78px 1fr 150px!important; } .me-sync-hub{width:74px!important;height:74px!important;} .me-sync-hub-logo{width:52px!important;} .me-sync-erp{width:60px!important;height:60px!important;padding:9px!important;border-radius:13px!important;} .me-sync-erp img{width:100%!important;height:auto!important;max-height:100%!important;} .me-stamp{align-self:center!important;} /* Mobile: each pane carries its own .is-active toggled by an IntersectionObserver (see meDashboard JS) so the inner animations play exactly when the user scrolls the pane into view. */ /* On mobile each pane stacks as its own card. Tighten the gap above the result pill so it sits close to the content above instead of being pushed all the way to the bottom of the card. */ .me-pane-stat, .me-verdict, .me-final, .me-pane .me-approve-cta{ margin-top:24px!important; } } .s2-half.s2-after{ background:#f3f4f6; /* grey-100 (was white) */ } .s2-label{ font-size:12px;font-weight:700; letter-spacing:.18em;text-transform:uppercase; margin-bottom:28px; text-align:left; } .s2-before .s2-label{color:rgba(255,255,255,.45);} .s2-after .s2-label{color:var(--ink-light);} .s2-num{ font-size:clamp(88px,14vw,280px); font-weight:700; line-height:.9; letter-spacing:-.05em; /* Tight to the headline below so the number reads as the first word of the sentence ("870 Hours lost to expense admin..." / "0 Incomplete expenses when month-end arrives.") rather than as a standalone stat above unrelated text. */ margin-bottom:4px; text-align:left; } .s2-before .s2-num{color:rgba(255,255,255,.18);} .s2-after .s2-num{color:#C1E700;} .s2-desc{ font-size:clamp(22px,2.6vw,46px); font-weight:500; line-height:1.25; letter-spacing:-.025em; text-align:left; } .s2-before .s2-desc{color:rgba(255,255,255,.78);} .s2-after .s2-desc{color:var(--ink);} .s2-detail{ margin-top:20px; font-size:clamp(15px,1.1vw,20px);font-weight:500; line-height:1.55; max-width:clamp(380px,30vw,520px); letter-spacing:-.005em; text-align:left; } .s2-before .s2-detail{color:rgba(255,255,255,.5);} .s2-after .s2-detail{color:rgba(13,28,30,.65);} /* Divider line */ .s2-divider{ position:absolute;top:0;bottom:0;left:50%; width:1px;background:var(--bd-light); z-index:10; } .s2-divider::before{ content:'vs'; position:absolute;top:50%;left:50%;transform:translate(-50%,-50%); font-size:11px;font-weight:600;letter-spacing:.08em; color:var(--ink-light); background:var(--white); padding:6px 10px; border-radius:999px; border:1px solid var(--bd-light); } /* ─── ████ S3 MONTH-END SCROLL DEMO ████████████████████████████████ */ #s3-wrap{ position:relative; /* Snap target lives on the wrap (not the sticky #s3 inside it) - that way scrolling DOWN lands on the wrap's top, and scrolling out of the wrap into #s4 can also snap to s4 without the sticky element fighting mandatory snap. */ scroll-snap-align:start; scroll-snap-stop:always; } /* Sticky panel that drives the month-end dashboard. Snap alignment lives on the .s3-spacer + #s4 (the next real section) instead - putting it on a sticky element confuses mandatory snap, sometimes preventing the browser from snapping to s4 when scrolling past the wrap. */ #s3{ position:sticky; top:0; height:100vh; overflow:hidden; background:#08080a; flex-direction:row; scroll-snap-align:none; /* Override the section base's 88px padding-top - the dashboard fills the full sticky panel and its inner columns handle their own nav-clear padding so their backgrounds run edge-to-edge instead of leaving a dark band above. */ padding-top:0; } .s3-spacer{ height:100vh; /* Each spacer is a snap waypoint so hard scrolls don't skip multiple steps in one go - combined with scroll-snap-stop:always, the user must stop at every step before continuing through the wrap. */ scroll-snap-align:start; scroll-snap-stop:always; pointer-events:none; } .s3-layout{ display:flex; width:100%; height:100%; } /* ── Left: animation column (50% so the divider sits dead-centre, matching s2) ── */ .s3-lottie-col{ width:50%; height:100%; padding:60px; display:flex; flex-direction:column; justify-content:center; align-items:center; border-right:1px solid var(--bd-light); gap:32px; } .s3-lottie-stage{ position:relative; width:100%; max-width:480px; aspect-ratio:1/1; } .s3-lottie-item{ position:absolute; inset:0; border-radius:28px; background:var(--white); border:1px solid var(--bd-light); display:flex; flex-direction:column; align-items:stretch; justify-content:center; padding:42px; gap:18px; opacity:0; transform:scale(.96) translateY(12px); transition:opacity .5s ease, transform .55s cubic-bezier(.16,1,.3,1); pointer-events:none; overflow:hidden; box-shadow:0 24px 60px rgba(13,28,30,.08); } .s3-lottie-item.active{ opacity:1; transform:scale(1) translateY(0); pointer-events:auto; } /* Shared anim styling */ .anim-tag{ position:absolute;top:24px;left:24px; font-size:10px;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--lime-dark); background:rgba(175,208,13,.14); padding:5px 10px;border-radius:999px; } /* ── Step 1 - Spend triggers instantly ── */ .anim-amount-pop{ align-self:center; font-family:'Geist Mono','SF Mono',ui-monospace,monospace; font-size:22px;font-weight:700;color:var(--ink); letter-spacing:-.02em; display:inline-flex;align-items:baseline;gap:2px; margin-bottom:-4px; opacity:0;transform:translateY(10px) scale(.92); } .anim-amount-cur{font-size:14px;color:var(--ink-light);} .anim-card-wrap{ position:relative; align-self:center; width:210px;height:132px; margin:14px 0 4px; } .anim-card{ position:absolute;inset:0; border-radius:14px; background:linear-gradient(135deg,#1a1a1c 0%,#2d2d33 100%); box-shadow:0 18px 40px rgba(0,0,0,.4); overflow:hidden; } .anim-card::before{ content:"";position:absolute;inset:0; background: radial-gradient(circle at 80% 20%, rgba(202,238,16,.18) 0%, transparent 35%), radial-gradient(circle at 20% 100%, rgba(202,238,16,.08) 0%, transparent 40%); } .anim-card-chip{ position:absolute;left:16px;top:20px; width:30px;height:22px;border-radius:4px; background:linear-gradient(135deg,#caee10,#afd00d); opacity:.9; } .anim-card-glow{ position:absolute;inset:-2px;border-radius:14px; background:transparent; box-shadow:0 0 0 0 rgba(202,238,16,0); } .anim-card-logo{ position:absolute;right:16px;bottom:14px; font-size:14px;font-weight:700;letter-spacing:-.02em; color:#fff;font-style:italic; } .anim-ripple{ position:absolute;left:50%;top:50%; width:120%;height:170%; border-radius:50%; border:2px solid var(--lime); transform:translate(-50%,-50%) scale(.4); opacity:0; pointer-events:none; } .anim-tap{ position:absolute;right:-22px;bottom:-18px; width:32px;height:32px; pointer-events:none; opacity:0;transform:translate(8px,8px); filter:drop-shadow(0 6px 12px rgba(13,28,30,.25)); } .anim-toast{ display:flex;align-items:center;gap:10px; padding:12px 16px;border-radius:14px; background:#fff;border:1px solid rgba(13,28,30,.08); box-shadow:0 12px 28px rgba(13,28,30,.1); margin:0 16px; opacity:0; transform:translateY(16px); } .anim-toast + .anim-toast{margin-top:-2px;} .anim-toast-dot{ width:8px;height:8px;border-radius:50%;background:var(--lime); box-shadow:0 0 0 4px rgba(202,238,16,.22); flex-shrink:0; } .anim-toast-dot-2{background:var(--ink);box-shadow:0 0 0 4px rgba(13,28,30,.08);} .anim-toast-text{ font-size:13px;font-weight:500;color:var(--ink);letter-spacing:-.01em; } /* ── Step 2 - Receipt captured ── */ .anim-camera{ position:relative; align-self:center; width:170px;height:200px; margin:8px 0 4px; } .anim-bracket{ position:absolute;width:18px;height:18px; border:2px solid var(--lime); opacity:0; } .anim-bracket.b-tl{top:-6px;left:-6px;border-right:0;border-bottom:0;} .anim-bracket.b-tr{top:-6px;right:-6px;border-left:0;border-bottom:0;} .anim-bracket.b-bl{bottom:-6px;left:-6px;border-right:0;border-top:0;} .anim-bracket.b-br{bottom:-6px;right:-6px;border-left:0;border-top:0;} .anim-receipt{ position:absolute;inset:0; padding:18px 16px; background:#fff; border-radius:8px 8px 4px 4px; box-shadow:0 14px 36px rgba(13,28,30,.12); overflow:hidden; opacity:0; } .anim-receipt::after{ content:"";position:absolute;left:0;right:0;bottom:-4px;height:8px; background:radial-gradient(circle at 6px 0, transparent 4px, #fff 4px) repeat-x; background-size:12px 8px; } .anim-receipt-row{height:6px;border-radius:3px;background:rgba(13,28,30,.07);margin-bottom:9px; transform:scaleX(0);transform-origin:left;} .anim-receipt-row.heading{height:10px;width:55%;background:rgba(13,28,30,.22);margin-bottom:14px;} .anim-receipt-row.short{width:60%;} .anim-receipt-row.med {width:80%;} .anim-receipt-row.total{width:45%;background:var(--lime);height:9px;margin-top:14px;} .anim-scan{ position:absolute;left:0;right:0;top:-12px;height:30px; background:linear-gradient(180deg, rgba(202,238,16,0) 0%, rgba(202,238,16,.55) 50%, rgba(202,238,16,0) 100%); pointer-events:none; opacity:0; box-shadow:0 0 24px rgba(202,238,16,.4); } .anim-fields{ display:flex;flex-direction:column;gap:8px; width:100%;max-width:300px;align-self:center; margin-top:10px; } .anim-field{ display:flex;justify-content:space-between;align-items:center; padding:9px 14px;border-radius:10px; background:rgba(13,28,30,.04); font-family:'Geist Mono','SF Mono',ui-monospace,monospace; font-size:11px;color:var(--ink); opacity:0;transform:translateX(-8px); } .anim-field span:first-child{color:var(--ink-light);text-transform:uppercase;letter-spacing:.1em;font-weight:500;} .anim-field-val{display:inline-block;transform:translateY(8px);opacity:0;} /* ── Step 3 - Policy enforced ── */ .anim-shield{ align-self:center; width:56px;height:56px; display:flex;align-items:center;justify-content:center; margin-bottom:6px; opacity:0;transform:scale(.6); } .anim-shield svg{overflow:visible;} .anim-shield-body{stroke-dasharray:200;stroke-dashoffset:200;} .anim-shield-check{stroke-dasharray:40;stroke-dashoffset:40;} .anim-shield-pulse{opacity:0;} .anim-rules{ display:flex;flex-direction:column;gap:12px; width:100%;max-width:340px;align-self:center; margin:0; } .anim-rule{ display:flex;align-items:center;gap:14px; padding:12px 16px;border-radius:14px; background:rgba(13,28,30,.04); opacity:0;transform:translateX(-16px); position:relative;overflow:hidden; } .anim-rule::before{ /* sweep highlight that travels across when checked */ content:"";position:absolute;inset:0; background:linear-gradient(90deg,transparent 0%,rgba(202,238,16,.32) 50%,transparent 100%); transform:translateX(-100%); pointer-events:none; } .anim-rule.is-checked::before{animation:ruleSweep .9s cubic-bezier(.22,1,.36,1) forwards;} @keyframes ruleSweep{ from{transform:translateX(-100%);} to {transform:translateX(100%);} } .anim-rule-check{ width:26px;height:26px;border-radius:50%; background:rgba(202,238,16,.18); border:1.5px solid var(--lime); display:flex;align-items:center;justify-content:center; flex-shrink:0; transform:scale(.5);opacity:0; } .anim-rule-check svg{width:14px;height:14px;} .anim-rule-check svg path{stroke-dasharray:24;stroke-dashoffset:24;} .anim-rule-text{ font-size:13px;font-weight:500;color:var(--ink);letter-spacing:-.01em; } .anim-status{ align-self:center; margin-top:6px; padding:9px 18px;border-radius:999px; background:var(--lime);color:var(--ink); font-size:11px;font-weight:700;letter-spacing:.12em;text-transform:uppercase; opacity:0;transform:translateY(8px) scale(.9); box-shadow:0 8px 18px rgba(202,238,16,.35); } /* ── Step 4 - ERP sync ── */ .anim-network{ position:relative; width:100%;height:240px;align-self:center; } .anim-hub{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); width:78px;height:78px;border-radius:18px; background:#fff;border:1px solid rgba(13,28,30,.08); box-shadow:0 12px 28px rgba(13,28,30,.12); display:flex;align-items:center;justify-content:center; font-size:17px;font-weight:700;color:var(--ink);font-style:italic; z-index:2; } .anim-hub-pulse{ position:absolute;inset:-8px;border-radius:26px; border:2px solid var(--lime); opacity:0; pointer-events:none; } .anim-spoke{ position:absolute; width:92px;padding:9px 12px;border-radius:10px; background:#fff;border:1px solid rgba(13,28,30,.08); box-shadow:0 8px 18px rgba(13,28,30,.08); font-size:11px;font-weight:600;color:var(--ink); text-align:center; opacity:0; } .anim-spoke[data-erp="0"]{left:0;top:14px;} .anim-spoke[data-erp="1"]{right:0;top:50%;} .anim-spoke[data-erp="2"]{left:0;bottom:14px;} .anim-lines{ position:absolute;inset:0;width:100%;height:100%; pointer-events:none; } .anim-lines path:not(.anim-packet){ stroke:var(--lime-dark);stroke-width:1.5;fill:none; stroke-dasharray:240; stroke-dashoffset:240; opacity:.5; } .anim-packet{ opacity:0; filter:drop-shadow(0 0 4px rgba(202,238,16,.7)); } .anim-caption{ text-align:center; font-size:11px;font-weight:500; letter-spacing:.14em;text-transform:uppercase; color:var(--ink-light); margin-top:8px; } /* Progress dots */ .s3-prog{ display:flex;gap:9px;align-items:center; } .s3-prog-dot{ width:6px;height:6px;border-radius:50%; background:var(--light-mid); border:1px solid rgba(13,28,30,.18); transition:background .3s,transform .3s; cursor:pointer; } .s3-prog-dot.active{ background:var(--dark); transform:scale(1.5); } /* ── Right: Text column (dark) ── */ .s3-text-col{ flex:1; height:100%; padding:80px 64px; display:flex; flex-direction:column; justify-content:center; background:var(--dark); color:#fff; } .s3-eyebrow{ font-size:11px;font-weight:600; letter-spacing:.18em;text-transform:uppercase; color:var(--lime); margin-bottom:48px; opacity:0; transition:opacity .9s ease .1s; } #s3.section-active .s3-eyebrow{opacity:1;} /* Step list */ .s3-step-list{ display:flex;flex-direction:column; } .s3-step{ padding:24px 0; border-top:1px solid rgba(255,255,255,.08); cursor:pointer; opacity:.4; transition:opacity .4s ease; } .s3-step:last-child{border-bottom:1px solid rgba(255,255,255,.08);} .s3-step.active{opacity:1;} .s3-step:hover{opacity:.7;} .s3-step.active:hover{opacity:1;} .s3-step-head{ display:flex;align-items:baseline;gap:16px; } .s3-step-num{ font-size:10px;font-weight:600; letter-spacing:.14em;text-transform:uppercase; color:var(--lime); flex-shrink:0;width:22px; } .s3-step-title{ font-size:clamp(17px,1.8vw,32px); font-weight:600; letter-spacing:-.03em; line-height:1.2; color:#fff; } .s3-step-body-wrap{ max-height:0;overflow:hidden; transition:max-height .45s cubic-bezier(.16,1,.3,1), margin-top .45s ease; margin-top:0; } .s3-step.active .s3-step-body-wrap{ max-height:140px; margin-top:10px; } .s3-step-body{ font-size:14px;font-weight:400; line-height:1.7;color:rgba(255,255,255,.65); letter-spacing:-.01em; padding-left:38px; } /* ─── ████ S4 THE NUMBER ████████████████████████████████████████████ */ #s4{background:var(--dark);align-items:center;} .s4-inner{ display:flex; flex-direction:column; align-items:center; text-align:center; padding:44px 60px; position:relative; z-index:2; } .s4-pre{ font-size:11px;font-weight:600; letter-spacing:.18em;text-transform:uppercase; color:rgba(255,255,255,.35); margin-bottom:16px; } /* ─── S4 type scale ─────────────────────────────────────────────────── Deliberately small set of sizes: • eyebrow 11px (.s4-pre) • lead clamp 20-28px (.s4-lead — the context line) • value clamp 34-56px (.s4-bar-val / .s4-stat-n — the figures) • caption 15px (.s4-bar-cap / .s4-stat-l / .s4-desc base) One figure size and one caption size keeps the section calm + readable. */ .s4-lead{ font-size:clamp(25px,2.9vw,40px); font-weight:500; letter-spacing:-.02em; line-height:1.22; color:rgba(255,255,255,.92); margin-bottom:44px; max-width:clamp(600px,58vw,860px); } /* Label that introduces the comparison graphic underneath the hero line. Matches the graphic captions (.s4-bar-cap, e.g. "Before Weel"). */ .s4-graphlabel{ font-size:15px; font-weight:500; letter-spacing:.01em; line-height:1.3; color:rgba(255,255,255,.55); margin:0 0 20px; } /* ─── S4 comparison bars ────────────────────────────────────────────── One grid so both rows share column widths → bars + figures stay aligned. On .s4-go the fills sweep out: the muted "before" bar runs the full track, the lime "after" bar barely moves — the length gap is the story. */ .s4-bars{ display:grid; grid-template-columns:auto 1fr auto; align-items:center; column-gap:20px; row-gap:20px; width:100%; max-width:560px; margin-bottom:36px; } .s4-bar-cap{ font-size:15px; font-weight:500; letter-spacing:.01em; color:rgba(255,255,255,.55); text-align:left; white-space:nowrap; } .s4-bar-track{ position:relative; height:12px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; } .s4-bar-fill{ position:absolute;left:0;top:0;bottom:0; border-radius:6px; transform:scaleX(0); transform-origin:left center; transition:transform 1s cubic-bezier(.6,0,.12,1); } .s4-bar-fill.is-before{width:100%;background:rgba(255,255,255,.28);} .s4-bar-fill.is-after{width:5%;min-width:16px;background:var(--lime);transition-delay:.28s;} .s4-bars.s4-go .s4-bar-fill{transform:scaleX(1);} .s4-bar-val{ font-size:clamp(34px,4vw,56px); font-weight:700; letter-spacing:-.03em; line-height:1; color:rgba(255,255,255,.85); text-align:right; white-space:nowrap; } .s4-bar-val.is-accent{color:var(--lime);} @media (prefers-reduced-motion: reduce){ .s4-bar-fill{transition:none;} } .s4-desc{ font-size:clamp(15px,1.4vw,18px); font-weight:400; line-height:1.55; letter-spacing:0; color:rgba(255,255,255,.55); max-width:clamp(420px,40vw,560px); margin-bottom:36px; } .s4-desc strong{color:#fff;font-weight:600;} .s4-divider{ width:40px;height:1px; background:rgba(255,255,255,.15); margin:0 auto 28px; } .s4-stat-row{ display:flex;gap:56px; align-items:flex-start; } .s4-stat{text-align:center;} .s4-stat-n{ font-size:clamp(34px,3vw,48px);font-weight:700; letter-spacing:-.03em;line-height:1; color:var(--lime); display:block; } .s4-stat-l{ font-size:15px;font-weight:400;line-height:1.45; color:rgba(255,255,255,.7); letter-spacing:.01em; display:block; margin-top:10px; } /* S4 background glow */ #s4::before{ content:'';position:absolute;inset:0; background:radial-gradient(ellipse 70% 50% at 50% 50%,rgba(202,238,16,.06) 0%,transparent 70%); pointer-events:none; } /* ─── ████ S5 THREE ROLES ███████████████████████████████████████████ */ #s5{background:var(--white);} .s5-inner{ max-width:clamp(1100px,80vw,1480px); margin:0 auto; padding:0 60px; width:100%; display:flex; flex-direction:column; justify-content:center; height:100%; } .s5-head{ display:flex;align-items:center;justify-content:space-between; margin-bottom:64px; text-align:left; } .s5-title{ font-size:clamp(32px,4vw,72px); font-weight:300; letter-spacing:-.04em; line-height:1.1; color:var(--ink); text-align:left; margin:0; max-width:780px; } .s5-title strong{font-weight:700;} .s5-tag{ font-size:11px;font-weight:600; letter-spacing:.16em;text-transform:uppercase; color:var(--ink-light); border:1px solid var(--bd-light); padding:6px 14px;border-radius:999px; } /* Three equal columns with subtle dividers - a top rule above the row and thin vertical seams between sections. */ .s5-cols{ display:grid; grid-template-columns:1fr 1fr 1fr; gap:0; border-top:1px solid var(--bd-light); } .s5-col{ position:relative; padding:40px 36px 36px; border-right:1px solid var(--bd-light); color:var(--ink); } .s5-col:last-child{border-right:none;} .s5-role-tag{ display:inline-flex;align-items:center;gap:6px; font-size:11px;font-weight:600; letter-spacing:.12em;text-transform:uppercase; color:var(--dark); background:rgba(6,68,78,.06); padding:5px 12px; border-radius:999px; margin-bottom:24px; transition:background .35s ease, color .35s ease; } .s5-col.is-active .s5-role-tag{ background:rgba(255,255,255,.12); color:rgba(255,255,255,.85); } .s5-col-title{ font-size:clamp(20px,2vw,32px); font-weight:600; letter-spacing:-.03em; line-height:1.25; color:inherit; margin-bottom:14px; } .s5-col-body{ font-size:14px;font-weight:400; line-height:1.65; color:var(--ink-light); letter-spacing:-.01em; } .s5-col.is-active .s5-col-body{color:rgba(255,255,255,.75);} /* Bullets - concise key points under each role */ .s5-col-bullets{ list-style:none;margin:18px 0 0;padding:0; } .s5-col-bullets > li{ padding-left:22px;position:relative; font-size:14px;line-height:1.6; color:var(--ink-light); margin:10px 0 0; } .s5-col-bullets > li:first-child{margin-top:0;} .s5-col-bullets > li::before{ content:"";position:absolute;left:0;top:.6em; width:6px;height:6px;border-radius:50%; background:#C1E700; } .s5-col-lift{ margin-top:24px; display:inline-flex;align-items:center;gap:6px; font-size:12px;font-weight:600; color:var(--ink); letter-spacing:-.01em; transition:color .35s ease; } .s5-col-lift::before{ content:'↑'; font-size:16px; color:inherit; } .s5-col.is-active .s5-col-lift{color:rgba(255,255,255,.85);} /* ─── ████ S6 PROOF █████████████████████████████████████████████████ */ #s6{ background-color:#A1CBC2; background-image:url('https://cdn.prod.website-files.com/6833e520890ced50e9cddcf3/6a5dc0b9d7f114f2930286b1_eec-polygons.svg'), linear-gradient(180deg,#A1CBC2 0%,#E2F2F2 100%); background-size:65% auto, auto; /* Anchor polygons hard right so most of the shape bleeds offscreen */ background-position:180% center, center; background-repeat:no-repeat; position:relative; } /* Soften the polygons so they read as a subtle backdrop rather than a graphic */ #s6::before{ content:"";position:absolute;inset:0; background:linear-gradient(180deg,rgba(226,242,242,.5) 0%,rgba(161,203,194,.45) 100%); pointer-events:none; } #s6 > *{position:relative;z-index:1;} .s6-inner{ max-width:1160px; margin:0 auto; padding:0 60px 64px; width:100%; display:flex; flex-direction:column; justify-content:center; height:100%; } .s6-label{ font-size:11px;font-weight:600; letter-spacing:.18em;text-transform:uppercase; color:var(--ink-light); margin-bottom:16px; } .s6-heading{ font-size:clamp(32px,3.4vw,52px); font-weight:300; letter-spacing:-.04em; line-height:1.1; color:var(--ink); text-align:left; margin:0 0 44px; max-width:780px; } .s6-heading strong{font-weight:700;} /* Two-column manifesto layout: a CEO portrait anchors a hero quote. Portrait spans both rows on the left; quote (row 1) and CTA (row 2) stack in the right column. */ .s6-grid{ display:grid; grid-template-columns:minmax(190px,240px) 1fr; column-gap:64px; row-gap:18px; align-items:start; } .s6-body{grid-column:2;grid-row:1;} .s6-manifesto-link{grid-column:2;grid-row:2;} .s6-portrait{position:relative;margin:0;grid-column:1;grid-row:1 / span 2;align-self:center;} /* Offset brand-coloured panel sits behind the photo ONLY (matched to the photo's aspect ratio) so it never bleeds under the caption text. */ .s6-portrait::before{ content:"";position:absolute; left:-14px;top:14px; width:100%; aspect-ratio:4/5; background:var(--dark); border-radius:20px; } .s6-portrait-img{ position:relative; width:100%; aspect-ratio:4/5; background-size:cover; background-position:center 18%; background-repeat:no-repeat; border-radius:20px; box-shadow:0 24px 56px -24px rgba(6,68,78,.5); } .s6-portrait-cap{ position:relative; display:flex;flex-direction:column; margin-top:24px; } .s6-attr-name{ font-size:18px;font-weight:700; color:var(--ink); letter-spacing:-.02em; } .s6-attr-role{ font-size:14px;font-weight:500; color:var(--ink-mid); margin-top:4px; } .s6-body{position:relative;} /* Big editorial opening quote mark - a confident brand-teal glyph that sits above the quote as a graphic, not faint background decoration. */ .s6-body::before{ content:"\201C"; display:block; font-family:Georgia,'Times New Roman',serif; font-size:96px; line-height:.62; height:.44em; color:#407A7D; margin-bottom:.18em; } .s6-quote{ font-size:clamp(21px,1.7vw,30px); font-weight:400; line-height:1.4; letter-spacing:-.018em; color:var(--ink); margin:0 0 4px; max-width:none; position:relative; border:none;background:none; } .s6-quote .lm{line-height:inherit;padding-bottom:.1em;} /* The north-star phrase carries the brand colour for a hit of energy */ .s6-quote em{ font-style:normal; font-weight:600; color:#06444e; } /* Pullquote is the punchline - deep teal, bolder, set off by a lime accent bar so it reads as the dynamic landing point of the whole quote. */ .s6-pullquote{ display:block; margin-top:1.1em; padding:.05em 0 .05em 22px; border-left:4px solid var(--lime); font-weight:700; font-style:normal; font-size:1.18em; letter-spacing:-.02em; line-height:1.26; color:var(--dark); } .s6-manifesto-link{margin:0;} .s6-manifesto-link a{ display:inline-flex; align-items:center; gap:10px; padding:14px 26px; background:#407A7D; color:#fff; font-size:14px; font-weight:600; letter-spacing:-.01em; border-radius:999px; text-decoration:none; transition:transform .2s ease, opacity .2s ease; } .s6-manifesto-link a:hover{ transform:translateY(-2px); opacity:.92; } .s6-manifesto-link svg{ width:14px;height:14px;flex:0 0 auto; } .s6-stats{ display:flex;gap:0; border-top:1px solid var(--bd-light); padding-top:44px; } .s6-stat{ flex:1;padding-right:48px;border-right:1px solid var(--bd-light); margin-right:48px; } .s6-stat:last-child{border-right:none;margin-right:0;} .s6-stat-n{ font-size:clamp(36px,4vw,72px); font-weight:700; letter-spacing:-.05em; color:var(--dark); display:block; } .s6-stat-l{ font-size:13px;font-weight:400; color:var(--ink-light); letter-spacing:-.01em; margin-top:20px; line-height:1.5; display:block; } /* ─── ████ S7 CTA ███████████████████████████████████████████████████ */ #s7{background:var(--white);} .s7-inner{ max-width:920px; margin:0 auto; padding:60px 24px; width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:18px; height:100%; } .s7-eyebrow{ font-size:11px;font-weight:600; letter-spacing:.18em;text-transform:uppercase; color:var(--ink-light); margin:0; } .s7-h{ font-size:clamp(32px,3.4vw,60px); font-weight:300; line-height:1.1; letter-spacing:-.04em; color:var(--ink); margin:0; text-align:center; max-width:920px; } .s7-h strong{font-weight:700;} .s7-h .s7-lime{color:var(--lime-dark);} .s7-sub{ font-size:clamp(16px,1.4vw,22px); font-weight:400; line-height:1.55; color:var(--ink-light); max-width:560px; margin:0 auto; letter-spacing:-.01em; text-align:center; } /* Video placeholder - VideoThumbnail.jpg with a black play button overlay */ .s7-video{ position:relative; width:100%;max-width:680px; aspect-ratio:16/9; border-radius:20px; overflow:hidden; background:#1a1a1c center/cover no-repeat url('https://cdn.prod.website-files.com/6833e520890ced50e9cddcf3/6a5dc0ba5c493d23a8774079_eec-videothumbnail.jpg'); box-shadow:0 24px 60px rgba(13,28,30,.18); cursor:pointer; margin:6px 0 2px; } .s7-video-play{ position:absolute;left:50%;top:50%; transform:translate(-50%,-50%); width:84px;height:84px;border-radius:50%; background:#000; display:flex;align-items:center;justify-content:center; transition:transform .2s ease; } .s7-video:hover .s7-video-play{transform:translate(-50%,-50%) scale(1.08);} .s7-video-play::after{ content:''; width:0;height:0; border-style:solid; border-width:13px 0 13px 20px; border-color:transparent transparent transparent #fff; margin-left:5px; } .s7-actions{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap;} .btn-dark{ background:var(--ink);color:#fff; font-size:14px;font-weight:700; padding:14px 28px;border-radius:999px; text-decoration:none;letter-spacing:-.01em; transition:opacity .2s,transform .2s; display:inline-flex;align-items:center;gap:8px; } .btn-dark:hover{opacity:.85;transform:translateY(-2px);} .s7-note{ font-size:13px;font-weight:400; color:var(--ink-light); margin:0; letter-spacing:-.01em; text-align:center; } /* Footer wrapper - sits below S7 inside #main, no snap */ .footer-wrapper{width:100%;} /* The Webflow footer is a
element, so the base `section { height: 100vh; overflow:hidden; scroll-snap-align:start; }` rules clip it. Override to let it size to its own content and skip the snap. */ section.footer{ height:auto!important; min-height:0!important; overflow:visible!important; display:block!important; padding-top:0!important; /* Snap to the TOP of the footer (not its bottom). Without snap-stop `always`, momentum can carry the user past the snap point and end them at max scroll - which shows the footer's bottom instead. */ scroll-snap-align:start!important; scroll-snap-stop:always!important; } /* ─── Mobile final overrides (defined last so they win specificity ties) ── */ @media (max-width: 720px){ /* Mobile: turn snap OFF entirely. iOS Safari fights with scroll-snap and scroll-behavior:smooth - the combination kills native momentum/inertia. */ #main{ scroll-snap-type:none!important; scroll-behavior:auto!important; -webkit-overflow-scrolling:touch; overscroll-behavior-y:auto; } section,#s1,#s1b,#s2,#s3,#s5,#s6,#s7{scroll-snap-align:none!important;scroll-snap-stop:normal!important;} /* ─── Mobile stacking effect for the contrast section ──────────────── The two #s2 halves used to fire their entrance animations at the same time (both children of one section that activates as a unit). Make each half a sticky "card" so "Without Weel" pins, then "With Weel" slides up and covers it - independent timing, distinct read. */ #s2{ display:block!important;flex-direction:column!important; min-height:200vh; background:transparent!important; } .s2-half{ position:sticky!important;top:0!important; min-height:100vh;height:100vh; width:100%!important; box-sizing:border-box; } .s2-half.s2-before{z-index:1;} .s2-half.s2-after{z-index:2;} /* Hold each half's entrance animations until that half itself scrolls into view - overrides the default rule where children of .section-active fire all at once. */ #s2.section-active .s2-half:not(.in-view) .enter-up, #s2.section-active .s2-half:not(.in-view) .enter-fade, #s2.section-active .s2-half:not(.in-view) .enter-scale, #s2.section-active .s2-half:not(.in-view) .enter-left, #s2.section-active .s2-half:not(.in-view) .enter-right{ opacity:0!important; } #s2.section-active .s2-half:not(.in-view) .enter-up{transform:translateY(28px)!important;} #s2.section-active .s2-half:not(.in-view) .enter-scale{transform:scale(.94)!important;} /* Sections allowed to flow naturally - no 100vh constraint. NOTE: #s1b is intentionally excluded - it keeps its base height:100vh + overflow:hidden so the sticky scroll-jack viewport clips the wide persona track. Including it here un-clipped the track and let the page scroll sideways into the off-screen cards on mobile. */ #s2,#s3,#s5,#s6,#s7{height:auto!important;overflow:visible;} /* Section 2 (contrast) - stack the dark / light halves, push off s1b */ #s2{flex-direction:column!important;margin-top:0!important;} .s2-half{ padding:72px 24px!important; width:100%!important;flex:none!important; align-items:flex-start;text-align:left; } .s2-half.s2-before{padding-top:80px!important;} .s2-divider{display:none!important;} .s2-num{font-size:120px!important;} .s2-desc{font-size:24px!important;} /* Section 3 (How it works) - DARK background with WHITE card containers */ #s3-wrap{height:auto!important;background:var(--dark)!important;} #s3{ position:relative!important;height:auto!important;overflow:visible!important; flex-direction:column!important; background:var(--dark)!important; padding:64px 0 56px!important; } .s3-spacer{display:none!important;} .s3-layout{flex-direction:column!important;height:auto!important;background:transparent!important;} .s3-lottie-col{ width:100%!important;border-right:0!important;background:transparent!important; padding:8px 16px 8px!important;gap:0!important; } .s3-lottie-stage{ position:relative!important;background:transparent!important; aspect-ratio:auto!important;max-width:none!important;height:auto!important; display:flex!important;flex-direction:column!important; } .s3-lottie-item{ position:relative!important;inset:auto!important; opacity:1!important;transform:none!important;pointer-events:auto!important; min-height:auto!important; margin-bottom:20px; padding:28px 22px 26px!important; background:#fff!important; border-radius:20px!important; box-shadow:0 16px 40px -16px rgba(0,0,0,.5)!important; border:1px solid rgba(255,255,255,.06)!important; } /* Step text lives INSIDE the white .s3-lottie-item card on mobile, so it must read dark - earlier rules tried white-on-white. */ .s3-mobile-text{ margin-top:18px!important;padding:0!important; border-top:1px solid rgba(13,28,30,.08)!important; padding-top:18px!important; } .s3-mobile-text .s3-step-num{color:#0F8200!important;} .s3-mobile-text .s3-step-title{color:var(--ink)!important;} .s3-mobile-text .s3-step-body{color:var(--ink-light)!important;} .s3-text-col{display:none!important;} .s3-prog{display:none!important;} /* Section 4 (comparison bars) - stack the 3 stats vertically */ #s4{padding:72px 20px!important;} .s4-inner{padding:0!important;width:100%;} .s4-lead{font-size:24px!important;margin-bottom:30px!important;max-width:none!important;} .s4-graphlabel{font-size:12px!important;margin-bottom:16px!important;} .s4-bars{max-width:none!important;column-gap:12px!important;row-gap:16px!important;} .s4-bar-cap{font-size:12px!important;} .s4-bar-val{font-size:30px!important;} .s4-desc{font-size:16px!important;margin-bottom:32px!important;max-width:none!important;} .s4-stat-row{ flex-direction:column!important; gap:28px!important; width:100%; align-items:stretch!important; } .s4-stat{ padding:0 0 24px 0!important; border-bottom:1px solid rgba(255,255,255,.08)!important; } .s4-stat:last-child{border-bottom:0!important;padding-bottom:0!important;} .s4-stat-n{font-size:42px!important;} .s4-stat-l{font-size:13px!important;margin-top:8px!important;} /* Section 5 (Built for everyone) - stack 3 sections vertically */ .s5-inner{ padding:72px 20px!important; height:auto!important; max-width:none!important; } .s5-head{ flex-direction:column!important;align-items:flex-start!important; gap:14px!important;margin-bottom:36px!important; } .s5-title{font-size:32px!important;max-width:none!important;line-height:1.15!important;} .s5-tag{align-self:flex-start;} .s5-cols{grid-template-columns:1fr!important;border-top:1px solid var(--bd-light);} .s5-col{ padding:28px 0!important; border-right:0!important;border-bottom:1px solid var(--bd-light)!important; } .s5-col:first-child{padding-top:28px!important;} .s5-col:last-child{border-bottom:0!important;padding-bottom:0!important;} .s5-role-tag{margin-bottom:16px!important;} .s5-col-title{font-size:22px!important;margin-bottom:10px!important;} .s5-col-lift{margin-top:14px;} /* Section 1B (persona) on mobile - native swipeable carousel: OUTER: drop the desktop vertical scrolljack entirely. #s1b-wrap collapses to its natural height (no 100vh sticky + spacers), and .s1b-track becomes a native horizontal scroll-snap container the user swipes left/right. INNER: each card is self-contained and fully visible at rest (photo on top with the title overlay, content stacked below) - no dependence on the JS-driven .is-active state, which only runs in the desktop scrolljack. */ #s1b-wrap{height:auto!important;} .s1b-spacer{display:none!important;} #s1b{ position:static!important;height:auto!important;overflow:visible!important; display:block!important;padding-bottom:40px!important; } .s1b-head{ position:static!important; padding:88px 20px 16px!important; pointer-events:auto!important; } .s1b-head-inner{ flex-direction:column!important; align-items:flex-start!important; gap:12px!important; max-width:none!important; } .s1b-head-left{max-width:none!important;padding-right:0!important;} .s1b-title{font-size:22px!important;} .s1b-progress{display:none!important;} .s1b-track{ width:auto!important;height:auto!important; transform:none!important;transition:none!important; overflow-x:auto!important;overflow-y:hidden!important; scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch; scrollbar-width:none; } .s1b-track::-webkit-scrollbar{display:none;} .persona{ flex:0 0 90%!important; scroll-snap-align:center; padding:0 8px!important; align-items:flex-start!important; /* don't vertically centre the body */ } .persona:first-child{margin-left:12px;} .persona:last-child{margin-right:12px;} .persona-body{ opacity:1!important;transform:none!important; display:flex!important; flex-direction:column!important; align-self:flex-start!important; /* Equalize all 3 cards at the height of the tallest content (the Spender's quote is shorter and would otherwise leave the card shorter than the Controller / Manager). The extra room shows as breathing room below the shorter quote. */ min-height:430px!important; height:auto!important; max-height:none!important; max-width:none!important; width:100%!important; border-radius:18px!important; overflow:hidden!important; /* Flat dark colour matching where the quote naturally sat in the desktop gradient (the bottom-right stop, #262626). Solid colour keeps the panel uniform regardless of content height. */ background:#262626!important; box-shadow:none!important; } /* Photo on top - larger height so the figure reads properly, with the image cropped slightly to the right to leave mint backdrop on the left for the "The Controller." title overlay (same treatment as old mobile). */ .persona-photo{ position:relative!important; left:auto!important;top:auto!important;bottom:auto!important; width:100%!important; height:300px!important; z-index:auto!important; opacity:1!important; background-size:140% auto, auto!important; } /* Image is visible at rest (the card no longer waits for JS .is-active, which only fires in the desktop scrolljack). */ .persona-photo-img{ opacity:1!important; transform:translateX(8%) translateY(0) scale(1.25)!important; } /* Controller image has more empty space at the top of its source frame than Manager / Spender - bump scale so the figure fills the photo container at the same visual size as the other two. */ .persona[data-index="0"] .persona-photo-img{ transform:translateX(8%) translateY(0) scale(1.6)!important; } /* Content panel below the photo - flush; no flex-centre vertical stretching, no excess padding so the quote sits right against the bottom edge of the card. Background:transparent so the body's flat #262626 shows through without the content's own gradient creating a seam below the quote. */ .persona-content{ position:static!important; inset:auto!important; margin:0!important; width:100%!important; padding:18px 22px 22px!important; gap:6px!important; opacity:1!important; flex:0 0 auto!important; justify-content:flex-start!important; height:auto!important; background:transparent!important; } .persona.is-active .persona-content{ margin-left:0!important; width:100%!important; } /* The big "The Controller." overlay sits absolutely over the photo */ .persona-job{ position:absolute!important; top:18px!important;left:22px!important;right:22px!important; z-index:3!important; margin:0!important; color:#0d1c1e!important; font-size:34px!important;line-height:.98!important; pointer-events:none; } .persona-job strong{color:#0d1c1e!important;} .persona-quote{font-size:15px!important;padding-left:12px!important;} .persona-name{font-size:11px!important;} /* Content is visible at rest - no .is-active gate on mobile. */ .persona-job,.persona-name,.persona-quote{opacity:1!important;transform:none!important;} .persona-divider{opacity:1!important;transform:scaleX(1)!important;} /* Section 6 (customer story) - stack stats vertically, match s5 gutter */ .s6-inner{ padding:72px 20px 104px!important; height:auto!important; max-width:none!important; } .s6-label{margin-bottom:24px!important;} /* On mobile: quote leads, then a compact attribution chip (white card, round avatar + left-aligned name/title), then the CTA below it. */ .s6-grid{display:flex!important;flex-direction:column!important;align-items:flex-start!important;gap:18px!important;} .s6-body{order:1!important;} .s6-portrait{ order:2!important; display:flex!important; align-items:center!important; align-self:flex-start!important; gap:13px!important; max-width:max-content!important; background:transparent!important; border:none!important; border-radius:0!important; padding:0!important; box-shadow:none!important; } .s6-manifesto-link{order:3!important;margin:0!important;} .s6-portrait::before{display:none!important;} .s6-portrait-img{ width:56px!important;height:56px!important; aspect-ratio:1/1!important; border-radius:50%!important; background-size:cover!important; background-position:center 20%!important; box-shadow:none!important; flex:0 0 auto!important; } .s6-portrait-cap{margin-top:0!important;align-items:flex-start!important;text-align:left!important;} .s6-attr-name{font-size:15px!important;} .s6-attr-role{font-size:13px!important;} .s6-body::before{font-size:68px!important;} .s6-quote{font-size:18px!important;line-height:1.5!important;margin-bottom:0!important;max-width:none!important;padding-left:0!important;} .s6-pullquote{padding-left:16px!important;} .s6-stats{ flex-direction:column!important;gap:0!important; padding-top:32px!important; } .s6-stat{ flex:1 1 auto!important; padding:24px 0!important;margin:0!important; border-right:0!important;border-bottom:1px solid var(--bd-light)!important; } .s6-stat:first-child{padding-top:0!important;} .s6-stat:last-child{border-bottom:0!important;padding-bottom:0!important;} .s6-stat-n{font-size:44px!important;} .s6-stat-l{margin-top:8px!important;} /* Section 7 (CTA) tweaks */ #s7 .s7-h{font-size:30px!important;line-height:1.15!important;max-width:none!important;} /* Mobile: flatten the two-line line-mask spans so the heading wraps naturally instead of breaking awkwardly mid-phrase per .lm box. */ #s7 .s7-h .lm{display:inline!important;overflow:visible!important;} #s7 .s7-h .lm > .l{display:inline!important;transform:none!important;} #s7 .s7-video{max-width:100%!important;} /* Mobile: the CTA content is short, so don't force the section to a full viewport (base section min-height:100vh) - that left big blank bands above and below the centred content. Size it to its content instead. */ #s7{min-height:0!important;padding-top:0!important;} /* Mobile: left-align the final CTA block (eyebrow, heading, body, buttons, disclaimer) instead of the desktop centred layout. */ #s7 .s7-inner{ height:auto!important; justify-content:flex-start!important; padding:72px 20px 84px!important; align-items:flex-start!important; text-align:left!important; } #s7 .s7-h{text-align:left!important;} #s7 .s7-sub{ text-align:left!important; max-width:none!important; margin:0!important; } #s7 .s7-actions{justify-content:flex-start!important;} #s7 .s7-note{text-align:left!important;} /* Hide side-nav dot rail on small viewports */ .side-nav{display:none!important;} /* Smooth transition is mobile-only since the burger lives in the mobile bar - but the flip rule has moved to the global scope so it applies wherever the burger is rendered. */ .nav_mobile-icon-closed,.nav_mobile-icon-open{transition:filter .25s ease;} /* s7 video - smaller play button on mobile */ .s7-video-play{width:54px!important;height:54px!important;} .s7-video-play::after{ border-width:9px 0 9px 14px!important; margin-left:3px!important; } /* s6 stats - big number left, label right (both left-aligned in column) */ .s6-stat{ display:flex!important; flex-direction:row!important; align-items:center!important; gap:18px!important; } .s6-stat-n{ flex:0 0 auto; min-width:120px; font-size:40px!important; margin:0!important; } .s6-stat-l{ flex:1 1 auto; text-align:left!important; margin-top:0!important; line-height:1.4!important; } } /* ─── ████ CUSTOM CONTEXTUAL CURSOR ████████████████████████████████ A single cursor element that morphs section-by-section. We hide the native cursor on devices that have a precise pointer (desktop) and show our own. Mobile / touch gets the native cursor (no `:hover` on touch makes a custom cursor feel laggy and pointless). */ /* Custom cursor + tour-guide tag disabled - native cursor restored, the floating tag was feeling laggy and noisy on hover. The cursor element is hidden entirely; the cursor-tracking JS still runs but has no visible effect, kept around in case we want to re-enable. */ #cursor{display:none !important;} /* The arrow SVG - sits at the cursor's hotspot (top-left of the svg). The arrow tip is at roughly (1,1) inside the viewBox; we shift it so that the actual click point lines up with the JS-tracked mouse coordinate. */ .cursor-arrow{ position:absolute; width:22px;height:26px; left:-2px;top:-2px; /* nudge so the arrow tip points at (cx,cy) */ transform-origin:1px 1px; /* drop-shadow filter forces a repaint of the cursor's whole layer on every move - way too expensive. A simple SVG `paint-order` trick (stroke behind fill) keeps the arrow legible without the filter. */ transition:transform .25s cubic-bezier(.22,1,.36,1), opacity .2s ease; } /* The tour-guide tag - a pill that floats just below-right of the arrow with a short phrase about whatever the user is looking at. Empty tag = hidden (no chrome). */ .cursor-tag{ position:absolute; left:18px;top:18px; display:inline-flex;align-items:center; padding:5px 12px; background:#407A7D; /* brand teal */ color:#fff; font-size:11px;font-weight:600;letter-spacing:.02em; border-radius:999px; border:1px solid rgba(255,255,255,.12); box-shadow:0 6px 18px rgba(8,30,32,.35); white-space:nowrap; opacity:0; transform:translateY(-4px) scale(.92); transform-origin:0 50%; transition:opacity .25s ease, transform .35s cubic-bezier(.22,1,.36,1); font-family:'Aeonik',-apple-system,'Helvetica Neue',sans-serif; pointer-events:none; max-width:260px; text-overflow:ellipsis;overflow:hidden; } .cursor-tag:not(:empty){ opacity:1; transform:translateY(0) scale(1); } /* Variant: hover over a link/button - arrow tips back slightly + tag grows */ #cursor.is-hover .cursor-arrow{ transform:scale(1.15) rotate(-6deg); } #cursor.is-click .cursor-arrow{ transform:scale(.92); } /* Variant: dark sections invert the tag to ink-on-lime stays the same (it's already high-contrast). On light sections we just darken the shadow a bit. On flashlight, we hide the tag entirely so it doesn't clutter the reveal interaction. */ #cursor.is-flashlight .cursor-tag, #cursor.is-flashlight-bright .cursor-tag{opacity:0;} #cursor.is-flashlight .cursor-arrow{opacity:.55;} /* Bright-side flashlight (With Weel) keeps the arrow at full strength so it reads against the lime overlay. */ #cursor.is-flashlight-bright .cursor-arrow{opacity:1;} /* ─── ████ RESET MOMENT ████████████████████████████████████████████ A full-bleed black sub-section between the persona carousel and the contrast section. One sentence. No buttons. Massive type. Five seconds of breathing room before the page resumes. */ #sReset{ background:linear-gradient(160deg,#37474F 0%,#262626 100%); color:#fff; position:relative; overflow:hidden; display:flex;align-items:center;justify-content:center; height:100vh; scroll-snap-align:start; text-align:center; padding:0 32px; } /* Particle field canvas - fills the section, sits behind the text */ #resetParticles{ position:absolute;inset:0; width:100%;height:100%; z-index:0; pointer-events:none; /* Force a GPU layer so iOS Safari paints the canvas instead of skipping it inside the snap-scrolling MAIN container. */ transform:translateZ(0); will-change:transform; -webkit-backface-visibility:hidden; } .sReset-h{ position:relative;z-index:1; font-size:clamp(40px,8.2vw,156px); font-weight:200; line-height:.95; letter-spacing:-.04em; margin:0; max-width:1200px; text-wrap:balance; color:#fff; } /* Line-mask reveal for the reset heading. The base .lm/.l rules already handle the slide-in via .section-active; we just need to lock the line-height so the 108% translate fully clears the box at this giant font size, and give the masked element enough bottom padding so the descenders of letters like 'g' / 'y' aren't clipped while hidden. */ .sReset-h .lm{line-height:1.05;padding:.02em .14em .22em;} .sReset-h .l{ /* Pre-mask state is provided by the base .lm > .l rule. Override the stagger so line 1 leads and line 2 follows by a comfortable beat. */ } #sReset.section-active .lm:nth-child(1) > .l{transition-delay:.10s;} #sReset.section-active .lm:nth-child(2) > .l{transition-delay:.32s;} /* Reverse mask-out timing: when section-active is removed, the lines slide back DOWN. Stagger so line 2 exits first, line 1 trails. */ #sReset .lm:nth-child(1) > .l{transition-delay:.18s;} #sReset .lm:nth-child(2) > .l{transition-delay:.04s;} .sReset-h em{ font-style:normal;font-weight:600; color:#CAEE10; } .sReset-sub{position:relative;z-index:1;} .sReset-sub{ position:absolute;left:50%;bottom:48px; transform:translateX(-50%); font-size:11px;font-weight:600; letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.35); } @media (max-width:720px){ #sReset{height:auto;min-height:80vh;padding:120px 24px 100px;} .sReset-h{font-size:42px;} .sReset-sub{bottom:32px;font-size:10px;} }