/* =====================================================================
   Rich Planet — landing page
   Layers: tokens → base → components → sections → motion
   Values are lifted from the Figma "RP Lander" frame (1440 wide).
   ===================================================================== */

@layer tokens, base, components, sections, motion;

/* ---------- Brand fonts (self-hosted in /fonts) ------------------- */
@font-face { font-family: "Editorial Today"; src: url("../fonts/EditorialTodayThin-Regular.woff2") format("woff2"); font-weight: 100; font-style: normal; font-display: swap; }
@font-face { font-family: "Editorial Today"; src: url("../fonts/EditorialTodayThin-Italic.woff2") format("woff2"); font-weight: 100; font-style: italic; font-display: swap; }
@font-face { font-family: "Editorial Today"; src: url("../fonts/EditorialToday-Regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Editorial Today"; src: url("../fonts/EditorialTodaySemiBold-Regular.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; }
@font-face { font-family: "Editorial Today"; src: url("../fonts/EditorialToday-Bold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Editorial Today"; src: url("../fonts/EditorialToday-BoldItalic.woff2") format("woff2"); font-weight: 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Editorial Today"; src: url("../fonts/EditorialTodayExtraBold-Regular.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Editorial Today"; src: url("../fonts/EditorialTodayExtraBold-Italic.woff2") format("woff2"); font-weight: 800; font-style: italic; font-display: swap; }
@font-face {
  font-family: "Neue Rich Expressive";
  src: url("../fonts/NeueRichExpressive-Regular.woff2") format("woff2"),
       url("../fonts/NeueRichExpressive-Regular.woff") format("woff");
  font-weight: 400; font-style: normal; font-display: swap;
}

@layer tokens {
  :root {
    /* colour */
    --rp-yellow: #EEFF00;
    --rp-yellow-shade: #C2D000;   /* button bevel */
    --rp-yellow-shade-2: #BECC00;
    --rp-dark: #050922;
    --n-100: #101113;
    --n-80: #383939;
    --n-60: #595C5E;
    --n-40: #CACFD3;
    --n-20: #E6ECF0;
    --n-10: #FFFFFF;
    --cream: #F0EDE6;             /* text on dark buttons, per Figma */
    --rp-blue: #142385;           /* dark-button hover; link accent on yellow */
    --rp-yellow-hover: #F5FF66;

    /* type */
    --font-sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    --font-display: "Editorial Today", Georgia, serif;
    --font-marker: "Neue Rich Expressive", "Marker Felt", cursive;
    --font-mono: "Geist Mono", ui-monospace, "SF Mono", Menlo, monospace;

    --fs-h1: clamp(2.5rem, 1.55rem + 3.35vw, 4.5rem);      /* 72px @ 1440 */
    --fs-h2: clamp(2rem, 1.35rem + 1.9vw, 3rem);          /* 48px */
    --fs-h3: clamp(1.75rem, 1.4rem + 0.9vw, 2.375rem);    /* 38px */
    --fs-toast: clamp(2.25rem, 1rem + 4.2vw, 5rem);       /* 80px */

    /* layout */
    --wrap: 1320px;
    --gutter: clamp(1.25rem, 4vw, 3.75rem);
    --radius-section: 40px;
    --radius-panel: 20px;
    --radius-card: 22.5px;
    --radius-btn: 15px;

    /* motion */
    --ease-out: cubic-bezier(.2, .7, .2, 1);
    --ease-spring: cubic-bezier(.34, 1.4, .64, 1);
    --dur: .7s;
    --marquee-duration: 70s;
  }
}

/* ===================================================================== */
@layer base {
  html {
    scroll-behavior: smooth; -webkit-text-size-adjust: 100%;
    /* iOS rubber-band: white above the page, footer-dark below it */
    background: linear-gradient(var(--n-10) 50%, var(--rp-dark) 50%);
  }

  body {
    margin: 0;
    font-family: var(--font-sans);
    font-size: 1rem;
    line-height: 1.5;
    color: var(--n-100);
    background: var(--n-10);
    -webkit-font-smoothing: antialiased;
    overflow-x: clip;
  }

  h1, h2, h3, p, ul, figure, address { margin: 0; }
  ul { padding: 0; list-style: none; }
  address { font-style: normal; }
  img, video { display: block; max-width: 100%; height: auto; }
  a { color: inherit; }
  button, input { font: inherit; color: inherit; }

  :focus-visible {
    outline: 3px solid var(--rp-dark);
    outline-offset: 3px;
    border-radius: 6px;
  }
  .footer :focus-visible { outline-color: var(--rp-yellow); }

  ::selection { background: var(--rp-yellow); color: var(--rp-dark); }

  .wrap {
    width: min(var(--wrap), 100% - 2 * var(--gutter));
    margin-inline: auto;
  }

  .visually-hidden {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0;
  }

  .skip-link {
    position: absolute; inset-inline-start: 1rem; top: -100%;
    padding: .6rem 1rem; background: var(--rp-dark); color: var(--rp-yellow);
    border-radius: var(--radius-btn); z-index: 100;
  }
  .skip-link:focus { top: 1rem; }
}

/* ===================================================================== */
@layer components {

  /* Eyebrow — small mono caps, from the design system (Geist Mono 14/20, +1.4px) */
  .eyebrow {
    font-family: var(--font-mono);
    font-size: .875rem;
    line-height: 1.43;
    letter-spacing: .1em;
    text-transform: uppercase;
    color: var(--n-80);
  }

  /* Stickers — the hand-lettered asides with squiggle arrows */
  .sticker {
    position: absolute;
    display: grid;
    gap: .25rem;
    width: 7.5rem;
    font-family: var(--font-marker);
    font-size: .875rem;
    line-height: 1.43;
    letter-spacing: .1em;
    text-transform: uppercase;
    text-align: center;
    color: var(--n-80);
    pointer-events: none;
    rotate: var(--tilt, 0deg);
  }
  .sticker__arrow { width: 41px; height: 48px; margin-inline: auto; }

  /* Text links: solid 1px underline in the section accent; on hover the line grows up behind
     the text as a highlight. --link is yellow on white and dark backgrounds, blue on the yellow band. */
  :root, .footer, .legal__body { --link: var(--rp-yellow); }
  .band { --link: var(--rp-blue); }
  .text-link, .hero__lede a, .form__note a, .footer__contact a, .footer__legal a, .legal__body a {
    color: inherit;
    text-decoration: none;
    background-image: linear-gradient(var(--link), var(--link));
    background-repeat: no-repeat;
    background-position: 0 100%;
    background-size: 100% 1px;
    padding-bottom: 1px;
    transition: background-size .22s var(--ease-out), color .15s var(--ease-out);
  }
  .text-link:hover, .hero__lede a:hover, .form__note a:hover, .footer__contact a:hover, .footer__legal a:hover, .legal__body a:hover {
    background-size: 100% 100%;
  }
  /* White text over a yellow highlight is unreadable, so on dark backgrounds the text darkens as the highlight fills */
  .footer .footer__contact a:hover, .footer .form__note a:hover, .footer .footer__legal a:hover { color: var(--rp-dark); }

  /* Buttons */
  .btn {
    display: inline-flex; align-items: center; justify-content: center;
    padding: 13px 24px;
    border: 0;
    border-radius: var(--radius-btn);
    font-weight: 600;
    font-size: 1.125rem;
    line-height: 1.45;
    letter-spacing: -.05em;
    cursor: pointer;
    text-decoration: none;
    transition: translate .18s var(--ease-out), box-shadow .18s var(--ease-out), filter .18s var(--ease-out);
  }
  .btn--dark {
    background: var(--rp-dark);
    color: var(--cream);
    box-shadow: inset 0 1px 0 #777, inset 0 -1px 0 #000;
    transition: translate .18s var(--ease-out), background-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
  }
  .btn--dark:hover, .btn--dark:focus-visible {
    background: var(--rp-blue);
    box-shadow: inset 0 1px 0 #4a5ab5, inset 0 -1px 0 #0b1454;
  }
  .btn--yellow {
    background: var(--rp-yellow);
    color: var(--rp-dark);
    box-shadow: inset 0 1px 0 var(--rp-yellow-shade), inset 0 -1px 0 var(--rp-yellow-shade-2);
    transition: translate .18s var(--ease-out), background-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
  }
  .btn--yellow:hover, .btn--yellow:focus-visible {
    background: var(--rp-yellow-hover);
    box-shadow: inset 0 1px 0 #d6df5c, inset 0 -1px 0 #c9d24f;
  }
  .btn:hover { translate: 0 -1px; }
  .btn:active { translate: 0 1px; transition-duration: .06s; }

  /* Floating-label text field (Input/TextField/All in Figma) */
  .field { position: relative; padding-top: 7px; }
  .field input {
    width: 100%;
    height: 48px;
    box-sizing: border-box;
    padding: 12px 16px;
    border: 1px solid var(--field-border, var(--n-40));
    border-radius: 4px;
    background: transparent;
    color: var(--field-text, var(--n-100));
    letter-spacing: -.01em;
    transition: border-color .18s var(--ease-out);
  }
  .field input:hover { border-color: var(--field-border-hover, var(--n-60)); }
  .field input:focus { outline: none; border-color: var(--field-border-active, var(--rp-dark)); }
  .field input:focus-visible { outline: 3px solid color-mix(in oklab, var(--field-border-active, var(--rp-dark)) 30%, transparent); outline-offset: 0; border-radius: 4px; }

  .field label {
    position: absolute;
    left: 12px; top: 19px;
    display: inline-flex; align-items: flex-start; gap: 4px;
    padding-inline: 4px;
    font-size: 1rem;
    line-height: 1.5;
    color: var(--field-label, var(--n-60));
    background: var(--field-bg, var(--n-10));
    pointer-events: none;
    transform-origin: left center;
    transition: translate .18s var(--ease-out), scale .18s var(--ease-out), color .18s var(--ease-out);
  }
  .field .req {
    font-size: .75em; line-height: 1.6;
    color: var(--field-req, var(--rp-dark));
  }
  /* Float the label when focused or filled */
  .field input:focus + label,
  .field input:not(:placeholder-shown) + label {
    translate: 0 -19px;
    scale: .75;
    color: var(--field-label-active, var(--rp-dark));
  }
  .field input:not(:placeholder-shown) { border-color: var(--field-border-filled, var(--rp-dark)); }
  .field input:user-invalid { border-color: #C6002A; }
  .field input:user-invalid + label { color: #C6002A; }

  /* Phone: flag/dial-code select + national number in one field */
  .phone { position: relative; display: grid; grid-template-columns: auto 1fr; align-items: stretch; }
  .phone > input { border-radius: 0 4px 4px 0; }
  .field .phone__code {          /* specificity: must beat the floating-label rule `.field label` */
    position: relative; inset: auto; translate: none; scale: none; background: none; pointer-events: auto;
    display: grid; place-items: center; box-sizing: border-box;
    height: 48px; align-self: stretch; padding: 0 .75rem 0 .875rem;
    border: 1px solid var(--field-border, var(--n-40)); border-right: 0; border-radius: 4px 0 0 4px;
    color: var(--field-text, var(--n-100)); font-size: 1rem; white-space: nowrap; cursor: pointer;
    transition: border-color .18s var(--ease-out);
  }
  .field .phone__code:hover { border-color: var(--field-border-hover, var(--n-60)); }
  .field .phone__code:focus-within { border-color: var(--field-border-active, var(--rp-dark)); }
  .phone__dial { pointer-events: none; }
  .phone__dial::before { content: var(--flag, ""); margin-right: .4rem; }
  .phone__dial::after { content: ""; display: inline-block; width: .4rem; height: .4rem; margin: 0 0 .15rem .5rem; border: solid currentColor; border-width: 0 1.5px 1.5px 0; rotate: 45deg; opacity: .6; }
  .phone__code select { position: absolute; inset: 0; width: 100%; opacity: 0; cursor: pointer; font-size: 1rem; }
  .phone > label:not(.phone__code) { left: auto; right: auto; }
  .field--phone .phone > input + label { left: calc(var(--code-w, 6rem) + 12px); top: 12px; }   /* .phone has no 7px top pad */
  .field--phone .phone > input:not(:placeholder-shown) ~ .phone__code,
  .field--phone .phone:focus-within .phone__code { border-color: var(--field-border-active, var(--rp-dark)); }

  /* Form shells */
  .form { display: grid; gap: 0; }
  .form__row { display: grid; grid-template-columns: repeat(auto-fit, minmax(14rem, 1fr)); gap: 0 12px; }
  .form__actions { display: grid; gap: 1.25rem; justify-items: center; padding-top: 19px; }
  .form__actions--start { justify-items: start; }
  .form__actions--center { justify-items: center; text-align: center; }
  .form__note {
    max-width: 30rem;
    font-size: .75rem;
    line-height: 1.33;
    color: var(--form-note, var(--n-60));
  }

  .form__status { font-size: .875rem; line-height: 1.35; color: #C6002A; margin: -.5rem 0 -.25rem; }
  .form__status:empty { display: none; }
  .form--dark .form__status { color: #FF7A8A; }
  .form.is-sent > :not(.form__success) { display: none; }
  .form.is-sent { display: grid; place-items: center; }
  .form__success {
    font-family: var(--font-display); font-weight: 600;
    font-size: clamp(1.375rem, 1.1rem + 1vw, 1.75rem); line-height: 1.2;
    text-align: center; text-wrap: balance; max-width: 26rem;
    animation: rise .5s var(--ease-out) backwards;
  }
  .form--inline .form__success { color: var(--rp-dark); }
  .form--dark .form__success { color: var(--rp-yellow); text-align: left; justify-self: start; }
  .form--dark.is-sent { place-items: start; }

  /* Dark variant (footer) */
  .form--dark {
    --field-border: rgba(89, 92, 94, .5);
    --field-border-hover: rgba(230, 236, 240, .5);
    --field-border-active: var(--rp-yellow);
    --field-border-filled: var(--rp-yellow);
    --field-text: #fff;
    --field-label: var(--n-20);
    --field-label-active: var(--rp-yellow);
    --field-req: var(--rp-yellow);
    --field-bg: var(--rp-dark);
    --form-note: var(--n-20);
  }
  .form--dark .form__note { opacity: .8; }
}

/* ===================================================================== */
@layer sections {

  /* ---------------- HERO ---------------- */
  .hero {
    position: relative;
    padding-block: clamp(2.5rem, 5vw, 5.2rem) clamp(2.5rem, 4vw, 4rem);
    text-align: center;
  }
  .hero__inner { position: relative; display: grid; justify-items: center; }

  .hero__logo { display: block; width: clamp(140px, 12.5vw, 180px); margin-bottom: clamp(2rem, 4vw, 3.75rem); }
  .hero__logo img { width: 100%; height: auto; }

  .hero__eyebrow-row { position: relative; margin-bottom: clamp(1.25rem, 3vw, 2.5rem); }

  .sticker--hero {
    --tilt: 14.23deg;
    left: calc(100% + 3rem);
    bottom: -.25rem;
    width: 7rem;
    grid-template-columns: 1fr;
    justify-items: start;
  }
  .sticker--hero .sticker__arrow { rotate: -8deg; margin: -.35rem 0 0 -.5rem; }

  .hero__title {
    max-width: min(100%, 9.6em);   /* 678px @ 72px in the design */
    font-family: var(--font-display);
    font-weight: 400;
    font-size: var(--fs-h1);
    line-height: 1;
    letter-spacing: -.01em;
    text-wrap: balance;
    color: var(--n-100);
  }
  .hero__title .w { display: inline-block; }

  .hl-wrap { position: relative; isolation: isolate; padding-inline: .15em; }
  .rich {
    position: relative; z-index: 1;
    font-family: var(--font-marker);
    letter-spacing: 0;
    white-space: nowrap;
  }
  .hl {
    position: absolute; inset: -10% -18% -49% -3%;
    width: auto; height: auto;
    z-index: 0;
    rotate: 4.56deg;
    pointer-events: none;
  }

  .hero__lede {
    max-width: 684px;
    margin-top: clamp(1.5rem, 3vw, 2.25rem);
    font-weight: 300;
    font-size: 1.125rem;
    line-height: 1.5;
    color: var(--rp-dark);
    text-wrap: pretty;
  }
  .hero__lede strong { font-weight: 600; }

  .form--inline { width: min(640px, 100%); margin-top: clamp(1.75rem, 3vw, 2.5rem); text-align: center; }

  /* ---------------- FEED MARQUEE ---------------- */
  .feed {
    position: relative;
    z-index: 2;
    padding-block: clamp(3.5rem, 8vw, 6.5rem) 0;
    margin-bottom: calc(-1 * var(--feed-overlap, 12rem));   /* cards straddle the yellow band */
  }
  /* Marquee stickers: text with the arrow beside it, curling down toward the cards */
  .sticker--left, .sticker--right {
    top: 0;
    grid-template-columns: auto auto;
    align-items: start;
    width: auto;
  }
  .sticker--left  { --tilt: -10.32deg; left: max(var(--gutter), calc(50% - 40rem)); }
  .sticker--right { --tilt: 13.29deg;  right: max(var(--gutter), calc(50% - 40rem)); }
  .sticker--left .sticker__text, .sticker--right .sticker__text { width: 7.5rem; }
  .sticker--left .sticker__arrow  { rotate: 158deg; scale: -1 1; margin: 1.5rem 0 0 -.25rem; }   /* right of the text */
  .sticker--right .sticker__arrow { rotate: 70deg;  scale: -1 1; margin: 1.5rem -.25rem 0 0; }    /* left of the text */

  .marquee {
    --card-w: clamp(200px, 18.4vw, 268px);   /* five across at 1440 with the 24px gap */
    --card-h: calc(var(--card-w) * 1.25);
    --gap: clamp(1rem, 1.7vw, 1.5rem);      /* tighter than the Figma spacing, by request */
    display: flex;
    overflow: clip;
    padding-block: 2.5rem;                 /* room for the tilt and float */
    user-select: none;
  }
  .marquee__group {
    flex: 0 0 auto;
    display: flex;
    gap: var(--gap);
    padding-inline-end: var(--gap);
    animation: marquee var(--marquee-duration) linear infinite;
  }
  .marquee:hover .marquee__group,
  .marquee:focus-within .marquee__group { animation-play-state: paused; }

  .card {
    flex: 0 0 auto;
    width: var(--card-w);
    height: var(--card-h);
    rotate: var(--r, 0deg);
    border-radius: var(--radius-card);
    transition: rotate .5s var(--ease-spring);
  }
  .card a {
    display: block; height: 100%;
    border-radius: inherit;
    box-shadow:
      0 16px 32px -4px rgba(12, 12, 13, .10),
      0 4px 4px -4px rgba(12, 12, 13, .05);
    transition: scale .5s var(--ease-spring);
  }
  .card:hover a { scale: 1.03; }
  .card img, .card video {
    width: 100%; height: 100%;
    object-position: center;
    object-fit: cover;
    border-radius: inherit;
  }

  /* JS-driven mode: the script positions every card itself (constant speed mid-strip, fast at the edges). */
  .marquee[data-js] { position: relative; display: block; height: calc(var(--card-h) + 5rem); opacity: 0; transition: opacity .6s var(--ease-out); }
  .marquee[data-js].is-ready { opacity: 1; }
  /* Faint brand tint behind media until it has loaded; media fades in rather than popping */
  .marquee[data-js] .card a { background: color-mix(in oklab, var(--rp-yellow) 14%, white); }
  .card__media { opacity: 0; transition: opacity .4s var(--ease-out); }
  .card__media.is-loaded { opacity: 1; }
  .marquee[data-js] .marquee__group { display: contents; animation: none; }
  .marquee[data-js] .card { position: absolute; top: 2.5rem; left: 0; rotate: none; will-change: transform; }
  /* rotations sampled from the six cards in Figma; cycle for any feed length */
  .card:nth-child(6n+1) { --r: -10.99deg; }
  .card:nth-child(6n+2) { --r: 6.25deg; }
  .card:nth-child(6n+3) { --r: -11.21deg; }
  .card:nth-child(6n+4) { --r: 3.23deg; }
  .card:nth-child(6n+5) { --r: -7.77deg; }
  .card:nth-child(6n+6) { --r: 8.76deg; }

  .card__badge {   /* small "video" mark on reels */
    position: absolute; top: .75rem; right: .75rem;
    width: 1.5rem; height: 1.5rem; border-radius: 50%;
    background: rgba(5, 9, 34, .55);
    display: grid; place-items: center;
  }
  .card { position: relative; }

  /* ---------------- YELLOW BAND ---------------- */
  .band {
    position: relative;
    z-index: 1;
    background: var(--rp-yellow);
    color: var(--n-100);
    border-radius: var(--radius-section);
    padding-block: calc(var(--feed-overlap, 12rem) + clamp(2rem, 4vw, 3.5rem)) clamp(3.5rem, 6vw, 5.5rem);
    margin-bottom: calc(-1 * var(--radius-section));   /* sits over the footer's top edge */
  }

  .partners { text-align: center; }
  .partners__eyebrow { margin-bottom: 1.5rem; }
  .partners__logos {
    display: flex; flex-wrap: wrap; justify-content: center; align-items: center;
    gap: clamp(1.5rem, 3vw, 2.75rem);
  }
  .partners__logos img { height: auto; width: auto; max-height: 61px; }
  .partners__groundshift { display: inline-flex; align-items: center; gap: 13px; }
  .partners__tag {
    width: 3.5rem;
    font-size: .69rem; line-height: .9; letter-spacing: -.03em;
    color: rgba(5, 9, 34, .4);
  }
  .partners__tag em { font-family: var(--font-display); font-size: .81rem; letter-spacing: -.02em; }

  .partner {
    display: grid;
    grid-template-columns: minmax(0, 446px) minmax(0, 761px);
    justify-content: space-between;
    align-items: start;
    gap: clamp(2rem, 4vw, 4rem);
    margin-top: clamp(4rem, 8vw, 8.25rem);
  }
  .partner__copy { padding-block-start: clamp(1rem, 3vw, 3.5rem); }
  .partner__copy .eyebrow { margin-bottom: .875rem; }
  .partner__title {
    font-family: var(--font-display);
    font-weight: 600;
    font-size: var(--fs-h2);
    line-height: 1.2;
    letter-spacing: -.005em;
    text-wrap: balance;
  }
  .partner__sub {
    margin-top: clamp(2.5rem, 5vw, 4.6rem);
    font-weight: 600;
    font-size: 1.375rem;
    line-height: 1.1;
    letter-spacing: -.005em;
    color: var(--rp-dark);
  }
  .offer { display: grid; gap: 1.125rem; margin-top: 1.25rem; }
  .offer li {
    display: grid; grid-template-columns: 24px 1fr; gap: 12px; align-items: start;
    font-weight: 300; font-size: 1.125rem; line-height: 1.5; color: var(--rp-dark);
  }
  .offer li::before {
    content: url("../assets/icons/arrow-circle-right.svg");
    display: block; width: 24px; height: 24px; margin-top: 1px;
  }

  .panel {
    background: var(--n-10);
    border-radius: var(--radius-panel);
    padding: clamp(1.5rem, 4vw, 3.75rem) clamp(1.25rem, 4vw, 3.75rem) clamp(1.75rem, 3vw, 2.75rem);
    text-align: center;
  }
  .panel__title {
    font-family: var(--font-display); font-weight: 600;
    font-size: var(--fs-h3); line-height: 1.1;
  }
  .panel__lede { margin: 1.125rem auto 1.5rem; max-width: 32rem; letter-spacing: -.01em; }
  .panel .form { max-width: 640px; margin-inline: auto; text-align: left; }

  /* ---------------- FOOTER ---------------- */
  .footer {
    position: relative;
    z-index: 0;
    background: var(--rp-dark);
    color: #fff;
    padding-block: calc(var(--radius-section) + clamp(2.5rem, 4vw, 4rem)) 2.5rem;
    overflow: clip;
  }
  .footer__cols {
    display: grid;
    grid-template-columns: minmax(0, 327px) minmax(0, 292px) minmax(0, 292px);
    justify-content: space-between;
    gap: clamp(2rem, 4vw, 4rem);
  }
  .footer__h {
    font-family: var(--font-display); font-weight: 700;
    font-size: 1.5rem; line-height: 1.1;
    margin-bottom: .75rem;
  }
  .footer__h--social { margin-top: 3.25rem; }
  .footer__col p, .footer__col address { font-size: 1rem; line-height: 1.3; }
  .footer__muted { opacity: .8; letter-spacing: -.005em; line-height: 1.225; }

  .footer__col .form { margin-top: 1.25rem; }
  .footer__col--ack { max-width: 327px; }

  .footer__contact { display: grid; gap: .5rem; font-size: 1rem; line-height: 1.3; }
  .social { display: flex; align-items: center; flex-wrap: wrap; gap: 16.5px; margin-top: .75rem; }
  .social a { display: grid; place-items: center; padding: 2px; transition: translate .18s var(--ease-out); }
  .social a:hover { translate: 0 -2px; }
  .social__icon {
    display: block; width: var(--w, 28px); height: var(--h, 28px);
    background: var(--rp-yellow);
    mask: var(--icon) center / contain no-repeat;
    -webkit-mask: var(--icon) center / contain no-repeat;
    transition: background-color .18s var(--ease-out);
  }
  /* URLs must live in the stylesheet (not inline style vars) so they resolve against css/ correctly */
  .social__icon--instagram { --icon: url("../assets/icons/instagram.svg"); }
  .social__icon--linkedin  { --icon: url("../assets/icons/linkedin.svg"); }
  .social__icon--tiktok    { --icon: url("../assets/icons/tiktok.svg"); }
  .social__icon--youtube   { --icon: url("../assets/icons/youtube.svg"); }
  .social a:hover .social__icon, .social a:focus-visible .social__icon { background: var(--rp-yellow-hover); }

  .footer__mark {
    position: relative;
    margin-top: clamp(4rem, 8vw, 9rem);
  }
  .footer__logo {
    width: 100%; max-width: 1304px; margin-inline: auto;
    aspect-ratio: 193 / 83;
    background: var(--rp-yellow);
    mask: url("../assets/brand/rich-planet-logo.svg") center / contain no-repeat;
    -webkit-mask: url("../assets/brand/rich-planet-logo.svg") center / contain no-repeat;
  }
  .footer__toast {
    position: absolute;
    top: 14%;
    right: 0;
    width: min(489px, 38%);
    font-family: var(--font-display);
    font-size: var(--fs-toast);
    line-height: .9;
    color: var(--rp-yellow);
    text-wrap: balance;
  }

  .footer__legal {
    margin-top: clamp(1.5rem, 3vw, 2.5rem);
    font-size: .6875rem; line-height: 1.3; letter-spacing: -.045em;
    opacity: .8;
  }
  .footer__legal img { display: inline-block; width: 12px; height: 12px; vertical-align: -1px; margin-inline: 1px; }


  /* ---------------- LEGAL MODALS ---------------- */
  .legal {
    inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none;
    margin: 0; padding: 0; border: 0;
    background: var(--n-10); color: var(--n-100);
    overflow-y: auto; overscroll-behavior: contain;
  }
  .legal::backdrop { background: rgba(5, 9, 34, .4); }
  .legal[open] { animation: legal-in .35s var(--ease-out); }
  .legal__bar {
    position: sticky; top: 0; z-index: 1;
    display: flex; justify-content: flex-end;
    padding: max(1rem, env(safe-area-inset-top, 0px)) max(1rem, env(safe-area-inset-right, 0px)) 0;
    background: linear-gradient(var(--n-10) 70%, transparent);
  }
  .legal__close {
    display: grid; place-items: center; width: 48px; height: 48px;
    border: 0; border-radius: 50%; background: var(--rp-dark); color: var(--rp-yellow); cursor: pointer;
    transition: background-color .18s var(--ease-out), scale .18s var(--ease-spring);
  }
  .legal__close:hover { background: var(--rp-blue); scale: 1.06; }
  .legal__body {
    width: min(46rem, 100% - 2 * var(--gutter));
    margin: 0 auto; padding-block: 1rem clamp(3rem, 8vw, 6rem);
    font-size: 1.0625rem; line-height: 1.6;
  }
  .legal__body h1 { font-family: var(--font-display); font-weight: 600; font-size: var(--fs-h2); line-height: 1.1; margin-bottom: 1rem; }
  .legal__body h2 { font-family: var(--font-display); font-weight: 600; font-size: 1.5rem; line-height: 1.2; margin: 2.25rem 0 .75rem; }
  .legal__body p { margin: 0 0 1rem; }
  .legal__body p em { color: var(--n-60); }
  .legal__body ul { list-style: disc; padding-left: 1.25rem; margin: 0 0 1rem; }
  .legal__body li { margin-bottom: .4rem; }
  body:has(dialog.legal[open]) { overflow: hidden; }
  @keyframes legal-in { from { opacity: 0; translate: 0 12px; } }

  /* ---------------- RESPONSIVE ---------------- */
  @media (width <= 1100px) {
    .partner { grid-template-columns: 1fr; gap: 3rem; }
    .partner__copy { padding-block-start: 0; }
    .footer__cols { grid-template-columns: 1fr 1fr; }
    .footer__col--ack { grid-column: 1 / -1; max-width: 40rem; }
  }
  @media (width <= 900px) {
    .sticker--left, .sticker--right { display: none; }
    :root { --feed-overlap: 10rem; }
  }
  @media (width <= 720px) {
    .sticker--hero { left: auto; right: -1rem; bottom: auto; top: -4.5rem; width: 6rem; font-size: .75rem; }
    .footer__cols { grid-template-columns: 1fr; gap: 2.5rem; }
    .footer__col--ack { grid-column: auto; }
    .footer__mark { display: grid; gap: 1.25rem; }
    .footer__toast { position: static; width: auto; }
    :root { --feed-overlap: 10rem; }
    .partner { margin-top: 5.5rem; }
    .partners__logos { gap: 2rem 2.5rem; }
  }
  @media (width <= 480px) {
    .sticker--hero { display: none; }
    .hero__title { line-height: 1.05; }
    .hero__lede { margin-top: 2rem; }
    .btn { width: 100%; }
    .form__actions { justify-items: stretch; text-align: center; }
    .form__actions--start { justify-items: stretch; text-align: left; }
  }
}

/* ===================================================================== */
@layer motion {

  /* One orchestrated page-load moment: logo → eyebrow → headline words → highlight → lede → form → cards. */
  .reveal,
  .hero__title .w {
    animation: rise var(--dur) var(--ease-out) backwards;
    animation-delay: calc(var(--i, 0) * 60ms + 80ms);
  }
  .hl {
    animation: sweep .55s var(--ease-out) backwards;
    animation-delay: calc(9 * 60ms + 380ms);
  }
  @keyframes rise {
    from { opacity: 0; translate: 0 14px; }
    to   { opacity: 1; translate: 0 0; }
  }
  @keyframes sweep {
    from { clip-path: inset(0 100% 0 0 round 8px); }
    to   { clip-path: inset(0 0 0 0 round 8px); }
  }
  @keyframes marquee {
    to { translate: -100% 0; }
  }

  /* Yellow band over a pinned footer. Both sit in the same grid cell; the footer sticks to the top of the
     window while the band scrolls up and off it, then the footer releases and scrolls normally. The second
     grid row is a spacer the height of the band (set by JS as --band-h) so the scroll length still adds up. */
  .stage { display: grid; grid-template-rows: auto var(--band-h, 100vh); }
  .stage > .band, .stage > .footer { grid-column: 1; grid-row: 1; align-self: start; }
  .stage > .footer { position: sticky; top: 0; z-index: 0; margin-top: var(--radius-section); }
  .stage > .band  { position: relative; z-index: 1; margin-bottom: 0; box-shadow: 0 30px 70px -30px rgba(5, 9, 34, .45); }

  /* Footer wordmark eases in as it scrolls into view (progressive enhancement) */
  @supports (animation-timeline: view()) {
    .footer__logo, .footer__toast {
      animation: mark-in linear backwards;
      animation-timeline: view();
      animation-range: entry 0% entry 70%;
    }
    @keyframes mark-in {
      from { opacity: .35; translate: 0 6%; }
      to   { opacity: 1;   translate: 0 0; }
    }
  }

  @media (prefers-reduced-motion: reduce) {
    .reveal, .hero__title .w, .hl, .card, .footer__logo, .footer__toast { animation: none; clip-path: none; }
    .stage { display: block; }
    .stage > .footer { position: static; }
    .stage > .band { margin-bottom: calc(-1 * var(--radius-section)); }
    .marquee__group { animation: none; }
    .marquee { overflow-x: auto; scroll-snap-type: x proximity; }
    .marquee__group + .marquee__group { display: none; }
    .card { scroll-snap-align: center; transition: none; animation: none; }
    .btn, .social a, .field label, .field input, .card__media, .marquee[data-js] { transition: none; }
    .legal[open] { animation: none; }
    html { scroll-behavior: auto; }
  }
}