/** * Phone mockup — screen inset % are relative to the full PNG (.phone-mockup__device = bitmap bounds). * Iframe logical size: 390 × 844 (iPhone 14 / 15 class viewport). * * .phone-mockup--frame-on-top: iframe sits BEHIND the PNG; bezel paints on top. * The screen region of the PNG must be TRANSPARENT (alpha), or you will not see the app. */ /* index.html sets class hh-landing on — scales all rem-based UI on large screens */ @media (min-width: 1024px) { html.hh-landing { font-size: 106.25%; } } /* Dark mode: pure black landing background */ html.dark, html.dark body { background-color: #000 !important; } /* Some builds toggle dark mode via `class="dark"` on (not ) */ .dark, .dark body { background-color: #000 !important; } html.dark .landing-features-section, .dark .landing-features-section { background-color: #000 !important; } /* Hero: force all copy to white in BOTH modes (but keep CTA/button text colors) */ .hero-section, .hero-section * { color: inherit; } .hero-section { color: #fff; } .hero-section .landing-hero-title, .hero-section .landing-hero-lead, .hero-section .landing-hero-desc, .hero-section .landing-platform-card h3, .hero-section .landing-platform-card p, .hero-section .landing-hero-value #value-tagline, .hero-section .landing-hero-value #value-quote { color: #fff !important; } /* Ensure the three main hero lines are pure white (Tailwind uses opacity utilities) */ .hero-section .landing-hero-lead, .hero-section .landing-hero-desc { opacity: 1 !important; } /* Keep CTA/button text as designed */ .hero-section .landing-platform-card__cta, .hero-section .landing-platform-card__cta * { color: unset !important; } @media (min-width: 1280px) { html.hh-landing { font-size: 112.5%; } } @media (min-width: 1536px) { html.hh-landing { font-size: 118.75%; } } /* Hero platform CTAs: keep rounded corners (compiled Tailwind may not include all rounded-* utilities). */ .landing-platform-card a, .landing-platform-card > span.inline-block { border-radius: 0.75rem !important; } @media (min-width: 640px) { .landing-platform-card a, .landing-platform-card > span.inline-block { border-radius: 0.875rem !important; } } .landing-platform-card.glass-card { border-radius: 0.75rem !important; } @media (min-width: 640px) { .landing-platform-card.glass-card { border-radius: 1rem !important; } } /* Hero: video fills the whole section height and scrolls with foreground — no sticky “viewport only” layer, so text/cards are not sliding over a fixed background. */ .hero-section { position: relative; isolation: isolate; width: 100%; min-height: 100vh; min-height: 100svh; min-height: 100dvh; overflow-x: hidden !important; overflow-y: visible !important; background: radial-gradient(120% 120% at 50% 0%, rgba(99, 102, 241, 0.25) 0%, rgba(15, 23, 42, 0.92) 55%, rgba(0, 0, 0, 1) 100%); } /* One viewport tall: no in-hero scrolling; foreground scales down if needed (see HeroSection useLayoutEffect). */ .hero-section.hero-section--viewport-lock { box-sizing: border-box; height: 100vh; height: 100svh; height: 100dvh; max-height: 100vh; max-height: 100svh; max-height: 100dvh; min-height: 100vh; min-height: 100svh; min-height: 100dvh; overflow: hidden !important; padding-top: 0 !important; padding-bottom: 0 !important; } .hero-section.hero-section--viewport-lock > .hero-video-bg { height: 100% !important; min-height: 100% !important; } .hero-content { position: relative; z-index: 2; width: 100%; height: auto !important; } .hero-section.hero-section--viewport-lock .hero-content--viewport-lock { position: absolute; z-index: 2; inset: 0; box-sizing: border-box; width: 100%; height: 100%; min-height: 0; display: flex; flex-direction: column; align-items: center; overflow: hidden; padding: 0.35rem 0; } /* Equal flex spacers above/below foreground = vertical center in the video frame */ .hero-section.hero-section--viewport-lock .landing-hero-center-spacer { flex: 1 1 0; min-height: 0; width: 100%; } .hero-section.hero-section--viewport-lock .landing-hero-scale-wrap { flex: 0 1 auto; min-height: 0; max-height: 100%; overflow: hidden; width: 100%; max-width: min(76rem, 94vw); } @media (min-width: 1280px) { .hero-section.hero-section--viewport-lock .landing-hero-scale-wrap { max-width: min(88rem, 95vw); } } @media (min-width: 1536px) { .hero-section.hero-section--viewport-lock .landing-hero-scale-wrap { max-width: min(98rem, 96vw); } } @media (min-width: 1920px) { .hero-section.hero-section--viewport-lock .landing-hero-scale-wrap { max-width: min(112rem, 96vw); } } /* Drop fixed card min-heights inside the locked hero so content can shrink / scale. */ .hero-section.hero-section--viewport-lock .landing-hero-platforms .landing-platform-card { min-height: 0 !important; } /* Hero video: inset 0 + min-height so the layer matches tall hero content (no strip below video). */ .hero-section > .hero-video-bg { position: absolute !important; top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; width: 100% !important; height: auto !important; min-width: 100% !important; min-height: 100% !important; object-fit: cover !important; object-position: center !important; z-index: 0 !important; pointer-events: none !important; } @media (min-width: 1024px) { .hero-section > .hero-video-bg--frame { object-fit: cover !important; z-index: 1 !important; } } .hero-video-bg--fill { display: none; } @media (min-width: 1024px) { .hero-video-bg--fill { display: block; object-fit: cover !important; filter: blur(26px) saturate(1.1) brightness(0.72); transform: scale(1.12); opacity: 0.35; } } /* Gray surface only behind the four feature cards (phone column stays on section white / page bg) */ .features-cards-panel { background-color: #ffffff; border: 1px solid rgba(15, 23, 42, 0.05); border-radius: 1rem; padding: 0.9rem 0.9rem 1rem; box-shadow: 0 4px 18px rgba(15, 23, 42, 0.05); width: 100%; min-width: 0; } @media (min-width: 640px) { .features-cards-panel { padding: 1.1rem 1.1rem 1.2rem; border-radius: 1.125rem; } } .dark .features-cards-panel, html.dark .features-cards-panel { background-color: #000 !important; border-color: rgba(255, 255, 255, 0.12); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35); color: #fff; } /* Dark mode: force feature section text to white (overrides Tailwind text-gray-* utilities) */ .dark .features-cards-panel .landing-features-intro__title, html.dark .features-cards-panel .landing-features-intro__title, .dark .features-cards-panel .landing-features-intro__desc, html.dark .features-cards-panel .landing-features-intro__desc, .dark .features-cards-panel .feature-card__title, html.dark .features-cards-panel .feature-card__title, .dark .features-cards-panel .feature-card__text, html.dark .features-cards-panel .feature-card__text { color: #fff !important; } .dark .features-cards-panel .feature-card__text, html.dark .features-cards-panel .feature-card__text, .dark .features-cards-panel .landing-features-intro__desc, html.dark .features-cards-panel .landing-features-intro__desc { color: rgba(255, 255, 255, 0.82) !important; } /* No panel behind the phone — shows section / landing background through transparent PNG margins */ .features-phone-sidebar { padding: 0.25rem 0.5rem 0.5rem; border-radius: 0; background: transparent; border: none; box-shadow: none; } @media (min-width: 640px) { .features-phone-sidebar { padding: 0.35rem 0.65rem 0.65rem; } } .dark .features-phone-sidebar { background: #000 !important; /* pure black behind phone frames */ border: none !important; box-shadow: none !important; border-radius: 1rem; } /* Phone previews grid */ .features-phone-grid { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr); gap: 1.25rem; align-items: start; } /* Each phone tile = title + phone mockup */ .features-phone-tile { display: flex; flex-direction: column; align-items: center; width: 100%; min-width: 0; } .features-phone-title { width: 100%; margin: 0 0 0.5rem; font-weight: 700; font-size: 0.95rem; line-height: 1.25; text-align: center; color: rgba(15, 23, 42, 0.92); } .dark .features-phone-title, html.dark .features-phone-title { color: rgba(255, 255, 255, 0.92); } @media (min-width: 640px) { .features-phone-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.35rem; } } @media (min-width: 1024px) { .features-phone-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.45rem; } } /* Make each phone frame smaller when shown in a grid */ .features-phone-grid .phone-mockup__shell { width: min(980px, 92vw); } @media (min-width: 640px) { .features-phone-grid .phone-mockup__shell { width: min(954px, 46vw); } } @media (min-width: 1024px) { .features-phone-grid .phone-mockup__shell { width: 100%; max-width: 100%; } } .phone-mockup { display: flex; justify-content: center; width: 100%; max-width: 100%; transform: translateZ(0); } /* (Removed desktop scroller overrides) */ .phone-mockup--compact { --phone-screen-top: 11%; --phone-screen-left: 31%; --phone-screen-width: 38%; --phone-screen-height: 78%; } /* * Fullbleed frame (900×1800): screen slot uses exact 390:844 aspect-ratio + horizontal center so * “contain” scaling (phone-mockup.js) fills the slot edge-to-edge with no pillarboxing. */ .phone-mockup--compact.phone-mockup--fullbleed-vertical { /* Tuned to 900×1800 frame — taller white viewport extends further below the app layer */ --phone-screen-slot-top: 7.75%; --phone-screen-slot-h: 88.5%; } /* In the 4-up grid, make the visible screen slot a bit taller to prevent media edges from peeking outside the transparent screen region of the PNG frame. */ .features-phone-grid .phone-mockup--compact.phone-mockup--fullbleed-vertical { --phone-screen-slot-top: 7.2%; --phone-screen-slot-h: 86.5%; } /* Video tiles: keep the slot a bit shorter so the background doesn't extend past the bezel at the bottom. */ .features-phone-grid .phone-mockup--video-nudge-up.phone-mockup--compact.phone-mockup--fullbleed-vertical { --phone-screen-slot-h: 85.5%; } /* Iframe tile: make the white viewport background shorter */ .features-phone-grid .phone-mockup--iframe-short.phone-mockup--compact.phone-mockup--fullbleed-vertical { --phone-screen-slot-h: 84.5%; } /* Animate .phone-mockup__device so bezel + iframe + shadow move as one rigid unit (not the width-only shell) */ .phone-mockup--float .phone-mockup__device { animation: phone-mockup-float 5.5s ease-in-out infinite; } @keyframes phone-mockup-float { 0%, 100% { transform: translateY(0) translateZ(0); } 50% { transform: translateY(-6px) translateZ(0); } } .phone-mockup__shell { position: relative; width: min(396px, 88vw); max-width: 100%; line-height: 0; /* Shadow lives on the outer wrapper so it never gets clipped by the rounded overflow mask. */ filter: drop-shadow(0 16px 34px rgba(15, 23, 42, 0.22)) drop-shadow(0 6px 14px rgba(15, 23, 42, 0.14)); } /* Dark mode: white glow behind phone frames */ .dark .phone-mockup__shell, html.dark .phone-mockup__shell { filter: drop-shadow(0 18px 44px rgba(255, 255, 255, 0.22)) drop-shadow(0 10px 22px rgba(255, 255, 255, 0.14)); } /* Responsive shell width: narrow phones → tablets → desktop (viewport % unchanged on PNG) */ .phone-mockup--compact .phone-mockup__shell { width: min(328px, 90vw); } @media (min-width: 400px) { .phone-mockup--compact .phone-mockup__shell { width: min(362px, 92vw); } } @media (min-width: 640px) { .phone-mockup--compact .phone-mockup__shell { width: min(404px, min(93vw, 492px)); } } @media (min-width: 1024px) { .phone-mockup--compact .phone-mockup__shell { width: min(442px, min(94vw, 528px)); } } @media (min-width: 1280px) { .phone-mockup--compact .phone-mockup__shell { width: min(480px, min(95vw, 568px)); } } /* * Features + phone row: compiled tailwind-full.css omits lg:grid-cols-12, lg:col-span-*, sm:grid-cols-2 * for these classes — without this, desktop collapses to a narrow column. */ .landing-features-inner { width: 100%; max-width: min(76rem, 94vw); margin-left: auto; margin-right: auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 640px) { .landing-features-inner { padding-left: 1.5rem; padding-right: 1.5rem; } } /* Section headline: clear title / subtitle hierarchy + centered rule */ .landing-features-intro { text-align: center; max-width: 100%; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 1.25rem; padding: 0.35rem 0.25rem 0; } /* When the intro sits inside the cards panel, keep it tighter and left-aligned. */ .landing-features-intro--in-panel { text-align: center; margin-bottom: 0.9rem; padding: 0; } .landing-features-intro--in-panel .landing-features-intro__rule { margin-left: auto; margin-right: auto; } @media (min-width: 640px) { .landing-features-intro { margin-bottom: 1.5rem; padding: 0.5rem 0.5rem 0; } } @media (min-width: 1024px) { .landing-features-intro { margin-bottom: 1.75rem; padding-top: 0.75rem; } } .landing-features-intro__title { font-size: 1.375rem; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 0.6rem; white-space: nowrap; } @media (min-width: 640px) { .landing-features-intro__title { font-size: 1.65rem; } } .landing-features-intro__rule { width: 2.5rem; height: 2px; margin: 0 auto; border-radius: 9999px; background: linear-gradient(90deg, transparent, rgba(99, 102, 241, 0.85), transparent); } .landing-features-intro__desc { margin: 0.8rem 0 0; font-size: 0.9375rem; line-height: 1.5; max-width: 32rem; margin-left: auto; margin-right: auto; } @media (min-width: 640px) { .landing-features-intro__desc { font-size: 0.975rem; } } @media (min-width: 1024px) { .landing-features-intro__desc { font-size: 1rem; } } .landing-features-main { display: grid; gap: 1.5rem; width: 100%; align-items: start; } @media (min-width: 640px) { .landing-features-main { gap: 2rem; } } @media (min-width: 1024px) { .landing-features-main { grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 2.5rem; align-items: center; } /* Features copy first, previews below (more room for multiple phone frames) */ .landing-features-main > .features-cards-panel { grid-column: 1 / span 12; order: 1; min-width: 0; width: 100%; } .landing-features-main > .features-phone-sidebar { grid-column: 1 / span 12; order: 2; max-width: none; width: 100%; min-width: 0; margin-left: 0; margin-right: 0; } /* Pricing / plans: full width below phones (Tailwind col-span-* is omitted from tailwind-full.css) */ .landing-features-main > .landing-features-pricing-band { grid-column: 1 / span 12; order: 3; width: 100%; min-width: 0; } } @media (max-width: 1023px) { .landing-features-main > .features-cards-panel { order: 1; } .landing-features-main > .features-phone-sidebar { order: 2; max-width: min(36rem, 100%); margin-left: auto; margin-right: auto; } .landing-features-main > .landing-features-pricing-band { order: 3; width: 100%; min-width: 0; } } .features-grid-cards { display: grid; grid-template-columns: 1fr; gap: 1.15rem; width: 100%; } @media (min-width: 640px) { .features-grid-cards { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; } } @media (min-width: 1024px) { .features-grid-cards { gap: 2.5rem; } } /* Feature list: compact, normal text (no big cards) */ .landing-features-section .feature-card, .dark .landing-features-section .feature-card { display: flex; flex-direction: row; align-items: flex-start; text-align: left; gap: 0.65rem; min-height: 100%; transition: none; border-radius: 0; padding: 0; background: transparent; border: none; } .dark .landing-features-section .feature-card, html.dark .landing-features-section .feature-card { background: transparent; border-color: transparent; } .landing-features-section .feature-card__icon-wrap { flex-shrink: 0; width: 1.75rem; height: 1.75rem; border-radius: 0.4rem; display: flex; align-items: center; justify-content: center; background: transparent; border: none; } .dark .landing-features-section .feature-card__icon-wrap, html.dark .landing-features-section .feature-card__icon-wrap { background: rgba(99, 102, 241, 0.18); border-color: rgba(99, 102, 241, 0.22); } .landing-features-section .feature-card__icon { display: block; font-size: 1.1rem; line-height: 1; filter: none; } .landing-features-section .feature-card__title { font-size: 1rem; line-height: 1.3; margin: 0; letter-spacing: -0.01em; } .landing-features-section .feature-card__text { font-size: 0.9375rem; line-height: 1.55; margin: 0.15rem 0 0; flex-grow: 1; } @media (min-width: 640px) { .landing-features-section .feature-card { padding: 0; gap: 0.75rem; } .landing-features-section .feature-card__title { font-size: 1.025rem; } .landing-features-section .feature-card__text { font-size: 0.975rem; } } .landing-features-section .feature-card:hover, .dark .landing-features-section .feature-card:hover { transform: none; box-shadow: none; } .dark .landing-features-section .feature-card:hover, html.dark .landing-features-section .feature-card:hover { box-shadow: none; } /* * Clip: outer rounded mask only. .phone-mockup__device is the rigid group (grid stack): frame * sets the bitmap size; viewport is absolutely positioned in the same grid cell so % insets * always track the frame. Authors: set shell width for layout; use .phone-mockup__device for margin/transform * so bezel + iframe + shadow move together. */ .phone-mockup__clip { position: relative; width: 100%; overflow: hidden; border-radius: clamp(28px, 11.5%, 46px); isolation: isolate; } /* One cell: underlay (viewport) + bezel img share width/height; abspos viewport CB = grid area */ .phone-mockup__device { display: grid; grid-template-columns: minmax(0, 1fr); grid-template-rows: auto; width: 100%; line-height: 0; transform: translateZ(0); filter: none; } .phone-mockup--compact .phone-mockup__device { filter: none; } .phone-mockup__device > .phone-mockup__viewport, .phone-mockup__device > .phone-mockup__frame { grid-column: 1; grid-row: 1; } .phone-mockup--frame-on-top .phone-mockup__device > .phone-mockup__frame { align-self: start; } .phone-mockup--frame-on-top .phone-mockup__frame { display: block; width: 100%; height: auto; vertical-align: top; user-select: none; position: relative; z-index: 2; /* above .phone-mockup__viewport (1): bezel paints on top of embed */ pointer-events: none; backface-visibility: hidden; -webkit-backface-visibility: hidden; } /* Live app layer — behind frame (z-index); hidden until bezel PNG loads when .phone-mockup--frame-pending */ .phone-mockup--frame-on-top.phone-mockup--frame-pending .phone-mockup__viewport { opacity: 0; } .phone-mockup--frame-on-top.phone-mockup--frame-ready .phone-mockup__viewport { opacity: 1; transition: opacity 0.4s ease; } .phone-mockup--frame-on-top .phone-mockup__viewport { position: absolute; top: var(--phone-screen-top); left: var(--phone-screen-left); width: var(--phone-screen-width); height: var(--phone-screen-height); overflow: hidden; z-index: 1; background: #fff; border-radius: clamp(7px, 8%, 18px); /* layout only — paint containment breaks video compositing on some mobile WebKit builds */ contain: layout; box-sizing: border-box; } /* Centered slot with locked iPhone logical aspect — iframe “contain” then matches slot 1:1 */ .phone-mockup--compact.phone-mockup--fullbleed-vertical.phone-mockup--frame-on-top .phone-mockup__viewport { top: var(--phone-screen-slot-top, 7.75%); left: 50%; width: auto; height: var(--phone-screen-slot-h, 88.5%); max-width: 100%; aspect-ratio: 390 / 844; transform: translateX(-50%); border-radius: clamp(16px, 7%, 38px); } .phone-mockup__scaler { position: absolute; left: 50%; top: 50%; width: 390px; height: 844px; transform-origin: center center; will-change: transform; } .phone-mockup__iframe { display: block; width: 390px; height: 844px; max-width: none; border: 0; margin: 0; padding: 0; background: #fff; } /* Video / media embed: same geometry as iframe */ .phone-mockup__media { display: block; width: 390px; height: 844px; max-width: none; border: 0; margin: 0; padding: 0; background: #fff; object-fit: contain; } /* Extra anti-bleed: match viewport rounding */ .phone-mockup--compact.phone-mockup--fullbleed-vertical.phone-mockup--frame-on-top .phone-mockup__iframe { border-radius: clamp(14px, 6.5%, 36px); } /* Match the same rounding for videos */ .phone-mockup--compact.phone-mockup--fullbleed-vertical.phone-mockup--frame-on-top .phone-mockup__media { border-radius: clamp(14px, 6.5%, 36px); } /* Video only: make it slightly smaller so it fits comfortably inside the frame */ .phone-mockup--video-nudge-up .phone-mockup__media { transform: scale(0.98); transform-origin: center; } .phone-mockup__cta { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; padding: 0.65rem 1.25rem; font-size: 0.9rem; font-weight: 600; color: #1e1b4b; background: linear-gradient(180deg, #fff 0%, #e0e7ff 100%); border-radius: 9999px; text-decoration: none; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.15); transition: transform 0.2s ease, box-shadow 0.2s ease; } .phone-mockup__cta:hover { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(99, 102, 241, 0.35); } .phone-mockup__cta--compact { padding: 0.4rem 0.85rem; font-size: 0.7rem; font-weight: 600; } /* -------------------------------------------------------------------------- Desktop / large viewports: scale hero + features to match full-bleed video (Tailwind bundle is incomplete; these override utility font sizes.) -------------------------------------------------------------------------- */ .landing-hero-inner { width: 100%; max-width: min(76rem, 94vw); } @media (min-width: 1280px) { .landing-hero-inner { max-width: min(88rem, 95vw); } } @media (min-width: 1536px) { .landing-hero-inner { max-width: min(98rem, 96vw); } } /* Hero logo: smaller on mobile; beats tailwind-full .logo-circle { 80px } from 768px */ .landing-hero-logo.logo-circle { width: 2.75rem !important; height: 2.75rem !important; min-width: 2.75rem !important; min-height: 2.75rem !important; } @media (min-width: 640px) { .landing-hero-logo.logo-circle { width: 3.25rem !important; height: 3.25rem !important; min-width: 3.25rem !important; min-height: 3.25rem !important; } } @media (min-width: 768px) and (max-width: 1023px) { .landing-hero-logo.logo-circle { width: 3.75rem !important; height: 3.75rem !important; min-width: 3.75rem !important; min-height: 3.75rem !important; } } @media (min-width: 768px) { .landing-hero-title { font-size: 2.5rem !important; line-height: 1.12 !important; } .landing-hero-lead { font-size: 1.25rem !important; } .landing-hero-desc { font-size: 1rem !important; max-width: 46rem !important; } .landing-platform-card { padding: 1.2rem !important; min-height: 200px !important; } .landing-platform-card > div:first-child { font-size: 2.125rem !important; line-height: 1.2 !important; } .landing-platform-card h3 { font-size: 1rem !important; } .landing-platform-card p { font-size: 0.875rem !important; line-height: 1.45 !important; } .landing-platform-card a, .landing-platform-card > span.inline-block { font-size: 0.875rem !important; padding: 0.45rem 0.65rem !important; } } @media (min-width: 1024px) { .landing-hero-title { font-size: 3rem !important; } .landing-hero-lead { font-size: 1.5rem !important; } .landing-hero-desc { font-size: 1.125rem !important; } .landing-hero-logo.logo-circle { width: 5.125rem !important; height: 5.125rem !important; min-width: 5.125rem !important; min-height: 5.125rem !important; } .landing-hero-platforms { gap: 1.25rem !important; } .landing-platform-card { padding: 1.45rem !important; min-height: 238px !important; } .landing-platform-card > div:first-child { font-size: 2.5rem !important; } .landing-platform-card h3 { font-size: 1.125rem !important; } .landing-platform-card p { font-size: 0.9375rem !important; } .landing-platform-card a, .landing-platform-card > span.inline-block { font-size: 0.9375rem !important; padding: 0.5rem 0.9rem !important; } .landing-hero-value #value-tagline { font-size: 1.5rem !important; } .landing-hero-value #value-quote { font-size: 1.125rem !important; max-width: 52rem !important; } #features-section-title { font-size: 2.35rem !important; } #features-section-desc { font-size: 1.125rem !important; } .landing-features-section .feature-card__title { font-size: 1.1875rem !important; } .landing-features-section .feature-card__text { font-size: 1rem !important; } } @media (min-width: 1280px) { .landing-hero-title { font-size: 3.5rem !important; } .landing-hero-lead { font-size: 1.75rem !important; } .landing-hero-desc { font-size: 1.125rem !important; } .landing-hero-logo.logo-circle { width: 5.75rem !important; height: 5.75rem !important; min-width: 5.75rem !important; min-height: 5.75rem !important; } .landing-platform-card { min-height: 268px !important; padding: 1.65rem !important; } .landing-platform-card > div:first-child { font-size: 3rem !important; } .landing-platform-card h3 { font-size: 1.25rem !important; } .landing-platform-card p { font-size: 1rem !important; } .landing-hero-value #value-tagline { font-size: 1.75rem !important; } .landing-hero-value #value-quote { font-size: 1.25rem !important; } .landing-features-inner { max-width: min(88rem, 95vw); } #features-section-title { font-size: 2.75rem !important; } #features-section-desc { font-size: 1.1875rem !important; } } @media (min-width: 1536px) { .landing-hero-title { font-size: 4rem !important; } .landing-hero-lead { font-size: 1.875rem !important; } .landing-features-inner { max-width: min(98rem, 96vw); } .phone-mockup--compact .phone-mockup__shell { width: min(518px, min(97vw, 624px)); } } @media (min-width: 1920px) { .landing-hero-inner { max-width: min(112rem, 96vw); } .landing-features-inner { max-width: min(112rem, 96vw); } .phone-mockup--compact .phone-mockup__shell { width: min(584px, min(98vw, 716px)); } } /* -------------------------------------------------------------------------- Viewport-locked hero only: smaller type & spacing so everything fits in 100dvh without clipping; overrides global .landing-hero-* rules above. -------------------------------------------------------------------------- */ .hero-section.hero-section--viewport-lock .landing-hero-head { margin-top: 0.15rem !important; margin-bottom: 0.2rem !important; } .hero-section.hero-section--viewport-lock .landing-hero-head__logo-row { margin-bottom: 0.2rem !important; } .hero-section.hero-section--viewport-lock .landing-hero-logo.logo-circle { width: 1.85rem !important; height: 1.85rem !important; min-width: 1.85rem !important; min-height: 1.85rem !important; } .hero-section.hero-section--viewport-lock .landing-hero-title { font-size: clamp(0.9375rem, 3.5vw, 1.2rem) !important; line-height: 1.2 !important; margin-bottom: 0.15rem !important; } .hero-section.hero-section--viewport-lock .landing-hero-lead { font-size: clamp(0.78125rem, 2.85vw, 0.9375rem) !important; line-height: 1.35 !important; margin-bottom: 0.12rem !important; } .hero-section.hero-section--viewport-lock .landing-hero-desc { font-size: clamp(0.71875rem, 2.5vw, 0.875rem) !important; line-height: 1.38 !important; margin-bottom: 0 !important; } .hero-section.hero-section--viewport-lock .khmer-title, .hero-section.hero-section--viewport-lock .khmer-subtitle { line-height: 1.35 !important; } .hero-section.hero-section--viewport-lock .landing-hero-platforms { gap: 0.3rem !important; margin-top: 0.25rem !important; margin-bottom: 0.25rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card__emoji { font-size: 1rem !important; line-height: 1 !important; margin-bottom: 0.1rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card h3 { font-size: clamp(0.5625rem, 2vw, 0.6875rem) !important; line-height: 1.25 !important; margin-bottom: 0.08rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card__body { font-size: clamp(0.5625rem, 1.9vw, 0.6875rem) !important; line-height: 1.32 !important; margin-bottom: 0.2rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card__cta { font-size: clamp(0.5625rem, 1.8vw, 0.625rem) !important; padding: 0.22rem 0.35rem !important; line-height: 1.2 !important; } .hero-section.hero-section--viewport-lock .landing-hero-value { margin-top: 0.7rem !important; margin-bottom: 0.1rem !important; } @media (min-width: 640px) { .hero-section.hero-section--viewport-lock .landing-hero-value { margin-top: 0.95rem !important; } } @media (min-width: 1024px) { .hero-section.hero-section--viewport-lock .landing-hero-value { margin-top: 1.15rem !important; } } .hero-section.hero-section--viewport-lock .landing-hero-value #value-tagline { font-size: clamp(0.78125rem, 2.55vw, 1rem) !important; line-height: 1.3 !important; } .hero-section.hero-section--viewport-lock .landing-hero-value #value-quote { font-size: clamp(0.71875rem, 2.35vw, 0.9375rem) !important; line-height: 1.38 !important; margin-top: 0.3rem !important; } @media (min-width: 640px) { .hero-section.hero-section--viewport-lock .landing-hero-logo.logo-circle { width: 2.1rem !important; height: 2.1rem !important; min-width: 2.1rem !important; min-height: 2.1rem !important; } .hero-section.hero-section--viewport-lock .landing-hero-title { font-size: clamp(1.0625rem, 2.75vw, 1.35rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-lead { font-size: clamp(0.875rem, 2.15vw, 1.0625rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-desc { font-size: clamp(0.8125rem, 1.95vw, 0.9375rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-platforms { gap: 0.4rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card__emoji { font-size: 1.15rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card h3 { font-size: clamp(0.625rem, 1.5vw, 0.75rem) !important; } .hero-section.hero-section--viewport-lock .landing-platform-card__body { font-size: clamp(0.59375rem, 1.45vw, 0.71875rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-value #value-tagline { font-size: clamp(0.875rem, 2.05vw, 1.0625rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-value #value-quote { font-size: clamp(0.8125rem, 1.9vw, 1rem) !important; } } @media (min-width: 768px) { .hero-section.hero-section--viewport-lock .landing-hero-logo.logo-circle { width: 2.35rem !important; height: 2.35rem !important; min-width: 2.35rem !important; min-height: 2.35rem !important; } .hero-section.hero-section--viewport-lock .landing-hero-title { font-size: clamp(1.125rem, 2.25vw, 1.5rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-lead { font-size: clamp(0.9375rem, 1.85vw, 1.0625rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-desc { font-size: clamp(0.875rem, 1.65vw, 1rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-platforms { gap: 0.5rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card__emoji { font-size: 1.25rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card h3 { font-size: 0.78rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card__body { font-size: 0.74rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card__cta { font-size: 0.72rem !important; padding: 0.28rem 0.45rem !important; } .hero-section.hero-section--viewport-lock .landing-hero-value #value-tagline { font-size: clamp(0.9375rem, 1.85vw, 1.125rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-value #value-quote { font-size: clamp(0.875rem, 1.7vw, 1.0625rem) !important; } } @media (min-width: 1024px) { .hero-section.hero-section--viewport-lock .landing-hero-logo.logo-circle { width: 2.65rem !important; height: 2.65rem !important; min-width: 2.65rem !important; min-height: 2.65rem !important; } .hero-section.hero-section--viewport-lock .landing-hero-title { font-size: clamp(1.1875rem, 1.85vw, 1.6rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-lead { font-size: clamp(1rem, 1.55vw, 1.1875rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-desc { font-size: clamp(0.9375rem, 1.4vw, 1.125rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-platforms { gap: 0.55rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card__emoji { font-size: 1.35rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card h3 { font-size: 0.82rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card__body { font-size: 0.78rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card__cta { font-size: 0.76rem !important; padding: 0.32rem 0.5rem !important; } .hero-section.hero-section--viewport-lock .landing-hero-value #value-tagline { font-size: clamp(1rem, 1.55vw, 1.1875rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-value #value-quote { font-size: clamp(0.9375rem, 1.4vw, 1.0625rem) !important; } } @media (min-width: 1280px) { .hero-section.hero-section--viewport-lock .landing-hero-logo.logo-circle { width: 2.85rem !important; height: 2.85rem !important; min-width: 2.85rem !important; min-height: 2.85rem !important; } .hero-section.hero-section--viewport-lock .landing-hero-title { font-size: clamp(1.25rem, 1.65vw, 1.7rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-lead { font-size: clamp(1.0625rem, 1.4vw, 1.1875rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-desc { font-size: clamp(0.9375rem, 1.25vw, 1.125rem) !important; } .hero-section.hero-section--viewport-lock .landing-platform-card__emoji { font-size: 1.45rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card h3 { font-size: 0.86rem !important; } .hero-section.hero-section--viewport-lock .landing-platform-card__body { font-size: 0.82rem !important; } .hero-section.hero-section--viewport-lock .landing-hero-value #value-tagline { font-size: clamp(1.0625rem, 1.35vw, 1.25rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-value #value-quote { font-size: clamp(1rem, 1.25vw, 1.125rem) !important; } } @media (min-width: 1536px) { .hero-section.hero-section--viewport-lock .landing-hero-title { font-size: clamp(1.3125rem, 1.4vw, 1.875rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-lead { font-size: clamp(1.0625rem, 1.2vw, 1.25rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-desc { font-size: clamp(1rem, 1.1vw, 1.1875rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-value #value-tagline { font-size: clamp(1.125rem, 1.15vw, 1.3125rem) !important; } .hero-section.hero-section--viewport-lock .landing-hero-value #value-quote { font-size: clamp(1.0625rem, 1.05vw, 1.1875rem) !important; } } @media (prefers-reduced-motion: reduce) { .phone-mockup--float .phone-mockup__device { animation: none; } .phone-mockup--frame-on-top.phone-mockup--frame-ready .phone-mockup__viewport { transition: none; } } /* ========================================================================== iOS-inspired "liquid glass" pricing block (Hands & Hearts landing) Frosted materials, depth, segmented control — works with body.dark / html.dark ========================================================================== */ .hh-pricing-shell { position: relative; overflow: visible; border-radius: 1.35rem; isolation: isolate; background: linear-gradient( 165deg, rgba(255, 255, 255, 0.72) 0%, rgba(248, 250, 252, 0.52) 45%, rgba(241, 245, 249, 0.68) 100% ); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 24px 64px -16px rgba(15, 23, 42, 0.12), 0 8px 24px -8px rgba(15, 23, 42, 0.08); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } @media (min-width: 640px) { .hh-pricing-shell { border-radius: 1.65rem; } } .dark .hh-pricing-shell, html.dark .hh-pricing-shell { background: linear-gradient( 165deg, rgba(38, 38, 42, 0.88) 0%, rgba(24, 24, 28, 0.78) 50%, rgba(14, 14, 18, 0.92) 100% ); border: 1px solid rgba(255, 255, 255, 0.1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 24px 80px -20px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(0, 0, 0, 0.35) inset; } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .hh-pricing-shell { background: linear-gradient(180deg, #f2f2f7 0%, #ffffff 50%, #eef2f7 100%); } .dark .hh-pricing-shell, html.dark .hh-pricing-shell { background: linear-gradient(180deg, #2c2c2e 0%, #1c1c1e 100%); } } .hh-pricing-shell__blobs { pointer-events: none; position: absolute; inset: 0; overflow: hidden; border-radius: inherit; z-index: 0; contain: paint; } .hh-pricing-shell__blob { position: absolute; border-radius: 50%; filter: blur(44px); opacity: 0.36; } .hh-pricing-shell__blob--cyan { width: min(18rem, 52vw); height: min(18rem, 52vw); left: -16%; top: -12%; background: rgba(34, 211, 238, 0.38); } .dark .hh-pricing-shell__blob--cyan, html.dark .hh-pricing-shell__blob--cyan { opacity: 0.2; background: rgba(34, 211, 238, 0.28); } .hh-pricing-shell__blob--violet { width: min(20rem, 58vw); height: min(20rem, 58vw); right: -14%; bottom: 2%; background: rgba(167, 139, 250, 0.34); } .dark .hh-pricing-shell__blob--violet, html.dark .hh-pricing-shell__blob--violet { opacity: 0.18; background: rgba(167, 139, 250, 0.24); } .hh-pricing-shell__blob--emerald { width: min(17rem, 48vw); height: min(14rem, 40vw); left: 50%; top: 28%; transform: translateX(-50%); background: rgba(52, 211, 153, 0.3); } .dark .hh-pricing-shell__blob--emerald, html.dark .hh-pricing-shell__blob--emerald { opacity: 0.16; background: rgba(52, 211, 153, 0.22); } .hh-pricing-shell__content { position: relative; z-index: 1; } .hh-pricing-shell .hh-pricing-main-title { font-size: clamp(1.25rem, 3.5vw, 1.625rem); font-weight: 600; letter-spacing: -0.03em; line-height: 1.2; margin: 0; color: #111827; } .dark .hh-pricing-shell .hh-pricing-main-title, html.dark .hh-pricing-shell .hh-pricing-main-title { color: #fff; } .hh-pricing-shell .hh-pricing-main-sub { margin: 0.35rem auto 0; max-width: 34rem; font-size: 0.8125rem; line-height: 1.42; letter-spacing: -0.012em; color: rgba(75, 85, 99, 0.95); } .dark .hh-pricing-shell .hh-pricing-main-sub, html.dark .hh-pricing-shell .hh-pricing-main-sub { color: rgba(156, 163, 175, 0.95); } .hh-pricing-segment { display: inline-flex; padding: 0.1875rem; gap: 0.125rem; border-radius: 100px; background: rgba(0, 0, 0, 0.045); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.05); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } .dark .hh-pricing-segment, html.dark .hh-pricing-segment { background: rgba(0, 0, 0, 0.4); border: 1px solid rgba(255, 255, 255, 0.08); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45); } .hh-pricing-segment__btn { min-height: 40px; padding: 0 1rem; border: none; border-radius: 100px; font-size: 0.8125rem; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; color: rgba(55, 65, 81, 0.95); background: transparent; transition: transform 0.2s ease, background 0.25s ease, color 0.2s ease, box-shadow 0.25s ease; } .hh-pricing-segment__btn:hover { color: #111827; } .dark .hh-pricing-segment__btn, html.dark .hh-pricing-segment__btn { color: rgba(209, 213, 219, 0.95); } .dark .hh-pricing-segment__btn:hover, html.dark .hh-pricing-segment__btn:hover { color: #fff; } .hh-pricing-segment__btn:active { transform: scale(0.97); } .hh-pricing-segment__btn--active { color: #111827 !important; background: #fff !important; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08), 0 1px 3px rgba(0, 0, 0, 0.04), 0 0 0 1px rgba(251, 191, 36, 0.35); } .dark .hh-pricing-segment__btn--active, html.dark .hh-pricing-segment__btn--active { color: #fff !important; background: rgba(255, 255, 255, 0.16) !important; box-shadow: 0 2px 12px rgba(0, 0, 0, 0.35), 0 0 0 1px rgba(251, 191, 36, 0.28); } .hh-pricing-segment__badge { margin-left: 0.28rem; font-size: 9px; padding: 0.1rem 0.3rem; border-radius: 9999px; font-weight: 700; vertical-align: middle; } .hh-pricing-segment__btn--active .hh-pricing-segment__badge { background: rgba(251, 191, 36, 0.28); color: rgba(120, 53, 15, 0.95); } .dark .hh-pricing-segment__btn--active .hh-pricing-segment__badge, html.dark .hh-pricing-segment__btn--active .hh-pricing-segment__badge { background: rgba(251, 191, 36, 0.22); color: rgba(254, 243, 199, 0.98); } .hh-pricing-segment__btn:not(.hh-pricing-segment__btn--active) .hh-pricing-segment__badge { background: rgba(251, 191, 36, 0.22); color: rgba(146, 64, 14, 0.88); } .dark .hh-pricing-segment__btn:not(.hh-pricing-segment__btn--active) .hh-pricing-segment__badge, html.dark .hh-pricing-segment__btn:not(.hh-pricing-segment__btn--active) .hh-pricing-segment__badge { background: rgba(251, 191, 36, 0.12); color: rgba(253, 230, 138, 0.92); } .hh-pricing-hero { position: relative; overflow: hidden; border-radius: 1.25rem; padding: 0.95rem 1rem 1.05rem; background: linear-gradient( 155deg, rgba(253, 230, 138, 0.96) 0%, rgba(251, 191, 36, 0.92) 38%, rgba(217, 119, 6, 0.94) 100% ); border: 1px solid rgba(255, 255, 255, 0.48); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.55) inset, 0 20px 50px -12px rgba(180, 83, 9, 0.38), 0 8px 20px rgba(0, 0, 0, 0.12); backdrop-filter: saturate(150%) blur(14px); -webkit-backdrop-filter: saturate(150%) blur(14px); } @media (min-width: 640px) { .hh-pricing-hero { border-radius: 1.4rem; padding: 1.1rem 1.25rem 1.2rem; } } .hh-pricing-hero::before { content: ''; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; background: linear-gradient(180deg, rgba(255, 255, 255, 0.45) 0%, transparent 45%); opacity: 0.92; } .hh-pricing-hero__inner { position: relative; z-index: 1; } .hh-pricing-hero__cta { display: inline-flex; align-items: center; justify-content: center; width: 100%; max-width: 240px; margin-left: auto; margin-right: auto; padding: 0.6rem 1.1rem; border-radius: 0.75rem; font-weight: 600; font-size: 0.875rem; letter-spacing: -0.015em; text-decoration: none; color: rgba(120, 53, 15, 0.98); background: rgba(255, 255, 255, 0.94); border: 1px solid rgba(255, 255, 255, 0.55); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 10px 28px -6px rgba(120, 53, 15, 0.3); transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease; } .hh-pricing-hero__cta:hover { background: #fff; box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 14px 36px -6px rgba(120, 53, 15, 0.34); } .hh-pricing-hero__cta:active { transform: scale(0.98); } .hh-pricing-section-title { font-size: 0.9375rem; font-weight: 600; letter-spacing: -0.02em; color: #111827; margin: 0; line-height: 1.35; overflow-wrap: anywhere; word-break: break-word; } @media (max-width: 639px) { .hh-pricing-section-title { font-size: 0.875rem; line-height: 1.45; } } .dark .hh-pricing-section-title, html.dark .hh-pricing-section-title { color: #fff; } .hh-pricing-section-desc { font-size: 0.625rem; margin: 0.15rem 0 0; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 600; color: rgba(107, 114, 128, 0.95); } .dark .hh-pricing-section-desc, html.dark .hh-pricing-section-desc { color: rgba(156, 163, 175, 0.92); } @media (max-width: 639px) { .hh-pricing-section-desc { display: none; } } .hh-plan-card-glass { position: relative; overflow: visible; border-radius: 1.1rem; isolation: isolate; border: 1px solid rgba(255, 255, 255, 0.65); background: linear-gradient(165deg, rgba(255, 255, 255, 0.85) 0%, rgba(255, 255, 255, 0.48) 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.95) inset, 0 4px 24px -4px rgba(15, 23, 42, 0.08), 0 12px 40px -12px rgba(15, 23, 42, 0.06); backdrop-filter: saturate(160%) blur(18px); -webkit-backdrop-filter: saturate(160%) blur(18px); transition: border-color 0.25s ease, box-shadow 0.3s ease, transform 0.25s ease; } @media (min-width: 640px) { .hh-plan-card-glass { border-radius: 1.25rem; } } .hh-plan-card-glass::before { content: ''; position: absolute; left: 0.75rem; right: 0.75rem; top: 0; height: 1px; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.95), transparent); opacity: 0.88; pointer-events: none; } .dark .hh-plan-card-glass, html.dark .hh-plan-card-glass { border: 1px solid rgba(255, 255, 255, 0.09); background: linear-gradient(165deg, rgba(52, 52, 58, 0.72) 0%, rgba(32, 32, 38, 0.48) 100%); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 8px 32px -8px rgba(0, 0, 0, 0.42); } .dark .hh-plan-card-glass::before, html.dark .hh-plan-card-glass::before { background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.16), transparent); } @media (hover: hover) and (pointer: fine) { .hh-plan-card-glass:hover { border-color: rgba(255, 255, 255, 0.92); box-shadow: 0 1px 0 rgba(255, 255, 255, 1) inset, 0 8px 28px -6px rgba(15, 23, 42, 0.1), 0 22px 50px -16px rgba(99, 102, 241, 0.1); transform: translateY(-1px); } .dark .hh-plan-card-glass:hover, html.dark .hh-plan-card-glass:hover { border-color: rgba(255, 255, 255, 0.18); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 12px 40px -10px rgba(0, 0, 0, 0.55); } } .hh-plan-card-glass__body { position: relative; z-index: 1; } /* Full wrapping for Khmer + long English lines on narrow viewports */ .hh-plan-card__title, .hh-plan-card__meta-row, .hh-plan-card__meta-tag, .hh-plan-card__desc, .hh-plan-card__feature-text { overflow-wrap: anywhere; word-break: break-word; } .hh-plan-card__title { line-height: 1.45; } .hh-plan-card__desc { line-height: 1.55; } .hh-plan-card__feature-text { line-height: 1.5; } .hh-plan-card__more-btn { overflow-wrap: anywhere; word-break: break-word; } .hh-plan-card__meta-row { line-height: 1.35; max-width: 100%; } /* Highlighted top band: title, badges & price — visually separate from description */ .hh-plan-card__header-band { margin-bottom: 0.75rem; padding: 0.65rem 0.7rem 0.75rem; border-radius: 0.85rem; background: linear-gradient( 135deg, rgba(236, 253, 245, 0.95) 0%, rgba(224, 231, 255, 0.55) 55%, rgba(238, 242, 255, 0.75) 100% ); border: 1px solid rgba(16, 185, 129, 0.14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.65); } @media (min-width: 640px) { .hh-plan-card__header-band { padding: 0.75rem 0.85rem 0.85rem; border-radius: 0.95rem; } } .dark .hh-plan-card__header-band, html.dark .hh-plan-card__header-band { background: linear-gradient( 135deg, rgba(6, 78, 59, 0.35) 0%, rgba(30, 27, 75, 0.28) 50%, rgba(15, 23, 42, 0.45) 100% ); border-color: rgba(52, 211, 153, 0.2); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .hh-plan-card__header-band--popular { padding-right: 3.35rem; } .hh-popular-pill { border-radius: 9999px; font-weight: 700; font-size: 0.625rem; padding: 0.2rem 0.5rem; color: #fff; background: linear-gradient(135deg, rgba(52, 211, 153, 0.98) 0%, rgba(22, 163, 74, 0.98) 100%); border: 1px solid rgba(255, 255, 255, 0.38); box-shadow: 0 4px 14px -2px rgba(22, 163, 74, 0.5); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } @media (prefers-reduced-motion: reduce) { .hh-plan-card-glass { transition: none; } .hh-plan-card-glass:hover { transform: none !important; } .hh-pricing-segment__btn { transition: none; } .hh-pricing-segment__btn:active { transform: none; } .hh-pricing-hero__cta:active { transform: none; } } /* -------------------------------------------------------------------------- Footer clearance for fixed bottom dock (iOS-style) -------------------------------------------------------------------------- */ .hh-landing-footer { padding-bottom: calc(5.75rem + env(safe-area-inset-bottom, 0px)) !important; } @media (min-width: 640px) { .hh-landing-footer { padding-bottom: calc(6rem + env(safe-area-inset-bottom, 0px)) !important; } } /* -------------------------------------------------------------------------- Pricing: segment wraps on narrow screens; primary CTA -------------------------------------------------------------------------- */ .hh-pricing-segment--wrap { display: flex; flex-wrap: wrap; justify-content: center; max-width: 100%; } .hh-pricing-segment--wrap .hh-pricing-segment__btn { flex: 1 1 auto; min-width: min(140px, 42vw); justify-content: center; } .hh-pricing-hero__cta--primary { width: 100%; max-width: none; padding: 0.75rem 1.25rem; min-height: 48px; white-space: normal; text-align: center; line-height: 1.35; color: #fff !important; background: linear-gradient(180deg, #16a34a 0%, #15803d 100%) !important; border: 1px solid rgba(255, 255, 255, 0.28) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.22) inset, 0 12px 32px -8px rgba(22, 101, 52, 0.55), 0 4px 12px rgba(0, 0, 0, 0.12) !important; } .hh-pricing-hero__cta--primary:hover { background: linear-gradient(180deg, #22c55e 0%, #16a34a 100%) !important; box-shadow: 0 1px 0 rgba(255, 255, 255, 0.35) inset, 0 16px 40px -8px rgba(22, 101, 52, 0.5), 0 6px 16px rgba(0, 0, 0, 0.14) !important; } .hh-pricing-hero__cta--primary:active { transform: scale(0.98); } .dark .hh-pricing-hero__cta--primary, html.dark .hh-pricing-hero__cta--primary { color: #fff !important; background: linear-gradient(180deg, #22c55e 0%, #166534 100%) !important; border-color: rgba(255, 255, 255, 0.12) !important; } /* -------------------------------------------------------------------------- Fixed dock: iOS tab bar–inspired -------------------------------------------------------------------------- */ .hh-landing-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; display: flex; justify-content: center; pointer-events: none; padding: 0 0.65rem max(0.5rem, env(safe-area-inset-bottom, 0px)); } .hh-landing-dock__inner { pointer-events: auto; display: flex; align-items: stretch; width: 100%; max-width: 28rem; min-height: 3.25rem; border-radius: 1.15rem; overflow: hidden; background: rgba(255, 255, 255, 0.72); border: 1px solid rgba(0, 0, 0, 0.06); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.9) inset, 0 -1px 0 rgba(0, 0, 0, 0.04), 0 12px 40px -8px rgba(15, 23, 42, 0.22), 0 4px 16px rgba(0, 0, 0, 0.08); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); } /* Mobile: vertical dock on bottom-right */ @media (max-width: 639px) { .hh-landing-dock { left: auto; right: 0; justify-content: flex-end; padding: 0 0.75rem max(0.75rem, env(safe-area-inset-bottom, 0px)); } .hh-landing-dock__inner { width: auto; max-width: none; min-height: 0; flex-direction: column; border-radius: 1.1rem; } .hh-landing-dock__btn { width: 4.25rem; min-height: 3.1rem; padding: 0.45rem 0.55rem; } .hh-landing-dock__divider { width: auto; height: 1px; margin: 0 0.55rem; } } .dark .hh-landing-dock__inner, html.dark .hh-landing-dock__inner { background: rgba(44, 44, 46, 0.82); border-color: rgba(255, 255, 255, 0.1); box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 12px 48px -8px rgba(0, 0, 0, 0.55), 0 4px 20px rgba(0, 0, 0, 0.35); } .hh-landing-dock__btn { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem; min-height: 3.25rem; padding: 0.4rem 0.5rem; font-size: 0.6875rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; color: #3a3a3c; transition: background 0.22s ease, color 0.22s ease, transform 0.18s ease; -webkit-tap-highlight-color: transparent; } .dark .hh-landing-dock__btn, html.dark .hh-landing-dock__btn { color: rgba(255, 255, 255, 0.92); } .hh-landing-dock__btn:hover { background: rgba(0, 0, 0, 0.04); color: #111827; } .dark .hh-landing-dock__btn:hover, html.dark .hh-landing-dock__btn:hover { background: rgba(255, 255, 255, 0.08); color: #fff; } .hh-landing-dock__btn:active { transform: scale(0.97); background: rgba(0, 0, 0, 0.06); } .dark .hh-landing-dock__btn:active, html.dark .hh-landing-dock__btn:active { background: rgba(255, 255, 255, 0.1); } .hh-landing-dock__icon { display: flex; align-items: center; justify-content: center; opacity: 0.88; } .hh-landing-dock__btn:hover .hh-landing-dock__icon { opacity: 1; } .hh-landing-dock__label { line-height: 1.2; text-align: center; max-width: 100%; padding: 0 0.125rem; word-break: break-word; } .hh-landing-dock__divider { width: 1px; align-self: stretch; margin: 0.55rem 0; background: rgba(0, 0, 0, 0.08); } .dark .hh-landing-dock__divider, html.dark .hh-landing-dock__divider { background: rgba(255, 255, 255, 0.12); } @media (prefers-reduced-motion: reduce) { .hh-landing-dock__btn { transition: none; } .hh-landing-dock__btn:active { transform: none; } .hh-pricing-hero__cta--primary:active { transform: none; } } /* Khmer UI: Battambang for entire Plans & pricing block (overrides body .khmer-text Metal stack) */ #pricing.hh-pricing-battambang, #pricing.hh-pricing-battambang * { font-family: 'Battambang', 'Noto Sans Khmer', system-ui, sans-serif !important; }