/* ========================================================================= Forms+ โ€” Marketing Site Stylesheet Dark-first, mobile-first, self-contained (no external fonts or CDNs). ========================================================================= */ /* ---------- Design tokens ---------- */ /* Palette lifted from the filler-v2 page (website/f2/index.html), which is itself Google Forms' own look: Deep Purple 500 #673ab7 on the #f0ebf8 lilac ground, with Google greys. Matching it is deliberate โ€” a respondent who opens a Forms+ link and then visits the site should see one product, and the app's whole promise is that it sits on top of Google Forms rather than replacing it. LIGHT-FIRST for the same reason: f2 is a light surface. */ :root { /* ๐Ÿ”ด LIGHT ONLY. Founder, 2026-09-13: "disable the dark mode for now, it should always show the website in light mode." This declaration is the half people forget โ€” without it the UA still paints scrollbars, form controls and the canvas dark on a dark-mode device. */ color-scheme: light; --bg: #f0ebf8; --bg-2: #e8e0f4; --surface: #ffffff; --surface-2: #f8f9fa; --border: #dadce0; --border-strong: #bdc1c6; --text: #202124; --text-70: #5f6368; --text-50: rgba(32, 33, 36, 0.56); --text-35: rgba(32, 33, 36, 0.38); --accent: #673ab7; --accent-2: #7e57c2; --accent-3: #9575cd; --accent-soft: #ede7f6; --accent-ink: #ffffff; --accent-rgb: 103, 58, 183; /* Gold is kept for star ratings ONLY. It is semantic there โ€” a purple star reads as a decoration, not as a rating โ€” and it is the one place the monochrome is worth breaking. */ --amber: #f4b400; --pos: #0f9d58; /* Google green โ€” sentiment only, never decoration */ --neg: #d93025; /* Google red โ€” sentiment only, never decoration */ --grad-hero: radial-gradient(1100px 620px at 18% -8%, rgba(var(--accent-rgb), 0.20), transparent 62%), radial-gradient(900px 560px at 92% 4%, rgba(var(--accent-rgb), 0.12), transparent 64%); --radius: 18px; --radius-sm: 12px; --radius-lg: 26px; --shadow: 0 12px 32px rgba(60, 40, 110, 0.14); --shadow-sm: 0 4px 14px rgba(60, 40, 110, 0.10); --maxw: 1180px; --ease: cubic-bezier(0.22, 1, 0.36, 1); --font: -apple-system, BlinkMacSystemFont, "SF Pro Display", "Segoe UI", Roboto, Helvetica, Arial, "Helvetica Neue", sans-serif; } /* Dark palette โ€” DISABLED, not deleted (founder, 2026-09-13: light only "for now"). It used to be `@media (prefers-color-scheme: dark)`. It is now keyed on an attribute nothing sets, so it never applies, the work is preserved, and it can still be eyeballed by putting data-theme="dark" on in devtools. ๐Ÿ”ด TO RE-ENABLE: swap this selector back to `@media (prefers-color-scheme: dark) { :root {`, restore the closing brace at the end of the block, do the same to the .ai-band rule further down, drop `color-scheme: light` above, and put back the dark theme-color meta in all three pages. The ground is purple-tinted rather than neutral so the identity survives the flip, and the accent is stepped UP two levels: #673ab7 loses contrast on a dark ground, so it is only used for filled surfaces there, never for text. */ :root[data-theme="dark"] { --bg: #14101c; --bg-2: #1a1526; --surface: #1f1930; --surface-2: #271f3a; --border: rgba(255, 255, 255, 0.10); --border-strong: rgba(255, 255, 255, 0.18); --text: #ece7f5; --text-70: rgba(236, 231, 245, 0.72); --text-50: rgba(236, 231, 245, 0.52); --text-35: rgba(236, 231, 245, 0.36); --accent: #7e57c2; --accent-2: #b39ddb; --accent-3: #d1c4e9; --accent-soft: #2a2140; --accent-rgb: 126, 87, 194; --pos: #5bb974; --neg: #f28b82; --shadow: 0 18px 50px rgba(0, 0, 0, 0.50); --shadow-sm: 0 8px 24px rgba(0, 0, 0, 0.38); --grad-hero: radial-gradient(1100px 620px at 18% -8%, rgba(var(--accent-rgb), 0.34), transparent 62%), radial-gradient(900px 560px at 92% 4%, rgba(var(--accent-rgb), 0.18), transparent 64%); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { margin: 0 0 0.4em; line-height: 1.12; letter-spacing: -0.02em; font-weight: 700; } p { margin: 0 0 1rem; } :focus-visible { outline: 2px solid var(--accent-2); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; left: -999px; top: 0; background: var(--accent); color: #fff; padding: 10px 16px; border-radius: 0 0 10px 0; z-index: 200; } .skip-link:focus { left: 0; } /* ---------- Layout helpers ---------- */ .container { width: 100%; max-width: var(--maxw); margin-inline: auto; padding-inline: 22px; } section { position: relative; } .section { padding-block: clamp(56px, 8vw, 108px); } .section-head { max-width: 720px; margin-bottom: clamp(32px, 5vw, 56px); } .section-head.center { margin-inline: auto; text-align: center; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 14px; } .eyebrow::before { content: ""; width: 22px; height: 2px; background: currentColor; border-radius: 2px; } .section-head.center .eyebrow { justify-content: center; } .section-title { font-size: clamp(1.9rem, 4.2vw, 3rem); } .section-sub { font-size: clamp(1rem, 1.6vw, 1.18rem); color: var(--text-70); margin-bottom: 0; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; font-family: inherit; font-weight: 650; font-size: 1rem; border: 1px solid transparent; border-radius: 999px; padding: 13px 24px; cursor: pointer; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), background 0.18s var(--ease), border-color 0.18s var(--ease); min-height: 48px; } .btn:active { transform: translateY(1px) scale(0.99); } .btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--accent-ink); box-shadow: 0 10px 30px rgba(var(--accent-rgb), 0.42); } .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 16px 40px rgba(var(--accent-rgb), 0.55); } .btn-ghost { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-ghost:hover { background: var(--surface-2); border-color: var(--text-50); } /* App Store badge (self-drawn, black โ€” Apple-guideline friendly proportions) */ .appstore-badge { display: inline-flex; align-items: center; gap: 12px; background: #000; color: #fff; border: 1px solid rgba(255, 255, 255, 0.22); border-radius: 13px; padding: 10px 18px 10px 16px; min-height: 56px; transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease); box-shadow: var(--shadow-sm); } .appstore-badge:hover { transform: translateY(-2px); box-shadow: var(--shadow); } .appstore-badge svg { width: 26px; height: 26px; flex: none; } .appstore-badge .b-copy { display: flex; flex-direction: column; line-height: 1.05; text-align: left; } .appstore-badge .b-small { font-size: 0.66rem; letter-spacing: 0.02em; opacity: 0.9; } .appstore-badge .b-big { font-size: 1.28rem; font-weight: 600; letter-spacing: -0.01em; } .cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; } /* ---------- Nav ---------- */ .nav { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--bg) 62%, transparent); backdrop-filter: saturate(160%) blur(16px); -webkit-backdrop-filter: saturate(160%) blur(16px); border-bottom: 1px solid transparent; transition: background 0.25s var(--ease), border-color 0.25s var(--ease); } .nav.scrolled { background: color-mix(in srgb, var(--bg) 88%, transparent); border-bottom-color: var(--border); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 18px; } .brand { display: inline-flex; align-items: center; gap: 11px; font-weight: 750; font-size: 1.12rem; letter-spacing: -0.02em; } .brand .logo { width: 34px; height: 34px; border-radius: 9px; background: linear-gradient(140deg, var(--accent), var(--accent-3)); display: grid; place-items: center; color: #fff; font-weight: 800; font-size: 1.05rem; box-shadow: 0 6px 18px rgba(var(--accent-rgb), 0.4); } .nav-links { display: flex; align-items: center; gap: 28px; list-style: none; margin: 0; padding: 0; } .nav-links a { color: var(--text-70); font-size: 0.96rem; font-weight: 550; transition: color 0.16s var(--ease); } .nav-links a:hover { color: var(--text); } .nav-actions { display: flex; align-items: center; gap: 12px; } .nav-cta { padding: 9px 18px; min-height: 42px; font-size: 0.94rem; } .nav-toggle { display: none; width: 44px; height: 44px; border: 1px solid var(--border-strong); background: var(--surface); border-radius: 11px; cursor: pointer; padding: 0; align-items: center; justify-content: center; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 18px; height: 2px; background: var(--text); border-radius: 2px; position: relative; transition: transform 0.22s var(--ease), opacity 0.22s var(--ease); } .nav-toggle span::before { position: absolute; top: -6px; } .nav-toggle span::after { position: absolute; top: 6px; } .nav.open .nav-toggle span { background: transparent; } .nav.open .nav-toggle span::before { transform: translateY(6px) rotate(45deg); } .nav.open .nav-toggle span::after { transform: translateY(-6px) rotate(-45deg); } /* ---------- Hero ---------- */ .hero { position: relative; padding-top: clamp(48px, 7vw, 92px); padding-bottom: clamp(48px, 7vw, 90px); background: var(--grad-hero), var(--bg); overflow: hidden; } .hero::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(var(--border) 1px, transparent 1px), linear-gradient(90deg, var(--border) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%); -webkit-mask-image: radial-gradient(70% 60% at 50% 30%, #000 0%, transparent 78%); opacity: 0.5; pointer-events: none; } .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: clamp(28px, 5vw, 64px); align-items: center; } .hero-copy { max-width: 620px; } .pill { display: inline-flex; align-items: center; gap: 9px; padding: 7px 15px; border-radius: 999px; background: color-mix(in srgb, var(--surface) 70%, transparent); border: 1px solid var(--border); font-size: 0.82rem; font-weight: 600; color: var(--text-70); margin-bottom: 22px; backdrop-filter: blur(8px); } .pill .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--accent-3); box-shadow: 0 0 0 4px rgba(var(--accent-rgb), 0.18); } .hero h1 { font-size: clamp(2.5rem, 6vw, 4.3rem); letter-spacing: -0.035em; margin-bottom: 20px; } .hero h1 .grad { background: linear-gradient(115deg, var(--accent-2) 10%, var(--accent-3) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-sub { font-size: clamp(1.05rem, 1.9vw, 1.32rem); color: var(--text-70); max-width: 560px; margin-bottom: 30px; } .hero-ctas { margin-bottom: 22px; } .hero-qr { display: inline-flex; align-items: center; gap: 14px; color: var(--text-50); font-size: 0.9rem; } .qr-box { width: 74px; height: 74px; border-radius: 12px; background: #fff; padding: 7px; flex: none; box-shadow: var(--shadow-sm); } .qr-box svg { width: 100%; height: 100%; display: block; } .hero-note { display: flex; align-items: flex-start; /* not center: this wraps to 3 lines on a phone and the tick drifted to the middle of the block, reading as a stray mark */ gap: 10px; margin-top: 22px; font-size: 0.9rem; color: var(--text-50); } .hero-note svg { width: 17px; height: 17px; color: var(--accent-3); flex: none; margin-top: 2px; } /* ---------- Device hardware (shared by the hero phone and the gallery frames) ---------- iPhone 17 Pro Max side controls, in hardware order: LEFT Action button (short, highest) ยท Volume Up ยท Volume Down RIGHT Side/power button (the longest single control) ยท Camera Control (lower, shorter) Positions are percentages of the body height so the same component works at 300px and at 100px. --btn is how far a control stands proud of the rail; it is the one value that needs to change between the two sizes, because a 3px protrusion on a 100px-wide frame reads as a dent. */ .rails { position: absolute; /* ๐Ÿ”ด The containing block for an absolutely positioned child is the ancestor's PADDING box, which lies just inside the BORDER and OUTSIDE the padding โ€” it is not the content box. I first wrote -12px here (border + padding) and the controls came out floating 9px clear of the body with daylight behind them; measured, not guessed. Only the border has to be backed out. */ inset: calc(var(--bw) * -1); pointer-events: none; --btn: 3px; /* ~0.8mm at this scale โ€” real buttons barely stand proud */ --bw: 1px; /* the frame's border-width */ --btn-face: linear-gradient(180deg, #7c7c88, #55555f 45%, #33333c); } .rails i { position: absolute; display: block; width: calc(var(--btn) + 2px); /* +2px tucks under the body so there is no seam */ background: var(--btn-face); /* The tiny outer highlight is what sells it as milled metal rather than a painted tab. */ box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.22), 0 1px 2px rgba(0, 0, 0, 0.4); } .rails .b-act, .rails .b-vup, .rails .b-vdn { left: calc(var(--btn) * -1); border-radius: 2px 0 0 2px; } .rails .b-side, .rails .b-cam { right: calc(var(--btn) * -1); border-radius: 0 2px 2px 0; } /* ๐Ÿ”ด MEASURED, not eyeballed. Taken off the dimensioned side elevations in dimensions.com's iPhone 17 Pro Max drawing (1058px = 163.4mm, 6.475 px/mm), by connected-component analysis of the button contours. My first pass was estimated and the founder spotted it immediately: every control sat ~4% too high, and Camera Control was at 38.5% when it belongs at 62.4% โ€” I had put it just under the side button when on the real device it sits about two-thirds of the way down. control from top length Action 30.9 mm 7.9 mm Volume Up 42.6 mm 12.2 mm Volume Down 56.8 mm 12.2 mm Side button 46.3 mm 18.7 mm Camera Control 101.9 mm 19.5 mm */ .rails .b-act { top: 18.9%; height: 4.82%; } .rails .b-vup { top: 26.1%; height: 7.47%; } .rails .b-vdn { top: 34.8%; height: 7.47%; } .rails .b-side { top: 28.4%; height: 11.44%; } /* Camera Control is a flush, glass-topped capacitive control rather than a clicky button โ€” the drawing shows it 5.1mm deep against the buttons' 3.2mm, and it reads glassier. */ .rails .b-cam { top: 62.4%; height: 11.91%; background: linear-gradient(180deg, #8e8e9c, #5c5c68); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.30); } /* ---------- Phone mockup ---------- */ .hero-visual { display: flex; justify-content: center; position: relative; } .phone { position: relative; width: 300px; max-width: 78vw; aspect-ratio: 780 / 1634; /* 78 x 163.4mm โ€” the real body proportion */ border-radius: 46px; /* Two layers: a thin bright line down each extreme edge (the titanium band catching light), over the body gradient. Without it the frame reads as a flat black rectangle. */ background: linear-gradient(90deg, rgba(255,255,255,0.26) 0 1.5px, transparent 1.5px calc(100% - 1.5px), rgba(255,255,255,0.26) calc(100% - 1.5px)), linear-gradient(160deg, #24242c, #0d0d10); padding: 11px; box-shadow: var(--shadow), 0 0 0 2px rgba(255,255,255,0.04) inset; border: 1px solid rgba(255, 255, 255, 0.08); } .phone::before { /* dynamic island */ content: ""; position: absolute; top: 20px; left: 50%; transform: translateX(-50%); width: 96px; height: 27px; background: #000; border-radius: 999px; z-index: 3; } .phone-screen { width: 100%; height: 100%; border-radius: 35px; /* concentric with the 46px body at 11px padding */ overflow: hidden; background: linear-gradient(180deg, #f8f9fa 0%, #f1f3f4 100%); color: #202124; display: flex; flex-direction: column; position: relative; } .ps-status { display: flex; align-items: center; justify-content: space-between; padding: 15px 22px 6px; font-size: 0.72rem; font-weight: 600; color: #202124; } .ps-status .dots { display: flex; gap: 4px; align-items: center; } .ps-status .dots i { width: 6px; height: 6px; border-radius: 50%; background: #202124; display: block; } .ps-header { padding: 8px 20px 14px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; margin: 6px 12px 0; border-radius: 16px 16px 6px 6px; } .ps-header .k { font-size: 0.64rem; text-transform: uppercase; letter-spacing: 0.12em; opacity: 0.85; } .ps-header .t { font-size: 1.02rem; font-weight: 700; margin-top: 2px; } .ps-header .d { font-size: 0.72rem; opacity: 0.9; margin-top: 3px; } .ps-body { padding: 12px 12px 0; overflow: hidden; flex: 1; } .ps-card { background: #fff; border: 1px solid rgba(10, 12, 20, 0.08); border-radius: 13px; padding: 12px 13px; margin-bottom: 9px; box-shadow: 0 2px 8px rgba(20, 21, 40, 0.05); } .ps-q { font-size: 0.78rem; font-weight: 650; margin-bottom: 8px; color: #202124; } .ps-opt { display: flex; align-items: center; gap: 8px; font-size: 0.72rem; color: #3a3b45; padding: 4px 0; } .ps-radio { width: 13px; height: 13px; border-radius: 50%; border: 2px solid #c4c6d2; flex: none; } .ps-opt.sel .ps-radio { border-color: var(--accent); background: radial-gradient(circle, var(--accent) 42%, #fff 46%); } .ps-opt.sel { color: #202124; font-weight: 600; } .ps-bar { height: 8px; border-radius: 6px; background: #e7e8f0; overflow: hidden; margin-top: 6px; } .ps-bar i { display: block; height: 100%; border-radius: 6px; background: linear-gradient(90deg, var(--accent), var(--accent-3)); } .ps-fab { position: absolute; right: 18px; bottom: 22px; width: 46px; height: 46px; border-radius: 50%; background: linear-gradient(135deg, var(--accent), var(--accent-2)); box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.5); display: grid; place-items: center; color: #fff; font-size: 1.4rem; font-weight: 300; z-index: 4; } /* floating chips around the phone */ .float-chip { position: absolute; background: color-mix(in srgb, var(--surface) 88%, transparent); border: 1px solid var(--border); border-radius: 13px; padding: 9px 13px; font-size: 0.8rem; font-weight: 600; color: var(--text); box-shadow: var(--shadow-sm); backdrop-filter: blur(10px); display: flex; align-items: center; gap: 8px; z-index: 5; } .float-chip .ic { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; font-size: 0.85rem; flex: none; } .float-chip.c1 { top: 46%; left: -6%; } /* 46%, not 12%: at 12% this chip sat directly on the mockup's form title ("FORMS+ / Summer Camp Sign-Up"). Moving it LEFT instead only traded that for covering the h1, so it goes down into the gap between the two cards. A/B'd at 12/46/58. */ .float-chip.c1 .ic { background: rgba(var(--accent-rgb), 0.16); color: var(--accent); } .float-chip.c2 { bottom: 20%; right: -8%; } .float-chip.c2 .ic { background: rgba(var(--accent-rgb), 0.12); color: var(--accent-2); } .float-chip.c3 { bottom: 4%; left: 2%; } .float-chip.c3 .ic { background: rgba(var(--accent-rgb), 0.09); color: var(--accent-3); } @media (prefers-reduced-motion: no-preference) { .phone { animation: floaty 6s ease-in-out infinite; } .float-chip.c1 { animation: floaty 5s ease-in-out infinite; } .float-chip.c2 { animation: floaty 7s ease-in-out 0.5s infinite; } .float-chip.c3 { animation: floaty 6.5s ease-in-out 1s infinite; } @keyframes floaty { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-11px); } } } /* ---------- Trust / social-proof strip ---------- */ .trust { border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); background: var(--bg-2); } .trust-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 22px; padding-block: 26px; } .trust-item { display: flex; align-items: center; gap: 12px; } .trust-num { font-size: 1.55rem; font-weight: 750; letter-spacing: -0.02em; } .trust-label { font-size: 0.86rem; color: var(--text-50); max-width: 150px; line-height: 1.3; } .stars { display: inline-flex; gap: 2px; color: var(--amber); } .stars svg { width: 17px; height: 17px; } .trust-divider { width: 1px; height: 38px; background: var(--border); } /* ---------- Wedge band ---------- */ .wedge { background: radial-gradient(700px 300px at 85% 20%, rgba(var(--accent-rgb), 0.14), transparent 60%), var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: clamp(30px, 5vw, 54px); margin-block: clamp(40px, 6vw, 72px); display: grid; grid-template-columns: 1.4fr 1fr; gap: 34px; align-items: center; } .wedge h2 { font-size: clamp(1.7rem, 3.6vw, 2.5rem); } .wedge p { color: var(--text-70); margin-bottom: 0; max-width: 560px; } .wedge-side { border-left: 1px solid var(--border); padding-left: 30px; } .wedge-side ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 14px; } .wedge-side li { display: flex; gap: 11px; align-items: flex-start; font-size: 0.96rem; color: var(--text-70); } .wedge-side .tick { width: 21px; height: 21px; border-radius: 50%; flex: none; margin-top: 1px; background: rgba(var(--accent-rgb), 0.16); color: var(--accent-3); display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; } /* ---------- Value pillars ---------- */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; } .pillar { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px 26px; transition: transform 0.22s var(--ease), border-color 0.22s var(--ease); } .pillar:hover { transform: translateY(-4px); border-color: var(--border-strong); } .pillar .p-ic { width: 50px; height: 50px; border-radius: 14px; display: grid; place-items: center; font-size: 1.4rem; margin-bottom: 18px; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.22), rgba(var(--accent-rgb), 0.18)); } .pillar h3 { font-size: 1.22rem; } .pillar p { color: var(--text-70); margin-bottom: 0; font-size: 0.98rem; } /* ---------- Feature rows (alternating) ---------- */ .feature-rows { display: grid; gap: clamp(48px, 7vw, 96px); } .frow { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 68px); align-items: center; } .frow:nth-child(even) .frow-media { order: -1; } .frow-copy .f-tag { display: inline-block; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent-2); margin-bottom: 12px; } .frow-copy h3 { font-size: clamp(1.5rem, 3vw, 2.1rem); } .frow-copy p { color: var(--text-70); font-size: 1.05rem; max-width: 500px; } .frow-list { list-style: none; margin: 18px 0 0; padding: 0; display: grid; gap: 11px; } .frow-list li { display: flex; gap: 11px; align-items: flex-start; color: var(--text-70); font-size: 0.98rem; } .frow-list .tick { width: 20px; height: 20px; border-radius: 6px; flex: none; margin-top: 2px; background: rgba(var(--accent-rgb), 0.2); color: var(--accent-2); display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; } /* Media visuals built purely with CSS */ .frow-media { display: flex; justify-content: center; } .media-card { width: 100%; border-radius: var(--radius-lg); border: 1px solid var(--border); background: radial-gradient(500px 260px at 30% 0%, rgba(var(--accent-rgb), 0.16), transparent 62%), var(--surface); padding: 26px; box-shadow: var(--shadow); min-height: 320px; display: flex; flex-direction: column; gap: 14px; position: relative; overflow: hidden; } .mc-top { display: flex; align-items: center; gap: 8px; color: var(--text-50); font-size: 0.8rem; } .mc-top .win { display: flex; gap: 5px; } .mc-top .win i { width: 9px; height: 9px; border-radius: 50%; background: var(--border-strong); display: block; } .mc-line { height: 10px; border-radius: 6px; background: var(--surface-2); } .mc-line.w80 { width: 80%; } .mc-line.w60 { width: 60%; } .mc-line.w40 { width: 40%; } .mc-pill { align-self: flex-start; padding: 6px 12px; border-radius: 999px; font-size: 0.76rem; font-weight: 650; background: rgba(var(--accent-rgb), 0.18); color: var(--accent-2); } .mc-chatline { display: flex; gap: 9px; align-items: flex-start; font-size: 0.86rem; color: var(--text-70); } .mc-chatline .who { width: 26px; height: 26px; border-radius: 8px; flex: none; display: grid; place-items: center; font-size: 0.72rem; font-weight: 800; } .mc-chatline .who.ai { background: linear-gradient(135deg, var(--accent), var(--accent-3)); color: #fff; } .mc-chatline .who.you { background: var(--surface-2); color: var(--text-70); } .mc-bubble { background: var(--surface-2); border-radius: 12px; padding: 9px 12px; border: 1px solid var(--border); } /* mini bar chart */ .mc-chart { display: flex; align-items: flex-end; gap: 10px; height: 130px; padding-top: 8px; } .mc-chart .bar { flex: 1; border-radius: 8px 8px 3px 3px; background: linear-gradient(180deg, var(--accent-2), var(--accent)); position: relative; } .mc-chart .bar:nth-child(2) { background: linear-gradient(180deg, var(--accent-3), var(--accent-2)); } .mc-chart .bar:nth-child(4) { background: linear-gradient(180deg, #d1c4e9, var(--accent-3)); } /* QR block */ .mc-qr { width: 108px; height: 108px; background: #fff; border-radius: 14px; padding: 10px; align-self: center; box-shadow: var(--shadow-sm); } .mc-qr svg { width: 100%; height: 100%; } .mc-stepper { display: flex; align-items: center; justify-content: space-between; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 10px 14px; font-size: 0.9rem; } .mc-stepper .qty { display: flex; align-items: center; gap: 14px; } .mc-stepper .qbtn { width: 26px; height: 26px; border-radius: 8px; background: var(--surface); border: 1px solid var(--border); display: grid; place-items: center; font-weight: 700; } .mc-total { display: flex; justify-content: space-between; font-weight: 700; padding-top: 4px; } .mc-cert { border: 2px solid var(--amber); border-radius: 12px; padding: 16px; text-align: center; background: rgba(255,182,72,0.06); } .mc-cert .seal { font-size: 1.8rem; } .mc-cert .ct { font-weight: 700; margin-top: 6px; } .mc-cert .cs { font-size: 0.78rem; color: var(--text-50); } /* ---------- Bento (feature grid) ---------- */ .bento { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: minmax(150px, auto); gap: 18px; } .bento-cell { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 24px; display: flex; flex-direction: column; gap: 10px; transition: transform 0.2s var(--ease), border-color 0.2s var(--ease), background 0.2s var(--ease); overflow: hidden; position: relative; } .bento-cell:hover { transform: translateY(-3px); border-color: var(--border-strong); } .bento-cell .b-ic { width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; font-size: 1.2rem; background: linear-gradient(135deg, rgba(var(--accent-rgb), 0.2), rgba(var(--accent-rgb), 0.16)); } .bento-cell h3 { font-size: 1.1rem; margin: 0; } .bento-cell p { color: var(--text-70); font-size: 0.92rem; margin: 0; } .bento-cell.span-3 { grid-column: span 3; } .bento-cell.span-2 { grid-column: span 2; } .bento-cell.tall { grid-row: span 2; } .bento-cell.feature { background: radial-gradient(400px 220px at 100% 0%, rgba(var(--accent-rgb), 0.16), transparent 60%), linear-gradient(160deg, var(--surface-2), var(--surface)); } .bento-cell.feature h3 { font-size: 1.35rem; } /* ---------- How it works ---------- */ .steps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; counter-reset: step; } .step { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 30px 26px; position: relative; } .step .num { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; font-size: 1.2rem; font-weight: 800; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; margin-bottom: 18px; box-shadow: 0 8px 20px rgba(var(--accent-rgb), 0.4); } .step h3 { font-size: 1.25rem; } .step p { color: var(--text-70); margin-bottom: 0; } .step:not(:last-child)::after { content: "โ†’"; position: absolute; right: -18px; top: 46px; color: var(--text-35); font-size: 1.3rem; } /* ---------- AI highlight band ---------- */ .ai-band { background: radial-gradient(800px 460px at 12% 20%, rgba(var(--accent-rgb), 0.18), transparent 60%), radial-gradient(700px 500px at 90% 90%, rgba(var(--accent-rgb), 0.12), transparent 62%), linear-gradient(180deg, var(--accent-soft), var(--bg-2)); border-block: 1px solid var(--border); } /* Disabled with the palette above; re-enable together. */ [data-theme="dark"] .ai-band { background: radial-gradient(800px 460px at 12% 20%, rgba(var(--accent-rgb), 0.40), transparent 60%), radial-gradient(700px 500px at 90% 90%, rgba(var(--accent-rgb), 0.24), transparent 62%), linear-gradient(180deg, #171227, #120f1c); } .ai-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(30px, 5vw, 60px); align-items: center; } .ai-band .section-title { font-size: clamp(2rem, 4.4vw, 3.1rem); } .ai-benefits { display: grid; gap: 16px; margin-top: 26px; } .ai-benefit { display: flex; gap: 13px; align-items: flex-start; } .ai-benefit .ic { width: 38px; height: 38px; border-radius: 11px; flex: none; display: grid; place-items: center; font-size: 1.05rem; background: var(--surface); border: 1px solid var(--border); } .ai-benefit h4 { font-size: 1.05rem; margin: 0 0 3px; } .ai-benefit p { color: var(--text-70); margin: 0; font-size: 0.94rem; } .ai-demo { background: color-mix(in srgb, var(--surface) 80%, transparent); border: 1px solid var(--border-strong); border-radius: var(--radius-lg); padding: 22px; box-shadow: var(--shadow); backdrop-filter: blur(12px); } .ai-demo .prompt { background: var(--surface-2); border: 1px solid var(--border); border-radius: 13px; padding: 13px 15px; font-size: 0.92rem; color: var(--text-70); margin-bottom: 16px; display: flex; gap: 10px; align-items: center; } .ai-demo .prompt .k { color: var(--accent-2); font-weight: 700; } .ai-demo .result-head { display: flex; align-items: center; gap: 9px; font-size: 0.82rem; color: var(--text-50); margin-bottom: 12px; } .ai-demo .result-head .badge { padding: 3px 9px; border-radius: 999px; font-size: 0.72rem; font-weight: 700; background: linear-gradient(135deg, var(--accent), var(--accent-3)); color: #fff; } .ai-theme { border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; margin-bottom: 11px; background: var(--surface); } .ai-theme .th-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .ai-theme .th-name { font-weight: 650; font-size: 0.95rem; } .ai-theme .senti { font-size: 0.72rem; font-weight: 700; padding: 2px 8px; border-radius: 999px; } .ai-theme .senti.pos { background: rgba(15,157,88,0.14); color: var(--pos); } .ai-theme .senti.neg { background: rgba(217,48,37,0.12); color: var(--neg); } .ai-theme .quote { font-size: 0.85rem; color: var(--text-50); font-style: italic; } /* ---------- Gallery ---------- */ .gallery-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 232px; gap: 20px; overflow-x: auto; padding-bottom: 18px; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: thin; } .gallery-scroll::-webkit-scrollbar { height: 8px; } .gallery-scroll::-webkit-scrollbar-thumb { background: var(--surface-2); border-radius: 8px; } .shot { scroll-snap-align: start; } .shot-frame { position: relative; /* was static: the rails and island anchor to it */ border-radius: 32px; background: linear-gradient(90deg, rgba(255,255,255,0.22) 0 1px, transparent 1px calc(100% - 1px), rgba(255,255,255,0.22) calc(100% - 1px)), linear-gradient(160deg, #23232b, #0d0d10); padding: 9px; border: 1px solid rgba(255,255,255,0.07); box-shadow: var(--shadow); aspect-ratio: 780 / 1634; /* 78 x 163.4mm โ€” matches the hero phone */ } .shot-frame .rails { --btn: 2px; } .shot-frame::before { /* dynamic island โ€” these frames had none at all */ content: ""; position: absolute; top: 15px; left: 50%; transform: translateX(-50%); width: 34%; height: 11px; background: #000; border-radius: 999px; z-index: 3; } .shot-inner { width: 100%; height: 100%; border-radius: 23px; /* concentric with the 32px body at 9px padding */ overflow: hidden; display: flex; flex-direction: column; color: #202124; position: relative; } .shot-cap { margin-top: 14px; font-size: 0.88rem; color: var(--text-70); text-align: center; padding-inline: 6px; line-height: 1.4; } /* shot themes */ .sh-a { background: linear-gradient(180deg, #f8f9fa, #e8eaed); } .sh-b { background: linear-gradient(180deg, #101018, #1a1a28); color: #eef; } .sh-c { background: linear-gradient(180deg, #f7f4ff, #ece4fa); } .sh-d { background: linear-gradient(180deg, #f0eaff, #ddd2f6); } .sh-e { background: linear-gradient(180deg, #e8e0fa, #d3c4f0); } .shot-top { padding: 16px 16px 8px; font-size: 0.7rem; font-weight: 700; opacity: 0.7; letter-spacing: 0.08em; text-transform: uppercase; } .shot-hero { padding: 4px 16px 12px; } .shot-hero .big { font-size: 1.15rem; font-weight: 750; letter-spacing: -0.02em; line-height: 1.15; } .shot-hero .small { font-size: 0.74rem; opacity: 0.7; margin-top: 5px; } .shot-rows { padding: 6px 14px; display: grid; gap: 8px; } .shot-rows .r { background: rgba(255,255,255,0.6); border-radius: 10px; height: 34px; } .sh-b .shot-rows .r { background: rgba(255,255,255,0.08); } .shot-chart { display: flex; align-items: flex-end; gap: 7px; height: 90px; padding: 10px 16px; } .shot-chart i { flex: 1; border-radius: 6px 6px 2px 2px; background: currentColor; opacity: 0.55; } .shot-badge { margin: auto 16px 20px; padding: 10px; border-radius: 12px; text-align: center; background: rgba(0,0,0,0.06); font-size: 0.78rem; font-weight: 650; } .sh-b .shot-badge { background: rgba(255,255,255,0.08); } .gallery-hint { text-align: center; font-size: 0.85rem; color: var(--text-35); margin-top: 6px; } /* ---------- Testimonials ---------- */ .tgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .tcard { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 26px; display: flex; flex-direction: column; gap: 14px; } .tcard .stars svg { width: 15px; height: 15px; } .tcard blockquote { margin: 0; font-size: 1.02rem; color: var(--text); line-height: 1.55; } .tcard .who { display: flex; align-items: center; gap: 12px; margin-top: auto; } .tcard .av { width: 42px; height: 42px; border-radius: 50%; flex: none; display: grid; place-items: center; font-weight: 700; color: #fff; } .tcard .who .n { font-weight: 650; font-size: 0.95rem; } .tcard .who .r { font-size: 0.82rem; color: var(--text-50); } /* ---------- Pricing ---------- */ .pricing-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 22px; max-width: 860px; margin-inline: auto; } .plan { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); padding: 32px 30px; display: flex; flex-direction: column; } .plan.pro { border-color: var(--accent); background: radial-gradient(500px 300px at 100% 0%, rgba(var(--accent-rgb), 0.2), transparent 60%), var(--surface); position: relative; } .plan .badge-pro { position: absolute; top: 20px; right: 20px; font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; padding: 4px 11px; border-radius: 999px; background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: #fff; } .plan h3 { font-size: 1.35rem; } .plan .price { font-size: 2.4rem; font-weight: 800; letter-spacing: -0.03em; margin: 6px 0 2px; } .plan .price small { font-size: 0.95rem; font-weight: 500; color: var(--text-50); } .plan .price-note { color: var(--text-50); font-size: 0.9rem; margin-bottom: 20px; } .plan ul { list-style: none; margin: 0 0 26px; padding: 0; display: grid; gap: 12px; } .plan li { display: flex; gap: 11px; align-items: flex-start; color: var(--text-70); font-size: 0.96rem; } .plan li .tick { width: 20px; height: 20px; border-radius: 6px; flex: none; margin-top: 1px; display: grid; place-items: center; font-size: 0.7rem; font-weight: 800; background: rgba(var(--accent-rgb), 0.2); color: var(--accent-2); } .plan .btn { margin-top: auto; width: 100%; } .pricing-foot { text-align: center; color: var(--text-50); font-size: 0.92rem; margin-top: 26px; } /* ---------- FAQ ---------- */ .faq { max-width: 800px; margin-inline: auto; } .faq-item { border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); margin-bottom: 12px; overflow: hidden; } .faq-q { width: 100%; text-align: left; background: transparent; border: none; color: var(--text); font-family: inherit; font-size: 1.04rem; font-weight: 600; padding: 20px 22px; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .faq-q .chev { width: 26px; height: 26px; flex: none; border-radius: 8px; background: var(--surface-2); display: grid; place-items: center; transition: transform 0.25s var(--ease); font-size: 1rem; color: var(--text-70); } .faq-item.open .faq-q .chev { transform: rotate(45deg); color: var(--accent-2); } .faq-a { max-height: 0; overflow: hidden; transition: max-height 0.3s var(--ease); } .faq-a-inner { padding: 0 22px 20px; color: var(--text-70); } .faq-a-inner p { margin: 0; } /* ---------- Final CTA ---------- */ .final-cta { text-align: center; background: radial-gradient(700px 380px at 50% 0%, rgba(var(--accent-rgb), 0.35), transparent 62%), var(--bg-2); border-top: 1px solid var(--border); } .final-cta h2 { font-size: clamp(2rem, 5vw, 3.4rem); max-width: 760px; margin-inline: auto; } .final-cta p { color: var(--text-70); font-size: 1.15rem; max-width: 560px; margin-inline: auto; margin-bottom: 28px; } .final-cta .cta-row { justify-content: center; } /* ---------- Footer ---------- */ .footer { background: var(--bg); border-top: 1px solid var(--border); padding-block: 56px 30px; } .footer-grid { display: grid; grid-template-columns: 1.6fr repeat(3, 1fr); gap: 34px; margin-bottom: 40px; } .footer-brand .brand { margin-bottom: 14px; } .footer-brand p { color: var(--text-50); max-width: 300px; font-size: 0.94rem; } .footer-col h4 { font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-35); margin-bottom: 14px; } .footer-col ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .footer-col a { color: var(--text-70); font-size: 0.94rem; transition: color 0.16s var(--ease); } .footer-col a:hover { color: var(--text); } .footer-bottom { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px; padding-top: 26px; border-top: 1px solid var(--border); color: var(--text-50); font-size: 0.86rem; } .footer-bottom .disclaimer { max-width: 640px; line-height: 1.5; } .footer-social { display: flex; gap: 12px; } .footer-social a { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); display: grid; place-items: center; color: var(--text-70); } .footer-social a:hover { color: var(--text); border-color: var(--border-strong); } .footer-social svg { width: 18px; height: 18px; } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity 0.7s var(--ease), transform 0.7s var(--ease); will-change: opacity, transform; } .reveal.in { opacity: 1; transform: none; } .reveal.d1 { transition-delay: 0.06s; } .reveal.d2 { transition-delay: 0.12s; } .reveal.d3 { transition-delay: 0.18s; } .reveal.d4 { transition-delay: 0.24s; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .phone, .float-chip { animation: none !important; } } /* ---------- Responsive ---------- */ @media (max-width: 980px) { .hero-inner { grid-template-columns: 1fr; } .hero-copy { max-width: 640px; } .hero-visual { margin-top: 26px; } .float-chip.c1 { left: 2%; } .float-chip.c2 { right: 2%; } .ai-grid { grid-template-columns: 1fr; } .wedge { grid-template-columns: 1fr; } .wedge-side { border-left: none; padding-left: 0; border-top: 1px solid var(--border); padding-top: 24px; } .pillars { grid-template-columns: 1fr; } .steps { grid-template-columns: 1fr; } .step:not(:last-child)::after { content: "โ†“"; right: auto; left: 46px; top: auto; bottom: -18px; } .tgrid { grid-template-columns: 1fr; } .bento-cell.span-3, .bento-cell.span-2 { grid-column: span 6; } .bento-cell.tall { grid-row: auto; } .frow { grid-template-columns: 1fr; } .frow:nth-child(even) .frow-media { order: 0; } .footer-grid { grid-template-columns: 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } } @media (max-width: 720px) { /* ๐Ÿ”ด A QR CODE IS USELESS ON THE DEVICE DISPLAYING IT. "Scan to install on iPhone & iPad" next to a QR, shown to someone already holding an iPhone, cannot be actioned โ€” they cannot point the phone at its own screen. It read as a mistake on the founder's device. The App Store badge directly above it is the install path on mobile, so nothing is lost by hiding this. */ .hero-qr { display: none; } /* The floating chips are positioned over the phone mockup. There is room for that beside a centred phone on a tablet, but at 390pt they land on top of the mockup's own cards โ€” the "AI drafted 8 questions" chip covered the response bar. They are decorative and every one of them repeats a claim the page makes in copy further down, so hide rather than reflow. */ .float-chip { display: none; } .nav-links, .nav-actions .nav-cta { display: none; } .nav-toggle { display: flex; } .nav.open .nav-links { display: flex; position: absolute; top: 66px; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: blur(16px); border-bottom: 1px solid var(--border); padding: 10px 22px 18px; } .nav.open .nav-links a { padding: 13px 4px; border-bottom: 1px solid var(--border); font-size: 1.02rem; } .nav.open .nav-links li:last-child a { border-bottom: none; } .pricing-grid { grid-template-columns: 1fr; } .trust-divider { display: none; } .trust-inner { justify-content: center; text-align: center; gap: 26px; } .wedge-side { } } @media (max-width: 460px) { .container { padding-inline: 18px; } .footer-grid { grid-template-columns: 1fr; } /* The App Store badge keeps its intrinsic size โ€” it is a fixed-proportion Apple asset and stretching it across the viewport made it look broken. */ .hero-qr { flex-direction: row; } }