/* =========================================================
   The Readiness Forum — Hero
   ========================================================= */

/* ---------- Tokens ---------- */
:root {
  --blue:        #3a5ae8;
  --blue-deep:   #2f4fd8;
  --green:       #9bca95;   /* accent — "Suppliers" */
  --green-soft:  #aed9bf;
  --ink:         #17181a;   /* button */
  --white:       #ffffff;

  /* Study section */
  --ink-900:     #1e1e1e;   /* body headline */
  --ink-700:     #3a3c40;   /* chip label */
  --ink-600:     #414857;   /* body copy */
  --chip-bg:     #f4faf6;
  --chip-line:   rgba(20, 40, 30, .09);
  --mark-blue:   #385af4;   /* chip corner square */
  --grad-a:      #8fc9a2;   /* accent gradient — green */
  --grad-b:      #7fb3b8;
  --grad-c:      #6398c9;   /* accent gradient — blue */

  --font-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --font-serif:   "Lora", Georgia, "Times New Roman", serif;
  --font-ui:      "Poppins", "Helvetica Neue", Arial, sans-serif;

  --gutter: clamp(1.25rem, 5vw, 4rem);
  --shell:  1040px;
  --nav-h:  clamp(4.5rem, 9vh, 5.5rem);

  --ease: cubic-bezier(0.22, 1, 0.36, 1);        /* entrances — fast out, long settle */
  --ease-hover: cubic-bezier(0.33, 0.6, 0.28, 1); /* hover — gentler on both ends */
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-ui);
  color: var(--white);
  background: var(--blue);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img, video { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }

:focus-visible {
  outline: 2px solid var(--white);
  outline-offset: 4px;
  border-radius: 4px;
}

/* =========================================================
   HERO
   ========================================================= */
.hero {
  position: relative;
  min-height: 86vh;                          /* fallback */
  min-height: clamp(34rem, 86svh, 52rem);    /* 544px – 832px */
  display: flex;
  overflow: hidden;
  isolation: isolate;
  /* Fallback gradient, visible before the video paints */
  background:
    radial-gradient(120% 90% at 85% 100%, rgba(174, 217, 191, .95) 0%, rgba(174, 217, 191, 0) 55%),
    linear-gradient(115deg, var(--blue-deep) 0%, #4d70c8 45%, #7fae9f 78%, #a9d6c0 100%);
}

/* ---------- Background media ---------- */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.hero__video.is-ready { opacity: 1; }

/* Gentle scrim so type stays legible over any frame of the video */
.hero__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    100deg,
    rgba(20, 30, 70, .28) 0%,
    rgba(20, 30, 70, .14) 45%,
    rgba(20, 30, 70, 0) 75%
  );
  pointer-events: none;
}

/* ---------- Layout shell ---------- */
.hero__inner {
  position: relative;
  width: 100%;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding: calc(clamp(1.5rem, 3.5vh, 2.5rem) + var(--nav-h)) var(--gutter) clamp(2.5rem, 6vh, 4.5rem);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: clamp(2rem, 5vh, 3.5rem);
}

/* =========================================================
   NAV
   ========================================================= */
.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  color: var(--white);
  background: transparent;
  box-shadow: none;
  transition: background-color .35s var(--ease-hover), box-shadow .35s var(--ease-hover), color .35s var(--ease-hover);
}

.nav.is-scrolled {
  color: var(--ink-900);
  background: var(--white);
  box-shadow: 0 12px 30px -18px rgba(20, 30, 45, .35);
}

.nav.is-scrolled .nav__toggle span { background: var(--ink-900); }

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 1.5rem;
  min-height: var(--nav-h);
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Wordmark is hidden on desktop (design shows nav links only),
   shown on small screens so the header isn't empty. */
.nav__brand {
  margin-right: auto;
  display: flex;
  align-items: center;
  transition: opacity .3s var(--ease-hover);
}

.nav__brand:hover { opacity: .82; }

.nav__logo {
  width: auto;
  height: clamp(2.35rem, 3.2vw, 2.9rem);
}

.nav__menu {
  display: flex;
  align-items: center;
  gap: clamp(2rem, 4.5vw, 4.5rem);
}

.nav__link {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(.95rem, 1.15vw, 1.1rem);
  letter-spacing: .01em;
  position: relative;
  padding-block: .35rem;
  transition: opacity .25s var(--ease);
}

.nav__link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 1.5px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .35s var(--ease);
}
.nav__link:hover::after,
.nav__link:focus-visible::after { transform: scaleX(1); }

/* Hamburger */
.nav__toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
  gap: 5px;
}
.nav__toggle span {
  display: block;
  width: 24px;
  height: 2px;
  background: var(--white);
  border-radius: 2px;
  transition: transform .3s var(--ease), opacity .2s var(--ease), width .3s var(--ease);
}
.nav__toggle span:nth-child(2) { width: 18px; }

.nav__toggle[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav__toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.nav__toggle[aria-expanded="true"] span:nth-child(3) { width: 24px; transform: translateY(-7px) rotate(-45deg); }

/* =========================================================
   HERO CONTENT
   ========================================================= */
.hero__content {
  align-self: center;
  max-width: 100%;
}

.hero__title {
  margin: 0;
  font-family: "K2D", var(--font-display);
  font-weight: 800;
  /* Sized so "THE READINESS FORUM" holds a single line inside --shell */
  font-size: clamp(2.2rem, 6.5vw, 4.7rem);
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-transform: uppercase;
}

.hero__subtitle {
  margin: clamp(.85rem, 1.6vh, 1.35rem) 0 0;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(1.35rem, 3.1vw, 2.45rem);
  line-height: 1.2;
  letter-spacing: -0.005em;
}

.hero__subtitle em {
  font-style: normal;
  color: var(--white);
}

/* ---------- CTA ---------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 1.15rem;
  margin-top: clamp(1.75rem, 4vh, 2.75rem);
  padding: .75rem 1.6rem;
  border-radius: 10px;
  background: var(--ink);
  color: var(--white);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(.88rem, 1.05vw, 1rem);
  letter-spacing: -0.005em;
  line-height: 1;
  transition: transform .3s var(--ease), background-color .3s var(--ease), box-shadow .3s var(--ease);
  will-change: transform;
}

.btn:hover {
  background: #000;
  transform: translateY(-2px);
  box-shadow: 0 14px 30px -14px rgba(0, 0, 0, .65);
}
.btn:active { transform: translateY(0); }

.btn__arrow { transition: transform .3s var(--ease); flex: none; object-fit: contain; }
.btn:hover .btn__arrow { transform: translateX(4px); }

/* =========================================================
   HOSTED BY
   ========================================================= */
.hero__hosted { align-self: end; }

.hosted__label {
  margin: 0 0 .55rem;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(.95rem, 1.2vw, 1.15rem);
  letter-spacing: .005em;
}

.hosted__logo {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(1.45rem, 2.4vw, 2.1rem);
  letter-spacing: .34em;
  text-transform: uppercase;
  line-height: 1;
}

.hosted__logo sup {
  font-size: .3em;
  letter-spacing: 0;
  vertical-align: super;
  top: -.15em;
  position: relative;
}

/* =========================================================
   STUDY  —  "The Forum launches in December 2026…"
   ========================================================= */
.study {
  position: relative;
  background: var(--white);
  color: var(--ink-900);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(4.5rem, 13vh, 8.5rem) 0 clamp(13rem, 34vh, 21rem);
}

/* ---------- Photograph, anchored to the bottom edge ---------- */
.study__photo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: clamp(13rem, 42%, 26rem);
  z-index: 0;
  background: url("../assest/images/readiness-fourm.webp") center 32% / cover no-repeat;
  filter: grayscale(1) brightness(1.07) contrast(.9);
  opacity: .93;
  /* Dissolve into the white page as it rises */
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 26%, #000 55%);
          mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .55) 26%, #000 55%);
}

/* Soft white bleed on the left/right edges */
.study__photo::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to right,
    var(--white) 0%,
    rgba(255, 255, 255, 0) 7%,
    rgba(255, 255, 255, 0) 93%,
    var(--white) 100%
  );
}

/* ---------- Dot texture, sits above everything ---------- */
.study__dots {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: url("../assest/images/readiness-bg-dot.webp") center / cover no-repeat;
  pointer-events: none;
}

/* ---------- Content ---------- */
.study__inner {
  position: relative;
  z-index: 2;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.study__lede {
  margin: 0;
  max-width: 36.5ch;
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(1.2rem, 2.45vw, 1.95rem);
  line-height: 1.37;
  letter-spacing: -0.011em;
}

/* Green → blue gradient fill on the study name */
.study__accent {
  font-family: "K2D", var(--font-ui);
  color: #2C5BFD;
}

/* Fallback for engines without background-clip: text */
@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .study__accent { color: #2C5BFD; -webkit-text-fill-color: currentColor; }
}

/* ---------- Chips ---------- */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
  margin: clamp(2.25rem, 7vh, 5rem) 0 0;
  padding: 0;
  list-style: none;
}

.br-lg { display: inline; }

.chip {
  position: relative;
  padding: 1.15rem 1.85rem 1.15rem 1.6rem;
  border: 1px solid var(--chip-line);
  border-radius: 9px;
  background: var(--chip-bg);
  color: var(--ink-700);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(.92rem, 1.35vw, 1.06rem);
  line-height: 1;
  white-space: nowrap;
  transition: transform .4s var(--ease-hover), box-shadow .4s var(--ease-hover);
}

.chip::after {
  content: "";
  position: absolute;
  right: 10px;
  bottom: 10px;
  width: 9px;
  height: 9px;
  border-radius: 1.5px;
  background: var(--mark-blue);
}

@media (hover: hover) {
  .chip:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 24px -16px rgba(20, 40, 30, .45);
  }
}

/* =========================================================
   EDITION  —  "Supplier Readiness Study, 2026 Edition"
   ========================================================= */
.edition {
  --card-pad: clamp(1.15rem, 2vw, 1.85rem);

  position: relative;
  background: var(--white);
  color: var(--ink-900);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3.5rem, 11vh, 6.5rem) 0 clamp(4rem, 12vh, 7rem);
}

.edition__dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assest/images/readiness-bg-dot.webp") right center / cover no-repeat;
  pointer-events: none;
  /* Keep the texture weighted to the right, as in the design */
  -webkit-mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .05) 46%, rgba(0, 0, 0, .45) 66%, #000 86%);
          mask-image: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, .05) 46%, rgba(0, 0, 0, .45) 66%, #000 86%);
}

.edition__inner {
  position: relative;
  z-index: 1;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

/* Copy is inset by one card-padding so it optically aligns
   with the text inside the cards below. */
.edition__body { padding-left: var(--card-pad); }

.edition__title {
  display: flex;
  align-items: baseline;
  gap: .6rem;
  margin: 0;
  font-family: "K2D", var(--font-ui);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.78vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: .002em;
  text-transform: uppercase;
}

.edition__arrow {
  flex: none;
  color: var(--mark-blue);
  align-self: center;
  margin-top: -.1em;
  object-fit: contain;
}

.edition__lead {
  margin: clamp(1.5rem, 3.4vh, 2.4rem) 0 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(1rem, 1.48vw, 1.33rem);
  line-height: 1.35;
  letter-spacing: -.005em;
}

.edition__copy,
.edition__note {
  margin: 0;
  color: var(--ink-600, #414857);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(.96rem, 1.34vw, 1.19rem);
  line-height: 1.52;
  letter-spacing: -.004em;
}

.edition__copy {
  margin-top: clamp(.85rem, 1.8vh, 1.25rem);
  max-width: 61ch;
}

/* ---------- Note + CTA row ---------- */
.edition__foot {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: clamp(1.5rem, 4vw, 3rem);
  margin-top: clamp(1.75rem, 4vh, 2.9rem);
}

.edition__note {
  max-width: 59ch;
  margin-right: var(--card-pad);
}

.edition__foot .btn {
  flex: none;
  margin-top: 0;
  margin-right: calc(var(--card-pad) * -1); /* pull back to the card edge */
}

/* ---------- Card row ---------- */
.cards {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 6px;
  margin: clamp(2rem, 5.5vh, 3.6rem) 0 0;
  padding: 0;
  list-style: none;
}

.card {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;      /* titles align from the top, not the base */
  gap: clamp(1.5rem, 2.8vw, 2.45rem);
  min-height: clamp(13rem, 18vw, 16.5rem);
  padding: var(--card-pad);
  border: 1px solid rgba(20, 30, 45, .055);
  border-radius: 14px;
  transition: transform .4s var(--ease-hover),
              box-shadow .4s var(--ease-hover),
              border-color .4s var(--ease-hover);
}

.card--ice   { background: linear-gradient(170deg, #f1fcfe 0%, #edf4fc 100%); }
.card--cream { background: linear-gradient(170deg, #fbf6ef 0%, #f9f9f2 100%); }
.card--sage  { background: linear-gradient(170deg, #f8faf1 0%, #f4faf4 100%); }
.card--mist  { background: linear-gradient(170deg, #f3f9f3 0%, #ecf2f8 100%); }

/* No scale() — resampling the text mid-transition makes it shimmer. */
@media (hover: hover) {
  .card:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 44px -26px rgba(20, 35, 60, .35);
    border-color: rgba(255, 255, 255, .9);
  }
}

.card__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.card__label {
  font-family: var(--font-ui);
  font-weight: 500;
  font-size: clamp(.72rem, .94vw, .845rem);
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-600, #414857);
}

.card__icon {
  flex: none;
  width: 20px;
  height: 20px;
  color: #6f7683;
}

.card__title {
  margin: 0;
  min-height: 2.44em;               /* reserve two lines so all descriptions line up */
  font-family: "K2D", var(--font-ui);
  font-weight: 600;
  font-size: clamp(1.02rem, 1.5vw, 1.36rem);
  line-height: 1.22;
  letter-spacing: -.012em;
}

.card__text {
  margin: .7rem 0 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(.88rem, 1.16vw, 1.03rem);
  line-height: 1.45;
  letter-spacing: -.004em;
  color: var(--ink-600, #414857);
}

/* =========================================================
   DECEMBER  —  "What Happens in December 2026"
   ========================================================= */
.december {
  --card-pad: clamp(1.15rem, 2vw, 1.85rem);

  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background: #16233a;                       /* shows until the video paints */
  padding: clamp(2rem, 4.4vw, 3.4rem) 0 clamp(1.75rem, 3.4vw, 2.8rem);
}

.december__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.december__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.december__video.is-ready { opacity: 1; }

.december__inner {
  position: relative;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.december__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 0 var(--card-pad);
  font-family: "K2D", var(--font-ui);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.78vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: .002em;
  text-transform: uppercase;
}

.december__arrow { flex: none; color: var(--white); object-fit: contain; }

.december__grid {
  display: grid;
  grid-template-columns: .88fr 1fr;
  align-items: start;
  gap: clamp(1.5rem, 3vw, 2.3rem);
  margin-top: clamp(1.5rem, 3.4vw, 2.6rem);
}

.december__copy {
  margin: 0 0 0 var(--card-pad);
  padding-top: 1.25rem;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(1.1rem, 1.82vw, 1.63rem);
  line-height: 1.35;
  letter-spacing: -.008em;
}

.december__copy strong { font-weight: 600; }

/* ---------- Pillar cards ---------- */
.pillars {
  display: grid;
  gap: clamp(.85rem, 1.3vw, 1.15rem);
  margin: 0;
  padding: 0;
  list-style: none;
}

.pillar {
  display: flex;
  flex-direction: column;
  min-height: clamp(8rem, 11.3vw, 10.15rem);
  padding: 1.35rem;
  border-radius: 14px;
  background: var(--white);
  color: var(--ink-900);
  transition: transform .4s var(--ease-hover), box-shadow .4s var(--ease-hover);
}

@media (hover: hover) {
  .pillar:hover {
    transform: translateY(-5px);
    box-shadow: 0 24px 48px -24px rgba(0, 0, 0, .55);
  }
}

/* Title runs the full card width; only the copy makes room for the icon. */
.pillar__row {
  display: flex;
  align-items: flex-end;
  gap: clamp(1rem, 1.8vw, 1.6rem);
  flex: 1 1 auto;
}

.pillar__title {
  margin: 0;
  font-family: "K2D", var(--font-ui);
  font-weight: 600;
  font-size: clamp(1rem, 1.48vw, 1.34rem);
  line-height: 1.25;
  letter-spacing: -.014em;
}

.pillar__text {
  flex: 1 1 auto;
  min-width: 0;
  margin: .65rem 0 0;
  color: #4f525c;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(.88rem, 1.16vw, 1.03rem);
  line-height: 1.5;
  letter-spacing: -.004em;
}

.pillar__icon {
  flex: none;
  display: grid;
  place-items: center;
  width: clamp(3rem, 4.5vw, 4rem);
  height: clamp(3rem, 4.5vw, 4rem);
  border-radius: 10px;
  background: linear-gradient(150deg, #e3f0f0 0%, #d7e5f5 100%);
  color: #1e1e1e;
}

.pillar__icon img {
  width: 60%;
  height: 60%;
  object-fit: contain;
}

/* =========================================================
   PARTNER  —  "Partner With Us"
   ========================================================= */
.partner {
  --card-pad: clamp(1.15rem, 2vw, 1.9rem);

  position: relative;
  background: var(--white);
  color: var(--ink-900);
  overflow: hidden;
  isolation: isolate;
  padding: clamp(3.5rem, 10vh, 6rem) 0 clamp(3.5rem, 9vh, 5.5rem);
}

.partner__dots {
  position: absolute;
  inset: 0;
  z-index: 0;
  background: url("../assest/images/readiness-bg-dot.webp") center bottom / cover no-repeat;
  opacity: .75;
  pointer-events: none;
  -webkit-mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .5) 58%, #000 100%);
          mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, .5) 58%, #000 100%);
}

.partner__inner {
  position: relative;
  z-index: 1;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.partner__title {
  display: flex;
  align-items: center;
  gap: .6rem;
  margin: 0 0 0 var(--card-pad);
  font-family: "K2D", var(--font-ui);
  font-weight: 700;
  font-size: clamp(1.05rem, 1.78vw, 1.6rem);
  line-height: 1.2;
  letter-spacing: .002em;
  text-transform: uppercase;
}

.partner__arrow { flex: none; color: var(--mark-blue); object-fit: contain; }

/* ---------- Copy + photograph ---------- */
.partner__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: start;
  gap: clamp(1.5rem, 2.4vw, 2.2rem);
  margin: clamp(2rem, 5vh, 3.4rem) 0 0 var(--card-pad);
}

.partner__copy p {
  margin: 0;
  max-width: 38ch;
  color: var(--ink-600);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(.98rem, 1.34vw, 1.2rem);
  line-height: 1.45;
  letter-spacing: -.004em;
}

.partner__copy p + p { margin-top: clamp(1.25rem, 2.6vh, 2rem); }
.partner__copy strong { font-weight: 600; color: var(--ink-900); }

.partner__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: clamp(.7rem, 1.1vw, .9rem);
  margin-top: clamp(1.5rem, 3vh, 2.1rem);
}

.btn--compact {
  margin-top: 0;
  padding: .65rem 1.5rem;
  border-radius: 8px;
}

.partner__mail {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--mark-blue);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(.92rem, 1.19vw, 1.06rem);
  white-space: nowrap;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-decoration-thickness: 1px;
  transition: opacity .25s var(--ease);
}

.partner__mail:hover { opacity: .72; }
.partner__mail svg { transition: transform .3s var(--ease); }
.partner__mail:hover svg { transform: translateX(3px); }

.partner__figure {
  position: relative;
  margin: 0;
  border-radius: 5px;
  overflow: hidden;
  aspect-ratio: 502 / 313;
}

.partner__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  /* Tighten in on the handshake, as framed in the design */
  transform: scale(1.37);
  transform-origin: 58% 46%;
  filter: grayscale(1) contrast(1.02);
}

/* ---------- Partner tiers ---------- */
.tiers {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(.6rem, 1vw, .875rem);
  margin: clamp(1.75rem, 4vh, 2.4rem) 0 0;
  padding: 0;
  list-style: none;
}

.tier {
  padding: clamp(1.05rem, 1.78vw, 1.6rem);
  border: 1px solid rgba(20, 30, 45, .07);
  border-radius: 12px;
  background: var(--white);
  transition: transform .4s var(--ease-hover),
              box-shadow .4s var(--ease-hover),
              border-color .4s var(--ease-hover);
}

.tier--mint  { background: linear-gradient(140deg, #eafaff 0%, #ffffff 46%); }
.tier--green { background: linear-gradient(140deg, #d7edde 0%, #ffffff 52%); }
.tier--lilac { background: linear-gradient(320deg, #e6ebfb 0%, #ffffff 52%); }

@media (hover: hover) {
  .tier:hover {
    transform: translateY(-5px);
    box-shadow: 0 22px 44px -24px rgba(20, 35, 60, .34);
    border-color: rgba(255, 255, 255, .9);
  }
}

.tier__top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .5rem;
}

.tier__title {
  margin: 0;
  font-family: "K2D", var(--font-ui);
  font-weight: 500;
  font-size: clamp(1.02rem, 1.58vw, 1.42rem);
  line-height: 1.2;
  letter-spacing: -.016em;
}

.tier__icon {
  flex: none;
  width: clamp(1.8rem, 2.55vw, 2.3rem);
  height: auto;
}

.tier__text {
  margin: clamp(.85rem, 1.8vh, 1.15rem) 0 0;
  color: #4f525c;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(.9rem, 1.2vw, 1.06rem);
  line-height: 1.5;
  letter-spacing: -.004em;
}

/* =========================================================
   CLOSING CTA
   ========================================================= */
.closing {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  color: var(--white);
  background: #1c2b45;
  padding: clamp(3rem, 4.4vw, 4.6rem) 0 clamp(3.25rem, 5.1vw, 5.3rem);
}

.closing__media {
  position: absolute;
  inset: 0;
  z-index: -1;
}

.closing__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: 0;
  transition: opacity .8s var(--ease);
}
.closing__video.is-ready { opacity: 1; }

.closing__inner {
  position: relative;
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.closing__title {
  margin: 0;
  max-width: 13.5em;
  font-family: "K2D", var(--font-ui);
  font-weight: 600;
  font-size: clamp(1.9rem, 3.6vw, 3.7rem);
  line-height: 1.3;
  letter-spacing: -.022em;
}

.closing__sub {
  margin: clamp(1rem, 1.8vw, 1.85rem) 0 0;
  max-width: 36ch;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(1.1rem, 2.27vw, 2.35rem);
  line-height: 1.32;
  letter-spacing: -.012em;
}

.closing__actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1rem 2rem;
  margin-top: clamp(1.75rem, 3.3vw, 3.4rem);
}

.closing__actions .btn {
  margin-top: 0;
  padding: .75rem 1.7rem;
}

.closing__deadline {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(.9rem, 1.17vw, 1.19rem);
  letter-spacing: -.004em;
}

/* =========================================================
   FOOTER
   ========================================================= */
.footer {
  background: var(--white);
  /* Equal inset on all four sides so the panel floats as a card */
  padding: clamp(.75rem, 1.2vw, 1.5rem);
}

.footer__panel {
  --inset-lede: clamp(0px, 4.48vw, 5.38rem);   /* statement indent */
  --inset-cols: clamp(0px, 3.07vw, 3.7rem);    /* column indent */

  background: #1a1b1e;
  color: var(--white);
  border-radius: clamp(14px, 1.35vw, 26px);
  padding: clamp(1.5rem, 1.9vw, 2.25rem) clamp(1.25rem, 8.18vw, 9.8rem)
           clamp(1.75rem, 2.1vw, 2.5rem);
}

.footer__lede {
  margin: 0 0 0 var(--inset-lede);
  max-width: 32em;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(1.08rem, 1.83vw, 2.2rem);
  line-height: 1.16;
  letter-spacing: -.018em;
}

/* Gradient words */
.grad {
  -webkit-background-clip: text;
          background-clip: text;
  color: transparent;
  -webkit-text-fill-color: transparent;
}

/* Brand gradients. The source stops (10.58% / 35.58%) were measured against a
   full-width text layer; scoped to a single word they resolve almost instantly
   and the word reads flat. Ramped across the word instead, which matches the
   design. To use the raw values, change 100% back to 10.58% / 35.58%. */
.grad--buyer    { background-image: linear-gradient(90deg, #2C5BFD 0%, #5EE0F7 100%); }
.grad--supplier { background-image: linear-gradient(90deg, #78CB9B 0%, #C1D177 100%); }

@supports not ((-webkit-background-clip: text) or (background-clip: text)) {
  .grad--buyer    { color: #4a8dfd; -webkit-text-fill-color: currentColor; }
  .grad--supplier { color: #8ecf9a; -webkit-text-fill-color: currentColor; }
}

.footer__dash { color: var(--white); }

.footer__rule {
  height: 1px;
  margin: clamp(1rem, 1.2vw, 1.45rem) 0 clamp(1rem, 1.15vw, 1.4rem);
  border: 0;
  background: #37383a;
}

/* ---------- Columns ---------- */
.footer__cols {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 2rem 3rem;
  max-width: 83%;
  margin-left: var(--inset-cols);
}

.footer__label {
  margin: 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(.82rem, 1.03vw, 1.24rem);
  line-height: 1.2;
  letter-spacing: -.004em;
}

.footer__value {
  margin: clamp(.55rem, .73vw, .88rem) 0 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(.82rem, 1.03vw, 1.24rem);
  line-height: 1.2;
  letter-spacing: -.004em;
  color: rgba(255, 255, 255, .93);
}

.footer__value + .footer__value { margin-top: clamp(.4rem, .55vw, .66rem); }

.footer__value a { transition: opacity .25s var(--ease); }
.footer__value a:hover { opacity: .7; }

.footer__wordmark {
  margin: clamp(.5rem, .68vw, .82rem) 0 0;
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: clamp(1.02rem, 1.27vw, 1.54rem);
  letter-spacing: .32em;
  text-transform: uppercase;
  line-height: 1;
}

.footer__wordmark sup {
  position: relative;
  top: -.12em;
  font-size: .38em;
  letter-spacing: 0;
  vertical-align: super;
}

/* ---------- Social ---------- */
.footer__social {
  display: flex;
  gap: clamp(.5rem, .68vw, .82rem);
  margin: clamp(1.5rem, 1.8vw, 2.2rem) 0 0;
  padding: 0;
  list-style: none;
}

.footer__social a {
  display: grid;
  place-items: center;
  width: clamp(1.65rem, 1.72vw, 2.06rem);
  height: clamp(1.65rem, 1.72vw, 2.06rem);
  border-radius: 50%;
  background: #d1d1d2;
  color: #050506;
  transition: background-color .25s var(--ease), transform .25s var(--ease);
}

.footer__social a:hover {
  background: var(--white);
  transform: translateY(-2px);
}

.footer__social img {
  width: 52%;
  height: 52%;
  object-fit: contain;
}

/* =========================================================
   REVEAL ANIMATIONS
   Applied only when JS adds .has-motion to <html>, so the page
   is fully readable without scripts and for reduced-motion users.
   ========================================================= */

/* Section titles are flex rows (arrow + text). Keeping the text in its own
   child means per-word spans never become flex items and inherit the gap. */
.edition__title .ttl,
.december__title .ttl,
.partner__title .ttl { min-width: 0; }

/* Corner radius each clip reveal should preserve while wiping */
.card,
.pillar          { --r: 14px; }
.tier            { --r: 12px; }
.partner__figure { --r: 5px; }

/* These reveals run as @keyframes, never as transitions. A `transition`
   shorthand here would out-specify each component's own transition and
   kill its hover easing. `animation` is a separate property, so both
   coexist cleanly. */
@media (prefers-reduced-motion: no-preference) {

  /* --- Words fade up to full strength, left to right --- */
  .has-motion [data-anim="words"] .w { opacity: .13; }

  .has-motion [data-anim="words"].is-in .w {
    animation: word-in .55s var(--ease) var(--dly, 0ms) both;
  }

  /* --- Blocks drift up as they fade in --- */
  .has-motion [data-anim="fade"] {
    opacity: 0;
    translate: 0 22px;          /* `translate`, not `transform`,
                                   so hover transforms still work */
  }
  .has-motion [data-anim="fade"].is-in {
    animation: rise-in .7s var(--ease) var(--dly, 0ms) both;
  }

  /* --- Panels wipe open from their bottom edge --- */
  .has-motion [data-anim="clip"] {
    clip-path: inset(100% 0 0 0 round var(--r, 14px));
  }
  .has-motion [data-anim="clip"].is-in {
    animation: wipe-up .85s var(--ease) var(--dly, 0ms) both;
  }
}

@keyframes word-in {
  from { opacity: .13; }
  to   { opacity: 1; }
}

@keyframes rise-in {
  from { opacity: 0; translate: 0 22px; }
  to   { opacity: 1; translate: 0 0; }
}

@keyframes wipe-up {
  from { clip-path: inset(100% 0 0 0 round var(--r, 14px)); }
  to   { clip-path: inset(0 0 0 0 round var(--r, 14px)); }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .december__grid { grid-template-columns: 1fr; gap: 1.75rem; }
  .footer__cols { max-width: none; }
  .closing__sub { max-width: 40ch; }
  .tiers { grid-template-columns: 1fr; }
  .december__copy { padding-top: 0; max-width: 46ch; }
}

@media (max-width: 1100px) {
  .cards { grid-template-columns: repeat(2, 1fr); gap: 10px; }
}

@media (max-width: 860px) {
  /* The mobile design keeps all three links inline beside the mark, so the
     hamburger only appears when they genuinely stop fitting (see 379px). */
  .nav__inner { gap: 1rem; }
  .nav__logo { height: clamp(2rem, 10vw, 2.6rem); }   /* 39px @ 390 */
  .nav__menu { gap: clamp(1rem, 4.4vw, 2rem); }
  .nav__link {
    font-size: clamp(.85rem, 3.3vw, 1.05rem);
    padding-block: .65rem;                 /* 44px touch target */
  }
}

@media (max-width: 379px) {
  .nav__toggle { display: flex; }

  .nav__menu {
    position: absolute;
    top: calc(100% + .75rem);
    right: var(--gutter);
    left: var(--gutter);
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: .5rem;
    border-radius: 14px;
    background: rgba(16, 24, 56, .78);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border: 1px solid rgba(255, 255, 255, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity .3s var(--ease), transform .3s var(--ease), visibility .3s;
    z-index: 20;
  }

  .nav__menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav__link {
    padding: .9rem 1rem;
    font-size: 1.05rem;
  }
  .nav__link::after { display: none; }
}

/* ---------- Layout below the nav breakpoint ---------- */
@media (max-width: 860px) {
  .hero__inner { gap: clamp(2rem, 6vh, 3.25rem); }
  .hero__content { align-self: center; }

  .study { padding-bottom: clamp(10rem, 30vh, 16rem); }
  .study__lede { max-width: none; font-size: clamp(1.15rem, 4.1vw, 1.6rem); }
  .br-lg { display: none; }
  .chips { gap: .75rem; }
  .chip { white-space: normal; padding: 1rem 1.85rem 1rem 1.35rem; }

  .edition__body { padding-left: 0; }
  .edition__copy, .edition__note { max-width: none; }
  .edition__note { margin-right: 0; }
  .edition__foot { flex-direction: column; align-items: flex-start; }
  .edition__foot .btn { width: 100%; max-width: 22rem; margin-right: 0; justify-content: space-between; }
  .card { gap: 0.5rem; min-height: 0; }

  .december__title,
  .december__copy { margin-left: 0; }
  .pillar { min-height: 0; }

  .partner__title { margin-left: 0; }
  .partner__grid { grid-template-columns: 1fr; margin-left: 0; }
  .partner__copy p { max-width: none; }
  .partner__actions .btn { width: auto; }

  .closing__title { max-width: none; }
  .closing__sub { max-width: none; }
  .closing__actions { justify-content: flex-start; }
  .closing__actions .btn { width: 100%; max-width: 22rem; justify-content: space-between; }

  .footer__panel { --inset-lede: 0px; --inset-cols: 0px; }
  .footer__lede { max-width: none; }
  .footer__cols { flex-direction: row; flex-wrap: wrap; gap: 1.75rem 1.5rem; }
  .footer__col:nth-child(3) { flex-basis: 100%; }

  /* =======================================================
     CTA moves to the end of each section on small screens.
     The buttons sit inside wrapper elements, so `order` alone
     can't reach across parents — `display: contents` dissolves
     those wrappers and lets every child order freely against
     its section. Desktop markup and DOM order are untouched.
     ======================================================= */

  /* --- Supplier Readiness Study --- */
  .edition__inner { display: flex; flex-direction: column; }
  .edition__body,
  .edition__foot  { display: contents; }

  .edition__title        { order: 1; }
  .edition__lead         { order: 2; }
  .edition__copy         { order: 3; }
  .edition__note         { order: 4; margin-top: clamp(1.5rem, 3.5vh, 2.4rem); }
  .cards                 { order: 5; }
  .edition__foot .btn    { order: 6; margin-top: clamp(1.75rem, 4vh, 2.6rem); }

  /* --- Partner With Us --- */
  .partner__inner { display: flex; flex-direction: column; }
  .partner__grid,
  .partner__copy  { display: contents; }

  .partner__title    { order: 1; }
  .partner__copy p   { order: 2; }
  .partner__copy p:first-child { margin-top: clamp(2rem, 5vh, 3.4rem); }
  .partner__figure   { order: 3; margin-top: clamp(1.75rem, 4vh, 2.6rem); }
  .tiers             { order: 4; }
  .partner__actions  { order: 5; margin-top: clamp(1.75rem, 4vh, 2.6rem); }

  /* --- Closing CTA: deadline above, so the button ends the section --- */
  .closing__actions { flex-direction: column; align-items: flex-start; gap: 1rem; }
  .closing__deadline { order: -1; }
}

/* =========================================================
   PHONE  —  scaled from the mobile hero design (574px frame)
   ========================================================= */
@media (max-width: 620px) {
  :root { --gutter: clamp(1.15rem, 9.06vw, 2.6rem); }   /* 35px @ 390 */

  .hero { min-height: clamp(32rem, 88svh, 48rem); }
  .hero__inner { padding-bottom: clamp(3rem, 12vh, 6.5rem); }

  .hero__title {
    font-size: clamp(2.3rem, 12.54vw, 3.4rem);          /* 49px @ 390 */
    line-height: 1.22;
    letter-spacing: -.02em;
  }

  .hero__subtitle {
    margin-top: clamp(1.1rem, 6.7vw, 2rem);             /* 26px @ 390 */
    font-size: clamp(1.45rem, 8.19vw, 2.2rem);          /* 32px @ 390 */
    line-height: 1.32;
  }

  /* Content-sized, not full-bleed, as in the design */
  .hero .btn {
    width: auto;
    max-width: none;
    margin-top: clamp(1.9rem, 15.7vw, 4rem);            /* 61px @ 390 */
    justify-content: flex-start;
    gap: clamp(.9rem, 3.5vw, 1.4rem);
    padding: clamp(.85rem, 4.18vw, 1.25rem) clamp(1.1rem, 5.23vw, 1.6rem);
    font-size: clamp(.85rem, 3.83vw, 1.05rem);
    border-radius: 9px;
  }

  .hosted__label { font-size: clamp(.9rem, 3.83vw, 1.15rem); }
  .hosted__logo  { font-size: clamp(1.25rem, 5.92vw, 1.75rem); letter-spacing: .28em; }

  /* --- Legibility: nothing below ~12.5px on a phone --- */
  .card__label   { font-size: .78rem; }
  .card__icon    { width: 30px; height: 30px; }
  .card__title   { font-size: 1.8rem; }
  .footer__label,
  .footer__value { font-size: .95rem; }

  /* --- Touch targets: 44px minimum --- */
  .footer__social a {
    width: 2.6rem;
    height: 2.6rem;
  }

  .footer__value a,
  .partner__mail {
    display: inline-flex;
    align-items: center;
    min-height: 2.75rem;
  }

  .footer__value { margin-top: 0; }
  .footer__value + .footer__value { margin-top: 0; }
}

@media (max-width: 480px) {
  .hosted__logo { letter-spacing: .26em; }

  .chips { flex-direction: column; align-items: flex-start; }
  .chip { width: 100%; padding-right: 2.25rem; }
  .study__photo { height: clamp(11rem, 34%, 16rem); }

  .cards { grid-template-columns: 1fr; }
  .edition__title { font-size: 1.02rem; }
}

/* Short landscape screens */
@media (max-height: 620px) and (min-width: 861px) {
  .hero { min-height: 34rem; }
}

/* =========================================================
   MOTION / CONTRAST PREFERENCES
   ========================================================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
  }
  .hero__video,
  .december__video,
  .closing__video { display: none; }

  .hero__media {
    background: url("../assest/images/hero-poster.jpg") center / cover no-repeat;
  }
  .december__media,
  .closing__media {
    background: url("../assest/images/what-happens-poster.jpg") center / cover no-repeat;
  }
}


/* =========================================================
   PARTNER CONTACT MODAL
   ========================================================= */
body.modal-open { overflow: hidden; }

.p-modal {
  position: fixed;
  inset: 0;
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.p-modal.is-open { display: flex; }

.p-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(15, 17, 20, .55);
  backdrop-filter: blur(2px);
}

.p-modal__panel {
  position: relative;
  width: 100%;
  max-width: 30rem;
  max-height: 90vh;
  overflow-y: auto;
  padding: clamp(1.6rem, 3.4vw, 2.2rem);
  border-radius: 16px;
  background: var(--white);
  box-shadow: 0 30px 60px -20px rgba(0, 0, 0, .35);
}

.p-modal__close {
  position: absolute;
  top: 1rem;
  right: 1rem;
  width: 2.1rem;
  height: 2.1rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: 50%;
  background: var(--chip-bg);
  color: var(--ink-700);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color .2s var(--ease);
}
.p-modal__close:hover { background: var(--chip-line); }

.p-modal__title {
  margin: 0 0 .4rem;
  padding-right: 2rem;
  font-family: "K2D", var(--font-ui);
  font-weight: 700;
  font-size: clamp(1.15rem, 2vw, 1.4rem);
  color: var(--ink-900);
}

.p-modal__subtitle {
  margin: 0 0 1.4rem;
  font-family: var(--font-ui);
  font-size: .92rem;
  color: var(--ink-600);
}

.p-modal__form {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.p-modal__form button[type="submit"] {
  width: 100%;
  justify-content: center;
}

.p-modal__field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .85rem;
  color: var(--ink-700);
}

.p-modal__label { display: block; }
.p-modal__req { color: var(--mark-blue); }

.p-modal__field input,
.p-modal__field textarea {
  padding: .65rem .8rem;
  border: 1px solid var(--chip-line);
  border-radius: 10px;
  background: var(--white);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: .95rem;
  color: var(--ink-900);
  resize: vertical;
}
.p-modal__field input:focus,
.p-modal__field textarea:focus { outline: none; border-color: var(--mark-blue); }

/* Honeypot — hidden from people, still reachable by bots that fill every field */
.p-modal__hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* =========================================================
   FAQ
   ========================================================= */
.faq {
  position: relative;
  background: var(--white);
  color: var(--ink-900);
  padding: clamp(4rem, 11vh, 7rem) 0 clamp(4.5rem, 12vh, 8rem);
}

.faq__inner {
  max-width: calc(var(--shell) + var(--gutter) * 2);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.faq__title {
  margin: 0 0 clamp(2rem, 5vh, 3rem);
  font-family: "K2D", var(--font-ui);
  font-weight: 700;
  font-size: clamp(1.6rem, 3.2vw, 2.3rem);
  line-height: 1.2;
  text-align: center;
}

.faq__list {
  max-width: 46rem;
  margin: 0 auto;
}

.faq__group {
  margin: 0 0 .75rem;
  padding-top: clamp(1.6rem, 4vh, 2.25rem);
  border-top: 1px solid var(--chip-line);
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--mark-blue);
}

.faq__item {
  border-bottom: 1px solid var(--chip-line);
}
.faq__item:first-of-type { border-top: 1px solid var(--chip-line); }

.faq__q {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1.25rem;
  padding: 1.25rem 0;
  font-family: var(--font-ui);
  font-weight: 600;
  font-size: clamp(.98rem, 1.4vw, 1.08rem);
  color: var(--ink-900);
  cursor: pointer;
  list-style: none;
}
.faq__q::marker,
.faq__q::-webkit-details-marker { display: none; content: ""; }

.faq__icon {
  flex: none;
  color: var(--ink-600);
  transition: transform .3s var(--ease);
}
.faq__item[open] .faq__icon { transform: rotate(180deg); }

.faq__a {
  margin: 0 0 1.35rem;
  padding-right: clamp(0rem, 4vw, 1.9rem);
  font-family: var(--font-ui);
  font-weight: 400;
  font-size: .96rem;
  line-height: 1.65;
  color: var(--ink-600);
}
.faq__a + .faq__a { margin-top: -.55rem; }

@media (max-width: 640px) {
  .faq__q { font-size: .98rem; gap: .85rem; }
}