/* Cymata landing — dark theme inspired by reference layout */ :root { --bg: #000000; --surface: #0a0a0a; --text: #ffffff; --muted: #a3a3a3; --border: #262626; --accent: #02fdff; --accent-dim: rgba(2, 253, 255, 0.85); --ring: rgba(255, 255, 255, 0.1); /* ~max-w-screen-xl / wide container — reference-style breathing room */ --max: 96rem; /* * Screen opening vs assets/iphone-frame.png bezel. Default X suits mixed assets; * hero parallax overrides for 828×1792 captures so the hole matches screenshot AR (flush + fill). */ --phone-frame-inset-x: 5.2%; --phone-frame-inset-top: calc(6.8% - 2px); --phone-frame-inset-bottom: calc(6.8% - 2px); /* Raster frame intrinsic ratio (450×920 PNG) */ --phone-aspect-raster: 450 / 920; /* * Screen corner radius on assets/iphone-frame.png ≈ (this × full frame width 450px). * Used with matched x/y % so the clip is circular when scaled (single 11.5% was elliptical → corner gaps). */ --phone-corner-frac: 0.118; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; background: var(--bg); color: var(--text); line-height: 1.5; -webkit-font-smoothing: antialiased; } /* WebGL CA (assets/ca-background.js): DOM zones → rule map; data-ca-sync / data-ca-rule on nodes */ /* Plain black: — hide canvas before deferred JS runs (no flash). */ html[data-ca-bg="off"] #ca-bg { display: none !important; } #ca-bg { position: fixed; inset: 0; z-index: 0; width: 100%; height: 100%; pointer-events: none; display: block; image-rendering: pixelated; } a { color: inherit; text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; height: auto; vertical-align: middle; } .site-main { position: relative; z-index: 1; min-height: 100vh; display: flex; flex-direction: column; } /* Hero scene: sticky copy + parallax phones (JS in assets/hero-parallax.js) */ .hero-scene { position: relative; overflow-x: hidden; /* Transparent so cellular automata (#ca-bg) shows through */ background: transparent; /* In-flow height sets the parallax clip box (parallax-root is absolute + overflow hidden); keep tall enough for two phone rows + parallax motion */ min-height: clamp(138vh, 158vh, 2200px); } .hero-scene__ambient { position: absolute; inset: 0; height: min(140vh, 1200px); /* Translucent vignette — CA visible behind parallax band */ background: radial-gradient( ellipse 85% 65% at 50% 0%, rgba(17, 17, 17, 0.45) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0.2) 70%, transparent 100% ); pointer-events: none; z-index: 0; } .hero-scene__parallax-root { position: absolute; inset: 0; z-index: 1; overflow: hidden; pointer-events: none; } @media (max-width: 1099px) { .hero-scene__parallax-root { pointer-events: auto; } } .hero-scene__parallax-layer { position: absolute; left: 0; right: 0; /* Clear sticky hero (icon + title + sub + App Store badge) before first phone row */ top: calc(clamp(32vh, 38vw, 48vh) + clamp(10rem, 24vh, 18rem)); display: flex; flex-direction: column; align-items: center; gap: clamp(0.75rem, 2vw, 1.25rem); will-change: transform; } /* Full row height + gap (300×920/450 tall); min offset so mobile rows don’t overlap */ .hero-scene__parallax-layer--slow { top: calc( clamp(32vh, 38vw, 48vh) + clamp(10rem, 24vh, 18rem) + 20px + clamp(24rem, 62vmin, 42rem) + clamp(0.75rem, 2.5vmin, 1.5rem) ); } /* Phone / small tablet: extra clearance under App Store; tighten hero → “Paint with sound” */ @media (max-width: 1023px) { .hero-scene__parallax-layer { top: calc(clamp(32vh, 38vw, 48vh) + clamp(10rem, 24vh, 18rem) + 50px); } .hero-scene__parallax-layer--slow { top: calc( clamp(32vh, 38vw, 48vh) + clamp(10rem, 24vh, 18rem) + 50px + 20px + clamp(24rem, 62vmin, 42rem) + clamp(0.75rem, 2.5vmin, 1.5rem) ); } .hero-scene__spacer { min-height: clamp(18vh, 26vh, 280px); } } .hero-scene__sticky { position: sticky; top: 0; z-index: 3; padding: 2rem 1rem clamp(6rem, 18vw, 10rem); /* Translucent so CA shows behind title + App Store row */ background: linear-gradient( 180deg, rgba(0, 0, 0, 0.78) 0%, rgba(0, 0, 0, 0.58) 38%, rgba(0, 0, 0, 0.42) 55%, rgba(0, 0, 0, 0.22) 75%, transparent 100% ); } .hero-scene__spacer { min-height: clamp(95vh, 115vh, 1200px); pointer-events: none; } .hero-inner { position: relative; max-width: var(--max); margin: 0 auto; padding-left: 1rem; padding-right: 1rem; } @media (min-width: 640px) { .hero-inner { padding-left: 1.5rem; padding-right: 1.5rem; } } @media (min-width: 1024px) { .hero-inner { padding-left: 2rem; padding-right: 2rem; } } .hero-wordmark { display: flex; justify-content: center; width: 100%; max-width: 100%; margin: 0 auto 1.75rem; } .hero-wordmark__img { display: block; width: min(100%, 40rem); height: auto; object-fit: contain; filter: drop-shadow(0 12px 28px rgba(0, 0, 0, 0.55)); } .hero-text { text-align: center; } .hero-title { font-size: clamp(2.25rem, 5vw, 4.5rem); font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; margin: 0; } .hero-title .line1 { display: block; color: var(--text); text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 28px rgba(0, 0, 0, 0.55); } .hero-title .line2 { display: block; color: var(--accent-dim); margin-top: 0.125em; text-shadow: 0 1px 3px rgba(0, 0, 0, 0.9), 0 0 28px rgba(0, 0, 0, 0.55); } .hero-sub { max-width: 42rem; margin: 1.5rem auto 0; font-size: 1.125rem; color: #d4d4d4; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.95); } @media (min-width: 640px) { .hero-sub { font-size: 1.25rem; } } .cta-row { margin-top: 2.5rem; display: flex; justify-content: center; } .app-store-badge { height: 88px; width: auto; display: block; } .app-store-link { display: inline-block; line-height: 0; } .app-store-link:hover { opacity: 0.92; text-decoration: none; } /* Phone mockup — base (size set by --showcase vs --feature modifiers) */ .phone-mockup { position: relative; flex-shrink: 0; aspect-ratio: var(--phone-aspect-raster); } .phone-mockup--raster-frame { aspect-ratio: var(--phone-aspect-raster); } .phone-mockup__screen { position: absolute; left: var(--phone-frame-inset-x); right: var(--phone-frame-inset-x); top: var(--phone-frame-inset-top); bottom: var(--phone-frame-inset-bottom); /* * Elliptical /% shorthand: first value is % of box width, second is % of height. * Equal pixel radius on width vs height matches circular glass in the frame asset. * Denominators: inner width = (1 − 2×5.2%) of phone width; inner height = (920/450)×(1 − 2×6.8%) of phone width. */ border-radius: calc(var(--phone-corner-frac) / 0.896 * 100%) / calc(var(--phone-corner-frac) / (920 / 450 * 0.864) * 100%); overflow: hidden; background: #000; transform: translateZ(0); } .phone-mockup__screen img { width: 100%; height: 100%; object-fit: cover; object-position: center center; display: block; } /* * Hero parallax screenshots: ref / export size ≈1320×2868; assets ≈1325×2868 (same aspect). * Shorter top/bottom inset makes the screen hole taller; horizontal stays at frame bezel (5.2%). * calc(2.57% − 2px) top/bottom → +4px screen height vs plain 2.57% (parallax + feature rows). * Inner aspect (450×920 frame) then matches 1325/2868 → object-fit: fill is flush, no short crop. */ .hero-scene__showcase .phone-mockup--raster-frame.phone-mockup--showcase { --phone-frame-inset-x: 5.2%; --phone-frame-inset-top: calc(2.57% - 2px); --phone-frame-inset-bottom: calc(2.57% - 2px); } /* Same circular corner in px; vertical inset is 2×calc(2.57% − 2px) (not 6.8%). */ .hero-scene__showcase .phone-mockup--raster-frame.phone-mockup--showcase .phone-mockup__screen { border-radius: calc(var(--phone-corner-frac) / 0.896 * 100%) / calc(var(--phone-corner-frac) / (920 / 450 * 0.9486) * 100%); } .hero-scene__showcase .phone-mockup--raster-frame.phone-mockup--showcase .phone-mockup__screen img { width: 100%; height: 100%; object-fit: fill; object-position: center center; transform: none; } /* Feature rows: same frame insets + fill as hero so 828×1792 PNGs scale to the larger mockups */ .feature-rows .phone-mockup--raster-frame.phone-mockup--feature { --phone-frame-inset-x: 5.2%; --phone-frame-inset-top: calc(2.57% - 2px); --phone-frame-inset-bottom: calc(2.57% - 2px); } .feature-rows .phone-mockup--raster-frame.phone-mockup--feature .phone-mockup__screen { border-radius: calc(var(--phone-corner-frac) / 0.896 * 100%) / calc(var(--phone-corner-frac) / (920 / 450 * 0.9486) * 100%); } .feature-rows .phone-mockup--raster-frame.phone-mockup--feature .phone-mockup__screen img { width: 100%; height: 100%; object-fit: fill; object-position: center center; transform: none; } .phone-mockup__frame { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; pointer-events: none; } /* Hero grid — reference-scale phones (+10px vs prior step) */ .phone-mockup--showcase { width: min(230px, 46vw); scroll-snap-align: center; } @media (min-width: 640px) { .phone-mockup--showcase { width: min(270px, 38vw); } } @media (min-width: 768px) { .phone-mockup--showcase { width: min(290px, 24vw); } } @media (min-width: 1280px) { .phone-mockup--showcase { width: min(310px, 19vw); } } /* Feature rows — larger device vs prior (reference ~half row, bigger frame) */ .phone-mockup--feature { width: min(320px, 82vw); } @media (min-width: 640px) { .phone-mockup--feature { width: min(350px, 58vw); } } @media (min-width: 1024px) { /* Don’t use % of parent width — flex column was shrinking and 100% collapsed the phone */ .phone-mockup--feature { width: min(440px, 52vw); max-width: 480px; } } /* Showcase matrix (hero parallax + optional static use) */ .hero-scene__showcase.showcase-matrix, .showcase-matrix { display: flex; flex-direction: column; align-items: center; gap: clamp(0.75rem, 2vw, 1.5rem); padding: 0 1rem; max-width: 112rem; margin: 0 auto; width: 100%; } /* Parallax layer is flex + align-items:center — without this, the row shrink-wraps and never uses full width */ .hero-scene__parallax-layer .hero-scene__showcase.showcase-matrix { align-self: stretch; max-width: none; padding-inline: clamp(0.35rem, 1.75vw, 1rem); } .showcase { position: relative; padding: 0 0 clamp(2rem, 5vw, 4rem); overflow: hidden; } .showcase-matrix__row { display: flex; flex-wrap: nowrap; justify-content: flex-start; gap: clamp(0.5rem, 1.5vw, 1rem); width: 100%; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding-inline: 1rem; -webkit-overflow-scrolling: touch; padding-bottom: 0.5rem; mask-image: linear-gradient(to right, transparent, #000 10px, #000 calc(100% - 10px), transparent); } /* UA stylesheet gives figure ~40px side margins — reads as huge gutters next to gap */ .showcase-matrix__row figure { margin: 0; } .hero-scene__showcase .showcase-matrix__row { gap: clamp(0.3rem, 1.25vw, 0.55rem); } /* Hero phones: infinite horizontal marquee on smaller viewports (duplicated row via hero-parallax.js) */ @keyframes hero-marquee-shift-left { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(calc(-1 * var(--hero-marquee-shift, 800px)), 0, 0); } } @keyframes hero-marquee-shift-right { from { transform: translate3d(calc(-1 * var(--hero-marquee-shift, 800px)), 0, 0); } to { transform: translate3d(0, 0, 0); } } @media (max-width: 1199px) { .hero-scene__showcase .showcase-matrix__row--marquee { overflow-x: hidden; scroll-snap-type: none; padding-bottom: 0.35rem; } .hero-scene__showcase .showcase-matrix__marquee-track { display: flex; width: max-content; gap: clamp(0.3rem, 1.25vw, 0.55rem); will-change: transform; animation: hero-marquee-shift-left 38s linear infinite; } .hero-scene__showcase .showcase-matrix__row--marquee-right .showcase-matrix__marquee-track { animation-name: hero-marquee-shift-right; animation-duration: 34s; } .hero-scene__showcase .showcase-matrix__row--marquee-left .showcase-matrix__marquee-track { animation-duration: 42s; } .hero-scene__showcase .showcase-matrix__marquee-group { display: flex; flex-wrap: nowrap; flex-shrink: 0; align-items: flex-start; gap: clamp(0.3rem, 1.25vw, 0.55rem); } } @media (max-width: 1199px) and (prefers-reduced-motion: reduce) { .hero-scene__showcase .showcase-matrix__marquee-track { animation: none !important; transform: none !important; will-change: auto; } .hero-scene__showcase .showcase-matrix__row--marquee { overflow-x: auto; scroll-snap-type: x mandatory; } } @media (min-width: 1200px) { .hero-scene__showcase .showcase-matrix__row--marquee .showcase-matrix__marquee-track { display: contents; animation: none; transform: none; will-change: auto; } .hero-scene__showcase .showcase-matrix__row--marquee .showcase-matrix__marquee-group:last-child { display: none !important; } .hero-scene__showcase .showcase-matrix__row--marquee .showcase-matrix__marquee-group:first-child { display: contents; } .showcase-matrix__row { flex-wrap: wrap; justify-content: center; overflow-x: visible; mask-image: none; padding-bottom: 0; } /* Hero: 5× auto columns; row wider than viewport is centered (edges clip in overflow-x hidden) */ .hero-scene__showcase .showcase-matrix__row { display: grid; grid-template-columns: repeat(5, auto); justify-content: center; align-items: start; gap: clamp(0.45rem, 1vw, 1rem); flex-wrap: unset; } .hero-scene__showcase .showcase-matrix__row > * { min-width: 0; } .hero-scene__showcase .phone-mockup--showcase { width: 278px; } } @media (min-width: 1440px) { .hero-scene__showcase .phone-mockup--showcase { width: 296px; } } @media (min-width: 1600px) { .hero-scene__showcase .phone-mockup--showcase { width: 310px; } } /* Features intro — scale/spacing closer to reference (text-5xl / text-xl, mb-20) */ .features-intro { padding: clamp(2.5rem, 6vw, 4rem) clamp(1rem, 4vw, 2.5rem) clamp(3.5rem, 8vw, 5.5rem); border-top: 1px solid var(--border); max-width: var(--max); margin: 0 auto; } .features-intro h2 { text-align: center; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.1; margin: 0 0 clamp(1rem, 2.5vw, 1.75rem); } .features-intro .features-lead { text-align: center; color: var(--muted); font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.65; max-width: 48rem; margin: 0 auto; } .features-intro .brand-accent { color: var(--accent-dim); font-weight: 600; } @media (max-width: 1023px) { .hero-scene__sticky { padding-bottom: clamp(2.5rem, 10vw, 5rem); } .features-intro { padding-top: clamp(1.25rem, 4vw, 2rem); padding-bottom: clamp(2rem, 5vw, 3.25rem); } } /* Alternating feature rows — py-20 / gap-16 feel */ .feature-rows { padding: 0 clamp(1rem, 4vw, 2.5rem) clamp(2.5rem, 5vw, 4rem); max-width: var(--max); margin: 0 auto; } /* Full-width band between feature row 4 and Apple TV row — display headline */ .feature-rows__atv-bridge { width: 100%; border-top: 1px solid var(--border); padding: clamp(3rem, 12vmin, 6rem) clamp(1rem, 4vw, 2rem); min-height: min(50vh, 32rem); display: flex; align-items: center; justify-content: center; box-sizing: border-box; min-width: 0; } /* Match .cta-band h2 — section title scale (readable on phone; lines may wrap) */ .feature-rows__atv-bridge-title, .feature-rows__atv-bridge h2.feature-rows__atv-bridge-title { box-sizing: border-box; width: 100%; max-width: 100%; flex-shrink: 0; display: flex; flex-direction: column; align-items: stretch; gap: 0.25em; text-align: center; font-size: inherit; font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; margin: 0; padding: 0 clamp(0.5rem, 2vw, 1.5rem); } .feature-rows__atv-bridge-line { display: block; width: 100%; max-width: 100%; min-width: 0; font-size: clamp(2.25rem, 4.5vw, 3.5rem); line-height: 1.12; } .feature-row { display: flex; flex-direction: column; align-items: center; gap: clamp(2.5rem, 5vw, 3.5rem); padding: clamp(3.5rem, 8vw, 5.5rem) 0; border-top: 1px solid var(--border); } @media (min-width: 1024px) { .feature-row { flex-direction: row; /* Space between copy and phone; phone size is fixed in CSS, not squeezed by flex */ gap: clamp(3.5rem, 7vw, 6.5rem); align-items: center; padding: clamp(4.5rem, 9vw, 6.5rem) 0; justify-content: space-between; } .feature-row--reverse { flex-direction: row-reverse; } } .feature-row__copy { flex: 1 1 auto; min-width: 0; max-width: 36rem; } @media (min-width: 1024px) { .feature-row__copy { flex: 1 1 auto; width: auto; max-width: min(50rem, 100%); } } .feature-row__visual { flex-shrink: 0; display: flex; justify-content: center; align-items: center; min-width: 0; } @media (min-width: 1024px) { .feature-row__visual { flex: 0 0 auto; flex-shrink: 0; min-width: fit-content; } } /* * Apple TV row — bounded column + square panel (1:1). Overrides above: * - flex-shrink: 1 + flex-basis so the item can shrink in the row * - min-width: 0 + max-width: 100% so column layout (align-items: center) can’t * expand to the PNG’s intrinsic width (~4000px) * - smaller img width/height in HTML reduces min-content leaks in some engines */ .feature-row--panel-visual { min-width: 0; } /* Copy width: stack / tablet */ .feature-row--panel-visual .feature-row__copy { max-width: min(42rem, 100%); } /* * Desktop: grid beats flex here — flex + fit-content on .feature-row__visual was still * letting the TV bitmap dominate width; text stayed a narrow strip with a huge gutter. * Column 1 = all remaining space for copy; column 2 = small fixed slot for the image. */ @media (min-width: 1024px) { /* * Must reset `gap` shorthand from .feature-row (clamp 3.5–6.5rem) — that value was * still applying as column-gap in practice, i.e. a huge gutter between text and image. * Use `gap` longhand override, not only column-gap. */ .feature-row.feature-row--panel-visual { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 0 0.5rem; row-gap: 0; column-gap: 0.5rem; align-items: center; justify-content: start; justify-items: stretch; width: 100%; } .feature-row--panel-visual .feature-row__copy { max-width: none; min-width: 0; width: 100%; margin: 0; padding: 0; } /* TV panel: 2× phone-mockup feature footprint */ .feature-row--panel-visual .feature-row__visual { box-sizing: border-box; display: block; width: auto; max-width: min(880px, 92vw); min-width: 0; flex: unset; justify-self: start; overflow: hidden; } } /* * Stacked layout only — must stay inside max-width: 1023px. * (A later unscoped block was overriding the desktop grid rules above, so nothing changed on wide viewports.) */ @media (max-width: 1023px) { .feature-row--panel-visual .feature-row__visual { box-sizing: border-box; display: block; width: min(640px, 96vw); max-width: 100%; min-width: 0; overflow: hidden; } } @media (min-width: 640px) and (max-width: 1023px) { .feature-row--panel-visual .feature-row__visual { width: min(700px, 92vw); } } /* UA figure margins (~40px sides) read as extra gutter — same fix as .showcase-matrix__row figure */ /* Frame matches assets/TV1.PNG (2735×3201); update ratio if the asset crop changes */ .feature-row--panel-visual .feature-panel { margin: 0 auto; width: 100%; max-width: 100%; aspect-ratio: 2735 / 3201; position: relative; border-radius: 0.5rem; overflow: hidden; border: 1px solid #000; background: #000; box-shadow: none; } @media (min-width: 1024px) { .feature-row--panel-visual .feature-panel { margin: 0; width: min(880px, 92vw); max-width: 960px; } } .feature-row--panel-visual .feature-panel img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: center; display: block; } .feature-row__icon { display: inline-flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 9999px; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); } .feature-row__icon svg { width: 2.25rem; height: 2.25rem; stroke: currentColor; fill: none; } .feature-row__copy h3 { margin: 0 0 clamp(0.75rem, 1.5vw, 1.25rem); font-size: clamp(1.75rem, 3vw, 2.25rem); font-weight: 700; line-height: 1.2; } .feature-row__copy > p.lead { margin: 0 0 clamp(1.5rem, 3vw, 2.25rem); font-size: clamp(1.125rem, 2.2vw, 1.375rem); line-height: 1.65; color: #d4d4d4; } .feature-list { list-style: none; margin: 0; padding: 0; } .feature-list li { display: flex; align-items: flex-start; gap: 1rem; margin-top: clamp(1.125rem, 2.5vw, 1.5rem); font-size: clamp(1.0625rem, 1.8vw, 1.1875rem); line-height: 1.6; color: #d4d4d4; } .feature-list li:first-child { margin-top: 0; } .feature-list svg { flex-shrink: 0; width: 1.625rem; height: 1.625rem; margin-top: 0.2rem; color: var(--accent); } /* “And lots more” grid */ .extras { padding: clamp(4.5rem, 10vw, 6.5rem) clamp(1rem, 4vw, 2.5rem) clamp(5rem, 11vw, 7rem); max-width: var(--max); margin: 0 auto; } .extras h2 { text-align: center; font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 700; line-height: 1.1; margin: 0 0 clamp(2.5rem, 5vw, 4rem); } .extras-grid { display: grid; gap: clamp(2.75rem, 5vw, 4rem); grid-template-columns: 1fr; } @media (min-width: 768px) { .extras-grid { grid-template-columns: repeat(3, 1fr); gap: clamp(3rem, 5vw, 4.5rem); } } .extras-card { display: flex; flex-direction: column; align-items: center; text-align: center; } .extras-card__icon { display: flex; align-items: center; justify-content: center; width: 4.5rem; height: 4.5rem; border-radius: 9999px; background: rgba(2, 253, 255, 0.35); color: #fff; margin-bottom: clamp(1.25rem, 2.5vw, 1.75rem); } .extras-card__icon svg { width: 2.25rem; height: 2.25rem; stroke: currentColor; fill: none; } .extras-card h3 { margin: 0 0 clamp(0.65rem, 1.5vw, 1rem); font-size: clamp(1.375rem, 2.2vw, 1.75rem); font-weight: 700; } .extras-card p { margin: 0; color: var(--muted); font-size: clamp(1.0625rem, 1.8vw, 1.125rem); line-height: 1.65; max-width: 26rem; } /* CTA band */ .cta-band { padding: clamp(4.5rem, 10vw, 6.5rem) clamp(1.25rem, 4vw, 2.5rem); background: var(--accent); color: #000; } .cta-band-inner { max-width: 56rem; margin: 0 auto; text-align: center; } .cta-band h2 { margin: 0 0 clamp(1rem, 2vw, 1.5rem); font-size: clamp(2.25rem, 4.5vw, 3.5rem); font-weight: 700; text-shadow: 0 1px 1px rgba(255, 255, 255, 0.4); line-height: 1.12; } .cta-band p { margin: 0 auto clamp(1.75rem, 3vw, 2.5rem); max-width: 48rem; font-size: clamp(1.25rem, 2.4vw, 1.5rem); font-weight: 600; line-height: 1.55; } .cta-band a { color: #000; } /* Footer */ .site-footer { padding: clamp(3.5rem, 7vw, 5rem) clamp(1.25rem, 4vw, 2.5rem) 2rem; background: #000; border-top: 1px solid var(--border); margin-top: auto; } .footer-grid { max-width: var(--max); margin: 0 auto 2rem; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem 2.5rem; justify-items: center; text-align: center; } @media (min-width: 768px) { .footer-grid { grid-template-columns: repeat(3, 1fr); justify-items: start; text-align: left; } } .footer-col { width: 100%; max-width: 10rem; } .footer-col h3 { font-size: 0.9375rem; font-weight: 600; color: var(--text); margin: 0 0 1rem; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li + li { margin-top: 0.75rem; } .footer-col a { font-size: 0.9375rem; color: #d4d4d4; } .footer-col a:hover { color: var(--text); text-decoration: none; } .footer-bottom { max-width: var(--max); margin: 0 auto; padding-top: 2rem; border-top: 1px solid var(--border); text-align: center; } .footer-bottom p { margin: 0; font-size: 0.8125rem; color: var(--muted); } /* Legal pages */ .legal-page { min-height: 100vh; display: flex; flex-direction: column; } .legal-header { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border); display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 0.75rem; } .legal-header a.home { font-weight: 600; color: var(--accent-dim); } .legal-header a.home:hover { text-decoration: none; color: var(--accent); } .legal-nav { display: flex; gap: 1.25rem; font-size: 0.875rem; } .legal-nav a { color: var(--muted); } .legal-nav a:hover { color: var(--text); text-decoration: none; } .legal-body { flex: 1; max-width: 42rem; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; width: 100%; } .legal-body h1 { font-size: 2rem; margin: 0 0 0.5rem; } .legal-updated { color: var(--muted); font-size: 0.875rem; margin: 0 0 2rem; } .legal-body h2 { font-size: 1.125rem; margin: 2rem 0 0.75rem; } .legal-body p, .legal-body li { color: #d4d4d4; font-size: 0.9375rem; } .legal-body ul { padding-left: 1.25rem; } .legal-body li + li { margin-top: 0.5rem; } .notice-box { margin-top: 2rem; padding: 1rem 1.25rem; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); font-size: 0.875rem; color: var(--muted); }