/* ========================================================= BYSA® — v1 theme All design decisions live in :root so the whole identity can be re-themed by editing this one block. ========================================================= */ :root { /* --- Color --- */ --bg: #F5F4F2; /* off-white background */ --ink: #141414; /* near-black text */ --accent: #F2A6C4; /* soft pink */ --lilac: #C9B8F0; /* blob support tone */ --pearl: #FFF6EC; /* blob highlight */ --ink-soft: rgba(20, 20, 20, 0.55); --label: #9A9A9A; /* light grey for eyebrow labels */ --hairline: rgba(20, 20, 20, 0.12); /* --- Type --- */ --font-display: "Inter", system-ui, -apple-system, sans-serif; --font-brand: "Comfortaa", "Trebuchet MS", sans-serif; /* rounded, matches the logo */ --fs-display: clamp(2.6rem, 8.4vw, 8.5rem); /* fluid headline size */ --fs-nav: 0.9rem; --fs-label: 0.72rem; --fw-display: 500; /* medium headline weight */ --fw-brand: 300; /* light — Comfortaa in the hero strip */ --fw-eyebrow: 700; /* bold — "● LABEL" eyebrows */ --logo-h: 26px; /* logo height — the top bar sizes off this */ --tracking-display: -0.018em; /* barely tight — lets big type breathe */ --tracking-label: 0.18em; /* wide tracking on small caps */ --leading-display: 1.0; /* --- Space --- */ --space-xs: 0.5rem; --space-s: 1rem; --space-m: 1.5rem; --space-l: 2.5rem; --space-xl: 4rem; --gutter: clamp(1.25rem, 4vw, 4rem); --section-pad: clamp(2.75rem, 6vw, 5rem); /* one rhythm for every section */ /* --- Motion --- */ --ease-lux: cubic-bezier(0.22, 1, 0.36, 1); /* slow-out, never bouncy */ --dur-reveal: 1.1s; } /* --- Reset --- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } /* base colour lives on so the fixed light layer can sit above it but behind the content */ html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; background: var(--bg); } body { background: transparent; color: var(--ink); font-family: var(--font-display); font-size: 16px; line-height: 1.4; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* content rides above the light layer */ main, .topbar, .footer { position: relative; z-index: 1; } a { color: inherit; text-decoration: none; } /* ========================================================= BACKGROUND LIGHTS — fixed layer, drifts behind the whole site ========================================================= */ .bg-lights { position: fixed; inset: 0; z-index: 0; /* above the html background, below the content */ overflow: hidden; pointer-events: none; } .bg-blob { position: absolute; display: block; width: min(55vw, 520px); aspect-ratio: 1; border-radius: 46% 54% 43% 57% / 52% 44% 56% 48%; filter: blur(55px); opacity: 0.7; will-change: transform; } /* each light has its own colour, start point and timing so the whole field never repeats in a way the eye can catch — but fast enough to SEE */ .bg-blob--1 { top: -8%; left: -6%; background: radial-gradient(circle at 40% 40%, var(--accent), transparent 68%); animation: float-1 18s ease-in-out infinite alternate; } .bg-blob--2 { top: 24%; right: -12%; left: auto; background: radial-gradient(circle at 50% 50%, var(--lilac), transparent 66%); animation: float-2 24s ease-in-out infinite alternate; } .bg-blob--3 { bottom: 4%; left: 6%; background: radial-gradient(circle at 50% 50%, #FFD9E8, transparent 66%); animation: float-3 21s ease-in-out infinite alternate; } .bg-blob--4 { top: 52%; left: 44%; width: min(44vw, 400px); background: radial-gradient(circle at 50% 50%, var(--pearl), transparent 62%); animation: float-4 27s ease-in-out infinite alternate; } @keyframes float-1 { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(38vw, 30vh, 0) scale(1.25); } } @keyframes float-2 { 0% { transform: translate3d(0, 0, 0) scale(1.15); } 100% { transform: translate3d(-40vw, 26vh, 0) scale(0.85); } } @keyframes float-3 { 0% { transform: translate3d(0, 0, 0) scale(0.9); } 100% { transform: translate3d(34vw, -34vh, 0) scale(1.3); } } @keyframes float-4 { 0% { transform: translate3d(0, 0, 0) scale(1); } 100% { transform: translate3d(-32vw, -28vh, 0) scale(1.2); } } /* ========================================================= CUSTOM CURSOR — soft pink light Hidden by default; only switched on for real mice (fine pointer). Touchscreens keep their normal behaviour and never see it. ========================================================= */ .cursor { display: none; position: fixed; top: 0; left: 0; width: 22px; /* base size — drives both the halo and the sparkle */ height: 22px; pointer-events: none; /* never blocks clicks on what's underneath */ z-index: 9999; /* above everything, loader included */ opacity: 0; will-change: transform; transition: opacity 0.35s var(--ease-lux), width 0.4s var(--ease-lux), height 0.4s var(--ease-lux); } /* Two layers, both centred on the point: ::before = the soft blurred halo (the "lucina") ::after = the sparkle glowing inside it */ .cursor::before, .cursor::after { content: ""; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* soft diffuse pink light — bigger than the sparkle and blurred */ .cursor::before { width: 240%; height: 240%; border-radius: 50%; background: radial-gradient(circle, rgba(242, 166, 196, 0.55) 0%, rgba(242, 166, 196, 0.28) 42%, transparent 70%); filter: blur(6px); } /* the 4-point sparkle from the logo, softly glowing */ .cursor::after { width: 100%; height: 100%; background: radial-gradient(circle, rgba(242, 166, 196, 1) 0%, rgba(242, 166, 196, 0.8) 55%, rgba(242, 166, 196, 0.4) 82%, transparent 100%); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 0C12.5 6.5 17.5 11.5 24 12 17.5 12.5 12.5 17.5 12 24 11.5 17.5 6.5 12.5 0 12 6.5 11.5 11.5 6.5 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath fill='%23000' d='M12 0C12.5 6.5 17.5 11.5 24 12 17.5 12.5 12.5 17.5 12 24 11.5 17.5 6.5 12.5 0 12 6.5 11.5 11.5 6.5 12 0Z'/%3E%3C/svg%3E") center / contain no-repeat; filter: drop-shadow(0 0 3px rgba(242, 166, 196, 0.7)); /* soft glow around the tips */ } .cursor.is-visible { opacity: 1; } /* the whole light swells over clickable things */ .cursor.is-hover { width: 46px; height: 46px; } /* Only on devices with a precise pointer: hide the arrow, show the light. */ @media (hover: hover) and (pointer: fine) { .cursor { display: block; } * { cursor: none !important; } } /* Accessibility: if the OS asks for less motion, no glow trail is forced; the light still works, it just tracks instantly (handled in JS). */ /* ========================================================= LOADER ========================================================= */ .loader { position: fixed; inset: 0; /* top/right/bottom/left = 0 */ z-index: 100; background: #0C0C0C; /* futuristic black entrance */ display: flex; align-items: center; justify-content: center; transition: opacity 0.8s var(--ease-lux), visibility 0.8s; } .loader.is-done { opacity: 0; visibility: hidden; } /* the stage is sized to the logo's own proportions so the light lines up exactly with the letters */ .loader__stage { position: relative; width: min(72vw, 300px); aspect-ratio: 730 / 240; /* the cropped logo's ratio */ opacity: 0; transform: scale(0.94); animation: loader-logo-in 0.9s var(--ease-lux) 0.15s forwards; } @keyframes loader-logo-in { to { opacity: 1; transform: scale(1); } } /* the letters, dim, so the sweep of light reads as it passes over them */ .loader__mark { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; filter: brightness(0) invert(1); /* dark artwork -> white */ opacity: 0.22; } /* The pink light shows ONLY on the letters, because this box is masked by the logo shape. Inside it, a bigger element carrying the light rotates — so the bright wedge sweeps clockwise across the letterforms. Rotating a real element (transform) instead of a gradient angle works in every browser. */ .loader__sweep { position: absolute; inset: 0; overflow: hidden; /* clip the spinning light to this box */ -webkit-mask: url("assets/logo.png") center / contain no-repeat; mask: url("assets/logo.png") center / contain no-repeat; } .loader__sweep::before { content: ""; position: absolute; inset: -120%; /* oversized so it always covers the logo */ background: conic-gradient( rgba(242, 166, 196, 0) 0deg, rgba(242, 166, 196, 0) 200deg, rgba(242, 166, 196, 0.8) 285deg, #ffffff 320deg, rgba(242, 166, 196, 0.8) 350deg, rgba(242, 166, 196, 0) 360deg); animation: sweep-spin 1.8s linear infinite; /* clockwise */ } @keyframes sweep-spin { to { transform: rotate(360deg); } } /* --- Eyebrow label: pink dot + bold uppercase. One class, reused everywhere a "● LABEL" appears. --- */ /* Eyebrows use the SAME face as the body copy (Inter) at bold, so they read as part of the text. Comfortaa is still the brand font for the quiet captions in the hero strip — swap --font-display below to move it back. */ .eyebrow { font-family: var(--font-display); font-weight: var(--fw-eyebrow); font-size: var(--fs-label); letter-spacing: 0.15em; text-transform: uppercase; color: var(--ink); } /* ========================================================= TOP BAR ========================================================= */ .topbar { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; /* row layout: left | center | right */ align-items: center; justify-content: space-between; padding: 0.7rem var(--gutter); /* tight bar — height is driven by the logo */ } .wordmark { display: flex; /* removes the inline-image gap under the logo */ align-items: center; } /* Sized by HEIGHT, not width: the bar's height stays predictable no matter how wide the wordmark is. Width follows the logo's own proportions. The PNG is genuinely transparent, so it sits cleanly on any background. */ .wordmark__img { height: var(--logo-h); width: auto; display: block; } @media (min-width: 800px) { :root { --logo-h: 32px; } } .nav { display: none; /* hidden on mobile, shown ≥800px */ gap: var(--space-l); } .nav a { font-size: var(--fs-nav); font-weight: 500; position: relative; padding-bottom: 2px; } .nav a::after { /* hairline that grows on hover */ content: ""; position: absolute; left: 0; bottom: 0; height: 1px; width: 0; background: var(--accent); transition: width 0.5s var(--ease-lux); } .nav a:hover::after { width: 100%; } .pill { background: var(--ink); color: var(--bg); font-size: var(--fs-nav); font-weight: 500; padding: 0.7em 1.4em; border-radius: 999px; transition: background 0.5s var(--ease-lux), color 0.5s var(--ease-lux); } .pill:hover { background: var(--accent); color: var(--ink); } /* ========================================================= HERO ========================================================= */ .hero { position: relative; min-height: 100svh; /* svh = small viewport height, mobile-safe */ display: flex; flex-direction: column; justify-content: flex-end; padding: calc(var(--gutter) * 2.5) var(--gutter) var(--gutter); overflow: hidden; } .hero__title { font-size: var(--fs-display); font-weight: var(--fw-display); letter-spacing: var(--tracking-display); line-height: var(--leading-display); max-width: 20ch; margin-top: auto; margin-bottom: var(--space-xl); position: relative; z-index: 2; /* sits above the blob */ } /* On phones the copy wraps naturally (forcing 3 long lines would shrink the type to nothing). From 800px up, each span becomes its own line. */ .line { display: inline; } /* Pink words: same font and weight as the headline, italic, solid pink. (.outline kept as a name so the CTA markup still matches — no more stroke.) */ .accent, .outline { font-style: italic; font-weight: inherit; color: var(--accent); -webkit-text-stroke: 0; } /* --- reveal state (JS adds .is-ready to ) --- Mobile: the whole headline wipes up as one block. */ .hero__title { clip-path: inset(0 0 100% 0); transition: clip-path 1.2s var(--ease-lux); } .is-ready .hero__title { clip-path: inset(0 0 -0.15em 0); } /* ========================================================= BLOB ========================================================= */ .blob { position: absolute; z-index: 1; top: 6%; right: -18%; width: min(78vw, 720px); aspect-ratio: 1; background: radial-gradient(circle at 30% 30%, var(--pearl) 0%, transparent 55%), radial-gradient(circle at 70% 25%, var(--accent) 0%, transparent 60%), radial-gradient(circle at 45% 75%, var(--lilac) 0%, transparent 65%), radial-gradient(circle at 80% 80%, #FFD9E8 0%, transparent 60%); border-radius: 48% 52% 44% 56% / 55% 42% 58% 45%; filter: blur(46px); opacity: 0.85; animation: drift 34s ease-in-out infinite alternate, morph 22s ease-in-out infinite alternate; } @keyframes drift { 0% { transform: translate3d(0, 0, 0) scale(1); } 50% { transform: translate3d(-4vw, 4vh, 0) scale(1.06); } 100% { transform: translate3d(2vw, -3vh, 0) scale(0.97); } } @keyframes morph { 0% { border-radius: 48% 52% 44% 56% / 55% 42% 58% 45%; } 100% { border-radius: 58% 42% 60% 40% / 42% 58% 40% 60%; } } /* ========================================================= HERO BOTTOM STRIP ========================================================= */ .hero__strip { position: relative; z-index: 2; display: grid; /* 3 columns across the full width */ grid-template-columns: 1fr auto 1fr; align-items: center; gap: var(--space-s); padding-top: var(--space-m); border-top: 1px solid var(--hairline); } .strip__item { font-family: var(--font-brand); font-weight: var(--fw-brand); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--label); white-space: nowrap; } .strip__item--center { text-align: center; } .strip__item--right { text-align: right; } .dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-right: 0.6em; vertical-align: middle; } /* strip fades in after the headline */ .hero__strip { opacity: 0; transform: translateY(12px); transition: opacity 0.9s var(--ease-lux) 0.7s, transform 0.9s var(--ease-lux) 0.7s; } .is-ready .hero__strip { opacity: 1; transform: none; } /* ========================================================= SECTION 2 — WORK ========================================================= */ /* every section shares the same vertical rhythm and side gutter */ .work, .reels, .products, .approach, .founder, .faq, .cta { padding: var(--section-pad) var(--gutter); } /* --- Instagram reels --- */ .reels .eyebrow { display: block; margin-bottom: var(--space-l); } .reels__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--space-m); margin-bottom: var(--space-l); } .reel { position: relative; /* anchor for the light ring */ aspect-ratio: 9 / 16; /* vertical reel format */ border-radius: 16px; overflow: hidden; background: #111; transition: transform 0.5s var(--ease-lux); } .reel:hover { transform: translateY(-4px); } /* the video fills the frame, cropped to cover, never stretched */ .reel video { display: block; width: 100%; height: 100%; object-fit: cover; border: 0; } /* the post shown as a link card instead of a video */ .reel--link { background: var(--ink); } .reel__link { position: absolute; inset: 0; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.7rem; padding: var(--space-l); text-align: center; color: #fff; transition: background 0.5s var(--ease-lux); } .reel__link:hover { background: rgba(242, 166, 196, 0.12); } .reel__link-mark { font-size: 2.4rem; color: var(--accent); line-height: 1; } .reel__link-label { font-size: 1.05rem; font-weight: 600; max-width: 16ch; } .reel__link-cta { font-family: var(--font-brand); font-weight: var(--fw-brand); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--accent); } /* --- Pink light ring, spinning clockwise, around each reel --- A masked "border ring" box; inside it a big conic-gradient rotates via transform, so the bright wedge travels around the frame. Works everywhere. */ .reel__beam { position: absolute; inset: 0; z-index: 2; border-radius: 16px; padding: 2px; /* thickness of the light line */ overflow: hidden; pointer-events: none; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; } .reel__beam::before { content: ""; position: absolute; inset: -75%; /* oversized so it always covers the frame */ background: conic-gradient( rgba(242, 166, 196, 0) 0deg, rgba(242, 166, 196, 0) 200deg, rgba(242, 166, 196, 0.75) 280deg, #ffffff 320deg, rgba(242, 166, 196, 0.75) 350deg, rgba(242, 166, 196, 0) 360deg); animation: sweep-spin 3s linear infinite; /* continuous clockwise */ } /* --- Reels inside the product panel (content creation) --- */ .panel-reels { margin-bottom: var(--space-l); padding-bottom: var(--space-l); border-bottom: 1px solid var(--hairline); } .panel-reels .eyebrow { display: block; margin-bottom: var(--space-m); } /* anchor links land below the fixed top bar instead of under it */ section[id] { scroll-margin-top: 64px; } .work { position: relative; display: flex; flex-direction: column; gap: calc(var(--space-xl) * 1.6); } /* --- Editorial statement --- */ .statement { position: relative; } .statement .eyebrow { display: block; margin-bottom: var(--space-l); } .statement__text { position: relative; z-index: 2; font-size: clamp(1.4rem, 3.6vw, 2.9rem); font-weight: var(--fw-display); letter-spacing: -0.012em; line-height: 1.28; max-width: 100%; /* full width on phones, 70% from 800px up */ text-wrap: pretty; /* avoids a lonely last word */ } .fade { color: var(--label); } /* the thought trailing off */ .btn-row { position: relative; z-index: 2; display: flex; flex-wrap: wrap; /* buttons drop to a new row on narrow screens */ gap: var(--space-s); margin-top: var(--space-l); } .pill--ghost { background: transparent; color: var(--ink); border: 1px solid var(--hairline); } .pill--ghost:hover { background: var(--ink); color: var(--bg); border-color: var(--ink); } .pill--ghost .dot { margin-right: 0.5em; } /* second blob, sitting behind the statement on the left */ .blob--2 { top: -12%; left: -22%; right: auto; width: min(70vw, 620px); opacity: 0.6; animation-duration: 41s, 27s; /* different timings = never loops in sync */ } /* --- Section heading --- */ .section-title { font-size: clamp(1.9rem, 5vw, 3.6rem); font-weight: var(--fw-display); letter-spacing: -0.02em; line-height: 1.05; margin-bottom: var(--space-l); } /* --- "Some examples" — compact live-demos dropdown --- */ .examples .eyebrow { display: block; margin-bottom: var(--space-l); } .demos-menu { position: relative; z-index: 5; max-width: min(100%, 880px); /* large, sits well under the heading */ } .demos-menu__trigger { font: inherit; cursor: pointer; display: flex; align-items: center; gap: 0.7em; width: 100%; padding: 1.2em 1.5em; background: transparent; border: 1px solid var(--hairline); border-radius: 16px; transition: border-color 0.5s var(--ease-lux); } .demos-menu__trigger:hover { border-color: var(--accent); } .demos-menu__label { flex: 1; text-align: left; font-family: var(--font-brand); font-weight: var(--fw-eyebrow); font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; } /* chevron drawn from two lines, rotates when open */ .demos-menu__chev { width: 9px; height: 9px; border-right: 1.5px solid var(--ink); border-bottom: 1.5px solid var(--ink); transform: rotate(45deg); transition: transform 0.5s var(--ease-lux); margin-top: -3px; } .demos-menu.is-open .demos-menu__chev { transform: rotate(225deg); margin-top: 2px; } /* panel animates open via grid-rows 0fr → 1fr */ .demos-menu__panel { display: grid; grid-template-rows: 0fr; margin-top: 0.5rem; border-radius: 14px; transition: grid-template-rows 0.5s var(--ease-lux), opacity 0.4s var(--ease-lux); opacity: 0; overflow: hidden; border: 1px solid transparent; } .demos-menu.is-open .demos-menu__panel { grid-template-rows: 1fr; opacity: 1; border-color: var(--hairline); } .demos-menu__panel > * { min-height: 0; } .demos-menu__item { display: block; padding: 1.5em 1.5em; border-bottom: 1px solid var(--hairline); transition: background 0.4s var(--ease-lux), padding-left 0.4s var(--ease-lux); } .demos-menu__item:last-child { border-bottom: 0; } .demos-menu__item:hover { background: rgba(242, 166, 196, 0.09); padding-left: 1.9em; } .demos-menu__name { display: block; font-size: 1.25rem; font-weight: 600; letter-spacing: -0.015em; color: var(--ink); transition: color 0.4s var(--ease-lux); } .demos-menu__item:hover .demos-menu__name { color: var(--accent); } .demos-menu__desc { display: block; margin-top: 0.3em; font-size: 0.98rem; color: var(--ink); /* clear, not faded */ } .demos-menu__item--all .demos-menu__name { font-family: var(--font-brand); font-weight: 400; font-size: var(--fs-label); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); /* clear, not faded */ } .demos-menu__item--all:hover .demos-menu__name { color: var(--accent); } /* --- Case study cards --- */ .cards { display: grid; /* auto-fit: fit as many 240px+ columns as the width allows, then share the leftover space equally. 1 column on a phone, 4 on a desktop. */ grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: var(--space-m); } .card { cursor: pointer; } .card__media { aspect-ratio: 4 / 5; /* every card keeps the same shape */ border-radius: 14px; background: linear-gradient(140deg, var(--g-a), var(--g-b)); margin-bottom: var(--space-s); overflow: hidden; transition: transform 0.7s var(--ease-lux), filter 0.7s var(--ease-lux); } .card:hover .card__media { transform: scale(1.02); filter: saturate(1.15); } .card__name { font-size: 1rem; font-weight: 600; letter-spacing: -0.01em; margin-bottom: 0.25em; } .card__result { font-family: var(--font-brand); font-weight: var(--fw-brand); font-size: var(--fs-label); letter-spacing: 0.06em; text-transform: uppercase; color: var(--label); } /* --- Testimonials: horizontal snap-scroll --- */ .says .eyebrow { display: block; margin-bottom: var(--space-l); } .scroller { display: flex; gap: var(--space-m); overflow-x: auto; /* scroll sideways inside this box */ scroll-snap-type: x mandatory; /* always settle on a card, never between */ scroll-padding-left: var(--gutter); padding-bottom: var(--space-s); /* let the row bleed to the screen edges while the page keeps its gutter */ margin-inline: calc(var(--gutter) * -1); padding-inline: var(--gutter); scrollbar-width: none; /* Firefox */ } .scroller::-webkit-scrollbar { display: none; } /* Chrome / Safari */ .quote { scroll-snap-align: start; /* this edge is what the scroll locks onto */ flex: 0 0 auto; /* don't shrink to fit — keep full width */ width: min(78vw, 380px); border: 1px solid var(--hairline); border-radius: 16px; padding: var(--space-l); display: flex; flex-direction: column; justify-content: space-between; gap: var(--space-l); transition: border-color 0.6s var(--ease-lux); } .quote:hover { border-color: var(--accent); } .quote blockquote { font-size: 1.05rem; line-height: 1.5; letter-spacing: -0.005em; } .quote figcaption { display: flex; flex-direction: column; gap: 0.2em; } .quote__name { font-size: 0.9rem; font-weight: 600; } .quote__role { font-family: var(--font-brand); font-weight: var(--fw-brand); font-size: var(--fs-label); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--label); } /* ========================================================= SECTION 3 — PRODUCTS ========================================================= */ .products .eyebrow { display: block; margin-bottom: var(--space-l); } .products .section-title { max-width: 20ch; } .products__head { display: flex; flex-direction: column; gap: var(--space-s); margin-bottom: var(--space-l); padding-bottom: var(--space-m); border-bottom: 1px solid var(--hairline); } .products__lead { font-size: 1.15rem; font-weight: 600; letter-spacing: -0.01em; } .products__note { font-size: 0.85rem; line-height: 1.5; color: var(--label); max-width: 42ch; } /* --- The card grid --- */ .products__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--space-s); } .product { /* it's a