/* ============================================================ syra-landing.css — SYRA Landing Pages A, B & C Merged stylesheet · replaces page-a.css / page-b.css / page-c.css Add class="page-a", "page-b", or "page-c" to to activate page-specific overrides. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap'); @font-face { font-family: 'Canela Condensed'; src: url('https://cdn.shopify.com/s/files/1/0614/4219/5710/files/CanelaCondensed-ThinItalic-Web.woff2?v=1770336807') format('woff2'); font-weight: 100; font-style: italic; font-display: swap; } /* ============================================================ FIGMA COLOUR TOKENS ============================================================ */ :root { --near-black: #171817; --white: #ffffff; --grow: #debbaa; /* accent / label colour */ --off-grow: #f4f3ee; /* warm off-white backgrounds */ --off-grey: #584a46; /* secondary text */ --off-grey-light:#aa9d99; /* muted / footnote text */ } /* ============================================================ RESET & BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { background-color: #ffffff; min-height: 100%; } body { font-family: 'Manrope', sans-serif; color: var(--near-black); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; } /* ============================================================ PAGE WRAPPER — constrains to mobile width, centred ============================================================ */ .page-wrapper { max-width: 475px; margin: 0 auto; background-color: var(--white); position: relative; overflow-x: hidden; } /* ============================================================ ACCESSIBILITY UTILITY ============================================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ============================================================ PLACEHOLDER IMAGES ============================================================ */ .placeholder-image { background-color: #F0EDE8; display: flex; align-items: center; justify-content: center; width: 100%; } .placeholder-image__label { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 11px; color: #999; text-align: center; padding: 8px 16px; pointer-events: none; } .placeholder-image--hero { height: 440px; } .placeholder-image--how-it-works { height: 579px; } .placeholder-image--founder { height: 579px; } .hair-timeline__image-placeholder { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } .before-after__placeholder { background-color: #F0EDE8; display: flex; align-items: center; justify-content: center; } .product-callout__placeholder { width: 40px; height: 40px; background-color: #F0EDE8; flex-shrink: 0; } .product-hero__product-image--placeholder { width: 244px; height: 283px; background-color: #F0EDE8; border: 2px solid var(--white); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } /* ============================================================ IMAGE SIZING — real images ============================================================ */ img.hero-banner__image { width: 100%; height: 440px; object-fit: cover; display: block; } img.how-it-works__image { width: 100%; height: 579px; object-fit: cover; display: block; } img.founder-story__image { width: 100%; height: 410px; object-fit: cover; display: block; } img.hair-timeline__image { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; z-index: 0; } img.product-hero__product-image { width: 244px; height: 283px; border: 2px solid var(--white); object-fit: cover; display: block; flex-shrink: 0; } .before-after__half img { width: 100%; height: 100%; object-fit: cover; display: block; } .product-callout__image img { width: 100%; height: 100%; object-fit: cover; display: block; } /* ============================================================ TYPOGRAPHY TOKENS ============================================================ */ /* Caption Bold · 12px · 700 · -2% */ .label--accent { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 12px; letter-spacing: -0.24px; line-height: 1; color: var(--grow); } /* H3 · 22px · 700 · -3% */ .h3 { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.66px; line-height: 27px; color: var(--near-black); } /* Body · 14px · 500 · 21px lh · -2% */ .body-text { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: -0.28px; color: var(--near-black); } /* ============================================================ BUTTON SYSTEM ============================================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 14px 16px; font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.28px; line-height: 1; text-decoration: none; border: none; white-space: nowrap; transition: opacity 0.15s ease; cursor: pointer; } .btn:hover { opacity: 0.85; } .btn--dark { background-color: var(--near-black); color: var(--white); } .btn--outline { background-color: transparent; color: var(--white); border: 1px solid var(--white); margin: 0 32px; } .btn--full { width: 100%; } .btn--hero-cta { width: 180px; } .btn--product-shop { width: 244px; } /* ============================================================ 1. NAV BAR ============================================================ */ .nav-bar { position: fixed; top: 0; left: 50%; transform: translateX(-50%); width: 100%; max-width: 475px; height: 59px; display: flex; align-items: center; justify-content: center; z-index: 100; background-color: rgba(23, 24, 23, 0.1); border-bottom: 1px solid #ffffff; transition: background-color 0.2s ease, border-color 0.2s ease; } /* Two logo images — white shown by default, dark shown when scrolled */ .nav-bar__logo { position: absolute; transition: opacity 0.2s ease; display: block; } .nav-bar__logo--white { opacity: 1; } .nav-bar__logo--dark { opacity: 0; } .nav-bar--scrolled { background-color: var(--white); border-bottom-color: rgba(23, 24, 23, 0.1); } .nav-bar--scrolled .nav-bar__logo--white { opacity: 0; } .nav-bar--scrolled .nav-bar__logo--dark { opacity: 1; } /* ============================================================ 2. HERO BANNER ============================================================ */ .hero-banner { background-color: var(--near-black); } .hero-banner__text-container { background-color: var(--white); padding: 32px 32px 56px; display: flex; flex-direction: column; align-items: center; gap: 24px; } .hero-banner__text-area { display: flex; flex-direction: column; gap: 16px; text-align: center; width: 100%; } .hero-banner__heading { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 22px; letter-spacing: -0.66px; line-height: 1.35; color: var(--near-black); } .hero-banner__heading span { display: block; } .hero-banner__body { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: -0.28px; color: var(--near-black); } /* ============================================================ 3. PROBLEM Default: z-index 2 (needed on pages A & C for overlap layout) ============================================================ */ .problem { padding: 24px 32px 56px; position: relative; z-index: 2; } .problem__card { background-color: var(--off-grow); border: 2px solid var(--white); padding: 32px 24px 40px; display: flex; flex-direction: column; gap: 48px; } .problem__header { display: flex; flex-direction: column; gap: 16px; text-align: center; } .problem__body { display: flex; flex-direction: column; } .problem__body p { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: -0.28px; color: var(--near-black); text-align: center; margin-bottom: 21px; } .problem__body p:last-child { margin-bottom: 0; } /* ============================================================ 4. HOW IT WORKS Default: no overlap positioning (pages B & C) Page A overrides add z-index + margin-top slide-under ============================================================ */ .how-it-works { background-color: var(--near-black); } .how-it-works__text-container { background-color: var(--white); padding: 48px 32px 56px; } .how-it-works__text-area { display: flex; flex-direction: column; gap: 32px; } .how-it-works__header { display: flex; flex-direction: column; gap: 16px; } .how-it-works__body { display: flex; flex-direction: column; } .how-it-works__body p { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: -0.28px; color: var(--near-black); margin-bottom: 21px; } .how-it-works__body p:last-child { margin-bottom: 0; } /* ============================================================ FAQ DROPDOWNS — standalone + faq-block variants ============================================================ */ .faq-dropdown { background-color: var(--white); } .faq-dropdown--off-grow { background-color: var(--off-grow); } .faq-dropdown__divider { width: 100%; height: 1px; background-color: rgba(23, 24, 23, 0.12); } .faq-dropdown__divider--tinted { background-color: rgba(23, 24, 23, 0.12); } .faq-dropdown__bar { width: 100%; background-color: transparent; border: none; display: flex; align-items: flex-start; justify-content: space-between; padding: 24px 32px 16px; gap: 16px; text-align: left; cursor: pointer; min-height: 64px; } .faq-dropdown--off-grow .faq-dropdown__bar { background-color: transparent; } .faq-dropdown__question { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.28px; line-height: 1.5; color: var(--near-black); text-transform: uppercase; } /* Expand / collapse icon — plus becomes minus */ .faq-dropdown__icon { position: relative; width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; } .faq-dropdown__icon::before, .faq-dropdown__icon::after { content: ''; position: absolute; background-color: var(--near-black); border-radius: 1px; transition: transform 0.25s ease, opacity 0.25s ease; } /* Horizontal bar */ .faq-dropdown__icon::before { width: 12px; height: 1.5px; top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Vertical bar */ .faq-dropdown__icon::after { width: 1.5px; height: 12px; top: 50%; left: 50%; transform: translate(-50%, -50%); } .faq-dropdown__bar[aria-expanded="true"] .faq-dropdown__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } /* Smooth height accordion */ .faq-dropdown__answer { overflow: hidden; max-height: 0; transition: max-height 0.25s ease; } .faq-dropdown__answer-inner { padding: 0 32px 56px; } .faq-dropdown__answer p { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: -0.28px; color: var(--near-black); margin-bottom: 14px; } .faq-dropdown__answer p:last-child { margin-bottom: 0; } /* Standalone faq-dropdown sections have extra bottom padding on the bar */ #faq-dropdown-1 .faq-dropdown__bar, #faq-dropdown-2 .faq-dropdown__bar, #faq-dropdown-3 .faq-dropdown__bar, #faq-dropdown-4 .faq-dropdown__bar { padding-bottom: 48px; } /* ============================================================ 6. THE PROOF (pages A & B) ============================================================ */ .the-proof { background-color: var(--off-grow); padding: 40px 32px 32px; } .the-proof__content { display: flex; flex-direction: column; gap: 56px; align-items: center; } .the-proof__stat-header { display: flex; flex-direction: column; gap: 40px; width: 100%; } .the-proof__header { display: flex; flex-direction: column; gap: 16px; text-align: center; } .the-proof__stats { display: flex; flex-direction: column; gap: 24px; width: 100%; } /* Individual stat */ .stat { display: flex; flex-direction: column; gap: 8px; text-align: center; align-items: center; } .stat__number { font-family: 'Canela Condensed', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 100; line-height: 1; color: var(--near-black); } .stat__prefix { font-size: 60px; line-height: 1; } .stat__count { font-size: 60px; line-height: 1; } .stat__unit { font-size: 32px; line-height: 1; vertical-align: baseline; } .stat__text { display: flex; flex-direction: column; gap: 10px; width: 100%; } .stat__label { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.28px; line-height: 1; color: var(--near-black); text-align: center; } .stat__sub { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: -0.24px; line-height: 16px; color: var(--off-grey-light); text-align: center; } .stat__divider { width: calc(100% - 160px); margin: 0 auto; height: 1px; background-color: rgba(23, 24, 23, 0.1); } .the-proof__footnote { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: -0.22px; line-height: 16px; color: var(--off-grey-light); text-align: center; } /* ============================================================ 8. HAIR TIMELINE (pages A & B) ============================================================ */ .hair-timeline { background-color: var(--white); padding: 56px 32px; position: relative; min-height: 713px; } .hair-timeline__header { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 16px; } /* ============================================================ 10. FOUNDER STORY Default: no overlap positioning (pages A & B) Page C override adds z-index + margin-top slide-under ============================================================ */ .founder-story { background-color: var(--white); } .founder-story__text-area { padding: 48px 32px 56px; display: flex; flex-direction: column; gap: 40px; align-items: flex-start; } .founder-story__header { display: flex; flex-direction: column; gap: 20px; width: 100%; } /* QuoteAccent: Canela Condensed Thin Italic · 40px · 47px lh */ .founder-story__quote { font-family: 'Canela Condensed', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 100; font-size: 40px; line-height: 47px; letter-spacing: 0; color: var(--near-black); border: none; padding: 0; margin: 0; } .founder-story__body { width: 100%; } .founder-story__body p { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: -0.28px; color: var(--near-black); margin-bottom: 21px; } .founder-story__body p:last-child { margin-bottom: 0; } /* ============================================================ 11. RESULTS — CAROUSEL ============================================================ */ .results { background-color: var(--white); padding: 40px 0 56px; display: flex; flex-direction: column; gap: 48px; } .results__header { display: flex; flex-direction: column; gap: 16px; padding: 0 32px; text-align: center; } .results__carousel-area { display: flex; flex-direction: column; gap: 24px; align-items: center; } /* Carousel container — padding creates 32px side buffers where adjacent cards peek */ .carousel { width: 100%; overflow: hidden; padding: 0 32px; cursor: grab; user-select: none; } .carousel:active { cursor: grabbing; } .carousel__track { display: flex; gap: 12px; transition: transform 0.3s ease; will-change: transform; } .carousel__card { flex: 0 0 100%; min-width: 0; } .carousel__card-inner { background-color: var(--off-grow); padding: 32px; width: 100%; display: flex; flex-direction: column; gap: 34px; align-items: center; } .carousel__text-area { display: flex; flex-direction: column; gap: 20px; align-items: center; width: 100%; } .carousel__quote-mark { width: 31px; height: 27px; flex-shrink: 0; display: flex; align-items: flex-start; } .carousel__quote { display: flex; flex-direction: column; gap: 11px; width: 100%; text-align: center; } .carousel__quote-text { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: -0.28px; color: var(--near-black); text-align: center; } .carousel__quote-credit { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: -0.24px; color: var(--off-grey); text-align: center; } /* Before / after image pair */ .carousel__before-after { width: 100%; display: flex; justify-content: center; } .before-after__images { display: flex; width: 238px; height: 129px; border: 1px solid var(--near-black); overflow: hidden; } .before-after__half { width: 119px; height: 129px; flex-shrink: 0; border-right: 1px solid var(--near-black); } .before-after__half:last-child { border-right: none; } /* Product callout below each card */ .carousel__product-callout { display: flex; flex-direction: column; gap: 10px; align-items: center; width: 238px; } .product-callout__image { width: 40px; height: 40px; flex-shrink: 0; } .product-callout__text { text-align: center; } .product-callout__uses { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: -0.24px; color: var(--off-grey); } .product-callout__name { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 12px; line-height: 1; letter-spacing: -0.24px; color: var(--near-black); } /* Progress indicator */ .carousel__progress { position: relative; width: 60px; height: 6px; background-color: var(--off-grow); border-radius: 100px; overflow: hidden; } .carousel__progress-bar { position: absolute; left: 0; top: 0; height: 6px; width: 33.333%; background-color: var(--near-black); border-radius: 100px; transition: width 0.3s ease; } /* ============================================================ 13. PRODUCT HERO ============================================================ */ .product-hero { display: flex; flex-direction: column; align-items: center; padding-bottom: 32px; } .product-hero__header-area { background-color: var(--off-grow); width: 100%; padding: 56px 32px 108px; } .product-hero__header { display: flex; flex-direction: column; gap: 16px; text-align: center; align-items: center; } /* Product container overlaps up into the header area */ .product-hero__product-container { display: flex; flex-direction: column; gap: 24px; align-items: center; width: 100%; padding: 0 32px; margin-top: -68px; } .product-hero__product-image { width: 244px; height: 283px; border: 2px solid var(--white); flex-shrink: 0; } .product-hero__product-info { display: flex; flex-direction: column; gap: 24px; width: 100%; } .product-hero__content-area { display: flex; flex-direction: column; gap: 32px; align-items: center; } .product-hero__meta { display: flex; flex-direction: column; gap: 12px; align-items: center; } .product-hero__ratings { display: flex; align-items: center; gap: 5px; height: 18px; } .ratings__stars { display: flex; align-items: center; } .ratings__score { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: -0.24px; color: var(--near-black); } .product-hero__product-header { display: flex; flex-direction: column; gap: 8px; text-align: center; width: 100%; } .product-hero__product-name { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.28px; line-height: 1; color: var(--near-black); text-align: center; } .product-hero__product-sub { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: -0.28px; color: var(--near-black); text-align: center; } /* Promo rows — delivery + candle */ .product-hero__promos { display: flex; flex-direction: column; gap: 24px; padding: 16px 0 24px; } .promo { display: flex; flex-direction: column; gap: 6px; align-items: center; justify-content: center; width: 100%; } .promo__icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .promo__text { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 12px; line-height: 16px; letter-spacing: -0.24px; color: var(--near-black); text-align: center; } /* ============================================================ 14. FAQ BLOCK ============================================================ */ .faq-block { background-color: var(--white); padding: 48px 0 56px; display: flex; flex-direction: column; gap: 32px; align-items: center; } .faq-block__header { display: flex; flex-direction: column; gap: 16px; padding: 0 32px; width: 100%; } .faq-block__list { display: flex; flex-direction: column; width: 100%; } /* ============================================================ 15. FOOTER ============================================================ */ .footer { background-color: var(--near-black); padding: 56px 0 4px; display: flex; flex-direction: column; align-items: center; gap: 72px; } .footer__logo { width: 100%; } .footer__logo-img { width: 100%; height: auto; display: block; } /* ============================================================ STICKY BOTTOM BAR ============================================================ */ .sticky-bottom-bar { position: fixed; bottom: 0; left: 50%; transform: translateX(-50%) translateY(100%); width: 100%; max-width: 475px; height: 68px; background-color: var(--white); display: flex; align-items: center; justify-content: center; z-index: 99; transition: transform 0.3s ease; box-shadow: 0 -1px 0 rgba(23, 24, 23, 0.08); } .sticky-bottom-bar--visible { transform: translateX(-50%) translateY(0); } .sticky-bottom-bar__cta { width: 178px; height: 44px; padding: 14px 16px; } /* ============================================================ PAGE A — SPECIFIC OVERRIDES ============================================================ */ /* Hero text container — tighter bottom padding on page A */ .page-a .hero-banner__text-container { padding-bottom: 40px; } /* How it works slides under the problem card on page A */ .page-a .how-it-works { position: relative; z-index: 1; margin-top: -131px; } /* Hair timeline image — page A uses the .hair-timeline__image class for full-bleed absolute positioning, then img rule adds display/object-fit */ .page-a .hair-timeline__image { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 0; } /* ============================================================ PAGE B — SPECIFIC OVERRIDES ============================================================ */ /* Problem — no z-index needed on page B (no overlap layout) */ .page-b .problem { position: static; z-index: auto; padding-bottom: 64px; } /* How it works image — page B shows full image height uncropped */ .page-b img.how-it-works__image { height: auto; object-fit: initial; } /* ============================================================ PAGE C — SPECIFIC OVERRIDES + UNIQUE SECTIONS ============================================================ */ /* No top padding on problem section on page C */ .page-c .problem { padding-top: 0; } /* Founder story slides under problem on page C */ .page-c .founder-story { position: relative; z-index: 1; margin-top: -131px; } /* Taller founder image on page C */ .page-c img.founder-story__image { height: 579px; } /* Taller how-it-works image on page C */ .page-c img.how-it-works__image { height: 579px; } /* Results section — extra top padding on page C */ .page-c .results { padding-top: 56px; } /* ---- 4. IMAGE SOLO (page C only) ---- z-index: 1 — how-it-works renders in front of it */ .page-c .image-solo { position: relative; z-index: 1; } .page-c img.image-solo__image { width: 100%; height: 579px; object-fit: cover; display: block; } /* ---- 5. RITUALS EXPLANATION (page C only) ---- z-index: 2, margin-top: -131px — slides up in front of image-solo */ .page-c .rituals-explanation { padding: 24px 32px 64px; position: relative; z-index: 2; margin-top: -131px; } .page-c .rituals-explanation__card { background-color: var(--off-grow); border: 2px solid var(--white); padding: 32px 24px 40px; display: flex; flex-direction: column; gap: 48px; } .page-c .rituals-explanation__header { display: flex; flex-direction: column; gap: 16px; text-align: center; } .page-c .rituals-explanation__body { display: flex; flex-direction: column; } .page-c .rituals-explanation__body p { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: -0.28px; color: var(--near-black); text-align: center; margin-bottom: 21px; } .page-c .rituals-explanation__body p:last-child { margin-bottom: 0; } /* ---- 8. THE SCIENCE (page C only) ---- */ .page-c .the-science { background-color: var(--off-grow); padding: 40px 32px 48px; } .page-c .the-science__content { display: flex; flex-direction: column; gap: 32px; } .page-c .the-science__header { display: flex; flex-direction: column; gap: 16px; margin-bottom: 24px; } .page-c .the-science__image-wrap { width: 100%; } .page-c img.the-science__image { width: 100%; height: 300px; object-fit: cover; display: block; } .page-c .the-science__body { display: flex; flex-direction: column; } .page-c .the-science__body p { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 14px; line-height: 21px; letter-spacing: -0.28px; color: var(--near-black); margin-bottom: 21px; } .page-c .the-science__body p:last-child { margin-bottom: 0; } .page-c .the-science__stats-divider { width: 100%; height: 1px; background-color: rgba(23, 24, 23, 0.1); } /* Two stats side by side */ .page-c .the-science__stats { display: flex; flex-direction: row; gap: 16px; width: 100%; } .page-c .the-science__stat { flex: 1; display: flex; flex-direction: column; gap: 8px; align-items: flex-start; } .page-c .the-science__stat-number { font-family: 'Canela Condensed', Georgia, 'Times New Roman', serif; font-style: italic; font-weight: 100; line-height: 1; color: var(--near-black); } .page-c .the-science__stat-count { font-size: 60px; line-height: 1; } .page-c .the-science__stat-unit { font-size: 32px; line-height: 1; vertical-align: baseline; } .page-c .the-science__stat-text { display: flex; flex-direction: column; gap: 2px; width: 100%; } .page-c .the-science__stat-label { font-family: 'Manrope', sans-serif; font-weight: 700; font-size: 14px; letter-spacing: -0.28px; line-height: normal; color: var(--near-black); text-align: left; } .page-c .the-science__stat-sub { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: -0.24px; line-height: 16px; color: var(--off-grey-light); text-align: left; } .page-c .the-science__footnote { font-family: 'Manrope', sans-serif; font-weight: 500; font-size: 11px; letter-spacing: -0.22px; line-height: 16px; color: var(--off-grey-light); text-align: left; }