rows inside a flex column whose 18px gap made the effective line spacing ~150%. Collapse the gap so the multi-line H1 reads at ~110% line-height. */ #container #hero :is(.css-on6u6n, .css-k9ciyd) { gap: 3px !important; row-gap: 3px !important; } /* hero text was designed white-on-dark; recolor it dark for the light mobile bg */ #container #hero .css-on6u6n, #container #hero .css-k9ciyd, #container #hero .css-b30l6s, #container #hero .css-8l7byw { color: #101014 !important; -webkit-text-fill-color: #101014 !important; } #container #hero .css-upbzpo { -webkit-text-fill-color: transparent !important; } #container #hero .css-i5gni2 > p, #container #hero .css-i5gni2 .css-bciiq9 { color: #3b3b44 !important; -webkit-text-fill-color: #3b3b44 !important; } #container #hero .css-i5gni2 > p { font-size: 18px !important; line-height: 1.5 !important; } #container #hero .css-7cqj53 { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; } #container #hero .css-7cqj53 { width: 100% !important; } #container #hero .css-awsbcb { width: -moz-fit-content !important; width: fit-content !important; max-width: 100% !important; height: 56px !important; min-height: 56px !important; max-height: 56px !important; padding: 0 36px !important; align-self: center !important; justify-content: center !important; align-items: center !important; gap: 8px !important; overflow: hidden !important; border-radius: 24px !important; isolation: isolate !important; } /* Figma fill layers stretch SVG rects (preserveAspectRatio=none) when the mobile button is taller than the 48px export — corners look squashed. Use CSS fills + 24px radius to match desktop pills. */ #container #hero .css-awsbcb :is(.css-20bpzg, .css-9oigbv, .css-wm5j19, .css-7h3nzm, .css-tx4mzz) { border-radius: 24px !important; } #container #hero .css-awsbcb.css-gz3k65 :is(.css-9oigbv, .css-20bpzg.css-9oigbv) { background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100% ) !important; background-color: #4507cc !important; } #container #hero .css-awsbcb.css-gz3k65 :is(.css-wm5j19, .css-20bpzg.css-wm5j19) { background-image: linear-gradient( 180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100% ) !important; background-color: #000 !important; } /* button labels stay white on the purple / black buttons */ #container #hero .css-awsbcb .css-5ql3l2, #container #hero .css-awsbcb p, #container #hero .css-awsbcb span { color: #fff !important; -webkit-text-fill-color: #fff !important; } /* the decorative button arrow graphic breaks at mobile sizes — hide it */ #container #hero .css-awsbcb :is(.css-9emv6k, .css-bhht40, .css-1tc42s), #container #site-header .css-ldqvft :is(.css-9emv6k, .css-bhht40, .css-1tc42s) { display: none !important; } /* "Learn more" arrow: the SVG has no usable intrinsic height, so it blows up on mobile unless both dimensions are pinned. Match the desktop 12x9 arrow that sits right after the label. */ #container #wallet-callout .css-doq0i6 { display: block !important; width: 12px !important; height: 9px !important; min-height: 0 !important; flex: 0 0 auto !important; transform: none !important; } #container #wallet-callout .css-doq0i6 img { width: 12px !important; height: 9px !important; min-height: 0 !important; object-fit: contain !important; transform: none !important; } /* keep any other small inline arrow icons (wallet callout) from blowing up */ #container #wallet-callout :is(.css-9emv6k, .css-1tc42s, .css-xpqoi5, .css-bhht40), #container #wallet-callout :is(.css-9emv6k, .css-1tc42s, .css-bhht40) img { width: 14px !important; height: auto !important; min-height: 0 !important; flex: 0 0 auto !important; transform: none !important; } /* ====================== HERO VIDEO ====================== */ /* #visual-video-12 uses css-bz2tic (display:contents) which drops it out of the flex order — force it back to a real block so ordering works */ #container #visual-video-12 { display: block !important; } #container #visual-video-12 .css-31apgy { --mac-bar: 34px; position: relative !important; left: auto !important; top: auto !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9; overflow: hidden !important; border-radius: 18px !important; transform: none !important; } #container #visual-video-12 video { position: absolute !important; top: var(--mac-bar) !important; left: 0 !important; width: 100% !important; height: calc(100% - var(--mac-bar)) !important; object-fit: cover !important; } /* ====================== FEATURES (zoom-to-fit cards) ====================== */ #container #features { display: flex !important; flex-direction: column !important; gap: 28px !important; } #container #features .css-8rltgh { width: fit-content !important; } #container #features :is(.css-c6eihn, .css-6mmn1c) { font-size: clamp(30px, 7vw, 48px) !important; line-height: 1.04 !important; letter-spacing: -0.03em !important; white-space: normal !important; } #container #features .css-59rdls { font-size: 16px !important; line-height: 1.5 !important; } #container #features .css-fbjjyq { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 22px !important; /* base CSS pins a fixed desktop height here; without auto the stacked cards overflow the container and bleed into the next sections */ width: 100% !important; height: auto !important; min-height: 0 !important; overflow: visible !important; } #container #features .css-fbjjyq > * { grid-column: auto !important; grid-row: auto !important; margin: 0 !important; flex: 0 0 auto !important; align-self: center !important; min-height: 0 !important; } /* cards keep their natural design width and are scaled to fit with a viewport-responsive zoom (see --cm-z282 / --cm-z588 per breakpoint) */ #container #features :is(.css-72rcbl, .css-2smhp0, .css-s404ln, .css-ge9zyy) { width: 282px !important; height: auto !important; zoom: var(--cm-z282); } #container #features :is(.css-8kigrl, .css-3cjw77) { width: 588px !important; height: auto !important; zoom: var(--cm-z588); } /* The whole-card zoom above also scales the card's text, so titles/subheads landed at wildly different sizes (z282 cards ~25px, z588 cards ~12px). Counter the zoom on the copy so every feature card resolves to one mobile type scale: title 20px, body 15px — regardless of breakpoint/zoom factor. */ #container #features :is(.css-72rcbl, .css-2smhp0, .css-s404ln, .css-ge9zyy) :is(.css-w1xvch, .css-5pf05n, .css-uzjmbs) { font-size: calc(20px / var(--cm-z282)) !important; line-height: 1.2 !important; } #container #features :is(.css-72rcbl, .css-2smhp0, .css-s404ln, .css-ge9zyy) :is(.css-i5fjeu, .css-59rdls, .css-9irlzy, .css-4hik97, .css-gxqo8u) { font-size: calc(15px / var(--cm-z282)) !important; line-height: 1.4 !important; } #container #features :is(.css-8kigrl, .css-3cjw77) :is(.css-w1xvch, .css-5pf05n, .css-uzjmbs) { font-size: calc(20px / var(--cm-z588)) !important; line-height: 1.2 !important; } #container #features :is(.css-8kigrl, .css-3cjw77) :is(.css-i5fjeu, .css-59rdls, .css-9irlzy, .css-4hik97, .css-gxqo8u) { font-size: calc(15px / var(--cm-z588)) !important; line-height: 1.4 !important; } /* The wallet-passes card lays its two phone mockups out absolutely at a fixed top tuned for the original (tiny) heading. With the copy now at the proper mobile type scale the heading is taller and the phones overlapped it, so drop the phone block into normal flow below the heading and let the card auto-size — robust across every breakpoint/zoom. */ #container #features .css-3cjw77 { height: auto !important; } #container #features .css-3cjw77 .css-9wlg42 { position: relative !important; top: auto !important; left: auto !important; right: auto !important; bottom: auto !important; margin-top: 24px !important; } /* the wide cards stack their heading over the device/browser mock; the mock's artwork is offset upward in the Figma design and overlaps the subtitle once stacked, so push the visual block down to clear the copy */ #container #features .css-8kigrl .css-1muk63, #container #features .css-3cjw77 .css-1muk63 { margin-top: 64px !important; } /* ====================== WALLET CALLOUT ====================== */ /* Lay this out as a horizontal card on mobile: text on the left, the wallet pass image on the right (the dark rounded background fills behind both). */ #container #wallet-callout { position: relative !important; flex-direction: row !important; flex-wrap: nowrap !important; padding: 22px !important; border-radius: 24px !important; overflow: hidden !important; align-items: center !important; gap: 16px !important; } /* dark background layer fills the whole card regardless of its new height */ #container #wallet-callout .css-9gvt8j { position: absolute !important; inset: 0 !important; width: auto !important; height: auto !important; margin: 0 !important; } /* text column on the left */ #container #wallet-callout .css-7lb47l { order: 1 !important; flex: 1 1 auto !important; align-items: flex-start !important; gap: 8px !important; margin: 0 !important; } #container #wallet-callout .css-7lb47l, #container #wallet-callout .css-7lb47l * { text-align: left !important; } /* pass image on the right */ #container #wallet-callout .css-gu8udp { order: 2 !important; flex: 0 0 auto !important; width: clamp(96px, 30vw, 132px) !important; height: auto !important; margin: 0 !important; } #container #wallet-callout .css-do9o4k { width: auto !important; } /* ====================== BRAND GRID (carousel -> static grid) ====================== */ #container #brand-grid :is(.css-xoq75u, .css-pupkkj) { font-size: clamp(28px, 6vw, 40px) !important; line-height: 1.1 !important; } #container #brand-grid .css-61vhd2 { height: auto !important; overflow: hidden !important; /* keep the same edge fade as desktop so the passes don't look cut off as they scroll past the screen edges */ -webkit-mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%) !important; mask-image: linear-gradient(to right, transparent 0, #000 30px, #000 calc(100% - 30px), transparent 100%) !important; } /* moving carousel on mobile (8 unique passes duplicated once → loop after one set). Cards are a fixed 158px so the loop distance is deterministic: 8 * (158 + 14 gap) = 1376px. */ #container #brand-grid .comethru-carousel-track { --cm-carousel-shift: 1376px; display: flex !important; flex-direction: row !important; align-items: center !important; gap: 14px !important; width: max-content !important; max-width: none !important; margin-left: 0 !important; animation: comethruBrandCarousel 24s linear infinite !important; transform: none; } #container #brand-grid .comethru-carousel-track > div { flex: 0 0 auto !important; width: 158px !important; max-width: none !important; height: auto !important; aspect-ratio: 0.72 !important; position: relative !important; } #container #brand-grid .comethru-carousel-track > div * { position: static !important; inset: auto !important; } #container #brand-grid .comethru-carousel-track img { position: static !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; } /* ====================== USE CASES (overlap deck -> stacked cards) ====================== */ #container #use-cases { display: flex !important; flex-direction: column !important; gap: 28px !important; } #container #use-cases .css-8rltgh { width: fit-content !important; } #container #use-cases :is(.css-ndirr6) { font-size: clamp(30px, 7vw, 46px) !important; line-height: 1.05 !important; letter-spacing: -0.03em !important; } /* Overlapping deck (like desktop): each card shows only its title strip and the next card overlaps the rest; later cards paint on top, so the last card (Conferences) sits fully on top. (Overlap margins live on the card rule below so they win the cascade.) */ #container #use-cases .css-r3cg4u { display: block !important; position: relative !important; } #container #use-cases .css-r3cg4u > * { position: relative !important; left: auto !important; top: auto !important; width: 100% !important; max-width: 100% !important; transform: none !important; } /* style the INNER card surface (rounded corners, image cover); applies to both top-level cards and the nested card inside the first wrapper */ #container #use-cases :is(.css-b1jy5r, .css-unruyd, .css-dum3mc, .css-67337n, .css-p8861a) { position: relative !important; width: 100% !important; height: 300px !important; overflow: hidden !important; border-radius: 20px !important; display: flex !important; align-items: stretch !important; margin: 0 !important; } /* overlap is applied ONLY to direct deck children so nested cards aren't pulled */ #container #use-cases .css-r3cg4u > * { margin: -170px 0 0 0 !important; /* ~130px title strip peek */ box-shadow: 0 -14px 30px -8px rgba(0, 0, 0, 0.4) !important; } /* first card flush, last card shown in full on top of the stack */ #container #use-cases .css-r3cg4u > *:first-child { margin-top: 0 !important; } #container #use-cases .css-r3cg4u > *:last-child { height: auto !important; min-height: 300px !important; } #container #use-cases .css-r3cg4u > :nth-child(1) { z-index: 1 !important; } #container #use-cases .css-r3cg4u > :nth-child(2) { z-index: 2 !important; } #container #use-cases .css-r3cg4u > :nth-child(3) { z-index: 3 !important; } #container #use-cases .css-r3cg4u > :nth-child(4) { z-index: 4 !important; } #container #use-cases .css-r3cg4u > :nth-child(5) { z-index: 5 !important; } /* Pin each card's text block to the top-left so the visible peek strip always shows the title + subtitle (the Figma cards vertically center it). */ #container #use-cases .css-r3cg4u > * { align-items: flex-start !important; justify-content: flex-start !important; } #container #use-cases .css-881fyl { position: relative !important; align-self: flex-start !important; top: 0 !important; margin: 0 !important; } #container #use-cases :is(.css-r0azwh, .css-phc9f9, .css-pjw8qt, .css-jvd8z0, .css-s9ceyc) { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; } #container #use-cases :is(.css-ia0kfo, .css-wjl0e0, .css-zfl09g, .css-wyeboh), #container #use-cases .css-pjw8qt img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: cover !important; top: 0 !important; transform: none !important; } #container #use-cases .css-881fyl { position: relative !important; z-index: 2 !important; width: 100% !important; align-items: flex-start !important; } /* Pin the copy to the TOP of the card (these wrappers are full card-height flex rows that otherwise vertically center the text) with 24px padding. */ #container #use-cases :is(.css-k4r10a, .css-kyoulr, .css-h8fr09) { padding: 24px !important; width: 100% !important; align-items: flex-start !important; justify-content: flex-start !important; } #container #use-cases .css-i5e5nq { padding-bottom: 0 !important; gap: 8px !important; } /* The Conferences card has a CTA below its copy. Base CSS pins the heading and subheader to fixed pixel heights, which clips the wrapped mobile text and makes the button overlap it — let them grow to their natural height. */ #container #use-cases .css-67337n .cm-uc-tour { margin-top: 20px !important; } /* Shrink the Conferences card to its content — 32px breathing room below the tour CTA instead of the shared 300px deck height. */ #container #use-cases .css-67337n.css-h8fr09 { height: auto !important; min-height: 0 !important; padding: 24px 24px 32px 24px !important; } #container #use-cases .css-r3cg4u > .css-67337n:last-child { min-height: 0 !important; } /* hide the rotated card previews inside the use-case tiles */ #container #use-cases :is(.css-jikce6, .css-qg2j3n, .css-h28ngu, .css-krzptg, .css-v8amf1, .css-ki1r8j, .css-nsygzz, .css-bhht40) { display: none !important; } #container #use-cases :is(.css-xqwq40, .css-1gvec1, .css-xoq75u) { font-size: clamp(17px, 3.8vw, 19px) !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; color: #fff !important; -webkit-text-fill-color: #fff !important; } #container #use-cases :is(.css-ewh7f3, .css-8td44b) { font-size: clamp(14px, 3.2vw, 15px) !important; line-height: 1.35 !important; color: rgba(255, 255, 255, 0.85) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.85) !important; } /* ====================== MARKETING CHANNELS (phones grid) ====================== */ #container #marketing-channels { display: flex !important; flex-direction: column !important; gap: 24px !important; } #container #marketing-channels .css-8rltgh { width: fit-content !important; align-self: center !important; } #container #marketing-channels .css-5ic542, #container #marketing-channels .css-a8ckre { width: 100% !important; align-self: center !important; } #container #marketing-channels .css-eh7dhr { font-size: clamp(26px, 6vw, 40px) !important; line-height: 1.1 !important; text-align: center !important; } /* the original phone row is replaced by the JS-built paired layout below */ #container #marketing-channels .css-gdb1sp { display: none !important; } /* paired phone + copy layout, one block per channel (mirrors the desktop column-per-phone arrangement) */ #container #marketing-channels .cm-mktg-mobile { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 56px !important; width: 100% !important; } #container #marketing-channels .cm-mk-pair { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 24px !important; width: 100% !important; } #container #marketing-channels .cm-mk-phone { display: flex !important; justify-content: center !important; width: 100% !important; flex-shrink: 0 !important; } #container #marketing-channels .cm-mk-text { width: 100% !important; max-width: 420px !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 16px !important; } #container #marketing-channels .cm-mk-text :is(.css-a8ck50, .css-j5vhqo, .css-i5hbuo) { width: 100% !important; height: auto !important; min-height: 0 !important; align-items: center !important; text-align: center !important; gap: 16px !important; } #container #marketing-channels .cm-mk-text .css-i5haig { width: 100% !important; height: auto !important; } #container #marketing-channels .cm-mk-text :is(.css-lmmqf0, .css-utszf7, .css-o4b6sn, .css-82szqj, .css-qxfdlz, .css-v27th6) { font-size: 21px !important; line-height: 1.22 !important; text-align: center !important; } #container #marketing-channels .cm-mk-text :is(.css-n4ffp, .css-81bw42) { height: auto !important; width: 100% !important; max-width: 100% !important; font-size: 15px !important; line-height: 1.45 !important; text-align: center !important; } /* Phone mocks in the paired mobile layout: clean img wrappers (built in JS) so each box hugs its PNG with no Figma absolute-position baggage. */ #container #marketing-channels .cm-mktg-mobile .cm-mk-phone-frame { width: min(74vw, 300px) !important; display: block !important; flex-shrink: 0 !important; } #container #marketing-channels .cm-mktg-mobile .cm-mk-phone-frame img { width: 100% !important; height: auto !important; display: block !important; } /* Legacy phone rules (hidden desktop row + fallback) */ #container #marketing-channels :is(.css-s7jl7y, .css-v3sxup, .css-x4ptc1, .css-cv93w2) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: min(74vw, 300px) !important; height: auto !important; zoom: 1 !important; -webkit-mask-image: none !important; mask-image: none !important; transform: none !important; overflow: visible !important; } #container #marketing-channels :is(.css-s7jl7y, .css-v3sxup, .css-x4ptc1, .css-cv93w2) :is(.css-trglf0, img) { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; object-fit: contain !important; transform: none !important; } #container #marketing-channels .css-s7jl7y img + img { display: none !important; } #container #marketing-channels :is(.css-s7jl7y, .css-v3sxup, .css-x4ptc1, .css-cv93w2):hover, #container #marketing-channels :is(.css-s7jl7y, .css-v3sxup, .css-x4ptc1, .css-cv93w2):hover > img, #container #marketing-channels :is(.css-s7jl7y, .css-v3sxup, .css-x4ptc1, .css-cv93w2):hover .css-trglf0 { transform: none !important; filter: none !important; } /* ====================== FEATURE ENGAGEMENT ====================== */ /* its copy is cloned into the paired marketing-channels layout above, so the standalone section is hidden on small screens */ #container #feature-engagement { display: none !important; } /* ====================== PRICING ====================== */ #container #pricing-intro .css-eh7dhr { font-size: clamp(26px, 6vw, 40px) !important; line-height: 1.12 !important; text-align: center !important; } /* Eyebrow pill: hug its contents and centre it (the generic reset stretched it full-width and let "PRICING" break to two lines). */ #container #pricing-intro .css-c9vk8i { width: fit-content !important; max-width: 100% !important; align-self: center !important; } #container #pricing-intro .css-c9vk8i :is(.css-vkpzlc, .css-3wkftf) { white-space: nowrap !important; width: auto !important; } /* The Figma pricing layout is a pile of absolutely-positioned fragments that can't be reflowed into clean cards, so hide all of it on small screens and show the JS-built .cm-pricing-mobile cards instead. */ #container #pricing-cards { display: block !important; background: transparent !important; height: auto !important; } #container #pricing-cards > *:not(.cm-pricing-mobile) { display: none !important; } #container #pricing-cards .cm-pricing-mobile { display: flex !important; flex-direction: column !important; gap: 18px !important; width: 100% !important; } #container #pricing-cards .cm-plan { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 18px !important; width: 100% !important; max-width: 100% !important; padding: 26px 22px !important; border-radius: 20px !important; box-sizing: border-box !important; } #container #pricing-cards .cm-plan-self { background: #f2f2f2 !important; } #container #pricing-cards .cm-plan-white { background: #fff !important; border: 2px solid #4507cc !important; box-shadow: 0 1px 4px 0 #8e88e6 !important; } #container #pricing-cards .cm-plan-top { display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; } #container #pricing-cards .cm-plan h3 { margin: 0 !important; font-family: "Google Sans Flex:SemiBold", sans-serif !important; font-weight: 600 !important; font-size: 26px !important; line-height: 1 !important; color: #3e4462 !important; } #container #pricing-cards .cm-badge { display: inline-block !important; width: auto !important; font-family: "Google Sans Code:Medium", sans-serif !important; text-transform: uppercase !important; font-size: 11px !important; letter-spacing: 1.6px !important; line-height: 1 !important; padding: 7px 12px !important; border-radius: 100px !important; } #container #pricing-cards .cm-plan-self .cm-badge { background: #fff !important; color: #3e4462 !important; } #container #pricing-cards .cm-plan-white .cm-badge { background: #ff4b00 !important; color: #fff !important; } #container #pricing-cards .cm-price { display: flex !important; align-items: baseline !important; flex-wrap: wrap !important; column-gap: 10px !important; row-gap: 2px !important; } #container #pricing-cards .cm-amt { font-family: "Google Sans Flex:SemiBold", sans-serif !important; font-weight: 600 !important; font-size: 52px !important; line-height: 1 !important; letter-spacing: -1.28px !important; color: #3e4462 !important; } #container #pricing-cards .cm-sub { font-family: "Google Sans Flex:Regular", sans-serif !important; font-size: 15px !important; line-height: 1.2 !important; color: #3e4462 !important; } #container #pricing-cards .cm-feats { list-style: none !important; margin: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 14px !important; } #container #pricing-cards .cm-feats li { display: flex !important; align-items: flex-start !important; gap: 10px !important; font-family: "Google Sans Flex:Regular", sans-serif !important; font-size: 15px !important; line-height: 1.3 !important; color: #314158 !important; } #container #pricing-cards .cm-feats li.no { color: #a8b5c6 !important; } #container #pricing-cards .cm-ic { flex: 0 0 auto !important; font-weight: 700 !important; line-height: 1.3 !important; } #container #pricing-cards .cm-feats li.ok .cm-ic { color: #16a34a !important; } #container #pricing-cards .cm-feats li.no .cm-ic { color: #e5484d !important; } #container #pricing-cards .cm-btn { display: flex !important; justify-content: center !important; align-items: center !important; padding: 17px 18px !important; border-radius: 10px !important; font-family: "Google Sans Flex:Bold", sans-serif !important; font-weight: 700 !important; font-size: 16px !important; text-decoration: none !important; margin-top: 4px !important; } #container #pricing-cards .cm-plan-self .cm-btn { border: 2px solid #4507cc !important; color: #4507cc !important; background: transparent !important; } #container #pricing-cards .cm-plan-white .cm-btn { color: #fff !important; background: linear-gradient(90deg, #4507cc 0%, #a82978 55%, #ff4b00 100%) !important; } /* ====================== CASE STUDY ====================== */ #container #case-study { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 24px !important; } #container #case-study .css-8rltgh { width: fit-content !important; } #container #case-study .css-tozmte { font-size: clamp(28px, 6vw, 44px) !important; line-height: 1.08 !important; text-align: center !important; width: 100% !important; } /* subheader */ #container #case-study .css-8td44b { text-align: center !important; width: 100% !important; } #container #case-study .css-5t851y { position: relative !important; display: flex !important; flex-direction: column !important; align-items: center !important; gap: 24px !important; width: 100% !important; height: auto !important; min-height: 0 !important; padding: 22px !important; overflow: hidden !important; transform: none !important; /* The card's background is a single SVG with preserveAspectRatio='none', so on the tall/narrow mobile card the flower illustrations stretch into thin smears. Swap in the same mint→gray gradient (no flowers) so the banner scales cleanly. */ background-image: linear-gradient(180deg, #d7f0e8 0%, #efefef 100%) !important; background-size: cover !important; background-repeat: no-repeat !important; } #container #case-study .css-5t851y::before, #container #case-study .css-5t851y::after { display: none !important; } #container #case-study .css-t31432 { order: -1 !important; position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 320px !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; transform: none !important; zoom: var(--cm-zcsvid); } #container #case-study .css-r1hpbt { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; height: auto !important; } #container #case-study video { position: relative !important; width: 100% !important; height: auto !important; aspect-ratio: 320 / 576; object-fit: cover !important; border-radius: 18px !important; } /* full-width reflowed stats card (no more zoom-shrink hack) */ #container #case-study .css-k81rtq { position: relative !important; left: auto !important; top: auto !important; width: -moz-fit-content !important; width: fit-content !important; max-width: 100% !important; height: auto !important; margin: 0 auto !important; align-self: center !important; transform: none !important; zoom: normal !important; padding: 24px 20px !important; box-sizing: border-box !important; } #container #case-study .css-i5epr2 { width: 100% !important; max-width: 100% !important; gap: 22px !important; align-items: center !important; text-align: center !important; } /* hide the desktop number row + absolutely-positioned label row; show the JS-built stacked stat rows instead */ #container #case-study .css-z8turf, #container #case-study .css-fzl1h4 { display: none !important; } #container #case-study .cm-stats-mobile { display: flex !important; flex-direction: column !important; gap: 22px !important; width: 100% !important; align-items: center !important; } #container #case-study .cm-stat { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; gap: 6px !important; width: 100% !important; } #container #case-study .cm-stat-num { flex: 0 0 auto !important; width: auto !important; text-align: center !important; font-family: "Caveat:Bold", sans-serif !important; font-weight: 700 !important; font-size: 52px !important; line-height: 1 !important; color: #000 !important; } #container #case-study .cm-stat-info { flex: 1 1 auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; gap: 4px !important; } #container #case-study .cm-stat-title { font-family: "Google Sans Flex:SemiBold", sans-serif !important; font-weight: 600 !important; font-size: 16px !important; line-height: 1.2 !important; color: #000 !important; } #container #case-study .cm-stat-desc { font-family: "Google Sans Flex:Regular", sans-serif !important; font-size: 14px !important; line-height: 1.35 !important; color: #5f6368 !important; } /* footnote must wrap inside the card */ #container #case-study .css-ubxzsn, #container #case-study .css-ubxzsn * { position: relative !important; width: 100% !important; max-width: 100% !important; height: auto !important; white-space: normal !important; overflow-wrap: anywhere !important; text-align: center !important; } /* center the custom-domain caption that sits between the video and the card */ #container #case-study .css-of2dh7, #container #case-study .css-of2dh7 * { text-align: center !important; } /* "Data captured" block: stack title + single-column field chips so nothing bleeds past the card edge */ #container #case-study .css-c3ncu3 { position: relative !important; width: 100% !important; max-width: 100% !important; height: auto !important; display: flex !important; flex-direction: column !important; gap: 12px !important; } #container #case-study .css-86reuw { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; text-align: center !important; } #container #case-study .css-k1coh3 { position: relative !important; inset: auto !important; width: 100% !important; height: auto !important; } /* 2 x 2 grid of field rows within the card; the column layout is defined globally on .css-xn3hcg, so match that specificity to override it */ #container #case-study .css-c3ncu3 .css-xn3hcg { grid-template-columns: max-content max-content !important; grid-template-rows: auto auto !important; justify-content: center !important; justify-items: start !important; column-gap: 20px !important; row-gap: 16px !important; } /* each icon + label field row hugs its content on a single line */ #container #case-study .css-c3ncu3 .css-atgcpy { width: -moz-max-content !important; width: max-content !important; margin-left: 0 !important; margin-right: 0 !important; } #container #case-study .css-c3ncu3 .css-qaajge { white-space: nowrap !important; } #container #case-study .css-c3ncu3 .css-qaajge { width: -moz-max-content !important; width: max-content !important; } #container #case-study .css-erck0e > * { position: relative !important; grid-column: auto !important; grid-row: auto !important; width: auto !important; height: auto !important; min-height: 44px !important; } #container #case-study .css-of2dh7 { position: relative !important; left: auto !important; right: auto !important; top: auto !important; transform: none !important; width: 100% !important; max-width: 100% !important; order: -1 !important; /* move description above the stats card */ } #container #case-study .css-of2dh7, #container #case-study .css-of2dh7 span { font-size: 15px !important; line-height: 1.5 !important; white-space: normal !important; } #container #case-study :is(.css-3asxrt, .css-5epge, .css-5xqulq, .css-j6pb4p) { display: none !important; } /* ====================== PLATFORM AVAILABILITY ====================== */ #container #platform-availability { align-items: center !important; text-align: center !important; padding: 32px 24px !important; border-radius: 28px !important; background: rgba(255, 255, 255, 0.6) !important; gap: 24px !important; } #container #platform-availability .css-7ys7ij { align-items: center !important; text-align: center !important; width: 100% !important; gap: 22px !important; } #container #platform-availability .css-tyfk8z p { font-size: clamp(24px, 5.6vw, 34px) !important; line-height: 1.18 !important; } /* show the desktop "coming soon" app-store badges between the heading and CTA */ #container #platform-availability .css-7nejrc { display: flex !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 12px !important; width: 100% !important; } /* constrain each badge back to its natural badge size (the mobile reset stretches them to full width; the SVGs have no intrinsic width so each box must be sized explicitly, preserving its aspect ratio at 38px tall) */ #container #platform-availability .css-7nejrc > * { position: relative !important; flex: 0 0 auto !important; height: 38px !important; padding: 0 !important; margin: 0 !important; } /* Mac App Store — single full-badge SVG (156x40) */ #container #platform-availability .css-7nejrc .css-93hs3f { width: 148px !important; } #container #platform-availability .css-7nejrc .css-93hs3f img { width: 100% !important; height: 100% !important; object-fit: fill !important; } /* App Store — full-badge SVG (119.66x40) trapped in a 0-height wrapper + a duplicate text label baked into the artwork */ #container #platform-availability .css-7nejrc .css-22itc5 { width: 114px !important; } #container #platform-availability .css-7nejrc .css-22itc5 :is(.css-25n7w5, .css-5zpeif) { position: relative !important; inset: auto !important; width: 100% !important; height: 100% !important; } #container #platform-availability .css-7nejrc .css-22itc5 img { width: 100% !important; height: 100% !important; object-fit: fill !important; } #container #platform-availability .css-7nejrc .css-22itc5 p:not(.css-hehxpc) { display: none !important; } /* Google Play — shrink-wrap to badge; label styled globally above */ #container #platform-availability .css-7nejrc .css-47arg0 { width: fit-content !important; height: 38px !important; } #container #platform-availability .css-7nejrc .css-47arg0 img { height: 38px !important; width: auto !important; } #container #platform-availability .css-7nejrc .css-47arg0 p { font-size: 6.5px !important; } /* standalone duplicate label between badges */ #container #platform-availability .css-7nejrc > .css-oh5cgd { display: none !important; } /* Position "coming soon" labels inside Mac / App Store badges (38px mobile scale) */ #container #platform-availability .css-7nejrc .css-93hs3f, #container #platform-availability .css-7nejrc .css-22itc5 .css-25n7w5 { position: relative !important; overflow: visible !important; } #container #platform-availability .css-7nejrc .css-22itc5 .css-25n7w5 { width: 100% !important; height: 100% !important; } #container #platform-availability .css-7nejrc .css-93hs3f::after { content: "Coming soon to the"; position: absolute; /* align with "Mac App Store" text (x≈35.35 in 156.109 viewBox) */ left: 22.6%; right: auto; top: 21%; height: auto; color: #fff; -webkit-text-fill-color: #fff; font-family: "Google Sans Flex:Medium", "Google Sans", sans-serif; font-size: 6.5px; font-weight: 500; line-height: 1; letter-spacing: 0; text-align: left; white-space: nowrap; pointer-events: none; z-index: 5; } #container #platform-availability .css-7nejrc .css-hehxpc { display: block !important; position: absolute !important; inset: auto !important; left: 29.2% !important; right: 14% !important; top: 21% !important; bottom: auto !important; width: auto !important; height: auto !important; margin: 0 !important; padding: 0 !important; font-family: "Google Sans Flex:Medium", "Google Sans", sans-serif !important; font-size: 6.5px !important; font-weight: 500 !important; line-height: 1 !important; letter-spacing: 0 !important; text-align: center !important; white-space: nowrap !important; color: #fff !important; -webkit-text-fill-color: #fff !important; pointer-events: none !important; z-index: 5 !important; } /* render the Get started CTA as a real filled button */ #container #platform-availability .css-i5gpsq { width: 100% !important; max-width: 320px !important; align-self: center !important; } #container #platform-availability .css-uoh9sn { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 56px !important; padding: 0 24px !important; border-radius: 16px !important; background: #5b2be7 !important; overflow: hidden !important; } #container #platform-availability .css-uoh9sn p, #container #platform-availability .css-uoh9sn span { color: #fff !important; -webkit-text-fill-color: #fff !important; font-size: 16px !important; font-weight: 600 !important; } /* Match the mobile filled CTA dimensions for the outlined tour button */ #container #platform-availability .cm-tour-btn { width: 100% !important; height: 56px !important; margin-top: 12px !important; border-radius: 16px !important; border-color: #5b2be7 !important; color: #5b2be7 !important; font-size: 16px !important; } #container #platform-availability .cm-tour-btn:hover { background: #5b2be7 !important; color: #fff !important; } /* ====================== NEWSLETTER FOOTER ====================== */ #container #newsletter-footer { gap: 28px !important; } #container #newsletter-footer .css-hiw3cu p, #container #newsletter-footer .css-vnmynz p { font-size: clamp(22px, 5vw, 32px) !important; line-height: 1.15 !important; } #container #newsletter-footer .css-ma7qrz { display: grid !important; grid-template-columns: 1fr !important; gap: 28px 16px !important; justify-content: center !important; justify-items: center !important; align-items: center !important; } /* Center the footer content block on mobile/tablet. */ #container #newsletter-footer .css-hgx157 { align-items: center !important; text-align: center !important; } #container #newsletter-footer .css-hgx157 .css-drl93j { justify-content: center !important; } #container #newsletter-footer .css-hgx157 :is( .css-pbatp4, .css-i5dmh4, .css-9cubra, .css-snkgse, .css-x2a1bj, .css-n8r97t, .css-881fyl, .css-lbf5d3, .css-vdjvw7, .css-7tb1qv, .css-5knerd ) { align-items: center !important; justify-content: center !important; text-align: center !important; } #container #newsletter-footer .css-hgx157 :is( .css-snkgse, .css-x2a1bj, .css-n8r97t, .css-7tb1qv ) > * { align-self: center !important; } /* "It's time to comethru / Sign up for our newsletter" — centred above the footer links on mobile/tablet (the link grid below stays left-aligned). */ #container #newsletter-footer > .css-i5dmh4.css-n8r97t { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; align-self: center !important; text-align: center !important; width: 100% !important; max-width: 100% !important; margin-inline: auto !important; gap: 8px !important; } #container #newsletter-footer > .css-i5dmh4.css-n8r97t :is( .css-9uyk0n, .css-vkpzlc, .css-hiw3cu, .css-vnmynz, p ) { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; align-self: center !important; text-align: center !important; width: auto !important; max-width: 100% !important; line-height: 1.15 !important; } #container #newsletter-footer .css-pbatp4 { grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; overflow: hidden !important; align-items: center !important; } /* Scale the "comethru" wordmark down 25% (zoom also reclaims the layout box so nothing is left floating). The subsidiary mark below is untouched. */ #container #newsletter-footer .css-pbatp4 .css-7cnc3m { zoom: 0.75 !important; } /* The footer brand mark + link columns carry fixed Figma widths (376px) and a 180px min-width on each column, so they overflow narrow phones. Cap every footer node to its parent width (cascades from the fluid root) and let the columns shrink. */ #container #newsletter-footer * { max-width: 100% !important; min-width: 0 !important; } /* only the subsidiary ("THE GARBER COMPANY") logo image needs to flex down; the "comethru" wordmark letters keep their small base sizes */ #container #newsletter-footer .comethru-subsidiary-logo { height: auto !important; max-width: 100% !important; align-self: center !important; } /* ~50% of the comethru wordmark width (~199px on mobile) */ #container #newsletter-footer .comethru-subsidiary-logo-img { width: 100px !important; height: auto !important; max-width: 100% !important; } /* The "comethru" wordmark is built from 8 fixed-size letter tiles, each with an absolutely-positioned glyph image inside. The generic footer reset above strips the tile widths and un-absolutes the glyphs, which collapsed the mark to a giant "C". Restore the exact base geometry (it already fits a phone at ~200px wide). */ #container #newsletter-footer .css-7cnc3m { display: flex !important; flex-direction: row !important; align-items: flex-end !important; justify-content: center !important; gap: 2.013px !important; height: 48.504px !important; width: auto !important; max-width: 100% !important; overflow: visible !important; } #container #newsletter-footer .css-7cnc3m > * { position: relative !important; flex: 0 0 auto !important; } #container #newsletter-footer .css-7cnc3m .css-4ulb84 { width: 19.466px !important; height: 33.63px !important; } #container #newsletter-footer .css-7cnc3m .css-kf12ah { width: 25.158px !important; height: 33.63px !important; } #container #newsletter-footer .css-7cnc3m .css-wr5q7z { width: 38.545px !important; height: 32.983px !important; } #container #newsletter-footer .css-7cnc3m .css-lz9i7q { width: 23.867px !important; height: 33.63px !important; } #container #newsletter-footer .css-7cnc3m .css-9h2lgj { width: 13.646px !important; height: 42.684px !important; } #container #newsletter-footer .css-7cnc3m .css-76lqsl { width: 24.058px !important; height: 48.504px !important; } #container #newsletter-footer .css-7cnc3m .css-fu7f19 { width: 16.233px !important; height: 32.983px !important; } #container #newsletter-footer .css-7cnc3m .css-p9dd96 { width: 23.993px !important; height: 32.983px !important; } #container #newsletter-footer .css-7cnc3m img { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; } /* each link column: header on top, links stacked, centered on mobile */ #container #newsletter-footer .css-9cubra { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 12px !important; width: 100% !important; min-height: 0 !important; } #container #newsletter-footer .css-9cubra > * { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 100% !important; margin: 0 !important; align-self: center !important; text-align: center !important; transform: none !important; } #container #newsletter-footer .css-hgx157 :is(.css-x2a1bj, .css-n8r97t) { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 10px !important; height: auto !important; } #container #newsletter-footer .css-hgx157 :is(.css-x2a1bj, .css-n8r97t) > * { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; margin: 0 !important; align-self: center !important; transform: none !important; } #container #newsletter-footer .css-lbf5d3 { flex-direction: column !important; align-items: center !important; gap: 18px !important; } /* social icons render at ~300px from Figma and overflow off-canvas — shrink */ #container #newsletter-footer .css-7tb1qv { display: flex !important; flex-direction: row !important; flex-wrap: wrap !important; justify-content: center !important; align-items: center !important; gap: 20px !important; width: 100% !important; height: auto !important; } #container #newsletter-footer :is(.css-wuavtv, .css-bn4k9r) { position: relative !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: 26px !important; height: 26px !important; padding: 0 !important; /* base padding-right:16px squished the glyphs */ flex: 0 0 auto !important; transform: none !important; } #container #newsletter-footer :is(.css-wuavtv, .css-bn4k9r) :is(a, .css-p82p2j, .css-wixxpz) { position: relative !important; left: auto !important; top: auto !important; width: 26px !important; height: 26px !important; transform: none !important; } #container #newsletter-footer :is(.css-wuavtv, .css-bn4k9r) svg { width: 26px !important; height: 26px !important; } } /* ===================================================================== */ /* Mobile phones (<=767px) — tighten the tablet layout */ /* ===================================================================== */ @media (max-width: 767px) { #container { --cm-z282: 1.12; --cm-z588: 0.54; --cm-zphone: 0.62; --cm-zcsvid: 0.8; --cm-zcsstats: 0.44; } #container > .css-vf8mzy.css-j6ldtg.css-8jmslc { gap: 80px; padding: 18px 18px 48px; } #container .comethru-gradient-background { width: 900px; height: 5200px; } /* hide the inline nav on phones, keep logo + CTA */ #container #site-header .css-z8tz9b { display: none !important; } #container #site-header .css-4ddawv { width: 108px !important; height: 26px !important; } /* hero stacks fully */ #container #hero { align-items: stretch !important; } #container #hero .css-i5fdi5 { width: 100% !important; } #container #hero .css-nc9rp1 :is(p, span), #container #hero :is(.css-b30l6s, .css-8l7byw, .css-upbzpo, .css-tozmte, .css-k9ciyd) { font-size: var(--fs-h1) !important; } #container #brand-grid .css-61vhd2::before, #container #brand-grid .css-61vhd2::after { display: none !important; } #container #newsletter-footer .css-ma7qrz { grid-template-columns: 1fr !important; justify-items: center !important; } /* case study: hug the data-captured card to its contents */ #container #case-study .css-k81rtq { width: -moz-fit-content !important; width: fit-content !important; max-width: 100% !important; } } /* ===================================================================== */ /* Narrow phones — CSS can't compute a fluid zoom (length/length is */ /* invalid), so step the zoom factors down so the fixed-width Figma */ /* components keep fitting on small screens. */ /* ===================================================================== */ @media (max-width: 360px) { #container { --cm-z282: 0.96; --cm-z588: 0.46; --cm-zphone: 0.54; --cm-zcsvid: 0.7; --cm-zcsstats: 0.38; } } @media (max-width: 320px) { #container { --cm-z282: 0.84; --cm-z588: 0.4; --cm-zphone: 0.47; --cm-zcsvid: 0.62; --cm-zcsstats: 0.33; } } /* The 2 x 2 data-captured grid needs ~520px of width to fit two single-line columns; below that fall back to a single centered column. */ @media (max-width: 519px) { #container #case-study .css-c3ncu3 .css-xn3hcg { grid-template-columns: max-content !important; grid-template-rows: auto !important; justify-items: center !important; row-gap: 14px !important; } } /* ===================================================================== */ /* Mobile hamburger menu + dropdown */ /* ===================================================================== */ .cm-hamburger { display: none; /* shown only on mobile via media query below */ flex: 0 0 auto; align-items: center; justify-content: center; flex-direction: column; gap: 5px; width: 40px; height: 40px; padding: 9px; margin: 0; border: 0; border-radius: 11px; background: rgba(255, 255, 255, 0.55); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.1); cursor: pointer; -webkit-tap-highlight-color: transparent; } .cm-hamburger span { display: block; width: 100%; height: 2px; border-radius: 2px; background: #1a1a1a; transition: transform 260ms cubic-bezier(0.22, 1, 0.36, 1), opacity 180ms ease; } .cm-hamburger.cm-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .cm-hamburger.cm-active span:nth-child(2) { opacity: 0; } .cm-hamburger.cm-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* The mobile #site-header reset zeroes width/height/transform on descendant spans; re-assert the hamburger bars with higher specificity + !important */ #container #site-header .cm-hamburger span { width: 22px !important; height: 2px !important; } #container #site-header .cm-hamburger.cm-active span:nth-child(1) { transform: translateY(7px) rotate(45deg) !important; } #container #site-header .cm-hamburger.cm-active span:nth-child(2) { opacity: 0 !important; } #container #site-header .cm-hamburger.cm-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg) !important; } /* Full-bleed mobile menu: a frosted overlay that covers the whole viewport rather than a small corner dropdown. */ .cm-mobile-menu { position: fixed; inset: 0; z-index: 990; /* below the header (1000) so the hamburger "X" stays tappable */ display: flex; flex-direction: column; justify-content: center; align-items: stretch; gap: 0; padding: max(96px, 14vh) clamp(24px, 7vw, 64px) max(48px, 8vh); box-sizing: border-box; background: rgba(248, 248, 250, 0.86); -webkit-backdrop-filter: saturate(150%) blur(22px); backdrop-filter: saturate(150%) blur(22px); opacity: 0; pointer-events: none; transition: opacity 260ms ease; } .cm-mobile-menu.cm-open { opacity: 1; pointer-events: auto; } /* While the light full-bleed menu is open, darken the (otherwise white) logo so it stays legible against the frosted overlay. */ body.cm-menu-open #container #site-header .css-4ddawv img { filter: brightness(0) !important; } .cm-mm-list { display: flex; flex-direction: column; gap: 6px; width: 100%; max-width: 520px; margin: 0 auto; } .cm-mm-link { display: block; padding: 16px 6px; border-bottom: 1px solid rgba(0, 0, 0, 0.08); font-family: "Google Sans Flex:Medium", sans-serif; font-size: clamp(24px, 6.5vw, 32px); font-weight: 500; line-height: 1.1; letter-spacing: -0.01em; color: #14141a; text-decoration: none; /* staggered entrance */ opacity: 0; transform: translateY(14px); transition: background-color 140ms ease, color 140ms ease, opacity 360ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1); } .cm-mobile-menu.cm-open .cm-mm-link { opacity: 1; transform: translateY(0); } .cm-mobile-menu.cm-open .cm-mm-link:nth-child(1) { transition-delay: 60ms; } .cm-mobile-menu.cm-open .cm-mm-link:nth-child(2) { transition-delay: 110ms; } .cm-mobile-menu.cm-open .cm-mm-link:nth-child(3) { transition-delay: 160ms; } .cm-mobile-menu.cm-open .cm-mm-link:nth-child(4) { transition-delay: 210ms; } .cm-mobile-menu.cm-open .cm-mm-link:nth-child(5) { transition-delay: 260ms; } .cm-mm-link:hover, .cm-mm-link:active { color: #4507cc; } .cm-mm-cta { display: block; margin-top: 28px; padding: 18px 14px; border-radius: 16px; background: #4507cc; color: #fff; font-family: "Google Sans Flex:SemiBold", sans-serif; font-size: 18px; font-weight: 600; line-height: 1.1; text-align: center; text-decoration: none; opacity: 0; transform: translateY(14px); transition: background-color 140ms ease, opacity 360ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1); } .cm-mobile-menu.cm-open .cm-mm-cta { opacity: 1; transform: translateY(0); transition-delay: 310ms; } .cm-mm-cta:hover, .cm-mm-cta:active { background: #3a05ad; } /* Show the hamburger exactly where the inline nav links are hidden (<=1024px), so the two navigation styles are never visible at the same time. */ @media (max-width: 1024px) { .cm-hamburger { display: inline-flex; } } @media (min-width: 1025px) { .cm-mobile-menu { display: none !important; } .cm-hamburger { display: none !important; } } /* ===================================================================== */ /* End mobile hamburger menu */ /* ===================================================================== */ /* Brand-grid heading — render the "comethru" word as the actual logo wordmark (masked + filled brand purple) instead of plain styled text. Sized in em so it tracks the heading font-size; !important beats the mobile #brand-grid reset. */ #container #brand-grid .css-pupkkj.css-npf41e { display: inline-block !important; width: 3.37em !important; height: 0.82em !important; vertical-align: 0em !important; background-color: #4507cc !important; -webkit-mask: url("assets/e8f69d29861431efba085b5cec4273152b438892.svg") no-repeat left center / contain !important; mask: url("assets/e8f69d29861431efba085b5cec4273152b438892.svg") no-repeat left center / contain !important; color: transparent !important; -webkit-text-fill-color: transparent !important; overflow: hidden !important; } /* Hero stat pill — hug its contents instead of a fixed 720px width */ #container #hero .css-i5fdi5.css-xkr7zf.css-9cinb3 { width: -moz-fit-content !important; width: fit-content !important; max-width: 100% !important; } /* Hero stat-row separator dot — center the icon on the line instead of letting it sit on the text baseline (looks low/off-center otherwise) */ #container #hero .css-61aa89 { display: inline-flex !important; align-items: center !important; transform: translateY(-2px) !important; } #container #hero .css-61aa89 img { vertical-align: middle !important; } /* Hero walking-person icon — an inline SVG figure (injected in index.html) whose arms and legs swing in opposition for a real walk cycle. */ #container #hero .css-qqoss6 { display: inline-flex !important; align-items: center !important; } #container #hero .css-qqoss6 img { display: none !important; } /* Size the walker from the inline font-size (not the parent box height): on tablet/mobile the .css-qqoss6 box collapses to 0px tall, so a height:100% walker vanished. An em height + fixed 20:30 aspect ratio keeps it visible and scaled to the surrounding stat text at every breakpoint. */ #container #hero .css-qqoss6 .cm-walker { width: auto !important; height: 0.95em !important; aspect-ratio: 20 / 30; flex: 0 0 auto; overflow: visible; } #container #hero .css-qqoss6 .cm-w-head { fill: #ededf2; } #container #hero .css-qqoss6 .cm-w-torso, #container #hero .css-qqoss6 .cm-w-limb { fill: none; stroke: #ededf2; stroke-width: 4; stroke-linecap: round; } /* Each limb pivots from its joint (shoulder / hip) in view-box coordinates. */ #container #hero .css-qqoss6 .cm-w-armA, #container #hero .css-qqoss6 .cm-w-armB { transform-box: view-box; transform-origin: 10px 9.8px; } #container #hero .css-qqoss6 .cm-w-legA, #container #hero .css-qqoss6 .cm-w-legB { transform-box: view-box; transform-origin: 10px 18px; } #container #hero .css-qqoss6 .cm-w-legA { animation: cm-leg-fwd 0.62s ease-in-out infinite; } #container #hero .css-qqoss6 .cm-w-legB { animation: cm-leg-back 0.62s ease-in-out infinite; } #container #hero .css-qqoss6 .cm-w-armA { animation: cm-arm-back 0.62s ease-in-out infinite; } #container #hero .css-qqoss6 .cm-w-armB { animation: cm-arm-fwd 0.62s ease-in-out infinite; } /* Whole body bobs twice per stride. */ #container #hero .css-qqoss6 .cm-w-body { transform-box: view-box; transform-origin: 10px 18px; animation: cm-walk-bob 0.31s ease-in-out infinite; } @keyframes cm-leg-fwd { 0%{transform:rotate(26deg)} 50%{transform:rotate(-26deg)} 100%{transform:rotate(26deg)} } @keyframes cm-leg-back { 0%{transform:rotate(-26deg)} 50%{transform:rotate(26deg)} 100%{transform:rotate(-26deg)} } @keyframes cm-arm-fwd { 0%{transform:rotate(20deg)} 50%{transform:rotate(-20deg)} 100%{transform:rotate(20deg)} } @keyframes cm-arm-back { 0%{transform:rotate(-20deg)} 50%{transform:rotate(20deg)} 100%{transform:rotate(-20deg)} } @keyframes cm-walk-bob { 0%{transform:translateY(0)} 50%{transform:translateY(-0.7px)} 100%{transform:translateY(0)} } @media (prefers-reduced-motion: reduce) { #container #hero .css-qqoss6 .cm-w-limb, #container #hero .css-qqoss6 .cm-w-body { animation: none; } } /* ===================================================================== */ /* Mobile/tablet hero — restore the desktop event photo + purple gradient */ /* fade (the real full-bleed #visual-9 photo is hidden <=1024px), and put */ /* the hero text back to white so it reads over the dark imagery. */ /* Placed last so it overrides the earlier dark-on-light mobile recolor. */ /* ===================================================================== */ @media (max-width: 1024px) { #container #hero { position: relative !important; overflow: hidden !important; /* full-bleed: break out of the page gutter so the photo + gradient run edge-to-edge, and drop the rounded "card" framing. min/max-width force the flex item past the parent's padded content box. */ width: 100vw !important; min-width: 100vw !important; max-width: 100vw !important; margin-left: calc(50% - 50vw) !important; margin-right: calc(50% - 50vw) !important; border-radius: 0 !important; padding: 92px 24px 36px !important; /* top clears the fixed header (~67px) */ background: /* Soft dissolve into the page: the page-colour veil eases in over a long run while the dark tint eases OUT toward the bottom (instead of getting darker), so the photo melts into the light background with no edge or intermediate dark band. */ linear-gradient(180deg, rgba(239, 239, 239, 0) 46%, rgba(239, 239, 239, 0.35) 68%, rgba(239, 239, 239, 0.75) 86%, rgba(239, 239, 239, 1) 100%), radial-gradient(135% 75% at 88% 108%, rgba(124, 58, 237, 0.55) 0%, rgba(124, 58, 237, 0) 60%), linear-gradient(180deg, rgba(8, 6, 20, 0.42) 0%, rgba(8, 6, 20, 0.5) 34%, rgba(8, 6, 20, 0.3) 64%, rgba(8, 6, 20, 0) 92%), url("assets/comethru hero image.png") center top / cover no-repeat, #0a0816 !important; box-shadow: none !important; } /* heading + plain copy back to white over the imagery */ #container #hero .css-on6u6n, #container #hero .css-k9ciyd, #container #hero .css-b30l6s, #container #hero .css-8l7byw { color: #ffffff !important; -webkit-text-fill-color: #ffffff !important; } #container #hero .css-upbzpo { -webkit-text-fill-color: transparent !important; /* keep the gradient word */ } #container #hero .css-i5gni2 > p, #container #hero .css-i5gni2 .css-bciiq9 { color: rgba(255, 255, 255, 0.9) !important; -webkit-text-fill-color: rgba(255, 255, 255, 0.9) !important; /* the subheader is one wrapping
; open the wrapped lines to 110% */ line-height: 1.1 !important; } } /* ===================================================================== */ /* End Comethru responsive (tablet + mobile) */ /* ===================================================================== */ /* ===================================================================== */ /* Comethru API section ("thrukit API") — inserted under the case study */ /* ===================================================================== */ #container #api-section { box-sizing: border-box; color: #0b0b12; font-family: "Google Sans Flex:Regular", "Google Sans", sans-serif; z-index: 2; } #container #api-section *, #container #api-section *::before, #container #api-section *::after { box-sizing: border-box; } #container #api-section .cm-api-inner { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 56px; width: 100%; height: 100%; } /* ---- left column ---- */ #container #api-section .cm-api-left { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; } #container #api-section .cm-api-pill { display: inline-flex; align-items: center; justify-content: center; padding: 8px 18px; border-radius: 24px; background: #000; color: #fff; font-family: "Google Sans Code:Medium", "Google Sans Mono", monospace; font-weight: 500; font-size: 12px; letter-spacing: 1.8px; line-height: 24px; text-transform: uppercase; filter: drop-shadow(0 1px 2px rgba(142, 136, 230, 0.9)); } #container #api-section .cm-api-h1 { margin: 0; font-family: "Google Sans Flex:SemiBold", "Google Sans", sans-serif; font-weight: 600; font-size: 56px; line-height: 0.98; letter-spacing: -1.28px; color: #0b0b12; } #container #api-section .cm-api-h1 .cm-grad { display: inline-block; background: linear-gradient(101deg, #ff4b00 0%, #ff7600 22%, #ffa100 44%, #ffcc00 66%, #ffe000 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } #container #api-section .cm-api-sub { margin: 2px 0 0; max-width: 440px; font-family: "Google Sans Flex:Regular", "Google Sans", sans-serif; font-weight: 400; font-size: 20px; line-height: 1.35; color: #3a3a44; } /* ---- wallet badges ---- */ #container #api-section .cm-api-badges { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 4px; } #container #api-section .cm-wbadge { display: inline-flex; align-items: center; gap: 10px; padding: 9px 16px 9px 14px; border-radius: 11px; background: #000; text-decoration: none; cursor: default; box-shadow: 0 4px 14px -8px rgba(0, 0, 0, 0.6); } #container #api-section .cm-wbadge svg { width: 26px; height: 26px; flex: 0 0 auto; display: block; } #container #api-section .cm-wbadge .cm-wb-txt { display: flex; flex-direction: column; line-height: 1.05; text-align: left; } #container #api-section .cm-wbadge .cm-wb-small { color: #d7d7dd; font-size: 10px; font-weight: 500; letter-spacing: 0.2px; } #container #api-section .cm-wbadge .cm-wb-big { color: #fff; font-size: 16px; font-weight: 600; font-family: "Google Sans Flex:SemiBold", "Google Sans", sans-serif; } /* ---- frontier model tiles ---- */ #container #api-section .cm-api-models { display: flex; align-items: center; gap: 16px; margin-top: 6px; } #container #api-section .cm-model-tiles { display: flex; gap: 10px; } #container #api-section .cm-model { width: 52px; height: 52px; border-radius: 14px; background: #fff; border: 1px solid rgba(11, 11, 18, 0.08); box-shadow: 0 6px 16px -10px rgba(11, 11, 18, 0.35); display: flex; align-items: center; justify-content: center; } #container #api-section .cm-model svg { width: 28px; height: 28px; display: block; } #container #api-section .cm-api-models .cm-model-cap { max-width: 180px; font-size: 15px; line-height: 1.3; color: #3a3a44; } /* ---- right column: annotated wallet pass ---- */ #container #api-section .cm-api-right { position: relative; height: 100%; display: flex; align-items: center; justify-content: flex-end; } #container #api-section .cm-pass-stage { position: relative; width: 540px; height: 520px; } #container #api-section .cm-pass { position: absolute; top: 50%; right: 6px; transform: translateY(-50%); width: 300px; aspect-ratio: 304 / 427; background: transparent; border: 0; } #container #api-section .cm-pass-img { display: block; width: 100%; height: 100%; object-fit: contain; } #container #api-section .cm-pass-head { display: flex; align-items: center; justify-content: space-between; } #container #api-section .cm-pass-logo { font-family: "Google Sans Flex:SemiBold", "Google Sans", sans-serif; font-weight: 700; font-size: 17px; letter-spacing: -0.3px; color: #0b0b12; } #container #api-section .cm-pass-date { text-align: right; font-size: 10px; line-height: 1.25; color: #6a6a73; } #container #api-section .cm-pass-date b { display: block; color: #0b0b12; font-size: 11px; } #container #api-section .cm-pass-strip { position: relative; height: 96px; border-radius: 14px; overflow: hidden; background: linear-gradient(120deg, #7b6cff 0%, #9a7bff 42%, #ff9d6c 100%); display: flex; align-items: center; gap: 12px; padding: 0 14px; } #container #api-section .cm-pass-strip .cm-strip-badge { width: 52px; height: 52px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, 0.85); display: flex; align-items: center; justify-content: center; color: #fff; font-size: 8px; font-weight: 700; text-align: center; line-height: 1.05; flex: 0 0 auto; } #container #api-section .cm-pass-strip .cm-strip-txt { color: #fff; } #container #api-section .cm-pass-strip .cm-strip-txt .t1 { font-size: 14px; font-weight: 700; letter-spacing: 0.3px; } #container #api-section .cm-pass-strip .cm-strip-txt .t2 { font-size: 11px; font-weight: 600; opacity: 0.92; } #container #api-section .cm-pass-strip .cm-strip-cup { margin-left: auto; font-size: 26px; flex: 0 0 auto; } #container #api-section .cm-pass-fields { display: flex; flex-direction: column; gap: 9px; } #container #api-section .cm-pf-label { font-size: 9px; letter-spacing: 0.6px; text-transform: uppercase; color: #9a9aa3; font-weight: 600; } #container #api-section .cm-pf-value { font-size: 14px; color: #0b0b12; font-weight: 600; margin-top: 1px; } #container #api-section .cm-pass-qr { align-self: center; width: 96px; height: 96px; margin-top: 2px; border-radius: 8px; background: #fff; padding: 4px; } #container #api-section .cm-pass-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 2px; } #container #api-section .cm-pass-foot .cm-foot-icon { width: 18px; height: 18px; color: #0b0b12; } #container #api-section .cm-pass-foot .cm-foot-nfc { font-size: 16px; color: #0b0b12; } /* ---- annotation callouts ---- */ #container #api-section .cm-annot { position: absolute; left: 0; /* End just shy of the pass's left edge (pass sits at x≈234 in the 540px stage) so every callout dot lands on the same vertical edge regardless of how wide its label is. */ width: 226px; display: flex; align-items: center; gap: 10px; white-space: nowrap; } #container #api-section .cm-annot .cm-annot-label { font-size: 13px; font-weight: 600; color: #0b0b12; } #container #api-section .cm-annot .cm-annot-line { height: 1.5px; background: #0b0b12; flex: 1 1 auto; min-width: 16px; } #container #api-section .cm-annot .cm-annot-dot { width: 6px; height: 6px; border-radius: 50%; background: #0b0b12; flex: 0 0 auto; margin-left: -3px; } /* vertical positions tuned to the Bumble pass features (pass top sits ~49px into the 520px stage; dot centre ≈ top + 9px): Logo → "Bumble" wordmark (~y66) Strip image → Member Circle graphic (~y101) Label → "GUEST NAME" field (~y130) Text input → address value text (~y165) Icon → bottom wallet icon (~y460) */ #container #api-section .cm-annot.a-logo { top: 65px; } #container #api-section .cm-annot.a-strip { top: 133px; } #container #api-section .cm-annot.a-label { top: 196px; } #container #api-section .cm-annot.a-input { top: 221px; } #container #api-section .cm-annot.a-icon { top: 448px; } /* ===== desktop placement: drop it into the absolute Figma canvas ===== */ @media (min-width: 1025px) { #container #api-section { position: absolute; top: 8931px; left: 50%; transform: translateX(-50%); width: 1238px; height: 700px; } /* push the two sections that followed the case study down to make room */ #container #platform-availability { top: 9721px !important; } #container #newsletter-footer { top: 10015.62px !important; } /* grow the fixed-height canvas so the footer isn't clipped */ #container .css-vf8mzy.css-j6ldtg.css-8jmslc { --content-min-height: max(var(--100dvh), 10604px); } } /* ===== mobile / tablet ===== */ @media (max-width: 1024px) { #container #api-section { position: relative !important; left: auto !important; top: auto !important; transform: none !important; width: 100% !important; height: auto !important; order: 13; padding: 56px 22px 8px !important; } /* renumber the trailing sections so API lands between them */ #container #platform-availability { order: 14; } #container #newsletter-footer { order: 15; } #container #api-section .cm-api-inner { grid-template-columns: 1fr; gap: 40px; justify-items: center; } #container #api-section .cm-api-left { align-items: center; text-align: center; } #container #api-section .cm-api-h1 { font-size: clamp(38px, 11vw, 50px); } #container #api-section .cm-api-sub { max-width: 420px; } #container #api-section .cm-api-badges { justify-content: center; } #container #api-section .cm-api-models { flex-direction: column; gap: 12px; } #container #api-section .cm-api-models .cm-model-cap { max-width: 260px; text-align: center; } /* shrink the annotated stage to fit and keep it centered */ #container #api-section .cm-api-right { justify-content: center; } #container #api-section .cm-pass-stage { width: min(92vw, 520px); height: 520px; } #container #api-section .cm-pass { right: 0; } } @media (max-width: 540px) { #container #api-section .cm-pass-stage { width: 300px; height: auto; min-height: 0; } /* on the smallest screens the side annotations don't fit — hide them and let the clean pass speak for itself */ #container #api-section .cm-annot { display: none; } #container #api-section .cm-pass { position: relative; top: auto; right: auto; transform: none; margin: 0 auto; } } /* ===================================================================== */ /* End Comethru API section */ /* ===================================================================== */ /* ===================================================================== */ /* Site-wide type scale — unify H1/H2/subheaders/titles/body everywhere */ /* ===================================================================== */ /* Roles (Google Sans Flex, except the mono eyebrow label): eyebrow 12px / Google Sans Code Medium / +1.8 tracking / UPPERCASE H1 64px / SemiBold 600 / -1.28 tracking (pillared section heads) H2 40px / SemiBold 600 / -1.2 tracking (statement bands, big cards) subhead 24px / Regular 400 (lead paragraph under a head) title 20px / SemiBold 600 (card / feature / stat titles) body 16px / Regular 400 (supporting copy) The Figma export already uses these values for most roles; the rules below correct the outliers so the scale is consistent across every section. */ :root { --fs-eyebrow: 12px; --fs-h1: 64px; /* primary section headline */ --fs-h2: 40px; /* statement bands / category heads */ --fs-h3: 26px; /* large card / pricing-plan titles */ --fs-h4: 20px; /* standard card / feature / stat titles */ --fs-subhead: 24px; --fs-title: 20px; /* alias kept for existing rules == --fs-h4 */ --fs-body: 16px; --lh-head: 1.08; --lh-subhead: 1.3; --ff-head: "Google Sans Flex:SemiBold", "Google Sans", sans-serif; --ff-bold: "Google Sans Flex:Bold", "Google Sans", sans-serif; --ff-body: "Google Sans Flex:Regular", "Google Sans", sans-serif; } /* Tablet + mobile steps for the scale. Every heading/subheader mapped to these variables now scales identically across sections (no more per-section vw formulas that drifted the H1 to 34–52px on tablet and 24–43px on mobile). */ @media (max-width: 1024px) { :root { --fs-h1: clamp(34px, 5.4vw, 46px); --fs-h2: clamp(26px, 4.2vw, 34px); --fs-h3: clamp(22px, 3vw, 26px); --fs-h4: 18px; --fs-subhead: clamp(17px, 2.4vw, 20px); --fs-title: 18px; --fs-body: 15px; --lh-head: 1.12; } } /* Body copy: the marketing / feature-engagement captions render at 12px, half the site's 16px body. Bring them up to the standard body size. */ #container .css-n4ffp { font-size: var(--fs-body) !important; line-height: 1.45 !important; } /* Titles that shipped at 18px (feature-engagement labels, the wallet callout) — promote to the 20px title size. Case-study stat captions (.css-o4b6sn, .css-qxfdlz) keep their own 18px sizing inside .css-i5epr2. */ #container :is(.css-utszf7, .css-82szqj, .css-psm01z) { font-size: var(--fs-title) !important; line-height: 1.2 !important; } /* The #features bento titles shipped as Bold 700 while every other title on the site is SemiBold 600 — align them to the single heading weight. */ #container #features :is(.css-w1xvch, .css-5pf05n, .css-uzjmbs) { font-family: var(--ff-head) !important; font-weight: 600 !important; line-height: 1.2 !important; } /* ---- Role mapping: bind every section's heading hierarchy to the scale so it is identical across desktop, tablet and mobile. ---- */ /* H1 — primary section headlines */ #container :is( #hero .css-b30l6s, #features .css-6mmn1c, .css-eh7dhr, #api-section .cm-api-h1 ) { font-size: var(--fs-h1) !important; line-height: var(--lh-head) !important; } /* H2 — statement bands + category heads (brand line, use-case categories, "Available now…" platform line) */ #container :is( .css-xoq75u, #platform-availability .css-hhficv ) { font-size: var(--fs-h2) !important; line-height: var(--lh-head) !important; } /* Subheaders — lead paragraph under a section head. Case-study stat captions and descriptions also carry .css-lgzfz but are not section subheaders — only the intro copy (.css-8td44b) gets the subhead size in that section. */ #container :is(#features, #use-cases, #marketing-channels) .css-lgzfz, #container #case-study .css-8td44b, #container #api-section .cm-api-sub { font-size: var(--fs-subhead) !important; line-height: var(--lh-subhead) !important; } /* One #features bento card ("Location-aware pass updates") mistakenly carries the section-subheader class (.css-lgzfz) on both its title and body, so the rule above bumped them to the 24px section-subhead size. On desktop nothing else outranks it (tablet/mobile bento rules already do), so pin them back to the shared bento title (20px) / body (16px) sizes used by every other card. */ @media (min-width: 1025px) { #container #features .css-uzjmbs.css-lgzfz { font-size: 20px !important; line-height: 1.2 !important; } #container #features .css-9irlzy.css-lgzfz { font-size: 16px !important; line-height: 1.2 !important; } } /* Case-study stat block: restore Figma caption/description styles and reflow the label row out of fixed absolute columns (they overlapped once the unified type scale touched .css-lgzfz). Desktop/tablet only — mobile uses .cm-stats-mobile. */ @media (min-width: 1025px) { #container #case-study .css-i5epr2 :is(.css-o4b6sn, .css-qxfdlz) { font-family: "Google Sans Flex:SemiBold", "Google Sans", sans-serif !important; font-size: 18px !important; font-weight: 600 !important; line-height: 1.2 !important; white-space: normal !important; } #container #case-study .css-i5epr2 :is(.css-9irlzy, .css-lq3smo) { font-family: "Google Sans Flex:Regular", "Google Sans", sans-serif !important; font-size: 16px !important; font-weight: 400 !important; line-height: 1.2 !important; white-space: normal !important; } #container #case-study .css-fzl1h4 { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 24px !important; width: 100% !important; height: auto !important; min-height: 0 !important; } #container #case-study .css-fzl1h4 > :is(.css-i3yr7p, .css-sgbj4d, .css-lf1hmj) { position: relative !important; flex: 1 1 0 !important; left: auto !important; top: auto !important; width: auto !important; height: auto !important; min-width: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 8px !important; } #container #case-study .css-fzl1h4 :is( .css-thvz0a, .css-u2s6mj, .css-vfy6z5, .css-kvwru6, .css-cs23v, .css-54g4aa, .css-hgj5uw ) { position: relative !important; inset: auto !important; left: auto !important; right: auto !important; top: auto !important; bottom: auto !important; width: auto !important; height: auto !important; } #container #case-study .css-lf1hmj .css-hgj5uw { display: block !important; } } /* Button copy — one size + weight for every primary CTA (the platform "Get started" shipped at 20px/SemiBold-600, every other CTA is 16px/Bold). */ #container :is(.css-z9kww4, .cm-btn), #container #platform-availability :is(.css-vzss71, .cm-tour-btn span) { font-size: 16px !important; font-weight: 700 !important; font-family: var(--ff-bold) !important; line-height: 1 !important; } /* ===================================================================== */ /* End site-wide type scale */ /* ===================================================================== */ /* Footer copyright — use the brand body font (Google Sans Flex) */ #container #newsletter-footer .css-3yrm6v { font-family: "Google Sans Flex:Regular", "Google Sans", sans-serif !important; } #container #newsletter-footer .css-u7vsam { text-align: left !important; } @media (max-width: 1024px) { #container #newsletter-footer .css-u7vsam { text-align: center !important; } } /* Footer link grid + copyright — left-aligned on desktop. */ @media (min-width: 1025px) { #container #newsletter-footer .css-ma7qrz, #container #newsletter-footer .css-drl93j, #container #newsletter-footer .css-ph6tcl { justify-content: flex-start !important; } #container #newsletter-footer .css-x7qt24, #container #newsletter-footer .css-lbf5d3, #container #newsletter-footer .css-pbatp4, #container #newsletter-footer .css-vdjvw7 { align-items: flex-start !important; } #container #newsletter-footer .css-lbf5d3 { padding-left: 0 !important; justify-content: flex-start !important; } #container #newsletter-footer .css-5knerd { align-self: flex-start !important; width: 100% !important; } #container #newsletter-footer .comethru-subsidiary-logo { align-self: flex-start !important; margin-left: 0 !important; } } /* Features "Custom branded event pages" card — push the browser/phone mock down so its top clears the two-line subheader instead of tucking under it. */ @media (min-width: 1025px) { #container #features .css-1muk63 { margin-top: 56px !important; } } /* Use cases "Conferences & Conventions" card — its crowd photo shipped at opacity 0.85, so the card stacked behind it bled through in the overlap zone and produced a hard horizontal seam halfway down. Make it opaque. */ #container #use-cases .css-wyeboh { opacity: 1 !important; } /* Header wordmark sits ~2px low against the nav links + CTA cap-height — lift it for optical alignment (desktop only; the mobile bar lays the logo out absolutely in its own box). */ @media (min-width: 1025px) { #container #site-header .css-4ddawv img { transform: translateY(-2px) !important; } } /* ===================================================================== */ /* Safari gradient fixes */ /* Figma exports gradients as SVG data URIs (rgba() stops, matrix */ /* transforms, preserveAspectRatio=none). WebKit often fails to paint */ /* them on buttons, cards, and clipped text — use native CSS instead. */ /* ===================================================================== */ :root { --cm-grad-brand: linear-gradient( 90deg, #4507cc 0%, #741899 25%, #a22966 50%, #e8431a 87.5%, #ff4b00 100% ); --cm-grad-brand-vertical: linear-gradient( 180deg, #4507cc 0%, #741899 25%, #a22966 50%, #e8431a 87.5%, #ff4b00 100% ); --cm-grad-btn-shine: linear-gradient( 180deg, rgba(255, 255, 255, 0.15) 0%, rgba(255, 255, 255, 0.05) 50%, rgba(255, 255, 255, 0) 100% ); --cm-grad-hero-word: linear-gradient( 101deg, #ff4b00 0%, #ff7600 12.5%, #ffa100 25%, #ffc700 37.5%, #fff700 50%, #fff700 100% ); --cm-grad-platform-line: linear-gradient( 90deg, #4e51f4 0%, #7b3cb6 25%, #923297 37.5%, #a82878 50%, #be1e5a 62.5%, #d4143c 75%, #e90a1e 87.5%, #ff0000 100% ); } /* Button / pill gloss overlays (black base) */ #container :is( .css-wiidkf, .css-zb6uqp, .css-4degvj, .css-wm5j19, .css-ngku6t, .css-42b9l, .css-9elegi ) { background-image: var(--cm-grad-btn-shine) !important; background-color: #000 !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } /* Button / pill gloss overlays (purple base) */ #container :is(.css-9oigbv, .css-wc87xy) { background-image: var(--cm-grad-btn-shine) !important; background-color: #4507cc !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } /* Wallet callout section — orange base + gloss */ #container .css-kv14bp { background-image: var(--cm-grad-btn-shine) !important; background-color: #ff4b00 !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } /* Pricing CTA fill — pricing state rules below still win via higher specificity */ #container .css-gqhp7n { background-image: var(--cm-grad-brand); background-repeat: no-repeat; background-size: 100% 100%; } /* Case-study banner background */ #container .css-vw2dbv { background-image: linear-gradient(180deg, #d7f0e8 0%, #efefef 100%) !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } /* Gradient clipped text */ #container .css-hhficv { background-image: var(--cm-grad-platform-line) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } #container .css-upbzpo { background-image: var(--cm-grad-hero-word) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; } #container #api-section .cm-api-h1 .cm-grad { background-image: var(--cm-grad-hero-word) !important; } /* Features bento card fills */ #container .css-bwr3m5 { background-image: var(--cm-grad-brand-vertical) !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } #container .css-4ut399 { background-image: linear-gradient( 180deg, #000 0%, #100500 6.25%, #200900 12.5%, #401300 25%, #601c00 37.5%, #802600 50%, #bf3800 75%, #ff4b00 100% ) !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } #container :is(.css-5qo9b, .css-93wybi) { background-image: linear-gradient( 180deg, #ff4b00 0%, #fa5513 6.25%, #f55e25 12.5%, #eb714b 25%, #e18470 37.5%, #d79795 50%, #b373a3 62.5%, #8e4fb1 75%, #6a2bbe 87.5%, #5719c5 93.75%, #4507cc 100% ) !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } #container .css-us90p4 { background-image: linear-gradient( 180deg, #4507cc 0%, #5117cf 6.25%, #5c26d2 12.5%, #7445d9 25%, #8b64df 37.5%, #a283e6 50%, #d1c1f2 75%, #fff 100% ) !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } #container .css-zax8xh { background-image: linear-gradient( 180deg, #fff 0%, #ffd2bf 25%, #ffa580 50%, #ff8f60 62.5%, #ff7840 75%, #ff6220 87.5%, #ff5610 93.75%, #ff4b00 100% ) !important; background-repeat: no-repeat !important; background-size: 100% 100% !important; } /* Decorative fill layers on buttons / pills — match parent corner radius */ #container :is(.css-20bpzg, .css-9oigbv, .css-wm5j19, .css-wiidkf, .css-zb6uqp) { border-radius: inherit !important; }