/* ========================================================================== TallyBridge — marketing site Light, paper-white page with violet accents. The app replicas inside the device frames keep the REAL product palette (mobile-rn/src/theme + web/src/styles.css), so a mockup here looks like a screenshot rather than an interpretation — which is also why the phone bezel and the browser chrome bar stay dark: on a light page they read as physical objects framing a light UI. ========================================================================== */ :root { /* page (light) */ --ink-0: #fbfaff; /* page ground — a hint of violet, not clinical white */ --ink-1: #f3f1fb; /* alternating section */ --ink-2: #ffffff; --line: rgba(20, 22, 31, 0.10); --line-2: rgba(20, 22, 31, 0.17); --fg: #14161f; --fg-mut: #4b5563; /* 8.0:1 on the page ground */ --fg-faint: #5f6675; /* 5.4:1 on the page, 5.1:1 on the tinted sections/footer */ /* raised surfaces. On a dark page these were white films at 5% opacity; on a light one a card has to be lifted by shadow instead, or it disappears. */ --card: #ffffff; --card-tint: linear-gradient(180deg, rgba(108, 76, 241, 0.055), rgba(255, 255, 255, 0)); --shadow-1: 0 1px 2px rgba(16, 24, 40, 0.04), 0 10px 26px -14px rgba(31, 22, 84, 0.16); --shadow-2: 0 2px 6px rgba(16, 24, 40, 0.05), 0 28px 60px -28px rgba(83, 52, 216, 0.32); /* brand — identical values to the product's tokens */ --brand: #6c4cf1; --brand-dark: #5334d8; --brand-lt: #a594fa; --brand-soft: #efebfe; --brand-tint: #f7f4ff; --pos: #0e9f6e; --neg: #e02424; --warn: #f59e0b; --pos-soft: #e6f6f0; --neg-soft: #fdecec; --cyan: #22d3ee; --teal: #0e7490; /* the cyan is for glow only; text needs this one (4.8:1 on white) */ /* app surfaces (light, as shipped) */ --a-bg: #f8f8fc; --a-card: #ffffff; --a-border: #ebeaf2; --a-text: #14161f; --a-mut: #5a616e; /* 6.2:1 on white */ --a-faint: #6b7280; /* 4.8:1 on white and on --a-bg */ --r-s: 10px; --r-m: 16px; --r-l: 24px; --r-xl: 34px; --font: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace; --maxw: 1200px; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ink-0); color: var(--fg); font-family: var(--font); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; /* No overflow-x here on purpose: it makes a scroll container, which silently kills the mobile section's position:sticky demo column. Anything that would widen the page is clipped where it is emitted instead. */ } img, svg { max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4, h5 { margin: 0; line-height: 1.1; letter-spacing: -0.02em; font-weight: 800; } p { margin: 0; } .wrap { width: min(var(--maxw), calc(100% - 40px)); margin-inline: auto; } .wrap.narrow { width: min(820px, calc(100% - 40px)); } .skip { position: fixed; left: -999px; top: 8px; z-index: 200; background: var(--brand); color: #fff; padding: 10px 16px; border-radius: 8px; } .skip:focus { left: 12px; } /* The nav is sticky and 68px tall, so a #hash jump parks its target underneath: "Play the live demo" hid the mobile section's eyebrow and the first line of its heading, and the skip link did the same to the hero. Only the targets that need it — the section anchors clear the bar on their own padding already. */ #demo-anchor, #get-the-app, #main { scroll-margin-top: 84px; } /* Every interactive control gets a visible ring — there was none, on a page whose two demos are driven entirely by clicking. :focus-visible so a mouse click does not leave a ring behind. */ a:focus-visible, button:focus-visible, summary:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--brand); outline-offset: 3px; border-radius: 6px; } .phone-screen a:focus-visible, .phone-screen button:focus-visible, .browser button:focus-visible { outline-color: var(--brand-dark); outline-offset: 2px; } .grad { background: linear-gradient(96deg, #4a2fd0 0%, var(--brand) 38%, var(--teal) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .dot-live { width: 7px; height: 7px; border-radius: 50%; background: #22c55e; display: inline-block; box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.55); animation: pulse 2.4s ease-out infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0.5); } 70%, 100% { box-shadow: 0 0 0 9px rgba(34, 197, 94, 0); } } /* ---------- scroll progress ---------- */ .scroll-progress { position: fixed; inset: 0 0 auto 0; height: 2px; z-index: 120; pointer-events: none; } .scroll-progress i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--brand), var(--brand-lt), var(--cyan)); box-shadow: 0 0 12px rgba(108, 76, 241, 0.8); } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: 8px; justify-content: center; padding: 11px 18px; border-radius: 999px; font-weight: 700; font-size: 14.5px; border: 1px solid transparent; cursor: pointer; transition: transform .18s, box-shadow .25s, background .25s, border-color .25s; white-space: nowrap; } .btn-lg { padding: 15px 26px; font-size: 15.5px; } .btn-primary { background: linear-gradient(180deg, #7d5ef7, var(--brand-dark)); color: #fff; box-shadow: 0 10px 30px -10px rgba(108, 76, 241, 0.9), inset 0 1px 0 rgba(255, 255, 255, 0.25); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -12px rgba(108, 76, 241, 1); } .btn-glass { background: var(--card); border-color: var(--line-2); color: var(--fg); box-shadow: var(--shadow-1); backdrop-filter: blur(8px); } .btn-glass:hover { background: #fff; border-color: rgba(108, 76, 241, .45); transform: translateY(-2px); } .btn-ghost { color: var(--fg-mut); } .btn-ghost:hover { color: var(--fg); } /* ---------- nav ---------- */ .nav { position: sticky; top: 0; z-index: 100; backdrop-filter: blur(14px); background: linear-gradient(180deg, rgba(251, 250, 255, 0.94), rgba(251, 250, 255, 0.72)); border-bottom: 1px solid transparent; transition: border-color .3s, background .3s; } .nav.stuck { border-bottom-color: var(--line); box-shadow: 0 6px 24px -18px rgba(31, 22, 84, .45); } .nav-in { display: flex; align-items: center; gap: 24px; height: 68px; } .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 800; letter-spacing: -0.02em; } /* The app's own icon file, not a re-drawing of it. The radius is applied here because the source is the full-bleed 1024px app icon — iOS and Android mask the corners themselves, and on the web nothing does. */ .brand-mark { width: 30px; height: 30px; display: block; } .brand-mark img { width: 100%; height: 100%; display: block; border-radius: 22%; } .brand-mark.sm { width: 20px; height: 20px; } .brand-text b { color: var(--brand); } .nav-links { display: flex; gap: 26px; margin-left: auto; font-size: 14.5px; color: var(--fg-mut); font-weight: 600; } .nav-links a { position: relative; } .nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -6px; height: 2px; background: var(--brand); transition: right .28s ease; border-radius: 2px; } .nav-links a:hover { color: var(--fg); } .nav-links a:hover::after { right: 0; } .nav-cta { display: flex; gap: 10px; align-items: center; } .nav-burger { display: none; background: none; border: 0; padding: 10px; cursor: pointer; margin-left: auto; } .nav-burger span { display: block; width: 22px; height: 2px; background: var(--fg); margin: 4px 0; border-radius: 2px; } /* ========================================================================== HERO ========================================================================== */ .hero { position: relative; padding: 72px 0 40px; overflow: hidden; } #hero-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; } .hero-veil { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(251, 250, 255, 0.97) 0%, rgba(251, 250, 255, 0.86) 40%, rgba(251, 250, 255, 0.10) 74%), radial-gradient(900px 500px at 78% 6%, rgba(108, 76, 241, 0.10), transparent 70%), linear-gradient(180deg, rgba(251, 250, 255, 0.25) 0%, rgba(251, 250, 255, 0.55) 62%, var(--ink-0) 100%); } .orb { position: absolute; border-radius: 50%; filter: blur(90px); opacity: .5; pointer-events: none; } .orb-a { width: 420px; height: 420px; left: -140px; top: 60px; background: radial-gradient(circle, #a594fa, transparent 66%); opacity: .42; } .orb-b { width: 340px; height: 340px; right: -90px; bottom: -70px; background: radial-gradient(circle, #67e8f9, transparent 66%); opacity: .32; } .hero-in { position: relative; display: grid; /* The phone was crowding the headline. The gutter grows with the viewport and the copy column can no longer expand into it. */ grid-template-columns: minmax(0, 1fr) minmax(340px, 0.86fr); gap: clamp(40px, 6.5vw, 104px); align-items: center; padding-block: 26px 44px; } .pill { display: inline-flex; align-items: center; gap: 9px; font-size: 12.5px; font-weight: 700; letter-spacing: .01em; padding: 7px 14px; border-radius: 999px; color: var(--brand-dark); background: #fff; border: 1px solid rgba(108, 76, 241, 0.28); box-shadow: var(--shadow-1); } .hero h1 { font-size: clamp(38px, 5.2vw, 66px); margin: 20px 0 18px; letter-spacing: -0.035em; } .lede { color: var(--fg-mut); font-size: 17px; max-width: 56ch; } .lede b { color: var(--fg); font-weight: 700; } .hero-actions { display: flex; gap: 12px; margin-top: 28px; flex-wrap: wrap; } .hero-actions.center { justify-content: center; } /* ---------- 3D stage ---------- */ .hero-stage { perspective: 1300px; position: relative; height: 600px; display: grid; place-items: center; } .stage-3d { position: absolute; inset: 0; /* PERSPECTIVE LIVES HERE, and transform-style stays flat. It used to be preserve-3d with the perspective up on .hero-stage, which made the phone a GRANDCHILD of the perspective — so preserve-3d was the only thing giving it real depth. That combination also made its contents unclickable: inside a preserve-3d subtree the rotated phone's children stop hit-testing entirely at negative rotateY. Measured: the tab buttons were not findable anywhere within 40px of where they were painted. With the perspective on the phone's direct parent the depth is identical and hit-testing is ordinary again. Nothing else needs a shared 3D space now that the chips have moved out of here. */ perspective: 1300px; /* Centres the phone, and rotates nothing. The two phones used different 3D entirely: this stage leaned -16deg (a hard left tilt) and straightened on scroll, while the demo section tilts the PHONE -8deg/3deg and follows the pointer. The phone below now carries the demo's transform verbatim, so both are driven by one code path instead of two sets of numbers. */ display: grid; place-items: center; } .floatcard { position: absolute; z-index: 6; display: inline-flex; align-items: center; gap: 8px; padding: 10px 14px; font-size: 12.5px; font-weight: 700; color: var(--fg); background: rgba(255, 255, 255, 0.94); border: 1px solid var(--line-2); border-radius: 12px; backdrop-filter: blur(10px); box-shadow: var(--shadow-2); white-space: nowrap; /* a chip that wraps stops reading as a chip */ animation: float 6s ease-in-out infinite; } .fc-sync { left: 50%; margin-left: -212px; top: 16px; } .fc-wa { left: 50%; margin-left: 8px; bottom: 116px; animation-delay: -2s; } .fc-wa .wa { color: #0f8a45; font-size: 15px; } @keyframes float { 0%, 100% { translate: 0 0; } 50% { translate: 0 -12px; } } /* ---------- phone frame ---------- */ .phone { position: relative; width: 315px; height: 600px; border-radius: 44px; padding: 11px; background: linear-gradient(160deg, #2b2740, #100e1c 55%, #211d33); border: 1px solid rgba(255, 255, 255, 0.14); box-shadow: 0 40px 80px -34px rgba(31, 22, 84, 0.5), 0 4px 12px rgba(31, 22, 84, .12), inset 0 1px 0 rgba(255, 255, 255, 0.22); } .phone-hero { transform: translateY(var(--fy, 0px)) rotateY(var(--ty, 0deg)) rotateX(var(--tx, 0deg)); } .phone-glow { position: absolute; inset: -14% 0; z-index: -1; border-radius: 50%; background: radial-gradient(circle, rgba(165, 148, 250, 0.6), transparent 66%); filter: blur(38px); } .phone-screen { position: relative; height: 100%; border-radius: 34px; overflow: hidden; background: var(--a-bg); color: var(--a-text); font-size: 12px; line-height: 1.35; display: flex; flex-direction: column; } .phone-screen::before { content: ''; position: absolute; left: 50%; top: 8px; translate: -50% 0; width: 86px; height: 22px; background: #08070e; border-radius: 999px; z-index: 9; } .sb { display: flex; justify-content: space-between; align-items: center; padding: 9px 18px 4px; font-size: 10.5px; font-weight: 700; color: var(--a-text); } .sb-r { display: inline-flex; gap: 3px; align-items: flex-end; } .sb-r i { width: 3px; background: var(--a-text); border-radius: 1px; } .sb-r i:nth-child(1) { height: 5px; } .sb-r i:nth-child(2) { height: 7px; } .sb-r i:nth-child(3) { height: 9px; } .app-head { display: flex; align-items: center; justify-content: space-between; padding: 6px 14px 8px; } .app-co { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; font-size: 12.5px; } .chev { font-style: normal; color: var(--a-faint); font-size: 10px; } .bell { position: relative; font-size: 13px; color: var(--a-mut); } .bell em { position: absolute; top: -4px; right: -6px; background: var(--neg); color: #fff; font-size: 8px; font-style: normal; font-weight: 800; padding: 1px 4px; border-radius: 999px; } .mscroll { flex: 1; padding: 0 12px 74px; /* Scrollable, because these are the app's real screens and several are longer than the frame — the Reports list and Overview on Home, the bills on a party. overscroll-behavior stops a flick inside the phone from scrolling the page, and the scrollbar is hidden so the mock still looks like a device. */ overflow: hidden auto; overscroll-behavior: contain; scrollbar-width: none; } .mscroll::-webkit-scrollbar { display: none; } .tile-row { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; } .tile { background: var(--a-card); border: 1px solid var(--a-border); border-radius: 14px; padding: 9px 10px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } .tile span { display: block; font-size: 9.5px; color: var(--a-mut); font-weight: 600; } .tile b { font-size: 13.5px; letter-spacing: -0.02em; } .tile i { display: block; font-style: normal; font-size: 9px; margin-top: 1px; } .tile i.neg, .btable .neg, b.neg { color: var(--neg); } .tile i.mut, b.mut { color: var(--a-mut); } .qm { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; } .qm-i { background: var(--a-card); border: 1px solid var(--a-border); border-radius: 14px; padding: 10px 4px; text-align: center; font-size: 9.5px; font-weight: 700; color: var(--a-text); transition: transform .2s, box-shadow .2s; } .qm-i:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -10px rgba(83, 52, 216, .6); } .qm-i span { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 auto 5px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-dark); font-size: 13px; } @keyframes growW { from { width: 0; } to { width: var(--w); } } .rrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 14px; padding: 10px 12px; margin-top: 8px; } .rrow b { display: block; font-size: 11.5px; } .rrow span { font-size: 9.5px; color: var(--a-mut); } .sparkline { width: 62px; height: 22px; } .sparkline polyline { fill: none; stroke: var(--brand); stroke-width: 1.8; stroke-linecap: round; } .segs { display: inline-flex; background: #efeef6; border-radius: 999px; padding: 3px; gap: 2px; margin: 4px 0 10px; } .segs b { font-size: 10px; padding: 5px 11px; border-radius: 999px; color: var(--a-mut); font-weight: 700; } .segs b.on { background: #fff; color: var(--a-text); box-shadow: 0 1px 3px rgba(16, 24, 40, .12); } .vch b.pos, .pos { color: var(--pos); } .rc-msg { margin: 9px 0; padding: 9px 10px; border-radius: 12px; background: #f2fbf5; border: 1px solid #d6f0e0; font-size: 10px; color: #1c3a2b; min-height: 62px; } .rc-msg .caret { display: inline-block; width: 6px; background: var(--pos); animation: blink 1s steps(2) infinite; } @keyframes blink { 50% { opacity: 0; } } .chip-ok { font-size: 8.5px; font-weight: 800; color: var(--pos); background: var(--pos-soft); padding: 3px 7px; border-radius: 999px; } .chip-warn { font-size: 8.5px; font-weight: 800; color: #b26a00; background: #fef4e6; padding: 3px 7px; border-radius: 999px; } .chat { display: flex; flex-direction: column; gap: 8px; padding-top: 6px; } .cb { max-width: 84%; padding: 9px 11px; border-radius: 14px; font-size: 10.5px; } .cb.me { align-self: flex-end; background: var(--brand); color: #fff; border-bottom-right-radius: 5px; } .cb.ai { align-self: flex-start; background: var(--a-card); border: 1px solid var(--a-border); border-bottom-left-radius: 5px; } .cb.ai ol { margin: 6px 0 0; padding-left: 16px; } .cb.ai li { margin-bottom: 2px; } .grounded { display: block; margin-top: 7px; padding-top: 6px; border-top: 1px dashed var(--a-border); font-size: 8.5px; color: var(--a-faint); font-weight: 600; } .cb.typing { display: inline-flex; gap: 4px; } .cb.typing i { width: 5px; height: 5px; border-radius: 50%; background: var(--a-faint); animation: bounce 1.2s infinite; } .cb.typing i:nth-child(2) { animation-delay: .15s; } .cb.typing i:nth-child(3) { animation-delay: .3s; } @keyframes bounce { 0%, 60%, 100% { transform: translateY(0); opacity: .5; } 30% { transform: translateY(-4px); opacity: 1; } } .chat-input { position: absolute; left: 12px; right: 12px; bottom: 66px; display: flex; align-items: center; justify-content: space-between; background: #fff; border: 1px solid var(--a-border); border-radius: 999px; padding: 8px 8px 8px 14px; font-size: 10px; color: var(--a-faint); } .chat-input b { width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; } .setgrp { background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; overflow: hidden; } .setrow { display: flex; align-items: center; justify-content: space-between; padding: 11px 12px; font-size: 11px; border-bottom: 1px solid var(--a-border); } .setrow:last-child { border-bottom: 0; } .sw { width: 30px; height: 18px; border-radius: 999px; background: #dcdae8; position: relative; transition: background .2s; } .sw::after { content: ''; position: absolute; top: 2px; left: 2px; width: 14px; height: 14px; border-radius: 50%; background: #fff; transition: left .2s; } .sw.on { background: var(--brand); } .sw.on::after { left: 14px; } .cc-top { display: flex; align-items: center; gap: 7px; font-size: 11px; font-weight: 800; } .meter { height: 7px; border-radius: 999px; background: #eceaf6; overflow: hidden; margin: 6px 0 5px; } .meter i { display: block; height: 100%; width: var(--w); border-radius: 999px; background: linear-gradient(90deg, var(--brand), var(--warn)); } .cc-note { font-size: 9px; color: var(--a-mut); } /* Restored after a prune that removed these along with their dead co-selectors — each of these halves is still in use. */ .sec-row { font-size: 10.5px; font-weight: 800; color: var(--a-mut); margin: 14px 4px 8px; letter-spacing: .04em; text-transform: uppercase; } .vlist { display: grid; gap: 7px; } .vch { display: grid; grid-template-columns: auto 1fr auto; gap: 9px; align-items: center; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 14px; padding: 9px 11px; } .vmid b { display: block; font-size: 11.5px; } .vmid span { font-size: 9px; color: var(--a-mut); } .conn-card { margin-top: 10px; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; padding: 12px; box-shadow: 0 10px 24px -18px rgba(16, 24, 40, .5); } .cc-row { display: flex; justify-content: space-between; font-size: 10px; color: var(--a-mut); padding: 4px 0; } .sec-row-act { display: flex; align-items: baseline; justify-content: space-between; } .sec-row-act b { color: var(--brand); font-size: 10px; text-transform: none; letter-spacing: 0; } /* ========================================================================== PHONE SCREENS — rebuilt from the shipped app's own screens. Proportions are the real ones scaled to a 320px frame (the device is 393pt), which is why the type is small: it is the app's type at the app's ratio, not a diagram of it. Every figure and every name here is demo data. ========================================================================== */ .greet { display: flex; align-items: flex-start; justify-content: space-between; padding: 4px 2px 10px; } .greet span { font-size: 10.5px; color: var(--a-mut); font-weight: 600; } .greet b { display: block; font-size: 15px; letter-spacing: -.02em; } .greet em { font-style: normal; } .dotnew { position: absolute; top: -1px; right: -1px; width: 6px; height: 6px; border-radius: 50%; background: var(--brand); } .copill { display: inline-flex; align-items: center; gap: 6px; max-width: 100%; background: var(--brand); color: #fff; font-size: 10px; font-weight: 800; padding: 7px 12px; border-radius: 999px; margin: 0 0 10px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .copill .chev { color: rgba(255, 255, 255, .8); } /* the violet hero card, with the app's little document/chart motif */ .ovcard { position: relative; overflow: hidden; border-radius: 20px; padding: 14px; color: #fff; background: linear-gradient(150deg, #6c4cf1, #5334d8 68%, #4527bd); box-shadow: 0 14px 30px -14px rgba(83, 52, 216, .85); } .ov-art { position: absolute; right: 10px; top: 8px; width: 92px; height: 86px; } .ov-doc { position: absolute; right: 0; top: 0; width: 56px; height: 46px; border-radius: 8px 8px 4px 4px; background: #fff; opacity: .95; } .ov-doc::before { content: ''; position: absolute; inset: 9px 10px auto 8px; height: 3px; border-radius: 2px; background: #d8d0fb; box-shadow: 0 8px 0 #d8d0fb, 0 16px 0 #e6e1fc; } .ov-chip { position: absolute; right: 46px; top: 30px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .55); display: grid; place-items: center; font-size: 11px; font-weight: 800; } .ov-bar { position: absolute; right: 0; top: 36px; width: 34px; height: 34px; border-radius: 9px; background: #3f1fae; display: grid; place-items: center; font-size: 13px; } .ov-label { position: relative; font-size: 10.5px; opacity: .9; font-weight: 700; } .ov-label i { font-style: normal; opacity: .7; } .ov-value { position: relative; font-size: 27px; font-weight: 800; letter-spacing: -.03em; margin: 1px 0 12px; } .ov-row { position: relative; display: flex; align-items: center; gap: 12px; } .ov-row > div { min-width: 0; } .ov-row span { display: block; font-size: 9.5px; opacity: .85; } .ov-row b { font-size: 14px; } .ov-sep { width: 1px; height: 26px; background: rgba(255, 255, 255, .28); } .ov-sync { position: relative; display: flex; align-items: center; gap: 6px; margin-top: 12px; font-size: 9.5px; opacity: .85; } .tile-go { position: relative; } .tile-go::after { content: '›'; position: absolute; right: 9px; top: 7px; color: var(--a-faint); font-size: 12px; } .ti { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; font-style: normal; font-size: 12px; margin-bottom: 7px; } .ti-in { background: var(--pos-soft); color: var(--pos); } .ti-out { background: var(--brand-soft); color: var(--brand-dark); } .tile em { display: block; font-style: normal; font-size: 9px; font-weight: 700; margin-top: 1px; } .tile > b + span { font-size: 9.5px; color: var(--a-mut); font-weight: 600; } .dotl { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--a-faint); } .dotl.pos { background: var(--pos); } .dotl.neg { background: var(--neg); } .dotl.br { background: var(--brand); } .qm4 { grid-template-columns: repeat(4, 1fr); } .qm4 .qm-i { border: 0; background: none; box-shadow: none; padding: 2px 0; font-size: 9px; } .qm4 .qm-i span { width: 44px; height: 44px; border-radius: 14px; font-size: 17px; margin-bottom: 6px; } .qm-ai span { background: #fef3d7 !important; color: #b26a00 !important; } .rlist { background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; overflow: hidden; } .rlist .rrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; border: 0; border-radius: 0; border-bottom: 1px solid var(--a-border); margin: 0; padding: 10px 11px; } .rlist .rrow:last-child { border-bottom: 0; } .ri { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 9px; font-style: normal; font-size: 13px; } .ri-v { background: var(--brand-soft); color: var(--brand-dark); } .ri-g { background: var(--pos-soft); color: var(--pos); } .ri-a { background: #fef4e6; color: #b26a00; } .ri-r { background: var(--neg-soft); color: var(--neg); } .sparkline.sl-g polyline { stroke: var(--pos); } .sparkline.sl-a polyline { stroke: var(--warn); } .mback { font: inherit; font-size: 17px; line-height: 1; color: var(--a-text); background: none; border: 0; padding: 0 4px 0 0; margin-right: 2px; cursor: pointer; } /* ---------- Outstanding ---------- */ .ocard { background: var(--brand-tint); border: 1px solid #ece7fd; border-radius: 18px; padding: 13px; text-align: center; } .oc-lab { font-size: 10px; color: var(--a-mut); font-weight: 600; } .oc-val { display: block; font-size: 21px; font-weight: 800; letter-spacing: -.03em; } .oc-sub { font-size: 9.5px; color: var(--a-faint); } .splitbar { display: flex; gap: 2px; height: 8px; margin: 11px 0 9px; } .splitbar i { height: 100%; width: var(--w); border-radius: 999px; } .sb-pos { background: var(--pos); } .sb-neg { background: var(--neg); } .oc-legend { display: flex; justify-content: space-between; text-align: left; font-size: 9.5px; color: var(--a-mut); } .oc-legend b { display: block; font-size: 12px; color: var(--a-text); } .oc-legend .dotl { margin-right: 4px; } .agegrid { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; } .agec { background: var(--a-card); border: 1px solid var(--a-border); border-radius: 13px; padding: 9px 10px; font-size: 9.5px; color: var(--a-mut); } .agec .dotl { margin-right: 4px; } .agec b { display: block; font-size: 12.5px; color: var(--a-text); letter-spacing: -.02em; margin-top: 2px; } .netcard { margin-top: 10px; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; padding: 12px; } .nc-row { display: flex; justify-content: space-between; align-items: baseline; font-size: 10.5px; padding: 3px 0; } .nc-row b { font-size: 11.5px; } .nc-mut { color: var(--a-mut); } .nc-tot { border-top: 1px solid var(--a-border); margin-top: 5px; padding-top: 7px; font-weight: 800; } .nc-tot b { font-size: 13px; } .nc-note { font-size: 8.5px; color: var(--a-faint); margin-top: 7px; line-height: 1.4; } .navrow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 10px; margin-top: 8px; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; padding: 11px 12px; } .navrow b { display: block; font-size: 11.5px; } .navrow span { font-size: 9.5px; color: var(--a-mut); } .navrow em { font-style: normal; color: var(--a-faint); } /* ---------- Browse (groups) ---------- */ .filterbtn { width: 26px; height: 26px; border-radius: 50%; border: 1px solid var(--a-border); background: var(--a-card); color: var(--brand-dark); font-size: 12px; cursor: pointer; font-family: inherit; } .msearch { background: var(--a-card); border: 1px solid var(--a-border); border-radius: 12px; padding: 9px 12px; font-size: 10.5px; color: var(--a-faint); margin-bottom: 10px; } .glist { display: grid; gap: 7px; } .grow { display: flex; align-items: center; justify-content: space-between; gap: 8px; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 14px; padding: 10px 11px; } .grow > div:first-child { min-width: 0; } .grow b { display: block; font-size: 11.5px; } .gmeta { display: flex; align-items: center; gap: 5px; font-size: 9px; color: var(--a-mut); margin-top: 3px; } .ac { font-size: 8.5px; font-weight: 800; padding: 2px 6px; border-radius: 999px; } .ac-g { background: var(--pos-soft); color: var(--pos); } .ac-w { background: #fef4e6; color: #b26a00; } .ac-o { background: #fff0e2; color: #c2570a; } .ac-r { background: var(--neg-soft); color: var(--neg); } .gamt { font-size: 11.5px; font-weight: 800; white-space: nowrap; letter-spacing: -.02em; } .gamt em { font-style: normal; color: var(--a-faint); font-weight: 600; margin-left: 3px; } /* the app's "Show bills" action sheet */ .sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 12; padding: 8px 12px 12px; background: #fff; border-radius: 20px 20px 0 0; box-shadow: 0 -14px 40px -16px rgba(16, 24, 40, .45); animation: sheetUp .28s cubic-bezier(.2, .8, .2, 1); } @keyframes sheetUp { from { transform: translateY(100%); } to { transform: none; } } .sheet[hidden] { display: none; } .sheet-grab { width: 44px; height: 4px; border-radius: 999px; background: #e6e4ef; margin: 0 auto 10px; } .sheet-h { display: block; font-size: 13px; margin: 0 2px 6px; } .sheet-list { display: grid; gap: 1px; /* Ten rows need 310px. At 250 the last two ("Over 120 days", "Over 180 days") were cut with overflow:hidden — unreachable in a replica of a screen where they exist. auto as well, so a future eleventh row cannot vanish. */ max-height: 310px; overflow-y: auto; scrollbar-width: none; } .sheet-list::-webkit-scrollbar { display: none; } .sheet-list span { font-size: 11.5px; font-weight: 700; color: var(--brand); padding: 7px 2px; } .sheet-list span.on { color: var(--brand-dark); } .sheet-cancel { width: 100%; margin-top: 8px; padding: 11px; border: 0; border-radius: 12px; cursor: pointer; background: #f4f3f9; color: var(--a-mut); font-family: inherit; font-size: 11.5px; font-weight: 700; } /* ---------- Party detail ---------- */ .pcard { background: var(--brand-tint); border: 1px solid #ece7fd; border-radius: 18px; padding: 13px; } .pc-top { display: flex; align-items: center; gap: 10px; } .pav { width: 34px; height: 34px; flex: none; border-radius: 50%; background: var(--pos); color: #fff; display: grid; place-items: center; font-size: 11px; font-weight: 800; } .pc-top b { display: block; font-size: 12.5px; line-height: 1.25; } .pc-top span { font-size: 9px; color: var(--a-mut); font-weight: 700; } .pc-nums { display: flex; justify-content: space-between; gap: 10px; margin-top: 12px; } .pc-nums span { display: block; font-size: 9.5px; color: var(--a-mut); } .pc-nums b { font-size: 16px; letter-spacing: -.03em; } .pc-nums em { display: block; font-style: normal; font-size: 8.5px; color: var(--a-faint); } .pc-nums .r { text-align: right; } .acts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 7px; margin-top: 9px; } .act { background: var(--a-card); border: 1px solid var(--a-border); border-radius: 13px; padding: 9px 4px; text-align: center; font-size: 9.5px; font-weight: 700; } .act span { display: grid; place-items: center; width: 28px; height: 28px; margin: 0 auto 5px; border-radius: 50%; background: var(--brand-soft); color: var(--brand-dark); font-size: 12px; } .act-on span { background: var(--brand); color: #fff; } .act-off { color: var(--a-faint); } .act-off span { background: #f2f1f7; color: var(--a-faint); } .dlist, .blist { background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; overflow: hidden; } .drow, .brow { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; padding: 9px 11px; border-bottom: 1px solid var(--a-border); font-size: 10px; } .drow:last-child, .brow:last-child { border-bottom: 0; } .drow span { color: var(--a-mut); flex: none; } .drow b { font-size: 10.5px; text-align: right; font-weight: 600; } .brow b { font-size: 11.5px; } .brow span { display: block; font-size: 9px; color: var(--a-mut); font-weight: 600; } /* ---------- Day Book ---------- */ .datepill { display: flex; align-items: center; gap: 9px; margin-bottom: 10px; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 14px; padding: 9px 11px; } .dp-ic { display: grid; place-items: center; width: 26px; height: 26px; border-radius: 8px; background: var(--brand-soft); color: var(--brand-dark); font-size: 12px; } .datepill b { display: block; font-size: 11.5px; } .datepill span { font-size: 9px; color: var(--a-mut); } .datepill .chev { margin-left: auto; } .vi { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f2f1f7; color: var(--a-mut); font-style: normal; font-size: 12px; } .vi-up { background: var(--neg-soft); color: var(--neg); } .vi-dn { background: var(--pos-soft); color: var(--pos); } /* ---------- Parties tab: the app's Customers / Vendors list ---------- */ .grpchip { display: inline-flex; align-items: center; gap: 6px; margin-bottom: 8px; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 999px; padding: 6px 11px; font-size: 10.5px; font-weight: 700; } .grpchip span { color: var(--a-mut); } .clist { display: grid; gap: 7px; } .crow { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 9px; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 14px; padding: 9px 11px; } .crow > div:nth-child(2) { min-width: 0; } .cav { width: 30px; height: 30px; border-radius: 50%; display: grid; place-items: center; color: #fff; font-size: 10px; font-weight: 800; } .crow b { display: block; font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crow > div:nth-child(2) span { display: block; font-size: 9px; color: var(--a-mut); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .camt { text-align: right; white-space: nowrap; } .camt b { font-size: 11.5px; letter-spacing: -.02em; } .camt em { font-style: normal; font-size: 8.5px; color: var(--a-mut); display: block; } /* ---------- Ask tab: the app's prompt screen, not a chat transcript ---------- */ .askhead { padding: 2px 2px 12px; } .askhead b { display: block; font-size: 19px; letter-spacing: -.02em; } .askhead em { font-style: normal; } .askhead span { display: block; font-size: 11px; color: var(--a-mut); margin-top: 3px; } .askinput { background: var(--a-card); border: 1px solid var(--a-border); border-radius: 14px; padding: 13px 14px; font-size: 11.5px; color: var(--a-faint); } .askbtn { width: 100%; margin-top: 9px; padding: 13px; border: 0; border-radius: 14px; cursor: pointer; background: var(--brand); color: #fff; font-family: inherit; font-size: 13px; font-weight: 800; } .askchips { display: grid; justify-items: start; gap: 6px; margin: 4px 0 2px; } .askchips[hidden] { display: none; } .askchips span { background: var(--brand-soft); color: var(--brand-dark); border-radius: 999px; padding: 7px 12px; font-size: 10.5px; font-weight: 600; text-align: left; cursor: pointer; transition: background .18s, color .18s; } .askchips span:hover { background: #e4ddfd; } .askchips span.on { background: var(--brand); color: #fff; } /* The question, once asked, sits in the box as real text rather than a prompt. */ .askinput.is-filled { color: var(--a-text); font-weight: 600; } /* Room for the pinned input, so the last bubble is never behind it. */ .mscreen[data-screen="ask"] .mscroll { padding-bottom: 108px; } /* The answer. A card rather than a chat bubble, because that is how the app presents a single grounded reply. */ .askanswer { margin-top: 12px; } .askanswer[hidden] { display: none; } .ansbody { background: var(--a-card); border: 1px solid var(--a-border); border-left: 3px solid var(--brand); border-radius: 12px; padding: 11px 12px; font-size: 11px; line-height: 1.45; animation: ansIn .3s cubic-bezier(.2, .8, .2, 1); } @keyframes ansIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* ---------- Settings tab ---------- */ .profcard { background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; padding: 13px; } .profav { width: 44px; height: 44px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; font-size: 17px; font-weight: 800; } .profname { display: block; font-size: 13px; margin-top: 9px; } .profmail { display: block; font-size: 10px; color: var(--a-mut); } .profrow { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--a-border); font-size: 10.5px; color: var(--a-mut); } .profrow b { color: var(--a-text); font-size: 11px; } .copill-sm { font-size: 9px; padding: 5px 9px; margin: 0; font-style: normal; max-width: 165px; } .setlabel { font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: var(--a-faint); margin: 13px 4px 6px; } .setcard { display: flex; align-items: center; gap: 10px; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 14px; padding: 11px 12px; } .setcard > div { flex: 1; min-width: 0; } .setcard b { display: block; font-size: 11.5px; } .setcard span { font-size: 9.5px; color: var(--a-mut); } .setcard em { font-style: normal; color: var(--a-faint); } .setcard-col { display: block; } .themepick { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; margin-top: 10px; } .themepick b { text-align: center; font-size: 10px; font-weight: 700; padding: 8px 4px; border-radius: 10px; border: 1px solid var(--a-border); color: var(--a-mut); } .themepick b.on { border-color: var(--brand); background: var(--brand-soft); color: var(--brand-dark); } /* ---------- Profit & Loss (a report, reached from the Reports list) ---------- */ .pnlcard { background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; padding: 13px; } .pnl-lab { font-size: 10.5px; color: var(--a-mut); } .pnl-val { display: block; font-size: 24px; font-weight: 800; letter-spacing: -.03em; } .pnl-split { display: flex; justify-content: space-between; gap: 10px; margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--a-border); } .pnl-split span { display: block; font-size: 9.5px; color: var(--a-mut); } .pnl-split b { font-size: 11.5px; } .pnl-split .r { text-align: right; } .pnl-gross { display: flex; justify-content: space-between; margin-top: 9px; padding-top: 9px; border-top: 1px solid var(--a-border); font-size: 10.5px; color: var(--a-mut); } .pnl-gross b { color: var(--a-text); font-size: 12px; } .stmt { margin-top: 9px; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; overflow: hidden; } .strow { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 8px; padding: 10px 12px; border-bottom: 1px solid var(--a-border); font-size: 10.5px; } .strow:last-child { border-bottom: 0; } .strow b { font-size: 11px; } .strow em { font-style: normal; color: var(--a-faint); font-size: 11px; } .strow-tot { background: var(--a-bg); font-weight: 800; } .strow-grand { background: var(--brand-tint); font-weight: 800; } /* ---------- Invoice ---------- */ .ivhead { display: flex; justify-content: space-between; background: var(--a-card); border: 1px solid var(--a-border); border-radius: 14px; padding: 10px 12px; font-size: 10px; } .ivhead span { color: var(--a-mut); } .ivhead b { display: block; font-size: 11px; } .ivhead .r { text-align: right; } .ivitems { background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; padding: 12px; } .ivi { padding-bottom: 9px; margin-bottom: 9px; border-bottom: 1px solid var(--a-border); } .ivi > b { font-size: 11px; line-height: 1.3; display: block; } .ivi-m { display: flex; justify-content: space-between; gap: 10px; font-size: 9.5px; color: var(--a-mut); margin-top: 3px; } .ivi-m b { color: var(--a-text); font-size: 11px; } .hsn { display: block; font-size: 8.5px; color: var(--a-faint); } .ivt { display: flex; justify-content: space-between; font-size: 10px; color: var(--a-mut); padding: 2px 0; } .ivt b { color: var(--a-text); font-weight: 600; } .ivt-tot { border-top: 1px solid var(--a-border); margin-top: 6px; padding-top: 7px; color: var(--a-text); font-weight: 800; } .ivt-tot b { font-size: 16px; letter-spacing: -.03em; } .ivwords { font-size: 8.5px; color: var(--a-faint); margin-top: 4px; line-height: 1.4; } .ivirn { background: var(--a-card); border: 1px solid var(--a-border); border-radius: 16px; padding: 11px 12px; } .ivirn > span:first-child { font-size: 9.5px; color: var(--a-mut); } .ivirn code { display: block; font-family: var(--mono); font-size: 8.5px; word-break: break-all; margin: 3px 0 6px; color: var(--a-text); } .ivshare { width: 100%; margin-top: 10px; padding: 12px; border: 0; border-radius: 14px; cursor: pointer; background: var(--brand); color: #fff; font-family: inherit; font-size: 12px; font-weight: 800; } .tabbar { position: absolute; left: 12px; right: 12px; bottom: 12px; height: 54px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: center; background: rgba(255, 255, 255, 0.86); backdrop-filter: blur(12px); border: 1px solid var(--a-border); border-radius: 20px; z-index: 8; box-shadow: 0 12px 28px -14px rgba(16, 24, 40, .5); } .tabbar i, .tabbar button { display: grid; place-items: center; gap: 1px; font-style: normal; font-size: 14px; color: var(--a-mut); cursor: pointer; transition: color .2s, transform .2s; font-family: inherit; border: 0; background: none; padding: 0; } .tabbar i em, .tabbar button em { font-style: normal; font-size: 8px; font-weight: 700; } .tabbar i.on, .tabbar button.on { color: var(--brand); transform: translateY(-1px); } .tabbar i:hover, .tabbar button:hover { color: var(--brand-dark); } /* ---------- stats + marquee ---------- */ .statstrip { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; padding: 26px; border: 1px solid var(--line); border-radius: var(--r-l); background: var(--card); box-shadow: var(--shadow-1); backdrop-filter: blur(8px); } .statstrip b { display: block; font-size: 34px; letter-spacing: -0.04em; background: linear-gradient(180deg, #2a1c6b, var(--brand)); -webkit-background-clip: text; background-clip: text; color: transparent; } .statstrip span { font-size: 13px; color: var(--fg-mut); } .marquee { overflow: hidden; border-block: 1px solid var(--line); padding: 14px 0; margin-top: 54px; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .marquee-in { display: flex; gap: 40px; width: max-content; animation: slide 38s linear infinite; } .marquee span { font-size: 13.5px; font-weight: 700; color: var(--fg-faint); white-space: nowrap; } .marquee span::before { content: '◆'; color: var(--brand); margin-right: 12px; font-size: 8px; vertical-align: middle; } @keyframes slide { to { transform: translateX(-50%); } } /* ========================================================================== SECTIONS ========================================================================== */ .sec { position: relative; padding: 112px 0; } .sec-alt { background: radial-gradient(1200px 600px at 50% -10%, rgba(108, 76, 241, 0.12), transparent 70%), var(--ink-1); border-block: 1px solid var(--line); } .sec-head { max-width: 760px; margin-bottom: 52px; } .sec-head.center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-block; font-size: 12px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--brand); margin-bottom: 14px; } .sec-head h2 { font-size: clamp(29px, 3.6vw, 46px); letter-spacing: -0.035em; } .sec-head p { color: var(--fg-mut); margin-top: 16px; font-size: 16.5px; } /* 3D hover lift, shared */ .p3d { transform-style: preserve-3d; transition: transform .4s cubic-bezier(.2, .7, .2, 1), box-shadow .4s, border-color .3s; } .p3d:hover { border-color: var(--line-2); } /* ---------- how it works ---------- */ .pipe { display: grid; grid-template-columns: 1fr auto 1fr auto 1fr; gap: 12px; align-items: stretch; perspective: 1200px; } .pipe-card { height: 100%; padding: 26px 24px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-1); backdrop-filter: blur(8px); } .pipe-card:hover { transform: translateY(-6px) rotateX(4deg); box-shadow: 0 40px 70px -40px rgba(108, 76, 241, .9); } .pipe-ico { width: 46px; height: 46px; display: grid; place-items: center; font-size: 21px; border-radius: 14px; background: linear-gradient(160deg, rgba(108, 76, 241, .14), rgba(108, 76, 241, .05)); border: 1px solid var(--line-2); margin-bottom: 16px; } .pipe-card h3 { font-size: 18px; margin-bottom: 10px; } .pipe-card p { color: var(--fg-mut); font-size: 14.5px; } .pipe-card ul { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; } .pipe-card li { font-size: 13px; color: var(--fg-mut); padding-left: 18px; position: relative; } .pipe-card li::before { content: '✓'; position: absolute; left: 0; color: var(--brand); font-weight: 800; } .pipe-card code { font-family: var(--mono); font-size: 12px; color: var(--teal); } .pipe-flow { display: grid; place-items: center; gap: 6px; align-content: center; } .pipe-flow i { width: 6px; height: 6px; border-radius: 50%; background: var(--brand); animation: travel 2.4s ease-in-out infinite; } .pipe-flow i:nth-child(2) { animation-delay: .3s; } .pipe-flow i:nth-child(3) { animation-delay: .6s; } @keyframes travel { 0% { opacity: 0; transform: translateX(-14px); } 40%, 60% { opacity: 1; } 100% { opacity: 0; transform: translateX(14px); } } /* ---------- split (mobile section) ---------- */ .split { display: grid; grid-template-columns: minmax(320px, 420px) 1fr; gap: 56px; align-items: start; } .split-demo { position: sticky; top: 100px; display: grid; justify-items: center; } .demo-shell { perspective: 1300px; display: grid; justify-items: center; gap: 14px; } .phone-demo { transform: translateY(var(--fy, 0px)) rotateY(var(--ty, 0deg)) rotateX(var(--tx, 0deg)); } .demo-hint { font-size: 12.5px; color: var(--fg-faint); font-weight: 700; } .mscreen { display: none; flex: 1; flex-direction: column; min-height: 0; } .mscreen.is-on { display: flex; animation: screenIn .32s cubic-bezier(.2, .8, .2, 1); } @keyframes screenIn { from { opacity: 0; transform: translateX(12px) scale(.99); } to { opacity: 1; transform: none; } } .split-copy { display: grid; gap: 14px; } .fcard { padding: 22px 24px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-1); } .fcard:hover { transform: translateY(-4px) rotateX(3deg); box-shadow: 0 34px 60px -40px rgba(108, 76, 241, .85); } .fcard h3 { font-size: 18.5px; display: flex; align-items: center; gap: 12px; } .fcard h3 span { width: 34px; height: 34px; flex: none; display: grid; place-items: center; border-radius: 11px; font-size: 16px; background: linear-gradient(160deg, rgba(108, 76, 241, .14), rgba(108, 76, 241, .05)); border: 1px solid rgba(108, 76, 241, .2); } .fcard p { color: var(--fg-mut); font-size: 14.5px; margin-top: 12px; } .storebtns { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; } .store { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 12px; padding: 12px 22px 12px 18px; border-radius: 14px; border: 1px solid var(--line-2); background: var(--card); box-shadow: var(--shadow-1); transition: transform .2s, background .2s; } .store:hover { transform: translateY(-3px); box-shadow: var(--shadow-2); } .store-ico { grid-row: span 2; width: 26px; height: 26px; display: block; } .store-ico svg { width: 100%; height: 100%; display: block; } /* The Apple mark and the Windows panes are drawn in currentColor, so they take the button's ink; the Play mark carries its own four colours. */ .store { color: var(--fg); } .store-win .store-ico { color: var(--brand-dark); } .store-soon { opacity: .92; } .store-soon .store-ico { color: var(--brand-dark); } .store-soon em { color: var(--brand-dark); font-weight: 700; } /* Ready for launch day: drop the OFFICIAL badge images in and use this class. Height 44px clears both vendor minimums (Apple 40px on screen, Google 28px), and the padding is the quarter-of-badge-height clear space both mandate. The images must not be recoloured, cropped or rebuilt — hence no filters here and width:auto so the supplied aspect ratio is kept exactly. */ .store-badge { display: inline-block; padding: 11px; line-height: 0; } .store-badge img { height: 44px; width: auto; display: block; } .store em { font-size: 10px; color: var(--fg-mut); font-style: normal; } .store b { font-size: 15px; } /* Every store button now carries a real mark, so the icon column is never empty (which used to collapse it and pull one label 30px left of its neighbours). */ .store-win { border-color: rgba(165, 148, 250, .45); background: rgba(108, 76, 241, .16); } .store-win b { font-family: var(--mono); font-size: 13px; } /* ========================================================================== BI CONSOLE REPLICA ========================================================================== */ .bi-wrap { perspective: 1800px; } .browser { border-radius: 16px; overflow: hidden; border: 1px solid var(--line-2); background: #fff; color: var(--a-text); box-shadow: 0 50px 90px -44px rgba(31, 22, 84, .42), 0 2px 8px rgba(31, 22, 84, .08); transform: rotateX(var(--brx, 4deg)) scale(.995); transform-origin: 50% 0; } .browser:hover { transform: rotateX(0deg) scale(1); } .br-bar { display: flex; align-items: center; gap: 12px; padding: 10px 14px; background: #1a1826; border-bottom: 1px solid #2a2740; } .br-dots { display: inline-flex; gap: 6px; } .br-dots i { width: 10px; height: 10px; border-radius: 50%; background: #3a3654; } .br-dots i:first-child { background: #ff5f57; } .br-dots i:nth-child(2) { background: #febc2e; } .br-dots i:nth-child(3) { background: #28c840; } .br-url { display: inline-block; font-family: var(--mono); font-size: 11.5px; color: #a9a4c6; background: #221f31; padding: 5px 12px; border-radius: 999px; transition: color .2s, background .2s; } a.br-url:hover { color: #fff; background: #2c2842; } .br-badge { margin-left: auto; font-size: 10px; font-weight: 800; color: #c4b9ff; border: 1px solid rgba(165, 148, 250, .4); padding: 3px 9px; border-radius: 999px; } .br-body { display: grid; grid-template-columns: 214px 1fr; min-height: 620px; background: var(--a-bg); } .bi-side { background: #fff; border-right: 1px solid var(--a-border); padding: 16px 12px; display: flex; flex-direction: column; } .bi-brand { display: flex; align-items: center; gap: 8px; font-weight: 800; font-size: 14px; padding: 0 6px 16px; } .bi-nav { display: grid; gap: 2px; } .bi-nav button { text-align: left; font: inherit; font-size: 13px; font-weight: 600; color: var(--a-mut); background: none; border: 0; padding: 9px 10px; border-radius: 10px; cursor: pointer; transition: background .18s, color .18s; } .bi-nav button:hover { background: var(--brand-tint); color: var(--a-text); } .bi-nav button.on { background: var(--brand-soft); color: var(--brand-dark); font-weight: 800; } .bi-navlabel { font-size: 9.5px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: var(--a-faint); padding: 14px 10px 6px; } .bi-side-foot { margin-top: auto; font-size: 11px; color: var(--a-mut); display: flex; align-items: center; gap: 7px; padding: 12px 8px 0; border-top: 1px solid var(--a-border); } .bi-main { padding: 18px 22px 26px; overflow: hidden; } .bi-top { display: flex; align-items: center; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid var(--a-border); } .bi-co { font-weight: 800; font-size: 13.5px; } .bi-range { font-size: 12px; color: var(--a-mut); border: 1px solid var(--a-border); padding: 5px 11px; border-radius: 999px; background: #fff; } .bi-actions { margin-left: auto; display: flex; gap: 8px; } .ghostb, .primb { font-size: 12px; font-weight: 700; padding: 7px 13px; border-radius: 9px; border: 1px solid var(--a-border); background: #fff; } .primb { background: var(--brand); border-color: var(--brand-dark); color: #fff; } .bview { display: none; padding-top: 16px; } .bview.is-on { display: block; animation: viewIn .3s cubic-bezier(.2, .8, .2, 1); } @keyframes viewIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } .bi-h { margin-bottom: 14px; } .bi-h h3 { font-size: 20px; letter-spacing: -.02em; } .bi-h p { font-size: 12.5px; color: var(--a-mut); margin-top: 3px; } .kgrid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 10px; } .k { background: #fff; border: 1px solid var(--a-border); border-radius: 12px; padding: 11px 12px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } .k span { display: block; font-size: 10.5px; color: var(--a-mut); font-weight: 700; } .k b { display: block; font-size: 16.5px; letter-spacing: -.03em; margin-top: 2px; } .k i { font-style: normal; font-size: 9.5px; color: var(--a-faint); } .k i.up { color: var(--pos); font-weight: 800; } .k i.down { color: var(--neg); font-weight: 800; } .cgrid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; margin-top: 12px; } .ccard { background: #fff; border: 1px solid var(--a-border); border-radius: 14px; padding: 14px; box-shadow: 0 1px 2px rgba(16, 24, 40, .04); } .ccard.wide { grid-column: span 2; } .ccard h4 { font-size: 12.5px; margin-bottom: 12px; } .linechart { width: 100%; height: 150px; display: block; overflow: visible; } .linechart .grid line { stroke: #eef1f6; stroke-width: 1; } .linechart .line { fill: none; stroke: var(--brand); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; } .linechart .area { fill: url(#none); fill: rgba(108, 76, 241, .12); } .is-on .linechart .line { stroke-dasharray: 1400; animation: draw 1.8s cubic-bezier(.4, 0, .2, 1) forwards; } @keyframes draw { from { stroke-dashoffset: 1400; } to { stroke-dashoffset: 0; } } .xlabels { display: flex; justify-content: space-between; font-size: 9.5px; color: var(--a-faint); margin-top: 6px; } .vbars { display: flex; align-items: flex-end; justify-content: center; gap: 26px; height: 150px; } .vbars > div { display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 6px; height: 100%; } .vbars i { width: 46px; flex: 0 0 var(--h); border-radius: 7px 7px 0 0; background: linear-gradient(180deg, #8368f5, var(--brand)); } .vbars i.alt { background: linear-gradient(180deg, #f0b74e, var(--warn)); } .vbars span { font-size: 10px; color: var(--a-mut); font-weight: 700; } .donut { width: 132px; height: 132px; border-radius: 50%; margin: 4px auto 10px; position: relative; background: conic-gradient(var(--pos) 0 calc(var(--a) * 1%), #84CC16 0 calc((var(--a) + var(--b)) * 1%), var(--warn) 0 calc((var(--a) + var(--b) + var(--c)) * 1%), #F97316 0 calc((var(--a) + var(--b) + var(--c) + var(--d)) * 1%), var(--neg) 0 100%); animation: spinIn 1s cubic-bezier(.2, .8, .2, 1); } @keyframes spinIn { from { transform: rotate(-90deg) scale(.85); opacity: 0; } to { transform: none; opacity: 1; } } .donut::after { content: ''; position: absolute; inset: 22px; background: #fff; border-radius: 50%; } .donut span { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; z-index: 2; font-size: 9px; color: var(--a-mut); } .donut b { display: block; font-size: 14px; color: var(--a-text); letter-spacing: -.02em; } .legend { display: grid; grid-template-columns: 1fr 1fr; gap: 3px 8px; font-size: 9.5px; color: var(--a-mut); } .legend i { display: flex; align-items: center; gap: 5px; font-style: normal; } .legend em { width: 8px; height: 8px; border-radius: 3px; } .btable { width: 100%; border-collapse: collapse; font-size: 12px; } .btable th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: .06em; color: var(--a-faint); padding: 6px 8px; border-bottom: 1px solid var(--a-border); } .btable td { padding: 8px; border-bottom: 1px solid #f3f2f8; } .btable tr:last-child td { border-bottom: 0; } .btable .r { text-align: right; } .btable.big { background: #fff; border: 1px solid var(--a-border); border-radius: 14px; overflow: hidden; } .btable.big th, .btable.big td { padding: 10px 14px; } .chiprow { display: flex; flex-wrap: wrap; gap: 7px; margin-bottom: 12px; } .chiprow b { font-size: 11.5px; font-weight: 700; padding: 6px 12px; border-radius: 999px; background: #fff; border: 1px solid var(--a-border); color: var(--a-mut); } .chiprow b.on { background: var(--brand-soft); border-color: #d9d1fb; color: var(--brand-dark); } .chiprow b.wa { margin-left: auto; background: #25d366; border-color: #1fb757; color: #06301a; } .bk { font-size: 9.5px; font-weight: 800; padding: 3px 8px; border-radius: 999px; } .bk.b90 { background: var(--neg-soft); color: var(--neg); } .bk.b60 { background: #fff0e2; color: #c2570a; } .bk.b30 { background: #f2fae4; color: #4d7c0f; } .bk.bcur { background: var(--pos-soft); color: var(--pos); } .repgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .rep { background: #fff; border: 1px solid var(--a-border); border-radius: 14px; padding: 14px; transition: transform .2s, box-shadow .2s; } .rep:hover { transform: translateY(-3px); box-shadow: 0 14px 26px -18px rgba(83, 52, 216, .6); } .rep span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 9px; background: var(--brand-soft); color: var(--brand-dark); margin-bottom: 9px; } .rep b { display: block; font-size: 12.5px; } .rep em { font-size: 10.5px; color: var(--a-mut); font-style: normal; } .aichat { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: 720px; overflow-wrap: anywhere; } .ab { padding: 12px 14px; border-radius: 14px; font-size: 13px; } .ab.me { background: var(--brand); color: #fff; justify-self: end; max-width: 78%; border-bottom-right-radius: 5px; } .ab.ai { background: #fff; border: 1px solid var(--a-border); border-bottom-left-radius: 5px; } .ab.ai p + p { margin-top: 8px; } .ab.refuse { border-left: 3px solid var(--warn); background: #fffdf6; } .minibars { display: flex; align-items: flex-end; gap: 8px; height: 62px; margin-top: 12px; } .minibars i { width: 34px; height: var(--h); border-radius: 6px 6px 0 0; background: linear-gradient(180deg, #8368f5, var(--brand)); } .builder { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .bfield { background: #fff; border: 1px solid var(--a-border); border-radius: 12px; padding: 11px 13px; } .bfield span { display: block; font-size: 10px; color: var(--a-faint); font-weight: 800; text-transform: uppercase; letter-spacing: .06em; } .bfield b { font-size: 13px; } .bpreview { grid-column: 1 / -1; background: #fff; border: 1px solid var(--a-border); border-radius: 14px; padding: 16px; } .stackbars { display: flex; align-items: flex-end; gap: 20px; height: 190px; } .stackbars i { flex: 1; height: 100%; display: flex; flex-direction: column-reverse; gap: 3px; } .stackbars em { display: block; flex: 0 0 var(--h); border-radius: 4px; background: var(--brand); } .stackbars em.c2 { background: var(--pos); } .stackbars em.c3 { background: var(--warn); } .bsave { display: flex; gap: 8px; margin-top: 14px; } .insp { display: grid; gap: 8px; max-width: 720px; } .insp-line { background: #fff; border: 1px solid var(--a-border); border-radius: 12px; padding: 11px 14px; font-size: 12.5px; } .insp-line b { display: block; } .insp-line span { color: var(--a-mut); font-family: var(--mono); font-size: 11px; } .code { font-family: var(--mono); font-size: 11.5px; background: #14161f; color: #b9f3d8; padding: 14px; border-radius: 12px; overflow: auto; margin: 0; } .opencta { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 22px; } .opencta span { font-size: 13.5px; color: var(--fg-mut); } .opencta span b { color: var(--fg); font-weight: 700; } /* ---------- bento + 3D cube ---------- */ .bento { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-top: 34px; } .bn { padding: 24px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-1); transition: transform .3s, border-color .3s; } .bn:hover { transform: translateY(-4px); border-color: var(--line-2); } .bn h3 { font-size: 17px; margin-bottom: 10px; } /* Marks a feature that is priced but not yet built. It has to read as a label, not as decoration — the whole point is that it is not a shipped claim. */ .soon { display: inline-block; vertical-align: 2px; margin-left: 6px; padding: 3px 8px; border-radius: 999px; font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #8a5a06; background: rgba(245, 158, 11, .16); border: 1px solid rgba(245, 158, 11, .42); } .pc .soon { vertical-align: 1px; } .bn p { color: var(--fg-mut); font-size: 14px; } .bn-cube { grid-row: span 2; display: grid; align-content: start; gap: 12px; } .cube-stage { height: 220px; display: grid; place-items: center; perspective: 800px; } .cube { position: relative; width: 128px; height: 128px; transform-style: preserve-3d; animation: cubeSpin 18s linear infinite; } .cf { position: absolute; inset: 0; display: grid; place-items: center; font-size: 14px; font-weight: 800; border: 1px solid rgba(165, 148, 250, .55); border-radius: 10px; color: #efeaff; background: linear-gradient(160deg, rgba(108, 76, 241, .42), rgba(34, 211, 238, .14)); backdrop-filter: blur(2px); box-shadow: inset 0 0 30px rgba(165, 148, 250, .25); } .cf.f1 { transform: translateZ(64px); } .cf.f2 { transform: rotateY(180deg) translateZ(64px); } .cf.f3 { transform: rotateY(90deg) translateZ(64px); } .cf.f4 { transform: rotateY(-90deg) translateZ(64px); } .cf.f5 { transform: rotateX(90deg) translateZ(64px); } .cf.f6 { transform: rotateX(-90deg) translateZ(64px); } @keyframes cubeSpin { from { transform: rotateX(-22deg) rotateY(0); } to { transform: rotateX(-22deg) rotateY(360deg); } } /* ---------- AI section ---------- */ .ai-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; } .ai-copy h2 { font-size: clamp(29px, 3.4vw, 44px); margin-bottom: 18px; } .ticks { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; } .ticks li { position: relative; padding-left: 30px; color: var(--fg-mut); font-size: 14.5px; } .ticks li b { color: var(--fg); } .ticks li::before { content: '✦'; position: absolute; left: 0; top: 0; width: 20px; height: 20px; display: grid; place-items: center; border-radius: 6px; font-size: 10px; color: var(--brand); background: rgba(108, 76, 241, .18); border: 1px solid var(--line-2); } .ai-demo { perspective: 1200px; } .ai-window { border-radius: var(--r-l); border: 1px solid var(--line-2); overflow: hidden; background: linear-gradient(180deg, #ffffff, #f7f5ff); box-shadow: var(--shadow-2); transform: rotateY(-6deg) rotateX(3deg); } .ai-window:hover { transform: none; } .aw-h { display: flex; align-items: center; gap: 9px; padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: 12.5px; font-weight: 700; color: var(--fg-mut); } .aw-body { padding: 18px; height: 340px; overflow: hidden; display: grid; gap: 10px; grid-template-columns: minmax(0, 1fr); align-content: end; font-size: 14px; overflow-wrap: anywhere; mask-image: linear-gradient(180deg, transparent, #000 14%); } .aw-body .q { justify-self: end; max-width: 80%; background: var(--brand); color: #fff; padding: 10px 14px; border-radius: 14px 14px 5px 14px; } .aw-body .a { background: #fff; border: 1px solid var(--line); padding: 12px 14px; border-radius: 14px 14px 14px 5px; color: var(--fg); } .aw-body .a b { color: var(--fg); } .aw-body .a .src { display: block; margin-top: 9px; padding-top: 8px; border-top: 1px dashed var(--line-2); font-size: 11px; color: var(--fg-faint); } .aw-body .cursor { display: inline-block; width: 8px; height: 15px; background: var(--brand); vertical-align: -2px; animation: blink 1s steps(2) infinite; } .aw-foot { display: flex; align-items: center; justify-content: space-between; margin: 0 16px 16px; padding: 11px 11px 11px 16px; border: 1px solid var(--line); border-radius: 999px; color: var(--fg-faint); font-size: 13px; } .aw-foot b { width: 28px; height: 28px; border-radius: 50%; background: var(--brand); color: #fff; display: grid; place-items: center; } /* ---------- trust ---------- */ .tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; perspective: 1200px; } .tcard { padding: 24px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-1); } .tcard:hover { transform: translateY(-5px) rotateX(4deg); box-shadow: 0 40px 60px -40px rgba(34, 211, 238, .5); } .tcard h3 { font-size: 17px; margin-bottom: 10px; } .tcard p { font-size: 14px; color: var(--fg-mut); } /* ---------- pricing ---------- */ .prices { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: stretch; } .pc { position: relative; padding: 26px 22px; border-radius: var(--r-l); border: 1px solid var(--line); background: var(--card); box-shadow: var(--shadow-1); display: flex; flex-direction: column; gap: 14px; height: 100%; transition: transform .3s, border-color .3s, box-shadow .3s; } .pc .btn { margin-top: auto; } .pc:hover { transform: translateY(-6px); border-color: var(--line-2); } .pc-best { border-color: rgba(165, 148, 250, .55); background: linear-gradient(180deg, rgba(108, 76, 241, .10), #fff 60%); box-shadow: 0 40px 80px -40px rgba(108, 76, 241, .9); } .best { position: absolute; top: -12px; left: 22px; font-size: 10.5px; font-weight: 800; letter-spacing: .06em; text-transform: uppercase; padding: 5px 11px; border-radius: 999px; color: #1b1030; background: linear-gradient(90deg, var(--brand-lt), var(--cyan)); } .pc h3 { font-size: 17px; } .amt { font-size: 36px; font-weight: 800; letter-spacing: -.04em; line-height: 1; } .amt span { font-size: 20px; opacity: .7; margin-right: 2px; } .amt em { display: block; font-size: 12px; font-weight: 600; font-style: normal; color: var(--fg-mut); letter-spacing: 0; margin-top: 6px; } .amt-c { font-size: 30px; } .pcap { font-size: 12.5px; color: var(--brand); font-weight: 700; margin-top: -8px; } .pc ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 8px; } .pc li { font-size: 13.5px; color: var(--fg-mut); padding-left: 20px; position: relative; } .pc li b { color: var(--fg); } .pc li::before { content: '✓'; position: absolute; left: 0; color: var(--pos); font-weight: 800; } .pnote { margin-top: 22px; font-size: 13.5px; color: var(--fg-mut); text-align: center; } .pnote b { color: var(--fg); } /* ---------- compare ---------- */ .ctable { border: 1px solid var(--line); border-radius: var(--r-l); overflow: hidden; background: var(--card); box-shadow: var(--shadow-1); } .ctable table { width: 100%; border-collapse: collapse; font-size: 14px; } .ctable th { text-align: left; padding: 16px 18px; font-size: 12.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--fg-faint); border-bottom: 1px solid var(--line); } .ctable th.us, .ctable td.us { background: rgba(108, 76, 241, .13); color: var(--fg); } .ctable th.us { color: var(--brand); } .ctable td { padding: 15px 18px; border-bottom: 1px solid var(--line); color: var(--fg-mut); } .ctable tr:last-child td { border-bottom: 0; } .ctable td:first-child { color: var(--fg); font-weight: 700; } .ctable td.us { font-weight: 600; } /* ---------- faq ---------- */ .faq { display: grid; gap: 10px; } .faq details { border: 1px solid var(--line); border-radius: var(--r-m); background: var(--card); box-shadow: var(--shadow-1); padding: 4px 18px; transition: border-color .25s, background .25s; } .faq details[open] { border-color: var(--line-2); background: rgba(108, 76, 241, .09); } .faq summary { cursor: pointer; font-weight: 700; padding: 15px 0; list-style: none; display: flex; justify-content: space-between; gap: 16px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: '+'; color: var(--brand); font-weight: 800; font-size: 20px; line-height: 1; } .faq details[open] summary::after { content: '–'; } .faq p { padding: 0 0 16px; color: var(--fg-mut); font-size: 14.5px; } .faq p a { color: var(--brand); font-weight: 700; border-bottom: 1px solid rgba(165, 148, 250, .4); } /* ---------- CTA + footer ---------- */ .cta { position: relative; padding: 110px 0; text-align: center; overflow: hidden; border-top: 1px solid var(--line); } .cta-glow { position: absolute; left: 50%; top: 0; translate: -50% 0; width: 900px; height: 100%; background: radial-gradient(closest-side, rgba(165, 148, 250, .55), transparent); filter: blur(60px); } .cta-in { position: relative; } .cta h2 { font-size: clamp(30px, 4vw, 52px); letter-spacing: -.04em; } .cta p { color: var(--fg-mut); margin: 16px auto 30px; max-width: 54ch; font-size: 16.5px; } .cta-fine { display: block; margin-top: 18px; font-size: 12.5px; color: var(--fg-faint); } .foot { border-top: 1px solid var(--line); padding: 54px 0 26px; background: var(--ink-1); } .foot-in { display: grid; grid-template-columns: 1.4fr 2fr; gap: 40px; } .foot-brand p { color: var(--fg-mut); font-size: 13.5px; margin-top: 14px; max-width: 40ch; } .foot-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; } .foot-cols h3 { font-size: 12px; text-transform: uppercase; letter-spacing: .1em; color: var(--fg-faint); margin-bottom: 14px; } .foot-cols a { display: block; font-size: 13.5px; color: var(--fg-mut); padding: 4px 0; } .foot-cols a:hover { color: var(--fg); } .foot-fine { display: flex; justify-content: space-between; gap: 20px; margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--line); font-size: 11.5px; color: var(--fg-faint); } /* ---------- reveal ---------- */ .reveal { opacity: 0; transform: translateY(22px); } .reveal.in { opacity: 1; transform: none; transition: opacity .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s), transform .7s cubic-bezier(.2, .7, .2, 1) var(--d, 0s); } /* Set by the reveal failsafe in motion.js when the page loaded hidden: show the finished state outright, because a document that is not being rendered never advances the transition above. */ .reveal.in.instant { transition: none; } /* Focus can land inside a block that has not been revealed yet (keyboard users move faster than the scroll). Never leave a focused control invisible. */ .reveal:focus-within { opacity: 1; transform: none; } /* ========================================================================== RESPONSIVE ========================================================================== */ /* ========================================================================== SHORT-WINDOW HERO PADDING (side-by-side layout only) Nothing here scales the device or touches the 3D — it only reclaims the padding ABOVE the phone, which is the only space that decides whether the phone's bottom clears the fold. 98px sits above the stage by default (72 on .hero + 26 on .hero-in); on a short window most of that is spent on nothing. The bottom values come down too, so the stat strip stays with the row. ========================================================================== */ @media (min-width: 1081px) and (max-height: 880px) { .hero { padding-top: 40px; padding-bottom: 26px; } .hero-in { padding-block: 14px 26px; } } @media (min-width: 1081px) and (max-height: 790px) { /* 4px of the phone was still under the fold at 750: that comes off the TOP. The bottom value goes UP instead — it only moves the stat strip down, which is what buys the phone clearance from it. */ .hero { padding-top: 18px; padding-bottom: 18px; } .hero-in { padding-block: 4px 26px; } .statstrip { padding: 18px; } } @media (max-width: 1080px) { .nav-links, .nav-cta { display: none; } .nav-burger { display: block; } .nav.open .nav-links { display: grid; position: absolute; top: 68px; left: 0; right: 0; gap: 4px; padding: 16px 20px 22px; background: rgba(9, 8, 16, .98); border-bottom: 1px solid var(--line); } .nav.open .nav-links a { padding: 10px 0; font-size: 16px; } .hero-in { grid-template-columns: 1fr; } .hero-stage { height: 660px; margin-top: 20px; } .stage-3d { transform: none; } /* Keeps the demo's tilt when the hero stacks — flattening only this one was the last place the two phones disagreed. .hero clips, so the rotated corners cannot widen the page. */ .phone-hero { margin-inline: auto; } .floatcard { animation: none; } /* Keep the Z lift when the hero stacks — the phone still tilts here, so transform:none would drop the chips behind it again. */ .fc-sync { left: 50%; margin-left: -196px; top: 8px; } .fc-wa { left: 50%; margin-left: 20px; bottom: 96px; } .pipe { grid-template-columns: 1fr; } .pipe-flow { transform: rotate(90deg); padding: 6px 0; pointer-events: none; } .split { grid-template-columns: 1fr; } .split-demo { position: static; } .ai-split, .foot-in { grid-template-columns: 1fr; } /* Once the AI window spans the full column its 3D yaw pushes the bounding box past the viewport — 6px of horizontal page scroll at exactly 1080px wide. Square it up; the tilt was only ever there to pair with the copy beside it. */ .ai-window { transform: none; } .bento, .tgrid { grid-template-columns: repeat(2, 1fr); } .bn-cube { grid-row: span 1; grid-column: span 2; } .prices { grid-template-columns: repeat(2, 1fr); } .statstrip { grid-template-columns: repeat(2, 1fr); } .br-body { grid-template-columns: 1fr; } .bi-side { flex-direction: row; align-items: center; gap: 10px; overflow-x: auto; border-right: 0; border-bottom: 1px solid var(--a-border); } .bi-brand { padding: 0 8px 0 4px; white-space: nowrap; } .bi-nav { display: flex; gap: 4px; } .bi-nav button { white-space: nowrap; } .bi-navlabel, .bi-side-foot { display: none; } .kgrid { grid-template-columns: repeat(3, 1fr); } .cgrid { grid-template-columns: 1fr 1fr; } .ccard.wide { grid-column: span 2; } .repgrid { grid-template-columns: repeat(2, 1fr); } .builder { grid-template-columns: repeat(2, 1fr); } .browser { transform: none; } } @media (max-width: 700px) { .sec { padding: 72px 0; } .demo-shell { overflow-x: clip; } .bi-top { flex-wrap: wrap; } .bi-actions { display: none; } .statstrip, .bento, .tgrid, .prices, .foot-cols { grid-template-columns: 1fr; } .bn-cube { grid-column: span 1; } .kgrid { grid-template-columns: repeat(2, 1fr); } .cgrid, .repgrid, .builder { grid-template-columns: 1fr; } .ccard.wide { grid-column: span 1; } .hero { padding-top: 34px; } .hero-stage { height: 700px; } .btable.big { display: block; overflow-x: auto; white-space: nowrap; } .ctable { overflow-x: auto; } .ctable table { min-width: 640px; } .foot-fine { flex-direction: column; } .phone { width: 300px; height: 590px; } .fc-sync { margin-left: -178px; } .fc-wa { left: auto; right: 0; margin-left: 0; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; animation-iteration-count: 1 !important; transition-duration: .001s !important; } html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } }