/*
 * #7856: standalone stylesheet for the new static landing page only.
 * Deliberately not merged into custom.css -- everything here is scoped
 * under .landing-header / .landing-footer / .landing (the <main> wrapper)
 * so it can't leak onto /about, /contact or any other page that still uses
 * the shared partials.header/footer.
 */
:root {
    /* #7856 design port: palette taken from the design file (previously
       sampled from screenshots: purple #5b52e0, ink #0f0e17). */
    --l-base: #6360e6;
    --l-purple: #6360e6;
    --l-purple-dark: #3b2dc9;
    --l-pink: #f05aaf;
    --l-bg-light: #f4f2fb;
    --l-ink: #111010;
    --l-cream: #f7f3e9;
    --l-paper: #fffdf7;
    --l-muted: #5c5648;
    --l-faint: #8b8375;
}

/* #7856 design port: the design sets every word in Hanken Grotesk (DM Mono
   for small labels). The site theme's main.css draws headings from
   --heading-font (Oswald) and body text from --body-font (Inter), so
   redefining both variables on the landing page's own roots is enough to
   switch every descendant without touching main.css. */
.landing,
.landing-header,
.landing-footer,
.l-floating-cta {
    --heading-font: "Hanken Grotesk", Helvetica, sans-serif;
    --body-font: "Hanken Grotesk", Helvetica, sans-serif;
    font-family: var(--body-font);
}

/* #8036: the Thai design (CheerMe Landing TH) sets every word in Prompt,
   which covers Thai glyphs; Hanken Grotesk has none. The DM Mono stacks
   below list Prompt as their fallback for the same reason. Prompt is only
   loaded on the Thai locale (see home.blade.php). */
html[lang="th"] .landing,
html[lang="th"] .landing-header,
html[lang="th"] .landing-footer,
html[lang="th"] .l-floating-cta {
    --heading-font: "Prompt", Helvetica, sans-serif;
    --body-font: "Prompt", Helvetica, sans-serif;
}

html[lang="th"] .l-ribbon__text {
    font-family: "Prompt", system-ui, sans-serif;
}

/* #8185: Thai line breaking. main.css sets body { word-break: break-word },
   which lets Chrome cut a Thai word anywhere when it doesn't fit; break
   inside a word only as a last resort instead. @thai wraps each Thai word
   in .th-w with <wbr> between them, so lines break only between whole
   words in every browser. display: inline undoes main.css's global
   span { display: inline-block }, which would change spacing and text-wrap. */
html[lang="th"] .landing,
html[lang="th"] .landing-header,
html[lang="th"] .landing-footer,
html[lang="th"] .l-floating-cta {
    word-break: normal;
    overflow-wrap: break-word;
}

/* .th-t wraps a whole @thai phrase: inside a flex parent it is the single
   flex item, elsewhere it is plain inline text */
.th-t {
    display: inline;
}

.th-w {
    display: inline;
    white-space: nowrap;
}

.landing {
    position: relative;
    /* #7856: the ribbon and the deck's corner stickers bleed a few px past
       the viewport (the design file does too: scrollWidth 1448 at 1440).
       clip -- not hidden -- so position:sticky keeps working. */
    overflow-x: clip;
}

.landing * {
    box-sizing: border-box;
}

.landing img,
.landing video {
    max-width: 100%;
    display: block;
}

.l-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 16px 32px;
    border-radius: 999px;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    text-decoration: none;
    transition: transform .15s ease, opacity .15s ease;
}

.l-btn:hover {
    transform: translateY(-2px);
    opacity: .92;
}

.l-btn--dark {
    background: var(--l-ink);
    color: #fff;
}

.l-pill {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 10px 18px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.l-pill--outline {
    border: 1px solid var(--l-ink);
    color: var(--l-ink);
}

.l-pill--outline-light {
    border: 1px solid rgba(255, 255, 255, .5);
    color: #fff;
}

/* ===================== Header =====================
   #7856 design port: fixed for the whole page (design: position:fixed,
   padding 24px 28px, z-index 60). pointer-events:none on the bar itself so
   the empty middle never blocks clicks on the hero; logo and buttons
   re-enable them. Values from the design file's inline CSS. */
.landing-header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 60;
    padding: 24px 28px;
    padding-top: calc(24px + env(safe-area-inset-top, 0px));
    background: transparent;
    pointer-events: none;
}

.landing-header__container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.landing-header__logo,
.landing-header__nav,
.landing-header__toggle {
    pointer-events: auto;
}

.landing-header__logo img {
    height: 42px;
    width: auto;
    display: block;
}

.landing-header__toggle {
    display: none;
    background: #111010;
    color: #F7F3E9;
    border: none;
    border-radius: 999px;
    width: 46px;
    height: 46px;
    font-size: 22px;
}

.landing-header__nav {
    display: flex;
    align-items: center;
    gap: 10px;
}

.landing .landing-header__pill,
.landing-header__pill {
    display: inline-flex;
    align-items: center;
    padding: 14px 24px;
    border-radius: 999px;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    line-height: normal;
    transition: none;
}

.landing-header__pill--light {
    padding: 14px 22px;
    background: #EDE7D7;
    color: #111010;
}

.landing-header__pill--light:hover {
    background: #111010;
    color: #F7F3E9;
}

.landing-header__pill--dark {
    background: #111010;
    color: #F7F3E9;
}

.landing-header__pill--dark:hover {
    background: #3B2DC9;
    color: #F7F3E9;
}

/* ===================== Hero =====================
   #7856 design port. 200vh section + sticky 100vh stage: the hero holds
   for one screen of scroll while initHeroCard() (landing.js) rotates and
   scales the card. All positions/sizes are the design file's own
   clamp()/vw/vh values, so the layout scales the same way the design does. */
.l-hero {
    position: relative;
    height: 200vh;
    background: var(--l-base);
}

.l-hero__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
    background:
        linear-gradient(180deg, rgba(99, 96, 230, 0) 58%, rgba(99, 96, 230, .6) 84%, #6360e6 100%),
        linear-gradient(110deg, #eaf6ff 0%, #d3eaff 26%, #b0d4fb 50%, #93b6f4 72%, #7d7ae9 88%, #6a4ddb 100%);
}

/* copy block */
.l-hero__copy {
    position: absolute;
    left: clamp(28px, 10vw, 220px);
    top: 16vh;
    max-width: 40vw;
    z-index: 3;
}

.l-hero__badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    background: #FFFDF7;
    border-radius: 999px;
    padding: 11px 20px;
    font-size: 15px;
    font-weight: 400;
    line-height: normal;
    color: #5C5648;
}

.l-hero__badge-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #3B2DC9;
    flex: none;
}

.landing .l-hero__title {
    margin: 26px 0 0;
    font-weight: 900;
    letter-spacing: -0.045em;
    line-height: .92;
    font-size: clamp(40px, 5.6vw, 104px);
    color: #111010;
}

.landing .l-hero__title-accent {
    display: inline;
    background: linear-gradient(90deg, #7C3AED 0%, #A855F7 22%, #EC4899 48%, #4FA8FF 72%, #7C3AED 100%);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: l-hero-gradient-flow 4.2s linear infinite;
}

.landing .l-hero__cta {
    display: inline-block;
    margin-top: clamp(24px, 3vh, 40px);
    background: #111010;
    color: #F7F3E9;
    border-radius: 999px;
    padding: 18px 32px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: normal;
    text-transform: uppercase;
    box-shadow: 0 16px 34px rgba(31, 28, 20, .18);
    transition: none;
}

.landing .l-hero__cta:hover {
    background: #3B2DC9;
    color: #F7F3E9;
}

/* mask shapes shared by sparks/twinkles (the design's own 64px PNG masks) */
.l-shape--sparkle,
.l-shape--heart {
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
}

.l-shape--sparkle {
    -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAACaklEQVR42tWYXYhMYRiAn5k5W9ryk59StKx/Qpsim/LvQpGUMpSUcEVy4UoxJdReiHLDtShuJClam59SVmnX/7C7hLHlhsndmpnXxc5uZ3bO7pwz33e+N+93c67O85zzfec97/uCWUxkgtkNkoYCs2j6zwU8Q4FmCroCLfzVFVjBAKohiOYh3AhAq57AZgA26W1AJ4LQoYVvooQgDDBNZwsOkgCggf06b+AbUl7vNPB7h/GCsNW9wJsKgUeu8dsr8IKwyiU+wacqgacuBQ5X4QVhhyv8dH4GCvQy3gU+ybNAvCDcdiFwYVS8IByPG39qTLxQYl+c+BM18INrd1z4c6HwQokDceCvhsQPrpN24bPpioQXhHtMtoU/Qj4yXhC+2zgNG3hdF3xotbOk/oSzi+dG8KEjeZe1UeGtXCRnAS6+kuU0c2uDU6znEl+tov3rFRmWj/yxTmIxC5jHIhYyn3EOknmeLFmy9NHDxyRQokiRAgWKTv6mKTw8PFIky2Wt732spo3e2LYgy3lWhms52/hiFd3D2ZG7X7vs2sYTK/AHbKl/v9bQbQR/TIv5oTnEr7rg/aTtdYHRc2IHU+1+PFci4TNxfL9nQmf/2JrVcCVZOs4sltEtSgEujylwNP5M7pUHM0HrlpvWbOYoeeE9ja66w2OBAuvcdccN9FXh77sdUKSrBJa6FUjwtgJ/w/2MaKcPX6TZvUDCV7ze0RhUCteHr6/pDCqXlZ//j5NaOjA+Iwg3zSY+JvEQgHbUYg+CMEdPYAZCznToZhI5fvNCUwA6eakr0EW3rsAHfph2qmbRSD95FGOK6Q3+AX/2KjKW7lJSAAAAAElFTkSuQmCC");
    mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAACaklEQVR42tWYXYhMYRiAn5k5W9ryk59StKx/Qpsim/LvQpGUMpSUcEVy4UoxJdReiHLDtShuJClam59SVmnX/7C7hLHlhsndmpnXxc5uZ3bO7pwz33e+N+93c67O85zzfec97/uCWUxkgtkNkoYCs2j6zwU8Q4FmCroCLfzVFVjBAKohiOYh3AhAq57AZgA26W1AJ4LQoYVvooQgDDBNZwsOkgCggf06b+AbUl7vNPB7h/GCsNW9wJsKgUeu8dsr8IKwyiU+wacqgacuBQ5X4QVhhyv8dH4GCvQy3gU+ybNAvCDcdiFwYVS8IByPG39qTLxQYl+c+BM18INrd1z4c6HwQokDceCvhsQPrpN24bPpioQXhHtMtoU/Qj4yXhC+2zgNG3hdF3xotbOk/oSzi+dG8KEjeZe1UeGtXCRnAS6+kuU0c2uDU6znEl+tov3rFRmWj/yxTmIxC5jHIhYyn3EOknmeLFmy9NHDxyRQokiRAgWKTv6mKTw8PFIky2Wt732spo3e2LYgy3lWhms52/hiFd3D2ZG7X7vs2sYTK/AHbKl/v9bQbQR/TIv5oTnEr7rg/aTtdYHRc2IHU+1+PFci4TNxfL9nQmf/2JrVcCVZOs4sltEtSgEujylwNP5M7pUHM0HrlpvWbOYoeeE9ja66w2OBAuvcdccN9FXh77sdUKSrBJa6FUjwtgJ/w/2MaKcPX6TZvUDCV7ze0RhUCteHr6/pDCqXlZ//j5NaOjA+Iwg3zSY+JvEQgHbUYg+CMEdPYAZCznToZhI5fvNCUwA6eakr0EW3rsAHfph2qmbRSD95FGOK6Q3+AX/2KjKW7lJSAAAAAElFTkSuQmCC");
}

.l-shape--heart {
    -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAACWElEQVR42u2Z3UtUQRiHHxVNTTFjlSIoIaREKS+66lK8SfoSu5GIPkC6UdgQIvwzvPC2P0CihOhOyMsKIktsKbRNiiDZ3Cy/Zacr3V2dM2fmODNLcN65PPt7n9+ZM+d958xCHHHEEUeJo0xxrY4ertJGI0dp4D0pphnnc0jGs/RxnjOc4ze/WOIjE7xgxdzaA1YQkjHDQ6qlimoekZJqlkmawZuZlibaGWku79NcYUGpeUuzLv4k88pUAkGOgSLNALlQzRwndPB1AdO4f9zd1dzXVMxQG27guWYywQYdAHSyoa15Eobv004lEMwC8MlI06s28MUomWCIYUNFiopg/DXDZIJFssaankJkeZGBfuNqkaDBWNMfVAlryFDjofr+IcGmbAbaveChnjb5IzjirQM1yg2UlaIbFhrIeqNm5QYy3gwsyae9Mr82nYagim3ZDGx5moPFPH5vIfruxcC34Eq44MVAOtjASy8GFJQW48YSZRxTufvgHP8muBABPHP+AJ6qLx8P2IzbGsskioF7dyd/KafL4f2PMBn2k0N8dXb/c6rtWD6uOzPQrTtRj53gR/WfVK3hVltnvKPSZLG0s2Z59beYrtfbVg30RnllkpbgOe5FfWuTpcXbsHBA/MEt3LFRPm+yHQm+xiVbFbw7QovKcMFmE+nkpxE+zWnbfewUs9r4VzS5aKWHmdDCj1Hlrp8n2VLCV7nhekt1kR+B+PnCD2930cSkFD9Ovb8T5kFWi+BZbvn+sG/l9S5+Su8M1HZUMMIm6wyX5mhjp0B1xP95xBHHfx7/AEvOMe6ss25dAAAAAElFTkSuQmCC");
    mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAACWElEQVR42u2Z3UtUQRiHHxVNTTFjlSIoIaREKS+66lK8SfoSu5GIPkC6UdgQIvwzvPC2P0CihOhOyMsKIktsKbRNiiDZ3Cy/Zacr3V2dM2fmODNLcN65PPt7n9+ZM+d958xCHHHEEUeJo0xxrY4ertJGI0dp4D0pphnnc0jGs/RxnjOc4ze/WOIjE7xgxdzaA1YQkjHDQ6qlimoekZJqlkmawZuZlibaGWku79NcYUGpeUuzLv4k88pUAkGOgSLNALlQzRwndPB1AdO4f9zd1dzXVMxQG27guWYywQYdAHSyoa15Eobv004lEMwC8MlI06s28MUomWCIYUNFiopg/DXDZIJFssaankJkeZGBfuNqkaDBWNMfVAlryFDjofr+IcGmbAbaveChnjb5IzjirQM1yg2UlaIbFhrIeqNm5QYy3gwsyae9Mr82nYagim3ZDGx5moPFPH5vIfruxcC34Eq44MVAOtjASy8GFJQW48YSZRxTufvgHP8muBABPHP+AJ6qLx8P2IzbGsskioF7dyd/KafL4f2PMBn2k0N8dXb/c6rtWD6uOzPQrTtRj53gR/WfVK3hVltnvKPSZLG0s2Z59beYrtfbVg30RnllkpbgOe5FfWuTpcXbsHBA/MEt3LFRPm+yHQm+xiVbFbw7QovKcMFmE+nkpxE+zWnbfewUs9r4VzS5aKWHmdDCj1Hlrp8n2VLCV7nhekt1kR+B+PnCD2930cSkFD9Ovb8T5kFWi+BZbvn+sG/l9S5+Su8M1HZUMMIm6wyX5mhjp0B1xP95xBHHfx7/AEvOMe6ss25dAAAAAElFTkSuQmCC");
}

.l-shape--dot {
    border-radius: 50%;
}

/* firework burst behind the heading, 3.4s loop */
.l-hero__fw {
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    overflow: hidden;
}

.l-hero__fw > span {
    position: absolute;
    left: 28%;
    top: 40%;
    opacity: 0;
}

.l-hero__fw-trail {
    width: 5px;
    height: clamp(260px, 46vh, 560px);
    transform-origin: 50% 100%;
    border-radius: 4px;
    background: linear-gradient(180deg, #ffffff, #ff8fd4 30%, rgba(255, 255, 255, 0));
    animation: l-fw-trail 3.4s cubic-bezier(.24, .72, .36, 1) 0s infinite;
}

.l-hero__fw-flash {
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: radial-gradient(circle, rgba(255, 255, 255, .95) 0%, rgba(255, 143, 212, .5) 34%, rgba(154, 210, 255, .16) 56%, rgba(255, 255, 255, 0) 74%);
    transform: translate(-50%, -50%) scale(.2);
    animation: l-fw-flash 3.4s ease-out .78s infinite;
}

.l-hero__fw-spark {
    transform: translate(-50%, -50%) scale(.2);
    animation: l-fw-spark 3.4s cubic-bezier(.1, .7, .22, 1) .78s infinite;
}

/* hands + twinkles popping around the card (same box as the card) */
.l-hero__halo {
    position: absolute;
    right: clamp(24px, 11vw, 215px);
    top: 50%;
    transform: translateY(-50%);
    width: min(64vh, 710px);
    height: min(78vh, 860px);
    pointer-events: none;
    z-index: 0;
    overflow: visible;
}

.l-hero__hand,
.l-hero__twinkle {
    position: absolute;
    opacity: 0;
    transform: translate(-50%, -50%) scale(.2) rotate(var(--r0, 0deg));
    animation-name: l-hand-pop;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    pointer-events: none;
}

.landing img.l-hero__hand {
    height: auto;
    max-width: none;
}

.l-hero__twinkle {
    --r0: 0deg;
    --r1: 90deg;
}

.l-hero__hand--pink {
    filter: brightness(0) saturate(100%) invert(48%) sepia(72%) saturate(3200%) hue-rotate(295deg) brightness(101%) contrast(97%) drop-shadow(0 0 18px rgba(240, 90, 175, .55));
}

.l-hero__hand--lilac {
    filter: drop-shadow(0 0 20px rgba(168, 120, 246, .7));
}

.l-hero__hand--blue {
    filter: brightness(0) saturate(100%) invert(42%) sepia(93%) saturate(1800%) hue-rotate(215deg) brightness(102%) contrast(101%) drop-shadow(0 0 18px rgba(111, 183, 255, .55));
}

/* the card: rest/scroll/hover transform comes from initHeroCard() via --card-t */
.l-hero__card {
    position: absolute;
    right: clamp(24px, 11vw, 215px);
    top: 50%;
    width: min(64vh, 710px);
    transform: translateY(-50%) var(--card-t, rotate(-4deg) scale(.94));
    transition: transform .45s cubic-bezier(.22, 1, .36, 1);
    will-change: transform;
    border-radius: 24px;
    background: #FFFFFF;
    box-shadow: 0 44px 90px rgba(31, 28, 20, .22);
    z-index: 4;
    color: #111010;
    line-height: normal;
}

.l-hero__card-media {
    position: relative;
    border-radius: 24px 24px 0 0;
    overflow: hidden;
    height: min(64vh, 710px);
    background: linear-gradient(160deg, #3B2DC9, #2B1FA6);
}

.landing .l-hero__card-media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    pointer-events: none;
    z-index: 2;
}

.l-hero__scrim {
    position: absolute;
    inset: 0;
    background: rgba(27, 17, 64, .04);
    pointer-events: none;
    z-index: 2;
}

.l-hero__live {
    position: absolute;
    left: -6px;
    top: 16px;
    z-index: 4;
    background: #E1123B;
    color: #FFFFFF;
    border-radius: 0 999px 999px 0;
    padding: 8px 18px;
    font-size: 14px;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: normal;
}

.l-hero__chips {
    position: absolute;
    right: 14px;
    top: 48px;
    z-index: 5;
    display: flex;
    flex-direction: column;
    gap: 10px;
    align-items: flex-end;
}

.l-hero__chip {
    display: flex;
    align-items: center;
    gap: 8px;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .08em;
    line-height: normal;
    color: #FFFFFF;
    cursor: pointer;
}

.l-hero__chip:active {
    transform: scale(.95);
}

.l-hero__chip--chat {
    background: rgba(27, 17, 64, .55);
    border: 1px solid rgba(255, 255, 255, .55);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    box-shadow: 0 10px 24px rgba(27, 17, 64, .28);
    transition: transform .38s cubic-bezier(.34, 1.7, .42, 1), background .25s ease, box-shadow .25s ease;
}

.l-hero__chip--chat:hover {
    transform: translateY(-3px) scale(1.06);
    background: rgba(27, 17, 64, .7);
    box-shadow: 0 16px 30px rgba(27, 17, 64, .38);
}

.l-hero__chip--cheer {
    background: linear-gradient(90deg, #d92b8a 0%, #7c3aed 52%, #2563eb 100%);
    box-shadow: 0 12px 28px rgba(240, 90, 175, .42);
    transition: transform .38s cubic-bezier(.34, 1.7, .42, 1), box-shadow .25s ease, filter .25s ease;
}

.l-hero__chip--cheer:hover {
    transform: translateY(-3px) scale(1.08);
    box-shadow: 0 18px 34px rgba(240, 90, 175, .55);
    filter: saturate(1.15);
}

.l-hero__caption {
    position: absolute;
    left: 14px;
    right: 14px;
    bottom: 16px;
    z-index: 4;
    background: rgba(17, 16, 16, .72);
    border-radius: 14px;
    padding: 12px 16px;
    font-size: 15px;
    font-weight: 700;
    line-height: normal;
    color: #FFFFFF;
    text-align: center;
}

.l-hero__card-body {
    padding: 20px 22px 22px;
}

.l-hero__eyebrow {
    display: block;
    font-family: "DM Mono", "Prompt", ui-monospace, monospace;
    font-size: clamp(9px, 2.9%, 12px);
    letter-spacing: .1em;
    line-height: normal;
    color: #8B8375;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.landing .l-hero__quote {
    margin: 10px 0 0;
    font-size: clamp(18px, 1.7vw, 24px);
    font-weight: 800;
    line-height: 1.2;
    letter-spacing: -.02em;
    color: #111010;
}

.l-hero__card-footer {
    margin-top: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.l-hero__meta {
    font-size: 13px;
    color: #5C5648;
    white-space: nowrap;
}

.l-hero__live-dot {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 900;
    letter-spacing: .06em;
    color: #E1123B;
}

.l-hero__live-dot > span[aria-hidden="true"] {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: #E1123B;
}

/* pause every decorative loop while the hero is off screen (initHeroCard) */
.l-hero.is-offscreen .l-hero__fw span,
.l-hero.is-offscreen .l-hero__halo > *,
.l-hero.is-offscreen .l-hero__title-accent {
    animation-play-state: paused;
}

/* =====================
   Ribbon (#7856 design port)
   Lives inside the hero stage at 58% height, rotated -5deg, under the card
   (card z-index 4, ribbon 1). Curve/scroll/drag math stays in
   initCheerRibbon(). Words grow bold with a white outline on hover.
   ===================== */
.l-ribbon {
    position: absolute;
    left: -8%;
    right: -8%;
    top: 58%;
    z-index: 1;
    transform: rotate(-5deg);
    overflow: visible;
    cursor: grab;
    touch-action: none;
    user-select: none;
}

.l-ribbon.is-dragging {
    cursor: grabbing;
}

.l-ribbon__svg {
    width: 100%;
    height: auto;
    display: block;
    overflow: visible;
    filter: drop-shadow(0 14px 22px rgba(120, 116, 104, .16));
}

.l-ribbon__text {
    fill: #FFFFFF;
    font-size: 46px;
    letter-spacing: .08em;
    font-weight: 700;
    font-family: "Hanken Grotesk", system-ui, sans-serif;
}

.l-ribbon__word {
    font-weight: 700;
    cursor: pointer;
    paint-order: stroke;
    stroke: #FFFFFF;
    stroke-width: 0;
    transition: stroke-width .12s ease, font-weight .12s ease;
}

/* The design file also lists a 2.6px outline here, but written as the
   invalid property "strokeWidth", so the design itself only renders the
   bold weight -- matched as rendered. */
.l-ribbon__word:hover {
    font-weight: 900;
}

.l-ribbon__dot {
    pointer-events: none;
}

/* ---- hero keyframes (design file values) ---- */
@keyframes l-hero-gradient-flow {
    from { background-position: 0% 50%; }
    to { background-position: 240% 50%; }
}

@keyframes l-fw-trail {
    0%   { transform: translate(-50%, 58vh) scaleY(.08); opacity: 0; }
    3%   { opacity: 1; }
    22%  { transform: translate(-50%, 6px) scaleY(1); opacity: 1; }
    27%  { transform: translate(-50%, 0) scaleY(.18); opacity: 0; }
    100% { transform: translate(-50%, 0) scaleY(.08); opacity: 0; }
}

@keyframes l-fw-flash {
    0%   { transform: translate(-50%, -50%) scale(.2); opacity: 0; }
    10%  { transform: translate(-50%, -50%) scale(1.5); opacity: .85; }
    36%  { transform: translate(-50%, -50%) scale(2.2); opacity: 0; }
    100% { opacity: 0; }
}

/* --fw-k scales the burst radius (1 = design desktop; the phone spec uses a smaller burst) */
@keyframes l-fw-spark {
    0%   { transform: translate(-50%, -50%) translate(0, 0) scale(.2); opacity: 0; }
    12%  { transform: translate(-50%, -50%) translate(calc(var(--tx) * var(--fw-k, 1) * .28), calc(var(--ty) * var(--fw-k, 1) * .28)) scale(1.1); opacity: 1; }
    58%  { transform: translate(-50%, -50%) translate(calc(var(--tx) * var(--fw-k, 1)), calc(var(--ty) * var(--fw-k, 1))) scale(.9); opacity: .95; }
    100% { transform: translate(-50%, -50%) translate(calc(var(--tx) * var(--fw-k, 1) * 1.3), calc(var(--ty) * var(--fw-k, 1) * 1.3 + 46px)) scale(.15); opacity: 0; }
}

@keyframes l-hand-pop {
    0%   { transform: translate(-50%, -50%) scale(.2) rotate(var(--r0)); opacity: 0; }
    18%  { transform: translate(-50%, -50%) scale(1.14) rotate(var(--r1)); opacity: 1; }
    34%  { transform: translate(-50%, -50%) scale(.96) rotate(var(--r1)); opacity: 1; }
    62%  { transform: translate(-50%, -50%) scale(1.02) rotate(var(--r1)); opacity: .85; }
    100% { transform: translate(-50%, -50%) scale(.55) rotate(var(--r0)); opacity: 0; }
}

/* ---- below 992px: stacked hero (design has no mobile spec) ---- */
@media (max-width: 991px) {
    .l-hero {
        height: auto;
    }

    .l-hero__stage {
        position: relative;
        height: auto;
        display: flex;
        flex-direction: column;
        gap: 40px;
        padding: calc(110px + env(safe-area-inset-top, 0px)) 20px 0;
    }

    .l-hero__copy {
        order: 1;
        position: relative;
        left: auto;
        top: auto;
        max-width: 100%;
    }

    .l-hero__fw,
    .l-hero__halo {
        display: none;
    }

    .l-hero__card {
        order: 2;
        position: relative;
        right: auto;
        top: auto;
        width: min(100%, 520px);
        margin: 0 auto;
        transform: rotate(-2deg);
    }

    .l-hero__card-media {
        height: min(90vw, 520px);
    }

    .l-hero__eyebrow {
        font-size: 11px;
    }

    .l-ribbon {
        order: 3;
        position: relative;
        left: auto;
        right: auto;
        top: auto;
        margin: 0 -28%;
        transform: rotate(-5deg);
    }

    .l-ribbon__text {
        font-size: 40px;
    }
}

@media (prefers-reduced-motion: reduce) {
    .l-hero__fw,
    .l-hero__halo {
        display: none;
    }

    .landing .l-hero__title-accent {
        animation: none;
    }

    .l-hero__card {
        transition: none;
    }
}

/* =====================
   Features intro (#7856 design port)
   Values from the design file. The sparkle field sits above the heading
   (positioned, z-index 0, painted after the in-flow text) exactly like the
   design; initFeatureSparkles() starts the sweeps/twinkles each time the
   section scrolls into view and pauses them when it leaves.
   ===================== */
.l-features {
    position: relative;
    padding: 120px 40px 64px;
    text-align: center;
    background: var(--l-base);
}

.l-features__sparks {
    position: absolute;
    inset: -40px 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.l-features__spark {
    position: absolute;
    opacity: 0;
}

.l-features__spark--sweep {
    left: 0;
    transform: translate(-50%, -50%) scale(.3);
}

.l-features__spark--twinkle {
    transform: translate(-50%, -50%) scale(.2);
}

.landing .l-features__title {
    margin: 0;
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: .94;
    font-size: clamp(44px, 7vw, 124px);
    text-wrap: balance;
    color: #111010;
}

.landing .l-features__title > span { /* #8185: direct children only -- not the .th-w words inside the gradient accent */
    display: inline;
    color: #FFFFFF;
}

.landing .l-features__title .l-features__title-accent {
    background: linear-gradient(90deg, #ff8fd4 0%, #f3a9ea 26%, #9ad2ff 54%, #6fb7ff 78%, #ff8fd4 100%);
    background-size: 240% auto;
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    animation: l-hero-gradient-flow 5s linear infinite;
}

.landing .l-features__lead {
    margin: 34px auto 0;
    max-width: 700px;
    font-size: clamp(17px, 1.4vw, 22px);
    line-height: 1.5;
    color: #FFFFFF;
}

/* =====================
   Card deck (#7856 design port)
   400vh section with a sticky stage; initCheerDeck() drives the card
   transforms (design formula: t = p * 3.15), the progress dot, and the
   per-card video clips (only the front card plays its clip window, then
   holds on the key frame).
   ===================== */
.l-deck {
    position: relative;
    height: 400vh;
    padding: 0 40px;
    background: var(--l-base);
}

.l-deck__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    overflow: clip;
    overflow-clip-margin: 90px;
}

.l-deck__progress {
    position: absolute;
    right: 6px;
    top: 50%;
    transform: translateY(-50%);
    width: 2px;
    height: 340px;
    background: #DED7C4;
}

.l-deck__progress-dot {
    position: absolute;
    left: -4px;
    top: var(--deck-dot, 0%);
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: #111010;
}

.l-deck__track {
    position: relative;
    width: 100%;
    height: min(84vh, 880px);
    min-height: 420px;
}

.l-deck__card {
    position: absolute;
    inset: 0;
    will-change: transform;
    border-radius: 36px;
    padding: clamp(22px, 2.4vw, 52px);
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr));
    gap: clamp(20px, 2.4vw, 40px);
    text-align: left;
    line-height: normal;
}

.l-deck__card--0 { z-index: 14; background: #3B2DC9; color: #FFFDF7; }
.l-deck__card--1 { z-index: 13; background: #111010; color: #FFFDF7; }
.l-deck__card--2 { z-index: 12; background: #C6F24E; color: #131A03; }
.l-deck__card--3 {
    z-index: 11;
    background: #5DAEE5;
    color: #FFFFFF;
    grid-template-rows: minmax(0, 1fr);
    align-items: stretch;
}

.l-deck__copy {
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(16px, 2.4vh, 30px);
    min-height: 0;
}

.landing .l-deck__title {
    margin: 0;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: .98;
    font-size: clamp(38px, 4.8vw, 84px);
    max-width: 15ch;
    color: inherit;
}

.l-deck__body {
    display: flex;
    flex-direction: column;
    gap: clamp(16px, 2.4vh, 28px);
    flex: none;
}

.landing .l-deck__lead {
    margin: 0;
    max-width: 46ch;
    font-size: clamp(18px, 1.55vw, 25px);
    line-height: 1.42;
}

.l-deck__card--0 .l-deck__lead { color: #CFC9F7; }
.l-deck__card--1 .l-deck__lead { color: #B4AFA3; }
.l-deck__card--2 .l-deck__lead { color: #2C3A0A; }

.landing .l-deck__quote {
    margin: 0;
    max-width: 34ch;
    font-size: 16px;
    line-height: 1.55;
    color: #E6E3FB;
}

.l-deck__tags {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.l-deck__tag {
    border: 1px solid #3A3833;
    border-radius: 999px;
    padding: 10px 18px;
    font-size: 14px;
    color: #D6D1C5;
}

.l-deck__card--2 .l-deck__tag {
    border-color: #9BBF4A;
    color: #2C3A0A;
}

.l-deck__media-col {
    display: grid;
    grid-template-rows: minmax(0, 1fr);
    gap: 16px;
    min-height: 0;
}

.l-deck__media-wrap {
    position: relative;
    min-height: 0;
    margin-right: clamp(-72px, -5vw, -32px);
    overflow: visible;
}

.l-deck__media {
    position: absolute;
    inset: 0;
    border-radius: 22px;
    overflow: hidden;
}

.l-deck__card--0 .l-deck__media { background: #2B1FA6; box-shadow: 0 30px 64px rgba(12, 7, 48, .5), 0 8px 20px rgba(12, 7, 48, .34); }
.l-deck__card--1 .l-deck__media { background: #1C1B19; box-shadow: 0 30px 64px rgba(0, 0, 0, .55), 0 8px 20px rgba(0, 0, 0, .4); }
.l-deck__card--2 .l-deck__media { background: #131A03; box-shadow: 0 30px 64px rgba(19, 26, 3, .42), 0 8px 20px rgba(19, 26, 3, .32); }
.l-deck__card--3 .l-deck__media { background: #2E86C8; box-shadow: 0 30px 64px rgba(6, 58, 80, .55), 0 8px 20px rgba(6, 58, 80, .4); }

.landing .l-deck__media img,
.landing .l-deck__media video {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

/* stickers breaking out of the media corners */
.l-deck__sticker {
    position: absolute;
    -webkit-mask-size: contain;
    mask-size: contain;
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    animation-name: l-heart-float;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
    pointer-events: none;
}

.l-deck__sticker--a { right: -6px; top: -30px; animation-duration: 3.4s; animation-delay: 0s; }
.l-deck__sticker--b { left: -34px; top: 44%; animation-duration: 2.9s; animation-delay: .7s; }
.l-deck__sticker--c { right: 16px; bottom: -30px; animation-duration: 3.1s; animation-delay: 1.5s; }

.l-deck__card--0 .l-deck__sticker { background: #FF5A7E; filter: drop-shadow(0 10px 18px rgba(17, 10, 60, .32)); }
.l-deck__card--0 .l-deck__sticker--a { width: 86px; height: 86px; }
.l-deck__card--0 .l-deck__sticker--b { width: 72px; height: 72px; }
.l-deck__card--0 .l-deck__sticker--c { width: 58px; height: 58px; }

.l-deck__card--1 .l-deck__sticker { background: #C6F24E; filter: drop-shadow(0 10px 18px rgba(0, 0, 0, .45)); }
.l-deck__card--1 .l-deck__sticker--a { width: 80px; height: 80px; }
.l-deck__card--1 .l-deck__sticker--b { width: 66px; height: 66px; }
.l-deck__card--1 .l-deck__sticker--c { width: 54px; height: 54px; }

.l-deck__card--2 .l-deck__sticker { background: #131A03; filter: drop-shadow(0 10px 18px rgba(19, 26, 3, .32)); }
.l-deck__card--2 .l-deck__sticker--a { width: 78px; height: 78px; }
.l-deck__card--2 .l-deck__sticker--b { width: 64px; height: 64px; }
.l-deck__card--2 .l-deck__sticker--c { width: 52px; height: 52px; }

.l-deck__card--3 .l-deck__sticker { background: #BDE9FF; filter: drop-shadow(0 10px 18px rgba(6, 58, 80, .45)); }
.l-deck__card--3 .l-deck__sticker--a { right: auto; left: -6px; width: 78px; height: 78px; }
.l-deck__card--3 .l-deck__sticker--b { left: auto; right: -34px; width: 64px; height: 64px; }
.l-deck__card--3 .l-deck__sticker--c { right: auto; left: 16px; width: 52px; height: 52px; }

.l-shape--crown {
    -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAACB0lEQVR42u2XMUscQRTHf6unHIgBQQQjNgeXVHYp0iSmEQQba0GQRGIdSGeSKvkAohb5BFGRIHYiJsHmKkFExOJW0MhVIeFAuDvk8tIc4k5mZvfQnb1i/tPdvPf+v3s7OzMLXl5eXl5eXnfTEEPZAuywk6X9PIIwn5V9gSsE4YrRLOy7OEBao0SXe4B3N/aCsOjafozrCMA1Yy7t85xG7AXhlLw7gOX/7AVhyZX9uNZeEMbvWnqVYmzMABUjQIUHsflFVsyTa9R5T4+1wLbRXhA2rLk9fKDOF3PAJwThhCfGiFmrvSDMGHOfcoIgfDQDvGwVabJMn2Z+lGosQJVhTWY/q/xtRcyZAZ7fKvSTKWU2oBRrLwg/CJTMqci6eWYGGFFKrUcO27eJ7AXhTeTA3lRmh23LpKYE/+bVzd7XSAzQ4HGrZ6/5o8zV7C/JsabcPgV6NXufbRyRo6h9ZEd2gC1Dwe9t2dsyvqqHalRnBrAXbW9qpozQDlBOfSOPAQhTByh3GIC6ZXTToDtF+yY5eweanLtcAWguk+WsAUKXK8A9QOaPoPM6EGiu3LUUAXI04zpQp5Ka/YVqj/abLnS3AlwDhMkAyi474OUVaH9dYILBe3b6xS6fk4VOtn0DTjomk72G06n1ezoZwGFqAAkrD7KXygP4pltXgQHiEQ/v+d9f+n3Qq0P1D3U+32OTkXbtAAAAAElFTkSuQmCC");
    mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAACB0lEQVR42u2XMUscQRTHf6unHIgBQQQjNgeXVHYp0iSmEQQba0GQRGIdSGeSKvkAohb5BFGRIHYiJsHmKkFExOJW0MhVIeFAuDvk8tIc4k5mZvfQnb1i/tPdvPf+v3s7OzMLXl5eXl5eXnfTEEPZAuywk6X9PIIwn5V9gSsE4YrRLOy7OEBao0SXe4B3N/aCsOjafozrCMA1Yy7t85xG7AXhlLw7gOX/7AVhyZX9uNZeEMbvWnqVYmzMABUjQIUHsflFVsyTa9R5T4+1wLbRXhA2rLk9fKDOF3PAJwThhCfGiFmrvSDMGHOfcoIgfDQDvGwVabJMn2Z+lGosQJVhTWY/q/xtRcyZAZ7fKvSTKWU2oBRrLwg/CJTMqci6eWYGGFFKrUcO27eJ7AXhTeTA3lRmh23LpKYE/+bVzd7XSAzQ4HGrZ6/5o8zV7C/JsabcPgV6NXufbRyRo6h9ZEd2gC1Dwe9t2dsyvqqHalRnBrAXbW9qpozQDlBOfSOPAQhTByh3GIC6ZXTToDtF+yY5eweanLtcAWguk+WsAUKXK8A9QOaPoPM6EGiu3LUUAXI04zpQp5Ka/YVqj/abLnS3AlwDhMkAyi474OUVaH9dYILBe3b6xS6fk4VOtn0DTjomk72G06n1ezoZwGFqAAkrD7KXygP4pltXgQHiEQ/v+d9f+n3Qq0P1D3U+32OTkXbtAAAAAElFTkSuQmCC");
}

.l-shape--star {
    -webkit-mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAACRUlEQVR42u2ZQWsTQRTHf8YNNCRaD5ZQycGTCB5arCB+ALHSFosgHqSlB/EjFHqx/Q5Ve/AieBb9Ah48lUooLfTkVWhpD4J0QTeVjgeXsEtmN7PzZndA8t4hIUzm/d//vfx33gRG5tkuCr8/TZtjyQY1IYAVVnzyV+eEE3ESAltEoXjkD8AnFIqPvsJP0EOh6HHFTxM+ox53wrIfBvZQse/6CD/dD69Q3Ky+BOnf/wsfCpBkoHI1WEyFVygWfChA0j/4UICkW6pBTaQA6a5Y8qEASe/6UQChGtTECpC05z4UQKgG5keyca5yjes84XHmmiY/+MNlxqgRmW17IX6d5A4tWlyilfAG4/FnYxZc/eaUkJCf/CKM/bT/rstRcnHAq0xiy/BNgkHES0SVBI+yFWOGw9LDHzKTL7LbpYbfZmJY6wS8rrbyOiujG6JizwrX3TCk8mV3g0Hl9d3wptrKl9ENkfyUIOkGi8q77AbLyuu7Yavayg9apzCAjtsT0VxhyA/dAnhQGMCsywIEhIVLEJr1gBkD92gWBt3krjsAdnQ6LELXSge+upsE7XTw3GRaNCnB/dwhbT/nxO2oCO8zMuyxTkCdDc2s/M/fuQGgn4T2uNVfMcVBxqTkwG5n5p4e2PQ8TMkBrOXmnjQdD6tyAF+G5J7Pw2dp+CZnBrln83BmoaEZt2E9Xho+4dM8zMsAbBXIXc/DpgzA90K563j4Jgl/wyL3QR469jckT9lhWfCn1DFvOadtf5vecKKkbnYZ2cj+W/sLtauQIhRYhwMAAAAASUVORK5CYII=");
    mask-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAQAAAAAYLlVAAACRUlEQVR42u2ZQWsTQRTHf8YNNCRaD5ZQycGTCB5arCB+ALHSFosgHqSlB/EjFHqx/Q5Ve/AieBb9Ah48lUooLfTkVWhpD4J0QTeVjgeXsEtmN7PzZndA8t4hIUzm/d//vfx33gRG5tkuCr8/TZtjyQY1IYAVVnzyV+eEE3ESAltEoXjkD8AnFIqPvsJP0EOh6HHFTxM+ox53wrIfBvZQse/6CD/dD69Q3Ky+BOnf/wsfCpBkoHI1WEyFVygWfChA0j/4UICkW6pBTaQA6a5Y8qEASe/6UQChGtTECpC05z4UQKgG5keyca5yjes84XHmmiY/+MNlxqgRmW17IX6d5A4tWlyilfAG4/FnYxZc/eaUkJCf/CKM/bT/rstRcnHAq0xiy/BNgkHES0SVBI+yFWOGw9LDHzKTL7LbpYbfZmJY6wS8rrbyOiujG6JizwrX3TCk8mV3g0Hl9d3wptrKl9ENkfyUIOkGi8q77AbLyuu7Yavayg9apzCAjtsT0VxhyA/dAnhQGMCsywIEhIVLEJr1gBkD92gWBt3krjsAdnQ6LELXSge+upsE7XTw3GRaNCnB/dwhbT/nxO2oCO8zMuyxTkCdDc2s/M/fuQGgn4T2uNVfMcVBxqTkwG5n5p4e2PQ8TMkBrOXmnjQdD6tyAF+G5J7Pw2dp+CZnBrln83BmoaEZt2E9Xho+4dM8zMsAbBXIXc/DpgzA90K563j4Jgl/wyL3QR469jckT9lhWfCn1DFvOadtf5vecKKkbnYZ2cj+W/sLtauQIhRYhwMAAAAASUVORK5CYII=");
}

/* card 4: creator tools -- title + media left, tile grid right */
.l-deck__tools-left {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(14px, 2vh, 26px);
    min-height: 0;
}

.landing .l-deck__tools-lead {
    margin: 18px 0 0;
    max-width: 46ch;
    font-size: clamp(18px, 1.55vw, 25px);
    line-height: 1.42;
    color: #FFFFFF;
}

.l-deck__card--3 .l-deck__media-wrap {
    margin-right: 0;
    margin-left: clamp(-72px, -5vw, -32px);
}

.l-deck__tools-right {
    display: grid;
    grid-template-rows: auto minmax(0, 1fr);
    gap: clamp(18px, 3vh, 44px);
    min-height: 0;
}

/* invisible copy of the title block: keeps the tile grid aligned under it, as in the design */
.l-deck__tools-spacer {
    visibility: hidden;
}

.landing .l-deck__tools-spacer h3 {
    margin: 0;
    font-weight: 900;
    letter-spacing: -.04em;
    line-height: .98;
    font-size: clamp(34px, 4.2vw, 74px);
    max-width: 16ch;
}

.landing .l-deck__tools-spacer p {
    margin: 18px 0 0;
    max-width: 46ch;
    font-size: clamp(16px, 1.3vw, 21px);
    line-height: 1.45;
}

.l-deck__tools-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    grid-template-rows: repeat(3, minmax(0, 1fr));
    align-content: stretch;
    align-items: stretch;
    gap: 10px;
    height: 100%;
    min-height: 0;
}

.l-deck__tile {
    border: 1px solid #A8D8F2;
    border-radius: 22px;
    padding: clamp(8px, 1.2vh, 14px) clamp(12px, 1.6vh, 18px);
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-height: 0;
    overflow: hidden;
}

.l-deck__tile-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.l-deck__tile-head svg {
    flex: none;
    color: #FFFFFF;
}

.l-deck__tile-title {
    font-size: clamp(15px, 1.15vw, 18px);
    font-weight: 800;
}

.l-deck__tile-desc {
    font-size: clamp(13px, .95vw, 15px);
    line-height: 1.35;
    color: #FFFFFF;
}

/* pause decorative loops while off screen */
.l-features.is-offscreen .l-features__title-accent,
.l-deck.is-offscreen .l-deck__sticker {
    animation-play-state: paused;
}

/* ---- block 2 keyframes (design file values) ---- */
@keyframes l-feat-sweep {
    0%   { transform: translate(-50%, -50%) translate(-8vw, 0) scale(.25) rotate(0deg); opacity: 0; }
    8%   { opacity: 1; }
    16%  { transform: translate(-50%, -50%) translate(10vw, var(--a)) scale(1) rotate(40deg); }
    30%  { transform: translate(-50%, -50%) translate(28vw, var(--b)) scale(.82) rotate(90deg); }
    44%  { transform: translate(-50%, -50%) translate(46vw, var(--a)) scale(1.05) rotate(145deg); }
    58%  { transform: translate(-50%, -50%) translate(64vw, var(--b)) scale(.85) rotate(195deg); }
    72%  { transform: translate(-50%, -50%) translate(82vw, var(--a)) scale(1) rotate(250deg); }
    86%  { transform: translate(-50%, -50%) translate(98vw, var(--b)) scale(.8) rotate(300deg); opacity: .85; }
    100% { transform: translate(-50%, -50%) translate(114vw, 0) scale(.25) rotate(340deg); opacity: 0; }
}

@keyframes l-feat-twinkle {
    0%, 100% { transform: translate(-50%, -50%) scale(.2) rotate(0deg); opacity: 0; }
    14%      { transform: translate(-50%, -50%) scale(1.15) rotate(35deg); opacity: 1; }
    44%      { transform: translate(-50%, -50%) scale(.85) rotate(70deg); opacity: .9; }
    70%      { transform: translate(-50%, -50%) scale(1) rotate(100deg); opacity: .5; }
}

@keyframes l-heart-float {
    0%, 100% { transform: translateY(0) rotate(-6deg) scale(1); }
    28%      { transform: translateY(-11px) rotate(5deg) scale(1.09); }
    56%      { transform: translateY(-4px) rotate(-4deg) scale(.97); }
    80%      { transform: translateY(-8px) rotate(3deg) scale(1.04); }
}

/* ---- below 992px: deck unpinned, cards stacked (design has no mobile spec) ---- */
@media (max-width: 991px) {
    .l-features {
        padding: 72px 20px 40px;
    }

    .l-deck {
        height: auto;
        padding: 0 20px 24px;
    }

    .l-deck__stage {
        position: static;
        height: auto;
        display: block;
        overflow: visible;
    }

    .l-deck__progress,
    .l-deck__tools-spacer {
        display: none;
    }

    .l-deck__track {
        height: auto;
        min-height: 0;
        display: flex;
        flex-direction: column;
        gap: 24px;
    }

    .l-deck__card {
        position: relative;
        inset: auto;
        transform: none !important;
        grid-template-columns: 1fr;
        border-radius: 28px;
        padding: 28px 24px 36px;
    }

    /* mockup (mobile design port) leads every card with its media, text below */
    .l-deck__media-col,
    .l-deck__card--3 .l-deck__tools-left > .l-deck__media-wrap {
        order: -1;
    }

    .l-deck__card--3 {
        grid-template-rows: none;
    }

    .l-deck__media-wrap,
    .l-deck__card--3 .l-deck__media-wrap {
        margin: 0;
        aspect-ratio: 4 / 3;
        max-width: 100%;
    }

    .l-deck__tools-left,
    .l-deck__tools-right {
        grid-template-rows: none;
    }

    .l-deck__tools-grid {
        grid-template-rows: none;
        height: auto;
    }

    .l-deck__tile {
        padding: 14px 16px;
    }
}

/* mockup (mobile design port) keeps the tool chips 2-up even on phones */

@media (prefers-reduced-motion: reduce) {
    .l-features__sparks {
        display: none;
    }

    .landing .l-features__title .l-features__title-accent,
    .l-deck__sticker {
        animation: none;
    }
}

/* =====================
   Why creators stay (#7856 design port)
   Values from the design file. The design wraps every post-hero section in
   max-width:2160px + padding 0 40px, so the section carries the 40px side
   padding and .l-why__inner caps the content at 2160 - 2*40 = 2080px.
   Hover/press are the design's style-hover / style-active states as plain
   CSS; each card's tilt comes from its --tilt custom property (Blade).
   ===================== */
.l-why {
    padding: 140px 40px 40px;
    background: var(--l-base);
    color: #111010;
    line-height: normal;
}

.l-why__inner {
    max-width: 2080px;
    margin: 0 auto;
}

.l-why__header {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: 24px;
}

.landing .l-why__title {
    margin: 0;
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: .94;
    font-size: clamp(40px, 5.5vw, 92px);
    max-width: 18ch;
    color: #FFFFFF;
}

.landing .l-why__about {
    background: #111010;
    color: #F7F3E9;
    padding: 16px 28px;
    border-radius: 999px;
    font-size: 14px;
    font-weight: 800;
    letter-spacing: .08em;
    line-height: normal;
    text-transform: uppercase;
    /* design: no transition (instant colour swap); beats main.css a{transition:.2s} */
    transition: 0s;
}

.landing .l-why__about:hover {
    background: #3B2DC9;
    color: #F7F3E9;
}

.l-why__grid {
    margin-top: 48px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
    gap: 20px;
}

.l-why__card {
    background: #FFFDF7;
    border-radius: 28px;
    padding: 28px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-height: 210px;
    cursor: pointer;
    will-change: transform;
    transform: translateY(0) rotate(0deg) scale(1);
    box-shadow: 0 2px 0 rgba(120, 116, 104, .10);
    transition: transform .62s cubic-bezier(.34, 1.8, .42, 1), box-shadow .35s ease;
}

.l-why__card:hover {
    transform: translateY(-14px) rotate(var(--tilt, 0deg)) scale(1.035);
    box-shadow: 0 26px 44px rgba(90, 59, 214, .22);
}

.l-why__card:active {
    transform: translateY(-4px) rotate(0deg) scale(.975);
    transition: transform .12s ease;
}

.landing .l-why__kicker {
    font-family: "DM Mono", "Prompt", ui-monospace, monospace;
    font-size: 13px;
    font-weight: 400;
    line-height: normal;
    color: #8B8375;
}

.landing .l-why__card-title {
    margin: 0;
    font-size: 26px;
    font-weight: 900;
    letter-spacing: -.03em;
    line-height: 1.05;
    color: #111010;
}

.landing .l-why__card-text {
    margin: 0;
    font-size: 16px;
    font-weight: 400;
    line-height: 1.5;
    color: #5C5648;
}

/* ---- below 992px (design has no mobile spec): tighter padding, and the
   grid is capped at 2 per row -- 2x2 on tablets, 1 column once two 280px
   cards no longer fit (phones) -- instead of the auto-fit 3+1 split ---- */
@media (max-width: 991px) {
    .l-why {
        padding: 72px 20px 40px;
    }

    .l-why__grid {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

/* mockup (mobile design port): 1 column on phones -- the auto-fit calc()
   above forced a 280px-minimum track even when 50% was narrower, overflowing
   the viewport instead of collapsing to 1 column. */
@media (max-width: 767px) {
    .l-why__grid {
        grid-template-columns: 1fr;
    }
}

@media (prefers-reduced-motion: reduce) {
    .l-why__card {
        transition: box-shadow .35s ease;
    }

    .l-why__card:hover,
    .l-why__card:active {
        transform: none;
    }
}

/* Press parity with the rendered design: there only card 1 squishes on
   press -- cards 2-4 keep their hover lift (see NOTES, block 3). */
.l-why__card:not(:first-child):active {
    transform: translateY(-14px) rotate(var(--tilt)) scale(1.035);
}

/* =====================
   FAQ (#7856 design port)
   Values from the design file. White full-bleed section; every answer is
   always visible (no accordion). The sparkle field is positioned (z-index 0)
   so it paints over the in-flow rows but under the heading block, which
   keeps an identity transform (its own stacking context) exactly like the
   design. initFaqReveal() hides the heading block and rises it in when it
   scrolls into view; initFaqSparkles() restarts the sparkles each time the
   section comes into view and pauses them when it leaves.
   ===================== */
.l-faq {
    position: relative;
    padding: 120px 40px 80px;
    background: #FFFFFF;
    color: #111010;
    overflow: hidden;
}

.l-faq__sparks {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    z-index: 0;
}

.l-faq__spark {
    position: absolute;
    opacity: 0;
}

.l-faq__spark--sweep {
    left: 0;
    transform: translate(-50%, -50%) scale(.25);
}

.l-faq__spark--twinkle {
    transform: translate(-50%, -50%) scale(.2);
}

.l-faq__head {
    display: grid;
    grid-template-columns: minmax(0, 110px) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 40px);
    align-items: start;
}

.l-faq__label {
    font-family: "DM Mono", "Prompt", ui-monospace, monospace;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: #8B8375;
    padding-top: 1.1em;
}

/* visible by default (no-JS); initFaqReveal() adds .is-hidden first */
.l-faq__reveal {
    opacity: 1;
    transform: translateY(0) scale(1);
    transition: opacity .5s ease, transform .92s cubic-bezier(.22, 1.5, .34, 1);
}

.l-faq__reveal.is-hidden {
    opacity: 0;
    transform: translateY(46px) scale(.94);
}

.landing .l-faq__title {
    margin: 0;
    font-weight: 900;
    letter-spacing: -.045em;
    line-height: .9;
    font-size: clamp(40px, 6vw, 96px);
    max-width: 11ch;
    color: #111010;
}

.landing .l-faq__title span {
    display: inline;
}

.landing .l-faq__title .l-faq__title-a {
    color: #7C4DFF;
}

.landing .l-faq__title .l-faq__title-b {
    color: #C05CE8;
}

.landing .l-faq__intro {
    margin: clamp(28px, 4vw, 54px) 0 0;
    margin-left: auto;
    max-width: 44ch;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #5C5648;
    text-align: left;
}

.l-faq__list {
    margin-top: clamp(40px, 6vw, 84px);
    border-top: 1px solid rgba(19, 16, 16, .14);
}

.l-faq__row {
    display: grid;
    grid-template-columns: minmax(0, 110px) minmax(0, 1.05fr) minmax(0, 1fr);
    gap: clamp(16px, 3vw, 40px);
    align-items: start;
    padding: clamp(24px, 3vw, 38px) 0;
    border-bottom: 1px solid rgba(19, 16, 16, .14);
    transform-origin: left center;
    transition: transform .35s cubic-bezier(.22, 1, .36, 1);
}

.l-faq__row:hover {
    transform: scale(1.045);
}

.l-faq__num {
    font-family: "DM Mono", "Prompt", ui-monospace, monospace;
    font-size: 12px;
    font-weight: 400;
    line-height: normal;
    color: #8B8375;
    padding-top: .5em;
}

.landing .l-faq__q {
    margin: 0;
    font-size: clamp(22px, 2.4vw, 34px);
    font-weight: 800;
    letter-spacing: -.03em;
    line-height: 1.08;
    color: #131010;
    transition: color .25s ease;
    cursor: default;
}

.landing .l-faq__q:hover {
    color: #7C4DFF;
}

.landing .l-faq__a {
    margin: 0;
    font-size: 15px;
    font-weight: 400;
    line-height: 1.6;
    color: #5C5648;
    padding-top: .35em;
}

/* ---- block 4 keyframes (design file values) ---- */
@keyframes l-faq-sweep {
    0%   { transform: translate(-50%, -50%) translate(114vw, 0) scale(.25) rotate(0deg); opacity: 0; }
    8%   { opacity: 1; }
    16%  { transform: translate(-50%, -50%) translate(96vw, var(--a)) scale(1) rotate(-40deg); }
    30%  { transform: translate(-50%, -50%) translate(78vw, var(--b)) scale(.82) rotate(-90deg); }
    44%  { transform: translate(-50%, -50%) translate(60vw, var(--a)) scale(1.05) rotate(-145deg); }
    58%  { transform: translate(-50%, -50%) translate(42vw, var(--b)) scale(.85) rotate(-195deg); }
    72%  { transform: translate(-50%, -50%) translate(24vw, var(--a)) scale(1) rotate(-250deg); }
    86%  { transform: translate(-50%, -50%) translate(8vw, var(--b)) scale(.8) rotate(-300deg); opacity: .85; }
    100% { transform: translate(-50%, -50%) translate(-10vw, 0) scale(.25) rotate(-340deg); opacity: 0; }
}

/* ---- below 992px: one stacked column (design has no mobile spec) ---- */
@media (max-width: 991px) {
    .l-faq {
        padding: 72px 20px 56px;
    }

    .l-faq__head {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px;
    }

    .l-faq__label {
        padding-top: 0;
    }

    .landing .l-faq__intro {
        margin: 24px 0 0;
    }

    .l-faq__row {
        grid-template-columns: minmax(0, 1fr);
        gap: 10px;
    }

    .l-faq__num {
        padding-top: 0;
    }

    .landing .l-faq__a {
        padding-top: 0;
    }
}

@media (prefers-reduced-motion: reduce) {
    .l-faq__sparks {
        display: none;
    }

    .l-faq__reveal,
    .l-faq__row {
        transition: none;
    }
}

/* =====================
   Contact (block 5, #7856 design port)
   Values from the design file. 240vh section with a sticky 100vh white
   stage. initContactPin() writes the scroll progress p2 into three custom
   properties on .l-contact (design renderVals mascotT / copyIn / copyT /
   ctaT) and toggles .is-fw-on past p2 = .6 (design fwFade +
   syncContactFw). Defaults = the finished state, so the block still reads
   correctly before/without JS.
   Stacking (as in the design): hand (z auto) < firework field (z 1) <
   copy + CTA grid (z 2), so the fireworks never paint over the text.
   ===================== */
.l-contact {
    --l-contact-scale: 1;
    --l-contact-in: 1;
    --l-contact-x: 0px;
    position: relative;
    height: 240vh;
    color: #111010;
    line-height: normal;
}

.l-contact__stage {
    position: sticky;
    top: 0;
    height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #FFFFFF;
    overflow: hidden;
}

/* ---- firework field around the hand ---- */
.l-contact__fw {
    position: absolute;
    left: 50%;
    top: 50%;
    width: min(42vh, 30vw, 430px);
    height: min(48vh, 34vw, 490px);
    transform: translate(-50%, -50%);
    pointer-events: none;
    overflow: visible;
    z-index: 1;
    opacity: 0;
    transition: opacity .45s ease;
}

.l-contact.is-fw-on .l-contact__fw {
    opacity: 1;
}

.l-contact__cfw {
    position: absolute;
    transform: translate(-50%, -50%) scale(.2);
    opacity: 0;
}

.l-contact__cfw--shoot {
    left: 50%;
    top: 50%;
    width: 3px;
    height: 54px;
    border-radius: 3px;
    transform-origin: 50% 100%;
    transform: translate(-50%, -100%) rotate(var(--rot)) scaleY(.2);
}

.l-contact__cfw--flash {
    width: 110px;
    height: 110px;
    border-radius: 50%;
}

.l-contact__cfw--twinkle {
    width: 15px;
    height: 15px;
}

/* pause the looping twinkles while the section is off screen */
.l-contact.is-offscreen .l-contact__cfw {
    animation-play-state: paused !important;
}

/* ---- the hand (blue line-art icon, used as-is) ---- */
.l-contact__mascot {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) scale(var(--l-contact-scale));
    will-change: transform;
}

.landing .l-contact__hand {
    width: min(42vh, 30vw, 430px);
    max-width: none;
    height: auto;
    display: block;
}

/* ---- copy (left) | gap | CTA (right) ---- */
.l-contact__grid {
    position: relative;
    z-index: 2;
    width: 100%;
    padding: clamp(28px, 4vw, 72px);
    display: grid;
    grid-template-columns: minmax(0, 1fr) min(32vw, 420px) minmax(0, 1fr);
    gap: clamp(16px, 2vw, 40px);
    align-items: center;
    pointer-events: none;
    text-align: left;
}

.l-contact__copy {
    opacity: var(--l-contact-in);
    transform: translateX(calc(var(--l-contact-x) * -1));
}

.landing .l-contact__eyebrow {
    font-family: "DM Mono", "Prompt", ui-monospace, monospace;
    font-size: 13px;
    font-weight: 400;
    letter-spacing: 0.08em;
    line-height: normal;
    text-transform: uppercase;
    color: #6B5BD6;
}

.landing .l-contact__title {
    margin: 18px 0 0;
    font-family: var(--heading-font);
    font-weight: 900;
    letter-spacing: -0.04em;
    line-height: 1.02;
    font-size: clamp(32px, 3.6vw, 62px);
    color: #1B1140;
    max-width: 14ch;
    text-transform: none;
}

.landing .l-contact__title .l-contact__accent {
    display: inline;
    background: linear-gradient(90deg, #ff8fd4 0%, #a878f6 52%, #6fb7ff 100%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.landing .l-contact__text {
    margin: 22px 0 0;
    max-width: 34ch;
    font-size: clamp(15px, 1.1vw, 18px);
    font-weight: 400;
    line-height: 1.5;
    color: #3A2C72;
}

.l-contact__cta-col {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: clamp(28px, 6vh, 72px);
    opacity: var(--l-contact-in);
    transform: translateX(var(--l-contact-x));
    pointer-events: auto;
}

.landing .l-contact__cta {
    display: flex;
    align-items: center;
    gap: 14px;
    color: #3B2DC9;
    text-decoration: none;
    transition: none;
}

.landing .l-contact__cta:hover {
    opacity: 0.85;
    color: #111010;
}

.landing .l-contact__cta-pill {
    display: block;
    background: linear-gradient(90deg, #ff8fd4 0%, #a878f6 52%, #6fb7ff 100%);
    color: #FFFFFF;
    border-radius: 999px;
    padding: 18px 34px;
    font-size: clamp(20px, 2vw, 36px);
    font-weight: 900;
    letter-spacing: -0.03em;
    line-height: normal;
    white-space: nowrap;
    box-shadow: 0 16px 36px rgba(124, 109, 240, 0.32);
}

/* the design keeps an empty 26px/.8 line under the CTA; it nudges the
   pill 37px above centre, so it is kept as a spacer */
.l-contact__cta-deco {
    display: block;
    width: 0;
    height: calc(26px * .8);
}

/* ---- block 5 keyframes (design file values; fwSpark / fwFlash /
   featTwinkle reuse l-fw-spark / l-fw-flash / l-feat-twinkle) ---- */
@keyframes l-cfw-shoot {
    0%   { transform: translate(-50%, -100%) rotate(var(--rot)) scaleY(.15); opacity: 0; }
    8%   { opacity: 1; }
    34%  { transform: translate(calc(-50% + var(--dx) * var(--cfw-k, 1)), calc(-100% + var(--dy) * var(--cfw-k, 1))) rotate(var(--rot)) scaleY(1); opacity: 1; }
    44%  { transform: translate(calc(-50% + var(--dx) * var(--cfw-k, 1)), calc(-100% + var(--dy) * var(--cfw-k, 1))) rotate(var(--rot)) scaleY(.2); opacity: 0; }
    100% { opacity: 0; }
}

/* ---- below 992px / reduced motion: no pin, finished state, one column ---- */
@media (max-width: 991px) {
    .l-contact {
        height: auto;
        background: #FFFFFF;
    }

    .l-contact__stage {
        position: relative;
        height: auto;
        flex-direction: column;
        gap: 36px;
        padding: 72px 20px 88px;
    }

    .l-contact__fw,
    .l-contact__gap,
    .l-contact__cta-deco {
        display: none;
    }

    .l-contact__grid {
        display: contents;
    }

    .l-contact__copy {
        order: 1;
        opacity: 1;
        transform: none;
        width: 100%;
        text-align: center;
        pointer-events: auto;
    }

    .landing .l-contact__title,
    .landing .l-contact__text {
        margin-left: auto;
        margin-right: auto;
    }

    .l-contact__mascot {
        order: 2;
        position: relative;
        left: auto;
        top: auto;
        transform: none;
        will-change: auto;
    }

    .landing .l-contact__hand {
        width: min(62vw, 320px);
    }

    .l-contact__cta-col {
        order: 3;
        opacity: 1;
        transform: none;
    }
}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
    .l-contact {
        height: 100vh;
    }

    .l-contact__stage {
        position: relative;
    }

    .l-contact__fw {
        display: none;
    }
}

/* =====================
   Global floating CTA pill (#7856 design port, block 6c)
   Page-wide chrome, not scoped to any one section. Values verbatim from the
   design file's fixed pill: opacity {{ pillIn }} / pointer-events
   {{ pillHit }} flip once scrollY > 55% of the viewport height, with a .25s
   opacity fade. See initFloatingCta() in landing.js.
   ===================== */
.l-floating-cta {
    position: fixed;
    left: 50%;
    bottom: 30px;
    bottom: calc(30px + env(safe-area-inset-bottom, 0px));
    transform: translateX(-50%);
    z-index: 60;
    display: flex;
    align-items: center;
    gap: 18px;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
    background: rgba(120, 116, 104, 0.42);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    border-radius: 999px;
    padding: 12px 12px 12px 34px;
    max-width: calc(100vw - 64px);
    color: #111010;
    line-height: normal;
}

.l-floating-cta.is-visible {
    opacity: 1;
    pointer-events: auto;
}

.l-floating-cta__text {
    font-size: 19px;
    color: #FFFDF7;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.l-floating-cta .l-floating-cta__btn {
    display: flex;
    align-items: center;
    gap: 14px;
    background: #FFFDF7;
    border-radius: 999px;
    padding: 12px 14px 12px 26px;
    color: #111010;
    flex: none;
    text-decoration: none;
    line-height: normal;
    transition: 0s;
}

.l-floating-cta .l-floating-cta__btn:hover {
    color: #3B2DC9;
}

.l-floating-cta__label {
    font-size: 14px;
    font-weight: 900;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    white-space: nowrap;
}

.l-floating-cta .l-floating-cta__dots {
    display: flex;
}

.l-floating-cta__dot {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    background: #A878F6;
}

.l-floating-cta__dot--blue {
    background: #6FB7FF;
    margin-left: -12px;
}

/* ===================== Creator strip =====================
   #7856 design port (block 6a): the design's reels marquee. White band,
   10 cards x2 sliding translateX(0 -> -50%) over 38s linear; hovering the
   strip pauses it (design onMouseOver/Out -> animation-play-state), hovering
   a card lifts it. .is-paused = strip off screen (initCreatorReels()). */
.l-creators {
    background: #FFFFFF;
    color: #111010;
    overflow: hidden;
    padding: clamp(80px, 10vh, 130px) 0 clamp(72px, 9vh, 120px);
    line-height: normal;
}

.l-creators__track {
    display: flex;
    gap: 16px;
    width: max-content;
    animation: l-marquee 38s linear infinite;
}

.l-creators__track:hover,
.l-creators__track.is-paused {
    animation-play-state: paused;
}

@keyframes l-marquee {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50%);
    }
}

.l-creators__card {
    position: relative;
    flex: none;
    width: 208px;
    aspect-ratio: 9 / 16;
    border-radius: 24px;
    overflow: hidden;
    background: #111010;
    cursor: pointer;
    box-shadow: 0 10px 26px rgba(17, 16, 16, 0.16);
    transition: transform .45s cubic-bezier(.34, 1.5, .42, 1), box-shadow .3s ease;
}

.l-creators__card:hover {
    transform: translateY(-8px) scale(1.03);
    box-shadow: 0 22px 42px rgba(90, 59, 214, 0.28);
}

.landing .l-creators__img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;
    object-fit: cover;
    display: block;
}

.l-creators__shade {
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(17, 16, 16, 0.12) 0%, rgba(17, 16, 16, 0) 46%, rgba(17, 16, 16, 0.55) 100%);
}

.l-creators__live {
    position: absolute;
    left: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: #E1123B;
    border-radius: 999px;
    padding: 5px 11px;
    font-size: 11px;
    font-weight: 900;
    letter-spacing: 0.08em;
    color: #FFFFFF;
}

.l-creators__live-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #FFFFFF;
}

.l-creators__viewers {
    position: absolute;
    right: 12px;
    top: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
    background: rgba(17, 16, 16, 0.66);
    border-radius: 999px;
    padding: 5px 10px;
    font-family: "DM Mono", "Prompt", ui-monospace, monospace;
    font-size: 11px;
    font-weight: 700;
    color: #FFFFFF;
}

.l-creators__viewers svg {
    flex: none;
}

.l-creators__play {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.24);
    border: 1.5px solid rgba(255, 255, 255, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #FFFFFF;
    font-size: 17px;
    padding-left: 3px;
}

.l-creators__meta {
    position: absolute;
    left: 12px;
    right: 12px;
    bottom: 12px;
    display: flex;
    flex-direction: column;
    gap: 3px;
}

.l-creators__name {
    font-size: 14px;
    font-weight: 800;
    letter-spacing: -0.02em;
    color: #FFFFFF;
}

.l-creators__tag {
    font-family: "DM Mono", "Prompt", ui-monospace, monospace;
    font-size: 10px;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: rgba(255, 255, 255, 0.86);
}

/* ===================== Footer =====================
   #7856 design port (block 6b): the design's <footer> -- a #111010 panel
   with 40px top corners sitting on a white band, auto-fit 180px grid.
   .landing-footer = the white band (and the font root), __panel = the dark
   footer itself. */
.landing-footer {
    background: #FFFFFF;
    color: #111010;
    line-height: normal;
}

.landing-footer__panel {
    background: #111010;
    color: #F7F3E9;
    border-radius: 40px 40px 0 0;
    padding: 72px 48px 120px;
}

.landing-footer__container {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
    gap: 40px;
}

.landing-footer .landing-footer__logo {
    height: 52px;
    width: auto;
    max-width: none;
    display: block;
}

.landing-footer__tagline {
    margin-top: 20px;
    font-size: 14px;
    color: #8B8375;
    max-width: 24ch;
}

.landing-footer__label {
    font-family: "DM Mono", "Prompt", ui-monospace, monospace;
    font-size: 12px;
    color: #8B8375;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

.landing-footer__links {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 16px;
    font-size: 16px;
}

.landing-footer .landing-footer__link {
    color: #F7F3E9;
    text-decoration: none;
    transition: 0s;
}

.landing-footer .landing-footer__link:hover {
    color: #C6F24E;
}

/* Features: plain #D6D1C5 labels in the design; kept as the existing
   in-page anchors, same colour, same hover as the other footer links. */
.landing-footer__links--muted,
.landing-footer .landing-footer__links--muted .landing-footer__link {
    color: #D6D1C5;
}

.landing-footer .landing-footer__links--muted .landing-footer__link:hover {
    color: #C6F24E;
}

/* Language pills, from the design's footer: every language is an outlined
   pill in a fixed order; the current one is the filled pill (#8036). */
.landing-footer__langs {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 16px;
}

.landing-footer .landing-footer__lang {
    border: 1px solid #3A3833;
    border-radius: 999px;
    padding: 8px 16px;
    font-size: 14px;
    font-weight: 400;
    color: #F7F3E9;
    text-decoration: none;
}

.landing-footer a.landing-footer__lang:hover {
    border-color: #C6F24E;
    color: #C6F24E;
}

.landing-footer .landing-footer__lang--current {
    border-color: #F7F3E9;
    background: #F7F3E9;
    color: #111010;
}

.landing-footer__bottom {
    margin-top: 56px;
    padding-top: 28px;
    border-top: 1px solid #2A2823;
    font-size: 14px;
    color: #8B8375;
}

/* ===================== Block 6 responsive =====================
   The design has no @media rules. Below 992px: same fonts/colours, tighter
   footer padding/corners (the auto-fit grid already stacks: 3 columns at
   768px, one column at 390px). Below 576px: smaller reel cards, and the
   floating pill drops its copy line (it would be ellipsised to a few
   letters) and keeps just the button. */
@media (max-width: 991px) {
    .landing-footer__panel {
        border-radius: 32px 32px 0 0;
        padding: 56px 32px 120px;
    }
}

@media (max-width: 575px) {
    /* #7995: reel sizes from the mobile design ("06 Live reels"): 148px
       cards, 10px insets, no viewer icon and no play button. */
    .l-creators {
        padding: 8px 0 64px;
    }

    .l-creators__track {
        gap: 12px;
        animation-duration: 34s;
    }

    .l-creators__card {
        width: 148px;
        border-radius: 20px;
        box-shadow: 0 8px 20px rgba(17, 16, 16, 0.16);
    }

    .l-creators__live {
        left: 10px;
        top: 10px;
        gap: 5px;
        padding: 4px 9px;
    }

    .l-creators__viewers {
        right: 10px;
        top: 10px;
        padding: 4px 8px;
    }

    .l-creators__viewers svg,
    .l-creators__play {
        display: none;
    }

    .l-creators__meta {
        left: 10px;
        right: 10px;
        bottom: 10px;
        gap: 2px;
    }

    .l-creators__tag {
        letter-spacing: 0.04em;
        color: #E6E3FB;
    }

    .landing-footer__panel {
        border-radius: 28px 28px 0 0;
        padding: 48px 24px 120px;
    }

    .landing-footer__container {
        gap: 32px;
    }

    .l-floating-cta {
        padding: 10px;
    }

    .l-floating-cta__text {
        display: none;
    }
}

@media (prefers-reduced-motion: reduce) {
    .l-creators {
        overflow-x: auto;
    }

    .l-creators__track {
        animation: none;
        padding: 0 16px;
    }

    .l-creators__card[aria-hidden="true"] {
        display: none;
    }

    .l-creators__card,
    .l-floating-cta {
        transition: none;
    }
}

/* ===================== Responsive ===================== */
@media (max-width: 991px) {
    .landing-header__toggle {
        display: block;
    }

    .landing-header__nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: #fff;
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 20px 24px;
        border-radius: 0 0 16px 16px;
        box-shadow: 0 12px 24px rgba(0, 0, 0, .1);
    }

    .landing-header__nav.show {
        display: flex;
    }

}

/* =====================
   Phone design port (CheerMe Landing Mobile, 390px artboard)
   Values are the mobile design file's own inline styles. Only <= 575px;
   tablet keeps the stacked fallback above. JS side: initCheerDeck() writes
   --deck-t per card and flips the dots, initContactPin() writes
   --l-contact-scale and fires the contact fireworks.
   ===================== */
.l-deck__dots,
.l-floating-cta__label-short {
    display: none;
}

/* plain inline: a global span{inline-block} would swallow the joining space */
.l-deck__more {
    display: inline;
}

@media (max-width: 575px) {
    /* ---- header: sticky frosted bar, nav inline ---- */
    .landing-header {
        padding: 14px 16px;
        padding-top: calc(14px + env(safe-area-inset-top, 0px));
        background: rgba(234, 246, 255, .82);
        -webkit-backdrop-filter: blur(14px);
        backdrop-filter: blur(14px);
        pointer-events: auto;
    }

    .landing-header__toggle {
        display: none;
    }

    .landing-header__nav {
        display: flex;
        position: static;
        flex-direction: row;
        align-items: center;
        background: transparent;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        gap: 8px;
    }

    .landing-header__logo img {
        height: 32px;
    }

    .landing-header__pill,
    .landing-header__pill--light {
        height: 44px;
        padding: 0 16px;
        font-size: 12px;
    }

    .landing-header__pill--dark {
        padding: 0 18px;
    }

    /* ---- hero: one grid column; halo shares the card's cell ---- */
    .l-hero {
        overflow-x: clip;
    }

    .l-hero__stage {
        display: grid;
        grid-template-columns: minmax(0, 1fr);
        gap: 0;
        padding: calc(104px + env(safe-area-inset-top, 0px)) 20px 0;
        overflow: visible;
        background:
            linear-gradient(180deg, rgba(99, 96, 230, 0) 70%, #6360e6 100%),
            linear-gradient(160deg, #eaf6ff 0%, #d3eaff 28%, #b0d4fb 52%, #93b6f4 72%, #7d7ae9 88%, #6a4ddb 100%);
    }

    .l-hero__copy {
        grid-row: 1;
        grid-column: 1;
    }

    .l-hero__badge {
        gap: 8px;
        padding: 9px 16px;
        font-size: 13px;
    }

    .l-hero__badge-dot {
        width: 8px;
        height: 8px;
    }

    .landing .l-hero__title {
        margin: 20px 0 0;
        font-size: clamp(52px, 15vw, 68px);
        line-height: .92;
    }

    .landing .l-hero__title br {
        display: none;
    }

    .landing .l-hero__cta {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 56px;
        margin-top: 24px;
        padding: 0 24px;
        box-shadow: 0 14px 30px rgba(31, 28, 20, .18);
    }

    .l-hero__fw {
        display: block;
        z-index: 0;
        --fw-k: .565;
    }

    .l-hero__fw > span {
        left: 50%;
        top: 300px;
    }

    .l-hero__fw-trail {
        width: 4px;
        height: 220px;
    }

    .l-hero__fw-flash {
        width: 180px;
        height: 180px;
    }

    .l-hero__card,
    .l-hero__halo {
        grid-row: 2;
        grid-column: 1;
        width: auto;
        margin: 40px 4px 0;
        transform: rotate(-2.5deg);
    }

    .l-hero__card {
        border-radius: 22px;
    }

    .l-hero__card-media {
        height: auto;
        aspect-ratio: 4 / 5;
        border-radius: 22px 22px 0 0;
    }

    .l-hero__halo {
        display: block;
        position: relative;
        right: auto;
        top: auto;
        height: auto;
        align-self: stretch;
        overflow: visible;
        z-index: 7;
    }

    .l-hero__hand--pink { left: 96% !important; top: 4% !important; width: 52px !important; }
    .l-hero__hand--lilac { left: 94% !important; top: 88% !important; width: 50px !important; }
    .l-hero__hand--blue { left: 2% !important; top: 30% !important; width: 44px !important; }

    .l-hero__twinkle { display: none; }
    .l-hero__twinkle:nth-of-type(-n+6) { display: block; }
    .l-hero__twinkle:nth-of-type(1) { left: 70% !important; top: -2% !important; width: 14px !important; height: 14px !important; }
    .l-hero__twinkle:nth-of-type(2) { left: 100% !important; top: 22% !important; width: 12px !important; height: 12px !important; }
    .l-hero__twinkle:nth-of-type(3) { left: 102% !important; top: 70% !important; width: 13px !important; height: 13px !important; }
    .l-hero__twinkle:nth-of-type(4) { left: 50% !important; top: 101% !important; width: 13px !important; height: 13px !important; }
    .l-hero__twinkle:nth-of-type(5) { left: -3% !important; top: 14% !important; width: 12px !important; height: 12px !important; }
    .l-hero__twinkle:nth-of-type(6) { left: -2% !important; top: 62% !important; width: 11px !important; height: 11px !important; }

    /* ribbon: below the card, painted over the next section (not clipped) */
    .l-ribbon {
        grid-row: 3;
        grid-column: 1;
        position: relative;
        z-index: 6;
        margin: 56px -40px 20px;
    }

    .l-ribbon__text {
        font-size: 96px;
    }

    #cheerRibbonPath {
        stroke-width: 240;
    }

    /* ---- feature deck: pinned stack, cards fly up with a spin ---- */
    .l-deck {
        height: 400vh;
        padding: 0;
    }

    .l-deck__stage {
        position: sticky;
        top: 76px;
        height: calc(100vh - 92px);
        height: calc(100svh - 92px);
        padding: 12px 16px 0;
        display: flex;
        flex-direction: column;
        overflow: visible;
    }

    .l-deck__dots {
        display: flex;
        flex: none;
        justify-content: center;
        gap: 6px;
        padding-bottom: 12px;
    }

    .l-deck__dots span {
        width: 6px;
        height: 6px;
        border-radius: 3px;
        background: #FFFFFF;
        opacity: .4;
        transition: width .3s ease, opacity .3s ease;
    }

    .l-deck__dots span.is-active {
        width: 24px;
        opacity: 1;
    }

    .l-deck__track {
        display: block;
        position: relative;
        flex: 1;
        min-height: 0;
        height: auto;
    }

    .l-deck__card {
        position: absolute;
        inset: 0;
        transform: var(--deck-t, none) !important;
        display: flex;
        flex-direction: column;
        gap: 14px;
        padding: 18px;
        border-radius: 28px;
        overflow: hidden;
        box-shadow: 0 -8px 30px rgba(12, 7, 48, .25);
    }

    .l-deck__media-col {
        position: relative;
        display: block;
        flex: 1 1 0;
        min-height: 110px;
    }

    .l-deck__media-col .l-deck__media-wrap {
        position: absolute;
        inset: 0;
        aspect-ratio: auto;
    }

    .l-deck__card--3 .l-deck__tools-left {
        display: contents;
    }

    .l-deck__card--3 .l-deck__media-wrap {
        position: relative;
        flex: 1 1 0;
        min-height: 110px;
        aspect-ratio: auto;
        margin: 0;
    }

    .l-deck__media {
        border-radius: 18px;
        box-shadow: none !important;
    }

    .l-deck__sticker--b,
    .l-deck__sticker--c {
        display: none;
    }

    .l-deck__sticker--a,
    .l-deck__card--3 .l-deck__sticker--a {
        top: 10px;
        right: 10px;
        left: auto;
        width: 50px;
        height: 50px;
        filter: none;
    }

    .l-deck__card--0 .l-deck__sticker--a {
        width: 54px;
        height: 54px;
    }

    .l-deck__card--3 .l-deck__sticker--a {
        right: auto;
        left: 10px;
    }

    .l-deck__copy,
    .l-deck__card--3 .l-deck__tools-left > div:not(.l-deck__media-wrap),
    .l-deck__tools-right {
        flex: none;
    }

    /* the phone design runs shorter copy so the media keeps its height */
    .l-deck__more {
        display: none;
    }

    .l-deck__copy,
    .l-deck__body {
        justify-content: flex-start;
        gap: 14px;
    }

    .landing .l-deck__title {
        font-size: 30px;
        max-width: none;
    }

    .landing .l-deck__lead,
    .landing .l-deck__tools-lead {
        margin: 0;
        max-width: none;
        font-size: 15px;
        line-height: 1.45;
        text-wrap: pretty;
    }

    .landing .l-deck__tools-lead {
        margin-top: 14px;
    }

    .landing .l-deck__quote {
        max-width: none;
        padding-top: 12px;
        border-top: 1px solid rgba(255, 255, 255, .18);
        font-size: 14px;
    }

    .l-deck__tags {
        gap: 8px;
    }

    .l-deck__tag {
        padding: 8px 14px;
        font-size: 13px;
    }

    .l-deck__tools-right {
        display: block;
    }

    .l-deck__tools-grid {
        gap: 8px;
    }

    .l-deck__tile {
        padding: 12px 14px;
        border-radius: 16px;
        justify-content: flex-start;
    }

    .l-deck__tile-head {
        margin-bottom: 4px;
    }

    .l-deck__tile-head svg {
        display: none;
    }

    .l-deck__tile-title {
        font-size: 15px;
    }

    .l-deck__tile-desc {
        font-size: 12px;
        line-height: 1.35;
    }

    /* ---- why creators stay: side-scrolling cards, About button below ---- */
    .l-why {
        padding: 64px 0 56px;
    }

    .l-why__inner {
        display: flex;
        flex-direction: column;
    }

    .l-why__header {
        display: contents;
    }

    .landing .l-why__title {
        padding: 0 20px;
        font-size: clamp(40px, 11vw, 52px);
        max-width: none;
    }

    .l-why__grid {
        order: 1;
        display: flex;
        gap: 12px;
        margin-top: 28px;
        padding: 4px 20px 12px;
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        scrollbar-width: none;
    }

    .l-why__grid::-webkit-scrollbar {
        display: none;
    }

    .l-why__card {
        flex: none;
        width: 78%;
        min-height: 220px;
        padding: 24px;
        gap: 12px;
        border-radius: 24px;
        scroll-snap-align: center;
    }

    .l-why__card:hover,
    .l-why__card:active,
    .l-why__card:not(:first-child):active {
        transform: none;
        box-shadow: 0 2px 0 rgba(120, 116, 104, .10);
    }

    .landing .l-why__kicker { font-size: 12px; }
    .landing .l-why__card-title { font-size: 24px; }
    .landing .l-why__card-text { font-size: 15px; }

    .landing .l-why__about {
        order: 2;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 52px;
        margin: 16px 20px 0;
        padding: 0;
        font-size: 13px;
    }

    /* ---- FAQ: 2-line heading, number + question on one row ---- */
    .l-faq {
        padding: 64px 20px 48px;
    }

    .l-faq__head {
        display: block;
    }

    .landing .l-faq__title {
        margin-top: 14px;
        font-size: clamp(40px, 11vw, 52px);
        line-height: .92;
        max-width: none;
    }

    .landing .l-faq__intro {
        margin: 18px 0 0;
        max-width: none;
    }

    .l-faq__list {
        margin-top: 32px;
    }

    .l-faq__row {
        grid-template-columns: 40px minmax(0, 1fr);
        column-gap: 8px;
        row-gap: 10px;
        padding: 22px 0;
    }

    .l-faq__row:hover {
        transform: none;
    }

    .l-faq__num {
        padding-top: 6px;
    }

    .landing .l-faq__q {
        font-size: 20px;
        letter-spacing: -.02em;
        line-height: 1.15;
    }

    .landing .l-faq__a {
        grid-column: 2;
    }

    /* ---- contact: hand first (grows in + fireworks), full-width CTA ---- */
    .l-contact__stage {
        gap: 0;
        padding: 110px 20px 64px;
        text-align: center;
    }

    .l-contact__mascot {
        order: 0;
        width: 230px;
        transform: scale(var(--l-contact-scale));
        transform-origin: 50% 60%;
        will-change: transform;
    }

    .landing .l-contact__hand {
        width: 100%;
        animation: l-heart-float 4s ease-in-out infinite;
    }

    .l-contact__fw {
        display: block;
        left: 50%;
        top: 242px;
        width: 166px;
        height: 211px;
        z-index: 2;
        --fw-k: .8;
        --cfw-k: .6;
    }

    .l-contact__cfw--flash {
        width: 96px;
        height: 96px;
    }

    .l-contact__cfw--shoot {
        height: 46px;
    }

    .l-contact__cfw--twinkle {
        width: 14px;
        height: 14px;
    }

    .l-contact__copy {
        order: 1;
        margin-top: 28px;
    }

    .landing .l-contact__eyebrow {
        font-size: 12px;
    }

    .landing .l-contact__title {
        margin: 12px auto 0;
        font-size: 36px;
        max-width: none;
        text-wrap: balance;
    }

    .landing .l-contact__text {
        margin: 14px auto 0;
        max-width: 32ch;
        font-size: 15px;
    }

    .l-contact__cta-col {
        order: 2;
        width: 100%;
        margin-top: 28px;
    }

    .landing .l-contact__cta {
        width: 100%;
    }

    .landing .l-contact__cta-pill {
        display: flex;
        align-items: center;
        justify-content: center;
        width: 100%;
        height: 60px;
        padding: 0;
        font-size: 22px;
        letter-spacing: -.02em;
        box-shadow: 0 14px 30px rgba(124, 109, 240, .3);
    }

    /* ---- footer: Platform | Features side by side ---- */
    .landing-footer__panel {
        border-radius: 32px 32px 0 0;
        padding: 48px 20px 128px;
    }

    .landing-footer__container {
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 32px 16px;
    }

    .landing-footer__brand,
    .landing-footer__col:nth-child(4),
    .landing-footer__col:nth-child(5) {
        grid-column: 1 / -1;
    }

    .landing-footer .landing-footer__logo {
        height: 40px;
    }

    .landing-footer__tagline {
        margin-top: 14px;
        max-width: none;
    }

    .landing-footer__label {
        font-size: 11px;
    }

    .landing-footer__links {
        gap: 0;
        margin-top: 8px;
    }

    .landing-footer .landing-footer__link {
        display: block;
        padding: 8px 0;
    }

    .landing-footer__col:nth-child(5) .landing-footer__label {
        display: none;
    }

    .landing-footer__langs {
        margin-top: 0;
        gap: 8px;
    }

    .landing-footer__langs .dropdown-lang .language-btn,
    .landing-footer__langs .dropdown-lang .langSel {
        display: flex;
        align-items: center;
        height: 44px;
        padding: 0 18px;
    }

    .landing-footer__bottom {
        margin-top: 36px;
        padding-top: 20px;
        font-size: 13px;
    }

    /* ---- floating pill: copy + short "Start" button, rises in ---- */
    .l-floating-cta {
        left: max(12px, calc(50% - 228px));
        bottom: calc(16px + env(safe-area-inset-bottom, 0px));
        width: calc(min(100vw, 480px) - 120px);
        max-width: none;
        justify-content: space-between;
        gap: 10px;
        padding: 8px 8px 8px 20px;
        background: rgba(40, 36, 60, .62);
        transform: translateY(24px);
        transition: opacity .25s ease, transform .3s cubic-bezier(.22, 1, .36, 1);
    }

    .l-floating-cta.is-visible {
        transform: translateY(0);
    }

    .l-floating-cta__text {
        display: block;
        min-width: 0;
        font-size: 13px;
        line-height: 1.2;
        white-space: normal;
        overflow: visible;
    }

    .l-floating-cta .l-floating-cta__btn {
        height: 48px;
        gap: 10px;
        padding: 0 8px 0 16px;
    }

    .l-floating-cta__label {
        font-size: 12px;
    }

    .l-floating-cta__label-full {
        display: none;
    }

    .l-floating-cta__label-short {
        display: inline;
    }

    .l-floating-cta__dot {
        width: 28px;
        height: 28px;
    }

    .l-floating-cta__dot--blue {
        margin-left: -10px;
    }
}

/* #7995 type sizes: the phone design sizes these differently from desktop,
   and the block above only overrode the layout, so they kept their desktop
   values. Values are the mobile design file's own. */
@media (max-width: 575px) {
    .landing .l-hero__quote {
        font-size: 20px;
    }

    .l-hero__caption {
        font-size: 14px;
    }

    .l-hero__live {
        font-size: 13px;
    }

    .l-hero__live-dot {
        font-size: 12px;
    }

    /* the ribbon is an SVG drawn at ~0.24x on a 390px screen: 100px renders
       at the design's 24px */
    .l-ribbon__text {
        font-size: 100px;
    }

    .l-ribbon__word {
        font-weight: 800;
    }

    .landing .l-features__title {
        font-size: clamp(42px, 12vw, 56px);
    }

    /* 34ch column, so the intro breaks into the design's 3 lines */
    .landing .l-features__lead {
        margin-top: 20px;
        max-width: 34ch;
        text-wrap: pretty;
    }

    .l-deck__tile-title {
        letter-spacing: -0.01em;
    }

    .l-creators__live,
    .l-creators__viewers {
        font-size: 10px;
    }

    .l-creators__name {
        font-size: 13px;
        letter-spacing: normal;
    }
}


@media (max-width: 575px) and (prefers-reduced-motion: reduce) {
    .l-hero__fw,
    .l-hero__halo,
    .l-contact__fw {
        display: none;
    }
}

/* #8036: the Thai design (CheerMe Landing TH) sets every bold element in
   Prompt 600 -- it has no 700/800/900 anywhere, and Prompt at those weights
   reads far heavier than Hanken Grotesk does. Everything below is 700-900
   in the English design; on the Thai locale it drops to 600. Regular text
   stays 400 in both. */
html[lang="th"] .l-btn,
html[lang="th"] .l-pill,
html[lang="th"] .landing-header__pill,
html[lang="th"] .landing .l-hero__title,
html[lang="th"] .landing .l-hero__cta,
html[lang="th"] .l-hero__live,
html[lang="th"] .l-hero__chip,
html[lang="th"] .l-hero__caption,
html[lang="th"] .landing .l-hero__quote,
html[lang="th"] .l-hero__live-dot,
html[lang="th"] .l-ribbon__text,
html[lang="th"] .l-ribbon__word,
html[lang="th"] .l-ribbon__word:hover,
html[lang="th"] .landing .l-features__title,
html[lang="th"] .landing .l-deck__title,
html[lang="th"] .landing .l-deck__tools-spacer h3,
html[lang="th"] .l-deck__tile-title,
html[lang="th"] .landing .l-why__title,
html[lang="th"] .landing .l-why__about,
html[lang="th"] .landing .l-why__card-title,
html[lang="th"] .landing .l-faq__title,
html[lang="th"] .landing .l-faq__q,
html[lang="th"] .landing .l-contact__title,
html[lang="th"] .landing .l-contact__cta-pill,
html[lang="th"] .l-floating-cta__label,
html[lang="th"] .l-creators__live,
html[lang="th"] .l-creators__viewers,
html[lang="th"] .l-creators__name {
    font-weight: 600;
}

/* #8036: line-height and letter-spacing from the Thai design. Thai
   vowel and tone marks stack above and below the line, so the design opens
   headings to 1.4 and body copy to 1.55-1.7, and cuts the English port's
   tight negative tracking to about a third. Values are the design's own
   (unitless / em), so they hold at every breakpoint. */
html[lang="th"] .landing .l-hero__title,
html[lang="th"] .landing .l-hero__title-accent {
    letter-spacing: -0.015em;
}

html[lang="th"] .landing .l-hero__quote {
    line-height: 1.45;
    letter-spacing: 0;
}

html[lang="th"] .landing .l-features__title,
html[lang="th"] .landing .l-why__title,
html[lang="th"] .landing .l-faq__title {
    line-height: 1.4;
    letter-spacing: -0.015em;
}

html[lang="th"] .landing .l-deck__title,
html[lang="th"] .landing .l-deck__tools-spacer h3,
html[lang="th"] .landing .l-contact__title {
    line-height: 1.4;
    letter-spacing: -0.01em;
}

html[lang="th"] .landing .l-why__card-title,
html[lang="th"] .landing .l-faq__q {
    line-height: 1.4;
    letter-spacing: -0.005em;
}

html[lang="th"] .landing .l-features__lead,
html[lang="th"] .landing .l-deck__lead,
html[lang="th"] .landing .l-deck__tools-lead,
html[lang="th"] .landing .l-deck__tools-spacer p,
html[lang="th"] .landing .l-why__card-text {
    line-height: 1.65;
}

html[lang="th"] .landing .l-deck__quote {
    line-height: 1.7;
}

html[lang="th"] .landing .l-deck__tile-desc {
    line-height: 1.55;
}

html[lang="th"] .l-creators__name {
    letter-spacing: 0;
}