/*
 * Curated page — curated.html (the Curated landing page; it absorbed the retired /marketing page, whose sections
 * live on as the Growth track, so their component classes keep the marketing- prefix).
 * Load order (in curated.html): site-footer.css, site-subpage.css, site-navbar.css, then this file.
 * Curated-only blocks (two tracks, chain support) are at the end of this file.
 */

/* Curated brand: purple (the CURATED logo's #6030D9) replaces the site blue on this page, so every accent,
   the hero halo, the nav's active tab, the diagram and the step numbers read as Curated. */
body.curated-page {
  --cur-purple: #6030d9;
  --cur-violet: #8e65fe;
  --cur-lilac: #f3eeff;
  --cur-ink: #1a1033;
  --brand-blue: var(--cur-purple);
  --brand-blue-text: var(--cur-purple);
  background: #ffffff;
}

/* Section headings — same as `.section-title` in the index.html inline \3c style> */
body.curated-page .section-title,
body.portfolio-page.curated-page .section-title {
  font-family: var(--font-heading);
  font-size: 24px;
  line-height: 26px;
  letter-spacing: -0.5px;
  text-transform: uppercase;
  color: var(--neutral-950);
}

/* ============================================================
   SERVICES
   ============================================================ */
body.curated-page .marketing-services {
  padding: 120px 0;
  background: var(--neutral-950);
}

body.curated-page .marketing-services .section-title {
  color: var(--white);
}

body.curated-page .marketing-services__sub {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.68;
  color: var(--neutral-400);
  max-width: 72ch;
}

body.curated-page .marketing-services__list {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: clamp(14px, 2vw, 18px);
}

body.curated-page .marketing-services__item {
  margin: 0;
  padding: 24px 22px;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.28),
    0 10px 30px rgba(0, 0, 0, 0.32);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: stretch;
}

body.curated-page .marketing-services__icon {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto 18px;
  width: 100%;
  max-width: 220px;
  min-height: 140px;
  flex-shrink: 0;
  padding: 10px;
  box-sizing: border-box;
  color: var(--white);
  opacity: 0.92;
}

body.curated-page .marketing-services__icon svg {
  display: block;
  width: 100%;
  height: auto;
  max-width: 148px;
  margin-inline: auto;
  overflow: visible;
}

body.curated-page .marketing-services__item-title {
  margin: 0 0 10px;
  font-size: 17px;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
}

body.curated-page .marketing-services__item-desc {
  margin: 0;
  font-size: 15px;
  line-height: 1.55;
  color: var(--neutral-400);
}

/* ============================================================
   INTEGRATED WITH ADVISORY
   Heading and sub on top; below, the statement beside a three-circle diagram of the same idea
   (research, advisory and strategic communications meeting in one place). Line-reveal motion like AI hub.
   ============================================================ */
body.curated-page .marketing-integrated {
  padding: 120px 0 120px;
  background: var(--neutral-50);
}

body.curated-page .marketing-integrated__sub {
  margin: 10px 0 0;
  font-size: 16px;
  line-height: 1.68;
  color: var(--neutral-600);
  max-width: 72ch;
}

body.curated-page .marketing-integrated__card {
  position: relative;
  min-width: 0;
}

body.curated-page .marketing-integrated__lead {
  margin: 0;
  font-family: var(--font-heading);
  text-transform: uppercase;
  font-size: clamp(32px, 4.2vw, 44px);
  line-height: 1.05;
  letter-spacing: -1.6px;
  max-width: 800px;
  color: var(--neutral-950);
}

/* Phones: the 32px floor above is too wide for "COMMUNICATIONS" (it was clipped at 320-414px). */
@media (max-width: 480px) {
  body.curated-page .marketing-integrated__lead {
    font-size: clamp(20px, 6.8vw, 32px);
    overflow-wrap: break-word;
  }
}

/* Blue words in the statement. copy-line-reveal.js can wrap a whole line inside an accent span, which
   turned plain words blue ("TO", "AND"), so each word is coloured by its own class once it is wrapped. */
body.curated-page .marketing-integrated__lead .marketing-integrated__accent { color: var(--brand-blue); }
body.curated-page .marketing-integrated__lead .il-line-reveal__w { color: var(--neutral-950); }
body.curated-page .marketing-integrated__lead .il-line-reveal__w.marketing-integrated__accent { color: var(--brand-blue); }
/* The sub's accent spans only group words for the reveal; they stay the sub's colour. */
body.curated-page .marketing-integrated__sub .marketing-integrated__accent { color: inherit; }

/* Diagram */
body.curated-page .marketing-integrated__venn {
  position: relative;
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  aspect-ratio: 400 / 380;
}
body.curated-page .marketing-integrated__venn-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
}
body.curated-page .marketing-integrated__circle {
  fill: rgba(96, 48, 217, 0.07);
  stroke: rgba(96, 48, 217, 0.55);
  stroke-width: 1.5;
  vector-effect: non-scaling-stroke;
}

body.curated-page .marketing-integrated__venn-label {
  position: absolute;
  transform: translate(-50%, -50%);
  font-family: var(--font-body);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  text-align: center;
  white-space: nowrap;
  color: var(--neutral-950);
}
body.curated-page .marketing-integrated__venn-label--research { left: 50%; top: 18%; }
body.curated-page .marketing-integrated__venn-label--advisory { left: 23%; top: 75%; }
body.curated-page .marketing-integrated__venn-label--comms { left: 77%; top: 75%; }

/* Reveal: the circles start apart and close in when the section scrolls into view. */
body.curated-page .marketing-integrated__circle {
  transition:
    opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
body.curated-page .marketing-integrated__venn-label {
  transition: opacity 0.9s cubic-bezier(0.22, 1, 0.36, 1);
}
/* Hidden only when scripts run (html.ds-js), with a fail-safe if copy-line-reveal.js never runs: see the copy reveal below. */
:where(html.ds-js) body.curated-page .marketing-integrated:not(.marketing-integrated--revealed) .marketing-integrated__circle,
:where(html.ds-js) body.curated-page .marketing-integrated:not(.marketing-integrated--revealed) .marketing-integrated__venn-label {
  opacity: 0;
  transition: none;
}
:where(html.ds-js) body.curated-page .marketing-integrated:not(.marketing-integrated--revealed) .marketing-integrated__circle--research { transform: translate(0, -26px); }
:where(html.ds-js) body.curated-page .marketing-integrated:not(.marketing-integrated--revealed) .marketing-integrated__circle--advisory { transform: translate(-22px, 13px); }
:where(html.ds-js) body.curated-page .marketing-integrated:not(.marketing-integrated--revealed) .marketing-integrated__circle--comms { transform: translate(22px, 13px); }

body.curated-page .marketing-integrated.marketing-integrated--revealed .marketing-integrated__circle { transition-delay: 0.15s; }
body.curated-page .marketing-integrated.marketing-integrated--revealed .marketing-integrated__venn-label { transition-delay: 0.45s; }

@media (min-width: 1025px) {
  body.curated-page .marketing-integrated__lead {
    font-size: clamp(34px, 3vw, 44px);
  }
  body.curated-page .marketing-integrated__venn { margin: 0 0 0 auto; }
}
@media (max-width: 768px) {
  body.curated-page .marketing-integrated { padding: 88px 0; }
  body.curated-page .marketing-integrated__venn { max-width: 340px; }
}
@media (max-width: 400px) {
  body.curated-page .marketing-integrated__venn-label { font-size: 10px; }
}

/* Line-by-line copy reveal (assets/copy-line-reveal.js); re-triggers each time the section enters. The copy and the
   diagram start hidden only when scripts run (html.ds-js is set in <head> before the first paint), so they show
   without JavaScript; and if copy-line-reveal.js has not run 4s after they first render (it then sets html.lr-ready),
   the fail-safe animations show them anyway. :where() adds no specificity, so the cascade is unchanged. */
:where(html.ds-js) body.curated-page .marketing-integrated.il-line-reveal--pending .marketing-integrated__title,
:where(html.ds-js) body.curated-page .marketing-integrated.il-line-reveal--pending .marketing-integrated__sub,
:where(html.ds-js) body.curated-page .marketing-integrated.il-line-reveal--pending .marketing-integrated__lead {
  opacity: 0;
}
:where(html.ds-js:not(.lr-ready)) body.curated-page .marketing-integrated.il-line-reveal--pending .marketing-integrated__title,
:where(html.ds-js:not(.lr-ready)) body.curated-page .marketing-integrated.il-line-reveal--pending .marketing-integrated__sub,
:where(html.ds-js:not(.lr-ready)) body.curated-page .marketing-integrated.il-line-reveal--pending .marketing-integrated__lead,
:where(html.ds-js:not(.lr-ready)) body.curated-page .marketing-integrated:not(.marketing-integrated--revealed) .marketing-integrated__venn-label {
  animation: marketing-integrated-failsafe-fade 0s 4s forwards;
}
:where(html.ds-js:not(.lr-ready)) body.curated-page .marketing-integrated:not(.marketing-integrated--revealed) .marketing-integrated__circle {
  animation: marketing-integrated-failsafe-move 0s 4s forwards;
}
@keyframes marketing-integrated-failsafe-fade {
  to { opacity: 1; }
}
@keyframes marketing-integrated-failsafe-move {
  to { opacity: 1; transform: none; }
}

:where(html.ds-js) body.curated-page .marketing-integrated:not(.marketing-integrated--revealed) .il-line-reveal__line {
  opacity: 0;
  transform: translate3d(0, 32px, 0);
  transition: none;
}

body.curated-page .marketing-integrated.marketing-integrated--revealed .il-line-reveal__line {
  opacity: 1;
  transform: translate3d(0, 0, 0);
  transition:
    opacity 0.85s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.85s cubic-bezier(0.22, 1, 0.36, 1);
  transition-delay: calc(0.04s + var(--il-line-stagger, 0) * 0.055s);
}

body.curated-page .marketing-integrated .il-line-reveal__line {
  display: block;
}

@media (prefers-reduced-motion: reduce) {
  body.curated-page .marketing-integrated .il-line-reveal__line,
body.curated-page .marketing-integrated .marketing-integrated__circle {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
  body.curated-page .marketing-integrated .marketing-integrated__venn-label {
    opacity: 1 !important;
    transition: none !important;
  }
  body.curated-page .marketing-integrated .marketing-integrated__title,
  body.curated-page .marketing-integrated .marketing-integrated__sub,
  body.curated-page .marketing-integrated .marketing-integrated__lead {
    opacity: 1;
  }
}

@media (max-width: 1024px) {
  body.curated-page .marketing-services__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 900px) {
  body.curated-page .marketing-services__list {
    grid-template-columns: 1fr;
  }
}

/* ============================================================
   OUR APPROACH (copied from landing)
   ============================================================ */
body.curated-page .pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 30px;
  padding: 0 16px;
  border-radius: var(--radius-full);
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  width: fit-content;
}

body.curated-page .approach {
  background: var(--white);
  padding: 120px 0;
}

body.curated-page .approach .container {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}

body.curated-page .approach .section-title {
  margin-top: 16px;
}

body.curated-page .approach-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 32px;
  margin-top: 32px;
  width: 100%;
  align-self: stretch;
}

body.curated-page .approach-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

body.curated-page .approach-top {
  display: flex;
  align-items: center;
}

body.curated-page .approach-num {
  width: 40px;
  height: 40px;
  background: var(--neutral-950);
  border-radius: var(--radius-md);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-heading);
  font-size: 18px;
  color: var(--white);
  flex-shrink: 0;
}

body.curated-page .approach-line {
  flex: 1;
  height: 1px;
  margin-left: 12px;
  max-width: 260px;
  position: relative;
  background: var(--neutral-200);
  overflow: hidden;
}

body.curated-page .approach-line::after {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  height: 1px;
  width: 160px;
  background: var(--brand-blue);
  transform: translateX(-160px);
  display: none;
}

body.curated-page .approach-name {
  font-family: var(--font-heading);
  font-size: 18px;
  letter-spacing: -0.8px;
  text-transform: uppercase;
  color: var(--neutral-950);
}

body.curated-page .approach-desc {
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  color: var(--neutral-600);
}

/* ============================================================
   CTA SECTION: the closing card. Its particles, grid lines and shimmer (.cta-card--fx)
   are in cta-card-fx.css, which curated.html links right before the section.
   ============================================================ */
body.curated-page .cta-section {
  background: var(--white);
  padding: 120px 0 120px;
}
body.curated-page .cta-card {
  border: none;
  border-radius: var(--radius-xl);
  padding: 80px 50px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 24px;
  position: relative;
  isolation: isolate;
  background: linear-gradient(180deg, #324764 0%, #0a0a0a 100%);
  overflow: hidden;
}

body.curated-page .cta-heading,
body.curated-page .cta-card > .btn {
  position: relative;
  z-index: 2;
}

body.curated-page .cta-heading {
  font-family: var(--font-heading);
  font-size: 55px;
  line-height: 72px;
  letter-spacing: -2.4px;
  text-transform: uppercase;
  color: var(--white);
  max-width: 1000px;
  margin: 0;
  white-space: normal;
}
body.curated-page .cta-heading-accent {
  display: inline;
  white-space: normal;
  color: #6b97ff; /* brand blue lightened for the dark card: 3.4:1 or more anywhere on its gradient (#3f75f5 was 2.3-2.9:1) */
}
body.curated-page .cta-section .btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 52px;
  padding: 0 32px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-weight: 700;
  font-size: 16px;
  cursor: pointer;
  transition: opacity 0.2s;
  white-space: nowrap;
  border: none;
  text-decoration: none;
  box-sizing: border-box;
}
body.curated-page .cta-section .btn:hover { opacity: 0.85; }
body.curated-page .cta-section .btn-cta-white {
  background: var(--white);
  color: var(--neutral-950);
}
body.curated-page .cta-section .btn-cta-white:hover { opacity: 0.9; }
body.curated-page .cta-section .btn:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 3px;
}
body.curated-page .cta-section .btn svg {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  stroke: currentColor;
}

@media (max-width: 1024px) {
  body.curated-page .approach-grid {
    gap: 24px;
  }
}

@media (max-width: 768px) {
  body.curated-page .approach {
    padding: 80px 0;
  }

  body.curated-page .cta-section { padding: 80px 0; }
  body.curated-page .cta-card { padding: 50px 24px; }
  body.curated-page .cta-heading {
    font-size: 36px;
    line-height: 42px;
    letter-spacing: -1.5px;
  }
  body.curated-page .cta-heading-accent { white-space: normal; }

  body.curated-page .approach-grid {
    grid-template-columns: 1fr;
    gap: 24px;
  }

  body.curated-page .approach-line {
    max-width: none;
  }
}

@media (max-width: 480px) {
  body.curated-page .cta-heading {
    font-size: 30px;
    line-height: 36px;
  }
}

/* ============================================================
   CURATED PAGE BLOCKS (hero, two tracks, the app stepper, chains, growth header, buttons).
   Built from the site's own pieces (Monument headings, pill buttons, 24-32px cards) in the Curated purple.
   ============================================================ */

/* Buttons: purple primary, outline secondary; same size as the site's pill buttons. */
body.curated-page .cur-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 52px;
  padding: 0 30px;
  border-radius: var(--radius-full);
  font-family: var(--font-body);
  font-size: 16px;
  font-weight: 700;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.2s ease, transform 0.2s ease, color 0.2s ease;
}

body.curated-page .cur-btn--primary {
  background: var(--cur-purple);
  color: var(--white);
}

body.curated-page .cur-btn--primary:hover {
  background: #4f22c2;
  transform: translateY(-1px);
}

body.curated-page .cur-btn:focus-visible,
body.curated-page .cur-track:focus-visible {
  outline: 2px solid var(--cur-purple);
  outline-offset: 3px;
}

/* Hero: the CURATED logo lockup above the headline. */
body.curated-page .cur-hero__logo {
  display: block;
  width: auto;
  height: clamp(72px, 7vw, 104px);
  margin: 0 0 28px -4%;
}

/* Two tracks: overview cards that jump to their sections. */
body.curated-page .cur-tracks {
  position: relative;
  z-index: 2;
  padding: 8px 0 120px;
  background: var(--white);
}

body.curated-page .cur-tracks__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.curated-page .cur-track {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  height: 100%;
  min-height: 260px;
  padding: 36px 36px 32px;
  border-radius: 28px;
  overflow: hidden;
  text-decoration: none;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.25s ease;
}

body.curated-page .cur-track:hover {
  transform: translateY(-3px);
  box-shadow: 0 24px 48px rgba(96, 48, 217, 0.16);
}

body.curated-page .cur-track--app {
  background: var(--cur-lilac);
  color: var(--cur-ink);
}

body.curated-page .cur-track--growth {
  background: radial-gradient(120% 100% at 100% 0%, rgba(142, 101, 254, 0.35), rgba(142, 101, 254, 0) 60%), var(--cur-ink);
  color: var(--white);
}

body.curated-page .cur-track__label {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cur-purple);
}

body.curated-page .cur-track--growth .cur-track__label {
  color: #c3adff;
}

body.curated-page .cur-track__title {
  font-family: var(--font-heading);
  font-size: clamp(24px, 2.4vw, 34px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

body.curated-page .cur-track__text {
  max-width: 40ch;
  font-size: 17px;
  line-height: 1.55;
  opacity: 0.85;
}

body.curated-page .cur-track__more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: auto;
  padding-top: 20px;
  font-size: 15px;
  font-weight: 700;
}

body.curated-page .cur-track__more svg {
  width: 18px;
  height: 18px;
  transition: transform 0.25s ease;
}

body.curated-page .cur-track:hover .cur-track__more svg {
  transform: translateY(3px);
}

/* The app: a sticky card inside a taller track; scrolling walks through the four structures. */
body.curated-page .cur-app {
  background: var(--white);
  scroll-margin-top: var(--site-navbar-height);
}

body.curated-page .cur-app__track {
  height: 260vh;
}

/* The sticky layer is one screen tall and centres the card in it, so no empty band shows below the card. */
body.curated-page .cur-app__sticky {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  min-height: 100vh;
  min-height: 100svh;
  padding-top: calc(var(--site-navbar-height) * 0.6);
}

body.curated-page .cur-app__sticky > .container {
  width: 100%;
}

body.curated-page .cur-app__card {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
  align-items: center;
  gap: 48px;
  min-height: min(680px, calc(100vh - var(--site-navbar-height) - 48px));
  padding: clamp(32px, 4vw, 56px);
  border-radius: 32px;
  background: #f6f5fa;
  overflow: hidden;
}

body.curated-page .cur-app__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
}

body.curated-page .cur-app__lead {
  max-width: 54ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--neutral-700);
}

body.curated-page .cur-app__intro {
  margin-top: 10px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cur-purple);
}

body.curated-page .cur-app__deals {
  width: 100%;
  margin: 0 0 18px;
  padding: 0;
  list-style: none;
}

body.curated-page .cur-app__deal {
  position: relative;
  padding: 6px 0 6px 34px;
  font-family: var(--font-heading);
  font-size: clamp(22px, 3.2vw, 46px);
  line-height: 1.12;
  letter-spacing: -0.04em;
  text-transform: uppercase;
  /* Unlit steps stay readable (5:1 on the card). */
  color: #6b6680;
  transition: color 0.3s cubic-bezier(0.22, 1, 0.36, 1), transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

body.curated-page .cur-app__deal::before {
  content: "*";
  position: absolute;
  left: 2px;
  top: 0.18em;
  font-size: 0.8em;
  color: currentColor;
}

body.curated-page .cur-app__deal.is-active {
  color: var(--cur-ink);
  transform: translateX(4px);
}

body.curated-page .cur-app__deal.is-active::before {
  color: var(--cur-purple);
}

body.curated-page .cur-app__art {
  position: relative;
  display: grid;
  place-items: center;
  aspect-ratio: 1;
  width: 100%;
  max-width: 340px;
  justify-self: center;
  border-radius: 28px;
  background: radial-gradient(70% 70% at 50% 50%, rgba(142, 101, 254, 0.16), rgba(142, 101, 254, 0));
}

body.curated-page .cur-app__svg {
  width: 82%;
  height: auto;
  overflow: visible;
  transition: opacity 0.16s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
}

body.curated-page .cur-app__svg.is-swapping {
  opacity: 0;
  transform: scale(0.96);
}

body.curated-page .cur-app__shape {
  fill-rule: evenodd;
}

body.curated-page .cur-app__shape--dark {
  fill: var(--cur-purple);
}

body.curated-page .cur-app__shape--light {
  fill: var(--cur-violet);
}

body.curated-page .cur-app__count {
  position: absolute;
  right: 18px;
  bottom: 14px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.08em;
  color: var(--cur-purple);
}

/* Chains: heading on top, logos in an even grid (7 logos: 4 + 3 centred). */
body.curated-page .cur-chains {
  padding: 120px 0;
  background: var(--white);
}

body.curated-page .cur-chains__head {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 36px;
}

body.curated-page .cur-chains__sub {
  max-width: 60ch;
  font-size: 17px;
  line-height: 1.6;
  color: var(--neutral-600);
}

body.curated-page .cur-chains__grid {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 14px;
  margin: 0;
  padding: 0;
  list-style: none;
}

body.curated-page .cur-chains__cell {
  display: grid;
  place-items: center;
  flex: 0 0 calc((100% - 42px) / 4);
  height: 120px;
  padding: 30px 36px;
  border: 1px solid var(--neutral-200);
  border-radius: 20px;
  background: #fafafc;
  transition: border-color 0.2s ease, background 0.2s ease;
}

body.curated-page .cur-chains__cell:hover {
  border-color: rgba(96, 48, 217, 0.35);
  background: var(--white);
}

body.curated-page .cur-chains__cell img {
  width: 100%;
  height: 100%;
  max-width: 170px;
  max-height: 44px;
  object-fit: contain;
}

/* Growth: the dark services section, with its own label and lead. */
body.curated-page .cur-growth {
  scroll-margin-top: var(--site-navbar-height);
  background: radial-gradient(80% 60% at 90% 0%, rgba(142, 101, 254, 0.28), rgba(142, 101, 254, 0) 60%), var(--cur-ink);
}

body.curated-page .cur-growth__label {
  margin: 0 0 14px;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #c3adff;
}

body.portfolio-page.curated-page .cur-growth__sub {
  max-width: 100ch;
  margin-bottom: 48px;
  font-size: 17px;
  line-height: 1.6;
}

/* Closing CTA: two buttons, purple-tinted card. */
body.curated-page .cur-cta {
  background: radial-gradient(90% 120% at 50% 0%, rgba(142, 101, 254, 0.4), rgba(142, 101, 254, 0) 60%), var(--cur-ink);
}

body.curated-page .cur-cta .cta-heading-accent {
  color: #b79dff;
}

body.curated-page .cur-cta__actions {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
}

body.curated-page .cta-section .btn-cta-outline {
  background: transparent;
  color: var(--white);
  border: 1px solid rgba(255, 255, 255, 0.7);
}

@media (max-width: 1024px) {
  body.curated-page .cur-app__card {
    grid-template-columns: minmax(0, 1fr) minmax(0, 0.6fr);
    gap: 28px;
  }
}

@media (max-width: 900px) {
  body.curated-page .cur-tracks__grid {
    grid-template-columns: minmax(0, 1fr);
  }

  body.curated-page .cur-track {
    min-height: 0;
  }

  /* Phones and small tablets: no sticky track; the steps still light up as the card passes. */
  body.curated-page .cur-app__track {
    height: auto;
  }

  body.curated-page .cur-app__sticky {
    position: static;
    min-height: 0;
    padding: 0 0 72px;
  }

  body.curated-page .cur-app__card {
    grid-template-columns: minmax(0, 1fr);
    min-height: 0;
  }

  body.curated-page .cur-app__art {
    max-width: 220px;
    justify-self: start;
    order: -1;
  }

  body.curated-page .cur-chains {
    padding: 96px 0;
  }

  body.curated-page .cur-chains__cell {
    flex-basis: calc((100% - 28px) / 3);
  }
}

@media (max-width: 600px) {
  /* Fade the hero's field into the white page so the track cards below never sit on a hard edge. */

  body.curated-page .cur-tracks {
    padding-bottom: 72px;
  }

  body.curated-page .cur-track {
    padding: 28px 24px;
  }

  body.curated-page .cur-chains {
    padding: 72px 0;
  }

  body.curated-page .cur-chains__cell {
    flex-basis: calc((100% - 14px) / 2);
    height: 100px;
    padding: 24px;
  }

  body.curated-page .cur-app__deal {
    font-size: clamp(17px, 5.2vw, 24px);
    padding-left: 26px;
  }
}

@media (prefers-reduced-motion: reduce) {
  body.curated-page .cur-app__track {
    height: auto;
  }

  body.curated-page .cur-app__sticky {
    position: static;
    min-height: 0;
    padding: 0 0 96px;
  }

  body.curated-page .cur-app__deal,
  body.curated-page .cur-app__svg,
  body.curated-page .cur-track {
    transition: none;
  }

  body.curated-page .cur-app__deal.is-active {
    transform: none;
  }
}

/* ======================================================================================================
   Design system alignment (body.ds-page): Curated now shares the site's blue palette, dark intro band and
   navy glass cards. Purple stays only as a Curated accent: the logo (white on the band) and the deal artwork.
   ====================================================================================================== */
body.curated-page.ds-page {
  --cur-purple: var(--ds-blue);
  --cur-violet: var(--ds-blue-bright);
  --cur-lilac: #eef3ff;
  --cur-ink: var(--ds-ink);
  --brand-blue: var(--ds-blue);
  --brand-blue-text: var(--ds-blue);
  --cur-art-purple: #6030d9;
  --cur-art-violet: #8e65fe;
}

body.curated-page.ds-page .cur-hero__logo {
  display: block;
  width: auto;
  height: clamp(64px, 6vw, 88px);
  margin: 0 0 28px -2px;
}

body.curated-page.ds-page .cur-btn--primary:hover { background: var(--ds-ink); }

/* Tracks: light card for the app, navy glass for growth */
body.curated-page.ds-page .cur-tracks { padding-top: 64px; }
body.curated-page.ds-page .cur-track--growth {
  background:
    radial-gradient(120% 100% at 100% 0%, rgba(63, 117, 245, 0.45), rgba(63, 117, 245, 0) 60%),
    linear-gradient(160deg, #1f49c0 0%, #050e29 80%);
  border: 1px solid rgba(188, 208, 255, 0.22);
}
body.curated-page.ds-page .cur-track:hover { box-shadow: 0 24px 48px rgba(45, 96, 226, 0.2); }

/* The app card: light blue panel; the deal artwork keeps the Curated purple */
body.curated-page.ds-page .cur-app__card { background: #eef3ff; }

/* Growth and closing CTA: navy with a blue glow instead of purple */
body.curated-page.ds-page .cur-growth {
  background: radial-gradient(80% 60% at 90% 0%, rgba(63, 117, 245, 0.32), rgba(63, 117, 245, 0) 60%), var(--ds-ink);
}
body.curated-page.ds-page .cur-growth__label { color: var(--ds-mist); }
body.curated-page.ds-page .cur-cta .cta-heading-accent { color: var(--ds-mist); }

/* On the app: a snapshot of the live product */
body.curated-page.ds-page .cur-live {
  padding: 120px 0 96px;
  background: var(--white);
}
body.curated-page.ds-page .cur-live__sub {
  margin: 12px 0 44px;
  max-width: 56ch;
  font-size: 17px;
  line-height: 1.6;
}
body.curated-page.ds-page .cur-live__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 20px;
  margin: 0;
  padding: 0;
  list-style: none;
}
body.curated-page.ds-page .cur-live__card {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 28px;
  border-radius: 24px;
  border: 1px solid rgba(188, 208, 255, 0.22);
  background:
    radial-gradient(120% 90% at 100% 0%, rgba(98, 140, 255, 0.4), rgba(98, 140, 255, 0) 60%),
    linear-gradient(160deg, #1f49c0 0%, #050e29 80%);
  box-shadow: 0 24px 60px -28px rgba(5, 14, 41, 0.7);
  overflow: hidden;
}
body.curated-page.ds-page .cur-live__kind {
  font-family: var(--ds-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ds-mist);
}
body.curated-page.ds-page .cur-live__title {
  margin: 0 0 14px;
  font-family: var(--ds-font-heading);
  font-weight: 900;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: #fff;
}
body.curated-page.ds-page .cur-live__rows { margin: 0; padding: 0; list-style: none; }
body.curated-page.ds-page .cur-live__rows li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 14px 0;
  border-top: 1px solid rgba(255, 255, 255, 0.16);
  font-size: 15px;
  line-height: 1.4;
  color: rgba(255, 255, 255, 0.92);
}
body.curated-page.ds-page .cur-live__rows em {
  flex-shrink: 0;
  font-style: normal;
  font-family: var(--ds-font-mono);
  font-size: 12px;
  letter-spacing: 0.06em;
  color: var(--ds-mist);
}
body.curated-page.ds-page .cur-live__text { margin: 0; font-size: 15px; line-height: 1.55; color: rgba(255, 255, 255, 0.86); }
body.curated-page.ds-page .cur-live__link {
  margin-top: auto;
  padding-top: 16px;
  font-weight: 600;
  font-size: 15px;
  color: #fff;
  text-decoration: underline;
  text-underline-offset: 4px;
}
body.curated-page.ds-page .cur-live__curators {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 14px 24px;
  margin-top: 36px;
  padding-top: 28px;
  border-top: 1px solid rgba(17, 24, 39, 0.12);
}
body.curated-page.ds-page .cur-live__curators-label {
  margin: 0;
  font-family: var(--ds-font-mono);
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
body.curated-page.ds-page .cur-live__chips { display: flex; flex-wrap: wrap; gap: 10px; margin: 0; padding: 0; list-style: none; }
body.curated-page.ds-page .cur-live__chips li {
  padding: 8px 16px;
  border-radius: 999px;
  border: 1px solid rgba(45, 96, 226, 0.28);
  font-size: 14px;
  font-weight: 600;
}
@media (max-width: 900px) {
  body.curated-page.ds-page .cur-live { padding: 80px 0 64px; }
  body.curated-page.ds-page .cur-live__grid { grid-template-columns: minmax(0, 1fr); }
}
body.curated-page.ds-page .cur-track__title { text-transform: none; font-size: clamp(24px, 2.4vw, 32px); letter-spacing: -0.02em; }

/* Tracks, the app and "what runs" sit on the dark navy band: white type and glass cards */
body.curated-page.ds-page .cur-track--app,
body.curated-page.ds-page .cur-track--growth { color: #fff; }
body.curated-page.ds-page .cur-track--app { background: rgba(45, 96, 226, 0.38); }
body.curated-page.ds-page .cur-track__label,
body.curated-page.ds-page .cur-track--growth .cur-track__label { color: var(--ds-mist); }
body.curated-page.ds-page .cur-track__title { color: #fff; }
body.curated-page.ds-page .cur-track__text,
body.curated-page.ds-page .cur-track__more { color: rgba(255, 255, 255, 0.9); }
body.curated-page.ds-page .cur-app__card { color: #fff; }
body.curated-page.ds-page .cur-app .section-title,
body.curated-page.ds-page .cur-live .section-title { color: #fff; }
body.curated-page.ds-page .cur-app__lead { color: rgba(255, 255, 255, 0.9); }
body.curated-page.ds-page .cur-app__intro { color: var(--ds-mist); }
body.curated-page.ds-page .cur-app__deal.is-active { color: #fff; }
body.curated-page.ds-page .cur-app__count { color: var(--ds-mist); }
body.curated-page.ds-page .cur-app__art { background: radial-gradient(70% 70% at 50% 50%, rgba(255, 255, 255, 0.1), rgba(255, 255, 255, 0)); }
body.curated-page.ds-page .cur-app__shape--dark { fill: #8e65fe; }
body.curated-page.ds-page .cur-app__shape--light { fill: #cbb8ff; }
body.curated-page.ds-page .cur-live__card { color: #fff; }
body.curated-page.ds-page .cur-live__sub { color: rgba(255, 255, 255, 0.88); }
body.curated-page.ds-page .cur-live__curators { border-top-color: rgba(255, 255, 255, 0.2); }
body.curated-page.ds-page .cur-live__curators-label { color: var(--ds-mist); }
body.curated-page.ds-page .cur-live__chips li {
  background: rgba(255, 255, 255, 0.1);
  border-color: rgba(255, 255, 255, 0.3);
  color: #fff;
}
body.curated-page.ds-page .cur-app__deal { color: rgba(255, 255, 255, 0.78); }
body.curated-page.ds-page .cur-app__deal::before { color: var(--ds-mist); }
/* Taste pass: no "1 / 4" counter on the artwork (the lit deal name already says where you are) */
body.curated-page.ds-page .cur-app__count { display: none; }

/* Taste pass: the hero fades into the navy (no hard seam) and the app card sits just under the track cards instead
   of floating in the middle of an empty screen. */
body.curated-page.ds-page .ds-band.ds-band { box-shadow: inset 0 -140px 120px -80px #050b40; }